指标 · 装饰 · 图标
指标 · 装饰 · 图标
强调关键数值、点缀科技氛围、承载图标语义的组件。
下表只列各组件特有的高频参数；通用参数见组件手册总览。完整全量选项以属性面板为准。
数字卡片 basic-card
KPI 指标卡：大号数值 + 单位（可配千分位 / 小数位 / 百分比 / 数字滚动动画）。绑一个数值字段即可数据驱动，是驾驶舱最常见的指标组件。默认尺寸 [220, 120]。
参数：
| option | 类型 | 默认 | 说明 |
|---|---|---|---|
static-value | number | 1024 | 示例数值（未绑数据时显示） |
decimal-places / complete-zero | number / boolean | 0 / true | 小数位数 / 末尾补零 |
comma-display | boolean | true | 千分位分隔 |
percentage-format | boolean | false | 按百分比显示 |
integer-digits | number | 0 | 整数位补零（如 007） |
text-font | font | {size:20,color:'#fff'} | 数值字体（支持渐变 / 发光 / 投影） |
unit-text / unit-font / unit-position / unit-gap | — | — | 单位文字、字体、位置（after / before）、间距 |
animation-display + animation-duration | boolean | false | 数字滚动动画（时长秒） |
| 三态样式 | show-click / show-hover / show-select | false | 点击 / 悬停 / 选中态的文字 / 背景 / 边框 |
数据绑定：value-field（number, 0~1）——绑字段显示其首行值。
{ "type": "basic-card", "uid": "w_kpi", "options": {
"position": [40, 40], "size": [260, 120],
"unit-text": "人", "comma-display": true,
"text-font": { "size": 44, "color": "#5cc8ff", "bold": true },
"value-field": [["conn_kpi", "tbl_kpi", "在线用户"]] } }翻牌器 basic-flipper
数字翻牌动画（机械翻页效果），适合累计量、大屏计数器。默认尺寸 [300, 100]。
参数：digit-length（显示位数）、flip-type（down / up）、flip-speed（翻转时长 ms）、digit-width / digit-height / digit-gap / digit-radius（单字尺寸 / 间距 / 圆角）、text-color / bg-color（数字色 / 卡片背景）。
数据绑定：value（number, 0~1）——绑数值字段随数据翻动（未绑时用 static-value）。
装饰边框 deco-border
科技感边框（流动描边 + 可选标题），套在区块外做视觉分区。默认尺寸 [320, 220]。纯装饰，常配 no-events（鼠标穿透）。
参数：main-color / accent-color（主 / 辅色）、panel-background（内衬背景）、anim-duration + flow-reverse（流动时长 / 反向）、border-title + border-title-size / border-title-color / border-title-width（标题文字与样式）。
装饰 deco-decoration
装饰线条 / 角标 / 图案等点缀元素（7 种预设 d01~d07），增强科技氛围。默认尺寸 [300, 100]。
参数：decoration-style（预设样式）、main-color / accent-color、anim-duration、deco-reverse（镜像）、deco-text + deco-text-size / deco-text-color（可选文字）。
流程管道 deco-pipeline
带流动效果的管道 / 连线装饰，示意流程或数据流向（纯视觉，工业工艺图请用组态 SCADA）。默认尺寸 [320, 80]。
参数：pipe-mode（pipe 直管 / branch 分支）、pipe-direction（横 / 竖）、pipe-color / flow-color（管壁 / 流体色）、flow-state（forward / stop / backward）+ flow-speed、branch-down / branch-up（分支数）、line-width。
图标 basic-icon
内置图标库中的图标，可配颜色 / 旋转 / 三态，支持数据驱动与 click 交互。默认尺寸 [120, 120]。
参数：icon（图标，属性面板图标库选取）、icon-color（颜色）、icon-rotate（0 / 90 / 180 / 270°）、三态 show-click / show-hover / show-select（各态换图标 / 颜色）。
数据绑定：relationship-field + relationship-value（按字段值判定选中态，做「按数据换图标 / 颜色」告警指示）。