348 lines
9.2 KiB
Vue
348 lines
9.2 KiB
Vue
<template>
|
||
<view class="">
|
||
|
||
|
||
<tm-nav-bar left-icon="arrow-left" :title="desc? getNameByKey(desc) : getNameByKey(type)" @clickLeft="back" />
|
||
<view class="content">
|
||
<view class="over" style="margin-top: 30rpx" @click="flag = !flag">
|
||
<text>日期筛选</text>
|
||
<uni-icons type="down" size="24"></uni-icons>
|
||
</view>
|
||
<view class="time" v-show="flag">
|
||
<punch-calendar @switchMonth="switchMonth" @chooseDay="chooseDay" :errorList="errorList" :successList="successList" ref="calendar"></punch-calendar>
|
||
</view>
|
||
<view class="flx flx_sb bloodl_box" v-if="type == 'bloodLiquid' && desc == ''" style="flex-wrap: wrap;">
|
||
<view class="flx flx_ac" v-for="(v,i) in blData" :key="i" style="flex: 0 0 calc((100% - 0rpx) / 2);height: 50rpx;">
|
||
<view class="yuan" :style="{backgroundColor:v.color}">
|
||
|
||
</view>
|
||
<view class="name">
|
||
{{ v.name }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view :class="'list'" v-for="(item, index) in dataList" :key="index" @click="goInfo(index)">
|
||
<view v-if="!customType.includes(type) || desc != ''" class="row" >
|
||
<view class="data">
|
||
<image src="https://img.agrimedia.cn/apptest/%E6%89%8B%E8%A1%A8-%E7%BA%BF%E6%80%A73-0.png" mode="widthFix"></image>
|
||
<view v-if="type == 'step'">
|
||
步数：{{item.data_msg.stepCount}}
|
||
</view>
|
||
<view v-if="type == 'bloodPressure'">
|
||
{{item.data_msg.bloodPressureHigh}}/{{item.data_msg.bloodPressureLow}} mmHg
|
||
</view>
|
||
<view v-if="type == 'bloodOxygen'">
|
||
|
||
{{ item.data_msg[0] ? item.data_msg[0] + (item.data_msg[1]?' | ':'') : ''}}
|
||
{{ item.data_msg[1] ? item.data_msg[1] + (item.data_msg[2]?' | ':'') : ''}}
|
||
{{ item.data_msg[2] ? item.data_msg[2] + (item.data_msg[3]?' | ':'') : ''}}
|
||
{{ item.data_msg[3] ? item.data_msg[3] + (item.data_msg[4]?' | ':'') : ''}}
|
||
{{ item.data_msg[4] ? item.data_msg[4] : ''}}
|
||
</view>
|
||
<view v-if="type == 'bloodGlucose'">
|
||
{{item.data_msg}}毫摩尔/升
|
||
</view>
|
||
<view v-if="type == 'bodyTemperature'">
|
||
{{item.data_msg}} ℃
|
||
</view>
|
||
<view v-if="type == 'pulseReat'">
|
||
{{ item.data_msg[0] ? item.data_msg[0] + (item.data_msg[1]?' | ':'') : ''}}
|
||
{{ item.data_msg[1] ? item.data_msg[1] + (item.data_msg[2]?' | ':'') : ''}}
|
||
{{ item.data_msg[2] ? item.data_msg[2] + (item.data_msg[3]?' | ':'') : ''}}
|
||
{{ item.data_msg[3] ? item.data_msg[3] + (item.data_msg[4]?' | ':'') : ''}}
|
||
{{ item.data_msg[4] ? item.data_msg[4] : ''}}
|
||
</view>
|
||
<view v-if="type == 'bloodLiquid' && desc == 'uricAcidVal'">
|
||
{{(item.data_msg.uricAcidVal /10).toFixed(2)}} 微摩尔/升
|
||
</view>
|
||
<view v-if="type == 'meiTuo'">
|
||
{{item.data_msg[0] / 10}} MET
|
||
</view>
|
||
<view v-if="type == 'bloodLiquid' && desc !== 'uricAcidVal'" style="font-size: 24rpx;" >
|
||
<!-- <view>总胆固醇：{{item.data_msg.cholesterol/100}} 甘油三脂：{{item.data_msg.triacylglycerol/100}}</view>
|
||
<view>密度脂蛋白:高-{{item.data_msg.highDensity/100}} 低-{{item.data_msg.lowDensity/100}}</view> -->
|
||
<view>总胆固醇：{{(item.data_msg.cholesterol/100).toFixed(2)}} </view>
|
||
<view>甘油三脂：{{(item.data_msg.triacylglycerol/100).toFixed(2)}} </view>
|
||
<view>高密度脂蛋白:{{(item.data_msg.highDensity/100).toFixed(2)}}</view>
|
||
<view>低胆固醇：{{(item.data_msg.lowDensity/100).toFixed(2)}} </view>
|
||
</view>
|
||
<view v-if="type == 'ECGData'" style="font-size: 24rpx;">
|
||
<view>心率:{{item.data_msg.meanHeartRate}} 次/分</view>
|
||
<view>HRV：{{item.data_msg.averageHRV}} 毫秒</view>
|
||
<view>QTc：{{item.data_msg.averageTimeInterval}} 毫秒</view>
|
||
</view>
|
||
<view v-if="type == 'bodyData'" style="font-size: 24rpx;">
|
||
<view>BMI:{{item.data_msg.BMI}}</view>
|
||
<view>体脂率：{{item.data_msg.bodyFatPercentage}}</view>
|
||
<view>肌肉率：{{item.data_msg.muscleRate}}</view>
|
||
</view>
|
||
<!-- <view v-if="Array.isArray(type)">
|
||
{{item.data_msg[0]}}
|
||
</view> -->
|
||
</view>
|
||
<view class="time">
|
||
{{item.date_str}} {{item.hour_minute}}
|
||
</view>
|
||
</view>
|
||
<view class="" v-else>
|
||
<detail_components :key_name="type" :item="item"></detail_components>
|
||
</view>
|
||
</view>
|
||
<view class="" style="height: 30rpx;">
|
||
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { getArrMaxValue } from '@/utils/utils.js'
|
||
import { mapGetters } from "vuex";
|
||
export default {
|
||
data() {
|
||
return {
|
||
customType:[
|
||
'bodyData',
|
||
'bloodLiquid',
|
||
'ECGData'
|
||
],
|
||
blData:[
|
||
{
|
||
name:'总胆固醇',
|
||
color:'#46b4ff',
|
||
},
|
||
{
|
||
name:'甘油三酯',
|
||
color:'#29cf6c',
|
||
},
|
||
{
|
||
name:'高密度脂蛋白',
|
||
color:'#fcc05d',
|
||
},
|
||
{
|
||
name:'低密度脂蛋白',
|
||
color:'#fa4e33',
|
||
}
|
||
],
|
||
type: '',
|
||
desc: '',
|
||
dataList: [],
|
||
keyNameMap: {
|
||
bloodGlucose: "血糖",
|
||
bloodOxygen: "血氧",
|
||
bloodPressure: '血压',
|
||
pulseReat: '心率',
|
||
|
||
bloodLiquid: "血脂",
|
||
uricAcidVal: '尿酸',
|
||
meiTuo: '梅脱',
|
||
// pulseReat: '脉率',
|
||
updataDate: '更新时间',
|
||
bodyTemperature: '体温',
|
||
ECGData: '心电图',
|
||
step: '步数',
|
||
bodyData:'身体成分'
|
||
},
|
||
time: new Date().toISOString().substring(0, 10),
|
||
flag: true,
|
||
successList: ['1676995200000'],
|
||
errorList: ['1676908800000'],
|
||
}
|
||
},
|
||
|
||
mounted() {
|
||
// 初始化
|
||
this.$refs.calendar.initCalendar()
|
||
|
||
// 模拟异步赋值
|
||
let timer = setTimeout(()=>{
|
||
this.addTimer()
|
||
},2000)
|
||
},
|
||
|
||
// onLoad() {
|
||
// // 初始化
|
||
// this.$refs.calendar.initCalendar()
|
||
|
||
// // 模拟异步赋值
|
||
// let timer = setTimeout(()=>{
|
||
// this.addTimer()
|
||
// },2000)
|
||
// },
|
||
onLoad(e) {
|
||
this.type = e.type;
|
||
this.desc = e.desc||'';
|
||
this.queryList()
|
||
console.log(this.customType.includes(this.type))
|
||
},
|
||
|
||
onShow(e) {
|
||
let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
|
||
let curRoute = routes[routes.length - 1].route //获取当前页面路由
|
||
let curParam = routes[routes.length - 1].options; //获取路由参数
|
||
// 拼接参数
|
||
let param = ''
|
||
for (let key in curParam) {
|
||
param += '&' + key + '=' + curParam[key]
|
||
}
|
||
|
||
|
||
},
|
||
computed: {
|
||
...mapGetters({
|
||
getActiceDevice: "api/getActiceDevice"
|
||
})
|
||
},
|
||
|
||
methods: {
|
||
goInfo(idx){
|
||
if(this.type == 'ECGData'){
|
||
uni.showLoading({
|
||
|
||
})
|
||
uni.setStorageSync('infoData', JSON.stringify(this.dataList[idx]));
|
||
uni.navigateTo({
|
||
url:'/pages/index/detail_info?index='+idx,
|
||
fail(e) {
|
||
console.log(e)
|
||
},
|
||
complete() {
|
||
uni.hideLoading({
|
||
|
||
})
|
||
}
|
||
})
|
||
}
|
||
if(this.type == 'bodyData'){
|
||
uni.showLoading({
|
||
|
||
})
|
||
uni.setStorageSync('bodyData', JSON.stringify(this.dataList[idx]));
|
||
uni.navigateTo({
|
||
url:'/pages/index/body_info?index='+idx,
|
||
fail(e) {
|
||
console.log(e)
|
||
},
|
||
complete() {
|
||
uni.hideLoading({
|
||
|
||
})
|
||
}
|
||
})
|
||
}
|
||
|
||
},
|
||
getArrMaxValue,
|
||
queryList() {
|
||
this.$store.dispatch('api/getDeviceListDays', {
|
||
type: (this.type == 'step'?'step_split':this.type),
|
||
// type: (this.type),
|
||
device_real_time: this.time,
|
||
device_id:this.getActiceDevice.device_id
|
||
}).then(res => {
|
||
// let arrData = res.data.filter((v) => {
|
||
// return v.data_msg.stepCount > 0
|
||
// })
|
||
// let arrData = []
|
||
|
||
// res.data.map((v,i) => {
|
||
// if(this.type == 'step'){
|
||
// if(v.data_msg.stepCount > 0){
|
||
|
||
// arrData = [...arrData,v]
|
||
// console.log(arrData)
|
||
// }
|
||
// }else{
|
||
// arrData.push(v)
|
||
// }
|
||
|
||
// })
|
||
// console.log(arrData,'end')
|
||
// this.$refs.paging.completeByTotal(res.data,res.last_page);
|
||
this.dataList = res.data
|
||
});
|
||
},
|
||
|
||
getNameByKey(key) {
|
||
return this.keyNameMap[key] || "Key not found";
|
||
},
|
||
|
||
addTimer() {
|
||
this.successList = [...this.successList, '1681920000000']
|
||
},
|
||
|
||
// 点击某一天
|
||
chooseDay(val) {
|
||
this.time = val.year + '-' + val.month + '-' + val.day;
|
||
this.queryList()
|
||
// this.$refs.paging.reload();
|
||
},
|
||
|
||
back() {
|
||
uni.navigateBack({
|
||
delta: 1
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.bloodl_box{
|
||
margin-top: 30rpx;
|
||
padding: 0 40rpx;
|
||
.name{
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
}
|
||
.yuan{
|
||
width: 14rpx;
|
||
height: 14rpx;
|
||
border-radius: 50%;
|
||
margin-right: 10rpx;
|
||
}
|
||
}
|
||
.content {
|
||
.over {
|
||
margin: 0rpx 30rpx;
|
||
background-color: #fff;
|
||
padding: 30rpx;
|
||
border-radius: 20rpx;
|
||
font-weight: 800;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
border-radius: 20rpx;
|
||
}
|
||
.time {
|
||
width: 100%;
|
||
}
|
||
.list {
|
||
background-color: #fff;
|
||
overflow: hidden;
|
||
padding: 30rpx;
|
||
margin: 30rpx 30rpx;
|
||
border-radius: 30rpx;
|
||
.row {
|
||
// height: 100rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
.data {
|
||
display: flex;
|
||
align-items: center;
|
||
font-weight: 500;
|
||
font-size: 36rpx;
|
||
image {
|
||
width: 50rpx;
|
||
}
|
||
}
|
||
.time {
|
||
font-weight: 300;
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
</style> |