Merge remote-tracking branch 'gitee/master'

ruoyi-admin/src/main/java/com/ruoyi/web/controller/broad/AllBroadHTMLController.java

@@ -48,5 +48,10 @@ public class AllBroadHTMLController {
             return "broad/finalAssemblyProductionData";
         }
 
+    @GetMapping("/orderVisualization")
+    public String orderVisualization() {
+        return "broad/orderVisualization";
+    }
+
 
 }

ruoyi-admin/src/main/resources/static/css/board/orderVisualization.css

@@ -0,0 +1,75 @@
+body {
+    height: auto;
+    width: auto;
+    background: url(../../img/board/orderVisualization/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: 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{
+    position: absolute;
+    width: 40%;
+    height: 20%;
+    top: 30%;
+    left: 30%;
+}
+.productionEfficiency{
+    position: absolute;
+    width: 25%;
+    height: 35%;
+    top: 15%;
+    left: 71.7%;
+}
+.mainData{
+    position: absolute;
+    width: 25%;
+    height: 35%;
+    top: 59%;
+    left: 3.7%;
+}
+.equipmentPowerOne{
+    position: absolute;
+    width: 20%;
+    height: 19%;
+    top: 76%;
+    left: 30.5%;
+}
+.equipmentPowerTwo{
+    position: absolute;
+    width: 20%;
+    height: 19%;
+    top: 76%;
+    left: 50.5%;
+}

ruoyi-admin/src/main/resources/static/js/board/orderVisualization.js

@@ -0,0 +1,93 @@
+$(() => {
+    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})
+    // 公共请求地址
+    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"))
+    // })
+
+    // 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"))
+
+    // 设备功率
+    singleVerticalBarChart(null, document.getElementById("equipmentPowerOne"))
+    singleVerticalBarChart(null, document.getElementById("equipmentPowerTwo"))
+
+    // 生产效率
+    // autoUpdate(url + "/ ", INTERVAL, data => {
+    horizontalRoundedBarChartWithBackgroundTwo(null, document.getElementById("productionEfficiency"))
+    // })
+    // 主体数据
+    percentageRingDiagram(null, document.getElementById("mainData"))
+
+})
+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">订单可视化、6S 及安全生产看板</span>
+    <span style="position: absolute;top: 10%;left: 5.5%;color: #CFD2D0;font-size: 1.0vw">每日人力出勤</span>
+    <span style="position: absolute;top: 10%;left: 32%;color: #CFD2D0;font-size: 1.0vw">IQC检测明细</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">设备功率</span>
+    <span style="position: absolute;top: 54.5%;left: 73.6%;color: #CFD2D0;font-size: 1.0vw">安全生产</span>
+    `
+    $('body').append(html)
+}
+const safe = () => {
+    const html = `
+    <span style="position: absolute;top: 74%;left: 84%;color: #08F580;font-size: 2.5vw;transform: translateX(-50%);letter-spacing: 0.3vw">1809<span style="font-size: 0.5vw">天</span> </span>
+    <span style="position: absolute;top: 81%;left: 84%;color: #CBE6F7;font-size: 1vw;transform: translateX(-50%);letter-spacing: 0.3vw">QSR连续安全生产天数</span>
+    `
+    $('body').append(html)
+}
+const card = (val = {top: 1, left: 1}) => {
+    const html = `
+    <div style="position: absolute;top: ${val.top}%;left: ${val.left}%;width:7%;height:15%;border: 1px solid #0E72F1;">
+    <div style="position: absolute;top: 0%;left: 0%;width:100%;height:15%;background-color: #0C71F3;text-align: center;font-size: 0.75vw;line-height: 1.2vw">
+    KTTX-1
+    </div>
+    <div style="position: absolute;top: 25%;left: 5%;width:100%;height:15%;text-align: left;font-size: 0.5vw;">
+    <span style="position: absolute;width:60%;font-size: 0.6vw;">
+    项目名称111:
+        </span>
+        <span style="position: absolute;left: 60%;width:40%;font-size: 0.4vw;line-height: 1vw">
+        值111
+</span>
+    </div>
+    <div style="position: absolute;top: 50%;left: 5%;width:100%;height:15%;text-align: left;font-size: 0.5vw;">
+    <span style="position: absolute;width:60%;font-size: 0.6vw;">
+    项目名称111:
+        </span>
+        <span style="position: absolute;left: 60%;width:40%;font-size: 0.4vw;line-height: 1vw">
+        值111
+</span>
+    </div>
+    <div style="position: absolute;top: 75%;left: 5%;width:100%;height:15%;text-align: left;font-size: 0.5vw;">
+    <span style="position: absolute;width:60%;font-size: 0.6vw;">
+    项目名称111:
+        </span>
+        <span style="position: absolute;left: 60%;width:40%;font-size: 0.4vw;line-height: 1vw">
+        值111
+</span>
+    </div>
+</div>
+    `
+    $('body').append(html)
+}

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

@@ -355,7 +355,7 @@
     const planWorkOrderColumns = [
         "序号", "型号","计划数量", "完成数量", "完成率", "时间",
     ]
-    const planWorkOrderTable = new AutoScrollTable(document.getElementById("plan-work-order"), planWorkOrderColumns, {width: ['10%','30%', '13%', '13%', '13%', '20%']})
+    const planWorkOrderTable = new AutoScrollTable(document.getElementById("plan-work-order"), planWorkOrderColumns, {width: ['10%','35%', '12%', '12%', '11%', '20%']})
     // const planTable = new AutoScrollTable(document.getElementById("plan-table"), [], {
     //     width: ['15%', '5%', null, null, null, null, null, null, null, null, null, null, null, null, null, null, "5%", "5%", "5%"],
     //     caption: "生产计划统计",
@@ -390,7 +390,7 @@
         let url = '/broad/box'
         //生产计划工单
         autoUpdate(url+"/getProductPlanInfo ", INTERVAL, data => {
-              planWorkOrderTable.loadData(data.map((value,index) => [index+1,value.name, value.plan_number, value.actual_number, value.rate, value.day]), Object.keys(planWorkOrderColumns))
+              planWorkOrderTable.loadData(data.map((value,index) => [index+1,value.name, value.plan_number, value.actual_number, `${value.rate}%`, value.day]), Object.keys(planWorkOrderColumns))
           })
 
         autoUpdate(url + '/selectStock/S001', INTERVAL, data => {

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

@@ -0,0 +1,52 @@
+<!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/orderVisualization.css" rel="stylesheet" th:href="@{/css/board/orderVisualization.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 class="manpowerAttendance" id="manpowerAttendance"></div>
+
+<!--IQC-->
+<div class="IQCOne" id="IQCOne"></div>
+<div class="IQCTwo" id="IQCTwo"></div>
+<div class="IQCThree" id="IQCThree"></div>
+<div class="IQCFour" id="IQCFour"></div>
+
+<!--生产效率-->
+<div class="productionEfficiency" id="productionEfficiency"></div>
+
+<!--主体数据-->
+<div class="mainData" id="mainData"></div>
+
+<!--设备功率-->
+<div class="equipmentPowerOne" id="equipmentPowerOne"></div>
+<div class="equipmentPowerTwo" id="equipmentPowerTwo"></div>
+</body>
+<script src="../../static/js/board/orderVisualization.js" th:src="@{/js/board/orderVisualization.js}"></script>
+<script>
+</script>
+</html>