From 3b89f12e3abc7628857e4cc2c82b7538d1c360bc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A4=9C=E7=AC=99=E6=AD=8C?= <2277317060@qq.com> Date: Sat, 23 Jul 2022 17:09:01 +0800 Subject: [PATCH 1/4] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E7=95=8C=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../main/resources/static/js/echartsCommon.js | 110 ++++++++++-------- 1 file changed, 62 insertions(+), 48 deletions(-) diff --git a/ruoyi-admin/src/main/resources/static/js/echartsCommon.js b/ruoyi-admin/src/main/resources/static/js/echartsCommon.js index b476424..f4e3fbc 100644 --- a/ruoyi-admin/src/main/resources/static/js/echartsCommon.js +++ b/ruoyi-admin/src/main/resources/static/js/echartsCommon.js @@ -138,6 +138,8 @@ const horizontalRoundedBarChartWithBackground = function (data, id) { $(window).resize(charts.resize); } const horizontalRoundedBarChartWithBackgroundTwo = function (data, id) { + let time = () => { + } let charts = echarts.init(id); if (!data) { data = { @@ -159,7 +161,7 @@ const horizontalRoundedBarChartWithBackgroundTwo = function (data, id) { top: "0%", containLabel: true, }, - dataZoom:[], + dataZoom: [], xAxis: { show: false, }, @@ -213,8 +215,8 @@ const horizontalRoundedBarChartWithBackgroundTwo = function (data, id) { color: "#fff", fontSize: 0.75 * vw }, - formatter: function (val,index,e) { - return data.yData[val.dataIndex] +'%' + formatter: function (val, index, e) { + return data.yData[val.dataIndex] + '%' } }, itemStyle: { @@ -245,7 +247,7 @@ const horizontalRoundedBarChartWithBackgroundTwo = function (data, id) { }) let step = 1 / (data.yNameOne.length / 9) * 100 - setInterval(() => { + time = setInterval(() => { option.dataZoom[0].end += step option.dataZoom[0].start += step if (option.dataZoom[0].start >= 100) { @@ -258,6 +260,7 @@ const horizontalRoundedBarChartWithBackgroundTwo = function (data, id) { } charts.setOption(option); }, 3000) + time() } charts.setOption(option); $(window).resize(charts.resize); @@ -919,7 +922,7 @@ const barChartAndLineChartFour = function (data, id) { } ] }; - if (Math.max(...data.yDataOne) <=5){ + if (Math.max(...data.yDataOne) <= 5) { option.yAxis[0].max = 5 } @@ -1503,7 +1506,7 @@ const multipleVerticalBarChartTwo = function (data, id) { } // 单个垂直柱状图 -const singleVerticalBarChart = function (data, id,rotate=0) { +const singleVerticalBarChart = function (data, id, rotate = 0) { let charts = echarts.init(id); if (!data) { data = { @@ -1583,6 +1586,14 @@ const singleVerticalBarChart = function (data, id,rotate=0) { ), }, }, + label: { + show: true, + position: "top", + textStyle: { + color: "#fff", + fontSize: 0.75 * vw + }, + }, data: data.yData, }, ], @@ -1593,12 +1604,14 @@ const singleVerticalBarChart = function (data, id,rotate=0) { $(window).resize(charts.resize); } const singleVerticalBarChartTwo = function (data, id) { + let time = () => { + } let charts = echarts.init(id); if (!data) { data = { xName: ['0时', '2时', '4时', '6时', '8时', '10时', '12时', '14时'], yData: [38, 60, 40, 55, 42, 39, 45, 40], - yImg: ['','','','','','','',''], + yImg: ['', '', '', '', '', '', '', ''], } } let option = { @@ -1620,7 +1633,7 @@ const singleVerticalBarChartTwo = function (data, id) { color: '#c0c3cd', //X轴文字 fontSize: 14, interval: 0, - rotate:20, + rotate: 20, }, axisTick: { lineStyle: { @@ -1709,8 +1722,8 @@ const singleVerticalBarChartTwo = function (data, id) { { type: 'pictorialBar', name: 'pictorial element', - symbol: function(val,index){ - return 'image://' + 'http://10.100.70.5:9090/' + data.yImg[index.dataIndex] + symbol: function (val, index) { + return 'image://' + 'http://10.100.70.5:9090/' + data.yImg[index.dataIndex] }, symbolSize: [40, 40], z: 10, @@ -1722,7 +1735,7 @@ const singleVerticalBarChartTwo = function (data, id) { } }) }, - ], + ], }; if (data.xName.length > 10) { option.dataZoom.push({ @@ -1739,20 +1752,21 @@ const singleVerticalBarChartTwo = function (data, id) { } }) - let step = 1 / (data.xName.length / 11) * 100 - 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); - }, 3000) + let step = 1 / (data.xName.length / 11) * 100 + time = 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); + }, 3000) + time() } @@ -2124,28 +2138,28 @@ const hollowPieChart = function (data, id) { // 多个环形图 const percentageRingDiagram = function (data, id) { let charts = echarts.init(id); - data ??= [ - { - name: "内胆检漏", - value: 54, - }, - { - name: "安全检测", - value: 44, - }, - { - name: "成品检漏", - value: 35, - }, - { - name: "测温性能", - value: 30, - }, - { - name: "成品外观", - value: 44, - }, - ]; + data ??= [ + { + name: "内胆检漏", + value: 54, + }, + { + name: "安全检测", + value: 44, + }, + { + name: "成品检漏", + value: 35, + }, + { + name: "测温性能", + value: 30, + }, + { + name: "成品外观", + value: 44, + }, + ]; let titleArr = [], seriesArr = []; @@ -2194,7 +2208,7 @@ const percentageRingDiagram = function (data, id) { }, hoverAnimation: false, center: [ - index > 2 ? (index - 3) * 25 + 30 + "%" : index * 25 + 20 + "%", + index > 2 ? (index - 3) * 25 + 30 + "%" : index * 25 + 20 + "%", index > 2 ? "75%" : "25%", ], data: [ From d8f566a6093ab9a358eb39e1d006695734350af9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A4=9C=E7=AC=99=E6=AD=8C?= <2277317060@qq.com> Date: Sat, 23 Jul 2022 17:52:21 +0800 Subject: [PATCH 2/4] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E7=95=8C=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../static/js/board/orderVisualization.js | 189 +++++++++++++----- .../main/resources/static/js/echartsCommon.js | 9 +- 2 files changed, 151 insertions(+), 47 deletions(-) diff --git a/ruoyi-admin/src/main/resources/static/js/board/orderVisualization.js b/ruoyi-admin/src/main/resources/static/js/board/orderVisualization.js index 25c85bd..f273dda 100644 --- a/ruoyi-admin/src/main/resources/static/js/board/orderVisualization.js +++ b/ruoyi-admin/src/main/resources/static/js/board/orderVisualization.js @@ -1,63 +1,67 @@ $(() => { moduleTitle() safe('#safe') + // 公共请求地址 + let url = '/broad/mtk' card({ top: 60, left: 30.5, title: '内胆检漏', - name1: '问题1', - value1: '值1', - name2: '问题2', - value2: '值2', - name3: '问题3', - value3: '值3' + name1: '', + value1: '', + name2: '', + value2: '', + name3: '', + value3: '', }, '#cardOne') + card({ top: 60, left: 38.5, title: '安全检测', - name1: '问题1', - value1: '值1', - name2: '问题2', - value2: '值2', - name3: '问题3', - value3: '值3' + name1: '', + value1: '', + name2: '', + value2: '', + name3: '', + value3: '', }, '#cardTwo') + card({ top: 60, left: 46.5, title: '成品检漏', - name1: '问题1', - value1: '值1', - name2: '问题2', - value2: '值2', - name3: '问题3', - value3: '值3' + name1: '', + value1: '', + name2: '', + value2: '', + name3: '', + value3: '', }, '#cardThree') + card({ top: 60, left: 54.5, title: '测温性能', - name1: '问题1', - value1: '值1', - name2: '问题2', - value2: '值2', - name3: '问题3', - value3: '值3' + name1: '', + value1: '', + name2: '', + value2: '', + name3: '', + value3: '', }, '#cardFour') + card({ top: 60, left: 62.5, title: '成品外观', - name1: '问题1', - value1: '值1', - name2: '问题2', - value2: '值2', - name3: '问题3', - value3: '值3' + name1: '', + value1: '', + name2: '', + value2: '', + name3: '', + value3: '', }, '#cardFive') - // 公共请求地址 - let url = '/broad/mtk' // 轮询间隔时间 const INTERVAL = 30000 @@ -145,15 +149,110 @@ $(() => { total(data.find(val => val.name === '入库订单统计').qty, '#total') Tips(data.find(val => val.name === '订单数量').qty, data.find(val => val.name === '完成数量').qty, data.find(val => val.name === '清单率').qty, '#Tips') }) - // 设备功率 + + // 质量分析(TOP3) + autoUpdate(url + "/selectQATop3", INTERVAL, data => { + console.log(data) + let arr = [] + data.forEach(val => { + switch (val.code) { + case '内胆检漏': + arr = data.find(val => val.code === '内胆检漏').list.sort(function (a,b) { + return b.qty - a.qty + }) + card({ + top: 60, + left: 30.5, + title: '内胆检漏', + name1: arr[0]?.name || '', + value1: arr[0]?.qty || '', + name2: arr[1]?.name || '', + value2: arr[1]?.qty || '', + name3: arr[2]?.name || '', + value3: arr[2]?.qty || '', + }, '#cardOne') + break + case '安全检测': + debugger + arr = data.find(val => val.code === '安全检测').list.sort(function (a,b) { + return b.qty - a.qty + }) + card({ + top: 60, + left: 38.5, + title: '安全检测', + name1: arr[0]?.name || '', + value1: arr[0]?.qty || '', + name2: arr[1]?.name || '', + value2: arr[1]?.qty || '', + name3: arr[2]?.name || '', + value3: arr[2]?.qty || '', + }, '#cardTwo') + break + case '成品检漏': + arr = data.find(val => val.code === '成品检漏').list.sort(function (a,b) { + return b.qty - a.qty + }) + card({ + top: 60, + left: 46.5, + title: '成品检漏', + name1: arr[0]?.name || '', + value1: arr[0]?.qty || '', + name2: arr[1]?.name || '', + value2: arr[1]?.qty || '', + name3: arr[2]?.name || '', + value3: arr[2]?.qty || '', + }, '#cardThree') + break + case '测温性能': + arr = data.find(val => val.code === '测温性能').list.sort(function (a,b) { + return b.qty - a.qty + }) + card({ + top: 60, + left: 54.5, + title: '测温性能', + name1: arr[0]?.name || '', + value1: arr[0]?.qty || '', + name2: arr[1]?.name || '', + value2: arr[1]?.qty || '', + name3: arr[2]?.name || '', + value3: arr[2]?.qty || '', + }, '#cardFour') + break + case '成品外观': + arr = data.find(val => val.code === '成品外观').list.sort(function (a,b) { + return b.qty - a.qty + }) + card({ + top: 60, + left: 62.5, + title: '成品外观', + name1: arr[0]?.name || '', + value1: arr[0]?.qty || '', + name2: arr[1]?.name || '', + value2: arr[1]?.qty || '', + name3: arr[2]?.name || '', + value3: arr[2]?.qty || '', + }, '#cardFive') + break + case '柱状图': + arr = data.find(val => val.code === '柱状图').list.sort(function (a,b) { + return b.qty - a.qty + }) + singleVerticalBarChart({ + xName: arr.map(val => val.name), + yData: arr.map(val => val.qty), + }, document.getElementById("equipmentPower"),20,'20%') + break + } + }) + }) // autoUpdate(url + "/inStore3d", INTERVAL, data => { - singleVerticalBarChart({ - xName: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"], - yData: [12, 20, 11, 30, 14, 80, 50], - }, document.getElementById("equipmentPower")) // }) - // 生产效率 + // 当日订单入库统计 autoUpdate(url + "/selectInstoreNumByday", INTERVAL, data => { singleVerticalBarChart({ xName: data.map(val => val.name), @@ -245,27 +344,27 @@ const card = (val = { ${val.title}
- + ${val.name1} - + ${val.value1}
- + ${val.name2} - + ${val.value2}
- + ${val.name3} - - ${val.value2} + + ${val.value3}
diff --git a/ruoyi-admin/src/main/resources/static/js/echartsCommon.js b/ruoyi-admin/src/main/resources/static/js/echartsCommon.js index f4e3fbc..02491a5 100644 --- a/ruoyi-admin/src/main/resources/static/js/echartsCommon.js +++ b/ruoyi-admin/src/main/resources/static/js/echartsCommon.js @@ -155,6 +155,7 @@ const horizontalRoundedBarChartWithBackgroundTwo = function (data, id) { }) let option = { grid: { + // left: "-10%", left: "0%", right: "8%", bottom: "0%", @@ -181,6 +182,10 @@ const horizontalRoundedBarChartWithBackgroundTwo = function (data, id) { }, axisLabel: { color: "#fff", + // margin:150, + textStyle: { + textAlign:'center' + }, }, }, ], @@ -1506,7 +1511,7 @@ const multipleVerticalBarChartTwo = function (data, id) { } // 单个垂直柱状图 -const singleVerticalBarChart = function (data, id, rotate = 0) { +const singleVerticalBarChart = function (data, id, rotate = 0,bottom='15%') { let charts = echarts.init(id); if (!data) { data = { @@ -1523,7 +1528,7 @@ const singleVerticalBarChart = function (data, id, rotate = 0) { top: "10%", left: left(), right: "5%", - bottom: "15%", + bottom: bottom, // containLabel: true }, dataZoom: [], From b3a9381e7b6c6a0a94d24a09b8e9c02cec983aa2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A4=9C=E7=AC=99=E6=AD=8C?= <2277317060@qq.com> Date: Sat, 23 Jul 2022 18:14:25 +0800 Subject: [PATCH 3/4] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E7=95=8C=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../static/js/board/orderVisualization.js | 19 +++++++---- .../main/resources/static/js/echartsCommon.js | 33 +++++++++++-------- .../templates/broad/orderVisualization.html | 1 + 3 files changed, 33 insertions(+), 20 deletions(-) diff --git a/ruoyi-admin/src/main/resources/static/js/board/orderVisualization.js b/ruoyi-admin/src/main/resources/static/js/board/orderVisualization.js index f273dda..ae62b5f 100644 --- a/ruoyi-admin/src/main/resources/static/js/board/orderVisualization.js +++ b/ruoyi-admin/src/main/resources/static/js/board/orderVisualization.js @@ -1,6 +1,7 @@ $(() => { moduleTitle() safe('#safe') + importData('#importData') // 公共请求地址 let url = '/broad/mtk' card({ @@ -244,13 +245,11 @@ $(() => { singleVerticalBarChart({ xName: arr.map(val => val.name), yData: arr.map(val => val.qty), - }, document.getElementById("equipmentPower"),20,'20%') + }, document.getElementById("equipmentPower"),-20,'20%') break } }) }) - // autoUpdate(url + "/inStore3d", INTERVAL, data => { - // }) // 当日订单入库统计 autoUpdate(url + "/selectInstoreNumByday", INTERVAL, data => { @@ -259,7 +258,8 @@ $(() => { yData: data.map(val => val.qty), }, document.getElementById("productionEfficiency"),-20) }) - // 成品入库统计 + + // 重点工序质量监控 // autoUpdate(url + "/inStore3d", INTERVAL, data => { percentageRingDiagram([ { @@ -303,7 +303,7 @@ const curWeek = () => { } firstDayOfYear = new Date(today.getFullYear(), 0, spendDay); let d = Math.ceil((today.valueOf() - firstDayOfYear.valueOf()) / 86400000); - return Math.ceil(d / 7); + return Math.ceil((d / 7) +1); } const moduleTitle = () => { @@ -321,8 +321,9 @@ const moduleTitle = () => { const safe = (el) => { const html = ` + ${new Date().getFullYear().toString()}年连续安全生产天数 ${today()}天 - QSR连续安全生产天数 + 智能冷柜互联工厂 ` $(el).html(html) } @@ -384,4 +385,10 @@ const total = (val1 = 0, el) => { 合计：${val1} ` $(el).html(html) +} +const importData = ( el) => { + const html = ` + 一次合格率 + ` + $(el).html(html) } \ No newline at end of file diff --git a/ruoyi-admin/src/main/resources/static/js/echartsCommon.js b/ruoyi-admin/src/main/resources/static/js/echartsCommon.js index 02491a5..ed66fc6 100644 --- a/ruoyi-admin/src/main/resources/static/js/echartsCommon.js +++ b/ruoyi-admin/src/main/resources/static/js/echartsCommon.js @@ -183,6 +183,7 @@ const horizontalRoundedBarChartWithBackgroundTwo = function (data, id) { axisLabel: { color: "#fff", // margin:150, + fontSize:0.75 * vw, textStyle: { textAlign:'center' }, @@ -252,19 +253,21 @@ const horizontalRoundedBarChartWithBackgroundTwo = function (data, id) { }) let step = 1 / (data.yNameOne.length / 9) * 100 - time = 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); - }, 3000) + time = () => { + 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); @@ -1629,6 +1632,7 @@ const singleVerticalBarChartTwo = function (data, id) { }, dataZoom: [], xAxis: { + margin:10, nameTextStyle: { color: '#c0c3cd', padding: [0, 0, -10, 0], @@ -1638,7 +1642,8 @@ const singleVerticalBarChartTwo = function (data, id) { color: '#c0c3cd', //X轴文字 fontSize: 14, interval: 0, - rotate: 20, + margin:20, + rotate: -20, }, axisTick: { lineStyle: { diff --git a/ruoyi-admin/src/main/resources/templates/broad/orderVisualization.html b/ruoyi-admin/src/main/resources/templates/broad/orderVisualization.html index 77e12b1..edb5701 100644 --- a/ruoyi-admin/src/main/resources/templates/broad/orderVisualization.html +++ b/ruoyi-admin/src/main/resources/templates/broad/orderVisualization.html @@ -34,6 +34,7 @@
+
From 4cd2c1ab298f6120e821bdbd171625989d1ce912 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A4=9C=E7=AC=99=E6=AD=8C?= <2277317060@qq.com> Date: Sat, 23 Jul 2022 18:21:48 +0800 Subject: [PATCH 4/4] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E7=95=8C=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ruoyi-admin/src/main/resources/static/js/echartsCommon.js | 1 + 1 file changed, 1 insertion(+) diff --git a/ruoyi-admin/src/main/resources/static/js/echartsCommon.js b/ruoyi-admin/src/main/resources/static/js/echartsCommon.js index ed66fc6..58fd4bb 100644 --- a/ruoyi-admin/src/main/resources/static/js/echartsCommon.js +++ b/ruoyi-admin/src/main/resources/static/js/echartsCommon.js @@ -1545,6 +1545,7 @@ const singleVerticalBarChart = function (data, id, rotate = 0,bottom='15%') { axisLabel: { color: "#fff", fontSize: 14, + interval:0, rotate: rotate, }, },