修改

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

@@ -40,69 +40,114 @@
 export default {
   name: "Container",
   components: {},
-  props: ["name", "size", "icon"],
+  // 接收父组件传递过来的原始 itemList 对象
+  props: ['rawItemList','dateData'],
   data() {
     return {
-      itemList: [
-        {
-          unit: "总成本·元/㎡",
-          route: "cost/cost",
-          target: 16,
-          actual: 16,
-          progress: 100
-        },
-        {
-          unit: "原片成本·元/㎡",
-          route: "cost/cost",
-          target: 16,
-          actual: 16,
-          progress: 110
-        },
-        {
-          unit: "加工成本·元/㎡",
-          route: "cost/cost",
-          target: 16,
-          actual: 16,
-          progress: 85
-        },
-        {
-          unit: "原片成品率·%",
-          target: 95,
-          actual: 92,
-          progress: 97
-        },
-        {
-          unit: "投入产出率·%",
-          target: 88,
-          actual: 90,
-          progress: 102
-        }
-      ],
+      // 组件内部用于渲染的数组
+      itemList: [],
       activeIndex: -1
     };
   },
+  // 监听 props 中的 rawItemList 变化
+  watch: {
+    rawItemList: {
+      handler(newVal) {
+        if (newVal) {
+          this.itemList = this.transformData(newVal);
+        }
+      },
+      immediate: true, // 组件初始化时立即执行一次
+      deep: true       // 深度监听对象内部变化
+    }
+  },
   methods: {
+    /**
+     * 核心转换函数：将对象转换为组件需要的数组格式
+     * @param {Object} rawData - 父组件传递的原始数据对象
+     * @returns {Array} - 转换后的数组
+     */
+    transformData(rawData) {
+      // 定义一个映射关系，将后端字段名与前端显示信息关联起来
+      const dataMap = [
+        {
+          key: 'totalCost',
+          unit: '总成本·元/㎡',
+          route: 'cost/cost'
+        },
+        {
+          key: 'rawCost',
+          unit: '原片成本·元/㎡',
+          route: 'cost/cost'
+        },
+        {
+          key: 'processCost',
+          unit: '加工成本·元/㎡',
+          route: 'cost/cost'
+        },
+        {
+          key: 'rawYield',
+          unit: '原片成品率·%',
+          route: '' // 假设这个没有路由
+        },
+        {
+          key: 'ioYield',
+          unit: '投入产出率·%',
+          route: '' // 假设这个没有路由
+        }
+      ];
+
+      // 使用 map 方法将 dataMap 数组转换为组件需要的 itemList 数组
+      return dataMap.map(itemInfo => {
+        const rawItem = rawData[itemInfo.key] || {};
+        // 计算进度百分比，确保不小于0
+        const progress = Math.max(0, Math.round((rawItem.rate || 0)));
+
+        return {
+          unit: itemInfo.unit,
+          route: itemInfo.route,
+          target: rawItem.target || 0,
+          actual: rawItem.real || 0,
+          progress: progress
+        };
+      });
+    },
+
     handleItemClick(index) {
       const currentItem = this.itemList[index];
       console.log(`点击了第${index + 1}个item:`, currentItem.unit);
       this.$emit('item-click', { index, ...currentItem });
       this.activeIndex = index;
       if (currentItem.route) {
-        this.$router.push({ path: currentItem.route });
+        this.$router.push({
+          path: currentItem.route,
+          query: {
+            dateData: this.dateData
+          }
+         });
       }
     },
+
     // 判断颜色的方法
     getColor(index) {
-      const { actual, target } = this.itemList[index];
-      return actual >= target
-        ? "rgba(98, 213, 180, 1)"
-        : "rgba(249, 164, 74, 1)";
+      const { actual, target, progress } = this.itemList[index];
+
+      // 新增条件：如果实际值、目标值和进度都为0，则显示绿色
+      if (actual === 0 && target === 0 && progress === 0) {
+        return "rgba(98, 213, 180, 1)"; // 绿色
+      }
+
+      // 原有的通用判断逻辑
+      return progress >= 100
+        ? "rgba(98, 213, 180, 1)" // 绿色
+        : "rgba(249, 164, 74, 1)"; // 橙色
     }
   }
 };
 </script>
 
 <style scoped lang="scss">
+/* (你的样式代码保持不变) */
 .coreItem {
   display: flex;
   flex-wrap: wrap;