提交页面开发

src/views/hydrology/leftPage.vue

@@ -1,12 +1,44 @@
 <template>
-  <div class="xtjc-left-side">
+  <div class="xtjc-left-side" :style="{
+    transform:`scale(${transformNum})`,
+    top:`${transformTop}px`,
+    'margin-left': `${transformLeft}px`
+  }">
     <!-- 雨情监测 -->
     <weatherTitle
   /></div>
 </template>
 
 <script lang="ts" setup>
+import { onMounted, ref } from 'vue';
 import weatherTitle from './components/rainCondition.vue';
+import { useDebounceFn } from '@vueuse/core';
+import eventBus from '/@/utils/eventBus';
+let transformNum = ref(0.8)
+let transformTop = ref(0)
+let transformLeft = ref(-40)
+const getWindowSize = (e) => {
+  let visualHeight = window.innerHeight
+  console.log(visualHeight)
+  // transformNum.value = visualHeight/1080
+  if(visualHeight>911){
+    transformTop.value = 90
+    transformLeft.value = 0
+    transformNum.value = 1
+    eventBus.emit('setWindowRight',2)
+  }else{
+    transformTop.value = 0
+    transformLeft.value = -40
+    transformNum.value = 0.8
+    eventBus.emit('setWindowRight',1)
+  }
+}
+onMounted(() => {
+  window.addEventListener('resize', useDebounceFn(function (event) {
+    getWindowSize(event)
+  }, 300));
+  getWindowSize()
+})
 </script>
 <style lang="less" scoped>
 .xtjc-left-side {

src/views/hydrology/rightPage.vue

@@ -1,14 +1,44 @@
 <template>
-  <div class="xtjc-left-side" v-show="mapStore.rightSideMenu">
+  <div class="xtjc-left-side" v-show="mapStore.rightSideMenu" :style="{
+    transform: `scale(${transformNum})`,
+    top: `${transformTop}px`,
+    'margin-right': `${transformRight}px`
+  }">
     <!-- 水情监测 -->
     <regimen />
   </div>
 </template>
 
 <script lang="ts" setup>
+import { onMounted, ref } from 'vue';
 import regimen from './components/regimen.vue';
 import { useMapStore } from '/@/store/modules/map';
 const mapStore = useMapStore();
+import { useDebounceFn } from '@vueuse/core';
+
+let transformNum = ref(0.8)
+let transformTop = ref(0)
+let transformRight = ref(-40)
+const getWindowSize = (e) => {
+  let visualHeight = window.innerHeight
+  console.log(visualHeight)
+  // transformNum.value = visualHeight/1080
+  if(visualHeight>911){
+    transformTop.value = 90
+    transformRight.value = 0
+    transformNum.value = 1
+  }else{
+    transformTop.value = 0
+    transformRight.value = -40
+    transformNum.value = 0.8
+  }
+}
+onMounted(() => {
+  window.addEventListener('resize', useDebounceFn(function (event) {
+    getWindowSize(event)
+  }, 300));
+  getWindowSize()
+})
 </script>
 <style lang="less" scoped>
 .xtjc-left-side {

src/views/map/changeMap.vue

@@ -1,7 +1,10 @@
 <template>
   <div>
-    <div class="toolmap">
-      <div @click="setClass(0)" @mouseover="getTip('面雨量分布图')" @mouseout="closetip" :class="bkclick[0] ? 'divclick' : ''">
+    <div class="toolmap" :style="{
+      right: `${windowRight}px`
+    }">
+      <div @click="setClass(0)" @mouseover="getTip('面雨量分布图')" @mouseout="closetip"
+        :class="bkclick[0] ? 'divclick' : ''">
         <img src="../../assets/images/changeMap/mianyuliang.png" />
       </div>
       <div @click="setClass(1)" @mouseover="getTip('站点雨量图')" @mouseout="closetip" :class="bkclick[1] ? 'divclick' : ''">
@@ -13,7 +16,8 @@
       <div @click="setClass(3)" @mouseover="getTip('站点温度图')" @mouseout="closetip" :class="bkclick[3] ? 'divclick' : ''">
         <img src="../../assets/images/changeMap/wendu.png" />
       </div>
-      <div @click="setClass(4)" @mouseover="getTip('站点风速风向图')" @mouseout="closetip" :class="bkclick[4] ? 'divclick' : ''">
+      <div @click="setClass(4)" @mouseover="getTip('站点风速风向图')" @mouseout="closetip"
+        :class="bkclick[4] ? 'divclick' : ''">
         <img src="../../assets/images/changeMap/feng.png" />
       </div>
     </div>
@@ -22,8 +26,7 @@
     </div>
     <div class="head-span" v-if="headInfoShow">
       <div style="font-size: 24px; font-weight: bold; color: #fff; text-align: center">{{ headInfo }} </div>
-      <div
-        style="
+      <div style="
           color: #ffffff;
           font-size: 16px;
           font-weight: bold;
@@ -32,16 +35,16 @@
           height: 30px;
           line-height: 30px;
           position: relative;
-        "
-        v-if="searchID != 3 && searchID != 4"
-      >
-        <a-date-picker v-model:value="startData" :allowClear="false" format="MM月DD日" valueFormat="YYYY-MM-DD" :disabled-date="disabledDate" />
+        " v-if="searchID != 3 && searchID != 4">
+        <a-date-picker v-model:value="startData" :allowClear="false" format="MM月DD日" valueFormat="YYYY-MM-DD"
+          :disabled-date="disabledDate" />
         <div class="sanjiao-box">
           <div class="sanjiao-btn" @click="lastDay"> </div>
           <div class="sanjiao-btn2" @click="nextDay"> </div>
         </div>
 
-        <TimePicker v-model:value="startTime" format="H时" valueFormat="HH" :allowClear="false" @change="changeTime" :disabledHours="disabledHour" />
+        <TimePicker v-model:value="startTime" format="H时" valueFormat="HH" :allowClear="false" @change="changeTime"
+          :disabledHours="disabledHour" />
 
         <div class="sanjiao-box">
           <div class="sanjiao-btn" @click="lastTime"> </div>
@@ -49,14 +52,16 @@
         </div>
         <span style="margin-right: 20px">至</span>
 
-        <a-date-picker v-model:value="endData" :allowClear="false" :disabled-date="disabledDate2" format="MM月DD日" valueFormat="YYYY-MM-DD" />
+        <a-date-picker v-model:value="endData" :allowClear="false" :disabled-date="disabledDate2" format="MM月DD日"
+          valueFormat="YYYY-MM-DD" />
 
         <div class="sanjiao-box">
           <div class="sanjiao-btn" @click="lastDay2"> </div>
           <div class="sanjiao-btn2" @click="nextDay2"> </div>
         </div>
 
-        <TimePicker v-model:value="endTime" format="H时" valueFormat="HH" :allowClear="false" :disabledHours="disabledHour2" />
+        <TimePicker v-model:value="endTime" format="H时" valueFormat="HH" :allowClear="false"
+          :disabledHours="disabledHour2" />
 
         <div class="sanjiao-box">
           <div class="sanjiao-btn" @click="lastTime2"> </div>
@@ -64,8 +69,7 @@
         </div>
         <img src="../../assets/images/changeMap/checktime.png" style="display: inline-block" @click="search" />
       </div>
-      <div
-        style="
+      <div style="
           color: #ffffff;
           font-size: 16px;
           font-weight: bold;
@@ -74,9 +78,7 @@
           height: 30px;
           line-height: 30px;
           position: relative;
-        "
-        v-if="searchID == 3 || searchID == 4"
-      >
+        " v-if="searchID == 3 || searchID == 4">
         <a-date-picker v-model:value="endData" :allowClear="false" format="MM月DD日" valueFormat="YYYY-MM-DD" />
         <div class="sanjiao-box">
           <div class="sanjiao-btn" @click="lastDay3"> </div>
@@ -117,7 +119,14 @@ import { TimePicker } from 'ant-design-vue';
 import eventBus from '/@/utils/eventBus';
 import { useMapStore } from '/@/store/modules/map';
 import { getColorVal, getWdColorVal } from '/@/utils/getcolor.js';
-
+let windowRight = ref(350)
+eventBus.on('setWindowRight', (e) => {
+  if(e == 1){
+    windowRight.value = 350
+  }else{
+    windowRight.value = 450
+  }
+});
 const mapStore = useMapStore();
 const emit = defineEmits(['changeMap']);
 const bkclick = reactive([false, false, false, false, false]);
@@ -134,8 +143,8 @@ const rainLegendNow2 = ref();
 eventBus.on('rainLegend2', (e) => {
   let colors = [];
   if (Number(e.max) > 0.5) {
-    let level1=Number(((e.max-0.5)/3 +0.5).toFixed(2)) 
-        let level2= Number((((e.max-0.5)/3)*2 +0.5).toFixed(2))
+    let level1 = Number(((e.max - 0.5) / 3 + 0.5).toFixed(2))
+    let level2 = Number((((e.max - 0.5) / 3) * 2 + 0.5).toFixed(2))
     colors = [
       {
         style: 'background:#7d8fbb',
@@ -558,15 +567,18 @@ const closetip = () => {
   justify-content: space-between;
   flex-direction: column;
   align-items: center;
+
   div {
     width: 100%;
     text-align: center;
+
     img {
       display: inline-block;
       width: 20px;
       height: 20px;
     }
   }
+
   .line {
     width: 20px;
     height: 1px;
@@ -577,9 +589,11 @@ const closetip = () => {
     border-image: linear-gradient(90deg, rgba(42, 207, 240, 0) 0%, #27ceef 52%, rgba(49, 209, 240, 0) 100%);
   }
 }
+
 .divclick {
   background: #103357;
 }
+
 .hover-info {
   position: absolute;
   width: 120px;
@@ -598,6 +612,7 @@ const closetip = () => {
   color: #ffffff;
   z-index: 11;
 }
+
 .head-span {
   width: 427px;
   height: 92px;
@@ -613,11 +628,13 @@ const closetip = () => {
   padding: 6px 10px;
   box-sizing: border-box;
 }
+
 .sanjiao-box {
   display: inline-block;
   height: 20px;
   margin-right: 15px;
   margin-left: 4px;
+
   .sanjiao-btn {
     width: 0;
     height: 0;
@@ -629,6 +646,7 @@ const closetip = () => {
 
     cursor: pointer;
   }
+
   .sanjiao-btn2 {
     width: 0;
     height: 0;
@@ -638,6 +656,7 @@ const closetip = () => {
     cursor: pointer;
   }
 }
+
 :deep(.ant-input) {
   padding: 0;
   border: none;
@@ -646,6 +665,7 @@ const closetip = () => {
   font-size: 16px;
   font-weight: bold;
 }
+
 :deep(.ant-time-picker) {
   padding: 0;
   border: none;
@@ -654,18 +674,22 @@ const closetip = () => {
   font-size: 16px;
   font-weight: bold;
 }
+
 :deep(.ant-time-picker-input.ant-input) {
   width: 35px !important;
 }
+
 :deep(.ant-time-picker-icon) {
   visibility: hidden;
 }
+
 .class-legend {
   position: absolute;
   left: 470px;
   bottom: 50px;
   z-index: 10;
   box-shadow: 5px rgba(53, 53, 52, 0.5);
+
   div {
     min-width: 50px;
     height: 25px;
@@ -675,12 +699,14 @@ const closetip = () => {
     padding: 0 4px;
   }
 }
+
 .class-legendtwo {
   position: absolute;
   left: 470px;
   bottom: 50px;
   z-index: 10;
   box-shadow: 5px rgba(53, 53, 52, 0.5);
+
   div {
     min-width: 50px;
     height: 25px;
@@ -688,7 +714,8 @@ const closetip = () => {
     text-align: center;
     color: #222;
   }
-  & > div:last-child {
+
+  &>div:last-child {
     border-radius: 0 0 25px 25px;
   }
 }

src/views/map/toolBox.vue

@@ -5,7 +5,9 @@
 -->
 <template>
   <div>
-    <div class="toolBox">
+    <div class="toolBox" :style="{
+      right: `${windowRight}px`
+    }">
       <div @click="setClass(0)" @mouseover="getTip('初始范围')" @mouseout="closetip" :class="bkclick[0] ? 'divclick' : ''">
         <img src="../../assets/images/toolBox/reset.png" />
       </div>
@@ -31,8 +33,8 @@
         <img src="../../assets/images/toolBox/shoucang.png" />
       </div>
       <div @click="setClass(8)" @mouseover="getTip('重要测站监测信息')" @mouseout="closetip" :class="bkclick[8] ? '' : ''">
-        <img src="../../assets/images/toolBox/open-impoint.png" v-if="!bkclick[8]"/>
-        <img src="../../assets/images/toolBox/close-impoint.png" v-if="bkclick[8]"/>
+        <img src="../../assets/images/toolBox/open-impoint.png" v-if="!bkclick[8]" />
+        <img src="../../assets/images/toolBox/close-impoint.png" v-if="bkclick[8]" />
       </div>
       <div @click="setClass(7)" @mouseover="getTip('面板收起')" @mouseout="closetip" :class="bkclick[7] ? 'divclick' : ''">
         <img src="../../assets/images/toolBox/souqi.png" />
@@ -134,6 +136,14 @@ export default defineComponent({
   name: 'ToolMenu',
   components: { tailBaseLine, mapControl, wander, CloseOutlined, searchInfo, showDrainage, Draw, layerControl },
   setup() {
+    let windowRight = ref(350)
+    eventBus.on('setWindowRight', (e) => {
+      if (e == 1) {
+        windowRight.value = 350
+      } else {
+        windowRight.value = 450
+      }
+    });
     const data = reactive({
       searchValue: ref(''),
       dialogVisible: ref(false),
@@ -356,7 +366,8 @@ export default defineComponent({
       showScreenshot,
       measure,
       remove,
-      sideMenu
+      sideMenu,
+      windowRight
     };
   },
 
@@ -438,7 +449,7 @@ export default defineComponent({
       layerList: [],
       addDoubleScreen: false,
       //
-      bkclick: [false, false, false, false, false, false, false, false,false],
+      bkclick: [false, false, false, false, false, false, false, false, false],
       info: '',
       infoShow: false,
       px: '',
@@ -472,7 +483,7 @@ export default defineComponent({
     },
     setClass(i) {
       this.bkclick.forEach((item, index) => {
-        if (i !== 0 && i !== 5 && i !== 3&& i !== 4) {
+        if (i !== 0 && i !== 5 && i !== 3 && i !== 4) {
           if (i === index) {
             this.bkclick[i] = !this.bkclick[i];
           } else {
@@ -488,40 +499,40 @@ export default defineComponent({
         this.controlModel(this.modelType.basinStatus);
       } else if (i == 0) {
         this.flyHome();
-        if(window.breathMarker){
-                window.breathMarker.update()
-                window.breathMarker.breathe()
-                window.breathMarker=null
-              }
+        if (window.breathMarker) {
+          window.breathMarker.update()
+          window.breathMarker.breathe()
+          window.breathMarker = null
+        }
       } else if (i == 5) {
         this.mapScreenshot();
       } else if (i == 3) {
         // if (this.bkclick[3]) {
-          this.measure('measure_length');
+        this.measure('measure_length');
         // } else {
         //   // 清除
         //   this.remove();
         // }
       } else if (i == 4) {
         // if (this.bkclick[4]) {
-          this.measure('measure_area');
+        this.measure('measure_area');
         // } else {
         //   // 清除
         //   this.remove();
         // }
       } else if (i == 7) {
         this.sideMenu()
-      }else if (i == 8) {
+      } else if (i == 8) {
         // 控制重要站点显隐
-        window.impointNotShow=this.bkclick[8]
-       if(this.bkclick[8]){
-        // 关闭
-        window.clearImpoint()
-       }else{
-        //显示
-        window.impointFlag=true
-        window.getImportSites()
-       }
+        window.impointNotShow = this.bkclick[8]
+        if (this.bkclick[8]) {
+          // 关闭
+          window.clearImpoint()
+        } else {
+          //显示
+          window.impointFlag = true
+          window.getImportSites()
+        }
       }
     },
     getTip(i) {
@@ -544,7 +555,7 @@ export default defineComponent({
           this.px = ' right: 500px;top: 710px;';
         } else if (i == '面板收起') {
           this.px = ' right: 500px;top: 750px;';
-        }else if(i=='重要测站监测信息'){
+        } else if (i == '重要测站监测信息') {
           this.px = ' right: 500px;top: 730px;';
         }
       } else {
@@ -564,7 +575,7 @@ export default defineComponent({
           this.px = ' right: 70px;top: 710px;';
         } else if (i == '面板收起') {
           this.px = ' right: 70px;top: 750px;';
-        }else if(i=='重要测站监测信息'){
+        } else if (i == '重要测站监测信息') {
           this.px = ' right: 70px;top: 730px;';
         }
       }
@@ -1019,7 +1030,7 @@ checkbox-group .checkbox {
 //
 .toolBox {
   position: absolute;
-  right: 450px; 
+  right: 450px;
   top: 540px;
   width: 36px;
   min-height: 230px;

src/views/meteorological/leftPage.vue

@@ -1,5 +1,9 @@
 <template>
-  <div class="xtjc-left-side">
+  <div class="xtjc-left-side" :style="{
+    transform:`scale(${transformNum})`,
+    top:`${transformTop}px`,
+    'margin-left': `${transformLeft}px`
+  }">
     <!-- 气象监测 -->
     <monitor />
     <!-- 近24小时气象监测站过程线 -->
@@ -8,8 +12,36 @@
 </template>
 
 <script lang="ts" setup>
+import { onMounted, ref } from 'vue';
 import monitor from './components/monitor.vue';
 import monitorEcharts from './components/monitorEcharts.vue';
+import { useDebounceFn } from '@vueuse/core';
+import eventBus from '/@/utils/eventBus';
+let transformNum = ref(0.8)
+let transformTop = ref(0)
+let transformLeft = ref(-40)
+const getWindowSize = (e) => {
+  let visualHeight = window.innerHeight
+  console.log(visualHeight)
+  // transformNum.value = visualHeight/1080
+  if(visualHeight>911){
+    transformTop.value = 90
+    transformLeft.value = 0
+    transformNum.value = 1
+    eventBus.emit('setWindowRight',2)
+  }else{
+    transformTop.value = 0
+    transformLeft.value = -40
+    transformNum.value = 0.8
+    eventBus.emit('setWindowRight',1)
+  }
+}
+onMounted(() => {
+  window.addEventListener('resize', useDebounceFn(function (event) {
+    getWindowSize(event)
+  }, 300));
+  getWindowSize()
+})
 </script>
 <style lang="less" scoped>
 .xtjc-left-side {

src/views/meteorological/rightPage.vue

@@ -1,5 +1,9 @@
 <template>
-  <div class="xtjc-left-side" v-show="mapStore.rightSideMenu">
+  <div class="xtjc-left-side" v-show="mapStore.rightSideMenu" :style="{
+    transform: `scale(${transformNum})`,
+    top: `${transformTop}px`,
+    'margin-right': `${transformRight}px`
+  }">
     <!-- 气象一览 -->
     <!-- <meteorologicalOverview :oneHourPrecipitation="rainLiveImg.rainLiveImgData['hourly-precipitation']" /> -->
     <meteorologicalOverview />
@@ -11,12 +15,13 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, reactive } from 'vue';
+import { onMounted, reactive, ref } from 'vue';
 import meteorologicalOverview from './components/meteorologicalOverview.vue';
 import nephogram from './components/nephogram.vue';
 import radar from './components/radar.vue';
 import { useMapStore } from '/@/store/modules/map';
 import { getRainLiveImg } from '/@/api/swHome/index';
+import { useDebounceFn } from '@vueuse/core';
 import eventBus from '/@/utils/eventBus';
 eventBus.on('metRefreshName', () => {
   getRainLiveImgData();
@@ -38,9 +43,31 @@ function getRainLiveImgData() {
     eventBus.emit('onHourRadar', res.data['Radar_xz_linzhi']);
   });
 }
+let transformNum = ref(0.8)
+let transformTop = ref(0)
+let transformRight = ref(-40)
+const getWindowSize = (e) => {
+  let visualHeight = window.innerHeight
+  console.log(visualHeight)
+  // transformNum.value = visualHeight/1080
+  if(visualHeight>911){
+    transformTop.value = 90
+    transformRight.value = 0
+    transformNum.value = 1
+  }else{
+    transformTop.value = 0
+    transformRight.value = -40
+    transformNum.value = 0.8
+  }
+}
 onMounted(() => {
+  window.addEventListener('resize', useDebounceFn(function (event) {
+    getWindowSize(event)
+  }, 300));
   getRainLiveImgData();
+  getWindowSize()
 });
+
 </script>
 <style lang="less" scoped>
 .xtjc-left-side {

src/views/prediction/components/predictionA.vue

@@ -70,7 +70,8 @@ function echarts1() {
         for (var i = 0, l = params.length; i < l; i++) {
             console.log('tooltip数据值',params[i].value)
             //遍历出来的值一般是字符串，需要转换成数字，再进项tiFixed四舍五入
-            relVal += '<br/>' + params[i].marker + params[i].seriesName + ' : ' + Number(params[i].value)
+            // relVal += '<br/>' + params[i].marker + params[i].seriesName + ' : ' + params[i].value == '--'? Number(params[i].value) : params[i].value
+            relVal += `<br/>${params[i].marker}${params[i].seriesName} : ${params[i].value == '--' ? params[i].value : Number(params[i].value)}`
         }
         return relVal;
       },

src/views/prediction/leftPage.vue

@@ -1,5 +1,9 @@
 <template>
-  <div class="xtjc-left-side">
+  <div class="xtjc-left-side" :style="{
+    transform:`scale(${transformNum})`,
+    top:`${transformTop}px`,
+    'margin-left': `${transformLeft}px`
+  }">
     <!-- 预报A -->
     <predictionA
       v-if="prediction.predictionAData.name.length > 0"
@@ -19,9 +23,10 @@
 </template>
 
 <script lang="ts" setup>
-import { reactive, onMounted } from 'vue';
+import { reactive, onMounted, ref } from 'vue';
 import predictionA from './components/predictionA.vue';
 import eventBus from '/@/utils/eventBus';
+import { useDebounceFn } from '@vueuse/core';
 let pageTitle = reactive({
   titleText: '雨洪对照图',
   pageTitle: '',
@@ -90,6 +95,33 @@ eventBus.on('stormFlood', (e) => {
   setPredictionAData(e);
   setPredictionBData(e);
 });
+
+let transformNum = ref(0.8)
+let transformTop = ref(0)
+let transformLeft = ref(-40)
+const getWindowSize = (e) => {
+  let visualHeight = window.innerHeight
+  console.log(visualHeight)
+  // transformNum.value = visualHeight/1080
+  if(visualHeight>911){
+    transformTop.value = 90
+    transformLeft.value = 0
+    transformNum.value = 1
+    eventBus.emit('setWindowRight',2)
+  }else{
+    transformTop.value = 0
+    transformLeft.value = -40
+    transformNum.value = 0.8
+    eventBus.emit('setWindowRight',1)
+  }
+}
+
+onMounted(() => {
+  window.addEventListener('resize', useDebounceFn(function (event) {
+    getWindowSize(event)
+  }, 300));
+  getWindowSize()
+})
 </script>
 <style lang="less" scoped>
 .xtjc-left-side {

src/views/prediction/rightPage.vue

@@ -1,5 +1,9 @@
 <template>
-  <div class="xtjc-left-side" v-show="mapStore.rightSideMenu">
+  <div class="xtjc-left-side" v-show="mapStore.rightSideMenu" :style="{
+    transform: `scale(${transformNum})`,
+    top: `${transformTop}px`,
+    'margin-right': `${transformRight}px`
+  }">
     <!-- 预报A -->
     <predictionA
       v-if="prediction.predictionAData.name.length > 0"
@@ -19,11 +23,12 @@
 </template>
 
 <script lang="ts" setup>
-import { reactive } from 'vue';
+import { reactive,onMounted, ref  } from 'vue';
 import { useMapStore } from '/@/store/modules/map';
 const mapStore = useMapStore();
 import predictionA from './components/predictionA.vue';
 import eventBus from '/@/utils/eventBus';
+import { useDebounceFn } from '@vueuse/core';
 let pageTitle = reactive({
   titleText: '雨洪对照图',
   pageTitle: '',
@@ -92,6 +97,29 @@ eventBus.on('stormFlood', (e) => {
   setPredictionAData(e);
   setPredictionBData(e);
 });
+let transformNum = ref(0.8)
+let transformTop = ref(0)
+let transformRight = ref(-40)
+const getWindowSize = (e) => {
+  let visualHeight = window.innerHeight
+  console.log(visualHeight)
+  // transformNum.value = visualHeight/1080
+  if(visualHeight>911){
+    transformTop.value = 90
+    transformRight.value = 0
+    transformNum.value = 1
+  }else{
+    transformTop.value = 0
+    transformRight.value = -40
+    transformNum.value = 0.8
+  }
+}
+onMounted(() => {
+  window.addEventListener('resize', useDebounceFn(function (event) {
+    getWindowSize(event)
+  }, 300));
+  getWindowSize()
+})
 </script>
 <style lang="less" scoped>
 .xtjc-left-side {

src/views/weatherHome/Leaf.vue

@@ -4,7 +4,11 @@
  * @Descripttion: 
 -->
 <template>
-  <div class="xtjc-left-side">
+  <div class="xtjc-left-side" :style="{
+    transform:`scale(${transformNum})`,
+    top:`${transformTop}px`,
+    'margin-left': `${transformLeft}px`
+  }">
     <!-- 测站统计 -->
     <stationStatistics />
     <rainCondition />
@@ -12,10 +16,37 @@
 </template>
 
 <script lang="ts" setup>
-// import {  } from 'vue';
+import { onMounted, ref } from 'vue';
 // 测站统计组件
 import stationStatistics from './components/stationStatistics.vue';
 import rainCondition from './components/rainCondition.vue';
+import { useDebounceFn } from '@vueuse/core';
+import eventBus from '/@/utils/eventBus';
+let transformNum = ref(0.8)
+let transformTop = ref(0)
+let transformLeft = ref(-40)
+const getWindowSize = (e) => {
+  let visualHeight = window.innerHeight
+  console.log(visualHeight)
+  // transformNum.value = visualHeight/1080
+  if(visualHeight>911){
+    transformTop.value = 90
+    transformLeft.value = 0
+    transformNum.value = 1
+    eventBus.emit('setWindowRight',2)
+  }else{
+    transformTop.value = 0
+    transformLeft.value = -40
+    transformNum.value = 0.8
+    eventBus.emit('setWindowRight',1)
+  }
+}
+onMounted(() => {
+  window.addEventListener('resize', useDebounceFn(function (event) {
+    getWindowSize(event)
+  }, 300));
+  getWindowSize()
+})
 </script>
 <style lang="less" scoped>
 .xtjc-left-side {

src/views/weatherHome/TotalStatis.vue

@@ -4,7 +4,11 @@
  * @Descripttion:
 -->
 <template>
-  <div class="xtjc-left-side" v-show="mapStore.rightSideMenu">
+  <div class="xtjc-left-side" v-show="mapStore.rightSideMenu" :style="{
+    transform: `scale(${transformNum})`,
+    top: `${transformTop}px`,
+    'margin-right': `${transformRight}px`
+  }">
     <!-- 实时告警 -->
     <alarm />
     <!-- 水位信息 -->
@@ -13,10 +17,36 @@
 </template>
 
 <script lang="ts" setup>
+import { onMounted, ref } from 'vue';
 import { useMapStore } from '/@/store/modules/map';
 import alarm from './components/alarm.vue';
 import qxWater from './components/qxWater.vue';
+import { useDebounceFn } from '@vueuse/core';
 const mapStore = useMapStore();
+
+let transformNum = ref(0.8)
+let transformTop = ref(0)
+let transformRight = ref(-40)
+const getWindowSize = (e) => {
+  let visualHeight = window.innerHeight
+  console.log(visualHeight)
+  // transformNum.value = visualHeight/1080
+  if(visualHeight>911){
+    transformTop.value = 90
+    transformRight.value = 0
+    transformNum.value = 1
+  }else{
+    transformTop.value = 0
+    transformRight.value = -40
+    transformNum.value = 0.8
+  }
+}
+onMounted(() => {
+  window.addEventListener('resize', useDebounceFn(function (event) {
+    getWindowSize(event)
+  }, 300));
+  getWindowSize()
+})
 </script>
 
 <style lang="less" scoped>
@@ -24,40 +54,50 @@ const mapStore = useMapStore();
   font-family: 'AgencyFB';
   src: url('../../assets/font/AgencyFB-Bold.ttf');
 }
+
 @font-face {
   font-family: 'AlimamaShuHeiTi';
   src: url('../../assets/font/AlimamaShuHeiTi-Bold.ttf');
 }
+
 .xtjc-left-side {
   animation-name: move;
   animation-duration: 0.5s;
   animation-fill-mode: forwards;
 }
+
 @keyframes move {
   0% {
     right: -400px;
   }
+
   100% {
     right: 20px;
   }
 }
+
 ::v-deep .ant-tabs-bar {
   border-bottom: 0px solid #303030 !important;
 }
+
 ::v-deep .ant-tabs-nav .ant-tabs-tab-active {
   // color: #ffe75c !important;
 }
+
 ::v-deep .ant-tabs-nav .ant-tabs-tab-active {
   // background: url('../../assets/images/sjx1.png') no-repeat 0px 10px;
 }
-::v-deep .ant-tabs-nav-animated > div {
+
+::v-deep .ant-tabs-nav-animated>div {
   display: flex;
   justify-content: center;
 }
-::v-deep .ant-tabs-nav-animated > div > div {
+
+::v-deep .ant-tabs-nav-animated>div>div {
   flex: 1;
   text-align: center;
 }
+
 ::v-deep .total3 .ant-tabs-nav .ant-tabs-tab-active {
   // background: url('../../assets/images/sjx1.png') no-repeat 42px 9px;
   background: url('../../assets/images/tab.png') no-repeat;
@@ -77,23 +117,28 @@ const mapStore = useMapStore();
   // margin: 10px 15px;
   background: url('../../assets/images/tab-背景.png') no-repeat;
 }
+
 ::v-deep span.anticon.anticon-caret-right svg path {
   box-shadow: 0 0 10px 5px yellow;
   background: linear-gradient(to right, yellow, #fff);
 }
+
 ::v-deep .ant-tabs-nav .ant-tabs-tab {
   margin-left: -10px;
   // margin-right: 0px;
   padding: 6px 10px 4px 26px;
 }
+
 .bjj {
   display: flex;
   justify-content: space-evenly;
   margin-top: 10px;
 }
+
 .bjj li {
   display: inline-block;
 }
+
 .bjj li span {
   display: block;
   width: 65px;
@@ -109,21 +154,25 @@ const mapStore = useMapStore();
   font-weight: bold;
   font-style: italic;
 }
+
 .bjj li:nth-child(2) span {
   background: url('../../assets/images/yjn-03.png') no-repeat;
   background-size: 65px 65px;
   background-position: 3px 0px;
 }
+
 .bjj li:nth-child(3) span {
   background: url('../../assets/images/yjn-02.png') no-repeat;
   background-size: 65px 65px;
   background-position: 3px 0px;
 }
+
 .bjj li:nth-child(4) span {
   background: url('../../assets/images/yjn-01.png') no-repeat;
   background-size: 65px 65px;
   background-position: 3px 0px;
 }
+
 .bjj li b {
   color: #fff;
   width: 56px;
@@ -133,34 +182,41 @@ const mapStore = useMapStore();
   font-family: 'AlimamaShuHeiTi';
   margin-left: 7px;
 }
+
 ::v-deep .ant-tabs-ink-bar {
   visibility: hidden;
 }
 
-::v-deep .ant-tabs-top > .ant-tabs-nav::before,
-.ant-tabs-bottom > .ant-tabs-nav::before,
-.ant-tabs-top > div > .ant-tabs-nav::before,
-.ant-tabs-bottom > div > .ant-tabs-nav::before {
+::v-deep .ant-tabs-top>.ant-tabs-nav::before,
+.ant-tabs-bottom>.ant-tabs-nav::before,
+.ant-tabs-top>div>.ant-tabs-nav::before,
+.ant-tabs-bottom>div>.ant-tabs-nav::before {
   border-bottom: 0px;
 }
+
 ::v-deep .ant-tabs {
   color: #69aeec !important;
 }
+
 ::v-deep .ant-tabs-nav .ant-tabs-tab-active {
   color: #fff !important;
 }
+
 ::v-deep .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
   // color: #ffe75c;
 }
+
 ::v-deep .ant-tabs-tab {
   // font-size: 18px;
   // font-weight: bold;
   font-size: 16px;
   font-weight: normal !important;
 }
+
 .ant-tabs-tab-active {
   // background-color: yellow;
 }
+
 .tab-content {
   display: flex;
   align-items: center;
@@ -176,10 +232,12 @@ const mapStore = useMapStore();
 .text {
   color: #333;
 }
-::v-deep .ant-tabs > .ant-tabs-nav .ant-tabs-nav-list,
-.ant-tabs > div > .ant-tabs-nav .ant-tabs-nav-list {
+
+::v-deep .ant-tabs>.ant-tabs-nav .ant-tabs-nav-list,
+.ant-tabs>div>.ant-tabs-nav .ant-tabs-nav-list {
   height: 32px;
 }
+
 .total3 {
   position: relative;
   padding: 15px 20px;
@@ -190,6 +248,7 @@ const mapStore = useMapStore();
   background: rgba(3, 49, 79, 0.4);
   border-image: linear-gradient(to right, #134564, #2eb3ff, #134564) 1;
 }
+
 .total3:before {
   content: '';
   position: absolute;
@@ -202,6 +261,7 @@ const mapStore = useMapStore();
   border-image: linear-gradient(rgba(39, 209, 238, 0.3) 0%, #00d0e3 50%, rgba(255, 255, 255, 0) 99%) 1;
   // background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1),rgba(253, 253, 253, 0.3));
 }
+
 .total3:after {
   content: '';
   position: absolute;
@@ -213,6 +273,7 @@ const mapStore = useMapStore();
   border-radius: 5px;
   border-image: linear-gradient(rgba(39, 209, 238, 0.3) 0%, #00d0e3 50%, rgba(255, 255, 255, 0) 99%) 1;
 }
+
 .xtjc-left-side {
   // position: fixed;
   position: absolute;
@@ -222,6 +283,7 @@ const mapStore = useMapStore();
   width: 400px;
   // height: 100%;
 }
+
 .leafTotal {
   width: 400px;
   height: 47px;
@@ -235,6 +297,7 @@ const mapStore = useMapStore();
   line-height: 38px;
   margin: 0px 0px 5px 0px;
 }
+
 .leafTotal i {
   margin-left: 32px;
   font-family: 'AlimamaShuHeiTi';
@@ -248,6 +311,7 @@ const mapStore = useMapStore();
   //   -webkit-background-clip:text;
   //   -webkit-text-fill-color:transparent;
 }
+
 .leafTotal b {
   font-weight: normal;
   font-size: 15px;
@@ -295,8 +359,10 @@ const mapStore = useMapStore();
   padding-left: 10px;
   // align-items: ;
   align-items: flex-start;
-  align-content: flex-start; /* 添加这行代码 */
+  align-content: flex-start;
+  /* 添加这行代码 */
 }
+
 .total:before {
   content: '';
   position: absolute;
@@ -309,6 +375,7 @@ const mapStore = useMapStore();
   border-image: linear-gradient(rgba(39, 209, 238, 0.3) 0%, #00d0e3 50%, rgba(255, 255, 255, 0) 99%) 1;
   // background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1),rgba(253, 253, 253, 0.3));
 }
+
 .total:after {
   content: '';
   position: absolute;
@@ -326,23 +393,28 @@ const mapStore = useMapStore();
   position: relative;
   padding: 10px 10px 0px 0px;
   position: relative;
+
   .imageItem2 {
     height: 90px;
     width: 100%;
     position: relative;
   }
+
   .imageItem2.active {
     border: 3px solid #04f7fa !important;
   }
+
   /deep/ .ant-image {
     width: 100%;
     height: 100%;
     position: relative;
   }
+
   /deep/ .ant-image-img {
     width: 100%;
     height: 100%;
   }
+
   span {
     position: absolute;
     bottom: 0px;
@@ -353,18 +425,25 @@ const mapStore = useMapStore();
     background: rgba(0, 0, 0, 0.5);
   }
 }
+
 .projectList::-webkit-scrollbar {
-  width: 4px; /* 设置滚动条宽度 */
+  width: 4px;
+  /* 设置滚动条宽度 */
 }
+
 .projectList::-webkit-scrollbar-track {
   /* 设置滚动条背景颜色 */
 }
 
 .projectList::-webkit-scrollbar-thumb {
-  background-color: #007e8f; /* 设置滚动条滑块颜色 */
-  border-radius: 4px; /* 设置滚动条滑块圆角 */
+  background-color: #007e8f;
+  /* 设置滚动条滑块颜色 */
+  border-radius: 4px;
+  /* 设置滚动条滑块圆角 */
 }
+
 .projectList::-webkit-scrollbar-thumb:hover {
-  background-color: #007e8f; /* 设置滚动条滑块在鼠标悬停时的颜色 */
+  background-color: #007e8f;
+  /* 设置滚动条滑块在鼠标悬停时的颜色 */
 }
 </style>