<!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" />
|
|
<style>
|
.mui-content {
|
width: 96%;
|
margin: auto;
|
}
|
|
.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;
|
}
|
|
.grain_all {
|
display: block;
|
height: 212px;
|
}
|
|
.grain_all .grain_title {
|
display: block;
|
font-size: 16px;
|
padding: 0 15px;
|
box-sizing:border-box;
|
color: #245ca7;
|
height: 40px;
|
line-height: 40px;
|
background: #FFFFFF;
|
}
|
|
.grain_all .t1 {
|
font-size: 16px;
|
font-weight: 400;
|
}
|
|
.grain_all .t2 {
|
font-size: 18px;
|
}
|
|
.down {
|
float: left;
|
width: 25%;
|
background: #FFFFFF;
|
padding: 10px 0;
|
text-align: center;
|
border-top: 1px #efefef solid;
|
}
|
|
.first {
|
float: left;
|
width: 100%;
|
background: #FFFFFF;
|
padding: 5px 0;
|
border-top: 1px #efefef solid;
|
}
|
|
.first strong {
|
font-weight: 400;
|
float: left;
|
}
|
|
.up {
|
float: left;
|
width: 33.333%;
|
background: #FFFFFF;
|
padding: 10px 0;
|
text-align: center;
|
border-top: 1px #efefef solid;
|
}
|
|
.f1 {
|
border-right: 1px #efefef solid;
|
}
|
|
.grain_title2 {
|
display: block;
|
font-size: 16px;
|
background: #fff;
|
padding: 0 15px;
|
box-sizing: border-box;
|
color: #245ca7;
|
height: 40px;
|
line-height: 40px;
|
margin-top: 5px;
|
}
|
|
.grain_table1 {
|
width: 100%;
|
}
|
|
.grain_table1 table {
|
width: 100%;
|
background-color: #fff !important
|
}
|
|
.grain_table1 th{
|
font-size: 15px;
|
text-align: center;
|
}
|
|
.grain_table1 tr {
|
font-size: 14px;
|
text-align: center;
|
line-height: 35px;
|
border-top: 1px #efefef solid !important;
|
}
|
|
.grain_table1 .yello {
|
color: #ffa800;
|
}
|
|
.grain_table1 .red {
|
color: #f00;
|
}
|
|
.grain_table1 .blue {
|
color: #0020c1;
|
}
|
|
.grain_table2 {
|
width: 100%;
|
overflow: scroll;
|
}
|
|
.grain_table2 table {
|
width: 100%;
|
background-color: #fff !important
|
}
|
|
.grain_table2 tr {
|
font-size: 13px;
|
text-align: center;
|
line-height: 30px;
|
border-top: 1px #efefef solid !important;
|
}
|
|
.grain_table2 th {
|
font-weight: 400;
|
min-width: 42px;
|
text-align: center;
|
padding: 0 5px;
|
}
|
|
.grain_table2 td {
|
min-width: 42px;
|
text-align: center;
|
padding: 0 5px;
|
}
|
|
.grain-btn {
|
display: block;
|
text-align: center;
|
}
|
|
.grain-btn button {
|
background: #668dc1;
|
color: #fff;
|
border: 0px;
|
border-radius: 3px;
|
height: 44px;
|
line-height: 44px;
|
padding: 0 15px;
|
font-size: 16px;
|
margin: 20px 10px;
|
}
|
|
.grain-btn p {
|
margin: 0px;
|
padding: 0px;
|
}
|
</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="grain_all mb-2">
|
<div class="grain_title">
|
<strong>粮情总览</strong>
|
</div>
|
<div class="up">
|
<h3 class="t1">粮均温</h3>
|
<h3 class="t2"><span id="tempAve"></span>℃</h3>
|
</div>
|
<div class="up">
|
<h3 class="t1">粮高温</h3>
|
<h3 class="t2"><span id="tempMax"></span>℃</h3>
|
</div>
|
<div class="up">
|
<h3 class="t1">粮低温</h3>
|
<h3 class="t2"><span id="tempMin"></span>℃</h3>
|
</div>
|
<div class="down">
|
<h3 class="t1">仓内温</h3>
|
<h3 class="t2"><span id="tempIn"></span>℃</h3>
|
</div>
|
<div class="down f1">
|
<h3 class="t1">仓内湿</h3>
|
<h3 class="t2"><span id="humidityIn"></span>%</h3>
|
</div>
|
<div class="down">
|
<h3 class="t1">仓外温</h3>
|
<h3 class="t2"><span id="tempOut"></span>℃</h3>
|
</div>
|
<div class="down">
|
<h3 class="t1">仓外湿</h3>
|
<h3 class="t2"><span id="humidityOut"></span>%</h3>
|
</div>
|
<div class="first">
|
<strong style="padding-left: 15px;">采集时间：</strong>
|
<strong id="receiveDate"></strong>
|
</div>
|
</div>
|
<div class="grain_title2"><strong>各层粮情信息</strong></div>
|
<div class="grain_table1">
|
<table>
|
<thead>
|
<tr>
|
<th width="25%">显示控制</th>
|
<th width="25%" class="yello">平均温</th>
|
<th width="25%" class="red">最高温</th>
|
<th width="25%" class="blue">最低温</th>
|
</tr>
|
</thead>
|
<tbody id="table1">
|
<!-- <tr>
|
<td>
|
<input type="checkbox">
|
<span>1层</span>
|
</td>
|
<td class="yello">###℃</td>
|
<td class="red">###℃</td>
|
<td class="blue">###℃</td>
|
</tr>-->
|
</tbody>
|
</table>
|
</div>
|
<div class="grain_title2"><strong><span id="ceng"></span>层详细粮情</strong></div>
|
<div class="grain_table2">
|
<table>
|
<thead id="table2_1">
|
<tr>
|
<th>行\列</th>
|
<th>1列</th>
|
<th>2列</th>
|
<th>3列</th>
|
<th>4列</th>
|
<th>5列</th>
|
<th>6列</th>
|
<th>7列</th>
|
<th>8列</th>
|
<th>9列</th>
|
<th>10列</th>
|
</tr>
|
</thead>
|
<tbody id="table2_2">
|
<tr>
|
<td>1行</td>
|
<td>19.82</td>
|
<td>19.82</td>
|
<td>19.82</td>
|
<td>19.82</td>
|
<td>19.82</td>
|
<td>19.82</td>
|
<td>19.82</td>
|
<td>19.82</td>
|
<td>19.82</td>
|
<td>19.22</td>
|
</tr>
|
</tbody>
|
</table>
|
</div>
|
|
<div class="grain-btn">
|
<button class="" onclick="gatherGrain()">粮情采集</button>
|
<button style="background: #9e5cda;" onclick="historyGrain()">历史数据</button>
|
</div>
|
</div>
|
<script src="./js/mui.js"></script>
|
<script src="./js/jquery.min.js"></script>
|
<script src="./js/echarts.min.js"></script>
|
|
<script type="text/javascript" charset="utf-8">
|
var url; //接口路径
|
var grainData;
|
var depotId;
|
var depotName;
|
var depotType;
|
var tagCeng; //粮情层数
|
var tagHang; //粮情层数
|
var tagLie; //粮情层数
|
//粮情查询参数
|
var data1 = {
|
"interfaceId": "5302",
|
"sign": "10302",
|
"outId": "10302",
|
"reqDateTime": new Date(),
|
"tokenAuth": "",
|
"data": {
|
"depotId": "",
|
"type": ""
|
}
|
};
|
//粮情采集参数
|
var data2 = {
|
"interfaceId": "5305",
|
"sign": "10305",
|
"outId": "10305",
|
"reqDateTime": new Date(),
|
"tokenAuth": "",
|
"data": {
|
"depotId": ""
|
}
|
};
|
mui.init()
|
mui.plusReady(function() {
|
//获取仓库参数，如仓库Id，仓库类型和仓库名称
|
var curr = plus.webview.currentWebview();
|
depotId = curr.depotId;
|
depotName = curr.depotName;
|
depotType = curr.depotType;
|
$("#depotName").html(depotName);
|
//获取接口路径及tokenAuth
|
var user = JSON.parse(localStorage.getItem('user'))
|
//请求参数赋值
|
data1.tokenAuth = user.tokenAuth;
|
data2.tokenAuth = user.tokenAuth;
|
data1.data.depotId = depotId;
|
data1.data.type = depotType;
|
data2.data.depotId = depotId;
|
url = user.url + "/api-phone/gateway";
|
//查询仓库粮情信息
|
getGrainData();
|
})
|
|
function getGrainData() {
|
//发送获取粮情请求
|
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") {
|
grainData = result.data;
|
renderGrain();
|
} else {
|
mui.alert(result.msg, '提示',["确定"],function(){},"div");
|
}
|
},
|
error: function() {
|
mui.alert('系统繁忙,请重试！', '提示',["确定"],function(){},"div");
|
}
|
})
|
|
}
|
|
//渲染粮情数据
|
function renderGrain() {
|
if (grainData != null) {
|
//解析出层行列
|
var array = grainData.cable.split("-");
|
tagCeng = parseInt(array[0], 10);
|
tagHang = parseInt(array[1], 10);
|
tagLie = parseInt(array[2], 10);
|
//渲染总览信息
|
$("#tempAve").html(grainData.tempAve);
|
$("#tempMax").html(grainData.tempMax);
|
$("#tempMin").html(grainData.tempMin);
|
$("#tempIn").html(grainData.tempIn);
|
$("#humidityIn").html(grainData.humidityIn);
|
$("#tempOut").html(grainData.tempOut);
|
$("#humidityOut").html(grainData.humidityOut);
|
$("#receiveDate").html(grainData.receiveDate);
|
//渲染各层粮情
|
var tableOne = grainData.details;
|
var html1 = '';
|
tagCeng = tableOne.length;
|
if (tableOne != null && tableOne.length > 0) {
|
$.each(tableOne, function(index, item) {
|
html1 += '<tr><td><input id="check' + item.fz + '" type="checkbox" onclick="showCen(\'' + item.fz + '\')">';
|
html1 += '<span>' + item.fzName + '</span></td>';
|
html1 += '<td class="yello">' + item.tempAve + '℃</td>';
|
html1 += '<td class="red">' + item.tempMax + '℃</td>';
|
html1 += '<td class="blue">' + item.tempMin + '℃</td>';
|
})
|
} else {
|
html1 += '<tr><td colspan="4">暂无数据</td></tr>';
|
}
|
$("#table1").html(html1);
|
//默认选中1层并渲染
|
$("#check1").attr("checked", true);
|
renderTierGrain(1);
|
}
|
}
|
|
//选择层渲染
|
function showCen(fz) {
|
for (var i = 1; i <= tagCeng; i++) {
|
if (fz != i) {
|
$("#check" + i).attr("checked", false);
|
}
|
}
|
renderTierGrain(fz)
|
}
|
|
//渲染某层粮情
|
function renderTierGrain(tag) {
|
var tableTwo = grainData.points;
|
var html1 = '';
|
var html2 = '';
|
if (tableTwo != null && tableTwo.length > 0) {
|
var arrData = new Array;
|
arrData.push(0);
|
$.each(tableTwo, function(index, item) {
|
if (item.fz == tag) {
|
arrData.push(item.temp);
|
}
|
})
|
|
if (arrData.length > 1) {
|
html1 += '<tr><th>行\\列</th>';
|
var count = 1;
|
for (var i = 1; i <= tagHang; i++) {
|
html2 += '<tr><td>' + i + '行</td>';
|
for (var j = i; j < arrData.length; j += tagHang) {
|
|
if (i == 1) {
|
html1 += '<td>' + count + '列</td>';
|
count += 1;
|
}
|
html2 += '<td>' + arrData[j] + '</td>';
|
}
|
html1 += '</tr>';
|
html2 += '</tr>';
|
}
|
}
|
} else {
|
html1 += '<tr><td>暂无数据</td></tr>';
|
}
|
$("#ceng").html(tag);
|
$("#table2_1").html(html1);
|
$("#table2_2").html(html2);
|
}
|
//粮情采集
|
function gatherGrain() {
|
//发送获取粮情请求
|
mui.ajax(url, {
|
type: "POST",
|
dataType: "json",
|
crossDomain: true,
|
contentType: "application/json;charset=utf-8",
|
data: JSON.stringify(data2),
|
success: function(data) {
|
if (data.code == "0000") {
|
mui.alert('采集命令发送成功，请等待30秒重新打开此页面查看采集数据！', '提示',["确定"],function(){},"div");
|
} else {
|
mui.alert(data.msg, '提示',["确定"],function(){},"div");
|
}
|
},
|
error: function() {
|
mui.alert('系统繁忙,请重试！', '提示',["确定"],function(){},"div");
|
}
|
})
|
}
|
|
//跳转历史数据页面
|
function historyGrain() {
|
mui.openWindow({
|
url: "grain-history-list.html",
|
id: "grain-history-list",
|
extras: {
|
depotType: depotType,
|
depotId: depotId,
|
depotName: depotName
|
}
|
})
|
}
|
</script>
|
</body>
|
</html>
|
