地图右侧菜单调整

src/types/components.d.ts

@@ -13,7 +13,6 @@ declare module 'vue' {
     Breadcrumb: typeof import('./../components/Breadcrumb/index.vue')['default']
     BuildCode: typeof import('./../components/BuildCode/index.vue')['default']
     Chart: typeof import('./../components/Chart/index.vue')['default']
-    ChunkUpload: typeof import('./../components/ChunkUpload/index.vue')['default']
     CompanyMap: typeof import('./../components/Map/company-map.vue')['default']
     Contact: typeof import('./../components/Contact/index.vue')['default']
     ContactSelect: typeof import('./../components/ContactSelect/index.vue')['default']
@@ -24,16 +23,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,25 +50,37 @@ 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']
+    ElSegmented: typeof import('element-plus/es')['ElSegmented']
     ElSelect: typeof import('element-plus/es')['ElSelect']
+    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']
@@ -84,6 +103,7 @@ declare module 'vue' {
     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/RightMenu/CommunicationSupport.vue

@@ -1,83 +1,85 @@
 <template>
-  <Dialog custom-show type="lg" title="通讯保障" height="650px" hide-footer @close="handleClose">
-    <div class="content">
-      <div class="left-content">
-        <el-input v-model="queryParams1.keyword" class="custom-input" placeholder="组织架构搜索">
-          <template #prefix>
-            <el-icon class="el-input__icon"><search /></el-icon>
-          </template>
-        </el-input>
-        <div class="tree-container">
-          <div class="tree-box">
-            <el-tree :data="treeData" :props="{ value: 'deptId', label: 'deptName', children: 'children' }" accordion @node-click="handleNodeClick" />
-          </div>
-        </div>
-      </div>
-      <div class="middle-content">
-        <div class="search-box">
-          <el-select
-            v-model="queryParams1.value1"
-            class="custom-select select-box"
-            placeholder="全部"
-            popper-class="custom-select-popper"
-            :teleported="false"
-          >
-            <el-option v-for="level in options" :key="level.value" :label="level.name" :value="level.value"></el-option>
-          </el-select>
+  <div>
+    <Dialog custom-show type="lg" title="通讯保障" height="650px" hide-footer @close="handleClose">
+      <div class="content">
+        <div class="left-content">
           <el-input v-model="queryParams1.keyword" class="custom-input" placeholder="组织架构搜索">
             <template #prefix>
               <el-icon class="el-input__icon"><search /></el-icon>
             </template>
           </el-input>
-        </div>
-        <div class="user-box">
-          <div class="user-table">
-            <div class="tr">
-              <div class="td2">
-                <div :class="getCheckedClass()" @click="handleChecked"></div>
-              </div>
-              <div class="td">姓名</div>
-              <div class="td3">职务</div>
+          <div class="tree-container">
+            <div class="tree-box">
+              <el-tree :data="treeData" :props="{ value: 'deptId', label: 'deptName', children: 'children' }" accordion @node-click="handleNodeClick" />
             </div>
-            <div class="table-content">
-              <div v-for="(item, index) in userList" :key="index" class="tr2">
+          </div>
+        </div>
+        <div class="middle-content">
+          <div class="search-box">
+            <el-select
+              v-model="queryParams1.value1"
+              class="custom-select select-box"
+              placeholder="全部"
+              popper-class="custom-select-popper"
+              :teleported="false"
+            >
+              <el-option v-for="level in options" :key="level.value" :label="level.name" :value="level.value"></el-option>
+            </el-select>
+            <el-input v-model="queryParams1.keyword" class="custom-input" placeholder="组织架构搜索">
+              <template #prefix>
+                <el-icon class="el-input__icon"><search /></el-icon>
+              </template>
+            </el-input>
+          </div>
+          <div class="user-box">
+            <div class="user-table">
+              <div class="tr">
                 <div class="td2">
-                  <div :class="item.checked ? 'common-checked-active' : 'common-checked'" @click="handleChecked2(item)"></div>
+                  <div :class="getCheckedClass()" @click="handleChecked"></div>
                 </div>
-                <div class="td">{{ item.nickName }}</div>
-                <div class="td3">
-                  {{ item.deptName }}
-                  <div class="phone-icon"></div>
+                <div class="td">姓名</div>
+                <div class="td3">职务</div>
+              </div>
+              <div class="table-content">
+                <div v-for="(item, index) in userList" :key="index" class="tr2">
+                  <div class="td2">
+                    <div :class="item.checked ? 'common-checked-active' : 'common-checked'" @click="handleChecked2(item)"></div>
+                  </div>
+                  <div class="td">{{ item.nickName }}</div>
+                  <div class="td3">
+                    {{ item.deptName }}
+                    <div class="phone-icon"></div>
+                  </div>
                 </div>
               </div>
             </div>
           </div>
         </div>
-      </div>
-      <div class="select-box2">
-        <div class="select-header">
-          <div class="left-item">
-            <div>已选择：</div>
-            <div class="text">{{ selectList.length }}</div>
-            <div>人</div>
-          </div>
-          <div class="clear-btn" @click="clearSelect">清空</div>
-        </div>
-        <div class="select-content">
-          <div v-for="(item, index) in selectList" :key="index" class="box-item">
-            <div class="line">
-              <div class="text1">{{ item.nickName }}</div>
-              <div class="text2">{{ item.duty }}</div>
+        <div class="select-box2">
+          <div class="select-header">
+            <div class="left-item">
+              <div>已选择：</div>
+              <div class="text">{{ selectList.length }}</div>
+              <div>人</div>
             </div>
-            <div class="line" style="margin-top: 20px">
-              <div class="text2">{{ item.deptName }}</div>
+            <div class="clear-btn" @click="clearSelect">清空</div>
+          </div>
+          <div class="select-content">
+            <div v-for="(item, index) in selectList" :key="index" class="box-item">
+              <div class="line">
+                <div class="text1">{{ item.nickName }}</div>
+                <div class="text2">{{ item.duty }}</div>
+              </div>
+              <div class="line" style="margin-top: 20px">
+                <div class="text2">{{ item.deptName }}</div>
+              </div>
+              <div class="close-btn" @click="deleteItem(item)"></div>
             </div>
-            <div class="close-btn" @click="deleteItem(item)"></div>
           </div>
         </div>
       </div>
-    </div>
-  </Dialog>
+    </Dialog>
+  </div>
 </template>
 
 <script lang="ts" setup>

src/views/globalMap/RightMenu/OnlinePlotting/LayerDetail.vue

@@ -13,7 +13,14 @@
     <div class="btn-box2">
       <div class="box-left">
         <div class="text1">分类</div>
-        <el-select v-model="type" :teleported="false" class="custom-select" popper-class="custom-select-popper" style="width: 140px">
+        <el-select
+          v-model="type"
+          :teleported="false"
+          class="custom-select"
+          popper-class="custom-select-popper"
+          style="width: 140px"
+          @change="handleChange"
+        >
           <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value" />
         </el-select>
       </div>
@@ -41,7 +48,7 @@
         <div class="td">时间</div>
         <div class="td">操作</div>
       </div>
-      <div v-for="(item, index) in dataList" :key="index">
+      <div v-for="(item, index) in filterDataList" :key="index">
         <div class="tr">
           <div class="td" :title="item.group_name">{{ item.group_name }}</div>
           <div class="td" :title="item.nickName">{{ item.nick_name }}</div>
@@ -67,9 +74,9 @@
       </div>
     </div>
   </Dialog>
-  <EditGroup v-if="showGroup" v-model="showGroup" :patternId="patternId" :groupId="groupId" @change="getList" />
+  <EditGroup v-if="showGroup" v-model="showGroup" :pattern-id="patternId" :group-id="groupId" @change="getList" />
   <Contact v-if="showCooperate" v-model="showCooperate" @close="handleClose3" @confirm="handleConfirm" />
-  <CollaborativeUser v-if="showUser" v-model="showUser" :patternId="patternId" />
+  <CollaborativeUser v-if="showUser" v-model="showUser" :pattern-id="patternId" />
   <ImportLayer v-if="showImportLayer" v-model="showImportLayer" />
 </template>
 
@@ -78,6 +85,7 @@ import { addWsUser, delGroup, getBzList, updateBzVisible, updateGroupVisible } f
 import ImportLayer from './ImportLayer.vue';
 import EditGroup from './EditGroup.vue';
 import CollaborativeUser from './CollaborativeUser.vue';
+import { deepClone } from '@/utils';
 const props = defineProps({
   modelValue: Boolean,
   patternId: String,
@@ -88,10 +96,10 @@ const emits = defineEmits(['update:modelValue', 'handleSendData', 'showAnnotatio
 let type = ref('');
 let typeOptions = ref([
   { label: '全部', value: '' },
-  { label: '点', value: '1' },
-  { label: '线', value: '2' },
-  { label: '面', value: '3' },
-  { label: '其他', value: '4' }
+  { label: '点', value: 'marker' },
+  { label: '线', value: 'line' },
+  { label: '面', value: 'polygon' },
+  { label: '其他', value: 'other' }
 ]);
 let queryParams = reactive({
   pattern_id: props.patternId
@@ -149,6 +157,7 @@ const handleShowImportLayer = () => {
 const getList = () => {
   getBzList(queryParams).then((res) => {
     dataList.value = res.data;
+    handleChange();
   });
 };
 const handleVisible = (item) => {
@@ -161,6 +170,36 @@ const handleVisible2 = (item) => {
     getList();
   });
 };
+const filterDataList = ref([]);
+// 分类变化搜索
+const handleChange = () => {
+  let search = [];
+  if (type.value === 'marker') {
+    search = ['marker'];
+  } else if (type.value === 'line') {
+    search = ['anyLine', 'straightLine'];
+  } else if (type.value === 'polygon') {
+    search = ['rectangle', 'polygon'];
+  } else if (type.value === 'other') {
+    search = ['text'];
+  }
+  const filterData = [];
+  dataList.value.forEach((item) => {
+    let arr = deepClone(item);
+    let list = [];
+    item.bz_list.forEach((item2) => {
+      if (item2.content) {
+        const content = JSON.parse(item2.content);
+        if (search.includes(content.type) || !type.value) {
+          list.push(item2);
+        }
+      }
+    });
+    arr.bz_list = list;
+    filterData.push(arr);
+  });
+  filterDataList.value = filterData;
+};
 onMounted(() => {
   getList();
 });
@@ -171,9 +210,6 @@ onMounted(() => {
   display: flex;
   justify-content: flex-end;
   align-items: center;
-  position: absolute;
-  top: 30px;
-  right: 22px;
 }
 .btn-box2 {
   display: flex;

src/views/globalMap/RightMenu/OnlinePlotting/index.vue

@@ -1,216 +1,228 @@
 <template>
-  <div class="menu-content">
-    <div class="gradient-text common-dialog-title2">实时标绘</div>
-    <CollaborativeOperationBar
-      v-model="collaboration"
-      :title="collaborativeTitle"
-      :data="currentState"
-      @closeCollaboration="handleCloseCollaboration"
-      @confirm="getList"
-    />
-    <div class="line">
-      <div class="tabs1">
-        <div v-for="(item, index) in menu" :key="index" :class="menuActive1 === index ? 'tab tab_active' : 'tab'" @click="clickTab(index)">
-          {{ item.name }}
-        </div>
-      </div>
-      <div class="btn-box">
-        <div class="btn1" @click="handleScreenshot">
-          <div class="icon1" />
-          当前地图截图导出
-        </div>
-        <div v-show="!collaboration" class="btn2" @click="handlePlotting">协同标绘</div>
-        <div v-show="collaboration" class="btn2" @click="handleShowLayer">查看图层</div>
-      </div>
-    </div>
-    <div v-if="menuActive1 === 0" class="content">
-      <div class="box1">
-        <div v-show="!showSetting" class="box-item">
-          <div class="btn" @click="handleUndo">
-            <div class="revoke-icon" />
-            撤回
-          </div>
-          <div class="line2"></div>
-          <div class="btn">
-            <div class="delete-icon" />
-            删除
-          </div>
-          <div class="line2"></div>
-          <div class="btn" @click="handleShowDialog">
-            <div class="save-icon" />
-            保存
-          </div>
-        </div>
-        <div v-show="showSetting" class="box-item">
-          <div class="btn" @click="handleQuitSetting">
-            <div class="revoke-icon"></div>
-            退出设置
+  <div>
+    <div class="menu-content">
+      <div class="gradient-text common-dialog-title2">实时标绘</div>
+      <CollaborativeOperationBar
+        v-model="collaboration"
+        :title="collaborativeTitle"
+        :data="currentState"
+        @closeCollaboration="handleCloseCollaboration"
+        @confirm="getList"
+      />
+      <div class="line">
+        <div class="tabs1">
+          <div v-for="(item, index) in menu" :key="index" :class="menuActive1 === index ? 'tab tab_active' : 'tab'" @click="clickTab(index)">
+            {{ item.name }}
           </div>
         </div>
-        <div class="box-item">
-          <div class="btn">
-            <i class="template-icon" />
-            模板导入
-          </div>
-          <div class="line2"></div>
-          <div class="btn">
-            <i class="categoryImport-icon" />
-            分类导入
-          </div>
-          <div class="line2"></div>
-          <div class="btn" @click="handleOpenSetting">
-            <i class="setting-icon" />
-            设置
+        <div class="btn-box">
+          <div class="btn1" @click="handleScreenshot">
+            <div class="icon1" />
+            当前地图截图导出
           </div>
+          <div v-show="!collaboration" class="btn2" @click="handlePlotting">协同标绘</div>
+          <div v-show="collaboration" class="btn2" @click="handleShowLayer">查看图层</div>
         </div>
       </div>
-      <div class="tab-content">
-        <div class="tabs2">
-          <div
-            v-for="(item, index) in menu[menuActive1].children"
-            :key="index"
-            :class="menuActive2 === index ? 'tab tab_active' : 'tab'"
-            @click="clickTab2(index)"
-          >
-            {{ item.name }}
+      <div v-if="menuActive1 === 0" class="content">
+        <div class="box1">
+          <div v-show="!showSetting" class="box-item">
+            <div class="btn" @click="handleUndo">
+              <div class="revoke-icon" />
+              撤回
+            </div>
+            <div class="line2"></div>
+            <div class="btn">
+              <div class="delete-icon" />
+              删除
+            </div>
+            <div class="line2"></div>
+            <div class="btn" @click="handleShowDialog">
+              <div class="save-icon" />
+              保存
+            </div>
           </div>
-        </div>
-        <div class="tab-content2">
-          <div v-show="menuActive2 === 0" class="line3">
-            <LineWidthSelect v-model="mouseToolState.lineWidth" :options="lineWidthOptions" />
-            <div class="color-container">
-              <el-color-picker v-model="mouseToolState.color" size="small" popper-class="custom-color-picker" show-alpha />
+          <div v-show="showSetting" class="box-item">
+            <div class="btn" @click="handleQuitSetting">
+              <div class="revoke-icon"></div>
+              退出设置
+            </div>
+          </div>
+          <div class="box-item">
+            <div class="btn">
+              <i class="template-icon" />
+              模板导入
+            </div>
+            <div class="line2"></div>
+            <div class="btn">
+              <i class="categoryImport-icon" />
+              分类导入
+            </div>
+            <div class="line2"></div>
+            <div class="btn" @click="handleOpenSetting">
+              <i class="setting-icon" />
+              设置
             </div>
           </div>
-          <div v-if="menu[menuActive1] && menu[menuActive1].children && menu[menuActive1].children[menuActive2]" class="tab-list">
+        </div>
+        <div class="tab-content">
+          <div class="tabs2">
             <div
-              v-for="(item, index) in menu[menuActive1].children[menuActive2].children"
+              v-for="(item, index) in menu[menuActive1].children"
               :key="index"
-              :class="menuActive3 === index ? 'tab tab_active' : 'tab'"
-              @click="clickTab3(item, index)"
+              :class="menuActive2 === index ? 'tab tab_active' : 'tab'"
+              @click="clickTab2(index)"
             >
-              <div v-show="!showSetting" :class="menuActive3 === index ? 'checked2' : 'checked1'"></div>
-              <img :src="getImageUrl(item.image)" class="icon" />
               {{ item.name }}
-              <div v-if="!!showSetting" class="setting-btn" @click="handleShowSetting(item)" />
-              <div v-if="item.showSetting" class="setting-menu">
-                <div class="menu-item" @click="handleShowSwitch(item)">
-                  <i class="icon-switch" />
-                  <span>更换</span>
-                </div>
-                <div class="menu-item" @click="handleMenuItemHide(item)">
-                  <i class="icon-eye" />
-                  <span>{{ item.visible === '0' ? '隐藏' : '显示' }}</span>
-                </div>
-                <div class="menu-item" @click="handleMenuItemDelete(item)">
-                  <i class="icon-delete" />
-                  <span>删除</span>
-                </div>
+            </div>
+          </div>
+          <div class="tab-content2">
+            <div v-show="menuActive2 === 0" class="line3">
+              <LineWidthSelect v-model="mouseToolState.lineWidth" :options="lineWidthOptions" />
+              <div class="color-container">
+                <el-color-picker v-model="mouseToolState.color" size="small" popper-class="custom-color-picker" show-alpha />
               </div>
             </div>
-            <div v-if="showSetting" class="tab" @click="handleShowAddClass">
-              <el-icon color="#7495b4" :size="35"><Plus /></el-icon>
+            <div v-if="menu[menuActive1] && menu[menuActive1].children && menu[menuActive1].children[menuActive2]" class="tab-list">
+              <div
+                v-for="(item, index) in menu[menuActive1].children[menuActive2].children"
+                :key="index"
+                :class="menuActive3 === index ? 'tab tab_active' : 'tab'"
+                @click="clickTab3(item, index)"
+              >
+                <div v-show="!showSetting" :class="menuActive3 === index ? 'checked2' : 'checked1'"></div>
+                <img :src="getImageUrl(item.image)" class="icon" />
+                {{ item.name }}
+                <div v-if="!!showSetting" class="setting-btn" @click="handleShowSetting(item)" />
+                <div v-if="item.showSetting" class="setting-menu">
+                  <div class="menu-item" @click="handleShowSwitch(item)">
+                    <i class="icon-switch" />
+                    <span>更换</span>
+                  </div>
+                  <div class="menu-item" @click="handleMenuItemHide(item)">
+                    <i class="icon-eye" />
+                    <span>{{ item.visible === '0' ? '隐藏' : '显示' }}</span>
+                  </div>
+                  <div class="menu-item" @click="handleMenuItemDelete(item)">
+                    <i class="icon-delete" />
+                    <span>删除</span>
+                  </div>
+                </div>
+              </div>
+              <div v-if="showSetting" class="tab" @click="handleShowAddClass">
+                <el-icon color="#7495b4" :size="35">
+                  <Plus />
+                </el-icon>
+              </div>
             </div>
           </div>
         </div>
       </div>
-    </div>
-    <div v-else-if="menuActive1 === 1" class="tab-content3">
-      <!--      <div class="box1">-->
-      <!--        <div class="box-item">-->
-      <!--          <div class="btn">-->
-      <!--            <div class="merge-icon"></div>-->
-      <!--            合并-->
-      <!--          </div>-->
-      <!--        </div>-->
-      <!--      </div>-->
-      <div class="params-box">
-        <el-input v-model="queryParams.pattern_name" class="custom-input" placeholder="请输入" @input="handleQuery">
-          <template #prefix>
-            <el-icon class="el-input__icon"><search /></el-icon>
-          </template>
-        </el-input>
-      </div>
-      <div class="custom-table">
-        <div class="table-header">
-          <div class="th">预案名称</div>
-          <div class="th">操作</div>
+      <div v-else-if="menuActive1 === 1" class="tab-content3">
+        <!--      <div class="box1">-->
+        <!--        <div class="box-item">-->
+        <!--          <div class="btn">-->
+        <!--            <div class="merge-icon"></div>-->
+        <!--            合并-->
+        <!--          </div>-->
+        <!--        </div>-->
+        <!--      </div>-->
+        <div class="params-box">
+          <el-input v-model="queryParams.pattern_name" class="custom-input" placeholder="请输入" @input="handleQuery">
+            <template #prefix>
+              <el-icon class="el-input__icon">
+                <search />
+              </el-icon>
+            </template>
+          </el-input>
         </div>
-        <div class="table-content">
-          <div v-for="(item, index) in patternList" :key="index" class="tr" @click="handleShowConfirm(item)">
-            <div class="td">
-              <div>{{ item.pattern_name }}</div>
-            </div>
-            <div class="td td2">
-              <div class="btn" @click.stop="handleDelete(item.id)">
-                <div class="delete-icon"></div>
-                删除
-              </div>
-              <div class="line2"></div>
-              <div class="btn" @click.stop="handleEdit(item.id)">
-                <div class="edit-icon"></div>
-                编辑
+        <div class="custom-table">
+          <div class="table-header">
+            <div class="th">预案名称</div>
+            <div class="th">操作</div>
+          </div>
+          <div class="table-content">
+            <div v-for="(item, index) in patternList" :key="index" class="tr" @click="handleShowConfirm(item)">
+              <div class="td">
+                <div>{{ item.pattern_name }}</div>
               </div>
-              <div class="line2"></div>
-              <div class="btn" @click.stop="handleShare('2', item.id)">
-                <div class="share-icon"></div>
-                分享
+              <div class="td td2">
+                <div class="btn" @click.stop="handleDelete(item.id)">
+                  <div class="delete-icon"></div>
+                  删除
+                </div>
+                <div class="line2"></div>
+                <div class="btn" @click.stop="handleEdit(item.id)">
+                  <div class="edit-icon"></div>
+                  编辑
+                </div>
+                <div class="line2"></div>
+                <div class="btn" @click.stop="handleShare('2', item.id)">
+                  <div class="share-icon"></div>
+                  分享
+                </div>
               </div>
             </div>
           </div>
-        </div>
-        <div class="footer">
-          <el-pagination
-            v-model:current-page="queryParams.page"
-            v-model:page-size="queryParams.pageSize"
-            background
-            :hide-on-single-page="true"
-            layout="total, prev, pager, next"
-            :total="total"
-            @current-change="getList"
-          />
+          <div class="footer">
+            <el-pagination
+              v-model:current-page="queryParams.page"
+              v-model:page-size="queryParams.pageSize"
+              background
+              :hide-on-single-page="true"
+              layout="total, prev, pager, next"
+              :total="total"
+              @current-change="getList"
+            />
+          </div>
         </div>
       </div>
     </div>
+    <!--添加修改分类弹窗-->
+    <EditClassDialog
+      v-if="showAddDialog"
+      :id="selectEditId"
+      v-model="showAddDialog"
+      :template-id="selectTemplateId"
+      @update-data="getTemplateTreeData"
+    />
+    <!--添加文字-->
+    <TextEdit v-if="showTextEdit" v-model="showTextEdit" @add-text="addText" />
+    <!--绘制提示信息-->
+    <div v-show="tipTitle !== ''" class="tipTitle">{{ tipTitle }}</div>
+    <!--保存修改弹窗-->
+    <EditDialog v-if="showEdit" v-model="showEdit" :edit-data="editData" @submit="handleSubmit" />
+    <Contact v-if="shareState.showShare" v-model="shareState.showShare" @close="handleCloseShare" @confirm="handleShareConfirm" />
+    <!--修改预案-->
+    <Dialog v-if="showForm" v-model="showForm" custom-show title="协同标绘" type="xs" @close="showForm = false" @confirm="handleSendForm">
+      <div style="display: flex; align-items: center">
+        <div style="font-size: 16px">预案名称：</div>
+        <el-input v-model="form.pattern_name" class="custom-input" placeholder="请输入" style="flex: 1" />
+      </div>
+    </Dialog>
+    <!--加载预案确认-->
+    <Dialog
+      v-if="showConfirmDialog"
+      v-model="showConfirmDialog"
+      custom-show
+      title="提示"
+      height="auto"
+      type="xs"
+      @close="handleCancel"
+      @confirm="handleShowPatternData"
+    >
+      <div>是否确定加载该预案到地图上？</div>
+    </Dialog>
+    <LayerDetail
+      v-if="showLayer"
+      v-model="showLayer"
+      :pattern-id="patternId"
+      :showAnnotationName="showAnnotationName"
+      @showAnnotationNameChange="showAnnotationNameChange"
+    />
+    <!--协同标绘选择弹窗-->
+    <SelectPoltting v-if="showOnlinePlotting" v-model="showOnlinePlotting" @confirm="handleOpenPlotting" />
   </div>
-  <!--添加修改分类弹窗-->
-  <EditClassDialog
-    v-if="showAddDialog"
-    :id="selectEditId"
-    v-model="showAddDialog"
-    :template-id="selectTemplateId"
-    @update-data="getTemplateTreeData"
-  />
-  <!--添加文字-->
-  <TextEdit v-if="showTextEdit" v-model="showTextEdit" @add-text="addText" />
-  <!--绘制提示信息-->
-  <div v-show="tipTitle !== ''" class="tipTitle">{{ tipTitle }}</div>
-  <!--保存修改弹窗-->
-  <EditDialog v-if="showEdit" v-model="showEdit" :edit-data="editData" @submit="handleSubmit" />
-  <Contact v-if="shareState.showShare" v-model="shareState.showShare" @close="handleCloseShare" @confirm="handleShareConfirm" />
-  <!--修改预案-->
-  <Dialog v-if="showForm" v-model="showForm" custom-show title="协同标绘" type="xs" @close="showForm = false" @confirm="handleSendForm">
-    <div style="display: flex; align-items: center">
-      <div style="font-size: 16px">预案名称：</div>
-      <el-input v-model="form.pattern_name" class="custom-input" placeholder="请输入" style="flex: 1" />
-    </div>
-  </Dialog>
-  <!--加载预案确认-->
-  <Dialog
-    v-if="showConfirmDialog"
-    v-model="showConfirmDialog"
-    custom-show
-    title="提示"
-    height="auto"
-    type="xs"
-    @close="handleCancel"
-    @confirm="handleShowPatternData"
-  >
-    <div>是否确定加载该预案到地图上？</div>
-  </Dialog>
-  <LayerDetail v-if="showLayer" v-model="showLayer" :pattern-id="patternId" :showAnnotationName="showAnnotationName" @showAnnotationNameChange="showAnnotationNameChange" />
-  <!--协同标绘选择弹窗-->
-  <SelectPoltting v-if="showOnlinePlotting" v-model="showOnlinePlotting" @confirm="handleOpenPlotting" />
 </template>
 
 <script lang="ts" setup name="OnlinePlotting">
@@ -1148,13 +1160,16 @@ onUnmounted(() => {
 :deep(.el-color-dropdown__link-btn) {
   display: none;
 }
+
 .line {
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
+
 .tabs1 {
   display: flex;
+
   .tab {
     width: 123px;
     height: 30px;
@@ -1166,6 +1181,7 @@ onUnmounted(() => {
     color: #b7c1d5;
     font-family: YouSheBiaoTiHei;
     padding-left: 28px;
+
     &:hover {
       width: 123px;
       height: 30px;
@@ -1174,6 +1190,7 @@ onUnmounted(() => {
       background-size: 100% 100%;
     }
   }
+
   .tab_active {
     width: 123px;
     height: 30px;
@@ -1182,6 +1199,7 @@ onUnmounted(() => {
     background-size: 100% 100%;
   }
 }
+
 .btn1 {
   width: 200px;
   height: 60px;
@@ -1193,6 +1211,7 @@ onUnmounted(() => {
   cursor: pointer;
   font-size: 14px;
   color: #edfaff;
+
   .icon1 {
     width: 22px;
     height: 22px;
@@ -1201,6 +1220,7 @@ onUnmounted(() => {
     margin-right: 6px;
   }
 }
+
 .btn2 {
   width: 104px;
   height: 29px;
@@ -1211,6 +1231,7 @@ onUnmounted(() => {
   cursor: pointer;
   font-size: 16px;
   color: #edfaff;
+
   .icon1 {
     width: 42px;
     height: 42px;
@@ -1218,6 +1239,7 @@ onUnmounted(() => {
     margin-right: 12px;
   }
 }
+
 .box1 {
   display: flex;
   justify-content: space-between;
@@ -1227,15 +1249,18 @@ onUnmounted(() => {
   background: url('@/assets/images/map/rightMenu/onlinePlotting/box1.png') no-repeat;
   background-size: 100% 100%;
   padding: 10px 12px;
+
   .box-item {
     display: flex;
     align-items: center;
   }
 }
+
 .btn {
   display: flex;
   align-items: center;
   cursor: pointer;
+
   .revoke-icon {
     width: 24px;
     height: 25px;
@@ -1243,6 +1268,7 @@ onUnmounted(() => {
     background: url('@/assets/images/map/rightMenu/onlinePlotting/revoke.png') no-repeat;
     background-size: 100% 100%;
   }
+
   .delete-icon {
     width: 25px;
     height: 25px;
@@ -1250,6 +1276,7 @@ onUnmounted(() => {
     background: url('@/assets/images/map/rightMenu/onlinePlotting/delete.png') no-repeat;
     background-size: 100% 100%;
   }
+
   .edit-icon {
     width: 23px;
     height: 23px;
@@ -1257,6 +1284,7 @@ onUnmounted(() => {
     background: url('@/assets/images/map/rightMenu/onlinePlotting/edit.png') no-repeat;
     background-size: 100% 100%;
   }
+
   .cancel-icon {
     width: 25px;
     height: 25px;
@@ -1264,6 +1292,7 @@ onUnmounted(() => {
     background: url('@/assets/images/map/rightMenu/onlinePlotting/cancel.png') no-repeat;
     background-size: 100% 100%;
   }
+
   .save-icon {
     width: 23px;
     height: 23px;
@@ -1271,6 +1300,7 @@ onUnmounted(() => {
     background: url('@/assets/images/map/rightMenu/onlinePlotting/save.png') no-repeat;
     background-size: 100% 100%;
   }
+
   .share-icon {
     width: 23px;
     height: 24px;
@@ -1278,6 +1308,7 @@ onUnmounted(() => {
     background: url('@/assets/images/map/rightMenu/onlinePlotting/share.png') no-repeat;
     background-size: 100% 100%;
   }
+
   .setting-icon {
     width: 24px;
     height: 25px;
@@ -1285,6 +1316,7 @@ onUnmounted(() => {
     background: url('@/assets/images/map/rightMenu/onlinePlotting/setting.png') no-repeat;
     background-size: 100% 100%;
   }
+
   .template-icon {
     width: 24px;
     height: 26px;
@@ -1292,6 +1324,7 @@ onUnmounted(() => {
     background: url('@/assets/images/map/rightMenu/onlinePlotting/template.png') no-repeat;
     background-size: 100% 100%;
   }
+
   .categoryImport-icon {
     width: 24px;
     height: 26px;
@@ -1299,6 +1332,7 @@ onUnmounted(() => {
     background: url('@/assets/images/map/rightMenu/onlinePlotting/categoryImport.png') no-repeat;
     background-size: 100% 100%;
   }
+
   .merge-icon {
     width: 26px;
     height: 26px;
@@ -1307,12 +1341,14 @@ onUnmounted(() => {
     background-size: 100% 100%;
   }
 }
+
 .line2 {
   width: 1px;
   height: 10px;
   background-color: #a7ccdf;
   margin: 0 10px;
 }
+
 .tabs2 {
   width: 115px;
   min-width: 115px;
@@ -1321,6 +1357,7 @@ onUnmounted(() => {
   background-size: 100% 100%;
   overflow-y: auto;
   padding: 10px 0;
+
   .tab {
     width: 100%;
     height: 35px;
@@ -1330,29 +1367,36 @@ onUnmounted(() => {
     padding: 0 25px;
     display: flex;
     align-items: center;
+
     &:hover {
       background: url('@/assets/images/map/rightMenu/onlinePlotting/tabActive2.png') no-repeat;
       background-size: 100% 100%;
     }
   }
+
   .tab_active {
     background: url('@/assets/images/map/rightMenu/onlinePlotting/tabActive2.png') no-repeat;
     background-size: 100% 100%;
   }
 }
+
 .tab-content {
   display: flex;
   margin-top: 6px;
+
   .tab-content2 {
     padding: 18px 15px;
     display: flex;
     flex-direction: column;
+
     .line {
       height: 100px;
     }
+
     .line3 {
       display: flex;
     }
+
     .tab-list {
       width: 100%;
       flex: 1;
@@ -1361,16 +1405,19 @@ onUnmounted(() => {
       display: flex;
       flex-wrap: wrap;
       align-content: baseline;
+
       .icon {
         width: 45px;
         height: 25px;
         margin-bottom: 8px;
       }
+
       .tab {
         &:nth-child(3n-1) {
           margin: 18px 23px 0;
         }
       }
+
       .setting-btn {
         position: absolute;
         bottom: 7px;
@@ -1381,6 +1428,7 @@ onUnmounted(() => {
         background-size: 100% 100%;
         cursor: pointer;
       }
+
       .setting-menu {
         position: absolute;
         bottom: -103px;
@@ -1392,6 +1440,7 @@ onUnmounted(() => {
         background-color: #091432;
         //box-shadow: inset 0 0 60px #596891;
         padding: 6px 0;
+
         &::after {
           content: '';
           width: 14px;
@@ -1406,6 +1455,7 @@ onUnmounted(() => {
           transform: rotate(45deg);
           background-color: #091432;
         }
+
         .menu-item {
           width: 100%;
           display: flex;
@@ -1415,6 +1465,7 @@ onUnmounted(() => {
           font-size: 14px;
           height: 26px;
           cursor: pointer;
+
           .icon-switch {
             display: inline-block;
             width: 12px;
@@ -1423,6 +1474,7 @@ onUnmounted(() => {
             background-size: 100% 100%;
             margin-right: 6px;
           }
+
           .icon-eye {
             display: inline-block;
             width: 12px;
@@ -1431,6 +1483,7 @@ onUnmounted(() => {
             background-size: 100% 100%;
             margin-right: 6px;
           }
+
           .icon-eye2 {
             display: inline-block;
             width: 12px;
@@ -1439,6 +1492,7 @@ onUnmounted(() => {
             background-size: 100% 100%;
             margin-right: 6px;
           }
+
           .icon-delete {
             display: inline-block;
             width: 11px;
@@ -1447,21 +1501,26 @@ onUnmounted(() => {
             background-size: 100% 100%;
             margin-right: 6px;
           }
+
           &:hover {
             color: #00fde7;
             background: #1e3b77;
+
             .icon-switch {
               background: url('@/assets/images/map/rightMenu/onlinePlotting/switch2.png') no-repeat;
               background-size: 100% 100%;
             }
+
             .icon-eye {
               background: url('@/assets/images/map/rightMenu/onlinePlotting/show2.png') no-repeat;
               background-size: 100% 100%;
             }
+
             .icon-eye2 {
               background: url('@/assets/images/map/rightMenu/onlinePlotting/hide2.png') no-repeat;
               background-size: 100% 100%;
             }
+
             .icon-delete {
               background: url('@/assets/images/map/rightMenu/onlinePlotting/delete2.png') no-repeat;
               background-size: 100% 100%;
@@ -1470,6 +1529,7 @@ onUnmounted(() => {
         }
       }
     }
+
     .tab {
       width: 129px;
       height: 91px;
@@ -1485,10 +1545,12 @@ onUnmounted(() => {
       justify-content: center;
       align-items: center;
       margin-top: 18px;
+
       &:hover {
         background: url('@/assets/images/map/rightMenu/onlinePlotting/boxHover2.png') no-repeat;
         background-size: 100% 100%;
       }
+
       .checked1 {
         position: absolute;
         top: 8px;
@@ -1498,6 +1560,7 @@ onUnmounted(() => {
         background: url('@/assets/images/map/rightMenu/onlinePlotting/checked1.png') no-repeat;
         background-size: 100% 100%;
       }
+
       .checked2 {
         position: absolute;
         top: 8px;
@@ -1508,6 +1571,7 @@ onUnmounted(() => {
         background-size: 100% 100%;
       }
     }
+
     .tab_active {
       background: url('@/assets/images/map/rightMenu/onlinePlotting/boxActive2.png') no-repeat;
       background-size: 100% 100%;
@@ -1527,29 +1591,35 @@ onUnmounted(() => {
   background-color: rgba(0, 0, 0, 0.4);
   border-radius: 10px;
 }
+
 .tab-content3 {
   .custom-table {
     width: 100%;
     color: #000;
+
     .table-header {
       display: flex;
       font-size: 14px;
       width: 100%;
       background-color: #194ba0;
+
       .th {
         padding: 11px;
         flex: 1;
         color: #edfaff;
+
         &:last-child {
           flex: unset;
           width: 180px;
         }
       }
     }
+
     .table-content {
       max-height: 355px;
       overflow: auto;
     }
+
     .tr {
       display: flex;
       align-items: center;
@@ -1559,19 +1629,23 @@ onUnmounted(() => {
       background-size: 100% 100%;
       margin-top: 10px;
       cursor: pointer;
+
       &:hover {
         background: url('@/assets/images/map/rightMenu/onlinePlotting/trActive.png') no-repeat;
         background-size: 100% 100%;
       }
+
       .td {
         padding: 11px;
         color: #edfaff;
         flex: 1;
+
         .icon {
           margin: 0 10px;
           cursor: pointer;
         }
       }
+
       .td2 {
         flex: unset;
         display: flex;
@@ -1592,8 +1666,10 @@ onUnmounted(() => {
   background-color: #0d3980;
   border: 1px solid #0b5fbb;
   margin-left: 8px;
+
   :deep(.el-color-picker) {
     height: 14px !important;
+
     .el-color-picker__trigger {
       width: 14px;
       height: 14px;
@@ -1601,6 +1677,7 @@ onUnmounted(() => {
       border: none;
     }
   }
+
   &::before {
     content: '';
     position: absolute;
@@ -1611,6 +1688,7 @@ onUnmounted(() => {
     background: url('@/assets/images/inputIcon1.png') no-repeat;
     background-size: 100% 100%;
   }
+
   &::after {
     content: '';
     position: absolute;
@@ -1622,50 +1700,61 @@ onUnmounted(() => {
     background-size: 100% 100%;
   }
 }
+
 .params-box {
   margin: 10px 0;
 }
+
 .footer {
   display: flex;
   justify-content: flex-end;
   margin-top: 15px;
+
   :deep(.el-pagination__total) {
     color: #a7ccdf !important;
   }
+
   :deep(.el-pagination) {
     .btn-next,
     .btn-prev {
       background-color: transparent !important;
       border: none !important;
+
       .el-icon {
         color: #a7ccdf !important;
       }
     }
+
     .btn-prev:disabled,
     .btn-next:disabled {
       background-color: transparent !important;
       border: none !important;
     }
+
     .el-pager li {
       text-align: center;
       color: #a7ccdf !important;
       background-color: #0e3064 !important;
       border: 1px solid #0c57a7 !important;
+
       &:hover {
         background-color: #038dff !important;
         border: 1px solid #038dff !important;
       }
     }
+
     .el-pager li.is-active {
       background-color: #038dff !important;
       border: 1px solid #038dff !important;
     }
   }
 }
+
 .btn-box {
   display: flex;
   align-items: center;
 }
+
 .btn-text {
   color: #5983df;
   cursor: pointer;

src/views/globalMap/RightMenu/PotentialFloodHazard.vue

@@ -1,66 +1,68 @@
 <template>
-  <div class="menu-content">
-    <div class="gradient-text common-dialog-title2">易涝隐患点</div>
-    <div class="box1">
-      <div class="title-box">列表</div>
-      <div class="date-box">
-        <div class="text1">更新</div>
-        <div class="text-box">
-          <div class="text2">{{ timeArr[0] }}</div>
-          <div class="text1">年</div>
-          <div class="text2">{{ timeArr[1] }}</div>
-          <div class="text1">月</div>
-          <div class="text2">{{ timeArr[2] }}</div>
-          <div class="text1">日</div>
+  <div>
+    <div class="menu-content">
+      <div class="gradient-text common-dialog-title2">易涝隐患点</div>
+      <div class="box1">
+        <div class="title-box">列表</div>
+        <div class="date-box">
+          <div class="text1">更新</div>
+          <div class="text-box">
+            <div class="text2">{{ timeArr[0] }}</div>
+            <div class="text1">年</div>
+            <div class="text2">{{ timeArr[1] }}</div>
+            <div class="text1">月</div>
+            <div class="text2">{{ timeArr[2] }}</div>
+            <div class="text1">日</div>
+          </div>
         </div>
       </div>
-    </div>
-    <div class="box2">
-      <div class="box-left">
-        <el-input v-model="queryParams.keyword" class="custom-input" placeholder="搜索" style="width: 220px" @input="initData">
-          <template #prefix>
-            <el-icon class="el-input__icon"><search /></el-icon>
-          </template>
-        </el-input>
-        <div class="btn" @click="handleCancel">取消</div>
-      </div>
-      <div class="btn2" @click="showMoreVideos">
-        <div class="video-icon"></div>
-        <div>全部视频</div>
-      </div>
-    </div>
-    <div class="custom-table">
-      <div class="table-header">
-        <div class="td">
-          <el-select
-            v-model="queryParams.area"
-            placeholder="所有区县"
-            size="large"
-            class="custom-select2"
-            popper-class="custom-select-popper2"
-            :teleported="false"
-            @change="initData"
-          >
-            <el-option label="所有区县" value="" />
-            <el-option v-for="item in district_type" :key="item.value" :label="item.label" :value="item.label" />
-          </el-select>
+      <div class="box2">
+        <div class="box-left">
+          <el-input v-model="queryParams.keyword" class="custom-input" placeholder="搜索" style="width: 220px" @input="initData">
+            <template #prefix>
+              <el-icon class="el-input__icon"><search /></el-icon>
+            </template>
+          </el-input>
+          <div class="btn" @click="handleCancel">取消</div>
+        </div>
+        <div class="btn2" @click="showMoreVideos">
+          <div class="video-icon"></div>
+          <div>全部视频</div>
         </div>
-        <div class="td">易涝点名称</div>
-        <div class="td">提供单位</div>
       </div>
-      <div class="table-content">
-        <div v-for="(item, index) in dataList" :key="index" class="tr" @click="handleShowDialog(item)">
-          <div class="td">{{ item.area }}</div>
-          <div class="td btn3">
-            <div class="video-icon"></div>
-            {{ item.flood_name }}
+      <div class="custom-table">
+        <div class="table-header">
+          <div class="td">
+            <el-select
+              v-model="queryParams.area"
+              placeholder="所有区县"
+              size="large"
+              class="custom-select2"
+              popper-class="custom-select-popper2"
+              :teleported="false"
+              @change="initData"
+            >
+              <el-option label="所有区县" value="" />
+              <el-option v-for="item in district_type" :key="item.value" :label="item.label" :value="item.label" />
+            </el-select>
+          </div>
+          <div class="td">易涝点名称</div>
+          <div class="td">提供单位</div>
+        </div>
+        <div class="table-content">
+          <div v-for="(item, index) in dataList" :key="index" class="tr" @click="handleShowDialog(item)">
+            <div class="td">{{ item.area }}</div>
+            <div class="td btn3">
+              <div class="video-icon"></div>
+              {{ item.flood_name }}
+            </div>
+            <div class="td">{{ item.unit }}</div>
           </div>
-          <div class="td">{{ item.unit }}</div>
         </div>
       </div>
     </div>
+    <NearbyVideos v-if="showNearbyVideos" v-model="showNearbyVideos" :getDataMethod="getDataMethod" />
   </div>
-  <NearbyVideos v-if="showNearbyVideos" v-model="showNearbyVideos" :getDataMethod="getDataMethod" />
 </template>
 
 <script lang="ts" setup>

src/views/globalMap/RightMenu/RainMonitor/index.vue

@@ -1,194 +1,196 @@
 <template>
-  <div class="menu-content">
-    <div class="gradient-text common-dialog-title2">雨情监测</div>
-    <div class="scroll">
-      <div class="card-header">
-        <div class="title-box">水利站点降雨分布统计</div>
-        <el-select
-          v-model="timeOption"
-          class="custom-select"
-          popper-class="custom-select-popper"
-          :teleported="false"
-          style="width: 236px"
-          @change="handleTimeChange"
-        >
-          <el-option v-for="item in timeOptions" :key="item.value" :label="item.name" :value="item.value" />
-        </el-select>
-      </div>
-      <Chart :option="chartOption1" style="width: 100%; height: 150px" />
-      <div class="card-header">
-        <div class="title-box">
-          <div>降雨量排行</div>
-          <div class="line"></div>
-          <div class="gradient-text text2">区县排行</div>
-          <div class="text3">（过去{{ timeOption }}小时）</div>
+  <div>
+    <div class="menu-content">
+      <div class="gradient-text common-dialog-title2">雨情监测</div>
+      <div class="scroll">
+        <div class="card-header">
+          <div class="title-box">水利站点降雨分布统计</div>
+          <el-select
+            v-model="timeOption"
+            class="custom-select"
+            popper-class="custom-select-popper"
+            :teleported="false"
+            style="width: 236px"
+            @change="handleTimeChange"
+          >
+            <el-option v-for="item in timeOptions" :key="item.value" :label="item.name" :value="item.value" />
+          </el-select>
         </div>
-        <div class="btn-box">
-          <div class="btn" @click="handleShowMore">
-            <i class="more-icon"></i>
-            <div class="btn-text">更多</div>
+        <Chart :option="chartOption1" style="width: 100%; height: 150px" />
+        <div class="card-header">
+          <div class="title-box">
+            <div>降雨量排行</div>
+            <div class="line"></div>
+            <div class="gradient-text text2">区县排行</div>
+            <div class="text3">（过去{{ timeOption }}小时）</div>
           </div>
-          <div class="btn" @click="exportData">
-            <i class="export-icon"></i>
-            <div class="btn-text">导出</div>
+          <div class="btn-box">
+            <div class="btn" @click="handleShowMore">
+              <i class="more-icon"></i>
+              <div class="btn-text">更多</div>
+            </div>
+            <div class="btn" @click="exportData">
+              <i class="export-icon"></i>
+              <div class="btn-text">导出</div>
+            </div>
           </div>
         </div>
-      </div>
-      <div class="table">
-        <div class="table-header">
-          <div class="td">序号</div>
-          <div class="td">
-            <el-select
-              v-model="queryParams.area"
-              placeholder="县区"
-              size="large"
-              class="custom-select2"
-              popper-class="custom-select-popper2"
-              :teleported="false"
-            >
-              <el-option label="县区" value="" />
-              <el-option v-for="item in district_type" :key="item.value" :label="item.label" :value="item.value" />
-            </el-select>
-          </div>
-          <div class="td">
-            <el-select
-              v-model="queryParams.township"
-              placeholder="街镇"
-              size="large"
-              class="custom-select2"
-              popper-class="custom-select-popper2"
-              :teleported="false"
-              @change="handleGetRainfallRange"
-            >
-              <el-option label="街镇" value="" />
-              <el-option v-for="item in townshipList" :key="item.area_code" :label="item.area_name" :value="item.area_name" />
-            </el-select>
+        <div class="table">
+          <div class="table-header">
+            <div class="td">序号</div>
+            <div class="td">
+              <el-select
+                v-model="queryParams.area"
+                placeholder="县区"
+                size="large"
+                class="custom-select2"
+                popper-class="custom-select-popper2"
+                :teleported="false"
+              >
+                <el-option label="县区" value="" />
+                <el-option v-for="item in district_type" :key="item.value" :label="item.label" :value="item.value" />
+              </el-select>
+            </div>
+            <div class="td">
+              <el-select
+                v-model="queryParams.township"
+                placeholder="街镇"
+                size="large"
+                class="custom-select2"
+                popper-class="custom-select-popper2"
+                :teleported="false"
+                @change="handleGetRainfallRange"
+              >
+                <el-option label="街镇" value="" />
+                <el-option v-for="item in townshipList" :key="item.area_code" :label="item.area_name" :value="item.area_name" />
+              </el-select>
+            </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 class="td">站址</div>
-          <div class="td td-cursor">
-            <span>雨量(mm)</span>
-            <i :class="queryParams.sort === 'desc' ? 'desc-icon' : 'asc-icon'" @click="handleSort" />
+          <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">{{ item.address }}</div>
+            <div class="gradient-text2 td">{{ item.rainfall }}</div>
           </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 class="card-header">
+          <div class="title-box">
+            <div>影响分析</div>
           </div>
-          <div class="td">{{ item.area }}</div>
-          <div class="td">{{ item.township }}</div>
-          <div class="td">{{ item.address }}</div>
-          <div class="gradient-text2 td">{{ item.rainfall }}</div>
-        </div>
-      </div>
-      <div class="card-header">
-        <div class="title-box">
-          <div>影响分析</div>
-        </div>
-        <div class="btn-box">
-          <div class="btn" @click="exportData2">
-            <i class="export-icon"></i>
-            <div class="btn-text">导出</div>
+          <div class="btn-box">
+            <div class="btn" @click="exportData2">
+              <i class="export-icon"></i>
+              <div class="btn-text">导出</div>
+            </div>
           </div>
         </div>
-      </div>
-      <div class="data-box">
-        <div>
-          <div class="line1">
-            <div class="line-item">小雨</div>
-            <div class="line-item">中雨</div>
-            <div class="line-item">大雨</div>
-            <div class="line-item">暴雨</div>
-            <div class="line-item">大暴雨</div>
-            <div class="line-item">特大暴雨</div>
-          </div>
-          <div ref="lineRef" class="line2" @mousemove="handleMouseMove" @mouseup="handleMouseUp" @mouseleave="handleMouseUp">
-            <div class="line-item"></div>
-            <div class="line-item"></div>
-            <div class="line-item"></div>
-            <div class="line-item"></div>
-            <div class="line-item"></div>
-            <div class="line-item"></div>
-            <div
-              class="dot"
-              :style="{ left: startLeft + 'px' }"
-              @mousedown="
+        <div class="data-box">
+          <div>
+            <div class="line1">
+              <div class="line-item">小雨</div>
+              <div class="line-item">中雨</div>
+              <div class="line-item">大雨</div>
+              <div class="line-item">暴雨</div>
+              <div class="line-item">大暴雨</div>
+              <div class="line-item">特大暴雨</div>
+            </div>
+            <div ref="lineRef" class="line2" @mousemove="handleMouseMove" @mouseup="handleMouseUp" @mouseleave="handleMouseUp">
+              <div class="line-item"></div>
+              <div class="line-item"></div>
+              <div class="line-item"></div>
+              <div class="line-item"></div>
+              <div class="line-item"></div>
+              <div class="line-item"></div>
+              <div
+                class="dot"
+                :style="{ left: startLeft + 'px' }"
+                @mousedown="
               (e) => {
                 handleMouseDown(e, 'start');
               }
             "
-            ></div>
-            <div
-              class="dot"
-              :style="{ left: endLeft + 'px' }"
-              @mousedown="
+              ></div>
+              <div
+                class="dot"
+                :style="{ left: endLeft + 'px' }"
+                @mousedown="
               (e) => {
                 handleMouseDown(e, 'end');
               }
             "
-            ></div>
-          </div>
-          <div class="line3">
-            <div class="line-item">1</div>
-            <div class="line-item">10</div>
-            <div class="line-item">25</div>
-            <div class="line-item">50</div>
-            <div class="line-item">100</div>
-            <div class="line-item">
-              <div>250</div>
-              <div>(mm)</div>
+              ></div>
+            </div>
+            <div class="line3">
+              <div class="line-item">1</div>
+              <div class="line-item">10</div>
+              <div class="line-item">25</div>
+              <div class="line-item">50</div>
+              <div class="line-item">100</div>
+              <div class="line-item">
+                <div>250</div>
+                <div>(mm)</div>
+              </div>
             </div>
           </div>
+          <div class="box">
+            <div class="text1">雨量范围</div>
+            <div class="text2">{{ rainRange[0] }}-{{ rainRange[1] }}</div>
+          </div>
         </div>
-        <div class="box">
-          <div class="text1">雨量范围</div>
-          <div class="text2">{{ rainRange[0] }}-{{ rainRange[1] }}</div>
-        </div>
-      </div>
-      <div class="data-box2">
-        <div class="data-item">
-          <div class="icon1"></div>
-          <div class="item-right">
-            <div class="text-box">
-              <div class="text1">行政镇</div>
-              <div class="text2">(个)</div>
+        <div class="data-box2">
+          <div class="data-item">
+            <div class="icon1"></div>
+            <div class="item-right">
+              <div class="text-box">
+                <div class="text1">行政镇</div>
+                <div class="text2">(个)</div>
+              </div>
+              <div class="text3">{{ analyzeData.town_num }}</div>
             </div>
-            <div class="text3">{{ analyzeData.town_num }}</div>
           </div>
-        </div>
-        <div class="data-item">
-          <div class="icon2"></div>
-          <div class="item-right">
-            <div class="text-box">
-              <div class="text1">人口</div>
-              <div class="text2">(万)</div>
+          <div class="data-item">
+            <div class="icon2"></div>
+            <div class="item-right">
+              <div class="text-box">
+                <div class="text1">人口</div>
+                <div class="text2">(万)</div>
+              </div>
+              <div class="text4">{{ analyzeData.populationSize }}</div>
             </div>
-            <div class="text4">{{ analyzeData.populationSize }}</div>
           </div>
-        </div>
-        <div class="data-item">
-          <div class="icon3"></div>
-          <div class="item-right">
-            <div class="text-box">
-              <div class="text1">面积</div>
-              <div class="text2">(km²)</div>
+          <div class="data-item">
+            <div class="icon3"></div>
+            <div class="item-right">
+              <div class="text-box">
+                <div class="text1">面积</div>
+                <div class="text2">(km²)</div>
+              </div>
+              <div class="text5">{{ analyzeData.areaSize }}</div>
             </div>
-            <div class="text5">{{ analyzeData.areaSize }}</div>
           </div>
-        </div>
-        <div class="data-item">
-          <div class="icon4"></div>
-          <div class="item-right">
-            <div class="text-box">
-              <div class="text1">GDP</div>
-              <div class="text2">(亿)</div>
+          <div class="data-item">
+            <div class="icon4"></div>
+            <div class="item-right">
+              <div class="text-box">
+                <div class="text1">GDP</div>
+                <div class="text2">(亿)</div>
+              </div>
+              <div class="text6">{{ analyzeData.GDP }}</div>
             </div>
-            <div class="text6">{{ analyzeData.GDP }}</div>
           </div>
         </div>
       </div>
     </div>
+    <RainRank v-if="showMore" v-model="showMore" />
   </div>
-  <RainRank v-if="showMore" v-model="showMore" />
 </template>
 
 <script lang="ts" setup name="RainMonitor">

src/views/globalMap/RightMenu/ReservoirMonitor.vue

@@ -1,102 +1,105 @@
 <template>
-  <div class="menu-content">
-    <div class="gradient-text common-dialog-title2">水库监测</div>
-    <div class="flex-box">
-      <div class="data-box1">
-        <div class="box-text1">漫坝</div>
-        <div class="box-text2">{{ validateNum(reservoirMonitorData.statusList[0]?.value) }}</div>
-      </div>
-      <div class="data-box2">
-        <div class="box-text1">超保证</div>
-        <div class="box-text2">{{ validateNum(reservoirMonitorData.statusList[1]?.value) }}</div>
-      </div>
-      <div class="data-box3">
-        <div class="box-text1">超警戒</div>
-        <div class="box-text2">{{ validateNum(reservoirMonitorData.statusList[2]?.value) }}</div>
-      </div>
-    </div>
-    <div class="custom-table">
-      <div class="th">
-        <div class="td">名称</div>
-        <div class="td">所属区县</div>
-        <div class="td">汛限水位(m)</div>
-        <div class="td">当前水位(m)</div>
-        <div class="td">差值</div>
-      </div>
-      <div class="table-content">
-        <div v-for="(item, index) in reservoirMonitorData.listData" :key="index" class="tr" @click="handleShowDialog(item)">
-          <div class="td">{{ item.name }}</div>
-          <div class="td">{{ item.area }}</div>
-          <div class="td td-text">{{ item.warningLevel }}</div>
-          <div class="td td-text">{{ item.waterLevel }}</div>
-          <div :class="item.warningLevel > item.waterLevel ? 'td td-text text-green' : 'td td-text text-danger'">{{ item.waterDiff }}</div>
+  <div>
+    <div class="menu-content">
+      <div class="gradient-text common-dialog-title2">水库监测</div>
+      <div class="flex-box">
+        <div class="data-box1">
+          <div class="box-text1">漫坝</div>
+          <div class="box-text2">{{ validateNum(reservoirMonitorData.statusList[0]?.value) }}</div>
+        </div>
+        <div class="data-box2">
+          <div class="box-text1">超保证</div>
+          <div class="box-text2">{{ validateNum(reservoirMonitorData.statusList[1]?.value) }}</div>
+        </div>
+        <div class="data-box3">
+          <div class="box-text1">超警戒</div>
+          <div class="box-text2">{{ validateNum(reservoirMonitorData.statusList[2]?.value) }}</div>
         </div>
       </div>
-    </div>
-  </div>
-  <Dialog v-model="showDialog" type="xl" title="水库监测" draggable hide-footer>
-    <div class="flex">
-      <div class="detail-container">
-        <div class="flex">
-          <div class="info-header">
-            <div class="gradient-text info-title">{{ selectRow.name }}{{ selectRow.address }}</div>
-          </div>
+      <div class="custom-table">
+        <div class="th">
+          <div class="td">名称</div>
+          <div class="td">所属区县</div>
+          <div class="td">汛限水位(m)</div>
+          <div class="td">当前水位(m)</div>
+          <div class="td">差值</div>
         </div>
-        <div class="flex" style="justify-content: space-between">
-          <div class="flex">
-            <div>汛限水位</div>
-            <div>{{ selectRow.floodLimit }}米</div>
+        <div class="table-content">
+          <div v-for="(item, index) in reservoirMonitorData.listData" :key="index" class="tr" @click="handleShowDialog(item)">
+            <div class="td">{{ item.name }}</div>
+            <div class="td">{{ item.area }}</div>
+            <div class="td td-text">{{ item.warningLevel }}</div>
+            <div class="td td-text">{{ item.waterLevel }}</div>
+            <div :class="item.warningLevel > item.waterLevel ? 'td td-text text-green' : 'td td-text text-danger'">{{ item.waterDiff }}</div>
           </div>
+        </div>
+      </div>
+    </div>
+    <Dialog v-model="showDialog" type="xl" title="水库监测" draggable hide-footer>
+      <div class="flex">
+        <div class="detail-container">
           <div class="flex">
-            <div>当前水位</div>
-            <div>{{ selectRow.level }}米</div>
+            <div class="info-header">
+              <div class="gradient-text info-title">{{ selectRow.name }}{{ selectRow.address }}</div>
+            </div>
           </div>
-        </div>
-        <div>
-          <div class="flex-box2">
-            <div class="title2">水位过程图</div>
+          <div class="flex" style="justify-content: space-between">
+            <div class="flex">
+              <div>汛限水位</div>
+              <div>{{ selectRow.floodLimit }}米</div>
+            </div>
+            <div class="flex">
+              <div>当前水位</div>
+              <div>{{ selectRow.level }}米</div>
+            </div>
           </div>
-          <Chart :option="chartOption1" style="width: 100%; height: 300px" />
-        </div>
-        <div class="table-wrap">
-          <div class="table-title">
-            <div v-for="(item, index) in tableTitle" :key="index" class="title-item">
-              {{ item }}
+          <div>
+            <div class="flex-box2">
+              <div class="title2">水位过程图</div>
             </div>
+            <Chart :option="chartOption1" style="width: 100%; height: 300px" />
           </div>
-          <div class="content-wrap">
-            <div v-for="(item, index) in detailData" :key="index" class="content-item">
-              <div class="time">{{ item.time }}</div>
-              <div class="value">{{ item.level }}</div>
-              <div class="value1">{{ item.inFlow ? item.inFlow : '-' }}</div>
-              <div class="value2">{{ item.ouFlow ? item.ouFlow : '-' }}</div>
-              <div
-                class="waterunit"
-                :style="{
+          <div class="table-wrap">
+            <div class="table-title">
+              <div v-for="(item, index) in tableTitle" :key="index" class="title-item">
+                {{ item }}
+              </div>
+            </div>
+            <div class="content-wrap">
+              <div v-for="(item, index) in detailData" :key="index" class="content-item">
+                <div class="time">{{ item.time }}</div>
+                <div class="value">{{ item.level }}</div>
+                <div class="value1">{{ item.inFlow ? item.inFlow : '-' }}</div>
+                <div class="value2">{{ item.ouFlow ? item.ouFlow : '-' }}</div>
+                <div
+                  class="waterunit"
+                  :style="{
                   color: item.waterLevelStatus == '涨' ? '#fc5a5a' : item.waterLevelStatus == '落' ? '#00e9ea' : '#cbddff'
                 }"
-              >
-                {{ item.waterLevelStatus }}
+                >
+                  {{ item.waterLevelStatus }}
+                </div>
               </div>
             </div>
           </div>
         </div>
-      </div>
-      <div class="right-box">
-        <div style="display: flex; align-items: center">
-          <div class="flex-box2">
-            <div class="title2">附近视频</div>
+        <div class="right-box">
+          <div style="display: flex; align-items: center">
+            <div class="flex-box2">
+              <div class="title2">附近视频</div>
+            </div>
+            <el-select v-model="queryParams2.radius" class="custom-select" popper-class="custom-popper" :teleported="false" style="width: 210px">
+              <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>
-          <el-select v-model="queryParams2.radius" class="custom-select" popper-class="custom-popper" :teleported="false" style="width: 210px">
-            <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>
-    </div>
-  </Dialog>
+    </Dialog>
+  </div>
+
 </template>
 
 <script lang="ts" setup name="ReservoirMonitor">

src/views/globalMap/RightMenu/RiverMonitor.vue

@@ -1,97 +1,99 @@
 <template>
-  <div class="menu-content">
-    <div class="gradient-text common-dialog-title2">河道监测</div>
-    <div class="flex-box">
-      <div class="data-box1">
-        <div class="box-text1">漫坝</div>
-        <div class="box-text2">{{ validateNum(riverMonitorData.statusList[0]?.value) }}</div>
-      </div>
-      <div class="data-box2">
-        <div class="box-text1">超保证</div>
-        <div class="box-text2">{{ validateNum(riverMonitorData.statusList[1]?.value) }}</div>
-      </div>
-      <div class="data-box3">
-        <div class="box-text1">超警戒</div>
-        <div class="box-text2">{{ validateNum(riverMonitorData.statusList[2]?.value) }}</div>
-      </div>
-    </div>
-    <div class="custom-table">
-      <div class="th">
-        <div class="td">名称</div>
-        <div class="td">所属区县</div>
-        <div class="td">汛限水位(m)</div>
-        <div class="td">当前水位(m)</div>
-        <div class="td">差值</div>
+  <div>
+    <div class="menu-content">
+      <div class="gradient-text common-dialog-title2">河道监测</div>
+      <div class="flex-box">
+        <div class="data-box1">
+          <div class="box-text1">漫坝</div>
+          <div class="box-text2">{{ validateNum(riverMonitorData.statusList[0]?.value) }}</div>
+        </div>
+        <div class="data-box2">
+          <div class="box-text1">超保证</div>
+          <div class="box-text2">{{ validateNum(riverMonitorData.statusList[1]?.value) }}</div>
+        </div>
+        <div class="data-box3">
+          <div class="box-text1">超警戒</div>
+          <div class="box-text2">{{ validateNum(riverMonitorData.statusList[2]?.value) }}</div>
+        </div>
       </div>
-      <div class="table-content">
-        <div v-for="(item, index) in riverMonitorData.listData" :key="index" class="tr" @click="handleShowDialog(item)">
-          <div class="td">{{ item.name }}</div>
-          <div class="td">{{ item.area }}</div>
-          <div class="td td-text">{{ item.warningLevel }}</div>
-          <div class="td td-text">{{ item.waterLevel }}</div>
-          <div :class="item.warningLevel > item.waterLevel ? 'td td-text text-green' : 'td td-text text-danger'">{{ item.waterDiff }}</div>
+      <div class="custom-table">
+        <div class="th">
+          <div class="td">名称</div>
+          <div class="td">所属区县</div>
+          <div class="td">汛限水位(m)</div>
+          <div class="td">当前水位(m)</div>
+          <div class="td">差值</div>
+        </div>
+        <div class="table-content">
+          <div v-for="(item, index) in riverMonitorData.listData" :key="index" class="tr" @click="handleShowDialog(item)">
+            <div class="td">{{ item.name }}</div>
+            <div class="td">{{ item.area }}</div>
+            <div class="td td-text">{{ item.warningLevel }}</div>
+            <div class="td td-text">{{ item.waterLevel }}</div>
+            <div :class="item.warningLevel > item.waterLevel ? 'td td-text text-green' : 'td td-text text-danger'">{{ item.waterDiff }}</div>
+          </div>
         </div>
       </div>
     </div>
-  </div>
-  <Dialog v-model="showDialog" type="xl" title="河道监测" draggable hide-footer>
-    <div class="flex">
-      <div class="detail-container">
-        <div class="flex">
-          <div class="info-box">
-            <div class="info-header">
-              <div class="gradient-text info-title">测站名称：{{ selectRow.name }}</div>
-            </div>
-            <div class="info-content">
-              <div class="info-item">
-                <div>水系河流名称：</div>
-                <div>{{ selectRow.data1 }}</div>
+    <Dialog v-model="showDialog" type="xl" title="河道监测" draggable hide-footer>
+      <div class="flex">
+        <div class="detail-container">
+          <div class="flex">
+            <div class="info-box">
+              <div class="info-header">
+                <div class="gradient-text info-title">测站名称：{{ selectRow.name }}</div>
               </div>
-              <div class="info-item">
-                <div>流域名称：</div>
-                <div>{{ selectRow.data2 }}</div>
-              </div>
-              <div class="info-item">
-                <div>水系站址：</div>
-                <div>{{ selectRow.data3 }}</div>
-              </div>
-              <div class="info-item">
-                <div>超警戒水位：</div>
-                <div>{{ selectRow.waterDiff }}</div>
-              </div>
-              <div class="info-item">
-                <div>时间：</div>
-                <div>{{ selectRow.data5 }}</div>
+              <div class="info-content">
+                <div class="info-item">
+                  <div>水系河流名称：</div>
+                  <div>{{ selectRow.data1 }}</div>
+                </div>
+                <div class="info-item">
+                  <div>流域名称：</div>
+                  <div>{{ selectRow.data2 }}</div>
+                </div>
+                <div class="info-item">
+                  <div>水系站址：</div>
+                  <div>{{ selectRow.data3 }}</div>
+                </div>
+                <div class="info-item">
+                  <div>超警戒水位：</div>
+                  <div>{{ selectRow.waterDiff }}</div>
+                </div>
+                <div class="info-item">
+                  <div>时间：</div>
+                  <div>{{ selectRow.data5 }}</div>
+                </div>
               </div>
             </div>
+            <div class="box1">
+              <div class="box1-title">降雨过程实况</div>
+              <Chart :option="chartOption1" style="width: 100%; flex: 1" />
+            </div>
           </div>
-          <div class="box1">
-            <div class="box1-title">降雨过程实况</div>
-            <Chart :option="chartOption1" style="width: 100%; flex: 1" />
+          <div>
+            <div class="box2">
+              <div class="box2-title">过去24小时河流水位变化图</div>
+              <Chart :option="chartOption2" style="width: 100%; height: 400px" />
+            </div>
           </div>
         </div>
-        <div>
-          <div class="box2">
-            <div class="box2-title">过去24小时河流水位变化图</div>
-            <Chart :option="chartOption2" style="width: 100%; height: 400px" />
+        <div class="right-box">
+          <div style="display: flex; align-items: center">
+            <div class="flex-box2">
+              <div class="title2">附近视频</div>
+            </div>
+            <el-select v-model="queryParams2.radius" class="custom-select" popper-class="custom-popper" :teleported="false" style="width: 210px">
+              <el-option v-for="item in radiusOption" :key="item.value" :label="item.label" :value="item.value" />
+            </el-select>
           </div>
-        </div>
-      </div>
-      <div class="right-box">
-        <div style="display: flex; align-items: center">
-          <div class="flex-box2">
-            <div class="title2">附近视频</div>
+          <div class="video-box">
+            <video-container :video-data="videoMonitorData" />
           </div>
-          <el-select v-model="queryParams2.radius" class="custom-select" popper-class="custom-popper" :teleported="false" style="width: 210px">
-            <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>
-    </div>
-  </Dialog>
+    </Dialog>
+  </div>
 </template>
 
 <script lang="ts" setup name="RiverMonitor">

src/views/globalMap/RightMenu/WindMonitor/index.vue

@@ -1,204 +1,206 @@
 <template>
-  <div class="menu-content">
-    <div class="container">
-      <div class="gradient-text common-dialog-title2">过去24小时瞬时风（格点）分布图</div>
-      <div class="textBase" style="padding-left: 30px; padding-bottom: 20px; margin-left: 30px; margin-top: -10px; color: #ffffff">
-        09月08日 14：00-09月09日 14：00
-      </div>
-
-      <div style="height: 660px; overflow: auto">
-        <div style="margin-left: 10px; color: #ffffff">
-          <span>风流场</span>
-          <img :src="switchStatus ? switchOn : switchOff" style="margin-left: 10px; cursor: pointer" @click="switchControl" />
-        </div>
-        <div class="box-left">
-          <el-select
-            v-model="selectedTime"
-            placeholder="请选择时间"
-            class="custom-select"
-            popper-class="custom-select-popper"
-            :teleported="false"
-            style="width: 500px; margin-left: 10px"
-            @change="handleYearChange"
-          >
-            <el-option v-for="item in wind_time" :label="item.label" :value="item.value" />
-          </el-select>
+  <div>
+    <div class="menu-content">
+      <div class="container">
+        <div class="gradient-text common-dialog-title2">过去24小时瞬时风（格点）分布图</div>
+        <div class="textBase" style="padding-left: 30px; padding-bottom: 20px; margin-left: 30px; margin-top: -10px; color: #ffffff">
+          09月08日 14：00-09月09日 14：00
         </div>
 
-        <div class="forecast—box">
-          <div class="text-box">
-            瞬时风站点排行（过去24小时）瞬时风站点排行（过去24小时）瞬时风站点排行（过去24小时）瞬时风站点排行（过去24小时）
-            瞬时风站点排行（过去24小时）瞬时风站点排行（过去24小时）瞬时风站点排行（过去24小时）瞬时风站点排行（过去24小时）瞬时风站点排行（过去24小时）瞬时风站点排行（过去24小时）
-            瞬时风站点排行（过去24小时）瞬时风站点排行（过去24小时）
-            瞬时风站点排行（过去24小时）瞬时风站点排行（过去24小时）瞬时风站点排行（过去24小时）瞬时风站点排行（过去24小时）
-            瞬时风站点排行（过去24小时）瞬时风站点排行（过去24小时）瞬时风站点排行（过去24小时）瞬时风站点排行（过去24小时）瞬时风站点排行（过去24小时）瞬时风站点排行（过去24小时）
-            瞬时风站点排行（过去24小时）瞬时风站点排行（过去24小时）
+        <div style="height: 660px; overflow: auto">
+          <div style="margin-left: 10px; color: #ffffff">
+            <span>风流场</span>
+            <img :src="switchStatus ? switchOn : switchOff" style="margin-left: 10px; cursor: pointer" @click="switchControl" />
           </div>
-        </div>
-        <div style="display: flex; align-items: center">
-          <div class="title-box" style="margin-top: 10px; flex: 1">
-            <div class="gradient-text">瞬时风站点排行（过去24小时）</div>
+          <div class="box-left">
+            <el-select
+              v-model="selectedTime"
+              placeholder="请选择时间"
+              class="custom-select"
+              popper-class="custom-select-popper"
+              :teleported="false"
+              style="width: 500px; margin-left: 10px"
+              @change="handleYearChange"
+            >
+              <el-option v-for="item in wind_time" :label="item.label" :value="item.value" />
+            </el-select>
           </div>
-          <div class="btn-box">
-            <div class="btn" @click="handleShowMore">
-              <i class="more-icon"></i>
-              <div class="btn-text">更多</div>
-            </div>
-            <div class="btn" @click="exportData">
-              <i class="export-icon"></i>
-              <div class="btn-text">导出</div>
+
+          <div class="forecast—box">
+            <div class="text-box">
+              瞬时风站点排行（过去24小时）瞬时风站点排行（过去24小时）瞬时风站点排行（过去24小时）瞬时风站点排行（过去24小时）
+              瞬时风站点排行（过去24小时）瞬时风站点排行（过去24小时）瞬时风站点排行（过去24小时）瞬时风站点排行（过去24小时）瞬时风站点排行（过去24小时）瞬时风站点排行（过去24小时）
+              瞬时风站点排行（过去24小时）瞬时风站点排行（过去24小时）
+              瞬时风站点排行（过去24小时）瞬时风站点排行（过去24小时）瞬时风站点排行（过去24小时）瞬时风站点排行（过去24小时）
+              瞬时风站点排行（过去24小时）瞬时风站点排行（过去24小时）瞬时风站点排行（过去24小时）瞬时风站点排行（过去24小时）瞬时风站点排行（过去24小时）瞬时风站点排行（过去24小时）
+              瞬时风站点排行（过去24小时）瞬时风站点排行（过去24小时）
             </div>
           </div>
-        </div>
-        <div class="alert-details">
-          <div class="common-table">
-            <div class="table-header">
-              <div class="td">类型</div>
-              <div class="td">
-                <el-select
-                  v-model="selectedLevel"
-                  placeholder="县区"
-                  size="large"
-                  class="custom-select2"
-                  popper-class="custom-select-popper2"
-                  :teleported="false"
-                  style="width: 180px"
-                  @change="fetchAlertDetails"
-                >
-                  <el-option label="全部" value="" />
-                  <el-option v-for="item in alertLevels" :key="item.value" :label="item.name" :value="item.value" />
-                </el-select>
+          <div style="display: flex; align-items: center">
+            <div class="title-box" style="margin-top: 10px; flex: 1">
+              <div class="gradient-text">瞬时风站点排行（过去24小时）</div>
+            </div>
+            <div class="btn-box">
+              <div class="btn" @click="handleShowMore">
+                <i class="more-icon"></i>
+                <div class="btn-text">更多</div>
+              </div>
+              <div class="btn" @click="exportData">
+                <i class="export-icon"></i>
+                <div class="btn-text">导出</div>
               </div>
-              <div class="td">站址</div>
-              <div class="td">风速(m/s)</div>
             </div>
-            <div v-for="(item, index) in tableData" :key="index">
-              <div class="tr">
+          </div>
+          <div class="alert-details">
+            <div class="common-table">
+              <div class="table-header">
+                <div class="td">类型</div>
                 <div class="td">
-                  <div :class="getRankClass(item.id)">{{ item.id }}</div>
+                  <el-select
+                    v-model="selectedLevel"
+                    placeholder="县区"
+                    size="large"
+                    class="custom-select2"
+                    popper-class="custom-select-popper2"
+                    :teleported="false"
+                    style="width: 180px"
+                    @change="fetchAlertDetails"
+                  >
+                    <el-option label="全部" value="" />
+                    <el-option v-for="item in alertLevels" :key="item.value" :label="item.name" :value="item.value" />
+                  </el-select>
                 </div>
-                <div class="td">{{ item.district }}</div>
-                <div class="td">{{ item.address }}</div>
-                <div class="td">
-                  <div class="gradient-text">{{ item.speed }}</div>
+                <div class="td">站址</div>
+                <div class="td">风速(m/s)</div>
+              </div>
+              <div v-for="(item, index) in tableData" :key="index">
+                <div class="tr">
+                  <div class="td">
+                    <div :class="getRankClass(item.id)">{{ item.id }}</div>
+                  </div>
+                  <div class="td">{{ item.district }}</div>
+                  <div class="td">{{ item.address }}</div>
+                  <div class="td">
+                    <div class="gradient-text">{{ item.speed }}</div>
+                  </div>
                 </div>
               </div>
             </div>
           </div>
-        </div>
-        <div style="display: flex; align-items: center">
-          <div class="title-box" style="margin-top: 10px; flex: 1">
-            <div class="gradient-text">空间分析</div>
-          </div>
-          <div class="btn-box">
-            <div class="btn" @click="handleToShowDrawTools">
-              <i class="more-icon"></i>
-              <div class="btn-text">{{ !openSelect ? '开启圈选' : '结束圈选' }}</div>
+          <div style="display: flex; align-items: center">
+            <div class="title-box" style="margin-top: 10px; flex: 1">
+              <div class="gradient-text">空间分析</div>
             </div>
-            <div class="btn" @click="exportData">
-              <i class="export-icon"></i>
-              <div class="btn-text">导出</div>
+            <div class="btn-box">
+              <div class="btn" @click="handleToShowDrawTools">
+                <i class="more-icon"></i>
+                <div class="btn-text">{{ !openSelect ? '开启圈选' : '结束圈选' }}</div>
+              </div>
+              <div class="btn" @click="exportData">
+                <i class="export-icon"></i>
+                <div class="btn-text">导出</div>
+              </div>
             </div>
           </div>
-        </div>
-        <div class="data-box">
-          <div>
-            <div class="line1">
-              <div class="line-item">2-3</div>
-              <div class="line-item">4-5</div>
-              <div class="line-item">6-7</div>
-              <div class="line-item">8-9</div>
-              <div class="line-item">10-11</div>
-              <div class="line-item">12-13</div>
-              <div class="line-item">>=14级</div>
-            </div>
-            <div ref="lineRef" class="line2" @mousemove="handleMouseMove" @mouseup="handleMouseUp" @mouseleave="handleMouseUp">
-              <div class="line-item"></div>
-              <div class="line-item"></div>
-              <div class="line-item"></div>
-              <div class="line-item"></div>
-              <div class="line-item"></div>
-              <div class="line-item"></div>
-              <div class="line-item"></div>
-              <div
-                class="dot"
-                :style="{ left: startLeft + 'px' }"
-                @mousedown="
+          <div class="data-box">
+            <div>
+              <div class="line1">
+                <div class="line-item">2-3</div>
+                <div class="line-item">4-5</div>
+                <div class="line-item">6-7</div>
+                <div class="line-item">8-9</div>
+                <div class="line-item">10-11</div>
+                <div class="line-item">12-13</div>
+                <div class="line-item">>=14级</div>
+              </div>
+              <div ref="lineRef" class="line2" @mousemove="handleMouseMove" @mouseup="handleMouseUp" @mouseleave="handleMouseUp">
+                <div class="line-item"></div>
+                <div class="line-item"></div>
+                <div class="line-item"></div>
+                <div class="line-item"></div>
+                <div class="line-item"></div>
+                <div class="line-item"></div>
+                <div class="line-item"></div>
+                <div
+                  class="dot"
+                  :style="{ left: startLeft + 'px' }"
+                  @mousedown="
                   (e) => {
                     handleMouseDown(e, 'start');
                   }
                 "
-              ></div>
-              <div
-                class="dot"
-                :style="{ left: endLeft + 'px' }"
-                @mousedown="
+                ></div>
+                <div
+                  class="dot"
+                  :style="{ left: endLeft + 'px' }"
+                  @mousedown="
                   (e) => {
                     handleMouseDown(e, 'end');
                   }
                 "
-              ></div>
-            </div>
-            <div class="line3">
-              <div class="line-item">1.6</div>
-              <div class="line-item">5.5</div>
-              <div class="line-item">10.8</div>
-              <div class="line-item">17.2</div>
-              <div class="line-item">24.5</div>
-              <div class="line-item">32.7</div>
-              <div class="line-item">
-                <div>41.5</div>
-                <div>(m/s)</div>
+                ></div>
+              </div>
+              <div class="line3">
+                <div class="line-item">1.6</div>
+                <div class="line-item">5.5</div>
+                <div class="line-item">10.8</div>
+                <div class="line-item">17.2</div>
+                <div class="line-item">24.5</div>
+                <div class="line-item">32.7</div>
+                <div class="line-item">
+                  <div>41.5</div>
+                  <div>(m/s)</div>
+                </div>
               </div>
             </div>
           </div>
-        </div>
-        <div class="analyze-data-container">
-          <div class="item" @click="handleShowDetail">
-            <div class="item-label">行政镇(个)</div>
-            <div class="item-value">{{ validateNum(analysisData.townCount) }}</div>
-          </div>
-          <div class="item" @click="handleShowDetail">
-            <div class="item-label">行政村(个)</div>
-            <div class="item-value">{{ validateNum(analysisData.villageCount) }}</div>
-          </div>
-          <div class="item" @click="handleShowDetail">
-            <div class="item-label">面积(km²)</div>
-            <div class="item-value">{{ validateNum(analysisData.areaSize) }}</div>
-          </div>
-          <div class="item" @click="handleShowDetail">
-            <div class="item-label">常住人口(万)</div>
-            <div class="item-value">{{ validateNum(analysisData.populationSize) }}</div>
-          </div>
-          <div class="item" @click="handleShowDetail">
-            <div class="item-label">GDP(万元)</div>
-            <div class="item-value">{{ validateNum(analysisData.GDP) }}</div>
+          <div class="analyze-data-container">
+            <div class="item" @click="handleShowDetail">
+              <div class="item-label">行政镇(个)</div>
+              <div class="item-value">{{ validateNum(analysisData.townCount) }}</div>
+            </div>
+            <div class="item" @click="handleShowDetail">
+              <div class="item-label">行政村(个)</div>
+              <div class="item-value">{{ validateNum(analysisData.villageCount) }}</div>
+            </div>
+            <div class="item" @click="handleShowDetail">
+              <div class="item-label">面积(km²)</div>
+              <div class="item-value">{{ validateNum(analysisData.areaSize) }}</div>
+            </div>
+            <div class="item" @click="handleShowDetail">
+              <div class="item-label">常住人口(万)</div>
+              <div class="item-value">{{ validateNum(analysisData.populationSize) }}</div>
+            </div>
+            <div class="item" @click="handleShowDetail">
+              <div class="item-label">GDP(万元)</div>
+              <div class="item-value">{{ validateNum(analysisData.GDP) }}</div>
+            </div>
           </div>
         </div>
       </div>
     </div>
-  </div>
-  <WindSpeedRank v-if="showMore" v-model="showMore" />
-  <Dialog v-model="showDetail" title="空间分析" hide-footer>
-    <div class="common-table">
-      <div class="table-header">
-        <div class="td">序号</div>
-        <div class="td">行政镇</div>
-        <div class="td">行政村</div>
-        <div class="td">常住人口(万)</div>
-        <div class="td">面积(km2)</div>
-        <div class="td">GDP(亿元)</div>
-      </div>
-      <div v-for="(item, index) in analysisData.townData" :key="index" class="tr">
-        <div class="td">{{ index + 1 }}</div>
-        <div class="td">{{ item.townName }}</div>
-        <div class="td">{{ item.villageName ? item.villageName : '-' }}</div>
-        <div class="td">{{ item.populationSize }}</div>
-        <div class="td">{{ item.areaSize }}</div>
-        <div class="td">{{ item.GDP }}</div>
+    <WindSpeedRank v-if="showMore" v-model="showMore" />
+    <Dialog v-model="showDetail" title="空间分析" hide-footer>
+      <div class="common-table">
+        <div class="table-header">
+          <div class="td">序号</div>
+          <div class="td">行政镇</div>
+          <div class="td">行政村</div>
+          <div class="td">常住人口(万)</div>
+          <div class="td">面积(km2)</div>
+          <div class="td">GDP(亿元)</div>
+        </div>
+        <div v-for="(item, index) in analysisData.townData" :key="index" class="tr">
+          <div class="td">{{ index + 1 }}</div>
+          <div class="td">{{ item.townName }}</div>
+          <div class="td">{{ item.villageName ? item.villageName : '-' }}</div>
+          <div class="td">{{ item.populationSize }}</div>
+          <div class="td">{{ item.areaSize }}</div>
+          <div class="td">{{ item.GDP }}</div>
+        </div>
       </div>
-    </div>
-  </Dialog>
+    </Dialog>
+  </div>
 </template>
 
 <script setup lang="ts">

src/views/globalMap/RightMenu/index.vue

@@ -31,74 +31,137 @@
           折叠菜单
         </div>
         <!--图层分析-->
-        <LayerAnalysis v-if="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '图层分析'" />
+        <LayerAnalysis v-if="handleIf('图层分析')" v-show="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '图层分析'" />
         <!--空间分析-->
         <SpatialAnalysis
-          v-if="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '空间分析'"
+          v-if="handleIf('空间分析')"
+          v-show="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '空间分析'"
           :update-location="location"
           @handle-menu="handleMenu"
         />
         <!--江湖河库-->
-        <Reservoir v-if="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '江湖河库'" />
+        <Reservoir v-if="handleIf('江湖河库')" v-show="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '江湖河库'" />
         <!--路网视频-->
-        <RoadNetworkVideo v-if="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '路网视频'" />
+        <RoadNetworkVideo v-if="handleIf('路网视频')" v-show="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '路网视频'" />
         <!--防溺水视频-->
-        <PreventDrowning v-if="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '防溺水'" />
+        <PreventDrowning v-if="handleIf('防溺水')" v-show="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '防溺水'" />
         <!--水库监测-->
-        <ReservoirMonitor v-if="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '水库监测'" />
+        <ReservoirMonitor v-if="handleIf('水库监测')" v-show="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '水库监测'" />
         <!--河道监测-->
-        <RiverMonitor v-if="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '河道监测'" />
+        <RiverMonitor v-if="handleIf('河道监测')" v-show="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '河道监测'" />
         <!--省政务无人机-->
-        <UAV v-if="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '省政务无人机'" @handle-menu="handleMenu" />
+        <UAV
+          v-if="handleIf('省政务无人机')"
+          v-show="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '省政务无人机'"
+          @handle-menu="handleMenu"
+        />
         <!--实时标绘-->
-        <OnlinePlotting v-if="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '实时标绘'" />
+        <OnlinePlotting v-if="handleIf('实时标绘')" v-show="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '实时标绘'" />
         <!--定点分析-->
-        <FixedPointAnalysis v-if="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '定点分析'" :location="location2" />
+        <FixedPointAnalysis
+          v-if="handleIf('定点分析')"
+          v-show="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '定点分析'"
+          :location="location2"
+        />
         <!--雨情监测-->
-        <RainMonitor v-if="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '雨情监测'" />
+        <RainMonitor v-if="handleIf('雨情监测')" v-show="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '雨情监测'" />
         <!--铁塔运行监测-->
-        <TowerStatus v-if="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '铁塔运行监测'" />
+        <TowerStatus
+          v-if="handleIf('铁塔运行监测')"
+          v-show="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '铁塔运行监测'"
+        />
         <!--预警信号-->
-        <WarningInfo v-if="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '预警信号'" @handle-menu="handleMenu" />
+        <WarningInfo
+          v-if="handleIf('预警信号')"
+          v-show="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '预警信号'"
+          @handle-menu="handleMenu"
+        />
         <!--森林防火-->
-        <Fireproofing v-if="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '森林防火'" @handle-menu="handleMenu" />
+        <Fireproofing
+          v-if="handleIf('森林防火')"
+          v-show="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '森林防火'"
+          @handle-menu="handleMenu"
+        />
         <!--森防视频-->
-        <ForestDefenseVideo v-if="menuState.menuData[menuState.activeIndex]?.name === '森防视频'" @handle-menu="handleMenu" />
+        <ForestDefenseVideo
+          v-if="handleIf('森防视频')"
+          v-show="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '森防视频'"
+          @handle-menu="handleMenu"
+        />
         <!--防灾救援-->
-        <Mitigation v-if="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '防灾救援'" @handle-menu="handleMenu" />
+        <Mitigation
+          v-if="handleIf('防灾救援')"
+          v-show="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '防灾救援'"
+          @handle-menu="handleMenu"
+        />
         <!--交通视频-->
-        <TrafficVideo v-if="menuState.menuData[menuState.activeIndex]?.name === '交通视频'" @handle-menu="handleMenu" />
+        <TrafficVideo
+          v-if="handleIf('交通视频')"
+          v-show="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '交通视频'"
+          @handle-menu="handleMenu"
+        />
         <!--交通局视频-->
-        <tranBureauVideo v-if="menuState.menuData[menuState.activeIndex]?.name === '交通局视频'" @handle-menu="handleMenu" />
+        <tranBureauVideo
+          v-if="handleIf('交通局视频')"
+          v-show="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '交通局视频'"
+          @handle-menu="handleMenu"
+        />
         <!--易涝隐患点-->
         <PotentialFloodHazard
-          v-if="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '易涝隐患点'"
+          v-if="handleIf('易涝隐患点')"
+          v-show="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '易涝隐患点'"
           @handle-menu="handleMenu"
         />
         <!--通讯保障-->
-        <CommunicationSupport v-if="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '通讯保障'" @handle-menu="handleMenu" />
+        <CommunicationSupport
+          v-if="handleIf('通讯保障')"
+          v-show="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '通讯保障'"
+          @handle-menu="handleMenu"
+        />
         <!--手机工作平台-->
-        <MobilePlatform v-if="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '手机工作台'" @handle-menu="handleMenu" />
+        <MobilePlatform
+          v-if="handleIf('手机工作台')"
+          v-show="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '手机工作台'"
+          @handle-menu="handleMenu"
+        />
         <!--重点车辆-->
-        <KeyVehicles v-if="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '重点车辆'" @handle-menu="handleMenu" />
+        <KeyVehicles
+          v-if="handleIf('重点车辆')"
+          v-show="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '重点车辆'"
+          @handle-menu="handleMenu"
+        />
         <!--卫星电话-->
-        <SatellitePhone v-if="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '卫星电话'" @handle-menu="handleMenu" />
+        <SatellitePhone
+          v-if="handleIf('卫星电话')"
+          v-show="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '卫星电话'"
+          @handle-menu="handleMenu"
+        />
         <!--机动无人机-->
         <MobileUnmannedVehicle
-          v-if="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '机动无人机'"
+          v-if="handleIf('机动无人机')"
+          v-show="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '机动无人机'"
           @handle-menu="handleMenu"
         />
-        <!--移动无人机-->
+        <!--移动指挥车-->
         <MobileCommandVehicle
-          v-if="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '移动指挥车'"
+          v-if="handleIf('移动指挥车')"
+          v-show="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '移动指挥车'"
           @handle-menu="handleMenu"
         />
         <!--直升机-->
-        <Helicopter v-if="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '直升机'" @handle-menu="handleMenu" />
+        <Helicopter
+          v-if="handleIf('直升机')"
+          v-show="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '直升机'"
+          @handle-menu="handleMenu"
+        />
         <!--台风视频-->
-        <TyphoonVideo v-if="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '台风视频'" @handle-menu="handleMenu" />
-        <RescueTeam v-if="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '救援队伍'" />
-        <WindMonitor v-if="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '大风监测'" />
+        <TyphoonVideo
+          v-if="handleIf('台风视频')"
+          v-show="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '台风视频'"
+          @handle-menu="handleMenu"
+        />
+        <RescueTeam v-if="handleIf('救援队伍')" v-show="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '救援队伍'" />
+        <WindMonitor v-if="handleIf('大风监测')" v-show="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '大风监测'" />
         <!--图像资源下视频通用组件-->
         <CommonVideo
           v-if="
@@ -107,8 +170,8 @@
               menuState.menuData[menuState.activeIndex]?.name
             )
           "
-          :title="menuState.menuData[menuState.activeIndex]?.name"
           :id="menuState.menuData[menuState.activeIndex]?.component"
+          :title="menuState.menuData[menuState.activeIndex]?.name"
         />
       </div>
     </div>
@@ -231,6 +294,16 @@ const updateMenu = (type, menu, newLocation?: any) => {
     location2.value = newLocation;
   }
 };
+const handleIf = (name) => {
+  let flag = false;
+  let index = menuState.value.menuData.findIndex((item) => {
+    return item.name === name;
+  });
+  if (index > -1) {
+    flag = true;
+  }
+  return flag;
+};
 const getMenuState = () => {
   return menuState;
 };

src/views/globalMap/RightMenu/tranBureauVideo.vue

@@ -207,7 +207,6 @@ initData();
   height: 64px;
   display: flex;
   justify-content: flex-end;
-  margin-bottom: 30px;
   .pagination-container {
     height: 64px;
     margin: 0;