修改集团及基地图表样式

src/views/home/expenseAnalysisComponents/yearRelatedMetrics.vue

@@ -2,33 +2,21 @@
   <div style="flex: 1">
     <Container :name="title" icon="cockpitItemIcon" size="operatingRevenueBg" topSize="middle">
       <div class="kpi-content" style="padding: 14px 16px; display: flex; width: 100%;">
-        <div class="topItem-container" style="display: flex; gap: 8px; width: 100%;">
-          <!-- 管理费用模块 -->
-          <div class="dashboard">
+        <div class="topItem-container" style="display: flex; gap: 8px">
+          <div
+            v-for="item in sortedIndicators"
+            :key="item.key"
+            class="dashboard"
+            @click="item.route && handleDashboardClick(item.route)"
+          >
             <div class="title">
-              管理费用·万元
+              {{ item.name }}·{{ item.unit }}
             </div>
-            <div class="chart-wrap">
-              <operatingSingleBar :detailData="manageCostData"></operatingSingleBar>
-            </div>
-          </div>
-          <!-- 销售费用模块 -->
-          <div class="dashboard">
-            <div class="title">
-              销售费用·万元
-            </div>
-            <div class="chart-wrap">
-              <operatingSingleBar :detailData="saleCostData"></operatingSingleBar>
-            </div>
-          </div>
-          <!-- 财务费用模块 -->
-          <div class="dashboard">
-            <div class="title">
-              财务费用·万元
-            </div>
-            <div class="chart-wrap">
-              <operatingSingleBar :detailData="financeCostData"></operatingSingleBar>
+            <div style='font-size: 16px;text-align: right;padding-right: 5px;'>
+              <span>完成率:<span style='color: #0B58FF;'>{{item.detailData.rate}}%</span></span>
+              <span style='display: inline-block;margin-left: 10px;'>差值:<span :style="{color:item.detailData.flag>0?'#30B590':'#FF9423'}" >{{item.detailData.diff}}</span></span>
             </div>
+            <operatingSingleBar :detailData="item.detailData"></operatingSingleBar>
           </div>
         </div>
       </div>
@@ -70,63 +58,64 @@ export default {
       financeCostData: { title: "财务费用", budget: 0, real: 0, rate: 0, diff: 0, flag: 0 }
     }
   },
+  computed: {
+    indicatorDefs() {
+      return [
+        { key: 'mgmtFee', name: '管理费用', unit: '万元'},
+        { key: 'salesFee', name: '销售费用', unit: '万元'},
+        { key: 'finFee', name: '财务费用', unit: '万元'}
+      ]
+    },
+    indicators() {
+      let _this = this
+      const fallback = { budget: 0, real: 0, rate: 0, diff: 0, flag: 0 }
+      const list = (Array.isArray(_this.ytdAnalysis) ? _this.ytdAnalysis : [])
+      return _this.indicatorDefs.map(def => {
+        const data = list.find(item => item && item.title === def.name) || fallback
+        const detailData = {
+          ...data,
+          flag: _this.getRateFlag(data.rate, data.real, data.budget),
+        }
+        return {
+          ...def,
+          detailData,
+          sortValue: Number((data && data.real) ?? 0)
+        }
+      })
+    },
+    sortedIndicators() {
+      const unitOrder = ['万元']
+      const unitRank = (u) => {
+        const idx = unitOrder.indexOf(u)
+        return idx === -1 ? 999 : idx
+      }
+
+      return this.indicators.slice().sort((a, b) => {
+        const ur = unitRank(a.unit) - unitRank(b.unit)
+        if (ur !== 0) return ur
+        const vr = (b.sortValue ?? -Infinity) - (a.sortValue ?? -Infinity)
+        if (vr !== 0) return vr
+        return String(a.key).localeCompare(String(b.key))
+      })
+    },
+  },
   watch: {
     ytdAnalysis: {
-      handler(newVal) {
-        this.updateCostData(newVal)
-      },
+      handler(newVal) {},
       deep: true,
       immediate: true // 初始化立即执行
     }
   },
-  mounted() {
-    this.updateCostData(this.ytdAnalysis)
-  },
+  mounted() {},
   methods: {
-    // 达标标识判断（≥100返回1，<100返回0）
-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;
-},
-
-    // 处理费用数据
-    updateCostData(data) {
-      // 数据兜底：确保是数组且长度≥3
-      const validData = Array.isArray(data) && data.length >= 3
-        ? data
-        : this.$props.ytdAnalysis;
-
-      // 提取三个费用项数据（兜底处理）
-      const manageItem = validData[0] || { title: "管理费用", budget: 0, real: 0, rate: 0, diff: 0 };
-      const saleItem = validData[1] || { title: "销售费用", budget: 0, real: 0, rate: 0, diff: 0 };
-      const financeItem = validData[2] || { title: "财务费用", budget: 0, real: 0, rate: 0, diff: 0 };
-
-      // 整合flag字段
-      this.manageCostData = {
-        ...manageItem,
-        flag: this.getRateFlag(manageItem.rate, manageItem.real, manageItem.budget)
-      };
-      this.saleCostData = {
-        ...saleItem,
-        flag: this.getRateFlag(saleItem.rate, saleItem.real, saleItem.budget)
-      };
-      this.financeCostData = {
-        ...financeItem,
-        flag: this.getRateFlag(financeItem.rate, financeItem.real, financeItem.budget)
-      };
-
-      // 调试日志
-      console.log('管理费用数据：', this.manageCostData);
-      console.log('销售费用数据：', this.saleCostData);
-      console.log('财务费用数据：', this.financeCostData);
+    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;
     }
   }
 }
@@ -170,7 +159,6 @@ getRateFlag(rate, real, target) {
     line-height: 18px;
     letter-spacing: 2px;
     text-align: left;
-    margin-bottom: 12px;
   }
 
   // 图表容器：适配高度