1874 lines
74 KiB
Plaintext
1874 lines
74 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.tools.Mqtt" %>
|
|||
|
|
<%@ page import="org.springframework.context.ApplicationContext" %>
|
|||
|
|
<%@ page import="org.springframework.web.context.support.WebApplicationContextUtils" %>
|
|||
|
|
<% ApplicationContext ctx = WebApplicationContextUtils.getWebApplicationContext(request.getServletContext());
|
|||
|
|
Mqtt mqtt = (Mqtt) ctx.getBean("mqtt");
|
|||
|
|
request.setAttribute("mqttStatus", mqtt.getStatus());
|
|||
|
|
request.setAttribute("hostWeb", mqtt.getHostWeb()); %>
|
|||
|
|
|
|||
|
|
<!DOCTYPE html>
|
|||
|
|
<!-- <html lang="zh-CN"> -->
|
|||
|
|
<!-- BEGIN HEAD -->
|
|||
|
|
|
|||
|
|
<head>
|
|||
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
|||
|
|
<meta http-equiv = "X-UA-Compatible" content = "IE=edge,chrome=1" />
|
|||
|
|
<title>
|
|||
|
|
<%= ServerObject.atttable.get("TOPTITLE")%>
|
|||
|
|
</title>
|
|||
|
|
<!-- 引用页头及CSS页-->
|
|||
|
|
<jsp:include page="/jsp/inc.jsp"></jsp:include>
|
|||
|
|
<script type="text/javascript" src="<%=request.getContextPath()%>/plugins/bootstrap-daterangepicker/moment.min.js"
|
|||
|
|
charset="utf-8"></script>
|
|||
|
|
<%-- mqtt依赖--%>
|
|||
|
|
<script src="<%=request.getContextPath()%>/JS/mqtt/mqtt.min.js" type="text/javascript"></script>
|
|||
|
|
<style type="text/css">
|
|||
|
|
.whole-body{
|
|||
|
|
width: 1920px;
|
|||
|
|
height: 1080px;
|
|||
|
|
padding: 15px 20px;
|
|||
|
|
background-image: url(<%=request.getContextPath()%>/IMG/changGang/processSimulationBg.png);
|
|||
|
|
background-size: 100% 100%;
|
|||
|
|
background-repeat:no-repeat;
|
|||
|
|
background-position:center center;
|
|||
|
|
}
|
|||
|
|
.content-wrapper-bg{
|
|||
|
|
}
|
|||
|
|
.content-wrapper-bg-darkblue{
|
|||
|
|
}
|
|||
|
|
.box-title{
|
|||
|
|
background-image: url(<%=request.getContextPath()%>/IMG/changGang/title.png);
|
|||
|
|
padding-left: 50px;
|
|||
|
|
width: 305px;
|
|||
|
|
height: 38px;
|
|||
|
|
}
|
|||
|
|
.box-header {
|
|||
|
|
padding: 0px;
|
|||
|
|
}
|
|||
|
|
.whole-element-bg{
|
|||
|
|
width: 100%;
|
|||
|
|
min-height: 30.6vh;
|
|||
|
|
background: rgba(0,0,0,0.5);
|
|||
|
|
border: 1px solid #707070;
|
|||
|
|
}
|
|||
|
|
.whole-element-bg+.whole-element-bg{
|
|||
|
|
margin-top: 9px;
|
|||
|
|
}
|
|||
|
|
.whole-element,.left-equ-number{
|
|||
|
|
position: absolute;
|
|||
|
|
}
|
|||
|
|
.box.box-transparent {
|
|||
|
|
background: transparent;
|
|||
|
|
border-top: 0;
|
|||
|
|
margin-bottom: 0;
|
|||
|
|
padding: 0 10px;
|
|||
|
|
}
|
|||
|
|
.box.box-transparent .box-header {
|
|||
|
|
color: #FFFFFF;
|
|||
|
|
}
|
|||
|
|
.box-body {
|
|||
|
|
padding: 5px 0px;
|
|||
|
|
}
|
|||
|
|
.whole-left{
|
|||
|
|
top: 200px;
|
|||
|
|
left: 30px;
|
|||
|
|
}
|
|||
|
|
.opacity-4{
|
|||
|
|
opacity: 0.4;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.opacity-7{
|
|||
|
|
opacity: 0.7;
|
|||
|
|
}
|
|||
|
|
.p1-data{
|
|||
|
|
width: 300px;
|
|||
|
|
height: 300px;
|
|||
|
|
top: 497px;
|
|||
|
|
left: 375px;
|
|||
|
|
}
|
|||
|
|
.p1-data-element{
|
|||
|
|
width: 120px;
|
|||
|
|
height: 40px;
|
|||
|
|
}
|
|||
|
|
.now-people-number-element{
|
|||
|
|
top: 50px;
|
|||
|
|
left: 25px;
|
|||
|
|
}
|
|||
|
|
.max-bear-capacity-element{
|
|||
|
|
top: 50px;
|
|||
|
|
left: 155px;
|
|||
|
|
}
|
|||
|
|
.p1-temperature{
|
|||
|
|
top: 210px;
|
|||
|
|
left: 20px;
|
|||
|
|
}
|
|||
|
|
.p1-humidity{
|
|||
|
|
top: 210px;
|
|||
|
|
left: 160px;
|
|||
|
|
}
|
|||
|
|
.p-data{
|
|||
|
|
width: 500px;
|
|||
|
|
height: 315px;
|
|||
|
|
}
|
|||
|
|
.p2-data{
|
|||
|
|
top: 125px;
|
|||
|
|
left: 275px;
|
|||
|
|
}
|
|||
|
|
.p3-data{
|
|||
|
|
top: 125px;
|
|||
|
|
left: 795px;
|
|||
|
|
}
|
|||
|
|
.p4-data{
|
|||
|
|
top: 125px;
|
|||
|
|
left: 1318px;
|
|||
|
|
}
|
|||
|
|
.p-data-title{
|
|||
|
|
width: 500px;
|
|||
|
|
height: 60px;
|
|||
|
|
}
|
|||
|
|
.p-data-pie{
|
|||
|
|
width: 500px;
|
|||
|
|
height: 105px;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
.p-data-pie-number{
|
|||
|
|
width: 80px;
|
|||
|
|
height: 28px;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
.p-data-pie-number-top{
|
|||
|
|
top: 28px;
|
|||
|
|
}
|
|||
|
|
.p2-temperature,.p3-temperature,.p4-temperature{
|
|||
|
|
left: 22px;
|
|||
|
|
}
|
|||
|
|
.p2-humidity,.p3-humidity,.p4-humidity{
|
|||
|
|
left: 115px;
|
|||
|
|
}
|
|||
|
|
.p2-co2,.p3-co2,.p4-co2{
|
|||
|
|
left: 210px;
|
|||
|
|
}
|
|||
|
|
.p2-windSpeed,.p3-windSpeed,.p4-windSpeed{
|
|||
|
|
left: 304px;
|
|||
|
|
}
|
|||
|
|
.p2-illuminance,.p3-illuminance,.p4-illuminance{
|
|||
|
|
left: 397px;
|
|||
|
|
}
|
|||
|
|
.p-data-line{
|
|||
|
|
width: 500px;
|
|||
|
|
height: 150px;
|
|||
|
|
}
|
|||
|
|
.p-url{
|
|||
|
|
width: 155px;
|
|||
|
|
height: 40px;
|
|||
|
|
}
|
|||
|
|
.p2-url{
|
|||
|
|
top: 557px;
|
|||
|
|
left: 788px;
|
|||
|
|
}
|
|||
|
|
.p3-url{
|
|||
|
|
top: 515px;
|
|||
|
|
left: 1180px;
|
|||
|
|
}
|
|||
|
|
.p4-url{
|
|||
|
|
top: 724px;
|
|||
|
|
left: 1510px;
|
|||
|
|
}
|
|||
|
|
.content-left, .content-right{
|
|||
|
|
float: left;
|
|||
|
|
padding:0;
|
|||
|
|
}
|
|||
|
|
.content-left{
|
|||
|
|
width: 810px;
|
|||
|
|
}
|
|||
|
|
.content-right{
|
|||
|
|
width: 2380px;
|
|||
|
|
}
|
|||
|
|
.content-right-subject{
|
|||
|
|
min-height: 215px;
|
|||
|
|
}
|
|||
|
|
.content-bg-darkblue{
|
|||
|
|
background: rgba(12,12,12,0.60);
|
|||
|
|
}
|
|||
|
|
.homePage-btn{
|
|||
|
|
cursor:pointer;
|
|||
|
|
background: rgba(54,167,204,0.70);
|
|||
|
|
border-radius: 10px;
|
|||
|
|
}
|
|||
|
|
.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9,
|
|||
|
|
.col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9,
|
|||
|
|
.col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9,
|
|||
|
|
.col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9,
|
|||
|
|
.col-xs-1-5 {
|
|||
|
|
padding-right: 5px;
|
|||
|
|
padding-left: 5px
|
|||
|
|
}
|
|||
|
|
.col-xs-1-5 {
|
|||
|
|
width: 12%;
|
|||
|
|
}
|
|||
|
|
.col-xs-1-5{
|
|||
|
|
float: left;
|
|||
|
|
}
|
|||
|
|
.col-xs-1-5 {
|
|||
|
|
position: relative;
|
|||
|
|
min-height: 1px;
|
|||
|
|
}
|
|||
|
|
.title-height{
|
|||
|
|
height:70px;
|
|||
|
|
}
|
|||
|
|
.row-10{
|
|||
|
|
height:10%;
|
|||
|
|
}
|
|||
|
|
.row-15{
|
|||
|
|
height:15%;
|
|||
|
|
}
|
|||
|
|
.row-25{
|
|||
|
|
height:25%;
|
|||
|
|
}
|
|||
|
|
.row-30{
|
|||
|
|
height:30%;
|
|||
|
|
}
|
|||
|
|
.row-35{
|
|||
|
|
height:35%;
|
|||
|
|
}
|
|||
|
|
.row-40{
|
|||
|
|
height:40%;
|
|||
|
|
}
|
|||
|
|
.row-50{
|
|||
|
|
height:50%;
|
|||
|
|
}
|
|||
|
|
.row-70{
|
|||
|
|
height:70%;
|
|||
|
|
}
|
|||
|
|
.row-75{
|
|||
|
|
height:75%;
|
|||
|
|
}
|
|||
|
|
.row-100{
|
|||
|
|
height:100%;
|
|||
|
|
}
|
|||
|
|
.content-wrapper-bg-grey{
|
|||
|
|
background: #eeeeee;
|
|||
|
|
}
|
|||
|
|
.content-wrapper-bg-white,.bgcolor-white,.bgcolor-white-light{
|
|||
|
|
background: #ffffff;
|
|||
|
|
border-radius: 5px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.content-wrapper-bg-white,.content-wrapper-bg-transparent{
|
|||
|
|
margin:0 5px;
|
|||
|
|
border-radius: 5px;
|
|||
|
|
}
|
|||
|
|
.bgcolor-blue{
|
|||
|
|
background: #052941;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.margin-bottom-15{
|
|||
|
|
margin-bottom: 15px;
|
|||
|
|
}
|
|||
|
|
.margin-bottom-22{
|
|||
|
|
margin-bottom: 22px;
|
|||
|
|
}
|
|||
|
|
.margin-bottom-25{
|
|||
|
|
margin-bottom: 25px;
|
|||
|
|
}
|
|||
|
|
.margin-bottom-36{
|
|||
|
|
margin-bottom: 22px;
|
|||
|
|
}
|
|||
|
|
.margin-bottom-55{
|
|||
|
|
margin-bottom: 55px;
|
|||
|
|
}
|
|||
|
|
.margin-bottom-75{
|
|||
|
|
margin-bottom: 75px;
|
|||
|
|
}
|
|||
|
|
.margin-right-10{
|
|||
|
|
margin-right: 10px;
|
|||
|
|
}
|
|||
|
|
.padding-topbottom-35{
|
|||
|
|
padding-top: 35px;
|
|||
|
|
padding-bottom: 35px;
|
|||
|
|
}
|
|||
|
|
.pad-topbottom-60{
|
|||
|
|
padding-top: 60px;
|
|||
|
|
padding-bottom: 60px;
|
|||
|
|
}
|
|||
|
|
.padding-topbottom-15{
|
|||
|
|
padding-top: 15px;
|
|||
|
|
padding-bottom: 15px;
|
|||
|
|
}
|
|||
|
|
.padding-topbottom-10{
|
|||
|
|
padding-top: 10px;
|
|||
|
|
padding-bottom: 10px;
|
|||
|
|
}
|
|||
|
|
.padding-leftright-15{
|
|||
|
|
padding-left: 15px;
|
|||
|
|
padding-right: 15px;
|
|||
|
|
}
|
|||
|
|
.padding-left-15{
|
|||
|
|
padding-left: 15px;
|
|||
|
|
}
|
|||
|
|
.padding-left-20{
|
|||
|
|
padding-left: 20px;
|
|||
|
|
}
|
|||
|
|
.pad-leftright-72{
|
|||
|
|
padding-left: 72px;
|
|||
|
|
padding-right: 72px;
|
|||
|
|
}
|
|||
|
|
.pad-bottom-10{
|
|||
|
|
padding-bottom: 10px;
|
|||
|
|
}
|
|||
|
|
.padding-top-5{
|
|||
|
|
padding-top:5px;
|
|||
|
|
}
|
|||
|
|
.padding-top-10{
|
|||
|
|
padding-top: 10px;
|
|||
|
|
}
|
|||
|
|
.padding-top-15{
|
|||
|
|
padding-top: 15px;
|
|||
|
|
}
|
|||
|
|
.padding-top-27{
|
|||
|
|
padding-top: 27px;
|
|||
|
|
}
|
|||
|
|
.padding-top-90{
|
|||
|
|
padding-top: 90px;
|
|||
|
|
}
|
|||
|
|
.line-height-08{
|
|||
|
|
line-height: 0.8;
|
|||
|
|
}
|
|||
|
|
.line-height-1{
|
|||
|
|
line-height: 1;
|
|||
|
|
}
|
|||
|
|
.line-height-15{
|
|||
|
|
line-height: 1.5;
|
|||
|
|
}
|
|||
|
|
.line-height-2{
|
|||
|
|
line-height: 2;
|
|||
|
|
}
|
|||
|
|
.line-height-2-3{
|
|||
|
|
line-height: 2.3;
|
|||
|
|
}
|
|||
|
|
.line-height-3{
|
|||
|
|
line-height: 3;
|
|||
|
|
}
|
|||
|
|
.line-height-5{
|
|||
|
|
line-height: 5;
|
|||
|
|
}
|
|||
|
|
.line-height-6{
|
|||
|
|
line-height: 6;
|
|||
|
|
}
|
|||
|
|
.line-height-36{
|
|||
|
|
line-height: 36px;
|
|||
|
|
}
|
|||
|
|
.font-size-12{
|
|||
|
|
font-size: 12px;
|
|||
|
|
font-weight: 400;
|
|||
|
|
line-height: 24px;
|
|||
|
|
}
|
|||
|
|
.font-size-14{
|
|||
|
|
font-size: 14px;
|
|||
|
|
}
|
|||
|
|
.font-size-16{
|
|||
|
|
font-size: 16px;
|
|||
|
|
}
|
|||
|
|
.font-size-18{
|
|||
|
|
font-size: 18px;
|
|||
|
|
}
|
|||
|
|
.font-size-20{
|
|||
|
|
font-size: 20px;
|
|||
|
|
}
|
|||
|
|
.font-size-21{
|
|||
|
|
font-size: 21px;
|
|||
|
|
font-weight: 400;
|
|||
|
|
letter-spacing: 0.52px;
|
|||
|
|
}
|
|||
|
|
.font-size-22{
|
|||
|
|
font-size: 22px;
|
|||
|
|
}
|
|||
|
|
.font-size-25{
|
|||
|
|
font-size: 25px;
|
|||
|
|
}
|
|||
|
|
.font-size-28{
|
|||
|
|
font-size: 28px;
|
|||
|
|
}
|
|||
|
|
.font-size-33{
|
|||
|
|
font-size: 33px;
|
|||
|
|
}
|
|||
|
|
.font-size-30{
|
|||
|
|
font-size: 30px;
|
|||
|
|
}
|
|||
|
|
.font-size-35{
|
|||
|
|
font-size: 35px;
|
|||
|
|
}
|
|||
|
|
.font-size-36{
|
|||
|
|
font-size: 36px;
|
|||
|
|
}
|
|||
|
|
.font-size-40{
|
|||
|
|
font-size: 40px;
|
|||
|
|
}
|
|||
|
|
.font-size-50{
|
|||
|
|
font-size: 50px;
|
|||
|
|
}
|
|||
|
|
.font-size-60{
|
|||
|
|
font-size: 60px;
|
|||
|
|
}
|
|||
|
|
.font-size-65{
|
|||
|
|
font-size: 65px;
|
|||
|
|
}
|
|||
|
|
.font-size-70{
|
|||
|
|
font-size: 70px;
|
|||
|
|
}
|
|||
|
|
.font-color-white,.font-color-dark-white{
|
|||
|
|
color: #d9f6fb;
|
|||
|
|
font-family: Source Han Sans CN, Source Han Sans CN-Regular;
|
|||
|
|
}
|
|||
|
|
.font-color-black{
|
|||
|
|
color: #0d2336;
|
|||
|
|
font-weight: 600;
|
|||
|
|
}
|
|||
|
|
.font-color-gray{
|
|||
|
|
color: #A8A8A8;
|
|||
|
|
}
|
|||
|
|
.font-color-red{
|
|||
|
|
color: #FF0000;
|
|||
|
|
}
|
|||
|
|
.font-color-yellow{
|
|||
|
|
color: #FFCC00;
|
|||
|
|
}
|
|||
|
|
.font-color-redlight{
|
|||
|
|
color: #CE00FF
|
|||
|
|
}
|
|||
|
|
.font-color-blue,.font-color-dark-blue{
|
|||
|
|
color: #00C2FF;
|
|||
|
|
}
|
|||
|
|
.font-color-lightBlue,.font-color-light-blue{
|
|||
|
|
color: #00D2FF;
|
|||
|
|
}
|
|||
|
|
.font-color-green{
|
|||
|
|
color: #00EC1F;
|
|||
|
|
}
|
|||
|
|
.font-weight-700{
|
|||
|
|
font-weight: 700;
|
|||
|
|
}
|
|||
|
|
.border-left{
|
|||
|
|
border-left: 1px solid #c1c1c1;
|
|||
|
|
}
|
|||
|
|
.border-right{
|
|||
|
|
border-right: 2px solid #ffffff;
|
|||
|
|
}
|
|||
|
|
.border-bottom{
|
|||
|
|
border-bottom: 1px solid #c1c1c1;
|
|||
|
|
}
|
|||
|
|
.border-leftAndRight{
|
|||
|
|
border-left: 1px solid #c1c1c1;border-right: 1px solid #c1c1c1;
|
|||
|
|
}
|
|||
|
|
.bgcolor-blue-light{
|
|||
|
|
background: #192B73;
|
|||
|
|
}
|
|||
|
|
.bgcolor-transparent{
|
|||
|
|
background: transparent;
|
|||
|
|
border-radius: 5px;
|
|||
|
|
}
|
|||
|
|
.img-icon{
|
|||
|
|
width: 70px;
|
|||
|
|
height: 70px;
|
|||
|
|
}
|
|||
|
|
.img-pump{
|
|||
|
|
width: 60px;
|
|||
|
|
height: 97px;
|
|||
|
|
}
|
|||
|
|
.progress_bar{
|
|||
|
|
min-width: 630px;
|
|||
|
|
height: 25px;
|
|||
|
|
}
|
|||
|
|
.polarBarLegend{
|
|||
|
|
width: 360px;
|
|||
|
|
height: 200px;
|
|||
|
|
position: fixed;
|
|||
|
|
}
|
|||
|
|
.polarBar{
|
|||
|
|
min-width: 630px;
|
|||
|
|
height: 450px;
|
|||
|
|
}
|
|||
|
|
.cursor-pointer{
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
.pressure-line{
|
|||
|
|
width: 1180px;
|
|||
|
|
height: 560px;
|
|||
|
|
}
|
|||
|
|
.rawwater-line{
|
|||
|
|
width: 2360px;
|
|||
|
|
height: 560px;
|
|||
|
|
}
|
|||
|
|
.instructions-line{
|
|||
|
|
width: 2360px;
|
|||
|
|
height: 355px;
|
|||
|
|
}
|
|||
|
|
.line_inlet,.line_effluent{
|
|||
|
|
width: 100%;
|
|||
|
|
height: 235px;
|
|||
|
|
}
|
|||
|
|
.bar_pollutant{
|
|||
|
|
width: 100%;
|
|||
|
|
height: 220px;
|
|||
|
|
}
|
|||
|
|
.line_simulator{
|
|||
|
|
width: 100%;
|
|||
|
|
height: 276px;
|
|||
|
|
}
|
|||
|
|
.statistics_barline{
|
|||
|
|
width: 100%;
|
|||
|
|
height: 327px;
|
|||
|
|
}
|
|||
|
|
.model_pie{
|
|||
|
|
float: left;
|
|||
|
|
width: 50%;
|
|||
|
|
height: 167px;
|
|||
|
|
padding: 5px;
|
|||
|
|
}
|
|||
|
|
.model_legend{
|
|||
|
|
float: left;
|
|||
|
|
width: 50%;
|
|||
|
|
height: 60px;
|
|||
|
|
padding: 5px 0;
|
|||
|
|
text-align: left;
|
|||
|
|
font-size: 12px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.nav>li>a {
|
|||
|
|
padding: 0 10px;
|
|||
|
|
}
|
|||
|
|
.nav-pills>li>a {
|
|||
|
|
border-radius: 6px;
|
|||
|
|
border-top: 0;
|
|||
|
|
color: #fff;
|
|||
|
|
}
|
|||
|
|
.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover {
|
|||
|
|
color: #fff;
|
|||
|
|
background-color: #06aebb;
|
|||
|
|
}
|
|||
|
|
.nav-pills>li.active>a {
|
|||
|
|
font-weight: 400;
|
|||
|
|
}
|
|||
|
|
.nav-tabs {
|
|||
|
|
border-bottom: 0;
|
|||
|
|
}
|
|||
|
|
.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
|
|||
|
|
color: #fff;
|
|||
|
|
cursor: default;
|
|||
|
|
background-color: transparent;
|
|||
|
|
border: 0;
|
|||
|
|
border-bottom: 4px solid #1599de;
|
|||
|
|
}
|
|||
|
|
.nav-tabs>li>a {
|
|||
|
|
padding: 1px;
|
|||
|
|
color: #fff;
|
|||
|
|
margin-right: 10px;
|
|||
|
|
border-bottom: 4px solid transparent;
|
|||
|
|
}
|
|||
|
|
.form-control {
|
|||
|
|
height: auto;
|
|||
|
|
color: #fff;
|
|||
|
|
background-color: transparent;
|
|||
|
|
border: 0;
|
|||
|
|
padding: 0 12px;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
.select-style-2 {
|
|||
|
|
background: #032056;
|
|||
|
|
border: 1px solid #8ac6dc;
|
|||
|
|
border-radius: 2px;
|
|||
|
|
color: #fff;
|
|||
|
|
padding: 1px 3px;
|
|||
|
|
text-align: center;
|
|||
|
|
width: 60px;
|
|||
|
|
height: 22px;
|
|||
|
|
font-size: 12px;
|
|||
|
|
line-height: 20px;
|
|||
|
|
}
|
|||
|
|
.data-cont{
|
|||
|
|
width: 100%;
|
|||
|
|
height: 80px;
|
|||
|
|
background: linear-gradient(180deg,#133853, #040b11);
|
|||
|
|
border: 1px solid #184546;
|
|||
|
|
padding: 10px 15px;
|
|||
|
|
}
|
|||
|
|
.data-cont-title{
|
|||
|
|
height: 40%;
|
|||
|
|
}
|
|||
|
|
.data-cont-number{
|
|||
|
|
height: 60%;
|
|||
|
|
}
|
|||
|
|
.data-cont-2{
|
|||
|
|
width: 100%;
|
|||
|
|
height: 90px;
|
|||
|
|
background: linear-gradient(180deg,#133853, #040b11);
|
|||
|
|
border: 1px solid #184546;
|
|||
|
|
padding: 10px 15px;
|
|||
|
|
}
|
|||
|
|
.data-cont-2-title{
|
|||
|
|
height: 60%;
|
|||
|
|
}
|
|||
|
|
.data-cont-2-number{
|
|||
|
|
height: 40%;
|
|||
|
|
}
|
|||
|
|
.data-cont-3-title{
|
|||
|
|
height: 50%;
|
|||
|
|
}
|
|||
|
|
.data-cont-3-number{
|
|||
|
|
height: 50%;
|
|||
|
|
}
|
|||
|
|
.width-20{
|
|||
|
|
float: left;
|
|||
|
|
width: 20%;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
.width-50{
|
|||
|
|
float: left;
|
|||
|
|
width: 50%;
|
|||
|
|
}
|
|||
|
|
.height-265{
|
|||
|
|
height: 265px;
|
|||
|
|
}
|
|||
|
|
.table>thead>tr>th, .table>tbody>tr>th, .table>tfoot>tr>th, .table>thead>tr>td, .table>tbody>tr>td, .table>tfoot>tr>td {
|
|||
|
|
border-top: 0;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
|
|||
|
|
<script type="text/javascript">
|
|||
|
|
var fontcolor_grey = '#aeaeae';
|
|||
|
|
var fontcolor_black = '#0d2336';
|
|||
|
|
var color_blue = '#36FFF9';
|
|||
|
|
var color_blue_other = '#1D4F6D';
|
|||
|
|
var img_name = '';
|
|||
|
|
|
|||
|
|
var color = ['#13F7FF','#F713FF','#FFCC00','#00FF00','#00C2FF','#FF8000','#FF0000'];
|
|||
|
|
$(function () {
|
|||
|
|
updateNowTime();
|
|||
|
|
/* 定时器 */
|
|||
|
|
setInterval(updateNowTime, 1000); //<!--每隔1秒钟刷新一次-->
|
|||
|
|
/*$("#top-url").attr("src",ext.contextPath + '/expo/top.do' );*/
|
|||
|
|
$('.top-menu-list').hide();
|
|||
|
|
$(".top-menu").on("click", function (e) {
|
|||
|
|
$(".top-menu-list").toggle();
|
|||
|
|
});
|
|||
|
|
var data2 = [['2024-04-10 00:00',200],['2024-04-10 01:00',193],['2024-04-10 2:00',194],['2024-04-10 3:00',194],['2024-04-10 4:00',196],['2024-04-10 5:00',197],['2024-04-10 6:00',198],];
|
|||
|
|
var data1 = [['2024-04-10 00:00',30],['2024-04-10 1:00',28],['2024-04-10 2:00',33],['2024-04-10 3:00',34],['2024-04-10 4:00',35],['2024-04-10 5:00',29],['2024-04-10 6:00',27],
|
|||
|
|
['2024-04-10 7:00',27],['2024-04-10 8:00',28],['2024-04-10 9:00',30],['2024-04-10 10:00',30],['2024-04-10 11:00',31],['2024-04-10 12:00',32]];
|
|||
|
|
var data4 = [['2024-04-10 00:00',21],['2024-04-10 1:00',22],['2024-04-10 2:00',23],['2024-04-10 3:00',24],['2024-04-10 4:00',25],['2024-04-10 5:00',26],['2024-04-10 6:00',29],
|
|||
|
|
['2024-04-10 7:00',28],['2024-04-10 8:00',28],['2024-04-10 9:00',22],['2024-04-10 10:00',23],['2024-04-10 11:00',21],['2024-04-10 12:00',22]];
|
|||
|
|
var data3 = [['2024-04-10 00:00',200],['2024-04-10 01:00',153],['2024-04-10 2:00',104],['2024-04-10 3:00',54],['2024-04-10 4:00',46],['2024-04-10 5:00',37],['2024-04-10 6:00',38],];
|
|||
|
|
var legenddata = ['COD'];
|
|||
|
|
var seriesdata = [
|
|||
|
|
{
|
|||
|
|
name: legenddata[0],
|
|||
|
|
type: 'line',
|
|||
|
|
symbol: 'none',
|
|||
|
|
data: data2
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
echarts_line('inlet_line_cod',legenddata,seriesdata,color);
|
|||
|
|
seriesdata = [
|
|||
|
|
{
|
|||
|
|
name: legenddata[0],
|
|||
|
|
type: 'line',
|
|||
|
|
symbol: 'none',
|
|||
|
|
data: []
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
echarts_line_2('simulator_line_cod',legenddata,seriesdata);
|
|||
|
|
seriesdata = [
|
|||
|
|
{
|
|||
|
|
name: legenddata[0],
|
|||
|
|
type: 'bar',
|
|||
|
|
symbol: 'none',
|
|||
|
|
barWidth: '30%',
|
|||
|
|
data: data3
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
echarts_line_2('pollutant_bar_cod',legenddata,seriesdata);
|
|||
|
|
legenddata = ['实际值','预测值'];
|
|||
|
|
seriesdata = [
|
|||
|
|
{
|
|||
|
|
name: legenddata[0],
|
|||
|
|
type: 'line',
|
|||
|
|
symbol: 'none',
|
|||
|
|
data: data4
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: legenddata[1],
|
|||
|
|
type: 'line',
|
|||
|
|
symbol: 'none',
|
|||
|
|
data: data1
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
echarts_line('effluent_line_cod',legenddata,seriesdata,color);
|
|||
|
|
legenddata = ['用电量','电单耗'];
|
|||
|
|
seriesdata = [
|
|||
|
|
{
|
|||
|
|
name: legenddata[0],
|
|||
|
|
type: 'bar',
|
|||
|
|
symbol: 'none',
|
|||
|
|
data: data2
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: legenddata[1],
|
|||
|
|
type: 'line',
|
|||
|
|
symbol: 'none',
|
|||
|
|
data: data1
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
|
|||
|
|
echarts_line('statistics_barline_electric',legenddata,seriesdata,[color[2],color[5]]);
|
|||
|
|
|
|||
|
|
var data= [
|
|||
|
|
{ value: 8, name: '优（80~100%）' },
|
|||
|
|
{ value: 5, name: '良（60~80%）' },
|
|||
|
|
{ value: 5, name: '中（40~60%）' },
|
|||
|
|
{ value: 2, name: '差（0~40%）' }
|
|||
|
|
]
|
|||
|
|
doPie('model_pie_cod',data,'center','50%','COD','优');
|
|||
|
|
doPie('model_pie_nh4',data,'center','50%','NH4','良');
|
|||
|
|
doPie('model_pie_tn',data,'center','50%','TN','中');
|
|||
|
|
doPie('model_pie_tp',data,'center','50%','TP','差');
|
|||
|
|
//getData();
|
|||
|
|
//getWeather();
|
|||
|
|
/*setInterval(getData, 60000);*/ //<!--每隔1分钟钟刷新一次-->
|
|||
|
|
});
|
|||
|
|
function updateNowTime(){
|
|||
|
|
var nowTime = moment().format('YYYY-MM-DD HH:mm:ss');
|
|||
|
|
$('.top-date').html(nowTime.substring(0,10));
|
|||
|
|
$('.top-time').html(nowTime.substring(11,19));
|
|||
|
|
var hour = Number(nowTime.substring(11,13));
|
|||
|
|
if(hour<7 || hour>17){
|
|||
|
|
var src = "<%=request.getContextPath()%>/IMG/expo/night.png";
|
|||
|
|
$('.dayOrNight').attr('src', src);
|
|||
|
|
}else{
|
|||
|
|
var src = "<%=request.getContextPath()%>/IMG/expo/day.png";
|
|||
|
|
$('.dayOrNight').attr('src', src);
|
|||
|
|
}
|
|||
|
|
//getData();
|
|||
|
|
}
|
|||
|
|
function addAndRemove4Class(one,two){
|
|||
|
|
$('.'+one).addClass(two);
|
|||
|
|
$('.'+one).removeClass(one);
|
|||
|
|
}
|
|||
|
|
var pageCode = [];
|
|||
|
|
var pageCodeType = [];
|
|||
|
|
var p2_temperature_sw_seriesdata = [];
|
|||
|
|
var p2_temperature_cg_seriesdata = [];
|
|||
|
|
var p3_temperature_sw_seriesdata = [];
|
|||
|
|
var p3_temperature_cg_seriesdata = [];
|
|||
|
|
var p4_temperature_sw_seriesdata = [];
|
|||
|
|
var p4_temperature_cg_seriesdata = [];
|
|||
|
|
function getData(){
|
|||
|
|
var bizid = "021SHSB";
|
|||
|
|
var jsp_id = $('#jsp_id').val();
|
|||
|
|
var time_input = $('#time_input').val();
|
|||
|
|
//var time_input = '2024-03-06 13:00';
|
|||
|
|
$.post(ext.contextPath + '/changGang/getCgData.do', {bizid:bizid,time:time_input,jsp_id:jsp_id} , function(data) {
|
|||
|
|
var arr= JSON.parse(data);
|
|||
|
|
//console.log(arr);
|
|||
|
|
var windDirection = '0';
|
|||
|
|
var transition = '0';
|
|||
|
|
|
|||
|
|
|
|||
|
|
if(arr.rows!=null && arr.rows!=undefined && arr.rows!=''){
|
|||
|
|
for(var i=0;i<arr.rows.length;i++){
|
|||
|
|
var value =0;
|
|||
|
|
var numtail=0;
|
|||
|
|
var dataMax=0;
|
|||
|
|
var rate = 1;
|
|||
|
|
if(arr.rows[i].visualCacheConfig!=null
|
|||
|
|
&& arr.rows[i].visualCacheConfig!=undefined
|
|||
|
|
&& arr.rows[i].visualCacheConfig!=''){
|
|||
|
|
var visualCacheConfig = arr.rows[i].visualCacheConfig;
|
|||
|
|
if(visualCacheConfig.numtail!=null && visualCacheConfig.numtail!=undefined && (visualCacheConfig.numtail!='' || visualCacheConfig.numtail===0)){
|
|||
|
|
numtail = visualCacheConfig.numtail;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
if(arr.rows[i].visualCacheData!=null
|
|||
|
|
&& arr.rows[i].visualCacheData!=undefined
|
|||
|
|
&& arr.rows[i].visualCacheData!=''){
|
|||
|
|
var visualCacheData = arr.rows[i].visualCacheData;
|
|||
|
|
if(visualCacheData.inivalue!=null && visualCacheData.inivalue!=undefined && (visualCacheData.inivalue!='' || visualCacheData.inivalue===0)){
|
|||
|
|
value = visualCacheData.inivalue;
|
|||
|
|
}else if(visualCacheData.value!=null && visualCacheData.value!=undefined && (visualCacheData.value!='' || visualCacheData.value===0)){
|
|||
|
|
value = visualCacheData.value;
|
|||
|
|
}else {
|
|||
|
|
if(arr.rows[i].mPoint!=null && arr.rows[i].mPoint!=undefined && arr.rows[i].mPoint!=''){
|
|||
|
|
var mPoint = arr.rows[i].mPoint;
|
|||
|
|
if(mPoint.parmvalue!=null && mPoint.parmvalue!=undefined && (mPoint.parmvalue!='' || mPoint.parmvalue===0)){
|
|||
|
|
value = mPoint.parmvalue;
|
|||
|
|
}
|
|||
|
|
if(mPoint.alarmmax!=null && mPoint.alarmmax!=undefined && (mPoint.alarmmax!='' || mPoint.alarmmax===0)){
|
|||
|
|
dataMax = mPoint.alarmmax;
|
|||
|
|
}
|
|||
|
|
if(mPoint.numtail!=null && mPoint.numtail!=undefined && (mPoint.numtail!='' || mPoint.numtail===0)){
|
|||
|
|
numtail = mPoint.numtail;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
if(visualCacheData.numtail!=null && visualCacheData.numtail!=undefined && (visualCacheData.numtail!='' || visualCacheData.numtail===0)){
|
|||
|
|
numtail = visualCacheData.numtail;
|
|||
|
|
}
|
|||
|
|
if(visualCacheData.rate!=null && visualCacheData.rate!=undefined && (visualCacheData.rate!='' || visualCacheData.rate===0)){
|
|||
|
|
rate = visualCacheData.rate;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
value = parseFloat(value)*rate;
|
|||
|
|
value = value.toFixed(numtail);
|
|||
|
|
if(arr.rows[i].visualCacheData!=null
|
|||
|
|
&& arr.rows[i].visualCacheData!=undefined
|
|||
|
|
&& arr.rows[i].visualCacheData!='') {
|
|||
|
|
var visualCacheData = arr.rows[i].visualCacheData;
|
|||
|
|
//只显示固定数据
|
|||
|
|
/*if ((visualCacheData.mpcode==null || visualCacheData.mpcode=='') && $("." + arr.rows[i].elementCode).length > 0) {
|
|||
|
|
$("." + arr.rows[i].elementCode).html(toThousands(value));
|
|||
|
|
}*/
|
|||
|
|
if ($("." + arr.rows[i].elementCode).length > 0) {
|
|||
|
|
$("." + arr.rows[i].elementCode).html(toThousands(value));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (visualCacheData.mpcode!=null && visualCacheData.mpcode!='') {
|
|||
|
|
|
|||
|
|
if(pageCode.indexOf(visualCacheData.mpcode)!=-1){
|
|||
|
|
var pageCodedata = pageCodeType[pageCode.indexOf(visualCacheData.mpcode)];
|
|||
|
|
pageCodedata.push(arr.rows[i]);
|
|||
|
|
}else{
|
|||
|
|
pageCode.push(visualCacheData.mpcode);
|
|||
|
|
var pageCodedata = [];
|
|||
|
|
pageCodedata.push(arr.rows[i]);
|
|||
|
|
pageCodeType.push(pageCodedata);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if(arr.rows[i].elementCode=='windDirection'){
|
|||
|
|
windDirection = value;
|
|||
|
|
}
|
|||
|
|
if(arr.rows[i].elementCode=='transition'){
|
|||
|
|
transition = value;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if(arr.rows[i].elementCode=='p2_temperature_sw'){
|
|||
|
|
p2_temperature_sw_seriesdata = getdataseries(arr.rows[i].mPointHistory,arr.rows[i].visualCacheDataList,numtail);
|
|||
|
|
}
|
|||
|
|
if(arr.rows[i].elementCode=='p2_temperature_cg'){
|
|||
|
|
p2_temperature_cg_seriesdata = getdataseries(arr.rows[i].mPointHistory,arr.rows[i].visualCacheDataList,numtail);
|
|||
|
|
}
|
|||
|
|
if(arr.rows[i].elementCode=='p3_temperature_sw'){
|
|||
|
|
p3_temperature_sw_seriesdata = getdataseries(arr.rows[i].mPointHistory,arr.rows[i].visualCacheDataList,numtail);
|
|||
|
|
}
|
|||
|
|
if(arr.rows[i].elementCode=='p3_temperature_cg'){
|
|||
|
|
p3_temperature_cg_seriesdata = getdataseries(arr.rows[i].mPointHistory,arr.rows[i].visualCacheDataList,numtail);
|
|||
|
|
}
|
|||
|
|
if(arr.rows[i].elementCode=='p4_temperature_sw'){
|
|||
|
|
p4_temperature_sw_seriesdata = getdataseries(arr.rows[i].mPointHistory,arr.rows[i].visualCacheDataList,numtail);
|
|||
|
|
}
|
|||
|
|
if(arr.rows[i].elementCode=='p4_temperature_cg'){
|
|||
|
|
p4_temperature_cg_seriesdata = getdataseries(arr.rows[i].mPointHistory,arr.rows[i].visualCacheDataList,numtail);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
//初始化mqtt
|
|||
|
|
if ('${mqttStatus}' == '0') {
|
|||
|
|
initialMqtt('processSimulation_'+'${cu.id}');
|
|||
|
|
} else {
|
|||
|
|
console.log('mq已关闭')
|
|||
|
|
}
|
|||
|
|
} catch (err) {
|
|||
|
|
//处理错误
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
function getdataseries(mPointHistory,visualCacheDataList,numtail){
|
|||
|
|
var dataseries =[];
|
|||
|
|
if(mPointHistory!=null
|
|||
|
|
&& mPointHistory!=undefined
|
|||
|
|
&& mPointHistory!=''){
|
|||
|
|
var mPointHistory = mPointHistory;
|
|||
|
|
for(var m=0;m<mPointHistory.length;m++){
|
|||
|
|
var dataserie =[];
|
|||
|
|
dataserie.push(mPointHistory[m].measuredt.substr(0,19));
|
|||
|
|
dataserie.push(mPointHistory[m].parmvalue.toFixed(numtail));
|
|||
|
|
dataseries.push(dataserie);
|
|||
|
|
}
|
|||
|
|
}else{
|
|||
|
|
if(visualCacheDataList!=null
|
|||
|
|
&& visualCacheDataList!=undefined
|
|||
|
|
&& visualCacheDataList!=''){
|
|||
|
|
var visualCacheDataList = visualCacheDataList;
|
|||
|
|
for(var m=0;m<visualCacheDataList.length;m++){
|
|||
|
|
var dataserie =[];
|
|||
|
|
dataserie.push(visualCacheDataList[m].insdt.substr(0,16));
|
|||
|
|
dataserie.push(visualCacheDataList[m].value.toFixed(numtail));
|
|||
|
|
dataseries.push(dataserie);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return dataseries;
|
|||
|
|
}
|
|||
|
|
function doPie(id,data,legend,center,text,subtext){
|
|||
|
|
var lifeChart = echarts.getInstanceByDom(document.getElementById(id));
|
|||
|
|
//有的话就获取已有echarts实例的DOM节点。
|
|||
|
|
if (lifeChart != null) { // 如果存在,就进行销毁。
|
|||
|
|
lifeChart.dispose();
|
|||
|
|
}
|
|||
|
|
var option = {
|
|||
|
|
color:[color[3],color[4],color[5],color[6]],
|
|||
|
|
title: [
|
|||
|
|
{
|
|||
|
|
text: text,
|
|||
|
|
left: '47%',
|
|||
|
|
top: '25%',
|
|||
|
|
textAlign: 'center',
|
|||
|
|
textStyle: {
|
|||
|
|
fontSize: '16',
|
|||
|
|
fontWeight: '400',
|
|||
|
|
color: '#fff',
|
|||
|
|
textAlign: 'center',
|
|||
|
|
},
|
|||
|
|
subtext: subtext,
|
|||
|
|
subtextStyle: {
|
|||
|
|
fontSize: '35',
|
|||
|
|
fontWeight: '400',
|
|||
|
|
color: '#fff',
|
|||
|
|
textAlign: 'center',
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'item'
|
|||
|
|
},
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
name: '模型精度',
|
|||
|
|
type: 'pie',
|
|||
|
|
radius: ['70%', '80%'],
|
|||
|
|
data: data,
|
|||
|
|
label: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
emphasis: {
|
|||
|
|
label: {
|
|||
|
|
show: true,
|
|||
|
|
fontSize: '40',
|
|||
|
|
fontWeight: 'bold'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
labelLine: {
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
};
|
|||
|
|
lifeChart = echarts.init(document.getElementById(id));
|
|||
|
|
lifeChart.setOption(option,true);
|
|||
|
|
}
|
|||
|
|
function echarts_line(id,legenddata,seriesdata,colors){
|
|||
|
|
var lifeChart = echarts.getInstanceByDom(document.getElementById(id));
|
|||
|
|
//有的话就获取已有echarts实例的DOM节点。
|
|||
|
|
if (lifeChart != null) { // 如果存在，就进行销毁。
|
|||
|
|
lifeChart.dispose();
|
|||
|
|
}
|
|||
|
|
var option = {
|
|||
|
|
color:colors,
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'axis'
|
|||
|
|
},
|
|||
|
|
legend: {
|
|||
|
|
data: legenddata,
|
|||
|
|
x:'right',
|
|||
|
|
y: 'bottom',
|
|||
|
|
textStyle: {
|
|||
|
|
color: fontcolor_grey ,
|
|||
|
|
fontSize: 12 ,
|
|||
|
|
},
|
|||
|
|
icon:'roundRect'
|
|||
|
|
},
|
|||
|
|
grid: {
|
|||
|
|
left: '3%',
|
|||
|
|
right: '4%',
|
|||
|
|
bottom: '15%',
|
|||
|
|
top: '3%',
|
|||
|
|
containLabel: true
|
|||
|
|
},
|
|||
|
|
xAxis: {
|
|||
|
|
type: 'time',
|
|||
|
|
axisLabel: {
|
|||
|
|
formatter: '{hh}'
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
yAxis: {
|
|||
|
|
type: 'value',
|
|||
|
|
axisLine: {
|
|||
|
|
show: true,
|
|||
|
|
},
|
|||
|
|
splitLine: {
|
|||
|
|
show: true,
|
|||
|
|
lineStyle: {
|
|||
|
|
type: 'dashed' ,
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
series: seriesdata,
|
|||
|
|
};
|
|||
|
|
lifeChart = echarts.init(document.getElementById(id));
|
|||
|
|
lifeChart.setOption(option,true);
|
|||
|
|
}
|
|||
|
|
function echarts_line_2(id,legenddata,seriesdata){
|
|||
|
|
var lifeChart = echarts.getInstanceByDom(document.getElementById(id));
|
|||
|
|
//有的话就获取已有echarts实例的DOM节点。
|
|||
|
|
if (lifeChart != null) { // 如果存在，就进行销毁。
|
|||
|
|
lifeChart.dispose();
|
|||
|
|
}
|
|||
|
|
var option = {
|
|||
|
|
color:color,
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'axis'
|
|||
|
|
},
|
|||
|
|
grid: {
|
|||
|
|
left: '3%',
|
|||
|
|
right: '4%',
|
|||
|
|
bottom: '3%',
|
|||
|
|
top: '5%',
|
|||
|
|
containLabel: true
|
|||
|
|
},
|
|||
|
|
xAxis: {
|
|||
|
|
type: 'time',
|
|||
|
|
},
|
|||
|
|
yAxis: {
|
|||
|
|
type: 'value',
|
|||
|
|
axisLine: {
|
|||
|
|
show: true,
|
|||
|
|
},
|
|||
|
|
splitLine: {
|
|||
|
|
show: true,
|
|||
|
|
lineStyle: {
|
|||
|
|
type: 'dashed' ,
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
series: seriesdata,
|
|||
|
|
};
|
|||
|
|
lifeChart = echarts.init(document.getElementById(id));
|
|||
|
|
lifeChart.setOption(option,true);
|
|||
|
|
}
|
|||
|
|
function homePage() {
|
|||
|
|
$('.jump-area').hide();
|
|||
|
|
$('.sub-region').hide();
|
|||
|
|
$('.homePage').show();
|
|||
|
|
}
|
|||
|
|
function jumpArea(el) {
|
|||
|
|
$('.homePage').hide();
|
|||
|
|
$('.sub-region').hide();
|
|||
|
|
$('.jump-area').show();
|
|||
|
|
$('.'+el).show();
|
|||
|
|
}
|
|||
|
|
//添加千分位符合
|
|||
|
|
function toThousands(num) {
|
|||
|
|
var nums =num;
|
|||
|
|
var re=/\d{1,3}(?=(\d{3})+$)/g;
|
|||
|
|
var n1=0;
|
|||
|
|
if(nums!=null && nums!='' && nums!=undefined){
|
|||
|
|
n1=nums.toString().replace(/^(\d+)((\.\d+)?)$/,function(s,s1,s2){return s1.replace(re,"$&,")+s2;});
|
|||
|
|
}
|
|||
|
|
return n1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var locationhref = function (url) {
|
|||
|
|
window.location.href = ext.contextPath + url;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var getWeather = function () {
|
|||
|
|
$.post(ext.contextPath + "/work/weather/getList.do", {page: 1,rows:1,bizid:unitId,type:0}, function(data) {
|
|||
|
|
if (data.total >0){
|
|||
|
|
let temp = data.rows[0].temp;
|
|||
|
|
let weather = data.rows[0].weather;
|
|||
|
|
let precip = data.rows[0].precip;
|
|||
|
|
let windSpeed = data.rows[0].windspeed;
|
|||
|
|
var reg = new RegExp("/h","g");// 加'g'，删除字符串里所有的/h
|
|||
|
|
windSpeed=windSpeed.replace(reg,"");
|
|||
|
|
let humidity = data.rows[0].humidity;
|
|||
|
|
let vis = data.rows[0].vis;
|
|||
|
|
$("#temperature").html(temp);
|
|||
|
|
$("#weather").html(weather);
|
|||
|
|
$("#precip").html(precip);
|
|||
|
|
$("#windSpeed").html(windSpeed);
|
|||
|
|
$("#humidity").html(humidity);
|
|||
|
|
$("#vis").html(vis);
|
|||
|
|
}else{
|
|||
|
|
$.post(ext.contextPath + "/work/weather/getList.do", {page: 1,rows:1,bizid:unitId,type:1}, function(data) {
|
|||
|
|
if (data.total >0){
|
|||
|
|
let temp = data.rows[0].temp;
|
|||
|
|
let weather = data.rows[0].weather;
|
|||
|
|
let precip = data.rows[0].precip;
|
|||
|
|
let windSpeed = data.rows[0].windspeed;
|
|||
|
|
var reg = new RegExp("/h","g");// 加'g'，删除字符串里所有的/h
|
|||
|
|
windSpeed=windSpeed.replace(reg,"");
|
|||
|
|
let humidity = data.rows[0].humidity;
|
|||
|
|
let vis = data.rows[0].vis;
|
|||
|
|
$("#temperature").html(temp);
|
|||
|
|
$("#weather").html(weather);
|
|||
|
|
$("#precip").html(precip);
|
|||
|
|
$("#windSpeed").html(windSpeed);
|
|||
|
|
$("#humidity").html(humidity);
|
|||
|
|
$("#vis").html(vis);
|
|||
|
|
}
|
|||
|
|
},'json');
|
|||
|
|
}
|
|||
|
|
},'json');
|
|||
|
|
}
|
|||
|
|
function openExpoHomepage() {
|
|||
|
|
if('${param.link}'==''){
|
|||
|
|
window.open(ext.contextPath + "/expo/homepage.do?link=expo");
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
var client = null;
|
|||
|
|
var dataType = 0;
|
|||
|
|
function initialMqtt(mqttId) {
|
|||
|
|
const options = {
|
|||
|
|
clean: true,
|
|||
|
|
connectTimeout: 10000,
|
|||
|
|
clientId: mqttId,
|
|||
|
|
username: "admin",
|
|||
|
|
password: 'public'
|
|||
|
|
}
|
|||
|
|
const connectUrl = '${hostWeb}';
|
|||
|
|
//console.log(connectUrl);
|
|||
|
|
client = mqtt.connect(connectUrl, options);
|
|||
|
|
|
|||
|
|
//当重新连接启动触发回调
|
|||
|
|
client.on('reconnect', function () {
|
|||
|
|
// console.log('正在重连.....');
|
|||
|
|
});
|
|||
|
|
//连接断开后触发的回调
|
|||
|
|
client.on("close", function () {
|
|||
|
|
console.log('客户端已断开连接.....');
|
|||
|
|
});
|
|||
|
|
//从broker接收到断开连接的数据包后发出。MQTT 5.0特性
|
|||
|
|
client.on("disconnect", function (packet) {
|
|||
|
|
console.log('从broker接收到断开连接的数据包.....' + packet);
|
|||
|
|
});
|
|||
|
|
//客户端脱机下线触发回调
|
|||
|
|
client.on("offline", function () {
|
|||
|
|
console.log('客户端脱机下线.....');
|
|||
|
|
});
|
|||
|
|
//当客户端无法连接或出现错误时触发回调
|
|||
|
|
client.on("error", (error) => {
|
|||
|
|
console.log('客户端出现错误.....' + error);
|
|||
|
|
});
|
|||
|
|
//当客户端发送任何数据包时发出。这包括published()包以及MQTT用于管理订阅和连接的包
|
|||
|
|
client.on("packetsend", (packet) => {
|
|||
|
|
// console.log('客户端已发出数据包：' + packet);
|
|||
|
|
});
|
|||
|
|
//当客户端接收到任何数据包时发出。这包括来自订阅主题的信息包以及MQTT用于管理订阅和连接的信息包
|
|||
|
|
client.on("packetreceive", (packet) => {
|
|||
|
|
// console.log('收到：' + packet);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
//成功连接后触发的回调
|
|||
|
|
client.on("connect", function (connack) {
|
|||
|
|
// layer.msg('成功连接上mq服务器');
|
|||
|
|
console.log('成功连接上mqtt服务器');
|
|||
|
|
//订阅某主题
|
|||
|
|
/**
|
|||
|
|
* client.subscribe(topic/topic array/topic object, [options], [callback])
|
|||
|
|
* topic:一个string类型的topic或者一个topic数组,也可以是一个对象
|
|||
|
|
* options
|
|||
|
|
*/
|
|||
|
|
client.subscribe('021SHSB_UP_VUE', {qos: 2});
|
|||
|
|
//每隔2秒发布一次数据
|
|||
|
|
// setInterval(publish, 2000)
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
function publish() {
|
|||
|
|
//发布数据
|
|||
|
|
/**
|
|||
|
|
* client.publish(topic,message,[options], [callback])
|
|||
|
|
*
|
|||
|
|
* message: Buffer or String
|
|||
|
|
* options:{
|
|||
|
|
* qos:0, //默认0
|
|||
|
|
* retain:false, //默认false
|
|||
|
|
* dup:false, //默认false
|
|||
|
|
* properties:{}
|
|||
|
|
* }
|
|||
|
|
* callback:function (err){}
|
|||
|
|
*/
|
|||
|
|
const message = "h5 message " + Math.random() + new Date();
|
|||
|
|
client.publish("testtopic/123", message, {qos: 2});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//当客户端接收到发布消息时触发回调
|
|||
|
|
/**
|
|||
|
|
* topic:收到的数据包的topic
|
|||
|
|
* message:收到的数据包的负载playload
|
|||
|
|
* packet:收到的数据包
|
|||
|
|
*/
|
|||
|
|
client.on('message', (topic, message, packet) => {
|
|||
|
|
//console.log(topic);
|
|||
|
|
if (topic == '021SHSB_UP_VUE' && dataType == 0) {
|
|||
|
|
dataType = 1;
|
|||
|
|
var dataNumber = 86400;
|
|||
|
|
var topic_json = JSON.parse(message.toString());
|
|||
|
|
//console.log(topic_json);
|
|||
|
|
if(topic_json!=null && topic_json!=undefined && topic_json!=''){
|
|||
|
|
var windDirection = '0';
|
|||
|
|
var transition = '0';
|
|||
|
|
|
|||
|
|
var p2_temperature_sw = 0;
|
|||
|
|
var p2_temperature_cg = 0;
|
|||
|
|
var p2_temperature_date = '';
|
|||
|
|
var p3_temperature_sw = 0;
|
|||
|
|
var p3_temperature_cg = 0;
|
|||
|
|
var p3_temperature_date = '';
|
|||
|
|
var p4_temperature_sw = 0;
|
|||
|
|
var p4_temperature_cg = 0;
|
|||
|
|
var p4_temperature_date = '';
|
|||
|
|
for(var i=0;i<topic_json.length;i++){
|
|||
|
|
var mpdata = topic_json[i];
|
|||
|
|
var value = mpdata.parmvalue;
|
|||
|
|
var measuredt = mpdata.measuredt.substr(0,19);
|
|||
|
|
var numtail=0;
|
|||
|
|
var dataMax=0;
|
|||
|
|
var rate = 1;
|
|||
|
|
if(pageCode.indexOf(mpdata.id)!=-1){
|
|||
|
|
var arrs = pageCodeType[pageCode.indexOf(mpdata.id)];
|
|||
|
|
//console.log(pageCode);
|
|||
|
|
//console.log(arrs);
|
|||
|
|
for(var a=0;a<arrs.length;a++){
|
|||
|
|
arr = arrs[a];
|
|||
|
|
//console.log(arr);
|
|||
|
|
if(arr.visualCacheData!=null
|
|||
|
|
&& arr.visualCacheData!=undefined
|
|||
|
|
&& arr.visualCacheData!=''){
|
|||
|
|
var visualCacheData = arr.visualCacheData;
|
|||
|
|
if(arr.mPoint!=null && arr.mPoint!=undefined && arr.mPoint!=''){
|
|||
|
|
var mPoint = arr.mPoint;
|
|||
|
|
if(mPoint.alarmmax!=null && mPoint.alarmmax!=undefined && (mPoint.alarmmax!='' || mPoint.alarmmax===0)){
|
|||
|
|
dataMax = mPoint.alarmmax;
|
|||
|
|
}
|
|||
|
|
if(mPoint.numtail!=null && mPoint.numtail!=undefined && (mPoint.numtail!='' || mPoint.numtail===0)){
|
|||
|
|
numtail = mPoint.numtail;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
if(visualCacheData.numtail!=null && visualCacheData.numtail!=undefined && (visualCacheData.numtail!='' || visualCacheData.numtail===0)){
|
|||
|
|
numtail = visualCacheData.numtail;
|
|||
|
|
}
|
|||
|
|
if(visualCacheData.rate!=null && visualCacheData.rate!=undefined && (visualCacheData.rate!='' || visualCacheData.rate===0)){
|
|||
|
|
rate = visualCacheData.rate;
|
|||
|
|
}
|
|||
|
|
}else{
|
|||
|
|
var mPoint = arr.mPoint;
|
|||
|
|
if(mPoint!=null && mPoint!=undefined && mPoint!=''){
|
|||
|
|
if(mPoint.alarmmax!=null && mPoint.alarmmax!=undefined && (mPoint.alarmmax!='' || mPoint.alarmmax===0)){
|
|||
|
|
dataMax = mPoint.alarmmax;
|
|||
|
|
}
|
|||
|
|
if(mPoint.numtail!=null && mPoint.numtail!=undefined && (mPoint.numtail!='' || mPoint.numtail===0)){
|
|||
|
|
numtail = mPoint.numtail;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
value = parseFloat(value)*rate;
|
|||
|
|
value = value.toFixed(numtail);
|
|||
|
|
|
|||
|
|
if ($("." + arr.elementCode).length > 0) {
|
|||
|
|
$("." + arr.elementCode).html(toThousands(value));
|
|||
|
|
}
|
|||
|
|
if($("."+arr.elementCode).parent().find('.nowdate').length > 0){
|
|||
|
|
$("."+arr.elementCode).parent().find('.nowdate').html(nowdate.substring(11,16));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if(arr.elementCode=='p2_temperature_sw'){
|
|||
|
|
p2_temperature_sw = value;
|
|||
|
|
p2_temperature_date = measuredt;
|
|||
|
|
if(p2_temperature_sw_seriesdata.length>4000){
|
|||
|
|
p2_temperature_sw_seriesdata.shift();
|
|||
|
|
}
|
|||
|
|
p2_temperature_sw_seriesdata.push([p2_temperature_date,p2_temperature_sw]);
|
|||
|
|
}
|
|||
|
|
if(arr.elementCode=='p2_temperature_cg'){
|
|||
|
|
p2_temperature_cg = value;
|
|||
|
|
p2_temperature_date = measuredt;
|
|||
|
|
if(p2_temperature_cg_seriesdata.length>dataNumber){
|
|||
|
|
p2_temperature_cg_seriesdata.shift();
|
|||
|
|
}
|
|||
|
|
p2_temperature_cg_seriesdata.push([p2_temperature_date,p2_temperature_cg]);
|
|||
|
|
}
|
|||
|
|
if(arr.elementCode=='p3_temperature_sw'){
|
|||
|
|
p3_temperature_sw = value;
|
|||
|
|
p3_temperature_date = measuredt;
|
|||
|
|
if(p3_temperature_sw_seriesdata.length>dataNumber){
|
|||
|
|
p3_temperature_sw_seriesdata.shift();
|
|||
|
|
}
|
|||
|
|
p3_temperature_sw_seriesdata.push([p3_temperature_date,p3_temperature_sw]);
|
|||
|
|
}
|
|||
|
|
if(arr.elementCode=='p3_temperature_cg'){
|
|||
|
|
p3_temperature_cg = value;
|
|||
|
|
p3_temperature_date = measuredt;
|
|||
|
|
if(p3_temperature_cg_seriesdata.length>dataNumber){
|
|||
|
|
p3_temperature_cg_seriesdata.shift();
|
|||
|
|
}
|
|||
|
|
p3_temperature_cg_seriesdata.push([p3_temperature_date,p3_temperature_cg]);
|
|||
|
|
}
|
|||
|
|
if(arr.elementCode=='p4_temperature_sw'){
|
|||
|
|
p4_temperature_sw = value;
|
|||
|
|
p4_temperature_date = measuredt;
|
|||
|
|
if(p4_temperature_sw_seriesdata.length>dataNumber){
|
|||
|
|
p4_temperature_sw_seriesdata.shift();
|
|||
|
|
}
|
|||
|
|
p4_temperature_sw_seriesdata.push([p4_temperature_date,p4_temperature_sw]);
|
|||
|
|
}
|
|||
|
|
if(arr.elementCode=='p4_temperature_cg'){
|
|||
|
|
p4_temperature_cg = value;
|
|||
|
|
p4_temperature_date = measuredt;
|
|||
|
|
if(p4_temperature_cg_seriesdata.length>dataNumber){
|
|||
|
|
p4_temperature_cg_seriesdata.shift();
|
|||
|
|
}
|
|||
|
|
p4_temperature_cg_seriesdata.push([p4_temperature_date,p4_temperature_cg]);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if(p2_temperature_sw_seriesdata!=null && p2_temperature_cg_seriesdata.length>0){
|
|||
|
|
echarts_line('p2_temperature',p2_temperature_sw_seriesdata,p2_temperature_cg_seriesdata);
|
|||
|
|
}
|
|||
|
|
if(p3_temperature_sw_seriesdata!=null && p3_temperature_cg_seriesdata.length>0){
|
|||
|
|
echarts_line('p3_temperature',p3_temperature_sw_seriesdata,p3_temperature_cg_seriesdata);
|
|||
|
|
}
|
|||
|
|
if(p4_temperature_sw_seriesdata!=null && p4_temperature_cg_seriesdata.length>0){
|
|||
|
|
echarts_line('p4_temperature',p4_temperature_sw_seriesdata,p4_temperature_cg_seriesdata);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
dataType = 0;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
//页面离开自动断开连接
|
|||
|
|
$(window).bind("beforeunload", () => {
|
|||
|
|
// console.log("客户端窗口关闭,断开连接");
|
|||
|
|
client.disconnect();
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
</head>
|
|||
|
|
<body style="overflow-x: auto;">
|
|||
|
|
<div class="content-wrapper-bg content-wrapper-bg-darkblue">
|
|||
|
|
<!-- BEGIN CONTAINER -->
|
|||
|
|
<input type="hidden" name="jsp_id" id="jsp_id" value="process_simulation">
|
|||
|
|
<div class="whole-body text-left font-size-21 font-color-white line-height-36">
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-md-3">
|
|||
|
|
<div class="whole-element-bg">
|
|||
|
|
<div class="box box-transparent ">
|
|||
|
|
<div class="box-header">
|
|||
|
|
<h4 class="box-title font-color-white">进水水质</h4>
|
|||
|
|
<div class="box-tools pull-right"></div>
|
|||
|
|
</div>
|
|||
|
|
<!-- /.box-header -->
|
|||
|
|
<div class="box-body font-size-14 line-height-15 text-center">
|
|||
|
|
<div class="row padding-topbottom-10">
|
|||
|
|
<div class="col-sm-4">
|
|||
|
|
<select id ="typeSelect" class="form-control select2 pull-left" onchange="changeEchartsbars(this.value)" >
|
|||
|
|
<option value="inlet_line_a" selected>A线进水水质</option>
|
|||
|
|
<option value="inlet_line_b">B线进水水质</option>
|
|||
|
|
</select>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-sm-8">
|
|||
|
|
<ul class="nav nav-pills pull-right">
|
|||
|
|
<li role="presentation" class="active">
|
|||
|
|
<a href="#inlet_line_consume_1" data-toggle="tab" class="font-color-blue COD_Data">COD</a>
|
|||
|
|
</li>
|
|||
|
|
<li role="presentation">
|
|||
|
|
<a href="#inlet_line_consume_2" data-toggle="tab" class="font-color-blue NH4_Data">NH4</a>
|
|||
|
|
</li>
|
|||
|
|
<li role="presentation">
|
|||
|
|
<a href="#inlet_line_consume_3" data-toggle="tab" class="font-color-blue TP_Data">TP</a>
|
|||
|
|
</li>
|
|||
|
|
<li role="presentation">
|
|||
|
|
<a href="#inlet_line_consume_4" data-toggle="tab" class="font-color-blue TN_Data">TN</a>
|
|||
|
|
</li>
|
|||
|
|
<li role="presentation">
|
|||
|
|
<a href="#inlet_line_consume_5" data-toggle="tab" class="font-color-blue inflow_Data">进水量</a>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="tab-content">
|
|||
|
|
<div class="tab-pane active" id="inlet_line_consume_1">
|
|||
|
|
<div class="col-xs-12 line_inlet" id="inlet_line_cod"></div>
|
|||
|
|
</div>
|
|||
|
|
<!-- /.tab-pane -->
|
|||
|
|
<div class="tab-pane" id="inlet_line_consume_2">
|
|||
|
|
<div class="col-xs-12 line_inlet" id="inlet_line_nh4"></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="tab-pane" id="inlet_line_consume_3">
|
|||
|
|
<div class="col-xs-12 line_inlet" id="inlet_line_tp"></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="tab-pane" id="inlet_line_consume_4">
|
|||
|
|
<div class="col-xs-12 line_inlet" id="inlet_line_tn"></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="tab-pane" id="inlet_line_consume_5">
|
|||
|
|
<div class="col-xs-12 line_inlet" id="inlet_line_inflow"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="whole-element-bg">
|
|||
|
|
<div class="box box-transparent ">
|
|||
|
|
<div class="box-header">
|
|||
|
|
<h4 class="box-title font-color-white">出水水质</h4>
|
|||
|
|
<div class="box-tools pull-right"></div>
|
|||
|
|
</div>
|
|||
|
|
<!-- /.box-header -->
|
|||
|
|
<div class="box-body font-size-14 line-height-15 text-center">
|
|||
|
|
<div class="row padding-topbottom-10">
|
|||
|
|
<div class="col-sm-4">
|
|||
|
|
<select id ="typeSelect" class="form-control select2 pull-left" onchange="changeEchartsbars(this.value)" >
|
|||
|
|
<option value="effluent_line_a" selected>A线出水水质</option>
|
|||
|
|
<option value="effluent_line_b">B线出水水质</option>
|
|||
|
|
</select>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-sm-8">
|
|||
|
|
<ul class="nav nav-pills pull-right">
|
|||
|
|
<li role="presentation" class="active">
|
|||
|
|
<a href="#effluent_line_consume_1" data-toggle="tab" class="font-color-blue COD_Data">COD</a>
|
|||
|
|
</li>
|
|||
|
|
<li role="presentation">
|
|||
|
|
<a href="#effluent_line_consume_2" data-toggle="tab" class="font-color-blue NH4_Data">NH4</a>
|
|||
|
|
</li>
|
|||
|
|
<li role="presentation">
|
|||
|
|
<a href="#effluent_line_consume_3" data-toggle="tab" class="font-color-blue TP_Data">TP</a>
|
|||
|
|
</li>
|
|||
|
|
<li role="presentation">
|
|||
|
|
<a href="#effluent_line_consume_4" data-toggle="tab" class="font-color-blue TN_Data">TN</a>
|
|||
|
|
</li>
|
|||
|
|
<li role="presentation">
|
|||
|
|
<a href="#effluent_line_consume_5" data-toggle="tab" class="font-color-blue inflow_Data">出水量</a>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="tab-content">
|
|||
|
|
<div class="tab-pane active" id="effluent_line_consume_1">
|
|||
|
|
<div class="col-xs-12 line_effluent" id="effluent_line_cod"></div>
|
|||
|
|
</div>
|
|||
|
|
<!-- /.tab-pane -->
|
|||
|
|
<div class="tab-pane" id="effluent_line_consume_2">
|
|||
|
|
<div class="col-xs-12 line_effluent" id="effluent_line_nh4"></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="tab-pane" id="effluent_line_consume_3">
|
|||
|
|
<div class="col-xs-12 line_effluent" id="effluent_line_tp"></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="tab-pane" id="effluent_line_consume_4">
|
|||
|
|
<div class="col-xs-12 line_effluent" id="effluent_line_tn"></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="tab-pane" id="effluent_line_consume_5">
|
|||
|
|
<div class="col-xs-12 line_effluent" id="effluent_line_inflow"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="whole-element-bg">
|
|||
|
|
<div class="box box-transparent ">
|
|||
|
|
<div class="box-header">
|
|||
|
|
<h4 class="box-title font-color-white">预警情况</h4>
|
|||
|
|
<div class="box-tools pull-right"></div>
|
|||
|
|
</div>
|
|||
|
|
<!-- /.box-header -->
|
|||
|
|
<div class="box-body font-size-14 line-height-15 text-center">
|
|||
|
|
<div class="row padding-topbottom-10">
|
|||
|
|
<div class="col-sm-12">
|
|||
|
|
<ul class="nav nav-pills pull-left">
|
|||
|
|
<li role="presentation" class="active">
|
|||
|
|
<a href="#inlet_earlyWarning_1" data-toggle="tab" class="font-color-blue inlet_earlyWarning_Data">进水水质</a>
|
|||
|
|
</li>
|
|||
|
|
<li role="presentation">
|
|||
|
|
<a href="#effluent_earlyWarning_2" data-toggle="tab" class="font-color-blue effluent_earlyWarning_Data">模拟出水</a>
|
|||
|
|
</li>
|
|||
|
|
<li role="presentation">
|
|||
|
|
<a href="#model_earlyWarning_3" data-toggle="tab" class="font-color-blue model_earlyWarning_Data">模型精度</a>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="tab-content">
|
|||
|
|
<div class="tab-pane height-265 active" id="inlet_earlyWarning_1">
|
|||
|
|
<table class="table text-cente">
|
|||
|
|
<thead>
|
|||
|
|
<tr>
|
|||
|
|
<th>指标</th>
|
|||
|
|
<th>时间</th>
|
|||
|
|
<th>浓度</th>
|
|||
|
|
<th>预警</th>
|
|||
|
|
</tr>
|
|||
|
|
</thead>
|
|||
|
|
<tbody>
|
|||
|
|
<tr>
|
|||
|
|
<td colspan="4">当前没有数据</td>
|
|||
|
|
</tr>
|
|||
|
|
<%--<tr>
|
|||
|
|
<td><i class="fa fa-exclamation-triangle font-color-yellow margin-right-10"></i>COD</td>
|
|||
|
|
<td>2023/12/26 12:32</td>
|
|||
|
|
<td><span class="font-color-yellow pull-left">56</span><span class="font-color-gray pull-right">(mg/L)</span></td>
|
|||
|
|
<td><span class="font-color-yellow">超出阈值</span></td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td><i class="fa fa-exclamation-triangle font-color-yellow margin-right-10"></i>COD</td>
|
|||
|
|
<td>2023/12/26 12:32</td>
|
|||
|
|
<td><span class="font-color-yellow pull-left">56</span><span class="font-color-gray pull-right">(mg/L)</span></td>
|
|||
|
|
<td><span class="font-color-yellow">超出阈值</span></td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td><i class="fa fa-exclamation-triangle font-color-yellow margin-right-10"></i>COD</td>
|
|||
|
|
<td>2023/12/26 12:32</td>
|
|||
|
|
<td><span class="font-color-yellow pull-left">56</span><span class="font-color-gray pull-right">(mg/L)</span></td>
|
|||
|
|
<td><span class="font-color-yellow">超出阈值</span></td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td><i class="fa fa-exclamation-triangle font-color-yellow margin-right-10"></i>COD</td>
|
|||
|
|
<td>2023/12/26 12:32</td>
|
|||
|
|
<td><span class="font-color-yellow pull-left">56</span><span class="font-color-gray pull-right">(mg/L)</span></td>
|
|||
|
|
<td><span class="font-color-yellow">超出阈值</span></td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td><i class="fa fa-exclamation-triangle font-color-yellow margin-right-10"></i>COD</td>
|
|||
|
|
<td>2023/12/26 12:32</td>
|
|||
|
|
<td><span class="font-color-yellow pull-left">56</span><span class="font-color-gray pull-right">(mg/L)</span></td>
|
|||
|
|
<td><span class="font-color-yellow">超出阈值</span></td>
|
|||
|
|
</tr>--%>
|
|||
|
|
</tbody>
|
|||
|
|
</table>
|
|||
|
|
</div>
|
|||
|
|
<!-- /.tab-pane -->
|
|||
|
|
<div class="tab-pane height-265" id="effluent_earlyWarning_2">
|
|||
|
|
</div>
|
|||
|
|
<div class="tab-pane height-265" id="model_earlyWarning_3">
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-md-6">
|
|||
|
|
<div class="whole-element-bg">
|
|||
|
|
<div class="box box-transparent ">
|
|||
|
|
<div class="box-header">
|
|||
|
|
<h4 class="box-title font-color-white">污染物全流程浓度梯度</h4>
|
|||
|
|
<div class="box-tools pull-right"></div>
|
|||
|
|
</div>
|
|||
|
|
<!-- /.box-header -->
|
|||
|
|
<div class="box-body font-size-14 line-height-15 text-center">
|
|||
|
|
<div class="row padding-topbottom-10 padding-leftright-15">
|
|||
|
|
<div class="col-sm-12">
|
|||
|
|
<ul class="nav nav-pills pull-right">
|
|||
|
|
<li role="presentation" class="active">
|
|||
|
|
<a href="#pollutant_bar_consume_1" data-toggle="tab" class="font-color-blue COD_Data">COD</a>
|
|||
|
|
</li>
|
|||
|
|
<li role="presentation">
|
|||
|
|
<a href="#pollutant_bar_consume_2" data-toggle="tab" class="font-color-blue NH4_Data">NH4</a>
|
|||
|
|
</li>
|
|||
|
|
<li role="presentation">
|
|||
|
|
<a href="#pollutant_bar_consume_3" data-toggle="tab" class="font-color-blue TP_Data">TP</a>
|
|||
|
|
</li>
|
|||
|
|
<li role="presentation">
|
|||
|
|
<a href="#pollutant_bar_consume_4" data-toggle="tab" class="font-color-blue TN_Data">TN</a>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="tab-content">
|
|||
|
|
<div class="tab-pane active" id="pollutant_bar_consume_1">
|
|||
|
|
<div class="col-xs-12 bar_pollutant" id="pollutant_bar_cod"></div>
|
|||
|
|
</div>
|
|||
|
|
<!-- /.tab-pane -->
|
|||
|
|
<div class="tab-pane" id="pollutant_bar_consume_2">
|
|||
|
|
<div class="col-xs-12 bar_pollutant" id="pollutant_bar_nh4"></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="tab-pane" id="pollutant_bar_consume_3">
|
|||
|
|
<div class="col-xs-12 bar_pollutant" id="pollutant_bar_tp"></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="tab-pane" id="pollutant_bar_consume_4">
|
|||
|
|
<div class="col-xs-12 bar_pollutant" id="pollutant_bar_tn"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="box box-transparent ">
|
|||
|
|
<div class="box-header">
|
|||
|
|
<h4 class="box-title font-color-white">数据看板</h4>
|
|||
|
|
<div class="box-tools pull-right"></div>
|
|||
|
|
</div>
|
|||
|
|
<!-- /.box-header -->
|
|||
|
|
<div class="box-body font-size-14 line-height-15 text-center">
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-sm-12 padding-topbottom-15 padding-leftright-15">
|
|||
|
|
<ul class="nav nav-pills pull-left">
|
|||
|
|
<li role="presentation">
|
|||
|
|
<a href="#data_consume_1" data-toggle="tab" class="font-color-blue COD_Data">COD</a>
|
|||
|
|
</li>
|
|||
|
|
<li role="presentation">
|
|||
|
|
<a href="#data_consume_2" data-toggle="tab" class="font-color-blue NH4_Data">NH4</a>
|
|||
|
|
</li>
|
|||
|
|
<li role="presentation">
|
|||
|
|
<a href="#data_consume_3" data-toggle="tab" class="font-color-blue TP_Data">TP</a>
|
|||
|
|
</li>
|
|||
|
|
<li role="presentation">
|
|||
|
|
<a href="#data_consume_4" data-toggle="tab" class="font-color-blue TN_Data">TN</a>
|
|||
|
|
</li>
|
|||
|
|
<li role="presentation" class="active">
|
|||
|
|
<a href="#data_consume_5" data-toggle="tab" class="font-color-blue inflow_Data">水量</a>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="tab-content">
|
|||
|
|
<div class="tab-pane padding-topbottom-10 padding-leftright-15" id="data_consume_1">
|
|||
|
|
</div>
|
|||
|
|
<!-- /.tab-pane -->
|
|||
|
|
<div class="tab-pane padding-topbottom-10 padding-leftright-15" id="data_consume_2">
|
|||
|
|
</div>
|
|||
|
|
<div class="tab-pane padding-topbottom-10 padding-leftright-15" id="data_consume_3">
|
|||
|
|
</div>
|
|||
|
|
<div class="tab-pane padding-topbottom-10 padding-leftright-15" id="data_consume_4">
|
|||
|
|
</div>
|
|||
|
|
<div class="tab-pane padding-topbottom-10 padding-leftright-15 active" id="data_consume_5">
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-sm-3">
|
|||
|
|
<div class="data-cont text-left">
|
|||
|
|
<div class="data-cont-title"><span class="pull-left">当前出水瞬时</span><span class="pull-right">m³/h</span></div>
|
|||
|
|
<div class="data-cont-number font-color-blue font-size-25">0</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-sm-3">
|
|||
|
|
<div class="data-cont text-left">
|
|||
|
|
<div class="data-cont-title"><span class="pull-left">当前进水瞬时</span><span class="pull-right">m³/h</span></div>
|
|||
|
|
<div class="data-cont-number font-color-blue font-size-25">0</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-sm-3">
|
|||
|
|
<div class="data-cont text-left">
|
|||
|
|
<div class="data-cont-title"><span class="pull-left">今日累计进水</span><span class="pull-right">m³</span></div>
|
|||
|
|
<div class="data-cont-number font-color-blue font-size-25">0</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-sm-3">
|
|||
|
|
<div class="data-cont text-left">
|
|||
|
|
<div class="data-cont-title"><span class="pull-left">今日累计出水</span><span class="pull-right">m³</span></div>
|
|||
|
|
<div class="data-cont-number font-color-blue font-size-25">0</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="box box-transparent ">
|
|||
|
|
<div class="box-header">
|
|||
|
|
<h4 class="box-title font-color-white">离线模拟</h4>
|
|||
|
|
<div class="box-tools pull-right font-weight-700 font-size-14">当前时间 <span class="">2023/12/26 13:23</span></div>
|
|||
|
|
</div>
|
|||
|
|
<!-- /.box-header -->
|
|||
|
|
<div class="box-body font-size-14 line-height-15 text-center">
|
|||
|
|
<div class="font-weight-700 text-left padding-topbottom-15 padding-leftright-15">模拟设置</div>
|
|||
|
|
<div class="data-cont-2">
|
|||
|
|
<div class="width-20">
|
|||
|
|
<div class="data-cont-2-title"><div>进水COD</div><div>(mg/L)</div></div>
|
|||
|
|
<div class="data-cont-2-number font-color-redlight font-size-20">0</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="width-20">
|
|||
|
|
<div class="data-cont-2-title"><div>进水NH4</div><div>(mg/L)</div></div>
|
|||
|
|
<div class="data-cont-2-number font-color-redlight font-size-20">0</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="width-20">
|
|||
|
|
<div class="data-cont-2-title"><div>进水TN</div><div>(mg/L)</div></div>
|
|||
|
|
<div class="data-cont-2-number font-color-redlight font-size-20">0</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="width-20">
|
|||
|
|
<div class="data-cont-2-title"><div>进水TP</div><div>(mg/L)</div></div>
|
|||
|
|
<div class="data-cont-2-number font-color-redlight font-size-20">0</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="width-20">
|
|||
|
|
<div class="data-cont-2-title"><div>进水流量</div><div>(m³/h)</div></div>
|
|||
|
|
<div class="data-cont-2-number font-color-redlight font-size-20">0</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="row padding-topbottom-15 padding-leftright-15">
|
|||
|
|
<div class="col-sm-12">
|
|||
|
|
<ul class="nav nav-pills pull-right">
|
|||
|
|
<li role="presentation" class="active">
|
|||
|
|
<a href="#simulator_line_consume_1" data-toggle="tab" class="font-color-blue COD_Data">COD</a>
|
|||
|
|
</li>
|
|||
|
|
<li role="presentation">
|
|||
|
|
<a href="#simulator_line_consume_2" data-toggle="tab" class="font-color-blue NH4_Data">NH4</a>
|
|||
|
|
</li>
|
|||
|
|
<li role="presentation">
|
|||
|
|
<a href="#simulator_line_consume_3" data-toggle="tab" class="font-color-blue TP_Data">TP</a>
|
|||
|
|
</li>
|
|||
|
|
<li role="presentation">
|
|||
|
|
<a href="#simulator_line_consume_4" data-toggle="tab" class="font-color-blue TN_Data">TN</a>
|
|||
|
|
</li>
|
|||
|
|
<li role="presentation">
|
|||
|
|
<a href="#simulator_line_consume_5" data-toggle="tab" class="font-color-blue TN_Data">能耗</a>
|
|||
|
|
</li>
|
|||
|
|
<li role="presentation">
|
|||
|
|
<a href="#simulator_line_consume_6" data-toggle="tab" class="font-color-blue TN_Data">水量</a>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="tab-content">
|
|||
|
|
<div class="tab-pane active" id="simulator_line_consume_1">
|
|||
|
|
<div class="col-xs-12 line_simulator" id="simulator_line_cod"></div>
|
|||
|
|
</div>
|
|||
|
|
<!-- /.tab-pane -->
|
|||
|
|
<div class="tab-pane" id="simulator_line_consume_2">
|
|||
|
|
<div class="col-xs-12 line_simulator" id="simulator_line_nh4"></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="tab-pane" id="simulator_line_consume_3">
|
|||
|
|
<div class="col-xs-12 line_simulator" id="simulator_line_tp"></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="tab-pane" id="simulator_line_consume_4">
|
|||
|
|
<div class="col-xs-12 line_simulator" id="simulator_line_tn"></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="tab-pane" id="simulator_line_consume_5">
|
|||
|
|
<div class="col-xs-12 line_simulator" id="simulator_line_energy"></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="tab-pane" id="simulator_line_consume_6">
|
|||
|
|
<div class="col-xs-12 line_simulator" id="simulator_line_water"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-md-3">
|
|||
|
|
<div class="whole-element-bg">
|
|||
|
|
<div class="box box-transparent ">
|
|||
|
|
<div class="box-header">
|
|||
|
|
<h4 class="box-title font-color-white">经济指标</h4>
|
|||
|
|
<div class="box-tools pull-right"></div>
|
|||
|
|
</div>
|
|||
|
|
<!-- /.box-header -->
|
|||
|
|
<div class="box-body font-size-14 line-height-15 text-left padding-topbottom-10 padding-leftright-15">
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-sm-4">
|
|||
|
|
<div class="data-cont-2">
|
|||
|
|
<div class="data-cont-3-title">
|
|||
|
|
<span class="margin-right-10"><img src="<%=request.getContextPath()%>/IMG/changGang/electric.png"></span>
|
|||
|
|
<span>今日电量</span></div>
|
|||
|
|
<div class="data-cont-3-number">
|
|||
|
|
<span class="font-color-yellow font-size-28 margin-right-10">0</span><span>万kwh</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-sm-4">
|
|||
|
|
<div class="data-cont-2">
|
|||
|
|
<div class="data-cont-3-title">
|
|||
|
|
<span class="margin-right-10"><img src="<%=request.getContextPath()%>/IMG/changGang/electric.png"></span>
|
|||
|
|
<span>电单耗</span></div>
|
|||
|
|
<div class="data-cont-3-number">
|
|||
|
|
<span class="font-color-yellow font-size-28 margin-right-10">0</span><span>kwh</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-sm-4">
|
|||
|
|
<div class="data-cont-2">
|
|||
|
|
<div class="data-cont-3-title">
|
|||
|
|
<span class="margin-right-10"><img src="<%=request.getContextPath()%>/IMG/changGang/medicament.png"></span>
|
|||
|
|
<span>药单耗</span></div>
|
|||
|
|
<div class="data-cont-3-number">
|
|||
|
|
<span class="font-color-redlight font-size-28 margin-right-10">0</span><span>ppm</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="row padding-topbottom-15">
|
|||
|
|
<div class="col-sm-6">
|
|||
|
|
<ul class="nav nav-tabs pull-left">
|
|||
|
|
<li role="presentation" class="active">
|
|||
|
|
<a href="#statistics_barline_consume_1" data-toggle="tab" class="electric_statistics">电耗统计</a>
|
|||
|
|
</li>
|
|||
|
|
<li role="presentation">
|
|||
|
|
<a href="#statistics_barline_consume_2" data-toggle="tab" class="drug_statistics">药耗统计</a>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-sm-6">
|
|||
|
|
<select id ="yearSelect" class="form-control select-style-2 select2 pull-right" onchange="changeEchartsbars(this.value)" >
|
|||
|
|
<option value="2023" selected>2023</option>
|
|||
|
|
<option value="2022">2022</option>
|
|||
|
|
</select>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="tab-content">
|
|||
|
|
<div class="tab-pane active" id="statistics_barline_consume_1">
|
|||
|
|
<div class="col-xs-12 statistics_barline" id="statistics_barline_electric"></div>
|
|||
|
|
</div>
|
|||
|
|
<!-- /.tab-pane -->
|
|||
|
|
<div class="tab-pane" id="statistics_barline_consume_2">
|
|||
|
|
<div class="col-xs-12 statistics_barline" id="statistics_barline_drug"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="box box-transparent ">
|
|||
|
|
<div class="box-header">
|
|||
|
|
<h4 class="box-title font-color-white">模型精度</h4>
|
|||
|
|
<div class="box-tools pull-right"></div>
|
|||
|
|
</div>
|
|||
|
|
<!-- /.box-header -->
|
|||
|
|
<div class="box-body font-size-14 line-height-15 text-center">
|
|||
|
|
<div class="model_pie" id="model_pie_cod"></div>
|
|||
|
|
<div class="model_pie" id="model_pie_nh4"></div>
|
|||
|
|
<div class="model_legend">
|
|||
|
|
<span class="width-50"><i class="fa fa-circle font-color-green"></i>优(80~100%)</span>
|
|||
|
|
<span class="width-50"><i class="fa fa-circle font-color-blue"></i>良(60~80%)</span>
|
|||
|
|
<span class="width-50"><i class="fa fa-circle font-color-yellow"></i>中(40~60%)</span>
|
|||
|
|
<span class="width-50"><i class="fa fa-circle font-color-red"></i>差(0~40%)</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="model_legend">
|
|||
|
|
<span class="width-50"><i class="fa fa-circle font-color-green"></i>优(0~0.5mg/L)</span>
|
|||
|
|
<span class="width-50"><i class="fa fa-circle font-color-blue"></i>良(0.5~1mg/L)</span>
|
|||
|
|
<span class="width-50"><i class="fa fa-circle font-color-yellow"></i>中(1~1.5mg/L)</span>
|
|||
|
|
<span class="width-50"><i class="fa fa-circle font-color-red"></i>差(>1.5mg/L)</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="model_pie" id="model_pie_tn"></div>
|
|||
|
|
<div class="model_pie" id="model_pie_tp"></div>
|
|||
|
|
<div class="model_legend">
|
|||
|
|
<span class="width-50"><i class="fa fa-circle font-color-green"></i>优(80~100%)</span>
|
|||
|
|
<span class="width-50"><i class="fa fa-circle font-color-blue"></i>良(60~80%)</span>
|
|||
|
|
<span class="width-50"><i class="fa fa-circle font-color-yellow"></i>中(40~60%)</span>
|
|||
|
|
<span class="width-50"><i class="fa fa-circle font-color-red"></i>差(0~40%)</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="model_legend">
|
|||
|
|
<span class="width-50"><i class="fa fa-circle font-color-green"></i>优(0~0.5mg/L)</span>
|
|||
|
|
<span class="width-50"><i class="fa fa-circle font-color-blue"></i>良(0.5~1mg/L)</span>
|
|||
|
|
<span class="width-50"><i class="fa fa-circle font-color-yellow"></i>中(1~1.5mg/L)</span>
|
|||
|
|
<span class="width-50"><i class="fa fa-circle font-color-red"></i>差(>1.5mg/L)</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</body>
|
|||
|
|
</html>
|