目标指标卡
执行次数843 次计划 1,050 次较前 7 日 减少 0.1%
计划 1,050 次80.3%
工作台总览与分析组件
目标指标、趋势、比较、关注列表、状态区间、帕累托与热力图的独立组件；由上层自由组合。
7 个规范与展示分区 · 独立组件页面
工作台总览与分析组件
逐个展示可独立接入的分析组件；数据、状态和交互各自独立，布局由使用场景组织。
目标指标卡 / Target Metric
展示单项数值、比较变化、迷你趋势与目标或预算占用。数量、达成率、合格率、OEE 和等待预算是此组件的数据变体。
| 规范 | 约定 |
|---|---|
| 输入 | label、value、description、values、target、ratio、delta |
| 数据规则 | values 为非负趋势数组；ratio 是占用或完成比例，允许超过 1，轨道视觉封顶但保留真实文本。降低等待预算占用才是改善。 |
| 状态与重试 | 独立支持 ready、stale、loading、empty、error；外部设置 element.state。失败重试发出 analysis-retry，由接入系统加载数据；接入后更新 element.data。页面演示仅切换本地状态。 |
| 组合规则 | 每个实例独立接收数据与状态；宽度由容器决定。多个组件联动由上层布局与数据层组织，不绑定固定工作台。 |
接入示例
const component = document.querySelector("ds-analysis-metric");
component.data = {label:"执行次数", value:"843 次", description:"计划 1,050 次", values:[100,120,110], target:"计划 1,050 次", ratio:0.803, delta:{text:"较前 7 日减少 0.1%",tone:"bad"}};
component.state = "ready";正式接入使用独立元素并设置 data；demo 属性仅用于本文档的本地数据和状态控件。
实际与计划趋势 / Actual vs Plan
独立双系列时序组件。折线与平滑曲线共用原始数据；键盘左右方向键、Home、End 浏览日期。
实际与计划趋势
实际计划单位：次
2026-09-25 · 实际 129 次 · 计划 150 次 · 达成率 86.0%
查看准确数据
| 日期 | 实际（次） | 计划（次） | 达成率 |
|---|---|---|---|
| 2026-09-25 | 129 | 150 | 86.0% |
| 2026-09-26 | 121 | 150 | 80.7% |
| 2026-09-27 | 114 | 150 | 76.0% |
| 2026-09-28 | 120 | 150 | 80.0% |
| 2026-09-29 | 118 | 150 | 78.7% |
| 2026-09-30 | 125 | 150 | 83.3% |
| 2026-10-01 | 116 | 150 | 77.3% |
本组件状态示例
| 规范 | 约定 |
|---|---|
| 输入 | items[{date,actual,plan}]、unit |
| 数据规则 | 日期使用 YYYY-MM-DD；按日期排序，日期不重复。实际与计划同单位；无计划基数需单独说明。样式切换保留当前日期。 |
| 状态与重试 | 独立支持 ready、stale、loading、empty、error；外部设置 element.state。失败重试发出 analysis-retry，由接入系统加载数据；接入后更新 element.data。页面演示仅切换本地状态。 |
| 组合规则 | 每个实例独立接收数据与状态；宽度由容器决定。多个组件联动由上层布局与数据层组织，不绑定固定工作台。 |
接入示例
const component = document.querySelector("ds-analysis-trend");
component.data = {unit:"次",items:[{date:"2026-10-01",actual:120,plan:150},{date:"2026-10-02",actual:140,plan:150}]};
component.state = "ready";正式接入使用独立元素并设置 data；demo 属性仅用于本文档的本地数据和状态控件。
对象分组与堆叠比较 / Object Comparison
按对象比较实际、计划和合格／成功数量。分组与堆叠是展示方式，组件不拥有全局筛选。
对象分组与堆叠比较
实际计划
查看准确数据
| 对象 | 实际（次） | 计划（次） | 不良／失败 |
|---|---|---|---|
| 报表生成 | 338 | 420 | 8 |
| 知识库问答 | 280 | 350 | 7 |
| 内容审核 | 225 | 280 | 7 |
本组件状态示例
| 规范 | 约定 |
|---|---|
| 输入 | items[{id,name,actual,plan,good}]、unit |
| 数据规则 | 数量非负，good 不大于 actual；失败数量由差额计算。分组比较实际与计划；堆叠比较成功与失败，并保留准确数据。 |
| 状态与重试 | 独立支持 ready、stale、loading、empty、error；外部设置 element.state。失败重试发出 analysis-retry，由接入系统加载数据；接入后更新 element.data。页面演示仅切换本地状态。 |
| 组合规则 | 每个实例独立接收数据与状态；宽度由容器决定。多个组件联动由上层布局与数据层组织，不绑定固定工作台。 |
接入示例
const component = document.querySelector("ds-analysis-comparison");
component.data = {unit:"次",items:[{id:"audit",name:"内容审核",actual:120,plan:150,good:118}]};
component.state = "ready";正式接入使用独立元素并设置 data；demo 属性仅用于本文档的本地数据和状态控件。
关注事项列表 / Attention List
业务提供需关注对象及说明；组件负责展示、明细展开和关闭。关注阈值不写死在组件中。
关注事项列表
示例关注规则：达成率低于 90%，或合格／成功率低于 98%。由业务计算关注项。
需关注内容审核达成率 80.4% · 合格／成功率 96.9%
需关注知识库问答达成率 80.0% · 合格／成功率 97.5%
需关注报表生成达成率 80.5% · 合格／成功率 97.6%
本组件状态示例
| 规范 | 约定 |
|---|---|
| 输入 | items[{id,name,description,rows?}]、rule、unit |
| 数据规则 | 唯一字符串 id 标识对象；rows 可选，提供 date、actual、plan、good、down。查看明细发出 analysis-detail，detail.id 供接入系统查询；无记录时不会伪造数据。 |
| 状态与重试 | 独立支持 ready、stale、loading、empty、error；外部设置 element.state。失败重试发出 analysis-retry，由接入系统加载数据；接入后更新 element.data。页面演示仅切换本地状态。 |
| 组合规则 | 每个实例独立接收数据与状态；宽度由容器决定。多个组件联动由上层布局与数据层组织，不绑定固定工作台。 |
接入示例
const component = document.querySelector("ds-analysis-attention");
component.data = {rule:"业务计算后的关注项",items:[{id:"audit",name:"内容审核",description:"达成率低于目标"}]};
component.state = "ready";正式接入使用独立元素并设置 data；demo 属性仅用于本文档的本地数据和状态控件。
状态区间分析 / Status Intervals
按对象展示运行、待机、暂停／停机、检查／维护的时间区间及状态占比。属于连续区间图，区别于事件／里程碑时间线。
状态区间分析
运行 87.3%待机 1.7%暂停 9.0%检查 2.1%
内容审核
知识库问答
报表生成
08:0012:0016:00
查看准确数据
| 对象 | 开始 | 结束 | 状态 |
|---|---|---|---|
| 内容审核 | 08:00 | 11:00 | 运行 |
| 内容审核 | 11:00 | 11:30 | 暂停 |
| 内容审核 | 11:30 | 11:38 | 待机 |
| 内容审核 | 11:38 | 15:50 | 运行 |
| 内容审核 | 15:50 | 16:00 | 检查 |
| 知识库问答 | 08:00 | 11:00 | 运行 |
| 知识库问答 | 11:00 | 11:43 | 暂停 |
| 知识库问答 | 11:43 | 11:51 | 待机 |
| 知识库问答 | 11:51 | 15:50 | 运行 |
| 知识库问答 | 15:50 | 16:00 | 检查 |
| 报表生成 | 08:00 | 11:00 | 运行 |
| 报表生成 | 11:00 | 11:56 | 暂停 |
| 报表生成 | 11:56 | 12:04 | 待机 |
| 报表生成 | 12:04 | 15:50 | 运行 |
| 报表生成 | 15:50 | 16:00 | 检查 |
本组件状态示例
| 规范 | 约定 |
|---|---|
| 输入 | items[{name,intervals}]、duration、startHour、manufacturing |
| 数据规则 | intervals 单位分钟，必须有序、无重叠且在 duration 内。state 为 running、idle、stopped、maintenance；未覆盖的区间保留空白，不推断为运行。 |
| 状态与重试 | 独立支持 ready、stale、loading、empty、error；外部设置 element.state。失败重试发出 analysis-retry，由接入系统加载数据；接入后更新 element.data。页面演示仅切换本地状态。 |
| 组合规则 | 每个实例独立接收数据与状态；宽度由容器决定。多个组件联动由上层布局与数据层组织，不绑定固定工作台。 |
接入示例
const component = document.querySelector("ds-analysis-timeline");
component.data = {duration:480,startHour:8,items:[{name:"内容审核",intervals:[{start:0,end:480,state:"running"}]}]};
component.state = "ready";正式接入使用独立元素并设置 data；demo 属性仅用于本文档的本地数据和状态控件。
损失原因帕累托分析 / Pareto
独立展示损失原因排序和累计占比；柱表示分钟，折线表示累计贡献，分别对应左右轴。
损失原因帕累托分析
累计损失时间（分钟）累计占比
查看准确数据
| 原因 | 损失时间（分钟） | 累计占比 |
|---|---|---|
| 等待复核 | 462 | 46.0% |
| 服务超时 | 281 | 73.9% |
| 输入缺失 | 180 | 91.8% |
| 结果检查 | 82 | 100.0% |
本组件状态示例
| 规范 | 约定 |
|---|---|
| 输入 | items[{name,value}] |
| 数据规则 | value 为真实非负损失分钟；按值排序并累计。零损失累计占比为零。页面示例按 46%／28%／18%／余量构造，不是组件内置的原因推断。 |
| 状态与重试 | 独立支持 ready、stale、loading、empty、error；外部设置 element.state。失败重试发出 analysis-retry，由接入系统加载数据；接入后更新 element.data。页面演示仅切换本地状态。 |
| 组合规则 | 每个实例独立接收数据与状态；宽度由容器决定。多个组件联动由上层布局与数据层组织，不绑定固定工作台。 |
接入示例
const component = document.querySelector("ds-analysis-pareto");
component.data = {items:[{name:"等待复核",value:46},{name:"服务超时",value:28},{name:"输入缺失",value:18},{name:"结果检查",value:8}]};
component.state = "ready";正式接入使用独立元素并设置 data；demo 属性仅用于本文档的本地数据和状态控件。
对象与日期热力图 / Attainment Heatmap
展示对象×日期达成率。颜色辅助比较，具体百分比与只读数据表保留准确值。
对象与日期热力图
对象 / 日期9/259/269/279/289/299/3010/1内容审核78%83%88%90%70%75%80%知识库问答84%90%68%72%78%82%86%报表生成93%72%75%80%85%90%68%
示例分档：低于 80.0%、80.0%–90.0%、达到 90.0%；— 表示缺测，不计作零。阈值由业务配置。
查看准确数据
| 对象 | 日期 | 达成率 |
|---|---|---|
| 内容审核 | 2026-09-25 | 77.5% |
| 内容审核 | 2026-09-26 | 82.5% |
| 内容审核 | 2026-09-27 | 87.5% |
| 内容审核 | 2026-09-28 | 90.0% |
| 内容审核 | 2026-09-29 | 70.0% |
| 内容审核 | 2026-09-30 | 75.0% |
| 内容审核 | 2026-10-01 | 80.0% |
| 知识库问答 | 2026-09-25 | 84.0% |
| 知识库问答 | 2026-09-26 | 90.0% |
| 知识库问答 | 2026-09-27 | 68.0% |
| 知识库问答 | 2026-09-28 | 72.0% |
| 知识库问答 | 2026-09-29 | 78.0% |
| 知识库问答 | 2026-09-30 | 82.0% |
| 知识库问答 | 2026-10-01 | 86.0% |
| 报表生成 | 2026-09-25 | 93.3% |
| 报表生成 | 2026-09-26 | 71.7% |
| 报表生成 | 2026-09-27 | 75.0% |
| 报表生成 | 2026-09-28 | 80.0% |
| 报表生成 | 2026-09-29 | 85.0% |
| 报表生成 | 2026-09-30 | 90.0% |
| 报表生成 | 2026-10-01 | 68.3% |
本组件状态示例
| 规范 | 约定 |
|---|---|
| 输入 | dates、groups[{id,name}]、cells[{group,date,value}]、thresholds |
| 数据规则 | value 为非负比例；缺少单元格或 value 为 null 表示缺测，显示“—”。轴与单元格不能重复，坐标须对应已知对象和日期；阈值由业务配置。 |
| 状态与重试 | 独立支持 ready、stale、loading、empty、error；外部设置 element.state。失败重试发出 analysis-retry，由接入系统加载数据；接入后更新 element.data。页面演示仅切换本地状态。 |
| 组合规则 | 每个实例独立接收数据与状态；宽度由容器决定。多个组件联动由上层布局与数据层组织，不绑定固定工作台。 |
接入示例
const component = document.querySelector("ds-analysis-heatmap");
component.data = {dates:["2026-10-01"],groups:[{id:"audit",name:"内容审核"}],cells:[{group:"audit",date:"2026-10-01",value:0.85}],thresholds:[0.8,0.9]};
component.state = "ready";正式接入使用独立元素并设置 data；demo 属性仅用于本文档的本地数据和状态控件。
工作台总览与分析组件
应用示例与相关组件