You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
398 lines
16 KiB
398 lines
16 KiB
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>任务列表</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
|
|
|
<link rel="stylesheet" href="./css/mui.min.css">
|
|
<style>
|
|
html,
|
|
body {
|
|
background-color: #efeff4;
|
|
}
|
|
|
|
.p_title {
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
color: black;
|
|
margin-left: 30px;
|
|
}
|
|
|
|
.p_jiezhi {
|
|
margin-top: 10px;
|
|
|
|
}
|
|
|
|
.mui-bar~.mui-content .mui-fullscreen {
|
|
top: 44px;
|
|
height: auto;
|
|
}
|
|
|
|
.mui-pull-top-tips {
|
|
position: absolute;
|
|
top: -20px;
|
|
left: 50%;
|
|
margin-left: -25px;
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 100%;
|
|
z-index: 1;
|
|
}
|
|
|
|
.mui-bar~.mui-pull-top-tips {
|
|
top: 24px;
|
|
}
|
|
|
|
.mui-pull-top-wrapper {
|
|
width: 42px;
|
|
height: 42px;
|
|
display: block;
|
|
text-align: center;
|
|
background-color: #efeff4;
|
|
border: 1px solid #ddd;
|
|
border-radius: 25px;
|
|
background-clip: padding-box;
|
|
box-shadow: 0 4px 10px #bbb;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.mui-pull-top-tips.mui-transitioning {
|
|
-webkit-transition-duration: 200ms;
|
|
transition-duration: 200ms;
|
|
}
|
|
|
|
.mui-pull-top-tips .mui-pull-loading {
|
|
/*-webkit-backface-visibility: hidden;
|
|
-webkit-transition-duration: 400ms;
|
|
transition-duration: 400ms;*/
|
|
|
|
margin: 0;
|
|
}
|
|
|
|
.mui-pull-top-wrapper .mui-icon,
|
|
.mui-pull-top-wrapper .mui-spinner {
|
|
margin-top: 7px;
|
|
}
|
|
|
|
.mui-pull-top-wrapper .mui-icon.mui-reverse {
|
|
/*-webkit-transform: rotate(180deg) translateZ(0);*/
|
|
}
|
|
|
|
.mui-pull-bottom-tips {
|
|
text-align: center;
|
|
background-color: #efeff4;
|
|
font-size: 15px;
|
|
line-height: 40px;
|
|
color: #777;
|
|
}
|
|
|
|
.mui-pull-top-canvas {
|
|
overflow: hidden;
|
|
background-color: #fafafa;
|
|
border-radius: 40px;
|
|
box-shadow: 0 4px 10px #bbb;
|
|
width: 40px;
|
|
height: 40px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.mui-pull-top-canvas canvas {
|
|
width: 40px;
|
|
}
|
|
|
|
.mui-slider-indicator.mui-segmented-control {
|
|
background-color: #efeff4;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="mui-content">
|
|
<div id="slider" class="mui-slider mui-fullscreen">
|
|
<div id="sliderSegmentedControl" class="mui-segmented-control mui-segmented-control-inverted">
|
|
|
|
<a class="mui-control-item" href="#item1" id="tab1">
|
|
待填报
|
|
</a>
|
|
<a class="mui-control-item" href="#item2" id="tab2">
|
|
已填报
|
|
</a>
|
|
|
|
</div>
|
|
<div class="mui-slider-group">
|
|
<div id="item1" class="mui-slider-item mui-control-content">
|
|
<div class="mui-input-row mui-search" style="margin-top: 5px;">
|
|
<input id="wSearch" type="search" class="mui-input-clear" placeholder="请输入任务名称">
|
|
</div>
|
|
<div class="mui-scroll-wrapper" style="margin-top: 45px;">
|
|
<div class="mui-scroll1">
|
|
<ul class="mui-table-view" id="wTab">
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="item2" class="mui-slider-item mui-control-content">
|
|
<div class="mui-input-row mui-search" style="margin-top: 5px;">
|
|
<input id="ySearch" type="search" class="mui-input-clear" placeholder="请输入任务名称">
|
|
</div>
|
|
<div class="mui-scroll-wrapper" style="margin-top: 45px;">
|
|
<div class="mui-scroll2">
|
|
<ul class="mui-table-view" id="yTab">
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<img style="position: absolute;top: 1px;left: 10px;">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="./js/mui.min.js"></script>
|
|
<script src="./js/jquery.min.js"></script>
|
|
<script src="./js/mui.pullToRefresh.js"></script>
|
|
<script src="./js/mui.pullToRefresh.material.js"></script>
|
|
<script>
|
|
|
|
var _wPage = 1;
|
|
var _yPage = 1;
|
|
|
|
var report = function (job_id, jiezhi, status_code, target_id) {
|
|
if (jiezhi) {
|
|
window.location.href = "/dsBase/view/tb/form/view_mobile.html?job_id=" + job_id + "&status_code=" + status_code + "&target_id=" + target_id;
|
|
} else {
|
|
window.location.href = "/dsBase/view/tb/form/report_p_mobile.html?job_id=" + job_id + "&status_code=" + status_code + "&target_id=" + target_id;
|
|
}
|
|
}
|
|
|
|
var loadWList = function (page, keyword) {
|
|
var _limit = 20;
|
|
var flag = true;
|
|
$.ajax({
|
|
url: "/dsBase/collect/viewJobListPerson?page=" + page + "&limit=" + _limit + "&keyword=" + keyword + "&is_finish=0",
|
|
async: false,
|
|
type: 'GET',
|
|
success: function (res) {
|
|
if (page * _limit < res.count) {
|
|
flag = false;
|
|
}
|
|
res.data.forEach(function (item) {
|
|
var _html = "";
|
|
|
|
if (item.jiezhi) {
|
|
_html = "<li class='mui-table-view-cell' onclick='report(" + item.job_id + "," + item.jiezhi + "," + item.status_code + ",\"" + item.target_id + "\")'>" +
|
|
"<div class='mui-table'>" +
|
|
"<div class='mui-table-cell mui-col-xs-9'>" +
|
|
"<img src='./images/list_icon.png' style='width:24px;position: absolute;top: -2px;left: -2px;' />" +
|
|
"<p class='p_title'>" + item.job_name + "</p>" +
|
|
"<p class='p_jiezhi'>截止日期：" + item.deadline_time +
|
|
"<span style='float: right;margin-right: -86px;background:#FFE7E7;border-radius: 15px;padding:1px 10px;font-size:12px;color:#FA7474'>已截止</span>" +
|
|
"</p>" +
|
|
"</div>" +
|
|
"<div class='mui-table-cell mui-col-xs-3 mui-text-right'>" +
|
|
"<span class='mui-h5'>" + item.publish_time + "</span>" +
|
|
"</div>" +
|
|
"</div>" +
|
|
"</li>";
|
|
} else {
|
|
_html = "<li class='mui-table-view-cell' onclick='report(" + item.job_id + "," + item.jiezhi + "," + item.status_code + ",\"" + item.target_id + "\")'>" +
|
|
"<div class='mui-table'>" +
|
|
"<div class='mui-table-cell mui-col-xs-9'>" +
|
|
"<img src='./images/list_icon.png' style='width:24px;position: absolute;top: -2px;left: -2px;' />" +
|
|
"<p class='p_title'>" + item.job_name + "</p>" +
|
|
"<p class='p_jiezhi'>截止日期：" + item.deadline_time + "</p>" +
|
|
"</div>" +
|
|
"<div class='mui-table-cell mui-col-xs-3 mui-text-right'>" +
|
|
"<span class='mui-h5'>" + item.publish_time + "</span>" +
|
|
"</div>" +
|
|
"</div>" +
|
|
"</li>";
|
|
}
|
|
|
|
$("#wTab").append(_html);
|
|
|
|
});
|
|
_wPage += 1;
|
|
}
|
|
});
|
|
return flag;
|
|
}
|
|
|
|
var loadYList = function (page, keyword) {
|
|
var _limit = 20;
|
|
var flag = true;
|
|
$.ajax({
|
|
url: "/dsBase/collect/viewJobListPerson?page=" + page + "&limit=" + _limit + "&keyword=" + keyword + "&is_finish=1",
|
|
async: false,
|
|
type: 'GET',
|
|
success: function (res) {
|
|
if (page * _limit < res.count) {
|
|
flag = false;
|
|
}
|
|
res.data.forEach(function (item) {
|
|
var _html = "";
|
|
|
|
if (item.jiezhi) {
|
|
_html = "<li class='mui-table-view-cell' onclick='report(" + item.job_id + "," + item.jiezhi + "," + item.status_code + ",\"" + item.target_id + "\")'>" +
|
|
"<div class='mui-table'>" +
|
|
"<div class='mui-table-cell mui-col-xs-9'>" +
|
|
"<img src='./images/list_icon.png' style='width:24px;position: absolute;top: -2px;left: -2px;' />" +
|
|
"<p class='p_title'>" + item.job_name + "</p>" +
|
|
"<p class='p_jiezhi'>截止日期：" + item.deadline_time +
|
|
"<span style='float: right;margin-right: -86px;background:#FFE7E7;border-radius: 15px;padding:1px 10px;font-size:12px;color:#FA7474'>已截止</span>" +
|
|
"</p>" +
|
|
"</div>" +
|
|
"<div class='mui-table-cell mui-col-xs-3 mui-text-right'>" +
|
|
"<span class='mui-h5'>" + item.publish_time + "</span>" +
|
|
"</div>" +
|
|
"</div>" +
|
|
"</li>";
|
|
} else {
|
|
_html = "<li class='mui-table-view-cell' onclick='report(" + item.job_id + "," + item.jiezhi + "," + item.status_code + ",\"" + item.target_id + "\")'>" +
|
|
"<div class='mui-table'>" +
|
|
"<div class='mui-table-cell mui-col-xs-9'>" +
|
|
"<img src='./images/list_icon.png' style='width:24px;position: absolute;top: -2px;left: -2px;' />" +
|
|
"<p class='p_title'>" + item.job_name + "</p>" +
|
|
"<p class='p_jiezhi'>截止日期：" + item.deadline_time + "</p>" +
|
|
"</div>" +
|
|
"<div class='mui-table-cell mui-col-xs-3 mui-text-right'>" +
|
|
"<span class='mui-h5'>" + item.publish_time + "</span>" +
|
|
"</div>" +
|
|
"</div>" +
|
|
"</li>";
|
|
}
|
|
$("#yTab").append(_html);
|
|
});
|
|
|
|
_yPage += 1;
|
|
}
|
|
});
|
|
return flag;
|
|
}
|
|
$(function () {
|
|
|
|
var pullToRefreshW;
|
|
var pullToRefreshY;
|
|
|
|
var tabFlag = window.localStorage.getItem('tabFlag');
|
|
|
|
if (tabFlag == 1) {
|
|
$("#tab1").addClass("mui-active");
|
|
$("#item1").addClass("mui-active");
|
|
$("#tab2").removeClass("mui-active");
|
|
$("#item2").removeClass("mui-active");
|
|
_wPage = 1;
|
|
wList();
|
|
} else {
|
|
$("#tab2").addClass("mui-active");
|
|
$("#item2").addClass("mui-active");
|
|
$("#tab1").removeClass("mui-active");
|
|
$("#item1").removeClass("mui-active");
|
|
$(".mui-slider-group").css({
|
|
"transform": "translate3d(-" + $(window).width() + "px, 0px, 0px) translateZ(0px)",
|
|
"transition-duration": "0ms"
|
|
});
|
|
_yPage = 1;
|
|
yList();
|
|
}
|
|
|
|
$("#wSearch").keypress(function (event) {
|
|
if (event.which == 13) {
|
|
pullToRefreshW.refresh(true);
|
|
$("#wTab").empty();
|
|
_wPage = 1;
|
|
wList();
|
|
}
|
|
});
|
|
|
|
$("#ySearch").keypress(function (event) {
|
|
if (event.which == 13) {
|
|
pullToRefreshY.refresh(true);
|
|
$("#yTab").empty();
|
|
_yPage = 1;
|
|
yList();
|
|
}
|
|
});
|
|
|
|
mui(".mui-icon-clear")[0].addEventListener('tap', function () {
|
|
pullToRefreshW.refresh(true);
|
|
$("#wTab").empty();
|
|
_wPage = 1;
|
|
wList();
|
|
});
|
|
|
|
mui(".mui-icon-clear")[1].addEventListener('tap', function () {
|
|
pullToRefreshY.refresh(true);
|
|
$("#yTab").empty();
|
|
_yPage = 1;
|
|
yList();
|
|
});
|
|
|
|
mui(".mui-control-item")[0].addEventListener('tap', function () {
|
|
if (typeof pullToRefreshW != 'undefined') {
|
|
pullToRefreshW.refresh(true);
|
|
}
|
|
window.localStorage.setItem('tabFlag', 1);
|
|
$("#wTab").empty();
|
|
_wPage = 1;
|
|
wList();
|
|
});
|
|
|
|
mui(".mui-control-item")[1].addEventListener('tap', function () {
|
|
if (typeof pullToRefreshY != 'undefined') {
|
|
pullToRefreshY.refresh(true);
|
|
}
|
|
window.localStorage.setItem('tabFlag', 2);
|
|
$("#yTab").empty();
|
|
_yPage = 1;
|
|
yList();
|
|
});
|
|
|
|
//阻尼系数
|
|
var deceleration = mui.os.ios ? 0.003 : 0.0009;
|
|
mui('.mui-scroll-wrapper').scroll({
|
|
bounce: false,
|
|
indicators: true, //是否显示滚动条
|
|
deceleration: deceleration
|
|
});
|
|
|
|
function wList() {
|
|
pullToRefreshW = mui('.mui-scroll1').pullToRefresh({
|
|
up: {
|
|
auto: true,
|
|
callback: function () {
|
|
var self = this;
|
|
setTimeout(function () {
|
|
var flag = loadWList(_wPage, $("#wSearch").val());
|
|
self.endPullUpToRefresh(flag);
|
|
}, 200);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
function yList() {
|
|
pullToRefreshY = mui('.mui-scroll2').pullToRefresh({
|
|
up: {
|
|
auto: true,
|
|
callback: function () {
|
|
var self = this;
|
|
setTimeout(function () {
|
|
var flag = loadYList(_yPage, $("#ySearch").val());
|
|
self.endPullUpToRefresh(flag);
|
|
}, 200);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html> |