1861 lines
58 KiB
Plaintext
1861 lines
58 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.scada.MPoint"%>
|
||
<%@page import="com.sipai.entity.work.ProAlarm"%>
|
||
<%request.setAttribute("Flag_Enable",MPoint.Flag_Enable);%>
|
||
<%request.setAttribute("Flag_Disable",MPoint.Flag_Disable);%>
|
||
<% request.setAttribute("Status_N", ProAlarm.Status_N); %>
|
||
<% request.setAttribute("Status_C", ProAlarm.Status_C); %>
|
||
<% request.setAttribute("Status_Y", ProAlarm.Status_Y); %>
|
||
<!DOCTYPE html>
|
||
<!-- <html lang="zh-CN"> -->
|
||
<!-- BEGIN HEAD -->
|
||
<head>
|
||
<title><%= ServerObject.atttable.get("TOPTITLE")%></title>
|
||
|
||
<!-- 引用页头及CSS页-->
|
||
<jsp:include page="/jsp/inc.jsp"></jsp:include>
|
||
<!-- echarts-->
|
||
<script type="text/javascript" src="<%=request.getContextPath()%>/plugins/echarts/echarts.4.1.0.min.js" charset="utf-8"></script>
|
||
<style>
|
||
|
||
/*
|
||
根据不同分辨率显示不同px的文字大小
|
||
*/
|
||
@media (min-width: 1080px) and (min-height: 520px) {
|
||
.mainDiv{
|
||
height:calc(100vh);
|
||
}
|
||
.rowDiv{
|
||
height:calc(100vh/3);
|
||
}
|
||
.titleView{
|
||
padding-left:10px;
|
||
font-size: 13px;
|
||
font-family: MicrosoftYaHei;
|
||
color: #61798F;
|
||
}
|
||
.lable-left{
|
||
padding-left: 10px;
|
||
margin-bottom: 4px;
|
||
float: left;
|
||
width: 30%;
|
||
font-size: 10px;
|
||
font-family: MicrosoftYaHei;
|
||
color: #61798F;
|
||
line-height: 20px;
|
||
letter-spacing: 1px;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
.lable-right{
|
||
margin-bottom: 4px;
|
||
float: left;
|
||
width: 70%;
|
||
font-size: 12px;
|
||
font-family: MicrosoftYaHei;
|
||
font-weight: 600;
|
||
color: #82BDF3;
|
||
line-height: 20px;
|
||
letter-spacing: 1px;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.lable-left2{
|
||
padding-left: 10px;
|
||
margin-bottom: 4px;
|
||
float: left;
|
||
width: 55%;
|
||
font-size: 10px;
|
||
font-family: MicrosoftYaHei;
|
||
color: #61798F;
|
||
line-height: 20px;
|
||
letter-spacing: 1px;
|
||
text-align: right;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
.lable-right2{
|
||
margin-bottom: 4px;
|
||
float: left;
|
||
width: 35%;
|
||
font-size: 12px;
|
||
font-family: MicrosoftYaHei;
|
||
font-weight: 600;
|
||
color: #82BDF3;
|
||
line-height: 20px;
|
||
letter-spacing: 1px;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.eqLable-title{
|
||
padding-top:0px;
|
||
float: left;
|
||
width: 100%;
|
||
height: 30%;
|
||
font-size: 12px;
|
||
font-family: MicrosoftYaHei;
|
||
color: #61798F;
|
||
letter-spacing: 1px;
|
||
text-align: center;
|
||
|
||
}
|
||
.eqLable-num{
|
||
padding-top:0px;
|
||
float: left;
|
||
width: 100%;
|
||
height: 70%;
|
||
font-size: 25px;
|
||
font-family: MicrosoftYaHei;
|
||
font-weight: 600;
|
||
color: #82BDF3;
|
||
line-height: calc(100vh/3/2*0.7);
|
||
letter-spacing: 1px;
|
||
text-align: center;
|
||
}
|
||
|
||
.gdLable-title{
|
||
padding-top:0px;
|
||
float: left;
|
||
width: 100%;
|
||
height: 10%;
|
||
font-size: 10px;
|
||
font-family: MicrosoftYaHei;
|
||
color: #61798F;
|
||
letter-spacing: 1px;
|
||
text-align: center;
|
||
|
||
}
|
||
.gdLable-num{
|
||
padding-top:10px;
|
||
float: left;
|
||
width: 100%;
|
||
height: 20%;
|
||
font-size: 18px;
|
||
font-family: MicrosoftYaHei;
|
||
font-weight: 600;
|
||
color: #82BDF3;
|
||
line-height: calc(100vh/3/2*0.3);
|
||
letter-spacing: 1px;
|
||
text-align: center;
|
||
}
|
||
}
|
||
@media (min-width: 1550px) and (min-height: 800px) {
|
||
.mainDiv{
|
||
height:calc(100vh);
|
||
}
|
||
.rowDiv{
|
||
height:calc(100vh/3);
|
||
}
|
||
|
||
.titleView{
|
||
padding-left:10px;
|
||
font-size: 16px;
|
||
font-family: MicrosoftYaHei;
|
||
color: #61798F;
|
||
}
|
||
|
||
.lable-left{
|
||
padding-left: 10px;
|
||
margin-bottom: 23px;
|
||
float: left;
|
||
width: 25%;
|
||
font-size: 16px;
|
||
font-family: MicrosoftYaHei;
|
||
color: #61798F;
|
||
line-height: 20px;
|
||
letter-spacing: 1px;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
.lable-right{
|
||
margin-bottom: 23px;
|
||
float: left;
|
||
width: 70%;
|
||
font-size: 17px;
|
||
font-family: MicrosoftYaHei;
|
||
font-weight: 600;
|
||
color: #82BDF3;
|
||
line-height: 20px;
|
||
letter-spacing: 1px;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.lable-left2{
|
||
padding-left: 10px;
|
||
margin-bottom: 23px;
|
||
float: left;
|
||
width: 55%;
|
||
font-size: 16px;
|
||
font-family: MicrosoftYaHei;
|
||
color: #61798F;
|
||
line-height: 20px;
|
||
letter-spacing: 1px;
|
||
text-align: right;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
.lable-right2{
|
||
margin-bottom: 23px;
|
||
float: left;
|
||
width: 35%;
|
||
font-size: 17px;
|
||
font-family: MicrosoftYaHei;
|
||
font-weight: 600;
|
||
color: #82BDF3;
|
||
line-height: 20px;
|
||
letter-spacing: 1px;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.eqLable-title{
|
||
padding-top:0px;
|
||
float: left;
|
||
width: 100%;
|
||
height: 30%;
|
||
font-size: 16px;
|
||
font-family: MicrosoftYaHei;
|
||
color: #61798F;
|
||
letter-spacing: 1px;
|
||
text-align: center;
|
||
|
||
}
|
||
.eqLable-num{
|
||
padding-top:0px;
|
||
float: left;
|
||
width: 100%;
|
||
height: 70%;
|
||
font-size: 55px;
|
||
font-family: MicrosoftYaHei;
|
||
font-weight: 600;
|
||
color: #82BDF3;
|
||
line-height: calc(100vh/3/2*0.7);
|
||
letter-spacing: 1px;
|
||
text-align: center;
|
||
}
|
||
|
||
.gdLable-title{
|
||
padding-top:0px;
|
||
float: left;
|
||
width: 100%;
|
||
height: 10%;
|
||
font-size: 14px;
|
||
font-family: MicrosoftYaHei;
|
||
color: #61798F;
|
||
letter-spacing: 1px;
|
||
text-align: center;
|
||
|
||
}
|
||
.gdLable-num{
|
||
padding-top:10px;
|
||
float: left;
|
||
width: 100%;
|
||
height: 20%;
|
||
font-size: 32px;
|
||
font-family: MicrosoftYaHei;
|
||
font-weight: 600;
|
||
color: #82BDF3;
|
||
line-height: calc(100vh/3/2*0.3);
|
||
letter-spacing: 1px;
|
||
text-align: center;
|
||
}
|
||
}
|
||
@media (min-width: 992px) and (min-height: 558px) {
|
||
}
|
||
@media (min-width: 1200px) and (min-height: 675px) {
|
||
}
|
||
@media (min-width: 1400px) and (min-height: 875px) {
|
||
}
|
||
|
||
.box-white {
|
||
border-top: 0;
|
||
background-color:#FFFFFF;
|
||
/* margin-left: 20px; */
|
||
/* background-color:#16314C; */
|
||
}
|
||
|
||
.yesterday{
|
||
float:right;
|
||
width:50%;
|
||
height:70px;
|
||
text-align:center;
|
||
border-left:1px solid #335886;
|
||
margin-top:15px;
|
||
}
|
||
.yesterday-title{
|
||
height: 24px;
|
||
background: #3883ff;
|
||
font-size: 12px;
|
||
padding-top:3px;
|
||
font-family: MicrosoftYaHei, MicrosoftYaHei-Bold;
|
||
font-weight: 700;
|
||
color: #ffffff;
|
||
line-height: 16px;
|
||
letter-spacing: 1px;
|
||
margin-left:30px;
|
||
margin-right:22px;
|
||
}
|
||
.yesterday-num{
|
||
margin-top:10px;
|
||
margin-left:30px;
|
||
margin-right:22px;
|
||
border-bottom:1px solid #335886;
|
||
font-size: 18px;
|
||
font-family: Helvetica, Helvetica-Bold;
|
||
font-weight: 700;
|
||
text-align: center;
|
||
color: #00CCCC;
|
||
height: 35px;
|
||
line-height: 25px;
|
||
letter-spacing: 2px;
|
||
}
|
||
|
||
.title-left{
|
||
width: 50px;
|
||
height: 4px;
|
||
background: #c4e2e6;
|
||
border-radius: 4px;
|
||
float:left;
|
||
}
|
||
.title-right{
|
||
width: calc(100% - 50px);
|
||
height: 3px;
|
||
background: linear-gradient(rgba(23,39,55,0), #4e80b2);
|
||
border-radius: 4px;
|
||
float:right;
|
||
}
|
||
|
||
/* .dlc{
|
||
margin-top:10px;
|
||
}
|
||
.dlc>dt{
|
||
font-weight:initial;
|
||
text-align: left;
|
||
width: 80px;
|
||
height: 25px;
|
||
margin-bottom:13px;
|
||
}
|
||
.dlc.dlc-right>dt{
|
||
width: 180px;
|
||
text-align: right;
|
||
margin-bottom:17px;
|
||
}
|
||
.dlc.dlc-right>dd{
|
||
margin-left: 180px;
|
||
margin-bottom:17px;
|
||
}
|
||
.dlc>dd{
|
||
margin-left: 80px;
|
||
height: 25px;
|
||
text-align: left;
|
||
margin-bottom:13px;
|
||
}
|
||
.dlc>.font-red{
|
||
color: #F55945;
|
||
}
|
||
.dlc>.font-yellow{
|
||
color: #F0B253;
|
||
} */
|
||
|
||
/* .box.box-white .box-border >.title-left{
|
||
width: 50px;
|
||
height: 4px;
|
||
background: #c4e2e6;
|
||
border-radius: 4px;
|
||
float:left;
|
||
}
|
||
.box.box-white .box-border >.title-right{
|
||
width: calc(100% - 50px);
|
||
height: 3px;
|
||
background: linear-gradient(rgba(23,39,55,0), #4e80b2);
|
||
border-radius: 4px;
|
||
float:right;
|
||
} */
|
||
/*
|
||
.lable-right{
|
||
font-size: 15px;
|
||
font-family: MicrosoftYaHei;
|
||
font-weight: 600;
|
||
color: #82BDF3;
|
||
line-height: 20px;
|
||
letter-spacing: 1px;
|
||
}
|
||
.lable-left{
|
||
font-size: 14px;
|
||
font-family: MicrosoftYaHei;
|
||
color: #61798F;
|
||
line-height: 20px;
|
||
letter-spacing: 1px;
|
||
}
|
||
|
||
.lable-green{
|
||
font-size: 50px;
|
||
font-family: MicrosoftYaHei, MicrosoftYaHei-Bold;
|
||
font-weight: 700;
|
||
text-align: center;
|
||
color: #00cccc;
|
||
line-height: 72px;
|
||
}
|
||
|
||
.lable-green-small{
|
||
font-size: 30px;
|
||
font-family: MicrosoftYaHei, MicrosoftYaHei-Bold;
|
||
font-weight: 700;
|
||
text-align: left;
|
||
color: #00cccc;
|
||
line-height: 42px;
|
||
}
|
||
|
||
.lable-right-small{
|
||
font-size: 14px;
|
||
font-family: MicrosoftYaHei, MicrosoftYaHei-Bold;
|
||
text-align: left;
|
||
color: #61798F;
|
||
line-height: 19px;
|
||
} */
|
||
|
||
|
||
</style>
|
||
<script type="text/javascript">
|
||
var myChart1;
|
||
var myChart2;
|
||
var myChart3;
|
||
var myChart4;
|
||
var myChart5;
|
||
var myChart6;
|
||
var myChart7;
|
||
var myChart8;
|
||
var myChart9;
|
||
var myChart10;
|
||
// var dosearch = function() {
|
||
// $("#table").bootstrapTable('refresh');
|
||
// };
|
||
//达标率
|
||
function dogauge(id,value,title){
|
||
var max = 100;
|
||
// 蓝色背景
|
||
var num = value / max;
|
||
var colorSet = [
|
||
[num, "#347EFB"],
|
||
[1, "#F6F8F9"]
|
||
];
|
||
myChart1 = echarts.init(document.getElementById(id));
|
||
var option = {
|
||
title:{
|
||
text:title,
|
||
textStyle: {
|
||
fontSize: fontSize(0.25) ,
|
||
fontWeight: 400 ,
|
||
color: '#a3a9af' ,
|
||
},
|
||
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.4) ,
|
||
formatter: '{value}%'
|
||
|
||
},
|
||
data: [{value: value}]
|
||
}
|
||
]
|
||
};
|
||
myChart1.clear();
|
||
myChart1.setOption(option, true);
|
||
}
|
||
//设备完好率
|
||
function doequgood(id,value){
|
||
var othVal = 100 - value;
|
||
myChart2 = echarts.init(document.getElementById(id));
|
||
var option = {
|
||
title: {
|
||
text: value+'%',
|
||
x: 'center',
|
||
y: 'center',
|
||
top:'30%',
|
||
textStyle: {
|
||
fontWeight: 'normal',
|
||
color: '#0580f2',
|
||
fontSize: fontSize(0.3)
|
||
},
|
||
subtext:'设备完好率',
|
||
subtextStyle: {
|
||
fontSize: fontSize(0.15),
|
||
fontWeight: 400,
|
||
color: '#a3a9af',
|
||
} ,
|
||
},
|
||
color: ['#F6F8F9'],
|
||
grid: {
|
||
top:0,
|
||
left:0,
|
||
right:0,
|
||
bottom:0,
|
||
},
|
||
series: [{
|
||
name: 'Line 1',
|
||
type: 'pie',
|
||
clockWise: true,
|
||
radius: ['80%', '100%'],
|
||
itemStyle: {
|
||
normal: {
|
||
label: {
|
||
show: false
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
}
|
||
}
|
||
},
|
||
hoverAnimation: false,
|
||
data: [{
|
||
value: value,
|
||
name: '01',
|
||
itemStyle: {
|
||
normal: {
|
||
color: '#3883FF',
|
||
label: {
|
||
show: false
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
}
|
||
}
|
||
}
|
||
}, {
|
||
name: '02',
|
||
value: othVal,
|
||
itemStyle: {
|
||
normal: {
|
||
color: '#0D436A',
|
||
label: {
|
||
show: false
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
}
|
||
}
|
||
}
|
||
}]
|
||
}]
|
||
}
|
||
myChart2.clear();
|
||
myChart2.setOption(option, true);
|
||
}
|
||
//设备类型pie
|
||
function doequtype(id,val){
|
||
const colorList = ['#3883FF', '#A84ECB', '#FE8840', '#FBD444', '#7F6AAD', '#585247'];
|
||
var data = val;
|
||
var legendName = new Array;
|
||
data.forEach(function(value,i){
|
||
legendName[i] = value.name;
|
||
});
|
||
myChart3 = echarts.init(document.getElementById(id));
|
||
var option = {
|
||
title: {
|
||
text: '设备',
|
||
textStyle: {
|
||
fontSize: 17,
|
||
color: '#61798F',
|
||
lineHeight: 24
|
||
},
|
||
subtextStyle: {
|
||
fontSize: 28,
|
||
color: '#333'
|
||
},
|
||
textAlign: 'center',
|
||
left: '19%',
|
||
top: '41%'
|
||
},
|
||
grid: {
|
||
top:0,
|
||
left:0,
|
||
right:0,
|
||
bottom:0,
|
||
},
|
||
tooltip: {
|
||
trigger: 'item',
|
||
},
|
||
legend: {
|
||
type: 'scroll',
|
||
orient: 'vertical',
|
||
right: 20,
|
||
top: '20%',
|
||
itemGap: 10,
|
||
selectedMode: false,
|
||
data: legendName,
|
||
textStyle: {
|
||
rich: {
|
||
uname: {
|
||
fontSize: 14,
|
||
color: '#61798F',
|
||
},
|
||
unum: {
|
||
fontSize: 20,
|
||
color: '#FFFFFF',
|
||
}
|
||
}
|
||
}
|
||
// formatter(name) {
|
||
// var index = 0;
|
||
// data.forEach(function(value,i){
|
||
// if(value.name == name){
|
||
// index = i;
|
||
// }
|
||
// });
|
||
// var value = data[index].value;
|
||
// return ' {uname|'+name+'}：{unum|'+value+'}';
|
||
// }
|
||
},
|
||
color: colorList,
|
||
series: [
|
||
{
|
||
name: '设备',
|
||
type: 'pie',
|
||
radius: ['60%', '85%'],
|
||
center: ['20%', '50%'],
|
||
label: {
|
||
show: false
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
},
|
||
itemStyle: {
|
||
borderWidth: 3,
|
||
borderColor: '#0D436A'
|
||
},
|
||
data: data,
|
||
}
|
||
]
|
||
};
|
||
myChart3.clear();
|
||
myChart3.setOption(option, true);
|
||
}
|
||
//处理量、外运量等line
|
||
function doline(id,data){
|
||
const colorList = ['#347EFB', '#EBA043', '#9E70C7', '#47C1C8', '#F55945', '#A84ECB'];
|
||
var series = new Array;
|
||
data.forEach(function(val,i){
|
||
series[i] = {
|
||
name: val.name,
|
||
type: 'line',
|
||
data: val.value,
|
||
smooth: true,
|
||
showSymbol: false,
|
||
areaStyle: {
|
||
// 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置
|
||
color: {
|
||
type: 'linear',
|
||
x: 0,
|
||
y: 0.9,
|
||
x2: 0,
|
||
y2: 0,
|
||
colorStops: [{
|
||
offset: 0, color: '#FFF'
|
||
}, {
|
||
offset: 1, color: colorList[i] // 100% 处的颜色
|
||
}],
|
||
global: false // 缺省为 false
|
||
}
|
||
},
|
||
lineStyle:{
|
||
color:colorList[i],
|
||
},
|
||
};
|
||
});
|
||
// 基于准备好的dom，初始化echarts实例
|
||
myChart4 = echarts.init(document.getElementById(id));
|
||
var option = {
|
||
color: colorList,
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
},
|
||
legend: {
|
||
top: 0,
|
||
left: 10,
|
||
icon:'circle',
|
||
textStyle: {
|
||
color: '#61798F' ,
|
||
lineHeight: 16,
|
||
fontSize: 13 ,
|
||
fontWeight : 600 ,
|
||
},
|
||
},
|
||
grid: {
|
||
left: '1%',
|
||
right: '5%',
|
||
top: '20%',
|
||
bottom: '5%',
|
||
containLabel: true
|
||
},
|
||
xAxis: {
|
||
type : 'category',
|
||
boundaryGap: false,
|
||
axisLabel: {
|
||
color:'#8A88B7',
|
||
},
|
||
axisLine: {
|
||
show: false
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
splitNumber: 3 ,
|
||
axisLine: {
|
||
show: false
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLabel: {
|
||
color:'#8A88B7',
|
||
},
|
||
//网格样式
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle:{
|
||
color: '#8A88B7',
|
||
type: 'dashed'
|
||
}
|
||
}
|
||
},
|
||
series: series
|
||
};
|
||
myChart4.clear();
|
||
myChart4.setOption(option, true);
|
||
}
|
||
|
||
function doline2(id,data){
|
||
const colorList = ['#347EFB', '#EBA043', '#9E70C7', '#47C1C8', '#F55945', '#A84ECB'];
|
||
var series = new Array;
|
||
data.forEach(function(val,i){
|
||
series[i] = {
|
||
name: val.name,
|
||
type: 'line',
|
||
data: val.value,
|
||
smooth: true,
|
||
showSymbol: false,
|
||
areaStyle: {
|
||
// 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置
|
||
color: {
|
||
type: 'linear',
|
||
x: 0,
|
||
y: 0.9,
|
||
x2: 0,
|
||
y2: 0,
|
||
colorStops: [{
|
||
offset: 0, color: '#FFF'
|
||
},{
|
||
offset: 1, color: colorList[i] // 100% 处的颜色
|
||
}],
|
||
global: false // 缺省为 false
|
||
}
|
||
},
|
||
lineStyle:{
|
||
color:colorList[i],
|
||
},
|
||
};
|
||
});
|
||
// 基于准备好的dom，初始化echarts实例
|
||
myChart5 = echarts.init(document.getElementById(id));
|
||
var option = {
|
||
color: colorList,
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
},
|
||
legend: {
|
||
top: 0,
|
||
left: 10,
|
||
icon:'circle',
|
||
textStyle: {
|
||
color: '#61798F' ,
|
||
lineHeight: 16,
|
||
fontSize: 13 ,
|
||
fontWeight : 600 ,
|
||
},
|
||
},
|
||
grid: {
|
||
left: '1%',
|
||
right: '5%',
|
||
top: '20%',
|
||
bottom: '5%',
|
||
containLabel: true
|
||
},
|
||
xAxis: {
|
||
type : 'category',
|
||
boundaryGap: false,
|
||
axisLabel: {
|
||
color:'#8A88B7',
|
||
},
|
||
axisLine: {
|
||
show: false
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
splitNumber: 3 ,
|
||
axisLine: {
|
||
show: false
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLabel: {
|
||
color:'#8A88B7',
|
||
},
|
||
//网格样式
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle:{
|
||
color: '#8A88B7',
|
||
type: 'dashed'
|
||
}
|
||
}
|
||
},
|
||
series: series
|
||
};
|
||
myChart5.clear();
|
||
myChart5.setOption(option, true);
|
||
}
|
||
//药、电等bar
|
||
function doBar(id,data){
|
||
const colorList = ['#F0B253', '#397EFA', '#9E70C7', '#47C1C8', '#F55945', '#A84ECB'];
|
||
var series = new Array;
|
||
data.forEach(function(val,i){
|
||
series[i] = {
|
||
name: val.name,
|
||
type: 'bar',
|
||
barWidth: '20%',
|
||
barMinWidth: 10 ,
|
||
data: val.value
|
||
};
|
||
});
|
||
// 基于准备好的dom，初始化echarts实例
|
||
myChart6 = echarts.init(document.getElementById(id));
|
||
var myChart = echarts.init(document.getElementById(id));
|
||
var option = {
|
||
color: colorList,
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
},
|
||
grid: {
|
||
left: '1%',
|
||
right: '1%',
|
||
top: '20%',
|
||
bottom: '5%',
|
||
containLabel: true
|
||
},
|
||
legend: {
|
||
top: 0,
|
||
left: 10,
|
||
icon:'circle',
|
||
textStyle: {
|
||
color: '#61798F' ,
|
||
lineHeight: 16,
|
||
fontSize: 13 ,
|
||
fontWeight : 600 ,
|
||
},
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: 'category',
|
||
axisLine: {
|
||
lineStyle:{
|
||
color:'#8A88B7',
|
||
}
|
||
},
|
||
axisLabel: {
|
||
color:'#8A88B7',
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
}
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: 'value',
|
||
axisLine: {
|
||
lineStyle:{
|
||
color:'#8A88B7',
|
||
}
|
||
},
|
||
axisLabel: {
|
||
color:'#8A88B7',
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
//网格样式
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle:{
|
||
color: '#8A88B7',
|
||
type: 'dashed',
|
||
opacity:0.3,
|
||
}
|
||
}
|
||
}
|
||
],
|
||
series: series
|
||
// ,
|
||
// series: [
|
||
// {
|
||
// name: data.name,
|
||
// type: 'bar',
|
||
// barWidth: '20%',
|
||
// barMinWidth: 10 ,
|
||
// data: data.value
|
||
// }
|
||
// ]
|
||
};
|
||
myChart6.clear();
|
||
myChart6.setOption(option, true);
|
||
}
|
||
|
||
function doBar2(id,data){
|
||
const colorList = ['#F0B253', '#397EFA', '#9E70C7', '#47C1C8', '#F55945', '#A84ECB'];
|
||
var series = new Array;
|
||
data.forEach(function(val,i){
|
||
series[i] = {
|
||
name: val.name,
|
||
type: 'bar',
|
||
barWidth: '20%',
|
||
barMinWidth: 10 ,
|
||
data: val.value
|
||
};
|
||
});
|
||
// 基于准备好的dom，初始化echarts实例
|
||
myChart7 = echarts.init(document.getElementById(id));
|
||
var myChart = echarts.init(document.getElementById(id));
|
||
var option = {
|
||
color: colorList,
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
},
|
||
grid: {
|
||
left: '1%',
|
||
right: '1%',
|
||
top: '20%',
|
||
bottom: '5%',
|
||
containLabel: true
|
||
},
|
||
legend: {
|
||
top: 0,
|
||
left: 10,
|
||
icon:'circle',
|
||
textStyle: {
|
||
color: '#61798F' ,
|
||
lineHeight: 16,
|
||
fontSize: 13 ,
|
||
fontWeight : 600 ,
|
||
},
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: 'category',
|
||
axisLine: {
|
||
lineStyle:{
|
||
color:'#8A88B7',
|
||
}
|
||
},
|
||
axisLabel: {
|
||
color:'#8A88B7',
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
}
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: 'value',
|
||
axisLine: {
|
||
lineStyle:{
|
||
color:'#8A88B7',
|
||
}
|
||
},
|
||
axisLabel: {
|
||
color:'#8A88B7',
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
//网格样式
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle:{
|
||
color: '#8A88B7',
|
||
type: 'dashed',
|
||
opacity:0.3,
|
||
}
|
||
}
|
||
}
|
||
],
|
||
series: series
|
||
// ,
|
||
// series: [
|
||
// {
|
||
// name: data.name,
|
||
// type: 'bar',
|
||
// barWidth: '20%',
|
||
// barMinWidth: 10 ,
|
||
// data: data.value
|
||
// }
|
||
// ]
|
||
};
|
||
myChart7.clear();
|
||
myChart7.setOption(option, true);
|
||
}
|
||
|
||
//巡检、维修、保养等完成率bar
|
||
function doendPie(id,data,colorNum){
|
||
const colorList = [ '#47C1C8', '#F5A623','#397EFB','#9E70C7','#347EFB', '#EBA043', '#A84ECB'];
|
||
var othVal = 100 - data.value;
|
||
myChart8 = echarts.init(document.getElementById(id));
|
||
var option = {
|
||
color: ['#F6F8F9'],
|
||
title: {
|
||
text: data.value+'%',
|
||
x: 'center',
|
||
y: 'center',
|
||
top:'25%',
|
||
textStyle: {
|
||
fontWeight: 'normal',
|
||
color: colorList[colorNum],
|
||
fontSize: fontSize(0.34)
|
||
},
|
||
subtext:'完好率',
|
||
subtextStyle: {
|
||
fontSize: fontSize(0.2),
|
||
fontWeight: 400,
|
||
color: '#A3A9AF',
|
||
} ,
|
||
},
|
||
legend: {
|
||
data:[data.name],
|
||
x: '14%',
|
||
y: '58%',
|
||
icon:'none',
|
||
textStyle: {
|
||
color: '#a3a9af' ,
|
||
lineHeight: 16,
|
||
fontSize: fontSize(0.24) ,
|
||
fontWeight : 600 ,
|
||
},
|
||
},
|
||
grid: {
|
||
top:0,
|
||
left:0,
|
||
right:0,
|
||
bottom:0,
|
||
},
|
||
series: [{
|
||
name: 'Line 1',
|
||
type: 'pie',
|
||
clockWise: true,
|
||
radius: ['65%', '83%'],
|
||
center: ['50%', '35%'],
|
||
itemStyle: {
|
||
normal: {
|
||
label: {
|
||
show: false
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
}
|
||
}
|
||
},
|
||
hoverAnimation: false,
|
||
data: [{
|
||
value: data.value,
|
||
name: data.name,
|
||
itemStyle: {
|
||
normal: {
|
||
color: colorList[colorNum],
|
||
label: {
|
||
show: false
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
}
|
||
}
|
||
}
|
||
}, {
|
||
name: '02',
|
||
value: othVal,
|
||
itemStyle: {
|
||
normal: {
|
||
color: '#0D436A',
|
||
label: {
|
||
show: false
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
}
|
||
}
|
||
}
|
||
}]
|
||
}]
|
||
}
|
||
myChart8.clear();
|
||
myChart8.setOption(option, true);
|
||
}
|
||
|
||
function doendPie2(id,data,colorNum){
|
||
const colorList = [ '#47C1C8', '#F5A623','#397EFB','#9E70C7','#347EFB', '#EBA043', '#A84ECB'];
|
||
var othVal = 100 - data.value;
|
||
myChart9 = echarts.init(document.getElementById(id));
|
||
var option = {
|
||
color: ['#F6F8F9'],
|
||
title: {
|
||
text: data.value+'%',
|
||
x: 'center',
|
||
y: 'center',
|
||
top:'25%',
|
||
textStyle: {
|
||
fontWeight: 'normal',
|
||
color: colorList[colorNum],
|
||
fontSize: fontSize(0.34)
|
||
},
|
||
subtext:'完好率',
|
||
subtextStyle: {
|
||
fontSize: fontSize(0.2),
|
||
fontWeight: 400,
|
||
color: '#A3A9AF',
|
||
} ,
|
||
},
|
||
legend: {
|
||
data:[data.name],
|
||
x: '14%',
|
||
y: '58%',
|
||
icon:'none',
|
||
textStyle: {
|
||
color: '#a3a9af' ,
|
||
lineHeight: 16,
|
||
fontSize: fontSize(0.24) ,
|
||
fontWeight : 600 ,
|
||
},
|
||
},
|
||
grid: {
|
||
top:0,
|
||
left:0,
|
||
right:0,
|
||
bottom:0,
|
||
},
|
||
series: [{
|
||
name: 'Line 1',
|
||
type: 'pie',
|
||
clockWise: true,
|
||
radius: ['65%', '83%'],
|
||
center: ['50%', '35%'],
|
||
itemStyle: {
|
||
normal: {
|
||
label: {
|
||
show: false
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
}
|
||
}
|
||
},
|
||
hoverAnimation: false,
|
||
data: [{
|
||
value: data.value,
|
||
name: data.name,
|
||
itemStyle: {
|
||
normal: {
|
||
color: colorList[colorNum],
|
||
label: {
|
||
show: false
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
}
|
||
}
|
||
}
|
||
}, {
|
||
name: '02',
|
||
value: othVal,
|
||
itemStyle: {
|
||
normal: {
|
||
color: '#0D436A',
|
||
label: {
|
||
show: false
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
}
|
||
}
|
||
}
|
||
}]
|
||
}]
|
||
}
|
||
myChart9.clear();
|
||
myChart9.setOption(option, true);
|
||
}
|
||
|
||
function doendPie3(id,data,colorNum){
|
||
const colorList = [ '#47C1C8', '#F5A623','#397EFB','#9E70C7','#347EFB', '#EBA043', '#A84ECB'];
|
||
var othVal = 100 - data.value;
|
||
myChart10 = echarts.init(document.getElementById(id));
|
||
var option = {
|
||
color: ['#F6F8F9'],
|
||
title: {
|
||
text: data.value+'%',
|
||
x: 'center',
|
||
y: 'center',
|
||
top:'25%',
|
||
textStyle: {
|
||
fontWeight: 'normal',
|
||
color: colorList[colorNum],
|
||
fontSize: fontSize(0.34)
|
||
},
|
||
subtext:'完好率',
|
||
subtextStyle: {
|
||
fontSize: fontSize(0.2),
|
||
fontWeight: 400,
|
||
color: '#A3A9AF',
|
||
} ,
|
||
},
|
||
legend: {
|
||
data:[data.name],
|
||
x: '14%',
|
||
y: '58%',
|
||
icon:'none',
|
||
textStyle: {
|
||
color: '#a3a9af' ,
|
||
lineHeight: 16,
|
||
fontSize: fontSize(0.24) ,
|
||
fontWeight : 600 ,
|
||
},
|
||
},
|
||
grid: {
|
||
top:0,
|
||
left:0,
|
||
right:0,
|
||
bottom:0,
|
||
},
|
||
series: [{
|
||
name: 'Line 1',
|
||
type: 'pie',
|
||
clockWise: true,
|
||
radius: ['65%', '83%'],
|
||
center: ['50%', '35%'],
|
||
itemStyle: {
|
||
normal: {
|
||
label: {
|
||
show: false
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
}
|
||
}
|
||
},
|
||
hoverAnimation: false,
|
||
data: [{
|
||
value: data.value,
|
||
name: data.name,
|
||
itemStyle: {
|
||
normal: {
|
||
color: colorList[colorNum],
|
||
label: {
|
||
show: false
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
}
|
||
}
|
||
}
|
||
}, {
|
||
name: '02',
|
||
value: othVal,
|
||
itemStyle: {
|
||
normal: {
|
||
color: '#0D436A',
|
||
label: {
|
||
show: false
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
}
|
||
}
|
||
}
|
||
}]
|
||
}]
|
||
}
|
||
myChart10.clear();
|
||
myChart10.setOption(option, true);
|
||
}
|
||
function doAlarmTable(){
|
||
$.post(ext.contextPath + '/work/largerScreen/getAlarm.do' ,{unitId:unitId}, function(data) {
|
||
// console.log(data);
|
||
var html="";
|
||
html+="<table style='width: 100%;height: calc(100% - 70px);border-collapse: collapse; padding:2px;'>";
|
||
html+="<tr style='height:20%;font-size: 14px;color: #61798f;text-align:center;background:#ECF0F5;border:1px solid #ddd;' >";
|
||
html+="<td width='15%'>当前状态</td>";
|
||
html+="<td width='20%'>发生时间</td>";
|
||
html+="<td width='15%'>确认人</td>";
|
||
html+="<td >报警/异常内容</td>";
|
||
html+="</tr>";
|
||
|
||
if(data!=''){
|
||
for(var n=0;n<data.length;n++){
|
||
if(n%2==0){
|
||
html+="<tr style='height:16%;font-size: 14px;color: #61798f;text-align:center;background:#ffffff;border:1px solid #ddd;' >";
|
||
}else{
|
||
html+="<tr style='height:16%;font-size: 14px;color: #61798f;text-align:center;background:#ECF0F5;border:1px solid #ddd;' >";
|
||
}
|
||
if(data[n].status=='${Status_N}'){
|
||
html+="<td width='15%' >新报警</td>";
|
||
}else if(data[n].status=='${Status_C}'){
|
||
html+="<td width='15%' >已确认</td>";
|
||
}else if(data[n].status=='${Status_Y}'){
|
||
html+="<td width='15%' >已恢复</td>";
|
||
}else{
|
||
html+="<td width='15%' ></td>";
|
||
}
|
||
html+="<td width='20%' >"+data[n].alarmtime.substring(0,16)+"</td>";
|
||
if(data[n].confirmerunit!=null){
|
||
html+="<td width='15%' >"+data[n].confirmerunit.sname+"</td>";
|
||
}else{
|
||
html+="<td width='15%' ></td>";
|
||
}
|
||
html+="<td >"+data[n].describe+"</td>";
|
||
html+="</tr>";
|
||
}
|
||
|
||
if((5-data.length)>0){
|
||
}else{
|
||
for(var n=0;n<(5-data.length);n++){
|
||
if(n%2==0){
|
||
html+="<tr style='height:16%;font-size: 14px;color: #61798f;text-align:center;background:#ffffff;border:1px solid #ddd;' >";
|
||
}else{
|
||
html+="<tr style='height:16%;font-size: 14px;color: #61798f;text-align:center;background:#ECF0F5;border:1px solid #ddd;' >";
|
||
}
|
||
html+="<td width='15%' ></td>";
|
||
html+="<td width='20%' ></td>";
|
||
html+="<td width='15%' ></td>";
|
||
html+="<td ></td>";
|
||
html+="</tr>";
|
||
}
|
||
|
||
}
|
||
}else{
|
||
for(var n=0;n<5;n++){
|
||
if(n%2==0){
|
||
html+="<tr style='height:16%;font-size: 14px;color: #61798f;text-align:center;background:#ffffff;border:1px solid #ddd;' >";
|
||
}else{
|
||
html+="<tr style='height:16%;font-size: 14px;color: #61798f;text-align:center;background:#ECF0F5;border:1px solid #ddd;' >";
|
||
}
|
||
html+="<td width='15%' ></td>";
|
||
html+="<td width='20%' ></td>";
|
||
html+="<td width='15%' ></td>";
|
||
html+="<td ></td>";
|
||
html+="</tr>";
|
||
}
|
||
}
|
||
|
||
html+="</table>";
|
||
|
||
$('#alarmNews').html(html);
|
||
},'json');
|
||
|
||
}
|
||
|
||
|
||
function getSCQKtable(){
|
||
$.post(ext.contextPath + '/work/largerScreen/getSCQK.do', {column:1,unitId:unitId} , function(data) {
|
||
// console.log(data);
|
||
|
||
var html="";
|
||
html+="<table style='width: 100%;height: 100%;border-collapse: collapse;'>";
|
||
for(var key in data){
|
||
var num=0;
|
||
for(var key1 in data[key]){
|
||
if(num<6){
|
||
var name=key1;
|
||
var value=data[key][key1][0];
|
||
|
||
html+="<div class='lable-left2' title='"+name+"'>"+name+"</div>"
|
||
html+="<div class='lable-right2' title='"+value+"'> "+value+"</div>"
|
||
}
|
||
num++;
|
||
}
|
||
if(6-num>0){
|
||
for(var i=0;i<(6-num);i++){
|
||
html+="<div class='lable-left2'></div>"
|
||
html+="<div class='lable-right2'> </div>"
|
||
}
|
||
}
|
||
}
|
||
html+="</table>";
|
||
$('#SCQK1').html(html);
|
||
},'json');
|
||
|
||
$.post(ext.contextPath + '/work/largerScreen/getSCQK.do', {column:2,unitId:unitId} , function(data) {
|
||
// console.log(data);
|
||
|
||
var html="";
|
||
html+="<table style='width: 100%;height: 100%;border-collapse: collapse;'>";
|
||
for(var key in data){
|
||
var num=0;
|
||
for(var key1 in data[key]){
|
||
if(num<6){
|
||
var name=key1;
|
||
var value=data[key][key1][0];
|
||
html+="<div class='lable-left2' title='"+name+"'>"+name+"</div>"
|
||
html+="<div class='lable-right2' title='"+value+"'> "+value+"</div>"
|
||
}
|
||
// console.log(name+":"+value);
|
||
num++;
|
||
}
|
||
if(6-num>0){
|
||
for(var i=0;i<(6-num);i++){
|
||
html+="<div class='lable-left2'></div>"
|
||
html+="<div class='lable-right2'> </div>"
|
||
}
|
||
}
|
||
}
|
||
html+="</table>";
|
||
$('#SCQK2').html(html);
|
||
},'json');
|
||
|
||
$.post(ext.contextPath + '/work/largerScreen/getSCQK.do', {column:3,unitId:unitId} , function(data) {
|
||
// console.log(data);
|
||
|
||
var html="";
|
||
html+="<table style='width: 100%;height: 100%;border-collapse: collapse;'>";
|
||
for(var key in data){
|
||
var num=0;
|
||
for(var key1 in data[key]){
|
||
if(num<6){
|
||
var name=key1;
|
||
var value=data[key][key1][0];
|
||
html+="<div class='lable-left2' title='"+name+"'>"+name+"</div>"
|
||
html+="<div class='lable-right2' title='"+value+"'> "+value+"</div>"
|
||
}
|
||
// console.log(name+":"+value);
|
||
num++;
|
||
}
|
||
if(6-num>0){
|
||
for(var i=0;i<(6-num);i++){
|
||
html+="<div class='lable-left2'></div>"
|
||
html+="<div class='lable-right2'> </div>"
|
||
}
|
||
}
|
||
}
|
||
html+="</table>";
|
||
$('#SCQK3').html(html);
|
||
},'json');
|
||
|
||
}
|
||
|
||
function getZRCLL(){
|
||
$.post(ext.contextPath + '/work/largerScreen/getZRCLL.do', {unitId:unitId} , function(data) {
|
||
|
||
$('#yesterday').text(data+"万吨/日");
|
||
|
||
});
|
||
}
|
||
|
||
function getcomplianceRate(){
|
||
$.post(ext.contextPath + '/work/largerScreen/getcomplianceRate.do', {type:'进水达标率',unitId:unitId} , function(data) {
|
||
dogauge("in",data,'进水达标率');
|
||
$('#intrue').text(data+"%");
|
||
});
|
||
// $.post(ext.contextPath + '/work/largerScreen/getcomplianceRate.do', {type:'出水达标率',unitId:unitId} , function(data) {
|
||
// dogauge("out",data,'出水达标率');
|
||
// $('#outtrue').text(data+"%");
|
||
// });
|
||
}
|
||
|
||
function getLineData(){
|
||
var lineTableHtml="";
|
||
$.post(ext.contextPath + '/work/largerScreen/getLineData.do', {type:'折线图1',unitId:unitId} , function(data) {
|
||
// console.log(data);
|
||
var datas = data;
|
||
doline("Line1",datas);
|
||
},'json');
|
||
|
||
$.post(ext.contextPath + '/work/largerScreen/getLineData.do', {type:'折线图2',unitId:unitId} , function(data) {
|
||
// console.log(data);
|
||
var datas = data;
|
||
doline2("Line2",datas);
|
||
},'json');
|
||
}
|
||
|
||
function getBarData(){
|
||
$.post(ext.contextPath + '/work/largerScreen/getBarData.do', {type:'柱状图1',unitId:unitId} , function(data) {
|
||
// console.log(data);
|
||
var datas = data;
|
||
doBar("Bar1",datas);
|
||
},'json');
|
||
|
||
$.post(ext.contextPath + '/work/largerScreen/getBarData.do', {type:'柱状图2',unitId:unitId} , function(data) {
|
||
// console.log(data);
|
||
var datas = data;
|
||
doBar2("Bar2",datas);
|
||
},'json');
|
||
}
|
||
|
||
function getPtData(){
|
||
$.post(ext.contextPath + '/work/largerScreen/getEqData.do', function(data) {
|
||
// console.log(data);
|
||
if(data.length>0){
|
||
doequgood("equ-good",data[0].eqintactrate);
|
||
$('#equNum').text(data[0].eqtotalnum);
|
||
var eqTypedata = [
|
||
{name: 'A类设备数量', value: data[0].eqanum},
|
||
{name: 'B类设备数量', value: data[0].eqbnum},
|
||
{name: 'C类设备数量', value: data[0].eqcnum},
|
||
];
|
||
doequtype("equ-type",eqTypedata);
|
||
|
||
var xjPie = {name:"巡检",value:data[0].xjintactrate};
|
||
doendPie("xjPie",xjPie,0);
|
||
$('#xjNum').text(data[0].xjnum);
|
||
$('#xjWorkHour').text(data[0].xjworkhour+"h");
|
||
var wxPie = {name:"维修",value:data[0].wxintactrate};
|
||
doendPie2("wxPie",wxPie,1);
|
||
$('#wxNum').text(data[0].wxnum);
|
||
$('#wxWorkHour').text(data[0].wxworkhour+"h");
|
||
var byPie = {name:"保养",value:data[0].byintactrate};
|
||
doendPie3("byPie",byPie,2);
|
||
$('#byNum').text(data[0].bynum);
|
||
$('#byWorkHour').text(data[0].byworkhour+"h");
|
||
|
||
}
|
||
},'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 showView(){
|
||
getSCQKtable();//生产情况
|
||
getZRCLL();//昨日处理量
|
||
getcomplianceRate();//达标率
|
||
getLineData();//折线图
|
||
getBarData();//折线图
|
||
getPtData();
|
||
doAlarmTable();
|
||
}
|
||
|
||
$(function() {
|
||
setTimeout(function(){
|
||
showView();
|
||
|
||
window.addEventListener("resize", function () {
|
||
myChart1.resize();
|
||
myChart2.resize();
|
||
myChart3.resize();
|
||
myChart4.resize();
|
||
myChart5.resize();
|
||
myChart6.resize();
|
||
myChart7.resize();
|
||
myChart8.resize();
|
||
myChart9.resize();
|
||
myChart10.resize();
|
||
});
|
||
},1000);
|
||
});
|
||
|
||
</script>
|
||
|
||
</head>
|
||
<body class="hold-transition ${cu.themeclass} sidebar-mini" style="overflow: hidden;">
|
||
<div id="mainDiv" class="content-wrapper mainDiv" style="margin-left:0px;height:100%;padding-top:20px;">
|
||
<!-- Content Header (Page header)background-color:#172737; -->
|
||
<!-- <section class="content-header">
|
||
<h1 id ="head_title"></h1>
|
||
<ol class="breadcrumb">
|
||
<li><a id ='head_firstlevel' href="#"><i class="fa fa-refresh"></i> </a></li>
|
||
</ol>
|
||
</section> -->
|
||
<!-- Main content -->
|
||
<!-- <section class="content container-fluid"> -->
|
||
<div id="mainAlertdiv"></div>
|
||
<div id="subDiv"></div>
|
||
<div id="menu4SelectDiv"></div>
|
||
<div style="height:30%;float:left;width:100%;">
|
||
<div class="rowDiv" style="width:25%;float:left;padding-left: 20px;">
|
||
<div class="box-white" style="height:100%;width:100%;float:left;">
|
||
<div style="float: left;width: 100%;height: 45px;">
|
||
<div>
|
||
<h4 class="titleView"><i style="color:#399cff;" class="fa fa-home"></i> 横岭水质净化厂(二期)</h4>
|
||
</div>
|
||
<div style="width: 100%;float: left;">
|
||
<div class="title-left"></div>
|
||
<div class="title-right"></div>
|
||
</div>
|
||
</div>
|
||
<!-- <div class="yesterday" >
|
||
<div class="yesterday-title">昨日处理量</div>
|
||
<div class="yesterday-num" id="yesterday"></div>
|
||
</div> -->
|
||
<div style="width: 100%;height: calc(100% - 45px);float: left;">
|
||
<div style="width: 100%;">
|
||
<div class="lable-left">投运日期：</div>
|
||
<div class="lable-right">2011年</div>
|
||
<div class="lable-left">运营形式：</div>
|
||
<div class="lable-right">TOT</div>
|
||
<div class="lable-left">设计水量：</div>
|
||
<div class="lable-right">40万吨/天</div>
|
||
<div class="lable-left">占地面积：</div>
|
||
<div class="lable-right">6.25公顷</div>
|
||
<div class="lable-left">处理工艺：</div>
|
||
<div class="lable-right" title="曝气生物滤池(BAF)+深床反硝化+微砂沉淀工艺">曝气生物滤池(BAF)+深床反硝化+微砂沉淀工艺</div>
|
||
<div class="lable-left">排放标准：</div>
|
||
<div class="lable-right">一级A</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="rowDiv" style="width:75%;float:left;padding-left: 20px;padding-right: 10px;">
|
||
<div class="box-white" style="height: 100%;width:100%;float:left;">
|
||
<div style="float: left;width: 100%;height: 45px;">
|
||
<div >
|
||
<h4 class="titleView"><i style="color:#399cff;" class="fa fa-line-chart"></i> 生产情况</h4>
|
||
<!-- /.box-tools -->
|
||
</div>
|
||
<div style="width: 100%;float: left;">
|
||
<div class="title-left"></div>
|
||
<div class="title-right"></div>
|
||
</div>
|
||
</div>
|
||
<!-- /.box-header -->
|
||
<div style="float: left;width: 100%;height: calc(100% - 45px);">
|
||
<div class="box-white" style="width: 100%;height:100%;float: left;" >
|
||
<div style="height:100%;float:left;width: 26%;">
|
||
<div id="SCQK1" style="height:100%"></div>
|
||
</div>
|
||
<div style="height:100%;float:left;width: 26%;">
|
||
<div id="SCQK2" style="height:100%"></div>
|
||
</div>
|
||
<div style="height:100%;float:left;width: 26%;">
|
||
<div id="SCQK3" style="height:100%"></div>
|
||
</div>
|
||
<div style="height:100%;float:left;width: 20%;">
|
||
<div style="width:110%;height:80%" id="in"></div>
|
||
<div style="width:100%;height:80px;text-align: center;">
|
||
<div class="col-md-12" style="margin-top:12px;">
|
||
<span class="lable-left2" >实际值：</span>
|
||
<span class="lable-right2" id="intrue"></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style="height:33.3%;float:left;width:100%;margin-top:10px;">
|
||
<div class="rowDiv" style="width:25%;float:left;padding-left: 20px;">
|
||
<div class="box-white" style="height:100%;width:100%;float:left;">
|
||
<div style="width: 100%;height: 45px;float: left;">
|
||
<div >
|
||
<h4 class="titleView"><i style="color:#399cff;" class="fa fa-laptop"></i> 设备统计</h4>
|
||
<div class="box-tools pull-right">
|
||
|
||
</div>
|
||
<!-- /.box-tools -->
|
||
</div>
|
||
<div style="width: 100%;float: left;">
|
||
<div class="title-left"></div>
|
||
<div class="title-right"></div>
|
||
</div>
|
||
</div>
|
||
<!-- /.box-header -->
|
||
<div style="width: 100%;height: calc(100% - 45px);float: left;">
|
||
<div style="height:50%;width: 100%;">
|
||
<div style="float: left;width: 50%;height: 100%;">
|
||
<span class="eqLable-num" id="equNum"></span>
|
||
<span class="eqLable-title">总设备数量</span>
|
||
</div>
|
||
<div id="equ-good" style="float: left;width: 50%;height:100%"></div>
|
||
</div>
|
||
<div style="height:50%;width: 100%;">
|
||
<div id="equ-type" style="height:100%;"></div>
|
||
</div>
|
||
</div>
|
||
<!-- /.box-body -->
|
||
</div>
|
||
</div>
|
||
<div class="rowDiv" style="width:75%;float:left;padding-left: 20px;padding-right: 10px;">
|
||
<div class="box-white" style="height:100%;width:100%;float:left;">
|
||
<div style="float: left;width: 100%;height: 45px;">
|
||
<div >
|
||
<h4 class="titleView"><i style="color:#399cff;" class="fa fa-line-chart"></i> 曲线分析</h4>
|
||
<!-- /.box-tools -->
|
||
</div>
|
||
<div style="width: 100%;float: left;">
|
||
<div class="title-left"></div>
|
||
<div class="title-right"></div>
|
||
</div>
|
||
</div>
|
||
<div class="box-body" style="height:calc(100% - 45px);">
|
||
<div style="float:left;width:50%;height: 100%;">
|
||
<div id="lineTable" style="float: left;width: 100%;height: 30px;">
|
||
<div style="float:left;text-align: center;width: 80px;height: 30px;line-height: 30px;background-color: #00CCCC;margin-left: 15px;border-radius: 6px;cursor: pointer;">参数1</div>
|
||
<div style="float:left;text-align: center;width: 80px;height: 30px;line-height: 30px;background-color: #c4e2e6;margin-left: 15px;border-radius: 6px;cursor: pointer;">参数2</div>
|
||
<div style="float:left;text-align: center;width: 80px;height: 30px;line-height: 30px;background-color: #c4e2e6;margin-left: 15px;border-radius: 6px;cursor: pointer;">参数3</div>
|
||
</div>
|
||
<div id="lineChart" style="float: left;width: 100%;height:calc(100% - 30px);"></div>
|
||
</div>
|
||
<div style="float:left;width:50%;height: 100%;">
|
||
</div>
|
||
<!-- <div class="row" style="height:50%;">
|
||
<div style="float: left;height: 100%;width:47%;" id="Line1"></div>
|
||
<div style="float: left;height: 100%;width:53%;" id="Bar1"></div>
|
||
</div>
|
||
<div class="row" style="height:50%;">
|
||
<div style="float: left;height: 100%;width:47%;" id="Line2"></div>
|
||
<div style="float: left;height: 100%;width:53%;" id="Bar2"></div>
|
||
</div> -->
|
||
</div>
|
||
<!-- /.box-body -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style="height:30%;float:left;width:100%;margin-top:10px;">
|
||
<div class="rowDiv" style="width:60%;float:left;padding-left: 20px;">
|
||
<div class="box-white" style="height: 100%;width:100%;float:left;">
|
||
<div >
|
||
<h4 class="titleView"><i style="color:#399cff;" class="fa fa-edit"></i> 工单统计</h4>
|
||
<div class="box-tools pull-right">
|
||
|
||
</div>
|
||
<!-- /.box-tools -->
|
||
</div>
|
||
<div style="width: 100%;float: left;">
|
||
<div class="title-left"></div>
|
||
<div class="title-right"></div>
|
||
</div>
|
||
<!-- /.box-header -->
|
||
<div style="height:100%;width: 100%;float: left;">
|
||
<div style="height:100%;width:16.6%;float:left;padding:0;" id="xjPie"></div>
|
||
<div style="height:100%;width:16.6%;float:left;">
|
||
<span id="xjNum" class="gdLable-num"></span>
|
||
<span class="gdLable-title">巡检数</span>
|
||
<span id="xjWorkHour" class="gdLable-num"></span>
|
||
<span class="gdLable-title">工时数</span>
|
||
</div>
|
||
<div style="height:100%;width:16.6%;float:left;padding:0;" id="wxPie"></div>
|
||
<div style="height:100%;width:16.6%;float:left;">
|
||
<span id="wxNum" class="gdLable-num"></span>
|
||
<span class="gdLable-title">维修数</span>
|
||
<span id="wxWorkHour" class="gdLable-num"></span>
|
||
<span class="gdLable-title">工时数</span>
|
||
</div>
|
||
<div style="height:100%;width:16.6%;float:left;padding:0;" id="byPie"></div>
|
||
<div style="height:100%;width:16.6%;float:left;">
|
||
<span id="byNum" class="gdLable-num"></span>
|
||
<span class="gdLable-title">保养数</span>
|
||
<span id="byWorkHour" class="gdLable-num"></span>
|
||
<span class="gdLable-title">工时数</span>
|
||
</div>
|
||
</div>
|
||
<!-- /.box-body -->
|
||
</div>
|
||
</div>
|
||
<div class="rowDiv" style="width:40%;float:left;padding-left: 10px;padding-right: 10px;">
|
||
<div class="box-white" style="height: 100%;width:100%;float:left;">
|
||
<div >
|
||
<h4 class="titleView"><i style="color:#399cff;" class="fa fa-bell"></i> 报警及异常</h4>
|
||
<div class="box-tools pull-right">
|
||
|
||
</div>
|
||
<!-- /.box-tools -->
|
||
</div>
|
||
<div>
|
||
<div class="title-left"></div>
|
||
<div class="title-right"></div>
|
||
</div>
|
||
<!-- /.box-header -->
|
||
<div id="alarmNews" class="box-body" style="height:100%;">
|
||
</div>
|
||
<!-- /.box-body -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- </section> -->
|
||
<!-- /.content -->
|
||
</div>
|
||
</body>
|
||
</html> |