feat : 新增echarts全屏模式及设备新增最大/小范围框

src/components/content/airInfo/AirInfo.vue

@@ -5,11 +5,11 @@
       <div>
         <img src="@/assets/images/airInfo/fan-v-icon.png" alt=""/>
         <div class="fan-info" @click="handleOpenChart(windSpeedType,windSpeedId)">
-          <div class="input-fan"><span>风速</span>{{ windSpeed }}m/s</div>
+          <div class="input-fan"><span>风速</span>{{ windSpeed }} {{ windSpeedUnit }}</div>
         </div>
       </div>
       <div class="wind-direction-info" @click="handleOpenChart(windDirectionSpeedType,windDirectionSpeedId)">
-        <div class="input-fan"><span>风向</span>{{ windDirection }} °</div>
+        <div class="input-fan"><span>风向</span>{{ windDirection }} {{ windDirectionUnit }}</div>
       </div>
     </div>
     <item-info
@@ -64,7 +64,9 @@ const props = defineProps({
 const chooseDayRef = ref();
 const chooseMonthRef = ref();
 const windSpeed = ref(0)
+const windSpeedUnit = ref('m/s')
 const windDirection = ref(null)
+const windDirectionUnit = ref('°')
 const loadingText = ref('加载中...')
 const windSpeedId = ref(0)
 const windSpeedType = ref(null)
@@ -200,10 +202,12 @@ const getAirInfo = (now) => {
       windSpeedType.value = item.equipmentType
       windSpeedId.value = item.equipmentId
       windSpeed.value = item.value
+      windSpeedUnit.value = item.unit
     } else if (item.equipmentType === "windDirection") {
       windDirectionSpeedType.value = item.equipmentType
       windDirectionSpeedId.value = item.equipmentId
       windDirection.value = item.value
+      windDirectionUnit.value = item.unit
     }
   })
   if (airArr.length !== 0) {

src/components/content/badGasInfo/childComps/GasInfoItem.vue

@@ -79,7 +79,7 @@ const option = {
         color: `${
           params.gasInfo.value >= params.gasInfo.point ? "#F94236" : "#FFCE23"
         }`,
-        formatter: "Vo{value}%",
+        formatter: `{value}${params.gasInfo.unit}`,
       },
     },
   ],

src/components/content/fanInfo/FanInfo.vue

@@ -13,8 +13,8 @@
           <div class="fan-name">{{ changeNum(item) }}号风机</div>
           <div class="option-nav">
             <div class="state">
-<!--              :class="{ stopColor:changeStopColor(item.breakdown,item.running)}"-->
-              <div class="blue-state" :style="{backgroundColor:changeStopColor(item.breakdown,item.running)}" >
+              <!--              :class="{ stopColor:changeStopColor(item.breakdown,item.running)}"-->
+              <div class="blue-state" :style="{backgroundColor:changeStopColor(item.breakdown,item.running)}">
                 <div class="state-icon"></div>
                 状态：<span class="fan-state">{{ changeStateText(item.breakdown, item.running) }}</span>
               </div>
@@ -86,7 +86,7 @@
     <div class="digital-tunnel">
       <el-dialog :close-on-click-modal="false" v-model="isVisited" :title="fanIndex+'号风机电流监控数据'"
                  width="2175px"
-                 :modal="false">
+                 :modal="false" id="fanDialog">
         <div class="left-top-icon"></div>
         <div class="right-top-icon"></div>
         <div class="loading-block" v-if="showLoading">
@@ -105,6 +105,10 @@
               v-model="selectTimeButton"
               @select="timeSelect"
           />
+          <el-icon size="55" color="#05feff" class="full-icon" title="放大" @click="fullScreen" v-if="isFullScreen">
+            <FullScreen/>
+          </el-icon>
+          <div v-else class="shrink-icon" @click="shrinkScreen"></div>
         </div>
         <div class="left-bottom-icon"></div>
         <div class="right-bottom-icon"></div>
@@ -126,6 +130,7 @@ import {
   getFanEchartsInfo
 } from "@/api/largeScreen";
 import {ElMessage, ElMessageBox} from "element-plus";
+import elementResizeDetectorMaker from "element-resize-detector";
 
 const timeList = ref(["年", "月", "日"]);
 const selectTimeButton = ref(2);
@@ -136,6 +141,7 @@ const props = defineProps({
   transducerData: Array,
   loading: Number,
 });
+const isFullScreen = ref(false);
 const chooseDayRef = ref();
 const chooseMonthRef = ref();
 const socketData = ref()
@@ -161,8 +167,11 @@ const stateB = ref(false)
 const stateC = ref(false)
 const isVisited = ref(false)
 const showLoading = ref(false)
+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
@@ -220,8 +229,51 @@ const changeDate = (index) => {
   }
 }
 const timeSelect = (index) => {
-  getFanInfo(openEquipmentId.value, changeDate(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 = () => {
+  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')
+  titleName.style.fontSize = '70px'
+  erd.listenTo(document.getElementById('fanDialog'), (element) => {
+    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%')
+  })
+}
+const shrinkScreen = () => {
+  const fan = document.getElementById('fanDialog')
+  const fanChart = document.getElementById('containerFan')
+  const titleName = document.getElementsByClassName('el-dialog__title')[0]
+  titleName.style.fontSize = '50px'
+  fan.classList.add('full-screen-dialog')
+  fanChart.style.height = '1200px'
+  myEcharts.resize();
+  nextTick(() => {
+    isFullScreen.value = true
+    initChart(chartData.dates, chartData.currentsA, chartData.currentsB, chartData.currentsC, dataZoomTop)
+  })
+}
 const packageData = (item, type, flag) => {
   let number = 0
   if (item.equipmentType === "frequency1") {
@@ -302,19 +354,46 @@ const changeModel = (item) => {
     item.autoMode = !item.autoMode
   });
 }
-const getFanInfo = (equipmentId, type = 'day', time = '') => {
+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)
+        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()
@@ -322,6 +401,7 @@ const handleOpenChart = (item) => {
     if (chooseDayRef.value) {
       chooseDayRef.value.clearData()
     }
+    // fullScreen()
   })
   selectTimeButton.value = 2
   openEquipmentId.value = item.equipmentId
@@ -388,7 +468,6 @@ const getBasicData = (data) => {
 }
 
 const handleOnMounted = () => {
-  // console.log('socketData.value[i]',socketData.value)
   const chart = document.getElementsByClassName('echart');
   for (let i = 0; i < chart.length; i++) {
     Echarts_info1 = echarts.init(chart[i]);
@@ -530,7 +609,8 @@ const changeStateText = (breakdown, running) => {
 /**
  * 初始化echarts实例方法
  */
-const initChart = (type, valueA, valueB, valueC) => {
+const initChart = (type, valueA, valueB, valueC, top) => {
+  console.log('initChart---',top)
   //3.初始化container容器
   myEcharts = echarts.init(document.getElementById('containerFan'));
   //5.传入数据
@@ -568,6 +648,7 @@ const initChart = (type, valueA, valueB, valueC) => {
       formatter: (params) => {
         let res = ` <div style="font-size: 52px;font-family: PingFang SC-Regular, PingFang SC;font-weight: 400;color: #EFEEEE;margin-bottom: -30px;margin-left: 20px">${params[0].name}</div>` + '<br/>'
         for (let i = 0; i < params.length; i++) {
+          // console.log('params[i]', params[i])
           res += `
               <div style="font-size: 52px;line-height: 48px;font-family: Bebas Neue-Regular, Bebas Neue;font-weight: 400;margin:0 20px 30px 20px;"><span style="color: #FFFFFF">${params[i].seriesName}: </span><span style="background: linear-gradient(180deg, #F5B85F 0%, #FFFFFF 100%);background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;">${params[i].value}</span></div>
              `;
@@ -589,7 +670,7 @@ const initChart = (type, valueA, valueB, valueC) => {
     },
       {
         type: 'slider',
-        top: 1050,
+        top: top,
         height: 100,
         textStyle: {
           fontSize: 45,
@@ -664,6 +745,18 @@ const initChart = (type, valueA, valueB, valueC) => {
 </script>
 
 <style lang="scss" scoped>
+.full-icon {
+  cursor: pointer;
+  margin: -36px -20px 0 30px;
+}
+
+.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;