开通平台社区数

src/views/modules/renFangTongJi/index.vue

@@ -1,13 +1,29 @@
 <template>
-  <div class="g-cnt">
-    <el-card class="m-tb">
-      <h2>下级平台使用进度汇总</h2>
+  <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"
-        :max-height="maxTableHeight"
+        :height="maxTableHeight"
       >
         <el-table-column label="序号" type="index" align="center" width="50" />
         <el-table-column prop="orgName" label="所属组织"> </el-table-column>
@@ -36,7 +52,7 @@
           label="闲置房屋总数"
         ></el-table-column>
       </el-table>
-    </el-card>
+    </div>
 
     <!-- 修改弹出框 -->
     <el-dialog
@@ -49,7 +65,7 @@
       @closed="displayedDetail = false"
     >
     </el-dialog>
-  </div>
+  </el-card>
 </template>
 
 <script>
@@ -67,11 +83,69 @@ export default {
 
       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 - 450;
+      return this.clientHeight - 420;
     },
     ...mapGetters(["clientHeight"]),
   },
@@ -81,9 +155,83 @@ export default {
     },
   },
   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";
 
@@ -107,4 +255,54 @@ export default {
 <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>