组件之间数据渲染逻辑

web/src/components/Home/Modal/OperationalInfo.vue

@@ -4,33 +4,27 @@
       <div v-for="item in list" :key="item.key" :class="`item ${item.class}`">
         <a-image :preview="false" :src="item.iconPath" :width="50" class="left"> </a-image>
         <div class="right">
-             <span>{{ item.label }}</span>
-             <span>{{ item.value }} {{ item.d }}</span
-              >
-            </div>
-     
-       
+          <span>{{ item.label }}</span>
+          <span>{{ item.value }} {{ item.d }}</span>
+        </div>
       </div>
     </div>
-    
-
-  
   </div>
 </template>
 
 <script>
-import { legacyLogicalPropertiesTransformer } from 'ant-design-vue'
-
 export default {
   name: '',
   props: {
-    propsInfo: {
+    propsTotal: {
       type: Object,
-      default: ()=>({
-        name: '场站111',
-        statusName:'充电'
-      })
-    }
+      default: () => {}
+    },
+    propsInfo: {
+      type: Array,
+      default: () => []
+    },
+  
   },
   data() {
     return {
@@ -94,7 +88,19 @@ export default {
       return this.list.filter((_, index) => index % 2 !== 0).slice(0, 3) // 右列取前3个奇数索引
     }
   },
-  watch: {},
+  watch: {
+    propsTotal: {
+      handler(n) {
+        if (n) {
+          this.list.forEach((item) => {
+            item.value = this.propsTotal[item.key]
+          })
+        }
+      },
+      deep: true,
+      immediate: true
+    }
+  },
   mounted() {},
   methods: {}
 }
@@ -106,14 +112,11 @@ export default {
   display: flex;
   justify-content: center;
   align-items: center;
-  width:95%;
+  width: 95%;
   margin: auto;
-
 }
 
-
-
-.content{
+.content {
   flex-wrap: wrap;
   width: 100%;
   display: flex;
@@ -121,35 +124,30 @@ export default {
   justify-content: space-around;
   height: 100%;
 
-  .item{
-    height:50%;
-  width: 30%;
-  // height: 47px;
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  // justify-content: center;
-  // text-align: center;
+  .item {
+    height: 50%;
+    width: 30%;
+    // height: 47px;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    // justify-content: center;
+    // text-align: center;
 
-  & > span:nth-child(1) {
-    font-size: 12px;
-    margin-bottom: 10px;
+    & > span:nth-child(1) {
+      font-size: 12px;
+      margin-bottom: 10px;
+    }
+    .d {
+      margin-left: 1px;
+      font-size: 12px;
+    }
   }
-  .d {
-    margin-left: 1px;
-    font-size: 12px;
-  }
-  }
-
 
   .right {
- display: flex;
- flex-direction: column;
- margin-left: 20px;
-
+    display: flex;
+    flex-direction: column;
+    margin-left: 20px;
+  }
 }
-}
-
-
-
 </style>