master
夜笙歌 3 years ago
parent 5a4fe70bbc
commit 9d5fc90100

@ -22,7 +22,7 @@ body {
position: absolute;
width: 42%;
height: 6%;
top: 9%;
top: 8%;
left: 29%;
font-size: 16px !important;
}
@ -61,7 +61,7 @@ body {
justify-content: center;
align-items: center;
color: #8FB7D1;
font-size: 230% !important;
font-size: 175% !important;
}
.meterParam {
@ -75,7 +75,7 @@ body {
justify-content: center;
align-items: center;
color: #A5E3B1;
font-size: 230% !important;
font-size: 175% !important;
}
.OEEStatistics {

@ -2,23 +2,24 @@ $(() => {
//数据信息
$.getJSON('/aluminumLiner/getDataInformation', function (result) {
const statusArray = [1,0,0,0,0];
if(result.length > 0) {
const statusArray = [1, 0, 0, 0, 0];
if (result.length > 0) {
statusArray[0] = result[0].deviceStatus == "正常" ? 0 : 1;
statusArray[1] = result[0].devicePower;
statusArray[2] = result[0].deviceEnergy;
}
dataInformationFunction(statusArray);
});
$.getJSON('/aluminumLiner/getEnergyProductStatistics', function (result) {
synthetic(result)
});
//loss/aluminumLiner/getLossStatistics
$.getJSON('/aluminumLiner/getLossStatistics', function (result) {
loss(result, document.getElementById("loss"));
});
const syntheticDate = [0, 0, 0, 0, 0];
synthetic(syntheticDate)
//设备OEE统计
OEEStatistics(null, document.getElementById("OEEStatistics"));

@ -16,28 +16,28 @@ const dataInformationFunction = (statusArray) => {
const synthetic = (statusArray) => {
let info = `<table style="position: absolute;top: 9%;left: 30%;width: 40%;height:7%;">
<tr style="width: 100%; height: 50%;">
<td style="border:0px solid red;font-size:230%;text-align:center;width: 23%;color: #99C4EF;">123</td>
<td style="border:0px solid red;font-size:230%;text-align:center;width: 27%;color: #7CED92;">123</td>
<td style="border:0px solid red;font-size:230%;text-align:center;width: 27%;color: #99C4EF;">123</td>
<td style="border:0px solid red;font-size:230%;text-align:center;width: 19%;color: #7CED92;">123</td>
<td style="border:0px solid red;font-size:230%;text-align:center;width: 15%;"></td>
<td style="border:0px solid red;font-size:175%;text-align:center;width: 23%;color: #99C4EF;">${statusArray.yesterdayEnergy || 0}</td>
<td style="border:0px solid red;font-size:175%;text-align:center;width: 27%;color: #7CED92;">${statusArray.thisMonthProuction || 0}</td>
<td style="border:0px solid red;font-size:175%;text-align:center;width: 27%;color: #99C4EF;">${statusArray.yesterdayProuction || 0}</td>
<td style="border:0px solid red;font-size:175%;text-align:center;width: 19%;color: #7CED92;">${statusArray.thisMonthEnergy || 0}</td>
<td style="border:0px solid red;font-size:175%;text-align:center;width: 15%;"></td>
</tr>
</table>
<table style="position: absolute;top: 24%;left: 30%;width: 42%;height:10%;">
<tr style="width: 100%; height: 50%;">
<td style="border:0px solid red;text-align:center;width: 7%;"></td>
<td style="border:0px solid red;font-size:230%;text-align:center;width: 13%;color: #70C0EC;">123</td>
<td style="border:0px solid red;font-size:175%;text-align:center;width: 13%;color: #70C0EC;">${statusArray.yesterdayEnergy || 0}</td>
<td style="border:0px solid red;text-align:center;width: 13%;"></td>
<td style="border:0px solid red;font-size:230%;text-align:center;width: 14%;color: #DB718D;">123</td>
<td style="border:0px solid red;font-size:175%;text-align:center;width: 14%;color: #DB718D;">${statusArray.yesterdayEnergy || 0}</td>
<td style="border:0px solid red;text-align:center;width: 12%;"></td>
<td style="border:0px solid red;font-size:230%;text-align:center;width: 13%;color: #8CEF92;">123</td>
<td style="border:0px solid red;font-size:175%;text-align:center;width: 13%;color: #8CEF92;">${statusArray.yesterdayEnergy || 0}</td>
<td style="border:0px solid red;text-align:center;width: 13%;"></td>
<td style="border:0px solid red;font-size:230%;text-align:center;width: 14%;color: #ECE790;">123</td>
<td style="border:0px solid red;font-size:175%;text-align:center;width: 14%;color: #ECE790;">${statusArray.yesterdayEnergy || 0}</td>
<td style="border:0px solid red;text-align:center;width: 0%;"></td>
</tr>
</table>
<span style="position: absolute;font-size:230%;top: 11%;left: 84.5%;width: 15%;height:10%;text-align:left;background: linear-gradient(to bottom, #D2E5F7, #8CBAE4);color: transparent;display:inline-block;-webkit-background-clip: text;">123213</span>
<span style="position: absolute;font-size:230%;top: 26%;left: 84.5%;width: 15%;height:10%;text-align:left;background: linear-gradient(to bottom, #F1FFFF, #7FE782);color: transparent;display:inline-block;-webkit-background-clip: text;">123213</span>
<span style="position: absolute;font-size:175%;top: 12%;left: 85%;width: 15%;height:10%;text-align:left;background: linear-gradient(to bottom, #D2E5F7, #8CBAE4);color: transparent;display:inline-block;-webkit-background-clip: text;">${statusArray.yesterdayEnergy || 0}</span>
<span style="position: absolute;font-size:175%;top: 26.7%;left: 85%;width: 15%;height:10%;text-align:left;background: linear-gradient(to bottom, #F1FFFF, #7FE782);color: transparent;display:inline-block;-webkit-background-clip: text;">${statusArray.yesterdayEnergy || 0}</span>
`;
$("#synthetic").append(info);

@ -87,10 +87,10 @@ const dataInformationFunction = (statusArray) => {
const energyProductionStatisticsFunction = (statusArray) => {
let info = `<table style="position: absolute;top: 8%;width: 100%;height:100%;">
<tr style="width: 100%; height: 100%;">
<td style="font-size:230%;border:0px solid red;width: 25%;text-align:center;color: #76BBE8;">68</td>
<td style="font-size:230%;border:0px solid red;width: 25%;text-align:center;color: #8AE9A0;">675</td>
<td style="font-size:230%;border:0px solid red;width: 25%;text-align:center;color: #76BBE8;">68</td>
<td style="font-size:230%;border:0px solid red;width: 25%;text-align:center;color: #8AE9A0;">675</td>
<td style="font-size:175%;border:0px solid red;width: 25%;text-align:center;color: #76BBE8;">68</td>
<td style="font-size:175%;border:0px solid red;width: 25%;text-align:center;color: #8AE9A0;">675</td>
<td style="font-size:175%;border:0px solid red;width: 25%;text-align:center;color: #76BBE8;">68</td>
<td style="font-size:175%;border:0px solid red;width: 25%;text-align:center;color: #8AE9A0;">675</td>
</tr>
</table>`;
@ -99,10 +99,10 @@ const energyProductionStatisticsFunction = (statusArray) => {
const runParamStatisticsFunction = (statusArray) => {
let info = `
<div style="font-size:230%;left: 9%;color:#76BBE8">68</div>
<div style="font-size:230%;left: 35%;color:#C0818B">685</div>
<div style="font-size:230%;left: 61%;color: #8AE9A0">685</div>
<div style="font-size:230%;left: 87%;color:#D5D2AA">685</div>
<div style="font-size:175%;left: 9%;color:#76BBE8">68</div>
<div style="font-size:175%;left: 35%;color:#C0818B">685</div>
<div style="font-size:175%;left: 61%;color: #8AE9A0">685</div>
<div style="font-size:175%;left: 87%;color:#D5D2AA">685</div>
`;
$("#runParamStatistics").append(info);

@ -20,7 +20,7 @@
<div class="energyProductionStatistics" id="energyProductionStatistics"></div>
<!--运行参数统计-->
<div class="runParamStatistics" id="runParamStatistics"></div>
<div style="font-size: 14px">
<div style="font-size: 16px">
<!--loss参数-->
<span class="lossParam" id="lossParam"></span>

@ -22,7 +22,7 @@ body {
position: absolute;
width: 42%;
height: 6%;
top: 9%;
top: 8%;
left: 29%;
font-size: 16px !important;
}
@ -61,7 +61,7 @@ body {
justify-content: center;
align-items: center;
color: #8FB7D1;
font-size: 230% !important;
font-size: 175% !important;
}
.meterParam {
@ -75,7 +75,7 @@ body {
justify-content: center;
align-items: center;
color: #A5E3B1;
font-size: 230% !important;
font-size: 175% !important;
}
.OEEStatistics {

@ -2,23 +2,25 @@ $(() => {
//数据信息
$.getJSON('/aluminumLiner/getDataInformation', function (result) {
const statusArray = [1,0,0,0,0];
if(result.length > 0) {
const statusArray = [1, 0, 0, 0, 0];
if (result.length > 0) {
statusArray[0] = result[0].deviceStatus == "正常" ? 0 : 1;
statusArray[1] = result[0].devicePower;
statusArray[2] = result[0].deviceEnergy;
}
dataInformationFunction(statusArray);
});
$.getJSON('10.41.9.111:6069/aluminumLiner/getEnergyProductStatistics', function (result) {
debugger
synthetic(result)
});
//loss/aluminumLiner/getLossStatistics
$.getJSON('/aluminumLiner/getLossStatistics', function (result) {
loss(result, document.getElementById("loss"));
});
const syntheticDate = [0, 0, 0, 0, 0];
synthetic(syntheticDate)
//设备OEE统计
OEEStatistics(null, document.getElementById("OEEStatistics"));

@ -16,28 +16,28 @@ const dataInformationFunction = (statusArray) => {
const synthetic = (statusArray) => {
let info = `<table style="position: absolute;top: 9%;left: 30%;width: 40%;height:7%;">
<tr style="width: 100%; height: 50%;">
<td style="border:0px solid red;font-size:230%;text-align:center;width: 23%;color: #99C4EF;">123</td>
<td style="border:0px solid red;font-size:230%;text-align:center;width: 27%;color: #7CED92;">123</td>
<td style="border:0px solid red;font-size:230%;text-align:center;width: 27%;color: #99C4EF;">123</td>
<td style="border:0px solid red;font-size:230%;text-align:center;width: 19%;color: #7CED92;">123</td>
<td style="border:0px solid red;font-size:230%;text-align:center;width: 15%;"></td>
<td style="border:0px solid red;font-size:175%;text-align:center;width: 23%;color: #99C4EF;">${statusArray.yesterdayEnergy || 0}</td>
<td style="border:0px solid red;font-size:175%;text-align:center;width: 27%;color: #7CED92;">${statusArray.thisMonthProuction || 0}</td>
<td style="border:0px solid red;font-size:175%;text-align:center;width: 27%;color: #99C4EF;">${statusArray.yesterdayProuction || 0}</td>
<td style="border:0px solid red;font-size:175%;text-align:center;width: 19%;color: #7CED92;">${statusArray.thisMonthEnergy || 0}</td>
<td style="border:0px solid red;font-size:175%;text-align:center;width: 15%;"></td>
</tr>
</table>
<table style="position: absolute;top: 24%;left: 30%;width: 42%;height:10%;">
<tr style="width: 100%; height: 50%;">
<td style="border:0px solid red;text-align:center;width: 7%;"></td>
<td style="border:0px solid red;font-size:230%;text-align:center;width: 13%;color: #70C0EC;">123</td>
<td style="border:0px solid red;font-size:175%;text-align:center;width: 13%;color: #70C0EC;">${statusArray.yesterdayEnergy || 0}</td>
<td style="border:0px solid red;text-align:center;width: 13%;"></td>
<td style="border:0px solid red;font-size:230%;text-align:center;width: 14%;color: #DB718D;">123</td>
<td style="border:0px solid red;font-size:175%;text-align:center;width: 14%;color: #DB718D;">${statusArray.yesterdayEnergy || 0}</td>
<td style="border:0px solid red;text-align:center;width: 12%;"></td>
<td style="border:0px solid red;font-size:230%;text-align:center;width: 13%;color: #8CEF92;">123</td>
<td style="border:0px solid red;font-size:175%;text-align:center;width: 13%;color: #8CEF92;">${statusArray.yesterdayEnergy || 0}</td>
<td style="border:0px solid red;text-align:center;width: 13%;"></td>
<td style="border:0px solid red;font-size:230%;text-align:center;width: 14%;color: #ECE790;">123</td>
<td style="border:0px solid red;font-size:175%;text-align:center;width: 14%;color: #ECE790;">${statusArray.yesterdayEnergy || 0}</td>
<td style="border:0px solid red;text-align:center;width: 0%;"></td>
</tr>
</table>
<span style="position: absolute;font-size:230%;top: 11%;left: 84.5%;width: 15%;height:10%;text-align:left;background: linear-gradient(to bottom, #D2E5F7, #8CBAE4);color: transparent;display:inline-block;-webkit-background-clip: text;">123213</span>
<span style="position: absolute;font-size:230%;top: 26%;left: 84.5%;width: 15%;height:10%;text-align:left;background: linear-gradient(to bottom, #F1FFFF, #7FE782);color: transparent;display:inline-block;-webkit-background-clip: text;">123213</span>
<span style="position: absolute;font-size:175%;top: 12%;left: 85%;width: 15%;height:10%;text-align:left;background: linear-gradient(to bottom, #D2E5F7, #8CBAE4);color: transparent;display:inline-block;-webkit-background-clip: text;">${statusArray.yesterdayEnergy || 0}</span>
<span style="position: absolute;font-size:175%;top: 26.7%;left: 85%;width: 15%;height:10%;text-align:left;background: linear-gradient(to bottom, #F1FFFF, #7FE782);color: transparent;display:inline-block;-webkit-background-clip: text;">${statusArray.yesterdayEnergy || 0}</span>
`;
$("#synthetic").append(info);

@ -87,10 +87,10 @@ const dataInformationFunction = (statusArray) => {
const energyProductionStatisticsFunction = (statusArray) => {
let info = `<table style="position: absolute;top: 8%;width: 100%;height:100%;">
<tr style="width: 100%; height: 100%;">
<td style="font-size:230%;border:0px solid red;width: 25%;text-align:center;color: #76BBE8;">68</td>
<td style="font-size:230%;border:0px solid red;width: 25%;text-align:center;color: #8AE9A0;">675</td>
<td style="font-size:230%;border:0px solid red;width: 25%;text-align:center;color: #76BBE8;">68</td>
<td style="font-size:230%;border:0px solid red;width: 25%;text-align:center;color: #8AE9A0;">675</td>
<td style="font-size:175%;border:0px solid red;width: 25%;text-align:center;color: #76BBE8;">68</td>
<td style="font-size:175%;border:0px solid red;width: 25%;text-align:center;color: #8AE9A0;">675</td>
<td style="font-size:175%;border:0px solid red;width: 25%;text-align:center;color: #76BBE8;">68</td>
<td style="font-size:175%;border:0px solid red;width: 25%;text-align:center;color: #8AE9A0;">675</td>
</tr>
</table>`;
@ -99,10 +99,10 @@ const energyProductionStatisticsFunction = (statusArray) => {
const runParamStatisticsFunction = (statusArray) => {
let info = `
<div style="font-size:230%;left: 9%;color:#76BBE8">68</div>
<div style="font-size:230%;left: 35%;color:#C0818B">685</div>
<div style="font-size:230%;left: 61%;color: #8AE9A0">685</div>
<div style="font-size:230%;left: 87%;color:#D5D2AA">685</div>
<div style="font-size:175%;left: 9%;color:#76BBE8">68</div>
<div style="font-size:175%;left: 35%;color:#C0818B">685</div>
<div style="font-size:175%;left: 61%;color: #8AE9A0">685</div>
<div style="font-size:175%;left: 87%;color:#D5D2AA">685</div>
`;
$("#runParamStatistics").append(info);

@ -20,7 +20,7 @@
<div class="energyProductionStatistics" id="energyProductionStatistics"></div>
<!--运行参数统计-->
<div class="runParamStatistics" id="runParamStatistics"></div>
<div style="font-size: 14px">
<div style="font-size: 16px">
<!--loss参数-->
<span class="lossParam" id="lossParam"></span>

Loading…
Cancel
Save