邓洁 : 绑定首页实时数据

src/assets/styles/index.scss

@@ -113,6 +113,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,43 @@
 <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"
+        :wp="info"
-      icon="/images/airInfo/o2-icon.png"
+        icon="o2-icon.png"
-      name="氧气"
+        name="氧气"
-      unit="%"
+        unit="%"
     />
     <item-info
-      :wp="info1"
+        :wp="info1"
-      icon="/images/airInfo/tempture-icon.png"
+        icon="tempture-icon.png"
-      name="温度"
+        name="温度"
-      unit=".c"
+        unit=".c"
     />
     <item-info
-      :wp="info2"
+        :wp="info2"
-      icon="/images/airInfo/water-icon.png"
+        icon="water-icon.png"
-      name="湿度"
+        name="湿度"
-      unit="%"
+        unit="%"
     />
     <item-info
-      :wp="info3"
+        :wp="info3"
-      icon="/images/airInfo/dust-icon.png"
+        icon="dust-icon.png"
-      name="粉尘"
+        name="粉尘"
-      unit="mg/m3"
+        unit="mg/m3"
     />
   </div>
 </template>
 
 <script setup>
-import { ref, reactive } from "vue";
+import {ref, reactive} from "vue";
 import ItemInfo from "./childComps/ItemInfo.vue";
+
 const info = reactive({
   windPId: 0, //编号
   max: 120, //最大值
@@ -77,11 +78,9 @@ setInterval(() => {
   height: 400px;
   top: 1003px;
   right: 72px;
-  background-image: url(/images/airInfo/bg.png);
+  background-image: url(@/assets/images/airInfo/bg.png);
-  background-position: center center;
-  background-size: 100%;
-  background-repeat: no-repeat;
   padding: 43px 20px 30px 32px;
+
   .fan-speed {
     display: flex;
     height: 40px;
@@ -90,16 +89,23 @@ setInterval(() => {
     color: #ffffff;
     line-height: 40px;
     align-items: center;
+
     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,
+    () => params.wp.value,
-  (value) => {
+    (value) => {
-    setValue();
+      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(() => {
@@ -69,30 +76,34 @@ const valueAndUnit = computed(() => params.wp.value + params.unit + "");
   align-items: center;
   width: 100%;
   padding: 20px 0px 14px 0px;
+
   .label {
     display: flex;
     align-items: center;
 
-    img {
+    .wind-icon{
-      height: 34px;
+      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,6 +111,7 @@ const valueAndUnit = computed(() => params.wp.value + params.unit + "");
       border-radius: 10px;
       transition: width 0.5s linear 0s;
     }
+
     #point {
       position: absolute;
       height: inherit;
@@ -109,6 +121,7 @@ const valueAndUnit = computed(() => params.wp.value + params.unit + "");
       left: 1px;
     }
   }
+
   .value-num {
     height: 37px;
     width: 160px;
@@ -119,6 +132,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

@@ -69,7 +69,7 @@ setInterval(() => {
   height: 621px;
   top: 1441px;
   right: 62px;
-  background-image: url(/images/badGasInfo/bg.png);
+  background-image: url(@/assets/images/badGasInfo/bg.png);
   .title {
     width: 128px;
     height: 45px;

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
+              <div :style="{ backgroundImage: 'url(' +getImageUrl(stateIcon1)+')' }" class="state-icon"></div>
-              ><span>{{ state }}</span>
+              状态：{{ 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
+              <div :style="{ backgroundImage: 'url(' +getImageUrl(stateIcon2)+')' }" class="state-icon"></div>
-              ><span></span>
+              状态：{{ 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"
+        ? "blue-state-icon.png"
-        : "/images/fanInfo/red-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"
+        ? "blue-state-icon.png"
-        : "/images/fanInfo/red-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>
@@ -14,12 +129,94 @@ import TransducerItem from "./childComps/TransducerItem.vue";
   position: absolute;
   top: 744px;
   left: 70px;
-  width: 826px;
+  //width: 826px;
   height: 928px;
-  background-image: url(../../../assets/images/transducer/bg.png);
+  background-image: url(@/assets/images/transducer/bg.png);
-  background-position: center center;
+  padding: 0 30px;
-  background-size: 100%;
+
-  background-repeat: no-repeat;
+  .transducer-item {
-  padding: 30px;
+    border-bottom: rgba(107, 163, 237, 0.4) solid 2px;
+    //height: 148px;
+    display: flex;
+    align-items: center;
+    padding: 30px 0 30px 20px;
+
+    & > 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 24px;
+
+        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: 28px;
+        line-height: 37px;
+        padding: 0px 0px 0px 24px;
+
+        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="item" v-for="(item,index) in socketData" :key="item.equipmentId">
-        <div class="name">一号变频器</div>
+        <div class="name">{{index===1?'二':'一'}}号变频器</div>
         <ul>
           <li>
-            <img
+            <div></div>
-              src="../../../assets/images/usedEle/icon-all.png"
+            <span>总用电量：{{ item.electricityConsumptionTotal }}v</span>
-              alt=""
-            /><span>总用电量：2345v</span>
           </li>
           <li>
-            <img
+            <div></div>
-              src="../../../assets/images/usedEle/icon-month.png"
+            <span>月用电量：{{ item.electricityConsumptionMonthly }}v</span>
-              alt=""
-            /><span>总用电量：2345v</span>
           </li>
           <li>
-            <img
+            <div></div>
-              src="../../../assets/images/usedEle/icon-day.png"
+            <span>日用电量：{{ item.electricityConsumptionDay }}v</span>
-              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>
           </li>
         </ul>
       </div>
@@ -53,11 +24,29 @@
 </template>
 
 <script setup>
-import { defineProps } from "vue";
+const props = defineProps({
-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;
+  padding: 21px 62px 35px 62px;
-  background-size: 100%;
+
-  background-repeat: no-repeat;
-  padding: 21px 62px 37px 70px;
   .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,76 @@ 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 {
+            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,77 @@
   <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 props = defineProps({
-const wpList = reactive([
+  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(() => {
+watch(() => props.list, (now, old) => {
-  wpList.forEach((item) => {
+  console.log('风压',now,old)
-    item.value = parseInt(Math.random() * 10) * 10;
+  wpList.value=now
-  });
+}, {deep: true});
-}, 2000);
+// setInterval(() => {
+//   wpList.forEach((item) => {
+//     item.value = parseInt(Math.random() * 10) * 10;
+//   });
+// }, 2000);
 </script>
 
 <style lang="scss" scoped>
@@ -87,9 +83,6 @@ 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;
   .name {
     width: 64px;

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

@@ -1,9 +1,9 @@
 <template>
   <div id="wind-pressure-item">
     <div class="label">
-      <img src="../../../../assets/images/windPressure/icon.png" alt="" /><span
+      <img src="../../../../assets/images/windPressure/icon.png" alt=""/><span
-        >{{ params.wp.windPId }}号风压</span
+    >{{ index }}号风压</span
-      >
+    >
     </div>
     <div class="container" ref="length">
       <div class="value" ref="value"></div>
@@ -16,9 +16,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 +33,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,
+    () => params.wp.value,
-  (value) => {
+    (value) => {
-    setValue();
+      setValue();
-  }
+    }
 );
+
 function setValue() {
   let width = (params.wp.value * length.value.offsetWidth) / params.wp.max;
   value.value.style.width = `${width}px`;
@@ -52,6 +57,7 @@ function setValue() {
     value.value.style.background = "#60DDDE";
   }
 }
+
 let isWaring = computed(() => {
   return params.wp.value >= params.wp.point;
 });
@@ -63,6 +69,15 @@ let isWaring = computed(() => {
   align-items: center;
   width: 100%;
   padding: 20px 0px 14px 33px;
+
+  &:last-child {
+    .label {
+      span {
+        margin: 0 5px 0 14px;
+      }
+    }
+  }
+
   .label {
     display: flex;
     align-items: center;
@@ -71,22 +86,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,6 +114,7 @@ let isWaring = computed(() => {
       border-radius: 10px;
       transition: width 0.5s linear 0s;
     }
+
     #point {
       position: absolute;
       height: inherit;
@@ -103,6 +124,7 @@ let isWaring = computed(() => {
       left: 1px;
     }
   }
+
   .value-num {
     height: 37px;
     font-size: 28px;
@@ -111,6 +133,7 @@ let isWaring = computed(() => {
     line-height: 37px;
     margin-left: 20px;
   }
+
   .warning {
     color: #f53839;
     font-size: 28px;

src/router/index.js

@@ -17,18 +17,18 @@ const routes = [
   {
     path: '/',
     name: 'home',
-    component: () => import('@/views/home/index.vue'),
+    component: () => import('@/views/tunnel/index.vue'),
     meta: {
       title: '首页',
       breadcrumb: true
     }
   },
   {
-    path: '/tunnel',
+    path: '/debug',
-    name: 'tunnel',
+    name: 'debug',
-    component: () => import('@/views/tunnel/index.vue'),
+    component: () => import('@/views/debug/index.vue'),
     meta: {
-      title: 'tunnel',
+      title: 'debug',
       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,8 @@ 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]
+  console.log('weekDay',weekDay)
+  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://192.168.31.175:9000/websocket/equipment/${token}/${serialNumber.value}`
-  let wsUrl = `ws://web-tunnel.feashow.com/api/wstunnel/debug/${token}/${serialNumber.value}`
+  // let wsUrl = `ws://web-tunnel.feashow.com/api/wstunnel/debug/${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/tunnel/index.vue

@@ -26,9 +26,9 @@
           :close-on-click-modal="false"
           :close-on-press-escape="false"
       >
-        <fan-info v-if="showFan"/>
+        <fan-info v-if="showFan" :list="socketData.frequencyState"/>
-        <transducer-list/>
+        <transducer-list :list="socketData.currentVoltage" :feedback="socketData.frequencyFeedback"/>
-        <used-ele/>
+        <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>
@@ -43,8 +43,8 @@
           :close-on-click-modal="false"
           :close-on-press-escape="false"
       >
-        <wind-pressure-list v-if="showFan"/>
+        <wind-pressure-list v-if="showFan" :list="socketData.windPressure"/>
-        <air-info v-if="showFan"/>
+        <air-info v-if="showFan" :list="socketData.sensor"/>
         <bad-gas-info v-if="showFan"/>
       </el-drawer>
       <div v-if="drawerRight" class="right-arrow" @click="closeRight"></div>
@@ -74,8 +74,9 @@ 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 {useAuthStore} from '@/store/userstore.js'
 import {onMounted} from "vue";
+import {getToken} from "@/utils/auth";
+import {useAuthStore} from '@/store/userstore.js'
 
 const authStore = useAuthStore()
 const router = useRouter()
@@ -111,9 +112,23 @@ const tunnelList = ref([
     name: '七号隧道'
   },
 ])
-onMounted(()=>{
+let socket = reactive('')
-  nextTick(()=>{
+const serialNumber = ref('SC00DY00GH00ELBT')
-    showFan.value=true
+let token = getToken();
+let send = {
+  type: "ping"
+}
+const socketData = reactive({
+  currentVoltage: [],
+  frequencyState: [],
+  frequencyFeedback: [],
+  electricityConsumption: [],
+  windPressure: [],
+  sensor: [],
+})
+onMounted(() => {
+  nextTick(() => {
+    showFan.value = true
   })
 })
 const manageSelect = () => {
@@ -135,6 +150,62 @@ const previousBtn = () => {
 const nextBtn = () => {
   tunnelBtn.value.next();
 }
+
+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>