From 683986228456d41517aee67dc66b07d6be49e274 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A4=9C=E7=AC=99=E6=AD=8C?= <2277317060@qq.com>
Date: Thu, 9 Jun 2022 18:03:08 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=AD=97=E4=BD=93=E9=A2=9C?=
 =?UTF-8?q?=E8=89=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../static/js/common/echarts.common.js        | 51 +++++++++++--------
 .../resources/static/js/common/synthetic.js   | 12 ++---
 .../resources/static/js/tankShell/device.js   | 28 ++--------
 .../static/js/common/echarts.common.js        | 51 +++++++++++--------
 .../classes/static/js/common/synthetic.js     | 12 ++---
 .../classes/static/js/tankShell/device.js     | 28 ++--------
 6 files changed, 76 insertions(+), 106 deletions(-)

diff --git a/productionboard/src/main/resources/static/js/common/echarts.common.js b/productionboard/src/main/resources/static/js/common/echarts.common.js
index 51a96a9..9f1a8ce 100644
--- a/productionboard/src/main/resources/static/js/common/echarts.common.js
+++ b/productionboard/src/main/resources/static/js/common/echarts.common.js
@@ -1530,8 +1530,8 @@ const multipleThreeDimensionalCylindrical = (res, ids) => {
 //设备OEE统计
 const OEEStatistics = (res, ids) => {
     let mycharts = echarts.init(ids);
-    let xAxisData = res.map(val => val.yValue);
-    let yAxisData = res.map(val => val.xValue);
+    let xAxisData = res.map(val => val.xValue);
+    let yAxisData = res.map(val => val.yValue);
 
     let option = {
         tooltip: {},
@@ -1637,7 +1637,7 @@ const OEEStatistics = (res, ids) => {
                     show: true,
                     position: "top",
                     textStyle: {
-                        color: "#28ffb3",
+                        color: "rgb(165,122,75)",
                     },
                 },
                 itemStyle: {
@@ -2124,7 +2124,7 @@ const loss = (res, ids) => {
                     show: true,
                     position: "top",
                     textStyle: {
-                        color: "#02C3F1",
+                        color: barTopColor[0],
                     },
                 },
                 symbolPosition: "end",
@@ -2181,7 +2181,7 @@ const equipmentFailure = (res, ids) => {
         grid: {
             top: '1%',
             left: '6%',
-            right: '6%',
+            right: '15%',
             bottom: '3%',
             containLabel: true
         },
@@ -2256,26 +2256,33 @@ const equipmentFailure = (res, ids) => {
             },
         },
         series: [
-            {
-                name: "柱顶部",
-                type: "pictorialBar",
-                symbolSize: [6, 13],
-                symbolOffset: [3, 0],
-                z: 12,
-                itemStyle: {
-                    normal: {
-                        color: function (params) {
-                            return "#B78E45";
-                        },
-                    },
-                },
-                symbolPosition: "end",
-                data: values,
-            },
+            // {
+            //     name: "柱顶部",
+            //     type: "pictorialBar",
+            //     symbolSize: [6, 13],
+            //     symbolOffset: [3, 0],
+            //     z: 12,
+            //     itemStyle: {
+            //         normal: {
+            //             color: function (params) {
+            //                 return "#B78E45";
+            //             },
+            //         },
+            //     },
+            //     symbolPosition: "end",
+            //     data: values,
+            // },
             {
                 name: '2011',
                 type: 'bar',
                 data: values,
+                label: {
+                    show: true,
+                    position: "right",
+                    textStyle: {
+                        color: '#CCFF66',
+                    },
+                },
                 itemStyle: {
                     normal: {
                         color: function (params) {
@@ -2286,7 +2293,7 @@ const equipmentFailure = (res, ids) => {
                                 },
                                 {
                                     offset: 0,
-                                    color: "#B78E45",
+                                    color: "#CCFF66",
                                 },
                             ]);
                         },
diff --git a/productionboard/src/main/resources/static/js/common/synthetic.js b/productionboard/src/main/resources/static/js/common/synthetic.js
index 74fed55..05b094d 100644
--- a/productionboard/src/main/resources/static/js/common/synthetic.js
+++ b/productionboard/src/main/resources/static/js/common/synthetic.js
@@ -2,12 +2,12 @@
 const dataInformationFunction = (statusArray) => {
     let info = `<table style="position: absolute;top: 8%;width: 100%;height:100%;">
             <tr style="width: 100%; height: 50%;">
-                <td style="border:0px solid red;text-align:center;width: 50%;"><i ${statusArray[0] == 1 ? 'style="color:green;"' : 'style="color: red;"'}  class="fa-regular ${statusArray[0] == 1 ? "fa-circle-check" : "fa-circle-xmark"}"></i>${statusArray[0] == 1 ? `<span style="color:green;margin-left: 10px">运行正常</span>` : `<span style="color:red;margin-left: 10px">运行异常</span>`}</td>
-                <td style="border:0px solid red;text-align:center;width: 50%;color: #E6ECBE;">${statusArray[1]}</td>
+                <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="border:0px solid red;text-align:center;width: 50%;color: white;">${statusArray[2]}kW·h</td>
-                <td style="border:0px solid red;text-align:center;width: 50%;color: red;">${statusArray[3]}</td>
+                <td style="font-size:150%;border:0px solid red;text-align:center;width: 50%;color: white;">${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);
@@ -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: 15%;height:10%;text-align:left;background: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: 15%;height:10%;text-align:left;background:color: #63F659;display:inline-block;-webkit-background-clip: text;">${statusArray[9] || 0}</span>
+        <span style="position: absolute;font-size:175%;top: 12%;left: 85%;width: 15%;height:10%;text-align:left;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: 15%;height:10%;text-align:left;color: #63F659;display:inline-block;-webkit-background-clip: text;">${statusArray[9] || 0}</span>
         `;
     $("#synthetic").append(info);
 }
diff --git a/productionboard/src/main/resources/static/js/tankShell/device.js b/productionboard/src/main/resources/static/js/tankShell/device.js
index 219e8fd..2e66106 100644
--- a/productionboard/src/main/resources/static/js/tankShell/device.js
+++ b/productionboard/src/main/resources/static/js/tankShell/device.js
@@ -5,29 +5,7 @@ $(() => {
         OEEStatistics(result, document.getElementById("OEEStatistics"));
     });
     setInterval(() => {
-        let result = [
-            {
-                "createTime": 1654729200000,
-                "yValue": "07",
-                "xValue": Math.random() * 3
-            },
-            {
-                "createTime": 1654732800000,
-                "yValue": "08",
-                "xValue": Math.random() * 3
-            },
-            {
-                "createTime": 1654736400000,
-                "yValue": "09",
-                "xValue": Math.random() * 3
-            },
-            {
-                "createTime": 1654740000000,
-                "yValue": "10",
-                "xValue": Math.random() * 3
-            }
-        ]
-        OEEStatistics(result, document.getElementById("OEEStatistics"));
+        // OEEStatistics(result, document.getElementById("OEEStatistics"));
     }, 1000);
 
     //设备故障排名
@@ -107,13 +85,13 @@ const dataInformationFunction = (statusArray) => {
     console.log(res);
     let info = `<table style="position: absolute;top: 8%;width: 100%;height:100%;">
             <tr style="width: 100%; height: 50%;">
-                <td style="border:0px solid red;text-align:center;width: 50%;"><i ${res.deviceStatus == 1 ? 'style="color:rgb(107, 253, 110);"' : 'style="color: rgb(255, 105, 106);"'}  class="fa-regular ${res.deviceStatus == 1 ? "fa-circle-check" : "fa-circle-xmark"}"></i>${res.deviceStatus == 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="border:0px solid red;text-align:center;width: 50%;"><i ${res.deviceStatus == 1 ? 'style="color:rgb(107, 253, 110);"' : 'style="color: rgb(255, 105, 106);"'}  class="fa-regular ${res.deviceStatus == 1 ? "fa-circle-check" : "fa-circle-xmark"}"></i>${res.deviceStatus == 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="border:0px solid red;text-align:center;width: 50%;color: #FFEF76;"> ${res.devicePower}kW</td>
             </tr>
             <tr style="width: 100%; height: 50%;">
             
                 <td style="border:0px solid red;text-align:center;width: 50%;color: #CEEFFE;"> ${res.deviceEnergy}kW·h</td>
-                <td style="border:0px solid red;text-align:center;width: 50%;color: #red;">2</td>
+                <td style="border:0px solid red;text-align:center;width: 50%;color: red;">2</td>
             </tr>
         </table>`;
 
diff --git a/productionboard/target/classes/static/js/common/echarts.common.js b/productionboard/target/classes/static/js/common/echarts.common.js
index 51a96a9..9f1a8ce 100644
--- a/productionboard/target/classes/static/js/common/echarts.common.js
+++ b/productionboard/target/classes/static/js/common/echarts.common.js
@@ -1530,8 +1530,8 @@ const multipleThreeDimensionalCylindrical = (res, ids) => {
 //设备OEE统计
 const OEEStatistics = (res, ids) => {
     let mycharts = echarts.init(ids);
-    let xAxisData = res.map(val => val.yValue);
-    let yAxisData = res.map(val => val.xValue);
+    let xAxisData = res.map(val => val.xValue);
+    let yAxisData = res.map(val => val.yValue);
 
     let option = {
         tooltip: {},
@@ -1637,7 +1637,7 @@ const OEEStatistics = (res, ids) => {
                     show: true,
                     position: "top",
                     textStyle: {
-                        color: "#28ffb3",
+                        color: "rgb(165,122,75)",
                     },
                 },
                 itemStyle: {
@@ -2124,7 +2124,7 @@ const loss = (res, ids) => {
                     show: true,
                     position: "top",
                     textStyle: {
-                        color: "#02C3F1",
+                        color: barTopColor[0],
                     },
                 },
                 symbolPosition: "end",
@@ -2181,7 +2181,7 @@ const equipmentFailure = (res, ids) => {
         grid: {
             top: '1%',
             left: '6%',
-            right: '6%',
+            right: '15%',
             bottom: '3%',
             containLabel: true
         },
@@ -2256,26 +2256,33 @@ const equipmentFailure = (res, ids) => {
             },
         },
         series: [
-            {
-                name: "柱顶部",
-                type: "pictorialBar",
-                symbolSize: [6, 13],
-                symbolOffset: [3, 0],
-                z: 12,
-                itemStyle: {
-                    normal: {
-                        color: function (params) {
-                            return "#B78E45";
-                        },
-                    },
-                },
-                symbolPosition: "end",
-                data: values,
-            },
+            // {
+            //     name: "柱顶部",
+            //     type: "pictorialBar",
+            //     symbolSize: [6, 13],
+            //     symbolOffset: [3, 0],
+            //     z: 12,
+            //     itemStyle: {
+            //         normal: {
+            //             color: function (params) {
+            //                 return "#B78E45";
+            //             },
+            //         },
+            //     },
+            //     symbolPosition: "end",
+            //     data: values,
+            // },
             {
                 name: '2011',
                 type: 'bar',
                 data: values,
+                label: {
+                    show: true,
+                    position: "right",
+                    textStyle: {
+                        color: '#CCFF66',
+                    },
+                },
                 itemStyle: {
                     normal: {
                         color: function (params) {
@@ -2286,7 +2293,7 @@ const equipmentFailure = (res, ids) => {
                                 },
                                 {
                                     offset: 0,
-                                    color: "#B78E45",
+                                    color: "#CCFF66",
                                 },
                             ]);
                         },
diff --git a/productionboard/target/classes/static/js/common/synthetic.js b/productionboard/target/classes/static/js/common/synthetic.js
index 74fed55..05b094d 100644
--- a/productionboard/target/classes/static/js/common/synthetic.js
+++ b/productionboard/target/classes/static/js/common/synthetic.js
@@ -2,12 +2,12 @@
 const dataInformationFunction = (statusArray) => {
     let info = `<table style="position: absolute;top: 8%;width: 100%;height:100%;">
             <tr style="width: 100%; height: 50%;">
-                <td style="border:0px solid red;text-align:center;width: 50%;"><i ${statusArray[0] == 1 ? 'style="color:green;"' : 'style="color: red;"'}  class="fa-regular ${statusArray[0] == 1 ? "fa-circle-check" : "fa-circle-xmark"}"></i>${statusArray[0] == 1 ? `<span style="color:green;margin-left: 10px">运行正常</span>` : `<span style="color:red;margin-left: 10px">运行异常</span>`}</td>
-                <td style="border:0px solid red;text-align:center;width: 50%;color: #E6ECBE;">${statusArray[1]}</td>
+                <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="border:0px solid red;text-align:center;width: 50%;color: white;">${statusArray[2]}kW·h</td>
-                <td style="border:0px solid red;text-align:center;width: 50%;color: red;">${statusArray[3]}</td>
+                <td style="font-size:150%;border:0px solid red;text-align:center;width: 50%;color: white;">${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);
@@ -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: 15%;height:10%;text-align:left;background: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: 15%;height:10%;text-align:left;background:color: #63F659;display:inline-block;-webkit-background-clip: text;">${statusArray[9] || 0}</span>
+        <span style="position: absolute;font-size:175%;top: 12%;left: 85%;width: 15%;height:10%;text-align:left;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: 15%;height:10%;text-align:left;color: #63F659;display:inline-block;-webkit-background-clip: text;">${statusArray[9] || 0}</span>
         `;
     $("#synthetic").append(info);
 }
diff --git a/productionboard/target/classes/static/js/tankShell/device.js b/productionboard/target/classes/static/js/tankShell/device.js
index 219e8fd..2e66106 100644
--- a/productionboard/target/classes/static/js/tankShell/device.js
+++ b/productionboard/target/classes/static/js/tankShell/device.js
@@ -5,29 +5,7 @@ $(() => {
         OEEStatistics(result, document.getElementById("OEEStatistics"));
     });
     setInterval(() => {
-        let result = [
-            {
-                "createTime": 1654729200000,
-                "yValue": "07",
-                "xValue": Math.random() * 3
-            },
-            {
-                "createTime": 1654732800000,
-                "yValue": "08",
-                "xValue": Math.random() * 3
-            },
-            {
-                "createTime": 1654736400000,
-                "yValue": "09",
-                "xValue": Math.random() * 3
-            },
-            {
-                "createTime": 1654740000000,
-                "yValue": "10",
-                "xValue": Math.random() * 3
-            }
-        ]
-        OEEStatistics(result, document.getElementById("OEEStatistics"));
+        // OEEStatistics(result, document.getElementById("OEEStatistics"));
     }, 1000);
 
     //设备故障排名
@@ -107,13 +85,13 @@ const dataInformationFunction = (statusArray) => {
     console.log(res);
     let info = `<table style="position: absolute;top: 8%;width: 100%;height:100%;">
             <tr style="width: 100%; height: 50%;">
-                <td style="border:0px solid red;text-align:center;width: 50%;"><i ${res.deviceStatus == 1 ? 'style="color:rgb(107, 253, 110);"' : 'style="color: rgb(255, 105, 106);"'}  class="fa-regular ${res.deviceStatus == 1 ? "fa-circle-check" : "fa-circle-xmark"}"></i>${res.deviceStatus == 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="border:0px solid red;text-align:center;width: 50%;"><i ${res.deviceStatus == 1 ? 'style="color:rgb(107, 253, 110);"' : 'style="color: rgb(255, 105, 106);"'}  class="fa-regular ${res.deviceStatus == 1 ? "fa-circle-check" : "fa-circle-xmark"}"></i>${res.deviceStatus == 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="border:0px solid red;text-align:center;width: 50%;color: #FFEF76;"> ${res.devicePower}kW</td>
             </tr>
             <tr style="width: 100%; height: 50%;">
             
                 <td style="border:0px solid red;text-align:center;width: 50%;color: #CEEFFE;"> ${res.deviceEnergy}kW·h</td>
-                <td style="border:0px solid red;text-align:center;width: 50%;color: #red;">2</td>
+                <td style="border:0px solid red;text-align:center;width: 50%;color: red;">2</td>
             </tr>
         </table>`;