雨情监测排行弹窗、易涝点附近视频

src/assets/styles/index.scss

@@ -240,7 +240,6 @@ aside {
   /* 设置字体透明 */
   color: transparent;
   /* 设置线性渐变，从红色渐变到蓝色 */
-  //background-image: linear-gradient(to bottom, #fff 40%, #5CC4FA 50%, #40A2E7 100%);
   background-image: linear-gradient(to bottom, #ffffff 30%, #edf7fe 50%, #5cc4fa 70%, #40a2e7 100%);
   /* 使用 -webkit-background-clip 属性将背景剪裁至文本形状 */
   -webkit-background-clip: text;
@@ -265,20 +264,6 @@ aside {
   font-family: 'YouSheBiaoTiHei';
 }
 
-.gradient-text3 {
-  /* 设置字体透明 */
-  color: transparent;
-  /* 设置线性渐变，从红色渐变到蓝色 */
-  background-image: linear-gradient(to bottom, #ffffff 30%, #edf7fe 50%, #5cc4fa 70%, #40a2e7 100%);
-  /* 使用 -webkit-background-clip 属性将背景剪裁至文本形状 */
-  -webkit-background-clip: text;
-  /* 非Webkit内核浏览器需要使用标准前缀 */
-  background-clip: text;
-  /* 把当前元素设置为行内块，以便能够应用背景 */
-  display: inline-block;
-  font-family: 'YouSheBiaoTiHei';
-}
-
 ::-webkit-scrollbar-thumb {
   background-color: #227dfe !important;
 }

src/components/HKVideo/video-container.vue

@@ -1,51 +1,69 @@
 <template>
-  <div v-if="videoData.length === 1" class="video-container1 ">
+  <div v-if="videoData.length === 1" class="video-container1">
     <div class="video-item">
-      <div class="name">{{ videoData[0].name }}</div>
-      <HKVideo :dot_data="videoData[0]" :height="866" />
+      <div class="tag" :title="videoData[0].name">
+        <div class="name">{{ videoData[0].name }}</div>
+      </div>
+      <HKVideo :dot_data="videoData[0]" :height="1100" />
     </div>
   </div>
   <div v-else-if="videoData.length >= 2 && videoData.length <= 4" class="video-container2">
     <div v-for="(item, index) in videoData" :key="index" class="video-item">
-      <div class="name">{{ item.name }}</div>
-      <HKVideo :dot_data="item" :height="410" />
+      <div class="tag" :title="item.name">
+        <div class="name">{{ item.name }}</div>
+      </div>
+      <HKVideo :dot_data="item" :height="8" />
     </div>
   </div>
   <div v-else-if="videoData.length >= 5 && videoData.length <= 6" class="video-container3">
     <div class="box1">
       <div class="video-item2">
-        <div class="name">{{ videoData[0].name }}</div>
-        <HKVideo :dot_data="videoData[0]" :height="562" />
+        <div class="tag" :title="videoData[1].name">
+          <div class="name">{{ videoData[1].name }}</div>
+        </div>
+        <HKVideo :dot_data="videoData[0]" :height="730" />
       </div>
     </div>
     <div class="box2">
       <div class="video-item3">
-        <div class="name">{{ videoData[1].name }}</div>
-        <HKVideo :dot_data="videoData[1]" :height="258" />
+        <div class="tag" :title="videoData[0].name">
+          <div class="name">{{ videoData[0].name }}</div>
+        </div>
+        <HKVideo :dot_data="videoData[1]" :height="365" />
       </div>
       <div class="video-item3">
-        <div class="name">{{ videoData[2].name }}</div>
-        <HKVideo :dot_data="videoData[2]" :height="258" />
+        <div class="tag" :title="videoData[2].name">
+          <div class="name">{{ videoData[2].name }}</div>
+        </div>
+        <HKVideo :dot_data="videoData[2]" :height="365" />
       </div>
     </div>
     <div class="box3">
       <div class="video-item">
-        <div class="name">{{ videoData[3].name }}</div>
-        <HKVideo :dot_data="videoData[3]" :height="258" />
+        <div class="tag" :title="videoData[3].name">
+          <div class="name">{{ videoData[3].name }}</div>
+        </div>
+        <HKVideo :dot_data="videoData[3]" :height="365" />
       </div>
       <div class="video-item">
-        <div class="name">{{ videoData[4].name }}</div>
-        <HKVideo :dot_data="videoData[4]" :height="258" />
+        <div class="tag" :title="videoData[4].name">
+          <div class="name">{{ videoData[4].name }}</div>
+        </div>
+        <HKVideo :dot_data="videoData[4]" :height="365" />
       </div>
       <div class="video-item">
-        <div class="name">{{ videoData[5].name }}</div>
-        <HKVideo :dot_data="videoData[5]" :height="258" />
+        <div class="tag" :title="videoData[5].name">
+          <div class="name">{{ videoData[5].name }}</div>
+        </div>
+        <HKVideo :dot_data="videoData[5]" :height="365" />
       </div>
     </div>
   </div>
   <div v-else-if="videoData.length >= 7" class="video-container4">
     <div v-for="(item, index) in videoData" :key="index" class="video-item">
-      <div class="name">{{ item.name }}</div>
+      <div class="tag" :title="item.name">
+        <div class="name">{{ item.name }}</div>
+      </div>
       <HKVideo :dot_data="item" :height="258" />
     </div>
   </div>
@@ -60,12 +78,44 @@ const props = withDefaults(defineProps<Props>(), {});
 </script>
 
 <style lang="scss" scoped>
+.video-item,
+.video-item2,
+.video-item3 {
+  position: relative;
+  background: url('@/assets/images/video/videoBg.png') no-repeat;
+  background-size: 100% 100%;
+  padding: 17px;
+  .tag {
+    position: absolute;
+    bottom: 17px;
+    right: 17px;
+    color: #fff;
+    z-index: 11;
+    width: 546px;
+    height: 67px;
+    background: url('@/assets/images/video/tag.png') no-repeat;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    .name {
+      width: 480px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+}
 .video-container1 {
   width: 100%;
   height: 100%;
   .video-item {
     width: 100%;
     height: 100%;
+    padding: 70px 50px;
+  }
+  .tag {
+    right: 49px;
+    bottom: 73px;
   }
 }
 .video-container2 {
@@ -75,9 +125,14 @@ const props = withDefaults(defineProps<Props>(), {});
   height: 100%;
   .video-item {
     width: calc(50% - 12px);
-    height: 432px;
+    height: 620px;
     margin-bottom: 12px;
     margin-right: 12px;
+    padding: 30px 20px 30px 30px;
+    .tag {
+      bottom: 31px;
+      right: 20px;
+    }
     &:nth-child(2n) {
       margin-right: 0;
     }
@@ -90,21 +145,27 @@ const props = withDefaults(defineProps<Props>(), {});
   height: 100%;
   .box1 {
     width: calc(66.66666% - 6px);
-    height: 596px;
+    height: 830px;
     margin-bottom: 12px;
     margin-right: 12px;
     .video-item2 {
       width: 100%;
       height: 100%;
+      padding: 48px 30px 30px 40px;
+      .tag {
+        bottom: 50px;
+        right: 29px;
+      }
     }
   }
   .box2 {
     width: calc(33.33333% - 6px);
-    height: 596px;
+    height: 830px;
     .video-item3 {
       width: 100%;
-      height: 292px;
+      height: 415px;
       margin-bottom: 12px;
+      padding: 25px 17px 20px 24px;
       &:nth-child(2) {
         margin-top: 12px;
       }
@@ -112,14 +173,15 @@ const props = withDefaults(defineProps<Props>(), {});
   }
   .box3 {
     width: 100%;
-    height: 292px;
+    height: 415px;
     display: flex;
   }
   .video-item {
     width: calc(33.33333% - 8px);
-    height: 292px;
+    height: 415px;
     margin-bottom: 12px;
     margin-right: 12px;
+    padding: 25px 17px 20px 24px;
     &:nth-child(3n) {
       margin-right: 0;
     }
@@ -149,19 +211,5 @@ const props = withDefaults(defineProps<Props>(), {});
   justify-content: center;
   align-items: center;
 }
-.video-item,
-.video-item2,
-.video-item3 {
-  position: relative;
-  background: url('@/assets/images/video/videoBg.png');
-  background-size: 100% 100%;
-  padding: 17px;
-  .name {
-    position: absolute;
-    bottom: 17px;
-    right: 17px;
-    color: #fff;
-    z-index: 11;
-  }
-}
+
 </style>

src/components/NearbyVideos/index.vue

@@ -0,0 +1,111 @@
+<template>
+  <div class="dialog-container">
+    <div class="close-btn" @click="handleClose"></div>
+    <div class="gradient-text title">附近视频</div>
+    <div class="flex-box">
+      <div>附近距离</div>
+      <el-select v-model="queryParams.radius" class="custom-select" popper-class="custom-popper" :teleported="false" @change="initData">
+        <el-option v-for="item in radiusOption" :key="item.value" :label="item.label" :value="item.value" />
+      </el-select>
+    </div>
+    <div class="video-box">
+      <video-container :video-data="videoMonitorData" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup name="NearbyVideos">
+// 请求参数
+import { getVideoInfo } from '@/api/globalMap';
+
+interface Props {
+  modelValue: boolean;
+  location: string | number[];
+}
+const props = withDefaults(defineProps<Props>(), {});
+const emits = defineEmits(['update:modelValue']);
+const queryParams = reactive({
+  current: 1,
+  size: 9,
+  location: '',
+  radius: '500'
+});
+let videoMonitorData = ref([]);
+const radiusOption = reactive([
+  { label: '500米', value: '500' },
+  { label: '1000米', value: '1000' },
+  { label: '1500米', value: '1500' },
+  { label: '2000米', value: '2000' }
+]);
+const initData = () => {
+  getVideoInfo(queryParams).then((res) => {
+    res.data?.list.forEach((item) => {
+      item.video_code = item.indexcode;
+    });
+    videoMonitorData.value = res.data?.list;
+  });
+};
+watch(
+  () => props.location,
+  () => {
+    queryParams.location = `POINT(${props.location[0]} ${props.location[1]})`;
+    initData();
+  },
+  {
+    immediate: true,
+    deep: true
+  }
+);
+
+const handleClose = () => {
+  emits('update:modelValue', false);
+};
+</script>
+
+<style lang="scss" scoped>
+.dialog-container {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 9;
+  width: 2000px;
+  height: 1562px;
+  background: url('@/assets/images/nearbyVideos/dialog.png') no-repeat;
+  padding: 160px 30px 20px 40px;
+  font-size: 36px;
+  color: #ffffff;
+}
+.flex-box {
+  display: flex;
+  align-items: center;
+  color: #eaf3fc;
+  font-size: 36px;
+  .custom-select {
+    width: 370px;
+    margin-left: 20px;
+  }
+}
+.video-box {
+  margin-top: 30px;
+  height: 1245px;
+  display: flex;
+  flex-wrap: wrap;
+}
+.title {
+  font-size: 84px;
+  position: absolute;
+  top: 25px;
+  left: 70px;
+}
+.close-btn {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  width: 75px;
+  height: 70px;
+  background: url('@/assets/images/map/rightMenu/close.png') no-repeat;
+  background-size: 100% 100%;
+  cursor: pointer;
+}
+</style>

src/types/components.d.ts

@@ -83,6 +83,7 @@ declare module 'vue' {
     MapLogical: typeof import('./../components/Map/MapLogical.vue')['default']
     ModalVideo: typeof import('./../components/HKVideo/modal-video.vue')['default']
     MultiInstanceUser: typeof import('./../components/Process/multiInstanceUser.vue')['default']
+    NearbyVideos: typeof import('./../components/NearbyVideos/index.vue')['default']
     Pagination: typeof import('./../components/Pagination/index.vue')['default']
     ParentView: typeof import('./../components/ParentView/index.vue')['default']
     QuickZoom: typeof import('./../components/Map/quickZoom.vue')['default']

src/views/emergencyCommandMap/LeftSection/VideoMonitor.vue

@@ -215,7 +215,7 @@ const handleSave = () => {
       .video-label {
         position: absolute;
         bottom: 17px;
-        right: 8px;
+        right: 20px;
 
         display: flex;
         .label {
@@ -229,6 +229,7 @@ const handleSave = () => {
           padding-left: 10px;
           color: #fff;
           background-color: rgba(0, 0, 0, 0.4);
+          text-align: right;
         }
         &::before {
           content: '';

src/views/globalMap/RightMenu/OnlinePlotting.vue

@@ -7,10 +7,9 @@
       </el-option>
     </el-select>
     <el-color-picker v-model="mouseToolState.color" popper-class="custom-color-picker" show-alpha size="large" />
-    <el-button size="large" @click="changeDrawing">{{ drawing ? '关闭' : '开启' }}</el-button>
     <div class="flex">
-      <div class="draw-item" @click="handleUndo">撤回</div>
-      <div class="draw-item" @click="handleShowDialog">保存</div>
+      <el-button type="primary" class="draw-item" @click="handleUndo">撤回</el-button>
+      <el-button type="primary" class="draw-item" @click="handleShowDialog">保存</el-button>
     </div>
     <div class="tabs1">
       <div v-for="(item, index) in menu" :key="index" :class="menuActive1 === index ? 'tab tab_active' : 'tab'" @click="clickTab(index)">

src/views/globalMap/RightMenu/PotentialFloodHazard.vue

@@ -59,6 +59,7 @@
       </div>
     </div>
   </div>
+  <NearbyVideos v-if="showNearbyVideos" v-model="showNearbyVideos" :location="location" />
 </template>
 
 <script lang="ts" setup>
@@ -92,6 +93,8 @@ const options = reactive([
   }
 ]);
 const dataList = ref([]);
+const showNearbyVideos = ref(false);
+let location = ref([]);
 const initData = () => {
   getWaterloggedRoadsList(queryParams).then((res) => {
     dataList.value = res.data.list;
@@ -104,8 +107,9 @@ const handleCancel = () => {
 const showMoreVideos = () => {
   console.log('全部视频');
 };
-const handleShowDialog = () => {
-
+const handleShowDialog = (item) => {
+  location.value = [item.lng, item.lat];
+  showNearbyVideos.value = true;
 };
 onMounted(() => {
   initData();

src/views/globalMap/RightMenu/RainMonitor.vue

@@ -25,7 +25,7 @@
       <div class="btn-box">
         <div class="btn">
           <i class="more-icon"></i>
-          <div class="btn-text">更多</div>
+          <div class="btn-text" @click="handleShowMore">更多</div>
         </div>
         <div class="btn">
           <i class="export-icon"></i>
@@ -167,12 +167,14 @@
       </div>
     </div>
   </div>
+  <RainRank v-if="showMore" v-model="showMore" />
 </template>
 
 <script lang="ts" setup>
 import { option6 } from './echartOptions';
 import { graphic } from 'echarts';
 import { getRainfallRange, getRainfallStatisticsCount, getRainfallTownNumCount } from '@/api/globalMap/rainMonitor';
+import RainRank from '@/views/globalMap/RightMenu/RainRank.vue';
 
 const timeOptions = reactive([
   { name: '1小时', value: '1' },
@@ -242,6 +244,7 @@ const queryParams = reactive({
   size: 5,
   sort: 'desc'
 });
+let showMore = ref(false);
 const getRankClass = (rank) => {
   let res = 'rank-other';
   if (rank === 1) {
@@ -266,6 +269,9 @@ const handleSort = () => {
   }
   handleGetRainfallRange();
 };
+const handleShowMore = () => {
+  showMore.value = true;
+};
 // 影响分析
 const rainRange = reactive([25, 50]);
 const analyzeData = ref({

src/views/globalMap/RightMenu/RainRank.vue

@@ -0,0 +1,289 @@
+<template>
+  <div class="dialog-container">
+    <div class="close-btn" @click="handleClose"></div>
+    <div class="gradient-text title">降雨量排行榜</div>
+    <div class="table">
+      <div class="table-header">
+        <div class="td">序号</div>
+        <div class="td td-cursor">
+          <span>县区</span>
+          <i class="down-icon" />
+        </div>
+        <div class="td td-cursor">
+          <span>街镇</span>
+          <i class="down-icon" />
+        </div>
+        <div class="td">站址</div>
+        <div class="td td-cursor">
+          <span>雨量(mm)</span>
+          <i :class="queryParams.sort === 'desc' ? 'desc-icon' : 'asc-icon'" @click="handleSort" />
+        </div>
+      </div>
+      <div v-for="(item, index) in rangeData" :key="index" class="tr">
+        <div class="td">
+          <div :class="getRankClass(item.rn)">{{ item.rn }}</div>
+        </div>
+        <div class="td">{{ item.area }}</div>
+        <div class="td">{{ item.township }}</div>
+        <div class="td btn3">
+          <div class="chart-icon"></div>
+          {{ item.address }}
+        </div>
+        <div class="gradient-text2 td">{{ item.rainfall }}</div>
+      </div>
+    </div>
+    <div class="footer">
+      <el-pagination
+        background
+        :hide-on-single-page="true"
+        layout="total, prev, pager, next"
+        :total="total"
+        :page-size="queryParams.size"
+        :current-page="queryParams.current"
+        @current-change="handleChangePage"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup name="NearbyVideos">
+import { getRainfallRange } from '@/api/globalMap/rainMonitor';
+
+interface Props {
+  modelValue: boolean;
+  location: string | number[];
+}
+const props = withDefaults(defineProps<Props>(), {});
+const emits = defineEmits(['update:modelValue']);
+const rangeData = ref([]);
+const queryParams = reactive({
+  current: 1,
+  size: 10,
+  sort: 'desc'
+});
+const total = ref(0);
+const getRankClass = (rank) => {
+  let res = 'rank-other';
+  if (rank === 1) {
+    res = 'rank1';
+  } else if (rank === 2) {
+    res = 'rank2';
+  } else if (rank === 3) {
+    res = 'rank3';
+  }
+  return res;
+};
+const handleGetRainfallRange = () => {
+  getRainfallRange(queryParams).then((res) => {
+    rangeData.value = res.rows;
+  });
+};
+const handleSort = () => {
+  if (queryParams.sort === 'desc') {
+    queryParams.sort = 'asc';
+  } else {
+    queryParams.sort = 'desc';
+  }
+  handleGetRainfallRange();
+};
+function handleChangePage(newNum) {
+  queryParams.current = newNum;
+  initData();
+}
+const initData = () => {
+  getRainfallRange(queryParams).then((res) => {
+    total.value = res.total;
+    rangeData.value = res.rows;
+  });
+};
+const handleClose = () => {
+  emits('update:modelValue', false);
+};
+onMounted(() => {
+  initData();
+});
+</script>
+
+<style lang="scss" scoped>
+.dialog-container {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 9;
+  width: 2001px;
+  height: 1562px;
+  background: url('@/assets/images/map/rightMenu/rainMonitor/dialog2.png') no-repeat;
+  padding: 170px 30px 20px 40px;
+  font-size: 36px;
+  color: #ffffff;
+}
+.title {
+  font-size: 84px;
+  position: absolute;
+  top: 25px;
+  left: 70px;
+}
+.close-btn {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  width: 75px;
+  height: 70px;
+  background: url('@/assets/images/map/rightMenu/close.png') no-repeat;
+  background-size: 100% 100%;
+  cursor: pointer;
+}
+.table {
+  margin-left: 28px;
+  .table-header {
+    width: 1864px;
+    height: 96px;
+    background: url('@/assets/images/map/rightMenu/rainMonitor/header.png') no-repeat;
+    background-size: 100% 100%;
+    display: flex;
+    align-items: center;
+    .td-cursor {
+      cursor: pointer;
+    }
+  }
+  .tr {
+    width: 1864px;
+    height: 96px;
+    background: url('@/assets/images/map/rightMenu/rainMonitor/tr.png') no-repeat;
+    background-size: 100% 100%;
+    display: flex;
+    align-items: center;
+    margin-top: 10px;
+    .btn3 {
+      cursor: pointer;
+      color: #00d0ee;
+      display: flex;
+      .chart-icon {
+        width: 52px;
+        height: 51px;
+        background: url('@/assets/images/map/rightMenu/rainMonitor/icon5.png') no-repeat;
+        margin-right: 5px;
+      }
+    }
+  }
+  .gradient-text2 {
+    color: transparent !important;
+  }
+  .td {
+    font-size: 38px;
+    color: #edfaff;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    &:nth-child(1) {
+      width: 140px;
+    }
+    &:nth-child(2) {
+      width: 176px;
+    }
+    &:nth-child(3) {
+      width: 280px;
+    }
+    &:nth-child(4) {
+      flex: 1;
+    }
+    &:nth-child(5) {
+      width: 230px;
+    }
+  }
+  .down-icon {
+    display: inline-block;
+    width: 33px;
+    height: 15px;
+    background: url('@/assets/images/map/rightMenu/rainMonitor/down.png') no-repeat;
+    cursor: pointer;
+    margin-left: 8px;
+  }
+  .asc-icon {
+    display: inline-block;
+    width: 33px;
+    height: 33px;
+    background: url('@/assets/images/map/rightMenu/rainMonitor/asc.png') no-repeat;
+    cursor: pointer;
+    margin-left: 8px;
+  }
+  .desc-icon {
+    display: inline-block;
+    width: 33px;
+    height: 33px;
+    background: url('@/assets/images/map/rightMenu/rainMonitor/desc.png') no-repeat;
+    cursor: pointer;
+    margin-left: 8px;
+  }
+  .rank1,
+  .rank2,
+  .rank3,
+  .rank-other {
+    width: 50px;
+    height: 48px;
+    color: #ecfaff;
+    font-family: BEBAS-1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .rank1 {
+    height: 47px;
+    background: url('@/assets/images/map/rightMenu/rainMonitor/first.png') no-repeat;
+  }
+  .rank2 {
+    background: url('@/assets/images/map/rightMenu/rainMonitor/second.png') no-repeat;
+  }
+  .rank3 {
+    background: url('@/assets/images/map/rightMenu/rainMonitor/third.png') no-repeat;
+  }
+  .rank-other {
+    background: url('@/assets/images/map/rightMenu/rainMonitor/other.png') no-repeat;
+  }
+}
+.footer {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 30px;
+  padding-right: 40px;
+  :deep(.el-pagination__total) {
+    color: #a7ccdf;
+    font-size: 32px;
+  }
+
+  :deep(.el-pagination) {
+    .btn-next,
+    .btn-prev {
+      background-color: transparent;
+      border: none;
+      .el-icon {
+        font-size: 22px;
+        color: #a7ccdf;
+      }
+    }
+    .el-pager li {
+      width: 64px;
+      height: 64px;
+      line-height: 64px;
+      text-align: center;
+      font-size: 32px;
+      color: #a7ccdf;
+      background-color: #0e3064;
+      border: 1px solid #0c57a7;
+      margin: 0 6px;
+      &:hover {
+        background-color: #038dff;
+        border: 1px solid #038dff;
+      }
+    }
+    .el-pager li.is-active {
+      background-color: #038dff;
+      border: 1px solid #038dff;
+    }
+  }
+}
+</style>

src/views/globalMap/RightMenu/index.vue

@@ -10,7 +10,7 @@
             @click="clickMenu(index)"
           >
             <div :class="item.meta?.icon + ' ' + item.meta?.icon + '_checked'"></div>
-            <div class="gradient-text3 text">{{ item.name }}</div>
+            <div class="gradient-text text">{{ item.name }}</div>
           </div>
         </div>
         <div v-show="menuState.menuData.length > 0" :class="menuState.showMenu ? 'right-btn' : 'left-btn'" @click="clickContractMenu"></div>

src/views/globalMap/index.vue

@@ -29,7 +29,6 @@ import { deepClone } from '@/utils';
 import { getPointInfo } from '@/api/globalMap';
 import RightMenu from './RightMenu/index.vue';
 import { PointType } from '@/api/globalMap/type';
-import { c } from 'vite/dist/node/types.d-aGj9QkWt';
 
 interface Props {
   isComponent?: boolean;
@@ -46,7 +45,7 @@ const mapData = reactive(logicalData);
 let mapRef = ref(null);
 let map2Ref = ref(null);
 // logical vectorgraph satellite satellite2 satellite3
-let activeMap = ref('vectorgraph');
+let activeMap = ref('logical');
 
 const switchMap = (key) => {
   activeMap.value = key;