<!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-bar-nav {
|
background: #245ca7;
|
}
|
.mui-title {
|
color: #FFFFFF;
|
}
|
.mui-icon-back:before, .mui-icon-left-nav:before {
|
color: #FFFFFF;
|
}
|
.mui-content-padded {
|
position: fixed;
|
z-index: 10;
|
width: 100%;
|
margin:unset;
|
padding: 6px;
|
border-bottom: 2px solid #0bcece;
|
}
|
input[type=text] {
|
font-size: 16px;
|
-webkit-box-sizing: border-box;
|
box-sizing: border-box;
|
height: 35px;
|
text-align: left;
|
border: 0;
|
border-radius: 50px;
|
background-color: #efeff4;
|
margin-bottom: 1px;
|
width: 75%;
|
}
|
.sousuo{
|
font-size: 16px;
|
background:#0277f7;
|
color: #fff;
|
border-radius: 6px;
|
line-height: 22px;
|
float: right;
|
width: 22%;
|
}
|
.mui-table-view {
|
margin-top: 50px;
|
}
|
.mui-table-view-chevron .mui-table-view-cell {
|
padding-right: 8px;
|
}
|
|
.mui-table-view-cell {
|
padding: 8px 8px;
|
}
|
|
.ba-right{
|
padding: 22px 0;
|
}
|
/*弹出*/
|
.mark{
|
background:rgba(0,0,0,.8);
|
position: fixed;
|
left: 0px;
|
top: 0px;
|
right: 0px;
|
bottom: 0px;
|
z-index: 10000;
|
display: flex;
|
}
|
.mark_layer{
|
align-self: center;
|
background: #fff;
|
width: 75%;
|
margin: auto;
|
border-radius: 5px;
|
overflow:hidden;
|
padding: 3px;
|
}
|
.mark_layer .mark_btn button{
|
background: #ea8b04;
|
color: #fff;
|
font-size: 14px;
|
width: 100%;
|
padding: 8px 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">巡更记录</h1>
|
</header>
|
<div class="mui-content">
|
<div class="mui-content-padded" style="background: #FFFFFF;">
|
<input id="dateTime" type="text" onclick="searchDate()" placeholder="请选择日期检索" readonly="readonly">
|
<button class="sousuo" onclick="getPatrolList()">查询</button>
|
</div>
|
<!--数据列表-->
|
<ul id="listData" class="mui-table-view mui-table-view-chevron">
|
<!-- <li class="mui-table-view-cell mui-media">
|
<div class="ba-right mui-pull-right">
|
<button class="mui-btn-yellow" onclick="showImg('002')">查看照片</button>
|
</div>
|
<div class="mui-media-body">
|
15:00:00
|
<p class='mui-ellipsis'>打卡人:<span>粮库管理员</span></p>
|
<p class='mui-ellipsis'>经度:<span>113.54</span></p>
|
<p class='mui-ellipsis'>纬度:<span>34.7988</span></p>
|
</div>
|
</li> -->
|
</ul>
|
</div>
|
<!--弹出-->
|
<div class="mark" id="mark" style="display: none;">
|
<div class="mark_layer">
|
<div class="fwq_body">
|
<img id="image" style="width: 100%" src="">
|
</div>
|
<div class="mark_btn mx-3 mb-3">
|
<button class="btn btn-block" onclick="closeSetting()">确定</button>
|
</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">
|
mui.init();
|
var url; //接口路径
|
var dataList; //数据集合
|
var wt; //等待圈
|
var data = {
|
"interfaceId": "5802",
|
"sign": "10802",
|
"outId": "10802",
|
"reqDateTime": new Date(),
|
"tokenAuth": "",
|
"data": {
|
"date": ""
|
}
|
};
|
var data0 = {
|
"interfaceId": "5803",
|
"sign": "10803",
|
"outId": "10803",
|
"reqDateTime": new Date(),
|
"tokenAuth": "",
|
"data": {
|
"id": ""
|
}
|
};
|
mui.plusReady(function() {
|
var user = JSON.parse(localStorage.getItem('user'));
|
data.tokenAuth = user.tokenAuth;
|
data0.tokenAuth = user.tokenAuth;
|
url = user.url + "/api-phone/gateway";
|
$("#dateTime").val(getDate());
|
})
|
|
//默认获取当天日期(yyyy-MM-dd)
|
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;
|
}
|
return year + "-" + month + "-" + day
|
}
|
|
//监听时间选择
|
function searchDate() {
|
var dtPicker = new mui.DtPicker({
|
type: 'date',
|
beginDate: new Date(2010, 00, 01), //起始日期
|
value: getDate() //默认时间
|
});
|
dtPicker.show(function(selectItems) {
|
var y = selectItems.y.text; //获取选择的年
|
var m = selectItems.m.text; //获取选择的月
|
var d = selectItems.d.text; //获取选择的日
|
var dateTime = y + "-" + m + "-" + d;
|
$("#dateTime").val(dateTime);
|
})
|
}
|
|
//获取仓库信息
|
function getPatrolList() {
|
//转圈等待框
|
wt = plus.nativeUI.showWaiting("查询中，请稍后");
|
data.data.date = mui("#dateTime")[0].value
|
//发送请求获取仓库信息
|
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") {
|
dataList = result.data;
|
renderPatrolList();
|
} else {
|
mui.alert(result.msg, '提示', ["确定"], function() {}, "div");
|
}
|
},
|
error: function() {
|
mui.alert('系统繁忙,请重试！', '提示', ["确定"], function() {}, "div");
|
}
|
})
|
}
|
//渲染
|
function renderPatrolList() {
|
var html = '';
|
if (dataList != null && dataList.length > 0) {
|
$.each(dataList, function(index, item) {
|
html += '<li class="mui-table-view-cell mui-media">';
|
if (item.imgTag == 'Y') {
|
html += '<div class="ba-right mui-pull-right">';
|
html += '<button class="mui-btn-yellow" onclick="showImg(\'' + item.id + '\')">查看照片</button></div>';
|
}
|
html += '<div class="mui-media-body">' + item.createTime;
|
html += '<p class="mui-ellipsis">打卡人:<span>' + item.userName + '</span></p>';
|
html += '<p class="mui-ellipsis">经度:<span>' + item.longitude.substring(0, 8) + '</span></p>';
|
html += '<p class="mui-ellipsis">纬度:<span>' + item.latitude.substring(0, 7) + '</span></p>';
|
html += '</div></li>';
|
})
|
} else {
|
mui.alert('暂无数据！', '提示', ["确定"], function() {}, "div");
|
}
|
|
$("#listData").html(html);
|
//关闭转圈等待框
|
wt.close();
|
}
|
|
//查询记录照片
|
function showImg(id) {
|
wt = plus.nativeUI.showWaiting("请稍后...");
|
data0.data.id = id;
|
//发送请求获取仓库信息
|
mui.ajax(url, {
|
type: "POST",
|
dataType: "json",
|
crossDomain: true,
|
contentType: "application/json;charset=utf-8",
|
data: JSON.stringify(data0),
|
success: function(result) {
|
if (result.code == "0000") {
|
$('#image').attr('src', result.data.base64Img);
|
|
//关闭转圈等待框
|
wt.close();
|
$('#mark').css('display', 'flex');
|
} else {
|
mui.alert(result.msg, '提示', ["确定"], function() {}, "div");
|
}
|
},
|
error: function() {
|
mui.alert('系统繁忙,请重试！', '提示', ["确定"], function() {}, "div");
|
}
|
})
|
}
|
|
//关闭弹窗并赋值
|
function closeSetting() {
|
$("#mark").css('display', 'none');
|
}
|
</script>
|
</body>
|
</html>
|
