Merge pull request 'dev' (#341) from dev into master

Reviewed-on: http://git.feashow.cn/clay/tunnel-cloud-web/pulls/341
2024-05-23 03:00:26 +00:00
parent bd2a105d98 d0dd2d6043
commit 49dd6a7ed2
26 changed files with 926 additions and 380 deletions
--- a/.drone.yml
+++ b/.drone.yml
@@ -16,7 +16,7 @@ steps:
      - export NODE_MODULES_PATH=`pwd`/node_modules
      # - npm config set registry https://registry.npm.taobao.org
      - set NODE_OPTIONS=--openssl-legacy-provider
-      - npm install
+#      - npm install
      - npm run build
      - echo $NODE_MODULES_PATH
      - cp -r dist /app/build/$DRONE_REPO_NAME
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.2.1",
+    "lodash": "^4.17.21",
    "unplugin-auto-import": "^0.15.3",
    "unplugin-vue-components": "^0.24.1",
    "vite": "^4.3.4"
--- a/public/tunnelModel/chanel-have-wall优化版.gltf
+++ b/public/tunnelModel/chanel-have-wall优化版.gltf
--- 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/styles/index.scss
+++ b/src/assets/styles/index.scss
@@ -282,7 +282,7 @@ body,
  .btn {
    width: 100%;
    margin-top: 14px;
-    font-size: 26px;
+    font-size: 30px;
    color: #9fc3cd;

    .el-carousel__item {
@@ -293,8 +293,8 @@ body,
      display: flex;
      justify-content: center;
      padding-top: 5px;
-      width: 158px;
-      height: 50px;
+      width: 200px;
+      height:60px;
      background-image: url("../images/topAndDown/sp_icon_sdqhx.png");
    }

@@ -302,7 +302,7 @@ body,
      margin-top: -5px;
      color: #ffffff;
      padding-top: 7px;
-      width: 201px;
+      width: 225px;
      height: 62px;
      background-image: url("../images/topAndDown/sp_icon_sdqhd.png");
    }
@@ -538,7 +538,7 @@ body,
    margin: 0;

    .el-dialog__header {
-      padding: 0 0 28px 0;
+      padding: 0 0 46px 0;
      //display: none;
      .el-dialog__title {
        font-size: 50px;
@@ -608,13 +608,30 @@ body,
    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 {
--- a/src/components/chooseDates/index.vue
+++ b/src/components/chooseDates/index.vue
@@ -0,0 +1,162 @@
+<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"
+        @calendar-change="calendarChange"
+    />
+  </div>
+</template>
+
+
+<script setup>
+const selected = ref(false);
+const selectDate = ref();
+const selectButton = ref();
+const emit = defineEmits(["update:modelValue", "select"]);
+const calendarChange = (time) => {
+  let startTime
+  if (time[0] != null && time[1] == null) {
+    startTime = time[0].getTime();
+    selectDate.value = startTime;
+    selected.value = true
+  }
+}
+
+const disabledDate = (date) => {
+  if (!selected.value) {
+    let currDate = new Date();
+    currDate.setFullYear(currDate.getFullYear() - 1);
+    return date.getTime() > Date.now() || date.getTime() < currDate.getTime();
+  } else {
+    let currTime = selectDate.value;
+    let startTime = currTime - (24 * 4 * 60 * 60 * 1000);
+    let endTime = currTime + (24 * 4 * 60 * 60 * 1000);
+    let nowTime = Date.now();
+    endTime = endTime > nowTime ? nowTime : endTime;
+    let time = date.getTime();
+    return !(time >= startTime && time <= endTime);
+  }
+}
+
+const dataSelect = (val) => {
+  if (val !== null) {
+    selected.value = false
+    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;
+          }
+        }
+
+        .today.disabled {
+          .el-date-table-cell__text {
+            font-size: 19px;
+          }
+        }
+
+        .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
@@ -63,15 +63,17 @@ 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,
+  windSpeed: Array,
  airData: Array
 });
 const isFullScreen = ref(false);
@@ -97,11 +99,19 @@ const isWindSpeedVisited = ref(false);
 const showSpeedLoading = ref(false)
 const clickMonth = ref('')
 const clickDay = ref('')
+watch(() => props.windSpeed, (now) => {
+  now.forEach(newItem => {
+    windSpeed.value =parseFloat(newItem.value)
+  })
+})
 watch(() => props.list, (now) => {
  airList.value?.forEach(item => {
    now.forEach(newItem => {
+      if (newItem.equipmentId === 11) {//风向传感器
+        windDirection.value = parseFloat(newItem.value)
+      }
      if (item.equipmentId === newItem.equipmentId) {
-        item.value = newItem.value
+        item.value = parseFloat(newItem.value)
      }
    })
  })
@@ -128,13 +138,13 @@ watch(() => props.airData, (now) => {
 //导出csv
 const handleExport = () => {
  let clickUnit = ''
-  if(dialogTitle.value==='风速'){
-    clickUnit=windSpeedUnit.value
-  }else  if(dialogTitle.value==='风向'){
-    clickUnit=windDirectionUnit.value
-  }else {
+  if (dialogTitle.value === '风速') {
+    clickUnit = windSpeedUnit.value
+  } else if (dialogTitle.value === '风向') {
+    clickUnit = windDirectionUnit.value
+  } else {
    airList.value.forEach(item => {
-      if (item.name=== dialogTitle.value) {
+      if (item.name === dialogTitle.value) {
        clickUnit = item.unit
      }
    })
@@ -158,7 +168,11 @@ const handleExport = () => {
    }
  } else if (selectTimeButton.value === 2) {
    if (clickDay.value) {
-      time = clickDay.value
+      if (clickDay.value[1]) {
+        time = clickDay.value.map(item => item).join('到')
+      } else {
+        time = clickDay.value
+      }
    } else {
      time = getNowFormatDate(true)
    }
@@ -169,11 +183,19 @@ const handleExport = () => {
  CsvExportor.downloadCsv(newArray, {header}, `${name}.csv`);
 }
 const daySelect = (val) => {
-  clickDay.value = val
-  if (isFullScreen.value) {
-    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 {
-    getChartInfo(openDialogId.value, 'day', val,true)
+    if (isFullScreen.value) {
+      getChartInfo(openDialogId.value, 'day', '')
+    } else {
+      getChartInfo(openDialogId.value, 'day', '', true)
+    }
  }
 }
 const monthSelect = (val) => {
@@ -181,7 +203,7 @@ const monthSelect = (val) => {
  if (isFullScreen.value) {
    getChartInfo(openDialogId.value, 'month', val)
  } else {
-    getChartInfo(openDialogId.value, 'month', val,true)
+    getChartInfo(openDialogId.value, 'month', val, true)
  }
 }
 //放大弹窗
@@ -193,7 +215,7 @@ const handleFullScreen = () => {
  fan.classList.remove('shrink-screen-dialog')
  titleName.style.fontSize = '70px'
  erd.listenTo(document.getElementById('airDialog'), (element) => {
-    fanChart.style.height = (element.offsetHeight - 120) + 'px'
+    fanChart.style.height = (element.offsetHeight - 140) + 'px'
    myEcharts.resize();
  });
  nextTick(() => {
@@ -211,10 +233,10 @@ const shrinkScreen = () => {
  myEcharts.resize();
  nextTick(() => {
    isFullScreen.value = true
-    initChart(chartData.dates, chartData.values,dataZoomTop)
+    initChart(chartData.dates, chartData.values, dataZoomTop)
  })
 }
-const getChartInfo = (equipmentId, type = 'day', time = '', flag) => {
+const getChartInfo = (equipmentId, type = 'day', time = '', flag, startTime, endTime) => {
  showSpeedLoading.value = true
  nextTick(() => {
    if (flag) {
@@ -226,20 +248,20 @@ const getChartInfo = (equipmentId, type = 'day', time = '', flag) => {
      }
    }
  })
-  getEchartsInfo(equipmentId, time, type).then(res => {
+  getEchartsInfo(equipmentId, time, type, startTime, endTime).then(res => {
    if (res?.code === 1000) {
      showSpeedLoading.value = false
-      chartData=res.data
+      chartData = res.data
      nextTick(() => {
        if (flag) {
          const fanChart = document.getElementById('containerWind')
          const erd = elementResizeDetectorMaker();
          erd.listenTo(document.getElementById('airDialog'), (element) => {
-            fanChart.style.height = element.offsetHeight - 120 + 'px'
+            fanChart.style.height = element.offsetHeight - 140 + 'px'
            myEcharts.resize();
          });
          if (!isFullScreen.value) {
-            initChart(res.data.dates, res.data.values,'93%')
+            initChart(res.data.dates, res.data.values, '93%')
          }
        } else {
          shrinkScreen()
@@ -256,8 +278,8 @@ const getChartInfo = (equipmentId, type = 'day', time = '', flag) => {
 const handleOpenChart = (id, type) => {
  selectTimeButton.value = 2
  isWindSpeedVisited.value = true
-  clickMonth.value=''
-  clickDay.value=''
+  clickMonth.value = ''
+  clickDay.value = ''
  nextTick(() => {
    if (chooseMonthRef.value) {
      chooseMonthRef.value.clearData()
@@ -270,7 +292,7 @@ const handleOpenChart = (id, type) => {
  if (type === 'air') {
    dialogTitle.value = id.name
    openDialogId.value = id.equipmentId
-    getChartInfo(id.equipmentId, 'day','',true)
+    getChartInfo(id.equipmentId, 'day', '', true)
  } else {
    if (id === "windDirection") {
      dialogTitle.value = '风向'
@@ -278,7 +300,7 @@ const handleOpenChart = (id, type) => {
      dialogTitle.value = '风速'
    }
    openDialogId.value = type
-    getChartInfo(type, 'day','',true)
+    getChartInfo(type, 'day', '', true)
  }
 }
 const changeDate = (index) => {
@@ -295,7 +317,7 @@ const timeSelect = (index) => {
  if (isFullScreen.value) {
    getChartInfo(openDialogId.value, changeDate(index))
  } else {
-    getChartInfo(openDialogId.value, changeDate(index),'',true)
+    getChartInfo(openDialogId.value, changeDate(index), '', true)
  }
 };

@@ -345,7 +367,7 @@ const getAirInfo = (now) => {
    airList.value = airArr
  }
 }
-const initChart = (type, values,top) => {
+const initChart = (type, values, top) => {
  //3.初始化container容器
  myEcharts = echarts.init(document.getElementById('containerWind'));
  //5.传入数据
@@ -502,6 +524,7 @@ const initChart = (type, values,top) => {
      .input-fan {
        cursor: pointer;
        padding-right: 20px;
+
        &:hover {
          //width: 230px;
          padding-left: 20px;
@@ -526,6 +549,7 @@ const initChart = (type, values,top) => {
      .input-fan {
        //margin: 0 26px;
        padding-right: 20px;
+
        &:hover {
          //width: 230px;
          background: #2E5589;
--- a/src/components/content/badGasInfo/BadGasInfo.vue
+++ b/src/components/content/badGasInfo/BadGasInfo.vue
@@ -1,28 +1,16 @@
 <template>
-  <div
-      id="bad-gas-info"
-      :style="{ backgroundImage: 'url(' + getImageUrl(bgImage) + ')' }">
+  <div id="bad-gas-info" :style="{ backgroundImage: 'url(' + getImageUrl(bgImage) + ')' }">
    <div class="title">有害气体</div>
-    <div v-if="badGasList==null||badGasList.length===0" class="showNull">
-      <div class="loading" v-if="loading===0"></div>
+    <div v-if="badGasList == null || badGasList.length === 0" class="showNull">
+      <div class="loading" v-if="loading === 0"></div>
      {{ loading === 0 ? '加载中...' : '暂无数据~' }}
    </div>
    <div v-else class="info-list" @click="handleOpenChart">
-      <gas-info-item
-          v-for="item in badGasList"
-          :key="item.equipmentId"
-          :gasInfo="item"
-      />
+      <gas-info-item v-for="item in badGasList" :key="item.equipmentId" :gasInfo="item" />
    </div>
    <div class="digital-tunnel">
-      <el-dialog
-          :close-on-click-modal="false"
-          v-model="isBadGasVisited"
-          title="有害气体监控数据"
-          width="2175px"
-          :modal="false"
-          id="badDialog"
-      >
+      <el-dialog :close-on-click-modal="false" v-model="isBadGasVisited" title="有害气体监控数据" width="2175px" :modal="false"
+        id="badDialog">
        <div class="left-top-icon"></div>
        <div class="right-top-icon"></div>
        <div class="loading-block" v-if="showLoading">
@@ -37,18 +25,14 @@
          <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
-              :buttonList="timeList"
-              v-model="selectTimeButton"
-              @select="timeSelect"
-          />
+          <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" v-model="selectTimeButton" @select="timeSelect" />
        </div>
        <div class="change-screen">
          <el-icon size="55" color="#05feff" class="full-icon" title="放大" @click.stop="handleFullScreen"
-                   v-if="isFullScreen">
-            <FullScreen/>
+            v-if="isFullScreen">
+            <FullScreen />
          </el-icon>
          <div v-else class="shrink-icon" title="缩小" @click.stop="shrinkScreen"></div>
        </div>
@@ -63,12 +47,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 { getBadGasEchartsInfo } from "@/api/largeScreen";
+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 { getNowFormatDate } from "@/utils/date.js";
 import CsvExportor from "csv-exportor";

 const props = defineProps({
@@ -92,37 +76,37 @@ const clickMonth = ref('')
 const clickDay = ref('')
 const bgImage = computed(() => (isBadGasVisited.value ? "sp_active.png" : "bg.png"));
 watch(
-    () => props.list,
-    (now) => {
-      badGasList.value?.forEach((item) => {
-        now.forEach((newItem) => {
-          if (item.equipmentId === newItem.equipmentId) {
-            item.value = newItem.value;
-          }
-        });
+  () => props.list,
+  (now) => {
+    badGasList.value?.forEach((item) => {
+      now.forEach((newItem) => {
+        if (item.equipmentId === newItem.equipmentId) {
+          item.value = newItem.value;
+        }
      });
-    },
-    {deep: true}
+    });
+  },
+  { deep: true }
 );

 watch(
-    () => props.badGasData,
-    (now) => {
-      if (now.sensorList === null) {
-        badGasList.value = []
-      } else {
-        getBadGasInfo(now.sensorList);
-      }
-    },
-    {deep: true}
+  () => props.badGasData,
+  (now) => {
+    if (now.sensorList === null) {
+      badGasList.value = []
+    } else {
+      getBadGasInfo(now.sensorList);
+    }
+  },
+  { deep: true }
 );

 watch(
-    () => props.tunnelId,
-    (now) => {
-      props.tunnelId = now
-    },
-    {deep: true}
+  () => props.tunnelId,
+  (now) => {
+    props.tunnelId = now
+  },
+  { deep: true }
 );
 //导出csv
 const handleExport = () => {
@@ -135,23 +119,23 @@ const handleExport = () => {
  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
+    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})`];
+  const header = ['时间', `粉尘(${dustUnit})`, `二氧化碳(${carbonUnit})`, `一氧化碳(${carbonMonoxideUnit})`, `二氧化氮(${nitrogenUnit})`, `一氧化氮(${sulfurMonoxideUnit})`, `二氧化硫(${sulfurDioxideUnit})`, `硫化氢(${hydrogenSulfideUnit})`];
  let newArray = []
  chartData.dates.forEach((item, index) => {
    let obj = {
@@ -176,7 +160,11 @@ const handleExport = () => {
    }
  } else if (selectTimeButton.value === 2) {
    if (clickDay.value) {
-      time = clickDay.value
+      if (clickDay.value[1]) {
+        time = clickDay.value.map(item => item).join('到')
+      } else {
+        time = clickDay.value
+      }
    } else {
      time = getNowFormatDate(true)
    }
@@ -184,7 +172,7 @@ const handleExport = () => {
    time = new Date().getFullYear() + '年'
  }
  const name = '有害气体监控数据-' + time
-  CsvExportor.downloadCsv(newArray, {header}, `${name}.csv`);
+  CsvExportor.downloadCsv(newArray, { header }, `${name}.csv`);
 }
 //放大弹窗
 const handleFullScreen = () => {
@@ -195,7 +183,7 @@ const handleFullScreen = () => {
  fan.classList.remove('shrink-screen-dialog')
  titleName.style.fontSize = '70px'
  erd.listenTo(document.getElementById('badDialog'), (element) => {
-    fanChart.style.height = (element.offsetHeight - 120) + 'px'
+    fanChart.style.height = (element.offsetHeight - 140) + 'px'
    myEcharts.resize();
  });
  nextTick(() => {
@@ -217,11 +205,19 @@ const shrinkScreen = () => {
  })
 }
 const daySelect = (val) => {
-  clickDay.value = val
-  if (isFullScreen.value) {
-    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 {
-    getBadGasChartInfo('day', val, true)
+    if (isFullScreen.value) {
+      getBadGasChartInfo('day', '')
+    } else {
+      getBadGasChartInfo('day', '', true)
+    }
  }
 }
 const monthSelect = (val) => {
@@ -255,13 +251,13 @@ const getBadGasInfo = (now) => {
  let windPressureArr = [];
  now?.map((item) => {
    if (
-        item.equipmentType === "dust" ||
-        item.equipmentType === "carbonDioxide" ||
-        item.equipmentType === "carbonMonoxide" ||
-        item.equipmentType === "hydrogenSulfide" ||
-        item.equipmentType === "sulfurDioxide" ||
-        item.equipmentType === "sulfurMonoxide" ||
-        item.equipmentType === "nitrogenDioxide"
+      item.equipmentType === "dust" ||
+      item.equipmentType === "carbonDioxide" ||
+      item.equipmentType === "carbonMonoxide" ||
+      item.equipmentType === "hydrogenSulfide" ||
+      item.equipmentType === "sulfurDioxide" ||
+      item.equipmentType === "sulfurMonoxide" ||
+      item.equipmentType === "nitrogenDioxide"
    ) {
      windPressureObj = changeData(item);
      windPressureArr.push(windPressureObj);
@@ -279,7 +275,7 @@ const changeData = (item) => {
    unit: item.unit,
  };
 };
-const getBadGasChartInfo = (type, time = '', flag) => {
+const getBadGasChartInfo = (type, time = '', flag, startTime, endTime) => {
  showLoading.value = true
  let id = props.tunnelId
  nextTick(() => {
@@ -292,7 +288,7 @@ const getBadGasChartInfo = (type, time = '', flag) => {
      }
    }
  })
-  getBadGasEchartsInfo(id, time, type).then(res => {
+  getBadGasEchartsInfo(id, time, type, startTime, endTime).then(res => {
    if (res?.code === 1000) {
      showLoading.value = false
      chartData = res.data
@@ -301,7 +297,7 @@ const getBadGasChartInfo = (type, time = '', flag) => {
          const fanChart = document.getElementById('containerBad')
          const erd = elementResizeDetectorMaker();
          erd.listenTo(document.getElementById('badDialog'), (element) => {
-            fanChart.style.height = element.offsetHeight - 120 + 'px'
+            fanChart.style.height = element.offsetHeight - 140 + 'px'
            myEcharts.resize();
          });
          if (!isFullScreen.value) {
@@ -331,7 +327,7 @@ const handleOpenChart = () => {
 };
 const getImageUrl = (name) => {
  return new URL(`../../../assets/images/badGasInfo/${name}`, import.meta.url)
-      .href;
+    .href;
 };
 /**
 * 初始化echarts实例方法
@@ -395,15 +391,15 @@ const initChart = (type, values, top) => {
    dataZoom: [{
      type: 'inside'
    },
-      {
-        type: 'slider',
-        top: top,
-        height: 100,
-        textStyle: {
-          fontSize: 45,
-          color: '#fffff'
-        }
+    {
+      type: 'slider',
+      top: top,
+      height: 100,
+      textStyle: {
+        fontSize: 45,
+        color: '#fffff'
      }
+    }
    ],
    //X轴
    xAxis: {
@@ -429,25 +425,12 @@ const initChart = (type, values, top) => {
    //配置项
    series: [
      {
-        name: "粉尘",
+        name: values.dustValues.length!==0?"粉尘":"",
        // data: [
        //   56, 12, 89, 34, 71, 43, 67, 20, 98, 72, 19, 61, 3, 85, 47, 92, 17, 76,
        //   69, 25, 31, 49, 81, 63,
        // ],
-        data: values.dustValues,
-        type: "line",
-        smooth: true,
-        symbolSize: 24,
-        lineStyle: {
-          width: 5,
-        },
-      }, {
-        name: "二氧化碳",
-        // data: [
-        //   56, 12, 89, 34, 71, 43, 67, 20, 98, 72, 19, 61, 3, 85, 47, 92, 17, 76,
-        //   69, 25, 31, 49, 81, 63,
-        // ],
-        data: values.carbonDioxideValues,
+        data: values.dustValues.length!==0?values.dustValues:[],
        type: "line",
        smooth: true,
        symbolSize: 24,
@@ -456,12 +439,26 @@ const initChart = (type, values, top) => {
        },
      },
      {
-        name: "一氧化碳",
+        name: values.carbonDioxideValues.length!==0?"二氧化碳":"",
+        // data: [
+        //   56, 12, 89, 34, 71, 43, 67, 20, 98, 72, 19, 61, 3, 85, 47, 92, 17, 76,
+        //   69, 25, 31, 49, 81, 63,
+        // ],
+        data: values.carbonDioxideValues.length!==0?values.carbonDioxideValues:[],
+        type: "line",
+        smooth: true,
+        symbolSize: 24,
+        lineStyle: {
+          width: 5,
+        },
+      },
+      {
+        name: values.carbonMonoxideValues.length!==0?"一氧化碳":"",
        // data: [
        //   96, 38, 75, 10, 62, 81, 41, 27, 69, 16, 33, 57, 73, 87, 22, 46, 11,
        //   79, 51, 29, 60, 48, 83, 15,
        // ],
-        data: values.carbonMonoxideValues,
+        data: values.carbonMonoxideValues.length!==0?values.carbonMonoxideValues:[],
        type: "line",
        smooth: true,
        symbolSize: 24,
@@ -470,12 +467,12 @@ const initChart = (type, values, top) => {
        },
      },
      {
-        name: "二氧化氮",
+        name: values.nitrogenDioxideValues.length!==0?"二氧化氮":"",
        // data: [
        //   53, 88, 10, 67, 92, 31, 74, 46, 20, 37, 85, 16, 63, 70, 41, 99, 25,
        //   77, 82, 13, 68, 49, 55, 7, 39,
        // ],
-        data: values.nitrogenDioxideValues,
+        data: values.nitrogenDioxideValues.length!==0?values.nitrogenDioxideValues:[],
        type: "line",
        smooth: true,
        symbolSize: 24,
@@ -484,12 +481,12 @@ const initChart = (type, values, top) => {
        },
      },
      {
-        name: "一氧化氮",
+        name: values.sulfurMonoxideValues.length!==0?"一氧化氮":"",
        // data: [
        //   37, 19, 85, 62, 28, 91, 43, 76, 14, 68, 33, 52, 71, 26, 97, 49, 82,
        //   17, 66, 30, 78, 55, 23, 47,
        // ],
-        data: values.sulfurMonoxideValues,
+        data: values.sulfurMonoxideValues.length!==0?values.sulfurMonoxideValues:[],
        type: "line",
        smooth: true,
        symbolSize: 24,
@@ -498,12 +495,12 @@ const initChart = (type, values, top) => {
        },
      },
      {
-        name: "二氧化硫",
+        name: values.sulfurDioxideValues.length!==0?"二氧化硫":"",
        // data: [
        //   6, 30, 91, 77, 28, 51, 42, 83, 16, 65, 35, 72, 18, 96, 47, 79, 100,
        //   23, 80, 44, 62, 59, 13, 86,
        // ],
-        data: values.sulfurDioxideValues,
+        data: values.sulfurDioxideValues.length!==0?values.sulfurDioxideValues:[],
        type: "line",
        smooth: true,
        symbolSize: 24,
@@ -512,12 +509,12 @@ const initChart = (type, values, top) => {
        },
      },
      {
-        name: "硫化氢",
+        name: values.hydrogenSulfideValues.length!==0?"硫化氢":"",
        // data: [
        //   13, 27, 39, 51, 62, 73, 84, 95, 10, 20, 30, 40, 50, 60, 70, 80, 90,
        //   100, 11, 21, 31, 41, 51,
        // ],
-        data: values.hydrogenSulfideValues,
+        data: values.hydrogenSulfideValues.length!==0?values.hydrogenSulfideValues:[],
        type: "line",
        smooth: true,
        symbolSize: 24,
--- a/src/components/content/fanInfo/FanInfo.vue
+++ b/src/components/content/fanInfo/FanInfo.vue
@@ -21,15 +21,15 @@
              <div class="switch">
                <div
                    id="auto"
-                    :class="{ active: item.running }"
-                    @click="item.running = true;editOperate(item,true,'启动')"
+                    :class="{ active: item.manualMode }"
+                    @click="editOperate(item,true,'启动')"
                >
                  启动
                </div>
                <div
                    id="stop"
-                    :class="{ active: !item.running }"
-                    @click="item.running = false;editOperate(item,false,'停止')"
+                    :class="{ active: !item.manualMode }"
+                    @click="editOperate(item,false,'停止')"
                >
                  停止
                </div>
@@ -37,9 +37,13 @@
            </div>
            <div class="power">
              <div class="check-box">
-                <el-radio-group v-model="item.autoMode" @change="changeModel(item)">
-                  <el-radio :label="true">自动</el-radio>
-                  <el-radio :label="false">手动</el-radio>
+<!--                <div style="display: flex;">-->
+<!--                  <el-radio :label="true" @click="changeModel(item)">自动</el-radio>-->
+
+<!--                </div>-->
+                <el-radio-group v-model="item.autoMode">
+                  <el-radio :label="true" @click.prevent ="changeModel(item,true)">自动</el-radio>
+                  <el-radio :label="false" @click.prevent ="changeModel(item,false)">手动</el-radio>
                </el-radio-group>
              </div>
              <div class="edit-power" title="输入完成后, 请回车进行修改">
@@ -101,7 +105,7 @@
          <div class="export-btn" @click="handleExport">
            导出
          </div>
-          <choose-day v-if="selectTimeButton===2" ref="chooseDayRef" @select="daySelect"/>
+          <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"
@@ -127,7 +131,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,
@@ -198,9 +202,14 @@ watch(() => props.list, (now) => {
  socketData.value?.forEach(item => {
    now.forEach(newItem => {
      if (item.equipmentId === newItem.equipmentId) {
-        if (newItem.frequencyFeedback) {
+        if (newItem.hasOwnProperty('frequencyFeedback')) {
          item.frequencySetting = newItem.frequencySetting
          item.frequencyFeedback = newItem.frequencyFeedback
+        } else if (newItem.hasOwnProperty('running')) {
+          item.running = newItem.running
+          item.manualMode = newItem.manualMode
+          item.breakdown = newItem.breakdown
+          item.autoMode = newItem.autoMode
        }
      }
    })
@@ -208,10 +217,7 @@ watch(() => props.list, (now) => {
  transducerData.value.forEach(item => {
    now.forEach(newItem => {
      if (item.equipmentId === newItem.equipmentId) {
-        if (newItem.frequencyFeedback) {
-          item.frequencySetting = newItem.frequencySetting
-          item.frequencyFeedback = newItem.frequencyFeedback
-        } else if (newItem.phaseCurrentA) {
+        if (newItem.hasOwnProperty('phaseCurrentA')) {
          item.valueA = newItem.phaseCurrentA
          item.valueB = newItem.phaseCurrentB
          item.valueC = newItem.phaseCurrentC
@@ -245,7 +251,11 @@ const handleExport = () => {
    }
  } else if (selectTimeButton.value === 2) {
    if (clickDay.value) {
-      time = clickDay.value
+      if (clickDay.value[1]) {
+        time = clickDay.value.map(item => item).join('到')
+      } else {
+        time = clickDay.value
+      }
    } else {
      time = getNowFormatDate(true)
    }
@@ -256,11 +266,19 @@ const handleExport = () => {
  CsvExportor.downloadCsv(newArray, {header}, `${name}.csv`);
 }
 const daySelect = (val) => {
-  clickDay.value = val
-  if (isFullScreen.value) {
-    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 {
-    getFanInfo(openEquipmentId.value, 'day', val, true)
+    if (isFullScreen.value) {
+      getFanInfo(openEquipmentId.value, 'day', '')
+    } else {
+      getFanInfo(openEquipmentId.value, 'day', '', true)
+    }
  }
 }
 const monthSelect = (val) => {
@@ -297,7 +315,7 @@ const handleFullScreen = () => {
  fan.classList.remove('shrink-screen-dialog')
  titleName.style.fontSize = '70px'
  erd.listenTo(document.getElementById('fanDialog'), (element) => {
-    fanChart.style.height = (element.offsetHeight - 120) + 'px'
+    fanChart.style.height = (element.offsetHeight - 140) + 'px'
    myEcharts.resize();
  });
  nextTick(() => {
@@ -353,9 +371,7 @@ const editOperate = (item, flag, type) => {
        ElMessage.error(res.msg)
      }
    })
-  }).catch(() => {
-    item.running = !item.running
-  });
+  })
 }

 const changeFrequency = (item) => {
@@ -371,22 +387,30 @@ const changeFrequency = (item) => {
        ElMessage.warning(res.msg)
      }
    })
-  }).catch(() => {
-    // item.running=!item.running
-  });
+  })
 }
-const changeModel = (item) => {
+const changeModel = (item,type) => {
  let flag
-  if (item.autoMode) {
+  if (type) {
    flag = '自动'
  } else {
    flag = '手动'
  }
+  let number = 0
+  if (item.equipmentType === "frequency1") {
+    number = 1
+  } else if (item.equipmentType === "frequency2") {
+    number = 2
+  }
  ElMessageBox.confirm(`确认修改${changeNum(item)}号风机的模式为${flag}模式吗？`, '系统提示', {
    type: 'warning',
    closeOnClickModal: false
  }).then(() => {
-    const data = packageData(item, item.autoMode)
+    const data = {
+      number: number,
+      state: type ? 1 : 0,
+      tunnelId: props.tunnelId,
+    }
    editFrequencyModelSwitch(data).then(res => {
      if (res.code === 1000) {
        ElMessage.success(res.msg)
@@ -394,11 +418,9 @@ const changeModel = (item) => {
        ElMessage.warning(res.msg)
      }
    })
-  }).catch(() => {
-    item.autoMode = !item.autoMode
-  });
+  })
 }
-const getFanInfo = (equipmentId, type = 'day', time = '', flag) => {
+const getFanInfo = (equipmentId, type = 'day', time = '', flag, startTime, endTime) => {
  showLoading.value = true
  nextTick(() => {
    if (flag) {
@@ -410,7 +432,7 @@ const getFanInfo = (equipmentId, type = 'day', time = '', flag) => {
      }
    }
  })
-  getFanEchartsInfo(equipmentId, time, type).then(res => {
+  getFanEchartsInfo(equipmentId, time, type, startTime, endTime).then(res => {
    if (res?.code === 1000) {
      showLoading.value = false
      chartData = res.data
@@ -419,7 +441,7 @@ const getFanInfo = (equipmentId, type = 'day', time = '', flag) => {
          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 - 140 + 'px'
            myEcharts.resize();
          });
          if (!isFullScreen.value) {
@@ -497,9 +519,10 @@ const getBasicData = (data) => {
      equipmentId: item.equipmentId,
      equipmentName: item.equipmentName,
      equipmentType: item.equipmentType,
-      autoMode: item.autoMode,//自动模式
-      breakdown: item.breakdown,//故障
-      running: item.running,//启动,
+      autoMode: item.autoMode,
+      breakdown: item.breakdown,
+      running: item.running,
+      manualMode: item.manualMode,
      showTooltip: false,
      frequencyFeedback: item.frequencyFeedback,
      frequencySetting: item.frequencySetting
--- a/src/components/content/tunnelScene/PreviewScene.vue
+++ b/src/components/content/tunnelScene/PreviewScene.vue
@@ -19,6 +19,8 @@
                <button @click="handleConfirmAddEqu">确定</button>
            </div>
        </el-dialog>
+
+
    </div>
 </template>

@@ -75,10 +77,10 @@ const loader = new OBJLoader();
 let hdrLoader = new RGBELoader();
 let backColorSet = three.sRGBEncoding;
 const modelStore = useModelSceneStore();
-const params = defineProps(["isedit", "tunnelId", "tunnelLen", "largeScreen"]); //接收参数看是不是编辑模式，如果是编辑模式，则需要做一些处理
-
+const params = defineProps(["isedit", "tunnelId", "tunnelLen", "largeScreen", "fanList"]); //接收参数看是不是编辑模式，如果是编辑模式，则需要做一些处理


+// console.log(load);
 let isedit = ref(params.isedit)
 let fanData;
 let tunnelAlias = reactive('')
@@ -86,20 +88,75 @@ let tunnelAlias = reactive('')
 watch(
    () => params.largeScreen,
    (now) => {
-        console.log(params.largeScreen);
+        // console.log(params.largeScreen);
        params.largeScreen = now;
+        // console.log(toRaw(params.largeScreen.value).frequencyChangerList);
+        // console.log(params.fanList);
        fanData = (toRaw(params.largeScreen.value)).frequencyChangerList;
-        console.log(fanData);
+        // console.log(fanData);
+        // 下面的watch是负责更新fanData的状态，因为风机的状态为实时的，所以我们需要更新其的运行状态
+        watch(
+            () => params.fanList,
+            (now) => {
+                // console.log(params.largeScreen);
+                params.fanList = now;
+                let fanList = toRaw(params.fanList);
+                //首先判断是不是存在autoMode属性
+                if (fanList[0].autoMode !== undefined) {
+                    // console.log(fanData);
+                    // console.log(fanList);
+                    fanList.map(item => {
+                        if (item.equipmentId == fanData[0].equipmentId) {
+                            // console.log(item.equipmentId);
+                            //第一个符合条件
+                            fanData[0].breakdown = item.breakdown
+                            fanData[0].running = item.running
+                            // console.log(demo.scene);
+                            if (demo.scene.Fan1targetPoint.info.equipmentId == fanData[0].equipmentId) {
+                                changeFanColor(fanData, demo.scene.Fan1targetPoint, demo.scene)
+                                // console.log('111');
+                            }
+                            else if (demo.scene.Fan2targetPoint.info.equipmentId == fanData[0].equipmentId) {
+                                // console.log("222");
+                                changeFanColor(fanData, demo.scene.Fan2targetPoint, demo.scene)
+                            }
+                            // console.log(item);
+                            // console.log(fanData[0]);
+                        } else {
+                            // 第二个符合条件
+                            // console.log(item.equipmentId);
+                            fanData[1].breakdown = item.breakdown
+                            fanData[1].running = item.running
+                            // console.log(demo.scene);
+                            if (demo.scene.Fan1targetPoint.info.equipmentId == fanData[1].equipmentId) {
+                                // console.log('111');
+                                changeFanColor(fanData, demo.scene.Fan1targetPoint, demo.scene)
+                            } else if (demo.scene.Fan2targetPoint.info.equipmentId == fanData[1].equipmentId) {
+                                // console.log("222");
+                                changeFanColor(fanData, demo.scene.Fan2targetPoint, demo.scene)
+                            }
+                            // console.log(item);
+                            // console.log(fanData[1]);
+                        }
+                    })
+                }
+
+                // console.log(fanData);
+            },
+            { deep: true }
+        );
    },
    { deep: true }
 );

+
+
 const getTunnel = () => {
    if (params.tunnelId !== 0) {
        getTunnelDetail(params.tunnelId).then((res) => {
            if (res?.code === 1000) {
                form.value = res.data;
-                console.log(form.value.tunnelAlias);
+                // console.log(form.value.tunnelAlias);
                tunnelAlias = form.value.tunnelAlias
            }
        });
@@ -145,6 +202,57 @@ watch(
    { deep: true }
 )

+//这里是改变风机颜色的代码
+function changeFanColor(fanData, targetPoint, scene) {
+    if (fanData !== undefined) {
+        //保证是预览模式才进行这里的操作（！=1）
+        if (fanData.length > 0) {
+            //if保证存在风机（即有长度再进行遍历）
+            for (let i = 0; i < fanData.length; i++) {
+                //先做匹配操作
+                let fanType = fanData[i].equipmentType
+                //有符合条件的风机进来了
+                if (targetPoint.info.typeKey == fanType) {
+                    //下面进行变色需要的逻辑判断了
+                    if (fanData[i].breakdown == true) {
+                        //故障状态，变红色
+                        scene.traverse(function (child) {
+                            if (child.id === targetPoint.info.id) {
+                                child.traverse(function (obj) {
+                                    // console.log(obj);
+                                    // 判断子对象是否是物体，如果是，更改其颜色
+                                    if (obj.isMesh) {
+                                        obj.material.color.set(0xFF0000)
+                                    }
+                                })
+                            }
+                        });
+                    } else {
+                        // 这里再判断是否运行
+                        if (fanData[i].running == true) {
+                            //运行状态,绿色 0x008000
+                            scene.traverse(function (child) {
+                                if (child.id === targetPoint.info.id) {
+                                    child.traverse(function (obj) {
+                                        // console.log(obj);
+                                        // 判断子对象是否是物体，如果是，更改其颜色
+                                        if (obj.isMesh) {
+                                            obj.material.color.set(0x008000)
+                                        }
+                                    })
+                                }
+                            });
+                        } else {
+                            //停止状态，不变色
+                            break;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
 onMounted(handleMounted);
 // 挂载后回调
 async function handleMounted() {
@@ -152,10 +260,10 @@ async function handleMounted() {
    demo = new ThreeDScene(three, content.value);
    //看是不是预览模式，然后继续相关的操作(会在demo中的初始化中进行)
    demo.isedit = params.isedit;
-    let tunnelasync = await demo.loadModel(GLTFLoader, "./assets/tunnelModel/chanel-have-wall.gltf");
+    let tunnelasync = await demo.loadModel(GLTFLoader, "/tunnelModel/chanel-have-wall-now-use.gltf");
    demo.addOrbitControls(OrbitControls);
    demo.addTween(TWEEN);
-    demo.addCSS3Renderer(CSS3DRenderer, CSS3DSprite, doms);
+    demo.addCSS3Renderer(CSS2DRenderer, CSS2DObject, doms);
    demo.setDistance(10);
    lClickCallback(demo); //绑定左键回调
    rClickCallback(demo); //绑定右键回调
@@ -183,19 +291,10 @@ async function handleMounted() {
        // console.log(modelList.value);
        // console.log("init", params.tunnelId);
        demo.previewtunnelModeInit(toRaw(modelList.value), fanData);
+        // setInterval("demo.previewtunnelModeInit(toRaw(modelList.value), fanData)", "1000")
+
        demo.SignsInf(tunnelAlias, String(params.tunnelLen.value))
-        // watch(
-        //     () => params.tunnelId,
-        //     (now) => {
-        //         params.tunnelId = now
-        //         // console.log(params.tunnelId);
-        //         checkTunnelInit(modelList.value)
-        //         demo.previewtunnelModeInit(modelList.value);
-        //     },
-        //     { deep: true }
-        // )
-        // demo.previewtunnelModeInit(equipmentList);
-        // previewEquInfProcess(modelList.value, targetP.value)
+
    } catch (err) {
        if (err == undefined) {
            return
@@ -228,7 +327,11 @@ function loadModel(path) {
            (obj) => {
                resolve(obj);
            },
-            (xhr) => { },
+            (xhr) => {
+                //这里可以拿到加载的进度条！！！
+                // console.log(xhr);
+                console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
+            },
            (err) => {
                reject(err);
            }
@@ -298,6 +401,21 @@ function rClickCallback(demo) {
    demo.addFunction("editDev", editDev);
 }

+function throttle(fn, delay) {
+    var timer;
+    return function () {
+        var _this = this;
+        var args = arguments;
+        if (timer) {
+            return;
+        }
+        timer = setTimeout(function () {
+            fn.apply(_this, args);
+            timer = null; // 在delay后执行完fn之后清空timer，此时timer为假，throttle触发可以进入计时器
+        }, delay)
+    }
+}
+
 // 添加设备
 function handleAddEqu(formInfo) {
    demo.addEquipment(targetP.value, formInfo);
--- a/src/components/content/tunnelScene/TunnelScene.vue
+++ b/src/components/content/tunnelScene/TunnelScene.vue
@@ -50,6 +50,7 @@ import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader";
 import { onMounted, reactive, ref, toRaw, watch } from "vue";
 import { ElMessage } from "element-plus";
 import { useModelSceneStore } from "@/store/modelSceneStore";
+import { LOD } from "three";
 // 获取html标签跟随组件dom
 const content = ref(null);
 const info = ref(null);
@@ -85,12 +86,13 @@ async function handleMounted() {
  demo = new ThreeDScene(three, content.value);
  //看是不是预览模式，然后继续相关的操作(会在demo中的初始化中进行)
  demo.isedit = params.isedit;
-
+  // "../../../../public/tunnelModel/chanel-have-wall-now-use.gltf"
  const loaded = await demo.loadModel(
    GLTFLoader,
-    "./assets/tunnelModel/chanel-have-wall.gltf"
+    "/tunnelModel/chanel-have-wall-now-use.gltf",
+    true
  );
-  demo.addOrbitControls(OrbitControls);
+  demo.addOrbitControls(OrbitControls, true);
  demo.addTween(TWEEN);
  demo.addCSS3Renderer(CSS3DRenderer, CSS3DSprite, doms);
  demo.setDistance(10);
@@ -165,6 +167,8 @@ function editDevInfo(

 //左键/双击左键回调函数
 function lClickCallback(demo) {
+  // console.log('左键点击查看信息');
+
  //demo动态添加函数，为操作组件内部
  function displayDevInfo(targetPoint = null) {
    hasDevice.value = targetPoint.hasDevice;
--- a/src/components/content/tunnelScene/editEquComp/editDialog.vue
+++ b/src/components/content/tunnelScene/editEquComp/editDialog.vue
@@ -4,7 +4,7 @@
      <p>当前距离洞口：{{ pointDistance_str }}</p>
      <img src="/images/htmlEditDialog/back-icon.png" alt="" @click="handleCancel" />
    </div>
-    <div class="equ-info">当前风压:{{ p }}Pa</div>
+    <!-- <div class="equ-info">当前风压:{{ p }}Pa</div> -->
    <div class="setting">
      <div class="setting-item">
        <p>传感器类型</p>
--- a/src/components/content/tunnelScene/preEquComp/preDialog.vue
+++ b/src/components/content/tunnelScene/preEquComp/preDialog.vue
@@ -1,27 +1,27 @@
 <template>
  <div id="edit-dialog">
-    <div class="distance-back">
-      <p>当前距离洞口：
+    <!-- <div class="distance-back"> -->
+    <!-- <p>当前距离洞口：
        <span>
          {{ pointDistance_str }}
        </span>
-      </p>
-      <img src="/images/htmlEditDialog/back-icon.png" alt="" @click="handleCancel" />
-    </div>
-    <div class="equ-info">当前风压:
+      </p> -->
+    <!-- <img src="/images/htmlEditDialog/back-icon.png" alt="" @click="handleCancel" /> -->
+    <!-- </div> -->
+    <!-- <div class="equ-info">当前风压:
      <span>{{ p }}Pa</span>
-    </div>
+    </div> -->
    <div class="setting">
-      <div class="setting-item">
-        <p>传感器类型</p>
-        <!-- <el-select v-model="equipmentSetting.equipmentType" :fit-input-width="true" filterable clearable
+      <!-- <div class="setting-item"> -->
+      <!-- <p>传感器类型</p> -->
+      <!-- <el-select v-model="equipmentSetting.equipmentType" :fit-input-width="true" filterable clearable
          :placeholder="params.equipmentType" disabled>
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select> -->
-        <p>{{ params.equipmentType }}</p>
-      </div>
+      <!-- <p>{{ params.equipmentType }}</p> -->
+      <!-- </div> -->
      <div class="setting-item">
-        <p>设备选择</p>
+        <p>设备名称</p>
        <!-- <el-select v-model="equipmentSetting.chooseEquipment" :fit-input-width="true" filterable clearable
          :placeholder="params.equipmentName" disabled>
          <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value" />
@@ -172,7 +172,9 @@ const equipment = {

 <style lang="scss" scoped>
 #edit-dialog {
-  width: 540px;
+  // width: 540px;
+  width: 190px;
+  height: 150px;
  // min-height: 683px;
  background: rgba(7, 35, 72, 0.79);
  border-radius: 20px;
@@ -233,7 +235,7 @@ const equipment = {
      p {
        width: 190px;
        height: 35px;
-        font-size: 26px;
+        font-size: 18px;
        font-family: MicrosoftYaHei;
        color: #ffffff;
        line-height: 35px;
--- a/src/components/content/tunnelScene/sceneClass/demo.js
+++ b/src/components/content/tunnelScene/sceneClass/demo.js
@@ -1,5 +1,6 @@
 import { handleLClick } from "./handleRLclick/handleLclick";
 import { handleRClick } from "./handleRLclick/handleRclick";
+import { handleLHover } from "./handleRLclick/handleLhover.js"
 import { handleDBLClick } from "./handleDBLclick";
 import { checkAnimation } from "./checkTag";
 import {
@@ -12,6 +13,8 @@ import { editTunnelInit } from "./editTunnelInit";
 import { addEquipment, removeEquipment } from "./editEquipment";
 import previewtunnelModeInit from "./previewTunnelInit"
 import { StreetSignTag } from "./utils/StreetSignTag/StreetSignTag.js";
+// import { fa } from "element-plus/es/locale/index.js";
+// import { ref } from "vue";
 export default class Demo {
  // 摄像机看向位置s
  origin = null;
@@ -22,6 +25,7 @@ export default class Demo {
  constructor(three, mountedElement) {
    this._StreetSignTag = StreetSignTag
    this._handleLClick = handleLClick;
+    this._handleLHover = handleLHover;
    this._handleRClick = handleRClick;
    this._handleDBLClick = handleDBLClick;
    this._checkAnimation = checkAnimation;
@@ -140,12 +144,14 @@ export default class Demo {
   * @param {Object}  GLTFLoader 模型加载器
   * @param {String} path 模型资源路径
   */
-  loadModel(GLTFLoader, path) {
+  loadModel(GLTFLoader, path, isedit) {
    return new Promise((resolve, reject) => {
      this.gltfloader = new GLTFLoader();
      this.gltfloader.load(
-        "/tunnelModel/chanel-have-wall优化版.gltf",
+        //下面是模型加载的路径
+        path,
        (gltf) => {
+          // console.log(isedit);
          gltf.scene.traverse((child) => {
            this._forModels(child);
          });
@@ -153,7 +159,8 @@ export default class Demo {
          gltf.scene.position.set(-5, 0, 10);
          this.scene.add(gltf.scene);
          // 加载完后可执行函数
-          this._afterLoaded(gltf.scene);
+          // console.log(isedit);
+          this._afterLoaded(gltf.scene, isedit);
          resolve(gltf);
        },
        (xhr) => {
@@ -167,11 +174,15 @@ export default class Demo {
    });
  }
  // 模型加载完函数
-  _afterLoaded() {
+  _afterLoaded(scene, isedit) {
+    // console.log(isedit);
    // 可以进行选中
-    this._hoverModel(this.points);
+    this._hoverModel(this.points, isedit);
    // 可以进行点击
-    this._ClickModel(this.points);
+    if (isedit == true) {
+      console.log('dada')
+      this._ClickModel(this.points);
+    }
    //将墙壁进行隐藏
    this.WallInit()
    //对路牌进行相关操作
@@ -198,14 +209,21 @@ export default class Demo {
  /**
   * @param {Object} OrbitControls 轨道控制器
   */
-  addOrbitControls(OrbitControls) {
+  addOrbitControls(OrbitControls, isedit) {
    this.orbitControls = new OrbitControls(
      this.camera,
      this.renderer.domElement
    );
    //初始化轨道控制器
    this.orbitControls.object.position.set(-29, 18, -50);
-    this.orbitControls.maxPolarAngle = (4 * Math.PI) / 7;
+    // this.orbitControls.maxPolarAngle = (4 * Math.PI) / 7;
+    //下面的设置是使隧道的上下不进行旋转，只左右旋转即可
+    if (isedit == true) {
+      this.orbitControls.maxPolarAngle = (3.69 * Math.PI) / 7;
+    } else {
+      this.orbitControls.maxPolarAngle = (4 * Math.PI) / 8.5;
+      this.orbitControls.minPolarAngle = (4 * Math.PI) / 8.5;
+    }
    this.orbitControls.minDistance = 5;
    this.orbitControls.maxDistance = 87;
    // 监听控制器变化
@@ -224,7 +242,7 @@ export default class Demo {
   * 鼠标移入可以高亮的模型
   *@param {Array} hoverModels 需要高亮的模型
   */
-  _hoverModel(hoverModels) {
+  _hoverModel(hoverModels, isedit) {
    this.renderer.domElement.addEventListener("mousemove", (e) => {
      const mouse = new this.THREE.Vector2();
      mouse.x = (e.clientX / window.innerWidth) * 2 - 1;
@@ -236,19 +254,38 @@ export default class Demo {
        if (!this.preHover) {
          this.preHover = intersects[0].object;
        } else {
+          if (isedit != true) {
+            // console.log(isedit);
+            //附着点设置方框(已经被选中了的情况)
+            this.setBoxHelper(intersects[0].object);
+            this._handleLHover(intersects[0].object);
+
+          }
          this.preHover.material.color.set("white");
          this.preHover = intersects[0].object;
        }
        intersects[0].object.material.color.set("red");
+
        const tagP = intersects[0].object.getWorldPosition(
          new this.THREE.Vector3()
        );
-
+        // if (isedit != false) {
        this._checkAnimation(tagP);
+
+        // }
      } else {
        if (!this.preHover) return;
+        //当鼠标移出的时候，将轨道控制器打开，并且将面板关闭
+        if (isedit != true) {
+          this.isControlOrbit(true)
+          this.clearTagsObj(isedit)
+        }
        this.preHover.material.color.set("white");
      }
+      // this._handleLHover(intersects[0].object);
+      // this._handleLClick(intersects[0].object);
+
+
    });
  }
  /**
@@ -315,7 +352,7 @@ export default class Demo {
  // 添加css3Renderer
  addCSS3Renderer(CSS2Renderer, CSS2DObject, [infoDom, editDom]) {
    this.CSS2Renderer = new CSS2Renderer();
-    this.CSS2Renderer.setSize(window.innerWidth, window.innerHeight);
+    this.CSS2Renderer.setSize(window.innerWidth, window.innerHeight - 100);
    this.CSS2Renderer.render(this.scene, this.camera);

    this.mountedElement.appendChild(this.CSS2Renderer.domElement);
@@ -335,13 +372,19 @@ export default class Demo {
    // // 设置该标签初始化透明
    // this.tagCSS2DObj.element.style.opacity = "1";
    // this.tag2CSS2DObj.element.style.opacity = "1";
-
+    // 下面是3D的，下面把它注释，之后方便来修正
    this.tagCSS2DObj.scale.set(0.1, 0.1, 0.1);
-
    this.tag3CSS2DObj.scale.set(0.02, 0.02, 0.02); //编辑框
    this.tag3CSS2DObj.position.set(10, 0, 10);
+    // 下面是2D的显示方案
+    // this.tagCSS2DObj.scale.set(0.001, 0.001, 0.001);
+
+
+    // this.tag3CSS2DObj.scale.set(0.001, 0.001, 0.001); //编辑框
+    // this.tag3CSS2DObj.position.set(1, 0, 1);
  }
-  clearTagsObj() {
+  // 让面板消失的函数
+  clearTagsObj(isedit) {
    if (this.preDBLModel) {
      this.preDBLModel.remove(this.tagCSS2DObj);
    }
@@ -350,7 +393,7 @@ export default class Demo {
    this.scene.remove(this.tag3CSS2DObj);
    this.tag3CSS2DObj.element.style.opacity = "0";
    // 删除标记动画
-    this.scene.remove(this.group);
+    // this.scene.remove(this.group);
  }

  // 附着点选中线宽包围
@@ -392,6 +435,7 @@ export default class Demo {
      v.material.color = new this.THREE.Color(0xC0C0C0);
      if (/^leaf/.test(v.name) || /^roller/.test(v.name)) {
        group.add(v.clone());
+        // console.log(group);
        v.visible = false;
        // console.log(v);
      }
--- a/src/components/content/tunnelScene/sceneClass/editEquipment/index.js
+++ b/src/components/content/tunnelScene/sceneClass/editEquipment/index.js
@@ -185,6 +185,21 @@ function handleFanEqu(
    this.fanSpinArray = [];
  }
  const equMesh = this.equMap.get("equ_fan").clone();
+  // console.log(this.equMap.get("equ_fan"));
+  // console.log(this.equMap.get("equ_fan").material.clone());
+  // equMesh.material = this.equMap.get("equ_fan").material.clone();
+  // console.log(equMesh);
+  //深层次克隆
+  equMesh.children.map(function (item) {
+    // console.log(item);
+    if (item.isMesh) {
+      item.material = item.material.clone();
+    }
+  })
+  // equMesh.geometry = this.equMap.get("equ_fan").geometry.clone();
+  // console.log(equMesh);
+
+
  const worldP = targetPoint.getWorldPosition(new this.THREE.Vector3());
  equMesh.position.copy(worldP);
  equMesh.translateY(-0.6);
@@ -197,10 +212,17 @@ function handleFanEqu(
    id: equMesh.id, //模型在场景id
    ...equipmentInfo,
  };
+  //我们把风机的附着点挂在原型上，这样应该可以进行处理
+  if (targetPoint.info.equipmentName.slice(0, 1) == '1') {
+    this.scene.Fan1targetPoint = targetPoint
+  } else {
+    this.scene.Fan2targetPoint = targetPoint
+  }
  //这里感觉情况改变风机的颜色
  changeFanColor(fanData, targetPoint, this.scene)


+
  // 定义风机旋转
  const fanLeaf = equMesh.getObjectByName("fan_leafs");
  const fanSpin = new this.TWEEN.Tween({ rotation: 0 });
@@ -285,7 +307,7 @@ function deleteItem(array, item) {
  return array
 }

-//这里是改变风机颜色的代码
+// 这里是改变风机颜色的代码
 function changeFanColor(fanData, targetPoint, scene) {
  if (fanData !== undefined) {
    //保证是预览模式才进行这里的操作（！=1）
--- a/src/components/content/tunnelScene/sceneClass/handleRLclick/handleLhover.js
+++ b/src/components/content/tunnelScene/sceneClass/handleRLclick/handleLhover.js
@@ -0,0 +1,57 @@
+export function handleLHover(targetPoint) {
+  if (this.tag3CSS2DObj.element.style.opacity != '1') {
+    // 保存进入状态
+    this._saveState();
+    // this.clearTagsObj();
+    // 全局临时标记该选中的模型;
+    this.targetPoint = targetPoint;
+    const worldPosition = new this.THREE.Vector3();
+    //获取附着点的世界坐标系
+    targetPoint.getWorldPosition(worldPosition);
+    this._checkAnimation(worldPosition);
+
+    // 设置标签位置
+    this.tag3CSS2DObj.position.set(
+      worldPosition.x,
+      worldPosition.y,
+      worldPosition.z
+    );
+    this.isControlOrbit(false);
+    this.position = worldPosition;
+    if (/tr$/.test(targetPoint.name)) {
+      this.tag3CSS2DObj.translateX(3);
+      this.tag3CSS2DObj.translateZ(10);
+      this.tag3CSS2DObj.translateY(-5);
+      intoAnimation.call(this);
+    } else if (/tl$/.test(targetPoint.name)) {
+      this.tag3CSS2DObj.translateX(-3);
+      this.tag3CSS2DObj.translateZ(10);
+      this.tag3CSS2DObj.translateY(-5);
+      intoAnimation.call(this);
+    } else if (/tc$/.test(targetPoint.name)) {
+      this.tag3CSS2DObj.translateX(0);
+      this.tag3CSS2DObj.translateZ(10);
+      this.tag3CSS2DObj.translateY(-6);
+      intoAnimation.call(this);
+    } else if (/br$/.test(targetPoint.name)) {
+      this.tag3CSS2DObj.translateX(2);
+      this.tag3CSS2DObj.translateZ(10);
+      this.tag3CSS2DObj.translateY(3);
+      intoAnimation.call(this);
+    } else if (/bl$/.test(targetPoint.name)) {
+      this.tag3CSS2DObj.translateX(-2);
+      this.tag3CSS2DObj.translateZ(10);
+      this.tag3CSS2DObj.translateY(3);
+      intoAnimation.call(this);
+    }
+    this.scene.add(this.tag3CSS2DObj);
+    // 返回给编辑组件的回调函数
+    this.editDev(targetPoint)
+  }
+}
+
+function intoAnimation() {
+  this.tag3CSS2DObj.element.style.opacity = "1";
+  this.tag3CSS2DObj.element.style.display = "block";
+}
+
--- a/src/components/content/usedEle/UsedEle.vue
+++ b/src/components/content/usedEle/UsedEle.vue
@@ -236,14 +236,14 @@ const setValueA = () => {
  if (electricityConsumptionMonthly.value === 0 || length.value === null) {
    valueA.value.style.height = `0px`;
  }
-  let width = (electricityConsumptionMonthly.value * length.value?.offsetHeight) / 100000;
+  let width = (electricityConsumptionMonthly.value * length.value?.offsetHeight) / 200000;
  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) / 100000;
+  let width = (monthlySavings.value * length.value?.offsetHeight) / 200000;
  valueB.value.style.height = `${width}px`;
 }
 const getBasicData = (data) => {
--- a/src/components/content/windPressure/WindPressureList.vue
+++ b/src/components/content/windPressure/WindPressureList.vue
@@ -53,7 +53,7 @@ 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";
@@ -120,7 +120,11 @@ const handleExport = () => {
    }
  } else if (selectTimeButton.value === 2) {
    if (clickDay.value) {
-      time = clickDay.value
+      if (clickDay.value[1]) {
+        time = clickDay.value.map(item => item).join('到')
+      } else {
+        time = clickDay.value
+      }
    } else {
      time = getNowFormatDate(true)
    }
@@ -139,7 +143,7 @@ const handleFullScreen = () => {
  fan.classList.remove('shrink-screen-dialog')
  titleName.style.fontSize = '70px'
  erd.listenTo(document.getElementById('windDialog'), (element) => {
-    fanChart.style.height = (element.offsetHeight - 120) + 'px'
+    fanChart.style.height = (element.offsetHeight - 140) + 'px'
    myEcharts.resize();
  });
  nextTick(() => {
@@ -161,11 +165,19 @@ const shrinkScreen = () => {
  })
 }
 const daySelect = (val) => {
-  clickDay.value = val
-  if (isFullScreen.value) {
-    getWindInfo(windSortId.value, 'day', val)
-  } else {
-    getWindInfo(windSortId.value, 'day', val, true)
+  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) => {
@@ -176,7 +188,7 @@ const monthSelect = (val) => {
    getWindInfo(windSortId.value, 'month', val, true)
  }
 }
-const getWindInfo = (equipmentId, type = 'day', time = '', flag) => {
+const getWindInfo = (equipmentId, type = 'day', time = '', flag, startTime, endTime) => {
  isVisited.value = true
  showLoading.value = true
  nextTick(() => {
@@ -189,7 +201,7 @@ const getWindInfo = (equipmentId, type = 'day', time = '', flag) => {
      }
    }
  })
-  getEchartsInfo(equipmentId, time, type).then(res => {
+  getEchartsInfo(equipmentId, time, type, startTime, endTime).then(res => {
    if (res?.code === 1000) {
      showLoading.value = false
      chartData = res.data
@@ -198,7 +210,7 @@ const getWindInfo = (equipmentId, type = 'day', time = '', flag) => {
          const fanChart = document.getElementById('container')
          const erd = elementResizeDetectorMaker();
          erd.listenTo(document.getElementById('windDialog'), (element) => {
-            fanChart.style.height = element.offsetHeight - 120 + 'px'
+            fanChart.style.height = element.offsetHeight - 140 + 'px'
            myEcharts.resize();
          });
          if (!isFullScreen.value) {
--- a/src/components/content/windPressure/childComps/WindPressureItem.vue
+++ b/src/components/content/windPressure/childComps/WindPressureItem.vue
@@ -31,7 +31,8 @@ onMounted(()=>{
  setValue();
 });

-watch(() => params.wp.value, () => {
+watch(() => params.wp.value, (newVal) => {
+  params.wp.value=parseFloat(newVal)
  setValue();
 });

--- a/src/views/device-manage/index.vue
+++ b/src/views/device-manage/index.vue
@@ -310,7 +310,7 @@
 import {ElLoading, ElMessage} from "element-plus";
 import {getEquipmentList, editEquipment, getTunnelDetail} from "@/api/tunnelManage";
 import TunnelTitle from "@/components/tunnelTitle/index.vue";
-
+import { debounce } from 'lodash'
 const router = useRouter()
 const tunnelId = reactive(router.currentRoute.value.params.tunnelId)
 const userId = reactive(router.currentRoute.value.params.userId)
@@ -373,7 +373,7 @@ const changeData = (item) => {
    state: item.state,
  }
 }
-const editEquip = () => {
+const editEquip = debounce(() => {
  let newFrequency = [{
    acquisitionPeriod: fanFrequency.value * 1000,
    tunnelId: parseInt(tunnelId),
@@ -393,7 +393,7 @@ const editEquip = () => {
  fanData.value.forEach(item => {
    let obj = {
      equipmentId: item.equipmentId,
-      ratedPower:parseInt(item.ratedPower),
+      ratedPower: parseInt(item.ratedPower),
      acurrentValue: parseInt(item.acurrentValue),
      bcurrentValue: parseInt(item.bcurrentValue),
      ccurrentValue: parseInt(item.ccurrentValue),
@@ -423,7 +423,7 @@ const editEquip = () => {
      ElMessage.error(res.msg)
    }
  })
-}
+}, 100)

 const handleChangeMenu = (e) => {
  changeIndex.value = e
--- a/src/views/edit/edit.vue
+++ b/src/views/edit/edit.vue
@@ -78,7 +78,7 @@ import {editTunnel, getTunnelDetail} from "@/api/tunnelManage";
 import {ElLoading, ElMessage} from "element-plus";
 import {initSceneData} from "@/api/tunnelScene";
 import TunnelTitle from "@/components/tunnelTitle/index.vue";
-
+import { debounce } from 'lodash'
 const router = useRouter();
 const tunnelId = reactive(router.currentRoute.value.params.tunnelId);
 const userId = reactive(router.currentRoute.value.params.userId);
@@ -144,9 +144,9 @@ const getTunnelInfo = () => {
    });
  })
 }
-const handleSave = () => {
+const handleSave =debounce(() => {
  getTunnelInfo()
-};
+},100)
 </script>
 <style lang="scss" scoped>
 :deep(.el-form-item__content) {
--- a/src/views/site/index.vue
+++ b/src/views/site/index.vue
@@ -146,7 +146,7 @@ import {ElMessage, ElMessageBox} from "element-plus";
 import TunnelTitle from "@/components/tunnelTitle/index.vue";
 import {getToken} from '@/utils/auth'
 import {ElLoading} from 'element-plus'
-
+import { debounce } from 'lodash'
 const router = useRouter()
 const userId = reactive(router.currentRoute.value.params.userId)
 const siteId = reactive(router.currentRoute.value.params.siteId)
@@ -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;
@@ -289,8 +289,12 @@ const handleAdd = () => {
  restFrom()
  title.value = '新增站点'
  isVisited.value = true
+  nextTick(() => {
+    // 清空校验
+    formInstance.value.clearValidate()
+  })
 }
-const handleSubmit = (instance) => {
+const handleSubmit =debounce((instance) => {
  if (!instance) return
  instance.validate(valid => {
    if (!valid) return
@@ -316,8 +320,8 @@ const handleSubmit = (instance) => {
      });
    }
  })
-}
-const handleChooseAll = () => {
+},100)
+const handleChooseAll = debounce(() => {
  siteList.value.map(item => {
    item.checked = !item.checked
    if (item.checked && !item.isDefault) {
@@ -330,8 +334,8 @@ const handleChooseAll = () => {
      })
    }
  })
-}
-const handleMoreDelete = () => {
+},100)
+const handleMoreDelete =debounce(() => {
  if (siteIds.value.length === 0) {
    ElMessage.warning('请先选择站点进行删除')
  } else {
@@ -368,7 +372,7 @@ const handleMoreDelete = () => {
      })
    }
  }
-}
+},100)
 const firstPage = () => {
  pageInfo.pageNum = 1
  getList()
@@ -667,7 +671,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 +694,7 @@ const handleCurrentChange = (val) => {
            .tunnel {
              cursor: pointer;
              margin-right: 20px;
-              width: 280px;
+              width: 320px;
              height: 350px;
              background: #3FBED1;
              border-radius: 16px;
@@ -698,15 +702,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
@@ -9,11 +9,11 @@
        {{ siteName }}
      </div>
      <div class="model-change">
-        <div class="model" @click="clickModel=1">
+        <div class="model" @click="clickModel=1;showNull=false">
          <div class="card-bg"></div>
          <span>卡片模式</span>
        </div>
-        <div class="model" @click="clickModel=2">
+        <div class="model" @click="clickModel=2;getSiteImg()">
          <div class="img-bg"></div>
          <span>图纸导航</span>
        </div>
@@ -73,7 +73,10 @@
      </div>
    </div>
    <div v-else>
-      <div class="img-box">
+      <div v-if="showNull" class="showNull">
+        暂无图纸~ 请前往站点管理上传图纸~
+      </div>
+      <div class="img-box" v-else>
        <!--        @/assets/images/tunnel/img.png-->
        <img :src="'data:image/png;base64,'+siteImage" style="width:3500px;height:1789px" id="imgModel" usemap="#image"
             alt="" @click="clickHandler">
@@ -165,6 +168,7 @@ import {getTunnelList, addTunnel, deleteTunnel} from "@/api/tunnelManage";
 import {getSiteDrawing, getSiteDetail} from "@/api/site";
 import TunnelTitle from "@/components/tunnelTitle/index.vue";
 import {getTunnelBySiteId} from "@/api/largeScreen";
+import { debounce } from 'lodash'

 const validateNumber = (rule, value) => {
  const reg = /^[A-Za-z0-9]+$/;
@@ -260,6 +264,7 @@ const iconsList = ref([
  },
 ])
 const title = ref('新增隧道')
+const showNull = ref(false);
 const isVisited = ref(false);
 const tunnelIds = ref([])
 const tunnelNameList = ref([])
@@ -287,13 +292,26 @@ onMounted(() => {
  showOperation.value = localStorage.getItem('roleKey') !== 'tunnel_admin';
 })
 const getSiteImg = () => {
+  showNull.value=false
  getSiteDrawing(siteId).then((res) => {
    if (res.code === 1000) {
-      siteImage.value = res.data.drawingData
+      if(res.data.drawingData===null){
+        // ElMessageBox.confirm('暂无图纸, 是否前往站点管理上传图纸?', '系统提示', {
+        //   confirmButtonText: '确定',
+        //   cancelButtonText: '取消',
+        //   type: 'warning'
+        // }).then(() => {
+        //   router.push('/site/' + userId + '/' + localStorage.getItem('currentSiteId'))
+        // }).catch(()=>{
+          showNull.value=true
+        // })
+      }else{
+        showNull.value=false
+        siteImage.value = res.data.drawingData
+      }
    }
  });
 }
-getSiteImg()
 const clickHot = (id) => {
  console.log('点击热区===============')
  router.push('/' + id + '/' + siteId)
@@ -327,7 +345,7 @@ const getList = () => {
    lock: true,
    text: '正在加载系统资源...',
    background: 'rgba(0, 0, 0, 0.7)',
-    customClass:'allLoading'
+    customClass: 'allLoading'
  })
  getTunnelList({
    siteId: siteId,
@@ -358,8 +376,7 @@ const handleCurrentChange = (val) => {
  pageInfo.pageNum = val
  getList()
 }
-const handleSubmit = (instance) => {
-  console.log('form.value', form.value)
+const handleSubmit = debounce((instance) => {
  if (!instance) return
  instance.validate(async (valid) => {
    if (!valid) return
@@ -377,7 +394,7 @@ const handleSubmit = (instance) => {
      }
    })
  })
-}
+},100)
 //预览隧道
 const handlePreview = (id) => {
  console.log('预览')
@@ -401,7 +418,7 @@ const handleGoToEditTunnel = (tunnelId) => {
    router.push('/edit/' + tunnelId + '/byHome/' + userId)
  }
 }
-const handleChooseAll = () => {
+const handleChooseAll = debounce(() => {
  tunnelList.value.map(item => {
    item.checked = !item.checked
    if (item.checked && !item.isDefault) {
@@ -414,7 +431,7 @@ const handleChooseAll = () => {
      })
    }
  })
-}
+},100)
 const handleEditDevice = (tunnelId) => {
  if (type === 'bySite') {
    router.push('/device/' + tunnelId + '/bySite/' + userId)
@@ -466,7 +483,7 @@ const handleClickSite = (type) => {
    })
  }
 }
-const handleMoreDelete = () => {
+const handleMoreDelete = debounce(() => {
  if (tunnelIds.value.length === 0) {
    ElMessage.warning('请先选择隧道进行删除')
  } else {
@@ -488,11 +505,16 @@ const handleMoreDelete = () => {
      })
    })
  }
-}
+},100)

 </script>

 <style scoped lang="scss">
+.showNull{
+  margin-top: 150px;
+  font-size: 60px;
+  color: #05FEFF;
+}
 :deep(.el-form-item__error) {
  font-size: 35px;
 }
@@ -634,6 +656,7 @@ const handleMoreDelete = () => {
      color: #fff;
      font-size: 38px;
    }
+
    .el-input__suffix-inner {
      font-size: 30px;
      color: #08B7B8;
@@ -770,7 +793,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 +808,8 @@ const handleMoreDelete = () => {


        > span:last-child {
+          margin-left: 5px;
+          width: 95px;
          padding: 1px 8px;
          font-size: 32px;
          border: 2px solid #05FEFF;
@@ -896,8 +927,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
@@ -1,8 +1,8 @@
 <template>
  <div id="main">
    <div class="box-top">
-      <manage-btn v-model="selectIndex" @select="manageSelect" :list="routeList" v-if="showMenu"/>
-      <tunnel-title v-if="showTunnelTitle"/>
+      <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>-->
@@ -15,15 +15,15 @@
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item v-for="item in siteList" :key="item.value" :command="item">{{
-                    item.label
-                  }}
+        item.label
+      }}
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <el-icon size="50" color="#0BE9FA" style="margin-left: 50px;cursor: pointer"
-                   @click="isVisited=true;getAlarmList()">
-            <Bell/>
+            @click="isVisited = true; getAlarmList()">
+            <Bell />
          </el-icon>
        </div>
        <div class="current-user">
@@ -36,25 +36,26 @@
    <!-- <tunnel-scene id="tunnel-box" :isedit="false" /> -->
    <!-- 一进去的话应该是预览模式，所以引入这个组件1 -->
    <preview-scene id="tunnel-box" :isedit="false" :tunnelId="tunnelId" :key="tunnelId" :tunnelLen="tunnelLen"
-                   :largeScreen="largeScreen"></preview-scene>
+      :largeScreen="largeScreen" :fanList="socketData.leftData"></preview-scene>
    <div class="left">
      <el-drawer v-model="drawerLeft" direction="ltr" modal-class="modal-box" :modal="false" :show-close="false"
-                 :close-on-click-modal="false" :close-on-press-escape="false">
+        :close-on-click-modal="false" :close-on-press-escape="false">
        <fan-info v-if="showFan" :list="socketData.leftData" :fan-data="largeScreenData"
-                  :transducer-data="largeScreenData" :loading="showFanLoading" :tunnel-id="tunnelId"/>
-        <used-ele v-if="showFan" :list="socketData.leftData" :loading="showUsedLoading" :ele-data="largeScreenData"/>
+          :transducer-data="largeScreenData" :loading="showFanLoading" :tunnel-id="tunnelId" />
+        <used-ele v-if="showFan" :list="socketData.leftData" :loading="showUsedLoading" :ele-data="largeScreenData" />
      </el-drawer>
      <div v-if="drawerLeft" class="left-arrow" @click="closeLeft"></div>
      <div v-else class="shrink-left" @click="closeLeft"></div>
    </div>
    <div class="right">
      <el-drawer v-model="drawerRight" direction="rtl" modal-class="modal-box" :modal="false" :show-close="false"
-                 :close-on-click-modal="false" :close-on-press-escape="false">
+        :close-on-click-modal="false" :close-on-press-escape="false">
        <wind-pressure-list v-if="showFan" :list="socketData.windPressure" :win-data="largeScreenData"
-                            :loading="showWindLoading"/>
-        <air-info v-if="showFan" :list="socketData.sensor" :air-data="largeScreenData"/>
+          :loading="showWindLoading" />
+        <air-info v-if="showFan" :list="socketData.sensor" :windSpeed="socketData.windSpeed"
+          :air-data="largeScreenData" />
        <bad-gas-info v-if="showFan" :list="socketData.sensor" :bad-gas-data="largeScreenData" :tunnelId="tunnelId"
-                      :loading="showBadLoading"/>
+          :loading="showBadLoading" />
      </el-drawer>
      <div v-if="drawerRight" class="right-arrow" @click="closeRight"></div>
      <div v-else class="shrink-right" @click="closeRight"></div>
@@ -62,7 +63,7 @@
    <div class="switch-btn">
      <div class="arrow" @click="previousBtn"></div>
      <el-carousel height="150px" type="card" ref="tunnelBtn" :autoplay="false" :initial-index="initialIndex"
-                   @change="changeTunnel">
+        @change="changeTunnel">
        <div class="btn">
          <el-carousel-item v-for="item in tunnelList" :key="item.value">
            {{ item.label }}
@@ -73,8 +74,7 @@
    </div>
  </div>
  <div class="alarm-dialog alarm-tunnel">
-    <el-dialog :close-on-click-modal="false" v-model="isDetailVisited" title="报警信息详情"
-               width="1500px">
+    <el-dialog :close-on-click-modal="false" v-model="isDetailVisited" title="报警信息详情" width="1500px">
      <div class="detail">
        <div>报警时间：</div>
        {{ alarmDetail.alarmTime }}
@@ -86,18 +86,16 @@
    </el-dialog>
  </div>
  <div class="alarm-tunnel">
-    <el-dialog :close-on-click-modal="false" v-model="isVisited" title="报警信息"
-               width="2175px"
-               :modal="false">
+    <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>
      <el-form :model="queryParams" inline class="query-form" ref="queryForm" @submit.prevent="getAlarmList"
-               v-if="roleKey!=='administrator'">
+        v-if="roleKey !== 'administrator'">
        <el-form-item label="查阅状态" prop="lookupStatus">
          <el-select v-model="queryParams.lookupStatus" placeholder="请选择查阅状态" :fit-input-width="true"
-                     :teleported="false" clearable filterable>
-            <el-option label="已读" :value="true"/>
-            <el-option label="未读" :value="false"/>
+            :teleported="false" clearable filterable>
+            <el-option label="已读" :value="true" />
+            <el-option label="未读" :value="false" />
          </el-select>
        </el-form-item>
        <el-form-item>
@@ -105,18 +103,19 @@
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
-      <div class="device-table" :style="{marginTop: roleKey==='administrator'?'40px':'0'}">
+      <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="tunnelName" label="隧道名称" align="center" width="400px"/>
-          <el-table-column prop="alarmContent" label="告警信息" align="center"/>
-          <el-table-column prop="alarmTime" label="告警时间" align="center" width="480px"/>
+          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="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"
-                           v-if="roleKey!=='administrator'">
+            v-if="roleKey !== 'administrator'">
+
            <template #default="scope">
-              <el-tag :type="scope.row.lookupStatus?'success':'warning'">{{ scope.row.lookupStatus ? '已读' : '未读' }}
+              <el-tag :type="scope.row.lookupStatus ? 'success' : 'warning'">{{ scope.row.lookupStatus ? '已读' : '未读' }}
              </el-tag>
            </template>
          </el-table-column>
@@ -124,16 +123,16 @@
            <template #default="scope">
              <el-button type="primary" size="mini" style="font-weight: bold" @click="handleView(scope.row)" link>详情
              </el-button>
-              <el-button type="danger" size="mini" v-if="roleKey!=='administrator'" @click="handleDelete(scope.row)"
-                         link>删除
+              <el-button type="danger" size="mini" v-if="roleKey !== 'administrator'" @click="handleDelete(scope.row)"
+                link>删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
-        <div class="pagination" :style="{bottom: roleKey==='administrator'?'40px':'0'}">
+        <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"/>
+            :total="total" prev-text="上一页" next-text="下一页" layout="prev, pager, next"
+            @current-change="handleCurrentChange" :hide-on-single-page="true" />
        </div>
      </div>
      <div class="left-bottom-icon"></div>
@@ -151,9 +150,9 @@ import AirInfo from "@/components/content/airInfo/AirInfo.vue";
 import BadGasInfo from "@/components/content/badGasInfo/BadGasInfo.vue";
 import ManageBtn from "@/components/manageBtn/index.vue";
 import TunnelTitle from "@/components/tunnelTitle/index.vue";
-import {dateFormat} from "@/utils/date.js";
-import {getToken} from "@/utils/auth";
-import {useAuthStore} from "@/store/userstore.js";
+import { dateFormat } from "@/utils/date.js";
+import { getToken } from "@/utils/auth";
+import { useAuthStore } from "@/store/userstore.js";
 import {
  getLargeScreen,
  getLargeScreenInfo,
@@ -163,11 +162,11 @@ import {
  getAlarmDetail,
  updateAlarmState
 } from "@/api/largeScreen";
-import {ElMessage, ElMessageBox} from "element-plus";
-import {getUserInfo} from "@/api/login";
-import {initSceneData} from "@/api/tunnelScene";
-import {getTunnelList} from "@/api/tunnelManage";
-
+import { ElMessage, ElMessageBox } from "element-plus";
+import { getUserInfo } from "@/api/login";
+import { initSceneData } from "@/api/tunnelScene";
+import { getTunnelList } from "@/api/tunnelManage";
+import { debounce } from 'lodash'
 const authStore = useAuthStore();
 const router = useRouter();
 const previewId = reactive(router.currentRoute.value.params.tunnelId)
@@ -250,6 +249,7 @@ const socketData = reactive({
  leftData: [],
  windPressure: [],
  sensor: [],
+  windSpeed: [],
 });
 let tunnelLen = computed(() => tunnelLength);
 const queryParams = reactive({
@@ -263,7 +263,6 @@ onMounted(() => {
  nextTick(() => {
    showFan.value = true;
  });
-
 });
 const changeName = (id) => {
  for (let item of equipmentOption.value) {
@@ -412,13 +411,13 @@ const getScreenInfo = (id) => {
          // })
          res.data.sensorList.forEach((item) => {
            if (
-                item.equipmentType === "dust" ||
-                item.equipmentType === "carbonDioxide" ||
-                item.equipmentType === "carbonMonoxide" ||
-                item.equipmentType === "hydrogenSulfide" ||
-                item.equipmentType === "sulfurDioxide" ||
-                item.equipmentType === "sulfurMonoxide" ||
-                item.equipmentType === "nitrogenDioxide"
+              item.equipmentType === "dust" ||
+              item.equipmentType === "carbonDioxide" ||
+              item.equipmentType === "carbonMonoxide" ||
+              item.equipmentType === "hydrogenSulfide" ||
+              item.equipmentType === "sulfurDioxide" ||
+              item.equipmentType === "sulfurMonoxide" ||
+              item.equipmentType === "nitrogenDioxide"
            ) {
              showBadLoading.value = 0
            } else {
@@ -477,6 +476,7 @@ const getTunnel = (id) => {
            }
          })
        } else {
+          tunnelList.value = res.data
          getScreenInfo(res.data[0]?.value)
        }
      }
@@ -484,6 +484,7 @@ const getTunnel = (id) => {
  });
 }
 const changeTunnel = (e) => {
+  socket.close()
  let newObj = {}
  tunnelList.value.forEach((item, index) => {
    if (index === e) {
@@ -500,8 +501,10 @@ const changeTunnel = (e) => {
  nextTick(() => {
    showFan.value = true;
  });
+
 }
 const manageSelect = (index) => {
+
  if (index === '站点管理') {
    if (currentUserId.value) {
      router.push("/site/" + currentUserId.value + '/' + currentSiteId.value);
@@ -515,8 +518,10 @@ const manageSelect = (index) => {
      router.push("/user/" + localStorage.getItem('currentSiteId'));
    }
  }
+  socket.close()
 };
-const handleChangeSite = (item) => {
+const handleChangeSite = debounce((item) => {
+  socket.close()
  currentSite.value = item.label
  currentSiteId.value = item.value
  getTunnel(item.value)
@@ -533,7 +538,7 @@ const handleChangeSite = (item) => {
  nextTick(() => {
    showTunnelTitle.value = true
  });
-}
+}, 100)
 const closeLeft = () => {
  drawerLeft.value = !drawerLeft.value;
 };
@@ -578,10 +583,13 @@ const initWebSocket = () => {
      data.forEach((item) => {
        if (item.typeKey === "frequency") {
          socketData.leftData = data;
+          // console.log(socketData.leftData);
        } else if (item.typeKey === "windPressure") {
          socketData.windPressure = data;
        } else if (item.typeKey === "sensor") {
          socketData.sensor = data;
+        } else if (item.typeKey === "windSpeed") {
+          socketData.windSpeed = data;
        }
      });
    }
@@ -668,7 +676,7 @@ const initWebSocket = () => {
 }

 .alarm-dialog {
-  :deep(.el-dialog ) {
+  :deep(.el-dialog) {
    height: auto !important;
    margin: 820px auto 0 auto;
  }
@@ -698,6 +706,7 @@ const initWebSocket = () => {

 :deep(.el-table__empty-block) {
  height: 200px !important;
+
  //display: none;
  .el-table__empty-text {
    font-size: 60px;
@@ -722,7 +731,7 @@ const initWebSocket = () => {
    }
  }

-  :deep(.el-select-dropdown__item.is-hovering ) {
+  :deep(.el-select-dropdown__item.is-hovering) {
    background-color: #064B66 !important;
  }

@@ -763,12 +772,13 @@ const initWebSocket = () => {
        height: 70px !important;
        line-height: 70px !important;

-        > span {
+        >span {
          color: #FFFFFF;
        }
      }

-      .el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
+      .el-select-dropdown__item.hover,
+      .el-select-dropdown__item:hover {
        background-color: #064B66 !important;
      }
    }
@@ -836,7 +846,7 @@ const initWebSocket = () => {
    line-height: 40px;
    font-size: 36px;

-    & > div {
+    &>div {
      flex: 1;
      text-align: center;
      cursor: pointer;
@@ -907,8 +917,10 @@ const initWebSocket = () => {
  font-size: 38px;
  font-weight: bold;

-  :deep(.el-pagination.is-background ) {
-    .btn-next, .btn-prev {
+  :deep(.el-pagination.is-background) {
+
+    .btn-next,
+    .btn-prev {
      background-color: transparent;
    }

@@ -923,11 +935,11 @@ const initWebSocket = () => {
    }
  }

-  > span:first-child {
+  >span:first-child {
    margin-right: 60px;
  }

-  > span:last-child {
+  >span:last-child {
    margin-left: 71px;
  }

@@ -948,7 +960,7 @@ const initWebSocket = () => {
    margin-left: 30px;
  }

-  :deep(.el-pager li.is-active ) {
+  :deep(.el-pager li.is-active) {
    width: 70px;
    height: 70px;
    background: #60DDDE;
@@ -962,7 +974,7 @@ const initWebSocket = () => {
    margin-left: 40px !important;
  }

-  :deep(.el-pager li:not(.is-active) ) {
+  :deep(.el-pager li:not(.is-active)) {
    width: 70px;
    height: 70px;
    border: 1px solid #60DDDE;
--- a/src/views/user/index.vue
+++ b/src/views/user/index.vue
@@ -146,6 +146,7 @@ import {addUser, editUser, getUser, getRoleOption, deleteUser, getUserDetail} fr
 import {ElLoading, ElMessage, ElMessageBox} from "element-plus";
 import {getTunnelOption} from "@/api/tunnel";
 import TunnelTitle from "@/components/tunnelTitle/index.vue";
+import {debounce} from 'lodash'

 const router = useRouter()
 const title = ref('添加用户')
@@ -218,7 +219,7 @@ const handleEditUser = (row) => {
    lock: true,
    text: '正在加载系统资源...',
    background: 'rgba(0, 0, 0, 0.7)',
-    customClass:'allLoading'
+    customClass: 'allLoading'
  })
  getUserDetail(row.userId).then(res => {
    if (res.code === 1000) {
@@ -234,7 +235,7 @@ const handleEditUser = (row) => {

 }

-const handleDelete = () => {
+const handleDelete = debounce(() => {
  if (userIds.value === undefined) {
    ElMessage.warning('请先选择用户进行删除')
  } else {
@@ -251,7 +252,7 @@ const handleDelete = () => {
      })
    })
  }
-}
+}, 100)
 const reset = () => {
  form.value = {
    password: '',
@@ -276,7 +277,7 @@ const getInfo = () => {
    lock: true,
    text: '正在加载系统资源...',
    background: 'rgba(0, 0, 0, 0.7)',
-    customClass:'allLoading'
+    customClass: 'allLoading'
  })
  getUser({
    siteId: siteId,
@@ -305,7 +306,7 @@ const handleCurrentChange = (val) => {
  pageInfo.pageNum = val
  getInfo()
 }
-const handleSubmit = (formInstance) => {
+const handleSubmit = debounce((formInstance) => {
  if (!formInstance) return;
  formInstance.validate((valid) => {
    if (!valid) return;
@@ -345,7 +346,7 @@ const handleSubmit = (formInstance) => {
      })
    }
  })
-}
+}, 100)
 const handleSelect = async (selection, row) => {
  if (selection.length !== 0) {
    // disabled.value = false
@@ -368,6 +369,7 @@ const handleSelect = async (selection, row) => {
      }
    }
  }
+
  .el-select__wrapper {
    min-height: 75px;
    height: auto !important;
@@ -775,8 +777,9 @@ const handleSelect = async (selection, row) => {
    color: #60DDDE;
    font-size: 38px;
    font-weight: bold;
+
    :deep(.el-pagination.is-background ) {
-      .btn-next,.btn-prev {
+      .btn-next, .btn-prev {
        background-color: transparent;
      }