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

624 lines
34 KiB
HTML
Raw Permalink 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>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="js/bootstrap-3.3.4.css">
<link href="css/animate.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="js/font-awesome.4.6.0.css">
<link href="css/form.css" rel="stylesheet">
<link href="css/media-player.css" rel="stylesheet">
<link href="css/calendar.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 href="css/jquery.datetimepicker.css" rel="stylesheet">
<link href="css/menu.css" rel="stylesheet">
</head>
<body id="skin-blur-blue">
<header id="header" class="media">
<a href="" id="menu-toggle"></a>
<a class="logo pull-left" href="index.html">移动能效管理平台</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">
<ul class="list-unstyled side-menu" style="width: 100%!important;padding-top: 20px;">
<li>
<a href="index.html" id='menuurl'>
<i class="fa fa-calendar-o"></i><span> 运行监测</span>
</a>
</li>
<li>
<a href="keyInfo.html" id='menuurl'>
<i class="fa fa-bar-chart-o"></i><span> KPI </span>
</a>
</li>
<li>
<a href="mstp_map.html" id='menuurl'>
<i class="fa fa-bar-chart-o"></i><span> 全息图概览</span>
</a>
</li>
<li>
<a href="efficiencyAnalysis.html" id='menuurl'>
<i class="fa fa-sort-amount-asc"></i><span> 能耗统计</span>
</a>
</li>
<li class="active">
<a href="dianfei.html" id='menuurl'>
<i class="fa fa-money"></i><span> 电费管理</span>
</a>
</li>
<li>
<a href="deviceManager.html" id='menuurl'>
<i class="fa fa-briefcase"></i><span> 设备管理</span>
</a>
</li>
<li>
<a href="energy_consumption.html" id='menuurl'>
<i class="fa fa-building-o"></i><span> 报表管理</span>
</a>
</li>
<li>
<a href="userMng.html" id='menuurl'>
<i class="fa fa-users"></i><span> 用户管理</span>
</a>
</li>
<li class="dropdown" >
<a href="" id='menuurl'>
<i class="fa fa-cogs"></i><span > 系统设置</span>
</a>
</li>
</ul>
</aside>
<!-- Content -->
<section id="content" class="container">
<!-- 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 -->
<!-- Main Widgets -->
<div class="block-area">
<div class="row">
<div class="col-md-12">
<!-- Main Chart -->
<div class="tile" style="height: 350px">
<h2 class="tile-title" style="font-size: 20px">电费管理</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="col-md-12" style="margin: 0px;padding: 0px">
<div class="col-md-12" style=" height: 270px;">
<div class="row " style="margin-top:15px;">
<div class='col-md-2'>
<div class='col-md-6'>
<button class="btn btn-default pull-right">城市:</button>
</div>
<div class='col-md-6'>
<select class="select">
<option>西宁</option>
<option>海东</option>
<option>海西</option>
<option>海南</option>
<option>海北</option>
<option>玉树</option>
<option>黄南</option>
<option>果洛</option>
</select>
</div>
</div>
<div class='col-md-2'>
<div class='col-md-4'>
<button class="btn btn-default pull-right">类型:</button>
</div>
<div class='col-md-8'>
<select class="select" id='sel_srctype' onselect="select_srctype()">
<option>基站</option>
<option>机房</option>
<option>营业厅</option>
</select>
</div>
</div>
<div class='col-md-2'>
<div class='col-md-4'>
<button class="btn btn-default pull-right">对象:</button>
</div>
<div class='col-md-8'>
<select class="select">
<option><span class='src_type'>基站</span>A</option>
<option><span class='src_type'>基站</span>B</option>
<option><span class='src_type'>基站</span>C</option>
</select>
</div>
</div>
<div class='col-md-4'>
<div class='col-md-3'>
<button class="btn btn-default pull-right">时间段:</button>
</div>
<div class='col-md-4'>
<input id='startDate' class="form-control"/>
</div>
<div class='col-md-4'>
<input id='endDate' class="form-control" />
</div>
</div>
</div>
<div id="consumptiondiv" class="col-md-12" style=" height: 250px;"></div>
</div>
<div class="col-md-3 hide">
<label style="height: 30px"></label>
<h3>单位面积总能耗</h3>
<span>分时间尺度展示当前建筑单位面积总能耗。同</span>
<span>时通过下拉时间列表自由比对历史单位面积总</span>
<span>能耗值。</span><br>
<div class="col-md-6">
<span style="font-size: 23px">0.65</span><span>kwh/(m²天)</span><br>
<span>本月平均单位面积总能耗</span>
</div>
<div class="col-md-6">
<span style="font-size: 23px">↑10</span><span>%</span><br>
<span>与同类建筑相比</span>
</div>
</div>
</div>
</div>
</div>
<div class='col-md-12'>
<table class='table'>
<thead>
<tr>
<th>类型(万kwh)</th>
<th>2016-02-25</th>
<th>2016-02-26</th>
<th>2016-02-27</th>
<th>2016-02-28</th>
<th>2016-02-29</th>
<th>2016-03-01</th>
<th>2016-03-02</th>
<th>2016-03-03</th>
</tr>
</thead>
<tbody id='tb-dianfei'>
</tbody>
</table>
</div>
</div>
<div class="clearfix"></div>
</div>
<div class='block-area'>
<div class='row'>
<div class='col-md-12'>
<div class='title'>
<h2 class="tile-title" style="font-size: 20px">电费录入</h2>
</div>
</div>
</div>
<form class="row form-columned" role="form">
<div class="col-md-4">
<input type="text" class="form-control input-sm m-b-10" placeholder="局站名称">
</div>
<div class="col-md-4">
<input id="ipt-dfdate" type="text" class="form-control input-sm m-b-10" placeholder="月份选择">
</div>
<div class="col-md-4">
<input type="text" class="form-control input-sm m-b-10" placeholder="电费单价(元)">
</div>
<div class="col-md-4">
<input type="text" class="form-control input-sm m-b-10" placeholder="上次抄表日期">
</div>
<div class="col-md-4">
<input type="text" class="form-control input-sm m-b-10" placeholder="本次抄表日期">
</div>
<div class="col-md-4">
<input type="text" class="form-control input-sm m-b-10" placeholder="线损">
</div>
<div class="col-md-4">
<input type="text" class="form-control input-sm m-b-10" placeholder="变损">
</div>
<div class='col-md-12 '>
<div class='col-md-12 block-title'>录入电费合同/局站下的电表表码</div>
</div>
<div class='col-md-12'>
<table class='table'>
<thead>
<tr>
<th>表名</th>
<th>倍率</th>
<th>上个月表码</th>
<th>本月表码</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" class="form-control input-sm m-b-10" value="电表1"></td>
<td><input type="text" class="form-control input-sm m-b-10" value="1"></td>
<td><input type="text" class="form-control input-sm m-b-10" value="0"></td>
<td><input type="text" class="form-control input-sm m-b-10" value="0"></td>
</tr>
<tr>
<td><input type="text" class="form-control input-sm m-b-10" value="电表2"></td>
<td><input type="text" class="form-control input-sm m-b-10" value="1"></td>
<td><input type="text" class="form-control input-sm m-b-10" value="0"></td>
<td><input type="text" class="form-control input-sm m-b-10" value="0"></td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-4">
<input type="text" class="form-control input-sm m-b-10" placeholder="本月电量">
</div>
<div class="col-md-4">
<input type="text" class="form-control input-sm m-b-10" placeholder="本月电费">
</div>
<div class="col-md-4">
<input type="text" class="form-control input-sm m-b-10" placeholder="智能电表读数">
</div>
<div class="col-md-4">
<input type="text" class="form-control input-sm m-b-10" placeholder="支付方式">
</div>
<div class="col-md-4">
<input type="text" class="form-control input-sm m-b-10" placeholder="票据类型">
</div>
<div class="col-md-4">
<input type="text" class="form-control input-sm m-b-10" placeholder="其他费用">
</div>
<div class="col-md-12">
<input type="text" class="form-control input-sm m-b-10" placeholder="备注">
</div>
<div class="col-md-12">
<textarea class="form-control m-b-10" readonly>操作提示:
1.添加的时候本月电费本月电量留空或输入0则系统来计算若手工输入则以手工输入为准
2. 人工输入的时候,一定要输入电费和电量两个值</textarea>
</div>
<div class="col-md-10">
<button type="submit" class="btn btn-default">录入</button>
<button type="submit" class="btn btn-default">取消</button>
</div>
</form>
<div class='row' style='height:20px;'></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="js/jquery-1.10.2.js"></script> <!-- jQuery Library -->
<script src="js/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="js/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 -->
<!--Media Player-->
<script src="js/media-player.min.js"></script> <!-- USA Map for jVectorMap -->
<!-- Map -->
<script src="js/maps/jvectormap.min.js"></script> <!-- jVectorMap main library -->
<script src="js/maps/usa.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 -->
<script src="js/select.min.js"></script> <!-- Custom Select -->
<!-- Other -->
<script src="js/calendar.min.js"></script> <!-- Calendar -->
<script src="assets/amcharts/amcharts.js" type="text/javascript"></script>
<script src="assets/amcharts/serial.js" type="text/javascript"></script>
<script src="js/jquery.datetimepicker.js" type="text/javascript"></script>
<!-- <script src="js/feeds.min.js"></script> News Feeds -->
<!-- All JS functions -->
<script src="js/functions.js"></script>
<script src="js/dianfei.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#startDate").datetimepicker({lang:'en',endDate:"Today",
format:'Y-m-d',
datepicker:true,
timepicker:false});
$("#endDate").datetimepicker({lang:'ch',endDate:"Today",
format:'Y-m-d',
datepicker:true,
timepicker:false});
$("#ipt-dfdate").datetimepicker({lang:'ch',endDate:"Today",
format:'Y-m',
datepicker:true,
timepicker:false});
$("#startDate").val("2016-02-25");
$("#endDate").val("2016-03-03");
$("#ipt-dfdate").val("");
var tr1 = "<tr><td>主设备能耗</td>";
var tr2 = "<tr><td>照明能耗</td>";
var tr3 = "<tr><td>空调能耗</td>";
var tr4 = "<tr><td>总能耗</td>";
for(var i=0;i<consumptionData.length;i++){
var d = consumptionData[i];
tr1+="<td>"+d.value1+"</td>";
tr2+="<td>"+d.value2+"</td>";
tr3+="<td>"+d.value3+"</td>";
tr4+="<td>"+d.total+"</td>";
}
tr1+= "</tr>";
tr2+= "</tr>";
tr3+= "</tr>";
tr4+= "</tr>";
$("#tb-dianfei").html(tr1+tr2+tr3+tr4);
});
</script>
</body>
</html>