地图菜单处理

src/types/components.d.ts

@@ -43,6 +43,9 @@ declare module 'vue' {
     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']
+    ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
     ElRow: typeof import('element-plus/es')['ElRow']
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
     ElSelect: typeof import('element-plus/es')['ElSelect']
@@ -53,10 +56,14 @@ declare module 'vue' {
     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']
     ElTimeline: typeof import('element-plus/es')['ElTimeline']
     ElTimelineItem: typeof import('element-plus/es')['ElTimelineItem']
     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']
     FileUpload: typeof import('./../components/FileUpload/index.vue')['default']
     FooterSection: typeof import('./../components/FooterSection/index.vue')['default']
@@ -67,6 +74,7 @@ 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']
+    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']
@@ -96,6 +104,7 @@ declare module 'vue' {
     UserSelect: typeof import('./../components/UserSelect/index.vue')['default']
     VideoContainer: typeof import('./../components/HKVideo/video-container.vue')['default']
     YMap: typeof import('./../components/Map/YMap.vue')['default']
+    YMapold: typeof import('./../components/Map/YMapold.vue')['default']
     YztMap: typeof import('./../components/Map/YztMap/index.vue')['default']
   }
   export interface ComponentCustomProperties {

src/views/globalMap/AnalyzeDataDialog.vue

@@ -1,93 +0,0 @@
-<template>
-  <div>空间分析</div>
-  <div class="analyze-data-container">
-    <div class="item">
-      <div class="item-label">行政镇(个)</div>
-      <div class="item-value">{{ analysisSpatialData.townName }}个</div>
-    </div>
-    <div class="item">
-      <div class="item-label">行政村(个)</div>
-      <div class="item-value">{{ analysisSpatialData.townName }}个</div>
-    </div>
-    <div class="item">
-      <div class="item-label">面积(km²)</div>
-      <div class="item-value">{{ analysisSpatialData.area }}平方米</div>
-    </div>
-    <div class="item">
-      <div class="item-label">常住人口(万)</div>
-      <div class="item-value">{{ analysisSpatialData.populationNum }}个</div>
-    </div>
-
-    <div class="item">
-      <div class="item-label">GDP(万元)</div>
-      <div class="item-value">{{ analysisSpatialData.expert }}个</div>
-    </div>
-<!--    <div class="item">-->
-<!--      <div class="item-label">最近一年GDP</div>-->
-<!--      <div class="item-value">{{ analysisSpatialData.gdp }}元</div>-->
-<!--    </div>-->
-<!--    <div class="item">-->
-<!--      <div class="item-label">易涝点</div>-->
-<!--      <div class="item-value">{{ analysisSpatialData.easyFloodPoint }}个</div>-->
-<!--    </div>-->
-    <div class="item">
-      <div class="item-label">医院</div>
-      <div class="item-value">{{ analysisSpatialData.medicalInstitutionNum }}个</div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup name="AnalyzeDataDialog">
-import BigNumber from 'bignumber.js';
-
-interface AnalysisSpatialData {
-  townName: string;
-  area: number;
-  populationNum: number;
-  gdp: number;
-  easyFloodPoint: number;
-  medicalInstitutionNum: number;
-  expert: number;
-}
-interface Props {
-  selectedScope: any;
-}
-const props = withDefaults(defineProps<Props>(), {});
-const analysisSpatialData = computed(() => {
-  const data: AnalysisSpatialData = {
-    townName: '',
-    area: 0,
-    populationNum: '',
-    gdp: '',
-    easyFloodPoint: '',
-    medicalInstitutionNum: '',
-    expert: 0
-  };
-  for (let key in props.selectedScope) {
-    data.area = new BigNumber(data.area).plus(props.selectedScope[key].area);
-    data.expert = new BigNumber(data.expert).plus(props.selectedScope[key].expert);
-    // selectedScope[key] = '';
-  }
-  return data;
-});
-</script>
-
-<style lang="scss" scoped>
-.analyze-data-container {
-  width: 280px;
-  height: 400px;
-  position: absolute;
-  top: 30px;
-  right: 30px;
-  color: #fff;
-  font-size: 16px;
-  padding: 15px;
-  .item {
-    display: flex;
-    justify-content: space-between;
-    .item-label {
-      margin-right: 8px;
-    }
-  }
-}
-</style>

src/views/globalMap/LeftMenu.vue

@@ -3,15 +3,20 @@
     <div class="search-box">
       <input v-model="searchState.searchText" class="input" @input="changeSearchText" @keyup.enter="changeSearchText" />
       <div v-show="searchState.showList" class="search-list">
-        <div v-for="(item, index) in searchState.resultList" :key="index" class="list-item" @click="selectSearchMarker(item)">{{ item.name + '(' + item.company + ')' }}</div>
-        <div v-show="searchState.showList && searchState.resultList.length === 0" style="text-align: center">无数据</div>
+        <div v-for="(item, index) in searchState.resultList" :key="index" class="list-item"
+             @click="selectSearchMarker(item)">{{ item.name + '(' + item.company + ')' }}
+        </div>
+        <div v-show="searchState.showList && searchState.resultList.length === 0" style="text-align: center">无数据
+        </div>
       </div>
     </div>
 
     <div class="menu-box">
-      <div class="gradient-text menu-btn" @click="changExpand">{{ menuState.isExpand ? '收起' : '展开' }}</div>
+      <div class="menu-btn" @click="changExpand">
+        <div class="gradient-text">{{ menuState.isExpand ? '收起' : '展开' }}</div>
+      </div>
       <Transition>
-        <div v-show="menuState.isExpand">
+        <div v-show="menuState.isExpand" class="menu-box2">
           <div class="menu-header">
             <div
               v-for="(item, index) in menuData"
@@ -26,9 +31,11 @@
             <div v-for="(item, index) in menuData[menuState.activeIndex]?.children" :key="index" class="content-box">
               <div class="box-header">
                 <div v-if="item.name === '防风防汛'" class="icon1" style="width: 79px; height: 87px"></div>
-                <div v-if="item.name === '危化品安全监测' || item.name === '危险化工品'" class="icon2" style="width: 71px; height: 80px"></div>
+                <div v-if="item.name === '危化品安全监测' || item.name === '危险化工品'" class="icon2"
+                     style="width: 71px; height: 80px"></div>
                 <div>{{ item.name }}</div>
-                <div :class="item.show ? 'expand-icon down-icon' : 'expand-icon up-icon'" @click="changeBoxShow(item)"></div>
+                <div :class="item.show ? 'expand-icon down-icon' : 'expand-icon up-icon'"
+                     @click="changeBoxShow(item)"></div>
               </div>
               <Transition>
                 <div v-show="item.show" class="box-content">
@@ -153,6 +160,7 @@ onMounted(() => {
   padding: 0 10px;
   background: url('@/assets/images/menu/search.png');
   position: relative;
+
   .input {
     border: none;
     outline: none;
@@ -163,6 +171,7 @@ onMounted(() => {
     font-size: 46px;
     background-color: transparent;
   }
+
   .search-list {
     position: absolute;
     top: 100px;
@@ -173,26 +182,35 @@ onMounted(() => {
     color: #000;
     font-size: 46px;
     z-index: 9;
+
     .list-item {
       display: block;
       font-size: 16px;
       line-height: 40px;
       cursor: pointer;
       padding: 0 10px;
+
       &:hover {
         background-color: #0a6ebd;
       }
     }
   }
 }
+
 .menu-box {
   width: 871px;
-  height: 1746px;
-  background: url('@/assets/images/menu/menu.png') no-repeat;
+  height: 1732px;
   margin-top: 10px;
   color: #fff;
-  padding: 10px 20px;
   position: relative;
+
+  .menu-box2 {
+    width: 871px;
+    height: 1732px;
+    background: url('@/assets/images/menu/menu.png') no-repeat;
+    padding: 10px 20px;
+  }
+
   .menu-btn {
     position: absolute;
     top: -5px;
@@ -201,11 +219,19 @@ onMounted(() => {
     letter-spacing: 5px;
     font-size: 48px;
     cursor: pointer;
+    width: 379px;
+    height: 60px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: url('@/assets/images/menu/btn.png') no-repeat;
   }
+
   .menu-header {
     display: flex;
     margin-top: 65px;
     height: 78px;
+
     .menu-item {
       flex: 1;
       height: 78px;
@@ -215,8 +241,10 @@ onMounted(() => {
       font-size: 46px;
       letter-spacing: 5px;
       font-family: 'YouSheBiaoTiHei';
+
       &:hover {
         position: relative;
+
         &::before {
           content: '';
           position: absolute;
@@ -229,8 +257,10 @@ onMounted(() => {
         }
       }
     }
+
     .active {
       position: relative;
+
       &::before {
         content: '';
         position: absolute;
@@ -243,14 +273,17 @@ onMounted(() => {
       }
     }
   }
+
   .menu-content {
     padding: 0 35px 0 28px;
+
     .content-box {
       padding: 0 10px;
       margin-top: 10px;
       width: 779px;
       background: url('@/assets/images/menu/menuContent.png') no-repeat;
       background-size: cover;
+
       .box-header {
         height: 103px;
         display: flex;
@@ -263,9 +296,11 @@ onMounted(() => {
         .icon1 {
           background-image: url('@/assets/images/menu/icon1.png');
         }
+
         .icon2 {
           background-image: url('@/assets/images/menu/icon2.png');
         }
+
         .expand-icon {
           position: absolute;
           top: 50%;
@@ -275,13 +310,16 @@ onMounted(() => {
           width: 33px;
           height: 18px;
         }
+
         .down-icon {
           background: url('@/assets/images/menu/down.png') no-repeat;
         }
+
         .up-icon {
           background: url('@/assets/images/menu/up.png') no-repeat;
         }
       }
+
       .box-content {
         display: flex;
         align-items: center;
@@ -289,9 +327,11 @@ onMounted(() => {
         margin-top: 5px;
         padding: 19px 15px;
         overflow: hidden;
+
         .box-item-active {
           text-shadow: 0px 0px 8px #0766d6;
         }
+
         .box-item {
           padding: 20px 15px;
           cursor: pointer;
@@ -299,15 +339,18 @@ onMounted(() => {
           font-family: 'PingFang SC', sans-serif;
           display: flex;
           align-items: center;
+
           &:hover {
             text-shadow: 0px 0px 8px #0766d6;
           }
+
           .checked-box {
             width: 32px;
             height: 32px;
             background: url('@/assets/images/menu/checked-box.png') no-repeat;
             margin-right: 12px;
           }
+
           .checked {
             background: url('@/assets/images/menu/checked-box2.png') no-repeat;
           }

src/views/globalMap/RightMenu/SpatialAnalysis.vue

@@ -41,7 +41,7 @@ interface AnalysisSpatialData {
   expert: number;
 }
 interface Props {
-  selectedScope: any;
+  analysisData: any;
 }
 const props = withDefaults(defineProps<Props>(), {});
 const keyword = ref('');
@@ -55,11 +55,12 @@ const analysisSpatialData = computed(() => {
     medicalInstitutionNum: '',
     expert: 0
   };
-  for (let key in props.selectedScope) {
-    data.area = new BigNumber(data.area).plus(props.selectedScope[key].area);
-    data.expert = new BigNumber(data.expert).plus(props.selectedScope[key].expert);
-    // selectedScope[key] = '';
+  for (let key in props.analysisData) {
+    data.area = new BigNumber(data.area).plus(props.analysisData[key].area);
+    data.expert = new BigNumber(data.expert).plus(props.analysisData[key].expert);
+    // analysisData[key] = '';
   }
+  data.area = new BigNumber(data.area).dividedBy(1000000);
   return data;
 });
 </script>

src/views/globalMap/RightMenu/index.vue

@@ -17,7 +17,7 @@
         <!--图层分析-->
         <template v-if="menuState.activeIndex === 0" />
         <!--空间分析-->
-        <SpatialAnalysis v-if="menuState.activeIndex === 1" />
+        <SpatialAnalysis v-if="menuState.activeIndex === 1" :analysisData="analysisData" />
         <!--江湖河库-->
         <Reservoir v-if="menuState.activeIndex === 2" />
         <!--路网视频-->
@@ -38,6 +38,12 @@ import RoadNetworkVideo from './RoadNetworkVideo.vue';
 import Reservoir from './Reservoir.vue';
 import SpatialAnalysis from '@/views/globalMap/RightMenu/SpatialAnalysis.vue';
 
+interface Props {
+  analysisData: object;
+}
+
+const props = withDefaults(defineProps<Props>(), {});
+
 const menuState = reactive({
   showMenu: false,
   activeIndex: 0,

src/views/globalMap/index.vue

@@ -46,7 +46,7 @@
         @selectSearchMarker="selectSearchMarker"
       />
       <!--右侧菜单-->
-      <RightMenu ref="rightMenuRef" />
+      <RightMenu ref="rightMenuRef" :analysisData="selectedScope" />
       <!--更换地图类型-->
       <SwitchMapTool
         :active-map="activeMap"
@@ -64,9 +64,9 @@
         @undo="undo"
       />
 <!--      <AnalyzeDataDialog v-if="analysisSpatialDataShow" :selectedScope="selectedScope" />-->
-      <div v-if="showDialog" class="box">
-        <div v-for="(item, index) in markerList" :key="index" @click="toAddress(item)">{{item.name}}</div>
-      </div>
+<!--      <div v-if="showDialog" class="box">-->
+<!--        <div v-for="(item, index) in markerList" :key="index" @click="toAddress(item)">{{item.name}}</div>-->
+<!--      </div>-->
     </div>
   </div>
 </template>
@@ -82,7 +82,6 @@ import SwitchMapTool from '@/views/globalMap/SwitchMapTool.vue';
 import LeftMenu from './LeftMenu.vue';
 import TimeAxis from '@/components/TimeAxis/index.vue';
 import DrawTools from '@/views/globalMap/DrawTools.vue';
-import AnalyzeDataDialog from '@/views/globalMap/AnalyzeDataDialog.vue';
 import { countCircleArea, countRectangleArea } from '@/utils/geometryUtil';
 import { deepClone } from '@/utils';
 import { getEmergencyExpertNum, getEmergencyExpertNumRound, getRescueMateria } from '@/api/globalMap';
@@ -162,9 +161,9 @@ const clickMenu = (item) => {
       rightMenuRef.value.handleMenu(item.name);
     }
     if (item.name === '江湖河库') {
-      getWaterList().then((res) => {
-        debugger;
-      });
+      // getWaterList().then((res) => {
+      //   debugger;
+      // });
     }
   }
 };