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

3 years ago · b7ef93ab23
parent 0b4734eb34
commit b7ef93ab23
3 changed files with 109 additions and 7 deletions
--- a/productionboard/src/main/resources/static/css/tankShell/device.css
+++ b/productionboard/src/main/resources/static/css/tankShell/device.css
@ -7,8 +7,8 @@ body {
    background-size: 100% 100%;
 }

-.dataInformation{
-    border: 1px solid red;
+.dataInformation {
+    border: 0px solid red;
    position: absolute;
    width: 24%;
    height: 22%;
@ -16,7 +16,63 @@ body {
    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;
    position: absolute;
    width: 24.1%;
@ -25,7 +81,7 @@ body {
    left: 3.3%;
 }

-.lossStatistics{
+.lossStatistics {
    border: 1px solid yellowgreen;
    position: absolute;
    width: 24%;
@ -34,7 +90,7 @@ body {
    right: 3.3%;
 }

-.deviceInfoTable{
+.deviceInfoTable {
    border: 1px solid #6ACBFE;
    position: absolute;
    width: 33%;
@ -43,7 +99,7 @@ body {
    left: 3.3%;
 }

-.oeeStatistics{
+.oeeStatistics {
    border: 1px solid cornflowerblue;
    position: absolute;
    width: 33%;
@ -52,7 +108,7 @@ body {
    left: 38%;
 }

-.faultRank{
+.faultRank {
    border: 1px solid bisque;
    position: absolute;
    width: 24%;
--- a/productionboard/src/main/resources/static/js/tankShell/device.js
+++ b/productionboard/src/main/resources/static/js/tankShell/device.js
@ -1,8 +1,18 @@
 $(() => {
+    /*数据信息*/
    const statusArray = [0, 0, 0, 0, 0];
    dataInformationFunction(statusArray);
+
+    energyProductionStatisticsFunction(statusArray);
+
+    runParamStatisticsFunction(statusArray);
+
+    $("#lossParam").text(123.87);
+
+    $("#meterParam").text(123.65);
 })

+/*数据信息*/
 const dataInformationFunction = (statusArray) => {
    let info = `<table style="position: absolute;top: 8%;width: 100%;height:100%;">
            <tr style="width: 100%; height: 50%;">
@ -18,3 +28,28 @@ const dataInformationFunction = (statusArray) => {

    $("#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);
+}
--- a/productionboard/src/main/resources/templates/tankShell/device.html
+++ b/productionboard/src/main/resources/templates/tankShell/device.html
@ -12,6 +12,17 @@
 <body>
    <!--数据信息-->
    <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>
    <!--loss统计-->