1540 lines
57 KiB
Plaintext
1540 lines
57 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;
|
|||
|
|
}
|
|||
|
|
.content-wrapper-bg{
|
|||
|
|
background-size: 100% 100%;
|
|||
|
|
background-repeat:no-repeat;
|
|||
|
|
background-position:center center;
|
|||
|
|
}
|
|||
|
|
.content-wrapper-bg-darkblue{
|
|||
|
|
background-image: url(<%=request.getContextPath()%>/IMG/expo/bg.png);
|
|||
|
|
}
|
|||
|
|
.content-wrapper-bg-main{
|
|||
|
|
background-image: url(<%=request.getContextPath()%>/IMG/expo/main_bg.png);
|
|||
|
|
}
|
|||
|
|
.whole-element,.left-equ-number{
|
|||
|
|
position: absolute;
|
|||
|
|
}
|
|||
|
|
.top-title{
|
|||
|
|
top: 22px;
|
|||
|
|
left: 53px;
|
|||
|
|
font-size: 40px;
|
|||
|
|
color: #ffffff;
|
|||
|
|
}
|
|||
|
|
/*.top-title{
|
|||
|
|
top: 0px;
|
|||
|
|
left: 0px;
|
|||
|
|
width: 1920px;
|
|||
|
|
height: 140px;
|
|||
|
|
}*/
|
|||
|
|
.top-weather{
|
|||
|
|
top: 12px;
|
|||
|
|
right: 3px;
|
|||
|
|
color: #ffffff;
|
|||
|
|
}
|
|||
|
|
.top-weather-element{
|
|||
|
|
float: left;
|
|||
|
|
padding:0;
|
|||
|
|
height: 80px;
|
|||
|
|
}
|
|||
|
|
.top-menu{
|
|||
|
|
width: 196px;
|
|||
|
|
height: 42px;
|
|||
|
|
background-size: 100% 100%;
|
|||
|
|
background-repeat:no-repeat;
|
|||
|
|
background-position:center center;
|
|||
|
|
background-image: url(<%=request.getContextPath()%>/IMG/expo/top_menu.png);
|
|||
|
|
cursor: pointer;
|
|||
|
|
top: 91.5px;
|
|||
|
|
left: 26.5px;
|
|||
|
|
font-size: 18px;
|
|||
|
|
font-weight: 700;
|
|||
|
|
text-align: left;
|
|||
|
|
color: #baf6ff;
|
|||
|
|
line-height: 28px;
|
|||
|
|
padding-top: 9px;
|
|||
|
|
padding-left: 39px;
|
|||
|
|
}
|
|||
|
|
.top-menu-list{
|
|||
|
|
width: 190px;
|
|||
|
|
top: 138px;
|
|||
|
|
left: 30px;
|
|||
|
|
font-size: 18px;
|
|||
|
|
font-weight: 700;
|
|||
|
|
text-align: left;
|
|||
|
|
color: #baf6ff;
|
|||
|
|
display: none;
|
|||
|
|
background-size: 100% 100%;
|
|||
|
|
background-repeat:no-repeat;
|
|||
|
|
background-position:center center;
|
|||
|
|
background-image: url(<%=request.getContextPath()%>/IMG/expo/u5.svg);
|
|||
|
|
z-index: 10;
|
|||
|
|
}
|
|||
|
|
.top-menu-list-option{
|
|||
|
|
height: 44px;
|
|||
|
|
line-height: 2.5;
|
|||
|
|
padding-left: 35px;
|
|||
|
|
}
|
|||
|
|
.whole-left{
|
|||
|
|
top: 200px;
|
|||
|
|
left: 30px;
|
|||
|
|
}
|
|||
|
|
.left-equ{
|
|||
|
|
width: 200px;
|
|||
|
|
height: 100px;
|
|||
|
|
background-size: 100% 100%;
|
|||
|
|
background-repeat:no-repeat;
|
|||
|
|
background-position:center center;
|
|||
|
|
margin-bottom: 7px;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
.left-equ-qdkqc{
|
|||
|
|
background-image: url(<%=request.getContextPath()%>/IMG/expo/equ_qdkqc.png);
|
|||
|
|
}
|
|||
|
|
.left-equ-czfj{
|
|||
|
|
background-image: url(<%=request.getContextPath()%>/IMG/expo/equ_czfj.png);
|
|||
|
|
}
|
|||
|
|
.left-equ-gylw{
|
|||
|
|
background-image: url(<%=request.getContextPath()%>/IMG/expo/equ_gylw.png);
|
|||
|
|
}
|
|||
|
|
.left-equ-mqby{
|
|||
|
|
background-image: url(<%=request.getContextPath()%>/IMG/expo/equ_mqby.png);
|
|||
|
|
}
|
|||
|
|
.left-equ-mqddc{
|
|||
|
|
background-image: url(<%=request.getContextPath()%>/IMG/expo/equ_mqddc.png);
|
|||
|
|
}
|
|||
|
|
.left-equ-srq{
|
|||
|
|
background-image: url(<%=request.getContextPath()%>/IMG/expo/equ_srq.png);
|
|||
|
|
}
|
|||
|
|
.left-equ-xhfj{
|
|||
|
|
background-image: url(<%=request.getContextPath()%>/IMG/expo/equ_xhfj.png);
|
|||
|
|
}
|
|||
|
|
.left-equ-zyl{
|
|||
|
|
background-image: url(<%=request.getContextPath()%>/IMG/expo/equ_zyl.png);
|
|||
|
|
}
|
|||
|
|
.left-equ-open{
|
|||
|
|
top: 33px;
|
|||
|
|
left: 80px;
|
|||
|
|
width: 50px;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
.left-equ-close{
|
|||
|
|
top: 33px;
|
|||
|
|
left: 135px;
|
|||
|
|
width: 50px;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
.left-equ-all{
|
|||
|
|
top: 72px;
|
|||
|
|
left: 94px;
|
|||
|
|
}
|
|||
|
|
.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;
|
|||
|
|
}
|
|||
|
|
.padding-topbottom-35{
|
|||
|
|
padding-top: 35px;
|
|||
|
|
padding-bottom: 35px;
|
|||
|
|
}
|
|||
|
|
.pad-topbottom-60{
|
|||
|
|
padding-top: 60px;
|
|||
|
|
padding-bottom: 60px;
|
|||
|
|
}
|
|||
|
|
.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-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;
|
|||
|
|
}
|
|||
|
|
.font-size-12{
|
|||
|
|
font-size: 12px;
|
|||
|
|
font-weight: 400;
|
|||
|
|
line-height: 24px;
|
|||
|
|
}
|
|||
|
|
.font-size-14{
|
|||
|
|
font-size: 14px;
|
|||
|
|
line-height: inherit;
|
|||
|
|
}
|
|||
|
|
.font-size-16{
|
|||
|
|
font-size: 16px;
|
|||
|
|
}
|
|||
|
|
.font-size-18{
|
|||
|
|
font-size: 18px;
|
|||
|
|
}
|
|||
|
|
.font-size-20{
|
|||
|
|
font-size: 20px;
|
|||
|
|
}
|
|||
|
|
.font-size-22{
|
|||
|
|
font-size: 22px;
|
|||
|
|
}
|
|||
|
|
.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: #FFFFFF;
|
|||
|
|
}
|
|||
|
|
.font-color-black{
|
|||
|
|
color: #0d2336;
|
|||
|
|
font-weight: 600;
|
|||
|
|
}
|
|||
|
|
.font-color-red{
|
|||
|
|
color: #CF0C0C;
|
|||
|
|
}
|
|||
|
|
.font-color-yellow{
|
|||
|
|
color: #FFF700;
|
|||
|
|
}
|
|||
|
|
.font-color-redlight{
|
|||
|
|
color: #CE00FF
|
|||
|
|
}
|
|||
|
|
.font-color-blue,.font-color-dark-blue{
|
|||
|
|
color: #1472FF;
|
|||
|
|
}
|
|||
|
|
.font-color-lightBlue,.font-color-light-blue{
|
|||
|
|
color: #00D2FF;
|
|||
|
|
}
|
|||
|
|
.font-color-green{
|
|||
|
|
color: #00EC1F;
|
|||
|
|
}
|
|||
|
|
.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;
|
|||
|
|
}
|
|||
|
|
</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 = ['#649DFF','#64FFFA','#ff2ee3','#2e97ff','#ffb536'];
|
|||
|
|
$(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 = [['00:00',0],['01:00',0],['02:00',0],['03:00',0]];
|
|||
|
|
var data1 = [['00:00',0],['01:00',0],['02:00',0],['03:00',0]];
|
|||
|
|
echarts_line('p2_temperature',data1,data2);
|
|||
|
|
echarts_line('p3_temperature',data1,data2);
|
|||
|
|
echarts_line('p4_temperature',data1,data2);
|
|||
|
|
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 + '/expo/getExpoData.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).parent().find('.nowdate').length > 0){
|
|||
|
|
$("."+arr.rows[i].elementCode).parent().find('.nowdate').html(nowdate.substring(11,16));
|
|||
|
|
}*/
|
|||
|
|
/*if(arr.rows[i].elementCode.indexOf("number_open")!= -1){
|
|||
|
|
if(Number(value)>0){
|
|||
|
|
$("."+arr.rows[i].elementCode).parent().removeClass("opacity-4");
|
|||
|
|
}else{
|
|||
|
|
$("."+arr.rows[i].elementCode).parent().addClass("opacity-4");
|
|||
|
|
}
|
|||
|
|
}*/
|
|||
|
|
|
|||
|
|
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);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
switch(windDirection) {
|
|||
|
|
case '1':
|
|||
|
|
windDirection = '北风';
|
|||
|
|
break;
|
|||
|
|
case '2':
|
|||
|
|
windDirection = '东北风';
|
|||
|
|
break;
|
|||
|
|
case '3':
|
|||
|
|
windDirection = '东风';
|
|||
|
|
break;
|
|||
|
|
case '4':
|
|||
|
|
windDirection = '东南风';
|
|||
|
|
break;
|
|||
|
|
case '5':
|
|||
|
|
windDirection = '南风';
|
|||
|
|
break;
|
|||
|
|
case '6':
|
|||
|
|
windDirection = '西南风';
|
|||
|
|
break;
|
|||
|
|
case '7':
|
|||
|
|
windDirection = '西风';
|
|||
|
|
break;
|
|||
|
|
case '8':
|
|||
|
|
windDirection = '西北风';
|
|||
|
|
break;
|
|||
|
|
default:
|
|||
|
|
windDirection = '无';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if($("#windDirection").length > 0){
|
|||
|
|
$("#windDirection").html(windDirection);
|
|||
|
|
}
|
|||
|
|
var equEle = [];
|
|||
|
|
var equEle_hot = ['left-equ-srq','left-equ-mqby','left-equ-mqddc','left-equ-qdkqc','left-equ-czfj'];
|
|||
|
|
var equEle_transition = ['left-equ-mqby','left-equ-mqddc','left-equ-qdkqc','left-equ-xhfj'];
|
|||
|
|
var equEle_cold = ['left-equ-zyl','left-equ-gylw','left-equ-mqby','left-equ-mqddc','left-equ-qdkqc','left-equ-xhfj'];
|
|||
|
|
if($("#transition").length > 0){
|
|||
|
|
switch(transition) {
|
|||
|
|
case '0':
|
|||
|
|
//$("#transition").attr("src",ext.contextPath + "/IMG/expo/cold.png");
|
|||
|
|
equEle = equEle_cold;
|
|||
|
|
break;
|
|||
|
|
case '1':
|
|||
|
|
//$("#transition").attr("src",ext.contextPath + "/IMG/expo/hot.png");
|
|||
|
|
equEle = equEle_hot;
|
|||
|
|
break;
|
|||
|
|
default:
|
|||
|
|
//$("#transition").attr("src",ext.contextPath + "/IMG/expo/transition.png");
|
|||
|
|
equEle = equEle_transition;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if(equEle!=null && equEle.length>0) {
|
|||
|
|
for (var e = 0; e < equEle.length; e++) {
|
|||
|
|
$("." + equEle[e]).removeClass("opacity-4");
|
|||
|
|
$("." + equEle[e]).parent().prepend($("." + equEle[e]));
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
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);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
//初始化mqtt
|
|||
|
|
if ('${mqttStatus}' == '0') {
|
|||
|
|
initialMqtt('expo_homepage_'+'${cu.id}'+Math.random());
|
|||
|
|
} 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 echarts_line_apprend(id,seriesdata1,seriesdata2){
|
|||
|
|
var lifeChart = echarts.getInstanceByDom(document.getElementById(id));
|
|||
|
|
//有的话就获取已有echarts实例的DOM节点。
|
|||
|
|
if (lifeChart != null) { // 如果存在，就进行销毁。
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
function echarts_line(id,seriesdata1,seriesdata2){
|
|||
|
|
var lifeChart = echarts.getInstanceByDom(document.getElementById(id));
|
|||
|
|
//有的话就获取已有echarts实例的DOM节点。
|
|||
|
|
if (lifeChart != null) { // 如果存在，就进行销毁。
|
|||
|
|
lifeChart.setOption({
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
name: '室外温度',
|
|||
|
|
type: 'line',
|
|||
|
|
//smooth: true,
|
|||
|
|
showSymbol: false,
|
|||
|
|
data: seriesdata1,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '场馆温度',
|
|||
|
|
type: 'line',
|
|||
|
|
//smooth: true,
|
|||
|
|
showSymbol: false,
|
|||
|
|
data: seriesdata2,
|
|||
|
|
areaStyle: {
|
|||
|
|
// 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置
|
|||
|
|
color: {
|
|||
|
|
type: 'linear',
|
|||
|
|
x: 0,
|
|||
|
|
y: 1,
|
|||
|
|
x2: 0,
|
|||
|
|
y2: 0,
|
|||
|
|
colorStops: [{
|
|||
|
|
offset: 0, color: 'rgba(255,255,255,0)' // 0% 处的颜色
|
|||
|
|
}, {
|
|||
|
|
offset: 1, color: 'rgba(214,255,0,0.7)' // 100% 处的颜色
|
|||
|
|
}],
|
|||
|
|
global: false // 缺省为 false
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
]
|
|||
|
|
})
|
|||
|
|
}else{
|
|||
|
|
var option = {
|
|||
|
|
color:['#00FFDD','#D6FF00'],
|
|||
|
|
animation: false ,
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'axis',
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
legend: {
|
|||
|
|
data: ['场馆温度', '室外温度'],
|
|||
|
|
right: '5%',
|
|||
|
|
icon: 'circle',
|
|||
|
|
textStyle: {
|
|||
|
|
color: '#70AFD8' ,
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
grid: {
|
|||
|
|
left: '5%',
|
|||
|
|
right: '5%',
|
|||
|
|
top: '28',
|
|||
|
|
bottom: '5%',
|
|||
|
|
show: true ,
|
|||
|
|
backgroundColor: 'rgba(24,45,95,0.7)',
|
|||
|
|
borderColor: '#1D5179' ,
|
|||
|
|
containLabel: true
|
|||
|
|
},
|
|||
|
|
xAxis: {
|
|||
|
|
type : 'time',
|
|||
|
|
boundaryGap: false,
|
|||
|
|
axisLine: {
|
|||
|
|
show: true,
|
|||
|
|
lineStyle: {
|
|||
|
|
color: '#1D5179'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
axisTick: {
|
|||
|
|
show: false ,
|
|||
|
|
},
|
|||
|
|
axisLabel: {
|
|||
|
|
color: '#70AFD8' ,
|
|||
|
|
/*formatter: function (value, index) {
|
|||
|
|
if(value.length>18){
|
|||
|
|
return value.substring(11,19);
|
|||
|
|
}else{
|
|||
|
|
return value;
|
|||
|
|
}
|
|||
|
|
}*/
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
yAxis: {
|
|||
|
|
type: 'value',
|
|||
|
|
splitNumber: 3,
|
|||
|
|
axisLine: {
|
|||
|
|
show: true,
|
|||
|
|
lineStyle: {
|
|||
|
|
color: '#1D5179'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
axisLabel: {
|
|||
|
|
color: '#70AFD8' ,
|
|||
|
|
},
|
|||
|
|
//网格样式
|
|||
|
|
splitLine: {
|
|||
|
|
show: true,
|
|||
|
|
lineStyle:{
|
|||
|
|
color: '#1D5179',
|
|||
|
|
width: 1,
|
|||
|
|
type: 'dashed'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
progressive: 20000,
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
name: '室外温度',
|
|||
|
|
type: 'line',
|
|||
|
|
//smooth: true,
|
|||
|
|
showSymbol: false,
|
|||
|
|
data: seriesdata1,
|
|||
|
|
//折线图在数据量远大于像素点时候的降采样策略，开启后可以有效的优化图表的绘制效率，默认关闭，也就是全部绘制不过滤数据点。
|
|||
|
|
// 可选：
|
|||
|
|
// 'lttb' 采用 Largest-Triangle-Three-Bucket 算法，可以最大程度保证采样后线条的趋势，形状和极值。
|
|||
|
|
// 'average' 取过滤点的平均值
|
|||
|
|
// 'min' 取过滤点的最小值
|
|||
|
|
// 'max' 取过滤点的最大值
|
|||
|
|
// 'minmax' 取过滤点绝对值的最大极值 (从 v5.5.0 开始支持)
|
|||
|
|
// 'sum' 取过滤点的和
|
|||
|
|
sampling: 'lttb',
|
|||
|
|
//开启大数据量优化，在数据特别多而出现图形卡顿时候开启
|
|||
|
|
large:true,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '场馆温度',
|
|||
|
|
type: 'line',
|
|||
|
|
//smooth: true,
|
|||
|
|
showSymbol: false,
|
|||
|
|
data: seriesdata2,
|
|||
|
|
areaStyle: {
|
|||
|
|
// 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置
|
|||
|
|
color: {
|
|||
|
|
type: 'linear',
|
|||
|
|
x: 0,
|
|||
|
|
y: 1,
|
|||
|
|
x2: 0,
|
|||
|
|
y2: 0,
|
|||
|
|
colorStops: [{
|
|||
|
|
offset: 0, color: 'rgba(255,255,255,0)' // 0% 处的颜色
|
|||
|
|
}, {
|
|||
|
|
offset: 1, color: 'rgba(214,255,0,0.7)' // 100% 处的颜色
|
|||
|
|
}],
|
|||
|
|
global: false // 缺省为 false
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
//折线图在数据量远大于像素点时候的降采样策略，开启后可以有效的优化图表的绘制效率，默认关闭，也就是全部绘制不过滤数据点。
|
|||
|
|
// 可选：
|
|||
|
|
// 'lttb' 采用 Largest-Triangle-Three-Bucket 算法，可以最大程度保证采样后线条的趋势，形状和极值。
|
|||
|
|
// 'average' 取过滤点的平均值
|
|||
|
|
// 'min' 取过滤点的最小值
|
|||
|
|
// 'max' 取过滤点的最大值
|
|||
|
|
// 'minmax' 取过滤点绝对值的最大极值 (从 v5.5.0 开始支持)
|
|||
|
|
// 'sum' 取过滤点的和
|
|||
|
|
sampling: 'lttb',
|
|||
|
|
//开启大数据量优化，在数据特别多而出现图形卡顿时候开启
|
|||
|
|
large:true,
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
]
|
|||
|
|
};
|
|||
|
|
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;
|
|||
|
|
//秒级数据，保留秒数，当前为6小时
|
|||
|
|
var dataNumber = 21600;
|
|||
|
|
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=='qdkqc_number_all') {
|
|||
|
|
console.log(value);
|
|||
|
|
}
|
|||
|
|
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.indexOf("number_open")!= -1){
|
|||
|
|
if(Number(value)>0){
|
|||
|
|
$("."+arr.elementCode).parent().removeClass("opacity-4");
|
|||
|
|
}else{
|
|||
|
|
$("."+arr.elementCode).parent().addClass("opacity-4");
|
|||
|
|
}
|
|||
|
|
}*/
|
|||
|
|
if(arr.elementCode=='windDirection'){
|
|||
|
|
windDirection = value;
|
|||
|
|
switch(windDirection) {
|
|||
|
|
case '1':
|
|||
|
|
windDirection = '北风';
|
|||
|
|
break;
|
|||
|
|
case '2':
|
|||
|
|
windDirection = '东北风';
|
|||
|
|
break;
|
|||
|
|
case '3':
|
|||
|
|
windDirection = '东风';
|
|||
|
|
break;
|
|||
|
|
case '4':
|
|||
|
|
windDirection = '东南风';
|
|||
|
|
break;
|
|||
|
|
case '5':
|
|||
|
|
windDirection = '南风';
|
|||
|
|
break;
|
|||
|
|
case '6':
|
|||
|
|
windDirection = '西南风';
|
|||
|
|
break;
|
|||
|
|
case '7':
|
|||
|
|
windDirection = '西风';
|
|||
|
|
break;
|
|||
|
|
case '8':
|
|||
|
|
windDirection = '西北风';
|
|||
|
|
break;
|
|||
|
|
default:
|
|||
|
|
windDirection = '无';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if($("#windDirection").length > 0){
|
|||
|
|
$("#windDirection").html(windDirection);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
if(arr.elementCode=='transition'){
|
|||
|
|
transition = value;
|
|||
|
|
//left-equ-czfj,left-equ-xhfj,left-equ-qdkqc,left-equ-mqddc,left-equ-mqby,left-equ-gylw,left-equ-zyl,left-equ-srq
|
|||
|
|
var equEle = [];
|
|||
|
|
var equEle_hot = ['left-equ-srq','left-equ-mqby','left-equ-mqddc','left-equ-qdkqc','left-equ-czfj'];
|
|||
|
|
var equEle_cold = ['left-equ-mqby','left-equ-mqddc','left-equ-qdkqc','left-equ-xhfj'];
|
|||
|
|
var equEle_transition = ['left-equ-zyl','left-equ-gylw','left-equ-mqby','left-equ-mqddc','left-equ-qdkqc','left-equ-xhfj'];
|
|||
|
|
if($("#transition").length > 0){
|
|||
|
|
switch(transition) {
|
|||
|
|
case '0':
|
|||
|
|
//$("#transition").attr("src",ext.contextPath + "/IMG/expo/cold.png");
|
|||
|
|
equEle = equEle_cold;
|
|||
|
|
break;
|
|||
|
|
case '1':
|
|||
|
|
//$("#transition").attr("src",ext.contextPath + "/IMG/expo/hot.png");
|
|||
|
|
equEle = equEle_hot;
|
|||
|
|
break;
|
|||
|
|
default:
|
|||
|
|
//$("#transition").attr("src",ext.contextPath + "/IMG/expo/transition.png");
|
|||
|
|
equEle = equEle_transition;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if(equEle!=null && equEle.length>0) {
|
|||
|
|
$(".left-equ").each(function(i){//i表示下标索引
|
|||
|
|
if(!$(this).hasClass("opacity-4")){
|
|||
|
|
$(this).addClass("opacity-4");
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
for (var e = 0; e < equEle.length; e++) {
|
|||
|
|
$("." + equEle[e]).removeClass("opacity-4");
|
|||
|
|
$("." + equEle[e]).parent().prepend($("." + equEle[e]));
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
if(arr.elementCode=='p2_temperature_sw'){
|
|||
|
|
p2_temperature_sw = value;
|
|||
|
|
p2_temperature_date = measuredt;
|
|||
|
|
if(p2_temperature_sw_seriesdata.length>dataNumber){
|
|||
|
|
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="whole-body content-wrapper-bg content-wrapper-bg-darkblue">
|
|||
|
|
<!-- BEGIN CONTAINER -->
|
|||
|
|
<input type="hidden" name="jsp_id" id="jsp_id" value="expo_homepage">
|
|||
|
|
<div class="whole-body content-wrapper-bg content-wrapper-bg-main text-center font-size-36 font-color-white">
|
|||
|
|
<%--<div class="whole-element top-title"><iframe style="height:100%;width:100%;" frameborder="1" scrolling="no" id="top-url"></iframe></div>--%>
|
|||
|
|
<div class="whole-element top-title cursor-pointer" onclick="openExpoHomepage()">上海温室花园环境控制系统</div>
|
|||
|
|
<div class="whole-element top-weather">
|
|||
|
|
<div class="top-weather-element border-right" style="width: 233.5px;">
|
|||
|
|
<div class="text-right row-100" style="float: left;width: 120px;">
|
|||
|
|
<div class="top-date font-size-18"></div>
|
|||
|
|
<div class="top-time font-size-30"></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="row-100" style="float: left;width: 111.4px;">
|
|||
|
|
<img class="dayOrNight" src="<%=request.getContextPath()%>/IMG/expo/day.png">
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="top-weather-element border-right" style="width: 221px;">
|
|||
|
|
<div class="col-xs-6 row-100 line-height-2 font-size-33" id="windDirection"></div>
|
|||
|
|
<div class="col-xs-6 row-100 text-left ">
|
|||
|
|
<div class="font-size-14">当前温度</div>
|
|||
|
|
<div class="font-size-22"><span class="temperature font-size-35">0</span>℃</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="top-weather-element border-right text-left" style="width: 172px;">
|
|||
|
|
<div class="col-xs-12 font-size-18 row-50 line-height-2 padding-left-20">降雨量<span class="precip">0</span>mm/h</div>
|
|||
|
|
<%--<div class="col-xs-12 font-size-18 row-50 line-height-2 padding-left-20">气压<span class="illumination">0</span>hpa</div>--%>
|
|||
|
|
<div class="col-xs-12 font-size-18 row-50 line-height-2 padding-left-20">光照度<span class="illumination">0</span>lux</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="top-weather-element border-right text-left" style="width: 140px;">
|
|||
|
|
<div class="col-xs-12 font-size-18 row-50 line-height-2 padding-left-15">风速<span class="windSpeed">0</span>m/s</div>
|
|||
|
|
<div class="col-xs-12 font-size-18 row-50 line-height-2 padding-left-15">湿度<span class="humidity">0</span>%</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="top-weather-element padding-leftright-15">
|
|||
|
|
<img src="<%=request.getContextPath()%>/IMG/expo/weather.png" id="transition">
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class=" whole-element top-menu">温室总览</div>
|
|||
|
|
<div class="whole-element top-menu-list">
|
|||
|
|
<div class="top-menu-list-option cursor-pointer" onclick="locationhref('/process/dataVisualFrame/view.do?frameId=d7ba67ff2b124d679c325852811bef3c&unitId=021SHSB')">1号馆海市沙洲</div>
|
|||
|
|
<div class="top-menu-list-option cursor-pointer" onclick="locationhref('/process/dataVisualFrame/view.do?frameId=d2535488d8934c83b6630279b9c2d547&unitId=021SHSB')">2号馆云上森林</div>
|
|||
|
|
<div class="top-menu-list-option cursor-pointer" onclick="locationhref('/process/dataVisualFrame/view.do?frameId=52713970e59d42c1959bf2c610ce071a&unitId=021SHSB')">3号馆云雾峡谷</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="whole-element whole-left font-size-28">
|
|||
|
|
<div class="left-equ left-equ-czfj opacity-4">
|
|||
|
|
<span class="left-equ-number left-equ-open font-color-green czfj_number_open">0</span>
|
|||
|
|
<span class="left-equ-number left-equ-close font-color-red czfj_number_close">0</span>
|
|||
|
|
<div class="left-equ-number left-equ-all font-size-14">共： <span class="czfj_number_all">0</span>组</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="left-equ left-equ-xhfj opacity-4">
|
|||
|
|
<span class="left-equ-number left-equ-open font-color-green xhfj_number_open">0</span>
|
|||
|
|
<span class="left-equ-number left-equ-close font-color-red xhfj_number_close">0</span>
|
|||
|
|
<div class="left-equ-number left-equ-all font-size-14">共： <span class="xhfj_number_all">0</span>组</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="left-equ left-equ-qdkqc opacity-4">
|
|||
|
|
<span class="left-equ-number left-equ-open font-color-green qdkqc_number_open">0</span>
|
|||
|
|
<span class="left-equ-number left-equ-close font-color-red qdkqc_number_close">0</span>
|
|||
|
|
<div class="left-equ-number left-equ-all font-size-14">共： <span class="qdkqc_number_all">0</span>组</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="left-equ left-equ-mqddc opacity-4">
|
|||
|
|
<span class="left-equ-number left-equ-open font-color-green mqddc_number_open">0</span>
|
|||
|
|
<span class="left-equ-number left-equ-close font-color-red mqddc_number_close">0</span>
|
|||
|
|
<div class="left-equ-number left-equ-all font-size-14">共： <span class="mqddc_number_all">0</span>组</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="left-equ left-equ-mqby opacity-4">
|
|||
|
|
<span class="left-equ-number left-equ-open font-color-green mqby_number_open">0</span>
|
|||
|
|
<span class="left-equ-number left-equ-close font-color-red mqby_number_close">0</span>
|
|||
|
|
<div class="left-equ-number left-equ-all font-size-14">共： <span class="mqby_number_all">0</span>组</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="left-equ left-equ-gylw opacity-4">
|
|||
|
|
<span class="left-equ-number left-equ-open font-color-green gylw_number_open">0</span>
|
|||
|
|
<span class="left-equ-number left-equ-close font-color-red gylw_number_close">0</span>
|
|||
|
|
<div class="left-equ-number left-equ-all font-size-14">共： <span class="gylw_number_all">0</span>组</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="left-equ left-equ-zyl opacity-4">
|
|||
|
|
<span class="left-equ-number left-equ-open font-color-green zyl_number_open">0</span>
|
|||
|
|
<span class="left-equ-number left-equ-close font-color-red zyl_number_close">0</span>
|
|||
|
|
<div class="left-equ-number left-equ-all font-size-14">共： <span class="zyl_number_all">0</span>组</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="left-equ left-equ-srq opacity-4">
|
|||
|
|
<span class="left-equ-number left-equ-open font-color-green srq_number_open">0</span>
|
|||
|
|
<span class="left-equ-number left-equ-close font-color-red srq_number_close">0</span>
|
|||
|
|
<div class="left-equ-number left-equ-all font-size-14">共： <span class="srq_number_all">0</span>组</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class=" whole-element p-data p2-data">
|
|||
|
|
<div class="p-data-title"></div>
|
|||
|
|
<div class="p-data-pie font-size-28 line-height-1">
|
|||
|
|
<div class="whole-element p-data-pie-number p-data-pie-number-top p2-temperature">0</div>
|
|||
|
|
<div class="whole-element p-data-pie-number p-data-pie-number-top p2-humidity">0</div>
|
|||
|
|
<div class="whole-element p-data-pie-number p-data-pie-number-top p2-co2">0</div>
|
|||
|
|
<div class="whole-element p-data-pie-number p-data-pie-number-top p2-windSpeed">0</div>
|
|||
|
|
<div class="whole-element p-data-pie-number p-data-pie-number-top p2-illuminance">0</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="p-data-line" id="p2_temperature"></div>
|
|||
|
|
</div>
|
|||
|
|
<div class=" whole-element p-data p3-data">
|
|||
|
|
<div class="p-data-title"></div>
|
|||
|
|
<div class="p-data-pie font-size-28 line-height-1">
|
|||
|
|
<div class="whole-element p-data-pie-number p-data-pie-number-top p3-temperature">0</div>
|
|||
|
|
<div class="whole-element p-data-pie-number p-data-pie-number-top p3-humidity">0</div>
|
|||
|
|
<div class="whole-element p-data-pie-number p-data-pie-number-top p3-co2">0</div>
|
|||
|
|
<div class="whole-element p-data-pie-number p-data-pie-number-top p3-windSpeed">0</div>
|
|||
|
|
<div class="whole-element p-data-pie-number p-data-pie-number-top p3-illuminance">0</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="p-data-line" id="p3_temperature"></div>
|
|||
|
|
</div>
|
|||
|
|
<div class=" whole-element p-data p4-data">
|
|||
|
|
<div class="p-data-title"></div>
|
|||
|
|
<div class="p-data-pie font-size-28 line-height-1">
|
|||
|
|
<div class="whole-element p-data-pie-number p-data-pie-number-top p4-temperature">0</div>
|
|||
|
|
<div class="whole-element p-data-pie-number p-data-pie-number-top p4-humidity">0</div>
|
|||
|
|
<div class="whole-element p-data-pie-number p-data-pie-number-top p4-co2">0</div>
|
|||
|
|
<div class="whole-element p-data-pie-number p-data-pie-number-top p4-windSpeed">0</div>
|
|||
|
|
<div class="whole-element p-data-pie-number p-data-pie-number-top p4-illuminance">0</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="p-data-line" id="p4_temperature"></div>
|
|||
|
|
</div>
|
|||
|
|
<div class=" whole-element p1-data">
|
|||
|
|
<div style="width: 100%;height: 100%;position: relative">
|
|||
|
|
<div class="whole-element p1-data-element now-people-number-element font-size-14"><span class="now-people-number font-size-30 font-color-lightBlue">0</span>人</div>
|
|||
|
|
<div class="whole-element p1-data-element max-bear-capacity-element font-size-14"><span class="max-bear-capacity font-size-30 font-color-lightBlue">0</span>人</div>
|
|||
|
|
<div class="whole-element p1-data-element p1-temperature font-size-40 line-height-1">0</div>
|
|||
|
|
<div class="whole-element p1-data-element p1-humidity font-size-40 line-height-1">0</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="whole-element cursor-pointer p-url p2-url" onclick="locationhref('/process/dataVisualFrame/view.do?frameId=d7ba67ff2b124d679c325852811bef3c&unitId=021SHSB&userId=emp01')"></div>
|
|||
|
|
<div class="whole-element cursor-pointer p-url p3-url" onclick="locationhref('/process/dataVisualFrame/view.do?frameId=d2535488d8934c83b6630279b9c2d547&unitId=021SHSB&userId=emp01')"></div>
|
|||
|
|
<div class="whole-element cursor-pointer p-url p4-url" onclick="locationhref('/process/dataVisualFrame/view.do?frameId=52713970e59d42c1959bf2c610ce071a&unitId=021SHSB&userId=emp01')"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</body>
|
|||
|
|
</html>
|