1

3 years ago · f115f49c29
parent 5cbf5e2707
commit f115f49c29
6 changed files with 174 additions and 82 deletions
--- a/productionboard/src/main/resources/static/css/tankShell/device.css
+++ b/productionboard/src/main/resources/static/css/tankShell/device.css
@ -72,47 +72,39 @@ body {
    color:#A5E3B1;
 }

-.theEnergyConsumptionContrast {
-    border: 1px solid red;
+.OEEStatistics {
+    border: 0px solid red;
    position: absolute;
-    width: 24.1%;
-    height: 21%;
-    top: 44%;
-    left: 3.3%;
+    width: 35%;
+    height: 26%;
+    top: 71.5%;
+    left: 36%;
 }

-.lossStatistics {
-    border: 1px solid yellowgreen;
+.equipmentFailure {
+    border: 0px solid red;
    position: absolute;
-    width: 24%;
-    height: 21%;
-    top: 44%;
-    right: 3.3%;
+    width: 28%;
+    height: 22%;
+    top: 75%;
+    left: 70%;
 }

-.deviceInfoTable {
-    border: 1px solid #6ACBFE;
+.loss {
+    border: 0px solid red;
    position: absolute;
-    width: 33%;
-    height: 21%;
-    bottom: 5%;
-    left: 3.3%;
+    width: 28%;
+    height: 25%;
+    top: 41%;
+    left: 71%;
 }

-.oeeStatistics {
-    border: 1px solid cornflowerblue;
+.productionPlan {
    position: absolute;
+    border: 0px solid red;
    width: 33%;
    height: 21%;
-    bottom: 5%;
-    left: 38%;
-}
-
-.faultRank {
-    border: 1px solid bisque;
-    position: absolute;
-    width: 24%;
-    height: 21%;
-    bottom: 5%;
-    right: 3.3%;
+    top: 73.5%;
+    left: 3.5%;
+    font-size: 9%;
 }
--- a/productionboard/src/main/resources/static/js/tankShell/device.js
+++ b/productionboard/src/main/resources/static/js/tankShell/device.js
@ -1,4 +1,53 @@
 $(() => {
+    
+    //设备OEE统计
+    OEEStatistics(null, document.getElementById("OEEStatistics"));
+
+    //设备故障排名
+    $.getJSON('/tankShell/getStatisticalOutputByModel', function (result) {
+        equipmentFailure(result, document.getElementById("equipmentFailure"));
+    });
+
+    //loss
+    $.getJSON('/tankShell/getInventoryStatistics', function (result) {
+        loss(result, document.getElementById("loss"));
+    });
+    
+    //生产计划
+    $.ajax({
+        url: '/storage/getProductionPlan',
+        type: 'GET',
+        dataType: 'JSON',
+        success: function (res) {
+            let Res = res
+            Res.data.forEach(val => {
+                val[0] = 'sc-228NE'
+                val[1] = '431'
+                val[2] = '0'
+                val[3] = '431'
+                val[4] = '0%'
+            });
+            Res.header = ['型号', '计划数', '完成数', '差异数', '执行进度']
+            dynamicTable({
+                el: '#productionPlan',
+                rowNum: 5,
+                timeout: 0,
+                header: Res.header,
+                data: Res.data,
+                index: false,
+                fontColor: '#B4B7BF ',
+                indexBGC: '#86F3FF',
+                headerBGC: 'rgba(8,36,75,0.2)',
+                oddRowBGC: 'rgba(8,36,75,0.2)',
+                evenRowBGC: 'rgba(6,25,57,0.2)',
+                colWidth: ['100%', '100%', '100%', '100%', '100%']
+            });
+        },
+        error: function (e) {
+            console.log(e)
+        }
+    });
+    
    /*数据信息*/
    const statusArray = [0, 0, 0, 0, 0];
    dataInformationFunction(statusArray);
--- a/productionboard/src/main/resources/templates/tankShell/device.html
+++ b/productionboard/src/main/resources/templates/tankShell/device.html
@ -8,6 +8,7 @@
    <script src="../../../js/common/echarts.min.js"></script>
    <script src="../../../js/common/update-split-blocks.js"></script>
    <script src="../../../js/common/echarts.common.js"></script>
+    <script src="../../../js/common/scrollTable.js"></script>
 </head>
 <body>
    <!--数据信息-->
@ -23,16 +24,20 @@
    <!--节拍参数-->
    <div class="meterParam" id="meterParam"></div>

-    <!--设备能耗产量对比-->
-    <div class="theEnergyConsumptionContrast" id="theEnergyConsumptionContrast"></div>
-    <!--loss统计-->
-    <div class="lossStatistics" id="lossStatistics"></div>
-    <!--设备信息列表-->
-    <div class="deviceInfoTable" id="deviceInfoTable"></div>
-    <!--oee统计-->
-    <div class="oeeStatistics" id="oeeStatistics"></div>
-    <!--故障率统计-->
-    <div class="faultRank" id="faultRank"></div>
+
+    
+    <!--设备OEE统计-->
+    <div class="OEEStatistics" id="OEEStatistics"></div>
+    
+    <!--设备故障排名-->
+    <div class="equipmentFailure" id="equipmentFailure"></div>
+    
+    <!--loss-->
+    <div class="loss" id="loss"></div>
+    
+    <!--生产计划-->
+    <div class="productionPlan" id="productionPlan"></div>
+
 </body>
 <script src="../../../js/tankShell/device.js"></script>
 </html>
--- a/productionboard/target/classes/static/css/tankShell/device.css
+++ b/productionboard/target/classes/static/css/tankShell/device.css
@ -72,47 +72,39 @@ body {
    color:#A5E3B1;
 }

-.theEnergyConsumptionContrast {
-    border: 1px solid red;
+.OEEStatistics {
+    border: 0px solid red;
    position: absolute;
-    width: 24.1%;
-    height: 21%;
-    top: 44%;
-    left: 3.3%;
+    width: 35%;
+    height: 26%;
+    top: 71.5%;
+    left: 36%;
 }

-.lossStatistics {
-    border: 1px solid yellowgreen;
+.equipmentFailure {
+    border: 0px solid red;
    position: absolute;
-    width: 24%;
-    height: 21%;
-    top: 44%;
-    right: 3.3%;
+    width: 28%;
+    height: 22%;
+    top: 75%;
+    left: 70%;
 }

-.deviceInfoTable {
-    border: 1px solid #6ACBFE;
+.loss {
+    border: 0px solid red;
    position: absolute;
-    width: 33%;
-    height: 21%;
-    bottom: 5%;
-    left: 3.3%;
+    width: 28%;
+    height: 25%;
+    top: 41%;
+    left: 71%;
 }

-.oeeStatistics {
-    border: 1px solid cornflowerblue;
+.productionPlan {
    position: absolute;
+    border: 0px solid red;
    width: 33%;
    height: 21%;
-    bottom: 5%;
-    left: 38%;
-}
-
-.faultRank {
-    border: 1px solid bisque;
-    position: absolute;
-    width: 24%;
-    height: 21%;
-    bottom: 5%;
-    right: 3.3%;
+    top: 73.5%;
+    left: 3.5%;
+    font-size: 9%;
 }
--- a/productionboard/target/classes/static/js/tankShell/device.js
+++ b/productionboard/target/classes/static/js/tankShell/device.js
@ -1,4 +1,53 @@
 $(() => {
+    
+    //设备OEE统计
+    OEEStatistics(null, document.getElementById("OEEStatistics"));
+
+    //设备故障排名
+    $.getJSON('/tankShell/getStatisticalOutputByModel', function (result) {
+        equipmentFailure(result, document.getElementById("equipmentFailure"));
+    });
+
+    //loss
+    $.getJSON('/tankShell/getInventoryStatistics', function (result) {
+        loss(result, document.getElementById("loss"));
+    });
+    
+    //生产计划
+    $.ajax({
+        url: '/storage/getProductionPlan',
+        type: 'GET',
+        dataType: 'JSON',
+        success: function (res) {
+            let Res = res
+            Res.data.forEach(val => {
+                val[0] = 'sc-228NE'
+                val[1] = '431'
+                val[2] = '0'
+                val[3] = '431'
+                val[4] = '0%'
+            });
+            Res.header = ['型号', '计划数', '完成数', '差异数', '执行进度']
+            dynamicTable({
+                el: '#productionPlan',
+                rowNum: 5,
+                timeout: 0,
+                header: Res.header,
+                data: Res.data,
+                index: false,
+                fontColor: '#B4B7BF ',
+                indexBGC: '#86F3FF',
+                headerBGC: 'rgba(8,36,75,0.2)',
+                oddRowBGC: 'rgba(8,36,75,0.2)',
+                evenRowBGC: 'rgba(6,25,57,0.2)',
+                colWidth: ['100%', '100%', '100%', '100%', '100%']
+            });
+        },
+        error: function (e) {
+            console.log(e)
+        }
+    });
+    
    /*数据信息*/
    const statusArray = [0, 0, 0, 0, 0];
    dataInformationFunction(statusArray);
--- a/productionboard/target/classes/templates/tankShell/device.html
+++ b/productionboard/target/classes/templates/tankShell/device.html
@ -8,6 +8,7 @@
    <script src="../../../js/common/echarts.min.js"></script>
    <script src="../../../js/common/update-split-blocks.js"></script>
    <script src="../../../js/common/echarts.common.js"></script>
+    <script src="../../../js/common/scrollTable.js"></script>
 </head>
 <body>
    <!--数据信息-->
@ -23,16 +24,20 @@
    <!--节拍参数-->
    <div class="meterParam" id="meterParam"></div>

-    <!--设备能耗产量对比-->
-    <div class="theEnergyConsumptionContrast" id="theEnergyConsumptionContrast"></div>
-    <!--loss统计-->
-    <div class="lossStatistics" id="lossStatistics"></div>
-    <!--设备信息列表-->
-    <div class="deviceInfoTable" id="deviceInfoTable"></div>
-    <!--oee统计-->
-    <div class="oeeStatistics" id="oeeStatistics"></div>
-    <!--故障率统计-->
-    <div class="faultRank" id="faultRank"></div>
+
+    
+    <!--设备OEE统计-->
+    <div class="OEEStatistics" id="OEEStatistics"></div>
+    
+    <!--设备故障排名-->
+    <div class="equipmentFailure" id="equipmentFailure"></div>
+    
+    <!--loss-->
+    <div class="loss" id="loss"></div>
+    
+    <!--生产计划-->
+    <div class="productionPlan" id="productionPlan"></div>
+
 </body>
 <script src="../../../js/tankShell/device.js"></script>
 </html>