hbj_app/pages/indexpage/fireMan/fireMan.vue

<template>
	<view>
		<u-navbar bgColor="#ffffff" :placeholder="true" titleStyle="font-weight:600" title="消防员排班记录" :autoBack="true">
			<view slot="right" style="display: flex;align-items: center;">
				<!-- <view @click="gotoTiaoBan" v-if="showTiaoBan"
					style="display: flex;flex-direction: column;align-items: center;justify-content: center;margin-right: 40rpx;">
					<image src="../../../static/images/fireman/tiaoban.png" style="height: 32rpx;width: 32rpx;"></image>
					<view style="font-size: 18rpx;font-weight: 600;color: #1296db;">调班</view>
				</view>
				<view @click="gotoShenPi" v-if="showTiaoBan"
					style="display: flex;flex-direction: column;align-items: center;justify-content: center;">
					<image src="../../../static/images/fireman/shenpi.png" style="height: 32rpx;width: 32rpx;"></image>
					<view style="font-size: 18rpx;font-weight: 600;color: #1296db;">审批记录</view>
				</view> -->
				<image src="../../../static/images/fireman/list.png" style="height: 36rpx;width: 36rpx;"
					@click="gotoList"></image>
			</view>
		</u-navbar>
		<!-- 日历 -->
		<view>
			<lunc-calendar ref="calendar" :showLunar="true" :showMonthBg="true" :showShrink="true" :signList="signList"
				@dayChange="dayChange" @monthChange="monthChange" @shrinkClick="shrinkClick"></lunc-calendar>
		</view>
		<!-- 排班人员列表 -->
		<view class="paibanBox" :style="fullHeight" ref="listInfo">
			<view class="paiban">
				<!-- 头部 -->
				<view class="head">
					<view class="headTime" style="font-size: 30rpx;">值班人员列表</view>
					<view class="headTime">{{nowDate.substr(5)}} | {{nowWeek}}</view>

					<!-- <view class="operate"> -->
					<!-- <view class="opInfo" @click="gotoTiaoBan" v-if="showTiaoBan">调班</view> -->
					<!-- <view class="opInfo" @click="gotoShenPi" v-if="showTiaoBan">审批记录</view> -->
					<!-- <view class="opInfo" @click="gotoPaiBan">开始排班</view> -->
					<!-- </view> -->
				</view>
				<!-- 值班人员数组 -->
				<view class="paibanInfo">
					<view v-if="dutyList.length === 0" class="listName" style="display: flex;flex-direction: column;align-items: center;justify-content: c
						;margin-top: 100rpx;">
						<image src="../../../static/images/none.png" style="width: 316rpx;height: 181rpx;"></image>
						<span style="color: #9f9f9f;margin-top: 30rpx;">暂无值班人员~</span>
					</view>
					<view class="list" v-for="(item,index) in dutyList" :key="index" v-else>
						<view class="line"></view>
						<view>
							<view class="listName"><span style="color: #737980;">姓名：</span>{{item.dutyUserName}}
								<image src="../../../static/images/fireman/ban.png"
									style="width: 35rpx;height: 35rpx;margin-left: 15rpx;">
								</image>
							</view>
							<view class="listName">
								<span style="color: #737980;">电话：</span><span>{{item.text1}}</span>
							</view>
						</view>
						<view>
							<image src="../../../static/images/fireman/touxiang.png"
								style="width: 68rpx;height: 72rpx;"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		listFiremenJRZBData,
		listFiremen
	} from '@/api/fireman/index.js';
	// 本人的值班信息
	import {
		listDutyLogGoupUser
	} from "@/api/fireman/dutylog.js"
	import {
		listDutyLogForCalendar,
		listForApp,
		listCalendarForApp
	} from "@/api/fireman/dutylog.js"
	import {
		getInfo
	} from "@/api/login.js"
	/**
	 * 获取任意时间
	 */
	function getDate(date, AddDayCount = 0) {
		if (!date) {
			date = new Date()
		}
		if (typeof date !== 'object') {
			date = date.replace(/-/g, '/')
		}
		const dd = new Date(date)

		dd.setDate(dd.getDate() + AddDayCount) // 获取AddDayCount天后的日期

		const y = dd.getFullYear()
		const m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1 // 获取当前月份的日期，不足10补0
		const d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate() // 获取当前几号，不足10补0
		return {
			fullDate: y + '-' + m + '-' + d,
			year: y,
			month: m,
			date: d,
			day: dd.getDay()
		}
	}
	export default {
		data() {
			return {
				showTiaoBan: true, //调班按钮显示 是否是消防员
				signList: [], //日历上显示数组
				nowDate: '', //今日日期，截取之后
				nowWeek: "", //今日周几
				showCalendar: false,
				info: {
					lunar: true,
					range: true,
					insert: false,
					selected: []
				},
				year: '',
				month: "",
				day: "",
				dutyList: [], //值班信息数组
				listHeight: '', //日历高度
				year: '',
				month: '',
				day: '',
				fullHeight: ''
			}
		},
		onReady() {
			uni.createSelectorQuery().select('.uni-calendar').boundingClientRect(data => {
				this.listHeight = data * 2 + 'rpx';
			}).exec()

		},
		onShow() {
			// this.getList()
		},
		mounted() {
			this.getInfo()
			// 获取今日周几
			this.nowWeek = this.getWeekDate();
			// 获取今日日期
			this.nowDate = getDate(new Date(), 0).fullDate;
			if (this.nowDate) {
				this.splitDate(this.nowDate)
				this.getDay()
			}
			let height = document
				.querySelector(".paibanBox")
				.getBoundingClientRect().top;
			this.fullHeight = 'height:' + "calc(100vh - " + height * 2 +
				"rpx)"
			console.log(this.fullHeight, "高度");
		},
		methods: {
			gotoList() {
				this.$tab.navigateTo('/pages/indexpage/fireMan/list/list')
			},
			// 获取用户信息 判断是否是消防员
			getInfo() {
				getInfo().then(res => {
					let role = res.data.roles.findIndex(item => item == "firemen")
					if (role == '-1') {
						this.showTiaoBan = false;
					}
				})
			},
			// 日历分割
			splitDate(date) {
				this.year = date.slice(0, 4)
				this.month = date.slice(5, 7)
				this.day = date.slice(8, 10)
				// console.log("今日日期");
				this.getMonth();
				this.getDay();
				// this.getSelfMonth()
			},
			// 获取自己的日历上的值班计划
			getSelfMonth() {
				listDutyLogGoupUser().then(res => {
					console.log(res, "自己的值班信息");
				})
			},
			// 获取当月日历上的的演练计划
			getMonth() {
				listCalendarForApp({
					year: this.year,
					month: this.month
				}).then(res => {
					this.signList = res
					console.log(res, "我的值班信息");
				})
			},
			getDay() {
				listForApp({
					dutyYear: this.year,
					dutyMonth: this.month,
					dutyDay: this.day
				}).then(res => {
					// console.log(res, "点击返回值班信息");
					this.dutyList = res;

				})
			},
			dayChange(dayInfo) { // 点击日期
				let date = JSON.parse(JSON.stringify(dayInfo))
				this.splitDate(date.date)
				this.nowDate = date.date
				var names = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
				this.nowWeek = names[date.week]
				console.log("点击日期", JSON.parse(JSON.stringify(dayInfo)));
			},
			monthChange(monthInfo) { // 切换月份
				let date = JSON.parse(JSON.stringify(monthInfo))
				// this.getMonth(date.year, date.month)
				// console.log("切换月份", date);
			},
			shrinkClick(type) {
				// console.log("当前状态", type);
			},
			gotoTiaoBan() {
				this.$tab.navigateTo('/pages/indexpage/fireMan/tiaoban/tiaoban')
			},
			// 跳转审批页面
			gotoShenPi() {
				this.$tab.navigateTo('/pages/indexpage/fireMan/shenpi/shenpi')
			},
			// 获取选中日期值班人员
			getList() {
				setTimeout(() => {
					listDutyLog({
						dutyYear: this.year,
						dutyMonth: this.month,
						dutyDay: this.day
					}).then(res => {
						// console.log(res, "值班信息");
						this.dutyList = res.rows;

					})
				}, 100)
			},
			// 获取今日周几，页面进入显示
			getWeekDate() {
				var date = new Date();
				var day = date.getDay();
				var names = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
				return names[day];
			},
			// 跳转排班页面
			gotoPaiBan() {
				this.$tab.navigateTo('/pages/indexpage/fireMan/paiban/paiban')
			},
			open() {
				this.$refs.calendar.open()
			},
			close() {
				console.log('弹窗关闭');
			},
			change(e) {
				// console.log('change 返回:', e)
				// 点击切换日期显示
				this.nowWeek = e.lunar.ncWeek;
				this.nowDate = e.fulldate;
				this.splitDate(this.nowDate);
				// 模拟动态打卡
				// if (this.info.selected.length > 5) return
				// this.info.selected.push({
				// 	date: e.fulldate,
				// 	info: '打卡'
				// })
			},
			confirm(e) {
				console.log('confirm 返回:', e)
			},
			monthSwitch(e) {
				console.log('monthSwitchs 返回:', e)
			}
		}
	}
</script>

<style lang="scss">
	// 日历日期
	/deep/.uni-calendar__header-text {
		font-weight: bolder;
		color: #454545;
		font-size: 30rpx;
	}

	// 选中日期
	/deep/.uni-calendar-item--isDay {
		background-color: #8792df !important;
		border-radius: 15rpx;
	}

	page {
		box-sizing: border-box;
		background-color: #fff;

		.paibanBox {
			width: 100vw;
			// background-color: #f0f1f5;
			height: calc(100vh - 900rpx);
			box-shadow: 0px 4rpx 12rpx 0px rgba(0, 37, 105, 0.1);
			padding: 10rpx 40rpx;

			.paiban {
				width: 100%;
				height: 100%;
				background: #F5F6FA;
				border-radius: 40rpx 40rpx 0rpx 0rpx;
				padding: 20rpx;

				.head {
					display: flex;
					justify-content: space-between;
					align-items: center;
					border-bottom: 4rpx solid #f0f1f5;
					padding-bottom: 13rpx;

					.headTime {
						font-family: DINPro;
						font-weight: 500;
						font-size: 34rpx;
						color: #333333;
						line-height: 40rpx;
					}

					.operate {
						display: flex;
						align-items: center;

						.opInfo {
							color: #8792df;
							background-color: #e6e9fd;
							padding: 0 15rpx;
							font-weight: 600;
							border-radius: 10rpx;
							margin-left: 20rpx;
							height: 55rpx;
							line-height: 55rpx;
						}
					}
				}

				.paibanInfo {
					padding: 15rpx 0;
					overflow: scroll;
					height: 90%;

					.line {
						width: 6rpx;
						height: 75rpx;
						background: #639CDE;
						border-radius: 3rpx;
						margin-right: 31rpx;
					}

					.list {
						padding: 24rpx;
						display: flex;
						align-items: center;
						margin-bottom: 15rpx;
						background: #E5EEF7;
						border-radius: 20rpx;

						.listName {
							font-weight: bolder;
							color: #454545;
							font-size: 30rpx;
							margin-right: 50rpx;
							display: flex;
							align-items: center;
						}

						.status {
							color: #fff;
							background-color: #f5a233;
							padding: 0 15rpx;
							border-radius: 10rpx;
							margin-left: 20rpx;
							height: 42rpx;
							line-height: 42rpx;
							font-size: 26rpx !important;
						}
					}

					.listName {
						font-weight: bolder;
						color: #454545;
						font-size: 30rpx;
						margin-right: 50rpx;
					}

				}
			}
		}
	}
</style>