组态编辑器

fastbee2024年9月27日大约 23 分钟

一、概述

提示

FastBee组态编辑器主要由顶部工具栏、左侧导航栏、画布、右侧配置栏组成。

工具栏：常见的执行操作，例如复制、删除、置顶、置底、旋转、对齐、组合、锁定、图库、导入、导出、撤销、恢复、缩放、保存、预览。
PC端：支web端网页设计，页面可设置多种分辨率。
移动端：暂不支持，后期可以通过分享在移动端查看。
基本组件：具备丰富的基础组件，包括基本组件、基本形态、统计图，可以更好的模拟工业场景。
图库：可以通过“图库管理”上传素材，图库也提供了大量高级控件，可用于生动展现各种场景。
画布：通过把组件拖拽放置于此，多个组件组合，共同完成生动的工业生产流程场景。
数据：可以通过mqtt或者http的形式为组件绑定数据来源实现交互功能。
样式：编辑组件位置、大小、颜色等。

二、组件配置

1. 页面配置

在画布区域中点击空白处，右侧便会出现”页面”配置栏设置。

背景名称：设置画布背景的名称
分辨率：设置页面画布的大小，系统给出常见的尺寸，也支持自定义画布尺寸。
背景颜色：给背景设置颜色，支持设置任何颜色。
背景图片：可以添加背景图片，增加界面设计感。
拖拽缩放：开启后可在预览时对画布进行拖拽和缩放。

2. 样式设置

设置组件在页面中的样式展示，包括位置尺寸、名称、文本、外观等，不同组件配置的内容可能不同，选中组件，右侧便会出现”组件”配置栏设置。

位置和尺寸：设置组件在页面画布的显示位置与尺寸，X坐标和Y坐标，分别以页面左上角为起点坐标[0,0]，设置X轴和Y轴的值，调整组件在页面中的位置；宽度和宽度，就是组件的宽度和高度，用于调整组件尺寸。
组件名称：支持给画布上的组件自定义设置名称，用于标记组件的作用等，同时在组态预览时不会显示设置的标题名称；
角度：以组件为中心，组件可以按顺时针或者逆时针旋转任意角度，在右上角“圆盘”旋转，设置想要旋转的角度即可。

基本样式：可设置组件的外观，包括不限于图层高度、背景颜色、透明度、边框圆角、阴影颜色、组件显隐等
特定属性：根据组件的不同，拥有不同的特有属性，以“文本”为例，支持设置文本的文字、对齐方式、字体、大小、颜色、边框、边框颜色等

3. 数据绑定

支持对组件变量状态、事件、动画效果、交互进行配置，不同组件配置的内容不同，不同组件的配置将在下面介绍，选中组件，右侧便会出现”组件”配置栏设置，点击“数据绑定”

参数绑定：组件展示数据的来源。选择设备、选择变量，所关联的变量就是产生数据的来源。
a.先从顶部工具栏中绑定设备
b.选择变量
事件：绑定组件的单击事件，包含操作变量、跳转外部链接、打开已经完成的组态页面窗口等。
a.勾选“单击” CheckBox，然后点击编辑图标，进入编辑状态
b.根据需求自行配置动作类型（后期可扩展）
动画效果：动效有4种，分别为”显隐”、”旋转”、”闪烁” 和 ”滑动”。
a.显隐：勾选”显隐”字段 CheckBox, 并点击”编辑”图标，会出现设置的弹窗。选择变量，设置绑定变量的范围大小，为隐藏的触发条件。
b.旋转：勾选”旋转”字段 CheckBox, 并点击”编辑”图标，会出现设置的弹窗。选择变量，设置绑定变量的范围大小，为隐藏的触发条，同时可选择动画快慢。
c.闪烁：勾选”闪烁”字段 CheckBox, 并点击”编辑”图标，会出现设置的弹窗。选择变量，设置绑定变量的范围大小，为隐藏的触发条件。设置弹框和”显隐”一样。
d.闪烁：勾选”滑动”字段 CheckBox, 并点击”编辑”图标，会出现设置的弹窗。选择变量，设置绑定变量的范围大小，为隐藏的触发条件,同时可设置滑动周期和滑动位置。
填充颜色：定义参数包括判断条件、判断值、填充色的配置
a.添加：点击“加号”可新增填充条件，需要配置条件参数，和填充色。
b.删除：点击“删除图标”可以由下向上一次删除所添加的填充条件。
状态开关：定义参数包括判断条件、判断值、状态图片、填充色的配置
a.添加：点击“加号”可新增状态开关条件，需要配置条件参数，状态图片和填充色。
b.删除：点击“删除图标”可以由下向上一次删除所添加的状态开关条件。

三、工具栏

工具栏为组件在画布中提供了一些常用操作功能，从左到右功能依次如下

复制：在画布中，复制多个相同配置的组件。
删除：删除单个或者多个画布中的组件。
置顶：在多个组件堆叠的情况下，将选中组件移到最上面一层。
置底：在多个组件堆叠的情况下，将选中组件移到最下面一层。
旋转：组件可以按顺时针旋转90°、逆时针旋转90°、水平旋转，垂直旋转和自定义角度等。
对齐：将所选中的组件（包括图片）按特定的方向对齐，包含左对齐、右对齐、上对齐、下对齐、水平等间隔和垂直等间隔等
组合：将多个组件编为一个组，便于同时对多个组件进行操作，如复制、改变组件的位置等。
取消组合：取消多个组件组合，恢复组件独立性。
锁定：用于锁定组件。组件锁定后，该组件将不能被选中，不可改变组件显示位置等。若要对组件进行操作，需解锁。
解锁：用于解锁被锁定的组件，解锁后的组件可进行操作。
图库：用于给画布中添加图片，图库中可以收藏一些常用的图片，若无法满足需求还可以从本地上传一些常用图片到收藏夹中。
设备绑定：绑定设置，用于组件在画布中的属性绑定和交互。
导入：支持把导出的组态文件导入进来，导入进来组态文件的数据源与当前组态不一致时只兼容界面设计。
导出：支持把组态工程导出，可用于存档或者在新组态中应用。
撤销：撤销上一步操作。
恢复：恢复已被撤销的操作。
缩放：支持页面的画布按照比例进行缩放显示。
保存：对当前的组态设计进行保存，支持点击“保存”按钮手动保存。
预览：对当前组态设计的效果预览查看，点击“预览”，按钮即可打开当前组态设画面；
帮助：可以直接跳转到我们的文档说明，参考文档进行操作。

四、组件库

组件作为组态的重要组成部分，是组态的核心。通过拖拽所需的组件到画布中，在配置组件的样式和数据，实现组件直接的数据交换，共同构建出各种工业场景。组件包括：基本组件、基本形状、统计图形、图库组件、图表组件和更多组件等

1. 基本组件

基本组件包括：面板、文字、数显框、数显面板、状态开关、按钮、水流、液位、萤石云视频、直播视频、通用视频、时间、地图、天气、报警记录、维修记录、三维场景、VR场景、数据表格等

1.1 文字

用来表达和展示所指定的内容，可在组件样式中直接输入文本。
在组件样式中支持位置、尺寸、组件名称、图层高度、背景颜色、透明度、边框圆角、阴影长度、阴影颜色、文字、对齐方式、字体类型、字体样式、字体粗细、字体大小、组件颜色、组件显隐、边框宽度、边框颜色，详情参考样式配置。
在数据绑定中支持该元件的事件、动画配置，详情参考数据绑定。

1.2 数显框

用来表达数字的变化，绑定参数后实时显示当前设备推送的数值。
在组件样式中支持位置、尺寸、组件名称、图层高度、背景颜色、透明度、边框圆角、阴影长度、阴影颜色、文字、对齐方式、字体类型、字体大小、组件颜色、数据类型、小数位数、组件显隐，详情参考样式配置。
在数据绑定中支持该元件的参数绑定、事件、动画、填充条件配置，详情参考数据绑定。

用于表示多个数显框的组合，避免重复使用多个数显框进行组合搭建，由标题和表格组成，可绑定多个参数，可设置标题，可自定义展示列属性。
在组件样式中支持位置、尺寸、组件名称、图层高度、背景颜色、透明度、边框圆角、阴影长度、阴影颜色、图片选择、对齐方式、字体大小、组件颜色、组件显隐、边框宽度、边框颜色、标题大小、标题显隐，详情参考样式配置。
在数据绑定中支持该元件的参数绑定、标题名称、表格配置。

1、绑定变量：点击“编辑图标”可以进行多个参数绑定选择。
2、标题名称：可修改标题名称，也可以在组件样式中隐藏掉标题。

3、表格配置：配置表格要显示的属性列，和该列的字体颜色。

1.4 状态开关

用于元件点击后切换开关状态，或者设备上下线，开关状态切换，可以在数据绑定中进行配置。
在组件样式中支持位置、尺寸、组件名称、图层高度、背景颜色、透明度、阴影长度、阴影颜色、图片选择、滤镜/阴影、组件颜色、组件显隐，详情参考样式配置。
在数据绑定中支持该元件的参数绑定、事件、状态开关配置。

1、参数绑定：在绑定参数中可以选择绑定的是变量状态还是设备状态。如果选择变量状态，则“状态开关”将根据绑定的变量条件进行状态切换；如果选择设备状态，则“状态开关”将根据设备上下线状态进行状态切换。
2、事件：设置点击事件，实现点击后状态变化，详情参考数据绑定。
3、状态开关：状态类型为变量状态时可以进行状态条件配置（可先设置“点击事件”，选择“开关控制”，并设置“状态开关”条件，当点击时组件会给设备发送数据，设备接受到数据后需给组件反馈数据，反馈数据如符合“状态开关”条件，就可以安装状态开关条件设置的图片或者颜色进行切换），详情参考数据绑定；状态类型为设备状态时可进行设备上下线配置。

1.5 按钮

通过按钮可通过对设备一些变量进行指令下发控制，可设置密码，如果密码不正确无法下发指令。
在组件样式中支持位置、尺寸、组件名称、图层高度、背景颜色、透明度、阴影长度、阴影颜色、图片选择、文字、对齐方式、字体类型、字体大小、组件颜色、组件显隐，详情参考样式配置。
在数据绑定中支持该元件的事件、组件密码、动画配置，详情参考数据绑定。

1、事件：参考数据绑定。
2、设置密码：可给改组件点击时配置密码，密码正确方可响应点击事件

3、动画：参考数据绑定。

1.6 水流

水流组件可以配合管道图库来使用，可自行设置组件样式，可调整图层高度，方可展示到其他图片上方。
在组件样式中支持位置、尺寸、组件名称、图层高度、背景颜色、组件颜色、组件显隐、线条宽度、线条高度、线条间隔、线条形状、流动方向、流动速度、锚点个数，详情参考样式配置。
在数据绑定中支持该元件的变量绑定、流动参数配置。

1、参数绑定：参考数据绑定。
2、流动参数：可进行两组流动方向条件配置，在满足判断条件下进行流动方向改变。

1.7 液位

液位组件可以配合一些箱体罐体图库来使用，用于显示液体高度。
在组件样式中支持位置、尺寸、组件名称、图层高度、背景颜色、透明度、阴影长度、阴影颜色、组件显隐、液位形状、波浪颜色、液位标签、字体大小、边框宽度、边框颜色，详情参考样式配置。
在数据绑定中支持该元件的变量绑定。详情参考数据绑定。
<

1.8 天气

天气组件，一个组态页面只能有一个天气组件，可在数据绑定选择具体位置。
在组件样式中支持位置、尺寸、组件名称、天气样式、图层高度、背景颜色、透明度、边框圆角、阴影长度、阴影颜色、字体类型、组件颜色、组件显隐、边框宽度、边框颜色，详情参考样式配置。
在数据绑定中支持该元件的位置选择。

1.9 数据表格

数据表格展示实时数据或历史数据的报表，支持数据来源和表格列配置。在组件样式中支持位置、尺寸、组件名称、图层高度、背景颜色、透明度、边框圆角、字体大小、组件颜色、组件显隐、边框宽度、边框颜色，详情参考样式配置。
在数据绑定中支持该元件的参数绑定、表格类型和表格配置。
1、表格类型：该元件支持选择实时数据表格或历史数据表格。

2、表格配置：用于配置数据表格的展示列。

2. 基本形状

基本形状包括：三角、矩形、圆形、直线、箭头线、曲线、竖线和表格等

2.1 表格

表格元件仅支持样式配置，在组件样式中支持位置、尺寸、组件名称、图层高度、背景颜色、透明度、对齐方式、字体类型、字体样式、字体粗细、字体大小、组件颜色、组件显隐，详情参考样式配置。
在数据绑定中支持该元件的动画配置。详情参考数据绑定。
1、行数插入：选中表格元件，增加行数。
2、行数删除：选中表格元件，减少行数。
3、列数插入：选中表格元件，增加列数。
4、列数删除：选中表格元件，减少列数。
注意：双击表格元件后再单击单个单元格，可以针对每个单元格设置文本，文本的设置是针对整个表格内的所有内容有效。

在预览的状态下，按住左键不放开，可以拖拽
在预览的状态下，滑动鼠标可以进行缩放

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"
                }
            }
        },
    ]
}

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>

4.在 components/topoBase.vue 导入定义的组件

<script>
import ViewText from './control/ViewText';

export default {
    name: 'TopoBase',
    components: {
        ViewText,
    },
};
</script>

5.在 components/topoProperties.vue 定义参数

6.如果需要对组件进行归类或者新增类型可在 components/topoToolbox.vue 添加类别

组态编辑器

一、概述

二、组件配置

1. 页面配置

2. 样式设置

3. 数据绑定

三、工具栏

四、组件库

1. 基本组件

1.1 文字

1.2 数显框

1.3 数显面板

1.4 状态开关

1.5 按钮

1.6 水流

1.7 液位

1.8 天气

1.9 数据表格

2. 基本形状

2.1 表格

3. 统计图形

3.1 曲线图

3.2 折线图

3.3 柱状图

3.8 自定义

4. 图库组件

5. 图表组件

6. 更多组件

五、画布

六、快捷操作

1. 拖转缩放画布

2. 画布缩放

3. 预览

七、组件开发扩展