地图 右侧菜单背景调整

src/types/components.d.ts

@@ -17,6 +17,58 @@ declare module 'vue' {
     Dialog: typeof import('./../components/Dialog/index.vue')['default']
     DictTag: typeof import('./../components/DictTag/index.vue')['default']
     Editor: typeof import('./../components/Editor/index.vue')['default']
+    ElAnchor: typeof import('element-plus/es')['ElAnchor']
+    ElAnchorLink: typeof import('element-plus/es')['ElAnchorLink']
+    ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb']
+    ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem']
+    ElButton: typeof import('element-plus/es')['ElButton']
+    ElCard: typeof import('element-plus/es')['ElCard']
+    ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
+    ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
+    ElCol: typeof import('element-plus/es')['ElCol']
+    ElColorPicker: typeof import('element-plus/es')['ElColorPicker']
+    ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
+    ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
+    ElDialog: typeof import('element-plus/es')['ElDialog']
+    ElDivider: typeof import('element-plus/es')['ElDivider']
+    ElDrawer: typeof import('element-plus/es')['ElDrawer']
+    ElDropdown: typeof import('element-plus/es')['ElDropdown']
+    ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
+    ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
+    ElForm: typeof import('element-plus/es')['ElForm']
+    ElFormItem: typeof import('element-plus/es')['ElFormItem']
+    ElIcon: typeof import('element-plus/es')['ElIcon']
+    ElImage: typeof import('element-plus/es')['ElImage']
+    ElInput: typeof import('element-plus/es')['ElInput']
+    ElLink: typeof import('element-plus/es')['ElLink']
+    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']
+    ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
+    ElRow: typeof import('element-plus/es')['ElRow']
+    ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
+    ElSelect: typeof import('element-plus/es')['ElSelect']
+    ElSkeleton: typeof import('element-plus/es')['ElSkeleton']
+    ElSkeletonItem: typeof import('element-plus/es')['ElSkeletonItem']
+    ElSlider: typeof import('element-plus/es')['ElSlider']
+    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']
+    ElTimeline: typeof import('element-plus/es')['ElTimeline']
+    ElTimelineItem: typeof import('element-plus/es')['ElTimelineItem']
+    ElTooltip: typeof import('element-plus/es')['ElTooltip']
+    ElTree: typeof import('element-plus/es')['ElTree']
+    ElTreeSelect: typeof import('element-plus/es')['ElTreeSelect']
+    ElUpload: typeof import('element-plus/es')['ElUpload']
     FileUpload: typeof import('./../components/FileUpload/index.vue')['default']
     FooterSection: typeof import('./../components/FooterSection/index.vue')['default']
     Hamburger: typeof import('./../components/Hamburger/index.vue')['default']
@@ -26,6 +78,7 @@ declare module 'vue' {
     HikvisionPlayer: typeof import('./../components/HKVideo/hikvision-player.vue')['default']
     HKVideo: typeof import('./../components/HKVideo/index.vue')['default']
     IconSelect: typeof import('./../components/IconSelect/index.vue')['default']
+    IEpUploadFilled: typeof import('~icons/ep/upload-filled')['default']
     IFrame: typeof import('./../components/iFrame/index.vue')['default']
     ImagePreview: typeof import('./../components/ImagePreview/index.vue')['default']
     ImageUpload: typeof import('./../components/ImageUpload/index.vue')['default']
@@ -57,4 +110,7 @@ declare module 'vue' {
     YMapold: typeof import('./../components/Map/YMapold.vue')['default']
     YztMap: typeof import('./../components/Map/YztMap/index.vue')['default']
   }
+  export interface ComponentCustomProperties {
+    vLoading: typeof import('element-plus/es')['ElLoadingDirective']
+  }
 }

src/views/globalMap/RightMenu/DrawTools.vue

@@ -344,14 +344,14 @@ const analysisSpatial = (data) => {
 
 <style lang="scss" scoped>
 .draw-tools-container {
-  position: fixed;
-  top: 2200px;
-  left: 102px;
+  position: absolute;
+  bottom: -600px;
+  left: -6770px;
   background-color: #304468;
   border-radius: 5px;
   display: flex;
   color: #fff;
-  font-size: 18px;
+  font-size: 36px;
   padding: 10px 0;
   .draw-item {
     display: flex;

src/views/globalMap/RightMenu/LayerAnalysis.vue

@@ -177,12 +177,13 @@ const handleClick = (item) => {
 
 <style lang="scss" scoped>
 .menu-content {
-  width: 1580px;
-  height: 2080px;
+  width: 1583px;
+  height: 2105px;
   background: url('@/assets/images/map/rightMenu/LayerAnalysis/dialog.png') no-repeat;
   padding: 130px 20px 20px 130px;
   font-size: 36px;
   position: relative;
+  color: #fff;
 }
 .title {
   font-size: 60px;

src/views/globalMap/RightMenu/OnlinePlotting.vue

@@ -1,86 +1,89 @@
 <template>
-  <div class="gradient-text title">实时标绘</div>
-  <el-select v-model="mouseToolState.lineWidth" placeholder="Select" style="width: 240px">
-    <el-option v-for="item in lineWidthOptions" :key="item.value" :label="item.name" :value="item.value">
-      <span>{{ item.name }}</span>
-    </el-option>
-  </el-select>
-  <el-color-picker v-model="mouseToolState.color" popper-class="custom-color-picker" show-alpha size="large" />
-  <el-button size="large" @click="changeDrawing">{{ drawing ? '关闭' : '开启' }}</el-button>
-  <div class="flex">
-    <div class="draw-item" @click="handleUndo">撤回</div>
-    <div class="draw-item" @click="handleShowDialog">保存</div>
-  </div>
-  <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 class="menu-content">
+    <div class="gradient-text title">实时标绘</div>
+    <el-select v-model="mouseToolState.lineWidth" placeholder="Select" style="width: 240px">
+      <el-option v-for="item in lineWidthOptions" :key="item.value" :label="item.name" :value="item.value">
+        <span>{{ item.name }}</span>
+      </el-option>
+    </el-select>
+    <el-color-picker v-model="mouseToolState.color" popper-class="custom-color-picker" show-alpha size="large" />
+    <el-button size="large" @click="changeDrawing">{{ drawing ? '关闭' : '开启' }}</el-button>
+    <div class="flex">
+      <div class="draw-item" @click="handleUndo">撤回</div>
+      <div class="draw-item" @click="handleShowDialog">保存</div>
     </div>
-  </div>
-  <div v-if="menuActive1 === 0" 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)"
-      >
+    <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="tab-content2">
-      <div
-        v-for="(item, index) in menu[menuActive1].children[menuActive2].children"
-        :key="index"
-        :class="menuActive3 === index ? 'tab tab_active' : 'tab'"
-        @click="clickTab3(item, index)"
-      >
-        {{ item.name }}
+    <div v-if="menuActive1 === 0" 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>
+      </div>
+      <div class="tab-content2">
+        <div
+          v-for="(item, index) in menu[menuActive1].children[menuActive2].children"
+          :key="index"
+          :class="menuActive3 === index ? 'tab tab_active' : 'tab'"
+          @click="clickTab3(item, index)"
+        >
+          {{ item.name }}
+        </div>
       </div>
     </div>
-  </div>
-  <div v-else-if="menuActive1 === 1" class="tab-content3">
-    <div>
-      <div>合并</div>
-    </div>
-    <div>
-      <el-input v-model="queryParams.pattern_name" placeholder="请输入标题关键字" size="large" @keydown.enter="handleQuery" />
-    </div>
-    <div class="custom-table">
-      <div class="tr">
-        <div class="th">预案名称</div>
-        <div class="th">操作</div>
+    <div v-else-if="menuActive1 === 1" class="tab-content3">
+      <div>
+        <div>合并</div>
       </div>
-      <div v-for="(item, index) in patternList" :key="index" class="tr">
-        <div class="td">
-          <div>{{ item.pattern_name }}</div>
+      <div>
+        <el-input v-model="queryParams.pattern_name" placeholder="请输入标题关键字" size="large" @keydown.enter="handleQuery" />
+      </div>
+      <div class="custom-table">
+        <div class="tr">
+          <div class="th">预案名称</div>
+          <div class="th">操作</div>
         </div>
-        <div class="td td2">
-          <el-icon class="icon" @click="handleDelete(item.id)"><Delete /></el-icon>
-          <el-icon class="icon" @click="handleEdit(item.id)"><EditPen /></el-icon>
+        <div v-for="(item, index) in patternList" :key="index" class="tr">
+          <div class="td">
+            <div>{{ item.pattern_name }}</div>
+          </div>
+          <div class="td td2">
+            <el-icon class="icon" @click="handleDelete(item.id)"><Delete /></el-icon>
+            <el-icon class="icon" @click="handleEdit(item.id)"><EditPen /></el-icon>
+          </div>
         </div>
       </div>
     </div>
-  </div>
-  <!--添加文字-->
-  <div v-show="textEditState.showTextEdit" class="text-edit-container">
-    <el-input v-model="textEditState.text" :rows="8" type="textarea" />
-    <div class="edit-box">
-      <div class="flex">
-        <div class="text">字号</div>
-        <el-input v-model="textEditState.fontSize" />
+    <!--添加文字-->
+    <div v-show="textEditState.showTextEdit" class="text-edit-container">
+      <el-input v-model="textEditState.text" :rows="8" type="textarea" />
+      <div class="edit-box">
+        <div class="flex">
+          <div class="text">字号</div>
+          <el-input v-model="textEditState.fontSize" />
+        </div>
+        <div class="flex">
+          <div class="text">颜色</div>
+          <el-color-picker v-model="textEditState.fontColor" popper-class="custom-color-picker" show-alpha size="large" />
+        </div>
       </div>
-      <div class="flex">
-        <div class="text">颜色</div>
-        <el-color-picker v-model="textEditState.fontColor" popper-class="custom-color-picker" show-alpha size="large" />
+      <div class="edit-btn-box">
+        <el-button size="large" @click="cancelEdit">取消</el-button>
+        <el-button type="primary" size="large" @click="addText">确定</el-button>
       </div>
     </div>
-    <div class="edit-btn-box">
-      <el-button size="large" @click="cancelEdit">取消</el-button>
-      <el-button type="primary" size="large" @click="addText">确定</el-button>
-    </div>
+    <!--绘制提示信息-->
+    <div v-show="tipTitle !== ''" class="tipTitle">{{ tipTitle }}</div>
   </div>
-  <!--绘制提示信息-->
-  <div v-show="tipTitle !== ''" class="tipTitle">{{ tipTitle }}</div>
+
 
   <Dialog v-model="showEdit" title="编辑" width="450px" height="200px" style="position: fixed; top: 1280px">
     <el-input v-model="editData.pattern_name" />
@@ -535,11 +538,20 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
+.menu-content {
+  width: 1579px;
+  height: 1394px;
+  background: url('@/assets/images/map/rightMenu/content.png') no-repeat;
+  padding: 130px 20px 20px 20px;
+  font-size: 36px;
+  position: relative;
+  color: #ffffff;
+}
 .title {
   font-size: 60px;
   position: absolute;
-  top: 12px;
-  left: 210px;
+  top: 20px;
+  left: 160px;
 }
 
 :deep(.el-color-dropdown__link-btn) {

src/views/globalMap/RightMenu/RainMonitor.vue

@@ -60,6 +60,17 @@
         <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">
+          <i class="export-icon"></i>
+          <div class="btn-text">导出</div>
+        </div>
+      </div>
+    </div>
     <div class="data-box"></div>
   </div>
 </template>

src/views/globalMap/RightMenu/Reservoir.vue

@@ -1,33 +1,35 @@
 <template>
-  <div class="container">
-    <div class="gradient-text title">江湖河库</div>
-    <div class="flex">
-      <el-input v-model="queryParams.keyword" :prefix-icon="Search" size="large" clearable />
-      <el-button type="primary" size="large" @click="initData" style="margin-left: 20px">搜索</el-button>
-    </div>
-    <div class="gradient-text">视频类型</div>
-    <div class="custom-table">
-      <div class="th">
-        <div class="td">
-          所有区县
-<!--          <el-select v-model="queryParams.area" placeholder="所有区县" size="large" clearable @change="initData">-->
-<!--            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />-->
-<!--          </el-select>-->
-        </div>
-        <div class="td">名称</div>
+  <div class="menu-content">
+    <div class="container">
+      <div class="gradient-text title">江湖河库</div>
+      <div class="flex">
+        <el-input v-model="queryParams.keyword" :prefix-icon="Search" size="large" clearable />
+        <el-button type="primary" size="large" @click="initData" style="margin-left: 20px">搜索</el-button>
       </div>
-      <div class="table-content">
-        <div v-for="(item, index) in listData" :key="index" class="tr" @click="handleShowDialog(item)">
-          <div class="td">{{ item.area }}</div>
-          <div class="td">{{ item.name }}</div>
+      <div class="gradient-text">视频类型</div>
+      <div class="custom-table">
+        <div class="th">
+          <div class="td">
+            所有区县
+            <!--          <el-select v-model="queryParams.area" placeholder="所有区县" size="large" clearable @change="initData">-->
+            <!--            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />-->
+            <!--          </el-select>-->
+          </div>
+          <div class="td">名称</div>
+        </div>
+        <div class="table-content">
+          <div v-for="(item, index) in listData" :key="index" class="tr" @click="handleShowDialog(item)">
+            <div class="td">{{ item.area }}</div>
+            <div class="td">{{ item.name }}</div>
+          </div>
         </div>
       </div>
+      <Dialog v-if="showDialog" v-model="showDialog" title="江湖河库" width="2500px" height="1200px">
+        <div style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center">
+          <HKVideo :dot_data="videoMonitorData" />
+        </div>
+      </Dialog>
     </div>
-    <Dialog v-if="showDialog" v-model="showDialog" title="江湖河库" width="2500px" height="1200px">
-      <div style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center">
-        <HKVideo :dot_data="videoMonitorData" />
-      </div>
-    </Dialog>
   </div>
 </template>
 
@@ -95,6 +97,21 @@ initData();
 </script>
 
 <style lang="scss" scoped>
+.menu-content {
+  width: 1579px;
+  height: 1394px;
+  background: url('@/assets/images/map/rightMenu/content.png') no-repeat;
+  padding: 130px 20px 20px 20px;
+  font-size: 36px;
+  position: relative;
+  color: #ffffff;
+}
+.title {
+  font-size: 60px;
+  position: absolute;
+  top: 20px;
+  left: 160px;
+}
 .custom-table {
   width: 1499px;
   .table-content {
@@ -147,11 +164,4 @@ initData();
     background-image: linear-gradient(to bottom, #ffffff 50%, #ff2f3c 100%);
   }
 }
-
-.title {
-  font-size: 60px;
-  position: absolute;
-  top: 12px;
-  left: 210px;
-}
 </style>

src/views/globalMap/RightMenu/ReservoirMonitor.vue

@@ -1,38 +1,39 @@
 <template>
-  <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 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="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 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>
     </div>
   </div>
-
   <Dialog v-model="showDialog" title="水库监测" width="2500px" height="1200px">
     <div class="flex">
       <div class="detail-container">
@@ -222,6 +223,22 @@ const getVideoList = () => {
 </script>
 
 <style lang="scss" scoped>
+.menu-content {
+  width: 1579px;
+  height: 1394px;
+  background: url('@/assets/images/map/rightMenu/content.png') no-repeat;
+  padding: 130px 20px 20px 20px;
+  font-size: 36px;
+  position: relative;
+  color: #ffffff;
+}
+.title {
+  font-size: 60px;
+  position: absolute;
+  top: 20px;
+  left: 160px;
+}
+
 .detail-container {
   font-size: 36px;
   .dialog-content {
@@ -279,14 +296,6 @@ const getVideoList = () => {
     flex-wrap: wrap;
   }
 }
-
-.title {
-  font-size: 60px;
-  position: absolute;
-  top: 12px;
-  left: 210px;
-}
-
 .flex-box {
   display: flex;
   justify-content: space-between;

src/views/globalMap/RightMenu/RiverMonitor.vue

@@ -1,34 +1,36 @@
 <template>
-  <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 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>
@@ -216,6 +218,21 @@ const handleShowDialog = (row) => {
 </script>
 
 <style lang="scss" scoped>
+.menu-content {
+  width: 1579px;
+  height: 1394px;
+  background: url('@/assets/images/map/rightMenu/content.png') no-repeat;
+  padding: 130px 20px 20px 20px;
+  font-size: 36px;
+  position: relative;
+  color: #ffffff;
+}
+.title {
+  font-size: 60px;
+  position: absolute;
+  top: 20px;
+  left: 160px;
+}
 .detail-container {
   font-size: 36px;
   .dialog-content {
@@ -298,14 +315,6 @@ const handleShowDialog = (row) => {
     flex-wrap: wrap;
   }
 }
-
-.title {
-  font-size: 60px;
-  position: absolute;
-  top: 12px;
-  left: 210px;
-}
-
 .flex-box {
   display: flex;
   justify-content: space-between;

src/views/globalMap/RightMenu/RoadNetworkVideo.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="container">
+  <div class="menu-content">
     <div class="title">路网视频</div>
     <div class="flex">
       <el-input v-model="queryParams.keyword" :prefix-icon="Search" size="large" clearable />
@@ -117,5 +117,19 @@ initData();
 </script>
 
 <style lang="scss" scoped>
-
+.menu-content {
+  width: 1579px;
+  height: 1394px;
+  background: url('@/assets/images/map/rightMenu/content.png') no-repeat;
+  padding: 130px 20px 20px 20px;
+  font-size: 36px;
+  position: relative;
+  color: #ffffff;
+}
+.title {
+  font-size: 60px;
+  position: absolute;
+  top: 20px;
+  left: 160px;
+}
 </style>

src/views/globalMap/RightMenu/SpatialAnalysis.vue

@@ -1,31 +1,33 @@
 <template>
-  <div>空间分析</div>
-  <div class="analyze-data-container">
-    <div class="item">
-      <div class="item-label">行政镇(个)</div>
-      <div class="item-value">{{ validateNum(analysisData.townCount) }}</div>
-    </div>
-    <div class="item">
-      <div class="item-label">行政村(个)</div>
-      <div class="item-value">{{ validateNum(analysisData.villageCount) }}</div>
-    </div>
-    <div class="item">
-      <div class="item-label">面积(km²)</div>
-      <div class="item-value">{{ validateNum(analysisData.areaSize) }}</div>
-    </div>
-    <div class="item">
-      <div class="item-label">常住人口(万)</div>
-      <div class="item-value">{{ validateNum(analysisData.populationSize) }}</div>
-    </div>
-    <div class="item">
-      <div class="item-label">GDP(万元)</div>
-      <div class="item-value">{{ validateNum(analysisData.GDP) }}</div>
-    </div>
-    <div class="flex" style="margin: 20px 0; width: 100%">
-      <el-input v-model="keyword" size="large" style="flex: 1" />
-    </div>
-    <div class="flex">
-      <div v-for="(item, index) in filteredList" :key="index" class="item2">{{ item.name + '(' + item.list.length + ')' }}</div>
+  <div class="menu-content">
+    <div class="gradient-text title">空间分析</div>
+    <div class="analyze-data-container">
+      <div class="item">
+        <div class="item-label">行政镇(个)</div>
+        <div class="item-value">{{ validateNum(analysisData.townCount) }}</div>
+      </div>
+      <div class="item">
+        <div class="item-label">行政村(个)</div>
+        <div class="item-value">{{ validateNum(analysisData.villageCount) }}</div>
+      </div>
+      <div class="item">
+        <div class="item-label">面积(km²)</div>
+        <div class="item-value">{{ validateNum(analysisData.areaSize) }}</div>
+      </div>
+      <div class="item">
+        <div class="item-label">常住人口(万)</div>
+        <div class="item-value">{{ validateNum(analysisData.populationSize) }}</div>
+      </div>
+      <div class="item">
+        <div class="item-label">GDP(万元)</div>
+        <div class="item-value">{{ validateNum(analysisData.GDP) }}</div>
+      </div>
+      <div class="flex" style="margin: 20px 0; width: 100%">
+        <el-input v-model="keyword" size="large" style="flex: 1" />
+      </div>
+      <div class="flex">
+        <div v-for="(item, index) in filteredList" :key="index" class="item2">{{ item.name + '(' + item.list.length + ')' }}</div>
+      </div>
     </div>
   </div>
   <DrawTools @handleAnalysisData="handleAnalysisData" />
@@ -104,6 +106,21 @@ const handleAnalysisData = (data) => {
 </script>
 
 <style lang="scss" scoped>
+.menu-content {
+  width: 1579px;
+  height: 1394px;
+  background: url('@/assets/images/map/rightMenu/content.png') no-repeat;
+  padding: 130px 20px 20px 20px;
+  font-size: 36px;
+  position: relative;
+  color: #000000;
+}
+.title {
+  font-size: 60px;
+  position: absolute;
+  top: 20px;
+  left: 160px;
+}
 .analyze-data-container {
   width: 100%;
   font-size: 16px;

src/views/globalMap/RightMenu/index.vue

@@ -13,7 +13,7 @@
             <div class="gradient-text text">{{ item.name }}</div>
           </div>
         </div>
-        <div :class="menuState.showMenu ? 'right-btn' : 'left-btn'" @click="clickContractMenu"></div>
+        <div v-show="menuState.menuData.length > 0" :class="menuState.showMenu ? 'right-btn' : 'left-btn'" @click="clickContractMenu"></div>
         <div v-show="menuState.menuData.length > 7" class="btn-box">
           <div class="up-btn" @click="clickBtn('up')"></div>
           <div class="down-btn" @click="clickBtn('down')"></div>
@@ -65,7 +65,7 @@ const scrollListRef = ref();
 const menuState = reactive({
   showMenu: false,
   activeIndex: 0,
-  menuData: [{ name: '图层分析', meta: { icon: 'icon1' } }]
+  menuData: []
 });
 
 const activeName = computed(() => {
@@ -127,6 +127,7 @@ defineExpose({ handleMenu, clickContractMenu, updateMenu });
   position: absolute;
   top: 100px;
   right: 0;
+  z-index: 20;
 }
 .expand-btn {
   width: 70px;
@@ -171,7 +172,7 @@ defineExpose({ handleMenu, clickContractMenu, updateMenu });
   .right-btn {
     position: absolute;
     top: 50%;
-    right: -150px;
+    right: -80px;
     transform: translateY(-50%);
     z-index: 2;
   }

src/views/globalMap/index.vue

@@ -119,7 +119,7 @@ const clickMenu = (item) => {
   } else if (item.path === '2') {
     // 打点信息
     addMarkers(item);
-    rightMenuRef.value.handleMenu('图层分析');
+    rightMenuRef.value.updateMenu(item.checked ? '1' : '2', { name: '图层分析', meta: { icon: 'icon1' } });
   }
 };
 // 点击搜索结果，添加标注