From 68717e9a04434df66275ca02a7b9d6dae44c6244 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A4=9C=E7=AC=99=E6=AD=8C?= <2277317060@qq.com> Date: Mon, 25 Jul 2022 17:19:13 +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 --- .../static/css/board/beforeLibrary.css | 58 ++++-- .../css/board/finalAssemblyProductionData.css | 2 +- .../static/js/board/beforeLibrary.js | 175 ++++++++++++++++-- .../static/js/board/orderVisualization.js | 9 +- .../templates/broad/beforeLibrary.html | 10 + .../templates/broad/orderVisualization.html | 1 + 6 files changed, 225 insertions(+), 30 deletions(-) diff --git a/ruoyi-admin/src/main/resources/static/css/board/beforeLibrary.css b/ruoyi-admin/src/main/resources/static/css/board/beforeLibrary.css index 58591c9..86bc417 100644 --- a/ruoyi-admin/src/main/resources/static/css/board/beforeLibrary.css +++ b/ruoyi-admin/src/main/resources/static/css/board/beforeLibrary.css @@ -13,7 +13,7 @@ body { .orderDetails { position: absolute; width: 30.2%; - height: 20%; + height: 40%; top: 15%; left: 3.4%; } @@ -21,7 +21,7 @@ body { .orderQuantityFulfillmentRateOfTheDay { position: absolute; width: 30%; - height: 20%; + height: 40%; top: 15%; left: 35%; } @@ -29,32 +29,64 @@ body { .statisticOfAttribute{ position: absolute; width: 30%; - height: 21%; - top: 15%; + height: 30%; + top: 25%; left: 66.5%; } +.monitoring{ + position: absolute; + width: 30%; + height: 15%; + top: 60%; + left: 35.5%; +} .FinishedGoodsWarehousingStatisticsByHour{ position: absolute; - width: 93%; - height: 21.5%; - top: 44%; + width: 30%; + height: 35%; + top: 60%; left: 3.3%; + } .PropertyInsuranceOneDayOrderInfo { position: absolute; - width: 61.8%; - height: 21%; - top: 74%; - left: 3.4%; + width: 30%; + height: 20%; + top: 75%; + left: 35%; } .distributionOfBadTypesInProductionLineByDay{ position: absolute; width: 30%; - height: 20%; - top: 74%; + height: 35%; + top: 60%; left: 66.6%; +} + +.yieldTabs{ + position: absolute; + width: 3%; + height: 8%; + top: 15%; + left: 30%; + font-size: 0.8vw; + border-radius: 5px; + background-color: #C2D8FF; + color: #2C95FD; + text-align: center; + z-index: 1; +} +.typeOne,.typeTwo{ + width: 100%; + height: 50%; + line-height: calc(8vh / 2); + cursor: pointer; +} +.typeOne{ + background-color: #2C95FD; + color:#C2D8FF; } \ No newline at end of file diff --git a/ruoyi-admin/src/main/resources/static/css/board/finalAssemblyProductionData.css b/ruoyi-admin/src/main/resources/static/css/board/finalAssemblyProductionData.css index 8a05c2f..a551f64 100644 --- a/ruoyi-admin/src/main/resources/static/css/board/finalAssemblyProductionData.css +++ b/ruoyi-admin/src/main/resources/static/css/board/finalAssemblyProductionData.css @@ -29,7 +29,7 @@ body { color: #2C95FD; text-align: center; } -.typeOne,.typeTwo,.typeThree{ +.typeOne,.typeTwo{ width: 100%; height: 50%; line-height: calc(8vh / 2); diff --git a/ruoyi-admin/src/main/resources/static/js/board/beforeLibrary.js b/ruoyi-admin/src/main/resources/static/js/board/beforeLibrary.js index 257d2b7..fba1519 100644 --- a/ruoyi-admin/src/main/resources/static/js/board/beforeLibrary.js +++ b/ruoyi-admin/src/main/resources/static/js/board/beforeLibrary.js @@ -6,24 +6,98 @@ $(() => { const INTERVAL = 30000 // 订单详情 - const orderDetailsTable = new AutoScrollTable(document.getElementById("orderDetails"), ["编号", "计划数量", "完成数量", "差异值", "时间"], {width: ['30%', null, null, null, '17%']}) + const orderDetailsTable = new AutoScrollTable(document.getElementById("orderQuantityFulfillmentRateOfTheDay"), ["编号", "计划数量", "完成数量", "差异值", "时间"], {width: ['30%', null, null, null, '17%']}) // 成品质量详情 const PropertyInsuranceOneDayOrderInfoTable = new AutoScrollTable(document.getElementById("PropertyInsuranceOneDayOrderInfo"), ["物料条码", "检测项", "质量缺陷", "标志", "时间"], {width: ['30%', null, null, null, '17%']}) //订单详情轮询 + 当日订单数量达成率轮询 - autoUpdate(url + "/selectOrderInfo ", INTERVAL, data => { + // 目标 + const request = async () => { + await $.post("/broad/zz/selectProductInTarget", {}, data => { + data = JSON.parse(data) + targetTop.tips = data.find(val => val.name == "进度目标").qty + }) + $.post(`/broad/zz/selectProductInByTeam/${yieldType}`, {}, data => { + data = JSON.parse(data) + // 实际 + targetTop.reality = data.map(val => val.qty).reduce((val1, val2) => val1 + val2, 0) + // 起始时间 + let oneTime = parseFloat(data[0].name.split(':')[0]) + // 横坐标 + let xName = [] + if (yieldType == 0) { + let arr = [] + for (let i = 0; i < 12; i++) { + arr.push(Math.ceil(targetTop.tips / 11)) + } + arr[3] = Math.ceil(targetTop.tips / 22) + arr[8] = Math.ceil(targetTop.tips / 22) + arr[0] = arr[0] - (arr.reduce((val1, val2) => val1 + val2, 0) - targetTop.tips) + targetTop.targetArr = arr + targetTop.progress = arr.slice(0, data.length).reduce((val1, val2) => val1 + val2, 0) + for (let i = 0; i < 12; i++) { + xName.push(`${(oneTime + i) % 24}:30`) + } + } else { + let arr = [] + for (let i = 0; i < 24; i++) { + arr.push(Math.ceil(targetTop.tips / 23)) + } + arr[8] = Math.ceil(targetTop.tips / 46) + arr[13] = Math.ceil(targetTop.tips / 46) + arr[0] = arr[0] - (arr.reduce((val1, val2) => val1 + val2, 0) - targetTop.tips) + targetTop.targetArr = arr + targetTop.progress = arr.slice(0, data.length).reduce((val1, val2) => val1 + val2, 0) + xName = ['0:00', '1:00', '2:00', '3:00', '4:00', '5:00', '6:00', '7:00', '8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'] + } + // 达成率 + if (targetTop.progress != 0) { + targetTop.rate = Number((targetTop.reality / targetTop.progress) * 100).toFixed(2) + } else { + targetTop.rate = 0 + } + targetTop.gap = targetTop.progress - targetTop.reality + barChartAndLineChartThree({ + xName: xName, + yDataOne: data.map(val => val.qty), + yDataOneName: "实际产量", + yDataTwo: targetTop.targetArr, + yDataTwoName: "目标产量", + }, document.getElementById("orderDetails")); + // horizontalRoundedBarChartWithBackground({ + // yName: data.map(value => value.plan_code), + // xData: data.map(value => value.rate), + // xDataName: "达成率", + // }, document.getElementById("orderQuantityFulfillmentRateOfTheDay")) + }) + + // LOSS(分类) + $.post("/broad/zz/selectLossInfo", {}, data => { + data = JSON.parse(data) + let LOSSOne = data.find(val => val.name == '1').qty + let LOSSTwo = data.find(val => val.name == '4').qty + LOSS(LOSSOne) + verticalBarChart({ + xName: ["0-3分钟", "3-10分钟", ">10分钟"], + yData: [data.find(val => val.name == '2').qty, data.find(val => val.name == '3').qty, LOSSTwo], + }, document.getElementById("statisticOfAttribute")); + }) + // 标准节拍 + $.post("/broad/zz/selectInStoreTag", {}, data => { + data = JSON.parse(data) + jp(data.qty) + }) + + } + autoUpdate(url + "/selectOrderInfo", INTERVAL, data => { orderDetailsTable.loadData(data.map(value => [value.plan_code, value.plan_number, value.actual_number, value.plan_number - value.actual_number, value.day]), Object.keys(["编号", "计划数量", "完成数量", "差异值", "时间"])) - horizontalRoundedBarChartWithBackground({ - yName: data.map(value => value.plan_code), - xData: data.map(value => value.rate), - xDataName: "达成率", - }, document.getElementById("orderQuantityFulfillmentRateOfTheDay")) + }) //成品入库统计轮询 autoUpdate(url + "/selectProductInStore ", INTERVAL, data => { - data.sort((a,b)=> { + data.sort((a, b) => { return b.qty - a.qty }) barChartAndLineChart({ @@ -47,19 +121,49 @@ $(() => { } }), document.getElementById("distributionOfBadTypesInProductionLineByDay")); - percentageRingDiagramTwo(null, document.getElementById("statisticOfAttribute")) - // barChartAndLineChart({ - // xName: data.map(val => val.name), - // yDataTwo: data.map(val => val.qty), - // yDataTwoName: "质量" - // }, document.getElementById("statisticOfAttribute")); }) + autoUpdate("/broad/mtk/selectQAZD", INTERVAL, data => { + percentageRingDiagramTwo([ + { + name: "内胆检漏", + value: data.find(val => val.name == '内胆检漏').rate, + }, + { + name: "安全检测", + value: data.find(val => val.name == '安全检测').rate, + }, + { + name: "成品检漏", + value: data.find(val => val.name == '成品检漏').rate, + }, + { + name: "测温性能", + value: data.find(val => val.name == '测温性能').rate, + }, + { + name: "成品外观", + value: data.find(val => val.name == '成品外观').rate, + }, + ], document.getElementById("monitoring")) + }) + 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() + setInterval(request, INTERVAL) }) + const moduleTitle = () => { const html = ` 生产订单及质量可视化平台 - 三日清单率 + 成品产量 当日订单数量达成率 重点工序质量监控 成品入库统计 @@ -69,3 +173,44 @@ const moduleTitle = () => { $('body').append(html) } +let yieldType = '0' +const TipsTop = (el) => { + const html = ` + 目标：${targetTop.tips}  进度目标：${targetTop.progress}  实际：${targetTop.reality}  差异：${targetTop.gap}  达成率：${targetTop.rate}% + ` + $(el).html(html) +} +let targetTopRaw = { + targetArr: [], + tips: 0, + progress: 0, + reality: 0, + gap: 0, + rate: 0, +} + +const targetTopProxy = { + get: function (target, key) { + return target[key]; + }, + set: function (target, key, value) { + target[key] = value; + TipsTop('#TipsTop') + } +} + +const targetTop = new Proxy(targetTopRaw, targetTopProxy) + +const LOSS = (val = 0) => { + const html = ` + ${val} + ` + $('#LOSS').html(html) +} +// 节拍 +const jp = (val = 0) => { + const html = ` + ${val} + ` + $('#jp').html(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 3d34c28..7ea7964 100644 --- a/ruoyi-admin/src/main/resources/static/js/board/orderVisualization.js +++ b/ruoyi-admin/src/main/resources/static/js/board/orderVisualization.js @@ -2,6 +2,7 @@ $(() => { moduleTitle() safe('#safe') importData('#importData') + top3Data('#top3Data') // 公共请求地址 let url = '/broad/mtk' card({ @@ -310,7 +311,7 @@ const curWeek = () => { const moduleTitle = () => { const html = ` - 订单可视化、6S 及安全生产看板 + 订单可视化及安全生产平台 第${curWeek()}周 班组6S排行榜 三日订单执行情况 当日订单入库统计 @@ -393,4 +394,10 @@ const importData = (el) => { 一次合格率 ` $(el).html(html) +} +const top3Data = (el) => { + const html = ` + 质量缺陷TOP10 + ` + $(el).html(html) } \ No newline at end of file diff --git a/ruoyi-admin/src/main/resources/templates/broad/beforeLibrary.html b/ruoyi-admin/src/main/resources/templates/broad/beforeLibrary.html index 876f9ff..c64fed0 100644 --- a/ruoyi-admin/src/main/resources/templates/broad/beforeLibrary.html +++ b/ruoyi-admin/src/main/resources/templates/broad/beforeLibrary.html @@ -27,6 +27,14 @@ +
+
当班
+
当日
+
+
+
+ +
@@ -45,6 +53,8 @@
+
+