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>
|