171 lines
6.5 KiB
Plaintext
171 lines
6.5 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>
|
|||
|
|
.bottleSpan {
|
|||
|
|
font-size: 30px;
|
|||
|
|
color:#56F670
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.productSpan {
|
|||
|
|
font-size: 30px;
|
|||
|
|
color:#000
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.productDiv {
|
|||
|
|
background-color: #28EAE1;
|
|||
|
|
width:auto;
|
|||
|
|
text-align: center;
|
|||
|
|
padding-left:8px;
|
|||
|
|
padding-right:8px;
|
|||
|
|
border-radius: 2px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
</style>
|
|||
|
|
<script type="text/javascript">
|
|||
|
|
function getValue() {
|
|||
|
|
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
|
|||
|
|
//console.log("data", data);
|
|||
|
|
//先清空容器
|
|||
|
|
$('#floatDiv').empty();
|
|||
|
|
//每一条循环判断
|
|||
|
|
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 {
|
|||
|
|
//获取值 和 获取Modbus
|
|||
|
|
if (data[i].getValueType == '${Type_GetValue}' || data[i].getValueType == '${Type_GetModbus}') {
|
|||
|
|
// var code = data[i].elementCode;
|
|||
|
|
// document.getElementById(code).innerHTML = data[i].mPoint.parmvalue;
|
|||
|
|
if (data[i].elementCode.indexOf("bottle") != -1) {
|
|||
|
|
initBottle(data[i].mPoint.parmvalue,data[i].style,data[i].elementCode);
|
|||
|
|
}
|
|||
|
|
if (data[i].elementCode.indexOf("product") != -1) {
|
|||
|
|
if(data[i].mPoint.parmvalue!=null && data[i].mPoint.parmvalue!=""){//若没值则代表未生产
|
|||
|
|
initProduct(data[i].mPoint.parmvalue,data[i].style);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
} 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 {
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
//因为元素是append进去的 所以最后修改字体大小
|
|||
|
|
$(".bottleSpan").css("font-size", (document.documentElement.clientWidth * 0.02 + "px"));
|
|||
|
|
$(".productSpan").css("font-size", (document.documentElement.clientWidth * 0.02 + "px"));
|
|||
|
|
}, 'json');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function initBottle(value,style,elementcode){
|
|||
|
|
var divStr = '<div style="'+style+'">'+
|
|||
|
|
'<span class="bottleSpan">'+ value +'%</span>'+
|
|||
|
|
'<div id="'+elementcode+'"style="margin-left:27%"></div>'+
|
|||
|
|
'</div>';
|
|||
|
|
$("#floatDiv").append(divStr);
|
|||
|
|
$('#'+elementcode).jQMeter({
|
|||
|
|
goal:'$100',
|
|||
|
|
raised:'$'+ parseInt(value),
|
|||
|
|
orientation:'vertical',
|
|||
|
|
width:document.documentElement.clientWidth * 0.015 + "px",
|
|||
|
|
height:document.documentElement.clientHeight * 0.13+ "px",
|
|||
|
|
barColor:'#FFBA0D'
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function initProduct(value,style){
|
|||
|
|
var divStr = '<div style="'+style+'">'+
|
|||
|
|
'<div class="productDiv">'+
|
|||
|
|
'<span class="productSpan">'+value+'</span>'+
|
|||
|
|
'</div></div>';
|
|||
|
|
$("#floatDiv").append(divStr);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
/* 定时器 */
|
|||
|
|
setInterval(getValue, 300000); //<!--每隔5分钟刷新一次-->
|
|||
|
|
|
|||
|
|
$(function () {
|
|||
|
|
document.body.style.backgroundColor = "#" + '${param.backgroundColor}';
|
|||
|
|
document.getElementById("backImage").style.width = document.documentElement.clientWidth + "px";
|
|||
|
|
document.getElementById("backImage").style.height = document.documentElement.clientHeight + "px";
|
|||
|
|
document.getElementById("floatDiv").style.width = document.documentElement.clientWidth + "px";
|
|||
|
|
document.getElementById("floatDiv").style.height = document.documentElement.clientHeight + "px";
|
|||
|
|
|
|||
|
|
$(".bottleSpan").css("font-size", (document.documentElement.clientWidth * 0.02 + "px"));
|
|||
|
|
$(".productSpan").css("font-size", (document.documentElement.clientWidth * 0.019 + "px"));
|
|||
|
|
//document.styleSheets[0].cssRules[0].style.cssText = "color:yellow;";
|
|||
|
|
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:7%;top:11%;">
|
|||
|
|
<span class="bottleSpan">80</span>
|
|||
|
|
<span class="bottleSpan">%</span>
|
|||
|
|
<div id="equ1"style="margin-left:27%"></div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div style="position: absolute;z-index:2;left:12%;top:37%;">
|
|||
|
|
<div class="productDiv">
|
|||
|
|
<span class="productSpan">2019001Q21</span>
|
|||
|
|
</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>
|
|||
|
|
|
|||
|
|
<img id="backImage" src="" style="z-index:-1;positon:relative;" alt="" />
|
|||
|
|
|
|||
|
|
</body>
|
|||
|
|
|
|||
|
|
</html>
|