<!DOCTYPE html>
|
<html>
|
<head>
|
<meta charset="utf-8">
|
<title>远程抄表</title>
|
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
|
<link href="./css/mui.min.css" rel="stylesheet" />
|
<link href="./css/mui.picker.min.css" rel="stylesheet" />
|
<style>
|
.mui-bar-nav {
|
background: #245ca7;
|
-webkit-box-shadow: none;
|
box-shadow: none;
|
}
|
.mui-title {
|
color: #FFFFFF;
|
}
|
.mui-icon-back:before,
|
.mui-icon-left-nav:before {
|
color: #FFFFFF;
|
}
|
.mui-content{
|
width: 96%;
|
margin: auto;
|
}
|
|
.mui-content-padded {
|
margin:unset;
|
padding: 10px 6px;
|
margin-bottom: 5px;
|
text-align: center;
|
}
|
input[type=search] {
|
font-size: 16px;
|
-webkit-box-sizing: border-box;
|
box-sizing: border-box;
|
text-align: left;
|
border: 0;
|
border-radius: 50px;
|
background-color: #efeff4;
|
margin-bottom: 1px;
|
}
|
|
.inout_title1{
|
display: block;
|
font-size: 16px;
|
background: #fff;
|
padding: 0 15px;
|
box-sizing: border-box;
|
color: #245ca7;
|
height: 40px;
|
line-height: 40px;
|
border-bottom: 1px #efefef solid;
|
}
|
|
.inout_table {
|
margin-bottom: 6px;
|
}
|
|
.inout_table table {
|
width: 100%;
|
background-color: #fff !important
|
}
|
|
.inout_table tr {
|
font-size: 13px;
|
text-align: center;
|
line-height: 30px;
|
}
|
|
.inout_table th {
|
min-width: 42px;
|
text-align: center;
|
}
|
.inout_table td {
|
min-width: 42px;
|
text-align: center;
|
padding: 0 2px;
|
}
|
.right{
|
border-right: 2px #efefef solid !important;
|
}
|
.back{
|
background: #bfdbf9;
|
}
|
.first{
|
width: 96%;
|
margin: auto;
|
|
}
|
</style>
|
</head>
|
<body>
|
<header class="mui-bar mui-bar-nav">
|
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
|
<h1 class="mui-title">远程抄表</h1>
|
</header>
|
<div class="mui-content">
|
<div class="mui-content-padded" style="background: #FFFFFF;">
|
<span style="width: 35%;margin-left: 5px;">选择时间：</span>
|
<input id="dateTime" type="search" style="width: 65%;margin-left: 5px;" onclick="search()" placeholder="选择时间">
|
</div>
|
<!--实时信息-->
|
<div class="inout_title1"><strong>抄表信息</strong></div>
|
<div class="inout_table">
|
<table>
|
<thead>
|
<tr>
|
<th class="right">仓库</th>
|
<th class="right">有功电能</th>
|
<th class="right">无功电能</th>
|
<th class="right">总电能</th>
|
<th>更新时间</th>
|
</tr>
|
</thead>
|
<tbody id="meterList">
|
<!-- <tr class="back">
|
<td class="right">45号仓</td>
|
<td class="right">1000</td>
|
<td class="right">1000</td>
|
<td class="right">10000</td>
|
<td>10:10:10</td>
|
</tr> -->
|
</tbody>
|
</table>
|
</div>
|
</div>
|
<script src="./js/mui.js"></script>
|
<script src="./js/mui.picker.min.js"></script>
|
<script src="./js/jquery.min.js"></script>
|
<script type="text/javascript" charset="utf-8">
|
var url;
|
var meterList;
|
var dateTime;
|
var data = {
|
"interfaceId": "5503",
|
"sign": "10303",
|
"outId": "10303",
|
"reqDateTime": new Date(),
|
"tokenAuth": "",
|
"data": {
|
"start": ""
|
}
|
};
|
mui.init();
|
|
mui.plusReady(function() {
|
var user = JSON.parse(localStorage.getItem('user'));
|
url = user.url + "/api-phone/gateway";
|
data.tokenAuth = user.tokenAuth;
|
dateTime = getDate();
|
data.data.start = dateTime;
|
$("#dateTime").val(dateTime);
|
getMeterList();
|
})
|
|
//默认获取当天日期(yyyy-MM-dd)
|
function getDate() {
|
var date = new Date();
|
var year = date.getFullYear();
|
var month, day;
|
month = date.getMonth() + 1;
|
if (month >= 1 && month <= 9) {
|
month = "0" + month;
|
}
|
day = date.getDate();
|
if (day >= 1 && day <= 9) {
|
day = "0" + day;
|
}
|
return year + "-" + month + "-" + day
|
}
|
|
//监听时间选择
|
function search() {
|
var dtPicker = new mui.DtPicker({
|
type: 'date',
|
beginDate: new Date(2010, 00, 01), //起始日期
|
value: dateTime //默认时间
|
});
|
dtPicker.show(function(selectItems) {
|
var y = selectItems.y.text; //获取选择的年
|
var m = selectItems.m.text; //获取选择的月
|
var d = selectItems.d.text; //获取选择的日
|
dateTime = y + "-" + m + "-" + d;
|
$("#dateTime").val(dateTime);
|
data.data.start = dateTime;
|
getMeterList();
|
})
|
}
|
|
function getMeterList() {
|
$("#meterList").html("");
|
mui.ajax(url, {
|
type: "POST",
|
dataType: "json",
|
crossDomain: true,
|
contentType: "application/json;charset=utf-8",
|
data: JSON.stringify(data),
|
success: function(result) {
|
if (result.code == "0000") {
|
meterList = result.data;
|
renderMeter();
|
} else {
|
var html = '<tr><td class="back" colspan="5">' + result.msg + '</td></tr>';
|
$("#meterList").html(html);
|
mui.toast(result.msg);
|
}
|
},
|
error: function() {
|
mui.alert("系统繁忙,请重试！","提示",["确定"],function(){},"div")
|
}
|
})
|
}
|
|
//渲染页面
|
function renderMeter() {
|
var html = '';
|
$.each(meterList, function(index, item) {
|
if (index % 2 == 0) {
|
html += '<tr class="back">';
|
} else {
|
html += '<tr>';
|
}
|
html += '<td class="right">' + item.depotName + '</td>';
|
html += '<td class="right">' + item.ep + '</td>';
|
html += '<td class="right">' + item.eq + '</td>';
|
html += '<td class="right">' + item.es + '</td>';
|
html += '<td>' + item.updateTime + '</td></tr>';
|
})
|
$("#meterList").html(html);
|
}
|
</script>
|
</body>
|
</html>
|
