feat : 所有图表新增全屏功能

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,