287 lines
15 KiB
Plaintext
287 lines
15 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_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> |