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

修改

Browse Source
master
夜笙歌 2 years ago
parent 2dc6e93650
commit 5a4fe70bbc
8 changed files with 62 additions and 60 deletions
Show Stats Download Patch File Download Diff File

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

@ -47,10 +47,10 @@ body {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
font-size: 16px !important; /* font-size: 16px !important; */
} }
.lossParam{ .lossParam {
border: 0px solid yellowgreen; border: 0px solid yellowgreen;
position: absolute; position: absolute;
width: 8.8%; width: 8.8%;
@ -61,10 +61,10 @@ body {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
color: #8FB7D1; color: #8FB7D1;
font-size: 16px !important; font-size: 230% !important;
} }
.meterParam{ .meterParam {
border: 0px solid yellowgreen; border: 0px solid yellowgreen;
position: absolute; position: absolute;
width: 8.8%; width: 8.8%;
@ -74,8 +74,8 @@ body {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
color:#A5E3B1; color: #A5E3B1;
font-size: 16px !important; font-size: 230% !important;
} }
.OEEStatistics { .OEEStatistics {

24
productionboard/src/main/resources/static/js/common/synthetic.js
Unescape Escape View File

@ -2,7 +2,7 @@
const dataInformationFunction = (statusArray) => { const dataInformationFunction = (statusArray) => {
let info = `<table style="position: absolute;top: 8%;width: 100%;height:100%;"> let info = `<table style="position: absolute;top: 8%;width: 100%;height:100%;">
<tr style="width: 100%; height: 50%;"> <tr style="width: 100%; height: 50%;">
<td style="border:0px solid red;text-align:center;width: 50%;"><i ${statusArray[0] == 0 ? 'style="color:green;"' : 'style="color: red;"'} class="fa-regular ${statusArray[0] == 0 ? "fa-circle-check" : "fa-circle-xmark"}"></i>${statusArray[0] == 0 ? `<span style="color:green;margin-left: 10px">运行正常</span>` : `<span style="color:red;margin-left: 10px">运行异常</span>`}</td> <td style="border:0px solid red;text-align:center;width: 50%;"><i ${statusArray[0] == 1 ? 'style="color:green;"' : 'style="color: red;"'} class="fa-regular ${statusArray[0] == 1 ? "fa-circle-check" : "fa-circle-xmark"}"></i>${statusArray[0] == 1 ? `<span style="color:green;margin-left: 10px">运行正常</span>` : `<span style="color:red;margin-left: 10px">运行异常</span>`}</td>
<td style="border:0px solid red;text-align:center;width: 50%;color: #E6ECBE;">${statusArray[1]}</td> <td style="border:0px solid red;text-align:center;width: 50%;color: #E6ECBE;">${statusArray[1]}</td>
</tr> </tr>
<tr style="width: 100%; height: 50%;"> <tr style="width: 100%; height: 50%;">
@ -16,28 +16,28 @@ const dataInformationFunction = (statusArray) => {
const synthetic = (statusArray) => { const synthetic = (statusArray) => {
let info = `<table style="position: absolute;top: 9%;left: 30%;width: 40%;height:7%;"> let info = `<table style="position: absolute;top: 9%;left: 30%;width: 40%;height:7%;">
<tr style="width: 100%; height: 50%;"> <tr style="width: 100%; height: 50%;">
<td style="border:0px solid red;text-align:center;width: 23%;color: #99C4EF;">123</td> <td style="border:0px solid red;font-size:230%;text-align:center;width: 23%;color: #99C4EF;">123</td>
<td style="border:0px solid red;text-align:center;width: 27%;color: #7CED92;">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;text-align:center;width: 27%;color: #99C4EF;">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;text-align:center;width: 19%;color: #7CED92;">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;text-align:center;width: 15%;"></td> <td style="border:0px solid red;font-size:230%;text-align:center;width: 15%;"></td>
</tr> </tr>
</table> </table>
<table style="position: absolute;top: 24%;left: 30%;width: 42%;height:10%;"> <table style="position: absolute;top: 24%;left: 30%;width: 42%;height:10%;">
<tr style="width: 100%; height: 50%;"> <tr style="width: 100%; height: 50%;">
<td style="border:0px solid red;text-align:center;width: 7%;"></td> <td style="border:0px solid red;text-align:center;width: 7%;"></td>
<td style="border:0px solid red;text-align:center;width: 13%;color: #70C0EC;">123</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;text-align:center;width: 13%;"></td> <td style="border:0px solid red;text-align:center;width: 13%;"></td>
<td style="border:0px solid red;text-align:center;width: 14%;color: #DB718D;">123</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;text-align:center;width: 12%;"></td> <td style="border:0px solid red;text-align:center;width: 12%;"></td>
<td style="border:0px solid red;text-align:center;width: 13%;color: #8CEF92;">123</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;text-align:center;width: 13%;"></td> <td style="border:0px solid red;text-align:center;width: 13%;"></td>
<td style="border:0px solid red;text-align:center;width: 14%;color: #ECE790;">123</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;text-align:center;width: 0%;"></td> <td style="border:0px solid red;text-align:center;width: 0%;"></td>
</tr> </tr>
</table> </table>
<span style="position: absolute;top: 13%;left: 85%;width: 9%;height:4%;text-align:center;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: 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;top: 28%;left: 85%;width: 9%;height:4%;text-align:center;background: linear-gradient(to bottom, #F1FFFF, #7FE782);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>
`; `;
$("#synthetic").append(info); $("#synthetic").append(info);

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

@ -70,7 +70,7 @@ $(() => {
const dataInformationFunction = (statusArray) => { const dataInformationFunction = (statusArray) => {
let info = `<table style="position: absolute;top: 8%;width: 100%;height:100%;"> let info = `<table style="position: absolute;top: 8%;width: 100%;height:100%;">
<tr style="width: 100%; height: 50%;"> <tr style="width: 100%; height: 50%;">
<td style="border:0px solid red;text-align:center;width: 50%;"><i ${statusArray[0] == 0 ? 'style="color:green;"' : 'style="color: red;"'} class="fa-regular ${statusArray[0] == 0 ? "fa-circle-check" : "fa-circle-xmark"}"></i>${statusArray[0] == 0 ? `<span style="color:green;margin-left: 10px">运行正常</span>` : `<span style="color:red;margin-left: 10px">运行异常</span>`}</td> <td style="border:0px solid red;text-align:center;width: 50%;"><i ${statusArray[0] == 1 ? 'style="color:green;"' : 'style="color: red;"'} class="fa-regular ${statusArray[0] == 1 ? "fa-circle-check" : "fa-circle-xmark"}"></i>${statusArray[0] == 1 ? `<span style="color:green;margin-left: 10px">运行正常</span>` : `<span style="color:red;margin-left: 10px">运行异常</span>`}</td>
<td style="border:0px solid red;text-align:center;width: 50%;color: #E6ECBE;">389kW</td> <td style="border:0px solid red;text-align:center;width: 50%;color: #E6ECBE;">389kW</td>
</tr> </tr>
<tr style="width: 100%; height: 50%;"> <tr style="width: 100%; height: 50%;">
@ -87,10 +87,10 @@ const dataInformationFunction = (statusArray) => {
const energyProductionStatisticsFunction = (statusArray) => { const energyProductionStatisticsFunction = (statusArray) => {
let info = `<table style="position: absolute;top: 8%;width: 100%;height:100%;"> let info = `<table style="position: absolute;top: 8%;width: 100%;height:100%;">
<tr style="width: 100%; height: 100%;"> <tr style="width: 100%; height: 100%;">
<td style="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: #76BBE8;">68</td>
<td style="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: #8AE9A0;">675</td>
<td style="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: #76BBE8;">68</td>
<td style="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: #8AE9A0;">675</td>
</tr> </tr>
</table>`; </table>`;
@ -99,10 +99,10 @@ const energyProductionStatisticsFunction = (statusArray) => {
const runParamStatisticsFunction = (statusArray) => { const runParamStatisticsFunction = (statusArray) => {
let info = ` let info = `
<div style="left: 9%;color:#76BBE8">68</div> <div style="font-size:230%;left: 9%;color:#76BBE8">68</div>
<div style="left: 35%;color:#C0818B">685</div> <div style="font-size:230%;left: 35%;color:#C0818B">685</div>
<div style="left: 61%;color: #8AE9A0">685</div> <div style="font-size:230%;left: 61%;color: #8AE9A0">685</div>
<div style="left: 87%;color:#D5D2AA">685</div> <div style="font-size:230%;left: 87%;color:#D5D2AA">685</div>
`; `;
$("#runParamStatistics").append(info); $("#runParamStatistics").append(info);

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

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

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

@ -47,10 +47,10 @@ body {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
font-size: 16px !important; /* font-size: 16px !important; */
} }
.lossParam{ .lossParam {
border: 0px solid yellowgreen; border: 0px solid yellowgreen;
position: absolute; position: absolute;
width: 8.8%; width: 8.8%;
@ -61,10 +61,10 @@ body {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
color: #8FB7D1; color: #8FB7D1;
font-size: 16px !important; font-size: 230% !important;
} }
.meterParam{ .meterParam {
border: 0px solid yellowgreen; border: 0px solid yellowgreen;
position: absolute; position: absolute;
width: 8.8%; width: 8.8%;
@ -74,8 +74,8 @@ body {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
color:#A5E3B1; color: #A5E3B1;
font-size: 16px !important; font-size: 230% !important;
} }
.OEEStatistics { .OEEStatistics {

24
productionboard/target/classes/static/js/common/synthetic.js
Unescape Escape View File

@ -2,7 +2,7 @@
const dataInformationFunction = (statusArray) => { const dataInformationFunction = (statusArray) => {
let info = `<table style="position: absolute;top: 8%;width: 100%;height:100%;"> let info = `<table style="position: absolute;top: 8%;width: 100%;height:100%;">
<tr style="width: 100%; height: 50%;"> <tr style="width: 100%; height: 50%;">
<td style="border:0px solid red;text-align:center;width: 50%;"><i ${statusArray[0] == 0 ? 'style="color:green;"' : 'style="color: red;"'} class="fa-regular ${statusArray[0] == 0 ? "fa-circle-check" : "fa-circle-xmark"}"></i>${statusArray[0] == 0 ? `<span style="color:green;margin-left: 10px">运行正常</span>` : `<span style="color:red;margin-left: 10px">运行异常</span>`}</td> <td style="border:0px solid red;text-align:center;width: 50%;"><i ${statusArray[0] == 1 ? 'style="color:green;"' : 'style="color: red;"'} class="fa-regular ${statusArray[0] == 1 ? "fa-circle-check" : "fa-circle-xmark"}"></i>${statusArray[0] == 1 ? `<span style="color:green;margin-left: 10px">运行正常</span>` : `<span style="color:red;margin-left: 10px">运行异常</span>`}</td>
<td style="border:0px solid red;text-align:center;width: 50%;color: #E6ECBE;">${statusArray[1]}</td> <td style="border:0px solid red;text-align:center;width: 50%;color: #E6ECBE;">${statusArray[1]}</td>
</tr> </tr>
<tr style="width: 100%; height: 50%;"> <tr style="width: 100%; height: 50%;">
@ -16,28 +16,28 @@ const dataInformationFunction = (statusArray) => {
const synthetic = (statusArray) => { const synthetic = (statusArray) => {
let info = `<table style="position: absolute;top: 9%;left: 30%;width: 40%;height:7%;"> let info = `<table style="position: absolute;top: 9%;left: 30%;width: 40%;height:7%;">
<tr style="width: 100%; height: 50%;"> <tr style="width: 100%; height: 50%;">
<td style="border:0px solid red;text-align:center;width: 23%;color: #99C4EF;">123</td> <td style="border:0px solid red;font-size:230%;text-align:center;width: 23%;color: #99C4EF;">123</td>
<td style="border:0px solid red;text-align:center;width: 27%;color: #7CED92;">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;text-align:center;width: 27%;color: #99C4EF;">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;text-align:center;width: 19%;color: #7CED92;">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;text-align:center;width: 15%;"></td> <td style="border:0px solid red;font-size:230%;text-align:center;width: 15%;"></td>
</tr> </tr>
</table> </table>
<table style="position: absolute;top: 24%;left: 30%;width: 42%;height:10%;"> <table style="position: absolute;top: 24%;left: 30%;width: 42%;height:10%;">
<tr style="width: 100%; height: 50%;"> <tr style="width: 100%; height: 50%;">
<td style="border:0px solid red;text-align:center;width: 7%;"></td> <td style="border:0px solid red;text-align:center;width: 7%;"></td>
<td style="border:0px solid red;text-align:center;width: 13%;color: #70C0EC;">123</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;text-align:center;width: 13%;"></td> <td style="border:0px solid red;text-align:center;width: 13%;"></td>
<td style="border:0px solid red;text-align:center;width: 14%;color: #DB718D;">123</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;text-align:center;width: 12%;"></td> <td style="border:0px solid red;text-align:center;width: 12%;"></td>
<td style="border:0px solid red;text-align:center;width: 13%;color: #8CEF92;">123</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;text-align:center;width: 13%;"></td> <td style="border:0px solid red;text-align:center;width: 13%;"></td>
<td style="border:0px solid red;text-align:center;width: 14%;color: #ECE790;">123</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;text-align:center;width: 0%;"></td> <td style="border:0px solid red;text-align:center;width: 0%;"></td>
</tr> </tr>
</table> </table>
<span style="position: absolute;top: 13%;left: 85%;width: 9%;height:4%;text-align:center;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: 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;top: 28%;left: 85%;width: 9%;height:4%;text-align:center;background: linear-gradient(to bottom, #F1FFFF, #7FE782);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>
`; `;
$("#synthetic").append(info); $("#synthetic").append(info);

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

@ -70,7 +70,7 @@ $(() => {
const dataInformationFunction = (statusArray) => { const dataInformationFunction = (statusArray) => {
let info = `<table style="position: absolute;top: 8%;width: 100%;height:100%;"> let info = `<table style="position: absolute;top: 8%;width: 100%;height:100%;">
<tr style="width: 100%; height: 50%;"> <tr style="width: 100%; height: 50%;">
<td style="border:0px solid red;text-align:center;width: 50%;"><i ${statusArray[0] == 0 ? 'style="color:green;"' : 'style="color: red;"'} class="fa-regular ${statusArray[0] == 0 ? "fa-circle-check" : "fa-circle-xmark"}"></i>${statusArray[0] == 0 ? `<span style="color:green;margin-left: 10px">运行正常</span>` : `<span style="color:red;margin-left: 10px">运行异常</span>`}</td> <td style="border:0px solid red;text-align:center;width: 50%;"><i ${statusArray[0] == 1 ? 'style="color:green;"' : 'style="color: red;"'} class="fa-regular ${statusArray[0] == 1 ? "fa-circle-check" : "fa-circle-xmark"}"></i>${statusArray[0] == 1 ? `<span style="color:green;margin-left: 10px">运行正常</span>` : `<span style="color:red;margin-left: 10px">运行异常</span>`}</td>
<td style="border:0px solid red;text-align:center;width: 50%;color: #E6ECBE;">389kW</td> <td style="border:0px solid red;text-align:center;width: 50%;color: #E6ECBE;">389kW</td>
</tr> </tr>
<tr style="width: 100%; height: 50%;"> <tr style="width: 100%; height: 50%;">
@ -87,10 +87,10 @@ const dataInformationFunction = (statusArray) => {
const energyProductionStatisticsFunction = (statusArray) => { const energyProductionStatisticsFunction = (statusArray) => {
let info = `<table style="position: absolute;top: 8%;width: 100%;height:100%;"> let info = `<table style="position: absolute;top: 8%;width: 100%;height:100%;">
<tr style="width: 100%; height: 100%;"> <tr style="width: 100%; height: 100%;">
<td style="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: #76BBE8;">68</td>
<td style="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: #8AE9A0;">675</td>
<td style="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: #76BBE8;">68</td>
<td style="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: #8AE9A0;">675</td>
</tr> </tr>
</table>`; </table>`;
@ -99,10 +99,10 @@ const energyProductionStatisticsFunction = (statusArray) => {
const runParamStatisticsFunction = (statusArray) => { const runParamStatisticsFunction = (statusArray) => {
let info = ` let info = `
<div style="left: 9%;color:#76BBE8">68</div> <div style="font-size:230%;left: 9%;color:#76BBE8">68</div>
<div style="left: 35%;color:#C0818B">685</div> <div style="font-size:230%;left: 35%;color:#C0818B">685</div>
<div style="left: 61%;color: #8AE9A0">685</div> <div style="font-size:230%;left: 61%;color: #8AE9A0">685</div>
<div style="left: 87%;color:#D5D2AA">685</div> <div style="font-size:230%;left: 87%;color:#D5D2AA">685</div>
`; `;
$("#runParamStatistics").append(info); $("#runParamStatistics").append(info);

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

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

Write Preview
Loading…
Cancel
Save