siyu_app/pages_watch/health/healthReport.vue

<template>
	<view class="container">
		<view class="user">
			<view class="user-info border-line">
				<view class="user-info-head">
					<image class="user-info-avatar" :src="$isEmpty(reportUser.avatar) ? avatar : reportUser.avatar" mode="aspectFill"></image>
					<view style="flex: 1;overflow: hidden;">
						<view class="user-info-name">{{reportUser.nickname || '--'}}</view>
						<view class="user-info-tag">
							<view>{{reportUser.sex == 1 ? '男' : reportUser.sex == 2 ? '女': '未知'}}</view>
							<view>{{reportUser.age || '--'}}岁</view>
							<view>{{reportUser.height || '--'}}cm</view>
							<view>{{reportUser.weight || '--'}}kg</view>
						</view>
						<view class="user-info-desc textOne">病史：无病史</view>
					</view>
				</view>
				<!-- <image class="arrow_right_icon" src="@/static/images/pages_watch/icons/right_arrow_right_icon24@2x.png"></image> -->
			</view>
			<view class="history-report" @click="handleList">
				<view>
					<image class="history_report_icon" src="@/static/images/pages_watch/icons/history_report_icon.png" mode="aspectFill"></image>
					<text>历史健康报告</text>
				</view>
				<view class="history-report-r">
					<text>去看看</text>
					<image class="arrow_right_icon" src="@/static/images/pages_watch/icons/right_arrow_right_icon24@2x.png"></image>
				</view>
			</view>
		</view>
		<view class="reportbox">
			<dateTimePicker ref="dateTimePicker" from="report" :showType="false" :formatType="1" @onChange="onChangeTime" />
			<bpChart ref="bpChart" :loading="bpLoading" :boxstyle="{padding: 0,marginTop: '52rpx',marginBottom: '40rpx'}" />
			<!-- <view class="tipsbox">
				该月血压整体偏高，应多注意休息，合理安排作息，吃降压药等其它降压手段保持血压正常。
			</view> -->
			<bsChart ref="bsChart" :loading="bsLoading" :boxstyle="{padding: 0,marginTop: '52rpx',marginBottom: '40rpx'}" />
			<!-- <view class="tipsbox">
				该月血糖整体偏高，应多注意休息，合理安排作息，吃降糖药等其它手段保持血糖正常。
			</view> -->
			<heartChart ref="heartChart" :loading="heartLoading" :boxstyle="{padding: 0,marginTop: '52rpx',marginBottom: '40rpx'}" />
			<!-- <view class="tipsbox">
				该月心率多次出现异常，应多注意休息，合理安排作息，吃养心药等其它手段保持心率正常。
			</view> -->
			<boChart ref="boChart" :loading="boLoading" :boxstyle="{padding: 0,marginTop: '52rpx',marginBottom: '40rpx'}" />
			<!-- <view class="tipsbox">
				血氧各项指标正常，请多保持!!!
			</view> -->
			<sleep ref="sleep" :loading="sleepLoading" :boxstyle="{padding: 0,marginTop: '52rpx',marginBottom: '40rpx'}" />
			<!-- <view class="tipsbox">
				您的睡眠质量较好，打败了80%的人，请继续保持，好的睡眠才是养好身体的关键。
			</view> -->
		</view>
	</view>
</template>

<script>
	import {
		bpInfo,
		bgInfo,
		heartRateInfo,
		spInfo,
		sleepInfo
	} from "@/api/pages_watch/healthMonitoring.js";
	import {getUserByDeviceId} from "@/api/pages_watch/health.js";
	import dateTimePicker from "@/pages_watch/components/dateTimePicker/dateTimePicker.vue";
	import bpChart from "@/pages_watch/components/echart/bpChart.vue"; // 血压
	import bsChart from "@/pages_watch/components/echart/bsChart.vue"; // 血糖
	import heartChart from "@/pages_watch/components/echart/heartChart.vue"; // 心率
	import boChart from "@/pages_watch/components/echart/boChart.vue"; // 血氧
	import sleep from "@/pages_watch/components/echart/sleep.vue"; // 睡眠
	const avatar="/static/images/pages_watch/images/my_heads_icon.png";
	export default {
		components: {
			dateTimePicker,
			bpChart,
			bsChart,
			heartChart,
			boChart,
			sleep
		},
		data() {
			return {
				avatar,
				deviceId: uni.getStorageSync("deviceId"),
				reportUser: {},
				bpLoading: false,
				bsLoading: false,
				heartLoading: false,
				boLoading: false,
				sleepLoading: false,
				isFamily: false
			}
		},
		onLoad(option) {
			this.isFamily = option.selectUser!='0'
			this.getReportUser()
			uni.$on('refreshReport', (params) => {
				if(params) {
					this.$refs.dateTimePicker.value = params
					this.$refs.dateTimePicker.resetTime()
				}
			});
		},
		onUnload() {
		  // 页面销毁时移除监听，避免重复监听
		  uni.$off('refreshReport');
		},
		methods: {
			handleList() {
				uni.navigateTo({
					url: "/pages_watch/health/healthReportHistory"
				})
			},
			onChangeTime(time) {
				// [startTime,endTime,value]
				// 月份 
				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.$nextTick(()=>{
					this.getBpByDate(param)
					this.getBgByDate(param)
					this.getHrByDate(param)
					this.getSpByDate(param)
					this.getSleepByDate(param)
				})
			},
			getReportUser() {
				const deviceId = uni.getStorageSync('deviceId') || ''
				const param = {
					deviceId: deviceId,
					isFamily: this.isFamily
				}
				getUserByDeviceId(param).then((res) => {
					this.reportUser = this.$isEmpty(res.data) ? {} : res.data
				})
			},
			// 血压
			getBpByDate(param) {
				this.bpLoading = true
				bpInfo(param).then((res) => {
					this.bpLoading = false
					this.$refs.bpChart.setChartData(res.data)
				}).catch((err) => {
					this.bpLoading = false
				});
			},
			// 血糖
			getBgByDate(param) {
				this.bsLoading = true
				bgInfo(param).then((res) => {
					this.bsLoading = false
					this.$refs.bsChart.setChartData(res.data)
				}).catch((err) => {
					this.bsLoading = false
				});
			},
			// 心率
			getHrByDate(param) {
				this.heartLoading = true
				heartRateInfo(param).then((res) => {
					this.heartLoading = false
					this.$refs.heartChart.setChartData(res.data)
				}).catch((err) => {
					this.heartLoading = false
				});
			},
			// 血氧
			getSpByDate(param) {
				this.boLoading = true
				spInfo(param).then((res) => {
					this.boLoading = false
					this.$refs.boChart.setChartData(res.data)
				}).catch((err) => {
					this.boLoading = false
				});
			},
			// 睡眠
			getSleepByDate(param) {
				this.sleepLoading = true
				sleepInfo(param).then((res) => {
					this.sleepLoading = false
					this.$refs.sleep.setChartData(res.data)
				}).catch((err) => {
					this.sleepLoading = false
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	@mixin u-flex($flexD, $alignI, $justifyC) {
		display: flex;
		flex-direction: $flexD;
		align-items: $alignI;
		justify-content: $justifyC;
	}
	.user {
		padding: 0 32rpx;
		background-color: #fff;
		font-family: PingFang SC, PingFang SC;
		&-info {
			padding: 22rpx 0;
			@include u-flex(row,center,space-between);
			&-name {
				font-weight: 600;
				font-size: 32rpx;
				color: #222222;
			}
			&-desc{
				margin-top: 18rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
			}
			&-tag {
				@include u-flex(row,center,flex-start);
				// gap: 12rpx;
				margin: 16rpx -12rpx -12rpx 0;
				flex-wrap: wrap;
				font-weight: 400;
				font-size: 22rpx;
				color: #FF5C03;
				view {
					min-width: 62rpx;
					height: 42rpx;
					padding: 0 20rpx;
					margin: 0 12rpx 12rpx 0;
					box-sizing: border-box;
					background: #FCF0E7;
					border-radius: 24rpx 24rpx 24rpx 24rpx;
					text-align: center;
					line-height: 42rpx;
				}
			}
		}
		&-info-head {
			@include u-flex(row,flex-start,flex-start);
			overflow: hidden;
		}
		&-info-avatar {
			flex-shrink: 0;
			height: 140rpx;
			width: 140rpx;
			border-radius: 50%;
			overflow: hidden;
			margin-right: 28rpx;
		}
		.arrow_right_icon {
			flex-shrink: 0;
			height: 48rpx;
			width: 48rpx;
		}
		.history-report {
			height: 96rpx;
			@include u-flex(row,center,space-between);
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #222222;
			line-height: 96rpx;
			&-r {
				font-weight: 400;
				font-size: 24rpx;
				color: #757575;
				display: flex;
				align-items: center;
			}
		}
		.history_report_icon {
			height: 32rpx;
			width: 32rpx;
			vertical-align: middle;
			margin-right: 18rpx;
		}
	}
	.reportbox {
		margin-top: 20rpx;
		background-color: #fff;
		padding: 20rpx 32rpx 0 32rpx;
		::v-deep .pickebox-picker {
			margin: 0 !important;
		}
	}
	.tipsbox {
		padding: 24rpx;
		background: #F5F7FA;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		border: 2rpx solid #F5F7FA;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 26rpx;
		color: #333333;
		word-break: break-all;
	}
</style>