首页订单跟踪修改

.env.dev

@@ -10,7 +10,7 @@ VUE_APP_TITLE = 洛玻集团驾驶舱
 # VUE_APP_BASE_API = 'http://172.16.33.83:7070'
 
 # 杨姗姗
-# VUE_APP_BASE_API = 'http://172.16.20.218:8080'
+# VUE_APP_BASE_API = 'http://172.16.20.187:8080'
 # 小田
 # VUE_APP_BASE_API = 'http://172.16.19.232:7070'
 # 测试

src/views/home/components/order-bottom-leftItem.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="coreItem">
     <!-- 单独渲染第一个item -->
-    <div class="item" v-if="itemList.length > 0" v-for="(item, index) in itemList">
+    <div class="item" v-for="(item, index) in itemList">
       <div class="unit">{{ item.unit }}</div>
       <div class="item-content">
         <div class="content-wrapper">
@@ -28,6 +28,44 @@
           </div>
         </div>
 
+        <div class="yield" style="display: flex;justify-content: space-between;">
+          <div class="progress-percent">完成率</div>
+          <!-- 百分比颜色动态绑定 -->
+          <div class="progress-percent" :style="{
+            color: getColor(item.progress)
+          }">
+            {{ item.progress }}%
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="item" v-for="(item, index) in itemList2" :key="index" :style="index === 0 ? { width: '100%' } : {}">
+      <div class="unit">{{ item.unit }}</div>
+      <div class="item-content">
+        <div class="content-wrapper">
+          <div class="left">
+            <div class="number">{{ item.targetValue }}</div>
+            <div class="title">预算值</div>
+          </div>
+          <div class="line"></div>
+          <div class="right">
+            <div class="number" :style="{ color: getColor(item.currentValue, item.targetValue) }">
+              {{ item.currentValue }}
+            </div>
+            <div class="title">实际值</div>
+          </div>
+        </div>
+
+        <div class="progress-group">
+          <div class="progress-container" :style="index === 0 ? { width: '100%' } : {}">
+            <!-- 进度条颜色和宽度动态绑定 -->
+            <div class="progress-bar" :style="{
+              width: itemList2[0].progress + '%',
+              background: getColor(item.progress)
+            }"></div>
+          </div>
+        </div>
+
         <div class="yield" style="display: flex;justify-content: space-between;">
           <div class="progress-percent">完成率</div>
           <!-- 百分比颜色动态绑定 -->
@@ -46,11 +84,12 @@
 export default {
   name: "Container",
   components: {},
-  props: ["orderOutput"],
+  props: ["orderOutput","dateData"],
   data() {
     return {
       progress: 90, // 进度值基础参数
-      itemList: []
+      itemList: [],
+      itemList2: []//7月以后得
     };
   },
   watch: {
@@ -63,6 +102,36 @@ export default {
   },
   methods: {
     getItemData(data) {
+      // 26年7月份以后用海外组的那个
+      if (this.dateData.startTime>=new Date('2026-07-01 00:00:00').getTime()) {
+        this.itemList2 = [
+        {
+          unit: "总进度",
+          targetValue: data.totalProgress.target,
+          currentValue: data.totalProgress.real,
+          progress: data.totalProgress.rate,
+        },
+        {
+          unit: "一组",
+          targetValue: data.group1.target,
+          currentValue: data.group1.real,
+          progress: data.group1.rate
+        },
+        {
+          unit: "二组",
+          targetValue: data.group2.target,
+          currentValue: data.group2.real,
+          progress: data.group2.rate
+        },
+        {
+          unit: "海外组",
+          targetValue: data.overseaGroup.target,
+          currentValue: data.overseaGroup.real,
+          progress: data.overseaGroup.rate
+        }
+      ]
+      this.itemList = []
+      }else{
         this.itemList = [
         {
           unit: "总进度",
@@ -101,6 +170,8 @@ export default {
           progress: data.group5.rate
         }
       ]
+      this.itemList2 = []
+      }
     },
     // 颜色判断核心方法：实际值≥预算值返回绿色，否则返回橙色
     getColor(progress) {

src/views/home/components/orderProgress.vue

@@ -4,7 +4,7 @@
       @handleShow="showTable">
       <!-- 1. 移除 .kpi-content 的固定高度，改为自适应 -->
       <div style="display: flex;gap: 9px;padding: 14px 16px;">
-        <orderItem v-show="!tableShow" :orderOutput="orderOutput" @handleShowTable="getTable" />
+        <orderItem v-show="!tableShow" :orderOutput="orderOutput" @handleShowTable="getTable" :dateData="dateData"/>
         <base-table v-show="tableShow" style="height: 252px;width: 100%;" :page="1" :limit="10" :show-index="true"
           :beilv="1" :tableConfig="tableProps" :table-data="tableData" />
       </div>
@@ -32,6 +32,10 @@ export default {
       type: Array,
       default: () => []
     },
+    dateData: {
+      type: Object,
+      default: () => ({})
+    }
   },
   data() {
     return {

src/views/home/index.vue

@@ -22,7 +22,7 @@
               gap: 12px;
               grid-template-columns:745px 560px 560px ;
             ">
-          <orderProgress @getData="getOrderData" :baseOrder="orderTableData" :orderOutput="orderOutput" />
+          <orderProgress @getData="getOrderData" :baseOrder="orderTableData" :dateData="dateData" :orderOutput="orderOutput" />
           <coreBottomLeft :dateData="dateData" :purchase="purchase" :inventory="inventory" />
           <keyWork :importantWork="importantWork" />
         </div>