版本大改

pages/data/data.js

@@ -906,6 +906,42 @@ function updateApnea(data1, data2, startSleepTime, endSleepTime, that) {
 
 //深浅睡眠
 
+function timestampToHHMM(timestamp) {
+	let date = new Date(timestamp); // 注意：JavaScript中的Date是以毫秒为单位的
+	let hours = date.getHours().toString().padStart(2, '0'); // 获取小时数，并补零
+	let minutes = date.getMinutes().toString().padStart(2, '0'); // 获取分钟数，并补零
+	return hours + ':' + minutes;
+}
+
+// 自定义图形
+function renderItem(params, api) {
+	var categoryIndex = api.value(0);
+	var startX = api.coord([api.value(1), categoryIndex])[0];
+	var endX = api.coord([api.value(2), categoryIndex])[0];
+	var centerY = api.coord([
+		api.value(1) + (api.value(2) - api.value(1)) / 2,
+		categoryIndex
+	])[1]; // 取中间点的y坐标
+	var height =  api.size([0, 1])[1] * 0.6;
+	var width = endX - startX;
+
+	// 创建一个矩形
+	var rect = {
+		x: startX,
+		y: centerY - height / 2,
+		r: 2,
+		width: width,
+		height: height
+	};
+
+	// 返回的图形对象
+	return {
+		type: 'rect',
+		shape: rect,
+		style: api.style()
+	};
+}
+
 function initChartTimeWaterfall(canvas, width, height, dpr) {
 	// 在这里初始化图表
 	const chart = echarts.init(canvas, null, {
@@ -924,86 +960,69 @@ function initChartTimeWaterfall(canvas, width, height, dpr) {
 };
 
 
-function setTimeWaterfallOption(chart, data1 = [], data2 = []) {
-	var option = option = {
-		tooltip: {
-			show: true,
-			trigger: 'axis',
-			formatter: function (param) {
-				return `${param[0].value }`
-			}
-		},
-		dataZoom: [
-			{ // 第一个 dataZoom 组件
-				type: 'inside',
-			},
-		],
-		grid: {
-			top: '10rpx',
-			left: '10rpx',
-			right: '40rpx',
-			bottom: 0,
-			containLabel: true
-		},
-		xAxis: {
-			type: 'category',
-			data: data1,//字符串单位数组
-			axisLabel: {
-				color: '#6C6970',// 设置 x 轴标签颜色为白色  
-				fontSize: 12,
-				interval:0,
-				fontWeight: 'bolder',
-				rich: {
-					units: {//单位就富文本了
-						fontSize: 10,
-						fontWeight: 400,
-						color: '#6C6970'
-					},
+function setTimeWaterfallOption(chart, startTime = new Date().getTime(), data = [], categories = ['深睡', '中睡', '浅睡', '清醒']) {
+	var option =
+		option = {
+			tooltip: {
+				show:true,
+				formatter: function (params) {
+					return params.marker + params.name + ': ' + params.value[3] + ' m';
 				}
 			},
-			boundaryGap: false,
-			splitLine: {
-				show: false, // 是否显示刻度线  
-
-			},
-			axisTick: {
-				// 不显示刻度线  
-				show: false
+			dataZoom: [
+				{
+					type: 'inside',
+					filterMode: 'weakFilter'
+				}
+			],
+			grid: {
+				top: 0,
+				bottom: 0,
+				height:210,
+				containLabel: false
 			},
-			axisLine: {
-				// 不显示轴线  
-				show: false
-			}
-		},
-		yAxis: {
-			type: 'value',
-			min: 0,
-			show: false,
-		},
-		series: [{
-			barWidth:46,
-			itemStyle: {
-				color: function (params) {
-					// 假设我们有一个颜色数组  
-					var colorList = ['#FDEFA6', '#F1E9FE', '#D8C8FE', '#AB81FF']
-					// 根据数据索引选择颜色  
-					return colorList[params.dataIndex % colorList.length];
+			xAxis: {
+				type: 'value',  
+				scale: true,
+				splitLine: {
+					show: false // 是否显示刻度线
 				},
-				borderRadius: [2]
+				axisLabel: {
+					color: '#6C6970',// 设置 x 轴标签颜色为白色  
+					fontSize: 10,
+					formatter: function (val) {
+						return timestampToHHMM(val || startTime);
+					}
+				}
 			},
-			type: 'bar',
-			stack: 'a',
-			data: data2,//分钟数数组
-		}]
-	};
+			yAxis: {
+				show: false,
+				data: categories
+			},
+			series: [
+				{
+					type: 'custom',
+					renderItem: renderItem,
+					itemStyle: {
+						opacity: 1
+					},
+					encode: {
+						x: [1, 2],
+						y: 0
+					},
+					data: data
+				}
+			]
+		};
+
 
 	chart.setOption(option, true);
 }
 
-function updateTimeWaterfall(data1, data2, that) {
-	console.log("data1========>", data1);
+function updateTimeWaterfall(startTime = new Date().getTime(), data, that) {
+	console.log("updateTimeWaterfall========>", data);
 	if (chartTimeWaterfall) {
-		setTimeWaterfallOption(chartTimeWaterfall, data1, data2);
+		setTimeWaterfallOption(chartTimeWaterfall, startTime, data);
 	} else {
 		that.selectComponent('#chartTimeWaterfall-dom').init((canvas, width, height, dpr) => {
 			const chart = echarts.init(canvas, null, {
@@ -1012,7 +1031,7 @@ function updateTimeWaterfall(data1, data2, that) {
 				devicePixelRatio: dpr // new
 			});
 			canvas.setChart(chart);
-			setTimeWaterfallOption(chart, data1, data2);
+			setTimeWaterfallOption(chart, startTime, data);
 
 			// 将图表实例绑定到 this 上，可以在其他成员函数（如 dispose）中访问
 			chartTimeWaterfall = chart;
@@ -2064,7 +2083,7 @@ Page({
 		rsleep_arr_all_New: [],//睡眠状态数据集合,0-清醒,10-浅睡,20-中睡,30-深睡
 		durationData: [], //睡眠时长
 		sleep_duration: [], //睡眠和清醒对比
-		rdeep_durationFormatA:{},
+		rdeep_durationFormatA: {},
 		rdeep_duration: 0,
 		rlight_duration: 0,
 		rin_duration: 0,
@@ -2100,6 +2119,7 @@ Page({
 
 		rsn: '',
 		rdate: '',
+		total_duration: 0,
 		rtotal_duration: 0,
 		rinbed_duration: 0,
 		rgobed_time: 0,
@@ -2134,6 +2154,7 @@ Page({
 		rdeep_duration_efficiency: '',//深睡比例
 		rlight_duration_efficiency: '',//浅睡比例
 		rin_duration_efficiency: '',//中睡比例
+		rawake_duration_efficiency: '',//清醒比例
 		isLoading: false,
 
 		ec7: '',
@@ -2560,7 +2581,7 @@ Page({
 		canvas.setChart(chart);
 		flushChart(that.data.target_sleep_list)
 	},
-// 心脏 系统
+	// 心脏 系统
 	initCardiacSystem(reportId) {
 		var that = this;
 		wx.request({
@@ -2791,14 +2812,16 @@ Page({
 									try {
 										let rdt_arrTemp = [];
 										if (ress.data.results.rrh_arr) {
-											rdt_arrTemp = that.splitN(ress.data.results.rdt_arr.split(","), 100);
+											// rdt_arrTemp = that.splitN(ress.data.results.rdt_arr.split(","), 100);
+											rdt_arrTemp = ress.data.results.rdt_arr.split(",");
 										}
-										// console.log('深浅睡眠11111=======' + JSON.stringify(rdt_arrTemp));
+										console.log('深浅睡眠11111=======' + JSON.stringify(rdt_arrTemp));
 										let rsleep_arr_Temp = [];
 										if (ress.data.results.rsleep_arr) {
-											rsleep_arr_Temp = that.splitN(ress.data.results.rsleep_arr.split(","), 100);
+											// rsleep_arr_Temp = that.splitN(ress.data.results.rsleep_arr.split(","), 100);
+											rsleep_arr_Temp = ress.data.results.rsleep_arr.split(",");
 										}
-										// console.log('深浅睡眠11111=======' + JSON.stringify(rsleep_arr_Temp));
+										console.log('深浅睡眠222222=======' + JSON.stringify(rsleep_arr_Temp));
 										that.setData({
 											rdt_arrNew: rdt_arrTemp,
 											rsleep_arr: rsleep_arr_Temp,
@@ -2806,10 +2829,10 @@ Page({
 											rlight_duration: ress.data.results.rlight_duration,
 											rin_duration: ress.data.results.rin_duration,
 											rawake_duration: ress.data.results.rawake_duration,
-											rdeep_durationFormat: that.convertTimeToHoursAndMinutes(ress.data.results.rdeep_duration, 1),
-											rlight_durationFormat: that.convertTimeToHoursAndMinutes(ress.data.results.rlight_duration, 1),
-											rin_durationFormat: that.convertTimeToHoursAndMinutes(ress.data.results.rin_duration, 1),
-											rawake_durationFormat: that.convertTimeToHoursAndMinutes(ress.data.results.rawake_duration, 1),
+											rdeep_durationFormat: that.convertTimeToHoursAndMinutes(ress.data.results.rdeep_duration),
+											rlight_durationFormat: that.convertTimeToHoursAndMinutes(ress.data.results.rlight_duration),
+											rin_durationFormat: that.convertTimeToHoursAndMinutes(ress.data.results.rin_duration),
+											rawake_durationFormat: that.convertTimeToHoursAndMinutes(ress.data.results.rawake_duration),
 										});
 
 										console.log('ress.data.results.rdeep_duration=' + ress.data.results.rdeep_duration);
@@ -2817,16 +2840,17 @@ Page({
 										console.log('ress.data.results.rin_duration=' + ress.data.results.rin_duration);
 										console.log('ress.data.results.rawake_duration=' + ress.data.results.rawake_duration);
 
-									
-										updateTimeWaterfall([that.convertTimeToHoursAndMinutes(ress.data.results.rawake_duration, 2),
-											that.convertTimeToHoursAndMinutes(ress.data.results.rin_duration, 2),
-											that.convertTimeToHoursAndMinutes(ress.data.results.rlight_duration, 2),
-											that.convertTimeToHoursAndMinutes(ress.data.results.rdeep_duration, 2)],
-											[   ress.data.results.rawake_duration || 0,
-												ress.data.results.rin_duration || 0,
-												ress.data.results.rlight_duration || 0, 
-												ress.data.results.rdeep_duration || 0,
-											], that)
+
+										that.calculateTheDurationOfDeepSleep();
+										// updateTimeWaterfall([that.convertTimeToHoursAndMinutes(ress.data.results.rawake_duration, 2),
+										// 	that.convertTimeToHoursAndMinutes(ress.data.results.rin_duration, 2),
+										// 	that.convertTimeToHoursAndMinutes(ress.data.results.rlight_duration, 2),
+										// 	that.convertTimeToHoursAndMinutes(ress.data.results.rdeep_duration, 2)],
+										// 	[   ress.data.results.rawake_duration || 0,
+										// 		ress.data.results.rin_duration || 0,
+										// 		ress.data.results.rlight_duration || 0, 
+										// 		ress.data.results.rdeep_duration || 0,
+										// 	], that)
 									} catch (error) {
 										console.error(error);
 									}
@@ -3839,6 +3863,7 @@ Page({
 										let rdeep_duration_efficiency_temp = ress.data.results.rtotal_duration ? (Math.ceil(((ress.data.results.rdeep_duration ? parseFloat(ress.data.results.rdeep_duration) : 0) / ress.data.results.rtotal_duration) * 100) + '%') : '%'
 										let rlight_duration_efficiency_temp = ress.data.results.rtotal_duration ? (Math.ceil(((ress.data.results.rlight_duration ? parseFloat(ress.data.results.rlight_duration) : 0) / ress.data.results.rtotal_duration) * 100) + '%') : '%'
 										let rin_duration_efficiency_temp = ress.data.results.rtotal_duration ? (Math.ceil(((ress.data.results.rin_duration ? parseFloat(ress.data.results.rin_duration) : 0) / ress.data.results.rtotal_duration) * 100) + '%') : '%'
+										let rawake_duration_efficiency_temp = ress.data.results.rtotal_duration ? (Math.ceil(((ress.data.results.rawake_duration ? parseFloat(ress.data.results.rawake_duration) : 0) / ress.data.results.rtotal_duration) * 100) + '%') : '%'
 
 
 										let sleep_durationTemp = [];
@@ -3905,7 +3930,7 @@ Page({
 											routbed_arr: ress.data.results.routbed_arr ? ress.data.results.routbed_arr.split(',') : [],
 											rmove_arr: ress.data.results.rmove_arr ? ress.data.results.rmove_arr.split(',') : [],
 											rhxstop_arr: ress.data.results.rhxstop_arr ? ress.data.results.rhxstop_arr.split(',') : [],
-											rsleep_arr: ress.data.results.rsleep_arr ? ress.data.results.rsleep_arr.split(',') : [],
+											rsleep_arr: ress.data.results.rsleep_arr ? ress.data.results.rsleep_arr.split(',') : [],//睡眠状态数据集合,0-清醒,10-浅睡,20-中睡,30-深睡
 
 											rsnoring_arrFrequency: that.getFrequency(ress.data.results.rsnoring_arr ? ress.data.results.rsnoring_arr.split(',') : [], 1),
 											routbed_arrFrequency: that.getFrequency(ress.data.results.routbed_arr ? ress.data.results.routbed_arr.split(',') : [], 0),
@@ -3925,6 +3950,7 @@ Page({
 
 											rsn: ress.data.results.rsn,
 											rdate: ress.data.results.rdate,
+											total_duration: ress.data.results.rtotal_duration,
 											rtotal_duration: that.convertTimeToHoursAndMinutes(ress.data.results.rtotal_duration),//睡眠总时长,单位小时分钟
 											rinbed_duration: that.convertTimeToHoursAndMinutes(ress.data.results.rinbed_duration),//在床时长,单位小时分钟
 											rgobed_time: ress.data.results.rgobed_time,//上床时间
@@ -3951,6 +3977,7 @@ Page({
 											rdeep_duration_efficiency: rdeep_duration_efficiency_temp,
 											rlight_duration_efficiency: rlight_duration_efficiency_temp,
 											rin_duration_efficiency: rin_duration_efficiency_temp,
+											rawake_duration_efficiency: rawake_duration_efficiency_temp,
 											pushReportId: ress.data.results.rdid,
 
 											rrs_duration: that.convertTimeToHoursAndMinutes(ress.data.results.rrs_duration ? ress.data.results.rrs_duration.toString() : '0'),
@@ -4066,7 +4093,7 @@ Page({
 		var formattedTime = '';
 		if (flag == 1) {
 			formattedTime = formattedHours + 'H ' + formattedMinutes + 'M';
-		} else if(flag == 2) {
+		} else if (flag == 2) {
 			formattedTime = formattedHours + '{units|小时}' + formattedMinutes + '{units|分钟}';
 		} else {
 			formattedTime = {
@@ -4100,7 +4127,7 @@ Page({
 				}
 
 				var resDataSn = res.data.results
-				console.log('resDataSn====' + JSON.stringify(resDataSn))
+				// console.log('resDataSn====' + JSON.stringify(resDataSn))
 				var tt = 0;
 				resDataSn.forEach(function (item, index) {
 					wx.request({
@@ -4126,9 +4153,9 @@ Page({
 							json.text = item.rdate;
 							json.children = resDataItem;
 							sourceFourthTemp.push(json);
-							console.log('sourceFourthTemp0=' + JSON.stringify(sourceFourthTemp));
+							// console.log('sourceFourthTemp0=' + JSON.stringify(sourceFourthTemp));
 							if (tt == (resDataSn.length - 1)) {
-								console.log('sourceFourthTemp=' + JSON.stringify(sourceFourthTemp));
+								// console.log('sourceFourthTemp=' + JSON.stringify(sourceFourthTemp));
 
 								// 使用 sort 方法进行排序
 								sourceFourthTemp.sort(function (a, b) {
@@ -4144,7 +4171,7 @@ Page({
 									// 如果日期相等，返回 0  
 									return 0;
 								});
-								console.log('sourceFourthTemp1=' + JSON.stringify(sourceFourthTemp));
+								// console.log('sourceFourthTemp1=' + JSON.stringify(sourceFourthTemp));
 								//初始化弹出面板
 								var array = that.data.arrayFourth;
 								array[0] = sourceFourthTemp;
@@ -4181,6 +4208,134 @@ Page({
 		let fontSize = clientWidth / 1920; // 假设以1920为基准宽度  
 		return res * fontSize;
 	},
+	calculateTheDurationOfDeepSleep() {
+		var that = this;
+		var totalDuration = this.data.total_duration;
+		var timePeriod = this.data.rdt_arrNew;
+		var sleepData = this.data.rsleep_arr;//睡眠状态数据集合,0-清醒,10-浅睡,20-中睡,30-深睡
+
+		console.log("睡眠总时长=>", totalDuration);
+		console.log("睡眠时间片段=>", timePeriod);
+		console.log("睡眠时间片段=>", timePeriod.length);
+		console.log("睡眠数据=>", sleepData);
+		console.log("睡眠数据=>", sleepData.length);
+		var awakeColor = [{ offset: 0, color: '#F7FCBE' }, { offset: 1, color: '#FDBE25' }];;
+		var lightSleepColor = [{ offset: 0, color: '#FDBE25' }, { offset: 1, color: '#FD7778' }];
+		var sleptInColor = [{ offset: 0, color: '#FD7778' }, { offset: 1, color: '#AA3CFF' }];
+		var deepSleepColor = [{ offset: 0, color: '#AA3CFF' }, { offset: 1, color: '#7C3CFF' }];
+		// var linearGradient = new echarts.graphic.LinearGradient(
+		// 	0, 0, 0, 1, // 方向从左到右  
+		// 	[
+		// 		{ offset: 0, color: '#FDBE25' }, // 渐变开始的颜色  
+		// 		{ offset: 1, color: '#FD7778' } // 渐变结束的颜色  
+		// 	]
+		// );
+		// var item = {
+		// 	name: { name: '清醒', color: '#7b9ce1' },
+		// 	value: [index, baseTime, (baseTime += duration), duration],
+		// 	itemStyle: {
+		// 		normal: {
+		// 			color: linearGradient,
+		// 		}
+		// 	}
+		// };
+
+		// var sleepData = ["0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "10", "10", "10", "10", "10", "10", "10", "10", "10", "10", "10", "10", "10", "10", "10", "0", "0", "0", "0", "0", "0", "0", "0", "0", "10", "10", "10", "10", "10", "10", "10", "20", "20", "20", "20", "20", "20", "20", "20", "30", "30", "30", "30", "30", "30", "30", "30", "30"];//睡眠状态数据集合,0-清醒,10-浅睡,20-中睡,30-深睡
+
+		// 状态映射  
+		const statusMap = {
+			"0": "清醒",
+			"10": "浅睡",
+			"20": "中睡",
+			"30": "深睡"
+		};
+		// 状态映射  
+		const statusColorMap = {
+			"0": awakeColor,
+			"10": lightSleepColor,
+			"20": sleptInColor,
+			"30": deepSleepColor
+		};
+		// 状态映射  
+		const statusIndexMap = {
+			"0": 3,
+			"10": 2,
+			"20": 1,
+			"30": 0
+		};
+		// 初始化变量  reportDate
+		// let dateString = '2024/09/14 23:20:00';
+		let dateString = `${that.data.reportDate.replaceAll("-", "/")} ${that.data.rgobed_time + ":00"}`;
+		let date = new Date(dateString); 
+		let startTime = date.getTime(); // 基准时间，这里设为午夜开始 
+		console.log("时间=》", timestampToHHMM(startTime));
+		
+		let currentTime = startTime;
+		let currentState = sleepData[0];
+		let timePeriods = [];
+
+		// 遍历睡眠数据数组  
+		for (let i = 0; i < sleepData.length; i++) {
+			// 如果当前状态与前一个状态不同，则记录前一个时间段  
+			if (i > 0 && sleepData[i] !== sleepData[i - 1]) {
+				// 计算前一个时间段的结束时间（注意这里不需要减去一分钟，因为 currentTime 还未递增）  
+				let endTime = currentTime;
+				// 计算前一个时间段的持续时间（分钟）  
+				let duration = Math.floor((endTime - startTime) / (1000 * 60));
+				// 记录时间段  
+				if (duration > 0) {
+					var linearGradient = new echarts.graphic.LinearGradient(
+						0, 0, 0, 1, // 方向从左到右  
+						statusColorMap[sleepData[i - 1]]
+					);
+					timePeriods.push({
+						name: statusMap[sleepData[i - 1]],// 使用前一个状态 
+						value: [statusIndexMap[sleepData[i - 1]], startTime, endTime, duration],
+						itemStyle: {
+							normal: {
+								color: linearGradient,
+							}
+						},
+						// startTime: new Date(startTime), // 转换为 Date 对象以便更易于阅读  
+						// endTime: new Date(endTime),
+						// durationMinutes: duration
+					});
+				}
+				// 更新当前状态和开始时间  
+				currentState = sleepData[i];
+				startTime = currentTime;
+			}
+			// 递增时间（每分钟）  
+			currentTime += 1000 * 60;
+			// 处理最后一个时间段（如果数组不是以状态变化结束的话）  
+			if (i === sleepData.length - 1) {
+				let endTime = currentTime;
+				let duration = Math.floor((endTime - startTime) / (1000 * 60));
+				if (duration > 0) {
+					var linearGradient = new echarts.graphic.LinearGradient(
+						0, 0, 0, 1, // 方向从左到右  
+						statusColorMap[currentState]
+					);
+					timePeriods.push({
+						name: statusMap[currentState],// 使用前一个状态 
+						value: [statusIndexMap[currentState], startTime, endTime, duration],
+						itemStyle: {
+							normal: {
+								color: linearGradient,
+							}
+						},
+						// startTime: new Date(startTime), // 转换为 Date 对象以便更易于阅读  
+						// endTime: new Date(endTime),
+						// durationMinutes: duration
+					});
+				}
+			}
+		}
+		updateTimeWaterfall(startTime, timePeriods, that)
+		console.log("睡眠数据最终=>", dateString);
+		console.log("睡眠数据最终=>", startTime);
+		console.log("睡眠数据最终=>", JSON.stringify(timePeriods));
+	},
 	onReady() {
 		var that = this;
 		that.initChartCircle();
@@ -4191,7 +4346,7 @@ Page({
 		that.initChartSnoring();
 		that.initChartApnea();
 		that.initTimeWaterfall();
-},
+	},
 	/**			
 	 * 生命周期函数--监听页面加载
 	 */
@@ -4206,7 +4361,7 @@ Page({
 		var clickDate = String(that.data.year) + String(that.data.month) + String(that.data.date)
 		clickDate = String(parseInt(clickDate) + 100)
 		// that.getTargetData(clickDate)
-	
+
 		that.setData({
 			clickDate: clickDate,
 		});

pages/data/data.wxml

@@ -552,34 +552,59 @@
         <text class="title-text-right_c6">右侧文本</text>  
       </view> -->
 		</view>
+		<view class="card-h" style="margin-top: 30rpx;justify-content: space-around;">
+			<view class="card-item">
+				<view
+					style="width: 8rpx;height: 24rpx;margin-right: 16rpx;  background: linear-gradient( 180deg, #AA3CFF 0%, #7C3CFF 100%);border-radius: 2rpx">
+				</view>
+				<text class="card-t3">深睡</text>
+			</view>
+			<view class="card-item">
+				<view
+					style="width: 8rpx;height: 24rpx;margin-right: 16rpx; background: linear-gradient( 180deg, #FD7778 0%, #AA3CFF 100%);border-radius: 2rpx">
+				</view>
+				<text class="card-t3">中睡</text>
+			</view>
+			<view class="card-item">
+				<view
+					style="width: 8rpx;height: 24rpx;margin-right: 16rpx; background: linear-gradient( 180deg, #FDBE25 0%, #FD7778 100%);border-radius: 2rpx">
+				</view>
+				<text class="card-t3">浅睡</text>
+			</view>
+			<view class="card-item">
+				<view
+					style="width: 8rpx;height: 24rpx;margin-right: 16rpx;  background: linear-gradient( 180deg, #F7FCBE 0%, #FDBE25 100%);border-radius: 2rpx">
+				</view>
+				<text class="card-t3">清醒</text>
+			</view>
+		</view>
+		<!-- <view class="card5-h"> -->
 
-		<view class="card5-h">
-
-			<view class="card-v">
+		<!-- <view class="card-v">
 				<text class="card-t1">清醒</text>
-				<text class="card-t2">{{rawake_durationFormat || '0H 0M'}}</text>
+				<text class="card-t2">{{rawake_durationFormat.formattedMinutes || '0H 0M'}}</text>
 			</view>
 
 			<view class="card-v">
 				<text class="card-t1">REM({{rin_duration_efficiency}})</text>
-				<text class="card-t2">{{rin_durationFormat || '0H 0M'}}</text>
+				<text class="card-t2">{{rin_durationFormat.formattedMinutes || '0H 0M'}}</text>
 			</view>
 
 			<view class="card-v">
 				<text class="card-t1">浅睡({{rlight_duration_efficiency}})</text>
-				<text class="card-t2">{{rlight_durationFormat || '0H 0M'}}</text>
+				<text class="card-t2">{{rlight_durationFormat.formattedMinutes || '0H 0M'}}</text>
 			</view>
 
 			<view class="card-v">
 				<text class="card-t1">深睡({{rdeep_duration_efficiency}})</text>
-				<text class="card-t2">{{rdeep_durationFormat || '0H 0M'}}</text>
-			</view>
-		</view>
+				<text class="card-t2">{{rdeep_durationFormat.formattedMinutes || '0H 0M'}}</text>
+			</view> -->
+		<!-- </view> -->
 		<!-- <view class="echarts-container_c6">
 			<ec-canvas id="mychart-dom-bar11" canvas-id="mychart-bar" ec="{{ ec11 }}"></ec-canvas>
 		</view> -->
-		<view class="card-h" style="margin-top: 30rpx;">
-			<view class="chart-left-box">
+		<view class="card-h" style="margin-top: 30rpx;position: relative;">
+			<!-- <view class="chart-left-box">
 				<view class="chart-left-title-box">
 					<view class="dot" style="background: #AB81FF;border-radius: 4rpx;"></view>
 					<text class="left-title">深睡</text>
@@ -596,12 +621,79 @@
 					<view class="dot" style=" background: #FDEFA6;border-radius: 4rpx;"></view>
 					<text class="left-title">清醒</text>
 				</view>
+			</view> -->
+			<view style="position: absolute;top: 0;left: 30rpx;right: 30rpx;bottom: 45rpx;border: 1rpx solid #EEEEEE;">
 			</view>
 			<view class="echarts-container_c6" style="flex:1">
 				<ec-canvas id="chartTimeWaterfall-dom" canvas-id="mychart-time-waterfall"
 					ec="{{ ecTimeWaterfall }}"></ec-canvas>
 			</view>
 		</view>
+		<view style="margin-top: 30rpx;border-bottom: 1rpx solid #EEEEEE;width: calc(100% - 60rpx);margin-left: 30rpx;">
+		</view>
+		<view style="margin: 30rpx;"><text class="title-text_c6">睡眠状态</text></view>
+		<view class="card-v" style="width: calc(100% - 60rpx);margin-left: 30rpx;align-items: start;">
+			<view class="card-item2">
+				<view class="card-h" style="justify-content: space-between;align-items: center;">
+					<view
+						style="width: 16rpx;height: 16rpx;background: linear-gradient( 180deg, #AA3CFF 0%, #7C3CFF 100%);border-radius: 4rpx;">
+					</view>
+					<text style="flex: 1;margin-left: 20rpx;font-size: 28rpx;color: #3E3D44;">深睡</text>
+					<text style="font-size: 28rpx;color: #3E3D44;font-weight: 700;">{{rdeep_duration_efficiency ||
+						'0%'}}</text>
+				</view>
+				<text class="title-text-right_c6"
+					style="text-align: left;margin-left: 36rpx;font-size: 28rpx;">{{rdeep_durationFormat.formattedHours}}<text
+						class="text-line_c31-units">小时</text>{{rdeep_durationFormat.formattedMinutes}}<text
+						class="text-line_c31-units">分钟</text></text>
+			</view>
+			<view class="card-item2">
+				<view class="card-h" style="justify-content: space-between;align-items: center;">
+					<view
+						style="width: 16rpx;height: 16rpx;background: linear-gradient( 180deg, #FD7778 0%, #AA3CFF 100%);border-radius: 4rpx;">
+					</view>
+					<text style="flex: 1;margin-left: 20rpx;font-size: 28rpx;color: #3E3D44;">中睡</text>
+					<text style="font-size: 28rpx;color: #3E3D44;font-weight: 700;">{{rin_duration_efficiency ||
+						'0%'}}</text>
+				</view>
+				<text class="title-text-right_c6"
+					style="text-align: left;margin-left: 36rpx;font-size: 28rpx;">{{rin_durationFormat.formattedHours}}<text
+						class="text-line_c31-units">小时</text>{{rin_durationFormat.formattedMinutes}}<text
+						class="text-line_c31-units">分钟</text></text>
+			</view>
+
+			<view class="card-item2">
+				<view class="card-h" style="justify-content: space-between;align-items: center;">
+					<view
+						style="width: 16rpx;height: 16rpx;background: linear-gradient( 180deg, #FDBE25 0%, #FD7778 100%);border-radius: 4rpx;">
+					</view>
+					<text style="flex: 1;margin-left: 20rpx;font-size: 28rpx;color: #3E3D44;">浅睡</text>
+					<text style="font-size: 28rpx;color: #3E3D44;font-weight: 700;">{{rlight_duration_efficiency ||
+						'0%'}}</text>
+				</view>
+				<text class="title-text-right_c6"
+					style="text-align: left;margin-left: 36rpx;font-size: 28rpx;">{{rlight_durationFormat.formattedHours}}<text
+						class="text-line_c31-units">小时</text>{{rlight_durationFormat.formattedMinutes}}<text
+						class="text-line_c31-units">分钟</text></text>
+			</view>
+
+			<view class="card-item2">
+				<view class="card-h" style="justify-content: space-between;align-items: center;">
+					<view
+						style="width: 16rpx;height: 16rpx;background: linear-gradient( 180deg, #F7FCBE 0%, #FDBE25 100%);border-radius: 4rpx;">
+					</view>
+					<text style="flex: 1;margin-left: 20rpx;font-size: 28rpx;color: #3E3D44;">清醒</text>
+					<text style="font-size: 28rpx;color: #3E3D44;font-weight: 700;">{{rawake_duration_efficiency ||
+						'0%'}}</text>
+				</view>
+				<text class="title-text-right_c6"
+					style="text-align: left;margin-left: 36rpx;font-size: 28rpx;">{{rawake_durationFormat.formattedHours}}<text
+						class="text-line_c31-units">小时</text>{{rawake_durationFormat.formattedMinutes}}<text
+						class="text-line_c31-units">分钟</text></text>
+			</view>
+
+
+		</view>
 
 	</view>
 

pages/data/data.wxss

@@ -1155,7 +1155,7 @@ ec-canvas {
 .echarts-container_c6 {
   width: 100%;
   /* 可以根据需要调整 */
-  height: 300rpx;
+  height: 480rpx;
   /* 可以根据需要调整，或者设置为百分比 */
   display: flex;
   justify-content: center;
@@ -1696,8 +1696,6 @@ ec-canvas_c6 {
   display: flex;
   align-items: center;
   flex-direction: column;
-
-
 }
 
 .card-t1 {
@@ -1709,4 +1707,30 @@ ec-canvas_c6 {
 .card-t2 {
   font-size: 24rpx;
   color: #6C6970;
+}
+
+
+.card6-h {
+  width: 100%;
+  margin: auto;
+  display: flex;
+}
+
+.card-item {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}
+
+.card-t3 {
+  font-size: 24rpx;
+  color: #3E3D44;
+}
+
+.card-item2 {
+  margin-bottom: 30rpx;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
 }

pages/index/index.js

@@ -208,6 +208,7 @@ Page({
 		ecHumidifier: {
 			lazyLoad: true, // 懒加载
 		},
+		weatherBg: '',
 		//单选框
 		radio_select: '10',
 		radio_switch: '10',
@@ -4345,7 +4346,22 @@ Page({
 							const {
 								now
 							} = res.data;
+							var weatherBg = ""
+							if (now.text.includes("晴")) {
+								weatherBg = "/subpages/images/weather/qing.png"
+							} else if (now.text.includes("多云") || now.text.includes("阴")) {
+								weatherBg = "/subpages/images/weather/duoyun.png"
+							} else if (now.text.includes("雷") || now.text.includes("雨")) {
+								weatherBg = "/subpages/images/weather/leiyu.png"
+							} else if (now.text.includes("雨")) {
+								weatherBg = "/subpages/images/weather/leiyu.png"
+							} else if (now.text.includes("雪")) {
+								weatherBg = "/subpages/images/weather/xue.png"
+							} else if (now.text.includes("雾") || now.text.includes("霾")) {
+								weatherBg = "/subpages/images/weather/wumai.png"
+							}
 							that.setData({
+								weatherBg,
 								weather: now.text, // 天气
 								w_temp: now.temp, // 温度
 								w_humidity: now.humidity, // 湿度

pages/index/index.wxml

@@ -1,10 +1,9 @@
 <!-- index.wxml -->
 <view>
-  <image src="/static/images/ic_top_bg.png" mode="widthFix"
-    style="width: 100%;display: block;position: absolute; z-index: -1;top:0" />
+  <image src="{{weatherBg}}" mode="widthFix" style="width: 100%;display: block;position: absolute; z-index: -1;top:0" />
   <view class="container">
     <van-nav-bar title="" left-text="" left=""></van-nav-bar>
-    <!-- 天气的面板 -->
+    <!-- 天气的面板  -->
     <view class="header-wrapper" wx:if="{{!status_fire}}">
       <view class="weather-box">
         <text class="weather-title">空气质量-{{ airText }}</text>