From a5b82e2fd0242f28098bbbbecfd89dd3a8d6c9b0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A4=9C=E7=AC=99=E6=AD=8C?= <2277317060@qq.com>
Date: Mon, 21 Nov 2022 16:55:11 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=8F=91=E6=B3=A1=E7=BA=BF?=
 =?UTF-8?q?=E7=94=9F=E4=BA=A7=E7=BB=9F=E8=AE=A1=E6=95=B0=E6=8D=AE=E8=A1=A8?=
 =?UTF-8?q?=E6=A0=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../templates/scada/NorthFoamerMesPlan.html   | 245 ++++++++----------
 1 file changed, 111 insertions(+), 134 deletions(-)
diff --git a/ruoyi-admin/src/main/resources/templates/scada/NorthFoamerMesPlan.html b/ruoyi-admin/src/main/resources/templates/scada/NorthFoamerMesPlan.html
index b3acfc6..e4c4384 100644
--- a/ruoyi-admin/src/main/resources/templates/scada/NorthFoamerMesPlan.html
+++ b/ruoyi-admin/src/main/resources/templates/scada/NorthFoamerMesPlan.html
@@ -2,26 +2,27 @@
 <html lang="zh" xmlns:th="http://www.thymeleaf.org">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport"
-          content="width=device-width,initial-scale=1.0">
+    <meta content="width=device-width,initial-scale=1.0"
+          name="viewport">
     <title>发泡SCADA数据平台</title>
-    <meta name="description" content="U壳钣金SCADA数据平台">
-    <link href="../../static/css/main-style.css" th:href="@{/css/main-style.css}" rel="stylesheet"/>
-<!--    <link href="../../static/css/materialdesignicons.min.css" th:href="@{/css/materialdesignicons.min.css}" rel="stylesheet"/>-->
+    <meta content="U壳钣金SCADA数据平台" name="description">
+    <link href="../../static/css/main-style.css" rel="stylesheet" th:href="@{/css/main-style.css}"/>
+    <!--    <link href="../../static/css/materialdesignicons.min.css" th:href="@{/css/materialdesignicons.min.css}" rel="stylesheet"/>-->
     <!-- 360浏览器急速模式 -->
-    <meta name="renderer" content="webkit">
+    <meta content="webkit" name="renderer">
     <!-- 避免IE使用兼容模式 -->
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <link rel="stylesheet" href="../../static/css/autoscroll-table.css" th:href="@{/css/autoscroll-table.css}">
+    <meta content="IE=edge" http-equiv="X-UA-Compatible">
+    <link href="../../static/css/autoscroll-table.css" rel="stylesheet" th:href="@{/css/autoscroll-table.css}">
 
 </head>
 <style>
-    .top-mid-Text-status{
+    .top-mid-Text-status {
         position: absolute;
-        top:14%;
-        width:0;
-        height:0;
+        top: 14%;
+        width: 0;
+        height: 0;
     }
+
     #top-left {
         border: 0px solid red;
         position: absolute;
@@ -61,10 +62,10 @@
         left: 30%;
     }
 
-    .top-mid-Text{
+    .top-mid-Text {
         height: 26.5%;
-        width:5%;
-        border:0px solid black;
+        width: 5%;
+        border: 0px solid black;
         font-size: 16%;
         display: flex;
         align-items: center;
@@ -101,7 +102,6 @@
     }
 
 
-
     #bottom-mid {
         position: absolute;
         width: 43.3%;
@@ -111,7 +111,6 @@
     }
 
 
-
     #oee {
         position: absolute;
         top: 14%;
@@ -249,64 +248,64 @@
 
 
 <div class="my-transition">
-    <div id="bottom-left" ></div>
+    <div id="bottom-left"></div>
 </div>
 
 <div class="my-transition2">
-    <div id="bottom-left-2" ></div>
+    <div id="bottom-left-2"></div>
 </div>
 
 <!--中间数据-->
 <div id="top-mid">
     <!--当时计划-->
     <div class="top-mid-Text" style="position: absolute;top:2%;color: #6fd4ff;">
-        <span >-</span>
+        <span>-</span>
     </div>
 
     <div class="top-mid-Text" style="position: absolute;top:2%;left:7.7%;color: #6fd4ff;">
-        <span >-</span>
+        <span>-</span>
     </div>
 
     <div class="top-mid-Text" style="position: absolute;top:2%;left:14.9%;color: #6fd4ff;">
-        <span >-</span>
+        <span>-</span>
     </div>
 
     <div class="top-mid-Text" style="position: absolute;top:2%;left:22.3%;color: #6fd4ff;">
-        <span >-</span>
+        <span>-</span>
     </div>
 
     <!--当前计划-->
     <div class="top-mid-Text" style="position: absolute;top:2%;left:36.5%; color: #6fff85;">
-        <span >-</span>
+        <span>-</span>
     </div>
 
     <div class="top-mid-Text" style="position: absolute;top:2%;left:43.8%; color: #6fff85;">
-        <span >-</span>
+        <span>-</span>
     </div>
 
     <div class="top-mid-Text" style="position: absolute;top:2%;left:51.1%; color: #6fff85;">
-        <span >-</span>
+        <span>-</span>
     </div>
 
     <div class="top-mid-Text" style="position: absolute;top:2%;left:58.4%; color: #6fff85;">
-        <span >-</span>
+        <span>-</span>
     </div>
 
     <!--实际产量-->
     <div class="top-mid-Text" style="position: absolute;top:2%;left:72.3%; color: #ffff6d;">
-        <span >-</span>
+        <span>-</span>
     </div>
 
     <div class="top-mid-Text" style="position: absolute;top:2%;left:79.9%; color: #ffff6d;">
-        <span >-</span>
+        <span>-</span>
     </div>
 
     <div class="top-mid-Text" style="position: absolute;top:2%;left:87.3%; color: #ffff6d;">
-        <span >-</span>
+        <span>-</span>
     </div>
 
     <div class="top-mid-Text" style="position: absolute;top:2%;left:94.6%; color: #ffff6d;">
-        <span >-</span>
+        <span>-</span>
     </div>
 
     <!--当日计划-->
@@ -315,27 +314,27 @@
 
 <!--运行状态-->
 <div class="top-mid-Text-status" style="transform: translate(-50%,-50%);left: 33%;">
-    <img alt="运行状态" id="status-a" src="../../static/img/runImg.png" th:src="@{/img/runImg.png}" style="width:2vw"/>
+    <img alt="运行状态" id="status-a" src="../../static/img/runImg.png" style="width:2vw" th:src="@{/img/runImg.png}"/>
 </div>
 <div class="top-mid-Text-status" style="transform: translate(-50%,-50%);left:39%">
-    <img alt="运行状态" id="status-b" src="../../static/img/runImg.png" th:src="@{/img/runImg.png}" style="width:2vw"/>
+    <img alt="运行状态" id="status-b" src="../../static/img/runImg.png" style="width:2vw" th:src="@{/img/runImg.png}"/>
 </div>
 
 <div class="top-mid-Text-status" style="transform: translate(-50%,-50%);left:44.5%">
-    <img alt="运行状态" id="status-c" src="../../static/img/runImg.png" th:src="@{/img/runImg.png}" style="width:2vw"/>
+    <img alt="运行状态" id="status-c" src="../../static/img/runImg.png" style="width:2vw" th:src="@{/img/runImg.png}"/>
 </div>
 
 <div class="top-mid-Text-status" style="transform: translate(-50%,-50%);left:50.5%">
-    <img alt="运行状态" id="status-d" src="../../static/img/runImg.png" th:src="@{/img/runImg.png}" style="width:2vw"/>
+    <img alt="运行状态" id="status-d" src="../../static/img/runImg.png" style="width:2vw" th:src="@{/img/runImg.png}"/>
 </div>
 
 <!--运行状态-->
 <div class="top-mid-Text-status" style="transform: translate(-50%,-50%);left:59.5%">
-    <img alt="运行状态" id="status-sys1" src="../../static/img/runImg.png" th:src="@{/img/runImg.png}" style="width:2vw"/>
+    <img alt="运行状态" id="status-sys1" src="../../static/img/runImg.png" style="width:2vw" th:src="@{/img/runImg.png}"/>
     <!--<img alt="运行状态" src="../../static/img/stopImg.png" th:src="@{/img/stopImg.png}"/>-->
 </div>
 <div class="top-mid-Text-status" style="transform: translate(-50%,-50%);left:67%">
-    <img alt="运行状态" id="status-sys2" src="../../static/img/runImg.png" th:src="@{/img/runImg.png}" style="width:2vw"/>
+    <img alt="运行状态" id="status-sys2" src="../../static/img/runImg.png" style="width:2vw" th:src="@{/img/runImg.png}"/>
     <!--<img alt="运行状态" src="../../static/img/stopImg.png" th:src="@{/img/stopImg.png}"/>-->
 </div>
 
@@ -358,8 +357,8 @@
 
 <script src="../../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
 <script src="../../static/js/update-split-blocks.js" th:src="@{/js/update-split-blocks.js}"></script>
-<th:block th:include="include :: footer" />
-<th:block th:include="include :: echarts-js" />
+<th:block th:include="include :: footer"/>
+<th:block th:include="include :: echarts-js"/>
 <script src="../../static/js/date-time-common.js" th:src="@{/js/date-time-common.js}"></script>
 <script src="../../static/js/autoscroll-table.js" th:src="@{/js/autoscroll-table.js}"></script>
 
@@ -368,9 +367,9 @@
     //夹具生产计划切换
     showalert();
 
-    window.setInterval(showalert, 1000*30);
-    function showalert()
-    {
+    window.setInterval(showalert, 1000 * 30);
+
+    function showalert() {
         var myTransition = $('.my-transition');
         var myTransition2 = $('.my-transition2');
         if (myTransition.hasClass('my-click-transiton')) {
@@ -383,7 +382,6 @@
     }
 
 
-
     const orderInfColumns = [
         "型号",
         "计划数",
@@ -408,11 +406,11 @@
     }
 
     const planInfo = new AutoScrollTable(document.getElementById("bottom-left"), [], {
-        width: ["5%", null, "7%", "5%", "5%", "5%", "8%", "4.2%", "4.2%", "4.2%", "4.2%", "4.2%", "4.2%", "4.2%", "4.2%", "4.2%", "4.2%", "4.2%", "4.2%"],
+        width: [null, "7%", "5%", "5%", "8%", "5%", "4.2%", "4.2%", "4.2%", "4.2%", "4.2%", "4.2%", "4.2%", "4.2%", "4.2%", "4.2%", "4.2%", "4.2%"],
     })
 
     const planInfo2 = new AutoScrollTable(document.getElementById("bottom-left-2"), [], {
-        width: ["5%", null, "7%", "5%", "5%", "5%", "8%", "4.2%", "4.2%", "4.2%", "4.2%", "4.2%", "4.2%", "4.2%", "4.2%", "4.2%", "4.2%", "4.2%", "4.2%"],
+        width: [null, "7%", "5%", "5%", "8%", "5%", "4.2%", "4.2%", "4.2%", "4.2%", "4.2%", "4.2%", "4.2%", "4.2%", "4.2%", "4.2%", "4.2%", "4.2%"],
     })
 
     function updateStatus(id, status) {
@@ -430,14 +428,14 @@
     $(() => {
         autoUpdate('/system/FoamerMes/getOrderInfo2', INTERVAL, data => {
             // orderInf.loadData(data, Object.keys(orderInfColumns))
-            orderInf.loadData(data.map(value => [getSC(value.orderType), value.plannedProduction, value.actualProduction, value.plannedProduction - value.actualProduction, `${orderAgv(value.plannedProduction,value.actualProduction)}%`]), Object.keys(orderInfColumns))
+            orderInf.loadData(data.map(value => [getSC(value.orderType), value.plannedProduction, value.actualProduction, value.plannedProduction - value.actualProduction, `${orderAgv(value.plannedProduction, value.actualProduction)}%`]), Object.keys(orderInfColumns))
         })
 
-        const orderAgv = function (plannedProduction,actualProduction) {
-            if(plannedProduction == 0){
+        const orderAgv = function (plannedProduction, actualProduction) {
+            if (plannedProduction == 0) {
                 return 0;
             }
-            if(actualProduction == 0){
+            if (actualProduction == 0) {
                 return 0;
             }
 
@@ -453,71 +451,50 @@
             }
         })
 
+        let filter = (arr, key, value, key2) => {
+            return arr.filter(e => e[key] === value)?.[0]?.[key2]
+        }
+        let totle = (arr, i) => {
+            return arr.map((e, index) => {
+                if (index !== 0) {
+                    return e[i]
+                } else {
+                    return 0
+                }
+            }).reduce((a, b) => a + b)
+        }
         autoUpdate('/system/FoamerMes/getPlanHourInfo', INTERVAL, data => {
-            // orderInf.loadData(data, Object.keys(orderInfColumns))
-            let consolidatedRow = ["", "合计", ""]
-
-            for (let i = 3; i < 19; i++) {
-                if (i === 6) {
-                    consolidatedRow.push(`${(consolidatedRow[5] / consolidatedRow[4] * 100).toFixed(1)}%`)
-                    continue
+            let name = []
+            let dataA = []
+            let dataB = []
+            dataA.push(['型号', '状态', '目标', '计划', '累计', '达成率', '8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00'])
+            dataB.push(['型号', '状态', '目标', '计划', '累计', '达成率', '8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00'])
+            data.forEach(e => {
+                if (!name.includes(e.orderType)) {
+                    name.push(e.orderType)
                 }
-
-                let sum = 0
-
-                for (let j = 1; j < data.length; j++) {
-                    let d = data[j][i]
-                    if (!d || d === '') {
-                        continue
-                    }
-                    if (typeof d === 'string') {
-                        d = parseInt(d)
-                    }
-
-                    sum += d
+            })
+            name.forEach((val, index) => {
+                if (index < 6) {
+                    let arr = data.filter(e => e.orderType === val)
+                    let plannedProduction = arr.map(e => e.plannedProduction).reduce((a, b) => a + b) || 0
+                    let actualProduction = arr.map(e => e.actualProduction).reduce((a, b) => a + b) || 0
+                    dataA.push([val.split(',')[0], '正常', arr[0].target, plannedProduction, actualProduction, plannedProduction === 0 ? '0%' : ((actualProduction / plannedProduction) * 100).toString().substr(0, 5) + '%', filter(arr, 'recordTime', 8, 'actualProduction') || 0, filter(arr, 'recordTime', 9, 'actualProduction') || 0, filter(arr, 'recordTime', 10, 'actualProduction') || 0, filter(arr, 'recordTime', 11, 'actualProduction') || 0, filter(arr, 'recordTime', 12, 'actualProduction') || 0, filter(arr, 'recordTime', 13, 'actualProduction') || 0, filter(arr, 'recordTime', 14, 'actualProduction') || 0, filter(arr, 'recordTime', 15, 'actualProduction') || 0, filter(arr, 'recordTime', 16, 'actualProduction') || 0, filter(arr, 'recordTime', 17, 'actualProduction') || 0, filter(arr, 'recordTime', 18, 'actualProduction') || 0, filter(arr, 'recordTime', 19, 'actualProduction') || 0])
+                }else{
+                    let arr = data.filter(e => e.orderType === val)
+                    let plannedProduction = arr.map(e => e.plannedProduction).reduce((a, b) => a + b) || 0
+                    let actualProduction = arr.map(e => e.actualProduction).reduce((a, b) => a + b) || 0
+                    dataB.push([val.split(',')[0], '正常', arr[0].target, plannedProduction, actualProduction, plannedProduction === 0 ? '0%' : ((actualProduction / plannedProduction) * 100).toString().substr(0, 5) + '%', filter(arr, 'recordTime', 8, 'actualProduction') || 0, filter(arr, 'recordTime', 9, 'actualProduction') || 0, filter(arr, 'recordTime', 10, 'actualProduction') || 0, filter(arr, 'recordTime', 11, 'actualProduction') || 0, filter(arr, 'recordTime', 12, 'actualProduction') || 0, filter(arr, 'recordTime', 13, 'actualProduction') || 0, filter(arr, 'recordTime', 14, 'actualProduction') || 0, filter(arr, 'recordTime', 15, 'actualProduction') || 0, filter(arr, 'recordTime', 16, 'actualProduction') || 0, filter(arr, 'recordTime', 17, 'actualProduction') || 0, filter(arr, 'recordTime', 18, 'actualProduction') || 0, filter(arr, 'recordTime', 19, 'actualProduction') || 0])
                 }
+            })
+            dataA.push(['合计', '', totle(dataA, 2), totle(dataA, 3), totle(dataA, 4), totle(dataB, 3) === 0 ? '0%' : ((totle(dataA, 4) / totle(dataA, 3)) * 100).toString().substr(0, 5) + '%', totle(dataA, 6), totle(dataA, 7), totle(dataA, 8), totle(dataA, 9), totle(dataA, 10), totle(dataA, 11), totle(dataA, 12), totle(dataA, 13), totle(dataA, 14), totle(dataA, 15), totle(dataA, 16), totle(dataA, 17)])
+            dataB.push(['合计', '', totle(dataB, 2), totle(dataB, 3), totle(dataB, 4), totle(dataB, 3) === 0 ? '0%' : ((totle(dataB, 4) / totle(dataB, 3)) * 100).toString().substr(0, 5) + '%', totle(dataB, 6), totle(dataB, 7), totle(dataB, 8), totle(dataB, 9), totle(dataB, 10), totle(dataB, 11), totle(dataB, 12), totle(dataB, 13), totle(dataB, 14), totle(dataB, 15), totle(dataB, 16), totle(dataB, 17)])
 
-                consolidatedRow.push(sum.toString())
-            }
-
-            data.push(consolidatedRow)
 
-            planInfo.loadData(data, 19, {
+            planInfo.loadData(dataA, 18, {
                 includeHead: true,
             })
-            //data.map(value => [value.orderType, value.plannedProduction, value.actualProduction, value.plannedProduction - value.actualProduction, `${(value.actualProduction / value.plannedProduction * 100).toFixed(2)}%`]
-        })
-
-        autoUpdate('/system/FoamerMes/getPlanHourInfo2', INTERVAL, data => {
-            // orderInf.loadData(data, Object.keys(orderInfColumns))
-            let consolidatedRow = ["", "合计", ""]
-
-            for (let i = 3; i < 19; i++) {
-                if (i === 6) {
-                    consolidatedRow.push(`${(consolidatedRow[5] / consolidatedRow[4] * 100).toFixed(1)}%`)
-                    continue
-                }
-
-                let sum = 0
-
-                for (let j = 1; j < data.length; j++) {
-                    let d = data[j][i]
-                    if (!d || d === '') {
-                        continue
-                    }
-                    if (typeof d === 'string') {
-                        d = parseInt(d)
-                    }
-
-                    sum += d
-                }
-
-                consolidatedRow.push(sum.toString())
-            }
-
-            data.push(consolidatedRow)
-
-            planInfo2.loadData(data, 19, {
+            planInfo2.loadData(dataB, 18, {
                 includeHead: true,
             })
         })
@@ -565,7 +542,7 @@
             updateStatus("status-d", data.status4)
         })
 
-        autoUpdate('/system/FoamerMes/getFoamDeviceInfo?deviceId='+"HF202009858", INTERVAL, data => {
+        autoUpdate('/system/FoamerMes/getFoamDeviceInfo?deviceId=' + "HF202009858", INTERVAL, data => {
             updateStatus("status-sys1", data.status)
             updateStatus("status-sys2", data.status2)
         })
@@ -573,7 +550,7 @@
         autoUpdate('/system/FoamerMes/getFoamTemp', INTERVAL, res => {
 
 
-            myEcharts(res,document.getElementById("top-right"));
+            myEcharts(res, document.getElementById("top-right"));
         })
 
         autoUpdate("/system/FoamerMes/flawRate", INTERVAL, data => {
@@ -586,8 +563,8 @@
                     {
                         name: '不良率',
                         data: [
-                            {value: flaw, name: rate.toFixed(2)+'%'},
-                            {value: total-flaw, name: ''},
+                            {value: flaw, name: rate.toFixed(2) + '%'},
+                            {value: total - flaw, name: ''},
                         ],
                     }
                 ]
@@ -617,8 +594,8 @@
                     {
                         name: '数量',
                         data: data,
-                        label:{
-                            normal:{
+                        label: {
+                            normal: {
                                 show: true,
                                 position: 'top',
                                 color: '#02FEA9'
@@ -637,7 +614,7 @@
             type: 'category',
             axisLabel: {
                 color: '#ffffff',
-                fontSize:'10',
+                fontSize: '10',
                 rotate: -30,
             },
         },
@@ -649,12 +626,12 @@
             splitLine: {
                 show: false,
             },
-            interval:90,
+            interval: 90,
         },
-        series : [
+        series: [
             {
-                name:'数量',
-                type:'bar',
+                name: '数量',
+                type: 'bar',
                 barWidth: 16,
                 itemStyle: {
                     normal: {
@@ -676,8 +653,8 @@
                         )
                     }
                 },
-                label:{
-                    normal:{
+                label: {
+                    normal: {
                         show: true,
                         position: 'top',
                         color: '#0F8EEF'
@@ -705,7 +682,7 @@
         xAxis: {
             type: 'category',
             axisLabel: {
-                fontSize:'10px',
+                fontSize: '10px',
                 color: '#ffffff'
             }
         },
@@ -717,12 +694,12 @@
             splitLine: {
                 show: false,
             },
-            interval:15,
+            interval: 15,
         },
-        series : [
+        series: [
             {
-                name:'数量',
-                type:'bar',
+                name: '数量',
+                type: 'bar',
                 barWidth: 16,
                 itemStyle: {
                     normal: {
@@ -744,8 +721,8 @@
                         )
                     }
                 },
-                label:{
-                    normal:{
+                label: {
+                    normal: {
                         show: true,
                         position: 'top',
                         color: '#02FEA9'
@@ -871,7 +848,7 @@
 </script>
 
 <script type="text/javascript">
-    const myEcharts = (res,ids) =>{
+    const myEcharts = (res, ids) => {
         let charts = echarts.init(ids);
 
         let option = {
@@ -915,7 +892,7 @@
                     splitLine: {
                         show: false,
                     },
-                    axisLabel:{
+                    axisLabel: {
                         show: true,
                     },
                     axisTick: {
@@ -927,9 +904,9 @@
             yAxis: [
                 {
                     type: "value",
-                    name:"℃",
-                    nameTextStyle:{
-                        color:'rgba(219,225,255,1)'
+                    name: "℃",
+                    nameTextStyle: {
+                        color: 'rgba(219,225,255,1)'
                     },
                     axisLabel: {
                         textStyle: {
@@ -949,12 +926,12 @@
                         },
                     },
                     splitLine: {//分割线配置
-                        show:false,
+                        show: false,
                         lineStyle: {
                             color: "rgba(219,225,255,1)",
                         }
                     },
-                    interval:20,
+                    interval: 20,
                 },
             ],
             series: res.series,
