修改界面

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";
+    }
 
 
 

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;
 }

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%;
+}

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 = `
     <span style="position: absolute;top: 0.9%;left: 50%;color: #fff;font-size: 1.3vw;transform: translateX(-50%);letter-spacing: 0.3vw">生产订单及质量可视化平台</span>
     <span style="position: absolute;top: 10%;left: 5.5%;color: #CFD2D0;font-size: 1.0vw">成品产量</span>
-    <span style="position: absolute;top: 10%;left: 37%;color: #CFD2D0;font-size: 1.0vw">当日订单数量达成率</span>
-    <span style="position: absolute;top: 10%;left: 68.5%;color: #CFD2D0;font-size: 1.0vw">重点工序质量监控</span>
-    <span style="position: absolute;top: 40%;left: 5.5%;color: #CFD2D0;font-size: 1.0vw">成品入库统计</span>
-    <span style="position: absolute;top: 69.5%;left: 5.5%;color: #CFD2D0;font-size: 1.0vw">质量问题分析</span>
-    <span style="position: absolute;top: 69.5%;left: 68.6%;color: #CFD2D0;font-size: 1.0vw">质量不良类型分布</span>
+    <span style="position: absolute;top: 10%;left: 37%;color: #CFD2D0;font-size: 1.0vw">三日订单执行情况</span>
+    <span style="position: absolute;top: 10.2%;left: 68.5%;color: #CFD2D0;font-size: 1.0vw">LOSS（分钟）</span>
+    <span style="position: absolute;top: 10.2%;left: 84%;color: #CFD2D0;font-size: 1.0vw">入库设定节拍（秒）</span>
+    <span style="position: absolute;top: 25%;left: 68.5%;color: #CFD2D0;font-size: 1.0vw">LOSS分类</span>
+    <span style="position: absolute;top: 54.3%;left: 5.5%;color: #CFD2D0;font-size: 1.0vw">成品入库统计</span>
+    <span style="position: absolute;top: 54.3%;left: 37%;color: #CFD2D0;font-size: 1.0vw">重点工序质量监控</span>
+    <span style="position: absolute;top: 54.3%;left: 68.6%;color: #CFD2D0;font-size: 1.0vw">质量不良类型分布</span>
     `
     $('body').append(html)
 }
@@ -191,7 +186,7 @@ const moduleTitle = () => {
 let yieldType = '0'
 const TipsTop = (el) => {
     const html = `
-    <span style="position: absolute;top: 10.3%;left: 11%;color: #fff;font-size: 0.8vw;">目标：${targetTop.tips}&nbsp;&nbsp;进度目标：${targetTop.progress}&nbsp;&nbsp;实际：${targetTop.reality}&nbsp;&nbsp;差异：${targetTop.gap}&nbsp;&nbsp;达成率：${targetTop.rate}% </span>
+    <span style="position: absolute;top: 10.3%;left: 13%;color: #fff;font-size: 0.8vw;">目标：${targetTop.tips}&nbsp;&nbsp;进度目标：${targetTop.progress}&nbsp;&nbsp;实际：${targetTop.reality}&nbsp;&nbsp;达成率：${targetTop.rate}% </span>
     `
     $(el).html(html)
 }
@@ -218,14 +213,28 @@ const targetTop = new Proxy(targetTopRaw, targetTopProxy)
 
 const LOSS = (val = 0) => {
     const html = `
-    <span style="position: absolute;top: 15.7%;left: 74.8%;color: #CFD2D0;font-size: 2vw;transform: translateX(-50%)">${val}</span>
+    <span style="position: absolute;top: 15.7%;left: 73.8%;color: #CFD2D0;font-size: 2vw;transform: translateX(-50%)">${val}</span>
     `
     $('#LOSS').html(html)
 }
 // 节拍
 const jp = (val = 0) => {
     const html = `
-    <span style="position: absolute;top: 15.7%;left: 91.5%;color: #CFD2D0;font-size: 2vw;transform: translateX(-50%)">${val}</span>
+    <span style="position: absolute;top: 15.7%;left: 89.5%;color: #CFD2D0;font-size: 2vw;transform: translateX(-50%)">${val}</span>
     `
     $('#jp').html(html)
 }
+
+const moduleOne = (val = 0) => {
+    const html = `
+    <span style="position: absolute;top: 10.1%;left: 56%;color: #CFD2D0;font-size: 1vw;transform: translateX(-50%)">订单数量：1  完成数量： 1  清单率：1%</span>
+    `
+    $('#moduleOne').html(html)
+}
+
+const moduleTwo = (val = 0) => {
+    const html = `
+    <span style="position: absolute;top: 54.3%;left: 21%;color: #CFD2D0;font-size: 1vw;transform: translateX(-50%)">合计：1 </span>
+    `
+    $('#moduleTwo').html(html)
+}

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 = `
+    <span style="position: absolute;top: 0.9%;left: 50%;color: #fff;font-size: 1.3vw;transform: translateX(-50%);letter-spacing: 0.3vw">订单可视化及安全生产平台</span>
+    <span style="position: absolute;top: 10%;left: 5.5%;color: #CFD2D0;font-size: 1.0vw">第${curWeek()}周 班组6S排行榜 </span>
+    <span style="position: absolute;top: 10%;left: 32%;color: #CFD2D0;font-size: 1.0vw">三日订单执行情况</span>
+    <span style="position: absolute;top: 10%;left: 73.5%;color: #CFD2D0;font-size: 1.0vw">当日订单入库统计</span>
+    <span style="position: absolute;top: 54.5%;left: 5.5%;color: #CFD2D0;font-size: 1.0vw">安全生产</span>
+    <span style="position: absolute;top: 54.5%;left: 32%;color: #CFD2D0;font-size: 1.0vw">质量分析(TOP3)</span>
+    <span style="position: absolute;top: 54.5%;left: 73.6%;color: #CFD2D0;font-size: 1.0vw">重点工序质量监控</span>
+    `
+    $('body').append(html)
+}
+
+const safe = (el) => {
+    const html = `
+    <span style="position: absolute;top: 66%;left: 84%;white-space:nowrap;color: #CBE6F7;font-size: 1.3vw;font-weight:600;transform: translateX(-50%);letter-spacing: 0.3vw">${new Date().getFullYear().toString()}年连续安全生产天数</span>
+    <span style="position: absolute;top: 74%;left: 84%;color: #08F580;font-size: 2.5vw;transform: translateX(-50%);letter-spacing: 0.3vw">${today()}<span style="font-size: 0.5vw">天</span> </span>
+    <span style="position: absolute;top: 89%;left: 84%;color: #CBE6F7;font-size: 1vw;transform: translateX(-50%);letter-spacing: 0.3vw">智能冷柜互联工厂</span>
+    `
+    $(el).html(html)
+}
+
+
+const Tips = (val1 = 0, val2 = 0, val3 = 0, el) => {
+    const html = `
+    <span style="position: absolute;top: 10%;left: 44%;color: #fff;font-size: 1vw;">订单数量：${val1}&nbsp;&nbsp;完成数量：${val2}&nbsp;&nbsp;清单率：${val3}%</span>
+    `
+    $(el).html(html)
+}
+
+const total = (val1 = 0, el) => {
+    const html = `
+    <span style="position: absolute;top: 10%;left: 85.7%;color: #fff;font-size: 1vw;">合计：${val1}</span>
+    `
+    $(el).html(html)
+}
+const importData = (el) => {
+    const html = `
+    <span style="position: absolute;top: 54.3%;left: 85.7%;color: #fff;font-size: 1vw;">一次合格率</span>
+    `
+    $(el).html(html)
+}

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: {

ruoyi-admin/src/main/resources/templates/broad/beforeLibrary.html

@@ -27,12 +27,10 @@
 </head>
 <body style="display:flex;">
 
-<div class="yieldTabs" id="yieldTabs">
-    <div class="typeOne" id="typeOne" type="0">当班</div>
-    <div class="typeTwo" id="typeTwo" type="1">当日</div>
-</div>
 <div id="LOSS"></div>
 <div id="jp"></div>
+<div class="moduleOne" id="moduleOne"></div>
+<div class="moduleTwo" id="moduleTwo"></div>
 
 <div class="monitoring" id="monitoring"></div>
 <!--订单详情-->

ruoyi-admin/src/main/resources/templates/broad/week.html

@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="zh" xmlns:th="http://www.thymeleaf.org">
+<head>
+    <meta charset="UTF-8">
+    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"
+          name="viewport">
+    <title>箱壳成型数据监控平台</title>
+    <meta content="箱壳成型数据监控平台" name="description">
+    <link href="../../static/css/board/week.css" rel="stylesheet" th:href="@{/css/board/week.css}"/>
+    <link href="../../static/css/materialdesignicons.min.css" rel="stylesheet"
+          th:href="@{/css/materialdesignicons.min.css}"/>
+    <link href="../../static/css/autoscroll-table.css" rel="stylesheet" th:href="@{/css/autoscroll-table.css}">
+    <!-- 360浏览器急速模式 -->
+    <meta content="webkit" name="renderer">
+    <!-- 避免IE使用兼容模式 -->
+    <meta content="IE=edge" http-equiv="X-UA-Compatible">
+    <script src="../../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
+    <th:block th:include="include :: footer"/>
+    <th:block th:include="include :: echarts-js"/>
+    <script src="../../static/js/date-time-common.js" th:src="@{/js/date-time-common.js}"></script>
+    <script src="../../static/js/autoscroll-table.js" th:src="@{/js/autoscroll-table.js}"></script>
+    <script src="../../static/js/echartsCommon.js" th:src="@{/js/echartsCommon.js}"></script>
+    <script src="../../static/js/update-split-blocks.js" th:src="@{/js/update-split-blocks.js}"></script>
+    <script src="../../static/js/auto-update.js" th:src="@{/js/auto-update.js}"></script>
+    <script src="../../static/js/data-merger.js" th:src="@{/js/data-merger.js}"></script>
+
+</head>
+<body style="display:flex;">
+<div id="safe"></div>
+<div id="Tips"></div>
+<div id="total"></div>
+<div id="importData"></div>
+<div id="top3Data"></div>
+
+<!--每日人力出勤-->
+<div class="manpowerAttendance" id="manpowerAttendance"></div>
+
+<!--IQC-->
+<div class="IQC" id="IQC"></div>
+
+<!--生产效率-->
+<div class="productionEfficiency" id="productionEfficiency"></div>
+
+
+<!--设备功率-->
+<div class="equipmentPower" id="equipmentPower"></div>
+
+<!--设备功率-->
+<div class="topLeft" id="topLeft"></div>
+</body>
+<script src="../../static/js/board/week.js" th:src="@{/js/board/week.js}"></script>
+<script>
+</script>
+</html>