From 64a9c62dabd8cd0086522ac96131ece0b29b175b Mon Sep 17 00:00:00 2001
From: HH <2454517719@qq.com>
Date: Mon, 15 Jul 2024 15:15:57 +0800
Subject: [PATCH] =?UTF-8?q?fix:=E7=B3=BB=E7=BB=9F=E8=BF=AD=E4=BB=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/map.ts                                |   8 +
 src/assets/images/marks/icon-wl-1.png         | Bin 0 -> 1214 bytes
 src/assets/images/marks/icon-wl-2.png         | Bin 0 -> 1123 bytes
 src/assets/images/marks/icon-wl.png           | Bin 1251 -> 0 bytes
 src/components/global-register/map/Mars3D.vue |  88 +++++++-
 src/layout/components/TopNav/index.vue        |   6 +-
 src/store/index.ts                            |  36 ++-
 src/styles/element-plus.scss                  |   7 +-
 .../left-side/components/portrait.vue         |   7 +-
 .../left-side/components/portrait.vue         |  75 ++++---
 src/views/top-menu/top-layer.vue              | 206 ++++++++++++++++++
 11 files changed, 383 insertions(+), 50 deletions(-)
 create mode 100644 src/assets/images/marks/icon-wl-1.png
 create mode 100644 src/assets/images/marks/icon-wl-2.png
 delete mode 100644 src/assets/images/marks/icon-wl.png
 create mode 100644 src/views/top-menu/top-layer.vue

diff --git a/src/api/map.ts b/src/api/map.ts
index cb36a9b..9b5f1aa 100644
--- a/src/api/map.ts
+++ b/src/api/map.ts
@@ -87,4 +87,12 @@ export function emerMapInfo(params) {
     method: "GET",
     params: params
   });
+}
+
+// 地图控制树形
+export function mapControlList() {
+  return request({
+    url: `/screen/index/mapControlList`,
+    method: "GET",
+  });
 }
\ No newline at end of file
diff --git a/src/assets/images/marks/icon-wl-1.png b/src/assets/images/marks/icon-wl-1.png
new file mode 100644
index 0000000000000000000000000000000000000000..3fd80e47a04570f75929e7fbe604180dd8b34074
GIT binary patch
literal 1214
zcmV;v1VQ_WP)<h;3K|Lk000e1NJLTq000;O0012b1^@s6u)3^E00001b5ch_0Itp)
z=>Px(cu7P-R7gvmmU~QFbri?H=TaySfwEG04isH5h&mrJYGN>3)NIL?&B%xl7!tOH
z>_H&i=0pTR7z4L#b(>?;$k1eN$s{ooM2uN+!?*r1jS-Dt2CStNioB%s-lMlqE|1de
z{&V{~_nhzNch0%zcS~?zdkw6P7Oh1@$Oj=4%#k1hn6cs=BoV>Hj4wcJs4dm~=+Pzl
zN5xU=Y6#p8=1k9n+rE>$C84UmOj|2!P<3@*=)aMXKY;oE+ZJ6qa94v~ca{zuvFrz-
z(c=>xDPYsO2&AnJMnsqp5OZWqL~p+x9mZ+c=hziPG#VZ*rINnE@-qW#Wt%2aKv|&%
z5#fOeFQl7B95~Tp!<^`TLYz%y^_EG1BV^O|tx<UBKD8oF6dC=4cJ%hmV%X|Hm|DPH
z$stHjQzJSuXi<h8#wm35OnV45w6AuUA-9@=x^gY<n78{&?KWKfW)ib@SK5LANRm%8
zUZ+A)_A1<y;@i}(f7o&M(zsKP83x+(#<06+z}v6u6g#RrWyW7O?Ot2f;}I}^H>L0?
z$<yMo2g1F!QJaV=!>DuZ1e8?y0H>>$2c#wiW7|dzn$B7L0<1O>mB(EG0t~dP((KLP
zOwFCkX0U&U4zV#RT>ohb;}ar`-?}ncn1KwaIA(Qa05(u@g%5D<&7}c}alxo9i}%92
zu1(;hE4HNpV<KKT>H<Ip6df|N+z>gR_v)2^x85DbZ-35uh12g=V^2XW4mI7v<g}~X
zdkbQ*HY3dIBhSRaMypc~%m&(iz?VVG5hdXAXEwB7olpSMQbN#SblFrY;Ml84in);i
z`i6NK<m*k|9<(;aDS9wHBcblJ877OvY1e9kFg_{5;aXzLv(ebJK1vZI1Ip`1JT?R6
zmiqv5i9*%R^Ur(94L#9f!QX>(UYk4*Tc3-@#%Gk`vcvCvcGR34^8sEeGtDp~RJK&^
zjzPw~Aqs%Jkf*up`XoBL|3SPi7%y&!Rt(qtfR65Iw6?j+D&a6~+h@ALfb*DMlNyYg
z(ij8<DYIBaT*fdpBSC-I3hTIg+$9v#3%gCV1b)pE^Ju0TJ9DC-jahuo_yhG1IB@dA
zar6(kOG%iO9F#&^3i~t^9(scr$@2x0<5kc^1$L^MEF$FQ&c6t#X?rK3%2|ueCFTdg
z+zDpiGzD6hrThrzKRMG}1XN4jVs9=s$1zEI3CIJGAji26S+9h@HGxEcud%>}Pn#1z
z_5>~2&GiKXT2+XUAuxRju*&7Uj674P$kL7=)AVph#~R<*y9s_@m*-y|I?jwz&z}nq
z!?&h6m8i;WZ`JiKS5d!!4SCk6In``07|Id%?2f3h>wLmNf9+cFg<qF{tB{%BUsxm}
z45}ccfBr$d@(Z+pwjuyv%E}$;0q6<mchFNOMy~Nf(uI{?wg3RY(>a5WFyZ_E-)+H(
zVCw$rVq(@x;-0Jn@xxO&L(O2`36KLMJlu0J{+B=k1Ij=adNTXwDoF}z6Tnx#zMRw)
ch`8+YAL*0P<ewQrbpQYW07*qoM6N<$g2LKD&;S4c

literal 0
HcmV?d00001

diff --git a/src/assets/images/marks/icon-wl-2.png b/src/assets/images/marks/icon-wl-2.png
new file mode 100644
index 0000000000000000000000000000000000000000..9b7a5466da6ddfe26ad8d42777a78fa888325761
GIT binary patch
literal 1123
zcmV-p1f2VcP)<h;3K|Lk000e1NJLTq000;O0012b1^@s6u)3^E00001b5ch_0Itp)
z=>Px(9Z5t%R7gvumRm?1XB5Z(XLhZkiEb)e?=1+Mf=bgic`$(>B!Q5J1W9NvTNaC0
zB_XjG)C8<(c1bEJfo2mzG=#<k(zlvRbxD+hO)(E`>4Oa+h9p88JL=BXVArba&MDvQ
zWp>on0nf`Y=R4>B`_B0;GlZz|i4&<xR#r8LTmZ@#SWf^LfQhFHA{opB40!Dx&u=kZ
zkqf1zrHFw(2FhXsYk0E6+?IXroJVNTtM>M^^|Q0TGElk((dAO>>>V9lG}+wT1mJuu
zLdwcQ#@@Y1DK3VTkztA%_WLnEGJ+YO4?I7w<q!~1)6?Ih$;QUt!Th0cN;Vs84GpG+
z7t<GH8B-T80-=yL#K0#s+0gJW1KLzGtE!N?X_GN890p#z0G>VtWEn_L2a1b<(o(=?
zTT)@r=fg~Yf2;~OP1M(mjiOoh*|U(=t<#fk-2z1L>}<p*Nr0;A<N5i(v17o-jd9=n
zlP7r7)fIVX_R_@h<8grf(k0`JT3UeT&voCfUBJMAG3Mk+pu9Zp3kL!Sw6!Gwjvmzk
zSFR)nh_<*~z?m~E0~7^;*49W2k(b8n>f(TRu3k+J5VNw|fx$swYAVt?VT&tJ6mhPi
z9bzwy*VO2MYuA<s6cqs%F6d*uy+C(&a=_`+5dh$&@#<<FaQ(Uw;PC*%!@94e1ZZjk
z>g$2&>4?9%8Q8K#Ujx4%%BfQcfT}7TaN~v%aQilJ=Z+EJZ~%AjMtmtLKxZeAu=B*B
zQyLp}fb4R`0Xa8s8Ueu|Ao@8r7V(QU5dDuHBpf;f95`Ue5dgnfmxy^ub~+6$qO>$4
zL<n|t054zaesLZS9|kHbjj;gcpFP7rZg&FU$dUiRtf_8jZN*!n&x=i*X0fpM?*jz|
zfYWI>T#4c0KAP4$@fFDj4-SJ_yQWhd4s39{K^DtWhzXAx3~K#X6(ts3L-PLp9wz!S
z=1JYW8JV@Uuw-YOkkmsKMo01H@@0fZM`O-8Qq_0qRb{0ujYw2cn5bwiEYxmSGZvO*
zh{ZJ+kvp%ar%n5!jqls{0Rs;h$TcHqBBs0Z-o5H}K-B<INRG<f2vz+QK%V9#5;vl*
zx57ISg&FvnnZ5bFz2C=@;()|i{k3yvwq&)IkR<)cfK_8fe*h8_qdx=>)NuIo8H;7Y
z;q%Qcu5MXCENE=^?r*^SMY2i=2wAPxGJ9X&NV2xA2vGLy$(##?L~_n@0z`B^ufIQX
z@g%Vo0V3z`9Xmc_=5Lp*3DIlGYJETV;ltpX01VJrMa2*S<%vIG0GtJbgWs*TqgJgz
z2)y3D{bMly0wPK5DkAzR|Iwq0)x=|)!%Q5;wr%TVpq79I3HT^?Xy^|!iKZ$LLVs@E
p`nE+?dsvcwD0uw%Yct{^=70X0o|idAcP{_{002ovPDHLkV1hCt3OWD)

literal 0
HcmV?d00001

diff --git a/src/assets/images/marks/icon-wl.png b/src/assets/images/marks/icon-wl.png
deleted file mode 100644
index 42230a5768c842c09d47fdeef52bb4e46fe97670..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 1251
zcmV<91RVQ`P)<h;3K|Lk000e1NJLTq000;O0012b1^@s6u)3^E00001b5ch_0Itp)
z=>Px(ok>JNR7gvuRewyBbr}CVcL#U;QaBJ$?@-DXC4pL|*p>`iX|`H8%8{A5lxBf*
zv$>WVPPS^=THR`vb2a-1C5K@SvrzKKEER`<wdF75K!}5*&I9had*AnI-<Nw2kQce-
z_n&+3`99C*^L)O~_j$gA(7IMyYmV{7t_S0FBFbiPg4kjJq&ZFeUjgWEfa_!^j#>K(
zE@>fZ?Cm#C*%eZ10c4ND`d^=<=0xSTZ}KYy0JW~Gx0t{U0OqQxYAN6EuYwZ${(`;K
zzV_sMAl{{=YfQ2rv3L%mvl3xUh>l2w)IA7)OCLPn-vAHET1=mL&@hWS*3>mJVV<xW
ztrnzKEQ}cVZuVeDKV0P(!9hjcA_Ya%zNW4p%yGhCEz3ddlc~B{%Xb2Bf6)vckdVAN
z7pBx0T|c41Thkiaqn+d|{+YF-pYhdF-RuKSFM2+_gsAjb1aJ3)6-LUId9Y+Bk0bFl
z_Q3tgWv!GBa;`ou%Be1U<+I}g2G4iH?Pvn~Wmq@Ph2od+?{|Lz27<L@F5;iDkBO0b
zeCR4WquLm7kn@$FMhFf*H^$j>=sG-=*TS~sExF);g1#?X!nTB!vyu2l7RWf<Eh@pg
zr$YqfAZO9B5rV4a;XrW|-5>l8#T$gtY6gskaq8qAAINM(%GUXaSukyc;GI*$1S}M+
zsuhi)3bG$sF;>CBYw%QE$BaGspeTcyoiY$a^z11xCYj+}bqsO&Gm%`H6ONNyK6Gso
z1Pq2y@UkEn?kan=K7lxUQD{*IK@eq&hbcW4eS5Cx6TDro;xX7kZ7&^VA_6lb<A;^H
z3Z@p#L0o|il4}qm!}tOlJRx<u3QFo#JO~ACFCGmm$f%i^fMSf0?*yTE128|51li?N
zk57-FbHj<@5y?Wq3rE5=uvM*qA;uI|p=Bu)_%8RT1s4q`2+R*o)g>7Evk%?d&S^u<
zLC)uY^fA~XP*Xq7gXOW5aRk%ee;mD^H>rgd*HQKck-Gf}xXLe#Q{b(+iGTL~5yIe)
zsBOiO7J$_;9i5egwB1jELRV69`{8fuMQmO={LOAPb3x*}(2cmIGtqytL$yUsS0@dW
z{vf(G{R+9)7rLg(TXbvr;R<5fuB9EbC=E%axiF>Z&zf<~5HbXAc;NoD5y2ZC&1J~U
zN(Qy&A5JtxqlFo^(a(X&9<NT<NS4$&p!Ue<cm=#O^OwSMwZGe!)#S*KkAsjN3E*Tt
z%-FyGMDzL`*r9}<+ndX3(o8IGRhVA`VfthsckdG*GjJA6j@k8v)!P2(_dFcav8*~d
zAjyv!h)x0+xwks31ROUhrVWFgPS-=%%Z7A_C(gC)=|i6}c=JSWHG_juiYeQ6w(#mi
zD7p$XXZNDoDc-35t01K50T5`{tTRR1?sc5^BoKklB~|NW;%~*bc1uFvw=LeGhtr$a
z4%`=km?O8A95@HY;;}$focY_Um6KhDNfiiyTZ<1YVCIV;48J<er!&tNFP#irQyqyP
zS{GJ+4dRUik_-yX&uCbEC6d616sXOZS7nu?;9+Ju`anbR?nuCe&wuXS8}#RzUY!5{
N002ovPDHLkV1h*vT%-U1

diff --git a/src/components/global-register/map/Mars3D.vue b/src/components/global-register/map/Mars3D.vue
index 170f39c..ca58c83 100644
--- a/src/components/global-register/map/Mars3D.vue
+++ b/src/components/global-register/map/Mars3D.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, onMounted, ref, watchEffect, createApp } from "vue";
+import { defineComponent, onMounted, ref, watchEffect, createApp, watch, computed } from "vue";
 export default defineComponent({
   name: "MarsMap",
 });
@@ -24,6 +24,10 @@ import {
 
 import * as mars3d from "mars3d";
 
+import { useModelStore } from "@/store";
+const store = useModelStore();
+const resourcenum = computed(() => store.getLayerType);
+
 const props = defineProps<{
   json: string;
   point: any[];
@@ -84,6 +88,17 @@ const mapOptions: any = {
       show: true,
     },
   ],
+  clustering: {  
+        enabled: true, // 启用点聚合  
+        pixelRange: 20, // 控制聚合的像素范围  
+        // 其他聚合相关配置...  
+    },  
+  symbol: {
+    type: "billboardP",
+    styleOptions: {
+      // 聚合点的样式配置...  
+    }
+  }
 };
 
 /**
@@ -110,6 +125,7 @@ const initMars3d = (option: any) => {
   });
   map.on(mars3d.EventType.click, map_clickHandler, this);
   loadLayer(geoJsonAreaUrl, geoJsonUrl.value);
+  
 };
 
 //点击获取经纬度
@@ -149,10 +165,18 @@ const getEmerRiskPoolList = () => {
   emerRiskPoolList({}).then((res: any) => {
     res.data.forEach((item) => {
       // console.log(item, "item===>");
-      addMark(item.lon, item.lat, "icon-wl", 2, item.poolId, item);
+      addMark(item.lon, item.lat, "icon-wl-"+ item.poolState, 2, item.poolId, item);
     });
   });
 };
+const getPoolList = (id: any) => {
+  console.log(id, "item===>");
+emerRiskPoolList({typeId:id}).then((res: any) => {
+    res.data.forEach((item:any) => {
+      addMark(item.lon, item.lat, "icon-wl", 2, item.poolId, item);
+    });
+  });
+}
 //地图信息：应急仓库列表
 const getEmerWareHouseList = () => {
   emerWareHouseList({}).then((res: any) => {
@@ -186,7 +210,12 @@ const getdomicileList = () => {
  * 加载图层
  */
 const loadLayer = (insideJson: string, outJson: string) => {
-  graphicLayer.value = new mars3d.layer.GraphicLayer();
+  graphicLayer.value = new mars3d.layer.GraphicLayer({
+    // clustering: {
+    //   enabled: true, // 点的聚合配置
+    //   pixelRange: 20
+    // }
+  });
   map.addLayer(graphicLayer.value);
 
   initListener();
@@ -195,15 +224,15 @@ const loadLayer = (insideJson: string, outJson: string) => {
   loadInArea(insideJson);
 
   // 避难场所列表
-  getEmerShelterList();
+  // getEmerShelterList();
   // 风险池列表
   getEmerRiskPoolList();
   // 应急仓库列表
-  getEmerWareHouseList();
+  // getEmerWareHouseList();
   //应急上报事件列表
-  getemerEventList();
+  // getemerEventList();
   //户籍列表
-  getdomicileList();
+  // getdomicileList();
 };
 
 /**
@@ -518,6 +547,29 @@ const addMark = (
   });
   graphicLayer.value.addGraphic(graphic);
 };
+/**
+ * 清除标点
+ */
+const  removeGraphicsByType = (typeToRemove:any) => {  
+  // 遍历图层中的所有图元  
+  graphicLayer.value.graphics.forEach((graphic:any, index:any) => {  
+    // 检查图元的 objectsToExclude 是否有 type 属性，并且该 type 是否为需要移除的类型  
+    if (graphic.objectsToExclude) {
+      if (graphic.objectsToExclude.type === typeToRemove || graphic.objectsToExclude.id === typeToRemove) {  
+        // console.log('------>',graphic.objectsToExclude)
+        // 移除该图元  
+        graphicLayer.value.removeGraphic(graphic);    
+      }  
+    }
+  });  
+}
+const removeGraType = (id:any) => {
+emerRiskPoolList({typeId:id}).then((res: any) => {
+    res.data.forEach((item:any) => {
+      removeGraphicsByType(item.poolId)
+    });
+  });
+}
 /**
  * 加载弹窗
  */
@@ -541,6 +593,28 @@ const getImageUrl = (name: string) => {
 //地图整体数量
 const wholeNumber = ref({});
 
+//监听图层数据变化
+watch((resourcenum), (val: any) => {
+  if (val.name === '应急仓库') {
+    val.show ? getEmerWareHouseList():removeGraphicsByType(3)
+  }
+  else if (val.name === '风险池') {
+    val.show ? getEmerRiskPoolList():removeGraphicsByType(2)
+  }
+  else if (val.name === '户籍列表') {
+    val.show ? getdomicileList():removeGraphicsByType(5)
+  }
+  else if (val.name === '避难场所') {
+    val.show ? getEmerShelterList():removeGraphicsByType(1)
+  }
+  else if (val.name === '应急上报事件') {
+    val.show ? getemerEventList():removeGraphicsByType(4)
+  }else {
+    val.show ? getPoolList(val.id):removeGraType(val.id)
+  }
+
+})
+
 onMounted(() => {
   emerMapInfo({}).then((res: any) => {
     // console.log(res, "res===>");
diff --git a/src/layout/components/TopNav/index.vue b/src/layout/components/TopNav/index.vue
index 87ba8aa..0b81f5b 100644
--- a/src/layout/components/TopNav/index.vue
+++ b/src/layout/components/TopNav/index.vue
@@ -7,9 +7,11 @@ export default defineComponent({
 });
 </script>
 <script setup lang="ts">
-const title = import.meta.env.VITE_TITLE;
+
 import { ClickOutside as vClickOutside } from "element-plus";
 import TopOption from "../../../views/top-menu/top-option.vue";
+import Toplayer from "../../../views/top-menu/top-layer.vue";
+const title = import.meta.env.VITE_TITLE;
 const buttonRef = ref();
 const popoverRef = ref();
 const onClickOutside = () => {
@@ -22,6 +24,8 @@ const onClickOutside = () => {
     <h1 class="top-title">{{ title }}</h1>
     <div class="top_option">
       <!-- 图层控制 -->
+       <Toplayer></Toplayer>
+       <!-- 标题 -->
       <TopOption></TopOption>
     </div>
   </header>
diff --git a/src/store/index.ts b/src/store/index.ts
index 20e6935..4d09c7f 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -1,2 +1,36 @@
-import { createPinia } from "pinia";
+
+import { defineStore, createPinia } from "pinia";
+
+export const useModelStore = defineStore("model", {
+  state: () => ({
+    model: true,
+    layerType: {},//图层显示
+    checkednum: [],//选中图层
+  }),
+
+  getters: {
+    getModel(): boolean {
+      return this.model;
+    },
+    getLayerType(): object {
+      return this.layerType
+    },
+    getcheckednum(): any {
+      return this.checkednum
+    },
+  },
+
+  actions: {
+    setModel(model: boolean) {
+      this.model = model;
+    },
+    setLayerType(value: object) {
+      this.layerType = value;
+    },
+    setcheckednum(value: any) {
+      this.checkednum = value;
+    },
+  },
+});
+
 export default createPinia();
diff --git a/src/styles/element-plus.scss b/src/styles/element-plus.scss
index 7eb8954..d9168a7 100644
--- a/src/styles/element-plus.scss
+++ b/src/styles/element-plus.scss
@@ -369,8 +369,13 @@ table {
   background-color: transparent !important;
 }
 
+.el-tree {
+  background-color: transparent !important;
+}
+
 .el-tree-node__content {
-  background-color: #2c5473 !important;
+  // background-color: #2c5473;
+  background-color: transparent !important;
 }
 
 .el-select__placeholder {
diff --git a/src/views/data-statistics/left-side/components/portrait.vue b/src/views/data-statistics/left-side/components/portrait.vue
index 63e634a..8b6de3a 100644
--- a/src/views/data-statistics/left-side/components/portrait.vue
+++ b/src/views/data-statistics/left-side/components/portrait.vue
@@ -3,7 +3,7 @@
   <div class="side-bg">
     <TitleC title="精准画像"></TitleC>
     <TitleD width="100">
-      <div class="module_top_title_con" style="width: 200px;">
+      <div class="module_top_title_con" style="width: 200px;margin-bottom: 0px;">
         <el-tree-select
             v-model="listperformid"
             :data="treelist"
@@ -13,14 +13,11 @@
             filterable
             @change="filterPostchange"
             clearable
+            placeholder="请选择岗位"
           />
       </div>
     </TitleD>
     <div class="portrait_con conBox">
-      <!-- 222222222222222
-      <div>
-        <img style="width: 100%;" src="@/assets/images/home-page/left/lingjiangtai.png" alt="" />
-      </div> -->
       <div class="podium-container">  
         <img src="@/assets/images/home-page/left/lingjiangtai.png" alt="Podium" class="podium-img">  
         <div class="name-position" v-for="(item, index) in portraitList" :key="index">  
diff --git a/src/views/home-page/left-side/components/portrait.vue b/src/views/home-page/left-side/components/portrait.vue
index 631ba5d..1f570f4 100644
--- a/src/views/home-page/left-side/components/portrait.vue
+++ b/src/views/home-page/left-side/components/portrait.vue
@@ -3,20 +3,18 @@
   <div class="side-bg">
     <TitleC title="精准画像"></TitleC>
     <TitleD width="100">
-      <div class="module_top_title_con">
-        <div
-          class="module_top_title"
-          v-for="(item, index) in label"
-          :key="index"
-          @click="clickMenuOption(item.id)"
-          :class="
-            item.check == true
-              ? 'module_menu_selected'
-              : 'module_menu_notSelected'
-          "
-        >
-          {{ item.title }}
-        </div>
+      <div class="module_top_title_con" style="width: 200px;margin-bottom: 0px;">
+        <el-tree-select
+            v-model="listperformid"
+            :data="treelist"
+            :render-after-expand="false"
+            check-strictly
+            :filter-node-method="filterPostMethod"
+            filterable
+            @change="getWorkPerformProgress"
+            clearable
+            placeholder="请选择岗位"
+          />
       </div>
     </TitleD>
     <div class="portrait_con conBox">
@@ -28,13 +26,13 @@
         <div>
           <div>
             <span>{{ index + 1 }}</span>
-            <span v-if="labelId == 1" @click="toBackgroundManage()"
+            <span  @click="toBackgroundManage()"
               >{{ item.chinaName }}-{{ item.postName }}</span
             >
-            <span v-if="labelId == 2">{{ item.orgName }}</span>
+            <!-- <span v-if="labelId == 2">{{ item.orgName }}</span>
             <span v-if="labelId == 3"
               >{{ item.chinaName }}-{{ item.postName }}</span
-            >
+            > -->
           </div>
           <div>
             <span>{{ item.percentage }}</span>
@@ -60,29 +58,17 @@ export default defineComponent({
 });
 </script>
 <script setup lang='ts'>
-import { workPerformProgress } from "@/api/homePage";
-const labelId = ref(1);
-const label = ref([
-  { title: "政府人员", check: true, id: 1 },
-  { title: "村(社区)干部", check: false, id: 2 },
-  { title: "党员", check: false, id: 3 },
-]);
-const clickMenuOption = (id: any) => {
-  labelId.value = id;
-  label.value.forEach((item) => {
-    item.check = false;
-    if (item.id == id) {
-      item.check = true;
-    }
-  });
-  getWorkPerformProgress();
-};
+import { workPerformProgress, getListperformTree } from "@/api/homePage";
+const labelId = ref();
+const listperformid = ref('');
 const portraitList = ref([]);
+const treelist = ref([]) 
 //获取应急队伍list
 const getWorkPerformProgress = () => {
   let params = {
     sysYear: null,
-    typeId: labelId.value,
+    pageType:1,
+    listperformid: listperformid.value,
   };
   workPerformProgress(params).then((res: any) => {
     portraitList.value = res.data;
@@ -94,6 +80,24 @@ const getWorkPerformProgress = () => {
     });
   });
 };
+const filterPostMethod = (value, data) => data.label.includes(value);
+//岗位树形
+const getgetListperformTree = () => {
+  getListperformTree().then((res: any) => {
+    treelist.value = handlePostData(res.data);
+  })
+}
+/**处理组织数据 */
+let handlePostData = (list) => {
+  let data = list.map((item) => {
+    return {
+      label: item.performclassname,
+      value: item.listperformid,
+      children: item.children ? handlePostData(item.children) : [],
+    };
+  });
+  return data;
+};
 //跳转后台
 const toBackgroundManage = () => {
   window.open(
@@ -104,6 +108,7 @@ const toBackgroundManage = () => {
 
 onMounted(() => {
   getWorkPerformProgress();
+  getgetListperformTree();
 });
 </script>
 
diff --git a/src/views/top-menu/top-layer.vue b/src/views/top-menu/top-layer.vue
new file mode 100644
index 0000000..4e18136
--- /dev/null
+++ b/src/views/top-menu/top-layer.vue
@@ -0,0 +1,206 @@
+<!--  -->
+<template>
+  <div class="top-menu">
+    <el-popover placement="bottom-end" trigger="click" popper-style="background-color:transparent;border:0px"
+      open-animation="popover">
+      <template #reference>
+        <el-button style="margin-right: 16px">
+          <div class="top_option">
+            <img src="@/assets/images/top/top-option-layer.png" alt="" />
+            <span>图层控制</span>
+          </div>
+        </el-button>
+      </template>
+      <div class="side-bgss">
+        <el-tree-v2 style="max-width: 600px;background: none;" ref="treeRef" :data="Tree" :props="defaultProps"
+          show-checkbox :height="208" @check-change="handleCheckChange" node-key="id"
+          :default-checked-keys="checkednum">
+          <template #default="{ node, data }">
+            <div class="custom-tree-node">
+              <!-- <img v-if="data.img" :src="getImageUrl(data.img)" style="width: 20px;height: 20px;" alt="" /> -->
+              <span class="pl-1">{{ data.typeName }}</span>
+            </div>
+          </template>
+        </el-tree-v2>
+      </div>
+    </el-popover>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent, ref, unref, computed, onMounted, watch } from "vue";
+export default defineComponent({
+  name: "TopOption",
+});
+</script>
+<script setup lang='ts'>
+import { ClickOutside as vClickOutside } from "element-plus";
+import { mapControlList } from "@/api/map" 
+
+import { useModelStore } from "@/store";
+const store = useModelStore();
+
+const url = ref(import.meta.env.VITE_ICON);
+
+const treeRef = ref();
+const popoverRef = ref();
+const checkednum = ref(['1']);//选中图层
+const handleCheckChange = (
+  data: any,
+  checked: any,
+) => {
+  if (checked) {
+    store.setLayerType({ id: data.typeId, name: data.typeName,show:true})
+  } else {
+    store.setLayerType({ id: data.typeId, name: data.typeName,show:false})
+  }
+  checkednum.value = treeRef.value.getCheckedKeys()
+  store.setcheckednum(checkednum.value)
+}
+
+
+const Tree = ref([])
+
+const defaultProps = {
+  children: 'children',
+  label: 'typeName',
+  value: 'typeId',
+}
+/**
+ * 获取地图图标
+ */
+const getImageUrl = (name: string) => {
+  const path = `/src/assets/images/marks/${name}.png`;
+  const modules = import.meta.globEager("/src/assets/images/marks/*.png");
+  return modules[path].default;
+};
+const getmapControlList = () => {
+  mapControlList().then((res: any) => {
+    Tree.value = res.data;
+  })
+}
+onMounted(() => {
+  getmapControlList();
+  // store.setLayerType({ type: 1, show: true })
+});
+</script>
+
+<style lang="scss" scoped>
+.top-menu {
+  position: fixed;
+  top: $TopHeight;
+  left: $sideWidth;
+  right: $sideWidth;
+  margin: 0 1%;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  color: #ffffff;
+  z-index: 1;
+}
+
+.top_option {
+  width: 100px;
+  height: 35px;
+  display: flex;
+  align-items: center;
+  background-image: url("@/assets/images/top/top-option-bg.png");
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  cursor: pointer;
+
+  >img {
+    width: 20px;
+    height: 22px;
+    margin-left: 9px;
+    margin-right: 6px;
+  }
+
+  >span {
+    font-size: 16px;
+    font-family: PingFang-SC, PingFang-SC;
+    font-weight: 500;
+    color: #ffffff;
+  }
+}
+
+.side-bgss {
+  width: 180px;
+  // margin-left: -18px;
+  margin-left: 30px;
+  margin-top: -15px;
+  padding: 10px;
+  background: linear-gradient(0deg,
+      rgba(9, 24, 56, 0.9) 0%,
+      rgba(9, 24, 56, 0.9) 100%);
+  box-shadow: inset 0px 0px 4px 1px rgba(0, 136, 255, 0.6);
+  border: 1px solid rgba(0, 136, 255, 0.8);
+}
+
+.custom-tree-node {
+  display: flex;
+}
+
+.topOption_body {
+  display: flex;
+  flex-wrap: wrap;
+
+  >div {
+    width: 81px;
+    height: 88px;
+    border: 1px solid #7aa8ff;
+    border-radius: 4px;
+    margin-right: 8px;
+    margin-top: 19px;
+    cursor: pointer;
+
+    >div:nth-child(1) {
+      margin-left: 6px;
+      margin-top: 3px;
+    }
+
+    >div:nth-child(2) {
+      text-align: center;
+      margin-top: -10px;
+
+      >img {
+        width: 30px;
+        height: 30px;
+      }
+    }
+
+    >div:nth-child(3) {
+      margin-top: 5px;
+      text-align: center;
+      font-size: 12px;
+      font-family: PingFang-SC, PingFang-SC;
+      font-weight: 400;
+      color: #ffffff;
+    }
+  }
+}
+
+.Selected {
+  border: 1px solid #edd352 !important;
+
+  >div:nth-child(3) {
+    color: #edd351 !important;
+  }
+}
+
+.el-button {
+  background-color: rgba(255, 0, 0, 0) !important;
+  border: none !important;
+}
+
+.el-tree-node__content:hover {
+  background-color: transparent;
+}
+
+.el-tree-node:focus>.el-tree-node__content {
+  background-color: transparent;
+}
+
+.el-tree {
+  --el-tree-node-hover-bg-color: ''
+}
+</style>
\ No newline at end of file