地图右侧菜单调整

src/types/auto-imports.d.ts

@@ -78,7 +78,6 @@ declare global {
   const onStartTyping: typeof import('@vueuse/core')['onStartTyping']
   const onUnmounted: typeof import('vue')['onUnmounted']
   const onUpdated: typeof import('vue')['onUpdated']
-  const onWatcherCleanup: typeof import('vue')['onWatcherCleanup']
   const pausableWatch: typeof import('@vueuse/core')['pausableWatch']
   const provide: typeof import('vue')['provide']
   const provideLocal: typeof import('@vueuse/core')['provideLocal']
@@ -190,7 +189,6 @@ declare global {
   const useFullscreen: typeof import('@vueuse/core')['useFullscreen']
   const useGamepad: typeof import('@vueuse/core')['useGamepad']
   const useGeolocation: typeof import('@vueuse/core')['useGeolocation']
-  const useId: typeof import('vue')['useId']
   const useIdle: typeof import('@vueuse/core')['useIdle']
   const useImage: typeof import('@vueuse/core')['useImage']
   const useInfiniteScroll: typeof import('@vueuse/core')['useInfiniteScroll']
@@ -207,7 +205,6 @@ declare global {
   const useMediaQuery: typeof import('@vueuse/core')['useMediaQuery']
   const useMemoize: typeof import('@vueuse/core')['useMemoize']
   const useMemory: typeof import('@vueuse/core')['useMemory']
-  const useModel: typeof import('vue')['useModel']
   const useMounted: typeof import('@vueuse/core')['useMounted']
   const useMouse: typeof import('@vueuse/core')['useMouse']
   const useMouseInElement: typeof import('@vueuse/core')['useMouseInElement']
@@ -255,7 +252,6 @@ declare global {
   const useStyleTag: typeof import('@vueuse/core')['useStyleTag']
   const useSupported: typeof import('@vueuse/core')['useSupported']
   const useSwipe: typeof import('@vueuse/core')['useSwipe']
-  const useTemplateRef: typeof import('vue')['useTemplateRef']
   const useTemplateRefsList: typeof import('@vueuse/core')['useTemplateRefsList']
   const useTextDirection: typeof import('@vueuse/core')['useTextDirection']
   const useTextSelection: typeof import('@vueuse/core')['useTextSelection']

src/views/globalMap/RightMenu/CommunicationSupport.vue

@@ -1,83 +1,85 @@
 <template>
-  <Dialog custom-show type="lg" title="通讯保障" 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="通讯保障" 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: 460px">
+        <el-select
+          v-model="type"
+          :teleported="false"
+          class="custom-select"
+          popper-class="custom-select-popper"
+          style="width: 460px"
+          @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.name">{{ item.group_name }}</div>
           <div class="td" :title="item.nickName">{{ item.nick_name }}</div>
@@ -76,6 +83,7 @@ import { addWsUser, delGroup, getBzList, updateBzVisible, updateGroupVisible } f
 import ImportLayer from './ImportLayer.vue';
 import CollaborativeUser from './CollaborativeUser.vue';
 import EditGroup from './EditGroup.vue';
+import { deepClone } from '@/utils';
 const props = defineProps({
   modelValue: Boolean,
   patternId: String
@@ -84,10 +92,10 @@ const emits = defineEmits(['update:modelValue', 'handleSendData', 'change']);
 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
@@ -143,6 +151,7 @@ const handleShowImportLayer = () => {
 const getList = () => {
   getBzList(queryParams).then((res) => {
     dataList.value = res.data;
+    handleChange();
   });
 };
 const handleVisible = (item) => {
@@ -155,6 +164,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();
 });

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

@@ -1,220 +1,222 @@
 <template>
-  <div class="menu-content">
-    <div class="gradient-text title">实时标绘</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="handleShare('1')">协同标绘</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 class="menu-content">
+      <div class="gradient-text title">实时标绘</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 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 class="btn-box">
+          <div class="btn1" @click="handleScreenshot">
+            <div class="icon1" />
+            当前地图截图导出
           </div>
+          <div v-show="!collaboration" class="btn2" @click="handleShare('1')">协同标绘</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" 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 v-if="menu[menuActive1] && menu[menuActive1].children && menu[menuActive1].children[menuActive2]"
-               class="tab-list">
+          <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>
+        <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'"
-              :style="{ cursor: showSetting ? 'default' : 'pointer' }"
-              @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" popper-class="custom-color-picker" show-alpha />
               </div>
             </div>
-            <div v-if="showSetting" class="tab" @click="handleShowAddClass">
-              <el-icon color="#7495b4" :size="80">
-                <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'"
+                :style="{ cursor: showSetting ? 'default' : 'pointer' }"
+                @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="80">
+                  <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-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="协同标绘" height="auto" type="xs" @close="showForm = false" @confirm="handleSendForm">
+      <div style="display: flex; align-items: center">
+        <div style="font-size: 36px">预案名称：</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" @handle-send-data="handleSendData" @showAnnotationNameChange="showAnnotationNameChange" />
   </div>
-  <!--添加修改分类弹窗-->
-  <EditClassDialog
-    v-if="showAddDialog"
-    :id="selectEditId"
-    v-model="showAddDialog"
-    :template-id="selectTemplateId"
-    @update-data="getTemplateTreeData"
-  />
-  <!--添加文字-->
-  <TextEdit 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="协同标绘" height="auto" type="xs" @close="showForm = false" @confirm="handleSendForm">
-    <div style="display: flex; align-items: center">
-      <div style="font-size: 36px">预案名称：</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" @handle-send-data="handleSendData" @showAnnotationNameChange="showAnnotationNameChange" />
 </template>
 
 <script lang="ts" setup name="OnlinePlotting">

src/views/globalMap/RightMenu/PotentialFloodHazard.vue

@@ -1,66 +1,68 @@
 <template>
-  <div class="menu-content">
-    <div class="gradient-text title">易涝隐患点</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 title">易涝隐患点</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: 600px" @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: 600px" @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" :get-data-method="getDataMethod" />
   </div>
-  <NearbyVideos v-if="showNearbyVideos" v-model="showNearbyVideos" :get-data-method="getDataMethod" />
 </template>
 
 <script lang="ts" setup>

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

@@ -1,196 +1,198 @@
 <template>
-  <div class="menu-content">
-    <div class="gradient-text title">雨情监测</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: 505px" />
-      <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 title">雨情监测</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: 505px" />
+        <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">
-            <div style="width: 201px">
+        <div class="table">
+          <div class="table-header">
+            <div class="td">序号</div>
+            <div class="td">
+              <div style="width: 201px">
+                <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>
+            <div class="td">
               <el-select
-                v-model="queryParams.area"
-                placeholder="县区"
+                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 district_type" :key="item.value" :label="item.label" :value="item.value" />
+                <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">
-            <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 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,100 +1,102 @@
 <template>
-  <div class="menu-content">
-    <div class="gradient-text title">水库监测</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 title">水库监测</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="lg" draggable title="水库监测" 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="lg" draggable title="水库监测" 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: 400px" />
-        </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: 400px" />
           </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 class="flex-box2">
-          <div class="title2">附近视频</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 class="right-box">
+          <div class="flex-box2">
+            <div class="title2">附近视频</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>
-    </div>
-  </Dialog>
+    </Dialog>
+  </div>
 </template>
 
 <script lang="ts" setup name="ReservoirMonitor">

src/views/globalMap/RightMenu/RiverMonitor.vue

@@ -1,95 +1,97 @@
 <template>
-  <div class="menu-content">
-    <div class="gradient-text title">河道监测</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 title">河道监测</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" draggable title="河道监测" 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" draggable title="河道监测" 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: 500px" />
+            </div>
           </div>
         </div>
-        <div>
-          <div class="box2">
-            <div class="box2-title">过去24小时河流水位变化图</div>
-            <Chart :option="chartOption2" style="width: 100%; height: 500px" />
+        <div class="right-box">
+          <div class="flex-box2">
+            <div class="title2">附近视频</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>
-      <div class="right-box">
-        <div class="flex-box2">
-          <div class="title2">附近视频</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 title">过去24小时瞬时风（格点）分布图</div>
-      <div class="textBase" style="padding-left: 90px; padding-bottom: 20px; margin-left: 60px; margin-top: -30px">
-        09月08日 14：00-09月09日 14：00
-      </div>
-
-      <div style="height: 1200px; overflow: auto">
-        <div style="margin-left: 30px">
-          <span>风流场</span>
-          <img :src="switchStatus ? switchOn : switchOff" style="margin-left: 30px; 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: 1490px; margin-left: 30px"
-            @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 title">过去24小时瞬时风（格点）分布图</div>
+        <div class="textBase" style="padding-left: 90px; padding-bottom: 20px; margin-left: 60px; margin-top: -30px">
+          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: 1200px; overflow: auto">
+          <div style="margin-left: 30px">
+            <span>风流场</span>
+            <img :src="switchStatus ? switchOn : switchOff" style="margin-left: 30px; cursor: pointer;" @click="switchControl" />
           </div>
-        </div>
-        <div style="display: flex; align-items: center">
-          <div class="title-box" style="margin-top: 30px; 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: 1490px; margin-left: 30px"
+              @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: 30px; 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: 30px; 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: 30px; 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

@@ -32,65 +32,143 @@
         </div>
         <template v-if="menuState.showMenu">
           <!--图层分析-->
-          <LayerAnalysis v-if="menuState.menuData[menuState.activeIndex]?.name === '图层分析'" />
+          <LayerAnalysis v-if="handleIf('图层分析')" v-show="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '图层分析'" />
           <!--空间分析-->
           <SpatialAnalysis
-            v-if="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.menuData[menuState.activeIndex]?.name === '江湖河库'" />
+          <Reservoir v-if="handleIf('江湖河库')" v-show="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '江湖河库'" />
           <!--路网视频-->
-          <RoadNetworkVideo v-if="menuState.menuData[menuState.activeIndex]?.name === '路网视频'" />
+          <RoadNetworkVideo
+            v-if="handleIf('路网视频')"
+            v-show="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '路网视频'"
+          />
           <!--防溺水视频-->
-          <PreventDrowning v-if="menuState.menuData[menuState.activeIndex]?.name === '防溺水'" />
+          <PreventDrowning v-if="handleIf('防溺水')" v-show="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '防溺水'" />
           <!--水库监测-->
-          <ReservoirMonitor v-if="menuState.menuData[menuState.activeIndex]?.name === '水库监测'" />
+          <ReservoirMonitor
+            v-if="handleIf('水库监测')"
+            v-show="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '水库监测'"
+          />
           <!--河道监测-->
-          <RiverMonitor v-if="menuState.menuData[menuState.activeIndex]?.name === '河道监测'" />
+          <RiverMonitor v-if="handleIf('河道监测')" v-show="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '河道监测'" />
           <!--省政务无人机-->
-          <UAV v-if="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.menuData[menuState.activeIndex]?.name === '实时标绘'" />
+          <OnlinePlotting v-if="handleIf('实时标绘')" v-show="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '实时标绘'" />
           <!--定点分析-->
-          <FixedPointAnalysis v-if="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.menuData[menuState.activeIndex]?.name === '雨情监测'" />
+          <RainMonitor v-if="handleIf('雨情监测')" v-show="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '雨情监测'" />
           <!--铁塔运行监测-->
-          <TowerStatus v-if="menuState.menuData[menuState.activeIndex]?.name === '铁塔运行监测'" />
+          <TowerStatus
+            v-if="handleIf('铁塔运行监测')"
+            v-show="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '铁塔运行监测'"
+          />
           <!--预警信号-->
-          <WarningInfo v-if="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.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.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.menuData[menuState.activeIndex]?.name === '易涝隐患点'" @handle-menu="handleMenu" />
+          <PotentialFloodHazard
+            v-if="handleIf('易涝隐患点')"
+            v-show="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '易涝隐患点'"
+            @handle-menu="handleMenu"
+          />
           <!--通讯保障-->
-          <CommunicationSupport v-if="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.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.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.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.menuData[menuState.activeIndex]?.name === '机动无人机'" @handle-menu="handleMenu" />
+          <MobileUnmannedVehicle
+            v-if="handleIf('机动无人机')"
+            v-show="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '机动无人机'"
+            @handle-menu="handleMenu"
+          />
           <!--移动指挥车-->
-          <MobileCommandVehicle v-if="menuState.menuData[menuState.activeIndex]?.name === '移动指挥车'" @handle-menu="handleMenu" />
+          <MobileCommandVehicle
+            v-if="handleIf('移动指挥车')"
+            v-show="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '移动指挥车'"
+            @handle-menu="handleMenu"
+          />
           <!--直升机-->
-          <Helicopter v-if="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.menuData[menuState.activeIndex]?.name === '台风视频'" @handle-menu="handleMenu" />
-          <RescueTeam v-if="menuState.menuData[menuState.activeIndex]?.name === '救援队伍'" />
-          <WindMonitor v-if="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="
@@ -99,8 +177,8 @@
                 menuState.menuData[menuState.activeIndex]?.name
               )
             "
-            :title="menuState.menuData[menuState.activeIndex]?.name"
             :id="menuState.menuData[menuState.activeIndex]?.component"
+            :title="menuState.menuData[menuState.activeIndex]?.name"
           />
         </template>
       </div>
@@ -227,6 +305,16 @@ const updateMenu = (type, menu, newLocation?: any) => {
 const getMenuState = () => {
   return menuState;
 };
+const handleIf = (name) => {
+  let flag = false;
+  let index = menuState.value.menuData.findIndex((item) => {
+    return item.name === name;
+  });
+  if (index > -1) {
+    flag = true;
+  }
+  return flag;
+};
 defineExpose({ handleMenu, showIndexMenu, clickContractMenu, updateMenu, getMenuState });
 </script>
 

src/views/globalMap/RightMenu/tranBureauVideo.vue

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