Files
SIPAIIS_WMS_JSSW/WebRoot/jsp/visual/expo_top.jsp

928 lines
30 KiB
Plaintext
Raw Normal View History

2026-01-16 14:13:44 +08:00
<%@ 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"%>
<!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>
<style type="text/css">
.whole-body{
width: 1920px;
height: 140px;
}
.content-wrapper-bg{
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-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-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: 40px;
}
.p2-humidity,.p3-humidity,.p4-humidity{
left: 153px;
}
.p2-co2,.p3-co2,.p4-co2{
left: 265px;
}
.p2-windSpeed,.p3-windSpeed,.p4-windSpeed{
left: 379px;
}
.p-data-line{
width: 500px;
height: 150px;
}
.p-url{
width: 155px;
height: 40px;
}
.p2-url{
top: 430px;
left: 790px;
}
.p3-url{
top: 385px;
left: 1180px;
}
.p4-url{
top: 595px;
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-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-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 () {
$('.top-menu-list').hide();
$(".top-menu").on("click", function (e) {
$(".top-menu-list").toggle();
});
});
function addAndRemove4Class(one,two){
$('.'+one).addClass(two);
$('.'+one).removeClass(one);
}
function getData(){
var bizid = "";
var jsp_id = $('#jsp_id').val();
var time_input = $('#time_input').val();
$.post(ext.contextPath + '/expo/getEvaluateData.do', {bizid:bizid,time:time_input,jsp_id:jsp_id} , function(data) {
var arr= JSON.parse(data);
console.log(arr);
var pressure_cumulative_seriesdata = [];
var pressure_actual_seriesdata = [];
var reservoir_lvl_seriesdata = [];
var reservoir_pump_seriesdata = [];
var rawwater_water_seriesdata = [];
var pressure_dispatch_seriesdata = [];
var instructions_line_seriesdata = [];
var production_load_rate = null;
var automatic_execution_rate = null;
var cumulative_times_today = 0;
var automatic_execution_times = 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;
var nowdate = getNowTime();
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!=''){
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!=''){
value = visualCacheData.inivalue;
}else{
if(visualCacheData.value!=null && visualCacheData.value!=undefined && visualCacheData.value!=''){
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!=''){
value = mPoint.parmvalue;
}
if(mPoint.alarmmax!=null && mPoint.alarmmax!=undefined && mPoint.alarmmax!=''){
dataMax = mPoint.alarmmax;
}
if(mPoint.numtail!=null && mPoint.numtail!=undefined && mPoint.numtail!=''){
numtail = mPoint.numtail;
}
if(mPoint.measuredt!=null && mPoint.measuredt!=undefined && mPoint.measuredt!=''){
nowdate = mPoint.measuredt;
}
}
}
}
if(visualCacheData.numtail!=null && visualCacheData.numtail!=undefined && visualCacheData.numtail!=''){
numtail = visualCacheData.numtail;
}
if(visualCacheData.insdt!=null && visualCacheData.insdt!=undefined && visualCacheData.insdt!=''){
nowdate = visualCacheData.insdt;
}
if(visualCacheData.rate!=null && visualCacheData.rate!=undefined && visualCacheData.rate!=''){
rate = visualCacheData.rate;
}
}else{
var mPoint = arr.rows[i].mPoint;
if(mPoint!=null && mPoint!=undefined && mPoint!=''){
if(mPoint.parmvalue!=null && mPoint.parmvalue!=undefined && mPoint.parmvalue!=''){
value = mPoint.parmvalue;
}
if(mPoint.alarmmax!=null && mPoint.alarmmax!=undefined && mPoint.alarmmax!=''){
dataMax = mPoint.alarmmax;
}
if(mPoint.numtail!=null && mPoint.numtail!=undefined && mPoint.numtail!=''){
numtail = mPoint.numtail;
}
if(mPoint.measuredt!=null && mPoint.measuredt!=undefined && mPoint.measuredt!=''){
nowdate = mPoint.measuredt;
}
}
}
if($("."+arr.rows[i].elementCode+"_img").length > 0){
var src = "<%=request.getContextPath()%>/IMG/expo/pump_grey.png";
if(value==0){
src = "<%=request.getContextPath()%>/IMG/expo/pump_green.png";
}
if(value==1){
src = "<%=request.getContextPath()%>/IMG/expo/pump_red.png";
}
$("."+arr.rows[i].elementCode+"_img").html('<img class="img-pump" src='+src+'>');
}
if($("."+arr.rows[i].elementCode+"_text").length > 0){
var text = "";
if(value==1){
text = "运行";
}else{
text = "检修";
}
$("."+arr.rows[i].elementCode+"_text").html(text);
}
value = parseFloat(value)*rate;
value = value.toFixed(numtail);
if($("."+arr.rows[i].elementCode).length > 0){
$("."+arr.rows[i].elementCode).html(toThousands(value));
}
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=='cumulative_times_today'){
instructions_line_seriesdata = getdataseries(arr.rows[i].mPointHistory,arr.rows[i].visualCacheDataList,numtail);
cumulative_times_today = value;
}
if(arr.rows[i].elementCode=='automatic_execution_times'){
automatic_execution_times = value;
}
if(arr.rows[i].elementCode=='pressure_cumulative'){
pressure_cumulative_seriesdata = getdataseries(arr.rows[i].mPointHistory,arr.rows[i].visualCacheDataList,numtail);
}
if(arr.rows[i].elementCode=='pressure_actual'){
pressure_actual_seriesdata = getdataseries(arr.rows[i].mPointHistory,arr.rows[i].visualCacheDataList,numtail);
}
if(arr.rows[i].elementCode=='reservoir_lvl'){
reservoir_lvl_seriesdata = getdataseries(arr.rows[i].mPointHistory,arr.rows[i].visualCacheDataList,numtail);
}
if(arr.rows[i].elementCode=='reservoir_pump'){
reservoir_pump_seriesdata = getdataseries(arr.rows[i].mPointHistory,arr.rows[i].visualCacheDataList,numtail);
}
if(arr.rows[i].elementCode=='rawwater_water'){
rawwater_water_seriesdata = getdataseries(arr.rows[i].mPointHistory,arr.rows[i].visualCacheDataList,numtail);
}
if(arr.rows[i].elementCode=='pressure_dispatch'){
pressure_dispatch_seriesdata = getdataseries(arr.rows[i].mPointHistory,arr.rows[i].visualCacheDataList,numtail);
}
}
}
var pressure_cumulative_legenddata = ['累计压力调整'];
var seriesdata = [
{
name: pressure_cumulative_legenddata[0],
type: 'line',
data: pressure_cumulative_seriesdata
}
]
if(pressure_cumulative_seriesdata!=null && pressure_cumulative_seriesdata.length>0){
echarts_line('pressure-cumulative',pressure_cumulative_legenddata,seriesdata,'累计压力调整');
}
});
}
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,16));
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(id,seriesdata1,seriesdata2){
var lifeChart = echarts.getInstanceByDom(document.getElementById(id));
//有的话就获取已有echarts实例的DOM节点。
if (lifeChart != null) { // 如果存在,就进行销毁。
lifeChart.dispose();
}
var option = {
color:['#00FFDD','#D6FF00'],
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 : 'category',
boundaryGap: false,
axisLine: {
show: true,
lineStyle: {
color: '#1D5179'
}
},
axisTick: {
show: false ,
},
axisLabel: {
color: '#70AFD8' ,
formatter: function (value, index) {
if(value.length>15){
return value.substring(11,16);
}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'
}
}
},
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
}
},
},
]
};
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 locationhref = function (url) {
window.opener.location.href = ext.contextPath + url;
}
</script>
</head>
<body>
<div class="whole-body content-wrapper-bg content-wrapper-bg-darkblue">
<!-- BEGIN CONTAINER -->
<input type="hidden" name="jsp_id" id="jsp_id" value="expo_top">
<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">世博文化公园展览温室环境控制系统</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">2023-10-24</div>
<div class="top-time font-size-30">15:55:00</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 weather">多云</div>
<div class="col-xs-6 row-100 text-left ">
<div class="top-date font-size-14">当前温度</div>
<div class="top-time font-size-40"><span class="temperature">25</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="temperature">0</span>mm</div>
<div class="col-xs-12 font-size-18 row-50 line-height-2 padding-left-20">光照度<span class="temperature">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-20">风速<span class="temperature">0</span>m/s</div>
<div class="col-xs-12 font-size-18 row-50 line-height-2 padding-left-20">湿度<span class="temperature">0</span>%RH</div>
</div>
<div class="top-weather-element padding-leftright-15">
<img src="<%=request.getContextPath()%>/IMG/expo/transition.png">
</div>
</div>
<div class=" whole-element top-menu">温室总览</div>
<div class="whole-element top-menu-list">
<div class="top-menu-list-option cursor-pointer" data-value="2">P2海市沙洲</div>
<div class="top-menu-list-option cursor-pointer" data-value="3">P3云上森林</div>
<div class="top-menu-list-option cursor-pointer" data-value="4">P4云雾峡谷</div>
</div>
</div>
</div>
</body>
</html>