367 lines
16 KiB
Plaintext
367 lines
16 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_Get7dayHistory", JspElement.Type_GetHourHistory); %>
|
|
<%request.setAttribute("Type_Get7dayHistory", JspElement.Type_Get7dayHistory); %>
|
|
<%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/inc.jsp"></jsp:include>
|
|
<!-- <script type="text/javascript" src="<%=request.getContextPath()%>/JS/tableScroll.js" charset="utf-8"></script> -->
|
|
<style type="text/css">
|
|
@keyframes dash {
|
|
to {
|
|
stroke-dashoffset: 0;
|
|
}
|
|
}
|
|
</style>
|
|
<script type="text/javascript">
|
|
|
|
/* 请求数据 */
|
|
function getValue() {
|
|
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
|
|
if(data!=''){
|
|
var table01Num = 0;
|
|
var table01Html = "";
|
|
table01Html+="<thead style='display:none'><tr><th>名称</th><th>内容</th><th>单位</th></tr></thead>";
|
|
|
|
var table02Num = 0;
|
|
var table02Html = "";
|
|
table02Html+="<thead style='display:none'><tr><th>名称</th><th>内容</th><th>单位</th></tr></thead>";
|
|
|
|
var table11Num = 0;
|
|
var table11Html = "";
|
|
table11Html+="<thead style='display:none'><tr><th>名称</th><th>内容</th><th>单位</th></tr></thead>";
|
|
table11Html+="<tr style='height:23px;'>";
|
|
table11Html+="</tr>";
|
|
|
|
var table31Html = "";
|
|
table31Html+="<thead ><tr style='width:100%;height:23px;color: #dbeeff;'></th><th style='text-align:center;' colspan='3'>3 A</th></tr></thead>";
|
|
|
|
var table32Html = "";
|
|
table32Html+="<thead ><tr style='width:100%;height:23px;color: #dbeeff;'></th><th style='text-align:center;' colspan='3'>3 B</th></tr></thead>";
|
|
|
|
var table33Num = 0;
|
|
var table33Html = "";
|
|
table33Html+="<thead style='display:none'><tr><th>名称</th><th>内容</th><th>单位</th></tr></thead>";
|
|
table33Html+="<tr style='height:23px;'></tr>";
|
|
|
|
var table41Num = 0;
|
|
var table41Html = "";
|
|
table41Html+="<thead style='display:none'><tr><th>名称</th><th>内容</th><th>单位</th></tr></thead>";
|
|
|
|
for(var i=0;i<data.length;i++){
|
|
|
|
var value=0;
|
|
if(data[i].visualCacheData!=null){
|
|
value=data[i].visualCacheData.value;
|
|
}
|
|
var unit="";
|
|
if(data[i].mPoint!=null){
|
|
unit=data[i].mPoint.unit;
|
|
}
|
|
value=value.toFixed(2);
|
|
value=numOutput(value);
|
|
|
|
var td = "<td style='width: 35%;color: #dbeeff;font-size: 14px;'>"+data[i].name+"</td>";
|
|
var td2 = "<td style='width: 45%;color: #69f6f9;font-size: 14px;text-align:right;padding-right:5px;'>"+value+"</td>";
|
|
var td3 = "<td style='width: 20%;color: #69f6f9;font-size: 14px;padding-right:5px;'>"+unit+"</td>";
|
|
|
|
if(data[i].elementCode=="table0-1"){
|
|
table01Html+="<tr style='height:21px;'>";
|
|
table01Html+=td;
|
|
table01Html+=td2;
|
|
table01Html+=td3;
|
|
table01Html+="</tr>";
|
|
table01Num++;
|
|
}else if(data[i].elementCode=="table0-2"){
|
|
table02Html+="<tr style='height:21px;'>";
|
|
table02Html+=td;
|
|
table02Html+=td2;
|
|
table02Html+=td3;
|
|
table02Html+="</tr>";
|
|
table02Num++;
|
|
}else if(data[i].elementCode=="table1-1"){
|
|
table11Html+="<tr style='height:23px;'>";
|
|
table11Html+=td;
|
|
table11Html+=td2;
|
|
table11Html+=td3;
|
|
table11Html+="</tr>";
|
|
table11Num++;
|
|
}else if(data[i].elementCode=="table3-1"){
|
|
table31Html+="<tr style='height:23px;'>";
|
|
table31Html+=td;
|
|
table31Html+=td2;
|
|
table31Html+=td3;
|
|
table31Html+="</tr>";
|
|
}else if(data[i].elementCode=="table3-2"){
|
|
table32Html+="<tr style='height:23px;'>";
|
|
table32Html+=td;
|
|
table32Html+=td2;
|
|
table32Html+=td3;
|
|
table32Html+="</tr>";
|
|
}else if(data[i].elementCode=="table3-3"){
|
|
table33Html+="<tr style='height:23px;'>";
|
|
table33Html+=td;
|
|
table33Html+=td2;
|
|
table33Html+=td3;
|
|
table33Html+="</tr>";
|
|
table33Num++;
|
|
}else if(data[i].elementCode=="table4-1"){
|
|
table41Html+="<tr style='height:21px;'>";
|
|
table41Html+=td;
|
|
table41Html+=td2;
|
|
table41Html+=td3;
|
|
table41Html+="</tr>";
|
|
table41Num++;
|
|
}
|
|
|
|
}
|
|
|
|
if(table01Num<4){
|
|
for(var n=0;n<(4-table01Num);n++){
|
|
table01Html+="<tr style='height:23px;'>";
|
|
table01Html+="</tr>";
|
|
}
|
|
}
|
|
$("#table0-1").html(table01Html);
|
|
|
|
if(table02Num<4){
|
|
for(var n=0;n<(4-table02Num);n++){
|
|
table02Html+="<tr style='height:23px;'>";
|
|
table02Html+="</tr>";
|
|
}
|
|
}
|
|
$("#table0-2").html(table02Html);
|
|
|
|
if(table11Num<3){
|
|
for(var n=0;n<(3-table11Num);n++){
|
|
table11Html+="<tr style='height:23px;'>";
|
|
table11Html+="</tr>";
|
|
}
|
|
}
|
|
$("#table1-1").html(table11Html);
|
|
|
|
|
|
$("#table3-1").html(table31Html);
|
|
$("#table3-2").html(table32Html);
|
|
|
|
if(table33Num<3){
|
|
for(var n=0;n<(3-table33Num);n++){
|
|
table33Html+="<tr style='height:23px;'>";
|
|
table33Html+="</tr>";
|
|
}
|
|
}
|
|
$("#table3-3").html(table33Html);
|
|
|
|
|
|
if(table41Num<4){
|
|
for(var n=0;n<(4-table41Num);n++){
|
|
table41Html+="<tr style='height:23px;'>";
|
|
table41Html+="</tr>";
|
|
}
|
|
}
|
|
$("#table4-1").html(table41Html);
|
|
|
|
// if(timeSt=="0"){
|
|
// // tableScroll('table1-1',150,40,4);
|
|
// // tableScroll('table1-2',150,40,4);
|
|
// // tableScroll('table2-1',130,40,4);
|
|
// // tableScroll('table2-2',130,40,4);
|
|
// // tableScroll('table2-3',150,40,4);
|
|
// // tableScroll('table3-1',150,40,4);
|
|
// }
|
|
|
|
}
|
|
// timeSt="1";
|
|
}, 'json');
|
|
|
|
}
|
|
|
|
// function changeDiv(){
|
|
// if (changeDivId == 'div31' ){
|
|
// $('#div31').css('opacity','0');
|
|
// setTimeout(
|
|
// function()
|
|
// {
|
|
// $('#div31').css('display','none');
|
|
// $('#div32').css('opacity','0');
|
|
// $('#div32').css('display','block');
|
|
|
|
// setTimeout(
|
|
// function()
|
|
// {
|
|
// $('#div32').css('opacity','1');
|
|
// }, 100);
|
|
// changeDivId="div32";
|
|
|
|
// }, 2000);
|
|
|
|
// }else{
|
|
// $('#div32').css('opacity','0');
|
|
// setTimeout(
|
|
// function()
|
|
// {
|
|
// $('#div32').css('display','none');
|
|
// $('#div31').css('opacity','0');
|
|
// $('#div31').css('display','block');
|
|
|
|
// setTimeout(
|
|
// function()
|
|
// {
|
|
// $('#div31').css('opacity','1');
|
|
// }, 100);
|
|
// changeDivId="div31";
|
|
|
|
// }, 2000);
|
|
|
|
// }
|
|
// }
|
|
|
|
var changeDivId="div31";
|
|
/* 定时器 */
|
|
setInterval(getValue, 300000); //每5分钟切换
|
|
// setInterval(changeDiv, 8000); //每8秒切换
|
|
// setInterval(getValue, 3600000); //每一小时切换
|
|
|
|
// var timeSt="0";
|
|
/* 初始化 */
|
|
$(function () {
|
|
if('${param.backgroundColor}'=='transparent'){
|
|
document.body.style.backgroundColor = '${param.backgroundColor}';
|
|
}else{
|
|
document.body.style.backgroundColor = "#" + '${param.backgroundColor}';
|
|
}
|
|
document.getElementById("main").style.width = document.documentElement.clientWidth + "px";
|
|
document.getElementById("main").style.height = (document.documentElement.clientHeight) + "px";
|
|
|
|
document.getElementById("Image1").src = ""+getRootPath()+"/images/大屏/原水水质.png";
|
|
document.getElementById("Image2").src = ""+getRootPath()+"/images/大屏/进水水质.png";
|
|
// document.getElementById("Image3").src = ""+getRootPath()+"/images/大屏/岳麓大屏1工艺图.png";
|
|
|
|
getValue();
|
|
//console.log("height",document.body.scrollHeight);
|
|
});
|
|
|
|
//获取url地址根目录 当前taomcat下路径
|
|
function getRootPath(){
|
|
var pathName = window.location.pathname.substring(1);
|
|
// var webName = pathName == '' ? '' : pathName.substring(0, pathName.indexOf('/'));
|
|
return window.location.protocol + '//' + window.location.host;
|
|
}
|
|
|
|
function numOutput(num){
|
|
var numpart=String(num).split(".");//将数字通过jq split用小数点分隔为数组对象
|
|
numpart[0]=numpart[0].replace(new RegExp('(\\d)(?=(\\d{3})+$)','ig'),"$1,");
|
|
//将数组对象第一个数据(整数部分)通过正则表达式每三位用逗号分隔
|
|
return numpart.join(".");//把数组通过join方法用.进行拼接
|
|
}
|
|
|
|
</script>
|
|
|
|
</head>
|
|
|
|
<body style="width:100%;height:100%;margin:0;padding:0;overflow-x:hidden;overflow-y:hidden;">
|
|
<div id="main" style="height:100%;width:100%;padding-top:10px;padding-left:10px;padding-right:10px;">
|
|
<div style="height:100%;width:100%;padding-left: 10px;padding-right: 30px;">
|
|
<div style="float:left;width:100%;height:92px;background: #094873;border-radius: 10px;">
|
|
<div style="float:left;width:70px;height:100%;background: #023354;border-radius:10px 0px 0px 10px;">
|
|
<div style="float:left;width:100%;height:60px;padding-left: 13px;padding-right: 13px;padding-top: 19px;">
|
|
<img id="Image1" src="" style="z-index:998;position:relative;height:100%;width:100%;"/>
|
|
</div>
|
|
<div style="float:left;width:100%;height:32px;padding-top:5px;text-align: center;color: #dbeeff;font-size: 14px;">
|
|
原水
|
|
</div>
|
|
</div>
|
|
<div style="float:left;width:calc((100% - 140px - 66px)*0.27);height:100%;background: #023354;border-radius:0px 10px 10px 0px;padding-top: 5px;padding-bottom: 5px;">
|
|
<div style="float:left;width:50%;height:100%;padding-left: 10px;padding-right: 5px;">
|
|
<table id="table0-1" style="width: 100%;height: 100%;"></table>
|
|
</div>
|
|
<div style="float:left;width:50%;height:100%;padding-left: 10px;padding-right: 5px;">
|
|
<table id="table0-2" style="width: 100%;height: 100%;"></table>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="float:left;width:70px;height:100%;">
|
|
<div style="float:left;width:100%;height:60px;padding-left: 13px;padding-right: 13px;padding-top: 19px;">
|
|
<img id="Image2" src="" style="z-index:998;position:relative;height:100%;width:100%;"/>
|
|
</div>
|
|
<div style="float:left;width:100%;height:32px;padding-top:5px;text-align: center;color: #dbeeff;font-size: 14px;">
|
|
出水
|
|
</div>
|
|
</div>
|
|
|
|
<div style="float:left;width:22px;height:100%;background: rgba(193,217,238,0.53);padding-left: 4px;padding-top: 10px;">
|
|
<div style="float:left;width: 14px;
|
|
height: 62px;
|
|
opacity: 1;
|
|
font-size: 14px;
|
|
font-family: Source Han Sans CN, Source Han Sans CN-Regular;
|
|
font-weight: 400;
|
|
text-align: center;
|
|
color: #c1d9ee;
|
|
line-height: 24px;">1系统</div>
|
|
</div>
|
|
|
|
<div style="float:left;width:calc((100% - 140px - 66px)*0.146);height:100%;padding-left: 15px;padding-right: 15px;">
|
|
<table id="table1-1" style="width: 100%;height: 100%;"></table>
|
|
</div>
|
|
|
|
<div style="float:left;width:22px;height:100%;background: rgba(193,217,238,0.53);padding-left: 4px;padding-top: 10px;">
|
|
<div style="float:left;width: 14px;
|
|
height: 62px;
|
|
opacity: 1;
|
|
font-size: 14px;
|
|
font-family: Source Han Sans CN, Source Han Sans CN-Regular;
|
|
font-weight: 400;
|
|
text-align: center;
|
|
color: #c1d9ee;
|
|
line-height: 24px;">3系统</div>
|
|
</div>
|
|
|
|
<div id="div31" style="float:left;width:calc((100% - 140px - 66px)*0.146);height:100%;padding-left: 15px;padding-right: 15px;display:block;transition-duration:2s;opacity: 1;border-right: 1px solid #C1D9EE;">
|
|
<table id="table3-1" style="width: 100%;height: 100%;"></table>
|
|
</div>
|
|
|
|
<div id="div32" style="float:left;width:calc((100% - 140px - 66px)*0.146);height:100%;padding-left: 15px;padding-right: 15px;display:block;transition-duration:2s;opacity: 1;border-right: 1px solid #C1D9EE;">
|
|
<table id="table3-2" style="width: 100%;height: 100%;"></table>
|
|
</div>
|
|
|
|
<div style="float:left;width:calc((100% - 140px - 66px)*0.146);height:100%;padding-left: 15px;padding-right: 15px;">
|
|
<table id="table3-3" style="width: 100%;height: 100%;"></table>
|
|
</div>
|
|
|
|
<div style="float:left;width:22px;height:100%;background: rgba(193,217,238,0.53);padding-left: 4px;padding-top: 10px;">
|
|
<div style="float:left;width: 14px;
|
|
height: 62px;
|
|
opacity: 1;
|
|
font-size: 14px;
|
|
font-family: Source Han Sans CN, Source Han Sans CN-Regular;
|
|
font-weight: 400;
|
|
text-align: center;
|
|
color: #c1d9ee;
|
|
line-height: 24px;">4系统</div>
|
|
</div>
|
|
|
|
<div style="float:left;width:calc((100% - 140px - 66px)*0.146);height:100%;padding-left: 15px;padding-right: 15px;padding-top: 5px;padding-bottom: 5px;">
|
|
<table id="table4-1" style="width: 100%;height: 100%;"></table>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
|
|
</html> |