diff --git a/ruoyi-admin/src/main/resources/static/css/board/orderVisualization.css b/ruoyi-admin/src/main/resources/static/css/board/orderVisualization.css index 2bdc458..b83d21d 100644 --- a/ruoyi-admin/src/main/resources/static/css/board/orderVisualization.css +++ b/ruoyi-admin/src/main/resources/static/css/board/orderVisualization.css @@ -17,32 +17,11 @@ body { top: 15%; left: 3.5%; } -.IQCOne{ - position: absolute; - width: 20%; - height: 15%; - top: 15%; - left: 30%; -} -.IQCTwo{ - position: absolute; - width: 13%; - height: 15%; - top: 15%; - left: 50%; -} -.IQCThree{ - position: absolute; - width: 7%; - height: 15%; - top: 15%; - left: 63%; -} -.IQCFour{ +.IQC{ position: absolute; width: 40%; - height: 20%; - top: 30%; + height: 35%; + top: 15%; left: 30%; } .productionEfficiency{ @@ -57,19 +36,12 @@ body { width: 25%; height: 35%; top: 59%; - left: 3.7%; + left: 72%; } -.equipmentPowerOne{ +.equipmentPower{ position: absolute; - width: 20%; + width: 39%; height: 19%; top: 76%; left: 30.5%; -} -.equipmentPowerTwo{ - position: absolute; - width: 20%; - height: 19%; - top: 76%; - left: 50.5%; } \ No newline at end of file diff --git a/ruoyi-admin/src/main/resources/static/img/board/orderVisualization/backgroundImg.jpg b/ruoyi-admin/src/main/resources/static/img/board/orderVisualization/backgroundImg.jpg index af68f23..65b9e64 100644 Binary files a/ruoyi-admin/src/main/resources/static/img/board/orderVisualization/backgroundImg.jpg and b/ruoyi-admin/src/main/resources/static/img/board/orderVisualization/backgroundImg.jpg differ diff --git a/ruoyi-admin/src/main/resources/static/js/autoscroll-table.js b/ruoyi-admin/src/main/resources/static/js/autoscroll-table.js index 3ca02d6..a29847b 100644 --- a/ruoyi-admin/src/main/resources/static/js/autoscroll-table.js +++ b/ruoyi-admin/src/main/resources/static/js/autoscroll-table.js @@ -260,7 +260,7 @@ class AutoScrollTable { thead.style.width = window.getComputedStyle(tbody).width let tr = this.el.querySelectorAll(".autoscroll-table .autoscroll-table_tbody1 tr") tr.forEach(val => { - val.style.lineHeight = `${(parseFloat(window.getComputedStyle(parent).height) - parseFloat(window.getComputedStyle(theadRow).height))/this.lineNum}px` + val.style.lineHeight = `${(parseFloat(window.getComputedStyle(parent).height) - parseFloat(window.getComputedStyle(theadRow).height))/this.lineNum - 1.5}px` }) shadow.style.display ='none' diff --git a/ruoyi-admin/src/main/resources/static/js/board/finalAssemblyProductionData.js b/ruoyi-admin/src/main/resources/static/js/board/finalAssemblyProductionData.js index 7adcc50..d746d27 100644 --- a/ruoyi-admin/src/main/resources/static/js/board/finalAssemblyProductionData.js +++ b/ruoyi-admin/src/main/resources/static/js/board/finalAssemblyProductionData.js @@ -1,7 +1,6 @@ $(() => { moduleTitle() LOSS() - Tips() // 公共请求地址 let url = '/broad/zz' @@ -11,11 +10,25 @@ $(() => { // 目标 $.post(url + "/selectProductInByTeam/0", {}, data => { data = JSON.parse(data) + console.log(isFirst) if (isFirst) { - // target.top = data.map(val => val.val) - // target.bottom = data.val - // request() - // isFirst = false + let arr = [] + for (let i = 0; i < 12; i++) { + arr.push(Math.ceil(target.topTips/11)) + } + arr[2] = Math.ceil(target.topTips/22) + arr[7] = Math.ceil(target.topTips/22) + target.top = arr + target.topProgress = arr.reduce((val1,val2) => { + console.log(val1) + console.log(val2) + return val1 + val2 + } , 0) + // target.top = data.map(val => val.val) + // target.bottom = data.val + isFirst = false + request() + Tips('#Tips') } }) // LOSS(分类) @@ -30,8 +43,17 @@ $(() => { // 产量 $.post(url + `/selectProductInByTeam/${yieldType}`, {}, data => { data = JSON.parse(data) + let oneTime = parseFloat(data[0].name.split(':')[0]) + let xName = [] + if (yieldType == 0) { + for (let i = 0; i < 12; i++) { + xName.push(`${(oneTime + i) % 24}:30`) + } + } else { + xName = data.map(val => val.name) + } barChartAndLineChartThree({ - xName: data.map(val => val.name), + xName: xName, yDataOne: data.map(val => val.qty), yDataOneName: "实际产量", yDataTwo: target.top, @@ -42,8 +64,17 @@ $(() => { // 一次装配不合格率 $.post(url + `/selectProductInByTeam/${yieldType}`, {}, data => { data = JSON.parse(data) + let oneTime = parseFloat(data[0].name.split(':')[0]) + let xName = [] + if (yieldType == 0) { + for (let i = 0; i < 12; i++) { + xName.push(`${(oneTime + i) % 24}:30`) + } + } else { + xName = data.map(val => val.name) + } barChartAndLineChartFour({ - xName: data.map(val => val.name), + xName: xName, yDataOne: data.map(val => val.qty), yDataOneName: "不良数", yDataTwo: [9, 3, 7, 7, 7, 2, 7, 1, 6, 7, 2, 1, 5], @@ -56,22 +87,21 @@ $(() => { //追踪事件轮询 $.post("/broad/beforeLibrary/selectOrderInfo", {}, data => { data = JSON.parse(data) - console.log(data) $('#trackEvents').remove() $('.trackEventsScrollTable').html('
') dynamicTable({ el: '#trackEvents', rowNum: 5, timeout: 0, - header: ["订单编号",'产品型号', "计划数量", "完成数量", "执行进度", "时间"], - data: data.map(value => [value.plan_code.slice(4, value.plan_code.length),'', value.plan_number, value.actual_number, value.plan_number - value.actual_number, value.day]), + header: ["订单编号", '产品型号', "计划数量", "完成数量", "执行进度", "时间"], + data: data.map(value => [value.plan_code.slice(4, value.plan_code.length), '', value.plan_number, value.actual_number, value.plan_number - value.actual_number, value.day]), index: false, fontColor: '#B4B7BF ', indexBGC: '#86F3FF', headerBGC: 'rgba(8,36,75,0.2)', oddRowBGC: 'rgba(8,36,75,0.2)', evenRowBGC: 'rgba(8,36,75,0.2)', - colWidth: ['25%','22%', '10%', '10%', '10%', '23%'] + colWidth: ['25%', '22%', '10%', '10%', '10%', '23%'] }); }) } @@ -93,12 +123,16 @@ $(() => { let yieldType = '0' let isFirst = true let target = { - top: [382, 102, 186, 200, 102, 186, 315, 1, 1, 1, 1], + top: [], bottom: [3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3], - topTips: '2000', - bottomTips: '3.05', + topTips: 2000, + bottomTips: 3.05, + topProgress:0, + topReality:0, + topGap:0, + topRate:0, } -const LOSS = (val1=0,val2=24) => { +const LOSS = (val1 = 0, val2 = 24) => { const html = ` ${val1} ${val2} @@ -117,10 +151,16 @@ const moduleTitle = () => { ` $('body').append(html) } -const Tips = (top={target:target.topTips,progress:0,reality:0,gap:0,rate:0},bottom={target:target.bottomTips,reality:0,total:0}) => { +const Tips = (el,top = { + target: target.topTips, + progress: target.topProgress, + reality: target.topReality, + gap: target.topGap, + rate: target.topRate, +}, bottom = {target: target.bottomTips, reality: 0, total: 0}) => { const html = ` 目标：${top.target}  进度目标：${top.progress}  实际：${top.reality}  差异：${top.gap}  达成率：${top.rate}% 目标：${bottom.target}%    实际：${bottom.reality}%    累计不良数：${bottom.total} ` - $('body').append(html) + $(el).append(html) } 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 930d4e4..c5096b3 100644 --- a/ruoyi-admin/src/main/resources/static/js/board/orderVisualization.js +++ b/ruoyi-admin/src/main/resources/static/js/board/orderVisualization.js @@ -1,93 +1,177 @@ $(() => { moduleTitle() - safe() - card({top: 60, left: 30.5}) - card({top: 60, left: 38.5}) - card({top: 60, left: 46.5}) - card({top: 60, left: 54.5}) - card({top: 60, left: 62.5}) + safe('#safe') + Tips(0,0,0,'#Tips') + total( 0,'#total') + card({top: 60, left: 30.5,title:'内胆检漏',name1:'问题1',value1:'值1',name2:'问题2',value2:'值2',name3:'问题3',value3:'值3'},'#cardOne') + card({top: 60, left: 38.5,title:'安全检测',name1:'问题1',value1:'值1',name2:'问题2',value2:'值2',name3:'问题3',value3:'值3'},'#cardTwo') + card({top: 60, left: 46.5,title:'成品检漏',name1:'问题1',value1:'值1',name2:'问题2',value2:'值2',name3:'问题3',value3:'值3'},'#cardThree') + card({top: 60, left: 54.5,title:'测温性能',name1:'问题1',value1:'值1',name2:'问题2',value2:'值2',name3:'问题3',value3:'值3'},'#cardFour') + card({top: 60, left: 62.5,title:'成品外观',name1:'问题1',value1:'值1',name2:'问题2',value2:'值2',name3:'问题3',value3:'值3'},'#cardFive') // 公共请求地址 let url = '/broad/beforeLibrary' // 轮询间隔时间 const INTERVAL = 30000 - // IQC3 - const IQCTwo = new AutoScrollTable(document.getElementById("IQCTwo"), ["编号", "计划数量", "完成数量", "差异值", "时间"], {width: ['30%', null, null, null, '17%']}) - //每日人力出勤轮询 // autoUpdate(url + "/ ", INTERVAL, data => { - singleVerticalBarChartTwo(null, document.getElementById("manpowerAttendance")) + let data = [ + { + name: '班组1', + value: 72, + }, + { + name: '班组2', + value: 52, + }, + { + name: '班组3', + value: 72, + }, + { + name: '班组4', + value: 29, + }, + { + name: '班组5', + value: 82, + }, + { + name: '班组6', + value: 82, + }, + { + name: '班组7', + value: 28, + }, + { + name: '班组8', + value: 62, + }, + { + name: '班组9', + value: 82, + }, + { + name: '班组10', + value: 38, + }, + { + name: '班组11', + value: 93, + }, + ] + data.sort((a,b)=>{ + return b.value - a.value + }) + console.log(data) + singleVerticalBarChartTwo({ + xName: ['班组1', '班组2', '班组3', '班组4', '班组5', '班组6', '班组7', '班组8', '班组9', '班组10'], + yData: [38, 60, 40, 55, 42, 39, 45, 40, 63, 38], + }, document.getElementById("manpowerAttendance")) // }) // IQC - multipleVerticalBarChartTwo(null, document.getElementById("IQCOne")) - IQCTwo.loadData([[1, 2, 3, 4, 5], [1, 2, 3, 4, 5], [1, 2, 3, 4, 5], [1, 2, 3, 4, 5]], Object.keys(["编号", "计划数量", "完成数量", "差异值", "时间"])) - hollowPieChart(null, document.getElementById("IQCThree")) - barChartAndLineChartTwo(null, document.getElementById("IQCFour")) + horizontalRoundedBarChartWithBackgroundTwo(null, document.getElementById("IQC")) // 设备功率 - singleVerticalBarChart(null, document.getElementById("equipmentPowerOne")) - singleVerticalBarChart(null, document.getElementById("equipmentPowerTwo")) + singleVerticalBarChart(null, document.getElementById("equipmentPower")) // 生产效率 // autoUpdate(url + "/ ", INTERVAL, data => { - horizontalRoundedBarChartWithBackgroundTwo(null, document.getElementById("productionEfficiency")) + singleVerticalBarChart(null, document.getElementById("productionEfficiency")) // }) // 成品入库统计 percentageRingDiagram(null, document.getElementById("mainData")) }) +const today = () => { + const currentYear = new Date().getFullYear().toString(); + const hasTimestamp = new Date() - new Date(currentYear); + const hasDays = Math.ceil(hasTimestamp / 86400000); + return hasDays +} + +const curWeek = () => { + let today = new Date(); + let firstDayOfYear = new Date(today.getFullYear(), 0, 1); + let dayOfWeek = firstDayOfYear.getDay(); + let spendDay = 1; + if (dayOfWeek != 0) { + spendDay = 7 - dayOfWeek + 1; + } + firstDayOfYear = new Date(today.getFullYear(), 0, spendDay); + let d = Math.ceil((today.valueOf() - firstDayOfYear.valueOf()) / 86400000); + return Math.ceil(d / 7); +} + const moduleTitle = () => { const html = ` 订单可视化、6S 及安全生产看板 - 班组生产6S - 成品入库数量统计 - - 成品入库统计 - 问题 - 安全生产 + 第${curWeek()}周 班组6S排行榜 + 三日订单执行情况 + 当日订单入库统计 + 安全生产 + 质量分析(TOP3) + 重点工序质量监控 ` $('body').append(html) } -const safe = () => { + +const safe = (el) => { const html = ` - 1809天 - QSR连续安全生产天数 + ${today()}天 + QSR连续安全生产天数 ` - $('body').append(html) + $(el).html(html) } -const card = (val = {top: 1, left: 1}) => { + +const card = (val = {top: 1, left: 1,title:'',name1:'',value1:'',name2:'',value2:'',name3:'',value3:''},el) => { const html = `
- KTTX-1 + ${val.title}
- 项目名称111: + ${val.name1} - 值111 + ${val.value1}
- 项目名称111: + ${val.name2} - 值111 + ${val.value2}
- 项目名称111: + ${val.name3} - 值111 + ${val.value2}
` - $('body').append(html) + $(el).html(html) +} + +const Tips = (val1 = 0, val2 = 0, val3 = 0, el) => { + const html = ` + 订单数量：${val1}  完成数量：${val2}  清单率：${val3}% + ` + $(el).html(html) +} + +const total = (val1 = 0, el) => { + const html = ` + 合计：${val1} + ` + $(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 c5912c4..1b48b4c 100644 --- a/ruoyi-admin/src/main/resources/static/js/echartsCommon.js +++ b/ruoyi-admin/src/main/resources/static/js/echartsCommon.js @@ -141,7 +141,7 @@ const horizontalRoundedBarChartWithBackgroundTwo = function (data, id) { let charts = echarts.init(id); if (!data) { data = { - yNameOne: ["设备001", "设备001", "设备001", "设备001", "设备001", "设备001", "设备001", "设备001", "设备001"], + yNameOne: ["设备000000001", "设备000000001", "设备000000001", "设备000000001", "设备000000001", "设备000000001", "设备000000001", "设备000000001", "设备000000001"], yData: [41, 99, 32, 41, 24, 4, 16, 64, 18], xDataName: "达成率", } @@ -154,7 +154,7 @@ const horizontalRoundedBarChartWithBackgroundTwo = function (data, id) { let option = { grid: { left: "0%", - right: "12%", + right: "5%", bottom: "0%", top: "0%", containLabel: true, @@ -716,9 +716,9 @@ const barChartAndLineChartThree = function (data, id) { barBorderRadius: 5, color: function (val) { console.log() - if (data.yDataOne[val.dataIndex] >=data.yDataTwo[val.dataIndex]){ + if (data.yDataOne[val.dataIndex] >= data.yDataTwo[val.dataIndex]) { return '#30e391' - }else{ + } else { return '#FE70A6' } // return "#0D81ED" @@ -737,7 +737,7 @@ const barChartAndLineChartThree = function (data, id) { symbolSize: 6, lineStyle: { normal: { - width:3, + width: 3, color: '#fff', }, borderColor: "#f0f", @@ -750,9 +750,9 @@ const barChartAndLineChartThree = function (data, id) { fontSize: 0.75 * vw }, }, - itemStyle:{ + itemStyle: { color: '#F2D770', - border:0, + border: 0, }, // tooltip: { // show: false @@ -798,12 +798,12 @@ const barChartAndLineChartFour = function (data, id) { } }, textStyle: { - width:30, + width: 30, fontSize: 0.5 * vw, } }, legend: { - itemWidth:3*vw, + itemWidth: 3 * vw, data: [data.yDataOneName, data.yDataTwoName, data.yDataThreeName], textStyle: { color: "#d1e6eb", @@ -879,9 +879,9 @@ const barChartAndLineChartFour = function (data, id) { normal: { color: function (val) { console.log() - if (data.yDataTwo[val.dataIndex] < data.yDataThree[val.dataIndex]){ + if (data.yDataTwo[val.dataIndex] < data.yDataThree[val.dataIndex]) { return '#30e391' - }else{ + } else { return '#FE70A6' } // return "#0D81ED" @@ -1072,7 +1072,7 @@ const verticalBarChart = function (data, id) { fontSize: 0.8 * vw, color: '#fff' }, - formatter:`{c}次` + formatter: `{c}次` }, itemStyle: { normal: { @@ -1598,6 +1598,7 @@ const singleVerticalBarChartTwo = function (data, id) { bottom: "15%", right: "5%" }, + dataZoom: [], xAxis: { nameTextStyle: { color: '#c0c3cd', @@ -1711,6 +1712,36 @@ const singleVerticalBarChartTwo = function (data, id) { zlevel: 4, }], }; + if (data.xName.length > 10) { + option.dataZoom.push({ + show: false, + type: 'slider', + bottom: '0%', + xAxisIndex: 0, + height: 12, + start: 0, + end: 1 / (data.xName.length / 11) * 100, + textStyle: { + fontSize: 0, + color: 'rgba(0,0,0,0)' + } + }) + + 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) + } charts.setOption(option); @@ -2081,38 +2112,28 @@ const hollowPieChart = function (data, id) { // 多个环形图 const percentageRingDiagram = function (data, id) { let charts = echarts.init(id); - if (!data) { - data = [ + data ??= [ { - name: "数据1", + name: "内胆检漏", value: 54, }, { - name: "数据1", + name: "安全检测", value: 44, }, { - name: "数据1", + name: "成品检漏", value: 35, }, { - name: "数据1", + name: "测温性能", value: 30, }, { - name: "数据1", + name: "成品外观", value: 44, }, - { - name: "数据1", - value: 35, - }, - { - name: "数据1", - value: 30, - }, ]; - } let titleArr = [], seriesArr = []; @@ -2130,8 +2151,8 @@ const percentageRingDiagram = function (data, id) { data.forEach(function (item, index) { titleArr.push({ text: item.name, - x: index > 3 ? (index - 4) * 25 + 10 + "%" : index * 25 + 10 + "%", - y: index > 3 ? "90%" : "40%", + x: index > 2 ? (index - 3) * 25 + 30 + "%" : index * 25 + 20 + "%", + y: index > 2 ? "93%" : "43%", // top: '65%', textAlign: "center", textStyle: { @@ -2161,8 +2182,8 @@ const percentageRingDiagram = function (data, id) { }, hoverAnimation: false, center: [ - index > 3 ? (index - 4) * 25 + 10 + "%" : index * 25 + 10 + "%", - index > 3 ? "75%" : "25%", + index > 2 ? (index - 3) * 25 + 30 + "%" : index * 25 + 20 + "%", + index > 2 ? "75%" : "25%", ], data: [ { diff --git a/ruoyi-admin/src/main/resources/templates/broad/box.html b/ruoyi-admin/src/main/resources/templates/broad/box.html index f7338e1..e24fe9e 100644 --- a/ruoyi-admin/src/main/resources/templates/broad/box.html +++ b/ruoyi-admin/src/main/resources/templates/broad/box.html @@ -310,6 +310,7 @@ +
@@ -405,6 +406,13 @@ const rowName1 = '内胆集存库' const rowName2 = '箱壳集存库' $(() => { + + function flash() { + location.reload() + } + + setCronTak(flash, "* 30 7,19 * * * *"); + let url = '/broad/box' //生产计划工单 autoUpdate(url+"/getProductPlanInfo ", INTERVAL, data => { @@ -466,10 +474,6 @@ name: '数量', data: data.map(value => value.qty), }, - // { - // name: '数量_', - // data: data['seriesInfo'], - // } ] }) }) @@ -752,16 +756,6 @@ }, }, }, - // { - // name: '数量_', - // type: 'pictorialBar', - // silent: true, - // symbolSize: ["78.3%", 4], - // symbolOffset: [0, -2], - // symbolPosition: 'end', - // z: 12, - // color: '#0D8B41', - // }, ], grid: { left: 10, @@ -833,7 +827,6 @@ }, // interval: 10, min: 0, - // max: 30, } ], series: [ @@ -870,17 +863,6 @@ }, }, }, - // { - // name: '数量_', - // type: 'pictorialBar', - // silent: true, - // symbolSize: ["78.3%", 4], - // symbolOffset: [0, -2], - // symbolPosition: 'end', - // z: 12, - // color: '#BBAA0F', - // // data: data4, - // }, ], grid: { left: 10, diff --git a/ruoyi-admin/src/main/resources/templates/broad/finalAssemblyProductionData.html b/ruoyi-admin/src/main/resources/templates/broad/finalAssemblyProductionData.html index f140917..05a7175 100644 --- a/ruoyi-admin/src/main/resources/templates/broad/finalAssemblyProductionData.html +++ b/ruoyi-admin/src/main/resources/templates/broad/finalAssemblyProductionData.html @@ -52,6 +52,8 @@
+
+