first commit
This commit is contained in:
360
WebRoot/jsp/visual/modules/bigScreen_patrolInspection4.jsp
Normal file
360
WebRoot/jsp/visual/modules/bigScreen_patrolInspection4.jsp
Normal 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>
|
||||
Reference in New Issue
Block a user