ai-watch-app/pages/index/index.vue

577 lines
9.1 KiB
Vue

<template>
<view>
<tm-nav-bar left-icon="arrow-left" title="家庭健康" @clickLeft="back" />
<view class="content">
<z-paging ref="paging" v-model="dataList" @query="queryList">
<view class="content-header">
<view class="left">
<view class="title">
家庭健康管理
</view>
<view class="desc">
<text class="">共享健康</text>
<text class="">守护家人</text>
</view>
</view>
<view class="right">
<image class="img" src="../../static/logo.png" mode=""></image>
</view>
</view>
<view class="content-item">
<view class="title">
{{getNameByKey('bloodGlucose')}}
</view>
<view class="time">
{{list.bloodGlucose.date? list.bloodGlucose.date + '更新' : '--'}}
</view>
<view class="date">
{{list.bloodGlucose.bloodGlucose}}
<text class="icon">℃</text>
</view>
<view class="bg">
<image src="../../static/icon/血糖.png" mode="widthFix"></image>
</view>
</view>
<view class="content-item">
<view class="title">
{{getNameByKey('bloodGlucose')}}
</view>
<view class="time">
{{list.bloodGlucose.date? list.bloodGlucose.date + '更新' : '--'}}
</view>
<view class="date">
{{list.bloodGlucose.bloodGlucose}}
<text class="icon">℃</text>
</view>
<view class="bg">
<image src="../../static/icon/血压.png" mode="widthFix"></image>
</view>
</view>
<view class="content-item">
<view class="title">
{{getNameByKey('bloodGlucose')}}
</view>
<view class="time">
{{list.bloodGlucose.date? list.bloodGlucose.date + '更新' : '--'}}
</view>
<view class="date">
{{list.bloodGlucose.bloodGlucose}}
<text class="icon">℃</text>
</view>
<view class="bg">
<image src="../../static/icon/体温计.png" mode="widthFix"></image>
</view>
</view>
<view class="content-item">
<view class="title">
{{getNameByKey('bloodGlucose')}}
</view>
<view class="time">
{{list.bloodGlucose.date? list.bloodGlucose.date + '更新' : '--'}}
</view>
<view class="date">
{{list.bloodGlucose.bloodGlucose}}
<text class="icon">℃</text>
</view>
<view class="bg">
<image src="../../static/icon/脉率.png" mode="widthFix"></image>
</view>
</view>
</z-paging>
</view>
<navtab :current="0"></navtab>
</view>
</template>
<script>
export default {
data() {
return {
dataList: [],
keyNameMap: {
bloodGlucose: "血糖",
bloodLiquid: "血液",
bloodOxygen: "血氧",
bloodPressure: '血压',
heartReat: '心率',
meiTuo: '梅拖',
pulseReat: '脉率',
updataDate: '更新时间'
},
list: {
bloodGlucose: {
date: "2024-07-02-17-30",
step: {
"stepCount": 0,
"amountOfExercise": 85,
"distance": 0,
"calorie": 0,
"wear": 1
},
sleepData: [
0,
0,
0,
0,
0,
255
],
pulseReat: [
0,
0,
0,
0,
0
],
heartReat: [
0,
0,
0,
0,
0
],
respirationRate: [
255,
255,
255,
255,
255
],
HRVData: [
0,
255,
255,
255,
255,
255,
255,
255,
255,
255,
255,
255,
255,
255,
255,
255,
255,
255,
255,
255,
255,
255,
255,
255,
255,
255,
255,
255,
255,
255,
255,
255,
255,
255,
255,
255,
255,
255,
255,
255,
255,
255,
255,
255,
255,
255,
255,
255,
255,
255,
255
],
bloodPressure: {
"bloodPressureHigh": 0,
"bloodPressureLow": 0
},
bloodOxygen: [
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
64,
64,
0,
0
],
"sleepAmountActivity": [
0,
0,
0,
0,
0
],
"sleepStatus": [
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
1
],
reset: {
"time": 32,
"reset": 0
},
g5Series: [
0,
0,
0,
0,
0
],
bloodGlucose: 0,
meiTuo: [
10
],
pressure: [
0
],
bloodLiquid: {
"cholesterol": 0,
"triacylglycerol": 0,
"highDensity": 0,
"lowDensity": 0,
"uricAcidVal": 0
},
bodyTemperature: ""
},
pulseReat: null,
meiTuo: {
date: "2024-07-02-17-30",
step: {
"stepCount": 0,
"amountOfExercise": 85,
"distance": 0,
"calorie": 0,
"wear": 1
},
sleepData: [
0,
0,
0,
0,
0,
255
],
pulseReat: [
0,
0,
0,
0,
0
],
heartReat: [
0,
0,
0,
0,
0
],
respirationRate: [
255,
255,
255,
255,
255
],
HRVData: [
0,
255,
255,
255,
255,
255,
255,
255,
255,
255,
255,
255,
255,
255,
255,
255,
255,
255,
255,
255,
255,
255,
255,
255,
255,
255,
255,
255,
255,
255,
255,
255,
255,
255,
255,
255,
255,
255,
255,
255,
255,
255,
255,
255,
255,
255,
255,
255,
255,
255,
255
],
bloodPressure: {
"bloodPressureHigh": 0,
"bloodPressureLow": 0
},
bloodOxygen: [
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
64,
64,
0,
0
],
sleepAmountActivity: [
0,
0,
0,
0,
0
],
sleepStatus: [
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
1
],
reset: {
"time": 32,
"reset": 0
},
g5Series: [
0,
0,
0,
0,
0
],
bloodGlucose: 0,
meiTuo: [
10
],
pressure: [
0
],
bloodLiquid: {
"cholesterol": 0,
"triacylglycerol": 0,
"highDensity": 0,
"lowDensity": 0,
"uricAcidVal": 0
},
bodyTemperature: ""
}
}
}
},
onLoad() {
console.log('123')
},
methods: {
queryList(pageNo, pageSize) {
this.$refs.paging.complete([]);
},
getNameByKey(key) {
return this.keyNameMap[key] || "Key not found";
}
}
}
</script>
<style lang="scss" scoped>
.content {
padding: 20rpx 30rpx;
margin-top:20rpx;
.content-header {
-webkit-box-shadow: 0 0 60rpx 0 rgba(43,86,112,.1) ;
box-shadow: 0 0 60rpx 0 rgba(43,86,112,.1) ;
margin-bottom: 30rpx;
border-radius: 30rpx;
padding: 30rpx;
display: flex;
align-items: center;
justify-content: space-between;
margin: 30rpx 0rpx;
margin-top: 140rpx;
.left {
.title {
font-size: 40rpx;
font-weight: 900;
margin-bottom: 20rpx;
}
.desc {
font-size: 26rpx;
}
}
.right {
.img {
width: 160rpx;
height: 160rpx;
}
}
}
.content-item {
margin: 30rpx;
padding: 30rpx;
border: none;
border-radius: 30rpx ;
-webkit-box-shadow: 0 0 60rpx 0 rgba(43,86,112,.1) ;
box-shadow: 0 0 60rpx 0 rgba(43,86,112,.1) ;
position: relative;
height: 200rpx;
overflow: hidden;
.title {
font-size: 38rpx;
font-weight: 800;
}
.bg {
position: absolute;
bottom: 0rpx;
right: 50rpx;
opacity: .4;
z-index: -1;
image {
width: 250rpx;
}
}
.time {
font-size: 28rpx;
color: grey;
padding: 20rpx 0rpx 20rpx 0rpx;
}
.date {
font-size: 46rpx;
font-weight: 800;
display: flex;
align-items: baseline;
.icon {
font-weight: 100rpx;
font-size: 28rpx;
color: grey;
display: flex;
flex-direction: column-reverse;
}
}
}
}
</style>