组态管理
提示
组态是指用户通过类似搭积木的方式,使用编辑器提供的工具和方法,就能通过简单直观的界面来配置和控制自动化过程和装备,而不需要编写计算机程序。在组态管理中,提供了丰富的场景素材控件,能够自由拖拽搭建监控场景,实时显示设备运行状态等信息。
# 一、产品特点
FastBeeWeb组态本质上可以理解为一款集成的可视化工具,为用户提供一个方便便捷的可视化设计与开发环境,基于此环境完成可视化页面的搭建。
- 支持2D画面构造,可导入3Durl作为组件,后续将继续完善3D的其他方式导入。
- 支持本地/云端部署,多终端使用。
- 支持mqtt协议,支持扩展更多协议。
- 支持嵌入第三方系统或者集成在FastBee平台中。
- 低代码可视化拖拽编辑。
- 提供丰富的行业标准图元库,并可自行扩展。
- 提供行业模板和组件,支持自定义图表和组件。
![](/doc/assets/img/img_1.111569ca.png)
# 二、技术特点
- 基于 Vue2 框架编写,使用 elementUI,符合大家开发习惯
- 设备属性通过 mqtt 协议和 http 协议与后端交互
- 技术栈为:Vue2 + ElementUI + Mqtt + DataView + ECharts4 + Axios + Springboot + Mysql + Redis
![](/doc/assets/img/img_2.b2149ecd.png)
# 项目整合和运行
# 1.前端
- 获取源码后,修改文件夹名称为
scada
,然后放置于项目的 fastbee/vue/src/views 文件夹下
完整路径如下:
/fastbee/vue/src/views/scada
2
- 将源码中名称为
config
文件夹下的topo-data
和topo-img
的文件夹分别剪切到项目fastbee/vue/src/assets 文件夹下
完整路径如下:
/fastbee/vue/src/assets/topo-data
/fastbee/vue/src/assets/topo-img
2
3
- 将源码中名称为
config
文件夹下的topo
的文件夹剪切到项目fastbee/vue/src/utils 文件夹下
完整路径如下:
/fastbee/vue/src/utils/topo
2
- 将源码中名称为
config/topoJs
文件夹下的uid.js
的文件剪切到项目fastbee/vue/src/utils 文件夹下
完整路径如下:
/fastbee/vue/src/utils/uid.js
2
- 将源码中名称为
config/topoJs
文件夹下的index.js
的文件里面的所有代码复制到项目fastbee/vue/src/utils/index.js 文件里面,直接在文件末尾添加即可,对比完成后可删除源码中的这个文件
完整路径如下:
/fastbee/vue/src/utils/index.js
2
- 将源码中名称为
config
文件夹下的scada
的文件夹剪切到项目fastbee/vue/src/api 文件夹下
完整路径如下:
/fastbee/vue/src/api/scada
2
- 将源码中名称为
config
文件夹下的json
和echarts-map-json
的文件夹剪切到项目fastbee/vue/src/assets 文件夹下
完整路径如下:
/fastbee/vue/src/assets/json
/fastbee/vue/src/assets/echarts-map-json
2
3
- 将源码中名称为
config
文件夹下的package.json
和vue.config.js
的文件与项目fastbee/vue 文件夹下的这两个文件,然后需要分别仔细对比两个文件的差异,将主系统中没有的部分,从组态源码中复制过去,对比完成后可删除源码中的这两个文件
完整路径如下:
/fastbee/vue/package.json
/fastbee/vue/vue.config.js
2
3
- 将源码中名称为
config
文件夹下的images
的文件夹下的所有图片复制到项目fastbee/vue/src/assets/images 文件夹下
完整路径如下:
/fastbee/vue/src/assets/images`
2
- 将源码中名称为
config/topoJs
文件夹下的main.js
的文件与项目fastbee/vue/src/main.js 文件仔细对比,将组态源码特有的代码复制到主项目 fastbee/vue/src/main.js里面,对比完成后可删除源码中的这个文件
完整路径如下:
/fastbee/vue/src/main.js`
2
- 将源码中名称为
config/router
文件夹下的index.txt
的文件,根据里面的步骤将对应代码复制到项目fastbee/vue/src/router/index.js 文件里面
完整路径如下:
/fastbee/vue/src/router/index.js`
2
- 将源码中名称为
config
文件夹下的MonacoEditor
的文件夹剪切到项目fastbee/vue/src/components 文件夹下
完整路径如下:
/fastbee/vue/src/components/MonacoEditor`
2
- 将源码中名称为
config
文件夹下的svg
的文件夹里面的所有图片复制到项目fastbee/vue/src/assets/icons/svg 文件夹下
完整路径如下:
/fastbee/vue/src/assets/icons/svg`
2
- 将源码中名称为
config
文件夹下的topo-editor
的文件夹剪切到项目fastbee/vue/src/store/modules 文件夹下
完整路径如下:
/fastbee/vue/src/store/modules/topo-editor`
2
- 将源码中名称为
config/topoJs
文件夹下的store-index.js
的文件,与主系统的 fastbee/vue/src/store/index.js 文件对比下,将组态源码特有的代码部分复制到主系统此文件中,对比完成后可删除源码中的这个文件
完整路径如下:
/fastbee/vue/src/store/index.js`
2
命令窗口执行
npm install
安装相关插件命令窗口执行
npm run dev
运行项目即可
# 2.后端
- 获取源码后,修改文件夹名称为
fastbee-scada
,然后放置于项目的fastbee/sprintboot
文件夹下
完整路径: /fastbee/sprintboot/fastbee-scada
- 执行组态sql目录下的sql文件时,建议先比对一下自己系统的数据(防止已有的会重复添加),然后自己整理出一份新的sql文件执行
提示
主系统v2.3及以后的版本sql里已经包含组态相关的菜单和字典数据,不需要重复执行; 只需要把组态相关的表结构整合到主系统sql就行;请仔细查看一下组态sql文件,已在sql文件里提示了
- 图库文件夹(avatar)需要上传至服务器才可使用,因为文件夹太大,没有放在代码目录里,购买后单独发
提示
在服务器上/var/data/java/uploadPath目录下找到已有的avatar文件夹,如果没有,可直接将avatar文件夹上传至此目录下;如果已存在(建议先备份),然后需要自己比对两份文件夹内容,合并出新的一份avatar文件夹,然后再上传,切勿直接替换,不然会把已有的文件弄没了
- 上述组态模块部分代码依赖其他模块的方法,需要按照以下步骤去配置(以下代码已提交到2.2版本里面)
提示
- 拥有FastBee仓库权限,拉一下仓库最新代码,把组态文件夹复制到主系统,只需把springboot目录下pom.xml文件和fastbee-admin目录下pom.xml文件里面关于组态依赖配置代码注释放开就行
- 没有FastBee仓库权限,参照以下步骤,把相关代码复制到相关文件里
- 修改pom依赖配置,刷新maven依赖,重新加载项目
- 在/fastbee/sprintboot/pom.xml配置文件里添加以下配置
// 提示:以下代码加在<modules> </modules> 里面
<module>fastbee-scada</module>
2
// 提示:以下代码加在<dependencies> </dependencies> 里面
<!-- 组态模块 -->
<dependency>
<groupId>com.fastbee</groupId>
<artifactId>fastbee-scada</artifactId>
<version>${fastbee.version}</version>
</dependency>
2
3
4
5
6
7
- 在/fastbee/sprintboot/fastbee-admin/pom.xml配置文件里添加以下配置
// 提示:以下加在<dependencies> </dependencies> 里面
<!-- 组态模块 -->
<dependency>
<groupId>com.fastbee</groupId>
<artifactId>fastbee-scada</artifactId>
</dependency>
2
3
4
5
6
- 搜索以下三个文件,分别添加代码,已存在可忽略
// 1、DeviceLog文件
private List<String> identityList;
public List<String> getIdentityList() {
return identityList;
}
public void setIdentityList(List<String> identityList) {
this.identityList = identityList;
}
// 2、FunctionLog文件
private List<String> identifyList;
// EventLog文件
private List<String> identityList;
public List<String> getIdentityList() {
return identityList;
}
public void setIdentityList(List<String> identityList) {
this.identityList = identityList;
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
- 在以下文件里分别添加代码,查询属性物模型历史数据
// 搜索IDeviceLogService文件
/**
* 查询物模型历史数据
* @param deviceLog 设备日志
* @return java.util.List<com.fastbee.iot.model.HistoryModel>
*/
List<HistoryModel> listHistory(DeviceLog deviceLog);
// 搜索DeviceLogServiceImpl文件
@Override
public List<HistoryModel> listHistory(DeviceLog deviceLog) {
return logService.listHistory(deviceLog);
}
// 搜索ILogService文件
/**
* 查询物模型历史数据
* @param deviceLog 设备日志
* @return java.util.List<com.fastbee.iot.model.HistoryModel>
*/
List<HistoryModel> listHistory(DeviceLog deviceLog);
// 搜索MySqlLogServiceImpl文件
@Override
public List<HistoryModel> listHistory(DeviceLog deviceLog) {
return deviceLogMapper.listHistory(deviceLog);
}
// 搜索TdengineLogServiceImpl文件
@Override
public List<HistoryModel> listHistory(DeviceLog deviceLog) {
// 8时区问题
// if (StringUtils.isNotEmpty(deviceLog.getBeginTime())) {
// LocalDateTime localDateTime = DateUtils.toLocalDateTime(deviceLog.getBeginTime(), DateUtils.YYYY_MM_DD_HH_MM_SS);
// deviceLog.setBeginTime(DateUtils.localDateTimeToStr(localDateTime.minusHours(8), DateUtils.YYYY_MM_DD_HH_MM_SS));
// }
// if (StringUtils.isNotEmpty(deviceLog.getEndTime())) {
// LocalDateTime localDateTime = DateUtils.toLocalDateTime(deviceLog.getEndTime(), DateUtils.YYYY_MM_DD_HH_MM_SS);
// deviceLog.setEndTime(DateUtils.localDateTimeToStr(localDateTime.minusHours(8), DateUtils.YYYY_MM_DD_HH_MM_SS));
// }
return tdDeviceLogDAO.listHistory(dbName, deviceLog);
}
// 搜索DeviceLogMapper文件
/**
* 查询物模型历史数据
* @param deviceLog 设备日志
* @return java.util.List<com.fastbee.iot.model.HistoryModel>
*/
List<HistoryModel> listHistory(DeviceLog deviceLog);
// 搜索DeviceLogMapper.xml文件
<select id="listHistory" parameterType="com.fastbee.iot.domain.DeviceLog" resultMap="HistoryResult">
select log_value,
create_time,
identity
from iot_device_log
<where>
<if test="serialNumber != null and serialNumber != ''">
and serial_number = #{serialNumber}
</if>
<if test="beginTime != null and beginTime != '' and endTime != null and endTime != ''">
and create_time between #{beginTime} and #{endTime}
</if>
<if test="identityList != null and identityList != ''">
and identity in
<foreach collection="identityList" item="identity" open="(" separator="," close=")">
#{identity}
</foreach>
</if>
</where>
order by create_time desc
</select>
// 搜索TDDeviceLogDAO文件
List<HistoryModel> listHistory(@Param("database") String database, @Param("device") DeviceLog deviceLog);
// 搜索TDDeviceLogMapper.xml文件
<select id="listHistory" parameterType="com.fastbee.iot.domain.DeviceLog" resultMap="HistoryResult">
select log_value,
ts,
identity
from ${database}.device_log
<where>
<if test="device.beginTime != null and device.beginTime != '' and device.endTime != null and device.endTime != ''">
and ts between #{device.beginTime} and #{device.endTime}
</if>
<if test="device.serialNumber != null and device.serialNumber !=''">
and serial_number = #{device.serialNumber}
</if>
<if test="device.identityList != null and device.identityList.size > 0">
and identity in
<foreach collection="device.identityList" item="identity" open="(" separator="," close=")">
#{identity}
</foreach>
</if>
</where>
order by ts desc
</select>
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
# 三、组态中心
组态中心可对组态进行创建、编辑、预览和删除,组态可以是动态的平面工业图也可以制作大屏展示,用途广,直接绑定平台参数方便快捷。
![](/doc/assets/img/img_7.c5f1e66c.png)
# 四、图库管理
图库管理可用于上传和管理各种图片,便于在组态编辑器中使用,系统已经内置了按钮、指示灯、工业泵、储蓄罐、电机、电力符号、阀门、反应器、风机、管道、建筑物、锅炉、换热站、机械设备、交通、警示标志、人物、天气、自然、全景、3D等图。
![](/doc/assets/img/img_3.320b123d.png)
# 五、图表管理
图表管理可以基于echart进行任意的扩展,用于组态编辑器,如需使用动态数据,可以在组态编辑器中对其进行数据绑定(目前只支持url绑定,后期将兼容mqtt通讯),图表包含折线图、柱状图、饼图、散点图、K线图、雷达图、热力图、关系图、水球图、树图、旭日图、仪表图、漏斗图、路径图、3D柱图、3D地图、词云图等。
![](/doc/assets/img/img_4.be149dcd.png)
# 六、组件管理
组件管理是指用户可以自行定义组件,支持Vue和ElementUI(可以使用http进行数据请求)。
![](/doc/assets/img/img_5.005e33ae.png)
# 七、模型管理
模型管理是指通过url的方式导入3D模型,之后在组态编辑器中使用3D组件的时候可以直接选择该模型(后期可以增加其他方式导入方式)。
![](/doc/assets/img/img_6.b249ebe2.png)