heshanApp/pages_watch/components/echart/sleep.vue

<template>
	<view class="bobox" :style="boxstyle" v-if="!isEmpty">
		<view class="box-title">
			<view class="box-title-left">睡眠趋势</view>
		</view>
		<view class="loading" v-show="loading"><sleepLoading /></view>
		<view class="echartbox-header" v-if="this.sleepValue && this.sleepValue.length > 0">
			<view v-if="touchValue.startTime==touchValue.endTime">{{touchValue.startTime||'--'}}</view>
			<view v-else>{{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||0}}</text>
				<text>小时</text>
				<text class="echartbox-header-num">{{touchValue.minutes||0}}</text>
				<text>分钟</text>
				<!-- <image src="@/static/images/pages_watch/icons/prompt_icon.png"></image> -->
			</view>
		</view>
		<view class="echartbox">
			<template v-if="this.sleepValue && this.sleepValue.length > 0">
				<view style="min-height: 446rpx;" v-show="type==1">
					<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>
</template>

<script>
	import dayjs from 'dayjs';
	import sleepLoading from "@/pages_watch/components/sleepCharts/sleepLoading.vue"
	import sleepCharts from "@/pages_watch/components/sleepCharts/sleepCharts.vue";
	import myEmpty from "@/pages_watch/components/myEmpty/myEmpty.vue";
	export default {
		name: "sleep",
		props: {
			loading: {
				type: Boolean,
				default: false
			},
			boxstyle: {
				type: Object,
				default: () => {}
			}
		},
		components: {
			sleepCharts,
			myEmpty,
			sleepLoading
		},
		data() {
			return {
				isEmpty: false,
				type: 0, // 0日查询，1周查询
				sleepData: {},
				touchValue: {
					startTime: "",
					endTime: "",
					type: "",
					sleepStateText: "",
					hours: "",
					minutes: ""
				},
				sleepValue:[],
				chartData: {},
				opts: {
					 color: ['#8c37e6','#d138cf','#f88082','#fdbd27'],
					  padding: [0,0,0,0],       // 左侧留够周几文字宽度
					  enableScroll: false,
					  legend: { show: false },
					  dataLabel: false,             // 柱内标签已关
					  xAxis: {},
					  yAxis: {
					    disabled: true,
					    disableGrid: true,
					    data: [{
							min: 0,
							max: 378
						}]
					  },
					  extra: {
					    column: {
					      type: 'stack',
					      width: 20,
					      barBorderRadius: [10,10,0,0],
					      labelPosition: 'none',
					      linearType: 'custom'
					    }
					  }
				},
				dateArray: [],
				watchSleepDataVoList: []
			}
		},
		methods: {
			setChartData(data,type,param) {
				this.type = type || 0
				this.sleepValue = data.sleepSection || []
				// console.log(JSON.stringify(this.sleepValue))
				if(this.sleepValue && this.sleepValue.length > 0) {
					if(this.type == 1) {
						this.getServerData(param,data)
					} else {
						this.$nextTick(()=>{
							this.$refs.sleepCharts.initData()
						})
					}
				} else {
					this.isEmpty = true
				}
			},
			handleItem(item) {
				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))
				}
			},
			getServerData(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
			  console.log(maxTotal)
			  let res = {
			  	categories: ['周一','周二','周三','周四','周五','周六','周日'],
			  	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)
			  console.log(all)
			  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]
				const res = this.watchSleepDataVoList.find(item=>item.date == date) || {}
				console.log("查找",res,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
			}
		}
	}
</script>

<style lang="scss" scoped>
	@mixin u-flex($flexD, $alignI, $justifyC) {
		display: flex;
		flex-direction: $flexD;
		align-items: $alignI;
		justify-content: $justifyC;
	}
	.loading {
		height: 90%;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 42rpx;
		left: 0;
		background-color: #fff;
		z-index: 99;
	}
	.bobox {
		background: #fff;
		position: relative;
	}
	.box-title {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #757575;
		@include u-flex(row, center, space-between);
	
		&-left {
			font-weight: 500;
			font-size: 36rpx;
			color: #222222;
			line-height: 42rpx;
		}
	
		&-right {
			@include u-flex(row, center, flex-start);
	
			image {
				height: 48rpx;
				width: 48rpx;
			}
		}
	}
	.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;
		}
	}
</style>