diff --git a/ruoyi-admin/src/main/java/com/ruoyi/web/controller/broad/AllBroadHTMLController.java b/ruoyi-admin/src/main/java/com/ruoyi/web/controller/broad/AllBroadHTMLController.java index d5e4192..fe55ac8 100644 --- a/ruoyi-admin/src/main/java/com/ruoyi/web/controller/broad/AllBroadHTMLController.java +++ b/ruoyi-admin/src/main/java/com/ruoyi/web/controller/broad/AllBroadHTMLController.java @@ -53,6 +53,11 @@ public class AllBroadHTMLController { public String orderVisualization() { return "broad/orderVisualization"; } + //5 周 + @GetMapping("/week") + public String week() { + return "broad/week"; + } 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 b18cd91..98eb5cf 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: 40%; + height: 35%; top: 15%; left: 3.4%; } @@ -21,7 +21,7 @@ body { .orderQuantityFulfillmentRateOfTheDay { position: absolute; width: 30%; - height: 40%; + height: 35%; top: 15%; left: 35%; } @@ -29,15 +29,15 @@ body { .statisticOfAttribute{ position: absolute; width: 30%; - height: 30%; - top: 25%; + height: 22%; + top: 29%; left: 66.5%; } .monitoring{ position: absolute; width: 30%; - height: 15%; - top: 60%; + height: 15.5%; + top: 59%; left: 35.5%; } @@ -61,8 +61,8 @@ body { .distributionOfBadTypesInProductionLineByDay{ position: absolute; width: 30%; - height: 30%; - top: 65%; + height: 35%; + top: 60%; left: 66.6%; } @@ -71,7 +71,7 @@ body { position: absolute; width: 3%; height: 8%; - top: 15%; + top: 25%; left: 30%; font-size: 0.8vw; border-radius: 5px; @@ -90,6 +90,6 @@ body { background-color: #2C95FD; color:#C2D8FF; } -.orderQuantityFulfillmentRateOfTheDay .autoscroll-table .autoscroll-table_tbody tr td:nth-child(n+1){ +.orderQuantityFulfillmentRateOfTheDay .autoscroll-table .autoscroll-table_tbody tr td:nth-child(5n+2){ text-align: left; } \ 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 new file mode 100644 index 0000000..9de3227 --- /dev/null +++ b/ruoyi-admin/src/main/resources/static/css/board/week.css @@ -0,0 +1,47 @@ +body { + height: auto; + width: auto; + background: url(../../img/board/week/backgroundImg.jpg) no-repeat center fixed; + -webkit-background-size: cover; + -moz-background-size: cover; + -o-background-size: cover; + background-size: 100% 100%; + color: rgba(255, 255, 255, .95); + font: normal 100% Arial, sans-serif; +} + +.manpowerAttendance{ + position: absolute; + width: 25%; + height: 35%; + top: 15%; + left: 71.5%; +} +.IQC{ + position: absolute; + width: 40%; + height: 35%; + top: 15%; + left: 30%; +} +.productionEfficiency{ + position: absolute; + width: 25%; + height: 35%; + 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%; +} \ No newline at end of file diff --git a/ruoyi-admin/src/main/resources/static/img/board/week/backgroundImg.jpg b/ruoyi-admin/src/main/resources/static/img/board/week/backgroundImg.jpg new file mode 100644 index 0000000..af68f23 Binary files /dev/null and b/ruoyi-admin/src/main/resources/static/img/board/week/backgroundImg.jpg differ 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 e583712..9ea7f8c 100644 --- a/ruoyi-admin/src/main/resources/static/js/board/beforeLibrary.js +++ b/ruoyi-admin/src/main/resources/static/js/board/beforeLibrary.js @@ -1,12 +1,14 @@ $(() => { moduleTitle() + moduleOne() + moduleTwo() // 公共请求地址 let url = '/broad/beforeLibrary' const INTERVAL = 30000 // 订单详情 - const orderDetailsTable = new AutoScrollTable(document.getElementById("orderQuantityFulfillmentRateOfTheDay"), ["编号", "型号", "计划数量", "完成数量", "差异值"], {width: ['13%', '40%', null, null, '9%']}) + const orderDetailsTable = new AutoScrollTable(document.getElementById("orderQuantityFulfillmentRateOfTheDay"), ["编号", "型号", "计划数量", "完成数量", "差异值"], {width: ['13%', '40%', null, null, '9%']},8) // 成品质量详情 const PropertyInsuranceOneDayOrderInfoTable = new AutoScrollTable(document.getElementById("PropertyInsuranceOneDayOrderInfo"), ["检测项", "质量缺陷", "数量",'占比'], {width: ['30%', null, null, null]}) @@ -161,16 +163,7 @@ $(() => { }, ], 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) }) @@ -179,11 +172,13 @@ const moduleTitle = () => { const html = ` 生产订单及质量可视化平台 成品产量 - 当日订单数量达成率 - 重点工序质量监控 - 成品入库统计 - 质量问题分析 - 质量不良类型分布 + 三日订单执行情况 + LOSS（分钟） + 入库设定节拍（秒） + LOSS分类 + 成品入库统计 + 重点工序质量监控 + 质量不良类型分布 ` $('body').append(html) } @@ -191,7 +186,7 @@ const moduleTitle = () => { let yieldType = '0' const TipsTop = (el) => { const html = ` - 目标：${targetTop.tips}  进度目标：${targetTop.progress}  实际：${targetTop.reality}  差异：${targetTop.gap}  达成率：${targetTop.rate}% + 目标：${targetTop.tips}  进度目标：${targetTop.progress}  实际：${targetTop.reality}  达成率：${targetTop.rate}% ` $(el).html(html) } @@ -218,14 +213,28 @@ const targetTop = new Proxy(targetTopRaw, targetTopProxy) const LOSS = (val = 0) => { const html = ` - ${val} + ${val} ` $('#LOSS').html(html) } // 节拍 const jp = (val = 0) => { const html = ` - ${val} + ${val} ` $('#jp').html(html) } + +const moduleOne = (val = 0) => { + const html = ` + 订单数量：1 完成数量： 1 清单率：1% + ` + $('#moduleOne').html(html) +} + +const moduleTwo = (val = 0) => { + const html = ` + 合计：1 + ` + $('#moduleTwo').html(html) +} diff --git a/ruoyi-admin/src/main/resources/static/js/board/week.js b/ruoyi-admin/src/main/resources/static/js/board/week.js new file mode 100644 index 0000000..3c2ee1c --- /dev/null +++ b/ruoyi-admin/src/main/resources/static/js/board/week.js @@ -0,0 +1,190 @@ +$(() => { + moduleTitle() + safe('#safe') + importData('#importData') + // 公共请求地址 + let url = '/broad/mtk' + + // 轮询间隔时间 + const INTERVAL = 30000 + + //每日人力出勤轮询 + autoUpdate(url + "/team6s ", INTERVAL, data => { + data ??= [ + { + teamName: '班组1', + teamNumber: 72, + path: '' + }, + { + teamName: '班组2', + teamNumber: 52, + path: '' + }, + { + teamName: '班组3', + teamNumber: 72, + path: '' + }, + { + teamName: '班组4', + teamNumber: 29, + path: '' + }, + { + teamName: '班组5', + teamNumber: 82, + path: '' + }, + { + teamName: '班组6', + teamNumber: 82, + path: '' + }, + { + teamName: '班组7', + teamNumber: 28, + path: '' + }, + { + teamName: '班组8', + teamNumber: 62, + path: '' + }, + { + teamName: '班组9', + teamNumber: 82, + path: '' + }, + { + teamName: '班组10', + teamNumber: 38, + path: '' + }, + { + teamName: '班组11', + teamNumber: 93, + path: '' + }, + ] + data.sort((a, b) => { + return b.teamNumber - a.teamNumber + }) + singleVerticalBarChartTwo({ + xName: data.map(val => val.teamName), + yData: data.map(val => val.teamNumber), + yImg: data.map(val => val.path), + }, document.getElementById("manpowerAttendance")) + }) + + // 三日订单执行情况 + autoUpdate(url + "/selectOrderInfoBy3d", INTERVAL, data => { + // console.log(data) + horizontalRoundedBarChartWithBackgroundTwo({ + yNameOne: data.map(val => val.name), + yData: data.map(val => val.rate), + status:data.map(val => val.qty), + xDataName: "达成率", + }, document.getElementById("IQC")) + }) + + autoUpdate(url + "/mtk_selectOrderInfoBy3dTatle", INTERVAL, data => { + 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') + }) + + + // 当日订单入库统计 + autoUpdate(url + "/selectInstoreNumByday", INTERVAL, data => { + singleVerticalBarChart({ + xName: data.map(val => val.name), + yData: data.map(val => val.qty), + }, document.getElementById("productionEfficiency"), -20) + }) + + + // 当日订单入库统计 + autoUpdate("/broad/beforeLibrary/selectQualityInfo", INTERVAL, data => { + pieChart(data.map(val => { + return { + name: val.type, + value: val.qty + } + + }), document.getElementById("equipmentPower")); + }) + + autoUpdate(url + "/selectInstoreNumByday", INTERVAL, data => { + multipleVerticalBarChartTwo({ + xName: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'], + yDataOne: [22, 52, 55, 12, 35, 44, 66], + yDataOneName: '项目1', + yDataTwo: [32, 42, 50, 22, 30, 40, 52], + yDataTwoName: "项目2", + }, document.getElementById("topLeft"), -20) + }) + + +}) +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) + 1); +} + +const moduleTitle = () => { + const html = ` + 订单可视化及安全生产平台 + 第${curWeek()}周 班组6S排行榜 + 三日订单执行情况 + 当日订单入库统计 + 安全生产 + 质量分析(TOP3) + 重点工序质量监控 + ` + $('body').append(html) +} + +const safe = (el) => { + const html = ` + ${new Date().getFullYear().toString()}年连续安全生产天数 + ${today()}天 + 智能冷柜互联工厂 + ` + $(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) +} +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 e4ca637..2bb50ef 100644 --- a/ruoyi-admin/src/main/resources/static/js/echartsCommon.js +++ b/ruoyi-admin/src/main/resources/static/js/echartsCommon.js @@ -980,14 +980,14 @@ const pieChart = function (data, id) { { name: "访问来源", type: "pie", - radius: "90%", + radius: "70%", center: ["50%", "50%"], color: ["rgb(131,249,103)", "#FBFE27", "#FE5050", "#1DB7E5"], //'#FBFE27','rgb(11,228,96)','#FE5050' data: data, - roseType: "radius", + // roseType: "radius", label: { normal: { - formatter: "{b|{b}} {c|{c}次}", + formatter: "{b|{b}} \n {c|{c}次}", rich: { c: { color: "rgb(241,246,104)", @@ -1013,8 +1013,8 @@ const pieChart = function (data, id) { color: "rgb(98,137,169)", }, smooth: true, - length: 0, - length2: 10, + length: 20, + length2: 20, }, }, }, @@ -1386,7 +1386,7 @@ const multipleVerticalBarChart = function (data, id) { charts.setOption(option); $(window).resize(charts.resize); } -const multipleVerticalBarChartTwo = function (data, id) { +const multipleVerticalBarChartTwo = function (data, id,rotate = 0) { let charts = echarts.init(id); if (!data) { data = { @@ -1423,6 +1423,8 @@ const multipleVerticalBarChartTwo = function (data, id) { type: 'category', axisTick: {show: false}, axisLabel: { + rotate:rotate, + margin:20, textStyle: { fontSize: 0.75 * vw, color: "#F1F1F3", @@ -2359,7 +2361,7 @@ const percentageRingDiagramTwo = function (data, id) { titleArr.push({ text: item.name, x: index > 4 ? (index - 5) * 20 + 10 + "%" : index * 20 + 10 + "%", - y: '80%', + y: '85%', // top: '65%', textAlign: "center", textStyle: { diff --git a/ruoyi-admin/src/main/resources/templates/broad/beforeLibrary.html b/ruoyi-admin/src/main/resources/templates/broad/beforeLibrary.html index c64fed0..9bdba0a 100644 --- a/ruoyi-admin/src/main/resources/templates/broad/beforeLibrary.html +++ b/ruoyi-admin/src/main/resources/templates/broad/beforeLibrary.html @@ -27,12 +27,10 @@ -
-
当班
-
当日
-
+
+
diff --git a/ruoyi-admin/src/main/resources/templates/broad/week.html b/ruoyi-admin/src/main/resources/templates/broad/week.html new file mode 100644 index 0000000..d0d799c --- /dev/null +++ b/ruoyi-admin/src/main/resources/templates/broad/week.html @@ -0,0 +1,54 @@ + + + + + + 箱壳成型数据监控平台 + + + + + + + + + + + + + + + + + + + + +
+
+
+
+
+ + +
+ + +
+ + +
+ + + +
+ + +
+ + + + \ No newline at end of file