jp-youdian-Inspection/pages/inspection/list.vue

<template>
	<view>
		<u-navbar title="巡检记录" title-color="#101010" :customBack="customBack" ></u-navbar>
		
		<view class="top">
			<view class="search">
				<view class="searchBox">
					<u-search shape="square" placeholder="使用站点名称/编号搜索" maxlength="12" v-model="testName" :show-action="false"
						:animation="true"></u-search>
					<u-button type="primary" size="mini" @click="testBtn">搜素</u-button>
				</view>
			</view>
		</view>
		
		<u-select v-model="queryStatusBl" :default-value="queryStatusValue" value-name="value"
			label-name="name" @confirm="selectQueryStatusConfirm" :list="statuslist"></u-select>
		<u-select v-model="queryTypeBl" :default-value="queryTypeValue" value-name="value"
			label-name="name" @confirm="selectQueryTypeConfirm" :list="typelist"></u-select>
		
		
		<view  class="viewTop" >
		
			<view class="select" @click="queryStatusBl=true">
							<view class="selectSpan">
								{{queryStatus==''?'全部记录':queryStatusN}}
							</view>
							 <u-icon name="arrow-down" size="32" color="#AAAAAA"></u-icon>
			</view>
			<view class="select" @click="queryTypeBl=true">
							<view class="selectSpan">
								{{queryType?queryTypeN:'全部站点'}}
							</view>
							 <u-icon name="arrow-down" size="32" color="#AAAAAA"></u-icon>
			</view>
		
		
		
			 <view class="select" @click="completionTimeShow=true">
				<view class="selectSpan">
					{{completionTimeN}}
				</view>
				 <u-icon name="arrow-down" size="32" color="#AAAAAA"></u-icon>
			 </view>
		</view>
		

		<view class="list"  >
			<view class="item" 
			 v-for="(item,index) in list" 
			 @click="gotoTask(item)"
			 :key="index">
			
				<view class="body">
					<view class="line1">
						<view class="title">
							 {{item.stationNo}}<span  style="margin: 0 8rpx;color:rgba(119, 119, 119, 1);" >|</span>{{item.stationName}}
		
						</view>
						<view class="status " :class="'status'+item.status">
							{{item.statusN}}
		
						</view>
					</view>
					
					<view class="line2" v-if="item.status==0"  >
						<view class="value">
							上次巡检 {{item.lastInspectionTime}}
		
						</view>
						<view class="value">
							截止时间 {{item.inspectionEndTime}} 
		
						</view>
						
						<view  class="value"  v-if="getdaysDistance(item.inspectionEndTime)=='-'"
						
						 style="color:#777777 ;" >
						
							
						</view>
						
						<view  class="value"  v-else-if="getdaysDistance(item.inspectionEndTime)>0"
						 style="color:#FF7B00 ;" >
						
							{{getdaysDistance(item.inspectionEndTime)}}天后到期
						
						</view>
						<view   class="value" v-else-if="getdaysDistance(item.inspectionEndTime)==0"  style="color: #EE3138 ;" >
						
							即将到期(&le;1天)
						
						
						</view>
						
						<view   class="value" v-else  style="color: #EE3138 ;" >
						
							已逾期
						
						
						</view>
						
					</view>
					<view class="line2" v-if="item.status==1"  >
						<view class="value">
							本次巡检 {{item.inspectionTime}}
							
						</view>
						
						<view class="value">
							巡检人员 {{item.inspectionUserName}}
							
						</view>
						
					</view>
					
					
		
				</view>
				
			</view>
			
			
		</view>
		<u-divider :isnone="list.length==0" nonetext="没有找到相关内容" border-color="#CFD2D5">已经到底了</u-divider>
		
		
	</view>
</template>

<script>
	import * as API from '@/apis/pagejs/pagesInspection.js'
	import {
	
		currentTimeStamp,
		parseUnixTime,newDate,nextMonth,daysDistanceTrue
	} from '@/apis/utils'
	export default {
		data() {
			return {
				queryName: "",
				testName: "",
				list:[],
				listForm:{
					pageIndex: 1,
					pageSize: 20,
					recordsTotal: 1,
					status:""
				},
				
				queryStatus: "",
				queryStatusN: "",
				queryStatusBl:false,
				queryStatusValue: [0],
				
				
				queryType: "",
				queryTypeN: "",
				queryTypeBl:false,
				queryTypeValue: [0],
				
				completionTime: "",
				completionTimeShow: false,
				lockId:"",
				lockName:"",
				current:0,
				tabslist:[
					{
						name: '未完成',
						status:0
					}, {
						name: '已完成',
						status:1
					}, {
						name: '全部',
						status:''
					}
				],
				statuslist:[
					{
						name: '全部记录',
						value:""
					},
					{
						name: '未处理',
						value:"0"
					}, {
						name: '已处理',
						value:"1"
					}
				],
				typelist:[
					{
						name: '全部记录',
						value:""
					},
					{
						name: '电单车',
						value:"0"
					}, {
						name: '电动车',
						value:"1"
					}
				]
			};
		},
		onLoad(op) {
			if(op.status){
				if('geterrList0'==op.status){
					this.current=0
					this.listForm.status=0
				}
				if('geterrList1'==op.status){
					this.current=1
					this.listForm.status=1
				}
			}
			
			if(op.lockId){
				this.lockId=op.lockId
				this.lockName=op.lockName
				this.listForm.lockId=op.lockId;
			}
			this.completionTime = parseUnixTime(currentTimeStamp(),'{y}-{m}-1')
			
			this.getList()
			
		},
		computed:{
			completionTimeN(){
				return parseUnixTime(newDate(this.completionTime ),'{y}年{m}月')
			}
		},
		onReachBottom() {
			if (this.list.length < this.listForm.recordsTotal) {
				this.myLoadmore();
			}
		},
		methods: {
			getdaysDistance( time2) {
				if (!time2) {
					return '-'
				}
				console.log( daysDistanceTrue(new Date(),time2))
				return daysDistanceTrue(new Date(),time2)
			},
			testBtn() {
			
				this.queryName=this.testName
				this.listForm.queryContent=this.queryName
				
				this.getList(1)
			},
			completionTimeConfirm(e) {
				console.log(e)
			
				this.completionTime = e.year+"-"+e.month+"-1"
			
			
				this.getList(1)
			},
			gotoSelectLock(){
				uni.navigateTo({
				  url: '/pages/task/selectStation?isAll=1',
				  events: {
				    // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
				    acceptDataFromOpenerPage: (item)=>{
						console.log(item)
						
						this.lockName=item.item.name
						this.listForm.lockId=item.item.id
						this.getList(1)
						this.$forceUpdate()
						
				    },
				 
				  }
				 
				})
			},
			customBack(){
				if(this.lockId){
					uni.switchTab({
						url:"/pages/index/index"
					})
				}else{
					uni.navigateBack()
				}
			},
			gotoTask(k){
				if(k.status==0){
					uni.navigateTo({
					  url: '/pages/inspection/add?back=1&stationId='+k.stationId,
					  events: {
					    // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
					    acceptDataFromOpenerPage: (data)=>{
							console.log(data)
							this.getList(1)
					    },
					 
					  }
					 
					})
				}else{
					uni.navigateTo({
					  url: '/pages/inspection/info?id='+k.id,
					 
					 
					})
				}
				
			},
			change(e){
				this.current=e
				this.listForm.pageIndex=1
				this.listForm.status=this.tabslist[e].status
				this.list =[]
				this.getList()
			},
			
			myLoadmore(){
				this.listForm.pageIndex += 1;
				this.getList()
			},
			selectQueryStatusConfirm(e) {
				this.queryStatusValue=[e[0].i]
				this.queryStatusN = e[0].label
				this.queryStatus = e[0].value
				this.listForm.status=this.queryStatus
				this.getList(1)
			},
			selectQueryTypeConfirm(e) {
				console.log(e)
				this.queryTypeValue=[e[0].i]
				this.queryTypeN = e[0].label
				this.queryType = e[0].value
				this.listForm.chargingType=this.queryType
				this.getList(1)
			},
			getList(bl) {
				if(bl){
					this.listForm.pageIndex = 1
				}
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				if(this.completionTime){
					
					this.listForm.startTime=this.completionTime
					var sz=this.completionTime.split('-')
					this.listForm.endTime=nextMonth(sz[0],sz[1],sz[2])
				}
							 
				API.recordList(this.listForm).then((res) => {
					var list=this.list
					
					if (this.listForm.pageIndex == 1) {
						list = res.data.data;
					} else {
						list = [
							...list,
							...res.data.data
						];
					}
					
					
					
					this.list = list
					
					this.listForm.recordsTotal=res.data.recordsTotal
					
					uni.hideLoading();
				
				}).catch(error => {
				
					uni.hideLoading();
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
		}
		
	}
</script>

<style lang="scss" scoped>

		.list {
			padding: 24rpx 24rpx;
			
			.item {
				border-radius: 16rpx;
				
				display: flex;
				border-bottom: 2rpx solid rgba(232, 232, 232, 1);
				background-color: rgba(255,255,255,1);
				// padding: 12rpx 0;
				 margin-bottom: 12rpx ;

				.img {
					width: 72rpx;
					height: 72rpx;

				}

				.body {
					//margin: 0 12rpx;
					width: 100%;
					.line1,.line2,.line3{
						padding: 24rpx;
					}
					.line3{
						text-align: end;
					}
					.line2 {
						color: rgba(119,119,119,1);
						font-size: 24rpx;
						//margin-top: 8rpx;
						border-bottom:2rpx solid rgba(232,232,232,1);
						.value:not(:last-child) {
							margin-bottom: 16rpx;
						}
					}
					.line1 {
						
						display: flex;
						justify-content: space-between;
						 border-bottom:2rpx solid rgba(232,232,232,1);
						.title {
							color: rgba(51, 51, 51, 1);
							font-size: 28rpx;
							font-weight: bold;
						}

						.status {
							background-color:  rgba(255, 61, 0, 1);
							font-size: 24rpx;
							color:#fff;
							padding: 2rpx 8rpx;
							//border-radius: 8rpx;
							white-space: pre;
							  
							    height: 40rpx;

						}
						
						.status0 {
							background-color:  #FF7B00;
							
						}
						.status1 {
							background-color:  #007aff;
							
						}

						.status2 {
							background-color:  #ff9900;
							
						}

						.status3 {
							background-color:  #19be6b;
							
						}

						.status4 {
							border: 2rpx solid rgba(255, 61, 0, 1);
							color: rgba(255, 61, 0, 1);
						}
					}
					
					
				}
			}

			// .item:not(:last-child) {
			//   border-bottom:2rpx solid rgba(232,232,232,1);
			// }
		}
		
		.viewTop{
			padding:16rpx 0 24rpx 0;
			border-bottom: 2rpx solid #e8e8e8;
			background-color: #fff;
			    display: flex;
			    justify-content: space-between;
				    align-items: center;
					.select{
						    padding: 0px 30rpx;
							font-size: 30rpx;
							    display: flex;
								
							.selectSpan{
								    text-align: end;
								//width: 200rpx;
								overflow: hidden;
								   text-overflow: ellipsis;
								   white-space: nowrap; /* 禁止换行，强制单行 */
							}
					}
				
		}
		
		.search {
		
			padding: 16rpx 32rpx;
			background: #fff;
		
			.searchBox {
				display: flex;
				align-items: center;
				background: #F2F2F2;
				padding: 2rpx 16rpx;
				border-radius: 16rpx;
				justify-content: space-between;
			}
		}
		
		
		.floating-button {
			z-index: 999;
			position: fixed; 
			  bottom: 0;   
			    width: 100%;
				 display: flex;
				  height: 120rpx;
				    justify-content: center;
				background-color: rgba(255,255,255,1);
				.button{
					margin-top: 24rpx;
					border-radius: 50px;
				 height: 80rpx;
					width: 80%;
					display: flex;
					    align-items: center;
					    justify-content: center;
						padding:12rpx;
						
						background-color: rgba(22,119,255,1);
						color: rgba(255,255,255,1);
						font-size: 36rpx;
				}
		}
</style>