307 lines
8.5 KiB
Vue
307 lines
8.5 KiB
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> |