456 lines
24 KiB
Markdown
456 lines
24 KiB
Markdown
# 机加设备生产运营看板 — 实施文档
|
||
|
||
> 日期：2026-05-19
|
||
> 涉及页面：看板一 `index.vue`（路由 `/`）、看板二 `machiningOperationTwo.vue`（路由 `/machiningOperationTwo`）
|
||
|
||
---
|
||
|
||
## 一、技术方案
|
||
|
||
### 1.1 技术栈
|
||
|
||
| 层面 | 技术 |
|
||
|------|------|
|
||
| 前端框架 | Vue 3.5（Composition API + `<script setup>`） |
|
||
| 路由 | Vue Router 4（Hash 模式） |
|
||
| 状态管理 | Pinia 2 + reactive / ref |
|
||
| 大屏组件 | `@kjgl77/datav-vue3`（dv-scroll-board 滚动表格） |
|
||
| 图表 | ECharts 6（环形图、柱状图） |
|
||
| UI 组件 | Element Plus + TDesign Vue Next |
|
||
| 数据通信 | Axios → `CreateData` + `ExecDatabase`（调用后端存储过程） |
|
||
| 构建工具 | Vite 5 |
|
||
|
||
### 1.2 架构分层
|
||
|
||
```
|
||
┌──────────────────────────────────────────────┐
|
||
│ 浏览器大屏展示 │
|
||
│ index.vue (看板一) │ machiningOperation- │
|
||
│ │ Two.vue (看板二) │
|
||
├──────────────────────────────────────────────┤
|
||
│ curdVue3.js (CreateData / ExecDatabase) │
|
||
│ → axios → /submit/MESCommonBase.ashx │
|
||
├──────────────────────────────────────────────┤
|
||
│ 后端存储过程 (SQL Server) │
|
||
│ 看板一 × 6 个存储过程 │
|
||
│ 看板二 × 3 个存储过程 │
|
||
│ 新增：运行报工设备数据读取 × 1 │
|
||
└──────────────────────────────────────────────┘
|
||
```
|
||
|
||
### 1.3 数据流向
|
||
|
||
```
|
||
存储过程 → ExecDatabase( CreateData('11', 过程名, []) )
|
||
→ response.data / response.data.result
|
||
→ applyXxxData(rows) 映射字段
|
||
→ reactive / ref → computed → 模板渲染
|
||
```
|
||
|
||
---
|
||
|
||
## 二、技术路线
|
||
|
||
```
|
||
Phase 1 数据连通 ──→ Phase 2 布局调整 ──→ Phase 3 新增模块
|
||
───────────────────────────────────────────────────────────────
|
||
确认存储过程 调整面板尺寸/位置 运行报工设备数据
|
||
字段映射正确 交换不良品/合格率位置 读取存储过程
|
||
API 返回验证 6 列状态卡片对齐 新增看板面板
|
||
% 号显示修复 字段映射 + 渲染
|
||
```
|
||
|
||
---
|
||
|
||
## 三、模块清单
|
||
|
||
### 看板一（index.vue）— 路由 `/`
|
||
|
||
| 序号 | 模块 | 功能 | 状态 |
|
||
|------|------|------|------|
|
||
| 1 | 设备运行状态 | 6 卡片：设备总数 / 运行 / 待机 / 报警 / 关机 | ✅ 已完成 |
|
||
| 2 | 计划执行率 | 环形图百分比 | ✅ |
|
||
| 3 | 未及时开工 | 数字指标 | ✅ |
|
||
| 4 | 不良品汇总 | 数字指标 | ✅ |
|
||
| 5 | 已完工作务 / 合格率 | 已完工数 + 合格率 | ✅ |
|
||
| 6 | 设备运行状态明细 | dv-scroll-board 滚动表格 | ✅ |
|
||
| 7 | 未及时开工明细 | dv-scroll-board 表格 | ✅ |
|
||
| 8 | 不良品明细 | dv-scroll-board 表格 | ✅ |
|
||
| 9 | 未及时开工指派汇总 | 按指派对象分组计数卡片 | ✅ 新增 |
|
||
|
||
### 看板二（machiningOperationTwo.vue）— 路由 `/machiningOperationTwo`
|
||
|
||
| 序号 | 模块 | 功能 | 状态 |
|
||
|------|------|------|------|
|
||
| 1 | 在制任务汇总 | 数字卡片 | ✅ |
|
||
| 2 | 加急任务汇总 | 数字卡片 | ✅ |
|
||
| 3 | 关键工序任务 | 数字卡片 | ❌ 无功能，不介入 |
|
||
| 4 | 缺勤人员 | 名单卡片 | ❌ 无功能，不介入 |
|
||
| 5 | 在制任务明细 | dv-scroll-board 表格 + 进度条 | ✅ |
|
||
| 6 | 加急任务列表 | dv-scroll-board 表格 | ✅ |
|
||
| 7 | 关键工序任务明细 | dv-scroll-board 表格 | ❌ 无功能 |
|
||
| 8 | 正在开工任务 | dv-scroll-board 表格 | ✅ |
|
||
| 9 | 运行报工设备数据 | 新增面板 | 🔨 今日新增 |
|
||
|
||
---
|
||
|
||
## 四、涉及的表和存储过程
|
||
|
||
### 看板一（6 个存储过程）
|
||
|
||
| 存储过程名 | 用途 | 回调函数 |
|
||
|-----------|------|----------|
|
||
| `机加设备生产运营看板_设备运行状态查询` | 设备总数 / 运行 / 待机 / 报警 / 关机 | `applyDashboardData` |
|
||
| `机加设备生产运营看板_计划执行率` | 计划执行率百分比 | `applyPlanExecuteData` |
|
||
| `机加设备生产运营看板_未及时开工查询` | 未及时开工明细列表 | `applyNotStartData` |
|
||
| `质量任务看板_当天已完成汇总` | 已完工总数 + 合格率 | `applyTodayDoneSummaryData` |
|
||
| `机加设备生产运营看板_当天已完成明细` | 已完工明细列表 | `applyTodayDoneDetailData` |
|
||
| `机加设备生产运营看板_不良品查询` | 不良品明细列表 | `applyunqualifiedData` |
|
||
|
||
### 看板二（3 个存储过程 + 1 新增）
|
||
|
||
| 存储过程名 | 用途 | 回调函数 |
|
||
|-----------|------|----------|
|
||
| `机加设备生产运营看板_机加在制查询` | 正在开工任务 | `applyInProcessData` |
|
||
| `机加设备生产运营看板_机加在制查询2` | 在制任务总数 + 明细 | `applyInProcessData2` |
|
||
| `机加设备生产运营看板_加急任务查询` | 加急任务汇总 + 列表 | `applyUrgentData` |
|
||
| `机加设备生产运营看板_运行报工设备` | **新增** 运行报工设备数据 | `applyReportEquipData` |
|
||
|
||
---
|
||
|
||
## 五、功能流程图
|
||
|
||
### 5.1 看板一 数据加载流程
|
||
|
||
```
|
||
onMounted()
|
||
│
|
||
├─ refreshClock() ← 时钟每秒更新
|
||
├─ setScale() ← 1920×1080 自适应缩放
|
||
└─ searchDashboardData()
|
||
│
|
||
├─ searchDeviceStatusData() → 存储过程_设备运行状态查询
|
||
│ └─ applyDashboardData() → summary.equipmentTotal / running / standby / alarm / shutdown
|
||
│
|
||
├─ searchNotStartedData() → 存储过程_未及时开工查询
|
||
│ └─ applyNotStartData() → summary.lateStart + lateStartRows
|
||
│ └─ computed: lateStartGroupedByAssignee（指派分组计数）
|
||
│
|
||
├─ searchTodayDoneSummaryData() → 存储过程_当天已完成汇总
|
||
│ └─ applyTodayDoneSummaryData() → summary.finishedTask / passRate
|
||
│
|
||
├─ searchTodayDoneDetailData() → 存储过程_当天已完成明细
|
||
│ └─ applyTodayDoneDetailData() → completedRows
|
||
│
|
||
├─ searchunqualifiedData() → 存储过程_不良品查询
|
||
│ └─ applyunqualifiedData() → summary.defectTotal + defectRows
|
||
│
|
||
└─ searchPlanExecuteData() → 存储过程_计划执行率
|
||
└─ applyPlanExecuteData() → summary.planRate
|
||
└─ renderPlanRateChart() → 环形图
|
||
```
|
||
|
||
### 5.2 看板二 数据加载流程（当前 + 新增）
|
||
|
||
```
|
||
onMounted()
|
||
│
|
||
├─ refreshClock()
|
||
├─ setScale()
|
||
└─ searchDashboardData()
|
||
│
|
||
├─ searchUrgentData() → 存储过程_加急任务查询
|
||
│ └─ applyUrgentData() → summaryCards[1].value + urgentRows
|
||
│
|
||
├─ searchInProcessData() → 存储过程_机加在制查询
|
||
│ └─ applyInProcessData() → startedRows（正在开工任务）
|
||
│
|
||
├─ searchInProcessData2() → 存储过程_机加在制查询2
|
||
│ └─ applyInProcessData2() → summaryCards[0].value + inProcessRows（在制明细）
|
||
│
|
||
└─ searchReportEquipData() ← 🆕 存储过程_运行报工设备
|
||
└─ applyReportEquipData() → reportEquipRows（新增面板数据）
|
||
```
|
||
|
||
### 5.3 未及时开工指派汇总（看板一新增模块）
|
||
|
||
```
|
||
lateStartRows (API 返回)
|
||
│
|
||
└─ computed: lateStartGroupedByAssignee
|
||
│
|
||
├─ forEach row → groupMap[row.assignee].totalQty += 1
|
||
└─ return Object.values(groupMap)
|
||
│
|
||
└─ 模板 v-for 渲染 assignee-card
|
||
┌──────────────┐
|
||
│ 指派对象 │
|
||
│ 记录条数 │
|
||
└──────────────┘
|
||
```
|
||
|
||
---
|
||
|
||
## 六、字段映射对照表
|
||
|
||
### 6.1 看板一 字段映射
|
||
|
||
#### applyDashboardData（设备运行状态查询）
|
||
|
||
| 存储过程字段 | 前端变量 | 说明 |
|
||
|-------------|---------|------|
|
||
| 总数 | `summary.equipmentTotal` | 设备总数（当前写死 18） |
|
||
| 运行数量 | `summary.running` | 运行中设备数 |
|
||
| 待机数量 | `summary.standby` | 待机设备数 |
|
||
| 报警数量 | `summary.alarm` | 报警设备数 |
|
||
| 关机数量 | `summary.shutdown` | 关机设备数 |
|
||
|
||
#### applyNotStartData（未及时开工查询）
|
||
|
||
| 存储过程字段 | 前端变量 | 说明 |
|
||
|-------------|---------|------|
|
||
| 总记录数 | `summary.lateStart` | 未及时开工总数 |
|
||
| 订单号 | `row.productionOrder` | — |
|
||
| 合同号 | `row.salesOrder` | — |
|
||
| 零件名称 | `row.materialName` | — |
|
||
| 零件编码 | `row.materialCode` | — |
|
||
| 工序名称 | `row.processName` | — |
|
||
| 分配数 | `row.assignQty` | 默认 0 |
|
||
| 上序合格数 | `row.prevPassQty` | 默认 0 |
|
||
| 加急数量 | `row.urgentQty` | 默认 0 |
|
||
| 指派对象 | `row.assignee` | 分组汇总 key |
|
||
|
||
#### applyTodayDoneSummaryData（当天已完成汇总）
|
||
|
||
| 存储过程字段 | 前端变量 | 说明 |
|
||
|-------------|---------|------|
|
||
| totalCount | `summary.finishedTask` | 已完工总数 |
|
||
| passCount | 计算分子 | 合格数 |
|
||
| failCount | 计算分母 | 不合格数 |
|
||
| — | `summary.passRate` | `(passCount/(passCount+failCount))*100 → toFixed(2) + '%'` |
|
||
|
||
#### applyTodayDoneDetailData（当天已完成明细）
|
||
|
||
| 存储过程字段 | 前端变量 | 说明 |
|
||
|-------------|---------|------|
|
||
| orderNo | `row.productionOrder` | — |
|
||
| materialName | `row.materialName` | — |
|
||
| materialCode | `row.materialCode` | — |
|
||
| processName | `row.processName` | — |
|
||
| passQty | 计算分子 | — |
|
||
| failQty | 计算分母 | — |
|
||
| — | `row.passRate` | `(passQty/(passQty+failQty))*100 → toFixed(2)` |
|
||
|
||
#### applyunqualifiedData（不良品查询）
|
||
|
||
| 存储过程字段 | 前端变量 | 说明 |
|
||
|-------------|---------|------|
|
||
| 总记录数 | `summary.defectTotal` | 不良品汇总数 |
|
||
| 计划号 | `row.productionOrder` | — |
|
||
| 内部合同号 | `row.salesOrder` | — |
|
||
| 零件名称 | `row.materialName` | — |
|
||
| 零件编码 | `row.materialCode` | — |
|
||
| 工序名称 | `row.processName` | — |
|
||
| 不合格数 | `row.defectQty` | — |
|
||
| 指派对象 | `row.assignee` | 默认 '' |
|
||
|
||
#### applyPlanExecuteData（计划执行率）
|
||
|
||
| 存储过程字段 | 前端变量 | 说明 |
|
||
|-------------|---------|------|
|
||
| 计划执行率_百分数 | `summary.planRate` | 计划执行率 |
|
||
|
||
### 6.2 看板二 字段映射
|
||
|
||
#### applyUrgentData（加急任务查询）
|
||
|
||
| 存储过程字段 | 前端变量 | 说明 |
|
||
|-------------|---------|------|
|
||
| 加急订单总数 | `summaryCards[1].value` | 加急汇总数 |
|
||
| 订单编号 | `row.productionOrder` | — |
|
||
| 合同号 | `row.salesOrder` | — |
|
||
| 物料描述 | `row.materialName` | — |
|
||
| 物料编号 | `row.materialCode` | — |
|
||
| 计划数量 | `row.assignQty` | — |
|
||
| 加急数量 | `row.urgentQty` | — |
|
||
| 工序名称 | `row.processName` | — |
|
||
| 指派对象 | `row.assignee` | — |
|
||
|
||
#### applyInProcessData（机加在制查询 — 正在开工）
|
||
|
||
| 存储过程字段 | 前端变量 | 说明 |
|
||
|-------------|---------|------|
|
||
| 订单号 | `row.productionOrder` | — |
|
||
| 合同号 | `row.salesOrder` | — |
|
||
| 零件名称 | `row.materialName` | — |
|
||
| 零件编码 | `row.materialCode` | — |
|
||
| 分配数 | `row.assignQty` | — |
|
||
| 工序名称 | `row.processName` | — |
|
||
| 指派对象 | `row.assignee` | — |
|
||
|
||
#### applyInProcessData2（机加在制查询2 — 在制明细）
|
||
|
||
| 存储过程字段 | 前端变量 | 说明 |
|
||
|-------------|---------|------|
|
||
| 总数 | `summaryCards[0].value` | 在制汇总数 |
|
||
| 订单号 | `row.productionOrder` | — |
|
||
| 合同号 | `row.salesOrder` | — |
|
||
| 零件名称 | `row.materialName` | — |
|
||
| 零件编码 | `row.materialCode` | — |
|
||
| 分配数 | `row.assignQty` | — |
|
||
| 工序名称 | `row.processName` | — |
|
||
| 指派对象 | `row.assignee` | — |
|
||
| 完成数量 | `row.finishQty` | — |
|
||
| — | `row.progress` | `(完成数量/分配数)*100 → toFixed(2)` |
|
||
|
||
### 6.3 新增：运行报工设备（待确认）
|
||
|
||
| 存储过程字段（待确认） | 前端变量 | 说明 |
|
||
|---------------------|---------|------|
|
||
| 待确认 | `row.xxx` | — |
|
||
|
||
---
|
||
|
||
## 七、今日详细工作步骤
|
||
|
||
### 步骤 1：沟通确认（上午）
|
||
|
||
| 事项 | 内容 |
|
||
|------|------|
|
||
| **看板一数据** | 与后端确认 6 个存储过程的返回字段是否与前端字段映射一致 |
|
||
| **看板二数据** | 确认 3 个存储过程字段，`关键工序任务` 和 `缺勤人员` 本期不实现 |
|
||
| **新增存储过程** | 沟通 `机加设备生产运营看板_运行报工设备` 的返回字段结构 |
|
||
| **样式布局** | 确认两个页面布局调整需求：面板位置交换、宽度调整、6 列状态卡片 |
|
||
|
||
### 步骤 2：看板一 样式/布局修改（下午·编码）
|
||
|
||
| 编号 | 任务 | 涉及文件 | 状态 |
|
||
|------|------|---------|------|
|
||
| 2.1 | 设备运行状态面板 6 列 grid + 面板加宽至 900px | `index.vue` CSS | ✅ 已完成 |
|
||
| 2.2 | 已完工作务与不良品汇总交换位置，宽度调整 | `index.vue` CSS | ✅ 已完成 |
|
||
| 2.3 | 合格率 % 号显示修复（数据拼 % + 去掉 small 标签） | `index.vue` script + template | ✅ 已完成 |
|
||
| 2.4 | 未及时开工指派汇总：按指派对象分组计数卡片面板 | `index.vue` template + script + CSS | ✅ 已完成 |
|
||
|
||
### 步骤 3：看板二 Bug 修复（下午·编码）
|
||
|
||
| 编号 | 任务 | 涉及文件 | 状态 |
|
||
|------|------|---------|------|
|
||
| 3.1 | `extendRows` 空数组死循环修复 | `machiningOperationTwo.vue` | ✅ 已完成 |
|
||
| 3.2 | `makeTaskBoard` columnWidth 9→8 修复 | `machiningOperationTwo.vue` | ✅ 已完成 |
|
||
| 3.3 | 路由 path 修正为 `/machiningOperationTwo` | `router/index.js` | ✅ 已完成 |
|
||
|
||
### 步骤 4：新增运行报工设备模块（下午·编码）
|
||
|
||
| 编号 | 任务 | 涉及文件 | 状态 |
|
||
|------|------|---------|------|
|
||
| 4.1 | 新增 `searchReportEquipData` 调用存储过程 | `machiningOperationTwo.vue` | 🔲 待字段确认 |
|
||
| 4.2 | 编写 `applyReportEquipData` 回调，映射字段 | `machiningOperationTwo.vue` | 🔲 待字段确认 |
|
||
| 4.3 | 模板新增 `report-equip-panel` + `dv-scroll-board` | `machiningOperationTwo.vue` | 🔲 待字段确认 |
|
||
| 4.4 | CSS 定位、尺寸样式 | `machiningOperationTwo.vue` | 🔲 待字段确认 |
|
||
|
||
### 步骤 5：联调验证（下午）
|
||
|
||
| 编号 | 任务 | 状态 |
|
||
|------|------|------|
|
||
| 5.1 | 看板一全部面板数据加载正常 | 🔲 |
|
||
| 5.2 | 看板二全部面板数据加载正常 | 🔲 |
|
||
| 5.3 | 新增运行报工设备面板数据正常 | 🔲 |
|
||
| 5.4 | 1920×1080 缩放无溢出/遮挡 | 🔲 |
|
||
| 5.5 | 两个页面切换正常 | 🔲 |
|
||
|
||
---
|
||
|
||
## 八、看板一 面板布局总览
|
||
|
||
```
|
||
┌──────────────────────────────────────────────────────────────────────────────┐
|
||
│ header (1920×86) 品牌Logo + 机加设备生产运营看板（一） + 时钟 │
|
||
├──────────────────────────────────────────────────────────────────────────────┤
|
||
│ ┌──────────────┐ ┌────┐ ┌──────┐ ┌──────┐ ┌──────────────┐ │
|
||
│ │ 设备运行状态 │ │计划 │ │未及时 │ │不良品 │ │ 已完工作务 │ ← 顶部行 │
|
||
│ │ 900×172 │ │执行率│ │开工 │ │汇总 │ │ / 合格率 │ 172px高 │
|
||
│ │ 6卡片: 总数 │ │210 │ │216 │ │178 │ │ 340 │ │
|
||
│ │ 运行 待机 │ │ │ │ │ │ │ │ │ │
|
||
│ │ 报警 关机 │ │ │ │ │ │ │ │ │ │
|
||
│ └──────────────┘ └────┘ └──────┘ └──────┘ └──────────────┘ │
|
||
├──────────────────────────────────────────────────────────────────────────────┤
|
||
│ ┌──────────────────────┐ ┌──────────────────────────────────────┐ │
|
||
│ │ 设备运行状态明细 │ │ 未及时开工明细 │ ← 中部行 │
|
||
│ │ 756×374 │ │ 1126×374 │ 374px高 │
|
||
│ │ 滚动表格 │ │ 滚动表格 │ │
|
||
│ └──────────────────────┘ └──────────────────────────────────────┘ │
|
||
├──────────────────────────────────────────────────────────────────────────────┤
|
||
│ ┌────────────────────┐ ┌─────────────────────────────────────────┐ │
|
||
│ │ 不良品明细 │ │ 未及时开工指派汇总 │ ← 底部行 │
|
||
│ │ 720×356 │ │ 1160×356 │ 356px高 │
|
||
│ │ 滚动表格 │ │ 按指派对象分组卡片 │ │
|
||
│ └────────────────────┘ └─────────────────────────────────────────┘ │
|
||
└──────────────────────────────────────────────────────────────────────────────┘
|
||
1920×1080
|
||
```
|
||
|
||
---
|
||
|
||
## 九、看板二 面板布局总览
|
||
|
||
```
|
||
┌──────────────────────────────────────────────────────────────────────────────┐
|
||
│ header (1920×76) 品牌Logo + 机加设备生产运营看板（二） + 时钟 │
|
||
├──────────────────────────────────────────────────────────────────────────────┤
|
||
│ ┌───────────────┐ ┌──────────────┐ ┌──────────────┐ ┌─────────────────────┐ │
|
||
│ │在制任务汇总 │ │加急任务汇总 │ │关键工序任务 │ │缺勤人员 │ │
|
||
│ │466×128 │ │424×128 │ │404×128 │ │554×128 │ │
|
||
│ └───────────────┘ └──────────────┘ └──────────────┘ └─────────────────────┘ │
|
||
├─────────────────────────────────────────┬────────────────────────────────────┤
|
||
│ │ ┌────────────────────────────────┐ │
|
||
│ │ │ 加急任务列表 │ │
|
||
│ │ │ 938×270 │ │
|
||
│ 在制任务明细 │ │ 滚动表格 │ │
|
||
│ 938×818 │ └────────────────────────────────┘ │
|
||
│ 滚动表格 + 进度条 │ ┌────────────────────────────────┐ │
|
||
│ │ │ 关键工序任务明细 │ │
|
||
│ │ │ 938×270 │ │
|
||
│ │ │ 滚动表格 │ │
|
||
│ │ └────────────────────────────────┘ │
|
||
│ │ ┌────────────────────────────────┐ │
|
||
│ │ │ 正在开工任务 │ │
|
||
│ │ │ 938×254 │ │
|
||
│ │ │ 滚动表格 │ │
|
||
│ │ └────────────────────────────────┘ │
|
||
│ │ ┌────────────────────────────────┐ │
|
||
│ │ │ 🆕 运行报工设备数据 │ │
|
||
│ │ │ 待定 │ │
|
||
│ │ └────────────────────────────────┘ │
|
||
└─────────────────────────────────────────┴────────────────────────────────────┘
|
||
1920×1080
|
||
```
|
||
|
||
---
|
||
|
||
## 十、不介入范围
|
||
|
||
| 模块 | 原因 |
|
||
|------|------|
|
||
| 关键工序任务（看板二） | 无存储过程，无数据来源 |
|
||
| 缺勤人员（看板二） | 无存储过程，无数据来源 |
|
||
| 设备 OEE TOP10（看板一） | 已注释，暂不实现 |
|
||
| 计划执行率 TOP10（看板一） | 已替换为指派汇总，不恢复 |
|
||
| 已完工作务明细（看板一） | 已替换为指派汇总，不恢复 |
|
||
|
||
---
|
||
|
||
## 十一、文件清单
|
||
|
||
| 文件路径 | 说明 |
|
||
|---------|------|
|
||
| `src/views/index.vue` | 看板一（主页面） |
|
||
| `src/views/machiningOperationTwo.vue` | 看板二 |
|
||
| `src/router/index.js` | 路由配置 |
|
||
| `src/main.js` | 入口，全局 provide |
|
||
| `src/utils/curdVue3.js` | CreateData / ExecDatabase 封装 |
|
||
| `src/utils/request.js` | Axios 实例 |
|
||
| `src/store/app.js` | Pinia 全局状态 |
|
||
| `src/App.vue` | 根组件 |
|
||
| `vite.config.js` | Vite 构建配置 |
|
||
| `index.html` | HTML 入口 |
|