From 43480e74a4726c3ed13f5d78a8eff43eaa6eb04d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=AE=B8=E5=AE=8F=E6=9D=B0?= <1943105267@qq.com>
Date: Thu, 25 Jul 2024 15:07:42 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B7=A6=E5=8F=B3=E6=8A=98=E5=8F=A0=E9=9D=A2?=
 =?UTF-8?q?=E6=9D=BF=E6=A0=B9=E6=8D=AE=E8=AE=BE=E8=AE=A1=E8=81=94=E5=8A=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/images/ui/img_btn_search.png       | Bin 0 -> 1151 bytes
 src/components/LeafletMap/index.vue           |  10 +-
 src/store/getters.js                          |   1 +
 src/store/modules/taicang.js                  |  84 +++++++-----
 .../IndexModel/components/pieChart.vue        |  24 +++-
 src/views/index.vue                           | 121 +++++++++++++++++-
 6 files changed, 199 insertions(+), 41 deletions(-)
 create mode 100644 src/assets/images/ui/img_btn_search.png

diff --git a/src/assets/images/ui/img_btn_search.png b/src/assets/images/ui/img_btn_search.png
new file mode 100644
index 0000000000000000000000000000000000000000..618e4a682a95ed229e00cfe491cd743c3db84957
GIT binary patch
literal 1151
zcmV-_1c3XAP)<h;3K|Lk000e1NJLTq008;`001Zm0{{R3;KUaz0002nP)t-s00000
z0001!!~nVf0KoqMt>^%<{Q#f*0EG7dfAj!$odCD|0DJBLx%U92-vGM&0H62(dFlX(
z?f?J)0J{GHcH{s600D8=0ssI3aMuO^005)^0d3F#e98c}{{dyf0ImN4X2Jli{{dpU
z1poj5tN#OAtN^e71XG#-t^Wl`gakx=20d;7r2hpwX8@xA1~F9tp#K1${{}Bl0G99p
ze#-?pUk5Eq2035^0001a#Q>D=1yY9xEJp+Y002gG0(QRx00093005Bd181lMW~KuG
z002*c0dcrew)VOJ002pJQchC>3@5YtWaa1G*&(FVq)*G)(9jdX%NoEUzbKozw}`NO
zuW_p}XQp4ITB@(PjJ~SRy2{kK*VWn8Ihx|#+(mTiOIh~r?o))Y64=_w0009DNkl<Z
zXx{Bwi&EM^6g5(jC>2X=HU=UrM2KyDR-490G}>bS|BIUJ%|7lD6sv`q#N(3Pz4zS5
z85U*?Sy_2U#bJ~lGjy-kK9nA{RioeyU#qV-QkV?{6D`ba6f;aScjFYWHxbv=>gfB1
zTFNZ&=_X7w3$pXYdVNiQ>y3@gdc$m*Qz$U~FEn3d{zo+GA2*P8W2?2@tO&MSTZVet
zTg^{7!~&t%`h=%BU$p9biZwIY^zPX-?Up?AhGFe|t`K%Cq1~|T8mSO!wk4$7&gQNF
zQLgDk$Zi3owZKidnP3j#frR7~BDo@rXlV$q2YVSn2x^u22s0DGBU+DawdvRfKkv5N
z>2|$t2G3(FkL_}kw172T!pI3-LG}a<C~Ss5aIjcW%JY<}BAPh_)8je8#Onw{UW;ey
z%JjU5><<!jJFcCd`1HKHd%X%_&*djRliu(3C}kt_QAwjHh~i5cKq+h};!=JUL)tYa
zRh$$tskUS@bO}j#D5WS=?*t;0F8hjf#~lnSgn{cw>HhwxLfH3J>EnQ56ubtbSGgC4
z(HKcTSav^)#KF7tT>6(B0h$A4F$<Y1z+pHjz~ms$Dmej*5A>wZBG8yYAwkoW7Q@oV
z^OPzJ@MnF0+3hS6_#1xkwL%ym>HTjNLLW&#oJ~A>^U^QK_%_A0EQd&X=cq#HAnC^^
z6~Zx+e!A>-7Ku|uy6v8weAh8;!R|u;$vmO+mUuy?XZYBBhW=kazxWYW1V1m%k@V>D
z>iQ<U$p%9RtCR`0kX^tMf?3c*IYDw^XCn+@61kxO--9nN0DPVTC`y=!5#>Wj6mq|4
zL}`m};dOm=8A<6zDm}h!-=W^hiSVv{8%N^a9J@^uCHLOLuis_IgLj`q;wB9{@s1xQ
zlgHukPpL5+K2DOzcjSF|_G$N{IGIfDOO44Si6h@tlxM#@+3A^&;y5Wa;y6lAyKNch
z_eRUMUDx-cQp5LM*T%}Zc*k)|4ab=l4$sk8Rw}>DNCg%@PqXYtd=~v6(O*)OA35tU
R;Gh5i002ovPDHLkV1ix_5YYet

literal 0
HcmV?d00001

diff --git a/src/components/LeafletMap/index.vue b/src/components/LeafletMap/index.vue
index d5de02a..ec704e0 100644
--- a/src/components/LeafletMap/index.vue
+++ b/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%;
diff --git a/src/store/getters.js b/src/store/getters.js
index 2ebc885..559fe04 100644
--- a/src/store/getters.js
+++ b/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;
diff --git a/src/store/modules/taicang.js b/src/store/modules/taicang.js
index abcc851..6007b92 100644
--- a/src/store/modules/taicang.js
+++ b/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(
-        list,
+      state.colorListL = handleColor(state.colorListL, 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) {
-  list.map((item) => {
+function handleColor(colorList, list) {
+  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(
-    (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;
+  return colorList;
 }
 
 export default taicang;
diff --git a/src/views/components/IndexModel/components/pieChart.vue b/src/views/components/IndexModel/components/pieChart.vue
index 48ffd9f..f522176 100644
--- a/src/views/components/IndexModel/components/pieChart.vue
+++ b/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) {
-      this.$store.dispatch("GetPie", { type: type }).then((res) => {
+    getPie() {
+      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);
       });
diff --git a/src/views/index.vue b/src/views/index.vue
index 5610452..13a11f6 100644
--- a/src/views/index.vue
+++ b/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 {
-      // 版本号
-      version: "3.8.8",
+      community: 100,
+      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>