营业收入-全成本分析页面修改

src/views/home/unitPriceAnalysisComponents/monthlyRelatedMetrics.vue

@@ -3,54 +3,20 @@
     <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;">
-          <!-- 销量图表：传递销量数据 + 完成率flag -->
-          <div class="dashboard left" @click="handleDashboardClick('/salesVolumeAnalysis/salesVolumeAnalysisBase')">
+          <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 style='font-size: 16px;text-align: right;padding-right: 5px;'>
-              <span>完成率:<span style='color: #0B58FF;'>{{relatedMon.销量.completeRate}}%</span></span>
-              <span style='display: inline-block;margin-left: 10px;'>差值:<span :style="{color:getRateFlag((relatedMon.销量 || defaultData).completeRate, (relatedMon.销量 || defaultData).real, (relatedMon.销量 || defaultData).target,)>0?'#30B590':'#FF9423'}" >{{relatedMon.销量.diff}}</span></span>
-            </div>
-            <div class="chart-wrap">
-              <operatingSingleBar :detailData="{
-                ...(relatedMon.销量 || defaultData),
-                flag: getRateFlag((relatedMon.销量 || defaultData).completeRate, (relatedMon.销量 || defaultData).real, (relatedMon.销量 || defaultData).target,)
-              }" />
-            </div>
-          </div>
-          <!-- 成本图表：传递全成本数据 + 完成率flag -->
-          <div class="dashboard right" @click="handleDashboardClick('/fullCostAnalysis/fullCostAnalysisBase')">
-            <div class="title">
-              成本·元/㎡
-            </div>
-            <div style='font-size: 16px;text-align: right;padding-right: 5px;'>
-              <span>完成率:<span style='color: #0B58FF;'>{{relatedMon.全成本.completeRate}}%</span></span>
-              <span style='display: inline-block;margin-left: 10px;'>差值:<span :style="{color:getRateFlag((relatedMon.全成本 || defaultData).completeRate, (relatedMon.全成本 || defaultData).real, (relatedMon.全成本 || defaultData).target,)>0?'#30B590':'#FF9423'}" >{{relatedMon.全成本.diff}}</span></span>
-            </div>
-            <div class="chart-wrap">
-              <operatingSingleBar :detailData="{
-                ...(relatedMon.全成本 || defaultData),
-                flag: getRateFlag((relatedMon.全成本 || defaultData).completeRate, (relatedMon.全成本 || defaultData).real, (relatedMon.全成本 || defaultData).target)
-              }" />
-            </div>
-          </div>
-
-          <!-- 运费图表：传递单价数据 + 完成率flag -->
-          <div class="dashboard right">
-            <div class="title">
-              运费·万元
-            </div>
-            <div style='font-size: 16px;text-align: right;padding-right: 5px;'>
-              <span>完成率:<span style='color: #0B58FF;'>{{relatedMon.运费.completeRate}}%</span></span>
-              <span style='display: inline-block;margin-left: 10px;'>差值:<span :style="{color:getRateFlag((relatedMon.运费 || defaultData).completeRate, (relatedMon.运费 || defaultData).real, (relatedMon.运费 || defaultData).target,)>0?'#30B590':'#FF9423'}" >{{relatedMon.运费.diff}}</span></span>
-            </div>
-            <div class="chart-wrap">
-              <operatingSingleBar :detailData="{
-                ...(relatedMon.运费 || defaultData),
-                flag: getRateFlag((relatedMon.运费 || defaultData).completeRate, (relatedMon.运费 || defaultData).real, (relatedMon.运费 || defaultData).target)
-              }" />
+            <div style='font-size: 14px;text-align: right;padding-right: 5px;'>
+              <span>完成率:<span style='color: #0B58FF;'>{{item.detailData.completeRate}}%</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>
@@ -69,7 +35,7 @@ export default {
       type: Object,
       default: () => ({
         运费: { completeRate: 0, diff: 0, real: 0, target: 0, thb: 0 },
-        成本: { completeRate: 0, diff: 0, real: 0, target: 0, thb: 0 },
+        全成本: { completeRate: 0, diff: 0, real: 0, target: 0, thb: 0 },
         销量: { completeRate: 0, diff: 0, real: 0, target: 0, thb: 0 }
       })
     },
@@ -99,6 +65,55 @@ export default {
       }
     }
   },
+  computed: {
+    indicatorDefs() {
+      return [
+        { key: 'saleData', name: '销量', unit: '万㎡', route:'/salesVolumeAnalysis/salesVolumeAnalysisBase'},
+        { key: 'cbData', name: '全成本', unit: '元/㎡',route:'/fullCostAnalysis/fullCostAnalysisBase'},
+        { key: 'yfData', name: '运费', unit: '元/㎡',route:null}
+      ]
+    },
+    indicators() {
+      let _this = this
+      const fallback = { target: 0, real: 0, completeRate: 0, diff: 0, flag: 0 }
+      const list = Object.entries(_this.relatedMon).map(([title, data]) => {
+        return {
+          title: title,
+          target: data.target,
+          real: data.real,
+          completeRate: data.completeRate,
+          diff: data.diff
+        };
+      });
+      return _this.indicatorDefs.map(def => {
+        const data = list.find(item => item && item.title === def.name) || fallback
+        const detailData = {
+          ...data,
+          flag: _this.getRateFlag((data || _this.defaultData).completeRate, (data || _this.defaultData).real, (data || _this.defaultData).target),
+        }
+        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: {
     relatedMon: {
       handler(newValue) {