miniProgram/subpages/data/data.wxml

<!--pages/data/data.wxml-->
<view class='container'>
	<view wx:if="{{isLoading}}" class="loading-container">
		<text class="loading-text">数据正在推送，请稍候...</text>
	</view>

	<view class="top-bar-box">
		<image class="data-image_c00_0" src="/subpages/images/ic_bg_room.png" mode="aspectFit"></image>
		<text class="data-text_c00_0" data-type="sn"
			bindtap="showPicker">{{hotelname?(hotelname+'·'):''}}{{roomname?(roomname+'·'):''}}{{bedname}}床</text>
		<view class="top-bar-line"></view>
		<image class="top-bar-icon" src="/subpages/images/ic_bg_date.png" mode="aspectFit"></image>
		<text wx:if="{{!isToDay}}" class="top-bar-date" data-type="date"
			bindtap="showPicker">{{reportDate?reportDate:'无数据'}}</text>
		<text class="top-bar-time" data-type="dateTime"
			bindtap="showPicker">{{rgobed_time?rgobed_time:'无数据'}}~{{routbed_time?routbed_time:'无数据'}}</text>
		<view wx:if="{{isToDay}}" style="flex: 0.45;"></view>
	</view>





	<view class="container_00">

		<view class="circle-container-yh">
			<view class="text-container-yh left-text-yh">
				<view class="text-row-yh">
					<view class="blue-dot" style="background: #8D32F1;margin-left: 0;"></view>
					<text class="text-content-yh">睡眠总时长</text>
				</view>
				<view class="text-row-yh">
					<text class="text-content-yh_1">{{rtotal_duration.formattedHours}}<text
							class="text-content-yh_1-units">小时</text>{{rtotal_duration.formattedMinutes}}<text
							class="text-content-yh_1-units">分钟</text></text>
				</view>
			</view>
			<view class="echarts-container_c00">
				<ec-canvas id="mychart-dom-CircularProgressBar" canvas-id="ecCircularProgressBar"
					ec="{{ ecCircularProgressBar }}"></ec-canvas>
			</view>
			<view class="text-container-yh right-text-yh">
				<view class="text-row-yh">
					<view class="blue-dot" style="background: #0BC38F;margin-left: 0;"></view>
					<text class="text-content-yh">睡眠时间</text>
				</view>
				<view class="text-row-yh">
					<text class="text-content-yh_1">{{rgobed_time}}~{{routbed_time}}</text>
				</view>
			</view>
		</view>


		<view class="centered-text">
			<text class="text-line text-line-3">香睡指数</text>
		</view>

	</view>




	<view class="big-title_c2-box">
		<text class="big-title_c2">各项睡眠监测数据统计</text>
		<view class="big-title_c2-line"></view>
	</view>



	<view class="container_3">
		<view class="row_c3">
			<view class="cell_c3">
				<image class="image_c5" src="/static/images/report/shangchuang_shijian_new.png" mode="widthFix" />

				<view class="purple-dot-up" style="background: #AC63FC;"></view>
				<view class="cell-text_c3">
					<view><text class="text-line_c3">上床时间</text></view>
					<view style="margin-top: 15rpx;"><text class="text-line_c31">{{rgobed_time}}</text></view>
				</view>
			</view>
			<view class="cell_c3">
				<image class="image_c5" src="/static/images/report/zaichuang_shijian_new.png" mode="widthFix" />

				<view class="organize-dot-up"></view>
				<view class="cell-text_c3">
					<view><text class="text-line_c3">在床时间</text></view>
					<view style="margin-top: 15rpx;"><text class="text-line_c31">{{rinbed_duration.formattedHours}}<text
								class="text-line_c31-units">小时</text>{{rinbed_duration.formattedMinutes}}<text
								class="text-line_c31-units">分钟</text></text>
					</view>
				</view>
			</view>
		</view>


		<view class="row_c3">
			<view class="cell_c3">
				<image class="image_c5" src="/static/images/report/shenshui_shichang_new.png" mode="widthFix" />
				<view class="purple-dot-up" style="background: #8D32F1;"></view>
				<view class="cell-text_c3">
					<view><text class="text-line_c3">深睡时长</text></view>
					<view style="margin-top: 15rpx;"><text
							class="text-line_c31">{{rdeep_durationFormatA.formattedHours}}<text
								class="text-line_c31-units">小时</text>{{rdeep_durationFormatA.formattedMinutes}}<text
								class="text-line_c31-units">分钟</text></text>
					</view>

				</view>
			</view>
			<view class="cell_c3">
				<image class="image_c5" src="/static/images/report/shuimian_xiaolv_big_new.png" mode="widthFix" />
				<view class="green-dot-up" style="background: #60C38D;"></view>
				<view class="cell-text_c3">
					<view><text class="text-line_c3">睡眠效率</text></view>
					<view style="margin-top: 15rpx;"><text class="text-line_c31">{{rsleep_eff_value}}</text></view>
				</view>
			</view>
		</view>

		<view class="row_c3">
			<view class="cell_c3">
				<image class="image_c5" src="/static/images/report/pingjun_huxilv_new.png" mode="widthFix" />
				<view class="organize-dot-up" style="background: #FB717B;"></view>
				<view class="cell-text_c3">
					<view><text class="text-line_c3">平均呼吸率</text></view>
					<view style="margin-top: 15rpx;"><text class="text-line_c31">{{ravg_hx_value}}次<text
								class="text-line_c31-units">/分</text></text></view>
				</view>
			</view>
			<view class="cell_c3">
				<image class="image_c5" src="/static/images/report/pingjun_xinlv_new.png" mode="widthFix" />
				<view class="blue-dot-up" style="background: #F681BA;"></view>
				<view class="cell-text_c3">
					<view><text class="text-line_c3">平均心率</text></view>
					<view style="margin-top: 15rpx;"><text class="text-line_c31">{{ravg_rh_value}}次<text
								class="text-line_c31-units">/分</text></text></view>
				</view>
			</view>
		</view>
	</view>

	<view class="container_4">
		<view class="left-panel_c4">
			<view class="text-container_c4_top_left">
				<text class="text_c4_left_top">温馨提醒</text>
			</view>
			<image class="image_c4" src="/subpages/images/left_background_c4_new.png" />
			<view class="text-container_c4">
				<text class="text_c4">本次睡眠，睡眠报告得分评比描述：<text class="text_c4_1">{{rscore_desc}}</text></text>
			</view>
		</view>
		<view class="right-panel_c4">
			<view class="cell_c4">
				<view class="green-dot"></view>
				<view class="cell-text_c4">
					<text class="text-line_c4" style="float:left">体动次数</text>
					<text class="text-line_c41" style="float:right;margin-right:5rpx">{{rmove_arrFrequency}}<text
							style="font-size: 24rpx;">次</text></text>
				</view>
			</view>
			<view class="cell_c4">
				<view class="organize-dot"></view>
				<view class="cell-text_c4">
					<text class="text-line_c4" style="float:left">离床次数</text>
					<text class="text-line_c41" style="float:right;margin-right:5rpx">{{routbed_count_value}}<text
							style="font-size: 24rpx;">次</text></text>
				</view>
			</view>
			<view class="cell_c4">
				<view class="blue-dot"></view>
				<view class="cell-text_c4">
					<text class="text-line_c4" style="float:left">打鼾次数</text>
					<text class="text-line_c41" style="float:right;margin-right:5rpx">{{rsnoring_arrFrequency}}<text
							style="font-size: 24rpx;">次</text></text>
				</view>
			</view>
		</view>
	</view>

	<view class="container_5">
		<view class="header_c5">
			<image class="header-image_c5" src="/static/images/report/shuimian_xiguan_new.png" mode="aspectFit"></image>
			<text class="header-title_c5">睡眠习惯</text>
			<image class="header-image_comma" src="/static/images/report/comma_new.png" mode="aspectFit" data-index="1"
				data-subIndex="1" bindtap="toWarmReminder">
			</image>
		</view>
		<view class="separator_c5"></view>
		<view class="data-row_c5">
			<view class="data-item_c5 left_c5">
				<view class="dot_c51"></view>
				<text class="data-text_c5">上床时间 </text>
				<!-- <text class="data-text_c51">就寝目标23:00</text> -->
			</view>
			<view class="data-item_c5 right_c5">
				<text class="data-text_c5">{{rgobed_time}}</text>
			</view>
		</view>
		<view class="data-row_c5_down">
			<view class="data-item_c5 left_c5">
				<view class="dot_c51_1"></view>
				<text class="data-text_c5">起床时间 </text>
				<!-- <text class="data-text_c51_1">起床时间08:00</text> -->
			</view>
			<view class="data-item_c5 right_c5">
				<text class="data-text_c5">{{routbed_time}}</text>
			</view>
		</view>

		<view class="title-row_c6">
			<view class="title-left_c6">
				<image class="title-image_c6" src="/static/images/report/shuimian_xiaolv_new.png" mode="aspectFit">
				</image>
				<text class="title-text_c6">睡眠效率</text>
				<image class="header-image_comma" src="/static/images/report/comma_new.png" mode="aspectFit"
					data-index="2" data-subIndex="1" bindtap="toWarmReminder"></image>
			</view>
			<view class="title-right_c6">
				<text class="title-text-right_c6">{{sleep_efficiency}}</text>
			</view>
		</view>



	</view>



	<view class="container_6">
		<view class="title-row_c6">
			<view class="title-left_c6">
				<image class="title-image_c6" src="/static/images/report/anwendu_new.png" mode="aspectFit"></image>
				<text class="title-text_c6">安稳度</text>
				<image class="header-image_comma" src="/static/images/report/comma_new.png" mode="aspectFit"
					data-index="4" data-subIndex="1" bindtap="toWarmReminder"></image>
			</view>
		</view>
		<view class="separator_c00"></view>
		<view class="title-row_c6">
			<view class="title-left_c6">
				<text class="title-text-right_c6_1" style="font-size: 28rpx;">入睡时长</text>
			</view>
			<view class="title-right_c6">
				<text class="title-text-right_c6">{{rrs_duration.formattedHours}}<text
						class="text-line_c31-units">小时</text>{{rrs_duration.formattedMinutes}}<text
						class="text-line_c31-units">分钟</text></text>
			</view>
		</view>
		<view class="title-row_c6">
			<view class="title-left_c6">
				<text class="data-item_c6 left_c61" style="font-size: 28rpx;">离床次数</text>
			</view>
			<view class="title-right_c6">
				<text class="title-text-right_c6">{{routbed_count_value}}<text
						class="text-line_c31-units">次</text></text>
			</view>
		</view>

		<view class="card-h">

			<view class="chart-left-box">
				<view class="chart-left-title-box">
					<view class="dot" style="background: #6086EF"></view>
					<text class="left-title">在床</text>
				</view>
				<view class="chart-left-title-box">
					<view class="dot" style=" background: #EE8B52"></view>
					<text class="left-title">离床</text>
				</view>
			</view>
			<view class="echarts-container_c6" style="flex: 1;">
				<ec-canvas id="chartOutOfBed-dom" canvas-id="mychart-out-of-bed" ec="{{ ecOutOfBed }}"></ec-canvas>
			</view>
		</view>

		<view class="separator_c00" style="margin-top: 30rpx;"></view>
		<view class="title-row_c6">
			<view class="title-left_c6">
				<text class="data-item_c6 left_c61" style="font-size: 28rpx;">体动次数</text>
			</view>
			<view class="title-right_c6">
				<text class="title-text-right_c6">{{rmove_arrFrequency}}<text
						class="text-line_c31-units">次</text></text>
			</view>
		</view>
		<view class="card-h">

			<view class="chart-left-box">
				<view class="chart-left-title-box">
					<view class="dot" style="background: #EE8B52"></view>
					<text class="left-title">体动</text>
				</view>
				<view class="chart-left-title-box">
					<view class="dot" style=" background: #60C38D"></view>
					<text class="left-title">否</text>
				</view>
			</view>
			<view class="echarts-container_c6" style="flex: 1;">
				<ec-canvas id="chartBodyMovementsLine-dom" canvas-id="mychart-body-movements-line"
					ec="{{ ecBodyMovements }}"></ec-canvas>
			</view>
		</view>

	</view>

	<view class="container_6">
		<view class="title-row_c6">
			<view class="title-left_c6">
				<image class="title-image_c6" src="/static/images/report/xinzang_xiting_new.png" mode="aspectFit">
				</image>
				<text class="title-text_c6">心脏系统</text>
				<image class="header-image_comma" src="/static/images/report/comma_new.png" mode="aspectFit"
					data-index="5" data-subIndex="1" bindtap="toWarmReminder"></image>
			</view>
		</view>

		<view class="data-row_c6">
			<view class="data-item_c6 left_c61">平均心率</view>
			<view class="right_c6">{{ravg_rh_value}}<text class="text-line_c31-units">次/分</text></view>
		</view>
		<view class="echarts-container_c6">
			<!-- 在这里使用ec-canvas或canvas组件来承载echarts图表 -->
			<ec-canvas id="chartCardiacSystemLine-dom" canvas-id="mychart-cardiac-system-line"
				ec="{{ ecCardiacSystemLine }}"></ec-canvas>
		</view>

	</view>


	<view class="container_6">
		<view class="title-row_c6">
			<view class="title-left_c6">
				<image class="title-image_c6" src="/static/images/report/huxi_xitong_new.png" mode="aspectFit"></image>
				<text class="title-text_c6">呼吸系统</text>
				<image class="header-image_comma" src="/static/images/report/comma_new.png" mode="aspectFit"
					data-index="6" data-subIndex="1" bindtap="toWarmReminder"></image>
			</view>

		</view>

		<view class="data-row_c6">
			<view class="data-item_c6 left_c61">平均呼吸率</view>
			<view class=" right_c6">{{ravg_hx_value}}<text class="text-line_c31-units">次/分</text></view>
		</view>
		<view class="echarts-container_c6">
			<!-- 在这里使用ec-canvas或canvas组件来承载echarts图表 -->
			<ec-canvas id="chartRespiratoryLine-dom" canvas-id="mychart-chart-respiratory-line"
				ec="{{ ecChartRespiratoryLine }}"></ec-canvas>
		</view>
		<view class="separator_c00" style="margin-top: 30rpx;"></view>
		<view class="data-row_c6">
			<view class="data-item_c6 left_c61">打鼾</view>
			<view class=" right_c6">{{rsnoring_arrFrequency}}<text class="text-line_c31-units">次</text></view>
		</view>


		<text class="sub-title">睡眠状态</text>
		<view class="card-h">
			<view class="chart-left-box">
				<view class="chart-left-title-box">
					<view class="dot" style="background: #EE8B52"></view>
					<text class="left-title">打鼾</text>
				</view>
				<view class="chart-left-title-box">
					<view class="dot" style=" background: #60C38D"></view>
					<text class="left-title">否</text>
				</view>
			</view>
			<view class="echarts-container_c6" style="flex: 1;">
				<ec-canvas id="chartSnoringLine-dom" canvas-id="mychart-chart-snoring-line"
					ec="{{ ecSnoringLine }}"></ec-canvas>
			</view>
		</view>
		<view class="separator_c00" style="margin-top: 30rpx;"></view>
		<view class="data-row_c6">
			<view class="data-item_c6 left_c61">呼吸暂停</view>
			<view class=" right_c6">{{rhxstop_arrFrequency}}<text class="text-line_c31-units">次</text></view>
		</view>
		<text class="sub-title">睡眠状态</text>
		<view class="card-h">
			<view class="chart-left-box">
				<view class="chart-left-title-box">
					<view class="dot" style="background: #F46785"></view>
					<text class="left-title">停止</text>
				</view>
				<view class="chart-left-title-box">
					<view class="dot" style=" background: #6086EF"></view>
					<text class="left-title">否</text>
				</view>
			</view>
			<view class="echarts-container_c6" style="flex: 1;">
				<ec-canvas id="chartApneaLine-dom" canvas-id="mychart-chart-apnea-line"
					ec="{{ ecApneaLine }}"></ec-canvas>
			</view>
		</view>
		<view class="data-row_c6" style="margin-top: 30rpx;">
			<view
				class="data-item_c6 {{(sleepHourSub && rhxstop_arrFrequency>=sleepHourSub*5)?'left_c62_1':'left_c62'}}">
				<image class="header-image_comma" style="margin-right:10rpx;width: 36rpx;height: 36rpx;"
					src="/static/images/report/fengxian_yujing_new.png" mode="aspectFit"></image>
				<text>风险预警: {{(sleepHourSub
					&& rhxstop_arrFrequency>=5*sleepHourSub)?'根据呼吸暂停指数（AHI），您的呼吸暂停次数已达到5次/每小时':'无'}}</text>
			</view>
		</view>
	</view>


	<view class="container_6">
		<view class="title-row_c6">
			<view class="title-left_c6">
				<image class="title-image_c6" src="/static/images/report/shenqian_shuimian_new.png" mode="aspectFit">
				</image>
				<text class="title-text_c6">深浅睡眠</text>
				<image class="header-image_comma" src="/static/images/report/comma_new.png" mode="aspectFit"
					data-index="3" data-subIndex="1" bindtap="toWarmReminder"></image>
			</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, #3D7299 0%, #3D7299 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, #75BDE0 0%, #75BDE0 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, #AAD09F 0%, #AAD09F 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, #F7E3BA 0%, #F7E3BA 100%);border-radius: 2rpx">
				</view>
				<text class="card-t3">REM</text>
			</view>
		</view>
		<view class="card-h" style="margin-top: 30rpx;position: relative;">

			<view style="position: absolute;top: 0;left: 30rpx;right: 30rpx;bottom: 60rpx;border: 1rpx solid #EEEEEE;">
			</view>
			<view class="echarts-container_c6" style="flex:1;height: 390rpx;">
				<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, #3D7299 0%, #3D7299 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, #75BDE0 0%, #75BDE0 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, #AAD09F 0%, #AAD09F 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 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, #F7E3BA 0%, #F7E3BA 100%);border-radius: 4rpx;">
					</view>


					<text style="flex: 1;margin-left: 20rpx;font-size: 28rpx;color: #3E3D44;">REM</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>

	</view>

	<authorized-login-dialog showDialog="{{showAuthorizedDialog}}"
		bind:authorizationSuccessful="authorizationSuccessful"></authorized-login-dialog>

	<!-- 选择床 -->
	<van-popup show="{{ showSelectSn }}" bind:close="closePicker" position="bottom" lock-scroll z-index="9999"
		close-on-click-overlay showToolbar="true">
		<view style="width: 100vw;display: block;">
			<van-picker columns="{{ sns }}" value-key="pos" bind:confirm="onSnChange" bind:cancel="closePicker" />
		</view>
	</van-popup>


	<!-- 选择日期 -->
	<van-popup show="{{ showSelectDate }}" bind:close="closePicker" position="bottom" lock-scroll z-index="9999"
		close-on-click-overlay showToolbar="true">
		<view style="width: 100vw;display: block;">
			<van-picker columns="{{ dateData }}" value-key="rdate" bind:confirm="onDateChange"
				bind:cancel="closePicker" />
		</view>
	</van-popup>
	<!-- 选择时间段 -->
	<van-popup show="{{ showSelectDateTime }}" bind:close="closePicker" position="bottom" lock-scroll z-index="9999"
		close-on-click-overlay showToolbar="true">
		<view style="width: 100vw;display: block;">
			<van-picker columns="{{ dateTimeData }}" value-key="durations" bind:confirm="onDateTimeChange"
				bind:cancel="closePicker" />
		</view>
	</van-popup>

</view>