Merge pull request 'feat : 所有图表新增全屏功能' (#315) from dengjie into dev

Reviewed-on: http://git.feashow.cn/clay/tunnel-cloud-web/pulls/315

src/assets/styles/index.scss

@@ -314,7 +314,7 @@ body,
   }
 }
 
-.full-screen-dialog {
+.shrink-screen-dialog {
   width: 2175px !important;
   //width: 100% !important;
   //height: 100% !important;
@@ -452,6 +452,17 @@ body,
   }
 
 }
+.shrink-icon {
+  margin: -36px -20px 0 30px;
+  cursor: pointer;
+  width: 65px;
+  height: 65px;
+  background-image: url("@/assets/images/fanInfo/shrink.png");
+}
+.full-icon {
+  cursor: pointer;
+  margin: -36px -20px 0 30px;
+}
 //弹窗样式
 .digital-tunnel {
   .chat-dialog {
@@ -563,11 +574,15 @@ body,
     background-image: url(@/assets/images/badGasInfo/sp_jz.png);
     transform: rotate(90deg);
   }
-
+.change-screen{
+  position: absolute;
+  right: 126px;
+  top: 50px;
+}
   .time-select {
     position: absolute;
-    top: 47px;
+    top: 20px;
-    right: 119px;
+    right: 200px;
     display: flex;
 
     .choose-day {

src/components/content/airInfo/AirInfo.vue

@@ -21,7 +21,7 @@
     <div style="height: 1px" v-if="airList.length!==0"></div>
     <div class="digital-tunnel">
       <el-dialog :close-on-click-modal="false" v-model="isWindSpeedVisited" :title="dialogTitle+'监控数据'" width="2175px"
-                 :modal="false">
+                 :modal="false" id="airDialog">
         <div class="left-top-icon"></div>
         <div class="right-top-icon"></div>
         <div class="loading-block" v-if="showSpeedLoading">
@@ -41,6 +41,13 @@
               @select="timeSelect"
           />
         </div>
+        <div class="change-screen">
+          <el-icon size="55" color="#05feff" class="full-icon" title="放大" @click.stop="handleFullScreen"
+                   v-if="isFullScreen">
+            <FullScreen/>
+          </el-icon>
+          <div v-else class="shrink-icon" title="缩小" @click.stop="shrinkScreen"></div>
+        </div>
         <div class="left-bottom-icon"></div>
         <div class="right-bottom-icon"></div>
       </el-dialog>
@@ -55,12 +62,16 @@ import * as echarts from 'echarts';
 import {getEchartsInfo} from "@/api/largeScreen";
 import ChooseDay from "@/components/chooseDay/index.vue"
 import ChooseMonth from "@/components/chooseMonth/index.vue"
+import elementResizeDetectorMaker from "element-resize-detector";
 
 let myEcharts = reactive({});
 const props = defineProps({
   list: Array,
   airData: Array
 });
+const isFullScreen = ref(false);
+let dataZoomTop = reactive('87%')
+let chartData = reactive([])
 const chooseDayRef = ref();
 const chooseMonthRef = ref();
 const windSpeed = ref(0)
@@ -108,19 +119,79 @@ watch(() => props.airData, (now) => {
   // }
 }, {deep: true});
 const daySelect = (val) => {
-  getChartInfo(openDialogId.value, 'day', val)
+  if (isFullScreen.value) {
+    getChartInfo(openDialogId.value, 'day', val)
+  } else {
+    getChartInfo(openDialogId.value, 'day', val,true)
+  }
 }
 const monthSelect = (val) => {
-  getChartInfo(openDialogId.value, 'month', val)
+  if (isFullScreen.value) {
+    getChartInfo(openDialogId.value, 'month', val)
+  } else {
+    getChartInfo(openDialogId.value, 'month', val,true)
+  }
 }
-const getChartInfo = (equipmentId, type = 'day', time = '') => {
+//放大弹窗
-  isWindSpeedVisited.value = true
+const handleFullScreen = () => {
+  const titleName = document.getElementsByClassName('el-dialog__title')[0]
+  const fan = document.getElementById('airDialog')
+  const fanChart = document.getElementById('containerWind')
+  const erd = elementResizeDetectorMaker();
+  fan.classList.remove('shrink-screen-dialog')
+  titleName.style.fontSize = '70px'
+  erd.listenTo(document.getElementById('airDialog'), (element) => {
+    fanChart.style.height = (element.offsetHeight - 120) + 'px'
+    myEcharts.resize();
+  });
+  nextTick(() => {
+    isFullScreen.value = false
+    initChart(chartData.dates, chartData.values, '93%')
+  })
+}
+const shrinkScreen = () => {
+  const fan = document.getElementById('airDialog')
+  const fanChart = document.getElementById('containerWind')
+  const titleName = document.getElementsByClassName('el-dialog__title')[0]
+  titleName.style.fontSize = '50px'
+  fan.classList.add('shrink-screen-dialog')
+  fanChart.style.height = '1200px'
+  myEcharts.resize();
+  nextTick(() => {
+    isFullScreen.value = true
+    initChart(chartData.dates, chartData.values,dataZoomTop)
+  })
+}
+const getChartInfo = (equipmentId, type = 'day', time = '', flag) => {
   showSpeedLoading.value = true
+  nextTick(() => {
+    if (flag) {
+      const fan = document.getElementById('airDialog')
+      fan.classList.remove('shrink-screen-dialog')
+      if (!isFullScreen.value) {
+        const titleName = document.getElementsByClassName('el-dialog__title')[0]
+        titleName.style.fontSize = '70px'
+      }
+    }
+  })
   getEchartsInfo(equipmentId, time, type).then(res => {
     if (res?.code === 1000) {
       showSpeedLoading.value = false
+      chartData=res.data
       nextTick(() => {
-        initChart(res.data.dates, res.data.values)
+        if (flag) {
+          const fanChart = document.getElementById('containerWind')
+          const erd = elementResizeDetectorMaker();
+          erd.listenTo(document.getElementById('airDialog'), (element) => {
+            fanChart.style.height = element.offsetHeight - 120 + 'px'
+            myEcharts.resize();
+          });
+          if (!isFullScreen.value) {
+            initChart(res.data.dates, res.data.values,'93%')
+          }
+        } else {
+          shrinkScreen()
+        }
       })
     } else {
       loadingText.value = res.msg
@@ -132,6 +203,7 @@ const getChartInfo = (equipmentId, type = 'day', time = '') => {
 }
 const handleOpenChart = (id, type) => {
   selectTimeButton.value = 2
+  isWindSpeedVisited.value = true
   nextTick(() => {
     if (chooseMonthRef.value) {
       chooseMonthRef.value.clearData()
@@ -140,10 +212,11 @@ const handleOpenChart = (id, type) => {
       chooseDayRef.value.clearData()
     }
   })
+  isFullScreen.value = false
   if (type === 'air') {
     dialogTitle.value = id.name
     openDialogId.value = id.equipmentId
-    getChartInfo(id.equipmentId, 'day')
+    getChartInfo(id.equipmentId, 'day','',true)
   } else {
     if (id === "windDirection") {
       dialogTitle.value = '风向'
@@ -151,9 +224,8 @@ const handleOpenChart = (id, type) => {
       dialogTitle.value = '风速'
     }
     openDialogId.value = type
-    getChartInfo(type, 'day')
+    getChartInfo(type, 'day','',true)
   }
-
 }
 const changeDate = (index) => {
   switch (index) {
@@ -166,7 +238,11 @@ const changeDate = (index) => {
   }
 }
 const timeSelect = (index) => {
-  getChartInfo(openDialogId.value, changeDate(index))
+  if (isFullScreen.value) {
+    getChartInfo(openDialogId.value, changeDate(index))
+  } else {
+    getChartInfo(openDialogId.value, changeDate(index),'',true)
+  }
 };
 
 const changeData = (item) => {
@@ -215,7 +291,7 @@ const getAirInfo = (now) => {
     airList.value = airArr
   }
 }
-const initChart = (type, values) => {
+const initChart = (type, values,top) => {
   //3.初始化container容器
   myEcharts = echarts.init(document.getElementById('containerWind'));
   //5.传入数据
@@ -272,7 +348,7 @@ const initChart = (type, values) => {
     },
       {
         type: 'slider',
-        top: 1050,
+        top: top,
         height: 100,
         textStyle: {
           fontSize: 45,

src/components/content/badGasInfo/BadGasInfo.vue

@@ -21,6 +21,7 @@
           title="有害气体监控数据"
           width="2175px"
           :modal="false"
+          id="badDialog"
       >
         <div class="left-top-icon"></div>
         <div class="right-top-icon"></div>
@@ -41,6 +42,13 @@
               @select="timeSelect"
           />
         </div>
+        <div class="change-screen">
+          <el-icon size="55" color="#05feff" class="full-icon" title="放大" @click.stop="handleFullScreen"
+                   v-if="isFullScreen">
+            <FullScreen/>
+          </el-icon>
+          <div v-else class="shrink-icon" title="缩小" @click.stop="shrinkScreen"></div>
+        </div>
         <div class="left-bottom-icon"></div>
         <div class="right-bottom-icon"></div>
       </el-dialog>
@@ -55,6 +63,7 @@ import TimeRangeBtn from "@/components/timeRangeBtn/index.vue";
 import {getBadGasEchartsInfo} from "@/api/largeScreen";
 import ChooseDay from "@/components/chooseDay/index.vue"
 import ChooseMonth from "@/components/chooseMonth/index.vue"
+import elementResizeDetectorMaker from "element-resize-detector";
 
 const props = defineProps({
   list: Array,
@@ -68,6 +77,9 @@ const timeList = ref(["年", "月", "日"]);
 const selectTimeButton = ref(2);
 const isBadGasVisited = ref(false);
 const showLoading = ref(false)
+const isFullScreen = ref(false);
+let chartData = reactive([])
+let dataZoomTop = reactive('87%')
 const badGasList = ref([]);
 let myEcharts = reactive({});
 const bgImage = computed(() => (isBadGasVisited.value ? "sp_active.png" : "bg.png"));
@@ -104,11 +116,49 @@ watch(
     },
     {deep: true}
 );
+//放大弹窗
+const handleFullScreen = () => {
+  const titleName = document.getElementsByClassName('el-dialog__title')[0]
+  const fan = document.getElementById('badDialog')
+  const fanChart = document.getElementById('containerBad')
+  const erd = elementResizeDetectorMaker();
+  fan.classList.remove('shrink-screen-dialog')
+  titleName.style.fontSize = '70px'
+  erd.listenTo(document.getElementById('badDialog'), (element) => {
+    fanChart.style.height = (element.offsetHeight - 120) + 'px'
+    myEcharts.resize();
+  });
+  nextTick(() => {
+    isFullScreen.value = false
+    initChart(chartData.dates, chartData, '93%')
+  })
+}
+const shrinkScreen = () => {
+  const fan = document.getElementById('badDialog')
+  const fanChart = document.getElementById('containerBad')
+  const titleName = document.getElementsByClassName('el-dialog__title')[0]
+  titleName.style.fontSize = '50px'
+  fan.classList.add('shrink-screen-dialog')
+  fanChart.style.height = '1200px'
+  myEcharts.resize();
+  nextTick(() => {
+    isFullScreen.value = true
+    initChart(chartData.dates, chartData, dataZoomTop)
+  })
+}
 const daySelect = (val) => {
-  getBadGasChartInfo('day', val)
+  if (isFullScreen.value) {
+    getBadGasChartInfo('day', val)
+  } else {
+    getBadGasChartInfo('day', val,true)
+  }
 }
 const monthSelect = (val) => {
-  getBadGasChartInfo('month', val)
+  if (isFullScreen.value) {
+    getBadGasChartInfo('month', val)
+  } else {
+    getBadGasChartInfo('month', val,true)
+  }
 }
 const changeDate = (index) => {
   switch (index) {
@@ -121,7 +171,11 @@ const changeDate = (index) => {
   }
 }
 const timeSelect = (index) => {
-  getBadGasChartInfo(changeDate(index))
+  if (isFullScreen.value) {
+    getBadGasChartInfo(changeDate(index))
+  } else {
+    getBadGasChartInfo(changeDate(index),'',true)
+  }
 };
 const getBadGasInfo = (now) => {
   if (now === null) return;
@@ -153,15 +207,37 @@ const changeData = (item) => {
     unit: item.unit,
   };
 };
-const getBadGasChartInfo = (type, time = '') => {
+const getBadGasChartInfo = (type, time = '',flag) => {
-  isBadGasVisited.value = true
   showLoading.value = true
   let id = props.tunnelId
+  nextTick(() => {
+    if (flag) {
+      const fan = document.getElementById('badDialog')
+      fan.classList.remove('shrink-screen-dialog')
+      if (!isFullScreen.value) {
+        const titleName = document.getElementsByClassName('el-dialog__title')[0]
+        titleName.style.fontSize = '70px'
+      }
+    }
+  })
   getBadGasEchartsInfo(id, time, type).then(res => {
     if (res?.code === 1000) {
       showLoading.value = false
+      chartData = res.data
       nextTick(() => {
-        initChart(res.data.dates, res.data)
+        if (flag) {
+          const fanChart = document.getElementById('containerBad')
+          const erd = elementResizeDetectorMaker();
+          erd.listenTo(document.getElementById('badDialog'), (element) => {
+            fanChart.style.height = element.offsetHeight - 120 + 'px'
+            myEcharts.resize();
+          });
+          if (!isFullScreen.value) {
+            initChart(res.data.dates, res.data, '93%')
+          }
+        } else {
+          shrinkScreen()
+        }
       })
     }
   })
@@ -175,7 +251,9 @@ const handleOpenChart = () => {
       chooseDayRef.value.clearData()
     }
   })
-  getBadGasChartInfo('day')
+  isBadGasVisited.value = true
+  isFullScreen.value = false
+  getBadGasChartInfo('day','',true)
 };
 const getImageUrl = (name) => {
   return new URL(`../../../assets/images/badGasInfo/${name}`, import.meta.url)
@@ -184,7 +262,7 @@ const getImageUrl = (name) => {
 /**
  * 初始化echarts实例方法
  */
-const initChart = (type, values) => {
+const initChart = (type, values,top) => {
   //3.初始化container容器
   myEcharts = echarts.init(document.getElementById("containerBad"));
   //5.传入数据
@@ -245,7 +323,7 @@ const initChart = (type, values) => {
     },
       {
         type: 'slider',
-        top: 1050,
+        top: top,
         height: 100,
         textStyle: {
           fontSize: 45,

src/components/content/fanInfo/FanInfo.vue

@@ -105,10 +105,13 @@
               v-model="selectTimeButton"
               @select="timeSelect"
           />
-          <el-icon size="55" color="#05feff" class="full-icon" title="放大" @click="fullScreen" v-if="isFullScreen">
+        </div>
+        <div class="change-screen">
+          <el-icon size="55" color="#05feff" class="full-icon" title="放大" @click.stop="handleFullScreen"
+                   v-if="isFullScreen">
             <FullScreen/>
           </el-icon>
-          <div v-else class="shrink-icon" @click="shrinkScreen"></div>
+          <div v-else class="shrink-icon" title="缩小" @click.stop="shrinkScreen"></div>
         </div>
         <div class="left-bottom-icon"></div>
         <div class="right-bottom-icon"></div>
@@ -141,7 +144,6 @@ const props = defineProps({
   transducerData: Array,
   loading: Number,
 });
-const isFullScreen = ref(false);
 const chooseDayRef = ref();
 const chooseMonthRef = ref();
 const socketData = ref()
@@ -167,11 +169,11 @@ const stateB = ref(false)
 const stateC = ref(false)
 const isVisited = ref(false)
 const showLoading = ref(false)
+const isFullScreen = ref(false);
+let dataZoomTop = reactive('87%')
 let chartData = reactive([])
 const fanIndex = ref('')
 const openEquipmentId = ref(0)
-let dataZoomTop = reactive('87%')
-const screenHeight = ref(0)
 let myEcharts = reactive({});
 watch(() => props.loading, (now) => {
   props.loading = now
@@ -213,10 +215,18 @@ watch(() => props.list, (now) => {
   handleOnMounted()
 }, {deep: true});
 const daySelect = (val) => {
-  getFanInfo(openEquipmentId.value, 'day', val,true)
+  if (isFullScreen.value) {
+    getFanInfo(openEquipmentId.value, 'day', val)
+  } else {
+    getFanInfo(openEquipmentId.value, 'day', val, true)
+  }
 }
 const monthSelect = (val) => {
-  getFanInfo(openEquipmentId.value, 'month', val, true)
+  if (isFullScreen.value) {
+    getFanInfo(openEquipmentId.value, 'month', val)
+  } else {
+    getFanInfo(openEquipmentId.value, 'month', val, true)
+  }
 }
 const changeDate = (index) => {
   switch (index) {
@@ -229,15 +239,19 @@ const changeDate = (index) => {
   }
 }
 const timeSelect = (index) => {
-  getFanInfo(openEquipmentId.value, changeDate(index), '',true)
+  if (isFullScreen.value) {
-};
+    getFanInfo(openEquipmentId.value, changeDate(index))
+  } else {
+    getFanInfo(openEquipmentId.value, changeDate(index), '', true)
+  }
+}
 //放大弹窗
-const fullScreen = () => {
+const handleFullScreen = () => {
   const titleName = document.getElementsByClassName('el-dialog__title')[0]
   const fan = document.getElementById('fanDialog')
   const fanChart = document.getElementById('containerFan')
   const erd = elementResizeDetectorMaker();
-  fan.classList.remove('full-screen-dialog')
+  fan.classList.remove('shrink-screen-dialog')
   titleName.style.fontSize = '70px'
   erd.listenTo(document.getElementById('fanDialog'), (element) => {
     fanChart.style.height = (element.offsetHeight - 120) + 'px'
@@ -253,7 +267,7 @@ const shrinkScreen = () => {
   const fanChart = document.getElementById('containerFan')
   const titleName = document.getElementsByClassName('el-dialog__title')[0]
   titleName.style.fontSize = '50px'
-  fan.classList.add('full-screen-dialog')
+  fan.classList.add('shrink-screen-dialog')
   fanChart.style.height = '1200px'
   myEcharts.resize();
   nextTick(() => {
@@ -342,31 +356,37 @@ const changeModel = (item) => {
   });
 }
 const getFanInfo = (equipmentId, type = 'day', time = '', flag) => {
-  isVisited.value = true
   showLoading.value = true
+  nextTick(() => {
+    if (flag) {
+      const fan = document.getElementById('fanDialog')
+      fan.classList.remove('shrink-screen-dialog')
+      if (!isFullScreen.value) {
+        const titleName = document.getElementsByClassName('el-dialog__title')[0]
+        titleName.style.fontSize = '70px'
+      }
+    }
+  })
   getFanEchartsInfo(equipmentId, time, type).then(res => {
     if (res?.code === 1000) {
       showLoading.value = false
       chartData = res.data
       nextTick(() => {
         if (flag) {
-          const titleName = document.getElementsByClassName('el-dialog__title')[0]
           const fanChart = document.getElementById('containerFan')
           const erd = elementResizeDetectorMaker();
-
           erd.listenTo(document.getElementById('fanDialog'), (element) => {
-            fanChart.style.height = element.offsetHeight - 120+ 'px'
+            fanChart.style.height = element.offsetHeight - 120 + 'px'
             myEcharts.resize();
           });
-          if(isFullScreen.value){
+          if (!isFullScreen.value) {
-            titleName.style.fontSize = '50px'
+            initChart(res.data.dates, res.data.currentsA, res.data.currentsB, res.data.currentsC, '93%')
-            initChart(res.data.dates, res.data.currentsA, res.data.currentsB, res.data.currentsC,  dataZoomTop)
-          }else {
-            titleName.style.fontSize = '70px'
-            initChart(res.data.dates, res.data.currentsA, res.data.currentsB, res.data.currentsC,  '93%')
           }
-        }else {
+        } else {
-          initChart(res.data.dates, res.data.currentsA, res.data.currentsB, res.data.currentsC, dataZoomTop)
+          shrinkScreen()
+          // const fan = document.getElementById('fanDialog')
+          // fan.classList.add('shrink-screen-dialog')
+          // initChart(res.data.dates, res.data.currentsA, res.data.currentsB, res.data.currentsC, dataZoomTop)
         }
       })
     }
@@ -381,10 +401,12 @@ const handleOpenChart = (item) => {
       chooseDayRef.value.clearData()
     }
   })
+  isVisited.value = true
   selectTimeButton.value = 2
   openEquipmentId.value = item.equipmentId
-  getFanInfo(item.equipmentId, 'day','',true)
+  isFullScreen.value = false
-  if (item.equipmentId === 22) {
+  getFanInfo(item.equipmentId, 'day', '', true)
+  if (item.equipmentType ==="frequency1") {
     fanIndex.value = '一'
   } else {
     fanIndex.value = '二'
@@ -415,10 +437,10 @@ const getTransData = (data) => {
 }
 
 const changeNum = (item) => {
-  switch (item.equipmentName) {
+  switch (item.equipmentType) {
-    case '1号变频器':
+    case "frequency1":
       return '一';
-    case '2号变频器':
+    case "frequency2":
       return '二';
   }
 }
@@ -588,7 +610,6 @@ const changeStateText = (breakdown, running) => {
  * 初始化echarts实例方法
  */
 const initChart = (type, valueA, valueB, valueC, top) => {
-  console.log('initChart---',top)
   //3.初始化container容器
   myEcharts = echarts.init(document.getElementById('containerFan'));
   //5.传入数据
@@ -723,20 +744,11 @@ const initChart = (type, valueA, valueB, valueC, top) => {
 </script>
 
 <style lang="scss" scoped>
-.full-icon {
+
-  cursor: pointer;
+#fanDialog {
-  margin: -36px -20px 0 30px;
-}
-#fanDialog{
   overflow: hidden;
 }
-.shrink-icon {
+
-  margin: -36px -20px 0 30px;
-  cursor: pointer;
-  width: 65px;
-  height: 65px;
-  background-image: url("@/assets/images/fanInfo/shrink.png");
-}
 
 :deep( .el-radio__input.is-checked + .el-radio__label) {
   color: #38CAFB;

src/components/content/usedEle/UsedEle.vue

@@ -29,7 +29,7 @@
   </div>
 
   <div class="digital-tunnel">
-    <el-dialog :close-on-click-modal="false" v-model="isVisited" width="2175px" :modal="false">
+    <el-dialog :close-on-click-modal="false" v-model="isVisited" width="2175px" :modal="false"  id="eleDialog">
       <div class="left-top-icon"></div>
       <div class="right-top-icon"></div>
       <div class="user-select">
@@ -79,6 +79,12 @@
             @select="timeSelect"
         />
       </div>
+      <div class="change-screen">
+        <el-icon size="55" color="#05feff" class="full-icon" title="放大" @click="fullScreen" v-if="isFullScreen">
+          <FullScreen/>
+        </el-icon>
+        <div v-else class="shrink-icon" title="缩小" @click="shrinkScreen"></div>
+      </div>
       <div class="left-bottom-icon"></div>
       <div class="right-bottom-icon"></div>
     </el-dialog>
@@ -90,6 +96,7 @@ import * as echarts from 'echarts';
 import TimeRangeBtn from "@/components/timeRangeBtn/index.vue"
 import ChooseMonth from "@/components/chooseMonth/index.vue"
 import {getEleEchartsInfo} from "@/api/largeScreen";
+import elementResizeDetectorMaker from "element-resize-detector";
 
 const props = defineProps({
   list: Array,
@@ -104,6 +111,9 @@ const chooseMonthRef = ref();
 const monthValue = ref('');
 const chooseChartFan = ref('');
 let myEcharts = reactive({});
+const isFullScreen = ref(false);
+let chartData = reactive([])
+let dataZoomTop = reactive('89%')
 const isVisited = ref(false);
 const showLoading = ref(false)
 const electricityConsumptionMonthly = ref(0)
@@ -156,6 +166,32 @@ watch(() => props.eleData, (now) => {
 //   setValueA()
 //   setValueB()
 // }, {deep: true});
+//放大弹窗
+const fullScreen = () => {
+  const fan = document.getElementById('eleDialog')
+  const fanChart = document.getElementById('containerEle')
+  const erd = elementResizeDetectorMaker();
+  fan.classList.remove('shrink-screen-dialog')
+  erd.listenTo(document.getElementById('eleDialog'), (element) => {
+    fanChart.style.height = (element.offsetHeight - 280) + 'px'
+    myEcharts.resize();
+  });
+  nextTick(() => {
+    isFullScreen.value = false
+    initChart(chartData.dates, chartData.consumptionValues, chartData.saveElectricityValues, '94%')
+  })
+}
+const shrinkScreen = () => {
+  const fan = document.getElementById('eleDialog')
+  const fanChart = document.getElementById('containerEle')
+  fan.classList.add('shrink-screen-dialog')
+  fanChart.style.height = '1010px'
+  myEcharts.resize();
+  nextTick(() => {
+    isFullScreen.value = true
+    initChart(chartData.dates, chartData.consumptionValues, chartData.saveElectricityValues, dataZoomTop)
+  })
+}
 const changeNum = (item) => {
   switch (item) {
     case 22:
@@ -185,7 +221,12 @@ const getBasicData = (data) => {
 
 const monthSelect = (val) => {
   monthValue.value = val
-  getFanInfo(openEquipmentId.value, 'month', val)
+  if (isFullScreen.value) {
+    getFanInfo(openEquipmentId.value, 'month', val)
+  } else {
+    getFanInfo(openEquipmentId.value, 'month', val, true)
+  }
+
 }
 const changeDate = (index) => {
   switch (index) {
@@ -193,27 +234,59 @@ const changeDate = (index) => {
       return 'years'
     case 1:
       return 'month'
+    default:
+      return 1
   }
 }
 const timeSelect = (index) => {
   monthValue.value = ''
-  getFanInfo(openEquipmentId.value, changeDate(index))
+  if (isFullScreen.value) {
+    getFanInfo(openEquipmentId.value, changeDate(index))
+  } else {
+    getFanInfo(openEquipmentId.value, changeDate(index),'',true)
+  }
 };
 const changeFanData = (val) => {
-  selectTimeButton.value = 1
+  // selectTimeButton.value = 1
   openEquipmentId.value = val
-  getFanInfo(val, 'month', monthValue.value)
+  if (isFullScreen.value) {
+    getFanInfo(val, changeDate(selectTimeButton.value), monthValue.value)
+  } else {
+    getFanInfo(val, changeDate(selectTimeButton.value), monthValue.value,true)
+  }
 }
-const getFanInfo = (equipmentId, type = 'month', time = '') => {
+const getFanInfo = (equipmentId, type = 'month', time = '', flag) => {
-  isVisited.value = true
   showLoading.value = true
+  nextTick(() => {
+    if (flag) {
+      const fan = document.getElementById('eleDialog')
+      fan.classList.remove('shrink-screen-dialog')
+      if (!isFullScreen.value) {
+        const titleName = document.getElementsByClassName('el-dialog__title')[0]
+        titleName.style.fontSize = '70px'
+      }
+    }
+  })
   getEleEchartsInfo(equipmentId, time, type).then(res => {
     if (res?.code === 1000) {
       showLoading.value = false
+      chartData = res.data
       totalElectricityConsumption.value = res.data.totalElectricityConsumption
       saveElectricity.value = res.data.saveElectricity
       nextTick(() => {
-        initChart(res.data.dates, res.data.consumptionValues, res.data.saveElectricityValues)
+        if (flag) {
+          const fanChart = document.getElementById('containerEle')
+          const erd = elementResizeDetectorMaker();
+          erd.listenTo(document.getElementById('eleDialog'), (element) => {
+            fanChart.style.height = element.offsetHeight - 280+ 'px'
+            myEcharts.resize();
+          });
+          if(!isFullScreen.value){
+            initChart(res.data.dates, res.data.consumptionValues, res.data.saveElectricityValues,'94%')
+          }
+        }else {
+          shrinkScreen()
+        }
       })
     }
   })
@@ -227,14 +300,17 @@ const handleOpenChart = () => {
   openEquipmentId.value = fanList.value[0].value
   chooseChartFan.value = fanList.value[0].value
   nextTick(() => {
-    chooseMonthRef.value.clearData()
+    if (chooseMonthRef.value) {
+      chooseMonthRef.value.clearData()
+    }
   })
-  getFanInfo(openEquipmentId.value, 'month')
+  isFullScreen.value = false
+  getFanInfo(openEquipmentId.value, 'month','',true)
 }
 /**
  * 初始化echarts实例方法
  */
-const initChart = (type, valueA, valueB) => {
+const initChart = (type, valueA, valueB, top) => {
   //3.初始化container容器
   myEcharts = echarts.init(document.getElementById('containerEle'));
   //5.传入数据
@@ -292,7 +368,7 @@ const initChart = (type, valueA, valueB) => {
     },
       {
         type: 'slider',
-        top: 900,
+        top: top,
         height: 100,
         textStyle: {
           fontSize: 45,

src/components/content/windPressure/WindPressureList.vue

@@ -11,7 +11,7 @@
     </div>
     <div class="digital-tunnel">
       <el-dialog :close-on-click-modal="false" v-model="isVisited" :title="windSort+'监控数据'" width="2175px"
-                 :modal="false">
+                 :modal="false" id="windDialog">
         <div class="left-top-icon"></div>
         <div class="right-top-icon"></div>
         <div class="loading-block" v-if="showLoading">
@@ -31,6 +31,13 @@
               @select="timeSelect"
           />
         </div>
+        <div class="change-screen">
+          <el-icon size="55" color="#05feff" class="full-icon" title="放大" @click.stop="handleFullScreen"
+                   v-if="isFullScreen">
+            <FullScreen/>
+          </el-icon>
+          <div v-else class="shrink-icon" title="缩小" @click.stop="shrinkScreen"></div>
+        </div>
         <div class="left-bottom-icon"></div>
         <div class="right-bottom-icon"></div>
       </el-dialog>
@@ -45,6 +52,7 @@ import * as echarts from 'echarts';
 import {getEchartsInfo} from "@/api/largeScreen";
 import ChooseDay from "@/components/chooseDay/index.vue"
 import ChooseMonth from "@/components/chooseMonth/index.vue"
+import elementResizeDetectorMaker from "element-resize-detector";
 
 const props = defineProps({
   list: Array,
@@ -59,6 +67,9 @@ const windSortId = ref(1)
 const timeList = ref(["年", "月", "日"]);
 const selectTimeButton = ref(2);
 const isVisited = ref(false);
+const isFullScreen = ref(false);
+let chartData = reactive([])
+let dataZoomTop = reactive('87%')
 const showLoading = ref(false)
 let myEcharts = reactive({});
 const wpList = ref([]);
@@ -75,22 +86,83 @@ watch(() => props.list, (now) => {
 watch(() => props.winData, (now) => {
   getScreenInfo(now.windPressureSensorList)
 }, {deep: true});
+//放大弹窗
+const handleFullScreen = () => {
+  const titleName = document.getElementsByClassName('el-dialog__title')[0]
+  const fan = document.getElementById('windDialog')
+  const fanChart = document.getElementById('container')
+  const erd = elementResizeDetectorMaker();
+  fan.classList.remove('shrink-screen-dialog')
+  titleName.style.fontSize = '70px'
+  erd.listenTo(document.getElementById('windDialog'), (element) => {
+    fanChart.style.height = (element.offsetHeight - 120) + 'px'
+    myEcharts.resize();
+  });
+  nextTick(() => {
+    isFullScreen.value = false
+    initChart(chartData.dates, chartData.values, '93%')
+  })
+}
+const shrinkScreen = () => {
+  const fan = document.getElementById('windDialog')
+  const fanChart = document.getElementById('container')
+  const titleName = document.getElementsByClassName('el-dialog__title')[0]
+  titleName.style.fontSize = '50px'
+  fan.classList.add('shrink-screen-dialog')
+  fanChart.style.height = '1200px'
+  myEcharts.resize();
+  nextTick(() => {
+    isFullScreen.value = true
+    initChart(chartData.dates, chartData.values, dataZoomTop)
+  })
+}
 const daySelect = (val) => {
-  getWindInfo(windSortId.value, 'day', val)
+  if (isFullScreen.value) {
+    getWindInfo(windSortId.value, 'day', val)
+  } else {
+    getWindInfo(windSortId.value, 'day', val, true)
+  }
 }
 const monthSelect = (val) => {
-  getWindInfo(windSortId.value, 'month', val)
+  if (isFullScreen.value) {
+    getWindInfo(windSortId.value, 'month', val)
+  } else {
+    getWindInfo(windSortId.value, 'month', val, true)
+  }
 }
-const getWindInfo = (equipmentId, type = 'day', time = '') => {
+const getWindInfo = (equipmentId, type = 'day', time = '', flag) => {
   isVisited.value = true
   showLoading.value = true
+  nextTick(() => {
+    if (flag) {
+      const fan = document.getElementById('windDialog')
+      fan.classList.remove('shrink-screen-dialog')
+      if (!isFullScreen.value) {
+        const titleName = document.getElementsByClassName('el-dialog__title')[0]
+        titleName.style.fontSize = '70px'
+      }
+    }
+  })
   getEchartsInfo(equipmentId, time, type).then(res => {
     if (res?.code === 1000) {
       showLoading.value = false
+      chartData = res.data
       nextTick(() => {
-        initChart(res.data.dates, res.data.values)
+        if (flag) {
+          const fanChart = document.getElementById('container')
+          const erd = elementResizeDetectorMaker();
+          erd.listenTo(document.getElementById('windDialog'), (element) => {
+            fanChart.style.height = element.offsetHeight - 120 + 'px'
+            myEcharts.resize();
+          });
+          if (!isFullScreen.value) {
+            initChart(res.data.dates, res.data.values, '93%')
+          }
+        } else {
+          shrinkScreen()
+        }
       })
-    }else {
+    } else {
       loadingText.value = res.msg
     }
   })
@@ -101,15 +173,16 @@ const getWindInfo = (equipmentId, type = 'day', time = '') => {
 
 const handleOpenChart = (item) => {
   selectTimeButton.value = 2
-  nextTick(()=>{
+  nextTick(() => {
-    if(chooseMonthRef.value){
+    if (chooseMonthRef.value) {
       chooseMonthRef.value.clearData()
     }
-    if(chooseDayRef.value){
+    if (chooseDayRef.value) {
       chooseDayRef.value.clearData()
     }
   })
-  getWindInfo(item.equipmentId)
+  isFullScreen.value = false
+  getWindInfo(item.equipmentId, 'day', '', true)
   windSort.value = item.equipmentName
   windSortId.value = item.equipmentId
 }
@@ -124,7 +197,11 @@ const changeDate = (index) => {
   }
 }
 const timeSelect = (index) => {
-  getWindInfo(windSortId.value, changeDate(index))
+  if (isFullScreen.value) {
+    getWindInfo(windSortId.value, changeDate(index))
+  } else {
+    getWindInfo(windSortId.value, changeDate(index), '', true)
+  }
 };
 const getScreenInfo = (now) => {
   let windPressureObj = {}
@@ -140,7 +217,7 @@ const getScreenInfo = (now) => {
     }
     windPressureArr.push(windPressureObj)
   })
-  if(windPressureArr.map(item=>item.equipmentName).includes('10号风压')){
+  if (windPressureArr.map(item => item.equipmentName).includes('10号风压')) {
     windPressureArr.push(windPressureArr.shift())
   }
   wpList.value = windPressureArr
@@ -148,7 +225,7 @@ const getScreenInfo = (now) => {
 /**
  * 初始化echarts实例方法
  */
-const initChart = (type, values) => {
+const initChart = (type, values, top) => {
   //3.初始化container容器
   myEcharts = echarts.init(document.getElementById('container'));
   //5.传入数据
@@ -204,7 +281,7 @@ const initChart = (type, values) => {
     },
       {
         type: 'slider',
-        top: 1050,
+        top: top,
         height: 100,
         textStyle: {
           fontSize: 45,