first commit

This commit is contained in:
2026-01-16 14:13:44 +08:00
commit 903ff8d495
34603 changed files with 8585054 additions and 0 deletions

View File

@ -0,0 +1,275 @@
<%@ 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/inc.jsp"></jsp:include>
<style>
.blueSpanLargeFont {
color: #437099;
font-family: Microsoft YaHei;
}
.blueSpanMediumFont {
color: #74D5FF;
font-family: Microsoft YaHei;
}
.blueSpanSmallFont {
color: #437099;
font-family: Microsoft YaHei;
}
.blueSpanSmallFont {
color: #437099;
font-family: Microsoft YaHei;
}
.whiteSpanLargeFont {
color: white;
font-family: Microsoft YaHei;
}
.whiteSpanMediumFont {
color: white;
font-family: Microsoft YaHei;
}
.whiteSpanSmallFont {
color: white;
font-family: Microsoft YaHei;
}
.deepBlueSpanLargeFont {
color: #4069B2;
font-family: Microsoft YaHei;
font-weight: bold
}
.lightBlueSpanSmallFont {
color: #74D5FF;
font-family: Microsoft YaHei;
}
.UserPanel {
background: #182F52;
border-radius: 20px;
border: 4px solid #426AB2;
}
.userNumTable {
width: 100%;
height: 80%;
padding-left: 5%;
padding-right: 5%;
padding-top: 2%;
border-collapse: separate;
border-spacing: 0px 6px;
text-align: left;
}
</style>
<script type="text/javascript">
function getValue() {
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
//每一条循环判断
for (var i = 0; i < data.length; i++) {
//获取值 和 获取Modbus
if (data[i].getValueType == '${Type_GetValue}' || data[i].getValueType == '${Type_GetModbus}') {
if (data[i].elementCode.indexOf("Status") != -1) {//获取车间状态关键字
var code = data[i].elementCode;
if (document.getElementById(code) && data[i].mPoint.parmvalue) {//判断存不存在
//赋值
var src = "";
if (data[i].mPoint.parmvalue == '生产中') {
src = "../../../IMG/material/生产中.jpg"
} else if (data[i].mPoint.parmvalue == '停产') {
src = "../../../IMG/material/停产.jpg"
} else if (data[i].mPoint.parmvalue == '未清场') {
src = "../../../IMG/material/未清场.jpg"
} else if (data[i].mPoint.parmvalue == '已清场') {
src = "../../../IMG/material/已清场.jpg"
}
document.getElementById(code).src = src;
document.getElementById(code).style.width = document.documentElement.clientWidth * 0.12 + "px";
document.getElementById(code).style.height = document.documentElement.clientHeight * 0.13 + "px";
}
} else {
var code = data[i].elementCode;
document.getElementById(code).innerHTML = data[i].mPoint.parmvalue;
}
} 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 {
}
}
}, 'json');
}
/* 定时器 */
setInterval(getValue, 300000); //<!--每隔5分钟刷新一次-->
/* 初始化 */
$(function () {
getValue();
//console.log("height",document.body.scrollHeight);
document.body.style.backgroundColor = "#" + '${param.backgroundColor}';
$("#clock").css("font-size", (document.documentElement.clientWidth * 0.08 + "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"));
$(".blueSpanLargeFont").css("font-size", (document.body.offsetWidth * 0.06 + "px"));
$(".blueSpanMediumFont").css("font-size", (document.body.offsetWidth * 0.045 + "px"));
$(".blueSpanSmallFont").css("font-size", (document.body.offsetWidth * 0.03 + "px"));
$(".whiteSpanSmallFont").css("font-size", (document.body.offsetWidth * 0.0469 + "px"));
$(".deepBlueSpanLargeFont").css("font-size", (document.body.offsetWidth * 0.05 + "px"));
$(".lightBlueSpanSmallFont").css("font-size", (document.body.offsetWidth * 0.034 + "px"));
});
</script>
</head>
<body style="width:100%;height:100%;margin:0;padding:0;overflow-x:hidden;overflow-y:hidden">
<div style="width:46%;height:100%;float:left">
<table
style="width:100%;height:100%;border-collapse:separate;border-spacing:0px 6px;padding-left:5%;padding-right:5%;padding-top:5%;text-align: left;">
<tr>
<td>
<span id="area1" class="blueSpanSmallFont" style="font-weight: bold;"></span>
</td>
<td>
<img id="area1Status" src="" style="width:100%;height:100%;" alt="" />
</td>
<td align="right">
<span id="area1ActUserNum" class="lightBlueSpanSmallFont" style="font-weight: bold;"></span>
<span class="blueSpanSmallFont" style="font-weight: bold;">/</span>
<span id="area1TotalUserNum" class="blueSpanSmallFont" style="font-weight: bold;"></span>
</td>
</tr>
<tr>
<td>
<span id="area2" class="blueSpanSmallFont" style="font-weight: bold;"></span>
</td>
<td>
<img id="area2Status" src="" alt="" />
</td>
<td align="right">
<span id="area2ActUserNum" class="lightBlueSpanSmallFont" style="font-weight: bold;"></span>
<span class="blueSpanSmallFont" style="font-weight: bold;">/</span>
<span id="area2TotalUserNum" class="blueSpanSmallFont" style="font-weight: bold;"></span>
</td>
</tr>
<tr>
<td>
<span id="area3" class="blueSpanSmallFont" style="font-weight: bold;"></span>
</td>
<td>
<img id="area3Status" src="" alt="" />
</td>
<td align="right">
<span id="area3ActUserNum" class="lightBlueSpanSmallFont" style="font-weight: bold;"></span>
<span class="blueSpanSmallFont" style="font-weight: bold;">/</span>
<span id="area3TotalUserNum" class="blueSpanSmallFont" style="font-weight: bold;"></span>
</td>
</tr>
<tr>
<td>
<span id="area4" class="blueSpanSmallFont" style="font-weight: bold;"></span>
</td>
<td>
<img id="area4Status" src="" alt="" />
</td>
<td align="right">
<span id="area4ActUserNum" class="lightBlueSpanSmallFont" style="font-weight: bold;"></span>
<span class="blueSpanSmallFont" style="font-weight: bold;">/</span>
<span id="area4TotalUserNum" class="blueSpanSmallFont" style="font-weight: bold;"></span>
</td>
</tr>
</table>
</div>
<div style="width:46%;height:100%;float:right">
<table
style="width:100%;height:100%;border-collapse:separate;border-spacing:0px 6px;padding-left:5%;padding-right:5%;padding-top:5%;text-align: left;">
<tr>
<td>
<span id="area5" class="blueSpanSmallFont" style="font-weight: bold;"></span>
</td>
<td>
<img id="area5Status" src="" style="width:100%" alt="" />
</td>
<td align="right">
<span id="area5ActUserNum" class="lightBlueSpanSmallFont" style="font-weight: bold;"></span>
<span class="blueSpanSmallFont" style="font-weight: bold;">/</span>
<span id="area5TotalUserNum" class="blueSpanSmallFont" style="font-weight: bold;"></span>
</td>
</tr>
<tr>
<td>
<span id="area6" class="blueSpanSmallFont" style="font-weight: bold;"></span>
</td>
<td>
<img id="area6Status" src="" style="width:100%" alt="" />
</td>
<td align="right">
<span id="area6ActUserNum" class="lightBlueSpanSmallFont" style="font-weight: bold;"></span>
<span class="blueSpanSmallFont" style="font-weight: bold;">/</span>
<span id="area6TotalUserNum" class="blueSpanSmallFont" style="font-weight: bold;"></span>
</td>
</tr>
<tr>
<td>
<span id="area7" class="blueSpanSmallFont" style="font-weight: bold;"></span>
</td>
<td>
<img id="area7Status" src="" style="width:100%" alt="" />
</td>
<td align="right">
<span id="area7ActUserNum" class="lightBlueSpanSmallFont" style="font-weight: bold;"></span>
<span class="blueSpanSmallFont" style="font-weight: bold;">/</span>
<span id="area7TotalUserNum" class="blueSpanSmallFont" style="font-weight: bold;"></span>
</td>
</tr>
<tr>
<td>
<span id="area8" class="blueSpanSmallFont" style="font-weight: bold;"></span>
</td>
<td>
<img id="area8Status" src="" style="width:100%" alt="" />
</td>
<td align="right">
<span id="area8ActUserNum" class="lightBlueSpanSmallFont" style="font-weight: bold;"></span>
<span class="blueSpanSmallFont" style="font-weight: bold;">/</span>
<span id="area8TotalUserNum" class="blueSpanSmallFont" style="font-weight: bold;"></span>
</td>
</tr>
</table>
</div>
</body>
</html>

View File

@ -0,0 +1,225 @@
<%@ 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/inc.jsp"></jsp:include>
<style>
.blueSpanLargeFont {
color: #437099;
font-family: Microsoft YaHei;
}
.blueSpanMediumFont {
color: #74D5FF;
font-family: Microsoft YaHei;
}
.titleSpanFont {
color: #437099;
font-family: Microsoft YaHei;
}
.blueSpanSmallFont {
color: #437099;
font-family: Microsoft YaHei;
}
.whiteSpanLargeFont {
color: white;
font-family: Microsoft YaHei;
}
.whiteSpanMediumFont {
color: white;
font-family: Microsoft YaHei;
}
.whiteSpanSmallFont {
color: white;
font-family: Microsoft YaHei;
}
.deepBlueSpanLargeFont {
color: #4069B2;
font-family: Microsoft YaHei;
font-weight: bold
}
.lightBlueSpanSmallFont {
color: #74D5FF;
font-family: Microsoft YaHei;
}
.UserPanel {
background: #182F52;
border-radius: 20px;
border: 4px solid #426AB2;
}
.userNumTable {
width: 100%;
height: 80%;
padding-left: 5%;
padding-right: 5%;
padding-top: 2%;
border-collapse: separate;
border-spacing: 0px 6px;
text-align: left;
}
</style>
<script type="text/javascript">
function getValue() {
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
//每一条循环判断
//console.log("data", data);
for (var i = 0; i < data.length; i++) {
//获取值 和 获取Modbus
if (data[i].getValueType == '${Type_GetValue}' || data[i].getValueType == '${Type_GetModbus}') {
if (data[i].elementCode.indexOf("Status") != -1) {//获取车间状态关键字
var code = data[i].elementCode;
if (document.getElementById(code) && data[i].mPoint.parmvalue) {//判断存不存在
//赋值
var src = "";
if (data[i].mPoint.parmvalue == '生产中') {
src = "../../../IMG/material/生产中.jpg"
} else if (data[i].mPoint.parmvalue == '停产') {
src = "../../../IMG/material/停产.jpg"
} else if (data[i].mPoint.parmvalue == '未清场') {
src = "../../../IMG/material/未清场.jpg"
} else if (data[i].mPoint.parmvalue == '已清场') {
src = "../../../IMG/material/已清场.jpg"
}
document.getElementById(code).src = src;
document.getElementById(code).style.width = document.documentElement.clientWidth * 0.25 + "px";
document.getElementById(code).style.height = document.documentElement.clientHeight * 0.13 + "px";
}
} else {
var code = data[i].elementCode;
document.getElementById(code).innerHTML = data[i].mPoint.parmvalue;
}
} 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 {
if (data[i].elementCode.indexOf("Name") != -1) {//获取车间名称关键字
var code = data[i].elementCode;
if (document.getElementById(code)) {//判断存不存在
//赋值
document.getElementById(code).innerHTML = data[i].name;
}
}
}
}
}, 'json');
}
/* 定时器 */
setInterval(getValue, 300000); //<!--每隔5分钟刷新一次-->
/* 初始化 */
$(function () {
getValue();
//console.log("height",document.body.scrollHeight);
document.body.style.backgroundColor = "#" + '${param.backgroundColor}';
$(".blueSpanSmallFont").css("font-size", (document.body.offsetWidth * 0.057 + "px"));
$(".lightBlueSpanSmallFont").css("font-size", (document.body.offsetWidth * 0.065 + "px"));
$(".titleSpanFont").css("font-size", (document.body.offsetWidth * 0.045 + "px"));
});
</script>
</head>
<body style="width:100%;height:100%;margin:0;padding:0;overflow-x:hidden;overflow-y:hidden">
<div style="width:100%;height:100%;">
<table
style="width:100%;height:100%;border-collapse:separate;border-spacing:0px 6px;padding-left:5%;padding-right:5%;padding-right:2%;text-align: left;">
<tr>
<td align="center">
<span class="titleSpanFont" style="font-weight: bold;">区域名称</span>
</td>
<td align="center">
<span class="titleSpanFont" style="font-weight: bold;">区域状态</span>
</td>
<td align="right">
<span class="titleSpanFont" style="font-weight: bold;">当前P/最大P</span>
</td>
</tr>
<tr>
<td>
<span id="area1Name" class="blueSpanSmallFont" style="font-weight: bold;"></span>
</td>
<td>
<img id="area1Status" src="" style="width:100%;height:100%;" alt="" />
</td>
<td align="right">
<span id="area1ActUserNum" class="lightBlueSpanSmallFont" style="font-weight: bold;"></span>
<span class="blueSpanSmallFont" style="font-weight: bold;">/</span>
<span id="area1TotalUserNum" class="blueSpanSmallFont" style="font-weight: bold;"></span>
</td>
</tr>
<tr>
<td>
<span id="area2Name" class="blueSpanSmallFont" style="font-weight: bold;"></span>
</td>
<td>
<img id="area2Status" src="" alt="" />
</td>
<td align="right">
<span id="area2ActUserNum" class="lightBlueSpanSmallFont" style="font-weight: bold;"></span>
<span class="blueSpanSmallFont" style="font-weight: bold;">/</span>
<span id="area2TotalUserNum" class="blueSpanSmallFont" style="font-weight: bold;"></span>
</td>
</tr>
<tr>
<td>
<span id="area3Name" class="blueSpanSmallFont" style="font-weight: bold;"></span>
</td>
<td>
<img id="area3Status" src="" alt="" />
</td>
<td align="right">
<span id="area3ActUserNum" class="lightBlueSpanSmallFont" style="font-weight: bold;"></span>
<span class="blueSpanSmallFont" style="font-weight: bold;">/</span>
<span id="area3TotalUserNum" class="blueSpanSmallFont" style="font-weight: bold;"></span>
</td>
</tr>
<tr>
<td>
<span id="area4Name" class="blueSpanSmallFont" style="font-weight: bold;"></span>
</td>
<td>
<img id="area4Status" src="" alt="" />
</td>
<td align="right">
<span id="area4ActUserNum" class="lightBlueSpanSmallFont" style="font-weight: bold;"></span>
<span class="blueSpanSmallFont" style="font-weight: bold;">/</span>
<span id="area4TotalUserNum" class="blueSpanSmallFont" style="font-weight: bold;"></span>
</td>
</tr>
</table>
</div>
</body>
</html>

View File

@ -0,0 +1,247 @@
<%@ 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/inc.jsp"></jsp:include>
<script type="text/javascript">
var colors = ['#75BC63','#D12FD6','#00c200', '#d14a61', '#675bba', '#5793f3'];
var symbols = ['circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'];
/* 请求数据 */
function getValue() {
//折线图
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
//console.log("data", data);
var yaAxis = [];
var series = [];
var measuredt = [];
var legendName = [];
for (var d = 0; d < data.length; d++) {
if (data[d].getValueType == '${Type_GetHistory}') {
var ArrayDatas = data[d].mPointHistory//eval("(" + data + ")");
var offset = 60;
//y轴
var yobj = {
type: 'value',
scale: true,
name: data[d].name + "(" + data[d].mPoint.unit + ")",//data[d].mPoint.parmname
nameTextStyle: {
color: '#fff',
fontSize: 18
},
axisTick: {
show: false,
},
axisLine: {
lineStyle: {
color: '#97C8E6',
width: 2,
}
},
axisLabel: {
color: '#fff',
formatter: '{value}' + data[d].mPoint.unit,
},
splitLine: {
show: false
},
//max: 1200,
min: function (value) {
return value.min;
},
boundaryGap: [0.2, 0.2]
}
if (d == 0) {
yobj.position = 'left';
yobj.offset = 0;
} else {
yobj.position = 'right';
yobj.offset = offset * (d - 1);
}
if (d >= 2) {
yobj.show = false;
}
yaAxis.push(yobj);
//series
var sobj = {
name: data[d].name,//data[d].mPoint.parmname
xAxisIndex: 1,
yAxisIndex: d,
symbol: symbols[d % symbols.length],
symbolSize: 10,
itemStyle: {
color: colors[d % colors.length],
borderWidth: 1,
},
lineStyle: {
width: 3,
},
};
if (data[d].style != null && data[d].style != "") {
sobj.type = data[d].style;
} else {
sobj.type = "line";
}
//legend名称
legendName.push(data[d].name);//data[d].mPoint.parmname
var dataSeries = [];
for (var j = 0; j < ArrayDatas.length; j++) {
//x轴 只取data第一条数据进行生成x轴
if(d == 0){
measuredt.push(ArrayDatas[j].measuredt.substring(5, 10) + "-" + ArrayDatas[j].measuredt.substring(11, 13));
}
dataSeries.push(ArrayDatas[j].parmvalue);
}
sobj.data = dataSeries;
series.push(sobj);
}
}
//赋值 x轴 y轴 series
optionBL.legend.data = legendName;
optionBL.xAxis[0].data = measuredt;
optionBL.yAxis = yaAxis;
optionBL.series = series;
//图标加载
//console.log("option",optionBL);
BLChart.setOption(optionBL);
}, 'json');
}
/* 定时器 */
setInterval(getValue, 300000); //<!--每隔5分钟刷新一次-->
//setInterval(change, 60000); //每1分钟切换
/* 初始化 */
$(function () {
document.body.style.backgroundColor = "#" + '${param.backgroundColor}';
//getValue();
//console.log("height",document.body.scrollHeight);
});
</script>
</head>
<body style="width:100%;height:100%;margin:0;padding:0;overflow-x:hidden;overflow-y:hidden">
<div id="barline" style="height:95%;width:100%"></div>
<script language="JavaScript">
/* 构造图表 */
var BLChart = echarts.init(document.getElementById('barline'));
optionBL = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#283b56'
}
}
},
grid: {
left: '5%',
right: '5%',
bottom: '7%',
top: '10%',
},
legend: {
left: 'center',
itemGap: 100,
textStyle: {
color: '#fff',
fontSize: 20
},
data: ['称量件数']
},
dataZoom: {
show: false,
start: 0,
end: 100
},
xAxis: [
{
type: 'category',
axisTick: {
show: false,
},
axisLine: {
lineStyle: {
color: '#97C8E6',
width: 2,
}
},
axisLabel: {
color: '#fff'
},
boundaryGap: true,
data: ['0:00', '1:00', '2:00', '3:00', '4:00', '5:00', '6:00', '7:00', '8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00']
},
],
yAxis: [{
type: 'value',
scale: true,
name: '件',
nameTextStyle: {
color: '#fff',
fontSize: 18
},
axisTick: {
show: false,
},
axisLine: {
lineStyle: {
color: '#97C8E6',
width: 2,
}
},
axisLabel: {
color: '#fff'
},
splitLine: {
show: false
},
//max: 1200,
min: 0,
boundaryGap: [0.2, 0.2]
}
],
series: [
{
name: '称量件数',
type: 'bar',
itemStyle: {
color: '#426AB2',
},
data: (function () {
var res = [];
var len = 24;
while (len--) {
res.push(Math.round(Math.random() * 1000));
}
return res;
})()
},
]
};
BLChart.setOption(optionBL);
</script>
</body>
</html>

View File

@ -0,0 +1,190 @@
<%@ 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>
<script type="text/javascript">
/* 请求数据 */
function getValue() {
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
// console.log(data);
if(data!=''){
var legendDatas=[];
var series=[];
var title="";
for(var i=0;i<data.length;i++){
if(data[i].elementCode=="line"){
legendDatas.push(data[i].name);
// var datas=new Array();
// for(var j=0;j<data[i].mPointHistory.length;j++){
// const his=data[i].mPointHistory[j];
// var ddata=new Array();
// ddata.push(his.measuredt.substring(0,13));
// ddata.push(his.parmvalue);
// datas.push(ddata);
// }
series.push({
data: data[i].jsonArray,
name: data[i].name,
type: 'line',
symbol:'none',
smooth: true
});
}else if(data[i].elementCode=="title"){
title=data[i].valueUrl;
}
}
getChart(title,legendDatas,series);
}
}, 'json');
}
var colors=[
"#2ec7c9",
"#b6a2de",
"#5ab1ef",
"#ffb980",
"#d87a80",
"#8d98b3",
"#e5cf0d",
"#97b552",
"#95706d",
"#dc69aa",
"#07a2a4",
"#9a7fd1",
"#588dd5",
"#f5994e",
"#c05050",
"#59678c",
"#c9ab00",
"#7eb00a",
"#6f5553",
"#c14089"
];
function getChart(title,legendDatas,series){
document.getElementById("chart").removeAttribute("_echarts_instance_");
var mychart=echarts.init(document.getElementById('chart'));
var option = {
color:colors,
title: {
text: title,
top:10,
left:20,
textStyle:{
color:'#FFFFFF'
}
},
legend: {
data: legendDatas,
top:10,
right:20,
textStyle:{
color:'#FFFFFF'
}
},
tooltip: {
trigger: 'axis'
},
grid:{
left: '4%', // 与容器左侧的距离
right: '4%', // 与容器右侧的距离
// top: '10%', // 与容器顶部的距离
bottom: '10%', // 与容器底部的距离
containLabel:true
},
xAxis: {
type:"time",
axisLine:{
lineStyle:{
color:'#ffffff',
}
},
axisTick: {
show: false
},
splitLine: {
show: false
}
},
yAxis: {
type : 'value',
// scale:true,
max: function (value) {
return (value.max*1.2).toFixed(2);
},
axisLine:{
lineStyle:{
color:'#ffffff',
}
},
splitLine: {
show: true,
lineStyle:{
color: '#8C8C8C'
}
}
},
series: series
};
// console.log(option);
mychart.setOption(option,true);
}
/* 定时器 */
setInterval(getValue, 300000); //每5分钟切换
// setInterval(getValue, 3600000); //每一小时切换
/* 初始化 */
$(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";
getValue();
});
//获取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;
}
</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:20px;padding-left:10px;padding-right:10px;">
<div id="chart" style="height:100%;width:100%;">
</div>
</div>
</body>
</html>

View File

@ -0,0 +1,314 @@
<%@ 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_GetHourHistory", 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">
//获取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方法用.进行拼接
}
/* 请求数据 */
function getValue() {
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
// console.log(data);
if(data!=''){
for(var i=0;i<data.length;i++){
if(data[i].elementCode=="branchCompanyNum"){
$('#branchCompanyNum').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
}else if(data[i].elementCode=="peopleNum"){
$('#peopleNum').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
}else if(data[i].elementCode=="regionDWater"){
$('#regionDWater').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
}else if(data[i].elementCode=="regionYWater"){
$('#regionYWater').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
}else if(data[i].elementCode=="regionTWater"){
$('#regionTWater').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
}else if(data[i].elementCode=="companyDWater1"){
$('#companyDWater1').text(numOutput((data[i].visualCacheData.value).toFixed(1)));
}else if(data[i].elementCode=="companyDWater2"){
$('#companyDWater2').text(numOutput((data[i].visualCacheData.value).toFixed(1)));
}else if(data[i].elementCode=="companyDWater3"){
$('#companyDWater3').text(numOutput((data[i].visualCacheData.value).toFixed(1)));
}else if(data[i].elementCode=="companyDWater4"){
$('#companyDWater4').text(numOutput((data[i].visualCacheData.value).toFixed(1)));
}else if(data[i].elementCode=="companyDWater5"){
$('#companyDWater5').text(numOutput((data[i].visualCacheData.value).toFixed(1)));
}else if(data[i].elementCode=="companyDWater6"){
$('#companyDWater6').text(numOutput((data[i].visualCacheData.value).toFixed(1)));
}else if(data[i].elementCode=="companyYWater1"){
$('#companyYWater1').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
}else if(data[i].elementCode=="companyYWater2"){
$('#companyYWater2').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
}else if(data[i].elementCode=="companyYWater3"){
$('#companyYWater3').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
}else if(data[i].elementCode=="companyYWater4"){
$('#companyYWater4').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
}else if(data[i].elementCode=="companyYWater5"){
$('#companyYWater5').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
}else if(data[i].elementCode=="companyYWater6"){
$('#companyYWater6').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
}else if(data[i].elementCode=="companyTWater1"){
$('#companyTWater1').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
}else if(data[i].elementCode=="companyTWater2"){
$('#companyTWater2').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
}else if(data[i].elementCode=="companyTWater3"){
$('#companyTWater3').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
}else if(data[i].elementCode=="companyTWater4"){
$('#companyTWater4').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
}else if(data[i].elementCode=="companyTWater5"){
$('#companyTWater5').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
}else if(data[i].elementCode=="companyTWater6"){
$('#companyTWater6').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
}
}
}
}, 'json');
}
/* 定时器 */
setInterval(getValue, 300000); //每5分钟切换
// setInterval(getValue, 3600000); //每一小时切换
/* 初始化 */
$(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";
getValue();
//console.log("height",document.body.scrollHeight);
});
var websocket = new WebSocket('ws://' + window.location.host + ext.contextPath + '/chat?userName=大屏');
function doGo(planId){
//清除交互
var clearInterationJsonStr = "[{'type':'clearInteraction'}]";
websocket.send(clearInterationJsonStr);
var jsonstr = "[{'type':'plan','id':'" + planId + "'}]";
websocket.send(jsonstr);
}
</script>
</head>
<body style="width:100%;height:100%;margin:0;padding:0;overflow-x:hidden;overflow-y:hidden;">
<div style="height:100%;width:100%;">
<div id="main" style="height:100%;width:100%;border-radius: 8px;">
<div style="position: absolute;width: 350px;height:80px;top:80px;left:250px;">
<div style="float: left;width: 30%;height: 100%;line-height:55px;color: #69F6F9;font-size: 24px;font-family: Helvetica;text-align: right;">现有员工</div>
<div style="float: left;width: 50%;height: 100%;color: #69F6F9;font-size: 35px;font-family: Helvetica;text-align: center;"><span id="peopleNum"></span><span> 人</span></div>
</div>
<div style="position: absolute;width: 350px;height:80px;top:80px;left:650px;">
<div style="float: left;width: 30%;height: 100%;line-height:55px;color: #69F6F9;font-size: 24px;font-family: Helvetica;text-align: right;">项目公司</div>
<div style="float: left;width: 50%;height: 100%;color: #69F6F9;font-size: 35px;font-family: Helvetica;text-align: center;"><span id="branchCompanyNum"></span><span> 家</span></div>
</div>
<div style="width:255px;height:136px;background: linear-gradient(149deg,#02395d 13%, rgba(0,16,107,0.5) 90%);border: 3px solid #00edf2;border-radius: 9px;position: absolute;top:610px;left:330px;">
<div style="float:left;width:100%;height:45.5px;line-height:45.4px;text-align:center;color:#bcdfff;font-size: 16px;"><span>大连区域(</span><span id="regionDWater" style="color:#a5f1f7;font-size: 20px;"></span><span>万m³/D</span></div>
<div style="float:left;width:100%;height:45.5px;">
<div style="float:left;width:50%;line-height:45.4px;text-align:right;color:#bcdfff;font-size: 16px;">昨日水量:</div>
<div id="regionYWater" style="float:left;width:50%;line-height:45.4px;text-align:left;color:#347EFB;font-size: 20px;"></div>
</div>
<div style="float:left;width:100%;height:45.5px;">
<div style="float:left;width:50%;line-height:45.4px;text-align:right;color:#bcdfff;font-size: 16px;">今日水量:</div>
<div id="regionTWater" style="float:left;width:50%;line-height:45.4px;text-align:left;color:#347EFB;font-size: 20px;"></div>
</div>
</div>
<div onclick="doGo('5fd7d6aa78824bb2a54b600fb69fda9d');" style="cursor: pointer;width:230px;height:120px;background: rgba(3,5,18,0.25);border-radius: 9px;position:absolute;top:160px;left:50px;">
<table style="width:100%;height:100%;table-layout: fixed;text-align: center;vertical-align: middle;font-family: PingFangSC, PingFangSC-Semibold;">
<tr style="height:38px;">
<td style="width:91px;background:#76afdb;border-radius: 18px 0px 28px 0px;color:rgba(52,241,255,1);font-size:16px;font-weight: 600;letter-spacing:2px;">泉水河</td>
<td style="width:30px;"></td>
<td style="text-align:left;"><span id="companyDWater1" style="font-size:20px;color:#a5f1f7;"></span><span style="font-size:14px;color:#ffffff;"> 万m³/D</span></td>
</tr>
<tr>
<td colspan="2" style="text-align:right;font-size: 14px;color: #ffffff;">
昨日水量:
</td>
<td id="companyYWater1" style="text-align:left;font-size:20px;color:#347EFB;">
</td>
</tr>
<tr>
<td colspan="2" style="text-align:right;font-size: 14px;color: #ffffff;">
今日水量:
</td>
<td id="companyTWater1" style="text-align:left;font-size:20px;color:#347EFB;">
</td>
</tr>
</table>
</div>
<div style="width:230px;height:120px;background: rgba(3,5,18,0.25);border-radius: 9px;position:absolute;top:460px;left:50px;">
<table style="width:100%;height:100%;table-layout: fixed;text-align: center;vertical-align: middle;font-family: PingFangSC, PingFangSC-Semibold;">
<tr style="height:38px;">
<td style="width:91px;background:#76afdb;border-radius: 18px 0px 28px 0px;color:rgba(52,241,255,1);font-size:16px;font-weight: 600;letter-spacing:2px;">老虎滩</td>
<td style="width:30px;"></td>
<td style="text-align:left;"><span id="companyDWater2" style="font-size:20px;color:#a5f1f7;"></span><span style="font-size:14px;color:#ffffff;"> 万m³/D</span></td>
</tr>
<tr>
<td colspan="2" style="text-align:right;font-size: 14px;color: #ffffff;">
昨日水量:
</td>
<td id="companyYWater2" style="text-align:left;font-size:20px;color:#347EFB;">
</td>
</tr>
<tr>
<td colspan="2" style="text-align:right;font-size: 14px;color: #ffffff;">
今日水量:
</td>
<td id="companyTWater2" style="text-align:left;font-size:20px;color:#347EFB;">
</td>
</tr>
</table>
</div>
<div style="width:230px;height:120px;background: rgba(3,5,18,0.25);border-radius: 9px;position:absolute;top:760px;left:50px;">
<table style="width:100%;height:100%;table-layout: fixed;text-align: center;vertical-align: middle;font-family: PingFangSC, PingFangSC-Semibold;">
<tr style="height:38px;">
<td style="width:91px;background:#76afdb;border-radius: 18px 0px 28px 0px;color:rgba(52,241,255,1);font-size:16px;font-weight: 600;letter-spacing:2px;">凌水河</td>
<td style="width:30px;"></td>
<td style="text-align:left;"><span id="companyDWater3" style="font-size:20px;color:#a5f1f7;"></span><span style="font-size:14px;color:#ffffff;"> 万m³/D</span></td>
</tr>
<tr>
<td colspan="2" style="text-align:right;font-size: 14px;color: #ffffff;">
昨日水量:
</td>
<td id="companyYWater3" style="text-align:left;font-size:20px;color:#347EFB;">
</td>
</tr>
<tr>
<td colspan="2" style="text-align:right;font-size: 14px;color: #ffffff;">
今日水量:
</td>
<td id="companyTWater3" style="text-align:left;font-size:20px;color:#347EFB;">
</td>
</tr>
</table>
</div>
<div style="width:230px;height:120px;background: rgba(3,5,18,0.25);border-radius: 9px;position:absolute;top:160px;left:1200px;">
<table style="width:100%;height:100%;table-layout: fixed;text-align: center;vertical-align: middle;font-family: PingFangSC, PingFangSC-Semibold;">
<tr style="height:38px;">
<td style="width:91px;background:#76afdb;border-radius: 18px 0px 28px 0px;color:rgba(52,241,255,1);font-size:16px;font-weight: 600;letter-spacing:2px;">大连湾</td>
<td style="width:30px;"></td>
<td style="text-align:left;"><span id="companyDWater4" style="font-size:20px;color:#a5f1f7;"></span><span style="font-size:14px;color:#ffffff;"> 万m³/D</span></td>
</tr>
<tr>
<td colspan="2" style="text-align:right;font-size: 14px;color: #ffffff;">
昨日水量:
</td>
<td id="companyYWater4" style="text-align:left;font-size:20px;color:#347EFB;">
</td>
</tr>
<tr>
<td colspan="2" style="text-align:right;font-size: 14px;color: #ffffff;">
今日水量:
</td>
<td id="companyTWater4" style="text-align:left;font-size:20px;color:#347EFB;">
</td>
</tr>
</table>
</div>
<div style="width:230px;height:120px;background: rgba(3,5,18,0.25);border-radius: 9px;position:absolute;top:460px;left:1200px;">
<table style="width:100%;height:100%;table-layout: fixed;text-align: center;vertical-align: middle;font-family: PingFangSC, PingFangSC-Semibold;">
<tr style="height:38px;">
<td style="width:91px;background:#76afdb;border-radius: 18px 0px 28px 0px;color:rgba(52,241,255,1);font-size:16px;font-weight: 600;letter-spacing:1px;">三十里堡</td>
<td style="width:30px;"></td>
<td style="text-align:left;"><span id="companyDWater5" style="font-size:20px;color:#a5f1f7;"></span><span style="font-size:14px;color:#ffffff;"> 万m³/D</span></td>
</tr>
<tr>
<td colspan="2" style="text-align:right;font-size: 14px;color: #ffffff;">
昨日水量:
</td>
<td id="companyYWater5" style="text-align:left;font-size:20px;color:#347EFB;">
</td>
</tr>
<tr>
<td colspan="2" style="text-align:right;font-size: 14px;color: #ffffff;">
今日水量:
</td>
<td id="companyTWater5" style="text-align:left;font-size:20px;color:#347EFB;">
</td>
</tr>
</table>
</div>
<div style="width:230px;height:120px;background: rgba(3,5,18,0.25);border-radius: 9px;position:absolute;top:760px;left:1200px;">
<table style="width:100%;height:100%;table-layout: fixed;text-align: center;vertical-align: middle;font-family: PingFangSC, PingFangSC-Semibold;">
<tr style="height:38px;">
<td style="width:91px;background:#76afdb;border-radius: 18px 0px 28px 0px;color:rgba(52,241,255,1);font-size:16px;font-weight: 600;letter-spacing:6px;">后海</td>
<td style="width:30px;"></td>
<td style="text-align:left;"><span id="companyDWater6" style="font-size:20px;color:#a5f1f7;"></span><span style="font-size:14px;color:#ffffff;"> 万m³/D</span></td>
</tr>
<tr>
<td colspan="2" style="text-align:right;font-size: 14px;color: #ffffff;">
昨日水量:
</td>
<td id="companyYWater6" style="text-align:left;font-size:20px;color:#347EFB;">
</td>
</tr>
<tr>
<td colspan="2" style="text-align:right;font-size: 14px;color: #ffffff;">
今日水量:
</td>
<td id="companyTWater6" style="text-align:left;font-size:20px;color:#347EFB;">
</td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>

View File

@ -0,0 +1,286 @@
<%@ 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_GetHourHistory", 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">
//获取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方法用.进行拼接
}
/* 请求数据 */
function getValue() {
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
//console.log(data);
if(data!=''){
for(var i=0;i<data.length;i++){
if(data[i].elementCode=="branchCompanyNum"){
$('#branchCompanyNum').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
}else if(data[i].elementCode=="peopleNum"){
$('#peopleNum').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
}else if(data[i].elementCode=="waterDesign1"){
$('#waterDesign1').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
}else if(data[i].elementCode=="waterDesign2"){
$('#waterDesign2').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
}else if(data[i].elementCode=="waterDesign3"){
$('#waterDesign3').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
}else if(data[i].elementCode=="waterDesign4"){
$('#waterDesign4').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
}else if(data[i].elementCode=="waterDesign5"){
$('#waterDesign5').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
}else if(data[i].elementCode=="waterDesign6"){
$('#waterDesign6').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
}else if(data[i].elementCode=="waterDesign7"){
$('#waterDesign7').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
}else if(data[i].elementCode=="waterDesign8"){
$('#waterDesign8').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
}else if(data[i].elementCode=="companyNum1"){
$('#companyNum1').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
}else if(data[i].elementCode=="companyNum2"){
$('#companyNum2').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
}else if(data[i].elementCode=="companyNum3"){
$('#companyNum3').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
}else if(data[i].elementCode=="companyNum4"){
$('#companyNum4').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
}else if(data[i].elementCode=="companyNum5"){
$('#companyNum5').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
}else if(data[i].elementCode=="companyNum6"){
$('#companyNum6').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
}else if(data[i].elementCode=="companyNum7"){
$('#companyNum7').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
}else if(data[i].elementCode=="companyNum8"){
$('#companyNum8').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
}else if(data[i].elementCode=="yesterdayWater1"){
$('#yesterdayWater1').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
}else if(data[i].elementCode=="yesterdayWater2"){
$('#yesterdayWater2').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
}else if(data[i].elementCode=="yesterdayWater3"){
$('#yesterdayWater3').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
}else if(data[i].elementCode=="yesterdayWater4"){
$('#yesterdayWater4').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
}else if(data[i].elementCode=="yesterdayWater5"){
$('#yesterdayWater5').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
}else if(data[i].elementCode=="yesterdayWater6"){
$('#yesterdayWater6').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
}else if(data[i].elementCode=="yesterdayWater7"){
$('#yesterdayWater7').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
}else if(data[i].elementCode=="yesterdayWater8"){
$('#yesterdayWater8').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
}else if(data[i].elementCode=="todayWater1"){
$('#todayWater1').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
}else if(data[i].elementCode=="todayWater2"){
$('#todayWater2').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
}else if(data[i].elementCode=="todayWater3"){
$('#todayWater3').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
}else if(data[i].elementCode=="todayWater4"){
$('#todayWater4').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
}else if(data[i].elementCode=="todayWater5"){
$('#todayWater5').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
}else if(data[i].elementCode=="todayWater6"){
$('#todayWater6').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
}else if(data[i].elementCode=="todayWater7"){
$('#todayWater7').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
}else if(data[i].elementCode=="todayWater8"){
$('#todayWater8').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
}
}
}
}, 'json');
}
/* 定时器 */
setInterval(getValue, 300000); //每5分钟切换
// setInterval(getValue, 3600000); //每一小时切换
/* 初始化 */
$(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";
getValue();
//console.log("height",document.body.scrollHeight);
});
var websocket = new WebSocket('ws://' + window.location.host + ext.contextPath + '/chat?userName=大屏');
function doGo(planId){
//清除交互
var clearInterationJsonStr = "[{'type':'clearInteraction'}]";
websocket.send(clearInterationJsonStr);
var jsonstr = "[{'type':'plan','id':'" + planId + "'}]";
websocket.send(jsonstr);
}
</script>
</head>
<body style="width:100%;height:100%;margin:0;padding:0;overflow-x:hidden;overflow-y:hidden;">
<div style="height:100%;width:100%;">
<div id="main" style="height:100%;width:100%;border-radius: 8px;">
<div style="position: absolute;width: 350px;height:80px;top:80px;left:250px;">
<div style="float: left;width: 30%;height: 100%;line-height:55px;color: #69F6F9;font-size: 24px;font-family: Helvetica;text-align: right;">现有员工</div>
<div style="float: left;width: 50%;height: 100%;color: #69F6F9;font-size: 35px;font-family: Helvetica;text-align: center;"><span id="peopleNum"></span><span> 人</span></div>
</div>
<div style="position: absolute;width: 350px;height:80px;top:80px;left:650px;">
<div style="float: left;width: 30%;height: 100%;line-height:55px;color: #69F6F9;font-size: 24px;font-family: Helvetica;text-align: right;">项目公司</div>
<div style="float: left;width: 50%;height: 100%;color: #69F6F9;font-size: 35px;font-family: Helvetica;text-align: center;"><span id="branchCompanyNum"></span><span> 家</span></div>
</div>
<div style="width:255px;height:182px;background: linear-gradient(149deg,#02395d 13%, rgba(0,16,107,0.5) 90%);border: 3px solid #00edf2;border-radius: 9px;position: absolute;top:230px;left:50px;">
<div style="float:left;width:100%;height:45.5px;line-height:45.4px;text-align:center;color:#bcdfff;font-size: 16px;"><span>漯河区域(</span><span id="waterDesign1" style="color:#a5f1f7;font-size: 20px;"></span><span>万m³/D</span></div>
<div style="float:left;width:100%;height:45.5px;">
<div style="float:left;width:50%;line-height:45.4px;text-align:right;color:#bcdfff;font-size: 16px;">昨日水量:</div>
<div id="yesterdayWater1" style="float:left;width:50%;line-height:45.4px;text-align:left;color:#347EFB;font-size: 20px;"></div>
</div>
<div style="float:left;width:100%;height:45.5px;">
<div style="float:left;width:50%;line-height:45.4px;text-align:right;color:#bcdfff;font-size: 16px;">今日水量:</div>
<div id="todayWater1" style="float:left;width:50%;line-height:45.4px;text-align:left;color:#347EFB;font-size: 20px;"></div>
</div>
<div style="float:left;width:100%;height:45.5px;">
<div style="float:left;width:50%;line-height:45.4px;text-align:right;color:#bcdfff;font-size: 16px;">污水厂数:</div>
<div id="companyNum1" style="float:left;width:50%;line-height:45.4px;text-align:left;color:#F5A524;font-size: 20px;"></div>
</div>
</div>
<div style="width:255px;height:182px;background: linear-gradient(149deg,#02395d 13%, rgba(0,16,107,0.5) 90%);border: 3px solid #00edf2;border-radius: 9px;position: absolute;top:552px;left:52px;">
<div style="float:left;width:100%;height:45.5px;line-height:45.4px;text-align:center;color:#bcdfff;font-size: 16px;"><span>益阳区域(</span><span id="waterDesign2" style="color:#a5f1f7;font-size: 20px;"></span><span>万m³/D</span></div>
<div style="float:left;width:100%;height:45.5px;">
<div style="float:left;width:50%;line-height:45.4px;text-align:right;color:#bcdfff;font-size: 16px;">昨日水量:</div>
<div id="yesterdayWater2" style="float:left;width:50%;line-height:45.4px;text-align:left;color:#347EFB;font-size: 20px;"></div>
</div>
<div style="float:left;width:100%;height:45.5px;">
<div style="float:left;width:50%;line-height:45.4px;text-align:right;color:#bcdfff;font-size: 16px;">今日水量:</div>
<div id="todayWater2" style="float:left;width:50%;line-height:45.4px;text-align:left;color:#347EFB;font-size: 20px;"></div>
</div>
<div style="float:left;width:100%;height:45.5px;">
<div style="float:left;width:50%;line-height:45.4px;text-align:right;color:#bcdfff;font-size: 16px;">污水厂数:</div>
<div id="companyNum2" style="float:left;width:50%;line-height:45.4px;text-align:left;color:#F5A524;font-size: 20px;"></div>
</div>
</div>
<div style="width:255px;height:182px;background: linear-gradient(149deg,#02395d 13%, rgba(0,16,107,0.5) 90%);border: 3px solid #00edf2;border-radius: 9px;position: absolute;top:759px;left:442px;">
<div style="float:left;width:100%;height:45.5px;line-height:45.4px;text-align:center;color:#bcdfff;font-size: 16px;"><span>东莞区域(</span><span id="waterDesign3" style="color:#a5f1f7;font-size: 20px;"></span><span>万m³/D</span></div>
<div style="float:left;width:100%;height:45.5px;">
<div style="float:left;width:50%;line-height:45.4px;text-align:right;color:#bcdfff;font-size: 16px;">昨日水量:</div>
<div id="yesterdayWater3" style="float:left;width:50%;line-height:45.4px;text-align:left;color:#347EFB;font-size: 20px;"></div>
</div>
<div style="float:left;width:100%;height:45.5px;">
<div style="float:left;width:50%;line-height:45.4px;text-align:right;color:#bcdfff;font-size: 16px;">今日水量:</div>
<div id="todayWater3" style="float:left;width:50%;line-height:45.4px;text-align:left;color:#347EFB;font-size: 20px;"></div>
</div>
<div style="float:left;width:100%;height:45.5px;">
<div style="float:left;width:50%;line-height:45.4px;text-align:right;color:#bcdfff;font-size: 16px;">污水厂数:</div>
<div id="companyNum3" style="float:left;width:50%;line-height:45.4px;text-align:left;color:#F5A524;font-size: 20px;"></div>
</div>
</div>
<div onclick="doGo('a31e1edee5924f44ada21de830c3ab3e');" style="cursor: pointer;width:255px;height:182px;background: linear-gradient(149deg,#02395d 13%, rgba(0,16,107,0.5) 90%);border: 3px solid #00edf2;border-radius: 9px;position: absolute;top:749px;left:815px;">
<div style="float:left;width:100%;height:45.5px;line-height:45.4px;text-align:center;color:#bcdfff;font-size: 16px;"><span>上海区域(</span><span id="waterDesign4" style="color:#a5f1f7;font-size: 20px;"></span><span>万m³/D</span></div>
<div style="float:left;width:100%;height:45.5px;">
<div style="float:left;width:50%;line-height:45.4px;text-align:right;color:#bcdfff;font-size: 16px;">昨日水量:</div>
<div id="yesterdayWater4" style="float:left;width:50%;line-height:45.4px;text-align:left;color:#347EFB;font-size: 20px;"></div>
</div>
<div style="float:left;width:100%;height:45.5px;">
<div style="float:left;width:50%;line-height:45.4px;text-align:right;color:#bcdfff;font-size: 16px;">今日水量:</div>
<div id="todayWater4" style="float:left;width:50%;line-height:45.4px;text-align:left;color:#347EFB;font-size: 20px;"></div>
</div>
<div style="float:left;width:100%;height:45.5px;">
<div style="float:left;width:50%;line-height:45.4px;text-align:right;color:#bcdfff;font-size: 16px;">污水厂数:</div>
<div id="companyNum4" style="float:left;width:50%;line-height:45.4px;text-align:left;color:#F5A524;font-size: 20px;"></div>
</div>
</div>
<div onclick="doGo('a26fe2699c1b4fdd9192cd606801a0c4');" style="cursor: pointer;width:255px;height:182px;background: linear-gradient(19deg,#02395d 13%, rgba(0,16,107,0.5) 90%);border: 3px solid #00edf2;border-radius: 9px;position: absolute;top:104px;left:1180px;">
<div style="float:left;width:100%;height:45.5px;line-height:45.4px;text-align:center;color:#bcdfff;font-size: 16px;"><span>大连区域(</span><span id="waterDesign5" style="color:#a5f1f7;font-size: 20px;"></span><span>万m³/D</span></div>
<div style="float:left;width:100%;height:45.5px;">
<div style="float:left;width:50%;line-height:45.4px;text-align:right;color:#bcdfff;font-size: 16px;">昨日水量:</div>
<div id="yesterdayWater5" style="float:left;width:50%;line-height:45.4px;text-align:left;color:#347EFB;font-size: 20px;"></div>
</div>
<div style="float:left;width:100%;height:45.5px;">
<div style="float:left;width:50%;line-height:45.4px;text-align:right;color:#bcdfff;font-size: 16px;">今日水量:</div>
<div id="todayWater5" style="float:left;width:50%;line-height:45.4px;text-align:left;color:#347EFB;font-size: 20px;"></div>
</div>
<div style="float:left;width:100%;height:45.5px;">
<div style="float:left;width:50%;line-height:45.4px;text-align:right;color:#bcdfff;font-size: 16px;">污水厂数:</div>
<div id="companyNum5" style="float:left;width:50%;line-height:45.4px;text-align:left;color:#F5A524;font-size: 20px;"></div>
</div>
</div>
<div onclick="doGo('2720d16c67a94478bbb18acc1601a0b5');" style="cursor: pointer;width:255px;height:182px;background: linear-gradient(19deg,#02395d 13%, rgba(0,16,107,0.5) 90%);border: 3px solid #00edf2;border-radius: 9px;position: absolute;top:315px;left:1180px;">
<div style="float:left;width:100%;height:45.5px;line-height:45.4px;text-align:center;color:#bcdfff;font-size: 16px;"><span>潍坊区域(</span><span id="waterDesign6" style="color:#a5f1f7;font-size: 20px;"></span><span>万m³/D</span></div>
<div style="float:left;width:100%;height:45.5px;">
<div style="float:left;width:50%;line-height:45.4px;text-align:right;color:#bcdfff;font-size: 16px;">昨日水量:</div>
<div id="yesterdayWater6" style="float:left;width:50%;line-height:45.4px;text-align:left;color:#347EFB;font-size: 20px;"></div>
</div>
<div style="float:left;width:100%;height:45.5px;">
<div style="float:left;width:50%;line-height:45.4px;text-align:right;color:#bcdfff;font-size: 16px;">今日水量:</div>
<div id="todayWater6" style="float:left;width:50%;line-height:45.4px;text-align:left;color:#347EFB;font-size: 20px;"></div>
</div>
<div style="float:left;width:100%;height:45.5px;">
<div style="float:left;width:50%;line-height:45.4px;text-align:right;color:#bcdfff;font-size: 16px;">污水厂数:</div>
<div id="companyNum6" style="float:left;width:50%;line-height:45.4px;text-align:left;color:#F5A524;font-size: 20px;"></div>
</div>
</div>
<div style="width:255px;height:182px;background: linear-gradient(19deg,#02395d 13%, rgba(0,16,107,0.5) 90%);border: 3px solid #00edf2;border-radius: 9px;position: absolute;top:535px;left:1180px;">
<div style="float:left;width:100%;height:45.5px;line-height:45.4px;text-align:center;color:#bcdfff;font-size: 16px;"><span>德州区域(</span><span id="waterDesign7" style="color:#a5f1f7;font-size: 20px;"></span><span>万m³/D</span></div>
<div style="float:left;width:100%;height:45.5px;">
<div style="float:left;width:50%;line-height:45.4px;text-align:right;color:#bcdfff;font-size: 16px;">昨日水量:</div>
<div id="yesterdayWater7" style="float:left;width:50%;line-height:45.4px;text-align:left;color:#347EFB;font-size: 20px;"></div>
</div>
<div style="float:left;width:100%;height:45.5px;">
<div style="float:left;width:50%;line-height:45.4px;text-align:right;color:#bcdfff;font-size: 16px;">今日水量:</div>
<div id="todayWater7" style="float:left;width:50%;line-height:45.4px;text-align:left;color:#347EFB;font-size: 20px;"></div>
</div>
<div style="float:left;width:100%;height:45.5px;">
<div style="float:left;width:50%;line-height:45.4px;text-align:right;color:#bcdfff;font-size: 16px;">污水厂数:</div>
<div id="companyNum7" style="float:left;width:50%;line-height:45.4px;text-align:left;color:#F5A524;font-size: 20px;"></div>
</div>
</div>
<div style="width:255px;height:182px;background: linear-gradient(19deg,#02395d 13%, rgba(0,16,107,0.5) 90%);border: 3px solid #00edf2;border-radius: 9px;position: absolute;top:750px;left:1180px;">
<div style="float:left;width:100%;height:45.5px;line-height:45.4px;text-align:center;color:#bcdfff;font-size: 16px;"><span>枣庄区域(</span><span id="waterDesign8" style="color:#a5f1f7;font-size: 20px;"></span><span>万m³/D</span></div>
<div style="float:left;width:100%;height:45.5px;">
<div style="float:left;width:50%;line-height:45.4px;text-align:right;color:#bcdfff;font-size: 16px;">昨日水量:</div>
<div id="yesterdayWater8" style="float:left;width:50%;line-height:45.4px;text-align:left;color:#347EFB;font-size: 20px;"></div>
</div>
<div style="float:left;width:100%;height:45.5px;">
<div style="float:left;width:50%;line-height:45.4px;text-align:right;color:#bcdfff;font-size: 16px;">今日水量:</div>
<div id="todayWater8" style="float:left;width:50%;line-height:45.4px;text-align:left;color:#347EFB;font-size: 20px;"></div>
</div>
<div style="float:left;width:100%;height:45.5px;">
<div style="float:left;width:50%;line-height:45.4px;text-align:right;color:#bcdfff;font-size: 16px;">污水厂数:</div>
<div id="companyNum8" style="float:left;width:50%;line-height:45.4px;text-align:left;color:#F5A524;font-size: 20px;"></div>
</div>
</div>
</div>
</div>
</body>
</html>

View File

@ -0,0 +1,269 @@
<%@ 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_GetHourHistory", 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">
//获取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 getValue() {
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
// console.log(data);
if(data!=''){
for(var i=0;i<data.length;i++){
if(data[i].elementCode=="branchCompanyNum"){
$('#branchCompanyNum').text(data[i].valueUrl);
}else if(data[i].elementCode=="peopleNum"){
$('#peopleNum').text(data[i].valueUrl);
}else if(data[i].elementCode=="waterDesign1"){
$('#waterDesign1').text(data[i].valueUrl);
}else if(data[i].elementCode=="waterDesign2"){
$('#waterDesign2').text(data[i].valueUrl);
}else if(data[i].elementCode=="waterDesign3"){
$('#waterDesign3').text(data[i].valueUrl);
}else if(data[i].elementCode=="waterDesign4"){
$('#waterDesign4').text(data[i].valueUrl);
}else if(data[i].elementCode=="waterDesign5"){
$('#waterDesign5').text(data[i].valueUrl);
}else if(data[i].elementCode=="waterDesign6"){
$('#waterDesign6').text(data[i].valueUrl);
}else if(data[i].elementCode=="waterDesign7"){
$('#waterDesign7').text(data[i].valueUrl);
}else if(data[i].elementCode=="waterDesign8"){
$('#waterDesign8').text(data[i].valueUrl);
}else if(data[i].elementCode=="companyNum1"){
$('#companyNum1').text(data[i].valueUrl);
}else if(data[i].elementCode=="companyNum2"){
$('#companyNum2').text(data[i].valueUrl);
}else if(data[i].elementCode=="companyNum3"){
$('#companyNum3').text(data[i].valueUrl);
}else if(data[i].elementCode=="companyNum4"){
$('#companyNum4').text(data[i].valueUrl);
}else if(data[i].elementCode=="companyNum5"){
$('#companyNum5').text(data[i].valueUrl);
}else if(data[i].elementCode=="companyNum6"){
$('#companyNum6').text(data[i].valueUrl);
}else if(data[i].elementCode=="companyNum7"){
$('#companyNum7').text(data[i].valueUrl);
}else if(data[i].elementCode=="companyNum8"){
$('#companyNum8').text(data[i].valueUrl);
}else if(data[i].elementCode=="yesterdayWater1"){
$('#yesterdayWater1').text((data[i].visualCacheData.value).toFixed(0));
}else if(data[i].elementCode=="yesterdayWater2"){
$('#yesterdayWater2').text((data[i].visualCacheData.value).toFixed(0));
}else if(data[i].elementCode=="yesterdayWater3"){
$('#yesterdayWater3').text((data[i].visualCacheData.value).toFixed(0));
}else if(data[i].elementCode=="yesterdayWater4"){
$('#yesterdayWater4').text((data[i].visualCacheData.value).toFixed(0));
}else if(data[i].elementCode=="yesterdayWater5"){
$('#yesterdayWater5').text((data[i].visualCacheData.value).toFixed(0));
}else if(data[i].elementCode=="yesterdayWater6"){
$('#yesterdayWater6').text((data[i].visualCacheData.value).toFixed(0));
}else if(data[i].elementCode=="yesterdayWater7"){
$('#yesterdayWater7').text((data[i].visualCacheData.value).toFixed(0));
}else if(data[i].elementCode=="yesterdayWater8"){
$('#yesterdayWater8').text((data[i].visualCacheData.value).toFixed(0));
}else if(data[i].elementCode=="todayWater1"){
$('#todayWater1').text((data[i].visualCacheData.value).toFixed(0));
}else if(data[i].elementCode=="todayWater2"){
$('#todayWater2').text((data[i].visualCacheData.value).toFixed(0));
}else if(data[i].elementCode=="todayWater3"){
$('#todayWater3').text((data[i].visualCacheData.value).toFixed(0));
}else if(data[i].elementCode=="todayWater4"){
$('#todayWater4').text((data[i].visualCacheData.value).toFixed(0));
}else if(data[i].elementCode=="todayWater5"){
$('#todayWater5').text((data[i].visualCacheData.value).toFixed(0));
}else if(data[i].elementCode=="todayWater6"){
$('#todayWater6').text((data[i].visualCacheData.value).toFixed(0));
}else if(data[i].elementCode=="todayWater7"){
$('#todayWater7').text((data[i].visualCacheData.value).toFixed(0));
}else if(data[i].elementCode=="todayWater8"){
$('#todayWater8').text((data[i].visualCacheData.value).toFixed(0));
}
}
}
}, 'json');
}
/* 定时器 */
setInterval(change, 300000); //每5分钟切换
// setInterval(getValue, 3600000); //每一小时切换
/* 初始化 */
$(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";
getValue();
//console.log("height",document.body.scrollHeight);
});
</script>
</head>
<body style="width:100%;height:100%;margin:0;padding:0;overflow-x:hidden;overflow-y:hidden;">
<div style="height:100%;width:100%;">
<div id="main" style="height:100%;width:100%;border-radius: 8px;">
<div style="position: absolute;width: 350px;height:80px;top:80px;left:250px;">
<div style="float: left;width: 30%;height: 100%;line-height:80px;color: #69F6F9;font-size: 24px;font-family: Helvetica;text-align: right;">现有员工</div>
<div style="float: left;width: 70%;height: 100%;color: #69F6F9;font-size: 45px;font-family: Helvetica;text-align: center;"><span id="peopleNum"></span><span> 人</span></div>
</div>
<div style="position: absolute;width: 350px;height:80px;top:80px;left:650px;">
<div style="float: left;width: 30%;height: 100%;line-height:80px;color: #69F6F9;font-size: 24px;font-family: Helvetica;text-align: right;">项目公司</div>
<div style="float: left;width: 70%;height: 100%;color: #69F6F9;font-size: 45px;font-family: Helvetica;text-align: center;"><span id="branchCompanyNum"></span><span> 家</span></div>
</div>
<div style="width:255px;height:182px;background: linear-gradient(149deg,#02395d 13%, rgba(0,16,107,0.5) 90%);border: 3px solid #00edf2;border-radius: 9px;position: absolute;top:230px;left:50px;">
<div style="float:left;width:100%;height:45.5px;line-height:45.4px;text-align:center;color:#bcdfff;font-size: 20px;"><span>漯河区域(</span><span id="waterDesign1" style="color:#347EFB;font-size: 30px;"></span><span>万m³/D</span></div>
<div style="float:left;width:100%;height:45.5px;">
<div style="float:left;width:50%;line-height:45.4px;text-align:right;color:#bcdfff;font-size: 20px;">昨日水量:</div>
<div id="yesterdayWater1" style="float:left;width:50%;line-height:45.4px;text-align:left;color:#347EFB;font-size: 30px;"></div>
</div>
<div style="float:left;width:100%;height:45.5px;">
<div style="float:left;width:50%;line-height:45.4px;text-align:right;color:#bcdfff;font-size: 20px;">今日水量:</div>
<div id="todayWater1" style="float:left;width:50%;line-height:45.4px;text-align:left;color:#347EFB;font-size: 30px;"></div>
</div>
<div style="float:left;width:100%;height:45.5px;">
<div style="float:left;width:50%;line-height:45.4px;text-align:right;color:#bcdfff;font-size: 20px;">污水厂数:</div>
<div id="companyNum1" style="float:left;width:50%;line-height:45.4px;text-align:left;color:#F5A524;font-size: 30px;"></div>
</div>
</div>
<div style="width:255px;height:182px;background: linear-gradient(149deg,#02395d 13%, rgba(0,16,107,0.5) 90%);border: 3px solid #00edf2;border-radius: 9px;position: absolute;top:552px;left:52px;">
<div style="float:left;width:100%;height:45.5px;line-height:45.4px;text-align:center;color:#bcdfff;font-size: 20px;"><span>益阳区域(</span><span id="waterDesign2" style="color:#347EFB;font-size: 30px;"></span><span>万m³/D</span></div>
<div style="float:left;width:100%;height:45.5px;">
<div style="float:left;width:50%;line-height:45.4px;text-align:right;color:#bcdfff;font-size: 20px;">昨日水量:</div>
<div id="yesterdayWater2" style="float:left;width:50%;line-height:45.4px;text-align:left;color:#347EFB;font-size: 30px;"></div>
</div>
<div style="float:left;width:100%;height:45.5px;">
<div style="float:left;width:50%;line-height:45.4px;text-align:right;color:#bcdfff;font-size: 20px;">今日水量:</div>
<div id="todayWater2" style="float:left;width:50%;line-height:45.4px;text-align:left;color:#347EFB;font-size: 30px;"></div>
</div>
<div style="float:left;width:100%;height:45.5px;">
<div style="float:left;width:50%;line-height:45.4px;text-align:right;color:#bcdfff;font-size: 20px;">污水厂数:</div>
<div id="companyNum2" style="float:left;width:50%;line-height:45.4px;text-align:left;color:#F5A524;font-size: 30px;"></div>
</div>
</div>
<div style="width:255px;height:182px;background: linear-gradient(149deg,#02395d 13%, rgba(0,16,107,0.5) 90%);border: 3px solid #00edf2;border-radius: 9px;position: absolute;top:759px;left:442px;">
<div style="float:left;width:100%;height:45.5px;line-height:45.4px;text-align:center;color:#bcdfff;font-size: 20px;"><span>东莞区域(</span><span id="waterDesign3" style="color:#347EFB;font-size: 30px;"></span><span>万m³/D</span></div>
<div style="float:left;width:100%;height:45.5px;">
<div style="float:left;width:50%;line-height:45.4px;text-align:right;color:#bcdfff;font-size: 20px;">昨日水量:</div>
<div id="yesterdayWater3" style="float:left;width:50%;line-height:45.4px;text-align:left;color:#347EFB;font-size: 30px;"></div>
</div>
<div style="float:left;width:100%;height:45.5px;">
<div style="float:left;width:50%;line-height:45.4px;text-align:right;color:#bcdfff;font-size: 20px;">今日水量:</div>
<div id="todayWater3" style="float:left;width:50%;line-height:45.4px;text-align:left;color:#347EFB;font-size: 30px;"></div>
</div>
<div style="float:left;width:100%;height:45.5px;">
<div style="float:left;width:50%;line-height:45.4px;text-align:right;color:#bcdfff;font-size: 20px;">污水厂数:</div>
<div id="companyNum3" style="float:left;width:50%;line-height:45.4px;text-align:left;color:#F5A524;font-size: 30px;"></div>
</div>
</div>
<div style="width:255px;height:182px;background: linear-gradient(149deg,#02395d 13%, rgba(0,16,107,0.5) 90%);border: 3px solid #00edf2;border-radius: 9px;position: absolute;top:749px;left:815px;">
<div style="float:left;width:100%;height:45.5px;line-height:45.4px;text-align:center;color:#bcdfff;font-size: 20px;"><span>上海区域(</span><span id="waterDesign4" style="color:#347EFB;font-size: 30px;"></span><span>万m³/D</span></div>
<div style="float:left;width:100%;height:45.5px;">
<div style="float:left;width:50%;line-height:45.4px;text-align:right;color:#bcdfff;font-size: 20px;">昨日水量:</div>
<div id="yesterdayWater4" style="float:left;width:50%;line-height:45.4px;text-align:left;color:#347EFB;font-size: 30px;"></div>
</div>
<div style="float:left;width:100%;height:45.5px;">
<div style="float:left;width:50%;line-height:45.4px;text-align:right;color:#bcdfff;font-size: 20px;">今日水量:</div>
<div id="todayWater4" style="float:left;width:50%;line-height:45.4px;text-align:left;color:#347EFB;font-size: 30px;"></div>
</div>
<div style="float:left;width:100%;height:45.5px;">
<div style="float:left;width:50%;line-height:45.4px;text-align:right;color:#bcdfff;font-size: 20px;">污水厂数:</div>
<div id="companyNum4" style="float:left;width:50%;line-height:45.4px;text-align:left;color:#F5A524;font-size: 30px;"></div>
</div>
</div>
<div style="width:255px;height:182px;background: linear-gradient(19deg,#02395d 13%, rgba(0,16,107,0.5) 90%);border: 3px solid #00edf2;border-radius: 9px;position: absolute;top:104px;left:1180px;">
<div style="float:left;width:100%;height:45.5px;line-height:45.4px;text-align:center;color:#bcdfff;font-size: 20px;"><span>大连区域(</span><span id="waterDesign5" style="color:#347EFB;font-size: 30px;"></span><span>万m³/D</span></div>
<div style="float:left;width:100%;height:45.5px;">
<div style="float:left;width:50%;line-height:45.4px;text-align:right;color:#bcdfff;font-size: 20px;">昨日水量:</div>
<div id="yesterdayWater5" style="float:left;width:50%;line-height:45.4px;text-align:left;color:#347EFB;font-size: 30px;"></div>
</div>
<div style="float:left;width:100%;height:45.5px;">
<div style="float:left;width:50%;line-height:45.4px;text-align:right;color:#bcdfff;font-size: 20px;">今日水量:</div>
<div id="todayWater5" style="float:left;width:50%;line-height:45.4px;text-align:left;color:#347EFB;font-size: 30px;"></div>
</div>
<div style="float:left;width:100%;height:45.5px;">
<div style="float:left;width:50%;line-height:45.4px;text-align:right;color:#bcdfff;font-size: 20px;">污水厂数:</div>
<div id="companyNum5" style="float:left;width:50%;line-height:45.4px;text-align:left;color:#F5A524;font-size: 30px;"></div>
</div>
</div>
<div style="width:255px;height:182px;background: linear-gradient(19deg,#02395d 13%, rgba(0,16,107,0.5) 90%);border: 3px solid #00edf2;border-radius: 9px;position: absolute;top:315px;left:1180px;">
<div style="float:left;width:100%;height:45.5px;line-height:45.4px;text-align:center;color:#bcdfff;font-size: 20px;"><span>潍坊区域(</span><span id="waterDesign6" style="color:#347EFB;font-size: 30px;"></span><span>万m³/D</span></div>
<div style="float:left;width:100%;height:45.5px;">
<div style="float:left;width:50%;line-height:45.4px;text-align:right;color:#bcdfff;font-size: 20px;">昨日水量:</div>
<div id="yesterdayWater6" style="float:left;width:50%;line-height:45.4px;text-align:left;color:#347EFB;font-size: 30px;"></div>
</div>
<div style="float:left;width:100%;height:45.5px;">
<div style="float:left;width:50%;line-height:45.4px;text-align:right;color:#bcdfff;font-size: 20px;">今日水量:</div>
<div id="todayWater6" style="float:left;width:50%;line-height:45.4px;text-align:left;color:#347EFB;font-size: 30px;"></div>
</div>
<div style="float:left;width:100%;height:45.5px;">
<div style="float:left;width:50%;line-height:45.4px;text-align:right;color:#bcdfff;font-size: 20px;">污水厂数:</div>
<div id="companyNum6" style="float:left;width:50%;line-height:45.4px;text-align:left;color:#F5A524;font-size: 30px;"></div>
</div>
</div>
<div style="width:255px;height:182px;background: linear-gradient(19deg,#02395d 13%, rgba(0,16,107,0.5) 90%);border: 3px solid #00edf2;border-radius: 9px;position: absolute;top:535px;left:1180px;">
<div style="float:left;width:100%;height:45.5px;line-height:45.4px;text-align:center;color:#bcdfff;font-size: 20px;"><span>德州区域(</span><span id="waterDesign7" style="color:#347EFB;font-size: 30px;"></span><span>万m³/D</span></div>
<div style="float:left;width:100%;height:45.5px;">
<div style="float:left;width:50%;line-height:45.4px;text-align:right;color:#bcdfff;font-size: 20px;">昨日水量:</div>
<div id="yesterdayWater7" style="float:left;width:50%;line-height:45.4px;text-align:left;color:#347EFB;font-size: 30px;"></div>
</div>
<div style="float:left;width:100%;height:45.5px;">
<div style="float:left;width:50%;line-height:45.4px;text-align:right;color:#bcdfff;font-size: 20px;">今日水量:</div>
<div id="todayWater7" style="float:left;width:50%;line-height:45.4px;text-align:left;color:#347EFB;font-size: 30px;"></div>
</div>
<div style="float:left;width:100%;height:45.5px;">
<div style="float:left;width:50%;line-height:45.4px;text-align:right;color:#bcdfff;font-size: 20px;">污水厂数:</div>
<div id="companyNum7" style="float:left;width:50%;line-height:45.4px;text-align:left;color:#F5A524;font-size: 30px;"></div>
</div>
</div>
<div style="width:255px;height:182px;background: linear-gradient(19deg,#02395d 13%, rgba(0,16,107,0.5) 90%);border: 3px solid #00edf2;border-radius: 9px;position: absolute;top:750px;left:1180px;">
<div style="float:left;width:100%;height:45.5px;line-height:45.4px;text-align:center;color:#bcdfff;font-size: 20px;"><span>枣庄区域(</span><span id="waterDesign8" style="color:#347EFB;font-size: 30px;"></span><span>万m³/D</span></div>
<div style="float:left;width:100%;height:45.5px;">
<div style="float:left;width:50%;line-height:45.4px;text-align:right;color:#bcdfff;font-size: 20px;">昨日水量:</div>
<div id="yesterdayWater8" style="float:left;width:50%;line-height:45.4px;text-align:left;color:#347EFB;font-size: 30px;"></div>
</div>
<div style="float:left;width:100%;height:45.5px;">
<div style="float:left;width:50%;line-height:45.4px;text-align:right;color:#bcdfff;font-size: 20px;">今日水量:</div>
<div id="todayWater8" style="float:left;width:50%;line-height:45.4px;text-align:left;color:#347EFB;font-size: 30px;"></div>
</div>
<div style="float:left;width:100%;height:45.5px;">
<div style="float:left;width:50%;line-height:45.4px;text-align:right;color:#bcdfff;font-size: 20px;">污水厂数:</div>
<div id="companyNum8" style="float:left;width:50%;line-height:45.4px;text-align:left;color:#F5A524;font-size: 30px;"></div>
</div>
</div>
</div>
</div>
</body>
</html>

View File

@ -0,0 +1,250 @@
<%@ 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_GetHourHistory", 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">
//获取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方法用.进行拼接
}
/* 请求数据 */
function getValue() {
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
// console.log(data);
if(data!=''){
for(var i=0;i<data.length;i++){
if(data[i].elementCode=="branchCompanyNum"){
$('#branchCompanyNum').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
}else if(data[i].elementCode=="peopleNum"){
$('#peopleNum').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
}else if(data[i].elementCode=="regionDWater"){
$('#regionDWater').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
}else if(data[i].elementCode=="regionYWater"){
$('#regionYWater').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
}else if(data[i].elementCode=="regionTWater"){
$('#regionTWater').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
}else if(data[i].elementCode=="companyDWater1"){
$('#companyDWater1').text(numOutput((data[i].visualCacheData.value).toFixed(1)));
}else if(data[i].elementCode=="companyDWater2"){
$('#companyDWater2').text(numOutput((data[i].visualCacheData.value).toFixed(1)));
}else if(data[i].elementCode=="companyDWater3"){
$('#companyDWater3').text(numOutput((data[i].visualCacheData.value).toFixed(1)));
}else if(data[i].elementCode=="companyDWater4"){
$('#companyDWater4').text(numOutput((data[i].visualCacheData.value).toFixed(1)));
}else if(data[i].elementCode=="companyYWater1"){
$('#companyYWater1').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
}else if(data[i].elementCode=="companyYWater2"){
$('#companyYWater2').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
}else if(data[i].elementCode=="companyYWater3"){
$('#companyYWater3').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
}else if(data[i].elementCode=="companyYWater4"){
$('#companyYWater4').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
}else if(data[i].elementCode=="companyTWater1"){
$('#companyTWater1').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
}else if(data[i].elementCode=="companyTWater2"){
$('#companyTWater2').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
}else if(data[i].elementCode=="companyTWater3"){
$('#companyTWater3').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
}else if(data[i].elementCode=="companyTWater4"){
$('#companyTWater4').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
}
}
}
}, 'json');
}
/* 定时器 */
setInterval(getValue, 300000); //每5分钟切换
// setInterval(getValue, 3600000); //每一小时切换
/* 初始化 */
$(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";
getValue();
//console.log("height",document.body.scrollHeight);
});
var websocket = new WebSocket('ws://' + window.location.host + ext.contextPath + '/chat?userName=大屏');
function doGo(planId){
//清除交互
var clearInterationJsonStr = "[{'type':'clearInteraction'}]";
websocket.send(clearInterationJsonStr);
var jsonstr = "[{'type':'plan','id':'" + planId + "'}]";
websocket.send(jsonstr);
}
</script>
</head>
<body style="width:100%;height:100%;margin:0;padding:0;overflow-x:hidden;overflow-y:hidden;">
<div style="height:100%;width:100%;">
<div id="main" style="height:100%;width:100%;border-radius: 8px;">
<div style="position: absolute;width: 350px;height:80px;top:80px;left:250px;">
<div style="float: left;width: 30%;height: 100%;line-height:55px;color: #69F6F9;font-size: 24px;font-family: Helvetica;text-align: right;">现有员工</div>
<div style="float: left;width: 50%;height: 100%;color: #69F6F9;font-size: 35px;font-family: Helvetica;text-align: center;"><span id="peopleNum"></span><span> 人</span></div>
</div>
<div style="position: absolute;width: 350px;height:80px;top:80px;left:650px;">
<div style="float: left;width: 30%;height: 100%;line-height:55px;color: #69F6F9;font-size: 24px;font-family: Helvetica;text-align: right;">项目公司</div>
<div style="float: left;width: 50%;height: 100%;color: #69F6F9;font-size: 35px;font-family: Helvetica;text-align: center;"><span id="branchCompanyNum"></span><span> 家</span></div>
</div>
<div style="width:255px;height:136px;background: linear-gradient(19deg,#02395d 13%, rgba(0,16,107,0.5) 90%);border: 3px solid #00edf2;border-radius: 9px;position: absolute;top:430px;left:1130px;">
<div style="float:left;width:100%;height:45.5px;line-height:45.4px;text-align:center;color:#bcdfff;font-size: 16px;"><span>潍坊区域(</span><span id="regionDWater" style="color:#a5f1f7;font-size: 20px;"></span><span>万m³/D</span></div>
<div style="float:left;width:100%;height:45.5px;">
<div style="float:left;width:50%;line-height:45.4px;text-align:right;color:#bcdfff;font-size: 16px;">昨日水量:</div>
<div id="regionYWater" style="float:left;width:50%;line-height:45.4px;text-align:left;color:#347EFB;font-size: 20px;"></div>
</div>
<div style="float:left;width:100%;height:45.5px;">
<div style="float:left;width:50%;line-height:45.4px;text-align:right;color:#bcdfff;font-size: 16px;">今日水量:</div>
<div id="regionTWater" style="float:left;width:50%;line-height:45.4px;text-align:left;color:#347EFB;font-size: 20px;"></div>
</div>
</div>
<div style="width:230px;height:120px;background: rgba(3,5,18,0.25);border-radius: 9px;position:absolute;top:160px;left:50px;">
<table style="width:100%;height:100%;table-layout: fixed;text-align: center;vertical-align: middle;font-family: PingFangSC, PingFangSC-Semibold;">
<tr style="height:38px;">
<td style="width:91px;background:#76afdb;border-radius: 18px 0px 28px 0px;color:rgba(52,241,255,1);font-size:16px;font-weight: 600;letter-spacing:2px;">高新厂</td>
<td style="width:30px;"></td>
<td style="text-align:left;"><span id="companyDWater1" style="font-size:20px;color:#a5f1f7;"></span><span style="font-size:14px;color:#ffffff;"> 万m³/D</span></td>
</tr>
<tr>
<td colspan="2" style="text-align:right;font-size: 14px;color: #ffffff;">
昨日水量:
</td>
<td id="companyYWater1" style="text-align:left;font-size:20px;color:#347EFB;">
</td>
</tr>
<tr>
<td colspan="2" style="text-align:right;font-size: 14px;color: #ffffff;">
今日水量:
</td>
<td id="companyTWater1" style="text-align:left;font-size:20px;color:#347EFB;">
</td>
</tr>
</table>
</div>
<div style="width:230px;height:120px;background: rgba(3,5,18,0.25);border-radius: 9px;position:absolute;top:760px;left:1200px;">
<table style="width:100%;height:100%;table-layout: fixed;text-align: center;vertical-align: middle;font-family: PingFangSC, PingFangSC-Semibold;">
<tr style="height:38px;">
<td style="width:91px;background:#76afdb;border-radius: 18px 0px 28px 0px;color:rgba(52,241,255,1);font-size:16px;font-weight: 600;letter-spacing:2px;">沙窝厂</td>
<td style="width:30px;"></td>
<td style="text-align:left;"><span id="companyDWater2" style="font-size:20px;color:#a5f1f7;"></span><span style="font-size:14px;color:#ffffff;"> 万m³/D</span></td>
</tr>
<tr>
<td colspan="2" style="text-align:right;font-size: 14px;color: #ffffff;">
昨日水量:
</td>
<td id="companyYWater2" style="text-align:left;font-size:20px;color:#347EFB;">
</td>
</tr>
<tr>
<td colspan="2" style="text-align:right;font-size: 14px;color: #ffffff;">
今日水量:
</td>
<td id="companyTWater2" style="text-align:left;font-size:20px;color:#347EFB;">
</td>
</tr>
</table>
</div>
<div style="width:230px;height:120px;background: rgba(3,5,18,0.25);border-radius: 9px;position:absolute;top:760px;left:50px;">
<table style="width:100%;height:100%;table-layout: fixed;text-align: center;vertical-align: middle;font-family: PingFangSC, PingFangSC-Semibold;">
<tr style="height:38px;">
<td style="width:91px;background:#76afdb;border-radius: 18px 0px 28px 0px;color:rgba(52,241,255,1);font-size:16px;font-weight: 600;letter-spacing:2px;">城西厂</td>
<td style="width:30px;"></td>
<td style="text-align:left;"><span id="companyDWater3" style="font-size:20px;color:#a5f1f7;"></span><span style="font-size:14px;color:#ffffff;"> 万m³/D</span></td>
</tr>
<tr>
<td colspan="2" style="text-align:right;font-size: 14px;color: #ffffff;">
昨日水量:
</td>
<td id="companyYWater3" style="text-align:left;font-size:20px;color:#347EFB;">
</td>
</tr>
<tr>
<td colspan="2" style="text-align:right;font-size: 14px;color: #ffffff;">
今日水量:
</td>
<td id="companyTWater3" style="text-align:left;font-size:20px;color:#347EFB;">
</td>
</tr>
</table>
</div>
<div onclick="doGo('e0368f13e99945dbae7dae16b4c50a76');" style="cursor: pointer;width:230px;height:120px;background: rgba(3,5,18,0.25);border-radius: 9px;position:absolute;top:160px;left:1200px;">
<table style="width:100%;height:100%;table-layout: fixed;text-align: center;vertical-align: middle;font-family: PingFangSC, PingFangSC-Semibold;">
<tr style="height:38px;">
<td style="width:91px;background:#76afdb;border-radius: 18px 0px 28px 0px;color:rgba(52,241,255,1);font-size:16px;font-weight: 600;letter-spacing:2px;">城北厂</td>
<td style="width:30px;"></td>
<td style="text-align:left;"><span id="companyDWater4" style="font-size:20px;color:#a5f1f7;"></span><span style="font-size:14px;color:#ffffff;"> 万m³/D</span></td>
</tr>
<tr>
<td colspan="2" style="text-align:right;font-size: 14px;color: #ffffff;">
昨日水量:
</td>
<td id="companyYWater4" style="text-align:left;font-size:20px;color:#347EFB;">
</td>
</tr>
<tr>
<td colspan="2" style="text-align:right;font-size: 14px;color: #ffffff;">
今日水量:
</td>
<td id="companyTWater4" style="text-align:left;font-size:20px;color:#347EFB;">
</td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>

View File

@ -0,0 +1,175 @@
<%@ 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">
/* 请求数据 */
function getValue() {
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
// console.log(data);
if(data!=''){
for(var i=0;i<data.length;i++){
if(data[i].elementCode=="img"){
var url=data[i].valueUrl;
$('#Image').css("background","url("+getRootPath()+""+url+") no-repeat 0px 0px");
$('#Image').css("background-size","cover");
}
}
}
}, 'json');
}
/* 定时器 */
//setInterval(change, 60000); //每1分钟切换
// setInterval(getValue, 3600000); //每一小时切换
/* 初始化 */
$(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("titleImage").src = ""+getRootPath()+"/images/大屏/大屏标题文字背景.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;
}
</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%;">
<div style="float:left;width:100%;height:35px;margin-left: 20px;">
<div style="float:left;width:194px;height:34px;">
<div style="position:absolute;top:12px;left:50px;z-index:999;opacity: 1;font-size: 20px;font-family: Microsoft YaHei, Microsoft YaHei-Regular;margin-left:20px;">大 事 记</div>
<img id="titleImage" src="" style="z-index:998;position:relative;height:100%;width:100%;"/>
</div>
<div id="content" style="float:left;width: 100%;margin-top: 20px;">
<div style="float: left;width:100%;height:80px;">
<div style="float: left;width:120px;color:#3EFFFF;text-align: center;font-size: 18px;font-family: SimHei, SimHei-Regular;">2020年09月</div>
<div style="float: left;width:10px;">
<div style="float:left;width: 10px;height: 10px;opacity: 1;background: #3effff;border-radius: 50%;"></div>
<div style="float:left;width: 1px;height: 70px;opacity: 1;border: 1px solid #3effff;margin-left: 4px;"></div>
</div>
<div style="float: left;width:calc(100% - 145px);color:#3EFFFF;text-align: left;font-size: 18px;font-family: SimHei, SimHei-Regular;padding-left:15px;">渝南水司召开公司机构调整暨新大江水厂、鱼洞营管所成立工作会</div>
</div>
<div style="float: left;width:100%;height:80px;">
<div style="float: left;width:120px;color:#3EFFFF;text-align: center;font-size: 18px;font-family: SimHei, SimHei-Regular;">2020年05月</div>
<div style="float: left;width:10px;">
<div style="float:left;width: 10px;height: 10px;opacity: 1;background: #3effff;border-radius: 50%;"></div>
<div style="float:left;width: 1px;height: 70px;opacity: 1;border: 1px solid #3effff;margin-left: 4px;"></div>
</div>
<div style="float: left;width:calc(100% - 145px);color:#3EFFFF;text-align: left;font-size: 18px;font-family: SimHei, SimHei-Regular;padding-left:15px;">鸡冠石片区供水区域移交签约仪式</div>
</div>
<div style="float: left;width:100%;height:80px;">
<div style="float: left;width:120px;color:#3EFFFF;text-align: center;font-size: 18px;font-family: SimHei, SimHei-Regular;">2020年01月</div>
<div style="float: left;width:10px;">
<div style="float:left;width: 10px;height: 10px;opacity: 1;background: #3effff;border-radius: 50%;"></div>
<div style="float:left;width: 1px;height: 70px;opacity: 1;border: 1px solid #3effff;margin-left: 4px;"></div>
</div>
<div style="float: left;width:calc(100% - 145px);color:#3EFFFF;text-align: left;font-size: 18px;font-family: SimHei, SimHei-Regular;padding-left:15px;">原重庆市自来水有限公司下属江南水厂和江南营业管网所的管理主体变更为重庆市渝南自来水有限公司</div>
</div>
<div style="float: left;width:100%;height:80px;">
<div style="float: left;width:120px;color:#3EFFFF;text-align: center;font-size: 18px;font-family: SimHei, SimHei-Regular;">2019年12月</div>
<div style="float: left;width:10px;">
<div style="float:left;width: 10px;height: 10px;opacity: 1;background: #3effff;border-radius: 50%;"></div>
<div style="float:left;width: 1px;height: 70px;opacity: 1;border: 1px solid #3effff;margin-left: 4px;"></div>
</div>
<div style="float: left;width:calc(100% - 145px);color:#3EFFFF;text-align: left;font-size: 18px;font-family: SimHei, SimHei-Regular;padding-left:15px;">渝南水司与市自来水公司进行南部片区供水市场整合协议签订</div>
</div>
<div style="float: left;width:100%;height:80px;">
<div style="float: left;width:120px;color:#3EFFFF;text-align: center;font-size: 18px;font-family: SimHei, SimHei-Regular;">2019年11月</div>
<div style="float: left;width:10px;">
<div style="float:left;width: 10px;height: 10px;opacity: 1;background: #3effff;border-radius: 50%;"></div>
<div style="float:left;width: 1px;height: 70px;opacity: 1;border: 1px solid #3effff;margin-left: 4px;"></div>
</div>
<div style="float: left;width:calc(100% - 145px);color:#3EFFFF;text-align: left;font-size: 18px;font-family: SimHei, SimHei-Regular;padding-left:15px;">集团领导进行新大江水厂建设及南部保供调研</div>
</div>
<div style="float: left;width:100%;height:80px;">
<div style="float: left;width:120px;color:#3EFFFF;text-align: center;font-size: 18px;font-family: SimHei, SimHei-Regular;">2018年12月</div>
<div style="float: left;width:10px;">
<div style="float:left;width: 10px;height: 10px;opacity: 1;background: #3effff;border-radius: 50%;"></div>
<div style="float:left;width: 1px;height: 70px;opacity: 1;border: 1px solid #3effff;margin-left: 4px;"></div>
</div>
<div style="float: left;width:calc(100% - 145px);color:#3EFFFF;text-align: left;font-size: 18px;font-family: SimHei, SimHei-Regular;padding-left:15px;">新大江建设一期开工</div>
</div>
<div style="float: left;width:100%;height:80px;">
<div style="float: left;width:120px;color:#3EFFFF;text-align: center;font-size: 18px;font-family: SimHei, SimHei-Regular;">2013年11月</div>
<div style="float: left;width:10px;">
<div style="float:left;width: 10px;height: 10px;opacity: 1;background: #3effff;border-radius: 50%;"></div>
<div style="float:left;width: 1px;height: 70px;opacity: 1;border: 1px solid #3effff;margin-left: 4px;"></div>
</div>
<div style="float: left;width:calc(100% - 145px);color:#3EFFFF;text-align: left;font-size: 18px;font-family: SimHei, SimHei-Regular;padding-left:15px;">我司华夏八街新收费点正式对外开放</div>
</div>
<div style="float: left;width:100%;height:80px;">
<div style="float: left;width:120px;color:#3EFFFF;text-align: center;font-size: 18px;font-family: SimHei, SimHei-Regular;">2013年02月</div>
<div style="float: left;width:10px;">
<div style="float:left;width: 10px;height: 10px;opacity: 1;background: #3effff;border-radius: 50%;"></div>
<div style="float:left;width: 1px;height: 70px;opacity: 1;border: 1px solid #3effff;margin-left: 4px;"></div>
</div>
<div style="float: left;width:calc(100% - 145px);color:#3EFFFF;text-align: left;font-size: 18px;font-family: SimHei, SimHei-Regular;padding-left:15px;">大江水厂应急扩建工程正式开工动土</div>
</div>
<div style="float: left;width:100%;height:80px;">
<div style="float: left;width:120px;color:#3EFFFF;text-align: center;font-size: 18px;font-family: SimHei, SimHei-Regular;">2012年04月</div>
<div style="float: left;width:10px;">
<div style="float:left;width: 10px;height: 10px;opacity: 1;background: #3effff;border-radius: 50%;"></div>
<div style="float:left;width: 1px;height: 70px;opacity: 1;border: 1px solid #3effff;margin-left: 4px;"></div>
</div>
<div style="float: left;width:calc(100% - 145px);color:#3EFFFF;text-align: left;font-size: 18px;font-family: SimHei, SimHei-Regular;padding-left:15px;">龙洲湾新客户服务中心正式营业</div>
</div>
<div style="float: left;width:100%;height:80px;">
<div style="float: left;width:120px;color:#3EFFFF;text-align: center;font-size: 18px;font-family: SimHei, SimHei-Regular;">2005年02月</div>
<div style="float: left;width:10px;">
<div style="float:left;width: 10px;height: 10px;opacity: 1;background: #3effff;border-radius: 50%;"></div>
<div style="float:left;width: 1px;height: 70px;opacity: 1;border: 1px solid #3effff;margin-left: 4px;"></div>
</div>
<div style="float: left;width:calc(100% - 145px);color:#3EFFFF;text-align: left;font-size: 18px;font-family: SimHei, SimHei-Regular;padding-left:15px;">成立渝南水司大江水厂</div>
</div>
<div style="float: left;width:100%;height:80px;">
<div style="float: left;width:120px;color:#3EFFFF;text-align: center;font-size: 18px;font-family: SimHei, SimHei-Regular;">2002年01月</div>
<div style="float: left;width:10px;">
<div style="float:left;width: 10px;height: 10px;opacity: 1;background: #3effff;border-radius: 50%;"></div>
<div style="float:left;width: 1px;height: 70px;opacity: 1;border: 1px solid #3effff;margin-left: 4px;"></div>
</div>
<div style="float: left;width:calc(100% - 145px);color:#3EFFFF;text-align: left;font-size: 18px;font-family: SimHei, SimHei-Regular;padding-left:15px;">组建重庆市渝南自来水有限公司;为重庆市水务控股(集团)有限公司出资组建的国有全资子公司,依法经营,确保国有资产的保值、增值和安全。</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

View File

@ -0,0 +1,76 @@
<%@ 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">
/* 请求数据 */
function getValue() {
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
// console.log(data);
if(data!=''){
for(var i=0;i<data.length;i++){
if(data[i].elementCode=="camera"){
$('#camera').attr('src',ext.contextPath+data[i].valueUrl);
}
}
}
}, 'json');
}
/* 定时器 */
//setInterval(change, 60000); //每1分钟切换
// setInterval(getValue, 3600000); //每一小时切换
/* 初始化 */
$(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";
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;
}
</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:45px;padding-left:10px;padding-right:10px;">
<iframe id="camera" scrolling="no" allowtransparency="yes" style="height:100%;width:100%;border:0px;padding:0px;margin:0px;" ></iframe>
</div>
</body>
</html>

View File

@ -0,0 +1,219 @@
<%@ 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">
/* 请求数据 */
function getValue() {
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
// console.log(data);
if(data!=''){
}
}, 'json');
}
/* 定时器 */
//setInterval(change, 60000); //每1分钟切换
// setInterval(getValue, 3600000); //每一小时切换
/* 初始化 */
$(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("titleImage").src = ""+getRootPath()+"/images/大屏/大屏标题文字背景.png";
document.getElementById("areaImg").src = ""+getRootPath()+"/images/大屏/服务面积.png";
document.getElementById("peopleImg").src = ""+getRootPath()+"/images/大屏/服务人口.png";
document.getElementById("areaImg2").src = ""+getRootPath()+"/images/大屏/服务面积.png";
document.getElementById("peopleImg2").src = ""+getRootPath()+"/images/大屏/服务人口.png";
document.getElementById("areaImg3").src = ""+getRootPath()+"/images/大屏/服务面积.png";
document.getElementById("peopleImg3").src = ""+getRootPath()+"/images/大屏/服务人口.png";
document.getElementById("areaImg4").src = ""+getRootPath()+"/images/大屏/服务面积.png";
document.getElementById("peopleImg4").src = ""+getRootPath()+"/images/大屏/服务人口.png";
document.getElementById("areaImg5").src = ""+getRootPath()+"/images/大屏/服务面积.png";
document.getElementById("peopleImg5").src = ""+getRootPath()+"/images/大屏/服务人口.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;
}
</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%;">
<div style="float:left;width:100%;height:35px;padding-left: 20px;">
<div style="float:left;width:100%;height:34px;">
<div style="position:absolute;top:12px;left:50px;z-index:999;opacity: 1;font-size: 20px;font-family: Microsoft YaHei, Microsoft YaHei-Regular;margin-left:30px;">污水厂介绍</div>
<img id="titleImage" src="" style="z-index:998;position:relative;"/>
</div>
</div>
<div style="float:left;width:100%;height:calc((100% - 100px)/5);padding-left: 20px;margin-top: 30px;">
<div style="float: left;height: 35%;width: 100%;">
<div style="float: left;height: 100%;width: 50%;font-size: 30px;color: #2B9DD8;">
城桥污水处理厂
</div>
<div style="float: left;height: 100%;width: 25%;">
<div style="float: left;height:34px;width:34px;padding-top:5px;">
<img id="areaImg" src="" style="z-index:999;position:relative;height:34px;width:34px;"/>
</div>
<div style="float: left;font-size: 34px;color: #69F6F9;padding-left: 25px;">
77
</div>
</div>
<div style="float: left;height: 100%;width: 25%;">
<div style="float: left;height:34px;width:34px;padding-top:5px;">
<img id="peopleImg" src="" style="z-index:999;position:relative;height:34px;width:34px;"/>
</div>
<div style="float: left;font-size: 34px;color: #69F6F9;padding-left: 25px;">
27
</div>
</div>
</div>
<div style="float: left;height: 65%;width: 100%;font-size: 20px;color: #D8D8D8;">
一期设计规模5万m3/d目前实际运行规模5万m3/d 服务范围包括城桥镇全域与庙镇部分区域
</div>
</div>
<div style="float:left;width:100%;height:calc((100% - 100px)/5);padding-left: 20px;">
<div style="float: left;height: 35%;width: 100%;">
<div style="float: left;height: 100%;width: 50%;font-size: 30px;color: #2B9DD8;">
新河污水处理厂
</div>
<div style="float: left;height: 100%;width: 25%;">
<div style="float: left;height:34px;width:34px;padding-top:5px;">
<img id="areaImg2" src="" style="z-index:999;position:relative;height:34px;width:34px;"/>
</div>
<div style="float: left;font-size: 34px;color: #69F6F9;padding-left: 25px;">
46
</div>
</div>
<div style="float: left;height: 100%;width: 25%;">
<div style="float: left;height:34px;width:34px;padding-top:5px;">
<img id="peopleImg2" src="" style="z-index:999;position:relative;height:34px;width:34px;"/>
</div>
<div style="float: left;font-size: 34px;color: #69F6F9;padding-left: 25px;">
10.5
</div>
</div>
</div>
<div style="float: left;height: 65%;width: 100%;font-size: 20px;color: #D8D8D8;">
设计规模6.5万m3/d目前实际运行规模0.5万m3/d 服务范围包括新河镇全域及竖新镇部分区域
</div>
</div>
<div style="float:left;width:100%;height:calc((100% - 100px)/5);padding-left: 20px;">
<div style="float: left;height: 35%;width: 100%;">
<div style="float: left;height: 100%;width: 50%;font-size: 30px;color: #2B9DD8;">
堡镇污水处理厂
</div>
<div style="float: left;height: 100%;width: 25%;">
<div style="float: left;height:34px;width:34px;padding-top:5px;">
<img id="areaImg3" src="" style="z-index:999;position:relative;height:34px;width:34px;"/>
</div>
<div style="float: left;font-size: 34px;color: #69F6F9;padding-left: 25px;">
231
</div>
</div>
<div style="float: left;height: 100%;width: 25%;">
<div style="float: left;height:34px;width:34px;padding-top:5px;">
<img id="peopleImg3" src="" style="z-index:999;position:relative;height:34px;width:34px;"/>
</div>
<div style="float: left;font-size: 34px;color: #69F6F9;padding-left: 25px;">
10.8
</div>
</div>
</div>
<div style="float: left;height: 65%;width: 100%;font-size: 20px;color: #D8D8D8;">
一期设计规模5万m3/d目前实际运行规模1.25万m3/d 服务范围包括堡镇、港沿、向化等区域
</div>
</div>
<div style="float:left;width:100%;height:calc((100% - 100px)/5);padding-left: 20px;">
<div style="float: left;height: 35%;width: 100%;">
<div style="float: left;height: 100%;width: 50%;font-size: 30px;color: #2B9DD8;">
陈家镇污水处理厂
</div>
<div style="float: left;height: 100%;width: 25%;">
<div style="float: left;height:34px;width:34px;padding-top:5px;">
<img id="areaImg4" src="" style="z-index:999;position:relative;height:34px;width:34px;"/>
</div>
<div style="float: left;font-size: 34px;color: #69F6F9;padding-left: 25px;">
224
</div>
</div>
<div style="float: left;height: 65%;width: 25%;">
<div style="float: left;height:34px;width:34px;padding-top:5px;">
<img id="peopleImg4" src="" style="z-index:999;position:relative;height:34px;width:34px;"/>
</div>
<div style="float: left;font-size: 34px;color: #69F6F9;padding-left: 25px;">
24
</div>
</div>
</div>
<div style="float: left;height: 60%;width: 100%;font-size: 20px;color: #D8D8D8;">
设计规模7.0万m3/d目前实际运行规模1.75万m3/d 服务范围包括陈家镇、前哨农场、崇明东滩等区域
</div>
</div>
<div style="float:left;width:100%;height:calc((100% - 100px)/5);padding-left: 20px;">
<div style="float: left;height: 35%;width: 100%;">
<div style="float: left;height: 100%;width: 50%;font-size: 30px;color: #2B9DD8;">
长兴污水处理厂
</div>
<div style="float: left;height: 100%;width: 25%;">
<div style="float: left;height:34px;width:34px;padding-top:5px;">
<img id="areaImg5" src="" style="z-index:999;position:relative;height:34px;width:34px;"/>
</div>
<div style="float: left;font-size: 34px;color: #69F6F9;padding-left: 25px;">
26.1
</div>
</div>
<div style="float: left;height: 65%;width: 25%;">
<div style="float: left;height:34px;width:34px;padding-top:5px;">
<img id="peopleImg5" src="" style="z-index:999;position:relative;height:34px;width:34px;"/>
</div>
<div style="float: left;font-size: 34px;color: #69F6F9;padding-left: 25px;">
12
</div>
</div>
</div>
<div style="float: left;height: 60%;width: 100%;font-size: 20px;color: #D8D8D8;">
设计规模5万m3/d目前实际运行规模2.5万m3/d 服务范围包括工程服务范围包括长兴岛工业、居住用地等区域
</div>
</div>
</div>
</div>
</body>
</html>

View File

@ -0,0 +1,229 @@
<%@ 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页-->
<!-- nth-tabs -->
<link rel="stylesheet"
href="<%=request.getContextPath()%>/node_modules/nth-tabs-master/jquery.scrollbar.css"></link>
<link rel="stylesheet" href="<%=request.getContextPath()%>/node_modules/nth-tabs-master/nth-tabs.css"></link>
<link rel="stylesheet" href="<%=request.getContextPath()%>/node_modules/nth-tabs-master/nth-icons.css"></link>
<script type="text/javascript" src="<%=request.getContextPath()%>/node_modules/nth-tabs-master/jquery.scrollbar.js"
charset="utf-8"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/node_modules/nth-tabs-master/nth-tabs.js"
charset="utf-8"></script>
<script type="text/javascript">
/* 请求数据 */
function getbigScreen_dataIndicatorsValue() {
// $.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}",sdt:'2020-08-17 00:00',edt:'2020-08-17 23:59',elementCode:'hyData'}, function (data) {
// // console.log(data);
// if(data!=''){
// var html="";
// for(var i=0;i<data.length;i++){
// }
// }
// }, 'json');
// $.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}",sdt:'2020-08-17 00:00',edt:'2020-08-17 23:59',elementCode:'yx Data'}, function (data) {
// // console.log(data);
// if(data!=''){
// var html="";
// for(var i=0;i<data.length;i++){
// }
// }
// }, 'json');
// $.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}",sdt:'2020-08-17 00:00',edt:'2020-08-17 23:59',elementCode:'sbData'}, function (data) {
// // console.log(data);
// if(data!=''){
// var html="";
// for(var i=0;i<data.length;i++){
// }
// }
// }, 'json');
}
function showBigScreen_dataIndicatorsDetais(elementCode){
if(elementCode=='hyData'){
parent.addTab('hyData','化验数据','/process/dataVisualFrame/view.do?menuType=proVisual&frameId=6bbfcada534642cda634365c376533c4');
}
else if(elementCode=='yxData'){
parent.addTab('yxData','运行数据','/process/dataVisualFrame/view.do?menuType=proVisual&frameId=c008a3cb894b4307b9d488d6a6657dfa');
}
else if(elementCode=='sbData'){
parent.addTab('sbData','设备数据','/equipment/showEquipmentStatisticalChart.do');
}
}
// function showBigScreen_dataIndicatorsDetais(elementCode,titleName){
// showBigScreen_dataIndicatorsOpen("${param.planLayoutId}",elementCode,titleName);
// }
// function showBigScreen_dataIndicatorsOpen(planLayoutId,elementCode,titleName){
// var myDate = new Date;
// //获取当前年
// var year=myDate.getFullYear();
// //获取当前月
// var month=myDate.getMonth()+1;
// if(Number(month)<10){
// month="0"+month;
// }
// var day = myDate.getDate(); //获取当前日
// var sdt=year+"-"+month+"-"+day+" 00:00";
// var edt=year+"-"+month+"-"+day+" 23:59";
// var index = layer.open({
// type: 1,
// title: false,
// closeBtn: 0,
// area:["500px","320px"],
// fixed: false,
// shadeClose: true,
// content: '<div id="bigScreen_dataIndicatorsOpen" style="width:500px;height:320px;overflow-y:auto;background:#16314c;"></div><div id="endsubDiv"></div>',
// success:function(){
// $('#bigScreen_dataIndicatorsOpen').empty();
// $.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', {planLayoutId:planLayoutId,sdt:sdt,edt:edt,elementCode:elementCode}, function (data) {
// // console.log(data);
// if(data!=''){
// var html="";
// html+="<div style=\"height:100%;width:100%;padding: 10px;\">";
// html+="<div style=\"float: left;width:100%;height:100%;padding-left:10px;padding-right:10px;\">";
// html+="<div style=\"width: 100%;height:20px;color:#8AC2F6;font-size: 16px;\">"+titleName+"</div>";
// html+="<div style=\"width: 100%;height:20px;color:#8AC2F6;font-size: 12px;margin-top: 10px;\"><span>最近时间:</span><span>"+year+"-"+month+"-"+day+"</span></div>";
// html+="<table style='height:260px;'>";
// var tdNum=0;
// var nowCNum=1;
// for(var i=0;i<data.length;i++){
// var unit="";
// if(data[i].mPoint!=''&&data[i].mPoint!=null){
// if(data[i].mPoint.unit!=''&&data[i].mPoint.unit!=null){
// unit="("+data[i].mPoint.unit+")";
// }
// }
// var parmvalue=0;
// if(data[i].mPointHistory!=''&&data[i].mPointHistory!=null){
// if(data[i].mPointHistory[0].parmvalue!=''&&data[i].mPointHistory[0].parmvalue!=null){
// parmvalue=data[i].mPointHistory[0].parmvalue;
// }
// }
// if((i+6) % 6 == 0){
// html+="<tr style=\"height:130px;\">";
// }
// if((tdNum+2) % 2 == 0){
// html+="<td style=\"width:165px;padding-right:15px;cursor: pointer;\" >";
// html+="<div style=\"width: 100%;height:60px;text-align: center;padding-bottom:2px;\">";
// html+="<div onclick=\"showHisEnd('"+data[i].valueUrl+"','"+data[i].unitId+"');\" style=\"width: 100%;height: 50%;font-size: 14px;color: #8ac2f6;background-color:#0E2439;line-height:30px;\">"+data[i].name+"</div>";
// html+="<div onclick=\"showHisEnd('"+data[i].valueUrl+"','"+data[i].unitId+"');\" style=\"width: 100%;height: 50%;font-size: 14px;background-color:#0E2439;\"><span style=\"color: #ffffff;\">"+parmvalue+"</span><span style=\"color: #8ac2f6;\">"+unit+"</span></div>";
// html+="</div>";
// nowCNum++;
// }else{
// html+="<div style=\"width: 100%;height:60px;text-align: center;padding-bottom:2px;\" >";
// html+="<div onclick=\"showHisEnd('"+data[i].valueUrl+"','"+data[i].unitId+"');\" style=\"width: 100%;height: 50%;font-size: 14px;color: #8ac2f6;background-color:#0E2439;line-height:30px;\">"+data[i].name+"</div>";
// html+="<div onclick=\"showHisEnd('"+data[i].valueUrl+"','"+data[i].unitId+"');\" style=\"width: 100%;height: 50%;font-size: 14px;background-color:#0E2439;\"><span style=\"color: #ffffff;\">"+parmvalue+"</span><span style=\"color: #8ac2f6;\">"+unit+"</span></div>";
// html+="</div>";
// html+="</td>";
// }
// if((i+6) % 6 == 0 && nowCNum==3){
// html+="</tr>";
// tdNum=0;
// nowCNum=1;
// }
// tdNum++;
// }
// html+="</table>";
// html+="</div>";
// html+="</div>";
// $('#bigScreen_dataIndicatorsOpen').html(html);
// }
// }, 'json');
// },
// end:function(){
// layer.closeAll();
// },
// });
// }
/* 定时器 */
//setInterval(change, 60000); //每1分钟切换
// setInterval(getValue, 3600000); //每一小时切换
/* 初始化 */
$(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("bigScreen_dataIndicatorsbackImage1").src = ""+getRootPath()+"/images/大屏/化验数据.png";
document.getElementById("bigScreen_dataIndicatorsbackImage2").src = ""+getRootPath()+"/images/大屏/运行数据.png";
document.getElementById("bigScreen_dataIndicatorsbackImage3").src = ""+getRootPath()+"/images/大屏/设备数据.png";
// getValue();
//console.log("height",document.body.scrollHeight);
});
</script>
</head>
<body style="width:100%;height:100%;margin:0;padding:0;overflow-x:hidden;overflow-y:hidden">
<div id="bigScreen_dataIndicatorsmain" style="height:100%;width:100%;padding-top:10px;padding-left:10px;padding-right:10px;">
<div style="height:100%;width:100%;background:#16314c;border-radius: 8px;padding: 10px;">
<div style="width:100%;height: 30%;background:#254464;cursor: pointer;" onclick="showBigScreen_dataIndicatorsDetais('hyData');">
<table style="width: 100%;height: 100%;text-align: center;vertical-align: middle;">
<tr>
<td style="width:40px;padding-left:8px;">
<img id="bigScreen_dataIndicatorsbackImage1" src="" style="z-index:999;position:relative;height:50%;width:32px;"/>
</td>
<td style="font-size: 24px;font-weight:800px;color: #8ac2f6;">化验数据</td>
<td style="width:60px;font-size:34px;font-weight:bold;color: #8ac2f6;"><span class="fa fa-long-arrow-right" ></span></td>
</tr>
</table>
</div>
<div style="width:100%;height: 5%;"></div>
<div style="width:100%;height: 30%;background:#254464;cursor: pointer;" onclick="showBigScreen_dataIndicatorsDetais('yxData');">
<table style="width: 100%;height: 100%;text-align: center;vertical-align: middle;">
<tr>
<td style="width:40px;padding-left:8px;">
<img id="bigScreen_dataIndicatorsbackImage2" src="" style="z-index:999;position:relative;height:50%;width:32px;"/>
</td>
<td style="font-size: 24px;font-weight:800px;color: #8ac2f6;">运行数据</td>
<td style="width:60px;font-size:34px;font-weight:bold;color: #8ac2f6;"><span class="fa fa-long-arrow-right" ></span></td>
</tr>
</table>
</div>
<div style="width:100%;height: 5%;"></div>
<div style="width:100%;height: 30%;background:#254464;cursor: pointer;" onclick="showBigScreen_dataIndicatorsDetais('sbData');">
<table style="width: 100%;height: 100%;text-align: center;vertical-align: middle;">
<tr>
<td style="width:40px;padding-left:8px;">
<img id="bigScreen_dataIndicatorsbackImage3" src="" style="z-index:999;position:relative;height:50%;width:32px;"/>
</td>
<td style="font-size: 24px;font-weight:800px;color: #8ac2f6;">设备数据</td>
<td style="width:60px;font-size:34px;font-weight:bold;color: #8ac2f6;"><span class="fa fa-long-arrow-right" ></span></td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>

View File

@ -0,0 +1,230 @@
<%@ 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">
//获取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;
}
var mychart="";
/* 请求数据 */
function getValue() {
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
// console.log(data);
if(data!=null&&data.length>0){
var series=[];
var actualValue=0;
var targetValue=0;
var actualValueNum=0;
for(var i=0;i<data.length;i++){
if(data[i].elementCode=="targetValue"){
targetValue=data[i].mPoint.parmvalue;
series.push({
name:data[i].name,
stack:data[i].name,
data: [data[i].mPoint.parmvalue],
type:'bar',
barWidth :30,
barGap:2.5,
itemStyle:{
emphasis: {//柱形图圆角,鼠标移上去效果
color:'#ffffff',
barBorderRadius: [0, 0, 0, 0]
},
normal: {//柱形图圆角,初始化效果
color:'gray',
barBorderRadius:[0, 0, 0, 0],
label: {
// formatter: "{a}",
formatter:function(params){ //标签内容
var name=params.seriesName.split("(");
return name[0];
},
show: true,
position: "bottom",
textStyle: {
// fontWeight: "bolder",
fontSize: "14",
color: "#FFFFFF"
}
}
}
}
});
}else if(data[i].elementCode=="actualValue"){
series.push({
name:(data[i].mPoint.parmvalue).toFixed(2),
data: [(data[i].mPoint.parmvalue-targetValue).toFixed(2)],
stack:data[i].name,
type:'bar',
barWidth :30,
barGap:2.5,
itemStyle:{
emphasis: {//柱形图圆角,鼠标移上去效果
color:'#36BAFD',
barBorderRadius: [10, 10,0,0]
},
normal: {//柱形图圆角,初始化效果
color:'#36BAFD',
barBorderRadius:[10, 10,0,0],
label: {
formatter: "{a}",
show: true,
position: "top",
textStyle: {
// fontWeight: "bolder",
fontSize: "14",
color: "#FFFFFF"
}
}
}
}
});
actualValueNum++;
}
}
mychart=echarts.init(document.getElementById('chart'));
var option = {
animation:false,
grid:{
left: '4%', // 与容器左侧的距离
right: '4%', // 与容器右侧的距离
top: '10%', // 与容器顶部的距离
bottom: '10%', // 与容器底部的距离
containLabel:true
},
xAxis: {
type: 'category',
axisLabel: {
show: true,
align:'center',
textStyle: {
color: '#FFFFFF' //更改坐标轴文字颜色
}
},
axisLine:{
show:true,
lineStyle:{
color:'#3B415C', //更改坐标轴颜色
width: 2 // 粗细
}
},
axisTick: {
show: false
},
splitLine: {
show: false//是否显示分隔线。默认数值轴显示,类目轴不显示。
}
},
yAxis: {
type : 'value',
name : false,
axisLabel: {
show: true,
textStyle: {
color: '#FFFFFF' //更改坐标轴文字颜色
}
},
axisLine:{
show:true,
lineStyle:{
color:'#3B415C', //更改坐标轴颜色
width: 2 // 粗细
}
},
axisTick: {
show: false
},
splitLine: {
show: true,//是否显示分隔线。默认数值轴显示,类目轴不显示。
lineStyle:{
color:'#262952',
type:'dashed'
}
},
// scale:true//设置成 true 后坐标刻度不会强制包含零刻度。
},
series: series
};
// console.log(option);
mychart.setOption(option,true);
var textnum=data.length-actualValueNum;
var textHtml="";
for(var m=0;m<data.length;m++){
if(data[m].elementCode=="targetValue"){
textHtml+="<div style='float:left;width:100%;height: calc((100vh - 60px - 40px)/"+textnum+");'>";
textHtml+="<div style='float:left;width:100%;height: calc((100vh - 60px - 40px)/"+textnum+"/2);line-height: calc((100vh - 60px - 40px)/"+textnum+"/2);font-size: 18px;font-family: Helvetica;text-align: center;color: #ffffff;'>"+data[m].name+"</div>";
textHtml+="<div style='float:left;width:100%;height: calc((100vh - 60px - 40px)/"+textnum+"/2);line-height: calc((100vh - 60px - 40px)/"+textnum+"/2);font-size: 20px;font-family: Helvetica;text-align: center;color: #69F6F9;'>"+(data[m].mPoint.parmvalue).toFixed(2)+"</div>";
// textHtml+="";
textHtml+="</div>";
}
}
$('#text').html(textHtml);
}
}, 'json');
}
/* 定时器 */
//setInterval(change, 60000); //每1分钟切换
setInterval(getValue, 3600000); //每一小时切换
/* 初始化 */
$(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-15) + "px";
document.getElementById("backImage").src = ""+getRootPath()+"/images/大屏/减排量.png";
getValue();
//console.log("height",document.body.scrollHeight);
});
</script>
</head>
<body style="width:100%;height:100%;margin:0;padding:0;overflow-x:hidden;overflow-y:hidden">
<div style="height:100%;width:100%;padding-top:15px;">
<div id="main" style="height:100%;width:100%;padding:0px;background:rgba(19,32,85,0.27);border-radius: 8px;">
<div style='float:left;width:50%;height:60px;'><img id="backImage" src="" style="z-index:-1;position:relative;height:100%;width: 100%;"/></div>
<div style='float:left;width:50%;height:60px;'></div>
<div id="chart" style="float:left;width:70%;height: calc(100vh - 60px - 15px);"></div>
<div style="float:left;width:30%;height: calc(100vh - 60px - 10px);">
<div id="titletext" style="float:left;width:100%;height:20px;color:#69F6F9;font-size:18px;text-align: center;margin-bottom: 15px;">计划值(灰色)</div>
<div id="text" style="float:left;width:100%;height: calc(100vh - 60px - 50px);margin-top: -10px;"></div>
</div>
</div>
</div>
</body>
</html>

View File

@ -0,0 +1,234 @@
<%@ 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">
//获取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;
}
//获取url地址根目录 当前taomcat下路径
function getRootPath2(){
var pathName = window.location.pathname.substring(1);
var webName = pathName == '' ? '' : pathName.substring(0, pathName.indexOf('/'));
return window.location.protocol + '//' + window.location.host +"/"+webName;
}
var mychart="";
/* 请求数据 */
function getValue() {
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
// console.log(data);
if(data!=null&&data.length>0){
var series=[];
var yAxis=[];
var actualValue=0;
var targetValue=0;
var actualValueNum=0;
var targetValueNum=0;
var barcolor="#36BAFD";
for(var i=0;i<data.length;i++){
if(data[i].elementCode=="actualValue"){
if(actualValueNum==0){
barcolor="#3482FF";
}else if(actualValueNum==1){
barcolor="#C08F33";
}else if(actualValueNum==2||actualValueNum==3){
barcolor="#8D40CC";
}
actualValue=data[i].mPoint.parmvalue;
series.push({
name:data[i].name,
stack:data[i].name,
data: [actualValue],
yAxisIndex: actualValueNum,
type:'bar',
barWidth : 25,
barGap:1.8,
itemStyle:{
emphasis: {//柱形图圆角,鼠标移上去效果
color:barcolor,
barBorderRadius: [0, 0, 0, 0]
},
normal: {//柱形图圆角,初始化效果
color:barcolor,
barBorderRadius:[0, 0, 0, 0],
label: {
// formatter: "{a}",
formatter:function(params){ //标签内容
var name=params.seriesName.split("(");
return name[0];
},
show: true,
position: "bottom",
textStyle: {
// fontWeight: "bolder",
fontSize: "14",
color: "#FFFFFF"
}
}
}
}
});
yAxis.push({
type:'value',
show:false
});
actualValueNum++;
}else if(data[i].elementCode=="targetValue"){
// console.log(actualValue);
var tdata=[];
if(Number(data[i].valueUrl)-actualValue>0){
tdata.push((Number(data[i].valueUrl)-actualValue).toFixed(2));
}else{
tdata.push(0);
}
series.push({
name:actualValue.toFixed(2),
data: tdata,
stack:data[i].name,
yAxisIndex: targetValueNum,
type:'bar',
barWidth : 25,
barGap:1.8,
itemStyle:{
emphasis: {//柱形图圆角,鼠标移上去效果
color:'gray',
barBorderRadius: [10, 10,0,0]
},
normal: {//柱形图圆角,初始化效果
color:'gray',
barBorderRadius:[10, 10,0,0],
label: {
formatter: "{a}",
show: true,
position: "top",
textStyle: {
// fontWeight: "bolder",
fontSize: "14",
color: "#FFFFFF"
}
}
}
}
});
targetValueNum++;
}
}
mychart=echarts.init(document.getElementById('chart'));
var option = {
animation:false,
grid:{
// left: '1%', // 与容器左侧的距离
// right: '1%', // 与容器右侧的距离
top: '10%', // 与容器顶部的距离
bottom: '10%', // 与容器底部的距离
// containLabel:true
},
xAxis: {
type: 'category',
axisLabel: {
show: true,
align:'center',
textStyle: {
color: '#FFFFFF' //更改坐标轴文字颜色
}
},
axisLine:{
show:true,
lineStyle:{
color:'#3B415C', //更改坐标轴颜色
width: 2 // 粗细
}
},
axisTick: {
show: false
},
splitLine: {
show: false//是否显示分隔线。默认数值轴显示,类目轴不显示。
}
},
yAxis:yAxis,
series: series
};
// console.log(option);
mychart.setOption(option,true);
var textnum=data.length-actualValueNum;
var textHtml="";
for(var m=0;m<data.length;m++){
if(data[m].elementCode=="targetValue"){
textHtml+="<div style='float:left;width:100%;height: calc((100vh - 60px - 40px)/"+textnum+");'>";
textHtml+="<div style='float:left;width:100%;height: calc((100vh - 60px - 40px)/"+textnum+"/2);line-height: calc((100vh - 60px - 40px)/"+textnum+"/2);font-size: 18px;font-family: Helvetica;text-align: center;color: #ffffff;'>"+data[m].name+"</div>";
textHtml+="<div style='float:left;width:100%;height: calc((100vh - 60px - 40px)/"+textnum+"/2);line-height: calc((100vh - 60px - 40px)/"+textnum+"/2);font-size: 20px;font-family: Helvetica;text-align: center;color: #69F6F9;'>"+Number(data[m].valueUrl).toFixed(2)+"</div>";
// textHtml+="";
textHtml+="</div>";
}
}
$('#text').html(textHtml);
}
}, 'json');
}
/* 定时器 */
//setInterval(change, 60000); //每1分钟切换
setInterval(getValue, 3600000); //每一小时切换
/* 初始化 */
$(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-15) + "px";
document.getElementById("backImage").src = ""+getRootPath()+"/images/大屏/能耗管理.png";
getValue();
//console.log("height",document.body.scrollHeight);
});
</script>
</head>
<body style="width:100%;height:100%;margin:0;padding:0;overflow-x:hidden;overflow-y:hidden">
<div style="height:100%;width:100%;padding-top:15px;">
<div id="main" style="height:100%;width:100%;padding:0px;background:rgba(19,32,85,0.27);border-radius: 8px;">
<div style='float:left;width:50%;height:60px;'><img id="backImage" src="" style="z-index:-1;position:relative;height:100%;width:100%;"/></div>
<div style='float:left;width:50%;height:60px;'></div>
<div id="chart" style="float:left;width:70%;height: calc(100vh - 60px - 15px);"></div>
<div style="float:left;width:30%;height: calc(100vh - 60px - 10px);">
<div id="titletext" style="float:left;width:100%;height:20px;color:#69F6F9;font-size:18px;text-align: center;margin-bottom: 15px;">计划值(灰色)</div>
<div id="text" style="float:left;width:100%;height: calc(100vh - 60px - 50px);margin-top: -10px;"></div>
</div>
</div>
</div>
</body>
</html>

View File

@ -0,0 +1,390 @@
<%@ 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">
//获取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;
}
//获取url地址根目录 当前taomcat下路径
function getRootPath2(){
var pathName = window.location.pathname.substring(1);
var webName = pathName == '' ? '' : pathName.substring(0, pathName.indexOf('/'));
return window.location.protocol + '//' + window.location.host +"/"+webName;
}
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方法用.进行拼接
}
var mychart="";
var lineData=[];
var lineData2=[];
var lineData3=[];
var lineData4=[];
/* 请求数据 */
function getValue() {
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
// console.log(data);
if(data!=''){
for(var i=0;i<data.length;i++){
if(data[i].elementCode=="waterTrend"){
var valueD=[];
if(data[i].mPointHistory!=''){
for(var h=0;h<data[i].mPointHistory.length;h++){
var value=[];
value.push(data[i].mPointHistory[h].measuredt.substring(5,10));
value.push(data[i].mPointHistory[h].parmvalue);
valueD.push(value);
}
$('#data1').text(numOutput((data[i].mPointHistory[data[i].mPointHistory.length-1].parmvalue).toFixed(0)));
}
lineData.push({
name:'实际值',
value:valueD
})
}else if(data[i].elementCode=="waterDesign"){
var valueD=[];
if(lineData!=''){
for(var h=0;h<lineData[0].value.length;h++){
var value=[];
value.push(lineData[0].value[h][0]);
value.push(data[i].visualCacheData.value);
valueD.push(value);
}
}
lineData.push({
name:'目标值',
value:valueD
})
}else if(data[i].elementCode=="mudTrend"){
var valueD=[];
if(data[i].mPointHistory!=''){
for(var h=0;h<data[i].mPointHistory.length;h++){
var value=[];
value.push(data[i].mPointHistory[h].measuredt.substring(5,10));
value.push(data[i].mPointHistory[h].parmvalue);
valueD.push(value);
}
$('#data2').text(numOutput((data[i].mPointHistory[data[i].mPointHistory.length-1].parmvalue).toFixed(0)));
}
lineData2.push({
name:'实际值',
value:valueD
})
}else if(data[i].elementCode=="mudDesign"){
var valueD=[];
if(lineData2!=''){
for(var h=0;h<lineData2[0].value.length;h++){
var value=[];
value.push(lineData2[0].value[h][0]);
value.push(data[i].visualCacheData.value);
valueD.push(value);
}
}
lineData2.push({
name:'目标值',
value:valueD
})
}else if(data[i].elementCode=="waterPowerTrend"){
var valueD=[];
if(data[i].mPointHistory!=''){
for(var h=0;h<data[i].mPointHistory.length;h++){
var value=[];
value.push(data[i].mPointHistory[h].measuredt.substring(5,10));
value.push(data[i].mPointHistory[h].parmvalue);
valueD.push(value);
}
$('#data3').text(numOutput((data[i].mPointHistory[data[i].mPointHistory.length-1].parmvalue).toFixed(2)));
}
lineData3.push({
name:'实际值',
value:valueD
})
}else if(data[i].elementCode=="waterPowerDesign"){
var valueD=[];
if(lineData3!=''){
for(var h=0;h<lineData3[0].value.length;h++){
var value=[];
value.push(lineData3[0].value[h][0]);
value.push(data[i].visualCacheData.value);
valueD.push(value);
}
}
lineData3.push({
name:'目标值',
value:valueD
})
}else if(data[i].elementCode=="waterDrugTrend"){
var valueD=[];
if(data[i].mPointHistory!=''){
for(var h=0;h<data[i].mPointHistory.length;h++){
var value=[];
value.push(data[i].mPointHistory[h].measuredt.substring(5,10));
value.push(data[i].mPointHistory[h].parmvalue);
valueD.push(value);
}
$('#data4').text(numOutput((data[i].mPointHistory[data[i].mPointHistory.length-1].parmvalue).toFixed(0)));
}
lineData4.push({
name:'实际值',
value:valueD
})
}else if(data[i].elementCode=="electricPowerDesign"){
var valueD=[];
if(lineData4!=''){
for(var h=0;h<lineData4[0].value.length;h++){
var value=[];
value.push(lineData4[0].value[h][0]);
value.push(data[i].visualCacheData.value);
valueD.push(value);
}
}
lineData4.push({
name:'目标值',
value:valueD
})
}
}
}
doline('lineChart',lineData,'m³/D');
}, 'json');
}
var colorList = ['#F55945', '#74A8FF'];
function doline(id,data,unit){
var series = new Array;
data.forEach(function(val,i){
series[i] = {
name: val.name,
type: 'line',
data: val.value,
smooth: true,
showSymbol: false,
areaStyle: {
// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1相当于在图形包围盒中的百分比如果 globalCoord 为 `true`,则该四个值是绝对的像素位置
color: {
type: 'linear',
x: 0,
y: 0.9,
x2: 0,
y2: 0,
colorStops: [{
offset: 0, color: 'transparent'
}, {
offset: 1, color: colorList[i] // 100% 处的颜色
}],
global: false // 缺省为 false
}
},
lineStyle:{
color:colorList[i],
width:4
},
};
});
// 基于准备好的dom初始化echarts实例
var myChart = echarts.init(document.getElementById(id));
var option = {
color: colorList,
tooltip: {
trigger: 'axis',
},
legend: {
top: 0,
left: 10,
icon:'circle',
textStyle: {
color: '#61798F' ,
lineHeight: 16,
fontSize: 13 ,
fontWeight : 600 ,
},
},
grid: {
left: '1%',
right: '5%',
top: '20%',
bottom: '5%',
containLabel: true
},
xAxis: {
type : 'category',
boundaryGap: false,
axisLabel: {
color:'#8A88B7',
},
axisLine: {
show: false
},
axisTick: {
show: false
},
},
yAxis: {
name:unit,
nameTextStyle:{
color:'#8A88B7'
},
type: 'value',
splitNumber: 3 ,
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
color:'#8A88B7',
},
//网格样式
splitLine: {
show: true,
lineStyle:{
color: '#8A88B7',
type: 'dashed'
}
}
},
series: series
};
myChart.clear();
myChart.setOption(option, true);
}
/* 定时器 */
//setInterval(change, 60000); //每1分钟切换
setInterval(getValue, 3600000); //每一小时切换
var num=1;
$(function(){
  setInterval (showChart, 10000);
  function showChart(){
if(num==0){
doline('lineChart',lineData,'m³/D');
document.getElementById("table1").style.background = "#238072";
document.getElementById("table2").style.background = "#16314c";
document.getElementById("table3").style.background = "#16314c";
document.getElementById("table4").style.background = "#16314c";
num++;
}else if(num==1){
doline('lineChart',lineData2,'吨');
document.getElementById("table1").style.background = "#16314c";
document.getElementById("table2").style.background = "#238072";
document.getElementById("table3").style.background = "#16314c";
document.getElementById("table4").style.background = "#16314c";
num++;
}else if(num==2){
doline('lineChart',lineData3,'kwh/t');
document.getElementById("table1").style.background = "#16314c";
document.getElementById("table2").style.background = "#16314c";
document.getElementById("table3").style.background = "#238072";
document.getElementById("table4").style.background = "#16314c";
num++;
}else if(num==3){
doline('lineChart',lineData4,'kwh');
document.getElementById("table1").style.background = "#16314c";
document.getElementById("table2").style.background = "#16314c";
document.getElementById("table3").style.background = "#16314c";
document.getElementById("table4").style.background = "#238072";
num=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("backImage").src = ""+getRootPath()+"/images/大屏/KPI管理.png";
document.getElementById("backImage2").src = ""+getRootPath()+"/images/大屏/水量.png";
document.getElementById("backImage3").src = ""+getRootPath()+"/images/大屏/泥量.png";
document.getElementById("backImage4").src = ""+getRootPath()+"/images/大屏/电.png";
document.getElementById("backImage5").src = ""+getRootPath()+"/images/大屏/电.png";
getValue();
//console.log("height",document.body.scrollHeight);
});
</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-left:30px;padding-right:30px;padding-bottom:30px;">
<div style="height:100%;width:100%;background:#16314C;border-radius: 8px;">
<div style="float:left;width:100%;height:80px;"><img id="backImage" src="" style="z-index:999;position:relative;height:100%;width: 25%;"/></div>
<div style="float:left;width:35%;height:calc(100% - 80px);">
<div style="float:left;width:100%;height:25%;padding-left: 20px;padding-right: 20px;padding-top:10px;padding-bottom:10px;">
<table id="table1" style="width: 100%;height:100%;background: #238072;border-radius: 18px;box-shadow: 9px 9px 12px 0px #0e2439, -9px -9px 12px 0px #203e5d;text-align: center;vertical-align: middle;">
<tr>
<td width="30%" style="color: #ffffff;"><img id="backImage2" src="" style="z-index:999;position:relative;height:45px;width:45px;"/></td>
<td width="30%" style="color: #ffffff;"><div style="float:left;width:100%;font-size:16px;text-align: left;">昨日水量</div><div style="float:left;width:100%;font-size:12px;text-align: left;">/m³</div></td>
<td id="data1" width="50%" style="color: #ffffff;font-size:24px;letter-spacing: 4px;"></td>
</tr>
</table>
</div>
<div style="float:left;width:100%;height:25%;padding-left: 20px;padding-right: 20px;padding-top:10px;padding-bottom:10px;">
<table id="table2" style="width: 100%;height:100%;background: #16314c;border-radius: 18px;box-shadow: 9px 9px 12px 0px #0e2439, -9px -9px 12px 0px #203e5d;text-align: center;vertical-align: middle;">
<tr>
<td width="30%" style="color: #ffffff;"><img id="backImage3" src="" style="z-index:999;position:relative;height:45px;width:45px;"/></td>
<td width="30%" style="color: #ffffff;"><div style="float:left;width:100%;font-size:16px;text-align: left;">昨日泥量</div><div style="float:left;width:100%;font-size:12px;text-align: left;">/t</div></td>
<td id="data2" width="50%" style="color: #ffffff;font-size:24px;letter-spacing: 4px;"></td>
</tr>
</table>
</div>
<div style="float:left;width:100%;height:25%;padding-left: 20px;padding-right: 20px;padding-top:10px;padding-bottom:10px;">
<table id="table3" style="width: 100%;height:100%;background: #16314c;border-radius: 18px;box-shadow: 9px 9px 12px 0px #0e2439, -9px -9px 12px 0px #203e5d;text-align: center;vertical-align: middle;">
<tr>
<td width="30%" style="color: #ffffff;"><img id="backImage4" src="" style="z-index:999;position:relative;height:45px;width:45px;"/></td>
<td width="30%" style="color: #ffffff;"><div style="float:left;width:100%;font-size:16px;text-align: left;">吨水电耗</div><div style="float:left;width:100%;font-size:12px;text-align: left;">/kwh/t</div></td>
<td id="data3" width="50%" style="color: #ffffff;font-size:24px;letter-spacing: 4px;"></td>
</tr>
</table>
</div>
<div style="float:left;width:100%;height:25%;padding-left: 20px;padding-right: 20px;padding-top:10px;padding-bottom:10px;">
<table id="table4" style="width: 100%;height:100%;background: #16314c;border-radius: 18px;box-shadow: 9px 9px 12px 0px #0e2439, -9px -9px 12px 0px #203e5d;text-align: center;vertical-align: middle;">
<tr>
<td width="30%" style="color: #ffffff;"><img id="backImage5" src="" style="z-index:999;position:relative;height:45px;width:45px;"/></td>
<td width="30%" style="color: #ffffff;"><div style="float:left;width:100%;font-size:16px;text-align: left;">用电量</div><div style="float:left;width:100%;font-size:12px;text-align: left;">/kwh</div></td>
<td id="data4" width="50%" style="color: #ffffff;font-size:24px;letter-spacing: 4px;"></td>
</tr>
</table>
</div>
</div>
<div style="float:left;width:65%;height:calc(100% - 80px);">
<div id="lineChart" style="width:100%;height:100%;padding: 20px;"></div>
</div>
</div>
</div>
</body>
</html>

View File

@ -0,0 +1,394 @@
<%@ 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">
/* 请求数据 */
var series1=[];
var series2=[];
function getValue() {
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
// console.log(data);
if(data!=''){
var nowpowerdayP=0;
var lastpowerdayP=0;
var nowdrugdayP=0;
var lastdrugdayP=0;
var nowWaterPowerday=0;
var lastWaterPowerday=0;
for(var i=0;i<data.length;i++){
if(data[i].elementCode=="powerLine"){
if(data[i].getValueType!="getText"){
var datas=new Array();
for(var j=0;j<data[i].mPointHistory.length;j++){
const his=data[i].mPointHistory[j];
var ddata=new Array();
ddata.push(his.measuredt.substring(0,10));
ddata.push(his.parmvalue);
datas.push(ddata);
}
series1.push({
data: datas,
name: data[i].name,
type: 'line',
symbol:'none',
smooth: true
});
}else if(data[i].getValueType=="getText"){
if(series1!=''&&series1.length>0){
var datas=new Array();
for (let j = 0; j < series1[0].data.length; j++) {
const element = series1[0].data[j];
var ddata=new Array();
ddata.push(element[0]);
ddata.push(data[i].valueUrl);
datas.push(ddata);
}
series1.push({
data: datas,
name: data[i].name,
type: 'line',
symbol:'none',
smooth: true,
itemStyle:{
normal:{
lineStyle:{
type:'dotted'  //'dotted'虚线 'solid'实线
}
}
}
});
}
}
}else if(data[i].elementCode=="drugLine"){
if(data[i].getValueType!="getText"){
var datas=new Array();
for(var j=0;j<data[i].mPointHistory.length;j++){
const his=data[i].mPointHistory[j];
var ddata=new Array();
ddata.push(his.measuredt.substring(0,10));
ddata.push(his.parmvalue);
datas.push(ddata);
}
series2.push({
data: datas,
name: data[i].name,
type: 'line',
symbol:'none',
smooth: true
});
}else if(data[i].getValueType=="getText"){
if(series2!=''&&series2.length>0){
var datas=new Array();
for (let j = 0; j < series2[0].data.length; j++) {
const element = series2[0].data[j];
var ddata=new Array();
ddata.push(element[0]);
ddata.push(data[i].valueUrl);
datas.push(ddata);
}
series2.push({
data: datas,
name: data[i].name,
type: 'line',
symbol:'none',
smooth: true,
itemStyle:{
normal:{
lineStyle:{
type:'dotted'  //'dotted'虚线 'solid'实线
}
}
}
});
}
}
}else if(data[i].elementCode=="power"){
nowpowerdayP = data[i].mPoint.parmvalue;
// if(data[i].getValueType=="getTodaySumValue"){
// if(data[i].mPointHistory.length>0){
// nowpowerdayP=data[i].mPointHistory[0].parmvalue;
// }
//
// }else if(data[i].getValueType=="getYesterdaySumValue"){
// if(data[i].mPointHistory.length>0){
// lastpowerdayP=data[i].mPointHistory[0].parmvalue;
// }
// }
}else if(data[i].elementCode=="drug"){
nowdrugdayP = data[i].mPoint.parmvalue;
// if(data[i].getValueType=="getTodayFirstValue"){
// if(data[i].mPointHistory.length>0){
// nowdrugdayP=data[i].mPointHistory[0].parmvalue;
// }
//
// }else if(data[i].getValueType=="getYesterdayFirstValue"){
// if(data[i].mPointHistory.length>0){
// lastdrugdayP=data[i].mPointHistory[0].parmvalue;
// }
// }
}else if(data[i].elementCode=="waterPower"){
nowWaterPowerday = data[i].mPoint.parmvalue;
// if(data[i].getValueType=="getTodayFirstValue"){
// if(data[i].mPointHistory.length>0){
// nowWaterPowerday=data[i].mPointHistory[0].parmvalue;
// }
//
// }else if(data[i].getValueType=="getYesterdayFirstValue"){
// if(data[i].mPointHistory.length>0){
// lastWaterPowerday=data[i].mPointHistory[0].parmvalue;
// }
// }
}
}
// var daypowerhb=(nowpowerdayP-lastpowerdayP)/lastpowerdayP*100;
// daypowerhb=daypowerhb.toFixed(2);
$('#dayPowerP').text(nowpowerdayP.toFixed(2));
// if(Number(daypowerhb)<0){
// $('#dayPowerH').css("color","red");
// $('#dayPowerH').text("⬇ 环比"+daypowerhb+"%");
// }else{
// $('#dayPowerH').css("color","#3fff00");
// $('#dayPowerH').text("⬆ 环比"+daypowerhb+"%");
// }
// var daydrughb=(nowdrugdayP-lastdrugdayP)/lastdrugdayP*100;
// daydrughb=daydrughb.toFixed(2);
$('#dayDrugP').text(nowdrugdayP.toFixed(2));
// if(Number(daydrughb)<0){
// $('#dayDrugH').css("color","red");
// $('#dayDrugH').text("⬇ 环比"+daydrughb+"%");
// }else{
// $('#dayDrugH').css("color","#3fff00");
// $('#dayDrugH').text("⬆ 环比"+daydrughb+"%");
// }
// var dayWaterPowerb=(nowWaterPowerday-lastWaterPowerday)/lastWaterPowerday*100;
// dayWaterPowerb=dayWaterPowerb.toFixed(2);
$('#dayWaterPowerP').text(nowWaterPowerday.toFixed(2));
// if(Number(dayWaterPowerb)<0){
// $('#dayWaterPowerH').css("color","red");
// $('#dayWaterPowerH').text("⬇ 环比"+dayWaterPowerb+"%");
// }else{
// $('#dayWaterPowerH').css("color","#3fff00");
// $('#dayWaterPowerH').text("⬆ 环比"+dayWaterPowerb+"%");
// }
}
getChart(series1,['#FFE047','#B7875D','#FFE047']);
}, 'json');
}
function typeChange(st){
if(st=='click1'){
$('#click1').css('background','#e1aa13');
$('#click2').css('background','#1a4970');
getChart(series1,['#FFE047','#B7875D','#FFE047']);
nowSt="click2";
nowColor=['#20E9F2','#815DB7','#08A3A3'];
}else{
$('#click1').css('background','#1a4970');
$('#click2').css('background','#e1aa13');
getChart(series2,['#20E9F2','#815DB7','#08A3A3']);
nowSt="click1";
nowColor=['#FFE047','#B7875D','#FFE047'];
}
}
function getChart(series,colors){
var mychart=echarts.init(document.getElementById('chart'));
var option = {
color:colors,
legend: {
data: ['实际', '昨日', '考核'],
top:10,
right:20,
textStyle:{
color:'#FFFFFF'
}
},
tooltip: {
trigger: 'axis'
},
grid:{
left: '4%', // 与容器左侧的距离
right: '4%', // 与容器右侧的距离
// top: '10%', // 与容器顶部的距离
bottom: '10%', // 与容器底部的距离
containLabel:true
},
xAxis: {
type:"category",
axisLine:{
lineStyle:{
color:'#ffffff',
}
},
axisTick: {
show: false
},
splitLine: {
show: false
}
},
yAxis: {
type : 'value',
axisLine:{
lineStyle:{
color:'#ffffff',
}
},
splitLine: {
show: true,
lineStyle:{
color: '#8C8C8C'
}
}
},
series: series
};
// console.log(option);
mychart.setOption(option,true);
}
/* 定时器 */
//setInterval(change, 60000); //每1分钟切换
setInterval(getValue, 3600000); //每一小时切换
var nowSt="click2";
var nowColor=['#20E9F2','#815DB7','#08A3A3'];
setInterval(function(){ typeChange(nowSt,nowColor) }, 6000);
/* 初始化 */
$(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";
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;
}
</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:30px;padding-left:10px;padding-right:10px;">
<div style="height:100%;width:100%;">
<div style="float:left;width:100%;height:26px;margin-left: 20px;">
<div style="float:left;width:33.3%;height:26px;">
<div style="float:left;width:100px;height:26px;line-height: 26px;color: #ffffff;font-size: 20px;">
日用电量
</div>
<div style="float:left;width:100px;height:26px;line-height: 26px;color: #ffffff;font-size: 16px;">
kWh
</div>
</div>
<div style="float:left;width:33.3%;height:26px;">
<div style="float:left;width:100px;height:26px;line-height: 26px;color: #ffffff;font-size: 20px;">
日药耗
</div>
<div style="float:left;width:100px;height:26px;line-height: 26px;color: #ffffff;font-size: 16px;">
kg/Km3
</div>
</div>
<div style="float:left;width:33.3%;height:26px;">
<div style="float:left;width:100px;height:26px;line-height: 26px;color: #ffffff;font-size: 20px;">
吨水电耗
</div>
<div style="float:left;width:100px;height:26px;line-height: 26px;color: #ffffff;font-size: 16px;">
kWh/t
</div>
</div>
</div>
<div style="float:left;width:100%;height:80px;margin-left: 20px;">
<div style="float:left;width:33.3%;height:80px;">
<div id="dayPowerP" style="float:left;height:80px;line-height: 80px;color: #69f6f9;font-size: 40px;">
</div>
<div id="dayPowerH" style="float:left;height:80px;line-height: 80px;font-size: 20px;padding-left: 10px;">
</div>
</div>
<div style="float:left;width:33.3%;height:80px;">
<div id="dayDrugP" style="float:left;height:80px;line-height: 80px;color: #69f6f9;font-size: 40px;">
</div>
<div id="dayDrugH" style="float:left;height:80px;line-height: 80px;font-size: 20px;padding-left: 10px;">
</div>
</div>
<div style="float:left;width:33.3%;height:80px;">
<div id="dayWaterPowerP" style="float:left;height:80px;line-height: 80px;color: #69f6f9;font-size: 40px;">
</div>
<div id="dayWaterPowerH" style="float:left;height:80px;line-height: 80px;font-size: 20px;padding-left: 10px;">
</div>
</div>
</div>
<div style="float:left;width:100%;height:280px;margin-left: 20px;background: #16314c;">
<div style="float: left;width: 20%;height: 100%;">
<div style="float: left;width:100%;height: 45px;line-height: 45px;padding-left: 15px;color: #ffffff;font-size: 20px;font-family: Microsoft YaHei, Microsoft YaHei-Regular;">能耗曲线</div>
<div id="click1" onclick="typeChange('click1');" style="float: left;width:125px;height: 53px;margin-left: 15px;background: #e1aa13;border-radius: 10px;cursor: pointer;">
<div style="float: left;width: 30px;height: 53px;padding-left: 9px;padding-top: 11px;padding-bottom: 11px;">
<img id="image1" src="" style="z-index:998;position:relative;height:100%;width:100%;"/>
</div>
<div style="float: left;width: 84px;height: 53px;padding-left: 10px;padding-top: 11px;padding-bottom: 11px;">
<div style="float: left;width: 100%;height: 55%;text-align: left;color: #ffffff;font-size: 16px;">电单耗</div>
<div style="float: left;width: 100%;height: 45%;text-align: left;color: #ffffff;font-size: 8px;">kWh/t</div>
</div>
</div>
<div id="click2" onclick="typeChange('click2');" style="float: left;width:125px;height: 53px;margin-left: 15px;margin-top: 15px;background: #1a4970;border-radius: 10px;cursor: pointer;">
<div style="float: left;width: 37px;height: 53px;padding-left: 9px;padding-top: 11px;padding-bottom: 11px;">
<img id="image2" src="" style="z-index:998;position:relative;height:100%;width:100%;"/>
</div>
<div style="float: left;width: 78px;height: 53px;padding-left: 10px;padding-top: 11px;padding-bottom: 11px;">
<div style="float: left;width: 100%;height: 55%;text-align: left;color: #ffffff;font-size: 16px;">药耗</div>
<div style="float: left;width: 100%;height: 45%;text-align: left;color: #ffffff;font-size: 8px;">kg/Km3</div>
</div>
</div>
</div>
<div style="float: left;width: 80%;height: 100%;">
<div id="chart" style="width: 100%;height: 100%;"></div>
</div>
</div>
</div>
</div>
</body>
</html>

View File

@ -0,0 +1,230 @@
<%@ 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">
//获取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;
}
//获取url地址根目录 当前taomcat下路径
function getRootPath2(){
var pathName = window.location.pathname.substring(1);
var webName = pathName == '' ? '' : pathName.substring(0, pathName.indexOf('/'));
return window.location.protocol + '//' + window.location.host +"/"+webName;
}
var mychart="";
/* 请求数据 */
function getValue() {
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
if(data!=null&&data.length>0){
var textNum=0;
var barNum=0;
for(var i=0;i<data.length;i++){
if(data[i].elementCode=="text"){
textNum++;
}else if(data[i].elementCode=="bar"){
barNum++;
}
}
var textHtml="";
var nowtextNum=0;
for(var m=0;m<data.length;m++){
if(data[m].elementCode=="text"){
var backgroundColor="";
if(nowtextNum==0){
backgroundColor="#8d40cc";
}else if(nowtextNum==1){
backgroundColor="#4864D7";
}
textHtml+="<div style='float:left;padding-left:5px;padding-right:5px;padding-top:20px;padding-bottom:20px;width:100%;height: calc((100vh - 60px - 30px)/"+textNum+");'>";
textHtml+="<div style='float:left;width:100%;height:100%;background:"+backgroundColor+";border-radius:10px;'>";
textHtml+="<div style='float:left;width:100%;height:50%;line-height: calc((100vh - 60px - 45px)/"+textNum+"/2 + 15px);background:"+backgroundColor+";border-radius:10px;color: #fafafa;font-family: Helvetica;font-size: 20px;text-align: center;'>"+data[m].name+"</div>";
textHtml+="<div style='float:left;width:100%;height:50%;line-height: calc((100vh - 60px - 45px)/"+textNum+"/2 - 20px);background:"+backgroundColor+";border-radius:10px;color: #ffffff;font-family: Helvetica;font-size: 24px;text-align: center;'>"+data[m].mPoint.parmvalue+"</div>";
textHtml+="</div>";
textHtml+="</div>";
nowtextNum++;
}
}
$('#text').html(textHtml);
var nowbarNum=0;
for(var m=0;m<data.length;m++){
if(data[m].elementCode=="bar"){
var backgroundColor="";
var value=data[m].mPoint.parmvalue;
var chartid="";
var subtext="";
if(nowbarNum==0){
backgroundColor="#41C6C9";
chartid="chart1";
subtext="完好率";
}else if(nowbarNum==1){
backgroundColor="#F5A623";
chartid="chart2";
subtext="保养完成率";
}
var mychart=echarts.init(document.getElementById(''+chartid+''));
var option = {
title: {
text: value.toFixed(0)+"%",
textStyle: {
color: '#01c4a3',
fontSize: 24
},
subtext: subtext,
subtextStyle: {
color: '#909090',
fontSize: 22
},
itemGap: 5, // 主副标题距离
left: 'center',
top: 'center'
},
angleAxis: {
max: 100, // 满分
clockwise: false, // 逆时针
// 隐藏刻度线
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
splitLine: {
show: false
}
},
radiusAxis: {
type: 'category',
// 隐藏刻度线
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
splitLine: {
show: false
}
},
polar: {
center: ['50%', '50%'],
radius: '160%' //图形大小
},
series: [{
type: 'bar',
data: [{
name: '百分比',
value: value,
itemStyle: {
color: backgroundColor
},
}],
coordinateSystem: 'polar',
roundCap: true,
barWidth: 15,
barGap: '-100%', // 两环重叠
z: 2,
},{ // 灰色环
type: 'bar',
data: [{
value: 100,
itemStyle: {
color: '#2B3F69',
shadowColor: 'rgba(0, 0, 0, 0.2)',
shadowBlur: 5,
shadowOffsetY: 2
}
}],
coordinateSystem: 'polar',
roundCap: true,
barWidth: 15,
barGap: '-100%', // 两环重叠
z: 1
}]
};
// console.log(option);
mychart.setOption(option,true);
nowbarNum++;
}
}
}
}, 'json');
}
/* 定时器 */
//setInterval(change, 60000); //每1分钟切换
setInterval(getValue, 3600000); //每一小时切换
/* 初始化 */
$(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-15) + "px";
document.getElementById("backImage").src = ""+getRootPath()+"/images/大屏/设备情况.png";
getValue();
//console.log("height",document.body.scrollHeight);
});
</script>
</head>
<body style="width:100%;height:100%;margin:0;padding:0;overflow-x:hidden;overflow-y:hidden">
<div style="height:100%;width:100%;padding-top:15px;">
<div id="main" style="height:100%;width:100%;padding:0px;background:rgba(19,32,85,0.27);border-radius: 8px;">
<div style='float:left;width:50%;height:60px;'><img id="backImage" src="" style="z-index:-1;position:relative;height:100%;width: 100%;"/></div>
<div style='float:left;width:50%;height:60px;'></div>
<div id="text" style="float:left;width:15%;height: calc(100vh - 60px - 15px);"></div>
<div style="float:left;width:85%;height: calc(100vh - 60px - 15px);">
<div style="float:left;width:50%;height:100%">
<div id="chart1" style="float:left;width:70%;height:100%"></div>
<div id="text3" style="float:left;width:30%;height:100%"></div>
</div>
<div style="float:left;width:50%;height:100%">
<div id="chart2" style="float:left;width:70%;height:100%"></div>
<div id="text4" style="float:left;width:30%;height:100%"></div>
</div>
</div>
</div>
</div>
</body>
</html>

View File

@ -0,0 +1,378 @@
<%@ 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">
//获取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;
}
//获取url地址根目录 当前taomcat下路径
function getRootPath2(){
var pathName = window.location.pathname.substring(1);
var webName = pathName == '' ? '' : pathName.substring(0, pathName.indexOf('/'));
return window.location.protocol + '//' + window.location.host +"/"+webName;
}
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方法用.进行拼接
}
/* 请求数据 */
function getValue() {
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
// console.log(data);
if(data!=''){
var eqTypedata =[];
for(var i=0;i<data.length;i++){
if(data[i].elementCode=="totalEqNum"){
$('#totalEqNum').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
}else if(data[i].elementCode=="usingTotalEqNum"){
$('#usingTotalEqNum').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
}else if(data[i].elementCode=="AEqNum"){
$('#AEqNum').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
eqTypedata.push({
name:'A类设备数量',
value:(data[i].visualCacheData.value).toFixed(0)
})
}else if(data[i].elementCode=="BEqNum"){
$('#BEqNum').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
eqTypedata.push({
name:'B类设备数量',
value:(data[i].visualCacheData.value).toFixed(0)
})
}else if(data[i].elementCode=="CEqNum"){
$('#CEqNum').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
eqTypedata.push({
name:'C类设备数量',
value:(data[i].visualCacheData.value).toFixed(0)
})
}else if(data[i].elementCode=="eqCompletionRate"){
dochart('chart1',(data[i].visualCacheData.value).toFixed(0),'设备完好率','#FFE538');
}else if(data[i].elementCode=="maintainCompletionRate"){
dochart('chart2',(data[i].visualCacheData.value).toFixed(0),'保养完成率','#3883FF');
}else if(data[i].elementCode=="repairCompletionRate"){
dochart('chart3',(data[i].visualCacheData.value).toFixed(0),'维修完成率','#3883FF');
}
}
}
doequtype("chart4",eqTypedata);
}, 'json');
}
function dochart(id,value,title,color){
var myChart = echarts.init(document.getElementById(id));
var option = {
title: {
text: value+"%",
textStyle: {
color: '#3883FF',
fontSize: 26
},
subtext: title,
subtextStyle: {
color: '#E0E1E1',
fontSize: 14
},
itemGap: 5, // 主副标题距离
left: 'center',
top: 'center'
},
angleAxis: {
max: 100, // 满分
clockwise: true, // 逆时针
// 隐藏刻度线
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
splitLine: {
show: false
}
},
radiusAxis: {
type: 'category',
// 隐藏刻度线
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
splitLine: {
show: false
}
},
polar: {
center: ['50%', '50%'],
radius: '150%' //图形大小
},
series: [{
type: 'bar',
data: [{
name: '百分比',
value: value,
itemStyle: {
color: color
},
}],
coordinateSystem: 'polar',
roundCap: true,
barWidth: 15,
barGap: '-100%', // 两环重叠
z: 2
},{ // 灰色环
type: 'bar',
data: [{
value: 100,
itemStyle: {
color: '#2B3F69',
shadowColor: 'rgba(0, 0, 0, 0.2)',
shadowBlur: 5,
shadowOffsetY: 2
}
}],
coordinateSystem: 'polar',
roundCap: true,
barWidth: 18,
barGap: '-100%', // 两环重叠
z: 1
}]
};
myChart.setOption(option, true);
}
//设备类型pie
function doequtype(id,val){
const colorList = ['#3883FF', '#A84ECB', '#FE8840'];
var data = val;
var legendName = new Array;
data.forEach(function(value,i){
legendName[i] = value.name;
});
var myChart = echarts.init(document.getElementById(id));
var option = {
title: {
text: '设备',
textStyle: {
fontSize: 17,
color: '#61798F',
lineHeight: 24
},
subtextStyle: {
fontSize: 28,
color: '#333'
},
textAlign: 'center',
left: '48%',
top: '41%'
},
grid: {
top:0,
left:0,
right:0,
bottom:0,
},
tooltip: {
trigger: 'item',
},
// legend: {
// type: 'scroll',
// orient: 'vertical',
// right: 20,
// top: '20%',
// itemGap: 10,
// selectedMode: false,
// data: legendName,
// textStyle: {
// rich: {
// uname: {
// fontSize: 14,
// color: '#61798F',
// },
// unum: {
// fontSize: 20,
// color: '#FFFFFF',
// }
// }
// }
// // formatter(name) {
// // var index = 0;
// // data.forEach(function(value,i){
// // if(value.name == name){
// // index = i;
// // }
// // });
// // var value = data[index].value;
// // return ' {uname|'+name+'}{unum|'+value+'}';
// // }
// },
color: colorList,
series: [
{
name: '设备',
type: 'pie',
radius: ['60%', '85%'],
center: ['50%', '50%'],
label: {
show: false
},
labelLine: {
show: false
},
itemStyle: {
borderWidth: 3,
borderColor: '#0D436A'
},
data: data,
}
]
};
myChart.clear();
myChart.setOption(option, true);
}
/* 定时器 */
//setInterval(change, 60000); //每1分钟切换
setInterval(getValue, 3600000); //每一小时切换
/* 初始化 */
$(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("backImage").src = ""+getRootPath()+"/images/大屏/设备情况.png";
getValue();
//console.log("height",document.body.scrollHeight);
});
</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-left:30px;padding-right:30px;padding-bottom:30px;">
<div style="height:100%;width:100%;background:#16314C;border-radius: 8px;">
<div style="float:left;width:100%;height:80px;"><img id="backImage" src="" style="z-index:999;position:relative;height:100%;width: 25%;"/></div>
<div style="float:left;width:100%;height:calc((100% - 80px)/2);">
<div style="float:left;width:23%;height:100%;padding-left:35px;padding-top:30px;">
<table style="width: 185px;height:102px;background: linear-gradient(134deg,#3023ae, #c86dd7 102%);border-radius: 18px;text-align: center;vertical-align: middle;">
<tr height="70%">
<td id="totalEqNum" width="100%" style="color: #ffffff;font-size:36px;"></td>
</tr>
<tr height="30%">
<td width="100%" style="color: #ffffff;font-size:16px;vertical-align:top;">总设备数量</td>
</tr>
</table>
</div>
<div style="float:left;width:23%;height:100%;padding-left:35px;padding-top:30px;">
<table style="width: 185px;height:102px;background: linear-gradient(50deg,#427dfe 15%, #74d6ff 104%);border-radius: 18px;text-align: center;vertical-align: middle;">
<tr height="70%">
<td id="usingTotalEqNum" width="100%" style="color: #ffffff;font-size:36px;"></td>
</tr>
<tr height="30%">
<td width="100%" style="color: #ffffff;font-size:16px;vertical-align:top;">投运设备数量</td>
</tr>
</table>
</div>
<div style="float:left;width:18%;height:100%;">
<div id="chart1" style="width: 100%;height: 100%;"></div>
</div>
<div style="float:left;width:18%;height:100%;">
<div id="chart2" style="width: 100%;height: 100%;"></div>
</div>
<div style="float:left;width:18%;height:100%;">
<div id="chart3" style="width: 100%;height: 100%;"></div>
</div>
</div>
<div style="float:left;width:100%;height:calc((100% - 80px)/2);">
<div style="float:left;width:40%;height:100%;">
<div id="chart4" style="width: 100%;height: 100%;"></div>
</div>
<div style="float:left;width:20%;height:100%;">
<table style="width: 100%;height:100%;text-align: left;vertical-align: middle;">
<tr height="20%">
<td width="100%" ><div style="width:52px;height:24px;background: #3883FF;border-radius: 8px;"></div></td>
</tr>
<tr height="30%">
<td width="100%" style="color: #ffffff;font-size:24px;">A类设备数量</td>
</tr>
<tr height="50%">
<td id="AEqNum" width="100%" style="color: #ffffff;font-size:34px;vertical-align:top;"></td>
</tr>
</table>
</div>
<div style="float:left;width:20%;height:100%;">
<table style="width: 100%;height:100%;text-align: left;vertical-align: middle;">
<tr height="20%">
<td width="100%" ><div style="width:52px;height:24px;background: #A84ECB;border-radius: 8px;"></div></td>
</tr>
<tr height="30%">
<td width="100%" style="color: #ffffff;font-size:24px;">B类设备数量</td>
</tr>
<tr height="50%">
<td id="BEqNum" width="100%" style="color: #ffffff;font-size:34px;vertical-align:top;"></td>
</tr>
</table>
</div>
<div style="float:left;width:20%;height:100%;">
<table style="width: 100%;height:100%;text-align: left;vertical-align: middle;">
<tr height="20%">
<td width="100%" ><div style="width:52px;height:24px;background: #FE8840;border-radius: 8px;"></div></td>
</tr>
<tr height="30%">
<td width="100%" style="color: #ffffff;font-size:24px;">C类设备数量</td>
</tr>
<tr height="50%">
<td id="CEqNum" width="100%" style="color: #ffffff;font-size:34px;vertical-align:top;"></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</body>
</html>

View File

@ -0,0 +1,352 @@
<%@ 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页-->
<script type="text/javascript">
/* 请求数据 */
function getbigScreen_equipmentCondition3Value() {
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
// console.log(data);
// if(data!=''){
// for(var i=0;i<data.length;i++){
// if(data[i].elementCode=="totalEqNum"){
// $('#bigScreen_equipmentCondition3totalEqNum').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
// }else if(data[i].elementCode=="usingTotalEqNum"){
// $('#bigScreen_equipmentCondition3usingTotalEqNum').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
// }else if(data[i].elementCode=="AEqNum"){
// $('#bigScreen_equipmentCondition3AEqNum').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
// eqTypedata.push({
// name:'A类设备',
// value:(data[i].visualCacheData.value).toFixed(0)
// })
// }else if(data[i].elementCode=="BEqNum"){
// $('#BEqNum').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
// eqTypedata.push({
// name:'B类设备',
// value:(data[i].visualCacheData.value).toFixed(0)
// })
// }else if(data[i].elementCode=="CEqNum"){
// $('#CEqNum').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
// eqTypedata.push({
// name:'C类设备',
// value:(data[i].visualCacheData.value).toFixed(0)
// })
// }else if(data[i].elementCode=="eqCompletionRate"){
// dobigScreen_equipmentCondition3chart('bigScreen_equipmentCondition3chart1',(data[i].visualCacheData.value).toFixed(0),'设备完好率','#FFE538');
// }else if(data[i].elementCode=="maintainCompletionRate"){
// dobigScreen_equipmentCondition3chart('bigScreen_equipmentCondition3chart2',(data[i].visualCacheData.value).toFixed(0),'保养完成率','#3883FF');
// }else if(data[i].elementCode=="repairCompletionRate"){
// dobigScreen_equipmentCondition3chart('bigScreen_equipmentCondition3chart3',(data[i].visualCacheData.value).toFixed(0),'维修完成率','#3883FF');
// }
// }
// }
var eqTypedata =[];
eqTypedata.push({
name:'A类设备',
value:1337
})
$('#bigScreen_equipmentCondition3AEqNum').text(1337);
eqTypedata.push({
name:'B类设备',
value:1
})
$('#bigScreen_equipmentCondition3BEqNum').text(1);
eqTypedata.push({
name:'C类设备',
value:0
})
$('#bigScreen_equipmentCondition3CEqNum').text(0);
dobigScreen_equipmentCondition3chart('bigScreen_equipmentCondition3chart1',98,'设备完好率','#FE8841');
dobigScreen_equipmentCondition3chart('bigScreen_equipmentCondition3chart2',92,'大修完成率','#862CAA');
dobigScreen_equipmentCondition3chart('bigScreen_equipmentCondition3chart3',94,'保养完成率','#3A84FF');
doequbigScreen_equipmentCondition3type("bigScreen_equipmentCondition3chart4",eqTypedata);
}, 'json');
}
function dobigScreen_equipmentCondition3chart(id,value,title,color){
var myChart = echarts.init(document.getElementById(id));
var option = {
title: {
text: value+"%",
textStyle: {
color: '#FFFFFF',
fontSize: 14
},
subtext: title,
subtextStyle: {
color: '#8AC2F6',
fontSize: 12
},
itemGap: 30, // 主副标题距离
left: 'center',
top: '40%'
},
angleAxis: {
max: 100, // 满分
clockwise: true, // 逆时针
// 隐藏刻度线
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
splitLine: {
show: false
}
},
radiusAxis: {
type: 'category',
// 隐藏刻度线
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
splitLine: {
show: false
}
},
polar: {
radius: ['65%', '80%'],
center: ['50%', '40%'],
radius: '120%' //图形大小
},
series: [{
type: 'bar',
data: [{
name: '百分比',
value: value,
itemStyle: {
color: color
},
}],
coordinateSystem: 'polar',
roundCap: true,
barWidth: 4,
barGap: '-100%', // 两环重叠
z: 2
},{ // 灰色环
type: 'bar',
data: [{
value: 100,
itemStyle: {
color: '#2B3F69',
shadowColor: 'rgba(0, 0, 0, 0.2)',
shadowBlur: 2,
shadowOffsetY: 2
}
}],
coordinateSystem: 'polar',
roundCap: true,
barWidth: 8,
barGap: '-100%', // 两环重叠
z: 1
}]
};
myChart.setOption(option, true);
}
//设备类型pie
function doequbigScreen_equipmentCondition3type(id,val){
const colorList = ['#3883FF', '#A84ECB', '#FE8840'];
var data = val;
var legendName = new Array;
data.forEach(function(value,i){
legendName[i] = value.name;
});
var myChart = echarts.init(document.getElementById(id));
var option = {
title: {
text: '设备\n数量',
textStyle: {
fontSize: 12,
color: '#FFFFFF',
lineHeight:18
},
textAlign: 'center',
left: '46%',
top: '25%'
},
grid: {
top:0,
left:0,
right:0,
bottom:0,
},
// tooltip: {
// trigger: 'item',
// },
color: colorList,
series: [{
name: '设备',
type: 'pie',
radius: ['65%', '80%'],
center: ['50%', '40%'],
label: {
show: false
},
labelLine: {
show: false
},
itemStyle: {
borderWidth: 3,
borderColor: '#0D436A'
},
data: data,
}]
};
myChart.clear();
myChart.setOption(option, true);
}
/* 定时器 */
//setInterval(change, 60000); //每1分钟切换
// setInterval(getValue, 3600000); //每一小时切换
/* 初始化 */
$(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";
getbigScreen_equipmentCondition3Value();
//console.log("height",document.body.scrollHeight);
});
</script>
</head>
<body style="width:100%;height:100%;margin:0;padding:0;overflow-x:hidden;overflow-y:hidden;">
<div id="bigScreen_equipmentCondition3main" style="height:100%;width:100%;padding-top:10px;padding-left:10px;padding-right:10px;">
<div style="height:100%;width:100%;background:#16314c;border-radius: 8px;">
<div style="float:left;width:100%;height:calc(100%*0.3);">
<div style="float:left;width:50%;height:100%;">
<div style="float:left;width:40%;height:100%;">
<table style="width:100%;height:100%;color: #8ac2f6;">
<tr style="text-align: center;vertical-align:bottom;">
<td>总设备</td>
</tr>
<tr style="text-align: center;vertical-align:top;">
<td>数量</td>
</tr>
</table>
</div>
<div style="float:left;width:60%;height:100%;">
<table style="width:100%;height:100%;color: #8ac2f6;">
<tr style="text-align: center;color: #ffffff;font-weight: 700;font-size: 36px;">
<td>1338</td>
</tr>
</table>
</div>
</div>
<div style="float:left;width:50%;height:100%;">
<div style="float:left;width:40%;height:100%;">
<table style="width:100%;height:100%;color: #8ac2f6;">
<tr style="text-align: center;vertical-align:bottom;">
<td>投运设备</td>
</tr>
<tr style="text-align: center;vertical-align:top;">
<td>数量</td>
</tr>
</table>
</div>
<div style="float:left;width:60%;height:100%;">
<table style="width:100%;height:100%;color: #8ac2f6;">
<tr style="text-align: center;color: #ffffff;font-weight: 700;font-size: 36px;">
<td>1338</td>
</tr>
</table>
</div>
</div>
</div>
<div style="float:left;width:100%;height:calc(100%*0.3);">
<div style="float:left;width:33.3%;height:100%;">
<div id="bigScreen_equipmentCondition3chart4" style="width: 100%;height: 100%;"></div>
</div>
<div style="float:left;width:22.2%;height:100%;">
<table style="width: 100%;height:100%;text-align: left;vertical-align: middle;">
<tr height="20%">
<td width="100%" ><div style="width:26px;height:12px;background: #3883FF;border-radius: 2px;"></div></td>
</tr>
<tr height="30%">
<td width="100%" style="color: #ffffff;font-size:12px;">A类设备</td>
</tr>
<tr height="50%">
<td id="bigScreen_equipmentCondition3AEqNum" width="100%" style="color: #ffffff;font-size:16px;font-weight: 700;vertical-align:top;"></td>
</tr>
</table>
</div>
<div style="float:left;width:22.2%;height:100%;">
<table style="width: 100%;height:100%;text-align: left;vertical-align: middle;">
<tr height="20%">
<td width="100%" ><div style="width:26px;height:12px;background: #A84ECB;border-radius: 2px;"></div></td>
</tr>
<tr height="30%">
<td width="100%" style="color: #ffffff;font-size:12px;">B类设备</td>
</tr>
<tr height="50%">
<td id="bigScreen_equipmentCondition3BEqNum" width="100%" style="color: #ffffff;font-size:16px;font-weight: 700;vertical-align:top;"></td>
</tr>
</table>
</div>
<div style="float:left;width:22.2%;height:100%;">
<table style="width: 100%;height:100%;text-align: left;vertical-align: middle;">
<tr height="20%">
<td width="100%" ><div style="width:26px;height:12px;background: #FE8840;border-radius: 2px;"></div></td>
</tr>
<tr height="30%">
<td width="100%" style="color: #ffffff;font-size:12px;">C类设备</td>
</tr>
<tr height="50%">
<td id="bigScreen_equipmentCondition3CEqNum" width="100%" style="color: #ffffff;font-size:16px;font-weight: 700;vertical-align:top;"></td>
</tr>
</table>
</div>
</div>
<div style="float:left;width:100%;height:calc(100%*0.35);">
<div id="bigScreen_equipmentCondition3chart1" style="float:left;width:33.3%;height:100%;">
</div>
<div id="bigScreen_equipmentCondition3chart2" style="float:left;width:33.3%;height:100%;">
</div>
<div id="bigScreen_equipmentCondition3chart3" style="float:left;width:33.3%;height:100%;">
</div>
</div>
</div>
</div>
</body>
</html>

View File

@ -0,0 +1,225 @@
<%@ 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">
/* 请求数据 */
function getValue() {
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', {planLayoutId: "${param.planLayoutId}"}, function (data) {
// console.log(data);
if (data != '') {
for (var i = 0; i < data.length; i++) {
if (data[i].elementCode == "totalEqNum") {
$('#totalEqNum').text(numOutput(data[i].valueUrl));
} else if (data[i].elementCode == "usingTotalEqNum") {
$('#usingTotalEqNum').text(numOutput(data[i].valueUrl));
} else if (data[i].elementCode == "totalEqPower") {
$('#totalEqPower').text(numOutput(data[i].valueUrl));
} else if (data[i].elementCode == "eqRate") {
getchart('chart', data[i].valueUrl, '', '#36FFF9');
}
// } else if (data[i].elementCode == "eqRate") {
// getchart('chart', 88, '', '#36FFF9');
// }
}
}
}, 'json');
}
/* 定时器 */
//setInterval(change, 60000); //每1分钟切换
// setInterval(getValue, 3600000); //每一小时切换
/* 初始化 */
$(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("titleImage").src = "" + getRootPath() + "/images/大屏/大屏标题文字背景.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 getchart(id, value, title, color) {
var myChart = echarts.init(document.getElementById(id));
var option = {
title: {
text: value,
textStyle: {
color: '#36FFF9',
fontSize: 50
},
subtext: "%",
subtextStyle: {
color: '#36FFF9',
fontSize: 19
},
itemGap: 0, // 主副标题距离
left: 'center',
top: '35%'
},
angleAxis: {
max: 100, // 满分
clockwise: true, // 逆时针
// 隐藏刻度线
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
splitLine: {
show: false
}
},
radiusAxis: {
type: 'category',
// 隐藏刻度线
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
splitLine: {
show: false
}
},
polar: {
center: ['50%', '50%'],
radius: '120%' //图形大小
},
series: [{
type: 'bar',
data: [{
name: '百分比',
value: value,
itemStyle: {
color: color
},
}],
coordinateSystem: 'polar',
roundCap: true,
barWidth: 10,
barGap: '-100%', // 两环重叠
z: 2
}, { // 灰色环
type: 'bar',
data: [{
value: 100,
itemStyle: {
color: '#1D4F6D',
shadowColor: 'rgba(0, 0, 0, 0.2)',
shadowBlur: 2,
shadowOffsetY: 2
}
}],
coordinateSystem: 'polar',
roundCap: true,
barWidth: 12,
barGap: '-100%', // 两环重叠
z: 1
}]
};
myChart.setOption(option, true);
window.addEventListener("resize", function () {
myChart.resize();
});
}
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%;">
<div style="float:left;width:100%;height:35px;margin-left: 20px;">
<div style="float:left;width:194px;height:34px;">
<div style="position:absolute;top:12px;left:50px;z-index:999;opacity: 1;font-size: 20px;font-family: Microsoft YaHei, Microsoft YaHei-Regular;margin-left:20px;">
设备管理
</div>
<img id="titleImage" src="" style="z-index:998;position:relative;height:100%;width:100%;"/>
</div>
</div>
<div style="float:left;width:40%;height:400px;margin-top: 20px;">
<table>
<tr>
<td style="color: #ffffff;text-align: right;font-size: 16px;">设备总数 (台)</td>
</tr>
<tr>
<td id="totalEqNum" style="color: #69f6f9;text-align: right;font-size: 30px;">2,900</td>
</tr>
<tr>
<td style="color: #ffffff;text-align: right;font-size: 16px;">设备总功率 kW</td>
</tr>
<tr>
<td id="totalEqPower" style="color: #69f6f9;text-align: right;font-size: 30px;">2,900</td>
</tr>
<tr>
<td style="color: #ffffff;text-align: right;font-size: 16px;">投运设备 (台)</td>
</tr>
<tr>
<td id="usingTotalEqNum" style="color: #69f6f9;text-align: right;font-size: 30px;">2,900</td>
</tr>
</table>
</div>
<div style="float:left;width:60%;height:250px;margin-top: 20px;">
<div style="float: left;width: 100%;height:30px;text-align: center;line-height: 30px;color: #ffffff;font-size: 20px;">
设备完好率
</div>
<div id="chart" style="float: left;width: 100%;height: 220px;"></div>
</div>
</div>
</div>
</body>
</html>

View File

@ -0,0 +1,375 @@
<%@ 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">
/* 请求数据 */
function getValue() {
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
// console.log(data);
if(data!=''){
var gssb1TotalNum=0;
var gssb1TotalRuningNum=0;
var gssb2TotalNum=0;
var gssb2TotalRuningNum=0;
var gssb3TotalNum=0;
var gssb3TotalRuningNum=0;
var gfjTotalNum=0;
var gfjTotalRuningNum=0;
var tsjTotalNum=0;
var tsjTotalRuningNum=0;
var csbTotalNum=0;
var csbTotalRuningNum=0;
var aeqnum=0;
var beqnum=0;
var ceqnum=0;
for(var i=0;i<data.length;i++){
if(data[i].elementCode=="gssb1"){
if(data[i].mPoint.parmvalue==1){
gssb1TotalRuningNum++;
}
gssb1TotalNum++;
}else if(data[i].elementCode=="gssb2"){
if(data[i].mPoint.parmvalue==1){
gssb2TotalRuningNum++;
}
gssb2TotalNum++;
}else if(data[i].elementCode=="gssb3"){
if(data[i].mPoint.parmvalue==1){
gssb3TotalRuningNum++;
}
gssb3TotalNum++;
}else if(data[i].elementCode=="gfj"){
if(data[i].mPoint.parmvalue==1){
gfjTotalRuningNum++;
}
gfjTotalNum++;
}else if(data[i].elementCode=="tsj"){
if(data[i].mPoint.parmvalue==1){
tsjTotalRuningNum++;
}
tsjTotalNum++;
}else if(data[i].elementCode=="csb"){
if(data[i].mPoint.parmvalue==1){
csbTotalRuningNum++;
}
csbTotalNum++;
}else if(data[i].elementCode=="sbzsNum"){
$('#sbzsNum').text(numOutput(data[i].valueUrl));
}else if(data[i].elementCode=="sbglNum"){
$('#sbglNum').text(numOutput(data[i].valueUrl));
}else if(data[i].elementCode=="sbtyNum"){
$('#sbtyNum').text(numOutput(data[i].valueUrl));
}else if(data[i].elementCode=="AEqNum"){
aeqnum=data[i].valueUrl;
}else if(data[i].elementCode=="BEqNum"){
beqnum=data[i].valueUrl;
}else if(data[i].elementCode=="CEqNum"){
ceqnum=data[i].valueUrl;
}else if(data[i].elementCode=="eqRate"){
getchart('chart',data[i].mPoint.parmvalue.toFixed(0),'','#36FFF9');
}
}
$('#gssb1').text(gssb1TotalRuningNum+"/"+gssb1TotalNum);
$('#gssb2').text(gssb2TotalRuningNum+"/"+gssb2TotalNum);
$('#gssb3').text(gssb3TotalRuningNum+"/"+gssb3TotalNum);
$('#gfj').text(gfjTotalRuningNum+"/"+gfjTotalNum);
$('#tsj').text(tsjTotalRuningNum+"/"+tsjTotalNum);
$('#csb').text(csbTotalRuningNum+"/"+csbTotalNum);
var totalEqNum=aeqnum+beqnum+ceqnum;
var sbZBHtml="";
sbZBHtml+="<tr style=\"height: 24px;font-size: 20px;font-family: MicrosoftYaHei;\">";
sbZBHtml+="<td style=\"width: "+(aeqnum/totalEqNum)+"%;text-align: left;color: #3883ff;\">A类设备</td>";
sbZBHtml+="<td style=\"width: "+(beqnum/totalEqNum)+"%;text-align: left;color: #FF8C1A;\">B类设备</td>";
sbZBHtml+="<td style=\"width: "+(ceqnum/totalEqNum)+"%;text-align: left;color: #B62CFF;\">C类设备</td>";
sbZBHtml+="</tr>";
sbZBHtml+="<tr style=\"height: 51px;font-size: 34px;font-family: MicrosoftYaHei;\">";
sbZBHtml+="<td style=\"text-align: left;color: #3883ff;\">"+numOutput(aeqnum)+"</td>";
sbZBHtml+="<td style=\"text-align: left;color: #FF8C1A;\">"+numOutput(beqnum)+"</td>";
sbZBHtml+="<td style=\"text-align: left;color: #B62CFF;\">"+numOutput(ceqnum)+"</td>";
sbZBHtml+="</tr>";
sbZBHtml+="<tr style=\"height: 30px;\">";
sbZBHtml+="<td style=\"background: #3883ff;\"></td>";
sbZBHtml+="<td style=\"background: #FF8C1A;\"></td>";
sbZBHtml+="<td style=\"background: #B62CFF;\"></td>";
sbZBHtml+="</tr>";
$('#sbZB').html(sbZBHtml);
}
}, 'json');
}
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方法用.进行拼接
}
/* 定时器 */
setInterval(getValue, 300000); //每1分钟切换
// setInterval(getValue, 3600000); //每一小时切换
/* 初始化 */
$(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("titleImage").src = ""+getRootPath()+"/images/大屏/大屏标题文字背景.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 getchart(id,value,title,color){
var myChart = echarts.init(document.getElementById(id));
var option = {
title: {
text: value,
textStyle: {
color: '#36FFF9',
fontSize: 50
},
subtext: "%",
subtextStyle: {
color: '#36FFF9',
fontSize: 19
},
itemGap: 0, // 主副标题距离
left: 'center',
top: '28%'
},
angleAxis: {
max: 100, // 满分
clockwise: true, // 逆时针
// 隐藏刻度线
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
splitLine: {
show: false
}
},
radiusAxis: {
type: 'category',
// 隐藏刻度线
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
splitLine: {
show: false
}
},
polar: {
center: ['50%', '40%'],
radius: '120%' //图形大小
},
series: [{
type: 'bar',
data: [{
name: '百分比',
value: value,
itemStyle: {
color: color
},
}],
coordinateSystem: 'polar',
roundCap: true,
barWidth: 12,
barGap: '-100%', // 两环重叠
z: 2
},{ // 灰色环
type: 'bar',
data: [{
value: 100,
itemStyle: {
color: '#1D4F6D',
shadowColor: 'rgba(0, 0, 0, 0.2)',
shadowBlur: 2,
shadowOffsetY: 2
}
}],
coordinateSystem: 'polar',
roundCap: true,
barWidth: 22,
barGap: '-135%', // 两环重叠
z: 1
}]
};
myChart.setOption(option, true);
window.addEventListener("resize", function () {
myChart.resize();
});
}
</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%;">
<div style="float:left;width:100%;height:35px;margin-left: 20px;">
<div style="float:left;width:100%;height:34px;">
<div style="position:absolute;top:12px;left:50px;z-index:999;opacity: 1;font-size: 20px;font-family: Microsoft YaHei, Microsoft YaHei-Regular;margin-left:38px;">设备管理</div>
<img id="titleImage" src="" style="z-index:998;position:relative;"/>
</div>
</div>
<div style="float: left;width: 100%; height:40%;padding-left: 30px;padding-top: 40px;">
<div style="float:left;width:40%;height:100%;">
<table>
<tr style="height: 45px;">
<td style="color: #ffffff;text-align: right;font-size: 16px;">设备总数 (台)</td>
</tr>
<tr style="height: 45px;">
<td id="sbzsNum" style="color: #69f6f9;text-align: right;font-size: 30px;"></td>
</tr>
<tr style="height: 45px;">
<td style="color: #ffffff;text-align: right;font-size: 16px;">设备总功率 kW</td>
</tr>
<tr style="height: 45px;">
<td id="sbglNum" style="color: #69f6f9;text-align: right;font-size: 30px;"></td>
</tr>
<tr style="height: 45px;">
<td style="color: #ffffff;text-align: right;font-size: 16px;">投运设备 (万台)</td>
</tr>
<tr style="height: 45px;">
<td id="sbtyNum" style="color: #69f6f9;text-align: right;font-size: 30px;"></td>
</tr>
</table>
</div>
<div style="float:left;width:60%;height:100%;padding-top: 20px;">
<div style="float: left;width: 100%;height:30px;text-align: center;line-height: 30px;color: #ffffff;font-size: 20px;">设备完好率</div>
<div id="chart" style="float: left;width: 100%;height: 250px;"></div>
</div>
</div>
<div style="float: left;width: 100%; height: calc(20% - 35px);padding-left: 30px;padding-top: 10px;">
<table id="sbZB" style="width: 100%;height: 105px;">
</table>
</div>
<div style="float: left;width: 100%; height:40%;padding-left: 10px;padding-top: 10px;">
<div style="width: 100%;height: 30px;line-height: 30px;color: #ffffff;font-size: 24px;font-family: Source Han Sans CN, Source Han Sans CN-Medium;font-weight: 500;">
主要设备运行情况
</div>
<div style="float: left;width: 100%;height: calc(100% - 30px);padding-top: 20px;">
<div style="float: left;width:calc(33.3% - 1px);height:100%;">
<div style="float: left;width: 100%;height:28px;line-height: 28px;font-size: 22px;font-family: MicrosoftYaHei;color: #69f6f9;text-align: center;">
进水区
</div>
<div style="float: left;width: 100%;height:80px;text-align: center;padding-top: 10px;">
<div style="float: left;width: 100%;height:28px;line-height: 28px;font-size: 20px;font-family: MicrosoftYaHei;color: #ffffff;">
1#格栅水泵
</div>
<div id="gssb1" style="float: left;width: 100%;height:42px;line-height: 42px;font-size: 34px;;font-family: MicrosoftYaHei;color: #69F6F9;">
</div>
<div style="float: left;width: 100%;height:28px;line-height: 28px;font-size: 20px;font-family: MicrosoftYaHei;color: #ffffff;">
2#格栅水泵
</div>
<div id="gssb2" style="float: left;width: 100%;height:42px;line-height: 42px;font-size: 34px;;font-family: MicrosoftYaHei;color: #69F6F9;">
</div>
<div style="float: left;width: 100%;height:28px;line-height: 28px;font-size: 20px;font-family: MicrosoftYaHei;color: #ffffff;">
3#格栅水泵
</div>
<div id="gssb3" style="float: left;width: 100%;height:42px;line-height: 42px;font-size: 34px;;font-family: MicrosoftYaHei;color: #69F6F9;">
</div>
</div>
</div>
<div style="float: left;width:1px;height:100%;padding-top:50px;padding-bottom:50px;">
<div style="float: left;width:1px;height:100%;background-color:#83A3AA;"></div>
</div>
<div style="float: left;width: 33.3%;height:100%;">
<div style="float: left;width: 100%;height:28px;line-height: 28px;font-size: 22px;font-family: MicrosoftYaHei;color: #69f6f9;text-align: center;">
处理区
</div>
<div style="float: left;width: 100%;height:80px;text-align: center;padding-top: 10px;">
<div style="float: left;width: 100%;height:28px;line-height: 28px;font-size: 20px;font-family: MicrosoftYaHei;color: #ffffff;">
鼓风机
</div>
<div id="gfj" style="float: left;width: 100%;height:42px;line-height: 42px;font-size: 34px;;font-family: MicrosoftYaHei;color: #69F6F9;">
</div>
</div>
</div>
<div style="float: left;width:1px;height:100%;padding-top:50px;padding-bottom:50px;">
<div style="float: left;width:1px;height:100%;background-color:#83A3AA;"></div>
</div>
<div style="float: left;width:calc(33.3% - 1px);;height:100%;">
<div style="float: left;width: 100%;height:28px;line-height: 28px;font-size: 22px;font-family: MicrosoftYaHei;color: #69f6f9;text-align: center;">
出水区
</div>
<div style="float: left;width: 100%;height:80px;text-align: center;padding-top: 10px;">
<div style="float: left;width: 100%;height:28px;line-height: 28px;font-size: 20px;font-family: MicrosoftYaHei;color: #ffffff;">
脱水机
</div>
<div id="tsj" style="float: left;width: 100%;height:42px;line-height: 42px;font-size: 34px;;font-family: MicrosoftYaHei;color: #69F6F9;">
</div>
<div style="float: left;width: 100%;height:28px;line-height: 28px;font-size: 20px;font-family: MicrosoftYaHei;color: #ffffff;">
出水泵
</div>
<div id="csb" style="float: left;width: 100%;height:42px;line-height: 42px;font-size: 34px;;font-family: MicrosoftYaHei;color: #69F6F9;">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

View File

@ -0,0 +1,333 @@
<%@ 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">
/* 请求数据 */
function getValue() {
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
// console.log(data);
if(data!=''){
var totalJSSBNum="";var usingJSSBNum="";
var totalJSSSNum="";var usingJSSSNum="";
var totalSZYBNum="";var usingSZYBNum="";
var totalZKSBNum="";var usingZKSBNum="";
var jssbRemark="";var jsssRemark="";
var szybRemark="";var zksbRemark="";
for(var i=0;i<data.length;i++){
var fordata=numOutput(data[i].valueUrl);
if(data[i].elementCode=="totalJSSBNum"){
$("#totalJSSBNum").text("/"+fordata);
totalJSSBNum=data[i].valueUrl;
}else if(data[i].elementCode=="usingJSSBNum"){
$("#usingJSSBNum").text(fordata);
usingJSSBNum=data[i].valueUrl;
}else if(data[i].elementCode=="totalJSSSNum"){
$("#totalJSSSNum").text("/"+fordata);
totalJSSSNum=data[i].valueUrl;
}else if(data[i].elementCode=="usingJSSSNum"){
$("#usingJSSSNum").text(fordata);
usingJSSSNum=data[i].valueUrl;
}else if(data[i].elementCode=="totalSZYBNum"){
$("#totalSZYBNum").text("/"+fordata);
totalSZYBNum=data[i].valueUrl;
}else if(data[i].elementCode=="usingSZYBNum"){
$("#usingSZYBNum").text(fordata);
usingSZYBNum=data[i].valueUrl;
}else if(data[i].elementCode=="totalZKSBNum"){
$("#totalZKSBNum").text("/"+fordata);
totalZKSBNum=data[i].valueUrl;
}else if(data[i].elementCode=="usingZKSBNum"){
$("#usingZKSBNum").text(fordata);
usingZKSBNum=data[i].valueUrl;
}else if(data[i].elementCode=="jssbRemark"){
jssbRemark=data[i].valueUrl.replaceAll(",","<br>");
// $('#jssbRemark').attr('title',jssbRemark);
}else if(data[i].elementCode=="jsssRemark"){
jsssRemark=data[i].valueUrl.replaceAll(",","<br>");
// $('#jsssRemark').attr('title',jsssRemark);
}else if(data[i].elementCode=="szybRemark"){
szybRemark=data[i].valueUrl.replaceAll(",","<br>");
// $('#szybRemark').attr('title',szybRemark);
}else if(data[i].elementCode=="zksbRemark"){
zksbRemark=data[i].valueUrl.replaceAll(",","<br>");
// $('#zksbRemark').attr('title',zksbRemark);
}
}
getchart('jssbChart',(Number(usingJSSBNum)/Number(totalJSSBNum)*100).toFixed(1),'','#36FFF9',jssbRemark);
getchart('jsssChart',(Number(usingJSSSNum)/Number(totalJSSSNum)*100).toFixed(1),'','#36FFF9',jsssRemark);
getchart('szybChart',(Number(usingSZYBNum)/Number(totalSZYBNum)*100).toFixed(1),'','#36FFF9',szybRemark);
getchart('zksbChart',(Number(usingZKSBNum)/Number(totalZKSBNum)*100).toFixed(1),'','#36FFF9',zksbRemark);
}
}, 'json');
}
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方法用.进行拼接
}
/* 定时器 */
//setInterval(change, 60000); //每1分钟切换
// setInterval(getValue, 3600000); //每一小时切换
/* 初始化 */
$(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("titleImage").src = ""+getRootPath()+"/images/大屏/大屏标题文字背景.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 getchart(id,value,title,color,tooltip){
var myChart = echarts.init(document.getElementById(id));
var option = {
title: {
text: value,
textStyle: {
color: '#36FFF9',
fontSize: 24
},
subtext: "%",
subtextStyle: {
color: '#36FFF9',
fontSize: 14
},
itemGap: 6, // 主副标题距离
left: 'center',
top: '35%'
},
tooltip: {
trigger: 'item',
formatter: function(param) //自定义弹出框的内容
{
// var lightTypeList = param.data.lightTypeList;
// //拼接一个字符串
// var res = param.data.name + '<br/>';
// //循环遍历内容
// for(var i = 0, length = lightTypeList.length; i < length; i++) {
// var val = lightTypeList[i].lightTotal;
// res += lightTypeList[i].lightName + '' + val + '<br/>';
// }
return tooltip;
}
},
angleAxis: {
max: 100, // 满分
clockwise: true, // 逆时针
// 隐藏刻度线
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
splitLine: {
show: false
}
},
radiusAxis: {
type: 'category',
// 隐藏刻度线
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
splitLine: {
show: false
}
},
polar: {
center: ['50%', '50%'],
radius: '130%' //图形大小
},
series: [{
type: 'bar',
data: [{
name: '百分比',
value: value,
itemStyle: {
color: color
},
}],
coordinateSystem: 'polar',
roundCap: true,
barWidth: 8,
barGap: '-100%', // 两环重叠
z: 2
},{ // 灰色环
type: 'bar',
data: [{
value: 100,
itemStyle: {
color: '#1D4F6D',
shadowColor: 'rgba(0, 0, 0, 0.2)',
shadowBlur: 2,
shadowOffsetY: 2
}
}],
coordinateSystem: 'polar',
roundCap: true,
barWidth: 14,
barGap: '-130%', // 两环重叠
z: 1
}]
};
myChart.setOption(option, true);
window.addEventListener("resize", function () {
myChart.resize();
});
}
</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%;">
<div style="float:left;width:100%;height:35px;margin-left: 20px;">
<div style="float:left;width:194px;height:34px;">
<div style="position:absolute;top:12px;left:50px;z-index:999;opacity: 1;font-size: 20px;font-family: Microsoft YaHei, Microsoft YaHei-Regular;margin-left:20px;">设备管理</div>
<img id="titleImage" src="" style="z-index:998;position:relative;height:100%;width:100%;"/>
</div>
</div>
<div style="float:left;width:100%;height:calc((100% - 55px)*0.25);padding-top: 10px;">
<div style="float:left;width:40%;height:100%;padding-left: 40px;padding-top: 45px;">
<table>
<tr>
<td style="color: #ffffff;text-align: right;font-size: 16px;">净水设备</td>
</tr>
<tr>
<td id="usingJSSBNum" style="color: #69f6f9;text-align: right;font-size: 30px;"></td>
</tr>
<tr>
<td id="totalJSSBNum" style="color: #69f6f9;text-align: right;font-size: 30px;"></td>
</tr>
<!-- <tr>
<td style="color: #ffffff;text-align: right;font-size: 16px;">投运净水设备</td>
</tr> -->
</table>
</div>
<div style="float:left;width:60%;height:100%;">
<div id="jssbRemark" style="float: left;width: 100%;height:30px;text-align: center;line-height: 30px;color: #ffffff;font-size: 20px;cursor: pointer;">净水设备完好率</div>
<div id="jssbChart" style="float: left;width: 100%;height: calc(100% - 30px);"></div>
</div>
</div>
<div style="float:left;width:100%;height:calc((100% - 55px)*0.25);padding-top: 10px;">
<div style="float:left;width:40%;height:100%;padding-left: 40px;padding-top: 45px;">
<table>
<tr>
<td style="color: #ffffff;text-align: right;font-size: 16px;">净水设施</td>
</tr>
<tr>
<td id="usingJSSSNum" style="color: #69f6f9;text-align: right;font-size: 30px;"></td>
</tr>
<tr>
<td id="totalJSSSNum" style="color: #69f6f9;text-align: right;font-size: 30px;"></td>
</tr>
<!-- <tr>
<td style="color: #ffffff;text-align: right;font-size: 16px;">投运净水设施</td>
</tr> -->
</table>
</div>
<div style="float:left;width:60%;height:100%;">
<div id="jsssRemark" style="float: left;width: 100%;height:30px;text-align: center;line-height: 30px;color: #ffffff;font-size: 20px;cursor: pointer;">净水设施完好率</div>
<div id="jsssChart" style="float: left;width: 100%;height: calc(100% - 30px);"></div>
</div>
</div>
<div style="float:left;width:100%;height:calc((100% - 55px)*0.25);padding-top: 10px;">
<div style="float:left;width:40%;height:100%;padding-left: 40px;padding-top: 45px;">
<table>
<tr>
<td style="color: #ffffff;text-align: right;font-size: 16px;">水质仪表</td>
</tr>
<tr>
<td id="usingSZYBNum" style="color: #69f6f9;text-align: right;font-size: 30px;"></td>
</tr>
<tr>
<td id="totalSZYBNum" style="color: #69f6f9;text-align: right;font-size: 30px;"></td>
</tr>
<!-- <tr>
<td style="color: #ffffff;text-align: right;font-size: 16px;">投运水质仪表</td>
</tr> -->
</table>
</div>
<div style="float:left;width:60%;height:100%;">
<div id="szybRemark" style="float: left;width: 100%;height:30px;text-align: center;line-height: 30px;color: #ffffff;font-size: 20px;cursor: pointer;">水质仪表完好率</div>
<div id="szybChart" style="float: left;width: 100%;height: calc(100% - 30px);"></div>
</div>
</div>
<div style="float:left;width:100%;height:calc((100% - 55px)*0.25);padding-top: 10px;">
<div style="float:left;width:40%;height:100%;padding-left: 40px;padding-top: 45px;">
<table>
<tr>
<td style="color: #ffffff;text-align: right;font-size: 16px;">自控设备</td>
</tr>
<tr>
<td id="usingZKSBNum" style="color: #69f6f9;text-align: right;font-size: 30px;"></td>
</tr>
<tr>
<td id="totalZKSBNum" style="color: #69f6f9;text-align: right;font-size: 30px;"></td>
</tr>
<!-- <tr>
<td style="color: #ffffff;text-align: right;font-size: 16px;">投运自控设备</td>
</tr> -->
</table>
</div>
<div style="float:left;width:60%;height:100%;">
<div id="zksbRemark" style="float: left;width: 100%;height:30px;text-align: center;line-height: 30px;color: #ffffff;font-size: 20px;cursor: pointer;">自控设备完好率</div>
<div id="zksbChart" style="float: left;width: 100%;height: calc(100% - 30px);"></div>
</div>
</div>
</div>
</div>
</body>
</html>

View File

@ -0,0 +1,238 @@
<%@ 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">
/* 请求数据 */
function getValue() {
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
// console.log(data);
if(data!=''){
for(var i=0;i<data.length;i++){
var fordata=numOutput(data[i].valueUrl);
if(data[i].elementCode=="totalEQNum"){
$("#totalEQNum").text(fordata);
}else if(data[i].elementCode=="EQPower"){
$("#EQPower").text(fordata);
}else if(data[i].elementCode=="usingEQNum"){
$("#usingEQNum").text(fordata);
}else if(data[i].elementCode=="bar"){
getchart('EQChart',data[i].valueUrl,'','#36FFF9');
}
}
}
}, 'json');
}
/* 定时器 */
//setInterval(change, 60000); //每1分钟切换
// setInterval(getValue, 3600000); //每一小时切换
/* 初始化 */
$(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("titleImage").src = ""+getRootPath()+"/images/大屏/js/标题logo2.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 getchart(id,value,title,color){
var myChart = echarts.init(document.getElementById(id));
var option = {
title: {
text: value,
textStyle: {
color: '#36FFF9',
fontSize: 42
},
subtext: "%",
subtextStyle: {
color: '#36FFF9',
fontSize: 14
},
itemGap: 6, // 主副标题距离
left: 'center',
top: '35%'
},
// tooltip: {
// trigger: 'item',
// formatter: function(param) //自定义弹出框的内容
// {
// // var lightTypeList = param.data.lightTypeList;
// // //拼接一个字符串
// // var res = param.data.name + '<br/>';
// // //循环遍历内容
// // for(var i = 0, length = lightTypeList.length; i < length; i++) {
// // var val = lightTypeList[i].lightTotal;
// // res += lightTypeList[i].lightName + '' + val + '<br/>';
// // }
// return tooltip;
// }
// },
angleAxis: {
max: 100, // 满分
clockwise: true, // 逆时针
// 隐藏刻度线
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
splitLine: {
show: false
}
},
radiusAxis: {
type: 'category',
// 隐藏刻度线
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
splitLine: {
show: false
}
},
polar: {
center: ['50%', '50%'],
radius: '130%' //图形大小
},
series: [{
type: 'bar',
data: [{
name: '百分比',
value: value,
itemStyle: {
color: color
},
}],
coordinateSystem: 'polar',
roundCap: true,
barWidth: 8,
barGap: '-100%', // 两环重叠
z: 2
},{ // 灰色环
type: 'bar',
data: [{
value: 100,
itemStyle: {
color: '#1D4F6D',
shadowColor: 'rgba(0, 0, 0, 0.2)',
shadowBlur: 2,
shadowOffsetY: 2
}
}],
coordinateSystem: 'polar',
roundCap: true,
barWidth: 15,
barGap: '-135%', // 两环重叠
z: 1
}]
};
myChart.setOption(option, true);
window.addEventListener("resize", function () {
myChart.resize();
});
}
</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:20px;padding-left:10px;padding-right:10px;">
<div style="height:100%;width:100%;">
<div style="float:left;width:100%;height:35px;padding-left: 20px;">
<div style="float:left;width:100%;height:34px;position:absolute;">
<div style="position:absolute;top:-4px;left:50px;z-index:999;opacity: 1;font-size: 21px;color:#d9f6fb;font-family:Source Han Sans CN, Source Han Sans CN-Regular;text-shadow:1.5px 1.5px 0 #174749, 1.5px -1.5px 0 #174749, -1.5px -1.5px 0 #174749, -1.5px 1.5px 0 #174749, 1.5px 1px 0 #174749, 1.5px -1px 0 #174749, -1.5px -1px 0 #174749, -1.5px 1px 0 #174749, 1.5px 0px 0 #174749, 1.5px 0px 0 #174749, -1.5px 0px 0 #174749, -1.5px 0px 0 #174749,1px 1.5px 0 #174749, 1px -1.5px 0 #174749, -1px -1.5px 0 #174749, -1px 1.5px 0 #174749, 1px 1px 0 #174749, 1px -1px 0 #174749, -1px -1px 0 #174749, -1px 1px 0 #174749, 1px 0px 0 #174749, 1px 0px 0 #174749, -1px 0px 0 #174749, -1px 0px 0 #174749, 0px 1.5px 0 #174749, 0px -1.5px 0 #174749, 0px -1.5px 0 #174749, 0px 1.5px 0 #174749, 0px 1px 0 #174749, 0px -1px 0 #174749, 0px -1px 0 #174749, 0px 1px 0 #174749;">设备情况</div>
<img id="titleImage" src="" style="z-index:998;position:relative;"/>
</div>
</div>
<div style="float:left;width:100%;height:calc(100% - 35px);padding-top: 20px;">
<div style="float:left;width:40%;height:100%;padding-left: 40px;padding-top: 5px;">
<table>
<tr>
<td style="color: #ffffff;text-align: right;font-size: 16px;">设备总数</td>
</tr>
<tr>
<td id="totalEQNum" style="color: #69f6f9;text-align: right;font-size: 30px;">1200</td>
</tr>
<tr>
<td style="color: #ffffff;text-align: right;font-size: 16px;">设备总功率</td>
</tr>
<tr>
<td id="EQPower" style="color: #69f6f9;text-align: right;font-size: 30px;">2100</td>
</tr>
<tr>
<td style="color: #ffffff;text-align: right;font-size: 16px;">投运设备</td>
</tr>
<tr>
<td id="usingEQNum" style="color: #69f6f9;text-align: right;font-size: 30px;">2100</td>
</tr>
</table>
</div>
<div style="float:left;width:60%;height:100%;">
<div style="float: left;width: 100%;height:30px;text-align: center;line-height: 30px;color: #ffffff;font-size: 20px;cursor: pointer;">设备完好率</div>
<div id="EQChart" style="float: left;width: 100%;height: calc(100% - 30px);"></div>
</div>
</div>
<!-- <img id="tsjImage" src="" style="top:65px;left:40px;z-index:998;position:absolute;"/>
<div style="float:left;width:100%;height:calc(100% - 35px);padding-top:20px;">
<table id="table" style="width:100%;height:100%;">
</table>
</div> -->
</div>
</div>
</body>
</html>

View File

@ -0,0 +1,112 @@
<%@ 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">
/* 请求数据 */
function getValue() {
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
// console.log(data);
var html="";
html+="<tr style=\"font-size: 22px;color: #69f6f9;text-align:center;\">";
html+="<td>类别</td>";
html+="<td>内容</td>";
html+="<td>发布时间</td>";
html+="</tr>";
if(data!=''){
$.ajax({
type: "POST",
url: ext.contextPath+data[0].valueUrl,
dataType: "json",
async: false, // 同步
success: function(datas){
// console.log(datas);
var num=datas.length;
for(var i=0;i<num;i++){
html+="<tr style=\"font-size: 22px;color: #ffffff;text-align:center;height:45px\">";
html+="<td>"+datas[i].alarmlvl+"级报警</td>";
html+="<td>"+datas[i].describe+"</td>";
html+="<td>"+datas[i].alarmtime.substring(0,16)+"</td>";
html+="</tr>";
}
// if(5-num>0){
// }
}
});
}
$('#table').html(html);
}, 'json');
}
/* 定时器 */
setInterval(getValue, 300000); //每5分钟切换
// setInterval(getValue, 3600000); //每一小时切换
/* 初始化 */
$(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("titleImage").src = ""+getRootPath()+"/images/大屏/大屏标题文字背景2.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;
}
</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%;">
<div style="float:left;width:100%;height:57px;margin-left: 20px;">
<div style="float:left;width:100%;height:34px;">
<div style="position:absolute;top:24px;left:50px;z-index:999;opacity: 1;font-size: 20px;font-family: Microsoft YaHei, Microsoft YaHei-Regular;margin-left:55px;">事件告警</div>
<img id="titleImage" src="" style="z-index:998;position:relative;"/>
</div>
</div>
<div style="float:left;width:100%;height:calc(100% - 57px);padding-left: 20px;">
<table id="table" style="width: 100%;height: 100%;">
</table>
</div>
</div>
</div>
</body>
</html>

View File

@ -0,0 +1,124 @@
<%@ 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">
/* 请求数据 */
function getValue() {
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
// console.log(data);
if(data!=''){
}
}, 'json');
}
/* 定时器 */
//setInterval(change, 60000); //每1分钟切换
// setInterval(getValue, 3600000); //每一小时切换
/* 初始化 */
$(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("titleImage").src = ""+getRootPath()+"/images/大屏/大屏标题文字背景.png";
document.getElementById("waterImg").src = ""+getRootPath()+"/images/大屏/水量2.png";
document.getElementById("areaImg").src = ""+getRootPath()+"/images/大屏/服务面积.png";
document.getElementById("peopleImg").src = ""+getRootPath()+"/images/大屏/服务人口.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;
}
</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%;">
<div style="float:left;width:100%;height:35px;padding-left: 20px;">
<div style="float:left;width:100%;height:34px;">
<div style="position:absolute;top:12px;left:50px;z-index:999;opacity: 1;font-size: 20px;font-family: Microsoft YaHei, Microsoft YaHei-Regular;margin-left:38px;">公司概览</div>
<img id="titleImage" src="" style="z-index:998;position:relative;"/>
</div>
</div>
<div style="float:left;width:100%;height:46px;margin-left: 20px;margin-top: 30px;">
<div style="float:left;width:34px;height:46px;">
<img id="waterImg" src="" style="z-index:999;position:relative;height:100%;width:100%;"/>
</div>
<div style="float:left;width:150px;height:46px;line-height: 46px;font-size: 20px;color: #2b9dd8;padding-left: 15px;">
设计处理量
</div>
<div style="float:left;width:100px;height:46px;line-height: 46px;font-size: 40px;color: #69f6f9;padding-left: 15px;">
11
</div>
<div style="float:left;width:80px;height:46px;line-height: 46px;font-size: 20px;color: #2b9dd8;padding-left: 10px;">
万吨/天
</div>
</div>
<div style="float:left;width:100%;height:50px;margin-left: 20px;margin-top: 30px;">
<div style="float:left;width:50px;height:50px;">
<img id="areaImg" src="" style="z-index:999;position:relative;height:100%;width:100%;"/>
</div>
<div style="float:left;width:120px;height:50px;color: #2b9dd8;padding-left: 15px;">
<div style="float:left;width: 100%;height: 30px;font-size: 20px;line-height: 30px;">服务面积</div>
<div style="float:left;width: 100%;height: 20px;font-size: 14px;line-height: 20px;">平方公里</div>
</div>
<div style="float:left;width:100px;height:50px;line-height: 50px;font-size: 40px;color: #69f6f9;">
604
</div>
<div style="float:left;width:50px;height:50px;">
<img id="peopleImg" src="" style="z-index:999;position:relative;height:100%;width:100%;"/>
</div>
<div style="float:left;width:120px;height:50px;color: #2b9dd8;padding-left: 15px;">
<div style="float:left;width: 100%;height: 30px;font-size: 20px;line-height: 30px;">服务人口</div>
<div style="float:left;width: 100%;height: 20px;font-size: 14px;line-height: 20px;">万人</div>
</div>
<div style="float:left;width:100px;height:50px;line-height: 50px;font-size: 40px;color: #69f6f9;">
84.4
</div>
</div>
<div style="float:left;width:100%;padding-left: 20px;padding-top: 40px;color: #ffffff;line-height:40px;font-size: 20px;">
上海城投城桥污水处理有限公司于2005年09月27日成立。公司经营范围包括污水处理环保设施领域内的技术服务环保设备的销售等。
<br>2020年公司旗下接受委托运营的污水处理厂包括上海崇明城桥污水处理厂、上海崇明堡镇污水处理厂、上海崇明新河污水处理厂、上海崇明陈家镇污水处理厂、上海崇明长兴污水处理厂规划总服务面积604.1Km2总服务人口84.4万人处理污水量11万m3/d。
<br>公司自成立至今,不断吸取和借鉴国内外先进的经营和管理理念,努力实现公司业务、管理等方面自我超越!
</div>
</div>
</div>
</body>
</html>

View File

@ -0,0 +1,175 @@
<%@ 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;
}
}
.path {
fill:none;
stroke: #b1dfef;
stroke-width:0.2;
stroke-dasharray:1;
stroke-dashoffset:16;
animation: dash 5s linear infinite;
}
</style>
<script type="text/javascript">
/* 请求数据 */
function getValue() {
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
if(data!=''){
for(var i=0;i<data.length;i++){
if(data[i].elementCode=="img"){
document.getElementById("Image").src = ""+getRootPath()+""+data[i].valueUrl+"";
}
}
}
}, 'json');
}
/* 定时器 */
// 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";
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;
}
</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-left:10px;padding-right:10px;">
<div style="float:left;width:100%;height:100%;margin-top: 10px;position:relative;">
<svg viewBox="0 0 120 55" style="position: absolute;z-index:999;">
<path d="M99.4,7.35 H91.5 V8" class="path" style="stroke-width:0.1;"/>
<path d="M99.4,7.35 H90.8 V8" class="path" style="stroke-width:0.1;"/>
<path d="M99.4,7.35 H90.2 V8" class="path" style="stroke-width:0.1;"/>
<path d="M99.4,7.35 H89.6 V8" class="path" style="stroke-width:0.1;"/>
<path d="M90.2,13 L90.2,14.2" class="path"/>
<path d="M90.8,13 L90.95,14.2 H89.26 L88.13,7.42 H89.5" class="path"/>
<path d="M96.7,7.3 L96.45,5.7 H95.5" class="path"/>
<path d="M96.7,7.3 L96.1,3.9 H95" class="path"/>
<path d="M99.4,7.65 H93.8" class="path"/>
<path d="M91.9,13 L92.2,14.2" class="path"/>
<path d="M91.4,13 L91.6,14.2 H100.1 L105,35.65 H101.5" class="path"/>
<path d="M104,33.2 H101.2" class="path"/>
<path d="M96.35,12.5 V13.3" class="path"/>
<path d="M95.55,12.5 V13.3" class="path"/>
<path d="M94.85,12.5 V13.3" class="path"/>
<path d="M94.2,12.5 V13.3 H99 L100.75,21.3 H99.5" class="path"/>
<path d="M99.4,21.3 L98.4,16.95 H97.55" class="path"/>
<path d="M99.4,21.3 L98.9,19.3 H98.1" class="path"/>
<path d="M99.4,21.3 L100.05,24.4 H99.2" class="path"/>
<path d="M99.4,21.3 L100.57,26.75 H99.65" class="path"/>
<path d="M108.15,46.55 L108.8,49.25 H104.7" class="path"/>
<path d="M108.15,46.55 L108.9,49.9 H104.8" class="path"/>
<path d="M97.2,48.7 H96 L96.15,49.8" class="path"/>
<path d="M97.8,50.9 H96.4 L96.15,49.8 H95.45 L95.1,47.4 H106 L104.95,42.5 H103.9 L103.7,41.35 H102.8" class="path"/>
<path d="M103.9,42.5 L104.2,44.14 H103.5" class="path"/>
<path d="M79,3.36 H77.7 L78.8,13.8 H79.5" class="path"/>
<path d="M79,5.1 H77.8" class="path"/>
<path d="M78.3,7.3 H78.6" class="path"/>
<path d="M79,10.85 H75.9 L76.1,13.2 H64.7 L64.75,17 H63.5" class="path"/>
<!-- <path d="M64.5,17 H63.5" class="path"/> -->
<path d="M54.5,17.1 H52.8 V16 H51.5" class="path"/>
<path d="M54.5,19.1 H52.7 L52.6,21.2 H51.2" class="path"/>
<path d="M39.3,18.12 H37.45 L37.5,17.1 H36.5" class="path"/>
<path d="M36.3,16.2 H37.5 L38.05,12.58 H64.7 V11.8" class="path"/>
<path d="M64.7,12.58 H69.8 V11.8" class="path"/>
<path d="M66.8,2.7 V0.8" class="path"/>
<path d="M39.3,18.12 H37.45 L36.1,28.1 H31.1 L31.2,27" class="path"/>
<path d="M80.7,17 H78.35 L78.1,14.4 H67.1 V15.1" class="path"/>
<path d="M76.7,14.4 V15.1" class="path"/>
<path d="M80.7,19.1 H78.57 L78.35,17" class="path"/>
<path d="M81.5,24.43 H79.15 L79.48,28.03 H67.6 V27" class="path"/>
<path d="M81.5,26.41 H79.28" class="path"/>
<path d="M77.89,28.03 V27" class="path"/>
<path d="M82.4,32.57 H80.8 L80.45,29.2 H79" class="path"/>
<path d="M82.4,34.99 H81.08 L81.3,37.56 H79.9" class="path"/>
<path d="M83.41,40.85 H81.7 L81.35,37.99 H79.9" class="path"/>
<path d="M83.41,44.16 H82.13 L82.35,47.2 H80.7" class="path"/>
<path d="M71.5,42.85 H68.2 L67.95,37.48 H63.1 V38.3" class="path"/>
<path d="M64.6,37.48 V38.3" class="path"/>
<path d="M62.7,46.5 V48" class="path"/>
<path d="M65.34,46.5 V48.1 H55.4 V47" class="path"/>
<path d="M58.89,48 V38.32 H55.8" class="path"/>
<path d="M71,33.6 H65.2 L64.95,26.15 H63.5" class="path"/>
<path d="M67.3,21.32 H64.88 L64.95,24.15 H63.5" class="path"/>
<path d="M67.3,21.32 H64.88 L64.8,18.92 H63.5" class="path"/>
<path d="M54.5,23.74 H52.5 V21.7 H51.2" class="path"/>
<path d="M54.3,26 H52.35 L52.3,27.75 H51" class="path"/>
<path d="M48,42.5 H45.5 L45.78,37.5 H34 L33.7,39.5" class="path"/>
<path d="M37.9,37.5 L37.7,39.5" class="path"/>
<path d="M27.6,45.4 L27.4,47" class="path"/>
<path d="M42.12,45.4 L41.95,47.05 H23.5 L24.7,40 H23.45" class="path"/>
<path d="M23.7,44.28 H22.4" class="path"/>
<path d="M15,42.68 H11.5" class="path"/>
<path d="M39,24.5 H37.95 L37.3,29.55 H17.6 L18.2,26.7" class="path"/>
<path d="M37.5,28.12 H36" class="path"/>
<path d="M29.38,25.1 L29.6,23.5" class="path"/>
<path d="M23.75,25.1 L24.05,23.5" class="path"/>
<path d="M29.38,24.55 H27 L26.5,23.9" class="path"/>
<path d="M23.9,24.55 H25.8 L26.46,23.9 L28.4,12.7 H26.5" class="path"/>
<path d="M29.38,19.75 H28.8 L30.46,9.5 H28.79 L29.15,7" class="path"/>
<path d="M27.2,11.1 H28.5 L29.15,7" class="path"/>
<path d="M19.5,19.5 H18.5 L20.75,9.45 H24.65 L25.3,7" class="path"/>
<path d="M24.85,2.9 L25.3,0.8" class="path"/>
<path d="M30.8,2.9 L31,1.8 H32 L32.1,0.8" class="path"/>
</svg>
<!-- <div style="position: absolute;left:350px;top:103px;width: 20px;height: 2px;background-color: aquamarine;"></div> -->
<img id="Image" src="" style="z-index:998;position:relative;height:100%;width:100%;"/>
</div>
</div>
</body>
</html>

View File

@ -0,0 +1,246 @@
<%@ 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">
//获取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;
}
//获取url地址根目录 当前taomcat下路径
function getRootPath2(){
var pathName = window.location.pathname.substring(1);
var webName = pathName == '' ? '' : pathName.substring(0, pathName.indexOf('/'));
return window.location.protocol + '//' + window.location.host +"/"+webName;
}
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方法用.进行拼接
}
/* 请求数据 */
function getValue() {
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
// console.log(data);
if(data!=''){
for(var i=0;i<data.length;i++){
if(data[i].elementCode=="patrolTaskNum"){
$('#patrolTaskNum').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
}else if(data[i].elementCode=="functionPatrolCompleteNum"){
$('#functionPatrolCompleteNum').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
}else if(data[i].elementCode=="functionPatrolTotalNum"){
$('#functionPatrolTotalNum').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
}else if(data[i].elementCode=="eqPatrolCompleteNum"){
$('#eqPatrolCompleteNum').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
}else if(data[i].elementCode=="eqPatrolTotalNum"){
$('#eqPatrolTotalNum').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
}else if(data[i].elementCode=="functionPatrolCompletionRate"){
dochart('chart1',(data[i].visualCacheData.value).toFixed(0),'运行巡检完成率','#EFA103');
}else if(data[i].elementCode=="eqPatrolCompletionRate"){
dochart('chart2',(data[i].visualCacheData.value).toFixed(0),'设备巡检完成率','#1890FF');
}
}
}
}, 'json');
}
function dochart(id,value,title,color){
var myChart = echarts.init(document.getElementById(id));
var option = {
title: {
text: value+"%",
textStyle: {
color: color,
fontSize: 36
},
subtext: title,
subtextStyle: {
color: color,
fontSize: 24
},
itemGap: 120, // 主副标题距离
left: 'center',
top: '35%'
},
angleAxis: {
max: 100, // 满分
clockwise: false, // 逆时针
// 隐藏刻度线
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
splitLine: {
show: false
}
},
radiusAxis: {
type: 'category',
// 隐藏刻度线
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
splitLine: {
show: false
}
},
polar: {
center: ['50%', '40%'],
radius: '120%' //图形大小
},
series: [{
type: 'bar',
data: [{
name: '百分比',
value: value,
itemStyle: {
color: color
},
}],
coordinateSystem: 'polar',
roundCap: true,
barWidth: 20,
barGap: '-100%', // 两环重叠
z: 2
},{ // 灰色环
type: 'bar',
data: [{
value: 100,
itemStyle: {
color: '#2B3F69',
shadowColor: 'rgba(0, 0, 0, 0.2)',
shadowBlur: 5,
shadowOffsetY: 2
}
}],
coordinateSystem: 'polar',
roundCap: true,
barWidth: 25,
barGap: '-100%', // 两环重叠
z: 1
}]
};
myChart.setOption(option, true);
}
/* 定时器 */
//setInterval(change, 60000); //每1分钟切换
setInterval(getValue, 3600000); //每一小时切换
/* 初始化 */
$(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("backImage").src = ""+getRootPath()+"/images/大屏/巡检情况.png";
getValue();
//console.log("height",document.body.scrollHeight);
});
</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-left:30px;padding-right:30px;padding-bottom:30px;">
<div style="height:100%;width:100%;background:#16314C;border-radius: 8px;">
<div style="float:left;width:100%;height:80px;"><img id="backImage" src="" style="z-index:999;position:relative;height:100%;width: 25%;"/></div>
<div style="float:left;width:40%;height:calc(100% - 80px);">
<div style="float:left;width:100%;height:50%;padding-left:35px;padding-top:30px;">
<table style="width: 185px;height:102px;background: linear-gradient(50deg,#427dfe 15%, #74d6ff 104%);border-radius: 18px;text-align: center;vertical-align: middle;">
<tr height="70%">
<td id="patrolTaskNum" width="100%" style="color: #ffffff;font-size:36px;"></td>
</tr>
<tr height="30%">
<td width="100%" style="color: #ffffff;font-size:16px;vertical-align:top;">任务总数</td>
</tr>
</table>
</div>
<div style="float:left;width:100%;height:50%;padding-left:35px;margin-top:-35px;">
<table style="width:100%;height:100%;text-align: center;vertical-align: middle;">
<tr height="15%">
<td width="40%"></td>
<td width="50%" style="position:relative;">
<div style="position: absolute;top:30%;color: #82BDF3;font-size:24px;">
<span id="functionPatrolCompleteNum"></span>
<span>/</span>
<span id="functionPatrolTotalNum"></span>
</div>
</td>
</tr>
<tr height="35%" style="background:#0C3C58;border-radius: 12px;">
<td width="40%" style="color: #69F6F9;font-size:20px;border-radius: 12px 0px 0px 12px;">运行巡检任务数</td>
<td width="50%" style="padding-right: 10px;border-radius: 0px 12px 12px 0px;">
<div style="float: left;background-color:#69F6F9;width: 100%;height:25%;border-radius:8px 0px 0px 8px;"></div>
<div style="float: left;background-color:#d8d8d8;width: 0%;height:25%;opacity: 0.44;border-radius:0px 8px 8px 0px;"></div>
</td>
</tr>
<tr height="15%">
<td width="40%"></td>
<td width="50%" style="position:relative;">
<div style="position:absolute;top:30%;color: #82BDF3;font-size:24px;">
<span id="eqPatrolCompleteNum"></span>
<span>/</span>
<span id="eqPatrolTotalNum"></span>
</div>
</td>
</tr>
<tr height="35%" style="background:#0C3C58;border-radius: 12px;">
<td width="40%" style="color: #69F6F9;font-size:20px;border-radius: 12px 0px 0px 12px;">设备巡检任务数</td>
<td width="50%" style="padding-right: 10px;border-radius: 0px 12px 12px 0px;">
<div style="float: left;background-color:#69F6F9;width: 100%;height:25%;border-radius:8px 0px 0px 8px;"></div>
<div style="float: left;background-color:#d8d8d8;width: 0%;height:25%;opacity: 0.44;border-radius:0px 8px 8px 0px;"></div>
</td>
</tr>
</table>
</div>
</div>
<div style="float:left;width:60%;height:calc(100% - 80px);">
<div id="chart1" style="float:left;width:50%;height:100%;"></div>
<div id="chart2" style="float:left;width:50%;height:100%;"></div>
</div>
</div>
</div>
</body>
</html>

View File

@ -0,0 +1,218 @@
<%@ 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">
/* 请求数据 */
function getValue() {
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', {planLayoutId: "${param.planLayoutId}"}, function (data) {
// console.log(data);
if (data != '') {
for (var i = 0; i < data.length; i++) {
if (data[i].elementCode == "yxNum") {
$('#yxNum').text(data[i].valueUrl);
} else if (data[i].elementCode == "eqNum") {
$('#eqNum').text(data[i].valueUrl);
}else if (data[i].elementCode == "yxRate") {
getchart('chart', data[i].valueUrl, '', '#36FFF9');
} else if (data[i].elementCode == "eqRate") {
getchart('chart2', data[i].valueUrl, '', '#36FFF9');
}
}
}
}, 'json');
}
/* 定时器 */
//setInterval(change, 60000); //每1分钟切换
// setInterval(getValue, 3600000); //每一小时切换
/* 初始化 */
$(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("titleImage").src = "" + getRootPath() + "/images/大屏/大屏标题文字背景.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 getchart(id, value, title, color) {
var myChart = echarts.init(document.getElementById(id));
var option = {
title: {
text: value,
textStyle: {
color: '#36FFF9',
fontSize: 50
},
subtext: "%",
subtextStyle: {
color: '#36FFF9',
fontSize: 19
},
itemGap: 0, // 主副标题距离
left: 'center',
top: '35%'
},
angleAxis: {
max: 100, // 满分
clockwise: true, // 逆时针
// 隐藏刻度线
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
splitLine: {
show: false
}
},
radiusAxis: {
type: 'category',
// 隐藏刻度线
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
splitLine: {
show: false
}
},
polar: {
center: ['50%', '50%'],
radius: '120%' //图形大小
},
series: [{
type: 'bar',
data: [{
name: '百分比',
value: value,
itemStyle: {
color: color
},
}],
coordinateSystem: 'polar',
roundCap: true,
barWidth: 10,
barGap: '-100%', // 两环重叠
z: 2
}, { // 灰色环
type: 'bar',
data: [{
value: 100,
itemStyle: {
color: '#1D4F6D',
shadowColor: 'rgba(0, 0, 0, 0.2)',
shadowBlur: 2,
shadowOffsetY: 2
}
}],
coordinateSystem: 'polar',
roundCap: true,
barWidth: 12,
barGap: '-100%', // 两环重叠
z: 1
}]
};
myChart.setOption(option, true);
window.addEventListener("resize", function () {
myChart.resize();
});
}
</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%;">
<div style="float:left;width:100%;height:35px;margin-left: 20px;">
<div style="float:left;width:194px;height:34px;">
<div style="position:absolute;top:12px;left:50px;z-index:999;opacity: 1;font-size: 20px;font-family: Microsoft YaHei, Microsoft YaHei-Regular;margin-left:20px;">
巡检管理
</div>
<img id="titleImage" src="" style="z-index:998;position:relative;height:100%;width:100%;"/>
</div>
</div>
<div style="float:left;width:60%;height:230px;margin-top: 20px;">
<div style="float: left;width: 100%;height:30px;text-align: center;line-height: 30px;color: #ffffff;font-size: 20px;">
运行巡检完成率
</div>
<div id="chart" style="float: left;width: 100%;height: 200px;"></div>
</div>
<div style="float:left;width:40%;height:230px;margin-top: 20px;">
<div style="float: left;width: 100%;height:30px;text-align: left;line-height: 30px;color: #ffffff;font-size: 20px;">
运行工单数
</div>
<div id="yxNum" style="float: left;width: 100%;height:60px;text-align: left;line-height: 60px;color: #69f6f9;font-size: 34px;">
</div>
<div style="float: left;width: 100%;height:60px;position:relative;">
<div style="position: absolute;width:103px;height:22px;background: #1d4f6d; border-radius: 10px;left:0px;top:0px"></div>
<div style="position: absolute;width:80px;height:14px;background: #36fff9; border-radius: 6px;left:0px;top:0px;margin-top: 4px;margin-left: 3px;"></div>
</div>
</div>
<div style="float:left;width:60%;height:230px;margin-top: 20px;">
<div style="float: left;width: 100%;height:30px;text-align: center;line-height: 30px;color: #ffffff;font-size: 20px;">
设备巡检完成率
</div>
<div id="chart2" style="float: left;width: 100%;height: 200px;"></div>
</div>
<div style="float:left;width:40%;height:230px;margin-top: 20px;">
<div style="float: left;width: 100%;height:30px;text-align: left;line-height: 30px;color: #ffffff;font-size: 20px;">
设备工单数
</div>
<div id="eqNum" style="float: left;width: 100%;height:60px;text-align: left;line-height: 60px;color: #69f6f9;font-size: 34px;">
</div>
<div style="float: left;width: 100%;height:60px;position:relative;">
<div style="position: absolute;width:103px;height:22px;background: #1d4f6d; border-radius: 10px;left:0px;top:0px"></div>
<div style="position: absolute;width:80px;height:14px;background: #36fff9; border-radius: 6px;left:0px;top:0px;margin-top: 4px;margin-left: 3px;"></div>
</div>
</div>
</div>
</div>
</body>
</html>

View File

@ -0,0 +1,226 @@
<%@ 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">
/* 请求数据 */
function getValue() {
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
// console.log(data);
if(data!=''){
var yxTNum=0;
var yxCNum=0;
var sbTNum=0;
var sbCNum=0;
for(var i=0;i<data.length;i++){
if(data[i].elementCode=="yxRate"){
getchart('chart',data[i].valueUrl,'','#36FFF9');
}else if(data[i].elementCode=="sbRate"){
getchart('chart2',data[i].valueUrl,'','#36FFF9');
}else if(data[i].elementCode=="yxTNum"){
yxTNum=data[i].valueUrl;
}else if(data[i].elementCode=="yxCNum"){
yxCNum=data[i].valueUrl;
}else if(data[i].elementCode=="sbTNum"){
sbTNum=data[i].valueUrl;
}else if(data[i].elementCode=="sbCNum"){
sbCNum=data[i].valueUrl;
}
}
$('#yxNum').text(yxCNum+"/"+yxTNum);
$('#sbNum').text(sbCNum+"/"+sbTNum);
var yxZB=(yxCNum*0.75)/yxTNum*100;
$('#yxZB').css("width",yxZB+"%");
var sbZB=(sbCNum*0.75)/sbTNum*100;
$('#sbZB').css("width",sbZB+"%");
}
}, 'json');
}
/* 定时器 */
//setInterval(change, 60000); //每1分钟切换
// setInterval(getValue, 3600000); //每一小时切换
/* 初始化 */
$(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("titleImage").src = ""+getRootPath()+"/images/大屏/大屏标题文字背景.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 getchart(id,value,title,color){
var myChart = echarts.init(document.getElementById(id));
var option = {
title: {
text: value,
textStyle: {
color: '#36FFF9',
fontSize: 30
},
subtext: "%",
subtextStyle: {
color: '#36FFF9',
fontSize: 16
},
itemGap: 0, // 主副标题距离
left: 'center',
top: '40%'
},
angleAxis: {
max: 100, // 满分
clockwise: true, // 逆时针
// 隐藏刻度线
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
splitLine: {
show: false
}
},
radiusAxis: {
type: 'category',
// 隐藏刻度线
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
splitLine: {
show: false
}
},
polar: {
center: ['50%', '50%'],
radius: '120%' //图形大小
},
series: [{
type: 'bar',
data: [{
name: '百分比',
value: value,
itemStyle: {
color: color
},
}],
coordinateSystem: 'polar',
roundCap: true,
barWidth: 12,
barGap: '-100%', // 两环重叠
z: 2
},{ // 灰色环
type: 'bar',
data: [{
value: 100,
itemStyle: {
color: '#1D4F6D',
shadowColor: 'rgba(0, 0, 0, 0.2)',
shadowBlur: 2,
shadowOffsetY: 2
}
}],
coordinateSystem: 'polar',
roundCap: true,
barWidth: 22,
barGap: '-135%', // 两环重叠
z: 1
}]
};
myChart.setOption(option, true);
window.addEventListener("resize", function () {
myChart.resize();
});
}
</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%;">
<div style="float:left;width:100%;height:35px;margin-left: 20px;">
<div style="float:left;width:100%;height:34px;">
<div style="position:absolute;top:12px;left:50px;z-index:999;opacity: 1;font-size: 20px;font-family: Microsoft YaHei, Microsoft YaHei-Regular;margin-left:38px;">巡检管理</div>
<img id="titleImage" src="" style="z-index:998;position:relative;"/>
</div>
</div>
<div style="float:left;width:60%;height:calc((100% - 35px)*0.5);padding-top: 20px;">
<div style="float: left;width: 100%;height:30px;text-align: center;line-height: 30px;color: #ffffff;font-size: 20px;">运行巡检完成率</div>
<div id="chart" style="float: left;width: 100%;height: 200px;"></div>
</div>
<div style="float:left;width:40%;height:calc((100% - 35px)*0.5);padding-top: 20px;">
<div style="float: left;width: 100%;height:30px;text-align: left;line-height: 30px;color: #ffffff;font-size: 20px;">运行工单数</div>
<div id="yxNum" style="float: left;width: 100%;height:60px;text-align: left;line-height: 60px;color: #69f6f9;font-size: 34px;"></div>
<div style="float: left;width: 100%;height:60px;position:relative;">
<div style="position: absolute;width:75%;height:22px;background: #1d4f6d; border-radius: 10px;left:0px;top:0px"></div>
<div id="yxZB" style="position: absolute;width:75%;height:14px; left:0px;top:0px;margin-top: 4px;padding-left: 3px;padding-right: 3px;">
<div style="float: left;width:100%;height:100%;background: #36fff9;border-radius: 6px;"></div>
</div>
</div>
</div>
<div style="float:left;width:60%;height:calc((100% - 35px)*0.5);padding-top: 20px;">
<div style="float: left;width: 100%;height:30px;text-align: center;line-height: 30px;color: #ffffff;font-size: 20px;">设备巡检完成率</div>
<div id="chart2" style="float: left;width: 100%;height: 200px;"></div>
</div>
<div style="float:left;width:40%;height:calc((100% - 35px)*0.5);padding-top: 20px;">
<div style="float: left;width: 100%;height:30px;text-align: left;line-height: 30px;color: #ffffff;font-size: 20px;">设备工单数</div>
<div id="sbNum" style="float: left;width: 100%;height:60px;text-align: left;line-height: 60px;color: #69f6f9;font-size: 34px;"></div>
<div style="float: left;width: 100%;height:60px;position:relative;">
<div style="position: absolute;width:75%;height:22px;background: #1d4f6d; border-radius: 10px;left:0px;top:0px"></div>
<div id="sbZB" style="position: absolute;width:75%;height:14px; left:0px;top:0px;margin-top: 4px;padding-left: 3px;padding-right: 3px;">
<div style="float: left;width:100%;height:100%;background: #36fff9;border-radius: 6px;"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

View File

@ -0,0 +1,360 @@
<%@ 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">
/* 请求数据 */
function getValue() {
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
// console.log(data);
if(data!=''){
for(var i=0;i<data.length;i++){
// if(data[i].elementCode=="yxRate"){
// getchart('chart',data[i].valueUrl,'','#36FFF9');
// }else if(data[i].elementCode=="sbRate"){
// getchart('chart2',data[i].valueUrl,'','#36FFF9');
// }else if(data[i].elementCode=="yxTNum"){
// yxTNum=data[i].valueUrl;
// }else if(data[i].elementCode=="yxCNum"){
// yxCNum=data[i].valueUrl;
// }else if(data[i].elementCode=="sbTNum"){
// sbTNum=data[i].valueUrl;
// }else if(data[i].elementCode=="sbCNum"){
// sbCNum=data[i].valueUrl;
// }
}
}
getChart1('chart1',95,'%','#36FFF9');
var chart2seriesData=[];
chart2seriesData.push({
value:60,
name:'白班'
})
chart2seriesData.push({
value:40,
name:'夜班'
})
getChart2('chart2','100',chart2seriesData);
var chart3dataAxis = ['甲班', '乙班', '丁班', '丙班'];
var chart3seriesData = [220, 182, 191, 234];
getChart3('chart3',chart3dataAxis,chart3seriesData);
}, 'json');
}
/* 定时器 */
//setInterval(change, 60000); //每1分钟切换
// setInterval(getValue, 3600000); //每一小时切换
/* 初始化 */
$(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("titleImage").src = ""+getRootPath()+"/images/大屏/js/标题logo1.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 getChart1(id,value,unit,color){
var myChart = echarts.init(document.getElementById(id));
var option = {
title: {
text: ['{a|'+value+'}','{b| '+unit+'}'].join(''),
x: '36%',
y: '60%',
textStyle: {
rich: {
a: {
color: color,
fontSize: '54',
},
b: {
color: color,
fontSize: '25',
}
}
},
},
angleAxis: {
axisLine: {
show: false
},
axisLabel: {
show: false
},
splitLine: {
show: false
},
axisTick: {
show: false
},
min: 0,
max: 200,
boundaryGap: ['0', '100'],
startAngle: 180
},
radiusAxis: {
type: 'category',
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
data: ['a'],
z: 10
},
polar: {
radius: '230%',
center: ['50%', '85%'],
},
series: [{
type: 'bar',
data: [value],
coordinateSystem: 'polar',
barMaxWidth: 18,
z: 2,
// name: '抢修项目',
roundCap: true,
color: color,
barGap: '-100%',
},
{
type: 'bar',
data: [100],
z: 0,
silent: true,
coordinateSystem: 'polar',
barMaxWidth: 30,
// name: 'C',
roundCap: true,
color: '#1D4F6D',
barGap: '-135%',
}
],
tooltip: {
show: false
},
};
myChart.setOption(option, true);
}
function getChart2(id,totalNum,seriesData){
var myChart = echarts.init(document.getElementById(id));
var option = {
color:['#36E3FF','#828FFF','#9FE080'],
title: {
text: ['{a|完成数}','{b|'+totalNum+'}'].join('\n\n'),
left: 'center',
top: 'center',
textStyle: {
rich: {
a: {
fontSize: '18',
color:'#fff'
},
b: {
fontSize: '54',
color:'#fff'
}
}
}
},
tooltip: {
trigger: 'item'
},
series: [
{
type: 'pie',
radius: ['60%', '75%'],
center: ['50%', '50%'],
itemStyle: {
borderRadius: 10,
borderColor: '#0a0b17',
borderWidth: 2,
},
label: {
show: true,
color:'#fff'
},
labelLine: {
show: true,
length2:2
},
data: seriesData
}
]
}
myChart.setOption(option, true);
}
function getChart3(id,dataAxis,seriesData){
var myChart = echarts.init(document.getElementById(id));
var option = {
xAxis: {
data: dataAxis,
axisLabel: {
textStyle: {
color: '#fff'
}
},
axisTick: {
show: false
},
axisLine: {
show: false
},
z: 10
},
yAxis: {
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
textStyle: {
color: '#999'
}
}
},
series: [
{
type: 'bar',
showBackground: true,
color:'#7CF8FD',
barWidth:20,
itemStyle: {
borderRadius:5
},
// emphasis: {
// itemStyle: {
// color: new echarts.graphic.LinearGradient(
// 0, 0, 0, 1,
// [
// {offset: 0, color: '#2378f7'},
// {offset: 0.7, color: '#2378f7'},
// {offset: 1, color: '#83bff6'}
// ]
// )
// }
// },
data: seriesData
}
]
}
myChart.setOption(option, true);
}
</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%;">
<div style="float:left;width:100%;height:35px;padding-left: 20px;">
<div style="float:left;width:100%;height:34px;position:absolute;">
<div style="position:absolute;top:-4px;left:50px;z-index:999;opacity: 1;font-size: 21px;color:#d9f6fb;font-family:Source Han Sans CN, Source Han Sans CN-Regular;text-shadow:1.5px 1.5px 0 #174749, 1.5px -1.5px 0 #174749, -1.5px -1.5px 0 #174749, -1.5px 1.5px 0 #174749, 1.5px 1px 0 #174749, 1.5px -1px 0 #174749, -1.5px -1px 0 #174749, -1.5px 1px 0 #174749, 1.5px 0px 0 #174749, 1.5px 0px 0 #174749, -1.5px 0px 0 #174749, -1.5px 0px 0 #174749,1px 1.5px 0 #174749, 1px -1.5px 0 #174749, -1px -1.5px 0 #174749, -1px 1.5px 0 #174749, 1px 1px 0 #174749, 1px -1px 0 #174749, -1px -1px 0 #174749, -1px 1px 0 #174749, 1px 0px 0 #174749, 1px 0px 0 #174749, -1px 0px 0 #174749, -1px 0px 0 #174749, 0px 1.5px 0 #174749, 0px -1.5px 0 #174749, 0px -1.5px 0 #174749, 0px 1.5px 0 #174749, 0px 1px 0 #174749, 0px -1px 0 #174749, 0px -1px 0 #174749, 0px 1px 0 #174749;">巡检情况</div>
<img id="titleImage" src="" style="z-index:998;position:relative;"/>
</div>
</div>
<div style="float:left;width:33.3%;height:calc(100% - 35px);padding-left: 20px;">
<div style="float:left;width:100%;height:50px;text-align:center;font-size: 25px;font-family: Microsoft YaHei, Microsoft YaHei-Regular;color: #ffffff;line-height: 30px;padding-top:20px;">
任务完成率
</div>
<div id="chart1" style="float:left;width:100%;height:240px;">
</div>
<div style="float:left;width:100%;height:80px;text-align:center;font-family: Microsoft YaHei, Microsoft YaHei-Regular;padding-top:10px;">
<div style="float:left;width:100%;height:50%;">
<div style="float:left;width:50px;height:100%;font-size: 16px;color: #1CBEC5;line-height:40px;">
完成数
</div>
<div style="float:left;width:calc(100% - 200px);height:100%;color: #ffffff;font-size: 26px;font-family: Source Han Sans CN, Source Han Sans CN-Medium;">
200
</div>
<div style="float:left;width:150px;height:100%;font-size: 16px;color: #1CBEC5;line-height:40px;">
常规180/临时20
</div>
</div>
<div style="float:left;width:100%;height:50%;">
<div style="float:left;width:50px;height:100%;font-size: 16px;color: #1CBEC5;line-height:40px;">
总数
</div>
<div style="float:left;width:calc(100% - 200px);height:100%;color: #ffffff;font-size: 26px;font-family: Source Han Sans CN, Source Han Sans CN-Medium;">
200
</div>
<div style="float:left;width:150px;height:100%;font-size: 16px;color: #1CBEC5;line-height:40px;">
常规180/临时20
</div>
</div>
</div>
</div>
<div style="float:left;width:33.3%;height:calc(100% - 35px);padding-left: 20px;">
<div style="float:left;width:100%;height:50px;text-align:center;font-size: 25px;font-family: Microsoft YaHei, Microsoft YaHei-Regular;color: #ffffff;line-height: 30px;padding-top:20px;">
班组巡检统计
</div>
<div id="chart2" style="float:left;width:100%;height:300px;">
</div>
</div>
<div style="float:left;width:33.3%;height:calc(100% - 35px);padding-left: 20px;">
<div id="chart3" style="float:left;width:100%;height:420px;">
</div>
</div>
</div>
</div>
</body>
</html>

View File

@ -0,0 +1,77 @@
<%@ 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">
/* 请求数据 */
function getValue() {
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
// console.log(data);
if(data!=''){
for(var i=0;i<data.length;i++){
if(data[i].elementCode=="img"){
var url=data[i].valueUrl;
document.getElementById("Image").src = ""+getRootPath()+""+url+"";
// $('#Image').css("background","url("+getRootPath()+""+url+") no-repeat 0px 0px");
// $('#Image').css("background-size","contain");
}
}
}
}, 'json');
}
/* 定时器 */
//setInterval(change, 60000); //每1分钟切换
// setInterval(getValue, 3600000); //每一小时切换
/* 初始化 */
$(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";
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;
}
</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%;margin-top: 10px;">
<img id="Image" src="" style="z-index:998;position:relative;width:100%;height:100%"/>
</div>
</body>
</html>

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,198 @@
<%@ 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">
/* 请求数据 */
function getValue() {
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
// console.log(data);
if(data!=''){
var table1Html1="";
var table2Html1="";
var table1Html2="";
var table2Html2="";
var table3Html2="";
var table4Html2="";
for(var i=0;i<data.length;i++){
if(data[i].elementCode=="DO"){
if(data[i].getValueType=="getText"){
table1Html1+="<td style=\"color: #ffffff;\">"+numOutput(data[i].valueUrl)+"</td>";
}else if(data[i].getValueType=="getValue"){
table1Html1+="<td style=\"color: #ffffff;\">"+numOutput(data[i].mPoint.parmvalue)+"</td>";
}
}else if(data[i].elementCode=="MLSS"){
if(data[i].getValueType=="getText"){
table2Html1+="<td style=\"color: #ffffff;\">"+numOutput(data[i].valueUrl)+"</td>";
}else{
table2Html1+="<td style=\"color: #ffffff;\">"+numOutput(data[i].mPoint.parmvalue)+"</td>";
}
}else if(data[i].elementCode=="PAC"){
if(data[i].getValueType=="getText"){
table1Html2+="<td style=\"color: #ffffff;\">"+numOutput(data[i].valueUrl)+"</td>";
}else{
table1Html2+="<td style=\"color: #ffffff;\">"+numOutput(data[i].mPoint.parmvalue)+"</td>";
}
}else if(data[i].elementCode=="PAM"){
if(data[i].getValueType=="getText"){
table2Html2+="<td style=\"color: #ffffff;\">"+numOutput(data[i].valueUrl)+"</td>";
}else{
table2Html2+="<td style=\"color: #ffffff;\">"+numOutput(data[i].mPoint.parmvalue)+"</td>";
}
}else if(data[i].elementCode=="含氯杀菌剂"){
if(data[i].getValueType=="getText"){
table3Html2+="<td style=\"color: #ffffff;\">"+numOutput(data[i].valueUrl)+"</td>";
}else{
table3Html2+="<td style=\"color: #ffffff;\">"+numOutput(data[i].mPoint.parmvalue)+"</td>";
}
}else if(data[i].elementCode=="脱水药剂"){
if(data[i].getValueType=="getText"){
table4Html2+="<td style=\"color: #ffffff;\">"+numOutput(data[i].valueUrl)+"</td>";
}else{
table4Html2+="<td style=\"color: #ffffff;\">"+numOutput(data[i].mPoint.parmvalue)+"</td>";
}
}
}
}
var tableHtml1="";
tableHtml1+="<tr style=\"font-size: 16px;color: #dbeeff;text-align: center;height:30px;\">";
tableHtml1+="<td style=\"width:40px;\"></td>";
tableHtml1+="<td style=\"width:128px;\">1#生反池</td>";
tableHtml1+="<td style=\"width:128px;\">2#生反池</td>";
tableHtml1+="</tr>";
tableHtml1+="<tr style=\"font-size: 16px;text-align: center;height:30px;\">";
tableHtml1+="<td style=\"color: #1CBEC5;\">DO\</td>";
tableHtml1+=table1Html1;
tableHtml1+="</tr>";
tableHtml1+="<tr style=\"font-size: 16px;text-align: center;height:30px;\">";
tableHtml1+="<td style=\"color: #1CBEC5;\">MLSS\</td>";
tableHtml1+=table2Html1;
tableHtml1+="</tr>";
tableHtml1+="<tr style=\"font-size: 16px;color: #1CBEC5;text-align: center;height:30px;\">";
tableHtml1+="<td >\</td>";
tableHtml1+="<td >\</td>";
tableHtml1+="</tr>";
tableHtml1+="<tr style=\"font-size: 16px;color: #1CBEC5;text-align: center;height:30px;\">";
tableHtml1+="<td >\</td>";
tableHtml1+="<td >\</td>";
tableHtml1+="</tr>";
tableHtml1+="<tr style=\"font-size: 16px;color: #1CBEC5;text-align: center;height:30px;\">";
tableHtml1+="<td >\</td>";
tableHtml1+="<td >\</td>";
tableHtml1+="</tr>";
$('#table1').html(tableHtml1);
var tableHtml2="";
tableHtml2+="<tr style=\"font-size: 16px;color: #dbeeff;text-align: center;height:30px;\">";
tableHtml2+="<td style=\"width:60px;\"></td>";
tableHtml2+="<td style=\"width:128px;\">当前投加量</td>";
tableHtml2+="<td style=\"width:128px;\">平均投加量</td>";
tableHtml2+="</tr>";
tableHtml2+="<tr style=\"font-size: 16px;color: #1CBEC5;text-align: center;height:30px;\">";
tableHtml2+="<td >PAC\</td>";
tableHtml2+=table1Html2;
tableHtml2+="</tr>";
tableHtml2+="<tr style=\"font-size: 16px;color: #1CBEC5;text-align: center;height:30px;\">";
tableHtml2+="<td >PAM\</td>";
tableHtml2+=table2Html2;
tableHtml2+="</tr>";
tableHtml2+="<tr style=\"font-size: 16px;color: #1CBEC5;text-align: center;height:30px;\">";
tableHtml2+="<td >含氯杀菌剂\</td>";
tableHtml2+=table3Html2;
tableHtml2+="</tr>";
tableHtml2+="<tr style=\"font-size: 16px;color: #1CBEC5;text-align: center;height:30px;\">";
tableHtml2+="<td >脱水药剂\</td>";
tableHtml2+=table4Html2;
tableHtml2+="</tr>";
tableHtml2+="<tr style=\"font-size: 16px;color: #1CBEC5;text-align: center;height:30px;\">";
tableHtml2+="<td >\</td>";
tableHtml2+="<td >\</td>";
tableHtml2+="</tr>";
$('#table2').html(tableHtml2);
}, 'json');
}
/* 定时器 */
setInterval(getValue, 300000); //每5分钟切换
// setInterval(getValue, 3600000); //每一小时切换
/* 初始化 */
$(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("titleImage").src = ""+getRootPath()+"/images/大屏/js/标题logo1.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;
}
</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:20px;padding-left:10px;padding-right:10px;">
<div style="height:100%;width:100%;">
<div style="float:left;width:100%;height:35px;padding-left: 20px;">
<div style="float:left;width:100%;height:34px;position:absolute;">
<div style="position:absolute;top:-4px;left:50px;z-index:999;opacity: 1;font-size: 21px;color:#d9f6fb;font-family:Source Han Sans CN, Source Han Sans CN-Regular;text-shadow:1.5px 1.5px 0 #174749, 1.5px -1.5px 0 #174749, -1.5px -1.5px 0 #174749, -1.5px 1.5px 0 #174749, 1.5px 1px 0 #174749, 1.5px -1px 0 #174749, -1.5px -1px 0 #174749, -1.5px 1px 0 #174749, 1.5px 0px 0 #174749, 1.5px 0px 0 #174749, -1.5px 0px 0 #174749, -1.5px 0px 0 #174749,1px 1.5px 0 #174749, 1px -1.5px 0 #174749, -1px -1.5px 0 #174749, -1px 1.5px 0 #174749, 1px 1px 0 #174749, 1px -1px 0 #174749, -1px -1px 0 #174749, -1px 1px 0 #174749, 1px 0px 0 #174749, 1px 0px 0 #174749, -1px 0px 0 #174749, -1px 0px 0 #174749, 0px 1.5px 0 #174749, 0px -1.5px 0 #174749, 0px -1.5px 0 #174749, 0px 1.5px 0 #174749, 0px 1px 0 #174749, 0px -1px 0 #174749, 0px -1px 0 #174749, 0px 1px 0 #174749;">运行数据</div>
<img id="titleImage" src="" style="z-index:998;position:relative;"/>
</div>
</div>
<div style="float:left;width:100%;height:calc(100% - 35px);padding-left: 20px;padding-top: 50px;padding-bottom: 20px;">
<div style="float:left;width:40%;height:100%;border-right:1px solid #DCDCDC;">
<table id="table1" style="width:100%;height:100%;">
</table>
</div>
<div style="float:left;width:60%;height:100%;border-right:1px solid #DCDCDC;padding-left:5px;">
<table id="table2" style="width:100%;height:100%;">
</table>
</div>
</div>
</div>
</div>
</body>
</html>

View File

@ -0,0 +1,106 @@
<%@ 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">
//获取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;
}
//获取url地址根目录 当前taomcat下路径
function getRootPath2(){
var pathName = window.location.pathname.substring(1);
var webName = pathName == '' ? '' : pathName.substring(0, pathName.indexOf('/'));
return window.location.protocol + '//' + window.location.host +"/"+webName;
}
var mychart="";
/* 请求数据 */
function getValue() {
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
if(data!=null&&data.length>0){
var texthtml="";
for(var i=0;i<data.length;i++){
if(data[i].elementCode=="img"){
var url=data[i].valueUrl;
$('#backImage').css("background","url("+getRootPath()+""+url+") no-repeat");
$('#backImage').css("background-size","contain");
// document.getElementById("backImage").src = ""+getRootPath()+""+url+"";
}
// else if(data[i].elementCode=="text"){
// var color="#00D8FF";
// var unit="";
// var pv;
// if(i==1){
// color="#00D8FF";
// unit="万吨";
// pv=(data[i].mPoint.parmvalue/10000).toFixed(1)
// }else if(i==2){
// color="#FF9429";
// unit="t";
// pv=data[i].mPoint.parmvalue;
// }
// texthtml+="<div style='float: left;width: 100%;height: 50%;'>";
// texthtml+="<div style='float: left;width: 100%;height: 50%;font-size:24px;font-family: Helvetica;text-align: center;color: #ffffff;line-height:80px;'>"+data[i].name+"</div>";
// texthtml+="<div style='float: left;width: 100%;height: 50%;font-size:26px;font-family: Helvetica;text-align: center;color:"+color+";line-height:45px;'>"+pv+" "+unit+"</div>";
// texthtml+="</div>";
// }
}
$('#text').html(texthtml);
}
}, 'json');
}
/* 定时器 */
//setInterval(change, 60000); //每1分钟切换
setInterval(getValue, 3600000); //每一小时切换
/* 初始化 */
$(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-15) + "px";
getValue();
//console.log("height",document.body.scrollHeight);
});
</script>
</head>
<body style="width:100%;height:100%;margin:0;padding:0;overflow-x:hidden;overflow-y:hidden">
<div style="height:100%;width:100%;">
<div id="main" style="height:100%;width:100%;padding:0px;background:rgba(19,32,85,0.27);border-radius: 8px;">
<div id="backImage" style='float:left;width:100%;height:100%;'></div>
<!-- <div id="text" style='position: absolute;width: 220px;height: 250px;left: 20px;
top: 20px;background:rgba(43,102,169,0.5);border-radius: 24px;'>
</div> -->
</div>
</div>
</body>
</html>

View File

@ -0,0 +1,67 @@
<%@ 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页-->
<script type="text/javascript">
/* 请求数据 */
function getbigScreen_processDrawing2Value() {
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
if(data!=''){
for(var i=0;i<data.length;i++){
if(data[i].elementCode=="img"){
var url=data[i].valueUrl;
$('#bigScreen_processDrawing2backImage').css("background","url("+getRootPath()+""+url+") no-repeat 0px 0px");
$('#bigScreen_processDrawing2backImage').css("background-size","cover");
}
}
}
}, 'json');
}
/* 定时器 */
//setInterval(change, 60000); //每1分钟切换
// setInterval(getValue, 3600000); //每一小时切换
/* 初始化 */
$(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";
getbigScreen_processDrawing2Value();
//console.log("height",document.body.scrollHeight);
});
</script>
</head>
<body style="width:100%;height:100%;margin:0;padding:0;overflow-x:hidden;overflow-y:hidden">
<div id="bigScreen_processDrawing2main" style="height:100%;width:100%;padding-top:10px;">
<div style="height:100%;width:100%;background:#16314c;border-radius: 8px;">
<div id="bigScreen_processDrawing2backImage" style='float:left;width:100%;height:100%;'></div>
</div>
</div>
</body>
</html>

View File

@ -0,0 +1,170 @@
<%@ 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">
/* 请求数据 */
function getValue() {
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
if(data!=''){
var table1Num=0;
var table1Html = "";
var table2Num=0;
var table2Html = "";
for(var i=0;i<data.length;i++){
if(data[i].elementCode=="img"){
document.getElementById("Image3").src = ""+getRootPath()+""+data[i].valueUrl+"";
}else if(data[i].elementCode=="table1"){
var td = "<td style='width: 13%;color: #dbeeff;font-size: 16px;'>"+data[i].name+"</td>";
var td2 = "<td style='width: 20.3%;color: #69f6f9;font-size: 16px;'>"+data[i].mPoint.parmvalue+" "+data[i].mPoint.unit+"</td>";
// if(table1Num%3==0){
// table1Html+="<tr>";
// table1Html+=td;
// table1Html+=td2;
// }else if(table1Num%3==2){
// table1Html+=td;
// table1Html+=td2;
// table1Html+="</tr>";
// }else{
// table1Html+=td;
// table1Html+=td2;
// }
if(table1Num%2==0){
table1Html+="<tr>";
table1Html+=td;
table1Html+=td2;
}else if(table1Num%2==1){
table1Html+=td;
table1Html+=td2;
table1Html+="</tr>";
}
table1Num++;
}else if(data[i].elementCode=="table2"){
var td = "<td style='width: 13%;color: #dbeeff;font-size: 16px;'>"+data[i].name+"</td>";
var td2 = "<td style='width: 20.3%;color: #69f6f9;font-size: 16px;'>"+data[i].mPoint.parmvalue+" "+data[i].mPoint.unit+"</td>";
// if(table2Num%3==0){
// table2Html+="<tr>";
// table2Html+=td;
// table2Html+=td2;
// }else if(table2Num%3==2){
// table2Html+=td;
// table2Html+=td2;
// table2Html+="</tr>";
// }else{
// table2Html+=td;
// table2Html+=td2;
// }
if(table2Num%2==0){
table2Html+="<tr>";
table2Html+=td;
table2Html+=td2;
}else if(table2Num%2==1){
table2Html+=td;
table2Html+=td2;
table2Html+="</tr>";
}
table2Num++;
}
}
$("#table1").html(table1Html);
$("#table2").html(table2Html);
}
}, 'json');
}
/* 定时器 */
setInterval(getValue, 300000); //每5分钟切换
// setInterval(getValue, 3600000); //每一小时切换
/* 初始化 */
$(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;
}
</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:30px;padding-left:10px;padding-right:10px;">
<div style="height:100%;width:100%;">
<div style="float:left;width:100%;height:92px;background: #023354;border-radius: 10px;">
<div style="float:left;width:80px;height:100%;">
<div style="float:left;width:80px;height:60px;padding-left: 18px;padding-right: 18px;padding-top: 19px;">
<img id="Image1" src="" style="z-index:998;position:relative;height:100%;width:100%;"/>
</div>
<div style="float:left;width:80px;height:32px;padding-top:5px;text-align: center;color: #dbeeff;font-size: 16px;">
原水水质
</div>
</div>
<div style="float:left;width:calc((100% - 160px)*0.5);height:100%;">
<table id="table1" style="width: 100%;height: 100%;">
</table>
</div>
<div style="float:left;width:80px;height:100%;">
<div style="float:left;width:80px;height:60px;padding-left: 18px;padding-right: 18px;padding-top: 19px;">
<img id="Image2" src="" style="z-index:998;position:relative;height:100%;width:100%;"/>
</div>
<div style="float:left;width:80px;height:32px;padding-top:5px;text-align: center;color: #dbeeff;font-size: 16px;">
出水水质
</div>
</div>
<div style="float:left;width:calc((100% - 160px)*0.5);height:100%;">
<table id="table2" style="width: 100%;height: 100%;">
</table>
</div>
</div>
<div style="float:left;width:100%;height:430px;margin-top: 20px;">
<img id="Image3" src="" style="z-index:998;position:relative;height:100%;width:100%;"/>
</div>
</div>
</div>
</body>
</html>

View File

@ -0,0 +1,175 @@
<%@ 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">
/* 请求数据 */
function getValue() {
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
if(data!=''){
var table1Html="";
var table2Html="";
for(var i=0;i<data.length;i++){
if(data[i].elementCode=="img"){
document.getElementById("Image3").src = ""+getRootPath()+""+data[i].valueUrl+"";
}else if(data[i].elementCode=="table1"){
if(data[i].getValueType=="getText"){
table1Html+="<td >"+data[i].valueUrl+"</td>";
}else if(data[i].getValueType=="getValue"){
table1Html+="<td >"+data[i].mPoint.parmvalue+"</td>";
}
}else if(data[i].elementCode=="table2"){
if(data[i].getValueType=="getText"){
table2Html+="<td >"+data[i].valueUrl+"</td>";
}else{
table2Html+="<td >"+data[i].mPoint.parmvalue+"</td>";
}
}
}
var tableHtml="";
tableHtml+="<tr style=\"font-size: 16px;color: #dbeeff;text-align: center;\">";
tableHtml+="<td style=\"width:40px;\"></td>";
tableHtml+="<td style=\"width:128px;\">瞬时流量(m3/h)</td>";
tableHtml+="<td style=\"width:128px;\">昨日累计(m3)</td>";
tableHtml+="<td style=\"width:128px;\">今日累计(m3)</td>";
tableHtml+="<td style=\"width:128px;\">COD(m3/h)</td>";
tableHtml+="<td style=\"width:128px;\">PH</td>";
tableHtml+="<td style=\"width:128px;\">氨氮(mg/l)</td>";
tableHtml+="<td style=\"width:128px;\">TN(mg/l)</td>";
tableHtml+="<td style=\"width:128px;\">TP(mg/l)</td>";
tableHtml+="</tr>";
tableHtml+="<tr style=\"font-size: 16px;color: #b584ff;text-align: center;\">";
tableHtml+="<td >进水</td>";
tableHtml+=table1Html;
tableHtml+="</tr>";
tableHtml+="<tr style=\"font-size: 16px;color: #69F6F9;text-align: center;\">";
tableHtml+="<td >出水</td>";
tableHtml+=table2Html;
tableHtml+="</tr>";
$('#table').html(tableHtml);
// <tr style="font-size: 16px;color: #dbeeff;text-align: center;">
// <td style="width:40px;"></td>
// <td style="width:128px;">瞬时流量(m3/h)</td>
// <td style="width:128px;">昨日累计(m3)</td>
// <td style="width:128px;">今日累计(m3)</td>
// <td style="width:128px;">COD(mg/l)</td>
// <td style="width:128px;">PH</td>
// <td style="width:128px;">氨氮(mg/l)</td>
// <td style="width:128px;">TN(mg/l)</td>
// <td style="width:128px;">TP(mg/l)</td>
// </tr>
// <tr style="font-size: 16px;color: #b584ff;text-align: center;">
// <td >进水</td>
// </tr>
// <tr style="font-size: 16px;color: #69F6F9;text-align: center;">
// <td >出水</td>
// </tr>
}
}, 'json');
}
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方法用.进行拼接
}
/* 定时器 */
setInterval(getValue, 300000); //每5分钟切换
// setInterval(getValue, 3600000); //每一小时切换
/* 初始化 */
$(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("Image").src = ""+getRootPath()+"/images/大屏/水质logo.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;
}
</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:30px;padding-left:10px;padding-right:10px;">
<div style="height:100%;width:100%;">
<div style="float:left;width:100%;height:92px;background: #023354;border-radius: 10px;">
<!-- <div style="float:left;width:80px;height:100%;">
<div style="float:left;width:80px;height:60px;padding-left: 18px;padding-right: 18px;padding-top: 19px;">
<img id="Image1" src="" style="z-index:998;position:relative;height:100%;width:100%;"/>
</div>
<div style="float:left;width:80px;height:32px;padding-top:5px;text-align: center;color: #dbeeff;font-size: 16px;">
原水水质
</div>
</div>
<div style="float:left;width:calc((100% - 160px)*0.5);height:100%;">
<table id="table1" style="width: 100%;height: 100%;">
</table>
</div>
<div style="float:left;width:80px;height:100%;">
<div style="float:left;width:80px;height:60px;padding-left: 18px;padding-right: 18px;padding-top: 19px;">
<img id="Image2" src="" style="z-index:998;position:relative;height:100%;width:100%;"/>
</div>
<div style="float:left;width:80px;height:32px;padding-top:5px;text-align: center;color: #dbeeff;font-size: 16px;">
出水水质
</div>
</div>
<div style="float:left;width:calc((100% - 160px)*0.5);height:100%;">
<table id="table2" style="width: 100%;height: 100%;">
</table>
</div> -->
<div style="float:left;width:100px;height:100%;padding-left: 18px;padding-right: 18px;padding-top: 19px;">
<img id="Image" src="" style="z-index:998;position:relative;"/>
</div>
<div style="float:left;width:calc(100% - 100px);height:100%;">
<table id="table" style="width:100%;height:100%;">
</table>
</div>
</div>
<div style="float:left;width:100%;height:500px;margin-top: 10px;">
<img id="Image3" src="" style="z-index:998;position:relative;width:100%;height:100%"/>
</div>
</div>
</div>
</body>
</html>

View File

@ -0,0 +1,367 @@
<%@ 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>

View File

@ -0,0 +1,118 @@
<%@ 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">
/* 请求数据 */
function getValue() {
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
if(data!=''){
var table1Html="";
var table2Html="";
for(var i=0;i<data.length;i++){
if(data[i].elementCode=="img"){
document.getElementById("Image").src = ""+getRootPath()+""+data[i].valueUrl+"";
}else if(data[i].elementCode=="in"){
if(data[i].getValueType=="getText"){
table1Html+="<td style=\"color: #ffffff;\">"+numOutput(data[i].valueUrl)+"</td>";
}else if(data[i].getValueType=="getValue"){
table1Html+="<td style=\"color: #ffffff;\">"+numOutput(data[i].mPoint.parmvalue)+"</td>";
}
}else if(data[i].elementCode=="out"){
if(data[i].getValueType=="getText"){
table2Html+="<td style=\"color: #ffffff;\">"+numOutput(data[i].valueUrl)+"</td>";
}else{
table2Html+="<td style=\"color: #ffffff;\">"+numOutput(data[i].mPoint.parmvalue)+"</td>";
}
}
}
}
var tableHtml="";
tableHtml+="<tr style=\"font-size: 18px;color: #dbeeff;text-align: center;\">";
tableHtml+="<td style=\"width:40px;\">水质</td>";
tableHtml+="<td style=\"width:128px;\">COD</td>";
tableHtml+="<td style=\"width:128px;\">NH3_N</td>";
tableHtml+="<td style=\"width:128px;\">pH</td>";
tableHtml+="<td style=\"width:128px;\">TP(m3/h)</td>";
tableHtml+="<td style=\"width:128px;\">TN</td>";
tableHtml+="<td style=\"width:128px;\">瞬时流量</td>";
tableHtml+="<td style=\"width:128px;\">今日累计</td>";
tableHtml+="<td style=\"width:128px;\">昨日累计</td>";
tableHtml+="</tr>";
tableHtml+="<tr style=\"font-size: 18px;text-align: center;\">";
tableHtml+="<td style=\"color: #1CBEC5;\">进\</td>";
tableHtml+=table1Html;
tableHtml+="</tr>";
tableHtml+="<tr style=\"font-size: 18px;color: #1CBEC5;text-align: center;\">";
tableHtml+="<td style=\"color: #1CBEC5;\">出\</td>";
tableHtml+=table2Html;
tableHtml+="</tr>";
$('#table').html(tableHtml);
}, 'json');
}
/* 定时器 */
setInterval(getValue, 300000); //每5分钟切换
// setInterval(getValue, 3600000); //每一小时切换
/* 初始化 */
$(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";
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;
}
</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:30px;padding-left:10px;padding-right:10px;">
<div style="height:100%;width:100%;">
<div style="float:left;width:100%;height:120px;">
<div style="float:left;width:100%;height:100%;">
<table id="table" style="width:100%;height:100%;">
</table>
</div>
</div>
<div style="float:left;width:100%;height:calc(100% - 120px);margin-top: 10px;">
<img id="Image" src="" style="z-index:998;position:relative;width:100%;height:100%;"/>
</div>
</div>
</div>
</body>
</html>

View File

@ -0,0 +1,248 @@
<%@ 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">
//获取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 getLocalTime(nS) {
return new Date(parseInt(nS) * 1000).toLocaleString().replace(/:\d{1,2}$/,' ');
}
var color=[
"#2ec7c9",
"#b6a2de",
"#5ab1ef",
"#ffb980",
"#d87a80",
"#8d98b3",
"#e5cf0d",
"#97b552",
"#95706d",
"#dc69aa",
"#07a2a4",
"#9a7fd1",
"#588dd5",
"#f5994e",
"#c05050",
"#59678c",
"#c9ab00",
"#7eb00a",
"#6f5553",
"#c14089"
];
var mychart="";
/* 请求数据 */
function getValue() {
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
// console.log(data);
if(data!=null&&data.length>0){
var series=[];
var legenddata=[];
var seriesData=[];
var linenum=0;
for(var i=0;i<data.length;i++){
if(data[i].elementCode=="line"){
seriesData.push(data[i].mPointHistory);
legenddata.push(data[i].name);
series.push({
// data:data[i].mPointHistory,
symbol:'none',
name:data[i].name,
type:'line'
});
linenum++;
}
}
mychart=echarts.init(document.getElementById('chart'));
var option = {
color:color,
animation:false,
legend: {
data: legenddata,
left:'10%',
// padding:[
// 15, // 上
// 15, // 右
// 15, // 下
// 15 // 左
// ],
textStyle:{
color:'#FFFFFF'
}
},
grid:{
left: '4%', // 与容器左侧的距离
// right: '1%', // 与容器右侧的距离
top: '15%', // 与容器顶部的距离
bottom: '5%', // 与容器底部的距离
containLabel:true
},
xAxis: {
type: 'time',
axisLabel: {
show: true,
textStyle: {
color: '#FFFFFF' //更改坐标轴文字颜色
},
// formatter:function(val){
// var timestring=String(val).substring(0,11);
// console.log(getLocalTime(timestring));
// // console.log(getLocalTime(val.substring(0,11)));
// return getLocalTime(timestring);
// }
},
axisLine:{
show:false,
lineStyle:{
color:'#FFFFFF' //更改坐标轴颜色
}
},
axisTick: {
show: false
},
splitLine: {
show: false//是否显示分隔线。默认数值轴显示,类目轴不显示。
}
},
yAxis: {
type : 'value',
name : false,
axisLabel: {
show: true,
textStyle: {
color: '#FFFFFF' //更改坐标轴文字颜色
}
},
axisLine:{
show:false,
lineStyle:{
color:'#FFFFFF' //更改坐标轴颜色
}
},
axisTick: {
show: false
},
splitLine: {
show: true,//是否显示分隔线。默认数值轴显示,类目轴不显示。
lineStyle:{
color:'#262952',
type:'dashed'
}
},
scale:true//设置成 true 后坐标刻度不会强制包含零刻度。
},
series: series
};
// console.log(option);
mychart.setOption(option,true);
appendDataToChart(seriesData);
var textnum=data.length-linenum;
var textHtml="";
var unit="";
var ctextnum=0;
for(var m=0;m<data.length;m++){
if(data[m].elementCode!="line"){
if(ctextnum==0){
unit="";
}else if(ctextnum==1){
unit="%";
}else if(ctextnum==2){
unit="%";
}
textHtml+="<div style='float:left;width:100%;height: calc((100vh - 60px - 15px)/"+textnum+");'>";
textHtml+="<div style='float:left;width:100%;height: calc((100vh - 60px - 15px)/"+textnum+"/2);line-height: calc((100vh - 60px - 15px)/"+textnum+"/2);font-size: 20px;font-family: Helvetica;text-align: center;color: #ffffff;'>"+data[m].name+"</div>";
textHtml+="<div style='float:left;width:100%;height: calc((100vh - 60px - 15px)/"+textnum+"/2);line-height: calc((100vh - 60px - 15px)/"+textnum+"/2);font-size: 24px;font-family: Helvetica;text-align: center;color: #69F6F9;'>"+(data[m].mPoint.parmvalue).toFixed(1)+""+unit+"</div>";
// textHtml+="";
textHtml+="</div>";
ctextnum++;
}
}
$('#text').html(textHtml);
}
}, 'json');
}
function appendDataToChart(seriesData){
if(seriesData!=null&&seriesData.length>0){
for(var i=0;i<seriesData.length;i++){
var data=[];
for(var j=0;j<seriesData[i].length;j++){
var datas=[];
datas.push(seriesData[i][j].measuredt);
datas.push(seriesData[i][j].parmvalue);
data.push(datas);
}
mychart.appendData({
seriesIndex:i,
data:data
});
mychart.resize();
// console.log(data);
}
}
// console.log(seriesData);
}
/* 定时器 */
//setInterval(change, 60000); //每1分钟切换
setInterval(getValue, 3600000); //每一小时切换
/* 初始化 */
$(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-15) + "px";
document.getElementById("backImage").src = ""+getRootPath()+"/images/大屏/工艺参数.png";
getValue();
//console.log("height",document.body.scrollHeight);
});
</script>
</head>
<body style="width:100%;height:100%;margin:0;padding:0;overflow-x:hidden;overflow-y:hidden">
<div style="height:100%;width:100%;padding-top:15px;">
<div id="main" style="height:100%;width:100%;background:rgba(19,32,85,0.27);border-radius: 8px;">
<div style='float:left;width:50%;height:60px;'><img id="backImage" src="" style="z-index:-1;position:relative;height:100%;width: 100%;"/></div>
<div id="chart" style="float:left;width:70%;height: calc(100vh - 60px - 15px);"></div>
<div id="text" style="float:left;width:30%;height: calc(100vh - 60px - 15px);"></div>
</div>
</div>
</body>
</html>

View File

@ -0,0 +1,84 @@
<%@ 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页-->
<script type="text/javascript">
/* 请求数据 */
function getbigScreen_productionDataValue() {
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
if(data!=''){
// console.log(data);
var html="";
for(var i=0;i<data.length;i++){
if(i<16){
var topStyle="";
if(i==6||i==11){
topStyle="border-top:1px solid #BDF9FF;";
}
var pv=0;
if(data[i].mPoint!=null){
pv=data[i].mPoint.parmvalue;
}
html+="<div style='float:left;width:100%;height:calc(100%/16);'>";
html+="<div onclick=\"showHis('"+data[i].valueUrl+"','"+data[i].unitId+"');\" title='"+data[i].name+"' style='cursor: pointer;float:left;width:60%;height:100%;line-height:calc(300%);color: #6998c3;overflow:hidden;text-overflow: ellipsis;white-space:nowrap;"+topStyle+"'>"+data[i].name+"</div>";
html+="<div onclick=\"showHis('"+data[i].valueUrl+"','"+data[i].unitId+"');\" title='"+pv+"' style='cursor: pointer;float:left;width:40%;height:100%;line-height:calc(300%);text-align:right;color: #ffffff;overflow:hidden;text-overflow: ellipsis;white-space:nowrap;"+topStyle+"'>"+numOutput(pv)+"</div>";
html+="</div>";
}
}
$('#bigScreen_productionDatabackImagedata').html(html);
}
}, 'json');
}
/* 定时器 */
//setInterval(change, 60000); //每1分钟切换
setInterval(getbigScreen_productionDataValue, 300000); //每5分钟切换
/* 初始化 */
$(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("bigScreen_productionDatabackImage").src = ""+getRootPath()+"/images/大屏/生产数据.png";
getbigScreen_productionDataValue();
//console.log("height",document.body.scrollHeight);
});
</script>
</head>
<body style="width:100%;height:100%;margin:0;padding:0;overflow-x:hidden;overflow-y:hidden">
<div id="bigScreen_productionDatamain" style="height:100%;width:100%;padding-top:10px;padding-left:10px;padding-right:10px;">
<div style="height:100%;width:100%;background:#16314c;border-radius: 8px;">
<div style="float: left;width: 100%;height:40px;">
<div style="float: left;width:22px;height:24px;line-height:40px;text-align:center;margin-left: 20px;"><img id="bigScreen_productionDatabackImage" src="" style="z-index:999;position:relative;height:100%;width:100%;"/></div>
<div style="float: left;height:40px;line-height:40px;text-align:left;padding-left: 25px;font-size: 20px;color: #8ac2f6;font-family: SimHei;">生产数据</div>
</div>
<div id="bigScreen_productionDatabackImagedata" style="float: left;width: 100%;height:calc(100% - 40px);padding-left:10px;padding-right:10px;"></div>
</div>
</div>
</body>
</html>

View File

@ -0,0 +1,211 @@
<%@ 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">
/* 请求数据 */
function getValue() {
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
// console.log(data);
if(data!=''){
var todayWater="";
for(var i=0;i<data.length;i++){
if(data[i].elementCode=="todayWater"){
if(data[i].mPointHistory.length>0){
if(data[i].mPointHistory[0]!=null){
$("#todayWater").text(((data[i].mPointHistory[0].parmvalue)/10000).toFixed(2));
todayWater=data[i].mPointHistory[0].parmvalue;
}
}
}
}
getchart('chart',(Number(todayWater)/(1000000/24)*100).toFixed(1),'','#36FFF9');
}
}, 'json');
}
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方法用.进行拼接
}
/* 定时器 */
//setInterval(change, 60000); //每1分钟切换
setInterval(getValue, 3600000); //每一小时切换
/* 初始化 */
$(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("titleImage").src = ""+getRootPath()+"/images/大屏/大屏标题文字背景.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 getchart(id,value,title,color){
var myChart = echarts.init(document.getElementById(id));
var option = {
title: {
text: value,
textStyle: {
color: '#36FFF9',
fontSize: 20
},
subtext: "%",
subtextStyle: {
color: '#36FFF9',
fontSize: 14
},
itemGap: 4, // 主副标题距离
left: 'center',
top: '35%'
},
angleAxis: {
max: 100, // 满分
clockwise: true, // 逆时针
// 隐藏刻度线
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
splitLine: {
show: false
}
},
radiusAxis: {
type: 'category',
// 隐藏刻度线
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
splitLine: {
show: false
}
},
polar: {
center: ['50%', '50%'],
radius: '130%' //图形大小
},
series: [{
type: 'bar',
data: [{
name: '百分比',
value: value,
itemStyle: {
color: color
},
}],
coordinateSystem: 'polar',
roundCap: true,
barWidth: 8,
barGap: '-100%', // 两环重叠
z: 2
},{ // 灰色环
type: 'bar',
data: [{
value: 100,
itemStyle: {
color: '#1D4F6D',
shadowColor: 'rgba(0, 0, 0, 0.2)',
shadowBlur: 2,
shadowOffsetY: 2
}
}],
coordinateSystem: 'polar',
roundCap: true,
barWidth: 14,
barGap: '-130%', // 两环重叠
z: 1
}]
};
myChart.setOption(option, true);
window.addEventListener("resize", function () {
myChart.resize();
});
}
</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%;">
<div style="float:left;width:100%;height:35px;margin-left: 20px;">
<div style="float:left;width:194px;height:34px;">
<div style="position:absolute;top:12px;left:50px;z-index:999;opacity: 1;font-size: 20px;font-family: Microsoft YaHei, Microsoft YaHei-Regular;margin-left:20px;">运行管理</div>
<img id="titleImage" src="" style="z-index:998;position:relative;height:100%;width:100%;"/>
</div>
</div>
<div style="float:left;width:100%;height:calc(100% - 35px);padding-top: 10px;">
<div style="float:left;width:40%;height:100%;padding-left: 40px;padding-top: 45px;">
<table>
<tr>
<td style="color: #ffffff;text-align: right;font-size: 16px;" colspan="2">制水量</td>
</tr>
<tr>
<td id="todayWater" style="color: #69f6f9;text-align: left;font-size: 18px;"></td>
<td style="color: #69f6f9;text-align: right;font-size: 14px;">万m3/h</td>
</tr>
<tr>
<td style="color: #69f6f9;text-align: left;font-size: 18px;">100</td>
<td style="color: #69f6f9;text-align: right;font-size: 14px;">万m3/天</td>
</tr>
</table>
</div>
<div style="float:left;width:60%;height:100%;">
<div style="float: left;width: 100%;height:30px;text-align: center;line-height: 30px;color: #ffffff;font-size: 20px;">生产负荷</div>
<div id="chart" style="float: left;width: 100%;height: calc(100% - 30px);"></div>
</div>
</div>
</div>
</div>
</body>
</html>

View File

@ -0,0 +1,110 @@
<%@ 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_GetHourHistory", 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">
//获取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 getValue() {
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
// console.log(data);
var html="";
html+="<div style='float:left;width:50%;height:60px;'><img id='backImage' src='"+getRootPath()+"/images/大屏/项目概览.png' style='z-index:-1;positon:relative;height:100%;width:100%;'/></div>";
html+="<div style='float:left;width:100%;height: calc((100vh - 60px - 15px)/3);padding:10px;'>";
html+="<div style='float:left;width:50%;height:100%;padding-left:30px;'>";
html+="<div style='float:left;width:20%;height:100%;'><img src='"+getRootPath()+"/images/大屏/日期.png' style='z-index:-1;positon:relative;height:90%;'/></div>";
html+="<div style='float:left;width:80%;height:50%;font-size: 22px;font-family: Helvetica;text-align: left;color: #ffffff;line-height:calc((100vh - 60px - 60px)/3/2);padding-left:15px;'>"+data[0].name+"</div>";
html+="<div style='float:left;width:80%;height:50%;'>";
html+="<div style='float:left;height:100%;font-size: 24px;font-family: Helvetica;text-align: left;color: #69f6f9;line-height:calc((100vh - 60px - 60px)/3/2);padding-left:15px;'>"+data[0].valueUrl+" 年</div>";
html+="</div>";
html+="</div>";
html+="<div style='float:left;width:50%;height:100%;padding-left:30px;'>";
html+="<div style='float:left;width:20%;height:100%;'><img src='"+getRootPath()+"/images/大屏/运营.png' style='z-index:-1;positon:relative;height:90%;'/></div>";
html+="<div style='float:left;width:80%;height:50%;font-size: 22px;font-family: Helvetica;text-align: left;color: #ffffff;line-height:calc((100vh - 60px - 60px)/3/2);padding-left:15px;'>"+data[1].name+"</div>";
html+="<div style='float:left;width:80%;height:50%;font-size: 24px;font-family: Helvetica;text-align: left;color: #69f6f9;line-height:calc((100vh - 60px - 60px)/3/2);padding-left:15px;'>"+data[1].valueUrl+"</div>";
html+="</div>";
html+="</div>";
html+="<div style='float:left;width:100%;height: calc((100vh - 60px - 15px)/3);padding:10px;'>";
html+="<div style='float:left;width:50%;height:100%;padding-left:30px;'>";
html+="<div style='float:left;width:20%;height:100%;'><img src='"+getRootPath()+"/images/大屏/水.png' style='z-index:-1;positon:relative;height:90%;'/></div>";
html+="<div style='float:left;width:80%;height:50%;font-size: 22px;font-family: Helvetica;text-align: left;color: #ffffff;line-height:calc((100vh - 60px - 60px)/3/2);padding-left:15px;'>"+data[2].name+"</div>";
html+="<div style='float:left;width:80%;height:50%;'>";
html+="<div style='float:left;height:100%;font-size: 24px;font-family: Helvetica;text-align: left;color: #69f6f9;line-height:calc((100vh - 60px - 60px)/3/2);padding-left:15px;'>"+data[2].valueUrl+" 万吨/日</div>";
html+="</div>";
html+="</div>";
html+="<div style='float:left;width:50%;height:100%;padding-left:30px;'>";
html+="<div style='float:left;width:20%;height:100%;'><img src='"+getRootPath()+"/images/大屏/占地面积.png' style='z-index:-1;positon:relative;height:90%;'/></div>";
html+="<div style='float:left;width:80%;height:50%;font-size: 22px;font-family: Helvetica;text-align: left;color: #ffffff;line-height:calc((100vh - 60px - 60px)/3/2);padding-left:15px;'>"+data[3].name+"</div>";
html+="<div style='float:left;width:80%;height:50%;'>";
html+="<div style='float:left;height:100%;font-size: 24px;font-family: Helvetica;text-align: left;color: #69f6f9;line-height:calc((100vh - 60px - 60px)/3/2);padding-left:15px;'>"+data[3].valueUrl+" 公顷</div>";
html+="</div>";
html+="</div>";
html+="</div>";
html+="<div style='float:left;width:100%;height: calc((100vh - 60px - 15px)/3);padding:10px;'>";
html+="<div style='float:left;width:50%;height:100%;padding-left:30px;'>";
html+="<div style='float:left;width:20%;height:100%;'><img src='"+getRootPath()+"/images/大屏/工艺包.png' style='z-index:-1;positon:relative;height:90%;'/></div>";
html+="<div style='float:left;width:80%;height:50%;font-size: 22px;font-family: Helvetica;text-align: left;color: #ffffff;line-height:calc((100vh - 60px - 60px)/3/2);padding-left:15px;'>"+data[4].name+"</div>";
html+="<div style='float:left;width:80%;height:50%;font-size: 24px;font-family: Helvetica;text-align: left;color: #69f6f9;line-height:calc((100vh - 60px - 60px)/3/2);padding-left:15px;'>"+data[4].valueUrl+"</div>";
html+="</div>";
html+="<div style='float:left;width:50%;height:100%;padding-left:30px;'>";
html+="<div style='float:left;width:20%;height:100%;'><img src='"+getRootPath()+"/images/大屏/行业排放标准.png' style='z-index:-1;positon:relative;height:90%;'/></div>";
html+="<div style='float:left;width:80%;height:50%;font-size: 22px;font-family: Helvetica;text-align: left;color: #ffffff;line-height:calc((100vh - 60px - 60px)/3/2);padding-left:15px;'>"+data[5].name+"</div>";
html+="<div style='float:left;width:80%;height:50%;font-size: 24px;font-family: Helvetica;text-align: left;color: #69f6f9;line-height:calc((100vh - 60px - 60px)/3/2);padding-left:15px;'>"+data[5].valueUrl+"</div>";
html+="</div>";
html+="</div>"
$('#main').html(html);
}, 'json');
}
/* 定时器 */
//setInterval(change, 60000); //每1分钟切换
setInterval(getValue, 3600000); //每一小时切换
/* 初始化 */
$(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-15) + "px";
getValue();
//console.log("height",document.body.scrollHeight);
});
</script>
</head>
<body style="width:100%;height:100%;margin:0;padding:0;overflow-x:hidden;overflow-y:hidden;padding-top:15px;">
<div style="height:100%;width:100%;">
<div id="main" style="height:100%;width:100%;background:rgba(19,32,85,0.27);border-radius: 8px;">
</div>
</div>
</body>
</html>

View File

@ -0,0 +1,287 @@
<%@ 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_GetHourHistory", 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">
//获取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方法用.进行拼接
}
/* 请求数据 */
function getValue() {
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
//console.log(data);
if(data!=''){
for(var i=0;i<data.length;i++){
if(data[i].elementCode=="processingCapacity"){
$('#processingCapacity').text(numOutput((data[i].visualCacheData.value).toFixed(1)));
}else if(data[i].elementCode=="operationForm"){
$('#operationForm').text(data[i].valueUrl);
}else if(data[i].elementCode=="serviceArea"){
$('#serviceArea').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
}else if(data[i].elementCode=="servicePopulation"){
$('#servicePopulation').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
}else if(data[i].elementCode=="totalYearWater"){
$('#totalYearWater').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
}else if(data[i].elementCode=="waterCompletionRate"){
dochart('chart1',(data[i].visualCacheData.value).toFixed(0),'水量达标率','#69F6F9');
}else if(data[i].elementCode=="mudCompletionRate"){
dochart('chart3',(data[i].visualCacheData.value).toFixed(0),'泥量达标率','#F5A524');
}else if(data[i].elementCode=="inWaterCompletionRate"){
dochart('chart2',(data[i].visualCacheData.value).toFixed(0),'进水水质达标率','#347EFB');
}else if(data[i].elementCode=="outWaterCompletionRate"){
dochart('chart4',(data[i].visualCacheData.value).toFixed(0),'出水水质达标率','#347EFB');
}
}
}
}, 'json');
}
//根据屏幕自定义字体大小1920下
function fontSize(res){
let docEl = document.documentElement,
clientWidth = window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;
if (!clientWidth) return;
let fontSize = 100 * (clientWidth / 1920);
return res*fontSize;
}
function fontWidth(res){
let docEl = document.documentElement,
clientWidth = window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;
if (!clientWidth) return;
let fontWidth = (clientWidth*res) / 1920;
return fontWidth;
}
function dochart(id,value,title,color){
var max = 100;
// 蓝色背景
var num = value / max;
var colorSet = [
[num, color]
];
var myChart = echarts.init(document.getElementById(id));
var option = {
title:{
text:title,
textStyle: {
fontSize: fontSize(0.25) ,
fontWeight: 400 ,
color: '#E3E3E3' ,
},
x:'center',
bottom:0,
},
grid: {
top:0,
left:0,
right:0,
bottom:0,
},
tooltip: {
formatter: '{a} <br/>{b} : {c}%'
},
series: [
{
name: '达标率',
type: 'gauge',
radius: '120%' ,
center: ["50%", "75%"], //整体的位置设置
startAngle: 180,
endAngle: 0,
splitLine: {
show: false ,
},
axisLine: {
// 坐标轴线
lineStyle: {
// 属性lineStyle控制线条样式
color: colorSet,
width: fontWidth(20),
opacity: 1 //刻度背景宽度
}
},
axisTick: {
show: false ,
},
axisLabel: {
show: false ,
},
pointer: {
show: false ,
},
detail: {
offsetCenter: [0, '-15%'] ,
fontSize: fontSize(0.6) ,
formatter: '{value}%'
},
data: [{value: value}]
}
]
};
myChart.setOption(option, true);
}
/* 定时器 */
//setInterval(change, 60000); //每1分钟切换
setInterval(getValue, 3600000); //每一小时切换
/* 初始化 */
$(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("backImage").src = ""+getRootPath()+"/images/大屏/项目概览.png";
document.getElementById("backImage2").src = ""+getRootPath()+"/images/大屏/项目情况.png";
document.getElementById("backImage3").src = ""+getRootPath()+"/images/大屏/水量信息.png";
getValue();
//console.log("height",document.body.scrollHeight);
});
</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:30px;padding-right:30px;padding-bottom:30px;">
<div style="height:100%;width:100%;background:#16314C;border-radius: 8px;">
<div style="float:left;width:50%;height:100%;">
<div style="float:left;width:100%;height:80px;"><img id="backImage" src="" style="z-index:999;position:relative;height:100%;width: 50%;"/></div>
<div style="float:left;width: 100%;height:calc(100% - 80px);">
<div style="float:left;width: 100%;height:40%;">
<div style="float:left;width: 30%;height:100%;">
<div style="float: left;width:100%;height: 70%;text-align: center;"><img id="backImage2" src="" style="z-index:999;position:relative;height:100%;width: 50%;"/></div>
<div style="float: left;width:100%;height: 30%;text-align: center;font-size:24px;color: #6998C3;">项目情况</div>
</div>
<div style="float:left;width: 70%;height:40%;display:table;">
<div style="width: 100%;height:100%;font-size:26px;color: #ffffff;display: table-cell;text-align: center;vertical-align: middle;letter-spacing: 8px;">
<div style="display: inline-block;">在线运营处理能力</div>
</div>
</div>
<div style="float:left;width: 70%;height:60%;display:table;">
<div style="width: 100%;height:100%;font-size:40px;color: #69f6f9;display: table-cell;text-align: center;vertical-align: top;letter-spacing: 6px;">
<div style="display: inline-block;"><span id="processingCapacity"></span><span>万m³/日</span></div>
</div>
</div>
</div>
<div style="float:left;width: 100%;height:60%;">
<div style="width: 100%;height:33.3%;display:table;">
<div style="width: 25%;height:100%;font-size:24px;color: #6998C3;display: table-cell;text-align: center;vertical-align: middle;">
<div style="display: inline-block;">运营形式</div>
</div>
<div style="width: 45%;height:100%;font-size:30px;color: #69F6F9;display: table-cell;text-align: left;vertical-align: middle;">
<div id="operationForm" style="display: inline-block;"></div>
</div>
<div style="width: 15%;height:100%;font-size:20px;display: table-cell;">
<div style="display: inline-block;"></div>
</div>
<div style="width: 15%;height:100%;font-size:22px;display: table-cell;">
<div style="display: inline-block;"></div>
</div>
</div>
<div style="width: 100%;height:33.3%;display:table;">
<div style="width: 25%;height:100%;font-size:24px;color: #6998C3;display: table-cell;text-align: center;vertical-align: middle;">
<div style="display: inline-block;">服务面积</div>
</div>
<div style="width: 45%;height:100%;font-size:30px;color: #69F6F9;display: table-cell;text-align: left;vertical-align: middle;padding-right:10px;">
<div style="float: left;background-color:#94C4FF;width: 65%;height:25%;border-radius:8px 0px 0px 8px;"></div>
<div style="float: left;background-color:#94C4FF;width: 35%;height:25%;opacity: 0.5;border-radius:0px 8px 8px 0px;"></div>
</div>
<div style="width: 15%;height:100%;font-size:30px;color: #69F6F9;display: table-cell;text-align: right;vertical-align: middle;">
<div id="serviceArea" style="display: inline-block;"></div>
</div>
<div style="width: 15%;height:100%;font-size:24px;color: #416284;display: table-cell;text-align: left;vertical-align: middle;">
<div style="display: inline-block;padding-left:8px;">k㎡</div>
</div>
</div>
<div style="width: 100%;height:33.3%;display:table;">
<div style="width: 25%;height:100%;font-size:24px;color: #6998C3;display: table-cell;text-align: center;vertical-align: middle;">
<div style="display: inline-block;">服务人口</div>
</div>
<div style="width: 45%;height:100%;font-size:30px;color: #69F6F9;display: table-cell;text-align: left;vertical-align: middle;padding-right:10px;">
<div style="float: left;background-color:#94C4FF;width: 55%;height:25%;border-radius:8px 0px 0px 8px;"></div>
<div style="float: left;background-color:#94C4FF;width: 45%;height:25%;opacity: 0.5;border-radius:0px 8px 8px 0px;"></div>
</div>
<div style="width: 15%;height:100%;font-size:30px;color: #69F6F9;display: table-cell;text-align: right;vertical-align: middle;">
<div id="servicePopulation" style="display: inline-block;"></div>
</div>
<div style="width: 15%;height:100%;font-size:24px;color: #416284;display: table-cell;text-align: left;vertical-align: middle;">
<div style="display: inline-block;padding-left:8px;">万/人</div>
</div>
</div>
</div>
</div>
</div>
<div style="float:left;width:1px;height:100%;">
<div style="width: 1px;height: 10%;"></div>
<div style="width: 1px;height: 80%;border-left: 1px solid #83a3aa;"></div>
</div>
<div style="float:left;width:calc(50% - 1px);height:100%;">
<div style="float:left;width: 100%;height:40%;padding-top:30px;">
<div style="float:left;width: 30%;height:100%;">
<div style="float: left;width:100%;height: 70%;text-align: center;"><img id="backImage3" src="" style="z-index:999;position:relative;height:100%;width: 50%;padding-bottom: 10px;"/></div>
<div style="float: left;width:100%;height: 30%;text-align: center;font-size:24px;color: #6998C3;">项目情况</div>
</div>
<div style="float:left;width: 70%;height:40%;display:table;">
<div style="width: 100%;height:100%;font-size:26px;color: #ffffff;display: table-cell;text-align: center;vertical-align: middle;letter-spacing: 8px;">
<div style="display: inline-block;">今年累计处理水量</div>
</div>
</div>
<div style="float:left;width: 70%;height:60%;display:table;">
<div style="width: 100%;height:100%;font-size:40px;color: #69f6f9;display: table-cell;text-align: center;vertical-align: top;letter-spacing: 6px;">
<div style="display: inline-block;"><span id="totalYearWater"></span><span>万m³</span></div>
</div>
</div>
</div>
<div style="float:left;width: 100%;height:60%;">
<div style="float:left;width: 50%;height:100%;">
<div id="chart1" style="float:left;width: 100%;height:50%;"></div>
<div id="chart2" style="float:left;width: 100%;height:50%;"></div>
</div>
<div style="float:left;width: 50%;height:100%;">
<div id="chart3" style="float:left;width: 100%;height:50%;"></div>
<div id="chart4" style="float:left;width: 100%;height:50%;"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

View File

@ -0,0 +1,125 @@
<%@ 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_GetHourHistory", 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页-->
<script type="text/javascript">
/* 请求数据 */
function getbigScreen_projectOverview3Value() {
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
// console.log(data);
if(data!=''){
}
}, 'json');
}
/* 定时器 */
//setInterval(change, 60000); //每1分钟切换
// setInterval(getValue, 3600000); //每一小时切换
/* 初始化 */
$(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("bigScreen_projectOverview3backImage").src = ""+getRootPath()+"/images/大屏/项目情况2.png";
getbigScreen_projectOverview3Value();
//console.log("height",document.body.scrollHeight);
});
</script>
</head>
<body style="width:100%;height:100%;margin:0;padding:0;overflow-x:hidden;overflow-y:hidden;">
<div id="bigScreen_projectOverview3main" style="height:100%;width:100%;padding-top:10px;padding-left:10px;padding-right:10px;">
<div style="height:100%;width:100%;background:#16314c;border-radius: 8px;">
<div style="float: left;width: 100%;height:50px;">
<div style="float: left;width:32px;height:35px;line-height:50px;text-align:center;margin-left: 20px;"><img id="bigScreen_projectOverview3backImage" src="" style="z-index:999;position:relative;height:100%;width:100%;"/></div>
<div style="float: left;height:50px;line-height:50px;text-align:left;padding-left: 25px;font-size: 20px;color: #8ac2f6;font-family: SimHei;">项目情况</div>
</div>
<div style="float: left;width: 100%;height:calc(100% - 50px);">
<table style="width: 100%;height: 100%;text-align: center;vertical-align: middle;">
<tr style="height: 20%;">
<td width="25%" style="color:#6998c3;font-size: 14px;">投运日期</td>
<td width="25%" style="color:#ffffff;font-size: 14px;">2005年</td>
<td width="25%" style="color:#6998c3;font-size: 14px;">设计水量</td>
<td width="25%" style="color:#ffffff;font-size: 14px;">60万吨/天</td>
</tr>
<tr style="height: 20%;">
<td width="25%" style="color:#6998c3;font-size: 14px;">运营形式</td>
<td width="25%" style="color:#ffffff;font-size: 14px;">BOT</td>
<td width="25%" style="color:#6998c3;font-size: 14px;">占地面积</td>
<td width="25%" style="color:#ffffff;font-size: 14px;">431亩</td>
</tr>
<tr style="height: 40%;">
<td width="25%" style="color:#6998c3;font-size: 14px;">处理工艺</td>
<td width="25%" colspan="3" style="color:#ffffff;font-size: 14px;text-align: left;">AAO+二沉池+高效沉淀池+反硝化 深床滤池+消毒处理工艺</td>
</tr>
<tr style="height: 20%;">
<td width="25%" style="color:#6998c3;font-size: 14px;">排放标准</td>
<td width="25%" style="color:#ffffff;font-size: 14px;">地标一级</td>
<td width="25%" style="color:#6998c3;font-size: 14px;"></td>
<td width="25%" style="color:#ffffff;font-size: 14px;"></td>
</tr>
</table>
<!-- <div style="float: left;height: 20%;width: 100%;">
<div style="float: left;height: 100%;width: 50%;">
<div style="float: left;height: 100%;width: 50%;text-align: center;line-height:calc((100% - 70px)/5);color:#6998c3;font-size: 14px;">投运日期</div>
<div style="float: left;height: 100%;width: 50%;line-height:calc((100% - 70px)/5);color:#ffffff;font-size: 14px;">2005年</div>
</div>
<div style="float: left;height: 100%;width: 50%;">
<div style="float: left;height: 100%;width: 50%;text-align: center;line-height:calc((100% - 70px)/5);color:#6998c3;font-size: 14px;">设计水量</div>
<div style="float: left;height: 100%;width: 50%;line-height:calc((100% - 70px)/5);color:#ffffff;font-size: 14px;">60万吨/天</div>
</div>
</div>
<div style="float: left;height: 20%;width: 100%;">
<div style="float: left;height: 100%;width: 50%;">
<div style="float: left;height: 100%;width: 50%;text-align: center;line-height:calc((100% - 70px)/5);color:#6998c3;font-size: 14px;">运营形式</div>
<div style="float: left;height: 100%;width: 50%;line-height:calc((100% - 70px)/5);color:#ffffff;font-size: 14px;">BOT</div>
</div>
<div style="float: left;height: 100%;width: 50%;">
<div style="float: left;height: 100%;width: 50%;text-align: center;line-height:calc((100% - 70px)/5);color:#6998c3;font-size: 14px;">占地面积</div>
<div style="float: left;height: 100%;width: 50%;line-height:calc((100% - 70px)/5);color:#ffffff;font-size: 14px;">431亩</div>
</div>
</div>
<div style="float: left;height: 40%;width: 100%;">
<div style="float: left;height: 100%;width: 25%;line-height:calc((100% - 70px)/5*2);text-align: center;color:#6998c3;font-size: 14px;">处理工艺</div>
<div style="float: left;height: 100%;width: 75%;margin:10px auto;color:#ffffff;font-size: 14px;">AAO+二沉池+高效沉淀池+反硝化 深床滤池+消毒处理工艺</div>
</div>
<div style="float: left;height: 20%;width: 100%;">
<div style="float: left;height: 100%;width: 50%;">
<div style="float: left;height: 100%;width: 50%;text-align: center;line-height:calc((100% - 70px)/5);color:#6998c3;font-size: 14px;">排放标准</div>
<div style="float: left;height: 100%;width: 50%;line-height:calc((100% - 70px)/5);color:#ffffff;font-size: 14px;">地标一级</div>
</div>
</div> -->
</div>
</div>
</div>
</body>
</html>

View File

@ -0,0 +1,122 @@
<%@ 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">
/* 请求数据 */
function getValue() {
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
// console.log(data);
if(data!=''){
}
}, 'json');
}
/* 定时器 */
//setInterval(change, 60000); //每1分钟切换
// setInterval(getValue, 3600000); //每一小时切换
/* 初始化 */
$(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("titleImage").src = ""+getRootPath()+"/images/大屏/大屏标题文字背景.png";
document.getElementById("waterImg").src = ""+getRootPath()+"/images/大屏/水量2.png";
document.getElementById("areaImg").src = ""+getRootPath()+"/images/大屏/服务面积.png";
document.getElementById("peopleImg").src = ""+getRootPath()+"/images/大屏/服务人口.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;
}
</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%;">
<div style="float:left;width:100%;height:35px;margin-left: 20px;">
<div style="float:left;width:194px;height:34px;">
<div style="position:absolute;top:12px;left:50px;z-index:999;opacity: 1;font-size: 20px;font-family: Microsoft YaHei, Microsoft YaHei-Regular;margin-left:20px;">项目概览</div>
<img id="titleImage" src="" style="z-index:998;position:relative;height:100%;width:100%;"/>
</div>
</div>
<div style="float:left;width:100%;height:46px;margin-left: 20px;margin-top: 30px;">
<div style="float:left;width:34px;height:46px;">
<img id="waterImg" src="" style="z-index:999;position:relative;height:100%;width:100%;"/>
</div>
<div style="float:left;width:200px;height:46px;line-height: 46px;font-size: 20px;color: #2b9dd8;padding-left: 15px;">
在线运营处理能力
</div>
<div style="float:left;width:60px;height:46px;line-height: 46px;font-size: 40px;color: #69f6f9;padding-left: 15px;">
20
</div>
<div style="float:left;width:80px;height:46px;line-height: 46px;font-size: 20px;color: #2b9dd8;padding-left: 10px;">
万吨/天
</div>
</div>
<div style="float:left;width:100%;height:50px;margin-left: 20px;margin-top: 30px;">
<div style="float:left;width:50px;height:50px;">
<img id="areaImg" src="" style="z-index:999;position:relative;height:100%;width:100%;"/>
</div>
<div style="float:left;width:110px;height:50px;color: #2b9dd8;padding-left: 15px;">
<div style="float:left;width: 100%;height: 30px;font-size: 20px;line-height: 30px;">服务面积</div>
<div style="float:left;width: 100%;height: 20px;font-size: 14px;line-height: 20px;">平方公里</div>
</div>
<div style="float:left;width:80px;height:50px;line-height: 50px;font-size: 30px;color: #69f6f9;">
2085
</div>
<div style="float:left;width:50px;height:50px;">
<img id="peopleImg" src="" style="z-index:999;position:relative;height:100%;width:100%;"/>
</div>
<div style="float:left;width:110px;height:50px;color: #2b9dd8;padding-left: 15px;">
<div style="float:left;width: 100%;height: 30px;font-size: 20px;line-height: 30px;">服务人口</div>
<div style="float:left;width: 100%;height: 20px;font-size: 14px;line-height: 20px;">万人</div>
</div>
<div style="float:left;width:80px;height:50px;line-height: 50px;font-size: 30px;color: #69f6f9;">
180
</div>
</div>
<div style="float:left;width:100%;height: 330px;padding-left: 20px;padding-top: 20px;color: #d8d8d8;line-height:35px;font-size: 20px;line-height: 40px;">
白洋滩水厂分为一期与二期二期工程设计新建供水规模为10万吨/天与一期供水能力合计为20万吨/天,确保江南新城及南岸区市民的正常生产生活用水需求。白洋滩水厂二期工程位于重庆市南岸区经开区,新建沉砂池、沉淀池、滤池、清水池、滤池冲洗水回收池及排泥池、泥沙浓缩池、泥沙平衡池和污泥脱水车间。
</div>
</div>
</div>
</body>
</html>

View File

@ -0,0 +1,183 @@
<%@ 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">
/* 请求数据 */
function getValue() {
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
// console.log(data);
if(data!=''){
}
}, 'json');
}
/* 定时器 */
//setInterval(change, 60000); //每1分钟切换
// setInterval(getValue, 3600000); //每一小时切换
/* 初始化 */
$(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("titleImage").src = ""+getRootPath()+"/images/大屏/大屏标题文字背景.png";
document.getElementById("waterImg").src = ""+getRootPath()+"/images/大屏/水量2.png";
document.getElementById("areaImg").src = ""+getRootPath()+"/images/大屏/服务面积.png";
document.getElementById("peopleImg").src = ""+getRootPath()+"/images/大屏/服务人口.png";
document.getElementById("logoImage").src = ""+getRootPath()+"/images/大屏/重庆水务LOGO-蓝.png";
document.getElementById("medalImage1").src = ""+getRootPath()+"/images/大屏/奖章.png";
document.getElementById("medalImage2").src = ""+getRootPath()+"/images/大屏/奖章.png";
document.getElementById("medalImage3").src = ""+getRootPath()+"/images/大屏/奖章.png";
document.getElementById("medalImage4").src = ""+getRootPath()+"/images/大屏/奖章.png";
document.getElementById("medalImage5").src = ""+getRootPath()+"/images/大屏/奖章.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;
}
</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%;">
<div style="float:left;width:100%;height:35px;margin-left: 20px;">
<div style="float:left;width:194px;height:34px;">
<div style="position:absolute;top:12px;left:50px;z-index:999;opacity: 1;font-size: 20px;font-family: Microsoft YaHei, Microsoft YaHei-Regular;margin-left:20px;">公司简介</div>
<img id="titleImage" src="" style="z-index:998;position:relative;height:100%;width:100%;"/>
</div>
</div>
<div style="float:left;width:100%;height:46px;margin-left: 20px;margin-top: 30px;">
<div style="float:left;width:34px;height:46px;">
<img id="waterImg" src="" style="z-index:999;position:relative;height:100%;width:100%;"/>
</div>
<div style="float:left;width:150px;height:46px;line-height: 46px;font-size: 20px;color: #2b9dd8;padding-left: 15px;">
设计供水能力
</div>
<div style="float:left;width:100px;height:46px;line-height: 46px;font-size: 40px;color: #69f6f9;padding-left: 15px;">
56.2
</div>
<div style="float:left;width:80px;height:46px;line-height: 46px;font-size: 20px;color: #2b9dd8;padding-left: 10px;">
万吨/天
</div>
</div>
<div style="float:left;width:100%;height:50px;margin-left: 20px;margin-top: 30px;">
<div style="float:left;width:50px;height:50px;">
<img id="areaImg" src="" style="z-index:999;position:relative;height:100%;width:100%;"/>
</div>
<div style="float:left;width:120px;height:50px;color: #2b9dd8;padding-left: 15px;">
<div style="float:left;width: 100%;height: 30px;font-size: 20px;line-height: 30px;">服务面积</div>
<div style="float:left;width: 100%;height: 20px;font-size: 14px;line-height: 20px;">平方公里</div>
</div>
<div style="float:left;width:100px;height:50px;line-height: 50px;font-size: 40px;color: #69f6f9;">
200
</div>
<div style="float:left;width:50px;height:50px;">
<img id="peopleImg" src="" style="z-index:999;position:relative;height:100%;width:100%;"/>
</div>
<div style="float:left;width:120px;height:50px;color: #2b9dd8;padding-left: 15px;">
<div style="float:left;width: 100%;height: 30px;font-size: 20px;line-height: 30px;">服务人口</div>
<div style="float:left;width: 100%;height: 20px;font-size: 14px;line-height: 20px;">万人</div>
</div>
<div style="float:left;width:100px;height:50px;line-height: 50px;font-size: 40px;color: #69f6f9;">
200
</div>
</div>
<div style="float:left;width:100%;height: 350px;padding-left: 20px;padding-top: 20px;color: #2B9DD8;line-height:27px;font-size: 17px;">
重庆市渝南自来水有限公司成立于2002年2月6日隶属于重庆水务集团股份有限公司。
<br>公司目前设计供水能力共计56.2万m³/d供水区域包括南坪街道、龙门浩街道、海棠溪街道、弹子石街道、铜元局街道、花园路街道、南山街道部分、涂山镇部分、鸡冠石镇、李家沱街道、花溪街道部分区域、龙洲湾街道、南泉街道部分区域、鱼洞街道、莲花街道等供水面积约200平方公里供水人口约200万人。
<br>另公司新大江水厂一期设计规模40万m3/d即将竣工投运届时将为重庆市主城南部片区供水提供更安全、更优质、更可靠的供水服务。
<br>公司一直秉承“建设生态文明,服务美好生活”的企业宗旨,全心全意专注供水事业,致力于满足人民日益增长的美好生活需要,服务于重庆市主城南部片区的经济社会发展。
</div>
<div style="float:left;width:100%;height:300px;margin-left: 20px;margin-top: 10px;">
<div style="float: left;height: 100%;width: 45%;padding-left: 70px;padding-top: 75px;">
<img id="logoImage" src="" style="z-index:998;position:relative;height:129px;width:135px;"/>
</div>
<div style="float: left;height: 100%;width: 55%;">
<div style="float: left;width: 100%;height: 20%;line-height: 60px;">
<div style="float: left;height:33px;width:27px;">
<img id="medalImage1" src="" style="z-index:998;position:relative;height:33px;width:27px;"/>
</div>
<div style="float: left;height:33px;padding-left: 20px;color: #3EFFFF;font-size: 20px;">
市级文明单位
</div>
</div>
<div style="float: left;width: 100%;height: 20%;line-height: 60px;">
<div style="float: left;height:33px;width:27px;">
<img id="medalImage2" src="" style="z-index:998;position:relative;height:33px;width:27px;"/>
</div>
<div style="float: left;height:33px;padding-left: 20px;color: #3EFFFF;font-size: 20px;">
重庆市诚信文明先进单位
</div>
</div>
<div style="float: left;width: 100%;height: 20%;line-height: 60px;">
<div style="float: left;height:33px;width:27px;">
<img id="medalImage3" src="" style="z-index:998;position:relative;height:33px;width:27px;"/>
</div>
<div style="float: left;height:33px;padding-left: 20px;color: #3EFFFF;font-size: 20px;">
企业文化建设先进单位
</div>
</div>
<div style="float: left;width: 100%;height: 20%;line-height: 60px;">
<div style="float: left;height:33px;width:27px;">
<img id="medalImage4" src="" style="z-index:998;position:relative;height:33px;width:27px;"/>
</div>
<div style="float: left;height:33px;padding-left: 20px;color: #3EFFFF;font-size: 20px;">
售后服务先进单位
</div>
</div>
<div style="float: left;width: 100%;height: 20%;line-height: 60px;">
<div style="float: left;height:33px;width:27px;">
<img id="medalImage5" src="" style="z-index:998;position:relative;height:33px;width:27px;"/>
</div>
<div style="float: left;height:33px;padding-left: 20px;color: #3EFFFF;font-size: 20px;">
守合同重信用单位
</div>
</div>
</div>
</div>
<div style="float:left;width:100%;height:120px;margin-left: 20px;margin-top: 20px;">
<div style="float: left;height: 44px;line-height: 44px;color: #3effff;font-size: 35px;font-family: STKaiti, STKaiti-Regular;padding-left: 150px;">政府放心&nbsp;&nbsp;市民满意</div>
<div style="float: left;height: 44px;line-height: 44px;color: #3effff;font-size: 35px;font-family: STKaiti, STKaiti-Regular;padding-left: 65px;">企业增效&nbsp;&nbsp;员工乐业&nbsp;&nbsp;伙伴共赢</div>
</div>
</div>
</div>
</body>
</html>

View File

@ -0,0 +1,512 @@
<%@ 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">
/* 请求数据 */
function getValue() {
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
// console.log(data);
if(data!=''){
var nowHourP=0;
var lastHourP=0;
var nowdayP=0;
var lastdayP=0;
var lineDatasNum=0;
var lineDatas=[];
for(var i=0;i<data.length;i++){
if(data[i].elementCode=="thisYearWater"){
$('#thisYearWater').text(numOutput((data[i].mPointHistory[0].parmvalue/10000).toFixed(2)));
}else if(data[i].elementCode=="thisYearCOD"){
$('#thisYearCOD').text(numOutput((data[i].mPoint.parmvalue).toFixed(2)));
}else if(data[i].elementCode=="waterQuantityRate"){
getBarChart('chart1',data[i].mPoint.parmvalue.toFixed(0),'%',data[i].name,'#69F6F9');
}else if(data[i].elementCode=="waterQualityRate"){
getBarChart('chart3',data[i].mPoint.parmvalue.toFixed(0),'%',data[i].name,'#69F6F9');
}else if(data[i].elementCode=="EqRate"){
getBarChart('chart2',data[i].mPoint.parmvalue.toFixed(0),'%',data[i].name,'#347EFB');
}else if(data[i].elementCode=="healthEvaluate"){
getBarChart('chart4',data[i].mPoint.parmvalue.toFixed(0),'分',data[i].name,'#347EFB');
}else if(data[i].elementCode=="hourWater"){
if(data[i].name=="当前小时水量"){
// if(data[i].mPointHistory.length>0&&data[i].mPointHistory[0]!=null){
// nowHourP=data[i].mPointHistory[0].parmvalue;
// }
if(data[i].mPoint!=null){
nowdayP=data[i].mPoint.parmvalue;
}
}
// else if(data[i].name=="上小时水量"){
// if(data[i].mPointHistory.length>0&&data[i].mPointHistory[0]!=null){
// lastHourP=data[i].mPointHistory[0].parmvalue;
// }
// }
}else if(data[i].elementCode=="dayWater"){
if(data[i].name=="今天累计水量"){
if(data[i].mPoint!=null){
nowdayP=data[i].mPoint.parmvalue;
}
}
// else if(data[i].name=="昨日累计水量"){
// if(data[i].mPointHistory.length>0&&data[i].mPointHistory[0]!=null){
// lastdayP=data[i].mPointHistory[0].parmvalue;
// }
// }
}else if(data[i].elementCode=="line"){
if(data[i].getValueType!="getText"){
var datas=new Array();
for(var j=0;j<data[i].mPointHistory.length;j++){
const his=data[i].mPointHistory[j];
var ddata=new Array();
ddata.push(his.measuredt.substring(11,13));
ddata.push((his.parmvalue).toFixed(2));
datas.push(ddata);
}
if(lineDatasNum==0){
lineDatas.push({
data: datas,
name: data[i].name,
type: 'line',
symbol:'none',
smooth: true,
markPoint: {
symbolSize:'40',
label:{
fontSize:10
},
data: [
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
]
}
});
}else{
lineDatas.push({
data: datas,
name: data[i].name,
type: 'line',
symbol:'none',
smooth: true
});
}
lineDatasNum++;
}else if(data[i].getValueType=="getText"){
if(lineDatas!=''&&lineDatas.length>0){
var datas=new Array();
for (let j = 0; j < lineDatas[1].data.length; j++) {
const element = lineDatas[1].data[j];
var ddata=new Array();
ddata.push(element[0]);
ddata.push(data[i].valueUrl);
datas.push(ddata);
}
lineDatas.push({
data: datas,
name: data[i].name,
type: 'line',
symbol:'none',
smooth: true,
itemStyle:{
normal:{
lineStyle:{
type:'dotted'  //'dotted'虚线 'solid'实线
}
}
}
});
}
}
}
}
// var hourhb=(nowHourP-lastHourP)/lastHourP*100;
// hourhb=hourhb;
$('#hourWaterP').text((nowHourP));
// if(Number(hourhb)<0){
// $('#hourWaterH').css("color","red");
// $('#hourWaterH').text("⬇ 环比"+hourhb+"%");
// }else{
// $('#hourWaterH').css("color","#3fff00");
// $('#hourWaterH').text("⬆ 环比"+hourhb+"%");
// }
// var dayhb=(nowdayP-lastdayP)/lastdayP*100;
// dayhb=dayhb;
$('#dayWaterP').text((nowdayP));
// if(Number(dayhb)<0){
// $('#dayWaterH').css("color","red");
// $('#dayWaterH').text("⬇ 环比"+dayhb+"%");
// }else{
// $('#dayWaterH').css("color","#3fff00");
// $('#dayWaterH').text("⬆ 环比"+dayhb+"%");
// }
getLineChart('chart5',lineDatas);
}
}, 'json');
}
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方法用.进行拼接
}
function getBarChart(id,value,unit,subtext,color){
var myChart = echarts.init(document.getElementById(id));
var option = {
title: {
text: ['{a|'+value+'}','{b| '+unit+'}'].join(''),
subtext: subtext,
x: 'center',
y: '60%',
textStyle: {
rich: {
a: {
color: color,
fontSize: '40',
},
b: {
color: color,
fontSize: '25',
}
}
},
subtextStyle: {
color: '#FFFFFF',
fontSize: '20'
}
},
angleAxis: {
axisLine: {
show: false
},
axisLabel: {
show: false
},
splitLine: {
show: false
},
axisTick: {
show: false
},
min: 0,
max: 200,
boundaryGap: ['0', '100'],
startAngle: 180
},
radiusAxis: {
type: 'category',
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
data: ['a'],
z: 10
},
polar: {
radius: '230%',
center: ['50%', '80%'],
},
series: [{
type: 'bar',
data: [value],
coordinateSystem: 'polar',
barMaxWidth: 15,
z: 2,
// name: '抢修项目',
roundCap: true,
color: color,
barGap: '-100%',
},
{
type: 'bar',
data: [100],
z: 0,
silent: true,
coordinateSystem: 'polar',
barMaxWidth: 23,
// name: 'C',
roundCap: true,
color: '#1A4C96',
barGap: '-125%',
}
],
tooltip: {
show: false
},
};
myChart.setOption(option, true);
}
function getLineChart(id,datas){
var myChart = echarts.init(document.getElementById(id));
var option = {
color:['#20E9F2','#815DB7','#08A3A3'],
title: {
text: '水量处理曲线',
top:10,
left:20,
textStyle:{
color:'#FFFFFF'
}
},
legend: {
data: ['实际', '昨日', '考核'],
top:10,
right:20,
textStyle:{
color:'#FFFFFF'
}
},
tooltip: {
trigger: 'axis'
},
grid:{
left: '4%', // 与容器左侧的距离
right: '4%', // 与容器右侧的距离
// top: '10%', // 与容器顶部的距离
bottom: '10%', // 与容器底部的距离
containLabel:true
},
xAxis: {
type:"category",
axisLine:{
lineStyle:{
color:'#ffffff',
}
},
axisTick: {
show: false
},
splitLine: {
show: false
}
},
yAxis: {
type : 'value',
axisLine:{
lineStyle:{
color:'#ffffff',
}
},
splitLine: {
show: true,
lineStyle:{
color: '#8C8C8C'
}
}
},
series: datas
};
myChart.setOption(option, true);
// window.addEventListener("resize", function () {
// myChart.resize();
// });
}
/* 定时器 */
setInterval(getValue, 300000); //每5分钟切换
// setInterval(getValue, 3600000); //每一小时切换
/* 初始化 */
$(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("titleImage").src = ""+getRootPath()+"/images/大屏/大屏标题文字背景.png";
document.getElementById("waterImg").src = ""+getRootPath()+"/images/大屏/水量2.png";
document.getElementById("areaImg").src = ""+getRootPath()+"/images/大屏/服务面积.png";
document.getElementById("peopleImg").src = ""+getRootPath()+"/images/大屏/服务人口.png";
document.getElementById("standardImg").src = ""+getRootPath()+"/images/大屏/标准.png";
document.getElementById("processImg").src = ""+getRootPath()+"/images/大屏/处理工艺.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;
}
</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="float:left;height:50%;width:50%;">
<div style="float:left;width:100%;height:35px;margin-left: 20px;">
<div style="float:left;width:100%;height:34px;">
<div style="position:absolute;top:12px;left:50px;z-index:999;opacity: 1;font-size: 20px;font-family: Microsoft YaHei, Microsoft YaHei-Regular;margin-left:38px;">项目概览</div>
<img id="titleImage" src="" style="z-index:998;position:relative;"/>
</div>
</div>
<div style="float:left;width:100%;height:50px;padding-left: 20px;margin-top: 60px;">
<div style="float:left;width:50px;height:50px;text-align:center;">
<img id="areaImg" src="" style="z-index:999;position:relative;"/>
</div>
<div style="float:left;width:150px;height:50px;color: #2b9dd8;padding-left: 15px;">
<div style="float:left;width: 100%;height: 30px;font-size: 20px;line-height: 30px;">服务面积</div>
<div style="float:left;width: 100%;height: 20px;font-size: 14px;line-height: 20px;">平方公里</div>
</div>
<div style="float:left;width:120px;height:50px;line-height: 50px;font-size: 35px;color: #FFFFFF;">
77
</div>
<div style="float:left;width:50px;height:50px;text-align:center;">
<img id="peopleImg" src="" style="z-index:999;position:relative;"/>
</div>
<div style="float:left;width:150px;height:50px;color: #2b9dd8;padding-left: 15px;">
<div style="float:left;width: 100%;height: 30px;font-size: 20px;line-height: 30px;">服务人口</div>
<div style="float:left;width: 100%;height: 20px;font-size: 14px;line-height: 20px;">万人</div>
</div>
<div style="float:left;width:120px;height:50px;line-height: 50px;font-size: 35px;color: #FFFFFF;">
27
</div>
</div>
<div style="float:left;width:100%;height:50px;padding-left: 20px;margin-top: 60px;">
<div style="float:left;width:50px;height:50px;text-align:center;">
<img id="waterImg" src="" style="z-index:999;position:relative;"/>
</div>
<div style="float:left;width:150px;height:50px;color: #2b9dd8;padding-left: 15px;font-weight: 1000;">
<div style="float:left;width: 100%;height: 30px;font-size: 20px;line-height: 30px;">处理规格</div>
<div style="float:left;width: 100%;height: 20px;font-size: 14px;line-height: 20px;">万m³/d</div>
</div>
<div style="float:left;width:120px;height:50px;line-height: 50px;font-size: 35px;color: #FFFFFF;">
5
</div>
<div style="float:left;width:50px;height:50px;text-align:center;">
<img id="standardImg" src="" style="z-index:999;position:relative;"/>
</div>
<div style="float:left;width:150px;height:50px;color: #2b9dd8;padding-left: 15px;">
<div style="float:left;width: 100%;height: 30px;font-size: 20px;line-height: 30px;">出水执行</div>
<div style="float:left;width: 100%;height: 20px;font-size: 14px;line-height: 20px;">标准</div>
</div>
<div style="float:left;width:120px;height:50px;line-height: 50px;font-size: 35px;color: #FFFFFF;">
一级A
</div>
</div>
<div style="float:left;width:100%;height:50px;padding-left: 20px;margin-top: 60px;">
<div style="float:left;width:50px;height:50px;text-align:center;">
<img id="processImg" src="" style="z-index:999;position:relative;"/>
</div>
<div style="float:left;width:150px;height:50px;color: #2b9dd8;padding-left: 15px;font-weight: 1000;">
<div style="float:left;width: 100%;height: 30px;font-size: 20px;line-height: 30px;">处理工艺</div>
</div>
<div style="float:left;height:50px;line-height: 50px;font-size: 35px;color: #FFFFFF;">
AAO+深度处理+混合消毒
</div>
</div>
</div>
<div style="float:left;height:50%;width:1px;padding-top: 60px;padding-bottom: 60px;">
<div style="float:left;height:100%;width:100%;background-color: #83A3AA;"></div>
</div>
<div style="float:left;height:50%;width:calc(50% - 1px);">
<div style="float: left;width: 50%;height: 100%;padding-left: 30px;">
<div style="float: left;width: 100%;height: 23.3%;padding-left: 20px;">
<div style="float: left;width: 100%;height:30%;font-size: 22px;color: #69F6F9;">
今年累计
</div>
<div style="float: left;width: 100%;height:30%;font-size: 22px;color: #69F6F9;">
处理水量(万吨)
</div>
<div id="thisYearWater" style="float: left;width: 100%;height:40%;font-size: 39px;color: #FFFFFF;"></div>
</div>
<div id="chart1" style="float: left;width: 100%;height: 38.3%;"></div>
<div id="chart2" style="float: left;width: 100%;height: 38.3%;"></div>
</div>
<div style="float: left;width: 50%;height: 100%;padding-left: 30px;">
<div style="float: left;width: 100%;height: 23.3%;padding-left: 20px;">
<div style="float: left;width: 100%;height:30%;font-size: 22px;color: #69F6F9;">
今年累计
</div>
<div style="float: left;width: 100%;height:30%;font-size: 22px;color: #69F6F9;">
COD消减量
</div>
<div id="thisYearCOD" style="float: left;width: 100%;height:40%;font-size: 39px;color: #FFFFFF;"></div>
</div>
<div id="chart3" style="float: left;width: 100%;height: 38.3%;"></div>
<div id="chart4" style="float: left;width: 100%;height: 38.3%;"></div>
</div>
</div>
<div style="float:left;height:50%;width:100%;padding-top: 20px;">
<div style="float:left;width:100%;height:26px;margin-left: 20px;">
<div style="float:left;width:30%;height:26px;">
<div style="float:left;width:100px;height:26px;line-height: 26px;color: #ffffff;font-size: 20px;">
当前处理量
</div>
<div style="float:left;width:100px;height:26px;line-height: 26px;color: #ffffff;font-size: 16px;">
m3/h
</div>
</div>
<div style="float:left;width:30%;height:26px;">
<div style="float:left;width:140px;height:26px;line-height: 26px;color: #ffffff;font-size: 20px;">
今日累计处理量
</div>
<div style="float:left;width:100px;height:26px;line-height: 26px;color: #ffffff;font-size: 16px;">
m3
</div>
</div>
</div>
<div style="float:left;width:100%;height:80px;margin-left: 20px;">
<div style="float:left;width:30%;height:80px;">
<div id="hourWaterP" style="float:left;height:80px;line-height: 80px;color: #69f6f9;font-size: 40px;">
</div>
<div id="hourWaterH" style="float:left;height:80px;line-height: 80px;font-size: 20px;padding-left: 10px;">
</div>
</div>
<div style="float:left;width:30%;height:80px;">
<div id="dayWaterP" style="float:left;height:80px;line-height: 80px;color: #69f6f9;font-size: 40px;">
</div>
<div id="dayWaterH" style="float:left;height:80px;line-height: 80px;font-size: 20px;padding-left: 10px;">
</div>
</div>
</div>
<div style="float:left;width:100%;height:320px;margin-left: 20px;background: #16314c;">
<div id="chart5" style="float:left;width: 100%;height: 100%;"></div>
</div>
</div>
</div>
</body>
</html>

View File

@ -0,0 +1,132 @@
<%@ 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">
/* 请求数据 */
function getValue() {
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
// console.log(data);
if(data!=''){
for(var i=0;i<data.length;i++){
if(data[i].elementCode=="waterNum"){
$('#waterNum').text(data[i].valueUrl);
}else if(data[i].elementCode=="serviceArea"){
$('#serviceArea').text(data[i].valueUrl);
}else if(data[i].elementCode=="peopleNum"){
$('#peopleNum').text(data[i].valueUrl);
}else if(data[i].elementCode=="textContent"){
$('#textContent').text(data[i].valueUrl);
}
}
}
}, 'json');
}
/* 定时器 */
//setInterval(change, 60000); //每1分钟切换
// setInterval(getValue, 3600000); //每一小时切换
/* 初始化 */
$(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("titleImage").src = ""+getRootPath()+"/images/大屏/大屏标题文字背景.png";
document.getElementById("waterImg").src = ""+getRootPath()+"/images/大屏/水量2.png";
document.getElementById("areaImg").src = ""+getRootPath()+"/images/大屏/服务面积.png";
document.getElementById("peopleImg").src = ""+getRootPath()+"/images/大屏/服务人口.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;
}
</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%;">
<div style="float:left;width:100%;height:35px;margin-left: 20px;">
<div style="float:left;width:194px;height:34px;">
<div style="position:absolute;top:12px;left:50px;z-index:999;opacity: 1;font-size: 20px;font-family: Microsoft YaHei, Microsoft YaHei-Regular;margin-left:20px;">项目概览</div>
<img id="titleImage" src="" style="z-index:998;position:relative;height:100%;width:100%;"/>
</div>
</div>
<div style="float:left;width:100%;height:46px;margin-left: 20px;margin-top: 30px;">
<div style="float:left;width:30px;height:42px;">
<img id="waterImg" src="" style="z-index:999;position:relative;height:100%;width:100%;"/>
</div>
<div style="float:left;width:180px;height:46px;line-height: 46px;font-size: 20px;color: #2b9dd8;padding-left: 15px;">
在线运营供水能力
</div>
<div id="waterNum" style="float:left;width:80px;height:46px;line-height: 46px;font-size: 40px;color: #69f6f9;padding-left: 15px;">
</div>
<div style="float:left;width:80px;height:46px;line-height: 46px;font-size: 20px;color: #2b9dd8;padding-left: 10px;">
万吨/天
</div>
</div>
<div style="float:left;width:100%;height:50px;margin-left: 20px;margin-top: 30px;">
<div style="float:left;width:40px;height:40px;padding-top: 5px;">
<img id="areaImg" src="" style="z-index:999;position:relative;height:100%;width:100%;"/>
</div>
<div style="float:left;width:100px;height:50px;color: #2b9dd8;padding-left: 10px;">
<div style="float:left;width: 100%;height: 30px;font-size: 20px;line-height: 30px;">服务面积</div>
<div style="float:left;width: 100%;height: 20px;font-size: 14px;line-height: 20px;">平方公里</div>
</div>
<div id="serviceArea" style="float:left;width:80px;height:50px;line-height: 50px;font-size: 30px;color: #69f6f9;">
</div>
<div style="float:left;width:40px;height:40px;padding-top: 5px;">
<img id="peopleImg" src="" style="z-index:999;position:relative;height:100%;width:100%;"/>
</div>
<div style="float:left;width:100px;height:50px;color: #2b9dd8;padding-left: 10px;">
<div style="float:left;width: 100%;height: 30px;font-size: 20px;line-height: 30px;">服务人口</div>
<div style="float:left;width: 100%;height: 20px;font-size: 14px;line-height: 20px;">万人</div>
</div>
<div id="peopleNum" style="float:left;width:80px;height:50px;line-height: 50px;font-size: 30px;color: #69f6f9;">
</div>
</div>
<div id="textContent" style="float:left;width:100%;height: 330px;padding-left: 20px;padding-top: 20px;color: #d8d8d8;line-height:35px;font-size: 19px;line-height: 40px;">
</div>
</div>
</div>
</body>
</html>

View File

@ -0,0 +1,167 @@
<%@ 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">
/* 请求数据 */
function getValue() {
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
// console.log(data);
if(data!=''){
for(var i=0;i<data.length;i++){
}
}
}, 'json');
}
/* 定时器 */
//setInterval(change, 60000); //每1分钟切换
// setInterval(getValue, 3600000); //每一小时切换
/* 初始化 */
$(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("titleImage").src = ""+getRootPath()+"/images/大屏/js/标题logo1.png";
document.getElementById("companylog").src = ""+getRootPath()+"/images/大屏/js/厂logo.png";
document.getElementById("log1").src = ""+getRootPath()+"/images/大屏/js/日处理.png";
document.getElementById("log2").src = ""+getRootPath()+"/images/大屏/js/处理工艺.png";
document.getElementById("log3").src = ""+getRootPath()+"/images/大屏/js/奖章.png";
document.getElementById("log4").src = ""+getRootPath()+"/images/大屏/js/运维等级.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;
}
</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:20px;padding-left:10px;padding-right:10px;">
<div style="height:100%;width:100%;">
<div style="float:left;width:100%;height:35px;padding-left: 20px;">
<div style="float:left;width:100%;height:34px;position:absolute;">
<div style="position:absolute;top:-4px;left:50px;z-index:999;opacity: 1;font-size: 21px;color:#d9f6fb;font-family:Source Han Sans CN, Source Han Sans CN-Regular;text-shadow:1.5px 1.5px 0 #174749, 1.5px -1.5px 0 #174749, -1.5px -1.5px 0 #174749, -1.5px 1.5px 0 #174749, 1.5px 1px 0 #174749, 1.5px -1px 0 #174749, -1.5px -1px 0 #174749, -1.5px 1px 0 #174749, 1.5px 0px 0 #174749, 1.5px 0px 0 #174749, -1.5px 0px 0 #174749, -1.5px 0px 0 #174749,1px 1.5px 0 #174749, 1px -1.5px 0 #174749, -1px -1.5px 0 #174749, -1px 1.5px 0 #174749, 1px 1px 0 #174749, 1px -1px 0 #174749, -1px -1px 0 #174749, -1px 1px 0 #174749, 1px 0px 0 #174749, 1px 0px 0 #174749, -1px 0px 0 #174749, -1px 0px 0 #174749, 0px 1.5px 0 #174749, 0px -1.5px 0 #174749, 0px -1.5px 0 #174749, 0px 1.5px 0 #174749, 0px 1px 0 #174749, 0px -1px 0 #174749, 0px -1px 0 #174749, 0px 1px 0 #174749;">企业概览</div>
<img id="titleImage" src="" style="z-index:998;position:relative;"/>
</div>
</div>
<div style="float:left;width:100%;height:35px;padding-left: 40px;margin-top:30px;">
<div style="float:left;width:100%;height:34px;position:absolute;">
<div style="position:absolute;left:50px;z-index:999;opacity: 1;font-size: 25px;color:#d9f6fb;font-family:Source Han Sans CN, Source Han Sans CN-Regular;">上海金山排海公司二车间</div>
<img id="companylog" src="" style="z-index:998;position:relative;"/>
</div>
</div>
<div style="float:left;width:100%;height:150px;padding-left: 40px;margin-top:30px;">
<div style="float:left;width:calc(60% - 1px);height:calc(50% - 1px);">
<div style="float:left;width:40%;height:100%;text-align:center;padding-top:10px;">
<img id="log1" src="" style="z-index:998;position:relative;"/>
</div>
<div style="float:left;width:60%;height:100%;">
<div style="float:left;width:100%;height:50%;font-size: 24px;font-family: ArialMT;color:#ffffff;">
15万
</div>
<div style="float:left;width:100%;height:50%;font-size: 14px;font-family: MicrosoftYaHei;color:#1cbec5;">
日处理能力(m³)
</div>
</div>
</div>
<div style="float:left;width:1px;height:calc(50% - 1px);padding-bottom:20px;">
<div style="float:left;width:100%;height:100%;border:1px solid #FFFFFF;opacity: 0.2;"></div>
</div>
<div style="float:left;width:calc(40% - 1px);height:calc(50% - 1px);">
<div style="float:left;width:50%;height:100%;text-align:center;padding-top:10px;">
<img id="log2" src="" style="z-index:998;position:relative;"/>
</div>
<div style="float:left;width:50%;height:100%;">
<div style="float:left;width:100%;height:50%;font-size: 24px;font-family: ArialMT;color:#ffffff;">
AAO
</div>
<div style="float:left;width:100%;height:50%;font-size: 14px;font-family: MicrosoftYaHei;color:#1cbec5;">
处理工艺
</div>
</div>
</div>
<div style="float:left;width:60%;height:1px;padding-right:20px;">
<div style="float:left;width:100%;height:100%;border:1px solid #FFFFFF;opacity: 0.2;"></div>
</div>
<div style="float:left;width:40%;height:1px;padding-left:20px;">
<div style="float:left;width:100%;height:100%;border:1px solid #FFFFFF;opacity: 0.2;"></div>
</div>
<div style="float:left;width:calc(60% - 1px);height:calc(50% - 1px);padding-top:12px;">
<div style="float:left;width:40%;height:100%;text-align:center;padding-top:10px;">
<img id="log3" src="" style="z-index:998;position:relative;"/>
</div>
<div style="float:left;width:60%;height:100%;">
<div style="float:left;width:100%;height:70%;font-size: 17px;font-family: ArialMT;color:#ffffff;">
<div style="float:left;width:100%;height:50%;font-size: 17px;font-family: ArialMT;color:#ffffff;">GB18918-2002</div>
<div style="float:left;width:100%;height:50%;font-size: 17px;font-family: ArialMT;color:#ffffff;">一级A</div>
</div>
<div style="float:left;width:100%;height:30%;font-size: 14px;font-family: MicrosoftYaHei;color:#1cbec5;line-height:30px;">
执行标准
</div>
</div>
</div>
<div style="float:left;width:1px;height:calc(50% - 1px);padding-top:20px;">
<div style="float:left;width:100%;height:100%;border:1px solid #FFFFFF;opacity: 0.2;"></div>
</div>
<div style="float:left;width:calc(40% - 1px);height:calc(50% - 1px);padding-top:12px;">
<div style="float:left;width:50%;height:100%;text-align:center;padding-top:10px;">
<img id="log4" src="" style="z-index:998;position:relative;"/>
</div>
<div style="float:left;width:50%;height:100%;">
<div style="float:left;width:100%;height:70%;font-size: 24px;font-family: ArialMT;color:#ffffff;">
A类
</div>
<div style="float:left;width:100%;height:30%;font-size: 14px;font-family: MicrosoftYaHei;color:#1cbec5;line-height:30px;">
运维等级
</div>
</div>
</div>
</div>
<div style="float:left;width:100%;padding-left: 40px;margin-top:30px;font-size: 20px;font-family: Source Han Sans CN, Source Han Sans CN-Regular;font-weight: 400;color:#ffffff;line-height: 36px;">
排海公司二车间位于金山区漕泾镇漕廊公路2208号总占地面积21.2公顷总规模15万吨/日一期已建7.5万吨/日于2018年7月通水运行。
</br> 污水处理采用预处理+一级强化处理+二级生物处理+深度处理+消毒的总体工艺;污泥处理采用重力浓缩+污泥调理+板框压滤工艺脱水污泥含水率控制在60%以下,脱水干污泥委托第三方处置。
</div>
</div>
</div>
</body>
</html>

View File

@ -0,0 +1,217 @@
<%@ 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">
//获取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;
}
//获取url地址根目录 当前taomcat下路径
function getRootPath2(){
var pathName = window.location.pathname.substring(1);
var webName = pathName == '' ? '' : pathName.substring(0, pathName.indexOf('/'));
return window.location.protocol + '//' + window.location.host +"/"+webName;
}
var mychart="";
/* 请求数据 */
function getValue() {
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
// console.log(data);
if(data!=null&&data.length>0){
for(var i=0;i<data.length;i++){
if(data[i].elementCode=="text"){
if(i==0){
$('#jsph').text((data[i].mPoint.parmvalue).toFixed(2));
}else if(i==1){
$('#csph').text((data[i].mPoint.parmvalue).toFixed(2));
}else if(i==2){
$('#jscod').text((data[i].mPoint.parmvalue).toFixed(0));
}else if(i==3){
$('#cscod').text((data[i].mPoint.parmvalue).toFixed(2));
}else if(i==4){
$('#jsnh3n').text((data[i].mPoint.parmvalue).toFixed(2));
}else if(i==5){
$('#csnh3n').text((data[i].mPoint.parmvalue).toFixed(2));
}else if(i==6){
$('#jstp').text((data[i].mPoint.parmvalue).toFixed(2));
}else if(i==7){
$('#cstp').text((data[i].mPoint.parmvalue).toFixed(2));
}else if(i==8){
$('#jstn').text((data[i].mPoint.parmvalue).toFixed(2));
}else if(i==9){
$('#cstn').text((data[i].mPoint.parmvalue).toFixed(2));
}else if(i==10){
$('#pjdo').text((data[i].mPoint.parmvalue).toFixed(2));
}else if(i==11){
$('#pjmlss').text((data[i].mPoint.parmvalue).toFixed(2));
}
}
}
}
}, 'json');
}
/* 定时器 */
setInterval(getValue, 300000); //<!--每隔5分钟刷新一次-->
//setInterval(change, 60000); //每1分钟切换
/* 初始化 */
$(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-15) + "px";
getValue();
//console.log("height",document.body.scrollHeight);
});
</script>
</head>
<body style="width:100%;height:100%;margin:0;padding:0;overflow-x:hidden;overflow-y:hidden">
<div style="height:100%;width:100%;">
<div id="main" style="height:100%;width:100%;padding:0px;background:rgba(19,32,85,0.27);border-radius: 8px;">
<div style="float:left;width:100%;height:100%;padding-top:25px ;">
<div style="float:left;width: 100%;height:80px;position:relative;">
<div style="float:left;width: 150px;height:80px;line-height: 80px;text-align: center;color: #ffffff;position: absolute;left:50%;margin-left: -75px;font-size: 24px;">
实时工艺情况
</div>
</div>
<div style="float:left;width: 100%;height:50px;position:relative;">
<div style="float:left;width: 140px;height:50px;background: #2b66a9;border-radius:10px;position: absolute;left:50%;margin-left: -70px;">
<div style="float:left;width:100%;height:100%;font-size: 18px;font-family: Helvetica;text-align: center;color: #7cffff;line-height: 50px;">pH</div>
</div>
</div>
<div style="float:left;width: 100%;height:80px;position:relative;">
<div style="float:left;width: 120px;height:80px;border-radius:10px;position: absolute;left:50%;margin-left: -50px;">
<div style="float:left;width:40%;height:50%;font-size: 20px;font-family: Helvetica;text-align: right;color: #7cffff;line-height: 40px;">进水</div>
<div id="jsph" style="float:left;width:60%;height:50%;font-size: 20px;font-family: Helvetica;text-align: left;color: #ffffff;line-height: 40px;padding-left:5px;"></div>
<div style="float:left;width:40%;height:50%;font-size: 20px;font-family: Helvetica;text-align: right;color: #7cffff;line-height: 40px;">出水</div>
<div id="csph" style="float:left;width:60%;height:50%;font-size: 20px;font-family: Helvetica;text-align: left;color: #ffffff;line-height: 40px;padding-left:5px;"></div>
</div>
</div>
<div style="float:left;width: 100%;height:50px;position:relative;">
<div style="float:left;width: 140px;height:50px;background: #2b66a9;border-radius:10px;position: absolute;left:50%;margin-left: -70px;">
<div style="float:left;width:70%;height:100%;font-size: 18px;font-family: Helvetica;text-align: center;color: #7cffff;line-height: 50px;padding-left: 35px;">COD</div>
<div style="float:left;width:30%;height:100%;font-size: 15px;font-family: Helvetica;text-align: left;color: #ffffff;line-height: 50px;padding-left:5px;">mg/L</div>
</div>
</div>
<div style="float:left;width: 100%;height:80px;position:relative;">
<div style="float:left;width: 120px;height:80px;border-radius:10px;position: absolute;left:50%;margin-left: -50px;">
<div style="float:left;width:40%;height:50%;font-size: 20px;font-family: Helvetica;text-align: right;color: #7cffff;line-height: 40px;">进水</div>
<div id="jscod" style="float:left;width:60%;height:50%;font-size: 20px;font-family: Helvetica;text-align: left;color: #ffffff;line-height: 40px;padding-left:5px;"></div>
<div style="float:left;width:40%;height:50%;font-size: 20px;font-family: Helvetica;text-align: right;color: #7cffff;line-height: 40px;">出水</div>
<div id="cscod" style="float:left;width:60%;height:50%;font-size: 20px;font-family: Helvetica;text-align: left;color: #ffffff;line-height: 40px;padding-left:5px;"></div>
</div>
</div>
<div style="float:left;width: 100%;height:50px;position:relative;">
<div style="float:left;width: 140px;height:50px;background: #2b66a9;border-radius:10px;position: absolute;left:50%;margin-left: -70px;">
<div style="float:left;width:70%;height:100%;font-size: 18px;font-family: Helvetica;text-align: center;color: #7cffff;line-height: 50px;padding-left: 30px;">NH3-N</div>
<div style="float:left;width:30%;height:100%;font-size: 15px;font-family: Helvetica;text-align: left;color: #ffffff;line-height: 50px;padding-left:5px;">mg/L</div>
</div>
</div>
<div style="float:left;width: 100%;height:80px;position:relative;">
<div style="float:left;width: 120px;height:80px;border-radius:10px;position: absolute;left:50%;margin-left: -50px;">
<div style="float:left;width:40%;height:50%;font-size: 20px;font-family: Helvetica;text-align: right;color: #7cffff;line-height: 40px;">进水</div>
<div id="jsnh3n" style="float:left;width:60%;height:50%;font-size: 20px;font-family: Helvetica;text-align: left;color: #ffffff;line-height: 40px;padding-left:5px;"></div>
<div style="float:left;width:40%;height:50%;font-size: 20px;font-family: Helvetica;text-align: right;color: #7cffff;line-height: 40px;">出水</div>
<div id="csnh3n" style="float:left;width:60%;height:50%;font-size: 20px;font-family: Helvetica;text-align: left;color: #ffffff;line-height: 40px;padding-left:5px;"></div>
</div>
</div>
<div style="float:left;width: 100%;height:50px;position:relative;">
<div style="float:left;width: 140px;height:50px;background: #2b66a9;border-radius:10px;position: absolute;left:50%;margin-left: -70px;">
<div style="float:left;width:70%;height:100%;font-size: 18px;font-family: Helvetica;text-align: center;color: #7cffff;line-height: 50px;padding-left: 35px;">TP</div>
<div style="float:left;width:30%;height:100%;font-size: 15px;font-family: Helvetica;text-align: left;color: #ffffff;line-height: 50px;padding-left:5px;">mg/L</div>
</div>
</div>
<div style="float:left;width: 100%;height:80px;position:relative;">
<div style="float:left;width: 120px;height:80px;border-radius:10px;position: absolute;left:50%;margin-left: -50px;">
<div style="float:left;width:40%;height:50%;font-size: 20px;font-family: Helvetica;text-align: right;color: #7cffff;line-height: 40px;">进水</div>
<div id="jstp" style="float:left;width:60%;height:50%;font-size: 20px;font-family: Helvetica;text-align: left;color: #ffffff;line-height: 40px;padding-left:5px;"></div>
<div style="float:left;width:40%;height:50%;font-size: 20px;font-family: Helvetica;text-align: right;color: #7cffff;line-height: 40px;">出水</div>
<div id="cstp" style="float:left;width:60%;height:50%;font-size: 20px;font-family: Helvetica;text-align: left;color: #ffffff;line-height: 40px;padding-left:5px;"></div>
</div>
</div>
<div style="float:left;width: 100%;height:50px;position:relative;">
<div style="float:left;width: 140px;height:50px;background: #2b66a9;border-radius:10px;position: absolute;left:50%;margin-left: -70px;">
<div style="float:left;width:70%;height:100%;font-size: 18px;font-family: Helvetica;text-align: center;color: #7cffff;line-height: 50px;padding-left: 35px;">TN</div>
<div style="float:left;width:30%;height:100%;font-size: 15px;font-family: Helvetica;text-align: left;color: #ffffff;line-height: 50px;padding-left:5px;">mg/L</div>
</div>
</div>
<div style="float:left;width: 100%;height:80px;position:relative;">
<div style="float:left;width: 120px;height:80px;border-radius:10px;position: absolute;left:50%;margin-left: -50px;">
<div style="float:left;width:40%;height:50%;font-size: 20px;font-family: Helvetica;text-align: right;color: #7cffff;line-height: 40px;">进水</div>
<div id="jstn" style="float:left;width:60%;height:50%;font-size: 20px;font-family: Helvetica;text-align: left;color: #ffffff;line-height: 40px;padding-left:5px;"></div>
<div style="float:left;width:40%;height:50%;font-size: 20px;font-family: Helvetica;text-align: right;color: #7cffff;line-height: 40px;">出水</div>
<div id="cstn" style="float:left;width:60%;height:50%;font-size: 20px;font-family: Helvetica;text-align: left;color: #ffffff;line-height: 40px;padding-left:5px;"></div>
</div>
</div>
<div style="float:left;width: 100%;height:50px;position:relative;">
<div style="float:left;width: 140px;height:50px;background: #2b66a9;border-radius:10px;position: absolute;left:50%;margin-left: -70px;">
<div style="float:left;width:70%;height:100%;font-size: 18px;font-family: Helvetica;text-align: center;color: #7cffff;line-height: 50px;padding-left: 20px;">平均DO</div>
<div style="float:left;width:30%;height:100%;font-size: 15px;font-family: Helvetica;text-align: left;color: #ffffff;line-height: 50px;padding-left:5px;">mg/L</div>
</div>
</div>
<div style="float:left;width: 100%;height:40px;position:relative;">
<div style="float:left;width: 120px;height:40px;border-radius:10px;position: absolute;left:50%;margin-left: -70px;">
<div style="float:left;width:60%;height:50%;font-size: 20px;font-family: Helvetica;text-align: right;color: #7cffff;line-height: 40px;">1-8#池</div>
<div id="pjdo" style="float:left;width:40%;height:50%;font-size: 20px;font-family: Helvetica;text-align: left;color: #ffffff;line-height: 40px;padding-left:5px;"></div>
</div>
</div>
<div style="float:left;width: 100%;height:50px;position:relative;">
<div style="float:left;width: 140px;height:50px;background: #2b66a9;border-radius:10px;position: absolute;left:50%;margin-left: -70px;">
<div style="float:left;width:70%;height:100%;font-size: 18px;font-family: Helvetica;text-align: center;color: #7cffff;line-height: 50px;padding-left: 10px;">平均MLSS</div>
<div style="float:left;width:30%;height:100%;font-size: 15px;font-family: Helvetica;text-align: left;color: #ffffff;line-height: 50px;padding-left:5px;">mg/L</div>
</div>
</div>
<div style="float:left;width: 100%;height:40px;position:relative;">
<div style="float:left;width: 120px;height:40px;border-radius:10px;position: absolute;left:50%;margin-left: -70px;">
<div style="float:left;width:60%;height:50%;font-size: 20px;font-family: Helvetica;text-align: right;color: #7cffff;line-height: 40px;">1-8#池</div>
<div id="pjmlss" style="float:left;width:40%;height:50%;font-size: 20px;font-family: Helvetica;text-align: left;color: #ffffff;line-height: 40px;padding-left:5px;"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

View File

@ -0,0 +1,258 @@
<%@ 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">
//获取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;
}
//获取url地址根目录 当前taomcat下路径
function getRootPath2(){
var pathName = window.location.pathname.substring(1);
var webName = pathName == '' ? '' : pathName.substring(0, pathName.indexOf('/'));
return window.location.protocol + '//' + window.location.host +"/"+webName;
}
var mychart="";
/* 请求数据 */
function getValue() {
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
// console.log(data);
if(data!=null&&data.length>0){
for(var i=0;i<data.length;i++){
if(i==0){
$('#jsph').text((data[i].visualCacheData.value).toFixed(2));
}else if(i==1){
$('#csph').text((data[i].visualCacheData.value).toFixed(2));
}else if(i==2){
$('#jscod').text((data[i].visualCacheData.value).toFixed(0));
}else if(i==3){
$('#cscod').text((data[i].visualCacheData.value).toFixed(2));
}else if(i==4){
$('#jsnh3n').text((data[i].visualCacheData.value).toFixed(2));
}else if(i==5){
$('#csnh3n').text((data[i].visualCacheData.value).toFixed(2));
}else if(i==6){
$('#jstp').text((data[i].visualCacheData.value).toFixed(2));
}else if(i==7){
$('#cstp').text((data[i].visualCacheData.value).toFixed(2));
}else if(i==8){
$('#jstn').text((data[i].visualCacheData.value).toFixed(2));
}else if(i==9){
$('#cstn').text((data[i].visualCacheData.value).toFixed(2));
}
// else if(i==10){
// $('#pjdo').text((data[i].visualCacheData.value).toFixed(2));
// }else if(i==11){
// $('#pjmlss').text((data[i].visualCacheData.value).toFixed(2));
// }
else if(i==10){
$('#zrcll').text((data[i].visualCacheData.value).toFixed(0)+"m³");
}else if(i==11){
$('#wnwyl').text((data[i].visualCacheData.value).toFixed(1)+"t");
}
}
}
}, 'json');
}
/* 定时器 */
setInterval(getValue, 300000); //<!--每隔5分钟刷新一次-->
//setInterval(change, 60000); //每1分钟切换
/* 初始化 */
$(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";
getValue();
//console.log("height",document.body.scrollHeight);
});
</script>
</head>
<body style="width:100%;height:100%;margin:0;padding:0;overflow-x:hidden;overflow-y:hidden">
<div style="height:100%;width:100%;">
<div id="main" style="height:100%;width:100%;padding:0px;background:rgba(19,32,85,0.27);border-radius: 8px;">
<div style="float:left;width:250px;height:100%;line-height:calc(100vh);text-align: center;color: #ffffff;font-size: 24px;">
实时工艺情况
</div>
<div style="float:left;width:calc(100% - 250px);height:100%;">
<div style="float:left;width:calc(100%/9);height:calc(100%);">
<div style="float:left;width:100%;height:calc(100%/3);position:relative;">
<div style="float:left;width:calc(100%*0.65);;height:100%;background: #2b66a9;border-radius:10px;position: absolute;left:17.5%;">
<div style="float:left;width:100%;height:100%;font-size: 18px;font-family: Helvetica;text-align: center;color: #7cffff;line-height:calc(100vh/3);">昨日处理量</div>
</div>
</div>
<div style="float:left;width:100%;height:calc(100%*0.66);position:relative;">
<div id="zrcll" style="float: left;width: 100%;line-height:calc(100vh*0.66);color: #ffffff;font-size: 18px;text-align: center;"></div>
</div>
</div>
<div style="float:left;width:calc(100%/9);height:calc(100%);">
<div style="float:left;width:100%;height:calc(100%/3);position:relative;">
<div style="float:left;width:calc(100%*0.65);;height:100%;background: #2b66a9;border-radius:10px;position: absolute;left:17.5%;">
<div style="float:left;width:100%;height:100%;font-size: 18px;font-family: Helvetica;text-align: center;color: #7cffff;line-height:calc(100vh/3);">污泥外运量</div>
</div>
</div>
<div style="float:left;width:100%;height:calc(100%*0.66);position:relative;">
<div id="wnwyl" style="float: left;width: 100%;line-height:calc(100vh*0.66);color: #ffffff;font-size: 18px;text-align: center;"></div>
</div>
</div>
<div style="float:left;width:calc(100%/9);height:calc(100%);">
<div style="float:left;width:100%;height:calc(100%/3);position:relative;">
<div style="float:left;width:calc(100%*0.65);;height:100%;background: #2b66a9;border-radius:10px;position: absolute;left:17.5%;">
<div style="float:left;width:100%;height:100%;font-size: 18px;font-family: Helvetica;text-align: center;color: #7cffff;line-height:calc(100vh/3);">pH</div>
</div>
</div>
<div style="float:left;width:calc(100%*0.55);height:calc(100%/3);position:relative;">
<div style="float: left;width: 100%;line-height:calc(100vh/3);color: #7cffff;font-size: 18px;font-family: Helvetica;text-align: right;letter-spacing:10px;">进水</div>
</div>
<div style="float:left;width:calc(100%*0.45);height:calc(100%/3);position:relative;">
<div id="jsph" style="float: left;width: 100%;line-height:calc(100vh/3);color: #ffffff;font-size: 18px;text-align: left;"></div>
</div>
<div style="float:left;width:calc(100%*0.55);height:calc(100%/3);position:relative;">
<div style="float: left;width: 100%;line-height:calc(100vh/3);color: #7cffff;font-size: 18px;font-family: Helvetica;text-align: right;letter-spacing:10px;">出水</div>
</div>
<div style="float:left;width:calc(100%*0.45);height:calc(100%/3);position:relative;">
<div id="csph" style="float: left;width: 100%;line-height:calc(100vh/3);color: #ffffff;font-size: 18px;text-align: left;"></div>
</div>
</div>
<div style="float:left;width:calc(100%/9);height:calc(100%);">
<div style="float:left;width:100%;height:calc(100%/3);position:relative;">
<div style="float:left;width:calc(100%*0.65);;height:100%;background: #2b66a9;border-radius:10px;position: absolute;left:17.5%;">
<div style="float:left;width:100%;height:100%;font-size: 18px;font-family: Helvetica;text-align: center;color: #7cffff;line-height:calc(100vh/3);">COD&nbsp;&nbsp;<a style="color: #ffffff;">mg/L</a></div>
</div>
</div>
<div style="float:left;width:calc(100%*0.55);height:calc(100%/3);position:relative;">
<div style="float: left;width: 100%;line-height:calc(100vh/3);color: #7cffff;font-size: 18px;font-family: Helvetica;text-align: right;letter-spacing:10px;">进水</div>
</div>
<div style="float:left;width:calc(100%*0.45);height:calc(100%/3);position:relative;">
<div id="jscod" style="float: left;width: 100%;line-height:calc(100vh/3);color: #ffffff;font-size: 18px;text-align: left;"></div>
</div>
<div style="float:left;width:calc(100%*0.55);height:calc(100%/3);position:relative;">
<div style="float: left;width: 100%;line-height:calc(100vh/3);color: #7cffff;font-size: 18px;font-family: Helvetica;text-align: right;letter-spacing:10px;">出水</div>
</div>
<div style="float:left;width:calc(100%*0.45);height:calc(100%/3);position:relative;">
<div id="cscod" style="float: left;width: 100%;line-height:calc(100vh/3);color: #ffffff;font-size: 18px;text-align: left;"></div>
</div>
</div>
<div style="float:left;width:calc(100%/9);height:calc(100%);">
<div style="float:left;width:100%;height:calc(100%/3);position:relative;">
<div style="float:left;width:calc(100%*0.65);;height:100%;background: #2b66a9;border-radius:10px;position: absolute;left:17.5%;">
<div style="float:left;width:100%;height:100%;font-size: 18px;font-family: Helvetica;text-align: center;color: #7cffff;line-height:calc(100vh/3);">NH3-N&nbsp;&nbsp;<a style="color: #ffffff;">mg/L</a></div>
</div>
</div>
<div style="float:left;width:calc(100%*0.55);height:calc(100%/3);position:relative;">
<div style="float: left;width: 100%;line-height:calc(100vh/3);color: #7cffff;font-size: 18px;font-family: Helvetica;text-align: right;letter-spacing:10px;">进水</div>
</div>
<div style="float:left;width:calc(100%*0.45);height:calc(100%/3);position:relative;">
<div id="jsnh3n" style="float: left;width: 100%;line-height:calc(100vh/3);color: #ffffff;font-size: 18px;text-align: left;"></div>
</div>
<div style="float:left;width:calc(100%*0.55);height:calc(100%/3);position:relative;">
<div style="float: left;width: 100%;line-height:calc(100vh/3);color: #7cffff;font-size: 18px;font-family: Helvetica;text-align: right;letter-spacing:10px;">出水</div>
</div>
<div style="float:left;width:calc(100%*0.45);height:calc(100%/3);position:relative;">
<div id="csnh3n" style="float: left;width: 100%;line-height:calc(100vh/3);color: #ffffff;font-size: 18px;text-align: left;"></div>
</div>
</div>
<div style="float:left;width:calc(100%/9);height:calc(100%);">
<div style="float:left;width:100%;height:calc(100%/3);position:relative;">
<div style="float:left;width:calc(100%*0.65);;height:100%;background: #2b66a9;border-radius:10px;position: absolute;left:17.5%;">
<div style="float:left;width:100%;height:100%;font-size: 18px;font-family: Helvetica;text-align: center;color: #7cffff;line-height:calc(100vh/3);">TP&nbsp;&nbsp;<a style="color: #ffffff;">mg/L</a></div>
</div>
</div>
<div style="float:left;width:calc(100%*0.55);height:calc(100%/3);position:relative;">
<div style="float: left;width: 100%;line-height:calc(100vh/3);color: #7cffff;font-size: 18px;font-family: Helvetica;text-align: right;letter-spacing:10px;">进水</div>
</div>
<div style="float:left;width:calc(100%*0.45);height:calc(100%/3);position:relative;">
<div id="jstp" style="float: left;width: 100%;line-height:calc(100vh/3);color: #ffffff;font-size: 18px;text-align: left;"></div>
</div>
<div style="float:left;width:calc(100%*0.55);height:calc(100%/3);position:relative;">
<div style="float: left;width: 100%;line-height:calc(100vh/3);color: #7cffff;font-size: 18px;font-family: Helvetica;text-align: right;letter-spacing:10px;">出水</div>
</div>
<div style="float:left;width:calc(100%*0.45);height:calc(100%/3);position:relative;">
<div id="cstp" style="float: left;width: 100%;line-height:calc(100vh/3);color: #ffffff;font-size: 18px;text-align: left;"></div>
</div>
</div>
<div style="float:left;width:calc(100%/9);height:calc(100%);">
<div style="float:left;width:100%;height:calc(100%/3);position:relative;">
<div style="float:left;width:calc(100%*0.65);;height:100%;background: #2b66a9;border-radius:10px;position: absolute;left:17.5%;">
<div style="float:left;width:100%;height:100%;font-size: 18px;font-family: Helvetica;text-align: center;color: #7cffff;line-height:calc(100vh/3);">TN&nbsp;&nbsp;<a style="color: #ffffff;">mg/L</a></div>
</div>
</div>
<div style="float:left;width:calc(100%*0.55);height:calc(100%/3);position:relative;">
<div style="float: left;width: 100%;line-height:calc(100vh/3);color: #7cffff;font-size: 18px;font-family: Helvetica;text-align: right;letter-spacing:10px;">进水</div>
</div>
<div style="float:left;width:calc(100%*0.45);height:calc(100%/3);position:relative;">
<div id="jstn" style="float: left;width: 100%;line-height:calc(100vh/3);color: #ffffff;font-size: 18px;text-align: left;"></div>
</div>
<div style="float:left;width:calc(100%*0.55);height:calc(100%/3);position:relative;">
<div style="float: left;width: 100%;line-height:calc(100vh/3);color: #7cffff;font-size: 18px;font-family: Helvetica;text-align: right;letter-spacing:10px;">出水</div>
</div>
<div style="float:left;width:calc(100%*0.45);height:calc(100%/3);position:relative;">
<div id="cstn" style="float: left;width: 100%;line-height:calc(100vh/3);color: #ffffff;font-size: 18px;text-align: left;"></div>
</div>
</div>
<!--
<div style="float:left;width:calc(100%/9);height:calc(100%);">
<div style="float:left;width:100%;height:calc(100%/3);position:relative;">
<div style="float:left;width:calc(100%*0.65);;height:100%;background: #2b66a9;border-radius:10px;position: absolute;left:17.5%;">
<div style="float:left;width:100%;height:100%;font-size: 18px;font-family: Helvetica;text-align: center;color: #7cffff;line-height:calc(100vh/3);">平均DO</div>
</div>
</div>
<div style="float:left;width:100%;height:calc(100%*0.66);position:relative;">
<div id="pjdo" style="float: left;width: 100%;line-height:calc(100vh*0.66);color: #ffffff;font-size: 18px;text-align: center;"></div>
</div>
</div>
<div style="float:left;width:calc(100%/9);height:calc(100%);">
<div style="float:left;width:100%;height:calc(100%/3);position:relative;">
<div style="float:left;width:calc(100%*0.65);;height:100%;background: #2b66a9;border-radius:10px;position: absolute;left:17.5%;">
<div style="float:left;width:100%;height:100%;font-size: 18px;font-family: Helvetica;text-align: center;color: #7cffff;line-height:calc(100vh/3);">平均MLSS</div>
</div>
</div>
<div style="float:left;width:100%;height:calc(100%*0.66);position:relative;">
<div id="pjmlss" style="float: left;width: 100%;line-height:calc(100vh*0.66);color: #ffffff;font-size: 18px;text-align: center;"></div>
</div>
</div> -->
</div>
</div>
</div>
</body>
</html>

View File

@ -0,0 +1,239 @@
<%@ 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">
//获取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;
}
//获取url地址根目录 当前taomcat下路径
function getRootPath2(){
var pathName = window.location.pathname.substring(1);
var webName = pathName == '' ? '' : pathName.substring(0, pathName.indexOf('/'));
return window.location.protocol + '//' + window.location.host +"/"+webName;
}
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方法用.进行拼接
}
/* 请求数据 */
function getValue() {
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
// console.log(data);
if(data!=''){
for(var i=0;i<data.length;i++){
if(data[i].elementCode=="img"){
var url=data[i].valueUrl;
$('#showIMG').css("background","url("+getRootPath()+""+url+") no-repeat");
$('#showIMG').css("background-size","contain");
}else if(data[i].elementCode=="inNowWater"){
$('#inNowWater').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
}else if(data[i].elementCode=="outNowWater"){
$('#outNowWater').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
}else if(data[i].elementCode=="inCod"){
if(data[i].visualCacheData.emptyvalue=='-'){
$('#inCod').text("-");
}else{
$('#inCod').text(numOutput((data[i].visualCacheData.value).toFixed(2)));
}
}else if(data[i].elementCode=="outCod"){
if(data[i].visualCacheData.emptyvalue=='-'){
$('#outCod').text("-");
}else{
$('#outCod').text(numOutput((data[i].visualCacheData.value).toFixed(2)));
}
}else if(data[i].elementCode=="inPh"){
if(data[i].visualCacheData.emptyvalue=='-'){
$('#inPh').text("-");
}else{
$('#inPh').text(numOutput((data[i].visualCacheData.value).toFixed(2)));
}
}else if(data[i].elementCode=="outPh"){
if(data[i].visualCacheData.emptyvalue=='-'){
$('#outPh').text("-");
}else{
$('#outPh').text(numOutput((data[i].visualCacheData.value).toFixed(2)));
}
}else if(data[i].elementCode=="inNh3n"){
if(data[i].visualCacheData.emptyvalue=='-'){
$('#inNh3n').text("-");
}else{
$('#inNh3n').text(numOutput((data[i].visualCacheData.value).toFixed(2)));
}
}else if(data[i].elementCode=="outNh3n"){
if(data[i].visualCacheData.emptyvalue=='-'){
$('#outNh3n').text("-");
}else{
$('#outNh3n').text(numOutput((data[i].visualCacheData.value).toFixed(2)));
}
}else if(data[i].elementCode=="inTn"){
if(data[i].visualCacheData.emptyvalue=='-'){
$('#inTn').text("-");
}else{
$('#inTn').text(numOutput((data[i].visualCacheData.value).toFixed(2)));
}
}else if(data[i].elementCode=="outTn"){
if(data[i].visualCacheData.emptyvalue=='-'){
$('#outTn').text("-");
}else{
$('#outTn').text(numOutput((data[i].visualCacheData.value).toFixed(2)));
}
}else if(data[i].elementCode=="inTp"){
if(data[i].visualCacheData.emptyvalue=='-'){
$('#inTp').text("-");
}else{
$('#inTp').text(numOutput((data[i].visualCacheData.value).toFixed(2)));
}
}else if(data[i].elementCode=="outTp"){
if(data[i].visualCacheData.emptyvalue=='-'){
$('#outTp').text("-");
}else{
$('#outTp').text(numOutput((data[i].visualCacheData.value).toFixed(2)));
}
}else if(data[i].elementCode=="waterDesign"){
$('#waterDesign').text(numOutput((data[i].visualCacheData.value).toFixed(1)));
}else if(data[i].elementCode=="todayWater"){
$('#todayWater').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
}else if(data[i].elementCode=="yesterdayWater"){
$('#yesterdayWater').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
}else if(data[i].elementCode=="yesterdayMud"){
$('#yesterdayMud').text(numOutput((data[i].visualCacheData.value).toFixed(0)));
}
}
}
}, 'json');
}
/* 定时器 */
setInterval(getValue, 300000); //每5分钟切换
//setInterval(change, 60000); //每1分钟切换
/* 初始化 */
$(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("backImage1").src = ""+getRootPath()+"/images/大屏/水.png";
getValue();
//console.log("height",document.body.scrollHeight);
});
</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-left:25px;padding-right:25px;padding-bottom:50px;padding-top:50px;">
<div style="height:100%;width:100%;background:transparent;border-radius: 8px;">
<div style="float:left;width: 100%;height: 140px;padding-left:100px;padding-right:100px;">
<table style="width:100%;height:100%;table-layout: fixed;text-align: center;vertical-align: middle;font-family: Helvetica;font-weight:bold;">
<tr style="width:100%;height:60px;background-color:rgb(0, 76, 124,0.9);">
<td style="width:80px;"></td>
<td style="width:60px;"></td>
<td >
<div style="float:left;width:100%;height:30%;color: #7CFFFF;font-size:20px;letter-spacing:3px;">瞬时水量</div>
<div style="float:left;width:100%;height:30%;color: #FFFFFF;padding-top: 10px;">m³</div>
</td>
<td >
<div style="float:left;width:100%;height:30%;color: #7CFFFF;font-size:20px;letter-spacing:3px;">COD</div>
<div style="float:left;width:100%;height:30%;color: #FFFFFF;padding-top: 10px;">mg/L</div>
</td>
<td >
<div style="float:left;width:100%;height:30%;color: #7CFFFF;font-size:20px;letter-spacing:3px;">pH</div>
<div style="float:left;width:100%;height:30%;color: #FFFFFF;padding-top: 10px;"></div>
</td>
<td >
<div style="float:left;width:100%;height:30%;color: #7CFFFF;font-size:20px;letter-spacing:3px;">NH3-N</div>
<div style="float:left;width:100%;height:30%;color: #FFFFFF;padding-top: 10px;">mg/L</div>
</td>
<td >
<div style="float:left;width:100%;height:30%;color: #7CFFFF;font-size:20px;letter-spacing:3px;">TN</div>
<div style="float:left;width:100%;height:30%;color: #FFFFFF;padding-top: 10px;">mg/L</div>
</td>
<td >
<div style="float:left;width:100%;height:30%;color: #7CFFFF;font-size:20px;letter-spacing:3px;">TP</div>
<div style="float:left;width:100%;height:30%;color: #FFFFFF;padding-top: 10px;">mg/L</div>
</td>
</tr>
<tr style="width:100%;height:35px;background-color:rgb(0, 76, 124,0.2);">
<td rowspan="2" style="width:60px;"><img id="backImage1" src="" style="z-index:999;position:relative;height:30px;width:25px;"/></td>
<td style="width:80px;color: #7cffff;font-size: 16px;">进水</td>
<td id="inNowWater" style="color:#00D8FF;font-size: 18px;" ></td>
<td id="inCod" style="color:#ffffff;font-size: 18px;">7.27</td>
<td id="inPh" style="color:#ffffff;font-size: 18px;">249.66</td>
<td id="inNh3n" style="color:#ffffff;font-size: 18px;">12.68</td>
<td id="inTn" style="color:#ffffff;font-size: 18px;">33.28</td>
<td id="inTp" style="color:#ffffff;font-size: 18px;">3.25</td>
</tr>
<tr style="width:100%;height:35px;background-color:rgb(0, 76, 124,0.2);">
<td style="width:80px;color: #6DC9FF;font-size: 16px;">出水</td>
<td id="outNowWater" style="color:#00D8FF;font-size: 18px;" ></td>
<td id="outCod" style="color:#ffffff;font-size: 18px;">7.1</td>
<td id="outPh" style="color:#ffffff;font-size: 18px;">12.68</td>
<td id="outNh3n" style="color:#ffffff;font-size: 18px;">0.3</td>
<td id="outTn" style="color:#ffffff;font-size: 18px;">4.91</td>
<td id="outTp" style="color:#ffffff;font-size: 18px;">0.03 </td>
</tr>
</table>
</div>
<div id="showIMG" style="float:left;width: 100%;height:calc(100% - 180px);">
<div style="position: relative;width: 260px;height: 160px;left:30px;top:40px;background: linear-gradient(149deg,#02395d 13%, rgba(0,16,107,0.5) 90%);border-radius: 24px;border: 2px solid #00edf2;">
<table style="width:100%;height:100%;table-layout: fixed;font-size:16px;text-align: center;vertical-align: middle;font-family: Helvetica;">
<tr>
<td style="width:120px;color: #FFFFFF;">设计水量:</td>
<td id="waterDesign" style="color: #a5f1f7;font-size: 20px;font-weight:bold;text-align: left;"></td>
<td style="width:80px;color: #FFFFFF;">万m³/D</td>
</tr>
<tr>
<td style="color: #FFFFFF;">今日水量:</td>
<td id="todayWater" style="color: #347EFB;font-size: 20px;font-weight:bold;text-align: left;"></td>
<td style="color: #FFFFFF;">m³</td>
</tr>
<tr>
<td style="color: #FFFFFF;">昨日水量:</td>
<td id="yesterdayWater" style="color: #347EFB;font-size: 20px;font-weight:bold;text-align: left;"></td>
<td style="color: #FFFFFF;">m³</td>
</tr>
<tr>
<td style="color: #FFFFFF;">昨日泥量:</td>
<td id="yesterdayMud" style="color: #F5A524;font-size: 20px;font-weight:bold;text-align: left;"></td>
<td style="color: #FFFFFF;">t</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</body>
</html>

View File

@ -0,0 +1,130 @@
<%@ 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_GetHourHistory", 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">
//获取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 fomatFloat(src,pos){
return Math.round(src*Math.pow(10, pos))/Math.pow(10, pos);
}
/* 请求数据 */
function getValue() {
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
if(data!=null&&data.length>0){
var barNum=0;
var v1=0;//目标值
var v2=0;//实际值
for(var i=0;i<data.length;i++){
if(data[i].elementCode=="bar"){
if(barNum==0){
v1=data[i].mPoint.parmvalue;
}else if(barNum==1){
v2=data[i].mPoint.parmvalue;
}
barNum++;
}
}
// v1=fomatFloat(v1/10000, 1);
// v2=fomatFloat(v2/10000, 1);
var dcl=Math.round(v2/v1*100);
if(dcl>100){
dcl=100;
}
var undcl=100-dcl;
var barHtml="";
barHtml+="<div style='float:left;width:100%;height:100%;'>";
barHtml+="<div style='float:left;width:100%;height:100%;padding-top:20px;padding-bottom:20px;padding-left:15px;padding-right:15px;'>";
barHtml+="<div style='float:left;width:100%;height:100%;background: #737683;border-radius: 20px 20px 3px 3px;box-shadow: 0px 8px 18px 0px rgba(23,25,29,0.05) inset;'>";
barHtml+="<div style='float:left;width:100%;height:"+undcl+"%;'></div>";
barHtml+="<div style='float:left;width:100%;height:"+dcl+"%;background: #3DC6C9;border-radius: 20px 20px 3px 3px;box-shadow: 0px 8px 18px 0px rgba(23,25,29,0.05) inset;'>";
barHtml+="<div style='float:left;width:100%;height:100%;text-align: center;color: #ffffff;font-family: Helvetica, Helvetica-Bold;font-size: 24px;'>"+dcl+"%</div>";
barHtml+="</div>";
barHtml+="</div>";
barHtml+="</div>";
barHtml+="</div>";
$('#chart').html(barHtml);
// var textnum=data.length-linenum;
var textHtml="";
// var ctextnum=0;
for(var m=0;m<data.length;m++){
if(data[m].elementCode=="text"){
textHtml+="<div style='float:left;width:50%;height: calc((100vh - 60px - 15px)/2);'>";
textHtml+="<div style='float:left;width:100%;height: calc((100vh - 60px - 15px)/2/2);line-height: calc((100vh - 60px - 15px)/2/2);font-size: 26px;font-family: Helvetica;text-align: center;color: #ffffff;'>"+data[m].name+"</div>";
textHtml+="<div style='float:left;width:100%;height: calc((100vh - 60px - 15px)/2/2);line-height: calc((100vh - 60px - 15px)/2/2);font-family: Helvetica;text-align: center;color: #69F6F9;'>";
textHtml+="<div style='float:left;width:60%;height: calc((100vh - 60px - 15px)/2/2);line-height: calc((100vh - 60px - 15px)/2/2);font-size: 30px;text-align: right;'>"+(data[m].mPoint.parmvalue/10000).toFixed(1)+"</div>";
textHtml+="<div style='float:left;width:40%;height: calc((100vh - 50px)/2/2);line-height: calc((100vh - 60px - 15px)/2/2);font-size: 18px;text-align: left;padding-left:15px;'>万吨</div>";
textHtml+="</div>";
textHtml+="</div>";
// ctextnum++;
}
}
$('#text').html(textHtml);
}
}, 'json');
}
/* 定时器 */
//setInterval(change, 60000); //每1分钟切换
setInterval(getValue, 3600000); //每一小时切换
/* 初始化 */
$(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-15) + "px";
document.getElementById("backImage").src = ""+getRootPath()+"/images/大屏/处理量.png";
getValue();
//console.log("height",document.body.scrollHeight);
});
</script>
</head>
<body style="width:100%;height:100%;margin:0;padding:0;overflow-x:hidden;overflow-y:hidden;padding-top:15px;">
<div style="height:100%;width:100%;">
<div id="main" style="height:100%;width:100%;background:rgba(19,32,85,0.27);border-radius: 8px;">
<div style='float:left;width:50%;height:60px;'><img id="backImage" src="" style="z-index:-1;position:relative;height:100%;width:100%;"/></div>
<div style='float:left;width:50%;height:60px;'></div>
<div id="chart" style="float:left;width:20%;height: calc(100vh - 60px - 15px);"></div>
<div id="text" style="float:left;width:80%;height: calc(100vh - 60px - 15px);padding-right: 15px;"></div>
</div>
</div>
</body>
</html>

View File

@ -0,0 +1,74 @@
<%@ 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">
/* 请求数据 */
function getValue() {
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
// console.log(data);
if(data!=''){
for(var i=0;i<data.length;i++){
if(data[i].elementCode=="logo"){
document.getElementById("image").src = ""+getRootPath()+""+data[i].valueUrl+"";
}
}
}
}, 'json');
}
/* 定时器 */
setInterval(getValue, 300000); //每1分钟切换
// setInterval(getValue, 3600000); //每一小时切换
/* 初始化 */
$(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";
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;
}
</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%;">
<img id="image" src="" style="z-index:998;position:relative;height:100%;width:100%;"/>
</div>
</body>
</html>

View File

@ -0,0 +1,78 @@
<%@ 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">
//获取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;
}
//获取url地址根目录 当前taomcat下路径
function getRootPath2(){
var pathName = window.location.pathname.substring(1);
var webName = pathName == '' ? '' : pathName.substring(0, pathName.indexOf('/'));
return window.location.protocol + '//' + window.location.host +"/"+webName;
}
var mychart="";
/* 请求数据 */
function getValue() {
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
if(data!=null&&data.length>0){
}
}, 'json');
}
/* 定时器 */
// setInterval(getValue, 300000); //<!--每隔5分钟刷新一次-->
//setInterval(change, 60000); //每1分钟切换
/* 初始化 */
$(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("main").style.height = "76px";
document.getElementById("backImage").src = ""+getRootPath()+"/images/大屏/logo.png";
getValue();
//console.log("height",document.body.scrollHeight);
});
</script>
</head>
<body style="width:100%;height:100%;margin:0;padding:0;overflow-x:hidden;overflow-y:hidden">
<div style="height:100%;width:100%;">
<div id="main" style="height:100%;width:100%;padding:0px;background:rgba(19,32,85,0.27);border-radius: 8px;">
<div style='float:right;width:10%;height:100%;'><img id="backImage" src="" style="z-index:-1;position:relative;height:70px;width:150px;margin-left: 8px;"/></div>
</div>
</div>
</body>
</html>

View File

@ -0,0 +1,92 @@
<%@ 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">
//获取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;
}
//获取url地址根目录 当前taomcat下路径
function getRootPath2(){
var pathName = window.location.pathname.substring(1);
var webName = pathName == '' ? '' : pathName.substring(0, pathName.indexOf('/'));
return window.location.protocol + '//' + window.location.host +"/"+webName;
}
var mychart="";
/* 请求数据 */
function getValue() {
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
if(data!=''){
for(var i=0;i<data.length;i++){
if(data[i].elementCode=="text"){
$('#text').text(data[i].valueUrl);
$('#text').attr("style",data[i].style);
}else if(data[i].elementCode=="planid"){
$('#text').attr("onclick","doGo('"+data[i].valueUrl+"');");
}
}
}
}, 'json');
}
/* 定时器 */
// setInterval(getValue, 300000); //<!--每隔5分钟刷新一次-->
//setInterval(change, 60000); //每1分钟切换
/* 初始化 */
$(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";
getValue();
//console.log("height",document.body.scrollHeight);
});
var websocket = new WebSocket('ws://' + window.location.host + ext.contextPath + '/chat?userName=大屏');
function doGo(planId){
//清除交互
var clearInterationJsonStr = "[{'type':'clearInteraction'}]";
websocket.send(clearInterationJsonStr);
var jsonstr = "[{'type':'plan','id':'" + planId + "'}]";
websocket.send(jsonstr);
}
</script>
</head>
<body style="width:100%;height:100%;margin:0;padding:0;overflow-x:hidden;overflow-y:hidden">
<div style="height:100%;width:100%;">
<div id="main" style="height:100%;width:100%;padding:0px;">
<div id="text" style="cursor: pointer;"></div>
</div>
</div>
</body>
</html>

View File

@ -0,0 +1,184 @@
<%@ 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">
//获取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;
}
var mychart="";
/* 请求数据 */
function getValue() {
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
// console.log(data);
var textdata=[];
var designValuedata=[];
if(data!=null&&data.length>0){
for(var i=0;i<data.length;i++){
if(data[i].elementCode=="text"){
textdata.push(data[i]);
}else if(data[i].elementCode=="designValue"){
designValuedata.push(data[i]);
}
}
var html1="";
var html2="";
for(var i=0;i<textdata.length;i++){
if(i<=2){
html1+="<div style='float:left;width:33%;height:100%;' >"
if(i==0){
html1+="<div style='float:left;width:100%;height:25%;' >";
}else if(i==2){
html1+="<div style='float:left;width:100%;height:25%;' >";
}else{
html1+="<div style='float:left;width:100%;height:25%;' >";
}
html1+="<div style='float:left;width:100%;height:100%;line-height: calc((100vh - 60px - 15px)/2*0.25);border-radius: 1px;font-size: 26px;font-family: PingFangSC, PingFangSC-Semibold;font-weight: 500;text-align: center;color: #ffffff;padding-left:5px;' >"+textdata[i].name+"</div>";
html1+="</div>";
if(i==0){
html1+="<div style='float:left;width:100%;height:50%;padding-left:30px;padding-right:30px;' >";
}else if(i==2){
html1+="<div style='float:left;width:100%;height:50%;padding-left:30px;padding-right:30px;' >";
}else{
html1+="<div style='float:left;width:100%;height:50%;padding-left:30px;padding-right:30px;' >";
}
html1+="<div style='float:left;width:100%;height:100%;line-height: calc((100vh - 60px - 30px)/2*0.5);background: linear-gradient(180deg,rgba(68,110,210,0.59), rgba(30,162,184,0));border-radius: 9px;font-size: 26px;font-family: Helvetica, Helvetica-Bold;font-weight: 500;text-align: center;color: #ffffff;' >"+textdata[i].mPoint.parmvalue.toFixed(2)+"</div>";
html1+="</div>";
if(i==0){
html1+="<div style='float:left;width:100%;height:25%;padding-left:5px;' >";
}else if(i==2){
html1+="<div style='float:left;width:100%;height:25%;padding-right:5px;' >";
}else{
html1+="<div style='float:left;width:100%;height:25%;' >";
}
if(i==0){
html1+="<div style='float:left;width:100%;height:100%;line-height: calc((100vh - 60px - 15px)/2*0.25);background: rgba(30,162,184,0.22);border-radius: 1px;font-size: 24px;font-family: PingFangSC, PingFangSC-Semibold;font-weight: 500;text-align: center;color: #ffffff;' >"+designValuedata[i].valueUrl+"</div>";
}else{
html1+="<div style='float:left;width:100%;height:100%;line-height: calc((100vh - 60px - 15px)/2*0.25);background: rgba(30,162,184,0.22);border-radius: 1px;font-size: 24px;font-family: PingFangSC, PingFangSC-Semibold;font-weight: 500;text-align: center;color: #ffffff;' >"+designValuedata[i].valueUrl+"</div>";
}
html1+="</div>";
html1+="</div>";
}
if(i<=5&&i>2){
html2+="<div style='float:left;width:33%;height:100%;' >"
if(i==3){
html2+="<div style='float:left;width:100%;height:25%;' >";
}else if(i==5){
html2+="<div style='float:left;width:100%;height:25%;' >";
}else{
html2+="<div style='float:left;width:100%;height:25%;' >";
}
html2+="<div style='float:left;width:100%;height:100%;line-height: calc((100vh - 60px - 15px)/2*0.25);border-radius: 1px;font-size: 26px;font-family: PingFangSC, PingFangSC-Semibold;font-weight: 500;text-align: center;color: #ffffff;padding-left:5px;' >"+textdata[i].name+"</div>";
html2+="</div>";
if(i==3){
html2+="<div style='float:left;width:100%;height:50%;padding-left:30px;padding-right:30px;' >";
}else if(i==5){
html2+="<div style='float:left;width:100%;height:50%;padding-left:30px;padding-right:30px;' >";
}else{
html2+="<div style='float:left;width:100%;height:50%;padding-left:30px;padding-right:30px;' >";
}
html2+="<div style='float:left;width:100%;height:100%;line-height: calc((100vh - 60px - 30px)/2*0.5);background: linear-gradient(180deg,rgba(68,110,210,0.59), rgba(30,162,184,0));border-radius: 9px;font-size: 26px;font-family: Helvetica, Helvetica-Bold;font-weight: 500;text-align: center;color: #ffffff;' >"+textdata[i].mPoint.parmvalue.toFixed(2)+"</div>";
html2+="</div>";
if(i==3){
html2+="<div style='float:left;width:100%;height:25%;padding-left:5px;' >";
}else if(i==5){
html2+="<div style='float:left;width:100%;height:25%;padding-right:5px;' >";
}else{
html2+="<div style='float:left;width:100%;height:25%;' >";
}
if(i==3){
html2+="<div style='float:left;width:100%;height:100%;line-height: calc((100vh - 60px - 15px)/2*0.25);background: rgba(30,162,184,0.22);border-radius: 1px;font-size: 24px;font-family: PingFangSC, PingFangSC-Semibold;font-weight: 500;text-align: center;color: #ffffff;' >"+designValuedata[i].valueUrl+"</div>";
}else{
html2+="<div style='float:left;width:100%;height:100%;line-height: calc((100vh - 60px - 15px)/2*0.25);background: rgba(30,162,184,0.22);border-radius: 1px;font-size: 24px;font-family: PingFangSC, PingFangSC-Semibold;font-weight: 500;text-align: center;color: #ffffff;' >"+designValuedata[i].valueUrl+"</div>";
}
html2+="</div>";
html2+="</div>";
}
}
$('#text1').html(html1);
$('#text2').html(html2);
// console.log(textdata);
// console.log(designValuedata);
}
}, 'json');
}
/* 定时器 */
setInterval(getValue, 300000); //<!--每隔5分钟刷新一次-->
//setInterval(change, 60000); //每1分钟切换
/* 初始化 */
$(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-15) + "px";
document.getElementById("backImage").src = ""+getRootPath()+"/images/大屏/出水水质.png";
getValue();
//console.log("height",document.body.scrollHeight);
});
</script>
</head>
<body style="width:100%;height:100%;margin:0;padding:0;overflow-x:hidden;overflow-y:hidden">
<div style="height:100%;width:100%;padding-top:15px;">
<div id="main" style="height:100%;width:100%;padding:0px;background:rgba(19,32,85,0.27);border-radius: 8px;">
<div style='float:left;width:50%;height:60px;'><img id="backImage" src="" style="z-index:-1;position: relative;height:100%;width: 100%;"/></div>
<div style='float:left;width:50%;height:60px;'></div>
<div style="float: left;width:15%;height: calc(100vh - 75px);">
<div style="float: left;width:100%;height: 50%;">
<div style="float: left;width:100%;height: 75%;"></div>
<div style="float: left;width:100%;height: 25%;line-height: calc((100vh - 75px)/2*0.25);font-size: 24px;color: #ffffff;text-align: center;">设计值</div>
</div>
<div style="float: left;width:100%;height: 50%;">
<div style="float: left;width:100%;height: 75%;"></div>
<div style="float: left;width:100%;height: 25%;line-height: calc((100vh - 75px)/2*0.25);font-size: 24px;color: #ffffff;text-align: center;">设计值</div>
</div>
</div>
<div style="float: left;width:85%;height: calc(100vh - 75px);">
<div id="text1" style="float:left;width:100%;height: calc((100vh - 60px - 15px)/2);"></div>
<div id="text2" style="float:left;width:100%;height: calc((100vh - 60px - 15px)/2);"></div>
</div>
</div>
</div>
</body>
</html>

View File

@ -0,0 +1,276 @@
<%@ 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">
/* 请求数据 */
function getValue() {
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
// console.log(data);
if(data!=''){
var series=[];
var nowHourP=0;
var lastHourP=0;
var nowdayP=0;
var lastdayP=0;
for(var i=0;i<data.length;i++){
if(data[i].elementCode=="line"){
if(data[i].getValueType!="getText"){
var datas=new Array();
for(var j=0;j<data[i].mPointHistory.length;j++){
const his=data[i].mPointHistory[j];
var ddata=new Array();
ddata.push(his.measuredt.substring(0,10));
ddata.push(his.parmvalue);
datas.push(ddata);
}
series.push({
data: datas,
name: data[i].name,
type: 'line',
symbol:'none',
smooth: true
});
}else if(data[i].getValueType=="getText"){
if(series!=''&&series.length>0){
var datas=new Array();
for (let j = 0; j < series[0].data.length; j++) {
const element = series[0].data[j];
var ddata=new Array();
ddata.push(element[0]);
ddata.push(data[i].valueUrl);
datas.push(ddata);
}
series.push({
data: datas,
name: data[i].name,
type: 'line',
symbol:'none',
smooth: true,
itemStyle:{
normal:{
lineStyle:{
type:'dotted'  //'dotted'虚线 'solid'实线
}
}
}
});
}
}
}else if(data[i].elementCode=="hourWater"){
// if(data[i].getValueType=="getNowHourFirst"){
nowHourP = data[i].mPoint.parmvalue;
// if(data[i].mPointHistory.length>0){
// if(data[i].mPointHistory[0]!=null){
// nowHourP=data[i].mPointHistory[0].parmvalue;
// }
// }
// }
// else if(data[i].getValueType=="getLastHourFirst"){
// if(data[i].mPointHistory.length>0){
// if(data[i].mPointHistory[0]!=null){
// lastHourP=data[i].mPointHistory[0].parmvalue;
// }
// }
// }
}else if(data[i].elementCode=="dayWater"){
// if(data[i].getValueType=="getTodaySumValue"){
nowdayP = data[i].mPoint.parmvalue;
// if(data[i].mPointHistory.length>0){
// if(data[i].mPointHistory[0]!=null){
// nowdayP=data[i].mPointHistory[0].parmvalue;
// }
// }
// }
// else if(data[i].getValueType=="getYesterdaySumValue"){
// if(data[i].mPointHistory.length>0){
// if(data[i].mPointHistory[0]!=null){
// lastdayP=data[i].mPointHistory[0].parmvalue;
// }
// }
//
// }
}
}
// var hourhb=(nowHourP-lastHourP)/lastHourP*100;
// hourhb=hourhb.toFixed(2);
$('#hourWaterP').text((nowHourP).toFixed(2));
// if(Number(hourhb)<0){
// $('#hourWaterH').css("color","red");
// $('#hourWaterH').text("⬇ 环比"+hourhb+"%");
// }else{
// $('#hourWaterH').css("color","#3fff00");
// $('#hourWaterH').text("⬆ 环比"+hourhb+"%");
// }
// var dayhb=(nowdayP-lastdayP)/lastdayP*100;
// dayhb=dayhb.toFixed(2);
$('#dayWaterP').text((nowdayP/10000).toFixed(2));
// if(Number(dayhb)<0){
// $('#dayWaterH').css("color","red");
// $('#dayWaterH').text("⬇ 环比"+dayhb+"%");
// }else{
// $('#dayWaterH').css("color","#3fff00");
// $('#dayWaterH').text("⬆ 环比"+dayhb+"%");
// }
var mychart=echarts.init(document.getElementById('chart'));
var option = {
color:['#20E9F2','#815DB7','#08A3A3'],
title: {
text: '水量处理曲线',
top:10,
left:20,
textStyle:{
color:'#FFFFFF'
}
},
legend: {
data: ['实际', '昨日', '考核'],
top:10,
right:20,
textStyle:{
color:'#FFFFFF'
}
},
tooltip: {
trigger: 'axis'
},
grid:{
left: '4%', // 与容器左侧的距离
right: '4%', // 与容器右侧的距离
// top: '10%', // 与容器顶部的距离
bottom: '10%', // 与容器底部的距离
containLabel:true
},
xAxis: {
type:"category",
axisLine:{
lineStyle:{
color:'#ffffff',
}
},
axisTick: {
show: false
},
splitLine: {
show: false
}
},
yAxis: {
type : 'value',
axisLine:{
lineStyle:{
color:'#ffffff',
}
},
splitLine: {
show: true,
lineStyle:{
color: '#8C8C8C'
}
}
},
series: series
};
// console.log(option);
mychart.setOption(option,true);
}
}, 'json');
}
/* 定时器 */
//setInterval(change, 60000); //每1分钟切换
setInterval(getValue, 3600000); //每一小时切换
/* 初始化 */
$(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";
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;
}
</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:30px;padding-left:10px;padding-right:10px;">
<div style="height:100%;width:100%;">
<div style="float:left;width:100%;height:26px;margin-left: 20px;">
<div style="float:left;width:50%;height:26px;">
<div style="float:left;width:100px;height:26px;line-height: 26px;color: #ffffff;font-size: 20px;">
当前处理量
</div>
<div style="float:left;width:100px;height:26px;line-height: 26px;color: #ffffff;font-size: 16px;">
m3/h
</div>
</div>
<div style="float:left;width:50%;height:26px;">
<div style="float:left;width:140px;height:26px;line-height: 26px;color: #ffffff;font-size: 20px;">
日累计处理量
</div>
<div style="float:left;width:100px;height:26px;line-height: 26px;color: #ffffff;font-size: 16px;">
万m3
</div>
</div>
</div>
<div style="float:left;width:100%;height:80px;margin-left: 20px;">
<div style="float:left;width:50%;height:80px;">
<div id="hourWaterP" style="float:left;height:80px;line-height: 80px;color: #69f6f9;font-size: 40px;">
</div>
<div id="hourWaterH" style="float:left;height:80px;line-height: 80px;font-size: 20px;padding-left: 10px;">
</div>
</div>
<div style="float:left;width:50%;height:80px;">
<div id="dayWaterP" style="float:left;height:80px;line-height: 80px;color: #69f6f9;font-size: 40px;">
</div>
<div id="dayWaterH" style="float:left;height:80px;line-height: 80px;font-size: 20px;padding-left: 10px;">
</div>
</div>
</div>
<div style="float:left;width:100%;height:280px;margin-left: 20px;background: #16314c;">
<div id="chart" style="float:left;width: 100%;height: 100%;"></div>
</div>
</div>
</div>
</body>
</html>

View File

@ -0,0 +1,283 @@
<%@ 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">
var series1=[];
var series2=[];
var legendData1=[];
var legendData2=[];
/* 请求数据 */
function getValue() {
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
// console.log(data);
if(data!=''){
var nowHourP=0;
var lastHourP=0;
var nowdayP=0;
var lastdayP=0;
for(var i=0;i<data.length;i++){
if(data[i].elementCode=="line1"){
var datas=new Array();
for(var j=0;j<data[i].mPointHistory.length;j++){
const his=data[i].mPointHistory[j];
var ddata=new Array();
ddata.push(his.measuredt.substring(11,13));
ddata.push(his.parmvalue);
datas.push(ddata);
}
series1.push({
data: datas,
name: data[i].name,
type: 'line',
symbol:'none',
smooth: true
});
legendData1.push(data[i].name);
}else if(data[i].elementCode=="line2"){
var datas=new Array();
for(var j=0;j<data[i].mPointHistory.length;j++){
const his=data[i].mPointHistory[j];
var ddata=new Array();
ddata.push(his.measuredt.substring(11,13));
ddata.push(his.parmvalue);
datas.push(ddata);
}
series2.push({
data: datas,
name: data[i].name,
type: 'line',
symbol:'none',
smooth: true
});
legendData2.push(data[i].name);
}else if(data[i].elementCode=="hourWater"){
if(data[i].getValueType=="getLastHourFirst"){
if(data[i].mPointHistory.length>0){
if(data[i].mPointHistory[0]!=null){
nowHourP=data[i].mPointHistory[0].parmvalue;
}
}
}else if(data[i].getValueType=="getYesterdayNowHourFirstValue"){
if(data[i].mPointHistory.length>0){
if(data[i].mPointHistory[0]!=null){
lastHourP=data[i].mPointHistory[0].parmvalue;
}
}
}
}else if(data[i].elementCode=="dayWater"){
if(data[i].getValueType=="getTodaySumValue"){
if(data[i].mPointHistory.length>0){
if(data[i].mPointHistory[0]!=null){
nowdayP=data[i].mPointHistory[0].parmvalue;
}
}
}else if(data[i].getValueType=="getYesterdayHisHourSumValue"){
if(data[i].mPointHistory.length>0){
if(data[i].mPointHistory[0]!=null){
lastdayP=data[i].mPointHistory[0].parmvalue;
}
}
}
}
}
var hourhb=(nowHourP-lastHourP)/lastHourP*100;
hourhb=hourhb.toFixed(2);
$('#hourWaterP').text((nowHourP/10000).toFixed(2));
if(Number(hourhb)<0){
$('#hourWaterH').css("color","red");
$('#hourWaterH').text("⬇ 环比"+hourhb+"%");
}else{
$('#hourWaterH').css("color","#3fff00");
$('#hourWaterH').text("⬆ 环比"+hourhb+"%");
}
var dayhb=(nowdayP-lastdayP)/lastdayP*100;
dayhb=dayhb.toFixed(2);
$('#dayWaterP').text((nowdayP/10000).toFixed(2));
if(Number(dayhb)<0){
$('#dayWaterH').css("color","red");
$('#dayWaterH').text("⬇ 环比"+dayhb+"%");
}else{
$('#dayWaterH').css("color","#3fff00");
$('#dayWaterH').text("⬆ 环比"+dayhb+"%");
}
getchart('瞬时供水量',series1,legendData1);
}
}, 'json');
}
function getchart(title,series,legendData){
document.getElementById("chart").removeAttribute("_echarts_instance_");
var mychart=echarts.init(document.getElementById('chart'));
var option = {
color:['#815DB7','#20E9F2','#08A3A3'],
title: {
text: title,
top:10,
left:20,
textStyle:{
color:'#FFFFFF'
},
triggerEvent: true
},
legend: {
data: legendData,
top:10,
right:20,
textStyle:{
color:'#FFFFFF'
}
},
tooltip: {
trigger: 'axis'
},
grid:{
left: '4%', // 与容器左侧的距离
right: '4%', // 与容器右侧的距离
// top: '10%', // 与容器顶部的距离
bottom: '10%', // 与容器底部的距离
containLabel:true
},
xAxis: {
type:"category",
axisLine:{
lineStyle:{
color:'#ffffff',
}
},
axisTick: {
show: false
},
splitLine: {
show: false
}
},
yAxis: {
type : 'value',
axisLine:{
lineStyle:{
color:'#ffffff',
}
},
splitLine: {
show: true,
lineStyle:{
color: '#8C8C8C'
}
}
},
series: series
};
mychart.on('click', function (params) {
if(params.componentType && params.componentType === "title"){
if(params.event.topTarget.style.text === '瞬时供水量'){
getchart('累计供水量',series2,legendData2);
}else if(params.event.topTarget.style.text === '累计供水量'){
getchart('瞬时供水量',series1,legendData1);
}
}
})
// console.log(option);
mychart.setOption(option,true);
window.addEventListener("resize", function () {
myChart.resize();
});
}
/* 定时器 */
//setInterval(change, 60000); //每1分钟切换
setInterval(getValue, 3600000); //每一小时切换
/* 初始化 */
$(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";
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;
}
</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:30px;padding-left:10px;padding-right:10px;">
<div style="height:100%;width:100%;">
<div style="float:left;width:100%;height:26px;margin-left: 20px;">
<div style="float:left;width:50%;height:26px;">
<div style="float:left;width:100px;height:26px;line-height: 26px;color: #ffffff;font-size: 20px;">
当前供水量
</div>
<div style="float:left;width:100px;height:26px;line-height: 26px;color: #ffffff;font-size: 16px;">
万m3/h
</div>
</div>
<div style="float:left;width:50%;height:26px;">
<div style="float:left;width:140px;height:26px;line-height: 26px;color: #ffffff;font-size: 20px;">
今日累计供水量
</div>
<div style="float:left;width:100px;height:26px;line-height: 26px;color: #ffffff;font-size: 16px;">
万m3
</div>
</div>
</div>
<div style="float:left;width:100%;height:80px;margin-left: 20px;">
<div style="float:left;width:50%;height:80px;">
<div id="hourWaterP" style="float:left;height:80px;line-height: 80px;color: #69f6f9;font-size: 40px;">
</div>
<div id="hourWaterH" style="float:left;height:80px;line-height: 80px;font-size: 20px;padding-left: 10px;">
</div>
</div>
<div style="float:left;width:50%;height:80px;">
<div id="dayWaterP" style="float:left;height:80px;line-height: 80px;color: #69f6f9;font-size: 40px;">
</div>
<div id="dayWaterH" style="float:left;height:80px;line-height: 80px;font-size: 20px;padding-left: 10px;">
</div>
</div>
</div>
<div style="float:left;width:100%;height:280px;margin-left: 20px;background: #16314c;">
<div id="chart" style="float:left;width: 100%;height: 100%;"></div>
</div>
</div>
</div>
</body>
</html>

View File

@ -0,0 +1,185 @@
<%@ 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_GetHourHistory", 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">
//获取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 getValue() {
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
// console.log("weather",data);
var myDate = new Date;
var year = myDate.getFullYear(); //获取当前年
var mon = myDate.getMonth() + 1; //获取当前月
var date = myDate.getDate(); //获取当前日
var h = myDate.getHours();//获取当前小时数(0-23)
var m = myDate.getMinutes();//获取当前分钟数(0-59)
if(parseInt(m)<10){
m="0"+m;
}
// var s = myDate.getSeconds();//获取当前秒
var week = myDate.getDay();
var weeks = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
// console.log(year, mon, date, weeks[week]);
$("#time").html(year + "年" + mon + "月" + date + "日" +" "+ weeks[week]+" "+h+":"+m);
if(data!=null&&data.length>0){
for(var i=0;i<data.length;i++){
if(data[i].elementCode=="weather"){
var temperature=data[i].weather.temperature;
var weatherqk=data[i].weather.weather;
var temprange=data[i].weather.temprange;
var airquality=data[i].weather.airquality;
var weatherImgUrl="/images/大屏";
if(weatherqk=="晴"){
weatherImgUrl+="/晴.png";
}else if(weatherqk=="阴"){
weatherImgUrl+="/阴.png";
}else if(weatherqk=="多云"){
weatherImgUrl+="/多云.png";
}else if(weatherqk.indexOf("雨")>0){
weatherImgUrl+="/雨.png";
}else if(weatherqk.indexOf("雪")>0){
weatherImgUrl+="/雪.png";
}
$('#weatherImg').css("background","url("+getRootPath()+""+weatherImgUrl+") 50% 50% / 70% 70% no-repeat");
$("#temperature").text(temperature);
var airqualitys=[];
airqualitys=airquality.split(" ");
$("#airquality1").text(airqualitys[0]);
$("#airquality2").text(airqualitys[1]);
$("#temprange").text(temprange);
}else if(data[i].elementCode=="safedays"){
var safedays=data[i].mPoint.parmvalue;
var safeday1=String(safedays).substring(0,1);
var safeday2=String(safedays).substring(1,2);
var safeday3=String(safedays).substring(2,3);
var safeday4=String(safedays).substring(3,4);
$("#safeday1").text(safeday1);
$("#safeday2").text(safeday2);
$("#safeday3").text(safeday3);
$("#safeday4").text(safeday4);
}
}
}
}, 'json');
}
/* 定时器 */
// setInterval(getValue, 300000); //<!--每隔5分钟刷新一次-->
setInterval(change, 30000); //每半分钟切换
setInterval(getValue, 3600000); //每一小时切换
function change(){
var myDate = new Date;
var year = myDate.getFullYear(); //获取当前年
var mon = myDate.getMonth() + 1; //获取当前月
var date = myDate.getDate(); //获取当前日
var h = myDate.getHours();//获取当前小时数(0-23)
var m = myDate.getMinutes();//获取当前分钟数(0-59)
if(parseInt(m)<10){
m="0"+m;
}
// var s = myDate.getSeconds();//获取当前秒
var week = myDate.getDay();
var weeks = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
// console.log(year, mon, date, weeks[week]);
$("#time").html(year + "年" + mon + "月" + date + "日" +" "+ weeks[week]+" "+h+":"+m);
}
/* 初始化 */
$(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-15) + "px";
getValue();
document.getElementById("safeImage").src = ""+getRootPath()+"/images/大屏/安全帽.png";
//console.log("height",document.body.scrollHeight);
});
</script>
</head>
<body style="width:100%;height:100%;margin:0;padding:0;overflow-x:hidden;overflow-y:hidden">
<div style="height:100%;width:100%;padding-top:15px;">
<div id="main" style="height:100%;width:100%;background:rgba(19,32,85,0.27);border-radius: 8px;">
<div id="time" style='float:left;width:100%;height:60px;line-height: 60px;color: #69F6F9;font-size: 28px;padding-left:30px;'>
</div>
<div style="float:left;width:50%;height: calc(100vh - 60px - 15px);line-height: calc(100vh - 60px - 15px);">
<div style="float:left;width:50%;height: calc(100vh - 60px - 15px);line-height: calc(100vh - 60px - 15px);">
<div id="weatherImg" style="float:left;width:100%;height: calc((100vh - 60px - 15px)*0.65);line-height: calc((100vh - 60px - 15px)*0.65);margin-left:10px;"></div>
<div id="temperature" style="float:left;width:100%;height: calc((100vh - 60px - 15px)*0.35);line-height: calc((100vh - 60px - 80px)*0.35);color: #69F6F9;font-size: 28px;text-align: center;padding-left: 18px;"></div>
</div>
<div style="float:left;width:50%;height: calc(100vh - 60px - 15px);line-height: calc(100vh - 60px - 15px);">
<div style="float:left;width:100%;height: calc((100vh - 60px - 15px)*0.65);line-height: calc((100vh - 60px - 15px)*0.65);">
<div id="airquality" style="width:100px;height:100px;border-radius:50%;border:solid #87E8E1 2px;margin-left:35px;margin-top:25px;background-color:#11002A;">
<div id="airquality1" style="float:left;width:100px;height:60px;line-height: 60px;color:#ffffff;text-align:center;font-size: 26px;padding-right: 5px;"></div>
<div id="airquality2" style="float:left;width:100px;height:40px;line-height: 20px;color:#ffffff;text-align:center;font-size: 26px;padding-right: 5px;"></div>
</div>
</div>
<div id="temprange" style="float:left;width:100%;height: calc((100vh - 60px - 15px)*0.35);line-height: calc((100vh - 60px - 80px)*0.35);color: #69F6F9;font-size: 28px;text-align: center;"></div>
</div>
</div>
<div style='float:left;width:50%;height: calc(100vh - 60px - 15px);line-height: calc(100vh - 60px - 15px);'>
<div style='float:left;width:100%;height: calc((100vh - 60px - 15px)/2);line-height: calc((100vh - 60px - 15px)/2);color:#ffffff;font-size: 30px;'>
<img id="safeImage" src="" style="z-index:-1;position:relative;width:60px;height:60px;"/> 已安全生产
</div>
<div style='float:left;width:100%;height: calc((100vh - 60px - 15px)/2);line-height: calc((100vh - 60px - 15px)/2);color:#ffffff;font-size: 26px;'>
<div style="float:left;width:20%;height:80%;padding-top:10px;padding-left: 4px;padding-right: 4px;">
<div id="safeday1" style='float:left;width:100%;height:100%;line-height: calc((100vh - 60px - 75px)/2);background: linear-gradient(180deg,#225b97, #0f2e5e);border-radius: 10px;box-shadow: 0px 1px 17px 0px rgba(255,255,255,0.5) inset, 0px -1px 6px 0px rgba(28,54,158,0.5) inset;color:#ffffff;text-align: center;'></div>
</div>
<div style="float:left;width:20%;height:80%;padding-top:10px;padding-left: 4px;padding-right: 4px;">
<div id="safeday2" style='float:left;width:100%;height:100%;line-height: calc((100vh - 60px - 75px)/2);background: linear-gradient(180deg,#225b97, #0f2e5e);border-radius: 10px;box-shadow: 0px 1px 17px 0px rgba(255,255,255,0.5) inset, 0px -1px 6px 0px rgba(28,54,158,0.5) inset;color:#ffffff;text-align: center;'></div>
</div>
<div style="float:left;width:20%;height:80%;padding-top:10px;padding-left: 4px;padding-right: 4px;">
<div id="safeday3" style='float:left;width:100%;height:100%;line-height: calc((100vh - 60px - 75px)/2);background: linear-gradient(180deg,#225b97, #0f2e5e);border-radius: 10px;box-shadow: 0px 1px 17px 0px rgba(255,255,255,0.5) inset, 0px -1px 6px 0px rgba(28,54,158,0.5) inset;color:#ffffff;text-align: center;'></div>
</div>
<div style="float:left;width:20%;height:80%;padding-top:10px;padding-left: 4px;padding-right: 4px;">
<div id="safeday4" style='float:left;width:100%;height:100%;line-height: calc((100vh - 60px - 75px)/2);background: linear-gradient(180deg,#225b97, #0f2e5e);border-radius: 10px;box-shadow: 0px 1px 17px 0px rgba(255,255,255,0.5) inset, 0px -1px 6px 0px rgba(28,54,158,0.5) inset;color:#ffffff;text-align: center;'></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

View File

@ -0,0 +1,301 @@
<%@ 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">
//获取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;
}
//获取url地址根目录 当前taomcat下路径
function getRootPath2(){
var pathName = window.location.pathname.substring(1);
var webName = pathName == '' ? '' : pathName.substring(0, pathName.indexOf('/'));
return window.location.protocol + '//' + window.location.host +"/"+webName;
}
var mychart="";
/* 请求数据 */
function getValue() {
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
// console.log(data);
if(data!=null&&data.length>0){
var textHtml="";
var textHtml3="";
var textHtml4="";
for(var m=0;m<data.length;m++){
if(m==0||m==1){
textHtml+="<div style='float:left;padding-left:5px;padding-right:5px;padding-top:20px;padding-bottom:20px;width:100%;height: calc((100vh - 60px - 30px)/2);'>";
textHtml+="<div style='float:left;width:100%;height:100%;background:#3482FF;border-radius:10px;'>";
textHtml+="<div style='float:left;width:100%;height:50%;line-height: calc((100vh - 60px - 45px)/2/2 + 15px);background:#3482FF;border-radius:10px;color: #fafafa;font-family: Helvetica;font-size: 20px;text-align: center;'>"+data[m].name+"</div>";
textHtml+="<div style='float:left;width:100%;height:50%;line-height: calc((100vh - 60px - 45px)/2/2 - 20px);background:#3482FF;border-radius:10px;color: #ffffff;font-family: Helvetica;font-size: 24px;text-align: center;'>"+data[m].mPoint.parmvalue+"</div>";
textHtml+="</div>";
textHtml+="</div>";
}
if(m==2){
var value=data[m].mPoint.parmvalue;
var mychart=echarts.init(document.getElementById('chart1'));
var option = {
title: {
text: value.toFixed(0)+"%",
textStyle: {
color: '#01c4a3',
fontSize: 24
},
subtext: "完成率",
subtextStyle: {
color: '#909090',
fontSize: 22
},
itemGap: 5, // 主副标题距离
left: 'center',
top: 'center'
},
angleAxis: {
max: 100, // 满分
clockwise: false, // 逆时针
// 隐藏刻度线
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
splitLine: {
show: false
}
},
radiusAxis: {
type: 'category',
// 隐藏刻度线
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
splitLine: {
show: false
}
},
polar: {
center: ['50%', '50%'],
radius: '140%' //图形大小
},
series: [{
type: 'bar',
data: [{
name: '百分比',
value: value,
itemStyle: {
color: '#41C6C9'
},
}],
coordinateSystem: 'polar',
roundCap: true,
barWidth: 15,
barGap: '-100%', // 两环重叠
z: 2,
},{ // 灰色环
type: 'bar',
data: [{
value: 100,
itemStyle: {
color: '#2B3F69',
shadowColor: 'rgba(0, 0, 0, 0.2)',
shadowBlur: 5,
shadowOffsetY: 2
}
}],
coordinateSystem: 'polar',
roundCap: true,
barWidth: 15,
barGap: '-100%', // 两环重叠
z: 1
}]
};
// console.log(option);
mychart.setOption(option,true);
}
if(m==3||m==4){
textHtml3+="<div style='float:left;width:100%;height:50%;'>";
textHtml3+="<div style='float:left;width:100%;height:65%;line-height: calc((100vh)/2*0.65);color: #69F6F9;font-family: Helvetica;font-size: 24px;text-align: center;'>"+data[m].mPoint.parmvalue+"</div>";
textHtml3+="<div style='float:left;width:100%;height:35%;line-height: calc((100vh - 60px - 30px)/2*0.35);color: #ffffff;font-family: Helvetica;font-size: 20px;text-align: center;'>"+data[m].name+"</div>";
textHtml3+="</div>";
}
if(m==5){
var value=data[m].mPoint.parmvalue;
var mychart=echarts.init(document.getElementById('chart2'));
var option = {
title: {
text: value.toFixed(0)+"%",
textStyle: {
color: '#01c4a3',
fontSize: 24
},
subtext: "完成率",
subtextStyle: {
color: '#909090',
fontSize: 22
},
itemGap: 5, // 主副标题距离
left: 'center',
top: 'center'
},
angleAxis: {
max: 100, // 满分
clockwise: false, // 逆时针
// 隐藏刻度线
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
splitLine: {
show: false
}
},
radiusAxis: {
type: 'category',
// 隐藏刻度线
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
splitLine: {
show: false
}
},
polar: {
center: ['50%', '50%'],
radius: '140%' //图形大小
},
series: [{
type: 'bar',
data: [{
name: '百分比',
value: value,
itemStyle: {
color: '#F5A623'
},
}],
coordinateSystem: 'polar',
roundCap: true,
barWidth: 15,
barGap: '-100%', // 两环重叠
z: 2,
},{ // 灰色环
type: 'bar',
data: [{
value: 100,
itemStyle: {
color: '#2B3F69',
shadowColor: 'rgba(0, 0, 0, 0.2)',
shadowBlur: 5,
shadowOffsetY: 2
}
}],
coordinateSystem: 'polar',
roundCap: true,
barWidth: 15,
barGap: '-100%', // 两环重叠
z: 1
}]
};
// console.log(option);
mychart.setOption(option,true);
}
if(m==6||m==7){
textHtml4+="<div style='float:left;width:100%;height:50%;'>";
textHtml4+="<div style='float:left;width:100%;height:65%;line-height: calc((100vh)/2*0.65);color: #69F6F9;font-family: Helvetica;font-size: 24px;text-align: center;'>"+data[m].mPoint.parmvalue+"</div>";
textHtml4+="<div style='float:left;width:100%;height:35%;line-height: calc((100vh - 60px - 30px)/2*0.35);color: #ffffff;font-family: Helvetica;font-size: 20px;text-align: center;'>"+data[m].name+"</div>";
textHtml4+="</div>";
}
}
$('#text').html(textHtml);
$('#text3').html(textHtml3);
$('#text4').html(textHtml4);
}
}, 'json');
}
/* 定时器 */
//setInterval(change, 60000); //每1分钟切换
setInterval(getValue, 3600000); //每一小时切换
/* 初始化 */
$(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-15) + "px";
document.getElementById("backImage").src = ""+getRootPath()+"/images/大屏/工单情况.png";
getValue();
//console.log("height",document.body.scrollHeight);
});
</script>
</head>
<body style="width:100%;height:100%;margin:0;padding:0;overflow-x:hidden;overflow-y:hidden">
<div style="height:100%;width:100%;padding-top:15px;">
<div id="main" style="height:100%;width:100%;padding:0px;background:rgba(19,32,85,0.27);border-radius: 8px;">
<div style='float:left;width:50%;height:60px;'><img id="backImage" src="" style="z-index:-1;position:relative;height:100%;width: 100%;"/></div>
<div style='float:left;width:50%;height:60px;'></div>
<div id="text" style="float:left;width:15%;height: calc(100vh - 60px - 15px);"></div>
<div style="float:left;width:85%;height: calc(100vh - 60px - 15px);">
<div style="float:left;width:50%;height:100%">
<div id="chart1" style="float:left;width:70%;height:100%"></div>
<div id="text3" style="float:left;width:30%;height:100%"></div>
</div>
<div style="float:left;width:50%;height:100%">
<div id="chart2" style="float:left;width:70%;height:100%"></div>
<div id="text4" style="float:left;width:30%;height:100%"></div>
</div>
</div>
</div>
</div>
</body>
</html>

View File

@ -0,0 +1,138 @@
<%@ 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">
/* 请求数据 */
function getValue() {
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
// console.log(data);
if(data!=''){
for(var i=0;i<data.length;i++){
}
}
var tableHtml="";
tableHtml+="<tr style=\"font-size: 18px;color: #dbeeff;text-align: center;height:20%;border-bottom:1px solid #1CBEC5;\">";
tableHtml+="<td style=\"width:120px;\">工单</td>";
tableHtml+="<td style=\"width:120px;\">发布时间</td>";
tableHtml+="<td style=\"width:90px;\">发布人</td>";
tableHtml+="<td style=\"width:60px;\">状态</td>";
tableHtml+="</tr>";
tableHtml+="<tr style=\"font-size: 18px;color: #ffffff;text-align: center;height:20%;border-bottom:1px solid #1CBEC5;\">";
tableHtml+="<td >工单名称1</td>";
tableHtml+="<td >2020-05-10 08:00</td>";
tableHtml+="<td >管理员</td>";
tableHtml+="<td >正常</td>";
tableHtml+="</tr>";
tableHtml+="<tr style=\"font-size: 18px;color: #ffffff;text-align: center;height:20%;border-bottom:1px solid #1CBEC5;\">";
tableHtml+="<td ></td>";
tableHtml+="<td ></td>";
tableHtml+="<td </td>";
tableHtml+="<td ></td>";
tableHtml+="</tr>";
tableHtml+="<tr style=\"font-size: 18px;color: #ffffff;text-align: center;height:20%;border-bottom:1px solid #1CBEC5;\">";
tableHtml+="<td ></td>";
tableHtml+="<td ></td>";
tableHtml+="<td </td>";
tableHtml+="<td ></td>";
tableHtml+="</tr>";
tableHtml+="<tr style=\"font-size: 18px;color: #ffffff;text-align: center;height:20%;border-bottom:1px solid #1CBEC5;\">";
tableHtml+="<td ></td>";
tableHtml+="<td ></td>";
tableHtml+="<td </td>";
tableHtml+="<td ></td>";
tableHtml+="</tr>";
$('#table').html(tableHtml);
}, 'json');
}
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方法用.进行拼接
}
/* 定时器 */
//setInterval(change, 60000); //每1分钟切换
// setInterval(getValue, 3600000); //每一小时切换
/* 初始化 */
$(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("titleImage").src = ""+getRootPath()+"/images/大屏/js/标题logo3.png";
document.getElementById("bjImage").src = ""+getRootPath()+"/images/大屏/js/报警logo.png";
document.getElementById("ycImage").src = ""+getRootPath()+"/images/大屏/js/异常logo.png";
document.getElementById("gzImage").src = ""+getRootPath()+"/images/大屏/js/故障logo.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;
}
</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%;">
<div style="float:left;width:100%;height:35px;padding-left: 20px;">
<div style="float:left;width:100%;height:34px;position:absolute;">
<div style="float:left;">
<div style="position:absolute;top:-4px;left:50px;z-index:999;opacity: 1;font-size: 21px;color:#d9f6fb;font-family:Source Han Sans CN, Source Han Sans CN-Regular;text-shadow:1.5px 1.5px 0 #174749, 1.5px -1.5px 0 #174749, -1.5px -1.5px 0 #174749, -1.5px 1.5px 0 #174749, 1.5px 1px 0 #174749, 1.5px -1px 0 #174749, -1.5px -1px 0 #174749, -1.5px 1px 0 #174749, 1.5px 0px 0 #174749, 1.5px 0px 0 #174749, -1.5px 0px 0 #174749, -1.5px 0px 0 #174749,1px 1.5px 0 #174749, 1px -1.5px 0 #174749, -1px -1.5px 0 #174749, -1px 1.5px 0 #174749, 1px 1px 0 #174749, 1px -1px 0 #174749, -1px -1px 0 #174749, -1px 1px 0 #174749, 1px 0px 0 #174749, 1px 0px 0 #174749, -1px 0px 0 #174749, -1px 0px 0 #174749, 0px 1.5px 0 #174749, 0px -1.5px 0 #174749, 0px -1.5px 0 #174749, 0px 1.5px 0 #174749, 0px 1px 0 #174749, 0px -1px 0 #174749, 0px -1px 0 #174749, 0px 1px 0 #174749;">当前工单</div>
<img id="titleImage" src="" style="z-index:998;position:relative;"/>
</div>
<div style="float:left;margin-left:10px;font-size: 19px;font-family: MicrosoftYaHei;color: #63e2f1;"><img id="bjImage" src="" style="z-index:998;position:relative;"/> 报警</div>
<div style="float:left;margin-left:10px;font-size: 19px;font-family: MicrosoftYaHei;color: #63e2f1;"><img id="ycImage" src="" style="z-index:998;position:relative;"/> 异常</div>
<div style="float:left;margin-left:10px;font-size: 19px;font-family: MicrosoftYaHei;color: #63e2f1;"><img id="gzImage" src="" style="z-index:998;position:relative;"/> 故障</div>
</div>
</div>
<div style="float:left;width:100%;height:calc(100% - 35px);padding-top:20px;">
<table id="table" style="width:100%;height:100%;">
</table>
</div>
</div>
</div>
</body>
</html>

View File

@ -0,0 +1,788 @@
<%@ 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">
/* 请求数据 */
function getValue() {
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
// console.log(data);
if(data!=''){
var nowHourP=0;
var lastHourP=0;
var nowdayP=0;
var lastdayP=0;
var handlingLoadNum=1;
var handlingLoadColorNum=0;
var handlingLoadDatas=[];
var handlingLoadHtml="";
var handlingLoadColor=['#0263FF','#24DEFF','#8E30FF','#CC24F2','#D4249F'];
var lineDatas=[];
var lineXDatas=[];
var lineXDDatas1=[];
var lineXDDatas2=[];
var lineXDDatas3=[];
var lineDatasNum=0;
var barDatas=[];
var cqControlDataHtml="";
var xhControlDataHtml="";
var bzControlDataHtml="";
var cjzControlDataHtml="";
var cxControlDataHtml="";
for(var i=0;i<data.length;i++){
if(data[i].elementCode=="evaluate"){
getBarchart('chart1',data[i].mPoint.parmvalue.toFixed(0),'','#36FFF9');
}else if(data[i].elementCode=="hourWater"){
if(data[i].name=="当前小时水量"){
if(data[i].mPoint.parmvalue!=null){
nowHourP=data[i].mPoint.parmvalue;
}
}
// else if(data[i].name=="上小时水量"){
// if(data[i].mPointHistory.length>0&&data[i].mPointHistory[0]!=null){
// lastHourP=data[i].mPointHistory[0].parmvalue;
// }
// }
}else if(data[i].elementCode=="dayWater"){
if(data[i].name=="今天累计水量"){
if(data[i].mPoint!=null){
nowdayP=data[i].mPoint.parmvalue;
}
}
// else if(data[i].name=="昨日累计水量"){
// if(data[i].mPointHistory.length>0&&data[i].mPointHistory[0]!=null){
// lastdayP=data[i].mPointHistory[0].parmvalue;
// }
// }
}else if(data[i].elementCode=="companyWater"){
if(handlingLoadNum%3==1){
var sj=0;
if(data[i].mPoint!=null){
sj=((data[i].mPoint.parmvalue)).toFixed(2);
}
// handlingLoadDatas.push({
// value:sj,
// name:data[i].name
// })
lineXDatas.push(data[i].name);
lineXDDatas1.push(sj);
}else if(handlingLoadNum%3==2){
// var sj=((data[i].mPointHistory[0].parmvalue)).toFixed(2);
var sj=0;
if(data[i].mPoint!=null){
sj=((data[i].mPoint.parmvalue)).toFixed(2);
}
lineXDDatas2.push(sj);
}else if(handlingLoadNum%3==0){
var mb=Number(data[i].valueUrl).toFixed(2);
lineXDDatas3.push(mb);
}
handlingLoadNum++;
}else if(data[i].elementCode=="evaluateCompany"){
// data[i].mPoint.parmvalue
handlingLoadHtml+="<div style=\"float: left;width: 100%;height: 52px;padding-left: 25px;\">";
handlingLoadHtml+="<div style=\"float: left;width: 60%;height: 100%;\">";
handlingLoadHtml+="<div style=\"float: left;width:40px;height:20px;background:"+handlingLoadColor[handlingLoadColorNum]+";margin-top: 16px;border-radius: 4px;\"></div>";
handlingLoadHtml+="<div style=\"float: left;height:100%;padding-left: 15px;color: #ffffff;font-size: 20px;line-height:52px;\">"+data[i].name+"</div>";
handlingLoadHtml+="</div>";
handlingLoadHtml+="<div style=\"float: left;width: 40%;height: 100%;font-size: 30px;color: #36fff9;line-height: 52px;\">";
handlingLoadHtml+="<div style=\"float: left;width: 40%;height: 100%;font-size: 30px;color: #36fff9;line-height: 52px;\">"+data[i].valueUrl+"%</div>";
handlingLoadHtml+="</div>";
handlingLoadHtml+="</div>";
handlingLoadColorNum++;
}else if(data[i].elementCode=="line"){
if(data[i].getValueType!="getText"){
var datas=new Array();
for(var j=0;j<data[i].mPointHistory.length;j++){
const his=data[i].mPointHistory[j];
var ddata=new Array();
ddata.push(his.measuredt.substring(11,13));
ddata.push((his.parmvalue).toFixed(2));
datas.push(ddata);
}
if(lineDatasNum==0){
lineDatas.push({
data: datas,
name: data[i].name,
type: 'line',
symbol:'none',
smooth: true,
markPoint: {
symbolSize:'40',
label:{
fontSize:10
},
data: [
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
]
}
});
}else{
lineDatas.push({
data: datas,
name: data[i].name,
type: 'line',
symbol:'none',
smooth: true
});
}
lineDatasNum++;
}else if(data[i].getValueType=="getText"){
if(lineDatas!=''&&lineDatas.length>0){
var datas=new Array();
for (let j = 0; j < lineDatas[1].data.length; j++) {
const element = lineDatas[1].data[j];
var ddata=new Array();
ddata.push(element[0]);
ddata.push(data[i].valueUrl);
datas.push(ddata);
}
lineDatas.push({
data: datas,
name: data[i].name,
type: 'line',
symbol:'none',
smooth: true,
itemStyle:{
normal:{
lineStyle:{
type:'dotted'  //'dotted'虚线 'solid'实线
}
}
}
});
}
}
}else if(data[i].elementCode=="cqControlData"){
var value=0;
var color="#36FFF9";
if(data[i].mPoint!=null){
value=data[i].mPoint.parmvalue;
if(data[i].mPoint.alarmmax!=null){
if(value>data[i].mPoint.alarmmax){
color="red";
}
}
if(data[i].mPoint.alarmmin!=null){
if(value<data[i].mPoint.alarmmin){
color="red";
}
}
}
cqControlDataHtml+="<div style=\"float: left;width: 50%;height: 100%;line-height: 45px;font-size: 20px;font-family: Microsoft YaHei, Microsoft YaHei-Regular;font-weight: 400;text-align: center;color: #ffffff;\">";
cqControlDataHtml+=""+data[i].name+"";
cqControlDataHtml+="</div>";
cqControlDataHtml+="<div style=\"float: left;width: 50%;height: 100%;line-height: 45px;font-size: 20px;font-family: Microsoft YaHei, Microsoft YaHei-Regular;font-weight: 400;text-align: center;color: "+color+";\">";
cqControlDataHtml+=""+numOutput(value)+"";
cqControlDataHtml+="</div>";
}else if(data[i].elementCode=="xhControlData"){
var value=0;
var color="#36FFF9";
if(data[i].mPoint!=null){
value=data[i].mPoint.parmvalue;
if(data[i].mPoint.alarmmax!=null){
if(value>data[i].mPoint.alarmmax){
color="red";
}
}
if(data[i].mPoint.alarmmin!=null){
if(value<data[i].mPoint.alarmmin){
color="red";
}
}
}
xhControlDataHtml+="<div style=\"float: left;width: 50%;height: 100%;line-height: 45px;font-size: 20px;font-family: Microsoft YaHei, Microsoft YaHei-Regular;font-weight: 400;text-align: center;color: #ffffff;\">";
xhControlDataHtml+=""+data[i].name+"";
xhControlDataHtml+="</div>";
xhControlDataHtml+="<div style=\"float: left;width: 50%;height: 100%;line-height: 45px;font-size: 20px;font-family: Microsoft YaHei, Microsoft YaHei-Regular;font-weight: 400;text-align: center;color: "+color+";\">";
xhControlDataHtml+=""+numOutput(value)+"";
xhControlDataHtml+="</div>";
}else if(data[i].elementCode=="bzControlData"){
var value=0;
var color="#36FFF9";
if(data[i].mPoint!=null){
value=data[i].mPoint.parmvalue;
if(data[i].mPoint.alarmmax!=null){
if(value>data[i].mPoint.alarmmax){
color="red";
}
}
if(data[i].mPoint.alarmmin!=null){
if(value<data[i].mPoint.alarmmin){
color="red";
}
}
}
bzControlDataHtml+="<div style=\"float: left;width: 50%;height: 100%;line-height: 45px;font-size: 20px;font-family: Microsoft YaHei, Microsoft YaHei-Regular;font-weight: 400;text-align: center;color: #ffffff;\">";
bzControlDataHtml+=""+data[i].name+"";
bzControlDataHtml+="</div>";
bzControlDataHtml+="<div style=\"float: left;width: 50%;height: 100%;line-height: 45px;font-size: 20px;font-family: Microsoft YaHei, Microsoft YaHei-Regular;font-weight: 400;text-align: center;color: "+color+";\">";
bzControlDataHtml+=""+numOutput(value)+"";
bzControlDataHtml+="</div>";
}else if(data[i].elementCode=="cjzControlData"){
var value=0;
var color="#36FFF9";
if(data[i].mPoint!=null){
value=data[i].mPoint.parmvalue;
if(data[i].mPoint.alarmmax!=null){
if(value>data[i].mPoint.alarmmax){
color="red";
}
}
if(data[i].mPoint.alarmmin!=null){
if(value<data[i].mPoint.alarmmin){
color="red";
}
}
}
cjzControlDataHtml+="<div style=\"float: left;width: 50%;height: 100%;line-height: 45px;font-size: 20px;font-family: Microsoft YaHei, Microsoft YaHei-Regular;font-weight: 400;text-align: center;color: #ffffff;\">";
cjzControlDataHtml+=""+data[i].name+"";
cjzControlDataHtml+="</div>";
cjzControlDataHtml+="<div style=\"float: left;width: 50%;height: 100%;line-height: 45px;font-size: 20px;font-family: Microsoft YaHei, Microsoft YaHei-Regular;font-weight: 400;text-align: center;color: "+color+";\">";
cjzControlDataHtml+=""+numOutput(value)+"";
cjzControlDataHtml+="</div>";
}else if(data[i].elementCode=="cxControlData"){
var value=0;
var color="#36FFF9";
if(data[i].mPoint!=null){
value=data[i].mPoint.parmvalue;
if(data[i].mPoint.alarmmax!=null){
if(value>data[i].mPoint.alarmmax){
color="red";
}
}
if(data[i].mPoint.alarmmin!=null){
if(value<data[i].mPoint.alarmmin){
color="red";
}
}
}
cxControlDataHtml+="<div style=\"float: left;width: 50%;height: 100%;line-height: 45px;font-size: 20px;font-family: Microsoft YaHei, Microsoft YaHei-Regular;font-weight: 400;text-align: center;color: #ffffff;\">";
cxControlDataHtml+=""+data[i].name+"";
cxControlDataHtml+="</div>";
cxControlDataHtml+="<div style=\"float: left;width: 50%;height: 100%;line-height: 45px;font-size: 20px;font-family: Microsoft YaHei, Microsoft YaHei-Regular;font-weight: 400;text-align: center;color: "+color+";\">";
cxControlDataHtml+=""+numOutput(value)+"";
cxControlDataHtml+="</div>";
}
}
// var hourhb=(nowHourP-lastHourP)/lastHourP*100;
// hourhb=hourhb;
$('#hourWaterP').text((nowHourP));
// if(Number(hourhb)<0){
// $('#hourWaterH').css("color","red");
// $('#hourWaterH').text("⬇ 环比"+hourhb+"%");
// }else{
// $('#hourWaterH').css("color","#3fff00");
// $('#hourWaterH').text("⬆ 环比"+hourhb+"%");
// }
// var dayhb=(nowdayP-lastdayP)/lastdayP*100;
// dayhb=dayhb;
$('#dayWaterP').text((nowdayP));
// if(Number(dayhb)<0){
// $('#dayWaterH').css("color","red");
// $('#dayWaterH').text("⬇ 环比"+dayhb+"%");
// }else{
// $('#dayWaterH').css("color","#3fff00");
// $('#dayWaterH').text("⬆ 环比"+dayhb+"%");
// }
handlingLoadDatas.push({
value:5,
name:'城桥'
})
handlingLoadDatas.push({
value:0.5,
name:'新河'
})
handlingLoadDatas.push({
value:1.25,
name:'堡镇'
})
handlingLoadDatas.push({
value:1.75,
name:'陈家镇'
})
handlingLoadDatas.push({
value:2.5,
name:'长兴'
})
getPiechart('chart2',handlingLoadDatas,handlingLoadColor);
$('#companyhandlingLoad').html(handlingLoadHtml);
getLinechart('chart3',lineDatas);
barDatas.push({
name:"实际",
type: 'bar',
data: lineXDDatas1
})
barDatas.push({
name:"昨日",
type: 'bar',
data: lineXDDatas2
})
barDatas.push({
name:"考核",
type: 'line',
data: lineXDDatas3
})
getBarchart2('chart4',barDatas,lineXDatas);
$('#cqControlData').html(cqControlDataHtml);
$('#xhControlData').html(xhControlDataHtml);
$('#bzControlData').html(bzControlDataHtml);
$('#cjzControlData').html(cjzControlDataHtml);
$('#cxControlData').html(cxControlDataHtml);
}
}, 'json');
}
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方法用.进行拼接
}
function getBarchart(id,value,title,color){
var myChart = echarts.init(document.getElementById(id));
var option = {
title: {
text: value,
textStyle: {
color: '#36FFF9',
fontSize: 50
},
subtext: "%",
subtextStyle: {
color: '#36FFF9',
fontSize: 19
},
itemGap: 0, // 主副标题距离
left: 'center',
top: '35%'
},
angleAxis: {
max: 100, // 满分
clockwise: true, // 逆时针
// 隐藏刻度线
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
splitLine: {
show: false
}
},
radiusAxis: {
type: 'category',
// 隐藏刻度线
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
splitLine: {
show: false
}
},
polar: {
center: ['50%', '50%'],
radius: '120%' //图形大小
},
series: [{
type: 'bar',
data: [{
name: '百分比',
value: value,
itemStyle: {
color: color
},
}],
coordinateSystem: 'polar',
roundCap: true,
barWidth: 10,
barGap: '-100%', // 两环重叠
z: 2
},{ // 灰色环
type: 'bar',
data: [{
value: 100,
itemStyle: {
color: '#1D4F6D',
shadowColor: 'rgba(0, 0, 0, 0.2)',
shadowBlur: 2,
shadowOffsetY: 2
}
}],
coordinateSystem: 'polar',
roundCap: true,
barWidth: 12,
barGap: '-100%', // 两环重叠
z: 1
}]
};
myChart.setOption(option, true);
// window.addEventListener("resize", function () {
// myChart.resize();
// });
}
function getPiechart(id,datas,colors){
var myChart = echarts.init(document.getElementById(id));
var option = {
color:colors,
tooltip: {
trigger: 'item'
},
series: [
{
name: '',
type: 'pie',
center: ['50%', '45%'],
radius: ['40%', '70%'],
avoidLabelOverlap: false,
label: {
show: true,
position: 'outside',
formatter: function (d) {
return parseFloat(d.percent).toFixed(0)+"%"
}
},
labelLine:{
show:true,
length:6,
length2:6
},
data: datas
}
]
};
myChart.setOption(option, true);
// window.addEventListener("resize", function () {
// myChart.resize();
// });
}
function getLinechart(id,datas){
var myChart = echarts.init(document.getElementById(id));
var option = {
color:['#20E9F2','#815DB7','#08A3A3'],
title: {
text: '水量处理曲线',
top:10,
left:20,
textStyle:{
color:'#FFFFFF'
}
},
legend: {
data: ['实际', '昨日', '考核'],
top:10,
right:20,
textStyle:{
color:'#FFFFFF'
}
},
tooltip: {
trigger: 'axis'
},
grid:{
left: '4%', // 与容器左侧的距离
right: '4%', // 与容器右侧的距离
// top: '10%', // 与容器顶部的距离
bottom: '10%', // 与容器底部的距离
containLabel:true
},
xAxis: {
type:"category",
axisLine:{
lineStyle:{
color:'#ffffff',
}
},
axisTick: {
show: false
},
splitLine: {
show: false
}
},
yAxis: {
type : 'value',
axisLine:{
lineStyle:{
color:'#ffffff',
}
},
splitLine: {
show: true,
lineStyle:{
color: '#8C8C8C'
}
}
},
series: datas
};
myChart.setOption(option, true);
// window.addEventListener("resize", function () {
// myChart.resize();
// });
}
function getBarchart2(id,datas,xdatas){
var myChart = echarts.init(document.getElementById(id));
var option = {
color:['#20E9F2','#815DB7','#08A3A3'],
title: {
text: '各厂处理情况',
top:10,
left:20,
textStyle:{
color:'#FFFFFF'
}
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['实际','昨日','考核'],
top:10,
right:20,
textStyle:{
color:'#FFFFFF'
}
},
grid:{
left: '4%', // 与容器左侧的距离
right: '4%', // 与容器右侧的距离
// top: '10%', // 与容器顶部的距离
bottom: '10%', // 与容器底部的距离
containLabel:true
},
xAxis: {
type:"category",
data:xdatas,
axisLine:{
lineStyle:{
color:'#ffffff',
}
},
axisTick: {
show: false
},
splitLine: {
show: false
}
},
yAxis: {
type : 'value',
axisLine:{
lineStyle:{
color:'#ffffff',
}
},
splitLine: {
show: true,
lineStyle:{
color: '#8C8C8C'
}
}
},
series: datas
};
myChart.setOption(option, true);
// window.addEventListener("resize", function () {
// myChart.resize();
// });
}
/* 定时器 */
setInterval(getValue, 300000); //每1分钟切换
// setInterval(getValue, 3600000); //每一小时切换
/* 初始化 */
$(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("titleImage").src = ""+getRootPath()+"/images/大屏/大屏标题文字背景.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;
}
</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%;">
<div style="float:left;width:100%;height:35px;padding-left: 20px;">
<div style="float:left;width:100%;height:34px;">
<div style="position:absolute;top:12px;left:50px;z-index:999;opacity: 1;font-size: 20px;font-family: Microsoft YaHei, Microsoft YaHei-Regular;margin-left:38px;">运行概览</div>
<img id="titleImage" src="" style="z-index:998;position:relative;"/>
</div>
</div>
<div style="float:left;width: 100%;height: calc((100% - 35px)/3);">
<div style="float: left;width: 50%;height: 100%;">
<div style="float: left;width: 45%;height: 100%;">
<div style="float: left;width: 100%;height: 60px;color: #ffffff;text-align: center;line-height: 100px;font-size: 24px;font-family: Source Han Sans CN, Source Han Sans CN-Medium;">运行评价</div>
<div id="chart1" style="float: left;width: 100%;height: calc(100% - 60px);"></div>
</div>
<div style="float: left;width: 55%;height: 100%;padding-top: 30px;">
<div style="float: left;width: 100%;height:calc((100% - 30px)/2);">
<div style="float: left;width: 100%;height: 40%;font-size: 20px;font-family: MicrosoftYaHei;text-align: left;color: #ffffff;line-height: 60px;">当前处理量m3/h</div>
<div style="float: left;width: 100%;height: 60%;">
<div id="hourWaterP" style="float:left;width: 50%;height:100%;line-height: 80px;color: #69f6f9;font-size: 40px;">
</div>
<div id="hourWaterH" style="float:left;width: 50%;height:100%;line-height: 80px;font-size: 20px;padding-left: 10px;">
</div>
</div>
</div>
<div style="float: left;width: 100%;height:calc((100% - 30px)/2);">
<div style="float: left;width: 100%;height: 40%;font-size: 20px;font-family: MicrosoftYaHei;text-align: left;color: #ffffff;line-height: 60px;">今日累计处理量m3</div>
<div style="float: left;width: 100%;height: 60%;">
<div id="dayWaterP" style="float:left;width: 50%;height:100%;line-height: 80px;color: #69f6f9;font-size: 40px;">
</div>
<div id="dayWaterH" style="float:left;width: 50%;height:100%;line-height: 80px;font-size: 20px;padding-left: 10px;">
</div>
</div>
</div>
</div>
</div>
<div style="float: left;width: 45%;height: 100%;">
<div style="float: left;width: 45%;height: 100%;">
<div style="float: left;width: 100%;height: 40px;color: #ffffff;text-align: center;line-height: 40px;font-size: 24px;font-family: Source Han Sans CN, Source Han Sans CN-Medium;">各厂处理量占比</div>
<div id="chart2" style="float: left;width: 100%;height: calc(100% - 40px);"></div>
</div>
<div style="float: left;width: 55%;height: 100%;">
<div style="float: left;width: 100%;height: 40px;color: #ffffff;text-align: center;line-height: 40px;font-size: 24px;font-family: Source Han Sans CN, Source Han Sans CN-Medium;">各厂处理负荷</div>
<div id="companyhandlingLoad" style="float: left;width: 100%;height: calc(100% - 40px);"></div>
</div>
</div>
</div>
<div style="float:left;width: 100%;height: calc((100% - 35px)/3);">
<div style="float:left;width:50%;height:100%;padding: 10px;">
<div id="chart3" style="float:left;width: 100%;height: 100%;background: #16314c;"></div>
</div>
<div style="float:left;width:50%;height:100%;padding: 10px;">
<div id="chart4" style="float:left;width: 100%;height: 100%;background: #16314c;"></div>
</div>
</div>
<div style="float:left;width: 100%;height: calc((100% - 35px)/3);padding-left: 20px;">
<div style="float: left;width: 20%;height: 100%;">
<div style="float: left;width: 100%;height: 50px;font-size: 24px;font-family: Source Han Sans CN, Source Han Sans CN-Medium;font-weight: 500;text-align: center;color: #ffffff;line-height: 50px;">
城桥污水处理厂
</div>
<div style="float: left;width: 100%;height: calc(100% - 50px);">
<div id="cqControlData" style="float: left;width: 100%;height: 45px;">
<!-- <div style="float: left;width: 50%;height: 100%;line-height: 45px;font-size: 20px;font-family: Microsoft YaHei, Microsoft YaHei-Regular;font-weight: 400;text-align: center;color: #ffffff;">
COD
</div>
<div style="float: left;width: 50%;height: 100%;line-height: 45px;font-size: 20px;font-family: Microsoft YaHei, Microsoft YaHei-Regular;font-weight: 400;text-align: center;color: #36fff9;">
8.6
</div> -->
</div>
</div>
</div>
<div style="float: left;width: 20%;height: 100%;">
<div style="float: left;width: 100%;height: 50px;font-size: 24px;font-family: Source Han Sans CN, Source Han Sans CN-Medium;font-weight: 500;text-align: center;color: #ffffff;line-height: 50px;">
新河污水处理厂
</div>
<div style="float: left;width: 100%;height: calc(100% - 50px);">
<div id="xhControlData" style="float: left;width: 100%;height: 45px;"></div>
</div>
</div>
<div style="float: left;width: 20%;height: 100%;">
<div style="float: left;width: 100%;height: 50px;font-size: 24px;font-family: Source Han Sans CN, Source Han Sans CN-Medium;font-weight: 500;text-align: center;color: #ffffff;line-height: 50px;">
堡镇污水处理厂
</div>
<div style="float: left;width: 100%;height: calc(100% - 50px);">
<div id="bzControlData" style="float: left;width: 100%;height: 45px;"></div>
</div>
</div>
<div style="float: left;width: 20%;height: 100%;">
<div style="float: left;width: 100%;height: 50px;font-size: 24px;font-family: Source Han Sans CN, Source Han Sans CN-Medium;font-weight: 500;text-align: center;color: #ffffff;line-height: 50px;">
陈家镇污水处理厂
</div>
<div style="float: left;width: 100%;height: calc(100% - 50px);">
<div id="cjzControlData" style="float: left;width: 100%;height: 45px;"></div>
</div>
</div>
<div style="float: left;width: 20%;height: 100%;">
<div style="float: left;width: 100%;height: 50px;font-size: 24px;font-family: Source Han Sans CN, Source Han Sans CN-Medium;font-weight: 500;text-align: center;color: #ffffff;line-height: 50px;">
长兴污水处理厂
</div>
<div style="float: left;width: 100%;height: calc(100% - 50px);">
<div id="cxControlData" style="float: left;width: 100%;height: 45px;"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

View File

@ -0,0 +1,115 @@
<%@ 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>
<script type="text/javascript">
//获取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;
}
//获取url地址根目录 当前taomcat下路径
function getRootPath2(){
var pathName = window.location.pathname.substring(1);
var webName = pathName == '' ? '' : pathName.substring(0, pathName.indexOf('/'));
return window.location.protocol + '//' + window.location.host +"/"+webName;
}
/* 请求数据 */
function getbulletinBoardValue() {
$.post(ext.contextPath + '/info/getJson.do', function (data) {
if(data!=''){
var html="<table style=\"width:100%;height:100%;table-layout:fixed;\">";
for(var i=0;i<data.length;i++){
var tetitlext=data[i].title;
var modifydt=data[i].modifydt;
html+="<tr style=\"height:12.5%;font-size: 16px;cursor: pointer;\" onclick=\"bulletinBoardviewFun('"+data[i].id+"');\">";
html+="<td style=\"white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:5px;\"><span style=\"font-weight: bold;\"> · </span>"+tetitlext+"</td>";
html+="<td style=\"width:90px;\">"+modifydt.substring(0,10)+"</td>";
html+="</tr>";
}
if(8-data.length>0){
for(var i=0;i<(8-data.length);i++){
html+="<tr style=\"height:12.5%;\">";
html+="<td ><span style=\"font-weight: bold;\"></td>";
html+="<td style=\"width:90px;\"></td>";
html+="</tr>";
}
}
html+="</table>";
$('#bulletinBoardcontent').html(html);
}else{
$('#bulletinBoardcontent').text("无数据");
}
}, 'json');
}
var bulletinBoardviewFun = function(id) {
$.post(ext.contextPath + '/info/view.do', {id:id} , function(data) {
$("#subDiv").html(data);
openModal('subModal');
});
};
var bulletinBoardMore = function() {
$.post(ext.contextPath + '/info/showOpenlist.do' , function(data) {
$("#topsubDiv").html(data);
openModal('infoOpenListsubModal');
});
};
/* 定时器 */
//setInterval(change, 60000); //每1分钟切换
// setInterval(getValue, 3600000); //每一小时切换
/* 初始化 */
$(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";
getbulletinBoardValue();
//console.log("height",document.body.scrollHeight);
});
</script>
</head>
<body style="width:100%;height:100%;margin:0;padding:0;overflow-x:hidden;overflow-y:hidden">
<div id="bulletinBoardmain" style="height:100%;width:100%;padding-top:10px;padding-left:10px;padding-right:10px;">
<div style="height:100%;width:100%;background:#ffffff;border: 1px solid #E1E1E1;border-radius: 4px;box-shadow: 2px 2px 4px 0px #696969, 0px 0px 4px 0px #696969;padding:10px;">
<div style="float: left;width: 100%;height:30px;">
<div style="float: left;width:5px;height:100%;margin-left: 15px;padding-top:5px;padding-bottom:5px;"><div style="width: 100%;height: 100%;background-color:skyblue;"></div></div>
<div style="float: left;height:100%;margin-left: 10px;line-height: 30px;">公告栏</div>
<div style="float: right;height:100%;margin-right: 10px;line-height: 30px;cursor: pointer;" onclick="bulletinBoardMore();">更多<span class="fa fa-angle-double-right"></span></div>
</div>
<div style="float: left;width: 100%;height:calc(100% - 30px);">
<div id="bulletinBoardcontent" style="width:100%;height:100%;padding: 15px;padding-left:30px;"></div>
</div>
</div>
</div>
</body>
</html>

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,171 @@
<%@ 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>

View File

@ -0,0 +1,180 @@
<%@ 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>

View File

@ -0,0 +1,317 @@
<%@ 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>

View File

@ -0,0 +1,317 @@
<%@ 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" + month;
}
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.012 + "px"));
$(".blueSpan").css("font-size", (document.documentElement.clientWidth * 0.017 + "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.14 + '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="60%" 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>

View File

@ -0,0 +1,73 @@
<%@ 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>
<script type="text/javascript">
//获取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 getValue() {
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
//每一条循环判断
console.log("data", 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 != "") {
// //背景图
// $('#backImage').css("background","url("+getRootPath()+""+data[i].style+") no-repeat");
// $('#backImage').css("background-size","cover");
document.getElementById("backImage").src = getRootPath()+ 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;
}
}
}
}, 'json');
}
/* 定时器 */
// 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";
getValue();
// console.log(document.documentElement.offsetHeight);
// console.log(document.documentElement.clientHeight);
});
</script>
</head>
<body style="width:100%;height:100%;margin:0;padding:0;">
<!-- <div id="backImage" style="width:100%;height:100%;margin:0;padding:0;overflow-x: hidden;
overflow-y: hidden;"></div> -->
<img id="backImage" src="" style="z-index:-1;positon:relative;" alt="" />
</body>
</html>

View File

@ -0,0 +1,328 @@
<%@ 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/inc.jsp"></jsp:include>
<script type="text/javascript">
var colors = ['#75BC63','#D12FD6','#5793f3','#00c200', '#d14a61', '#675bba'];
var symbols = ['circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'];
/* 请求数据 */
function getValue() {
//折线图
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
// console.log("data1", data);
var yaAxis = [];
var series = [];
var measuredt = [];
var legendName = [];
for (var d = 0; d < data.length; d++) {
if (data[d].getValueType == '${Type_GetHistory}') {
var ArrayDatas = data[d].mPointHistory//eval("(" + data + ")");
var offset = 60;
//y轴
var yobj = {
type: 'value',
scale: true,
//name: data[d].name + "(" + data[d].mPoint.unit + ")",//data[d].mPoint.parmname
nameTextStyle: {
color: '#fff',
fontSize: 18
},
axisTick: {
show: false,
},
axisLine: {
lineStyle: {
color: '#97C8E6',
width: 2,
}
},
axisLabel: {
color: '#fff',
formatter: '{value}' + data[d].mPoint.unit,
},
splitLine: {
show: false
},
//max: 1200,
min: function (value) {
return value.min;
},
boundaryGap: [0.2, 0.2]
}
if (d == 0) {
yobj.position = 'left';
yobj.offset = 0;
} else {
yobj.position = 'right';
yobj.offset = offset * (d - 1);
}
if (d >= 2) {
yobj.show = false;
}
yaAxis.push(yobj);
//series
var sobj = {
name: data[d].name,//data[d].mPoint.parmname
xAxisIndex: 1,
yAxisIndex: 0,//d
symbol: symbols[d % symbols.length],
symbolSize: 10,
itemStyle: {
color: colors[d % colors.length],
borderWidth: 1,
},
lineStyle: {
width: 3,
},
};
if (data[d].style != null && data[d].style != "") {
sobj.type = data[d].style;
} else {
sobj.type = "line";
}
//legend名称
legendName.push(data[d].name);//data[d].mPoint.parmname
var dataSeries = [];
for (var j = 0; j < ArrayDatas.length; j++) {
//x轴 只取data第一条数据进行生成x轴
if(d == 0){
measuredt.push(ArrayDatas[j].measuredt.substring(5, 10) + "-" + ArrayDatas[j].measuredt.substring(11, 13));
}
dataSeries.push(ArrayDatas[j].parmvalue);
}
sobj.data = dataSeries;
series.push(sobj);
}
}
//赋值 x轴 y轴 series
optionBL.legend.data = legendName;
optionBL.xAxis[0].data = measuredt;
optionBL.yAxis = yaAxis;
optionBL.series = series;
//图标加载
//console.log("option",optionBL);
BLChart.setOption(optionBL);
}, 'json');
}
/* 定时器 */
setInterval(getValue, 300000); //<!--每隔5分钟刷新一次-->
//setInterval(change, 60000); //每1分钟切换
/* 初始化 */
$(function () {
if('${param.backgroundColor}'=='transparent'){
document.body.style.backgroundColor = '${param.backgroundColor}';
}else{
document.body.style.backgroundColor = "#" + '${param.backgroundColor}';
}
getValue();
//console.log("height",document.body.scrollHeight);
});
</script>
</head>
<body style="width:100%;height:100%;margin:0;padding:0;overflow-x:hidden;overflow-y:hidden">
<div id="barline" style="height:95%;width:95%"></div>
<script language="JavaScript">
/* 构造图表 */
var BLChart = echarts.init(document.getElementById('barline'));
optionBL = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#283b56'
}
}
},
grid: {
left: '5%',
right: '5%',
bottom: '7%',
top: '10%',
},
legend: {
left: 'center',
itemGap: 100,
textStyle: {
color: '#fff',
fontSize: 20
},
//data: ['出水量', '1#压力', '2#压力']
},
dataZoom: {
show: false,
start: 0,
end: 100
},
xAxis: [
{
type: 'category',
axisTick: {
show: false,
},
axisLine: {
lineStyle: {
color: '#97C8E6',
width: 2,
}
},
axisLabel: {
color: '#fff'
},
boundaryGap: true,
//data: ['0:00', '1:00', '2:00', '3:00', '4:00', '5:00', '6:00', '7:00', '8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00']
},
{
type: 'category',
show: false,
boundaryGap: true,
//data: ['0:00', '1:00', '2:00', '3:00', '4:00', '5:00', '6:00', '7:00', '8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00']
}
],
yAxis: [/*{
type: 'value',
scale: true,
name: '出水量(m³)',
nameTextStyle: {
color: '#fff',
fontSize: 18
},
axisTick: {
show: false,
},
axisLine: {
lineStyle: {
color: '#97C8E6',
width: 2,
}
},
axisLabel: {
color: '#fff'
},
splitLine: {
show: false
},
//max: 1200,
min: 0,
boundaryGap: [0.2, 0.2]
},
{
type: 'value',
scale: true,
name: '压力(MPa)',
nameTextStyle: {
color: '#fff',
fontSize: 18
},
axisTick: {
show: false,
},
axisLine: {
lineStyle: {
color: '#97C8E6',
width: 2,
}
},
axisLabel: {
color: '#fff'
},
splitLine: {
show: false
},
//max: 30,
min: 0,
boundaryGap: [0.2, 0.2]
}*/
],
series: [
/*{
name: '出水量',
type: 'bar',
itemStyle: {
color: '#426AB2',
},
data: (function () {
var res = [];
var len = 24;
while (len--) {
res.push(Math.round(Math.random() * 1000));
}
return res;
})()
},
{
name: '1#压力',
type: 'line',
xAxisIndex: 1,
yAxisIndex: 1,
symbol: 'roundRect',
symbolSize: 10,
itemStyle: {
color: '#75BC63',
borderWidth: 1,
},
lineStyle: {
width: 3,
},
data: (function () {
var res = [];
var len = 0;
while (len < 24) {
res.push((Math.random() * 10 + 5).toFixed(1) - 0);
len++;
}
return res;
})()
}, {
name: '2#压力',
type: 'line',
xAxisIndex: 1,
yAxisIndex: 1,
symbolSize: 10,
itemStyle: {
color: '#D12FD6',
borderWidth: 1,
},
lineStyle: {
width: 3,
},
data: (function () {
var res = [];
var len = 0;
while (len < 24) {
res.push((Math.random() * 10 + 5).toFixed(1) - 0);
len++;
}
return res;
})()
}*/
]
};
</script>
</body>
</html>

View File

@ -0,0 +1,325 @@
<%@ 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/inc.jsp"></jsp:include>
<script type="text/javascript">
var colors = ['#75BC63','#D12FD6','#5793f3','#00c200', '#d14a61', '#675bba'];
var symbols = ['circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'];
/* 请求数据 */
function getValue() {
//折线图
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
// console.log("data2", data);
var yaAxis = [];
var series = [];
var measuredt = [];
var legendName = [];
for (var d = 0; d < data.length; d++) {
if (data[d].getValueType == '${Type_GetHistory}') {
var ArrayDatas = data[d].mPointHistory//eval("(" + data + ")");
var offset = 60;
//y轴
var yobj = {
type: 'value',
scale: true,
//name: data[d].name + "(" + data[d].mPoint.unit + ")",//data[d].mPoint.parmname
nameTextStyle: {
color: '#fff',
fontSize: 18
},
axisTick: {
show: false,
},
axisLine: {
lineStyle: {
color: '#97C8E6',
width: 2,
}
},
axisLabel: {
color: '#fff',
formatter: '{value}' + data[d].mPoint.unit,
},
splitLine: {
show: false
},
max: 2000,
min: 0,
// function (value) {
// return value.min;
// },
boundaryGap: [0.2, 0.2]
}
if (d == 0) {
yobj.position = 'left';
yobj.offset = 0;
} else {
yobj.position = 'right';
yobj.offset = offset * (d - 1);
}
if (d >= 2) {
yobj.show = false;
}
yaAxis.push(yobj);
//series
var sobj = {
name: data[d].name,//data[d].mPoint.parmname
xAxisIndex: 1,
yAxisIndex: 0,//d
symbol: symbols[d % symbols.length],
symbolSize: 10,
itemStyle: {
color: colors[d % colors.length],
borderWidth: 1,
},
lineStyle: {
width: 3,
},
};
if (data[d].style != null && data[d].style != "") {
sobj.type = data[d].style;
} else {
sobj.type = "line";
}
//legend名称
legendName.push(data[d].name);//data[d].mPoint.parmname
var dataSeries = [];
for (var j = 0; j < ArrayDatas.length; j++) {
//x轴 只取data第一条数据进行生成x轴
if(d == 0){
measuredt.push(ArrayDatas[j].measuredt.substring(5, 10) + "-" + ArrayDatas[j].measuredt.substring(11, 13));
}
dataSeries.push(ArrayDatas[j].parmvalue);
}
sobj.data = dataSeries;
series.push(sobj);
}
}
//赋值 x轴 y轴 series
optionBL.legend.data = legendName;
optionBL.xAxis[0].data = measuredt;
optionBL.yAxis = yaAxis;
optionBL.series = series;
//图标加载
//console.log("option",optionBL);
BLChart.setOption(optionBL);
}, 'json');
}
/* 定时器 */
setInterval(getValue, 300000); //<!--每隔5分钟刷新一次-->
//setInterval(change, 60000); //每1分钟切换
/* 初始化 */
$(function () {
document.body.style.backgroundColor = "#" + '${param.backgroundColor}';
getValue();
//console.log("height",document.body.scrollHeight);
});
</script>
</head>
<body style="width:100%;height:100%;margin:0;padding:0;overflow-x:hidden;overflow-y:hidden">
<div id="barline" style="height:95%;width:95%"></div>
<script language="JavaScript">
/* 构造图表 */
var BLChart = echarts.init(document.getElementById('barline'));
optionBL = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#283b56'
}
}
},
grid: {
left: '6.5%',
right: '5%',
bottom: '7%',
top: '10%',
},
legend: {
left: 'center',
itemGap: 100,
textStyle: {
color: '#fff',
fontSize: 20
},
//data: ['出水量', '1#压力', '2#压力']
},
dataZoom: {
show: false,
start: 0,
end: 100
},
xAxis: [
{
type: 'category',
axisTick: {
show: false,
},
axisLine: {
lineStyle: {
color: '#97C8E6',
width: 2,
}
},
axisLabel: {
color: '#fff'
},
boundaryGap: true,
//data: ['0:00', '1:00', '2:00', '3:00', '4:00', '5:00', '6:00', '7:00', '8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00']
},
{
type: 'category',
show: false,
boundaryGap: true,
//data: ['0:00', '1:00', '2:00', '3:00', '4:00', '5:00', '6:00', '7:00', '8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00']
}
],
yAxis: [/*{
type: 'value',
scale: true,
name: '出水量(m³)',
nameTextStyle: {
color: '#fff',
fontSize: 18
},
axisTick: {
show: false,
},
axisLine: {
lineStyle: {
color: '#97C8E6',
width: 2,
}
},
axisLabel: {
color: '#fff'
},
splitLine: {
show: false
},
//max: 1200,
min: 0,
boundaryGap: [0.2, 0.2]
},
{
type: 'value',
scale: true,
name: '压力(MPa)',
nameTextStyle: {
color: '#fff',
fontSize: 18
},
axisTick: {
show: false,
},
axisLine: {
lineStyle: {
color: '#97C8E6',
width: 2,
}
},
axisLabel: {
color: '#fff'
},
splitLine: {
show: false
},
//max: 30,
min: 0,
boundaryGap: [0.2, 0.2]
}*/
],
series: [
/*{
name: '出水量',
type: 'bar',
itemStyle: {
color: '#426AB2',
},
data: (function () {
var res = [];
var len = 24;
while (len--) {
res.push(Math.round(Math.random() * 1000));
}
return res;
})()
},
{
name: '1#压力',
type: 'line',
xAxisIndex: 1,
yAxisIndex: 1,
symbol: 'roundRect',
symbolSize: 10,
itemStyle: {
color: '#75BC63',
borderWidth: 1,
},
lineStyle: {
width: 3,
},
data: (function () {
var res = [];
var len = 0;
while (len < 24) {
res.push((Math.random() * 10 + 5).toFixed(1) - 0);
len++;
}
return res;
})()
}, {
name: '2#压力',
type: 'line',
xAxisIndex: 1,
yAxisIndex: 1,
symbolSize: 10,
itemStyle: {
color: '#D12FD6',
borderWidth: 1,
},
lineStyle: {
width: 3,
},
data: (function () {
var res = [];
var len = 0;
while (len < 24) {
res.push((Math.random() * 10 + 5).toFixed(1) - 0);
len++;
}
return res;
})()
}*/
]
};
</script>
</body>
</html>

View File

@ -0,0 +1,209 @@
<%@ 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>
.qtitle {
font-family: Microsoft YaHei;
}
.qcontent {
font-family: Microsoft YaHei;
color: #fff
}
.title1Div {
border-bottom: 5px solid #5AD8FF;
width:95%;
height:18%;
padding-bottom:1%;
}
.title2Div {
border-bottom: 5px solid #FFDF58;
width:95%;
height:18%;
padding-bottom:1%
}
.title3Div {
border-bottom: 5px solid #5DFF5C;
width:95%;
height:18%;
padding-bottom:1%;
}
.productSpan {
padding-top:3%;
float:right;
font-size: 18px;
color:#4972B4;
font-family:Microsoft YaHei;
}
</style>
<script type="text/javascript">
/* 请求数据 */
function getValue() {
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (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)){//判断存不存在
//颜色
$('.'+code+'Div').css("border-color","#"+data[i].style);
document.getElementById(code).style.color = "#"+data[i].style;
//赋值
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(data[i].mPoint.unit!=null && data[i].mPoint.unit!=""){
document.getElementById(code).innerHTML = data[i].mPoint.parmvalue + "/32" + data[i].mPoint.unit;
}else{
document.getElementById(code).innerHTML = data[i].mPoint.parmvalue + data[i].mPoint.unit;
}
} else if (data[i].getValueType == '${Type_GetHttp}') {
var code = data[i].elementCode;
document.getElementById(code).innerHTML = data[i].value;
} else {
}
}
}
}, 'json');
}
/* 定时器 */
setInterval(getValue, 300000); //<!--每隔5分钟刷新一次-->
/* 初始化 */
$(function () {
getValue();
// console.log("height",document.documentElement.clientWidth);
document.body.style.backgroundColor = "#" + '${param.backgroundColor}';
$(".qtitle").css("font-size", (document.body.offsetWidth * 0.05 + "px"));
$(".qcontent").css("font-size", (document.body.offsetWidth * 0.03 + "px"));
$(".productSpan").css("font-size", (document.body.offsetWidth * 0.028 + "px"));
});
</script>
</head>
<body style="width:100%;height:100%;margin:0;padding:0;overflow-x:hidden;overflow-y:hidden">
<div style="width:93%;height:32%;margin:0 auto;margin-top:5%">
<div id="title1Div" class="title1Div">
<span id="title1" class="qtitle"></span>
<span id="product1" class="productSpan"></span>
</div>
<table style="width:80%;height:70%;margin:0 auto;border-collapse:separate;border-spacing:0px 6px;">
<tr>
<td width="60%"><span class="qcontent">批次</span><span id="batch11" class="qcontent">-</span></td>
<td><span id="produceDay11" class="qcontent">-</span></td>
</tr>
<tr>
<td><span class="qcontent">批次</span><span id="batch12" class="qcontent">-</span></td>
<td><span id="produceDay12" class="qcontent">-</span></td>
</tr>
<tr>
<td><span class="qcontent">批次</span><span id="batch13" class="qcontent">-</span></td>
<td><span id="produceDay13" class="qcontent">-</span></td>
</tr>
<tr>
<td><span class="qcontent">批次</span><span id="batch14" class="qcontent">-</span></td>
<td><span id="produceDay14" class="qcontent">-</span></td>
</tr>
<tr>
<td><span class="qcontent">批次</span><span id="batch15" class="qcontent">-</span></td>
<td><span id="produceDay15" class="qcontent">-</span></td>
</tr>
</table>
</div>
<div style="width:93%;height:32%;margin:0 auto;margin-top:3%">
<div id="title2Div" class="title2Div">
<span id="title2" class="qtitle"></span>
<span id="product2" class="productSpan"></span>
</div>
<table style="width:80%;height:70%;margin:0 auto;border-collapse:separate;border-spacing:0px 6px;">
<tr>
<td width="60%"><span class="qcontent">批次</span><span id="batch21" class="qcontent">-</span></td>
<td><span id="produceDay21" class="qcontent">-</span></td>
</tr>
<tr>
<td><span class="qcontent">批次</span><span id="batch22" class="qcontent">-</span></td>
<td><span id="produceDay22" class="qcontent">-</span></td>
</tr>
<tr>
<td><span class="qcontent">批次</span><span id="batch23" class="qcontent">-</span></td>
<td><span id="produceDay23" class="qcontent">-</span></td>
</tr>
<tr>
<td><span class="qcontent">批次</span><span id="batch24" class="qcontent">-</span></td>
<td><span id="produceDay24" class="qcontent">-</span></td>
</tr>
<tr>
<td><span class="qcontent">批次</span><span id="batch25" class="qcontent">-</span></td>
<td><span id="produceDay25" class="qcontent">-</span></td>
</tr>
</table>
</div>
<div style="width:93%;height:32%;margin:0 auto;margin-top:3%">
<div id="title3Div" class="title3Div" >
<span id="title3" class="qtitle"></span>
<span id="product3" class="productSpan"></span>
</div>
<table style="width:80%;height:70%;margin:0 auto;border-collapse:separate;border-spacing:0px 6px;">
<tr>
<td width="60%"><span class="qcontent">批次</span><span id="batch31" class="qcontent">-</span></td>
<td><span id="produceDay31" class="qcontent">-</span></td>
</tr>
<tr>
<td><span class="qcontent">批次</span><span id="batch32" class="qcontent">-</span></td>
<td><span id="produceDay32" class="qcontent">-</span></td>
</tr>
<tr>
<td><span class="qcontent">批次</span><span id="batch33" class="qcontent">-</span></td>
<td><span id="produceDay33" class="qcontent">-</span></td>
</tr>
<tr>
<td><span class="qcontent">批次</span><span id="batch34" class="qcontent">-</span></td>
<td><span id="produceDay34" class="qcontent">-</span></td>
</tr>
<tr>
<td><span class="qcontent">批次</span><span id="batch35" class="qcontent">-</span></td>
<td><span id="produceDay35" class="qcontent">-</span></td>
</tr>
</table>
</div>
</body>
</html>

View File

@ -0,0 +1,132 @@
<%@ 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>
.qtitle {
font-family: Microsoft YaHei;
}
.qcontent {
font-family: Microsoft YaHei;
color: #fff
}
.title1Div {
border-bottom: 5px solid #5AD8FF;
width:95%;
height:18%;
padding-bottom:1%;
}
.productSpan {
padding-top:3%;
float:right;
font-size: 18px;
color:#4972B4;
font-family:Microsoft YaHei;
}
</style>
<script type="text/javascript">
/* 请求数据 */
function getValue() {
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (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)){//判断存不存在
//颜色
$('.'+code+'Div').css("border-color","#"+data[i].style);
document.getElementById(code).style.color = "#"+data[i].style;
//赋值
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;
document.getElementById(code).innerHTML = data[i].mPoint.parmvalue + data[i].mPoint.unit;
} else if (data[i].getValueType == '${Type_GetHttp}') {
var code = data[i].elementCode;
document.getElementById(code).innerHTML = data[i].value;
} else {
}
}
}
}, 'json');
}
/* 定时器 */
setInterval(getValue, 300000); //<!--每隔5分钟刷新一次-->
/* 初始化 */
$(function () {
getValue();
// console.log("height",document.documentElement.clientWidth);
document.body.style.backgroundColor = "#" + '${param.backgroundColor}';
$(".qtitle").css("font-size", (document.body.offsetWidth * 0.05 + "px"));
$(".qcontent").css("font-size", (document.body.offsetWidth * 0.03 + "px"));
$(".productSpan").css("font-size", (document.body.offsetWidth * 0.028 + "px"));
});
</script>
</head>
<body style="width:100%;height:100%;margin:0;padding:0;overflow-x:hidden;overflow-y:hidden">
<div style="width:93%;height:98%;margin:0 auto;margin-top:5%">
<div id="title1Div" class="title1Div">
<span id="title1" class="qtitle"></span>
<span id="product1" class="productSpan"></span>
</div>
<table style="width:80%;height:70%;margin:0 auto;border-collapse:separate;border-spacing:0px 6px;">
<tr>
<td><span class="qcontent">批次</span><span id="batch1" class="qcontent">-</span></td>
<td><span class="qcontent">生产第</span><span id="produceDay1" class="qcontent">-</span></td>
</tr>
<tr>
<td><span class="qcontent">批次</span><span id="batch2" class="qcontent">-</span></td>
<td><span class="qcontent">生产第</span><span id="produceDay2" class="qcontent">-</span></td>
</tr>
<tr>
<td><span class="qcontent">批次</span><span id="batch3" class="qcontent">-</span></td>
<td><span class="qcontent">生产第</span><span id="produceDay3" class="qcontent">-</span></td>
</tr>
<tr>
<td><span class="qcontent">批次</span><span id="batch4" class="qcontent">-</span></td>
<td><span class="qcontent">生产第</span><span id="produceDay4" class="qcontent">-</span></td>
</tr>
<tr>
<td><span class="qcontent">批次</span><span id="batch5" class="qcontent">-</span></td>
<td><span class="qcontent">生产第</span><span id="produceDay5" class="qcontent">-</span></td>
</tr>
</table>
</div>
</body>
</html>

View File

@ -0,0 +1,621 @@
<%@ 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>
<style>
.title {
float: left;
width: 70px;
height: 30px;
border-radius:4px;
background-color:#B5E9FF;
color: #ffffff;
line-height: 30px;
text-align: center;
margin-left:5px;
cursor: pointer;
}
</style>
<script type="text/javascript">
//获取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;
}
//获取url地址根目录 当前taomcat下路径
function getRootPath2(){
var pathName = window.location.pathname.substring(1);
var webName = pathName == '' ? '' : pathName.substring(0, pathName.indexOf('/'));
return window.location.protocol + '//' + window.location.host +"/"+webName;
}
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方法用.进行拼接
}
/* 请求数据 */
function getoperationDataForCompanyValue() {
$.ajax({
type:'GET',
url:ext.contextPath +"/plan/getJspWholeInfoByPlanLayoutId.do?planLayoutId=${param.planLayoutId}",
async: true,
globle:false,
error: function(){
return false;
},
success: function(data){
data = eval('(' + data + ')');
if(data!=''){
var ysLeftDataHtml="<table style=\"table-layout:fixed;width:100%;height:100%;\">";
var ysLeftDataNum=0;
var ysRightDataHtml="<table style=\"table-layout:fixed;width:100%;height:100%;\">";
var ysRightDataNum=0;
var sys1TopDataHtml="<table style=\"table-layout:fixed;width:60%;height:100%;\">";
var sys1TopDataNum=0;
var sys1BottomDataHtml="<table style=\"table-layout:fixed;width:60%;height:100%;\">";
var sys1BottomDataNum=0;
var sys23LeftTopDataHtml="<table style=\"table-layout:fixed;width:100%;height:100%;\">";
var sys23LeftTopDataNum=0;
var sys23RightTopDataHtml="<table style=\"table-layout:fixed;width:100%;height:100%;\">";
var sys23RightTopDataNum=0;
var sys23LeftBottomDataHtml="<table style=\"table-layout:fixed;width:100%;height:100%;\">";
var sys23LeftBottomDataNum=0;
var sys23RightBottomDataHtml="<table style=\"table-layout:fixed;width:100%;height:100%;\">";
var sys23RightBottomDataNum=0;
var sys4TopDataHtml="<table style=\"table-layout:fixed;width:60%;height:100%;\">";
var sys4TopDataNum=0;
var sys4BottomDataHtml="<table style=\"table-layout:fixed;width:60%;height:100%;\">";
var sys4BottomDataNum=0;
var tskDataHtml="<table style=\"table-layout:fixed;width:60%;height:100%;\">";
var tskDataNum=0;
var inwaterRate=100;
var outwaterRate=100;
for(var i=0;i<data.length;i++){
var color="#8A8A8A";
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;
var alarmMax=data[i].mPoint.alarmmax;
var alarmMin=data[i].mPoint.alarmmin;
if(alarmMax<value){
color="red";
}
if(alarmMin>value){
color="red";
}
}
value=numOutput(value);
if(data[i].elementCode=="ysLeftData"){
ysLeftDataHtml+="<tr style=\"color:#B0B0B0;\">"
ysLeftDataHtml+="<td width=\"40%\" title=\""+data[i].name+"\" style=\"white-space:nowrap;overflow:hidden;text-overflow:ellipsis;\">"+data[i].name+"</td>";
ysLeftDataHtml+="<td width=\"40%\" title=\""+value+"\" style=\"color:"+color+";white-space:nowrap;overflow:hidden;text-overflow:ellipsis;\">"+value+"</td>";
ysLeftDataHtml+="<td width=\"20%\" title=\""+unit+"\" style=\"white-space:nowrap;overflow:hidden;text-overflow:ellipsis;\" align=\"right\">"+unit+"</td>";
ysLeftDataHtml+="</tr>";
ysLeftDataNum++;
}else if(data[i].elementCode=="ysRightData"){
ysRightDataHtml+="<tr style=\"color:#B0B0B0;\">"
ysRightDataHtml+="<td width=\"40%\" title=\""+data[i].name+"\" style=\"white-space:nowrap;overflow:hidden;text-overflow:ellipsis;\">"+data[i].name+"</td>";
ysRightDataHtml+="<td width=\"40%\" title=\""+value+"\" style=\"color:"+color+";white-space:nowrap;overflow:hidden;text-overflow:ellipsis;\">"+value+"</td>";
ysRightDataHtml+="<td width=\"20%\" title=\""+unit+"\" style=\"white-space:nowrap;overflow:hidden;text-overflow:ellipsis;\" align=\"right\">"+unit+"</td>";
ysRightDataHtml+="</tr>";
ysRightDataNum++;
}else if(data[i].elementCode=="1sysTop"){
if(sys1TopDataNum==0){
sys1TopDataHtml+="<tr style=\"color:#B0B0B0;\">"
sys1TopDataHtml+="<td width=\"50%\" title=\""+data[i].name+"\" style=\"white-space:nowrap;overflow:hidden;text-overflow:ellipsis;\">"+data[i].name+"</td>";
sys1TopDataHtml+="<td width=\"30%\" title=\""+value+"\" style=\"color:"+color+";white-space:nowrap;overflow:hidden;text-overflow:ellipsis;\">"+value+"</td>";
sys1TopDataHtml+="<td width=\"20%\" title=\""+unit+"\" style=\"white-space:nowrap;overflow:hidden;text-overflow:ellipsis;\" align=\"right\">"+unit+"</td>";
sys1TopDataHtml+="</tr>";
}
sys1TopDataNum++;
}else if(data[i].elementCode=="1sysBottom"){
sys1BottomDataHtml+="<tr style=\"color:#B0B0B0;\">"
sys1BottomDataHtml+="<td width=\"50%\" title=\""+data[i].name+"\" style=\"white-space:nowrap;overflow:hidden;text-overflow:ellipsis;\">"+data[i].name+"</td>";
sys1BottomDataHtml+="<td width=\"30%\" title=\""+value+"\" style=\"color:"+color+";white-space:nowrap;overflow:hidden;text-overflow:ellipsis;\">"+value+"</td>";
sys1BottomDataHtml+="<td width=\"20%\" title=\""+unit+"\" style=\"white-space:nowrap;overflow:hidden;text-overflow:ellipsis;\" align=\"right\">"+unit+"</td>";
sys1BottomDataHtml+="</tr>";
sys1BottomDataNum++;
}else if(data[i].elementCode=="23sysLeftTop"){
if(sys23LeftTopDataNum==0){
sys23LeftTopDataHtml+="<tr style=\"color:#B0B0B0;\">"
sys23LeftTopDataHtml+="<td width=\"50%\" title=\""+data[i].name+"\" style=\"white-space:nowrap;overflow:hidden;text-overflow:ellipsis;\">"+data[i].name+"</td>";
sys23LeftTopDataHtml+="<td width=\"30%\" title=\""+value+"\" style=\"color:"+color+";white-space:nowrap;overflow:hidden;text-overflow:ellipsis;\">"+value+"</td>";
sys23LeftTopDataHtml+="<td width=\"20%\" title=\""+unit+"\" style=\"white-space:nowrap;overflow:hidden;text-overflow:ellipsis;\" align=\"right\">"+unit+"</td>";
sys23LeftTopDataHtml+="</tr>";
}
sys23LeftTopDataNum++;
}else if(data[i].elementCode=="23sysRightTop"){
if(sys23RightTopDataNum==0){
sys23RightTopDataHtml+="<tr style=\"color:#B0B0B0;\">"
sys23RightTopDataHtml+="<td width=\"50%\" title=\""+data[i].name+"\" style=\"white-space:nowrap;overflow:hidden;text-overflow:ellipsis;\">"+data[i].name+"</td>";
sys23RightTopDataHtml+="<td width=\"30%\" title=\""+value+"\" style=\"color:"+color+";white-space:nowrap;overflow:hidden;text-overflow:ellipsis;\">"+value+"</td>";
sys23RightTopDataHtml+="<td width=\"20%\" title=\""+unit+"\" style=\"white-space:nowrap;overflow:hidden;text-overflow:ellipsis;\" align=\"right\">"+unit+"</td>";
sys23RightTopDataHtml+="</tr>";
}
sys23RightTopDataNum++;
}else if(data[i].elementCode=="23sysLeftBottom"){
sys23LeftBottomDataHtml+="<tr style=\"color:#B0B0B0;\">"
sys23LeftBottomDataHtml+="<td width=\"50%\" title=\""+data[i].name+"\" style=\"white-space:nowrap;overflow:hidden;text-overflow:ellipsis;\">"+data[i].name+"</td>";
sys23LeftBottomDataHtml+="<td width=\"30%\" title=\""+value+"\" style=\"color:"+color+";white-space:nowrap;overflow:hidden;text-overflow:ellipsis;\">"+value+"</td>";
sys23LeftBottomDataHtml+="<td width=\"20%\" title=\""+unit+"\" style=\"white-space:nowrap;overflow:hidden;text-overflow:ellipsis;\" align=\"right\">"+unit+"</td>";
sys23LeftBottomDataHtml+="</tr>";
sys23LeftTopDataNum++;
}else if(data[i].elementCode=="23sysRightBottom"){
sys23RightBottomDataHtml+="<tr style=\"color:#B0B0B0;\">"
sys23RightBottomDataHtml+="<td width=\"50%\" title=\""+data[i].name+"\" style=\"white-space:nowrap;overflow:hidden;text-overflow:ellipsis;\">"+data[i].name+"</td>";
sys23RightBottomDataHtml+="<td width=\"30%\" title=\""+value+"\" style=\"color:"+color+";white-space:nowrap;overflow:hidden;text-overflow:ellipsis;\">"+value+"</td>";
sys23RightBottomDataHtml+="<td width=\"20%\" title=\""+unit+"\" style=\"white-space:nowrap;overflow:hidden;text-overflow:ellipsis;\" align=\"right\">"+unit+"</td>";
sys23RightBottomDataHtml+="</tr>";
sys23RightBottomDataNum++;
}else if(data[i].elementCode=="4sysTop"){
if(sys4TopDataNum==0){
sys4TopDataHtml+="<tr style=\"color:#B0B0B0;\">"
sys4TopDataHtml+="<td width=\"50%\" title=\""+data[i].name+"\" style=\"white-space:nowrap;overflow:hidden;text-overflow:ellipsis;\">"+data[i].name+"</td>";
sys4TopDataHtml+="<td width=\"30%\" title=\""+value+"\" style=\"color:"+color+";white-space:nowrap;overflow:hidden;text-overflow:ellipsis;\">"+value+"</td>";
sys4TopDataHtml+="<td width=\"20%\" title=\""+unit+"\" style=\"white-space:nowrap;overflow:hidden;text-overflow:ellipsis;\" align=\"right\">"+unit+"</td>";
sys4TopDataHtml+="</tr>";
}
sys4TopDataNum++;
}else if(data[i].elementCode=="4sysBottom"){
sys4BottomDataHtml+="<tr style=\"color:#B0B0B0;\">"
sys4BottomDataHtml+="<td width=\"50%\" title=\""+data[i].name+"\" style=\"white-space:nowrap;overflow:hidden;text-overflow:ellipsis;\">"+data[i].name+"</td>";
sys4BottomDataHtml+="<td width=\"30%\" title=\""+value+"\" style=\"color:"+color+";white-space:nowrap;overflow:hidden;text-overflow:ellipsis;\">"+value+"</td>";
sys4BottomDataHtml+="<td width=\"20%\" title=\""+unit+"\" style=\"white-space:nowrap;overflow:hidden;text-overflow:ellipsis;\" align=\"right\">"+unit+"</td>";
sys4BottomDataHtml+="</tr>";
sys4BottomDataNum++;
}else if(data[i].elementCode=="tskData"){
tskDataHtml+="<tr style=\"color:#B0B0B0;\">"
tskDataHtml+="<td width=\"50%\" title=\""+data[i].name+"\" style=\"white-space:nowrap;overflow:hidden;text-overflow:ellipsis;\">"+data[i].name+"</td>";
tskDataHtml+="<td width=\"30%\" title=\""+value+"\" style=\"color:"+color+";white-space:nowrap;overflow:hidden;text-overflow:ellipsis;\">"+value+"</td>";
tskDataHtml+="<td width=\"20%\" title=\""+unit+"\" style=\"white-space:nowrap;overflow:hidden;text-overflow:ellipsis;\" align=\"right\">"+unit+"</td>";
tskDataHtml+="</tr>";
tskDataNum++;
}else if(data[i].elementCode=="inwaterRate"){
inwaterRate=data[i].visualCacheData.value;
}else if(data[i].elementCode=="outwaterRate"){
outwaterRate=data[i].visualCacheData.value;
}
}
if(8-ysLeftDataNum>0){
for(var i=0;i<(8-ysLeftDataNum);i++){
ysLeftDataHtml+="<tr style=\"color:#B0B0B0;\">"
ysLeftDataHtml+="<td width=\"40%\" ></td>";
ysLeftDataHtml+="<td width=\"40%\"></td>";
ysLeftDataHtml+="<td width=\"20%\" ></td>";
ysLeftDataHtml+="</tr>";
}
}
$('#ysLeft').html(ysLeftDataHtml);
if(8-ysRightDataNum>0){
for(var i=0;i<(8-ysRightDataNum);i++){
ysRightDataHtml+="<tr style=\"color:#B0B0B0;\">"
ysRightDataHtml+="<td width=\"40%\" ></td>";
ysRightDataHtml+="<td width=\"40%\"></td>";
ysRightDataHtml+="<td width=\"20%\" ></td>";
ysRightDataHtml+="</tr>";
}
}
$('#ysRight').html(ysRightDataHtml);
$('#1sysTop').html(sys1TopDataHtml);
if(6-sys1BottomDataNum>0){
for(var i=0;i<(6-sys1BottomDataNum);i++){
sys1BottomDataHtml+="<tr style=\"color:#B0B0B0;\">"
sys1BottomDataHtml+="<td width=\"20%\" ></td>";
sys1BottomDataHtml+="<td width=\"20%\"></td>";
sys1BottomDataHtml+="<td width=\"10%\" ></td>";
sys1BottomDataHtml+="</tr>";
}
}
$('#1sysBottom').html(sys1BottomDataHtml);
$('#23sysLeftTop').html(sys23LeftTopDataHtml);
$('#23sysRightTop').html(sys23RightTopDataHtml);
if(6-sys23LeftTopDataNum>0){
for(var i=0;i<(6-sys23LeftTopDataNum);i++){
sys23LeftBottomDataHtml+="<tr style=\"color:#B0B0B0;\">"
sys23LeftBottomDataHtml+="<td width=\"20%\" ></td>";
sys23LeftBottomDataHtml+="<td width=\"20%\"></td>";
sys23LeftBottomDataHtml+="<td width=\"10%\" ></td>";
sys23LeftBottomDataHtml+="</tr>";
}
}
$('#23sysLeftBottom').html(sys23LeftBottomDataHtml);
if(6-sys23RightBottomDataNum>0){
for(var i=0;i<(6-sys23RightBottomDataNum);i++){
sys23RightBottomDataHtml+="<tr style=\"color:#B0B0B0;\">"
sys23RightBottomDataHtml+="<td width=\"20%\" ></td>";
sys23RightBottomDataHtml+="<td width=\"20%\"></td>";
sys23RightBottomDataHtml+="<td width=\"10%\" ></td>";
sys23RightBottomDataHtml+="</tr>";
}
}
$('#23sysRightBottom').html(sys23RightBottomDataHtml);
$('#4sysTop').html(sys4TopDataHtml);
if(6-sys4BottomDataNum>0){
for(var i=0;i<(6-sys4BottomDataNum);i++){
sys4BottomDataHtml+="<tr style=\"color:#B0B0B0;\">"
sys4BottomDataHtml+="<td width=\"20%\" ></td>";
sys4BottomDataHtml+="<td width=\"20%\"></td>";
sys4BottomDataHtml+="<td width=\"10%\" ></td>";
sys4BottomDataHtml+="</tr>";
}
}
$('#4sysBottom').html(sys4BottomDataHtml);
if(8-tskDataNum>0){
for(var i=0;i<(8-tskDataNum);i++){
tskDataHtml+="<tr style=\"color:#B0B0B0;\">"
tskDataHtml+="<td width=\"20%\" ></td>";
tskDataHtml+="<td width=\"20%\"></td>";
tskDataHtml+="<td width=\"10%\" ></td>";
tskDataHtml+="</tr>";
}
}
$('#tskData').html(tskDataHtml);
getoperationDataForCompanychart('inWaterQualitychart',inwaterRate,'进厂水质达标率','#3A84FF');
getoperationDataForCompanychart('outWaterQualitychart',outwaterRate,'出厂水质达标率','#3A84FF');
}
}
});
// $.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
// // console.log(data);
// if(data!=''){
// var ysLeftDataHtml="<table style=\"table-layout:fixed;width:100%;height:100%;\">";
// var ysLeftDataNum=0;
// var ysRightDataHtml="<table style=\"table-layout:fixed;width:100%;height:100%;\">";
// var ysRightDataNum=0;
// for(var i=0;i<data.length;i++){
// var color="#8A8A8A";
// var value=data[i].visualCacheData.value;
// var unit="";
// if(data[i].mPoint!=null){
// unit=data[i].mPoint.unit;
// var alarmMax=data[i].mPoint.alarmmax;
// var alarmMin=data[i].mPoint.alarmmin;
// if(alarmMax<value){
// color="red";
// }
// if(alarmMin>value){
// color="red";
// }
// }
// if(data[i].elementCode=="ysLeftData"){
// ysLeftDataHtml+="<tr style=\"color:#B0B0B0;\">"
// ysLeftDataHtml+="<td width=\"40%\" title=\""+data[i].name+"\" style=\"white-space:nowrap;overflow:hidden;text-overflow:ellipsis;\">"+data[i].name+"</td>";
// ysLeftDataHtml+="<td width=\"40%\" title=\""+value+"\" style=\"color:"+color+";white-space:nowrap;overflow:hidden;text-overflow:ellipsis;\">"+value+"</td>";
// ysLeftDataHtml+="<td width=\"20%\" title=\""+unit+"\" style=\"white-space:nowrap;overflow:hidden;text-overflow:ellipsis;\" align=\"right\">"+unit+"</td>";
// ysLeftDataHtml+="</tr>";
// ysLeftDataNum++;
// }else if(data[i].elementCode=="ysRightData"){
// ysRightDataHtml+="<tr style=\"color:#B0B0B0;\">"
// ysRightDataHtml+="<td width=\"40%\" title=\""+data[i].name+"\" style=\"white-space:nowrap;overflow:hidden;text-overflow:ellipsis;\">"+data[i].name+"</td>";
// ysRightDataHtml+="<td width=\"40%\" title=\""+value+"\" style=\"color:"+color+";white-space:nowrap;overflow:hidden;text-overflow:ellipsis;\">"+value+"</td>";
// ysRightDataHtml+="<td width=\"20%\" title=\""+unit+"\" style=\"white-space:nowrap;overflow:hidden;text-overflow:ellipsis;\" align=\"right\">"+unit+"</td>";
// ysRightDataHtml+="</tr>";
// ysRightDataNum++;
// }
// }
// if(8-ysLeftDataNum>0){
// for(var i=0;i<(8-ysLeftDataNum);i++){
// ysLeftDataHtml+="<tr style=\"color:#B0B0B0;\">"
// ysLeftDataHtml+="<td width=\"40%\" ></td>";
// ysLeftDataHtml+="<td width=\"40%\"></td>";
// ysLeftDataHtml+="<td width=\"20%\" ></td>";
// ysLeftDataHtml+="</tr>";
// }
// }
// $('#ysLeft').html(ysLeftDataHtml);
// if(8-ysRightDataNum>0){
// for(var i=0;i<(8-ysRightDataNum);i++){
// ysRightDataHtml+="<tr style=\"color:#B0B0B0;\">"
// ysRightDataHtml+="<td width=\"40%\" ></td>";
// ysRightDataHtml+="<td width=\"40%\"></td>";
// ysRightDataHtml+="<td width=\"20%\" ></td>";
// ysRightDataHtml+="</tr>";
// }
// }
// $('#ysRight').html(ysRightDataHtml);
// getoperationDataForCompanychart('inWaterQualitychart',95,'进厂水质达标率','#3A84FF');
// getoperationDataForCompanychart('outWaterQualitychart',98,'出厂水质达标率','#3A84FF');
// }
// }, 'json');
}
function getoperationDataForCompanychart(id,value,title,color){
var myChart = echarts.init(document.getElementById(id));
var option = {
title: {
text: value+"%",
textStyle: {
color: '#797979',
fontSize: 18
},
// subtext: title,
// subtextStyle: {
// color: '#797979',
// fontSize: 16
// },
// itemGap: -85, // 主副标题距离
left: 'center',
top: '40%'
},
angleAxis: {
max: 100, // 满分
clockwise: true, // 逆时针
// 隐藏刻度线
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
splitLine: {
show: false
}
},
radiusAxis: {
type: 'category',
// 隐藏刻度线
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
splitLine: {
show: false
}
},
polar: {
center: ['50%', '50%'],
radius: '120%' //图形大小
},
series: [{
type: 'bar',
data: [{
name: '百分比',
value: value,
itemStyle: {
color: color
},
}],
coordinateSystem: 'polar',
roundCap: true,
barWidth: 10,
barGap: '-100%', // 两环重叠
z: 2
},{ // 灰色环
type: 'bar',
data: [{
value: 100,
itemStyle: {
color: '#ffffff',
shadowColor: 'rgba(0, 0, 0, 0.2)',
shadowBlur: 2,
shadowOffsetY: 2
}
}],
coordinateSystem: 'polar',
roundCap: true,
barWidth: 12,
barGap: '-100%', // 两环重叠
z: 1
}]
};
myChart.setOption(option, true);
window.addEventListener("resize", function () {
myChart.resize();
});
}
/* 定时器 */
setInterval(getoperationDataForCompanyValue, 300000); //每5分钟切换
// setInterval(getValue, 3600000); //每一小时切换
/* 初始化 */
$(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";
$('#tab1').css('background-color','#169BD5');
getoperationDataForCompanyValue();
});
function changeTab(tab){
var tabs=$("#tabs div");
for(var i=0;i<tabs.length;i++){
var nowTab=tabs[i];
if(tab==nowTab.id){
$('#'+nowTab.id).css('background-color','#169BD5');
}else{
$('#'+nowTab.id).css('background-color','#B5E9FF');
}
}
var tabContents=$("#tabContents div");
for(var i=0;i<tabContents.length;i++){
var nowTabContent=tabContents[i];
if(nowTabContent.id.indexOf("Content")>0){
if(tab+"Content"==nowTabContent.id){
$('#'+nowTabContent.id).css('display','block');
}else{
$('#'+nowTabContent.id).css('display','none');
}
}
}
}
</script>
</head>
<body style="width:100%;height:100%;margin:0;padding:0;overflow-x:hidden;overflow-y:hidden;">
<div id="operationDataForCompanymain" style="height:calc(100% - 6px);width:100%;padding-top:10px;padding-left:10px;padding-right:10px;">
<div style="height:100%;width:100%;background:#ffffff;border: 1px solid #E1E1E1;border-radius: 4px;box-shadow: 2px 2px 4px 0px #696969, 0px 0px 4px 0px #696969;padding-top:10px;padding-left:10px;padding-right:10px;">
<div style="float: left;width: 100%;height:30px;">
<div style="float: left;width:5px;height:100%;margin-left: 15px;padding-top:5px;padding-bottom:5px;"><div style="width: 100%;height: 100%;background-color:skyblue;"></div></div>
<div style="float: left;height:100%;margin-left: 10px;line-height: 30px;">水厂运行数据</div>
</div>
<div style="float: left;width: 100%;height:calc(100% - 30px);">
<div style="float: left;width:100%;height: 50px;padding-top:10px;padding-bottom:10px;">
<div id="tabs" style="float: left;width: 100%;height: 30px;">
<div id="tab1" class="title" onclick="changeTab('tab1');">原水</div>
<div id="tab2" class="title" onclick="changeTab('tab2');">一系统</div>
<div id="tab3" class="title" onclick="changeTab('tab3');">二三系统</div>
<div id="tab4" class="title" onclick="changeTab('tab4');">四系统</div>
<div id="tab5" class="title" onclick="changeTab('tab5');">退水口</div>
</div>
</div>
<div style="float: left;width: 100%;height:calc(100% - 50px);">
<div style="float: left;width: 70%;height:100%;">
<div id="tabContents" style="float: left;width: 100%;height:100%;padding: 10px;">
<div id="tab1Content" style="display: block;float: left;width: 100%;height:100%;">
<div style="float: left;width:calc((100% - 2px)/2);height: 100%;padding-left:15px;padding-right:15px;">
<div style="float: left;width: 100%;height: 20px;font-weight: bold;">一二三系统</div>
<div id="ysLeft" style="float: left;width: 100%;height:calc(100% - 20px);"></div>
</div>
<div style="float: left;width: 2px;height:100%;padding-top:50px;padding-bottom:50px;">
<div style="float: left;width: 100%;height:100%;background-color:#B5E9FF;"></div>
</div>
<div style="float: left;width:calc((100% - 2px)/2);height: 100%;padding-left:15px;padding-right:15px;">
<div style="float: left;width: 100%;height: 20px;font-weight: bold;">四系统</div>
<div id="ysRight" style="float: left;width: 100%;height:calc(100% - 20px);"></div>
</div>
</div>
<div id="tab2Content" style="display: none;float: left;width: 100%;height:100%;">
<div style="float: left;width:100%;height:75px;padding: 5px;">
<div style="float: left;width: 100%;height: 20px;font-weight: bold;">进水</div>
<div id="1sysTop" style="float: left;width: 100%;height:45px;"></div>
</div>
<div style="float: left;width:100%;height:2px;">
<div style="float: left;width: 100%;height:2px;background-color: #B5E9FF;"></div>
</div>
<div style="float: left;width:100%;height:calc(100% - 100px);padding: 5px;">
<div style="float: left;width: 100%;height: 20px;font-weight: bold;">出水</div>
<div id="1sysBottom" style="float: left;width: 100%;height:calc(100% - 20px);"></div>
</div>
</div>
<div id="tab3Content" style="display: none;float: left;width: 100%;height:100%;">
<div style="float: left;width:calc((100% - 2px)/2);height: 100%;padding-left:15px;padding-right:15px;">
<div style="float: left;width:100%;height:75px;padding: 5px;">
<div style="float: left;width: 100%;height: 20px;font-weight: bold;">二系统</div>
<div id="23sysLeftTop" style="float: left;width: 100%;height:45px;"></div>
</div>
<div style="float: left;width:100%;height:2px;">
<div style="float: left;width: 100%;height:2px;background-color: #B5E9FF;"></div>
</div>
<div style="float: left;width:100%;height:calc(100% - 100px);padding: 5px;">
<div style="float: left;width: 100%;height: 20px;font-weight: bold;">泰供3A</div>
<div id="23sysLeftBottom" style="float: left;width: 100%;height:calc(100% - 20px);"></div>
</div>
</div>
<div style="float: left;width: 2px;height:100%;padding-top:50px;padding-bottom:50px;">
<div style="float: left;width: 100%;height:100%;background-color:#B5E9FF;"></div>
</div>
<div style="float: left;width:calc((100% - 2px)/2);height: 100%;padding-left:15px;padding-right:15px;">
<div style="float: left;width:100%;height:75px;padding: 5px;">
<div style="float: left;width: 100%;height: 20px;font-weight: bold;">三系统</div>
<div id="23sysRightTop" style="float: left;width: 100%;height:45px;"></div>
</div>
<div style="float: left;width:100%;height:2px;">
<div style="float: left;width: 100%;height:2px;background-color: #B5E9FF;"></div>
</div>
<div style="float: left;width:100%;height:calc(100% - 100px);padding: 5px;">
<div style="float: left;width: 100%;height: 20px;font-weight: bold;">泰供3B</div>
<div id="23sysRightBottom" style="float: left;width: 100%;height:calc(100% - 20px);"></div>
</div>
</div>
</div>
<div id="tab4Content" style="display: none;float: left;width: 100%;height:100%;">
<div style="float: left;width:100%;height:75px;padding: 5px;">
<div style="float: left;width: 100%;height: 20px;font-weight: bold;">进水</div>
<div id="4sysTop" style="float: left;width: 100%;height:45px;"></div>
</div>
<div style="float: left;width:100%;height:2px;">
<div style="float: left;width: 100%;height:2px;background-color: #B5E9FF;"></div>
</div>
<div style="float: left;width:100%;height:calc(100% - 100px);padding: 5px;">
<div style="float: left;width: 100%;height: 20px;font-weight: bold;">出水</div>
<div id="4sysBottom" style="float: left;width: 100%;height:calc(100% - 20px);"></div>
</div>
</div>
<div id="tab5Content" style="display: none;float: left;width: 100%;height:100%;">
<div id="tskData" style="float: left;width:100%;height:100%;padding: 5px;">
</div>
</div>
</div>
</div>
<div style="float: left;width: 30%;height:100%;">
<div style="float: left;width: 100%;height: 5%;text-align: center;line-height: 30px;">进厂水质达标率</div>
<div id="inWaterQualitychart" style="float: left;width: 100%;height: 45%;"></div>
<div style="float: left;width: 100%;height: 5%;text-align: center;line-height: 30px;">出厂水质达标率</div>
<div id="outWaterQualitychart" style="float: left;width: 100%;height: 45%;"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

View File

@ -0,0 +1,191 @@
<%@ 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页-->
<script type="text/javascript">
//获取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;
}
//获取url地址根目录 当前taomcat下路径
function getRootPath2(){
var pathName = window.location.pathname.substring(1);
var webName = pathName == '' ? '' : pathName.substring(0, pathName.indexOf('/'));
return window.location.protocol + '//' + window.location.host +"/"+webName;
}
/* 请求数据 */
function getoperationDataForPumpStationValue() {
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
// console.log(data);
if(data!=''){
var series1=[];
var seriesData1=[];
var xAxisData1=[];
var legendData1=[];
legendData1.push("运行时间");
var series2=[];
var seriesData2=[];
var xAxisData2=[];
var legendData2=[];
legendData2.push("指令数");
var series3=[];
var seriesData3=[];
var seriesData4=[];
var xAxisData3=[];
var legendData3=[];
legendData3.push("进水量");
legendData3.push("出水量");
for(var i=0;i<data.length;i++){
if(data[i].elementCode.indexOf("runningTime")>=0){
seriesData1.push(data[i].visualCacheData.value);
xAxisData1.push(data[i].name);
}else if(data[i].elementCode.indexOf("orderNum")>=0){
seriesData2.push(data[i].visualCacheData.value);
xAxisData2.push(data[i].name);
}else if(data[i].elementCode.indexOf("inWater")>=0){
seriesData3.push(data[i].visualCacheData.value);
xAxisData3.push(data[i].name);
}else if(data[i].elementCode.indexOf("outWater")>=0){
seriesData4.push(data[i].visualCacheData.value);
}
}
series1.push({
type: 'bar',
data:seriesData1,
name:"运行时间",
barWidth : 30,
})
series2.push({
type: 'bar',
data:seriesData2,
name:"指令数",
barWidth : 30,
})
series3.push({
type: 'bar',
data:seriesData3,
name:"进水量",
barWidth : 30,
})
series3.push({
type: 'bar',
data:seriesData4,
name:"出水量",
barWidth : 30,
})
getoperationDataForPumpStationchart('yxsjchart','运行时间本日累计',series1,xAxisData1,legendData1);
getoperationDataForPumpStationchart('zlschart','指令数本日累计',series2,xAxisData2,legendData2);
getoperationDataForPumpStationchart('jcschart','进出水量本日累计',series3,xAxisData3,legendData3);
}
},'json');
}
function getoperationDataForPumpStationchart(id,title,series,xAxisData,legendData){
var myChart = echarts.init(document.getElementById(id));
var option = {
color:['#3AA1FF','#4ECB73'],
title: {
text:title,
top:'5%',
textStyle:{
fontWeight:'400',
fontSize:16
}
},
tooltip: {
trigger: 'axis'
},
legend: {
data:legendData,
right:'10%',
top:'10%'
},
calculable: true,
xAxis: [
{
type: 'category',
data: xAxisData,
axisLabel: { rotate: -30 },
}
],
yAxis: [
{
type: 'value',
splitNumber:2
}
],
series:series
};
myChart.setOption(option, true);
window.addEventListener("resize", function () {
myChart.resize();
});
}
/* 定时器 */
setInterval(getoperationDataForPumpStationValue, 300000); //每5分钟切换
// setInterval(getValue, 3600000); //每一小时切换
/* 初始化 */
$(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";
getoperationDataForPumpStationValue();
//console.log("height",document.body.scrollHeight);
});
</script>
</head>
<body style="width:100%;height:100%;margin:0;padding:0;overflow-x:hidden;overflow-y:hidden;">
<div id="operationDataForPumpStationmain" style="height:calc(100% - 6px);width:100%;padding-top:10px;padding-left:10px;padding-right:10px;">
<div style="height:100%;width:100%;background:#ffffff;border: 1px solid #E1E1E1;border-radius: 4px;box-shadow: 2px 2px 4px 0px #696969, 0px 0px 4px 0px #696969;padding-top:10px;padding-left:10px;padding-right:10px;">
<div style="float: left;width: 100%;height:30px;">
<div style="float: left;width:5px;height:100%;margin-left: 15px;padding-top:5px;padding-bottom:5px;"><div style="width: 100%;height: 100%;background-color:skyblue;"></div></div>
<div style="float: left;height:100%;margin-left: 10px;line-height: 30px;">泵房运行情况</div>
</div>
<div style="float: left;width: 100%;height:calc(100% - 30px);">
<div id="yxsjchart" style="float: left;width: 50%;height: 50%;"></div>
<div id="zlschart" style="float: left;width: 50%;height: 50%;"></div>
<div id="jcschart" style="float: left;width: 100%;height: 50%;"></div>
</div>
</div>
</div>
</body>
</html>

View File

@ -0,0 +1,65 @@
<%@ 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"%>
<!DOCTYPE html>
<!-- <html lang="zh-CN"> -->
<!-- BEGIN HEAD -->
<head>
<title></title>
<!-- 引用页头及CSS页-->
<jsp:include page="/jsp/incVisual.jsp"></jsp:include>
<script type="text/javascript">
function getValue() {
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
//每一条循环判断
//console.log("data", data);
for (var i = 0; i < data.length; i++) {
var code = data[i].elementCode;
if (document.getElementById(code)) {
document.getElementById(code).src = data[i].valueUrl;
}
// } 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;
// } 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 {
// }
// }
}
}, 'json');
}
/* 定时器 */
setInterval(getValue, 300000); //<!--每隔5分钟刷新一次-->
$(function () {
getValue();
// console.log(document.documentElement.offsetHeight);
// console.log(document.documentElement.clientHeight);
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";
});
</script>
</head>
<body style="width:100%;height:100%;margin:0;padding:0;">
<iframe id="outurl" scrolling="no" allowtransparency="yes" src=""
style="height:100%;width:100%;border:0px;padding:0px;margin:0px"></iframe>
</body>
</html>

View File

@ -0,0 +1,207 @@
<%@ 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>
.titleDiv {
border-radius: 30px;
border: 3px solid #fff;
background-color: #1BB3DC;
}
.q11Line {
display: inline-block;
background-color: #5AD8FF;
-webkit-mask: url(../../../IMG/material/Q11Line.svg) no-repeat;
mask: url(../../../IMG/material/Q11Line.svg) no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
}
.q12Line {
display: inline-block;
background-color: #FFDF58;
-webkit-mask: url(../../../IMG/material/Q12Line.svg) no-repeat;
mask: url(../../../IMG/material/Q12Line.svg) no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
}
</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" + month;
}
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) {
//每一条循环判断
//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}') {
if (data[i].elementCode == 'Q11') {
if (data[i].mPoint.parmvalue != '1') {
document.getElementById("q11Line").style.backgroundColor = "#7285A0";
}
} else if (data[i].elementCode == 'Q12') {
if (data[i].mPoint.parmvalue != '1') {
document.getElementById("q12Line").style.backgroundColor = "#7285A0";
}
}
} else if (data[i].getValueType == '${Type_GetHttp}') {
var code = data[i].elementCode;
if(document.getElementById(code)){
document.getElementById(code).innerHTML = data[i].value;
}
} else {
}
}
}
}, 'json');
}
/* 定时器 */
setInterval(getValue, 300000); //<!--每隔5分钟刷新一次-->
setInterval(clock, 1000); //每隔1秒显示一次
$(function () {
clock();
getValue();
document.body.style.backgroundColor = "#" + '${param.backgroundColor}';
$("#clock").css("font-size", (document.documentElement.clientWidth * 0.02 + "px"));
// $("#lunar").css("font-size", (document.documentElement.clientWidth * 0.03 + "px"));
$("#date").css("font-size", (document.documentElement.clientWidth * 0.02 + "px"));
$("#week").css("font-size", (document.documentElement.clientWidth * 0.02 + "px"));
$("#title1").css("font-size", (document.documentElement.clientWidth * 0.013 + "px"));
document.getElementById("titleDiv").style.width = document.documentElement.clientWidth * 0.18 + "px";
document.getElementById("titleDiv").style.height = document.documentElement.clientHeight * 0.049 + "px";
document.getElementById("titleDiv").style.borderWidth = document.documentElement.clientHeight * 0.003 + "px";
document.getElementById("backImage").style.width = document.documentElement.clientWidth + "px";
document.getElementById("backImage").style.height = document.documentElement.clientHeight + "px";
document.getElementById("q11Line").style.width = document.documentElement.clientWidth + "px";
document.getElementById("q11Line").style.height = document.documentElement.clientHeight + "px";
document.getElementById("q12Line").style.width = document.documentElement.clientWidth + "px";
document.getElementById("q12Line").style.height = document.documentElement.clientHeight + "px";
document.getElementById("floatDiv").style.width = document.documentElement.clientWidth + "px";
document.getElementById("floatDiv").style.height = document.documentElement.clientHeight + "px";
});
</script>
</head>
<body style="width:100%;height:100%;margin:0;padding:0;">
<div id="floatDiv" style="position: absolute;z-index:1;">
<!-- 时间 -->
<div style="width:96%;height:10%;padding-top:0.5%;padding-left:2%;position: absolute;z-index:2;text-align: center;">
<table style="width:100%;height:100%;padding:5%;">
<tr>
<td width="69%">
<div id="titleDiv" class="titleDiv" style="height:60px;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>
<i id="q11Line" class="q11Line" style="position: absolute;z-index:2;"></i>
<i id="q12Line" class="q12Line" style="position: absolute;z-index:2;"></i>
</div>
<img id="backImage" src="" style="z-index:-1;positon:relative;" alt="" />
</body>
</html>

View File

@ -0,0 +1,208 @@
<%@ 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>
.titleDiv {
border-radius: 30px;
border: 3px solid #fff;
background-color: #1BB3DC;
}
.p21Line {
display: inline-block;
background-color: #5AD8FF;
-webkit-mask: url(../../../IMG/material/P21Line.svg) no-repeat;
mask: url(../../../IMG/material/P21Line.svg) no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
}
.p22Line {
display: inline-block;
background-color: #FFDF58;
-webkit-mask: url(../../../IMG/material/P22Line.svg) no-repeat;
mask: url(../../../IMG/material/P22Line.svg) no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
}
</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" + month;
}
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) {
//每一条循环判断
//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;
document.getElementById(code).style.display = "block";
}
} else {
//获取值 和 获取Modbus
if (data[i].getValueType == '${Type_GetValue}' || data[i].getValueType == '${Type_GetModbus}') {
if (data[i].elementCode == 'P21') {
if (data[i].mPoint.parmvalue != '1') {
document.getElementById("p21Line").style.backgroundColor = "#7285A0";
}
} else if (data[i].elementCode == 'P22') {
if (data[i].mPoint.parmvalue != '1') {
document.getElementById("p22Line").style.backgroundColor = "#7285A0";
}
}
} else if (data[i].getValueType == '${Type_GetHttp}') {
var code = data[i].elementCode;
if(document.getElementById(code)){
document.getElementById(code).innerHTML = data[i].value;
}
} else {
}
}
}
}, 'json');
}
/* 定时器 */
setInterval(getValue, 300000); //<!--每隔5分钟刷新一次-->
// setInterval(clock, 1000); //每隔1秒显示一次
$(function () {
// clock();
getValue();
document.body.style.backgroundColor = "#" + '${param.backgroundColor}';
// $("#clock").css("font-size", (document.documentElement.clientWidth * 0.02 + "px"));
// // $("#lunar").css("font-size", (document.documentElement.clientWidth * 0.03 + "px"));
// $("#date").css("font-size", (document.documentElement.clientWidth * 0.02 + "px"));
// $("#week").css("font-size", (document.documentElement.clientWidth * 0.02 + "px"));
// $("#title1").css("font-size", (document.documentElement.clientWidth * 0.013 + "px"));
document.getElementById("titleDiv").style.width = document.documentElement.clientWidth * 0.18 + "px";
document.getElementById("titleDiv").style.height = document.documentElement.clientHeight * 0.049 + "px";
document.getElementById("titleDiv").style.borderWidth = document.documentElement.clientHeight * 0.003 + "px";
document.getElementById("backImage").style.width = document.documentElement.clientWidth + "px";
document.getElementById("backImage").style.height = document.documentElement.clientHeight + "px";
document.getElementById("p21Line").style.width = document.documentElement.clientWidth + "px";
document.getElementById("p21Line").style.height = document.documentElement.clientHeight + "px";
document.getElementById("p22Line").style.width = document.documentElement.clientWidth + "px";
document.getElementById("p22Line").style.height = document.documentElement.clientHeight + "px";
document.getElementById("floatDiv").style.width = document.documentElement.clientWidth + "px";
document.getElementById("floatDiv").style.height = document.documentElement.clientHeight + "px";
});
</script>
</head>
<body style="width:100%;height:100%;margin:0;padding:0;">
<div id="floatDiv" style="position: absolute;z-index:1;">
<!-- 时间 -->
<div style="width:96%;height:10%;padding-top:0.5%;padding-left:2%;position: absolute;z-index:2;text-align: center;">
<table style="width:100%;height:100%;padding:5%;">
<tr>
<td width="69%">
<div id="titleDiv" class="titleDiv" style="height:60px;text-align: center;display:none">
<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>
<i id="p21Line" class="p21Line" style="position: absolute;z-index:2;"></i>
<i id="p22Line" class="p22Line" style="position: absolute;z-index:2;"></i>
</div>
<img id="backImage" src="" style="z-index:-1;positon:relative;" alt="" />
</body>
</html>

View File

@ -0,0 +1,245 @@
<%@ 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>
.ellipse {
width: 35px;
height: 12px;
background-color: #497A99;
position: relative;
-o-border-radius: 100%;
-ms-border-radius: 100%;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
z-index: 1;
}
.circle {
width: 35px;
height: 35px;
background-color: #5AD8FF;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
text-align: center;
}
.stick {
height: 150px;
width: 20px;
border-left: 2px solid #63BEDE;
margin-left: 16px;
position: absolute;
z-index: 2;
}
.blueSpanSmallFont {
color: #62D7FE;
font-weight: bold;
font-family: Microsoft YaHei;
}
.whiteSpanSmallFont {
color: white;
font-family: Microsoft YaHei;
}
.darkBlueSpanSmallFont {
color: #4972B4;
font-weight: bold;
font-family: Microsoft YaHei;
}
</style>
<script type="text/javascript">
/* 定义变量 */
var type = "node";
/* 获取数据 */
function getProcessValue() {
$("#table").empty();
$.post(ext.contextPath + '/plan/getProcess.do', { planLayoutId: "${param.planLayoutId}", type: type }, function (data) {
//console.log("data",data);
//先生成流程图
for (var j = 0; j < data.process.length; j++) {
var batchNo = "-";
if (data.process[j].mPoint.parmvalue != null && data.process[j].mPoint.parmvalue != "") {
batchNo = data.process[j].mPoint.parmvalue;
}
var num = j+1;//用于生成product1这样的id,从0开始
var tableStr = '<tr><td colspan="2"><span id="product'+num+'" class="darkBlueSpanSmallFont" style="font-size:'
+ document.documentElement.clientWidth * 0.02 + 'px"></span></td></tr>'
+ '<tr>'
+ '<td align="center"><div class="blueSpanSmallFont" style="font-size:'
+ document.documentElement.clientWidth * 0.02 + 'px">' + batchNo + '</div></td>'
+ '<td><div id="dotLine' + j + '" style="height:50px;width:950px"></div></td>'
+ '</tr>';
$("#table").append(tableStr);
option = {
series: [
{
type: 'graph',
layout: 'none',
symbolSize: 20,
roam: 'scale',
edgeSymbol: ['circle', 'arrow'],
edgeSymbolSize: [4, 10],
data: [{
name: '节点1',
x: 500,
y: 100,
itemStyle: {
color: '#2F6D96',
},
}, {
name: '节点2',
x: 400,
y: 100,
itemStyle: {
color: '#2F6D96',
},
}, {
name: '节点3',
x: 300,
y: 100,
itemStyle: {
color: '#2F6D96',
},
}, {
name: '节点4',
x: 200,
y: 100,
itemStyle: {
color: '#2F6D96',
},
}, {
name: '节点5',
x: 100,
y: 100,
//symbol: 'image://<%=request.getContextPath()%>/IMG/material/blueCircle.svg',
itemStyle: {
color: '#2F6D96',
},
}],
// links: [],
links: [{
source: 4,
target: 3,
}, {
source: 3,
target: 2,
}, {
source: 2,
target: 1,
}, {
source: 1,
target: 0,
}],
lineStyle: {
normal: {
opacity: 0.9,
width: 2,
curveness: 0,
color: '#2F6D96',
}
}
}
]
};
for (var k = data.node.length - 1; k >= 0; k--) {
option.series[0].data[k].name = data.node[k].location.replace("\\", "");
if ((data.node[k].morder + 1) == data.process[j].value) {//进行中
option.series[0].data[k].symbol = 'image://<%=request.getContextPath()%>/IMG/material/ing.svg';
option.series[0].data[k].symbolSize = [100, 37];
} else if ((data.node[k].morder + 1) > data.process[j].value) {//打勾
option.series[0].data[k].symbol = 'image://<%=request.getContextPath()%>/IMG/material/finish.svg';
option.series[0].data[k].symbolSize = [100, 37];
} else if ((data.node[k].morder + 1) < data.process[j].value) {//默认
}
}
var chart = echarts.init(document.getElementById('dotLine' + j));
chart.setOption(option);
}
//再往流程里塞一些数据
getValue();
}, 'json');
}
function getValue() {
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
//每一条循环判断
//console.log("data", data);
for (var i = 0; i < data.length; i++) {
//获取值 和 获取Modbus
if (data[i].getValueType == '${Type_GetValue}' || data[i].getValueType == '${Type_GetModbus}') {
var code = data[i].elementCode;
if (document.getElementById(code)) {
//console.log("code", code);
document.getElementById(code).innerHTML = data[i].mPoint.parmvalue;
}
} else if (data[i].getValueType == '${Type_GetHttp}') {
var code = data[i].elementCode;
if (document.getElementById(code)) {
document.getElementById(code).innerHTML = data[i].value;
}
} else {
}
}
}, 'json');
}
/* 定时器 */
setInterval(getProcessValue, 300000); //<!--每隔5分钟刷新一次-->
$(function () {
getProcessValue();
document.body.style.backgroundColor = "#" + '${param.backgroundColor}';
document.getElementById("process").style.width = document.documentElement.clientWidth + "px";
document.getElementById("process").style.height = document.documentElement.clientHeight + "px";
document.getElementById("tableDiv").style.height = 0.6 * document.documentElement.clientHeight + "px";
document.getElementById("tableDiv").style.width = 0.9 * document.documentElement.clientWidth + "px";
//$(".blueSpanSmallFont").css("font-size", (document.documentElement.clientWidth * 0.03 + "px"));
//$(".whiteSpanSmallFont").css("font-size", (document.body.offsetWidth * 0.03 + "px"));
});
</script>
</head>
<body style="width:100%;height:100%;margin:0;padding:0;">
<div style="width:100%;height:100%;margin:0;padding:0;text-align:center">
<div id="tableDiv" style="position:absolute;z-index:1;top:33%;left:7%">
<table id="table" style="width:100%;height:100%;border-collapse:separate;border-spacing:0px 6px;text-align:left">
</table>
</div>
<img id="process" src="<%=request.getContextPath()%>/IMG/bg_2F/工艺过程底图.jpg" style="z-index:-1;positon:relative;"
alt="" />
</div>
</body>
</html>

View File

@ -0,0 +1,253 @@
<%@ 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>
.ellipse {
width: 35px;
height: 12px;
background-color: #497A99;
position: relative;
-o-border-radius: 100%;
-ms-border-radius: 100%;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
z-index: 1;
}
.circle {
width: 35px;
height: 35px;
background-color: #5AD8FF;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
text-align: center;
}
.stick {
height: 150px;
width: 20px;
border-left: 2px solid #63BEDE;
margin-left: 16px;
position: absolute;
z-index: 2;
}
.blueSpanSmallFont {
color: #62D7FE;
font-weight: bold;
font-family: Microsoft YaHei;
}
.whiteSpanSmallFont {
color: white;
font-family: Microsoft YaHei;
}
.darkBlueSpanSmallFont {
color: #4972B4;
font-weight: bold;
font-family: Microsoft YaHei;
}
</style>
<script type="text/javascript">
/* 定义变量 */
var type = "node";
/* 获取数据 */
function getProcessValue() {
$("#table").empty();
$.post(ext.contextPath + '/plan/getProcess.do', { planLayoutId: "${param.planLayoutId}", type: type }, function (data) {
console.log("data",data);
//先生成流程图
for (var j = 0; j < data.process.length; j++) {
var batchNo = "-";
if (data.process[j].mPoint.parmvalue != null && data.process[j].mPoint.parmvalue != "") {
batchNo = data.process[j].mPoint.parmvalue;
}
var num = j+1;//用于生成product1这样的id,从0开始
var tableStr = '<tr><td colspan="2"><span id="product'+num+'" class="darkBlueSpanSmallFont" style="font-size:'
+ document.documentElement.clientWidth * 0.02 + 'px"></span></td></tr>'
+ '<tr>'
+ '<td align="center"><div class="blueSpanSmallFont" style="font-size:'
+ document.documentElement.clientWidth * 0.02 + 'px">' + batchNo + '</div></td>'
+ '<td><div id="dotLine' + j + '" style="height:50px;width:950px"></div></td>'
+ '</tr>';
$("#table").append(tableStr);
option = {
series: [
{
type: 'graph',
layout: 'none',
symbolSize: 20,
roam: 'scale',
edgeSymbol: ['circle', 'arrow'],
edgeSymbolSize: [4, 10],
data: [{
name: '节点1',
x: 500,
y: 100,
itemStyle: {
color: '#2F6D96',
},
}, {
name: '节点2',
x: 400,
y: 100,
itemStyle: {
color: '#2F6D96',
},
}, {
name: '节点3',
x: 300,
y: 100,
itemStyle: {
color: '#2F6D96',
},
}, {
name: '节点4',
x: 200,
y: 100,
itemStyle: {
color: '#2F6D96',
},
}, {
name: '节点5',
x: 100,
y: 100,
//symbol: 'image://<%=request.getContextPath()%>/IMG/material/blueCircle.svg',
itemStyle: {
color: '#2F6D96',
},
}],
// links: [],
links: [{
source: 4,
target: 3,
}, {
source: 3,
target: 2,
}, {
source: 2,
target: 1,
}, {
source: 1,
target: 0,
}],
lineStyle: {
normal: {
opacity: 0.9,
width: 2,
curveness: 0,
color: '#2F6D96',
}
}
}
]
};
for (var k = data.node.length - 1; k >= 0; k--) {
option.series[0].data[k].name = data.node[k].location.replace("\\", "");
if ((data.node[k].morder + 1) == data.process[j].value) {//进行中
option.series[0].data[k].symbol = 'image://<%=request.getContextPath()%>/IMG/material/ing.svg';
option.series[0].data[k].symbolSize = [100, 37];
} else if ((data.node[k].morder + 1) > data.process[j].value) {//打勾
option.series[0].data[k].symbol = 'image://<%=request.getContextPath()%>/IMG/material/finish.svg';
option.series[0].data[k].symbolSize = [100, 37];
} else if ((data.node[k].morder + 1) < data.process[j].value) {//默认
}
}
//若没有第一个文件切有批次号数据 默认第一个节点进行中
if(data.process[j].value == 7){
if(data.process[j].mPoint.parmvalue != "" && data.process[j].mPoint.parmvalue != "-" && data.process[j].mPoint.parmvalue != "NA"){
option.series[0].data[4].symbol = 'image://<%=request.getContextPath()%>/IMG/material/ing.svg';
option.series[0].data[4].symbolSize = [100, 37];
}
}
var chart = echarts.init(document.getElementById('dotLine' + j));
chart.setOption(option);
}
//再往流程里塞一些数据
getValue();
}, 'json');
}
function getValue() {
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
//每一条循环判断
//console.log("data", data);
for (var i = 0; i < data.length; i++) {
//获取值 和 获取Modbus
if (data[i].getValueType == '${Type_GetValue}' || data[i].getValueType == '${Type_GetModbus}') {
var code = data[i].elementCode;
if (document.getElementById(code)) {
//console.log("code", code);
document.getElementById(code).innerHTML = data[i].mPoint.parmvalue;
}
} else if (data[i].getValueType == '${Type_GetHttp}') {
var code = data[i].elementCode;
if (document.getElementById(code)) {
document.getElementById(code).innerHTML = data[i].value;
}
} else {
}
}
}, 'json');
}
/* 定时器 */
setInterval(getProcessValue, 300000); //<!--每隔5分钟刷新一次-->
$(function () {
getProcessValue();
document.body.style.backgroundColor = "#" + '${param.backgroundColor}';
document.getElementById("process").style.width = document.documentElement.clientWidth + "px";
document.getElementById("process").style.height = document.documentElement.clientHeight + "px";
document.getElementById("tableDiv").style.height = 0.6 * document.documentElement.clientHeight + "px";
document.getElementById("tableDiv").style.width = 0.9 * document.documentElement.clientWidth + "px";
//$(".blueSpanSmallFont").css("font-size", (document.documentElement.clientWidth * 0.03 + "px"));
//$(".whiteSpanSmallFont").css("font-size", (document.body.offsetWidth * 0.03 + "px"));
});
</script>
</head>
<body style="width:100%;height:100%;margin:0;padding:0;">
<div style="width:100%;height:100%;margin:0;padding:0;text-align:center">
<div id="tableDiv" style="position:absolute;z-index:1;top:33%;left:7%">
<table id="table" style="width:100%;height:100%;border-collapse:separate;border-spacing:0px 6px;text-align:left">
</table>
</div>
<img id="process" src="<%=request.getContextPath()%>/IMG/bg_2F/工艺过程底图.jpg" style="z-index:-1;positon:relative;"
alt="" />
</div>
</body>
</html>

View File

@ -0,0 +1,271 @@
<%@ 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"%>
<!DOCTYPE html>
<!-- <html lang="zh-CN"> -->
<!-- BEGIN HEAD -->
<head>
<title></title>
<!-- 引用页头及CSS页-->
<jsp:include page="/jsp/incVisual.jsp"></jsp:include>
<style>
.ellipse {
width: 35px;
height: 12px;
background-color: #497A99;
position: relative;
-o-border-radius: 100%;
-ms-border-radius: 100%;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
z-index: 1;
}
.circle {
width: 35px;
height: 35px;
background-color: #5AD8FF;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
text-align: center;
}
.stick {
height: 150px;
width: 20px;
border-left: 2px solid #63BEDE;
margin-left: 16px;
position: absolute;
z-index: 2;
}
.blueSpanSmallFont {
color: #62D7FE;
font-weight: bold;
font-family: Microsoft YaHei;
}
.whiteSpanSmallFont {
color: white;
font-family: Microsoft YaHei;
}
</style>
<script type="text/javascript">
/* 定义变量 */
var type = "node";
/* 获取数据 */
function getProcessValue() {
$("#tanghulu").empty();
$.post(ext.contextPath + '/plan/getProcess.do', { planLayoutId: "${param.planLayoutId}", type: type }, function (data) {
//console.log(data);
//生成飞行棋上的糖葫芦
for (var i = 0; i < data.node.length; i++) {
var array = new Array();//该节点内需要放的糖葫芦数组
var num = data.node[i].morder;//取用morder数字作为比对节点
for (var j = 0; j < data.process.length; j++) {
if (data.process[j].value == num) {
array.push(data.process[j].elementCode.match(/\d+/g));//将elementcode的数字作为糖葫芦
}
}
//console.log("array", array);
//生成该节点的糖葫芦
if (array.length != 0) {
//height控制bottom width控制left 定位
var divStr = '<div style="position: absolute;z-index:1;bottom:' + data.node[i].height + '%;left:'
+ data.node[i].width + '%"><div style="position: absolute;z-index:3;">';
//循环遍历array 插上糖葫芦
for (var t = 0; t < array.length; t++) {
divStr += '<div class="circle"><span style="font-size:25px;font-weight: bold;">' + array[t] + '</span></div><div style="height:7px"></div>';
}
divStr += '</div>';
//数组过长加长糖葫芦杆子
if (array.length > 3) {
divStr += '<div class="stick" style="height:200px"></div><div style="height:195px;position: relative;z-index:1;"></div><div class="ellipse"></div></div>';
} else {
divStr += '<div class="stick"></div><div style="height:145px;position: relative;z-index:1;"></div><div class="ellipse"></div></div>';
}
//console.log(divStr);
$("#tanghulu").append(divStr);
}
}
$("#table").empty();
for (var j = 0; j < data.process.length; j++) {
var batchNo = "无";
if (data.process[j].mPoint.parmvalue != null && data.process[j].mPoint.parmvalue != "") {
batchNo = data.process[j].mPoint.parmvalue;
}
var tableStr = '<tr><td><div class="blueSpanSmallFont" style="font-size:' + document.documentElement.clientWidth * 0.02 + 'px">' + batchNo
+ '</div></td><td><div id="dotLine' + j + '" style="height:30px;width:500px"></div></td></tr>';
$("#table").append(tableStr);
option = {
series: [
{
type: 'graph',
layout: 'none',
symbolSize: 20,
roam: 'scale',
edgeSymbol: ['circle', 'arrow'],
edgeSymbolSize: [4, 10],
data: [{
name: '节点1',
x: 500,
y: 100,
itemStyle: {
color: '#2F6D96',
},
}, {
name: '节点2',
x: 400,
y: 100,
itemStyle: {
color: '#2F6D96',
},
}, {
name: '节点3',
x: 300,
y: 100,
itemStyle: {
color: '#2F6D96',
},
}, {
name: '节点4',
x: 200,
y: 100,
itemStyle: {
color: '#2F6D96',
},
}, {
name: '节点5',
x: 100,
y: 100,
//symbol: 'image://<%=request.getContextPath()%>/IMG/material/blueCircle.svg',
itemStyle: {
color: '#2F6D96',
},
}],
// links: [],
links: [{
source: 4,
target: 3,
}, {
source: 3,
target: 2,
}, {
source: 2,
target: 1,
}, {
source: 1,
target: 0,
}],
lineStyle: {
normal: {
opacity: 0.9,
width: 2,
curveness: 0,
color: '#2F6D96',
}
}
}
]
};
for(var k=data.node.length-1;k>=0;k--){
option.series[0].data[k].name = data.node[k].location.replace("\\","");
if(data.node[k].morder == data.process[j].value){//进行中
option.series[0].data[k].symbol = 'image://<%=request.getContextPath()%>/IMG/material/ing.svg';
option.series[0].data[k].symbolSize = [58, 25];
}else if(data.node[k].morder > data.process[j].value){//打勾
option.series[0].data[k].symbol = 'image://<%=request.getContextPath()%>/IMG/material/finish.svg';
option.series[0].data[k].symbolSize = [58, 25];
}else if(data.node[k].morder < data.process[j].value){//默认
}
}
var chart = echarts.init(document.getElementById('dotLine' + j));
chart.setOption(option);
}
//生成工单批次table
// for (var j = 0; j < data.process.length; j++) {
// var batchNo = "无";
// if (data.process[j].mPoint.parmvalue != null && data.process[j].mPoint.parmvalue != "") {
// batchNo = data.process[j].mPoint.parmvalue;
// }
// var tableStr = '<tr><td><div class="blueSpanSmallFont" style="font-size:' + document.documentElement.clientWidth * 0.03 + 'px">' + data.process[j].name
// + '</div></td><td><div class="whiteSpanSmallFont" style="font-size:' + document.documentElement.clientWidth * 0.03 + 'px">'
// + batchNo + '</div></td></tr>';
// $("#table").append(tableStr);
// }
}, 'json');
}
/* 定时器 */
setInterval(getProcessValue, 300000); //<!--每隔5分钟刷新一次-->
$(function () {
getProcessValue();
document.body.style.backgroundColor = "#" + '${param.backgroundColor}';
document.getElementById("process").style.width = document.documentElement.clientWidth + "px";
document.getElementById("process").style.height = document.documentElement.clientHeight + "px";
document.getElementById("tanghulu").style.width = document.documentElement.clientWidth + "px";
document.getElementById("tanghulu").style.height = document.documentElement.clientHeight + "px";
document.getElementById("tableDiv").style.height = 0.4 * document.documentElement.clientHeight + "px";
document.getElementById("tableDiv").style.width = 0.4 * document.documentElement.clientWidth + "px";
//$(".blueSpanSmallFont").css("font-size", (document.documentElement.clientWidth * 0.03 + "px"));
//$(".whiteSpanSmallFont").css("font-size", (document.body.offsetWidth * 0.03 + "px"));
});
</script>
</head>
<body style="width:100%;height:100%;margin:0;padding:0;">
<div style="width:100%;height:100%;margin:0;padding:0;text-align:center">
<!--糖葫芦div-->
<div id="tanghulu" style="position: absolute;z-index:1;">
<!--糖葫芦牌子-->
<!--培养基-->
<!-- <div style="position: absolute;z-index:1;bottom:65%;left:25%"> -->
<!--糖葫芦-->
<!-- <div style="position: absolute;z-index:3;">
<div class="circle">
<span style="font-size:25px;font-weight: bold;">5</span>
</div>
<div style="height:7px"></div>
<div class="circle">
<span style="font-size:25px;font-weight: bold;">3</span>
</div>
<div style="height:7px"></div>
<div class="circle">
<span style="font-size:25px;font-weight: bold;">2</span>
</div>
</div> -->
<!--糖葫芦棍子-->
<!-- <div class="stick"></div> -->
<!-- 糖葫芦棍子底层div将椭圆顶下去 -->
<!-- <div style="height:145px;position: relative;z-index:1;"></div> -->
<!--糖葫芦底椭圆-->
<!-- <div class="ellipse"></div> -->
<!-- </div> -->
</div>
<div id="tableDiv" style="position:absolute;z-index:1;top:55%;left:7%">
<table id="table" style="width:100%;height:100%;border-collapse:separate;border-spacing:0px 6px;text-align:left">
</table>
</div>
<img id="process" src="<%=request.getContextPath()%>/IMG/bg_2F/process.jpg" style="z-index:-1;positon:relative;"
alt="" />
</div>
</body>
</html>

View File

@ -0,0 +1,400 @@
<%@ 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>
.q22Div {
position: relative;
z-index: 1;
top: 19%;
left: 7%;
width: 48%;
height: 29%;
border-bottom: 2px solid #7285A0;
border-right: 2px solid #7285A0;
margin: 0
}
.q22LeftLine {
height: 0px;
border: 1px solid #7285A0;
width: 36.5%;
transform: rotate(111deg);
-o-transform: rotate(111deg);
-moz-transform: rotate(111deg);
-webkit-transform: rotate(111deg);
position: absolute;
z-index: 2;
float: left;
margin-top: 16.7%;
left: -11.8%;
}
.q22TopLine {
width: 87%;
border-top: 2px solid #7285A0;
float: right;
}
.q21Div {
position: relative;
z-index: 1;
top: 21%;
left: 1.5%;
width: 53.5%;
height: 37%;
border-bottom: 2px solid #7285A0;
border-right: 2px solid #7285A0;
}
.q21TopRightLine {
width: 19%;
border-top: 2px solid #7285A0;
float: right;
}
.q21TopMiddleLine {
width: 28.5%;
height: 40%;
border-bottom: 2px solid #7285A0;
border-right: 2px solid #7285A0;
float: right;
}
.q21TopLeftLine {
width: 42.3%;
border-top: 2px solid #7285A0;
float: left;
position: absolute;
z-index: 2;
left: 12.7%
}
.q21TopSlatLine {
height: 0px;
border: 1px solid #7285A0;
width: 15.5%;
transform: rotate(99deg);
-o-transform: rotate(99deg);
-moz-transform: rotate(99deg);
-webkit-transform: rotate(99deg);
position: absolute;
z-index: 2;
margin-top: 7.8%;
left: 46%
}
.q21LeftLine {
height: 0px;
border: 1px solid #7285A0;
width: 41.1%;
transform: rotate(108deg);
-o-transform: rotate(108deg);
-moz-transform: rotate(108deg);
-webkit-transform: rotate(108deg);
position: absolute;
z-index: 2;
float: left;
margin-top: 19.5%;
left: -14%
}
.q23Div {
position: relative;
z-index: 1;
top: -12%;
right: 1.5%;
width: 30%;
height: 75%;
float: right;
}
.q23TopLine {
width: 72.3%;
height: 52%;
border-top: 2px solid #7285A0;
position: relative;
}
.q23LeftLine {
height: 0px;
border: 1px solid #7285A0;
width: 121%;
transform: rotate(82deg);
-o-transform: rotate(82deg);
-moz-transform: rotate(82deg);
-webkit-transform: rotate(82deg);
position: absolute;
z-index: 2;
float: left;
top: 42.4%;
left: -52.1%;
}
.q23RightLine {
height: 0px;
border: 1px solid #7285A0;
width: 122.5%;
transform: rotate(77deg);
-o-transform: rotate(77deg);
-moz-transform: rotate(77deg);
-webkit-transform: rotate(77deg);
position: absolute;
z-index: 2;
float: left;
top: 42.3%;
left: 25%;
}
.q23BottomAndRightLine {
width: 83.5%;
height: 33%;
border-bottom: 2px solid #7285A0;
float: right;
}
.titleDiv {
border-radius: 30px;
border: 3px solid #fff;
background-color: #1BB3DC;
}
.q21Line {
display: inline-block;
background-color: #5AD8FF;
-webkit-mask: url(../../../IMG/material/Q21Line.svg) no-repeat;
mask: url(../../../IMG/material/Q21Line.svg) no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
}
.q22Line {
display: inline-block;
background-color: #FFDF58;
-webkit-mask: url(../../../IMG/material/Q22Line.svg) no-repeat;
mask: url(../../../IMG/material/Q22Line.svg) no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
}
.q23Line {
display: inline-block;
background-color: #5DFF5C;
-webkit-mask: url(../../../IMG/material/Q23Line.svg) no-repeat;
mask: url(../../../IMG/material/Q23Line.svg) no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
}
</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" + month;
}
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) {
//每一条循环判断
//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}') {
if (data[i].elementCode == 'Q21') {
if (data[i].mPoint.parmvalue != '1') {
document.getElementById("q21Line").style.backgroundColor = "#7285A0";
}
} else if (data[i].elementCode == 'Q22') {
if (data[i].mPoint.parmvalue != '1') {
document.getElementById("q22Line").style.backgroundColor = "#7285A0";
}
} else if (data[i].elementCode == 'Q23') {
if (data[i].mPoint.parmvalue != '1') {
document.getElementById("q23Line").style.backgroundColor = "#7285A0";
}
}
} else if (data[i].getValueType == '${Type_GetHttp}') {
var code = data[i].elementCode;
document.getElementById(code).innerHTML = data[i].value;
} else {
}
}
}
}, 'json');
}
/* 定时器 */
setInterval(getValue, 300000); //<!--每隔5分钟刷新一次-->
setInterval(clock, 1000); //每隔1秒显示一次
$(function () {
clock();
getValue();
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("titleDiv").style.width = document.documentElement.clientWidth * 0.23 + "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("backImage").style.width = document.documentElement.clientWidth + "px";
document.getElementById("backImage").style.height = document.documentElement.clientHeight + "px";
document.getElementById("q21Line").style.width = document.documentElement.clientWidth + "px";
document.getElementById("q21Line").style.height = document.documentElement.clientHeight + "px";
document.getElementById("q22Line").style.width = document.documentElement.clientWidth + "px";
document.getElementById("q22Line").style.height = document.documentElement.clientHeight + "px";
document.getElementById("q23Line").style.width = document.documentElement.clientWidth + "px";
document.getElementById("q23Line").style.height = document.documentElement.clientHeight + "px";
document.getElementById("floatDiv").style.width = document.documentElement.clientWidth + "px";
document.getElementById("floatDiv").style.height = document.documentElement.clientHeight + "px";
});
</script>
</head>
<body style="width:100%;height:100%;margin:0;padding:0;">
<div id="floatDiv" style="position: absolute;z-index:1;">
<!-- 时间 -->
<div style="width:96%;height:10%;padding-top:0.5%;padding-left:2%;position: absolute;z-index:2;text-align: center;">
<table style="width:100%;height:100%;padding:5%;">
<tr>
<td width="47%">
<div id="titleDiv" class="titleDiv" style="height:60px;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>
<i id="q21Line" class="q21Line" style="position: absolute;z-index:2;"></i>
<i id="q22Line" class="q22Line" style="position: absolute;z-index:2;"></i>
<i id="q23Line" class="q23Line" style="position: absolute;z-index:2;"></i>
<!-- <div id="Q22Div" class="q22Div"> -->
<!-- 左侧斜线 -->
<!-- <div class="q22LeftLine"></div> -->
<!-- 上边 -->
<!-- <div class="q22TopLine"></div>
</div> -->
<!-- <div id="Q23Div" class="q23Div"> -->
<!-- 上边 -->
<!-- <div class="q23TopLine"></div> -->
<!-- 左侧斜线 -->
<!-- <div class="q23LeftLine"></div> -->
<!-- 右侧斜线 -->
<!-- <div class="q23RightLine"></div> -->
<!-- 下右两边直线 -->
<!-- <div class="q23BottomAndRightLine"></div>
</div> -->
<!-- <div id="Q21Div" class="q21Div"> -->
<!-- 左侧斜线 -->
<!-- <div class="q21LeftLine"></div>
<div class="q21TopSlatLine"></div> -->
<!-- 上边 -->
<!-- <div class="q21TopLeftLine"></div>
<div class="q21TopRightLine"></div>
<div class="q21TopMiddleLine"></div>
</div> -->
</div>
<img id="backImage" src="" style="z-index:-1;positon:relative;" alt="" />
</body>
</html>

View File

@ -0,0 +1,207 @@
<%@ 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>
.titleDiv {
border-radius: 30px;
border: 3px solid #fff;
background-color: #1BB3DC;
}
.p23Line {
display: inline-block;
background-color: #5AD8FF;
-webkit-mask: url(../../../IMG/material/P23Line.svg) no-repeat;
mask: url(../../../IMG/material/P23Line.svg) no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
}
.p24Line {
display: inline-block;
background-color: #FFDF58;
-webkit-mask: url(../../../IMG/material/P24Line.svg) no-repeat;
mask: url(../../../IMG/material/P24Line.svg) no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
}
</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" + month;
}
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) {
//每一条循环判断
//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}') {
if (data[i].elementCode == 'P23') {
if (data[i].mPoint.parmvalue != '1') {
document.getElementById("P23Line").style.backgroundColor = "#7285A0";
}
} else if (data[i].elementCode == 'P24') {
if (data[i].mPoint.parmvalue != '1') {
document.getElementById("P24Line").style.backgroundColor = "#7285A0";
}
}
} else if (data[i].getValueType == '${Type_GetHttp}') {
var code = data[i].elementCode;
if(document.getElementById(code) && data[i].mPoint!=null){
document.getElementById(code).innerHTML = data[i].value;
}
} else {
}
}
}
}, 'json');
}
/* 定时器 */
setInterval(getValue, 300000); //<!--每隔5分钟刷新一次-->
//setInterval(clock, 1000); //每隔1秒显示一次
$(function () {
// clock();
getValue();
document.body.style.backgroundColor = "#" + '${param.backgroundColor}';
//$("#clock").css("font-size", (document.documentElement.clientWidth * 0.02 + "px"));
// $("#lunar").css("font-size", (document.documentElement.clientWidth * 0.03 + "px"));
//$("#date").css("font-size", (document.documentElement.clientWidth * 0.02 + "px"));
//$("#week").css("font-size", (document.documentElement.clientWidth * 0.02 + "px"));
// $("#title1").css("font-size", (document.documentElement.clientWidth * 0.013 + "px"));
// document.getElementById("titleDiv").style.width = document.documentElement.clientWidth * 0.18 + "px";
// document.getElementById("titleDiv").style.height = document.documentElement.clientHeight * 0.049 + "px";
// document.getElementById("titleDiv").style.borderWidth = document.documentElement.clientHeight * 0.003 + "px";
document.getElementById("backImage").style.width = document.documentElement.clientWidth + "px";
document.getElementById("backImage").style.height = document.documentElement.clientHeight + "px";
document.getElementById("p23Line").style.width = document.documentElement.clientWidth + "px";
document.getElementById("p23Line").style.height = document.documentElement.clientHeight + "px";
document.getElementById("p24Line").style.width = document.documentElement.clientWidth + "px";
document.getElementById("p24Line").style.height = document.documentElement.clientHeight + "px";
document.getElementById("floatDiv").style.width = document.documentElement.clientWidth + "px";
document.getElementById("floatDiv").style.height = document.documentElement.clientHeight + "px";
});
</script>
</head>
<body style="width:100%;height:100%;margin:0;padding:0;">
<div id="floatDiv" style="position: absolute;z-index:1;">
<!-- 时间 -->
<!-- <div style="width:96%;height:10%;padding-top:0.5%;padding-left:2%;position: absolute;z-index:2;text-align: center;">
<table style="width:100%;height:100%;padding:5%;">
<tr>
<td width="69%">
<div id="titleDiv" class="titleDiv" style="height:60px;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> -->
<i id="p23Line" class="p23Line" style="position: absolute;z-index:2;"></i>
<i id="p24Line" class="p24Line" style="position: absolute;z-index:2;"></i>
</div>
<img id="backImage" src="" style="z-index:-1;positon:relative;" alt="" />
</body>
</html>

View File

@ -0,0 +1,148 @@
<%@ 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页-->
<script type="text/javascript">
//获取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;
}
//获取url地址根目录 当前taomcat下路径
function getRootPath2(){
var pathName = window.location.pathname.substring(1);
var webName = pathName == '' ? '' : pathName.substring(0, pathName.indexOf('/'));
return window.location.protocol + '//' + window.location.host +"/"+webName;
}
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方法用.进行拼接
}
/* 请求数据 */
function getreportFillingValue() {
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
// console.log(data);
if(data!=''){
var seriesData=[];
for(var i=0;i<data.length;i++){
if(data[i].elementCode=="chart"){
seriesData.push({
value:data[i].visualCacheData.value,
name:data[i].name
})
}else if(data[i].elementCode=="planNum"){
$("#planNum").html(numOutput(data[i].visualCacheData.value));
}else if(data[i].elementCode=="completeNum"){
$("#completeNum").html(numOutput(data[i].visualCacheData.value));
}
}
getreportFillingchart('fillchart',seriesData);
}
},'json');
}
function getreportFillingchart(id,seriesData){
var myChart = echarts.init(document.getElementById(id));
var option = {
color:['#36CBCB','#3AA1FF','#4ECB73'],
tooltip: {
trigger: 'item'
},
legend: {
bottom: '5%',
left: 'center'
},
series: [
{
type: 'pie',
center: ['50%', '45%'],
radius: ['40%', '60%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 0,
borderColor: '#fff',
borderWidth: 2
},
label: {
show: true,
},
data: seriesData
}
]
};
myChart.setOption(option, true);
window.addEventListener("resize", function () {
myChart.resize();
});
}
/* 定时器 */
//setInterval(change, 60000); //每1分钟切换
// setInterval(getValue, 3600000); //每一小时切换
/* 初始化 */
$(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";
getreportFillingValue();
//console.log("height",document.body.scrollHeight);
});
</script>
</head>
<body style="width:100%;height:100%;margin:0;padding:0;overflow-x:hidden;overflow-y:hidden;">
<div id="reportFillingmain" style="height:calc(100% - 6px);width:100%;padding-top:10px;padding-left:10px;padding-right:10px;">
<div style="height:100%;width:100%;background:#ffffff;border: 1px solid #E1E1E1;border-radius: 4px;box-shadow: 2px 2px 4px 0px #696969, 0px 0px 4px 0px #696969;padding-top:10px;padding-left:10px;padding-right:10px;">
<div style="float: left;width: 100%;height:30px;">
<div style="float: left;width:5px;height:100%;margin-left: 15px;padding-top:5px;padding-bottom:5px;"><div style="width: 100%;height: 100%;background-color:skyblue;"></div></div>
<div style="float: left;height:100%;margin-left: 10px;line-height: 30px;">报表填报情况</div>
</div>
<div style="float: left;width: 100%;height:calc(100% - 30px);">
<div id="fillchart" style="float: left;width: 100%;height:75%;"></div>
<div style="float: left;width: 100%;height:20%;margin-top: 5px;">
<div style="float: left;width:50%;height:100%;">
<div style="float: left;width:100%;height:50%;text-align: center;color: #B0B0B0;line-height: 30px;">每日应填数量</div>
<div id="planNum" style="float: left;width:100%;height:50%;text-align: center;font-size:20px;font-weight: bold;"></div>
</div>
<div style="float: left;width:50%;height:100%;">
<div style="float: left;width:100%;height:50%;text-align: center;color: #B0B0B0;line-height: 30px;">已完成</div>
<div id="completeNum" style="float: left;width:100%;height:50%;text-align: center;font-size:20px;font-weight: bold;"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

View File

@ -0,0 +1,231 @@
<%@ 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>
.blueSpanLargeFont {
color: #437099;
font-family: Microsoft YaHei;
}
.blueSpanMediumFont {
color: #74D5FF;
font-family: Microsoft YaHei;
}
.blueSpanSmallFont {
color: #437099;
font-family: Microsoft YaHei;
}
.whiteSpanLargeFont {
color: white;
font-family: Microsoft YaHei;
}
.whiteSpanMediumFont {
color: white;
font-family: Microsoft YaHei;
}
.whiteSpanSmallFont {
color: white;
font-family: Microsoft YaHei;
}
.title1Div {
border-bottom: 5px solid #437099;
width: 95%;
height: 18%;
padding-bottom: 1%;
}
.qtitle {
font-family: Microsoft YaHei;
color:#437099;
}
</style>
<script type="text/javascript">
function getValue() {
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
//每一条循环判断
for (var i = 0; i < data.length; i++) {
if (data[i].elementCode.indexOf("title") != -1) {//获取车间名
var code = data[i].elementCode;
if (document.getElementById(code)) {//判断存不存在
//颜色
$('.' + code + 'Div').css("border-color", "#" + data[i].style);
document.getElementById(code).style.color = "#" + data[i].style;
//赋值
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)) {
document.getElementById(code).innerHTML = data[i].mPoint.parmvalue + data[i].mPoint.unit;
document.getElementById(code + "Name").innerHTML = data[i].name;
}
} 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 {
}
}
}
}, 'json');
}
/* 定时器 */
setInterval(getValue, 300000); //<!--每隔5分钟刷新一次-->
/* 初始化 */
$(function () {
getValue();
document.body.style.backgroundColor = "#" + '${param.backgroundColor}';
//console.log("height",document.body.scrollHeight);
// $(".blueSpanLargeFont").css("font-size", (document.body.offsetWidth * 0.0625 + "px"));
// $(".blueSpanMediumFont").css("font-size", (document.body.offsetWidth * 0.0547 + "px"));
$(".blueSpanSmallFont").css("font-size", (document.body.offsetWidth * 0.03 + "px"));
$(".whiteSpanSmallFont").css("font-size", (document.body.offsetWidth * 0.028 + "px"));
$(".qtitle").css("font-size", (document.body.offsetWidth * 0.05 + "px"));
$(".qcontent").css("font-size", (document.body.offsetWidth * 0.03 + "px"));
});
</script>
</head>
<body id="body" style="width:100%;height:100%;margin:0;padding:0;overflow-x:hidden;overflow-y:hidden">
<div style="width:93%;height:92%;margin:0 auto;margin-top:2%">
<div id="title1Div" class="title1Div">
<span id="title1" class="qtitle">称量中心历史工单信息</span>
</div>
<table style="width:95%;height:80%;margin:0 auto;border-collapse:separate;border-spacing:0px 6px;" >
<tr>
<td align="center">
<div class="blueSpanSmallFont">工单号</div>
</td>
<td align="center">
<div class="blueSpanSmallFont">生产批号</div>
</td>
<td align="center">
<div class="blueSpanSmallFont">生产编码</div>
</td>
<td align="center">
<div class="blueSpanSmallFont">物料规格</div>
</td>
<td align="center">
<div class="blueSpanSmallFont">称量量</div>
</td>
</tr>
<tr>
<td>
<div class="whiteSpanSmallFont">WO1912260001</div>
</td>
<td>
<div class="whiteSpanSmallFont">201912002D</div>
</td>
<td>
<div class="whiteSpanSmallFont">2104102</div>
</td>
<td>
<div class="whiteSpanSmallFont">150mg/1ml/支</div>
</td>
<td>
<div class="whiteSpanSmallFont">16122支</div>
</td>
</tr>
<tr>
<td>
<div class="whiteSpanSmallFont">WO1912260001</div>
</td>
<td>
<div class="whiteSpanSmallFont">201912002D</div>
</td>
<td>
<div class="whiteSpanSmallFont">2104102</div>
</td>
<td>
<div class="whiteSpanSmallFont">150mg/1ml/支</div>
</td>
<td>
<div class="whiteSpanSmallFont">16122支</div>
</td>
</tr>
<tr>
<td>
<div class="whiteSpanSmallFont">WO1912260001</div>
</td>
<td>
<div class="whiteSpanSmallFont">201912002D</div>
</td>
<td>
<div class="whiteSpanSmallFont">2104102</div>
</td>
<td>
<div class="whiteSpanSmallFont">150mg/1ml/支</div>
</td>
<td>
<div class="whiteSpanSmallFont">16122支</div>
</td>
</tr>
<tr>
<td>
<div class="whiteSpanSmallFont">WO1912260001</div>
</td>
<td>
<div class="whiteSpanSmallFont">201912002D</div>
</td>
<td>
<div class="whiteSpanSmallFont">2104102</div>
</td>
<td>
<div class="whiteSpanSmallFont">150mg/1ml/支</div>
</td>
<td>
<div class="whiteSpanSmallFont">16122支</div>
</td>
</tr>
<tr>
<td>
<div class="whiteSpanSmallFont">WO1912260001</div>
</td>
<td>
<div class="whiteSpanSmallFont">201912002D</div>
</td>
<td>
<div class="whiteSpanSmallFont">2104102</div>
</td>
<td>
<div class="whiteSpanSmallFont">150mg/1ml/支</div>
</td>
<td>
<div class="whiteSpanSmallFont">16122支</div>
</td>
</tr>
</table>
</div>
</body>
</html>

View File

@ -0,0 +1,91 @@
<%@ 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"%>
<!DOCTYPE html>
<!-- <html lang="zh-CN"> -->
<!-- BEGIN HEAD -->
<head>
<title></title>
<!-- 引用页头及CSS页-->
<jsp:include page="/jsp/incVisual.jsp"></jsp:include>
<script type="text/javascript">
function getValue() {
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (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;
//document.getElementById('lineSpan').innerHTML = data[i].dataType + '原液生产车间';
}
} 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;
} 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 {
}
}
}
}, 'json');
}
/* 定时器 */
setInterval(getValue, 300000); //<!--每隔5分钟刷新一次-->
$(function () {
getValue();
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";
});
</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: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>

View File

@ -0,0 +1,273 @@
<%@ 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>
.slopingside {
height: 0px;
border: 1px solid #5AD8FF;
width: 45px;
transform: rotate(150deg);
-o-transform: rotate(150deg);
-moz-transform: rotate(150deg);
-webkit-transform: rotate(150deg);
}
.circle {
width: 8px;
height: 8px;
background-color: #5AD8FF;
margin-left: 6px;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
}
.title {
border-radius: 30px;
border: 3px solid #fff;
background-color: #1BB3DC;
}
.tag {
border-radius: 10px;
border: 3px solid #5AD8FF;
background-color: #000;
}
.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" + month;
}
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) {
//每一条循环判断
//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;
document.getElementById(code).style.display = "block";
}
} else {
//获取值 和 获取Modbus
if (data[i].getValueType == '${Type_GetValue}' || data[i].getValueType == '${Type_GetModbus}') {
var code = data[i].elementCode;
if (data[i].mPoint != null) {
if (data[i].elementCode.indexOf("pressure") != -1) {//压差
addPressure(data[i].style,parseFloat(data[i].mPoint.parmvalue).toFixed(1),data[i].mPoint.unit);
}else if (data[i].elementCode.indexOf("temp") != -1) {//温度
addTemperature(data[i].style,parseFloat(data[i].mPoint.parmvalue).toFixed(1),data[i].mPoint.unit);
}else if (data[i].elementCode.indexOf("rh") != -1) {//湿度
addRH(data[i].style,parseFloat(data[i].mPoint.parmvalue).toFixed(1),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 {
}
}
}
}, 'json');
}
function addPressure(style,value,unit){
var divStr = '<div style="'+style+'">'
+ '<div style="border-radius:4px;border:0;background-color: #7298D6;'
+ ' width:'+document.documentElement.clientWidth * 0.05+'px;text-align:center;">'
+ '<span style="font-weight:bold;font-size:'+document.documentElement.clientWidth*0.01+'px">'+value+unit+'</span></div></div>';
$("#floatDiv").append(divStr);
}
function addTemperature(style,value,unit){
var divStr = '<div style="'+style+'">'
+ '<div style="float:left"><span style="color: #B9A551;font-weight:bold;font-size: '+document.documentElement.clientWidth*0.01+'px;">T</span>&nbsp;</div>'
+ '<div style="border-radius:4px;border:0;background-color: #B9A551;'
+ ' width:'+document.documentElement.clientWidth * 0.05+'px;text-align:center;float:right">'
+ '<span style="font-weight:bold;font-size:'+document.documentElement.clientWidth*0.01+'px">'+value+unit+'</span></div></div>';
$("#floatDiv").append(divStr);
}
function addRH(style,value,unit){
var divStr = '<div style="'+style+'">'
+ '<div style="float:left"><span style="color: #A759C7;font-weight:bold;font-size: '+document.documentElement.clientWidth*0.01+'px;">RH</span>&nbsp;</div>'
+ '<div style="border-radius:4px;border:0;background-color: #A759C7;'
+ ' width:'+document.documentElement.clientWidth * 0.05+'px;text-align:center;float:right">'
+ '<span style="font-weight:bold;font-size:'+document.documentElement.clientWidth*0.01+'px">'+value+unit+'</span></div></div>';
$("#floatDiv").append(divStr);
}
/* 定时器 */
setInterval(getValue, 300000); //<!--每隔5分钟刷新一次-->
setInterval(clock, 1000); //每隔1秒显示一次
$(function () {
getValue();
// console.log(document.documentElement.offsetHeight);
// console.log(document.documentElement.clientHeight);
document.body.style.backgroundColor = "#" + '${param.backgroundColor}';
document.getElementById("backImage").style.width = document.documentElement.clientWidth + "px";
document.getElementById("backImage").style.height = document.documentElement.clientHeight + "px";
$("#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("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";
});
</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:1;bottom:49%;left:12%">
<div style="float:left">
<span style="color: #A759C7;font-size: 20px;">RH</span>&nbsp;
</div>
<div style="border-radius:4px;border:0;text-align:center;float:right;background-color: #A759C7;width:80px">
<span style="font-size:20px">49.5%</span>
</div>
</div>
<div style="position: absolute;z-index:1;bottom:59%;left:12%">
<div style="float:left">
<span style="color: #B9A551;font-size: 20px;">T</span>&nbsp;
</div>
<div style="border-radius:4px;border:0;text-align:center;float:right;background-color: #B9A551;width:80px;">
<span style="font-size:20px">21.8℃</span>
</div>
</div>
<div style="position: absolute;z-index:1;bottom:69%;left:12%">
<div style="border-radius:4px;border:0;background-color: #7298D6;width:80px;text-align:center;">
<span style="font-size:16px">0.12pa</span>
</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;display:none">
<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>

View File

@ -0,0 +1,273 @@
<%@ 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>
.slopingside {
height: 0px;
border: 1px solid #5AD8FF;
width: 45px;
transform: rotate(150deg);
-o-transform: rotate(150deg);
-moz-transform: rotate(150deg);
-webkit-transform: rotate(150deg);
}
.circle {
width: 8px;
height: 8px;
background-color: #5AD8FF;
margin-left: 6px;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
}
.title {
border-radius: 30px;
border: 3px solid #fff;
background-color: #1BB3DC;
}
.tag {
border-radius: 10px;
border: 3px solid #5AD8FF;
background-color: #000;
}
.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" + month;
}
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) {
//每一条循环判断
//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;
document.getElementById(code).style.display = "block";
}
} else {
//获取值 和 获取Modbus
if (data[i].getValueType == '${Type_GetValue}' || data[i].getValueType == '${Type_GetModbus}') {
var code = data[i].elementCode;
if (data[i].mPoint != null) {
if (data[i].elementCode.indexOf("pressure") != -1) {//压差
addPressure(data[i].style,parseFloat(data[i].mPoint.parmvalue).toFixed(1),data[i].mPoint.unit);
}else if (data[i].elementCode.indexOf("temp") != -1) {//温度
addTemperature(data[i].style,parseFloat(data[i].mPoint.parmvalue).toFixed(1),data[i].mPoint.unit);
}else if (data[i].elementCode.indexOf("rh") != -1) {//湿度
addRH(data[i].style,parseFloat(data[i].mPoint.parmvalue).toFixed(1),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 {
}
}
}
}, 'json');
}
function addPressure(style,value,unit){
var divStr = '<div style="'+style+'">'
+ '<div style="border-radius:4px;border:0;background-color: #7298D6;'
+ ' width:'+document.documentElement.clientWidth * 0.05+'px;text-align:center;">'
+ '<span style="font-weight:bold;font-size:'+document.documentElement.clientWidth*0.01+'px">'+value+unit+'</span></div></div>';
$("#floatDiv").append(divStr);
}
function addTemperature(style,value,unit){
var divStr = '<div style="'+style+'">'
+ '<div style="float:left"><span style="color: #B9A551;font-weight:bold;font-size: '+document.documentElement.clientWidth*0.01+'px;">T</span>&nbsp;</div>'
+ '<div style="border-radius:4px;border:0;background-color: #B9A551;'
+ ' width:'+document.documentElement.clientWidth * 0.05+'px;text-align:center;float:right">'
+ '<span style="font-weight:bold;font-size:'+document.documentElement.clientWidth*0.01+'px">'+value+unit+'</span></div></div>';
$("#floatDiv").append(divStr);
}
function addRH(style,value,unit){
var divStr = '<div style="'+style+'">'
+ '<div style="float:left"><span style="color: #C9843F;font-weight:bold;font-size: '+document.documentElement.clientWidth*0.01+'px;">RH</span>&nbsp;</div>'
+ '<div style="border-radius:4px;border:0;background-color: #C9843F;'
+ ' width:'+document.documentElement.clientWidth * 0.05+'px;text-align:center;float:right">'
+ '<span style="font-weight:bold;font-size:'+document.documentElement.clientWidth*0.01+'px">'+value+unit+'</span></div></div>';
$("#floatDiv").append(divStr);
}
/* 定时器 */
setInterval(getValue, 300000); //<!--每隔5分钟刷新一次-->
//setInterval(clock, 1000); //每隔1秒显示一次
$(function () {
getValue();
// console.log(document.documentElement.offsetHeight);
// console.log(document.documentElement.clientHeight);
document.body.style.backgroundColor = "#" + '${param.backgroundColor}';
document.getElementById("backImage").style.width = document.documentElement.clientWidth + "px";
document.getElementById("backImage").style.height = document.documentElement.clientHeight + "px";
// $("#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("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";
});
</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:1;bottom:49%;left:12%">
<div style="float:left">
<span style="color: #A759C7;font-size: 20px;">RH</span>&nbsp;
</div>
<div style="border-radius:4px;border:0;text-align:center;float:right;background-color: #A759C7;width:80px">
<span style="font-size:20px">49.5%</span>
</div>
</div>
<div style="position: absolute;z-index:1;bottom:59%;left:12%">
<div style="float:left">
<span style="color: #B9A551;font-size: 20px;">T</span>&nbsp;
</div>
<div style="border-radius:4px;border:0;text-align:center;float:right;background-color: #B9A551;width:80px;">
<span style="font-size:20px">21.8℃</span>
</div>
</div>
<div style="position: absolute;z-index:1;bottom:69%;left:12%">
<div style="border-radius:4px;border:0;background-color: #7298D6;width:80px;text-align:center;">
<span style="font-size:16px">0.12pa</span>
</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;display:none">
<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>

View File

@ -0,0 +1,139 @@
<%@ 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"%>
<!DOCTYPE html>
<!-- <html lang="zh-CN"> -->
<!-- BEGIN HEAD -->
<head>
<title></title>
<!-- 引用页头及CSS页-->
<jsp:include page="/jsp/incVisual.jsp"></jsp:include>
<style>
.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();
var date = time.getDate();
var hour = time.getHours();
var minute = time.getMinutes();
if (minute < 10) {
minute = "0" + minute;
}
//console.log("time",hour);
// 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='#182f52'>:</font>";
timeflash = 0;
}
document.getElementById("clock").innerHTML = hour + maohao + minute;
//document.getElementById("apm").innerHTML = apm;
document.getElementById("date").innerHTML = year + "年" + (month + 1) + "月" + date + "日";
document.getElementById("week").innerHTML = week;
}
function getValue() {
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
//每一条循环判断
//console.log("data", data);
for (var i = 0; i < data.length; i++) {
if (data[i].elementCode.indexOf("title") != -1) {//获取车间名
var code = data[i].elementCode;
if (document.getElementById(code)) {//判断存不存在
//赋值
document.getElementById(code).innerHTML = data[i].name;
}
}
}
}, 'json');
}
/* 定时器 */
setInterval(getValue, 600000); //<!--每隔10分钟刷新一次-->
setInterval(clock, 1000); //每隔1秒显示一次
/* 初始化 */
$(function () {
getValue();
// console.log("height",document.documentElement.clientWidth);
document.body.style.backgroundColor = "#" + '${param.backgroundColor}';
$("#clock").css("font-size", (document.documentElement.clientWidth * 0.18 + "px"));
// $("#lunar").css("font-size", (document.documentElement.clientWidth * 0.03 + "px"));
$("#date").css("font-size", (document.documentElement.clientWidth * 0.08 + "px"));
$("#week").css("font-size", (document.documentElement.clientWidth * 0.08 + "px"));
$("#title1").css("font-size", (document.documentElement.clientWidth * 0.06 + "px"));
document.getElementById("titleDiv").style.width = document.documentElement.clientWidth * 0.6 + "px";
document.getElementById("titleDiv").style.height = document.documentElement.clientHeight * 0.15 + "px";
document.getElementById("titleDiv").style.borderWidth = document.documentElement.clientHeight * 0.006 + "px";
});
</script>
</head>
<body style="width:100%;height:100%;margin:0;padding:0;overflow-x:hidden;overflow-y:hidden">
<div style="width:100%;height:100%;float:left">
<table
style="width:100%;height:95%;padding-left:5%;padding-right:5%;padding-top:2%;border-collapse:separate;border-spacing:0px 6px;text-align:center">
<tr>
<td align="center">
<div id="titleDiv" class="titleDiv" style="text-align: center;">
<span id="title1" style="font-size:30px;color:#fff;"></span>
</div>
</td>
</tr>
<tr>
<td align="center">
<span id="date" style="color:#4972B4;font-family:Microsoft YaHei;font-weight:bold"></span>
&nbsp;&nbsp;&nbsp;
<span id="week" style="color:#4972B4;font-family:Microsoft YaHei;font-weight:bold"></span>
</td>
</tr>
<tr>
<td align="center">
<span id="clock" style="color:#4972B4;font-family:Microsoft YaHei;font-weight: bold;"></span>
</td>
</tr>
</table>
</div>
</body>
</html>

View File

@ -0,0 +1,95 @@
<%@ 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>
<script type="text/javascript">
//获取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;
}
//获取url地址根目录 当前taomcat下路径
function getRootPath2(){
var pathName = window.location.pathname.substring(1);
var webName = pathName == '' ? '' : pathName.substring(0, pathName.indexOf('/'));
return window.location.protocol + '//' + window.location.host +"/"+webName;
}
/* 请求数据 */
function gettoBeDoneValue() {
// $.post(ext.contextPath + '/activiti/workflow/getTaskList.do', function (data) {
// if(data!=''){
// }
// }, 'json');
$.ajax({
type:'GET',
url:ext.contextPath +"/activiti/workflow/taskList.do?SY=1",
async: true,
globle:false,
error: function(){
return false;
},
success: function(data){
$("#todoTable").html(data);
}
});
// $('#todoTable').attr('src',ext.contextPath+'/activiti/workflow/taskList.do?SY=1');
}
/* 定时器 */
//setInterval(change, 60000); //每1分钟切换
// setInterval(getValue, 3600000); //每一小时切换
/* 初始化 */
$(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";
gettoBeDoneValue();
//console.log("height",document.body.scrollHeight);
});
// var showUser4SelectsFun = function() {
// document.getElementById("todoTable").contentWindow.showUser4SelectsFun();
// };
</script>
</head>
<body style="width:100%;height:100%;margin:0;padding:0;overflow-x:hidden;overflow-y:hidden;">
<div id="toBeDonemain" style="height:100%;width:100%;padding-top:10px;padding-left:10px;padding-right:10px;">
<div style="height:100%;width:100%;background:#ffffff;border: 1px solid #E1E1E1;border-radius: 4px;box-shadow: 2px 2px 4px 0px #696969, 0px 0px 4px 0px #696969;padding-top:10px;padding-left:10px;padding-right:10px;">
<div style="float: left;width: 100%;height:30px;">
<div style="float: left;width:5px;height:100%;margin-left: 15px;padding-top:5px;padding-bottom:5px;"><div style="width: 100%;height: 100%;background-color:skyblue;"></div></div>
<div style="float: left;height:100%;margin-left: 10px;line-height: 30px;">我的待办</div>
</div>
<div style="float: left;width: 100%;height:calc(100% - 30px);">
<div id="todoTable" style="width: 100%;height:100%;overflow: hidden;"></div>
</div>
</div>
</div>
</body>
</html>

View File

@ -0,0 +1,91 @@
<%@ 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"%>
<!DOCTYPE html>
<!-- <html lang="zh-CN"> -->
<!-- BEGIN HEAD -->
<head>
<title></title>
<!-- 引用页头及CSS页-->
<jsp:include page="/jsp/incVisual.jsp"></jsp:include>
<script type="text/javascript">
function getValue() {
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (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;
//document.getElementById('lineSpan').innerHTML = data[i].dataType + '原液生产车间';
}
} 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;
} 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 {
}
}
}
}, 'json');
}
/* 定时器 */
setInterval(getValue, 300000); //<!--每隔5分钟刷新一次-->
$(function () {
getValue();
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";
});
</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: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>

View File

@ -0,0 +1,239 @@
<%@ 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/inc.jsp"></jsp:include>
<style>
.blueSpanLargeFont {
color: #437099;
font-family: Microsoft YaHei;
}
.blueSpanMediumFont {
color: #74D5FF;
font-family: Microsoft YaHei;
}
.blueSpanSmallFont {
color: #437099;
font-family: Microsoft YaHei;
}
.whiteSpanLargeFont {
color: white;
font-family: Microsoft YaHei;
}
.whiteSpanMediumFont {
color: white;
font-family: Microsoft YaHei;
}
.whiteSpanSmallFont {
color: white;
font-family: Microsoft YaHei;
}
.deepBlueSpanLargeFont {
color: #4069B2;
font-family: Microsoft YaHei;
font-weight: bold
}
.lightBlueSpanLargeFont {
color: #74D5FF;
font-family: Microsoft YaHei;
}
.UserPanel {
background: #182F52;
border-radius: 20px;
border: 4px solid #426AB2;
}
.userNumTable {
width: 100%;
height: 80%;
padding-left: 5%;
padding-right: 5%;
padding-top: 2%;
border-collapse: separate;
border-spacing: 0px 6px;
text-align: left;
}
</style>
<script type="text/javascript">
function getValue() {
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
//每一条循环判断
for (var i = 0; i < data.length; i++) {
//获取值 和 获取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;
} 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 {
}
}
}, 'json');
}
/* 定时器 */
//setInterval(getValue, 300000); //<!--每隔5分钟刷新一次-->
/* 初始化 */
$(function () {
//getValue();
//console.log("height",document.body.scrollHeight);
document.body.style.backgroundColor = "#" + '${param.backgroundColor}';
$(".blueSpanLargeFont").css("font-size", (document.body.offsetWidth * 0.0625 + "px"));
$(".blueSpanMediumFont").css("font-size", (document.body.offsetWidth * 0.0547 + "px"));
$(".blueSpanSmallFont").css("font-size", (document.body.offsetWidth * 0.0469 + "px"));
$(".whiteSpanSmallFont").css("font-size", (document.body.offsetWidth * 0.0469 + "px"));
$(".deepBlueSpanLargeFont").css("font-size", (document.body.offsetWidth * 0.05 + "px"));
$(".lightBlueSpanLargeFont").css("font-size", (document.body.offsetWidth * 0.05 + "px"));
//document.getElementById('userImg').style.width = document.body.offsetWidth * 0.09375 + "px";
document.getElementById('userImg2').style.width = document.body.offsetWidth * 0.135 + "px";
document.getElementById('userImg3').style.width = document.body.offsetWidth * 0.135 + "px";
document.getElementById('userImg4').style.width = document.body.offsetWidth * 0.135 + "px";
document.getElementById('userImg5').style.width = document.body.offsetWidth * 0.135 + "px";
});
</script>
</head>
<body style="width:100%;height:100%;margin:0;padding:0;overflow-x:hidden;overflow-y:hidden">
<div class="container" style="width:100%;height:100%;margin:0;padding:0px;">
<div class="row" style="width:100%;height:100%;text-align:center;margin:0;">
<div style="width:50%;height:100%;float:left;margin-top:5%;">
<table style="width:100%;height:99%;padding-left:4%">
<tr align="center">
<td style="width:98%;height:49%;padding:3%;padding-bottom:3%">
<div class="UserPanel" style="width:90%;height:85%;">
<table style="width:100%;height:100%;text-align: center">
<tr>
<td rowspan="2">
<img id="userImg2" src="<%=request.getContextPath()%>/IMG/material/user.png" />
</td>
<td>
<div class="deepBlueSpanLargeFont">生产经理</div>
</td>
</tr>
<tr>
<td>
<div id="processLeader" class="lightBlueSpanLargeFont">李磊</div>
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td style="width:98%;height:49%;padding:5%;padding-top:3%" align="center">
<div class="UserPanel" style="width:90%;height:85%;">
<table style="width:100%;height:100%;text-align: center;">
<tr>
<td rowspan="2">
<img id="userImg3" src="<%=request.getContextPath()%>/IMG/material/user.png" />
</td>
<td>
<div class="deepBlueSpanLargeFont">生产主管</div>
</td>
</tr>
<tr>
<td>
<div id="equLeader" class="lightBlueSpanLargeFont">陈晨</div>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
<div style="width:50%;height:100%;float:right;margin-top:5%;">
<table style="width:100%;height:99%;padding-left:4%">
<tr align="center">
<td style="width:98%;height:49%;padding:3%;padding-bottom:3%">
<div class="UserPanel" style="width:90%;height:85%;">
<table style="width:100%;height:100%;text-align: center">
<tr>
<td rowspan="2">
<img id="userImg4" src="<%=request.getContextPath()%>/IMG/material/user.png" />
</td>
<td>
<div class="deepBlueSpanLargeFont">生产主管</div>
</td>
</tr>
<tr>
<td>
<div id="processLeader" class="lightBlueSpanLargeFont">王盛煜</div>
</td>
</tr>
<!-- <tr>
<td colspan="2">
<div id="processLeaderPhone" class="lightBlueSpanLargeFont"></div>
</td>
</tr> -->
</table>
</div>
</td>
</tr>
<tr>
<td style="width:98%;height:49%;padding:5%;padding-top:3%" align="center">
<div class="UserPanel" style="width:90%;height:85%;">
<table style="width:100%;height:100%;text-align: center;">
<tr>
<td rowspan="2">
<img id="userImg5" src="<%=request.getContextPath()%>/IMG/material/user.png" />
</td>
<td>
<div class="deepBlueSpanLargeFont">现场QA</div>
</td>
</tr>
<tr>
<td>
<div id="equLeader" class="lightBlueSpanLargeFont">杨剑</div>
</td>
</tr>
<!-- <tr>
<td colspan="2">
<div id="equLeaderPhone" class="lightBlueSpanLargeFont"></div>
</td>
</tr> -->
</table>
</div>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>

View File

@ -0,0 +1,311 @@
<%@ 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/inc.jsp"></jsp:include>
<style>
.blueSpanLargeFont {
color: #437099;
font-family: Microsoft YaHei;
}
.blueSpanMediumFont {
color: #74D5FF;
font-family: Microsoft YaHei;
}
.blueSpanSmallFont {
color: #437099;
font-family: Microsoft YaHei;
}
.blueSpanSmallFont {
color: #437099;
font-family: Microsoft YaHei;
}
.whiteSpanLargeFont {
color: white;
font-family: Microsoft YaHei;
}
.whiteSpanMediumFont {
color: white;
font-family: Microsoft YaHei;
}
.whiteSpanSmallFont {
color: white;
font-family: Microsoft YaHei;
}
.deepBlueSpanLargeFont {
color: #4069B2;
font-family: Microsoft YaHei;
font-weight: bold
}
.lightBlueSpanSmallFont {
color: #74D5FF;
font-family: Microsoft YaHei;
}
.UserPanel {
background: #182F52;
border-radius: 20px;
border: 4px solid #426AB2;
}
.userNumTable {
width: 100%;
height: 80%;
padding-left: 5%;
padding-right: 5%;
padding-top: 2%;
border-collapse: separate;
border-spacing: 0px 6px;
text-align: left;
}
</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" + month;
}
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) {
//每一条循环判断
for (var i = 0; i < data.length; i++) {
//获取值 和 获取Modbus
if (data[i].getValueType == '${Type_GetValue}' || data[i].getValueType == '${Type_GetModbus}') {
if (data[i].elementCode.indexOf("Status") != -1) {//获取车间状态关键字
var code = data[i].elementCode;
if (document.getElementById(code) && data[i].mPoint.parmvalue) {//判断存不存在
//赋值
var src = "";
if(data[i].mPoint.parmvalue == '生产中'){
src = "../../../IMG/material/生产中.jpg"
}else if(data[i].mPoint.parmvalue == '停产'){
src = "../../../IMG/material/停产.jpg"
}else if(data[i].mPoint.parmvalue == '未清场'){
src = "../../../IMG/material/未清场.jpg"
}else if(data[i].mPoint.parmvalue == '已清场'){
src = "../../../IMG/material/已清场.jpg"
}
document.getElementById(code).src = src;
document.getElementById(code).style.width = document.body.offsetWidth * 0.1 + "px";
document.getElementById(code).style.height = document.body.offsetHeight * 0.13 + "px";
}
}else{
var code = data[i].elementCode;
document.getElementById(code).innerHTML = data[i].mPoint.parmvalue;
}
} 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 {
}
}
}, 'json');
}
/* 定时器 */
setInterval(getValue, 300000); //<!--每隔5分钟刷新一次-->
setInterval(clock, 1000); //每隔1秒显示一次
/* 初始化 */
$(function () {
getValue();
clock();
//console.log("height",document.body.scrollHeight);
document.body.style.backgroundColor = "#" + '${param.backgroundColor}';
$("#clock").css("font-size", (document.documentElement.clientWidth * 0.08 + "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"));
$(".blueSpanLargeFont").css("font-size", (document.body.offsetWidth * 0.06 + "px"));
$(".blueSpanMediumFont").css("font-size", (document.body.offsetWidth * 0.045 + "px"));
$(".blueSpanSmallFont").css("font-size", (document.body.offsetWidth * 0.03 + "px"));
$(".whiteSpanSmallFont").css("font-size", (document.body.offsetWidth * 0.0469 + "px"));
$(".deepBlueSpanLargeFont").css("font-size", (document.body.offsetWidth * 0.05 + "px"));
$(".lightBlueSpanSmallFont").css("font-size", (document.body.offsetWidth * 0.034 + "px"));
document.getElementById('userImg').style.width = document.body.offsetWidth * 0.15 + "px";
document.getElementById('userImg').style.height = document.body.offsetHeight * 0.4 + "px";
});
</script>
</head>
<body style="width:100%;height:100%;margin:0;padding:0;overflow-x:hidden;overflow-y:hidden">
<div class="container" style="width:100%;height:100%;margin:0;padding:0px;">
<div style="width:50%;height:100%;float:left">
<table
style="width:100%;height:90%;padding-left:5%;padding-right:5%;padding-top:2%;border-collapse:separate;border-spacing:0px 6px;text-align:center">
<tr>
<td rowspan="2">
<span id="clock" style="color:#4972B4;font-family:Microsoft YaHei;font-weight: bold;"></span>
</td>
<td>
<img id="userImg" src="<%=request.getContextPath()%>/IMG/material/users.png" />
</td>
</tr>
<tr>
<td>
<div class="blueSpanSmallFont">当前区域人数</div>
</td>
</tr>
<tr>
<td>
<span id="week" style="color:#4972B4;font-family:Microsoft YaHei;font-weight:bold"></span>
&nbsp;&nbsp;&nbsp;
<span id="date" style="color:#4972B4;font-family:Microsoft YaHei;font-weight:bold"></span>
</td>
<td>
<span id="actTotalUserNum" class="whiteSpanSmallFont"></span>
<span class="blueSpanMediumFont" style="color:#4972B4;">/</span>
<span id="totalUserNum" class="blueSpanMediumFont" style="color:#4972B4;"></span>
<span style="font-size:25px;color:#4972B4;font-family:Microsoft YaHei;font-weight:bold">人</span>
</td>
</tr>
</table>
</div>
<div style="width:50%;height:100%;float:left">
<table
style="width:100%;height:100%;border-collapse:separate;border-spacing:0px 6px;text-align:left;padding-left:5%;padding-right:5%;padding-top:5%;text-align: left;">
<tr>
<td>
<span id="area1" class="blueSpanSmallFont" style="font-weight: bold;"></span>
</td>
<td>
<img id="area1Status" src="" style="width:100%" alt="" />
</td>
<td align="right">
<span id="area1ActUserNum" class="lightBlueSpanSmallFont" style="font-weight: bold;"></span>
<span class="blueSpanSmallFont" style="font-weight: bold;">/</span>
<span id="area1TotalUserNum" class="blueSpanSmallFont" style="font-weight: bold;"></span>
</td>
</tr>
<tr>
<td>
<span id="area2" class="blueSpanSmallFont" style="font-weight: bold;"></span>
</td>
<td>
<img id="area2Status" src="" alt="" />
</td>
<td align="right">
<span id="area2ActUserNum" class="lightBlueSpanSmallFont" style="font-weight: bold;"></span>
<span class="blueSpanSmallFont" style="font-weight: bold;">/</span>
<span id="area2TotalUserNum" class="blueSpanSmallFont" style="font-weight: bold;"></span>
</td>
</tr>
<tr>
<td>
<span id="area3" class="blueSpanSmallFont" style="font-weight: bold;"></span>
</td>
<td>
<img id="area3Status" src="" alt="" />
</td>
<td align="right">
<span id="area3ActUserNum" class="lightBlueSpanSmallFont" style="font-weight: bold;"></span>
<span class="blueSpanSmallFont" style="font-weight: bold;">/</span>
<span id="area3TotalUserNum" class="blueSpanSmallFont" style="font-weight: bold;"></span>
</td>
</tr>
<tr>
<td>
<span id="area4" class="blueSpanSmallFont" style="font-weight: bold;"></span>
</td>
<td>
<img id="area4Status" src="" alt="" />
</td>
<td align="right">
<span id="area4ActUserNum" class="lightBlueSpanSmallFont" style="font-weight: bold;"></span>
<span class="blueSpanSmallFont" style="font-weight: bold;">/</span>
<span id="area4TotalUserNum" class="blueSpanSmallFont" style="font-weight: bold;"></span>
</td>
</tr>
</table>
</div>
</body>
</html>

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,168 @@
<%@ 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>
.blueSpanLargeFont {
color: #437099;
font-family: Microsoft YaHei;
}
.blueSpanMediumFont {
color: #74D5FF;
font-family: Microsoft YaHei;
}
.blueSpanSmallFont {
color: #437099;
font-family: Microsoft YaHei;
}
.whiteSpanLargeFont {
color: white;
font-family: Microsoft YaHei;
}
.whiteSpanMediumFont {
color: white;
font-family: Microsoft YaHei;
}
.whiteSpanSmallFont {
color: white;
font-family: Microsoft YaHei;
}
.title1Div {
border-bottom: 5px solid #5AD8FF;
width: 95%;
height: 18%;
padding-bottom: 1%;
}
.qtitle {
font-family: Microsoft YaHei;
}
</style>
<script type="text/javascript">
function getValue() {
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
//每一条循环判断
for (var i = 0; i < data.length; i++) {
if (data[i].elementCode.indexOf("title") != -1) {//获取车间名
var code = data[i].elementCode;
if (document.getElementById(code)) {//判断存不存在
//颜色
$('.' + code + 'Div').css("border-color", "#" + data[i].style);
document.getElementById(code).style.color = "#" + data[i].style;
//赋值
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)) {
document.getElementById(code).innerHTML = data[i].mPoint.parmvalue + data[i].mPoint.unit;
document.getElementById(code + "Name").innerHTML = data[i].name;
}
} 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 {
}
}
}
}, 'json');
}
/* 定时器 */
setInterval(getValue, 300000); //<!--每隔5分钟刷新一次-->
/* 初始化 */
$(function () {
getValue();
document.body.style.backgroundColor = "#" + '${param.backgroundColor}';
//console.log("height",document.body.scrollHeight);
// $(".blueSpanLargeFont").css("font-size", (document.body.offsetWidth * 0.0625 + "px"));
// $(".blueSpanMediumFont").css("font-size", (document.body.offsetWidth * 0.0547 + "px"));
$(".blueSpanSmallFont").css("font-size", (document.body.offsetWidth * 0.033 + "px"));
$(".whiteSpanSmallFont").css("font-size", (document.body.offsetWidth * 0.033 + "px"));
$(".qtitle").css("font-size", (document.body.offsetWidth * 0.05 + "px"));
$(".qcontent").css("font-size", (document.body.offsetWidth * 0.03 + "px"));
});
</script>
</head>
<body id="body" style="width:100%;height:100%;margin:0;padding:0;overflow-x:hidden;overflow-y:hidden">
<div style="width:93%;height:92%;margin:0 auto;margin-top:2%">
<div id="title1Div" class="title1Div">
<span id="title1" class="qtitle"></span>
</div>
<table style="width:95%;height:80%;margin:0 auto;border-collapse:separate;border-spacing:0px 6px;">
<tr>
<td width="18%">
<div id="productNameName" class="blueSpanSmallFont"></div>
</td>
<td>
<div id="productName" class="whiteSpanSmallFont"></div>
</td>
</tr>
<tr>
<td width="18%">
<div id="productCodeName" class="blueSpanSmallFont"></div>
</td>
<td>
<div id="productCode" class="whiteSpanSmallFont"></div>
</td>
</tr>
<tr>
<td width="18%">
<div id="productModalName" class="blueSpanSmallFont"></div>
</td>
<td>
<div id="productModal" class="whiteSpanSmallFont"></div>
</td>
</tr>
<tr>
<td width="18%">
<div id="presentBatchName" class="blueSpanSmallFont"></div>
</td>
<td>
<div id="presentBatch" class="whiteSpanSmallFont"></div>
</td>
</tr>
<tr>
<td width="18%">
<div id="planAmountName" class="blueSpanSmallFont"></div>
</td>
<td>
<div id="planAmount" class="whiteSpanSmallFont"></div>
</td>
</tr>
</table>
</div>
</body>
</html>

View File

@ -0,0 +1,231 @@
<%@ 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>
.blueSpanLargeFont {
color: #437099;
font-family: Microsoft YaHei;
}
.blueSpanMediumFont {
color: #74D5FF;
font-family: Microsoft YaHei;
}
.blueSpanSmallFont {
color: #437099;
font-family: Microsoft YaHei;
}
.whiteSpanLargeFont {
color: white;
font-family: Microsoft YaHei;
}
.whiteSpanMediumFont {
color: white;
font-family: Microsoft YaHei;
}
.whiteSpanSmallFont {
color: white;
font-family: Microsoft YaHei;
}
.title1Div {
border-bottom: 5px solid #437099;
width: 95%;
height: 18%;
padding-bottom: 1%;
}
.qtitle {
font-family: Microsoft YaHei;
color:#437099;
}
</style>
<script type="text/javascript">
function getValue() {
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
//每一条循环判断
for (var i = 0; i < data.length; i++) {
if (data[i].elementCode.indexOf("title") != -1) {//获取车间名
var code = data[i].elementCode;
if (document.getElementById(code)) {//判断存不存在
//颜色
$('.' + code + 'Div').css("border-color", "#" + data[i].style);
document.getElementById(code).style.color = "#" + data[i].style;
//赋值
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)) {
document.getElementById(code).innerHTML = data[i].mPoint.parmvalue + data[i].mPoint.unit;
document.getElementById(code + "Name").innerHTML = data[i].name;
}
} 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 {
}
}
}
}, 'json');
}
/* 定时器 */
setInterval(getValue, 300000); //<!--每隔5分钟刷新一次-->
/* 初始化 */
$(function () {
getValue();
document.body.style.backgroundColor = "#" + '${param.backgroundColor}';
//console.log("height",document.body.scrollHeight);
// $(".blueSpanLargeFont").css("font-size", (document.body.offsetWidth * 0.0625 + "px"));
// $(".blueSpanMediumFont").css("font-size", (document.body.offsetWidth * 0.0547 + "px"));
$(".blueSpanSmallFont").css("font-size", (document.body.offsetWidth * 0.03 + "px"));
$(".whiteSpanSmallFont").css("font-size", (document.body.offsetWidth * 0.028 + "px"));
$(".qtitle").css("font-size", (document.body.offsetWidth * 0.05 + "px"));
$(".qcontent").css("font-size", (document.body.offsetWidth * 0.03 + "px"));
});
</script>
</head>
<body id="body" style="width:100%;height:100%;margin:0;padding:0;overflow-x:hidden;overflow-y:hidden">
<div style="width:93%;height:92%;margin:0 auto;margin-top:2%">
<div id="title1Div" class="title1Div">
<span id="title1" class="qtitle">制剂车间历史工单信息</span>
</div>
<table style="width:95%;height:80%;margin:0 auto;border-collapse:separate;border-spacing:0px 6px;" >
<tr>
<td align="center">
<div class="blueSpanSmallFont">工单号</div>
</td>
<td align="center">
<div class="blueSpanSmallFont">生产批号</div>
</td>
<td align="center">
<div class="blueSpanSmallFont">生产编码</div>
</td>
<td align="center">
<div class="blueSpanSmallFont">产品规格</div>
</td>
<td align="center">
<div class="blueSpanSmallFont">生产批量</div>
</td>
</tr>
<tr>
<td>
<div class="whiteSpanSmallFont">WO1912260001</div>
</td>
<td>
<div class="whiteSpanSmallFont">201912002D</div>
</td>
<td>
<div class="whiteSpanSmallFont">2104102</div>
</td>
<td>
<div class="whiteSpanSmallFont">150mg/1ml/支</div>
</td>
<td>
<div class="whiteSpanSmallFont">16122支</div>
</td>
</tr>
<tr>
<td>
<div class="whiteSpanSmallFont">WO1912260001</div>
</td>
<td>
<div class="whiteSpanSmallFont">201912002D</div>
</td>
<td>
<div class="whiteSpanSmallFont">2104102</div>
</td>
<td>
<div class="whiteSpanSmallFont">150mg/1ml/支</div>
</td>
<td>
<div class="whiteSpanSmallFont">16122支</div>
</td>
</tr>
<tr>
<td>
<div class="whiteSpanSmallFont">WO1912260001</div>
</td>
<td>
<div class="whiteSpanSmallFont">201912002D</div>
</td>
<td>
<div class="whiteSpanSmallFont">2104102</div>
</td>
<td>
<div class="whiteSpanSmallFont">150mg/1ml/支</div>
</td>
<td>
<div class="whiteSpanSmallFont">16122支</div>
</td>
</tr>
<tr>
<td>
<div class="whiteSpanSmallFont">WO1912260001</div>
</td>
<td>
<div class="whiteSpanSmallFont">201912002D</div>
</td>
<td>
<div class="whiteSpanSmallFont">2104102</div>
</td>
<td>
<div class="whiteSpanSmallFont">150mg/1ml/支</div>
</td>
<td>
<div class="whiteSpanSmallFont">16122支</div>
</td>
</tr>
<tr>
<td>
<div class="whiteSpanSmallFont">WO1912260001</div>
</td>
<td>
<div class="whiteSpanSmallFont">201912002D</div>
</td>
<td>
<div class="whiteSpanSmallFont">2104102</div>
</td>
<td>
<div class="whiteSpanSmallFont">150mg/1ml/支</div>
</td>
<td>
<div class="whiteSpanSmallFont">16122支</div>
</td>
</tr>
</table>
</div>
</body>
</html>

View File

@ -0,0 +1,201 @@
<%@ 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>
.blueSpanLargeFont {
color: #437099;
font-family: Microsoft YaHei;
}
.blueSpanMediumFont {
color: #74D5FF;
font-family: Microsoft YaHei;
}
.blueSpanSmallFont {
color: #437099;
font-family: Microsoft YaHei;
}
.whiteSpanLargeFont {
color: white;
font-family: Microsoft YaHei;
}
.whiteSpanMediumFont {
color: white;
font-family: Microsoft YaHei;
}
.whiteSpanSmallFont {
color: white;
font-family: Microsoft YaHei;
}
.title1Div {
border-bottom: 5px solid #437099;
width: 95%;
height: 18%;
padding-bottom: 1%;
}
.qtitle {
font-family: Microsoft YaHei;
color:#437099;
}
</style>
<script type="text/javascript">
function getValue() {
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
//每一条循环判断
for (var i = 0; i < data.length; i++) {
if (data[i].elementCode.indexOf("title") != -1) {//获取车间名
var code = data[i].elementCode;
if (document.getElementById(code)) {//判断存不存在
//颜色
$('.' + code + 'Div').css("border-color", "#" + data[i].style);
document.getElementById(code).style.color = "#" + data[i].style;
//赋值
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)) {
document.getElementById(code).innerHTML = data[i].mPoint.parmvalue + data[i].mPoint.unit;
document.getElementById(code + "Name").innerHTML = data[i].name;
}
} 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 {
}
}
}
}, 'json');
}
/* 定时器 */
setInterval(getValue, 300000); //<!--每隔5分钟刷新一次-->
/* 初始化 */
$(function () {
getValue();
document.body.style.backgroundColor = "#" + '${param.backgroundColor}';
//console.log("height",document.body.scrollHeight);
// $(".blueSpanLargeFont").css("font-size", (document.body.offsetWidth * 0.0625 + "px"));
// $(".blueSpanMediumFont").css("font-size", (document.body.offsetWidth * 0.0547 + "px"));
$(".blueSpanSmallFont").css("font-size", (document.body.offsetWidth * 0.03 + "px"));
$(".whiteSpanSmallFont").css("font-size", (document.body.offsetWidth * 0.028 + "px"));
$(".qtitle").css("font-size", (document.body.offsetWidth * 0.05 + "px"));
$(".qcontent").css("font-size", (document.body.offsetWidth * 0.03 + "px"));
});
</script>
</head>
<body id="body" style="width:100%;height:100%;margin:0;padding:0;overflow-x:hidden;overflow-y:hidden">
<div style="width:93%;height:92%;margin:0 auto;margin-top:2%">
<div id="title1Div" class="title1Div">
<span id="title1" class="qtitle">称量中心工单状态</span>
</div>
<table style="width:95%;height:80%;margin:0 auto;border-collapse:separate;border-spacing:0px 6px;" >
<tr>
<td align="center">
<div class="blueSpanSmallFont">工单号</div>
</td>
<td align="center">
<div class="blueSpanSmallFont">状态</div>
</td>
</tr>
<tr>
<td>
<div class="whiteSpanSmallFont">WO1912260001</div>
</td>
<td>
<div class="whiteSpanSmallFont">进行中</div>
</td>
</tr>
<tr>
<td>
<div class="whiteSpanSmallFont">WO1912260001</div>
</td>
<td>
<div class="whiteSpanSmallFont">进行中</div>
</td>
</tr>
<tr>
<td>
<div class="whiteSpanSmallFont">WO1912260001</div>
</td>
<td>
<div class="whiteSpanSmallFont">已完成</div>
</td>
</tr>
<tr>
<td>
<div class="whiteSpanSmallFont">WO1912260001</div>
</td>
<td>
<div class="whiteSpanSmallFont">已完成</div>
</td>
</tr>
<tr>
<td>
<div class="whiteSpanSmallFont">WO1912260001</div>
</td>
<td>
<div class="whiteSpanSmallFont">已审核</div>
</td>
</tr>
<tr>
<td>
<div class="whiteSpanSmallFont">WO1912260001</div>
</td>
<td>
<div class="whiteSpanSmallFont">已审核</div>
</td>
</tr>
<tr>
<td>
<div class="whiteSpanSmallFont">WO1912260001</div>
</td>
<td>
<div class="whiteSpanSmallFont">已审核</div>
</td>
</tr>
<tr>
<td>
<div class="whiteSpanSmallFont">WO1912260001</div>
</td>
<td>
<div class="whiteSpanSmallFont">已审核</div>
</td>
</tr>
</table>
</div>
</body>
</html>

View File

@ -0,0 +1,200 @@
<%@ 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>
.blueSpanLargeFont {
color: #437099;
font-family: Microsoft YaHei;
}
.blueSpanMediumFont {
color: #74D5FF;
font-family: Microsoft YaHei;
}
.blueSpanSmallFont {
color: #437099;
font-family: Microsoft YaHei;
}
.whiteSpanLargeFont {
color: white;
font-family: Microsoft YaHei;
}
.whiteSpanMediumFont {
color: white;
font-family: Microsoft YaHei;
}
.whiteSpanSmallFont {
color: white;
font-family: Microsoft YaHei;
}
.title1Div {
border-bottom: 5px solid #437099;
width: 95%;
height: 18%;
padding-bottom: 1%;
}
.qtitle {
font-family: Microsoft YaHei;
color:#437099;
}
</style>
<script type="text/javascript">
function getValue() {
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
//每一条循环判断
for (var i = 0; i < data.length; i++) {
if (data[i].elementCode.indexOf("title") != -1) {//获取车间名
var code = data[i].elementCode;
if (document.getElementById(code)) {//判断存不存在
//颜色
$('.' + code + 'Div').css("border-color", "#" + data[i].style);
document.getElementById(code).style.color = "#" + data[i].style;
//赋值
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)) {
document.getElementById(code).innerHTML = data[i].mPoint.parmvalue + data[i].mPoint.unit;
document.getElementById(code + "Name").innerHTML = data[i].name;
}
} 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 {
}
}
}
}, 'json');
}
/* 定时器 */
setInterval(getValue, 300000); //<!--每隔5分钟刷新一次-->
/* 初始化 */
$(function () {
getValue();
document.body.style.backgroundColor = "#" + '${param.backgroundColor}';
//console.log("height",document.body.scrollHeight);
// $(".blueSpanLargeFont").css("font-size", (document.body.offsetWidth * 0.0625 + "px"));
// $(".blueSpanMediumFont").css("font-size", (document.body.offsetWidth * 0.0547 + "px"));
$(".blueSpanSmallFont").css("font-size", (document.body.offsetWidth * 0.03 + "px"));
$(".whiteSpanSmallFont").css("font-size", (document.body.offsetWidth * 0.028 + "px"));
$(".qtitle").css("font-size", (document.body.offsetWidth * 0.05 + "px"));
$(".qcontent").css("font-size", (document.body.offsetWidth * 0.03 + "px"));
});
</script>
</head>
<body id="body" style="width:100%;height:100%;margin:0;padding:0;overflow-x:hidden;overflow-y:hidden">
<div style="width:93%;height:92%;margin:0 auto;margin-top:2%">
<div id="title1Div" class="title1Div">
<span id="title1" class="qtitle">原液车间历史工单信息</span>
</div>
<table style="width:95%;height:80%;margin:0 auto;border-collapse:separate;border-spacing:0px 6px;" >
<tr>
<td align="center">
<div class="blueSpanSmallFont">工单号</div>
</td>
<td align="center">
<div class="blueSpanSmallFont">生产批号</div>
</td>
<td align="center">
<div class="blueSpanSmallFont">产品编码</div>
</td>
<td align="center">
<div class="blueSpanSmallFont">产品规格</div>
</td>
</tr>
<tr>
<td>
<div class="whiteSpanSmallFont">WO202003010001</div>
</td>
<td>
<div class="whiteSpanSmallFont">2020001P24</div>
</td>
<td>
<div class="whiteSpanSmallFont">2007002</div>
</td>
<td>
<div class="whiteSpanSmallFont">JS016注射液原液</div>
</td>
</tr>
<tr>
<td>
<div class="whiteSpanSmallFont">WO202003100001</div>
</td>
<td>
<div class="whiteSpanSmallFont">2020002P24</div>
</td>
<td>
<div class="whiteSpanSmallFont">2007002</div>
</td>
<td>
<div class="whiteSpanSmallFont">JS016注射液原液</div>
</td>
</tr>
<tr>
<td>
<div class="whiteSpanSmallFont">WO202003200001</div>
</td>
<td>
<div class="whiteSpanSmallFont">2020003P24</div>
</td>
<td>
<div class="whiteSpanSmallFont">2007002</div>
</td>
<td>
<div class="whiteSpanSmallFont">JS016注射液原液</div>
</td>
</tr>
<tr>
<td>
<div class="whiteSpanSmallFont">WO202003300001</div>
</td>
<td>
<div class="whiteSpanSmallFont">2020004P24</div>
</td>
<td>
<div class="whiteSpanSmallFont">2007002</div>
</td>
<td>
<div class="whiteSpanSmallFont">JS016注射液原液</div>
</td>
</tr>
</table>
</div>
</body>
</html>