<!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: 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;
|
}
|
|
.mui-table-view-chevron .mui-table-view-cell {
|
padding-right: 0px;
|
}
|
|
.mui-col-xs-10 {
|
width: 100%;
|
}
|
|
.mui-h4,
|
h4 {
|
font-size: 17px;
|
font-weight: 600;
|
}
|
|
.first {
|
color: #C7254E;
|
font-size: 15px;
|
float: right;
|
margin-right: 50px;
|
}
|
|
.mui-h5,
|
h5 {
|
font-size: 14px;
|
font-weight: 400;
|
color: #333;
|
}
|
|
.mui-table-view-cell p {
|
color: #333;
|
}
|
|
.mui-scroll-wrapper {
|
width: unset;
|
}
|
|
.mui-navigate-right:after,
|
.mui-push-right:after {
|
right: 10px;
|
top: -5px;
|
font-size: 25px;
|
|
}
|
.mui-pull-bottom-tips{
|
display: none;
|
}
|
|
.f1 {
|
width: 33.33%;
|
float: left;
|
}
|
</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"><span id="depotName"></span>粮情历史数据</h1>
|
</header>
|
<div class="mui-content">
|
<div class="mui-content-padded" style="background: #FFFFFF;">
|
<div id="depot" style="margin-bottom: 6px;">
|
<span style="width: 25%;margin-left: 5px;">仓库：</span>
|
<select id="depotId" value="" style="width: 75%;margin-left: 1px;">
|
</select>
|
</div>
|
<div>
|
<span style="width: 25%;margin-left: 5px;">日期：</span>
|
<input id="dateTime" type="search" style="width: 55%;margin-left: 5px;" onclick="search()" placeholder="选择时间">
|
<button style="width: 18%;background: #668dc1;color: #FFFFFF;" onclick="getHistoryList()">查询</button>
|
</div>
|
</div>
|
<ul id="hisList" class="mui-table-view mui-table-view-chevron">
|
<!-- <li class="mui-table-view-cell">
|
<div onclick="toWarnDetail('1')" class="mui-table">
|
<div class="mui-table-cell mui-col-xs-10">
|
<h4 class="mui-ellipsis">检测时间：2021-01-01 01:01</h4>
|
<h5 class="f1">粮均温：<span>44</span></h5>
|
<h5 class="f1">粮高温：<span>44</span></h5>
|
<h5 class="f1">粮低温：<span>44</span></h5>
|
<h5 class="f1">仓内温：<span>33</span></h5>
|
<h5 class="f1"> </h5>
|
<h5 class="f1">仓内湿：<span>44</span></h5>
|
<h5 class="f1">仓外温：<span>33</span></h5>
|
<h5 class="f1"> </h5>
|
<h5 class="f1">仓外湿：<span>44</span></h5>
|
</div>
|
<div class="mui-col-xs-2"><a class="mui-navigate-right"></a></div>
|
</div>
|
</li> -->
|
</ul>
|
</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 user;
|
var url;
|
var dateTime; //日期：yyyy-MM
|
var depotId;
|
var depotName;
|
var depotType;
|
var depotList;
|
var historyList;
|
var data = {
|
"interfaceId": "5310",
|
"sign": "10310",
|
"outId": "10310",
|
"reqDateTime": new Date(),
|
"tokenAuth": "",
|
"data": {
|
"type": "",
|
"depotId": "",
|
"dateTime": ''
|
}
|
};
|
//查询仓库列表
|
var data1 = {
|
"interfaceId": "5301",
|
"sign": "10301",
|
"outId": "10301",
|
"reqDateTime": new Date(),
|
"tokenAuth": "",
|
"data": {
|
"type": "grain"
|
}
|
};
|
|
mui.init();
|
mui.plusReady(function() {
|
user = JSON.parse(localStorage.getItem('user'));
|
url = user.url + "/api-phone/gateway";
|
data.tokenAuth = user.tokenAuth;
|
data1.tokenAuth = user.tokenAuth;
|
dateTime = getDate();
|
$("#dateTime").val(dateTime);
|
var curr = plus.webview.currentWebview();
|
if(curr.depotId){ //从粮情页面进入，携带仓库id
|
$('#depot').css('display', 'none'); //隐藏仓库选择框
|
depotId = curr.depotId;
|
depotName = curr.depotName;
|
depotType = curr.depotType;
|
data.data.depotId = depotId;
|
data.data.type = depotType;
|
$("#depotName").html(depotName + '—');
|
// getHistoryList();
|
mui.toast("请选择条件进行查询！");
|
}else{ //从历史数据页面进入，没有携带仓库id
|
getDepotList(); //查询仓库列表
|
mui.toast("请选择条件进行查询！");
|
}
|
})
|
|
//监听仓库输入框
|
mui('.mui-content-padded').on('change', 'select[id="depotId"]', function() {
|
//将输入框的值赋值给参数
|
var index = mui("#depotId")[0].value;
|
depotId = depotList[index].depotId;
|
depotType = depotList[index].depotType;
|
depotName = depotList[index].depotName;
|
data.data.depotId = depotId;
|
data.data.type = depotType;
|
$("#hisList").html("");
|
$("#depotName").html(depotName + '—');
|
});
|
|
//请求查询历史数据
|
function getHistoryList() {
|
if(!(data.data.depotId)){
|
mui.toast("请先选择仓库！");
|
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") {
|
historyList = result.data;
|
if (historyList != null && historyList.length > 0) {
|
renderData();
|
} else {
|
$("#hisList").html("");
|
mui.toast('没有符合条件的数据！');
|
}
|
} else {
|
$("#hisList").html("");
|
mui.toast('没有符合条件的数据！');
|
}
|
},
|
error: function() {
|
mui.alert("系统繁忙,请重试！","提示",["确定"],function(){},"div")
|
}
|
})
|
}
|
|
//渲染页面
|
function renderData() {
|
var html = '';
|
$.each(historyList, function(index, item) {
|
html += '<li class="mui-table-view-cell">';
|
html += '<div onclick="toDetail(\'' + index + '\')" class="mui-table">';
|
html += '<div class="mui-table-cell mui-col-xs-10"><h4 class="mui-ellipsis">检测时间：' +
|
item.receiveDate + '</h4>';
|
html += '<h5 class="f1">粮均温：' + item.tempAve + '℃</h5>';
|
html += '<h5 class="f1">粮高温：' + item.tempMax + '℃</h5>';
|
html += '<h5 class="f1">粮低温：' + item.tempMin + '℃</h5>';
|
html += '<h5 class="f1">仓内温：' + item.tempIn + '℃</h5>';
|
html += '<h5 class="f1"></h5>';
|
html += '<h5 class="f1">仓内湿：' + item.humidityIn + '%</h5>';
|
html += '<h5 class="f1">仓外温：' + item.tempOut + '℃</h5>';
|
html += '<h5 class="f1"></h5>';
|
html += '<h5 class="f1">仓外湿：' + item.humidityOut + '%</h5>';
|
html += '</div><div class="mui-col-xs-2"><a class="mui-navigate-right"></a></div></div></li>';
|
})
|
$("#hisList").html(html);
|
}
|
|
//请求获取仓库列表
|
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);
|
}
|
|
//默认获取当前日期(yyyy-MM)
|
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;
|
}
|
data.data.dateTime = year + "-" + month + "-" + day;
|
return year + "-" + month;
|
}
|
|
//监听时间选择
|
function search() {
|
var dtPicker = new mui.DtPicker({
|
type: 'month',
|
beginDate: new Date(2010, 00), //起始日期
|
value: dateTime //默认时间
|
});
|
dtPicker.show(function(selectItems) {
|
var y = selectItems.y.text; //获取选择的年
|
var m = selectItems.m.text; //获取选择的月
|
var d = selectItems.d.text; //获取选择的日
|
dateTime = y + "-" + m;
|
$("#dateTime").val(dateTime);
|
data.data.dateTime = y + "-" + m + "-" + d;
|
})
|
}
|
|
//查看详情页面
|
function toDetail(index) {
|
if (depotType == '01') {
|
//平房仓粮情
|
mui.openWindow({
|
url: "grain-detail-bungalow-his.html",
|
id: "grain-detail-bungalow-his",
|
extras: {
|
data: historyList[index],
|
depotName: depotName
|
}
|
})
|
} else if (depotType == '02' || depotType == '04') {
|
//圆筒仓粮情
|
mui.openWindow({
|
url: "grain-detail-drum-his.html",
|
id: "grain-detail-drum-his",
|
extras: {
|
data: historyList[index],
|
depotName: depotName
|
}
|
})
|
} else {
|
mui.alert('暂无权限！', '提示',["确定"],function(){},"div");
|
}
|
}
|
</script>
|
</body>
|
</html>
|
