解决冲突

.drone.yml

@@ -16,7 +16,7 @@ steps:
       - export NODE_MODULES_PATH=`pwd`/node_modules
       - npm config set registry https://registry.npm.taobao.org
       - set NODE_OPTIONS=--openssl-legacy-provider
-      - npm install
+#      - npm install
       - npm run build
       - echo $NODE_MODULES_PATH
       - cp -r dist /app/build/$DRONE_REPO_NAME

src/assets/styles/index.scss

@@ -16,7 +16,16 @@ a {
 html, body, #app, .el-container, .el-aside, .el-main {
   height: 100%;
 }
-
+.tunnel-title {
+  width: 2330px;
+  height: 156px;
+  z-index: 2;
+  position: absolute;
+  top: 0;
+  left: 50%;
+  margin-left: -1165px;
+  background-image: url('../images/topAndDown/sp_tb.png');
+}
 .box-top {
   .manage-btn {
     display: flex;
@@ -49,17 +58,6 @@ html, body, #app, .el-container, .el-aside, .el-main {
     }
   }
 
-  .tunnel-title {
-    width: 2330px;
-    height: 156px;
-    z-index: 2;
-    position: absolute;
-    top: 0;
-    left: 50%;
-    margin-left: -1165px;
-    background-image: url('../images/topAndDown/sp_tb.png');
-  }
-
   .top-right {
     z-index: 2;
     position: absolute;
@@ -113,6 +111,7 @@ html, body, #app, .el-container, .el-aside, .el-main {
   .el-drawer {
     width: 900px !important;
     background-color: transparent;
+    box-shadow: none;
   }
 }
 

src/components/content/airInfo/AirInfo.vue

@@ -1,42 +1,46 @@
 <template>
   <div id="air-info">
     <div class="fan-speed">
-      <img src="/images/airInfo/fan-v-icon.png" alt="" />
+      <img src="@/assets/images/airInfo/fan-v-icon.png" alt=""/>
       <div class="fan-info">
         <div class="input-fan"><span>风速</span><span>进风：13m/s</span></div>
-        <div class="output-fan"><span>风速</span><span>出风：13m/s</span></div>
+        <div class="output-fan"><span>出风：13m/s</span></div>
       </div>
     </div>
     <item-info
-      :wp="info"
-      icon="/images/airInfo/o2-icon.png"
-      name="氧气"
-      unit="%"
+        :wp="info"
+        icon="o2-icon.png"
+        name="氧气"
+        unit="%"
     />
     <item-info
-      :wp="info1"
-      icon="/images/airInfo/tempture-icon.png"
-      name="温度"
-      unit=".c"
+        :wp="info1"
+        icon="tempture-icon.png"
+        name="温度"
+        unit=".c"
     />
     <item-info
-      :wp="info2"
-      icon="/images/airInfo/water-icon.png"
-      name="湿度"
-      unit="%"
+        :wp="info2"
+        icon="water-icon.png"
+        name="湿度"
+        unit="%"
     />
     <item-info
-      :wp="info3"
-      icon="/images/airInfo/dust-icon.png"
-      name="粉尘"
-      unit="mg/m3"
+        :wp="info3"
+        icon="dust-icon.png"
+        name="粉尘"
+        unit="mg/m3"
     />
   </div>
 </template>
 
 <script setup>
-import { ref, reactive } from "vue";
+import {ref, reactive} from "vue";
 import ItemInfo from "./childComps/ItemInfo.vue";
+
+const props = defineProps({
+  list: Array
+});
 const info = reactive({
   windPId: 0, //编号
   max: 120, //最大值
@@ -61,12 +65,17 @@ const info3 = reactive({
   value: 80, //测量值
   point: 88, //阈值
 });
-setInterval(() => {
-  info.value = parseInt(Math.random() * 10) * 10;
-  info1.value = parseInt(Math.random() * 10) * 10;
-  info2.value = parseInt(Math.random() * 10) * 10;
-  info3.value = parseInt(Math.random() * 10) * 10;
-}, 2000);
+watch(() => props.list, (now, old) => {
+  console.log('传感器 ', now, old)
+  // wpList.value=now
+}, {deep: true});
+// setInterval(() => {
+//   info.value = parseInt(Math.random() * 10) * 10;
+//   info1.value = parseInt(Math.random() * 10) * 10;
+//   info2.value = parseInt(Math.random() * 10) * 10;
+//   info3.value = parseInt(Math.random() * 10) * 10;
+// }, 2000);
+
 </script>
 
 <style lang="scss" scoped>
@@ -77,29 +86,42 @@ setInterval(() => {
   height: 400px;
   top: 1003px;
   right: 72px;
-  background-image: url(/images/airInfo/bg.png);
-  background-position: center center;
-  background-size: 100%;
-  background-repeat: no-repeat;
-  padding: 43px 20px 30px 32px;
+  background-image: url(@/assets/images/airInfo/bg.png);
+  padding: 25px 20px 0 21px;
+
   .fan-speed {
     display: flex;
-    height: 40px;
+    //height: 40px;
     font-size: 30px;
     font-family: MicrosoftYaHei;
     color: #ffffff;
     line-height: 40px;
     align-items: center;
+    padding:5px 0 5px 15px;
+    margin-bottom: 25px;
+
+    &:hover {
+      //width: 790px;
+      background: #2E5589;
+      border-radius: 6px;
+    }
+
     img {
       width: 29px;
       height: 34px;
     }
+
     .fan-info {
       flex: 1;
       display: flex;
       justify-content: space-between;
+
       .input-fan {
-        margin: 0px 13px;
+        margin: 0 26px;
+
+        > span:last-child {
+          margin-left: 30px;
+        }
       }
     }
   }

src/components/content/airInfo/childComps/ItemInfo.vue

@@ -1,7 +1,8 @@
 <template>
   <div id="item-info">
     <div class="label">
-      <img :src="icon" alt="" />
+      <div :style="{ backgroundImage: 'url(' +getImageUrl(windIcon)+')' }" class="wind-icon"></div>
+      <!--      <img :src="params.icon" alt="" />-->
       <span>{{ params.name }}</span>
     </div>
     <div class="container" ref="length">
@@ -15,7 +16,8 @@
 </template>
 
 <script setup>
-import { onMounted, watch, defineProps, computed } from "vue";
+import {onMounted, watch, defineProps, computed} from "vue";
+
 const params = defineProps({
   wp: Object,
   icon: String,
@@ -28,32 +30,37 @@ const params = defineProps({
 //   value: 40, //测量值
 //   point: 60, //阈值
 // };
-// const wp = reactive(info);
+const windIcon = reactive(params.icon);
 const length = ref(null);
 const value = ref(null);
 const point = ref(null);
 onMounted(handleOnMounted);
+
 function handleOnMounted() {
   // const  = length.value.offsetWidth);
   setValue();
 }
+
 watch(
-  () => params.wp.value,
-  (value) => {
-    setValue();
-  }
+    () => params.wp.value,
+    (value) => {
+      setValue();
+    }
 );
-function setValue() {
+const getImageUrl = (name) => {
+  return new URL(`../../../../assets/images/airInfo/${name}`, import.meta.url).href
+}
+const setValue = () => {
   let width = (params.wp.value * length.value.offsetWidth) / params.wp.max;
   value.value.style.width = `${width}px`;
   let flag = (params.wp.point * length.value.offsetWidth) / params.wp.max;
   point.value.style.left = `${flag}px`;
   if (width >= flag) {
     value.value.style.background =
-      "linear-gradient(270deg, #FB3838 0%, #E98526 100%)";
+        "linear-gradient(270deg, #FB3838 0%, #E98526 100%)";
   } else {
     value.value.style.background =
-      "linear-gradient(270deg, #38CAFB 0%, #E9D726 100%)";
+        "linear-gradient(270deg, #38CAFB 0%, #E9D726 100%)";
   }
 }
 let isWaring = computed(() => {
@@ -68,31 +75,44 @@ const valueAndUnit = computed(() => params.wp.value + params.unit + "");
   display: flex;
   align-items: center;
   width: 100%;
-  padding: 20px 0px 14px 0px;
+  padding: 5px 14px;
+margin-bottom: 30px;
+  &:hover {
+    background: #2E5589;
+    border-radius: 6px;
+
+    #point {
+      background: #fff !important;
+    }
+  }
+
   .label {
     display: flex;
     align-items: center;
 
-    img {
-      height: 34px;
+    .wind-icon {
+      height: 36px;
       width: 34px;
     }
+
     span {
-      width: 101px;
+      width: 70px;
       height: 37px;
       font-size: 28px;
       font-family: MicrosoftYaHei;
       color: #d6f1fa;
       line-height: 37px;
-      margin: 0px 20px 0px 14px;
+      margin: 0 20px 0 22px;
     }
   }
+
   .container {
     width: 422px;
     height: 24px;
     border-radius: 12px;
     border: 1px solid #0f82af;
     position: relative;
+
     .value {
       height: inherit;
       width: 0px;
@@ -100,15 +120,19 @@ const valueAndUnit = computed(() => params.wp.value + params.unit + "");
       border-radius: 10px;
       transition: width 0.5s linear 0s;
     }
+
     #point {
       position: absolute;
-      height: inherit;
-      width: 10px;
-      background: #60ddde;
-      top: 0px;
+      height: 20px;
+      width: 3px;
+      background: #92D18F;
+      border-radius: 4px;
+      box-shadow: 0 0 10px #92D18F;
+      top: 1px;
       left: 1px;
     }
   }
+
   .value-num {
     height: 37px;
     width: 160px;
@@ -119,6 +143,7 @@ const valueAndUnit = computed(() => params.wp.value + params.unit + "");
     margin-left: 20px;
     text-align: right;
   }
+
   .warning {
     color: #f75f34;
     font-size: 28px;

src/components/content/badGasInfo/BadGasInfo.vue

@@ -18,58 +18,65 @@ import GasInfoItem from "./childComps/GasInfoItem.vue";
 const gasInfo = reactive({
   name: "一氧化硫", //气体名称
   max: 100, //最大值
-  value: 10, //传感器值
+  value: 60, //传感器值
   point: 50, //阈值
 });
 const gasInfo2 = reactive({
   name: "一氧化氮", //气体名称
   max: 100, //最大值
-  value: 10, //传感器值
+  value: 40, //传感器值
   point: 10, //阈值
 });
 const gasInfo3 = reactive({
   name: "一氧化碳", //气体名称
   max: 100, //最大值
-  value: 10, //传感器值
+  value: 15, //传感器值
   point: 70, //阈值
 });
 const gasInfo4 = reactive({
   name: "二氧化碳", //气体名称
   max: 100, //最大值
-  value: 10, //传感器值
+  value: 25, //传感器值
   point: 40, //阈值
 });
 const gasInfo5 = reactive({
   name: "硫化氢", //气体名称
   max: 100, //最大值
-  value: 10, //传感器值
+  value: 30, //传感器值
   point: 20, //阈值
 });
 const gasInfo6 = reactive({
   name: "二氧化硫", //气体名称
   max: 100, //最大值
-  value: 10, //传感器值
+  value: 20, //传感器值
   point: 20, //阈值
 });
-setInterval(() => {
-  gasInfo.value = parseInt(Math.random() * 10) * 10;
-  gasInfo2.value = parseInt(Math.random() * 10) * 10;
-  gasInfo3.value = parseInt(Math.random() * 10) * 10;
-  gasInfo4.value = parseInt(Math.random() * 10) * 10;
-  gasInfo6.value = parseInt(Math.random() * 10) * 10;
-  gasInfo5.value = parseInt(Math.random() * 10) * 10;
-}, 2000);
+const props = defineProps({
+  list: Array
+});
+watch(() => props.list, (now, old) => {
+  console.log('传感器 ', now, old)
+  // wpList.value=now
+}, {deep: true});
+// setInterval(() => {
+//   gasInfo.value = parseInt(Math.random() * 10) * 10;
+//   gasInfo2.value = parseInt(Math.random() * 10) * 10;
+//   gasInfo3.value = parseInt(Math.random() * 10) * 10;
+//   gasInfo4.value = parseInt(Math.random() * 10) * 10;
+//   gasInfo6.value = parseInt(Math.random() * 10) * 10;
+//   gasInfo5.value = parseInt(Math.random() * 10) * 10;
+// }, 2000);
 </script>
 
 <style lang="scss" scoped>
 #bad-gas-info {
   position: absolute;
   z-index: 100;
-  width: 830px;
+  width: 824px;
   height: 621px;
   top: 1441px;
-  right: 62px;
-  background-image: url(/images/badGasInfo/bg.png);
+  right: 72px;
+  background-image: url(@/assets/images/badGasInfo/bg.png);
   .title {
     width: 128px;
     height: 45px;

src/components/content/badGasInfo/childComps/GasInfoItem.vue

@@ -1,6 +1,9 @@
 <template>
   <div id="gas-info-item">
-    <div class="info" ref="container"></div>
+    <div class="point" ref="point">
+      <div class="info" ref="container"></div>
+    </div>
+
     <div class="name">{{ gasInfo.name }}</div>
   </div>
 </template>
@@ -37,7 +40,7 @@ const option = {
         clip: false,
         itemStyle: {
           color: `${
-            params.gasInfo.value > params.gasInfo.point ? "#F94236" : "#7EDFEC"
+              params.gasInfo.value >= params.gasInfo.point ? "#F94236" : "#7EDFEC"
           }`,
         },
       },
@@ -65,7 +68,9 @@ const option = {
       axisLine: {
         lineStyle: {
           width: 25,
-          color: [[1, "#0a4265"]],
+          color: [
+            [1, "#0a4265"]
+          ],
         },
       },
       detail: {
@@ -73,7 +78,7 @@ const option = {
         height: 14,
         fontSize: 26,
         color: `${
-          params.gasInfo.value > params.gasInfo.point ? "#F94236" : "#FFCE23"
+          params.gasInfo.value >= params.gasInfo.point ? "#F94236" : "#FFCE23"
         }`,
         formatter: "Vo{value}%",
       },
@@ -85,6 +90,8 @@ onMounted(handleOnMounted);
 function handleOnMounted() {
   e_info = Echarts.init(container.value);
   e_info.setOption(option);
+  // 设置阈值
+  setPoint();
 }
 watch(
   () => params.gasInfo.value,
@@ -101,13 +108,42 @@ watch(
     e_info.setOption(option);
   }
 );
+
+// 获取阈值dom元素
+const point = ref(null);
+//手写js实现阈值的在表盘的刻度的位置
+function setPoint() {
+  const deg = 360 * (params.gasInfo.point / params.gasInfo.max);
+  point.value.style.transform = `rotate(${deg}deg)`; //旋转指定度数
+  point.value.children[0].style.transform = `rotate(${-deg}deg)`; //注意子元素逆向旋转
+}
 </script>
 
 <style lang="scss" scoped>
 #gas-info-item {
   width: 231px;
-
   text-align: center;
+
+  //旋转定位阈值位于的刻度
+  .point {
+    width: 200px;
+    height: 200px;
+
+    position: relative;
+  }
+  //用伪元素标记阈值
+  .point::after {
+    content: "";
+    display: block;
+    height: 20px;
+    width: 2px;
+    background: #7EDFEC;
+    position: absolute;
+    bottom: 2px;
+    left: 50%;
+    transform: translateX(-50%);
+    box-shadow: 0 0 10px #7EDFEC;
+  }
   .info {
     width: 200px;
     height: 200px;

src/components/content/fanInfo/FanInfo.vue

@@ -9,10 +9,10 @@
         <div class="fan-name">一号风机</div>
         <!-- 功能 -->
         <div class="option-nav">
-          <div class="state">
+          <div class="state " :class="{ 'blue-state': isStart }">
             <div :class="{ stopColor: !isStart }">
-              <span> <img :src="stateIcon1" alt=""/>状态：</span
-              ><span>{{ state }}</span>
+              <div :style="{ backgroundImage: 'url(' +getImageUrl(stateIcon1)+')' }" class="state-icon"></div>
+              状态：{{ state }}
             </div>
             <div class="switch">
               <div
@@ -53,27 +53,24 @@
       </div>
       <div class="fan-item">
         <!-- echarts -->
-
         <div class="echart" ref="info2"></div>
         <!-- 风机名称 -->
         <div class="fan-name">二号风机</div>
         <!-- 功能 -->
         <div class="option-nav">
-          <div class="state">
+          <div class="state" :class="{ 'blue-state': isStart2 }">
             <div :class="{ stopColor: !isStart2 }">
-              <span><img :src="stateIcon2" alt=""/>状态：{{ state2 }}</span
-              ><span></span>
+              <div :style="{ backgroundImage: 'url(' +getImageUrl(stateIcon2)+')' }" class="state-icon"></div>
+              状态：{{ state2 }}
             </div>
             <div class="switch">
               <div
-                  id="auto"
                   :class="{ active: isStart2 }"
                   @click="isStart2 = true"
               >
                 启动
               </div>
               <div
-                  id="stop"
                   :class="{ active: !isStart2 }"
                   @click="isStart2 = false"
               >
@@ -108,6 +105,14 @@
 <script setup>
 import * as echarts from "echarts";
 import {ref, reactive, onMounted, computed, watch} from "vue";
+const props = defineProps({
+  list: Array
+});
+const socketData = ref()
+watch(() => props.list, (now, old) => {
+  // console.log('socketDatawatch', now, old)
+  // socketData.value=now
+}, {deep: true});
 
 onMounted(handleOnMounted);
 
@@ -359,30 +364,62 @@ watch(fan02_option, () => {
 // 一号风机启动停止按钮
 const isStart = ref(true);
 let state = computed(() => {
-  return isStart.value ? "启动" : "停止";
+  return isStart.value ? "运行" : "故障";
+  // return socketData[0].running ? "运行" : "故障";
 });
 const stateIcon1 = computed(() =>
     isStart.value
-        ? "/images/fanInfo/blue-state-icon.png"
-        : "/images/fanInfo/red-state-icon.png"
+        ? "blue-state-icon.png"
+        : "red-state-icon.png"
 );
-const isStart2 = ref(true);
+
+const isStart2 = ref(false);
 let state2 = computed(() => {
-  return isStart2.value ? "启动" : "停止";
+  return isStart2.value ? "运行" : "故障";
 });
 const stateIcon2 = computed(() =>
     isStart2.value
-        ? "/images/fanInfo/blue-state-icon.png"
-        : "/images/fanInfo/red-state-icon.png"
+        ? "blue-state-icon.png"
+        : "red-state-icon.png"
 );
 let is = ref("isInput");
 // 功率是否自动
 let isSAuto1 = ref("false");
 let isSAuto2 = ref("false");
+const getImageUrl = (name) => {
+  return new URL(`../../../assets/images/fanInfo/${name}`, import.meta.url).href
+}
 </script>
 
 <style lang="scss" scoped>
-::v-deep .el-radio__input {
+:deep( .el-radio__input.is-checked + .el-radio__label) {
+  color: #38CAFB;
+}
+
+:deep( .el-radio__input.is-checked .el-radio__inner) {
+  border-color: #062247;
+  background: #38CAFB;
+}
+
+:deep( .el-radio__inner) {
+  border: none;
+  background: none;
+}
+
+:deep(.el-radio__inner::after) {
+  display: none;
+}
+
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+}
+
+input[type="number"] {
+  -moz-appearance: textfield;
+}
+
+:deep( .el-radio__input) {
   width: 24px;
   height: 24px;
   border: 2px solid #38cafb;
@@ -392,7 +429,7 @@ let isSAuto2 = ref("false");
   justify-content: center;
 }
 
-::v-deep .el-radio__label {
+:deep( .el-radio__label) {
   font-size: 28px;
   font-family: MicrosoftYaHei;
   color: #38cafb;
@@ -409,9 +446,6 @@ let isSAuto2 = ref("false");
   padding: 10px;
 
   background-image: url(../../../assets/images/fanInfo/bg.png);
-  background-position: center center;
-  background-size: 100%;
-  background-repeat: no-repeat;
   //clip-path: polygon(0% 0%, 40% 0%, 48% 15%, 100% 15%, 100% 100%, 0% 100%);
   color: #2fb0df;
 
@@ -441,6 +475,7 @@ let isSAuto2 = ref("false");
         margin: 0px 0px 0px 10px;
         position: relative;
       }
+
       .echart::after {
         content: "Hz";
         font-size: 24px;
@@ -470,6 +505,20 @@ let isSAuto2 = ref("false");
         display: flex;
         width: 70%;
 
+        .blue-state {
+          > div:first-child:hover {
+            color: #fff;
+            background-color: #127399;
+            width: 180px;
+            padding-left: 5px;
+            border-radius: 8px;
+
+            > div:first-child {
+              background-image: url('../../../assets/images/fanInfo/white-state-icon.png') !important;
+            }
+          }
+        }
+
         .state {
           flex: 1;
           display: flex;
@@ -479,13 +528,28 @@ let isSAuto2 = ref("false");
           font-family: MicrosoftYaHei;
           color: #38cafb;
           line-height: 35px;
-          gap: 33px;
+          gap: 40px;
+
+          > div:first-child {
+            display: flex;
+            align-items: center;
+            padding-left: 5px;
+
+            > div {
+              margin-right: 10px;
+            }
+          }
 
           img {
             margin-right: 4px;
             transform: translateY(15%);
           }
 
+          .state-icon {
+            width: 26px;
+            height: 26px;
+          }
+
           .switch {
             display: flex;
             width: 160px;
@@ -566,4 +630,15 @@ let isSAuto2 = ref("false");
 .stopColor {
   color: red;
 }
+
+.stopColor:hover {
+  color: #fff;
+  width: 180px;
+  background: #9B2222;
+  border-radius: 8px;
+
+  > div:first-child {
+    background-image: url('../../../assets/images/fanInfo/white-state-icon.png') !important;
+  }
+}
 </style>

src/components/content/transducerList/TransducerList.vue

@@ -1,11 +1,126 @@
 <template>
   <div id="transducer-list">
-    <transducer-item v-for="(item, key) in 6" :isFirst="key === 0" />
+    <div v-for="(item,index) in socketData" :key="item.equipmentId">
+      <div class="transducer-item">
+        <img src="@/assets/images/transducer/sp_icon_dy.png"/>
+        <div class="info">
+          <div class="name-state">
+            <div class="name">{{index===1?'二':'一'}}号变频器</div>
+            <div class="state">
+              <img src="@/assets/images/transducer/greenLight.png"/>
+              <span>正常</span>
+            </div>
+          </div>
+          <div class="one-item">
+            <div>A相电压:{{ item.phaseVoltageA }}V</div>
+            <div>B相电压:{{ item.phaseVoltageB }}V</div>
+            <div>C相电压:{{ item.phaseVoltageC }}V</div>
+          </div>
+        </div>
+      </div>
+      <div class="transducer-item">
+        <img src="@/assets/images/transducer/sp_icon_dl.png" alt=""/>
+        <div class="info">
+          <div class="name-state">
+            <div class="name">{{index===1?'二':'一'}}号变频器</div>
+            <div class="state" v-if="item.phaseCurrentB>'100'">
+              <img src="@/assets/images/transducer/sp_icon_yc.png" alt=""/>
+              <span style="color: red">异常</span>
+            </div>
+            <div class="state" v-else>
+              <img src="@/assets/images/transducer/greenLight.png" alt=""/>
+              <span>正常</span>
+            </div>
+          </div>
+          <div class="one-item">
+            <div>A相电流:{{ item.phaseCurrentA }}A</div>
+            <div :style="{'color':item.phaseCurrentB>'100'?'red':''}">B相电流:{{ item.phaseCurrentB }}A</div>
+            <div>C相电流:{{ item.phaseCurrentC }}A</div>
+          </div>
+        </div>
+      </div>
+      <div class="transducer-item">
+        <img src="@/assets/images/transducer/sp_icon_pbq.png"/>
+        <div class="info">
+          <div class="name-state">
+            <div class="name">{{index===1?'二':'一'}}号变频器</div>
+            <div class="state">
+              <img src="@/assets/images/transducer/greenLight.png"/>
+              <span>正常</span>
+            </div>
+          </div>
+          <div class="other-item frequency">
+            <div>
+              <img
+                  src="@/assets/images/transducer/icon2.png"
+                  alt=""
+              /><span>给定频率:{{ item.frequencySetting }}HZ</span>
+            </div>
+            <div>
+              <img
+                  src="@/assets/images/transducer/icon2.png"
+                  alt=""
+              /><span>反馈频率:{{ item.frequencyFeedback }}HZ</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup>
-import TransducerItem from "./childComps/TransducerItem.vue";
+const props = defineProps({
+  list: Array,
+  feedback: Array,
+});
+const socketData = ref([
+  {
+    equipmentId: 23,
+    phaseCurrentA: '124.01',
+    phaseCurrentB: '124.51',
+    phaseCurrentC: '125.01',
+    phaseVoltageA: '404.01',
+    phaseVoltageB: '404.51',
+    phaseVoltageC: '414.01',
+    frequencySetting: '23',
+    frequencyFeedback: '23'
+  },
+  {
+    equipmentId: 23,
+    phaseCurrentA: '124.01',
+    phaseCurrentB: '124.51',
+    phaseCurrentC: '125.01',
+    phaseVoltageA: '404.01',
+    phaseVoltageB: '404.51',
+    phaseVoltageC: '414.01',
+    frequencySetting: '23',
+    frequencyFeedback: '23'
+  }
+])
+const contactData=ref([])
+watch(() => props.list, (now, old) => {
+  console.log('电流电压',now,contactData.value)
+  let obj={}
+  let arr=[]
+  contactData.value.forEach(contactItem=>{
+    now.forEach(item=>{
+      if(contactItem.equipmentId===item.equipmentId){
+        obj={
+          ...item,
+          frequencySetting: contactItem.frequencySetting,
+          frequencyFeedback: contactItem.frequencyFeedback
+        }
+        arr.push(obj)
+      }
+    })
+  })
+  socketData.value=arr
+}, {deep: true});
+watch(() => props.feedback, (now, old) => {
+  console.log('变频器频率',now)
+  contactData.value=now
+}, {deep: true});
 </script>
 
 <style lang="scss" scoped>
@@ -16,10 +131,92 @@ import TransducerItem from "./childComps/TransducerItem.vue";
   left: 70px;
   width: 826px;
   height: 928px;
-  background-image: url(../../../assets/images/transducer/bg.png);
-  background-position: center center;
-  background-size: 100%;
-  background-repeat: no-repeat;
-  padding: 30px;
+  background-image: url(@/assets/images/transducer/bg.png);
+  padding: 0 30px;
+
+  .transducer-item {
+    border-bottom: rgba(107, 163, 237, 0.4) solid 2px;
+    //height: 148px;
+    display: flex;
+    align-items: center;
+    padding: 30px 0 30px 8px;
+
+    & > img {
+      height: 70px;
+      width: 70px;
+    }
+
+    .info {
+      // border: white solid 1px;
+      //padding: 2px 5px;
+      flex: 1;
+      //height: 100%;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-around;
+
+      .name-state {
+        height: 40px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0 0 0 18px;
+
+        margin-bottom: 16px;
+
+        .name {
+          width: 155px;
+          height: 40px;
+          font-size: 30px;
+          font-weight: bold;
+          color: #38cafb;
+          line-height: 40px;
+        }
+
+        .state {
+          width: 80px;
+          height: 31px;
+          font-size: 24px;
+          font-weight: bold;
+          color: #19d172;
+          line-height: 31px;
+
+          img {
+            height: 20px;
+            margin-right: 5px;
+          }
+        }
+      }
+
+      .one-item,
+      .other-item {
+        //height: 47px;
+        display: flex;
+        justify-content: space-between;
+        color: white;
+        align-items: center;
+        font-size: 26px;
+        line-height: 37px;
+        padding: 0 0 0 18px;
+
+        img {
+          margin-right: 14px;
+        }
+      }
+
+      .frequency {
+        justify-content: flex-start;
+
+        > div:first-child {
+          margin-right: 40px;
+        }
+      }
+    }
+  }
+
+  .isFirst {
+    border: none;
+    height: calc(155px - 30px);
+  }
 }
 </style>

src/components/content/transducerList/childComps/TransducerItem.vue

@@ -1,110 +0,0 @@
-<template>
-  <div class="transducer-item" :class="{ isFirst: isFirst }">
-    <img src="../../../../assets/images/transducer/transducer.png" />
-    <div class="info">
-      <div class="name-state">
-        <div class="name">一号变频器</div>
-        <div class="state">
-          <img src="../../../../assets/images/transducer/greenLight.png" />
-          <span>正常</span>
-        </div>
-      </div>
-      <div class="one-item">
-        <div>A项电压：21V</div>
-        <div>B项电压：21V</div>
-        <div>C项电压：21V</div>
-      </div>
-      <div class="other-item" v-if="false">
-        <div>
-          <img
-            src="../../../../assets/images/transducer/icon2.png"
-            alt=""
-          /><span>给定频率：223HZ</span>
-        </div>
-        <div>
-          <img
-            src="../../../../assets/images/transducer/icon2.png"
-            alt=""
-          /><span>反馈频率：23HZ</span>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, computed, defineProps } from "vue";
-defineProps({
-  isFirst: Boolean,
-});
-</script>
-
-<style lang="scss" scoped>
-.transducer-item {
-  border-top: rgba(107, 163, 237, 0.4) solid 2px;
-  height: 155px;
-  display: flex;
-  align-items: center;
-
-  & > img {
-    height: 70px;
-    width: 70px;
-  }
-  .info {
-    // border: white solid 1px;
-    padding: 2px 5px;
-    flex: 1;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-around;
-    .name-state {
-      height: 40px;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      font-family: MicrosoftYaHei;
-      padding: 0px 20px 0px 20px;
-      .name {
-        width: 155px;
-        height: 40px;
-        font-size: 30px;
-        font-family: MicrosoftYaHei, MicrosoftYaHei;
-        font-weight: bold;
-        color: #38cafb;
-        line-height: 40px;
-      }
-      .state {
-        width: 80px;
-        height: 31px;
-        font-size: 24px;
-        font-family: MicrosoftYaHei, MicrosoftYaHei;
-        font-weight: bold;
-        color: #19d172;
-        line-height: 31px;
-        img {
-          height: 20px;
-          margin-right: 5px;
-        }
-      }
-    }
-    .one-item,
-    .other-item {
-      height: 47px;
-      display: flex;
-      font-family: MicrosoftYaHei;
-      justify-content: space-between;
-      color: white;
-      align-items: center;
-      font-size: 28px;
-      font-family: MicrosoftYaHei, MicrosoftYaHei;
-      line-height: 37px;
-      padding: 0px 0px 0px 24px;
-    }
-  }
-}
-.isFirst {
-  border: none;
-  height: calc(155px - 30px);
-}
-</style>

src/components/content/usedEle/UsedEle.vue

@@ -2,49 +2,20 @@
   <div id="used-ele">
     <div class="title">用电量</div>
     <div class="content">
-      <div class="item">
-        <div class="name">一号变频器</div>
+      <div class="item" v-for="(item,index) in socketData" :key="item.equipmentId">
+        <div class="name">{{index===1?'二':'一'}}号变频器</div>
         <ul>
           <li>
-            <img
-              src="../../../assets/images/usedEle/icon-all.png"
-              alt=""
-            /><span>总用电量：2345v</span>
+            <div></div>
+            <span>总用电量：{{ item.electricityConsumptionTotal }}v</span>
           </li>
           <li>
-            <img
-              src="../../../assets/images/usedEle/icon-month.png"
-              alt=""
-            /><span>总用电量：2345v</span>
+            <div></div>
+            <span>月用电量：{{ item.electricityConsumptionMonthly }}v</span>
           </li>
           <li>
-            <img
-              src="../../../assets/images/usedEle/icon-day.png"
-              alt=""
-            /><span>总用电量：2345v</span>
-          </li>
-        </ul>
-      </div>
-      <div class="item">
-        <div class="name">二号变频器</div>
-        <ul>
-          <li>
-            <img
-              src="../../../assets/images/usedEle/icon-all.png"
-              alt=""
-            /><span>总用电量：2345v</span>
-          </li>
-          <li>
-            <img
-              src="../../../assets/images/usedEle/icon-month.png"
-              alt=""
-            /><span>总用电量：2345v</span>
-          </li>
-          <li>
-            <img
-              src="../../../assets/images/usedEle/icon-day.png"
-              alt=""
-            /><span>总用电量：2345v</span>
+            <div></div>
+            <span>日用电量：{{ item.electricityConsumptionDay }}v</span>
           </li>
         </ul>
       </div>
@@ -53,11 +24,29 @@
 </template>
 
 <script setup>
-import { defineProps } from "vue";
-defineProps({
+const props = defineProps({
   oneTransducer: Object,
   twoTransducer: Object,
+  list: Array
 });
+const socketData = ref([
+  {
+    electricityConsumptionDay: 234,
+    electricityConsumptionMonthly: 345,
+    electricityConsumptionTotal: 235,
+    equipmentId: 22,
+  },
+  {
+    electricityConsumptionDay: 234,
+    electricityConsumptionMonthly: 345,
+    electricityConsumptionTotal: 235,
+    equipmentId:23,
+  }
+])
+watch(() => props.list, (now, old) => {
+  console.log('用电量',now,old)
+  socketData.value = now
+}, {deep: true});
 </script>
 
 <style lang="scss" scoped>
@@ -69,10 +58,8 @@ defineProps({
   top: 1711px;
   left: 68px;
   background-image: url(../../../assets/images/usedEle/bg.png);
-  background-position: center center;
-  background-size: 100%;
-  background-repeat: no-repeat;
-  padding: 21px 62px 37px 70px;
+  padding: 21px 62px 35px 62px;
+
   .title {
     width: 96px;
     height: 42px;
@@ -82,14 +69,17 @@ defineProps({
     color: #38cafb;
     line-height: 42px;
   }
+
   .content {
     //border: white solid 1px;
     height: calc(100% - 30px);
     margin-top: 4px;
     display: flex;
+
     .item {
       flex: 1;
       font-size: 12px;
+
       .name {
         width: 150px;
         height: 40px;
@@ -100,32 +90,77 @@ defineProps({
         line-height: 40px;
         margin: 24px 0px 28px 0px;
       }
+
       ul {
         font-size: 14px;
+
         li {
           display: flex;
           align-items: center;
-          width: 270px;
+          //width: 270px;
           height: 37px;
           font-size: 28px;
           font-family: MicrosoftYaHei;
           color: #cb7c4b;
           line-height: 37px;
           margin-bottom: 25px;
-          img {
+          padding-left: 5px;
+
+          &:hover {
+            cursor: pointer;
+            width: 280px;
+            //height: 46px;
+            background: #2E5589;
+            border-radius: 7px;
+            color: #FBF7F4;
+
+            > div {
+              background-image: url(../../../assets/images/usedEle/white-ele.png);
+            }
+          }
+
+          > div {
             width: 29px;
-            width: 33px;
+            height: 33px;
+            background-image: url(../../../assets/images/usedEle/icon-all.png);
             margin-right: 14px;
           }
+
+          &:nth-child(2) {
+            > div {
+              background-image: url(../../../assets/images/usedEle/icon-month.png);
+            }
+
+            &:hover {
+              > div {
+                background-image: url(../../../assets/images/usedEle/white-ele.png);
+              }
+            }
+          }
+
+          &:nth-child(3) {
+            > div {
+              background-image: url(../../../assets/images/usedEle/icon-day.png);
+            }
+
+            &:hover {
+              > div {
+                background-image: url(../../../assets/images/usedEle/white-ele.png);
+              }
+            }
+          }
         }
+
         & > :nth-child(2) {
           color: #4bcb6b;
         }
+
         & > :nth-child(3) {
           color: #4bcbbc;
         }
       }
     }
+
     & > :nth-child(2) {
       transform: translateX(25px);
     }

src/components/content/windPressure/WindPressureList.vue

@@ -2,81 +2,78 @@
   <div id="wind-pressure">
     <div class="name">风压</div>
     <div class="list">
-      <wind-pressure-item v-for="item in wpList" :wp="item" />
+      <wind-pressure-item v-for="(item,index) in wpList" :wp="item" :index="index+1"/>
     </div>
   </div>
 </template>
 
 <script setup>
 import WindPressureItem from "./childComps/WindPressureItem.vue";
-import { reactive } from "vue";
-const wpList = reactive([
+
+const props = defineProps({
+  list: Array
+});
+const wpList = ref([
   {
-    windPId: 1, //编号
     max: 120, //最大值
     value: 40, //测量值
     point: 60, //阈值
   },
   {
-    windPId: 1, //编号
     max: 120, //最大值
     value: 66, //测量值
     point: 60, //阈值
   },
   {
-    windPId: 2, //编号
     max: 120, //最大值
     value: 70, //测量值
     point: 50, //阈值
   },
   {
-    windPId: 3, //编号
     max: 120, //最大值
     value: 90, //测量值
     point: 60, //阈值
   },
   {
-    windPId: 4, //编号
     max: 120, //最大值
     value: 40, //测量值
     point: 30, //阈值
   },
   {
-    windPId: 5, //编号
     max: 120, //最大值
     value: 30, //测量值
     point: 50, //阈值
   },
   {
-    windPId: 6, //编号
     max: 120, //最大值
     value: 20, //测量值
     point: 30, //阈值
   },
   {
-    windPId: 7, //编号
     max: 120, //最大值
     value: 20, //测量值
     point: 30, //阈值
   },
   {
-    windPId: 8, //编号
     max: 120, //最大值
     value: 120, //测量值
     point: 80, //阈值
   },
   {
-    windPId: 9, //编号
     max: 120, //最大值
     value: 99, //测量值
     point: 70, //阈值
   },
 ]);
-setInterval(() => {
-  wpList.forEach((item) => {
-    item.value = parseInt(Math.random() * 10) * 10;
-  });
-}, 2000);
+watch(() => props.list, (now, old) => {
+  console.log('风压', now, old)
+  wpList.value = now
+}, {deep: true});
+// setInterval(() => {
+//   wpList.forEach((item) => {
+//     item.value = parseInt(Math.random() * 10) * 10;
+//   });
+// }, 2000);
 </script>
 
 <style lang="scss" scoped>
@@ -87,10 +84,8 @@ setInterval(() => {
   top: 185px;
   right: 68px;
   background-image: url(../../../assets/images/windPressure/bg.png);
-  background-position: center center;
-  background-size: 100%;
-  background-repeat: no-repeat;
-  padding-top: 22px;
+  padding: 22px 17px 0 23px;
+
   .name {
     width: 64px;
     height: 42px;
@@ -100,6 +95,7 @@ setInterval(() => {
     color: #38cafb;
     line-height: 42px;
     margin-left: 62px;
+    margin-bottom: 38px;
   }
 }
 </style>

src/components/content/windPressure/childComps/WindPressureItem.vue

@@ -1,9 +1,8 @@
 <template>
-  <div id="wind-pressure-item">
+  <div id="wind-pressure-item" :class="{ abnormal:isWaring }">
     <div class="label">
-      <img src="../../../../assets/images/windPressure/icon.png" alt="" /><span
-        >{{ params.wp.windPId }}号风压</span
-      >
+      <img src="../../../../assets/images/windPressure/icon.png" alt=""/>
+      <span>{{ index }}号风压</span>
     </div>
     <div class="container" ref="length">
       <div class="value" ref="value"></div>
@@ -16,9 +15,11 @@
 </template>
 
 <script setup>
-import { reactive, onMounted, watch, defineProps, computed } from "vue";
+import {reactive, onMounted, watch, defineProps, computed} from "vue";
+
 const params = defineProps({
   wp: Object,
+  index: Number,
 });
 // const info = {
 //   windPId: 0, //编号
@@ -31,16 +32,19 @@ const length = ref(null);
 const value = ref(null);
 const point = ref(null);
 onMounted(handleOnMounted);
+
 function handleOnMounted() {
   // const  = length.value.offsetWidth);
   setValue();
 }
+
 watch(
-  () => params.wp.value,
-  (value) => {
-    setValue();
-  }
+    () => params.wp.value,
+    (value) => {
+      setValue();
+    }
 );
+
 function setValue() {
   let width = (params.wp.value * length.value.offsetWidth) / params.wp.max;
   value.value.style.width = `${width}px`;
@@ -52,17 +56,40 @@ function setValue() {
     value.value.style.background = "#60DDDE";
   }
 }
+
 let isWaring = computed(() => {
   return params.wp.value >= params.wp.point;
 });
 </script>
 
 <style lang="scss" scoped>
+.abnormal:hover{
+  background: #9C5252!important;
+  border-radius: 6px;
+  #point {
+    background: #fff!important;
+  }
+}
 #wind-pressure-item {
   display: flex;
   align-items: center;
   width: 100%;
-  padding: 20px 0px 14px 33px;
+  padding: 6px 38px 7px 10px;
+  margin-bottom: 17px;
+
+  &:hover {
+    background: #2E5589;
+    border-radius: 6px;
+  }
+
+  &:last-child {
+    .label {
+      span {
+        margin: 0 5px 0 14px;
+      }
+    }
+  }
+
   .label {
     display: flex;
     align-items: center;
@@ -71,22 +98,27 @@ let isWaring = computed(() => {
       height: 26px;
       width: 26px;
     }
+
     span {
-      width: 101px;
+      //width: 101px;
+      white-space: nowrap;
       height: 37px;
       font-size: 28px;
       font-family: MicrosoftYaHei;
       color: #d6f1fa;
       line-height: 37px;
-      margin: 0px 20px 0px 14px;
+      margin: 0 20px 0 14px;
+
     }
   }
+
   .container {
     width: 500px;
     height: 24px;
     border-radius: 12px;
     border: 1px solid #0f82af;
     position: relative;
+
     .value {
       height: inherit;
       width: 0px;
@@ -94,15 +126,19 @@ let isWaring = computed(() => {
       border-radius: 10px;
       transition: width 0.5s linear 0s;
     }
+
     #point {
       position: absolute;
-      height: inherit;
-      width: 10px;
+      height: 20px;
       background: #60ddde;
-      top: 0px;
+      width: 3px;
+      border-radius: 4px;
+      box-shadow: 0 0 10px #92D18F;
+      top: 1px;
       left: 1px;
     }
   }
+
   .value-num {
     height: 37px;
     font-size: 28px;
@@ -111,6 +147,7 @@ let isWaring = computed(() => {
     line-height: 37px;
     margin-left: 20px;
   }
+
   .warning {
     color: #f53839;
     font-size: 28px;

src/main.js

@@ -1,23 +1,23 @@
-import { createApp } from 'vue'
-import { createPinia } from 'pinia'
+import { createApp } from "vue";
+import { createPinia } from "pinia";
 
-import App from './App.vue'
-import router from './router'
+import App from "./App.vue";
+import router from "./router";
 
-import ElementPlus from 'element-plus'
-import zhCn from 'element-plus/es/locale/lang/zh-cn'
+import ElementPlus from "element-plus";
+import zhCn from "element-plus/es/locale/lang/zh-cn";
 //导入图标组件
-import * as ElementPlusIconsVue from '@element-plus/icons-vue'
-import 'element-plus/dist/index.css'
+import * as ElementPlusIconsVue from "@element-plus/icons-vue";
+import "element-plus/dist/index.css";
 
-import '@/assets/styles/index.scss'
+import "@/assets/styles/index.scss";
 
-const app = createApp(App)
+const app = createApp(App);
 for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
-  app.component(key, component)
+  app.component(key, component);
 }
-app.use(ElementPlus,{locale: zhCn})
-app.use(createPinia())
-app.use(router)
+app.use(ElementPlus, { locale: zhCn });
+app.use(createPinia());
+app.use(router);
 
-app.mount('#app')
+app.mount("#app");

src/router/index.js

@@ -17,18 +17,27 @@ const routes = [
   {
     path: '/',
     name: 'home',
-    component: () => import('@/views/home/index.vue'),
+    component: () => import('@/views/tunnel/index.vue'),
     meta: {
       title: '首页',
       breadcrumb: true
     }
   },
   {
-    path: '/tunnel',
-    name: 'tunnel',
-    component: () => import('@/views/tunnel/index.vue'),
+    path: '/debug',
+    name: 'debug',
+    component: () => import('@/views/debug/index.vue'),
     meta: {
-      title: 'tunnel',
+      title: 'debug',
+      breadcrumb: true
+    }
+  },
+  {
+    path: '/site',
+    name: 'site',
+    component: () => import('@/views/site/index.vue'),
+    meta: {
+      title: 'site',
       breadcrumb: true
     }
   }

src/utils/date.js

@@ -1,6 +1,6 @@
 export const dateFormat = (time = new Date().getTime()) => { //YYYY年MM月DD日 星期d
   const _time = time.toString().length > 10 ? time : time * 1000
-  const weekList = ["一", "二", "三", "四", "五", "六", "日"];
+  const weekList = ["日","一", "二", "三", "四", "五", "六" ];
   const date = new Date(_time);
   const Y = date.getFullYear();
   const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1);
@@ -9,7 +9,7 @@ export const dateFormat = (time = new Date().getTime()) => { //YYYY年MM月DD日
   const m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes());
   const s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
   let weekDay = new Date().getDay();
-  const week= weekList[weekDay - 1]
+  const week= weekList[weekDay]
   // const strDate = `${Y}/${M}/${D} ${h}:${m}:${s}`
   return `${Y}年${M}月${D}日 星期${week}`;
 }

src/views/debug/index.vue

@@ -10,16 +10,16 @@
       <el-button type="primary" @click="handleClear" style="float: right">清除</el-button>
       <div class="socket-box">
         <div v-for="item in dataList" ref="child">
-          <div v-if="item.type == 3">
+          <div v-if="item.typeCmd == 3">
             <span style="color: #007bff">server send:</span>
             <div>{{ item.cmd }}</div>
           </div>
-          <div v-if="item.type == 4">
+          <div v-if="item.typeCmd == 4">
             <span style="color: #28a745"> server receive:</span>
 
             <div>{{ item.cmd }}</div>
           </div>
-          <div v-if="item.type == 1">
+          <div v-if="item.typeCmd == 1">
             <span style="color: red">server send:</span>
             <div>{{ item.cmd }}</div>
           </div>
@@ -65,16 +65,17 @@ watch(
 let socket = reactive('')
 const handleSend = () => {
   let data = {
-    type: 1,
+    type: "send",
+    typeCmd: 1,
     cmd: number.value
   }
-  if(number.value==='')return;
+  if (number.value === '') return;
   socket.send(JSON.stringify(data))
   dataList.value.push(data)
 }
 const initWebSocket = () => {
-  // let wsUrl = `ws://192.168.31.175:9000/debug/${token}/${serialNumber.value}`
-  let wsUrl = `ws://web-tunnel.feashow.com/api/wstunnel/debug/${token}/${serialNumber.value}`
+  // let wsUrl = `ws://192.168.31.175:9000/websocket/equipment/${token}/${serialNumber.value}`
+  let wsUrl = `ws://web-tunnel.feashow.com/api/wstunnel/websocket/equipment/${token}/${serialNumber.value}`
   console.log(wsUrl)
   socket = new WebSocket(wsUrl)
   //连接发生错误的回调方法
@@ -94,6 +95,9 @@ const initWebSocket = () => {
   socket.onclose = function () {
     console.log("ws连接关闭");
   }
+  setInterval(() => {
+    socket.send(JSON.stringify(send))
+  }, 30000)
 }
 const closeSocket = () => {
   socket.close();

src/views/login/index.vue

@@ -1,95 +1,112 @@
 <template>
   <div class="login-box" id="login-box">
     <el-form
-        :model="loginForm"
-        ref="formInstance"
-        :rules="rules"
-        label-width="65px"
+      :model="loginForm"
+      ref="formInstance"
+      :rules="rules"
+      label-width="65px"
     >
       <h3>FateVerse</h3>
       <el-form-item prop="username" label="账号">
-        <el-input v-model="loginForm.username" :prefix-icon="User" ></el-input>
+        <el-input v-model="loginForm.username" :prefix-icon="User"></el-input>
       </el-form-item>
       <el-form-item prop="password" label="密码">
-        <el-input v-model="loginForm.password" type="password" :prefix-icon="Lock" ></el-input>
+        <el-input
+          v-model="loginForm.password"
+          type="password"
+          :prefix-icon="Lock"
+        ></el-input>
       </el-form-item>
-      <el-form-item prop="code" label="验证码" >
+      <el-form-item prop="code" label="验证码">
         <div class="code">
-          <el-input v-model="loginForm.code" :prefix-icon="key" @keyup.enter.native="handleLogin(formInstance)"></el-input>
-          <img :src="codeImg" alt="" @click="getCode">
+          <el-input
+            v-model="loginForm.code"
+            :prefix-icon="key"
+            @keyup.enter.native="handleLogin(formInstance)"
+          ></el-input>
+          <img :src="codeImg" alt="" @click="getCode" />
         </div>
       </el-form-item>
       <el-form-item>
-        <el-button @click="handleLogin(formInstance)"  type="primary">登录</el-button>
+        <el-button @click="handleLogin(formInstance)" type="primary"
+          >登录</el-button
+        >
       </el-form-item>
     </el-form>
   </div>
 </template>
 
 <script setup>
-import { useRouter } from 'vue-router';
-import { getCodeImg } from '../../api/login';
-import { useAuthStore } from '@/store/userstore'
-import { ElLoading } from 'element-plus'
-import { User,Lock, Key } from '@element-plus/icons-vue'
-const router = useRouter()
-const authStore = useAuthStore()
+import { useRouter } from "vue-router";
+import { getCodeImg } from "../../api/login";
+import { useAuthStore } from "@/store/userstore";
+import { ElLoading } from "element-plus";
+import { User, Lock, Key } from "@element-plus/icons-vue";
+const router = useRouter();
+const authStore = useAuthStore();
 const loginForm = reactive({
-  username: 'admin',
-  password: '123456',
-  code: '',
-  uuid: ''
-})
-const codeImg = ref('')
-const formInstance = ref()
-const rules =  reactive({
-  username: [
-    { required: true, message: '请输入账户名', trigger: 'blur' },
-  ],
-  password: [
-    { required: true, message: '请输入密码', trigger: 'blur' },
-  ],
-  code: [
-    { required: true, message: '请输入验证码', trigger: 'blur' },
-  ]
-})
+  username: "admin",
+  password: "123456",
+  code: "",
+  uuid: "",
+});
+const codeImg = ref("");
+const formInstance = ref();
+const rules = reactive({
+  username: [{ required: true, message: "请输入账户名", trigger: "blur" }],
+  password: [{ required: true, message: "请输入密码", trigger: "blur" }],
+  code: [{ required: true, message: "请输入验证码", trigger: "blur" }],
+});
 
 //获取二维码
 const getCode = () => {
-  getCodeImg().then(res=>{
-    loginForm.uuid = res.data.uuid
-    codeImg.value = 'data:image/gif;base64,' + res.data.img
-  })
-}
+  getCodeImg().then((res) => {
+    loginForm.uuid = res.data.uuid;
+    codeImg.value = "data:image/gif;base64," + res.data.img;
+  });
+};
 
 const handleLogin = (instance) => {
-  if(!instance) return
-  instance.validate( async (valid, fields)=>{
-    if (!valid) return
+  if (!instance) return;
+  instance.validate(async (valid, fields) => {
+    if (!valid) return;
     // 发送请求
-    await authStore.userLogin(loginForm).then(res=>{
-      if(res) {
-        ElLoading.service({text: '正在加载系统资源',background: '#409eff',lock: true})
-        router.push('/')
-      }else {
-        getCode()
+    await authStore.userLogin(loginForm).then((res) => {
+      if (res) {
+        ElLoading.service({
+          text: "正在加载系统资源",
+          background: "#409eff",
+          lock: true,
+        });
+        router.push("/");
+      } else {
+        getCode();
       }
-    })
-  })
-}
+    });
+  });
+};
 
-getCode()
+getCode();
 
 onBeforeUnmount(() => {
-  ElLoading.service({text: '正在加载系统资源',background: '#409eff',lock: true}).close()
-})
+  ElLoading.service({
+    text: "正在加载系统资源",
+    background: "#409eff",
+    lock: true,
+  }).close();
+});
 </script>
 
 <style lang="scss" scoped>
 .login-box {
   height: 100%;
-  background-color: #4158D0;
-  background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
+  background-color: #4158d0;
+  background-image: linear-gradient(
+    43deg,
+    #4158d0 0%,
+    #c850c0 46%,
+    #ffcc70 100%
+  );
   display: flex;
   justify-content: center;
   align-items: center;

src/views/site/index.vue

@@ -0,0 +1,550 @@
+<template>
+  <div class="site-bgc">
+    <div class="box-top">
+      <div class="back-tunnel" @click="router.push('/')">
+        <div class="back-icon"></div>
+        <span>返回</span>
+      </div>
+      <div class="tunnel-title"></div>
+      <div class="all-del-btn">
+        <div class="all-btn">
+          全选
+        </div>
+        <div class="all-btn del-btn">
+          删除
+        </div>
+      </div>
+    </div>
+    <div class="box-content">
+      <div class="site-box" v-for="item in siteList">
+        <div class="top">
+          <span>站点名称：{{ item.siteName }}</span>
+          <div @click.stop="handleClickSite"><span :class="{ clickColor: isClick }"></span></div>
+        </div>
+        <div class="box-center">
+          <div class="left-img"></div>
+          <div class="right-tunnel">
+            <div>隧道数量：{{ item.num }}条</div>
+            <div>
+              <div class="tunnel">
+                <div>{{ item.sortTunnel }}</div>
+                <div class="tunnel-icon"></div>
+                <div>施工长度{{ item.constructionLength }}米</div>
+                <div>实现长度{{ item.implementationLength }}公里</div>
+              </div>
+              <div class="tunnel-add">
+                <div class="add-icon"></div>
+              </div>
+            </div>
+            <div class="more">
+              更多
+              <div class="icon"></div>
+            </div>
+          </div>
+        </div>
+        <div class="edit-btn" @click="isVisited=true">
+          <div class="edit-icon"></div>
+          <div>站点编辑</div>
+        </div>
+      </div>
+      <div class="site-box add-box" @click="isVisited=true">
+        <div class="add-icon"></div>
+        <div style="cursor: pointer">添加站点</div>
+      </div>
+    </div>
+    <el-dialog v-model="isVisited" width="958px">
+      <div class="siteId">
+        <span>站点id：{{ siteId }}</span>
+        <span>站点管理员id：{{ siteManageId }}</span>
+      </div>
+      <el-form :model="form" :label-position="right" label-width="116px">
+        <el-form-item label="站点地址">
+          <el-input v-model="form.address" placeholder="请输入站点地址"/>
+        </el-form-item>
+        <el-form-item label="站点名称">
+          <el-input v-model="form.name" placeholder="请输入站点名称"/>
+        </el-form-item>
+        <el-form-item label="站点描述">
+          <el-input v-model="form.desc" type="textarea" :autosize="{ minRows: 3, maxRows: 6 }" placeholder="请输入站点信息"/>
+        </el-form-item>
+        <el-form-item label="备注">
+          <el-input v-model="form.remark" placeholder="请输入备注"/>
+        </el-form-item>
+      </el-form>
+      <div class="btns">
+        <div class="cancel-btn" @click="isVisited=false">
+          取消
+        </div>
+        <div class="sure-btn">
+          确定
+        </div>
+      </div>
+    </el-dialog>
+    <div class="pagination">
+      <span>首页</span>
+      <el-pagination background :page-size="6" :total="50" prev-text="上一页" next-text="下一页" layout="prev, pager, next"/>
+      <span>尾页</span>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const router = useRouter()
+const siteList = ref([
+  {
+    siteName: '松江站',
+    num: 1,
+    sortTunnel: '一号隧道',
+    constructionLength: 500,
+    implementationLength: 10
+  },
+  {
+    siteName: '松江站',
+    num: 1,
+    sortTunnel: '一号隧道',
+    constructionLength: 500,
+    implementationLength: 10
+  },
+  {
+    siteName: '松江站',
+    num: 1,
+    sortTunnel: '一号隧道',
+    constructionLength: 500,
+    implementationLength: 10
+  },
+  {
+    siteName: '松江站',
+    num: 1,
+    sortTunnel: '一号隧道',
+    constructionLength: 500,
+    implementationLength: 10
+  },
+  {
+    siteName: '松江站',
+    num: 1,
+    sortTunnel: '一号隧道',
+    constructionLength: 500,
+    implementationLength: 10
+  },
+])
+const siteId = ref('iu78686')
+const siteManageId = ref('j98h0')
+const isClick = ref(false);
+const isVisited = ref(false);
+const form = ref({
+  address: '',
+  name: '',
+  desc: '',
+  remark: ''
+});
+const handleClickSite = () => {
+  isClick.value = !isClick.value
+}
+</script>
+
+<style scoped lang="scss">
+.siteId {
+  font-size: 30px;
+  color: #FFFFFF;
+  margin-bottom: 48px;
+
+  > span:first-child {
+    margin-right: 70px;
+  }
+}
+
+.btns {
+  display: flex;
+  justify-content: space-around;
+  margin-top: 80px;
+
+  .cancel-btn {
+    cursor: pointer;
+    width: 190px;
+    height: 60px;
+    border-radius: 11px;
+    border: 2px solid #08B7B8;
+    color: #08B7B8;
+    line-height: 60px;
+    padding-left: 67px;
+    font-size: 28px;
+    box-sizing: border-box;
+  }
+
+  .sure-btn {
+    cursor: pointer;
+    width: 190px;
+    height: 60px;
+    line-height: 60px;
+    background: #08B7B8;
+    border-radius: 11px;
+    color: #FFFFFF;
+    font-size: 28px;
+    padding-left: 67px;
+  }
+}
+
+:deep(.el-form-item) {
+  margin-top: 40px;
+}
+
+:deep(.el-form-item__label) {
+  font-size: 26px;
+  font-family: MicrosoftYaHei;
+  color: #FFFFFF;
+  margin-right: 12px;
+  line-height: 50px;
+}
+
+:deep(.el-input) {
+  height: 50px;
+
+  .el-input__wrapper {
+    background-color: transparent;
+    border: 1px solid #08B7B8;
+
+    .el-input__inner {
+      color: #fff;
+      font-size: 26px;
+    }
+  }
+}
+
+:deep(.el-textarea__inner) {
+  background-color: transparent;
+  border: 1px solid #08B7B8;
+  //min-height: 50px!important;
+  color: #fff;
+  font-size: 26px;
+}
+
+:deep(.el-dialog) {
+  border: 2px solid #05FEFF;
+  background: #0D6578;
+  border-radius: 20px;
+  padding: 30px 40px;
+  box-sizing: border-box;
+  margin: 588px auto 0 auto;
+
+  .el-dialog__header {
+    padding: 0;
+    display: none;
+  }
+}
+
+.site-bgc {
+  padding: 85px 0 0 0;
+  width: 100%;
+  height: 100%;
+  background-image: url('@/assets/images/site/zdgl_dbj.png');
+
+  .box-top {
+    display: flex;
+    justify-content: space-between;
+
+    .back-tunnel {
+      cursor: pointer;
+      margin: 0 0 0 70px;
+      display: flex;
+      align-items: center;
+      width: 168px;
+      height: 60px;
+      line-height: 60px;
+      border-radius: 11px;
+      border: 2px solid #08B7B8;
+      font-size: 28px;
+      color: #FFFFFF;
+
+      .back-icon {
+        margin-right: 20px;
+        margin-left: 33px;
+        width: 26px;
+        height: 26px;
+        background-image: url('@/assets/images/site/zdgl_icon_fh.png');
+      }
+    }
+
+    .all-del-btn {
+      display: flex;
+
+      .del-btn {
+        width: 168px;
+        height: 60px;
+        background: #08B7B8;
+        border-radius: 11px;
+      }
+
+      .all-btn {
+        cursor: pointer;
+        padding-left: 56px;
+        width: 168px;
+        height: 60px;
+        line-height: 60px;
+        border-radius: 11px;
+        border: 2px solid #08B7B8;
+        color: #FFFFFF;
+        font-size: 28px;
+
+        &:last-child {
+          margin-left: 40px;
+          margin-right: 70px;
+        }
+      }
+    }
+  }
+
+  .box-content {
+    display: flex;
+    flex-wrap: wrap;
+    padding-left: 100px;
+    padding-right: 100px;
+    justify-content: space-between;
+
+    .add-box {
+      cursor: pointer;
+      font-weight: bold;
+      color: #60DDDE;
+      font-size: 32px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+
+      .add-icon {
+        margin-top: 160px;
+        margin-bottom: 107px;
+        width: 320px;
+        height: 320px;
+        background-image: url('@/assets/images/site/zdgl_icon_tjz.png');
+      }
+    }
+
+    .site-box {
+      margin-top: 122px;
+      //margin-right: 122px;
+      padding: 40px 50px;
+      width: 1158px;
+      height: 718px;
+      background-image: url('@/assets/images/site/zdgl_bj.png');
+      //box-sizing: border-box;
+      position: relative;
+
+      &:nth-child(3) {
+        margin-right: 0;
+      }
+
+      .top {
+        display: flex;
+        justify-content: space-between;
+        font-size: 32px;
+        font-weight: bold;
+        color: #FFFFFF;
+        line-height: 42px;
+
+        > div:last-child {
+          cursor: pointer;
+          width: 30px;
+          height: 30px;
+          border: 2px solid #05FEFF;
+          border-radius: 25px;
+          position: relative;
+
+          .clickColor {
+            position: absolute;
+            top: 5.5px;
+            left: 5.5px;
+            width: 16px;
+            height: 16px;
+            background-color: #05FEFF;
+            border-radius: 25px;
+          }
+        }
+      }
+
+      .box-center {
+        display: flex;
+
+        .left-img {
+          margin-top: 50px;
+          margin-right: 60px;
+          width: 480px;
+          height: 350px;
+          background-image: url('@/assets/images/site/zdgl_zd.png');
+        }
+
+        .right-tunnel {
+          position: relative;
+
+          > div:first-child {
+            font-size: 32px;
+            font-family: MicrosoftYaHei;
+            color: #FFFFFF;
+            line-height: 42px;
+          }
+
+          > div:nth-child(2) {
+            display: flex;
+            margin-top: 29px;
+
+            .tunnel {
+              width: 256px;
+              height: 310px;
+              background: #3FBED1;
+              border-radius: 16px;
+              display: flex;
+              flex-direction: column;
+              //justify-content: center;
+              align-items: center;
+              color: #FFFFFF;
+
+              > div:first-child {
+                width: 112px;
+                height: 37px;
+                font-size: 28px;
+                line-height: 37px;
+                margin-top: 20px;
+              }
+
+              > div:nth-child(3) {
+                margin-bottom: 18px;
+              }
+
+              > div:nth-child(3), > div:nth-child(4) {
+                font-size: 26px;
+              }
+
+              .tunnel-icon {
+                width: 62px;
+                height: 64px;
+                background: #FFFFFF;
+                margin: 30px 0 40px 0;
+              }
+            }
+
+            .tunnel-add {
+              margin-left: 20px;
+              width: 256px;
+              height: 310px;
+              background: #1891A3;
+              border-radius: 16px;
+              display: flex;
+              justify-content: center;
+              align-items: center;
+
+              .add-icon {
+                cursor: pointer;
+                width: 112px;
+                height: 112px;
+                background-image: url('@/assets/images/site/zdgl_icon_tjz.png');
+              }
+            }
+          }
+
+          .more {
+            margin-top: 20px;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            position: absolute;
+            right: 0;
+            font-weight: bold;
+            color: #35C5CC;
+            font-size: 28px;
+
+            .icon {
+              margin-left: 19px;
+              transform: rotate(180deg);
+              width: 26px;
+              height: 26px;
+              background-image: url('@/assets/images/site/zdgl_icon_fh.png');
+            }
+          }
+        }
+      }
+
+      .edit-btn {
+        width: 174px;
+        cursor: pointer;
+        margin-top: 147px;
+        display: flex;
+        align-items: center;
+        font-size: 32px;
+        color: #60DDDE;
+        line-height: 42px;
+        margin-left: 492px;
+
+        .edit-icon {
+          width: 30px;
+          height: 32px;
+          background-image: url('@/assets/images/site/zdgl_icon_bj.png');
+          margin-right: 16px;
+        }
+      }
+    }
+
+
+  }
+
+  .pagination {
+    margin-top: 120px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: #60DDDE;
+    font-size: 32px;
+
+    > span:first-child {
+      margin-right: 60px;
+    }
+
+    > span:last-child {
+      margin-left: 71px;
+    }
+
+    :deep(.btn-prev) {
+      background-color: transparent;
+      font-size: 32px;
+      font-family: MicrosoftYaHei, MicrosoftYaHei;
+      font-weight: bold;
+      color: #60DDDE;
+      margin-right: 20px;
+    }
+
+    :deep(.btn-next) {
+      background-color: transparent;
+      font-size: 32px;
+      font-family: MicrosoftYaHei, MicrosoftYaHei;
+      font-weight: bold;
+      color: #60DDDE;
+      margin-left: 30px;
+    }
+
+    :deep(.el-pager li.is-active ) {
+      width: 60px;
+      height: 60px;
+      background: #60DDDE;
+      border-radius: 50%;
+      color: #071F40;
+      font-size: 32px;
+      font-family: MicrosoftYaHei, MicrosoftYaHei;
+      font-weight: bold;
+    }
+
+    :deep(.el-pager li) {
+      margin-left: 40px;
+    }
+
+    :deep(.el-pager li:not(.is-active) ) {
+      width: 60px;
+      height: 60px;
+      border: 1px solid #60DDDE;
+      border-radius: 50%;
+      background-color: transparent;
+      font-size: 32px;
+      font-family: MicrosoftYaHei, MicrosoftYaHei;
+      font-weight: bold;
+      color: #60DDDE;
+    }
+  }
+}
+
+</style>

src/views/tunnel/index.vue

@@ -20,9 +20,9 @@
     <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">
-        <fan-info />
-        <transducer-list />
-        <used-ele />
+        <fan-info v-if="showFan" :list="socketData.frequencyState" />
+        <transducer-list :list="socketData.currentVoltage" :feedback="socketData.frequencyFeedback" />
+        <used-ele :list="socketData.electricityConsumption" />
       </el-drawer>
       <div v-if="drawerLeft" class="left-arrow" @click="closeLeft"></div>
       <div v-else class="shrink-left" @click="closeLeft"></div>
@@ -30,9 +30,9 @@
     <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 />
-        <air-info />
-        <bad-gas-info />
+        <wind-pressure-list v-if="showFan" :list="socketData.windPressure" />
+        <air-info v-if="showFan" :list="socketData.sensor" />
+        <bad-gas-info v-if="showFan" :list="socketData.sensor" />
       </el-drawer>
       <div v-if="drawerRight" class="right-arrow" @click="closeRight"></div>
       <div v-else class="shrink-right" @click="closeRight"></div>
@@ -63,8 +63,9 @@ 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 ManageLength from "@/components/manageLength/index.vue";
 import { dateFormat } from "@/utils/date.js";
+import { onMounted } from "vue";
+import { getToken } from "@/utils/auth";
 import { useAuthStore } from '@/store/userstore.js'
 
 const authStore = useAuthStore()
@@ -100,7 +101,32 @@ const tunnelList = ref([
     name: '七号隧道'
   },
 ])
-const manageSelect = () => {
+let socket = reactive('')
+const serialNumber = ref('SC00DY00GH00ELBT')
+let token = getToken();
+let send = {
+  type: "ping"
+}
+const socketData = reactive({
+  currentVoltage: [],
+  frequencyState: [],
+  frequencyFeedback: [],
+  electricityConsumption: [],
+  windPressure: [],
+  sensor: [],
+})
+onMounted(() => {
+  nextTick(() => {
+    showFan.value = true
+  })
+})
+const manageSelect = (index) => {
+  console.log('首页点击-', index)
+  if (index === 0) {
+    console.log('站点管理=====-----')
+    router.push('/site')
+  }
+
   // getInfo();
 };
 const closeLeft = () => {
@@ -118,9 +144,63 @@ const previousBtn = () => {
 }
 const nextBtn = () => {
   tunnelBtn.value.next();
-  // tunnelList.value.push(tunnelList.value.shift())
-  // console.log('tunnelList.value', tunnelList.value)
 }
+
+const initWebSocket = () => {
+  // let wsUrl = `ws://192.168.31.175:9000/websocket/equipment/${token}/${serialNumber.value}`
+  let wsUrl = `ws://web-tunnel.feashow.com/api/wstunnel/websocket/equipment/${token}/${serialNumber.value}`
+  console.log(wsUrl)
+  socket = new WebSocket(wsUrl)
+  //连接发生错误的回调方法
+  socket.onerror = function () {
+    console.log("ws连接发生错误");
+  };
+  //连接成功建立的回调方法
+  socket.onopen = function () {
+    console.log("ws连接成功");
+  }
+  //接收到消息的回调方法
+  socket.onmessage = function (event) {
+    console.log("服务器返回的信息: ", JSON.parse(event.data));
+    const type = JSON.parse(event.data).type
+    const data = JSON.parse(event.data).data
+    if (type === 'equipment') {
+      data.forEach((item) => {
+        if (item.typeKey === 'currentVoltage') {
+          console.log('电流电压')
+          socketData.currentVoltage = data
+        } else if (item.typeKey === 'frequencyFeedback') {
+          console.log('变频器频率')
+          socketData.frequencyFeedback = data
+        } else if (item.typeKey === 'frequencyState') {
+          console.log('风机状态')
+          socketData.frequencyState = data
+        } else if (item.typeKey === 'electricityConsumption') {
+          console.log('用电量')
+          socketData.electricityConsumption = data
+        } else if (item.typeKey === 'windPressure') {
+          console.log('风压风压')
+          socketData.windPressure = data
+        } else if (item.typeKey === 'sensor') {
+          console.log('传感器==========?')
+          socketData.sensor = data
+        }
+      })
+    }
+  }
+  //连接关闭的回调方法
+  socket.onclose = function () {
+    console.log("ws连接关闭");
+    // initWebSocket()
+  }
+  setInterval(() => {
+    socket.send(JSON.stringify(send))
+  }, 30000)
+}
+const closeSocket = () => {
+  socket.close();
+}
+initWebSocket()
 </script>
 
 <style lang="scss" scoped></style>