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

<template>
	<view class="app">
		<!-- <img src="../images/beijing.png" alt="" class="background-image" /> -->
		<view class="health" v-if="healthdata">
			<view class="health_top">
				<image v-if="healthdata.hiEva < 650" :src="require('../images/red.png')" />
				<image v-else-if="healthdata.hiEva >= 650&&healthdata.hiEva<850"
					:src="require('../images/yellow.png')" />
				<image v-else-if="healthdata.hiEva >=850" :src="require('../images/green.png')" />
				<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.sbp:''}}/{{healthdata.physicalSign.bp.dbp?healthdata.physicalSign.bp.dbp:''}}
				</view>
				<view class="healthitem">
					空腹血糖(mmol/L)：{{healthdata.physicalSign.bg.bg?healthdata.physicalSign.bg.bg:''}}
				</view>
				<view class="healthitem">
					血脂(TC/LDL-C)：{{healthdata.physicalSign.bf.tc?healthdata.physicalSign.bf.tc:''}}/{{healthdata.physicalSign.bf.ldlc?healthdata.physicalSign.bf.ldlc:''}}
				</view>
				<view class="healthitem">
					体质指数(BMI)：{{healthdata.physicalSign.bmi.bmi?healthdata.physicalSign.bmi.bmi:''}}
				</view>
				<view class="healthitem">
					腰围(cm)：{{healthdata.physicalSign.waist.waist?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="bloodpressure" />
			</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="datalist" />
			</view>
			<view class="zx">
				<view class="title">
					BMI变化趋势
				</view>
				<qiun-data-charts type="line" loadingType="0" :opts="line_opts" :ontouch="true" :chartData="BMIdata" />
			</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: ["#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					// fontColor: '#fff',
					// background: 'rgba(0, 22, 58, 1)',
					dataLabel: true,
					enableScroll: true,
					touchMoveLimit: 24,
					padding: [15, 10, 0, 15],
					xAxis: {
						lineHeight: 40,
						disableGrid: true,
						boundaryGap: "center",
						fontSize: 12,
						type: 'grid',
						gridType: 'dash',
						color: '#fff',
						itemCount: 3, //x轴单屏显示数据的数量，默认为5个
						scrollShow: true, //新增是否显示滚动条，默认false
						scrollAlign: 'left', //滚动条初始位置
						// fontColor: '#fff',
						// background: 'rgba(0, 22, 58, 1)',
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2,
						fontColor: '#fff',
						fontSize: 14,
						// background: 'rgba(0, 22, 58, 1)',
					},
					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
					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血脂变化趋势
					this.healthdata.evaAnalysis && this.healthdata.evaAnalysis.bf && this.healthdata.evaAnalysis.bf
						.series && this.healthdata.evaAnalysis.bf.series.length > 0 && this.healthdata
						.evaAnalysis.bf.series[0].data ? res
						.series[0].data = this.healthdata.evaAnalysis.bf.series[0].data : ''
					this.healthdata.evaAnalysis && this.healthdata.evaAnalysis.bf && this.healthdata.evaAnalysis.bf
						.series && this.healthdata.evaAnalysis.bf.series.length > 0 && this.healthdata.evaAnalysis
						.bf.series[1].data ? res
						.series[1].data = this.healthdata.evaAnalysis.bf.series[1].data : ''
					this.healthdata.evaAnalysis && this.healthdata.evaAnalysis.bf && this.healthdata.evaAnalysis.bf
						.xValue.length > 0 ? res.categories = this.healthdata.evaAnalysis
						.bf.xValue : ''
					//bg血糖
					this.healthdata.evaAnalysis && this.healthdata.evaAnalysis.bg && this.healthdata.evaAnalysis.bg
						.series && this.healthdata.evaAnalysis.bg.series.length > 0 && this.healthdata.evaAnalysis
						.bg.series[0].data ?
						resbloodsugar.series[0].data = this.healthdata.evaAnalysis.bg.series[0].data : ''
					this.healthdata.evaAnalysis.bg.xValue.length > 0 ? resbloodsugar.categories = this.healthdata
						.evaAnalysis.bg.xValue : ''
					//bmi体脂
					this.healthdata.evaAnalysis && this.healthdata.evaAnalysis.bmi && this.healthdata.evaAnalysis
						.bmi.series && this.healthdata.evaAnalysis
						.bmi.series.length > 0 ?
						resBMI.series[0].data = this.healthdata.evaAnalysis.bmi.series[0].data : ''
					this.healthdata.evaAnalysis.bmi && this.healthdata.evaAnalysis.bmi.xValue && this.healthdata
						.evaAnalysis.bmi.xValue.length > 0 ? resBMI
						.categories = this.healthdata
						.evaAnalysis.bmi.xValue : ''
					//bp血压
					this.healthdata.evaAnalysis.bp && this.healthdata.evaAnalysis.bp.series && this.healthdata
						.evaAnalysis.bp.series[0] ?
						resbloodpressure.series[0].data = this.healthdata.evaAnalysis.bp.series[0].data : ""
					this.healthdata.evaAnalysis.bp && this.healthdata.evaAnalysis.bp.series && this.healthdata
						.evaAnalysis.bp.series[1] ?
						resbloodpressure.series[1].data = this.healthdata.evaAnalysis.bp.series[1].data : ""
					this.healthdata.evaAnalysis.bp && this.healthdata.evaAnalysis.bp.xValue && this.healthdata
						.evaAnalysis.bp.xValue.length > 0 ? 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 {
		// padding: 100rpx 40rpx;
		text-align: center;
		font-size: 36rpx;
		// color: #fff;
		padding: 0;

		.background-image {
			width: 100%;
			height: 100vh;
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;
		}

		// 健康
		.health {
			width: 100%;
			margin: 0 auto;
			padding-bottom: 40rpx;

			.health_top {
				width: 100%;

				.right {
					position: relative;
					font-size: 20rpx;
					width: 30rpx;
					height: 30rpx;
					background: red;
					top: 30rpx;
					line-height: 30rpx;
					left: 471rpx;
				}

				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: 20rpx 0 20rpx 62rpx;
					font-size: 29rpx;
					color: #26A888;
					margin: 10rpx auto;
					background-color: RGBA(38, 168, 136, 0.1);
				}
			}

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

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