jp-youdian-Inspection/pages/task/listTask.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="selectTaskInfoCode" :default-value="selectTaskInfoCodeValue" value-name="value"
			label-name="name" @confirm="selectTaskInfoCodeConfirm" :list="codeList"></u-select>
		
		
		<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>
		
		
		<u-picker mode="time" v-model="completionTimeShow" @confirm="completionTimeConfirm"
			:default-time="completionTime" :params="params"></u-picker>
		
		
		
		<view  class="viewTop" >
			<!-- <u-tabs :list="tabslist" 
			 style="   width: 50%;"
			 :current="current" @change="change"></u-tabs> -->
			 
			 <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="selectTaskInfoCodeBtn">
			 				<view class="selectSpan">
			 					{{codeN?codeN:'故障类型'}}
			 				</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.errorCodeText}}
		
						</view>
						<view class="status " :class="'status'+item.status">
							{{item.statusN}}
		
						</view>
					</view>
					
					<view class="line2">
						<view class="value" v-if="item.deviceName">
							设备编号 {{item.deviceName}} {{item.deviceNo}}
		
						</view>
						<view class="value">
							设备网点 {{item.stationName}} 
		
						</view>
						<view class="value">
							上报时间 {{item.errorReportTime}} 
							<span   class="value"  v-if="getHourDistanceArr(item)==0" :class="{
								getHourDistanceArrNum10:true,
							
							}">
							
							</span>
							<span  class="value"  v-else :class="{
								getHourDistanceArrNum10:true,
								getHourDistanceArrNum12:getHourDistanceArr(item)>12,
								getHourDistanceArrNum24:getHourDistanceArr(item)>24,
							}">
								(超{{getHourDistanceArr(item) }}小时)
								</span>
								
						</view>
						<view class="value"  v-if="item.status==1">
							处理人员 {{item.repairNames}} 
						</view>
						<view class="value" v-if="item.status==1">
							处理时间 {{item.repairTime}} 
							
						</view>
						
						
					</view>
					
					<view class="line3" v-if="0">
						
						<u-button  type="info" v-if="item.status==1"  size="mini">查看</u-button>
						
						<u-button  type="primary" v-if="item.status==0" size="mini" >去处理</u-button>
						
					</view>
		
				</view>
				
			</view>
			
			<u-divider :isnone="list.length==0" nonetext="没有找到相关内容" border-color="#CFD2D5">已经到底了</u-divider>
			
		</view>
		
		
		<view class="floating-button">
			<view class="button"  @click="gotoUrl('/pages/task/addTask')" >
				
				故障上报

			</view>
			
		</view>
		
	</view>
</template>

<script>
	import * as API from '@/apis/pagejs/pagesTask.js'
	
	import {
	
		currentTimeStamp,
		parseUnixTime,newDate,nextMonth,hourDistanceArr
	} from '@/apis/utils'
	
	export default {
		data() {
			return {
					queryName: "",
				testName: "",
				list:[],
				codeList:[],
				listForm:{
					pageIndex: 1,
					pageSize: 20,
					recordsTotal: 1,
					status:""
				},
				lockId:"",
				lockName:"",
				codeN: "",
				code: "",
				
				queryStatus: "",
				queryStatusN: "",
				queryStatusBl:false,
				queryStatusValue: [0],
				
				
				queryType: "",
				queryTypeN: "",
				queryTypeBl:false,
				queryTypeValue: [0],
				
				selectTaskInfoCode: false,
				selectTaskInfoCodeValue: [0],
				completionTime: "",
				completionTimeShow: false,
				params: {
					year: true,
					month: true,
					day: false,
					hour: false,
					minute: false,
					second: false,
					timestamp: false,
				},
				
				current:0,
				tabslist:[
					{
						name: '待处理'
					}, {
						name: '已处理'
					}
				],
				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.findByCatalogName({
				catalogName: '设备故障类型'
			}, "codeList")
			this.getList()
		},
		onReachBottom() {
			if (this.list.length < this.listForm.recordsTotal) {
				this.myLoadmore();
			}
		},
		computed:{
			completionTimeN(){
				return parseUnixTime(newDate(this.completionTime ),'{y}年{m}月')
			}
		},
		methods: {
			getHourDistanceArr(item) {
				var time=item.errorReportTime;
				if (!item.errorReportTime) {
					return '-'
				}
				var  key="";
				if(item.repairTime){
					key=hourDistanceArr(time, newDate(item.repairTime))[0]
					
				}else{
					key=hourDistanceArr(time, new Date())[0]
					
				}
				
				
				
				
				return  key
			
			
			},
			testBtn() {
				this.queryName=this.testName
				this.listForm.queryContent=this.queryName
				this.getList()
			},
			completionTimeConfirm(e) {
				console.log(e)
			
				this.completionTime = e.year+"-"+e.month+"-1"
			
			
				this.getList(1)
			},
			findByCatalogName(obj, listName) {
			
				API.findByCatalogName(obj).then((res) => {
			
					var arr = res.data.dataDictionaryList
			
					this.codeList = [
						{
							name:"全部类型",
							value: ""
						},
						...arr
					]
			
			
				}).catch(error => {
			
					uni.hideLoading();
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			
			},
			selectTaskInfoCodeBtn() {
				if (this.code) {
					//this.selectTaskInfoCodeValue=[parseInt(this.bindInfo.type)-1]
					var i = this.codeList.findIndex(item => {
						return item.value == this.code
					})
					this.selectTaskInfoCodeValue = [i]
				}
				this.selectTaskInfoCode = true;
			},
			selectTaskInfoCodeConfirm(e) {
				console.log(e)
				this.codeN = e[0].label
				this.code = e[0].value
				this.listForm.errorCode=this.code
				this.getList(1)
			},
			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)
			},
			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){
				uni.navigateTo({
				  url: '/pages/task/maintenanceTaks?back=1&id='+k.id,
				  events: {
				    // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
				    acceptDataFromOpenerPage: (data)=>{
						console.log(data)
						this.getList(1)
				    },
				 
				  }
				 
				})
			},
			change(e){
				this.current=e
				this.listForm.pageIndex=1
				this.listForm.status=e
				this.list =[]
				this.getList()
			},
			
			myLoadmore(){
				this.listForm.pageIndex += 1;
				this.getList()
			},
			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.errList(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;
			padding-bottom: 120rpx;
			.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;

						}
						
						.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 10rpx;
							font-size: 30rpx;
							    display: flex;
								
							.selectSpan{
								    text-align: end;
							
								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;
				}
		}
		
		.getHourDistanceArrNum10 {
			color: #FF7B00;
		}
		
		.getHourDistanceArrNum12 {
			color: red;
		}
		
		.getHourDistanceArrNum24 {
			color: #8161FF;
		}
</style>