修改

src/views/home/costComponents/overviewTrendChart.vue

@@ -0,0 +1,147 @@
+·<template>
+  <div style="flex: 1">
+    <Container name="概览趋势图" icon="cockpitItemIcon" size="costSmallBg" topSize="psiTopTitleBasic">
+      <div class="kpi-content" style="padding: 14px 16px; display: flex;width: 100%;">
+        <div class="bottom" style="height: 380px; display: flex; width: 100%;background-color: rgba(249, 252, 255, 1);">
+          <profitBar :cost-group-data="costGroupData" :cost-types="costTypes"
+            :locations="locations"
+            />
+        </div>
+      </div>
+    </Container>
+  </div>
+</template>
+<script>
+import Container from './container.vue'
+import profitBar from './profitBar.vue'
+
+export default {
+  name: 'ProductionStatus',
+  components: { Container, profitBar },
+  props: {
+    trendViews: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  computed: {
+    // 1. 地名数组（去重，按出现顺序）
+    locations() {
+      const locationSet = new Set();
+      this.trendViews.forEach(item => {
+        const location = this.extractLocation(item.name);
+        if (location) locationSet.add(location);
+      });
+      return Array.from(locationSet);
+    },
+    // 2. 核心成本类型数组（仅保留“原片”“加工”等，去掉“成本”二字）
+    costTypes() {
+      const typeSet = new Set();
+      this.trendViews.forEach(item => {
+        const coreType = this.extractCoreCostType(item.name);
+        if (coreType) typeSet.add(coreType);
+      });
+      return Array.from(typeSet);
+    },
+    // 3. 按「核心成本类型+地名」分组的数据
+    costGroupData() {
+      return this.trendViews.reduce((group, item) => {
+        const coreType = this.extractCoreCostType(item.name) || '其他';
+        const location = this.extractLocation(item.name) || '未知地区';
+
+        // 初始化层级分组
+        if (!group[coreType]) group[coreType] = {};
+        if (!group[coreType][location]) group[coreType][location] = [];
+
+        // 添加数据
+        group[coreType][location].push({
+          name: item.name,
+          target: item.target ?? 0,
+          value: item.value ?? 0,
+          proportion: item.proportion ?? 0,
+          flag: item.flag ?? 0,
+          time: item.time
+        });
+
+        return group;
+      }, {});
+    }
+  },
+  methods: {
+    // 提取核心成本类型（仅保留“原片”“加工”等，去掉“成本”二字）
+    extractCoreCostType(name) {
+      // 匹配“前缀（含分公司/工厂/区域等）+ 核心词 + 任意后缀”，提取中间核心词
+      // 兼容后缀：成本、费用、支出、损耗等，前缀：XX分公司、XX工厂、XX区域等
+      const match = name.match(/(分公司)\s*([^，。；！？]+?)\s*(成本)/);
+      if (match) {
+        return match[2].trim(); // 提取中间核心词，去除前后空格
+      }
+
+      // 通用匹配：无明确前缀标识时，提取“最后一个连续汉字后缀”前的内容
+      const generalMatch = name.match(/(.+?)(?=[\u4e00-\u9fa5]{2,}$)/);
+      return generalMatch ? generalMatch[1].trim() : name.trim();
+    },
+    // 提取地名（成本类型前的核心地区名）
+    extractLocation(name) {
+      // 匹配“分公司”前面的连续汉字（即地名）
+      const match = name.match(/(.+?)分公司/);
+
+      if (match) {
+        return match[1].trim() || '未知地区';
+      }
+
+      // 兜底（处理不含“分公司”的情况）
+      return '未知地区';
+    }
+  },
+  watch: {
+    trendViews: {
+      handler(newValue) {
+        console.log('核心成本类型：', this.costTypes); // 示例输出：["原片", "加工"]
+        console.log('地名数组：', this.locations); // 示例输出：["桐城", "合肥"]
+        console.log('分组数据：', this.costGroupData);
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    console.log('初始核心成本类型：', this.costTypes);
+  }
+};
+</script>
+
+<style lang='scss' scoped>
+/* 原有样式保持不变 */
+.scroll-container {
+  max-height: 210px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 10px 0;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+/* 其他样式省略 */
+</style>
+
+<style>
+.production-status-chart-tooltip {
+  background: #0a2b4f77 !important;
+  border: none !important;
+  backdrop-filter: blur(12px);
+}
+
+.production-status-chart-tooltip * {
+  color: #fff !important;
+}
+</style>