Web_TracerMethodology/pages/todayCheck/todayCheck.vue

<template>
	<view class="todayCheckPage">
		<view class="content" v-for="item in list">
			<view class="contTitle">
				<text class="contTitleLeft">{{item.situationName}}</text>
				<text class="contTitleRight">{{item.checkPlan}}</text>
			</view>
			<view class="contCon">
				<view v-for="items in item.planDepListReps" class="conEveryCon" @click="goToPonitDetails(items)">
					<view class="title">
						<view class="name">{{items.deptName}}</view>	
						<view class="buMen">
							<image src="../../static/icon-map-dis.png" mode="" class="img"></image>
							<view class="keshi">{{items.deptClassName}}</view>
						</view>
					</view>
					<view class="status" >
						<image :src="items.completeDes == '完成'?'../../static/top-img.png':items.completeDes == '查核中'?'../../static/hight-bg.png':'../../static/disabled-bg.png'" mode="" class="bgImg"></image>
						<text class="statusType">{{items.completeDes}}</text>
					</view>
					<view class="points">{{items.decs}}</view>
					<view class="pointsGK">要点概括：{{items.checkPointNames}}</view>
					<view>
						<view class="checkName">{{items.empName}}</view>
						<view class="checkTime">{{items.startDate}}~{{items.endDate}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
		  return {
			  list:[],
			  date:'',
		  }
		},
		mounted() {
			this.getList();
			
		},
		methods:{
			getList(){
				this.$store.dispatch({
					type: "todayCheck/commActions",
					payload: {
					  key: "specificCheckTaskList",
					  data: {
					    specificDate:this.date
					  },
					},
				}).then((res)=>{
					if(res){
						this.list =res;
					}
				})
			},
			goToPonitDetails(data){
				// console.log(data)
				// uni.navigateTo({
				//   url: `/pages/messages/messages?id=${data.checkId}`,
				// });
			}
		},
		onLoad({ date }){
		  this.date = date;
		},
	}
</script>

<style lang="less">
	.todayCheckPage{
		padding:0rpx 25rpx;
		height: 100%;
		width: 100%;
		.content{
			width: 100%;
			.contTitle{
				font-size: 22.5rpx;
				color: #666F80;
				height: 22.5rpx;
				line-height: 22.5rpx;
				margin: 25rpx 0rpx 15rpx;
				.contTitleLeft{
					display: inline-block;
					width: 50%;
					text-align: left;
				}
				.contTitleRight{
					display: inline-block;
					width: 50%;
					text-align: right;
				}
			}
			.contCon{
				.conEveryCon{
					margin-bottom: 25rpx;
					padding:25rpx 25rpx 0rpx;
					background-color: #fff;
					height: 225rpx;
					border-radius: 5rpx;
					position: relative;
					.title{
						margin-bottom: 10rpx;
						color: #292C33;
						// vertical-align: top;
						.name{
							height: 35rpx;
							display: inline-block;
							font-size: 35rpx;
							font-weight: 400;
						}
						.buMen{
							margin-left: 20rpx;
							display: inline-block;
							// width: 117.5rpx;
							height: 35rpx;
							background-color: #EDF2FA;
							border-radius: 17.5rpx;
							line-height: 82.5rpx;
							vertical-align: top;
							.img{
								vertical-align: top;
								width: 35rpx;
								height: 35rpx;
							}
							.keshi{
								margin-left: 10rpx;
								margin-right: 20rpx;
								display: inline-block;
								vertical-align: top;
								font-size: 17.5rpx;
								line-height: 35rpx;
							}
						}
					}
					.status{
						width: 100rpx;
						height: 35rpx;
						position: absolute;
						top: 0rpx;
						right: 0rpx;
						.bgImg{
							width: 100rpx;
							height: 35rpx;
						}
						.statusType{
							position: absolute;
							top:8.75rpx;
							right:18.75rpx;
							font-size: 17.5rpx;
							line-height: 17.5rpx;
							color: #fff;
						}
					}
					.points{
						font-size: 20rpx;
						color: #292C33;
						line-height: 50rpx;
						font-weight: bold;
					}
					.pointsGK{
						padding-bottom: 25rpx;
						border-bottom: 0.62rpx solid #DADEE6;
						font-size: 20rpx;
						color: #666F80;
					}
					.checkName{
						width: 50%;
						display: inline-block;
						color: #666E80;
						text-align: left;
						line-height: 57.5rpx;
						font-size: 17.5rpx;
					}
					.checkTime{
						width: 50%;
						display: inline-block;
						color: #666E80;
						text-align: right;
						line-height: 57.5rpx;
						font-size: 17.5rpx;
					}
				}
			}
		}
	}
</style>