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

250 lines
6.7 KiB
Vue

<template>
<z-paging ref="paging" v-model="dataList" @query="queryList" usePageScroll>
<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="list" v-if="dataList.length">
<view class="row" v-for="(item, index) in dataList" :key="index" >
<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.wear}} -->
运动量:{{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}} 微摩尔/升
</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>
<!-- <view v-if="Array.isArray(type)">
{{item.data_msg[0]}}
</view> -->
</view>
<view class="time">
{{item.date_str}} {{item.hour_minute}}
</view>
</view>
</view>
</view>
</z-paging>
</template>
<script>
import { getArrMaxValue } from '@/utils/utils.js'
import { mapGetters } from "vuex";
export default {
data() {
return {
type: '',
desc: '',
dataList: [],
keyNameMap: {
bloodGlucose: "血糖",
bloodOxygen: "血氧",
bloodPressure: '血压',
pulseReat: '心率',
bloodLiquid: "血液",
bloodLiquid: "血脂",
uricAcidVal: '尿酸',
meiTuo: '梅脱',
// pulseReat: '脉率',
updataDate: '更新时间',
bodyTemperature: '体温',
step: '步数'
},
time: new Date().toISOString().substring(0, 10),
flag: false,
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||'';
},
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: {
getArrMaxValue,
queryList(pageNo, pageSize) {
this.$store.dispatch('api/getDeviceListDays', {
type: this.type,
device_real_time: this.time,
device_id:this.getActiceDevice.device_id
}).then(res => {
let arrData = []
let a = res.data.filter((v) => {
return v.data_msg.stepCount > 0;
if(this.type == 'step'){
// if(v.data_msg.stepCount > 0){
// console.log(v)
// return v;
// // arrData = [...arrData,v]
// // console.log(arrData)
// }
}else{
return v;
// arrData.push(v)
}
})
// 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)
// }
// })
// // arrData = [...arrData,11]
console.log(a)
this.$refs.paging.completeByTotal(arrData,res.last_page);
});
},
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.$refs.paging.reload();
},
back() {
uni.navigateBack({
delta: 1
})
}
}
}
</script>
<style lang="scss" scoped>
.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 {
display: flex;
align-items: center;
justify-content: center;
}
.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>