TopStack 文档

主题

组件使用手册 ​

组件是一系列具有动态特性和交互特性的图元库。

使用方法如下：

步骤一：拖拽组件到图纸

  1. 在组态编辑器中，点击左侧面板的组件Tab。
  2. 在基础中，找到相应的组件，然后将该组件拖拽到中间画布。

步骤二：配置组件

  1. 配置样式：选中拖到画面中的组件，在右侧面板中，配置相应的样式。
  2. 配置数据绑定：样式中有多个配置项支持配置数据绑定。
  3. 配置动画
  4. 配置交互动作

大部分组件查看相应的样式列表就可以掌握使用方法，对于一些需要进行特殊说明的组件，请参考《组态编辑器组件使用说明》。

基础组件 ​

image.png

时钟 ​

用于显示当前的年月日时分秒信息，可以设置显示格式。

值显示 ​

值显示组件，可对显示数值类型的数据，可设置数值颜色和显示格式等属性。

趋势弹窗

值显示组件，绑定数值类型测点后，在运行状态下，双击该组件，可触发趋势弹窗，并将该测点显示到趋势弹窗中。

在编辑状态下，用户可以定义该测点在趋势弹窗中的网络名称和曲线名称（数据系列名称）。

image-20251103101233154

趋势弹窗的具体使用方法请参考《趋势弹窗》文档

值输出 ​

用来输出写入的数值，通过配置相应的输出变量实现控制参数下发。

图片 ​

用于插入图片资源，可以是 gif 格式的动态图。

iframe ​

iframe组件是网页设计中一个常见元素，主要用于将站点外的内容纳入页面中，外部站点iframe请连接网络后查看。

WARNING

iframe 组件的功能已经合并到子画面组件，v5.6 之后的版本请使用子画面组件。

html ​

用于插入 html 标签内容。

子画面 ​

用于嵌入其它图纸画面或页面。

image-20250305112241723

在子画面中显示图纸

将图纸拖到图元的访问地址输入框中。

在子画面中显示其它网页

直接在子画面图元的访问地址输入框中输入网页地址即可。

脚本方式修改子画面地址

javascript
var node = dm.getDataByTag('子画面的标签')
node.a('displayURL', 'displays/cq10fgkgj6lk4s4jvik0.json')

开关 ​

通过绑定开关变量，实现控制指令下发。 image.png

指示灯 ​

可用于显示状态变化，可通过绑定变量控制指示灯的颜色。 image.png

进度条 ​

可用于显示百分比或液位变化，支持水平和垂直方向切换。

进度指示器 ​

环形进行指示器，功能与进度条类似，主要用于显示百分比。

液位指示器 ​

水球形太的进度指示器，功能与进度条类似，可用于显示百分比或液位变化。

轮播图 ​

循环播放用户自定义的图片内容。

地图 ​

基于高德地图封装的控件，用于在图纸中显示地图，可设置多种地图主题风格。

表单 ​

image-20241118131244790

所有表单组件都有公共有【表单项】属性，如下图所示：

image-20241118134232059

【表单项】属性：

属性说明
表单名表单项名称，当通过脚本获取表单值时，表单项的【表单名】属于会被用作表单对象的字段名。
必填该表单项是否为必填项。
标签可见标签文本是否可见。
标签内容标签文本内容。
标签位置标签位置，可选值为 right（右）、left（左）、top（上）。
标签宽度
标签字体

按钮组 ​

用于单项选择，控件值对应的按钮处于高亮状态。

数据源 ​

JSON 数组，text 表示每个选项显示的文本、value 表示选项值。

json
[
  {
    "text": "选项1",
    "value": "1"
  },
  {
    "text": "选项2",
    "value": "2"
  },
  {
    "text": "选项3",
    "value": "3"
  }
]

控件值：表单项值，类型为用户选中的 value 。

复选框 ​

输入框 ​

用于文本输入和展示的表单组件。

类型：支持 Text、Number、Password。

值输出：通过关联输出点，实现输入值触发指令下发。

获取或设置输入框值：

javascript
var inputNode = dm.getDataByTag('输入框的标签')
// 获取输入框的值
var value = inputNode.a('value')
// 修改输入框的值
inputNode.a('value', 100)

文本域 ​

用于多行文本输入和展示的表单组件。 ​

获取或设置文本框值：同【输入框】。

控件值：表单项值，类型为用户输入的内容。

单选框 ​

用于单项选择按钮。

数据源

JSON 数组，text 表示每个选项显示的文本、value 表示选项值。

json
[
  {
    "text": "选项1",
    "value": "1"
  },
  {
    "text": "选项2",
    "value": "2"
  },
  {
    "text": "选项3",
    "value": "3"
  }
]

控件值：表单项值，类型为用户选中的 value 。

复选框 ​

用于多项选择按钮。

数据源

JSON 数组，text 表示每个选项显示的文本、value 表示选项值。

json
[
  {
    "text": "选项1",
    "value": "1"
  },
  {
    "text": "选项2",
    "value": "2"
  },
  {
    "text": "选项3",
    "value": "3"
  }
]

控件值：表单项值，类型为用户选中的 value 组成的数组。

选择框 ​

用于下拉选择列表。

数据源

JSON 数组，text 表示每个选项显示的文本、value 表示选项值。

json
[
  {
    "text": "选项1",
    "value": "1"
  },
  {
    "text": "选项2",
    "value": "2"
  },
  {
    "text": "选项3",
    "value": "3"
  }
]

控件值：表单项值，类型为用户选中的 value 。

开关按钮 ​

可用于显示【开关】状态，也可用于执行反控。

控件值：表单项值，类型布尔型，【开】状态为 true，【关】状态为 false。

输出变量：通过关联输出点，实现触发反控。

控制方式

  • 置1：将输出变量设置为 1。
  • 清0：将输出变量设置为 0。
  • 取反：如果控件值为 true，将输出变量设置为 0。如果控件值为 false，将输出变量设置为 1。
  • 按 1 松 0：鼠标按下时，将输出变量设置为 1；鼠标松开时，将输出变量设置为 0。
  • 按 0 松 1：鼠标按下时，将输出变量设置为 0；鼠标松开时，将输出变量设置为 1。

自定义图标

选中“自定义样式”，将图库中的相应元素分别拖到“合图标”和“分图标”，可设置不同状态下开关显示的图标。

image-20241118152102268

日期选择 ​

可用于选择日、周、月、日期时间、时间。

类型

  • date：日期选择，格式始终为 yyyy-mm-dd。
  • month：月选择，格式始终为 yyyy-mm。
  • week：周选择，格式为yyyy-mm-dd。
  • datetime: 日期时间，格式为 yyyy-mm-dd HH:MM，如果开启了称级支持，则格式为 yyyy-mm-dd HH:MM:ss
  • time: 时间，格式为 HH:MM，如果开启了称级支持，则格式为 HH:MM:ss

控件值：表单项值，类型为字符串，格式请取决于类型。

最大值：所接受最新的日期，格式请取决于类型。

最小值：所接受最早的日期，格式请取决于类型。

日期范围选择 ​

可用于选择日期时间范围。

类型

  • date：日期选择，格式始终为 yyyy-mm-dd。
  • month：月选择，格式始终为 yyyy-mm。
  • datetime: 日期时间，格式为 yyyy-mm-dd HH:MM，如果开启了称级支持，则格式为 yyyy-mm-dd HH:MM:ss

控件值：表单项值，类型为字符串数组，格式请取决于类型。

最大值：所接受最新的日期，格式请取决于类型。

最小值：所接受最早的日期，格式请取决于类型。

容器 ​

image-20251111100026760

边框容器 ​

可在上、下、左、右、中的五个区域位置摆放子组件。常用于页面的整体布局。

**使用方式：**将元素节点拖到容器中进行使用。

image-20251111115119377

盒容器 ​

布局吸附于容器的节点，可针对吸附的节点做相对于容器的水平以及垂直方向的布局。

**使用方式：**将元素节点拖到容器中进行使用。在右侧属性面板上可以设置节点的布局属性。

image-20251111115211356

水平盒 ​

水平盒用于对容器子元素进行水平布局。

**使用方式：**将元素节点拖到容器中进行使用。

image-20251111115307839

垂直盒 ​

垂直盒用于对容器内的子元素进行垂直布局。使用垂直盒容器，只需要将元素为容器的子元素即可。使用方式上与水平盒相同。

流式容器 ​

流式容器用于布局吸附于容器的节点，可针对吸附的节点按照顺序从左到右以及从上到下进行浮动布局。

**使用方式：**将元素节点拖到容器中进行使用。

image-20251111115349699

网格容器 ​

布局吸附于容器的节点，可针对吸附的节点按照节点所占的起始结束行以及起始结束列进行网格布局。

**使用方式：**将元素节点拖到容器中进行使用。

image-20251111115457850

分割容器 ​

布局吸附于容器的节点，用于左右或者上下分隔两个区域。

**使用方式：**将元素节点拖到容器中进行使用。

image-20251111114628198

标签页面板 ​

标签页组件主要用于不同面板的切换显示。

**使用方式：**将元素节点拖到容器中进行使用。

image-20251111114318211

文本 ​

image.png

文本盒 ​

用于多行文本显示，支持根据文本内容自动缩放显示，不启用自动绽放可以显示滚动条。

艺术字 ​

平台预置的特殊字体样式，用于展示标题等内容。

图表 ​

image.png

全局样式 ​

除【表格】外的所有图表组件，都具有相同的【全局样式】

image-20241118164246328

渲染模式

ECharts 支持两种渲染器：SVG 渲染器和 Canvas 渲染器。默认采用 SVG 渲染器。

自定义选项

【图表】组件基于 ECharts 实现，用户可以通过脚本方式对图表的 Option 参数进行自定义设置。如下图所示：

image-20241118171308654

标题 ​

可设置组件的标题内容、颜色、位置、字体等。

副标题可通过自定义选项，在脚本中进行设置：

javascript
option.title.subtext = '我是副标题'

image-20241118173540146

边距 ​

用于设置图表组件与容器上下左右边缘的距离。

image-20241118173247365

图例 ​

图例展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。

image-20241118173309119

提示信息 ​

用于设置如何在提示框中显示提示信息。

image-20241118173422529

折线图 ​

image.png 支持自定义、实时数据、历史数据 3 种数据源类型。实时数据和历史数据用于显示变量的实时曲线和历史曲线，支持多变量选择。自定义数据类型，由用户自己定义字段内容。

WARNING

注意 X 轴默认为类目轴，如果用户自定义数据内容对应 X 轴的字段为时间类库，需要手动修改 X 轴为时间轴。

柱状图 ​

image.png 支持自定义、实时数据 2 种数据源类型。实时数据用于显示变量的实时值，每个变量对应一个类目。自定义数据类型，由用户自己定义字段内容。 标签格式 当设置为标签可见时，可以自定义标签格式： image.png

标签格式模板变量有：

  • {a}：系列名。
  • {b}：数据名。
  • {c}：数据值。
  • {@xxx}：数据中名为 'xxx' 的维度的值，如 {@product} 表示名为 'product' 的维度的值。
  • {@[n]}：数据中维度 n 的值，如 {@[3]} 表示维度 3 的值，从 0 开始计数。

示例：'{b}: {@score}'

折线柱图 ​

image.png 只支持自定义格式的数据，每个数据系列可以单独设置图形类型（线状图或柱状图）。

水平柱图 ​

image.png 使用方式同折线柱图。需要注意的是 X 轴为数值轴，Y 轴为类目轴。

水平胶囊图 ​

image.png 使用方式用水平柱图。

散点图 ​

image.png 只支持自定义格式的数据，支持多个数据系列显示。

饼状图 ​

image.png 支持自定义、实时数据 2 种数据源类型。如果选择实时数据，每个点位值，对应一个数据项。

玫瑰图 ​

image.png 使用方式同饼状图。

环形柱图 ​

image.png 支持自定义、实时数据 2 种数据源类型。如果选择实时数据，每个点位值，对应一个数据项。

雷达图 ​

image.png 支持自定义、实时数据 2 种数据源类型。如果选择实时数据，每个点位值，对应一个数据项。

仪表盘 ​

image.png 支持单个数值显示，可直接绑定数据源。

媒体 ​

image.png

视频 ​

用于MP4、MOV、AVI等的视频文件的播放控件。

音频 ​

用于MP3、WAV ， FLAC等的音频文件的播放控件，可绑定变量控制播放启停。

FLV视频 ​

FLV 协议视频流播放控件。

HLS视频 ​

HLS 协议视频流播放控件。

RTSP视频 ​

RTSP 协议视频流播放控件。 image.png

CAUTION

播放 RTSP 协议视频流需要依赖 H5 流媒体转换服务，需要配置转换服务器地址和 RTSP 播放地址，具体使用方式请联系技术支持。