组件之间数据渲染逻辑

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

@@ -2,7 +2,7 @@
   <div class="onLine">
     <div class="content">
       <div v-for="item in list" :key="item.key" :class="`item ${item.class}`">
-        <span>{{ item.value }} {{ item.d }}</span>
+        <span>{{ item.value ? item.value : 0 }} {{ item.d }}</span>
         <span>{{ item.label }}</span>
       </div>
     </div>
@@ -10,11 +10,13 @@
 </template>
 
 <script>
-import { legacyLogicalPropertiesTransformer } from 'ant-design-vue'
-
 export default {
   name: '',
   props: {
+    propsTotal: {
+      type: Object,
+      default: () => {}
+    },
     propsInfo: {
       type: Object,
       default: () => ({
@@ -77,7 +79,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: {}
 }
@@ -89,7 +103,7 @@ export default {
   display: flex;
   justify-content: center;
   align-items: center;
-  width:95%;
+  width: 95%;
   margin: auto;
 }