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

Reviewed-on: http://git.feashow.cn/clay/tunnel-cloud-web/pulls/304

.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

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'
+  })
+}

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',

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',

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 {
+    .el-select-dropdown__item {
-    width: 200px !important;
+      color: #fff !important;
-  }
+    }
 
-  .el-select-dropdown__item {
+    .el-select-dropdown__item.hover {
-    color: #fff !important;
+      background-color: #072247 !important;
-  }
+    }
 
-  .el-select-dropdown__item.hover {
+    .el-select-dropdown__item:hover {
-    background-color: #072247 !important;
+      background-color: #072247 !important;
-  }
+      color: #08B7B8 !important;
+    }
 
-  .el-select-dropdown__item:hover {
+    .el-select-dropdown__item.selected {
-    background-color: #072247 !important;
+      color: #08B7B8 !important;
-    color: #08B7B8 !important;
+    }
-  }
 
-  .el-select-dropdown__item.selected {
+    .el-select-dropdown__list {
-    color: #08B7B8 !important;
+      .el-select-dropdown__item:first-child {
-  }
+        color: #FFFFFF;
 
-  .el-select-dropdown__list {
+        &:hover {
-    .el-select-dropdown__item:first-child {
+          color: #08B7B8 !important;
-      color: #FFFFFF;
+        }
-
-      &:hover {
-        color: #08B7B8 !important;
       }
     }
   }

src/components/chooseDay/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({
+const selectButton = ref();
-  time: {
-    type: Date,
-    default: '',
-  },
-});
-const selectButton = ref(props.time);
 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;
 

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({
+const selectButton = ref('');
-  time: {
-    type: Date,
-    default: '',
-  },
-});
-const selectButton = ref(props.time);
 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>

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-day v-if="selectTimeButton===2" ref="chooseDayRef" @select="daySelect"/>
-          <choose-month v-if="selectTimeButton===1" :time="monthValue" @select="monthSelect"/>
+          <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 ChooseDay from "@/components/chooseDay/index.vue"
-import ChooseMonth from "@/components/ChooseMonth/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 {

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 {

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-day v-if="selectTimeButton===2" ref="chooseDayRef"  @select="daySelect"/>
-          <choose-month v-if="selectTimeButton===1" :time="monthValue" @select="monthSelect"/>
+          <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 ChooseDay from "@/components/chooseDay/index.vue"
-import ChooseMonth from "@/components/ChooseMonth/index.vue"
+import ChooseMonth from "@/components/chooseMonth/index.vue"
-const dayValue = ref('');
+
-const monthValue = ref('');
 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;

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 }">
+<!--              :class="{ stopColor:changeStopColor(item.breakdown,item.running)}"-->
-                <div :style="{ backgroundImage: 'url(' +getImageUrl(item.breakdown)+')' }" class="state-icon"></div>
+              <div class="blue-state" :style="{backgroundColor:changeStopColor(item.breakdown,item.running)}" >
-                状态：<span class="fan-state">{{ item.breakdown ? '故障' : '运行' }}</span>
+                <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-day v-if="selectTimeButton===2" ref="chooseDayRef" @select="daySelect"/>
-          <choose-month v-if="selectTimeButton===1" :time="monthValue" @select="monthSelect"/>
+          <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 ChooseDay from "@/components/chooseDay/index.vue"
-import ChooseMonth from "@/components/ChooseMonth/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')
+  getFanInfo(openEquipmentId.value, 'day', val)
-  dayValue.value = 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) {
+  switch (item.equipmentName) {
-    case 22:
+    case '1号变频器':
       return '一';
-    case 23:
+    case '2号变频器':
       return '二';
   }
 }
@@ -508,10 +505,27 @@ const handleOnMounted = () => {
     fan01_option && Echarts_info1.setOption(fan01_option);
   }
 }
-
+const changeStopColor = (breakdown, running) => {
-const getImageUrl = (name) => {
+  if (breakdown) {
-  let icon = getImage(name)
+    return 'red'
-  return new URL(`../../../assets/images/fanInfo/${icon}`, import.meta.url).href
+  } else {
+    if (running) {
+      return '#3eab3f'
+    } else {
+      return '#E6A23C'
+    }
+  }
+}
+const changeStateText = (breakdown, running) => {
+  if (breakdown) {
+    return '故障'
+  } else {
+    if (running) {
+      return '运行'
+    } else {
+      return '停止'
+    }
+  }
 }
 /**
  * 初始化echarts实例方法

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.previewtunnelModeInit(toRaw(modelList.value), fanData);
-        demo.SignsInf(params.tunnelName, String(params.tunnelLen.value))
+        demo.SignsInf(tunnelAlias, String(params.tunnelLen.value))
         // watch(
         //     () => params.tunnelId,
         //     (now) => {

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",

src/components/content/tunnelScene/editEquComp/editDialog.vue

@@ -2,39 +2,20 @@
   <div id="edit-dialog">
     <div class="distance-back">
       <p>当前距离洞口：{{ pointDistance_str }}</p>
-      <img
+      <img src="/images/htmlEditDialog/back-icon.png" alt="" @click="handleCancel" />
-        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
+        <select-input :options="options" @selectChange="handleTypeChange" placeholder="请选择传感器类型" ref="equipmentType" />
-          :options="options"
-          @selectChange="handleTypeChange"
-          placeholder="请选择传感器类型"
-          ref="equipmentType"
-        />
       </div>
       <div class="setting-item">
         <p>设备选择</p>
-        <select-input
+        <select-input :options="options2" @selectChange="handleEquipmentChange" placeholder="请选择设备" ref="equipment" />
-          :options="options2"
-          @selectChange="handleEquipmentChange"
-          placeholder="请选择设备"
-          ref="equipment"
-        />
       </div>
-      <input-num
+      <input-num name="阈值" placeholder="请输入阈值" @inputValue="handelInput" :disabled="isDisabledInputNum" />
-        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",

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" })

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;
+            }
+          }
+        }
+      }
+    }
+  }
 }

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);
   });
 }

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) {

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">
+  </div>
-      <el-dialog :close-on-click-modal="false" v-model="isVisited" width="2175px" :modal="false">
+  <div class="digital-tunnel">
-        <div class="left-top-icon"></div>
+    <el-dialog :close-on-click-modal="false" v-model="isVisited" width="2175px" :modal="false">
-        <div class="right-top-icon"></div>
+      <div class="left-top-icon"></div>
-        <div class="top-tag">
+      <div class="right-top-icon"></div>
-          <div class="allUsedEle">
+      <div class="user-select">
-            <div class="use-title">
+        <el-select
-              {{ month }}总用电量
+            v-model="chooseChartFan"
-            </div>
+            filterable
-            <div class="value">{{ electricityConsumptionMonthly }}kwh</div>
+            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="value">{{ totalElectricityConsumption }}kwh</div>
-            <div class="use-title">
+        </div>
-              当月节省量
+        <div class="allUsedEle">
-            </div>
+          <div class="use-title">
-            <div class="value">{{ monthlySavings }}kwh</div>
+            月节省量
           </div>
+          <div class="value">{{ saveElectricity }}kwh</div>
         </div>
-        <div class="loading-block" v-if="showLoading">
+      </div>
-          <div class="loading"></div>
+      <div class="loading-block" v-if="showLoading">
-          <span>加载中...</span>
+        <div class="loading" v-if="loadingText==='加载中...'"></div>
-        </div>
+        <span>{{ loadingText }}</span>
-        <div class="chat-dialog" v-else>
+      </div>
-          <div id="containerEle"></div>
+      <div class="chat-dialog" v-else>
-          <div style="width: 1px;"></div>
+        <div id="containerEle"></div>
-        </div>
+        <div style="width: 1px;"></div>
-        <div class="left-bottom-icon"></div>
+      </div>
-        <div class="right-bottom-icon"></div>
+      <div class="time-select">
-      </el-dialog>
+        <choose-month v-if="selectTimeButton===1" ref="chooseMonthRef" @select="monthSelect"/>
-    </div>
+        <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) {
+  if (now) {
-    electricityConsumptionMonthly.value = 0
+    let fanObj = {}
-  } else {
+    now.frequencyChangerList.forEach(item => {
-    getBasicData(now.frequencyChangerList)
+      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;
+          -webkit-border-radius: 31px;
-          transition: width 0.5s linear 0s;
+          //transition: width 0.5s linear 0s;
+          -webkit-transition: width 1s ease-in-out;
         }
       }
 

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>
+          <div class="loading" v-if="loadingText==='加载中...'"></div>
-          <span>加载中...</span>
+          <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-day v-if="selectTimeButton===2" ref="chooseDayRef" @select="daySelect"/>
-          <choose-month v-if="selectTimeButton===1" :time="monthValue" @select="monthSelect"/>
+          <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 ChooseDay from "@/components/chooseDay/index.vue"
-import ChooseMonth from "@/components/ChooseMonth/index.vue"
+import ChooseMonth from "@/components/chooseMonth/index.vue"
 
 const props = defineProps({
   list: Array,
   winData: Array,
   loading: Number,
 });
-const dayValue = ref('');
+const loadingText = ref('加载中...')
-const monthValue = 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>

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"/>

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-form-item label="施工长度">
-<!--          <el-input type="number" v-model="form.constructionLength" placeholder="请输入施工长度"/>-->
+          <el-input type="number" v-model="form.constructionLength" placeholder="请输入施工长度"/>
-<!--        </el-form-item>-->
+        </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){
+    if (modelEquipmentList.value === null) {
-      constructionLength.value=0
+      modelEquipmentList.value = []
-    }
-    if(modelEquipmentList.value===null){
-      modelEquipmentList.value=[]
     }
     const data = {
       tunnelId: tunnelId,
-      tunnelName: form.value.tunnelName,
+      ...form.value,
-      tunnelAlias: form.value.tunnelAlias,
-      serialNumber: form.value.serialNumber,
-      remarks: form.value.remarks,
-      constructionLength: constructionLength.value,
-      // constructionLength: form.value.constructionLength,
       tunnelLength: form.value.totalLength,
-      isDefault: form.value.isDefault,
       modelEquipmentList: modelEquipmentList.value,
     };
-     editTunnel(data).then((res) => {
+    editTunnel(data).then((res) => {
-       if (res?.code === 1000) {
+      if (res?.code === 1000) {
-         ElMessage.success(res.msg);
+        ElMessage.success(res.msg);
-         router.push("/tunnel/" + form.value.siteId + "/" + type + "/" + userId);
+        router.push("/tunnel/" + form.value.siteId + "/" + type + "/" + userId);
-       } else {
+      } else {
-         ElMessage.error(res.msg);
+        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;
+        }
       }
     }
   }

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-btn">
-          <div class="edit-icon"></div>
+          <div @click="handleEdit(item)">
-          <div>站点编辑</div>
+            <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 {
+    } else {
-      showAddIcon.value = total.value % 6!==0;
+      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{
+      } else {
-        item.info=item.tunnelList[0]
+        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=()=>{
+const handleChooseAll = () => {
-  siteList.value.map(item=>{
+  siteList.value.map(item => {
-    item.checked=!item.checked
+    item.checked = !item.checked
-    if(item.checked&&!item.isDefault){
+    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
+    let flag = false
-    siteList.value.map(item=>{
+    siteList.value.map(item => {
-      siteIds.value.map(siteItem=>{
+      siteIds.value.map(siteItem => {
-        if(item.siteId===siteItem){
+        if (item.siteId === siteItem) {
-          if(item.tunnelList.length!==0){
+          if (item.tunnelList.length !== 0) {
             ElMessage.error('该站点下存在隧道，不能删除!')
-            flag=false
+            flag = false
-          }else {
+          } else {
-            flag=true
+            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=()=>{
+const lastPage = () => {
-  pageInfo.pageNum = total.value/pageInfo.pageSize
+  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 {
+        > div:first-child {
-          width: 42px;
+          display: flex;
-          height: 44px;
+          align-items: center;
-          background-image: url('@/assets/images/site/zdgl_icon_bj.png');
+          cursor: pointer;
-          margin-right: 16px;
+
+          .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;

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-form-item label="施工长度" prop="constructionLength">
-<!--          <el-input type="number" v-model="form.constructionLength" placeholder="请输入施工长度"/>-->
+          <el-input type="number" v-model="form.constructionLength" placeholder="请输入施工长度"/>
-<!--        </el-form-item>-->
+        </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;

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 {
+.dropdown-style {
-  background: rgba(7, 35, 72, 0.9);
-}
-
-.el-popper {
   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>

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;