epmet-oper-gov/src/views/modules/renFangTongJi/index.vue

<template>
  <el-card class="g-cnt">
    <div class="m-cards">
      <div class="item" :key="item.name" v-for="item in list">
        <div class="item-left">
          <div class="num">{{ item.num }}</div>
          <div class="name">{{ item.name }}</div>
        </div>
        <div class="item-right">
          <div class="hint">
            <div class="hint-title">较上月</div>
            <b v-if="item.variation >= 0">+ {{ item.variationAbs }}</b>
            <b v-else>- {{ item.variationAbs }}</b>
          </div>
        </div>
      </div>
    </div>

    <div class="m-tb">
      <h3>下级平台使用进度汇总</h3>
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        class="tb"
        :height="maxTableHeight"
      >
        <el-table-column label="序号" type="index" align="center" width="50" />
        <el-table-column prop="orgName" label="所属组织"> </el-table-column>
        <el-table-column prop="usingCommunityNum" label="开通平台社区数">
        </el-table-column>
        <el-table-column prop="userTotal" label="人口总数"></el-table-column>
        <el-table-column
          prop="czUserTotal"
          label="常住人口总数"
        ></el-table-column>
        <el-table-column
          prop="ldUserTotal"
          label="流动人口总数"
        ></el-table-column>
        <el-table-column prop="houseTotal" label="房屋总数"></el-table-column>
        <el-table-column
          prop="zzHouseTotal"
          label="自住房屋总数"
        ></el-table-column>
        <el-table-column
          prop="czHouseTotal"
          label="出租房屋总数"
        ></el-table-column>
        <el-table-column
          prop="xzHouseTotal"
          label="闲置房屋总数"
        ></el-table-column>
      </el-table>
    </div>

    <!-- 修改弹出框 -->
    <el-dialog
      :visible.sync="displayedDetail"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      title="开放社区数"
      width="850px"
      top="5vh"
      @closed="displayedDetail = false"
    >
    </el-dialog>
  </el-card>
</template>

<script>
import { requestPost } from "@/js/dai/request";
import nextTick from "dai-js/tools/nextTick";
import { mapGetters } from "vuex";

export default {
  name: "renFangTongJi",
  components: {},
  data() {
    return {
      displayedDetail: false,
      tableData: [],

      orgId: "",
      orgType: "",

      list: [
        {
          name: "开通平台社区数",
          num: "--",
          variation: 0,
          variationAbs: "0",
        },

        {
          name: "人口总数",
          num: "--",
          variation: 0,
          variationAbs: "0",
        },

        {
          name: "常住人口数",
          num: "--",
          variation: 0,
          variationAbs: "0",
        },

        {
          name: "流动人口数",
          num: "--",
          variation: 0,
          variationAbs: "0",
        },

        {
          name: "房屋总数",
          num: "--",
          variation: 0,
          variationAbs: "0",
        },

        {
          name: "自住房屋数",
          num: "--",
          variation: 0,
          variationAbs: "0",
        },

        {
          name: "出租房屋数",
          num: "--",
          variation: 0,
          variationAbs: "0",
        },

        {
          name: "闲置房屋数",
          num: "--",
          variation: 0,
          variationAbs: "0",
        },
      ],
    };
  },
  computed: {
    maxTableHeight() {
      return this.clientHeight - 420;
    },
    ...mapGetters(["clientHeight"]),
  },
  watch: {
    orgId() {
      this.getTableData();
    },
  },
  mounted() {
    this.getCommunityData();
    this.getResiData();
    this.getHouseData();
    this.getTableData();
  },
  methods: {
    async getCommunityData() {
      const url = "/gov/org/agency/usingCommunityStats";

      const { data, code, msg } = await requestPost(url, {
        orgId: this.orgId,
        orgType: this.orgType,
      });

      if (code === 0) {
        const { list } = this;
        let item1 = list.find((item) => item.name == "开通平台社区数");
        item1.num = data.usingCommunityNum;
        item1.variation = parseInt(data.usingCommunityNumJSY);
        item1.variationAbs = Math.abs(item1.variation);
      }
    },

    async getResiData() {
      const url = "/epmetuser/icresiuser/userchart";

      const { data, code, msg } = await requestPost(url, {
        orgId: this.orgId,
        orgType: this.orgType,
      });

      if (code === 0) {
        const { list } = this;
        let item1 = list.find((item) => item.name == "人口总数");
        item1.num = data.userTotal;
        item1.variation = parseInt(data.userTotalJSY);
        item1.variationAbs = Math.abs(item1.variation);
        let item2 = list.find((item) => item.name == "常住人口数");
        item2.num = data.czUserTotal;
        item2.variation = parseInt(data.czUserTotalJSY);
        item2.variationAbs = Math.abs(item2.variation);
        let item3 = list.find((item) => item.name == "流动人口数");
        item3.num = data.ldUserTotal;
        item3.variation = parseInt(data.ldUserTotalJSY);
        item3.variationAbs = Math.abs(item3.variation);
      }
    },

    async getHouseData() {
      const url = "/gov/org/house/housechart";

      const { data, code, msg } = await requestPost(url, {
        orgId: this.orgId,
        orgType: this.orgType,
      });

      if (code === 0) {
        const { list } = this;
        let item1 = list.find((item) => item.name == "房屋总数");
        item1.num = data.houseTotal;
        item1.variation = parseInt(data.houseTotalJSY);
        item1.variationAbs = Math.abs(item1.variation);
        let item2 = list.find((item) => item.name == "自住房屋数");
        item2.num = data.zzHouseTotal;
        item2.variation = parseInt(data.zzHouseTotalJSY);
        item2.variationAbs = Math.abs(item2.variation);
        let item3 = list.find((item) => item.name == "出租房屋数");
        item3.num = data.czHouseTotal;
        item3.variation = parseInt(data.czHouseTotalJSY);
        item3.variationAbs = Math.abs(item3.variation);
        let item4 = list.find((item) => item.name == "闲置房屋数");
        item4.num = data.xzHouseTotal;
        item4.variation = parseInt(data.xzHouseTotalJSY);
        item4.variationAbs = Math.abs(item4.variation);
      }
    },

    async getTableData() {
      const url = "/gov/org/house/subuserhouselist";

      const { data, code, msg } = await requestPost(url, {
        orgId: this.orgId,
        orgType: this.orgType,
      });

      if (code === 0) {
        this.tableData = data
          ? data.map((item) => {
              return item;
            })
          : [];
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/scss/c/config";
@import "@/assets/scss/c/function";

.m-cards {
  display: flex;
  flex-wrap: wrap;
  //   align-items: center;

  .item {
    display: flex;
    width: 24%;
    margin-top: 15px;
    margin-right: 1%;
    box-sizing: border-box;
    color: #ffffff;
    padding: 12px;
    border-radius: 4px;
    background-image: linear-gradient(to left, #43c8c4, #2aa5c6);

    .item-right {
      margin-left: auto;
    }

    .item-left {
      text-align: center;
    }

    .num {
      font-size: 28px;
      font-weight: bold;
      line-height: 40px;
    }
    .name {
      font-size: 14px;
      line-height: 20px;
    }

    .hint {
      margin-top: 10px;
      line-height: 20px;
      text-align: center;
      font-size: 18px;
      .hint-title {
        font-size: 14px;
      }
    }
  }
}

.m-tb {
  margin-top: 20px;
}
</style>