组态编辑器
# 一、概述
提示
FastBee组态编辑器主要由顶部工具栏、左侧导航栏、画布、右侧配置栏组成。
![](/doc/assets/img/img_8.ba5de228.png)
- 工具栏:常见的执行操作,例如复制、删除、置顶、置底、旋转、对齐、组合、锁定、图库、导入、导出、撤销、恢复、缩放、保存、预览。
- PC端:支web端网页设计,页面可设置多种分辨率。
- 移动端:暂不支持,后期可以通过分享在移动端查看。
- 基本组件:具备丰富的基础组件,包括基本组件、基本形态、统计图,可以更好的模拟工业场景。
- 图库:可以通过“图库管理”上传素材,图库也提供了大量高级控件,可用于生动展现各种场景。
- 画布:通过把组件拖拽放置于此,多个组件组合,共同完成生动的工业生产流程场景。
- 数据:可以通过mqtt或者http的形式为组件绑定数据来源实现交互功能。
- 样式:编辑组件位置、大小、颜色等。
# 二、组件配置
# 1. 页面配置
在画布区域中点击空白处,右侧便会出现”页面”配置栏设置。
![](/doc/assets/img/img_9.008252a1.png)
- 背景名称:设置画布背景的名称
- 分辨率:设置页面画布的大小,系统给出常见的尺寸,也支持自定义画布尺寸。
- 背景颜色:给背景设置颜色,支持设置任何颜色。
- 背景图片:可以添加背景图片,增加界面设计感。
- 拖拽缩放:开启后可在预览时对画布进行拖拽和缩放。
# 2. 样式设置
设置组件在页面中的样式展示,包括位置尺寸、名称、文本、外观等,不同组件配置的内容可能不同,选中组件,右侧便会出现”组件”配置栏设置。
![](/doc/assets/img/img_10.b65d1396.png)
位置和尺寸:设置组件在页面画布的显示位置与尺寸,X坐标和Y坐标,分别以页面左上角为起点坐标[0,0],设置X轴和Y轴的值,调整组件在页面中的位置;宽度和宽度,就是组件的宽度和高度,用于调整组件尺寸。
组件名称:支持给画布上的组件自定义设置名称,用于标记组件的作用等,同时在组态预览时不会显示设置的标题名称;
角度:以组件为中心,组件可以按顺时针或者逆时针旋转任意角度,在右上角“圆盘”旋转,设置想要旋转的角度即可。
![](/doc/assets/img/img_11.ccf833f9.png)
基本样式:可设置组件的外观,包括不限于图层高度、背景颜色、透明度、边框圆角、阴影颜色、组件显隐等
特定属性:根据组件的不同,拥有不同的特有属性,以“文本”为例,支持设置文本的文字、对齐方式、字体、大小、颜色、边框、边框颜色等
# 3. 数据绑定
支持对组件变量状态、事件、动画效果、交互进行配置,不同组件配置的内容不同,不同组件的配置将在下面介绍,选中组件,右侧便会出现”组件”配置栏设置,点击“数据绑定”
![](/doc/assets/img/img_12.5e10973e.png)
参数绑定:组件展示数据的来源。选择设备、选择变量,所关联的变量就是产生数据的来源。
a.先从顶部工具栏中绑定设备
b.选择变量
事件:绑定组件的单击事件,包含操作变量、跳转外部链接、打开已经完成的组态页面窗口等。
a.勾选“单击” CheckBox,然后点击编辑图标,进入编辑状态
b.根据需求自行配置动作类型(后期可扩展)
动画效果:动效有4种,分别为”显隐”、”旋转”、”闪烁” 和 ”滑动”。
a.显隐:勾选”显隐”字段 CheckBox, 并点击”编辑”图标,会出现设置的弹窗。选择变量,设置绑定变量的范围大小,为隐藏的触发条件。
b.旋转:勾选”旋转”字段 CheckBox, 并点击”编辑”图标,会出现设置的弹窗。选择变量,设置绑定变量的范围大小,为隐藏的触发条,同时可选择动画快慢。
c.闪烁:勾选”闪烁”字段 CheckBox, 并点击”编辑”图标,会出现设置的弹窗。选择变量,设置绑定变量的范围大小,为隐藏的触发条件。设置弹框和”显隐”一样。
d.闪烁:勾选”滑动”字段 CheckBox, 并点击”编辑”图标,会出现设置的弹窗。选择变量,设置绑定变量的范围大小,为隐藏的触发条件,同时可设置滑动周期和滑动位置。
填充颜色:定义参数包括判断条件、判断值、填充色的配置
a.添加:点击“加号”可新增填充条件,需要配置条件参数,和填充色。
b.删除:点击“删除图标”可以由下向上一次删除所添加的填充条件。
状态开关:定义参数包括判断条件、判断值、状态图片、填充色的配置
a.添加:点击“加号”可新增状态开关条件,需要配置条件参数,状态图片和填充色。
b.删除:点击“删除图标”可以由下向上一次删除所添加的状态开关条件。
# 三、工具栏
工具栏为组件在画布中提供了一些常用操作功能,从左到右功能依次如下
![](/doc/assets/img/img_21.e761d084.png)
- 复制:在画布中,复制多个相同配置的组件。
- 删除:删除单个或者多个画布中的组件。
- 置顶:在多个组件堆叠的情况下,将选中组件移到最上面一层。
- 置底:在多个组件堆叠的情况下,将选中组件移到最下面一层。
- 旋转:组件可以按顺时针旋转90°、逆时针旋转90°、水平旋转,垂直旋转和自定义角度等。
- 对齐:将所选中的组件(包括图片)按特定的方向对齐,包含左对齐、右对齐、上对齐、下对齐、水平等间隔和垂直等间隔等
- 组合:将多个组件编为一个组,便于同时对多个组件进行操作,如复制、改变组件的位置等。
- 取消组合:取消多个组件组合,恢复组件独立性。
- 锁定:用于锁定组件。组件锁定后,该组件将不能被选中,不可改变组件显示位置等。若要对组件进行操作,需解锁。
- 解锁:用于解锁被锁定的组件,解锁后的组件可进行操作。
- 图库:用于给画布中添加图片,图库中可以收藏一些常用的图片,若无法满足需求还可以从本地上传一些常用图片到收藏夹中。
- 设备绑定:绑定设置,用于组件在画布中的属性绑定和交互。
- 导入:支持把导出的组态文件导入进来,导入进来组态文件的数据源与当前组态不一致时只兼容界面设计。
- 导出:支持把组态工程导出,可用于存档或者在新组态中应用。
- 撤销:撤销上一步操作。
- 恢复:恢复已被撤销的操作。
- 缩放:支持页面的画布按照比例进行缩放显示。
- 保存:对当前的组态设计进行保存,支持点击“保存”按钮手动保存。
- 预览:对当前组态设计的效果预览查看,点击“预览”,按钮即可打开当前组态设画面;
- 帮助:可以直接跳转到我们的文档说明,参考文档进行操作。
# 四、组件库
组件作为组态的重要组成部分,是组态的核心。通过拖拽所需的组件到画布中,在配置组件的样式和数据,实现组件直接的数据交换,共同构建出各种工业场景。组件包括:基本组件、基本形状、统计图形、图库组件、图表组件和更多组件等
# 1. 基本组件
![](/doc/assets/img/img_22.2fe7003d.png)
基本组件包括:面板、文字、数显框、数显面板、状态开关、按钮、水流、液位、萤石云视频、直播视频、通用视频、时间、地图、天气、报警记录、维修记录、三维场景、VR场景、数据表格等
# 1.1 文字
用来表达和展示所指定的内容,可在组件样式中直接输入文本。
在组件样式中支持位置、尺寸、组件名称、图层高度、背景颜色、透明度、边框圆角、阴影长度、阴影颜色、文字、对齐方式、字体类型、字体样式、字体粗细、字体大小、组件颜色、组件显隐、边框宽度、边框颜色,详情参考样式配置。
在数据绑定中支持该元件的事件、动画配置,详情参考数据绑定。
# 1.2 数显框
用来表达数字的变化,绑定参数后实时显示当前设备推送的数值。
在组件样式中支持位置、尺寸、组件名称、图层高度、背景颜色、透明度、边框圆角、阴影长度、阴影颜色、文字、对齐方式、字体类型、字体大小、组件颜色、数据类型、小数位数、组件显隐,详情参考样式配置。
在数据绑定中支持该元件的参数绑定、事件、动画、填充条件配置,详情参考数据绑定。
# 1.3 数显面板
用于表示多个数显框的组合,避免重复使用多个数显框进行组合搭建,由标题和表格组成,可绑定多个参数,可设置标题,可自定义展示列属性。
在组件样式中支持位置、尺寸、组件名称、图层高度、背景颜色、透明度、边框圆角、阴影长度、阴影颜色、图片选择、对齐方式、字体大小、组件颜色、组件显隐、边框宽度、边框颜色、标题大小、标题显隐,详情参考样式配置。
在数据绑定中支持该元件的参数绑定、标题名称、表格配置。
1、绑定变量:点击“编辑图标”可以进行多个参数绑定选择。
2、标题名称:可修改标题名称,也可以在组件样式中隐藏掉标题。
3、表格配置:配置表格要显示的属性列,和该列的字体颜色。
# 1.4 状态开关
用于元件点击后切换开关状态,或者设备上下线,开关状态切换,可以在数据绑定中进行配置。
在组件样式中支持位置、尺寸、组件名称、图层高度、背景颜色、透明度、阴影长度、阴影颜色、图片选择、滤镜/阴影、组件颜色、组件显隐,详情参考样式配置。
在数据绑定中支持该元件的参数绑定、事件、状态开关配置。
1、参数绑定:在绑定参数中可以选择绑定的是变量状态还是设备状态。如果选择变量状态,则“状态开关”将根据绑定的变量条件进行状态切换;如果选择设备状态,则“状态开关”将根据设备上下线状态进行状态切换。
2、事件:设置点击事件,实现点击后状态变化,详情参考数据绑定。
3、状态开关:状态类型为变量状态时可以进行状态条件配置(可先设置“点击事件”,选择“开关控制”,并设置“状态开关”条件,当点击时组件会给设备发送数据,设备接受到数据后需给组件反馈数据,反馈数据如符合“状态开关”条件,就可以安装状态开关条件设置的图片或者颜色进行切换),详情参考数据绑定;状态类型为设备状态时可进行设备上下线配置。
# 1.5 按钮
通过按钮可通过对设备一些变量进行指令下发控制,可设置密码,如果密码不正确无法下发指令。
在组件样式中支持位置、尺寸、组件名称、图层高度、背景颜色、透明度、阴影长度、阴影颜色、图片选择、文字、对齐方式、字体类型、字体大小、组件颜色、组件显隐,详情参考样式配置。
在数据绑定中支持该元件的事件、组件密码、动画配置,详情参考数据绑定。
1、事件:参考数据绑定。
2、设置密码:可给改组件点击时配置密码,密码正确方可响应点击事件
3、动画:参考数据绑定。
# 1.6 水流
水流组件可以配合管道图库来使用,可自行设置组件样式,可调整图层高度,方可展示到其他图片上方。
在组件样式中支持位置、尺寸、组件名称、图层高度、背景颜色、组件颜色、组件显隐、线条宽度、线条高度、线条间隔、线条形状、流动方向、流动速度、锚点个数,详情参考样式配置。
在数据绑定中支持该元件的变量绑定、流动参数配置。
![](/doc/assets/img/img_39.4c832e68.png)
1、参数绑定:参考数据绑定。
2、流动参数:可进行两组流动方向条件配置,在满足判断条件下进行流动方向改变。
# 1.7 液位
液位组件可以配合一些箱体罐体图库来使用,用于显示液体高度。
在组件样式中支持位置、尺寸、组件名称、图层高度、背景颜色、透明度、阴影长度、阴影颜色、组件显隐、液位形状、波浪颜色、液位标签、字体大小、边框宽度、边框颜色,详情参考样式配置。
在数据绑定中支持该元件的变量绑定。详情参考数据绑定。
<
# 1.8 天气
天气组件,一个组态页面只能有一个天气组件,可在数据绑定选择具体位置。
在组件样式中支持位置、尺寸、组件名称、天气样式、图层高度、背景颜色、透明度、边框圆角、阴影长度、阴影颜色、字体类型、组件颜色、组件显隐、边框宽度、边框颜色,详情参考样式配置。
在数据绑定中支持该元件的位置选择。
# 1.9 数据表格
数据表格展示实时数据或历史数据的报表,支持数据来源和表格列配置。
在组件样式中支持位置、尺寸、组件名称、图层高度、背景颜色、透明度、边框圆角、字体大小、组件颜色、组件显隐、边框宽度、边框颜色,详情参考样式配置。
在数据绑定中支持该元件的参数绑定、表格类型和表格配置。
1、表格类型:该元件支持选择实时数据表格或历史数据表格。
2、表格配置:用于配置数据表格的展示列。
# 2. 基本形状
![](/doc/assets/img/img_23.0a884341.png)
基本形状包括:三角、矩形、圆形、直线、箭头线、曲线、竖线和表格等
# 2.1 表格
表格元件仅支持样式配置,在组件样式中支持位置、尺寸、组件名称、图层高度、背景颜色、透明度、对齐方式、字体类型、字体样式、字体粗细、字体大小、组件颜色、组件显隐,详情参考样式配置。
在数据绑定中支持该元件的动画配置。详情参考数据绑定。
1、行数插入:选中表格元件,增加行数。
2、行数删除:选中表格元件,减少行数。
3、列数插入:选中表格元件,增加列数。
4、列数删除:选中表格元件,减少列数。
注意:双击表格元件后再单击单个单元格,可以针对每个单元格设置文本,文本的设置是针对整个表格内的所有内容有效。
# 3. 统计图形
![](/doc/assets/img/img_24.c2dcc66a.png)
基本形状包括:曲线图、折线图、柱状图、饼形图、仪表图、温度计、地图和自定义图形等
# 4. 图库组件
![](/doc/assets/img/img_25.1bfdb17c.png)
图库组件包括“图库管理”中所有图片
可以向画布中添加任何“图库管理”中的图片,支持组件样式和数据绑定
表格元件仅支持样式配置,在组件样式中支持位置、尺寸、组件名称、图层高度、背景颜色、透明度、图片选择、滤镜/阴影、组件颜色、组件显隐、边框宽度、边框颜色、行数、列数,详情参考样式配置。
在数据绑定中支持该元件的参数绑定、事件、动画和状态开关配置。详情参考数据绑定。
# 5. 图表组件
![](/doc/assets/img/img_26.fb0d35b2.png)
图表组件包括“图表管理”中所有自定义的图表,支持echart图表的扩展。
表格元件仅支持样式配置,在组件样式中支持位置、尺寸、组件名称、图层高度、背景颜色、透明度、组件显隐、代码视图,详情参考样式配置。
在数据绑定中支持该元件的数据请求和函数过滤。
1、数据请求:配置请求的url,如果是系统中的url,只需要配置出前置地址之外的url便可,支持get、post、put请求方式;支持设置循环请求时间,单位为秒、分、时;支持 Params、Body 和 Headers 配置。
2、过滤器:可以添加过滤函数,对使用url请求获取到的数据进行,函数组合,生成图表所需要的数据格式类型。
3、代码视图:配置代码视图,默认处理完后的数据对象为“echartData”。
注意:其他配置需结合echart参数配置进行设置。
# 6. 更多组件
![](/doc/assets/img/img_27.c1b57d05.png)
更多组件包括“组件管理”中所以自定义的组件
# 五、画布
组态设计页面区域,支持对画布的尺寸、背景颜色等进行设置
![](/doc/assets/img/img_28.aae31a35.png)
# 六、快捷操作
# 1. 拖转缩放画布
- 在预览的状态下,按住左键不放开,可以拖拽
- 在预览的状态下,滑动鼠标可以进行缩放
# 2. 画布缩放
- 按住 TRL + COM,同时鼠标滚轮,可以实现快速缩放。
# 3. 预览
- 按F12可以进行预览
# 七、组件开发扩展
以Text组件为例
注意
务必进行的测试:
- 左边导航栏
- 画布
- 右侧配置栏 -> 变量配置
- 预览 -> 使用mqtt进行数据绑定
- 1.首先在 scada 的文件夹里新增基础配置文件
路径 | 功能 |
---|---|
scada/topo/components/data-toolbox/base.json | 定义组件在左边导航栏中的属性和参数 |
scada/topo/components/control/ViewText.vue | 定义组件功能,数据绑定 |
scada/topo/components/topoBase.vue | 导入组件 |
scada/topo/components/topoProperties.vue | 定义右侧配置栏样式和参数属性 |
scada/topo/components/topoToolbox.vue | 对组件进行分类 |
- 2.在 components/data-toolbox/base.json 中定义,组件的在导航栏中的属性、位置、样式
{
"title": "基本",
"icon": "base",
"opened": false,
"items": [
{
"text": "文字",
"icon": "base/word.png",
"type": "static",
"info": {
"type": "text",
"componentShow": ["单击", "组件颜色", "动画"],
"action": [],
"dataBind": {
"djAction": false,
"action": "",
"productId": "",
"serialNumber": "",
"slaveId": "",
"identifier": "",
"modelName": "",
"modelValue": "",
"redirectUrl": ""
},
"dataAction": {
"xyAction": false,
"xzAction": false,
"ssAction": false,
"hdAction": false,
"serialNumber": "",
"identifier": "",
"modelName": "",
"paramJudge": "",
"paramJudgeData": "",
"rotationSpeed": "中",
"translateList": []
},
"style": {
"position": {
"x": 0,
"y": 0,
"w": 100,
"h": 30
},
"backColor": "#ff000000",
"foreColor": "#000",
"zIndex": 1,
"transform": 0,
"transformType": "rotate(0deg)",
"waterBorderWidth": 1,
"waterBorderColor": "rgba(255, 255, 255, 0)",
"text": "Test",
"textAlign": "center",
"fontSize": 14,
"fontFamily": "Arial"
}
}
},
]
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
- 3.在 components/control 中定义组件,编写组件功能和参数通讯
<template>
<div
:style="{
fontSize: detail.style.fontSize + 'px',
fontFamily: detail.style.fontFamily,
color: detail.style.foreColor,
textAlign: detail.style.textAlign,
lineHeight: detail.style.position.h + 'px',
border: detail.style.waterBorderWidth + 'px solid !important',
borderRadius: detail.style.borderRadius + 'px !important',
borderColor: detail.style.waterBorderColor,
}"
:class="classStyle"
:id="detail.identifier"
>
{{ detail.style.text }}
<div v-show="false">{{ dataInit }}</div>
</div>
</template>
<script>
import { mapState } from 'vuex';
import BaseView from './View';
import topoUtil from '@/utils/topo/topo-util';
import { getAnimate } from '@/utils/topo/anime';
export default {
name: 'view-text',
extends: BaseView,
data() {
return {
classStyle: null,
};
},
computed: {
...mapState({
mqttData: (state) => state.topoEditor.mqttData,
}),
dataInit() {
if (this.mqttData) {
// 数显款数值初始化
if (this.detail.dataBind.identifier && this.mqttData.serialNumber == this.detail.dataBind.serialNumber) {
const message = this.mqttData.message.find((item) => item.id === this.detail.dataBind.identifier);
if (message) {
let value = !message.value ? 0 : message.value;
if (this.detail.componentShow.indexOf('参数绑定') > -1) {
let unit = this.detail.dataBind.paramUnit == null ? '' : this.detail.dataBind.paramUnit;
this.detail.style.text = value + unit;
}
}
}
// 动画初始化
if (
this.detail.dataAction.serialNumber &&
this.detail.dataAction.identifier &&
this.detail.dataAction.paramJudge &&
this.detail.dataAction.paramJudgeData != undefined &&
this.mqttData.serialNumber == this.detail.dataAction.serialNumber
) {
const message = this.mqttData.message.find((item) => item.id === this.detail.dataAction.identifier);
if (message) {
let val = message.value;
let isGd = topoUtil.judgeSize(this.detail.dataAction.paramJudge, val, this.detail.dataAction.paramJudgeData);
if (isGd) {
if (this.detail.dataBind.xyAction) {
// 显隐判断
getAnimate().set(document.getElementById(this.detail.identifier), {
display: 'block',
});
}
if (this.animateView) {
this.animateView.play();
}
} else {
if (this.detail.dataBind.xyAction) {
// 显隐判断
getAnimate().set(document.getElementById(this.detail.identifier), {
display: 'none',
});
}
if (this.animateView) {
this.animateView.pause();
}
}
}
}
}
},
},
methods: {},
};
</script>
<style lang="scss" scoped>
.view-text {
height: 100%;
width: 100%;
}
</style>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
- 4.在 components/topoBase.vue 导入定义的组件
<script>
import ViewText from './control/ViewText';
export default {
name: 'TopoBase',
components: {
ViewText,
},
};
</script>
2
3
4
5
6
7
8
9
10
- 5.在 components/topoProperties.vue 定义参数
![](/doc/assets/img/img_29.c8e5338e.png)
- 6.如果需要对组件进行归类或者新增类型可在 components/topoToolbox.vue 添加类别
![](/doc/assets/img/img_30.822da28d.png)