更新1.浏览器不点击2.删除风压3.浏览器模型只能左右移动4.鼠标hover显示设备名称

2024-03-13 20:50:20 +08:00
parent a8bd594f1d 8253a42847
commit 340189408f
19 changed files with 1369 additions and 255 deletions
--- a/package.json
+++ b/package.json
@@ -12,8 +12,10 @@
    "@element-plus/icons-vue": "^2.3.1",
    "autofit.js": "^3.0.4",
    "axios": "^1.4.0",
+    "csv-exportor": "^1.0.2",
    "echarts": "^5.4.2",
    "element-plus": "^2.3.5",
+    "element-resize-detector": "^1.2.4",
    "js-cookie": "^3.0.5",
    "nprogress": "^0.2.0",
    "pinia": "^2.0.35",
--- a/src/api/largeScreen.js
+++ b/src/api/largeScreen.js
@@ -22,38 +22,44 @@ export const getTunnelBySiteId = (siteId) => {
  })
 }
 // 传感器echarts数据
-export const getEchartsInfo = (id,time,type) => {
+export const getEchartsInfo = (id,time,type,startTime,endTime) => {
  return request({
    url: '/tunnel/large/screen/echarts/sensor',
    method: 'get',
    params: {
      id: id,
      time: time,
-      type: type
+      type: type,
+      startTime:startTime,
+      endTime:endTime,
    }
  })
 }
 // 有害气体echarts数据
-export const getBadGasEchartsInfo = (id,time,type) => {
+export const getBadGasEchartsInfo = (id,time,type,startTime,endTime) => {
  return request({
    url: '/tunnel/large/screen/echarts/gas/sensor/',
    method: 'get',
    params: {
      id: id,
      time: time,
-      type: type
+      type: type,
+      startTime:startTime,
+      endTime:endTime,
    }
  })
 }
 //电流监控数据
-export const getFanEchartsInfo = (id,time,type) => {
+export const getFanEchartsInfo = (id,time,type,startTime,endTime) => {
  return request({
    url: '/tunnel/large/screen/echarts/current',
    method: 'get',
    params: {
      id: id,
      time: time,
-      type: type
+      type: type,
+      startTime:startTime,
+      endTime:endTime,
    }
  })
 }
--- a/src/assets/images/fanInfo/shrink.png
+++ b/src/assets/images/fanInfo/shrink.png
--- a/src/assets/styles/index.scss
+++ b/src/assets/styles/index.scss
@@ -18,13 +18,15 @@
 body {
  background-color: #f5f5f5;
 }
-.allLoading.el-loading-mask.is-fullscreen{
-  .el-loading-spinner{
-    .circular{
+
+.allLoading.el-loading-mask.is-fullscreen {
+  .el-loading-spinner {
+    .circular {
      width: 75px;
      height: 75px;
    }
-    .el-loading-text{
+
+    .el-loading-text {
      font-size: 26px;
      letter-spacing: 2px;
    }
@@ -312,51 +314,30 @@ body,
  }
 }

-//弹窗样式
-.digital-tunnel {
-  .chat-dialog {
-    display: flex;
+.shrink-screen-dialog {
+  width: 2175px !important;
+  //width: 100% !important;
+  //height: 100% !important;
+  height: 1300px !important;
+  margin: 520px auto 0 auto !important;
+  background: rgba(6, 34, 71, 0.8) !important;
+}

-    #container {
-      flex: 1;
-      height: 1200px;
-      //width: 1300px;
-    }
+.alarm-tunnel {
+  .el-tag {
+    font-size: 36px;
+    height: 60px;
+    padding: 0 20px;
+    border-radius: 10px;
+  }

-    #containerFan {
-      flex: 1;
-      height: 1200px;
-      //width: 1300px;
-    }
+  .detail {
+    font-size: 50px;
+    color: #FFFFFF;

-    #containerBad {
-      flex: 1;
-      height: 1200px;
-      //width: 1300px;
-    }
-
-    #containerWind {
-      flex: 1;
-      height: 1200px;
-      //width: 1300px;
-    }
-
-    #containerWindDirection {
-      flex: 1;
-      height: 1160px;
-      //width: 1300px;
-    }
-
-    #containerEle {
-      flex: 1;
-      height: 1010px;
-      //width: 2180px;
-    }
-
-    #containerAir {
-      flex: 1;
-      height: 1150px;
-      //width: 2180px;
+    > div {
+      color: #f5f5f5;
+      margin-bottom: 10px;
    }
  }

@@ -364,9 +345,9 @@ body,
    position: relative;
    display: flex;
    flex-direction: column;
-    height: 1300px;
+    height: 1400px;
    border: 2px solid #0f82af;
-    background: rgba(6, 34, 71, 0.78);
+    background: rgba(6, 34, 71, 0.8);
    border-radius: 20px;
    padding: 47px 30px;
    box-sizing: border-box;
@@ -473,6 +454,229 @@ body,
    transform: rotate(180deg);
  }

+}
+
+.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 {
+    display: flex;
+
+    #container {
+      flex: 1;
+      height: 1200px;
+      //width: 1300px;
+    }
+
+    #containerFan {
+      //width: 100%;
+      //height: 100%;
+      flex: 1;
+      //height: calc(100vh - 100px);
+      //height: 100vh;
+      height: 1200px;
+      //width: 1300px;
+    }
+
+    #containerBad {
+      flex: 1;
+      height: 1200px;
+      //width: 1300px;
+    }
+
+    #containerWind {
+      flex: 1;
+      height: 1200px;
+      //width: 1300px;
+    }
+
+    #containerWindDirection {
+      flex: 1;
+      height: 1160px;
+      //width: 1300px;
+    }
+
+    #containerEle {
+      flex: 1;
+      height: 1010px;
+      //width: 2180px;
+    }
+
+    #containerAir {
+      flex: 1;
+      height: 1150px;
+      //width: 2180px;
+    }
+  }
+
+  .el-dialog {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    width: 99.9%;
+    height: 99.9%;
+    //height: 1300px;
+    border: 2px solid #0f82af;
+    //background: rgba(6, 34, 71, 0.78);
+    background: rgba(6, 34, 71, 0.95);
+    border-radius: 20px;
+    padding: 47px 30px;
+    box-sizing: border-box;
+    //margin: 520px auto 0 auto;
+    margin: 0;
+
+    .el-dialog__header {
+      padding: 0 0 46px 0;
+      //display: none;
+      .el-dialog__title {
+        font-size: 50px;
+        font-weight: bold;
+        color: #d6f1fa;
+      }
+
+      .el-dialog__headerbtn {
+        right: 22px;
+
+        .el-dialog__close {
+          color: #05feff;
+          font-size: 73px;
+        }
+      }
+
+    }
+
+    .el-dialog__body {
+      padding: 0;
+    }
+  }
+
+  .left-top-icon {
+    position: absolute;
+    top: -3px;
+    left: -3px;
+    width: 41px;
+    height: 41px;
+    background-image: url(@/assets/images/badGasInfo/sp_jz.png);
+  }
+
+  .right-top-icon {
+    position: absolute;
+    top: -3px;
+    right: -3px;
+    width: 41px;
+    height: 41px;
+    background-image: url(@/assets/images/badGasInfo/sp_jz.png);
+    transform: rotate(90deg);
+  }
+
+  .export-btn {
+    cursor: pointer;
+    //padding-left: 53px;
+    width: 178px;
+    height: 92px;
+    line-height: 92px;
+    border-radius: 11px;
+    border: 2px solid #08B7B8;
+    background: #264A78;
+    //border-radius: 11px;
+    color: #FFFFFF;
+    font-size: 48px;
+    text-align: center;
+    margin-right: 30px;
+  }
+
+  .change-screen {
+    position: absolute;
+    right: 126px;
+    top: 50px;
+  }
+
+  .time-select {
+    position: absolute;
+    top: 20px;
+    right: 200px;
+    display: flex;
+    .choose-dates{
+      .el-date-editor {
+        width: 600px!important;
+      }
+    }
+    .choose-day {
+      margin-right: 40px;
+
+      .el-date-editor {
+        width: 370px;
+        //width: 600px;
+        height: 92px;
+        .el-range__icon,.el-range__close-icon{
+          font-size: 40px;
+          color: #FFFFFF;
+        }
+        .el-range-input{
+          font-size: 37px;
+          color: #FFFFFF;
+        }
+        .el-range-separator{
+          font-size: 36px;
+          color: #f5f5f5;
+        }
+      }
+
+      .el-input__wrapper {
+        height: 92px;
+        background-color: transparent;
+        border-radius: 10px;
+        border: 2px solid #0F82AF;
+        box-shadow: none;
+        //padding: 18px 24px;
+        .el-input__prefix, .el-input__suffix {
+          .el-icon {
+            font-size: 40px;
+            color: #FFFFFF;
+          }
+        }
+
+        .el-input__inner {
+          height: 80px;
+          font-size: 40px;
+          color: #FFFFFF;
+        }
+      }
+    }
+  }
+
+  .left-bottom-icon {
+    position: absolute;
+    bottom: -3px;
+    left: -3px;
+    width: 41px;
+    height: 41px;
+    background-image: url(@/assets/images/badGasInfo/sp_jz.png);
+    transform: rotate(-90deg);
+  }
+
+  .right-bottom-icon {
+    position: absolute;
+    bottom: -3px;
+    right: -3px;
+    width: 41px;
+    height: 41px;
+    background-image: url(@/assets/images/badGasInfo/sp_jz.png);
+    transform: rotate(180deg);
+  }
+
  //用电量
  .top-tag {
    position: absolute;
--- a/src/components/chooseDates/index.vue
+++ b/src/components/chooseDates/index.vue
@@ -0,0 +1,147 @@
+<template>
+  <div class="choose-day choose-dates">
+    <el-date-picker
+        v-model="selectButton"
+        type="daterange"
+        size="large"
+        range-separator="To"
+        value-format="YYYY-MM-DD"
+        @change="dataSelect"
+        popper-class="choose-day-popper"
+        start-placeholder="开始日期"
+        end-placeholder="结束日期"
+        :disabled-date="disabledDate"
+    />
+  </div>
+</template>
+
+
+<script setup>
+import {ElMessage} from "element-plus";
+
+const selectButton = ref();
+const emit = defineEmits(["update:modelValue", "select"]);
+const disabledDate = (time) => {
+  // return time.getTime() > Date.now()//不能选择之后的数据
+  let curDate = (new Date()).toString() // 当前时间戳转为字符串
+  let curDateYear = (new Date()).getFullYear() // 当前时间的年份
+  let oneYearAgoDate = curDate.replace(curDateYear, curDateYear - 1)// 字符串年份替换为一年前
+  let oneYear = new Date(oneYearAgoDate).getTime() //一年前字符串转为时间戳
+  return time.getTime() > Date.now() || time.getTime() < oneYear;
+}
+const dataSelect = (val) => {
+  if (val !== null) {
+    const startDate = new Date(val[0]).getTime();
+    const endDate = new Date(val[1]).getTime();
+    if (endDate - startDate > 4 * 24 * 60 * 60 * 1000) {
+      ElMessage.warning('所选日期范围不能大于5天!')
+      clearData()
+      // emit("select", false);//clear重新加载
+    } else {
+      emit("select", val);
+    }
+  } else {
+    emit("select", false);
+  }
+  emit("update:modelValue", val);
+
+  // }
+};
+const clearData = () => {
+  selectButton.value = ''
+}
+defineExpose({
+  clearData
+})
+</script>
+
+<style lang="scss">
+.el-picker__popper.el-popper {
+  border: 2px solid #0F82AF !important;
+}
+
+.choose-day-popper {
+  margin-left: 0 !important;
+  width: auto !important;
+
+  .el-picker-panel__body {
+    background-color: #062247;
+
+    .el-date-range-picker__header, .el-date-picker__header {
+      margin: 0;
+      height: 40px;
+      line-height: 40px;
+
+      .el-picker-panel__icon-btn, .el-date-picker__header-label {
+        font-size: 20px;
+        color: #FFFFFF;
+      }
+
+      > div:last-child {
+        font-size: 20px;
+        color: #f5f5f5;
+      }
+    }
+
+    .el-picker-panel__content {
+      .el-month-table {
+        td .cell {
+          font-size: 18px;
+          color: #FFFFFF;
+        }
+
+        td.disabled .cell {
+          background-color: transparent;
+          color: #a8abb2;
+        }
+
+        td.today .cell {
+          color: #0BE9FA;
+        }
+      }
+
+      .el-date-table th {
+        color: #FFFFFF;
+        font-size: 17px;
+      }
+
+      .el-date-table__row {
+        .prev-month, .available, .normal, .next-month {
+          .el-date-table-cell__text {
+            font-size: 18px;
+          }
+        }
+
+        .available {
+          color: #FFFFFF;
+          font-weight: bold;
+
+        }
+
+        .available.in-range {
+          .el-date-table-cell {
+            background-color: #264A78;
+
+            .el-date-table-cell__text {
+              background-color: transparent;
+            }
+          }
+        }
+
+        .available.today {
+          .el-date-table-cell__text {
+            color: #0BE9FA;
+          }
+        }
+
+        .disabled {
+          .el-date-table-cell {
+            background-color: #062247;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
+
--- a/src/components/chooseMonth/index.vue
+++ b/src/components/chooseMonth/index.vue
@@ -35,7 +35,3 @@ defineExpose({
  clearData
 })
 </script>
-
-<style scoped>
-
-</style>
--- a/src/components/content/airInfo/AirInfo.vue
+++ b/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
@@ -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">
@@ -33,6 +33,9 @@
          <div style="width: 1px;"></div>
        </div>
        <div class="time-select">
+          <div class="export-btn" @click="handleExport">
+            导出
+          </div>
          <choose-day v-if="selectTimeButton===2" ref="chooseDayRef" @select="daySelect"/>
          <choose-month v-if="selectTimeButton===1" ref="chooseMonthRef" @select="monthSelect"/>
          <time-range-btn
@@ -41,6 +44,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>
@@ -53,18 +63,26 @@ import ItemInfo from "./childComps/ItemInfo.vue";
 import TimeRangeBtn from "@/components/timeRangeBtn/index.vue"
 import * as echarts from 'echarts';
 import {getEchartsInfo} from "@/api/largeScreen";
-import ChooseDay from "@/components/chooseDay/index.vue"
+import ChooseDay from "@/components/chooseDates/index.vue"
 import ChooseMonth from "@/components/chooseMonth/index.vue"
+import elementResizeDetectorMaker from "element-resize-detector";

+import {getNowFormatDate} from "@/utils/date.js";
+import CsvExportor from "csv-exportor";
 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)
+const windSpeedUnit = ref('m/s')
 const windDirection = ref(null)
+const windDirectionUnit = ref('°')
 const loadingText = ref('加载中...')
 const windSpeedId = ref(0)
 const windSpeedType = ref(null)
@@ -77,6 +95,8 @@ const timeList = ref(["年", "月", "日"]);
 const selectTimeButton = ref(2);
 const isWindSpeedVisited = ref(false);
 const showSpeedLoading = ref(false)
+const clickMonth = ref('')
+const clickDay = ref('')
 watch(() => props.list, (now) => {
  airList.value?.forEach(item => {
    now.forEach(newItem => {
@@ -105,20 +125,137 @@ watch(() => props.airData, (now) => {
  //   windSpeed.value = 0
  // }
 }, {deep: true});
+//导出csv
+const handleExport = () => {
+  let clickUnit = ''
+  if(dialogTitle.value==='风速'){
+    clickUnit=windSpeedUnit.value
+  }else  if(dialogTitle.value==='风向'){
+    clickUnit=windDirectionUnit.value
+  }else {
+    airList.value.forEach(item => {
+      if (item.name=== dialogTitle.value) {
+        clickUnit = item.unit
+      }
+    })
+  }
+  const header = ['时间', `${dialogTitle.value}值(${clickUnit})`];
+  let newArray = []
+  chartData.dates.forEach((item, index) => {
+    let obj = {
+      dates: chartData.dates[index],
+      values: chartData.values[index]
+    }
+    newArray.push(obj)
+  })
+  let time = ''
+  if (selectTimeButton.value === 1) {
+    if (clickMonth.value) {
+      const index = clickMonth.value.lastIndexOf("\-");
+      time = clickMonth.value.substring(0, index)
+    } else {
+      time = getNowFormatDate(false)
+    }
+  } else if (selectTimeButton.value === 2) {
+    if (clickDay.value) {
+      if (clickDay.value[1]) {
+        time = clickDay.value.map(item => item).join('到')
+      } else {
+        time = clickDay.value
+      }
+    } else {
+      time = getNowFormatDate(true)
+    }
+  } else if (selectTimeButton.value === 0) {
+    time = new Date().getFullYear() + '年'
+  }
+  const name = dialogTitle.value + '监控数据-' + time
+  CsvExportor.downloadCsv(newArray, {header}, `${name}.csv`);
+}
 const daySelect = (val) => {
-  getChartInfo(openDialogId.value, 'day', val)
+  if (val) {
+    clickDay.value = val
+    if (isFullScreen.value) {
+      getChartInfo(openDialogId.value, 'day', '', '', val[0], val[1])
+    } else {
+      getChartInfo(openDialogId.value, 'day', '', true, val[0], val[1])
+    }
+  } else {
+  if (isFullScreen.value) {
+    getChartInfo(openDialogId.value, 'day', '')
+  } else {
+    getChartInfo(openDialogId.value, 'day', '', true)
+  }
+}
 }
 const monthSelect = (val) => {
-  getChartInfo(openDialogId.value, 'month', val)
+  clickMonth.value = 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 - 140) + '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, startTime, endTime) => {
  showSpeedLoading.value = true
-  getEchartsInfo(equipmentId, time, type).then(res => {
+  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, startTime, endTime).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 - 140 + 'px'
+            myEcharts.resize();
+          });
+          if (!isFullScreen.value) {
+            initChart(res.data.dates, res.data.values,'93%')
+          }
+        } else {
+          shrinkScreen()
+        }
      })
    } else {
      loadingText.value = res.msg
@@ -130,6 +267,9 @@ const getChartInfo = (equipmentId, type = 'day', time = '') => {
 }
 const handleOpenChart = (id, type) => {
  selectTimeButton.value = 2
+  isWindSpeedVisited.value = true
+  clickMonth.value=''
+  clickDay.value=''
  nextTick(() => {
    if (chooseMonthRef.value) {
      chooseMonthRef.value.clearData()
@@ -138,10 +278,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 = '风向'
@@ -149,9 +290,8 @@ const handleOpenChart = (id, type) => {
      dialogTitle.value = '风速'
    }
    openDialogId.value = type
-    getChartInfo(type, 'day')
+    getChartInfo(type, 'day','',true)
  }
-
 }
 const changeDate = (index) => {
  switch (index) {
@@ -164,7 +304,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) => {
@@ -172,7 +316,7 @@ const changeData = (item) => {
    equipmentId: item.equipmentId,
    icon: changeIcon(item.equipmentType),
    name: item.equipmentName.slice(0, 2),
-    max: 120,
+    max: item.maxRange,
    value: item.value,
    point: item.valueThreshold,
    unit: item.unit
@@ -200,10 +344,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) {
@@ -211,7 +357,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.传入数据
@@ -268,7 +414,7 @@ const initChart = (type, values) => {
    },
      {
        type: 'slider',
-        top: 1050,
+        top: top,
        height: 100,
        textStyle: {
          fontSize: 45,
@@ -367,7 +513,7 @@ const initChart = (type, values) => {

      .input-fan {
        cursor: pointer;
-
+        padding-right: 20px;
        &:hover {
          //width: 230px;
          padding-left: 20px;
@@ -391,8 +537,9 @@ const initChart = (type, values) => {

      .input-fan {
        //margin: 0 26px;
+        padding-right: 20px;
        &:hover {
-          width: 230px;
+          //width: 230px;
          background: #2E5589;
          border-radius: 6px;
        }
--- a/src/components/content/airInfo/childComps/ItemInfo.vue
+++ b/src/components/content/airInfo/childComps/ItemInfo.vue
@@ -110,8 +110,8 @@ const setValue = () => {
  }

  .container {
-    width: 422px;
-    height: 24px;
+    width: 468px;
+    height: 25px;
    border-radius: 12px;
    border: 1px solid #0f82af;
    position: relative;
@@ -138,7 +138,7 @@ const setValue = () => {

  .value-num {
    height: 37px;
-    width: 160px;
+    //width: 160px;
    font-size: 28px;
    font-family: MicrosoftYaHei;
    color: #d6f1fa;
--- a/src/components/content/badGasInfo/BadGasInfo.vue
+++ b/src/components/content/badGasInfo/BadGasInfo.vue
@@ -7,7 +7,7 @@
      <div class="loading" v-if="loading===0"></div>
      {{ loading === 0 ? '加载中...' : '暂无数据~' }}
    </div>
-    <div v-else class="info-list"  @click="handleOpenChart">
+    <div v-else class="info-list" @click="handleOpenChart">
      <gas-info-item
          v-for="item in badGasList"
          :key="item.equipmentId"
@@ -21,6 +21,7 @@
          title="有害气体监控数据"
          width="2175px"
          :modal="false"
+          id="badDialog"
      >
        <div class="left-top-icon"></div>
        <div class="right-top-icon"></div>
@@ -33,7 +34,10 @@
          <div style="width: 1px"></div>
        </div>
        <div class="time-select">
-          <choose-day v-if="selectTimeButton===2" ref="chooseDayRef"  @select="daySelect"/>
+          <div class="export-btn" @click="handleExport">
+            导出
+          </div>
+          <choose-dates v-if="selectTimeButton===2" ref="chooseDayRef" @select="daySelect"/>
          <choose-month v-if="selectTimeButton===1" ref="chooseMonthRef" @select="monthSelect"/>
          <time-range-btn
              :buttonList="timeList"
@@ -41,6 +45,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>
@@ -53,8 +64,12 @@ import GasInfoItem from "./childComps/GasInfoItem.vue";
 import * as echarts from "echarts";
 import TimeRangeBtn from "@/components/timeRangeBtn/index.vue";
 import {getBadGasEchartsInfo} from "@/api/largeScreen";
-import ChooseDay from "@/components/chooseDay/index.vue"
+import ChooseDates from "@/components/chooseDates/index.vue"
 import ChooseMonth from "@/components/chooseMonth/index.vue"
+import elementResizeDetectorMaker from "element-resize-detector";
+
+import {getNowFormatDate} from "@/utils/date.js";
+import CsvExportor from "csv-exportor";

 const props = defineProps({
  list: Array,
@@ -68,8 +83,13 @@ 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 clickMonth = ref('')
+const clickDay = ref('')
 const bgImage = computed(() => (isBadGasVisited.value ? "sp_active.png" : "bg.png"));
 watch(
    () => props.list,
@@ -104,11 +124,125 @@ watch(
    },
    {deep: true}
 );
+//导出csv
+const handleExport = () => {
+  console.log(badGasList.value)
+  let dustUnit
+  let carbonUnit
+  let carbonMonoxideUnit
+  let nitrogenUnit
+  let sulfurMonoxideUnit
+  let sulfurDioxideUnit
+  let hydrogenSulfideUnit
+  badGasList.value.forEach((item) => {
+    if(item.name==='粉尘'){
+      dustUnit=item.unit
+    }else if(item.name==='二氧化碳'){
+      carbonUnit=item.unit
+    }else if(item.name==='一氧化碳'){
+      carbonMonoxideUnit=item.unit
+    }else if(item.name==='二氧化氮'){
+      nitrogenUnit=item.unit
+    }else if(item.name==='一氧化氮'){
+      sulfurMonoxideUnit=item.unit
+    }else if(item.name==='二氧化硫'){
+      sulfurDioxideUnit=item.unit
+    }else if(item.name==='硫化氢'){
+      hydrogenSulfideUnit=item.unit
+    }
+  });
+  const header = ['时间', `粉尘(${dustUnit})`, `二氧化碳(${carbonUnit})`, `一氧化碳(${carbonMonoxideUnit})`,`二氧化氮(${nitrogenUnit})`,`一氧化氮(${sulfurMonoxideUnit})`,`二氧化硫(${sulfurDioxideUnit})`,`硫化氢(${hydrogenSulfideUnit})`];
+  let newArray = []
+  chartData.dates.forEach((item, index) => {
+    let obj = {
+      dates: chartData.dates[index],
+      dustValues: chartData.dustValues[index],
+      carbonDioxideValues: chartData.carbonDioxideValues[index],
+      carbonMonoxideValues: chartData.carbonMonoxideValues[index],
+      nitrogenDioxideValues: chartData.nitrogenDioxideValues[index],
+      sulfurMonoxideValues: chartData.sulfurMonoxideValues[index],
+      sulfurDioxideValues: chartData.sulfurDioxideValues[index],
+      hydrogenSulfideValues: chartData.hydrogenSulfideValues[index]
+    }
+    newArray.push(obj)
+  })
+  let time = ''
+  if (selectTimeButton.value === 1) {
+    if (clickMonth.value) {
+      const index = clickMonth.value.lastIndexOf("\-");
+      time = clickMonth.value.substring(0, index)
+    } else {
+      time = getNowFormatDate(false)
+    }
+  } else if (selectTimeButton.value === 2) {
+    if (clickDay.value) {
+      if (clickDay.value[1]) {
+        time = clickDay.value.map(item => item).join('到')
+      } else {
+        time = clickDay.value
+      }
+    } else {
+      time = getNowFormatDate(true)
+    }
+  } else if (selectTimeButton.value === 0) {
+    time = new Date().getFullYear() + '年'
+  }
+  const name = '有害气体监控数据-' + time
+  CsvExportor.downloadCsv(newArray, {header}, `${name}.csv`);
+}
+//放大弹窗
+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 - 140) + '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 (val) {
+    clickDay.value = val
+    if (isFullScreen.value) {
+      getBadGasChartInfo('day', '','', val[0], val[1])
+    } else {
+      getBadGasChartInfo('day', '', true, val[0], val[1])
+    }
+  }else {
+    if (isFullScreen.value) {
+      getBadGasChartInfo('day', '')
+    } else {
+      getBadGasChartInfo('day', '', true)
+    }
+  }
 }
 const monthSelect = (val) => {
-  getBadGasChartInfo('month', val)
+  clickMonth.value = val
+  if (isFullScreen.value) {
+    getBadGasChartInfo('month', val)
+  } else {
+    getBadGasChartInfo('month', val, true)
+  }
 }
 const changeDate = (index) => {
  switch (index) {
@@ -121,7 +255,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;
@@ -147,35 +285,61 @@ const changeData = (item) => {
  return {
    equipmentId: item.equipmentId,
    name: item.equipmentName.slice(0, item.equipmentName.length - 2),
-    max: 120,
+    max: item.maxRange,
    value: item.value,
    point: item.valueThreshold,
    unit: item.unit,
  };
 };
-const getBadGasChartInfo = (type, time = '') => {
-  isBadGasVisited.value = true
+const getBadGasChartInfo = (type, time = '', flag,startTime,endTime) => {
  showLoading.value = true
  let id = props.tunnelId
-  getBadGasEchartsInfo(id, time, type).then(res => {
+  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,startTime,endTime).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 - 140 + 'px'
+            myEcharts.resize();
+          });
+          if (!isFullScreen.value) {
+            initChart(res.data.dates, res.data, '93%')
+          }
+        } else {
+          shrinkScreen()
+        }
      })
    }
  })
 }
 const handleOpenChart = () => {
-  nextTick(()=>{
-    if(chooseMonthRef.value){
+  clickMonth.value = ''
+  clickDay.value = ''
+  nextTick(() => {
+    if (chooseMonthRef.value) {
      chooseMonthRef.value.clearData()
    }
-    if(chooseDayRef.value){
+    if (chooseDayRef.value) {
      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 +348,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 +409,7 @@ const initChart = (type, values) => {
    },
      {
        type: 'slider',
-        top: 1050,
+        top: top,
        height: 100,
        textStyle: {
          fontSize: 45,
@@ -289,7 +453,7 @@ const initChart = (type, values) => {
        lineStyle: {
          width: 5,
        },
-      },{
+      }, {
        name: "二氧化碳",
        // data: [
        //   56, 12, 89, 34, 71, 43, 67, 20, 98, 72, 19, 61, 3, 85, 47, 92, 17, 76,
--- a/src/components/content/badGasInfo/childComps/GasInfoItem.vue
+++ b/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}`,
      },
    },
  ],
--- a/src/components/content/fanInfo/FanInfo.vue
+++ b/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">
@@ -98,7 +98,10 @@
          <div style="width: 1px;"></div>
        </div>
        <div class="time-select">
-          <choose-day v-if="selectTimeButton===2" ref="chooseDayRef" @select="daySelect"/>
+          <div class="export-btn" @click="handleExport">
+            导出
+          </div>
+          <choose-dates v-if="selectTimeButton===2" ref="chooseDayRef" @select="daySelect"/>
          <choose-month v-if="selectTimeButton===1" ref="chooseMonthRef" @select="monthSelect"/>
          <time-range-btn
              :buttonList="timeList"
@@ -106,6 +109,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>
@@ -117,7 +127,7 @@
 import * as echarts from "echarts";
 import FanInfoItem from "./FanInfoItem.vue";
 import TimeRangeBtn from "@/components/timeRangeBtn/index.vue"
-import ChooseDay from "@/components/chooseDay/index.vue"
+import ChooseDates from "@/components/chooseDates/index.vue"
 import ChooseMonth from "@/components/chooseMonth/index.vue"
 import {
  editFrequency,
@@ -126,6 +136,9 @@ import {
  getFanEchartsInfo
 } from "@/api/largeScreen";
 import {ElMessage, ElMessageBox} from "element-plus";
+import elementResizeDetectorMaker from "element-resize-detector";
+import CsvExportor from "csv-exportor";
+import {getNowFormatDate} from "@/utils/date.js";

 const timeList = ref(["年", "月", "日"]);
 const selectTimeButton = ref(2);
@@ -161,8 +174,13 @@ 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)
+const clickMonth = ref('')
+const clickDay = ref('')
 let myEcharts = reactive({});
 watch(() => props.loading, (now) => {
  props.loading = now
@@ -203,11 +221,67 @@ watch(() => props.list, (now) => {
  })
  handleOnMounted()
 }, {deep: true});
+
+//导出csv
+const handleExport = () => {
+  const header = ['时间', 'A相电流(A)', 'B相电流(A)', 'C相电流(A)'];
+  let newArray = []
+  chartData.dates.forEach((item, index) => {
+    let obj = {
+      dates: chartData.dates[index],
+      currentsA: chartData.currentsA[index],
+      currentsB: chartData.currentsB[index],
+      currentsC: chartData.currentsC[index]
+    }
+    newArray.push(obj)
+  })
+  let time = ''
+  if (selectTimeButton.value === 1) {
+    if (clickMonth.value) {
+      const index = clickMonth.value.lastIndexOf("\-");
+      time = clickMonth.value.substring(0, index)
+    } else {
+      time = getNowFormatDate(false)
+    }
+  } else if (selectTimeButton.value === 2) {
+    if (clickDay.value) {
+      if (clickDay.value[1]) {
+        time = clickDay.value.map(item => item).join('到')
+      } else {
+        time = clickDay.value
+      }
+    } else {
+      time = getNowFormatDate(true)
+    }
+  } else if (selectTimeButton.value === 0) {
+    time = new Date().getFullYear() + '年'
+  }
+  const name = fanIndex.value + '号风机电流监控数据-' + time
+  CsvExportor.downloadCsv(newArray, {header}, `${name}.csv`);
+}
 const daySelect = (val) => {
-  getFanInfo(openEquipmentId.value, 'day', val)
+  if (val) {
+    clickDay.value = val
+    if (isFullScreen.value) {
+      getFanInfo(openEquipmentId.value, 'day', '', '', val[0], val[1])
+    } else {
+      getFanInfo(openEquipmentId.value, 'day', '', true, val[0], val[1])
+    }
+  } else {
+    if (isFullScreen.value) {
+      getFanInfo(openEquipmentId.value, 'day', '')
+    } else {
+      getFanInfo(openEquipmentId.value, 'day', '', true)
+    }
+  }
 }
 const monthSelect = (val) => {
-  getFanInfo(openEquipmentId.value, 'month', val)
+  clickMonth.value = val
+  if (isFullScreen.value) {
+    getFanInfo(openEquipmentId.value, 'month', val)
+  } else {
+    getFanInfo(openEquipmentId.value, 'month', val, true)
+  }
 }
 const changeDate = (index) => {
  switch (index) {
@@ -220,8 +294,42 @@ const changeDate = (index) => {
  }
 }
 const timeSelect = (index) => {
-  getFanInfo(openEquipmentId.value, changeDate(index))
-};
+  if (isFullScreen.value) {
+    getFanInfo(openEquipmentId.value, changeDate(index))
+  } else {
+    getFanInfo(openEquipmentId.value, changeDate(index), '', true)
+  }
+}
+//放大弹窗
+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('shrink-screen-dialog')
+  titleName.style.fontSize = '70px'
+  erd.listenTo(document.getElementById('fanDialog'), (element) => {
+    fanChart.style.height = (element.offsetHeight - 140) + '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('shrink-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,14 +410,39 @@ const changeModel = (item) => {
    item.autoMode = !item.autoMode
  });
 }
-const getFanInfo = (equipmentId, type = 'day', time = '') => {
-  isVisited.value = true
+const getFanInfo = (equipmentId, type = 'day', time = '', flag, startTime, endTime) => {
  showLoading.value = true
-  getFanEchartsInfo(equipmentId, time, type).then(res => {
+  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, startTime, endTime).then(res => {
    if (res?.code === 1000) {
      showLoading.value = false
+      chartData = res.data
      nextTick(() => {
-        initChart(res.data.dates, res.data.currentsA, res.data.currentsB, res.data.currentsC)
+        if (flag) {
+          const fanChart = document.getElementById('containerFan')
+          const erd = elementResizeDetectorMaker();
+          erd.listenTo(document.getElementById('fanDialog'), (element) => {
+            fanChart.style.height = element.offsetHeight - 140 + 'px'
+            myEcharts.resize();
+          });
+          if (!isFullScreen.value) {
+            initChart(res.data.dates, res.data.currentsA, res.data.currentsB, res.data.currentsC, '93%')
+          }
+        } 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)
+        }
      })
    }
  })
@@ -323,10 +456,14 @@ const handleOpenChart = (item) => {
      chooseDayRef.value.clearData()
    }
  })
+  clickMonth.value = ''
+  clickDay.value = ''
+  isVisited.value = true
  selectTimeButton.value = 2
  openEquipmentId.value = item.equipmentId
-  getFanInfo(item.equipmentId, 'day')
-  if (item.equipmentId === 22) {
+  isFullScreen.value = false
+  getFanInfo(item.equipmentId, 'day', '', true)
+  if (item.equipmentType === "frequency1") {
    fanIndex.value = '一'
  } else {
    fanIndex.value = '二'
@@ -338,7 +475,7 @@ const getTransData = (data) => {
  data?.map(item => {
    tranObj = {
      equipmentId: item.equipmentId,
-      max: 800,
+      max: 600,
      valueA: item.phaseCurrentA,
      pointA: item.phaseCurrentAThreshold,
      valueB: item.phaseCurrentB,
@@ -357,10 +494,10 @@ const getTransData = (data) => {
 }

 const changeNum = (item) => {
-  switch (item.equipmentName) {
-    case '1号变频器':
+  switch (item.equipmentType) {
+    case "frequency1":
      return '一';
-    case '2号变频器':
+    case "frequency2":
      return '二';
  }
 }
@@ -388,7 +525,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 +666,7 @@ const changeStateText = (breakdown, running) => {
 /**
 * 初始化echarts实例方法
 */
-const initChart = (type, valueA, valueB, valueC) => {
+const initChart = (type, valueA, valueB, valueC, top) => {
  //3.初始化container容器
  myEcharts = echarts.init(document.getElementById('containerFan'));
  //5.传入数据
@@ -575,21 +711,12 @@ const initChart = (type, valueA, valueB, valueC) => {
        return res
      },
    },
-    toolbox: {
-      show: false,
-      right: 10,
-      feature: {
-        dataZoom: {
-          yAxisIndex: 'none'
-        }
-      }
-    },
    dataZoom: [{
      type: 'inside',
    },
      {
        type: 'slider',
-        top: 1050,
+        top: top,
        height: 100,
        textStyle: {
          fontSize: 45,
@@ -665,6 +792,11 @@ const initChart = (type, valueA, valueB, valueC) => {

 <style lang="scss" scoped>

+#fanDialog {
+  overflow: hidden;
+}
+
+
 :deep( .el-radio__input.is-checked + .el-radio__label) {
  color: #38CAFB;
 }
@@ -711,7 +843,7 @@ input[type="number"] {
 }

 :deep( .el-radio__label) {
-  font-size: 28px;
+  font-size: 30px;
  color: #38cafb;
  margin-top: -5px;
 }
@@ -843,7 +975,7 @@ input[type="number"] {
        .fan-name {
          width: 39px;
          height: 140px;
-          font-size: 26px;
+          font-size: 29px;
          color: #38cafb;
          line-height: 35px;
          text-align: center;
@@ -861,7 +993,7 @@ input[type="number"] {
            display: flex;
            flex-direction: column;
            justify-content: center;
-            font-size: 28px;
+            font-size: 29px;
            color: #38cafb;
            line-height: 35px;
            gap: 40px;
@@ -874,7 +1006,7 @@ input[type="number"] {
              display: flex;
              align-items: center;
              height: 45px;
-              margin-right: 15px;
+              //margin-right: 15px;
              color: #fff;
              background-color: #3eab3f;
              padding-left: 10px;
@@ -919,9 +1051,9 @@ input[type="number"] {
            flex-direction: column;
            justify-content: center;
            //padding: 0 20px;
-            font-size: 28px;
+            font-size: 29px;
            color: #38cafb;
-            line-height: 37px;
+            line-height: 43px;
            gap: 40px;

            .check-box {
@@ -1011,7 +1143,7 @@ input[type="number"] {
        margin-right: 20px;
        margin-left: 26px;
        //height: 37px;
-        font-size: 28px;
+        font-size: 29px;
        color: #FFFFFF;
        cursor: pointer;

--- a/src/components/content/usedEle/UsedEle.vue
+++ b/src/components/content/usedEle/UsedEle.vue
@@ -1,10 +1,10 @@
 <template>
  <div id="used-ele" :style="{ backgroundColor: bgImage }" @click="handleOpenChart">
-<!--    <div v-if="electricityConsumptionMonthly===0&&monthlySavings===0" class="showNull ">-->
-<!--      <div class="loading" v-if="loading===0"></div>-->
-<!--      {{ loading === 0 ? '加载中...' : '暂无数据~' }}-->
-<!--    </div>-->
-    <div  class="content">
+    <!--    <div v-if="electricityConsumptionMonthly===0&&monthlySavings===0" class="showNull ">-->
+    <!--      <div class="loading" v-if="loading===0"></div>-->
+    <!--      {{ loading === 0 ? '加载中...' : '暂无数据~' }}-->
+    <!--    </div>-->
+    <div class="content">
      <div class="item">
        <div class="container" ref="length">
          <div class="value" ref="valueA"></div>
@@ -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">
@@ -72,6 +72,9 @@
        <div style="width: 1px;"></div>
      </div>
      <div class="time-select">
+        <div class="export-btn" @click="handleExport">
+          导出
+        </div>
        <choose-month v-if="selectTimeButton===1" ref="chooseMonthRef" @select="monthSelect"/>
        <time-range-btn
            :buttonList="timeList"
@@ -79,6 +82,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 +99,9 @@ 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";
+import CsvExportor from "csv-exportor";
+import {getNowFormatDate} from "@/utils/date.js";

 const props = defineProps({
  list: Array,
@@ -104,6 +116,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)
@@ -137,7 +152,7 @@ watch(() => props.eleData, (now) => {
    })
    getBasicData(now.largeScreenElectricity)
  }
- nextTick(() => {
+  nextTick(() => {
    setValueA()
    setValueB()
  })
@@ -156,6 +171,59 @@ watch(() => props.eleData, (now) => {
 //   setValueA()
 //   setValueB()
 // }, {deep: true});
+const handleExport = () => {
+  const header = ['月总用电量(kwh)', '月总节省电量(kwh)', '时间', '日用电量(kwh)', '日节省量(kwh)'];
+  let newArray = []
+  chartData.dates.forEach((item, index) => {
+    let obj = {
+      totalElectricityConsumption: chartData.totalElectricityConsumption,
+      saveElectricity: chartData.saveElectricity,
+      dates: chartData.dates[index],
+      consumptionValues: chartData.consumptionValues[index],
+      saveElectricityValues: chartData.saveElectricityValues[index]
+    }
+    newArray.push(obj)
+  })
+  let time = ''
+  if (selectTimeButton.value === 1) {
+    if (monthValue.value) {
+      const index = monthValue.value.lastIndexOf("\-");
+      time = monthValue.value.substring(0, index)
+    } else {
+      time = getNowFormatDate(false)
+    }
+  } else if (selectTimeButton.value === 0) {
+    time = new Date().getFullYear() + '年'
+  }
+  const name = changeNum(chooseChartFan.value) + '用电量监控数据-' + time
+  CsvExportor.downloadCsv(newArray, {header}, `${name}.csv`);
+}
+//放大弹窗
+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:
@@ -168,14 +236,14 @@ const setValueA = () => {
  if (electricityConsumptionMonthly.value === 0 || length.value === null) {
    valueA.value.style.height = `0px`;
  }
-  let width = (electricityConsumptionMonthly.value * length.value?.offsetHeight) / 40000;
+  let width = (electricityConsumptionMonthly.value * length.value?.offsetHeight) / 100000;
  valueA.value.style.height = `${width}px`;
 }
 const setValueB = () => {
  if (monthlySavings.value === 0 || length.value === null) {
    valueB.value.style.height = `0px`;
  }
-  let width = (monthlySavings.value * length.value?.offsetHeight) / 40000;
+  let width = (monthlySavings.value * length.value?.offsetHeight) / 100000;
  valueB.value.style.height = `${width}px`;
 }
 const getBasicData = (data) => {
@@ -185,7 +253,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 +266,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()
+        }
      })
    }
  })
@@ -222,19 +327,23 @@ const getFanInfo = (equipmentId, type = 'month', time = '') => {
  })
 }
 const handleOpenChart = () => {
+  monthValue.value=''
  selectTimeButton.value = 1
  isVisited.value = true
  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 +401,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">
@@ -23,6 +23,9 @@
          <div style="width: 1px;"></div>
        </div>
        <div class="time-select">
+          <div class="export-btn" @click="handleExport">
+            导出
+          </div>
          <choose-day v-if="selectTimeButton===2" ref="chooseDayRef" @select="daySelect"/>
          <choose-month v-if="selectTimeButton===1" ref="chooseMonthRef" @select="monthSelect"/>
          <time-range-btn
@@ -31,6 +34,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>
@@ -43,8 +53,11 @@ import WindPressureItem from "./childComps/WindPressureItem.vue";
 import TimeRangeBtn from "@/components/timeRangeBtn/index.vue"
 import * as echarts from 'echarts';
 import {getEchartsInfo} from "@/api/largeScreen";
-import ChooseDay from "@/components/chooseDay/index.vue"
+import ChooseDay from "@/components/chooseDates/index.vue"
 import ChooseMonth from "@/components/chooseMonth/index.vue"
+import elementResizeDetectorMaker from "element-resize-detector";
+import CsvExportor from "csv-exportor";
+import {getNowFormatDate} from "@/utils/date.js";

 const props = defineProps({
  list: Array,
@@ -59,9 +72,14 @@ 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([]);
+const clickMonth = ref('')
+const clickDay = ref('')
 watch(() => props.list, (now) => {
  wpList.value.forEach(item => {
    now.forEach(newItem => {
@@ -75,22 +93,134 @@ watch(() => props.list, (now) => {
 watch(() => props.winData, (now) => {
  getScreenInfo(now.windPressureSensorList)
 }, {deep: true});
+//导出csv
+const handleExport = () => {
+  let clickUnit = ''
+  wpList.value.forEach(item => {
+    if (item.equipmentName === windSort.value) {
+      clickUnit = item.unit
+    }
+  })
+  const header = ['时间', `风压值(${clickUnit})`];
+  let newArray = []
+  chartData.dates.forEach((item, index) => {
+    let obj = {
+      dates: chartData.dates[index],
+      values: chartData.values[index]
+    }
+    newArray.push(obj)
+  })
+  let time = ''
+  if (selectTimeButton.value === 1) {
+    if (clickMonth.value) {
+      const index = clickMonth.value.lastIndexOf("\-");
+      time = clickMonth.value.substring(0, index)
+    } else {
+      time = getNowFormatDate(false)
+    }
+  } else if (selectTimeButton.value === 2) {
+    if (clickDay.value) {
+      if (clickDay.value[1]) {
+        time = clickDay.value.map(item => item).join('到')
+      } else {
+        time = clickDay.value
+      }
+    } else {
+      time = getNowFormatDate(true)
+    }
+  } else if (selectTimeButton.value === 0) {
+    time = new Date().getFullYear() + '年'
+  }
+  const name = windSort.value + '监控数据-' + time
+  CsvExportor.downloadCsv(newArray, {header}, `${name}.csv`);
+}
+//放大弹窗
+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 - 140) + '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 (val) {
+    clickDay.value = val
+    if (isFullScreen.value) {
+      getWindInfo(windSortId.value, 'day', '','', val[0], val[1])
+    } else {
+      getWindInfo(windSortId.value, 'day', '', true, val[0], val[1])
+    }
+  }else {
+    if (isFullScreen.value) {
+      getWindInfo(windSortId.value, 'day', '')
+    } else {
+      getWindInfo(windSortId.value, 'day', '', true)
+    }
+  }
 }
 const monthSelect = (val) => {
-  getWindInfo(windSortId.value, 'month', val)
+  clickMonth.value = 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, startTime, endTime) => {
  isVisited.value = true
  showLoading.value = true
-  getEchartsInfo(equipmentId, time, type).then(res => {
+  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, startTime, endTime).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 - 140 + 'px'
+            myEcharts.resize();
+          });
+          if (!isFullScreen.value) {
+            initChart(res.data.dates, res.data.values, '93%')
+          }
+        } else {
+          shrinkScreen()
+        }
      })
-    }else {
+    } else {
      loadingText.value = res.msg
    }
  })
@@ -101,15 +231,18 @@ const getWindInfo = (equipmentId, type = 'day', time = '') => {

 const handleOpenChart = (item) => {
  selectTimeButton.value = 2
-  nextTick(()=>{
-    if(chooseMonthRef.value){
+  clickMonth.value = ''
+  clickDay.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 +257,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 = {}
@@ -133,14 +270,14 @@ const getScreenInfo = (now) => {
    windPressureObj = {
      equipmentId: item.equipmentId,
      equipmentName: item.equipmentName,
-      max: 120,
+      max: item.maxRange,
      value: item.value,
      point: item.valueThreshold,
      unit: item.unit
    }
    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 +285,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 +341,7 @@ const initChart = (type, values) => {
    },
      {
        type: 'slider',
-        top: 1050,
+        top: top,
        height: 100,
        textStyle: {
          fontSize: 45,
--- a/src/components/content/windPressure/childComps/WindPressureItem.vue
+++ b/src/components/content/windPressure/childComps/WindPressureItem.vue
@@ -1,7 +1,7 @@
 <template>
  <div id="wind-pressure-item" :class="{ abnormal:isWaring }">
    <div class="label">
-      <img src="../../../../assets/images/windPressure/icon.png" alt=""/>
+      <img src="@/assets/images/windPressure/icon.png" alt=""/>
      <span>{{params.wp.equipmentName}}</span>
    </div>
    <div class="container" ref="length">
@@ -27,17 +27,15 @@ const params = defineProps({
 const length = ref(null);
 const value = ref(null);
 const point = ref(null);
-onMounted(handleOnMounted);
-
-function handleOnMounted() {
+onMounted(()=>{
  setValue();
-}
+});

 watch(() => params.wp.value, () => {
  setValue();
 });

-function setValue() {
+const setValue=()=> {
  let width = (params.wp.value * length.value.offsetWidth) / params.wp.max;
  value.value.style.width = `${width}px`;
  let flag = (params.wp.point * length.value.offsetWidth) / params.wp.max;
@@ -107,7 +105,7 @@ let isWaring = computed(() => {

  .container {
    width: 500px;
-    height: 24px;
+    height: 25px;
    border-radius: 12px;
    border: 1px solid #0f82af;
    position: relative;
--- a/src/utils/date.js
+++ b/src/utils/date.js
@@ -18,9 +18,22 @@ export const dateFormat = (time = new Date().getTime(),flag) => { //YYYY年MM月
    return `${Y}年${M}月${D}日 星期${week}`;
  }
 }
-
+export const getNowFormatDate = (flag) => {
+  let date = new Date(),
+    year = date.getFullYear(), //获取完整的年份(4位)
+    month = date.getMonth() + 1, //获取当前月份(0-11,0代表1月)
+    strDate = date.getDate() // 获取当前日(1-31)
+  if (month < 10) month = `0${month}` // 如果月份是个位数，在前面补0
+  if (strDate < 10) strDate = `0${strDate}` // 如果日是个位数，在前面补0
+  if(flag){
+    return `${year}-${month}-${strDate}`
+  }else {
+    return `${year}-${month}`
+  }
+}
 export default {
-  dateFormat
+  dateFormat,
+  getNowFormatDate
 }


--- a/src/views/device-manage/index.vue
+++ b/src/views/device-manage/index.vue
@@ -76,7 +76,7 @@
                            @change="changeFanData(scope.row)"></el-input>
                </template>
              </el-table-column>
-              <el-table-column prop="state" label="状态" align="center"  min-width="86">
+              <el-table-column prop="state" label="状态" align="center" min-width="86">
                <template #default="scope">
                  <div class="switch">
                    <div
@@ -135,6 +135,18 @@
                            @change="changeWindData(scope.row)"></el-input>
                </template>
              </el-table-column>
+              <el-table-column prop="miniRange" label="最小范围" align="center">
+                <template #default="scope">
+                  <el-input placeholder="最小范围" v-model="scope.row.miniRange"
+                            @change="changeWindData(scope.row)"></el-input>
+                </template>
+              </el-table-column>
+              <el-table-column prop="maxRange" label="最大范围" align="center">
+                <template #default="scope">
+                  <el-input placeholder="最大范围" v-model="scope.row.maxRange"
+                            @change="changeWindData(scope.row)"></el-input>
+                </template>
+              </el-table-column>
              <el-table-column prop="state" label="状态" align="center">
                <template #default="scope">
                  <div class="switch wind-switch">
@@ -194,6 +206,18 @@
                            @change="changeOtherData(scope.row)"></el-input>
                </template>
              </el-table-column>
+              <el-table-column prop="miniRange" label="最小范围" align="center">
+                <template #default="scope">
+                  <el-input placeholder="最小范围" v-model="scope.row.miniRange"
+                            @change="changeOtherData(scope.row)"></el-input>
+                </template>
+              </el-table-column>
+              <el-table-column prop="maxRange" label="最大范围" align="center">
+                <template #default="scope">
+                  <el-input placeholder="最大范围" v-model="scope.row.maxRange"
+                            @change="changeOtherData(scope.row)"></el-input>
+                </template>
+              </el-table-column>
              <el-table-column prop="state" label="状态" align="center">
                <template #default="scope">
                  <div class="switch wind-switch">
@@ -286,6 +310,7 @@
 import {ElLoading, ElMessage} from "element-plus";
 import {getEquipmentList, editEquipment, getTunnelDetail} from "@/api/tunnelManage";
 import TunnelTitle from "@/components/tunnelTitle/index.vue";
+
 const router = useRouter()
 const tunnelId = reactive(router.currentRoute.value.params.tunnelId)
 const userId = reactive(router.currentRoute.value.params.userId)
@@ -306,45 +331,88 @@ const frequencyData = ref([])
 const siteId = ref(0)
 const tunnelName = ref('')
 const changeFan = (e) => {
-  const fanObj = {
-    acquisitionPeriod: e * 1000,
-    tunnelId: tunnelId,
-    typeKey: 'frequency'
-  }
-  frequencyData.value.push(fanObj)
+  // const fanObj = {
+  //   acquisitionPeriod: e * 1000,
+  //   tunnelId: tunnelId,
+  //   typeKey: 'frequency'
+  // }
+  // frequencyData.value.push(fanObj)
 }
 const changeFanData = (row) => {
-  editFanData.value.push(row)
+  // editFanData.value.push(row)
 }
 const changeWind = (e) => {
-  const windObj = {
-    acquisitionPeriod: e * 1000,
-    tunnelId: tunnelId,
-    typeKey: 'windPressure'
-  }
-  frequencyData.value.push(windObj)
+  // const windObj = {
+  //   acquisitionPeriod: e * 1000,
+  //   tunnelId: tunnelId,
+  //   typeKey: 'windPressure'
+  // }
+  // frequencyData.value.push(windObj)
 }
 const changeWindData = (row) => {
-  editWinData.value.push(row)
+  // editWinData.value.push(row)
 }
 const changeOther = (e) => {
-  const otherObj = {
-    acquisitionPeriod: e * 1000,
-    tunnelId: tunnelId,
-    typeKey: 'sensor'
-  }
-  frequencyData.value.push(otherObj)
+  // const otherObj = {
+  //   acquisitionPeriod: e * 1000,
+  //   tunnelId: tunnelId,
+  //   typeKey: 'sensor'
+  // }
+  // frequencyData.value.push(otherObj)
 }
 const changeOtherData = (row) => {
-  editOtherData.value.push(row)
+  // editOtherData.value.push(row)
+}
+const changeData = (item) => {
+  return {
+    equipmentId: item.equipmentId,
+    unit: item.unit,
+    alarmValue: item.alarmValue,
+    miniRange: parseInt(item.miniRange),
+    maxRange: parseInt(item.maxRange),
+    state: item.state,
+  }
 }
 const editEquip = () => {
+  let newFrequency = [{
+    acquisitionPeriod: fanFrequency.value * 1000,
+    tunnelId: parseInt(tunnelId),
+    typeKey: 'frequency'
+  }, {
+    acquisitionPeriod: windFrequency.value * 1000,
+    tunnelId: parseInt(tunnelId),
+    typeKey: 'windPressure'
+  }, {
+    acquisitionPeriod: otherFrequency.value * 1000,
+    tunnelId: parseInt(tunnelId),
+    typeKey: 'sensor'
+  }]
+  let newFan = []
+  let newWind = []
+  let newSensor = []
+  fanData.value.forEach(item => {
+    let obj = {
+      equipmentId: item.equipmentId,
+      ratedPower:parseInt(item.ratedPower),
+      acurrentValue: parseInt(item.acurrentValue),
+      bcurrentValue: parseInt(item.bcurrentValue),
+      ccurrentValue: parseInt(item.ccurrentValue),
+      state: parseInt(item.state)
+    }
+    newFan.push(obj)
+  })
+  winData.value.forEach(item => {
+    newWind.push(changeData(item))
+  })
+  otherData.value.forEach(item => {
+    newSensor.push(changeData(item))
+  })
  const basicData = {
    tunnelId: tunnelId,
-    acquisitionList: frequencyData.value,
-    frequencyChangerList: editFanData.value,
-    windPressureSensorList: editWinData.value,
-    sensorList: editOtherData.value,
+    acquisitionList: newFrequency,
+    frequencyChangerList: newFan,
+    windPressureSensorList: newWind,
+    sensorList: newSensor,
    // shuntList: editFenLiuData.value,
  }
  editEquipment(basicData).then(res => {
@@ -366,7 +434,7 @@ const getList = () => {
    lock: true,
    text: '正在加载系统资源...',
    background: 'rgba(0, 0, 0, 0.7)',
-    customClass:'allLoading'
+    customClass: 'allLoading'
  })
  getEquipmentList(tunnelId).then(res => {
    if (res.code === 1000) {
@@ -577,7 +645,7 @@ getList()
        }

        .wind-switch {
-          margin-left: 65px;
+          margin-left: 26px;
        }

        .switch {
--- a/src/views/site/index.vue
+++ b/src/views/site/index.vue
@@ -167,7 +167,7 @@ const info = ref({
 })
 const title = ref('新增站点')
 const isVisited = ref(false);
-const isUploadVisited = ref(false);
+let isUploadVisited = ref(false);
 const showFirst = ref(true)
 const total = ref(10);
 const showAddIcon = ref(true)
@@ -206,7 +206,7 @@ const getList = () => {
    lock: true,
    text: '正在加载系统资源...',
    background: 'rgba(0, 0, 0, 0.7)',
-    customClass:'allLoading'
+    customClass: 'allLoading'
  })
  getSiteList({
    userId: userId,
@@ -272,7 +272,7 @@ const handleEdit = (item) => {
    lock: true,
    text: '正在加载系统资源...',
    background: 'rgba(0, 0, 0, 0.7)',
-    customClass:'allLoading'
+    customClass: 'allLoading'
  })
  getSiteDetail(item.siteId).then((res) => {
    form.value = res.data;
@@ -667,7 +667,7 @@ const handleCurrentChange = (val) => {

        .left-img {
          margin-top: 50px;
-          margin-right: 60px;
+          margin-right: 36px;
          width: 500px;
          height: 370px;
          background-image: url('@/assets/images/site/zdgl_zd.png');
@@ -690,7 +690,7 @@ const handleCurrentChange = (val) => {
            .tunnel {
              cursor: pointer;
              margin-right: 20px;
-              width: 280px;
+              width: 320px;
              height: 350px;
              background: #3FBED1;
              border-radius: 16px;
@@ -698,15 +698,24 @@ const handleCurrentChange = (val) => {
              flex-direction: column;
              align-items: center;
              color: #FFFFFF;
+              text-align: center;

              > div:first-child {
-                height: 37px;
+                width: 240px;
+                //height: 37px;
                font-size: 32px;
                margin-top: 20px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
              }

              > div:nth-child(3) {
+                width: 310px;
                margin-bottom: 18px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
              }

              > div:nth-child(3), > div:nth-child(4) {
--- a/src/views/tunnel-manage/index.vue
+++ b/src/views/tunnel-manage/index.vue
@@ -327,7 +327,7 @@ const getList = () => {
    lock: true,
    text: '正在加载系统资源...',
    background: 'rgba(0, 0, 0, 0.7)',
-    customClass:'allLoading'
+    customClass: 'allLoading'
  })
  getTunnelList({
    siteId: siteId,
@@ -634,6 +634,7 @@ const handleMoreDelete = () => {
      color: #fff;
      font-size: 38px;
    }
+
    .el-input__suffix-inner {
      font-size: 30px;
      color: #08B7B8;
@@ -770,7 +771,13 @@ const handleMoreDelete = () => {
        font-size: 45px;
        font-weight: bold;
        color: #FFFFFF;
-        line-height: 42px;
+        line-height: 50px;
+
+        > span {
+          text-overflow: ellipsis;
+          overflow: hidden;
+          white-space: nowrap;
+        }

        > span:nth-child(2) {
          font-size: 38px;
@@ -779,6 +786,8 @@ const handleMoreDelete = () => {


        > span:last-child {
+          margin-left: 5px;
+          width: 95px;
          padding: 1px 8px;
          font-size: 32px;
          border: 2px solid #05FEFF;
@@ -896,8 +905,9 @@ const handleMoreDelete = () => {
    color: #60DDDE;
    font-size: 38px;
    font-weight: bold;
+
    :deep(.el-pagination.is-background ) {
-      .btn-next,.btn-prev {
+      .btn-next, .btn-prev {
        background-color: transparent;
      }

--- a/src/views/tunnel/index.vue
+++ b/src/views/tunnel/index.vue
@@ -4,8 +4,8 @@
      <manage-btn v-model="selectIndex" @select="manageSelect" :list="routeList" v-if="showMenu" />
      <tunnel-title v-if="showTunnelTitle" />
      <div class="top-length">
-        <!--        <span>隧道总长度: {{ tunnelLength }}米</span>-->
-        <span>当前施工长度: {{ constructionLength }}米</span>
+        <span>隧道总长度: {{ tunnelLength }}米</span>
+        <!--        <span>当前施工长度: {{ constructionLength }}米</span>-->
      </div>
      <div class="top-right">
        <div class="current-site">
@@ -72,7 +72,7 @@
      <div class="arrow right" @click="nextBtn"></div>
    </div>
  </div>
-  <div class="alarm-dialog digital-tunnel">
+  <div class="alarm-dialog alarm-tunnel">
    <el-dialog :close-on-click-modal="false" v-model="isDetailVisited" title="报警信息详情" width="1500px">
      <div class="detail">
        <div>报警时间：</div>
@@ -84,7 +84,7 @@
      </div>
    </el-dialog>
  </div>
-  <div class="digital-tunnel">
+  <div class="alarm-tunnel">
    <el-dialog :close-on-click-modal="false" v-model="isVisited" title="报警信息" width="2175px" :modal="false">
      <div class="left-top-icon"></div>
      <div class="right-top-icon"></div>
@@ -102,16 +102,12 @@
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
-      <div class="device-table">
+      <div class="device-table" :style="{ marginTop: roleKey === 'administrator' ? '40px' : '0' }">
        <el-table stripe v-loading="loading" :empty-text="tableEmptyText"
          style="background-color: #011c29;--el-table-border-color: none;"
          :header-cell-style="{ backgroundColor: '#064B66', color: '#fff', fontSize: '40px', borderBottom: 'none' }"
          :data="alarmList">
-          <!--          <el-table-column prop="equipmentId" label="设备名称" align="center" width="400px">-->
-          <!--            <template #default="scope">-->
-          <!--              {{ changeName(scope.row.equipmentId) }}-->
-          <!--            </template>-->
-          <!--          </el-table-column>-->
+          <el-table-column prop="tunnelName" label="隧道名称" align="center" width="400px" />
          <el-table-column prop="alarmContent" label="告警信息" align="center" />
          <el-table-column prop="alarmTime" label="告警时间" align="center" width="480px" />
          <el-table-column prop="lookupStatus" label="查阅状态" align="center" width="200px"
@@ -133,7 +129,7 @@
            </template>
          </el-table-column>
        </el-table>
-        <div class="pagination" :style="{ bottom: roleKey === 'administrator' ? '50px' : '' }">
+        <div class="pagination" :style="{ bottom: roleKey === 'administrator' ? '40px' : '0' }">
          <el-pagination background v-model:current-page="pageInfo.pageNum" v-model:page-size="pageInfo.pageSize"
            :total="total" prev-text="上一页" next-text="下一页" layout="prev, pager, next"
            @current-change="handleCurrentChange" :hide-on-single-page="true" />
@@ -709,30 +705,6 @@ const initWebSocket = () => {
  }
 }

-.digital-tunnel {
-  .detail {
-    font-size: 50px;
-    color: #FFFFFF;
-
-    >div {
-      color: #f5f5f5;
-      margin-bottom: 10px;
-    }
-  }
-}
-
-.digital-tunnel {
-  :deep(.el-dialog) {
-    height: 1410px;
-
-    .el-tag {
-      font-size: 36px;
-      height: 60px;
-      padding: 0 20px;
-      border-radius: 10px;
-    }
-  }
-}

 .query-form {
  :deep(.el-form-item__label) {