Merge pull request 'feat : 所有图表新增全屏功能' (#315) from dengjie into dev

Reviewed-on: http://git.feashow.cn/clay/tunnel-cloud-web/pulls/315
2024-03-12 13:13:38 +00:00
parent df5cde4ee7 c28d46043a
commit cb3828ec19
6 changed files with 427 additions and 93 deletions
--- a/src/assets/styles/index.scss
+++ b/src/assets/styles/index.scss
@@ -314,7 +314,7 @@ body,
  }
 }

-.full-screen-dialog {
+.shrink-screen-dialog {
  width: 2175px !important;
  //width: 100% !important;
  //height: 100% !important;
@@ -452,6 +452,17 @@ body,
  }

 }
+.shrink-icon {
+  margin: -36px -20px 0 30px;
+  cursor: pointer;
+  width: 65px;
+  height: 65px;
+  background-image: url("@/assets/images/fanInfo/shrink.png");
+}
+.full-icon {
+  cursor: pointer;
+  margin: -36px -20px 0 30px;
+}
 //弹窗样式
 .digital-tunnel {
  .chat-dialog {
@@ -563,11 +574,15 @@ body,
    background-image: url(@/assets/images/badGasInfo/sp_jz.png);
    transform: rotate(90deg);
  }
-
+.change-screen{
+  position: absolute;
+  right: 126px;
+  top: 50px;
+}
  .time-select {
    position: absolute;
-    top: 47px;
-    right: 119px;
+    top: 20px;
+    right: 200px;
    display: flex;

    .choose-day {
--- a/src/components/content/airInfo/AirInfo.vue
+++ b/src/components/content/airInfo/AirInfo.vue
@@ -21,7 +21,7 @@
    <div style="height: 1px" v-if="airList.length!==0"></div>
    <div class="digital-tunnel">
      <el-dialog :close-on-click-modal="false" v-model="isWindSpeedVisited" :title="dialogTitle+'监控数据'" width="2175px"
-                 :modal="false">
+                 :modal="false" id="airDialog">
        <div class="left-top-icon"></div>
        <div class="right-top-icon"></div>
        <div class="loading-block" v-if="showSpeedLoading">
@@ -41,6 +41,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,12 +62,16 @@ import * as echarts from 'echarts';
 import {getEchartsInfo} from "@/api/largeScreen";
 import ChooseDay from "@/components/chooseDay/index.vue"
 import ChooseMonth from "@/components/chooseMonth/index.vue"
+import elementResizeDetectorMaker from "element-resize-detector";

 let myEcharts = reactive({});
 const props = defineProps({
  list: Array,
  airData: Array
 });
+const isFullScreen = ref(false);
+let dataZoomTop = reactive('87%')
+let chartData = reactive([])
 const chooseDayRef = ref();
 const chooseMonthRef = ref();
 const windSpeed = ref(0)
@@ -108,19 +119,79 @@ watch(() => props.airData, (now) => {
  // }
 }, {deep: true});
 const daySelect = (val) => {
-  getChartInfo(openDialogId.value, 'day', val)
+  if (isFullScreen.value) {
+    getChartInfo(openDialogId.value, 'day', val)
+  } else {
+    getChartInfo(openDialogId.value, 'day', val,true)
+  }
 }
 const monthSelect = (val) => {
-  getChartInfo(openDialogId.value, 'month', val)
+  if (isFullScreen.value) {
+    getChartInfo(openDialogId.value, 'month', val)
+  } else {
+    getChartInfo(openDialogId.value, 'month', val,true)
+  }
 }
-const getChartInfo = (equipmentId, type = 'day', time = '') => {
-  isWindSpeedVisited.value = true
+//放大弹窗
+const handleFullScreen = () => {
+  const titleName = document.getElementsByClassName('el-dialog__title')[0]
+  const fan = document.getElementById('airDialog')
+  const fanChart = document.getElementById('containerWind')
+  const erd = elementResizeDetectorMaker();
+  fan.classList.remove('shrink-screen-dialog')
+  titleName.style.fontSize = '70px'
+  erd.listenTo(document.getElementById('airDialog'), (element) => {
+    fanChart.style.height = (element.offsetHeight - 120) + 'px'
+    myEcharts.resize();
+  });
+  nextTick(() => {
+    isFullScreen.value = false
+    initChart(chartData.dates, chartData.values, '93%')
+  })
+}
+const shrinkScreen = () => {
+  const fan = document.getElementById('airDialog')
+  const fanChart = document.getElementById('containerWind')
+  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.values,dataZoomTop)
+  })
+}
+const getChartInfo = (equipmentId, type = 'day', time = '', flag) => {
  showSpeedLoading.value = true
+  nextTick(() => {
+    if (flag) {
+      const fan = document.getElementById('airDialog')
+      fan.classList.remove('shrink-screen-dialog')
+      if (!isFullScreen.value) {
+        const titleName = document.getElementsByClassName('el-dialog__title')[0]
+        titleName.style.fontSize = '70px'
+      }
+    }
+  })
  getEchartsInfo(equipmentId, time, type).then(res => {
    if (res?.code === 1000) {
      showSpeedLoading.value = false
+      chartData=res.data
      nextTick(() => {
-        initChart(res.data.dates, res.data.values)
+        if (flag) {
+          const fanChart = document.getElementById('containerWind')
+          const erd = elementResizeDetectorMaker();
+          erd.listenTo(document.getElementById('airDialog'), (element) => {
+            fanChart.style.height = element.offsetHeight - 120 + 'px'
+            myEcharts.resize();
+          });
+          if (!isFullScreen.value) {
+            initChart(res.data.dates, res.data.values,'93%')
+          }
+        } else {
+          shrinkScreen()
+        }
      })
    } else {
      loadingText.value = res.msg
@@ -132,6 +203,7 @@ const getChartInfo = (equipmentId, type = 'day', time = '') => {
 }
 const handleOpenChart = (id, type) => {
  selectTimeButton.value = 2
+  isWindSpeedVisited.value = true
  nextTick(() => {
    if (chooseMonthRef.value) {
      chooseMonthRef.value.clearData()
@@ -140,10 +212,11 @@ const handleOpenChart = (id, type) => {
      chooseDayRef.value.clearData()
    }
  })
+  isFullScreen.value = false
  if (type === 'air') {
    dialogTitle.value = id.name
    openDialogId.value = id.equipmentId
-    getChartInfo(id.equipmentId, 'day')
+    getChartInfo(id.equipmentId, 'day','',true)
  } else {
    if (id === "windDirection") {
      dialogTitle.value = '风向'
@@ -151,9 +224,8 @@ const handleOpenChart = (id, type) => {
      dialogTitle.value = '风速'
    }
    openDialogId.value = type
-    getChartInfo(type, 'day')
+    getChartInfo(type, 'day','',true)
  }
-
 }
 const changeDate = (index) => {
  switch (index) {
@@ -166,7 +238,11 @@ const changeDate = (index) => {
  }
 }
 const timeSelect = (index) => {
-  getChartInfo(openDialogId.value, changeDate(index))
+  if (isFullScreen.value) {
+    getChartInfo(openDialogId.value, changeDate(index))
+  } else {
+    getChartInfo(openDialogId.value, changeDate(index),'',true)
+  }
 };

 const changeData = (item) => {
@@ -215,7 +291,7 @@ const getAirInfo = (now) => {
    airList.value = airArr
  }
 }
-const initChart = (type, values) => {
+const initChart = (type, values,top) => {
  //3.初始化container容器
  myEcharts = echarts.init(document.getElementById('containerWind'));
  //5.传入数据
@@ -272,7 +348,7 @@ const initChart = (type, values) => {
    },
      {
        type: 'slider',
-        top: 1050,
+        top: top,
        height: 100,
        textStyle: {
          fontSize: 45,
--- a/src/components/content/badGasInfo/BadGasInfo.vue
+++ b/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,
--- a/src/components/content/fanInfo/FanInfo.vue
+++ b/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;
--- a/src/components/content/usedEle/UsedEle.vue
+++ b/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,
--- a/src/components/content/windPressure/WindPressureList.vue
+++ b/src/components/content/windPressure/WindPressureList.vue
@@ -11,7 +11,7 @@
    </div>
    <div class="digital-tunnel">
      <el-dialog :close-on-click-modal="false" v-model="isVisited" :title="windSort+'监控数据'" width="2175px"
-                 :modal="false">
+                 :modal="false" id="windDialog">
        <div class="left-top-icon"></div>
        <div class="right-top-icon"></div>
        <div class="loading-block" v-if="showLoading">
@@ -31,6 +31,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>
@@ -45,6 +52,7 @@ import * as echarts from 'echarts';
 import {getEchartsInfo} 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,
@@ -59,6 +67,9 @@ const windSortId = ref(1)
 const timeList = ref(["年", "月", "日"]);
 const selectTimeButton = ref(2);
 const isVisited = ref(false);
+const isFullScreen = ref(false);
+let chartData = reactive([])
+let dataZoomTop = reactive('87%')
 const showLoading = ref(false)
 let myEcharts = reactive({});
 const wpList = ref([]);
@@ -75,22 +86,83 @@ watch(() => props.list, (now) => {
 watch(() => props.winData, (now) => {
  getScreenInfo(now.windPressureSensorList)
 }, {deep: true});
+//放大弹窗
+const handleFullScreen = () => {
+  const titleName = document.getElementsByClassName('el-dialog__title')[0]
+  const fan = document.getElementById('windDialog')
+  const fanChart = document.getElementById('container')
+  const erd = elementResizeDetectorMaker();
+  fan.classList.remove('shrink-screen-dialog')
+  titleName.style.fontSize = '70px'
+  erd.listenTo(document.getElementById('windDialog'), (element) => {
+    fanChart.style.height = (element.offsetHeight - 120) + 'px'
+    myEcharts.resize();
+  });
+  nextTick(() => {
+    isFullScreen.value = false
+    initChart(chartData.dates, chartData.values, '93%')
+  })
+}
+const shrinkScreen = () => {
+  const fan = document.getElementById('windDialog')
+  const fanChart = document.getElementById('container')
+  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.values, dataZoomTop)
+  })
+}
 const daySelect = (val) => {
-  getWindInfo(windSortId.value, 'day', val)
+  if (isFullScreen.value) {
+    getWindInfo(windSortId.value, 'day', val)
+  } else {
+    getWindInfo(windSortId.value, 'day', val, true)
+  }
 }
 const monthSelect = (val) => {
-  getWindInfo(windSortId.value, 'month', val)
+  if (isFullScreen.value) {
+    getWindInfo(windSortId.value, 'month', val)
+  } else {
+    getWindInfo(windSortId.value, 'month', val, true)
+  }
 }
-const getWindInfo = (equipmentId, type = 'day', time = '') => {
+const getWindInfo = (equipmentId, type = 'day', time = '', flag) => {
  isVisited.value = true
  showLoading.value = true
+  nextTick(() => {
+    if (flag) {
+      const fan = document.getElementById('windDialog')
+      fan.classList.remove('shrink-screen-dialog')
+      if (!isFullScreen.value) {
+        const titleName = document.getElementsByClassName('el-dialog__title')[0]
+        titleName.style.fontSize = '70px'
+      }
+    }
+  })
  getEchartsInfo(equipmentId, time, type).then(res => {
    if (res?.code === 1000) {
      showLoading.value = false
+      chartData = res.data
      nextTick(() => {
-        initChart(res.data.dates, res.data.values)
+        if (flag) {
+          const fanChart = document.getElementById('container')
+          const erd = elementResizeDetectorMaker();
+          erd.listenTo(document.getElementById('windDialog'), (element) => {
+            fanChart.style.height = element.offsetHeight - 120 + 'px'
+            myEcharts.resize();
+          });
+          if (!isFullScreen.value) {
+            initChart(res.data.dates, res.data.values, '93%')
+          }
+        } else {
+          shrinkScreen()
+        }
      })
-    }else {
+    } else {
      loadingText.value = res.msg
    }
  })
@@ -101,15 +173,16 @@ const getWindInfo = (equipmentId, type = 'day', time = '') => {

 const handleOpenChart = (item) => {
  selectTimeButton.value = 2
-  nextTick(()=>{
-    if(chooseMonthRef.value){
+  nextTick(() => {
+    if (chooseMonthRef.value) {
      chooseMonthRef.value.clearData()
    }
-    if(chooseDayRef.value){
+    if (chooseDayRef.value) {
      chooseDayRef.value.clearData()
    }
  })
-  getWindInfo(item.equipmentId)
+  isFullScreen.value = false
+  getWindInfo(item.equipmentId, 'day', '', true)
  windSort.value = item.equipmentName
  windSortId.value = item.equipmentId
 }
@@ -124,7 +197,11 @@ const changeDate = (index) => {
  }
 }
 const timeSelect = (index) => {
-  getWindInfo(windSortId.value, changeDate(index))
+  if (isFullScreen.value) {
+    getWindInfo(windSortId.value, changeDate(index))
+  } else {
+    getWindInfo(windSortId.value, changeDate(index), '', true)
+  }
 };
 const getScreenInfo = (now) => {
  let windPressureObj = {}
@@ -140,7 +217,7 @@ const getScreenInfo = (now) => {
    }
    windPressureArr.push(windPressureObj)
  })
-  if(windPressureArr.map(item=>item.equipmentName).includes('10号风压')){
+  if (windPressureArr.map(item => item.equipmentName).includes('10号风压')) {
    windPressureArr.push(windPressureArr.shift())
  }
  wpList.value = windPressureArr
@@ -148,7 +225,7 @@ const getScreenInfo = (now) => {
 /**
 * 初始化echarts实例方法
 */
-const initChart = (type, values) => {
+const initChart = (type, values, top) => {
  //3.初始化container容器
  myEcharts = echarts.init(document.getElementById('container'));
  //5.传入数据
@@ -204,7 +281,7 @@ const initChart = (type, values) => {
    },
      {
        type: 'slider',
-        top: 1050,
+        top: top,
        height: 100,
        textStyle: {
          fontSize: 45,