meswork/yl

Fork 0

Files

meswork764 ba82fbfc14 Add all dashboard projects

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

24 KiB

Raw Blame History

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

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

24 KiB Raw Blame History Unescape Escape

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

一、技术方案

1.1 技术栈

1.2 架构分层

1.3 数据流向

二、技术路线

三、模块清单

看板一（index.vue）— 路由 /

看板二（machiningOperationTwo.vue）— 路由 /machiningOperationTwo

四、涉及的表和存储过程

看板一（6 个存储过程）

看板二（3 个存储过程 + 1 新增）

五、功能流程图

5.1 看板一 数据加载流程

5.2 看板二 数据加载流程（当前 + 新增）

5.3 未及时开工指派汇总（看板一新增模块）

六、字段映射对照表

6.1 看板一 字段映射

applyDashboardData（设备运行状态查询）

applyNotStartData（未及时开工查询）

applyTodayDoneSummaryData（当天已完成汇总）

applyTodayDoneDetailData（当天已完成明细）

applyunqualifiedData（不良品查询）

applyPlanExecuteData（计划执行率）

6.2 看板二 字段映射

applyUrgentData（加急任务查询）

applyInProcessData（机加在制查询 — 正在开工）

applyInProcessData2（机加在制查询2 — 在制明细）

6.3 新增：运行报工设备（待确认）

七、今日详细工作步骤

步骤 1：沟通确认（上午）

步骤 2：看板一 样式/布局修改（下午·编码）

步骤 3：看板二 Bug 修复（下午·编码）

步骤 4：新增运行报工设备模块（下午·编码）

步骤 5：联调验证（下午）

八、看板一 面板布局总览

九、看板二 面板布局总览

十、不介入范围

十一、文件清单

24 KiB

Raw Blame History

看板一（index.vue）— 路由 `/`

看板二（machiningOperationTwo.vue）— 路由 `/machiningOperationTwo`

5.1 看板一数据加载流程

5.2 看板二数据加载流程（当前 + 新增）

6.1 看板一字段映射

6.2 看板二字段映射

步骤 2：看板一样式/布局修改（下午·编码）

八、看板一面板布局总览

九、看板二面板布局总览