修改

src/views/home/components/purchase-Item.vue

@@ -54,50 +54,37 @@
 export default {
   name: "Container",
   components: {},
-  props: ["finance",'dateData'],
+  props: {
+    finance: {
+      type: Object,
+      default: () => ({}) // 明确props默认值为空对象
+    },
+    dateData: {
+      type: Object,
+      default: () => ({})
+    }
+  },
   data() {
     return {
-      // itemList: [
-      //   {
-      //     name: "营业收入·万元",
-      //     targetValue: 16,
-      //     currentValue: 17.2, // 大于目标值（绿色）
-      //     progress: 107.5,
-      //     route: 'operatingRevenue'
-      //   },
-      //   {
-      //     name: "经营性利润·万元",
-      //     targetValue: 16,
-      //     currentValue: 16, // 等于目标值（绿色）
-      //     progress: 100,
-      //     route: 'profitAnalysis'
-      //   },
-      //   {
-      //     name: "利润总额·万元",
-      //     targetValue: 16,
-      //     currentValue: 14.8, // 小于目标值（黄色）
-      //     progress: 92.5,
-      //     route: 'profitAnalysis'
-      //   },
-      //   {
-      //     name: "毛利率·%",
-      //     targetValue: 16,
-      //     currentValue: 15.5, // 小于目标值（黄色）
-      //     progress: 96.875,
-      //     route: 'profitAnalysis'
-      //   }
-      // ]
+      // 关键修复1：初始化itemList为空数组（必选，否则初始状态下v-for报错且数据无法响应式更新）
+      itemList: []
     };
   },
   watch: {
     finance: {
       handler(newVal) {
-        if (newVal) {
+        // 关键修复2：增强数据判断，避免空值/无效值触发错误
+        if (newVal && Object.keys(newVal).length > 0) {
+          // 转换数据并赋值给itemList（响应式更新）
           this.itemList = this.transformData(newVal);
+          console.log('finance更新，itemList已同步', this.itemList);
+        } else {
+          // 当finance为空时，重置itemList为空数组
+          this.itemList = [];
         }
       },
-      immediate: true,
-      deep: true
+      immediate: true, // 组件挂载时立即执行，初始化数据
+      deep: true       // 深度监听finance对象内部属性变化
     }
   },
   methods: {
@@ -112,13 +99,18 @@ export default {
 
       // 遍历映射关系，转换数据
       return Mapping.map(mappingItem => {
+        // 关键修复3：兜底更严谨，避免rawData[mappingItem.key]不存在导致报错
         const data = rawData[mappingItem.key] || { rate: 0, real: 0, target: 0 };
+        // 额外兜底：避免data中的属性为undefined
+        const target = data.target || 0;
+        const real = data.real || 0;
+        const rate = data.rate || 0;
 
         return {
           name: mappingItem.name,
-          targetValue: data.target,
-          currentValue: data.real,
-          progress: Math.round(data.rate), // 将小数率转换为百分比并四舍五入
+          targetValue: target,
+          currentValue: real,
+          progress: Math.round(rate), // 将小数率转换为百分比并四舍五入
           route: mappingItem.route
         };
       });
@@ -128,9 +120,10 @@ export default {
         this.$router.push({
           path: route,
           query: {
-            dateData: this.dateData
+            // 关键修复4：dateData是对象，需序列化后传递（否则路由query无法正常接收对象）
+            dateData: JSON.stringify(this.dateData)
           }
-         });
+        });
       }
     }
   }
@@ -254,7 +247,7 @@ export default {
 
   /* 进度条 - 实际值≥目标值（绿色） */
   .bar-exceed {
-    background:rgba(98, 213, 180, 1) !important;
+    background: rgba(98, 213, 180, 1) !important;
     opacity: 1 !important;
   }