yyky_new_app/pages/index/condition/heart_rate/index.vue

<template>
	<view class="box">
		<!-- <van-tabs v-model="active">
			<van-tab title="日"> -->
		<view class="user-box">
			<image class="top-right" src="https://app.tjzhxx.cn:11443/image/enterprise_icon.png" mode=""></image>
			<view class="right-box">
				<view class="name">刘嘉琳</view>
				<view class="info-box">
					<view class="info-item">
						<view class="number">78</view>
						<view class="word">年龄</view>
					</view>
					<view class="info-item">
						<view class="number">156</view>
						<view class="word">身高</view>
					</view>
					<view class="info-item">
						<view class="number">47.3</view>
						<view class="word">体重</view>
					</view>
				</view>
			</view>
		</view>
		<view class="content-box">
			<view class="number-box">
				<view class="box-item" :class="{ 'heart-selected': selectedItem === 'item1' }"
					@click="setSelectedItem('item1')">
					<view class="item-top">
						<view class="item-word">心率</view>
						<image
							:src="selectedItem === 'item1' ?'/static/img/heart-icon.png':'/static/img/unheart-icon.png'"
							mode=""></image>
					</view>
					<view class="item-under">
						<view class="number">076</view>
						<view class="unit">BPM</view>
					</view>
				</view>
				<view class="box-item" :class="{ 'sleep-selected': selectedItem === 'item2' }"
					@click="setSelectedItem('item2')">
					<view class="item-top">
						<view class="item-word">睡眠</view>
						<image class="sleep-icon"
							:src="selectedItem === 'item2' ?'/static/img/sleep-icon.png':'/static/img/unsleep-icon.png'"
							mode=""></image>
					</view>
					<view class="item-under">
						<view class="number">48</view>
						<view class="unit">MIN</view>
					</view>
				</view>
				<view class="box-item" :class="{ 'breathe-selected': selectedItem === 'item3' }"
					@click="setSelectedItem('item3')">
					<view class="item-top">
						<view class="item-word">呼吸</view>
						<image class="breathe-icon"
							:src="selectedItem === 'item3' ?'/static/img/breathe-icon.png':'/static/img/unbreathe-icon.png'"
							mode=""></image>
					</view>
					<view class="item-under">
						<view class="number">43</view>
						<view class="unit">AHI</view>
					</view>
				</view>
			</view>
		</view>
		<view class="top-box">
			<view class="container-top" @click="showDayPicker = true">
				<view class="top-left">
					<view class="word">今日</view>
					<text>{{formatDate(dayValue)}}</text>
				</view>
				<!-- <view class="top-right" @click.stop="fullscreenFn">
							<image src="/static/image/full.png" mode=""></image>
						</view> -->
			</view>
			<view class="chartsMain" v-if="Area.categories.length">
				<view class="">数据分析</view>
				<canvas canvas-id="canvasArea" id="canvasArea" class="charts" disable-scroll="false"></canvas>
			</view>
			<view class="chartsMain" v-else>
				<image src="/static/img/none.png" mode=""></image>
			</view>
		</view>
		<view class="under-box" v-if="selectedItem === 'item1'">
			<view class="under-item">
				<i class="iconfont icon-arrow-right"></i>
				<view class="under-top">120 bpm</view>
				<view class="under-word">最高心率</view>
			</view>
			<view class="under-item">
				<view class="under-top">70 bpm</view>
				<view class="under-word">最低心率</view>
			</view>
			<view class="under-item">
				<view class="under-top">84 bpm</view>
				<view class="under-word">平均心率</view>
			</view>
		</view>
		<view class="under-box" v-if="selectedItem === 'item2'">
			<view class="under-item">
				<view class="under-top">8h23min</view>
				<view class="under-word">深睡时长</view>
			</view>
			<view class="under-item">
				<view class="under-top">2h18min</view>
				<view class="under-word">浅睡时长</view>
			</view>
			<view class="under-item">
				<view class="under-top">良好</view>
				<view class="under-word">睡眠质量</view>
			</view>
		</view>
		<view class="under-box" v-if="selectedItem === 'item3'">
			<view class="under-item">
				<view class="under-top">19 次</view>
				<view class="under-word">最高呼吸率</view>
			</view>
			<view class="under-item">
				<view class="under-top">11 次</view>
				<view class="under-word">最低呼吸率</view>
			</view>
			<view class="under-item">
				<view class="under-top">17 次</view>
				<view class="under-word">平均呼吸率</view>
			</view>
		</view>
		<!--</van-tab>
			 <van-tab title="月">
				<view class="top-box">
					<view class="container-top" @click="showMonthPicker = true">
						<view class="top-left">
							<view class="word">月份</view>
							<text>{{formatMonth(monthValue)}}</text>
						</view>
						<view class="top-right">
							<image src="/static/image/full.png" mode=""></image>
						</view>
					</view>
					<view class="chartsMain">
						<canvas canvas-id="canvasMonthArea" id="canvasMonthArea" class="charts"
							@touchstart="touchArea"></canvas>
					</view>
				</view>
				<content-page></content-page>
			</van-tab>
			<van-tab title="年">
				<view class="top-box">
					<view class="container-top" @click="showYearPicker = true">
						<view class="top-left">
							<view class="word">年份</view>
							<text>{{formatYear(yearValue)}}</text>
						</view>
						<view class="top-right">
							<image src="/static/image/full.png" mode=""></image>
						</view>
					</view>
					<view class="chartsMain">
						<canvas canvas-id="canvasYearArea" id="canvasYearArea" class="charts"
							@touchstart="touchArea"></canvas>
					</view>
				</view>
				<content-page></content-page>
			</van-tab>

		</van-tabs> -->
		<van-calendar :show="showDayPicker" @confirm="onConfirm" @close="showDayPicker = false"
			:default-date="currentDay" />

		<!-- <van-popup :show="showDayPicker" position="bottom">
			<van-datetime-picker @cancel="showDayPicker=false" @confirm="onConfirm" :value="currentDay" type="date" />
		</van-popup>
		<van-popup :show="showMonthPicker" position="bottom">
			<van-datetime-picker @cancel="showMonthPicker=false" @confirm="onMonthConfirm" type="year-month"
				:value="currentMonth" />
		</van-popup>
		<van-popup :show="showYearPicker" position="bottom">
			<van-datetime-picker @cancel="showYearPicker=false" @confirm="onYearConfirm" type="year"
				:value="currentYear" />
		</van-popup> -->
	</view>
</template>

<script>
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapGetters
	} from "vuex";
	// import * as infoApi from '@/api/info/index.js';
	import dayjs from "@/plugin/dayjs/dayjs.min.js";
	import contentPage from './components/content.vue'
	// 图表
	import uCharts from "@/components/ucharts/ucharts.js";
	// import uCharts from "@/components/u-charts/u-charts.js";
	var _self;
	var canvaRing = null;
	var canvaArea = null;
	var canvaGauge = null;
	var canvaPie = null;
	var canvaColumn = null;
	var canvaFunnel = null;
	var canvaWord = null;

	export default {
		computed: mapGetters(['isLogin', 'uid', 'deviceId']),
		components: {
			contentPage
		},
		data() {
			return {
				active: 2,
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				dayValue: new Date(),
				monthValue: new Date(),
				yearValue: new Date(),
				showDayPicker: false, //日
				showMonthPicker: false, //月
				showYearPicker: false, //年
				// minDate:new Date().getTime(),
				currentDay: new Date().getTime(),
				currentMonth: new Date().getTime(),
				currentYear: new Date().getTime(),
				fullscreen: false,
				dayInfo: {}, //日数据
				dayTimeList: [], //日X轴数据
				dayDataList: [], //日图表数据

				// 日折线图
				dayArea: {
					categories: [],
					// categories: ['08:22','08:22','08:22','08:22'],
					series: [{
						name: '学习前端',
						data: [],
						// data: [68,89,66,79],
						color: '#F35546'
					}]
				},
				// 月折线图
				monthArea: {
					categories: ['6月', '7月', '8月', ],
					series: [{
						name: '学习前端',
						data: [100, 80, 95, ],
						color: '#F35546'
					}]
				},
				// 年折线图
				yearArea: {
					categories: ['6月', '7月'],
					series: [{
						name: '学习前端',
						data: [100, 80, ],
						color: '#F35546'
					}]
				},
				selectedItem: 'item1',





				// 新
				Area: {
					categories: ['6月', '7月', '8月', '9月', '10月', '11月', '12月'],
					series: [{
						name: '学习前端',
						data: [100, 80, 95, 150, 112, 132, 151],
						color: '#facc14'
					}, {
						name: '学习后台',
						data: [70, 40, 65, 100, 44, 68, 78],
						color: '#2fc25b'
					}, {
						name: '学习设计',
						data: [35, 20, 25, 37, 4, 20, 39],
						color: '#1890ff'
					}]
				}


			};
		},
		onShow() {

		},
		async onLoad() {
			console.log(this.isLogin, '判断是否登录');
			// if (!this.isLogin) {
			// 	toLogin();
			// 	return
			// }

			_self = this;
			this.cWidth = uni.upx2px(630);
			this.cHeight = uni.upx2px(400);
			await this.getData()
			this.getServerData();
		},
		mounted() {},
		methods: {
			setSelectedItem(item) {
				this.selectedItem = this.selectedItem === item ? null : item;
			},
			getData() {
				console.log(this.deviceId, 88877766);
				let data = this.formatDate(this.dayValue).split("-"); // ["2023", "10", "18"]
				let params = {
					deviceId: this.deviceId,
					year: data[0],
					month: data[1],
					day: data[2],
					// day:"17",
				}
				return
				return infoApi.getHeartRate(params).then(res => {
						console.log(res, 44);
						if (res.data === null) {
							this.dayInfo = {}
							this.dayInfo.list = []
							this.dayArea.categories = []
						}
						if (res.code === 0 && res.data.list.length) {
							this.dayInfo = res.data
							// 组装接口数据。上方折线图若超过10条，截取10条
							let categoriesArr = res.data.list.map(item => this.formatHHmm(item.createTime))
							let seriesArr = res.data.list.map(item => item.heartRate)
							this.dayArea.categories = categoriesArr.length > 10 ? categoriesArr.slice(-10) :
								categoriesArr
							this.dayArea.series[0].data = seriesArr.length > 10 ? seriesArr.slice(-10) : seriesArr
						}
					})
					.catch(err => {
						return this.$util.Tips({
							title: err,
							// icon: 'error'
						});
					});
			},
			fullscreenFn() {
				wx.requestFullScreen({
					success: (res) => {
						console.log(res, 666);
						this.fullscreen = true

					}
				});
			},
			formatter(type, val) {
				if (type === 'year') {
					return `${val}年`;
				} else if (type === 'month') {
					return `${val}月`;
				}
				return val;
			},
			onYearConfirm(value) {
				console.log(value, 444);
				this.yearValue = value.detail
				this.showYearPicker = false
			},
			onMonthConfirm(value) {
				this.monthValue = value.detail
				this.showMonthPicker = false;
				console.log(this.formatMonth(this.monthValue), 777);
			},
			async onConfirm(value) {
				this.dayValue = value.detail;
				await this.getData()
				this.getServerData();
				this.showDayPicker = false;
			},
			formatHHmm: function(date) {
				return dayjs(date).format("HH:mm");
			},
			formatDate: function(date) {
				return dayjs(date).format("YYYY-MM-DD");
			},
			formatMonth: function(date) {
				return dayjs(date).format("YYYY-MM");
			},
			formatYear: function(date) {
				return dayjs(date).format("YYYY");
			},
			changeDay() {
				this.showDayPicker = true
			},
			getServerData() {
				console.log('是否先执行');
				_self.showArea("canvasArea", this.chartData, 'day');
				_self.showArea("canvasMonthArea", this.chartData, 'month');
				_self.showArea("canvasYearArea", this.chartData, 'year');

			},


			// 新
			showArea(canvasId, chartData) {
				canvaArea = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'area',
					fontSize: 11,
					legend: true,
					dataLabel: false,
					dataPointShape: true,
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					categories: _self.Area.categories,
					series: _self.Area.series,
					animation: true,
					xAxis: {
						type: 'grid',
						gridColor: '#CCCCCC',
						gridType: 'dash',
						dashLength: 8,
						disableGrid: true,
					},
					yAxis: {
						gridType: 'dash',
						gridColor: '#CCCCCC',
						dashLength: 8,
						splitNumber: 5,
						min: 10,
						max: 180,
					},
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					extra: {
						area: {
							type: 'straight',
							opacity: 0.2,
							addLine: true,
							width: 2
						}
					}
				});
			},



			// 折线图
			// showArea(canvasId, chartData, type) {
			// 	const categories = type == 'day' ? _self.dayArea.categories : type == 'month' ? _self.monthArea
			// 		.categories : _self.yearArea.categories
			// 	const series = type == 'day' ? _self.dayArea.series : type == 'month' ? _self.monthArea
			// 		.series : _self
			// 		.yearArea.series
			// 	canvaArea = new uCharts({
			// 		$this: _self,
			// 		canvasId: canvasId,
			// 		type: 'area',
			// 		fontSize: 11,
			// 		legend: {
			// 			show: false
			// 		},
			// 		dataLabel: true,
			// 		dataPointShape: true,
			// 		background: '#FFFFFF',
			// 		pixelRatio: _self.pixelRatio,
			// 		categories: categories,
			// 		series: series,
			// 		animation: true,
			// 		padding: [20, 10, 10, 10],
			// 		xAxis: {
			// 			type: 'grid',
			// 			gridColor: '#CCCCCC',
			// 			gridType: 'solid',
			// 			dashLength: 8,
			// 			disableGrid: true,
			// 			rotateLabel: true,
			// 			rotateAngle: -50,
			// 		},
			// 		yAxis: {
			// 			gridType: 'solid',
			// 			gridColor: '#CCCCCC',
			// 			dashLength: 8,
			// 			splitNumber: 5,
			// 			min: 10,
			// 			max: 180,
			// 		},
			// 		width: _self.cWidth * _self.pixelRatio,
			// 		height: _self.cHeight * _self.pixelRatio,
			// 		extra: {
			// 			area: {
			// 				type: 'straight',
			// 				// type: 'curve',
			// 				opacity: 0.2,
			// 				addLine: true,
			// 				width: 2
			// 			}
			// 		}
			// 	});
			// },

			touchArea(e) {
				canvaArea.showToolTip(e, {
					format: function(item, category) {
						return item.name + ' ' + category + ' ' + ':' + item.data
					}
				});
			},

		}
	};
</script>

<style lang="scss" scoped>
	// ::v-deep .van-tab__pane--active{
	// 	width: 100%;
	// }
	.box {
		padding: 20rpx 30rpx !important;
	}

	.user-box {
		// padding: 40rpx 30rpx;
		padding: 40rpx 70rpx 40rpx 30rpx;
		margin-bottom: 60rpx;
		background-color: #fff;
		border-radius: 15rpx;
		display: flex;
		align-items: center;

		image {
			width: 190rpx;
			height: 190rpx;
			border-radius: 50%;
		}

		.right-box {
			flex: 1;
			margin-left: 30rpx;

			.name {
				font-weight: 600;
				font-size: 48rpx;
				color: #2D2D2D;
				margin-bottom: 20rpx;
			}

			.info-box {
				display: flex;
				justify-content: space-between;

				.info-item {
					font-weight: 500;

					.number {
						font-size: 32rpx;
						color: #2D2D2D;
					}

					.word {
						font-size: 28rpx;
						color: #A6A6A6;
					}
				}
			}
		}
	}

	.content-box {
		// background-color: #F7F7F7;
		// height: 100vh;
		margin-bottom: 60rpx;

		.number-box {
			height: 120rpx;
			// background-color: #fff;
			display: flex;
			justify-content: space-between;

			.box-item {
				width: 210rpx;
				height: 120rpx;
				padding: 13rpx 20rpx;
				box-sizing: border-box;
				border-radius: 15rpx;
				background-color: #fff;

				text {
					font-size: 24rpx;
					font-weight: 400;
					color: #777777;
				}

				.item-top {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.item-word {
						font-weight: 500;
						font-size: 32rpx;
					}


					image {
						width: 30rpx;
						height: 25rpx;
					}

					.sleep-icon {
						width: 31rpx;
						height: 36rpx;
					}

					.breathe-icon {
						width: 32rpx;
						height: 28rpx;
					}
				}

				.item-under {
					display: flex;
					align-items: center;
					// margin-top: 12rpx;
					font-weight: 500;
					align-items: flex-end;

					.number {
						font-size: 36rpx;
					}

					.unit {
						font-size: 24rpx;
						margin-left: 19rpx;
					}

				}
			}

			.box-item.heart-selected {
				background: linear-gradient(180deg, #FF8E8E 0%, #EC3534 100%);
				color: #fff;
				/* 选中的字体颜色 */
			}

			.box-item.sleep-selected {
				background: linear-gradient(180deg, #80D2FF 0%, #56B6FF 100%);
				color: #fff;
				/* 选中的字体颜色 */
			}

			.box-item.breathe-selected {
				background: linear-gradient(180deg, #FFDE8F 0%, #FF9A55 100%);
				color: #fff;
				/* 选中的字体颜色 */
			}
		}

		.word-box {
			margin-top: 16rpx;
			background-color: #fff;
			padding: 32rpx;

			.word-title {
				font-size: 32rpx;
				font-weight: 600;
				color: #000000;
			}

			.word {
				font-size: 28rpx;
				font-weight: 400;
				color: #000000;
				line-height: 40rpx;
				margin-top: 18rpx;
			}
		}

		.list-box {
			margin-top: 16rpx;
			background-color: #fff;
			padding: 0 32rpx;


			.list-box-item {
				height: 88rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.list-box-left {
					display: flex;
					align-items: center;

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

					text {
						margin-left: 32rpx;
						font-size: 32rpx;
						font-weight: 400;
						color: #000000;
					}
				}

				.list-box-right {
					display: flex;
					font-size: 32rpx;
					font-weight: 600;
					color: #000000;

					.num {
						margin-right: 30rpx;
					}

				}
			}

		}
	}

	.top-box {
		padding: 28rpx 32rpx 19rpx;
		background-color: #fff;
		border-radius: 15rpx;

		.container-top {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 28rpx;

			.top-left {
				.word {
					font-size: 36rpx;
					font-weight: 500;
					color: #000000;
				}

				text {
					font-size: 24rpx;
					font-weight: 500;
					color: #777777;
					line-height: 33rpx;
				}
			}

			.top-right {
				width: 32rpx;
				height: 32rpx;

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

		.chartsMain {
			width: 100%;
			// height: 450rpx;
			// box-sizing: border-box;
			background: #fff;
			border-top: 2rpx solid #f2f2f2;
			text-align: center;

			image {
				width: 70%;
				// height: 100%;
			}

			.charts {
				width: 630rpx;
				height: 400rpx;
				box-sizing: border-box;
			}
		}
	}
	.under-box{
		width: 100%;
		height: 174rpx;
		box-sizing: border-box;
		margin-top: 30rpx;
		display: flex;
		justify-content: space-between;
		padding: 40rpx 30rpx;
		background-color: #fff;
		border-radius: 15rpx;
		.under-item{
			color: #2D2D2D;
			text-align: center;
			.under-top{
				font-weight: 600;
				font-size: 36rpx;
			}
			.under-word{
				font-size: 30rpx;
			}
		}
	}
</style>