180 lines
6.8 KiB
Plaintext
180 lines
6.8 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) {
|
||
if(data[i].mPoint && data[i].mPoint.forcemax!=null){
|
||
initBottle(data[i].mPoint.parmvalue,data[i].mPoint.forcemax,data[i].style,data[i].elementCode);
|
||
}
|
||
}
|
||
if (data[i].elementCode.indexOf("product") != -1) {
|
||
if(data[i].mPoint && data[i].mPoint.parmvalue!=null){//若没值则代表未生产
|
||
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,forcemax,style,elementcode){
|
||
var level = 0.0;
|
||
value = parseFloat(value);
|
||
if(value > 0 && forcemax != "" && forcemax != 0){
|
||
level = ((value/forcemax)*100).toFixed(1);
|
||
}
|
||
var divStr = '<div style="'+style+'">'+
|
||
'<span class="bottleSpan">'+ level +'%</span>'+
|
||
'<div id="'+elementcode+'"style="margin-left:27%"></div>'+
|
||
'</div>';
|
||
$("#floatDiv").append(divStr);
|
||
$('#'+elementcode).jQMeter({
|
||
goal:'$100',
|
||
raised:'$'+ parseInt(level),
|
||
orientation:'vertical',
|
||
width:document.documentElement.clientWidth * 0.015 + "px",
|
||
height:document.documentElement.clientHeight * 0.16+ "px",
|
||
barColor:'#FFBA0D'
|
||
});
|
||
}
|
||
|
||
function initProduct(value,style){
|
||
if(value != ""){
|
||
var divStr = '<div style="'+style+'">'+
|
||
'<div class="productDiv">'+
|
||
'<span class="productSpan">'+value.substring(0,10)+'</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.02 + "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> |