From 04ff12df2130f043a1549110b7140d2c40213945 Mon Sep 17 00:00:00 2001
From: zch <zangch@mesnac.com>
Date: Mon, 3 Mar 2025 21:09:38 +0800
Subject: [PATCH] =?UTF-8?q?refactor(mes):=20=E9=87=8D=E6=9E=84=E7=94=9F?=
 =?UTF-8?q?=E4=BA=A7=E8=AE=A1=E5=88=92=E7=9B=91=E6=8E=A7=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 修改接口名称和返回类型：queryMoritorPageList -> queryMoritorList，返回类型从 TableDataInfo 改为 List
- 新增 PlanMonitorVo 和 ShiftGroupVo 类用于监控数据展示
- 优化前端监控页面，按机台和班次分组展示计划信息
- 重构后端查询逻辑，按时间区间参数查询监控数据
- 更新数据库查询语句，使用 WITH 子句进行预处理
---
 src/api/mes/planInfo/index.ts          |   4 +-
 src/api/mes/planInfo/types.ts          |  36 +++
 src/views/mes/planInfo/monitorPlan.vue | 370 +++++++++++++------------
 3 files changed, 227 insertions(+), 183 deletions(-)

diff --git a/src/api/mes/planInfo/index.ts b/src/api/mes/planInfo/index.ts
index d93acbf..bc70cac 100644
--- a/src/api/mes/planInfo/index.ts
+++ b/src/api/mes/planInfo/index.ts
@@ -127,9 +127,9 @@ export const issuePlanInfo = (workshopId: string | number, planId: string | numb
  * @returns {*}
  */
 
-export const queryMoritorPageList = (query?: PlanInfoQuery): AxiosPromise<PlanInfoVO[]> => {
+export const queryMoritorList = (query?: PlanInfoQuery): AxiosPromise<PlanInfoVO[]> => {
   return request({
-    url: '/mes/planInfo/queryMoritorPageList',
+    url: '/mes/planInfo/queryMoritorList',
     method: 'get',
     params: query
   });
diff --git a/src/api/mes/planInfo/types.ts b/src/api/mes/planInfo/types.ts
index fb14e68..20ccaf0 100644
--- a/src/api/mes/planInfo/types.ts
+++ b/src/api/mes/planInfo/types.ts
@@ -537,5 +537,41 @@ export interface PlanInfoQuery extends PageQuery {
   materialName?: string;
 }
 
+// 计划监控班次分组视图对象
+export interface ShiftGroupVO {
+  /**
+   * 班次ID
+   */
+  shiftId: string | number;
+
+  /**
+   * 班次名称
+   */
+  shiftName: string;
+
+  /**
+   * 该班次下的物料计划列表
+   */
+  plans: PlanInfoVO[];
+}
+
+// 生产计划监控视图对象
+export interface PlanMonitorVO {
+  /**
+   * 机台ID
+   */
+  machineId: string | number;
+
+  /**
+   * 机台名称
+   */
+  machineName: string;
+
+  /**
+   * 班次分组列表
+   */
+  shifts: ShiftGroupVO[];
+}
+
 
 
diff --git a/src/views/mes/planInfo/monitorPlan.vue b/src/views/mes/planInfo/monitorPlan.vue
index c0e63b3..afeefaa 100644
--- a/src/views/mes/planInfo/monitorPlan.vue
+++ b/src/views/mes/planInfo/monitorPlan.vue
@@ -6,7 +6,7 @@
         <el-card shadow='hover'>
           <el-form ref='queryFormRef' :model='queryParams' :inline='true'>
             <el-form-item label='机台名称' prop='releaseId'>
-              <el-select v-model='queryParams.releaseId' placeholder='请选择机台名称'>
+              <el-select v-model='queryParams.releaseId' placeholder='请选择机台名称' clearable>
                 <el-option
                   v-for='item in releaseList'
                   :key='item.machineId'
@@ -30,10 +30,12 @@
 
             <el-form-item label="班次" prop="shiftId">
               <el-select v-model="queryParams.shiftId" placeholder="请选择班次" clearable>
-                <el-option  v-for="item in shiftList"
-                            :key="item.shiftId"
-                            :label="item.shiftName"
-                            :value="item.shiftId" />
+                <el-option
+                  v-for="item in shiftList"
+                  :key="item.shiftId"
+                  :label="item.shiftName"
+                  :value="item.shiftId"
+                />
               </el-select>
             </el-form-item>
 
@@ -46,45 +48,57 @@
       </div>
     </transition>
 
-    <el-card shadow='never'>
-      <el-table v-loading='loading' :data='uniqueMachines' border>
+    <el-card shadow='hover' v-loading="loading">
+      <el-table :data="planInfoList" style="width: 100%" border>
         <!-- 机台列 -->
-        <el-table-column label='机台' align='center' prop='machineName' fixed="left" width="120" />
+        <el-table-column prop="machineName" label="机台" align="center" width="120" />
 
-        <!-- 动态生成班次列 -->
+        <!-- 动态班次列 -->
         <template v-for="shift in uniqueShifts" :key="shift.shiftId">
-          <el-table-column :label="shift.shiftName" align='center' min-width="460">
-            <el-table-column label='物料' align='center' min-width="220">
-              <template #default="scope">
-                <div v-for="(item, index) in getItemsByMachineAndShift(scope.row.machineId, shift.shiftId)" :key="index" class="cell-content material-cell">
-                  <el-tooltip :content="item.materialName" placement="top" :hide-after="1500">
-                    <span class="material-text">{{ item.materialName }}</span>
-                  </el-tooltip>
+          <el-table-column :label="shift.shiftName" align="center">
+            <!-- 物料列 -->
+            <el-table-column label="物料" align="left" min-width="300">
+              <template #default="{ row }">
+                <div class="cell-content">
+                  <div v-for="plan in getPlansForShift(row, shift.shiftId)" :key="plan.planId" class="cell-item material-item">
+                    <el-tooltip 
+                      :content="plan.materialName" 
+                      placement="top" 
+                      :show-after="500">
+                      <span class="material-name">{{ plan.materialName }}</span>
+                    </el-tooltip>
+                  </div>
                 </div>
               </template>
             </el-table-column>
-            <el-table-column label='计划数' align='center' width="80">
-              <template #default="scope">
-                <div v-for="(item, index) in getItemsByMachineAndShift(scope.row.machineId, shift.shiftId)" :key="index" class="cell-content plan-cell">
-                  {{ item.planAmount }}
+            <!-- 计划数列 -->
+            <el-table-column label="计划数" align="center" width="100">
+              <template #default="{ row }">
+                <div class="cell-content">
+                  <div v-for="plan in getPlansForShift(row, shift.shiftId)" :key="plan.planId" class="cell-item">
+                    {{ plan.planAmount }}
+                  </div>
                 </div>
               </template>
             </el-table-column>
-            <el-table-column label='实际数' align='center' width="80">
-              <template #default="scope">
-                <div v-for="(item, index) in getItemsByMachineAndShift(scope.row.machineId, shift.shiftId)" :key="index" class="cell-content actual-cell">
-                  {{ item.completeAmount || 0 }}
+            <!-- 完成数列 -->
+            <el-table-column label="完成数" align="center" width="100">
+              <template #default="{ row }">
+                <div class="cell-content">
+                  <div v-for="plan in getPlansForShift(row, shift.shiftId)" :key="plan.planId" class="cell-item">
+                    {{ plan.completeAmount || 0 }}
+                  </div>
                 </div>
               </template>
             </el-table-column>
-            <el-table-column label='计划监控' align='center' width="120">
-              <template #default="scope">
-                <div v-for="(item, index) in getItemsByMachineAndShift(scope.row.machineId, shift.shiftId)" :key="index" class="cell-content progress-cell">
-                  <div class="progress-bar">
-                    <div class="progress-bar-inner"
-                         :style="{ width: getItemCompletionPercentage(item) + '%', backgroundColor: getProgressBarColor(item) }">
-                      {{ getItemCompletionPercentage(item) }}%
-                    </div>
+            <!-- 计划监控列 -->
+            <el-table-column label="计划监控" align="center" width="120">
+              <template #default="{ row }">
+                <div class="cell-content">
+                  <div v-for="plan in getPlansForShift(row, shift.shiftId)" :key="plan.planId" class="cell-item monitor-item">
+                    <span class="completion-rate" :style="{ backgroundColor: getCompletionBgColor(plan), color: getCompletionTextColor(plan) }">
+                      {{ getCompletionPercentage(plan) }}%
+                    </span>
                   </div>
                 </div>
               </template>
@@ -107,7 +121,7 @@ import {
   delPlanInfo,
   addPlanInfo,
   updatePlanInfo,
-  orderAddProductPlanList, issuePlanInfo, queryMoritorPageList
+  orderAddProductPlanList, issuePlanInfo, queryMoritorPageList, queryMoritorList
 } from '@/api/mes/planInfo';
 import { PlanInfoVO, PlanInfoQuery, PlanInfoForm } from '@/api/mes/planInfo/types';
 import { getBaseShiftInfoList } from '@/api/mes/baseShiftInfo';
@@ -118,6 +132,8 @@ import { getProcessInfoList } from '@/api/mes/baseProcessInfo';
 import { getStationInfoList } from '@/api/mes/baseStationInfo';
 import { getProdBaseMachineInfoList } from '@/api/mes/prodBaseMachineInfo';
 import { ProdBaseMachineInfoVO } from '@/api/mes/prodBaseMachineInfo/types';
+import type { PlanMonitorVO, ShiftGroupVO } from '@/api/mes/planInfo/types';
+import { ElMessage } from 'element-plus';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const {
@@ -219,8 +235,8 @@ const initFormData: PlanInfoForm = {
 const data = reactive<PageData<PlanInfoForm, PlanInfoQuery>>({
   form: { ...initFormData },
   queryParams: {
-    pageNum: 1,
-    pageSize: 10,
+    pageNum: undefined,
+    pageSize: undefined,
     planId: undefined,
     productOrderId: undefined,
     saleOrderId: undefined,
@@ -275,7 +291,7 @@ const getWorkshopId = async () => {
 /** 查询生产计划信息列表 */
 const getList = async () => {
   loading.value = true;
-  const res = await queryMoritorPageList(queryParams.value);
+  const res = await queryMoritorList(queryParams.value);
   planInfoList.value = res.rows;
   total.value = res.total;
   loading.value = false;
@@ -285,9 +301,6 @@ const getList = async () => {
 const cancel = () => {
   reset();
   dialog.visible = false;
-  sfpBatchDialog.visible = false;
-  formingBatchDialog.visible = false;
-  vulBatchDialog.visible = false;
 };
 
 /** 表单重置 */
@@ -298,18 +311,42 @@ const reset = () => {
 };
 
 /** 搜索按钮操作 */
-const handleQuery = () => {
-  queryParams.value.pageNum = 1;
-  getList();
+const handleQuery = async () => {
+  try {
+    loading.value = true;
+    // 校验时间区间
+    if (!dateRange.value || dateRange.value.length !== 2) {
+      ElMessage.warning('请选择时间区间');
+      return;
+    }
+
+    // 设置查询参数
+    queryParams.value.params = {
+      monitorBeginTime: dateRange.value[0],
+      monitorEndTime: dateRange.value[1]
+    };
+
+    const res = await queryMoritorList(queryParams.value);
+    if (res.code === 200) {
+      planInfoList.value = res.data;
+      console.log('查询结果:', planInfoList.value);
+    } else {
+      ElMessage.error(res.msg);
+    }
+  } catch (error) {
+    console.error('查询失败:', error);
+    ElMessage.error('查询失败');
+  } finally {
+    loading.value = false;
+  }
 };
 
 /** 重置按钮操作 */
 const resetQuery = () => {
   dateRange.value = [];
-  data.queryParams.params.monitorBeginTime = undefined;
-  data.queryParams.params.monitorEndTime = undefined;
+  queryParams.value.params.monitorBeginTime = undefined;
+  queryParams.value.params.monitorEndTime = undefined;
   queryFormRef.value?.resetFields();
-  handleQuery();
 };
 
 
@@ -359,7 +396,8 @@ onMounted(() => {
   // getClassTeamSelect();
   // getProcessSelect();
   getReleaseSelect();
-  getList();
+  // getList();
+  handleQuery();
 });
 
 /*在模板中，使用 v-for 指令来动态生成班次列。对于每个班次，再生成多个子列（如物料、计划数、实际数、计划监控）。
@@ -385,87 +423,50 @@ const uniqueMachines = computed(() => {
 
 // 修改计算属性：提取所有唯一的班次，不要依赖于选择的查询条件
 const uniqueShifts = computed(() => {
-  const shifts = [];
-  const shiftIds = new Set();//存储班次id,避免重复
-
-  // 检查是否有未分班的数据
-  const hasUnassignedShift = planInfoList.value.some(item => !item.shiftId);
-  if (hasUnassignedShift) {
-    shifts.push({
-      shiftId: 'default',
-      shiftName: '未分班'
+  const shiftsMap = new Map();
+
+  planInfoList.value.forEach((machine: any) => {
+    machine.shifts.forEach((shift: any) => {
+      if (!shiftsMap.has(shift.shiftId)) {
+        shiftsMap.set(shift.shiftId, {
+          shiftId: shift.shiftId,
+          shiftName: shift.shiftName
+        });
+      }
     });
-    shiftIds.add('default');
-  }
-
-  // 添加有班次的数据
-  planInfoList.value.forEach(item => {
-    if (item.shiftId && !shiftIds.has(item.shiftId)) {
-      shiftIds.add(item.shiftId);
-      shifts.push({
-        shiftId: item.shiftId,
-        shiftName: item.shiftName || `班次${item.shiftId}`//如果未命名，默认显示班次id
-      });
-    }
   });
 
-  return shifts;
+  // 转换为数组并按shiftId排序
+  return Array.from(shiftsMap.values()).sort((a, b) => a.shiftId - b.shiftId);
 });
 
-// 计算属性：按机台和班次分组的计划信息
-const groupedPlanInfo = computed(() => {//groupedPlanInfo：创建一个嵌套的对象结构，外层是机台，内层是班次，存储每个机台在每个班次下的生产计划信息。
-  const grouped = {};
-
-  planInfoList.value.forEach(item => {
-    const machineId = item.releaseId;
-    const shiftId = item.shiftId || 'default'; // 使用'default'作为null的shiftId的替代值
-
-    if (!machineId) return;//跳过没有机台的记录
-
-    if (!grouped[machineId]) {
-      grouped[machineId] = {};//初始化班次对象
-    }
-
-    if (!grouped[machineId][shiftId]) {
-      grouped[machineId][shiftId] = [];//初始化计划数组
-    }
-
-    grouped[machineId][shiftId].push(item);//将当前记录添加到对应的班次数组中
-  });
-
-  return grouped;
-});
+// 获取指定机台和班次的计划列表
+const getPlansForShift = (machine: PlanMonitorVO, shiftId: number) => {
+  const shift = machine.shifts.find((s: any) => s.shiftId === shiftId);
+  return shift?.plans || [];
+};
 
-/*在模板中
-* v-for="(item, index) in getItemsByMachineAndShift(scope.row.machineId, shift.shiftId)"：遍历当前机台在当前班次下的生产计划信息，生成具体的行内容
-* */
-// 根据机台ID和班次ID获取相应的物料项
-const getItemsByMachineAndShift = (machineId, shiftId) => {
-  if (shiftId === 'default') {
-    // 只返回未分班的数据
-    return planInfoList.value.filter(item =>
-      item.releaseId === machineId && !item.shiftId
-    );
-  }
-  // 返回指定班次的数据
-  return planInfoList.value.filter(item =>
-    item.releaseId === machineId && item.shiftId === shiftId
-  );
+// 获取完成率背景颜色
+const getCompletionBgColor = (plan: any) => {
+  const percentage = getCompletionPercentage(plan);
+  if (percentage >= 100) return '#f0f9eb';
+  if (percentage >= 60) return '#fdf6ec';
+  return '#fef0f0';
 };
 
-// 计算单个项目的完成百分比
-const getItemCompletionPercentage = (item) => {
-  if (!item.planAmount) return 0;
-  const percentage = (item.completeAmount || 0) / item.planAmount * 100;
-  return Math.round(percentage * 100) / 100;
+// 获取完成率文字颜色
+const getCompletionTextColor = (plan: any) => {
+  const percentage = getCompletionPercentage(plan);
+  if (percentage >= 100) return '#67C23A';
+  if (percentage >= 60) return '#E6A23C';
+  return '#F56C6C';
 };
 
-// 根据完成百分比获取进度条颜色
-const getProgressBarColor = (item) => {
-  const percentage = getItemCompletionPercentage(item);
-  if (percentage >= 100) return '#67C23A'; // 进度100%则绿色
-  if (percentage >= 60) return '#E6A23C'; // 进度60%黄色
-  return '#F56C6C'; // 红色
+// 计算完成百分比
+const getCompletionPercentage = (plan: any) => {
+  if (!plan.planAmount) return 0;
+  const percentage = (plan.completeAmount || 0) / plan.planAmount * 100;
+  return Math.round(percentage * 100) / 100;
 };
 
 //搜索计划时间区间
@@ -503,20 +504,20 @@ const handleDateRangeChange = (val) => {
 
 /* 材料项样式 */
 .material-item {
-  /* 底部外边距8px */
-  margin-bottom: 8px;
-  /* 内边距4px */
-  padding: 4px;
-  /* 底部边框1px，颜色#eee */
-  border-bottom: 1px solid #eee;
+  padding: 0 12px;
+  height: 36px;
+  line-height: 36px;
+  display: flex;
+  align-items: center;
+  overflow: hidden;
 }
 
-/* 最后一个材料项样式 */
-.material-item:last-child {
-  /* 底部外边距0 */
-  margin-bottom: 0;
-  /* 去除底部边框 */
-  border-bottom: none;
+.material-name {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 100%;
 }
 
 /* 进度条样式 */
@@ -567,12 +568,6 @@ const handleDateRangeChange = (val) => {
   border-bottom: none;
 }
 
-.material-name {
-  font-weight: bold;
-  margin-bottom: 4px;
-  text-align: left;
-}
-
 .material-count {
   text-align: left;
   margin-bottom: 2px;
@@ -594,70 +589,83 @@ const handleDateRangeChange = (val) => {
 
 /* 每个单元格内容的通用样式 */
 .cell-content {
-  height: 40px;
-  line-height: 40px;
-  margin-bottom: 8px;
-  padding: 0 5px;
-  border-bottom: 1px solid #eee;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  display: flex;
+  flex-direction: column;
+}
+
+.cell-item {
+  height: 36px;
+  line-height: 36px;
+  padding: 0 12px;
+  border-bottom: 1px solid #EBEEF5;
   display: flex;
   align-items: center;
 }
 
-.cell-content:last-child {
-  margin-bottom: 0;
+.cell-item:last-child {
   border-bottom: none;
 }
 
-/* 物料单元格特定样式 */
-.material-cell {
-  justify-content: left;
-  padding-left: 10px;
-  font-weight: 500;
+/* 计划监控列的特殊样式 */
+.monitor-item {
+  justify-content: center; /* 水平居中 */
 }
 
-.material-text {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  width: 100%;
+.completion-rate {
+  display: inline-block;
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  line-height: 1.5;
+  min-width: 45px;
+  text-align: center;
 }
 
-/* 计划数单元格特定样式 */
-.plan-cell {
-  justify-content: center;
+.completion-zero {
+  background-color: #fef0f0;
+  color: #f56c6c;
 }
 
-/* 实际数单元格特定样式 */
-.actual-cell {
-  justify-content: center;
+.completion-partial {
+  background-color: #fef0f0;
+  color: #f56c6c;
 }
 
-/* 进度条单元格特定样式 */
-.progress-cell {
-  justify-content: center;
-  padding: 0 5px;
+.completion-full {
+  background-color: #f0f9eb;
+  color: #67c23a;
 }
 
-/* 进度条样式 */
-.progress-bar {
-  width: 100%;
-  height: 24px;
-  background-color: #f0f0f0;
-  border-radius: 4px;
-  overflow: hidden;
+:deep(.el-table) {
+  font-size: 14px;
+  table-layout: fixed; /* 使用固定表格布局 */
 }
 
-.progress-bar-inner {
-  height: 100%;
-  background-color: #67C23A;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: white;
-  min-width: 30px;
-  transition: width 0.3s ease;
+:deep(.el-table th) {
+  background-color: #f5f7fa;
+}
+
+:deep(.el-table td) {
+  padding: 0;
+}
+
+:deep(.el-table .cell) {
+  padding: 0;
+  white-space: normal; /* 允许文本换行 */
+}
+
+/* 确保物料列文字左对齐 */
+:deep(.el-table .cell-content .material-item) {
+  justify-content: flex-start;
+}
+
+/* 调整其他列的宽度 */
+:deep(.el-table .el-table__cell) {
+  padding: 0;
+}
+
+/* 确保tooltip正常显示 */
+:deep(.el-tooltip__trigger) {
+  width: 100%;
 }
 </style>