取消全选

src/assets/styles/index.scss

@@ -656,6 +656,18 @@ aside {
   cursor: pointer;
   font-size: 14px;
 }
+.common-btn5 {
+  width: 61px;
+  height: 25px;
+  background: url('@/assets/images/common/btn4.png') no-repeat;
+  background-size: 100% 100%;
+  color: #ffffff;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  font-size: 14px;
+}
 .common-table {
   width: 100%;
   .table-header {

src/store/modules/map.ts

@@ -1,4 +1,5 @@
 import { PointType } from '@/api/globalMap/type';
+import { listMenu2 } from '@/api/system/menu';
 
 export const useMapStore = defineStore('map', () => {
   const mapState = reactive({
@@ -10,6 +11,14 @@ export const useMapStore = defineStore('map', () => {
     // 是否显示比例尺
     showScale: true
   });
+  // 地图左侧菜单
+  const menuData = ref([]);
+  // 右侧菜单
+  const menuState = ref({
+    showMenu: false,
+    activeIndex: 0,
+    menuData: []
+  });
   // 地图加载是否完成
   const mapLoaded = ref(false);
   // 当前地图类型
@@ -74,13 +83,62 @@ export const useMapStore = defineStore('map', () => {
       flag: false,
       dict_value: ''
     };
+    menuState.value = {
+      showMenu: false,
+      activeIndex: 0,
+      menuData: []
+    };
+    initMenuData();
   };
   // 设置视频打点标识
   const setVideoPointParams = (data: any) => {
     videoPointParams.value = data;
   };
+  // 初始化左侧菜单数据
+  const initMenuData = () => {
+    listMenu2().then((res: any) => {
+      const data = res.data ? res.data[0]?.children : [];
+      data.forEach((item: any) => {
+        item.show = true;
+        item.name = item.meta?.title;
+        item.children?.forEach((item2) => {
+          item2.show = true;
+          item2.name = item2.meta?.title;
+          item2.children?.forEach((item3) => {
+            item3.name = item3.meta?.title;
+            if (item3.component === '2' && !!item3.path) {
+              item3.checked = false;
+            }
+          });
+        });
+      });
+      menuData.value = data;
+    });
+  };
+  // 取消勾选左侧所有菜单
+  const handleCancelAllChecked = () => {
+    const data = menuData.value;
+    data.forEach((topLevelItem) => {
+      if (topLevelItem.children && topLevelItem.children.length > 0) {
+        topLevelItem.children.forEach((secondLevelItem) => {
+          if (secondLevelItem.children && secondLevelItem.children.length > 0) {
+            secondLevelItem.children.forEach((thirdLevelItem) => {
+              thirdLevelItem.checked = false;
+            });
+          }
+        });
+      }
+    });
+    menuState.value = {
+      showMenu: false,
+      activeIndex: 0,
+      menuData: []
+    };
+  };
   return {
     mapState,
+    menuData,
+    menuState,
     mapLoaded,
     activeMap,
     isAMap,
@@ -98,7 +156,8 @@ export const useMapStore = defineStore('map', () => {
     setTrackState,
     setIsMapSelect,
     initData,
-    setVideoPointParams
+    setVideoPointParams,
+    handleCancelAllChecked
   };
 });
 

src/types/components.d.ts

@@ -24,16 +24,24 @@ declare module 'vue' {
     DistributionMap: typeof import('./../components/Map/YztMap/DistributionMap.vue')['default']
     DrawMap: typeof import('./../components/Map/YztMap/DrawMap.vue')['default']
     Editor: typeof import('./../components/Editor/index.vue')['default']
+    ElAnchor: typeof import('element-plus/es')['ElAnchor']
+    ElAnchorLink: typeof import('element-plus/es')['ElAnchorLink']
     ElAutocomplete: typeof import('element-plus/es')['ElAutocomplete']
     ElBadge: typeof import('element-plus/es')['ElBadge']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElCard: typeof import('element-plus/es')['ElCard']
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
+    ElCheckboxButton: typeof import('element-plus/es')['ElCheckboxButton']
     ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
     ElCol: typeof import('element-plus/es')['ElCol']
+    ElCollapse: typeof import('element-plus/es')['ElCollapse']
+    ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
     ElColorPicker: typeof import('element-plus/es')['ElColorPicker']
     ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
+    ElContainer: typeof import('element-plus/es')['ElContainer']
     ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
+    ElDescriptions: typeof import('element-plus/es')['ElDescriptions']
+    ElDescriptionsItem: typeof import('element-plus/es')['ElDescriptionsItem']
     ElDialog: typeof import('element-plus/es')['ElDialog']
     ElDivider: typeof import('element-plus/es')['ElDivider']
     ElDrawer: typeof import('element-plus/es')['ElDrawer']
@@ -43,15 +51,20 @@ declare module 'vue' {
     ElEmpty: typeof import('element-plus/es')['ElEmpty']
     ElForm: typeof import('element-plus/es')['ElForm']
     ElFormItem: typeof import('element-plus/es')['ElFormItem']
+    ElHeader: typeof import('element-plus/es')['ElHeader']
     ElIcon: typeof import('element-plus/es')['ElIcon']
     ElImage: typeof import('element-plus/es')['ElImage']
     ElInput: typeof import('element-plus/es')['ElInput']
+    ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
+    ElLink: typeof import('element-plus/es')['ElLink']
+    ElMain: typeof import('element-plus/es')['ElMain']
     ElMenu: typeof import('element-plus/es')['ElMenu']
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
     ElOption: typeof import('element-plus/es')['ElOption']
     ElPagination: typeof import('element-plus/es')['ElPagination']
     ElPopover: typeof import('element-plus/es')['ElPopover']
     ElRadio: typeof import('element-plus/es')['ElRadio']
+    ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
     ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
     ElRow: typeof import('element-plus/es')['ElRow']
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
@@ -60,16 +73,23 @@ declare module 'vue' {
     ElSkeleton: typeof import('element-plus/es')['ElSkeleton']
     ElSkeletonItem: typeof import('element-plus/es')['ElSkeletonItem']
     ElSlider: typeof import('element-plus/es')['ElSlider']
+    ElSpace: typeof import('element-plus/es')['ElSpace']
+    ElStep: typeof import('element-plus/es')['ElStep']
+    ElSteps: typeof import('element-plus/es')['ElSteps']
     ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
+    ElTabPane: typeof import('element-plus/es')['ElTabPane']
+    ElTabs: typeof import('element-plus/es')['ElTabs']
     ElTag: typeof import('element-plus/es')['ElTag']
     ElText: typeof import('element-plus/es')['ElText']
     ElTimeline: typeof import('element-plus/es')['ElTimeline']
     ElTimelineItem: typeof import('element-plus/es')['ElTimelineItem']
+    ElTimePicker: typeof import('element-plus/es')['ElTimePicker']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
     ElTree: typeof import('element-plus/es')['ElTree']
+    ElTreeSelect: typeof import('element-plus/es')['ElTreeSelect']
     ElUpload: typeof import('element-plus/es')['ElUpload']
     ExcelEditor: typeof import('./../components/ExcelEditor/index.vue')['default']
     FileUpload: typeof import('./../components/FileUpload/index.vue')['default']
@@ -82,6 +102,9 @@ declare module 'vue' {
     HikvisionPlayer: typeof import('./../components/HKVideo/hikvision-player.vue')['default']
     HKVideo: typeof import('./../components/HKVideo/index.vue')['default']
     IconSelect: typeof import('./../components/IconSelect/index.vue')['default']
+    IEpCaretBottom: typeof import('~icons/ep/caret-bottom')['default']
+    IEpCaretTop: typeof import('~icons/ep/caret-top')['default']
+    IEpUploadFilled: typeof import('~icons/ep/upload-filled')['default']
     IFrame: typeof import('./../components/iFrame/index.vue')['default']
     ImagePreview: typeof import('./../components/ImagePreview/index.vue')['default']
     ImageUpload: typeof import('./../components/ImageUpload/index.vue')['default']

src/views/globalMap/LeftMenu.vue

@@ -73,6 +73,9 @@
       </div>
       <Transition>
         <div v-show="menuState.isExpand" class="menu-box2">
+          <div class="btn-box">
+            <div class="common-btn5" @click="handleCancelAllChecked">取消勾选</div>
+          </div>
           <div class="menu-header">
             <div
               v-for="(item, index) in menuData"
@@ -119,15 +122,18 @@
 <script lang="ts" setup name="LeftMenu">
 import VideoDialog from '@/components/HKVideo/video-dialog.vue';
 import { getPointInfoComprehensiveSearch } from '@/api/globalMap';
-import { listMenu2 } from '@/api/system/menu';
 import { deepClone } from '@/utils';
 import { onClickOutside } from '@vueuse/core';
 import gcoord from 'gcoord';
+import useMapStore from '@/store/modules/map';
 
-const emits = defineEmits(['switchMap', 'clickMenu', 'selectSearchMarker']);
+const emits = defineEmits(['switchMap', 'clickMenu', 'selectSearchMarker', 'clearAllMenu']);
 const getPlaceSearch = inject('getPlaceSearch');
+const getMapUtils = inject('getMapUtils');
+let mapUtils;
+const mapStore = useMapStore();
 // 左侧菜单
-let menuData = ref([]);
+const { menuData } = storeToRefs(mapStore);
 
 const searchState = reactive({
   searchText: '',
@@ -142,6 +148,17 @@ let searchBoxRef = ref();
 onClickOutside(searchBoxRef, (event) => {
   searchState.showList = false;
 });
+watch(
+  () => mapStore.mapLoaded,
+  (loaded) => {
+    if (loaded) {
+      mapUtils = getMapUtils();
+    }
+  },
+  {
+    immediate: true
+  }
+);
 const changeSearchText = () => {
   if (!searchState.searchText) {
     searchState.showList = false;
@@ -212,28 +229,6 @@ const handleClick = (item) => {
   emits('clickMenu', item, menuData.value);
 };
 
-const initData = () => {
-  listMenu2().then((res: any) => {
-    const data = res.data ? res.data[0]?.children : [];
-    data.forEach((item) => {
-      item.show = true;
-      item.name = item.meta?.title;
-      item.children?.forEach((item2) => {
-        item2.show = true;
-        item2.name = item2.meta?.title;
-        item2.children?.forEach((item3) => {
-          item3.name = item3.meta?.title;
-          if (item3.component === '2' && !!item3.path) {
-            item3.checked = false;
-          }
-        });
-      });
-    });
-    menuData.value = data;
-    console.log(menuData.value);
-  });
-};
-
 const setMenuChange = (item, flag) => {
   for (let i = 0; i < menuData.value.length; i++) {
     if (item.meta.title === menuData.value[i].meta.title) {
@@ -271,9 +266,12 @@ const handleShowDialog = (row) => {
     showDialog.value = true;
   });
 };
-onMounted(() => {
-  initData();
-});
+// 取消所有勾选
+const handleCancelAllChecked = () => {
+  mapStore.handleCancelAllChecked();
+  // 清空所有打点
+  mapUtils.clearMarker('point');
+};
 defineExpose({ setMenuChange });
 </script>
 
@@ -457,10 +455,18 @@ defineExpose({ setMenuChange });
     background: url('@/assets/images/menu/btn.png') no-repeat;
     background-size: 100% 100%;
   }
-
+  .btn-box {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 10px;
+    margin-right: 10px;
+    .common-btn5 {
+      font-size: 12px;
+    }
+  }
   .menu-header {
     display: flex;
-    margin-top: 15px;
+    margin-top: 10px;
     height: 28px;
 
     .menu-item {

src/views/globalMap/RightMenu/index.vue

@@ -132,23 +132,20 @@ import TyphoonVideo from './TyphoonVideo.vue';
 import RescueTeam from './RescueTeam.vue';
 import TrafficVideo from './TrafficVideo.vue';
 import WindMonitor from './WindMonitor/index.vue'
-
+import useMapStore from '@/store/modules/map';
 
 const emits = defineEmits(['update:drawing']);
 const scrollListRef = ref();
-const menuState = reactive({
-  showMenu: false,
-  activeIndex: 0,
-  menuData: []
-});
+const mapStore = useMapStore();
+const { menuState } = storeToRefs(mapStore);
 
 // 点击收缩展开
 const clickContractMenu = () => {
-  menuState.showMenu = !menuState.showMenu;
+  menuState.value.showMenu = !menuState.value.showMenu;
 };
 // 菜单上下移动
 const clickBtn = (direction: string) => {
-  const len = menuState.menuData.length;
+  const len = menuState.value.menuData.length;
   if (direction === 'up' && scrollListRef.value.scrollTop - 168 >= 0) {
     scrollListRef.value.scrollTop -= 168;
   } else if (direction === 'down' && scrollListRef.value.scrollTop + 168 <= 168 * len) {
@@ -156,7 +153,7 @@ const clickBtn = (direction: string) => {
   }
 };
 const showIndexMenu = (name) => {
-  let index = menuState.menuData.findIndex((item) => {
+  let index = menuState.value.menuData.findIndex((item) => {
     return item.name === name;
   });
   if (index > -1) {
@@ -165,19 +162,19 @@ const showIndexMenu = (name) => {
 };
 // 点击菜单
 const clickMenu = (index) => {
-  menuState.showMenu = true;
-  menuState.activeIndex = index;
+  menuState.value.showMenu = true;
+  menuState.value.activeIndex = index;
 };
 let location = ref([]);
 let location2 = ref([]);
 // 显示菜单
 const handleMenu = (name, data) => {
-  let index = menuState.menuData.findIndex((item) => {
+  let index = menuState.value.menuData.findIndex((item) => {
     return item.name === name;
   });
   if (name === '空间分析') {
-    menuState.showMenu = true;
-    menuState.activeIndex = index;
+    menuState.value.showMenu = true;
+    menuState.value.activeIndex = index;
     nextTick(() => {
       location.value = data;
     });
@@ -189,33 +186,33 @@ const handleMenu = (name, data) => {
 const updateMenu = (type, menu, newLocation?: any) => {
   if (type === '1') {
     if (menu.name === '图层分析') {
-      let index = menuState.menuData.findIndex((item) => {
+      let index = menuState.value.menuData.findIndex((item) => {
         return item.name === menu.name;
       });
       if (index === -1) {
-        menuState.menuData.push(menu);
+        menuState.value.menuData.push(menu);
       }
     } else if (menu.name === '定点分析') {
-      menuState.menuData.push(menu);
+      menuState.value.menuData.push(menu);
       location2.value = newLocation;
     } else {
-      menuState.menuData.push(menu);
+      menuState.value.menuData.push(menu);
     }
-    clickMenu(menuState.menuData.length - 1);
+    clickMenu(menuState.value.menuData.length - 1);
   } else if (type === '2') {
-    let index = menuState.menuData.findIndex((item) => item.name === menu.name);
+    let index = menuState.value.menuData.findIndex((item) => item.name === menu.name);
     if (index > -1) {
-      menuState.menuData.splice(index, 1);
-      menuState.activeIndex = 0;
+      menuState.value.menuData.splice(index, 1);
+      menuState.value.activeIndex = 0;
     }
     if (menu.name === '空间分析') {
       location.value = [];
     }
   } else if (type === '4') {
-    let index = menuState.menuData.findIndex((item) => item.name === menu.name);
+    let index = menuState.value.menuData.findIndex((item) => item.name === menu.name);
     if (index > -1) {
-      menuState.menuData.splice(index, 1);
-      menuState.activeIndex = 0;
+      menuState.value.menuData.splice(index, 1);
+      menuState.value.activeIndex = 0;
     }
     location2.value = newLocation;
   }

src/views/globalMap/data/mapData.ts

@@ -211,6 +211,16 @@ export const iconList = {
     image: getImageUrl('43_vehicle.png'),
     imageHover: getImageUrl('43_vehicle_hover.png'),
     size: [40, 44]
+  },
+  '44': {
+    image: getImageUrl('44_child_welfare_institution.png'),
+    imageHover: getImageUrl('44_child_welfare_institution_hover.png'),
+    size: [40, 44]
+  },
+  '45': {
+    image: getImageUrl('45_elderly_care_institution.png'),
+    imageHover: getImageUrl('45_elderly_care_institution_hover.png'),
+    size: [40, 44]
   }
 };
 

src/views/globalMap/index.vue

@@ -163,7 +163,6 @@ const toAddress = (item) => {
 };
 
 let showDrawTools = ref(false);
-// 右侧菜单
 
 // 点击菜单
 const clickMenu = (item, dataList) => {
@@ -446,6 +445,9 @@ watch(
     deep: true
   }
 );
+onMounted(() => {
+  mapStore.initData();
+});
 onBeforeUnmount(() => {
   if (!!map) {
     if (mapStore.isAMap) {