生产总览-生产概况

src/views/productManagement/productionSummary/index.vue

@@ -76,32 +76,91 @@
     <!-- 生产概况表格 -->
     <el-card class="box-card" style="margin-top: 20px;">
       <div slot="header" class="clearfix">
-        <span>生产概况</span>
-        <el-tag type="primary" style="float: right;">当前数量：7条</el-tag>
+        <div style="display: flex; justify-content: space-between; align-items: center;">
+          <div>
+            <span style="font-size: 14px;">生产概况</span>
+            <span style="margin-left: 10px; font-size: 14px; color: #666;">{{ updateTime }}</span>
+          </div>
+          <el-tag type="primary" style="cursor: pointer" @click="handleUnassignedOrders">未接单：7条</el-tag>
+        </div>
       </div>
-      <el-table :data="tableData" style="width: 100%">
-        <el-table-column prop="orderNo" label="订单编号" width="120"/>
-        <el-table-column prop="productName" label="商品名称" width="120"/>
-        <el-table-column prop="status" label="生产状态" width="100">
+      <el-table :data="tableData" style="width: 100%" border>
+        <el-table-column prop="orderNo" label="订单编号" width="120" align="center"/>
+        <el-table-column prop="productName" label="货品名称" min-width="120" align="center"/>
+        <el-table-column prop="status" label="单据状态" width="100" align="center">
           <template slot-scope="scope">
-            <el-tag :type="scope.row.status === '已完成' ? 'success' : 'warning'">
+            <el-tag :type="getStatusType(scope.row.status)" size="medium" effect="plain">
               {{ scope.row.status }}
             </el-tag>
           </template>
         </el-table-column>
-        <el-table-column prop="progress" label="进度">
+        <el-table-column prop="progress" label="进度" width="350" align="center">
+          <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="12"
+                    :show-text="false"
+                    :color="getProgressColor(scope.row.status)"/>
+                </div>
+                <div class="progress-info">
+                  <span 
+                    class="finished-number"
+                    @click="handleProgressClick(scope.row)"
+                    style="cursor: pointer; color: #409EFF; margin-right: 4px;">
+                    {{ scope.row.progress }}
+                  </span>
+                  <span style="color: #909399;">/</span>
+                  <span class="total-number" style="color: #606266; margin-left: 4px;">{{ scope.row.total }}</span>
+                </div>
+              </div>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="total" label="计划量" width="100" align="center"/>
+        <el-table-column prop="finished" label="已完成量" width="100" align="center"/>
+        <el-table-column prop="unfinished" label="未完成量" width="100" align="center"/>
+        <el-table-column prop="rate" label="完成率" width="100" align="center">
+          <template slot-scope="scope">
+            {{ (scope.row.finished / scope.row.total * 100).toFixed(1) + '%' }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="remainingDays" label="距离完成时间还剩" width="150" align="center">
           <template slot-scope="scope">
-            <el-progress :percentage="scope.row.progress" :color="scope.row.progressColor"/>
+            <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-column prop="total" label="计划量" width="100"/>
-        <el-table-column prop="finished" label="已完成量" width="100"/>
-        <el-table-column prop="unfinished" label="未完成量" width="100"/>
-        <el-table-column prop="rate" label="完成率" width="100"/>
-        <el-table-column prop="remainingDays" label="剩余完成时间" width="120"/>
       </el-table>
     </el-card>
 
+    <!-- 未接单弹窗 -->
+    <el-dialog
+      title="未接单列表"
+      :visible.sync="dialogVisible"
+      width="65%"
+      custom-class="unassigned-dialog"
+      :before-close="handleClose">
+      <el-table :data="unassignedOrders" style="width: 100%" border>
+        <el-table-column prop="orderNo" label="订单编号" width="120" align="center"/>
+        <el-table-column prop="productName" label="商品名称" min-width="120" align="center"/>
+        <el-table-column prop="customerName" label="客户名称" min-width="120" align="center"/>
+        <el-table-column prop="orderTime" label="下单时间" width="160" align="center"/>
+        <el-table-column prop="quantity" label="数量" width="100" align="center"/>
+        <el-table-column prop="status" label="状态" width="100" align="center">
+          <template slot-scope="scope">
+            <el-tag type="info" size="medium" effect="plain">未接单</el-tag>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" size="medium" @click="dialogVisible = false">关 闭</el-button>
+      </div>
+    </el-dialog>
+
     <!-- 月度生产概况图表 -->
     <el-card class="box-card" style="margin-top: 20px;">
       <div slot="header" class="clearfix">
@@ -127,20 +186,118 @@ export default {
   data() {
     return {
       currentTime: '',
+      updateTime: '', // 后端返回的更新时间
       tableData: [
         {
-          orderNo: '00000001',
-          productName: '包装材料',
+          orderNo: 'DD20240001',
+          productName: '包装材料A型',
           status: '进行中',
-          progress: 22.5,
-          progressColor: '#409EFF',
+          progress: 900,
           total: 4000,
           finished: 900,
           unfinished: 3100,
           rate: '22.5%',
-          remainingDays: '7天'
+          remainingDays: 7
+        },
+        {
+          orderNo: 'DD20240002',
+          productName: '塑料外壳B型',
+          status: '已超期',
+          progress: 1500,
+          total: 2000,
+          finished: 1500,
+          unfinished: 500,
+          rate: '75%',
+          remainingDays: -3
+        },
+        {
+          orderNo: 'DD20240003',
+          productName: '金属零件C型',
+          status: '未开始',
+          progress: 0,
+          total: 3000,
+          finished: 0,
+          unfinished: 3000,
+          rate: '0%',
+          remainingDays: 15
+        },
+        {
+          orderNo: 'DD20240004',
+          productName: '电子元件D型',
+          status: '进行中',
+          progress: 2000,
+          total: 5000,
+          finished: 2000,
+          unfinished: 3000,
+          rate: '40%',
+          remainingDays: 10
+        },
+        {
+          orderNo: 'DD20240005',
+          productName: '橡胶配件E型',
+          status: '已超期',
+          progress: 800,
+          total: 1000,
+          finished: 800,
+          unfinished: 200,
+          rate: '80%',
+          remainingDays: -5
+        },
+        {
+          orderNo: 'DD20240006',
+          productName: '五金配件F型',
+          status: '进行中',
+          progress: 1200,
+          total: 3000,
+          finished: 1200,
+          unfinished: 1800,
+          rate: '40%',
+          remainingDays: 8
         },
-        // 其他数据项...
+        {
+          orderNo: 'DD20240007',
+          productName: '包装材料G型',
+          status: '未开始',
+          progress: 0,
+          total: 2500,
+          finished: 0,
+          unfinished: 2500,
+          rate: '0%',
+          remainingDays: 12
+        },
+        {
+          orderNo: 'DD20240008',
+          productName: '电路板H型',
+          status: '进行中',
+          progress: 300,
+          total: 1000,
+          finished: 300,
+          unfinished: 700,
+          rate: '30%',
+          remainingDays: 5
+        },
+        {
+          orderNo: 'DD20240009',
+          productName: '机械零件I型',
+          status: '已超期',
+          progress: 600,
+          total: 800,
+          finished: 600,
+          unfinished: 200,
+          rate: '75%',
+          remainingDays: -2
+        },
+        {
+          orderNo: 'DD20240010',
+          productName: '塑料外壳J型',
+          status: '进行中',
+          progress: 1500,
+          total: 3000,
+          finished: 1500,
+          unfinished: 1500,
+          rate: '50%',
+          remainingDays: 6
+        }
       ],
       chartData: {
         labels: ['包装材料', '包装材料', '板材类', '橡胶类型', '塑料类型', '特定订单', '无规格类型'],
@@ -156,19 +313,188 @@ export default {
             backgroundColor: '#67C23A'
           }
         ]
-      }
+      },
+      dialogVisible: false,
+      unassignedOrders: [
+        {
+          orderNo: 'DD20240001',
+          productName: '包装材料A型',
+          customerName: '上海某某科技有限公司',
+          orderTime: '2024-01-30 10:00:00',
+          quantity: 1000,
+          status: '未接单'
+        },
+        {
+          orderNo: 'DD20240002',
+          productName: '塑料外壳B型',
+          customerName: '北京某某电子有限公司',
+          orderTime: '2024-01-30 11:30:00',
+          quantity: 2000,
+          status: '未接单'
+        },
+        {
+          orderNo: 'DD20240003',
+          productName: '金属零件C型',
+          customerName: '深圳某某制造有限公司',
+          orderTime: '2024-01-30 14:20:00',
+          quantity: 500,
+          status: '未接单'
+        },
+        {
+          orderNo: 'DD20240004',
+          productName: '电子元件D型',
+          customerName: '广州某某科技有限公司',
+          orderTime: '2024-01-30 15:45:00',
+          quantity: 3000,
+          status: '未接单'
+        },
+        {
+          orderNo: 'DD20240005',
+          productName: '橡胶配件E型',
+          customerName: '杭州某某工业有限公司',
+          orderTime: '2024-01-30 16:30:00',
+          quantity: 1500,
+          status: '未接单'
+        },
+        {
+          orderNo: 'DD20240006',
+          productName: '五金配件F型',
+          customerName: '苏州某某机械有限公司',
+          orderTime: '2024-01-30 17:15:00',
+          quantity: 2500,
+          status: '未接单'
+        },
+        {
+          orderNo: 'DD20240007',
+          productName: '包装材料G型',
+          customerName: '武汉某某包装有限公司',
+          orderTime: '2024-01-30 18:00:00',
+          quantity: 1800,
+          status: '未接单'
+        }
+      ]
     }
   },
   created() {
-    this.updateTime()
-    setInterval(this.updateTime, 1000)
+    // 初始化并启动生产总览时间更新
+    this.updateCurrentTime()
+    setInterval(this.updateCurrentTime, 1000)
+
+    // 初始化并启动生产概况更新时间获取
+    this.getUpdateTime()
+    setInterval(this.getUpdateTime, 60000)
+
+    // 获取表格数据
+    this.getTableData()
   },
   methods: {
-    updateTime() {
+    // 更新生产总览的当前时间
+    updateCurrentTime() {
       const now = new Date()
-      this.currentTime = now.getFullYear() + '年' + 
-        (now.getMonth() + 1) + '月' + 
-        now.getDate() + '日'
+      const year = now.getFullYear()
+      const month = (now.getMonth() + 1).toString().padStart(2, '0')
+      const day = now.getDate().toString().padStart(2, '0')
+      const hours = now.getHours().toString().padStart(2, '0')
+      const minutes = now.getMinutes().toString().padStart(2, '0')
+      const seconds = now.getSeconds().toString().padStart(2, '0')
+      this.currentTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
+    },
+
+    // 从后端获取生产概况更新时间
+    async getUpdateTime() {
+      try {
+        // TODO: 替换为实际的后端API
+        // const res = await getProductionUpdateTime()
+        // this.updateTime = res.data.updateTime
+        
+        // 临时使用本地时间模拟
+        const now = new Date()
+        const month = (now.getMonth() + 1).toString().padStart(2, '0')
+        const day = now.getDate().toString().padStart(2, '0')
+        const hours = now.getHours().toString().padStart(2, '0')
+        const minutes = now.getMinutes().toString().padStart(2, '0')
+        this.updateTime = `${month}/${day} ${hours}:${minutes}更新`
+      } catch (error) {
+        console.error('获取更新时间失败:', error)
+      }
+    },
+    // 处理未接单点击事件
+    handleUnassignedOrders() {
+      // 实际开发时调用获取数据的方法
+      this.getUnassignedOrders()
+      this.dialogVisible = true
+    },
+    // 处理弹窗关闭前的回调
+    handleClose(done) {
+      done()
+    },
+    // 获取未接单数据
+    async getUnassignedOrders() {
+      try {
+        // TODO: 实际开发时替换为后端API
+        // const res = await this.$http.get('/api/orders/unassigned')
+        // this.unassignedOrders = res.data.list
+        
+        // 目前使用示例数据，实际开发时删除这部分
+        console.log('获取未接单数据')
+      } catch (error) {
+        console.error('获取未接单数据失败:', error)
+        this.$message.error('获取未接单数据失败')
+      }
+    },
+    getStatusType(status) {
+      // 根据状态返回相应的标签类型
+      switch (status) {
+        case '进行中':
+          return 'primary'
+        case '已超期':
+          return 'danger'
+        case '未开始':
+          return 'info'
+        default:
+          return 'info'
+      }
+    },
+    getProgressColor(status) {
+      // 根据状态返回相应的进度条颜色
+      switch (status) {
+        case '进行中':
+          return '#409EFF'  // 蓝色
+        case '已超期':
+          return '#F56C6C'  // 红色
+        case '未开始':
+          return '#909399'  // 灰色
+        default:
+          return '#909399'
+      }
+    },
+    handleProgressClick(row) {
+      // 处理进度条点击事件
+      console.log('进度条被点击:', row)
+    },
+    formatRemainingDays(days) {
+      // 格式化剩余天数
+      if (days < 0) {
+        return '已逾期'
+      } else if (days === 0) {
+        return '今日完成'
+      } else {
+        return `${days}天`
+      }
+    },
+    // 获取表格数据
+    async getTableData() {
+      try {
+        // TODO: 实际开发时替换为后端API
+        // const res = await this.$http.get('/api/production/summary/list')
+        // this.tableData = res.data.list
+        
+        // 目前使用示例数据，实际开发时删除这部分
+        console.log('获取生产概况表格数据')
+      } catch (error) {
+        console.error('获取表格数据失败:', error)
+        this.$message.error('获取表格数据失败')
+      }
     }
   }
 }
@@ -309,4 +635,101 @@ export default {
     border-bottom: 1px solid #ebeef5;
   }
 }
+
+// 弹窗样式
+:deep(.unassigned-dialog) {
+  .el-dialog__header {
+    padding: 20px 24px;
+    border-bottom: 1px solid #ebeef5;
+    margin-right: 0;
+    position: relative;
+    
+    .el-dialog__title {
+      font-size: 16px;
+      font-weight: 600;
+      color: #1f2d3d;
+    }
+    
+    .el-dialog__headerbtn {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      right: 24px;
+      width: 24px;
+      height: 24px;
+      padding: 0;
+      background: transparent;
+      border: none;
+      outline: none;
+      cursor: pointer;
+      z-index: 10;
+      
+      .el-dialog__close {
+        font-size: 18px;
+        color: #909399;
+        
+        &:hover {
+          color: #409EFF;
+        }
+      }
+    }
+  }
+  
+  .el-dialog__body {
+    padding: 24px;
+  }
+  
+  .el-dialog__footer {
+    padding: 16px 24px;
+    border-top: 1px solid #ebeef5;
+    text-align: center;
+    
+    .el-button {
+      padding: 10px 36px;
+      font-size: 14px;
+    }
+  }
+  
+  .el-table {
+    margin: 0;
+    
+    th {
+      background-color: #f5f7fa;
+      color: #1f2d3d;
+      font-weight: 600;
+      padding: 12px 0;
+    }
+    
+    td {
+      padding: 12px 0;
+    }
+  }
+}
+
+.progress-wrapper {
+  padding: 10px 0;
+  
+  .progress-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+    
+    .progress-bar {
+      width: 100%;
+      padding: 0 20px;
+    }
+    
+    .progress-info {
+      font-size: 13px;
+      font-weight: 500;
+      
+      .finished-number {
+        &:hover {
+          opacity: 0.8;
+        }
+      }
+    }
+  }
+}
 </style>