修改集团及基地图表样式

src/views/home/productionCostAnalysisComponents/monthlyThreeRelatedMetrics.vue

@@ -1,36 +1,22 @@
 <template>
   <div style="flex: 1">
     <Container :name="title" icon="cockpitItemIcon" size="operatingRevenueBg" topSize="middle">
-      <!-- 1. 移除 .kpi-content 的固定高度，改为自适应（样式不变，仅保留结构） -->
       <div class="kpi-content" style="padding: 14px 16px; display: flex; width: 100%;">
-        <!-- 新增：topItem 专属包裹容器，统一控制样式和布局（原有行内样式不变） -->
-        <div class="topItem-container" style="display: flex; gap: 8px;">
-          <div class="dashboard left" @click="handleDashboardClick('镀膜液')">
+        <div class="topItem-container" style="display: flex; gap: 8px">
+          <div
+            v-for="item in sortedIndicators"
+            :key="item.key"
+            class="dashboard"
+            @click="handleDashboardClick(item.name)"
+          >
             <div class="title">
-              镀膜液·万元
+              {{ item.name }}·{{ item.unit }}
             </div>
-            <div class="line">
-              <!-- 绑定镀膜液对应数据：新增数据绑定，样式不变 -->
-              <operatingSingleBar :detailData="coatingLiquidData"></operatingSingleBar>
-            </div>
-          </div>
-          <div class="dashboard right" @click="handleDashboardClick('油墨')">
-            <div class="title">
-              油墨·万元
-            </div>
-            <div class="line">
-              <!-- 绑定油墨对应数据：新增数据绑定，样式不变 -->
-              <operatingSingleBar :detailData="inkData"></operatingSingleBar>
-            </div>
-          </div>
-          <div class="dashboard right" @click="handleDashboardClick('釉料')">
-            <div class="title">
-              釉料·万元
-            </div>
-            <div class="line">
-              <!-- 绑定釉料对应数据：新增数据绑定，样式不变 -->
-              <operatingSingleBar :detailData="glazeData"></operatingSingleBar>
+            <div style='font-size: 16px;text-align: right;padding-right: 5px;'>
+              <span>完成率:<span style='color: #0B58FF;'>{{item.data.proportion}}%</span></span>
+              <span style='display: inline-block;margin-left: 10px;'>差值:<span :style="{color:item.data.completed>0?'#30B590':'#FF9423'}" >{{item.data.diffValue}}</span></span>
             </div>
+            <operatingSingleBar :detailData="item.data"></operatingSingleBar>
           </div>
         </div>
       </div>
@@ -74,51 +60,42 @@ export default {
       // activeData: this.relatedData || []
     }
   },
-  computed: {
-    // 1. 镀膜液数据：精准筛选对应名称数据，兜底值统一
-    coatingLiquidData() {
-      return this.relatedData.find(item => (item.name || '').includes('镀膜液')) || {
-        targetValue: 0,
-        value: 0,
-        completed: 0,
-        diffValue: 0
-      };
+ computed: {
+    indicatorDefs() {
+      return [
+        { key: 'coatingLiquid', name: '镀膜液', unit: '万元'},
+        { key: 'ink', name: '油墨', unit: '万元'},
+        { key: 'glaze', name: '釉料', unit: '万元'},
+      ]
     },
-    // 2. 油墨数据：精准筛选对应名称数据，兜底值统一
-    inkData() {
-      return this.relatedData.find(item => (item.name || '').includes('油墨')) || {
-        targetValue: 0,
-        value: 0,
-        completed: 0,
-        diffValue: 0
-      };
+    indicators() {
+      const fallback = { targetValue: 0, value: 0, completed: 0, diffValue: 0 }
+      const list = (Array.isArray(this.relatedData) ? this.relatedData : [])
+
+      return this.indicatorDefs.map(def => {
+        const data = list.find(item => item && item.name.includes(def.name)) || fallback
+        return {
+          ...def,
+          data,
+          sortValue: Number((data && data.value) ?? 0)
+        }
+      })
     },
-    // 3. 釉料数据：精准筛选对应名称数据，兜底值统一
-    glazeData() {
-      return this.relatedData.find(item => (item.name || '').includes('釉料')) || {
-        targetValue: 0,
-        value: 0,
-        completed: 0,
-        diffValue: 0
-      };
-    },
-    // 保留原有电成本、水成本计算属性（若需使用可直接启用，样式不变）
-    // dianData() {
-    //   return (this.relatedData.find(item => item.name === "电成本")) || {
-    //     targetValue: 0,
-    //     value: 0,
-    //     completed: 0,
-    //     diffValue: 0
-    //   };
-    // },
-    // shuiData() {
-    //   return (this.relatedData.find(item => item.name === "水成本")) || {
-    //     targetValue: 0,
-    //     value: 0,
-    //     completed: 0,
-    //     diffValue: 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注释（若需恢复可直接启用，样式不变）
   // watch: {