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

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 = '') => {
-  isBadGasVisited.value = true
+const getBadGasChartInfo = (type, time = '',flag) => {
   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,