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">
					<image class="icon" src="/static/index/wait.png" alt=""></image>
					<text>待评审{{statistics.review}}个</text>
				</div>
				<div class="item">
					<image class="icon" src="/static/index/expire.png" alt=""></image>
					<text>待整改{{statistics.rectify}}个</text>
				</div>
				<div class="item">
					<image class="icon" src="/static/index/complete.png" alt=""></image>
					<text>待验收{{statistics.accept}}个</text>
				</div>
				<div class="item">
					<image class="icon" src="/static/index/complete.png" alt=""></image>
					<text>已完成{{statistics.complete}}个</text>
				</div>
				<div class="item">
					<image class="icon" src="/static/index/revocation.png" alt=""></image>
					<text>已撤销{{statistics.revocation}}个</text>
				</div>
			</div>
		</div>
		<div class="task-list">
			<div class="head">待办风险</div>
			<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>
		</div>
	</view>
</template>

<script>
	import { getDangerByList, getDangerByPage } from '@/api/dangerApi'
	export default {
		data() {
			return {
				statusBarHeight:0,
				type:"user",
				statistics: {
					review:10,
					rectify:2,
					complete:10,
					accept:88,
					revocation:2
				},
				items:[]
			}
		},
		onShow(){
			this.init()
		},
		methods: {
			init(){
				getDangerByList().then((res)=>{
					this.items=res.data
					this.statistics.review=res.data.filter(item=>item.status==1).length
					this.statistics.rectify=res.data.filter(item=>item.status==2).length
					this.statistics.accept=res.data.filter(item=>item.status==3).length
					this.statistics.complete=res.data.filter(item=>item.status==4).length
					this.statistics.revocation=res.data.filter(item=>item.status==-1).length
				})
			},
			changeTab(type){
				this.type=type
				if(type==='group'){
					
				}else{
					
				}
			},
			linkTo(item){
				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;
	}
</style>