大屏适配

src/App.vue

@@ -19,8 +19,8 @@ onMounted(() => {
 });
 </script>
 
-<!--<style>-->
-<!--#app {-->
-<!--  overflow: auto;-->
-<!--}-->
-<!--</style>-->
+<style>
+#app {
+  background-color: #181e24;
+}
+</style>

src/views/emergencyCommandMap/RightSection/JointDuty.vue

@@ -168,12 +168,15 @@ onMounted(() => {
     overflow-y: auto;
     .tr {
       display: flex;
-      width: 1772px;
-      height: 72px;
+      align-items: flex-end;
+      width: 1791px;
+      height: 70px;
+      margin-left: -17px;
+      padding-left: 17px;
       background: url('@/assets/images/emergencyCommandMap/duty/tr.png') no-repeat;
       background-size: 100% 100%;
       font-size: 36px;
-      margin-bottom: 30px;
+      margin-top: 30px;
       padding: 0 50px;
     }
     .td {

src/views/emergencyCommandMap/RightSection/index.vue

@@ -145,7 +145,6 @@ const updatePlan = (data: { eventId: string }) => {
     justify-content: space-around; /* 使按钮在div内均匀分布 */
     align-items: center; /* 使按钮垂直居中 */
     width: 100%;
-    margin-bottom: 62px;
     .task-item {
       display: flex;
       flex-direction: column;

src/views/emergencyCommandMap/index.vue

@@ -1,12 +1,14 @@
 <template>
   <div id="dashboard-container" ref="containerRef" class="dashboard-container">
-    <HeaderSection />
-    <div class="dashboard-content">
-      <LeftSection />
-      <MiddleSection />
-      <RightSection />
+    <div class="bg">
+      <HeaderSection />
+      <div class="dashboard-content">
+        <LeftSection />
+        <MiddleSection />
+        <RightSection />
+      </div>
+      <FooterSection style="position: absolute; bottom: 0; left: 0" />
     </div>
-    <FooterSection style="position: absolute; bottom: 0; left: 0" />
   </div>
 </template>
 
@@ -43,12 +45,17 @@ onUnmounted(() => {
   width: 8960px;
   height: 2560px;
   font-size: 74px;
-  background: url('@/assets/images/bg.jpg') no-repeat 100% 100%;
-  background-size: cover;
   font-family: 'PingFang SC', sans-serif;
-  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  .bg {
+    width: 100%;
+    background: url('@/assets/images/bg.jpg') no-repeat;
+    position: relative;
+  }
   .dashboard-content {
-    padding: 0 81px;
+    padding: 0 81px 150px;
     display: flex;
     height: calc(2560px - 228px - 150px);
     overflow: hidden;

src/views/globalMap/RightMenu/LayerAnalysis.vue

@@ -1,18 +1,20 @@
 <template>
-  <div class="gradient-text title">图层分析</div>
-  <div class="box">
-    <div v-for="(item, index) in dataList" :key="index" :class="item.checked ? 'box-item box-item-active' : 'box-item'" @click="handleClick(item)">
-      <div class="text1">{{ item.name }}</div>
-      <div class="text2">{{ item.value }}</div>
+  <div class="menu-content">
+    <div class="gradient-text title">图层分析</div>
+    <div class="box">
+      <div v-for="(item, index) in dataList" :key="index" :class="item.checked ? 'box-item box-item-active' : 'box-item'" @click="handleClick(item)">
+        <div class="text1">{{ item.name }}</div>
+        <div class="text2">{{ item.value }}</div>
+      </div>
+    </div>
+    <div class="box2">
+      <div class="box2-title">各区县分布统计</div>
+      <Chart :option="chartOption1" style="width: 1200px; height: 370px" />
+    </div>
+    <div class="box2">
+      <div class="box2-title">类型统计</div>
+      <Chart :option="chartOption2" style="width: 100%; height: 422px; margin-top: 60px;" />
     </div>
-  </div>
-  <div class="box2">
-    <div class="box2-title">各区县分布统计</div>
-    <Chart :option="chartOption1" style="width: 1200px; height: 370px" />
-  </div>
-  <div class="box2">
-    <div class="box2-title">类型统计</div>
-    <Chart :option="chartOption2" style="width: 100%; height: 422px; margin-top: 60px;" />
   </div>
 </template>
 
@@ -174,6 +176,14 @@ const handleClick = (item) => {
 </script>
 
 <style lang="scss" scoped>
+.menu-content {
+  width: 1580px;
+  height: 2080px;
+  background: url('@/assets/images/map/rightMenu/LayerAnalysis/dialog.png') no-repeat;
+  padding: 130px 20px 20px 130px;
+  font-size: 36px;
+  position: relative;
+}
 .title {
   font-size: 60px;
   position: absolute;

src/views/globalMap/RightMenu/RainMonitor.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="container">
+    <div class="gradient-text title">雨情监控</div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+
+</script>
+
+<style lang="scss" scoped>
+.title {
+  font-size: 60px;
+  position: absolute;
+  top: 12px;
+  left: 210px;
+}
+</style>

src/views/globalMap/RightMenu/index.vue

@@ -19,7 +19,7 @@
           <div class="down-btn" @click="clickBtn('down')"></div>
         </div>
       </div>
-      <div v-show="menuState.showMenu" class="menu-content">
+      <div v-show="menuState.showMenu">
         <!--图层分析-->
         <LayerAnalysis v-if="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '图层分析'" :pointType="pointType" />
         <!--空间分析-->
@@ -36,6 +36,8 @@
         <UAV v-if="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '无人机'" />
         <!--实时标绘-->
         <OnlinePlotting v-if="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '实时标绘'" />
+        <!--雨情监测-->
+        <RainMonitor v-if="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '雨情监测'" />
       </div>
     </div>
   </div>
@@ -51,6 +53,7 @@ import LayerAnalysis from '@/views/globalMap/RightMenu/LayerAnalysis.vue';
 import OnlinePlotting from '@/views/globalMap/RightMenu/OnlinePlotting.vue';
 import UAV from './UAV.vue';
 import { PointType } from '@/api/globalMap/type';
+import RainMonitor from '@/views/globalMap/RightMenu/RainMonitor.vue';
 
 interface Props {
   pointType: PointType[];
@@ -203,14 +206,6 @@ defineExpose({ handleMenu, clickContractMenu, updateMenu });
       cursor: pointer;
     }
   }
-  .menu-content {
-    width: 1643px;
-    height: 1369px;
-    background: url('@/assets/images/map/rightMenu/content.png') no-repeat;
-    padding: 130px 20px 20px 130px;
-    font-size: 36px;
-    position: relative;
-  }
 }
 .icon1 {
   width: 99px;

src/views/globalMapPage/index.vue

@@ -1,6 +1,6 @@
 <template>
-  <div id="dashboard-container" ref="containerRef">
-    <div class="dashboard-container">
+  <div id="dashboard-container" class="dashboard-container" ref="containerRef">
+    <div class="bg">
       <HeaderSection />
       <div class="dashboard-content">
         <GlobalMap width="8798" height="2182" />
@@ -42,14 +42,20 @@ onUnmounted(() => {
   width: 8960px;
   height: 2560px;
   font-size: 74px;
-  background: url('@/assets/images/bg.jpg') no-repeat 100% 100%;
-  background-size: cover;
   font-family: 'PingFang SC', sans-serif;
   position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  .bg {
+    width: 100%;
+    background: url('@/assets/images/bg.jpg') no-repeat;
+    position: relative;
+  }
   .dashboard-content {
     padding: 0 81px;
     display: flex;
-    height: calc(2560px - 228px - 150px);
+    height: calc(2560px - 228px);
     overflow: hidden;
   }
 }

src/views/routineCommandMap/LeftSection.vue

@@ -221,7 +221,7 @@ onMounted(() => {
 <style lang="scss" scoped>
 .left-section {
   width: 2400px;
-  height: calc(2560px - 345px);
+  height: 100%;
   display: flex;
   flex-direction: column;
   font-size: 74px;

src/views/routineCommandMap/MiddleSection.vue

@@ -4,7 +4,7 @@
       <el-button type="primary" @click="handleQuery1" :disabled="true">备战防御</el-button>
       <el-button type="primary" @click="handleQuery2">指挥调度</el-button>
     </div>
-    <company-map v-model:visible="mapDialogVisible" @change="handleMapChange" />
+    <PositionMap id="positionMap" v-model:visible="mapDialogVisible" @change="handleMapChange" />
     <GlobalMap is-component width="3894" height="2140" />
   </div>
 </template>
@@ -13,7 +13,7 @@
 import GlobalMap from '../globalMap/index.vue';
 import { ref } from 'vue';
 // import Dialog from "@/components/Dialog/index2.vue";
-import CompanyMap from './company-map.vue';
+import PositionMap from './PositionMap.vue';
 
 const form = ref({
   eventId: '',

src/views/routineCommandMap/company-map.vue → src/views/routineCommandMap/PositionMap.vue

@@ -24,7 +24,7 @@
             </el-form-item>
           </el-form>
           <div ref="containerRef" class="map_box">
-            <div id="map" class="map" :style="{ width: width, height: height }"></div>
+            <div id="map" class="map"></div>
             <div class="search">
               <!-- @input="handleInput(0)" -->
               <el-input v-model="location" placeholder="请输入地址" />
@@ -74,7 +74,7 @@
   </div>
 </template>
 
-<script setup>
+<script setup name="PositionMap">
 import AMapLoader from '@amap/amap-jsapi-loader';
 import { useRouter } from 'vue-router';
 import { updateEventLocation, addEvent } from '@/api/emergencyCommandMap/JointDuty';

src/views/routineCommandMap/RightSection/index.vue

@@ -119,7 +119,7 @@ onMounted(() => {
 <style lang="scss" scoped>
 .right-section {
   width: 2400px;
-  height: calc(2560px - 345px);
+  height: 100%;
   display: flex;
   flex-direction: column;
   font-size: 74px;

src/views/routineCommandMap/index.vue

@@ -1,10 +1,13 @@
 <template>
   <div id="dashboard-container" ref="containerRef" class="dashboard-container">
-    <HeaderSection />
-    <div class="dashboard-content">
-      <LeftSection />
-      <MiddleSection />
-      <RightSection />
+    <div class="bg">
+      <HeaderSection />
+      <div class="dashboard-content">
+        <LeftSection />
+        <MiddleSection />
+        <RightSection />
+      </div>
+      <FooterSection style="position: absolute; bottom: 0; left: 0" />
     </div>
   </div>
 </template>
@@ -40,14 +43,19 @@ onUnmounted(() => {
 
 <style lang="scss" scoped>
 .dashboard-container {
-  //width: 100%;
-  //height: 100vh;
   width: 8960px;
   height: 2560px;
-  background-color: #030526;
   font-size: 74px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  .bg {
+    width: 100%;
+    background: url('@/assets/images/bg.jpg') no-repeat;
+    position: relative;
+  }
   .dashboard-content {
-    padding: 69px;
+    padding: 60px 81px 150px;
     display: flex;
     height: calc(2560px - 207px);
     overflow: hidden;