<!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_title {
|
background: #fff;
|
border-bottom: 1px #efefef solid;
|
padding: 20px;
|
box-sizing: border-box;
|
width: 96%;
|
margin: auto;
|
}
|
|
.gas_title strong {
|
display: block;
|
text-align: center;
|
color: #245ca7;
|
font-size: 16px;
|
}
|
|
.gas_title span {
|
display: block;
|
text-align: center;
|
padding: 5px 0;
|
font-size: 14px;
|
}
|
|
.gas_table {
|
width: 96%;
|
margin: auto;
|
margin-top: 6px;
|
}
|
|
.gas_table table {
|
width: 100%;
|
background-color: #fff !important
|
}
|
|
.gas_table th {
|
border-top: 1px #efefef solid !important;
|
font-size: 15px;
|
text-align: center;
|
}
|
|
.gas_table tr {
|
font-size: 14px;
|
text-align: center;
|
line-height: 35px;
|
}
|
|
.gas_table td {
|
border-top: 1px #efefef solid !important;
|
}
|
|
.gas_table .yello {
|
color: #ffa800;
|
}
|
|
.gas_table .red {
|
color: #f00;
|
}
|
|
.gas_table .blue {
|
color: #0020c1;
|
}
|
|
.gas_table .green {
|
color: #1c7430;
|
}
|
|
|
.gas_btn {
|
display: block;
|
text-align: center;
|
}
|
|
.gas_btn button {
|
background: #668dc1;
|
color: #fff;
|
border: 0px;
|
border-radius: 3px;
|
height: 44px;
|
line-height: 44px;
|
padding: 0 20px;
|
margin: 10px 0;
|
}
|
</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="gas_title">
|
<strong>气体检测记录</strong>
|
<span id="checkUser">检测人：</span>
|
<span id="receiveDate">检测时间：</span>
|
</div>
|
<div class="gas_table">
|
<table>
|
<tr>
|
<th width="40%">气体类型</th>
|
<th width="20%" class="red">最高</th>
|
<th width="20%" class="blue">平均</th>
|
<th width="20%" class="green">最低</th>
|
</tr>
|
<tr>
|
<td>CO2浓度(PPM)</td>
|
<td class="red" id="perCo2Max"></td>
|
<td class="blue" id="perCo2"></td>
|
<td class="green" id="perCo2Min"></td>
|
</tr>
|
<tr>
|
<td>PH3浓度(PPM)</td>
|
<td class="red" id="perPh3Max"></td>
|
<td class="blue" id="perPh3"></td>
|
<td class="green" id="perPh3Min"></td>
|
</tr>
|
<tr>
|
<td>O2浓度(%)</td>
|
<td class="red" id="perO2Max"></td>
|
<td class="blue" id="perO2"></td>
|
<td class="green" id="perO2Min"></td>
|
</tr>
|
<tr>
|
<td>N2浓度(%)</td>
|
<td class="red" id="perN2Max"></td>
|
<td class="blue" id="perN2"></td>
|
<td class="green" id="perN2Min"></td>
|
</tr>
|
</table>
|
</div>
|
|
<div class="gas_btn">
|
<button onclick="gatherGas()">气体采集</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 gasData; //集合
|
//气体展示接口数据
|
var data1 = {
|
"interfaceId": "5306",
|
"sign": "10306",
|
"outId": "10306",
|
"reqDateTime": new Date(),
|
"tokenAuth": "",
|
"data": {
|
"depotId": "",
|
"type": ""
|
}
|
};
|
//气体采集的参数
|
var data2 = {
|
"interfaceId": "5307",
|
"sign": "10307",
|
"outId": "10307",
|
"reqDateTime": new Date(),
|
"tokenAuth": "",
|
"data": {
|
"depotId": ""
|
}
|
};
|
mui.init()
|
mui.plusReady(function() {
|
//获取仓库参数，如仓库Id，仓库类型和仓库名称
|
var curr = plus.webview.currentWebview();
|
$("#depotName").html(curr.depotName);
|
//获取接口路径及tokenAuth
|
var user = JSON.parse(localStorage.getItem('user'))
|
//请求参数赋值
|
data1.tokenAuth = user.tokenAuth;
|
data1.data.depotId = curr.depotId;
|
data1.data.type = curr.depotType;
|
data2.tokenAuth = user.tokenAuth;
|
data2.data.depotId = curr.depotId;
|
url = user.url + "/api-phone/gateway";
|
//查询仓库气体信息
|
getGasData();
|
})
|
|
//获取仓库信息
|
function getGasData() {
|
//发送请求获取仓库信息
|
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") {
|
gasData = result.data;
|
if (gasData != null) {
|
renderGasList();
|
} else {
|
mui.alert("暂无检测记录！", '提示',["确定"],function(){},"div");
|
}
|
} else {
|
mui.alert("无气体检测记录！", '提示',["确定"],function(){},"div");
|
}
|
},
|
error: function() {
|
mui.alert('系统繁忙,请重试！', '提示',["确定"],function(){},"div");
|
}
|
})
|
}
|
|
//渲染
|
function renderGasList() {
|
$("#checkUser").html("检测人：" + gasData.checkUser);
|
$("#receiveDate").html("检测时间：" + gasData.receiveDate);
|
$("#perCo2Max").html(gasData.perCo2Max);
|
$("#perCo2").html(gasData.perCo2);
|
$("#perCo2Min").html(gasData.perCo2Min);
|
$("#perPh3Max").html(gasData.perPh3Max);
|
$("#perPh3").html(gasData.perPh3);
|
$("#perPh3Min").html(gasData.perPh3Min);
|
$("#perO2Max").html(gasData.perO2Max);
|
$("#perO2").html(gasData.perO2);
|
$("#perO2Min").html(gasData.perO2Min);
|
$("#perN2Max").html(gasData.perN2Max);
|
$("#perN2").html(gasData.perN2);
|
$("#perN2Min").html(gasData.perN2Min);
|
}
|
|
//气体采集
|
function gatherGas() {
|
//发送请求采集气体
|
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");
|
}
|
})
|
}
|
</script>
|
</body>
|
</html>
|
