代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="HandheldFriendly" content="true" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>工单查询</title>
<link href="css/weui.min.css" rel="stylesheet" />
<link href="css/mui.min.css" rel="stylesheet" />
<link href="css/mui.picker.min.css" rel="stylesheet" />
<link href="css/mui.poppicker.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />
<link rel="stylesheet" href="css/popupInfo.css" />
<style type="text/css">
.page {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.weui-tab__panel {
padding-top: 40px;
}
.weui-cell__bd {
position: relative;
}
.weui-cells {
background-color: #F5F5F5;
}
.weui-cell_access .weui-cell__ft:after {
-webkit-mask-image: url("images/task/task_start.png");
mask-image: url("images/task/task_start.png");
color: #60a3e6;
height: 48px;
width: 24px;
}
.filter_input {
width: 100%;
padding: 0 5%;
margin-top: 16px;
float: left;
}
.filter_input>p {
width: 100%;
font-size: 14px;
line-height: 20px;
float: left;
}
.filter_input>input {
width: 100%;
height: 30px;
font-size: 14px;
padding: 5px 5px;
margin: 0;
margin-top: 10px;
float: left;
}
.filter_select {
width: 100%;
padding: 0 5%;
margin-top: 16px;
float: left;
}
.filter_select .line {
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
width: auto;
height: 35px;
}
.filter_select .line p {
width: 40%;
font-size: 14px;
line-height: 30px;
float: left;
}
.filter_select .line select {
width: 60%;
height: 30px;
font-size: 14px;
padding: 5px 5px;
margin: 0;
float: left;
}
.mui-btn-link {
position: absolute;
right: 2px;
bottom: 8px;
}
.mui-btn,
button,
input[type=button],
input[type=reset],
input[type=submit] {
font-size: 17px;
}
.btn {
height: 35px;
line-height: 24px;
width: 25%;
margin-left: 6.5%;
text-align: center;
border-radius: 25px;
margin-top: 20px;
margin-bottom: 20px;
color: #FFFFFF;
background-color: #60A3E6;
float: left;
outline: none;
border: 0;
}
/* 搜索工单列表模块 */
#dataList {
padding: 16px;
padding-bottom: 0;
}
.searchGd {
padding: 10px;
display: flex;
justify-content: space-between;
position: relative;
margin-bottom: 18px;
background-color: #fff;
}
.gdLeft {
width: 75%;
padding-top: 10px;
}
.gdLeft p {
font-size: 14px;
font-weight: 500;
line-height: 24px;
color: rgba(102, 102, 102, 1);
}
.gdLeft .title {
font-size: 16px;
font-weight: bold;
line-height: 28px;
color: rgba(51, 51, 51, 1);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap
}
.gdRight {
width: 15%;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.listTag {
width: 48px;
height: 18px;
position: absolute;
top: 0px;
left: 0px;
line-height: 18px;
font-size: 12px;
text-align: center;
border-radius: 0px 0px 8px 0px;
font-weight: 500;
}
/* 已完成 */
.success {
background: rgba(38, 191, 105, 0.2);
color: #076D34;
}
/* 已开始 */
.start {
background: rgba(254, 80, 0, 0.2);
color: #CF4708;
}
/* 已下达 */
.Issued {
background: rgba(57, 126, 238, 0.2);
color: #397eee;
}
/* 无 */
.nothing {}
.gdTypeBtn {
width: 52px;
height: 30px;
background: rgba(233, 233, 233, 1);
opacity: 1;
border-radius: 4px;
border: none;
font-size: 12px;
font-weight: 400;
color: rgba(102, 102, 102, 1);
text-align: center;
line-height: 30px;
padding: 0;
}
.gdTypeBtnActive {
background: rgba(51, 102, 204, 1);
box-shadow: 0px 3px 6px rgba(51, 102, 204, 0.2);
color: #fff;
}
.filter_input {
width: 100%;
padding: 0 5%;
margin-top: 16px;
float: left;
position: relative;
}
.filter_input .filterDiv{
width: 100%;
height: 30px;
position:absolute;
top:30px;
left:0;
}
</style>
</head>
<body>
<!-- 侧滑导航页根容器 -->
<div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable">
<!-- 菜单容器 -->
<aside id="offCanvasSide" class="mui-off-canvas-right" style="background-color: #FFFFFF;">
<div id="offCanvasSideScroll" class="mui-scroll-wrapper">
<div class="mui-scroll">
<!-- 菜单具体展示内容 -->
<div class="filter_input">
<p>线路-上下行：</p>
<div class="filterDiv" id="showPicker1">
</div>
<input type="text" name="" id="SECTION" value="" />
</div>
<div class="filter_input">
<p>开始站-结束站：</p>
<div class="filterDiv" id="showStation">
</div>
<input type="text" name="" id="STATION" value="" />
</div>
<div class="filter_input">
<p>工单号：</p>
<input type="text" value="" id="DEVICE_ID" />
</div>
<div class="filter_input">
<p>开始时间：</p>
<input type="date" value="" name="start_time" id="start_time" />
</div>
<div class="filter_input">
<p>结束时间：</p>
<input type="date" value="" name="end_time" id="end_time" />
</div>
<button class="btn" onclick="Clear()" style="margin-left:60px;">清空</button>
<button id="paramsSearchBtn" class="btn">查询</button>
</div>
</div>
</aside>
<!-- 主页面容器 -->
<div class="mui-inner-wrap">
<!-- 主页面标题 -->
<header class="mui-bar mui-bar-nav">
<button id="backBtn" type="button" class="mui-left mui-btn mui-btn-link mui-btn-nav mui-pull-left">
<span class="mui-icon mui-icon-left-nav"></span>
</button>
<h1 class="mui-center mui-title">工单查询 </h1>
<a href="#offCanvasSide" style="color:#007aff" class="mui-icon mui-action-menu mui-icon-search mui-pull-right"></a>
</header>
<div id="offCanvasContentScroll" class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<div id="dataList" class="weui-cells" style="margin: 0;"></div>
</div>
</div>
<!-- 遮罩层 -->
<div class="mui-off-canvas-backdrop"></div>
</div>
</div>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/weui.min.js"></script>
<script src="js/mui.min.js"></script>
<script src="js/popupInfo.js"></script>
<script src="js/mui.picker.min.js"></script>
<script src="js/mui.poppicker.js"></script>
<script src="js/BasePage.js"></script>
<script src="Data/DictData.js"></script>
<script src="Data/BaseInfo.js"></script>
<script type="text/javascript">
var totalpage = 0;
var currrentpage = 1;
var searchGdData = {
popupGdData: []
}
mui.init({
swipe: false,
});
$("#backBtn").on('tap', function(event) {
locationHref('SearchList.html');
});
var SearchBh = {
stationsObj:[],
// 站-上下行数据
stationList:[],
stationData:[
{val:'',text:'线路'},
{val:'',text:'上下行'},
],
// 开始站-结束站数据
stationCopyList:[],
stationCopyData:[
{val:'',text:'开始站'},
{val:'',text:'结束站'},
],
}
//下拉框加载
GetLine($("#LINE"), "");
//地铁线路下拉框
$("#LINE").change(function() {
$("#START_STA option").remove();
$("#START_STA").append("<option value=''>请选择</option>");
GetStations($("#START_STA"), $("#LINE").val(), "");
$("#END_STA option").remove();
$("#END_STA").append("<option value=''>请选择</option>");
GetStations($("#END_STA"), $("#LINE").val(), "");
});
// $("#START_STA").change(function() {
// $("#END_STA option").remove();
// $("#END_STA").append("<option value=''>请选择</option>");
// GetStations_End($("#END_STA"), $("#LINE").val(), $("#START_STA").val(), "");
// });
// GetSelItem($("#WORK_TYPE"), "work_type", "");
// GetSelItem($("#PLAN_STATUS"), "plan_status", "");
// GetSelItem($("#MAJOR_TYPE"), "major_type", "");
function GetWeek() {
var now = new Date();
var nowTime = now.getTime();
var day = now.getDay();
var oneDayLong = 24 * 60 * 60 * 1000;
var MondayTime = nowTime - (day - 1) * oneDayLong;
var SundayTime = nowTime + (7 - day) * oneDayLong;
var monday = new Date(MondayTime);
var sunday = new Date(SundayTime);
var monday_t = monday.getFullYear() + "-" + ("0" + (monday.getMonth() + 1)).slice(-2) + "-" + ("0" + monday.getDate())
.slice(
-2);
var sunday_t = monday.getFullYear() + "-" + ("0" + (sunday.getMonth() + 1)).slice(-2) + "-" + ("0" + sunday.getDate())
.slice(
-2);
$("#start_time").val(monday_t);
$("#end_time").val(sunday_t);
}
function Clear() {
$("#SECTION").val("");
$("#STATION").val("");
$("#DEVICE_ID").val("");
$("#start_time").val("");
$("#end_time").val("");
}
mui('#offCanvasSideScroll').scroll(); //初始化scroll组件
//列表支持滚动
mui('#offCanvasContentScroll').scroll(); //初始化scroll组件
mui("#offCanvasContentScroll").pullRefresh({
up: {
contentrefresh: "正在加载...", //可选，正在加载状态时，上拉加载控件上显示的标题内容
contentnomore: '没 有 更 多 数 据 了', //可选，请求完毕若没有更多数据时显示的提醒内容；
callback: function() { //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
currrentpage = currrentpage + 1;
window.setTimeout(function() {
if (currrentpage <= totalpage) {
getSearchList_sgjhData(currrentpage, 5, {});
}
}, 500);
}
},
down: {
height: 50, //可选,默认50.触发下拉刷新拖动距离,
auto: true, //可选,默认false.首次加载自动下拉刷新一次
contentdown: "下拉可以刷新", //可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容
contentover: "释放立即刷新", //可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容
callback: function() { //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
$("#dataList").html("");
currrentpage = 1;
totalpage = 0;
window.setTimeout(function() {
// getSearchList_sgjhData(1, 5, {});
getSearchList_sgjhData(1, 20, {}); //测试
}, 500);
}
}
})
function getSearchList_sgjhData(pageIndex, pageSize, params) {
var List_Rows = '';
mui.ajax({
url: BaseUrl + "app/search/workOrder/getWorkOrderByConditions",
type: "post",
contentType: "application/json",
data: {
"pageNum": pageIndex,
"pageSize": pageSize,
"params": params
},
success: function(result) {
mui('#offCanvasContentScroll').pullRefresh().endPullupToRefresh(true);
if (totalpage == currrentpage) { //总页码等于当前页码，停止上拉下拉
mui('#offCanvasContentScroll').pullRefresh().endPullupToRefresh(true);
// mui('#refreshContainer').pullRefresh().endPulldown();
} else {
mui('#offCanvasContentScroll').pullRefresh().refresh(true);
mui('#offCanvasContentScroll').pullRefresh().disablePullupToRefresh();
$('#offCanvasContentScroll .mui-spinner').hide();//隐藏转动loading
}
if (!jQuery.isEmptyObject(result)) {
if (result.code == 200) {
totalpage = result.data.pages;
searchGdData.popupGdData = result.data.rows;
for (var i = 0; i < result.data.rows.length; i++) {
var _data = result.data.rows[i];
// console.log(JSON.stringify( result.data.rows[i]))
var _statusStr = '';
// var _title = _data.LINE_NAME + ' ' + _data.START_STATION_NAME + '-' + _data.END_STATION_NAME + ' ' + _data.UPDOWN2;
var _title = _data.planTitle + ' ' + _data.updown;
var _wono = _data.planNo;
List_Rows += '<a class=" searchGd" href="javascript:;" ';
if (_data.reStartDate != null) {
List_Rows += '>';
} else {
List_Rows += '>';
}
List_Rows += '<div class="gdLeft">';
switch (_data.planStatus) {
case '已下达':
_statusStr = 'Issued">' + _data.planStatus;
break;
case '工作完成':
_statusStr = 'success">' + _data.planStatus;
break;
case '已开始':
_statusStr = 'start">' + _data.planStatus;
break;
default:
_statusStr = 'nothing">';
}
List_Rows += '<span class="listTag ' + _statusStr + '</span>';
List_Rows += '<p class="title">' + _title + '</p>';
List_Rows += '<p>工单编号：' + _wono + '</p>';
List_Rows += '<p>计划时间：' + _data.startTime + '~' + _data.endTime + '</p>';
if (_data.reEndDate != null && _data.reEndDate != "") {
List_Rows += '<p>执行时间：' + _data.reStartDate + '~' + _data.reEndDate + '</p>';
}
List_Rows += '<p>' + _data.departName + '</p>';
List_Rows += '</div>';
List_Rows += '<div class="gdRight">';
if (_data.planStatus == '工作完成') {
List_Rows += '<button type="button" class=" gdTypeBtn gdTypeBtnActive" onclick="popupShow(\'' + _data.planUuid +
'\')">报告</button>';
List_Rows += '<button type="button" class=" gdTypeBtn gdTypeBtnActive" onclick="toTaskDetail(\'' + _data.planUuid +
'\')" >详情</button>';
} else {
List_Rows += '<button type="button" class=" gdTypeBtn ">报告</button>';
List_Rows += '<button type="button" class=" gdTypeBtn ">详情</button>';
}
List_Rows += '</div>';
List_Rows += '</a>';
}
} else if (result.code == 400) {
$MB.pageTips("数据查询失败！");
} else if (result.code == 401) {
weui.alert('登录超时！', function() {
window.location.href = "Login.html";
});
} else {
$MB.pageTips("未知错误！");
}
}
},
complete: function(XMLHttpRequest, textStatus) {
if (textStatus == 'timeout' || textStatus == 'error') {
weui.topTips('网络异常');
}
$("#dataList").append(List_Rows);
$("#dataList").on('tap', 'a', function(event) {
this.click();
});
}
});
}
$('#paramsSearchBtn').click(function() {
$("#sgjh_group").html("");
var params = {
lineCode:SearchBh.stationData[0].val,
updown:SearchBh.stationData[1].val,
startStation:SearchBh.stationCopyData[0].val,
endStation:SearchBh.stationCopyData[1].val,
workOrderStatus:$('#DEVICE_ID').val().trim(),
startTime:$('#start_time').val().trim(),
endTime:$('#end_time').val().trim(),
}
//console.log(JSON.stringify(params));
getSearchList_sgjhData(1, 5, params)
})
function toTaskDetail(id) {
locationHref('Search_Gd_Detail.html?id=' + id);
}
var _getParam = function(obj, param) {
return obj[param] || '';
};
// var maintPicker,showmaintPicker;
function _initPicker(settings, pickerData) {
SearchBh[settings.id] = new mui.PopPicker({
layer:settings.layer,
});
SearchBh[settings.id].setData(pickerData)
// maintPicker.pickers[0].setSelectedIndex(3);
var showmaintPicker = document.getElementById(settings.btn);
showmaintPicker.addEventListener('tap', function(event) {
SearchBh[settings.id].show(function(items) {
// console.log(items);
var dataBack = '';
for(var i = 0;i<settings.layer;i++){
if(items[i]!=undefined&&items[i].value!=undefined){
SearchBh[settings.data][i].val = items[i].value;
if(i>0){
dataBack +='-'+_getParam(items[i],'text');
}else{
dataBack += _getParam(items[i],'text');
}
}else{
SearchBh[settings.data][i].val = ''
}
}
$('#'+settings.id).val(dataBack)
if(settings.type!=undefined){
changeData(settings.type)
}
});
}, false);
}
//改变input塞值
//这里实现了多级联动，根据changeData(settings.type) type 执行相应的方法。
function changeData(type){
if(type=='station'&&SearchBh.stationData[0].val!=''){
SearchBh.stationCopyList = [];
$.each(Dict.stations.stations,function(index,val){
// if(val.LINE_UUID==SearchBh.stationData[0].val){
SearchBh.stationsObj.push(val);
// console.log(SearchBh.stationsObj[0])
// }
})
// console.log(SearchBh.stationData[0].val)
// console.log(SearchBh.stationsObj[SearchBh.stationData[1].val][SearchBh.stationData[0].val])
$.each(SearchBh.stationsObj[SearchBh.stationData[1].val][SearchBh.stationData[0].val],function(i,n){
// console.log("112212121"+JSON.stringify(n))
var objBox = {
value:n.stationcode,
text:n.stationname,
children:[]
}
$.each(SearchBh.stationsObj[SearchBh.stationData[1].val][SearchBh.stationData[0].val],function(i,n){
var obj = {
value:n.stationcode,
text:n.stationname,
}
objBox.children.push(obj)
})
SearchBh.stationCopyList.push(objBox)
})
_initPicker({
layer:2,
id:'STATION',
btn:'showStation',
data:'stationCopyData',
},SearchBh.stationCopyList)
}
}
// 区间塞值
$.each(Dict.stations.line,function(index,val){
// console.log(JSON.stringify(val));
var objBox = {
// value:val.LINE_UUID,
value:val.linecode,
text:val.linename,
children:[{
value: "0",
text: "上行",
}, {
value: "1",
text: "下行",
}]
}
SearchBh.stationList.push(objBox)
})
// console.log(SearchBh.stationList);
_initPicker({
layer:2,
id:'SECTION',
btn:'showPicker1',
data:'stationData',
type:'station',
},SearchBh.stationList)
</script>
</body>
</html>
6179
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
