邓洁 : 绑定首页实时数据

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