Files
bigscreen/移动能效管理/index.html
zhangxiaohui 7de493738d update
2021-04-14 09:28:56 +08:00

1167 lines
67 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<!--[if IE 9 ]><html class="ie9"><![endif]--><head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<meta name="format-detection" content="telephone=no">
<meta charset="UTF-8">
<meta name="description" content="Violate Responsive Admin Template">
<meta name="keywords" content="Super Admin, Admin, Template, Bootstrap">
<title>移动能耗管理平台响应式网站后台模板</title>
<meta name="description" content="" />
<meta name="keywords" content="炫酷,响应式,能耗管理,后台管理,网站模板,全套下载" />
<meta name="author" content="js代码" />
<meta name="Copyright" content="js代码" />
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="js/bootstrap-3.3.4.css">
<link rel="stylesheet" type="text/css" href="js/font-awesome.4.6.0.css">
<link href="css/animate.min.css" rel="stylesheet">
<link href="css/form.css" rel="stylesheet">
<link href="css/calendar.css" rel="stylesheet">
<link href="css/media-player.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/icons.css" rel="stylesheet">
<link href="css/generics.css" rel="stylesheet">
<!--<link rel="stylesheet" href="css/reset.css">-->
<link rel="stylesheet" href="css/jquery.hotspot.css">
</head>
<style type="text/css">
.r_out {width:120px; height:120px; border:2px solid #d9d9d9; background:#fff; box-shadow:3px 3px 5px #bfbfbf; -webkit-box-shadow:3px 3px 5px #bfbfbf; -moz-box-shadow:3px 3px 5px #bfbfbf; -ms-box-shadow:3px 3px 5px #bfbfbf; border-radius:50%; -webkit-border-radius:50%; -moz-border-radius:50%; -ms_border-radius:50%; display:inline-block; margin-right:90px; position:relative;}
.r_out p {position:absolute; /**bottom:-50px;*/ color:#fff; text-align:center; margin:0 auto; width:100%; font-size:14px; line-height:1.5; font-weight:bold;}
.r_in {width:120px; height:120px; border:10px solid #fff; border-radius:50%; -webkit-border-radius:50%; -moz-border-radius:50%; -ms_border-radius:50%; overflow:hidden; position:relative;}
.r_c {width:120px; height:120px; position:absolute; bottom:0; left:0; height:0;}
.c1 {background:#fbad4c;}
.c2 {background:#fff143;}
.c3 {background:#c9dd22;}
.c4 {background:#00e079;}
.c5 {background:#0eb83a;}
.r_num {color:#404040; font-size:23px; line-height:1.5; font-weight:bold; position:absolute; top:50%; margin-top:-25px; text-align:center; width:100%;}
</style>
<body id="skin-blur-blue">
<header id="header" class="media">
<a href="" id="menu-toggle"></a>
<a class="logo pull-left" href="index.html" style="width: 233px">移动能效管理平台</a>
<div class="media-body">
<div class="media" id="top-menu">
<div class="pull-left tm-icon">
<a data-drawer="messages" class="drawer-toggle" href="">
<i class="sa-top-message"></i>
<i class="n-count animated">5</i>
<span>实时消息</span>
</a>
</div>
<div class="pull-left tm-icon">
<a data-drawer="notifications" class="drawer-toggle" href="">
<i class="sa-top-updates"></i>
<i class="n-count animated">9</i>
<span>告警信息</span>
</a>
</div>
<div id="time" class="pull-right">
<span id="hours"></span>
:
<span id="min"></span>
:
<span id="sec"></span>
</div>
<div class="media-body">
<input type="text" class="main-search">
</div>
</div>
</div>
</header>
<div class="clearfix"></div>
<section id="main" class="p-relative" role="main">
<!-- Sidebar -->
<aside id="sidebar" style="width: 233px">
<!-- Sidbar Widgets -->
<div class="side-widgets overflow">
<!-- Profile Menu -->
<!-- Video -->
<div class="tile">
<h2 class="tile-title">行业动态</h2>
<div class="tile-config dropdown">
<a data-toggle="dropdown" href="" class="tooltips tile-menu" title="" data-original-title="Options"></a>
<ul class="dropdown-menu pull-right text-right">
<li><a href="">Edit</a></li>
<li><a href="">Delete</a></li>
</ul>
</div>
<video width="100%" height="100%" id="multiCodec" poster="img/media-player/media-player-poster.jpg" controls preload="none"> <!-- id could be any according to you -->
<!-- MP4 source must come first for iOS -->
<source type="video/mp4" src="media/Mobiledepre480.MP4" />
<!-- WebM for Firefox 4 and Opera -->
<source type="video/webm" src="media/echohereweare.webm" />
<!-- OGG for Firefox 3 -->
<source type="video/ogg" src="media/echohereweare.ogv" />
<!-- Fallback flash player for no-HTML5 browsers with JavaScript turned off -->
<object width="100%" height="100%" type="application/x-shockwave-flash" data="media/flashmediaelement.swf">
<param name="movie" value="media/flashmediaelement.swf" />
<param name="flashvars" value="controls=true&amp;poster=img/media-player/media-player-poster.jpg&amp;file=media/Mobiledepre480.MP4" />
<!-- Image fall back for non-HTML5 browser with JavaScript turned off and no Flash player installed -->
<img src="img/media-player/media-player-poster.jpg" width="100%" height="100%" alt="Media" title="No video playback capabilities" />
</object>
</video>
</div>
<!-- Calendar -->
<div class="s-widget m-b-25">
<div id="sidebar-calendar"></div>
</div>
<!-- Feeds -->
<div class="s-widget m-b-25">
<h2 class="tile-title">
访客
</h2>
<div class="alert alert-success alert-icon">
<span style="margin-left:8px;">今日访问:1893次</span>
<i class="icon">&#61845;</i>
</div>
<div class="alert alert-info alert-icon">
<span style="margin-left:8px;">累计访问:14562次</span>
<i class="icon">&#61770;</i>
</div>
</div>
<!--Weather forecast-->
<div class="panel weather-info">
<div class="turquoise-bg white-text top-radius">
<div class="panel-body">
<div class="row">
<div class="col-xs-5">
<div class="text-center">
<i class="big-icon ico-cloudy"></i>
</div>
</div>
<div class="col-xs-7">
<div class="text-center">
<div class="degree">-4</div>
<div>多云,北风3-4级</div>
<div>实时气温-4℃较冷</div>
<div class="d-value"><span>-9</span> / <span>14</span></div>
</div>
</div>
</div>
</div>
</div>
<div class="weather-location dark-turquoise-bg">
<form role="form" class="form-horizontal">
<div class="form-group">
<div class="col-lg-12">
<input type="text" placeholder="位置..." class="form-control find-loc">
</div>
</div>
</form>
</div>
<div class="panel-body">
<ul class="weather-forecast ">
<li class="first"><a id="su" href="javascript:;" ><strong></strong><span><i class="ico-cloudy"></i></span><span class="d-value">31</span></a></li>
<li><a id="mo" href="javascript:;" ><strong></strong><span><i class=" ico-rainy2"></i></span><span class="d-value">20</span></a></li>
<li><a class="active" id="tu" href="javascript:;" ><strong></strong><span><i class=" ico-lightning3"></i></span><span class="d-value">27</span></a></li>
<li><a id="we" href="javascript:;" ><strong></strong><span><i class=" ico-sun3"></i></span><span class="d-value">23</span></a></li>
<li><a id="th" href="javascript:;" ><strong></strong><span><i class=" ico-snowy3"></i></span><span class="d-value">26</span></a></li>
<li><a id="fr" href="javascript:;" ><strong></strong><span><i class=" ico-cloudy "></i></span><span class="d-value">32</span></a></li>
<li class="last"><a id="sa" href="javascript:;" ><strong></strong><span><i class=" ico-lightning3 "></i></span><span class="d-value">24</span></a></li>
</ul>
</div>
</div>
<div class="tile">
<h2 class="tile-title">系统导航</h2>
<div class="list-group list-group-flat m-t-15">
<a href="#" class="list-group-item"><span class="message-tag progress-bar-warning"></span>办公自动化OA系统</a>
<a href="#" class="list-group-item"><span class="message-tag progress-bar-danger"></span>财务管理系统</a>
<a href="#" class="list-group-item"><span class="message-tag progress-bar-info"></span>机房管理系统</a>
<a href="#" class="list-group-item"><span class="message-tag progress-bar-success"></span>空调管理系统</a>
</div>
</div>
</div>
<!-- Side Menu -->
<ul class="list-unstyled side-menu">
<li class="active">
<a class="sa-side-home" href="index.html">
<span class="menu-item">运行监测</span>
</a>
</li>
<li>
<a class="sa-side-typography" href="keyInfo.html">
<span class="menu-item">KPI</span>
</a>
</li>
<li>
<a class="sa-side-widget" href="mstp_map.html">
<span class="menu-item">全息图概览</span>
</a>
</li>
<li>
<a class="sa-side-form" href="efficiencyAnalysis.html">
<span class="menu-item">能耗统计</span>
</a>
</li>
<li>
<a class="sa-side-ui" href="dianfei.html">
<span class="menu-item">电费管理</span>
</a>
</li>
<li>
<a class="sa-side-photos" href="deviceManager.html">
<span class="menu-item">设备管理</span>
</a>
</li>
<li>
<a class="sa-side-folder" href="energy_consumption.html">
<span class="menu-item">报表管理</span>
</a>
</li>
<li>
<a class="sa-side-calendar" href="userMng.html">
<span class="menu-item">用户管理</span>
</a>
</li>
<li class="dropdown">
<a class="sa-side-page" href="">
<span class="menu-item">系统设置</span>
</a>
</li>
</ul>
</aside>
<!-- Content -->
<section id="content" class="container" style="margin-left: 233px">
<!-- Messages Drawer -->
<div id="messages" class="tile drawer animated">
<div class="listview narrow">
<div class="media">
<a href="">新消息</a>
<span class="drawer-close">&times;</span>
</div>
<div class="overflow" style="height: 254px">
<div class="media">
<div class="pull-left">
<img width="40" src="img/profile-pics/1.png" alt="">
</div>
<div class="media-body">
<small class="text-muted">调度班长 - 2分钟前</small><br>
<a class="t-overflow" href="">空调系统数据采集异常,请工作人员检查。</a>
</div>
</div>
<div class="media">
<div class="pull-left">
<img width="40" src="img/profile-pics/2.png" alt="">
</div>
<div class="media-body">
<small class="text-muted">值班专员 - 15分钟前</small><br>
<a class="t-overflow" href="">办公室供暖系统出现异常,无法提供正常供暖,请排除故障!</a>
</div>
</div>
<div class="media">
<div class="pull-left">
<img width="40" src="img/profile-pics/3.png" alt="">
</div>
<div class="media-body">
<small class="text-muted">自动化班长 - 3小时前</small><br>
<a class="t-overflow" href="">能源费用分布图以及报表数据有误差,请核对</a>
</div>
</div>
<div class="media">
<div class="pull-left">
<img width="40" src="img/profile-pics/4.png" alt="">
</div>
<div class="media-body">
<small class="text-muted">值班人员 - 3小时前</small><br>
<a class="t-overflow" href="">锅炉房水温过高,告警系统启动,请及时查看.</a>
</div>
</div>
<div class="media">
<div class="pull-left">
<img width="40" src="img/profile-pics/1.jpg" alt="">
</div>
<div class="media-body">
<small class="text-muted">办公室 - 4小时前</small><br>
<a class="t-overflow" href="">请各部门提供上周能耗统计数据,本周将针对关键能耗点进行技术优化</a>
</div>
</div>
<div class="media">
<div class="pull-left">
<img width="40" src="img/profile-pics/2.jpg" alt="">
</div>
<div class="media-body">
<small class="text-muted">值班专员 - 5小时前</small><br>
<a class="t-overflow" href="">自动化班提供1#机房总耗电量远远超过预测值,请再次核对数据并及时告知!</a>
</div>
</div>
<div class="media">
<div class="pull-left">
<img width="40" src="img/profile-pics/3.png" alt="">
</div>
<div class="media-body">
<small class="text-muted">办公室 - 6小时前</small><br>
<a class="t-overflow" href="">请提供“人均空调系统能耗”和“制冷系统能效比”两组数据</a>
</div>
</div>
<div class="media">
<div class="pull-left">
<img width="40" src="img/profile-pics/4.jpg" alt="">
</div>
<div class="media-body">
<small class="text-muted">办公室专责 - 6小时前</small><br>
<a class="t-overflow" href="">请调度班提供2#机房和3#基站的能耗统计数据.</a>
</div>
</div>
<div class="media">
<div class="pull-left">
<img width="40" src="img/profile-pics/5.png" alt="">
</div>
<div class="media-body">
<small class="text-muted">网管中心 - 7小时前</small><br>
<a class="t-overflow" href="">今天凌晨将进行断网检修,请各部门及时下载相关材料</a>
</div>
</div>
</div>
<div class="media text-center whiter l-100">
<a href=""><small>查看所有</small></a>
</div>
</div>
</div>
<!-- Notification Drawer -->
<div id="notifications" class="tile drawer animated">
<div class="listview narrow">
<div class="media">
<a href="">实时告警</a>
<span class="drawer-close">&times;</span>
</div>
<div class="overflow" style="height: 254px">
<div class="media">
<div class="pull-left">
<img width="40" src="img/profile-pics/1.png" alt="">
</div>
<div class="media-body">
<small class="text-muted">值班人员 - 35秒前</small><br>
<a class="t-overflow" href="">供暖系统能耗数据采集异常</a>
</div>
</div>
<div class="media">
<div class="pull-left">
<img width="40" src="img/profile-pics/3.jpg" alt="">
</div>
<div class="media-body">
<small class="text-muted">调度值班室 - 1分钟前</small><br>
<a class="t-overflow" href="">办公照明系统出现故障,请立即检修!</a>
</div>
</div>
<div class="media">
<div class="pull-left">
<img width="40" src="img/profile-pics/3.png" alt="">
</div>
<div class="media-body">
<small class="text-muted">办公室 - 2分钟前</small><br>
<a class="t-overflow" href="">办公区空调1#机组无法正常工作,异响</a>
</div>
</div>
<div class="media">
<div class="pull-left">
<img width="40" src="img/profile-pics/4.png" alt="">
</div>
<div class="media-body">
<small class="text-muted">值班专责 - 3分钟前</small><br>
<a class="t-overflow" href="">1#制冷站中级故障告警,请立即前往查看</a>
</div>
</div>
<div class="media">
<div class="pull-left">
<img width="40" src="img/profile-pics/4.jpg" alt="">
</div>
<div class="media-body">
<small class="text-muted">值班人员 - 4分钟前</small><br>
<a class="t-overflow" href="">冷机用电量突变,请查看是否故障</a>
</div>
</div>
<div class="media">
<div class="pull-left">
<img width="40" src="img/profile-pics/2.jpg" alt="">
</div>
<div class="media-body">
<small class="text-muted">办公室专责 - 5分钟前</small><br>
<a class="t-overflow" href="">新风系统告警,无法正常工作</a>
</div>
</div>
</div>
<div class="media text-center whiter l-100">
<a href=""><small>查看所有</small></a>
</div>
</div>
</div>
<!-- Breadcrumb -->
<ol class="breadcrumb hidden-xs">
<li><a href="#">主页</a></li>
<li><a href="#">系统总览</a></li>
<li class="active">首页</li>
</ol>
<h4 class="page-title">实时能耗</h4>
<!-- Shortcuts -->
<!--<div class="robin_circle" style="margin: 6px 0px 18px 20px;">-->
<!--<div class="r_out">-->
<!--<div class="r_in">-->
<!--<div class="r_c c1"></div>-->
<!--<div class="r_num">45,685</div>-->
<!--</div>-->
<!--<p>总能耗(kW·h)</p>-->
<!--</div>-->
<!--<div class="r_out">-->
<!--<div class="r_in">-->
<!--<div class="r_c c2"></div>-->
<!--<div class="r_num">20843.67</div>-->
<!--</div>-->
<!--<p>办公楼(kW·h)</p>-->
<!--</div>-->
<!--<div class="r_out">-->
<!--<div class="r_in">-->
<!--<div class="r_c c3"></div>-->
<!--<div class="r_num">10208.5</div>-->
<!--</div>-->
<!--<p>营业厅(kW·h)</p>-->
<!--</div>-->
<!--<div class="r_out">-->
<!--<div class="r_in">-->
<!--<div class="r_c c4"></div>-->
<!--<div class="r_num">8608.35</div>-->
<!--</div>-->
<!--<p>机房(kW·h)</p>-->
<!--</div>-->
<!--<div class="r_out">-->
<!--<div class="r_in">-->
<!--<div class="r_c c5"></div>-->
<!--<div class="r_num">6024.48</div>-->
<!--</div>-->
<!--<p>基站(kW·h)</p>-->
<!--</div>-->
<!--</div>-->
<hr class="whiter" />
<!-- Quick Stats -->
<div class="block-area">
<div class="row">
<div class="col-md-2 col-xs-6" style="width:20%; height: 100px;">
<div class="tile quick-stats">
<div id="stats-line-2" class="pull-left" style="height: 95px"></div>
<div style="float: left;display: inline;">
<h2 data-value="9853.7">9853.7</h2>
<small>总能耗(kW·h)</small>
</div>
</div>
</div>
<div class="col-md-2 col-xs-6" style="width:20%; height: 100px;">
<div class="tile quick-stats media">
<div id="stats-line-3" class="pull-left" style="height: 95px"></div>
<div class="media-body">
<h2 data-value="1452.45">1452.45</h2>
<small>办公楼(kW·h)</small>
</div>
</div>
</div>
<div class="col-md-2 col-xs-6" style="width:20%; height: 100px;">
<div class="tile quick-stats media">
<div id="stats-line-4" class="pull-left" style="height: 95px"></div>
<div class="media-body">
<h2 data-value="589.66">589.66</h2>
<small>营业厅(kW·h)</small>
</div>
</div>
</div>
<div class="col-md-2 col-xs-6" style="width:20%; height: 100px;">
<div class="tile quick-stats media">
<div id="stats-line" class="pull-left" style="height: 95px"></div>
<div class="media-body">
<h2 data-value="493.56">493.56</h2>
<small>机房(kW·h)</small>
</div>
</div>
</div>
<div class="col-md-2 col-xs-6" style="width:20%; height: 100px;">
<div class="tile quick-stats media">
<div id="stats-line-x" class="pull-left" style="height: 95px"></div>
<div class="media-body">
<h2 data-value="293.56">293.56</h2>
<small>基站(kW·h)</small>
</div>
</div>
</div>
</div>
</div>
<hr class="whiter" />
<!-- Main Widgets -->
<div class="block-area">
<div class="row">
<div class="col-md-8">
<!-- Main Chart -->
<div class="tile">
<h2 class="tile-title">用电总量统计(kW·h)</h2>
<div class="tile-config dropdown">
<a data-toggle="dropdown" href="" class="tile-menu"></a>
<ul class="dropdown-menu pull-right text-right">
<li><a class="tile-info-toggle" href="">Chart Information</a></li>
<li><a href="">Refresh</a></li>
<li><a href="">Settings</a></li>
</ul>
</div>
<div class="p-10">
<div id="line-chart" class="main-chart" style="height: 250px"></div>
<div class="chart-info">
<ul class="list-unstyled">
<li class="m-b-10">
今日用电总量(kW·h)
<span class="pull-right text-muted t-s-0">
<i class="fa fa-chevron-up"></i>
+12%
</span>
</li>
<li>
<small>
空调系统用电 640(kW·h)
<span class="pull-right text-muted t-s-0"><i class="fa m-l-15 fa-chevron-down"></i> -8%</span>
</small>
<div class="progress progress-small">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%"></div>
</div>
</li>
<li>
<small>
供暖系统用电 560(kW·h)
<span class="pull-right text-muted t-s-0">
<i class="fa m-l-15 fa-chevron-up"></i>
-3%
</span>
</small>
<div class="progress progress-small">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 60%"></div>
</div>
</li>
</ul>
</div>
</div>
</div>
<!-- Pies -->
<!--<div class="tile text-center">-->
<!--<div class="tile-dark p-10">-->
<!--<div class="pie-chart-tiny" data-percent="86,453">-->
<!--<span class="percent"></span>-->
<!--<span class="pie-title">访问用户 <i class="m-l-5 fa fa-retweet"></i></span>-->
<!--</div>-->
<!--<div class="pie-chart-tiny" data-percent="23">-->
<!--<span class="percent"></span>-->
<!--<span class="pie-title">能耗占用率<i class="m-l-5 fa fa-retweet"></i></span>-->
<!--</div>-->
<!--<div class="pie-chart-tiny" data-percent="57">-->
<!--<span class="percent"></span>-->
<!--<span class="pie-title">空调系统 <i class="m-l-5 fa fa-retweet"></i></span>-->
<!--</div>-->
<!--<div class="pie-chart-tiny" data-percent="34">-->
<!--<span class="percent"></span>-->
<!--<span class="pie-title">供暖系统 <i class="m-l-5 fa fa-retweet"></i></span>-->
<!--</div>-->
<!--<div class="pie-chart-tiny" data-percent="81">-->
<!--<span class="percent"></span>-->
<!--<span class="pie-title">用气量统计 <i class="m-l-5 fa fa-retweet"></i></span>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!-- Recent Postings -->
<div class="row">
<div class="col-md-6">
<div class="tile">
<h2 class="tile-title">重要通知</h2>
<div class="tile-config dropdown">
<a data-toggle="dropdown" href="" class="tile-menu"></a>
<ul class="dropdown-menu animated pull-right text-right">
<li><a href="">Refresh</a></li>
<li><a href="">Settings</a></li>
</ul>
</div>
<div class="listview narrow">
<div class="media p-l-5">
<div class="pull-left">
<img width="40" src="img/profile-pics/1.png" alt="">
</div>
<div class="media-body">
<small class="text-muted">2小时前 来自 供暖调度班</small><br/>
<a class="t-overflow" href="">供暖系统故障已排除</a>
</div>
</div>
<div class="media p-l-5">
<div class="pull-left">
<img width="40" src="img/profile-pics/2.png" alt="">
</div>
<div class="media-body">
<small class="text-muted">5小时前 来自 办公室</small><br/>
<a class="t-overflow" href="">照明系统昨晚出现故障,请检修</a>
</div>
</div>
<div class="media p-l-5">
<div class="pull-left">
<img width="40" src="img/profile-pics/3.png" alt="">
</div>
<div class="media-body">
<small class="text-muted">25/02/2016 来自 办公室</small><br/>
<a class="t-overflow" href="">请各部门上传昨天的能耗统计报表</a>
</div>
</div>
<div class="media p-l-5">
<div class="pull-left">
<img width="40" src="img/profile-pics/4.png" alt="">
</div>
<div class="media-body">
<small class="text-muted">26/02/2016 来自 自动化班</small><br/>
<a class="t-overflow" href="">空调系统能耗报表上传</a>
</div>
</div>
<div class="media p-l-5">
<div class="pull-left">
<img width="40" src="img/profile-pics/5.png" alt="">
</div>
<div class="media-body">
<small class="text-muted">26/02/2016 来自 调度班长</small><br/>
<a class="t-overflow" href="">请各单位检查新风系统运行状况并上报</a>
</div>
</div>
<div class="media p-5 text-center l-100">
<a href=""><small>查看所有</small></a>
</div>
</div>
</div>
</div>
<!-- Tasks to do -->
<div class="col-md-6">
<div class="tile">
<h2 class="tile-title">待办事项</h2>
<div class="tile-config dropdown">
<a data-toggle="dropdown" href="" class="tile-menu"></a>
<ul class="dropdown-menu pull-right text-right">
<li id="todo-add"><a href="">Add New</a></li>
<li id="todo-refresh"><a href="">Refresh</a></li>
<li id="todo-clear"><a href="">Clear All</a></li>
</ul>
</div>
<div class="listview todo-list sortable">
<div class="media">
<div class="checkbox m-0">
<label class="t-overflow">
<input type="checkbox">
检查办公楼新风系统机组运行状况
</label>
</div>
</div>
<div class="media">
<div class="checkbox m-0">
<label class="t-overflow">
<input type="checkbox">
空调系统能耗监测报告提交
</label>
</div>
</div>
<div class="media">
<div class="checkbox m-0">
<label class="t-overflow">
<input type="checkbox">
处理办公楼照明系统告警
</label>
</div>
</div>
<div class="media">
<div class="checkbox m-0">
<label class="t-overflow">
<input type="checkbox">
输出全面的能源审计报告
</label>
</div>
</div>
</div>
<h2 class="tile-title">已完成</h2>
<div class="listview todo-list sortable">
<div class="media">
<div class="checkbox m-0">
<label class="t-overflow">
<input type="checkbox" checked="checked">
建筑总能耗报表生成
</label>
</div>
</div>
<div class="media">
<div class="checkbox m-0">
<label class="t-overflow">
<input type="checkbox" checked="checked">
根据主管部门的能源数据监测要求,上报能耗数据。
</label>
</div>
</div>
<div class="media">
<div class="checkbox m-0">
<label class="t-overflow">
<input type="checkbox" checked="checked">
能耗单元统计
</label>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
<div class="col-md-4">
<!-- USA Map -->
<div class="tile">
<h2 class="tile-title">能耗热点图</h2>
<div class="tile-config dropdown">
<a data-toggle="dropdown" href="" class="tile-menu"></a>
<ul class="dropdown-menu pull-right text-right">
<li><a href="">Refresh</a></li>
<li><a href="">Settings</a></li>
</ul>
</div>
<div class="container" id="container1">
<div class="popover right pop1" data-easein="cardInRight" data-easeout="cardOutRight" id="pop1">
<div class="arrow"></div>
<div class="popover-inner">
<h3 class="popover-title"><a data-toggle="modal" href="#modalWider">1#基站能耗数据异常</a></h3>
<div class="popover-content">
<p>1#基站2机房温度过高.</p>
<p>请速派专人查看!</p>
<!--<img src="img/Nova4.png" alt="small" style="width: 1008px;height: 586px;"/>-->
</div>
</div>
</div>
<div class="popover top pop2" data-easein="cardInTop" data-easeout="cardOutTop" id="pop2">
<div class="arrow"></div>
<div class="popover-inner">
<h3 class="popover-title"><a data-toggle="modal" href="#modalWider1">能耗采集异常</a></h3>
<div class="popover-content">
<p>基站办公大楼供暖系统出现异常数据.</p>
</div>
</div>
</div>
<div class="popover left pop3" data-easein="cardInLeft" data-easeout="cardOutLeft" id="pop3">
<div class="arrow"></div>
<div class="popover-inner">
<h3 class="popover-title"><a data-toggle="modal" href="#modalWider2">营业厅供暖故障</a></h3>
<div class="popover-content">
<p>西宁市营业厅大厅新风系统故障,过温告警,请查看!.</p>
</div>
</div>
</div>
<div class="popover bottom pop4" data-easein="cardInBottom" data-easeout="cardOutBottom" id="pop4">
<div class="arrow"></div>
<div class="popover-inner">
<h3 class="popover-title"><a data-toggle="modal" href="#modalWider3">空调系统告警</a></h3>
<div class="popover-content">
<p>办公室空调系统告警.
请关闭暂时无人办公场所的空调.</p>
</div>
</div>
</div>
<img src="img/mapmaker.png" alt="info" class="info-icon info-icon1" data-target="pop1" />
<img src="img/mapmaker.png" alt="info" class="info-icon info-icon2" data-target="pop2" />
<img src="img/mapmaker.png" alt="info" class="info-icon info-icon3" data-target="pop3" />
<img src="img/mapmaker.png" alt="info" class="info-icon info-icon4" data-target="pop4" />
<!--<embed style="z-index: 9999;" class="info-icon info-icon5" align=center src=img/swf/Red_glow.swf type=application/x-shockwave-flash wmode="transparent" quality="high" ;> </embed>-->
<img src="img/qinghai.png" alt="" class="largeimage">
</div>
</div>
<!-- Dynamic Chart -->
<div class="tile">
<h2 class="tile-title">照明系统能耗实时监测</h2>
<div class="tile-config dropdown">
<a data-toggle="dropdown" href="" class="tile-menu"></a>
<ul class="dropdown-menu pull-right text-right">
<li><a href="">Refresh</a></li>
<li><a href="">Settings</a></li>
</ul>
</div>
<div class="p-t-10 p-r-5 p-b-5">
<div id="dynamic-chart" style="height: 200px"></div>
</div>
</div>
<!-- Activity -->
<div class="tile">
<h2 class="tile-title">能耗实时排名</h2>
<div class="tile-config dropdown">
<a data-toggle="dropdown" href="" class="tile-menu"></a>
<ul class="dropdown-menu pull-right text-right">
<li><a href="">Refresh</a></li>
<li><a href="">Settings</a></li>
</ul>
</div>
<div class="listview narrow">
<div class="media">
<div class="pull-right">
<div class="counts-lv1">785879</div>
</div>
<div class="media-body">
<h6>空调系统</h6>
</div>
</div>
<div class="media">
<div class="pull-right">
<div class="counts-lv2">56312</div>
</div>
<div class="media-body">
<h6>供暖系统</h6>
</div>
</div>
<div class="media">
<div class="pull-right">
<div class="counts-lv3">36312</div>
</div>
<div class="media-body">
<h6>照明系统</h6>
</div>
</div>
<div class="media">
<div class="pull-right">
<div class="counts-lv4">7832</div>
</div>
<div class="media-body">
<h6>办公设备</h6>
</div>
</div>
<div class="media">
<div class="pull-right">
<div class="counts-lv5">368</div>
</div>
<div class="media-body">
<h6>其他</h6>
</div>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
<!-- Modal Wider -->
<div class="modal fade" id="modalWider" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title">1#基站2机房能耗数据采集异常</h4>
</div>
<img src="img/Nova4.png" alt=""/>
</div>
</div>
</div>
<div class="modal fade" id="modalWider1" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title">能耗采集异常</h4>
</div>
<img src="img/Nova3.png" alt=""/>
</div>
</div>
</div>
<div class="modal fade" id="modalWider2" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title">营业厅供暖异常</h4>
</div>
<img src="img/Nova2.png" alt=""/>
</div>
</div>
</div>
<div class="modal fade" id="modalWider3" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title">空调系统异常</h4>
</div>
<img src="img/Nova1.png" alt=""/>
</div>
</div>
</div>
<!-- Chat -->
<div class="chat">
<!-- Chat List -->
<div class="pull-left chat-list">
<div class="listview narrow">
<div class="media">
<img class="pull-left" src="img/profile-pics/1.png" width="30" alt="">
<div class="media-body p-t-5">
调度班长
</div>
</div>
<div class="media">
<img class="pull-left" src="img/profile-pics/2.png" width="30" alt="">
<div class="media-body">
<span class="t-overflow p-t-5">调度员</span>
</div>
</div>
<div class="media">
<img class="pull-left" src="img/profile-pics/3.png" width="30" alt="">
<div class="media-body">
<span class="t-overflow p-t-5">办公室值班员</span>
</div>
</div>
<div class="media">
<img class="pull-left" src="img/profile-pics/4.png" width="30" alt="">
<div class="media-body">
<span class="t-overflow p-t-5">网管员</span>
</div>
</div>
<div class="media">
<img class="pull-left" src="img/profile-pics/5.png" width="30" alt="">
<div class="media-body">
<span class="t-overflow p-t-5">值班专员</span>
</div>
</div>
<div class="media">
<img class="pull-left" src="img/profile-pics/6.png" width="30" alt="">
<div class="media-body">
<span class="t-overflow p-t-5">新风系统管理员</span>
</div>
</div>
</div>
</div>
<!-- Chat Area -->
<div class="media-body">
<div class="chat-header">
<a class="btn btn-sm" href="">
<i class="fa fa-circle-o status m-r-5"></i> 实时聊天
</a>
</div>
<div class="chat-body">
<div class="media">
<img class="pull-right" src="img/profile-pics/1.png" width="30" alt="" />
<div class="media-body pull-right">
你好,<br/>
请提供空调系统检查报表
<small>我 - 10:20:45</small>
</div>
</div>
<div class="media pull-left">
<img class="pull-left" src="img/profile-pics/2.png" width="30" alt="" />
<div class="media-body" style="background: #00CD00;">
报表正在导出,稍后上传 <br/>请注意查收
<small>调度班长 - 10:21:13</small>
</div>
</div>
<div class="media pull-right">
<img class="pull-right" src="img/profile-pics/2.png" width="30" alt="" />
<div class="media-body">
供暖系统出现告警 <br/>请安排相关人员去检查一下
<small>我 - 10:23:11</small>
</div>
</div>
<div class="media pull-right">
<img class="pull-right" src="img/profile-pics/2.jpg" width="30" alt="" />
<div class="media-body">
有人知道为什么空调系统不工作吗(┬_┬)
<small>我 - 10:25:23</small>
</div>
</div>
</div>
<div class="chat-footer media">
<i class="chat-list-toggle pull-left fa fa-bars"></i>
<i class="pull-right fa fa-picture-o"></i>
<div class="media-body">
<textarea class="form-control" placeholder="请输入..."></textarea>
</div>
</div>
</div>
</div>
</section>
<!-- Older IE Message -->
<!--[if lt IE 9]>
<div class="ie-block">
<h1 class="Ops">Ooops!</h1>
<p>You are using an outdated version of Internet Explorer, upgrade to any of the following web browser in order to access the maximum functionality of this website. </p>
<ul class="browsers">
<li>
<a href="https://www.google.com/intl/en/chrome/browser/">
<img src="img/browsers/chrome.png" alt="">
<div>Google Chrome</div>
</a>
</li>
<li>
<a href="http://www.mozilla.org/en-US/firefox/new/">
<img src="img/browsers/firefox.png" alt="">
<div>Mozilla Firefox</div>
</a>
</li>
<li>
<a href="http://www.opera.com/computer/windows">
<img src="img/browsers/opera.png" alt="">
<div>Opera</div>
</a>
</li>
<li>
<a href="http://safari.en.softonic.com/">
<img src="img/browsers/safari.png" alt="">
<div>Safari</div>
</a>
</li>
<li>
<a href="http://windows.microsoft.com/en-us/internet-explorer/downloads/ie-10/worldwide-languages">
<img src="img/browsers/ie.png" alt="">
<div>Internet Explorer(New)</div>
</a>
</li>
</ul>
<p>Upgrade your browser for a Safer and Faster web experience. <br/>Thank you for your patience...</p>
</div>
<![endif]-->
</section>
<!-- Javascript Libraries -->
<!-- jQuery -->
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script> <!-- jQuery Library -->
<script src="http://www.jq22.com/jquery/jquery-ui-1.11.0.js"></script> <!-- jQuery UI -->
<script src="js/jquery.easing.1.3.js"></script> <!-- jQuery Easing - Requirred for Lightbox + Pie Charts-->
<!-- Bootstrap -->
<script src="http://www.jq22.com/jquery/bootstrap-3.3.4.js"></script>
<!-- Charts -->
<script src="js/charts/jquery.flot.js"></script> <!-- Flot Main -->
<script src="js/charts/jquery.flot.time.js"></script> <!-- Flot sub -->
<script src="js/charts/jquery.flot.animator.min.js"></script> <!-- Flot sub -->
<script src="js/charts/jquery.flot.resize.min.js"></script> <!-- Flot sub - for repaint when resizing the screen -->
<script src="js/sparkline.min.js"></script> <!-- Sparkline - Tiny charts -->
<script src="js/easypiechart.js"></script> <!-- EasyPieChart - Animated Pie Charts -->
<script src="js/charts.js"></script> <!-- All the above chart related functions -->
<!-- Map -->
<script src="js/maps/jvectormap.min.js"></script> <!-- jVectorMap main library -->
<script src="js/maps/usa.js"></script> <!-- USA Map for jVectorMap -->
<!--Media Player-->
<script src="js/media-player.min.js"></script> <!-- USA Map for jVectorMap -->
<!-- Form Related -->
<script src="js/icheck.js"></script> <!-- Custom Checkbox + Radio -->
<!-- UX -->
<script src="js/scroll.min.js"></script> <!-- Custom Scrollbar -->
<!-- Other -->
<script src="js/calendar.min.js"></script> <!-- Calendar -->
<!--<script src="js/feeds.min.js"></script> &lt;!&ndash; News Feeds &ndash;&gt;-->
<!--HotSpot of pic-->
<script src="js/modernizr.custom.49511.js"></script>
<script src="js/jquery.hotspot.min.js"></script>
<!-- All JS functions -->
<script src="js/functions.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".c1").animate({
height: "70%"
},1000);
$(".c2").animate({
height: "50%"
},1000)
$(".c3").animate({
height: "33%"
},1000)
$(".c4").animate({
height: "23%"
},1000)
$(".c5").animate({
height: "13%"
},1000)
$('#container1').hotSpot({
slideshow : true,
triggerBy : 'click',
autoHide : true});
})
</script>
</body>
</html>