Merge pull request 'dengjie' (#216) from dengjie into dev

Reviewed-on: http://git.feashow.cn/clay/tunnel-cloud-web/pulls/216
2024-01-07 13:47:50 +00:00
parent c730283e78 275db768e2
commit 8f310554d8
13 changed files with 512 additions and 438 deletions
--- 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);
+  }
+}
--- 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;
--- 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;

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

--- 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;
  }
 }
--- 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',
--- 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;
 }
--- 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;
--- 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;
--- 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;
+          //  }
+          //}
        }
      }