修改样式

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

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

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

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

@ -11,7 +11,7 @@ $(() => {
dataInformationFunction(statusArray); dataInformationFunction(statusArray);
}); });
$.getJSON('/aluminumLiner/getRunParameters', function (result) { $.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' + ' <span id="timeinfo"></span>\n' +
'</div>\n' + '</div>\n' +
'\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' + ' <span id="dateinfo"></span>\n' +
'</div>\n') '</div>\n')

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

@ -12,7 +12,7 @@ const dataInformationFunction = (statusArray) => {
</table>`; </table>`;
$("#dataInformation").append(info); $("#dataInformation").append(info);
} }
const synthetic = (statusArray) => { const synthetic = (statusArray,param={a:0,b:0}) => {
console.log(statusArray); console.log(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%;">
@ -36,8 +36,8 @@ const synthetic = (statusArray) => {
<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;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: ${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%;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:${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); $("#synthetic").append(info);
} }

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

@ -22,7 +22,7 @@
<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: 16px"> <div >
<!--loss参数--> <!--loss参数-->
<span class="lossParam" id="lossParam"></span> <span class="lossParam" id="lossParam"></span>

Loading…
Cancel
Save