右侧菜单

src/api/globalMap/type.ts

@@ -10,6 +10,7 @@ export interface MapQuery {
 export interface PointType {
   name: string;
   path: string;
+  component: string;
   checked?: boolean;
   checked2?: boolean;
 }

src/components/Map/index.vue

@@ -121,7 +121,7 @@ const { getAMap, getMap, switchMap, addMarker, addSearchMarker, clearMarker, get
     if (data.type === '1') {
       let path = [];
       props.pointType.forEach((item) => {
-        path.push(item.path);
+        path.push(item.component);
       });
       getPointInfoList({
         option: path.toString(),

src/views/globalMap/RightMenu/LayerAnalysis.vue

@@ -56,6 +56,9 @@ const getOption = (data, key = 'dataType') => {
 watch(
   () => props.pointType,
   () => {
+    if (!props.pointType || props.pointType.length === 0) {
+      return;
+    }
     getCountPointInfo({ option: getOption(props.pointType, 'path') }).then((res) => {
       res.data.list.forEach((item) => {
         item.checked = true;

src/views/globalMap/RightMenu/index.vue

@@ -1,17 +1,23 @@
 <template>
   <div class="right-menu">
     <div class="menu-container">
-      <div :class="!menuState.showMenu ? 'menu-list' : 'menu-list menu-list-right'">
-        <div
-          v-for="(item, index) in menuState.menuData"
-          :key="index"
-          :class="menuState.activeIndex === index ? 'menu-item menu-active' : 'menu-item'"
-          @click="clickMenu(index)"
-        >
-          <div :class="item.icon + ' ' + item.icon + '_checked'"></div>
-          <div class="gradient-text text">{{ item.name }}</div>
+      <div style="position: relative">
+        <div ref="scrollListRef" :class="!menuState.showMenu ? 'menu-list' : 'menu-list menu-list-right'">
+          <div
+            v-for="(item, index) in menuState.menuData"
+            :key="index"
+            :class="menuState.activeIndex === index ? 'menu-item menu-active' : 'menu-item'"
+            @click="clickMenu(index)"
+          >
+            <div :class="item.meta?.icon + ' ' + item.meta?.icon + '_checked'"></div>
+            <div class="gradient-text text">{{ item.name }}</div>
+          </div>
         </div>
         <div :class="menuState.showMenu ? 'right-btn' : 'left-btn'" @click="clickContractMenu"></div>
+        <div v-show="menuState.menuData.length > 7" class="btn-box">
+          <div class="up-btn" @click="clickBtn('up')"></div>
+          <div class="down-btn" @click="clickBtn('down')"></div>
+        </div>
       </div>
       <div v-show="menuState.showMenu" class="menu-content">
         <!--图层分析-->
@@ -44,17 +50,14 @@ interface Props {
 }
 
 const props = withDefaults(defineProps<Props>(), {});
-
+const scrollListRef = ref();
 const menuState = reactive({
   showMenu: false,
   activeIndex: 0,
   menuData: [
-    { name: '图层分析', icon: 'icon1' },
-    { name: '空间分析', icon: 'icon2' },
-    { name: '江湖河库', icon: 'icon3' },
-    { name: '路网视频', icon: 'icon4' },
-    { name: '水库监测', icon: 'icon5' },
-    { name: '河道监测', icon: 'icon6' }
+    { name: '图层分析', meta: { icon: 'icon1' } },
+    { name: '图层分析2', meta: { icon: 'icon1' } },
+    { name: '图层分析3', meta: { icon: 'icon1' } }
   ]
 });
 
@@ -71,6 +74,15 @@ const location = ref([]);
 const clickContractMenu = () => {
   menuState.showMenu = !menuState.showMenu;
 };
+// 菜单上下移动
+const clickBtn = (direction: string) => {
+  const len = menuState.menuData.length;
+  if (direction === 'up' && scrollListRef.value.scrollTop - 168 >= 0) {
+    scrollListRef.value.scrollTop -= 168;
+  } else if (direction === 'down' && scrollListRef.value.scrollTop + 168 <= 168 * len) {
+    scrollListRef.value.scrollTop += 168;
+  }
+};
 // 点击菜单
 const clickMenu = (index) => {
   menuState.showMenu = true;
@@ -92,7 +104,21 @@ const setAnalysisData = (data) => {
   handleMenu('空间分析');
 };
 
-defineExpose({ handleMenu, clickContractMenu, setAnalysisData });
+// 新增菜单 type 1 新增 2 删除
+const updateMenu = (type, menu) => {
+  if (type === '1') {
+    menuState.menuData.push(menu);
+    clickMenu(menuState.menuData.length - 1);
+  } else if (type === '2') {
+    let index = menuState.menuData.findIndex((item) => item.name === menu.name);
+    if (index > -1) {
+      menuState.menuData.splice(index, 1);
+      menuState.activeIndex = 0;
+    }
+  }
+};
+
+defineExpose({ handleMenu, clickContractMenu, setAnalysisData, updateMenu });
 </script>
 
 <style lang="scss" scoped>
@@ -114,11 +140,13 @@ defineExpose({ handleMenu, clickContractMenu, setAnalysisData });
 .menu-container {
   display: flex;
   .menu-list-right {
-    margin-right: -215px;
+    margin-right: -115px;
   }
   .menu-list {
     position: relative;
     margin-top: 60px;
+    max-height: 1176px;
+    overflow: hidden;
     .menu-item {
       width: 470px;
       height: 168px;
@@ -138,24 +166,43 @@ defineExpose({ handleMenu, clickContractMenu, setAnalysisData });
     .menu-active {
       background: url('@/assets/images/map/rightMenu/box_checked.png') no-repeat;
     }
-    .left-btn,
-    .right-btn {
-      position: absolute;
-      top: 440px;
-      right: 20px;
-      z-index: 2;
-    }
-    .right-btn {
-      width: 177px;
-      height: 151px;
-      cursor: pointer;
-      background: url('@/assets/images/map/rightMenu/right.png') no-repeat;
+  }
+  .left-btn,
+  .right-btn {
+    position: absolute;
+    top: calc(50% - 45px);
+    right: -150px;
+    transform: translateY(-50%);
+    z-index: 2;
+  }
+  .right-btn {
+    width: 177px;
+    height: 151px;
+    cursor: pointer;
+    background: url('@/assets/images/map/rightMenu/right.png') no-repeat;
+    cursor: pointer;
+  }
+  .left-btn {
+    right: 20px;
+    width: 125px;
+    height: 151px;
+    background: url('@/assets/images/map/rightMenu/left.png') no-repeat;
+    cursor: pointer;
+  }
+  .btn-box {
+    width: 100%;
+    display: flex;
+    margin-left: 45px;
+    .up-btn {
+      width: 151px;
+      height: 178px;
+      background: url('@/assets/images/map/rightMenu/up.png') no-repeat;
       cursor: pointer;
     }
-    .left-btn {
-      width: 125px;
-      height: 151px;
-      background: url('@/assets/images/map/rightMenu/left.png') no-repeat;
+    .down-btn {
+      height: 177px;
+      width: 151px;
+      background: url('@/assets/images/map/rightMenu/down.png') no-repeat;
       cursor: pointer;
     }
   }

src/views/globalMap/index.vue

@@ -88,7 +88,7 @@ const addMarkers = (item) => {
   const dom = activeMap.value === 'satellite2' ? map2Ref.value : mapRef.value;
   if (dom) {
     if (!item.checked) {
-      let index = pointType.value.findIndex((item2) => item.path === item2.path);
+      let index = pointType.value.findIndex((item2) => item.component === item2.component);
       if (index > -1) {
         pointType.value.splice(index, 1);
       }
@@ -103,7 +103,7 @@ const addMarkers = (item) => {
     }
     let path = [];
     pointType.value.forEach((item) => {
-      path.push(item.path);
+      path.push(item.component);
     });
     getPointInfo(path.toString()).then((res) => {
       const data = res.data && res.data.list ? res.data?.list : [];
@@ -120,7 +120,7 @@ const addMarkers = (item) => {
         if (item2.materia_name) {
           item2.name = item2.materia_name;
         }
-        item2.parentId = item.path;
+        item2.parentId = item.component;
         item2.lnglat = [item2.longitude, item2.latitude];
       });
       dom.addMarker(data);
@@ -136,33 +136,29 @@ const toAddress = (item) => {
 };
 
 let showDrawTools = ref(false);
+// 右侧菜单
+
 // 点击菜单
 const clickMenu = (item) => {
-  if (item.path === 'spatial') {
-    showDrawTools.value = !showDrawTools.value;
-  }
-  if (item.component === '2') {
+  if (item.path === '1') {
+    // 空间分析
+    if (item.component === 'spatial') {
+      showDrawTools.value = !showDrawTools.value;
+    }
+    rightMenuRef.value.updateMenu(item.checked ? '1' : '2', item);
+  } else if (item.path === '2') {
+    // 打点信息
     addMarkers(item);
     rightMenuRef.value.handleMenu('图层分析');
   }
-  if (['空间分析', '江湖河库', '路网视频', '水库监测', '河道监测'].includes(item.name)) {
-    // if (item.checked) {
-    //   rightMenuRef.value.handleMenu(item.name);
-    // }
-    if (item.name === '江湖河库') {
-      // getWaterList().then((res) => {
-      //   debugger;
-      // });
-    }
-  }
 };
 // 点击搜索结果，添加标注
 const selectSearchMarker = (item) => {
   const dom = activeMap.value === 'satellite2' ? map2Ref.value : mapRef.value;
   let item2 = deepClone(item);
-  if (iconList[item.path]) {
-    item2.image = iconList[item.path].image;
-    item2.size = iconList[item.path].size;
+  if (iconList[item.component]) {
+    item2.image = iconList[item.component].image;
+    item2.size = iconList[item.component].size;
   }
   dom.addSearchMarker(item2);
 };