diff --git a/ruoyi-admin/src/main/resources/static/css/board/month.css b/ruoyi-admin/src/main/resources/static/css/board/month.css index ebf46ba..3062afb 100644 --- a/ruoyi-admin/src/main/resources/static/css/board/month.css +++ b/ruoyi-admin/src/main/resources/static/css/board/month.css @@ -23,4 +23,11 @@ body { height: 35%; top: 60%; left: 2.5%; +} +.quality{ + position: absolute; + width: 23%; + height: 35%; + top: 60%; + left: 26.5%; } \ No newline at end of file diff --git a/ruoyi-admin/src/main/resources/static/css/board/week.css b/ruoyi-admin/src/main/resources/static/css/board/week.css index 9de3227..749cb21 100644 --- a/ruoyi-admin/src/main/resources/static/css/board/week.css +++ b/ruoyi-admin/src/main/resources/static/css/board/week.css @@ -31,17 +31,45 @@ body { top: 60%; left: 3%; } -.equipmentPower{ - position: absolute; - width: 39%; - height: 34%; - top: 60%; - left: 30.5%; -} .topLeft{ position: absolute; width: 25%; height: 34%; top: 15.5%; left: 3.5%; +} +.equipmentPowerOne{ + position: absolute; + width: 13%; + height: 16%; + top: 60%; + left: 30.5%; +} +.equipmentPowerTwo{ + position: absolute; + width: 13%; + height: 16%; + top: 60%; + left: 43.5%; +} +.equipmentPowerThree{ + position: absolute; + width: 13%; + height: 16%; + top: 60%; + left: 56.5%; +} +.equipmentPowerFour{ + position: absolute; + width: 19%; + height: 16%; + top: 76%; + left: 30.5%; +} +.equipmentPowerFive{ + position: absolute; + width: 19%; + height: 16%; + top: 76%; + left: 49.5%; } \ No newline at end of file diff --git a/ruoyi-admin/src/main/resources/static/js/board/month.js b/ruoyi-admin/src/main/resources/static/js/board/month.js index 569bd7b..78ede06 100644 --- a/ruoyi-admin/src/main/resources/static/js/board/month.js +++ b/ruoyi-admin/src/main/resources/static/js/board/month.js @@ -8,12 +8,25 @@ $(() => { autoUpdate(url + "/selectUserSatisfaction", INTERVAL, data => { - let list = data.map(val => val.list) - multipleVerticalBarChartTwo(null, document.getElementById("satisfaction"), -20) + multipleVerticalBarChartThree({ + xName: data.map(val => val.yearName), + yDataOne: data.map(val => val.productRate), + yDataOneName: '产品体验', + yDataTwo: data.map(val => val.shoppingRate), + yDataTwoName: "购物体验", + yDataThree: data.map(val => val.serviceRate), + yDataThreeName: "服务体验", + yDataFour: data.map(val => val.orderRate), + yDataFourName: "订单履行率", + }, document.getElementById("satisfaction"), ) }) - autoUpdate(url + "/selectUserSatisfaction", INTERVAL, data => { - verticalBarChart(null, document.getElementById("outputStatistics"), -20) + autoUpdate(url + "/selectProductInStoreGroupMonth", INTERVAL, data => { + verticalBarChart({ + xName: data.map(val => `${val.name}月`), + yData: data.map(val => val.qty), + }, document.getElementById("outputStatistics"), '') }) + lineChart(null, document.getElementById("quality")) }) diff --git a/ruoyi-admin/src/main/resources/static/js/board/week.js b/ruoyi-admin/src/main/resources/static/js/board/week.js index 4088241..a52ead7 100644 --- a/ruoyi-admin/src/main/resources/static/js/board/week.js +++ b/ruoyi-admin/src/main/resources/static/js/board/week.js @@ -45,7 +45,26 @@ $(() => { Tips(data.find(val => val.name === '订单数量').qty, data.find(val => val.name === '完成数量').qty, data.find(val => val.name === '清单率').qty, '#Tips') }) - // 当日订单入库统计 + autoUpdate(url + "/selectProductInStore", INTERVAL, data => { + let list = data.map(val => val.list) + let yDataOne = [] + let yDataTwo = [] + list.forEach(val => { + yDataOne.push(val.find(val => val.name == '计划')?.qty || 0) + yDataTwo.push(val.find(val => val.name == '产量')?.qty || 0) + }) + + total(yDataTwo.reduce((val1,val2) => val1 + val2 , 0),'#total') + multipleVerticalBarChartTwo({ + xName: data.map(val => val.code), + yDataOne: yDataOne, + yDataOneName: '计划', + yDataTwo: yDataTwo, + yDataTwoName: "产量", + }, document.getElementById("topLeft"), -20) + }) + + // 周质量分析 autoUpdate(url + "/zhou_selectQaItemInfo", INTERVAL, data => { let arr = [0, 0, 0, 0, 0, 0] let yDataOne = [...(data.find(val => val.code == '内胆检漏')?.list.map(val => val.rate) || []), ...arr] @@ -53,20 +72,31 @@ $(() => { let yDataThree = [...(data.find(val => val.code == '成品检漏')?.list.map(val => val.rate) || []), ...arr] let yDataFour = [...(data.find(val => val.code == '测温性能')?.list.map(val => val.rate) || []), ...arr] let yDataFive = [...(data.find(val => val.code == '成品外观')?.list.map(val => val.rate) || []), ...arr] - multipleBrokenLineAreaDiagramTwo( - { - xData: data.find(val => val.code == '横坐标')?.list.map(val => val.name), - yDataOne: yDataOne, - yDataTwo: yDataTwo, - yDataThree: yDataThree, - yDataFour: yDataFour, - yDataFive: yDataFive, - yDataOneName: '内胆检漏', - yDataTwoName: '安全检测', - yDataThreeName: '成品检漏', - yDataFourName: '测温性能', - yDataFiveName: '成品外观', - }, document.getElementById("equipmentPower")) + lineChart({ + xName: data.find(val => val.code == '横坐标')?.list.map(val => val.name), + yData: yDataOne, + yDataName: "内胆检漏" + }, document.getElementById("equipmentPowerOne")) + lineChart({ + xName: data.find(val => val.code == '横坐标')?.list.map(val => val.name), + yData: yDataTwo, + yDataName: "安全检测" + }, document.getElementById("equipmentPowerTwo")) + lineChart({ + xName: data.find(val => val.code == '横坐标')?.list.map(val => val.name), + yData: yDataThree, + yDataName: "成品检漏" + }, document.getElementById("equipmentPowerThree")) + lineChart({ + xName: data.find(val => val.code == '横坐标')?.list.map(val => val.name), + yData: yDataFour, + yDataName: "测温性能" + }, document.getElementById("equipmentPowerFour")) + lineChart({ + xName: data.find(val => val.code == '横坐标')?.list.map(val => val.name), + yData: yDataFive, + yDataName: "成品外观" + }, document.getElementById("equipmentPowerFive")) // pieChart(data.map((val, index) => { // if (index == 0 ) { // return { @@ -95,25 +125,6 @@ $(() => { // ), document.getElementById("equipmentPower")); }) - autoUpdate(url + "/selectProductInStore", INTERVAL, data => { - let list = data.map(val => val.list) - let yDataOne = [] - let yDataTwo = [] - list.forEach(val => { - yDataOne.push(val.find(val => val.name == '计划')?.qty || 0) - yDataTwo.push(val.find(val => val.name == '产量')?.qty || 0) - }) - - total(yDataTwo.reduce((val1,val2) => val1 + val2 , 0),'#total') - multipleVerticalBarChartTwo({ - xName: data.map(val => val.code), - yDataOne: yDataOne, - yDataOneName: '计划', - yDataTwo: yDataTwo, - yDataTwoName: "产量", - }, document.getElementById("topLeft"), -20) - }) - }) const today = () => { diff --git a/ruoyi-admin/src/main/resources/static/js/echartsCommon.js b/ruoyi-admin/src/main/resources/static/js/echartsCommon.js index e40b66f..32091f2 100644 --- a/ruoyi-admin/src/main/resources/static/js/echartsCommon.js +++ b/ruoyi-admin/src/main/resources/static/js/echartsCommon.js @@ -5,6 +5,8 @@ var time2 = () => { } var time3 = () => { } +var time4 = () => { +} // 随机数 const random = (val = 1) => { return Math.ceil(Math.random() * val) @@ -940,6 +942,108 @@ const barChartAndLineChartFour = function (data, id) { $(window).resize(charts.resize); } +// 折线图 +const lineChart = function (data, id) { + let charts = echarts.init(id); + if (!data) { + data = { + xName: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"], + yData: [61, 25, 57, 83, 87, 73, 17, 25, 57, 83, 87, 73], + yDataName: "提升百分比" + } + } + let option = { + grid: { + top: '20%', + left: '5%', + right: '5%', + bottom: '8%', + containLabel: true, + }, + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'shadow', + label: { + show: true, + }, + }, + }, + legend: { + top: '5%', + textStyle: { + fontSize:0.75*vw, + color: '#90cb5e', + }, + }, + xAxis: { + type: 'category', + data:data.xName, + axisLine: { + show: true, + }, + axisTick: { + show: false, + }, + axisLabel: { + show: true, + textStyle: { + color: '#ffffff', //X轴文字颜色 + }, + }, + }, + yAxis: [ + { + type: 'value', + nameTextStyle: { + color: '#393939', + }, + splitLine: { + show: false, + lineStyle: { + color: '#eeeeee', + }, + }, + axisTick: { + show: false, + }, + axisLine: { + show: false, + }, + axisLabel: { + show: true, + textStyle: { + color: '#ffffff', + }, + }, + }, + ], + series: [ + { + name: data.yDataName, + type: 'line', + showAllSymbol: true, //显示所有图形。 + symbol: 'circle', //标记的图形为实心圆 + symbolSize: 4, //标记的大小 + itemStyle: { + //折线拐点标志的样式 + color: '#f3454b', + borderWidth: '2', + borderColor: '#f3454b', + }, + lineStyle: { + color: '#f3454b', + }, + data: data.yData, + }, + ], + }; + + charts.setOption(option); + $(window).resize(charts.resize); +} + + // 饼图 const pieChart = function (data, id) { let charts = echarts.init(id); @@ -1030,7 +1134,7 @@ const pieChart = function (data, id) { } // 垂直柱状图 -const verticalBarChart = function (data, id) { +const verticalBarChart = function (data, id,unit='次') { let charts = echarts.init(id); if (!data) { data = { @@ -1096,7 +1200,7 @@ const verticalBarChart = function (data, id) { fontSize: 0.8 * vw, color: '#fff' }, - formatter: `{c}次` + formatter: `{c}${unit}` }, itemStyle: { normal: { @@ -1518,6 +1622,203 @@ const multipleVerticalBarChartTwo = function (data, id, rotate = 0) { charts.setOption(option); $(window).resize(charts.resize); } +const multipleVerticalBarChartThree = function (data, id, rotate = 0) { + + clearInterval(time4) + let charts = echarts.init(id); + if (!data) { + data = { + xName: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '7月', '7月'], + yDataOne: [22, 52, 55, 12, 35, 44, 66, 44, 66], + yDataOneName: 'a1', + yDataTwo: [32, 42, 50, 22, 30, 40, 52, 44, 66], + yDataTwoName: "a2", + yDataThree: [32, 42, 50, 22, 30, 40, 52, 44, 66], + yDataThreeName: "a3", + yDataFour: [32, 42, 50, 22, 30, 40, 52, 44, 66], + yDataFourName: "a4", + } + } + let option = { + grid: { + top: "20%", + left: "1%", + right: "1%", + bottom: "1%", + containLabel: true, + }, + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'shadow' + } + }, + legend: { + data: [data.yDataOneName, data.yDataTwoName,data.yDataThreeName,data.yDataFourName], + textStyle: { + fontSize: 0.75 * vw, + color: "#F1F1F3", + }, + }, + dataZoom:[], + xAxis: [ + { + type: 'category', + axisTick: {show: false}, + axisLabel: { + rotate: rotate, + margin: 20, + textStyle: { + fontSize: 0.75 * vw, + color: "#F1F1F3", + }, + }, + data: data.xName + } + ], + yAxis: [ + { + axisLabel: { + textStyle: { + fontSize: 0.75 * vw, + color: "#F1F1F3", + }, + }, + splitLine: { + lineStyle: { + color: "rgba(255,255,255,0.1)", + }, + }, + type: 'value' + } + ], + series: [ + { + name: data.yDataOneName, + type: 'bar', + barGap: 0, + emphasis: { + focus: 'series' + }, + itemStyle: { + //图形样式 + normal: { + color: "#1FEDCA", + }, + }, + label: { + show: true, + position: "top", + textStyle: { + color: "rgba(255,255,255,0.5)", + fontSize: 0.75 * vw + }, + }, + data: data.yDataOne + }, + { + name: data.yDataTwoName, + type: 'bar', + emphasis: { + focus: 'series' + }, + label: { + show: true, + position: "top", + textStyle: { + color: "rgba(255,255,255,0.5)", + fontSize: 0.75 * vw + }, + }, + itemStyle: { + //图形样式 + normal: { + color: "#E65454", + }, + }, + data: data.yDataTwo + }, + { + name: data.yDataThreeName, + type: 'bar', + emphasis: { + focus: 'series' + }, + label: { + show: true, + position: "top", + textStyle: { + color: "rgba(255,255,255,0.5)", + fontSize: 0.75 * vw + }, + }, + itemStyle: { + //图形样式 + normal: { + color: "#351865", + }, + }, + data: data.yDataThree + }, + { + name: data.yDataFourName, + type: 'bar', + emphasis: { + focus: 'series' + }, + label: { + show: true, + position: "top", + textStyle: { + color: "rgba(255,255,255,0.5)", + fontSize: 0.75 * vw + }, + }, + itemStyle: { + //图形样式 + normal: { + color: "#4b7232", + }, + }, + data: data.yDataFour + }, + ] + }; + + if (data.yDataOne.length > 7) { + option.dataZoom.push({ + show: false, + type: 'slider', + bottom: '0%', + xAxisIndex: 0, + height: 12, + start: 0, + end: 1 / (data.yDataOne.length / 6) * 100, + textStyle: { + fontSize: 0, + color: 'rgba(0,0,0,0)' + } + }) + + let step = 1 / (data.yDataOne.length / 6) * 100 + time4 = setInterval(() => { + option.dataZoom[0].end += step + option.dataZoom[0].start += step + if (option.dataZoom[0].start >= 100) { + option.dataZoom[0].start = 0 + option.dataZoom[0].end = step + } + if (option.dataZoom[0].end >= 100) { + option.dataZoom[0].end = 100 + option.dataZoom[0].start = option.dataZoom[0].end - step + } + charts.setOption(option); + }, 6000) + // time() + } + charts.setOption(option); + $(window).resize(charts.resize); +} // 单个垂直柱状图 const singleVerticalBarChart = function (data, id, rotate = 0, bottom = '15%') { diff --git a/ruoyi-admin/src/main/resources/templates/broad/month.html b/ruoyi-admin/src/main/resources/templates/broad/month.html index b4ebd12..63df1ca 100644 --- a/ruoyi-admin/src/main/resources/templates/broad/month.html +++ b/ruoyi-admin/src/main/resources/templates/broad/month.html @@ -34,6 +34,9 @@
+ + +