621 lines
37 KiB
Plaintext
621 lines
37 KiB
Plaintext
|
<%@ page language="java" pageEncoding="UTF-8"%>
|
||
|
|
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
|
||
|
|
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
|
||
|
|
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
|
||
|
|
<%@ page import="com.sipai.entity.base.ServerObject"%>
|
||
|
|
<%@ taglib uri="http://www.springsecurity.org/jsp" prefix="security"%>
|
||
|
|
<%@page import="com.sipai.entity.visual.JspElement"%>
|
||
|
|
<%request.setAttribute("Type_GetValue", JspElement.Type_GetValue); %>
|
||
|
|
<%request.setAttribute("Type_Get7dayHistory", JspElement.Type_GetHourHistory); %>
|
||
|
|
<%request.setAttribute("Type_Get7dayHistory", JspElement.Type_Get7dayHistory); %>
|
||
|
|
<%request.setAttribute("Type_GetModbus", JspElement.Type_GetModbus); %>
|
||
|
|
<%request.setAttribute("Type_GetHttp", JspElement.Type_GetHttp); %>
|
||
|
|
<!DOCTYPE html>
|
||
|
|
<!-- <html lang="zh-CN"> -->
|
||
|
|
<!-- BEGIN HEAD -->
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<title></title>
|
||
|
|
<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>
|