用户界面 - 控件属性

参照版本： Web 3.7.3-250423001

简介

控件是图形页面的基本元素，是构成页面的主要内容。

这里会介绍控件的属性信息。

创建控件：可以在配置页面的左侧工具栏上选择对应控件，然后在画布上通过点击、拖动的方式添加到页面上。

页面

页面是控件的容器，页面之外的部分在运行时不会显示出来。

页面间可以相互切换、嵌套。

属性列表:

ID:
页面唯一标识，跳转页面时，用来指定跳转到哪个页面。
- 可以使用中文、英文、数字，符号只能使用减号、下划线。
- 不能设置为main。
标题:
页面标题，运行页面时，属性值会显示在浏览器标题栏或标签页上。
宽:
页面宽度
高:
页面高度
宽度自适应:
将页面拉伸到宽度与网页窗口宽度相同。
高度自适应:
将页面拉伸到高度与网页窗口高度相同。
字体:
设置控件下文字的字体。点击属性在弹出的 字体选择窗口 中选择字体。
背景颜色:
设置页面背景颜色
背景图片:
设置页面背景图片
图片大小:
用于背景图片大小和页面大小不匹配的情况，设置页面背景图片大小与页面大小的匹配方式。
可选值:
- 原大小:
  显示背景图片的原始尺寸。
- 覆盖:
  让图片覆盖页面，保持图片比例，图片可能显示不全。
- 适应:
  让页面容纳图片，保持图片比例，图片显示完整，但是可能没有完全覆盖页面。
- 拉伸:
  将图片拉伸到与页面大小相同，图片可能无法保持原比例。
图片重复:
当背景图片大小小于页面大小时，设置背景图片的重复方式。
可选项：水平和垂直、水平、垂直、不重复。
图片位置:
设置背景图片的位置。
可选项：上左、上中、上右、中左、居中、中右、下左、下中、下右。
默认报警提示:
页面是否显示默认报警提示
引入模块:
用来设置Import Maps，在这里引入模块后，可以在控件的加载事件中使用 import 语句导入模块并进行使用，例如Vue、three.js等第三方库可以使用这种方式引入。
在属性栏中点击该属性，会弹出一个配置窗口。
- 添加模块：
  1. 窗口左侧有一个列表，点击列表下面的 【+】 图标，输入模块名称，点击 【✔】 图标确认（快捷键 【Enter】），就添加了一个模块。
    - 模块的名称在需要使用该模块引入的时候会用到。
    - 可以添加多个模块，模块的名称不能重复。
    - 模块的名称只能包含字母、数字、下划线。
    - 修改模块名称 可以通过名称后面的 【修改图标】 按钮进行修改，或双击名称也可以进入编辑状态。
    - 删除模块 可以通过名称后面的 【删除图标】 按钮进行删除。
  2. 在列表的右侧可以编辑该模块的内容，直接输入即可。
    - 如果要引入Vue、three.js之类的第三方库，直接把 ES模块代码复制到这里就可以。
  3. 点击窗口右下角的 【确定】 按钮，完成模块的添加。
- 使用模块：
  在 加载执行 属性中可以使用 import 语句引入模块。
加载事件:
事件在 页面加载完成后 执行。点击属性在弹出的 代码编辑 窗口编写代码。
页面的加载事件是所有加载事件中 最先执行 的。但也要注意 import、await 等会让下面的代码等待的语句。
刷新周期:
设置页面所有 屏幕刷新 事件的执行周期。
点击事件:
事件在 控件被点击时 执行。点击属性在弹出的 代码编辑 窗口编写代码。

线

属性列表:

ID:
控件唯一标识，操作控件时，用来指定操作哪个控件。
- 可以使用中文、英文、数字，符号只能使用减号、下划线。
- 应该尽量保证页面中控件ID的唯一性，否则可能会导致无法准确操作控件。
X1: ID: x1 值类型: number
线控件的起始点X坐标位置
Y1: ID: y1 值类型: number
线控件的起始点Y坐标位置
X2: ID: x2 值类型: number
线控件的结束点X坐标位置
Y2: ID: y2 值类型: number
线控件的结束点Y坐标位置
线条颜色: ID: borderColor 值类型: string
线控件的颜色
线宽: ID: borderWidth 值类型: number
线控件的宽度
虚线间隔: ID: borderDash 值类型: number
控件的虚线间隔，默认为0，表示实线
起始标记: ID: markerStart 值类型: string
线控件开始位置使用哪种箭头样式
可选值:
- 无箭头: ID: none
  默认值
- 线箭头: ID: line
- 三角箭头: ID: triangle
- 反三角: ID: reversed_triangle
- 圆形箭头: ID: circle
- 菱形箭头: ID: diamond
结束标记: ID: markerEnd 值类型: string
线控件结束位置使用哪种箭头样式
可选值与起始标记相同
层级: ID: z 值类型: number
控件的层级，数字越大，层级越高，显示在越上层。默认为10，最小值为0，最大100。
隐藏: ID: hide 值类型: boolean
是否隐藏控件，只在运行时生效，在配置页面中不会生效。
加载事件:
事件在 页面加载完成后 执行。点击属性在弹出的 代码编辑 窗口编写代码。
屏幕刷新: ID: onRefresh 值类型: string | function
代码在页面加载完成后 重复执行，每隔一段时间执行一次。点击属性在弹出的 代码编辑 窗口编写代码。
- 每次执行的时间间隔，在控件所在页面的 刷新周期 属性中设置。
- 在执行完页面上所有的 加载事件 后开始定时执行。
点击事件: ID: onclick 值类型: string | function
事件在 控件被点击时 执行。点击属性在弹出的 代码编辑 窗口编写代码。

圆

属性列表:

ID:
控件唯一标识，操作控件时，用来指定操作哪个控件。
- 可以使用中文、英文、数字，符号只能使用减号、下划线。
- 应该尽量保证页面中控件ID的唯一性，否则可能会导致无法准确操作控件。
X: ID: x 值类型: number
控件的起始点X坐标位置
Y: ID: y 值类型: number
控件的起始点Y坐标位置
宽: ID: width 值类型: number
控件宽度
高: ID: height 值类型: number
控件高度
旋转: ID: rotate 值类型: number
控件旋转角度
填充颜色: ID: color 值类型: string
边框颜色: ID: borderColor 值类型: string
边框宽度: ID: borderWidth 值类型: number
虚线间隔: ID: borderDash 值类型: number
控件的虚线间隔，默认为0，表示实线
阴影: ID: shadow 值类型: string
给控件添加阴影效果。
点击属性会弹出设置窗口，辅助设置阴影属性。
- 可以设置阴影的 偏移量、模糊半径、颜色。
- 可以直接在属性中输入属性值。
层级: ID: z 值类型: number
控件的层级，数字越大，层级越高，显示在越上层。默认为10，最小值为0，最大100。
隐藏: ID: hide 值类型: boolean
是否隐藏控件，只在运行时生效，在配置页面中不会生效。
加载事件:
事件在 页面加载完成后 执行。点击属性在弹出的 代码编辑 窗口编写代码。
屏幕刷新: ID: onRefresh 值类型: string | function
代码在页面加载完成后 重复执行，每隔一段时间执行一次。点击属性在弹出的 代码编辑 窗口编写代码。
- 每次执行的时间间隔，在控件所在页面的 刷新周期 属性中设置。
- 在执行完页面上所有的 加载事件 后开始定时执行。
点击事件: ID: onclick 值类型: string | function
事件在 控件被点击时 执行。点击属性在弹出的 代码编辑 窗口编写代码。

三角形

属性列表:

ID:
控件唯一标识，操作控件时，用来指定操作哪个控件。
- 可以使用中文、英文、数字，符号只能使用减号、下划线。
- 应该尽量保证页面中控件ID的唯一性，否则可能会导致无法准确操作控件。
X: ID: x 值类型: number
控件的起始点X坐标位置
Y: ID: y 值类型: number
控件的起始点Y坐标位置
宽: ID: width 值类型: number
控件宽度
高: ID: height 值类型: number
控件高度
旋转: ID: rotate 值类型: number
控件旋转角度
填充颜色: ID: color 值类型: string
边框颜色: ID: borderColor 值类型: string
边框宽度: ID: borderWidth 值类型: number
虚线间隔: ID: borderDash 值类型: number
控件的虚线间隔，默认为0，表示实线
阴影: ID: shadow 值类型: string
给控件添加阴影效果。
点击属性会弹出设置窗口，辅助设置阴影属性。
- 可以设置阴影的 偏移量、模糊半径、颜色。
- 可以直接在属性中输入属性值。
层级: ID: z 值类型: number
控件的层级，数字越大，层级越高，显示在越上层。默认为10，最小值为0，最大100。
隐藏: ID: hide 值类型: boolean
是否隐藏控件，只在运行时生效，在配置页面中不会生效。
加载事件:
事件在 页面加载完成后 执行。点击属性在弹出的 代码编辑 窗口编写代码。
屏幕刷新: ID: onRefresh 值类型: string | function
代码在页面加载完成后 重复执行，每隔一段时间执行一次。点击属性在弹出的 代码编辑 窗口编写代码。
- 每次执行的时间间隔，在控件所在页面的 刷新周期 属性中设置。
- 在执行完页面上所有的 加载事件 后开始定时执行。
点击事件: ID: onclick 值类型: string | function
事件在 控件被点击时 执行。点击属性在弹出的 代码编辑 窗口编写代码。

矩形

属性列表:

ID:
控件唯一标识，操作控件时，用来指定操作哪个控件。
- 可以使用中文、英文、数字，符号只能使用减号、下划线。
- 应该尽量保证页面中控件ID的唯一性，否则可能会导致无法准确操作控件。
X: ID: x 值类型: number
控件的起始点X坐标位置
Y: ID: y 值类型: number
控件的起始点Y坐标位置
宽: ID: width 值类型: number
控件宽度
高: ID: height 值类型: number
控件高度
旋转: ID: rotate 值类型: number
控件旋转角度
圆角半径: ID: radius 值类型: number
填充颜色: ID: color 值类型: string
边框颜色: ID: borderColor 值类型: string
边框宽度: ID: borderWidth 值类型: number
虚线间隔: ID: borderDash 值类型: number
控件的虚线间隔，默认为0，表示实线
阴影: ID: shadow 值类型: string
给控件添加阴影效果。
点击属性会弹出设置窗口，辅助设置阴影属性。
- 可以设置阴影的 偏移量、模糊半径、颜色。
- 可以直接在属性中输入属性值。
层级: ID: z 值类型: number
控件的层级，数字越大，层级越高，显示在越上层。默认为10，最小值为0，最大100。
隐藏: ID: hide 值类型: boolean
是否隐藏控件，只在运行时生效，在配置页面中不会生效。
加载事件:
事件在 页面加载完成后 执行。点击属性在弹出的 代码编辑 窗口编写代码。
屏幕刷新: ID: onRefresh 值类型: string | function
代码在页面加载完成后 重复执行，每隔一段时间执行一次。点击属性在弹出的 代码编辑 窗口编写代码。
- 每次执行的时间间隔，在控件所在页面的 刷新周期 属性中设置。
- 在执行完页面上所有的 加载事件 后开始定时执行。
点击事件: ID: onclick 值类型: string | function
事件在 控件被点击时 执行。点击属性在弹出的 代码编辑 窗口编写代码。

图形

属性列表:

ID:
控件唯一标识，操作控件时，用来指定操作哪个控件。
- 可以使用中文、英文、数字，符号只能使用减号、下划线。
- 应该尽量保证页面中控件ID的唯一性，否则可能会导致无法准确操作控件。
X: ID: x 值类型: number
控件的起始点X坐标位置
Y: ID: y 值类型: number
控件的起始点Y坐标位置
宽: ID: width 值类型: number
控件宽度
高: ID: height 值类型: number
控件高度
旋转: ID: rotate 值类型: number
控件旋转角度
翻转: ID: flip 值类型: string
控件镜像翻转
可选值:
- 不翻转: ID: none
- 水平翻转: ID: horizontal
- 垂直翻转: ID: vertical
图形: ID: src 值类型: string
控件展示的图形。点击属性在弹出的 图形选择窗口 中选择要展示的图形。
填充颜色: ID: color 值类型: string
线条颜色: ID: borderColor 值类型: string
线条宽度: ID: borderWidth 值类型: number
溢出处理: ID: overflow 值类型: string
内容超出容器范围时的处理方式
可选值:
- 显示: ID: visible
  显示超出容器的部分
- 隐藏: ID: hidden
  隐藏超出容器的部分
层级: ID: z 值类型: number
控件的层级，数字越大，层级越高，显示在越上层。默认为10，最小值为0，最大100。
隐藏: ID: hide 值类型: boolean
是否隐藏控件，只在运行时生效，在配置页面中不会生效。

关联点: ID: linkPoint 值类型: string | object

关联一个数据点，让控件根据数据点的值进行变化。点击属性在弹出的 关联点 窗口中设置。

使用 setAttr 函数修改该属性值：

设置关联的数据点

javascript

setAttr('graph_0', 'linkPoint', 'API.TEST设备@YC1');

修改关联点的全部配置

javascript

setAttr('graph_0', 'linkPoint', {
    pointName: 'API.TEST设备@YC1',
    configList: [
        {
            value: '>100',
            src: 'more_than_100.svg',
            color: '#ff0000',
            borderColor: '#ff0000'
        },
        {
            value: '>50',
            src: 'more_than_50.svg',
            fillColor: '#00ff00',
            lineColor: '#00ff00'
        }
    ]
});

加载事件:
事件在 页面加载完成后 执行。点击属性在弹出的 代码编辑 窗口编写代码。
屏幕刷新: ID: onRefresh 值类型: string | function
代码在页面加载完成后 重复执行，每隔一段时间执行一次。点击属性在弹出的 代码编辑 窗口编写代码。
- 每次执行的时间间隔，在控件所在页面的 刷新周期 属性中设置。
- 在执行完页面上所有的 加载事件 后开始定时执行。
点击事件: ID: onclick 值类型: string | function
事件在 控件被点击时 执行。点击属性在弹出的 代码编辑 窗口编写代码。

文字

属性列表:

ID:
控件唯一标识，操作控件时，用来指定操作哪个控件。
- 可以使用中文、英文、数字，符号只能使用减号、下划线。
- 应该尽量保证页面中控件ID的唯一性，否则可能会导致无法准确操作控件。
X: ID: x 值类型: number
控件的起始点X坐标位置
Y: ID: y 值类型: number
控件的起始点Y坐标位置
宽: ID: width 值类型: number | "auto"
文字容器的宽度
高: ID: height 值类型: number | "auto"
文字容器的高度
文字: ID: value 值类型: string
显示的文字内容
前缀: ID: prefix 值类型: string
文字前缀内容，可以用来添加标识、单位或其他描述信息
后缀: ID: prefix 值类型: string
文字后缀内容，可以用来添加标识、单位或其他描述信息
小数位数: ID: decimalPlaces 值类型: number | null
如果控件显示文字内容为数字，会根据该属性设置，强制保留小数点，设置为null时不处理
溢出处理: ID: overflow 值类型: string
内容超出容器范围时的处理方式
可选值:
- 显示: ID: visible
  显示超出容器部分
- 隐藏: ID: hidden
  隐藏超出容器部分
- 自动滚动: ID: auto
  通过滚动的方式展示溢出部分，超出容器范围时显示滚动条，没有超出时不显示
- 滚动: ID: scroll
  通过滚动的方式展示溢出部分，始终显示滚动条
字体: ID: font 值类型: object
设置控件下文字的字体。点击属性在弹出的 字体选择窗口 中选择字体。
字号: ID: size 值类型: number
粗体: ID: bold 值类型: boolean
行高: ID: lineHeight 值类型: number
文字高度
字符间距: ID: letterSpacing 值类型: number | null
字符的间距，单位是字号的倍率，例如：设置为1表示一个字号的间距
文字对齐: ID: align 值类型: string
文字对齐方式，设置了宽度后生效
可选值:
- 左对齐: ID: left
- 右对齐: ID: right
- 居中对齐: ID: center
方向: ID: direction 值类型: string
文字排列方向
可选值:
- 横向: ID: horizontal-tb
  从左到右，横向显示文字
- 纵向: ID: vertical-rl
  从上到下，综向显示文字
文字颜色: ID: color 值类型: string
阴影: ID: shadow 值类型: string
给控件添加阴影效果。
点击属性会弹出设置窗口，辅助设置阴影属性。
- 可以设置阴影的 偏移量、模糊半径、颜色。
- 可以直接在属性中输入属性值。
层级: ID: z 值类型: number
控件的层级，数字越大，层级越高，显示在越上层。默认为10，最小值为0，最大100。
隐藏: ID: hide 值类型: boolean
是否隐藏控件，只在运行时生效，在配置页面中不会生效。
关联点: ID: linkPoint 值类型: string
可以设置一个点名，运行时，控件会显示该点的实时值。
- 点击属性栏中该属性右侧的 【图标】 按钮，可以在列表中选点。
加载事件:
事件在 页面加载完成后 执行。点击属性在弹出的 代码编辑 窗口编写代码。
屏幕刷新: ID: onRefresh 值类型: string | function
代码在页面加载完成后 重复执行，每隔一段时间执行一次。点击属性在弹出的 代码编辑 窗口编写代码。
- 每次执行的时间间隔，在控件所在页面的 刷新周期 属性中设置。
- 在执行完页面上所有的 加载事件 后开始定时执行。
点击事件: ID: onclick 值类型: string | function
事件在 控件被点击时 执行。点击属性在弹出的 代码编辑 窗口编写代码。

图片

选择图片工具后，会弹出 图片选择窗口，选择要展示的图片。

选择完成后会在画布显示区域的左上角创建一个图片控件。

图片的右键菜单中会有一个 原始大小 的选项，可以将图片控件的宽高还原为原始图片宽高。

属性列表:

ID:
控件唯一标识，操作控件时，用来指定操作哪个控件。
- 可以使用中文、英文、数字，符号只能使用减号、下划线。
- 应该尽量保证页面中控件ID的唯一性，否则可能会导致无法准确操作控件。
X: ID: x 值类型: number
控件的起始点X坐标位置
Y: ID: y 值类型: number
控件的起始点Y坐标位置
宽: ID: width 值类型: number
控件宽度
高: ID: height 值类型: number
控件高度
旋转: ID: rotate 值类型: number
控件旋转角度
翻转: ID: flip 值类型: string
控件镜像翻转
可选值:
- 不翻转: ID: none
- 水平翻转: ID: horizontal
- 垂直翻转: ID: vertical
图片: ID: src 值类型: string
控件展示的图片。点击属性在弹出的 图片选择窗口 中选择要展示的图片。
层级: ID: z 值类型: number
控件的层级，数字越大，层级越高，显示在越上层。默认为10，最小值为0，最大100。
隐藏: ID: hide 值类型: boolean
是否隐藏控件，只在运行时生效，在配置页面中不会生效。

关联点: ID: linkPoint 值类型: string | object

关联一个数据点，让控件根据数据点的值进行变化。点击属性在弹出的 关联点 窗口中设置。

使用 setAttr 函数修改该属性值：

设置关联的数据点

javascript

setAttr('img_0', 'linkPoint', 'API.TEST设备@YC1');

修改关联点的全部配置

javascript

setAttr('img_0', 'linkPoint', {
    pointName: 'API.TEST设备@YC1',
    configList: [
        {
            value: '>100',
            src: 'more_than_100.svg'
        },
        {
            value: '>50',
            src: 'more_than_50.svg'
        }
    ]
});

加载事件:
事件在 页面加载完成后 执行。点击属性在弹出的 代码编辑 窗口编写代码。
屏幕刷新: ID: onRefresh 值类型: string | function
代码在页面加载完成后 重复执行，每隔一段时间执行一次。点击属性在弹出的 代码编辑 窗口编写代码。
- 每次执行的时间间隔，在控件所在页面的 刷新周期 属性中设置。
- 在执行完页面上所有的 加载事件 后开始定时执行。
点击事件: ID: onclick 值类型: string | function
事件在 控件被点击时 执行。点击属性在弹出的 代码编辑 窗口编写代码。

输入框

属性列表:

ID:
控件唯一标识，操作控件时，用来指定操作哪个控件。
- 可以使用中文、英文、数字，符号只能使用减号、下划线。
- 应该尽量保证页面中控件ID的唯一性，否则可能会导致无法准确操作控件。
X: ID: x 值类型: number
控件的起始点X坐标位置
Y: ID: y 值类型: number
控件的起始点Y坐标位置
宽: ID: width 值类型: number
控件宽度
高: ID: height 值类型: number
控件高度
圆角半径: ID: radius 值类型: number
输入类型: ID: type 值类型: string
可选值:
- 文字: ID: text
  单行的文本
- 数字: ID: number
  用来输入数字
- 密码: ID: password
  单行的文本，输入的内容不会显示出来
- 日期: ID: wk_date
  输入日期，日期格式： YYYY-MM-DD
- 时间: ID: wk_time
  输入时间，时间格式： HH:mm:ss
- 日期时间: ID: wk_datetime
  输入日期时间，日期时间格式： YYYY-MM-DD HH:mm:ss
- 点名: ID: wk_point
  输入数据点名，可以在弹出的窗口中选择点名
- 点名（历史）: ID: wk_pointHistory
  输入数据点名，可以在弹出的窗口中选择点名，但只能选择配置了数据存储的点名
- 点名（报警）: ID: wk_pointAlert
  输入数据点名，可以在弹出的窗口中选择点名，但只能选择配置了报警的点名
值: ID: value 值类型: string
输入框中的内容
提示: ID: placeholder 值类型: string
输入内容为空时，显示的提示文字
字体: ID: font 值类型: object
设置控件下文字的字体。点击属性在弹出的 字体选择窗口 中选择字体。
字号: ID: size 值类型: number
文字颜色: ID: color 值类型: string
边框颜色: ID: borderColor 值类型: string
边框宽度: ID: borderWidth 值类型: number
背景颜色: ID: backgroundColor 值类型: string
层级: ID: z 值类型: number
控件的层级，数字越大，层级越高，显示在越上层。默认为10，最小值为0，最大100。
隐藏: ID: hide 值类型: boolean
是否隐藏控件，只在运行时生效，在配置页面中不会生效。
加载事件:
事件在 页面加载完成后 执行。点击属性在弹出的 代码编辑 窗口编写代码。
屏幕刷新: ID: onRefresh 值类型: string | function
代码在页面加载完成后 重复执行，每隔一段时间执行一次。点击属性在弹出的 代码编辑 窗口编写代码。
- 每次执行的时间间隔，在控件所在页面的 刷新周期 属性中设置。
- 在执行完页面上所有的 加载事件 后开始定时执行。
点击事件: ID: onclick 值类型: string | function
事件在 控件被点击时 执行。点击属性在弹出的 代码编辑 窗口编写代码。
修改事件: ID: onchange 值类型: string | function
事件在 控件值被修改时 执行。点击属性在弹出的 代码编辑 窗口编写代码。

下拉菜单

属性列表:

ID:
控件唯一标识，操作控件时，用来指定操作哪个控件。
- 可以使用中文、英文、数字，符号只能使用减号、下划线。
- 应该尽量保证页面中控件ID的唯一性，否则可能会导致无法准确操作控件。
X: ID: x 值类型: number
控件的起始点X坐标位置
Y: ID: y 值类型: number
控件的起始点Y坐标位置
宽: ID: width 值类型: number
控件宽度
高: ID: height 值类型: number
控件高度
圆角半径: ID: radius 值类型: number
选项: ID: options 值类型: Array<string>
供用户选择的选项
值: ID: value 值类型: string
选择的值，值必须在选项中存在，否则不会生效
字体: ID: font 值类型: object
设置控件下文字的字体。点击属性在弹出的 字体选择窗口 中选择字体。
字号: ID: size 值类型: number
文字颜色: ID: color 值类型: string
边框颜色: ID: borderColor 值类型: string
边框宽度: ID: borderWidth 值类型: number
背景颜色: ID: backgroundColor 值类型: string
层级: ID: z 值类型: number
控件的层级，数字越大，层级越高，显示在越上层。默认为10，最小值为0，最大100。
隐藏: ID: hide 值类型: boolean
是否隐藏控件，只在运行时生效，在配置页面中不会生效。
加载事件:
事件在 页面加载完成后 执行。点击属性在弹出的 代码编辑 窗口编写代码。
屏幕刷新: ID: onRefresh 值类型: string | function
代码在页面加载完成后 重复执行，每隔一段时间执行一次。点击属性在弹出的 代码编辑 窗口编写代码。
- 每次执行的时间间隔，在控件所在页面的 刷新周期 属性中设置。
- 在执行完页面上所有的 加载事件 后开始定时执行。
点击事件: ID: onclick 值类型: string | function
事件在 控件被点击时 执行。点击属性在弹出的 代码编辑 窗口编写代码。
修改事件: ID: onchange 值类型: string | function
事件在 控件值被修改时 执行。点击属性在弹出的 代码编辑 窗口编写代码。

复选框

属性列表:

ID:
控件唯一标识，操作控件时，用来指定操作哪个控件。
- 可以使用中文、英文、数字，符号只能使用减号、下划线。
- 应该尽量保证页面中控件ID的唯一性，否则可能会导致无法准确操作控件。
X: ID: x 值类型: number
控件的起始点X坐标位置
Y: ID: y 值类型: number
控件的起始点Y坐标位置
宽: ID: width 值类型: number
控件宽度
值: ID: value 值类型: boolean
控件勾选状态
层级: ID: z 值类型: number
控件的层级，数字越大，层级越高，显示在越上层。默认为10，最小值为0，最大100。
隐藏: ID: hide 值类型: boolean
是否隐藏控件，只在运行时生效，在配置页面中不会生效。
加载事件:
事件在 页面加载完成后 执行。点击属性在弹出的 代码编辑 窗口编写代码。
屏幕刷新: ID: onRefresh 值类型: string | function
代码在页面加载完成后 重复执行，每隔一段时间执行一次。点击属性在弹出的 代码编辑 窗口编写代码。
- 每次执行的时间间隔，在控件所在页面的 刷新周期 属性中设置。
- 在执行完页面上所有的 加载事件 后开始定时执行。
点击事件: ID: onclick 值类型: string | function
事件在 控件被点击时 执行。点击属性在弹出的 代码编辑 窗口编写代码。
修改事件: ID: onchange 值类型: string | function
事件在 控件值被修改时 执行。点击属性在弹出的 代码编辑 窗口编写代码。

单选框

属性列表:

ID:
控件唯一标识，操作控件时，用来指定操作哪个控件。
- 可以使用中文、英文、数字，符号只能使用减号、下划线。
- 应该尽量保证页面中控件ID的唯一性，否则可能会导致无法准确操作控件。
X: ID: x 值类型: number
控件的起始点X坐标位置
Y: ID: y 值类型: number
控件的起始点Y坐标位置
宽: ID: width 值类型: number
控件宽度
组: ID: group 值类型: string
用来给单选框控件分组，组属性值相同的单选框只能选中其中一个，选中一个，其他同组控件会自动取消勾选。
值: ID: value 值类型: boolean
控件勾选状态
层级: ID: z 值类型: number
控件的层级，数字越大，层级越高，显示在越上层。默认为10，最小值为0，最大100。
隐藏: ID: hide 值类型: boolean
是否隐藏控件，只在运行时生效，在配置页面中不会生效。
加载事件:
事件在 页面加载完成后 执行。点击属性在弹出的 代码编辑 窗口编写代码。
屏幕刷新: ID: onRefresh 值类型: string | function
代码在页面加载完成后 重复执行，每隔一段时间执行一次。点击属性在弹出的 代码编辑 窗口编写代码。
- 每次执行的时间间隔，在控件所在页面的 刷新周期 属性中设置。
- 在执行完页面上所有的 加载事件 后开始定时执行。
点击事件: ID: onclick 值类型: string | function
事件在 控件被点击时 执行。点击属性在弹出的 代码编辑 窗口编写代码。
修改事件: ID: onchange 值类型: string | function
事件在 控件值被修改时 执行。点击属性在弹出的 代码编辑 窗口编写代码。

按钮

属性列表:

ID:
控件唯一标识，操作控件时，用来指定操作哪个控件。
- 可以使用中文、英文、数字，符号只能使用减号、下划线。
- 应该尽量保证页面中控件ID的唯一性，否则可能会导致无法准确操作控件。
X: ID: x 值类型: number
控件的起始点X坐标位置
Y: ID: y 值类型: number
控件的起始点Y坐标位置
宽: ID: width 值类型: number
控件宽度
高: ID: height 值类型: number
控件高度
圆角半径: ID: radius 值类型: number
主题: ID: theme 值类型: string
预设的几种按钮样式供选择。修改后，按钮的颜色、边框颜色、背景颜色属性会发生变化。
可选值:
- 默认: ID: default
- 普通: ID: btn-primary
- 成功: ID: btn-success
- 一般: ID: btn-info
- 警告: ID: btn-warning
- 危险: ID: btn-danger
- 链接: ID: btn-link
文字: ID: value 值类型: string
按钮上显示的文字内容
字体: ID: font 值类型: object
设置控件下文字的字体。点击属性在弹出的 字体选择窗口 中选择字体。
字号: ID: size 值类型: number
文字颜色: ID: color 值类型: string
边框颜色: ID: borderColor 值类型: string
边框宽度: ID: borderWidth 值类型: number
背景颜色: ID: backgroundColor 值类型: string
层级: ID: z 值类型: number
控件的层级，数字越大，层级越高，显示在越上层。默认为10，最小值为0，最大100。
隐藏: ID: hide 值类型: boolean
是否隐藏控件，只在运行时生效，在配置页面中不会生效。
加载事件:
事件在 页面加载完成后 执行。点击属性在弹出的 代码编辑 窗口编写代码。
屏幕刷新: ID: onRefresh 值类型: string | function
代码在页面加载完成后 重复执行，每隔一段时间执行一次。点击属性在弹出的 代码编辑 窗口编写代码。
- 每次执行的时间间隔，在控件所在页面的 刷新周期 属性中设置。
- 在执行完页面上所有的 加载事件 后开始定时执行。
点击事件: ID: onclick 值类型: string | function
事件在 控件被点击时 执行。点击属性在弹出的 代码编辑 窗口编写代码。

表格

属性列表:

ID:
控件唯一标识，操作控件时，用来指定操作哪个控件。
- 可以使用中文、英文、数字，符号只能使用减号、下划线。
- 应该尽量保证页面中控件ID的唯一性，否则可能会导致无法准确操作控件。
X: ID: x 值类型: number
控件的起始点X坐标位置
Y: ID: y 值类型: number
控件的起始点Y坐标位置
宽: ID: width 值类型: number
控件宽度
高: ID: height 值类型: number
控件高度
背景颜色: ID: backgroundColor 值类型: string
行数: ID: row 值类型: number
列数: ID: col 值类型: number
固定表头行数: ID: fixTop 值类型: number
将表格的前几行固定在表格顶部，滚动表格时，固定行始终显示在顶部
固定表尾行数: ID: fixBottom 值类型: number
将表格的后几行固定在表格底部，滚动表格时，固定行始终显示在底部
固定左侧列数: ID: fixLeft 值类型: number
将表格的前几列固定在表格左侧，横向滚动表格时，固定列始终显示在左测。
效率较低，表格单元格较多时慎用。
固定右侧列数: ID: fixRight 值类型: number
将表格的后几列固定在表格右侧，横向滚动表格时，固定列始终显示在右测。
效率较低，表格单元格较多时慎用。
列宽: ID: colWidths 值类型: Array<number | string> | null
设置表格各列的列宽
可以设置一个各列的宽度列表，第一个值对应第一列，第二个值对应第二列，以此类推。
这里设置的列宽实际上是列的最小宽度，如果设置完成后表格还有空白区域，系统会根据设置值保持比例将剩余宽度分配给各列。
- 例如：如果表格整体宽度为900，有两列，列宽设置为[100,200]，则第一列宽度为100，第二列宽度为200，剩余600的宽度会按照1:2的比例分配给两列，实际第一列宽度为300，第二列宽度为600。
如果设置的列宽数少于表格列数，系统会根据设置值重复设置列宽。
- 例如：设置为[100,200,300]，则第一列宽度为100，第二列宽度为200，第三列宽度为300，第四列宽度为100，第五列宽度为200，以此类推。
还可以在宽度前面加上loop关键字，表示循环设置列宽。
- 例如：设置为[100,200,"loop 50",100]，表示第一列宽度为100，第二列宽度为200，中间部分列宽度为50，最后一列宽度为100。
loop关键字可以连续使用，表格中间部分重复设置列宽。
- 例如：设置为[200,"loop 50","loop 100",300]，表示第一列宽度为200，第二列宽度为50，第三列宽度为100，第四列宽度为50，第五列宽度为100，以此类推，然后最后一列宽度为300。
不设置时，系统会根据表格内容自动调整列宽。
字体: ID: font 值类型: object
设置控件下文字的字体。点击属性在弹出的 字体选择窗口 中选择字体。
层级: ID: z 值类型: number
控件的层级，数字越大，层级越高，显示在越上层。默认为10，最小值为0，最大100。
隐藏: ID: hide 值类型: boolean
是否隐藏控件，只在运行时生效，在配置页面中不会生效。
关联点: ID: linkPoint 值类型: string
可以关联 历史数据、报警数据、实时数据、用户日志 信息，将其显示在表格中。
点击属性，会弹出配置窗口，窗口左侧可以配置相关配置，右侧可以预览大概效果。
- 关联点：可以设置成这几种形式：点全名、通道名称、通道名称.链接名称、通道名称.链接名称.设备名称、通道名称.设备名称。并且可以设置多个，用逗号分隔。
  点全名表示特定点，其他的方式表示关联它下面的所有点。
- 开始时间、结束时间：可以设置为固定的时间点，也可以使用占位符表示当前时间。例如：YYYY-MM-DD 00:00:00 表示当天的 00:00:00 时间点。
关联后，运行时会显示关联的数据。单元格会继承表格原有单元格的大部分属性值，如字体、颜色、对齐方式等，如果某位置没有预设的单元格，会寻找相邻位置的单元格并继承它的样式。
加载事件:
事件在 页面加载完成后 执行。点击属性在弹出的 代码编辑 窗口编写代码。
屏幕刷新: ID: onRefresh 值类型: string | function
代码在页面加载完成后 重复执行，每隔一段时间执行一次。点击属性在弹出的 代码编辑 窗口编写代码。
- 每次执行的时间间隔，在控件所在页面的 刷新周期 属性中设置。
- 在执行完页面上所有的 加载事件 后开始定时执行。
点击事件: ID: onclick 值类型: string | function
事件在 控件被点击时 执行。点击属性在弹出的 代码编辑 窗口编写代码。

单元格

属性列表:

ID:
控件唯一标识，操作控件时，用来指定操作哪个控件。
- 可以使用中文、英文、数字，符号只能使用减号、下划线。
- 应该尽量保证页面中控件ID的唯一性，否则可能会导致无法准确操作控件。
列跨度: ID: colSpan 值类型: number
单元格向后合并的列数
行跨度: ID: rowSpan 值类型: number
单元格向下合并的行数
文字: ID: value 值类型: string
小数位数: ID: decimalPlaces 值类型: number | null
如果控件显示文字内容为数字，会根据该属性设置，强制保留小数点，设置为null时不处理
字体: ID: font 值类型: object
设置控件下文字的字体。点击属性在弹出的 字体选择窗口 中选择字体。
字号: ID: size 值类型: number
粗体: ID: bold 值类型: boolean
行高: ID: lineHeight 值类型: number
文字高度，单位是字号的倍率，例如：设置为1表示一个字号的高度
字符间距: ID: letterSpacing 值类型: number | null
字符的间距，单位是字号的倍率，例如：设置为1表示一个字号的间距
文字对齐: ID: align 值类型: string
文字水平方向对齐方式
可选值:
- 左对齐: ID: left
- 右对齐: ID: right
- 居中对齐: ID: center
垂直对齐: ID: verticalAlign 值类型: string
文字垂直方向对齐方式
可选值:
- 顶对齐: ID: top
- 底对齐: ID: bottom
- 居中对齐: ID: middle
文字颜色: ID: color 值类型: string
背景颜色: ID: backgroundColor 值类型: string
边框颜色: ID: borderColor 值类型: string
边框宽度: ID: borderWidth 值类型: number
边框样式: ID: borderStyle 值类型: string
可选值:
- 实线: ID: solid
- 虚线: ID: dashed
- 双线: ID: double
关联点: ID: linkPoint 值类型: string
可以设置一个点名，运行时，控件会显示该点的实时值。
- 点击属性栏中该属性右侧的 【图标】 按钮，可以在列表中选点。
加载事件:
事件在 页面加载完成后 执行。点击属性在弹出的 代码编辑 窗口编写代码。
屏幕刷新: ID: onRefresh 值类型: string | function
代码在页面加载完成后 重复执行，每隔一段时间执行一次。点击属性在弹出的 代码编辑 窗口编写代码。
- 每次执行的时间间隔，在控件所在页面的 刷新周期 属性中设置。
- 在执行完页面上所有的 加载事件 后开始定时执行。
点击事件: ID: onclick 值类型: string | function
事件在 控件被点击时 执行。点击属性在弹出的 代码编辑 窗口编写代码。

图表

属性列表:

ID:
控件唯一标识，操作控件时，用来指定操作哪个控件。
- 可以使用中文、英文、数字，符号只能使用减号、下划线。
- 应该尽量保证页面中控件ID的唯一性，否则可能会导致无法准确操作控件。
X: ID: x 值类型: number
控件的起始点X坐标位置
Y: ID: y 值类型: number
控件的起始点Y坐标位置
宽: ID: width 值类型: number
控件宽度
高: ID: height 值类型: number
控件高度
主题: ID: theme 值类型: string
预设的几种图表样式供选择。修改后，图表的部分属性值会发生变化。
可选值:
- 普通: ID: normal
- 复古: ID: vintage
- 深色: ID: dark
- 维斯特洛: ID: westeros
- 厄斯索斯: ID: essos
- 仙境: ID: wonderland
- 瓦尔登: ID: walden
- 粉笔: ID: chalk
- 信息图表: ID: infographic
- 马卡龙: ID: macarons
- 罗马: ID: roma
- 闪耀: ID: shine
- 紫色热情: ID: purple_passion
标题: ID: colors 值类型: object
可以设置图表标题、副标题的内容、样式和位置。
图例: ID: legend 值类型: object
主要用来展示不同数据组的标记、颜色和名称。可以通过点击图例控制哪些组的数据不显示。
可以设置是否显示图例、图例文字样式、图例位置、横向排列还是纵向排列、溢出处理方式（图例较多、一行无法完全显示时，换行显示还是滚动翻页）。
提示框: ID: tooltip 值类型: object
用户鼠标放到图形上时，通过提示框显示数据的详细信息。
可以设置是否显示提示框、提示框样式、文字样式、轴指示器样式。
- 轴指示器：是用户将鼠标放到图形上时，用来反馈用户当前鼠标位置在哪写数据上的提示。
工具栏: ID: toolbox 值类型: object
可以在图表上显示一些工具，包括区域缩放、类型切换、数据视图、存为图片。
- 区域缩放：使用该工具可以选择只显示图表的一部分数据。
- 类型切换：该工具可以将图表切换为折线图或柱状图，也可以将同项数据堆叠显示。
- 数据视图：显示当前图表的数据。
- 存为图片：将图表显示内容保存为图片。
可以设置显示哪些工具、工具图标水平排列还是垂直排列、显示位置、工具图标的样式。
图表位置: ID: grid 值类型: object
可以设置图表主体部分与控件边缘的间距。支持百分比值。
交换XY: ID: exchangeXY 值类型: boolean
可以交换X轴和Y轴的位置，可以将柱形图转换为条形图。
X轴: ID: xAxis 值类型: object
可以设置X轴的类型、名称、两侧是否留白、最大值、最小值、轴线样式、轴线刻度样式、轴线刻度标签样式、分割线样式、分隔区域样式、区域缩放样式。
- 类型：目前有两种类型：类目轴、时间轴。
  - 类目轴：适用于离散的类目数据，可以将轴的值设置为任何字符串。
  - 时间轴：适用于连续的时序数据，需要将轴的值设置为时间戳或者时间字符串（例： '2025-04-01 00:00:00'）。
- 两侧留白：留白主要适用于柱状图，折线图适合不留白，按需设置。
- 分割线、分隔区域：用来更清楚的划分轴的区域。
- 区域缩放：可以设置是否允许用户缩放当前轴。
  - 允许通过鼠标缩放：是否允许用户通过鼠标拖拽、鼠标滚轮、手指滑动（触屏上）来缩放或漫游坐标系。
  - 允许通过控件缩放：勾选后会显示缩放控件，用户可以通过控件来缩放、调整坐标系。
  - 起始值、结束值：图表默认缩放的起始值和结束值。
  - 控件样式：用来设置缩放控件的样式和位置。
Y轴: ID: yAxis 值类型: object
可以设置Y轴的类型、名称、名称样式、最大值、最小值、轴线样式、轴线刻度样式、轴线刻度标签样式、分割线样式、分隔区域样式、区域缩放样式。
- 类型：目前有两种类型：数值轴、对数轴。轴数据只能是数字。
- 分割线、分隔区域：用来更清楚的划分轴的区域。
- 区域缩放：可以设置是否允许用户缩放当前轴。
  - 允许通过鼠标缩放：是否允许用户通过鼠标拖拽、鼠标滚轮、手指滑动（触屏上）来缩放或漫游坐标系。
  - 允许通过控件缩放：勾选后会显示缩放控件，用户可以通过控件来缩放、调整坐标系。
  - 起始值、结束值：图表默认缩放的起始值和结束值。
  - 控件样式：用来设置缩放控件的样式和位置。
图表样式: ID: series 值类型: object
用来设置图表主体图形的样式。
可以设置图表的类型、取色策略、是否堆叠、图形上的标签、处于焦点时的变化和其他内容。
- 类型：有柱状图、折线图两种类型可选。
- 取色策略：可以设置从颜色列表属性中取色的方式。有两种取色策略：每组同色、每项同色。
  - 每组同色：每个数据组使用同一种颜色。
  - 每项同色：每个X轴数据项使用同一种颜色。
- 堆叠组：可以输入任意字符串作为堆叠组名称，堆叠组名称相同的可以堆叠在一起，不设置的不堆叠。
- 标签：可以设置在图形上显示的文字标签。包括：是否显示、位置、格式、样式。
- 焦点高亮：可以设置用户将鼠标放到图形上时，图形的变化。可以设置焦点效果和标签。
  - 焦点效果：当鼠标指向一个图形时，可以淡出其他图形突出当前图形。
  - 标签：可以设置当鼠标指向一个图形时，标签的显示方式。
- 其他：其他项的设置内容根据类型的不同而不同。
  柱状图可以设置是否显示柱条背景、柱条背景颜色、柱间距、类目间距。
  折线图可以设置是否显示标记、标题图形、标记大小、是否使用曲线过度、线宽、虚线间隔、线条颜色、是否显示成面积图、面积图下面填充的颜色、面积图下面填充的透明度、是否连接空值。
通过设置窗口右侧的 【+】 图标按钮，可以为每组数据设置不同的图表样式。如果数据组数量比图表样式数量多，多出的数据组会使用最后一个图表样式。
数据: ID: data 值类型: Array<Array<string | number>>
可以设置图表显示的数据内容。
数据是一个二维数组，通过表格设置。
表格第一行和第一列可以拖动调整数据顺序。
第二行是数据组名称，第二列是数据X轴值，可以通过点击后面的 【+】 图标按钮添加。
其他单元格是Y轴的值，一般只能填写数字。
层级: ID: z 值类型: number
控件的层级，数字越大，层级越高，显示在越上层。默认为10，最小值为0，最大100。
隐藏: ID: hide 值类型: boolean
是否隐藏控件，只在运行时生效，在配置页面中不会生效。
关联点: ID: linkPoint 值类型: object
可以关联 实时数据、历史数据 信息，将其显示在图表中。
点击属性，会弹出配置窗口，窗口左侧可以配置相关配置，右侧可以预览大概效果。
- 关联点：可以设置成这几种形式：点全名、通道名称、通道名称.链接名称、通道名称.链接名称.设备名称、通道名称.设备名称。并且可以设置多个，用逗号分隔。
  点全名表示特定点，其他的方式表示关联它下面的所有点。
- 开始时间、结束时间：可以设置为固定的时间点，也可以使用占位符表示当前时间。例如：YYYY-MM-DD 00:00:00 表示当天的 00:00:00 时间点。
加载事件:
事件在 页面加载完成后 执行。点击属性在弹出的 代码编辑 窗口编写代码。
屏幕刷新: ID: onRefresh 值类型: string | function
代码在页面加载完成后 重复执行，每隔一段时间执行一次。点击属性在弹出的 代码编辑 窗口编写代码。
- 每次执行的时间间隔，在控件所在页面的 刷新周期 属性中设置。
- 在执行完页面上所有的 加载事件 后开始定时执行。
点击事件: ID: onclick 值类型: string | function
事件在 控件被点击时 执行。点击属性在弹出的 代码编辑 窗口编写代码。

饼图

属性列表:

ID:
控件唯一标识，操作控件时，用来指定操作哪个控件。
- 可以使用中文、英文、数字，符号只能使用减号、下划线。
- 应该尽量保证页面中控件ID的唯一性，否则可能会导致无法准确操作控件。
X: ID: x 值类型: number
控件的起始点X坐标位置
Y: ID: y 值类型: number
控件的起始点Y坐标位置
宽: ID: width 值类型: number
控件宽度
高: ID: height 值类型: number
控件高度
主题: ID: theme 值类型: string
预设的几种图表样式供选择。修改后，图表的部分属性值会发生变化。
可选值:
- 普通: ID: normal
- 复古: ID: vintage
- 深色: ID: dark
- 维斯特洛: ID: westeros
- 厄斯索斯: ID: essos
- 仙境: ID: wonderland
- 瓦尔登: ID: walden
- 粉笔: ID: chalk
- 信息图表: ID: infographic
- 马卡龙: ID: macarons
- 罗马: ID: roma
- 闪耀: ID: shine
- 紫色热情: ID: purple_passion
背景颜色: ID: backgroundColor 值类型: string
颜色列表: ID: colors 值类型: Array<string>
颜色列表可以设置多个颜色，图表显示一组数据时会根据颜色列表的顺序依次使用颜色。如果数据组的数量大于颜色列表的数量，图表会循环使用颜色列表中的颜色。
标题: ID: colors 值类型: object
可以设置图表标题、副标题的内容、样式和位置。
图例: ID: legend 值类型: object
主要用来展示不同数据组的标记、颜色和名称。可以通过点击图例控制哪些组的数据不显示。
可以设置是否显示图例、图例文字样式、图例位置、横向排列还是纵向排列、溢出处理方式（图例较多、一行无法完全显示时，换行显示还是滚动翻页）。
提示框: ID: tooltip 值类型: object
用户鼠标放到图形上时，通过提示框显示数据的详细信息。
可以设置是否显示提示框、提示框样式、文字样式。
工具栏: ID: toolbox 值类型: object
可以在图表上显示一些工具，包括数据视图、存为图片。
- 数据视图：显示当前图表的数据。
- 存为图片：将图表显示内容保存为图片。
可以设置显示哪些工具、工具图标水平排列还是垂直排列、显示位置、工具图标的样式。
图表样式: ID: series 值类型: object
用来设置饼图主体图形的样式。
可以设置饼图的类型、内外半径、中心位置、起始角度、结束角度、顺时针还是逆时针、数据项间隔角度、标签样式、引导线样式、图形样式、焦点高亮样式、点选区块的效果。
- 类型：可以设置为饼图或南丁格尔图（玫瑰图）。南丁格尔图分为半径和角度共同表示数值大小和只使用半径表示数值大小两种。
- 标签：用来设置饼图各区块的标识文字标签的样式。可以设置是否显示标签、标签位置、标签对齐方式、标签格式、标签样式。
- 引导线：用来设置饼图各区块与其标识文字之间的引导线的样式。标签不显示时，无法单独显示引导线。
- 图形样式：用来设置饼图各区块的图形样式。
- 焦点高亮：用来设置用户将鼠标放到各区块图形上时，图形的变化。
数据: ID: data 值类型: Array<Array<string | number>>
可以设置饼图显示的数据内容。
数据是一个二维数组，通过表格设置。
表格第一列可以拖动调整数据顺序。
第二行是数据组名称，第一列是数据项名称，可以通过点击下面的 【+】 图标按钮添加数据项。
其他单元格是Y轴的值，一般只能填写数字。
层级: ID: z 值类型: number
控件的层级，数字越大，层级越高，显示在越上层。默认为10，最小值为0，最大100。
隐藏: ID: hide 值类型: boolean
是否隐藏控件，只在运行时生效，在配置页面中不会生效。
关联点: ID: linkPoint 值类型: object
可以关联 实时数据 信息，将其显示在饼图中。
点击属性，会弹出配置窗口，窗口左侧可以配置相关配置，右侧可以预览大概效果。
- 关联点：可以设置成这几种形式：点全名、通道名称、通道名称.链接名称、通道名称.链接名称.设备名称、通道名称.设备名称。并且可以设置多个，用逗号分隔。
  点全名表示特定点，其他的方式表示关联它下面的所有点。
加载事件:
事件在 页面加载完成后 执行。点击属性在弹出的 代码编辑 窗口编写代码。
屏幕刷新: ID: onRefresh 值类型: string | function
代码在页面加载完成后 重复执行，每隔一段时间执行一次。点击属性在弹出的 代码编辑 窗口编写代码。
- 每次执行的时间间隔，在控件所在页面的 刷新周期 属性中设置。
- 在执行完页面上所有的 加载事件 后开始定时执行。
点击事件: ID: onclick 值类型: string | function
事件在 控件被点击时 执行。点击属性在弹出的 代码编辑 窗口编写代码。

仪表盘

属性列表:

ID:
控件唯一标识，操作控件时，用来指定操作哪个控件。
- 可以使用中文、英文、数字，符号只能使用减号、下划线。
- 应该尽量保证页面中控件ID的唯一性，否则可能会导致无法准确操作控件。
X: ID: x 值类型: number
控件的起始点X坐标位置
Y: ID: y 值类型: number
控件的起始点Y坐标位置
宽: ID: width 值类型: number
控件宽度
高: ID: height 值类型: number
控件高度
主题: ID: theme 值类型: string
预设的几种图表样式供选择。修改后，图表的部分属性值会发生变化。
可选值:
- 普通: ID: normal
- 复古: ID: vintage
- 深色: ID: dark
- 维斯特洛: ID: westeros
- 厄斯索斯: ID: essos
- 仙境: ID: wonderland
- 瓦尔登: ID: walden
- 粉笔: ID: chalk
- 信息图表: ID: infographic
- 马卡龙: ID: macarons
- 罗马: ID: roma
- 闪耀: ID: shine
- 紫色热情: ID: purple_passion
背景颜色: ID: backgroundColor 值类型: string
颜色列表: ID: colors 值类型: Array<string>
颜色列表可以设置多个颜色，图表显示一组数据时会根据颜色列表的顺序依次使用颜色。如果数据组的数量大于颜色列表的数量，图表会循环使用颜色列表中的颜色。
标题: ID: colors 值类型: object
可以设置图表标题、副标题的内容、样式和位置。
提示框: ID: tooltip 值类型: object
用户鼠标放到图形上时，通过提示框显示数据的详细信息。
可以设置是否显示提示框、提示框样式、文字样式。
工具栏: ID: toolbox 值类型: object
可以在图表上显示一些工具，包括数据视图、存为图片。
- 数据视图：显示当前图表的数据。
- 存为图片：将图表显示内容保存为图片。
可以设置显示哪些工具、工具图标水平排列还是垂直排列、显示位置、工具图标的样式。
轴: ID: axis 值类型: object
可以设置轴的最大值、最小值、分隔段数、轴线样式、进度条样式、指针样式、分割线样式、刻度样式、刻度标签样式。
- 轴线：可以设置是否显示轴线、轴线末端是否显示为圆形、轴线线宽、轴线颜色。
  - 轴线颜色：可以设置多段不同颜色
- 进度条：是否在轴线上根据数值同步显示一个进度条
  - 重叠：在显示多个数据时，进度条是否重叠显示，不勾选则分开显示
- 指针：可以设置指针是否显示、指针形状、长度、宽度、旋转中心偏移位置
图表样式: ID: series 值类型: object
用来设置饼图主体图形的样式。
可以设置内外半径、中心位置、起始角度、结束角度、顺时针还是逆时针、数据标题和数据详情的样式、位置。
- 数据标题和数据详情的位置：可以设置多个位置，当要显示多组数据时，可以避免内容重叠。
数据: ID: data 值类型: Array<Array<string | number>>
可以设置饼图显示的数据内容。
数据是一个二维数组，通过表格设置。
表格第一列可以拖动调整数据顺序。
第二行是数据组名称，第一列是数据项名称，可以通过点击下面的 【+】 图标按钮添加数据项。
其他单元格是Y轴的值，一般只能填写数字。
层级: ID: z 值类型: number
控件的层级，数字越大，层级越高，显示在越上层。默认为10，最小值为0，最大100。
隐藏: ID: hide 值类型: boolean
是否隐藏控件，只在运行时生效，在配置页面中不会生效。
关联点: ID: linkPoint 值类型: object
可以关联 实时数据 信息，将其显示在饼图中。
点击属性，会弹出配置窗口，窗口左侧可以配置相关配置，右侧可以预览大概效果。
- 关联点：可以设置成这几种形式：点全名、通道名称、通道名称.链接名称、通道名称.链接名称.设备名称、通道名称.设备名称。并且可以设置多个，用逗号分隔。
  点全名表示特定点，其他的方式表示关联它下面的所有点。
加载事件:
事件在 页面加载完成后 执行。点击属性在弹出的 代码编辑 窗口编写代码。
屏幕刷新: ID: onRefresh 值类型: string | function
代码在页面加载完成后 重复执行，每隔一段时间执行一次。点击属性在弹出的 代码编辑 窗口编写代码。
- 每次执行的时间间隔，在控件所在页面的 刷新周期 属性中设置。
- 在执行完页面上所有的 加载事件 后开始定时执行。
点击事件: ID: onclick 值类型: string | function
事件在 控件被点击时 执行。点击属性在弹出的 代码编辑 窗口编写代码。

地图 (高德)

属性列表:

ID:
控件唯一标识，操作控件时，用来指定操作哪个控件。
- 可以使用中文、英文、数字，符号只能使用减号、下划线。
- 应该尽量保证页面中控件ID的唯一性，否则可能会导致无法准确操作控件。
X: ID: x 值类型: number
控件的起始点X坐标位置
Y: ID: y 值类型: number
控件的起始点Y坐标位置
宽: ID: width 值类型: number
控件宽度
高: ID: height 值类型: number
控件高度
主题: ID: style 值类型: string
预设的几种地图样式供选择。
可选值:
- 标准: ID: normal
- 幻影黑: ID: dark
- 月光银: ID: light
- 远山黛: ID: whitesmoke
- 草色青: ID: fresh
- 雅士灰: ID: grey
- 涂鸦: ID: graffiti
- 马卡龙: ID: macaron
- 靛青蓝: ID: blue
- 极夜蓝: ID: darkblue
- 葡萄酒: ID: wine
基本设置: ID: baseSettings 值类型: object
地图基本设置包括： 中央经纬度、缩放等级
在属性栏中点击该属性右侧的 【图标】 按钮，在弹出的窗口中，可以用鼠标拖动地图调整中心位置，鼠标滚轮调整缩放等级。
标记点: ID: marker 值类型: Array<object>
在地图上显示标记点。
在属性栏上点击该属性，会弹出 地图 - 标记点设置 窗口，可以设置标记点的 经纬度、提示、点击事件。
- 经纬度：标记点的经纬度。
- 提示：标记点的提示信息。
- 点击事件：点击标记点时的事件。
点击左侧地图，可以获取点击位置的经纬度。
添加的标记点会在左侧地图上显示，点击标记点可以在左侧展示该标记点的信息，并可以修改或删除。
在左侧地图直接 拖动标记点 也可以修改标记点的位置。
层级: ID: z 值类型: number
控件的层级，数字越大，层级越高，显示在越上层。默认为10，最小值为0，最大100。
隐藏: ID: hide 值类型: boolean
是否隐藏控件，只在运行时生效，在配置页面中不会生效。
加载事件:
事件在 页面加载完成后 执行。点击属性在弹出的 代码编辑 窗口编写代码。
屏幕刷新: ID: onRefresh 值类型: string | function
代码在页面加载完成后 重复执行，每隔一段时间执行一次。点击属性在弹出的 代码编辑 窗口编写代码。
- 每次执行的时间间隔，在控件所在页面的 刷新周期 属性中设置。
- 在执行完页面上所有的 加载事件 后开始定时执行。
点击事件: ID: onclick 值类型: string | function
事件在 控件被点击时 执行。点击属性在弹出的 代码编辑 窗口编写代码。

导航菜单

属性列表:

ID:
控件唯一标识，操作控件时，用来指定操作哪个控件。
- 可以使用中文、英文、数字，符号只能使用减号、下划线。
- 应该尽量保证页面中控件ID的唯一性，否则可能会导致无法准确操作控件。
X: ID: x 值类型: number
控件的起始点X坐标位置
Y: ID: y 值类型: number
控件的起始点Y坐标位置
宽: ID: width 值类型: number
控件宽度
高: ID: height 值类型: number
控件高度
主题: ID: theme 值类型: string
预设的几种样式供选择。修改后，控件部分属性值会发生变化。
可选值:
- 普通: ID: normal
- 深色: ID: dark
- 深灰: ID: dark-gray
- 深蓝: ID: dark-blue
背景颜色: ID: backgroundColor 值类型: string
字体: ID: font 值类型: object
设置控件下文字的字体。点击属性在弹出的 字体选择窗口 中选择字体。
选项样式: ID: itemStyle 值类型: object
设置菜单中选项默认的样式，包括文字颜色、字号、是否粗体、选项高度、选项背景颜色
悬停样式: ID: itemHoverStyle 值类型: object
设置菜单中选项在鼠标悬停时的样式，设置内容和选项样式相同
点击样式: ID: itemActiveStyle 值类型: object
设置菜单中选项在鼠标点击后的样式，设置内容和选项样式相同
搜索: ID: search 值类型: object
设置是否显示搜索栏和搜索栏的样式
数据: ID: data 值类型: object
设置显示的内容，包括有哪些选项、选项间的层级关系、选项的图标、名称、默认状态、点击后跳转的地址
页面嵌入控件ID: ID: iframeId 值类型: string
设置关联的页面嵌入控件
设置该属性后，点击选项时不会直接切换当前页面，而是修改该页面嵌入控件的地址属性
层级: ID: z 值类型: number
控件的层级，数字越大，层级越高，显示在越上层。默认为10，最小值为0，最大100。
隐藏: ID: hide 值类型: boolean
是否隐藏控件，只在运行时生效，在配置页面中不会生效。
加载事件:
事件在 页面加载完成后 执行。点击属性在弹出的 代码编辑 窗口编写代码。
屏幕刷新: ID: onRefresh 值类型: string | function
代码在页面加载完成后 重复执行，每隔一段时间执行一次。点击属性在弹出的 代码编辑 窗口编写代码。
- 每次执行的时间间隔，在控件所在页面的 刷新周期 属性中设置。
- 在执行完页面上所有的 加载事件 后开始定时执行。
点击事件: ID: onclick 值类型: string | function
事件在 控件被点击时 执行。点击属性在弹出的 代码编辑 窗口编写代码。

树状图

属性列表:

ID:
控件唯一标识，操作控件时，用来指定操作哪个控件。
- 可以使用中文、英文、数字，符号只能使用减号、下划线。
- 应该尽量保证页面中控件ID的唯一性，否则可能会导致无法准确操作控件。
X: ID: x 值类型: number
控件的起始点X坐标位置
Y: ID: y 值类型: number
控件的起始点Y坐标位置
宽: ID: width 值类型: number
控件宽度
高: ID: height 值类型: number
控件高度
背景颜色: ID: backgroundColor 值类型: string
文字颜色: ID: textColor 值类型: string
图标: ID: showIcon 值类型: boolean
是否显示图标
多选框: ID: checkEnable 值类型: boolean
是否显示多选框
数据: ID: data 值类型: Array<object>
设置树状图显示内容。
在属性栏中点击该属性，会弹出 树 - 数据设置 窗口。
- 添加节点
  通过点击 【添加】 按钮可以添加节点，添加的位置是当前选中的节点的子节点，没有选中节点时添加到根节点（点击树状图的空白位置，可以取消选中节点）。
- 删除节点
  选中需要删除的节点，点击 【删除】 按钮可以删除节点。
- 修改节点
  选中需要修改的节点，该节点的属性会在右侧展示出来，直接修改节点的属性即可，节点有5个属性：
  - 名称：节点显示的名称。
  - 文字颜色：节点文字的颜色。
  - 背景颜色：节点背景的颜色。
  - 点击事件：事件在节点被点击时执行。
  - 选中事件：事件在节点被选中时执行，必须开启 多选框 属性才能被处罚。
层级: ID: z 值类型: number
控件的层级，数字越大，层级越高，显示在越上层。默认为10，最小值为0，最大100。
隐藏: ID: hide 值类型: boolean
是否隐藏控件，只在运行时生效，在配置页面中不会生效。
加载事件:
事件在 页面加载完成后 执行。点击属性在弹出的 代码编辑 窗口编写代码。
屏幕刷新: ID: onRefresh 值类型: string | function
代码在页面加载完成后 重复执行，每隔一段时间执行一次。点击属性在弹出的 代码编辑 窗口编写代码。
- 每次执行的时间间隔，在控件所在页面的 刷新周期 属性中设置。
- 在执行完页面上所有的 加载事件 后开始定时执行。

页面嵌入

属性列表:

ID:
控件唯一标识，操作控件时，用来指定操作哪个控件。
- 可以使用中文、英文、数字，符号只能使用减号、下划线。
- 应该尽量保证页面中控件ID的唯一性，否则可能会导致无法准确操作控件。
X: ID: x 值类型: number
控件的起始点X坐标位置
Y: ID: y 值类型: number
控件的起始点Y坐标位置
宽: ID: width 值类型: number
控件宽度
高: ID: height 值类型: number
控件高度
背景颜色: ID: backgroundColor 值类型: string
地址: ID: src 值类型: string
嵌入页面的URL地址
部分网站会阻止自己被嵌入或只允许部分地址下的网站嵌入，详细可查看 内容安全策略（CSP）
默认报警提示:
是否允许子页面显示默认报警提示
层级: ID: z 值类型: number
控件的层级，数字越大，层级越高，显示在越上层。默认为10，最小值为0，最大100。
隐藏: ID: hide 值类型: boolean
是否隐藏控件，只在运行时生效，在配置页面中不会生效。
加载事件:
事件在 页面加载完成后 执行。点击属性在弹出的 代码编辑 窗口编写代码。
屏幕刷新: ID: onRefresh 值类型: string | function
代码在页面加载完成后 重复执行，每隔一段时间执行一次。点击属性在弹出的 代码编辑 窗口编写代码。
- 每次执行的时间间隔，在控件所在页面的 刷新周期 属性中设置。
- 在执行完页面上所有的 加载事件 后开始定时执行。

视频 (萤石云)

用来将萤石云的视频嵌入到页面中。具体萤石服务接入方式可以查看 萤石服务配置

属性列表:

ID:
控件唯一标识，操作控件时，用来指定操作哪个控件。
- 可以使用中文、英文、数字，符号只能使用减号、下划线。
- 应该尽量保证页面中控件ID的唯一性，否则可能会导致无法准确操作控件。
X: ID: x 值类型: number
控件的起始点X坐标位置
Y: ID: y 值类型: number
控件的起始点Y坐标位置
宽: ID: width 值类型: number
控件宽度
高: ID: height 值类型: number
控件高度
背景颜色: ID: backgroundColor 值类型: string
账号: ID: account 值类型: string
选择需要展示的视频在哪个萤石账号下，需要在 萤石服务 页面上配置后才会有选项
设备序列号: ID: deviceNum 值类型: string
需要展示设备的序列号
验证码: ID: verifyCode 值类型: string
需要展示设备的验证码
通道号: ID: channelNum 值类型: string
指定需要展示设备的哪个通道
模板: ID: template 值类型: string
指定播放器样式
可选值:
- 极简版: ID: 0
  只有基础的视频播放功能
- 标准版: ID: 1
  有开始播放、停止播放、截图、录像、全屏播放功能
- 安防版: ID: 2
  有开始播放、停止播放、截图、录像、全屏播放、局部放大、调整清晰度、回放功能。回放功能需要开通云存储服务，或者设备本地有存储。
清晰度: ID: clarity 值类型: string
视频清晰度
可选值:
- 流畅: ID: smooth
- 高清: ID: HD
自动播放: ID: autoplay 值类型: boolean
是否自动播放视频
声音: ID: audio 值类型: boolean
是否播放声音
层级: ID: z 值类型: number
控件的层级，数字越大，层级越高，显示在越上层。默认为10，最小值为0，最大100。
隐藏: ID: hide 值类型: boolean
是否隐藏控件，只在运行时生效，在配置页面中不会生效。
加载事件:
事件在 页面加载完成后 执行。点击属性在弹出的 代码编辑 窗口编写代码。
屏幕刷新: ID: onRefresh 值类型: string | function
代码在页面加载完成后 重复执行，每隔一段时间执行一次。点击属性在弹出的 代码编辑 窗口编写代码。
- 每次执行的时间间隔，在控件所在页面的 刷新周期 属性中设置。
- 在执行完页面上所有的 加载事件 后开始定时执行。

视频 (微控RTSP视频服务)

用来播放RTSP视频流。

需要额外安装 RTSP视频服务器 才能使用。浏览器、RTSP视频服务器、RTSP视频源之间的关系： RTSP视频服务器关系图

属性列表:

ID:
控件唯一标识，操作控件时，用来指定操作哪个控件。
- 可以使用中文、英文、数字，符号只能使用减号、下划线。
- 应该尽量保证页面中控件ID的唯一性，否则可能会导致无法准确操作控件。
X: ID: x 值类型: number
控件的起始点X坐标位置
Y: ID: y 值类型: number
控件的起始点Y坐标位置
宽: ID: width 值类型: number
控件宽度
高: ID: height 值类型: number
控件高度
服务地址: ID: serviceAddress 值类型: string
RTSP视频服务器的地址，格式：[IP地址]:[端口号]，例如： 192.168.1.100:8000
RTSP地址: ID: rtspAddress 值类型: string
要播放的RTSP视频地址
层级: ID: z 值类型: number
控件的层级，数字越大，层级越高，显示在越上层。默认为10，最小值为0，最大100。
隐藏: ID: hide 值类型: boolean
是否隐藏控件，只在运行时生效，在配置页面中不会生效。
加载事件:
事件在 页面加载完成后 执行。点击属性在弹出的 代码编辑 窗口编写代码。

回放视频 (微控RTSP视频服务)

用来播放一段时间的RTSP视频流，并在 RTSP视频服务器 上录制下来，下次再使用相同配置播放视频时，会直接播放录制的内容。

需要额外安装 RTSP视频服务器 才能使用。浏览器、RTSP视频服务器、RTSP视频源之间的关系： RTSP视频服务器关系图

属性列表:

ID:
控件唯一标识，操作控件时，用来指定操作哪个控件。
- 可以使用中文、英文、数字，符号只能使用减号、下划线。
- 应该尽量保证页面中控件ID的唯一性，否则可能会导致无法准确操作控件。
X: ID: x 值类型: number
控件的起始点X坐标位置
Y: ID: y 值类型: number
控件的起始点Y坐标位置
宽: ID: width 值类型: number
控件宽度
高: ID: height 值类型: number
控件高度
服务地址: ID: serviceAddress 值类型: string
RTSP视频服务器的地址，格式：[IP地址]:[端口号]，例如： 192.168.1.100:8000
RTSP地址: ID: rtspAddress 值类型: string
要播放的RTSP视频地址
录像时间: ID: recordTime 值类型: number
播放视频时间，单位：秒
跳过音频: ID: skipAudio 值类型: boolean
是否忽略音频流
自动播放: ID: autoplay 值类型: boolean
是否自动播放视频
层级: ID: z 值类型: number
控件的层级，数字越大，层级越高，显示在越上层。默认为10，最小值为0，最大100。
隐藏: ID: hide 值类型: boolean
是否隐藏控件，只在运行时生效，在配置页面中不会生效。
加载事件:
事件在 页面加载完成后 执行。点击属性在弹出的 代码编辑 窗口编写代码。

自定义

可以用这个控件将HTML代码嵌入到页面中

属性列表:

ID:
控件唯一标识，操作控件时，用来指定操作哪个控件。
- 可以使用中文、英文、数字，符号只能使用减号、下划线。
- 应该尽量保证页面中控件ID的唯一性，否则可能会导致无法准确操作控件。
X: ID: x 值类型: number
控件的起始点X坐标位置
Y: ID: y 值类型: number
控件的起始点Y坐标位置
宽: ID: width 值类型: number
控件宽度
高: ID: height 值类型: number
控件高度
背景颜色: ID: backgroundColor 值类型: string
层级: ID: z 值类型: number
控件的层级，数字越大，层级越高，显示在越上层。默认为10，最小值为0，最大100。
隐藏: ID: hide 值类型: boolean
是否隐藏控件，只在运行时生效，在配置页面中不会生效。
Code: ID: code 值类型: string
嵌入的HTML代码。点击属性在弹出的 代码编辑 窗口编写代码。
- 在配置状态下部分标签不生效，运行时才会生效，例如： <style>、 <script>、 <link> 等。
加载事件:
事件在 页面加载完成后 执行。点击属性在弹出的 代码编辑 窗口编写代码。
屏幕刷新: ID: onRefresh 值类型: string | function
代码在页面加载完成后 重复执行，每隔一段时间执行一次。点击属性在弹出的 代码编辑 窗口编写代码。
- 每次执行的时间间隔，在控件所在页面的 刷新周期 属性中设置。
- 在执行完页面上所有的 加载事件 后开始定时执行。
点击事件: ID: onclick 值类型: string | function
事件在 控件被点击时 执行。点击属性在弹出的 代码编辑 窗口编写代码。

组合

通过组合功能可以创建该控件，并将选中的控件放入其中，方便统一管理。

属性列表:

ID:
控件唯一标识，操作控件时，用来指定操作哪个控件。
- 可以使用中文、英文、数字，符号只能使用减号、下划线。
- 应该尽量保证页面中控件ID的唯一性，否则可能会导致无法准确操作控件。
X: ID: x 值类型: number
控件的起始点X坐标位置
Y: ID: y 值类型: number
控件的起始点Y坐标位置
宽: ID: width 值类型: number
控件宽度
高: ID: height 值类型: number
控件高度
溢出处理: ID: overflow 值类型: string
内容超出容器范围时的处理方式
可选值:
- 显示: ID: visible
  显示超出容器部分
- 隐藏: ID: hidden
  隐藏超出容器部分
- 自动滚动: ID: auto
  通过滚动的方式展示溢出部分，超出容器范围时显示滚动条，没有超出时不显示
- 滚动: ID: scroll
  通过滚动的方式展示溢出部分，始终显示滚动条
层级: ID: z 值类型: number
控件的层级，数字越大，层级越高，显示在越上层。默认为10，最小值为0，最大100。
隐藏: ID: hide 值类型: boolean
是否隐藏控件，只在运行时生效，在配置页面中不会生效。

定制函数

控件操作

页面切换

获取点

实时数据

获取历史数据

获取报警数据

用户操作

获取系统时间

加载提示

用户界面 - 控件属性

简介

页面

线

圆

三角形

矩形

图形

文字

图片

输入框

下拉菜单

复选框

单选框

按钮

表格

单元格

图表

饼图

仪表盘

地图 (高德)

导航菜单

树状图

页面嵌入

视频 (萤石云)

视频 (微控RTSP视频服务)

回放视频 (微控RTSP视频服务)

自定义

组合

控件操作

页面切换

获取点

实时数据

获取历史数据

获取报警数据

用户操作

获取系统时间

加载提示

用户界面 - 控件属性 ​

简介 ​

页面 ​

线 ​

圆 ​

三角形 ​

矩形 ​

图形 ​

文字 ​

图片 ​

输入框 ​

下拉菜单 ​

复选框 ​

单选框 ​

按钮 ​

表格 ​

单元格 ​

图表 ​

饼图 ​

仪表盘 ​

地图 (高德) ​

导航菜单 ​

树状图 ​

页面嵌入 ​

视频 (萤石云) ​

视频 (微控RTSP视频服务) ​

回放视频 (微控RTSP视频服务) ​

自定义 ​

组合 ​

用户界面 - 控件属性

简介

页面

线

圆

三角形

矩形

图形

文字

图片

输入框

下拉菜单

复选框

单选框

按钮

表格

单元格

图表

饼图

仪表盘

地图 (高德)

导航菜单

树状图

页面嵌入

视频 (萤石云)

视频 (微控RTSP视频服务)

回放视频 (微控RTSP视频服务)

自定义

组合