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

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 = '') => {
-  isVisited.value = true
+const getFanInfo = (equipmentId, type = 'month', time = '', flag) => {
   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,