diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss
index f98121e..61c4fd9 100644
--- a/src/assets/styles/index.scss
+++ b/src/assets/styles/index.scss
@@ -154,7 +154,7 @@ body,
   position: static !important;
 
   .el-drawer {
-    width: 900px !important;
+    width: 960px !important;
     background-color: transparent;
     box-shadow: none;
   }
@@ -503,60 +503,14 @@ body,
   }
 }
 
-//el-select 下拉框样式
-.el-select__popper {
-  margin-top: -12px !important;
-  background: #072247 !important;
-  border: 1px solid #0F82AF !important;
+.el-dropdown-menu__item:not(.is-disabled):focus {
+  background-color: transparent !important;
 }
-
-.el-popper {
-  max-width: 200px !important;
-  box-sizing: border-box;
-}
-
 .el-popper__arrow::before {
   display: none;
 }
-
-.el-select-dropdown {
-  width: 200px !important;
-}
-
-.el-select-dropdown__item {
-  > 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;
-  width: 198px !important;
-}
-
-.el-select-dropdown.is-multiple .el-select-dropdown__item.selected {
-  background-color: #064B66 !important;
-  width: 200px !important;
-}
-
-.el-select-tags-wrapper {
-  .el-tag {
-    padding: 28px 20px !important;
-    font-size: 35px;
-
-    .el-icon {
-      width: 40px;
-      height: 40px;
-      font-size: 40px !important;
-    }
-  }
-}
-
 .current-site {
+
   .el-select-dropdown {
     width: 200px !important;
   }
@@ -671,3 +625,42 @@ input[type="number"] {
   background-color: transparent !important;
   color: #60DDDE !important;
 }
+.showNull{
+  font-size:35px;
+  min-height: 350px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  color: #2fb0df;
+  letter-spacing: 3px;
+}
+//loading
+.loading-block{
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height:900px;
+  font-size: 55px;
+  color: #38CAFB;
+  letter-spacing: 3px;
+}
+.loading {
+  margin-bottom: 20px;
+  width: 100px;
+  height: 100px;
+  border: 2px solid #38CAFB;
+  border-top-color: transparent;
+  border-radius: 100%;
+  animation: circle infinite 0.75s linear;
+}
+// 转转转动画
+@keyframes circle {
+  0% {
+    transform: rotate(0);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
diff --git a/src/components/content/airInfo/AirInfo.vue b/src/components/content/airInfo/AirInfo.vue
index da15cf9..63769b9 100644
--- a/src/components/content/airInfo/AirInfo.vue
+++ b/src/components/content/airInfo/AirInfo.vue
@@ -1,27 +1,29 @@
 <template>
   <div id="air-info">
-    <div class="fan-speed">
+    <div style="height: 21px" v-if="airList.length!==0"></div>
+    <div class="fan-speed" v-if="windSpeed!==0">
       <img src="@/assets/images/airInfo/fan-v-icon.png" alt=""/>
       <div class="fan-info" @click="handleOpenChart">
         <div class="input-fan"><span>风速</span>{{ windSpeed }}m/s</div>
       </div>
     </div>
     <item-info
-        v-for="item in airList"
-        :key="item.equipmentId"
+        v-for="(item,index) in airList"
+        :key="index"
         :wp="item"
-        :icon="item.icon"
-        :name="item.name"
-        :unit="item.unit"
         @click="handleOpenAirChart(item)"
     />
-
+    <div style="height: 1px" v-if="airList.length!==0"></div>
     <div class="digital-tunnel">
       <el-dialog :close-on-click-modal="false" v-model="isWindSpeedVisited" :title="'风速监控数据'" width="2175px"
                  :modal="false">
         <div class="left-top-icon"></div>
         <div class="right-top-icon"></div>
-        <div class="chat-dialog">
+        <div class="loading-block" v-if="showSpeedLoading">
+          <div class="loading" v-if="loadingText==='加载中...'"></div>
+          <span>{{loadingText}}</span>
+        </div>
+        <div class="chat-dialog" v-else>
           <div id="containerWind"></div>
           <div style="width: 1px;"></div>
         </div>
@@ -41,7 +43,11 @@
                  :modal="false">
         <div class="left-top-icon"></div>
         <div class="right-top-icon"></div>
-        <div class="chat-dialog">
+        <div class="loading-block" v-if="showLoading">
+          <div class="loading" ></div>
+          <span>加载中...</span>
+        </div>
+        <div class="chat-dialog" v-else>
           <div id="containerAir"></div>
           <div style="width: 1px;"></div>
         </div>
@@ -65,6 +71,7 @@ import ItemInfo from "./childComps/ItemInfo.vue";
 import TimeRangeBtn from "@/components/timeRangeBtn/index.vue"
 import * as echarts from 'echarts';
 import {getEchartsInfo} from "../../../api/largeScreen";
+import {ElMessage} from "element-plus";
 
 let myEcharts = reactive({});
 let myAirEcharts = reactive({});
@@ -72,14 +79,17 @@ const props = defineProps({
   list: Array,
   airData: Array
 });
-const windSpeed = ref('')
+const windSpeed = ref(0)
+const loadingText = ref('加载中...')
 const windSpeedId = ref(0)
 const airTitle = ref('')
 const airList = ref([])
 const timeList = ref(["年", "月", "日"]);
 const selectTimeButton = ref(2);
 const isWindSpeedVisited = ref(false);
+const showSpeedLoading = ref(false)
 const isAirVisited = ref(false);
+const showLoading = ref(false)
 watch(() => props.list, (now) => {
   airList.value?.forEach(item => {
     now.forEach(newItem => {
@@ -90,28 +100,37 @@ watch(() => props.list, (now) => {
   })
 }, {deep: true});
 watch(() => props.airData, (now) => {
-  if (now.sensorList !== null) {
+  if (now.sensorList.length !== 0) {
     if (now.sensorList.length === 0) {
       airList.value = []
     } else {
       getAirInfo(now.sensorList)
     }
+  }else {
+    airList.value = []
+    windSpeed.value = 0
   }
 }, {deep: true});
 const getChartInfo = (equipmentId) => {
+  isWindSpeedVisited.value = true
+  showSpeedLoading.value=true
   getEchartsInfo(equipmentId).then(res => {
     if (res?.code === 1000) {
-      isWindSpeedVisited.value = true
+      showSpeedLoading.value=false
       nextTick(() => {
         initChart(res.data.dates, res.data.values)
       })
+    }else {
+      loadingText.value=res.msg
     }
   })
 }
 const getGasChartInfo = (equipmentId) => {
+  isAirVisited.value = true
+  showLoading.value=true
   getEchartsInfo(equipmentId).then(res => {
     if (res?.code === 1000) {
-      isAirVisited.value = true
+      showLoading.value = false
       nextTick(() => {
         initAirChart(res.data.dates, res.data.values)
       })
@@ -119,7 +138,6 @@ const getGasChartInfo = (equipmentId) => {
   })
 }
 const handleOpenChart = () => {
-  // isWindSpeedVisited.value = true
   getChartInfo(windSpeedId.value)
 }
 
@@ -177,8 +195,10 @@ const getAirInfo = (now) => {
       windSpeed.value = item.value
     }
   })
-  airArr.push(airArr.shift())
-  airList.value = airArr
+  if(airArr.length!==0){
+    airArr.push(airArr.shift())
+      airList.value = airArr
+  }
 }
 const initChart = (type, values) => {
   //3.初始化container容器
@@ -378,26 +398,27 @@ const initAirChart = (type, values) => {
 
 <style lang="scss" scoped>
 #air-info {
-  position: absolute;
+  //min-height: 350px;
+  margin-top: 40px;
+  //position: absolute;
   z-index: 100;
   width: 824px;
   //height: 400px;
-  top: 1003px;
-  right: 72px;
+  //top: 1003px;
+  //right: 72px;
   background-image: url(@/assets/images/airInfo/bg.png);
-  padding: 25px 20px 0 21px;
+  //padding: 25px 20px 1px 21px;
 
   .fan-speed {
+    box-sizing: border-box;
     display: flex;
     //height: 40px;
     font-size: 30px;
-    font-family: MicrosoftYaHei;
     color: #ffffff;
-    line-height: 40px;
     align-items: center;
     padding: 5px 0 5px 15px;
     margin-bottom: 25px;
-
+    margin-left: 21px;
     &:hover {
       //width: 790px;
       background: #2E5589;
diff --git a/src/components/content/airInfo/childComps/ItemInfo.vue b/src/components/content/airInfo/childComps/ItemInfo.vue
index a877532..f09c288 100644
--- a/src/components/content/airInfo/childComps/ItemInfo.vue
+++ b/src/components/content/airInfo/childComps/ItemInfo.vue
@@ -1,45 +1,38 @@
 <template>
-  <div id="item-info">
+  <div id="item-info" v-if="params.wp!==undefined">
     <div class="label">
       <div :style="{ backgroundImage: 'url(' +getImageUrl(windIcon)+')' }" class="wind-icon"></div>
-      <span>{{ params.name }}</span>
+      <span>{{ params.wp.name }}</span>
     </div>
     <div class="container" ref="length">
       <div class="value" ref="value"></div>
       <div id="point" ref="point"></div>
     </div>
     <div class="value-num" :class="{ warning: isWaring }">
-      {{ valueAndUnit }}
+      {{ params.wp.value }} {{ params.wp.unit }}
     </div>
   </div>
 </template>
 
 <script setup>
 const params = defineProps({
-  wp: Object,
-  icon: String,
-  name: String,
-  unit: String,
+  wp: Object
 });
-// const info = {
-//   windPId: 0, //编号
-//   max: 120, //最大值
-//   value: 40, //测量值
-//   point: 60, //阈值
-// };
-const windIcon = reactive(params.icon);
+
+const windIcon = ref();
 const length = ref(null);
 const value = ref(null);
 const point = ref(null);
-onMounted(handleOnMounted);
-
-function handleOnMounted() {
-  setValue();
-}
-
-watch(() => params.wp.value, () => {
-  setValue();
-});
+const isWaring = ref();
+// watch(() => params.wp.value, () => {
+//   setValue();
+// });
+onMounted(() => {
+  if (params.wp !== undefined) {
+    setValue();
+    windIcon.value = params.wp.icon
+  }
+})
 const getImageUrl = (name) => {
   return new URL(`../../../../assets/images/airInfo/${name}`, import.meta.url).href
 }
@@ -55,23 +48,25 @@ const setValue = () => {
     value.value.style.background =
         "linear-gradient(270deg, #38CAFB 0%, #E9D726 100%)";
   }
+  isWaring.value = params.wp.value >= params.wp.point;
 }
-let isWaring = computed(() => {
-  return params.wp.value >= params.wp.point;
-});
+// let isWaring = computed(() => {
+//   return params.wp.value >= params.wp.point;
+// });
 
-const valueAndUnit = computed(() => params.wp.value + " "+ params.unit );
 </script>
 
 <style lang="scss" scoped>
 #item-info {
   display: flex;
   align-items: center;
-  width: 100%;
+  width: 790px;
   padding: 5px 14px;
-  margin-bottom: 30px;
+  margin-bottom: 25px;
+  margin-left: 21px;
 
   &:hover {
+    width: 790px;
     background: #2E5589;
     border-radius: 6px;
 
diff --git a/src/components/content/badGasInfo/BadGasInfo.vue b/src/components/content/badGasInfo/BadGasInfo.vue
index 9132857..2a18979 100644
--- a/src/components/content/badGasInfo/BadGasInfo.vue
+++ b/src/components/content/badGasInfo/BadGasInfo.vue
@@ -3,7 +3,11 @@
       id="bad-gas-info"
       :style="{ backgroundImage: 'url(' + getImageUrl(bgImage) + ')' }">
     <div class="title">有害气体</div>
-    <div class="info-list">
+    <div v-if="badGasList==null||badGasList.length===0" class="showNull">
+      <div class="loading" v-if="loading===0"></div>
+      {{loading===0?'加载中...':'暂无数据~'}}
+    </div>
+    <div v-else class="info-list">
       <gas-info-item
           v-for="item in badGasList"
           :key="item.equipmentId"
@@ -11,7 +15,6 @@
           @click="handleOpenChart"
       />
     </div>
-
     <div class="digital-tunnel">
       <el-dialog
           :close-on-click-modal="false"
@@ -22,7 +25,11 @@
       >
         <div class="left-top-icon"></div>
         <div class="right-top-icon"></div>
-        <div class="chat-dialog">
+        <div class="loading-block" v-if="showLoading">
+          <div class="loading" ></div>
+          <span>加载中...</span>
+        </div>
+        <div class="chat-dialog" v-else>
           <div id="containerBad"></div>
           <div style="width: 1px"></div>
         </div>
@@ -49,11 +56,13 @@ import {getBadGasEchartsInfo} from "@/api/largeScreen";
 const props = defineProps({
   list: Array,
   badGasData: Array,
-  tunnelId: Number
+  tunnelId: Number,
+  loading: Number,
 });
 const timeList = ref(["年", "月", "日"]);
 const selectTimeButton = ref(2);
 const isBadGasVisited = ref(false);
+const showLoading = ref(false)
 const badGasList = ref([]);
 let myEcharts = reactive({});
 const bgImage = computed(() => (isBadGasVisited.value ? "sp_active.png" : "bg.png"));
@@ -130,10 +139,12 @@ const changeData = (item) => {
   };
 };
 const getBadGasChartInfo = () => {
+  isBadGasVisited.value = true
+  showLoading.value=true
   let id = props.tunnelId
   getBadGasEchartsInfo(id).then(res => {
     if (res?.code === 1000) {
-      isBadGasVisited.value = true
+      showLoading.value=false
       nextTick(() => {
         initChart(res.data.dates, res.data)
       })
@@ -355,32 +366,31 @@ const initChart = (type, values) => {
 
 <style lang="scss" scoped>
 #bad-gas-info {
+  margin-top:40px;
   cursor: pointer;
-  position: absolute;
+  //position: absolute;
   width: 824px;
+  min-height: 300px;
   //height: 621px;
-  top: 1441px;
-  right: 72px;
+  //top: 1441px;
+  //right: 72px;
   background-image: url(../../../assets/images/badGasInfo/bg.png);
-
+  padding: 22px 17px 25px 50px;
   .title {
-    width: 128px;
-    height: 45px;
-    font-size: 32px;
-    font-family: PingFang-SC, PingFang-SC;
+    font-size: 38px;
     font-weight: 800;
     color: #38cafb;
     line-height: 45px;
-    margin: 22px 0px 0px 62px;
+    //margin: 22px 0px 0px 62px;
   }
 
   .info-list {
     width: 100%;
-    height: calc(621px - 45px - 22px);
+    //height: calc(621px - 45px - 22px);
     display: flex;
     flex-wrap: wrap;
     justify-content: space-around;
-    padding: 10px 0px 0px 10px;
+    padding: 16px 0 0 10px;
   }
 }
 </style>
diff --git a/src/components/content/fanInfo/FanInfo.vue b/src/components/content/fanInfo/FanInfo.vue
index b8aa4d4..126df2c 100644
--- a/src/components/content/fanInfo/FanInfo.vue
+++ b/src/components/content/fanInfo/FanInfo.vue
@@ -1,7 +1,11 @@
 <template>
   <div id="fan_info">
     <div class="title">风机</div>
-    <div class="fans">
+    <div v-if="socketData==null||socketData.length===0" class="showNull ">
+      <div class="loading" v-if="loading===0"></div>
+      {{loading===0?'加载中...':'暂无数据~'}}
+    </div>
+    <div v-else class="fans">
       <div class="fan-item" v-for="(item,index) in socketData" :key="item.equipmentId">
         <div>
           <!-- echarts -->
@@ -69,12 +73,17 @@
         </div>
       </div>
     </div>
+
     <div class="digital-tunnel">
       <el-dialog :close-on-click-modal="false" v-model="isVisited" :title="changeNum(fanIndex)+'号风机电流监控数据'" width="2175px"
                  :modal="false">
         <div class="left-top-icon"></div>
         <div class="right-top-icon"></div>
-        <div class="chat-dialog">
+        <div class="loading-block" v-if="showLoading">
+          <div class="loading" ></div>
+          <span>加载中...</span>
+        </div>
+        <div class="chat-dialog" v-else>
           <div id="containerFan"></div>
           <div style="width: 1px;"></div>
         </div>
@@ -100,7 +109,8 @@ import {getFanEchartsInfo} from "../../../api/largeScreen";
 const props = defineProps({
   list: Array,
   fanData: Array,
-  transducerData: Array
+  transducerData: Array,
+  loading: Number,
 });
 const socketData = ref()
 let Echarts_info1 = null;
@@ -111,9 +121,12 @@ const stateA = ref(false)
 const stateB = ref(false)
 const stateC = ref(false)
 const isVisited = ref(false)
+const showLoading = ref(false)
 const fanIndex = ref(0)
 let myEcharts = reactive({});
-
+watch(() => props.loading, (now) => {
+  props.loading=now
+}, {deep: true});
 watch(() => props.transducerData, (now) => {
   getTransData(now.frequencyChangerList)
 }, {deep: true});
@@ -148,9 +161,11 @@ watch(() => props.list, (now) => {
   handleOnMounted()
 }, {deep: true});
 const getFanInfo = (equipmentId) => {
+  isVisited.value = true
+  showLoading.value=true
   getFanEchartsInfo(equipmentId).then(res => {
     if (res?.code === 1000) {
-      isVisited.value = true
+      showLoading.value=false
       nextTick(() => {
         initChart(res.data.dates, res.data.currentsA,res.data.currentsB,res.data.currentsC)
       })
@@ -158,6 +173,7 @@ const getFanInfo = (equipmentId) => {
   })
 }
 const handleOpenChart = (item,index) => {
+
   getFanInfo(item.equipmentId)
   fanIndex.value=index+1
 }
@@ -167,7 +183,7 @@ const getTransData = (data) => {
   data?.map(item => {
     tranObj = {
       equipmentId: item.equipmentId,
-      max: 200,
+      max: 800,
       valueA: item.phaseCurrentA,
       pointA: item.phaseCurrentAThreshold,
       valueB: item.phaseCurrentB,
@@ -470,6 +486,7 @@ const initChart = (type, valueA,valueB,valueC) => {
 </script>
 
 <style lang="scss" scoped>
+
 :deep( .el-radio__input.is-checked + .el-radio__label) {
   color: #38CAFB;
 }
@@ -516,11 +533,12 @@ input[type="number"] {
 #fan_info {
   //height: 1465px;
   //height: 1000px;
+  min-height: 350px;
   width: 830px;
-  position: absolute;
+  //position: absolute;
   z-index: 100;
-  top: 184px;
-  left: 68px;
+  //top: 184px;
+  //left: 68px;
   padding: 10px 10px 20px 10px;
   background-image: url(../../../assets/images/fanInfo/bg.png);
   color: #2fb0df;
@@ -529,8 +547,8 @@ input[type="number"] {
   .title {
     width: 40%;
     text-align: left;
-    padding: 0 0 0 62px;
-    font-size: 32px;
+    padding: 0 0 0 50px;
+    font-size: 38px;
     font-weight: bold;
     color: #38cafb;
     line-height: 42px;
@@ -553,7 +571,7 @@ input[type="number"] {
 
         .echart {
           height: 270px;
-          width: 30%;
+          width: 34%;
           margin: 0px 0px 0px 10px;
           position: relative;
         }
@@ -659,7 +677,7 @@ input[type="number"] {
               display: flex;
               flex-direction: column;
               justify-content: center;
-              padding: 0 20px;
+              //padding: 0 20px;
               font-size: 28px;
               color: #38cafb;
               line-height: 37px;
diff --git a/src/components/content/fanInfo/FanInfoItem.vue b/src/components/content/fanInfo/FanInfoItem.vue
index eaf6049..ced3b89 100644
--- a/src/components/content/fanInfo/FanInfoItem.vue
+++ b/src/components/content/fanInfo/FanInfoItem.vue
@@ -97,14 +97,14 @@ let isWaringC = computed(() => {
 </script>
 
 <style lang="scss" scoped>
-.abnormal:hover {
-  background: #9C5252 !important;
-  border-radius: 6px;
-
-  .point {
-    background: #fff !important;
-  }
-}
+//.abnormal:hover {
+//  background: #9C5252 !important;
+//  border-radius: 6px;
+//
+//  .point {
+//    background: #fff !important;
+//  }
+//}
 
 .wind-pressure-item {
   display: flex;
diff --git a/src/components/content/usedEle/UsedEle.vue b/src/components/content/usedEle/UsedEle.vue
index fc0e7af..4e5fe39 100644
--- a/src/components/content/usedEle/UsedEle.vue
+++ b/src/components/content/usedEle/UsedEle.vue
@@ -38,7 +38,11 @@
             <div class="value">345v</div>
           </div>
         </div>
-        <div class="chat-dialog">
+        <div class="loading-block" v-if="showLoading">
+          <div class="loading" ></div>
+          <span>加载中...</span>
+        </div>
+        <div class="chat-dialog" v-else>
           <div id="containerEle"></div>
           <div style="width: 1px;"></div>
         </div>
@@ -58,8 +62,8 @@ const props = defineProps({
 });
 let myEcharts = reactive({});
 const isVisited = ref(false);
-const eleData = ref([])
-const electricityConsumptionMonthly = ref()
+const showLoading = ref(false)
+const electricityConsumptionMonthly = ref(0)
 const monthlySavings = ref(4000)
 const length = ref(null);
 const valueA = ref();
@@ -70,51 +74,45 @@ const bgImage = computed(() =>
         : "bg.png"
 );
 watch(() => props.eleData, (now) => {
-  getBasicData(now.frequencyChangerList)
+  if(now.frequencyChangerList.length===0){
+    electricityConsumptionMonthly.value=0
+  }else {
+    getBasicData(now.frequencyChangerList)
+  }
   setValueA()
 }, {deep: true});
 watch(() => props.list, (now) => {
-  eleData.value.forEach(item => {
-    now.forEach(newItem => {
-      if (item.equipmentId === newItem.equipmentId) {
-        if (newItem.electricityConsumptionDay) {
-          electricityConsumptionMonthly.value = newItem.electricityConsumptionMonthly
-          // item.electricityConsumptionDay = newItem.electricityConsumptionDay
-          // item.electricityConsumptionMonthly = newItem.electricityConsumptionMonthly
-          // item.electricityConsumptionTotal = newItem.electricityConsumptionTotal
-        }
-      }
-    })
-  })
+  // props.eleData.forEach(item => {
+  //   now.forEach(newItem => {
+  //     if (item.equipmentId === newItem.equipmentId) {
+  //       if (newItem.electricityConsumptionDay) {
+  //         electricityConsumptionMonthly.value = newItem.electricityConsumptionMonthly
+  //       }
+  //     }
+  //   })
+  // })
   setValueA()
 }, {deep: true});
-onMounted(()=>{
+onMounted(() => {
   setValueA()
   setValueB()
 })
-const setValueA=()=> {
+const setValueA = () => {
+  if (electricityConsumptionMonthly.value === 0 || length.value === null) {
+    valueA.value.style.height = `0px`;
+  }
   let width = (electricityConsumptionMonthly.value * length.value.offsetHeight) / 10000;
   valueA.value.style.height = `${width}px`;
 }
-const setValueB=()=> {
-  let width = (4000 * length.value.offsetHeight) / 10000;
+const setValueB = () => {
+  if (monthlySavings.value === 0 || length.value === null) {
+    valueB.value.style.height = `0px`;
+  }
+  let width = (monthlySavings.value * length.value.offsetHeight) / 10000;
   valueB.value.style.height = `${width}px`;
 }
 const getBasicData = (data) => {
-  let tranObj = {}
-  let tranArr = []
-  data?.map(item => {
-    electricityConsumptionMonthly.value = item.electricityConsumptionMonthly,
-        tranObj = {
-          equipmentId: item.equipmentId,
-          // equipmentName: item.equipmentName,
-          // electricityConsumptionDay: item.electricityConsumptionDay,
-          // electricityConsumptionMonthly: item.electricityConsumptionMonthly,
-          // electricityConsumptionTotal: item.electricityConsumptionTotal,
-        }
-    tranArr.push(tranObj)
-  })
-  eleData.value = tranArr
+    electricityConsumptionMonthly.value = data[0].electricityConsumptionMonthly
 }
 const handleOpenChart = () => {
   console.log('用电量弹窗')
@@ -234,15 +232,15 @@ const getImageUrl = (name) => {
 }
 
 #used-ele {
-  //flex:1;
+  margin-top: 40px;
   cursor: pointer;
   width: 830px;
   //height: 373px;
   color: aliceblue;
-  position: absolute;
-  top: 1220px;
+  //position: absolute;
+  //top: 1220px;
   //top: 1680px;
-  left: 68px;
+  //left: 68px;
   background-image: url(../../../assets/images/usedEle/bg.png);
   padding: 21px 62px 35px 62px;
 
@@ -270,6 +268,7 @@ const getImageUrl = (name) => {
       display: flex;
       flex-direction: column;
       align-items: center;
+
       .container {
         width: 60px;
         height: 210px;
@@ -288,6 +287,7 @@ const getImageUrl = (name) => {
           transition: width 0.5s linear 0s;
         }
       }
+
       > div:nth-child(2) {
         display: flex;
 
diff --git a/src/components/content/windPressure/WindPressureList.vue b/src/components/content/windPressure/WindPressureList.vue
index c57c7ec..ef39eff 100644
--- a/src/components/content/windPressure/WindPressureList.vue
+++ b/src/components/content/windPressure/WindPressureList.vue
@@ -1,7 +1,11 @@
 <template>
   <div id="wind-pressure">
     <div class="name">风压</div>
-    <div class="list">
+    <div v-if="wpList==null||wpList.length===0" class="showNull">
+      <div class="loading" v-if="loading===0"></div>
+      {{loading===0?'加载中...':'暂无数据~'}}
+    </div>
+    <div v-else class="list">
       <wind-pressure-item v-for="(item,index) in wpList" :key="item.equipmentId" :wp="item"
                           @click="handleOpenChart(item)"/>
     </div>
@@ -10,7 +14,11 @@
                  :modal="false">
         <div class="left-top-icon"></div>
         <div class="right-top-icon"></div>
-        <div class="chat-dialog">
+        <div class="loading-block" v-if="showLoading">
+          <div class="loading" ></div>
+          <span>加载中...</span>
+        </div>
+        <div class="chat-dialog" v-else>
           <div id="container"></div>
           <div style="width: 1px;"></div>
         </div>
@@ -36,15 +44,16 @@ import {getEchartsInfo} from "@/api/largeScreen";
 
 const props = defineProps({
   list: Array,
-  winData: Array
+  winData: Array,
+  loading: Number,
 });
 const windSort = ref(1)
 const timeList = ref(["年", "月", "日"]);
 const selectTimeButton = ref(2);
 const isVisited = ref(false);
+const showLoading = ref(false)
 let myEcharts = reactive({});
 const wpList = ref([]);
-const chartData = ref()
 watch(() => props.list, (now) => {
   wpList.value.forEach(item => {
     now.forEach(newItem => {
@@ -60,9 +69,11 @@ watch(() => props.winData, (now) => {
 }, {deep: true});
 
 const getWindInfo = (equipmentId) => {
+  isVisited.value = true
+  showLoading.value=true
   getEchartsInfo(equipmentId).then(res => {
     if (res?.code === 1000) {
-      isVisited.value = true
+      showLoading.value=false
       nextTick(() => {
         initChart(res.data.dates, res.data.values)
       })
@@ -206,21 +217,20 @@ const initChart = (type, values) => {
 #wind-pressure {
   width: 830px;
   //height: 779px;
-  position: absolute;
-  top: 185px;
-  right: 68px;
+  //position: absolute;
+  min-height: 350px;
+  //top: 185px;
+  //right: 68px;
   background-image: url(../../../assets/images/windPressure/bg.png);
-  padding: 22px 17px 0 23px;
+  padding: 22px 17px 1px 23px;
 
   .name {
-    width: 64px;
-    height: 42px;
-    font-size: 32px;
+    font-size: 38px;
     font-family: MicrosoftYaHei, MicrosoftYaHei;
     font-weight: bold;
     color: #38cafb;
     line-height: 42px;
-    margin-left: 62px;
+    margin-left: 50px;
     margin-bottom: 38px;
   }
 }
diff --git a/src/router/index.js b/src/router/index.js
index 83a28a1..64ac055 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -23,6 +23,15 @@ const routes = [
       breadcrumb: true
     },
   },
+  {
+    path: '/:tunnelId',
+    name: 'previewTunnel',
+    component: () => import('@/views/tunnel/index.vue'),
+    meta: {
+      title: '隧道预览',
+      breadcrumb: true
+    },
+  },
   {
     path: '/edit/:tunnelId(\\d+)/:type/:userId(\\d+)',
     name: 'tunneledit',
diff --git a/src/views/site/index.vue b/src/views/site/index.vue
index 997db05..9d28b8f 100644
--- a/src/views/site/index.vue
+++ b/src/views/site/index.vue
@@ -62,8 +62,8 @@
       <div class="siteId">
         <span>{{ title }}</span>
       </div>
-      <el-form :model="form" :label-position="right" :rules="formRules" ref="formInstance" label-width="168px">
-        <el-form-item label="站点名称">
+      <el-form :model="form" :label-position="right" :rules="formRules" ref="formInstance" label-width="190px">
+        <el-form-item label="站点名称" prop="siteName">
           <el-input v-model="form.siteName" placeholder="请输入站点名称"/>
         </el-form-item>
         <el-form-item label="是否默认">
@@ -108,35 +108,7 @@ import {ElMessage, ElMessageBox} from "element-plus";
 
 const router = useRouter()
 const userId = reactive(router.currentRoute.value.params.userId)
-const siteList = ref([
-  // {
-  //   siteName: '松江站',
-  //   info:{
-  //     tunnelNum: 1,
-  //     tunnelName: '一号隧道',
-  //     constructionLength: 500,
-  //     implementationLength: 10
-  //   }
-  // },
-  // {
-  //   siteName: '松江站',
-  //   info:{
-  //     tunnelNum: 1,
-  //     tunnelName: '二号隧道',
-  //     constructionLength: 500,
-  //     implementationLength: 10
-  //   }
-  // },
-  // {
-  //   siteName: '松江站',
-  //   info:{
-  //     tunnelNum: 1,
-  //     tunnelName: '三号隧道',
-  //     constructionLength: 500,
-  //     implementationLength: 10
-  //   }
-  // }
-])
+const siteList = ref([])
 const siteIds = ref([])
 const siteNameList = ref([])
 const info = ref({
@@ -160,7 +132,7 @@ const form = ref({
   isDefault: false
 });
 const formRules = ref({
-  siteName: [{required: true, message: '请输入站点名称', trigger: 'blur'}]
+  siteName: [{required: true, message: '请输入站点名称', trigger:['blur','change']}]
 })
 const formInstance = ref()
 const getList = () => {
@@ -235,7 +207,7 @@ const handleAdd = () => {
 }
 const handleSubmit = (instance) => {
   if (!instance) return
-  instance.validate(async (valid) => {
+  instance.validate(valid => {
     if (!valid) return
     if (title.value === '编辑站点') {
       editSite(form.value).then((res) => {
@@ -328,6 +300,9 @@ const handleCurrentChange = (val) => {
 </script>
 
 <style scoped lang="scss">
+:deep(.el-form-item__error){
+  font-size: 35px;
+}
 :deep(.el-radio-group) {
   margin-top: 10px;
 }
diff --git a/src/views/tunnel-manage/index.vue b/src/views/tunnel-manage/index.vue
index 5dc6556..24e6324 100644
--- a/src/views/tunnel-manage/index.vue
+++ b/src/views/tunnel-manage/index.vue
@@ -5,11 +5,11 @@
         <div class="back-icon"></div>
         <span>返回</span>
       </div>
-<!--      <div class="site-name">-->
-<!--        {{ siteName }}-->
-<!--      </div>-->
+      <div class="site-name">
+        {{ siteName }}
+      </div>
       <div class="tunnel-title"></div>
-      <div class="all-del-btn">
+      <div class="all-del-btn" v-if="showOperation">
         <div class="all-btn" style=" margin-right: 40px;" v-if="!showAddIcon" @click="handleAdd">
           添加
         </div>
@@ -31,7 +31,7 @@
         </div>
         <div class="box-center">
           <div>
-            <div class="left-img"></div>
+            <div class="left-img" @click="handlePreview(item.tunnelId)"></div>
             <div>
               <div class="edit-btn" @click.stop="handleGoToEditTunnel(item.tunnelId)">
                 <div class="edit-icon"></div>
@@ -57,7 +57,7 @@
           </div>
         </div>
       </div>
-      <div class="site-box add-box" @click="handleAdd">
+      <div class="site-box add-box" @click="handleAdd" v-if="showOperation">
         <div class="add-icon"></div>
         <div style="cursor: pointer">添加隧道</div>
       </div>
@@ -67,13 +67,13 @@
         <span>{{ title }}</span>
       </div>
       <el-form :model="form" :label-position="right" label-width="188px" :rules="formRules" ref="formInstance">
-        <el-form-item label="隧道名称" required>
+        <el-form-item label="隧道名称" prop="tunnelName">
           <el-input v-model="form.tunnelName" placeholder="请输入隧道名称"/>
         </el-form-item>
-        <el-form-item label="序列号" required>
+        <el-form-item label="序列号" prop="serialNumber">
           <el-input v-model="form.serialNumber" placeholder="请输入序列号"/>
         </el-form-item>
-        <el-form-item label="隧道长度" required>
+        <el-form-item label="隧道长度" prop="totalLength">
           <el-input type="number" v-model="form.totalLength" placeholder="请输入隧道长度"/>
         </el-form-item>
         <el-form-item label="是否默认">
@@ -113,83 +113,26 @@ import {getSiteDetail} from "@/api/site";
 
 const router = useRouter()
 const showAddIcon = ref(true)
-const siteId = reactive(router.currentRoute.value.params.siteId)
-const userId = reactive(router.currentRoute.value.params.userId)
-const type = reactive(router.currentRoute.value.params.type)
+const params = router.currentRoute.value.params;
+const siteId = reactive(params.siteId)
+const userId = reactive(params.userId)
+const type = reactive(params.type)
+const validateNumber = (rule, value) => {
+  const reg = /^[A-Za-z0-9]+$/;
+  return reg.test(value);
+}
 const formRules = ref({
-  tunnelName: [{required: true, message: '请输入隧道名称', trigger: 'blur'}],
-  serialNumber: [{required: true, message: '请输入序列号', trigger: 'blur'}]
+  tunnelName: [{required: true, message: '请输入隧道名称', trigger: ['blur', 'change']}],
+  serialNumber: [
+    {required: true, message: '请输入序列号', trigger: ['blur', 'change']},
+    {validator: validateNumber, message: '请输入英文、数字、英文数字组合的用户名', trigger: ['blur', 'change']}
+  ],
+  totalLength: [{required: true, message: '请输入隧道长度', trigger: ['blur', 'change']}]
 })
 const showFirst = ref(true)
+const showOperation = ref(true)
 const formInstance = ref()
-const tunnelList = ref([
-  {
-    tunnelName: '一号隧道',
-    num: 1,
-    constructionLength: 500,
-    implementationLength: 10
-  },
-  {
-    tunnelName: '二号隧道',
-    num: 1,
-    constructionLength: 500,
-    implementationLength: 10
-  },
-  {
-    tunnelName: '三号隧道',
-    num: 1,
-    constructionLength: 500,
-    implementationLength: 10
-  },
-  {
-    tunnelName: '三号隧道',
-    num: 1,
-    constructionLength: 500,
-    implementationLength: 10
-  },
-  {
-    tunnelName: '三号隧道',
-    num: 1,
-    constructionLength: 500,
-    implementationLength: 10
-  },
-  {
-    tunnelName: '三号隧道',
-    num: 1,
-    constructionLength: 500,
-    implementationLength: 10
-  },
-  {
-    tunnelName: '三号隧道',
-    num: 1,
-    constructionLength: 500,
-    implementationLength: 10
-  },
-  {
-    tunnelName: '三号隧道',
-    num: 1,
-    constructionLength: 500,
-    implementationLength: 10
-  },
-  {
-    tunnelName: '三号隧道',
-    num: 1,
-    constructionLength: 500,
-    implementationLength: 10
-  },
-  {
-    tunnelName: '三号隧道',
-    num: 1,
-    constructionLength: 500,
-    implementationLength: 10
-  },
-  {
-    tunnelName: '三号隧道',
-    num: 1,
-    constructionLength: 500,
-    implementationLength: 10
-  }
-])
+const tunnelList = ref([])
 const iconsList = ref([
   {
     icon: 'sd_icon_fj.png',
@@ -244,7 +187,7 @@ const title = ref('新增隧道')
 const isVisited = ref(false);
 const tunnelIds = ref([])
 const tunnelNameList = ref([])
-const siteName = ref('')
+const siteName = ref(localStorage.getItem('site'))
 const form = ref({
   tunnelName: '',
   serialNumber: '',
@@ -259,9 +202,7 @@ const pageInfo = reactive({
 });
 const total = ref(10);
 onMounted(() => {
-  // getSiteDetail(siteId).then((res) => {
-  //   siteName.value = res.data.siteName
-  // });
+  showOperation.value = localStorage.getItem('roleKey') !== 'tunnel_admin';
 })
 const handleGoSiteOrIndex = () => {
   if (type === 's') {
@@ -299,16 +240,13 @@ const handleCurrentChange = (val) => {
   getList()
 }
 const handleSubmit = (instance) => {
-  // if (!instance) return
-  // console.log('instance',instance)
-  // instance.validate(async (valid) => {
-  //   console.log('valid',valid)
-  //   if (!valid) return
-  const data = {
-    siteId: siteId,
-    ...form.value
-  }
-  if (form.value.tunnelName && form.value.serialNumber && form.value.totalLength) {
+  if (!instance) return
+  instance.validate(async (valid) => {
+    if (!valid) return
+    const data = {
+      siteId: siteId,
+      ...form.value
+    }
     addTunnel(data).then(res => {
       if (res.code === 1000) {
         ElMessage.success('新增成功')
@@ -318,10 +256,14 @@ const handleSubmit = (instance) => {
         ElMessage.warning(res.msg)
       }
     })
-  } else {
-    ElMessage.warning('请先完善信息再新增')
+  })
+}
+//预览隧道
+const handlePreview = (id) => {
+  console.log('预览')
+  if (id) {
+    router.push('/' + id)
   }
-  // })
 }
 const handleGoToEditTunnel = (tunnelId) => {
   isEdit.value = true
@@ -413,6 +355,10 @@ const handleMoreDelete = () => {
 </script>
 
 <style scoped lang="scss">
+:deep(.el-form-item__error) {
+  font-size: 35px;
+}
+
 .site-name {
   position: absolute;
   left: 250px;
@@ -653,6 +599,7 @@ const handleMoreDelete = () => {
         }
 
         .left-img {
+          cursor: pointer;
           margin-top: 110px;
           margin-right: 50px;
           width: 340px;
diff --git a/src/views/tunnel/index.vue b/src/views/tunnel/index.vue
index 6d5d3d8..40a5797 100644
--- a/src/views/tunnel/index.vue
+++ b/src/views/tunnel/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div id="main">
     <div class="box-top">
-      <manage-btn v-model="selectIndex" @select="manageSelect" :list="routeList" v-if="showMenu" />
+      <manage-btn v-model="selectIndex" @select="manageSelect" :list="routeList" v-if="showMenu"/>
       <div class="tunnel-title"></div>
       <!--      <manage-length class="tunnel-length"></manage-length>-->
       <div class="top-length">
@@ -16,8 +16,8 @@
             <template #dropdown>
               <el-dropdown-menu>
                 <el-dropdown-item v-for="item in siteList" :key="item.value" :command="item">{{
-                  item.label
-                }}
+                    item.label
+                  }}
                 </el-dropdown-item>
               </el-dropdown-menu>
             </template>
@@ -36,28 +36,27 @@
     <preview-scene id="tunnel-box" :isedit="false" :tunnelId="tunnelId" :key="tunnelId"></preview-scene>
     <div class="left">
       <el-drawer v-model="drawerLeft" direction="ltr" modal-class="modal-box" :modal="false" :show-close="false"
-        :close-on-click-modal="false" :close-on-press-escape="false">
+                 :close-on-click-modal="false" :close-on-press-escape="false">
         <fan-info v-if="showFan" :list="socketData.leftData" :fan-data="largeScreenData"
-          :transducer-data="largeScreenData" />
-        <!--        <transducer-list v-if="showFan" :list="socketData.leftData" :transducer-data="largeScreenData" />-->
-        <used-ele v-if="showFan" :list="socketData.leftData" :ele-data="largeScreenData" />
+                  :transducer-data="largeScreenData" :loading="showFanLoading"/>
+        <used-ele v-if="showFan" :list="socketData.leftData" :ele-data="largeScreenData"/>
       </el-drawer>
       <div v-if="drawerLeft" class="left-arrow" @click="closeLeft"></div>
       <div v-else class="shrink-left" @click="closeLeft"></div>
     </div>
     <div class="right">
       <el-drawer v-model="drawerRight" direction="rtl" modal-class="modal-box" :modal="false" :show-close="false"
-        :close-on-click-modal="false" :close-on-press-escape="false">
-        <wind-pressure-list v-if="showFan" :list="socketData.windPressure" :win-data="largeScreenData" />
+                 :close-on-click-modal="false" :close-on-press-escape="false">
+        <wind-pressure-list v-if="showFan" :list="socketData.windPressure" :win-data="largeScreenData" :loading="showWindLoading"/>
         <air-info v-if="showFan" :list="socketData.sensor" :air-data="largeScreenData" />
-        <bad-gas-info v-if="showFan" :list="socketData.sensor" :bad-gas-data="largeScreenData" :tunnelId="tunnelId" />
+        <bad-gas-info v-if="showFan" :list="socketData.sensor" :bad-gas-data="largeScreenData" :tunnelId="tunnelId" :loading="showBadLoading"/>
       </el-drawer>
       <div v-if="drawerRight" class="right-arrow" @click="closeRight"></div>
       <div v-else class="shrink-right" @click="closeRight"></div>
     </div>
     <div class="switch-btn">
       <div class="arrow" @click="previousBtn"></div>
-      <el-carousel height="150px" type="card" ref="tunnelBtn" :autoplay="false" @change="changeTunnel">
+      <el-carousel height="150px" type="card" ref="tunnelBtn" :autoplay="false" :initial-index="initialIndex" @change="changeTunnel" >
         <div class="btn">
           <el-carousel-item v-for="item in tunnelList" :key="item.value">
             {{ item.label }}
@@ -77,21 +76,23 @@ import WindPressureList from "@/components/content/windPressure/WindPressureList
 import AirInfo from "@/components/content/airInfo/AirInfo.vue";
 import BadGasInfo from "@/components/content/badGasInfo/BadGasInfo.vue";
 import ManageBtn from "@/components/manageBtn/index.vue";
-import { dateFormat } from "@/utils/date.js";
-import { getToken } from "@/utils/auth";
-import { useAuthStore } from "@/store/userstore.js";
-import { getLargeScreen, getLargeScreenInfo, getTunnelBySiteId } from "@/api/largeScreen";
-import { ElMessage, ElMessageBox } from "element-plus";
-import { getUserInfo } from "@/api/login";
-import { initSceneData } from "@/api/tunnelScene";
-import { getSiteDetail } from "../../api/site";
-import { editTunnel, getTunnelDetail } from "@/api/tunnelManage";
-
+import {dateFormat} from "@/utils/date.js";
+import {getToken} from "@/utils/auth";
+import {useAuthStore} from "@/store/userstore.js";
+import {getLargeScreen, getLargeScreenInfo, getTunnelBySiteId} from "@/api/largeScreen";
+import {ElMessage, ElMessageBox} from "element-plus";
+import {getUserInfo} from "@/api/login";
+import {initSceneData} from "@/api/tunnelScene";
 const authStore = useAuthStore();
 const router = useRouter();
+const previewId = reactive(router.currentRoute.value.params.tunnelId)
 const selectIndex = ref(-1);
 const showFan = ref(false);
 const drawerLeft = ref(true);
+const initialIndex = ref(0)
+const showFanLoading = ref(0)
+const showWindLoading = ref(0)
+const showBadLoading = ref(0)
 const drawerRight = ref(true);
 const showMenu = ref(false);
 const currentSiteId = ref(0);
@@ -153,24 +154,25 @@ const socketData = reactive({
   sensor: [],
 });
 onMounted(() => {
+  if(previewId){
+    getScreenInfo(previewId)
+
+  }
+  getUser()
+  getOtherInfo()
   nextTick(() => {
     showFan.value = true;
   });
-  getUser()
-  getOtherInfo()
 });
 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)
+    localStorage.setItem('userId', currentUserId.value)
   })
 }
-const getDefaultSite = (siteId) => {
-  // console.log('siteList.value',siteList.value)
-  // getSiteDetail(siteId).then((res) => {
-  //   console.log('res',res)
-  // });
-}
+
 const getOtherInfo = () => {
   getLargeScreenInfo().then((res) => {
     if (res?.code === 1000) {
@@ -187,8 +189,17 @@ const getOtherInfo = () => {
       siteList.value = res.data.siteOption
       currentSiteId.value = res.data.siteOption[0].value
       currentSite.value = res.data.siteOption[0].label
+      localStorage.setItem('site', currentSite.value)
       tunnelList.value = res.data.tunnelOption
-      getTunnel(res.data.siteOption[0].value)
+      if(previewId){
+        tunnelList.value.forEach((item, index) => {
+          if(item.value == previewId){
+            initialIndex.value = index
+          }
+        })
+      }else{
+        getTunnel(res.data.siteOption[0].value)
+      }
     }
   });
 };
@@ -197,6 +208,34 @@ const getScreenInfo = (id) => {
     tunnelId.value = id
     getLargeScreen(id).then((res) => {
       if (res?.code === 1000) {
+        if(res.data.frequencyChangerList.length!==0){
+          showFanLoading.value=0
+        }else {
+          showFanLoading.value=1
+        }
+        if(res.data.windPressureSensorList.length!==0){
+          showWindLoading.value=0
+        }else {
+          showWindLoading.value=1
+        }
+        if(res.data.sensorList.length!==0){
+          res.data.sensorList.forEach((item,index)=>{
+            if (
+                item.equipmentType === "carbonDioxide" ||
+                item.equipmentType === "carbonMonoxide" ||
+                item.equipmentType === "hydrogenSulfide" ||
+                item.equipmentType === "sulfurDioxide" ||
+                item.equipmentType === "sulfurMonoxide" ||
+                item.equipmentType === "nitrogenDioxide"
+            ) {
+              showBadLoading.value=0
+            }else {
+              showBadLoading.value=1
+            }
+          })
+        }else {
+          showBadLoading.value=1
+        }
         largeScreenData.value = res.data;
       } else {
         ElMessage.warning(res.msg)
@@ -212,7 +251,6 @@ const getScreenInfo = (id) => {
 const getTunnel = (id) => {
   getTunnelBySiteId(id).then((res) => {
     if (res?.code === 1000) {
-      tunnelList.value = res.data
       getScreenInfo(res.data[0]?.value)
     }
   });
@@ -224,6 +262,9 @@ const changeTunnel = (e) => {
       newObj = item
     }
   })
+  showBadLoading.value=0
+  showWindLoading.value=0
+  showFanLoading.value=0
   getScreenInfo(newObj.value)
   nextTick(() => {
     showFan.value = true;
@@ -237,7 +278,7 @@ const manageSelect = (index) => {
     }
   } else if (index == '隧道管理') {
     if (currentSiteId.value && currentUserId.value) {
-      router.push("/tunnel/" + currentSiteId.value + '/i'+'/' + currentUserId.value);
+      router.push("/tunnel/" + currentSiteId.value + '/i' + '/' + currentUserId.value);
     }
   } else if (index == '用户管理') {
     if (currentSiteId.value) {
@@ -316,37 +357,18 @@ const initWebSocket = () => {
     socket.send(JSON.stringify(send));
   }, 30000);
 };
-const closeSocket = () => {
-  socket.close();
-};
 initWebSocket();
-
-
-// watch(
-//   () => tunnelId.value,
-//   (now) => {
-//     tunnelId.value = now
-//   },
-//   { deep: true }
-// )
-
-// const getTunnelPreview = () => {
-//   getTunnelDetail(tunnelId).then((res) => {
-//     if (res?.code === 1000) {
-//       form.value = res.data;
-//     }
-//   });
-// };
-// getTunnelPreview();
 </script>
 <style lang="scss">
-//.el-drawer__body{
-//  width: 100%;
-//  display: flex!important;
-//  flex-direction: column!important;
-//  flex: 1;
-//  height: 100%;
-//}
+.el-drawer__header {
+  display: none;
+}
+
+.el-drawer__body {
+  padding: 180px 68px 0 68px;
+  overflow: hidden;
+}
+
 .el-dropdown__popper.el-popper {
   background: transparent;
   //border: none;
diff --git a/src/views/user/index.vue b/src/views/user/index.vue
index bc431aa..9d1785c 100644
--- a/src/views/user/index.vue
+++ b/src/views/user/index.vue
@@ -49,7 +49,7 @@
             <el-table-column prop="phoneNumber" label="电话号码" align="center"/>
             <el-table-column prop="state" label="状态" align="center">
               <template #default="scope">
-                {{scope.row.state=="1"?'启用':'停用'}}
+                {{ scope.row.state == "1" ? '启用' : '停用' }}
               </template>
             </el-table-column>
             <el-table-column label="操作" align="center">
@@ -70,18 +70,18 @@
       </div>
       <el-form :model="form" :label-position="right" :rules="formRules" ref="formInstance" label-width="240px">
         <el-form-item label="当前站点">
-          <div class="current-site">{{ currentSite }}<span>如果需要切换站点,请返回首屏切换</span></div>
+          <div class="current-site">{{ currentSite }}<span v-if="showAdmin">如果需要切换站点,请返回首屏切换</span></div>
         </el-form-item>
-        <el-form-item label="输入用户名">
+        <el-form-item label="输入用户名" prop="userName">
           <el-input v-model="form.userName" placeholder="请输入用户名"/>
         </el-form-item>
-        <el-form-item label="输入密码" v-if="title==='添加用户'">
+        <el-form-item label="输入密码" v-if="title==='添加用户'" prop="password">
           <el-input type="password" show-password v-model="form.password" placeholder="请输入密码"/>
         </el-form-item>
-        <el-form-item label="输入昵称">
+        <el-form-item label="输入昵称" prop="nickName">
           <el-input v-model="form.nickName" placeholder="请输入昵称"/>
         </el-form-item>
-        <el-form-item label="输入电话号码">
+        <el-form-item label="输入电话号码" prop="phoneNumber">
           <el-input v-model="form.phoneNumber" placeholder="输入电话号码"/>
         </el-form-item>
         <el-form-item label="是否启用">
@@ -90,7 +90,7 @@
             <el-radio label="0">停用</el-radio>
           </el-radio-group>
         </el-form-item>
-        <el-form-item label="选择身份">
+        <el-form-item label="选择身份" prop="roleId">
           <el-radio-group v-model="form.roleId" @change="(val) => {
             if (val >3){
                  getTunnel()
@@ -98,22 +98,25 @@
             <el-radio v-for="item in radioList" :label="item.value" :key="item.value">{{ item.label }}</el-radio>
           </el-radio-group>
         </el-form-item>
-        <el-form-item label="选择隧道" v-if="form.roleId>3">
-          <el-select
-              v-model="form.tunnelList"
-              multiple
-              filterable
-              clearable
-              placeholder="请选择隧道"
-              :fit-input-width="true"
-          >
-            <el-option
-                v-for="item in tunnelList"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-            />
-          </el-select>
+        <el-form-item label="选择隧道" v-if="form.roleId>3" prop="tunnelList">
+          <div class="user-select">
+            <el-select
+                v-model="form.tunnelList"
+                multiple
+                filterable
+                clearable
+                placeholder="请选择隧道"
+                :fit-input-width="true"
+                :teleported="false"
+            >
+              <el-option
+                  v-for="item in tunnelList"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+              />
+            </el-select>
+          </div>
         </el-form-item>
       </el-form>
       <template #footer>
@@ -143,12 +146,10 @@ import {addUser, editUser, getUser, getRoleOption} from "@/api/user";
 import {ElMessage, ElMessageBox} from "element-plus";
 import {getTunnelOption} from "@/api/tunnel";
 import {deleteUser, getUserDetail} from "../../api/user";
-import {getSiteDetail} from "@/api/site";
 
 const router = useRouter()
 const title = ref('添加用户')
 const siteId = reactive(router.currentRoute.value.params.siteId)
-const tunnelIndex = ref()
 const username = ref()
 const userIds = ref()
 const showFirst = ref(true)
@@ -161,6 +162,7 @@ const pageInfo = reactive({
 });
 const total = ref(10);
 const isVisited = ref(false);
+const showAdmin = ref(false);
 const form = ref({
   password: '',
   userName: '',
@@ -170,13 +172,27 @@ const form = ref({
   roleId: [],
   tunnelList: [1]
 });
+const validateName = (rule, value) => {
+  const reg = /^[A-Za-z0-9]+$/;
+  return reg.test(value);
+}
 const formRules = ref({
-  userName: [{required: true, message: '请输入用户名', trigger: 'blur'}],
-  password: [{required: true, message: '请输入密码', trigger: 'blur'}]
+  userName: [
+    {required: true, message: '请输入用户名', trigger: ['blur', 'change']},
+    {validator: validateName, message: '请输入英文、数字、英文数字组合的用户名', trigger: ['blur', 'change']}
+  ],
+  password: [{required: true, message: '请输入密码', trigger: ['blur', 'change']}],
+  nickName: [{required: true, message: '请输入昵称', trigger: ['blur', 'change']}],
+  roleId: [{required: true, message: '请选择身份', trigger: ['blur', 'change']}],
+  tunnelList: [{required: true, message: '请选择隧道', trigger: ['blur', 'change']}]
 })
 const radioList = ref([])
 const tunnelList = ref([])
 const multipleTable = ref()
+onMounted(() => {
+  showAdmin.value = localStorage.getItem('userId') == 2;
+})
+
 const getTunnel = () => {
   getTunnelOption(siteId).then(res => {
     if (res.code === 1000) {
@@ -189,9 +205,7 @@ const handleAddUser = () => {
   reset()
   title.value = '添加用户'
   isVisited.value = true
-  getSiteDetail(siteId).then((res) => {
-    currentSite.value = res.data.siteName
-  });
+  currentSite.value = localStorage.getItem('site')
 }
 const handleEditUser = (row) => {
   reset()
@@ -210,7 +224,7 @@ const handleAll = () => {
   multipleTable.value.toggleAllSelection()
 }
 const handleDelete = () => {
-  if (userIds.value ===undefined) {
+  if (userIds.value === undefined) {
     ElMessage.warning('请先选择用户进行删除')
   } else {
     ElMessageBox.confirm(`是否确认删除该用户吗?`, '系统提示', {
@@ -273,22 +287,22 @@ const handleCurrentChange = (val) => {
   pageInfo.pageNum = val
   getInfo()
 }
-const handleSubmit = async (formInstance) => {
+const handleSubmit = (formInstance) => {
   if (!formInstance) return;
-  formInstance.validate(async (valid) => {
+  formInstance.validate((valid) => {
     if (!valid) return;
     const data = {
       siteId: siteId,
       nickName: form.value.nickName,
       password: form.value.password,
       phoneNumber: form.value.phoneNumber,
-      state:form.value.state,
+      state: form.value.state,
       userName: form.value.userName,
       roleIds: [form.value.roleId],
       tunnelList: form.value.tunnelList
     }
     if (title.value === '添加用户') {
-      await addUser(data).then(res => {
+      addUser(data).then(res => {
         if (res.code === 1000) {
           getInfo()
           isVisited.value = false
@@ -298,11 +312,11 @@ const handleSubmit = async (formInstance) => {
         }
       })
     } else {
-      const editData={
-        userId:form.value.userId,
+      const editData = {
+        userId: form.value.userId,
         ...data
       }
-      await editUser(editData).then(res => {
+      editUser(editData).then(res => {
         if (res.code === 1000) {
           getInfo()
           isVisited.value = false
@@ -327,8 +341,72 @@ const handleSelect = async (selection, row) => {
   }
 }
 </script>
+<style lang="scss">
+.user-select {
+  .el-input {
+    min-height: 75px;
+    height: auto !important;
+  }
 
+  .el-select__popper {
+    margin-top: -12px !important;
+    background: #072247 !important;
+    border: 1px solid #0F82AF !important;
+  }
+
+  .el-popper {
+    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 scoped lang="scss">
+:deep(.el-select__tags .el-tag--info) {
+  background-color: #05FEFF;
+  color: #000;
+}
+:deep(.el-form-item__error) {
+  font-size: 35px;
+}
+
 :deep(.el-input .el-input__password) {
   font-size: 60px;
 }
@@ -353,10 +431,6 @@ const handleSelect = async (selection, row) => {
   display: none
 }
 
-:deep(.el-select-dropdown__item:hover) {
-  background-color: #064B66 !important;
-  width: 137px !important;
-}
 
 :deep(.el-radio-group) {
   margin-top: 10px;
@@ -523,20 +597,20 @@ const handleSelect = async (selection, row) => {
             color: #FFFFFF;
           }
 
-          :deep(.el-input__wrapper) {
-            width: 300px;
-            height: 70px;
-            border-radius: 6px;
-            border: 1px solid #05FEFF;
-            background-color: transparent;
-            font-size: 38px;
-
-            .el-input__inner {
-              height: 70px;
-              line-height: 70px;
-              color: #FFFFFF;
-            }
-          }
+          //:deep(.el-input__wrapper) {
+          //  width: 300px;
+          //  height: 70px;
+          //  border-radius: 6px;
+          //  border: 1px solid #05FEFF;
+          //  background-color: transparent;
+          //  font-size: 38px;
+          //
+          //  .el-input__inner {
+          //    height: 70px;
+          //    line-height: 70px;
+          //    color: #FFFFFF;
+          //  }
+          //}
         }
       }