<!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;
|
}
|
.ckzcgl_title{
|
display: block;
|
background: #fff;
|
border-bottom: 1px #eee solid;
|
padding:5px;
|
box-sizing: border-box;
|
}
|
.ckzcgl_title p{
|
line-height: 30px;
|
display: block;
|
margin-right: 20px;
|
color: #245ca7;
|
}
|
|
.ckzcgl_tt{
|
display: block;
|
padding: 10px 15px;
|
box-sizing: border-box;
|
}
|
|
.ckzcgl_pic{
|
display: flex;
|
justify-content: space-between;
|
padding:0 15px;
|
box-sizing: border-box;
|
}
|
.ckzcgl_pic .pic{
|
flex: 1;
|
}
|
.ckzcgl_pic .pic img{
|
width: 100%;
|
height: auto;
|
}
|
.ckzcgl_pic .btns{
|
width: 80px;
|
align-self: center;
|
text-align: right;
|
}
|
.ckzcgl_pic .btns button{
|
background:#245ca7;
|
border: 0px;
|
color: #fff;
|
font-size: 14px;
|
width: 70px;
|
height: 44px;
|
}
|
|
.ckzcgl_btns{
|
display: flex;
|
justify-content: space-between;
|
padding:5px;
|
box-sizing: border-box;
|
}
|
.ckzcgl_btns button{
|
height: 44px;
|
font-size: 14px;
|
width: 100%;
|
}
|
.ckzcgl_btns button{
|
color: #fff;
|
}
|
.ckzcgl_btns button:first-child{
|
background: #ff6355;
|
}
|
.ckzcgl_btns button:last-child{
|
background: #245ca7;
|
}
|
.dis{
|
background: #bdbdbd!important;
|
color: #555!important;
|
}
|
.ckzcgl_text{
|
display: block;
|
padding:0 15px;
|
box-sizing: border-box;
|
}
|
|
.ckzcgl_input{
|
display: flex;
|
padding: 5px 0px;
|
}
|
.ckzcgl_input .ckzcgl_input_box{
|
flex: 1;
|
display: flex;
|
}
|
.ckzcgl_input .ckzcgl_input_box span{
|
align-self: center;
|
padding:0 0 0 10px;
|
text-align: right;
|
font-size: 14px;
|
}
|
.ckzcgl_input .ckzcgl_input_box input{
|
height: 40px;
|
line-height: 40px;
|
flex: 1;
|
font-size: 14px;
|
}
|
.ckzcgl_input small{
|
width: 95px;
|
align-self: center;
|
padding-left: 5px;
|
font-size: 14px;
|
}
|
</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="ckzcgl_title">
|
<p>保管员：<span id="cname"></span></p>
|
<p>卸粮仓库：<span id="depotName"></span></p>
|
<p>车辆：<span id="plateNum"></span></p>
|
</div>
|
|
<p class="ckzcgl_tt">车辆/仓库照片</p>
|
<div class="ckzcgl_pic">
|
<div class="pic">
|
<img id="img1" src="./images/spad.png">
|
</div>
|
<div class="btns">
|
<button id="btn1" class="btn dis" onclick="choosePic('1')">拍照</button>
|
</div>
|
</div>
|
|
<p class="ckzcgl_tt">卸粮过程照片</p>
|
<div class="ckzcgl_pic">
|
<div class="pic">
|
<img id="img2" src="./images/spad.png">
|
</div>
|
<div class="btns">
|
<button id="btn2" class="btn dis" onclick="choosePic('2')">拍照</button>
|
</div>
|
</div>
|
|
<div class="ckzcgl_input">
|
<div class="ckzcgl_input_box">
|
<span>值仓扣重：</span>
|
<input id="number" type="number" placeholder="请输入要扣除的重量！" value="" class="form-control">
|
</div>
|
<small>kg</small>
|
</div>
|
|
<div class="ckzcgl_btns">
|
<button id="btn_start" class="btn mr-1" onclick="toHandle('start')">开始卸粮</button>
|
<button id="btn_end" class="btn ml-1 dis" onclick="toHandle('end')">结束卸粮</button>
|
</div>
|
|
<div class="ckzcgl_text">
|
<p>请在确认车辆信息和目标仓房无误后点击开始卸粮按钮开始值仓！</p>
|
<p>拍照完成后点击结束卸粮按钮结束值仓！</p>
|
</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">
|
//初始化，页面使用mui.back返回父页面时进行页面刷新
|
mui.init({
|
beforeback: function() {
|
//获得父页面的webview
|
var list = plus.webview.currentWebview().opener();
|
//触发父页面的自定义事件(refresh),从而进行刷新
|
mui.fire(list, 'refresh');
|
//返回true,继续页面关闭逻辑
|
return true;
|
}
|
});
|
var x_pi = 3.14159265358979324 * 3000.0 / 180.0;
|
var pi = 3.1415926535897932384626;
|
var a = 6378245.0;
|
var ee = 0.00669342162296594323;
|
var url; //接口路径
|
var uploadUrl; //图片上传路径
|
var cname; //登录用户的名称
|
var depotName; //仓库名称
|
var plateNum; //车牌
|
var deHandle; //值仓扣重
|
var fileName1; //照片1名称
|
var fileName2; //照片2名称
|
var base64Img1; //照片1信息
|
var base64Img2; //照片2信息
|
var handleStart; //值仓开始时间
|
var longitude = null; //百度地图(BD-09)经度
|
var latitude = null; //百度地图(BD-09)纬度
|
|
//查看值仓详情请求参数
|
var data1 = {
|
"interfaceId": "5208",
|
"sign": "10208",
|
"outId": "10208",
|
"reqDateTime": new Date(),
|
"tokenAuth": "",
|
"data": {
|
"id": "",
|
"intelCard": ""
|
}
|
};
|
//入库值仓提交请求参数
|
var data2 = {
|
"interfaceId": "5205",
|
"sign": "10208",
|
"outId": "10208",
|
"reqDateTime": new Date(),
|
"tokenAuth": "",
|
"data": {
|
"type": "start",
|
"id": "",
|
"fileName1": "",
|
"fileName2": "",
|
"deHandle": "",
|
"longitude": "",
|
"latitude": "",
|
"handleType": "1"
|
}
|
};
|
|
mui.plusReady(function() {
|
//获取传递的参数
|
var curr = plus.webview.currentWebview();
|
var user = JSON.parse(localStorage.getItem('user'));
|
//参数赋值
|
data1.tokenAuth = user.tokenAuth;
|
data1.data.id = curr.recordId;
|
data2.tokenAuth = user.tokenAuth;
|
data2.data.id = curr.recordId;
|
url = user.url + "/api-phone/gateway";
|
uploadUrl = user.url + "/api-phone/upload-img";
|
cname = user.cname;
|
getDetail();
|
})
|
|
//获取单子详细信息
|
function getDetail() {
|
//发送请求
|
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") {
|
//赋值
|
depotName = result.data.depotName;
|
plateNum = result.data.plateNum;
|
deHandle = result.data.deHandle;
|
fileName1 = result.data.fileName1;
|
fileName2 = result.data.fileName2;
|
base64Img1 = result.data.base64Img1;
|
base64Img2 = result.data.base64Img2;
|
handleStart = result.data.handleStart;
|
//渲染
|
render();
|
} else {
|
mui.alert(result.msg, '提示', ["确定"], function() {}, "div");
|
}
|
},
|
error: function() {
|
mui.alert('系统繁忙,请重试！', '提示', ["确定"], function() {}, "div");
|
}
|
})
|
}
|
|
//页面渲染
|
function render() {
|
//渲染保管员、仓库、车辆信息
|
$("#cname").html(cname);
|
$("#depotName").html(depotName);
|
$("#plateNum").html(plateNum);
|
//照片渲染
|
if (base64Img1) {
|
$('#img1').attr('src', base64Img1);
|
}
|
if (base64Img2) {
|
$('#img2').attr('src', base64Img2);
|
}
|
//扣重渲染
|
if (!deHandle) {
|
$("#number").val(deHandle);
|
}
|
//拍照及卸粮按钮渲染
|
if (handleStart) {
|
$("#btn1").removeClass("dis");
|
$("#btn2").removeClass("dis");
|
$("#btn_start").addClass("dis");
|
}
|
if (fileName1 && fileName2) {
|
$("#btn_end").removeClass("dis");
|
}
|
}
|
|
//值仓
|
function toHandle(tag) {
|
if (tag == 'start') { //开始卸粮
|
//开始卸粮时，先再次请求查看单子是否是在值仓状态
|
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") {
|
//判断单子是否在值仓状态
|
if (result.data.progress == "HANDLE") {
|
//判断单子是否开始进行值仓
|
if (result.data.handleStart == null) {
|
data2.data.type = tag;
|
//发送请求，开始值仓
|
mui.ajax(url, {
|
type: "POST",
|
dataType: "json",
|
crossDomain: true,
|
contentType: "application/json;charset=utf-8",
|
data: JSON.stringify(data2),
|
success: function(result) {
|
mui.toast("开始卸粮，请上传图片！");
|
//重新请求获取单子详情并渲染
|
getDetail();
|
},
|
error: function() {
|
mui.alert('开始值仓提交失败，请重新操作！', '提示', ["确定"], function() {}, "div");
|
}
|
})
|
} else {
|
mui.toast("已开始卸粮！");
|
}
|
} else {
|
//如果不在值仓状态，给出提示信息，不进行提交
|
mui.alert("该单子不在值仓状态，不能进行值仓！", '提示', ["确定"], function() {}, "div");
|
}
|
} else {
|
mui.alert(result.msg, '提示', ["确定"], function() {}, "div");
|
}
|
},
|
error: function() {
|
mui.alert('系统繁忙,请重试！', '提示', ["确定"], function() {}, "div");
|
}
|
})
|
} else { //结束卸粮
|
//结束卸粮时，再次请求查看单子是否在值仓状态
|
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') {
|
//判断单子是否在值仓状态
|
if (result.data.progress == "HANDLE") {
|
if (result.data.handleStart != null) {
|
if (fileName1 == null || fileName2 == null) {
|
mui.toast("请先上传图片！");
|
} else {
|
data2.data.longitude = longitude;
|
data2.data.latitude = latitude;
|
data2.data.type = tag;
|
data2.data.fileName1 = fileName1;
|
data2.data.fileName2 = fileName2;
|
data2.data.deHandle = mui("#number")[0].value;
|
mui.ajax(url, {
|
type: "POST",
|
dataType: "json",
|
crossDomain: true,
|
contentType: "application/json;charset=utf-8",
|
data: JSON.stringify(data2),
|
success: function(result) {
|
if (result.code == '0000') {
|
mui.toast("值仓完成！");
|
//返回上一页
|
mui.back();
|
} else {
|
mui.alert(result.msg, '提示', ["确定"], function() {}, "div");
|
}
|
},
|
error: function() {
|
mui.alert('系统繁忙,请重试！', '提示', ["确定"], function() {}, "div");
|
}
|
})
|
}
|
} else {
|
mui.toast("请先点击开始卸粮，并上传图片！");
|
}
|
} else {
|
//如果不在值仓状态，给出提示信息，不进行提交
|
mui.alert("该单子不在值仓状态，不能进行值仓！", '提示', ["确定"], function() {}, "div");
|
}
|
|
} else {
|
mui.alert(result.msg, '提示', ["确定"], function() {}, "div");
|
}
|
},
|
error: function() {
|
mui.alert('系统繁忙,请重试！', '提示', ["确定"], function() {}, "div");
|
}
|
})
|
}
|
}
|
|
//拍照上传
|
function choosePic(typeNum) {
|
//获取定位信息
|
getLatLon();
|
if(latitude == null || longitude == null){
|
return;
|
}
|
//上传图片前，请求查看单子是都已经开始卸粮
|
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') {
|
if (result.data.handleStart != null) {
|
var btnArray = [{
|
title: "拍照上传"
|
}, {
|
title: "从相册选择"
|
}];
|
plus.nativeUI.actionSheet({
|
title: "请选择",
|
cancel: "取消",
|
buttons: btnArray
|
},
|
function(e) {
|
var index = e.index;
|
switch (index) {
|
case 1:
|
cameraImg(typeNum);
|
break;
|
case 2:
|
galleryImg(typeNum);
|
break;
|
}
|
});
|
} else {
|
mui.toast("请先点击开始卸粮！");
|
}
|
} else {
|
mui.alert(result.msg, '提示', ["确定"], function() {}, "div");
|
}
|
},
|
error: function() {
|
mui.alert('系统繁忙,请重试！', '提示', ["确定"], function() {}, "div");
|
}
|
})
|
};
|
|
//相机拍照
|
function cameraImg(typeNum) {
|
var cmr = plus.camera.getCamera();
|
cmr.captureImage(function(p) {
|
//成功
|
plus.io.resolveLocalFileSystemURL(p, function(entry) {
|
var path = entry.toLocalURL(); //获得图片路径
|
uploadImg(path, typeNum);
|
}, function(e) {
|
mui.toast("读取拍照图片错误，请重试！");
|
});
|
}, function(e) {
|
mui.toast("拍照失败，请重试！");
|
});
|
}
|
|
//相册选择
|
function galleryImg(typeNum) {
|
plus.gallery.pick(function(path) {
|
uploadImg(path, typeNum);
|
}, function(e) {
|
mui.toast("没有选择图片");
|
});
|
}
|
|
//开始上传
|
function uploadImg(path, typeNum) {
|
//转圈等待框
|
var wt = plus.nativeUI.showWaiting();
|
//上传
|
var task = plus.uploader.createUpload(uploadUrl, {
|
method: "POST"
|
},
|
function(t, status) { //上传完成
|
if (status == 200) {
|
var obj = JSON.parse(t.responseText);
|
mui.toast("上传成功！");
|
if (typeNum == "1") {
|
$('#img1').attr('src', path);
|
base64Img1 = path;
|
fileName1 = obj.data.fileName;
|
}
|
if (typeNum == "2") {
|
$('#img2').attr('src', path);
|
base64Img2 = path;
|
fileName2 = obj.data.fileName;
|
}
|
//判断2张图片是否全部上传成功，成功则修改结束卸粮按钮样式
|
if (fileName1 && fileName2) {
|
$("#btn_end").removeClass("dis");
|
}
|
//关闭转圈等待框
|
wt.close();
|
} else {
|
mui.toast("上传失败，请重试！");
|
//关闭转圈等待框
|
wt.close();
|
}
|
});
|
//携带车牌参数
|
task.addData("plateNum", plateNum);
|
//图片信息
|
task.addFile(path, {
|
key: "uploadkey"
|
});
|
task.start();
|
}
|
|
/*---------------获取定位信息-------------------*/
|
function getLatLon() {
|
plus.geolocation.getCurrentPosition(showLocation, function(e) {
|
mui.alert("获取定位信息失败，请先打开定位开关！", '提示', ["确定"], function() {}, "div");
|
}, {
|
geocode: true
|
});
|
}
|
|
//处理定位后的信息
|
function showLocation(r) {
|
var bd09 = "";
|
if (r.coordsType == 'gcj02') {
|
//国测局坐标转百度坐标
|
bd09 = gcj02_To_Bd09(r.coords.longitude, r.coords.latitude);
|
} else if (r.coordsType == 'wgs84') {
|
//wgs84转百度坐标
|
bd09 = wgs84_To_Bd09(r.coords.longitude, r.coords.latitude);
|
} else {
|
bd09 = r.coords.longitude + "," + r.coords.latitude
|
}
|
var location = bd09.split(",");
|
longitude = location[0];
|
latitude = location[1];
|
}
|
//国测局坐标(即火星坐标gcj02) 转化为百度坐标(即BD-09)
|
function gcj02_To_Bd09(gcj_lon, gcj_lat) {
|
var x = gcj_lon,
|
y = gcj_lat;
|
var z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * pi);
|
var theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * pi);
|
var bd_lon = z * Math.cos(theta) + 0.0065;
|
var bd_lat = z * Math.sin(theta) + 0.006;
|
return bd_lon + "," + bd_lat;
|
}
|
//地球坐标(即wgs84) 转化为百度坐标(即BD-09)
|
function wgs84_To_Bd09(wgs_lon, wgs_lat) {
|
//第一次转换(wgs84转gcj02)
|
var dlat = transformlat(wgs_lon - 105.0, wgs_lat - 35.0);
|
var dlng = transformlon(wgs_lon - 105.0, wgs_lat - 35.0);
|
var radlat = wgs_lat / 180.0 * pi;
|
var magic = Math.sin(radlat);
|
magic = 1 - ee * magic * magic;
|
var sqrtmagic = Math.sqrt(magic);
|
dlat = (dlat * 180.0) / ((a * (1 - ee)) / (magic * sqrtmagic) * pi);
|
dlng = (dlng * 180.0) / (a / sqrtmagic * Math.cos(radlat) * pi);
|
var mglat = wgs_lat + dlat;
|
var mglng = wgs_lon + dlng;
|
|
//第二次转换(gcj02转bd09)
|
var z = Math.sqrt(mglng * mglng + mglat * mglat) + 0.00002 * Math.sin(mglat * x_pi);
|
var theta = Math.atan2(mglat, mglng) + 0.000003 * Math.cos(mglng * x_pi);
|
var bd_lon = z * Math.cos(theta) + 0.0065;
|
var bd_lat = z * Math.sin(theta) + 0.006;
|
return bd_lon + "," + bd_lat;
|
}
|
|
function transformlat(lat, lon) {
|
var ret = -100.0 + 2.0 * lon + 3.0 * lat + 0.2 * lat * lat + 0.1 * lon * lat + 0.2 * Math.sqrt(Math.abs(lon));
|
ret += (20.0 * Math.sin(6.0 * lon * pi) + 20.0 * Math.sin(2.0 * lon * pi)) * 2.0 / 3.0;
|
ret += (20.0 * Math.sin(lat * pi) + 40.0 * Math.sin(lat / 3.0 * pi)) * 2.0 / 3.0;
|
ret += (160.0 * Math.sin(lat / 12.0 * pi) + 320 * Math.sin(lat * pi / 30.0)) * 2.0 / 3.0;
|
return ret;
|
}
|
|
function transformlon(lat, lon) {
|
var ret = 300.0 + lon + 2.0 * lat + 0.1 * lon * lon + 0.1 * lon * lat + 0.1 * Math.sqrt(Math.abs(lon));
|
ret += (20.0 * Math.sin(6.0 * lon * pi) + 20.0 * Math.sin(2.0 * lon * pi)) * 2.0 / 3.0;
|
ret += (20.0 * Math.sin(lon * pi) + 40.0 * Math.sin(lon / 3.0 * pi)) * 2.0 / 3.0;
|
ret += (150.0 * Math.sin(lon / 12.0 * pi) + 300.0 * Math.sin(lon / 30.0 * pi)) * 2.0 / 3.0;
|
return ret;
|
}
|
</script>
|
</body>
|
</html>
|
