CKQ/pages/risk/risk.vue

<template>
	<view class="page-index">
		<view class="status_bar"></view>
		<div class="title">
			<text class="tab" :class="type==='user'?'active':''" @click="changeTab('user')">我的</text>
			<text class="tab" :class="type==='group'?'active':''" @click="changeTab('group')">部门</text>
		</div>
		<div class="statistics">
			<div class="head">任务统计</div>
			<div class="container">
				<div class="item" @click="changeStuas(1,'待评审')">
					<image class="icon" src="/static/index/wait.png" alt=""></image>
					<text>待评审{{statistics.review}}个</text>
				</div>
				<div class="item" @click="changeStuas(2,'待整改')">
					<image class="icon" src="/static/index/expire.png" alt=""></image>
					<text>待整改{{statistics.rectify}}个</text>
				</div>
				<div class="item" @click="changeStuas(3,'待验收')">
					<image class="icon" src="/static/index/complete.png" alt=""></image>
					<text>待验收{{statistics.accept}}个</text>
				</div>
				<div class="item" @click="changeStuas(4,'已完成')">
					<image class="icon" src="/static/index/complete.png" alt=""></image>
					<text>已完成{{statistics.complete}}个</text>
				</div>
				<div class="item" @click="changeStuas(-1,'已撤销')">
					<image class="icon" src="/static/index/revocation.png" alt=""></image>
					<text>已撤销{{statistics.revocation}}个</text>
				</div>
			</div>
		</div>
		<div class="task-list">
			<div class="head">{{title}}</div>
			<template v-if="items.length>0">
				<div class="item" v-for="(item,index) in items" :key="index" @click="linkTo(item)">
					<div class="task-title">{{item.hdangerTitle}}</div>
					<view class="footer">
						<view class="lf">
							<div class="time">{{item.dangerDeadline}}</div>
							<div class="user">{{item.curAccountName}}</div>						
						</view>
						<div class="status" v-if="item.status===4">完成</div>
						<div class="status" v-else>{{item.curActivityTitle}}</div>
					</view>
				</div>
			</template>
			<template v-else>
				<view class="empty">
					<image class="icon-empty" src="/static/icon/empty.png" mode="widthFix"></image>
					<p>暂无数据</p>					
				</view>
			</template>
		</div>
	</view>
</template>

<script>
	import { getDangerByList, getDangerByPage } from '@/api/dangerApi'
	export default {
		data() {
			return {
				statusBarHeight:0,
				type:"user",
				title:"待评审",
				statistics: {
					review:10,
					rectify:2,
					complete:10,
					accept:88,
					revocation:2
				},
				conditions:{
					status:1,
					accountId:undefined
				},
				items:[]
			}
		},
		onShow(){
			const accountInfo=uni.getStorageSync('accountInfo');
			const groupId=accountInfo.groupId
			const accountId=accountInfo.userId
			this.accountId=accountId
			this.groupId=groupId
			this.init()
			this.getData()
		},
		methods: {
			init(){
				let type="AccountId"
				let tab_type=this.accountId
				if(this.type!=='user'){
					type="GroupId"
					tab_type=this.groupId
				}
				getDangerByList().then((res)=>{
					this.statistics.review=res.data.filter(item=>item.status==1&&item['review'+type]===tab_type).length
					this.statistics.rectify=res.data.filter(item=>item.status==2&&item['rectify'+type]===tab_type).length
					this.statistics.accept=res.data.filter(item=>item.status==3&&item['accept'+type]===tab_type).length
					this.statistics.complete=res.data.filter(item=>item.status==4&&item['submit'+type]===tab_type).length
					this.statistics.revocation=res.data.filter(item=>item.status==-1&&item['submit'+type]===tab_type).length
				})			
			},
			onPullDownRefresh (){
				this.getData()
			},
			getData(){
				let conditions={status:this.conditions.status}
				let statusName="submit"
				if(this.conditions.status==1){
					statusName="review"
				}else if(this.conditions.status==2){
					statusName="rectify"
				}else if(this.conditions.status==3){
					statusName="accept"
				}
				if(this.type==='user'){
					conditions[statusName+"AccountId"]=this.accountId
				}else{
					conditions[statusName+"GroupId"]=this.groupId
				}
				getDangerByList(conditions).then((res)=>{
					this.items=res.data
				})
			},
			changeTab(type){
				this.type=type
				this.getData()
			},
			changeStuas(status,name){
				this.conditions.status=status
				this.title=name
				this.getData()
			},
			linkTo(item){
				if(this.type==='group') return
				let url="";
				switch(item.curActivityCode){
					case "review" ://评审
					url='/pages/risk/review/review'
					break;
					case "submit" ://提交
					url='/pages/risk/repeal/repeal'
					break;
					case "accept" ://验收
					url='/pages/risk/check/check'
					break;
					case "rectify" ://整改
					url='/pages/risk/rectify/rectify'
					break;
				}
				uni.setStorageSync('danger-info',item)
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page-index{
		background: linear-gradient(180deg, #4D73FF 0%, rgba(77, 115, 255, 0) 100%);
		padding: 0 30upx;
		.title{
			.tab{
				font-size: 34upx;
				line-height: 50upx;
				margin-right: 32upx;
				color: rgba(255, 255, 255, 0.6);
				&.active{
					color: #fff;
				}
			}
		}
		.statistics{
			&{
				border-radius: 24upx;
				background-color: #fff;
				padding:36upx 0 0 24upx;
				margin-top: 48upx;
			}
			.head{
				font-weight: 900;
				font-size: 34upx;
				line-height: 50upx;
				color: #151515;			
			}
			.container{
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				.item{
					width: 33.33%;
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;
					margin-bottom: 40upx;
					.icon{
						display: block;
						width:88upx;
						height: 88upx;
					}
					text{
						font-size: 28upx;
						line-height: 42upx;
						color: #151515;
						padding-top: 18upx;
					}				
				}
			}
		}
		.task-list{
			border-radius: 24upx;
			background-color: #fff;
			margin-top: 24upx;
			padding: 36upx 24upx;
			.head{
				font-weight: 900;
				font-size: 34upx;
				line-height: 50upx;
				color: #151515;			
			}
			.item{
				padding: 30upx 40upx 38upx 40upx;
				margin-top: 20rpx;
				border: 1px solid #F8F9FD;
				.task-title{
					color: #212121;
					font-size: 32upx;	
					padding-bottom: 24upx;
				}
				.footer{
					display: flex;
					justify-content: space-between;
					align-items: center;			
					.lf{
						display: flex;
						.time{
							background-image: url(/static/index/time.png);
							background-repeat: no-repeat;
							background-position: left center;
							background-size: 24upx 24upx;
							padding-left: 36upx;
							color: #999;
							font-size: 24upx;
						}
						.user{
							background-image: url(/static/index/user.png);
							background-repeat: no-repeat;
							background-position: left center;
							background-size: 24upx 24upx;
							padding-left: 36upx;
							color: #999;
							font-size: 24upx;	
							margin-left: 10rpx;
						}
					}
					.status{
						color: #4D73FF;
					}
				}
			}
		}
	}
	.container {
		padding: 20px;
		font-size: 14px;
		line-height: 24px;
	}
	.empty{
		text-align: center;
		font-size: 28rpx;
		margin-top: 10%;
		color: #666;
		.icon-empty{
			display: block;
			width: 100px;
			margin: 0 auto;
		}
	}
</style>