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

<template>
	<view class="content-box">
		<!-- <line-chart></line-chart> -->
		<view class="number-box">
			<view class="box-item">
				<text>最低</text>
				<view class="item-under">
					<view class="item-under-left">
						<image src="/static/image/heart.png" mode=""></image>
						<text>{{dayInfo.min}}</text>
					</view>
					<text>BPM</text>
				</view>
			</view>
			<view class="box-item">
				<text>平均</text>
				<view class="item-under">
					<view class="item-under-left">
						<image src="/static/image/heart.png" mode=""></image>
						<text>{{dayInfo.avg}}</text>
					</view>
					<text>BPM</text>
				</view>
			</view>
			<view class="box-item">
				<text>最高</text>
				<view class="item-under">
					<view class="item-under-left">
						<image src="/static/image/heart.png" mode=""></image>
						<text>{{dayInfo.max}}</text>
					</view>
					<text>BPM</text>
				</view>
			</view>
		</view>
		<view class="list-box" v-if="dayInfo.list">
			<block v-for="(item,index) in dayInfo.list" :key="index">
				<view class="list-box-item">
					<view class="list-box-left">
						<image src="/static/image/hearticon.png" mode=""></image>
						<text>{{formatDate(item.createTime)}}</text>
					</view>
					<view class="list-box-right">
						<view class="num">{{item.heartRate}}</view>
						<view>BPM</view>
					</view>
				</view>
			</block>

		</view>
	</view>
</template>

<script>
	// import contentPage from './components/content'
	// 图表
	import uCharts from "@/components/ucharts/ucharts.js";
	import dayjs from "@/plugin/dayjs/dayjs.min.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 {
		props: {
		    dayInfo: {
		        type: Object,
		        default: {},
		    },
		},
		data() {
			return {
				list:[{time:'09:00',num:63},{time:'09:10',num:63},{time:'09:10',num:63}],
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				word1:'100<心率值<160，称为窦性心动过速;',
				word2:'45<心率值<60称为窦性心动过缓;',
				word3:'心率值<45，应考虑有病态窦房结综合症、房室传导阻滞等情况。',
			};
		},
		onLoad() {
			_self = this;
			this.cWidth = uni.upx2px(750);
			this.cHeight = uni.upx2px(420);
			this.getServerData();
		},
		computed: {

		},
		mounted() {

		},
		methods: {
			formatDate: function(date) {
				return dayjs(date).format("YYYY-MM-DD HH:mm:ss");
			},
		}
	};
</script>

<style lang="scss" scoped>
	.chartsMain {
		width: 750rpx;
		height: 450rpx;
		padding-top: 15rpx;
		background: #fff;
		margin-bottom: 24rpx;
		border-top: 2rpx solid #f2f2f2;

		.charts {
			width: 750rpx;
			height: 450rpx;
			box-sizing: border-box;
		}
	}
	.content-box {
		background-color: #F7F7F7;
		// height: 100vh;
	
		.number-box {
			height: 131rpx;
			background-color: #fff;
			display: flex;
			margin-top: 16rpx;
			padding: 16rpx 32rpx;
			justify-content: space-around;
	
			.box-item {
				width: 218rpx;
				padding: 10rpx 16rpx;
				box-sizing: border-box;
				border-radius: 12rpx;
				border: 2rpx solid rgba(119, 119, 119, 0.3);
				text{
					font-size: 24rpx;
					font-weight: 400;
					color: #777777;
				}
				.item-under {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-top: 12rpx;
	
					.item-under-left {
						image {
							width: 32rpx;
							height: 28rpx;
						}
	
						text {
							margin-left: 15rpx;
							font-size: 32rpx;
							font-weight: 400;
							color: #000000;
						}
					}
	
					text {
						font-size: 24rpx;
						font-weight: 400;
						color: #777777;
					}
				}
			}
		}
	
		.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;
					}
					
				}
			}
	
		}
	}
</style>