examTeamApp/pages/vitalcapacity/vitalcapacity.vue

<template>
	<view class="content">
		<!--  -->
		<view class="skiptop">
			<!-- <view class="status" @click="$Bluetooth.handleDevicesMac(isdevice,acd_id)"><text>设备连接</text></view> -->
			<view class="item">
				<view class="item-ite">平均吸气肺活量<text>{{info?info.average:'--'}}</text></view>
				<view class="item-ite">吸气速度<text>{{info?info.flow_val:'--'}}</text></view>
				<view class="item-ite">是否达标<text>{{info?info.level:'--'}}</text></view>
			</view>
		</view>
		<!--自由训练  -->
		<view class="box1">
			<view class="time">{{info?info.time:''}}</view>
			<view class="LiuS">吸气速度 <text class="cgreen ml-5">{{info?info.flow_val:'--'}}L/min</text></view>
			<view class="item">
				<view class="image">
					<image src="../../static/bae.png" mode="widthFix"></image>
				</view>
				<view class="center  mt-15">
					<view class="level"></view>
					<view class="level level-bg" :style="{'top':info?Number(100 - info.offset)+'%':'100%'}"></view>
					<view class="level-item" v-if="info">
						<view class="ite" v-for="(ite,ind) in info.list">{{ite.text}}</view>
					</view>
				</view>
			</view>
			<view class="val" v-if="info">
				<text>{{info.average}}</text>
				吸气肺活量平均值
			</view>
		</view>
		<!--  -->
		<view class="gridList">
			<view class="data">
				<view class="item" @click="navTo('/pages/vitalcapacity/charts')">
					<view class="image">
						<image src="../../static/charts.png"></image>
					</view>
					<view class="name">运动曲线</view>
				</view>
				<view class="item" @click="navTo('/pages/history/history?acd_id='+acd_id)">
					<view class="image">
						<image src="../../static/add.png"></image>
					</view>
					<view class="name">历史记录</view>
				</view>
				<view class="item" @click="navTo('/pages/compk/contrast?acd_id='+acd_id)">
					<view class="image">
						<image src="../../static/pk.png"></image>
					</view>
					<view class="name">数据对比</view>
				</view>
				<view class="item" @click="$store.commit('changeRecord',true)">
					<view class="image">
						<image src="../../static/history.png"></image>
					</view>
					<view class="name">添加记录</view>
				</view>
			</view>
		</view>
		<!-- 手动记录 -->
		<record :rtype='acd_id'></record>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	import record from '@/components/manuallyAdd/record.vue';
	export default {
		data() {
			return {
				LiuS: 0,
				acd_id: 8,
				isdevice: true,
			}
		},
		components: {
			record
		},
		computed: {
			...mapState(["MeasureLung"]),
			info() {
				return this.MeasureLung
			}
		},
		onLoad(options) {
			let that = this
			that.acd_id = options.acd_id
			that.isdevice = options.device
			that.$store.dispatch("getLungResult", {
				aud_id: uni.getStorageSync('userid')
			})
		},
		methods: {
			// 历史数据删除时重新加载接口
			reload() {
				let that = this
				console.log('重新加载');
				this.$nextTick(() => {
					that.$store.dispatch("getLungResult", {
						aud_id: uni.getStorageSync('userid')
					})
				})
			},
			navTo(url) {
				uni.navigateTo({
					url: url
				})
			},

		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		padding-top: 10px;
		min-height: 100vh;
		background-color: #000;
	}

	.box1 {
		color: #fff;
		margin: 15px;
		width: calc(100%- 30px);

		.time {
			width: 100%;
			font-size: 14px;
			margin-bottom: 20px;
		}

		.LiuS {
			width: 60%;
			margin: auto;
			position: relative;
			text-align: center;
			border-radius: 10px;
			background-color: #272a2a;
			height: 30px;
			line-height: 30px;
		}

		.LiuS:after {
			content: "";
			position: absolute;
			left: 45%;
			bottom: -7px;
			width: 0px;
			height: 0px;
			border-left: 5px solid transparent;
			border-right: 5px solid transparent;
			border-top: 8px solid #272a2a;
		}

		.item {
			width: 100%;
			font-size: 14px;
			padding: 10px 0;
			border-radius: 15px;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 15px;
			position: relative;

			.image {
				width: 80%;

				image {
					margin-top: 10px;
					width: 100%;
				}
			}

			.center {
				top: 0px;
				bottom: -0px;
				position: absolute;
				width: 55px;
				margin: auto;
				text-align: center;
				background-color: #333;
				border-radius: 10px;
				z-index: 9;
			}

			.level-bg {
				position: absolute;
				width: 55px;
				margin: auto;
				text-align: center;
				background-color: #4d6c7b;
				border-radius: 0 0 10px 10px;
				bottom: 0px;
				z-index: 19;
			}

			.level-item {
				width: 55px;
				height: 100%;
				position: absolute;
				z-index: 99;

				:last-child {
					border-bottom: none;
				}

			}

			.ite {
				margin: 0 5px;
				width: calc(100% - 10px);
				height: 40px;
				line-height: 40px;
				font-size: 12px;
				color: #fff;
				z-index: 99;
				border-bottom: 1px solid #999;
			}
		}

		.val {
			width: 100%;
			text-align: center;
			margin: 20px 0;
			color: #fff;
			font-size: 14px;

			text {
				display: block;
				color: #39D9C9 !important;
				font-size: 32px;
				margin-bottom: 10px;
			}
		}
	}

	.box {
		padding: 0;
		display: flex;
		flex-wrap: wrap;
		border-radius: 10px;
		margin: 15px;
		width: calc(100%- 30px);
		justify-content: space-between;

		.data {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			justify-content: space-between;
			width: 100%;
		}

		.item {
			width: 47.5%;
			font-size: 14px;
			background: #fff;
			padding: 10px 0;
			border-radius: 15px;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 15px;
		}

		.val {
			width: 40px;
			height: 40px;
			border-radius: 50%;

			image {
				width: 70%;
				height: 70%;
			}
		}
	}
</style>