xinelu-applet-ui/pagesB/Healthindex/Healthindex.vue

<template>
	<view class="app">
		<view class="health" v-if="healthdata">
			<view class="health_top">
				<image image v-if="healthdata.hiEva<650" :src="require('../images/red.png')">
					<image image v-if="healthdata.hiEva>850" :src="require('../images/green.png')" image>
						<image v-if="healthdata.hiEva > 650" :src="require('../images/yellow.png')" image>
							<view class="count">
								<view class="numbers">{{healthdata.hiEva}}</view>
								<view class="healths">健康指数</view>
							</view>
			</view>
			<view class="health_body">
				<view class="healthitem">
					血压（mmHg)：{{healthdata.physicalSign.bp.sbp}}/{{healthdata.physicalSign.bp.dbp}}
				</view>
				<view class="healthitem">
					空腹血糖（mmol/L)：{{healthdata.physicalSign.bg.bg}}
				</view>
				<view class="healthitem">
					血脂（TC/LDL-C)：{{healthdata.physicalSign.bf.tc}}/{{healthdata.physicalSign.bf.ldlc}}
				</view>
				<view class="healthitem">
					体质指数（BMI)：{{healthdata.physicalSign.bmi.bmi}}
				</view>
				<view class="healthitem">
					腰围（cm）：{{healthdata.physicalSign.waist.waist}}
				</view>
			</view>
			<!-- 折线图 -->
			<view class="zx">
				<view class="title">
					血脂变化趋势
				</view>
				<qiun-data-charts type="line" loadingType="0" :opts="line_opts" :ontouch="true" :chartData="datalist" />
			</view>
			<view class="zx">
				<view class="title">
					空腹血糖变化趋势
				</view>
				<qiun-data-charts type="line" loadingType="0" :opts="line_opts" :ontouch="true"
					:chartData="bloodsugar" />
			</view>
			<view class="zx">
				<view class="title">
					体质指数变化趋势
				</view>
				<qiun-data-charts type="line" loadingType="0" :opts="line_opts" :ontouch="true" :chartData="BMIdata" />
			</view>
			<view class="zx">
				<view class="title">
					血脂变化趋势
				</view>
				<qiun-data-charts type="line" loadingType="0" :opts="line_opts" :ontouch="true"
					:chartData="bloodpressure" />
			</view>
		</view>
	</view>
</template>

<script>
	import {
		healthIndexdata
	} from "@/api/pagesB/threeHundredAndSixty/threeHundredAndSixty.js"
	export default {
		data() {
			return {
				datalist: null, //血脂
				bloodsugar: null, //血糖
				BMIdata: null, //体脂
				bloodpressure: null, //血压

				checked: true,
				cardNo: '',
				healthdata: {},
				line_opts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					dataLabel: true,
					enableScroll: true,
					touchMoveLimit: 24,
					padding: [15, 10, 0, 15],
					xAxis: {
						lineHeight: 40,
						disableGrid: true,
						boundaryGap: "center",
						fontSize: 10,
						type: 'grid',
						gridType: 'dash',
						itemCount: 3, //x轴单屏显示数据的数量，默认为5个
						scrollShow: true, //新增是否显示滚动条，默认false
						scrollAlign: 'left', //滚动条初始位置
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2
					},
					extra: {
						line: {
							type: "straight",
							width: 2,
							activeType: "hollow"
						}
					}
				},

			}
		},
		onShow() {
			// 健康指数

		},
		mounted() {
			this.infohealths()
			this.getServerData()
		},
		methods: {
			infohealths() {
				if (uni.getStorageSync("userinfo").cardNo) {
					// this.cardNo=uni.getStorageSync("userinfo").cardNo
					this.cardNo = '370522196411282177'
					healthIndexdata(this.cardNo).then(res => {
						this.healthdata = res.data
					})
				}

			},
			getServerData() {
				// if (this.healthdata) {
				setTimeout(() => {
					let res = {
						categories: [],
						series: [{
								name: "总胆固醇",
								data: []
							},
							{
								name: "低密度脂蛋白胆固醇",
								data: []
							},
						]
					}
					let resbloodsugar = {
						categories: [],
						series: [{
								name: "空腹血糖",
								data: []
							},

						]
					}
					let resBMI = {
						categories: [],
						series: [{
								name: "体质指数",
								data: []
							},

						]
					}
					let resbloodpressure = {
						categories: [],
						series: [{
								name: "收缩压",
								data: []
							},
							{
								name: "舒张压",
								data: []
							},

						]
					}
					// bf血脂变化趋势
					res.series[0].data = this.healthdata.evaAnalysis.bf.series[0].data
					res.series[1].data = this.healthdata.evaAnalysis.bf.series[1].data
					res.categories = this.healthdata.evaAnalysis.bf.xValue
					//bg血糖
					resbloodsugar.series[0].data = this.healthdata.evaAnalysis.bg.series[0].data
					resbloodsugar.categories = this.healthdata.evaAnalysis.bg.xValue
					//bmi体脂
					resBMI.series[0].data = this.healthdata.evaAnalysis.bmi.series[0].data
					resBMI.categories = this.healthdata.evaAnalysis.bmi.xValue
					//bp血压
					resbloodpressure.series[0].data = this.healthdata.evaAnalysis.bp.series[0].data
					resbloodpressure.series[1].data = this.healthdata.evaAnalysis.bp.series[1].data
					resbloodpressure.categories = this.healthdata.evaAnalysis.bp.xValue
					this.datalist = res
					this.bloodsugar = resbloodsugar
					this.BMIdata = resBMI
					this.bloodpressure = resbloodpressure
				}, 500)

			},


		}
	}
</script>

<style lang="scss">
	.app {
		height: 100vh;
		background-color: #fff;
		// padding: 100rpx 40rpx;
		text-align: center;
		font-size: 36rpx;

		// 健康
		.health {
			width: 100%;
			margin: 0 auto;

			// background: red;
			.health_top {
				width: 100%;

				// height: 100%;
				// background: #FBDA81;
				.right {
					position: relative;
					font-size: 20rpx;
					width: 30rpx;
					height: 30rpx;
					background: red;
					top: 30rpx;
					line-height: 30rpx;
					left: 471rpx;
					// left: 288rpx;

				}

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

				.count {
					position: relative;
					top: -158rpx;

					.numbers {
						font-weight: 600;
						font-size: 25rpx;
						margin-bottom: 10rpx;
					}

					.healths {
						font-size: 22rpx;
					}
				}
			}

			.health_body {
				width: 100%;

				.healthitem {
					text-align: left;
					padding: 0 0 40rpx 62rpx;
					font-size: 29rpx;

					// padding-bottom: 40rpx;
					// position: relative;
					// left: -53rpx;

				}

			}

			.zx {
				width: 96%;
				margin: 33rpx auto;
				height: 400rpx;

				.title {
					font-size: 25rpx;
					text-align: left;
					margin-left: 30rpx;
				}
			}

		}
	}
</style>