317 lines
13 KiB
Plaintext
317 lines
13 KiB
Plaintext
|
<%@ page language="java" pageEncoding="UTF-8"%>
|
|||
|
|
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
|
|||
|
|
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
|
|||
|
|
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
|
|||
|
|
<%@ page import="com.sipai.entity.base.ServerObject"%>
|
|||
|
|
<%@ taglib uri="http://www.springsecurity.org/jsp" prefix="security"%>
|
|||
|
|
<%@page import="com.sipai.entity.visual.JspElement"%>
|
|||
|
|
<%request.setAttribute("Type_GetValue", JspElement.Type_GetValue); %>
|
|||
|
|
<%request.setAttribute("Type_GetHistory", JspElement.Type_GetHistory); %>
|
|||
|
|
<%request.setAttribute("Type_GetModbus", JspElement.Type_GetModbus); %>
|
|||
|
|
<%request.setAttribute("Type_GetHttp", JspElement.Type_GetHttp); %>
|
|||
|
|
<!DOCTYPE html>
|
|||
|
|
<!-- <html lang="zh-CN"> -->
|
|||
|
|
<!-- BEGIN HEAD -->
|
|||
|
|
|
|||
|
|
<head>
|
|||
|
|
<title></title>
|
|||
|
|
<!-- 引用页头及CSS页-->
|
|||
|
|
<jsp:include page="/jsp/incVisual.jsp"></jsp:include>
|
|||
|
|
<style>
|
|||
|
|
.scanDiv {
|
|||
|
|
background-color: #000;
|
|||
|
|
text-align: left;
|
|||
|
|
border-radius: 2px;
|
|||
|
|
margin-top:1%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.whiteSpan {
|
|||
|
|
font-size: 30px;
|
|||
|
|
color:#fff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.blueSpan {
|
|||
|
|
font-size: 30px;
|
|||
|
|
color:#28EAE1
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.titleDiv {
|
|||
|
|
border-radius: 30px;
|
|||
|
|
border: 3px solid #fff;
|
|||
|
|
background-color: #1BB3DC;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/*新样式请往下写*/
|
|||
|
|
|
|||
|
|
</style>
|
|||
|
|
<script type="text/javascript">
|
|||
|
|
/* 请求数据 */
|
|||
|
|
var timeflash = 0;
|
|||
|
|
function clock() {
|
|||
|
|
var time = new Date();
|
|||
|
|
var week;
|
|||
|
|
switch (time.getDay()) {
|
|||
|
|
case 1: week = "星期一"; break;
|
|||
|
|
case 2: week = "星期二"; break;
|
|||
|
|
case 3: week = "星期三"; break;
|
|||
|
|
case 4: week = "星期四"; break;
|
|||
|
|
case 5: week = "星期五"; break;
|
|||
|
|
case 6: week = "星期六"; break;
|
|||
|
|
default: week = "星期日";
|
|||
|
|
}
|
|||
|
|
var year = time.getFullYear();
|
|||
|
|
var month = time.getMonth()+1;
|
|||
|
|
var date = time.getDate();
|
|||
|
|
var hour = time.getHours();
|
|||
|
|
var minute = time.getMinutes();
|
|||
|
|
if (minute < 10) {
|
|||
|
|
minute = "0" + minute;
|
|||
|
|
}
|
|||
|
|
if (month < 10) {
|
|||
|
|
month = "0" + minute;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var apm = "上午";
|
|||
|
|
if (hour < 6 && hour >= 0) {
|
|||
|
|
apm = "凌晨";
|
|||
|
|
} else if (hour == 12) {
|
|||
|
|
apm = "中午";
|
|||
|
|
} else if (hour > 12 && hour < 18) {
|
|||
|
|
apm = "下午";
|
|||
|
|
} else if (hour >= 18 && hour < 24) {
|
|||
|
|
apm = "晚上";
|
|||
|
|
}
|
|||
|
|
var maohao = "";
|
|||
|
|
if (timeflash == 0) {
|
|||
|
|
maohao = "<font color='#4972B4'>:</font>";
|
|||
|
|
timeflash = 1;
|
|||
|
|
} else {
|
|||
|
|
maohao = "<font color='#1A2D58'>:</font>";
|
|||
|
|
timeflash = 0;
|
|||
|
|
}
|
|||
|
|
if(document.getElementById("clock")){
|
|||
|
|
document.getElementById("clock").innerHTML = hour + maohao + minute;
|
|||
|
|
}
|
|||
|
|
if(document.getElementById("apm")){
|
|||
|
|
document.getElementById("apm").innerHTML = apm;
|
|||
|
|
}
|
|||
|
|
if(document.getElementById("date")){
|
|||
|
|
document.getElementById("date").innerHTML = year + "." + month + "." + date;
|
|||
|
|
}
|
|||
|
|
if(document.getElementById("week")){
|
|||
|
|
document.getElementById("week").innerHTML = week;
|
|||
|
|
}
|
|||
|
|
if(document.getElementById("lunar")){
|
|||
|
|
document.getElementById("lunar").innerHTML = showCal();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function getValue() {
|
|||
|
|
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
|
|||
|
|
//先清空
|
|||
|
|
$('#floatDiv').empty();
|
|||
|
|
//再生成panel
|
|||
|
|
initPanel(data);
|
|||
|
|
|
|||
|
|
//每一条循环判断
|
|||
|
|
//console.log("data", data);
|
|||
|
|
for (var i = 0; i < data.length; i++) {
|
|||
|
|
if (data[i].elementCode == 'background') {
|
|||
|
|
if (data[i].style != null && data[i].style != "") {
|
|||
|
|
document.getElementById("backImage").src = "../../.." + data[i].style;
|
|||
|
|
}
|
|||
|
|
} else if (data[i].elementCode.indexOf("title") != -1) {//获取名称
|
|||
|
|
var code = data[i].elementCode;
|
|||
|
|
if (document.getElementById(code)) {//判断存不存在
|
|||
|
|
//赋值
|
|||
|
|
document.getElementById(code).innerHTML = data[i].name;
|
|||
|
|
}
|
|||
|
|
}else {
|
|||
|
|
//获取值 和 获取Modbus
|
|||
|
|
if (data[i].getValueType == '${Type_GetValue}' || data[i].getValueType == '${Type_GetModbus}') {
|
|||
|
|
var code = data[i].elementCode;
|
|||
|
|
if(document.getElementById(code) && data[i].mPoint!=null){
|
|||
|
|
document.getElementById(code).innerHTML = parseFloat(data[i].mPoint.parmvalue).toFixed(1);
|
|||
|
|
document.getElementById(code+'Unit').innerHTML = data[i].mPoint.unit;
|
|||
|
|
}
|
|||
|
|
} else if (data[i].getValueType == '${Type_GetHistory}') {
|
|||
|
|
|
|||
|
|
} else if (data[i].getValueType == '${Type_GetHttp}') {
|
|||
|
|
var code = data[i].elementCode;
|
|||
|
|
document.getElementById(code).innerHTML = data[i].value;
|
|||
|
|
} else {
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//最后改变字体大小
|
|||
|
|
$(".whiteSpan").css("font-size", (document.documentElement.clientWidth * 0.01 + "px"));
|
|||
|
|
$(".blueSpan").css("font-size", (document.documentElement.clientWidth * 0.015 + "px"));
|
|||
|
|
}, 'json');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function initPanel(data){
|
|||
|
|
for (var p = 0; p < data.length; p++) {
|
|||
|
|
if(data[p].elementCode != 'background' && data[p].style != null && data[p].style !=""){
|
|||
|
|
//console.log("style",data[p].style);
|
|||
|
|
//style字段写了值 则默认生成panel
|
|||
|
|
var num= data[p].elementCode.replace(/[^0-9]/ig,"");//获取panel中元素编号
|
|||
|
|
var width = document.documentElement.clientWidth * 0.18 + 'px';
|
|||
|
|
var topPadding = 1;
|
|||
|
|
var divStr = '<div style="'+data[p].style+'">'
|
|||
|
|
+ '<div class="scanDiv" style="width:'+width+';">'
|
|||
|
|
+ '<table style="padding-top:0;width:100%">'
|
|||
|
|
+ '<td width="33%" style="padding-left:4%"><span class="whiteSpan">温度</span></td>'
|
|||
|
|
+ '<td width="37%"><span id="temp'+num+'" class="blueSpan"></span></td>'
|
|||
|
|
+ '<td><span id="temp'+num+'Unit"class="whiteSpan">℃</span></td></table></div>'
|
|||
|
|
|
|||
|
|
+ '<div class="scanDiv" style="width:'+width+';">'
|
|||
|
|
+ '<table style="padding-top:0;width:100%">'
|
|||
|
|
+ '<td width="33%" style="padding-left:4%"><span class="whiteSpan">罐重</span></td>'
|
|||
|
|
+ '<td width="37%"><span id="weight'+num+'" class="blueSpan"></span></td>'
|
|||
|
|
+ '<td><span id="weight'+num+'Unit"class="whiteSpan"></span></td></table></div>'
|
|||
|
|
|
|||
|
|
+ '<div class="scanDiv" style="width:'+width+';">'
|
|||
|
|
+ '<table style="padding-top:0;width:100%">'
|
|||
|
|
+ '<td width="33%" style="padding-left:4%"><span class="whiteSpan">溶氧</span></td>'
|
|||
|
|
+ '<td width="37%"><span id="oxy'+num+'" class="blueSpan"></span></td>'
|
|||
|
|
+ '<td><span id="oxy'+num+'Unit"class="whiteSpan"></span></td></table></div>'
|
|||
|
|
|
|||
|
|
+ '<div class="scanDiv" style="width:'+width+';">'
|
|||
|
|
+ '<table style="padding-top:0;width:100%">'
|
|||
|
|
+ '<td width="33%" style="padding-left:4%"><span class="whiteSpan">PH</span></td>'
|
|||
|
|
+ '<td width="37%"><span id="ph'+num+'" class="blueSpan"></span></td>'
|
|||
|
|
+ '<td><span id="ph'+num+'Unit"class="whiteSpan"></span></td></table></div>'
|
|||
|
|
|
|||
|
|
+ '<div class="scanDiv" style="width:'+width+';">'
|
|||
|
|
+ '<table style="padding-top:0;width:100%">'
|
|||
|
|
+ '<td width="33%" style="padding-left:4%"><span class="whiteSpan">转速</span></td>'
|
|||
|
|
+ '<td width="37%"><span id="rSpeed'+num+'" class="blueSpan"></span></td>'
|
|||
|
|
+ '<td><span id="rSpeed'+num+'Unit"class="whiteSpan">rpm</span></td></table></div></div>';
|
|||
|
|
|
|||
|
|
$("#floatDiv").append(divStr);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 定时器 */
|
|||
|
|
setInterval(getValue, 300000); //<!--每隔5分钟刷新一次-->
|
|||
|
|
setInterval(clock, 1000); //每隔1秒显示一次
|
|||
|
|
|
|||
|
|
$(function () {
|
|||
|
|
document.body.style.backgroundColor = "#" + '${param.backgroundColor}';
|
|||
|
|
$("#clock").css("font-size", (document.documentElement.clientWidth * 0.03 + "px"));
|
|||
|
|
// $("#lunar").css("font-size", (document.documentElement.clientWidth * 0.03 + "px"));
|
|||
|
|
$("#date").css("font-size", (document.documentElement.clientWidth * 0.03 + "px"));
|
|||
|
|
$("#week").css("font-size", (document.documentElement.clientWidth * 0.03 + "px"));
|
|||
|
|
$("#title1").css("font-size", (document.documentElement.clientWidth * 0.02 + "px"));
|
|||
|
|
|
|||
|
|
document.getElementById("backImage").style.width = document.documentElement.clientWidth + "px";
|
|||
|
|
document.getElementById("backImage").style.height = document.documentElement.clientHeight + "px";
|
|||
|
|
document.getElementById("titleDiv").style.width = document.documentElement.clientWidth * 0.18 + "px";
|
|||
|
|
document.getElementById("titleDiv").style.height = document.documentElement.clientHeight * 0.058 + "px";
|
|||
|
|
document.getElementById("titleDiv").style.borderWidth = document.documentElement.clientHeight * 0.003 + "px";
|
|||
|
|
|
|||
|
|
document.getElementById("floatDiv").style.width = document.documentElement.clientWidth + "px";
|
|||
|
|
document.getElementById("floatDiv").style.height = document.documentElement.clientHeight + "px";
|
|||
|
|
|
|||
|
|
getValue();
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
</head>
|
|||
|
|
|
|||
|
|
<body style="width:100%;height:100%;margin:0;padding:0;">
|
|||
|
|
<div id="floatDiv" style="position: absolute;z-index:1;">
|
|||
|
|
|
|||
|
|
<!-- <div style="position: absolute;z-index:2;left:12%;top:37%;">
|
|||
|
|
<div class="scanDiv" style="width:150px;">
|
|||
|
|
<table style="padding-top:0;width:100%">
|
|||
|
|
<td width="30%" style="padding-top:2%;padding-left:4%"><span class="whiteSpan">温度</span></td>
|
|||
|
|
<td width="37%"><span class="blueSpan">26.5</span></td>
|
|||
|
|
<td><span class="whiteSpan">℃</span></td>
|
|||
|
|
</table>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="scanDiv" style="width:150px;">
|
|||
|
|
<table style="padding-top:0;width:100%">
|
|||
|
|
<td width="30%"style="padding-top:2%;padding-left:4%"><span class="whiteSpan">罐重</span></td>
|
|||
|
|
<td width="37%"><span class="blueSpan">500</span></td>
|
|||
|
|
<td style="padding-top:2%"><span class="whiteSpan">kg</span></td>
|
|||
|
|
</table>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="scanDiv" style="width:150px;">
|
|||
|
|
<table style="padding-top:0;width:100%">
|
|||
|
|
<td width="30%"style="padding-top:2%;padding-left:4%"><span class="whiteSpan">溶氧</span></td>
|
|||
|
|
<td width="37%"><span class="blueSpan">12.6</span></td>
|
|||
|
|
<td style="padding-top:2%"><span class="whiteSpan">%sat</span></td>
|
|||
|
|
</table>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="scanDiv" style="width:150px;">
|
|||
|
|
<table style="padding-top:0;width:100%">
|
|||
|
|
<td width="30%"style="padding-top:2%;padding-left:4%"><span class="whiteSpan">PH</span></td>
|
|||
|
|
<td width="37%"><span class="blueSpan">7.1</span></td>
|
|||
|
|
<td style="padding-top:2%"><span class="whiteSpan"></span></td>
|
|||
|
|
</table>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="scanDiv" style="width:150px;">
|
|||
|
|
<table style="padding-top:0;width:100%">
|
|||
|
|
<td width="30%"style="padding-top:2%;padding-left:4%"><span class="whiteSpan">转速</span></td>
|
|||
|
|
<td width="37%"><span class="blueSpan">200</span></td>
|
|||
|
|
<td style="padding-top:2%"><span class="whiteSpan">rpm</span></td>
|
|||
|
|
</table>
|
|||
|
|
</div>
|
|||
|
|
</div> -->
|
|||
|
|
|
|||
|
|
<!--<div style="position: absolute;z-index:1;bottom:66%;left:25%">
|
|||
|
|
<div style="width:50px;height:80px;margin:0;padding:0;float:left">
|
|||
|
|
<div style="height:13px;margin-top:60px;">
|
|||
|
|
<div class="slopingside" style="margin-left:6px"></div>
|
|||
|
|
</div>
|
|||
|
|
<div style="height:60px;width:20px;border-left: 2px solid #5AD8FF;margin-left:9px;"></div>
|
|||
|
|
<div class="circle"></div>
|
|||
|
|
</div>
|
|||
|
|
<div style="float:left;margin-top:30px;">
|
|||
|
|
<div>
|
|||
|
|
<span style="color: #A759C7;font-size: 18px;">H</span>
|
|||
|
|
<input type="text" readonly
|
|||
|
|
style="border-radius:4px;border:0;background-color: #A759C7;width:80px;text-align:right;" value="40.2％" />
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<span style="color: #B9A551;font-size: 18px;">T</span>
|
|||
|
|
<input type="text" readonly
|
|||
|
|
style="border-radius:4px;border:0;background-color: #B9A551;width:80px;text-align:right;" value="20.2℃" />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div> -->
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 时间 -->
|
|||
|
|
<div style="width:96%;height:10%;padding-top:2%;padding-left:4%;position: absolute;z-index:2;text-align: center;">
|
|||
|
|
<table style="width:100%;height:100%;padding:5%;padding-top:2%" align="right">
|
|||
|
|
<tr>
|
|||
|
|
<td width="55" align="left">
|
|||
|
|
<div id="titleDiv" class="titleDiv" style="text-align: center;">
|
|||
|
|
<span id="title1" style="font-size:30px;color:#fff;"></span>
|
|||
|
|
</div>
|
|||
|
|
</td>
|
|||
|
|
<td><span id="date" style="font-size:25px;color:#4972B4;font-family:Microsoft YaHei;font-weight:bold"></span>
|
|||
|
|
</td>
|
|||
|
|
<td><span id="week" style="font-size:25px;color:#4972B4;font-family:Microsoft YaHei;font-weight:bold"></span>
|
|||
|
|
</td>
|
|||
|
|
<!-- <td><span id="lunar" style="font-size:25px;color:#4972B4;font-family:Microsoft YaHei;font-weight: bold;"></span></td> -->
|
|||
|
|
<td><span id="clock" style="font-size:70px;color:#4972B4;font-family:Microsoft YaHei;font-weight: bold;"></span>
|
|||
|
|
</td>
|
|||
|
|
</tr>
|
|||
|
|
</table>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<img id="backImage" src="" style="z-index:-1;positon:relative;" alt="" />
|
|||
|
|
</body>
|
|||
|
|
|
|||
|
|
</html>
|