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

Reviewed-on: http://git.feashow.cn/clay/tunnel-cloud-web/pulls/304
2024-03-04 12:30:25 +00:00
parent 7a75b40897 62a71e5806
commit b9138ee462
29 changed files with 1672 additions and 330 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/src/api/largeScreen.js
+++ b/src/api/largeScreen.js
@@ -57,6 +57,18 @@ export const getFanEchartsInfo = (id,time,type) => {
    }
  })
 }
+//用电量echarts
+export const getEleEchartsInfo = (id,time,type) => {
+  return request({
+    url: '/tunnel/large/screen/echarts/electricity/consumption',
+    method: 'get',
+    params: {
+      id: id,
+      time: time,
+      type: type
+    }
+  })
+}
 //风机频率修改
 export const editFrequency = (data) => {
  return request({
@@ -81,3 +93,32 @@ export const editFrequencyOperationSwitch = (data) => {
    data
  })
 }
+export const getAlarmInfo = (params) => {
+  return request({
+    url: '/tunnel/alarm',
+    method: 'get',
+    params
+  })
+}
+export const getAlarmDetail = (alarmId) => {
+  return request({
+    url: '/tunnel/alarm/details',
+    method: 'get',
+    params:{
+      alarmId:alarmId
+    }
+  })
+}
+export const updateAlarmState = (data) => {
+  return request({
+    url: '/tunnel/alarm',
+    method: 'put',
+    data
+  })
+}
+export const deleteAlarmSate = (tunnelAlarmIdList) => {
+  return request({
+    url: `/tunnel/alarm/${tunnelAlarmIdList}`,
+    method: 'delete'
+  })
+}
--- a/src/api/site.js
+++ b/src/api/site.js
@@ -13,6 +13,15 @@ export const getSiteDetail = (siteId) => {
    method: 'get'
  })
 }
+export const getSiteDrawing = (siteId) => {
+  return request({
+    url: '/tunnel/site/drawing',
+    method: 'get',
+    params:{
+      siteId:siteId
+    }
+  })
+}
 export const editSite = (data) => {
  return request({
    url: '/tunnel/site',
--- a/src/api/tunnelManage.js
+++ b/src/api/tunnelManage.js
@@ -36,6 +36,12 @@ export const getEquipmentList = (tunnelId) => {
    }
  })
 }
+export const getEquipmentDetail = (equipmentId) => {
+  return request({
+    url: `/tunnel/equipment/?equipmentId=${equipmentId}`,
+    method: 'get'
+  })
+}
 export const editTunnel = (data) => {
  return request({
    url: '/tunnel/model/details',
--- a/src/assets/images/tunnel/img.png
+++ b/src/assets/images/tunnel/img.png
--- a/src/assets/images/tunnel/sd_icon_dtdh.png
+++ b/src/assets/images/tunnel/sd_icon_dtdh.png
--- a/src/assets/images/tunnel/sd_icon_tzdh.png
+++ b/src/assets/images/tunnel/sd_icon_tzdh.png
--- a/src/assets/styles/index.scss
+++ b/src/assets/styles/index.scss
@@ -70,7 +70,7 @@ body,
    display: flex;
    z-index: 3;
    position: absolute;
-    top: 85px;
+    top: 66px;
    left: 30px;

    .btn-box {
@@ -117,7 +117,7 @@ body,
  .top-right {
    z-index: 2;
    position: absolute;
-    top: 50px;
+    top: 28px;
    right: 70px;
    font-size: 28px;
    color: #ffffff;
@@ -336,7 +336,7 @@ body,

    #containerEle {
      flex: 1;
-      height: 1060px;
+      height: 1010px;
      //width: 2180px;
    }

@@ -409,7 +409,7 @@ body,
    right: 119px;
    display: flex;

-    .choose-time {
+    .choose-day {
      margin-right: 40px;

      .el-date-editor {
@@ -462,8 +462,11 @@ body,

  //用电量
  .top-tag {
+    position: absolute;
+    top: 46px;
+    left: 516px;
    display: flex;
-    justify-content: center;
+    //justify-content: center;

    .allUsedEle {
      width: 300px;
@@ -583,34 +586,35 @@ body,
 }

 .current-site {
+  .site-bg {
+    .el-select-dropdown {
+      width: 200px !important;
+    }

-  .el-select-dropdown {
-    width: 200px !important;
-  }
+    .el-select-dropdown__item {
+      color: #fff !important;
+    }

-  .el-select-dropdown__item {
-    color: #fff !important;
-  }
+    .el-select-dropdown__item.hover {
+      background-color: #072247 !important;
+    }

-  .el-select-dropdown__item.hover {
-    background-color: #072247 !important;
-  }
+    .el-select-dropdown__item:hover {
+      background-color: #072247 !important;
+      color: #08B7B8 !important;
+    }

-  .el-select-dropdown__item:hover {
-    background-color: #072247 !important;
-    color: #08B7B8 !important;
-  }
+    .el-select-dropdown__item.selected {
+      color: #08B7B8 !important;
+    }

-  .el-select-dropdown__item.selected {
-    color: #08B7B8 !important;
-  }
+    .el-select-dropdown__list {
+      .el-select-dropdown__item:first-child {
+        color: #FFFFFF;

-  .el-select-dropdown__list {
-    .el-select-dropdown__item:first-child {
-      color: #FFFFFF;
-
-      &:hover {
-        color: #08B7B8 !important;
+        &:hover {
+          color: #08B7B8 !important;
+        }
      }
    }
  }
--- a/src/components/chooseTime/index.vue
+++ b/src/components/chooseTime/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="choose-time">
+  <div class="choose-day">
    <el-date-picker
        v-model="selectButton"
        type="date"
@@ -7,20 +7,14 @@
        size="large"
        value-format="YYYY-MM-DD"
        @change="dataSelect"
-        popper-class="choose-time-popper"
+        popper-class="choose-day-popper"
        :disabled-date="disabledDate"
    />
  </div>
 </template>

 <script setup>
-const props = defineProps({
-  time: {
-    type: Date,
-    default: '',
-  },
-});
-const selectButton = ref(props.time);
+const selectButton = ref();
 const emit = defineEmits(["update:modelValue", "select"]);
 const disabledDate = (time) => {
  // return time.getTime() > Date.now()//不能选择之后的数据
@@ -34,6 +28,12 @@ const dataSelect = (val) => {
  emit("update:modelValue", val);
  emit("select", val);
 };
+const clearData = () => {
+  selectButton.value=''
+}
+defineExpose({
+  clearData
+})
 </script>

 <style lang="scss">
@@ -41,7 +41,7 @@ const dataSelect = (val) => {
  border: 2px solid #0F82AF !important;
 }

-.choose-time-popper {
+.choose-day-popper {
  margin-left: 0 !important;
  width: auto !important;

--- a/src/components/chooseMonth/index.vue
+++ b/src/components/chooseMonth/index.vue
@@ -1,12 +1,12 @@
 <template>
-  <div class="choose-time">
+  <div class="choose-day">
    <el-date-picker
        v-model="selectButton"
        type="month"
        placeholder="选择月"
        @change="dataSelect"
        value-format="YYYY-MM-DD"
-        popper-class="choose-time-popper"
+        popper-class="choose-day-popper"
        :disabled-date="disabledDate"
    />
  </div>
@@ -14,13 +14,7 @@
 </template>

 <script setup>
-const props = defineProps({
-  time: {
-    type: Date,
-    default: '',
-  },
-});
-const selectButton = ref(props.time);
+const selectButton = ref('');
 const emit = defineEmits(["update:modelValue", "select"]);
 const disabledDate = (time) => {
  // return time.getTime() > Date.now()//不能选择之后的数据
@@ -34,6 +28,12 @@ const dataSelect = (val) => {
  emit("update:modelValue", val);
  emit("select", val);
 };
+const clearData = () => {
+  selectButton.value=''
+}
+defineExpose({
+  clearData
+})
 </script>

 <style scoped>
--- a/src/components/content/airInfo/AirInfo.vue
+++ b/src/components/content/airInfo/AirInfo.vue
@@ -33,8 +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"/>
+          <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"
@@ -53,16 +53,16 @@ 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"
+import ChooseDay from "@/components/chooseDay/index.vue"
+import ChooseMonth from "@/components/chooseMonth/index.vue"

-const dayValue = ref('');
-const monthValue = ref('');
 let myEcharts = reactive({});
 const props = defineProps({
  list: Array,
  airData: Array
 });
+const chooseDayRef = ref();
+const chooseMonthRef = ref();
 const windSpeed = ref(0)
 const windDirection = ref(0)
 const loadingText = ref('加载中...')
@@ -97,11 +97,9 @@ watch(() => props.airData, (now) => {
  }
 }, {deep: true});
 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='') => {
@@ -123,6 +121,14 @@ const getChartInfo = (equipmentId, type = 'day',time='') => {
 }
 const handleOpenChart = (id, type) => {
  selectTimeButton.value = 2
+  nextTick(()=>{
+    if(chooseMonthRef.value){
+      chooseMonthRef.value.clearData()
+    }
+    if(chooseDayRef.value){
+      chooseDayRef.value.clearData()
+    }
+  })
  if (type === 'air') {
    dialogTitle.value = id.name
    openDialogId.value = id.equipmentId
@@ -136,6 +142,7 @@ const handleOpenChart = (id, type) => {
    openDialogId.value = id
    getChartInfo(id, 'day')
  }
+
 }
 const changeDate = (index) => {
  switch (index) {
@@ -148,8 +155,6 @@ const changeDate = (index) => {
  }
 }
 const timeSelect = (index) => {
-  dayValue.value = ''
-  monthValue.value = ''
  getChartInfo(openDialogId.value, changeDate(index))
 };

@@ -308,7 +313,7 @@ const initChart = (type, values) => {
 <style lang="scss" scoped>
 #air-info {
  //min-height: 350px;
-  margin-top: 40px;
+  margin-top: 30px;
  //position: absolute;
  z-index: 100;
  width: 824px;
@@ -329,7 +334,7 @@ const initChart = (type, values) => {
    color: #ffffff;
    align-items: center;
    padding: 5px 0 5px 15px;
-    margin-bottom: 25px;
+    margin-bottom: 15px;
    margin-left: 21px;

    > div:first-child {
--- a/src/components/content/airInfo/childComps/ItemInfo.vue
+++ b/src/components/content/airInfo/childComps/ItemInfo.vue
@@ -76,7 +76,7 @@ const setValue = () => {
  align-items: center;
  width: 790px;
  padding: 5px 14px;
-  margin-bottom: 25px;
+  margin-bottom: 15px;
  margin-left: 21px;

  &:hover {
--- a/src/components/content/badGasInfo/BadGasInfo.vue
+++ b/src/components/content/badGasInfo/BadGasInfo.vue
@@ -7,12 +7,11 @@
      <div class="loading" v-if="loading===0"></div>
      {{ loading === 0 ? '加载中...' : '暂无数据~' }}
    </div>
-    <div v-else class="info-list">
+    <div v-else class="info-list"  @click="handleOpenChart">
      <gas-info-item
          v-for="item in badGasList"
          :key="item.equipmentId"
          :gasInfo="item"
-          @click="handleOpenChart"
      />
    </div>
    <div class="digital-tunnel">
@@ -34,8 +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"/>
+          <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"
@@ -54,16 +53,17 @@ 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('');
+import ChooseDay from "@/components/chooseDay/index.vue"
+import ChooseMonth from "@/components/chooseMonth/index.vue"
+
 const props = defineProps({
  list: Array,
  badGasData: Array,
  tunnelId: Number,
  loading: Number,
 });
+const chooseDayRef = ref();
+const chooseMonthRef = ref();
 const timeList = ref(["年", "月", "日"]);
 const selectTimeButton = ref(2);
 const isBadGasVisited = ref(false);
@@ -105,11 +105,9 @@ watch(
    {deep: true}
 );
 const daySelect = (val) => {
-  dayValue.value = val
  getBadGasChartInfo('day', val)
 }
 const monthSelect = (val) => {
-  monthValue.value = val
  getBadGasChartInfo('month', val)
 }
 const changeDate = (index) => {
@@ -123,8 +121,6 @@ const changeDate = (index) => {
  }
 }
 const timeSelect = (index) => {
-  dayValue.value = ''
-  monthValue.value = ''
  getBadGasChartInfo(changeDate(index))
 };
 const getBadGasInfo = (now) => {
@@ -171,6 +167,14 @@ const getBadGasChartInfo = (type, time = '') => {
  })
 }
 const handleOpenChart = () => {
+  nextTick(()=>{
+    if(chooseMonthRef.value){
+      chooseMonthRef.value.clearData()
+    }
+    if(chooseDayRef.value){
+      chooseDayRef.value.clearData()
+    }
+  })
  getBadGasChartInfo('day')
 };
 const getImageUrl = (name) => {
@@ -381,7 +385,7 @@ const initChart = (type, values) => {

 <style lang="scss" scoped>
 #bad-gas-info {
-  margin-top: 40px;
+  margin-top: 30px;
  cursor: pointer;
  //position: absolute;
  width: 824px;
--- a/src/components/content/fanInfo/FanInfo.vue
+++ b/src/components/content/fanInfo/FanInfo.vue
@@ -13,9 +13,10 @@
          <div class="fan-name">{{ changeNum(item) }}号风机</div>
          <div class="option-nav">
            <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>
+<!--              :class="{ stopColor:changeStopColor(item.breakdown,item.running)}"-->
+              <div class="blue-state" :style="{backgroundColor:changeStopColor(item.breakdown,item.running)}" >
+                <div class="state-icon"></div>
+                状态：<span class="fan-state">{{ changeStateText(item.breakdown, item.running) }}</span>
              </div>
              <div class="switch">
                <div
@@ -97,8 +98,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"/>
+          <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"
@@ -116,8 +117,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 ChooseDay from "@/components/chooseDay/index.vue"
+import ChooseMonth from "@/components/chooseMonth/index.vue"
 import {
  editFrequency,
  editFrequencyModelSwitch,
@@ -128,8 +129,6 @@ 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,
@@ -137,6 +136,8 @@ const props = defineProps({
  transducerData: Array,
  loading: Number,
 });
+const chooseDayRef = ref();
+const chooseMonthRef = ref();
 const socketData = ref()
 let Echarts_info1 = null;
 let fan01_option = reactive();
@@ -203,13 +204,10 @@ watch(() => props.list, (now) => {
  handleOnMounted()
 }, {deep: true});
 const daySelect = (val) => {
-  console.log('daySelect')
-  dayValue.value = val
-  getFanInfo(openEquipmentId.value, 'day',val)
+  getFanInfo(openEquipmentId.value, 'day', val)
 }
 const monthSelect = (val) => {
-  monthValue.value = val
-  getFanInfo(openEquipmentId.value, 'month',val)
+  getFanInfo(openEquipmentId.value, 'month', val)
 }
 const changeDate = (index) => {
  switch (index) {
@@ -222,8 +220,6 @@ const changeDate = (index) => {
  }
 }
 const timeSelect = (index) => {
-  dayValue.value = ''
-  monthValue.value = ''
  getFanInfo(openEquipmentId.value, changeDate(index))
 };
 const packageData = (item, type, flag) => {
@@ -319,6 +315,14 @@ const getFanInfo = (equipmentId, type = 'day', time = '') => {
  })
 }
 const handleOpenChart = (item) => {
+  nextTick(() => {
+    if (chooseMonthRef.value) {
+      chooseMonthRef.value.clearData()
+    }
+    if (chooseDayRef.value) {
+      chooseDayRef.value.clearData()
+    }
+  })
  selectTimeButton.value = 2
  openEquipmentId.value = item.equipmentId
  getFanInfo(item.equipmentId, 'day')
@@ -351,19 +355,12 @@ const getTransData = (data) => {
  })
  transducerData.value = tranArr
 }
-const getImage = (type) => {
-  switch (type) {
-    case false:
-      return "blue-state-icon.png";
-    case true:
-      return "red-state-icon.png";
-  }
-}
+
 const changeNum = (item) => {
-  switch (item.equipmentId) {
-    case 22:
+  switch (item.equipmentName) {
+    case '1号变频器':
      return '一';
-    case 23:
+    case '2号变频器':
      return '二';
  }
 }
@@ -508,10 +505,27 @@ const handleOnMounted = () => {
    fan01_option && Echarts_info1.setOption(fan01_option);
  }
 }
-
-const getImageUrl = (name) => {
-  let icon = getImage(name)
-  return new URL(`../../../assets/images/fanInfo/${icon}`, import.meta.url).href
+const changeStopColor = (breakdown, running) => {
+  if (breakdown) {
+    return 'red'
+  } else {
+    if (running) {
+      return '#3eab3f'
+    } else {
+      return '#E6A23C'
+    }
+  }
+}
+const changeStateText = (breakdown, running) => {
+  if (breakdown) {
+    return '故障'
+  } else {
+    if (running) {
+      return '运行'
+    } else {
+      return '停止'
+    }
+  }
 }
 /**
 * 初始化echarts实例方法
--- a/src/components/content/tunnelScene/PreviewScene.vue
+++ b/src/components/content/tunnelScene/PreviewScene.vue
@@ -59,15 +59,53 @@ const edit = ref(null);
 let modelList = ref(null);
 let demo; //定义demo全局变量
 // const loader = new OBJLoader();
+const form = ref({
+    tunnelName: "",
+    serialNumber: "",
+    totalLength: "",
+    referenceFrequency: '',
+    upTime: '',
+    upFrequency: '',
+    dropTime: '',
+    dropFrequency: '',
+    isDefault: false,
+    remarks: "",
+});
 const loader = new OBJLoader();
 let hdrLoader = new RGBELoader();
 let backColorSet = three.sRGBEncoding;
 const modelStore = useModelSceneStore();
-const params = defineProps(["isedit", "tunnelId", "tunnelLen", "tunnelName"]); //接收参数看是不是编辑模式，如果是编辑模式，则需要做一些处理
+const params = defineProps(["isedit", "tunnelId", "tunnelLen", "largeScreen"]); //接收参数看是不是编辑模式，如果是编辑模式，则需要做一些处理



 let isedit = ref(params.isedit)
+let fanData;
+let tunnelAlias = reactive('')
+
+watch(
+    () => params.largeScreen,
+    (now) => {
+        console.log(params.largeScreen);
+        params.largeScreen = now;
+        fanData = (toRaw(params.largeScreen.value)).frequencyChangerList;
+        console.log(fanData);
+    },
+    { 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);
+                tunnelAlias = form.value.tunnelAlias
+            }
+        });
+    }
+};
+getTunnel();
 // const form = ref({
 //     tunnelName: "",
 //     serialNumber: "",
@@ -133,6 +171,7 @@ async function handleMounted() {
    // );
    // 初始化设备模型
    try {
+
        //在这加载隧道
        const map = new Map();
        map.set("equ_fan", await loadModel("/devicesModel/model2.obj"));
@@ -141,9 +180,10 @@ async function handleMounted() {
        demo.initDevicesModel(map);
        // const equipmentList = await store.getEquipmentList();
        modelList.value = await modelStore.initModelDataPreview(params.tunnelId);
+        // console.log(modelList.value);
        // console.log("init", params.tunnelId);
-        demo.previewtunnelModeInit(toRaw(modelList.value));
-        demo.SignsInf(params.tunnelName, String(params.tunnelLen.value))
+        demo.previewtunnelModeInit(toRaw(modelList.value), fanData);
+        demo.SignsInf(tunnelAlias, String(params.tunnelLen.value))
        // watch(
        //     () => params.tunnelId,
        //     (now) => {
--- a/src/components/content/tunnelScene/TunnelScene.vue
+++ b/src/components/content/tunnelScene/TunnelScene.vue
@@ -69,9 +69,9 @@ watch(
  () => params.tunnelLength,
  (now) => {
    params.tunnelLength = now;
-    console.log(params.tunnelLength);
+    // console.log(params.tunnelLength);
    pointGap = now / 20;
-    console.log(params.form.tunnelName);
+    // console.log(params.form.tunnelName);
  },
  { deep: true }
 );
@@ -114,7 +114,7 @@ async function handleMounted() {
    // modelList.value = await initData(params.tunnelId, params.form);
    console.log("test", modelList.value);
    demo.editTunnelInit(toRaw(modelList.value));
-    demo.SignsInf(params.form.tunnelName, String(params.tunnelLength))
+    demo.SignsInf(params.form.tunnelAlias, String(params.tunnelLength))
  } catch (err) {
    console.log(err);
    ElMessage({
@@ -237,6 +237,7 @@ function handleConfirmAddEqu() {
    .then((res) => {
      demo.removeEquipment(targetP.value);
      centerDialogVisible.value = false;
+      handleCancel();
      ElMessage({
        message: "删除成功！",
        type: "success",
--- a/src/components/content/tunnelScene/editEquComp/editDialog.vue
+++ b/src/components/content/tunnelScene/editEquComp/editDialog.vue
@@ -2,39 +2,20 @@
  <div id="edit-dialog">
    <div class="distance-back">
      <p>当前距离洞口：{{ pointDistance_str }}</p>
-      <img
-        src="/images/htmlEditDialog/back-icon.png"
-        alt=""
-        @click="handleCancel"
-      />
+      <img src="/images/htmlEditDialog/back-icon.png" alt="" @click="handleCancel" />
    </div>
    <div class="equ-info">当前风压:{{ p }}Pa</div>
    <div class="setting">
      <div class="setting-item">
        <p>传感器类型</p>

-        <select-input
-          :options="options"
-          @selectChange="handleTypeChange"
-          placeholder="请选择传感器类型"
-          ref="equipmentType"
-        />
+        <select-input :options="options" @selectChange="handleTypeChange" placeholder="请选择传感器类型" ref="equipmentType" />
      </div>
      <div class="setting-item">
        <p>设备选择</p>
-        <select-input
-          :options="options2"
-          @selectChange="handleEquipmentChange"
-          placeholder="请选择设备"
-          ref="equipment"
-        />
+        <select-input :options="options2" @selectChange="handleEquipmentChange" placeholder="请选择设备" ref="equipment" />
      </div>
-      <input-num
-        name="阈值"
-        placeholder="请输入阈值"
-        @inputValue="handelInput"
-        :disabled="isDisabledInputNum"
-      />
+      <input-num name="阈值" placeholder="请输入阈值" @inputValue="handelInput" :disabled="isDisabledInputNum" />
    </div>
    <div class="btn">
      <button @click="removeEquipment">删除</button>
@@ -76,8 +57,7 @@ const modelStore = useModelSceneStore();
 //计算锚点之间距离
 const pointDistance_str = computed(
  () =>
-    `${parseInt(params.pointGap)}米*${params.pointNum}=${
-      parseInt(params.pointGap) * params.pointNum
+    `${parseInt(params.pointGap)}米*${params.pointNum}=${parseInt(params.pointGap) * params.pointNum
    }米`
 );

@@ -187,9 +167,9 @@ function addEquipment() {
    .addEquipment({ ...toRaw(equipmentSetting.value) }, params.pointGap)
    .then((res) => {
      emit("addEquipment", equipmentSetting.value);
-      if (res.code===1000) {
+      if (res.code === 1000) {
        ElMessage.success(res.msg)
-      }else {
+      } else {
        ElMessage.error(res.msg)
      }
      resetEquipmentSetting();
@@ -202,6 +182,7 @@ function addEquipment() {
        });
        resetEquipmentSetting();
      } else {
+        console.log(err);
        ElMessage({
          message: "添加异常！",
          type: "warning",
--- a/src/components/content/tunnelScene/sceneClass/demo.js
+++ b/src/components/content/tunnelScene/sceneClass/demo.js
@@ -388,6 +388,7 @@ export default class Demo {
    // 初始化风机颜色
    this.equMap.get("equ_fan").traverse((v) => {
      v.material = new this.THREE.MeshBasicMaterial();
+      // v.material.color = new this.THREE.Color(0xFF0000);
      v.material.color = new this.THREE.Color(0xC0C0C0);
      if (/^leaf/.test(v.name) || /^roller/.test(v.name)) {
        group.add(v.clone());
@@ -512,7 +513,7 @@ export default class Demo {
  }
  SignsInf(tunnelName, tunnelLength) {
    let Signs = this.scene.getObjectByName('streetSigns');
-    console.log(Signs);
+    // console.log(Signs);
    const tag = new this.THREE.Mesh(
      new this.THREE.PlaneGeometry(100, 76),
      new this.THREE.MeshBasicMaterial({ color: "white" })
--- a/src/components/content/tunnelScene/sceneClass/editEquipment/index.js
+++ b/src/components/content/tunnelScene/sceneClass/editEquipment/index.js
@@ -8,14 +8,14 @@ import EquipmentTag from "../utils/EquipmentTag";
 //formInfo需要的信息这里包括了
 //equipmentType

-function addEquipment(targetPoint, formInfo) {
+function addEquipment(targetPoint, formInfo, fanData) {
  if (targetPoint.hasDevice) {
    return;
  }

  switch (formInfo.equipmentType) {
    case "frequency":
-      handleFanEqu.call(this, targetPoint, formInfo);
+      handleFanEqu.call(this, targetPoint, formInfo, fanData);
      break;
    // 还没有风压阀的模型，所以先用其他设备传感器实现
    // case "valve":
@@ -177,6 +177,7 @@ function handleOtherEqu(targetPoint, equipmentInfo) {
 function handleFanEqu(
  targetPoint,
  equipmentInfo,
+  fanData,
  speed = Math.random().toFixed(1) * 1000
 ) {
  // 由于风机比较多，每个风机转速不一直，保存在一个数中遍历
@@ -196,6 +197,9 @@ function handleFanEqu(
    id: equMesh.id, //模型在场景id
    ...equipmentInfo,
  };
+  //这里感觉情况改变风机的颜色
+  changeFanColor(fanData, targetPoint, this.scene)
+

  // 定义风机旋转
  const fanLeaf = equMesh.getObjectByName("fan_leafs");
@@ -279,4 +283,55 @@ function deleteItem(array, item) {
    array.splice(index, 1);
  }
  return array
+}
+
+//这里是改变风机颜色的代码
+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;
+            }
+          }
+        }
+      }
+    }
+  }
 }
--- a/src/components/content/tunnelScene/sceneClass/editTunnelInit/index.js
+++ b/src/components/content/tunnelScene/sceneClass/editTunnelInit/index.js
@@ -1,6 +1,6 @@
 export function editTunnelInit(equipmentList) {
  //初始化将墙壁隐藏起来
  equipmentList.forEach((item) => {
-    this.addEquipment(this.scene.getObjectByName(item.position), item);
+    this.addEquipment(this.scene.getObjectByName(item.position), item, 1);
  });
 }
--- a/src/components/content/tunnelScene/sceneClass/previewTunnelInit/index.js
+++ b/src/components/content/tunnelScene/sceneClass/previewTunnelInit/index.js
@@ -1,5 +1,5 @@

-export default function previewtunnelModeInit(equipmentList) {
+export default function previewtunnelModeInit(equipmentList, fanData) {
    //初始化将墙壁隐藏起来
    // for (let line = 1; line <= 20; line++) {
    //     if (line < 10) {
@@ -13,7 +13,7 @@ export default function previewtunnelModeInit(equipmentList) {
    // console.log(equipmentList);

    equipmentList.forEach((item) => {
-        this.addEquipment(this.scene.getObjectByName(item.position), item);
+        this.addEquipment(this.scene.getObjectByName(item.position), item, fanData);
    });
    //进行预览和编辑模式的一些操作
    if (this.isedit == false) {
--- a/src/components/content/usedEle/UsedEle.vue
+++ b/src/components/content/usedEle/UsedEle.vue
@@ -22,55 +22,92 @@
      <div class="ele-left-bottom-icon"></div>
      <div class="ele-right-bottom-icon"></div>
    </div>
-    <div class="digital-tunnel">
-      <el-dialog :close-on-click-modal="false" v-model="isVisited" width="2175px" :modal="false">
-        <div class="left-top-icon"></div>
-        <div class="right-top-icon"></div>
-        <div class="top-tag">
-          <div class="allUsedEle">
-            <div class="use-title">
-              {{ month }}总用电量
-            </div>
-            <div class="value">{{ electricityConsumptionMonthly }}kwh</div>
+  </div>
+  <div class="digital-tunnel">
+    <el-dialog :close-on-click-modal="false" v-model="isVisited" width="2175px" :modal="false">
+      <div class="left-top-icon"></div>
+      <div class="right-top-icon"></div>
+      <div class="user-select">
+        <el-select
+            v-model="chooseChartFan"
+            filterable
+            placeholder="请选择风机"
+            :fit-input-width="true"
+            :teleported="false"
+            @change="changeFanData"
+        >
+          <el-option
+              v-for="item in fanList"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+          />
+        </el-select>
+      </div>
+      <div class="top-tag">
+        <div class="allUsedEle">
+          <div class="use-title">
+            月总用电量
          </div>
-          <div class="allUsedEle">
-            <div class="use-title">
-              当月节省量
-            </div>
-            <div class="value">{{ monthlySavings }}kwh</div>
+          <div class="value">{{ totalElectricityConsumption }}kwh</div>
+        </div>
+        <div class="allUsedEle">
+          <div class="use-title">
+            月节省量
          </div>
+          <div class="value">{{ saveElectricity }}kwh</div>
        </div>
-        <div class="loading-block" v-if="showLoading">
-          <div class="loading"></div>
-          <span>加载中...</span>
-        </div>
-        <div class="chat-dialog" v-else>
-          <div id="containerEle"></div>
-          <div style="width: 1px;"></div>
-        </div>
-        <div class="left-bottom-icon"></div>
-        <div class="right-bottom-icon"></div>
-      </el-dialog>
-    </div>
+      </div>
+      <div class="loading-block" v-if="showLoading">
+        <div class="loading" v-if="loadingText==='加载中...'"></div>
+        <span>{{ loadingText }}</span>
+      </div>
+      <div class="chat-dialog" v-else>
+        <div id="containerEle"></div>
+        <div style="width: 1px;"></div>
+      </div>
+      <div class="time-select">
+        <choose-month v-if="selectTimeButton===1" ref="chooseMonthRef" @select="monthSelect"/>
+        <time-range-btn
+            :buttonList="timeList"
+            v-model="selectTimeButton"
+            @select="timeSelect"
+        />
+      </div>
+      <div class="left-bottom-icon"></div>
+      <div class="right-bottom-icon"></div>
+    </el-dialog>
  </div>
 </template>

 <script setup>
 import * as echarts from 'echarts';
-import {dateFormat} from "@/utils/date.js";
+import TimeRangeBtn from "@/components/timeRangeBtn/index.vue"
+import ChooseMonth from "@/components/chooseMonth/index.vue"
+import {getEleEchartsInfo} from "@/api/largeScreen";

 const props = defineProps({
  list: Array,
  eleData: Array
 });
+
+const loadingText = ref('加载中...')
+const timeList = ref(["年", "月"]);
+const selectTimeButton = ref(1);
+const chooseMonthRef = ref();
+const monthValue = ref('');
+const chooseChartFan = ref('');
 let myEcharts = reactive({});
 const isVisited = ref(false);
 const showLoading = ref(false)
 const electricityConsumptionMonthly = ref(0)
-const monthlySavings = ref(40000)
+const monthlySavings = ref(0)
+const totalElectricityConsumption = ref(0)
+const saveElectricity = ref(0)
+const openEquipmentId = ref(0)
 const length = ref(null);
 const valueA = ref();
-const month = ref(dateFormat('', true));
+const fanList = ref([]);
 const valueB = ref(monthlySavings.value);
 const bgImage = computed(() =>
    isVisited.value
@@ -78,57 +115,113 @@ const bgImage = computed(() =>
        : "rgba(6,34,71,0.78)"
 );
 watch(() => props.eleData, (now) => {
-  if (now.frequencyChangerList.length === 0) {
-    electricityConsumptionMonthly.value = 0
-  } else {
-    getBasicData(now.frequencyChangerList)
+  if (now) {
+    let fanObj = {}
+    now.frequencyChangerList.forEach(item => {
+      fanObj = {
+        value: item.equipmentId,
+        label: changeNum(item.equipmentId)
+      }
+      fanList.value.push(fanObj)
+    })
+    getBasicData(now.largeScreenElectricity)
  }
  setValueA()
-}, {deep: true});
-watch(() => props.list, (now) => {
-  // props.eleData.forEach(item => {
-  //   now.forEach(newItem => {
-  //     if (item.equipmentId === newItem.equipmentId) {
-  //       if (newItem.electricityConsumptionDay) {
-  //         electricityConsumptionMonthly.value = newItem.electricityConsumptionMonthly
-  //       }
-  //     }
-  //   })
-  // })
-  setValueA()
-}, {deep: true});
-onMounted(() => {
-  setValueA()
  setValueB()
-})
+}, {deep: true});
+// watch(() => props.list, (now) => {
+//   console.log(now,props.eleData,'大V大V')
+//   props.eleData.frequencyChangerList.forEach(item => {
+//     now.forEach(newItem => {
+//       if (item.equipmentId === newItem.equipmentId) {
+//         if (newItem.electricityConsumptionDay) {
+//           electricityConsumptionMonthly.value = newItem.electricityConsumptionMonthly
+//         }
+//       }
+//     })
+// })
+//   setValueA()
+//   setValueB()
+// }, {deep: true});
+const changeNum = (item) => {
+  switch (item) {
+    case 22:
+      return '一号风机';
+    case 23:
+      return '二号风机';
+  }
+}
 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) / 40000;
  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) / 40000;
  valueB.value.style.height = `${width}px`;
 }
 const getBasicData = (data) => {
-  electricityConsumptionMonthly.value = data[0].electricityConsumptionMonthly
+  electricityConsumptionMonthly.value = data.electricityConsumptionCount
+  monthlySavings.value = data.conserveElectricityCount
+}
+
+const monthSelect = (val) => {
+  monthValue.value = val
+  getFanInfo(openEquipmentId.value, 'month', val)
+}
+const changeDate = (index) => {
+  switch (index) {
+    case 0:
+      return 'years'
+    case 1:
+      return 'month'
+  }
+}
+const timeSelect = (index) => {
+  monthValue.value = ''
+  getFanInfo(openEquipmentId.value, changeDate(index))
+};
+const changeFanData = (val) => {
+  selectTimeButton.value = 1
+  openEquipmentId.value = val
+  getFanInfo(val, 'month', monthValue.value)
+}
+const getFanInfo = (equipmentId, type = 'month', time = '') => {
+  isVisited.value = true
+  showLoading.value = true
+  getEleEchartsInfo(equipmentId, time, type).then(res => {
+    if (res?.code === 1000) {
+      showLoading.value = false
+      totalElectricityConsumption.value = res.data.totalElectricityConsumption
+      saveElectricity.value = res.data.saveElectricity
+      nextTick(() => {
+        initChart(res.data.dates, res.data.consumptionValues, res.data.saveElectricityValues)
+      })
+    }
+  })
+  nextTick(() => {
+    loadingText.value = '加载中...'
+  })
 }
 const handleOpenChart = () => {
-  console.log('用电量弹窗')
+  selectTimeButton.value = 1
  isVisited.value = true
+  openEquipmentId.value = fanList.value[0].value
+  chooseChartFan.value = fanList.value[0].value
  nextTick(() => {
-    initChart()
+    chooseMonthRef.value.clearData()
  })
+  getFanInfo(openEquipmentId.value, 'month')
 }
 /**
 * 初始化echarts实例方法
 */
-const initChart = () => {
+const initChart = (type, valueA, valueB) => {
  //3.初始化container容器
  myEcharts = echarts.init(document.getElementById('containerEle'));
  //5.传入数据
@@ -149,7 +242,7 @@ const initChart = () => {
      left: 0, // 左边距
      right: 20, // 右边距
      top: 80, // 顶边距
-      bottom: 20, // 底边距
+      bottom: 110, // 底边距
      containLabel: true,
    },
    //提示框组件
@@ -183,11 +276,21 @@ const initChart = () => {
    },
    dataZoom: [{
      type: 'inside'
-    }],
+    },
+      {
+        type: 'slider',
+        top: 900,
+        height: 100,
+        textStyle: {
+          fontSize: 45,
+          color: '#fffff'
+        }
+      }],
    //X轴
    xAxis: {
      type: 'category',
-      data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31'],
+      // data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31'],
+      data: type,
      axisLabel: {
        textStyle: {
          fontSize: 45,
@@ -209,12 +312,14 @@ const initChart = () => {
    series: [
      {
        name: '日用电量',
-        data: [120, 200, 150, 80, 70, 110, 130, 100, 140, 130, 160, 150, 90, 130, 110, 120, 150, 140, 130, 120, 110, 100, 90, 80, 100, 140, 130, 160, 150, 24, 50],
+        // data: [120, 200, 150, 80, 70, 110, 130, 100, 140, 130, 160, 150, 90, 130, 110, 120, 150, 140, 130, 120, 110, 100, 90, 80, 100, 140, 130, 160, 150, 24, 50],
+        data: valueA,
        type: 'bar'
      },
      {
        name: '日节省量',
-        data: [140, 130, 160, 150, 90, 130, 110, 120, 150, 140, 130, 120, 110, 100, 90, 80, 100, 140, 130, 160, 150, 24, 50, 120, 200, 150, 80, 70, 110, 130, 100,],
+        // data: [140, 130, 160, 150, 90, 130, 110, 120, 150, 140, 130, 120, 110, 100, 90, 80, 100, 140, 130, 160, 150, 24, 50, 120, 200, 150, 80, 70, 110, 130, 100,],
+        data: valueB,
        type: 'bar'
      },
    ]
@@ -225,11 +330,150 @@ const initChart = () => {
    myEcharts.resize();
  }
 }
-const getImageUrl = (name) => {
-  return new URL(`../../../assets/images/usedEle/${name}`, import.meta.url).href
-}
 </script>
+<style lang="scss">
+.user-select {
+  margin-bottom: 126px;

+  .el-select {
+    width: 476px;
+  }
+
+  .el-input {
+    width: 476px;
+
+    .el-input__wrapper {
+      background-color: transparent;
+      box-shadow: none;
+      border-radius: 10px;
+      border: 2px solid #0F82AF;
+
+      .el-input__inner {
+        height: 80px;
+        font-size: 40px;
+        color: #FFFFFF;
+      }
+    }
+  }
+
+
+  .el-select__placeholder {
+    height: 54px;
+    line-height: 54px;
+    color: #FFFFFF;
+  }
+
+  .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;
+      height: 55px;
+      font-size: 43px;
+
+      .el-icon {
+        font-size: 51px;
+        width: auto;
+        height: auto;
+      }
+    }
+  }
+
+  .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;
+  }
+
+  .el-select__wrapper {
+    min-height: 75px;
+    height: auto !important;
+    background-color: transparent;
+    border: 1px solid #08B7B8;
+    font-size: 35px;
+    width: 476px !important;
+  }
+
+  .el-select__popper {
+    margin-top: -12px !important;
+    background: #072247 !important;
+    border: 1px solid #0F82AF !important;
+    //width: 476px!important;
+    inset: 86px auto auto 0 !important;
+
+    .el-select-dropdown {
+      width: auto;
+    }
+  }
+
+  .el-popper {
+    width: auto;
+    min-width: auto;
+    margin-left: 0;
+    box-sizing: border-box;
+  }
+
+  .el-popper__arrow::before {
+    display: none;
+  }
+
+  .el-select-dropdown__item {
+    font-size: 38px !important;
+    height: 60px !important;
+    line-height: 60px !important;
+
+    > span {
+      color: #FFFFFF;
+    }
+  }
+
+  .el-select .el-input .el-select__caret {
+    font-size: 35px !important;
+  }
+
+  .el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
+    background-color: #064B66 !important;
+  }
+
+  .el-select-dropdown.is-multiple .el-select-dropdown__item.selected {
+    background-color: #064B66 !important;
+  }
+
+  .el-select-tags-wrapper {
+    .el-tag {
+      padding: 28px 20px !important;
+      font-size: 35px;
+
+      .el-icon {
+        width: 40px;
+        height: 40px;
+        font-size: 40px !important;
+      }
+    }
+  }
+}
+</style>
 <style lang="scss" scoped>
 :deep(.el-dialog__header) {
  padding: 0 !important;
@@ -295,19 +539,21 @@ const getImageUrl = (name) => {
      .container {
        width: 60px;
        height: 210px;
-        border-radius: 31px;
+        -webkit-border-radius: 31px;
        border: 1px solid rgba(105, 231, 253, 1);
        position: relative;
        margin-bottom: 20px;
+        padding: 1px;

        .value {
          position: absolute;
          bottom: 0;
-          width: 60px;
+          width: 100%;
          height: inherit;
          background: linear-gradient(180deg, #38CAFB 0%, #2775E7 100%);
-          border-radius: 31px;
-          transition: width 0.5s linear 0s;
+          -webkit-border-radius: 31px;
+          //transition: width 0.5s linear 0s;
+          -webkit-transition: width 1s ease-in-out;
        }
      }

--- a/src/components/content/windPressure/WindPressureList.vue
+++ b/src/components/content/windPressure/WindPressureList.vue
@@ -15,16 +15,16 @@
        <div class="left-top-icon"></div>
        <div class="right-top-icon"></div>
        <div class="loading-block" v-if="showLoading">
-          <div class="loading"></div>
-          <span>加载中...</span>
+          <div class="loading" v-if="loadingText==='加载中...'"></div>
+          <span>{{ loadingText }}</span>
        </div>
        <div class="chat-dialog" v-else>
          <div id="container"></div>
          <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"/>
+          <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"
@@ -43,16 +43,17 @@ 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"
+import ChooseDay from "@/components/chooseDay/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 loadingText = ref('加载中...')
+const chooseDayRef = ref();
+const chooseMonthRef = ref();
 const windSort = ref(1)
 const windSortId = ref(1)
 const timeList = ref(["年", "月", "日"]);
@@ -75,11 +76,9 @@ watch(() => props.winData, (now) => {
  getScreenInfo(now.windPressureSensorList)
 }, {deep: true});
 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 = '') => {
@@ -91,12 +90,25 @@ const getWindInfo = (equipmentId, type = 'day', time = '') => {
      nextTick(() => {
        initChart(res.data.dates, res.data.values)
      })
+    }else {
+      loadingText.value = res.msg
    }
  })
+  nextTick(() => {
+    loadingText.value = '加载中...'
+  })
 }

 const handleOpenChart = (item) => {
  selectTimeButton.value = 2
+  nextTick(()=>{
+    if(chooseMonthRef.value){
+      chooseMonthRef.value.clearData()
+    }
+    if(chooseDayRef.value){
+      chooseDayRef.value.clearData()
+    }
+  })
  getWindInfo(item.equipmentId)
  windSort.value = item.equipmentName
  windSortId.value = item.equipmentId
@@ -112,8 +124,6 @@ const changeDate = (index) => {
  }
 }
 const timeSelect = (index) => {
-  dayValue.value = ''
-  monthValue.value = ''
  getWindInfo(windSortId.value, changeDate(index))
 };
 const getScreenInfo = (now) => {
@@ -262,7 +272,7 @@ const initChart = (type, values) => {
    color: #38cafb;
    line-height: 42px;
    margin-left: 50px;
-    margin-bottom: 38px;
+    margin-bottom: 6px;
  }
 }
 </style>
--- a/src/views/device-manage/index.vue
+++ b/src/views/device-manage/index.vue
@@ -52,7 +52,7 @@
              <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>
+                            @change="changeFanData(scope.row)"></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="phaseCurrentAOffset" label="A电流偏移量" align="center"/>
--- a/src/views/edit/edit.vue
+++ b/src/views/edit/edit.vue
@@ -25,9 +25,36 @@
        <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-input type="number" v-model="form.constructionLength" placeholder="请输入施工长度"/>
+        </el-form-item>
+        <el-form-item label="基准频率" prop="referenceFrequency">
+          <el-input type="number" v-model="form.referenceFrequency" placeholder="请输入基准频率"/>
+        </el-form-item>
+        <div style="display: flex">
+          <el-form-item label="升频时间(分钟)" prop="upTime" label-width="280px">
+            <el-input-number v-model="form.upTime" :min="0" :max="60"/>
+          </el-form-item>
+          <el-form-item label="升频率" prop="upFrequency">
+            <el-input type="number" v-model="form.upFrequency" placeholder="请输入升频率">
+              <template #suffix>
+                <span>Hz</span>
+              </template>
+            </el-input>
+          </el-form-item>
+        </div>
+        <div style="display: flex">
+          <el-form-item label="降频时间(分钟)" prop="dropTime" label-width="280px">
+            <el-input-number v-model="form.dropTime" :min="0" :max="60"/>
+          </el-form-item>
+          <el-form-item label="降频率" prop="dropFrequency">
+            <el-input type="number" v-model="form.dropFrequency" placeholder="请输入降频率">
+              <template #suffix>
+                <span>Hz</span>
+              </template>
+            </el-input>
+          </el-form-item>
+        </div>
        <el-form-item label="是否默认">
          <el-radio-group v-model="form.isDefault">
            <el-radio :label="true">是</el-radio>
@@ -56,22 +83,23 @@ 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 constructionLength = ref(0)
 const modelEquipmentList = ref(null)
 const form = ref({
  tunnelName: "",
  serialNumber: "",
  totalLength: "",
+  referenceFrequency: '',
+  upTime: '',
+  upFrequency: '',
+  dropTime: '',
+  dropFrequency: '',
  isDefault: false,
  remarks: "",
 });
-const getTunnel = (type) => {
+const getTunnel = () => {
  getTunnelDetail(tunnelId).then((res) => {
    if (res?.code === 1000) {
      form.value = res.data;
-      if (type == 1) {
-        constructionLength.value = res.data.constructionLength
-      }
    }
  });
 };
@@ -89,41 +117,48 @@ const handleGoTunnelMgr = () => {
 };
 const getTunnelInfo = () => {
  initSceneData(tunnelId).then((res) => {
-    constructionLength.value = res.data.constructionLength
    modelEquipmentList.value = JSON.parse(res.data.tunnelThreeConfig)
-    if(constructionLength.value===null){
-      constructionLength.value=0
-    }
-    if(modelEquipmentList.value===null){
-      modelEquipmentList.value=[]
+    if (modelEquipmentList.value === null) {
+      modelEquipmentList.value = []
    }
    const data = {
      tunnelId: tunnelId,
-      tunnelName: form.value.tunnelName,
-      tunnelAlias: form.value.tunnelAlias,
-      serialNumber: form.value.serialNumber,
-      remarks: form.value.remarks,
-      constructionLength: constructionLength.value,
-      // constructionLength: form.value.constructionLength,
+      ...form.value,
      tunnelLength: form.value.totalLength,
-      isDefault: form.value.isDefault,
      modelEquipmentList: modelEquipmentList.value,
    };
-     editTunnel(data).then((res) => {
-       if (res?.code === 1000) {
-         ElMessage.success(res.msg);
-         router.push("/tunnel/" + form.value.siteId + "/" + type + "/" + userId);
-       } else {
-         ElMessage.error(res.msg);
-       }
-     });
+    editTunnel(data).then((res) => {
+      if (res?.code === 1000) {
+        ElMessage.success(res.msg);
+        router.push("/tunnel/" + form.value.siteId + "/" + type + "/" + userId);
+      } else {
+        ElMessage.error(res.msg);
+      }
+    });
  })
 }
-const handleSave =  () => {
+const handleSave = () => {
  getTunnelInfo()
 };
 </script>
 <style lang="scss" scoped>
+:deep(.el-form-item__content) {
+  .el-input-number {
+    width: 237px;
+
+    .el-input-number__decrease, .el-input-number__increase {
+      background-color: #08B7B8;
+      width: 50px;
+
+      .el-icon {
+        font-size: 40px;
+        color: #FFFFFF;
+        font-weight: bold;
+      }
+    }
+  }
+}
+
 #main {
  position: relative;
  height: 100%;
@@ -197,7 +232,7 @@ const handleSave =  () => {
    position: absolute;
    top: 250px;
    left: 80px;
-    width: 830px;
+    width: 1000px;
    //height: 500px;
    background-image: url(@/assets/images/transducer/bg.png);
    padding: 20px 30px;
@@ -258,6 +293,12 @@ const handleSave =  () => {
          color: #fff;
          font-size: 38px;
        }
+        .el-input__suffix-inner {
+          font-size: 30px;
+          color: #08B7B8;
+          line-height: 40px;
+          font-weight: bold;
+        }
      }
    }
  }
--- a/src/views/site/index.vue
+++ b/src/views/site/index.vue
@@ -1,7 +1,7 @@
 <template>
  <div class="site-bgc">
    <div class="box-top">
-      <div class="back-tunnel"  @click="handleGoHome">
+      <div class="back-tunnel" @click="handleGoHome">
        <div class="back-icon"></div>
        <span>返回</span>
      </div>
@@ -42,15 +42,23 @@
                <div class="add-icon"></div>
              </div>
            </div>
-            <div class="more" @click="goToAddTunnel(item.siteId)"  v-if="item.info.tunnelName">
+            <div class="more" @click="goToAddTunnel(item.siteId)" v-if="item.info.tunnelName">
              更多
              <div class="icon"></div>
            </div>
          </div>
        </div>
-        <div class="edit-btn" @click="handleEdit(item)">
-          <div class="edit-icon"></div>
-          <div>站点编辑</div>
+        <div class="edit-btn">
+          <div @click="handleEdit(item)">
+            <div class="edit-icon"></div>
+            <div>站点编辑</div>
+          </div>
+          <div v-if="item.totalTunnel!==0" @click="handleUpload(item.siteId)">
+            <el-icon style="margin-left: 20px">
+              <UploadFilled/>
+            </el-icon>
+            <div>上传图纸</div>
+          </div>
        </div>
      </div>
      <div class="site-box add-box" v-if="showAddIcon" @click="handleAdd">
@@ -80,10 +88,9 @@
                    placeholder="请输入站点信息"/>
        </el-form-item>
      </el-form>
-
      <template #footer>
        <div class="btns">
-          <div class="cancel-btn" @click="isVisited=false">
+          <div class="cancel-btn" @click="isVisited=false;">
            取消
          </div>
          <div class="sure-btn" @click="handleSubmit(formInstance)">
@@ -92,11 +99,42 @@
        </div>
      </template>
    </el-dialog>
+
+    <el-dialog :close-on-click-modal="false" v-model="isUploadVisited" width="1558px">
+      <div @click="isUploadVisited=false" style="position: absolute;right: 20px;top:10px;cursor: pointer">
+        <el-icon size="80" color="#fff">
+          <Close/>
+        </el-icon>
+      </div>
+      <el-upload
+          style="margin-top:40px"
+          drag
+          limit="1"
+          :action="uploadFileUrl"
+          :auto-upload="true"
+          :headers="headers"
+          :data="uploadData"
+          :on-success="handleUploadSuccess"
+          :before-upload="beforeUpload"
+      >
+        <el-icon>
+          <upload-filled/>
+        </el-icon>
+        <div class="el-upload__text">
+          拖拽一张图纸到这里 或者 <em>点击上传</em>
+        </div>
+        <template #tip>
+          <div class="el-upload__tip">
+            文件限制大小为 16MB
+          </div>
+        </template>
+      </el-upload>
+    </el-dialog>
    <div class="pagination">
      <span @click="firstPage" v-if="showFirst">首页</span>
      <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"/>
+                     @current-change="handleCurrentChange" :hide-on-single-page="true"/>
      <span @click="lastPage" v-if="showFirst">尾页</span>
    </div>
  </div>
@@ -106,6 +144,7 @@
 import {editSite, getSiteDetail, getSiteList, addSite, deleteSite} from "@/api/site";
 import {ElMessage, ElMessageBox} from "element-plus";
 import TunnelTitle from "@/components/tunnelTitle/index.vue";
+import {getToken} from '@/utils/auth'

 const router = useRouter()
 const userId = reactive(router.currentRoute.value.params.userId)
@@ -113,6 +152,13 @@ const siteId = reactive(router.currentRoute.value.params.siteId)
 const siteList = ref([])
 const siteIds = ref([])
 const siteNameList = ref([])
+const clickSiteId = ref('')
+const uploadData = ref()
+const baseURL = import.meta.env.VITE_BASE_URL
+const uploadFileUrl = ref(baseURL + '/tunnel/site/upload');
+const headers = reactive({
+  authorization: getToken()
+})
 const info = ref({
  tunnelName: '',
  constructionLength: 0,
@@ -120,6 +166,7 @@ const info = ref({
 })
 const title = ref('新增站点')
 const isVisited = ref(false);
+const isUploadVisited = ref(false);
 const showFirst = ref(true)
 const total = ref(10);
 const showAddIcon = ref(true)
@@ -134,29 +181,42 @@ const form = ref({
  isDefault: false
 });
 const formRules = ref({
-  siteName: [{required: true, message: '请输入站点名称', trigger:['blur','change']}]
+  siteName: [{required: true, message: '请输入站点名称', trigger: ['blur', 'change']}]
 })
 const formInstance = ref()
+const beforeUpload = () => {
+  uploadData.value = {
+    siteId: clickSiteId.value
+  }
+}
+const handleUploadSuccess = (res) => {
+  if (res.code !== 1000) {
+    ElMessage.error("上传失败");
+  } else {
+    ElMessage.success("上传成功");
+  }
+};
+
 const handleGoHome = () => {
  router.push('/' + 'siteToHome/' + siteId)
 }
 const getList = () => {
  getSiteList({
-    userId:userId,
+    userId: userId,
    ...pageInfo
  }).then((res) => {
    total.value = res.data.total;
-    if(total.value==0){
+    if (total.value == 0) {

-    }else {
-      showAddIcon.value = total.value % 6!==0;
+    } else {
+      showAddIcon.value = total.value % 6 !== 0;
    }
    showFirst.value = total.value / pageInfo.pageSize > 1;
    res.data.rows.map(item => {
      if (item.tunnelList === null || item.tunnelList.length === 0) {
        item.info = info.value
-      }else{
-        item.info=item.tunnelList[0]
+      } else {
+        item.info = item.tunnelList[0]
      }
      item.checked = false
    })
@@ -184,7 +244,7 @@ const handleClickSite = (type) => {
 }

 const goToAddTunnel = (siteId) => {
-  router.push('/tunnel/' + siteId+'/bySite'+'/'+userId)
+  router.push('/tunnel/' + siteId + '/bySite' + '/' + userId)
 }

 //重置from表单
@@ -205,7 +265,10 @@ const handleEdit = (item) => {
    isVisited.value = true
  });
 }
-
+const handleUpload = (siteId) => {
+  isUploadVisited.value = true
+  clickSiteId.value = siteId
+}
 const handleAdd = () => {
  restFrom()
  title.value = '新增站点'
@@ -217,33 +280,33 @@ const handleSubmit = (instance) => {
    if (!valid) return
    if (title.value === '编辑站点') {
      editSite(form.value).then((res) => {
-        if(res.code===1000){
+        if (res.code === 1000) {
          isVisited.value = false
          getList()
          ElMessage.success(res.msg)
-        }else {
+        } else {
          ElMessage.warning(res.msg)
        }
      });
    } else {
      addSite(form.value).then((res) => {
-        if(res.code===1000){
+        if (res.code === 1000) {
          isVisited.value = false
          getList()
          ElMessage.success(res.msg)
-        }else {
+        } else {
          ElMessage.warning(res.msg)
        }
      });
    }
  })
 }
-const handleChooseAll=()=>{
-  siteList.value.map(item=>{
-    item.checked=!item.checked
-    if(item.checked&&!item.isDefault){
+const handleChooseAll = () => {
+  siteList.value.map(item => {
+    item.checked = !item.checked
+    if (item.checked && !item.isDefault) {
      siteIds.value.push(item.siteId)
-    }else if(!item.checked&&!item.isDefault){
+    } else if (!item.checked && !item.isDefault) {
      siteIds.value.map((newItem, index) => {
        if (newItem === item.siteId) {
          siteIds.value.splice(index, 1)
@@ -256,20 +319,20 @@ const handleMoreDelete = () => {
  if (siteIds.value.length === 0) {
    ElMessage.warning('请先选择站点进行删除')
  } else {
-    let flag=false
-    siteList.value.map(item=>{
-      siteIds.value.map(siteItem=>{
-        if(item.siteId===siteItem){
-          if(item.tunnelList.length!==0){
+    let flag = false
+    siteList.value.map(item => {
+      siteIds.value.map(siteItem => {
+        if (item.siteId === siteItem) {
+          if (item.tunnelList.length !== 0) {
            ElMessage.error('该站点下存在隧道，不能删除!')
-            flag=false
-          }else {
-            flag=true
+            flag = false
+          } else {
+            flag = true
          }
        }
      })
    })
-    if(flag){
+    if (flag) {
      ElMessageBox.confirm(`是否确定删除该站点`, '系统提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
@@ -290,12 +353,12 @@ const handleMoreDelete = () => {
    }
  }
 }
-const firstPage=()=>{
+const firstPage = () => {
  pageInfo.pageNum = 1
  getList()
 }
-const lastPage=()=>{
-  pageInfo.pageNum = total.value/pageInfo.pageSize
+const lastPage = () => {
+  pageInfo.pageNum = total.value / pageInfo.pageSize
  getList()
 }
 //点击页码进行分页功能
@@ -306,9 +369,62 @@ const handleCurrentChange = (val) => {
 </script>

 <style scoped lang="scss">
-:deep(.el-form-item__error){
+:deep(.el-upload__tip) {
+  font-size: 40px;
+  color: #FFFFFF;
+}
+
+:deep(.el-upload-dragger) {
+  background-color: transparent;
+  box-shadow: none;
+  border: 1px solid #05FEFF;
+
+  &:hover {
+    border: 1px solid #05FEFF;
+  }
+
+  .el-icon {
+    font-size: 250px;
+    color: #FFFFFF;
+  }
+
+  .el-upload__text {
+    font-size: 50px;
+    color: #FFFFFF;
+
+    em {
+      color: #05FEFF;
+    }
+  }
+}
+
+:deep(.el-upload-list) {
+  .el-upload-list__item {
+    &:hover {
+      background-color: transparent;
+    }
+
+    .el-icon {
+      font-size: 61px;
+      color: #FFFFFF;
+    }
+
+    .el-icon--close-tip {
+      display: none;
+    }
+  }
+
+  .el-upload-list__item-name {
+    font-size: 61px !important;
+    color: #FFFFFF;
+
+  }
+}
+
+:deep(.el-form-item__error) {
  font-size: 35px;
 }
+
 :deep(.el-radio-group) {
  margin-top: 10px;
 }
@@ -340,6 +456,7 @@ const handleCurrentChange = (val) => {
  height: 18px;
  background: #05FEFF;
 }
+
 .clickColor {
  position: absolute;
  top: 7px;
@@ -521,10 +638,10 @@ const handleCurrentChange = (val) => {


        > span:last-child {
-          padding:1px 8px;
+          padding: 1px 8px;
          font-size: 32px;
          border: 2px solid #05FEFF;
-          border-radius:10px;
+          border-radius: 10px;
          position: relative;
        }
      }
@@ -630,7 +747,6 @@ const handleCurrentChange = (val) => {
      }

      .edit-btn {
-        cursor: pointer;
        margin-top: 117px;
        display: flex;
        align-items: center;
@@ -638,11 +754,23 @@ const handleCurrentChange = (val) => {
        color: #60DDDE;
        margin-left: 492px;

-        .edit-icon {
-          width: 42px;
-          height: 44px;
-          background-image: url('@/assets/images/site/zdgl_icon_bj.png');
-          margin-right: 16px;
+        > div:first-child {
+          display: flex;
+          align-items: center;
+          cursor: pointer;
+
+          .edit-icon {
+            width: 42px;
+            height: 44px;
+            background-image: url('@/assets/images/site/zdgl_icon_bj.png');
+            margin-right: 16px;
+          }
+        }
+
+        > div:last-child {
+          cursor: pointer;
+          display: flex;
+          align-items: center;
        }
      }
    }
@@ -658,6 +786,21 @@ const handleCurrentChange = (val) => {
    color: #60DDDE;
    font-size: 38px;
    font-weight: bold;
+    :deep(.el-pagination.is-background ) {
+      .btn-next,.btn-prev {
+        background-color: transparent;
+      }
+
+      .el-pager {
+        li {
+          margin: 0 0 0 40px;
+        }
+
+        li.is-active {
+          background-color: #60DDDE;
+        }
+      }
+    }

    > span:first-child {
      cursor: pointer;
--- a/src/views/tunnel-manage/index.vue
+++ b/src/views/tunnel-manage/index.vue
@@ -8,6 +8,16 @@
      <div class="site-name">
        {{ siteName }}
      </div>
+      <div class="model-change">
+        <div class="model" @click="clickModel=1">
+          <div class="card-bg"></div>
+          <span>卡片模式</span>
+        </div>
+        <div class="model" @click="clickModel=2">
+          <div class="img-bg"></div>
+          <span>图纸导航</span>
+        </div>
+      </div>
      <tunnel-title/>
      <div class="all-del-btn" v-if="showOperation">
        <div class="all-btn" style=" margin-right: 40px;" v-if="!showAddIcon" @click="handleAdd">
@@ -21,7 +31,7 @@
        </div>
      </div>
    </div>
-    <div class="box-content">
+    <div class="box-content" v-if="clickModel===1">
      <div class="site-box" v-for="item in tunnelList" :key="item.tunnelId">
        <div class="top">
          <span>{{ item.tunnelName }}</span>
@@ -62,6 +72,17 @@
        <div style="cursor: pointer">添加隧道</div>
      </div>
    </div>
+    <div v-else>
+      <div class="img-box">
+        <!--        @/assets/images/tunnel/img.png-->
+        <img :src="'data:image/png;base64,'+siteImage" style="width:3500px;height:1789px" id="imgModel" usemap="#image"
+             alt="" @click="clickHandler">
+        <map name="image" id="image">
+          <area shape="poly" v-for="(item,index) in coordsList" :coords="item.coords" :key="index" alt=""
+                :title="item.tunnelId+'隧道'" :href="'/' + item.tunnelId + '/' + siteId" @click="clickHot(item.tunnelId)">
+        </map>
+      </div>
+    </div>
    <el-dialog :close-on-click-modal="false" v-model="isVisited" width="1958px">
      <div class="siteId">
        <span>{{ title }}</span>
@@ -79,9 +100,36 @@
        <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="施工长度" prop="constructionLength">
+          <el-input type="number" v-model="form.constructionLength" placeholder="请输入施工长度"/>
+        </el-form-item>
+        <el-form-item label="基准频率" prop="referenceFrequency">
+          <el-input type="number" v-model="form.referenceFrequency" placeholder="请输入基准频率"/>
+        </el-form-item>
+        <div style="display: flex">
+          <el-form-item label="升频时间(分钟)" prop="upTime" label-width="300px">
+            <el-input-number v-model="form.upTime" :min="0" :max="60"/>
+          </el-form-item>
+          <el-form-item label="升频率" prop="upFrequency">
+            <el-input type="number" v-model="form.upFrequency" placeholder="请输入升频率">
+              <template #suffix>
+                <span>Hz</span>
+              </template>
+            </el-input>
+          </el-form-item>
+        </div>
+        <div style="display: flex">
+          <el-form-item label="降频时间(分钟)" prop="dropTime" label-width="300px">
+            <el-input-number v-model="form.dropTime" :min="0" :max="60"/>
+          </el-form-item>
+          <el-form-item label="降频率" prop="dropFrequency">
+            <el-input type="number" v-model="form.dropFrequency" placeholder="请输入降频率">
+              <template #suffix>
+                <span>Hz</span>
+              </template>
+            </el-input>
+          </el-form-item>
+        </div>
        <el-form-item label="是否默认">
          <el-radio-group v-model="form.isDefault">
            <el-radio :label="true">是</el-radio>
@@ -114,7 +162,7 @@
 <script setup>
 import {ElMessage, ElMessageBox} from "element-plus";
 import {getTunnelList, addTunnel, deleteTunnel} from "@/api/tunnelManage";
-import {getSiteDetail} from "@/api/site";
+import {getSiteDrawing, getSiteDetail} from "@/api/site";
 import TunnelTitle from "@/components/tunnelTitle/index.vue";
 import {getTunnelBySiteId} from "@/api/largeScreen";

@@ -123,6 +171,7 @@ const validateNumber = (rule, value) => {
  return reg.test(value);
 }
 const router = useRouter()
+const siteImage = ref()
 const showAddIcon = ref(true)
 const params = router.currentRoute.value.params;
 const siteId = reactive(params.siteId)
@@ -136,12 +185,30 @@ const formRules = ref({
    {validator: validateNumber, message: '请输入英文、数字、英文数字组合的用户名', trigger: ['blur', 'change']}
  ],
  totalLength: [{required: true, message: '请输入隧道长度', trigger: ['blur', 'change']}],
-  constructionLength: [{required: true, message: '请输入施工长度', trigger: ['blur', 'change']}]
+  constructionLength: [{required: true, message: '请输入施工长度', trigger: ['blur', 'change']}],
+  referenceFrequency: [{required: true, message: '请输入基准频率', trigger: ['blur', 'change']}],
+  upTime: [{required: true, message: '请选择升频时间', trigger: ['blur', 'change']}],
+  upFrequency: [{required: true, message: '请输入升频率', trigger: ['blur', 'change']}],
+  dropTime: [{required: true, message: '请选择降频时间', trigger: ['blur', 'change']}],
+  dropFrequency: [{required: true, message: '请输入降频率', trigger: ['blur', 'change']}]
 })
+let clickModel = ref(1)
 const showFirst = ref(true)
 const showOperation = ref(true)
 const formInstance = ref()
 const tunnelList = ref([])
+const coordsList = ref([
+  {
+    tunnelId: 1,
+    coords: '767,1117,793,1182,2379,682,2437,454,2349,505,2298,666,2221,531,2153,578,2212,692,765,1126',
+  }, {
+    tunnelId: 1,
+    coords: '863,1475,1135,1494,2321,1078,3023,801,3214,703,3288,752,2300,1154,1560,1438,1170,1554,844,1529',
+  }, {
+    tunnelId: 94,
+    coords: '1181,1364,2105,622,2005,589,1116,1324'
+  }
+])
 const iconsList = ref([
  {
    icon: 'sd_icon_fj.png',
@@ -202,6 +269,11 @@ const form = ref({
  tunnelAlias: '',
  serialNumber: '',
  totalLength: '',
+  referenceFrequency: '',
+  upTime: '',
+  upFrequency: '',
+  dropTime: '',
+  dropFrequency: '',
  remarks: '',
  isDefault: false
 });
@@ -214,7 +286,26 @@ const total = ref(10);
 onMounted(() => {
  showOperation.value = localStorage.getItem('roleKey') !== 'tunnel_admin';
 })
-
+const getSiteImg = () => {
+  getSiteDrawing(siteId).then((res) => {
+    if (res.code === 1000) {
+      siteImage.value = res.data.drawingData
+    }
+  });
+}
+getSiteImg()
+const clickHot = (id) => {
+  console.log('点击热区===============')
+  router.push('/' + id + '/' + siteId)
+}
+// const testArr=[]
+const clickHandler = (id) => {
+  // let obj=e.offsetX+','+e.offsetY
+  // testArr.push(obj)
+  // console.log('正确数值',testArr.map(item=>item).join())
+  // console.log('点击',e.offsetX+','+e.offsetY+',')
+  // console.log('图纸', document.getElementById('imgModel').getBoundingClientRect().x,document.getElementById('imgModel').getBoundingClientRect().y)
+}
 const handleGoSiteOrIndex = () => {
  if (type === 'bySite') {
    router.push('/site/' + userId + '/' + localStorage.getItem('currentSiteId'))
@@ -261,6 +352,7 @@ const handleCurrentChange = (val) => {
  getList()
 }
 const handleSubmit = (instance) => {
+  console.log('form.value', form.value)
  if (!instance) return
  instance.validate(async (valid) => {
    if (!valid) return
@@ -329,6 +421,11 @@ const restFrom = () => {
    tunnelAlias: '',
    serialNumber: '',
    totalLength: '',
+    referenceFrequency: '',
+    upTime: '',
+    upFrequency: '',
+    dropTime: '',
+    dropFrequency: '',
    remarks: '',
    isDefault: false
  }
@@ -337,6 +434,10 @@ const handleAdd = () => {
  restFrom()
  title.value = '新增隧道'
  isVisited.value = true
+  nextTick(() => {
+    // 清空校验
+    formInstance.value.clearValidate()
+  })
 }
 const getImageUrl = (name) => {
  return new URL(`../../assets/images/tunnel/${name}`, import.meta.url).href
@@ -389,6 +490,23 @@ const handleMoreDelete = () => {
  font-size: 35px;
 }

+:deep(.el-form-item__content) {
+  .el-input-number {
+    width: 237px;
+
+    .el-input-number__decrease, .el-input-number__increase {
+      background-color: #08B7B8;
+      width: 50px;
+
+      .el-icon {
+        font-size: 40px;
+        color: #FFFFFF;
+        font-weight: bold;
+      }
+    }
+  }
+}
+
 .site-name {
  position: absolute;
  left: 250px;
@@ -401,6 +519,44 @@ const handleMoreDelete = () => {
  line-height: 61px;
 }

+.model-change {
+  z-index: 55;
+  position: absolute;
+  left: 700px;
+  font-size: 46px;
+  color: #05FEFF;
+  display: flex;
+  //flex-direction: column;
+  .model {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+
+    &:last-child {
+      margin-left: 30px
+    }
+
+    > span:hover {
+      text-decoration: underline;
+    }
+  }
+
+
+  .card-bg {
+    width: 42px;
+    height: 44px;
+    background-image: url('@/assets/images/tunnel/sd_icon_tzdh.png');
+    margin-right: 16px;
+  }
+
+  .img-bg {
+    width: 42px;
+    height: 44px;
+    background-image: url('@/assets/images/tunnel/sd_icon_dtdh.png');
+    margin-right: 16px;
+  }
+}
+
 :deep(.el-radio-group) {
  margin-top: 10px;
 }
@@ -439,7 +595,7 @@ const handleMoreDelete = () => {
  border-radius: 20px;
  padding: 30px 40px;
  box-sizing: border-box;
-  margin: 458px auto 0 auto;
+  //margin: 458px auto 0 auto;

  .el-dialog__header {
    padding: 0;
@@ -471,6 +627,12 @@ const handleMoreDelete = () => {
      color: #fff;
      font-size: 38px;
    }
+    .el-input__suffix-inner {
+      font-size: 30px;
+      color: #08B7B8;
+      line-height: 40px;
+      font-weight: bold;
+    }
  }
 }

@@ -544,6 +706,10 @@ const handleMoreDelete = () => {
    }
  }

+  .img-box {
+    margin: 100px;
+  }
+
  .box-content {
    height: 1850px;
    display: flex;
@@ -723,6 +889,21 @@ const handleMoreDelete = () => {
    color: #60DDDE;
    font-size: 38px;
    font-weight: bold;
+    :deep(.el-pagination.is-background ) {
+      .btn-next,.btn-prev {
+        background-color: transparent;
+      }
+
+      .el-pager {
+        li {
+          margin: 0 0 0 40px;
+        }
+
+        li.is-active {
+          background-color: #60DDDE;
+        }
+      }
+    }

    > span:first-child {
      margin-right: 60px;
--- a/src/views/tunnel/index.vue
+++ b/src/views/tunnel/index.vue
@@ -10,7 +10,7 @@
      <div class="top-right">
        <div class="current-site">
          当前站点：<span>{{ currentSite }}</span>
-          <el-dropdown trigger="click" @command="handleChangeSite">
+          <el-dropdown trigger="click" @command="handleChangeSite" popper-class="dropdown-style">
            <div class="toggle"></div>
            <template #dropdown>
              <el-dropdown-menu>
@@ -21,6 +21,10 @@
              </el-dropdown-menu>
            </template>
          </el-dropdown>
+          <el-icon size="50" color="#0BE9FA" style="margin-left: 50px;cursor: pointer"
+                   @click="isVisited=true;getAlarmList()">
+            <Bell/>
+          </el-icon>
        </div>
        <div class="current-user">
          你好！<span>{{ currentUser }}</span>
@@ -32,7 +36,7 @@
    <!-- <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>
+                   :largeScreen="largeScreen"></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">
@@ -68,6 +72,78 @@
      <div class="arrow right" @click="nextBtn"></div>
    </div>
  </div>
+  <div class="alarm-dialog digital-tunnel">
+    <el-dialog :close-on-click-modal="false" v-model="isDetailVisited" title="报警信息详情"
+               width="1500px">
+      <div class="detail">
+        <div>报警时间：</div>
+        {{ alarmDetail.alarmTime }}
+      </div>
+      <div class="detail">
+        <div>报警内容：</div>
+        {{ alarmDetail.alarmContent }}
+      </div>
+    </el-dialog>
+  </div>
+  <div class="digital-tunnel">
+    <el-dialog :close-on-click-modal="false" v-model="isVisited" title="报警信息"
+               width="2175px"
+               :modal="false">
+      <div class="left-top-icon"></div>
+      <div class="right-top-icon"></div>
+      <el-form :model="queryParams" inline class="query-form" ref="queryForm" @submit.prevent="getAlarmList"
+               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"/>
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="getAlarmList">搜索</el-button>
+          <el-button @click="handleReset">重置</el-button>
+        </el-form-item>
+      </el-form>
+      <div class="device-table">
+        <el-table stripe v-loading="loading" :empty-text="tableEmptyText"
+                  style="background-color: #011c29;--el-table-border-color: none;"
+                  :header-cell-style="{backgroundColor: '#064B66',color: '#fff',fontSize: '40px',borderBottom: 'none' }"
+                  :data="alarmList">
+          <!--          <el-table-column prop="equipmentId" label="设备名称" align="center" width="400px">-->
+          <!--            <template #default="scope">-->
+          <!--              {{ changeName(scope.row.equipmentId) }}-->
+          <!--            </template>-->
+          <!--          </el-table-column>-->
+          <el-table-column prop="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'">
+            <template #default="scope">
+              <el-tag :type="scope.row.lookupStatus?'success':'warning'">{{ scope.row.lookupStatus ? '已读' : '未读' }}
+              </el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" align="center" width="300px">
+            <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>
+            </template>
+          </el-table-column>
+        </el-table>
+        <div class="pagination" :style="{bottom: roleKey==='administrator'?'50px':''}">
+          <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"/>
+        </div>
+      </div>
+      <div class="left-bottom-icon"></div>
+      <div class="right-bottom-icon"></div>
+    </el-dialog>
+  </div>
 </template>

 <script setup>
@@ -82,7 +158,15 @@ 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 {
+  getLargeScreen,
+  getLargeScreenInfo,
+  getTunnelBySiteId,
+  getAlarmInfo,
+  deleteAlarmSate,
+  getAlarmDetail,
+  updateAlarmState
+} from "@/api/largeScreen";
 import {ElMessage, ElMessageBox} from "element-plus";
 import {getUserInfo} from "@/api/login";
 import {initSceneData} from "@/api/tunnelScene";
@@ -94,9 +178,13 @@ 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 isVisited = ref(false);
+const isDetailVisited = ref(false);
 const showFan = ref(false);
 const drawerLeft = ref(true);
 const showTunnelTitle = ref(true);
+const loading = ref(false);
+const tableEmptyText = ref("加载中~");
 const initialIndex = ref(0)
 const showFanLoading = ref(0)
 const showWindLoading = ref(0)
@@ -106,6 +194,8 @@ const showMenu = ref(false);
 const currentSiteId = ref(0);
 const currentSite = ref("");
 const siteList = ref([])
+const alarmList = ref([])
+const alarmDetail = ref([])
 const totalTunnelList = ref([])
 const currentUser = ref("");
 const currentUserId = ref(0);
@@ -118,9 +208,8 @@ 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 equipmentOption = ref([])
 const btnList = ref([
  {
    route: '/site',
@@ -148,10 +237,17 @@ const btnList = ref([
  // },
 ])
 const serialNumber = ref("");
+const roleKey = ref("");
 let token = getToken();
 let send = {
  type: "ping",
 };
+const pageInfo = reactive({
+  pageNum: 1,
+  pageSize: 10
+});
+const queryForm = ref()
+const total = ref(10);
 const largeScreenData = ref(null);
 const socketData = reactive({
  leftData: [],
@@ -159,7 +255,10 @@ const socketData = reactive({
  sensor: [],
 });
 let tunnelLen = computed(() => tunnelLength);
-
+const queryParams = reactive({
+  equipmentId: '',
+  lookupStatus: ''
+})
 onMounted(() => {
  getList()
  getUser()
@@ -167,13 +266,91 @@ onMounted(() => {
  nextTick(() => {
    showFan.value = true;
  });
-});

+});
+const changeName = (id) => {
+  for (let item of equipmentOption.value) {
+    if (item.value === id) {
+      return item.label;
+    }
+  }
+  return "";
+}
+const handleReset = () => {
+  queryForm.value.resetFields()
+  getAlarmList()
+}
+//点击页码进行分页功能
+const handleCurrentChange = (val) => {
+  pageInfo.pageNum = val
+  getAlarmList()
+}
+const handleDelete = (row) => {
+  ElMessageBox.confirm(`确认删除该报警信息吗？`, '系统提示', {
+    type: 'warning',
+    closeOnClickModal: false
+  }).then(() => {
+    deleteAlarmSate(row.alarmId).then(res => {
+      if (res.code === 1000) {
+        ElMessage.success('删除成功')
+        getAlarmList()
+      }
+    })
+  })
+}
+//查看报警信息详情
+const handleView = (row) => {
+  getAlarmDetail(row.alarmId).then(res => {
+    if (res.code === 1000) {
+      isDetailVisited.value = true
+      alarmDetail.value = res.data
+      if (roleKey.value !== 'administrator') {
+        if (!row.lookupStatus) {
+          handleChangeState(row)
+        }
+      }
+    }
+  })
+}
+const handleChangeState = (row) => {
+  updateAlarmState([{
+    alarmId: row.alarmId,
+    lookupStatus: true,
+    userId: currentUserId.value,
+  }]).then(res => {
+    if (res.code === 1000) {
+      // ElMessage.success(res.msg);
+      getAlarmList()
+    } else {
+      // ElMessage.error(res.msg);
+    }
+  });
+}
+const getAlarmList = () => {
+  loading.value = true
+  getAlarmInfo({
+    tunnelId: tunnelId.value,
+    lookupStatus: queryParams.lookupStatus,
+    ...pageInfo
+  }).then(res => {
+    if (res.code === 1000) {
+      loading.value = false
+      if(res.data.rows.length===0){
+        tableEmptyText.value='暂无数据~'
+      }else {
+        tableEmptyText.value=''
+      }
+      alarmList.value = res.data.rows
+      total.value = res.data.total
+    }
+  })
+}
 const getUser = () => {
  getUserInfo().then(res => {
    currentUser.value = res.data.user.userName
    currentUserId.value = res.data.user.userId
-    localStorage.setItem('roleKey', res.data.user.roles[0].roleKey)
+    roleKey.value = res.data.roles[0]
+    localStorage.setItem('roleKey', res.data.roles[0])
    localStorage.setItem('userId', currentUserId.value)
  })
 }
@@ -203,7 +380,6 @@ const getOtherInfo = () => {
        nextTick(() => {
          showTunnelTitle.value = true
        });
-        console.log('siteId',siteId)
        getTunnel(siteId)
      } else {
        getTunnel(res.data.siteOption[0].value)
@@ -218,19 +394,42 @@ const getOtherInfo = () => {
 const getScreenInfo = (id) => {
  if (id) {
    tunnelId.value = id
+    equipmentOption.value = []
    getLargeScreen(id).then((res) => {
      if (res?.code === 1000) {
+        let option = {}
        if (res.data.frequencyChangerList.length !== 0) {
+          res.data.frequencyChangerList.forEach((item) => {
+            option = {
+              value: item.equipmentId,
+              label: item.equipmentName,
+            }
+            equipmentOption.value.push(option)
+          })
          showFanLoading.value = 0
        } else {
          showFanLoading.value = 1
        }
        if (res.data.windPressureSensorList.length !== 0) {
+          res.data.windPressureSensorList.forEach((item) => {
+            option = {
+              value: item.equipmentId,
+              label: item.equipmentName,
+            }
+            equipmentOption.value.push(option)
+          })
          showWindLoading.value = 0
        } else {
          showWindLoading.value = 1
        }
        if (res.data.sensorList.length !== 0) {
+          res.data.sensorList.forEach((item) => {
+            option = {
+              value: item.equipmentId,
+              label: item.equipmentName,
+            }
+            equipmentOption.value.push(option)
+          })
          res.data.sensorList.forEach((item) => {
            if (
                item.equipmentType === "carbonDioxide" ||
@@ -249,6 +448,7 @@ const getScreenInfo = (id) => {
          showBadLoading.value = 1
        }
        largeScreenData.value = res.data;
+        // console.log(largeScreenData.value);
      } else {
        ElMessage.warning(res.msg)
      }
@@ -261,6 +461,7 @@ const getScreenInfo = (id) => {
    })
  }
 };
+//这里可以获取隧道简称
 const getList = () => {
  getTunnelList({
    siteId: siteId
@@ -276,6 +477,8 @@ const getList = () => {
  })
 }
 //根据站点id获取隧道信息option
+
+let largeScreen = computed(() => largeScreenData)
 const getTunnel = (id) => {
  getTunnelBySiteId(id).then((res) => {
    if (res?.code === 1000) {
@@ -289,9 +492,8 @@ const getTunnel = (id) => {
      } else {
        if (!pattern.test(previewId)) {
          getScreenInfo(previewId)
-        }else {
+        } else {
          getScreenInfo(res.data[0]?.value)
-          tunnelName = res.data[0].label
        }
        tunnelList.value = res.data
        tunnelList.value.forEach((item, index) => {
@@ -313,6 +515,7 @@ const changeTunnel = (e) => {
  showBadLoading.value = 0
  showWindLoading.value = 0
  showFanLoading.value = 0
+  pageInfo.pageNum = 1
  getScreenInfo(newObj.value)
  nextTick(() => {
    showFan.value = true;
@@ -415,13 +618,14 @@ const initWebSocket = () => {
  }, 30000);
 };
 </script>
+
 <style lang="scss">
 .el-drawer__header {
  display: none;
 }

 .el-drawer__body {
-  padding: 180px 68px 0 68px;
+  padding: 160px 68px 0 68px;
  overflow: hidden;
 }

@@ -432,11 +636,7 @@ const initWebSocket = () => {
  border-radius: 10px;
 }

-.is-light {
-  background: rgba(7, 35, 72, 0.9);
-}
-
-.el-popper {
+.dropdown-style {
  padding: 20px;
  margin-left: 50px;
  width: 150px;
@@ -469,8 +669,14 @@ const initWebSocket = () => {
      }
    }
  }
+
+  .is-light {
+    background: rgba(7, 35, 72, 0.9);
+  }
+
 }
 </style>
+
 <style lang="scss" scoped>
 #main {
  height: 100%;
@@ -481,4 +687,332 @@ const initWebSocket = () => {
    height: 100%;
  }
 }
+
+.alarm-dialog {
+  :deep(.el-dialog ) {
+    height: auto !important;
+    margin: 820px auto 0 auto;
+  }
+}
+
+:deep(.el-table__body-wrapper) {
+  height: 90px;
+
+}
+:deep(.el-table--fit) {
+  width: auto;
+  //height: 600px;
+  background-color: transparent!important;
+  .el-loading-mask{
+    background: rgba(6, 34, 71, 0.78);
+    .el-loading-spinner{
+      .circular{
+        width: 150px;
+        height: 150px;
+      }
+    }
+  }
+}
+
+:deep(.el-table__empty-block) {
+  height: 200px!important;
+  //display: none;
+  .el-table__empty-text{
+    font-size: 60px;
+    color: #08B7B8;
+  }
+}
+
+.digital-tunnel {
+  .detail {
+    font-size: 50px;
+    color: #FFFFFF;
+
+    > div {
+      color: #f5f5f5;
+      margin-bottom: 10px;
+    }
+  }
+}
+
+.digital-tunnel {
+  :deep(.el-dialog ) {
+    height: 1410px;
+
+    .el-tag {
+      font-size: 36px;
+      height: 60px;
+      padding: 0 20px;
+      border-radius: 10px;
+    }
+  }
+}
+
+.query-form {
+  :deep(.el-form-item__label) {
+    font-size: 45px;
+    height: 70px;
+    line-height: 70px;
+    color: #FFFFFF;
+  }
+
+  :deep(.el-select__wrapper.is-hovering) {
+    .el-select__suffix {
+      .el-icon {
+        font-size: 55px;
+      }
+    }
+  }
+
+  :deep(.el-select-dropdown__item.is-hovering ) {
+    background-color: #064B66 !important;
+  }
+
+  :deep(.el-select__wrapper) {
+    height: 70px;
+    line-height: 70px;
+    background-color: transparent;
+    border: 1px solid #08B7B8;
+    font-size: 35px;
+    width: 356px;
+
+    .el-select__suffix {
+      .el-icon {
+        font-size: 55px;
+      }
+    }
+
+    .el-select__placeholder {
+      color: #FFFFFF;
+      height: 70px;
+      line-height: 70px;
+    }
+
+    .el-select__placeholder.is-transparent {
+      height: 70px;
+      line-height: 70px;
+    }
+  }
+
+  :deep(.el-form-item__content) {
+    .el-select__popper {
+      margin-top: -12px !important;
+      background: #072247 !important;
+      border: 1px solid #0F82AF !important;
+
+      .el-select-dropdown__item {
+        font-size: 38px !important;
+        height: 70px !important;
+        line-height: 70px !important;
+
+        > span {
+          color: #FFFFFF;
+        }
+      }
+
+      .el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
+        background-color: #064B66 !important;
+      }
+    }
+
+    .el-button {
+      height: 70px;
+      font-size: 40px;
+      border-radius: 10px;
+    }
+
+    .el-button--primary {
+      background: #064B66;
+    }
+
+    .el-input {
+      width: 380px;
+      height: 70px;
+
+      .el-input__wrapper {
+        font-size: 40px;
+        background-color: transparent;
+        border: 1px solid #08B7B8;
+        box-shadow: none;
+
+        .el-input__inner {
+          height: 70px;
+          color: #FFFFFF;
+        }
+
+        .el-input__suffix-inner {
+          .el-icon {
+            font-size: 55px;
+          }
+        }
+      }
+    }
+  }
+}
+
+.device-table {
+  margin-top: 7px;
+
+  :deep(.el-button) {
+    font-size: 40px;
+  }
+
+  .active {
+    color: #FFFFFF;
+    background: #0f7da9;
+  }
+
+  .wind-switch {
+    margin-left: 65px;
+  }
+
+  .switch {
+    margin-top: 22px;
+    display: flex;
+    width: 200px;
+    height: 50px;
+    border-radius: 6px;
+    border: 1px solid #05FEFF;
+    overflow: hidden;
+    color: #51A2B3;
+    line-height: 40px;
+    font-size: 36px;
+
+    & > div {
+      flex: 1;
+      text-align: center;
+      cursor: pointer;
+    }
+  }
+
+  :deep(.el-table--fit) {
+    //width: 1780px !important;
+    width: auto;
+  }
+
+  :deep(.cell) {
+    height: 80px;
+    line-height: 80px;
+    color: #fff;
+    font-size: 38px;
+  }
+
+  :deep(.el-table tr) {
+    background-color: #1C5971;
+  }
+
+  :deep(.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell) {
+    background-color: #1C5971;
+  }
+
+  :deep(.el-table__row--striped) {
+    background-color: #13849C !important;
+  }
+
+  :deep(.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell) {
+    background-color: #13849C !important;
+  }
+
+  :deep(.el-table__cell) {
+    .el-input {
+      width: 180px;
+      height: 53px;
+    }
+
+    .el-input__wrapper {
+      border-radius: 6px;
+      border: 1px solid #05FEFF;
+      background-color: transparent;
+
+      .el-input__inner {
+        color: #FFFFFF;
+        font-size: 40px;
+        height: auto;
+        line-height: normal;
+      }
+    }
+  }
+
+  :deep(.el-table__inner-wrapper::before) {
+    display: none;
+  }
+}
+
+.pagination {
+  display: flex;
+  align-items: center;
+  position: absolute;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  bottom: 0;
+  color: #60DDDE;
+  font-size: 38px;
+  font-weight: bold;
+
+  :deep(.el-pagination.is-background ) {
+    .btn-next,.btn-prev {
+      background-color: transparent;
+    }
+
+    .el-pager {
+      li {
+        margin: 0 0 0 40px;
+      }
+
+      li.is-active {
+        background-color: #60DDDE;
+      }
+    }
+  }
+
+  > span:first-child {
+    margin-right: 60px;
+  }
+
+  > span:last-child {
+    margin-left: 71px;
+  }
+
+  :deep(.btn-prev) {
+    background-color: transparent;
+    font-size: 38px;
+    font-weight: bold;
+    color: #60DDDE;
+    margin-right: 20px;
+
+  }
+
+  :deep(.btn-next) {
+    background-color: transparent;
+    font-size: 38px;
+    font-weight: bold;
+    color: #60DDDE;
+    margin-left: 30px;
+  }
+
+  :deep(.el-pager li.is-active ) {
+    width: 70px;
+    height: 70px;
+    background: #60DDDE;
+    border-radius: 50%;
+    color: #071F40;
+    font-size: 38px;
+    font-weight: bold;
+  }
+
+  :deep(.el-pager li) {
+    margin-left: 40px !important;
+  }
+
+  :deep(.el-pager li:not(.is-active) ) {
+    width: 70px;
+    height: 70px;
+    border: 1px solid #60DDDE;
+    border-radius: 50%;
+    background-color: transparent;
+    font-size: 38px;
+    font-weight: bold;
+    color: #60DDDE;
+  }
+}
 </style>
--- a/src/views/user/index.vue
+++ b/src/views/user/index.vue
@@ -169,7 +169,7 @@ const form = ref({
  nickName: '',
  phoneNumber: '',
  state: '1',
-  roleId: [],
+  roleId: 3,
  tunnelList: [1]
 });
 const validateName = (rule, value) => {
@@ -207,6 +207,10 @@ const handleAddUser = () => {
  reset()
  title.value = '添加用户'
  isVisited.value = true
+  nextTick(() => {
+    // 清空校验
+    formInstance.value.clearValidate()
+  })
 }
 const handleEditUser = (row) => {
  reset()
@@ -247,7 +251,7 @@ const reset = () => {
    nickName: '',
    phoneNumber: '',
    state: '1',
-    roleId: [],
+    roleId: 3,
    tunnelList: []
  }
 }
@@ -342,6 +346,13 @@ const handleSelect = async (selection, row) => {
 </script>
 <style lang="scss">
 .user-select {
+  .el-select__wrapper.is-hovering {
+    .el-select__suffix {
+      .el-icon {
+        font-size: 40px;
+      }
+    }
+  }
  .el-select__wrapper {
    min-height: 75px;
    height: auto !important;
@@ -749,6 +760,21 @@ const handleSelect = async (selection, row) => {
    color: #60DDDE;
    font-size: 38px;
    font-weight: bold;
+    :deep(.el-pagination.is-background ) {
+      .btn-next,.btn-prev {
+        background-color: transparent;
+      }
+
+      .el-pager {
+        li {
+          margin: 0 0 0 40px;
+        }
+
+        li.is-active {
+          background-color: #60DDDE;
+        }
+      }
+    }

    > span:first-child {
      cursor: pointer;