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

change - 箱壳可视化参数样式修改

Browse Source
master
wenjy 3 years ago
parent 0b4734eb34
commit b7ef93ab23
3 changed files with 109 additions and 7 deletions
Show Stats Download Patch File Download Diff File

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

@ -7,8 +7,8 @@ body {
background-size: 100% 100%; background-size: 100% 100%;
} }
.dataInformation{ .dataInformation {
border: 1px solid red; border: 0px solid red;
position: absolute; position: absolute;
width: 24%; width: 24%;
height: 22%; height: 22%;
@ -16,7 +16,63 @@ body {
left: 3.3%; left: 3.3%;
} }
.theEnergyConsumptionContrast{ .energyProductionStatistics {
border: 0px solid red;
position: absolute;
width: 42%;
height: 6%;
top: 9%;
left: 29%;
}
.runParamStatistics {
border: 0px solid red;
position: absolute;
width: 42%;
height: 7.5%;
top: 25%;
left: 29%;
}
.runParamStatistics div {
border: 0px solid red;
position: absolute;
top: 4%;
width: 13%;
height: 96%;
color: blueviolet;
display: flex;
justify-content: center;
align-items: center;
}
.lossParam{
border: 0px solid yellowgreen;
position: absolute;
width: 8.8%;
height: 4.5%;
top: 12.5%;
right: 6%;
display: flex;
justify-content: center;
align-items: center;
color: #8FB7D1;
}
.meterParam{
border: 0px solid yellowgreen;
position: absolute;
width: 8.8%;
height: 4.5%;
top: 27.4%;
right: 6%;
display: flex;
justify-content: center;
align-items: center;
color:#A5E3B1;
}
.theEnergyConsumptionContrast {
border: 1px solid red; border: 1px solid red;
position: absolute; position: absolute;
width: 24.1%; width: 24.1%;
@ -25,7 +81,7 @@ body {
left: 3.3%; left: 3.3%;
} }
.lossStatistics{ .lossStatistics {
border: 1px solid yellowgreen; border: 1px solid yellowgreen;
position: absolute; position: absolute;
width: 24%; width: 24%;
@ -34,7 +90,7 @@ body {
right: 3.3%; right: 3.3%;
} }
.deviceInfoTable{ .deviceInfoTable {
border: 1px solid #6ACBFE; border: 1px solid #6ACBFE;
position: absolute; position: absolute;
width: 33%; width: 33%;
@ -43,7 +99,7 @@ body {
left: 3.3%; left: 3.3%;
} }
.oeeStatistics{ .oeeStatistics {
border: 1px solid cornflowerblue; border: 1px solid cornflowerblue;
position: absolute; position: absolute;
width: 33%; width: 33%;
@ -52,7 +108,7 @@ body {
left: 38%; left: 38%;
} }
.faultRank{ .faultRank {
border: 1px solid bisque; border: 1px solid bisque;
position: absolute; position: absolute;
width: 24%; width: 24%;

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

@ -1,8 +1,18 @@
$(() => { $(() => {
/*数据信息*/
const statusArray = [0, 0, 0, 0, 0]; const statusArray = [0, 0, 0, 0, 0];
dataInformationFunction(statusArray); dataInformationFunction(statusArray);
energyProductionStatisticsFunction(statusArray);
runParamStatisticsFunction(statusArray);
$("#lossParam").text(123.87);
$("#meterParam").text(123.65);
}) })
/*数据信息*/
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%;">
@ -18,3 +28,28 @@ const dataInformationFunction = (statusArray) => {
$("#dataInformation").append(info); $("#dataInformation").append(info);
} }
/*能耗产量统计*/
const energyProductionStatisticsFunction = (statusArray) => {
let info = `<table style="position: absolute;top: 8%;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="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="border:0px solid red;width: 25%;text-align:center;color: #8AE9A0;">675</td>
</tr>
</table>`;
$("#energyProductionStatistics").append(info);
}
const runParamStatisticsFunction = (statusArray) => {
let info = `
<div style="left: 9%;color:#76BBE8">68</div>
<div style="left: 35%;color:#C0818B">685</div>
<div style="left: 61%;color: #8AE9A0">685</div>
<div style="left: 87%;color:#D5D2AA">685</div>
`;
$("#runParamStatistics").append(info);
}

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

@ -12,6 +12,17 @@
<body> <body>
<!--数据信息--> <!--数据信息-->
<div class="dataInformation" id="dataInformation"></div> <div class="dataInformation" id="dataInformation"></div>
<!--能耗产量统计-->
<div class="energyProductionStatistics" id="energyProductionStatistics"></div>
<!--运行参数统计-->
<div class="runParamStatistics" id="runParamStatistics"></div>
<!--loss参数-->
<div class="lossParam" id="lossParam"></div>
<!--节拍参数-->
<div class="meterParam" id="meterParam"></div>
<!--设备能耗产量对比--> <!--设备能耗产量对比-->
<div class="theEnergyConsumptionContrast" id="theEnergyConsumptionContrast"></div> <div class="theEnergyConsumptionContrast" id="theEnergyConsumptionContrast"></div>
<!--loss统计--> <!--loss统计-->

Write Preview
Loading…
Cancel
Save