1.引入需要引入的css、js
<link rel="stylesheet"
href="${pageContext.request.contextPath}/static/css/easyui/easyui.css">
<link rel="stylesheet"
href="${pageContext.request.contextPath}/static/css/easyui/icon.css">
<link rel="stylesheet"
href="${pageContext.request.contextPath}/static/css/bootstrap.css">
<link rel="stylesheet"
href="${pageContext.request.contextPath}/static/css/overallShow.css">
<script type="text/javascript"
src="${pageContext.request.contextPath}/static/js/jquery-3.3.1.js"></script>
<script type="text/javascript"
src="${pageContext.request.contextPath}/static/js/easyui/jquery.easyui.min.js">
</script>
<script type="text/javascript"
src="${pageContext.request.contextPath}/static/js/easyui/easyui-lang-zh_CN.js">
</script>
2.html <body>部分
<body>
<button id="btnOpenShow" type="button" class="btn btn-success" style=" margin: 25px 25px 25px 25px;"
onclick="openView()">点击查看全屏
</button>
<p class="vehicleSpacing"></p>
<div class="horizontalSpacing"></div>
<div id="show">
<div id="left" class="text-center">
<h1 id="screen_title" class="text-center">油箱车间生产运行动态管理信息看板</h1>
<br>
<h2 id="time">
<span id="year">0000</span>年<span id="month">00</span>月<span
id="date">00</span>日 <span id="day">000</span> <span
id="hours">00</span>时<span id="minutes">00</span>分<span
id="seconds">00</span>秒
</h2>
<table class="table table-bordered text-center" style="margin-left:0px">
<tr id="dayNumber">
<td class="text-center" colspan='2'>油箱车间安全运行天数:<span
id="runningDay">00000</span>天
</td>
</tr>
<tr>
<td class="text-center" colspan='2'><span id="dayNight">无</span>班计划产量:
<span id="planSum">0000</span>件, 实际产量:<span id="realSum">0000</span>件,
完成率:<span id="productRate">00000</span>%
</td>
</tr>
<tr id="lineInfo">
<td id="rate" colspan="1" class="text-center" style="vertical-align: middle;">节拍</td>
</tr>
<tr id="latestNews">
<td id="latestNewsInfo" colspan="1" class="text-center" style="vertical-align: middle;">最新录入</td>
</tr>
<tr>
<td class="text-center" style="vertical-align: middle;">最新通告</td>
<td class="text-center"><span id="msg"></span></td>
</tr>
</table>
</div>
<div id="right" class="text-center">
<h2 id="hourTitle">生产计划表</h2>
<table class="table text-center">
<tr>
<th class="text-center" style="font-size: 25px">图号(计划)</th>
<%-- <th class="text-center" style="font-size: 25px">计划</th>--%>
<th class="text-center" style="font-size: 25px">实际</th>
</tr>
<tbody id="right-table-data">
</tbody>
</table>
</div>
</div>
<div class="horizontalSpacing"></div>
<p class="vehicleSpacing"></p>
</body>
3. js部分
<script type="text/javascript">
//点击按钮
$(function () {
if (top.location != self.location) {
$('#btnOpenShow').show();
} else {
$('#btnOpenShow').hide();
}
//键盘敲击事件(回车返回)
$(document).keypress(function (event) {
value = event.keyCode;
if (value == 13) {
$(location).attr('href',
'${pageContext.request.contextPath}/main.do');
}
});
//指定时间获取展示内容
setInterval(show, 1000);
show();
//获取整体展示内容
function show() {
showModal();
displayTime();
}
//获取展示模块内容
function showModal() {
// var lineShow = [];
$.ajax({
type: 'post',
url: '${pageContext.request.contextPath}/getTankShow.do',
dataType: 'json',
async: true,
success: function (data) {
$("#runningDay").text(data.tankShow.runningDay);
$("#dayNight").text(data.tankShow.dayNight);
$("#planSum").text(data.tankShow.planSum);
$("#realSum").text(data.tankShow.realSum);
//完成率
var planSum = data.tankShow.planSum;
var realSum = data.tankShow.realSum;
if (planSum != 0) {
var productRate = (parseFloat((realSum / planSum)) * 100).toFixed(2);
} else {
var productRate = 0;
}
$("#productRate").text(productRate);
var lineShowData = data.tankShow.lineShow; //节拍信息
var lineNewsData = data.tankShow.lineNews; //最新录入信息
var productNumShow = data.tankShow.productNumShow; //右侧信息
var lineRate = $("#lineInfo");
var rightTable = $("#right-table-data");
var latestNews = $("#latestNews");
//节拍
$(".line-info-detail").remove();
if (lineShowData && lineShowData.length > 0) {
$("#rate").attr("rowspan", lineShowData.length + 1);
lineShowData.reverse();
for (let i = 0; i < lineShowData.length; i++) {
lineRate.after("<tr class='line-info-detail' style='font-size: 35px'><td align='left'>" + lineShowData[i].lineCode + "线:<span>" + lineShowData[i].takt + "</span>min/件,实际<span>" + lineShowData[i].realTakt + "</span>min/件(计划:<span>" + lineShowData[i].planSum + "</span>件;已生产:<span>" + lineShowData[i].realSum + "</span>件)</td></tr>")
}
} else {
$("#rate").attr("rowspan", 4);
var defaultData = "<tr class='line-info-detail'><td class='text-center' style='font-size: 35px'>一线:<span>000</span>min/件,实际<span>000</span>min/件(计划:<span>000</span>,已生产:<span>000</span>件)</td></tr>" +
"<tr class='line-info-detail'><td class='text-center' style='font-size: 35px'>二线:<span>000</span>min/件,实际<span>000</span>min/件(计划:<span>000</span>,已生产:<span>000</span>件)</td></tr>" +
"<tr class='line-info-detail'><td class='text-center' style='font-size: 35px'>三线:<span>000</span>min/件,实际<span>000</span>min/件(计划:<span>000</span>,已生产:<span>000</span>件)</td></tr>";
lineRate.after(defaultData);
// for (let i = 0; i <= 2; i++) {
// lineRate.after("<tr class='line-info-detail'><td class='text-center' style='font-size: 35px'>" + lineShowData[i].lineCode + "线:<span>000</span>min/件,实际<span>000</span>min/件(计划:<span>000</span>,已生产:<span>000</span>件)</td></tr>");
// }
}
$("#lineInfo").addClass("text-center");
$("#lineInfo").children().addClass('text-center');
//最新录入
$(".news-info").remove();
if (lineNewsData && lineNewsData.length > 0) {
$("#latestNewsInfo").attr("rowspan",lineNewsData.length + 1);
lineNewsData.reverse();
for (let i = 0; i < lineNewsData.length; i++) {
latestNews.after("<tr class='news-info'><td class='text-center' style='font-size: 35px'>" + lineNewsData[i].lineCode + "线:<span>" + lineNewsData[i].product.productCode + "</span>( <span>"+lineNewsData[i].serialNumber+"</span> ) </td></tr>");
}
} else {
$("#latestNewsInfo").attr("rowspan", 4);
var defaultData ="<tr class='news-info'><td class='text-center' style='font-size: 35px'>一线:<span>-----型号(流水号)</span></td></tr>"
+"<tr class='news-info'><td class='text-center' style='font-size: 35px'>二线:<span>-----型号(流水号)</span></td></tr>"
+"<tr class='news-info'><td class='text-center' style='font-size: 35px'>三线:<span>-----型号(流水号)</span></td></tr>";
latestNews.after(defaultData);
}
//右侧数据
rightTable.empty();
if(productNumShow && productNumShow.length > 0){
for(let i=0;i<productNumShow.length;i++){
// rightTable.append("<tr><td class='text-center' style='font-size: 30px'>"+productNumShow[i].product.productCode+"</td><td class='text-center' style='font-size: 30px'>"+productNumShow[i].planNum+"</td><td class='text-center' style='font-size: 30px'>"+productNumShow[i].realNum+"</td></tr>");
rightTable.append("<tr><td class='text-center' style='font-size: 25px'>"+productNumShow[i].product.productCode+"(<span>"+productNumShow[i].planNum+"</span>)</td><td class='text-center' style='font-size: 30px'><span>"+productNumShow[i].realNum+"</span></td></tr>");
}
}
//最新通告
if (data.tankShow.msg) {
// $("#msg").html(data.tankShow.msg.replace('/\n/g', "<br>"));
$("#msg").html(data.tankShow.msg.replace(/\n/g, "<br>"));
}
}
}
);
}
//实时显示时间
function displayTime() {
var date = new Date();
var getYear = date.getFullYear() + 1;
var getMonth = date.getMonth() + 1;
getMonth = getMonth > 10 ? getMonth : ++getMonth;
var getDate = date.getDate();
var array = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");
var getDay = date.getDay();
var getHours = date.getHours();
getHours = getHours >= 10 ? getHours : "0" + getHours;
var getMinutes = date.getMinutes();
getMinutes = getMinutes >= 10 ? getMinutes : "0" + getMinutes;
var getSeconds = date.getSeconds();
getSeconds = getSeconds >= 10 ? getSeconds : "0" + getSeconds;
$("#year").text(getYear);
$("#month").text(getMonth);
$("#date").text(getDate);
$("#day").text(array[getDay]);
$("#hours").text(getHours);
$("#minutes").text(getMinutes);
$("#seconds").text(getSeconds);
}
})
//点击显示全屏
function openView() {
if (top.location != self.location) {
top.location = self.location;
}
}
</script>