# 机加设备生产运营看板 — 实施文档

> 日期：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 入口 |