Appearance
工作流监控面板
**本文引用的文件** - [dashboard.vue](file://dm/lemes-web/src/components/dashboard/dashboard.vue) - [dashboard-panel.vue](file://dm/lemes-web/src/components/dashboard/dashboard-panel.vue) - [dashboardLine.vue](file://dm/lemes-web/src/components/dashboard/dashboardLine.vue) - [le-chart.vue](file://dm/lemes-web/src/components/dashboard/le-chart.vue) - [workflow.sql](file://docs/ddl/workflow.sql) - [index.vue](file://dm/lemes-web/src/components/bpmnModeler/index.vue) - [task.vue](file://dm/lemes-web/src/components/bpmnModeler/components/nodePanel/task.vue) - [u-charts.js](file://app/devicemate-app/components/u-charts/u-charts.js) - [iconfont.css](file://dm/lemes-web/src/assets/font/iconfont.css)目录
简介
本技术文档面向 DeviceMate 工作流监控面板，系统性阐述工作流状态监控、性能指标采集与可视化展示的实现方案。内容覆盖监控数据的采集来源、存储结构、分析维度（流程实例统计、任务执行时长、用户活跃度）、仪表板设计与交互、实时更新机制、告警配置与通知、以及数据导出与报表生成等能力。文档同时提供可视化架构图与流程图，帮助读者快速理解从数据采集到可视化呈现的全链路。
项目结构
工作流监控涉及前端看板组件、图表库封装、BPMN 流程模型渲染、数据库 DDL 定义与后端服务对接。前端采用 Vue 组件化架构，结合 ECharts 与自研图表封装组件；后端通过工作流服务产生审计与日志数据，数据库提供统一的数据存储与查询基础。
图表来源
- dashboard.vue:1-187
- dashboard-panel.vue:1-89
- dashboardLine.vue:1-207
- le-chart.vue:1-302
- index.vue:196-257
- task.vue:202-249
- workflow.sql:1-564
- u-charts.js:4955-5289
- iconfont.css:1-94
章节来源
- dashboard.vue:1-187
- dashboard-panel.vue:1-89
- dashboardLine.vue:1-207
- le-chart.vue:1-302
- index.vue:196-257
- task.vue:202-249
- workflow.sql:1-564
- u-charts.js:4955-5289
- iconfont.css:1-94
核心组件
- 全屏看板容器：提供统一的背景、标题、时间显示与全屏切换能力，适配大屏缩放与响应式布局。
- 面板容器：用于承载监控卡片与子组件，支持标题插槽与内容区域样式定制。
- 图表封装：基于 ECharts 封装通用折线/柱状/饼图配置，支持动态尺寸监听与重绘。
- BPMN 渲染与高亮：根据流程任务完成状态对节点与连线进行视觉标记，直观反映流程进度。
- 图标字体：提供监控相关图标资源，统一界面风格。
章节来源
架构总览
监控体系从前端看板到后端数据，形成“采集-存储-分析-展示”的闭环。前端负责实时刷新与可视化，后端通过工作流服务产生审计与日志数据，数据库提供统一的数据模型支撑。
图表来源
- dashboard.vue:1-187
- dashboard-panel.vue:1-89
- dashboardLine.vue:1-207
- le-chart.vue:1-302
- index.vue:196-257
- task.vue:202-249
- workflow.sql:1-564
详细组件分析
全屏看板容器（dashboard.vue）
- 功能要点
- 提供全屏切换、时间显示、背景与标题区域布局。
- 计算缩放比例，适配不同分辨率的大屏展示。
- 响应式监听容器尺寸变化并触发重绘。
- 关键行为
- 定时器每秒更新当前时间。
- 监听容器尺寸变化，确保图表在缩放后正确渲染。
图表来源
章节来源
面板容器（dashboard-panel.vue）
- 功能要点
- 支持标题插槽（左侧/中部/右侧），内容区域可自定义样式。
- 统一边框与背景，便于组合多个监控卡片。
- 使用建议
- 将各类指标卡片封装为子组件，通过插槽灵活组合。
章节来源
线型看板（dashboardLine.vue）
- 功能要点
- 与 dashboard.vue 类似，但布局更偏向横向展示，适合长条形指标卡。
- 同样具备全屏切换、时间显示与缩放适配。
章节来源
图表封装（le-chart.vue）
- 功能要点
- 基于 ECharts 封装，内置折线、柱状、饼图的默认样式与主题色。
- 支持动态合并配置、监听容器尺寸变化自动 resize。
- 提供图例高亮、取消高亮、图例切换等交互事件。
- 性能特性
- 使用防抖/节流策略避免频繁重绘。
- 支持渐变色、阴影等视觉增强，兼顾美观与性能。
图表来源
章节来源
BPMN 流程渲染与高亮（index.vue）
- 功能要点
- 根据任务完成状态对 UserTask 节点与连线添加高亮/待办标记。
- 对网关与结束事件进行分支与终点高亮，直观展示流程走向。
- 数据来源
- 依赖任务列表与流程定义，结合 Canvas 标记实现状态可视化。
图表来源
章节来源
监控数据采集与存储（workflow.sql）
- 审计日志表（flow_audit_log）
- 记录流程实例、节点标题、审核状态、时间、用户等关键信息，用于统计流程节点耗时、审批效率与用户活跃度。
- 流程日志表（flow_log）
- 记录节点类型、任务名称、审批结果、上一步信息等，支撑流程轨迹与异常定位。
- 用户表（flow_user）与角色表（flow_user_role）
- 提供用户维度的活跃度与权限信息，便于按用户/角色聚合统计。
- 节点配置表（flow_node_config）与流程配置表（flow_business_config）
- 描述流程结构与节点参数，辅助计算流程复杂度与节点权重。
图表来源
章节来源
监控仪表板设计与实现
- 设计原则
- 信息密度与可读性平衡：优先展示关键指标与趋势。
- 一致性：统一字体、颜色与边框风格，使用面板容器与图标字体。
- 交互性：支持全屏切换、时间显示、图例高亮与点击切换。
- 组件组合
- 使用 dashboard.vue 作为根容器，dashboard-panel.vue 承载各卡片，le-chart.vue 展示趋势与分布。
- 实时更新
- 通过定时器与容器尺寸监听，确保图表随时间与窗口变化自动刷新。
章节来源
监控告警配置、阈值设置与通知机制
- 告警维度建议
- 流程节点超时：基于审计日志中的节点开始/结束时间计算耗时，设定阈值触发告警。
- 审批通过率异常：按周期统计审批通过率，低于阈值告警。
- 用户活跃度骤降：基于用户操作日志与任务参与度，设定阈值触发预警。
- 阈值管理
- 将阈值配置集中管理，支持按工厂/部门/流程类型差异化配置。
- 通知机制
- 结合后端消息推送或 WebSocket 实时通知，前端弹窗或徽章提示。
- 可视化联动
- 告警触发时，对应指标高亮或闪烁，BPMN 流程节点标注异常状态。
[本节为概念性说明，未直接分析具体文件，故无“章节来源”]
监控数据导出、报表生成与趋势分析
- 导出能力
- 基于表格组件与 Excel 导出工具，支持按时间范围与筛选条件导出。
- 报表生成
- 按日/周/月维度汇总流程实例数量、平均耗时、通过率等关键指标。
- 趋势分析
- 利用折线图展示指标随时间的变化，识别周期性波动与异常峰值。
[本节为概念性说明，未直接分析具体文件，故无“章节来源”]
依赖关系分析
- 前端组件依赖
- dashboard.vue 依赖全屏指令与日期格式化工具。
- le-chart.vue 依赖 ECharts 与 u-charts.js（小程序场景）。
- BPMN 渲染依赖 diagram-js 生态与自定义控制样式。
- 数据依赖
- 审计日志与流程日志表提供监控数据基础，用户与角色表支撑用户维度分析。
- 外部集成
- 后端工作流服务提供数据写入，前端通过接口拉取并轮询更新。
图表来源
- dashboard.vue:1-187
- dashboard-panel.vue:1-89
- dashboardLine.vue:1-207
- le-chart.vue:1-302
- index.vue:196-257
- task.vue:202-249
- workflow.sql:1-564
- u-charts.js:4955-5289
章节来源
- dashboard.vue:1-187
- dashboard-panel.vue:1-89
- dashboardLine.vue:1-207
- le-chart.vue:1-302
- index.vue:196-257
- task.vue:202-249
- workflow.sql:1-564
- u-charts.js:4955-5289
性能考量
- 图表渲染优化
- 控制图表更新频率，避免高频 setOption 导致重绘开销过大。
- 使用容器尺寸监听的节流策略，减少 resize 次数。
- 数据加载优化
- 分页与分段加载监控数据，避免一次性请求过多历史数据。
- 缓存常用配置与静态资源，降低网络与解析成本。
- 视觉与交互
- 合理使用渐变与阴影，避免过度渲染影响性能。
- 图例高亮/取消高亮采用 dispatchAction，避免全量重绘。
[本节为通用指导，未直接分析具体文件，故无“章节来源”]
故障排查指南
- 图表不显示或空白
- 检查容器尺寸是否为 0，确认 mounted 后已获取尺寸并触发 resize。
- 确认 ECharts 实例已初始化且 setOption 被调用。
- 时间显示异常
- 检查定时器是否正常运行，确认时间格式化函数可用。
- BPMN 高亮不生效
- 检查任务列表与流程元素匹配关系，确认节点 ID 与连线目标一致。
- 确认 Canvas 标记样式与流程定义版本一致。
- 数据缺失或延迟
- 核对后端工作流服务写入日志是否正常，检查数据库连接与权限。
- 确认前端轮询间隔与接口返回数据结构一致。
章节来源
结论
DeviceMate 工作流监控面板通过前端看板容器、图表封装与 BPMN 渲染，结合后端工作流审计与日志数据，实现了从状态监控到趋势分析的完整闭环。依托统一的数据模型与可扩展的组件体系，系统可在保证性能的前提下，持续迭代告警、报表与交互体验，满足生产现场对流程透明化与可视化的管理需求。
附录
- 图标资源：通过 iconfont.css 引入统一图标字体，便于在看板中使用状态、图表、设备等图标。
- 小程序图表：u-charts.js 提供移动端/小程序场景下的图表绘制能力，便于跨端复用。
章节来源