修改

src/views/home/components/top-item.vue

@@ -47,46 +47,63 @@
 export default {
   name: "Container",
   components: {},
-  props: ["name", "size", "icon"],
+  props: ["sale", "dateData"],
   data() {
     return {
-      itemList: [
-        {
-          unit: "单价·元/㎡",
-          targetValue: 16,
-          currentValue: 14.5, // 小于目标值（黄色）
-          progress: 90,
-          path: "/cost/cost"
-        },
-        {
-          unit: "净价·元/㎡",
-          targetValue: 16,
-          currentValue: 16, // 等于目标值（默认灰色）
-          progress: 100,
-          path: "/cost/cost"
-        },
-        {
-          unit: "销量·万㎡",
-          targetValue: 20,
-          currentValue: 22, // 大于目标值（绿色）
-          progress: 110,
-          path: "PSIAnal"
-        },
-        {
-          unit: "双镀面板·万㎡",
-          targetValue: 15,
-          currentValue: 13.8, // 小于目标值（黄色）
-          progress: 92,
-          path: "PSIAnal"
-        }
-      ]
+      itemList: [] // 初始化为空数组，等待数据加载
     };
   },
+  watch: {
+    // 监听 sale 数据变化，实时更新 itemList
+    sale: {
+      handler(newVal) {
+        if (newVal) {
+          this.itemList = this.transformData(newVal);
+        }
+      },
+      immediate: true, // 组件初始化时立即执行一次
+      deep: true       // 深度监听对象内部属性变化
+    }
+  },
   methods: {
+    /**
+     * 核心转换函数：将 sale 对象转换为 itemList 数组
+     * @param {Object} rawData - 原始的 sale 数据对象
+     * @returns {Array} - 转换后的 itemList 数组
+     */
+    transformData(rawData) {
+      // 定义销售指标映射关系（键名、显示名称、单位、路由路径）
+      const saleMapping = [
+        { key: 'unitPrice', unit: '单价·元/㎡', path: '/cost/cost' },
+        { key: 'netPrice', unit: '净价·元/㎡', path: '/cost/cost' },
+        { key: 'sales', unit: '销量·万㎡', path: 'PSIAnal' },
+        { key: 'panel', unit: '双镀面板·万㎡', path: 'PSIAnal' }
+      ];
+
+      // 遍历映射关系，转换数据
+      return saleMapping.map(mappingItem => {
+        // 获取对应指标的数据，若不存在则使用默认值
+        const indicatorData = rawData[mappingItem.key] || { rate: 0, real: 0, target: 0 };
+
+        return {
+          unit: mappingItem.unit,
+          targetValue: indicatorData.target,  // 目标值
+          currentValue: indicatorData.real,   // 实际值
+          progress: Math.round(indicatorData.rate * 100), // 完成率（百分比，四舍五入）
+          path: mappingItem.path              // 路由路径
+        };
+      });
+    },
+
     // 处理路由跳转
     handleRouter(obj) {
       if (obj.path) {
-        this.$router.push({ path: obj.path });
+        this.$router.push({
+          path: obj.path,
+          query: {
+            dateData:this.dateData
+          }
+         });
       }
     }
   }