生产总览-服务工单-页面开发

src/views/productManagement/installationOrder/components/ViewDialog.vue

@@ -43,16 +43,12 @@
             <el-input v-model="form.acceptTime" readonly />
           </el-form-item>
         </el-col>
-        
       </el-row>
 
       <el-row :gutter="10">
         <el-col :span="8">
           <el-form-item label="客户">
-            <el-input
-              v-model="form.customerName"
-              readonly
-            />
+            <el-input v-model="form.customerName" readonly />
           </el-form-item>
         </el-col>
         <el-col :span="8">
@@ -67,8 +63,6 @@
         </el-col>
       </el-row>
 
-      
-
       <el-row :gutter="10">
         <el-col :span="8">
           <el-form-item label="安装总数量">
@@ -88,7 +82,6 @@
       </el-row>
 
       <el-row :gutter="10">
-        
         <el-col :span="8">
           <el-form-item label="预计完成时间">
             <el-input v-model="form.estimatedCompleteTime" readonly />
@@ -106,11 +99,14 @@
         </el-col>
       </el-row>
       <el-row :gutter="10">
-        
         <el-col :span="8">
           <el-form-item label="安装进度">
             <div class="">
-              <el-progress :percentage="Number(form.progress)" :stroke-width="15" style="line-height: unset;"/>
+              <el-progress
+                :percentage="Number(form.progress)"
+                :stroke-width="15"
+                style="line-height: unset"
+              />
             </div>
           </el-form-item>
         </el-col>
@@ -129,20 +125,50 @@
         <div class="detail-section">
           <div class="table-header">
             <div class="section-title">货品明细</div>
-            <el-button type="text" class="fold-button" @click="isTableVisible = !isTableVisible">
-              <span>{{ isTableVisible ? '收起' : '展开' }}</span>
-              <i :class="isTableVisible ? 'el-icon-arrow-up' : 'el-icon-arrow-down'" />
+            <el-button
+              type="text"
+              class="fold-button"
+              @click="isTableVisible = !isTableVisible"
+            >
+              <span>{{ isTableVisible ? "收起" : "展开" }}</span>
+              <i
+                :class="
+                  isTableVisible ? 'el-icon-arrow-up' : 'el-icon-arrow-down'
+                "
+              />
             </el-button>
           </div>
           <div v-show="isTableVisible">
-            <el-table :data="form.products" border style="width: 100%;">
-              <el-table-column type="index" label="序号" width="50" align="center" />
-              <el-table-column prop="goodsCode" label="货品编号" align="center" />
-              <el-table-column prop="goodsName" label="货品名称" align="center" />
-              <el-table-column prop="goodsSpecification" label="货品规格" align="center" width="50"/>
-              <el-table-column prop="goodsImagePath" label="货品图片" align="center">
+            <el-table :data="form.products" border style="width: 100%">
+              <el-table-column
+                type="index"
+                label="序号"
+                width="50"
+                align="center"
+              />
+              <el-table-column
+                prop="goodsCode"
+                label="货品编号"
+                align="center"
+              />
+              <el-table-column
+                prop="goodsName"
+                label="货品名称"
+                align="center"
+              />
+              <el-table-column
+                prop="goodsSpecification"
+                label="货品规格"
+                align="center"
+                width="50"
+              />
+              <el-table-column
+                prop="goodsImagePath"
+                label="货品图片"
+                align="center"
+              >
                 <template slot-scope="scope">
-                  <el-image 
+                  <el-image
                     v-if="scope.row.goodsImagePath"
                     :src="baseApi + scope.row.goodsImagePath"
                     style="width: 50px; height: 50px"
@@ -153,17 +179,62 @@
                       <i class="el-icon-picture-outline"></i>
                     </div>
                   </el-image>
-                  <div v-else class="image-slot" style="width: 50px; height: 50px; display: inline-flex; justify-content: center; align-items: center; background: #f5f7fa; border-radius: 4px;">
-                    <i class="el-icon-picture-outline" style="font-size: 20px; color: #909399;"></i>
+                  <div
+                    v-else
+                    class="image-slot"
+                    style="
+                      width: 50px;
+                      height: 50px;
+                      display: inline-flex;
+                      justify-content: center;
+                      align-items: center;
+                      background: #f5f7fa;
+                      border-radius: 4px;
+                    "
+                  >
+                    <i
+                      class="el-icon-picture-outline"
+                      style="font-size: 20px; color: #909399"
+                    ></i>
                   </div>
                 </template>
               </el-table-column>
-              <el-table-column prop="goodsUnit" label="计量单位" align="center" width="50"/>
-              <el-table-column prop="stock" label="现有库存" align="center" width="60"/>
-              <el-table-column prop="orderQuantity" label="订单数量" align="center" width="70"/>
-              <el-table-column prop="shippedQuantity" label="已发货数量" align="center" width="70"/>
-              <el-table-column prop="unshippedQuantity" label="未发货数量" align="center" width="70"/>
-              <el-table-column prop="remark" label="备注" align="center" width="100"/>
+              <el-table-column
+                prop="goodsUnit"
+                label="计量单位"
+                align="center"
+                width="50"
+              />
+              <el-table-column
+                prop="stock"
+                label="现有库存"
+                align="center"
+                width="60"
+              />
+              <el-table-column
+                prop="orderQuantity"
+                label="订单数量"
+                align="center"
+                width="70"
+              />
+              <el-table-column
+                prop="shippedQuantity"
+                label="已发货数量"
+                align="center"
+                width="70"
+              />
+              <el-table-column
+                prop="unshippedQuantity"
+                label="未发货数量"
+                align="center"
+                width="70"
+              />
+              <el-table-column
+                prop="remark"
+                label="备注"
+                align="center"
+                width="100"
+              />
             </el-table>
           </div>
         </div>
@@ -174,10 +245,10 @@
         <div class="detail-section">
           <div class="section-title">服务验收</div>
           <div class="acceptance-image">
-            <el-image 
+            <el-image
               v-if="form.acceptanceImagePath"
               :src="baseApi + form.acceptanceImagePath"
-              style="width: 120px; height: 120px;"
+              style="width: 120px; height: 120px"
               :preview-src-list="[baseApi + form.acceptanceImagePath]"
               fit="cover"
             >
@@ -186,8 +257,8 @@
               </div>
             </el-image>
             <div v-else class="empty-image">
-              <i class="el-icon-picture-outline" style="font-size: 24px;"></i>
-              <span style="margin-top: 8px;">暂无验收图片</span>
+              <i class="el-icon-picture-outline" style="font-size: 24px"></i>
+              <span style="margin-top: 8px">暂无验收图片</span>
             </div>
           </div>
         </div>
@@ -198,7 +269,11 @@
         <div class="detail-section">
           <div class="section-title">流程进度</div>
           <div class="process-steps">
-            <el-steps :active="form.currentStep" align-center finish-status="success">
+            <el-steps
+              :active="form.currentStep"
+              align-center
+              finish-status="success"
+            >
               <el-step title="服务下单">
                 <template slot="description">
                   <div class="step-description">
@@ -207,24 +282,27 @@
                   </div>
                 </template>
                 <template slot="icon">
-                  <i :class="form.currentStep >= 1 ? 'el-icon-check' : ''" :style="{color: form.currentStep >= 1 ? '#67C23A' : ''}"></i>
+                  <i
+                    :class="form.currentStep >= 1 ? 'el-icon-check' : ''"
+                    :style="{ color: form.currentStep >= 1 ? '#67C23A' : '' }"
+                  ></i>
                 </template>
               </el-step>
               <el-step title="服务接单">
                 <template slot="description">
                   <div class="step-description">
-                    <div>{{ form.isRejected ? '已驳回' : '徐XX' }}</div>
+                    <div>{{ form.isRejected ? "已驳回" : "徐XX" }}</div>
                     <div>{{ form.acceptTime }}</div>
                   </div>
                 </template>
                 <template slot="icon" v-if="form.isRejected">
-                  <i class="el-icon-close" style="color: #F56C6C;"></i>
+                  <i class="el-icon-close" style="color: #f56c6c"></i>
                 </template>
               </el-step>
               <el-step title="开始服务">
                 <template slot="description">
                   <div class="step-description">
-                    <div>{{ form.startTime ? '徐XX' : '' }}</div>
+                    <div>{{ form.startTime ? "徐XX" : "" }}</div>
                     <div>{{ form.startTime }}</div>
                   </div>
                 </template>
@@ -232,7 +310,7 @@
               <el-step title="完成服务">
                 <template slot="description">
                   <div class="step-description">
-                    <div>{{ form.actualCompleteTime ? '徐XX' : '' }}</div>
+                    <div>{{ form.actualCompleteTime ? "徐XX" : "" }}</div>
                     <div>{{ form.actualCompleteTime }}</div>
                   </div>
                 </template>
@@ -240,7 +318,7 @@
               <el-step title="验收">
                 <template slot="description">
                   <div class="step-description">
-                    <div>{{ form.acceptanceTime ? '孙xx' : '' }}</div>
+                    <div>{{ form.acceptanceTime ? "孙xx" : "" }}</div>
                     <div>{{ form.acceptanceTime }}</div>
                   </div>
                 </template>
@@ -257,57 +335,74 @@
 </template>
 
 <script>
-import { GetDataByNames } from '@/api/common'
+import { GetDataByNames } from "@/api/common";
 
 export default {
-  name: 'ViewDialog',
+  name: "ViewDialog",
   props: {
     visible: {
       type: Boolean,
-      default: false
+      default: false,
     },
     installerOptions: {
       type: Array,
-      default: () => []
+      default: () => [],
     },
     projectOptions: {
       type: Array,
-      default: () => []
+      default: () => [],
     },
     rowData: {
       type: Object,
-      default: () => ({})
-    }
+      default: () => ({}),
+    },
   },
   computed: {
     baseApi() {
-      return process.env.VUE_APP_BASE_API
+      return process.env.VUE_APP_BASE_API;
     },
     ordererName() {
-      return this.installerOptions.find(item => item.value === parseInt(this.form.orderer))?.label || ''
+      return (
+        this.installerOptions.find(
+          (item) => item.value === parseInt(this.form.orderer)
+        )?.label || ""
+      );
     },
     projectName() {
-      return this.projectOptions.find(item => item.value === parseInt(this.form.serviceProject))?.label || ''
+      return (
+        this.projectOptions.find(
+          (item) => item.value === parseInt(this.form.serviceProject)
+        )?.label || ""
+      );
     },
     serviceStaffName() {
-      return this.installerOptions.find(item => item.value === parseInt(this.form.serviceStaffIds))?.label || ''
+      return (
+        this.installerOptions.find(
+          (item) => item.value === parseInt(this.form.serviceStaffIds)
+        )?.label || ""
+      );
     },
     remainingTimeText() {
-      if (this.form.remainingTime === null || this.form.remainingTime === undefined) return ''
+      if (
+        this.form.remainingTime === null ||
+        this.form.remainingTime === undefined
+      )
+        return "";
       if (this.form.remainingTime < 0) {
-        return `已逾期 ${Math.abs(this.form.remainingTime)} 天`      }
-      return `${this.form.remainingTime} 天`
-    }
+        return `已逾期 ${Math.abs(this.form.remainingTime)} 天`;
+      }
+      return `${this.form.remainingTime} 天`;
+    },
   },
   watch: {
     visible(val) {
       if (val) {
         // 弹窗打开时初始化数据
         this.$nextTick(() => {
-          this.getOrderData()
-        })
+          this.getOrderData();
+        });
       }
-    }
+    },
   },
   data() {
     return {
@@ -315,127 +410,128 @@ export default {
       isAcceptanceVisible: true,
       isProcessVisible: true,
       form: {
-        orderNo: '',
-        orderTime: '',
-        orderer: '',
-        serviceProject: '',
-        serviceStaffIds: '',
-        estimatedCompleteTime: '',
-        deliveryNo: '',
-        contractNo: '',
-        customerName: '',
-        remark: '',
+        orderNo: "",
+        orderTime: "",
+        orderer: "",
+        serviceProject: "",
+        serviceStaffIds: "",
+        estimatedCompleteTime: "",
+        deliveryNo: "",
+        contractNo: "",
+        customerName: "",
+        remark: "",
         products: [],
         totalQuantity: 0,
         installedQuantity: 0,
         uninstalledQuantity: 0,
         progress: 0,
-        acceptTime: '',
-        actualCompleteTime: '',
+        acceptTime: "",
+        actualCompleteTime: "",
         remainingTime: null,
-        acceptanceImagePath: '',
+        acceptanceImagePath: "",
         currentStep: 2,
         isRejected: true,
-        rejectReason: 'xxxxxxx',
-        startTime: '',
-        acceptanceTime: ''
-      }
-    }
+        rejectReason: "xxxxxxx",
+        startTime: "",
+        acceptanceTime: "",
+      },
+    };
   },
   methods: {
     // 获取订单数据
     async getOrderData() {
       try {
-        this.isTableVisible = true  // 重置表格为展开状态
+        this.isTableVisible = true; // 重置表格为展开状态
         const params = [
           {
             name: "getInstallationOrderById",
             returntype: "Map",
             parammaps: {
-              id: this.rowData.id
-            }
+              id: this.rowData.id,
+            },
           },
           {
             name: "getInstallationOrderDetail",
             returntype: "Map",
             parammaps: {
-              orderId: this.rowData.id
-            }
-          }
-        ]
+              orderId: this.rowData.id,
+            },
+          },
+        ];
 
-        const response = await GetDataByNames(params)
-        if (response.msg === 'ok') {
+        const response = await GetDataByNames(params);
+        if (response.msg === "ok") {
           // 获取主表数据
-          const mainData = response.data.getInstallationOrderById.list[0] || {}
+          const mainData = response.data.getInstallationOrderById.list[0] || {};
           // 获取明细表数据
-          const detailData = response.data.getInstallationOrderDetail.list || []
+          const detailData =
+            response.data.getInstallationOrderDetail.list || [];
 
           // 初始化表单数据
           this.form = {
-            orderNo: mainData.orderNo || '',
-            orderTime: mainData.orderTime || '',
+            orderNo: mainData.orderNo || "",
+            orderTime: mainData.orderTime || "",
             orderer: mainData.dispatcherId,
             serviceProject: mainData.projectId,
             serviceStaffIds: mainData.serviceStaffIds,
-            estimatedCompleteTime: mainData.estimatedCompleteTime || '',
-            deliveryNo: mainData.deliveryNo || '',
-            contractNo: mainData.contractNo || '',
-            customerName: mainData.customerName || '',
-            remark: mainData.remark || '',
+            estimatedCompleteTime: mainData.estimatedCompleteTime || "",
+            deliveryNo: mainData.deliveryNo || "",
+            contractNo: mainData.contractNo || "",
+            customerName: mainData.customerName || "",
+            remark: mainData.remark || "",
             totalQuantity: mainData.totalQuantity || 0,
             installedQuantity: mainData.installedQuantity || 0,
             uninstalledQuantity: mainData.uninstalledQuantity || 0,
             progress: mainData.progress || 0,
-            acceptTime: mainData.acceptTime || '',
-            actualCompleteTime: mainData.actualCompleteTime || '',
+            acceptTime: mainData.acceptTime || "",
+            actualCompleteTime: mainData.actualCompleteTime || "",
             remainingTime: mainData.remainingTime,
-            products: detailData.map(item => ({
+            products: detailData.map((item) => ({
               goodsId: item.goodsId,
-              goodsCode: item.goodsCode || '',
-              goodsName: item.goodsName || '',
-              goodsSpecification: item.goodsSpecification || '',
-              goodsImagePath: item.goodsImagePath || '',
-              goodsUnit: item.goodsUnit || '',
+              goodsCode: item.goodsCode || "",
+              goodsName: item.goodsName || "",
+              goodsSpecification: item.goodsSpecification || "",
+              goodsImagePath: item.goodsImagePath || "",
+              goodsUnit: item.goodsUnit || "",
               stock: item.stock || 0,
               orderQuantity: item.orderQuantity || 0,
               shippedQuantity: item.shippedQuantity || 0,
               unshippedQuantity: item.unshippedQuantity || 0,
-              remark: item.remark || ''
+              remark: item.remark || "",
             })),
-            acceptanceImagePath: mainData.acceptanceImagePath || '',
+            acceptanceImagePath: mainData.acceptanceImagePath || "",
             currentStep: mainData.currentStep || 2,
             isRejected: mainData.isRejected || true,
-            rejectReason: mainData.rejectReason || 'xxxxxxx',
-            startTime: mainData.startTime || '',
-            acceptanceTime: mainData.acceptanceTime || ''
-          }
+            rejectReason: mainData.rejectReason || "xxxxxxx",
+            startTime: mainData.startTime || "",
+            acceptanceTime: mainData.acceptanceTime || "",
+          };
         } else {
-          this.$message.error('获取数据失败')
+          this.$message.error("获取数据失败");
         }
       } catch (error) {
-        console.error('获取数据失败:', error)
-        this.$message.error('获取数据失败')
+        console.error("获取数据失败:", error);
+        this.$message.error("获取数据失败");
       }
     },
 
     // 关闭弹窗
     handleDialogClose() {
-      this.$emit('update:visible', false)
-    }
-  }
-}
+      this.$emit("update:visible", false);
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
 :deep(.el-dialog) {
   border-radius: 8px;
-  
+
   .el-dialog__header {
     padding: 20px;
     border-bottom: 1px solid #ebeef5;
     margin-right: 0;
-    
+
     .el-dialog__title {
       font-size: 16px;
       font-weight: 500;
@@ -445,11 +541,11 @@ export default {
 
   .el-dialog__body {
     padding: 20px;
-    
+
     .el-form {
       .el-form-item {
         margin-bottom: 18px;
-        
+
         .el-form-item__label {
           font-weight: normal;
           color: #606266;
@@ -469,21 +565,21 @@ export default {
           cursor: default;
         }
       }
-      
+
       .el-textarea {
         width: 100%;
       }
-      
+
       .el-table {
         margin-top: 8px;
-        
+
         th {
           background-color: #f5f7fa;
           color: #333;
           font-weight: 500;
           padding: 8px 0;
         }
-        
+
         td {
           padding: 8px 0;
         }
@@ -495,7 +591,7 @@ export default {
     padding: 15px 20px;
     border-top: 1px solid #ebeef5;
     text-align: right;
-    
+
     .el-button {
       padding: 9px 20px;
       font-size: 13px;
@@ -525,18 +621,18 @@ export default {
   justify-content: space-between;
   align-items: center;
   margin-bottom: 15px;
-  
+
   .fold-button {
     padding: 0;
     font-size: 13px;
     color: #909399;
-    
+
     span {
       margin-right: 4px;
     }
-    
+
     &:hover {
-      color: #409EFF;
+      color: #409eff;
     }
   }
 }
@@ -571,16 +667,16 @@ export default {
   margin-bottom: 15px;
   position: relative;
   padding-left: 10px;
-  
+
   &::before {
-    content: '';
+    content: "";
     position: absolute;
     left: 0;
     top: 50%;
     transform: translateY(-50%);
     width: 3px;
     height: 15px;
-    background-color: #409EFF;
+    background-color: #409eff;
     border-radius: 2px;
   }
 }
@@ -607,12 +703,12 @@ export default {
   .step-description {
     font-size: 12px;
     line-height: 1.5;
-    
+
     div:first-child {
-      color: #409EFF;
+      color: #409eff;
       margin-bottom: 2px;
     }
-    
+
     div:last-child {
       color: #909399;
     }
@@ -634,4 +730,3 @@ export default {
   padding-left: 20px;
 }
 </style>
-

src/views/productManagement/installationSummary/components/InstallationTable.vue

@@ -1,78 +1,172 @@
 <template>
   <el-card class="box-card">
     <div slot="header" class="clearfix">
-      <div style="display: flex; justify-content: space-between; align-items: center;">
+      <div
+        style="
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+        "
+      >
         <div>
-          <span style="font-size: 13px;">安装概况</span>
-          <span style="margin-left: 8px; font-size: 13px; color: #666;">{{ updateTime }}</span>
+          <span style="font-size: 13px">安装概况</span>
+          <span style="margin-left: 8px; font-size: 13px; color: #666">{{
+            updateTime
+          }}</span>
         </div>
       </div>
     </div>
     <div class="table-container">
-      <el-table 
+      <el-table
         v-loading="loading"
-        :data="displayData" 
-        style="width: 100%" 
-        border 
+        :data="displayData"
+        style="width: 100%"
+        border
         size="small"
         @sort-change="handleSortChange"
       >
-        <el-table-column prop="customerName" label="客户名称" min-width="110" align="center" sortable="custom"/>
-        <el-table-column prop="productName" label="安装货品" min-width="110" align="center" sortable="custom"/>
-        <el-table-column prop="installer" label="安装人员" width="100" align="center"/>
-        <el-table-column prop="status" label="单据状态" width="100" align="center" sortable="custom">
+        <el-table-column
+          prop="customerName"
+          label="客户名称"
+          min-width="110"
+          align="center"
+          sortable="custom"
+        />
+        <el-table-column
+          prop="productName"
+          label="安装货品"
+          min-width="110"
+          align="center"
+          sortable="custom"
+        />
+        <el-table-column
+          prop="installer"
+          label="安装人员"
+          width="100"
+          align="center"
+        />
+        <el-table-column
+          prop="status"
+          label="单据状态"
+          width="100"
+          align="center"
+          sortable="custom"
+        >
           <template slot-scope="scope">
-            <el-tag :type="getStatusType(scope.row.status)" size="mini" effect="plain">
+            <el-tag
+              :type="getStatusType(scope.row.status)"
+              size="mini"
+              effect="plain"
+            >
               {{ scope.row.status }}
             </el-tag>
           </template>
         </el-table-column>
-        <el-table-column prop="progress" label="进度" width="250" align="center" sortable="custom">
+        <el-table-column
+          prop="progress"
+          label="进度"
+          width="250"
+          align="center"
+          sortable="custom"
+        >
           <template slot-scope="scope">
             <div class="progress-wrapper">
               <div class="progress-container">
                 <div class="progress-bar">
-                  <el-progress
-                    :percentage="(scope.row.progress / scope.row.total) * 100"
-                    :stroke-width="8"
-                    :show-text="false"
-                    :color="getProgressColor(scope.row.status)"/>
-                </div>
-                <div class="progress-info">
-                  <span 
-                    class="finished-number"
-                    @click="$emit('progress-click', scope.row)"
-                    style="cursor: pointer; color: #409EFF; margin-right: 2px;">
-                    {{ scope.row.progress }}
-                  </span>
-                  <span style="color: #909399;">/</span>
-                  <span class="total-number" style="color: #606266; margin-left: 2px;">{{ scope.row.total }}</span>
+                  <div class="custom-progress">
+                    <div
+                      class="progress-inner"
+                      :style="{
+                        width:
+                          Math.round(
+                            (scope.row.progress / scope.row.total) * 100
+                          ) + '%',
+                        backgroundColor: getProgressColor(scope.row.status),
+                      }"
+                    >
+                      <span class="progress-text" v-if="scope.row.progress > 0">
+                        {{ scope.row.progress }}
+                      </span>
+                    </div>
+                    <span class="total-text">
+                      {{
+                        scope.row.progress === 0
+                          ? scope.row.total
+                          : scope.row.total
+                      }}
+                    </span>
+                  </div>
                 </div>
               </div>
             </div>
           </template>
         </el-table-column>
-        <el-table-column prop="total" label="计划量" width="85" align="center"/>
-        <el-table-column prop="finished" label="已完成量" width="85" align="center"/>
-        <el-table-column prop="unfinished" label="未完成量" width="85" align="center"/>
-        <el-table-column prop="rate" label="完成率" width="100" align="center" sortable="custom">
+        <el-table-column
+          prop="total"
+          label="计划量"
+          width="85"
+          align="center"
+        />
+        <el-table-column
+          prop="finished"
+          label="已完成量"
+          width="85"
+          align="center"
+        />
+        <el-table-column
+          prop="unfinished"
+          label="未完成量"
+          width="85"
+          align="center"
+        />
+        <el-table-column
+          prop="rate"
+          label="完成率"
+          width="100"
+          align="center"
+          sortable="custom"
+        >
           <template slot-scope="scope">
-            {{ (scope.row.finished / scope.row.total * 100).toFixed(1) + '%' }}
+            {{
+              ((scope.row.finished / scope.row.total) * 100).toFixed(1) + "%"
+            }}
           </template>
         </el-table-column>
-        <el-table-column prop="remainingDays" label="距离完成时间还剩" width="130" align="center">
+        <el-table-column
+          prop="remainingDays"
+          label="距离完成时间还剩"
+          width="130"
+          align="center"
+        >
           <template slot-scope="scope">
-            <span :style="{ color: scope.row.remainingDays < 0 ? '#F56C6C' : '' }">
-              {{ scope.row.remainingDays > 0 ? scope.row.remainingDays + '天' : '超期' + Math.abs(scope.row.remainingDays) + '天' }}
+            <span
+              :style="{ color: scope.row.remainingDays < 0 ? '#F56C6C' : '' }"
+            >
+              {{
+                scope.row.remainingDays > 0
+                  ? scope.row.remainingDays + "天"
+                  : "超期" + Math.abs(scope.row.remainingDays) + "天"
+              }}
             </span>
           </template>
         </el-table-column>
       </el-table>
-      <div class="expand-button" v-if="(tableData.length > 0 ? tableData.length : defaultData.length) > 5">
-        <el-button type="text" @click="isExpanded = !isExpanded" class="expand-btn">
+      <div
+        class="expand-button"
+        v-if="
+          (tableData.length > 0 ? tableData.length : defaultData.length) > 10
+        "
+      >
+        <el-button
+          type="text"
+          @click="isExpanded = !isExpanded"
+          class="expand-btn"
+        >
           <div class="button-content">
             <i :class="['el-icon-arrow-' + (isExpanded ? 'up' : 'down')]"></i>
-            <span class="expand-text">{{ isExpanded ? '收起' : '展开更多' }}</span>
+            <span class="expand-text">{{
+              isExpanded ? "收起" : "展开更多"
+            }}</span>
           </div>
         </el-button>
       </div>
@@ -84,16 +178,16 @@
 // import { getInstallationList, getUnassignedCount } from '@/api/productManagement/installation' // 后续需要添加此API
 
 export default {
-  name: 'InstallationTable',
+  name: "InstallationTable",
   props: {
     tableData: {
       type: Array,
-      required: true
+      required: true,
     },
     updateTime: {
       type: String,
-      default: ''
-    }
+      default: "",
+    },
   },
   data() {
     return {
@@ -101,241 +195,242 @@ export default {
       isExpanded: false,
       localTableData: [], // 本地数据
       sortConfig: {
-        prop: '', // 排序的字段
-        order: '' // 排序的方向
+        prop: "", // 排序的字段
+        order: "", // 排序的方向
       },
       // 示例数据
       defaultData: [
         {
-          customerName: '现代牧业二场',
-          productName: '智能膜环',
-          installer: '张明星',
-          status: '进行中',
+          customerName: "现代牧业二场",
+          productName: "智能膜环",
+          installer: "张明星",
+          status: "进行中",
           progress: 900,
           total: 4000,
           finished: 900,
           unfinished: 3100,
-          remainingDays: 7
+          remainingDays: 7,
         },
         {
-          customerName: '现代牧业和林',
-          productName: '精准阉割',
-          installer: '陈希多',
-          status: '进行中',
+          customerName: "现代牧业和林",
+          productName: "精准阉割",
+          installer: "陈希多",
+          status: "进行中",
           progress: 170,
           total: 350,
           finished: 170,
           unfinished: 180,
-          remainingDays: 8
+          remainingDays: 8,
         },
         {
-          customerName: '现代牧业三场',
-          productName: '精准阉割',
-          installer: '李九联',
-          status: '已完成',
+          customerName: "现代牧业三场",
+          productName: "精准阉割",
+          installer: "李九联",
+          status: "已完成",
           progress: 200,
           total: 200,
           finished: 200,
           unfinished: 0,
-          remainingDays: 3
+          remainingDays: 3,
         },
         {
-          customerName: '蜂谷牧场',
-          productName: '佳沃评分',
-          installer: '李季冬',
-          status: '已超期',
+          customerName: "蜂谷牧场",
+          productName: "佳沃评分",
+          installer: "李季冬",
+          status: "已超期",
           progress: 70,
           total: 150,
           finished: 70,
           unfinished: 80,
-          remainingDays: -5
+          remainingDays: -5,
         },
         {
-          customerName: '海丰牧场',
-          productName: '佳沃评分',
-          installer: '谭性成',
-          status: '进行中',
+          customerName: "海丰牧场",
+          productName: "佳沃评分",
+          installer: "谭性成",
+          status: "进行中",
           progress: 1,
           total: 30,
           finished: 1,
           unfinished: 29,
-          remainingDays: 10
+          remainingDays: 10,
         },
         {
-          customerName: '大丰牧场',
-          productName: '精准阉割',
-          installer: '柯凡',
-          status: '未开始',
+          customerName: "大丰牧场",
+          productName: "精准阉割",
+          installer: "柯凡",
+          status: "未开始",
           progress: 0,
           total: 50,
           finished: 0,
           unfinished: 50,
-          remainingDays: 20
+          remainingDays: 20,
         },
         {
-          customerName: '马鞍山牧场',
-          productName: '智能膜环',
-          installer: '郑福超',
-          status: '进行中',
+          customerName: "马鞍山牧场",
+          productName: "智能膜环",
+          installer: "郑福超",
+          status: "进行中",
           progress: 200,
           total: 500,
           finished: 200,
           unfinished: 300,
-          remainingDays: 5
+          remainingDays: 5,
         },
         {
-          customerName: '新希望',
-          productName: '显示大屏',
-          installer: '韩佳维',
-          status: '进行中',
+          customerName: "新希望",
+          productName: "显示大屏",
+          installer: "韩佳维",
+          status: "进行中",
           progress: 20,
           total: 30,
           finished: 20,
           unfinished: 10,
-          remainingDays: 10
+          remainingDays: 10,
         },
         {
-          customerName: '泰安牧场',
-          productName: '智能膜环',
-          installer: '王建国',
-          status: '已完成',
+          customerName: "泰安牧场",
+          productName: "智能膜环",
+          installer: "王建国",
+          status: "已完成",
           progress: 300,
           total: 300,
           finished: 300,
           unfinished: 0,
-          remainingDays: 2
+          remainingDays: 2,
         },
         {
-          customerName: '云牧场',
-          productName: '精准阉割',
-          installer: '李明',
-          status: '已超期',
+          customerName: "云牧场",
+          productName: "精准阉割",
+          installer: "李明",
+          status: "已超期",
           progress: 150,
           total: 400,
           finished: 150,
           unfinished: 250,
-          remainingDays: -3
+          remainingDays: -3,
         },
         {
-          customerName: '宝塔牧场',
-          productName: '佳沃评分',
-          installer: '张伟',
-          status: '进行中',
+          customerName: "宝塔牧场",
+          productName: "佳沃评分",
+          installer: "张伟",
+          status: "进行中",
           progress: 80,
           total: 200,
           finished: 80,
           unfinished: 120,
-          remainingDays: 15
+          remainingDays: 15,
         },
         {
-          customerName: '五河牧场',
-          productName: '智能喷淋',
-          installer: '刘强',
-          status: '未开始',
+          customerName: "五河牧场",
+          productName: "智能喷淋",
+          installer: "刘强",
+          status: "未开始",
           progress: 0,
           total: 100,
           finished: 0,
           unfinished: 100,
-          remainingDays: 12
+          remainingDays: 12,
         },
         {
-          customerName: '和祥牧场',
-          productName: '智能称重',
-          installer: '赵四',
-          status: '进行中',
+          customerName: "和祥牧场",
+          productName: "智能称重",
+          installer: "赵四",
+          status: "进行中",
           progress: 50,
           total: 150,
           finished: 50,
           unfinished: 100,
-          remainingDays: 8
-        }
-      ]
-    }
+          remainingDays: 8,
+        },
+      ],
+    };
   },
   computed: {
     displayData() {
       // 如果props中的tableData为空，使用默认数据
-      let data = this.tableData.length > 0 ? [...this.tableData] : [...this.defaultData]
-      
+      let data =
+        this.tableData.length > 0 ? [...this.tableData] : [...this.defaultData];
+
       // 应用排序
       if (this.sortConfig.prop && this.sortConfig.order) {
-        const { prop, order } = this.sortConfig
+        const { prop, order } = this.sortConfig;
         data.sort((a, b) => {
-          let aValue = a[prop]
-          let bValue = b[prop]
+          let aValue = a[prop];
+          let bValue = b[prop];
 
           // 特殊处理完成率字段
-          if (prop === 'rate') {
-            aValue = (a.finished / a.total) * 100
-            bValue = (b.finished / b.total) * 100
+          if (prop === "rate") {
+            aValue = (a.finished / a.total) * 100;
+            bValue = (b.finished / b.total) * 100;
           }
 
           // 根据排序方向返回比较结果
-          if (order === 'ascending') {
-            return aValue > bValue ? 1 : -1
+          if (order === "ascending") {
+            return aValue > bValue ? 1 : -1;
           } else {
-            return aValue < bValue ? 1 : -1
+            return aValue < bValue ? 1 : -1;
           }
-        })
+        });
       }
-      
-      return this.isExpanded ? data : data.slice(0, 5)
-    }
+
+      return this.isExpanded ? data : data.slice(0, 10);
+    },
   },
   created() {
-    this.initData()
+    this.initData();
   },
   methods: {
     getStatusType(status) {
       switch (status) {
-        case '进行中':
-          return 'primary'
-        case '已完成':
-          return 'success'
-        case '已超期':
-          return 'danger'
-        case '未开始':
-          return 'info'
+        case "进行中":
+          return "primary";
+        case "已完成":
+          return "success";
+        case "已超期":
+          return "danger";
+        case "未开始":
+          return "info";
         default:
-          return 'info'
+          return "info";
       }
     },
     getProgressColor(status) {
       switch (status) {
-        case '进行中':
-          return '#409EFF'
-        case '已完成':
-          return '#67C23A'
-        case '已超期':
-          return '#F56C6C'
-        case '未开始':
-          return '#909399'
+        case "进行中":
+          return "#409EFF";
+        case "已完成":
+          return "#67C23A";
+        case "已超期":
+          return "#F56C6C";
+        case "未开始":
+          return "#909399";
         default:
-          return '#909399'
+          return "#909399";
       }
     },
     async initData() {
       try {
-        this.loading = true
+        this.loading = true;
         // TODO: 后端接口完成后替换此处
         // const { data: installationData } = await getInstallationList()
         // this.localTableData = installationData
-        
+
         // 模拟接口调用
-        await new Promise(resolve => setTimeout(resolve, 500))
-        this.localTableData = this.defaultData
+        await new Promise((resolve) => setTimeout(resolve, 500));
+        this.localTableData = this.defaultData;
       } catch (error) {
-        console.error('初始化数据失败:', error)
-        this.$message.error('获取数据失败')
+        console.error("初始化数据失败:", error);
+        this.$message.error("获取数据失败");
       } finally {
-        this.loading = false
+        this.loading = false;
       }
     },
     handleSortChange({ prop, order }) {
-      this.sortConfig = { prop, order }
-    }
-  }
-}
+      this.sortConfig = { prop, order };
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
@@ -349,22 +444,22 @@ export default {
 
 .expand-button {
   text-align: center;
-  border-top: 1px solid #EBEEF5;
+  border-top: 1px solid #ebeef5;
   margin-top: -1px;
-  
+
   .el-button {
     font-size: 13px;
     color: #909399;
     padding: 8px;
-    
+
     .button-content {
       display: inline-flex;
       align-items: center;
       position: relative;
-      
+
       i {
         font-size: 12px;
-        color: #C0C4CC;
+        color: #c0c4cc;
         transition: all 0.3s;
       }
 
@@ -376,13 +471,13 @@ export default {
         opacity: 0;
       }
     }
-    
+
     &:hover {
-      color: #409EFF;
-      
+      color: #409eff;
+
       .button-content {
         i {
-          color: #409EFF;
+          color: #409eff;
           margin-right: 4px;
         }
 
@@ -397,25 +492,52 @@ export default {
 
 .progress-wrapper {
   padding: 6px 0;
-  
+
   .progress-container {
     display: flex;
-    flex-direction: column;
     align-items: center;
-    gap: 4px;
-    
+    justify-content: center;
+
     .progress-bar {
       width: 100%;
-      padding: 0 12px;
-    }
-    
-    .progress-info {
-      font-size: 12px;
-      font-weight: 500;
-      
-      .finished-number {
-        &:hover {
-          opacity: 0.8;
+      padding: 0 20px;
+
+      .custom-progress {
+        width: 100%;
+        height: 12px;
+        background-color: #ebeef5;
+        border-radius: 100px;
+        overflow: visible;
+        position: relative;
+
+        .progress-inner {
+          height: 100%;
+          transition: all 0.3s ease;
+          border-radius: 100px;
+          position: relative;
+
+          .progress-text {
+            position: absolute;
+            right: 6px;
+            top: 50%;
+            transform: translateY(-50%);
+            color: #fff;
+            font-size: 10px;
+            line-height: 1;
+            text-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
+            white-space: nowrap;
+          }
+        }
+
+        .total-text {
+          position: absolute;
+          right: 6px;
+          top: 50%;
+          transform: translateY(-50%);
+          color: #606266;
+          font-size: 10px;
+          line-height: 1;
+          white-space: nowrap;
         }
       }
     }
@@ -424,12 +546,12 @@ export default {
 
 :deep(.el-table) {
   font-size: 12px;
-  
+
   .el-table__header th {
     padding: 8px 0;
     background-color: #f5f7fa;
   }
-  
+
   .el-table__body td {
     padding: 8px 0;
   }
@@ -444,4 +566,4 @@ export default {
 :deep(.el-table__body-wrapper) {
   transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
-</style> 
+</style>

src/views/productManagement/productionSummary/components/DeliveryStatusTable.vue

@@ -49,7 +49,10 @@
         style="width: 100%"
         border
         size="small"
+        :height="displayData.length > 10 ? 450 : null"
+        :header-cell-style="{ background: '#f5f7fa' }"
       >
+        <el-table-column type="index" label="序号" width="50" align="center" />
         <el-table-column
           prop="status"
           label="发货状态"
@@ -190,6 +193,106 @@ export default {
           deliveryNo: "6666666",
           deliveryTime: "2025-02",
         },
+        {
+          customerName: "赛宇牧场",
+          contractNo: "111111111",
+          productName: "智能喷淋",
+          status: "未发货",
+          orderQuantity: 10,
+          shippedQuantity: 0,
+          deliveryNo: "",
+          deliveryTime: null,
+        },
+        {
+          customerName: "和林牧场",
+          contractNo: "2222222",
+          productName: "精准铜喷",
+          status: "部分发货",
+          orderQuantity: 2,
+          shippedQuantity: 0,
+          deliveryNo: "",
+          deliveryTime: null,
+        },
+        {
+          customerName: "赛宇牧场",
+          contractNo: "333333",
+          productName: "体况评分",
+          status: "部分发货",
+          orderQuantity: 5,
+          shippedQuantity: 0,
+          deliveryNo: "",
+          deliveryTime: null,
+        },
+        {
+          customerName: "和林牧场",
+          contractNo: "444",
+          productName: "显示大屏",
+          status: "已发货",
+          orderQuantity: 10,
+          shippedQuantity: 3,
+          deliveryNo: "5555555",
+          deliveryTime: "2025-02",
+        },
+        {
+          customerName: "赛宇牧场",
+          contractNo: "5555",
+          productName: "车载控制器",
+          status: "已发货",
+          orderQuantity: 2,
+          shippedQuantity: 1,
+          deliveryNo: "6666666",
+          deliveryTime: "2025-02",
+        },
+        {
+          customerName: "赛宇牧场",
+          contractNo: "111111111",
+          productName: "智能喷淋",
+          status: "未发货",
+          orderQuantity: 10,
+          shippedQuantity: 0,
+          deliveryNo: "",
+          deliveryTime: null,
+        },
+        {
+          customerName: "和林牧场",
+          contractNo: "2222222",
+          productName: "精准铜喷",
+          status: "部分发货",
+          orderQuantity: 2,
+          shippedQuantity: 0,
+          deliveryNo: "",
+          deliveryTime: null,
+        },
+        {
+          customerName: "赛宇牧场",
+          contractNo: "333333",
+          productName: "体况评分",
+          status: "部分发货",
+          orderQuantity: 5,
+          shippedQuantity: 0,
+          deliveryNo: "",
+          deliveryTime: null,
+        },
+        {
+          customerName: "和林牧场",
+          contractNo: "444",
+          productName: "显示大屏",
+          status: "已发货",
+          orderQuantity: 10,
+          shippedQuantity: 3,
+          deliveryNo: "5555555",
+          deliveryTime: "2025-02",
+        },
+        {
+          customerName: "赛宇牧场",
+          contractNo: "5555",
+          productName: "车载控制器",
+          status: "已发货",
+          orderQuantity: 2,
+          shippedQuantity: 1,
+          deliveryNo: "6666666",
+          deliveryTime: "2025-02",
+        },
       ],
     };
   },
@@ -267,6 +370,8 @@ export default {
   box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
   transition: all 0.3s ease;
   margin-top: 24px;
+  min-height: 200px;
+  height: auto;
 
   .header-container {
     margin-bottom: 15px;
@@ -351,6 +456,12 @@ export default {
 :deep(.el-table) {
   font-size: 12px;
 
+  .el-table__header-wrapper {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+  }
+
   .el-table__header th {
     padding: 8px 0;
     background-color: #f5f7fa;
@@ -366,4 +477,20 @@ export default {
     background-color: #f5f7fa !important;
   }
 }
+
+:deep(.el-table__body-wrapper) {
+  overflow-y: auto;
+  &::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+  &::-webkit-scrollbar-thumb {
+    border-radius: 3px;
+    background: #c0c4cc;
+  }
+  &::-webkit-scrollbar-track {
+    border-radius: 3px;
+    background: #f5f7fa;
+  }
+}
 </style>

src/views/productManagement/productionSummary/components/OrderProductionTable.vue

@@ -14,20 +14,23 @@
     <div class="table-container">
       <el-table
         v-loading="loading"
-        :data="displayData"
+        :data="localTableData"
         style="width: 100%"
         border
         size="small"
+        :height="localTableData.length > 10 ? 450 : null"
+        :header-cell-style="{ background: '#f5f7fa' }"
         @sort-change="handleSortChange"
       >
+        <el-table-column type="index" label="序号" width="50" align="center" />
         <el-table-column
-          prop="orderNo"
+          prop="orderCode"
           label="订单编号"
           width="110"
           align="center"
         />
         <el-table-column
-          prop="productName"
+          prop="goodsName"
           label="货品名称"
           min-width="110"
           align="center"
@@ -40,7 +43,7 @@
           align="center"
         />
         <el-table-column
-          prop="status"
+          prop="orderStatus"
           label="单据状态"
           width="100"
           align="center"
@@ -48,23 +51,35 @@
         >
           <template slot-scope="scope">
             <el-tag
-              :type="getStatusType(scope.row.status)"
+              :type="getStatusType(scope.row.orderStatus)"
               size="mini"
               effect="plain"
             >
-              {{ scope.row.status }}
+              {{ scope.row.orderStatus }}
             </el-tag>
           </template>
         </el-table-column>
         <el-table-column
-          prop="progress"
+          prop="schedule"
           label="进度"
           width="250"
           align="center"
           sortable="custom"
         >
           <template slot-scope="scope">
-            <div class="progress-wrapper">
+            <div
+              class="progress-wrapper"
+              @mouseenter="
+                showTooltip(
+                  $event,
+                  (
+                    (scope.row.installedQuantity / scope.row.totalQuantity) *
+                    100
+                  ).toFixed(2)
+                )
+              "
+              @mouseleave="hideTooltip"
+            >
               <div class="progress-container">
                 <div class="progress-bar">
                   <div class="custom-progress">
@@ -73,16 +88,25 @@
                       :style="{
                         width:
                           Math.round(
-                            (scope.row.progress / scope.row.total) * 100
+                            (scope.row.installedQuantity /
+                              scope.row.totalQuantity) *
+                              100
                           ) + '%',
-                        backgroundColor: getProgressColor(scope.row.status),
+                        backgroundColor: getProgressColor(
+                          scope.row.orderStatus
+                        ),
                       }"
                     >
-                      <span class="progress-text">
-                        {{ scope.row.progress }}
+                      <span
+                        class="progress-text"
+                        v-if="scope.row.installedQuantity > 0"
+                      >
+                        {{ scope.row.installedQuantity }}
                       </span>
                     </div>
-                    <span class="total-text"> {{ scope.row.total }} </span>
+                    <span class="total-text">
+                      {{ scope.row.totalQuantity }}
+                    </span>
                   </div>
                 </div>
               </div>
@@ -90,31 +114,31 @@
           </template>
         </el-table-column>
         <el-table-column
-          prop="total"
+          prop="totalQuantity"
           label="计划量"
           width="75"
           align="center"
         />
         <el-table-column
-          prop="finished"
-          label="已完成量"
+          prop="installedQuantity"
+          label="已安装数量"
           width="85"
           align="center"
         />
         <el-table-column
-          prop="unfinished"
-          label="未完成量"
+          prop="uninstalledQuantity"
+          label="未安装数量"
           width="85"
           align="center"
         />
         <el-table-column
-          prop="yesterdayFinished"
+          prop="yesterdayQuantity"
           label="昨日完成量"
           width="95"
           align="center"
         />
         <el-table-column
-          prop="todayFinished"
+          prop="todayQuantity"
           label="今日完成量"
           width="95"
           align="center"
@@ -128,7 +152,10 @@
         >
           <template slot-scope="scope">
             {{
-              ((scope.row.finished / scope.row.total) * 100).toFixed(1) + "%"
+              (
+                (scope.row.installedQuantity / scope.row.totalQuantity) *
+                100
+              ).toFixed(2) + "%"
             }}
           </template>
         </el-table-column>
@@ -146,65 +173,38 @@
         >
           <template slot-scope="scope">
             <span
-              :style="{ color: scope.row.remainingDays < 0 ? '#F56C6C' : '' }"
+              :style="{
+                color: scope.row.remainingTime < 0 ? '#F56C6C' : '',
+                'font-size': scope.row.remainingTime < 0 ? 'larger' : null,
+              }"
             >
               {{
-                scope.row.remainingDays > 0
-                  ? scope.row.remainingDays + "天"
-                  : "超期" + Math.abs(scope.row.remainingDays) + "天"
+                scope.row.remainingTime > 0
+                  ? scope.row.remainingTime + "天"
+                  : "超期" + (Math.abs(scope.row.remainingTime) || "") + "天"
               }}
             </span>
           </template>
         </el-table-column>
       </el-table>
-      <div class="expand-button" v-if="tableData.length > 5">
-        <el-button
-          type="text"
-          @click="isExpanded = !isExpanded"
-          class="expand-btn"
-        >
-          <div class="button-content">
-            <i :class="['el-icon-arrow-' + (isExpanded ? 'up' : 'down')]"></i>
-            <span class="expand-text">{{
-              isExpanded ? "收起" : "展开更多"
-            }}</span>
-          </div>
-        </el-button>
-      </div>
     </div>
   </el-card>
 </template>
 
 <script>
+import { GetDataByName, GetDataByNames } from "@/api/common";
+
 export default {
   name: "OrderProductionTable",
   data() {
     return {
       loading: false,
-      isExpanded: true,
       localTableData: [],
       sortConfig: {
         prop: "",
         order: "",
       },
-      orderDefaultData: [
-        {
-          orderNo: "DD20240001",
-          productName: "包装材料A型",
-          process: "包装",
-          status: "进行中",
-          progress: 900,
-          total: 4000,
-          finished: 900,
-          unfinished: 3100,
-          yesterdayFinished: 100,
-          todayFinished: 50,
-          rate: "22.5%",
-          producer: "张三",
-          remainingDays: 7,
-        },
-        // ... 其他订单数据
-      ],
+      tooltip: null,
     };
   },
   props: {
@@ -215,10 +215,7 @@ export default {
   },
   computed: {
     tableData() {
-      let data =
-        this.localTableData.length > 0
-          ? this.localTableData
-          : this.orderDefaultData;
+      let data = this.localTableData.length;
 
       if (this.sortConfig.prop && this.sortConfig.order) {
         const { prop, order } = this.sortConfig;
@@ -243,9 +240,6 @@ export default {
 
       return data;
     },
-    displayData() {
-      return this.isExpanded ? this.tableData : this.tableData.slice(0, 5);
-    },
   },
   created() {
     this.initData();
@@ -253,11 +247,15 @@ export default {
   methods: {
     getStatusType(status) {
       switch (status) {
-        case "进行中":
+        case "已完成":
+          return "success";
+        case "接单驳回":
+          return "warning";
+        case "生产中":
           return "primary";
         case "已超期":
           return "danger";
-        case "未开始":
+        case "待接单":
           return "info";
         default:
           return "info";
@@ -265,11 +263,15 @@ export default {
     },
     getProgressColor(status) {
       switch (status) {
-        case "进行中":
+        case "已完成":
+          return "#67C23A";
+        case "接单驳回":
+          return "#E6A23C";
+        case "生产中":
           return "#409EFF";
         case "已超期":
           return "#F56C6C";
-        case "未开始":
+        case "待接单":
           return "#909399";
         default:
           return "#909399";
@@ -285,13 +287,24 @@ export default {
     async fetchTableData() {
       try {
         this.loading = true;
-        // TODO: 后端接口完成后替换此处
         await new Promise((resolve) => setTimeout(resolve, 1000));
-        this.localTableData = this.orderDefaultData;
+
+        const send_data = {
+          name: "getProductionSummaryByOrder",
+          parammaps: {},
+        };
+        GetDataByName(send_data)
+          .then((response) => {
+            this.localTableData = response.data.list || [];
+          })
+          .catch((error) => {
+            console.error("获取数据失败:", error);
+          });
+
         this.$emit("data-loaded");
       } catch (error) {
-        console.error("获取生产列表失败:", error);
-        this.$message.error("获取生产列表失败");
+        console.error("获取列表失败:", error);
+        this.$message.error("获取列表失败");
       } finally {
         this.loading = false;
       }
@@ -299,6 +312,38 @@ export default {
     handleSortChange({ prop, order }) {
       this.sortConfig = { prop, order };
     },
+    showTooltip(event, percentage) {
+      this.tooltip = document.createElement("div");
+      this.tooltip.className = "progress-tooltip";
+      this.tooltip.textContent = percentage + "%";
+
+      document.body.appendChild(this.tooltip);
+
+      const rect = event.target.getBoundingClientRect();
+      const tooltipRect = this.tooltip.getBoundingClientRect();
+
+      this.tooltip.style.left =
+        rect.left + rect.width / 2 - tooltipRect.width / 2 + "px";
+      this.tooltip.style.top = rect.top - tooltipRect.height - 8 + "px";
+
+      setTimeout(() => {
+        this.tooltip.classList.add("show");
+      }, 0);
+    },
+    hideTooltip() {
+      if (this.tooltip) {
+        this.tooltip.classList.remove("show");
+        setTimeout(() => {
+          if (this.tooltip && this.tooltip.parentNode) {
+            this.tooltip.parentNode.removeChild(this.tooltip);
+          }
+          this.tooltip = null;
+        }, 200);
+      }
+    },
+  },
+  beforeDestroy() {
+    this.hideTooltip();
   },
 };
 </script>
@@ -308,6 +353,8 @@ export default {
   border-radius: 8px;
   box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
   transition: all 0.3s ease;
+  min-height: 200px;
+  height: auto;
 
   .header-container {
     margin-bottom: 15px;
@@ -356,54 +403,6 @@ export default {
   padding-bottom: 0;
 }
 
-.expand-button {
-  text-align: center;
-  border-top: 1px solid #ebeef5;
-  margin-top: -1px;
-
-  .el-button {
-    font-size: 13px;
-    color: #909399;
-    padding: 8px;
-
-    .button-content {
-      display: inline-flex;
-      align-items: center;
-      position: relative;
-
-      i {
-        font-size: 12px;
-        color: #c0c4cc;
-        transition: all 0.3s;
-      }
-
-      .expand-text {
-        max-width: 0;
-        overflow: hidden;
-        white-space: nowrap;
-        transition: all 0.3s ease-in-out;
-        opacity: 0;
-      }
-    }
-
-    &:hover {
-      color: #409eff;
-
-      .button-content {
-        i {
-          color: #409eff;
-          margin-right: 4px;
-        }
-
-        .expand-text {
-          max-width: 100px;
-          opacity: 1;
-        }
-      }
-    }
-  }
-}
-
 .progress-wrapper {
   padding: 6px 0;
 
@@ -429,7 +428,6 @@ export default {
           transition: all 0.3s ease;
           border-radius: 100px;
           position: relative;
-          min-width: 30px;
 
           .progress-text {
             position: absolute;
@@ -462,6 +460,12 @@ export default {
 :deep(.el-table) {
   font-size: 12px;
 
+  .el-table__header-wrapper {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+  }
+
   .el-table__header th {
     padding: 8px 0;
     background-color: #f5f7fa;
@@ -477,6 +481,50 @@ export default {
 }
 
 :deep(.el-table__body-wrapper) {
-  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  overflow-y: auto;
+  &::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+  &::-webkit-scrollbar-thumb {
+    border-radius: 3px;
+    background: #c0c4cc;
+  }
+  &::-webkit-scrollbar-track {
+    border-radius: 3px;
+    background: #f5f7fa;
+  }
+}
+</style>
+
+<style lang="scss">
+.progress-tooltip {
+  position: fixed;
+  background: rgba(0, 0, 0, 0.8);
+  color: #fff;
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  pointer-events: none;
+  z-index: 9999;
+  opacity: 0;
+  transform: translateY(5px);
+  transition: all 0.2s ease;
+
+  &::after {
+    content: "";
+    position: absolute;
+    bottom: -4px;
+    left: 50%;
+    transform: translateX(-50%);
+    border-left: 4px solid transparent;
+    border-right: 4px solid transparent;
+    border-top: 4px solid rgba(0, 0, 0, 0.8);
+  }
+
+  &.show {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 </style>

src/views/productManagement/productionSummary/components/ProductProductionTable.vue

@@ -14,21 +14,24 @@
     <div class="table-container">
       <el-table
         v-loading="loading"
-        :data="displayData"
+        :data="localTableData"
         style="width: 100%"
         border
         size="small"
+        :height="localTableData.length > 10 ? 450 : null"
+        :header-cell-style="{ background: '#f5f7fa' }"
         @sort-change="handleSortChange"
       >
+        <el-table-column type="index" label="序号" width="50" align="center" />
         <el-table-column
-          prop="productName"
+          prop="goodsName"
           label="货品名称"
-          min-width="110"
+          width="150"
           align="center"
           sortable="custom"
         />
         <el-table-column
-          prop="status"
+          prop="orderStatus"
           label="货品状态"
           width="100"
           align="center"
@@ -36,23 +39,34 @@
         >
           <template slot-scope="scope">
             <el-tag
-              :type="getStatusType(scope.row.status)"
+              :type="getStatusType(scope.row.orderStatus)"
               size="mini"
               effect="plain"
             >
-              {{ scope.row.status }}
+              {{ scope.row.orderStatus }}
             </el-tag>
           </template>
         </el-table-column>
         <el-table-column
           prop="progress"
           label="进度"
-          width="250"
           align="center"
           sortable="custom"
         >
           <template slot-scope="scope">
-            <div class="progress-wrapper">
+            <div
+              class="progress-wrapper"
+              @mouseenter="
+                showTooltip(
+                  $event,
+                  (
+                    (scope.row.installedQuantity / scope.row.totalQuantity) *
+                    100
+                  ).toFixed(2)
+                )
+              "
+              @mouseleave="hideTooltip"
+            >
               <div class="progress-container">
                 <div class="progress-bar">
                   <div class="custom-progress">
@@ -61,19 +75,25 @@
                       :style="{
                         width:
                           Math.round(
-                            (scope.row.progress / scope.row.total) * 100
+                            (scope.row.installedQuantity /
+                              scope.row.totalQuantity) *
+                              100
                           ) + '%',
-                        backgroundColor: getProgressColor(scope.row.status),
+                        backgroundColor: getProgressColor(
+                          scope.row.orderStatus
+                        ),
                       }"
                     >
-                      <span class="progress-text">
-                        {{
-                          Math.round(
-                            (scope.row.progress / scope.row.total) * 100
-                          )
-                        }}%
+                      <span
+                        class="progress-text"
+                        v-if="scope.row.installedQuantity > 0"
+                      >
+                        {{ scope.row.installedQuantity }}
                       </span>
                     </div>
+                    <span class="total-text">
+                      {{ scope.row.totalQuantity }}
+                    </span>
                   </div>
                 </div>
               </div>
@@ -81,33 +101,33 @@
           </template>
         </el-table-column>
         <el-table-column
-          prop="total"
+          prop="totalQuantity"
           label="计划量"
-          width="75"
+          width="100"
           align="center"
         />
         <el-table-column
-          prop="finished"
+          prop="installedQuantity"
           label="已完成量"
-          width="85"
+          width="100"
           align="center"
         />
         <el-table-column
-          prop="unfinished"
+          prop="uninstalledQuantity"
           label="未完成量"
-          width="85"
+          width="100"
           align="center"
         />
         <el-table-column
-          prop="yesterdayFinished"
+          prop="yesterdayQuantity"
           label="昨日完成量"
-          width="95"
+          width="100"
           align="center"
         />
         <el-table-column
-          prop="todayFinished"
+          prop="todayQuantity"
           label="今日完成量"
-          width="95"
+          width="100"
           align="center"
         />
         <el-table-column
@@ -119,109 +139,33 @@
         >
           <template slot-scope="scope">
             {{
-              ((scope.row.finished / scope.row.total) * 100).toFixed(1) + "%"
+              (
+                (scope.row.installedQuantity / scope.row.totalQuantity) *
+                100
+              ).toFixed(1) + "%"
             }}
           </template>
         </el-table-column>
       </el-table>
-      <div class="expand-button" v-if="tableData.length > 5">
-        <el-button
-          type="text"
-          @click="isExpanded = !isExpanded"
-          class="expand-btn"
-        >
-          <div class="button-content">
-            <i :class="['el-icon-arrow-' + (isExpanded ? 'up' : 'down')]"></i>
-            <span class="expand-text">{{
-              isExpanded ? "收起" : "展开更多"
-            }}</span>
-          </div>
-        </el-button>
-      </div>
     </div>
   </el-card>
 </template>
 
 <script>
+import { GetDataByName, GetDataByNames } from "@/api/common";
+
 export default {
   name: "ProductProductionTable",
   data() {
     return {
       loading: false,
-      isExpanded: true,
       localTableData: [],
       sortConfig: {
         prop: "",
         order: "",
       },
-      productDefaultData: [
-        {
-          productName: "智能游环",
-          status: "进行中",
-          progress: 900,
-          total: 4000,
-          finished: 900,
-          unfinished: 3100,
-          yesterdayFinished: 3100,
-          todayFinished: 3100,
-          rate: "22.5%",
-        },
-        {
-          productName: "智能喷淋",
-          status: "进行中",
-          progress: 170,
-          total: 350,
-          finished: 170,
-          unfinished: 180,
-          yesterdayFinished: 180,
-          todayFinished: 180,
-          rate: "48.5%",
-        },
-        {
-          productName: "精准铜喷",
-          status: "进行中",
-          progress: 180,
-          total: 200,
-          finished: 180,
-          unfinished: 20,
-          yesterdayFinished: 20,
-          todayFinished: 20,
-          rate: "90%",
-        },
-        {
-          productName: "休闲评分",
-          status: "已超期",
-          progress: 70,
-          total: 150,
-          finished: 70,
-          unfinished: 80,
-          yesterdayFinished: 80,
-          todayFinished: 80,
-          rate: "46.6%",
-        },
-        {
-          productName: "显示大屏",
-          status: "进行中",
-          progress: 1,
-          total: 30,
-          finished: 1,
-          unfinished: 29,
-          yesterdayFinished: 29,
-          todayFinished: 29,
-          rate: "3%",
-        },
-        {
-          productName: "车载控制器",
-          status: "未开始",
-          progress: 0,
-          total: 50,
-          finished: 0,
-          unfinished: 50,
-          yesterdayFinished: 50,
-          todayFinished: 50,
-          rate: "0%",
-        },
-      ],
+
+      tooltip: null,
     };
   },
   props: {
@@ -232,10 +176,7 @@ export default {
   },
   computed: {
     tableData() {
-      let data =
-        this.localTableData.length > 0
-          ? this.localTableData
-          : this.productDefaultData;
+      let data = this.localTableData.length;
 
       if (this.sortConfig.prop && this.sortConfig.order) {
         const { prop, order } = this.sortConfig;
@@ -260,9 +201,6 @@ export default {
 
       return data;
     },
-    displayData() {
-      return this.isExpanded ? this.tableData : this.tableData.slice(0, 5);
-    },
   },
   created() {
     this.initData();
@@ -270,7 +208,13 @@ export default {
   methods: {
     getStatusType(status) {
       switch (status) {
-        case "进行中":
+        case "已完成":
+          return "success";
+        case "接单驳回":
+          return "warning";
+        case "接单驳回":
+          return "#E6A23C";
+        case "生产中":
           return "primary";
         case "已超期":
           return "danger";
@@ -282,7 +226,9 @@ export default {
     },
     getProgressColor(status) {
       switch (status) {
-        case "进行中":
+        case "已完成":
+          return "#67C23A";
+        case "生产中":
           return "#409EFF";
         case "已超期":
           return "#F56C6C";
@@ -302,9 +248,18 @@ export default {
     async fetchTableData() {
       try {
         this.loading = true;
-        // TODO: 后端接口完成后替换此处
         await new Promise((resolve) => setTimeout(resolve, 1000));
-        this.localTableData = this.productDefaultData;
+        const send_data = {
+          name: "getProductionSummaryByGoods",
+          parammaps: {},
+        };
+        GetDataByName(send_data)
+          .then((response) => {
+            this.localTableData = response.data.list || [];
+          })
+          .catch((error) => {
+            console.error("获取数据失败:", error);
+          });
         this.$emit("data-loaded");
       } catch (error) {
         console.error("获取生产列表失败:", error);
@@ -316,6 +271,43 @@ export default {
     handleSortChange({ prop, order }) {
       this.sortConfig = { prop, order };
     },
+    showTooltip(event, percentage) {
+      // 创建tooltip元素
+      this.tooltip = document.createElement("div");
+      this.tooltip.className = "progress-tooltip";
+      this.tooltip.textContent = percentage + "%";
+
+      // 将tooltip添加到body
+      document.body.appendChild(this.tooltip);
+
+      // 计算位置
+      const rect = event.target.getBoundingClientRect();
+      const tooltipRect = this.tooltip.getBoundingClientRect();
+
+      this.tooltip.style.left =
+        rect.left + rect.width / 2 - tooltipRect.width / 2 + "px";
+      this.tooltip.style.top = rect.top - tooltipRect.height - 8 + "px";
+
+      // 添加显示动画class
+      setTimeout(() => {
+        this.tooltip.classList.add("show");
+      }, 0);
+    },
+    hideTooltip() {
+      if (this.tooltip) {
+        this.tooltip.classList.remove("show");
+        setTimeout(() => {
+          if (this.tooltip && this.tooltip.parentNode) {
+            this.tooltip.parentNode.removeChild(this.tooltip);
+          }
+          this.tooltip = null;
+        }, 200);
+      }
+    },
+  },
+  beforeDestroy() {
+    // 组件销毁时确保tooltip被移除
+    this.hideTooltip();
   },
 };
 </script>
@@ -325,6 +317,8 @@ export default {
   border-radius: 8px;
   box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
   transition: all 0.3s ease;
+  min-height: 200px;
+  height: auto;
 
   .header-container {
     margin-bottom: 15px;
@@ -378,93 +372,59 @@ export default {
   padding-bottom: 0;
 }
 
-.expand-button {
-  text-align: center;
-  border-top: 1px solid #ebeef5;
-  margin-top: -1px;
-
-  .el-button {
-    font-size: 13px;
-    color: #909399;
-    padding: 8px;
-
-    .button-content {
-      display: inline-flex;
-      align-items: center;
-      position: relative;
-
-      i {
-        font-size: 12px;
-        color: #c0c4cc;
-        transition: all 0.3s;
-      }
-
-      .expand-text {
-        max-width: 0;
-        overflow: hidden;
-        white-space: nowrap;
-        transition: all 0.3s ease-in-out;
-        opacity: 0;
-      }
-    }
-
-    &:hover {
-      color: #409eff;
-
-      .button-content {
-        i {
-          color: #409eff;
-          margin-right: 4px;
-        }
-
-        .expand-text {
-          max-width: 100px;
-          opacity: 1;
-        }
-      }
-    }
-  }
-}
-
 .progress-wrapper {
   padding: 6px 0;
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+}
 
-  .progress-container {
-    display: flex;
-    align-items: center;
-    justify-content: center;
+.progress-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .progress-bar {
+    width: 100%;
+    padding: 0 20px;
 
-    .progress-bar {
+    .custom-progress {
       width: 100%;
-      padding: 0 20px;
+      height: 12px;
+      background-color: #ebeef5;
+      border-radius: 100px;
+      overflow: hidden;
+      position: relative;
 
-      .custom-progress {
-        width: 100%;
-        height: 12px;
-        background-color: #ebeef5;
+      .progress-inner {
+        height: 100%;
+        transition: all 0.3s ease;
         border-radius: 100px;
-        overflow: hidden;
         position: relative;
 
-        .progress-inner {
-          height: 100%;
-          transition: all 0.3s ease;
-          border-radius: 100px;
-          position: relative;
-          min-width: 30px;
-
-          .progress-text {
-            position: absolute;
-            right: 6px;
-            top: 50%;
-            transform: translateY(-50%);
-            color: #fff;
-            font-size: 10px;
-            line-height: 1;
-            text-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
-          }
+        .progress-text {
+          position: absolute;
+          right: 6px;
+          top: 50%;
+          transform: translateY(-50%);
+          color: #fff;
+          font-size: 10px;
+          line-height: 1;
+          text-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
+          white-space: nowrap;
         }
       }
+
+      .total-text {
+        position: absolute;
+        right: 6px;
+        top: 50%;
+        transform: translateY(-50%);
+        color: #606266;
+        font-size: 10px;
+        line-height: 1;
+        white-space: nowrap;
+      }
     }
   }
 }
@@ -472,6 +432,12 @@ export default {
 :deep(.el-table) {
   font-size: 12px;
 
+  .el-table__header-wrapper {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+  }
+
   .el-table__header th {
     padding: 8px 0;
     background-color: #f5f7fa;
@@ -487,6 +453,50 @@ export default {
 }
 
 :deep(.el-table__body-wrapper) {
-  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  overflow-y: auto;
+  &::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+  &::-webkit-scrollbar-thumb {
+    border-radius: 3px;
+    background: #c0c4cc;
+  }
+  &::-webkit-scrollbar-track {
+    border-radius: 3px;
+    background: #f5f7fa;
+  }
+}
+</style>
+
+<style lang="scss">
+.progress-tooltip {
+  position: fixed;
+  background: rgba(0, 0, 0, 0.8);
+  color: #fff;
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  pointer-events: none;
+  z-index: 9999;
+  opacity: 0;
+  transform: translateY(5px);
+  transition: all 0.2s ease;
+
+  &::after {
+    content: "";
+    position: absolute;
+    bottom: -4px;
+    left: 50%;
+    transform: translateX(-50%);
+    border-left: 4px solid transparent;
+    border-right: 4px solid transparent;
+    border-top: 4px solid rgba(0, 0, 0, 0.8);
+  }
+
+  &.show {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 </style>