主题
2.3 左侧组件库
组件库顶部是标签页条,共 4 个固定标签页 加上若干 动态生成的图片库标签页。
2.3.1 基本组件
这是最常用的标签页,内部又折叠为 4 个子分组。
数据显示
| 组件 | 说明 |
|---|---|
| 文本 | 显示静态文字或绑定数据点动态显示数值 |
| 指示灯 | 按位状态点亮/熄灭,最常用的状态显示件 |
| 二维码 | 把文本内容实时编码成二维码 |
输入控件
| 组件 | 说明 |
|---|---|
| 按钮 | 点击后写入数据点、跳转画面、执行脚本 |
| 输入框 | 手动输入数值并下发到设备 |
| 开关 | 拨动式布尔量控制 |
图表
| 组件 | 说明 |
|---|---|
| 仪表盘 | 表盘式显示单个数值,可设量程与分段配色 |
| 饼图 | 多数据点占比 |
| 曲线 | 折线趋势图 |
| 柱状图 | 柱形对比 |
| 旭日图 | 多层级环形占比 |
| 树图 | 层级结构图 |
| 实时趋势 | 滚动刷新的实时曲线,不需要历史库 |
| 报警灯 | 按报警状态闪烁/变色指示 |
嵌入
| 组件 | 说明 |
|---|---|
| 图片 | 显示位图,可叠加文字 |
| 矢量图 | SVG 矢量图,可按数据点改颜色 |
| WEB框 | iframe 内嵌任意网页 |
| 视频 | 播放 HLS / FLV / MP4 视频流 |
| 流动管道 | 带流动动画的管道,用数据点控制流动方向与速度 |
| 天气 | 显示所在城市天气 |
| 内嵌画面 | 在当前画面中嵌入本工程的另一个画面 |
| 分屏视图 | 一屏同时显示 2–4 个画面,分隔条可拖动 |
| 3D模型 | 导入 glTF 模型并绑定数据点 |
2.3.2 绘制组件
多边形、绘制线、绘制矩形、绘制圆形、绘制椭圆。用来画背景框、分隔线、工艺流程底图。
2.3.3 其它组件
滑动输入、多选框、链接、实时表格、时间线。基于原生 HTML 控件实现,样式更贴近网页习惯。
2.3.4 定制组件
进度条、历史数据、设备、在线检测。
定制组件标签页会按账号做过滤,部分为特定客户专用组件,普通账号看不到。
2.3.5 图片库标签页
图片库标签页不是写死的,而是扫描前端 assets/svg/ 目录自动生成:目录下每个文件夹形成一个标签页(如「按钮」「管道」「建筑」等),标签按中文拼音排序。里面的图元直接拖到画布上即成为一个矢量图组件。
2.3.6 使用方式
- 点击标签页切换分类,基本组件下点击子分组标题展开/折叠
- 鼠标按住组件图标拖入画布
- 拖入后自动选中,可在右侧面板配置属性