<!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-content {
|
margin: 0 5px;
|
}
|
|
.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>.mui-table-view:first-child {
|
margin-top: -1px;
|
}
|
.mui-content-padded {
|
margin:unset;
|
padding: 10px 6px;
|
margin-bottom: 1px;
|
}
|
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;
|
}
|
input[type=color], input[type=date], input[type=datetime-local], input[type=datetime], input[type=email], input[type=month], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=time], input[type=url], input[type=week], select, textarea {
|
line-height: 15px;
|
margin-bottom: 1px;
|
font-size: 16px;
|
-webkit-box-sizing: border-box;
|
box-sizing: border-box;
|
border-radius: 50px;
|
background-color: #efeff4;
|
}
|
|
.inout_real{
|
background: #fff;
|
margin-top: 8px;
|
}
|
.inout_real .inout_title{
|
display: block;
|
font-size: 16px;
|
padding: 0 15px;
|
box-sizing: border-box;
|
color: #245ca7;
|
height: 40px;
|
line-height: 40px;
|
}
|
.enerty{
|
width: 100%;
|
border-top: 1px #efefef solid;
|
padding: 12px 15px;
|
}
|
.enerty h3{
|
font-size: 16px;
|
font-weight: 400;
|
}
|
.t1{
|
font-weight: 600;
|
}
|
</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;">
|
<div style="margin-bottom: 6px;">
|
<span style="width: 35%;margin-left: 5px;">开始时间：</span>
|
<input id="dateStart" type="search" style="width: 65%;margin-left: 1px;" onclick="searchStart()" placeholder="选择时间">
|
</div>
|
<div style="margin-bottom: 6px;">
|
<span style="width: 35%;margin-left: 5px;">截止时间：</span>
|
<input id="dateEnd" type="search" style="width: 65%;margin-left: 1px;" onclick="searchEnd()" placeholder="选择时间">
|
</div>
|
<div>
|
<span style="width: 35%;margin-left: 5px;">仓库列表：</span>
|
<select id="depotId" value="" style="width: 45%;margin-left: 1px;">
|
</select>
|
<button style="width: 20%;background: #668dc1;color: #FFFFFF;" onclick="getEnertyData()">查询</button>
|
</div>
|
</div>
|
<div class="inout_real">
|
<div class="inout_title"><strong>能耗统计</strong></div>
|
<div style="padding: 0 15px;">
|
<div class="enerty">
|
<h3>
|
<span> 总电能：</span>
|
<span id="esSum" class="t1">0 KW-h</span>
|
</h3>
|
</div>
|
<div class="enerty">
|
<h3>
|
<span>有功电能：</span>
|
<span id="epSum" class="t1">0 KW-h</span>
|
</h3>
|
</div>
|
<div class="enerty">
|
<h3>
|
<span>无功电能：</span>
|
<span id="eqSum" class="t1">0 KW-h</span>
|
</h3>
|
</div>
|
</div>
|
</div>
|
</div>
|
<script src="./js/mui.js"></script>
|
<script src="./js/jquery.min.js"></script>
|
<script src="./js/mui.picker.min.js"></script>
|
<script src="./js/echarts.min.js"></script>
|
<script type="text/javascript" charset="utf-8">
|
var url;
|
var dateStart; //开始时间
|
var dateEnd; //截止时间
|
var depotId;
|
var depotList;
|
var data = {
|
"interfaceId": "5502",
|
"sign": "10502",
|
"outId": "10502",
|
"reqDateTime": new Date(),
|
"tokenAuth": "",
|
"data": {
|
"depotId": "",
|
"start": "",
|
"end": ""
|
}
|
};
|
//查询仓库列表
|
var data1 = {
|
"interfaceId": "5501",
|
"sign": "10501",
|
"outId": "10501",
|
"reqDateTime": new Date(),
|
"tokenAuth": "",
|
"data": {}
|
};
|
|
mui.init();
|
mui.plusReady(function() {
|
//获取参数
|
var user = JSON.parse(localStorage.getItem('user'));
|
url = user.url + "/api-phone/gateway";
|
data.tokenAuth = user.tokenAuth;
|
data1.tokenAuth = user.tokenAuth;
|
//默认获取时间(当前日期及一月前的日期)
|
dateStart = getDate('start');
|
dateEnd = getDate('end');
|
$("#dateStart").val(dateStart);
|
$("#dateEnd").val(dateEnd);
|
data.data.start = dateStart;
|
data.data.end = dateEnd;
|
//查询仓库列表
|
getDepotList();
|
mui.toast("请选择条件进行查询！");
|
})
|
|
//监听仓库输入框
|
mui('.mui-content-padded').on('change', 'select[id="depotId"]', function() {
|
//将输入框的值赋值给参数
|
var index = mui("#depotId")[0].value;
|
depotId = depotList[index].depotId;
|
data.data.depotId = depotId;
|
});
|
|
//请求能耗信息
|
function getEnertyData() {
|
if (!(data.data.depotId)) {
|
mui.alert('请先选择仓库！', '提示',["确定"],function(){},"div");
|
return;
|
}
|
//请求
|
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") {
|
renderData(result.data);
|
} else {
|
mui.toast('条件获取数据为空！');
|
}
|
},
|
error: function() {
|
mui.alert('系统繁忙,请重试！', '提示',["确定"],function(){},"div");
|
}
|
})
|
}
|
|
//渲染页面
|
function renderData(data) {
|
$("#epSum").html(data.epSum + " KW-h");
|
$("#eqSum").html(data.eqSum + " KW-h");
|
$("#esSum").html(data.esSum + " KW-h");
|
}
|
|
//请求获取仓库列表
|
function getDepotList() {
|
mui.ajax(url, {
|
type: "POST",
|
dataType: "json",
|
crossDomain: true,
|
contentType: "application/json;charset=utf-8",
|
data: JSON.stringify(data1),
|
success: function(result) {
|
if (result.code == "0000") {
|
depotList = result.data;
|
if (depotList != null && depotList.length > 0) {
|
renderDepotList();
|
} else {
|
mui.toast("没有仓库信息！");
|
}
|
} else {
|
mui.toast("没有仓库信息！");
|
}
|
},
|
error: function() {
|
mui.alert('系统繁忙,请重试！', '提示',["确定"],function(){},"div");
|
}
|
})
|
}
|
|
//渲染仓库列表
|
function renderDepotList() {
|
var html = '';
|
html += '<option>请选择仓库</option>'
|
$.each(depotList, function(index, item) {
|
html += '<option value="' + index;
|
html += '">' + item.depotName + '</option>';
|
})
|
$("#depotId").html(html);
|
}
|
|
//获取日期
|
function getDate(t) {
|
var date = new Date();
|
var year = date.getFullYear();
|
var month, day;
|
if (t == 'start') {
|
month = date.getMonth()
|
}
|
if (t == 'end') {
|
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 searchStart() {
|
var dtPicker = new mui.DtPicker({
|
type: 'date',
|
beginDate: new Date(2010, 00, 01), //起始日期
|
value: dateStart //默认时间
|
});
|
dtPicker.show(function(selectItems) {
|
var y = selectItems.y.text; //获取选择的年
|
var m = selectItems.m.text; //获取选择的月
|
var d = selectItems.d.text; //获取选择的日
|
dateStart = y + "-" + m + "-" + d;
|
$("#dateStart").val(dateStart);
|
data.data.dateStart = y + "-" + m + "-" + d;
|
})
|
}
|
//监听截止时间选择
|
function searchEnd() {
|
var dtPicker = new mui.DtPicker({
|
type: 'date',
|
beginDate: new Date(2010, 00 , 01), //起始日期
|
value: dateEnd //默认时间
|
});
|
dtPicker.show(function(selectItems) {
|
var y = selectItems.y.text; //获取选择的年
|
var m = selectItems.m.text; //获取选择的月
|
var d = selectItems.d.text; //获取选择的日
|
dateEnd = y + "-" + m + "-" + d;
|
$("#dateEnd").val(dateEnd);
|
data.data.dateEnd = y + "-" + m + "-" + d;
|
})
|
}
|
</script>
|
</body>
|
</html>
|
