制造成本分析修改

src/views/home/electricityCostAnalysisComponents/dataTrend.vue

@@ -8,7 +8,8 @@
             width: 1595px;
             background-color: rgba(249, 252, 255, 1);
           ">
-          <dataTrendBar @changeItem="handleChange" :chartData="chartData" />
+          <!-- 直接使用计算属性 chartData，无需手动更新 -->
+          <dataTrendBar @handleGetItemData="getData" :chartData="chartData" />
         </div>
       </div>
     </Container>
@@ -23,128 +24,81 @@ export default {
   name: "ProductionStatus",
   components: { Container, dataTrendBar },
   props: {
-    trend: {
+    trendData: {
       type: Array,
-      // 默认值与实际数据结构一致（12个月）
-      default: () => [
-        // { title: "2025年01月", budget: 0, real: 0, rate: 0, diff: 0 },
-        // { title: "2025年02月", budget: 0, real: 0, rate: 0, diff: 0 },
-        // { title: "2025年03月", budget: 0, real: 0, rate: 0, diff: 0 },
-        // { title: "2025年04月", budget: 0, real: 0, rate: 0, diff: 0 },
-        // { title: "2025年05月", budget: 0, real: 0, rate: 0, diff: 0 },
-        // { title: "2025年06月", budget: 0, real: 0, rate: 0, diff: 0 },
-        // { title: "2025年07月", budget: 0, real: 0, rate: 0, diff: 0 },
-        // { title: "2025年08月", budget: 0, real: 0, rate: 0, diff: 0 },
-        // { title: "2025年09月", budget: 0, real: 0, rate: 0, diff: 0 },
-        // { title: "2025年10月", budget: 0, real: 0, rate: 0, diff: 0 },
-        // { title: "2025年11月", budget: 0, real: 0, rate: 0, diff: 0 },
-        // { title: "2025年12月", budget: 0, real: 0, rate: 0, diff: 0 }
-      ]
+      default: () => [],
     },
   },
   data() {
     return {
-      chartData: {
-        months: [], // 月份数组（2025年01月 - 2025年12月）
-        rates: [],  // 每月完成率（百分比）
-        reals: [],  // 每月实际值
-        budgets: [],// 每月预算值
-        diffs: [],  // 每月差值
-        flags: []   // 每月达标标识（≥100 → 1，<100 → 0）
-      }
+      // 移除：原 chartData 定义，改为计算属性
     };
   },
-  watch: {
-    trend: {
-      handler(newVal) {
-        this.processTrendData(newVal);
-      },
-      immediate: true,
-      deep: true,
-    },
-  },
-  mounted() {
-    this.processTrendData(this.trend);
-  },
-  methods: {
-    handleChange(value) {
-      this.$emit("handleChange", value);
-    },
+  // 移除：原 watch 监听配置，计算属性自动响应 trendData 变化
+  computed: {
     /**
-     * 处理趋势数据（适配12个月的数组结构）
-     * @param {Array} trendData - 原始趋势数组（12个月）
+     * chartData 计算属性：自动响应 trendData 变化，格式化并提取各字段数组
+     * @returns {Object} 包含6个独立数组的格式化数据
      */
-    processTrendData(trendData) {
-      // 数据兜底：确保是数组且长度为12
-      const validTrend = Array.isArray(trendData)
-        ? trendData
-        : []
+    chartData() {
+      // 初始化6个独立数组
+      const timeArr = []; // 格式化后的年月数组
+      const valueArr = []; // 实际值数组
+      const diffValueArr = []; // 差异值数组
+      const targetValueArr = []; // 预算值数组
+      const proportionArr = []; // 占比数组
+      const completedArr = []; // 完成率数组
 
-      // 初始化空数组
-      const months = [];
-      const rates = [];
-      const reals = [];
-      const budgets = [];
-      const diffs = [];
-      const flags = [];
+      // 遍历传入的 trendData 数组（响应式依赖，变化时自动重算）
+      this.trendData.forEach((item) => {
+        // 1. 格式化时间并推入时间数组
+        const yearMonth = this.formatTimeToYearMonth(item.time);
+        timeArr.push(yearMonth);
 
-      // 遍历12个月数据
-      validTrend.forEach(item => {
-        // 基础数据提取（兜底处理）
-        const month = item.title ?? '';
-        const budget = Number(item.budget) || 0;
-        const real = Number(item.real) || 0;
-        const rate = Number(item.rate) || 0;
-        const diff = Number(item.diff) || 0;
-
-        // 计算达标标识（≥100 → 1，<100 → 0）
-        const flag = this.getRateFlag(rate, real, budget);
-
-        // 填充数组
-        months.push(month);
-        rates.push(rate); // 转为百分比并取整
-        reals.push(real);
-        budgets.push(budget);
-        diffs.push(diff);
-        flags.push(flag);
+        // 2. 提取其他字段，兜底为0（防止null/undefined影响图表渲染）
+        valueArr.push(item.value ?? 0);
+        diffValueArr.push(item.diffValue ?? 0);
+        targetValueArr.push(item.targetValue ?? 0);
+        proportionArr.push(item.proportion ?? 0);
+        completedArr.push(item.completed ?? 0);
       });
 
-      // 更新chartData（响应式）
-      this.chartData = {
-        months,
-        rates,
-        reals,
-        budgets,
-        diffs,
-        flags
+      // 组装并返回格式化后的数据（结构与原一致）
+      return {
+        time: timeArr,
+        value: valueArr,
+        diffValue: diffValueArr,
+        targetValue: targetValueArr,
+        proportion: proportionArr,
+        completed: completedArr,
+        rawData: this.trendData, // 透传原始数据，方便子组件使用
       };
-
-      console.log('处理后的趋势数据：', this.chartData);
     },
-
+  },
+  methods: {
     /**
-     * 计算达标标识
-     * @param {Number} rate - 完成率（原始值，如1.2 → 120%）
-     * @returns {Number} 1: 达标（≥100%），0: 未达标（<100%）
+     * 格式化时间戳为年月格式（YYYY-MM）
+     * @param {Number} timestamp 13位毫秒级时间戳
+     * @returns {String} 格式化后的年月字符串（如：2025-10）
      */
-getRateFlag(rate, real, target) {
-  if (isNaN(rate) || rate === null || rate === undefined) return 0;
-
-  // 1. 完成率 >= 100 => 达标
-  if (rate >= 100) return 1;
-
-  // 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标
-  if (rate === 0 && target === 0) return 1;
-
-  // 其他情况 => 未达标
-  return 0;
-},
+    formatTimeToYearMonth(timestamp) {
+      if (!timestamp || isNaN(timestamp)) {
+        return ""; // 容错：非有效时间戳返回空字符串
+      }
+      const date = new Date(timestamp);
+      const year = date.getFullYear();
+      const month = String(date.getMonth() + 1).padStart(2, "0"); // 月份从0开始，补0至2位
+      return `${year}-${month}`;
+    },
+    getData(value) {
+      this.$emit('getData', value)
+    },
   },
 };
 </script>
 
 <style lang="scss" scoped>
-/* 滚动容器样式 */
+/* 原有样式保持不变 */
 .scroll-container {
   max-height: 210px;
   overflow-y: auto;
@@ -159,7 +113,6 @@ getRateFlag(rate, real, target) {
   -ms-overflow-style: none;
 }
 
-/* 设备项样式优化 */
 .proBarInfo {
   display: flex;
   flex-direction: column;
@@ -266,7 +219,6 @@ getRateFlag(rate, real, target) {
   transition: width 0.3s ease;
 }
 
-/* 图表相关样式 */
 .chartImgBottom {
   position: absolute;
   bottom: 45px;
@@ -285,7 +237,7 @@ getRateFlag(rate, real, target) {
 </style>
 
 <style>
-/* 全局 tooltip 样式 */
+/* 全局 tooltip 样式（不使用 scoped，确保生效） */
 .production-status-chart-tooltip {
   background: #0a2b4f77 !important;
   border: none !important;