feat : 新增echarts中指定日期展示及细节优化

2024-02-28 18:08:44 +08:00
parent 59aa2a92d1
commit ea4f72780f
19 changed files with 810 additions and 438 deletions
--- a/src/api/largeScreen.js
+++ b/src/api/largeScreen.js
@@ -22,24 +22,39 @@ export const getTunnelBySiteId = (siteId) => {
  })
 }
 // 传感器echarts数据
-export const getEchartsInfo = (equipmentId,type) => {
+export const getEchartsInfo = (id,time,type) => {
  return request({
-    url: `/tunnel/large/screen/echarts/sensor/${equipmentId}/${type}`,
-    method: 'get'
+    url: '/tunnel/large/screen/echarts/sensor',
+    method: 'get',
+    params: {
+      id: id,
+      time: time,
+      type: type
+    }
  })
 }
 // 有害气体echarts数据
-export const getBadGasEchartsInfo = (tunnelId,type) => {
+export const getBadGasEchartsInfo = (id,time,type) => {
  return request({
-    url: `/tunnel/large/screen/echarts/gas/sensor/${tunnelId}/${type}`,
-    method: 'get'
+    url: '/tunnel/large/screen/echarts/gas/sensor/',
+    method: 'get',
+    params: {
+      id: id,
+      time: time,
+      type: type
+    }
  })
 }
 //电流监控数据
-export const getFanEchartsInfo = (equipmentId,type) => {
+export const getFanEchartsInfo = (id,time,type) => {
  return request({
-    url: `/tunnel/large/screen/echarts/current/${equipmentId}/${type}`,
-    method: 'get'
+    url: '/tunnel/large/screen/echarts/current',
+    method: 'get',
+    params: {
+      id: id,
+      time: time,
+      type: type
+    }
  })
 }
 //风机频率修改
--- a/src/assets/images/topAndDown/title-bg.png
+++ b/src/assets/images/topAndDown/title-bg.png
--- a/src/assets/styles/index.scss
+++ b/src/assets/styles/index.scss
@@ -46,12 +46,23 @@ body,
 .tunnel-title {
  width: 1718px;
  height: 146px;
+  line-height: 130px;
  z-index: 2;
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -859px;
-  background-image: url("../images/topAndDown/sp_tb.png");
+  background-image: url("../images/topAndDown/title-bg.png");
+  font-size: 55px;
+  text-align: center;
+
+  > span {
+    letter-spacing: 5px;
+    font-weight: bold;
+    background-image: -webkit-linear-gradient(top, #FFFFFF, #56bcda, #0BE9FA);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
 }

 .box-top {
@@ -316,6 +327,7 @@ body,
      height: 1200px;
      //width: 1300px;
    }
+
    #containerWindDirection {
      flex: 1;
      height: 1160px;
@@ -395,6 +407,37 @@ body,
    position: absolute;
    top: 47px;
    right: 119px;
+    display: flex;
+
+    .choose-time {
+      margin-right: 40px;
+
+      .el-date-editor {
+        width: 370px;
+        height: 92px;
+      }
+
+      .el-input__wrapper {
+        height: 92px;
+        background-color: transparent;
+        border-radius: 10px;
+        border: 2px solid #0F82AF;
+        box-shadow: none;
+        //padding: 18px 24px;
+        .el-input__prefix, .el-input__suffix {
+          .el-icon {
+            font-size: 40px;
+            color: #FFFFFF;
+          }
+        }
+
+        .el-input__inner {
+          height: 80px;
+          font-size: 40px;
+          color: #FFFFFF;
+        }
+      }
+    }
  }

  .left-bottom-icon {
--- a/src/components/chooseMonth/index.vue
+++ b/src/components/chooseMonth/index.vue
@@ -0,0 +1,41 @@
+<template>
+  <div class="choose-time">
+    <el-date-picker
+        v-model="selectButton"
+        type="month"
+        placeholder="选择月"
+        @change="dataSelect"
+        value-format="YYYY-MM-DD"
+        popper-class="choose-time-popper"
+        :disabled-date="disabledDate"
+    />
+  </div>
+
+</template>
+
+<script setup>
+const props = defineProps({
+  time: {
+    type: Date,
+    default: '',
+  },
+});
+const selectButton = ref(props.time);
+const emit = defineEmits(["update:modelValue", "select"]);
+const disabledDate = (time) => {
+  // return time.getTime() > Date.now()//不能选择之后的数据
+  let curDate = (new Date()).toString() // 当前时间戳转为字符串
+  let curDateYear = (new Date()).getFullYear() // 当前时间的年份
+  let oneYearAgoDate = curDate.replace(curDateYear, curDateYear - 1)// 字符串年份替换为一年前
+  let oneYear = new Date(oneYearAgoDate).getTime() //一年前字符串转为时间戳
+  return time.getTime() >= Date.now() || time.getTime() < oneYear;
+}
+const dataSelect = (val) => {
+  emit("update:modelValue", val);
+  emit("select", val);
+};
+</script>
+
+<style scoped>
+
+</style>
--- a/src/components/chooseTime/index.vue
+++ b/src/components/chooseTime/index.vue
@@ -0,0 +1,111 @@
+<template>
+  <div class="choose-time">
+    <el-date-picker
+        v-model="selectButton"
+        type="date"
+        placeholder="请选择日期"
+        size="large"
+        value-format="YYYY-MM-DD"
+        @change="dataSelect"
+        popper-class="choose-time-popper"
+        :disabled-date="disabledDate"
+    />
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  time: {
+    type: Date,
+    default: '',
+  },
+});
+const selectButton = ref(props.time);
+const emit = defineEmits(["update:modelValue", "select"]);
+const disabledDate = (time) => {
+  // return time.getTime() > Date.now()//不能选择之后的数据
+  let curDate = (new Date()).toString() // 当前时间戳转为字符串
+  let curDateYear = (new Date()).getFullYear() // 当前时间的年份
+  let oneYearAgoDate = curDate.replace(curDateYear, curDateYear - 1)// 字符串年份替换为一年前
+  let oneYear = new Date(oneYearAgoDate).getTime() //一年前字符串转为时间戳
+  return time.getTime() > Date.now() || time.getTime() < oneYear;
+}
+const dataSelect = (val) => {
+  emit("update:modelValue", val);
+  emit("select", val);
+};
+</script>
+
+<style lang="scss">
+.el-picker__popper.el-popper {
+  border: 2px solid #0F82AF !important;
+}
+
+.choose-time-popper {
+  margin-left: 0 !important;
+  width: auto !important;
+
+  .el-picker-panel__body {
+    background-color: #062247;
+
+    .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;
+      }
+    }
+
+    .el-picker-panel__content {
+      .el-month-table {
+        td .cell {
+          font-size: 18px;
+          color: #FFFFFF;
+        }
+
+        td.disabled .cell {
+          background-color: transparent;
+          color: #a8abb2;
+        }
+
+        td.today .cell {
+          color: #0BE9FA;
+        }
+      }
+
+      .el-date-table th {
+        color: #FFFFFF;
+        font-size: 17px;
+      }
+
+      .el-date-table__row {
+        .prev-month, .available, .normal, .next-month {
+          .el-date-table-cell__text {
+            font-size: 18px;
+          }
+        }
+
+        .available {
+          color: #FFFFFF;
+          font-weight: bold;
+        }
+
+        .available.today {
+          .el-date-table-cell__text {
+            color: #0BE9FA;
+          }
+        }
+
+        .disabled {
+          .el-date-table-cell {
+            background-color: #062247;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
--- a/src/components/content/airInfo/AirInfo.vue
+++ b/src/components/content/airInfo/AirInfo.vue
@@ -33,6 +33,8 @@
          <div style="width: 1px;"></div>
        </div>
        <div class="time-select">
+          <choose-time v-if="selectTimeButton===2" :time="dayValue" @select="daySelect"/>
+          <choose-month v-if="selectTimeButton===1" :time="monthValue" @select="monthSelect"/>
          <time-range-btn
              :buttonList="timeList"
              v-model="selectTimeButton"
@@ -51,7 +53,11 @@ import ItemInfo from "./childComps/ItemInfo.vue";
 import TimeRangeBtn from "@/components/timeRangeBtn/index.vue"
 import * as echarts from 'echarts';
 import {getEchartsInfo} from "@/api/largeScreen";
+import ChooseTime from "@/components/ChooseTime/index.vue"
+import ChooseMonth from "@/components/ChooseMonth/index.vue"

+const dayValue = ref('');
+const monthValue = ref('');
 let myEcharts = reactive({});
 const props = defineProps({
  list: Array,
@@ -90,11 +96,18 @@ watch(() => props.airData, (now) => {
    windSpeed.value = 0
  }
 }, {deep: true});
-
-const getChartInfo = (equipmentId, type = 'day') => {
+const daySelect = (val) => {
+  dayValue.value = val
+  getChartInfo(openDialogId.value, 'day',val)
+}
+const monthSelect = (val) => {
+  monthValue.value = val
+  getChartInfo(openDialogId.value, 'month',val)
+}
+const getChartInfo = (equipmentId, type = 'day',time='') => {
  isWindSpeedVisited.value = true
  showSpeedLoading.value = true
-  getEchartsInfo(equipmentId, type).then(res => {
+  getEchartsInfo(equipmentId,time, type).then(res => {
    if (res?.code === 1000) {
      showSpeedLoading.value = false
      nextTick(() => {
@@ -124,15 +137,20 @@ const handleOpenChart = (id, type) => {
    getChartInfo(id, 'day')
  }
 }
-
-const timeSelect = (index) => {
-  if (index === 0) {
-    getChartInfo(openDialogId.value, 'years')
-  } else if (index === 1) {
-    getChartInfo(openDialogId.value, 'month')
-  } else if (index === 2) {
-    getChartInfo(openDialogId.value, 'day')
+const changeDate = (index) => {
+  switch (index) {
+    case 0:
+      return 'years'
+    case 1:
+      return 'month'
+    case 2:
+      return 'day'
  }
+}
+const timeSelect = (index) => {
+  dayValue.value = ''
+  monthValue.value = ''
+  getChartInfo(openDialogId.value, changeDate(index))
 };

 const changeData = (item) => {
@@ -148,8 +166,6 @@ const changeData = (item) => {
 }
 const changeIcon = (type) => {
  switch (type) {
-    case "dust":
-      return 'dust-icon.png';
    case "oxygen":
      return 'o2-icon.png';
    case "temperature":
@@ -163,7 +179,7 @@ const getAirInfo = (now) => {
  let airObj = {}
  let airArr = []
  now?.map(item => {
-    if (item.equipmentType === "dust" || item.equipmentType === "oxygen" || item.equipmentType === "temperature" || item.equipmentType === "humidness") {
+    if (item.equipmentType === "oxygen" || item.equipmentType === "temperature" || item.equipmentType === "humidness") {
      airObj = changeData(item)
      airArr.push(airObj)
    } else if (item.equipmentType === "windSpeed") {
--- a/src/components/content/badGasInfo/BadGasInfo.vue
+++ b/src/components/content/badGasInfo/BadGasInfo.vue
@@ -34,6 +34,8 @@
          <div style="width: 1px"></div>
        </div>
        <div class="time-select">
+          <choose-time v-if="selectTimeButton===2" :time="dayValue" @select="daySelect"/>
+          <choose-month v-if="selectTimeButton===1" :time="monthValue" @select="monthSelect"/>
          <time-range-btn
              :buttonList="timeList"
              v-model="selectTimeButton"
@@ -52,7 +54,10 @@ import GasInfoItem from "./childComps/GasInfoItem.vue";
 import * as echarts from "echarts";
 import TimeRangeBtn from "@/components/timeRangeBtn/index.vue";
 import {getBadGasEchartsInfo} from "@/api/largeScreen";
-
+import ChooseTime from "@/components/ChooseTime/index.vue"
+import ChooseMonth from "@/components/ChooseMonth/index.vue"
+const dayValue = ref('');
+const monthValue = ref('');
 const props = defineProps({
  list: Array,
  badGasData: Array,
@@ -99,14 +104,28 @@ watch(
    },
    {deep: true}
 );
-const timeSelect = (index) => {
-  if (index === 0) {
-    getBadGasChartInfo('years')
-  } else if (index === 1) {
-    getBadGasChartInfo('month')
-  } else if (index === 2) {
-    getBadGasChartInfo('day')
+const daySelect = (val) => {
+  dayValue.value = val
+  getBadGasChartInfo('day', val)
+}
+const monthSelect = (val) => {
+  monthValue.value = val
+  getBadGasChartInfo('month', val)
+}
+const changeDate = (index) => {
+  switch (index) {
+    case 0:
+      return 'years'
+    case 1:
+      return 'month'
+    case 2:
+      return 'day'
  }
+}
+const timeSelect = (index) => {
+  dayValue.value = ''
+  monthValue.value = ''
+  getBadGasChartInfo(changeDate(index))
 };
 const getBadGasInfo = (now) => {
  if (now === null) return;
@@ -114,6 +133,7 @@ const getBadGasInfo = (now) => {
  let windPressureArr = [];
  now?.map((item) => {
    if (
+        item.equipmentType === "dust" ||
        item.equipmentType === "carbonDioxide" ||
        item.equipmentType === "carbonMonoxide" ||
        item.equipmentType === "hydrogenSulfide" ||
@@ -137,11 +157,11 @@ const changeData = (item) => {
    unit: item.unit,
  };
 };
-const getBadGasChartInfo = (type) => {
+const getBadGasChartInfo = (type, time = '') => {
  isBadGasVisited.value = true
  showLoading.value = true
  let id = props.tunnelId
-  getBadGasEchartsInfo(id, type).then(res => {
+  getBadGasEchartsInfo(id, time, type).then(res => {
    if (res?.code === 1000) {
      showLoading.value = false
      nextTick(() => {
@@ -232,33 +252,6 @@ const initChart = (type, values) => {
    //X轴
    xAxis: {
      type: "category",
-      // data: [
-      //   "00:00",
-      //   "01:00",
-      //   "02:00",
-      //   "03:00",
-      //   "04:00",
-      //   "05:00",
-      //   "06:00",
-      //   "07:00",
-      //   "08:00",
-      //   "09:00",
-      //   "10:00",
-      //   "11:00",
-      //   "12:00",
-      //   "13:00",
-      //   "14:00",
-      //   "15:00",
-      //   "16:00",
-      //   "17:00",
-      //   "18:00",
-      //   "19:00",
-      //   "20:00",
-      //   "21:00",
-      //   "22:00",
-      //   "23:00",
-      //   "24:00",
-      // ],
      data: type,
      axisLabel: {
        textStyle: {
@@ -280,6 +273,19 @@ const initChart = (type, values) => {
    //配置项
    series: [
      {
+        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.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,
@@ -399,7 +405,7 @@ const initChart = (type, values) => {
    //height: calc(621px - 45px - 22px);
    display: flex;
    flex-wrap: wrap;
-    justify-content: space-around;
+    justify-content: flex-start;
    padding: 16px 0 0 10px;
  }
 }
--- a/src/components/content/badGasInfo/childComps/GasInfoItem.vue
+++ b/src/components/content/badGasInfo/childComps/GasInfoItem.vue
@@ -122,11 +122,14 @@ function setPoint() {
 #gas-info-item {
  width: 231px;
  text-align: center;
+  margin-right: 26px;
+  &:nth-child(3n){
+    margin-right: 0;
+  }
  //旋转定位阈值位于的刻度
  .point {
    width: 200px;
    height: 200px;
-
    position: relative;
  }
  //用伪元素标记阈值
--- a/src/components/content/fanInfo/FanInfo.vue
+++ b/src/components/content/fanInfo/FanInfo.vue
@@ -5,70 +5,60 @@
      <div class="loading" v-if="loading===0"></div>
      {{ loading === 0 ? '加载中...' : '暂无数据~' }}
    </div>
+
    <div v-else class="fans">
      <div class="fan-item" v-for="(item,index) in socketData" :key="item.equipmentId">
        <div>
-          <!-- echarts -->
          <div class="echart"></div>
-          <!-- 风机名 -->
          <div class="fan-name">{{ changeNum(item) }}号风机</div>
-          <!-- 功能 -->
          <div class="option-nav">
-            <div>
-              <div class="state">
-                <div class="blue-state" :class="{ stopColor: item.breakdown }">
-                  <div :style="{ backgroundImage: 'url(' +getImageUrl(item.breakdown)+')' }" class="state-icon"></div>
-                  状态：<span class="fan-state">{{ item.breakdown ? '故障' : '运行' }}</span>
+            <div class="state">
+              <div class="blue-state" :class="{ stopColor: item.breakdown }">
+                <div :style="{ backgroundImage: 'url(' +getImageUrl(item.breakdown)+')' }" class="state-icon"></div>
+                状态：<span class="fan-state">{{ item.breakdown ? '故障' : '运行' }}</span>
+              </div>
+              <div class="switch">
+                <div
+                    id="auto"
+                    :class="{ active: item.running }"
+                    @click="item.running = true;editOperate(item,'启动')"
+                >
+                  启动
                </div>
-                <div class="switch">
-                  <div
-                      id="auto"
-                      :class="{ active: item.running }"
-                      @click="item.running = true;editOperate(item,'启动')"
-                  >
-                    启动
-                  </div>
-                  <div
-                      id="stop"
-                      :class="{ active: !item.running }"
-                      @click="item.running = false;editOperate(item,'停止')"
-                  >
-                    停止
-                  </div>
+                <div
+                    id="stop"
+                    :class="{ active: !item.running }"
+                    @click="item.running = false;editOperate(item,'停止')"
+                >
+                  停止
                </div>
              </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>
-                  </el-radio-group>
-                </div>
-                <div class="edit-power" title="输入完成后, 请回车进行修改">
-                  <div>
-                    <span style="color: white">给定频率</span>
-                    <!--                  <span class="units"-->
-                    <!--                  ><input-->
-                    <!--                      type="number"-->
-                    <!--                      min="0"-->
-                    <!--                      v-model="item.frequencySetting"-->
-                    <!--                      onchange="changeFrequency(item)"-->
-                    <!--                      :disabled="item.autoMode"-->
-                    <!--                  /></span>-->
-                    <el-input type="number" min="0" v-model="item.frequencySetting" :disabled="item.autoMode"
-                              title="输入完成后, 请回车进行修改"
-                              @change="changeFrequency(item)" @focus="item.showTooltip=true"
-                              @blur="item.showTooltip=false" :class="{changeMargin: item.showTooltip}">
-                      <template #suffix>
-                        <span>Hz</span>
-                      </template>
-                    </el-input>
-                  </div>
-                  <!--                  <span v-if="item.showTooltip">-->
-                  <!--                     正在输入中...-->
-                  <!--                  </span>-->
-                </div>
-
+            </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>
+                </el-radio-group>
+              </div>
+              <div class="edit-power" title="输入完成后, 请回车进行修改">
+                <span style="color: white">给定频率</span>
+                <!--                  <span class="units"-->
+                <!--                  ><input-->
+                <!--                      type="number"-->
+                <!--                      min="0"-->
+                <!--                      v-model="item.frequencySetting"-->
+                <!--                      onchange="changeFrequency(item)"-->
+                <!--                      :disabled="item.autoMode"-->
+                <!--                  /></span>-->
+                <el-input type="number" min="0" v-model="item.frequencySetting" :disabled="item.autoMode"
+                          title="输入完成后, 请回车进行修改" @change="changeFrequency(item)" @focus="item.showTooltip=true"
+                          @blur="item.showTooltip=false" :class="{changeMargin: item.showTooltip}"
+                          @submit="changeFrequency(item)">
+                  <template #suffix>
+                    <span>Hz</span>
+                  </template>
+                </el-input>
              </div>
            </div>
          </div>
@@ -107,6 +97,8 @@
          <div style="width: 1px;"></div>
        </div>
        <div class="time-select">
+          <choose-time v-if="selectTimeButton===2" :time="dayValue" @select="daySelect"/>
+          <choose-month v-if="selectTimeButton===1" :time="monthValue" @select="monthSelect"/>
          <time-range-btn
              :buttonList="timeList"
              v-model="selectTimeButton"
@@ -124,6 +116,8 @@
 import * as echarts from "echarts";
 import FanInfoItem from "./FanInfoItem.vue";
 import TimeRangeBtn from "@/components/timeRangeBtn/index.vue"
+import ChooseTime from "@/components/ChooseTime/index.vue"
+import ChooseMonth from "@/components/ChooseMonth/index.vue"
 import {
  editFrequency,
  editFrequencyModelSwitch,
@@ -134,6 +128,8 @@ import {ElMessage, ElMessageBox} from "element-plus";

 const timeList = ref(["年", "月", "日"]);
 const selectTimeButton = ref(2);
+const dayValue = ref('');
+const monthValue = ref('');
 const props = defineProps({
  list: Array,
  tunnelId: Number,
@@ -206,14 +202,29 @@ watch(() => props.list, (now) => {
  })
  handleOnMounted()
 }, {deep: true});
-const timeSelect = (index) => {
-  if (index === 0) {
-    getFanInfo(openEquipmentId.value, 'years')
-  } else if (index === 1) {
-    getFanInfo(openEquipmentId.value, 'month')
-  } else if (index === 2) {
-    getFanInfo(openEquipmentId.value, 'day')
+const daySelect = (val) => {
+  console.log('daySelect')
+  dayValue.value = val
+  getFanInfo(openEquipmentId.value, 'day',val)
+}
+const monthSelect = (val) => {
+  monthValue.value = val
+  getFanInfo(openEquipmentId.value, 'month',val)
+}
+const changeDate = (index) => {
+  switch (index) {
+    case 0:
+      return 'years'
+    case 1:
+      return 'month'
+    case 2:
+      return 'day'
  }
+}
+const timeSelect = (index) => {
+  dayValue.value = ''
+  monthValue.value = ''
+  getFanInfo(openEquipmentId.value, changeDate(index))
 };
 const packageData = (item, type, flag) => {
  let number = 0
@@ -238,49 +249,67 @@ const packageData = (item, type, flag) => {
 }
 //启动/停止
 const editOperate = (item, type) => {
-  ElMessageBox.confirm(`是否${type}该风机？`, '系统提示', {
+  ElMessageBox.confirm(`确认${type}${changeNum(item)}号风机吗？`, '系统提示', {
    type: 'warning',
    closeOnClickModal: false
  }).then(() => {
    const data = packageData(item, item.running)
    editFrequencyOperationSwitch(data).then(res => {
-      console.log('修改风机启动', res)
      if (res.code === 1000) {
        ElMessage.success(res.msg)
      } else {
        ElMessage.error(res.msg)
      }
    })
-  })
+  }).catch(() => {
+    item.running = !item.running
+  });
 }

 const changeFrequency = (item) => {
-  console.log('修改频率')
-  const data = packageData(item, item.frequencySetting, true)
-  editFrequency(data).then(res => {
-    console.log('修改风机频率', res)
-    if (res.code === 1000) {
-      ElMessage.success(res.msg)
-    } else {
-      ElMessage.warning(res.msg)
-    }
-  })
+  ElMessageBox.confirm(`确认修改${changeNum(item)}号风机的频率为${item.frequencySetting}Hz吗？`, '系统提示', {
+    type: 'warning',
+    closeOnClickModal: false
+  }).then(() => {
+    const data = packageData(item, item.frequencySetting, true)
+    editFrequency(data).then(res => {
+      if (res.code === 1000) {
+        ElMessage.success(res.msg)
+      } else {
+        ElMessage.warning(res.msg)
+      }
+    })
+  }).catch(() => {
+    // item.running=!item.running
+  });
 }
 const changeModel = (item) => {
-  const data = packageData(item, item.autoMode)
-  editFrequencyModelSwitch(data).then(res => {
-    console.log('修改自动模式', res)
-    if (res.code === 1000) {
-      ElMessage.success(res.msg)
-    } else {
-      ElMessage.warning(res.msg)
-    }
-  })
+  let flag
+  if (item.autoMode) {
+    flag = '自动'
+  } else {
+    flag = '手动'
+  }
+  ElMessageBox.confirm(`确认修改${changeNum(item)}号风机的模式为${flag}模式吗？`, '系统提示', {
+    type: 'warning',
+    closeOnClickModal: false
+  }).then(() => {
+    const data = packageData(item, item.autoMode)
+    editFrequencyModelSwitch(data).then(res => {
+      if (res.code === 1000) {
+        ElMessage.success(res.msg)
+      } else {
+        ElMessage.warning(res.msg)
+      }
+    })
+  }).catch(() => {
+    item.autoMode = !item.autoMode
+  });
 }
-const getFanInfo = (equipmentId, type = 'day') => {
+const getFanInfo = (equipmentId, type = 'day', time = '') => {
  isVisited.value = true
  showLoading.value = true
-  getFanEchartsInfo(equipmentId, type).then(res => {
+  getFanEchartsInfo(equipmentId, time, type).then(res => {
    if (res?.code === 1000) {
      showLoading.value = false
      nextTick(() => {
@@ -290,6 +319,7 @@ const getFanInfo = (equipmentId, type = 'day') => {
  })
 }
 const handleOpenChart = (item) => {
+  selectTimeButton.value = 2
  openEquipmentId.value = item.equipmentId
  getFanInfo(item.equipmentId, 'day')
  if (item.equipmentId === 22) {
@@ -330,7 +360,6 @@ const getImage = (type) => {
  }
 }
 const changeNum = (item) => {
-  console.log('1号变频器')
  switch (item.equipmentId) {
    case 22:
      return '一';
@@ -450,7 +479,7 @@ const handleOnMounted = () => {
          },
          data: [
            {
-              value: socketData.value[i].frequencySetting,
+              value: socketData.value[i].frequencyFeedback,
              fontSize: 2100,
              detail: {
                valueAnimation: true,
@@ -543,7 +572,7 @@ const initChart = (type, valueA, valueB, valueC) => {
    },
    dataZoom: [{
      type: 'inside',
-      },
+    },
      {
        type: 'slider',
        top: 1050,
@@ -809,173 +838,157 @@ input[type="number"] {
        }

        .option-nav {
-          //display: flex;
-          //flex-direction: column;
          width: 70%;
+          display: flex;
+          align-items: center;

-          > div:first-child {
-            margin-top: 48px;
+          .state {
+            flex: 1;
            display: flex;
-            align-items: center;
+            flex-direction: column;
+            justify-content: center;
+            font-size: 28px;
+            color: #38cafb;
+            line-height: 35px;
+            gap: 40px;

-            .state {
-              flex: 1;
+            .stopColor {
+              background-color: red !important;
+            }
+
+            .blue-state {
              display: flex;
-              flex-direction: column;
-              justify-content: center;
-              font-size: 28px;
-              color: #38cafb;
-              line-height: 35px;
-              gap: 40px;
+              align-items: center;
+              height: 45px;
+              margin-right: 15px;
+              color: #fff;
+              background-color: #3eab3f;
+              padding-left: 10px;
+              border-radius: 8px;
+              margin-left: -5px;

-              .stopColor {
-                background-color: red !important;
+              .state-icon {
+                width: 28px;
+                height: 28px;
+                background-image: url('../../../assets/images/fanInfo/white-state-icon.png') !important;
+                margin-right: 10px;
              }

-              .blue-state {
-                display: flex;
-                align-items: center;
-                height: 45px;
-                margin-right: 15px;
-                color: #fff;
-                background-color: #3eab3f;
-                padding-left: 10px;
-                border-radius: 8px;
-                margin-left: -5px;
-
-                .state-icon {
-                  width: 28px;
-                  height: 28px;
-                  background-image: url('../../../assets/images/fanInfo/white-state-icon.png') !important;
-                  margin-right: 10px;
-                }
-
-                .fan-state {
-                  color: #FFFFFF;
-                }
-              }
-
-
-              .switch {
-                display: flex;
-                width: 165px;
-                height: 45px;
-                border-radius: 22px;
-                border: 2px solid #0f82af;
-                overflow: hidden;
-                font-weight: bold;
-                color: #127399;
-                line-height: 40px;
-
-                & > div {
-                  flex: 1;
-                  text-align: center;
-                  cursor: pointer;
-                }
+              .fan-state {
+                color: #FFFFFF;
              }
            }

-            .power {
-              flex: 1.3;
+
+            .switch {
              display: flex;
-              flex-direction: column;
-              justify-content: center;
-              //padding: 0 20px;
-              font-size: 28px;
-              color: #38cafb;
-              line-height: 37px;
-              gap: 40px;
+              width: 165px;
+              height: 45px;
+              border-radius: 22px;
+              border: 2px solid #0f82af;
+              overflow: hidden;
+              font-weight: bold;
+              color: #127399;
+              line-height: 40px;

-              .check-box {
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                //margin-left: 20px;
-              }
-
-              .edit-power {
-                margin-top: 10px;
-                display: flex;
-                flex-direction: column;
-
-                .changeMargin {
-
-                }
-
-                > div:first-child {
-                  display: flex;
-
-                  > span:first-child {
-                    white-space: pre;
-                    margin-right: 14px;
-                  }
-
-                  :deep(.is-focus) {
-                    .el-input__inner {
-                      font-weight: normal !important;
-                      color: #fff !important;
-                    }
-                  }
-
-                  :deep(.el-input__wrapper) {
-                    width: 160px;
-                    height: 44px;
-                    background-color: transparent;
-                    box-shadow: none;
-                    border: 1px solid #38CAFB;
-                    transform: none;
-                    transition: none;
-                    margin-right: 10px;
-
-                    .el-input__inner {
-                      height: 44px;
-                      font-size: 30px;
-                      font-weight: bold;
-                      color: #38CAFB;
-                    }
-
-
-                    .el-input__suffix-inner {
-                      font-size: 30px;
-                      color: #38CAFB;
-                      line-height: 40px;
-                      font-weight: bold;
-                    }
-                  }
-
-                }
-
-
-                //.units {
-                //  position: relative;
-                //}
-                //
-                //.units::after {
-                //  content: "Hz";
-                //  position: absolute;
-                //  right: 6px;
-                //  top: 50%;
-                //  transform: translateY(-50%);
-                //  font-size: 28px;
-                //  color: #38cafb;
-                //  line-height: 37px;
-                //}
-                //
-                //input {
-                //  width: 130px;
-                //  height: 44px;
-                //  border: 2px solid #0f82af;
-                //  background: transparent;
-                //  margin-left: 14px;
-                //  outline: none;
-                //  font-size: 28px;
-                //  font-weight: bold;
-                //  color: #38cafb;
-                //  line-height: 37px;
-                //}
+              & > div {
+                flex: 1;
+                text-align: center;
+                cursor: pointer;
              }
            }
          }
+
+          .power {
+            flex: 1.3;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            //padding: 0 20px;
+            font-size: 28px;
+            color: #38cafb;
+            line-height: 37px;
+            gap: 40px;
+
+            .check-box {
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              //margin-left: 20px;
+            }
+
+            .edit-power {
+              margin-top: 10px;
+              display: flex;
+              //flex-direction: column;
+              > span:first-child {
+                white-space: pre;
+                margin-right: 14px;
+              }
+
+              :deep(.is-focus) {
+                .el-input__inner {
+                  font-weight: normal !important;
+                  color: #fff !important;
+                }
+              }
+
+              :deep(.el-input__wrapper) {
+                width: 160px;
+                height: 44px;
+                background-color: transparent;
+                box-shadow: none;
+                border: 1px solid #38CAFB;
+                transform: none;
+                transition: none;
+                margin-right: 10px;
+
+                .el-input__inner {
+                  height: 44px;
+                  font-size: 30px;
+                  font-weight: bold;
+                  color: #38CAFB;
+                }
+
+
+                .el-input__suffix-inner {
+                  font-size: 30px;
+                  color: #38CAFB;
+                  line-height: 40px;
+                  font-weight: bold;
+                }
+              }
+
+              //.units {
+              //  position: relative;
+              //}
+              //
+              //.units::after {
+              //  content: "Hz";
+              //  position: absolute;
+              //  right: 6px;
+              //  top: 50%;
+              //  transform: translateY(-50%);
+              //  font-size: 28px;
+              //  color: #38cafb;
+              //  line-height: 37px;
+              //}
+              //
+              //input {
+              //  width: 130px;
+              //  height: 44px;
+              //  border: 2px solid #0f82af;
+              //  background: transparent;
+              //  margin-left: 14px;
+              //  outline: none;
+              //  font-size: 28px;
+              //  font-weight: bold;
+              //  color: #38cafb;
+              //  line-height: 37px;
+              //}
+            }
+
+          }
        }
      }

--- a/src/components/content/windPressure/WindPressureList.vue
+++ b/src/components/content/windPressure/WindPressureList.vue
@@ -23,6 +23,8 @@
          <div style="width: 1px;"></div>
        </div>
        <div class="time-select">
+          <choose-time v-if="selectTimeButton===2" :time="dayValue" @select="daySelect"/>
+          <choose-month v-if="selectTimeButton===1" :time="monthValue" @select="monthSelect"/>
          <time-range-btn
              :buttonList="timeList"
              v-model="selectTimeButton"
@@ -41,12 +43,16 @@ import WindPressureItem from "./childComps/WindPressureItem.vue";
 import TimeRangeBtn from "@/components/timeRangeBtn/index.vue"
 import * as echarts from 'echarts';
 import {getEchartsInfo} from "@/api/largeScreen";
+import ChooseTime from "@/components/ChooseTime/index.vue"
+import ChooseMonth from "@/components/ChooseMonth/index.vue"

 const props = defineProps({
  list: Array,
  winData: Array,
  loading: Number,
 });
+const dayValue = ref('');
+const monthValue = ref('');
 const windSort = ref(1)
 const windSortId = ref(1)
 const timeList = ref(["年", "月", "日"]);
@@ -68,11 +74,18 @@ watch(() => props.list, (now) => {
 watch(() => props.winData, (now) => {
  getScreenInfo(now.windPressureSensorList)
 }, {deep: true});
-
-const getWindInfo = (equipmentId, type = 'day') => {
+const daySelect = (val) => {
+  dayValue.value = val
+  getWindInfo(windSortId.value, 'day', val)
+}
+const monthSelect = (val) => {
+  monthValue.value = val
+  getWindInfo(windSortId.value, 'month', val)
+}
+const getWindInfo = (equipmentId, type = 'day', time = '') => {
  isVisited.value = true
  showLoading.value = true
-  getEchartsInfo(equipmentId, type).then(res => {
+  getEchartsInfo(equipmentId, time, type).then(res => {
    if (res?.code === 1000) {
      showLoading.value = false
      nextTick(() => {
@@ -88,14 +101,20 @@ const handleOpenChart = (item) => {
  windSort.value = item.equipmentName
  windSortId.value = item.equipmentId
 }
-const timeSelect = (index) => {
-  if (index === 0) {
-    getWindInfo(windSortId.value, 'years')
-  } else if (index === 1) {
-    getWindInfo(windSortId.value, 'month')
-  } else if (index === 2) {
-    getWindInfo(windSortId.value, 'day')
+const changeDate = (index) => {
+  switch (index) {
+    case 0:
+      return 'years'
+    case 1:
+      return 'month'
+    case 2:
+      return 'day'
  }
+}
+const timeSelect = (index) => {
+  dayValue.value = ''
+  monthValue.value = ''
+  getWindInfo(windSortId.value, changeDate(index))
 };
 const getScreenInfo = (now) => {
  let windPressureObj = {}
--- a/src/components/timeRangeBtn/index.vue
+++ b/src/components/timeRangeBtn/index.vue
@@ -30,7 +30,6 @@ const props = defineProps({
  },
 });
 const emit = defineEmits(["update:modelValue", "select"]);
-
 const selectButton = ref(props.modelValue);

 const select = (index) => {
--- a/src/components/tunnelTitle/index.vue
+++ b/src/components/tunnelTitle/index.vue
@@ -0,0 +1,9 @@
+<template>
+  <div class="tunnel-title">
+    <span>{{ currentSite }}地下复杂洞群智能通风控制系统</span>
+  </div>
+</template>
+
+<script setup>
+const currentSite=ref(localStorage.getItem('site'))
+</script>
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -23,6 +23,15 @@ const routes = [
      breadcrumb: true
    },
  },
+  {
+    path: '/:tunnelId/:siteId',
+    name: 'changeSitePreview',
+    component: () => import('@/views/tunnel/index.vue'),
+    meta: {
+      title: '站点预览',
+      breadcrumb: true
+    },
+  },
  {
    path: '/:tunnelId',
    name: 'previewTunnel',
@@ -51,7 +60,7 @@ const routes = [
    }
  },
  {
-    path: '/site/:userId(\\d+)',
+    path: '/site/:userId(\\d+)/:siteId(\\d+)',
    name: 'site',
    component: () => import('@/views/site/index.vue'),
    meta: {
--- a/src/views/device-manage/index.vue
+++ b/src/views/device-manage/index.vue
@@ -8,7 +8,7 @@
      <div class="tunnel-name">
        {{ tunnelName }}
      </div>
-      <div class="tunnel-title"></div>
+      <tunnel-title/>
    </div>
    <div class="device-content">
      <div class="device-box">
@@ -49,25 +49,34 @@
                      :header-cell-style="{backgroundColor: '#064B66',color: '#fff',fontSize: '40px',borderBottom: 'none' }"
                      :cell-style="{textAlign: 'center',borderBottom: 'none'}" :data="fanData">
              <el-table-column prop="equipmentName" label="设备名称" align="center"/>
+              <el-table-column prop="ratedPower" label="额定功率" align="center">
+                <template #default="scope">
+                  <el-input placeholder="额定功率" v-model="scope.row.ratedPower"
+                            @change="changeRatedPower(scope.row)"></el-input>
+                </template>
+              </el-table-column>
              <el-table-column prop="phaseCurrentAOffset" label="A电流偏移量" align="center"/>
              <el-table-column prop="acurrentValue" label="A电流阈值" align="center">
                <template #default="scope">
-                  <el-input placeholder="A电流" v-model="scope.row.acurrentValue" @change="changeFanData(scope.row)"></el-input>
+                  <el-input placeholder="A电流" v-model="scope.row.acurrentValue"
+                            @change="changeFanData(scope.row)"></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="phaseCurrentBOffset" label="B电流偏移量" align="center"/>
              <el-table-column prop="bcurrentValue" label="B电流阈值" align="center">
                <template #default="scope">
-                  <el-input placeholder="B电流" v-model="scope.row.bcurrentValue"  @change="changeFanData(scope.row)"></el-input>
+                  <el-input placeholder="B电流" v-model="scope.row.bcurrentValue"
+                            @change="changeFanData(scope.row)"></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="phaseCurrentCOffset" label="C电流偏移量" align="center"/>
              <el-table-column prop="ccurrentValue" label="C电流阈值" align="center">
                <template #default="scope">
-                  <el-input placeholder="C电流" v-model="scope.row.ccurrentValue"  @change="changeFanData(scope.row)"></el-input>
+                  <el-input placeholder="C电流" v-model="scope.row.ccurrentValue"
+                            @change="changeFanData(scope.row)"></el-input>
                </template>
              </el-table-column>
-              <el-table-column prop="state" label="状态" align="center">
+              <el-table-column prop="state" label="状态" align="center"  min-width="86">
                <template #default="scope">
                  <div class="switch">
                    <div
@@ -117,12 +126,13 @@
              <el-table-column prop="offset" label="偏移量" align="center"/>
              <el-table-column prop="unit" label="单位" align="center">
                <template #default="scope">
-                  <el-input placeholder="单位" v-model="scope.row.unit"  @change="changeWindData(scope.row)"></el-input>
+                  <el-input placeholder="单位" v-model="scope.row.unit" @change="changeWindData(scope.row)"></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="alarmValue" label="阈值" align="center">
                <template #default="scope">
-                  <el-input placeholder="阈值" v-model="scope.row.alarmValue" @change="changeWindData(scope.row)"></el-input>
+                  <el-input placeholder="阈值" v-model="scope.row.alarmValue"
+                            @change="changeWindData(scope.row)"></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="state" label="状态" align="center">
@@ -159,7 +169,7 @@
            <span>其他传感器设备管理</span>
            <div class="collection-frequency">
              <span>采集频率</span>
-              <el-input type="number" v-model="otherFrequency"  @change="changeOther">
+              <el-input type="number" v-model="otherFrequency" @change="changeOther">
                <template #suffix>
                  <span>秒/次</span>
                </template>
@@ -180,7 +190,8 @@
              </el-table-column>
              <el-table-column prop="alarmValue" label="阈值" align="center">
                <template #default="scope">
-                  <el-input placeholder="阈值" v-model="scope.row.alarmValue" @change="changeOtherData(scope.row)"></el-input>
+                  <el-input placeholder="阈值" v-model="scope.row.alarmValue"
+                            @change="changeOtherData(scope.row)"></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="state" label="状态" align="center">
@@ -233,7 +244,8 @@
              <el-table-column prop="offset" label="偏移量" align="center"/>
              <el-table-column prop="thresholdValue" label="阈值" align="center">
                <template #default="scope">
-                  <el-input placeholder="阈值" v-model="scope.row.thresholdValue"  @change="changeFenData(scope.row)"></el-input>
+                  <el-input placeholder="阈值" v-model="scope.row.thresholdValue"
+                            @change="changeFenData(scope.row)"></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="state" label="状态" align="center">
@@ -273,7 +285,7 @@
 <script setup>
 import {ElMessage} from "element-plus";
 import {getEquipmentList, editEquipment, getTunnelDetail} from "@/api/tunnelManage";
-
+import TunnelTitle from "@/components/tunnelTitle/index.vue";
 const router = useRouter()
 const tunnelId = reactive(router.currentRoute.value.params.tunnelId)
 const userId = reactive(router.currentRoute.value.params.userId)
@@ -293,43 +305,43 @@ const editFenLiuData = ref([])
 const frequencyData = ref([])
 const siteId = ref(0)
 const tunnelName = ref('')
-const changeFan=(e)=>{
-  const fanObj={
-    acquisitionPeriod: e*1000,
+const changeFan = (e) => {
+  const fanObj = {
+    acquisitionPeriod: e * 1000,
    tunnelId: tunnelId,
    typeKey: 'frequency'
  }
  frequencyData.value.push(fanObj)
 }
-const changeFanData=(row)=>{
+const changeFanData = (row) => {
  editFanData.value.push(row)
 }
-const changeWind=(e)=>{
-  const windObj={
-    acquisitionPeriod: e*1000,
+const changeWind = (e) => {
+  const windObj = {
+    acquisitionPeriod: e * 1000,
    tunnelId: tunnelId,
    typeKey: 'windPressure'
  }
  frequencyData.value.push(windObj)
 }
-const changeWindData=(row)=>{
+const changeWindData = (row) => {
  editWinData.value.push(row)
 }
-const changeOther=(e)=>{
-  const otherObj={
-    acquisitionPeriod: e*1000,
+const changeOther = (e) => {
+  const otherObj = {
+    acquisitionPeriod: e * 1000,
    tunnelId: tunnelId,
    typeKey: 'sensor'
  }
  frequencyData.value.push(otherObj)
 }
-const changeOtherData=(row)=>{
+const changeOtherData = (row) => {
  editOtherData.value.push(row)
 }
 const editEquip = () => {
-  const basicData={
-    tunnelId:tunnelId,
-    acquisitionList:frequencyData.value,
+  const basicData = {
+    tunnelId: tunnelId,
+    acquisitionList: frequencyData.value,
    frequencyChangerList: editFanData.value,
    windPressureSensorList: editWinData.value,
    sensorList: editOtherData.value,
@@ -436,7 +448,7 @@ getList()

    .device-box {
      display: flex;
-      width: 2194px;
+      width: 2260px;
      height: 1600px;
      background: #064B66;
      border-radius: 20px;
@@ -549,7 +561,8 @@ getList()

      .device-table {
        margin-top: 50px;
-        margin-left: 60px;
+        margin-left: 50px;
+        margin-right: 50px;

        .active {
          color: #FFFFFF;
@@ -581,7 +594,8 @@ getList()
        }

        :deep(.el-table--fit) {
-          width: 1780px !important;
+          //width: 1780px !important;
+          width: auto;
        }

        :deep(.cell) {
--- a/src/views/edit/edit.vue
+++ b/src/views/edit/edit.vue
@@ -5,7 +5,7 @@
        <div class="back-icon"></div>
        <span>返回</span>
      </div>
-      <div class="tunnel-title"></div>
+      <tunnel-title/>
      <div class="btn-right">
        <div class="del-btn" @click="handleGotoDevice">设备管理</div>
        <div class="del-btn" @click="handleSave">保存</div>
@@ -25,6 +25,9 @@
        <el-form-item label="隧道长度">
          <el-input type="number" v-model="form.totalLength" placeholder="请输入隧道长度"/>
        </el-form-item>
+<!--        <el-form-item label="施工长度">-->
+<!--          <el-input type="number" v-model="form.constructionLength" placeholder="请输入施工长度"/>-->
+<!--        </el-form-item>-->
        <el-form-item label="是否默认">
          <el-radio-group v-model="form.isDefault">
            <el-radio :label="true">是</el-radio>
@@ -45,16 +48,14 @@
 <script setup>
 import TunnelScene from "@/components/content/tunnelScene/TunnelScene.vue";
 import {editTunnel, getTunnelDetail} from "@/api/tunnelManage";
-import {computed, provide, toRaw} from "vue";
-import {useModelSceneStore} from "@/store/modelSceneStore";
 import {ElMessage} from "element-plus";
-import {initSceneData} from "../../api/tunnelScene";
+import {initSceneData} from "@/api/tunnelScene";
+import TunnelTitle from "@/components/tunnelTitle/index.vue";

 const router = useRouter();
 const tunnelId = reactive(router.currentRoute.value.params.tunnelId);
 const userId = reactive(router.currentRoute.value.params.userId);
 const type = reactive(router.currentRoute.value.params.type);
-const modelStore = useModelSceneStore();
 const constructionLength = ref(0)
 const modelEquipmentList = ref(null)
 const form = ref({
@@ -103,6 +104,7 @@ const getTunnelInfo = () => {
      serialNumber: form.value.serialNumber,
      remarks: form.value.remarks,
      constructionLength: constructionLength.value,
+      // constructionLength: form.value.constructionLength,
      tunnelLength: form.value.totalLength,
      isDefault: form.value.isDefault,
      modelEquipmentList: modelEquipmentList.value,
--- a/src/views/site/index.vue
+++ b/src/views/site/index.vue
@@ -1,11 +1,11 @@
 <template>
  <div class="site-bgc">
    <div class="box-top">
-      <div class="back-tunnel" @click="router.push('/')">
+      <div class="back-tunnel"  @click="handleGoHome">
        <div class="back-icon"></div>
        <span>返回</span>
      </div>
-      <div class="tunnel-title"></div>
+      <tunnel-title/>
      <div class="all-del-btn">
        <div class="all-btn" style=" margin-right: 40px;" v-if="!showAddIcon" @click="handleAdd">
          添加
@@ -105,9 +105,11 @@
 <script setup>
 import {editSite, getSiteDetail, getSiteList, addSite, deleteSite} from "@/api/site";
 import {ElMessage, ElMessageBox} from "element-plus";
+import TunnelTitle from "@/components/tunnelTitle/index.vue";

 const router = useRouter()
 const userId = reactive(router.currentRoute.value.params.userId)
+const siteId = reactive(router.currentRoute.value.params.siteId)
 const siteList = ref([])
 const siteIds = ref([])
 const siteNameList = ref([])
@@ -135,6 +137,9 @@ const formRules = ref({
  siteName: [{required: true, message: '请输入站点名称', trigger:['blur','change']}]
 })
 const formInstance = ref()
+const handleGoHome = () => {
+  router.push('/' + 'siteToHome/' + siteId)
+}
 const getList = () => {
  getSiteList({
    userId:userId,
--- a/src/views/tunnel-manage/index.vue
+++ b/src/views/tunnel-manage/index.vue
@@ -8,7 +8,7 @@
      <div class="site-name">
        {{ siteName }}
      </div>
-      <div class="tunnel-title"></div>
+      <tunnel-title/>
      <div class="all-del-btn" v-if="showOperation">
        <div class="all-btn" style=" margin-right: 40px;" v-if="!showAddIcon" @click="handleAdd">
          添加
@@ -45,8 +45,8 @@
          </div>
          <div class="tunnel-right">
            <div>
-<!--              <div class="fan-icon"></div>-->
-<!--              <span>风机异常</span>-->
+              <!--              <div class="fan-icon"></div>-->
+              <!--              <span>风机异常</span>-->
            </div>
            <div class="icons-block">
              <div v-for="equItem in iconsList" :key="item.icon" class="icon-text">
@@ -79,6 +79,9 @@
        <el-form-item label="隧道长度" prop="totalLength">
          <el-input type="number" v-model="form.totalLength" placeholder="请输入隧道长度"/>
        </el-form-item>
+<!--        <el-form-item label="施工长度" prop="constructionLength">-->
+<!--          <el-input type="number" v-model="form.constructionLength" placeholder="请输入施工长度"/>-->
+<!--        </el-form-item>-->
        <el-form-item label="是否默认">
          <el-radio-group v-model="form.isDefault">
            <el-radio :label="true">是</el-radio>
@@ -112,17 +115,19 @@
 import {ElMessage, ElMessageBox} from "element-plus";
 import {getTunnelList, addTunnel, deleteTunnel} from "@/api/tunnelManage";
 import {getSiteDetail} from "@/api/site";
+import TunnelTitle from "@/components/tunnelTitle/index.vue";
+import {getTunnelBySiteId} from "@/api/largeScreen";

+const validateNumber = (rule, value) => {
+  const reg = /^[A-Za-z0-9]+$/;
+  return reg.test(value);
+}
 const router = useRouter()
 const showAddIcon = ref(true)
 const params = router.currentRoute.value.params;
 const siteId = reactive(params.siteId)
 const userId = reactive(params.userId)
 const type = reactive(params.type)
-const validateNumber = (rule, value) => {
-  const reg = /^[A-Za-z0-9]+$/;
-  return reg.test(value);
-}
 const formRules = ref({
  tunnelName: [{required: true, message: '请输入隧道名称', trigger: ['blur', 'change']}],
  tunnelAlias: [{required: true, message: '请输入隧道简称', trigger: ['blur', 'change']}],
@@ -130,7 +135,8 @@ const formRules = ref({
    {required: true, message: '请输入序列号', trigger: ['blur', 'change']},
    {validator: validateNumber, message: '请输入英文、数字、英文数字组合的用户名', trigger: ['blur', 'change']}
  ],
-  totalLength: [{required: true, message: '请输入隧道长度', trigger: ['blur', 'change']}]
+  totalLength: [{required: true, message: '请输入隧道长度', trigger: ['blur', 'change']}],
+  constructionLength: [{required: true, message: '请输入施工长度', trigger: ['blur', 'change']}]
 })
 const showFirst = ref(true)
 const showOperation = ref(true)
@@ -208,11 +214,12 @@ const total = ref(10);
 onMounted(() => {
  showOperation.value = localStorage.getItem('roleKey') !== 'tunnel_admin';
 })
+
 const handleGoSiteOrIndex = () => {
  if (type === 'bySite') {
-    router.push('/site/' + userId)
+    router.push('/site/' + userId + '/' + localStorage.getItem('currentSiteId'))
  } else if (type === 'byHome') {
-    router.push('/')
+    router.push('/' + 'siteToHome/' + siteId)
  }
 }
 //根据站点id获取隧道信息
@@ -233,7 +240,6 @@ const getList = () => {
      total.value = res.data.total
      tunnelList.value = res.data.rows
      showFirst.value = total.value / pageInfo.pageSize >= 1;
-
      // siteName.value = res.data.siteName
    } else {
      ElMessage.warning(res.msg)
@@ -277,7 +283,15 @@ const handleSubmit = (instance) => {
 const handlePreview = (id) => {
  console.log('预览')
  if (id) {
-    router.push('/' + id)
+    getTunnelBySiteId(siteId).then((res) => {
+      if (res?.code === 1000) {
+        if (res.data.filter((item) => item.value == id).length === 0) {
+          ElMessage.warning('当前预览的隧道未准备好, 不予展示, 请添加设备后再试!')
+        } else {
+          router.push('/' + id + '/' + siteId)
+        }
+      }
+    });
  }
 }
 const handleGoToEditTunnel = (tunnelId) => {
--- a/src/views/tunnel/index.vue
+++ b/src/views/tunnel/index.vue
@@ -1,9 +1,8 @@
 <template>
  <div id="main">
    <div class="box-top">
-      <manage-btn v-model="selectIndex" @select="manageSelect" :list="routeList" v-if="showMenu" />
-      <div class="tunnel-title"></div>
-      <!--      <manage-length class="tunnel-length"></manage-length>-->
+      <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>
@@ -16,8 +15,8 @@
            <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>
@@ -32,27 +31,26 @@
    </div>
    <!-- <tunnel-scene id="tunnel-box" :isedit="false" /> -->
    <!-- 一进去的话应该是预览模式，所以引入这个组件1 -->
-
    <preview-scene id="tunnel-box" :isedit="false" :tunnelId="tunnelId" :key="tunnelId" :tunnelLen="tunnelLen"
-      :tunnelName="tunnelName"></preview-scene>
+                   :tunnelName="tunnelName"></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" :ele-data="largeScreenData" />
+                  :transducer-data="largeScreenData" :loading="showFanLoading" :tunnel-id="tunnelId"/>
+        <used-ele v-if="showFan" :list="socketData.leftData" :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" :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>
@@ -60,7 +58,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 }}
@@ -80,19 +78,25 @@ import WindPressureList from "@/components/content/windPressure/WindPressureList
 import AirInfo from "@/components/content/airInfo/AirInfo.vue";
 import BadGasInfo from "@/components/content/badGasInfo/BadGasInfo.vue";
 import ManageBtn from "@/components/manageBtn/index.vue";
-import { dateFormat } from "@/utils/date.js";
-import { getToken } from "@/utils/auth";
-import { useAuthStore } from "@/store/userstore.js";
-import { getLargeScreen, getLargeScreenInfo, getTunnelBySiteId } from "@/api/largeScreen";
-import { ElMessage, ElMessageBox } from "element-plus";
-import { getUserInfo } from "@/api/login";
-import { initSceneData } from "@/api/tunnelScene";
+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 {getLargeScreen, getLargeScreenInfo, getTunnelBySiteId} from "@/api/largeScreen";
+import {ElMessage, ElMessageBox} from "element-plus";
+import {getUserInfo} from "@/api/login";
+import {initSceneData} from "@/api/tunnelScene";
+import {getTunnelList} from "@/api/tunnelManage";
+
 const authStore = useAuthStore();
 const router = useRouter();
 const previewId = reactive(router.currentRoute.value.params.tunnelId)
+const siteId = reactive(router.currentRoute.value.params.siteId)
+const tunnelIdFlag = reactive(router.currentRoute.value.params.tunnelId)
 const selectIndex = ref(-1);
 const showFan = ref(false);
 const drawerLeft = ref(true);
+const showTunnelTitle = ref(true);
 const initialIndex = ref(0)
 const showFanLoading = ref(0)
 const showWindLoading = ref(0)
@@ -102,6 +106,7 @@ const showMenu = ref(false);
 const currentSiteId = ref(0);
 const currentSite = ref("");
 const siteList = ref([])
+const totalTunnelList = ref([])
 const currentUser = ref("");
 const currentUserId = ref(0);
 const currentDate = ref(dateFormat());
@@ -112,7 +117,9 @@ const tunnelLength = ref(0);
 const constructionLength = ref(0);
 const routeList = ref([]);
 let socket = reactive("");
+let pattern = reactive(new RegExp("[A-Za-z]+"));
 let tunnelName = reactive("")
+let isTunnel = reactive(false)

 const btnList = ref([
  {
@@ -154,9 +161,7 @@ const socketData = reactive({
 let tunnelLen = computed(() => tunnelLength);

 onMounted(() => {
-  if (previewId) {
-    getScreenInfo(previewId)
-  }
+  getList()
  getUser()
  getOtherInfo()
  nextTick(() => {
@@ -177,7 +182,7 @@ const getOtherInfo = () => {
  getLargeScreenInfo().then((res) => {
    if (res?.code === 1000) {
      let routeArr = [];
-      res.data.routeList.forEach((item, index) => {
+      res.data.routeList.forEach((item) => {
        for (let btn of btnList.value) {
          if (item === btn.route) {
            routeArr.push(btn)
@@ -187,22 +192,25 @@ const getOtherInfo = () => {
      routeList.value = routeArr
      showMenu.value = true
      siteList.value = res.data.siteOption
-      currentSiteId.value = res.data.siteOption[0].value
-      currentSite.value = res.data.siteOption[0].label
-      localStorage.setItem('site', currentSite.value)
-      if(res.data.tunnelOption.length === 0){
-        getTunnel(res.data.siteOption[0].value)
-      }else {
+      if (!siteId) {
        tunnelList.value = res.data.tunnelOption
      }
-      if (previewId) {
-        tunnelList.value.forEach((item, index) => {
-          if (item.value == previewId) {
-            initialIndex.value = index
-          }
-        })
+
+      if (siteId) {
+        currentSiteId.value = siteId
+        currentSite.value = localStorage.getItem('site')
+        showTunnelTitle.value = false
+        nextTick(() => {
+          showTunnelTitle.value = true
+        });
+        console.log('siteId',siteId)
+        getTunnel(siteId)
      } else {
        getTunnel(res.data.siteOption[0].value)
+        currentSiteId.value = res.data.siteOption[0].value
+        currentSite.value = res.data.siteOption[0].label
+        localStorage.setItem('site', currentSite.value)
+        localStorage.setItem('currentSiteId', currentSiteId.value)
      }
    }
  });
@@ -223,14 +231,14 @@ const getScreenInfo = (id) => {
          showWindLoading.value = 1
        }
        if (res.data.sensorList.length !== 0) {
-          res.data.sensorList.forEach((item, index) => {
+          res.data.sensorList.forEach((item) => {
            if (
-              item.equipmentType === "carbonDioxide" ||
-              item.equipmentType === "carbonMonoxide" ||
-              item.equipmentType === "hydrogenSulfide" ||
-              item.equipmentType === "sulfurDioxide" ||
-              item.equipmentType === "sulfurMonoxide" ||
-              item.equipmentType === "nitrogenDioxide"
+                item.equipmentType === "carbonDioxide" ||
+                item.equipmentType === "carbonMonoxide" ||
+                item.equipmentType === "hydrogenSulfide" ||
+                item.equipmentType === "sulfurDioxide" ||
+                item.equipmentType === "sulfurMonoxide" ||
+                item.equipmentType === "nitrogenDioxide"
            ) {
              showBadLoading.value = 0
            } else {
@@ -253,17 +261,44 @@ const getScreenInfo = (id) => {
    })
  }
 };
-//根据站点id获取隧道信息
+const getList = () => {
+  getTunnelList({
+    siteId: siteId
+  }).then(res => {
+    if (res.code === 1000) {
+      if (res.data.rows.length !== 0) {
+        isTunnel = true;
+        totalTunnelList.value = res.data.rows
+      } else {
+        isTunnel = false
+      }
+    }
+  })
+}
+//根据站点id获取隧道信息option
 const getTunnel = (id) => {
  getTunnelBySiteId(id).then((res) => {
    if (res?.code === 1000) {
-      if(res.data.length === 0){
-        ElMessage.warning('该站点下无隧道, 请新增隧道后再尝试!')
+      if (res.data.length === 0) {
+        if (isTunnel) {
+          ElMessage.warning('该站点下没有隧道可展示, 请添加设备后再试!')
+        } else {
+          ElMessage.warning('该站点下没有隧道, 请新增隧道后再试!')
+        }
        tunnelList.value = []
-      }else {
-        getScreenInfo(res.data[0]?.value)
-        tunnelName = res.data[0].label
+      } else {
+        if (!pattern.test(previewId)) {
+          getScreenInfo(previewId)
+        }else {
+          getScreenInfo(res.data[0]?.value)
+          tunnelName = res.data[0].label
+        }
        tunnelList.value = res.data
+        tunnelList.value.forEach((item, index) => {
+          if (item.value == previewId) {
+            initialIndex.value = index
+          }
+        })
      }
    }
  });
@@ -285,17 +320,17 @@ const changeTunnel = (e) => {
 }
 const manageSelect = (index) => {
  console.log("首页点击-", index);
-  if (index == '站点管理') {
+  if (index === '站点管理') {
    if (currentUserId.value) {
-      router.push("/site/" + currentUserId.value);
+      router.push("/site/" + currentUserId.value + '/' + currentSiteId.value);
    }
-  } else if (index == '隧道管理') {
+  } else if (index === '隧道管理') {
    if (currentSiteId.value && currentUserId.value) {
-      router.push("/tunnel/" + currentSiteId.value + '/byHome/' + currentUserId.value);
+      router.push("/tunnel/" + localStorage.getItem('currentSiteId') + '/byHome/' + currentUserId.value);
    }
-  } else if (index == '用户管理') {
+  } else if (index === '用户管理') {
    if (currentSiteId.value) {
-      router.push("/user/" + currentSiteId.value);
+      router.push("/user/" + localStorage.getItem('currentSiteId'));
    }
  }
 };
@@ -307,6 +342,15 @@ const handleChangeSite = (item) => {
  nextTick(() => {
    showFan.value = true;
  });
+  localStorage.setItem('site', currentSite.value)
+  localStorage.setItem('currentSiteId', currentSiteId.value)
+  if (tunnelIdFlag) {
+    router.push('/' + tunnelIdFlag + '/' + currentSiteId.value)
+  }
+  showTunnelTitle.value = false
+  nextTick(() => {
+    showTunnelTitle.value = true
+  });
 }
 const closeLeft = () => {
  drawerLeft.value = !drawerLeft.value;
--- a/src/views/user/index.vue
+++ b/src/views/user/index.vue
@@ -1,11 +1,11 @@
 <template>
  <div class="tunnel-bgc">
    <div class="box-top">
-      <div class="back-tunnel" @click="router.push('/')">
+      <div class="back-tunnel" @click="handleGoHome">
        <div class="back-icon"></div>
        <span>返回</span>
      </div>
-      <div class="tunnel-title"></div>
+      <tunnel-title/>
      <div class="all-del-btn">
        <!--        <div class="all-btn" @click="handleAll">-->
        <!--          全选-->
@@ -142,18 +142,18 @@

 <script setup>
 import {Search} from '@element-plus/icons-vue'
-import {addUser, editUser, getUser, getRoleOption} from "@/api/user";
+import {addUser, editUser, getUser, getRoleOption, deleteUser, getUserDetail} from "@/api/user";
 import {ElMessage, ElMessageBox} from "element-plus";
 import {getTunnelOption} from "@/api/tunnel";
-import {deleteUser, getUserDetail} from "../../api/user";
+import TunnelTitle from "@/components/tunnelTitle/index.vue";

 const router = useRouter()
 const title = ref('添加用户')
 const siteId = reactive(router.currentRoute.value.params.siteId)
+const currentSite = ref(localStorage.getItem('site'))
 const username = ref()
 const userIds = ref()
 const showFirst = ref(true)
-const currentSite = ref('')
 const formInstance = ref()
 const userData = ref([])
 const pageInfo = reactive({
@@ -192,7 +192,9 @@ const multipleTable = ref()
 onMounted(() => {
  showAdmin.value = localStorage.getItem('userId') == 2;
 })
-
+const handleGoHome = () => {
+  router.push('/' + 'userToHome/' + siteId)
+}
 const getTunnel = () => {
  getTunnelOption(siteId).then(res => {
    if (res.code === 1000) {
@@ -205,7 +207,6 @@ const handleAddUser = () => {
  reset()
  title.value = '添加用户'
  isVisited.value = true
-  currentSite.value = localStorage.getItem('site')
 }
 const handleEditUser = (row) => {
  reset()
@@ -220,9 +221,7 @@ const handleEditUser = (row) => {
  title.value = '修改用户'
  isVisited.value = true
 }
-const handleAll = () => {
-  multipleTable.value.toggleAllSelection()
-}
+
 const handleDelete = () => {
  if (userIds.value === undefined) {
    ElMessage.warning('请先选择用户进行删除')
@@ -343,7 +342,7 @@ const handleSelect = async (selection, row) => {
 </script>
 <style lang="scss">
 .user-select {
-  .el-select__wrapper{
+  .el-select__wrapper {
    min-height: 75px;
    height: auto !important;
    background-color: transparent;
@@ -351,41 +350,50 @@ const handleSelect = async (selection, row) => {
    font-size: 35px;
    width: 476px;
  }
+
  .el-select__placeholder.is-transparent {
    height: 54px;
    line-height: 54px;
  }
+
  .el-select__selected-item {
    //height: 54px;
    //line-height: 54px;
    .el-tag {
-      max-width: none!important;
+      max-width: none !important;
      height: 55px;
      font-size: 43px;
-        .el-icon {
-          font-size: 51px;
-          width: auto;
-          height: auto;
+
+      .el-icon {
+        font-size: 51px;
+        width: auto;
+        height: auto;
      }
    }
  }
-  .el-select__caret{
+
+  .el-select__caret {
    font-size: 35px !important;
  }
+
  .el-select-dropdown__item.is-hovering {
    background-color: #064B66 !important;
  }
+
  .el-select-dropdown.is-multiple .el-select-dropdown__item.is-selected:after {
    width: 42px;
    height: 42px;
  }
+
  .el-input {
    min-height: 75px;
    height: auto !important;
  }
+
  .el-form-item.is-error .el-input__wrapper {
-   box-shadow: none;
+    box-shadow: none;
  }
+
  .el-select__popper {
    margin-top: -12px !important;
    background: #072247 !important;
@@ -444,6 +452,7 @@ const handleSelect = async (selection, row) => {
  background-color: #05FEFF;
  color: #000;
 }
+
 :deep(.el-form-item__error) {
  font-size: 35px;
 }