fix:系统迭代

src/api/map.ts

@@ -88,3 +88,11 @@ export function emerMapInfo(params) {
     params: params
   });
 }
+
+// 地图控制树形
+export function mapControlList() {
+  return request({
+    url: `/screen/index/mapControlList`,
+    method: "GET",
+  });
+}

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===>");

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>

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();

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 {

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">  

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_con" style="width: 200px;margin-bottom: 0px;">
-        <div
+        <el-tree-select
-          class="module_top_title"
+            v-model="listperformid"
-          v-for="(item, index) in label"
+            :data="treelist"
-          :key="index"
+            :render-after-expand="false"
-          @click="clickMenuOption(item.id)"
+            check-strictly
-          :class="
+            :filter-node-method="filterPostMethod"
-            item.check == true
+            filterable
-              ? 'module_menu_selected'
+            @change="getWorkPerformProgress"
-              : 'module_menu_notSelected'
+            clearable
-          "
+            placeholder="请选择岗位"
-        >
+          />
-          {{ item.title }}
-        </div>
       </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";
+import { workPerformProgress, getListperformTree } from "@/api/homePage";
-const labelId = ref(1);
+const labelId = ref();
-const label = ref([
+const listperformid = 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();
-};
 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>
 

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>