修改集团及基地图表样式

src/views/home/productionCostAnalysisComponents/relatedIndicatorsAnalysis.vue

@@ -3,53 +3,21 @@
     <Container :isShowTab="true" :name="title" icon="cockpitItemIcon" size="opLargeBg" topSize="large"
       @tabChange="handleChange">
       <div class="kpi-content" style="padding: 14px 16px; display: flex; width: 100%;">
-        <!-- 横向滚动容器：适配5个成本组件，与第二个组件样式统一 -->
-        <div class="topItem-container" style="display: flex; gap: 8px;">
-          <!-- 1. 原料成本组件：传递对应筛选数据 -->
-          <div class="dashboard left" @click="handleDashboardClick('原料成本','fuelCostAnalysis/fuelCostAnalysis')">
+        <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.name,item.route)"
+          >
             <div class="title">
-              原料成本·元/㎡
+              {{ item.name }}·{{ item.unit }}
             </div>
-            <div class="line">
-              <operatingSingleBar :detailData="rawMaterialCostData"></operatingSingleBar>
-            </div>
-          </div>
-          <!-- 2. 燃料成本组件：传递对应筛选数据 -->
-          <div class="dashboard right" @click="handleDashboardClick('燃料成本','combustible/combustible')">
-            <div class="title">
-              燃料成本·元/㎡
-            </div>
-            <div class="line">
-              <operatingSingleBar :detailData="fuelCostData"></operatingSingleBar>
-            </div>
-          </div>
-          <!-- 3. 电成本组件：传递对应筛选数据 -->
-          <div class="dashboard right" @click="handleDashboardClick('电成本','osElectricityCostAnalysis')">
-            <div class="title">
-              电成本·元/㎡
-            </div>
-            <div class="line">
-              <operatingSingleBar :detailData="electricCostData"></operatingSingleBar>
-            </div>
-          </div>
-          <!-- 4. 人工成本组件：传递对应筛选数据 -->
-          <div class="dashboard right" @click="handleDashboardClick('人工成本','originalSheetLabor')">
-            <div class="title">
-              人工成本·元/㎡
-            </div>
-            <div class="line">
-              <operatingSingleBar :detailData="laborCostData"></operatingSingleBar>
-            </div>
-          </div>
-          <!-- 5. 制造成本组件：传递对应筛选数据 -->
-          <div class="dashboard right"
-            @click="handleDashboardClick('制造成本','mfgOverheadCostAnalysis/mfgOverheadCostAnalysis')">
-            <div class="title">
-              制造费用·元/㎡
-            </div>
-            <div class="line">
-              <operatingSingleBar :detailData="manufacturingCostData"></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>
@@ -94,55 +62,46 @@ export default {
     return {
       chart: null,
       // 核心：当前激活的成本数据集（默认月度数据，与第二个组件逻辑一致）
-      activeData: this.relatedData.relatedMon || [],
-      activeMaterial: '' // 选中的成本名称状态
+      activeData: this.relatedData.relatedMon || []
     }
   },
   computed: {
-    // 1. 原料成本数据：从激活数据集中筛选，与第二个组件筛选逻辑一致
-    rawMaterialCostData() {
-      return this.activeData.find(item => item.name === "原料成本") || {
-        targetValue: 0,
-        value: 0,
-        completed: 0,
-        diffValue: 0
-      };
+    indicatorDefs() {
+      return [
+        { key: 'rawMaterialCost', name: '原料成本', unit: '元/㎡', route: 'fuelCostAnalysis/fuelCostAnalysis'},
+        { key: 'fuelCost', name: '燃料成本', unit: '元/㎡', route: 'combustible/combustible'},
+        { key: 'electricityCost', name: '电成本', unit: '元/㎡', route: 'osElectricityCostAnalysis'},
+        { key: 'laborCost', name: '人工成本', unit: '元/㎡', route: 'originalSheetLabor'},
+        { key: 'manufacturingCost', name: '制造成本', unit: '元/㎡', route: 'mfgOverheadCostAnalysis/mfgOverheadCostAnalysis'},
+      ]
     },
-    // 2. 燃料成本数据：精准筛选
-    fuelCostData() {
-      return this.activeData.find(item => item.name === "燃料成本") || {
-        targetValue: 0,
-        value: 0,
-        completed: 0,
-        diffValue: 0
-      };
+    indicators() {
+      const fallback = { targetValue: 0, value: 0, completed: 0, diffValue: 0 }
+      const list = (Array.isArray(this.activeData) ? this.activeData : [])
+
+      return this.indicatorDefs.map(def => {
+        const data = list.find(item => item && item.name === def.name) || fallback
+        return {
+          ...def,
+          data,
+          sortValue: Number((data && data.value) ?? 0)
+        }
+      })
     },
-    // 3. 电成本数据：精准筛选
-    electricCostData() {
-      return this.activeData.find(item => item.name === "电成本") || {
-        targetValue: 0,
-        value: 0,
-        completed: 0,
-        diffValue: 0
-      };
-    },
-    // 4. 人工成本数据：精准筛选
-    laborCostData() {
-      return this.activeData.find(item => item.name === "人工成本") || {
-        targetValue: 0,
-        value: 0,
-        completed: 0,
-        diffValue: 0
-      };
-    },
-    // 5. 制造成本数据：精准筛选
-    manufacturingCostData() {
-      return this.activeData.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: {
@@ -174,11 +133,6 @@ export default {
     },
     // 成本项点击事件：保留跳转功能，优化参数传递
     handleDashboardClick(material,path) {
-      // 1. 记录选中状态
-      this.activeMaterial = material;
-      // alert(this.$route.query.factory)
-      console.log(`点击了【${material}】，月份：${this.month}`, '成本数据：', this.activeData, this.$route.query.factory);
-
       // 2. 优化路由跳转：month放入query中（修复原代码参数错误）
       this.$router.push({
         path: path,
@@ -191,11 +145,11 @@ export default {
       });
 
       // 3. 向父组件传递事件（携带当前成本项的详细数据）
-      this.$emit('dashboard-click', {
-        material,
-        month: this.month,
-        data: this.activeData.find(item => item.name === material) || {}
-      });
+      // this.$emit('dashboard-click', {
+      //   material,
+      //   month: this.month,
+      //   data: this.activeData.find(item => item.name === material) || {}
+      // });
     },
   }
 }
@@ -232,7 +186,6 @@ export default {
     color: #000000;
     line-height: 18px;
     letter-spacing: 2px;
-    margin-bottom: 16px; // 与第二个组件间距一致
   }
 
   .number {