wenjy
/
aucma-scada-visual-board-new
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'master' of https://gitee.com/wen-gitee/scada-visual-board

Browse Source
master
wenjy 3 years ago
parent 7ba83e087d 55452c427a
commit 6b79d9877d
12 changed files with 522 additions and 76 deletions
Show Stats Download Patch File Download Diff File

4
productionboard/src/main/resources/static/css/aluminumLiner/style.css
Unescape Escape View File

@ -15,6 +15,10 @@ body {
height: 22%;
top: 14%;
left: 3.3%;
font-size: 16px !important;
}
.synthetic{
font-size: 16px !important;
}
.OEEStatistics {

65
productionboard/src/main/resources/static/css/tankShell/device.css
Unescape Escape View File

@ -14,6 +14,7 @@ body {
height: 22%;
top: 14%;
left: 3.3%;
font-size: 16px !important;
}
.energyProductionStatistics {
@ -23,6 +24,7 @@ body {
height: 6%;
top: 9%;
left: 29%;
font-size: 16px !important;
}
.runParamStatistics {
@ -32,6 +34,7 @@ body {
height: 7.5%;
top: 25%;
left: 29%;
font-size: 16px !important;
}
.runParamStatistics div {
@ -44,6 +47,7 @@ body {
display: flex;
justify-content: center;
align-items: center;
font-size: 16px !important;
}
.lossParam{
@ -57,6 +61,7 @@ body {
justify-content: center;
align-items: center;
color: #8FB7D1;
font-size: 16px !important;
}
.meterParam{
@ -70,49 +75,53 @@ body {
justify-content: center;
align-items: center;
color:#A5E3B1;
font-size: 16px !important;
}
.theEnergyConsumptionContrast {
border: 1px solid red;
.OEEStatistics {
border: 0px solid red;
position: absolute;
width: 24.1%;
height: 21%;
top: 44%;
left: 3.3%;
width: 35%;
height: 26%;
top: 71.5%;
left: 36%;
}
.lossStatistics {
border: 1px solid yellowgreen;
.equipmentFailure {
border: 0px solid red;
position: absolute;
width: 24%;
height: 21%;
top: 44%;
right: 3.3%;
width: 28%;
height: 22%;
top: 75%;
left: 70%;
}
.deviceInfoTable {
border: 1px solid #6ACBFE;
.loss {
border: 0px solid red;
position: absolute;
width: 33%;
height: 21%;
bottom: 5%;
left: 3.3%;
width: 28%;
height: 25%;
top: 41%;
left: 71%;
}
.oeeStatistics {
border: 1px solid cornflowerblue;
.productionPlan {
position: absolute;
border: 0px solid red;
width: 33%;
height: 21%;
bottom: 5%;
left: 38%;
top: 73.5%;
left: 3.5%;
font-size: 9%;
}
.faultRank {
border: 1px solid bisque;
.energyConsumption {
position: absolute;
width: 24%;
height: 21%;
bottom: 5%;
right: 3.3%;
border: 0px solid red;
width: 26%;
height: 20%;
top: 46%;
left: 2%;
font-size: 9%;
}

146
productionboard/src/main/resources/static/js/common/echarts.common.js
Unescape Escape View File

@ -2306,3 +2306,149 @@ const equipmentFailure = (res, ids) => {
mycharts.setOption(option);
$(window).resize(mycharts.resize);
}
// 设备产量能耗对比
const energyConsumption = (res, ids) => {
let mycharts = echarts.init(ids);
let stationData = [];
let values = [];
res.datas.forEach(function (it, index) {
stationData.push(it.station);
values.push(it.value);
});
let option = {
grid: {
top: '25%',
left: '6%',
right: '6%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
interval: 0,
type: 'category',
data: ['6-13', '6-14', '6-15', '6-16', '6-17'],
axisPointer: {
type: 'shadow'
}
}
],
yAxis: [
{
type: 'value',
name: '产量(t)',
min: 0,
max: 40,
interval: 10,
axisLabel: {
formatter: '{value} ml'
},
splitLine: {
show: true,
lineStyle: {
color: "rgb(217,217,217,0.5)",
type: "dashed" //虚线
// width: 2
}
},
axisLine: {
show: true,
},
},
{
type: 'value',
name: '能耗(kw·h)',
min: 0,
max: 20,
interval: 5,
axisLabel: {
formatter: '{value} °C'
},
splitLine: {
show: true,
lineStyle: {
color: "rgb(217,217,217,0.5)",
type: "dashed" //虚线
// width: 2
}
},
axisLine: {
show: true,
},
}
],
series: [
{
name: 'Evaporation',
type: 'bar',
itemStyle: {
normal: {
color: function (params) {
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 1,
color: "rgba(10,50,220)",
},
{
offset: 0,
color: "rgba(40,140,210)",
},
]);
},
},
},
tooltip: {
valueFormatter: function (value) {
return value + ' ml';
}
},
barWidth: 20,
data: [
2.0, 4.9, 7.0, 23.2, 25.6
]
},
{
name: 'Temperature',
type: 'line',
yAxisIndex: 1,
tooltip: {
valueFormatter: function (value) {
return value + ' °C';
}
},
data: [2.0, 12.2, 3.3, 14.5, 6.3]
},
{
name: "柱顶部",
type: "pictorialBar",
symbolSize: [20, 6],
symbolOffset: [0, -3],
z: 12,
itemStyle: {
normal: {
color: function (params) {
return 'rgb(217,217,217)';
},
},
},
label: {
show: true,
position: "top",
textStyle: {
color: "#02C3F1",
},
},
symbolPosition: "end",
data: [2.0, 4.9, 7.0, 23.2, 25.6],
},
]
};
mycharts.setOption(option);
$(window).resize(mycharts.resize);
}

54
productionboard/src/main/resources/static/js/tankShell/device.js
Unescape Escape View File

@ -1,4 +1,58 @@
$(() => {
//设备OEE统计
OEEStatistics(null, document.getElementById("OEEStatistics"));
//设备故障排名
$.getJSON('/tankShell/getStatisticalOutputByModel', function (result) {
equipmentFailure(result, document.getElementById("equipmentFailure"));
});
//loss
$.getJSON('/tankShell/getInventoryStatistics', function (result) {
loss(result, document.getElementById("loss"));
});
//设备产量能耗对比
$.getJSON('/tankShell/getInventoryStatistics', function (result) {
energyConsumption(result, document.getElementById("energyConsumption"));
});
//生产计划
$.ajax({
url: '/storage/getProductionPlan',
type: 'GET',
dataType: 'JSON',
success: function (res) {
let Res = res
Res.data.forEach(val => {
val[0] = 'SHEBEI452736'
val[1] = 'AGYM45HH23'
val[2] = '32'
val[3] = '2021.01.01 10:00:00'
delete val[4]
});
Res.header = ['设备名称', '参数名称', '当前值', '时间', ]
dynamicTable({
el: '#productionPlan',
rowNum: 5,
timeout: 0,
header: Res.header,
data: Res.data,
index: false,
fontColor: '#B4B7BF ',
indexBGC: '#86F3FF',
headerBGC: 'rgba(8,36,75,0.2)',
oddRowBGC: 'rgba(8,36,75,0.2)',
evenRowBGC: 'rgba(6,25,57,0.2)',
colWidth: ['100%', '100%', '40%', '160%', ]
});
},
error: function (e) {
console.log(e)
}
});
/*数据信息*/
const statusArray = [0, 0, 0, 0, 0];
dataInformationFunction(statusArray);

1
productionboard/src/main/resources/templates/aluminumLiner/index.html
Unescape Escape View File

@ -10,6 +10,7 @@
<script src="../../../js/common/update-split-blocks.js"></script>
<script src="../../../js/common/echarts.common.js"></script>
<script src="../../../js/common/scrollTable.js"></script>
<script src="../../../js/common/date-time-common.js"></script>
</head>
<body>

29
productionboard/src/main/resources/templates/tankShell/device.html
Unescape Escape View File

@ -8,6 +8,8 @@
<script src="../../../js/common/echarts.min.js"></script>
<script src="../../../js/common/update-split-blocks.js"></script>
<script src="../../../js/common/echarts.common.js"></script>
<script src="../../../js/common/scrollTable.js"></script>
<script src="../../../js/common/date-time-common.js"></script>
</head>
<body>
<!--数据信息-->
@ -23,16 +25,23 @@
<!--节拍参数-->
<div class="meterParam" id="meterParam"></div>
<!--设备能耗产量对比-->
<div class="theEnergyConsumptionContrast" id="theEnergyConsumptionContrast"></div>
<!--loss统计-->
<div class="lossStatistics" id="lossStatistics"></div>
<!--设备信息列表-->
<div class="deviceInfoTable" id="deviceInfoTable"></div>
<!--oee统计-->
<div class="oeeStatistics" id="oeeStatistics"></div>
<!--故障率统计-->
<div class="faultRank" id="faultRank"></div>
<!--设备OEE统计-->
<div class="OEEStatistics" id="OEEStatistics"></div>
<!--设备故障排名-->
<div class="equipmentFailure" id="equipmentFailure"></div>
<!--loss-->
<div class="loss" id="loss"></div>
<!--生产计划-->
<div class="productionPlan" id="productionPlan"></div>
<!--设备产量能耗对比-->
<div class="energyConsumption" id="energyConsumption"></div>
</body>
<script src="../../../js/tankShell/device.js"></script>
</html>

4
productionboard/target/classes/static/css/aluminumLiner/style.css
Unescape Escape View File

@ -15,6 +15,10 @@ body {
height: 22%;
top: 14%;
left: 3.3%;
font-size: 16px !important;
}
.synthetic{
font-size: 16px !important;
}
.OEEStatistics {

65
productionboard/target/classes/static/css/tankShell/device.css
Unescape Escape View File

@ -14,6 +14,7 @@ body {
height: 22%;
top: 14%;
left: 3.3%;
font-size: 16px !important;
}
.energyProductionStatistics {
@ -23,6 +24,7 @@ body {
height: 6%;
top: 9%;
left: 29%;
font-size: 16px !important;
}
.runParamStatistics {
@ -32,6 +34,7 @@ body {
height: 7.5%;
top: 25%;
left: 29%;
font-size: 16px !important;
}
.runParamStatistics div {
@ -44,6 +47,7 @@ body {
display: flex;
justify-content: center;
align-items: center;
font-size: 16px !important;
}
.lossParam{
@ -57,6 +61,7 @@ body {
justify-content: center;
align-items: center;
color: #8FB7D1;
font-size: 16px !important;
}
.meterParam{
@ -70,49 +75,53 @@ body {
justify-content: center;
align-items: center;
color:#A5E3B1;
font-size: 16px !important;
}
.theEnergyConsumptionContrast {
border: 1px solid red;
.OEEStatistics {
border: 0px solid red;
position: absolute;
width: 24.1%;
height: 21%;
top: 44%;
left: 3.3%;
width: 35%;
height: 26%;
top: 71.5%;
left: 36%;
}
.lossStatistics {
border: 1px solid yellowgreen;
.equipmentFailure {
border: 0px solid red;
position: absolute;
width: 24%;
height: 21%;
top: 44%;
right: 3.3%;
width: 28%;
height: 22%;
top: 75%;
left: 70%;
}
.deviceInfoTable {
border: 1px solid #6ACBFE;
.loss {
border: 0px solid red;
position: absolute;
width: 33%;
height: 21%;
bottom: 5%;
left: 3.3%;
width: 28%;
height: 25%;
top: 41%;
left: 71%;
}
.oeeStatistics {
border: 1px solid cornflowerblue;
.productionPlan {
position: absolute;
border: 0px solid red;
width: 33%;
height: 21%;
bottom: 5%;
left: 38%;
top: 73.5%;
left: 3.5%;
font-size: 9%;
}
.faultRank {
border: 1px solid bisque;
.energyConsumption {
position: absolute;
width: 24%;
height: 21%;
bottom: 5%;
right: 3.3%;
border: 0px solid red;
width: 26%;
height: 20%;
top: 46%;
left: 2%;
font-size: 9%;
}

146
productionboard/target/classes/static/js/common/echarts.common.js
Unescape Escape View File

@ -2306,3 +2306,149 @@ const equipmentFailure = (res, ids) => {
mycharts.setOption(option);
$(window).resize(mycharts.resize);
}
// 设备产量能耗对比
const energyConsumption = (res, ids) => {
let mycharts = echarts.init(ids);
let stationData = [];
let values = [];
res.datas.forEach(function (it, index) {
stationData.push(it.station);
values.push(it.value);
});
let option = {
grid: {
top: '25%',
left: '6%',
right: '6%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
interval: 0,
type: 'category',
data: ['6-13', '6-14', '6-15', '6-16', '6-17'],
axisPointer: {
type: 'shadow'
}
}
],
yAxis: [
{
type: 'value',
name: '产量(t)',
min: 0,
max: 40,
interval: 10,
axisLabel: {
formatter: '{value} ml'
},
splitLine: {
show: true,
lineStyle: {
color: "rgb(217,217,217,0.5)",
type: "dashed" //虚线
// width: 2
}
},
axisLine: {
show: true,
},
},
{
type: 'value',
name: '能耗(kw·h)',
min: 0,
max: 20,
interval: 5,
axisLabel: {
formatter: '{value} °C'
},
splitLine: {
show: true,
lineStyle: {
color: "rgb(217,217,217,0.5)",
type: "dashed" //虚线
// width: 2
}
},
axisLine: {
show: true,
},
}
],
series: [
{
name: 'Evaporation',
type: 'bar',
itemStyle: {
normal: {
color: function (params) {
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 1,
color: "rgba(10,50,220)",
},
{
offset: 0,
color: "rgba(40,140,210)",
},
]);
},
},
},
tooltip: {
valueFormatter: function (value) {
return value + ' ml';
}
},
barWidth: 20,
data: [
2.0, 4.9, 7.0, 23.2, 25.6
]
},
{
name: 'Temperature',
type: 'line',
yAxisIndex: 1,
tooltip: {
valueFormatter: function (value) {
return value + ' °C';
}
},
data: [2.0, 12.2, 3.3, 14.5, 6.3]
},
{
name: "柱顶部",
type: "pictorialBar",
symbolSize: [20, 6],
symbolOffset: [0, -3],
z: 12,
itemStyle: {
normal: {
color: function (params) {
return 'rgb(217,217,217)';
},
},
},
label: {
show: true,
position: "top",
textStyle: {
color: "#02C3F1",
},
},
symbolPosition: "end",
data: [2.0, 4.9, 7.0, 23.2, 25.6],
},
]
};
mycharts.setOption(option);
$(window).resize(mycharts.resize);
}

54
productionboard/target/classes/static/js/tankShell/device.js
Unescape Escape View File

@ -1,4 +1,58 @@
$(() => {
//设备OEE统计
OEEStatistics(null, document.getElementById("OEEStatistics"));
//设备故障排名
$.getJSON('/tankShell/getStatisticalOutputByModel', function (result) {
equipmentFailure(result, document.getElementById("equipmentFailure"));
});
//loss
$.getJSON('/tankShell/getInventoryStatistics', function (result) {
loss(result, document.getElementById("loss"));
});
//设备产量能耗对比
$.getJSON('/tankShell/getInventoryStatistics', function (result) {
energyConsumption(result, document.getElementById("energyConsumption"));
});
//生产计划
$.ajax({
url: '/storage/getProductionPlan',
type: 'GET',
dataType: 'JSON',
success: function (res) {
let Res = res
Res.data.forEach(val => {
val[0] = 'SHEBEI452736'
val[1] = 'AGYM45HH23'
val[2] = '32'
val[3] = '2021.01.01 10:00:00'
delete val[4]
});
Res.header = ['设备名称', '参数名称', '当前值', '时间', ]
dynamicTable({
el: '#productionPlan',
rowNum: 5,
timeout: 0,
header: Res.header,
data: Res.data,
index: false,
fontColor: '#B4B7BF ',
indexBGC: '#86F3FF',
headerBGC: 'rgba(8,36,75,0.2)',
oddRowBGC: 'rgba(8,36,75,0.2)',
evenRowBGC: 'rgba(6,25,57,0.2)',
colWidth: ['100%', '100%', '40%', '160%', ]
});
},
error: function (e) {
console.log(e)
}
});
/*数据信息*/
const statusArray = [0, 0, 0, 0, 0];
dataInformationFunction(statusArray);

1
productionboard/target/classes/templates/aluminumLiner/index.html
Unescape Escape View File

@ -10,6 +10,7 @@
<script src="../../../js/common/update-split-blocks.js"></script>
<script src="../../../js/common/echarts.common.js"></script>
<script src="../../../js/common/scrollTable.js"></script>
<script src="../../../js/common/date-time-common.js"></script>
</head>
<body>

29
productionboard/target/classes/templates/tankShell/device.html
Unescape Escape View File

@ -8,6 +8,8 @@
<script src="../../../js/common/echarts.min.js"></script>
<script src="../../../js/common/update-split-blocks.js"></script>
<script src="../../../js/common/echarts.common.js"></script>
<script src="../../../js/common/scrollTable.js"></script>
<script src="../../../js/common/date-time-common.js"></script>
</head>
<body>
<!--数据信息-->
@ -23,16 +25,23 @@
<!--节拍参数-->
<div class="meterParam" id="meterParam"></div>
<!--设备能耗产量对比-->
<div class="theEnergyConsumptionContrast" id="theEnergyConsumptionContrast"></div>
<!--loss统计-->
<div class="lossStatistics" id="lossStatistics"></div>
<!--设备信息列表-->
<div class="deviceInfoTable" id="deviceInfoTable"></div>
<!--oee统计-->
<div class="oeeStatistics" id="oeeStatistics"></div>
<!--故障率统计-->
<div class="faultRank" id="faultRank"></div>
<!--设备OEE统计-->
<div class="OEEStatistics" id="OEEStatistics"></div>
<!--设备故障排名-->
<div class="equipmentFailure" id="equipmentFailure"></div>
<!--loss-->
<div class="loss" id="loss"></div>
<!--生产计划-->
<div class="productionPlan" id="productionPlan"></div>
<!--设备产量能耗对比-->
<div class="energyConsumption" id="energyConsumption"></div>
</body>
<script src="../../../js/tankShell/device.js"></script>
</html>
Write Preview
Loading…
Cancel
Save