箱壳自动成型线 - 综合看板

productionboard/src/main/resources/static/css/tankShell/device.css

@@ -107,4 +107,15 @@ body {
     top: 73.5%;
     left: 3.5%;
     font-size: 9%;
+}
+
+
+.energyConsumption {
+    position: absolute;
+    border: 0px solid red;
+    width: 26%;
+    height: 20%;
+    top: 46%;
+    left: 2%;
+    font-size: 9%;
 }

productionboard/src/main/resources/static/js/common/echarts.common.js

@@ -2306,6 +2306,161 @@ const equipmentFailure = (res, ids) => {
         ]
     };
 
+    mycharts.setOption(option);
+    $(window).resize(mycharts.resize);
+}
+
+// 设备产量能耗对比
+
+const energyConsumption = (res, ids) => {
+    let mycharts = echarts.init(ids);
+
+
+    let stationData = [];
+    let values = [];
+
+    res.datas.forEach(function (it, index) {
+        stationData.push(it.station);
+        values.push(it.value);
+    });
+    let option = {
+        grid: {
+            top: '25%',
+            left: '6%',
+            right: '6%',
+            bottom: '3%',
+            containLabel: true
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            crossStyle: {
+              color: '#999'
+            }
+          }
+        },
+        xAxis: [
+          {
+            interval: 0,
+            type: 'category',
+            data: ['6-13', '6-14', '6-15', '6-16', '6-17'],
+            axisPointer: {
+              type: 'shadow'
+            }
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value',
+            name: '产量(t)',
+            min: 0,
+            max: 40,
+            interval: 10,
+            axisLabel: {
+              formatter: '{value} ml'
+            },
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: "rgb(217,217,217,0.5)",
+                    type: "dashed" //虚线
+                    // width: 2
+                }
+            },
+            axisLine: {
+                show: true,
+            },
+          },
+          {
+            type: 'value',
+            name: '能耗(kw·h)',
+            min: 0,
+            max: 20,
+            interval: 5,
+            axisLabel: {
+              formatter: '{value} °C'
+            },
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: "rgb(217,217,217,0.5)",
+                    type: "dashed" //虚线
+                    // width: 2
+                }
+            },
+            axisLine: {
+                show: true,
+            },
+          }
+        ],
+        series: [
+          {
+            name: 'Evaporation',
+            type: 'bar',
+            itemStyle: {
+                normal: {
+                    color: function (params) {
+                        return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                            {
+                                offset: 1,
+                                color:  "rgba(10,50,220)",
+                            },
+                            {
+                                offset: 0,
+                                color: "rgba(40,140,210)",
+                            },
+                        ]);
+                    },
+                },
+            },
+            tooltip: {
+              valueFormatter: function (value) {
+                return value + ' ml';
+              }
+            },
+            barWidth: 20,
+            data: [
+              2.0, 4.9, 7.0, 23.2, 25.6
+            ]
+          },
+          {
+            name: 'Temperature',
+            type: 'line',
+            yAxisIndex: 1,
+            tooltip: {
+              valueFormatter: function (value) {
+                return value + ' °C';
+              }
+            },
+            data: [2.0, 2.2, 3.3, 4.5, 6.3]
+          },
+          {
+              name: "柱顶部",
+              type: "pictorialBar",
+              symbolSize: [20, 6],
+              symbolOffset: [0, -3],
+              z: 12,
+              itemStyle: {
+                  normal: {
+                      color: function (params) {
+                          return 'rgb(217,217,217)';
+                      },
+                  },
+              },
+              label: {
+                  show: true,
+                  position: "top",
+                  textStyle: {
+                      color: "#02C3F1",
+                  },
+              },
+              symbolPosition: "end",
+              data: [2.0, 4.9, 7.0, 23.2, 25.6],
+          },
+        ]
+      };
+
     mycharts.setOption(option);
     $(window).resize(mycharts.resize);
 }

productionboard/src/main/resources/static/js/tankShell/device.js

@@ -12,6 +12,11 @@ $(() => {
     $.getJSON('/tankShell/getInventoryStatistics', function (result) {
         loss(result, document.getElementById("loss"));
     });
+
+    //设备产量能耗对比
+    $.getJSON('/tankShell/getInventoryStatistics', function (result) {
+        energyConsumption(result, document.getElementById("energyConsumption"));
+    });
     
     //生产计划
     $.ajax({
@@ -47,7 +52,7 @@ $(() => {
             console.log(e)
         }
     });
-    
+
     /*数据信息*/
     const statusArray = [0, 0, 0, 0, 0];
     dataInformationFunction(statusArray);

productionboard/src/main/resources/templates/tankShell/device.html

@@ -37,6 +37,9 @@
     
     <!--生产计划-->
     <div class="productionPlan" id="productionPlan"></div>
+    
+    <!--设备产量能耗对比-->
+    <div class="energyConsumption" id="energyConsumption"></div>
 
 </body>
 <script src="../../../js/tankShell/device.js"></script>

productionboard/target/classes/static/css/tankShell/device.css

@@ -107,4 +107,15 @@ body {
     top: 73.5%;
     left: 3.5%;
     font-size: 9%;
+}
+
+
+.energyConsumption {
+    position: absolute;
+    border: 0px solid red;
+    width: 26%;
+    height: 20%;
+    top: 46%;
+    left: 2%;
+    font-size: 9%;
 }

productionboard/target/classes/static/js/common/echarts.common.js

@@ -2306,6 +2306,161 @@ const equipmentFailure = (res, ids) => {
         ]
     };
 
+    mycharts.setOption(option);
+    $(window).resize(mycharts.resize);
+}
+
+// 设备产量能耗对比
+
+const energyConsumption = (res, ids) => {
+    let mycharts = echarts.init(ids);
+
+
+    let stationData = [];
+    let values = [];
+
+    res.datas.forEach(function (it, index) {
+        stationData.push(it.station);
+        values.push(it.value);
+    });
+    let option = {
+        grid: {
+            top: '25%',
+            left: '6%',
+            right: '6%',
+            bottom: '3%',
+            containLabel: true
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            crossStyle: {
+              color: '#999'
+            }
+          }
+        },
+        xAxis: [
+          {
+            interval: 0,
+            type: 'category',
+            data: ['6-13', '6-14', '6-15', '6-16', '6-17'],
+            axisPointer: {
+              type: 'shadow'
+            }
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value',
+            name: '产量(t)',
+            min: 0,
+            max: 40,
+            interval: 10,
+            axisLabel: {
+              formatter: '{value} ml'
+            },
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: "rgb(217,217,217,0.5)",
+                    type: "dashed" //虚线
+                    // width: 2
+                }
+            },
+            axisLine: {
+                show: true,
+            },
+          },
+          {
+            type: 'value',
+            name: '能耗(kw·h)',
+            min: 0,
+            max: 20,
+            interval: 5,
+            axisLabel: {
+              formatter: '{value} °C'
+            },
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: "rgb(217,217,217,0.5)",
+                    type: "dashed" //虚线
+                    // width: 2
+                }
+            },
+            axisLine: {
+                show: true,
+            },
+          }
+        ],
+        series: [
+          {
+            name: 'Evaporation',
+            type: 'bar',
+            itemStyle: {
+                normal: {
+                    color: function (params) {
+                        return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                            {
+                                offset: 1,
+                                color:  "rgba(10,50,220)",
+                            },
+                            {
+                                offset: 0,
+                                color: "rgba(40,140,210)",
+                            },
+                        ]);
+                    },
+                },
+            },
+            tooltip: {
+              valueFormatter: function (value) {
+                return value + ' ml';
+              }
+            },
+            barWidth: 20,
+            data: [
+              2.0, 4.9, 7.0, 23.2, 25.6
+            ]
+          },
+          {
+            name: 'Temperature',
+            type: 'line',
+            yAxisIndex: 1,
+            tooltip: {
+              valueFormatter: function (value) {
+                return value + ' °C';
+              }
+            },
+            data: [2.0, 2.2, 3.3, 4.5, 6.3]
+          },
+          {
+              name: "柱顶部",
+              type: "pictorialBar",
+              symbolSize: [20, 6],
+              symbolOffset: [0, -3],
+              z: 12,
+              itemStyle: {
+                  normal: {
+                      color: function (params) {
+                          return 'rgb(217,217,217)';
+                      },
+                  },
+              },
+              label: {
+                  show: true,
+                  position: "top",
+                  textStyle: {
+                      color: "#02C3F1",
+                  },
+              },
+              symbolPosition: "end",
+              data: [2.0, 4.9, 7.0, 23.2, 25.6],
+          },
+        ]
+      };
+
     mycharts.setOption(option);
     $(window).resize(mycharts.resize);
 }

productionboard/target/classes/static/js/tankShell/device.js

@@ -12,6 +12,11 @@ $(() => {
     $.getJSON('/tankShell/getInventoryStatistics', function (result) {
         loss(result, document.getElementById("loss"));
     });
+
+    //设备产量能耗对比
+    $.getJSON('/tankShell/getInventoryStatistics', function (result) {
+        energyConsumption(result, document.getElementById("energyConsumption"));
+    });
     
     //生产计划
     $.ajax({
@@ -47,7 +52,7 @@ $(() => {
             console.log(e)
         }
     });
-    
+
     /*数据信息*/
     const statusArray = [0, 0, 0, 0, 0];
     dataInformationFunction(statusArray);

productionboard/target/classes/templates/tankShell/device.html

@@ -37,6 +37,9 @@
     
     <!--生产计划-->
     <div class="productionPlan" id="productionPlan"></div>
+    
+    <!--设备产量能耗对比-->
+    <div class="energyConsumption" id="energyConsumption"></div>
 
 </body>
 <script src="../../../js/tankShell/device.js"></script>