diff --git a/src/api/cockpit.js b/src/api/cockpit.js
index fa468c9a..a955e6b8 100644
--- a/src/api/cockpit.js
+++ b/src/api/cockpit.js
@@ -60,3 +60,11 @@ export function getSalesRevenueData(data) {
   });
 }
 
+export function getOperateCockpit(data) {
+  return request({
+    url: "/lb/operate-cockpit/get",
+    method: "post",
+    data: data,
+  });
+}
+
diff --git a/src/assets/icons/svg/orderReturn.svg b/src/assets/icons/svg/orderReturn.svg
new file mode 100644
index 00000000..8a7c6e12
--- /dev/null
+++ b/src/assets/icons/svg/orderReturn.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1763973887412" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5048" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M538.622846 950.291255c257.534448-171.658591 308.738643-462.119963-75.504648-453.027887l0 225.514173L121.893676 381.529483 463.118198 40.281425l0 220.701564c218.259956-5.67321 470.02705 96.270601 470.02705 280.69596C933.146271 813.119105 768.337691 874.762047 538.622846 950.291255" fill="#1296db" p-id="5049"></path></svg>
\ No newline at end of file
diff --git a/src/views/home/components/CostsBottomBar.vue b/src/views/home/components/CostsBottomBar.vue
index faf81045..1cc3e3b7 100644
--- a/src/views/home/components/CostsBottomBar.vue
+++ b/src/views/home/components/CostsBottomBar.vue
@@ -10,10 +10,10 @@
         </div>
       </div>
     </div>
-    <div class="lineBottom" style="height: 214px; width: 100%">
-      <!-- 传递 series 数据给子组件，添加 key 确保数据更新时重新渲染 -->
-      <coreLineChart style="height: 214px; width: 680px" :chart-series="chartSeries"
-        :key="JSON.stringify(chartSeries)" />
+    <div class="lineBottom" style="height: 213px; width: 100%">
+      <!-- 传递动态生成的 series 数据和 xAxis 数据给子组件 -->
+      <coreLineChart style="height: 213px; width: 680px" :chart-series="chartSeries" :x-axis-data="xAxisData"
+        :dateData="dateData" />
     </div>
   </div>
 </template>
@@ -25,80 +25,97 @@ import * as echarts from 'echarts';
 export default {
   name: "Container",
   components: { coreLineChart },
-  props: ["name", "size", "icon"],
+  props: {
+    line: { // 接收父组件传递的 cost 数据对象
+      type: Object,
+      default: () => ({})
+    },
+    dateData: {
+      type: Object,
+      default: () => ({})
+    }
+  },
   data() {
     return {
-      activeButton: undefined,
-      itemList: [
-        { unit: "单价·元/m²", targetValue: 16, currentValue: 14.5, progress: 90 },
-        { unit: "净价·元/m²", targetValue: 16, currentValue: 15.2, progress: 85 },
-        { unit: "销量·万m²", targetValue: 20, currentValue: 16, progress: 80 },
-        { unit: "双镀面板·万m²", targetValue: 15, currentValue: 13.8, progress: 92 },
-      ],
-      // 定义要传递的 series 数据（对应图例的三个费用类型）
-      chartSeries: [
-        {
+      // 图表样式配置项，可以抽离出来方便管理
+      chartConfig: {
+        manageCost: {
           name: '管理费用',
-          type: 'line',
-          stack: 'Total',
-          symbol: 'circle',
-          lineStyle: { color: 'rgba(11, 88, 255, .5)' },
-          itemStyle: {
-            color: 'rgba(11, 88, 255, .5)',
-            borderColor: 'rgba(11, 88, 255, 1)',
-            borderWidth: 1
-          },
-          areaStyle: {
-            opacity: 0.5,
-            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-              { offset: 0, color: 'rgba(11, 88, 255, .4)' },
-              { offset: 1, color: 'rgba(18, 255, 245, 0)' },
-            ]),
-          },
-          data: [140, 232, 101, 264, 90, 340] // 与 xAxis 数据长度一致（6个月份）
+          lineColor: 'rgba(11, 88, 255, .5)',
+          itemColor: 'rgba(11, 88, 255, .5)',
+          borderColor: 'rgba(11, 88, 255, 1)',
+          areaGradient: [
+            { offset: 0, color: 'rgba(11, 88, 255, .4)' },
+            { offset: 1, color: 'rgba(18, 255, 245, 0)' },
+          ]
         },
-        {
+        saleCost: {
           name: '销售费用',
-          type: 'line',
-          stack: 'Total',
-          symbol: 'circle',
-          lineStyle: { color: 'rgba(54, 181, 138, .5)' },
-          itemStyle: {
-            color: 'rgba(54, 181, 138, .5)',
-            borderColor: 'rgba(54, 181, 138, 1)',
-            borderWidth: 1
-          },
-          areaStyle: {
-            opacity: 0.5,
-            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-              { offset: 0, color: 'rgba(54, 181, 138, .4)' },
-              { offset: 1, color: 'rgba(18, 255, 245, 0)' },
-            ]),
-          },
-          data: [120, 282, 111, 234, 220, 340]
+          lineColor: 'rgba(54, 181, 138, .5)',
+          itemColor: 'rgba(54, 181, 138, .5)',
+          borderColor: 'rgba(54, 181, 138, 1)',
+          areaGradient: [
+            { offset: 0, color: 'rgba(54, 181, 138, .4)' },
+            { offset: 1, color: 'rgba(18, 255, 245, 0)' },
+          ]
         },
-        {
+        financeCost: {
           name: '财务费用',
+          lineColor: 'rgba(255, 132, 0, .5)',
+          itemColor: 'rgba(255, 132, 0, .5)',
+          borderColor: 'rgba(255, 132, 0, 1)',
+          areaGradient: [
+            { offset: 0, color: 'rgba(255, 132, 0, .4)' },
+            { offset: 1, color: 'rgba(18, 255, 245, 0)' },
+          ]
+        }
+      }
+    };
+  },
+  computed: {
+    // 动态生成 X 轴数据
+    xAxisData() {
+      // 从 cost.line 中获取任意一个有数据的键的 keys 作为 X 轴
+      const lineData = this.line || {};
+      const firstKey = Object.keys(lineData)[0];
+      return firstKey ? Object.keys(lineData[firstKey]) : [];
+    },
+    // 动态生成 series 数据
+    chartSeries() {
+      const lineData = this.line || {};
+      const xAxisKeys = this.xAxisData;
+
+      // 如果没有 X 轴数据，则返回空数组
+      if (xAxisKeys.length === 0) {
+        return [];
+      }
+
+      // 遍历配置项，生成 series
+      return Object.keys(this.chartConfig).map(key => {
+        const config = this.chartConfig[key];
+        // 确保数据顺序和 X 轴一致
+        const dataValues = xAxisKeys.map(date => lineData[key] ? lineData[key][date] : 0);
+
+        return {
+          name: config.name,
           type: 'line',
           stack: 'Total',
           symbol: 'circle',
-          lineStyle: { color: 'rgba(255, 132, 0, .5)' },
+          symbolSize: 6,
+          lineStyle: { color: config.lineColor },
           itemStyle: {
-            color: 'rgba(255, 132, 0, .5)',
-            borderColor: 'rgba(255, 132, 0, 1)',
+            color: config.itemColor,
+            borderColor: config.borderColor,
             borderWidth: 1
           },
           areaStyle: {
             opacity: 0.5,
-            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-              { offset: 0, color: 'rgba(255, 132, 0, .4)' },
-              { offset: 1, color: 'rgba(18, 255, 245, 0)' },
-            ]),
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, config.areaGradient),
           },
-          data: [90, 150, 180, 120, 250, 280]
-        }
-      ]
-    };
+          data: dataValues
+        };
+      });
+    }
   },
   methods: {}
 };
diff --git a/src/views/home/components/Header.vue b/src/views/home/components/Header.vue
index 230e1805..ee23fd44 100644
--- a/src/views/home/components/Header.vue
+++ b/src/views/home/components/Header.vue
@@ -40,6 +40,7 @@
 </template>
 
 <script>
+import moment from 'moment'
 export default {
   name: 'Header',
   props: {
diff --git a/src/views/home/components/bottomMiddleContainer.vue b/src/views/home/components/bottomMiddleContainer.vue
index b109dad0..33dc3022 100644
--- a/src/views/home/components/bottomMiddleContainer.vue
+++ b/src/views/home/components/bottomMiddleContainer.vue
@@ -6,6 +6,8 @@
         <span class="title-text">
           {{ name }}
         </span>
+        <svg-icon @click="handleShow" v-if="tableShow" class="title-icon" style="position: absolute;right: 20;" :icon-class="'orderReturn'" />
+
       </div>
     </div>
     <div class="container-body">
@@ -21,12 +23,16 @@ export default {
   name: 'Container',
   components: {},
   // eslint-disable-next-line vue/require-prop-types
-  props: ['name', 'size', 'icon', 'nameTwo'],
+  props: ['name', 'size', 'icon', 'nameTwo','tableShow'],
   data() {
     return {};
   },
   computed: {},
-  methods: {},
+  methods: {
+    handleShow() {
+      this.$emit('handleShow',false)
+    }
+  },
 };
 </script>
 
@@ -83,7 +89,7 @@ export default {
     position: absolute;
     top: 0;
     left: 0;
-    width: 100%;
+    width: 50%;
     height: 100%;
     border: 1px solid;
     border-image: linear-gradient(277deg, rgba(255, 255, 255, 0), rgba(92, 140, 255, 1)) 1 1;
diff --git a/src/views/home/components/core-bottom-leftItem.vue b/src/views/home/components/core-bottom-leftItem.vue
index af30d575..2b1c3764 100644
--- a/src/views/home/components/core-bottom-leftItem.vue
+++ b/src/views/home/components/core-bottom-leftItem.vue
@@ -42,40 +42,48 @@
 export default {
   name: "Container",
   components: {},
-  props: ["name", "size", "icon"],
+  props: ["purchase"],
   data() {
     return {
-      progress: 90,
-      itemList: [
-        {
-          unit: "本月增效额·万元",
-          targetValue: 16,
-          currentValue: 14.5,
-          progress: 90
-        },
-        {
-          unit: "累计增效额·万元",
-          targetValue: 16,
-          currentValue: 15.2,
-          progress: 85
-        },
-        // {
-        //   unit: "销量·万㎡",
-        //   targetValue: 20,
-        //   currentValue: 16,
-        //   progress: 80
-        // },
-        // {
-        //   unit: "双镀面板·万㎡",
-        //   targetValue: 15,
-        //   currentValue: 13.8,
-        //   progress: 92
-        // }
-      ]
+      itemList: []
     };
   },
-  computed: {},
+  watch: {
+    purchase: {
+      handler(newVal) {
+        if (newVal) {
+          this.itemList = this.transformData(newVal);
+        }
+      },
+      immediate: true,
+      deep: true
+    }
+  },
   methods: {
+    transformData(rawData) {
+      const dataMap = [
+        {
+          key: 'increase',
+          unit: '本月增效额·万元'
+        },
+        {
+          key: 'totalIncrease',
+          unit: '累计增效额·万元'
+        }
+      ];
+
+      return dataMap.map(itemInfo => {
+        const rawItem = rawData[itemInfo.key] || {};
+        const progress = Math.max(0, Math.round((rawItem.rate || 0)));
+
+        return {
+          unit: itemInfo.unit,
+          targetValue: rawItem.target || 0,
+          currentValue: rawItem.real || 0,
+          progress: progress
+        };
+      });
+    },
     getTargetColor(currentValue, targetValue) {
       return currentValue >= targetValue
         ? "rgba(98, 213, 180, 1)"
diff --git a/src/views/home/components/coreBottomBar.vue b/src/views/home/components/coreBottomBar.vue
index 69aa69ef..37bdc46a 100644
--- a/src/views/home/components/coreBottomBar.vue
+++ b/src/views/home/components/coreBottomBar.vue
@@ -29,8 +29,8 @@
     </div>
     <div class="lineBottom" style="height: 219px; width: 100%">
       <!-- 传递当前选中的 series 数据给子组件，key 确保数据更新时重新渲染 -->
-      <coreLineChart style="height: 219px; width: 500px" :chart-series="currentSeries"
-        :key="activeButton + JSON.stringify(currentSeries)" />
+      <coreLineChart style="height: 219px; width: 500px" :chart-series="currentSeries" :x-axis-data="xAxisData"
+        :dateData="dateData" :key="activeButton + JSON.stringify(currentSeries)" />
     </div>
   </div>
 </template>
@@ -42,204 +42,102 @@ import * as echarts from 'echarts';
 export default {
   name: "Container",
   components: { coreLineChart },
-  props: ["name", "size", "icon"],
+  props: {
+    line: { // 接收父组件传递的 sale 数据对象
+      type: Object,
+      default: () => ({})
+    },
+    dateData: { // 接收父组件传递的 sale 数据对象
+      type: Object,
+      default: () => ({})
+    }
+  },
   data() {
     return {
       activeButton: 0,
-      itemList: [
-        { unit: "单价·元/m²", targetValue: 16, currentValue: 14.5, progress: 90 },
-        { unit: "净价·元/m²", targetValue: 16, currentValue: 15.2, progress: 85 },
-        { unit: "销量·万m²", targetValue: 20, currentValue: 16, progress: 80 },
-        { unit: "双镀面板·万m²", targetValue: 15, currentValue: 13.8, progress: 92 },
-      ],
-      // 4个按钮对应的 series 数据（目标+实际两条线）
-      seriesMap: [
-        // 0: 单价（元/m²）
-        [
-          {
-            name: '目标',
-            type: 'line',
-            stack: 'Total',
-            symbol: 'circle',
-            symbolSize: 6,
-            lineStyle: { color: 'rgba(91, 230, 190, 1)', width: 2 },
-            itemStyle: {
-              color: 'rgba(91, 230, 190, 1)',
-              borderColor: 2
-            },
-            areaStyle: {
-              opacity: 0.3,
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 0, color: 'rgba(91, 230, 190, 0.4)' },
-                { offset: 1, color: 'rgba(91, 230, 190, 0)' },
-              ]),
-            },
-            data: [16, 16.2, 15.8, 16.1, 15.9, 16] // 6-11月目标数据
-          },
-          {
-            name: '实际',
-            type: 'line',
-            stack: 'Total',
-            symbol: 'circle',
-            symbolSize: 6,
-            lineStyle: { color: 'rgba(255, 132, 0, 1)', width: 2 },
-            itemStyle: {
-              color: 'rgba(255, 132, 0, 1)',
-              borderColor: 'rgba(255, 132, 0, 1)',
-              borderWidth: 2,
-            },
-            areaStyle: {
-              opacity: 0.3,
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 0, color: 'rgba(255, 132, 0, 0.4)' },
-                { offset: 1, color: 'rgba(255, 132, 0, 0)' },
-              ]),
-            },
-            data: [14.5, 14.8, 15.2, 14.6, 15, 14.7] // 6-11月实际数据
-          }
-        ],
-        // 1: 净价（元/m²）
-        [
-          {
-            name: '目标',
-            type: 'line',
-            stack: 'Total',
-            symbol: 'circle',
-            symbolSize: 6,
-            lineStyle: { color: 'rgba(91, 230, 190, 1)', width: 2 },
-            itemStyle: {
-              color: 'rgba(91, 230, 190, 1)',
-
-              borderWidth: 2
-            },
-            areaStyle: {
-              opacity: 0.3,
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 0, color: 'rgba(91, 230, 190, 0.4)' },
-                { offset: 1, color: 'rgba(91, 230, 190, 0)' },
-              ]),
-            },
-            data: [16, 16.1, 15.9, 16.2, 16, 16.1]
-          },
-          {
-            name: '实际',
-            type: 'line',
-            stack: 'Total',
-            symbol: 'circle',
-            symbolSize: 6,
-            lineStyle: { color: 'rgba(255, 132, 0, 1)', width: 2 },
-            itemStyle: {
-              color: 'rgba(255, 132, 0, 1)',
-              //
-              borderWidth: 2
-            },
-            areaStyle: {
-              opacity: 0.3,
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 0, color: 'rgba(255, 132, 0, 0.4)' },
-                { offset: 1, color: 'rgba(255, 132, 0, 0)' },
-              ]),
-            },
-            data: [15.2, 15.5, 15.3, 15.6, 15.4, 15.5]
-          }
-        ],
-        // 2: 销量（万m²）
-        [
-          {
-            name: '目标',
-            type: 'line',
-            stack: 'Total',
-            symbol: 'circle',
-            symbolSize: 6,
-            lineStyle: { color: 'rgba(91, 230, 190, 1)', width: 2 },
-            itemStyle: {
-              color: 'rgba(91, 230, 190, 1)',
-
-              borderWidth: 2
-            },
-            areaStyle: {
-              opacity: 0.3,
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 0, color: 'rgba(91, 230, 190, 0.4)' },
-                { offset: 1, color: 'rgba(91, 230, 190, 0)' },
-              ]),
-            },
-            data: [20, 20.5, 19.8, 21, 20.2, 20.8]
-          },
-          {
-            name: '实际',
-            type: 'line',
-            stack: 'Total',
-            symbol: 'circle',
-            symbolSize: 6,
-            lineStyle: { color: 'rgba(255, 132, 0, 1)', width: 2 },
-            itemStyle: {
-              color: 'rgba(255, 132, 0, 1)',
-
-              borderWidth: 2
-            },
-            areaStyle: {
-              opacity: 0.3,
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 0, color: 'rgba(255, 132, 0, 0.4)' },
-                { offset: 1, color: 'rgba(255, 132, 0, 0)' },
-              ]),
-            },
-            data: [16, 16.8, 17.2, 16.5, 17, 17.5]
-          }
-        ],
-        // 3: 双镀产品（万m²）
-        [
-          {
-            name: '目标',
-            type: 'line',
-            stack: 'Total',
-            symbol: 'circle',
-            symbolSize: 6,
-            lineStyle: { color: 'rgba(91, 230, 190, 1)', width: 2 },
-            itemStyle: {
-              color: 'rgba(91, 230, 190, 1)',
-
-              borderWidth: 2
-            },
-            areaStyle: {
-              opacity: 0.3,
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 0, color: 'rgba(91, 230, 190, 0.4)' },
-                { offset: 1, color: 'rgba(91, 230, 190, 0)' },
-              ]),
-            },
-            data: [15, 15.2, 14.8, 15.5, 15.1, 15.3]
-          },
-          {
-            name: '实际',
-            type: 'line',
-            stack: 'Total',
-            symbol: 'circle',
-            symbolSize: 6,
-            lineStyle: { color: 'rgba(255, 132, 0, 1)', width: 2 },
-            itemStyle: {
-              color: 'rgba(255, 132, 0, 1)',
-
-              borderWidth: 2
-            },
-            areaStyle: {
-              opacity: 0.3,
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 0, color: 'rgba(255, 132, 0, 0.4)' },
-                { offset: 1, color: 'rgba(255, 132, 0, 0)' },
-              ]),
-            },
-            data: [13.8, 14.2, 14, 14.5, 14.3, 14.6]
-          }
-        ]
+      // 定义按钮与 line 数据中 key 的映射关系
+      buttonToDataKey: [
+        '单价',
+        '净价',
+        '销量',
+        '双镀面板' // 注意：数据中的 key 是“双镀面板”，按钮显示的是“双镀产品”
       ]
     };
   },
   computed: {
+    // 动态生成 X 轴数据
+    xAxisData() {
+      const lineData = this.line || {};
+      // 获取当前激活按钮对应的数据
+      const currentDataKey = this.buttonToDataKey[this.activeButton];
+      const currentIndicatorData = lineData[currentDataKey];
+
+      // 使用 'target' 的键作为 x 轴，如果 'target' 不存在，则使用 'real' 的键
+      if (currentIndicatorData && currentIndicatorData.target) {
+        return Object.keys(currentIndicatorData.target);
+      } else if (currentIndicatorData && currentIndicatorData.real) {
+        return Object.keys(currentIndicatorData.real);
+      }
+      return [];
+    },
     // 根据激活按钮动态返回对应 series 数据
     currentSeries() {
-      return this.seriesMap[this.activeButton] || [];
+      const lineData = this.line || {};
+      const currentDataKey = this.buttonToDataKey[this.activeButton];
+      const chartData = lineData[currentDataKey];
+
+      if (!chartData) {
+        return [];
+      }
+
+      // 提取目标和实际数据的值，并确保顺序与 X 轴一致
+      const xAxisKeys = this.xAxisData;
+      const targetDataValues = xAxisKeys.map(date => chartData.target ? chartData.target[date] : 0);
+      const realDataValues = xAxisKeys.map(date => chartData.real ? chartData.real[date] : 0);
+
+      return [
+        {
+          name: '目标',
+          type: 'line',
+          stack: 'Total',
+          symbol: 'circle',
+          symbolSize: 6,
+          lineStyle: { color: 'rgba(91, 230, 190, 1)', width: 2 },
+          itemStyle: {
+            color: 'rgba(91, 230, 190, 1)',
+            borderColor: 2
+          },
+          areaStyle: {
+            opacity: 0.3,
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              { offset: 0, color: 'rgba(91, 230, 190, 0.4)' },
+              { offset: 1, color: 'rgba(91, 230, 190, 0)' },
+            ]),
+          },
+          data: targetDataValues
+        },
+        {
+          name: '实际',
+          type: 'line',
+          stack: 'Total',
+          symbol: 'circle',
+          symbolSize: 6,
+          lineStyle: { color: 'rgba(255, 132, 0, 1)', width: 2 },
+          itemStyle: {
+            color: 'rgba(255, 132, 0, 1)',
+            borderColor: 'rgba(255, 132, 0, 1)',
+            borderWidth: 2,
+          },
+          areaStyle: {
+            opacity: 0.3,
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              { offset: 0, color: 'rgba(255, 132, 0, 0.4)' },
+              { offset: 1, color: 'rgba(255, 132, 0, 0)' },
+            ]),
+          },
+          data: realDataValues
+        }
+      ];
     }
   }
 };
diff --git a/src/views/home/components/coreBottomLeft.vue b/src/views/home/components/coreBottomLeft.vue
index 472c0119..0eb961a4 100644
--- a/src/views/home/components/coreBottomLeft.vue
+++ b/src/views/home/components/coreBottomLeft.vue
@@ -3,7 +3,7 @@
     <Container name="采购重点指标" nameTwo="存货重点指标" icon="cockpitItemIcon" size="bottomBasic">
       <!-- 1. 移除 .kpi-content 的固定高度，改为自适应 -->
       <div class="bottom-left-content" style="display: flex;gap: 9px;padding: 14px 16px;">
-        <coreBottomLeftItem>
+        <coreBottomLeftItem :purchase="purchase">
         </coreBottomLeftItem>
         <div class="content-right" style="background: #F9FCFF;padding: 15px 12px;">
           <base-table style="height: 180px;width: 260px;" :page="1" :limit="10" :show-index="true" :beilv="1"
@@ -25,11 +25,11 @@ export default {
   components: { Container, coreBottomLeftItem, baseTable },
   // mixins: [resize],
   props: {
-    leftEqInfoData: {  // 接收父组件传递的设备数据数组
-      type: Array,
-      default: () => []  // 默认空数组，避免报错
+    purchase: {  // 接收父组件传递的设备数据数组
+      type: Object,
+      default: () => {}  // 默认空数组，避免报错
     },
-    productionOverviewVo: { // 恢复生产概览数据（原代码注释了，需根据实际需求保留）
+    inventory: { // 恢复生产概览数据（原代码注释了，需根据实际需求保留）
       type: Object,
       default: () => ({})
     }
@@ -37,12 +37,12 @@ export default {
   data() {
     return {
       maintenanceTasks: [
-        { id: 1, eqName: '纯碱', taskName: '1313,252', },
-        { id: 2, eqName: '硅砂', taskName: '14,252', },
-        { id: 2, eqName: '白云石', taskName: '23,252', },
-        { id: 2, eqName: '石灰石', taskName: '34,421', },
-        { id: 2, eqName: '氧化铝', taskName: '1,251.34', },
-        { id: 2, eqName: '氢氧化铝', taskName: '14,252', },
+        { id: 1, name: '纯碱', number: '1313,252', },
+        { id: 2, name: '硅砂', number: '14,252', },
+        { id: 2, name: '白云石', number: '23,252', },
+        { id: 2, name: '石灰石', number: '34,421', },
+        { id: 2, name: '氧化铝', number: '1,251.34', },
+        { id: 2, name: '氢氧化铝', number: '14,252', },
 
         // { id: 2, eqName: '螺杆挤出', taskName: '例行维护', },
         // { id: 2, eqName: '螺杆挤出', taskName: '例行维护', },
@@ -53,22 +53,26 @@ export default {
       ],
       tableProps: [
         // { prop: 'id', label: '序号', width: 50, align: 'center' },
-        { prop: 'eqName', label: '物料', align: 'left' },
-        { prop: 'taskName', label: '库存/吨', align: 'left' },
+        { prop: 'name', label: '物料', align: 'left' },
+        { prop: 'number', label: '库存/吨', align: 'left' },
       ]
     }
   },
   watch: {
-    productionOverviewVo: {
-      handler(newValue, oldValue) {
-        this.updateChart()
+    inventory: {
+      handler(newInventoryData) {
+        // 当 inventory 数据变化时，执行转换函数
+        this.maintenanceTasks = this.transformInventoryData(newInventoryData);
       },
-      deep: true // 若对象内属性变化需触发，需加 deep: true
+      immediate: true, // 组件初始化时立即执行一次
+      deep: true       // 深度监听对象内部属性的变化
     }
   },
   mounted() {
-    // 初始化图表（若需展示图表，需在模板中添加对应 DOM）
-    // this.$nextTick(() => this.updateChart())
+    // 组件挂载时，如果有初始 inventory 数据，也执行一次转换
+    if (this.inventory) {
+      this.maintenanceTasks = this.transformInventoryData(this.inventory);
+    }
   },
   beforeDestroy() {
     // 销毁图表，避免内存泄漏
@@ -78,115 +82,25 @@ export default {
     }
   },
   methods: {
-    updateChart() {
-      // 注意：原代码中图表依赖 id 为 "productionStatusChart" 的 DOM，需在模板中补充，否则会报错
-      // 示例：在 Container 内添加 <div id="productionStatusChart" style="height: 200px;"></div>
-      if (!document.getElementById('productionStatusChart')) return
-
-      if (this.chart) this.chart.dispose()
-      this.chart = echarts.init(document.getElementById('productionStatusChart'))
-
-      const data = [
-        this.productionOverviewVo.input || 0,
-        this.productionOverviewVo.output || 0,
-        this.productionOverviewVo.ng || 0,
-        this.productionOverviewVo.lowValue || 0,
-        this.productionOverviewVo.scrap || 0,
-        this.productionOverviewVo.inProcess || 0,
-        this.productionOverviewVo.engineer || 0
-      ]
-
-      const option = {
-        type: 'bar',
-        grid: { left: 51, right: 40, top: 50, bottom: 45 },
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: { type: 'shadow' },
-          className: 'production-status-chart-tooltip'
-        },
-        xAxis: {
-          type: 'category',
-          offset: 8,
-          data: ['投入', '产出', '待判', '低价值', '报废', '在制', '实验片'],
-          axisTick: { show: false },
-          axisLine: { show: true, onZero: false, lineStyle: { color: '#00E8FF' } },
-          axisLabel: {
-            color: 'rgba(255,255,255,0.7)',
-            fontSize: 12,
-            interval: 0,
-            width: 38,
-            overflow: 'break'
-          }
-        },
-        yAxis: {
-          type: 'value',
-          name: '单位/片',
-          nameTextStyle: { color: 'rgba(255,255,255,0.7)', fontSize: 14, align: 'left' },
-          min: () => 0,
-          max: (value) => Math.ceil(value.max),
-          scale: true,
-          axisTick: { show: false },
-          axisLabel: { color: 'rgba(255,255,255,0.7)', fontSize: 12 },
-          splitLine: { lineStyle: { color: 'RGBA(24, 88, 100, 0.6)', type: 'dashed' } },
-          axisLine: { show: true, lineStyle: { color: '#00E8FF' } }
-        },
-        series: [
-          {
-            type: 'pictorialBar',
-            label: { show: true, position: 'top', distance: -3, color: '#89CDFF', fontSize: 11 },
-            symbolSize: [20, 8],
-            symbolOffset: [0, 5],
-            z: 20,
-            itemStyle: {
-              borderColor: '#3588C7',
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 0, color: 'RGBA(22, 89, 98, 1)' },
-                { offset: 1, color: '#3588C7' }
-              ])
-            },
-            data: data
-          },
-          {
-            type: 'bar',
-            barWidth: 20,
-            itemStyle: {
-              borderWidth: 1,
-              borderColor: '#3588C7',
-              opacity: 0.8,
-              color: {
-                x: 0, y: 0, x2: 0, y2: 1,
-                type: 'linear',
-                global: false,
-                colorStops: [
-                  { offset: 0, color: 'rgba(73,178,255,0)' },
-                  { offset: 0.5, color: 'rgba(0, 232, 255, .5)' },
-                  { offset: 1, color: 'rgba(0, 232, 255, 1)' }
-                ]
-              }
-            },
-            tooltip: { show: false },
-            data: data
-          },
-          {
-            type: 'pictorialBar',
-            symbolSize: [20, 8],
-            symbolOffset: [0, -4],
-            z: 12,
-            symbolPosition: 'end',
-            itemStyle: {
-              borderColor: 'rgba(0, 232, 255, 1)',
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 0, color: 'RGBA(22, 89, 98, 1)' },
-                { offset: 1, color: '#3588C7' }
-              ])
-            },
-            tooltip: { show: false },
-            data: data
-          }
-        ]
+    /**
+     * 核心转换函数：将 inventory 对象转换为 maintenanceTasks 数组
+     * @param {Object} inventoryData - 格式如: { "纯碱": 0, "硅砂": 0, ... }
+     * @returns {Array} - 格式如: [ { id: 1, name: '纯碱', number: '0' }, ... ]
+     */
+    transformInventoryData(inventoryData) {
+      // 检查输入是否为有效的非空对象
+      if (!inventoryData || typeof inventoryData !== 'object' || Object.keys(inventoryData).length === 0) {
+        return []; // 如果无效，返回空数组
       }
 
-      this.chart.setOption(option)
+      // 使用 Object.entries() 和 map() 进行转换
+      return Object.entries(inventoryData).map(([name, value], index) => {
+        return {
+          id: index + 1,          // id 从 1 开始自增
+          name: name,             // 物料名称
+          number: String(value)   // 将数值转换为字符串，以匹配 "number" 字段
+        };
+      });
     }
   }
 }
diff --git a/src/views/home/components/coreSalesKPIs.vue b/src/views/home/components/coreSalesKPIs.vue
index ab0ca570..466e6621 100644
--- a/src/views/home/components/coreSalesKPIs.vue
+++ b/src/views/home/components/coreSalesKPIs.vue
@@ -5,12 +5,12 @@
       <div class="kpi-content" style="padding: 14px 16px; display: flex;flex-direction: column; width: 100%;">
         <!-- 2. .top 保持 flex，无需固定高度，自动跟随子元素拉伸 -->
         <div class="top" style="display: flex; width: 100%;">
-          <top-item />
+          <top-item :sale="sale" :dateData="dateData" />
         </div>
         <div class="bottom"
           style="display: flex; width: 100%;margin-top: 8px;background-color: rgba(249, 252, 255, 1);">
           <!-- <top-item /> -->
-          <coreBottomBar />
+          <coreBottomBar :line="sale.line" :dateData="dateData" />
 
         </div>
       </div>
@@ -28,11 +28,11 @@ export default {
   components: { Container, topItem, coreBottomBar },
   // mixins: [resize],
   props: {
-    leftEqInfoData: {  // 接收父组件传递的设备数据数组
-      type: Array,
-      default: () => []  // 默认空数组，避免报错
+    sale: {  // 接收父组件传递的设备数据数组
+      type: Object,
+      default: () => ({})
     },
-    productionOverviewVo: { // 恢复生产概览数据（原代码注释了，需根据实际需求保留）
+    dateData: { // 恢复生产概览数据（原代码注释了，需根据实际需求保留）
       type: Object,
       default: () => ({})
     }
@@ -43,135 +43,12 @@ export default {
     }
   },
   watch: {
-    productionOverviewVo: {
-      handler(newValue, oldValue) {
-        this.updateChart()
-      },
-      deep: true // 若对象内属性变化需触发，需加 deep: true
-    }
   },
   mounted() {
     // 初始化图表（若需展示图表，需在模板中添加对应 DOM）
     // this.$nextTick(() => this.updateChart())
   },
-  beforeDestroy() {
-    // 销毁图表，避免内存泄漏
-    if (this.chart) {
-      this.chart.dispose()
-      this.chart = null
-    }
-  },
   methods: {
-    updateChart() {
-      // 注意：原代码中图表依赖 id 为 "productionStatusChart" 的 DOM，需在模板中补充，否则会报错
-      // 示例：在 Container 内添加 <div id="productionStatusChart" style="height: 200px;"></div>
-      if (!document.getElementById('productionStatusChart')) return
-
-      if (this.chart) this.chart.dispose()
-      this.chart = echarts.init(document.getElementById('productionStatusChart'))
-
-      const data = [
-        this.productionOverviewVo.input || 0,
-        this.productionOverviewVo.output || 0,
-        this.productionOverviewVo.ng || 0,
-        this.productionOverviewVo.lowValue || 0,
-        this.productionOverviewVo.scrap || 0,
-        this.productionOverviewVo.inProcess || 0,
-        this.productionOverviewVo.engineer || 0
-      ]
-
-      const option = {
-        type: 'bar',
-        grid: { left: 51, right: 40, top: 50, bottom: 45 },
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: { type: 'shadow' },
-          className: 'production-status-chart-tooltip'
-        },
-        xAxis: {
-          type: 'category',
-          offset: 8,
-          data: ['投入', '产出', '待判', '低价值', '报废', '在制', '实验片'],
-          axisTick: { show: false },
-          axisLine: { show: true, onZero: false, lineStyle: { color: '#00E8FF' } },
-          axisLabel: {
-            color: 'rgba(255,255,255,0.7)',
-            fontSize: 12,
-            interval: 0,
-            width: 38,
-            overflow: 'break'
-          }
-        },
-        yAxis: {
-          type: 'value',
-          name: '单位/片',
-          nameTextStyle: { color: 'rgba(255,255,255,0.7)', fontSize: 14, align: 'left' },
-          min: () => 0,
-          max: (value) => Math.ceil(value.max),
-          scale: true,
-          axisTick: { show: false },
-          axisLabel: { color: 'rgba(255,255,255,0.7)', fontSize: 12 },
-          splitLine: { lineStyle: { color: 'RGBA(24, 88, 100, 0.6)', type: 'dashed' } },
-          axisLine: { show: true, lineStyle: { color: '#00E8FF' } }
-        },
-        series: [
-          {
-            type: 'pictorialBar',
-            label: { show: true, position: 'top', distance: -3, color: '#89CDFF', fontSize: 11 },
-            symbolSize: [20, 8],
-            symbolOffset: [0, 5],
-            z: 20,
-            itemStyle: {
-              borderColor: '#3588C7',
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 0, color: 'RGBA(22, 89, 98, 1)' },
-                { offset: 1, color: '#3588C7' }
-              ])
-            },
-            data: data
-          },
-          {
-            type: 'bar',
-            barWidth: 20,
-            itemStyle: {
-              borderWidth: 1,
-              borderColor: '#3588C7',
-              opacity: 0.8,
-              color: {
-                x: 0, y: 0, x2: 0, y2: 1,
-                type: 'linear',
-                global: false,
-                colorStops: [
-                  { offset: 0, color: 'rgba(73,178,255,0)' },
-                  { offset: 0.5, color: 'rgba(0, 232, 255, .5)' },
-                  { offset: 1, color: 'rgba(0, 232, 255, 1)' }
-                ]
-              }
-            },
-            tooltip: { show: false },
-            data: data
-          },
-          {
-            type: 'pictorialBar',
-            symbolSize: [20, 8],
-            symbolOffset: [0, -4],
-            z: 12,
-            symbolPosition: 'end',
-            itemStyle: {
-              borderColor: 'rgba(0, 232, 255, 1)',
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 0, color: 'RGBA(22, 89, 98, 1)' },
-                { offset: 1, color: '#3588C7' }
-              ])
-            },
-            tooltip: { show: false },
-            data: data
-          }
-        ]
-      }
-
-      this.chart.setOption(option)
-    }
   }
 }
 </script>
diff --git a/src/views/home/components/coresBar.vue b/src/views/home/components/coresBar.vue
index 96fc0123..4fb63f4e 100644
--- a/src/views/home/components/coresBar.vue
+++ b/src/views/home/components/coresBar.vue
@@ -12,9 +12,16 @@ export default {
   props: {
     chartSeries: {
       type: Array,
-      required: true,
       default: () => [] // 默认空数组，避免报错
-    }
+    },
+    xAxisData: {
+      type: Array,
+      default: () => [] // 默认空数组，避免报错
+    },
+    dateData: {
+      type: Object,
+      default: () => {} // 默认空数组，避免报错
+    },
   },
   data() {
     return {
@@ -61,6 +68,7 @@ export default {
     // 单独提取更新图表的方法，方便复用
     updateChart() {
       if (!this.myChart) return;
+      console.log('this.chartSeries', this.chartSeries,this.xAxisData);
 
       const option = {
         tooltip: {
@@ -85,10 +93,28 @@ export default {
               color: 'rgba(0, 0, 0, 0.45)',
               fontSize: 12,
               interval: 0,
-              width: 38,
-              overflow: 'break'
+              // width: 38,
+              overflow: 'break',
+              formatter: (value) => {
+                const dateParts = value.split('-'); // ["2025", "07", "01"]
+                if (dateParts.length < 2) return value; // 处理异常格式
+
+                switch (this.dateData.mode) {
+                  case 1: // 日模式，显示“月-日”
+                    // 确保有日的部分
+                    return dateParts.length >= 3
+                      ? `${dateParts[1]}月${dateParts[2]}日`
+                      : `${dateParts[1]}月`; //  fallback
+                  case 2: // 月模式，显示“月”
+                    return `${dateParts[1]}月`;
+                  case 3: // 年模式，显示“年”
+                    return `${dateParts[0]}年`;
+                  default: // 默认月模式
+                    return `${dateParts[1]}月`;
+                }
+              }
             },
-            data: ['6月', '7月', '8月', '9月', '10月', '11月']
+            data: this.xAxisData
           }
         ],
         yAxis: {
diff --git a/src/views/home/components/cost-Item.vue b/src/views/home/components/cost-Item.vue
index 5fffdd9f..95d74810 100644
--- a/src/views/home/components/cost-Item.vue
+++ b/src/views/home/components/cost-Item.vue
@@ -2,7 +2,7 @@
   <div class="coreItem">
     <!-- 动态生成每个 item -->
     <div class="item" v-for="(item, index) in itemList" :key="index">
-      <div class="unit">{{ item.unit }}</div>
+      <div class="unit">{{ item.name }}</div>
       <div class="item-content">
         <!-- 左右内容容器 -->
         <div class="content-wrapper">
@@ -24,7 +24,7 @@
         <div class="right">
           <!-- 环比额：计算差值并动态绑定颜色 -->
           <div class="number" :style="{ color: getColor(item.currentValue, item.targetValue) }">
-            {{ get环比额(item.currentValue, item.targetValue) }}
+            {{ item.hbe }}
           </div>
           <div class="title">环比额</div>
         </div>
@@ -37,46 +37,75 @@
 export default {
   name: "Container",
   components: {},
-  props: ["name", "size", "icon"],
+  props: {
+    cost: {  // 接收父组件传递的 cost 数据对象
+      type: Object,
+      default: () => ({})
+    }
+  },
   data() {
     return {
-      itemList: [
-        {
-          unit: "管理费用·万元",
-          targetValue: 16, // 上月值
-          currentValue: 14.5, // 本月值（小于上月，应显示橙色）
-        },
-        {
-          unit: "销售费用·万元",
-          targetValue: 16,
-          currentValue: 17, // 大于上月，应显示绿色
-        },
-        {
-          unit: "财务费用·万元",
-          targetValue: 16,
-          currentValue: 16, // 等于上月，应显示绿色
-        },
-      ]
+      itemList: [] // 初始化为空数组，等待数据加载
     };
   },
+  watch: {
+    // 监听 cost 数据变化，实时更新 itemList
+    cost: {
+      handler(newVal) {
+        if (newVal) {
+          this.itemList = this.transformData(newVal);
+        }
+      },
+      immediate: true, // 组件初始化时立即执行一次
+      deep: true       // 深度监听对象内部属性变化
+    }
+  },
   methods: {
+    /**
+     * 核心转换函数：将 cost 对象转换为 itemList 数组
+     * @param {Object} rawData - 原始的 cost 数据对象
+     * @returns {Array} - 转换后的 itemList 数组
+     */
+    transformData(rawData) {
+      // 定义费用类型映射关系（键名、显示名称、单位）
+      const costMapping = [
+        { key: 'manageCost', name: '管理费用·万元' },
+        { key: 'saleCost', name: '销售费用·万元' },
+        { key: 'financeCost', name: '财务费用·万元' }
+      ];
+
+      // 遍历映射关系，转换数据
+      return costMapping.map(mappingItem => {
+        // 获取对应费用类型的数据，若不存在则使用默认值
+        const costData = rawData[mappingItem.key] || { last: 0, this: 0, hbe: 0 };
+
+        return {
+          name: mappingItem.name,
+          targetValue: costData.last,  // 上月值
+          currentValue: costData.this  // 本月值
+        };
+      });
+    },
+
     // 颜色判断：本月 >= 上月 绿色，否则 橙色
     getColor(current, target) {
       return current >= target
-        ? "rgba(98, 213, 180, 1)"
-        : "rgba(249, 164, 74, 1)";
+        ? "rgba(98, 213, 180, 1)"  // 绿色：增长或持平
+        : "rgba(249, 164, 74, 1)"; // 橙色：下降
     },
+
     // 计算环比额（本月 - 上月），保留一位小数
-    get环比额(current, target) {
-      const diff = current - target;
-      // 正数加"+"号，负数和零保持原样
-      return diff > 0 ? `${diff.toFixed(1)}` : diff.toFixed(1);
-    }
+    // getData(current, target) {
+    //   const diff = current - target;
+    //   // 正数加"+"号，负数和零保持原样
+    //   return diff > 0 ? `+${diff.toFixed(1)}` : diff.toFixed(1);
+    // }
   },
 };
 </script>
 
 <style scoped lang="scss">
+/* 样式保持不变 */
 .coreItem {
   display: flex;
   gap: 8px;
diff --git a/src/views/home/components/financeCosts.vue b/src/views/home/components/financeCosts.vue
index 2425b297..433e75f6 100644
--- a/src/views/home/components/financeCosts.vue
+++ b/src/views/home/components/financeCosts.vue
@@ -6,18 +6,18 @@
         <!-- 根据activeTab状态，切换显示采购/存货内容 -->
         <template v-if="activeTab === 'purchase'">
           <!-- 采购重点指标对应的内容 -->
-          <coreBottomLeftItem></coreBottomLeftItem>
+          <coreBottomLeftItem :dateData="dateData" :finance="finance"></coreBottomLeftItem>
           <div class="bottom"
             style="display: flex; width: 100%;margin-top: 8px;background-color: rgba(249, 252, 255, 1);">
-            <coreBottomBar></coreBottomBar>
+            <coreBottomBar :dateData="dateData" :line="finance.line"></coreBottomBar>
           </div>
         </template>
         <template v-else-if="activeTab === 'inventory'">
           <!-- 存货重点指标对应的内容 -->
-          <costItem></costItem>
+          <costItem :cost="cost"></costItem>
           <div class="bottom"
             style="display: flex; width: 100%;margin-top: 8px;background-color: rgba(249, 252, 255, 1);">
-            <CostsBottomBar>
+            <CostsBottomBar :line="cost.line" :dateData="dateData">
             </CostsBottomBar>
           </div>
         </template>
@@ -41,14 +41,18 @@ export default {
   name: 'ProductionStatus',
   components: { Container, coreBottomLeftItem, coreBottomBar, costItem, CostsBottomBar },
   props: {
-    leftEqInfoData: {
-      type: Array,
-      default: () => []
+    finance: {
+      type: Object,
+      default: () => {}
     },
-    productionOverviewVo: {
+    cost: {
       type: Object,
       default: () => ({})
-    }
+    },
+    dateData: {
+      type: Object,
+      default: () => ({})
+    },
   },
   data() {
     return {
diff --git a/src/views/home/components/financeCostsBottomBar.vue b/src/views/home/components/financeCostsBottomBar.vue
index 39ae8821..d180f162 100644
--- a/src/views/home/components/financeCostsBottomBar.vue
+++ b/src/views/home/components/financeCostsBottomBar.vue
@@ -30,9 +30,9 @@
       </div>
     </div>
     <div class="lineBottom" style="height: 210px; width: 100%">
-      <!-- 传递当前选中的 series 数据给子组件 -->
-      <coreLineChart style="height: 210px; width: 680px" :chart-series="currentSeries"
-        :key="activeButton + JSON.stringify(currentSeries)" />
+      <!-- 传递当前选中的 series 数据和 xAxis 数据给子组件 -->
+      <coreLineChart style="height: 210px; width: 680px" :chart-series="currentSeries" :x-axis-data="xAxisData"
+        :dateData="dateData" />
     </div>
   </div>
 </template>
@@ -44,205 +44,93 @@ import * as echarts from 'echarts';
 export default {
   name: "Container",
   components: { coreLineChart },
-  props: ["name", "size", "icon"],
+  props: {
+    line: { // 接收父组件传递的 line 数据
+      type: Object,
+      default: () => ({})
+    },
+    dateData: { // 接收父组件传递的 line 数据
+      type: Object,
+      default: () => ({})
+    },
+  },
   data() {
     return {
       activeButton: 0, // 初始激活第一个按钮（索引0）
-      itemList: [
-        { unit: "单价·元/m²", targetValue: 16, currentValue: 14.5, progress: 90 },
-        { unit: "净价·元/m²", targetValue: 16, currentValue: 15.2, progress: 85 },
-        { unit: "销量·万m²", targetValue: 20, currentValue: 16, progress: 80 },
-        { unit: "双镀面板·万m²", targetValue: 15, currentValue: 13.8, progress: 92 },
-      ],
-      // 存储4个按钮对应的 series 数据（每个按钮对应「目标+实际」两条线）
-      seriesMap: [
-        // 0: 营业收入
-        [
-          {
-            name: '目标',
-            type: 'line',
-            stack: 'Total',
-            symbol: 'circle',
-            symbolSize: 6,
-            lineStyle: { color: 'rgba(91, 230, 190, 1)' },
-            itemStyle: {
-              color: 'rgba(91, 230, 190, 1)',
-              borderColor: 'rgba(91, 230, 190, 1)',
-              borderWidth: 2
-            },
-            areaStyle: {
-              opacity: 0.3,
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 0, color: 'rgba(91, 230, 190, 0.4)' },
-                { offset: 1, color: 'rgba(91, 230, 190, 0)' },
-              ]),
-            },
-            data: [500, 620, 580, 720, 650, 800] // 6-11月目标数据
-          },
-          {
-            name: '实际',
-            type: 'line',
-            stack: 'Total',
-            symbol: 'circle',
-            symbolSize: 6,
-            lineStyle: { color: 'rgba(255, 132, 0, 1)' },
-            itemStyle: {
-              color: 'rgba(255, 132, 0, 1)',
-              borderColor: 'rgba(255, 132, 0, 1)',
-              borderWidth: 2
-            },
-            areaStyle: {
-              opacity: 0.3,
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 0, color: 'rgba(255, 132, 0, 0.4)' },
-                { offset: 1, color: 'rgba(255, 132, 0, 0)' },
-              ]),
-            },
-            data: [480, 590, 610, 680, 700, 750] // 6-11月实际数据
-          }
-        ],
-        // 1: 经营性利润
-        [
-          {
-            name: '目标',
-            type: 'line',
-            stack: 'Total',
-            symbol: 'circle',
-            symbolSize: 6,
-            lineStyle: { color: 'rgba(91, 230, 190, 1)' },
-            itemStyle: {
-              color: 'rgba(91, 230, 190, 1)',
-
-              borderWidth: 2
-            },
-            areaStyle: {
-              opacity: 0.3,
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 0, color: 'rgba(91, 230, 190, 0.4)' },
-                { offset: 1, color: 'rgba(91, 230, 190, 0)' },
-              ]),
-            },
-            data: [150, 180, 160, 200, 190, 220]
-          },
-          {
-            name: '实际',
-            type: 'line',
-            stack: 'Total',
-            symbol: 'circle',
-            symbolSize: 6,
-            lineStyle: { color: 'rgba(255, 132, 0, 1)' },
-            itemStyle: {
-              color: 'rgba(255, 132, 0, 1)',
-
-              borderWidth: 2
-            },
-            areaStyle: {
-              opacity: 0.3,
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 0, color: 'rgba(255, 132, 0, 0.4)' },
-                { offset: 1, color: 'rgba(255, 132, 0, 0)' },
-              ]),
-            },
-            data: [140, 170, 180, 190, 210, 200]
-          }
-        ],
-        // 2: 利润总额
-        [
-          {
-            name: '目标',
-            type: 'line',
-            stack: 'Total',
-            symbol: 'circle',
-            symbolSize: 6,
-            lineStyle: { color: 'rgba(91, 230, 190, 1)' },
-            itemStyle: {
-              color: 'rgba(91, 230, 190, 1)',
-
-              borderWidth: 2
-            },
-            areaStyle: {
-              opacity: 0.3,
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 0, color: 'rgba(91, 230, 190, 0.4)' },
-                { offset: 1, color: 'rgba(91, 230, 190, 0)' },
-              ]),
-            },
-            data: [120, 150, 140, 170, 160, 190]
-          },
-          {
-            name: '实际',
-            type: 'line',
-            stack: 'Total',
-            symbol: 'circle',
-            symbolSize: 6,
-            lineStyle: { color: 'rgba(255, 132, 0, 1)' },
-            itemStyle: {
-              color: 'rgba(255, 132, 0, 1)',
-
-              borderWidth: 2
-            },
-            areaStyle: {
-              opacity: 0.3,
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 0, color: 'rgba(255, 132, 0, 0.4)' },
-                { offset: 1, color: 'rgba(255, 132, 0, 0)' },
-              ]),
-            },
-            data: [110, 140, 150, 160, 180, 170]
-          }
-        ],
-        // 3: 毛利率（百分比数据）
-        [
-          {
-            name: '目标',
-            type: 'line',
-            stack: 'Total',
-            symbol: 'circle',
-            symbolSize: 6,
-            lineStyle: { color: 'rgba(91, 230, 190, 1)' },
-            itemStyle: {
-              color: 'rgba(91, 230, 190, 1)',
-
-              borderWidth: 2
-            },
-            areaStyle: {
-              opacity: 0.3,
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 0, color: 'rgba(91, 230, 190, 0.4)' },
-                { offset: 1, color: 'rgba(91, 230, 190, 0)' },
-              ]),
-            },
-            data: [35, 36, 35.5, 37, 36.5, 38]
-          },
-          {
-            name: '实际',
-            type: 'line',
-            stack: 'Total',
-            symbol: 'circle',
-            symbolSize: 6,
-            lineStyle: { color: 'rgba(255, 132, 0, 1)' },
-            itemStyle: {
-              color: 'rgba(255, 132, 0, 1)',
-
-              borderWidth: 2
-            },
-            areaStyle: {
-              opacity: 0.3,
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 0, color: 'rgba(255, 132, 0, 0.4)' },
-                { offset: 1, color: 'rgba(255, 132, 0, 0)' },
-              ]),
-            },
-            data: [34, 35.5, 36, 36.2, 37, 37.5]
-          }
-        ]
+      // 定义按钮与 line 数据中 key 的映射关系
+      buttonToDataKey: [
+        '营业收入',
+        '经营收入', // 注意：数据中的 key 是“经营收入”，按钮显示的是“经营性利润”
+        '利润总额',
+        '毛利率'
       ]
     };
   },
   computed: {
-    // 根据当前激活的按钮，返回对应的 series 数据
+    // 根据当前激活的按钮，动态生成对应的 series 数据
     currentSeries() {
-      return this.seriesMap[this.activeButton] || [];
+
+      const dataKey = this.buttonToDataKey[this.activeButton];
+      const chartData = this.line[dataKey];
+      console.log('this.line[dataKey', this.buttonToDataKey[this.activeButton]);
+
+      if (!chartData) {
+        return [];
+      }
+
+      // 提取目标和实际数据的值
+      const targetDataValues = Object.values(chartData.target || {});
+      const realDataValues = Object.values(chartData.real || {});
+      console.log('realDataValues', realDataValues);
+
+      return [
+        {
+          name: '目标',
+          type: 'line',
+          stack: 'Total',
+          symbol: 'circle',
+          symbolSize: 6,
+          lineStyle: { color: 'rgba(91, 230, 190, 1)' },
+          itemStyle: { color: 'rgba(91, 230, 190, 1)', borderColor: 'rgba(91, 230, 190, 1)', borderWidth: 2 },
+          areaStyle: {
+            opacity: 0.3,
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              { offset: 0, color: 'rgba(91, 230, 190, 0.4)' },
+              { offset: 1, color: 'rgba(91, 230, 190, 0)' },
+            ]),
+          },
+          data: targetDataValues
+        },
+        {
+          name: '实际',
+          type: 'line',
+          stack: 'Total',
+          symbol: 'circle',
+          symbolSize: 6,
+          lineStyle: { color: 'rgba(255, 132, 0, 1)' },
+          itemStyle: { color: 'rgba(255, 132, 0, 1)', borderColor: 'rgba(255, 132, 0, 1)', borderWidth: 2 },
+          areaStyle: {
+            opacity: 0.3,
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              { offset: 0, color: 'rgba(255, 132, 0, 0.4)' },
+              { offset: 1, color: 'rgba(255, 132, 0, 0)' },
+            ]),
+          },
+          data: realDataValues
+        }
+      ];
+    },
+    // 提取 x 轴数据（日期）
+    xAxisData() {
+      const dataKey = this.buttonToDataKey[this.activeButton];
+      const chartData = this.line[dataKey];
+      // 使用 'target' 的键作为 x 轴，如果 'target' 不存在，则使用 'real' 的键
+      if (chartData && chartData.target) {
+        return Object.keys(chartData.target);
+      } else if (chartData && chartData.real) {
+        return Object.keys(chartData.real);
+      }
+      return [];
     }
   },
   methods: {}
diff --git a/src/views/home/components/keyProductionIndicators.vue b/src/views/home/components/keyProductionIndicators.vue
index 8c22fccd..7ed4410a 100644
--- a/src/views/home/components/keyProductionIndicators.vue
+++ b/src/views/home/components/keyProductionIndicators.vue
@@ -5,11 +5,11 @@
       <div class="kpi-content" style="padding: 14px 16px; display: flex;flex-direction: column; width: 100%;">
         <!-- 2. .top 保持 flex，无需固定高度，自动跟随子元素拉伸 -->
         <div class="top" style="display: flex; width: 100%;">
-          <top-item />
+          <top-item :rawItemList='productData' :dateData="dateData" />
         </div>
         <div class="bottom" style="display: flex;margin-top: 8px;background-color: rgba(249, 252, 255, 1);">
           <!-- <top-item /> -->
-          <coreBottomBar />
+          <coreBottomBar :lineData="productData.line" :dateData="dateData" />
 
         </div>
       </div>
@@ -27,14 +27,14 @@ export default {
   components: { Container, topItem, coreBottomBar },
   // mixins: [resize],
   props: {
-    leftEqInfoData: {  // 接收父组件传递的设备数据数组
-      type: Array,
-      default: () => []  // 默认空数组，避免报错
-    },
-    productionOverviewVo: { // 恢复生产概览数据（原代码注释了，需根据实际需求保留）
+    productData: {
       type: Object,
-      default: () => ({})
-    }
+      default: () => {}  // 默认空数组，避免报错
+    },
+    dateData: {
+      type: Object,
+      default: () => { }  // 默认空数组，避免报错
+    },
   },
   data() {
     return {
@@ -42,12 +42,6 @@ export default {
     }
   },
   watch: {
-    productionOverviewVo: {
-      handler(newValue, oldValue) {
-        // this.updateChart()
-      },
-      deep: true // 若对象内属性变化需触发，需加 deep: true
-    }
   },
   mounted() {
     // 初始化图表（若需展示图表，需在模板中添加对应 DOM）
diff --git a/src/views/home/components/keyWork.vue b/src/views/home/components/keyWork.vue
index c6325550..a4c29429 100644
--- a/src/views/home/components/keyWork.vue
+++ b/src/views/home/components/keyWork.vue
@@ -1,7 +1,6 @@
 <template>
   <div style="flex: 1">
     <Container name="重点工作/三大攻坚战" icon="cockpitItemIcon" size="bottomBasic" topSize="basic">
-      <!-- 1. 移除 .kpi-content 的固定高度，改为自适应 -->
       <div class="kpi-content"
         style="padding: 14px 16px; display: flex;flex-direction: column; width: 100%;height: 280px;">
         <div class="bottom"
@@ -16,79 +15,78 @@
               <span class="legend-text">未完成</span>
             </div>
           </div>
-          <base-table style="height: 180px;" :page="1" :limit="10" :show-index="true" :beilv="1" :tableConfig="tableProps"
-            :table-data="maintenanceTasks" />
-
+          <base-table style="height: 180px;" :page="1" :limit="10" :show-index="true" :beilv="1"
+            :tableConfig="tableProps" :table-data="tableData" />
         </div>
       </div>
     </Container>
   </div>
 </template>
+
 <script>
 import Container from './container.vue'
-// import * as echarts from 'echarts'
-import topItem from './top-product-item.vue'
-import coreBottomBar from './productBottomBar.vue'
 import baseTable from './baseTable.vue'
 import finishDiv from './finishDiv.vue'
 
-
 export default {
   name: 'ProductionStatus',
-  components: { Container, topItem, coreBottomBar, baseTable },
-  // mixins: [resize],
+  components: { Container, baseTable },
   props: {
-    leftEqInfoData: {  // 接收父组件传递的设备数据数组
-      type: Array,
-      default: () => []  // 默认空数组，避免报错
-    },
-    productionOverviewVo: { // 恢复生产概览数据（原代码注释了，需根据实际需求保留）
+    importantWork: {
       type: Object,
       default: () => ({})
     }
   },
   data() {
     return {
-      maintenanceTasks: [
-        {
-          id: 1, eqName: '应收账款（亿元）', taskName: '10', monthlyActual: '12.45', accumulated: '12.45', status: 'done' }, // 已完成-绿色
-
-        { id: 2, eqName: '存货/亿元', taskName: '0.57', monthlyActual: '0.72', accumulated: '0.72', status: 'pending' }, // 未完成-橙色
-        { id: 3, eqName: '三年以上应收款/亿元', taskName: '0.57', monthlyActual: '0.72', accumulated: '0.72', status: 'done' },
-        { id: 4, eqName: '非经营性资产处置到账金额/万元', taskName: '11000', monthlyActual: '0', accumulated: '0', status: 'pending' },
-        { id: 1, eqName: '研发经费入强度/%', taskName: '3.07', monthlyActual: '2.37', accumulated: '3.14', status: 'done' }, // 已完成-绿色
-        { id: 4, eqName: '研发经费投入/万元', taskName: '19500', monthlyActual: '1084', accumulated: '2797', status: 'pending' },
-        { id: 4, eqName: '经营性现金流/万元', taskName: '2898', monthlyActual: '13472', accumulated: '-30490', status: 'pending' },
-
-        // { id: 2, eqName: '螺杆挤出', taskName: '例行维护', },
-
-      ],
+      tableData: [],
       tableProps: [
-        // { prop: 'id', label: '序号', width: 50, align: 'center' },
-        { prop: 'eqName', label: '攻坚指标', align: 'center' },
-        { prop: 'taskName', label: '攻坚目标', align: 'center' },
-        { prop: 'taskName', label: '当月实际', align: 'center' },
-        { prop: 'taskName', label: '累计', align: 'center', subcomponent: finishDiv },
-
+        { prop: 'name', label: '攻坚指标', align: 'center' },
+        { prop: 'target', label: '攻坚目标', align: 'center' },
+        { prop: 'monthlyActual', label: '当月实际', align: 'center' },
+        { prop: 'accumulated', label: '累计', align: 'center', subcomponent: finishDiv },
       ]
     }
   },
   watch: {
-    productionOverviewVo: {
-      handler(newValue, oldValue) {
-        this.updateChart()
+    importantWork: {
+      handler(newVal) {
+        this.tableData = this.transformData(newVal);
       },
-      deep: true // 若对象内属性变化需触发，需加 deep: true
+      immediate: true,
+      deep: true
     }
   },
-  mounted() {
-    // 初始化图表（若需展示图表，需在模板中添加对应 DOM）
-    // this.$nextTick(() => this.updateChart())
-  },
-  beforeDestroy() {
-    // 销毁图表，避免内存泄漏
-  },
   methods: {
+    transformData(rawData) {
+      if (!rawData || typeof rawData !== 'object') return [];
+
+      const mapping = [
+        { key: 'jyxxjl', name: '经营现金流', unit: '万元' },
+        { key: 'yszk', name: '应收账款', unit: '万元' },
+        { key: 'ch', name: '存货', unit: '万元' },
+        { key: 'yysr', name: '营业收入', unit: '万元' },
+        { key: 'snysysk', name: '三年以上应收款', unit: '万元' },
+        { key: 'dzje', name: '非经营性资产处置到账金额', unit: '万元' },
+        { key: 'yfjftr', name: '研发经费投入', unit: '万元' },
+        { key: 'yfjftrqd', name: '研发经费投入强度', unit: '%' }
+      ];
+
+      return mapping.map((item, index) => {
+        const data = rawData[item.key] || { monValue: 0, real: 0, target: 0 };
+        const accumulated = data.real || 0;
+        const target = data.target || 0;
+
+        return {
+          id: index + 1,
+          name: item.name + '/' + item.unit,
+          target: target,
+          monthlyActual: data.monValue,
+          accumulated: accumulated,
+          status: accumulated > 0 && target > 0 && accumulated / target >= 1 ? 'done' : 'pending'
+        };
+      });
+    }
   }
 }
 </script>
@@ -98,41 +96,31 @@ export default {
   display: flex;
   align-items: center;
   gap: 10px;
-  /* 两个图例项之间的间距 */
 }
 
-/* 单个图例项 */
 .legend-item {
   display: flex;
   align-items: center;
 }
 
-/* 图例小方块 */
 .legend-dot {
   display: inline-block;
   width: 12px;
   height: 12px;
   margin-right: 5px;
   border-radius: 2px;
-  /* 可选：轻微圆角 */
 }
 
-/* 已完成（绿色） */
 .legend-dot.done {
   background-color: #4CAF50;
-  /* 绿色，可根据需求调整色值 */
 }
 
-/* 未完成（橙色） */
 .legend-dot.pending {
   background-color: #FF9800;
-  /* 橙色，可根据需求调整色值 */
 }
 
-/* 图例文字 */
 .legend-text {
   font-size: 14px;
   color: #333;
 }
-
 </style>
diff --git a/src/views/home/components/order-bottom-leftItem.vue b/src/views/home/components/order-bottom-leftItem.vue
index ca6253ed..3dc1e4b4 100644
--- a/src/views/home/components/order-bottom-leftItem.vue
+++ b/src/views/home/components/order-bottom-leftItem.vue
@@ -71,7 +71,7 @@
 
         <!-- 动态渲染城市进度：循环 item.cities -->
         <div class="right-city" v-for="(city, cityIdx) in item.cities" :key="cityIdx"
-          :style="{ marginTop: cityIdx > 0 ? '2px' : '0' }">
+          :style="{ marginTop: cityIdx > 0 ? '2px' : '0' }" @click="getTableData(city.num)" style="cursor: pointer;">
           <div class="city">{{ city.name }}</div> <!-- 动态城市名 -->
           <div class="city-progress-group">
             <div class="city-progress-container">
@@ -102,72 +102,145 @@
 export default {
   name: "Container",
   components: {},
-  props: ["name", "size", "icon"],
+  props: ["orderOutput"],
   data() {
     return {
       progress: 90, // 进度值基础参数
       itemList: [
+        // {
+        //   unit: "总进度",
+        //   targetValue: 16,
+        //   currentValue: 14.5,
+        //   progress: 90,
+        //   cities: [] // 总进度无需城市数据，留空
+        // },
+        // {
+        //   unit: "一组",
+        //   targetValue: 16,
+        //   currentValue: 17,
+        //   progress: 106,
+        //   cities: [
+        //     { name: "桐城", completed: 12, total: 13, progress: 92 },
+        //     { name: "自贡", completed: 15, total: 16, progress: 93 } // 新增城市示例
+        //   ]
+        // },
+        // {
+        //   unit: "二组",
+        //   targetValue: 16,
+        //   currentValue: 16,
+        //   progress: 100,
+        //   cities: [
+        //     { name: "蚌埠", completed: 10, total: 12, progress: 83 },
+        //     { name: "合肥", completed: 8, total: 10, progress: 80 }
+        //   ]
+        // },
+        // // 其他组同理，按需添加 cities 数据
+        // {
+        //   unit: "三组",
+        //   targetValue: 16,
+        //   currentValue: 15.2,
+        //   progress: 85,
+        //   cities: [{ name: "宜兴", completed: 9, total: 11, progress: 81 }]
+        // },
+        // {
+        //   unit: "四组",
+        //   targetValue: 16,
+        //   currentValue: 18,
+        //   progress: 112,
+        //   cities: [
+        //     { name: "漳州", completed: 14, total: 15, progress: 93 },
+        //     { name: "洛阳", completed: 12, total: 14, progress: 85 }
+        //   ]
+        // },
+        // {
+        //   unit: "五组",
+        //   targetValue: 16,
+        //   currentValue: 14,
+        //   progress: 80,
+        //   cities: [{ name: "桐城", completed: 7, total: 9, progress: 77 }]
+        // }
+      ]
+    };
+  },
+  watch: {
+    orderOutput: {
+      handler(newValue, oldValue) {
+        this.getItemData(newValue)
+      },
+      deep: true // 若对象内属性变化需触发，需加 deep: true
+    }
+  },
+  methods: {
+    getItemData(data) {
+       this.itemList = [
         {
           unit: "总进度",
-          targetValue: 16,
-          currentValue: 14.5,
-          progress: 90,
+          targetValue: data.totalProgress.target,
+          currentValue: data.totalProgress.real,
+          progress: data.totalProgress.rate,
           cities: [] // 总进度无需城市数据，留空
         },
         {
           unit: "一组",
-          targetValue: 16,
-          currentValue: 17,
-          progress: 106,
+          targetValue: data.group1.target,
+          currentValue: data.group1.real,
+          progress: data.group1.rate,
           cities: [
-            { name: "桐城", completed: 12, total: 13, progress: 92 },
-            { name: "自贡", completed: 15, total: 16, progress: 93 } // 新增城市示例
+            { name: "桐城", completed: data[2].real, total: data[2].target, progress: data[2].rate,num:2 },
+            { name: "自贡", completed: data[3].real, total: data[3].target, progress: data[3].rate, num: 3 } // 新增城市示例
           ]
         },
         {
           unit: "二组",
-          targetValue: 16,
-          currentValue: 16,
-          progress: 100,
+          targetValue: data.group2.target,
+          currentValue: data.group2.real,
+          progress: data.group2.rate,
           cities: [
-            { name: "蚌埠", completed: 10, total: 12, progress: 83 },
-            { name: "合肥", completed: 8, total: 10, progress: 80 }
+            { name: "蚌埠", completed: data[4].real, total: data[4].target, progress: data[4].rate, num: 4 },
+            { name: "合肥", completed: data[5].real, total: data[5].target, progress: data[5].rate, num: 5 }
           ]
         },
         // 其他组同理，按需添加 cities 数据
         {
           unit: "三组",
-          targetValue: 16,
-          currentValue: 15.2,
-          progress: 85,
-          cities: [{ name: "宜兴", completed: 9, total: 11, progress: 81 }]
+          targetValue: data.group3.target,
+          currentValue: data.group3.real,
+          progress: data.group3.rate,
+          cities: [{ name: "江苏凯盛", completed: data[6].real, total: data[6].target, progress: data[6].rate, num: 6 },
+            { name: "宜兴", completed: data[7].real, total: data[7].target, progress: data[7].rate, num: 7 }
+          ]
         },
         {
           unit: "四组",
-          targetValue: 16,
-          currentValue: 18,
-          progress: 112,
+          targetValue: data.group4.target,
+          currentValue: data.group4.real,
+          progress: data.group4.rate,
           cities: [
-            { name: "漳州", completed: 14, total: 15, progress: 93 },
-            { name: "洛阳", completed: 12, total: 14, progress: 85 }
+            { name: "漳州", completed: data[8].real, total: data[8].target, progress: data[8].rate, num: 8 },
+            { name: "洛阳", completed: data[9].real, total: data[9].target, progress: data[9].rate, num: 9 }
           ]
         },
         {
           unit: "五组",
-          targetValue: 16,
-          currentValue: 14,
-          progress: 80,
-          cities: [{ name: "桐城", completed: 7, total: 9, progress: 77 }]
+          targetValue: data.group5.target,
+          currentValue: data.group5.real,
+          progress: data.group5.rate,
+          cities: [{ name: "秦皇岛", completed: data[10].real, total: data[10].target, progress: data[10].rate, num: 10 },
+            // { name: "秦皇岛", completed: 7, total: 9, progress: 77 }
+          ]
         }
       ]
-    };
-  },
-  methods: {
+    },
     // 颜色判断核心方法：实际值≥目标值返回绿色，否则返回橙色
     getColor(currentValue, targetValue) {
       return currentValue >= targetValue
         ? "rgba(98, 213, 180, 1)"
         : "rgba(249, 164, 74, 1)";
+    },
+    getTableData(data) {
+      console.log(data, 'data');
+      this.$emit('handleShowTable',data)
+
     }
   }
 };
@@ -466,15 +539,16 @@ export default {
 }
 
 /* 右上角折现边框（主边框） */
-.groupData::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%);
-}
+// .groupData::before {
+//   content: "";
+//   position: absolute;
+//   top: 0;
+//   left: 0;
+//   width: 100%;
+//   height: 100%;
+//   background-color: #000000;
+//   clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%);
+// }
 
 /* 右上角折现细节 */
 .groupData::after {
diff --git a/src/views/home/components/orderColor.vue b/src/views/home/components/orderColor.vue
new file mode 100644
index 00000000..0d59ba1b
--- /dev/null
+++ b/src/views/home/components/orderColor.vue
@@ -0,0 +1,38 @@
+<template>
+  <!-- 对象语法：根据status的值动态添加类名 -->
+  <div class="accumulated-value" :class="{ pending: injectData.status === 1, done: injectData.status === 2 }">
+    <!-- 同样可添加状态文本（可选） -->
+    {{ injectData.status === 2 ? '已完成' : injectData.status === 1 ? '生产中' : '' }}
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'FinishDiv',
+  props: {
+    injectData: {
+      type: Object,
+      default: () => ({})
+    }
+  }
+}
+</script>
+
+<!-- style部分与方式1完全一致 -->
+<style scoped>
+.accumulated-value {
+  font-size: 14px;
+  padding: 2px 4px;
+  border-radius: 4px;
+}
+
+.accumulated-value.done {
+  color: #4CAF50;
+  /* background-color: rgba(76, 175, 80, 0.1); */
+}
+
+.accumulated-value.pending {
+  color: #FF9800;
+  /* background-color: rgba(255, 152, 0, 0.1); */
+}
+</style>
diff --git a/src/views/home/components/orderProgress.vue b/src/views/home/components/orderProgress.vue
index 0d596ae6..f0536c20 100644
--- a/src/views/home/components/orderProgress.vue
+++ b/src/views/home/components/orderProgress.vue
@@ -1,9 +1,12 @@
 <template>
   <div style="flex: 1">
-    <bottomMiddleContainer name="订单产量跟踪·万m²" icon="cockpitItemIcon" size="bottomBasic">
+    <bottomMiddleContainer name="订单产量跟踪·万m²" icon="cockpitItemIcon" size="bottomBasic" :tableShow="tableShow"
+      @handleShow="showTable">
       <!-- 1. 移除 .kpi-content 的固定高度，改为自适应 -->
       <div style="display: flex;gap: 9px;padding: 14px 16px;">
-        <orderItem />
+        <orderItem v-show="!tableShow" :orderOutput="orderOutput" @handleShowTable="getTable" />
+        <base-table v-show="tableShow" style="height: 252px;width: 100%;" :page="1" :limit="10" :show-index="true"
+          :beilv="1" :tableConfig="tableProps" :table-data="tableData" />
       </div>
     </bottomMiddleContainer>
   </div>
@@ -11,52 +14,56 @@
 <script>
 import bottomMiddleContainer from './bottomMiddleContainer.vue'
 // import * as echarts from 'echarts'
-import topItem from './top-product-item.vue'
-import coreBottomBar from './productBottomBar.vue'
 import orderItem from './order-bottom-leftItem.vue'
-
-
+import baseTable from './baseTable.vue'
+import orderColor from './orderColor.vue'
+import proColor from './proColor.vue'
+import moment from 'moment'
 export default {
   name: 'ProductionStatus',
-  components: { bottomMiddleContainer, topItem, coreBottomBar, orderItem },
+  components: { bottomMiddleContainer, orderItem, baseTable },
   // mixins: [resize],
   props: {
-    leftEqInfoData: {  // 接收父组件传递的设备数据数组
-      type: Array,
-      default: () => []  // 默认空数组，避免报错
-    },
-    productionOverviewVo: { // 恢复生产概览数据（原代码注释了，需根据实际需求保留）
+    orderOutput: {  // 接收父组件传递的设备数据数组
       type: Object,
       default: () => ({})
-    }
+    },
+    baseOrder: {  // 接收父组件传递的设备数据数组
+      type: Array,
+      default: () => []
+    },
   },
   data() {
     return {
-      maintenanceTasks: [
-        { id: 1, eqName: '连续化', taskName: '例行维护', },
-        { id: 2, eqName: '螺杆挤出', taskName: '例行维护', },
-        { id: 2, eqName: '螺杆挤出', taskName: '例行维护', },
-        // { id: 2, eqName: '螺杆挤出', taskName: '例行维护', },
-        // { id: 2, eqName: '螺杆挤出', taskName: '例行维护', },
-
-      ],
+      tableData: [],
+      tableShow:false,
       tableProps: [
-        // { prop: 'id', label: '序号', width: 50, align: 'center' },
-        { prop: 'eqName', label: '攻坚指标', align: 'left' },
-        { prop: 'taskName', label: '攻坚目标', align: 'left' },
-        { prop: 'taskName', label: '当月实际', align: 'left' },
-        { prop: 'taskName', label: '累计', align: 'left' },
-
+        { prop: 'code', label: '订单编号', align: 'center' },
+        { prop: 'customerName', label: '客户名称', align: 'center' },
+        {
+          prop: 'deliveryTime', label: '交货时间', align: 'center',
+          filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
+         },
+        { prop: 'spec', label: '规格(mm)', align: 'center', },
+        { prop: 'num', label: '生产量(平方米)', align: 'center', },
+        { prop: 'progress', label: '生产进度', align: 'center', subcomponent: proColor },
+        { prop: 'status', label: '订单状态', align: 'center', subcomponent: orderColor },
       ]
     }
   },
   watch: {
-    productionOverviewVo: {
+    baseOrder: {
       handler(newValue, oldValue) {
-        this.updateChart()
+        this.tableData = newValue
       },
       deep: true // 若对象内属性变化需触发，需加 deep: true
-    }
+    },
+    // orderOutput: {
+    //   handler(newValue, oldValue) {
+    //     this.tableData = newValue
+    //   },
+    //   deep: true // 若对象内属性变化需触发，需加 deep: true
+    // }
   },
   mounted() {
     // 初始化图表（若需展示图表，需在模板中添加对应 DOM）
@@ -66,6 +73,16 @@ export default {
     // 销毁图表，避免内存泄漏
   },
   methods: {
+    showTable(flag) {
+      this.tableShow = flag
+      console.log('this.tableShow', this.tableShow);
+
+    },
+    getTable(num) {
+      this.tableShow = true
+      console.log('num', num);
+      this.$emit('getData', num)
+    }
   }
 }
 </script>
diff --git a/src/views/home/components/proColor.vue b/src/views/home/components/proColor.vue
new file mode 100644
index 00000000..024cfef2
--- /dev/null
+++ b/src/views/home/components/proColor.vue
@@ -0,0 +1,41 @@
+<template>
+  <!-- 对象语法：根据status的值动态添加类名 -->
+  <div class="accumulated-value" :class="{
+    pending: injectData.progress < 100,  // 进度小于100%时，添加 pending 类
+    done: injectData.progress >= 100
+  }">
+    <!-- 同样可添加状态文本（可选） -->
+    {{ injectData.progress }}
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'FinishDiv',
+  props: {
+    injectData: {
+      type: Object,
+      default: () => ({})
+    }
+  }
+}
+</script>
+
+<!-- style部分与方式1完全一致 -->
+<style scoped>
+.accumulated-value {
+  font-size: 14px;
+  padding: 2px 4px;
+  border-radius: 4px;
+}
+
+.accumulated-value.done {
+  color: #4CAF50;
+  /* background-color: rgba(76, 175, 80, 0.1); */
+}
+
+.accumulated-value.pending {
+  color: #FF9800;
+  /* background-color: rgba(255, 152, 0, 0.1); */
+}
+</style>
diff --git a/src/views/home/components/productBar.vue b/src/views/home/components/productBar.vue
index a2568f03..329e7c7d 100644
--- a/src/views/home/components/productBar.vue
+++ b/src/views/home/components/productBar.vue
@@ -19,30 +19,74 @@ import * as echarts from 'echarts';
 
 export default {
   name: 'Container',
+  props: ["chartData",'dateData'],
   components: {},
   data() {
-    return {};
+    return {
+      myChart: null, // 存储 echarts 实例
+    };
+  },
+  // 关键：监听 chartData 变化
+  watch: {
+    chartData: {
+      handler(newData) {
+        this.updateChart(newData);
+      },
+      immediate: true, // 组件初始化时立即执行一次
+      deep: true,      // 深度监听对象内部变化
+    }
   },
-  computed: {},
   mounted() {
     this.$nextTick(() => {
-      this.initData();
+      this.initChart();
     });
   },
   methods: {
-    initData() {
-      // 优先使用 ref 获取 DOM，避免 id 冲突
+    // 初始化图表实例
+    initChart() {
       const chartDom = this.$refs.cockpitEffChip;
       if (!chartDom) {
         console.error('图表容器未找到！');
         return;
       }
-      const myChart = echarts.init(chartDom);
+      this.myChart = echarts.init(chartDom);
+
+      // 初始化时调用一次更新
+      this.updateChart(this.chartData);
+
+      // 监听窗口缩放
+      window.addEventListener('resize', () => {
+        this.myChart?.resize();
+      });
+    },
+
+    // 核心：根据数据更新图表
+    updateChart(data) {
+      if (!this.myChart) {
+        // 如果实例还未初始化，则等待 initChart 完成后再更新
+        setTimeout(() => this.updateChart(data), 0);
+        return;
+      }
+
+      // 1. 处理数据，如果 data 无效则清空图表
+      if (!data || typeof data !== 'object' || (!data.real && !data.target)) {
+        this.myChart.setOption({
+          xAxis: { data: [] },
+          series: [{ data: [] }, { data: [] }]
+        });
+        return;
+      }
+
+      // 2. 提取 X 轴数据（从 real 或 target 中取键名）
+      const xAxisData = data.real ? Object.keys(data.real) : Object.keys(data.target);
+      console.log('xAxisData', xAxisData);
+
+      // 3. 提取 "实际" 和 "目标" 系列的数据
+      const realData = data.real ? Object.values(data.real) : [];
+      const targetData = data.target ? Object.values(data.target) : [];
+
+      // 4. 准备 echarts 的 option 配置
       const option = {
-        // color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
-        // title: {
-        //   text: 'Gradient Stacked Area Chart'
-        // },
         tooltip: {
           trigger: 'axis',
           axisPointer: {
@@ -55,60 +99,56 @@ export default {
         grid: {
           top: 20,
           bottom: 20,
-          // top: 10,
-          // bottom: 20,
           right: 25,
         },
-        // legend: {
-        //   data: ['Line 1', 'Line 2', 'Line 3', 'Line 4', 'Line 5']
-        // },
-        // toolbox: {
-        //   feature: {
-        //     saveAsImage: {}
-        //   }
-        // },
         xAxis: [
           {
             type: 'category',
             boundaryGap: false,
-            axisTick: {
-              show: false
-            },
+            axisTick: { show: false },
             axisLine: {
               show: true,
               onZero: false,
-              lineStyle: {
-                color: 'rgba(0, 0, 0, 0.15)'
-              }
+              lineStyle: { color: 'rgba(0, 0, 0, 0.15)' }
             },
             axisLabel: {
               color: 'rgba(0, 0, 0, 0.45)',
               fontSize: 12,
               interval: 0,
-              width: 38,
-              overflow: 'break'
+              // 这里可以根据需要调整标签的显示方式
+              formatter: (value) => {
+                const dateParts = value.split('-'); // ["2025", "07", "01"]
+                if (dateParts.length < 2) return value; // 处理异常格式
+
+                switch (this.dateData.mode) {
+                  case 1: // 日模式，显示“月-日”
+                    // 确保有日的部分
+                    return dateParts.length >= 3
+                      ? `${dateParts[1]}月${dateParts[2]}日`
+                      : `${dateParts[1]}月`; //  fallback
+                  case 2: // 月模式，显示“月”
+                    return `${dateParts[1]}月`;
+                  case 3: // 年模式，显示“年”
+                    return `${dateParts[0]}年`;
+                  default: // 默认月模式
+                    return `${dateParts[1]}月`;
+                }
+              }
             },
-            data: ['6月', '7月', '8月', '9月', '10月', '11月']
+            data: xAxisData // 使用提取出的 X 轴数据
           }
         ],
         yAxis: {
           type: 'value',
-          // name: '单位/片',
           nameTextStyle: {
             color: 'rgba(0, 0, 0, 0.45)',
             fontSize: 14,
             align: 'left'
           },
-          min: function (value) {
-            return 0
-          },
-          max: function (value) {
-            return Math.ceil(value.max)
-          },
+          min: 0,
+          // max: function (value) { return Math.ceil(value.max * 1.1); }, // 增加一点余量
           scale: true,
-          axisTick: {
-            show: false
-          },
+          axisTick: { show: false },
           axisLabel: {
             color: 'rgba(0, 0, 0, 0.45)',
             fontSize: 12
@@ -116,101 +156,88 @@ export default {
           splitLine: {
             lineStyle: {
               color: 'rgba(0, 0, 0, 0.15)',
-              // type: 'dashed'
             }
           },
           axisLine: {
             show: true,
-            lineStyle: {
-              color: 'rgba(0, 0, 0, 0.15)'
-            }
+            lineStyle: { color: 'rgba(0, 0, 0, 0.15)' }
           }
         },
         series: [
           {
             name: '实际',
             type: 'line',
-            stack: 'Total',
-            symbol: 'circle', // 点的形状（circle为圆形）
+            // stack: 'Total', // 趋势图通常不需要堆叠
+            symbol: 'circle',
+            symbolSize: 8,
             lineStyle: {
-              color: 'rgba(255, 132, 0, .5)',
+              color: 'rgba(255, 132, 0, 1)', // 加深颜色
+              width: 2,
             },
             itemStyle: {
-              color: 'rgba(255, 132, 0, .5)',
-              borderColor: 'rgba(255, 132, 0, .5)', // 数据点边框色（白色）
-              borderWidth: 2, // 数据点边框宽度
+              color: 'rgba(255, 132, 0, 1)',
+              borderColor: '#fff',
+              borderWidth: 2,
             },
             areaStyle: {
-              opacity: 0.5,
+              opacity: 0.3,
               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                {
-                  offset: 0,
-                  color: 'rgba(255, 132, 0, .4)',
-                },
-                {
-                  offset: 1,
-                  color: 'rgba(18, 255, 245, 0)',
-                },
+                { offset: 0, color: 'rgba(255, 132, 0, .5)' },
+                { offset: 1, color: 'rgba(255, 132, 0, 0)' },
               ]),
             },
-            // emphasis: { focus: 'series' },
-            data: [140, 232, 101, 264, 90, 340, 250]
+            data: realData // 使用提取出的 "实际" 数据
           },
           {
             name: '目标',
             type: 'line',
-            stack: 'Total',
-            symbol: 'circle', // 点的形状（circle为圆形）
+            // stack: 'Total',
+            symbol: 'circle',
+            symbolSize: 8,
             lineStyle: {
-              color: 'rgba(98, 213, 180, .5)',
+              color: 'rgba(98, 213, 180, 1)', // 加深颜色
+              width: 2,
+              type: 'dashed' // 目标线使用虚线
             },
             itemStyle: {
-              color: 'rgba(98, 213, 180, .5)',
-              borderColor: 'rgba(98, 213, 180, .5)', // 数据点边框色（白色）
-              borderWidth: 2, // 数据点边框宽度
+              color: 'rgba(98, 213, 180, 1)',
+              borderColor: '#fff',
+              borderWidth: 2,
             },
             areaStyle: {
-              opacity: 0.5,
+              opacity: 0.3,
               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                {
-                  offset: 0,
-                  color: 'rgba(98, 213, 180,.4)',
-                },
-                {
-                  offset: 1,
-                  color: 'rgba(18, 255, 245, 0)',
-                },
+                { offset: 0, color: 'rgba(98, 213, 180, .5)' },
+                { offset: 1, color: 'rgba(98, 213, 180, 0)' },
               ]),
             },
-            // emphasis: { focus: 'series' },
-            data: [120, 282, 111, 234, 220, 340, 310]
+            data: targetData // 使用提取出的 "目标" 数据
           },
         ]
       };
 
-      option && myChart.setOption(option);
-
-      // 监听窗口缩放
-      window.addEventListener('resize', () => {
-        myChart.resize();
-      });
-
-      // 组件销毁时清理
-      this.$once('hook:destroyed', () => {
-        window.removeEventListener('resize', () => {
-          myChart.resize();
-        });
-        myChart.dispose();
-      });
+      // 5. 应用配置项更新图表
+      this.myChart.setOption(option, true);
     }
   },
+  beforeDestroy() {
+    // 组件销毁时清理
+    window.removeEventListener('resize', () => {
+      this.myChart?.resize();
+    });
+    this.myChart?.dispose();
+  }
 };
 </script>
 <style lang="scss" scoped>
+/* (你的样式代码保持不变) */
 .legend {
   position: absolute;
   right: 10px;
   top: -5px;
+  display: flex;
+  /* 使用 flex 布局让两个图例项并排且对齐 */
+  gap: 20px;
 }
 
 .legend-item-line {
@@ -220,25 +247,27 @@ export default {
   color: rgba(0, 0, 0, 0.8);
   text-align: left;
   font-style: normal;
-  margin-right: 20px;
-  /* 增加两个图例项之间的间距 */
   position: relative;
-  padding-left: 8px;
-  /* 给文字左侧增加内边距 */
+  padding-left: 20px;
+  /* 为圆点和线条留出空间 */
+  display: flex;
+  align-items: center;
 
   .line {
     position: absolute;
-    left: 5px;
-    /* 调整线条位置 */
-    top: 10px;
+    left: 6px;
+    /* 线条从圆点右侧开始 */
+    top: 50%;
+    transform: translateY(-50%);
     display: inline-block;
-    width: 12px;
+    width: 16px;
+    /* 线条长度 */
     height: 2px;
     margin-right: 4px;
   }
 
   .target {
-    background: rgba(91, 230, 190, 1);
+    background: rgba(98, 213, 180, 1);
   }
 
   .real {
@@ -251,23 +280,18 @@ export default {
     width: 6px;
     height: 6px;
     border-radius: 50%;
-    margin-right: 10px;
-    /* 关键：增加图例圆点和文字之间的间距 */
-    margin-bottom: 2px;
+    margin-right: 8px;
     background-color: rgba(255, 132, 0, 1);
+    position: absolute;
+    left: 10px;
+    top: 50%;
+    transform: translateY(-50%);
   }
 }
 
 .legend-item-line:nth-child(1) {
   &::before {
-    content: "";
-    display: inline-block;
-    width: 6px;
-    height: 6px;
-    margin-right: 10px;
-    /* 关键：增加图例圆点和文字之间的间距 */
-    margin-bottom: 2px;
-    background-color: rgba(91, 230, 190, 1);
+    background-color: rgba(98, 213, 180, 1);
   }
 }
 </style>
diff --git a/src/views/home/components/productBottomBar.vue b/src/views/home/components/productBottomBar.vue
index ef820ec3..278eb111 100644
--- a/src/views/home/components/productBottomBar.vue
+++ b/src/views/home/components/productBottomBar.vue
@@ -1,107 +1,81 @@
 <template>
   <div class="coreBar" style="width: 100%;">
-    <!-- 循环渲染item，data中配置的每一项对应一个卡片 -->
     <div class="barTop">
       <div class="title">生产指标趋势</div>
-
       <div class="button-group">
-        <!-- 按钮1：单价 -->
-        <div class="item-button" :class="{ active: activeButton === 0 }" @click="activeButton = 0">
-          总成本
-        </div>
-        <!-- 分割线0：单价右侧 -->
+        <div class="item-button" :class="{ active: activeButton === 0 }" @click="activeButton = 0">总成本</div>
         <div class="button-line lineOne" v-if="activeButton !== 0 && activeButton !== 1"></div>
-
-        <!-- 按钮2：净价 -->
-        <div class="item-button" :class="{ active: activeButton === 1 }" @click="activeButton = 1">
-          原片成本
-        </div>
-        <!-- 分割线1：净价右侧 -->
+        <div class="item-button" :class="{ active: activeButton === 1 }" @click="activeButton = 1">原片成本</div>
         <div class="button-line lineTwo" v-if="activeButton !== 1 && activeButton !== 2"></div>
-
-        <!-- 按钮3：销量 -->
-        <div class="item-button" :class="{ active: activeButton === 2 }" @click="activeButton = 2">
-          加工成本
-        </div>
-        <!-- 分割线2：销量右侧 -->
+        <div class="item-button" :class="{ active: activeButton === 2 }" @click="activeButton = 2">加工成本</div>
         <div class="button-line lineThree" v-if="activeButton !== 2 && activeButton !== 3"></div>
-
-        <!-- 按钮4：双镀产品 -->
         <div class="item-button" style="width: 75px;" :class="{ active: activeButton === 3 }" @click="activeButton = 3">
-          原片成品率
-        </div>
+          原片成品率</div>
         <div class="button-line lineFour" v-if="activeButton !== 3 && activeButton !== 4"></div>
-
-        <!-- 按钮5：投入产出率 -->
         <div class="item-button" style="width: 75px;" :class="{ active: activeButton === 4 }" @click="activeButton = 4">
-          投入产出率
-        </div>
+          投入产出率</div>
       </div>
     </div>
-    <div class="lineBottom" style="height: 219px; width: 100%">
-      <coreLineChart style="height: 219px; width: 500px" />
+    <div class="lineBottom" style="height: 219px; width: 100%" v-if="isLineDataReady">
+      <!-- 核心改动：动态传递数据给子组件 -->
+      <coreLineChart style="height: 219px; width: 100%" :chart-data="selectedChartData" :dateData="dateData" />
     </div>
   </div>
 </template>
 
 <script>
 import coreLineChart from './productBar.vue';
+
 export default {
   name: "Container",
   components: { coreLineChart },
-  props: ["name", "size", "icon"],
+  props: ["lineData",'dateData'], // 接收父组件传递的完整line数据对象
   data() {
     return {
-      // 所有item的数据配置，后续修改直接操作这个数组即可
       activeButton: 0, // 初始激活第一个按钮（索引0）
-      itemList: [
-        {
-          unit: "单价·元/m²", // 标题
-          targetValue: 16, // 左侧目标值
-          currentValue: 14.5, // 右侧当前值（可根据实际需求修改）
-          progress: 90, // 进度百分比
-        },
-        {
-          unit: "净价·元/m²",
-          targetValue: 16,
-          currentValue: 15.2,
-          progress: 85,
-        },
-        {
-          unit: "销量·万m²",
-          targetValue: 20,
-          currentValue: 16,
-          progress: 80,
-        },
-        {
-          unit: "双镀面板·万m²",
-          targetValue: 15,
-          currentValue: 13.8,
-          progress: 92,
-        },
-      ],
     };
   },
-  computed: {},
-  methods: {
+  computed: {
+    isLineDataReady() {
+      // 确保 lineData 是一个对象，而不是 null 或 undefined
+      return this.lineData && typeof this.lineData === 'object';
+    },
+    // 核心改动：计算属性，根据activeButton动态返回选中的数据
+    selectedChartData() {
+      // 定义按钮索引与lineData中key的映射关系
+      const dataKeyMap = [
+        '总成本',
+        '原片成本',
+        '加工成本',
+        '原片成品率',
+        '投入产出率'
+      ];
+
+      // 根据当前激活的按钮索引获取对应的数据key
+      const selectedKey = dataKeyMap[this.activeButton];
+      console.log(this.lineData[selectedKey]);
+
+
+      // 从lineData中获取对应的数据，如果不存在则返回一个空对象以防止报错
+      return this.lineData ? this.lineData[selectedKey] || {} : {};
+    }
   },
+  methods: {},
 };
 </script>
 
 <style scoped lang="scss">
+/* (你的样式代码保持不变) */
 .coreBar {
   display: flex;
   flex-direction: column;
   padding: 12px;
 
-  // grid-template-columns: 1fr 1fr;
-  // grid-template-rows: 1fr 1fr;
-  // gap: 8px;
   .barTop {
     display: flex;
     gap: 40px;
+
     .title {
-      // width: 124px;
       height: 18px;
       font-family: PingFangSC, PingFang SC;
       font-weight: 400;
@@ -116,42 +90,40 @@ export default {
     .button-group {
       display: flex;
       position: relative;
-      // justify-content: space-around;
       gap: 2px;
       width: 327px;
       align-items: center;
       height: 24px;
       background: #ecf4fe;
       border-radius: 12px;
-            .button-line {
-                position: absolute;
-                // top: 5px;
-                // left: 54px;
-                width: 1px;
-                height: 14px;
-                border: 1px solid rgba(11, 88, 255, 0.25);
-              }
+
+      .button-line {
+        position: absolute;
+        width: 1px;
+        height: 14px;
+        border: 1px solid rgba(11, 88, 255, 0.25);
+      }
+
       .lineOne {
         top: 5px;
         left: 57px;
       }
+
       .lineTwo {
         top: 5px;
         left: 118px;
       }
+
       .lineThree {
         top: 5px;
         left: 177px;
       }
-                .lineFour {
-                  top: 5px;
-                  left: 268px;
-                }
 
-      // .button-line:nth-child(3) {
-      //   top: 5px;
-      //   left: 216px;
-      // }
+      .lineFour {
+        top: 5px;
+        left: 268px;
+      }
+
       .item-button {
         cursor: pointer;
         width: 59px;
@@ -164,21 +136,14 @@ export default {
         text-align: center;
         font-style: normal;
       }
-      // .item-button:nth-child(6){
-      //   width: 75px;
 
-      // }
-      //           .item-button:nth-child(8) {
-      //             width: 75px;
-
-      //           }
       .item-button.active {
         width: 59px;
         height: 24px;
         background: #3071ff;
         border-radius: 12px;
-        color: #ffffff; // 文字变白，提高对比度
-        font-weight: 500; // 文字加粗，突出激活状态
+        color: #ffffff;
+        font-weight: 500;
       }
     }
   }
diff --git a/src/views/home/components/purchase-Item.vue b/src/views/home/components/purchase-Item.vue
index d1f5e2f4..b36f61be 100644
--- a/src/views/home/components/purchase-Item.vue
+++ b/src/views/home/components/purchase-Item.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="coreItem">
     <div class="item" @click="handleRoute(item.route)" v-for="(item, index) in itemList" :key="index">
-      <div class="unit">{{ item.unit }}</div>
+      <div class="name">{{ item.name }}</div>
       <div class="item-content">
         <div class="content-wrapper">
           <div class="left">
@@ -54,45 +54,83 @@
 export default {
   name: "Container",
   components: {},
-  props: ["name", "size", "icon"],
+  props: ["finance",'dateData'],
   data() {
     return {
-      itemList: [
-        {
-          unit: "营业收入·万元",
-          targetValue: 16,
-          currentValue: 17.2, // 大于目标值（绿色）
-          progress: 107.5,
-          route: 'operatingRevenue'
-        },
-        {
-          unit: "经营性利润·万元",
-          targetValue: 16,
-          currentValue: 16, // 等于目标值（绿色）
-          progress: 100,
-          route: 'profitAnalysis'
-        },
-        {
-          unit: "利润总额·万元",
-          targetValue: 16,
-          currentValue: 14.8, // 小于目标值（黄色）
-          progress: 92.5,
-          route: 'profitAnalysis'
-        },
-        {
-          unit: "毛利率·%",
-          targetValue: 16,
-          currentValue: 15.5, // 小于目标值（黄色）
-          progress: 96.875,
-          route: 'profitAnalysis'
-        }
-      ]
+      // 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'
+      //   }
+      // ]
     };
   },
+  watch: {
+    finance: {
+      handler(newVal) {
+        if (newVal) {
+          this.itemList = this.transformData(newVal);
+        }
+      },
+      immediate: true,
+      deep: true
+    }
+  },
   methods: {
+    transformData(rawData) {
+      // 定义指标映射关系，包括名称、对应的数据键和路由
+      const Mapping = [
+        { key: 'operatingRevenue', name: '营业收入·万元', route: 'operatingRevenue' },
+        { key: 'operatingIncome', name: '经营性利润·万元', route: 'profitAnalysis' },
+        { key: 'totalProfit', name: '利润总额·万元', route: 'profitAnalysis' },
+        { key: 'grossMargin', name: '毛利率·%', route: 'profitAnalysis' }
+      ];
+
+      // 遍历映射关系，转换数据
+      return Mapping.map(mappingItem => {
+        const data = rawData[mappingItem.key] || { rate: 0, real: 0, target: 0 };
+
+        return {
+          name: mappingItem.name,
+          targetValue: data.target,
+          currentValue: data.real,
+          progress: Math.round(data.rate), // 将小数率转换为百分比并四舍五入
+          route: mappingItem.route
+        };
+      });
+    },
     handleRoute(route) {
       if (route) {
-        this.$router.push({ path: route });
+        this.$router.push({
+          path: route,
+          query: {
+            dateData: this.dateData
+          }
+         });
       }
     }
   }
@@ -120,7 +158,7 @@ export default {
     transform: translateY(-2px);
   }
 
-  .unit {
+  .name {
     height: 18px;
     font-family: PingFangSC, PingFang SC;
     font-weight: 400;
diff --git a/src/views/home/components/top-item.vue b/src/views/home/components/top-item.vue
index 911e5db2..5338c21e 100644
--- a/src/views/home/components/top-item.vue
+++ b/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
+          }
+         });
       }
     }
   }
diff --git a/src/views/home/components/top-product-item.vue b/src/views/home/components/top-product-item.vue
index 270b819f..72cd9753 100644
--- a/src/views/home/components/top-product-item.vue
+++ b/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;
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 3249e54d..ff0aaf96 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div id="dayReport" class="dayReport" :style="styles">
     <ReportHeader top-title="洛玻集团运营驾驶舱" :is-full-screen="isFullScreen" @screenfullChange="screenfullChange"
-       @timeRangeChange="handleTimeChange" />
+      @timeRangeChange="handleTimeChange" />
     <div class="main-body"
       style="margin-top: -20px; flex: 1; display: flex;padding: 0px 16px 0;flex-direction: column;">
       <div class="top" style="display: flex;gap: 16px;">
@@ -10,9 +10,9 @@
               gap: 12px;
               grid-template-columns: 560px 745px 560px ;
             ">
-          <coreSalesKPIs />
-          <financeCosts />
-          <keyProductionIndicators />
+          <coreSalesKPIs :sale="sale" :dateData="dateData" />
+          <financeCosts :finance="finance" :dateData="dateData" :cost="cost" />
+          <keyProductionIndicators :productData="productData" :dateData="dateData" />
         </div>
       </div>
       <div class="top" style="display: flex;gap: 16px;margin-top: 6px;">
@@ -21,9 +21,9 @@
               gap: 12px;
               grid-template-columns: 560px 745px 560px ;
             ">
-          <coreBottomLeft />
-          <orderProgress />
-          <keyWork />
+          <coreBottomLeft :purchase="purchase" :inventory="inventory" />
+          <orderProgress @getData="getOrderData" :baseOrder="baseOrder" :orderOutput="orderOutput" />
+          <keyWork :importantWork="importantWork" />
         </div>
       </div>
     </div>
@@ -38,7 +38,8 @@ import keyProductionIndicators from './components/keyProductionIndicators.vue'
 import coreBottomLeft from './components/coreBottomLeft.vue'
 import orderProgress from './components/orderProgress.vue'
 import keyWork from './components/keyWork.vue'
-import moment from 'moment'
+// import moment from 'moment'
+import { getOperateCockpit } from '@/api/cockpit'
 export default {
   name: 'DayReport',
   components: { ReportHeader, coreSalesKPIs, keyProductionIndicators, coreBottomLeft, keyWork, orderProgress, financeCosts },
@@ -48,6 +49,16 @@ export default {
       timer: null,
       beilv: 1,
       value: 100,
+      productData: {},
+      purchase: {},
+      dateData:{},
+      inventory: {},
+      importantWork: {},
+      finance: {},
+      cost: {},
+      sale: {},
+      orderOutput: {},
+      baseOrder:[],
     }
   },
 
@@ -96,9 +107,52 @@ export default {
     }
   },
   methods: {
+    getOrderData(num) {
+      this.getData({
+        startTime: this.dateData.startTime,
+        endTime: this.dateData.endTime,
+        timeDim: this.dateData.mode,
+        baseId: num
+      })
+    },
+    getData(obj) {
+      console.log('obj', obj);
+
+      this.dateData= obj
+      getOperateCockpit({
+        startTime: obj.startTime,
+        endTime: obj.endTime,
+        timeDim: obj.mode ? obj.mode : obj.timeDim,
+        baseId: obj.baseId ? obj.baseId : 1
+      }).then((res) => {
+        console.log(res)
+        this.productData = res.data.product
+        this.purchase = res.data.purchase
+        this.inventory = res.data.inventory
+        this.importantWork = res.data.importantWork
+        this.finance = res.data.finance
+        this.cost = res.data.cost
+        this.sale = res.data.sale
+        this.orderOutput = res.data.orderOutput
+        this.baseOrder = res.data.baseOrder
+        // this.saleData = res.data.SaleData
+        // this.premiumProduct = res.data.premiumProduct
+        // this.salesTrendMap = res.data.salesTrendMap
+        // this.grossMarginTrendMap = res.data.grossMarginTrendMap
+        // this.salesProportion = res.data.salesProportion ? res.data.salesProportion : {}
+      })
+    },
+    handleTimeChange(obj) {
+      console.log(obj, 'obj');
+      this.getData(obj)
+    },
     change() {
       this.isFullScreen = screenfull.isFullscreen
     },
+    windowWidth(value) {
+      this.clientWidth = value;
+      this.beilv2 = this.clientWidth / 1920;
+    },
     init() {
       if (!screenfull.isEnabled) {
         this.$message({