修改样式

master
夜笙歌 3 years ago
parent 8d6e221fcd
commit a321560a29

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

@ -34,10 +34,10 @@ body {
.foamingLineRunStatus {
position: absolute;
width: 40%;
width: 41%;
height: 27%;
top: 10.5%;
left: 30.1%;
top: 10%;
left: 33%;
}
.inventoryStatistics {

@ -24,7 +24,7 @@ body {
height: 6%;
top: 8%;
left: 29%;
font-size: 16px !important;
font-size: 10% !important;
}
.runParamStatistics {
@ -34,7 +34,7 @@ body {
height: 7.5%;
top: 25%;
left: 29%;
font-size: 16px !important;
font-size: 10% !important;
}
.runParamStatistics div {
@ -61,7 +61,7 @@ body {
justify-content: center;
align-items: center;
color: red;
font-size: 175% !important;
font-size: 17.5% !important;
}
.meterParam {
@ -75,7 +75,7 @@ body {
justify-content: center;
align-items: center;
color: #63F659;
font-size: 175% !important;
font-size: 17.5% !important;
}
.OEEStatistics {

@ -11,7 +11,7 @@ $(() => {
dataInformationFunction(statusArray);
});
$.getJSON('/aluminumLiner/getRunParameters', function (result) {
synthetic(result)
synthetic(result,{a:1,b:1})
});

@ -1,8 +1,8 @@
document.write('<div style="position:absolute;width:4.2%;height:2%;top: 2.4%;left: 84.14%;border: 0 solid red;color:#71D7FF;font-size:0.08rem;">\n' +
document.write('<div style="position:absolute;width:4.2%;height:2%;top: 2%;left: 84.14%;border: 0 solid red;color:#71D7FF;font-size:0.08rem;">\n' +
' <span id="timeinfo"></span>\n' +
'</div>\n' +
'\n' +
'<div style="position:absolute;width:4.2%;height:2%;top: 2.4%;left: 92%;border: 0 solid red;color:#71D7FF;font-size:0.08rem;">\n' +
'<div style="position:absolute;width:6%;height:2%;top: 2%;left: 92%;border: 0 solid red;color:#71D7FF;font-size:0.08rem;">\n' +
' <span id="dateinfo"></span>\n' +
'</div>\n')

@ -2375,11 +2375,11 @@ const energyConsumption = (res, ids) => {
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 1,
color: "rgba(10,50,220)",
color: "#45C967",
},
{
offset: 0,
color: "rgba(40,140,210)",
color: "#55F675",
},
]);
},
@ -2402,6 +2402,9 @@ const energyConsumption = (res, ids) => {
return value + ' °C';
}
},
lineStyle:{
color:'#45b685'
},
data: yAxisDataTwo,
},
{
@ -2413,7 +2416,7 @@ const energyConsumption = (res, ids) => {
itemStyle: {
normal: {
color: function (params) {
return 'rgba(40,140,210)';
return '#55F675';
},
},
},
@ -2421,7 +2424,7 @@ const energyConsumption = (res, ids) => {
show: true,
position: "top",
textStyle: {
color: "#c502f1",
color: "#45C967",
},
},
symbolPosition: "end",

@ -12,7 +12,7 @@ const dataInformationFunction = (statusArray) => {
</table>`;
$("#dataInformation").append(info);
}
const synthetic = (statusArray) => {
const synthetic = (statusArray,param={a:0,b:0}) => {
console.log(statusArray);
let info = `<table style="position: absolute;top: 9%;left: 30%;width: 40%;height:7%;">
<tr style="width: 100%; height: 50%;">
@ -36,8 +36,8 @@ const synthetic = (statusArray) => {
<td style="border:0px solid red;text-align:center;width: 0%;"></td>
</tr>
</table>
<span style="position: absolute;font-size:175%;top: 12%;left: 85%;width: 9%; height: 6%; text-align: center;color: red;display:inline-block;-webkit-background-clip: text;">${statusArray[8] || 0}</span>
<span style="position: absolute;font-size:175%;top: 26.7%;left: 85%;width: 9%; height: 6%; text-align: center;color: #63F659;display:inline-block;-webkit-background-clip: text;">${statusArray[9] || 0}</span>
<span style="position: absolute;font-size:175%;top: ${12+param.a}%;left: 85%;width: 9%; height: 6%; text-align: center;color: red;display:inline-block;-webkit-background-clip: text;">${statusArray[8] || 0}</span>
<span style="position: absolute;font-size:175%;top:${26.7+param.b}%;left: 85%;width: 9%; height: 6%; text-align: center;color: #63F659;display:inline-block;-webkit-background-clip: text;">${statusArray[9] || 0}</span>
`;
$("#synthetic").append(info);
}

@ -40,7 +40,7 @@ $(() => {
let option = {
grid: {
top: '10%',
top: '15%',
left: '6%',
right: '6%',
bottom: '3%',
@ -120,12 +120,13 @@ $(() => {
const deviceStatus = (statusArray) => {
let info = `<table style="width: 100%;height:100%;">
<tr style="width: 100%;">
<td style="border:0px solid red;text-align:center;"><img src="../../img/foamBox/${statusArray[0] == 1 ? "deviceopen.png" : "deviceclose.png"}" style="width: 3vw;"/></td>
<td style="border:0px solid red;text-align:center;"><img src="../../img/foamBox/${statusArray[1] == 1 ? "deviceopen.png" : "deviceclose.png"}" style="width: 3vw;"/></td>
<td style="border:0px solid red;text-align:center;"><img src="../../img/foamBox/${statusArray[2] == 1 ? "deviceopen.png" : "deviceclose.png"}" style="width: 3vw;"/></td>
<td style="border:0px solid red;text-align:center;"><img src="../../img/foamBox/${statusArray[3] == 1 ? "deviceopen.png" : "deviceclose.png"}" style="width: 3vw;"/></td>
<td style="border:0px solid red;text-align:right;padding-right: 12px;"><img src="../../img/foamBox/${statusArray[4] == 1 ? "deviceopen.png" : "deviceclose.png"}" style="width: 3vw;"/></td>
<td style="border:0px solid red;text-align:right;"><img src="../../img/foamBox/${statusArray[5] == 1 ? "deviceopen.png" : "deviceclose.png"}" style="width: 3vw;"/></td>
<td style="width:15%;border:0px solid red;text-align:left;"><img src="../../img/foamBox/${statusArray[0] == 1 ? "deviceopen.png" : "deviceclose.png"}" style="width: 2vw;"/></td>
<td style="width:15%;border:0px solid red;text-align:left;"><img src="../../img/foamBox/${statusArray[1] == 1 ? "deviceopen.png" : "deviceclose.png"}" style="width: 2vw;"/></td>
<td style="width:15.3%;border:0px solid red;text-align:left;"><img src="../../img/foamBox/${statusArray[2] == 1 ? "deviceopen.png" : "deviceclose.png"}" style="width: 2vw;"/></td>
<td style="width:13%;border:0px solid red;text-align:left;"><img src="../../img/foamBox/${statusArray[3] == 1 ? "deviceopen.png" : "deviceclose.png"}" style="width: 2vw;"/></td>
<td style="width:9.7%;border:0px solid red;text-align:center;"></td>
<td style="width:18%;border:0px solid red;text-align:left;"><img src="../../img/foamBox/${statusArray[4] == 1 ? "deviceopen.png" : "deviceclose.png"}" style="width: 2vw;"/></td>
<td style="width:14%;border:0px solid red;text-align:left;"><img src="../../img/foamBox/${statusArray[5] == 1 ? "deviceopen.png" : "deviceclose.png"}" style="width: 2vw;"/></td>
</tr>
</table>`;

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

Loading…
Cancel
Save