拼图

src/components/ColorCell/index.vue

@@ -42,7 +42,7 @@ export default {
     display: flex;
     align-items: center;
     justify-content: space-between;
-
+    overflow: hidden;
     .left-color {
       flex: 1;
       height: 100%;
@@ -62,6 +62,7 @@ export default {
       .rigth-bottom {
         background: red;
         border-top: 1px solid white;
+        // border-left: 1px solid white;
       }
     }
     .house_number {

src/components/NavigationBar/logCentre.vue

@@ -321,7 +321,6 @@ export default {
     async getDeptList() {
       let result = await treeselect();
       this.deptList = result.data[0].children;
-      // console.log(result);
     },
     /**
      * 级联筛选

src/store/getters.js

@@ -22,5 +22,7 @@ const getters = {
   yjTotal: (state) => state.taicang.yjTotal,
   xiaoquIntroduce: (state) => state.taicang.xiaoquIntroduce,
   colorListL: (state) => state.taicang.colorListL,
+  threeCell: (state) => state.taicang.threeCell,
+  pie: (state) => state.taicang.pie,
 };
 export default getters;

src/store/modules/taicang.js

@@ -1,7 +1,27 @@
 import { getYj } from "@/api/taicangpop/block.js";
-import { getxiaoqu } from "@/api/home";
+import {
+  getxiaoqu,
+  getTotaldata,
+  echartsData,
+  getPersonData,
+} from "@/api/home";
 import { getColorList } from "@/api/taicangpop/new.js";
-
+const order = [
+  "HZ",
+  "HL",
+  "HO",
+  "HF",
+  "NZ",
+  "NL",
+  "NO",
+  "NF",
+  "户籍",
+  "流动",
+  "中共党员",
+  "帮扶对象",
+  "重点人群",
+  "退伍军人",
+];
 const taicang = {
   state: {
     yjTotal: 0,
@@ -32,6 +52,16 @@ const taicang = {
       },
     },
     colorListL: [],
+    threeCell: {
+      houseTotal: 0,
+      personTotal: 0,
+      netTotal: 0,
+      buildingTotal: 0,
+    },
+    pie: {
+      total: 0,
+      update: 0,
+    },
   },
   mutations: {
     SET_YJ_TOTAL: (state, total) => {
@@ -47,6 +77,20 @@ const taicang = {
         state.rightTopColor
       );
     },
+    SET_THREE_CELL: (state, obj) => {
+      state.threeCell = {
+        houseTotal: obj["网格户数据"],
+        personTotal: obj["网格人数据"],
+        netTotal: obj["网格总数数据"],
+        buildingTotal: obj["网格楼栋数据"],
+      };
+    },
+    SET_PIE: (state, obj) => {
+      state.pie = {
+        total: obj["所有户数据"],
+        update: obj["修改户数据"],
+      };
+    },
   },
   actions: {
     /**预警总数 */
@@ -81,13 +125,41 @@ const taicang = {
         });
       });
     },
+    /**
+     * 获取户总数 /人口数 / 网格总数 / 楼栋总数
+     */
+    getThreeCell({ commit }, queryParams) {
+      return new Promise((resolve, reject) => {
+        getTotaldata().then((res) => {
+          commit("SET_THREE_CELL", res.data);
+          resolve();
+        });
+      });
+    },
+    /**
+     * 获取住户 / 居民 饼图数据
+     */
+    GetPie({ commit }, queryParams) {
+      return new Promise((resolve, reject) => {
+        if (queryParams.type == "house") {
+          echartsData().then((res) => {
+            commit("SET_PIE", res.data);
+            resolve();
+          });
+        } else {
+          getPersonData().then((res) => {
+            commit("SET_PIE", res.data);
+            resolve();
+          });
+        }
+      });
+    },
   },
 };
 
 function handleColor(list, leftColor, rightTopColor) {
   list.map((item) => {
     let isColor = /^[a-zA-Z]+$/.test(item.name);
-    console.log(isColor);
     if (isColor) {
       item.color = item.name;
       for (let key in leftColor) {
@@ -98,6 +170,12 @@ function handleColor(list, leftColor, rightTopColor) {
       }
     }
   });
+  list = list.filter(
+    (obj, index, self) => index === self.findIndex((t) => t.name === obj.name)
+  );
+  list.sort((a, b) => {
+    return order.indexOf(a.name) - order.indexOf(b.name);
+  });
   return list;
 }
 

src/views/components/IndexModel/components/colorList.vue

@@ -3,7 +3,15 @@
     <div class="list-item" v-for="(item, index) in colorListL" :key="index">
       <div class="item-name">
         <ColorCell :item="item" v-if="item.color" style="margin-right: 12px" />
-        <span> {{ item.name }}</span>
+        <span>
+          {{ item.name }}
+          <span v-show="item.name == '户籍'"
+            >(空关{{ colorListL[2].house }}户)</span
+          >
+          <span v-show="item.name == '流动'"
+            >(空关{{ colorListL[6].house }}户)</span
+          >
+        </span>
       </div>
       <div class="item-value">
         <span>{{ item.house }}</span>
@@ -39,9 +47,8 @@ export default {
   background-size: 100% 100%;
   display: flex;
   flex-direction: column;
-  padding: 0 28px;
+  padding: 25px;
-  padding-top: 20px;
+  padding-bottom: 23px;
-  padding-bottom: 37px;
   .list-item {
     flex: 1;
     display: flex;
@@ -67,19 +74,22 @@ export default {
       }
     }
   }
-  .list-item:nth-child(10) .item-value,
+  .list-item:nth-child(9) .item-value,
-  .list-item:nth-child(11) .item-value {
+  .list-item:nth-child(10) .item-value {
     span:nth-child(odd) {
       font-size: 16px;
       color: #ffb400;
       font-family: "DIN-Medium-2.otf";
     }
   }
-  .list-item:nth-child(10),
+  .list-item:nth-child(9),
-  .list-item:nth-child(11) {
+  .list-item:nth-child(10) {
     .item-name {
       color: #fff;
     }
   }
+  .list-item:nth-child(10) {
+    border: 0;
+  }
 }
 </style>

src/views/components/IndexModel/components/pieChart.vue

@@ -2,7 +2,7 @@
   <div class="pie-chart">
     <div class="tabLits">
       <div
-        @click="handleClick(item, index)"
+        @click="handleClick(item.type, index)"
         v-for="(item, index) in tabList"
         :key="index"
         :class="currentIndex == index ? 'currentIndex' : ''"
@@ -14,7 +14,8 @@
       <div class="pie-title">目前数据更新情况</div>
       <div id="pie-echarts"></div>
       <div class="lable">
-        <span style="color: #ffb400">0</span> / <span>0</span>
+        <span style="color: #ffb400">{{ pie.update }}</span> /
+        <span>{{ pie.total }}</span>
         {{ currentIndex == 0 ? "户" : "人" }}
       </div>
     </div>
@@ -23,24 +24,37 @@
 
 <script>
 var echarts = require("echarts");
+import { mapGetters } from "vuex";
 export default {
+  computed: {
+    ...mapGetters(["pie"]),
+  },
   data() {
     return {
       currentIndex: 0,
       tabList: [
-        { name: "住户", value: 0 },
+        { name: "住户", type: "house" },
-        { name: "居民", value: 1 },
+        { name: "居民", value: "person" },
       ],
     };
   },
   mounted() {
-    this.initPieEcharts(80);
+    this.getPie("house");
   },
   methods: {
-    handleClick(item, index) {
+    handleClick(type, index) {
       if (this.currentIndex == index) return;
+      this.getPie(type);
       this.currentIndex = index;
     },
+
+    getPie(type) {
+      this.$store.dispatch("GetPie", { type: type }).then((res) => {
+        let percent = Math.trunc((this.pie.update / this.pie.total) * 100);
+        this.initPieEcharts(percent);
+      });
+    },
+
     initPieEcharts(num) {
       if (!num) {
         num = 0;
@@ -154,7 +168,7 @@ export default {
           },
         ],
       };
-      myChart.setOption(option);
+      myChart.setOption(option, true);
     },
   },
 };

src/views/components/IndexModel/components/threeCell.vue

@@ -4,11 +4,11 @@
       <img src="@/assets/images/ui/icon_3.png" alt="" />
       <div class="lable-value">
         <div class="value-item">
-          <div class="value-data">17873</div>
+          <div class="value-data">{{ threeCell.houseTotal }}</div>
           <div class="value-lable">总户数</div>
         </div>
         <div class="value-item" style="margin-left: 6px">
-          <div class="value-data">39724</div>
+          <div class="value-data">{{ threeCell.personTotal }}</div>
           <div class="value-lable">人口数</div>
         </div>
       </div>
@@ -16,14 +16,14 @@
     <div class="cell-item">
       <img src="@/assets/images/ui/icon_1.png" alt="" />
       <div class="value-item">
-        <div class="value-data">19</div>
+        <div class="value-data">{{ threeCell.netTotal }}</div>
         <div class="value-lable">网格总数</div>
       </div>
     </div>
     <div class="cell-item">
       <img src="@/assets/images/ui/icon_2.png" alt="" />
       <div class="value-item">
-        <div class="value-data">19</div>
+        <div class="value-data">{{ threeCell.buildingTotal }}</div>
         <div class="value-lable">楼幢总数</div>
       </div>
     </div>
@@ -31,7 +31,15 @@
 </template>
 
 <script>
-export default {};
+import { mapGetters } from "vuex";
+export default {
+  computed: {
+    ...mapGetters(["threeCell"]),
+  },
+  data() {
+    return {};
+  },
+};
 </script>
 
 <style lang="scss" scoped>

src/views/index.vue

@@ -43,7 +43,8 @@ export default {
   },
   mounted() {
     this.$store.dispatch("GetXiaoquInfo", this.dept.deptId);
-    this.$store.dispatch("GetcolorList", this.dept.deptId);
+    this.$store.dispatch("getThreeCell");
+    this.$store.dispatch("GetcolorList");
   },
   methods: {},
 };