修改

2025-11-25 09:30:51 +08:00
parent 694beb5851
commit a907c7273e
25 changed files with 1203 additions and 1231 deletions
--- 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
+        }
+      ];
    }
  }
 };