248 lines
9.4 KiB
Plaintext
248 lines
9.4 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">
|
||
|
|
|
||
|
|
//获取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 getLocalTime(nS) {
|
||
|
|
return new Date(parseInt(nS) * 1000).toLocaleString().replace(/:\d{1,2}$/,' ');
|
||
|
|
}
|
||
|
|
|
||
|
|
var color=[
|
||
|
|
"#2ec7c9",
|
||
|
|
"#b6a2de",
|
||
|
|
"#5ab1ef",
|
||
|
|
"#ffb980",
|
||
|
|
"#d87a80",
|
||
|
|
"#8d98b3",
|
||
|
|
"#e5cf0d",
|
||
|
|
"#97b552",
|
||
|
|
"#95706d",
|
||
|
|
"#dc69aa",
|
||
|
|
"#07a2a4",
|
||
|
|
"#9a7fd1",
|
||
|
|
"#588dd5",
|
||
|
|
"#f5994e",
|
||
|
|
"#c05050",
|
||
|
|
"#59678c",
|
||
|
|
"#c9ab00",
|
||
|
|
"#7eb00a",
|
||
|
|
"#6f5553",
|
||
|
|
"#c14089"
|
||
|
|
];
|
||
|
|
var mychart="";
|
||
|
|
/* 请求数据 */
|
||
|
|
function getValue() {
|
||
|
|
$.post(ext.contextPath + '/plan/getJspWholeInfoByPlanLayoutId.do', { planLayoutId: "${param.planLayoutId}" }, function (data) {
|
||
|
|
// console.log(data);
|
||
|
|
if(data!=null&&data.length>0){
|
||
|
|
var series=[];
|
||
|
|
var legenddata=[];
|
||
|
|
var seriesData=[];
|
||
|
|
var linenum=0;
|
||
|
|
for(var i=0;i<data.length;i++){
|
||
|
|
if(data[i].elementCode=="line"){
|
||
|
|
seriesData.push(data[i].mPointHistory);
|
||
|
|
legenddata.push(data[i].name);
|
||
|
|
series.push({
|
||
|
|
// data:data[i].mPointHistory,
|
||
|
|
symbol:'none',
|
||
|
|
name:data[i].name,
|
||
|
|
type:'line'
|
||
|
|
|
||
|
|
});
|
||
|
|
linenum++;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
mychart=echarts.init(document.getElementById('chart'));
|
||
|
|
var option = {
|
||
|
|
color:color,
|
||
|
|
animation:false,
|
||
|
|
legend: {
|
||
|
|
data: legenddata,
|
||
|
|
left:'10%',
|
||
|
|
// padding:[
|
||
|
|
// 15, // 上
|
||
|
|
// 15, // 右
|
||
|
|
// 15, // 下
|
||
|
|
// 15 // 左
|
||
|
|
// ],
|
||
|
|
textStyle:{
|
||
|
|
color:'#FFFFFF'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
grid:{
|
||
|
|
left: '4%', // 与容器左侧的距离
|
||
|
|
// right: '1%', // 与容器右侧的距离
|
||
|
|
top: '15%', // 与容器顶部的距离
|
||
|
|
bottom: '5%', // 与容器底部的距离
|
||
|
|
containLabel:true
|
||
|
|
},
|
||
|
|
xAxis: {
|
||
|
|
type: 'time',
|
||
|
|
axisLabel: {
|
||
|
|
show: true,
|
||
|
|
textStyle: {
|
||
|
|
color: '#FFFFFF' //更改坐标轴文字颜色
|
||
|
|
},
|
||
|
|
// formatter:function(val){
|
||
|
|
// var timestring=String(val).substring(0,11);
|
||
|
|
// console.log(getLocalTime(timestring));
|
||
|
|
// // console.log(getLocalTime(val.substring(0,11)));
|
||
|
|
// return getLocalTime(timestring);
|
||
|
|
// }
|
||
|
|
},
|
||
|
|
axisLine:{
|
||
|
|
show:false,
|
||
|
|
lineStyle:{
|
||
|
|
color:'#FFFFFF' //更改坐标轴颜色
|
||
|
|
}
|
||
|
|
},
|
||
|
|
axisTick: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
splitLine: {
|
||
|
|
show: false//是否显示分隔线。默认数值轴显示，类目轴不显示。
|
||
|
|
}
|
||
|
|
},
|
||
|
|
yAxis: {
|
||
|
|
type : 'value',
|
||
|
|
name : false,
|
||
|
|
axisLabel: {
|
||
|
|
show: true,
|
||
|
|
textStyle: {
|
||
|
|
color: '#FFFFFF' //更改坐标轴文字颜色
|
||
|
|
}
|
||
|
|
},
|
||
|
|
axisLine:{
|
||
|
|
show:false,
|
||
|
|
lineStyle:{
|
||
|
|
color:'#FFFFFF' //更改坐标轴颜色
|
||
|
|
}
|
||
|
|
},
|
||
|
|
axisTick: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
splitLine: {
|
||
|
|
show: true,//是否显示分隔线。默认数值轴显示，类目轴不显示。
|
||
|
|
lineStyle:{
|
||
|
|
color:'#262952',
|
||
|
|
type:'dashed'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
scale:true//设置成 true 后坐标刻度不会强制包含零刻度。
|
||
|
|
},
|
||
|
|
series: series
|
||
|
|
};
|
||
|
|
// console.log(option);
|
||
|
|
mychart.setOption(option,true);
|
||
|
|
|
||
|
|
appendDataToChart(seriesData);
|
||
|
|
|
||
|
|
var textnum=data.length-linenum;
|
||
|
|
var textHtml="";
|
||
|
|
var unit="";
|
||
|
|
var ctextnum=0;
|
||
|
|
for(var m=0;m<data.length;m++){
|
||
|
|
if(data[m].elementCode!="line"){
|
||
|
|
if(ctextnum==0){
|
||
|
|
unit="";
|
||
|
|
}else if(ctextnum==1){
|
||
|
|
unit="%";
|
||
|
|
}else if(ctextnum==2){
|
||
|
|
unit="%";
|
||
|
|
}
|
||
|
|
textHtml+="<div style='float:left;width:100%;height: calc((100vh - 60px - 15px)/"+textnum+");'>";
|
||
|
|
textHtml+="<div style='float:left;width:100%;height: calc((100vh - 60px - 15px)/"+textnum+"/2);line-height: calc((100vh - 60px - 15px)/"+textnum+"/2);font-size: 20px;font-family: Helvetica;text-align: center;color: #ffffff;'>"+data[m].name+"</div>";
|
||
|
|
textHtml+="<div style='float:left;width:100%;height: calc((100vh - 60px - 15px)/"+textnum+"/2);line-height: calc((100vh - 60px - 15px)/"+textnum+"/2);font-size: 24px;font-family: Helvetica;text-align: center;color: #69F6F9;'>"+(data[m].mPoint.parmvalue).toFixed(1)+""+unit+"</div>";
|
||
|
|
// textHtml+="";
|
||
|
|
textHtml+="</div>";
|
||
|
|
ctextnum++;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
$('#text').html(textHtml);
|
||
|
|
|
||
|
|
}
|
||
|
|
}, 'json');
|
||
|
|
}
|
||
|
|
|
||
|
|
function appendDataToChart(seriesData){
|
||
|
|
if(seriesData!=null&&seriesData.length>0){
|
||
|
|
for(var i=0;i<seriesData.length;i++){
|
||
|
|
var data=[];
|
||
|
|
for(var j=0;j<seriesData[i].length;j++){
|
||
|
|
var datas=[];
|
||
|
|
datas.push(seriesData[i][j].measuredt);
|
||
|
|
datas.push(seriesData[i][j].parmvalue);
|
||
|
|
data.push(datas);
|
||
|
|
}
|
||
|
|
mychart.appendData({
|
||
|
|
seriesIndex:i,
|
||
|
|
data:data
|
||
|
|
});
|
||
|
|
mychart.resize();
|
||
|
|
// console.log(data);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
// console.log(seriesData);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 定时器 */
|
||
|
|
//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-15) + "px";
|
||
|
|
|
||
|
|
document.getElementById("backImage").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 style="height:100%;width:100%;padding-top:15px;">
|
||
|
|
<div id="main" style="height:100%;width:100%;background:rgba(19,32,85,0.27);border-radius: 8px;">
|
||
|
|
<div style='float:left;width:50%;height:60px;'><img id="backImage" src="" style="z-index:-1;position:relative;height:100%;width: 100%;"/></div>
|
||
|
|
<div id="chart" style="float:left;width:70%;height: calc(100vh - 60px - 15px);"></div>
|
||
|
|
<div id="text" style="float:left;width:30%;height: calc(100vh - 60px - 15px);"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|