新增界面

master
夜笙歌 4 years ago
parent 969c408024
commit a2b931d578

@ -0,0 +1,32 @@
package com.ruoyi.web.controller.broad;
import com.alibaba.fastjson.JSONArray;
import com.alibaba.fastjson.JSONObject;
import com.ruoyi.system.domain.BoxOutput;
import com.ruoyi.system.service.IBroadDataService;
import io.swagger.annotations.ApiOperation;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.List;
/**
* @author wanghao
* @date 2022/7/7 13:31
*/
@Controller
@RequestMapping("/broad/beforeLibrary")
public class BeforeLibraryController {
@Autowired
private IBroadDataService service;
@GetMapping()
public String box() {
return "broad/beforeLibrary";
}
}

@ -0,0 +1,25 @@
package com.ruoyi.web.controller.broad;
import com.ruoyi.system.service.IBroadDataService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
/**
* @author wanghao
* @date 2022/7/7 13:31
*/
@Controller
@RequestMapping("/broad/finalAssemblyProductionData")
public class FinalAssemblyProductionDataController {
@Autowired
private IBroadDataService service;
@GetMapping()
public String box() {
return "broad/finalAssemblyProductionData";
}
}

@ -0,0 +1,52 @@
body {
height: auto;
width: auto;
background: url(../../img/board/beforeLibrary/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;
}
.orderDetails {
position: absolute;
width: 30.2%;
height: 20%;
top: 15%;
left: 3.4%;
}
.orderQuantityFulfillmentRateOfTheDay {
position: absolute;
width: 30%;
height: 20%;
top: 15%;
left: 35%;
}
.FinishedGoodsWarehousingStatisticsByHour{
position: absolute;
width: 93%;
height: 21.5%;
top: 44%;
left: 3.3%;
}
.PropertyInsuranceOneDayOrderInfo {
position: absolute;
width: 61.8%;
height: 21%;
top: 74%;
left: 3.4%;
}
.distributionOfBadTypesInProductionLineByDay{
position: absolute;
width: 30%;
height: 20%;
top: 74%;
left: 66.6%;
}

@ -0,0 +1,11 @@
body {
height: auto;
width: auto;
background: url(../../img/board/finalAssemblyProductionData/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;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 851 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 790 KiB

@ -0,0 +1,37 @@
$(() => {
// 公共请求地址
let url = '/broad/box'
// 表格头
const planWorkOrderColumns = [
"编号", "计划数量", "完成数量", "差异值", "时间",
]
// 订单详情
const orderDetailsTable = new AutoScrollTable(document.getElementById("orderDetails"), planWorkOrderColumns, {width: ['30%', null, null, null, '17%']})
// 产线当日订单信息
const PropertyInsuranceOneDayOrderInfoTable = new AutoScrollTable(document.getElementById("PropertyInsuranceOneDayOrderInfo"), planWorkOrderColumns, {width: ['30%', null, null, null, '17%']})
// 当日订单数量达成率
horizontalRoundedBarChartWithBackground(null, document.getElementById("orderQuantityFulfillmentRateOfTheDay"));
// 成品入库统计
barChartAndLineChart(null, document.getElementById("FinishedGoodsWarehousingStatisticsByHour"));
// 产线不良类型分布
pieChart(null, document.getElementById("distributionOfBadTypesInProductionLineByDay"));
//订单详情轮询
autoUpdate(url+"/getProductPlanInfo ", 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(planWorkOrderColumns))
})
//产线当日订单信息轮询
autoUpdate(url+"/getProductPlanInfo ", INTERVAL, data => {
PropertyInsuranceOneDayOrderInfoTable.loadData(data.map(value => [value.plan_code, value.plan_number, value.actual_number, value.plan_number-value.actual_number, value.day]), Object.keys(planWorkOrderColumns))
})
})

File diff suppressed because it is too large Load Diff

@ -0,0 +1,49 @@
<!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/beforeLibrary.css" rel="stylesheet" th:href="@{/css/board/beforeLibrary.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="orderDetails" id="orderDetails"></div>
<!--当日订单数量达成率-->
<div class="orderQuantityFulfillmentRateOfTheDay" id="orderQuantityFulfillmentRateOfTheDay"></div>
<!--成品入库统计-->
<div class="FinishedGoodsWarehousingStatisticsByHour" id="FinishedGoodsWarehousingStatisticsByHour"></div>
<!--产线当日订单信息-->
<div class="PropertyInsuranceOneDayOrderInfo" id="PropertyInsuranceOneDayOrderInfo"></div>
<!--产线不良类型分布-->
<div class="distributionOfBadTypesInProductionLineByDay" id="distributionOfBadTypesInProductionLineByDay"></div>
</body>
<script src="../../static/js/board/beforeLibrary.js" th:src="@{/js/board/beforeLibrary.js}"></script>
<script>
</script>
</html>

@ -0,0 +1,49 @@
<!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/finalAssemblyProductionData.css" rel="stylesheet" th:href="@{/css/board/finalAssemblyProductionData.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="orderDetails" id="orderDetails"></div>
<!--当日订单数量达成率-->
<div class="orderQuantityFulfillmentRateOfTheDay" id="orderQuantityFulfillmentRateOfTheDay"></div>
<!--成品入库统计-->
<div class="FinishedGoodsWarehousingStatisticsByHour" id="FinishedGoodsWarehousingStatisticsByHour"></div>
<!--产线当日订单信息-->
<div class="PropertyInsuranceOneDayOrderInfo" id="PropertyInsuranceOneDayOrderInfo"></div>
<!--产线不良类型分布-->
<div class="distributionOfBadTypesInProductionLineByDay" id="distributionOfBadTypesInProductionLineByDay"></div>
</body>
<script src="../../static/js/board/finalAssemblyProductionData.js" th:src="@{/js/board/finalAssemblyProductionData.js}"></script>
<script>
</script>
</html>
Loading…
Cancel
Save