xzzn/SIPAIIS_WMS_JSSW
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
58a0e87d735e842d20760ad4b4c6f1c508167f9d
SIPAIIS_WMS_JSSW/WebRoot/jsp/visual/modules/bigScreen_projectOverview2.jsp

287 lines
15 KiB
Plaintext
Raw Normal View History

first commit
2026-01-16 14:13:44 +08:00
<%@ 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>
Reference in New Issue Copy Permalink