jq_miniApp/subPackWork/electronicPatrol/electronicPatrol.vue

<template>
	<view class="v-page">
		<view class="g-body">
			<view class="body-item">
				<calendar @change-mon="getMontn" :signeddates="signeddates" @on-click="showData" :open="true"></calendar>
			</view>
			<view class="v-card contain">
				<view class="v-card-item" v-for="item in jobList">
					<view class="v-card-box">
						<view class="row">
							<view class="v-card-content flex-auto">
								<view class="v-card-title">{{ item.patrolTaskName }}</view>
								<view class="v-card-tip">开始时间：{{ item.startDate }}</view>
								<view class="v-card-tip">完成度：{{ item.completeness }}</view>
							</view>
							<view class="v-card-right text-center">
								<view class="v-state-text  v-m-b4" :class="item.taskState == '已完成' ? 'type1' : 'type5'">{{ item.taskState }}</view>
								<button @click="signIn(item)" size="mini" class="v-btn "
									:class="item.statusDesign == '即将开始' ? 'v-btn-info' : 'v-btn-primary'">{{ item.statusDesign }}</button>
							</view>
						</view>
						
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import calendar from '@/components/dark-calendar/dark-calendar.vue';
	import {
		getPatrollingTaskData,
		getDateWithData
	} from '@/api/word/electronicPatrol.js';
	import {
		formatDate
	} from '@/pages/work/util/date.js'
	export default {
		components: {
			calendar
		},
		data() {
			return {
				//有任务的日期
				signeddates: [],
				jobList: [],
				nowTime: '',
				patrolDate: ''
			};
		},
		onShow() {

		},
		created() {

		},
		mounted() {
			this.getDateWithData();
			//this.getList();
			let now = new Date();
			this.nowTime = now.getHours() + ':' + now.getMinutes();
			this.patrolDate = formatDate(now);
			this.getPatrollingTaskData();
		},
		methods: {
			//打卡
			signIn(val) {

				if (val.statusDesign == '巡更打卡') {
					uni.navigateTo({
						url: 'taskDetails?id=' + val.id + '&patrolDate=' + this.patrolDate
					})
				}
			},
			showData(e) {
				this.patrolDate = formatDate(e)
				this.getPatrollingTaskData()
			},
			getList() {
				setTimeout(() => {
					let data = [{
							id: '12',
							patrolTaskName: '任务点1',
							startDate: '08:20',
							completeness: '100.0%',
							taskState: '未开始'
						},
						{
							id: '12',
							patrolTaskName: '任务点2',
							startDate: '08:20',
							completeness: '100.0%',
							taskState: '未开始'
						},
						{
							id: '12',
							patrolTaskName: '任务点3',
							startDate: '08:20',
							completeness: '100.0%',
							taskState: '未开始'
						},
						{
							id: '12',
							patrolTaskName: '任务点4',
							startDate: '18:20',
							completeness: '100.0%',
							taskState: '未开始'
						}
					];

					this.jobList = data;
					if (this.jobList.length > 0) {
						this.jobList.forEach((item) => {
							let now = new Date();
							let nowStr = now.getHours() + ':' + now.getMinutes();
							let timeStr = item.startDate;
							let obj = {
								statusDesign: '即将开始'
							};
							if (timeStr >= nowStr) {
								item = Object.assign(item, obj);
							} else {
								obj.statusDesign = '巡更打卡';

								item = Object.assign(item, obj);
							}
						});
					}
				}, 1000);
			},
			getPatrollingTaskData() {
				let data = {
					"patrolDate": this.patrolDate,
				}
				let now = new Date();

				getPatrollingTaskData(data).then(res => {
					if (res.code == 200) {
						this.jobList = res.rows
						if (this.jobList.length > 0) {
							this.jobList.forEach((item) => {

								let nowStr = (formatDate(now) + " " + now);
								let timeStr = (this.patrolDate + " " + item.startDate);


								let obj = {
									statusDesign: '即将开始'
								};
								if (timeStr > nowStr) {
									item = Object.assign(item, obj);
								} else {
									obj.statusDesign = '巡更打卡';

									item = Object.assign(item, obj);
								}
							});
						}
					}
				})
			},

			getDateWithData(val) {
				if(!val){
					
				let this_ = this
				var date = new Date;
				var year = date.getFullYear();
				var month = date.getMonth() + 1;
				month = (month < 10 ? "0" + month : month);
				var mydate = (year.toString() + '-' + month.toString());
				getDateWithData(mydate).then(res => {
					if (res.code == 200) {
						// this.signeddates = res.data
						let dateData = [];
						res.data.forEach(item => {
							let year = item.substring(0, 4)
							let month = item.substring(6, 7)
							let day = item.substring(8, item.length)
							let time = year + '-' + month + '-' + day
							dateData.push(time)
						})
						this.$nextTick(() => {
							this.signeddates = dateData
							console.log(this.signeddates,'[[[[[]]]]]')
						})

						this.$forceUpdate()
					}
				})
				}else{
					getDateWithData(val).then(res => {
						if (res.code == 200) {
							// this.signeddates = res.data
							let dateData = [];
							res.data.forEach(item => {
								let year = item.substring(0, 4)
								let month = item.substring(6, 7)
								let day = item.substring(8, item.length)
								let time = year + '-' + month + '-' + day
								dateData.push(time)
							})
							this.$nextTick(() => {
								this.signeddates = dateData
								console.log(this.signeddates,'[[[[[]]]]]')
							})
					
							this.$forceUpdate()
						}
					})
				}
			},
			
			//月份切换查询
			getMontn(val){
				console.log(val)
				this.getDateWithData(val)
			}
		}
	};
</script>

<style lang="scss" scoped>
	.body-item {
		.job-list {
			width: 95%;
			margin: 0 2.5%;
			padding: 20rpx;
			border-bottom: solid 1px #eee;
			position: relative;

			.job-title-box {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 10rpx;

				.job-status {
					color: #4f4f4f;
				}
			}

			.job-detail {
				color: #8f8f8f;
			}

			.job-btn-off,
			.job-btn-on {
				position: absolute;
				right: 7px;
				top: 6vh;
			}

			.job-btn-on {
				background-color: rgb(54, 127, 255);
				color: #eee;
			}
		}
	}
</style>