You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
44 lines
3.5 KiB
JavaScript
44 lines
3.5 KiB
JavaScript
2 years ago
|
|
||
|
|
const dataInformationFunction = (statusArray) => {
|
||
|
|
let info = `<table style="position: absolute;top: 8%;width: 100%;height:100%;">
|
||
|
|
<tr style="width: 100%; height: 50%;">
|
||
|
|
<td style="font-size:150%;border:0px solid red;text-align:center;width: 50%;"><i ${statusArray[0] == 1 ? 'style="color:rgb(107, 253, 110);"' : 'style="color: rgb(255, 105, 106);"'} class="fa-regular ${statusArray[0] == 1 ? "fa-circle-check" : "fa-circle-xmark"}"></i>${statusArray[0] == 1 ? `<span style="color:rgb(107, 253, 110);margin-left: 10px">正常</span>` : `<span style="color: rgb(255, 105, 106);margin-left: 10px">异常</span>`}</td>
|
||
|
|
<td style="font-size:150%;border:0px solid red;text-align:center;width: 50%;color: #E6ECBE;">${statusArray[1]}</td>
|
||
|
|
</tr>
|
||
|
|
<tr style="width: 100%; height: 50%;">
|
||
|
|
<td style="font-size:150%;border:0px solid red;text-align:center;width: 50%;color: #59B2F6;">${statusArray[2]}kW·h</td>
|
||
|
|
<td style="font-size:150%;border:0px solid red;text-align:center;width: 50%;color: red;">${statusArray[3]}</td>
|
||
|
|
</tr>
|
||
|
|
</table>`;
|
||
|
|
$("#dataInformation").append(info);
|
||
|
|
}
|
||
|
|
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%;">
|
||
|
|
<td style="border:0px solid red;font-size:175%;text-align:center;width: 23%;color: #59B2F6;">${statusArray[0] || 0}</td>
|
||
|
|
<td style="border:0px solid red;font-size:175%;text-align:center;width: 27%;color: #63F659;">${statusArray[1] || 0}</td>
|
||
|
|
<td style="border:0px solid red;font-size:175%;text-align:center;width: 27%;color: #59B2F6;">${statusArray[2] || 0}</td>
|
||
|
|
<td style="border:0px solid red;font-size:175%;text-align:center;width: 19%;color: #FF696A;">${statusArray[3] || 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:175%;text-align:center;width: 13%;color: #59B2F6;">${statusArray[4] || 0}</td>
|
||
|
|
<td style="border:0px solid red;text-align:center;width: 13%;"></td>
|
||
|
|
<td style="border:0px solid red;font-size:175%;text-align:center;width: 14%;color: #FF696A;">${statusArray[5] || 0}</td>
|
||
|
|
<td style="border:0px solid red;text-align:center;width: 12%;"></td>
|
||
|
|
<td style="border:0px solid red;font-size:175%;text-align:center;width: 13%;color: #63F659;">${statusArray[6] || 0}</td>
|
||
|
|
<td style="border:0px solid red;text-align:center;width: 13%;"></td>
|
||
|
|
<td style="border:0px solid red;font-size:175%;text-align:center;width: 14%;color: #FF696A;">${statusArray[7] || 0}</td>
|
||
|
|
<td style="border:0px solid red;text-align:center;width: 0%;"></td>
|
||
|
|
</tr>
|
||
|
|
</table>
|
||
|
|
<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);
|
||
|
|
}
|