修改

2025-11-14 17:04:22 +08:00
parent 3d167e8d71
commit dfa4ff3f54
28 changed files with 684 additions and 141 deletions
--- 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() {
--- 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,
+        },
      ];
    }
  },
--- 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,
--- 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,
--- 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,
--- 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>
--- 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
      };
--- a/src/views/home/components/operatingLineBarSale.vue
+++ 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>
--- 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  // 超额达标
+        }
      ]
    }
  },
--- 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 {
--- 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  // 超出目标值，达标
+        }
      ]
    }
  },
--- 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,
--- 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,
--- 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)
        }
--- 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, // 动态产销率数据
--- 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,
--- 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,
--- 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,
--- 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())
--- 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
--- 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 {
--- 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" />
--- 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" />
--- 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],
--- 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 {
--- 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,
--- 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,
--- 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
      })