数据展示组件

用于数据列表、排名、进度等场景的展示组件。

MetricCard 指标卡片

用于展示单个关键指标，如总销售额、订单数等。

基础用法

:::demo

dashboard/metric-card-basic

:::

API

参数	说明	类型	默认值
label	指标名称	string	—
value	指标数值	number	—
unit	单位	string	''
icon	图标类名	string	''
trend	趋势（'up' | 'down'）	string	—
trendValue	趋势数值（如 +12.5）	number	—

---

ProgressTable 进度表格

用于展示多项任务的进度情况，如工单进度、项目进度。

基础用法

:::demo

dashboard/progress-table-basic

:::

API

参数	说明	类型	默认值
data	表格数据	ProgressItem[]	—
autoScroll	是否自动滚动	boolean	false
scrollSpeed	滚动速度（ms/行）	number	3000

ProgressItem 类型：

interface ProgressItem {
  name: string     // 项目名称
  progress: number // 进度百分比 (0-100)
  status?: string  // 状态文字（可选）
}

---

SegmentedBar 分段条形图

用于展示多段占比，如工单状态分布（待处理/处理中/已完成）。

基础用法

:::demo

dashboard/segmented-bar-basic

:::

API

参数	说明	类型	默认值
data	分段数据	LabeledValue[]	—
height	条形图高度	number	40
showLabels	是否显示标签	boolean	true

---

RankingList 排行榜

用于展示 Top N 排名，如销售排行、设备利用率排行。

基础用法

:::demo

dashboard/ranking-list-basic

:::

API

参数	说明	类型	默认值
data	排行数据	RankingItem[]	—
showMedals	是否显示前三名奖牌	boolean	true

RankingItem 类型：

interface RankingItem {
  name: string     // 名称
  value: number    // 数值
  unit?: string    // 单位（可选）
}

---

StatusTable 状态监测表

用于展示设备、订单等状态，支持某列按等级变色。

基础用法

:::demo

dashboard/status-table-basic

:::

API

参数	说明	类型	默认值
columns	表格列配置	TableColumn[]	—
data	表格数据	any[]	—
levelField	等级字段名（该列会根据值变色）	string	''
levelColors	等级颜色映射	Record<string, string>	{高:'danger', 中:'warning', 低:'info'}
autoScroll	是否自动滚动	boolean	false
scrollSpeed	滚动速度（ms/行）	number	3000

TableColumn 类型：

interface TableColumn {
  prop: string    // 字段名
  label: string   // 列标题
  width?: number  // 列宽（可选）
}

---

AlertCardList 告警卡片列表

用于展示实时告警信息，自动滚动。

基础用法

:::demo

dashboard/alert-card-list-basic

:::

API

参数	说明	类型	默认值
data	告警数据	AlertItem[]	—
autoScroll	是否自动滚动	boolean	true
scrollSpeed	滚动速度（ms/条）	number	3000

AlertItem 类型：

interface AlertItem {
  title: string              // 告警标题
  desc: string               // 详细描述
  time: string               // 时间
  level: 'high' | 'medium' | 'low'  // 等级
}

Events

事件名	说明	回调参数
click	点击某条告警时触发	(item: AlertItem)

---

使用建议

1. MetricCard — 适合仪表盘顶部四宫格指标展示，配合 grid 布局
2. ProgressTable — 工单、项目等需要展示多项进度的场景，建议 autoScroll 配合大屏使用
3. SegmentedBar — 适合单行多段占比，比 PieChart 更紧凑，适合列表中的嵌入式展示
4. RankingList — Top 5/Top 10 场景，showMedals 为前三名添加视觉焦点
5. StatusTable — 设备监控、订单状态等场景，levelField + levelColors 实现状态色高亮
6. AlertCardList — 实时告警流，建议固定高度容器 + autoScroll

自动滚动说明

ProgressTable、StatusTable、AlertCardList 都支持 autoScroll + scrollSpeed：

• 滚动基于 CSS transform: translateY() + transition，性能优于 DOM 操作
• 鼠标悬停时自动暂停
• scrollSpeed 单位为毫秒/行（或毫秒/条），数值越大滚动越慢
• 适合大屏场景，PC 管理页面建议关闭自动滚动