From 140db44f231be0b94defe2f5e0769bb9df65e58b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A4=9C=E7=AC=99=E6=AD=8C?= <2277317060@qq.com> Date: Thu, 21 Jul 2022 17:03:33 +0800 Subject: [PATCH] =?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 --- .../js/board/finalAssemblyProductionData.js | 150 ++++++++++++------ .../main/resources/static/js/echartsCommon.js | 58 +++---- .../broad/finalAssemblyProductionData.html | 4 +- 3 files changed, 119 insertions(+), 93 deletions(-) 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 81ce55a..2b07486 100644 --- a/ruoyi-admin/src/main/resources/static/js/board/finalAssemblyProductionData.js +++ b/ruoyi-admin/src/main/resources/static/js/board/finalAssemblyProductionData.js @@ -1,54 +1,107 @@ $(() => { moduleTitle() LOSS() - yieldTabs() Tips() // 公共请求地址 - let url = '/broad/box' + let url = '/broad/zz' const INTERVAL = 30000 - // LOSS(分类) - autoUpdate(url + "/getProductPlanInfo ", INTERVAL, data => { - verticalBarChart(null, document.getElementById("LOSSClassify")); - }) + const request = () => { + // 目标 + $.post(url + "/selectProductInByTeam/0", {}, data => { + data = JSON.parse(data) + if (isFirst) { + target.top = data.map(val => val.val) + target.bottom = data.val + request() + isFirst = false + } + }) + // LOSS(分类) + $.post(url + "/selectProductInByTeam/0", {}, data => { + data = JSON.parse(data) + LOSS() + verticalBarChart({ + xName: [">10分钟", "3-10分钟", "0-3分钟"], + yData: [254, 3254, 1654], + }, document.getElementById("LOSSClassify")); + }) + // 产量 + $.post(url + `/selectProductInByTeam/${yieldType}`, {}, data => { + data = JSON.parse(data) + barChartAndLineChartThree({ + xName: data.map(val => val.name), + yDataOne: data.map(val => val.qty), + yDataOneName: "实际产量", + yDataTwo: target.top, + yDataTwoName: "目标产量", + }, document.getElementById("yield")); + }) - // 产量 - autoUpdate(url + "/getProductPlanInfo ", INTERVAL, data => { - barChartAndLineChartThree(null, document.getElementById("yield")); - }) + // 一次装配不合格率 + $.post(url + `/selectProductInByTeam/${yieldType}`, {}, data => { + data = JSON.parse(data) + barChartAndLineChartFour({ + xName: data.map(val => val.name), + yDataOne: data.map(val => val.qty), + yDataOneName: "不良数", + yDataTwo: [9, 3, 7, 7, 7, 2, 7, 1, 6, 7, 2, 1, 5], + yDataTwoName: "一次装配不合格率", + yDataThree: target.bottom, + yDataThreeName: "目标", + }, document.getElementById("fractionDefective")); + }) - // 一次装配不合格率 - autoUpdate(url + "/getProductPlanInfo ", INTERVAL, data => { - barChartAndLineChartFour(null, document.getElementById("fractionDefective")); - }) - - //追踪事件轮询 - autoUpdate(url + "/getProductPlanInfo ", INTERVAL, data => { - $('#trackEvents').remove() - $('.trackEventsScrollTable').html('
') - dynamicTable({ - el: '#trackEvents', - rowNum: 5, - timeout: 0, - header: [ "编号", "计划数量", "完成数量", "差异值", "时间"], - data: data.map(value => [value.plan_code, 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: ['30%', '13%', '13%', '14%', '30%'] - }); - }) + //追踪事件轮询 + $.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]), + 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: ['30%', '13%', '13%', '14%', '30%'] + }); + }) + } + const yieldTabs = () => { + $('#yieldTabs div').click(function () { + yieldType = $(this).attr('type') + $(this).css({backgroundColor: '#2C95FD', color: '#C2D8FF'}) + $(this).siblings().css({backgroundColor: '#C2D8FF', color: '#2C95FD'}) + request() + }) + } + request() + yieldTabs() tableAnimation('#trackEvents') + setInterval(request, INTERVAL) + + }) -let yieldType = '1' -const LOSS = () => { +let yieldType = '0' +let isFirst = true +let target = { + top: [382, 102, 186, 200, 102, 186, 315, 1, 1, 1, 1], + bottom: [3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3], + topTips: '2000', + bottomTips: '3.05', +} +const LOSS = (val1=0,val2=24) => { const html = ` - 123.32 - 123 + ${val1} + ${val2} ` $('body').append(html) } @@ -57,24 +110,17 @@ const moduleTitle = () => { 总装生产数据及质量数据 LOSS（分钟） 标准节拍（秒） - 入库量 - 外观检测 + 成品产量 + 一次装配不合格率 LOSS分类 - 外观质量问题 + 入库订单 ` $('body').append(html) } -const yieldTabs = () => { - $('#yieldTabs div').click(function () { - yieldType = $(this).attr('type') - $(this).css({backgroundColor: '#2C95FD', color: '#C2D8FF'}) - $(this).siblings().css({backgroundColor: '#C2D8FF', color: '#2C95FD'}) - }) -} -const Tips = () => { +const Tips = (top={target:target.topTips,progress:0,reality:0,gap:0,rate:0},bottom={target:target.bottomTips,reality:0,total:0}) => { const html = ` - 目标：2000 进度目标：1500 实际：1000 差异：500 达成率：66% - 目标：3.05% 实际：2.16% 累计不良数：40 + 目标：${top.target} 进度目标：${top.progress} 实际：${top.reality} 差异：${top.gap} 达成率：${top.rate}% + 目标：${bottom.target}% 实际：${bottom.reality}% 累计不良数：${bottom.total} ` $('body').append(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 4717261..6b5b196 100644 --- a/ruoyi-admin/src/main/resources/static/js/echartsCommon.js +++ b/ruoyi-admin/src/main/resources/static/js/echartsCommon.js @@ -714,9 +714,14 @@ const barChartAndLineChartThree = function (data, id) { itemStyle: { normal: { barBorderRadius: 5, - color: function (data) { - console.log(data.dataIndex) - return "#0D81ED" + color: function (val) { + console.log() + if (data.yDataOne[val.dataIndex] >=data.yDataTwo[val.dataIndex]){ + return '#30e391' + }else{ + return '#FE70A6' + } + // return "#0D81ED" }, }, }, @@ -732,16 +737,8 @@ const barChartAndLineChartThree = function (data, id) { symbolSize: 6, lineStyle: { normal: { - color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ - { - offset: 0, - color: "#8fb9d7", - }, - { - offset: 1, - color: "#0F59E6", - }, - ]), + width:3, + color: '#fff', }, borderColor: "#f0f", }, @@ -760,31 +757,6 @@ const barChartAndLineChartThree = function (data, id) { // tooltip: { // show: false // }, - areaStyle: { - //区域填充样式 - normal: { - //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。 - color: new echarts.graphic.LinearGradient( - 0, - 0, - 0, - 1, - [ - { - offset: 0, - color: "rgba(12,120,249,0.4)", - }, - { - offset: 1, - color: "rgba(0,0,0, 0)", - }, - ], - false - ), - shadowColor: "rgba(53,142,215, 0.9)", //阴影颜色 - shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。 - }, - }, data: data.yDataTwo || [], }, ], @@ -905,7 +877,15 @@ const barChartAndLineChartFour = function (data, id) { }, itemStyle: { normal: { - color: '#0BB5FB', + color: function (val) { + console.log() + if (data.yDataTwo[val.dataIndex] < data.yDataThree[val.dataIndex]){ + return '#30e391' + }else{ + return '#FE70A6' + } + // return "#0D81ED" + }, }, }, }, diff --git a/ruoyi-admin/src/main/resources/templates/broad/finalAssemblyProductionData.html b/ruoyi-admin/src/main/resources/templates/broad/finalAssemblyProductionData.html index 5fa9806..0d111c0 100644 --- a/ruoyi-admin/src/main/resources/templates/broad/finalAssemblyProductionData.html +++ b/ruoyi-admin/src/main/resources/templates/broad/finalAssemblyProductionData.html @@ -34,8 +34,8 @@
-
当班
-
当日
+
当班
+
当日