siyu_app/pages_watch/healthMonitoring/pressure.vue

<template>
	<view class="container">
		<uni-nav-bar fixed :border="false" :backgroundColor="`rgba(255,255,255,${opacity})`" title="压力" :statusBar="true"
			left-icon="left" @clickLeft="back"></uni-nav-bar>
		<image class="page-bg" src="@/static/images/pages_watch/images/heart_rate_top_bg.png" mode="widthFix"></image>
		<view class="container-body">
			<dateTimePicker @onChange="onChangeTime" />
			<!-- 压力值 -->
			<view class="box">
				<view class="echartbox">
					<qiun-data-charts v-show="!isEmpty" type="column" :opts="opts" :chartData="chartData"
						tooltipFormat="pressureTooltip" />
					<myEmpty v-show="isEmpty" style="padding: 40rpx 0 0 0;"></myEmpty>
				</view>
				<view class="legend" v-show="!loading && !isEmpty">
					<view class="legend-item">
						<view class="legend-dot" style="background-color: #13c3fc;"></view><text>放松</text>
					</view>
					<view class="legend-item">
						<view class="legend-dot" style="background-color: #05b981;"></view><text>正常</text>
					</view>
					<view class="legend-item">
						<view class="legend-dot" style="background-color: #f8a03f;"></view><text>尚可</text>
					</view>
					<view class="legend-item">
						<view class="legend-dot" style="background-color: #f54f51;"></view><text>高</text>
					</view>
				</view>
			</view>
			<!-- 压力值 -->
			<view class="box">
				<view class="abnormal">
					<view class="abnormal-item colorbg4">
						<view class="abnormal-item-title">放松</view>
						<view class="abnormal-item-num">
							<text>{{status1}}次</text>
							<image src="@/static/images/pages_watch/icons/zyss_arrow_icon4.png"></image>
						</view>
					</view>
					<view class="abnormal-item colorbg5">
						<view class="abnormal-item-title">正常</view>
						<view class="abnormal-item-num">
							<text>{{status2}}次</text>
							<image src="@/static/images/pages_watch/icons/zyss_arrow_icon5.png"></image>
						</view>
					</view>
					<view class="abnormal-item colorbg2">
						<view class="abnormal-item-title">尚可</view>
						<view class="abnormal-item-num">
							<text>{{status3}}次</text>
							<image src="@/static/images/pages_watch/icons/zyss_arrow_icon2.png"></image>
						</view>
					</view>
					<view class="abnormal-item colorbg1">
						<view class="abnormal-item-title">高</view>
						<view class="abnormal-item-num">
							<text>{{status4}}次</text>
							<image src="@/static/images/pages_watch/icons/zyss_arrow_icon1.png"></image>
						</view>
					</view>
				</view>
				<view class="standard">
					<view class="standard-title">
						<image src="@/static/images/pages_watch/icons/note_icon.png"></image>
						<text>温馨提醒</text>
					</view>
					<view class="linebox">
						<view class="line line1">
							<text>放松</text>
							<view class="bar"></view>
						</view>
						<view class="line line2">
							<text>正常</text>
							<view class="bar"></view>
						</view>
						<view class="line line3">
							<text>尚可</text>
							<view class="bar"></view>
						</view>
						<view class="line line4">
							<text>高</text>
							<view class="bar"></view>
						</view>
					</view>
					<view class="standard-con">
						<view>压力值由心率变异性计算而来，得分越高，压力值越大。</view>
						<!-- <view>此功能开启后，会常亮心率灯，可能会影响设备的续航时间。</view> -->
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import myEmpty from "@/pages_watch/components/myEmpty/myEmpty.vue"
	import dateTimePicker from "@/pages_watch/components/dateTimePicker/dateTimePicker.vue"
	import {fatigueInfo,fatigueCount} from "@/api/pages_watch/healthMonitoring.js";
	
	export default {
		components: {
			myEmpty,
			dateTimePicker
		},
		data() {
			return {
				opacity: 0,
				loading: false,
				isEmpty: false,
				status1: 0,
				status2: 0,
				status3: 0,
				status4: 0,
				chartData: {},
				opts: {
					padding: [15, 0, 15, 0],
					enableScroll: false,
					dataLabel: false,
					legend: {
						show: false
					},
					xAxis: {
						disableGrid: true,
						fontSize: 12,
						axisLine: false,
						fontColor: '#ccc',
						labelCount: 7,
						format: "formatterTime",
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2,
						data: [{
							fontColor: '#ccc',
							min: 0,
							// max: 100,
							axisLine: false,
							fontSize: 12,
						}]
					},
					extra: {
						tooltip: {
							gridType: "dash",
							showArrow: false,
							legendShow: true,
							legendShape: "circle"
						},
						column: {
							type: "group",
							width: 12,
							barBorderRadius: [4, 4, 0, 0],
						}
					}
				}
			}
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			onChangeTime(time) {
				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.getServerData(param)
				this.getAbnormalInfo(param)
			},
			getServerData(param) {
				this.loading = true
				fatigueInfo(param).then((res) => {
					this.loading = false
					this.isEmpty = !(res.data && res.data && res.data.length>0)
				  if(res.code == 200 && res.data) {
					  let chartData = {
					  	categories: res.data.map(item => item.createTime),
					  	series: [{
					  		name: "压力值",
					  		data: res.data.map(item => ({
					  			value: item.pressure,
					  			color: item.status==1?'#13c3fc':item.status==2?'#05b981':item.status==3?'#f8a03f':item.status==4?'#f54f51':'#eee'
					  		}))
					  	}]
					  }
					  this.chartData = JSON.parse(JSON.stringify(chartData));
				  } else {
				  }
				}).catch((err) => { 
					this.loading = false
				});
			},
			// 获取异常数据
			getAbnormalInfo(param) {
				this.status1 = 0
				this.status2 = 0
				fatigueCount(param).then((res) => {
					if (res.code == 200 && res.data && res.data.length > 0) {
						// 0:正常，1：偏低2:偏高
						res.data.forEach(item => {
							this.status1 += item.status == 1 ? item.count : 0
							this.status2 += item.status == 2 ? item.count : 0
							this.status3 += item.status == 3 ? item.count : 0
							this.status4 += item.status == 4 ? item.count : 0
						})
					}
				}).catch((err) => {});
			},
		},
		onPageScroll(e) {
			if (e.scrollTop <= 44) {
				this.opacity = e.scrollTop / 44 * 1
			} else if (e.scrollTop > 44) {
				this.opacity = 1
			}
		
		}
	}
</script>

<style lang="scss" scoped>
	@mixin u-flex($flexD, $alignI, $justifyC) {
		display: flex;
		flex-direction: $flexD;
		align-items: $alignI;
		justify-content: $justifyC;
	}
	.linebox {
		margin-top: 16rpx;
		margin-bottom: 40rpx;
		@include u-flex(row, center, flex-start);
		width: 100%;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		.bar {
			width: 100%;
			height: 40rpx;
			position: relative;
			&::after {
				position: absolute;
				bottom: -40rpx;
				left: -0.5em;
				content: '0';
				color: #222222;
			}
		}
		.line {
			@include u-flex(column, center, center);
			padding: 0 2rpx 10rpx 2rpx;
		}
		.line1 {
			width: 30%;
			color: rgb(19,195,252);
			.bar {
				background-color: rgb(19,195,252);
				border-radius: 20rpx 0 0 20rpx;
				&::after {
					left: 0;
				}
			}
		}
		.line2 {
			width: 30%;
			color: rgb(5,185,129);
			.bar {
				background-color: rgb(5,185,129);
				&::after {
					content: '30';
				}
			}
		}
		.line3 {
			width: 20%;
			color: rgb(248,160,63);
			.bar {
				background-color: rgb(248,160,63);
				&::after {
					content: '60';
				}
			}
		}
		.line4 {
			width: 20%;
			color: rgb(245,79,81);
			.bar {
				background-color: rgb(245,79,81);
				border-radius: 0 20rpx 20rpx 0;
				&::after {
					content: '80';
				}
				&::before {
					position: absolute;
					bottom: -40rpx;
					right: -0.5em;
					content: '100';
					color: #222222;
				}
			}
		}
	}
	.container {
		padding: 0 24rpx;
		position: relative;
	}

	.page-bg {
		width: 100%;
		height: auto;
		position: absolute;
		top: 0;
		left: 0;
	}

	.container-body {
		position: relative;
		z-index: 1;
		padding-bottom: 24rpx;
	}

	.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;
			}
		}
	}

	.box {
		padding: 24rpx;
		margin-bottom: 20rpx;
		box-sizing: border-box;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}
	.ytitle {
		margin-top: 10rpx;
		line-height: 34rpx;
		margin-bottom: 24rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #999999;
	}
	.echartbox {
		height: 506rpx;
		width: 100%;
	}

	.legend {
		height: 48rpx;
		// margin-top: 44rpx;
		margin-bottom: 24rpx;
		@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;
		}
	}

	.abnormal {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #757575;
		@include u-flex(row, center, flex-start);
		flex-wrap: wrap;
		// gap: 18rpx;
		margin-top: 20rpx;
		margin-bottom: -18rpx;
		margin-right: -18rpx;
		&-item {
			width: 206rpx;
			height: 144rpx;
			padding: 0 24rpx;
			margin: 0 18rpx 18rpx 0;
			box-sizing: border-box;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			border: 2rpx solid #FCF4F4;
			@include u-flex(column, flex-start, center);
	
			&-title {
				font-weight: 500;
				font-size: 32rpx;
				color: #333333;
				margin-bottom: 12rpx;
			}
	
			image {
				width: 24rpx;
				height: 24rpx;
			}
	
			&-num {
				width: 100%;
				@include u-flex(row, center, space-between);
			}
		}
	
		.colorbg1 {
			background: #FFFCFC;
			border-color: #FCF4F4;
		}
	
		.colorbg2 {
			background: #FEFAF8;
			border-color: #FDF7F3;
		}
	
		.colorbg3 {
			background: #FAFBFF;
			border-color: #F2F7FE;
		}
	
		.colorbg4 {
			background: #FAFCFF;
			border-color: #F6FAFF;
		}
	
		.colorbg5 {
			background: #FAFFFC;
			border-color: #EBFFF3;
		}
	}

	.standardbox {
		background: linear-gradient(360deg, #FFFFFF 0%, #FFF5EC 100%);
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		border: 2rpx solid #FFFFFF;
		margin-bottom: 20rpx;
	}

	.standard {
		padding: 24rpx;
		margin-top: 32rpx;
		border-radius: 16rpx 16rpx 16rpx 16rpx;

		&-title {
			@include u-flex(row, center, flex-start);
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #333333;

			image {
				width: 48rpx;
				height: 48rpx;
				margin-right: 14rpx;
			}
		}

		&-con {
			margin-top: 28rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #757575;

			view {
				margin-bottom: 12rpx;
				padding-left: 24rpx;
				position: relative;

				&::before {
					content: "";
					width: 8rpx;
					height: 8rpx;
					background: rgba(255, 119, 0, 0.5);
					border-radius: 50%;
					position: absolute;
					left: 0;
					top: 50%;
					transform: translateY(-50%);
				}
			}
		}
	}
</style>