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

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(()=>{
-    if(chooseMonthRef.value){
+  nextTick(() => {
+    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,