<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<link href="../../css/mui.min.css" rel="stylesheet" />
</head>
<body class="shujubiao_auto">
<header class="mui-bar mui-bar-nav" id="doublerefesh">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">生产数据详情</h1>
</header>
<div id="vue_app" class="mui-content">
<div id="slider" class="mui-slider" style="background-color: #55aaff; color: #000000;">
<div class="mui-segmented-control mui-segmented-control-inverted">
<a id="spana1" class="mui-control-item">
<span class="span">当日</span>
</a>
<a id="spana2" class="mui-control-item">
<span class="span">本周</span>
</a>
<a id="spana3" class="mui-control-item">
<span class="span">当月</span>
</a>
</div>
</div>
<div class="tb">
<table border="0" id="pullrefresh">
<tr>
<th>序号</th>
<th>订单号</th>
<th>流水号</th>
</tr>
<tr v-for="(item,index) in list">
<td>{{index+1}} </td>
<td :style="activation(item.UnloadDate)">{{item.OrderNo}}</td>
<td v-on:click="color(index)" :class="{active:currentIndex === index}" v-on:dblclick="showProcess(item.BarCode)">
{{item.BarCode}}</td>
</tr>
</table>
</div>
</div>
</body>
</html>
<script>
var _type = 1;
mui.init({
swipeBack: false,
gestureConfig: {
doubletap: true
},
pullRefresh: {
container: '#pullrefresh',
down: {
style: 'circle',
callback: downlist
},
up: {
height: 50,
contentrefresh: "正在加载...",
contentnomore: '没有更多数据了',
callback: uplist
}
}
});
var vm = new Vue({
el: "#vue_app",
data: {
list: [],
currentIndex: 0,
onlinee: 0
},
created: function() {
this.InitList(_type);
},
computed: {
//计算属性,如果其中某个值满足条件,将当前行变色
activation() {
return (unloaddate) => {
if (unloaddate == null)
return;
var undate = new Date(unloaddate).Format("yyyy-MM-dd hh:mm:ss");
if (undate > "2000-01-05 18:35:22") {
return {
'color': 'green'
}
}
}
}
},
methods: {
InitList: function(e) {
console.log(e);
var that = this;
$.ajax({
contentType: "application/json",
async: false,
type: "get",
url: "",
data: {
type: e
},
headers: {
Authorization: GetToken()
},
success: function(res) {
if (res.Success) {
if (res.result.length > 0) {
that.list = res.result;
} else {
that.list = null;
phihamshow("当前未查询到任何生产信息!");
}
} else {
mui.toast(res.Message);
}
},
error: function(xhr, type, errorThrown) {
console.log(JSON.stringify(xhr))
mui.plusReady(function() {
plus.nativeUI.showWaiting(xhr.responseJSON.Message);
setInterval(function() {
plus.nativeUI.closeWaiting();
location.reload();
}, 2000)
})
}
})
},
UpdownList: function(flag) {
$.ajax({
contentType: "application/json",
async: false,
type: "get",
url: "",
data: {
type: _type
},
headers: {
Authorization: GetToken()
},
success: function(res) {
if (res.Success) {
if (flag) {
if (res.result.length > 0) {
vm.$data.list.reverse();
vm.$data.list = vm.$data.list.concat(res.result)
vm.$data.list.reverse();
} else {
phihamshow("当前未查询到任何信息!");
}
} else {
if (res.result.length <= 0)
phihamshow("当前未查询到任何信息!");
else
vm.$data.list = vm.$data.list.concat(res.result)
}
} else {
mui.toast(res.Message);
if (flag)
mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
else
mui('#pullrefresh').pullRefresh().endPullupToRefresh();
}
},
error: function(xhr, type, errorThrown) {
console.log(JSON.stringify(xhr))
mui.plusReady(function() {
plus.nativeUI.showWaiting(xhr.responseJSON.Message);
setInterval(function() {
plus.nativeUI.closeWaiting();
location.reload();
}, 2000)
})
}
})
},
showProcess: function(e) {
var barcode = e;
var btnArray = ['否', '是'];
mui.confirm('是否查看当前: </br>' + barcode + "工件执行过程 ?", '提示!', btnArray, function(e) {
if (e.index == 1) {
mui.openWindow({
url: "ProductionInfoProcess.html?id=" + barcode,
id: "ProductionInfoProcess.html"
});
}
}, "div")
},
color: function(index) {
this.currentIndex = index;
},
}
})
function downlist() {
setTimeout(function() {
vm.UpdownList(true);
mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
}, 1500);
}
function uplist() {
setTimeout(function() {
vm.UpdownList(false);
mui('#pullrefresh').pullRefresh().endPullupToRefresh();
}, 1500);
}
document.getElementById('spana1').addEventListener('tap', function() {
_type = 1;
vm.InitList(_type);
})
document.getElementById('spana2').addEventListener('tap', function() {
_type = 2;
vm.InitList(_type);
})
document.getElementById('spana3').addEventListener('tap', function() {
_type = 3;
vm.InitList(_type);
})
document.getElementById('doublerefesh').addEventListener('doubletap', function() {
mui('#pullrefresh').pullRefresh().scrollTo(0, 0, 100);
})
</script>
<style>
/*单击行变色*/
.active {
color: red;
}
.online {
color: #008000;
}
.span {
width: 35px;
height: 35px;
border-radius: 45%;
background: #f0f0f0;
display: block;
margin-left: 35%;
}
.tb table {
width: 100%;
border: 0px;
margin-top: 0.3125rem;
margin-left: 0.3125rem;
}
.shujubiao_auto .tb table th {
line-height: 36px;
height: 36px;
font-size: 14px;
color: #55aa7f;
}
.tb table tr {
color: #000000;
text-align: center;
line-height: 36px;
}
</style>