537 lines
26 KiB
Markdown
537 lines
26 KiB
Markdown
# 机加设备生产运营看板（二）实施文档
|
||
|
||
---
|
||
|
||
## 一、业务背景与目标
|
||
|
||
### 1.1 业务描述
|
||
|
||
本看板用于**机械加工车间**的生产运营实时监控，面向车间管理人员和调度人员，提供机加设备相关的在制任务、加急任务、关键工序和人员出勤等核心运营数据的可视化展示。
|
||
|
||
**业务痛点：**
|
||
- 车间管理人员无法实时掌握在制任务的整体进度
|
||
- 加急订单的优先级无法直观呈现，导致交期延误风险
|
||
- 关键工序的瓶颈难以快速识别
|
||
- 缺勤人员信息不透明，影响排产调度
|
||
|
||
**看板目标：**
|
||
- 一屏展示机加车间当日生产运营全貌
|
||
- 实时刷新任务进度数据
|
||
- 大屏自适应展示，适配 1920×1080 至各种分辨率
|
||
|
||
### 1.2 看板布局
|
||
|
||
```
|
||
┌──────────────────────────────────────────────────────┐
|
||
│ LOGO 机加设备生产运营看板（二） 时钟 │ ← 页头 Header
|
||
├──────────┬──────────┬──────────┬──────────────────────┤
|
||
│ 在制任务 │ 加急任务 │ 关键工序 │ 缺勤人员 │ ← 汇总卡片行
|
||
│ 汇总 84单 │ 汇总 26单 │ 任务 14单 │ 4人（姓名+工位） │
|
||
├──────────┴──────────┴──────────┴──────────────────────┤
|
||
│ │
|
||
│ 在制任务明细（进度百分比） │ ← 左侧大表
|
||
│ 生产订单│销售订单│物料名称│物料编码│工序│分配数│完成数│进度% │
|
||
│ │
|
||
├──────────────────────────┬───────────────────────────┤
|
||
│ 加急任务列表 │ 关键工序任务明细 │ ← 右上两表
|
||
│ 订单│合同│物料│编码│工序 │ 订单│合同│物料│编码│工序 │
|
||
│ 分配数│加急数│指派对象 │ 分配数│加急数│指派对象 │
|
||
├──────────────────────────┼───────────────────────────┤
|
||
│ 正在开工任务 │ 报工运行(新增) │ ← 右下两表
|
||
│ 订单│合同│物料│编码│工序 │ 设备│状态│运行时长│报工数 │
|
||
│ 分配数 │ 运行/待机/停机 仪表盘 │
|
||
└──────────────────────────┴───────────────────────────┘
|
||
```
|
||
|
||
---
|
||
|
||
## 二、技术方案
|
||
|
||
### 2.1 技术栈选型
|
||
|
||
| 层级 | 技术 | 版本 | 用途 |
|
||
|------|------|------|------|
|
||
| 前端框架 | Vue 3 (Composition API) | ^3.5.12 | 核心框架，`<script setup>` 语法 |
|
||
| 构建工具 | Vite | ^5.4.10 | 开发/构建 |
|
||
| 路由 | Vue Router | ^4.4.5 | Hash 模式路由 |
|
||
| 状态管理 | Pinia | ^2.2.5 | 全局状态（用户信息/加载态） |
|
||
| UI 组件库 | Element Plus + TDesign + DataV-Vue3 | - | 消息提示 + 加载组件 + 大屏滚动表 |
|
||
| 图表 | ECharts | ^6.0.0 | 备用图表能力 |
|
||
| HTTP 客户端 | Axios | ^1.7.7 | 后端接口调用 |
|
||
| Cookie | js-cookie | ^3.0.5 | 用户身份读取 |
|
||
| CSS 预处理 | SCSS/Sass | ^1.80.5 | 样式编写 |
|
||
|
||
### 2.2 整体架构
|
||
|
||
```
|
||
┌──────────────────────────────────────────────────────┐
|
||
│ 浏览器 (Browser) │
|
||
│ ┌────────────────────────────────────────────────┐ │
|
||
│ │ Vue 3 SPA (单页应用) │ │
|
||
│ │ ┌──────────┐ ┌──────────┐ ┌─────────────┐ │ │
|
||
│ │ │ 路由层 │ │ 状态层 │ │ 视图层 │ │ │
|
||
│ │ │ Router │ │ Pinia │ │ index.vue │ │ │
|
||
│ │ │ / → │ │ AppData │ │ (大屏看板) │ │ │
|
||
│ │ │ index │ │ │ │ │ │ │
|
||
│ │ └──────────┘ └──────────┘ └──────┬───────┘ │ │
|
||
│ │ │ │ │
|
||
│ │ ┌──────────────────────────────────┐│ │ │
|
||
│ │ │ 工具层 (Plugins) ││ │ │
|
||
│ │ │ CreateData() → 构造请求参数 ││ │ │
|
||
│ │ │ ExecDatabase() → 执行数据库查询 ││ │ │
|
||
│ │ │ request.js → Axios 封装 ││ │ │
|
||
│ │ └──────────────────┬───────────────┘│ │ │
|
||
│ └─────────────────────┼─────────────────┘ │ │
|
||
└────────────────────────┼─────────────────────────────┘
|
||
│ HTTP POST
|
||
▼
|
||
┌──────────────────────────────────────────────────────┐
|
||
│ 中间层 (MESCommonBase.ashx) │
|
||
│ 接收 JSON → 解析 type/name/param → 调用存储过程 │
|
||
│ 返回 JSON: { data: [...] } 或 { data: { result: [...] } } │
|
||
└────────────────────┬─────────────────────────────────┘
|
||
│
|
||
▼
|
||
┌──────────────────────────────────────────────────────┐
|
||
│ 数据库 (SQL Server) │
|
||
│ 存储过程: │
|
||
│ - 机加设备生产运营看板_加急任务查询 │
|
||
│ - 机加设备生产运营看板_机加在制查询 │
|
||
│ - 机加设备生产运营看板_机加在制查询2 │
|
||
│ - 机加设备生产运营看板_报工运行查询 (新增) │
|
||
│ 涉及表: 生产订单表 / 工序表 / 人员表 / 设备表 / 报工表... │
|
||
└──────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
### 2.3 API 通信协议
|
||
|
||
请求格式（type=11 表示调用存储过程）：
|
||
|
||
```json
|
||
{
|
||
"type": "11",
|
||
"name": "存储过程名称",
|
||
"param": "[]",
|
||
"pageSize": null,
|
||
"pageList": null,
|
||
"UserID": "username_from_cookie",
|
||
"ModularID": ""
|
||
}
|
||
```
|
||
|
||
响应格式（两种可能结构）：
|
||
|
||
```json
|
||
// 格式A
|
||
{ "data": [ { "字段1": "值1", "字段2": "值2" } ] }
|
||
|
||
// 格式B
|
||
{ "data": { "result": [ { "字段1": "值1", "字段2": "值2" } ] } }
|
||
```
|
||
|
||
---
|
||
|
||
## 三、技术路线（开发阶段）
|
||
|
||
| 阶段 | 内容 | 预计工时 | 产出 |
|
||
|------|------|----------|------|
|
||
| **阶段1：基础设施** | 项目初始化、依赖安装、路由/状态管理配置、API 层搭建 | 0.5天 | 项目可启动 |
|
||
| **阶段2：数据库层** | 确认表结构、编写3个核心存储过程(SP1-3)、报工运行SP4、接口联调 | 1天 | 4个SP可返回数据 |
|
||
| **阶段3：页面开发** | 看板布局、汇总卡片、4个数据表格组件、报工运行面板开发 | 1.5天 | 页面渲染完成 |
|
||
| **阶段4：数据对接** | 前后端联调、真实数据替换 Mock 数据、异常处理 | 1天 | 真实数据展示 |
|
||
| **阶段5：样式与优化** | 样式布局调整、大屏缩放适配、定时刷新、性能优化 | 0.5天 | 多分辨率适配 |
|
||
| **阶段6：测试与部署** | 功能测试、兼容性测试、生产打包部署 | 0.5天 | 上线运行 |
|
||
|
||
---
|
||
|
||
## 四、需要完成的具体模块
|
||
|
||
### 4.1 模块总览
|
||
|
||
```
|
||
机加设备生产运营看板（二）
|
||
├── M1: 页面框架模块
|
||
│ ├── 页头（Logo + 标题 + 实时时钟）
|
||
│ ├── 自适应缩放引擎
|
||
│ └── 全局加载态
|
||
├── M2: 汇总卡片模块
|
||
│ ├── 在制任务汇总卡片
|
||
│ ├── 加急任务汇总卡片
|
||
│ ├── 关键工序任务汇总卡片
|
||
│ └── 缺勤人员卡片
|
||
├── M3: 在制任务明细模块（大表）
|
||
│ └── dv-scroll-board 滚动表格 + 进度条
|
||
├── M4: 加急任务列表模块
|
||
│ └── dv-scroll-board 滚动表格
|
||
├── M5: 关键工序任务明细模块
|
||
│ └── dv-scroll-board 滚动表格
|
||
├── M6: 正在开工任务模块
|
||
│ └── dv-scroll-board 滚动表格
|
||
├── M7: 数据服务模块
|
||
│ ├── API 请求封装
|
||
│ ├── 参数构造（CreateData）
|
||
│ ├── 响应解析（getResponseRows）
|
||
│ └── 数据映射（applyUrgentData / applyInProcessData / applyInProcessData2）
|
||
└── M8: 报工运行模块（新增）
|
||
├── 设备运行状态总览（运行/待机/停机数量统计）
|
||
├── 设备报工明细列表（dv-scroll-board 或 ECharts 仪表盘）
|
||
└── 数据存储过程 SP4
|
||
```
|
||
|
||
### 4.2 各模块详细说明
|
||
|
||
#### M1: 页面框架模块
|
||
|
||
| 属性 | 说明 |
|
||
|------|------|
|
||
| 文件 | `src/views/index.vue` `<template>` 头部区域 |
|
||
| 功能 | 品牌 Logo 展示、看板标题、实时数字时钟（秒级刷新） |
|
||
| 关键逻辑 | `refreshClock()` 每秒更新 `currentTime` ref |
|
||
| 自适应 | `setScale()` 通过 CSS transform 等比缩放，基于 1920×1080 设计稿 |
|
||
|
||
#### M2: 汇总卡片模块
|
||
|
||
| 卡片 | 数据字段 | 数据来源 | 图标 | 颜色 |
|
||
|------|----------|----------|------|------|
|
||
| 在制任务汇总 | `summaryCards[0].value` | SP3 首行 `总数` | 剪贴板 | 绿色 #28d961 |
|
||
| 加急任务汇总 | `summaryCards[1].value` | SP1 首行 `加急订单总数` | 火箭 | 蓝色 #09a8ff |
|
||
| 关键工序任务 | `summaryCards[2].value` | 静态/待对接 | 盾牌 | 紫色 #7459ef |
|
||
| 缺勤人员 | `summaryCards[3].value` + `people[]` | 数据接口对接中 | 用户 | 橙色 #ff951c |
|
||
|
||
#### M3: 在制任务明细模块（核心大表）
|
||
|
||
| 属性 | 说明 |
|
||
|------|------|
|
||
| 展示形式 | DataV `dv-scroll-board` 滚动表格，12行可见，单页轮播 |
|
||
| 列定义 | 生产订单、销售订单、物料名称、物料编码、工序名称、分配数量、完成数量、进度百分比% |
|
||
| 列宽 | [126, 130, 116, 136, 88, 80, 80, 158] |
|
||
| 进度列 | 自定义 HTML 渲染：进度条 + 百分比数字 |
|
||
| 最小行数 | 18行（不足自动扩展填充） |
|
||
| 数据源 | SP3 `机加设备生产运营看板_机加在制查询2` |
|
||
|
||
#### M4: 加急任务列表模块
|
||
|
||
| 属性 | 说明 |
|
||
|------|------|
|
||
| 展示形式 | DataV `dv-scroll-board`，8行可见 |
|
||
| 列定义 | 生产订单、销售订单、物料名称、物料编码、工序名称、分配数量、加急数量、指派对象 |
|
||
| 列宽 | [122, 132, 132, 152, 92, 82, 92, 82, 94] |
|
||
| 最小行数 | 12行 |
|
||
| 数据源 | SP1 `机加设备生产运营看板_加急任务查询` |
|
||
|
||
#### M5: 关键工序任务明细模块
|
||
|
||
| 属性 | 说明 |
|
||
|------|------|
|
||
| 展示形式 | 同 M4（共用 `makeTaskBoard` 函数） |
|
||
| 数据源 | **待对接**（当前为静态 Mock 数据） |
|
||
|
||
#### M6: 正在开工任务模块
|
||
|
||
| 属性 | 说明 |
|
||
|------|------|
|
||
| 展示形式 | DataV `dv-scroll-board`，8行可见 |
|
||
| 列定义 | 生产订单、销售订单、物料名称、物料编码、工序名称、分配数量 |
|
||
| 列宽 | [160, 170, 140, 176, 140, 128] |
|
||
| 最小行数 | 12行 |
|
||
| 数据源 | SP2 `机加设备生产运营看板_机加在制查询` |
|
||
|
||
#### M7: 数据服务模块
|
||
|
||
| 组件 | 文件 | 说明 |
|
||
|------|------|------|
|
||
| CreateData() | `src/utils/curdVue3.js` | 构造 MES API 标准请求体 JSON |
|
||
| ExecDatabase() | `src/utils/curdVue3.js` | 发送 POST 请求（URL 为空，使用 baseURL） |
|
||
| request.js | `src/utils/request.js` | Axios 实例封装，baseURL = `window.g.API_WEB_URL + '/submit/MESCommonBase.ashx'` |
|
||
| getResponseRows() | `src/views/index.vue` | 解析两种响应格式，提取数据行数组 |
|
||
| queryDashboardData() | `src/views/index.vue` | 统一查询入口：构造参数 → 请求 → 解析 → 应用数据 |
|
||
|
||
#### M8: 报工运行模块（新增）
|
||
|
||
| 属性 | 说明 |
|
||
|------|------|
|
||
| 展示形式 | ① 顶部状态统计行（运行中 / 待机 / 停机 数量）② ECharts 仪表盘 或 DataV 滚动表格展示设备明细 |
|
||
| 列定义（表格方案） | 设备编号、设备名称、运行状态(带颜色标识)、当日运行时长(h)、当日报工数量、最近报工时间 |
|
||
| 数据源 | SP4 `机加设备生产运营看板_报工运行查询` |
|
||
| 布局位置 | 右侧下方区域（可替换/合并原关键工序或缺勤人员区域） |
|
||
| 刷新 | 随页面加载调用，后续可扩展定时刷新 |
|
||
|
||
---
|
||
|
||
## 五、模块功能流程图
|
||
|
||
### 5.1 页面加载数据流程
|
||
|
||
```mermaid
|
||
flowchart TD
|
||
A["页面 onMounted"] --> B["refreshClock() 启动时钟"]
|
||
A --> C["setScale() 计算缩放比例"]
|
||
A --> D["searchDashboardData() 请求数据"]
|
||
|
||
D --> E["searchUrgentData()"]
|
||
D --> F["searchInProcessData()"]
|
||
D --> G["searchInProcessData2()"]
|
||
|
||
E --> E1["queryDashboardData('机加设备生产运营看板_加急任务查询', applyUrgentData)"]
|
||
F --> F1["queryDashboardData('机加设备生产运营看板_机加在制查询', applyInProcessData)"]
|
||
G --> G1["queryDashboardData('机加设备生产运营看板_机加在制查询2', applyInProcessData2)"]
|
||
|
||
E1 --> H["CreateData('11', procedureName, [])"]
|
||
H --> I["构造 JSON 请求体: type=11, name=SP名, param=[]"]
|
||
I --> J["ExecDatabase(JSON) → Axios POST"]
|
||
J --> K["MESCommonBase.ashx"]
|
||
K --> L["SQL Server 执行存储过程"]
|
||
L --> M["返回 JSON 响应"]
|
||
M --> N["getResponseRows(response)"]
|
||
N --> N1{响应结构判断}
|
||
N1 -->|"response.data 是数组"| N2["返回 response.data"]
|
||
N1 -->|"response.data.result 是数组"| N3["返回 response.data.result"]
|
||
N1 -->|"都不是"| N4["返回 []"]
|
||
N2 --> O["applyXxxData(rows) 数据映射"]
|
||
N3 --> O
|
||
O --> P["更新响应式数据，页面自动渲染"]
|
||
```
|
||
|
||
### 5.2 API 请求构造流程
|
||
|
||
```mermaid
|
||
flowchart LR
|
||
A["调用方传入 type=11, name, data=[]"] --> B["CreateData(type, name, data)"]
|
||
B --> C{type === '7' ?}
|
||
C -->|"是(批量保存)"| D["遍历 data 按 pageSize 格式化"]
|
||
C -->|"否(查询)"| E["遍历 data 构造参数数组"]
|
||
D --> F["param_Str = data(原样)"]
|
||
E --> G["param_Str = JSON.stringify(param_array)"]
|
||
F --> H["构造请求对象 obj"]
|
||
G --> H
|
||
H --> I["obj = { type, name, param, pageSize, pageList, UserID, ModularID }"]
|
||
I --> J["JSON.stringify(obj) 返回字符串"]
|
||
J --> K["ExecDatabase(jsonStr)"]
|
||
K --> L["axios.post(baseURL + '', jsonStr)"]
|
||
```
|
||
|
||
### 5.3 数据映射流程（以加急任务为例）
|
||
|
||
```mermaid
|
||
flowchart TD
|
||
A["SP返回原始行数据"] --> B["rows = [{ 订单编号, 合同号, 物料描述, 物料编号, 计划数量, 加急数量, 工序名称, 指派对象, 加急订单总数 }]"]
|
||
B --> C["applyUrgentData(rows)"]
|
||
C --> D["first = rows[0]"]
|
||
D --> E{"first.加急订单总数 !== undefined ?"}
|
||
E -->|是| F["summaryCards[1].value = first.加急订单总数"]
|
||
E -->|否| G["保持原值不变"]
|
||
F --> H["urgentRows.value = rows.map(row => 字段映射)"]
|
||
G --> H
|
||
H --> I["映射规则:
|
||
订单编号 → productionOrder
|
||
合同号 → salesOrder
|
||
物料描述 → materialName
|
||
物料编号 → materialCode
|
||
计划数量 → assignQty
|
||
加急数量 → urgentQty
|
||
工序名称 → processName
|
||
指派对象 → assignee
|
||
prevPassQty → ''(空)"]
|
||
I --> J["urgentBoardConfig(computed) 自动响应更新"]
|
||
J --> K["dv-scroll-board 重新渲染"]
|
||
```
|
||
|
||
### 5.4 自适应缩放流程
|
||
|
||
```mermaid
|
||
flowchart TD
|
||
A["页面加载 / 窗口 resize"] --> B["setScale()"]
|
||
B --> C["getScale()"]
|
||
C --> D["x = window.innerWidth / 1920"]
|
||
C --> E["y = window.innerHeight / 1080"]
|
||
D --> F["style.transform = scaleY(y) scaleX(x) translate(-50%, -50%)"]
|
||
E --> F
|
||
F --> G["页面等比缩放填满屏幕"]
|
||
```
|
||
|
||
---
|
||
|
||
## 六、涉及的数据库表与存储过程
|
||
|
||
### 6.1 存储过程清单
|
||
|
||
#### SP1: `机加设备生产运营看板_加急任务查询`
|
||
|
||
| 属性 | 说明 |
|
||
|------|------|
|
||
| 用途 | 查询当日加急/紧急生产任务 |
|
||
| 调用方式 | type=11, 无参数 |
|
||
| 返回字段 | `订单编号`, `合同号`, `物料描述`, `物料编号`, `计划数量`, `加急数量`, `工序名称`, `指派对象`, `加急订单总数` |
|
||
| 备注 | 首行 `加急订单总数` 用于更新汇总卡片值 |
|
||
|
||
#### SP2: `机加设备生产运营看板_机加在制查询`
|
||
|
||
| 属性 | 说明 |
|
||
|------|------|
|
||
| 用途 | 查询当前正在开工的生产任务 |
|
||
| 调用方式 | type=11, 无参数 |
|
||
| 返回字段 | `订单号`, `合同号`, `零件名称`, `零件编码`, `分配数`, `工序名称`, `指派对象` |
|
||
| 备注 | 用于"正在开工任务"表格 |
|
||
|
||
#### SP3: `机加设备生产运营看板_机加在制查询2`
|
||
|
||
| 属性 | 说明 |
|
||
|------|------|
|
||
| 用途 | 查询在制任务明细（含完成数量和进度） |
|
||
| 调用方式 | type=11, 无参数 |
|
||
| 返回字段 | `订单号`, `合同号`, `零件名称`, `零件编码`, `分配数`, `工序名称`, `指派对象`, `完成数量`, `总数` |
|
||
| 备注 | 首行 `总数` 更新在制汇总卡片；每行计算 `progress = (完成数量/分配数)*100` |
|
||
|
||
#### SP4: `机加设备生产运营看板_报工运行查询`（待开发）
|
||
|
||
| 属性 | 说明 |
|
||
|------|------|
|
||
| 用途 | 查询各设备当日运行状态和报工数据 |
|
||
| 调用方式 | type=11, 无参数 |
|
||
| 返回字段 | `设备编号`, `设备名称`, `运行状态`, `当日运行时长(h)`, `当日报工数量`, `最近报工时间` |
|
||
| 备注 | 用于新增"报工运行"面板 |
|
||
|
||
### 6.2 推断涉及的数据库表
|
||
|
||
基于存储过程返回字段和业务逻辑，推断涉及以下核心表：
|
||
|
||
| 表名（推测） | 字段 | 用途 |
|
||
|------|------|------|
|
||
| `ProductionOrder` (生产订单表) | 订单编号, 合同号, 计划数量, 加急标识 | 生产任务主表 |
|
||
| `Material` (物料表) | 物料编号, 物料描述/零件名称, 零件编码 | 物料/零件信息 |
|
||
| `ProcessRouting` (工序工艺表) | 工序名称, 工序类型, 是否关键工序 | 工序定义 |
|
||
| `WorkOrderOperation` (工单工序表) | 订单号, 工序名称, 分配数, 完成数量, 指派对象 | 工单执行明细 |
|
||
| `Personnel` (人员表) | 姓名, 工位, 出勤状态 | 人员信息 |
|
||
| `AttendanceRecord` (考勤记录表) | 人员ID, 日期, 出勤状态 | 考勤记录 |
|
||
| `Equipment` (设备表) | 设备编号, 设备名称, 设备类型, 所属工位 | 设备主数据（报工运行用） |
|
||
| `EquipmentRuntime` (设备运行记录表) | 设备ID, 运行状态(运行/待机/停机), 开始时间, 结束时间 | 设备运行日志（报工运行用） |
|
||
| `WorkReportRecord` (报工记录表) | 设备ID/工单ID, 报工数量, 报工时间, 操作员 | 报工数据（报工运行用） |
|
||
|
||
> **注意**: 以上表名为业务推断，需与数据库实际结构核对确认。
|
||
|
||
### 6.3 存储过程实现建议模板
|
||
|
||
```sql
|
||
-- 示例：机加设备生产运营看板_加急任务查询
|
||
CREATE PROCEDURE [dbo].[机加设备生产运营看板_加急任务查询]
|
||
AS
|
||
BEGIN
|
||
SET NOCOUNT ON;
|
||
|
||
-- 加急订单总数
|
||
SELECT COUNT(DISTINCT PO.OrderID) AS 加急订单总数
|
||
FROM ProductionOrder PO
|
||
WHERE PO.IsUrgent = 1
|
||
AND PO.OrderDate = CAST(GETDATE() AS DATE);
|
||
|
||
-- 加急任务明细
|
||
SELECT
|
||
PO.OrderNo AS 订单编号,
|
||
PO.ContractNo AS 合同号,
|
||
M.MaterialDesc AS 物料描述,
|
||
M.MaterialCode AS 物料编号,
|
||
WO.PlannedQty AS 计划数量,
|
||
WO.UrgentQty AS 加急数量,
|
||
PR.ProcessName AS 工序名称,
|
||
WO.Assignee AS 指派对象
|
||
FROM ProductionOrder PO
|
||
INNER JOIN Material M ON PO.MaterialID = M.MaterialID
|
||
INNER JOIN WorkOrderOperation WO ON PO.OrderID = WO.OrderID
|
||
INNER JOIN ProcessRouting PR ON WO.ProcessID = PR.ProcessID
|
||
WHERE PO.IsUrgent = 1
|
||
AND PO.OrderDate = CAST(GETDATE() AS DATE)
|
||
ORDER BY WO.UrgentQty DESC;
|
||
END
|
||
```
|
||
|
||
```sql
|
||
-- 示例：机加设备生产运营看板_报工运行查询
|
||
CREATE PROCEDURE [dbo].[机加设备生产运营看板_报工运行查询]
|
||
AS
|
||
BEGIN
|
||
SET NOCOUNT ON;
|
||
|
||
SELECT
|
||
E.EquipCode AS 设备编号,
|
||
E.EquipName AS 设备名称,
|
||
ER.RunStatus AS 运行状态,
|
||
ISNULL(SUM(DATEDIFF(MINUTE, ER.StartTime, ISNULL(ER.EndTime, GETDATE()))) / 60.0, 0) AS 当日运行时长,
|
||
ISNULL(WRR.ReportQty, 0) AS 当日报工数量,
|
||
WRR.LastReportTime AS 最近报工时间
|
||
FROM Equipment E
|
||
LEFT JOIN EquipmentRuntime ER
|
||
ON E.EquipID = ER.EquipID
|
||
AND ER.StartTime >= CAST(GETDATE() AS DATE)
|
||
LEFT JOIN (
|
||
SELECT EquipID, SUM(ReportQty) AS ReportQty, MAX(ReportTime) AS LastReportTime
|
||
FROM WorkReportRecord
|
||
WHERE ReportTime >= CAST(GETDATE() AS DATE)
|
||
GROUP BY EquipID
|
||
) WRR ON E.EquipID = WRR.EquipID
|
||
GROUP BY E.EquipCode, E.EquipName, ER.RunStatus, WRR.ReportQty, WRR.LastReportTime
|
||
ORDER BY E.EquipCode;
|
||
END
|
||
```
|
||
|
||
---
|
||
|
||
## 七、今日详细工作步骤
|
||
|
||
### 上午（09:00 - 12:00）
|
||
|
||
| 步骤 | 任务 | 详细操作 | 产出 | 预计用时 |
|
||
|------|------|----------|------|----------|
|
||
| **Step 1** | 环境确认 | ① `npm install` 安装依赖；② `npm run dev` 验证项目可启动；③ 确认 `/config.js` 正常加载；④ 浏览器控制台检查无报错 | 项目正常启动 | 30min |
|
||
| **Step 2** | 数据库调研 | ① 连接 SQL Server 数据库；② 确认上文推断的 6 张表实际表名和字段；③ 导出相关表结构文档 | 表结构文档 | 1h |
|
||
| **Step 3** | SP1 编写与测试 | ① 编写 `机加设备生产运营看板_加急任务查询` 存储过程；② 在 SSMS 中执行验证数据正确性；③ 调优查询性能（添加索引） | SP1 可用 | 1h |
|
||
| **Step 4** | SP2 编写与测试 | ① 编写 `机加设备生产运营看板_机加在制查询` 存储过程；② SSMS 执行验证 | SP2 可用 | 30min |
|
||
|
||
### 下午（13:30 - 18:00）
|
||
|
||
| 步骤 | 任务 | 详细操作 | 产出 | 预计用时 |
|
||
|------|------|----------|------|----------|
|
||
| **Step 5** | SP3 编写与测试 | ① 编写 `机加设备生产运营看板_机加在制查询2` 存储过程；② SSMS 执行验证 | SP3 可用 | 30min |
|
||
| **Step 6** | 前后端联调（SP1-3） | ① 通过 MESCommonBase.ashx 实际调用 3 个存储过程；② 用浏览器 DevTools Network 面板检查请求/响应；③ 验证响应 JSON 结构；④ 如有结构不匹配，调整 `getResponseRows()` | 3个SP前后端调通 | 1h |
|
||
| **Step 7** | 真实数据验证 | ① 确认汇总卡片数字正确；② 确认表格数据显示正确；③ 确认进度百分比计算正确；④ 处理空数据/异常情况 | 页面展示真实数据 | 1h |
|
||
| **Step 8** | 样式布局修改 | ① 根据用户反馈调整看板整体布局（卡片尺寸/间距/位置）；② 修改表格列宽适配真实数据长度；③ 调整字体大小、颜色、对比度提升可读性；④ 优化表格行高和滚动速率；⑤ 调整缺勤人员卡片内边距和字体样式；⑥ 页面背景/边框/阴影等视觉细节微调 | 样式布局验收通过 | 1.5h |
|
||
| **Step 9** | 报工运行功能开发 | ① 确认报工运行数据来源（设备运行状态表/报工记录表）；② 编写报工运行存储过程，返回：设备编号、设备名称、运行状态（运行/待机/停机）、当日运行时长(h)、当日报工数量、最近报工时间；③ 新增报工运行面板组件（建议 ECharts 仪表盘 + 运行状态列表或 DataV 滚动表格）；④ 调整页面布局容纳新面板（右侧下方区域）；⑤ 前后端联调验证数据正确性 | 报工运行面板展示真实数据 | 1.5h |
|
||
| **Step 10** | 整体测试 | ① 全流程回归测试（含报工运行功能）；② 异常场景测试（接口超时、空数据、网络断开）；③ 多分辨率测试（1920×1080 / 1366×768 / 2560×1440）；④ 样式布局走查确认 | 测试报告 | 30min |
|
||
|
||
---
|
||
|
||
## 八、当前状态与待办事项
|
||
|
||
### 已完成 ✅
|
||
- [x] 项目框架搭建（Vue3 + Vite + Pinia + Router）
|
||
- [x] 页面布局与样式（1920×1080 大屏设计）
|
||
- [x] 4 个滚动表格组件集成（DataV-Vue3）
|
||
- [x] 自适应缩放引擎
|
||
- [x] 实时时钟
|
||
- [x] API 通信层封装（CreateData / ExecDatabase / request.js）
|
||
- [x] 数据映射逻辑（applyUrgentData / applyInProcessData / applyInProcessData2）
|
||
- [x] public/config.js 加载路径修复（本次修复）
|
||
|
||
### 进行中 🔄
|
||
- [ ] 数据库表结构确认
|
||
- [ ] SP1~SP3 存储过程编写
|
||
- [ ] 前后端联调
|
||
|
||
### 待开发 ⏳
|
||
- [ ] SP4 报工运行查询存储过程
|
||
- [ ] M8 报工运行面板组件开发
|
||
- [ ] 页面样式布局调整优化
|
||
- [ ] 定时自动刷新机制（setInterval 30s）
|
||
- [ ] 错误处理优化（接口失败重试、友好提示）
|
||
|
||
---
|
||
|
||
## 九、关键风险与注意事项
|
||
|
||
| 风险 | 影响 | 应对措施 |
|
||
|------|------|----------|
|
||
| 数据库实际表结构未知 | SP 无法编写 | Step 2 优先确认表结构 |
|
||
| MESCommonBase.ashx 响应格式不确定 | 数据解析失败 | `getResponseRows` 已兼容两种格式，需实测确认 |
|
||
| 内网 API 地址 `192.168.2.92:10101` 不可达 | 无法联调 | 确认网络连通性，或使用代理 |
|
||
| 存储过程性能差 | 大屏卡顿 | 添加索引，限制返回行数 |
|
||
| 生产数据敏感 | 数据安全 | 确认仅查询权限，不涉及写操作 |
|