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

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){
-            titleName.style.fontSize = '50px'
-            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%')
+          if (!isFullScreen.value) {
+            initChart(res.data.dates, res.data.currentsA, res.data.currentsB, res.data.currentsC, '93%')
           }
-        }else {
-          initChart(res.data.dates, res.data.currentsA, res.data.currentsB, res.data.currentsC, dataZoomTop)
+        } else {
+          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)
-  if (item.equipmentId === 22) {
+  isFullScreen.value = false
+  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) {
-    case '1号变频器':
+  switch (item.equipmentType) {
+    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;
-  margin: -36px -20px 0 30px;
-}
-#fanDialog{
+
+#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;