用户界面 - 控件

参照版本： Web 3.7.2-241018001

简介

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

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

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

页面

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

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

属性列表:

• 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: linkPoint 值类型: string | object

  关联一个数据点，让控件根据数据点的值进行变化。

  1. 点击属性，弹出 关联点窗口。

  2. 设置关联的数据点，在 点名 输入框中输入数据点名称，点击输入框后面的 【图标】 按钮，可以在弹出的窗口中选择已配置的数据点。

  3. 设置数据对应的控件样式，在下面的表格中，可以设置当数据点的值为不同的状态时，控件的样式。

     点击表格下面的 【+】 按钮，可以添加一行数据。点击每行后面的 【x】 按钮，可以删除这一行数据。

     表格主要有五列： 当点值为、图形、填充颜色、线条颜色、预览。

     • 当点值为： 设置 匹配条件

       填写格式： [比较符号][比较值]

       比较符号有六种： ==、!=、>、>=、<、<=。

       • ==： 当数据点的值与比较值 相同 时。这种比较方式 可以省略比较符号，例： ==1、1，这两种设置方式效果相同。

       • !=： 当数据点的值与比较值 不同 时。例： !=1。

       • >： 当数据点的值 大于 比较值时。比较值必须是数字。例： >1。

       • >=： 当数据点的值 大于等于 比较值时。比较值必须是数字。例： >=1。

       • <： 当数据点的值 小于 比较值时。比较值必须是数字。例： <1。

       • <=： 当数据点的值 小于等于 比较值时。比较值必须是数字。例： <=1。

     • 图形、填充颜色、线条颜色： 设置控件的图形属性。

     • 预览： 预览当前设置的样式。

     运行时匹配逻辑：

     • 点值每发生一次变化进行一次匹配。

     • 按表格顺序 从上到下依次匹配，匹配到第一个符合条件的样式就停止，并使用该样式。

       • 每行前面的 【拖拽图标】 按钮可以用来 调整行顺序。

     • 如果最后一行的 当点值为 列为空，则表示 其他情况，当上面的条件都不满足时，使用该行的样式。

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

  1. 设置关联的数据点

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

  2. 修改关联点的全部配置

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

• 层级: 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 | "auto"

  文字容器的宽度

• 高: ID: height 值类型: number | "auto"

  文字容器的高度

• 文字: ID: value 值类型: string

  显示的文字内容

• 前缀: ID: prefix 值类型: string

  文字前缀内容，可以用来添加标识、单位或其他描述信息

• 后缀: ID: prefix 值类型: string

  文字后缀内容，可以用来添加标识、单位或其他描述信息

• 字体: ID: font 值类型: string

  设置控件下文字的字体。点击属性在弹出的 字体选择窗口 中选择字体。

• 字号: 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: overflow 值类型: string

  内容超出容器范围时的处理方式

  可选值:

  • 显示: ID: visible

    显示超出容器部分

  • 隐藏: ID: hidden

    隐藏超出容器部分

  • 自动滚动: ID: auto

    通过滚动的方式展示溢出部分，超出容器范围时显示滚动条，没有超出时不显示

  • 滚动: ID: scroll

    通过滚动的方式展示溢出部分，始终显示滚动条

• 关联点: ID: linkPoint 值类型: string

  可以设置一个点名，运行时，控件会显示该点的实时值。

  • 点击属性栏中该属性右侧的 【图标】 按钮，可以在列表中选点。

• 小数位数: ID: decimalPlaces 值类型: number | null

  如果控件显示文字内容为数字，会根据该属性设置，强制保留小数点，设置为null时不处理

• 层级: 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: 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: 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 值类型: string

  设置控件下文字的字体。点击属性在弹出的 字体选择窗口 中选择字体。

• 字号: 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 值类型: string

  设置控件下文字的字体。点击属性在弹出的 字体选择窗口 中选择字体。

• 字号: 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 值类型: string

  设置控件下文字的字体。点击属性在弹出的 字体选择窗口 中选择字体。

• 字号: 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: font 值类型: string

  设置控件下文字的字体。点击属性在弹出的 字体选择窗口 中选择字体。

• 层级: ID: z 值类型: number

  控件的层级，数字越大，层级越高，显示在越上层。默认为10，最小值为0，最大100。

• 隐藏: ID: hide 值类型: boolean

  是否隐藏控件，只在运行时生效，在配置页面中不会生效。

• 加载事件:

  事件在 页面加载完成后 执行。点击属性在弹出的 代码编辑 窗口编写代码。

• 屏幕刷新: ID: onRefresh 值类型: string | function

  代码在页面加载完成后 重复执行，每隔一段时间执行一次。 点击属性在弹出的 代码编辑 窗口编写代码。

  • 每次执行的时间间隔，在控件所在 页面 的 刷新周期 属性中设置。

  • 在执行完页面上所有的 加载事件 后开始定时执行。

• 点击事件: ID: onclick 值类型: string | function

  事件在 控件被点击时 执行。点击属性在弹出的 代码编辑 窗口编写代码。

单元格

属性列表:

• ID:

  控件唯一标识，操作控件时，用来指定操作哪个控件。

  • 可以使用中文、英文、数字，符号只能使用减号、下划线。

  • 应该尽量保证页面中控件ID的唯一性，否则可能会导致无法准确操作控件。

• 列跨度: ID: colSpan 值类型: number

  单元格向后合并的列数

• 行跨度: ID: rowSpan 值类型: number

  单元格向下合并的行数

• 文字: ID: value 值类型: string

• 字体: ID: font 值类型: string

  设置控件下文字的字体。点击属性在弹出的 字体选择窗口 中选择字体。

• 字号: 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: decimalPlaces 值类型: number | null

  如果控件显示文字内容为数字，会根据该属性设置，强制保留小数点，设置为null时不处理

• 加载事件:

  事件在 页面加载完成后 执行。点击属性在弹出的 代码编辑 窗口编写代码。

• 屏幕刷新: 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: nominal

  • 深色: ID: dark-unica

  • 深蓝: ID: dark-blue

  • 深绿: ID: dark-green

  • 灰色: ID: gray

  • 网格亮: ID: grid-light

  • 网格: ID: grid

  • sand-signika: ID: sand-signika

  • 天空: ID: skies

  • 青字: ID: cyan-blue

• 标题: ID: title 值类型: string

• 副标题: ID: subtitle 值类型: string

• Y轴标题: ID: yTitle 值类型: string

• 导出: ID: exporting 值类型: boolean

  是否显示导出菜单按钮

• 图例: ID: legend 值类型: boolean

  是否显示图例

• 提示框: ID: tooltip 值类型: boolean

  鼠标放到图表上时，是否显示提示框。

• 堆叠: ID: stacking 值类型: boolean

  是否将各组数据堆叠在一起显示

• 背景颜色: ID: backgroundColor 值类型: string

• 颜色列表: ID: colors 值类型: Array<string>

  颜色列表可以设置多个颜色，图表显示一组数据时会根据颜色列表的顺序依次使用颜色。如果数据组的数量大于颜色列表的数量，图表会循环使用颜色列表中的颜色。

• 数据: ID: data 值类型: Array<object>

  设置图表显示内容。

  在属性栏中点击该属性，会弹出 图表 - 数据 窗口。

  先设置 X轴数据类型，可以设置为 数字 或 时间。

  然后设置数据，图表可以有多个 数据组 （饼图除外），每个数据组有一个名称、多个数据点，每个数据点有x和y两个值。

  通过点击对应的 【+】 按钮可以 添加数据组或数据点，点击对应的 【x】 按钮可以 删除数据组或数据点。

  X轴数据类型 设置为 时间 时，数据点的x值的格式为： YYYY-MM-DD HH:mm:ss.SSS。

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

  setAttr('chartColumn_0', 'data', [
      {
          name: "Data1",
          type: "column",
          xAxisType: "linear",
          data: [
              [1, 7], [2, 6.9], [3, 9.5], [4, 14.5], [5, 18.2], [6, 21.5]
          ]
      },
      {
          name: "Data2",
          type: "column",
          xAxisType: "linear",
          data: [
              [1, -0.2], [2, 0.8], [3, 5.7], [4, 11.3], [5, 17], [6, 22]
          ]
      }
  ]);
  

  针对图表的数据设置，也有一些专用的函数，如 addSeriesForChart、addPointForChart、getChartObj、setChartAttr。

• 关联点: ID: linkPoint 值类型: Array<string> | null

  可以关联多个数据点，让控件根据数据点的值进行变化。

• 关联模式: ID: linkMode 值类型: string

  设置数据点值显示的模式

  可选值:

  • 推进: ID: mode1

    X轴显示时间，数据点的值发生变化时向前推进，在新的时间点显示新数据。

  • 变化: ID: mode2

    X轴固定，数据点的值发生变化时在原来的位置修改数据值。

• 点名显示: ID: linkPointNameMode 值类型: string

  关联点后，设置各组的名称。

  下面以关联了数据点 Net1.链接_1.设备_1@GetData_1 为例。

  可选值:

  • 点名: ID: name

    显示数据点的完整名称，即显示 Net1.链接_1.设备_1@GetData_1。

  • 数据名称: ID: pointName

    显示数据点的数据名称部分，即显示 GetData_1。

  • 设备名称: ID: deviceName

    显示数据点的设备名称部分，即显示 设备_1。

  • 链接名称: ID: linkName

    显示数据点的链接名称部分，即显示 链接_1。

  • 通道名称: ID: channelName

    显示数据点的通道名称部分，即显示 Net1。

• 层级: 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: nominal

  • 深色: ID: dark-unica

  • 深蓝: ID: dark-blue

  • 深绿: ID: dark-green

  • 灰色: ID: gray

  • 网格亮: ID: grid-light

  • 网格: ID: grid

  • sand-signika: ID: sand-signika

  • 天空: ID: skies

  • 青字: ID: cyan-blue

• 标题: ID: title 值类型: string

• 副标题: ID: subtitle 值类型: string

• Y轴标题: ID: yTitle 值类型: string

• 导出: ID: exporting 值类型: boolean

  是否显示导出菜单按钮

• 图例: ID: legend 值类型: boolean

  是否显示图例

• 提示框: ID: tooltip 值类型: boolean

  鼠标放到图表上时，是否显示提示框。

• 堆叠: ID: stacking 值类型: boolean

  是否将各组数据堆叠在一起显示

• 背景颜色: ID: backgroundColor 值类型: string

• 颜色列表: ID: colors 值类型: Array<string>

  颜色列表可以设置多个颜色，图表显示一组数据时会根据颜色列表的顺序依次使用颜色。如果数据组的数量大于颜色列表的数量，图表会循环使用颜色列表中的颜色。

• 数据: ID: data 值类型: Array<object>

  设置图表显示内容。

  在属性栏中点击该属性，会弹出 图表 - 数据 窗口。

  先设置 X轴数据类型，可以设置为 数字 或 时间。

  然后设置数据，图表可以有多个 数据组 （饼图除外），每个数据组有一个名称、多个数据点，每个数据点有x和y两个值。

  通过点击对应的 【+】 按钮可以 添加数据组或数据点，点击对应的 【x】 按钮可以 删除数据组或数据点。

  X轴数据类型 设置为 时间 时，数据点的x值的格式为： YYYY-MM-DD HH:mm:ss.SSS。

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

  setAttr('chartColumn_0', 'data', [
      {
          name: "Data1",
          type: "column",
          xAxisType: "linear",
          data: [
              [1, 7], [2, 6.9], [3, 9.5], [4, 14.5], [5, 18.2], [6, 21.5]
          ]
      },
      {
          name: "Data2",
          type: "column",
          xAxisType: "linear",
          data: [
              [1, -0.2], [2, 0.8], [3, 5.7], [4, 11.3], [5, 17], [6, 22]
          ]
      }
  ]);
  

  针对图表的数据设置，也有一些专用的函数，如 addSeriesForChart、addPointForChart、getChartObj、setChartAttr。

• 关联点: ID: linkPoint 值类型: Array<string> | null

  可以关联多个数据点，让控件根据数据点的值进行变化。

• 关联模式: ID: linkMode 值类型: string

  设置数据点值显示的模式

  可选值:

  • 推进: ID: mode1

    X轴显示时间，数据点的值发生变化时向前推进，在新的时间点显示新数据。

  • 变化: ID: mode2

    X轴固定，数据点的值发生变化时在原来的位置修改数据值。

• 点名显示: ID: linkPointNameMode 值类型: string

  关联点后，设置各组的名称。

  下面以关联了数据点 Net1.链接_1.设备_1@GetData_1 为例。

  可选值:

  • 点名: ID: name

    显示数据点的完整名称，即显示 Net1.链接_1.设备_1@GetData_1。

  • 数据名称: ID: pointName

    显示数据点的数据名称部分，即显示 GetData_1。

  • 设备名称: ID: deviceName

    显示数据点的设备名称部分，即显示 设备_1。

  • 链接名称: ID: linkName

    显示数据点的链接名称部分，即显示 链接_1。

  • 通道名称: ID: channelName

    显示数据点的通道名称部分，即显示 Net1。

• 层级: 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: nominal

  • 深色: ID: dark-unica

  • 深蓝: ID: dark-blue

  • 深绿: ID: dark-green

  • 灰色: ID: gray

  • 网格亮: ID: grid-light

  • 网格: ID: grid

  • sand-signika: ID: sand-signika

  • 天空: ID: skies

  • 青字: ID: cyan-blue

• 标题: ID: title 值类型: string

• 副标题: ID: subtitle 值类型: string

• Y轴标题: ID: yTitle 值类型: string

• 导出: ID: exporting 值类型: boolean

  是否显示导出菜单按钮

• 图例: ID: legend 值类型: boolean

  是否显示图例

• 提示框: ID: tooltip 值类型: boolean

  鼠标放到图表上时，是否显示提示框。

• 十字准线: ID: crosshairs 值类型: boolean

  鼠标放到图表显示的数据上时，是否要显示十字准线，十字准线可以方便与其他数据进行比较。

• 整合提示框: ID: split 值类型: boolean

  显示提示框时，是否把相同X轴的数据一起显示出来。

• 线宽: ID: lineWidth 值类型: number

• 标记点半径: ID: markerRadius 值类型: number

• 背景颜色: ID: backgroundColor 值类型: string

• 颜色列表: ID: colors 值类型: Array<string>

  颜色列表可以设置多个颜色，图表显示一组数据时会根据颜色列表的顺序依次使用颜色。如果数据组的数量大于颜色列表的数量，图表会循环使用颜色列表中的颜色。

• 数据: ID: data 值类型: Array<object>

  设置图表显示内容。

  在属性栏中点击该属性，会弹出 图表 - 数据 窗口。

  先设置 X轴数据类型，可以设置为 数字 或 时间。

  然后设置数据，图表可以有多个 数据组 （饼图除外），每个数据组有一个名称、多个数据点，每个数据点有x和y两个值。

  通过点击对应的 【+】 按钮可以 添加数据组或数据点，点击对应的 【x】 按钮可以 删除数据组或数据点。

  X轴数据类型 设置为 时间 时，数据点的x值的格式为： YYYY-MM-DD HH:mm:ss.SSS。

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

  setAttr('chartColumn_0', 'data', [
      {
          name: "Data1",
          type: "column",
          xAxisType: "linear",
          data: [
              [1, 7], [2, 6.9], [3, 9.5], [4, 14.5], [5, 18.2], [6, 21.5]
          ]
      },
      {
          name: "Data2",
          type: "column",
          xAxisType: "linear",
          data: [
              [1, -0.2], [2, 0.8], [3, 5.7], [4, 11.3], [5, 17], [6, 22]
          ]
      }
  ]);
  

  针对图表的数据设置，也有一些专用的函数，如 addSeriesForChart、addPointForChart、getChartObj、setChartAttr。

• 关联点: ID: linkPoint 值类型: Array<string> | null

  可以关联多个数据点，让控件根据数据点的值进行变化。

• 点名显示: ID: linkPointNameMode 值类型: string

  关联点后，设置各组的名称。

  下面以关联了数据点 Net1.链接_1.设备_1@GetData_1 为例。

  可选值:

  • 点名: ID: name

    显示数据点的完整名称，即显示 Net1.链接_1.设备_1@GetData_1。

  • 数据名称: ID: pointName

    显示数据点的数据名称部分，即显示 GetData_1。

  • 设备名称: ID: deviceName

    显示数据点的设备名称部分，即显示 设备_1。

  • 链接名称: ID: linkName

    显示数据点的链接名称部分，即显示 链接_1。

  • 通道名称: ID: channelName

    显示数据点的通道名称部分，即显示 Net1。

• 层级: 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: nominal

  • 深色: ID: dark-unica

  • 深蓝: ID: dark-blue

  • 深绿: ID: dark-green

  • 灰色: ID: gray

  • 网格亮: ID: grid-light

  • 网格: ID: grid

  • sand-signika: ID: sand-signika

  • 天空: ID: skies

  • 青字: ID: cyan-blue

• 标题: ID: title 值类型: string

• 副标题: ID: subtitle 值类型: string

• Y轴标题: ID: yTitle 值类型: string

• 导出: ID: exporting 值类型: boolean

  是否显示导出菜单按钮

• 图例: ID: legend 值类型: boolean

  是否显示图例

• 提示框: ID: tooltip 值类型: boolean

  鼠标放到图表上时，是否显示提示框。

• 十字准线: ID: crosshairs 值类型: boolean

  鼠标放到图表显示的数据上时，是否要显示十字准线，十字准线可以方便与其他数据进行比较。

• 整合提示框: ID: split 值类型: boolean

  显示提示框时，是否把相同X轴的数据一起显示出来。

• 线宽: ID: lineWidth 值类型: number

• 标记点半径: ID: markerRadius 值类型: number

• 背景颜色: ID: backgroundColor 值类型: string

• 颜色列表: ID: colors 值类型: Array<string>

  颜色列表可以设置多个颜色，图表显示一组数据时会根据颜色列表的顺序依次使用颜色。如果数据组的数量大于颜色列表的数量，图表会循环使用颜色列表中的颜色。

• 数据: ID: data 值类型: Array<object>

  设置图表显示内容。

  在属性栏中点击该属性，会弹出 图表 - 数据 窗口。

  先设置 X轴数据类型，可以设置为 数字 或 时间。

  然后设置数据，图表可以有多个 数据组 （饼图除外），每个数据组有一个名称、多个数据点，每个数据点有x和y两个值。

  通过点击对应的 【+】 按钮可以 添加数据组或数据点，点击对应的 【x】 按钮可以 删除数据组或数据点。

  X轴数据类型 设置为 时间 时，数据点的x值的格式为： YYYY-MM-DD HH:mm:ss.SSS。

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

  setAttr('chartColumn_0', 'data', [
      {
          name: "Data1",
          type: "column",
          xAxisType: "linear",
          data: [
              [1, 7], [2, 6.9], [3, 9.5], [4, 14.5], [5, 18.2], [6, 21.5]
          ]
      },
      {
          name: "Data2",
          type: "column",
          xAxisType: "linear",
          data: [
              [1, -0.2], [2, 0.8], [3, 5.7], [4, 11.3], [5, 17], [6, 22]
          ]
      }
  ]);
  

  针对图表的数据设置，也有一些专用的函数，如 addSeriesForChart、addPointForChart、getChartObj、setChartAttr。

• 关联点: ID: linkPoint 值类型: Array<string> | null

  可以关联多个数据点，让控件根据数据点的值进行变化。

• 点名显示: ID: linkPointNameMode 值类型: string

  关联点后，设置各组的名称。

  下面以关联了数据点 Net1.链接_1.设备_1@GetData_1 为例。

  可选值:

  • 点名: ID: name

    显示数据点的完整名称，即显示 Net1.链接_1.设备_1@GetData_1。

  • 数据名称: ID: pointName

    显示数据点的数据名称部分，即显示 GetData_1。

  • 设备名称: ID: deviceName

    显示数据点的设备名称部分，即显示 设备_1。

  • 链接名称: ID: linkName

    显示数据点的链接名称部分，即显示 链接_1。

  • 通道名称: ID: channelName

    显示数据点的通道名称部分，即显示 Net1。

• 层级: 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: nominal

  • 深色: ID: dark-unica

  • 深蓝: ID: dark-blue

  • 深绿: ID: dark-green

  • 灰色: ID: gray

  • 网格亮: ID: grid-light

  • 网格: ID: grid

  • sand-signika: ID: sand-signika

  • 天空: ID: skies

  • 青字: ID: cyan-blue

• 标题: ID: title 值类型: string

• 副标题: ID: subtitle 值类型: string

• Y轴标题: ID: yTitle 值类型: string

• 导出: ID: exporting 值类型: boolean

  是否显示导出菜单按钮

• 图例: ID: legend 值类型: boolean

  是否显示图例

• 提示框: ID: tooltip 值类型: boolean

  鼠标放到图表上时，是否显示提示框。

• 堆叠: ID: stacking 值类型: boolean

  是否将各组数据堆叠在一起显示

• 十字准线: ID: crosshairs 值类型: boolean

  鼠标放到图表显示的数据上时，是否要显示十字准线，十字准线可以方便与其他数据进行比较。

• 整合提示框: ID: split 值类型: boolean

  显示提示框时，是否把相同X轴的数据一起显示出来。

• 线宽: ID: lineWidth 值类型: number

• 标记点半径: ID: markerRadius 值类型: number

• 基准值: ID: threshold 值类型: number

  作为基础的 Y 轴值，填充的起始位置，数据点和阈值之间的区域被填充。

• 背景颜色: ID: backgroundColor 值类型: string

• 颜色列表: ID: colors 值类型: Array<string>

  颜色列表可以设置多个颜色，图表显示一组数据时会根据颜色列表的顺序依次使用颜色。如果数据组的数量大于颜色列表的数量，图表会循环使用颜色列表中的颜色。

• 数据: ID: data 值类型: Array<object>

  设置图表显示内容。

  在属性栏中点击该属性，会弹出 图表 - 数据 窗口。

  先设置 X轴数据类型，可以设置为 数字 或 时间。

  然后设置数据，图表可以有多个 数据组 （饼图除外），每个数据组有一个名称、多个数据点，每个数据点有x和y两个值。

  通过点击对应的 【+】 按钮可以 添加数据组或数据点，点击对应的 【x】 按钮可以 删除数据组或数据点。

  X轴数据类型 设置为 时间 时，数据点的x值的格式为： YYYY-MM-DD HH:mm:ss.SSS。

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

  setAttr('chartColumn_0', 'data', [
      {
          name: "Data1",
          type: "column",
          xAxisType: "linear",
          data: [
              [1, 7], [2, 6.9], [3, 9.5], [4, 14.5], [5, 18.2], [6, 21.5]
          ]
      },
      {
          name: "Data2",
          type: "column",
          xAxisType: "linear",
          data: [
              [1, -0.2], [2, 0.8], [3, 5.7], [4, 11.3], [5, 17], [6, 22]
          ]
      }
  ]);
  

  针对图表的数据设置，也有一些专用的函数，如 addSeriesForChart、addPointForChart、getChartObj、setChartAttr。

• 关联点: ID: linkPoint 值类型: Array<string> | null

  可以关联多个数据点，让控件根据数据点的值进行变化。

• 点名显示: ID: linkPointNameMode 值类型: string

  关联点后，设置各组的名称。

  下面以关联了数据点 Net1.链接_1.设备_1@GetData_1 为例。

  可选值:

  • 点名: ID: name

    显示数据点的完整名称，即显示 Net1.链接_1.设备_1@GetData_1。

  • 数据名称: ID: pointName

    显示数据点的数据名称部分，即显示 GetData_1。

  • 设备名称: ID: deviceName

    显示数据点的设备名称部分，即显示 设备_1。

  • 链接名称: ID: linkName

    显示数据点的链接名称部分，即显示 链接_1。

  • 通道名称: ID: channelName

    显示数据点的通道名称部分，即显示 Net1。

• 层级: 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: nominal

  • 深色: ID: dark-unica

  • 深蓝: ID: dark-blue

  • 深绿: ID: dark-green

  • 灰色: ID: gray

  • 网格亮: ID: grid-light

  • 网格: ID: grid

  • sand-signika: ID: sand-signika

  • 天空: ID: skies

  • 青字: ID: cyan-blue

• 标题: ID: title 值类型: string

• 副标题: ID: subtitle 值类型: string

• Y轴标题: ID: yTitle 值类型: string

• 导出: ID: exporting 值类型: boolean

  是否显示导出菜单按钮

• 图例: ID: legend 值类型: boolean

  是否显示图例

• 提示框: ID: tooltip 值类型: boolean

  鼠标放到图表上时，是否显示提示框。

• 堆叠: ID: stacking 值类型: boolean

  是否将各组数据堆叠在一起显示

• 十字准线: ID: crosshairs 值类型: boolean

  鼠标放到图表显示的数据上时，是否要显示十字准线，十字准线可以方便与其他数据进行比较。

• 整合提示框: ID: split 值类型: boolean

  显示提示框时，是否把相同X轴的数据一起显示出来。

• 线宽: ID: lineWidth 值类型: number

• 标记点半径: ID: markerRadius 值类型: number

• 基准值: ID: threshold 值类型: number

  作为基础的 Y 轴值，填充的起始位置，数据点和阈值之间的区域被填充。

• 背景颜色: ID: backgroundColor 值类型: string

• 颜色列表: ID: colors 值类型: Array<string>

  颜色列表可以设置多个颜色，图表显示一组数据时会根据颜色列表的顺序依次使用颜色。如果数据组的数量大于颜色列表的数量，图表会循环使用颜色列表中的颜色。

• 数据: ID: data 值类型: Array<object>

  设置图表显示内容。

  在属性栏中点击该属性，会弹出 图表 - 数据 窗口。

  先设置 X轴数据类型，可以设置为 数字 或 时间。

  然后设置数据，图表可以有多个 数据组 （饼图除外），每个数据组有一个名称、多个数据点，每个数据点有x和y两个值。

  通过点击对应的 【+】 按钮可以 添加数据组或数据点，点击对应的 【x】 按钮可以 删除数据组或数据点。

  X轴数据类型 设置为 时间 时，数据点的x值的格式为： YYYY-MM-DD HH:mm:ss.SSS。

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

  setAttr('chartColumn_0', 'data', [
      {
          name: "Data1",
          type: "column",
          xAxisType: "linear",
          data: [
              [1, 7], [2, 6.9], [3, 9.5], [4, 14.5], [5, 18.2], [6, 21.5]
          ]
      },
      {
          name: "Data2",
          type: "column",
          xAxisType: "linear",
          data: [
              [1, -0.2], [2, 0.8], [3, 5.7], [4, 11.3], [5, 17], [6, 22]
          ]
      }
  ]);
  

  针对图表的数据设置，也有一些专用的函数，如 addSeriesForChart、addPointForChart、getChartObj、setChartAttr。

• 关联点: ID: linkPoint 值类型: Array<string> | null

  可以关联多个数据点，让控件根据数据点的值进行变化。

• 点名显示: ID: linkPointNameMode 值类型: string

  关联点后，设置各组的名称。

  下面以关联了数据点 Net1.链接_1.设备_1@GetData_1 为例。

  可选值:

  • 点名: ID: name

    显示数据点的完整名称，即显示 Net1.链接_1.设备_1@GetData_1。

  • 数据名称: ID: pointName

    显示数据点的数据名称部分，即显示 GetData_1。

  • 设备名称: ID: deviceName

    显示数据点的设备名称部分，即显示 设备_1。

  • 链接名称: ID: linkName

    显示数据点的链接名称部分，即显示 链接_1。

  • 通道名称: ID: channelName

    显示数据点的通道名称部分，即显示 Net1。

• 层级: 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: nominal

  • 深色: ID: dark-unica

  • 深蓝: ID: dark-blue

  • 深绿: ID: dark-green

  • 灰色: ID: gray

  • 网格亮: ID: grid-light

  • 网格: ID: grid

  • sand-signika: ID: sand-signika

  • 天空: ID: skies

  • 青字: ID: cyan-blue

• 标题: ID: title 值类型: string

• 副标题: ID: subtitle 值类型: string

• 导出: ID: exporting 值类型: boolean

  是否显示导出菜单按钮

• 图例: ID: legend 值类型: boolean

  是否显示图例

• 提示框: ID: tooltip 值类型: boolean

  鼠标放到图表上时，是否显示提示框。

• 数据标签: ID: dataLabel 值类型: boolean

  是否显示饼图周围的标签提示。

• 允许点选: ID: allowPointSelect 值类型: boolean

  是否允许用户点击饼图的某一块，使其突出显示。

• 内径大小: ID: innerSize 值类型: number

  饼图内径大小。

• 边框宽度: ID: borderWidth 值类型: number

  饼图每个区块边框的宽度，用来控制各区块间的距离

• 背景颜色: ID: backgroundColor 值类型: string

• 颜色列表: ID: colors 值类型: Array<string>

  颜色列表可以设置多个颜色，图表显示一组数据时会根据颜色列表的顺序依次使用颜色。如果数据组的数量大于颜色列表的数量，图表会循环使用颜色列表中的颜色。

• 数据: ID: data 值类型: Array<object>

  设置图表显示内容。

  在属性栏中点击该属性，会弹出 图表 - 数据 窗口。

  先设置 X轴数据类型，可以设置为 数字 或 时间。

  然后设置数据，图表可以有多个 数据组 （饼图除外），每个数据组有一个名称、多个数据点，每个数据点有x和y两个值。

  通过点击对应的 【+】 按钮可以 添加数据组或数据点，点击对应的 【x】 按钮可以 删除数据组或数据点。

  X轴数据类型 设置为 时间 时，数据点的x值的格式为： YYYY-MM-DD HH:mm:ss.SSS。

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

  setAttr('chartColumn_0', 'data', [
      {
          name: "Data1",
          type: "column",
          xAxisType: "linear",
          data: [
              [1, 7], [2, 6.9], [3, 9.5], [4, 14.5], [5, 18.2], [6, 21.5]
          ]
      },
      {
          name: "Data2",
          type: "column",
          xAxisType: "linear",
          data: [
              [1, -0.2], [2, 0.8], [3, 5.7], [4, 11.3], [5, 17], [6, 22]
          ]
      }
  ]);
  

  针对图表的数据设置，也有一些专用的函数，如 addSeriesForChart、addPointForChart、getChartObj、setChartAttr。

• 关联点: ID: linkPoint 值类型: Array<string> | null

  可以关联多个数据点，让控件根据数据点的值进行变化。

• 点名显示: ID: linkPointNameMode 值类型: string

  关联点后，设置各组的名称。

  下面以关联了数据点 Net1.链接_1.设备_1@GetData_1 为例。

  可选值:

  • 点名: ID: name

    显示数据点的完整名称，即显示 Net1.链接_1.设备_1@GetData_1。

  • 数据名称: ID: pointName

    显示数据点的数据名称部分，即显示 GetData_1。

  • 设备名称: ID: deviceName

    显示数据点的设备名称部分，即显示 设备_1。

  • 链接名称: ID: linkName

    显示数据点的链接名称部分，即显示 链接_1。

  • 通道名称: ID: channelName

    显示数据点的通道名称部分，即显示 Net1。

• 层级: 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: 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: 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视频源之间的关系：

属性列表:

• 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