diff --git a/productionboard/src/main/resources/static/css/aluminumLiner/style.css b/productionboard/src/main/resources/static/css/aluminumLiner/style.css index 0cf9a12..1373038 100644 --- a/productionboard/src/main/resources/static/css/aluminumLiner/style.css +++ b/productionboard/src/main/resources/static/css/aluminumLiner/style.css @@ -15,6 +15,10 @@ body { height: 22%; top: 14%; left: 3.3%; + font-size: 16px !important; +} +.synthetic{ + font-size: 16px !important; } .OEEStatistics { diff --git a/productionboard/src/main/resources/static/css/tankShell/device.css b/productionboard/src/main/resources/static/css/tankShell/device.css index 0c17a6e..d77bd08 100644 --- a/productionboard/src/main/resources/static/css/tankShell/device.css +++ b/productionboard/src/main/resources/static/css/tankShell/device.css @@ -14,6 +14,7 @@ body { height: 22%; top: 14%; left: 3.3%; + font-size: 16px !important; } .energyProductionStatistics { @@ -23,6 +24,7 @@ body { height: 6%; top: 9%; left: 29%; + font-size: 16px !important; } .runParamStatistics { @@ -32,6 +34,7 @@ body { height: 7.5%; top: 25%; left: 29%; + font-size: 16px !important; } .runParamStatistics div { @@ -44,6 +47,7 @@ body { display: flex; justify-content: center; align-items: center; + font-size: 16px !important; } .lossParam{ @@ -57,6 +61,7 @@ body { justify-content: center; align-items: center; color: #8FB7D1; + font-size: 16px !important; } .meterParam{ @@ -70,49 +75,53 @@ body { justify-content: center; align-items: center; color:#A5E3B1; + font-size: 16px !important; } -.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%; + top: 73.5%; + left: 3.5%; + font-size: 9%; } -.faultRank { - border: 1px solid bisque; + +.energyConsumption { position: absolute; - width: 24%; - height: 21%; - bottom: 5%; - right: 3.3%; + 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 39b81be..82f1402 100644 --- a/productionboard/src/main/resources/static/js/common/echarts.common.js +++ b/productionboard/src/main/resources/static/js/common/echarts.common.js @@ -2303,6 +2303,152 @@ 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 + }, + 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, 12.2, 3.3, 14.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 6fc6661..da0de5f 100644 --- a/productionboard/src/main/resources/static/js/tankShell/device.js +++ b/productionboard/src/main/resources/static/js/tankShell/device.js @@ -1,4 +1,58 @@ $(() => { + + //设备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")); + }); + + //设备产量能耗对比 + $.getJSON('/tankShell/getInventoryStatistics', function (result) { + energyConsumption(result, document.getElementById("energyConsumption")); + }); + + //生产计划 + $.ajax({ + url: '/storage/getProductionPlan', + type: 'GET', + dataType: 'JSON', + success: function (res) { + let Res = res + Res.data.forEach(val => { + val[0] = 'SHEBEI452736' + val[1] = 'AGYM45HH23' + val[2] = '32' + val[3] = '2021.01.01 10:00:00' + delete val[4] + }); + 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%', '40%', '160%', ] + }); + }, + error: function (e) { + console.log(e) + } + }); + /*数据信息*/ const statusArray = [0, 0, 0, 0, 0]; dataInformationFunction(statusArray); diff --git a/productionboard/src/main/resources/templates/aluminumLiner/index.html b/productionboard/src/main/resources/templates/aluminumLiner/index.html index dd1ab54..966400f 100644 --- a/productionboard/src/main/resources/templates/aluminumLiner/index.html +++ b/productionboard/src/main/resources/templates/aluminumLiner/index.html @@ -10,6 +10,7 @@ +
diff --git a/productionboard/src/main/resources/templates/tankShell/device.html b/productionboard/src/main/resources/templates/tankShell/device.html index 8c15b52..6fc66e1 100644 --- a/productionboard/src/main/resources/templates/tankShell/device.html +++ b/productionboard/src/main/resources/templates/tankShell/device.html @@ -8,6 +8,8 @@ + + @@ -23,16 +25,23 @@ - - - - - - - - - - + + + + + + + + + + + + + + + + +