uniappshell/pages/index/detail/detail.vue

<template>
	
	<view class="index-detail-page">
		<view class="container">
			<view class="tab-cont">
				<view class="part" v-if="type==='task'">
					<view class="tab">
						<view class="tab-item" :class="activeTab===1?'active':''" @click="tabChange(0,1)">待处理</view>
						<view class="tab-item" :class="activeTab===2?'active':''" @click="tabChange(1,2)">已完成</view>
						<view class="tab-item" :class="activeTab===3?'active':''" @click="tabChange(-1,3)">已撤销</view>
					</view>
					<view class="part-cont">
						<view class="item" v-for="(item,taskIdx) in items" :key="item.taskId" @click="handle('task',item)">
							<view class="index">
								{{taskIdx+1}}
							</view>							
							<view class="title">
								<view class="name">{{item.taskTitle}}</view>
								<view class="state">{{taskStatus(item.status)}}</view>
							</view>
							<view class="tags">
								<text class="tag">{{taskPriority(item.taskPriority)}}</text>
								<text class="tag">{{item.taskCatTitle}}</text>
								<text class="tag">{{taskType(item.taskTypeId)}}</text>
							</view>
							<view class="time">
								预期结束时间：{{item.expectedEndTime}}
							</view>
							<view class="bottom">
								<view class="user">
									<image class="avatar" src="/static/index/user.png" mode="widthFix"></image>
									处理人：{{item.handleAccountName}}
								</view>		
								<view class="hand-time">
									{{item.launchTime}}
								</view>																
							</view>
						</view>
					</view>
				</view>
				<view class="part" v-if="type==='warn'">
					<view class="tab">
						<view class="tab-item" :class="activeTab===1?'active':''" @click="tabChange(0,1)">待处理</view>
						<view class="tab-item" :class="activeTab===2?'active':''" @click="tabChange(1,2)">已处理</view>
						<view class="tab-item" :class="activeTab===3?'active':''" @click="tabChange(-1,3)">已撤销</view>
					</view>
					<view class="part-cont">
						<view class="item" v-for="(item,warnIdx) in items" :key="item.warnId" @click="handle('warn',item)">
							<view class="index">
								{{warnIdx+1}}
							</view>
							<view class="title">
								<view class="name">{{item.warnTitle}}</view>
								<view class="state">{{warningStatus(item.status)}}</view>
							</view>
							<view class="tags">
								<text class="tag">{{alertLevel(item.warnLevel)}}</text>
							</view>
							<view class="time">
								发生时间：{{item.warnTime}}
							</view>
							<view class="bottom" v-if="item.handleAccountName">
								<view class="user">
									<image class="avatar" src="/static/index/user.png" mode="widthFix"></image>
									处理人：{{item.handleAccountName}}
								</view>		
								<view class="hand-time">
									{{item.handleTime}}
								</view>																
							</view>
						</view>
					</view>
				</view>
				<view class="part" v-if="type==='alert'">
					<view class="tab">
						<view class="tab-item" :class="activeTab===1?'active':''" @click="tabChange(0,1)">活动</view>
						<view class="tab-item" :class="activeTab===2?'active':''" @click="tabChange(1,2)">已解除</view>
						<view class="tab-item" :class="activeTab===3?'active':''" @click="tabChange(-1,3)">已撤销</view>
					</view>
					<view class="part-cont">
						<view class="item" v-for="(item,alertIdx) in items" :key="item.alertId">
							<view class="index">
								{{alertIdx+1}}
							</view>
							<view class="title">
								<view class="name">{{item.alertTitle}}</view>
								<view class="state">{{alertStatus(item.status)}}</view>
							</view>
							<view class="tags">
								<text class="tag">{{alertLevel(item.alertLevel)}}</text>
							</view>
							<view class="time">
								发生时间：{{item.alertTime}}
							</view>
							<view class="bottom" v-if="item.clearTime">		
								<view class="hand-time">
									解除时间：{{item.clearTime}}
								</view>																
							</view>
							<view class="bottom" v-if="item.alertContent">
								<view class="alertContent">
									内容：{{item.alertContent}}
								</view>																
							</view>
						</view>
					</view>
				</view>
				<view class="part" v-if="type==='danger'">
					<view class="tab">
						<view class="tab-item" :class="activeTab===1?'active':''" @click="tabChange(0,1)">待处理</view>
						<view class="tab-item" :class="activeTab===2?'active':''" @click="tabChange(1,2)">我提交</view>
						<view class="tab-item" :class="activeTab===3?'active':''" @click="tabChange(2,3)">我处理</view>
						<view class="tab-item" :class="activeTab===4?'active':''" @click="tabChange(-1,4)">我撤销</view>
					</view>
					<view class="part-cont">
						<view class="item" v-for="(item,dangerIdx) in items" :key="item.dangerId" @click="handle('danger',item)">
							<view class="index">
								{{dangerIdx+1}}
							</view>
							<view class="title">
								<view class="name">{{item.dangerTitle}}</view>
								<view class="state">{{dangerStatus(item.status)}}</view>
							</view>
							<view class="tags">
								<text class="tag">{{dangerLevel(item.dangerLevel)}}</text>
								<text class="tag">{{item.dangerCatTitle}}</text>
							</view>
							<view class="time">
								预期结束时间：{{item.dangerDeadLine}}
							</view>
							<view class="supervise">
								<span class="supervise-item">督办部门：{{item.superviseGroupName}}</span>
								<span class="supervise-item">督办人员：{{item.superviseAccountName}}</span>
							</view>					
							<view class="bottom">
								<view class="user">
									<image class="avatar" src="/static/index/user.png" mode="widthFix"></image>
									处理人：{{item.curAccountName}}
								</view>		
								<view class="hand-time">
									{{item.submitTime}}
								</view>																
							</view>
						</view>
					</view>
				</view>
			</view>										
		</view>
		<template v-if="total<1">
			<view class="isEmpty" >
				<p class="word">没有数据 ^_^ </p>
			</view>
		</template>
	</view>
</template>

<script>
	import { getAlertByPage } from '@/api/aqpt/alertApi.js';
	import { getDangerByPage } from '@/api/aqpt/dangerApi.js';
	import { getTaskByPage } from '@/api/aqpt/taskApi.js';
	import { getWarningByPage } from '@/api/aqpt/warning.js';	
	import { handleCheckTask } from '@/api/aqpt/checkTaskApi'
	import{
		taskStatus,taskPriority,taskType,
		alertLevel,alertStatus,
		dangerStatus,dangerLevel,
		warningLevel,warningStatus
	} from '@/libs/enum.js';	
	export default {
		data() {
			return {
				type:undefined,
				activeTab:1,
				user:{},
			    conditions: {
					page: 1,
					limit: 10,
					status:0
			    },
				total:0,
				items:[]		
			}
		},
		onLoad({type,name}) {
			this.type=type
			let user=uni.getStorageSync('accountInfo');
			this.user=user
			uni.setNavigationBarTitle({
				title:`${name||'详情'}`
			})
			this.tabChange(0,1)
		},
		methods: {
			taskStatus,taskPriority,taskType,
			alertLevel,alertStatus,
			dangerStatus,dangerLevel,
			warningLevel,warningStatus,
			getData(){
				if(this.type==='task'){
					this.getTaskByPage()
				}
				if(this.type==='danger'){
					delete this.conditions.status
					this.getDangerByPage()
				}				
				if(this.type==='alert'){
					this.getAlertByPage()
				}
				if(this.type==='warn'){
					this.getWarningByPage()
				}
				
			},
			getWarningByPage(){
				let items=JSON.parse(JSON.stringify(this.items))
				getWarningByPage(this.conditions).then((res)=>{
					this.items=items.concat(res.data)
					this.total=res.total
				})				
			},
			getAlertByPage(){
				let items=JSON.parse(JSON.stringify(this.items))
				getAlertByPage(this.conditions).then((res)=>{
					this.items=items.concat(res.data)
					this.total=res.total
				})				
			},
			getDangerByPage(){
				let items=JSON.parse(JSON.stringify(this.items))
				getDangerByPage(this.conditions).then((res)=>{
					this.items=items.concat(res.data)
					this.total=res.total
				})				
			},
			getTaskByPage(){
				let items=JSON.parse(JSON.stringify(this.items))
				getTaskByPage(this.conditions).then((res)=>{
					this.items=items.concat(res.data)
					this.total=res.total
				})				
			},
			tabChange(value,index){
				this.activeTab=index
				this.total=0,
				this.items=[]
				this.conditions= {page: 1,limit: 10}
				if(this.type==='task'||this.type==='alert'||this.type==='warn'){
					this.conditions.status=value
				}
				if(this.type==='danger'){
					  if (index === 1) {
						this.conditions.curAccountId = this.user.userId
					  } else if (index === 2) {
						this.conditions.submitAccountId = this.user.userId
					  } else if (index === 3) {
						this.conditions.handleAccountId = this.user.userId
					  } else if (index === 4) {
						this.conditions.submitAccountId = this.user.userId
						this.conditions.status = -1
					  }
				}					
				this.getData()
			},
			handle(type,item){			
				let url=""
				if(type==='danger'){				
					uni.navigateTo({
						url:`/pages/webview/webview?href=${this.$h5}/danger/views/detail.html&dangerId=539241&name=隐患处理`
					})						
					return
				}
				if(type==='task'){this.handTask(item);return};
				if(type==='warn'){	
					if(this.conditions.status!==0) return;
					if(item.handleAccountId!==this.user.userId) return;
					url=`/pages/index/handle/warning/warning?id=${item.warnId}`
				}				
				uni.navigateTo({
					url
				})				
			},
			handTask(item){
				if(item.handleAccountId!==this.user.userId) return;
				if(this.conditions.status!==0) return;				
				handleCheckTask(item.taskId).then((res)=>{
					const { checklistId, checklistTypeId } = res.data //recordId-taskId
					if (checklistTypeId === 1) {// HazardRecordView
						uni.navigateTo({
							url:`/pages/index/handle/task/hazardRecord/hazardRecord?rid=${item.taskId}&cid=${checklistId}&title=${item.taskTitle}`
						})															  
					} else if (checklistTypeId === 2) {// PointRecordView
						uni.navigateTo({
							url:`/pages/index/handle/task/task?rid=${item.taskId}&cid=${checklistId}&title=${item.taskTitle}`
						})																  
					} else if (checklistTypeId === 3) {// ScoreRecordView	
						uni.navigateTo({
							url:`/pages/index/handle/task/task?rid=${item.taskId}&cid=${checklistId}&title=${item.taskTitle}`
						})															  
					}
				})
			
			},
			onPullDownRefresh() {					
				this.tabChange(this.conditions.status||0,this.activeTab)
				uni.stopPullDownRefresh()
			},
			onReachBottom() {
				if(this.total>=this.conditions.page*this.conditions.limit){
					this.conditions.page++
					this.getData()
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.index-detail-page {
		min-height: 100vh;
		padding-bottom: 100rpx;
		background-color: rgba(245, 246, 248, 1);
		.container{	
			.tab-cont{				
				.part{
					.tab{
						display: flex;
						align-items: center;
						justify-content: center;
						overflow-x: auto;
						background-color: #fff;
						padding:32rpx;
						.tab-item{
							display: inline-block;
							padding: 0 36rpx;
							background-color: #fff;
							text-align: center;      
							flex-shrink: 0;
							line-height: 1;
							font-size: 32rpx;
							color: #333;
							box-sizing: border-box;
							border-bottom: 4rpx solid transparent;
							&.active{
								// background-color: #1e80ff;
								// color: #fff;
								// border-color: #1e80ff;
								color: #1e80ff;
								font-weight: 800;
							}
						}
					}
					.part-cont{
						padding: 0 32rpx;
						.item{
							background-color: #fff;
							border-radius: 12rpx;
							margin-top: 16rpx;
							padding: 24rpx 20rpx 24rpx 55rpx;
							position: relative;
							.index{
								width: 44rpx;
								height: 44rpx;
								display: flex;
								align-items: center;
								justify-content: center;
								border-radius: 50%;
								color:#ea8259;
								background-color:#fbf1ed;
								font-size:18rpx;
								position: absolute;
								left: 4rpx;
								top: 26rpx;
								word-break: break-all;
							}							
							.title{
								display: flex;
								justify-content: space-between;
								align-items: center;
								.name{
									font-size: 32rpx;
									color: rgba(0, 0, 0, 0.8);
								}
								.state{
									font-size: 30rpx;
									color: rgba(250, 139, 55, 1);
								}
							}
							.tags{
								padding-top: 24rpx;
								.tag{
									background: rgba(245, 246, 248, 1);	
									font-size: 20rpx;
									margin-left: 10rpx;
									padding: 10rpx 20rpx;
									&:nth-child(1){
										color: rgba(234, 130, 89, 1);
										background: rgba(251, 241, 237, 1);
									}
								}
							}
							.time{
								padding-top: 20rpx;
								font-size: 28rpx;									
								color:rgba(241, 57, 57, 0.8);
							}
								
							.supervise{
								font-size: 24rpx;
								color: rgba(0, 0, 0, 1);
								padding: 10rpx 0;
								.supervise-item{
									padding-right: 10rpx;
								}
							}
							.bottom{
								display: flex;
								justify-content: space-between;
								align-items: center;
								padding-top: 20rpx;
								.user{
									display: flex;
									align-items: center;
									font-size: 24rpx;
									color: rgba(0, 0, 0, 1);
									.avatar{
										width: 44rpx;
										margin-right: 10rpx;
									}
								}
								.hand-time{
									font-size: 24rpx;
									color: rgba(0, 0, 0, 1);
								}
							}
							.alertContent{
								font-size: 26rpx;
								color: #666;
								line-height: 1.5;
								text-overflow: ellipsis;
								overflow: hidden;
								word-break: break-all;
								display: -webkit-box;
								-webkit-box-orient: vertical;
								-webkit-line-clamp: 2;
							}
						}
					}
				}
			}
		}
		.isEmpty{
			width: 100%;
			height: 100vh;
			background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzkgODYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxsaW5lYXJHcmFkaWVudCBpZD0iYSIgeDE9IjM4Ljg1JSIgeTE9IjAlIiB4Mj0iNjEuMTUlIiB5Mj0iMTAwJSI+PHN0b3Agc3RvcC1jb2xvcj0iI0ZDRkNGRCIgb2Zmc2V0PSIwJSIvPjxzdG9wIHN0b3AtY29sb3I9IiNFRUVGRjMiIG9mZnNldD0iMTAwJSIvPjwvbGluZWFyR3JhZGllbnQ+PGxpbmVhckdyYWRpZW50IGlkPSJiIiB4MT0iMCUiIHkxPSI5LjUlIiB5Mj0iOTAuNSUiPjxzdG9wIHN0b3AtY29sb3I9IiNGQ0ZDRkQiIG9mZnNldD0iMCUiLz48c3RvcCBzdG9wLWNvbG9yPSIjRTlFQkVGIiBvZmZzZXQ9IjEwMCUiLz48L2xpbmVhckdyYWRpZW50PjxwYXRoIGlkPSJjIiBkPSJNMCAwaDE3djM2SDB6Ii8+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PHBhdGggZD0iTTM5LjUgODZDNjEuMzE1IDg2IDc5IDgzLjkxIDc5IDgxLjMzM1M1Ny4zMTUgNzggMzUuNSA3OCAwIDc4Ljc1NiAwIDgxLjMzM0MwIDgzLjkxMSAxNy42ODUgODYgMzkuNSA4NnoiIGZpbGw9IiNGN0Y4RkMiLz48cGF0aCBmaWxsPSIjRTVFN0U5IiBkPSJNMTMgNDVoNDBMNDIgNThIMnpNNjUuNTUxIDI5Ljk4bC0xNi4zMTMtNy42MDctMi44NDEtNS43MzggMTYuMzEzIDcuNjA3eiIvPjxwYXRoIGZpbGw9IiNFREVFRjIiIGQ9Ik02NS41NTEgMjkuOThsLTM0LjQ0LTE2LjA1OS0xNS4yMTQgMzIuNjI3IDM0LjQ0IDE2LjA2eiIvPjxwYXRoIGZpbGw9InVybCgjYSkiIHRyYW5zZm9ybT0icm90YXRlKDI1IDI3LjQ0NiAtNDMuNDE2KSIgZD0iTTM4IDdoMTd2MzZIMzh6Ii8+PHBhdGggZmlsbD0iI0Y4RjlGQiIgZD0iTTE1LjcwNSA2LjczN2wxNS40MDcgNy4xODQgMTUuNjQ2LS40MjctMTUuNDA3LTcuMTg1eiIvPjxwYXRoIGZpbGw9InVybCgjYikiIGQ9Ik0xMyA0NWg0MHYzNkgxM3oiLz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg1MyA0NSkiPjxtYXNrIGlkPSJkIiBmaWxsPSIjZmZmIj48dXNlIHhsaW5rOmhyZWY9IiNjIi8+PC9tYXNrPjx1c2UgZmlsbD0iI0UwRTNFOSIgdHJhbnNmb3JtPSJtYXRyaXgoLTEgMCAwIDEgMTcgMCkiIHhsaW5rOmhyZWY9IiNjIi8+PHBhdGggZmlsbD0iI0Q1RDdERSIgbWFzaz0idXJsKCNkKSIgdHJhbnNmb3JtPSJtYXRyaXgoLTEgMCAwIDEgMjQgMCkiIGQ9Ik03IDBoMTdsLTQgMTgtMjAtMnoiLz48L2c+PHBhdGggZmlsbD0iI0Y4RjlGQiIgZD0iTTcwIDQ1SDUzbDkgMTNoMTd6Ii8+PC9nPjwvc3ZnPg==);
			background-size: contain;
			background-repeat: no-repeat;
			position: relative;
			background-color: #fff;
			/* #ifndef MP-WEIXIN */
				height: calc( 100vh - 100px);	
			/* #endif */
			.word{
				width: 100%;
				text-align: center;
				position: absolute;
				top: 80vh;
				left: 0;
				color: #999;
				font-size: 28rpx;
				letter-spacing: 2rpx;
			}
		}		
	}

</style>