整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
为了方便用户更好使用web组态，最近提供了用户自定义组件的功能。在实施项目中就可以使用自己的组件了！
首先我们登陆系统就会看到新增的组件管理选项 如下图：
点击添加组件选择2D组件我们就可以建立一个自己的组件了
《组件设计器》由 基础设置（包括名称 code 类型 状态 icon 次序号 ）HTML编辑区域 CSS编辑区域 JS编辑区域 和预览区域组成。
首先我们给组件 起一个‘名字’ 和 ‘code’，在url输入框中可以给组件设置一个icon。点击保存系统会为我们建立一个组件模板。
由于web组态是由vue开发的所以开发组件也需要vue的的基础知识。建议去看下vue的教程及生命周期，以方便开发组件。以下我附上vue生命周期图及组件代码。
我们就开始设计一个炫酷的按钮作为例子
HTML代码如下：
<a href="#" class="btn123" :style="imrstyle" v-show="controlProp.commProp.visible">{{controlProp.textProp.text}}</a>这里:
style="imrstyle"：样式 在web组态设计器中呈现的样式
v-show="controlProp.commProp.visible"：可见性 在web组态设计器中可实现显示或闪烁
{{controlProp.textProp.text}}：文本 对应组件的文本属性
更多属性请参考：http://krmes.com:8000/md/design/#%E7%BB%84%E4%BB%B6%E5%9F%BA%E7%A1%80%E5%B1%9E%E6%80%A7
CSS代码如下：
.btn123 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-sizing: border-box;
z-index: 1;
}
.btn123:hover {
animation: animate 8s linear infinite;
}
@keyframes animate {
0% {
background-position: 0%;
}
100% {
background-position: 400%;
}
}
.btn123::before {
content: '';
position: absolute;
top: -5px;
left: -5px;
right: -5px;
bottom: -5px;
z-index: -9999;
background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
background-size: 400%;
border-radius: 40px;
opacity: 0;
transition: 0.5s;
}
.btn123:hover::before {
filter: blur(20px);
opacity: 1;
animation: animate 8s linear infinite;
}
JS代码如下：
export default {
props: {
controlProp: Object //作为web组态设计器的继承属性
},
data() {
return {
}
},
computed: {
imrstyle: function () { //imrstyle 作为web组态设计器的控制样式
let maxWidth = this.controlProp.commProp.width
let maxHeight = this.controlProp.commProp.height
if (this.controlProp.textProp && this.controlProp.textProp.padding) {
maxWidth = maxWidth - this.controlProp.textProp.padding * 2
maxHeight = maxHeight - this.controlProp.textProp.padding * 2
}
return {
// 'max-width': maxWidth+ 'px',
// 'max-height': maxHeight+ 'px',
width: '100%',
height: '100%',
'box-sizing': 'content-box',
background: 'transparent',
'color': this.controlProp.textProp ? this.controlProp.textProp.fontcolor : '',
'font-size': this.controlProp.textProp ? this.controlProp.textProp.fontsize + 'px' : '',
'text-align': this.controlProp.textProp ? this.controlProp.textProp.horizonalign : '',
'line-height': maxHeight + 'px',
'vertical-align': this.controlProp.textProp ? this.controlProp.textProp.verticalalign : '',
'font-family': this.controlProp.textProp ? this.controlProp.textProp.fontfamily : '',
'font-weight': this.controlProp.textProp ? (this.controlProp.textProp.fontweight ? 600 : 500) : '',
'font-style': this.controlProp.textProp ? (this.controlProp.textProp.fontitalic ? 'italic' : 'normal') : ''
}
}
},
created() {
},
mounted() {
},
methods: {
initImports() {
return {
}
},
initProp() { //初始化状态 （基础属性 特殊属性 文本属性）
return {
commProp: { // 基础属性
width: 80,
height: 30,
borderwidth: 0,
backgroundColor: 'linear-gradient(90deg, #03a9f4, #00FFFF)',
borderradius:5
},
spProp:{ // 特殊属性
},
textProp: { // 文本属性
text: 'Button',
fontsize: 12,
fontcolor: 'black',
horizonalign: 'center',
verticalalign: 'middle',
padding: 0,
margin: 0
},
spPropSetting: [ // 特殊属性 textinput/numberinput/switch/select/colorPicker/codeInput/dateInput/imgSelect/setup
]
}
}
}
}这里需要注意：
initProp()：方法中实现对组件的 基础属性 文本属性 特殊属性的初始化配置
更多属性配置参考：http://krmes.com:8000/md/design/#%E7%BB%84%E4%BB%B6%E5%9F%BA%E7%A1%80%E5%B1%9E%E6%80%A7
点击保存这样我们设计的组件就显示出来了！是不是很简单。
这样在我们的web组态中就可以使用我们自定义的组件了！[大笑][大笑][大笑]
eb组态，开发仪表组件echarts。
首先我们登陆系统就会看到新增的组件管理选项 如下图：
点击添加组件选择2D组件我们就可以建立一个自己的组件了
《组件设计器》由 基础设置（包括名称 code 类型 状态 icon 次序号 ）HTML编辑区域 CSS编辑区域 JS编辑区域 和预览区域组成。
首先我们给组件 起一个‘名字’ 和 ‘code’，在url输入框中可以给组件设置一个icon。点击保存系统会为我们建立一个组件模板。
由于web组态是由vue开发的所以开发组件也需要vue的的基础知识。建议去看下vue的教程及生命周期，以方便开发组件。以下我附上组件代码。
我们就开始设计一个炫酷的按钮作为例子
HTML代码如下：
<a href="#" class="btn123" :style="imrstyle" v-show="controlProp.commProp.visible">{{controlProp.textProp.text}}</a>这里:
style="imrstyle"：样式 在web组态设计器中呈现的样式
v-show="controlProp.commProp.visible"：可见性 在web组态设计器中可实现显示或闪烁
{{controlProp.textProp.text}}：文本 对应组件的文本属性
更多属性请参考：http://krmes.com:8000/md/design/#%E7%BB%84%E4%BB%B6%E5%9F%BA%E7%A1%80%E5%B1%9E%E6%80%A7
JS代码如下：
export default {
props: {
controlProp: Object,
controlImports: Object,
previewId: String // 页面容器的id,若控件在页面容器中 用来区分生成canvas的元素
},
data() {
return {
myCharts: null,
}
},
mounted() {
let echarts = this.controlImports['echarts']
// 基于准备好的dom，初始化echarts实例
let box
if (this.previewId) {
box = $('.' + this.previewId + ' #' + this.controlProp.commProp.id)[0]
} else {
box = $('#' + this.controlProp.commProp.id)[0]
}
this.myCharts = echarts.init(box)
this.initCharts()
},
computed: {
imrstyle: function () {
return {
position: 'absolute',
width: this.controlProp.commProp.width + 'px',
height: this.controlProp.commProp.height + 'px',
// left: this.controlProp.commProp.x + 'px',
// top: this.controlProp.commProp.y + 'px',
'background-color': this.controlProp.commProp.backgroundColor,
'border': this.controlProp.commProp.borderwidth + 'px ' + this.controlProp.commProp.borderstyle + ' ' + this.controlProp.commProp.bordercolor,
'animation': this.controlProp.commProp.isFlash ? 'myfirst 1s infinite' : '',
'-webkit-animation': this.controlProp.commProp.isFlash ? 'myfirst 1s infinite' : '',
'transform': 'rotate(' + this.controlProp.commProp.angle + 'deg)',
'box-shadow': this.controlProp.spProp.isShowShadow ? '10px 0px 10px rgba(0,0,0,0.9)' : 'none'
}
}
},
watch: {
'controlProp.commProp.width': {
handler: function () {
this.myCharts.resize()
}
},
'controlProp.commProp.height': {
handler: function () {
this.myCharts.resize()
}
},
'controlProp.spProp.echartsOption'(val) {
this.initCharts()
},
'controlProp.spProp.value'(val) {
this.setValue()
},
'controlProp.spProp.name'(val) {
this.setValue()
},
'controlProp.spProp.max'(val) {
this.setValue()
},
},
created() {
console.log('echarts')
this.controlProp.spProp.update = this.update
},
methods: {
initCharts() {
//准备数据
let category = [{
name: this.controlProp.spProp.name,
value: this.controlProp.spProp.value
}];
let total = this.controlProp.spProp.max; //数据总数
let datas = [];
category.forEach(value => {
datas.push(value.value);
});
// 使用刚指定的配置项和数据显示图表。
let option = eval('(' + this.controlProp.spProp.echartsOption + ')')
option.xAxis.max = total
option.yAxis.data = category
option.series[0].data = category
option.series[1].data = [total, total, total, total]
option.series[1].symbolBoundingData = total
option.series[2].data = datas
option.series[2].label.normal.formatter = category[0].value + '%'
option.series[2].symbolBoundingData = total
option.series[3].data = [total, total, total, total]
option.series[4].data = [total, total, total, total]
this.myCharts.setOption(option, true);
},
setValue() {
//准备数据
let category = [{
name: this.controlProp.spProp.name,
value: this.controlProp.spProp.value
}];
let total = this.controlProp.spProp.max; //数据总数
let datas = [];
category.forEach(value => {
datas.push(value.value);
});
// 使用刚指定的配置项和数据显示图表。
let option = eval('(' + this.controlProp.spProp.echartsOption + ')')
option.xAxis.max = total
option.yAxis.data = category
option.series[0].data = category
option.series[1].data = [total, total, total, total]
option.series[1].symbolBoundingData = total
option.series[2].data = datas
option.series[2].label.normal.formatter = category[0].value + '%'
option.series[2].symbolBoundingData = total
option.series[3].data = [total, total, total, total]
option.series[4].data = [total, total, total, total]
//更新echarts
this.myCharts.setOption(option);
},
update() {
this.initCharts()
},
initImports() {
return {
'echarts': 'echarts'
}
},
initProp() {
return {
commProp: { // 基础属性
width: 600,
height: 60
},
textProp: {
padding: 0,
margin: 0
},
spProp: { // 特殊属性
name: '进度',
value: 80,
max:100,
echartsOption: `{
xAxis: {
max: total,
splitLine: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
show: false
},
axisTick: {
show: false
}
},
grid: {
left: 50,
top: 0, //设置条形图的边距
right: 50,
bottom: 0
},
yAxis: [{
type: "category",
inverse: false,
data: category,
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
}
}],
series: [{
//内
type: "bar",
barWidth: 28,
legendHoverLink: false,
silent: true,
itemStyle: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [{
offset: 0,
color: "#0097ff" // 0% 处的颜色
},
{
offset: 0.4,
color: "#6dffe1" // 100% 处的颜色
},
{
offset: 0.8,
color: "#9d6fff" // 100% 处的颜色
}
]
}
},
label: {
normal: {
show: true,
position: "left",
formatter: "{b}",
offset: [0, 2], //设置右边数据位置
textStyle: {
color: "#0097ff",
fontSize: 14,
fontWeight: 600
}
}
},
data: category,
z: 1,
animationEasing: "elasticOut"
},
{
// 分隔
type: "pictorialBar",
itemStyle: {
normal: {
color: "#07314a"
}
},
symbolRepeat: "fixed",
symbolMargin: 2,
symbol: "rect",
symbolClip: true,
symbolSize: [3, 28],
symbolPosition: "start",
symbolOffset: [3, -4],
symbolBoundingData: total,
data: [total, total, total, total],
z: 2,
animationEasing: "elasticOut",
},
{
//外边框
type: "pictorialBar",
symbol: "rect",
symbolBoundingData: total,
itemStyle: {
normal: {
color: "none"
}
},
label: {
normal: {
formatter: "80"+"%",
show: true,
position: "right",
offset: [5, -3], //设置右边数据位置
textStyle: {
color: "#0097ff",
fontSize: 14,
fontWeight: 600
}
}
},
data: datas,
z: 0,
animationEasing: "elasticOut"
},
{
name: "外框",
type: "bar",
barGap: "-130%", // 设置外框粗细
data: [total, total, total, total],
barWidth: 45,
itemStyle: {
normal: {
barBorderRadius: [5, 5, 5, 5],
color: "#07314a", // 填充色
barBorderColor: "#1588D1", // 边框色
barBorderWidth: 3, // 边框宽度
}
},
z: 0
},
{
type: 'scatter',
name: '条形',
symbol: 'roundRect',
symbolSize: [7,20],
symbolOffset: [3, -5],
symbolKeepAspect: true,
itemStyle: {
normal: {
color: "#1588D1"
}
},
data: [total, total, total, total],
}
]
}`,
update: null
},
spPropSetting: [ // 特殊属性
{ label: '名称', type: 'textinput', group: '特殊', valuename: 'name' },
{ label: '数值', type: 'numberinput', group: '特殊', valuename: 'value' },
{ label: '最大值', type: 'numberinput', group: '特殊', valuename: 'max' },
]
}
}
}
}这里需要注意：
initProp()：方法中实现对组件的 基础属性 文本属性 特殊属性的初始化配置
watch：中监听'controlProp.spProp.value'属性，这样就可以使用web组态中的变量绑定功能，实现实时显示数值。
更多属性配置参考：http://krmes.com:8000/md/design/#%E7%BB%84%E4%BB%B6%E5%9F%BA%E7%A1%80%E5%B1%9E%E6%80%A7
点击保存这样我们设计的组件就显示出来了！是不是很简单。
这样在我们的web组态中就可以使用我们自定义的仪表盘组件了！
要：随着工业智能化的快速发展，基于HTML for Web开发的工业组态图成为实现智能化生产线监控与控制的重要工具。本文将深入探讨基于HTML for Web开发的工业组态图的优势、设计要点以及实际应用案例，展示其在工业领域中的重要性和价值。
引言
工业组态图是一种以图形化方式呈现工业生产线状态和数据的技术。随着互联网和Web技术的快速发展，基于HTML for Web开发的工业组态图成为了实现智能化生产线监控与控制的主要方式之一。本文将深入探讨基于HTML for Web开发的工业组态图的设计原理、优势以及实际应用案例。
设计原理
HTML5和CSS3的优势：HTML5和CSS3提供了丰富的语义化标签和样式控制能力，能够实现灵活的页面布局和交互效果。借助HTML5和CSS3，工业组态图可以实现高度可定制化的界面设计，满足不同工业场景的需求。
JavaScript的动态性：JavaScript是一门强大的脚本语言，通过它可以实现组态图中的动态更新和交互操作。JavaScript可以处理实时数据的获取、处理和呈现，为工业组态图带来了更高的灵活性和响应性。
SVG的矢量图形能力：可缩放矢量图形（SVG）是一种基于XML的图形格式，具有良好的可伸缩性和高质量的图形渲染能力。借助SVG，工业组态图可以实现精确的图形绘制和动画效果，展示丰富的工业设备、传感器和数据元素。
WebSocket的实时通信：WebSocket是一种支持双向通信的网络协议，能够实现实时数据的传输和更新。工业组态图可以通过WebSocket与工业设备和传感器进行实时数据交互，确保组态图中的数据与实际生产线状态保持同步。
设计要点
数据源与接口：工业组态图需要与工业设备和传感器建立连接并获取实时数据。设计时需要考虑数据源的类型、接口方式以及数据传输的稳定性和安全性。
组件库与样式：选择适合工业场景的组件库，包括图标、仪表盘、进度条等。同时，优化样式布局，确保组态图界面简洁明了、易于操作。
交互操作与反馈：提供友好的交互操作方式，如点击、拖拽、缩放等，以便用户与组态图中的元素进行交互。同时，及时反馈操作结果和状态变化，增强用户体验。
告警与报警机制：根据实际需求，设定合适的告警和报警规则，及时显示和处理潜在问题。通过直观的标识和提示，帮助操作人员快速发现和解决异常情况。
历史数据记录与分析：记录历史数据，提供数据回放和分析功能，帮助用户了解过去的生产线状态和数据变化，优化生产过程和决策。
实际应用案例
生产线监控与优化：基于HTML for Web开发的工业组态图可以实时监控生产线上的设备状态、生产进度和质量指标等关键数据。通过可视化展示，操作人员可以快速发现异常情况，并及时采取措施进行调整和优化，提高生产效率和质量。
能耗管理与节能控制：工业组态图可以集成能耗监测系统，实时显示能源消耗情况，并与生产数据进行关联分析。通过分析能耗数据，识别能源浪费和优化机会，帮助企业实现节能减排目标。
故障诊断与维护：基于HTML for Web开发的工业组态图可以与设备故障诊断系统集成，实时显示设备运行状态和故障报警信息。操作人员可以通过组态图快速定位故障设备，并提供维修指引和记录维护日志，提高设备可用性和维护效率。
远程监控与操作：借助HTML for Web开发的工业组态图，操作人员可以通过Web浏览器远程访问生产线的状态和数据，实现远程监控和操作。这使得跨地域的生产管理和协作变得更加便捷，提高了生产线的灵活性和响应能力。
结论
基于HTML for Web开发的工业组态图为工业智能化提供了强大的工具和平台。它利用HTML5、CSS3、JavaScript和SVG等技术，实现了数据可视化、实时通信和交互操作等功能，为工业生产线的监控与控制带来了便利和效率。随着工业互联网的进一步发展，基于HTML for Web开发的工业组态图将在工业领域中发挥越来越重要的作用，助力企业实现智能化生产和可持续发展。
*请认真填写需求信息，我们会在24小时内与您取得联系。
