Skip to content

2.3 左侧组件库 ​

左侧组件库:4 个固定标签页加动态图片库,基本组件下再分数据显示/输入控件/图表/嵌入四个子分组

组件库顶部是标签页条,共 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 使用方式 ​

  1. 点击标签页切换分类,基本组件下点击子分组标题展开/折叠
  2. 鼠标按住组件图标拖入画布
  3. 拖入后自动选中,可在右侧面板配置属性

LPPLC 工业物联网云平台 · 软硬件与云平台全栈自研