diff --git a/productionboard/src/main/java/com/productionboard/controller/FoamBoxController.java b/productionboard/src/main/java/com/productionboard/controller/FoamBoxController.java new file mode 100644 index 0000000..2505158 --- /dev/null +++ b/productionboard/src/main/java/com/productionboard/controller/FoamBoxController.java @@ -0,0 +1,78 @@ +package com.productionboard.controller; + +import org.springframework.stereotype.Controller; +import org.springframework.web.bind.annotation.GetMapping; +import org.springframework.web.bind.annotation.RequestMapping; +import org.springframework.web.bind.annotation.ResponseBody; + +/** + * 箱体发泡 + * @author WenJY + * @date 2022年04月20日 11:03 + */ +@Controller +@RequestMapping("/foamBox") +public class FoamBoxController { + + private String prefix = "foamBox/index"; + + @GetMapping() + public String index() + { + return prefix; + } + + /** + * 根据型号统计产量 + * + * @author WenJY + * @date 2022/4/20 10:15 + * @return java.lang.String + */ + @GetMapping("/getStatisticalOutputByModel") + @ResponseBody + public String getStatisticalOutputByModel() { + String info = + "{\n" + + "\t\"datas\":[\n" + + " {\"ranking\": 1,\"station\":\"SC227\",\"value\": 199999},\n" + + " {\"ranking\": 2,\"station\":\"SC228\",\"value\": 104970},\n" + + " {\"ranking\": 3,\"station\":\"SC229\",\"value\": 29034},\n" + + " {\"ranking\": 4,\"station\":\"SC223\",\"value\": 23489},\n" + + " {\"ranking\": 5,\"station\":\"SC224\",\"value\": 18203}\n" + + " ],\n" + + "\t\"plan\":[290000, 290000, 290000, 290000, 290000, 290000]\n" + + "}"; + return info; + } + + /** + * 库存 统计 + * + * @author WenJY + * @date 2022/4/20 10:16 + * @return java.lang.String + */ + @GetMapping("/getInventoryStatistics") + @ResponseBody + public String getInventoryStatistics() { + String info = + "{\n" + + "\t\"datas\":[\n" + + " {\n" + + " \"name\": \"SC528\",\n" + + " \"value\": 175.17\n" + + " },\n" + + " {\n" + + " \"name\": \"SC529\",\n" + + " \"value\": 148.35\n" + + " },\n" + + " {\n" + + " \"name\": \"SC327\",\n" + + " \"value\": 95.36\n" + + " }\n" + + " ]\n" + + "}"; + return info; + } +} diff --git a/productionboard/src/main/java/com/productionboard/controller/PreassembleController.java b/productionboard/src/main/java/com/productionboard/controller/PreassembleController.java index f2d09a7..f3cb63d 100644 --- a/productionboard/src/main/java/com/productionboard/controller/PreassembleController.java +++ b/productionboard/src/main/java/com/productionboard/controller/PreassembleController.java @@ -73,7 +73,6 @@ public class PreassembleController { + " }\n" + " ]\n" + "}"; - System.out.println("库存统计："+info); return info; } } diff --git a/productionboard/src/main/resources/static/css/adsorptionTank/style.css b/productionboard/src/main/resources/static/css/adsorptionTank/style.css index e878b1a..aca4413 100644 --- a/productionboard/src/main/resources/static/css/adsorptionTank/style.css +++ b/productionboard/src/main/resources/static/css/adsorptionTank/style.css @@ -8,7 +8,7 @@ body { } .statisticalOutputByModel{ - border: 1px solid red; + border: 0px solid red;; position: absolute; width: 45.5%; height: 32%; @@ -17,7 +17,7 @@ body { } .inventoryStatistics{ - border: 1px solid red; + border: 0px solid red;; position: absolute; width: 45.5%; height: 32%; @@ -26,7 +26,7 @@ body { } .hourlyOutputStatistics{ - border: 1px solid red; + border: 0px solid red;; position: absolute; width: 93%; height: 32%; diff --git a/productionboard/src/main/resources/static/css/foamBox/style.css b/productionboard/src/main/resources/static/css/foamBox/style.css new file mode 100644 index 0000000..63b4cc1 --- /dev/null +++ b/productionboard/src/main/resources/static/css/foamBox/style.css @@ -0,0 +1,69 @@ +/*发泡看板CSS样式*/ +body { + background-color: aquamarine; + background: url(../../img/foamBox/foamBoxbackground.jpg); + background-position: center center; + background-repeat: no-repeat; + background-attachment: fixed; + background-size: 100% 100%; +} + +.theCurrentTeam{ + display: none; +} + +.onDutyPlan { + border: 0px solid red; + width: 10.9%; + position: absolute; + top: 14.8%; + letter-spacing: -1px; +} + +.scheduledProduction { + left: 30%; +} + +.actualOutPut { + left: 44.5%; +} + +.differenceValue { + left: 59%; +} + +.inventoryStatistics{ + border: 1px solid red; + position: absolute; + width: 23.5%; + height: 23.3%; + top: 14.5%; + left: 3.5%; +} + +.statisticalOutputByModel{ + border: 1px solid red; + position: absolute; + width: 23.5%; + height: 49%; + top: 46%; + left: 3.5%; +} + +.hourlyOutputStatistics{ + border: 1px solid red; + position: absolute; + width: 68%; + height: 20%; + bottom: 5%; + right: 3.5%; +} + +.foamingParameters{ + border: 1px solid red; + position: absolute; + width: 23.5%; + height: 23.3%; + top: 14.5%; + right: 3.5%; +} \ No newline at end of file diff --git a/productionboard/src/main/resources/static/css/preassemble/style.css b/productionboard/src/main/resources/static/css/preassemble/style.css index 5089710..0865699 100644 --- a/productionboard/src/main/resources/static/css/preassemble/style.css +++ b/productionboard/src/main/resources/static/css/preassemble/style.css @@ -8,7 +8,7 @@ body { } .statisticalOutputByModel{ - border: 1px solid red; + border: 0px solid red; position: absolute; width: 45.5%; height: 32%; @@ -17,7 +17,7 @@ body { } .inventoryStatistics{ - border: 1px solid red; + border: 0px solid red; position: absolute; width: 45.5%; height: 32%; @@ -26,7 +26,7 @@ body { } .hourlyOutputStatistics{ - border: 1px solid red; + border: 0px solid red; position: absolute; width: 93%; height: 32%; diff --git a/productionboard/src/main/resources/static/img/foamBox/foamBoxbackground.jpg b/productionboard/src/main/resources/static/img/foamBox/foamBoxbackground.jpg new file mode 100644 index 0000000..c9a33f6 Binary files /dev/null and b/productionboard/src/main/resources/static/img/foamBox/foamBoxbackground.jpg differ 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 0446fe7..755ba60 100644 --- a/productionboard/src/main/resources/static/js/common/echarts.common.js +++ b/productionboard/src/main/resources/static/js/common/echarts.common.js @@ -215,7 +215,7 @@ const brokenLineAreaDiagram = (res, ids) => { let option = { tooltip: {}, grid: { - top: "8%", + top: "15%", left: "1%", right: "1%", bottom: "8%", @@ -351,11 +351,10 @@ const brokenLineAreaDiagram = (res, ids) => { $(window).resize(mycharts.resize); } -//柱状图 +//立体柱状图 const threeDimensionalCylindrical = (res, ids) => { let mycharts = echarts.init(ids); - let xAxisData = []; let seriesData1 = []; let sum = 0; @@ -372,8 +371,8 @@ const threeDimensionalCylindrical = (res, ids) => { let option = { grid: { - top: "15%", - bottom: "20%", + top: "25%", + bottom: "25%", }, xAxis: { data: xAxisData, @@ -436,7 +435,9 @@ const threeDimensionalCylindrical = (res, ids) => { label: { show: true, position: "top", - fontSize: 16, + textStyle: { + color: "#02C3F1", + }, }, symbolPosition: "end", data: seriesData1, @@ -580,3 +581,628 @@ const threeDimensionalCylindrical = (res, ids) => { $(window).resize(mycharts.resize); } +//多个折线面积图 +const multipleBrokenLineAreaDiagram = (res,ids) =>{ + let mycharts = echarts.init(ids); + + let option = { + tooltip: { + trigger: "axis", + axisPointer: { + lineStyle: { + color: "#57617B", + }, + }, + }, + legend: { + icon: "rect", + itemWidth: 14, + itemHeight: 5, + itemGap: 13, + data: ["1#ISO温度", "1#POL温度", "2#ISO温度", "2#POL温度"], + left: "4%", + textStyle: { + fontSize: 12, + color: "#F1F1F3", + }, + }, + grid: { + left: "3%", + right: "4%", + bottom: "3%", + containLabel: true, + }, + xAxis: [ + { + type: "category", + boundaryGap: false, + axisLine: { + lineStyle: { + color: "#57617B", + }, + }, + data: [ + "11:00", + "11:10", + "11:20", + "11:30", + "11:40", + "11:50", + "12:00", + "12:10", + "12:20", + "12:30", + "12:40", + "12:50", + ], + }, + ], + yAxis: [ + { + type: "value", + axisTick: { + show: false, + }, + axisLine: { + lineStyle: { + color: "#57617B", + }, + }, + axisLabel: { + margin: 10, + textStyle: { + fontSize: 14, + }, + }, + splitLine: { + show: false, + lineStyle: { + color: "#57617B", + }, + }, + }, + ], + series: [ + { + name: "1#ISO温度", + type: "line", + smooth: false, + lineStyle: { + normal: { + width: 1, + }, + }, + areaStyle: { + normal: { + color: new echarts.graphic.LinearGradient( + 0, + 0, + 0, + 1, + [ + { + offset: 0, + color: "rgba(137, 189, 27, 0.3)", + }, + { + offset: 0.8, + color: "rgba(137, 189, 27, 0)", + }, + ], + false + ), + shadowColor: "rgba(0, 0, 0, 0.1)", + shadowBlur: 10, + }, + }, + itemStyle: { + normal: { + color: "rgb(137,189,27)", + }, + }, + data: [ + 96.3, 96.4, 97.5, 95.6, 98.1, 94.8, 89.6, 94.1, 80.1, 52.4, 75.8, 94.7, + ], + }, + { + name: "1#POL温度", + type: "line", + smooth: false, + lineStyle: { + normal: { + width: 1, + }, + }, + areaStyle: { + normal: { + color: new echarts.graphic.LinearGradient( + 0, + 0, + 0, + 1, + [ + { + offset: 0, + color: "rgba(0, 136, 212, 0.3)", + }, + { + offset: 0.8, + color: "rgba(0, 136, 212, 0)", + }, + ], + false + ), + shadowColor: "rgba(0, 0, 0, 0.1)", + shadowBlur: 10, + }, + }, + itemStyle: { + normal: { + color: "rgb(0,136,212)", + }, + }, + data: [ + 97.3, 99.2, 99.3, 100.0, 99.6, 90.6, 80.0, 91.5, 69.8, 67.5, 90.4, 84.9, + ], + }, + { + name: "2#ISO温度", + type: "line", + smooth: false, + lineStyle: { + normal: { + width: 1, + }, + }, + areaStyle: { + normal: { + color: new echarts.graphic.LinearGradient( + 0, + 0, + 0, + 1, + [ + { + offset: 0, + color: "rgba(219, 50, 51, 0.3)", + }, + { + offset: 0.8, + color: "rgba(219, 50, 51, 0)", + }, + ], + false + ), + shadowColor: "rgba(0, 0, 0, 0.1)", + shadowBlur: 10, + }, + }, + itemStyle: { + normal: { + color: "rgb(219,50,51)", + }, + }, + data: [ + 84.2, 81.0, 67.5, 72.1, 43.7, 88.5, 91.9, 101.8, 79.7, 87.6, 92.9, 0, + ], + }, + { + name: "2#POL温度", + type: "line", + smooth: false, + lineStyle: { + normal: { + width: 1, + }, + }, + areaStyle: { + normal: { + color: new echarts.graphic.LinearGradient( + 0, + 0, + 0, + 1, + [ + { + offset: 0, + color: "rgba(31,97,244, 0.3)", + }, + { + offset: 0.8, + color: "rgba(31,97,244, 0)", + }, + ], + false + ), + shadowColor: "rgba(31,97,244, 0.1)", + shadowBlur: 10, + }, + }, + itemStyle: { + normal: { + color: "rgb(31,97,244)", + }, + }, + data: [ + 95.3, 26.4, 57.5, 75.6, 78.1, 94.8, 89.6, 94.1, 80.1, 52.4, 75.8, 94.7, + ], + }, + ], + }; + + + mycharts.setOption(option); + $(window).resize(mycharts.resize); +} + +//多边形柱状图 +const polygonalHistogram = (res, ids) =>{ + let mycharts = echarts.init(ids); + + let option = { + color: [ + "#68E683", + "#58E28A", + "#042A4F", + "#042A4F", + "#042A4F", + "#6c93ee", + "#a9abff", + "#f7a23f", + "#27bae7", + "#ff6d9d", + "#cb79ff", + "#f95b5a", + "#ccaf27", + "#38b99c", + "#93d0ff", + "#bd74e0", + "#fd77da", + "#dea700", + ], + grid: { + containLabel: true, + left: 20, + right: 20, + bottom: 10, + top: 20, + }, + xAxis: { + axisLabel: { + color: "#c0c3cd", + fontSize: 14, + interval: 0, + }, + axisTick: { + lineStyle: { + color: "#384267", + }, + show: true, + }, + splitLine: { + show: false, + }, + axisLine: { + lineStyle: { + color: "#384267", + width: 1, + type: "dashed", + }, + show: true, + }, + data: [ + "7点", + "8点", + "9点", + "10点", + "11点", + "12点", + "13点", + "14点", + ], + type: "category", + }, + yAxis: { + show: false, + axisLabel: { + color: "#c0c3cd", + fontSize: 14, + }, + axisTick: { + lineStyle: { + color: "#384267", + width: 1, + }, + show: false, + }, + splitLine: { + show: false, + lineStyle: { + color: "#384267", + type: "dashed", + }, + }, + axisLine: { + lineStyle: { + color: "#384267", + width: 1, + type: "dashed", + }, + show: false, + }, + name: "", + }, + series: [ + { + data: [200, 85, 112, 275, 305, 415, 741, 405], + type: "bar", + barMaxWidth: "auto", + barWidth: 30, + itemStyle: { + color: { + x: 0, + y: 0, + x2: 0, + y2: 1, + type: "linear", + global: false, + colorStops: [ + { + offset: 0, + color: "#1FB55E", + }, + { + offset: 1, + color: "#68E683", + }, + ], + }, + }, + label: { + show: true, + position: "top", + distance: 10, + color: "#fff", + }, + }, + { + data: [1, 1, 1, 1, 1, 1, 1, 1], + type: "pictorialBar", + barMaxWidth: "20", + symbol: "diamond", + symbolOffset: [0, "50%"], + symbolSize: [30, 15], + }, + { + data: [200, 85, 112, 275, 305, 415, 741, 405], + type: "pictorialBar", + barMaxWidth: "20", + symbolPosition: "end", + symbol: "diamond", + symbolOffset: [0, "-50%"], + symbolSize: [30, 12], + zlevel: 2, + }, + { + data: [741, 741, 741, 741, 741, 741, 741, 741], + type: "bar", + barMaxWidth: "auto", + barWidth: 30, + barGap: "-100%", + zlevel: -1, + }, + { + data: [1, 1, 1, 1, 1, 1, 1, 1], + type: "pictorialBar", + barMaxWidth: "20", + symbol: "diamond", + symbolOffset: [0, "50%"], + symbolSize: [30, 15], + zlevel: -2, + }, + { + data: [741, 741, 741, 741, 741, 741, 741, 741], + type: "pictorialBar", + barMaxWidth: "20", + symbolPosition: "end", + symbol: "diamond", + symbolOffset: [0, "-50%"], + symbolSize: [30, 12], + zlevel: -1, + }, + ], + tooltip: { + trigger: "axis", + show: false, + }, + }; + + mycharts.setOption(option); + $(window).resize(mycharts.resize); +} + +//多边形柱状图-2 +const polygonalHistogram2 = (res, ids) =>{ + let mycharts = echarts.init(ids); + + let option = { + color: [ + "#63caff", + "#49beff", + "#03387a", + "#03387a", + "#03387a", + "#6c93ee", + "#a9abff", + "#f7a23f", + "#27bae7", + "#ff6d9d", + "#cb79ff", + "#f95b5a", + "#ccaf27", + "#38b99c", + "#93d0ff", + "#bd74e0", + "#fd77da", + "#dea700", + ], + grid: { + containLabel: true, + left: 20, + right: 20, + bottom: 10, + top: 40, + }, + xAxis: { + axisLabel: { + color: "#c0c3cd", + fontSize: 14, + interval: 0, + }, + axisTick: { + lineStyle: { + color: "#384267", + }, + show: true, + }, + splitLine: { + show: false, + }, + axisLine: { + lineStyle: { + color: "#384267", + width: 1, + type: "dashed", + }, + show: true, + }, + data: [ + "0点~2点", + "3点~5点", + "6点~8点", + "0点~2点", + "3点~5点", + "6点~8点", + "0点~2点", + "3点~5点", + ], + type: "category", + }, + yAxis: { + axisLabel: { + color: "#c0c3cd", + fontSize: 14, + }, + axisTick: { + lineStyle: { + color: "#384267", + width: 1, + }, + show: true, + }, + splitLine: { + show: true, + lineStyle: { + color: "#384267", + type: "dashed", + }, + }, + axisLine: { + lineStyle: { + color: "#384267", + width: 1, + type: "dashed", + }, + show: true, + }, + name: "", + }, + series: [ + { + data: [200, 85, 112, 275, 305, 415, 741, 405], + type: "bar", + barMaxWidth: "auto", + barWidth: 30, + itemStyle: { + color: { + x: 0, + y: 0, + x2: 0, + y2: 1, + type: "linear", + global: false, + colorStops: [ + { + offset: 0, + color: "#0b9eff", + }, + { + offset: 1, + color: "#63caff", + }, + ], + }, + }, + label: { + show: true, + position: "top", + distance: 10, + color: "#fff", + }, + }, + { + data: [1, 1, 1, 1, 1, 1, 1, 1], + type: "pictorialBar", + barMaxWidth: "20", + symbol: "diamond", + symbolOffset: [0, "50%"], + symbolSize: [30, 15], + }, + { + data: [200, 85, 112, 275, 305, 415, 741, 405], + type: "pictorialBar", + barMaxWidth: "20", + symbolPosition: "end", + symbol: "diamond", + symbolOffset: [0, "-50%"], + symbolSize: [30, 12], + zlevel: 2, + }, + { + data: [741, 741, 741, 741, 741, 741, 741, 741], + type: "bar", + barMaxWidth: "auto", + barWidth: 30, + barGap: "-100%", + zlevel: -1, + }, + { + data: [1, 1, 1, 1, 1, 1, 1, 1], + type: "pictorialBar", + barMaxWidth: "20", + symbol: "diamond", + symbolOffset: [0, "50%"], + symbolSize: [30, 15], + zlevel: -2, + }, + { + data: [741, 741, 741, 741, 741, 741, 741, 741], + type: "pictorialBar", + barMaxWidth: "20", + symbolPosition: "end", + symbol: "diamond", + symbolOffset: [0, "-50%"], + symbolSize: [30, 12], + zlevel: -1, + }, + ], + tooltip: { + trigger: "axis", + show: false, + }, + }; + + + mycharts.setOption(option); + $(window).resize(mycharts.resize); +} \ No newline at end of file diff --git a/productionboard/src/main/resources/static/js/foamBox/index.js b/productionboard/src/main/resources/static/js/foamBox/index.js new file mode 100644 index 0000000..6de5e61 --- /dev/null +++ b/productionboard/src/main/resources/static/js/foamBox/index.js @@ -0,0 +1,20 @@ +$(()=>{ + //班组计划统计 + onDutyPlan(1234,1202,33); + + //库存统计 + $.getJSON('/foamBox/getInventoryStatistics', function (result) { + threeDimensionalCylindrical(result,document.getElementById("inventoryStatistics")); + }); + + //按型号统计产量 + $.getJSON('/foamBox/getStatisticalOutputByModel', function (result) { + horizontalBarChart(result,document.getElementById("statisticalOutputByModel")); + }); + + //小时产量 + brokenLineAreaDiagram(null,document.getElementById("hourlyOutputStatistics")); + + //发泡参数 + multipleBrokenLineAreaDiagram(null,document.getElementById("foamingParameters")); +}) \ No newline at end of file diff --git a/productionboard/src/main/resources/static/js/preassemble/index.js b/productionboard/src/main/resources/static/js/preassemble/index.js index 7063e03..42268b9 100644 --- a/productionboard/src/main/resources/static/js/preassemble/index.js +++ b/productionboard/src/main/resources/static/js/preassemble/index.js @@ -7,7 +7,7 @@ $(()=>{ }); //小时产量 - brokenLineAreaDiagram(null,document.getElementById("hourlyOutputStatistics")); + polygonalHistogram(null,document.getElementById("hourlyOutputStatistics")); //库存统计 $.getJSON('/tankShell/getInventoryStatistics', function (result) { diff --git a/productionboard/src/main/resources/templates/foamBox/index.html b/productionboard/src/main/resources/templates/foamBox/index.html new file mode 100644 index 0000000..3f84325 --- /dev/null +++ b/productionboard/src/main/resources/templates/foamBox/index.html @@ -0,0 +1,29 @@ + + + + + 发泡和发泡线数据展示平台 + + + + + + + + + + + +
+ + +
+ + +
+ + +
+ + + \ No newline at end of file diff --git a/productionboard/target/classes/com/productionboard/controller/PreassembleController.class b/productionboard/target/classes/com/productionboard/controller/PreassembleController.class index 4d65017..2b4b644 100644 Binary files a/productionboard/target/classes/com/productionboard/controller/PreassembleController.class and b/productionboard/target/classes/com/productionboard/controller/PreassembleController.class differ diff --git a/productionboard/target/classes/static/css/adsorptionTank/style.css b/productionboard/target/classes/static/css/adsorptionTank/style.css index e878b1a..aca4413 100644 --- a/productionboard/target/classes/static/css/adsorptionTank/style.css +++ b/productionboard/target/classes/static/css/adsorptionTank/style.css @@ -8,7 +8,7 @@ body { } .statisticalOutputByModel{ - border: 1px solid red; + border: 0px solid red;; position: absolute; width: 45.5%; height: 32%; @@ -17,7 +17,7 @@ body { } .inventoryStatistics{ - border: 1px solid red; + border: 0px solid red;; position: absolute; width: 45.5%; height: 32%; @@ -26,7 +26,7 @@ body { } .hourlyOutputStatistics{ - border: 1px solid red; + border: 0px solid red;; position: absolute; width: 93%; height: 32%; diff --git a/productionboard/target/classes/static/css/preassemble/style.css b/productionboard/target/classes/static/css/preassemble/style.css index 5089710..0865699 100644 --- a/productionboard/target/classes/static/css/preassemble/style.css +++ b/productionboard/target/classes/static/css/preassemble/style.css @@ -8,7 +8,7 @@ body { } .statisticalOutputByModel{ - border: 1px solid red; + border: 0px solid red; position: absolute; width: 45.5%; height: 32%; @@ -17,7 +17,7 @@ body { } .inventoryStatistics{ - border: 1px solid red; + border: 0px solid red; position: absolute; width: 45.5%; height: 32%; @@ -26,7 +26,7 @@ body { } .hourlyOutputStatistics{ - border: 1px solid red; + border: 0px solid red; position: absolute; width: 93%; height: 32%; diff --git a/productionboard/target/classes/static/js/common/echarts.common.js b/productionboard/target/classes/static/js/common/echarts.common.js index 0446fe7..755ba60 100644 --- a/productionboard/target/classes/static/js/common/echarts.common.js +++ b/productionboard/target/classes/static/js/common/echarts.common.js @@ -215,7 +215,7 @@ const brokenLineAreaDiagram = (res, ids) => { let option = { tooltip: {}, grid: { - top: "8%", + top: "15%", left: "1%", right: "1%", bottom: "8%", @@ -351,11 +351,10 @@ const brokenLineAreaDiagram = (res, ids) => { $(window).resize(mycharts.resize); } -//柱状图 +//立体柱状图 const threeDimensionalCylindrical = (res, ids) => { let mycharts = echarts.init(ids); - let xAxisData = []; let seriesData1 = []; let sum = 0; @@ -372,8 +371,8 @@ const threeDimensionalCylindrical = (res, ids) => { let option = { grid: { - top: "15%", - bottom: "20%", + top: "25%", + bottom: "25%", }, xAxis: { data: xAxisData, @@ -436,7 +435,9 @@ const threeDimensionalCylindrical = (res, ids) => { label: { show: true, position: "top", - fontSize: 16, + textStyle: { + color: "#02C3F1", + }, }, symbolPosition: "end", data: seriesData1, @@ -580,3 +581,628 @@ const threeDimensionalCylindrical = (res, ids) => { $(window).resize(mycharts.resize); } +//多个折线面积图 +const multipleBrokenLineAreaDiagram = (res,ids) =>{ + let mycharts = echarts.init(ids); + + let option = { + tooltip: { + trigger: "axis", + axisPointer: { + lineStyle: { + color: "#57617B", + }, + }, + }, + legend: { + icon: "rect", + itemWidth: 14, + itemHeight: 5, + itemGap: 13, + data: ["1#ISO温度", "1#POL温度", "2#ISO温度", "2#POL温度"], + left: "4%", + textStyle: { + fontSize: 12, + color: "#F1F1F3", + }, + }, + grid: { + left: "3%", + right: "4%", + bottom: "3%", + containLabel: true, + }, + xAxis: [ + { + type: "category", + boundaryGap: false, + axisLine: { + lineStyle: { + color: "#57617B", + }, + }, + data: [ + "11:00", + "11:10", + "11:20", + "11:30", + "11:40", + "11:50", + "12:00", + "12:10", + "12:20", + "12:30", + "12:40", + "12:50", + ], + }, + ], + yAxis: [ + { + type: "value", + axisTick: { + show: false, + }, + axisLine: { + lineStyle: { + color: "#57617B", + }, + }, + axisLabel: { + margin: 10, + textStyle: { + fontSize: 14, + }, + }, + splitLine: { + show: false, + lineStyle: { + color: "#57617B", + }, + }, + }, + ], + series: [ + { + name: "1#ISO温度", + type: "line", + smooth: false, + lineStyle: { + normal: { + width: 1, + }, + }, + areaStyle: { + normal: { + color: new echarts.graphic.LinearGradient( + 0, + 0, + 0, + 1, + [ + { + offset: 0, + color: "rgba(137, 189, 27, 0.3)", + }, + { + offset: 0.8, + color: "rgba(137, 189, 27, 0)", + }, + ], + false + ), + shadowColor: "rgba(0, 0, 0, 0.1)", + shadowBlur: 10, + }, + }, + itemStyle: { + normal: { + color: "rgb(137,189,27)", + }, + }, + data: [ + 96.3, 96.4, 97.5, 95.6, 98.1, 94.8, 89.6, 94.1, 80.1, 52.4, 75.8, 94.7, + ], + }, + { + name: "1#POL温度", + type: "line", + smooth: false, + lineStyle: { + normal: { + width: 1, + }, + }, + areaStyle: { + normal: { + color: new echarts.graphic.LinearGradient( + 0, + 0, + 0, + 1, + [ + { + offset: 0, + color: "rgba(0, 136, 212, 0.3)", + }, + { + offset: 0.8, + color: "rgba(0, 136, 212, 0)", + }, + ], + false + ), + shadowColor: "rgba(0, 0, 0, 0.1)", + shadowBlur: 10, + }, + }, + itemStyle: { + normal: { + color: "rgb(0,136,212)", + }, + }, + data: [ + 97.3, 99.2, 99.3, 100.0, 99.6, 90.6, 80.0, 91.5, 69.8, 67.5, 90.4, 84.9, + ], + }, + { + name: "2#ISO温度", + type: "line", + smooth: false, + lineStyle: { + normal: { + width: 1, + }, + }, + areaStyle: { + normal: { + color: new echarts.graphic.LinearGradient( + 0, + 0, + 0, + 1, + [ + { + offset: 0, + color: "rgba(219, 50, 51, 0.3)", + }, + { + offset: 0.8, + color: "rgba(219, 50, 51, 0)", + }, + ], + false + ), + shadowColor: "rgba(0, 0, 0, 0.1)", + shadowBlur: 10, + }, + }, + itemStyle: { + normal: { + color: "rgb(219,50,51)", + }, + }, + data: [ + 84.2, 81.0, 67.5, 72.1, 43.7, 88.5, 91.9, 101.8, 79.7, 87.6, 92.9, 0, + ], + }, + { + name: "2#POL温度", + type: "line", + smooth: false, + lineStyle: { + normal: { + width: 1, + }, + }, + areaStyle: { + normal: { + color: new echarts.graphic.LinearGradient( + 0, + 0, + 0, + 1, + [ + { + offset: 0, + color: "rgba(31,97,244, 0.3)", + }, + { + offset: 0.8, + color: "rgba(31,97,244, 0)", + }, + ], + false + ), + shadowColor: "rgba(31,97,244, 0.1)", + shadowBlur: 10, + }, + }, + itemStyle: { + normal: { + color: "rgb(31,97,244)", + }, + }, + data: [ + 95.3, 26.4, 57.5, 75.6, 78.1, 94.8, 89.6, 94.1, 80.1, 52.4, 75.8, 94.7, + ], + }, + ], + }; + + + mycharts.setOption(option); + $(window).resize(mycharts.resize); +} + +//多边形柱状图 +const polygonalHistogram = (res, ids) =>{ + let mycharts = echarts.init(ids); + + let option = { + color: [ + "#68E683", + "#58E28A", + "#042A4F", + "#042A4F", + "#042A4F", + "#6c93ee", + "#a9abff", + "#f7a23f", + "#27bae7", + "#ff6d9d", + "#cb79ff", + "#f95b5a", + "#ccaf27", + "#38b99c", + "#93d0ff", + "#bd74e0", + "#fd77da", + "#dea700", + ], + grid: { + containLabel: true, + left: 20, + right: 20, + bottom: 10, + top: 20, + }, + xAxis: { + axisLabel: { + color: "#c0c3cd", + fontSize: 14, + interval: 0, + }, + axisTick: { + lineStyle: { + color: "#384267", + }, + show: true, + }, + splitLine: { + show: false, + }, + axisLine: { + lineStyle: { + color: "#384267", + width: 1, + type: "dashed", + }, + show: true, + }, + data: [ + "7点", + "8点", + "9点", + "10点", + "11点", + "12点", + "13点", + "14点", + ], + type: "category", + }, + yAxis: { + show: false, + axisLabel: { + color: "#c0c3cd", + fontSize: 14, + }, + axisTick: { + lineStyle: { + color: "#384267", + width: 1, + }, + show: false, + }, + splitLine: { + show: false, + lineStyle: { + color: "#384267", + type: "dashed", + }, + }, + axisLine: { + lineStyle: { + color: "#384267", + width: 1, + type: "dashed", + }, + show: false, + }, + name: "", + }, + series: [ + { + data: [200, 85, 112, 275, 305, 415, 741, 405], + type: "bar", + barMaxWidth: "auto", + barWidth: 30, + itemStyle: { + color: { + x: 0, + y: 0, + x2: 0, + y2: 1, + type: "linear", + global: false, + colorStops: [ + { + offset: 0, + color: "#1FB55E", + }, + { + offset: 1, + color: "#68E683", + }, + ], + }, + }, + label: { + show: true, + position: "top", + distance: 10, + color: "#fff", + }, + }, + { + data: [1, 1, 1, 1, 1, 1, 1, 1], + type: "pictorialBar", + barMaxWidth: "20", + symbol: "diamond", + symbolOffset: [0, "50%"], + symbolSize: [30, 15], + }, + { + data: [200, 85, 112, 275, 305, 415, 741, 405], + type: "pictorialBar", + barMaxWidth: "20", + symbolPosition: "end", + symbol: "diamond", + symbolOffset: [0, "-50%"], + symbolSize: [30, 12], + zlevel: 2, + }, + { + data: [741, 741, 741, 741, 741, 741, 741, 741], + type: "bar", + barMaxWidth: "auto", + barWidth: 30, + barGap: "-100%", + zlevel: -1, + }, + { + data: [1, 1, 1, 1, 1, 1, 1, 1], + type: "pictorialBar", + barMaxWidth: "20", + symbol: "diamond", + symbolOffset: [0, "50%"], + symbolSize: [30, 15], + zlevel: -2, + }, + { + data: [741, 741, 741, 741, 741, 741, 741, 741], + type: "pictorialBar", + barMaxWidth: "20", + symbolPosition: "end", + symbol: "diamond", + symbolOffset: [0, "-50%"], + symbolSize: [30, 12], + zlevel: -1, + }, + ], + tooltip: { + trigger: "axis", + show: false, + }, + }; + + mycharts.setOption(option); + $(window).resize(mycharts.resize); +} + +//多边形柱状图-2 +const polygonalHistogram2 = (res, ids) =>{ + let mycharts = echarts.init(ids); + + let option = { + color: [ + "#63caff", + "#49beff", + "#03387a", + "#03387a", + "#03387a", + "#6c93ee", + "#a9abff", + "#f7a23f", + "#27bae7", + "#ff6d9d", + "#cb79ff", + "#f95b5a", + "#ccaf27", + "#38b99c", + "#93d0ff", + "#bd74e0", + "#fd77da", + "#dea700", + ], + grid: { + containLabel: true, + left: 20, + right: 20, + bottom: 10, + top: 40, + }, + xAxis: { + axisLabel: { + color: "#c0c3cd", + fontSize: 14, + interval: 0, + }, + axisTick: { + lineStyle: { + color: "#384267", + }, + show: true, + }, + splitLine: { + show: false, + }, + axisLine: { + lineStyle: { + color: "#384267", + width: 1, + type: "dashed", + }, + show: true, + }, + data: [ + "0点~2点", + "3点~5点", + "6点~8点", + "0点~2点", + "3点~5点", + "6点~8点", + "0点~2点", + "3点~5点", + ], + type: "category", + }, + yAxis: { + axisLabel: { + color: "#c0c3cd", + fontSize: 14, + }, + axisTick: { + lineStyle: { + color: "#384267", + width: 1, + }, + show: true, + }, + splitLine: { + show: true, + lineStyle: { + color: "#384267", + type: "dashed", + }, + }, + axisLine: { + lineStyle: { + color: "#384267", + width: 1, + type: "dashed", + }, + show: true, + }, + name: "", + }, + series: [ + { + data: [200, 85, 112, 275, 305, 415, 741, 405], + type: "bar", + barMaxWidth: "auto", + barWidth: 30, + itemStyle: { + color: { + x: 0, + y: 0, + x2: 0, + y2: 1, + type: "linear", + global: false, + colorStops: [ + { + offset: 0, + color: "#0b9eff", + }, + { + offset: 1, + color: "#63caff", + }, + ], + }, + }, + label: { + show: true, + position: "top", + distance: 10, + color: "#fff", + }, + }, + { + data: [1, 1, 1, 1, 1, 1, 1, 1], + type: "pictorialBar", + barMaxWidth: "20", + symbol: "diamond", + symbolOffset: [0, "50%"], + symbolSize: [30, 15], + }, + { + data: [200, 85, 112, 275, 305, 415, 741, 405], + type: "pictorialBar", + barMaxWidth: "20", + symbolPosition: "end", + symbol: "diamond", + symbolOffset: [0, "-50%"], + symbolSize: [30, 12], + zlevel: 2, + }, + { + data: [741, 741, 741, 741, 741, 741, 741, 741], + type: "bar", + barMaxWidth: "auto", + barWidth: 30, + barGap: "-100%", + zlevel: -1, + }, + { + data: [1, 1, 1, 1, 1, 1, 1, 1], + type: "pictorialBar", + barMaxWidth: "20", + symbol: "diamond", + symbolOffset: [0, "50%"], + symbolSize: [30, 15], + zlevel: -2, + }, + { + data: [741, 741, 741, 741, 741, 741, 741, 741], + type: "pictorialBar", + barMaxWidth: "20", + symbolPosition: "end", + symbol: "diamond", + symbolOffset: [0, "-50%"], + symbolSize: [30, 12], + zlevel: -1, + }, + ], + tooltip: { + trigger: "axis", + show: false, + }, + }; + + + mycharts.setOption(option); + $(window).resize(mycharts.resize); +} \ No newline at end of file diff --git a/productionboard/target/classes/static/js/preassemble/index.js b/productionboard/target/classes/static/js/preassemble/index.js index 7063e03..42268b9 100644 --- a/productionboard/target/classes/static/js/preassemble/index.js +++ b/productionboard/target/classes/static/js/preassemble/index.js @@ -7,7 +7,7 @@ $(()=>{ }); //小时产量 - brokenLineAreaDiagram(null,document.getElementById("hourlyOutputStatistics")); + polygonalHistogram(null,document.getElementById("hourlyOutputStatistics")); //库存统计 $.getJSON('/tankShell/getInventoryStatistics', function (result) {