From dfa4ff3f54f4079f8f4edcd529ae0be6bb1d4023 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=98937886381=E2=80=99?= <‘937886381@qq.com’>
Date: Fri, 14 Nov 2025 17:04:22 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/home/components/KFAP.vue            |   8 +-
 src/views/home/components/KFAPMiddleBar.vue   | 124 ++++++++----
 src/views/home/components/coreBottomBar.vue   |   7 +-
 .../home/components/financeCostsBottomBar.vue |   8 +-
 src/views/home/components/operating-item.vue  |   4 +-
 src/views/home/components/operatingBar.vue    | 190 +++++++++++++++++-
 .../home/components/operatingLineBar.vue      |  38 ++--
 .../home/components/operatingLineBarSale.vue  | 173 ++++++++++++++++
 .../home/components/operatingSalesRevenue.vue |  64 +++++-
 .../home/components/order-bottom-leftItem.vue |   2 +-
 src/views/home/components/premProdStatus.vue  |  23 ++-
 .../home/components/profit-item-middle.vue    |   2 +-
 src/views/home/components/profit-item.vue     |   2 +-
 src/views/home/components/profitBar.vue       |  53 ++++-
 src/views/home/components/psiLineBar.vue      |   4 +-
 src/views/home/components/psr-item.vue        |   2 +-
 src/views/home/components/top-item.vue        |   2 +-
 .../home/components/top-product-item.vue      |   2 +-
 .../costComponents/costItemOverviewItem.vue   |  32 +--
 .../home/costComponents/operatingLineBar.vue  |  56 +++++-
 .../costComponents/processingCost-Item.vue    |   1 +
 .../home/costComponents/productLeftTable.vue  |   4 +-
 .../home/costComponents/productRightTable.vue |   4 +-
 .../costComponents/profitImpactLineChart.vue  |   2 +-
 .../home/costComponents/rawSheet-Item.vue     |   1 +
 src/views/home/costComponents/top-item.vue    |   2 +-
 .../home/costComponents/top-product-item.vue  |   2 +-
 src/views/home/profitAnalysis.vue             |  13 +-
 28 files changed, 684 insertions(+), 141 deletions(-)
 create mode 100644 src/views/home/components/operatingLineBarSale.vue

diff --git a/src/views/home/components/KFAP.vue b/src/views/home/components/KFAP.vue
index d3bb76c0..36ed7f84 100644
--- a/src/views/home/components/KFAP.vue
+++ b/src/views/home/components/KFAP.vue
@@ -8,7 +8,7 @@
         <div class="bottom"
           style="height: 227px; margin-left: 16px; display: flex; width: 100%;background-color: rgba(249, 252, 255, 1);">
           <KFAPMiddleBar :chartData="{
-            allPlaceNames, incomeValueData, profitProportionData, costValueData, costCompletedData
+  allPlaceNames, incomeValueData, profitListData, costValueData, costCompletedData
           }" />
         </div>
       </div>
@@ -51,11 +51,13 @@ export default {
       if (!Array.isArray(this.middleChartData)) return [];
       return this.middleChartData.map(item => item.name).filter(Boolean);
     },
-    profitProportionData() {
+    profitListData() {
       if (!Array.isArray(this.middleChartData)) return [];
       return this.PlaceNames.map(place => {
         const target = this.middleChartData.find(item => item.name === place);
-        return target?.profitProportion || 0;
+        console.log('target?.profit', target?.profit);
+
+        return target?.profit || 0;
       });
     },
     incomeValueData() {
diff --git a/src/views/home/components/KFAPMiddleBar.vue b/src/views/home/components/KFAPMiddleBar.vue
index a35ab0e5..a4d310dd 100644
--- a/src/views/home/components/KFAPMiddleBar.vue
+++ b/src/views/home/components/KFAPMiddleBar.vue
@@ -7,7 +7,7 @@
       <div class="right-container">
         <div class="legend">
           <span class="legend-item">
-            <span class="legend-icon line yield"></span>
+            <span class="legend-icon square yield"></span>
             利润
           </span>
           <span class="legend-item">
@@ -60,39 +60,13 @@ export default {
     // 原有计算属性（allPlaceNames、profitProportionData 等）保持不变
     // 新增：定义图表 series 配置
     chartSeries() {
-      const { allPlaceNames, incomeValueData, profitProportionData, costValueData, costCompletedData } = this.chartData
+      const { allPlaceNames, incomeValueData, profitListData, costValueData, costCompletedData } = this.chartData
       // 处理空数据默认值
       const incomeData = incomeValueData || Array(allPlaceNames.length).fill(0);
-      const profitData = profitProportionData || Array(allPlaceNames.length).fill(0);
+      const profitData = profitListData || Array(allPlaceNames.length).fill(0);
       const costData = costValueData || Array(allPlaceNames.length).fill(0);
 
       return [
-        // 1. 利润占比：折线图
-        {
-          name: '利润',
-          type: 'line',
-          yAxisIndex: 1,
-          lineStyle: {
-            color: 'rgba(40, 138, 255, .5)',
-            width: 2
-          },
-          itemStyle: {
-            color: 'rgba(40, 138, 255, 1)',
-            borderColor: 'rgba(40, 138, 255, 1)',
-            borderWidth: 2,
-            radius: 4
-          },
-          areaStyle: {
-            opacity: 0.2,
-            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-              { offset: 0, color: 'rgba(40, 138, 255, .9)' },
-              { offset: 1, color: 'rgba(255, 132, 0, 0)' }
-            ])
-          },
-          data: profitData,
-          symbol: 'circle',
-          symbolSize: 6
-        },
         // 2. 营业收入：柱状图
         {
           name: '营业收入',
@@ -100,26 +74,106 @@ export default {
           yAxisIndex: 0,
           barWidth: 18,
           itemStyle: {
-            color: '#2889FF',
-            borderRadius: [4, 4, 0, 0]
+            // 移除多余的 normal 层级，直接配置 color 渐变
+            color: {
+              type: 'linear',
+              x: 0,
+              y: 0,
+              x2: 0,
+              y2: 1,
+              colorStops: [
+                { offset: 0, color: 'rgba(130, 204, 255, 1)' },
+                { offset: 1, color: '#2889FF' }
+              ]
+            },
+            borderRadius: [4, 4, 0, 0],
+            borderWidth: 0
           },
+          // itemStyle: {
+          //   color: '#2889FF',
+          //   borderRadius: [4, 4, 0, 0]
+          // },
           data: incomeData
         },
         // 3. 成本：柱状图（动态颜色）
         {
           name: '成本',
           type: 'bar',
+          stack: 'total', // 堆叠分组名（与利润保持一致）
           yAxisIndex: 0,
           barWidth: 18,
           itemStyle: {
+            // 根据 safeFlag 动态返回不同的渐变色
             color: (params) => {
-              const completed = costCompletedData?.[params.dataIndex] ?? 0;
-              return completed === 1 ? 'rgba(255, 132, 0, 1)' : 'rgba(40, 203, 151, 1)';
+              const dataIndex = params.dataIndex;
+              const currentFlag = costCompletedData[dataIndex] || 0; // 默认为0（不达标）
+
+              // 达标时的渐变（绿色系）
+              if (currentFlag === 1) {
+                return {
+                  type: 'linear',
+                  x: 0,
+                  y: 0,
+                  x2: 0,
+                  y2: 1,
+                  colorStops: [
+                    { offset: 0, color: 'rgba(174, 239, 224, 1)' }, // 浅绿
+                    { offset: 1, color: 'rgba(118, 218, 190, 1)' }  // 深绿
+                  ]
+                };
+              }
+              // 不达标时的渐变（橙色系）
+              else {
+                return {
+                  type: 'linear',
+                  x: 0,
+                  y: 0,
+                  x2: 0,
+                  y2: 1,
+                  colorStops: [
+                    { offset: 0, color: 'rgba(253, 209, 129, 1)' }, // 浅橙
+                    { offset: 1, color: 'rgba(249, 164, 74, 1)' }   // 深橙
+                  ]
+                };
+              }
             },
-            borderRadius: [4, 4, 0, 0]
+            borderRadius: [4, 4, 0, 0],
+            borderWidth: 0
           },
           data: costData
-        }
+        },
+        {
+          name: '利润',
+          type: 'bar',
+          yAxisIndex: 0,
+          // lineStyle: {
+          //   color: 'rgba(40, 138, 255, .5)',
+          //   width: 2
+          // },
+          stack: 'total', // 堆叠分组名（与利润保持一致）
+          barWidth: 18,
+          itemStyle: {
+            // 移除多余的 normal 层级，直接配置 color 渐变
+            color: {
+              type: 'linear',
+              x: 0,
+              y: 0,
+              x2: 0,
+              y2: 1,
+              colorStops: [
+                { offset: 0, color: 'rgba(130, 204, 255, 1)' },
+                { offset: 1, color: '#288aff' }
+              ]
+            },
+            borderRadius: [4, 4, 0, 0],
+            borderWidth: 0
+          },
+          // itemStyle: {
+          //   color: '#288aff',
+          //   borderRadius: [4, 4, 0, 0]
+          // },
+          data: profitData,
+        },
       ];
     }
   },
diff --git a/src/views/home/components/coreBottomBar.vue b/src/views/home/components/coreBottomBar.vue
index d12c4acf..25a9687d 100644
--- a/src/views/home/components/coreBottomBar.vue
+++ b/src/views/home/components/coreBottomBar.vue
@@ -65,8 +65,7 @@ export default {
             lineStyle: { color: 'rgba(91, 230, 190, 1)', width: 2 },
             itemStyle: {
               color: 'rgba(91, 230, 190, 1)',
-              borderColor: '#fff',
-              borderWidth: 1
+              borderColor: 2
             },
             areaStyle: {
               opacity: 0.3,
@@ -86,8 +85,8 @@ export default {
             lineStyle: { color: 'rgba(255, 132, 0, 1)', width: 2 },
             itemStyle: {
               color: 'rgba(255, 132, 0, 1)',
-              borderColor: '#fff',
-              borderWidth: 1
+              borderColor: 'rgba(255, 132, 0, 1)',
+              borderWidth: 2,
             },
             areaStyle: {
               opacity: 0.3,
diff --git a/src/views/home/components/financeCostsBottomBar.vue b/src/views/home/components/financeCostsBottomBar.vue
index b00b7ddc..3eacb2a6 100644
--- a/src/views/home/components/financeCostsBottomBar.vue
+++ b/src/views/home/components/financeCostsBottomBar.vue
@@ -66,8 +66,8 @@ export default {
             lineStyle: { color: 'rgba(91, 230, 190, 1)' },
             itemStyle: {
               color: 'rgba(91, 230, 190, 1)',
-              borderColor: '#fff',
-              borderWidth: 1
+              borderColor: 'rgba(91, 230, 190, 1)',
+              borderWidth: 2
             },
             areaStyle: {
               opacity: 0.3,
@@ -86,8 +86,8 @@ export default {
             lineStyle: { color: 'rgba(255, 132, 0, 1)' },
             itemStyle: {
               color: 'rgba(255, 132, 0, 1)',
-              borderColor: '#fff',
-              borderWidth: 1
+              borderColor: 'rgba(255, 132, 0, 1)',
+              borderWidth: 2
             },
             areaStyle: {
               opacity: 0.3,
diff --git a/src/views/home/components/operating-item.vue b/src/views/home/components/operating-item.vue
index d8b753a7..daa18395 100644
--- a/src/views/home/components/operating-item.vue
+++ b/src/views/home/components/operating-item.vue
@@ -22,7 +22,7 @@
           <div class="right">
             <!-- 完成率颜色动态绑定 -->
             <div class="number" :style="{ 'color': item.completed === 0 ? '#FF8400' : 'rgba(54, 181, 138, .7)' }">
-{{ item.proportion !== null && item.proportion !== undefined ? (item.proportion * 100) + '%' : '0%' }}
+{{ item.proportion !== null && item.proportion !== undefined ? (item.proportion) + '%' : '0%' }}
             </div>
             <div class="title">完成率</div>
           </div>
@@ -133,7 +133,7 @@ export default {
     height: 46px;
     background: linear-gradient(to bottom,
         rgba(255, 0, 0, 0),
-        rgba(40, 203, 151, 1));
+        #cbcbcb);
   }
 
   .left,
diff --git a/src/views/home/components/operatingBar.vue b/src/views/home/components/operatingBar.vue
index 99f9fef2..532df8e9 100644
--- a/src/views/home/components/operatingBar.vue
+++ b/src/views/home/components/operatingBar.vue
@@ -36,13 +36,15 @@
       </div>
     </div>
     <div class="lineBottom" style="height: 100%; width: 100%">
-      <operatingLineBar style="height: 99%; width: 100%" />
+      <operatingLineBar :chartData="chartData" style="height: 99%; width: 100%" />
     </div>
   </div>
 </template>
 
 <script>
-import operatingLineBar from './operatingLineBar.vue';
+import operatingLineBar from './operatingLineBarSale.vue';
+import * as echarts from 'echarts';
+
 export default {
   name: "Container",
   components: { operatingLineBar },
@@ -50,15 +52,185 @@ export 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 },
-      ],
     };
   },
-  computed: {},
+  computed: {
+    // 根据按钮切换生成对应的 chartData
+    chartData() {
+      // 销量场景数据
+      const salesData = {
+        allPlaceNames: ['桐城', '合肥', '宜兴', '漳州', '自贡', '洛阳'], // x轴刻度
+        series: [
+          // 1. 完成率（折线图）
+          {
+            name: '完成率',
+            type: 'line',
+            yAxisIndex: 1, // 绑定右侧Y轴（需在子组件启用配置）
+            lineStyle: {
+              color: 'rgba(40, 138, 255, .5)',
+              width: 2
+            },
+            itemStyle: {
+              color: 'rgba(40, 138, 255, 1)',
+              borderColor: 'rgba(40, 138, 255, 1)',
+              borderWidth: 2,
+              radius: 4
+            },
+            areaStyle: {
+              opacity: 0.2,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: 'rgba(40, 138, 255, .9)' },
+                { offset: 1, color: 'rgba(40, 138, 255, 0)' }
+              ])
+            },
+            data: [104, 96.7, 107.3, 97.1, 107.7, 93.8], // 完成率（%）
+            symbol: 'circle',
+            symbolSize: 6
+          },
+          // 2. 目标（柱状图）
+          {
+            name: '目标',
+            type: 'bar',
+            yAxisIndex: 0, // 左侧Y轴（万元）
+            barWidth: 14,
+            itemStyle: {
+              color: {
+                type: 'linear',
+                x: 0, y: 0, x2: 0, y2: 1,
+                colorStops: [
+                  { offset: 0, color: 'rgba(130, 204, 255, 1)' },
+                  { offset: 1, color: 'rgba(75, 157, 255, 1)' }
+                ]
+              },
+              borderRadius: [4, 4, 0, 0],
+              borderWidth: 0
+            },
+            data: [50, 60, 55, 70, 65, 80] // 目标销量（万元）
+          },
+          // 3. 实际（柱状图，含达标状态）
+          {
+            name: '实际',
+            type: 'bar',
+            yAxisIndex: 0,
+            barWidth: 14,
+            itemStyle: {
+              color: (params) => {
+                // 达标状态：1=达标（绿色），0=未达标（橙色）
+                const safeFlag = [1, 0, 1, 0, 1, 0];
+                const currentFlag = safeFlag[params.dataIndex] || 0;
+                return currentFlag === 1
+                  ? {
+                    type: 'linear',
+                    x: 0, y: 0, x2: 0, y2: 1,
+                    colorStops: [
+                      { offset: 0, color: 'rgba(174, 239, 224, 1)' },
+                      { offset: 1, color: 'rgba(118, 218, 190, 1)' }
+                    ]
+                  }
+                  : {
+                    type: 'linear',
+                    x: 0, y: 0, x2: 0, y2: 1,
+                    colorStops: [
+                      { offset: 0, color: 'rgba(253, 209, 129, 1)' },
+                      { offset: 1, color: 'rgba(249, 164, 74, 1)' }
+                    ]
+                  };
+              },
+              borderRadius: [4, 4, 0, 0],
+              borderWidth: 0
+            },
+            data: [52, 58, 59, 68, 70, 75] // 实际销量（万元）
+          }
+        ]
+      };
+
+      // 毛利率场景数据
+      const grossProfitData = {
+        allPlaceNames: ['1月', '2月', '3月', '4月', '5月', '6月'],
+        series: [
+          // 1. 完成率（折线图）
+          {
+            name: '完成率',
+            type: 'line',
+            yAxisIndex: 1,
+            lineStyle: { color: 'rgba(40, 138, 255, .5)', width: 2 },
+            itemStyle: {
+              color: 'rgba(40, 138, 255, 1)',
+              borderColor: 'rgba(40, 138, 255, 1)',
+              borderWidth: 2,
+              radius: 4
+            },
+            areaStyle: {
+              opacity: 0.2,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: 'rgba(40, 138, 255, .9)' },
+                { offset: 1, color: 'rgba(40, 138, 255, 0)' }
+              ])
+            },
+            data: [106.7, 96.9, 106.5, 106.1, 93.8, 105.9], // 毛利率完成率（%）
+            symbol: 'circle',
+            symbolSize: 6
+          },
+          // 2. 目标（柱状图）
+          {
+            name: '目标',
+            type: 'bar',
+            yAxisIndex: 0,
+            barWidth: 14,
+            itemStyle: {
+              color: {
+                type: 'linear',
+                x: 0, y: 0, x2: 0, y2: 1,
+                colorStops: [
+                  { offset: 0, color: 'rgba(130, 204, 255, 1)' },
+                  { offset: 1, color: 'rgba(75, 157, 255, 1)' }
+                ]
+              },
+              borderRadius: [4, 4, 0, 0],
+              borderWidth: 0
+            },
+            data: [30, 32, 31, 33, 32, 34] // 目标毛利率（万元）
+          },
+          // 3. 实际（柱状图）
+          {
+            name: '实际',
+            type: 'bar',
+            yAxisIndex: 0,
+            barWidth: 14,
+            itemStyle: {
+              color: (params) => {
+                const safeFlag = [1, 0, 1, 1, 0, 1]; // 达标状态
+                const currentFlag = safeFlag[params.dataIndex] || 0;
+                return currentFlag === 1
+                  ? {
+                    type: 'linear',
+                    x: 0, y: 0, x2: 0, y2: 1,
+                    colorStops: [
+                      { offset: 0, color: 'rgba(174, 239, 224, 1)' },
+                      { offset: 1, color: 'rgba(118, 218, 190, 1)' }
+                    ]
+                  }
+                  : {
+                    type: 'linear',
+                    x: 0, y: 0, x2: 0, y2: 1,
+                    colorStops: [
+                      { offset: 0, color: 'rgba(253, 209, 129, 1)' },
+                      { offset: 1, color: 'rgba(249, 164, 74, 1)' }
+                    ]
+                  };
+              },
+              borderRadius: [4, 4, 0, 0],
+              borderWidth: 0
+            },
+            data: [32, 31, 33, 35, 30, 36] // 实际毛利率（万元）
+          }
+        ]
+      };
+
+      // 根据按钮状态返回对应数据
+      return this.activeButton === 0 ? salesData : grossProfitData;
+    }
+  },
   methods: {},
 };
 </script>
diff --git a/src/views/home/components/operatingLineBar.vue b/src/views/home/components/operatingLineBar.vue
index 7130c104..cefdd756 100644
--- a/src/views/home/components/operatingLineBar.vue
+++ b/src/views/home/components/operatingLineBar.vue
@@ -131,25 +131,25 @@ export default {
             splitNumber: 4
           },
           // 右侧Y轴：利润占比（百分比）
-          {
-            type: 'value',
-            nameTextStyle: {
-              color: 'rgba(0, 0, 0, 0.45)',
-              fontSize: 12,
-              align: 'left'
-            },
-            min: 0,
-            max: 100,
-            axisTick: { show: false },
-            axisLabel: {
-              color: 'rgba(0, 0, 0, 0.45)',
-              fontSize: 12,
-              formatter: '{value}%'
-            },
-            splitLine: { show: false },
-            axisLine: { lineStyle: { color: 'rgba(0, 0, 0, 0.15)' } },
-            splitNumber: 4
-          }
+          // {
+          //   type: 'value',
+          //   nameTextStyle: {
+          //     color: 'rgba(0, 0, 0, 0.45)',
+          //     fontSize: 12,
+          //     align: 'left'
+          //   },
+          //   min: 0,
+          //   max: 100,
+          //   axisTick: { show: false },
+          //   axisLabel: {
+          //     color: 'rgba(0, 0, 0, 0.45)',
+          //     fontSize: 12,
+          //     formatter: '{value}%'
+          //   },
+          //   splitLine: { show: false },
+          //   axisLine: { lineStyle: { color: 'rgba(0, 0, 0, 0.15)' } },
+          //   splitNumber: 4
+          // }
         ],
         series: chartSeries // 直接使用父组件传递的 series
       };
diff --git a/src/views/home/components/operatingLineBarSale.vue b/src/views/home/components/operatingLineBarSale.vue
new file mode 100644
index 00000000..8e0ee6e6
--- /dev/null
+++ b/src/views/home/components/operatingLineBarSale.vue
@@ -0,0 +1,173 @@
+<template>
+  <div ref="cockpitEffChip" id="coreLineChart" style="width: 100%; height: 400px;"></div>
+</template>
+<script>
+import * as echarts from 'echarts';
+
+export default {
+  components: {},
+  data() {
+    return {
+      myChart: null // 存储图表实例，避免重复创建
+    };
+  },
+  props: {
+    // 明确接收的props结构，增强可读性
+    chartData: {
+      type: Object,
+      default: () => ({
+        series: [],
+        allPlaceNames: []
+      }),
+      // 校验数据格式
+      validator: (value) => {
+        return Array.isArray(value.series) && Array.isArray(value.allPlaceNames);
+      }
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.updateChart();
+    });
+  },
+
+  // 新增：监听 chartData 变化
+  watch: {
+    // 深度监听数据变化，仅更新图表配置（不销毁实例）
+    chartData: {
+      handler() {
+        console.log(this.chartData,'chartData');
+
+        this.updateChart();
+      },
+      deep: true,
+      immediate: true // 初始化时立即执行
+    }
+  },
+  methods: {
+    updateChart() {
+      const chartDom = this.$refs.cockpitEffChip;
+      if (!chartDom) {
+        console.error('图表容器未找到！');
+        return;
+      }
+
+      if (this.myChart) {
+        this.myChart.dispose();
+      }
+
+      this.myChart = echarts.init(chartDom);
+      const { allPlaceNames, series } = this.chartData || {};
+
+      // 处理空数据
+      const xData = allPlaceNames || [];
+      const chartSeries = series || []; // 父组件传递的 series
+
+      const option = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#6a7985'
+            }
+          },
+          // formatter: (params) => {
+          //   let html = `${params[0].axisValue}<br/>`;
+          //   params.forEach(item => {
+          //     const unit = item.seriesName === '完成率' ? '%' : (
+          //       ['产量', '销量'].includes(this.$parent.selectedProfit) ? '片' : '万元'
+          //     );
+          //     html += `${item.marker} ${item.seriesName}: ${item.value}${unit}<br/>`;
+          //   });
+          //   return html;
+          // }
+        },
+        grid: {
+          top: 30,
+          bottom: 30,
+          right: 70,
+          left: 40,
+        },
+        xAxis: [
+          {
+            type: 'category',
+            boundaryGap: true,
+            axisTick: { show: false },
+            axisLine: {
+              show: true,
+              lineStyle: { color: 'rgba(0, 0, 0, 0.15)' }
+            },
+            axisLabel: {
+              color: 'rgba(0, 0, 0, 0.45)',
+              fontSize: 12,
+              interval: 0,
+              padding: [5, 0, 0, 0]
+            },
+            data: xData
+          }
+        ],
+        yAxis: [
+          // 左侧Y轴：营业收入、成本（单位万元）
+          {
+            type: 'value',
+            name: '万元',
+            nameTextStyle: {
+              color: 'rgba(0, 0, 0, 0.45)',
+              fontSize: 12,
+              align: 'right'
+            },
+            min: 0,
+            max: (value) => Math.ceil((value.max || 0) * 1.1),
+            scale: false,
+            axisTick: { show: false },
+            axisLabel: {
+              color: 'rgba(0, 0, 0, 0.45)',
+              fontSize: 12,
+              formatter: '{value}'
+            },
+            splitLine: { lineStyle: { color: 'rgba(0, 0, 0, 0.15)' } },
+            axisLine: { lineStyle: { color: 'rgba(0, 0, 0, 0.15)' } },
+            splitNumber: 4
+          },
+          // 右侧Y轴：利润占比（百分比）
+          {
+            type: 'value',
+            nameTextStyle: {
+              color: 'rgba(0, 0, 0, 0.45)',
+              fontSize: 12,
+              align: 'left'
+            },
+            // min: 0,
+            // max: 100,
+            axisTick: { show: false },
+            axisLabel: {
+              color: 'rgba(0, 0, 0, 0.45)',
+              fontSize: 12,
+              formatter: '{value}%'
+            },
+            splitLine: { show: false },
+            axisLine: { lineStyle: { color: 'rgba(0, 0, 0, 0.15)' } },
+            splitNumber: 4
+          }
+        ],
+        series: chartSeries // 直接使用父组件传递的 series
+      };
+
+      option && this.myChart.setOption(option);
+
+      // 窗口缩放适配和销毁逻辑保持不变
+      window.addEventListener('resize', () => {
+        this.myChart && this.myChart.resize();
+      });
+
+      this.$once('hook:destroyed', () => {
+        window.removeEventListener('resize', () => {
+          this.myChart && this.myChart.resize();
+        });
+        this.myChart && this.myChart.dispose();
+      });
+    }
+  },
+};
+</script>
diff --git a/src/views/home/components/operatingSalesRevenue.vue b/src/views/home/components/operatingSalesRevenue.vue
index 3f41cdbc..d5c72001 100644
--- a/src/views/home/components/operatingSalesRevenue.vue
+++ b/src/views/home/components/operatingSalesRevenue.vue
@@ -41,15 +41,61 @@ export default {
       chart: null,
       parentItemList: [
         {
-          name: "利润总额", targetValue: 0, value: 0, proportion: 0,
-          route:'profitAnalysis'
-         },
-        { name: "毛利率", targetValue: 0, value: 0, proportion: 0, route: 'profitAnalysis' },
-        { name: "单价", targetValue: 0, value: 0, proportion: 0, route: 'cost/cost' },
-        { name: "净价", targetValue: 0, value: 0, proportion: 0, route: 'cost/cost' },
-        { name: "销量", targetValue: 0, value: 0, proportion: 0, route: 'profitAnalysis' },
-        { name: "双镀面板", targetValue: 0, value: 0, proportion: 0, route: 'profitAnalysis' },
-        { name: "溢价产品销量", targetValue: 0, value: 0, proportion: 0, route: 'profitAnalysis' }
+          name: "利润总额",
+          targetValue: 50,
+          value: 58,
+          proportion: 116,
+          route: 'profitAnalysis',
+          completed: 1  // 实际超目标，达标
+        },
+        {
+          name: "毛利率",
+          targetValue: 30,
+          value: 28.5,
+          proportion: 95,
+          route: 'profitAnalysis',
+          completed: 0  // 未达30%目标，不达标
+        },
+        {
+          name: "单价",
+          targetValue: 12,
+          value: 12.5,
+          proportion: 104.2,
+          route: 'cost/cost',
+          completed: 1  // 单价达标
+        },
+        {
+          name: "净价",
+          targetValue: 9,
+          value: 8.8,
+          proportion: 97.8,
+          route: 'cost/cost',
+          completed: 0  // 未达目标，不达标
+        },
+        {
+          name: "销量",
+          targetValue: 100,
+          value: 120,
+          proportion: 120,
+          route: 'profitAnalysis',
+          completed: 1  // 销量超额达标
+        },
+        {
+          name: "双镀面板",
+          targetValue: 30,
+          value: 29,
+          proportion: 96.7,
+          route: 'profitAnalysis',
+          completed: 0  // 略低目标，不达标
+        },
+        {
+          name: "溢价产品销量",
+          targetValue: 15,
+          value: 18,
+          proportion: 120,
+          route: 'profitAnalysis',
+          completed: 1  // 超额达标
+        }
       ]
     }
   },
diff --git a/src/views/home/components/order-bottom-leftItem.vue b/src/views/home/components/order-bottom-leftItem.vue
index f1448730..ca6253ed 100644
--- a/src/views/home/components/order-bottom-leftItem.vue
+++ b/src/views/home/components/order-bottom-leftItem.vue
@@ -354,7 +354,7 @@ export default {
     height: 46px;
     background: linear-gradient(to bottom,
         rgba(255, 0, 0, 0),
-        rgba(40, 203, 151, 1));
+        #cbcbcb);
   }
 
   .cityLine {
diff --git a/src/views/home/components/premProdStatus.vue b/src/views/home/components/premProdStatus.vue
index 23d02d45..e2ecf3ae 100644
--- a/src/views/home/components/premProdStatus.vue
+++ b/src/views/home/components/premProdStatus.vue
@@ -67,13 +67,22 @@ export default {
     return {
       chart: null,
       parentItemList: [
-        { name: "月度", targetValue: 0, value: 0, proportion: 0, route:'profitAnalysis' },
-        { name: "年度", targetValue: 0, value: 0, proportion: 0, route: 'profitAnalysis' },
-        // { unit: "单价", targetValue: 20, currentValue: 16, progress: 80 },
-        // { unit: "净价", targetValue: 20, currentValue: 16, progress: 80 },
-        // { unit: "销量", targetValue: 20, currentValue: 16, progress: 80 },
-        // { unit: "双镀面板", targetValue: 15, currentValue: 13.8, progress: 92 },
-        // { unit: "溢价产品销量", targetValue: 15, currentValue: 13.8, progress: 92 }
+        {
+          name: "月度",
+          targetValue: 80,
+          value: 76,
+          proportion: 95,
+          route: 'profitAnalysis',
+          completed: 0  // 未达目标值，不达标
+        },
+        {
+          name: "年度",
+          targetValue: 900,
+          value: 920,
+          proportion: 102.2,
+          route: 'profitAnalysis',
+          completed: 1  // 超出目标值，达标
+        }
       ]
     }
   },
diff --git a/src/views/home/components/profit-item-middle.vue b/src/views/home/components/profit-item-middle.vue
index e8219015..00d07252 100644
--- a/src/views/home/components/profit-item-middle.vue
+++ b/src/views/home/components/profit-item-middle.vue
@@ -138,7 +138,7 @@ export default {
     height: 46px;
     background: linear-gradient(to bottom,
         rgba(255, 0, 0, 0),
-        rgba(40, 203, 151, 1));
+        #cbcbcb);
   }
 
   .left,
diff --git a/src/views/home/components/profit-item.vue b/src/views/home/components/profit-item.vue
index 8c2e8d1b..9639fc6a 100644
--- a/src/views/home/components/profit-item.vue
+++ b/src/views/home/components/profit-item.vue
@@ -136,7 +136,7 @@ export default {
     height: 46px;
     background: linear-gradient(to bottom,
         rgba(255, 0, 0, 0),
-        rgba(40, 203, 151, 1));
+        #cbcbcb);
   }
 
   .left,
diff --git a/src/views/home/components/profitBar.vue b/src/views/home/components/profitBar.vue
index fbb1d0cc..925380ca 100644
--- a/src/views/home/components/profitBar.vue
+++ b/src/views/home/components/profitBar.vue
@@ -50,6 +50,8 @@
 
 <script>
 import operatingLineBar from './operatingBottomLineBar.vue';
+import * as echarts from 'echarts'
+
 export default {
   name: "Container",
   components: { operatingLineBar },
@@ -69,7 +71,7 @@ export default {
     // 核心：将原计算属性改为方法，主动处理数据
     getChartData() {
       const currentKey = this.selectedProfit
-      console.log(this.formattedData,'22222');
+      // console.log(this.formattedData,'22222');
 
       // 严格判断数据有效性
       if (
@@ -89,13 +91,23 @@ export default {
           name: '完成率',
           type: 'line',
           yAxisIndex: 1,
-          lineStyle: { color: 'rgba(40, 138, 255, .5)', width: 2 },
+          lineStyle: {
+            color: 'rgba(40, 138, 255, .5)',
+            width: 2
+          },
           itemStyle: {
             color: 'rgba(40, 138, 255, 1)',
             borderColor: 'rgba(40, 138, 255, 1)',
             borderWidth: 2,
             radius: 4
           },
+          areaStyle: {
+            opacity: 0.2,
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              { offset: 0, color: 'rgba(40, 138, 255, .9)' },
+              { offset: 1, color: 'rgba(40, 138, 255, 0)' }
+            ])
+          },
           data: targetData.map(item => item.proportion),
           symbol: 'circle',
           symbolSize: 6
@@ -117,11 +129,42 @@ export default {
           yAxisIndex: 0,
           barWidth: 18,
           itemStyle: {
+            // 根据 safeFlag 动态返回不同的渐变色
             color: (params) => {
-              const completed = targetData[params.dataIndex].completed;
-              return completed === 1 ? 'rgba(255, 132, 0, 1)' : 'rgba(40, 203, 151, 1)';
+              const dataIndex = params.dataIndex;
+              const currentFlag = targetData[dataIndex] || 0; // 默认为0（不达标）
+
+              // 达标时的渐变（绿色系）
+              if (currentFlag === 1) {
+                return {
+                  type: 'linear',
+                  x: 0,
+                  y: 0,
+                  x2: 0,
+                  y2: 1,
+                  colorStops: [
+                    { offset: 0, color: 'rgba(174, 239, 224, 1)' }, // 浅绿
+                    { offset: 1, color: 'rgba(118, 218, 190, 1)' }  // 深绿
+                  ]
+                };
+              }
+              // 不达标时的渐变（橙色系）
+              else {
+                return {
+                  type: 'linear',
+                  x: 0,
+                  y: 0,
+                  x2: 0,
+                  y2: 1,
+                  colorStops: [
+                    { offset: 0, color: 'rgba(253, 209, 129, 1)' }, // 浅橙
+                    { offset: 1, color: 'rgba(249, 164, 74, 1)' }   // 深橙
+                  ]
+                };
+              }
             },
-            borderRadius: [4, 4, 0, 0]
+            borderRadius: [4, 4, 0, 0],
+            borderWidth: 0
           },
           data: targetData.map(item => item.value)
         }
diff --git a/src/views/home/components/psiLineBar.vue b/src/views/home/components/psiLineBar.vue
index ee77c981..1038d104 100644
--- a/src/views/home/components/psiLineBar.vue
+++ b/src/views/home/components/psiLineBar.vue
@@ -63,7 +63,7 @@ export default {
           xData.push(place);
           saleData.push(item.saleValue); // 销量值（保留两位小数）
           productData.push(item.productValue);
-          rateData.push(item.saleAndProductProportion *100 ); // 转为百分比后保留两位小数
+          rateData.push(Number((item.saleAndProductProportion * 100).toFixed(2))); // 转为百分比后保留两位小数
         });
       }
 
@@ -204,7 +204,7 @@ export default {
               opacity: 0.2,
               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                 { offset: 0, color: 'rgba(40, 138, 255, .9)' },
-                { offset: 1, color: 'rgba(255, 132, 0, 0)' }
+                { offset: 1, color: 'rgba(40, 138, 255, 0)' }
               ])
             },
             data: rateData, // 动态产销率数据
diff --git a/src/views/home/components/psr-item.vue b/src/views/home/components/psr-item.vue
index 2b087b7c..976305d7 100644
--- a/src/views/home/components/psr-item.vue
+++ b/src/views/home/components/psr-item.vue
@@ -123,7 +123,7 @@ export default {
     height: 46px;
     background: linear-gradient(to bottom,
         rgba(255, 0, 0, 0),
-        rgba(40, 203, 151, 1));
+        #cbcbcb);
   }
 
   .left,
diff --git a/src/views/home/components/top-item.vue b/src/views/home/components/top-item.vue
index 58fdd8d7..911e5db2 100644
--- a/src/views/home/components/top-item.vue
+++ b/src/views/home/components/top-item.vue
@@ -146,7 +146,7 @@ export default {
   .line {
     width: 1px;
     height: 46px;
-    background: linear-gradient(to bottom, rgba(255, 0, 0, 0), rgba(40, 203, 151, 1));
+    background: linear-gradient(to bottom, rgba(255, 0, 0, 0), #cbcbcb);
   }
 
   .left,
diff --git a/src/views/home/components/top-product-item.vue b/src/views/home/components/top-product-item.vue
index 8e54cf22..270b819f 100644
--- a/src/views/home/components/top-product-item.vue
+++ b/src/views/home/components/top-product-item.vue
@@ -187,7 +187,7 @@ export default {
     height: 46px;
     background: linear-gradient(to bottom,
         rgba(255, 0, 0, 0),
-        rgba(40, 203, 151, 1));
+        #cbcbcb);
   }
 
   .left,
diff --git a/src/views/home/costComponents/costItemOverviewItem.vue b/src/views/home/costComponents/costItemOverviewItem.vue
index e6c64f39..c7719643 100644
--- a/src/views/home/costComponents/costItemOverviewItem.vue
+++ b/src/views/home/costComponents/costItemOverviewItem.vue
@@ -6,7 +6,7 @@
         <!-- 新增：topItem 专属包裹容器，统一控制样式和布局 -->
         <div class="topItem-container" style="display: flex; flex-direction: column;gap: 16px;overflow: hidden;">
           <!-- <topItem :itemList="parentItemList" /> -->
-          <rawItem :itemList="sortedItemData" />
+          <rawItem :itemList="itemData" />
 
         </div>
         <!-- 2. .top 保持 flex，无需固定高度，自动跟随子元素拉伸 -->
@@ -50,21 +50,21 @@ export default {
       deep: true // 若对象内属性变化需触发，需加 deep: true
     }
   },
-  computed: {
-    // 处理排序：包含“总成本”的项放前面，其余项按原顺序排列
-    sortedItemData() {
-      // 过滤出包含“总成本”的项（不区分大小写）
-      const totalCostItems = this.itemData.filter(item =>
-        item.name && item.name.includes('总成本')
-      );
-      // 过滤出不包含“总成本”的项
-      const otherItems = this.itemData.filter(item =>
-        !item.name || !item.name.includes('总成本')
-      );
-      // 合并：总成本项在前，其他项在后
-      return [...totalCostItems, ...otherItems];
-    }
-  },
+  // computed: {
+  //   // 处理排序：包含“总成本”的项放前面，其余项按原顺序排列
+  //   sortedItemData() {
+  //     // 过滤出包含“总成本”的项（不区分大小写）
+  //     const totalCostItems = this.itemData.filter(item =>
+  //       item.name && item.name.includes('总成本')
+  //     );
+  //     // 过滤出不包含“总成本”的项
+  //     const otherItems = this.itemData.filter(item =>
+  //       !item.name || !item.name.includes('总成本')
+  //     );
+  //     // 合并：总成本项在前，其他项在后
+  //     return [...totalCostItems, ...otherItems];
+  //   }
+  // },
   mounted() {
     // 初始化图表（若需展示图表，需在模板中添加对应 DOM）
     // this.$nextTick(() => this.updateChart())
diff --git a/src/views/home/costComponents/operatingLineBar.vue b/src/views/home/costComponents/operatingLineBar.vue
index e587f665..e4700183 100644
--- a/src/views/home/costComponents/operatingLineBar.vue
+++ b/src/views/home/costComponents/operatingLineBar.vue
@@ -175,7 +175,7 @@ export default {
               opacity: 0.2,
               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                 { offset: 0, color: 'rgba(40, 138, 255, .9)' },
-                { offset: 1, color: 'rgba(255, 132, 0, 0)' }
+                { offset: 1, color: 'rgba(40, 138, 255, 0)' }
               ])
             },
             data: proportion,
@@ -188,10 +188,26 @@ export default {
             yAxisIndex: 0,
             barWidth: 14,
             itemStyle: {
-              color: 'rgba(40, 137, 255, 1)',
+              // 移除多余的 normal 层级，直接配置 color 渐变
+              color: {
+                type: 'linear',
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  { offset: 0, color: 'rgba(130, 204, 255, 1)' },
+                  { offset: 1, color: 'rgba(75, 157, 255, 1)' }
+                ]
+              },
               borderRadius: [4, 4, 0, 0],
               borderWidth: 0
             },
+            // itemStyle: {
+            //   color: 'rgba(40, 137, 255, 1)',
+            //   borderRadius: [4, 4, 0, 0],
+            //   borderWidth: 0
+            // },
             data: target
           },
           {
@@ -200,13 +216,39 @@ export default {
             yAxisIndex: 0,
             barWidth: 14,
             itemStyle: {
-              // 使用处理后的 safeFlag 避免 undefined
+              // 根据 safeFlag 动态返回不同的渐变色
               color: (params) => {
                 const dataIndex = params.dataIndex;
-                const currentFlag = safeFlag[dataIndex] || 0; // 双重保险，防止越界
-                return currentFlag === 1
-                  ? 'rgba(118, 218, 190, 1)'
-                  : 'rgba(249, 164, 74, 1)';
+                const currentFlag = safeFlag[dataIndex] || 0; // 默认为0（不达标）
+
+                // 达标时的渐变（绿色系）
+                if (currentFlag === 1) {
+                  return {
+                    type: 'linear',
+                    x: 0,
+                    y: 0,
+                    x2: 0,
+                    y2: 1,
+                    colorStops: [
+                      { offset: 0, color: 'rgba(174, 239, 224, 1)' }, // 浅绿
+                      { offset: 1, color: 'rgba(118, 218, 190, 1)' }  // 深绿
+                    ]
+                  };
+                }
+                // 不达标时的渐变（橙色系）
+                else {
+                  return {
+                    type: 'linear',
+                    x: 0,
+                    y: 0,
+                    x2: 0,
+                    y2: 1,
+                    colorStops: [
+                      { offset: 0, color: 'rgba(253, 209, 129, 1)' }, // 浅橙
+                      { offset: 1, color: 'rgba(249, 164, 74, 1)' }   // 深橙
+                    ]
+                  };
+                }
               },
               borderRadius: [4, 4, 0, 0],
               borderWidth: 0
diff --git a/src/views/home/costComponents/processingCost-Item.vue b/src/views/home/costComponents/processingCost-Item.vue
index a5596cf2..88080057 100644
--- a/src/views/home/costComponents/processingCost-Item.vue
+++ b/src/views/home/costComponents/processingCost-Item.vue
@@ -290,6 +290,7 @@ export default {
   .progress-group {
     display: flex;
     align-items: center;
+    margin-bottom: 4px;
   }
 
   .progress-container {
diff --git a/src/views/home/costComponents/productLeftTable.vue b/src/views/home/costComponents/productLeftTable.vue
index 7b57315d..3a5c56bc 100644
--- a/src/views/home/costComponents/productLeftTable.vue
+++ b/src/views/home/costComponents/productLeftTable.vue
@@ -1,10 +1,10 @@
 <template>
   <div style="width: 100%;">
-    <Container name="领用明细" icon="cockpitItemIcon" size="productMiddleBg" topSize="middle">
+    <Container name="领用明细" icon="cockpitItemIcon" size="" topSize="middle">
       <!-- 1. 移除 .kpi-content 的固定高度，改为自适应 -->
       <div class="kpi-content" style=" padding: 14px 16px; display: flex;width: 100%;">
         <div class="bottom"
-          style="padding: 14px 16px; height: 620px; display: flex; width: 100%;background-color: rgba(249, 252, 255, 1);">
+          style="padding: 14px 16px; height: 620px; display: flex; width: 100%;;">
           <!-- <top-item /> -->
           <base-table style="width: 100%;" :page="1" :limit="10" :show-index="true" :beilv="1" :tableConfig="tableProps"
             :table-data="tableData" />
diff --git a/src/views/home/costComponents/productRightTable.vue b/src/views/home/costComponents/productRightTable.vue
index 948b50ad..e2833346 100644
--- a/src/views/home/costComponents/productRightTable.vue
+++ b/src/views/home/costComponents/productRightTable.vue
@@ -1,10 +1,10 @@
 <template>
   <div style="width: 100%;">
-    <Container name="入账明细" icon="cockpitItemIcon" size="productMiddleBg" topSize="middle">
+    <Container name="入账明细" icon="cockpitItemIcon" size="" topSize="middle">
       <!-- 1. 移除 .kpi-content 的固定高度，改为自适应 -->
       <div class="kpi-content" style="padding: 14px 16px; display: flex;width: 100%;">
         <div class="bottom"
-          style="padding: 14px 16px; height: 620px; display: flex; width: 100%;background-color: rgba(249, 252, 255, 1);">
+          style="padding: 14px 16px; height: 620px; display: flex; width: 100%;">
           <!-- <top-item /> -->
           <base-table style="width: 100%;" :page="1" :limit="10" :show-index="true" :beilv="1" :tableConfig="tableProps"
             :table-data="tableData" />
diff --git a/src/views/home/costComponents/profitImpactLineChart.vue b/src/views/home/costComponents/profitImpactLineChart.vue
index 9286fde0..2120fc13 100644
--- a/src/views/home/costComponents/profitImpactLineChart.vue
+++ b/src/views/home/costComponents/profitImpactLineChart.vue
@@ -115,7 +115,7 @@ export default {
               opacity: 0.2,
               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                 { offset: 0, color: 'rgba(40, 138, 255, .9)' },
-                { offset: 1, color: 'rgba(255, 132, 0, 0)' }
+                { offset: 1, color: 'rgba(40, 138, 255, 0)' }
               ])
             },
             data: [200, 280, 180, 300, 220, 350],
diff --git a/src/views/home/costComponents/rawSheet-Item.vue b/src/views/home/costComponents/rawSheet-Item.vue
index 6c0609e8..940cbeec 100644
--- a/src/views/home/costComponents/rawSheet-Item.vue
+++ b/src/views/home/costComponents/rawSheet-Item.vue
@@ -286,6 +286,7 @@ export default {
   .progress-group {
     display: flex;
     align-items: center;
+    margin-bottom: 4px;
   }
 
   .progress-container {
diff --git a/src/views/home/costComponents/top-item.vue b/src/views/home/costComponents/top-item.vue
index ffde46a7..b033f01b 100644
--- a/src/views/home/costComponents/top-item.vue
+++ b/src/views/home/costComponents/top-item.vue
@@ -119,7 +119,7 @@ export default {
     height: 46px;
     background: linear-gradient(to bottom,
         rgba(255, 0, 0, 0),
-        rgba(40, 203, 151, 1));
+        #cbcbcb);
   }
 
   .left,
diff --git a/src/views/home/costComponents/top-product-item.vue b/src/views/home/costComponents/top-product-item.vue
index f0b1c957..0b11c294 100644
--- a/src/views/home/costComponents/top-product-item.vue
+++ b/src/views/home/costComponents/top-product-item.vue
@@ -228,7 +228,7 @@ export default {
     height: 46px;
     background: linear-gradient(to bottom,
         rgba(255, 0, 0, 0),
-        rgba(40, 203, 151, 1));
+        #cbcbcb);
   }
 
   .left,
diff --git a/src/views/home/profitAnalysis.vue b/src/views/home/profitAnalysis.vue
index 23343fa5..1e18fcc7 100644
--- a/src/views/home/profitAnalysis.vue
+++ b/src/views/home/profitAnalysis.vue
@@ -18,7 +18,7 @@
             grid-template-columns: 804px 804px;
           ">
           <profitOverview :profitTotalData="profitTotalData" />
-          <salesDataOverview :productAndSaleData="productAndSaleData" />
+          <salesDataOverview :productAndSaleData="salesAndOutputData" />
         </div>
       </div>
       <div class="top" style="display: flex; gap: 16px;margin-top: 6px;">
@@ -165,14 +165,15 @@ export default {
 
         this.profitTotalData = res.data.overviewProfitData.filter(item => {
           return item.name === "利润总额" || item.name === "毛利率";
-        });
+        })
         this.salesAndOutputData = res.data.productAndSaleData.filter(item => {
           // 只保留name为“销量”或“产量”的项
           return item.name === "销量" || item.name === "产量";
-        });
-        this.middleItemData = res.data.productAndSaleData.filter(item => {
-          return item.name === "营业收入" || item.name === "成本";
-        });
+        })
+        this.middleItemData = res.data.productAndSaleData
+          .filter(item => {
+            return item.name === "营业收入" || item.name === "成本";
+          })
         this.middleChartData = res.data.productFactors
         this.bottomChartData = res.data.productFactors
       })