meswork/yl

Fork 0

Files

meswork764 ba82fbfc14 Add all dashboard projects

2026-05-23 14:07:11 +08:00

26 KiB

Raw Permalink Blame History

机加设备生产运营看板（二）实施文档

一、业务背景与目标

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 表示调用存储过程）：

{
  "type": "11",
  "name": "存储过程名称",
  "param": "[]",
  "pageSize": null,
  "pageList": null,
  "UserID": "username_from_cookie",
  "ModularID": ""
}

响应格式（两种可能结构）：

// 格式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 页面加载数据流程

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 请求构造流程

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 数据映射流程（以加急任务为例）

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 自适应缩放流程

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 存储过程实现建议模板

-- 示例：机加设备生产运营看板_加急任务查询
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

-- 示例：机加设备生产运营看板_报工运行查询
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

八、当前状态与待办事项

已完成 ✅

项目框架搭建（Vue3 + Vite + Pinia + Router）
页面布局与样式（1920×1080 大屏设计）
4 个滚动表格组件集成（DataV-Vue3）
自适应缩放引擎
实时时钟
API 通信层封装（CreateData / ExecDatabase / request.js）
数据映射逻辑（applyUrgentData / applyInProcessData / applyInProcessData2）
public/config.js 加载路径修复（本次修复）

进行中 🔄

数据库表结构确认
SP1~SP3 存储过程编写
前后端联调

待开发 ⏳

SP4 报工运行查询存储过程
M8 报工运行面板组件开发
页面样式布局调整优化
定时自动刷新机制（setInterval 30s）
错误处理优化（接口失败重试、友好提示）

九、关键风险与注意事项

风险	影响	应对措施
数据库实际表结构未知	SP 无法编写	Step 2 优先确认表结构
MESCommonBase.ashx 响应格式不确定	数据解析失败	`getResponseRows` 已兼容两种格式，需实测确认
内网 API 地址 `192.168.2.92:10101` 不可达	无法联调	确认网络连通性，或使用代理
存储过程性能差	大屏卡顿	添加索引，限制返回行数
生产数据敏感	数据安全	确认仅查询权限，不涉及写操作

26 KiB Raw Permalink Blame History Unescape Escape