修改

2025-11-13 13:29:46 +08:00
parent bff6efbaa8
commit 5ddab768ef
33 changed files with 153 additions and 251 deletions
--- a/src/views/home/components/KFAP.vue
+++ b/src/views/home/components/KFAP.vue
@@ -1,6 +1,6 @@
 <template>
  <div style="">
-    <Container name="利润影主要响因素" icon="cockpitItemIcon" size="profitMiddleBasic" topSize="KFAPTopTitle">
+    <Container name="利润主要影响因素" icon="cockpitItemIcon" size="profitMiddleBasic" topSize="KFAPTopTitle">
      <div class="kpi-content" style="padding: 14px 16px; display: flex;width: 100%;">
        <div class="left" style="width: 382px;">
          <top-item :itemList="targetItemList" />
--- a/src/views/home/components/PSDO.vue
+++ b/src/views/home/components/PSDO.vue
@@ -1,6 +1,6 @@
 <template>
  <div style="flex: 1">
-    <Container name="库存" icon="cockpitItemIcon" size="psiMiddleBg" topSize="KFAPTopTitle">
+    <Container name="库存总览·万m²" icon="cockpitItemIcon" size="psiMiddleBg" topSize="KFAPTopTitle">
      <!-- 1. 移除 .kpi-content 的固定高度，改为自适应 -->
      <div class="kpi-content" style="padding: 14px 16px; display: flex;width: 100%;">
        <div class="bottom"
@@ -25,7 +25,7 @@
                  {{ stockVO.avgValue || 0 }}
                </div>
                <div class="title">
-                  平均数量
+                  平均销量
                </div>
              </div>
            </div>
--- a/src/views/home/components/order-bottom-leftItem.vue
+++ b/src/views/home/components/order-bottom-leftItem.vue
@@ -11,11 +11,10 @@
          </div>
          <div class="line"></div>
          <div class="right">
-            <!-- 实际值（当前值）颜色动态绑定 -->
            <div class="number" :style="{ color: getColor(itemList[0].currentValue, itemList[0].targetValue) }">
              {{ itemList[0].currentValue }}
            </div>
-            <div class="title">当前值</div>
+            <div class="title">实际值</div>
          </div>
        </div>

@@ -42,6 +41,7 @@
    <!-- 循环渲染剩余的item（从索引1开始） -->
    <div class="item groupData" style="display: flex;padding: 0;" v-for="(item, index) in itemList.slice(1)"
      :key="index">
+      <!-- 左侧目标值/实际值部分（不变） -->
      <div class="left" style="display: flex;align-items: start;gap: 4px;padding: 12px 0 0 12px;">
        <div class="groupName">{{ item.unit }}</div>
        <div class="left-target">
@@ -49,7 +49,6 @@
          <div class="title">目标值</div>
        </div>
        <div class="left-real">
-          <!-- 实际值颜色动态绑定 -->
          <div class="number" :style="{ color: getColor(item.currentValue, item.targetValue) }">
            {{ item.currentValue }}
          </div>
@@ -58,10 +57,10 @@
      </div>
      <div class="cityLine"></div>
      <div class="right">
-        <!-- 顶部完成率颜色动态绑定 -->
+        <!-- 顶部完成率部分（不变） -->
        <div class="groupName" :class="{
-          'bg-default': item.currentValue < item.targetValue,  // 小于目标值：默认背景
-          'bg-green': item.currentValue >= item.targetValue    // 大于等于目标值：绿色背景
+          'bg-default': item.currentValue < item.targetValue,
+          'bg-green': item.currentValue >= item.targetValue
        }" style="font-size: 12px;display: flex;align-items: center;justify-content: flex-end;">
          <div class="title">完成率</div>
          <div class="yield" style="font-size: 22px;margin-bottom: 4px;">
@@ -70,50 +69,27 @@
          <div class="unit">%</div>
        </div>

-        <!-- 第一个城市进度 -->
-        <div class="right-city">
-          <div class="city">桐城</div>
+        <!-- 动态渲染城市进度：循环 item.cities -->
+        <div class="right-city" v-for="(city, cityIdx) in item.cities" :key="cityIdx"
+          :style="{ marginTop: cityIdx > 0 ? '2px' : '0' }">
+          <div class="city">{{ city.name }}</div> <!-- 动态城市名 -->
          <div class="city-progress-group">
            <div class="city-progress-container">
-              <!-- 城市进度条颜色动态绑定 -->
+              <!-- 动态城市进度条（颜色按城市进度判断） -->
              <div class="city-progress-bar" :style="{
-                width: item.progress + '%',
-                background: getColor(item.currentValue, item.targetValue)
+                width: city.progress + '%',
+                background: getColor(city.completed, city.total) // 用城市已完成/总数判断颜色
              }"></div>
            </div>
          </div>
          <div class="city-progress-yield" style="display: flex;justify-content: space-between;">
-            <!-- numerator颜色动态绑定 -->
-            <div class="numerator" :style="{ color: getColor(item.currentValue, item.targetValue) }">
-              12/13
+            <!-- 动态比值（已完成/总数） -->
+            <div class="numerator" :style="{ color: getColor(city.completed, city.total) }">
+              {{ city.completed }}/{{ city.total }}
            </div>
-            <!-- 城市完成率颜色动态绑定 -->
-            <div class="city-yield" :style="{ color: getColor(item.currentValue, item.targetValue) }">
-              {{ item.progress }}%
-            </div>
-          </div>
-        </div>
-
-        <!-- 第二个城市进度 -->
-        <div class="right-city" style="margin-top: 2px;">
-          <div class="city">桐城</div>
-          <div class="city-progress-group">
-            <div class="city-progress-container">
-              <!-- 城市进度条颜色动态绑定 -->
-              <div class="city-progress-bar" :style="{
-                width: item.progress + '%',
-                background: getColor(item.currentValue, item.targetValue)
-              }"></div>
-            </div>
-          </div>
-          <div class="city-progress-yield" style="display: flex;justify-content: space-between;">
-            <!-- numerator颜色动态绑定 -->
-            <div class="numerator" :style="{ color: getColor(item.currentValue, item.targetValue) }">
-              12/13
-            </div>
-            <!-- 城市完成率颜色动态绑定 -->
-            <div class="city-yield" :style="{ color: getColor(item.currentValue, item.targetValue) }">
-              {{ item.progress }}%
+            <!-- 动态城市完成率 -->
+            <div class="city-yield" :style="{ color: getColor(city.completed, city.total) }">
+              {{ city.progress }}%
            </div>
          </div>
        </div>
@@ -134,38 +110,54 @@ export default {
        {
          unit: "总进度",
          targetValue: 16,
-          currentValue: 14.5, // 小于目标值，应显示橙色
-          progress: 90
+          currentValue: 14.5,
+          progress: 90,
+          cities: [] // 总进度无需城市数据，留空
        },
        {
          unit: "一组",
          targetValue: 16,
-          currentValue: 17, // 大于目标值，应显示绿色
-          progress: 106
+          currentValue: 17,
+          progress: 106,
+          cities: [
+            { name: "桐城", completed: 12, total: 13, progress: 92 },
+            { name: "自贡", completed: 15, total: 16, progress: 93 } // 新增城市示例
+          ]
        },
        {
          unit: "二组",
          targetValue: 16,
-          currentValue: 16, // 等于目标值，应显示绿色
-          progress: 100
+          currentValue: 16,
+          progress: 100,
+          cities: [
+            { name: "蚌埠", completed: 10, total: 12, progress: 83 },
+            { name: "合肥", completed: 8, total: 10, progress: 80 }
+          ]
        },
+        // 其他组同理，按需添加 cities 数据
        {
          unit: "三组",
          targetValue: 16,
-          currentValue: 15.2, // 小于目标值，应显示橙色
-          progress: 85
+          currentValue: 15.2,
+          progress: 85,
+          cities: [{ name: "宜兴", completed: 9, total: 11, progress: 81 }]
        },
        {
          unit: "四组",
          targetValue: 16,
-          currentValue: 18, // 大于目标值，应显示绿色
-          progress: 112
+          currentValue: 18,
+          progress: 112,
+          cities: [
+            { name: "漳州", completed: 14, total: 15, progress: 93 },
+            { name: "洛阳", completed: 12, total: 14, progress: 85 }
+          ]
        },
        {
          unit: "五组",
          targetValue: 16,
-          currentValue: 14, // 小于目标值，应显示橙色
-          progress: 80
+          currentValue: 14,
+          progress: 80,
+          cities: [{ name: "桐城", completed: 7, total: 9, progress: 77 }]
        }
      ]
    };
--- a/src/views/home/components/orderProgress.vue
+++ b/src/views/home/components/orderProgress.vue
@@ -1,6 +1,6 @@
 <template>
  <div style="flex: 1">
-    <bottomMiddleContainer name="订单进度跟踪·万m²" icon="cockpitItemIcon" size="bottomBasic">
+    <bottomMiddleContainer name="订单产量跟踪·万m²" icon="cockpitItemIcon" size="bottomBasic">
      <!-- 1. 移除 .kpi-content 的固定高度，改为自适应 -->
      <div style="display: flex;gap: 9px;padding: 14px 16px;">
        <orderItem />
--- a/src/views/home/components/productBar.vue
+++ b/src/views/home/components/productBar.vue
@@ -128,7 +128,7 @@ export default {
        },
        series: [
          {
-            name: 'Line 1',
+            name: '实际',
            type: 'line',
            stack: 'Total',
            symbol: 'circle', // 点的形状（circle为圆形）
@@ -157,7 +157,7 @@ export default {
            data: [140, 232, 101, 264, 90, 340, 250]
          },
          {
-            name: 'Line 2',
+            name: '目标',
            type: 'line',
            stack: 'Total',
            symbol: 'circle', // 点的形状（circle为圆形）
--- a/src/views/home/components/psiLineBar.vue
+++ b/src/views/home/components/psiLineBar.vue
@@ -145,7 +145,7 @@ export default {
        yAxis: [
          {
            type: 'value',
-            name: '万㎡',
+            name: '万元',
            nameTextStyle: {
              color: 'rgba(0, 0, 0, 0.45)',
              fontSize: 12,