iot-Scada免费Scada组态软件系列教程
系列文章目录
iot-Scada免费Scada组态软件系列教程1-初识iot-Scada
iot-Scada免费Scada组态软件系列教程2-架构设计
iot-Scada免费Scada组态软件系列教程3-各模块详细介绍
iot-Scada免费Scada组态软件系列教程4-二次开发与版本部署
前言
iot-Scada(意为:Internet of things Scada(物联网组态))是罕见的高度抽象组态平台,定位于满足各种物联网场景监控、可视化需求。本系列文章采取总分结构,能够让大家掌握整体的设计原理,再到实际应用。
# 设计思想:认识大局,把控整体,简化细节
# 技术栈:前端Vue + 后端java(springboot / cloud)+ 数据库MySQL
# 技术支持:(qq:907154198)
# demo演示地址:iot-Scada
1、物联网场景
iot-Scada组态最大优点在于高度抽象后的通用性,化繁为简,可以满足大部分物联网场景,如:
- 工业自动化系统
- 电力调度监控系统
- 管道监控
- 水利监控
- 锅炉监控
- 智慧农业物联网
- 智慧城市等
- 其他 ......
2、iot-Scada
- 高度抽象,通用、可扩展性极强
- 采用主流技术栈,方便二次开发
- 易学好上手,1小时可掌握全部
- 系统稳定可靠
3、便于集成
一键部署,功能简约而又覆盖全面
4、架构设计
前端:Vue(ElementUI、DataV、Quasar等)
后端:java(springboot)
数据库:MySQL
技术架构:由三部分构成,分别是前端组态、后端服务、前置通信服务组成,其中后端服务内置http通信接口,前置通信服务自行开发通过接口进行对接即可。
部分源代码如下:
export default {
name: 'VueRulerTool',
components: {},
props: {
position: {
type: String,
default: 'relative',
validator: function(val) {
return ['absolute', 'fixed', 'relative', 'static', 'inherit'].indexOf(val) !== -1
}
}, // 规定元素的定位类型
isHotKey: {
type: Boolean, default: true
}, // 热键开关
isScaleRevise: {
type: Boolean, default: false
}, // 刻度修正(根据content进行刻度重置)
presetLine: {
type: Array,
default: () => {
return [] // { type: 'l', site: 50 }, { type: 'v', site: 180 }
}
}, // 预置参考线
contentLayout: {
type: Object,
default: () => {
return { top: 0, left: 0 }
}
}, // 内容部分布局
parent: {
type: Boolean,
default: false
}
},
data() {
return {
windowWidth: 0, // 窗口宽度
windowHeight: 0, // 窗口高度
xScale: [], // 水平刻度
yScale: [], // 垂直刻度
topSpacing: 0, // 标尺与窗口上间距
leftSpacing: 0, // 标尺与窗口左间距
isDrag: false,
dragFlag: '', // 拖动开始标记,可能值x(从水平标尺开始拖动),y(从垂直标尺开始拖动)
levelLineList: [], // 生成的水平线列表
verticalLineList: [], // 生成的垂直线列表
levelDottedLeft: -999, // 水平虚线位置
verticalDottedTop: -999, // 垂直虚线位置
rulerWidth: 0, // 垂直标尺的宽度
rulerHeight: 0, // 水平标尺的高度
dragLineId: '', // 被移动线的ID
keyCode: {
r: 82
}, // 快捷键参数
rulerToggle: true // 标尺辅助线显示开关
}
},
watch: {
},
mounted() {
document.documentElement.addEventListener('mousemove', this.dottedLineMove, true)
document.documentElement.addEventListener('mouseup', this.dottedLineUp, true)
document.documentElement.addEventListener('keyup', this.keyboard, true)
this.init()
this.quickGeneration(this.presetLine) // 生成预置参考线
const self = this // 绑定窗口调整大小onresize事件
window.onresize = function() { // 如果直接使用this,this指向的不是vue实例
self.xScale = []
self.yScale = []
self.init()
}
},
beforeDestroy: function() {
document.documentElement.removeEventListener('mousemove', this.dottedLineMove, true)
document.documentElement.removeEventListener('mouseup', this.dottedLineUp, true)
document.documentElement.removeEventListener('keyup', this.keyboard, true)
},
methods: {
init() {
this.box()
this.scaleCalc()
},
box() {
if (this.isScaleRevise) { // 根据内容部分进行刻度修正
const content = document.getElementById('content')
const contentLeft = content.offsetLeft
const contentTop = content.offsetTop
for (let i = 0; i < contentLeft; i += 1) {
if (i % 50 === 0 && i + 50 <= contentLeft) {
this.xScale.push({ id: i })
}
}
for (let i = 0; i < contentTop; i += 1) {
if (i % 50 === 0 && i + 50 <= contentTop) {
this.yScale.push({ id: i })
}
}
}
if(this.parent){
const style = window.getComputedStyle(this.$el.parentNode,null)
this.windowWidth = parseInt(style.getPropertyValue('width'), 10)
this.windowHeight = parseInt(style.getPropertyValue('height'), 10)
}else {
this.windowWidth = document.documentElement.clientWidth - this.leftSpacing
this.windowHeight = document.documentElement.clientHeight - this.topSpacing
}
this.rulerWidth = document.getElementById('verticalRuler').clientWidth
this.rulerHeight = document.getElementById('levelRuler').clientHeight
this.topSpacing = document.getElementById('levelRuler').getBoundingClientRect().y //.offsetParent.offsetTop
this.leftSpacing =document.getElementById('verticalRuler').getBoundingClientRect().x// .offsetParent.offsetLeft
}, // 获取窗口宽与高
5、效果
组态功能
设计页面
其他功能