diff --git a/productionboard/src/main/resources/static/css/tankShell/device.css b/productionboard/src/main/resources/static/css/tankShell/device.css index 9b0dfa3..b5c097d 100644 --- a/productionboard/src/main/resources/static/css/tankShell/device.css +++ b/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%; } \ No newline at end of file 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 e4c39cb..7755e46 100644 --- a/productionboard/src/main/resources/static/js/common/echarts.common.js +++ b/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); } \ No newline at end of file diff --git a/productionboard/src/main/resources/static/js/tankShell/device.js b/productionboard/src/main/resources/static/js/tankShell/device.js index 6791c6c..7e5b917 100644 --- a/productionboard/src/main/resources/static/js/tankShell/device.js +++ b/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); diff --git a/productionboard/src/main/resources/templates/tankShell/device.html b/productionboard/src/main/resources/templates/tankShell/device.html index 5713887..543c51a 100644 --- a/productionboard/src/main/resources/templates/tankShell/device.html +++ b/productionboard/src/main/resources/templates/tankShell/device.html @@ -37,6 +37,9 @@
+ + +
diff --git a/productionboard/target/classes/static/css/tankShell/device.css b/productionboard/target/classes/static/css/tankShell/device.css index 9b0dfa3..b5c097d 100644 --- a/productionboard/target/classes/static/css/tankShell/device.css +++ b/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%; } \ No newline at end of file diff --git a/productionboard/target/classes/static/js/common/echarts.common.js b/productionboard/target/classes/static/js/common/echarts.common.js index e4c39cb..7755e46 100644 --- a/productionboard/target/classes/static/js/common/echarts.common.js +++ b/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); } \ No newline at end of file diff --git a/productionboard/target/classes/static/js/tankShell/device.js b/productionboard/target/classes/static/js/tankShell/device.js index 6791c6c..7e5b917 100644 --- a/productionboard/target/classes/static/js/tankShell/device.js +++ b/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); diff --git a/productionboard/target/classes/templates/tankShell/device.html b/productionboard/target/classes/templates/tankShell/device.html index 5713887..543c51a 100644 --- a/productionboard/target/classes/templates/tankShell/device.html +++ b/productionboard/target/classes/templates/tankShell/device.html @@ -37,6 +37,9 @@
+ + +