左右折叠面板根据设计联动

src/components/LeafletMap/index.vue

@@ -1,5 +1,8 @@
 <template>
-  <div id="leaflet-map"></div>
+  <div class="leaflet-map-container">
+    <div id="leaflet-map"></div>
+    <slot name="select"></slot>
+  </div>
 </template>
 
 <script>
@@ -32,6 +35,11 @@ export default {
 </script>
 
 <style>
+.leaflet-map-container {
+  position: relative;
+  height: 100%;
+  width: 100%;
+}
 #leaflet-map {
   height: 100%;
   width: 100%;

src/store/getters.js

@@ -24,5 +24,6 @@ const getters = {
   colorListL: (state) => state.taicang.colorListL,
   threeCell: (state) => state.taicang.threeCell,
   pie: (state) => state.taicang.pie,
+  queryParamsIndex: (state) => state.taicang.queryParams,
 };
 export default getters;

src/store/modules/taicang.js

@@ -6,24 +6,13 @@ import {
   getPersonData,
 } from "@/api/home";
 import { getColorList } from "@/api/taicangpop/new.js";
-const order = [
+
-  "HZ",
-  "HL",
-  "HO",
-  "HF",
-  "NZ",
-  "NL",
-  "NO",
-  "NF",
-  "户籍",
-  "流动",
-  "中共党员",
-  "帮扶对象",
-  "重点人群",
-  "退伍军人",
-];
 const taicang = {
   state: {
+    queryParams: {
+      shequId: "",
+      xiaoquId: "",
+    },
     yjTotal: 0,
     leftColor: {
       HZ: "#008c5e",
@@ -64,6 +53,10 @@ const taicang = {
     },
   },
   mutations: {
+    SET_QUERY_PARAMS: (state, query) => {
+      state.queryParams.shequId = query.shequId;
+      state.queryParams.xiaoquId = query.xiaoquId;
+    },
     SET_YJ_TOTAL: (state, total) => {
       state.yjTotal = total;
     },
@@ -71,8 +64,28 @@ const taicang = {
       state.xiaoquIntroduce = introduce;
     },
     SET_COLOR_LIST: (state, list) => {
-      state.colorListL = handleColor(
+      state.colorListL = handleColor(state.colorListL, list);
-        list,
+    },
+    CLEAR_COLOR: (state) => {
+      let colorListL = [
+        { name: "HZ", house: 0, person: 0 },
+        { name: "HL", house: 0, person: 0 },
+        { name: "HO", house: 0, person: 0 },
+        { name: "HF", house: 0, person: 0 },
+        { name: "NZ", house: 0, person: 0 },
+        { name: "NL", house: 0, person: 0 },
+        { name: "NO", house: 0, person: 0 },
+        { name: "NF", house: 0, person: 0 },
+        { name: "户籍", house: 0, person: 0 },
+        { name: "流动", house: 0, person: 0 },
+        { name: "中共党员", house: 0, person: 0 },
+        { name: "帮扶对象", house: 0, person: 0 },
+        { name: "重点人群", house: 0, person: 0 },
+        { name: "退伍军人", house: 0, person: 0 },
+      ];
+
+      state.colorListL = resetColor(
+        colorListL,
         state.leftColor,
         state.rightTopColor
       );
@@ -119,7 +132,8 @@ const taicang = {
     /**获取colorList */
     GetcolorList({ commit }, queryParams) {
       return new Promise((resolve, reject) => {
-        getColorList().then((res) => {
+        commit("CLEAR_COLOR");
+        getColorList(queryParams).then((res) => {
           commit("SET_COLOR_LIST", res.data);
           resolve();
         });
@@ -130,7 +144,7 @@ const taicang = {
      */
     getThreeCell({ commit }, queryParams) {
       return new Promise((resolve, reject) => {
-        getTotaldata().then((res) => {
+        getTotaldata(queryParams).then((res) => {
           commit("SET_THREE_CELL", res.data);
           resolve();
         });
@@ -142,12 +156,14 @@ const taicang = {
     GetPie({ commit }, queryParams) {
       return new Promise((resolve, reject) => {
         if (queryParams.type == "house") {
-          echartsData().then((res) => {
+          delete queryParams.type;
+          echartsData(queryParams).then((res) => {
             commit("SET_PIE", res.data);
             resolve();
           });
         } else {
-          getPersonData().then((res) => {
+          delete queryParams.type;
+          getPersonData(queryParams).then((res) => {
             commit("SET_PIE", res.data);
             resolve();
           });
@@ -157,8 +173,20 @@ const taicang = {
   },
 };
 
-function handleColor(list, leftColor, rightTopColor) {
+function handleColor(colorList, list) {
-  list.map((item) => {
+  colorList.map((item) => {
+    let index = list.findIndex((it) => it.name == item.name);
+    if (index > -1) {
+      item.house = list[index].house;
+      item.person = list[index].person;
+    }
+  });
+
+  return colorList;
+}
+
+function resetColor(colorList, leftColor, rightTopColor) {
+  colorList.map((item) => {
     let isColor = /^[a-zA-Z]+$/.test(item.name);
     if (isColor) {
       item.color = item.name;
@@ -170,13 +198,7 @@ function handleColor(list, leftColor, rightTopColor) {
       }
     }
   });
-  list = list.filter(
+  return colorList;
-    (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;
 }
 
 export default taicang;

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

@@ -27,7 +27,7 @@ var echarts = require("echarts");
 import { mapGetters } from "vuex";
 export default {
   computed: {
-    ...mapGetters(["pie"]),
+    ...mapGetters(["pie", "queryParamsIndex"]),
   },
   data() {
     return {
@@ -41,15 +41,31 @@ export default {
   mounted() {
     this.getPie("house");
   },
+  watch: {
+    queryParamsIndex: {
+      handler(newVal, oldVal) {
+        this.getPie();
+      },
+      deep: true,
+    },
+  },
   methods: {
     handleClick(type, index) {
       if (this.currentIndex == index) return;
-      this.getPie(type);
+
       this.currentIndex = index;
+      this.getPie();
     },
 
-    getPie(type) {
+    getPie() {
-      this.$store.dispatch("GetPie", { type: type }).then((res) => {
+      let queryParams = {
+        type: this.tabList[this.currentIndex].type,
+        shequId:
+          this.queryParamsIndex.shequId == 100
+            ? undefined
+            : this.queryParamsIndex.shequId,
+      };
+      this.$store.dispatch("GetPie", queryParams).then((res) => {
         let percent = Math.trunc((this.pie.update / this.pie.total) * 100);
         this.initPieEcharts(percent);
       });

src/views/index.vue

@@ -7,7 +7,45 @@
     <foldpanelRight>
       <IndexModelRight />
     </foldpanelRight>
-    <LeafletMap />
+
+    <LeafletMap>
+      <template #select>
+        <div class="select-search">
+          <el-select
+            v-model="community"
+            placeholder="选择社区"
+            clearable
+            @change="handleChange"
+            :popper-append-to-body="false"
+          >
+            <el-option
+              v-for="dict in communityList"
+              :key="dict.dept_id"
+              :label="dict.dept_name"
+              :value="dict.dept_id"
+            >
+            </el-option>
+          </el-select>
+
+          <el-select
+            style="margin-left: 10px"
+            v-model="xiaoqu"
+            placeholder="选择小区"
+            clearable
+            v-show="xiaoquList.length > 0"
+            :popper-append-to-body="false"
+          >
+            <el-option
+              v-for="dict in xiaoquList"
+              :key="dict.xiaoqu_id"
+              :label="dict.dept_name"
+              :value="dict.xiaoqu_id"
+            >
+            </el-option>
+          </el-select>
+        </div>
+      </template>
+    </LeafletMap>
   </div>
 </template>
 
@@ -21,7 +59,7 @@ import {
   IndexModelRight,
 } from "@/views/components/index.js";
 import LeafletMap from "@/components/LeafletMap";
-
+import { getCommunitylist, getXiaoqulist } from "@/api/taicangpop/data.js";
 export default {
   name: "Index",
   computed: {
@@ -37,16 +75,64 @@ export default {
   },
   data() {
     return {
-      // 版本号
+      community: 100,
-      version: "3.8.8",
+      communityList: [],
+      xiaoqu: "",
+      xiaoquList: [],
     };
   },
   mounted() {
+    this.getCommunity();
     this.$store.dispatch("GetXiaoquInfo", this.dept.deptId);
     this.$store.dispatch("getThreeCell");
     this.$store.dispatch("GetcolorList");
   },
-  methods: {},
+  methods: {
+    handleChange(e) {
+      this.$store.commit("SET_QUERY_PARAMS", { shequId: e });
+
+      this.$store.dispatch("GetXiaoquInfo", e);
+
+      this.$store.dispatch("getThreeCell", {
+        shequId: e == 100 ? undefined : e,
+      });
+      this.$store.dispatch("GetcolorList", {
+        shequId: e == 100 ? undefined : e,
+      });
+      this.xiaoqu = "";
+      this.xiaoquList = this.communityList.filter(
+        (item) => item.dept_id == e
+      )[0].children;
+    },
+
+    getCommunity() {
+      let community = new Promise((resolve, reject) => {
+        getCommunitylist().then((res) => {
+          res.data["社区list集合"].unshift({
+            dept_name: "全部社区",
+            dept_id: this.dept.deptId,
+          });
+          resolve(res.data["社区list集合"]);
+        });
+      });
+
+      let xiaoqu = new Promise((resolve, reject) => {
+        getXiaoqulist().then((res) => {
+          resolve(res.data["小区list集合"]);
+        });
+      });
+
+      Promise.all([community, xiaoqu]).then((res) => {
+        this.communityList = res[0].map((item) => {
+          item.children = [];
+          res[1].forEach((it) => {
+            if (item.dept_id == it.shequ_id) item.children.push(it);
+          });
+          return item;
+        });
+      });
+    },
+  },
 };
 </script>
 
@@ -59,4 +145,29 @@ export default {
   background-size: 100% 100%;
   overflow: hidden;
 }
+
+::v-deep .select-search {
+  position: absolute;
+  left: 410px;
+  top: 110px;
+
+  .el-select {
+    width: 160px;
+    .el-input {
+      background: transparent;
+    }
+    .el-input__inner {
+      height: 45px;
+      line-height: 45px;
+      color: #fff;
+      background: url("~@/assets/images/ui/img_btn_search.png");
+      background-size: 100% 100%;
+      border: 0px !important;
+    }
+    .el-input__inner::placeholder,
+    .el-select__caret {
+      color: #fff;
+    }
+  }
+}
 </style>