<!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-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;
|
}
|
|
/*气体检测-仓库列表*/
|
.gas_depot {
|
background: #fff;
|
width: 94%;
|
margin: auto;
|
margin-top: 12px;
|
margin-bottom: 10px;
|
border-top-left-radius: 5px;
|
border-top-right-radius: 5px;
|
}
|
|
.gas_depot_title {
|
background: rgb(68, 189, 245);
|
height: 10px;
|
border-top-left-radius: 5px;
|
border-top-right-radius: 5px;
|
}
|
|
.gas_depot_body {
|
padding-left: 15px;
|
}
|
|
.gas_depot_body table {
|
width: 100%;
|
}
|
|
.gas_depot_body tr {
|
border-bottom: 1px #efefef solid;
|
height: 32px;
|
line-height: 32px;
|
}
|
|
.gas_depot_img {
|
width: 8px;
|
margin-right: 3px;
|
}
|
|
.gas_depot_one {
|
color: rgb(102, 102, 102);
|
font-size: 15px;
|
width: 35%;
|
}
|
|
.gas_depot_two {
|
color: black;
|
font-size: 16px;
|
font-weight: 510;
|
}
|
</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 id="gasList">
|
<div class="gas_depot">
|
<div class="gas_depot_title"></div>
|
<div class="gas_depot_body">
|
<table>
|
<tr class="gas_depot_tr">
|
<td class="gas_depot_one">仓库名称：</td>
|
<td class="gas_depot_two">##号仓</td>
|
<td>
|
<a href="javascript:void(0)" onclick="gasDetail()">
|
<img class="gas_depot_img" src="./images/ico_arr.png">
|
</a>
|
</td>
|
</tr>
|
<tr>
|
<td class="gas_depot_one">CO2浓度：</td>
|
<td class="gas_depot_two">## PPM</td>
|
<td></td>
|
</tr>
|
<tr>
|
<td class="gas_depot_one">PH3浓度：</td>
|
<td class="gas_depot_two">## PPM</td>
|
<td></td>
|
</tr>
|
<tr>
|
<td class="gas_depot_one">O2浓度：</td>
|
<td class="gas_depot_two">## %</td>
|
<td></td>
|
</tr>
|
<tr>
|
<td class="gas_depot_one">N2浓度：</td>
|
<td class="gas_depot_two">## %</td>
|
<td></td>
|
</tr>
|
<tr style="border-bottom: 0 #efefef solid;">
|
<td class="gas_depot_one">检测时间：</td>
|
<td class="gas_depot_two">2020-01-01 01:01:01</td>
|
<td></td>
|
</tr>
|
</table>
|
</div>
|
</div>
|
</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 gasList; //气体仓库列表集合
|
var data = {
|
"interfaceId": "5301",
|
"sign": "10301",
|
"outId": "10301",
|
"reqDateTime": new Date(),
|
"tokenAuth": "",
|
"data": {
|
"type": "gas"
|
}
|
};
|
mui.init()
|
mui.plusReady(function() {
|
var user = JSON.parse(localStorage.getItem('user'));
|
data.tokenAuth = user.tokenAuth;
|
url = user.url + "/api-phone/gateway";
|
getGasList();
|
})
|
|
//获取仓库信息
|
function getGasList() {
|
//发送请求获取仓库信息
|
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") {
|
gasList = result.data;
|
if (gasList != null && gasList.length > 0) {
|
renderGasList();
|
} else {
|
mui.alert("暂无数据！", '提示',["确定"],function(){},"div");
|
}
|
} else {
|
mui.alert(result.msg, '提示',["确定"],function(){},"div");
|
}
|
},
|
error: function() {
|
mui.alert('系统繁忙,请重试！', '提示',["确定"],function(){},"div");
|
}
|
})
|
}
|
|
//渲染
|
function renderGasList() {
|
var html = '';
|
$.each(gasList, function(index, item) {
|
html += '<div class="gas_depot"><div class="gas_depot_title"></div><div class="gas_depot_body"><table>';
|
|
html += '<tr class="gas_depot_tr"><td class="gas_depot_one">仓库名称：</td><td class="gas_depot_two">' +
|
item.depotName + '</td><td><a href="javascript:void(0)" onclick="gasDetail(\'' + index + '\')">' +
|
'<img class="gas_depot_img" src="./images/ico_arr.png"></a></td></tr>';
|
|
html += '<tr><td class="gas_depot_one">CO2浓度：</td><td class="gas_depot_two">' +
|
item.perCo2 + ' PPM</td><td></td></tr>';
|
|
html += '<tr><td class="gas_depot_one">PH3浓度：</td><td class="gas_depot_two">' +
|
item.perPh3 + ' PPM</td><td></td></tr>';
|
|
html += '<tr><td class="gas_depot_one">O2浓度：</td><td class="gas_depot_two">' +
|
item.perO2 + ' PPM</td><td></td></tr>';
|
|
html += '<tr><td class="gas_depot_one">N2浓度：</td><td class="gas_depot_two">' +
|
item.perN2 + ' PPM</td><td></td></tr>';
|
|
html += '<tr style="border-bottom: 0 #efefef solid;"><td class="gas_depot_one">检测时间：</td>' +
|
'<td class="gas_depot_two">' + (item.receiveDate == null ? '无检测记录' : item.receiveDate) + '</td><td></td></tr>';
|
html += '</table></div></div>';
|
})
|
$("#gasList").html(html);
|
}
|
|
function gasDetail(index) {
|
mui.openWindow({
|
url: "gas-detail.html",
|
id: "gas-detail",
|
extras: {
|
depotType: gasList[index].depotType,
|
depotId: gasList[index].depotId,
|
depotName: gasList[index].depotName
|
}
|
})
|
}
|
</script>
|
</body>
|
</html>
|
