heshanApp/pages_watch/healthMonitoring/sleep.vue

<template>
	<view class="container">
		<uni-nav-bar fixed :border="false" :backgroundColor="`rgba(255,255,255,${opacity})`" title="睡眠监测" :statusBar="true"
			left-icon="left" @clickLeft="back"></uni-nav-bar>
		<image class="page-bg" src="@/static/images/pages_watch/images/sleep_top_bg.png" mode="widthFix"></image>
		<view class="container-body">
			<dateTimePicker @onChange="onChangeTime"/>
			<!-- 睡眠情况 -->
			<view class="box">
				<view class="echartbox-header" v-if="!loading &&sleepValue && sleepValue.length > 0">
					<view>{{touchValue.startTime.substring(5,16)}} 至 {{touchValue.endTime.substring(5,16)}}</view>
					<view class="echartbox-header-time">
						<text>{{touchValue.sleepStateText}}</text>
						<text class="echartbox-header-num">{{touchValue.hours}}</text>
						<text>小时</text>
						<text class="echartbox-header-num">{{touchValue.minutes}}</text>
						<text>分钟</text>
						<!-- <image src="@/static/images/pages_watch/icons/prompt_icon.png"></image> -->
					</view>
				</view>
				<view class="echartbox">
					<template v-if="!loading && sleepValue && sleepValue.length > 0">
						<view style="min-height: 446rpx;" v-show="type!==0">
							<qiun-data-charts type="column" :opts="opts" :chartData="chartData" tooltipFormat="sleepTooltip" @getIndex="clickCharts" />
						</view>
						<view style="min-height: 446rpx;" v-show="type==0">
							<sleepCharts ref="sleepCharts" :type="2" :sleepData="sleepData" :sleepValue="sleepValue" @handleItem="handleItem" />
						</view>
						<view class="legend border-line" v-show="!loading">
							<view class="legend-item">
								<view class="legend-dot" style="background-color: #8C37E6;"></view><text>深睡</text>
							</view>
							<view class="legend-item">
								<view class="legend-dot" style="background-color: #D138CF;"></view><text>浅睡</text>
							</view>
							<view class="legend-item">
								<view class="legend-dot" style="background-color: #F88082;"></view><text>快速眼动</text>
							</view>
							<view class="legend-item">
								<view class="legend-dot" style="background-color: #FDBD27;"></view><text>清醒</text>
							</view>
						</view>
					</template>
					<template v-else>
						<myEmpty />
					</template>
				</view>
				<view class="pie-echartbox" v-if="!loading && sleepValue && sleepValue.length > 0">
					<myRing class="myRing" ref="myRing" :info="ringData"/>
					<view class="ring-info">
						<view class="ring-infoitem">
							<view class="ring-infoitem-type type1">深睡</view>
							<view>{{convertMinutes(sleepData.deepSleep || 0)}}</view>
						</view>
						<view class="ring-infoitem">
							<view class="ring-infoitem-type type2">浅睡</view>
							<view>{{convertMinutes(sleepData.lightSleep || 0)}}</view>
						</view>
						<view class="ring-infoitem">
							<view class="ring-infoitem-type type3">快速眼动</view>
							<view>{{convertMinutes(sleepData.eyemoveSleep || 0)}}</view>
						</view>
						<view class="ring-infoitem">
							<view class="ring-infoitem-type type4">清醒</view>
							<view>{{convertMinutes(sleepData.weakSleep || 0)}}</view>
						</view>
					</view>
				</view>
				<view class="sleep-list">
					<view class="sleep-list-item">
						<view class="sleep-list-iteml">
							<view class="sleep-list-itemtitle">清醒次数 {{sleepData.weakTime || 0}} 次</view>
							<view>参考值：0-1 次</view>
						</view>
						<view class="sleep-list-itemr">
							<view :class="['sleep-list-tag',_interval(sleepData.weakTime,0,1)[1]]">
								{{_interval(sleepData.weakTime,0,1)[0]}}
							</view>
							<image src="@/static/images/pages_watch/icons/my_right_arrow_right_icon.png"></image>
						</view>
					</view>
					<view class="sleep-list-item">
						<view class="sleep-list-iteml">
							<view class="sleep-list-itemtitle">
								夜间睡眠 {{convertMinutes(sleepData.sleepTime || 0)}}
							</view>
							<view>参考值：6-10 小时</view>
						</view>
						<view class="sleep-list-itemr">
							<view :class="['sleep-list-tag',_interval(sleepData.sleepTime,360,600)[1]]">
								{{_interval(sleepData.sleepTime,360,600)[0]}}
							</view>
							<image src="@/static/images/pages_watch/icons/my_right_arrow_right_icon.png"></image>
						</view>
					</view>
					<view class="sleep-list-item">
						<view class="sleep-list-iteml">
							<view class="sleep-list-itemtitle">深睡连续性 {{sleepData.deepScore || 0}} 分</view>
							<view>参考值：70-100 分</view>
						</view>
						<view class="sleep-list-itemr">
							<view :class="['sleep-list-tag',_interval(sleepData.deepScore,70,100)[1]]">
								{{_interval(sleepData.deepScore,70,100)[0]}}
							</view>
							<image src="@/static/images/pages_watch/icons/my_right_arrow_right_icon.png"></image>
						</view>
					</view>
					<view class="sleep-list-item">
						<view class="sleep-list-iteml">
							<view class="sleep-list-itemtitle">深睡比例 {{sleepData.deepScale || 0}}%</view>
							<view>参考值：20-60%</view>
						</view>
						<view class="sleep-list-itemr">
							<view :class="['sleep-list-tag',_interval(sleepData.deepScale,20,60)[1]]">
								{{_interval(sleepData.deepScale,20,60)[0]}}
							</view>
							<image src="@/static/images/pages_watch/icons/my_right_arrow_right_icon.png"></image>
						</view>
					</view>
					<view class="sleep-list-item">
						<view class="sleep-list-iteml">
							<view class="sleep-list-itemtitle">浅睡比例 {{sleepData.lightScale || 0}}%</view>
							<!-- 小于55% ,&lt;微信开发者工具报错-->
							<view>参考值：{{'<'}}55% </view>
						</view>
						<view class="sleep-list-itemr">
							<view :class="['sleep-list-tag',_lightInterval(sleepData.lightScale,55)[1]]">
								{{_lightInterval(sleepData.lightScale,55)[0]}}
							</view>
							<image src="@/static/images/pages_watch/icons/my_right_arrow_right_icon.png"></image>
						</view>
					</view>
					<view class="sleep-list-item">
						<view class="sleep-list-iteml">
							<view class="sleep-list-itemtitle">快速眼动比例 {{sleepData.eyemoveScale || 0}}%</view>
							<view>参考值：10-30%</view>
						</view>
						<view class="sleep-list-itemr">
							<view :class="['sleep-list-tag',_interval(sleepData.eyemoveScale,10,30)[1]]">
								{{_interval(sleepData.eyemoveScale,10,30)[0]}}
							</view>
							<image src="@/static/images/pages_watch/icons/my_right_arrow_right_icon.png"></image>
						</view>
					</view>
					<view class="sleep-list-item">
						<view class="sleep-list-iteml">
							<view class="sleep-list-itemtitle">呼吸质量 {{sleepData.breathScore || 0}}分</view>
							<view>参考值：70-100 分</view>
						</view>
						<view class="sleep-list-itemr">
							<view :class="['sleep-list-tag',_interval(sleepData.breathScore,70,100)[1]]">
								{{_interval(sleepData.breathScore,70,100)[0]}}
							</view>
							<image src="@/static/images/pages_watch/icons/my_right_arrow_right_icon.png"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import dayjs from 'dayjs';
	import {sleepInfo} from "@/api/pages_watch/healthMonitoring.js"
	import myEmpty from "@/pages_watch/components/myEmpty/myEmpty.vue"
	import dateTimePicker from "@/pages_watch/components/dateTimePicker/dateTimePicker.vue"
	import sleepCharts from "@/pages_watch/components/sleepCharts/sleepCharts.vue"
	import myRing from "@/pages_watch/components/myRing/myRing.vue"

	export default {
		components: {
			myEmpty,
			dateTimePicker,
			sleepCharts,
			myRing
		},
		data() {
			return {
				type: 0, // 0日查询，1周查询
				opacity: 0,
				sleepData: {},
				ringData: {},
				loading: false,
				touchValue: {
					startTime: "",
					endTime: "",
					type: "",
					sleepStateText: "",
					hours: "",
					minutes: ""
				},
				sleepValue:[],
				chartData: {},
				opts: {
					 color: ['#8c37e6','#d138cf','#f88082','#fdbd27'],
					  padding: [0,5,0,15],       // 左侧留够周几文字宽度
					  enableScroll: false,
					  legend: { show: false },
					  dataLabel: false,             // 柱内标签已关
					  xAxis: {
						  fontSize: 12,
						  fontColor: '#ccc',
						  // labelCount: 7,
					  },
					  yAxis: {
					    disabled: true,
					    disableGrid: true,
					    data: [{
							min: 0,
							max: 1440
						}]
					  },
					  extra: {
					    column: {
					      type: 'stack',
					      width: 20,
					      barBorderRadius: [10,10,0,0],
					      labelPosition: 'none',
					      linearType: 'custom'
					    }
					  }
				},
				dateArray: [],
				watchSleepDataVoList: []
			}
		},
		computed: {
			_interval() {
				return (val, min, max)=>{
					const Num = Number(val || 0)
					if(val >= min && val <= max) {
						return ['正常','green']
					} else if(0 <= val && val < min) {
						return ['偏低','blue']
					} else if(val > max) {
						return ['偏高','red']
					} else {
						return ['','']
					}
				}
			},
			_lightInterval() {
				return (val, interval)=>{
					const Num = Number(val || 0)
					if(val > interval) {
						return ['异常','red']
					} else if(0 <= val && val < interval) {
						return ['正常','green']
					} else {
						return ['','']
					}
				}
			},
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			handleItem(item,type) {
				if(type=='init'){
					this.touchValue = item
				} else {
					let diff = Math.abs(new Date(item.startTime).getTime() - new Date(item.endTime).getTime());
					this.touchValue = {
						...item,
						hours: Math.floor(diff / (1000 * 60 * 60)),
						minutes: Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60))
					}
				}
			},
			// 分钟转换成小时分，type： 默认不传带文字，2，返回时分数字
			convertMinutes(val,type) {
			  if (val) {
				const seconds = val * 60
				const hours = Math.floor(seconds / 3600); // 3600秒等于1小时
				const minutes = Math.floor((seconds % 3600) / 60); // 余数部分除以60秒得到分钟数
				const hoursTxt = hours > 0 ? `${hours} 小时` : ''
				const minutesTxt = minutes > 0 ? `${minutes} 分钟` : ''
				if(type == 2) {
					return [hours,minutes]
				} else {
					return `${hoursTxt} ${minutesTxt}`
				}
			  } else {
				  if(type == 2) {
				  	return [0,0]
				  } else {
				  	return "--小时--分钟"
				  }
			  }
			},
			onChangeTime(time) {
				const param = {
					startTime: this.$timeFormat(time[0],'yyyy/mm/dd hh:MM:ss'),
					endTime: this.$timeFormat(time[1],'yyyy/mm/dd hh:MM:ss'),
					deviceId: uni.getStorageSync("deviceId") || ""
				}
				this.type = time[3]
				this.getServerData(param)
			},
			getServerData(param) {
				this.loading = true
				uni.showLoading({
					title: '加载中'
				})
				sleepInfo(param).then((res) => {
					this.loading = false
					uni.hideLoading();
					if (res.code == 200 && res.data) {
						this.sleepData = res.data
						this.sleepValue = res.data.sleepSection
						this.ringData = {
							deepPre: res.data.deepSleep,
							lightPre: res.data.lightSleep,
							eyemovePre: res.data.eyemoveSleep,
							weakPre: res.data.weakSleep,
						}
						this.$nextTick(()=>{
							if(this.sleepValue && this.sleepValue.length > 0) {
								if(this.type == 0) {
									this.$nextTick(()=>{
										this.$refs.sleepCharts.initData()
									})
								} else {
									this.getChartsData(param,res.data)
								}
								this.$refs.myRing.initData(this.ringData)
							}
						})
					}
				}).catch((err) => {
					this.loading = false
					uni.hideLoading();
				});
			},
			getChartsData(param,data) {
				const start = dayjs(param.startTime, 'YYYY/MM/DD HH:mm:ss');
				const end   = dayjs(param.endTime, 'YYYY/MM/DD HH:mm:ss');
			
				this.watchSleepDataVoList = data.watchSleepDataVoList
				const map = new Map(data.watchSleepDataVoList.map(item => [item.date, item]));
				
				// 3. 生成 7 天日期数组
				const dates = Array.from({ length: end.diff(start, 'day') + 1 }, (_, i) =>
				  start.add(i, 'day').format('YYYY-MM-DD')
				);
				this.dateArray = dates
				console.log(dates)
				// 4. 按维度抽 4 个数组
				const deepSleepArr   = dates.map(d => map.get(d)?.deepSleep   ?? 0);
				const eyemoveSleepArr = dates.map(d => map.get(d)?.eyemoveSleep ?? 0);
				const lightSleepArr  = dates.map(d => map.get(d)?.lightSleep  ?? 0);
				const weakSleepArr   = dates.map(d => map.get(d)?.weakSleep   ?? 0);
				console.log("结果==",deepSleepArr,eyemoveSleepArr,lightSleepArr,weakSleepArr)
				const allZero = [
				  ...deepSleepArr,
				  ...eyemoveSleepArr,
				  ...lightSleepArr,
				  ...weakSleepArr
				].every(val => val === 0);
				// 每分钟占多少像素（总高 20 px）
				// const TOTAL_H = 20;                 // 固定总高
			  // const maxMin = 378;
			  const maxTotal = Math.max(
			    ...data.watchSleepDataVoList.map(({ deepSleep, lightSleep, weakSleep, eyemoveSleep }) =>
			      (deepSleep ?? 0) + lightSleep + weakSleep + eyemoveSleep
			    )
			  );
			  this.opts.yAxis.data[0].max = maxTotal
				this.opts.xAxis.format = this.type == 1 ? '':"formatterDate"
			  this.opts.xAxis.labelCount = this.type == 1 ? '':7
			  console.log(maxTotal)
			  let res = {
			  	categories: this.type == 1 ? ['周一','周二','周三','周四','周五','周六','周日'] : this.dateArray,
			  	series: [
			  	  {
			  		name: "深睡",
					data:deepSleepArr,
			  	  },
			  	  {
			  		name: "浅睡",
					data:lightSleepArr,
			  	  },
			  	  {
			  			name: "快速动眼",
						data:eyemoveSleepArr,
			  	  },
			  	  {
			  			name: "清醒",
						data:weakSleepArr,
			  	  }
			  	]
			    };
			  this.chartData = JSON.parse(JSON.stringify(res));
			  const touchValue = {
			  	startTime: param.startTime,
			  	endTime: param.endTime,
			  	type: '',
			  	sleepStateText: '总睡眠',
			  	hours: "",
			  	minutes: ""
			  }
			  const all = (data.deepSleep||0) + (data.lightSleep||0) + (data.weakSleep||0 )+ (data.eyemoveSleep||0)
			  touchValue.hours = Math.floor(all / 60)
			  touchValue.minutes = all % 60
			  this.touchValue = touchValue
			  if(allZero) {
			  	this.sleepValue = []
			  }
			},
			clickCharts(e) {
				console.log(e)
				const currentIndex = e.currentIndex.index
				const date=this.dateArray[currentIndex]
				if(date>=0) {
					const res = this.watchSleepDataVoList.find(item=>item.date == date) || {}
						
					const touchValue = {
						startTime: res.startTime || date,
						endTime: res.endTime || date,
						type: '',
						sleepStateText: '总睡眠',
						hours: "",
						minutes: ""
					}
					const all = (res.deepSleep||0) + (res.lightSleep||0) + (res.weakSleep||0 )+ (res.eyemoveSleep||0)
					touchValue.hours = Math.floor(all / 60)
					touchValue.minutes = all % 60
					this.touchValue = touchValue
				}
			}
		},
		onPageScroll(e) {
			if (e.scrollTop <= 44) {
				this.opacity = e.scrollTop / 44 * 1
			} else if (e.scrollTop > 44) {
				this.opacity = 1
			}
		
		}
	}
</script>

<style lang="scss" scoped>
	@mixin u-flex($flexD, $alignI, $justifyC) {
		display: flex;
		flex-direction: $flexD;
		align-items: $alignI;
		justify-content: $justifyC;
	}
	.container {
		// padding: 0 24rpx;
		position: relative;
	}

	.page-bg {
		width: 100%;
		height: auto;
		position: absolute;
		top: 0;
		left: 0;
	}

	.container-body {
		position: relative;
		z-index: 1;
		padding: 0 24rpx
	}

	.box {
		padding: 24rpx;
		margin-bottom: 20rpx;
		box-sizing: border-box;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		position: relative;
	}

	.echartbox {
		// height: 694rpx;
		width: 100%;
		overflow: hidden;
		&-header {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #757575;
			text-align: center;

			&-time {
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
			}

			&-num {
				margin: 0 8rpx;
				font-family: DIN, DIN;
				font-weight: 500;
				font-size: 56rpx;
				color: #333333;
			}

			image {
				width: 32rpx;
				height: 32rpx;
				margin-left: 4rpx;
			}
		}
	}

	.legend {
		padding: 46rpx 0;
		box-sizing: border-box;
		@include u-flex(row, center, space-between);
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #757575;

		&-item {
			flex: 1;
			text-align: center;
			@include u-flex(row, center, center);
		}

		&-dot {
			width: 12rpx;
			height: 12rpx;
			border-radius: 50%;
			margin: 12rpx;
		}
	}

	.pie-echartbox {
		height: 302rpx;
		width: 100%;
		box-sizing: border-box;
		@include u-flex(row, center, space-between);
		.myRing {
			flex-shrink: 0;
		}
		.ring-info {
			flex: 1;
			margin-left: 60rpx;
			@include u-flex(column, flex-start, flex-start);
			// gap: 20rpx;
			margin-bottom: -20rpx;
			.ring-infoitem {
				width: 100%;
				margin-bottom: 20rpx;
				@include u-flex(row, center, space-between);
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #333333;
				&-type {
					width: 96rpx;
					flex-shrink: 0;
					padding-left: 20rpx;
					box-sizing: border-box;
					position: relative;
					&::after {
						position: absolute;
						left: 0;
						top: 50%;
						transform: translateY(-50%);
						content: "";
						width: 12rpx;
						height: 12rpx;
						border-radius: 50%;
					}
				}
				.type1::after {
					background: #8C37E6;
				}
				.type2::after {
					background: #D138CF;
				}
				.type3::after {
					background:#F88082;
				}
				.type4::after {
					background: #FDBD27;
				}
				view {
					flex: 1;
				}
			}
		}
	}

	.sleep-list {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #757575;

		&-item {
			width: 100%;
			margin-bottom: 16rpx;
			padding: 16rpx 24rpx 20rpx 24rpx;
			box-sizing: border-box;
			background: #F5F7FA;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			border: 2rpx solid #F5F7FA;
			@include u-flex(row, center, space-between);
		}

		&-itemtitle {
			font-weight: 500;
			font-size: 28rpx;
			color: #333333;
			margin-bottom: 10rpx;
		}

		&-itemr {
			flex-shrink: 0;
			@include u-flex(row, center, flex-start);

			image {
				height: 48rpx;
				width: 48rpx;
			}
		}

		&-tag {
			width: 96rpx;
			height: 50rpx;
			border-radius: 26rpx 26rpx 26rpx 26rpx;
			color: #FFFFFF;
			line-height: 50rpx;
			text-align: center;
		}

		.red {
			background: #FF5558;
		}

		.blue {
			background: #96CBFA;
		}

		.green {
			background: #52D087;
		}
	}
</style>