360 lines
13 KiB
Plaintext
360 lines
13 KiB
Plaintext
|
<%@ page language="java" pageEncoding="UTF-8"%>
|
||
|
|
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
|
||
|
|
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
|
||
|
|
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
|
||
|
|
<%@ page import="com.sipai.entity.base.ServerObject"%>
|
||
|
|
<%@ taglib uri="http://www.springsecurity.org/jsp" prefix="security"%>
|
||
|
|
<%@page import="com.sipai.entity.visual.JspElement"%>
|
||
|
|
<%request.setAttribute("Type_GetValue", JspElement.Type_GetValue); %>
|
||
|
|
<%request.setAttribute("Type_Get7dayHistory", JspElement.Type_GetHourHistory); %>
|
||
|
|
<%request.setAttribute("Type_Get7dayHistory", JspElement.Type_Get7dayHistory); %>
|
||
|
|
<%request.setAttribute("Type_GetModbus", JspElement.Type_GetModbus); %>
|
||
|
|
<%request.setAttribute("Type_GetHttp", JspElement.Type_GetHttp); %>
|
||
|
|
<!DOCTYPE html>
|
||
|
|
<!-- <html lang="zh-CN"> -->
|
||
|
|
<!-- BEGIN HEAD -->
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<title></title>
|
||
|
|
<!-- 引用页头及CSS页-->
|
||
|
|
<jsp:include page="/jsp/inc.jsp"></jsp:include>
|
||
|
|
<script type="text/javascript">
|
||
|
|
|
||
|
|
/* 请求数据 */
|
||
|
|
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>
|