fix : 修复echarts全屏bug

.drone.yml

@@ -16,7 +16,7 @@ steps:
       - export NODE_MODULES_PATH=`pwd`/node_modules
       # - npm config set registry https://registry.npm.taobao.org
       - set NODE_OPTIONS=--openssl-legacy-provider
-      - npm install
+#      - npm install
       - npm run build
       - echo $NODE_MODULES_PATH
       - cp -r dist /app/build/$DRONE_REPO_NAME

src/assets/styles/index.scss

@@ -323,7 +323,6 @@ body,
   background: rgba(6, 34, 71, 0.8) !important;
 }
 .alarm-tunnel{
-
   .el-tag {
     font-size: 36px;
     height: 60px;
@@ -509,8 +508,8 @@ body,
     position: relative;
     display: flex;
     flex-direction: column;
-    width: 100%;
+    width: 99.9%;
-    height: 100%;
+    height: 99.9%;
     //height: 1300px;
     border: 2px solid #0f82af;
     //background: rgba(6, 34, 71, 0.78);

src/components/content/fanInfo/FanInfo.vue

@@ -213,10 +213,10 @@ watch(() => props.list, (now) => {
   handleOnMounted()
 }, {deep: true});
 const daySelect = (val) => {
-  getFanInfo(openEquipmentId.value, 'day', val)
+  getFanInfo(openEquipmentId.value, 'day', val,true)
 }
 const monthSelect = (val) => {
-  getFanInfo(openEquipmentId.value, 'month', val)
+  getFanInfo(openEquipmentId.value, 'month', val, true)
 }
 const changeDate = (index) => {
   switch (index) {
@@ -229,19 +229,7 @@ const changeDate = (index) => {
   }
 }
 const timeSelect = (index) => {
-  // console.log('document.getElementById', document.getElementById('containerFan'))
-  // console.log('screenHeight', screenHeight.value)
-  // console.log('myEcharts',myEcharts)
-  //
-  // const fanChart = document.getElementById('containerFan')
-  // nextTick(() => {
-  //   if (screenHeight.value !== 0) {
-  //     fanChart.style.height = screenHeight.value + 'px'
-  //     myEcharts.resize();
-  //   }
-  // fullScreen()
   getFanInfo(openEquipmentId.value, changeDate(index), '',true)
-  // })
 };
 //放大弹窗
 const fullScreen = () => {
@@ -252,8 +240,7 @@ const fullScreen = () => {
   fan.classList.remove('full-screen-dialog')
   titleName.style.fontSize = '70px'
   erd.listenTo(document.getElementById('fanDialog'), (element) => {
-    screenHeight.value = element.offsetHeight - 100
+    fanChart.style.height = (element.offsetHeight - 120) + 'px'
-    fanChart.style.height = (element.offsetHeight - 100) + 'px'
     myEcharts.resize();
   });
   nextTick(() => {
@@ -357,43 +344,35 @@ const changeModel = (item) => {
 const getFanInfo = (equipmentId, type = 'day', time = '', flag) => {
   isVisited.value = true
   showLoading.value = true
-  // const fanChart = document.getElementById('containerFan')
   getFanEchartsInfo(equipmentId, time, type).then(res => {
     if (res?.code === 1000) {
       showLoading.value = false
       chartData = res.data
-      // if (flag) {
-      //   console.log('document.getElementById', fanChart)
-      //   console.log('myEcharts', myEcharts)
-      //   if (screenHeight.value !== 0) {
-      //     console.log('screenHeight', screenHeight.value)
-      //     fanChart.style.height = screenHeight.value + 'px'
-      //     myEcharts.resize();
-      //   }
-      // }
       nextTick(() => {
-        initChart(res.data.dates, res.data.currentsA, res.data.currentsB, res.data.currentsC, dataZoomTop)
+        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'
+            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%')
+          }
+        }else {
+          initChart(res.data.dates, res.data.currentsA, res.data.currentsB, res.data.currentsC, dataZoomTop)
+        }
       })
     }
   })
 }
 const handleOpenChart = (item) => {
-  // const titleName = document.getElementsByClassName('el-dialog__title')[0]
-  // console.log('titleName',titleName)
-  // const fan = document.getElementById('fanDialog')
-  const fanChart = document.getElementById('containerFan')
-  const erd = elementResizeDetectorMaker();
-  // titleName.style.fontSize = '70px'
-  // erd.listenTo(document.getElementById('fanDialog'), (element) => {
-  //   console.log('element.offsetHeight ',element.offsetHeight )
-  //   // screenHeight.value = element.offsetHeight - 100
-  //   // fanChart.style.height = (element.offsetHeight - 100) + 'px'
-  //   // myEcharts.resize();
-  // });
-  // nextTick(() => {
-  //   isFullScreen.value = false
-  //   initChart(chartData.dates, chartData.currentsA, chartData.currentsB, chartData.currentsC, '93%')
-  // })
   nextTick(() => {
     if (chooseMonthRef.value) {
       chooseMonthRef.value.clearData()
@@ -401,11 +380,10 @@ const handleOpenChart = (item) => {
     if (chooseDayRef.value) {
       chooseDayRef.value.clearData()
     }
-    // fullScreen()
   })
   selectTimeButton.value = 2
   openEquipmentId.value = item.equipmentId
-  getFanInfo(item.equipmentId, 'day')
+  getFanInfo(item.equipmentId, 'day','',true)
   if (item.equipmentId === 22) {
     fanIndex.value = '一'
   } else {
@@ -749,7 +727,9 @@ const initChart = (type, valueA, valueB, valueC, top) => {
   cursor: pointer;
   margin: -36px -20px 0 30px;
 }
-
+#fanDialog{
+  overflow: hidden;
+}
 .shrink-icon {
   margin: -36px -20px 0 30px;
   cursor: pointer;