1176 lines
35 KiB
Vue
1176 lines
35 KiB
Vue
<template>
|
||
<view>
|
||
<view class="contents">
|
||
<view class="left" v-if="pageData.type">
|
||
<tm-nav-bar
|
||
left-icon="arrow-left"
|
||
:title="dataConfig[pageData.type].name"
|
||
@clickLeft="back"
|
||
:rightText="`全部数据`"
|
||
@clickRight="goAllPath"/>
|
||
<view class="flx jcsb ac" style="height: 40rpx;background-color: #fff;padding: 20rpx;">
|
||
<view class="" style="font-size: 40rpx;font-weight: bold;"></view>
|
||
<view class="" style="color: #b8b8b8;font-size: 24rpx;">
|
||
{{time}}
|
||
</view>
|
||
</view>
|
||
<view style="height: 40rpx;background-color: #fff;"></view>
|
||
|
||
<view class="page-view" v-if="this.pageData.data_msg">
|
||
<!-- 图表 -->
|
||
<view class="charts">
|
||
<l-echart ref="chartRef" @finished="init"></l-echart>
|
||
</view>
|
||
|
||
<overview v-if="dataConfig[pageData.type].overviewData" :overviewData="dataConfig[pageData.type].overviewData"></overview>
|
||
<cankao v-if="dataConfig[pageData.type].cankaoData" :cankaoData="dataConfig[pageData.type].cankaoData" ></cankao>
|
||
|
||
<view class="flx total_box" v-if="pageData.type == 'stepIndex' && pageData.data_msg">
|
||
<view class="distance b1">
|
||
<view class="flx">
|
||
<view class="" style="font-size: 48rpx;font-weight: 600;">
|
||
{{ pageData.data_msg.distance/1000 }}
|
||
</view>
|
||
<view class="sport-title" style="font-size: 34rpx;margin-top: 10rpx;margin-left: 4rpx;font-weight: 300;">
|
||
公里
|
||
</view>
|
||
</view>
|
||
<view class="sport-jvli" style="font-size: 40rpx;color: #999;">
|
||
距离
|
||
</view>
|
||
<view class="flx" style="justify-content: end;">
|
||
<image src="../../static/image/juli.jpg" style="width: 300rpx;" mode="widthFix"></image>
|
||
</view>
|
||
</view>
|
||
<view class="calorie b1">
|
||
<view class="flx">
|
||
<view class="" style="font-size: 48rpx;font-weight: 600;">
|
||
{{ pageData.data_msg.calorie / 10 }}
|
||
</view>
|
||
<view class="" style="font-size: 34rpx;margin-top: 10rpx;margin-left: 4rpx;font-weight: 300;">
|
||
千卡
|
||
</view>
|
||
</view>
|
||
<view class="" style="font-size: 40rpx;color: #999;">
|
||
卡路里
|
||
</view>
|
||
<view class="flx" style="justify-content: end;">
|
||
<image src="../../static/image/kalvli.jpg" style="width: 300rpx;" mode="widthFix"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="end">
|
||
到底了~
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import * as echarts from '@/uni_modules/lime-echart/static/echarts.min';
|
||
import { mapGetters } from "vuex";
|
||
export default {
|
||
name:"echarts-data",
|
||
data() {
|
||
return {
|
||
time: new Date().toISOString().substring(0, 10),
|
||
dataConfig:{
|
||
bloodGlucose:{
|
||
title:'123123',
|
||
name:'血糖',
|
||
color:"#fb8544",
|
||
unit:'毫摩尔/升',
|
||
cankaoData:[
|
||
{
|
||
name:'空腹/餐前',
|
||
data:[
|
||
0,3.9,6.1,15
|
||
],
|
||
adjustment:[
|
||
0.05,
|
||
0.00,
|
||
-0.05
|
||
],
|
||
max:15
|
||
},
|
||
{
|
||
name:'餐后1小时',
|
||
data:[
|
||
0,6.7,9.4,15
|
||
],
|
||
adjustment:[
|
||
0.04,
|
||
0.00,
|
||
-0.04
|
||
],
|
||
max:15
|
||
},
|
||
{
|
||
name:'餐后2小时',
|
||
data:[
|
||
0,4.4,7.8,15
|
||
],
|
||
adjustment:[
|
||
0.04,
|
||
0.00,
|
||
-0.04
|
||
],
|
||
max:15
|
||
}
|
||
]
|
||
},
|
||
stepIndex:{
|
||
name:'每日运动',
|
||
color:"#29cf6f",
|
||
unit:'毫摩尔/升',
|
||
},
|
||
bloodOxygen:{
|
||
title:'123123',
|
||
name:'血氧',
|
||
color:"#bf32fc",
|
||
unit:'%',
|
||
cankaoData:false,
|
||
|
||
},
|
||
bodyTemperature:{
|
||
title:'bodyTemperature',
|
||
name:'体温',
|
||
color:"#2ec8d8",
|
||
unit:'℃',
|
||
cankaoData:false,
|
||
},
|
||
bloodPressure:{
|
||
title:'bloodPressure',
|
||
name:'血压',
|
||
color:"#fb8544",
|
||
color1:"#00c3da",
|
||
unit:'℃',
|
||
cankaoData:false,
|
||
},
|
||
pulseReat:{
|
||
title:'123123',
|
||
name:'心率',
|
||
color:"#fd5656",
|
||
unit:'次/分',
|
||
cankaoData:false,
|
||
|
||
},
|
||
bloodLiquid:{
|
||
title:'123123',
|
||
name:'尿酸',
|
||
color:"#f00",
|
||
unit:'微摩尔/升',
|
||
cankaoData:[
|
||
{
|
||
name:'尿酸',
|
||
data:[
|
||
0,150,420,1000
|
||
],
|
||
adjustment:[
|
||
0.06,
|
||
0.00,
|
||
-0.06
|
||
],
|
||
max:1000
|
||
},
|
||
],
|
||
},
|
||
bloodLiquidAll:{
|
||
title:'123123',
|
||
name:'血脂',
|
||
|
||
unit:'微摩尔/升',
|
||
overviewData:{
|
||
name:'血脂概况',
|
||
tb_head:[
|
||
'',
|
||
'单日测量范围',
|
||
'平均值'
|
||
],
|
||
data:[
|
||
{
|
||
name:'总胆固醇',
|
||
value:'0-0',
|
||
average:0,
|
||
color:'#46b4ff',
|
||
bgColor:'#e1f3fd'
|
||
},
|
||
{
|
||
name:'甘油三酯',
|
||
value:'0-0',
|
||
average:0,
|
||
color:'#29cf6c',
|
||
bgColor:'#e2fff3'
|
||
},
|
||
{
|
||
name:'高密度脂蛋白',
|
||
value:'0-0',
|
||
average:0,
|
||
color:'#fcc05d',
|
||
bgColor:'#fef5e3'
|
||
},
|
||
{
|
||
name:'低密度脂蛋白',
|
||
value:'0-0',
|
||
average:0,
|
||
color:'#fa4e33',
|
||
bgColor:'#fee5e1'
|
||
}
|
||
]
|
||
},
|
||
cankaoData:[
|
||
{
|
||
name:'总胆固醇',
|
||
data:[
|
||
0,2.8,5.17,20
|
||
],
|
||
adjustment:[
|
||
0.05,
|
||
0.02,
|
||
-0.05
|
||
],
|
||
max:10
|
||
},
|
||
{
|
||
name:'甘油三酯',
|
||
data:[
|
||
0,0.56,1.7,20
|
||
],
|
||
adjustment:[
|
||
0.06,
|
||
-0.02,
|
||
-0.04
|
||
],
|
||
max:3
|
||
},
|
||
{
|
||
name:'高密度脂蛋白',
|
||
data:[
|
||
0,0.96,1.15,20
|
||
],
|
||
adjustment:[
|
||
0.04,
|
||
0.00,
|
||
-0.04
|
||
],
|
||
max:3
|
||
},
|
||
{
|
||
name:'低密度脂蛋白',
|
||
data:[
|
||
0,3.1,20
|
||
],
|
||
adjustment:[
|
||
0.04,
|
||
0.00,
|
||
-0.04
|
||
],
|
||
max:20
|
||
}
|
||
]
|
||
}
|
||
},
|
||
option:{
|
||
// tooltip: {
|
||
// trigger: 'item',
|
||
// formatter: function (params) {
|
||
// // params 是数据的相关信息，可以根据需要进行处理
|
||
// console.log(params)
|
||
// if(params.componentType == 'series'){
|
||
// return `<html><div style="width:10px">
|
||
// <p>${params.seriesName}</p>
|
||
// <p>${params.name}: ${params.value[1]}</p>
|
||
// </div></html>`
|
||
// }
|
||
// return '';
|
||
// },
|
||
// // renderMode:'html'
|
||
// // axisPointer: {
|
||
// // type: 'line',
|
||
// // label: {
|
||
// // backgroundColor: '#6a7985'
|
||
// // }
|
||
// // },
|
||
|
||
|
||
// },
|
||
xAxis: {
|
||
splitLine:{
|
||
show:false
|
||
},
|
||
type:'value',
|
||
max:4,
|
||
min:0,
|
||
axisLabel: {
|
||
show: true,
|
||
splitNumber:2,
|
||
formatter: function(value, index) {
|
||
let arr = ['12am', '6am', '12pm', '6pm', '12am']
|
||
return arr[ Math.floor(index)];
|
||
}
|
||
}
|
||
},
|
||
|
||
yAxis: {
|
||
splitLine:{
|
||
show:true,
|
||
lineStyle: {
|
||
// 使用深浅的间隔色
|
||
color: ["#ccc"],
|
||
type:"dashed"
|
||
}
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLine: {
|
||
show: false // 设置y轴线不显示
|
||
},
|
||
axisLabel: {},
|
||
position:"right",
|
||
splitNumber:3
|
||
|
||
},
|
||
series: [
|
||
{
|
||
symbolSize: 5,
|
||
data:
|
||
[
|
||
],
|
||
|
||
markLine: {
|
||
data: [
|
||
{
|
||
show:false,
|
||
yAxis: 2.5, // 在 y 值为 100 的位置添加水平参考线
|
||
},
|
||
|
||
],
|
||
lineStyle:{
|
||
color:'#ccc',
|
||
cap:"butt"
|
||
},
|
||
label:{
|
||
color:'#ccc',
|
||
},
|
||
},
|
||
type: 'scatter',
|
||
},
|
||
|
||
],
|
||
|
||
}
|
||
}
|
||
},
|
||
props: {
|
||
pageData: {
|
||
default: () => ({}),
|
||
type: Object
|
||
}
|
||
},
|
||
mounted() {
|
||
this.pageData.type = this.getpageType;
|
||
},
|
||
computed: {
|
||
...mapGetters({
|
||
getActiceDevice: "api/getActiceDevice",
|
||
getpageType: "api/getpageType",
|
||
})
|
||
},
|
||
methods: {
|
||
async init() {
|
||
this.chart = await this.$refs.chartRef.init(echarts);
|
||
let option = await this.getDataList();
|
||
this.chart.setOption(option)
|
||
},
|
||
async getDataList(){
|
||
let type = this.pageData.type
|
||
|
||
if(type == 'bloodLiquidAll') {
|
||
type = 'bloodLiquid'
|
||
}
|
||
|
||
let res = await this.$store.dispatch('api/getDeviceListDays', {
|
||
type: type,
|
||
device_real_time: this.time,
|
||
device_id:this.getActiceDevice.device_id
|
||
})
|
||
|
||
return this.makeOptionConfig(res.data);
|
||
},
|
||
getAverage(arr) {
|
||
if (arr.length === 0) return 0; // 如果数组为空，则返回0
|
||
const sum = arr.reduce((accumulator, currentValue) => accumulator + currentValue);
|
||
return sum / arr.length; // 计算平均值
|
||
},
|
||
subtractMinutes(timeStr, minutes) {
|
||
const parts = timeStr.split(':');
|
||
const hours = parseInt(parts[0], 10);
|
||
const minutesLeft = parseInt(parts[1], 10);
|
||
|
||
const date = new Date();
|
||
date.setHours(hours, minutesLeft, 0, 0); // 设置时、分、秒、毫秒
|
||
date.setMinutes(date.getMinutes() - minutes); // 减去指定的分钟数
|
||
|
||
// 格式化为HH:MM
|
||
const newHours = date.getHours().toString().padStart(2, '0');
|
||
const newMinutes = date.getMinutes().toString().padStart(2, '0');
|
||
return newHours + ':' + newMinutes;
|
||
},
|
||
makeFloatHoursMinutes(hours, minutes) {
|
||
|
||
let total = hours * 3600 + minutes * 60;
|
||
let floatData = total / 86400 * 4
|
||
return floatData.toFixed(2);
|
||
},
|
||
back() {
|
||
this.$emit('back', 1)
|
||
},
|
||
|
||
// 全部数据
|
||
goAllPath() {
|
||
this.$emit('allData', 3)
|
||
},
|
||
/// git dev test
|
||
makeOptionConfig(data){
|
||
console.log(data)
|
||
let echartsData = [];
|
||
let sum = 0;
|
||
let max = 0;
|
||
let min = 0;
|
||
let avg = 0;
|
||
let len = 0;
|
||
let arr = [];
|
||
let dataArr = {};
|
||
|
||
this.option.series[0].markLine.symbol = 'none'
|
||
this.option.series[0].markLine.label.position ='insideEndTop'
|
||
console.log(this.pageData.type, '900000000000')
|
||
switch(this.pageData.type){
|
||
case 'stepIndex':
|
||
console.log('步数')
|
||
data.map((v,i) => {
|
||
let timeArr = v.hour_minute.split(':');
|
||
let key = '';
|
||
if(timeArr[1] < 30){
|
||
key = timeArr[0]+':'+'00'
|
||
|
||
}else{
|
||
key = timeArr[0]+':'+'30'
|
||
|
||
}
|
||
if(dataArr[key] == undefined){
|
||
dataArr[key] = {
|
||
val:v.data_msg.step,
|
||
from:1
|
||
}
|
||
}else{
|
||
dataArr[key].val += v.data_msg.step;
|
||
}
|
||
})
|
||
for (let key in dataArr) {
|
||
if (dataArr.hasOwnProperty(key)) { // 确保key是对象自身的属性
|
||
let timeArr2 = key.split(':');
|
||
let floatData = this.makeFloatHoursMinutes(timeArr2[0],timeArr2[1])
|
||
echartsData.push({value:[floatData,(dataArr[key].val)],itemStyle: {color: this.dataConfig[this.pageData.type].color}})
|
||
// console.log(key , dataArr[key]);
|
||
}
|
||
}
|
||
console.log(echartsData)
|
||
this.option.series[0].data = echartsData
|
||
this.option.series[0].markLine = []
|
||
this.option.series[0].type = 'bar'
|
||
this.option.series[0].barMaxWidth = '10'
|
||
this.option.title = {
|
||
text :this.pageData.data_msg.step + '步',
|
||
// subtext: '毫摩尔/升',
|
||
left: 'center'
|
||
};
|
||
break;
|
||
case 'bodyTemperature':
|
||
console.log(data)
|
||
data.map((v,i) => {
|
||
let timeArr = v.hour_minute.split(':');
|
||
let key = timeArr[0]+':'+'00'
|
||
if(dataArr[key] == undefined){
|
||
dataArr[key] = {
|
||
val:[parseFloat(v.data_msg)],
|
||
from:0
|
||
}
|
||
}else{
|
||
dataArr[key].val = [...dataArr[key].val,parseFloat(v.data_msg)];
|
||
}
|
||
let dataMsg = parseFloat(v.data_msg);
|
||
// let floatData = this.makeFloatHoursMinutes(timeArr[0],timeArr[1])
|
||
// echartsData.push({value:[floatData,dataMsg],itemStyle: {color: this.dataConfig[this.type].color}})
|
||
sum += dataMsg
|
||
if(max == 0 || max < dataMsg){
|
||
max = dataMsg
|
||
}
|
||
if(min == 0 || min > dataMsg){
|
||
min = dataMsg
|
||
}
|
||
})
|
||
avg = sum / data.length
|
||
avg = parseFloat(avg.toFixed(2))
|
||
for (let key in dataArr) {
|
||
if (dataArr.hasOwnProperty(key)) { // 确保key是对象自身的属性
|
||
let timeArr2 = key.split(':');
|
||
let floatData = this.makeFloatHoursMinutes(timeArr2[0],timeArr2[1])
|
||
echartsData.push({value:[floatData,this.getAverage(dataArr[key].val)],itemStyle: {color: this.dataConfig[this.pageData.type].color}})
|
||
}
|
||
}
|
||
this.option.series[0].data = echartsData
|
||
this.option.series[0].type = 'line'
|
||
this.option.series[0].lineStyle = {}
|
||
this.option.series[0].lineStyle.color = '#ccc'
|
||
this.option.series[0].markLine.data[0].yAxis = avg
|
||
this.option.series[0].markLine.lineStyle.color = this.dataConfig[this.pageData.type].color
|
||
this.option.series[0].markLine.label.color = this.dataConfig[this.pageData.type].color
|
||
this.option.yAxis.min = parseInt(min)-1;
|
||
this.option.yAxis.max = parseInt(max) + 1;
|
||
this.option.yAxis.splitNumber = 1;
|
||
this.option.title = {
|
||
text :min + '-' + max,
|
||
subtext: '℃',
|
||
left: 'center'
|
||
};
|
||
this.dataConfig.bodyTemperature.title = min + '-' + max
|
||
break;
|
||
case 'bloodOxygen':
|
||
data.map((v,i) => {
|
||
let timeArr = v.hour_minute.split(':');
|
||
let dataMsg = v.data_msg.filter(item => item > 0);
|
||
if(timeArr[1] % 10 == 0){
|
||
let key = v.hour_minute
|
||
if(dataArr[key] == undefined){
|
||
dataArr[key] = {
|
||
val:dataMsg,
|
||
from:0
|
||
}
|
||
}else{
|
||
dataArr[key].val = [...dataArr[key].val,...dataMsg];
|
||
}
|
||
}else{
|
||
|
||
let key = timeArr[0]+':'+((timeArr[1] - 5) == 0?'00':(timeArr[1] - 5))
|
||
if(dataArr[key] == undefined){
|
||
dataArr[key] = {
|
||
val:dataMsg,
|
||
from:1
|
||
}
|
||
}else{
|
||
dataArr[key].val = [...dataArr[key].val,...dataMsg];
|
||
}
|
||
|
||
}
|
||
|
||
|
||
|
||
dataMsg.map((v2,i2) => {
|
||
if(v2 > 0){
|
||
arr.push(v2)
|
||
}
|
||
|
||
})
|
||
|
||
})
|
||
for (let key in dataArr) {
|
||
if (dataArr.hasOwnProperty(key)) { // 确保key是对象自身的属性
|
||
let timeArr2 = key.split(':');
|
||
let floatData = this.makeFloatHoursMinutes(timeArr2[0],timeArr2[1])
|
||
echartsData.push({value:[floatData,this.getAverage(dataArr[key].val)],itemStyle: {color: this.dataConfig[this.pageData.type].color}})
|
||
// console.log(key , dataArr[key]);
|
||
}
|
||
}
|
||
if(arr.length > 0){
|
||
min = Math.min(...arr)
|
||
max = Math.max(...arr)
|
||
}
|
||
|
||
this.option.series[0].data = echartsData
|
||
this.option.yAxis.axisLabel.formatter = '{value}%';
|
||
this.option.series[0].markLine.data[0].yAxis = this.getAverage(arr)
|
||
this.option.series[0].markLine.data[0].value = this.getAverage(arr)
|
||
this.option.series[0].markLine.symbol = 'none'
|
||
|
||
this.option.series[0].markLine.lineStyle.color = this.dataConfig[this.pageData.type].color
|
||
this.option.series[0].markLine.label.color = this.dataConfig[this.pageData.type].color
|
||
this.option.series[0].markLine.label.position ='insideEndTop'
|
||
this.option.series[0].markLine.label.formatter = function(data){
|
||
return data.value + '%'
|
||
// console.log(data,123)
|
||
};
|
||
// this.option.series[0].markLine.label.distance =[10,5]
|
||
this.option.title = {
|
||
text :min + '-' + max,
|
||
subtext: '%',
|
||
left: 'center'
|
||
};
|
||
this.option.yAxis.splitNumber = 2;
|
||
this.dataConfig.bodyTemperature.title = min + '-' + max
|
||
this.option.yAxis.min = min;
|
||
this.option.yAxis.max = 100;
|
||
break;
|
||
case 'bloodGlucose':
|
||
data.map((v,i) => {
|
||
let timeArr = v.hour_minute.split(':');
|
||
if(timeArr[1] < 30){
|
||
let key = timeArr[0]+':'+'00'
|
||
if(dataArr[key] == undefined){
|
||
dataArr[key] = {
|
||
val:[v.data_msg],
|
||
from:0
|
||
}
|
||
}else{
|
||
dataArr[key].val = [...dataArr[key].val,v.data_msg];
|
||
}
|
||
}else{
|
||
let key = timeArr[0]+':'+'30'
|
||
if(dataArr[key] == undefined){
|
||
dataArr[key] = {
|
||
val:[v.data_msg],
|
||
from:1
|
||
}
|
||
}else{
|
||
// console.log(dataArr[key].val)
|
||
dataArr[key].val = [...dataArr[key].val,v.data_msg];
|
||
}
|
||
}
|
||
// let floatData = this.makeFloatHoursMinutes(timeArr[0],timeArr[1])
|
||
// echartsData.push({value:[floatData,v.data_msg],itemStyle: {color: this.dataConfig[this.type].color}})
|
||
sum += v.data_msg
|
||
|
||
if(max == 0 || max < v.data_msg){
|
||
max = v.data_msg
|
||
}
|
||
if(min == 0 || min > v.data_msg){
|
||
min = v.data_msg
|
||
}
|
||
})
|
||
|
||
avg = sum / data.length
|
||
avg = parseFloat(avg.toFixed(2))
|
||
for (let key in dataArr) {
|
||
if (dataArr.hasOwnProperty(key)) { // 确保key是对象自身的属性
|
||
let timeArr2 = key.split(':');
|
||
let floatData = this.makeFloatHoursMinutes(timeArr2[0],timeArr2[1])
|
||
echartsData.push({value:[floatData,this.getAverage(dataArr[key].val)],itemStyle: {color: this.dataConfig[this.pageData.type].color}})
|
||
// console.log(key , dataArr[key]);
|
||
}
|
||
}
|
||
this.option.series[0].data = echartsData
|
||
this.option.series[0].markLine.data[0].yAxis = avg
|
||
this.option.series[0].markLine.lineStyle.color = this.dataConfig[this.pageData.type].color
|
||
this.option.series[0].markLine.label.color = this.dataConfig[this.pageData.type].color
|
||
this.option.title = {
|
||
text :min + '-' + max,
|
||
subtext: '毫摩尔/升',
|
||
left: 'center'
|
||
};
|
||
this.dataConfig.bloodGlucose.title = min + '-' + max
|
||
break;
|
||
|
||
data.map((v,i) => {
|
||
|
||
let dataMsg = v.data_msg;
|
||
let timeArr = v.hour_minute.split(':');
|
||
for(let i = 0;i<5;i++){
|
||
let real_data = dataMsg[i]
|
||
if(real_data <= 0){
|
||
break;
|
||
}
|
||
len += 1;
|
||
// let floatData = this.makeFloatHoursMinutes(timeArr[0],parseInt( timeArr[1]) + i)
|
||
// echartsData.push({value:[floatData,real_data],itemStyle: {color: this.dataConfig[this.type].color}})
|
||
sum += real_data
|
||
if(max == 0 || max < real_data){
|
||
max = real_data
|
||
}
|
||
if(min == 0 || min > real_data){
|
||
min = real_data
|
||
}
|
||
}
|
||
|
||
})
|
||
avg = sum / len
|
||
avg = parseFloat(avg.toFixed(2))
|
||
this.option.series[0].data = echartsData
|
||
this.option.series[0].markLine.data[0].yAxis = avg
|
||
this.option.series[0].markLine.lineStyle.color = this.dataConfig[this.type].color
|
||
this.option.series[0].markLine.label.color = this.dataConfig[this.type].color
|
||
this.option.title = {
|
||
text :min + '-' + max,
|
||
subtext: '%',
|
||
left: 'center'
|
||
};
|
||
this.dataConfig.bloodGlucose.title = min + '-' + max
|
||
this.option.yAxis.axisLabel.formatter = '{value}%';
|
||
this.option.yAxis.splitNumber = 3;
|
||
this.option.yAxis.min = 95;
|
||
this.option.yAxis.max = 100;
|
||
break;
|
||
case 'bloodPressure':
|
||
let max2 = 0;
|
||
let min2 = 0;
|
||
let sum2 = 0;
|
||
let echartsData2 = []
|
||
data.map((v,i) => {
|
||
let timeArr = v.hour_minute.split(':');
|
||
let key = timeArr[0]+':'+'00'
|
||
if(dataArr[key] == undefined){
|
||
dataArr[key] = {
|
||
val:[v.data_msg.bloodPressureHigh],
|
||
val2:[v.data_msg.bloodPressureLow],
|
||
from:0
|
||
}
|
||
}else{
|
||
dataArr[key].val = [...dataArr[key].val,v.data_msg.bloodPressureHigh];
|
||
dataArr[key].val2 = [...dataArr[key].val2,v.data_msg.bloodPressureLow];
|
||
}
|
||
// let floatData = this.makeFloatHoursMinutes(timeArr[0],timeArr[1])
|
||
// echartsData.push({value:[floatData,v.data_msg],itemStyle: {color: this.dataConfig[this.type].color}})
|
||
sum += v.data_msg.bloodPressureHigh
|
||
sum2 += v.data_msg.bloodPressureLow
|
||
|
||
if(max == 0 || max < v.data_msg.bloodPressureHigh){
|
||
max = v.data_msg.bloodPressureHigh
|
||
}
|
||
if(min == 0 || min > v.data_msg.bloodPressureHigh){
|
||
min = v.data_msg.bloodPressureHigh
|
||
}
|
||
if(max2 == 0 || max2 < v.data_msg.bloodPressureLow){
|
||
max2 = v.data_msg.bloodPressureLow
|
||
}
|
||
if(min2 == 0 || min2 > v.data_msg.bloodPressureLow){
|
||
min2 = v.data_msg.bloodPressureLow
|
||
}
|
||
})
|
||
avg = sum / data.length
|
||
let avg2 = sum2 / data.length
|
||
avg = parseInt(avg)
|
||
avg2 = parseInt(avg2)
|
||
// console.log(avg,'ag')
|
||
// console.log(avg2,'ag2')
|
||
console.log(dataArr)
|
||
|
||
for (let key in dataArr) {
|
||
if (dataArr.hasOwnProperty(key)) { // 确保key是对象自身的属性
|
||
let timeArr2 = key.split(':');
|
||
let floatData = this.makeFloatHoursMinutes(timeArr2[0],timeArr2[1])
|
||
echartsData.push({value:[floatData,this.getAverage(dataArr[key].val)],itemStyle: {color: this.dataConfig[this.pageData.type].color}})
|
||
echartsData.push({value:[floatData,this.getAverage(dataArr[key].val2)],itemStyle: {color: this.dataConfig[this.pageData.type].color1}})
|
||
// console.log(key , dataArr[key]);
|
||
}
|
||
}
|
||
this.option.series[0].data = echartsData
|
||
// this.option.series[1].data = echartsData2
|
||
this.option.series[0].markLine.data[0].yAxis = avg
|
||
this.option.series[0].markLine.lineStyle.color = this.dataConfig[this.pageData.type].color
|
||
this.option.series[0].markLine.label.color = this.dataConfig[this.pageData.type].color
|
||
this.option.series[0].markLine.data[1] = {}
|
||
this.option.series[0].markLine.data[1].lineStyle = {}
|
||
this.option.series[0].markLine.data[1].lineStyle.color = this.dataConfig[this.pageData.type].color1
|
||
this.option.series[0].markLine.data[1].label = {}
|
||
this.option.series[0].markLine.data[1].label.color = this.dataConfig[this.pageData.type].color1
|
||
this.option.series[0].markLine.data[1].yAxis = avg2
|
||
// this.option.series[1].markLine.lineStyle.color = this.dataConfig[this.type].color
|
||
// this.option.series[1].markLine.label.color = this.dataConfig[this.type].color
|
||
this.option.title = {
|
||
text :'收缩压'+min + '-' + max + ' '+ '舒张压：' +min2 + '-' + max2,
|
||
// subtext: '毫摩尔/升',
|
||
left: 'center'
|
||
};
|
||
this.dataConfig.bloodGlucose.title = min + '-' + max
|
||
// this.option.yAxis.min = parseInt(min2) - 5;
|
||
// this.option.yAxis.max = parseInt(max) + 5;
|
||
break;
|
||
|
||
case 'pulseReat':
|
||
// [data[0]],
|
||
data.map((v,i) => {
|
||
|
||
let dataMsg = v.data_msg;
|
||
let timeArr = v.hour_minute.split(':');
|
||
let maxLength = (dataMsg.length > 5?5:dataMsg.length)
|
||
let readDataArr = [];
|
||
for(let i = 0;i<maxLength;i++){
|
||
let real_data = dataMsg[i]
|
||
|
||
if((real_data < 30 || real_data >= 200)){
|
||
continue;
|
||
}
|
||
|
||
readDataArr.push(real_data)
|
||
len += 1;
|
||
sum += real_data
|
||
if(max == 0 || max < real_data){
|
||
max = real_data
|
||
}
|
||
if(min == 0 || min > real_data){
|
||
min = real_data
|
||
}
|
||
}
|
||
|
||
if(timeArr[1] < 30){
|
||
let key = timeArr[0]+':'+'00'
|
||
if(dataArr[key] == undefined){
|
||
dataArr[key] = {
|
||
val:readDataArr.filter(item => (item > 30 || item <= 200)),
|
||
from:0
|
||
}
|
||
}else{
|
||
dataArr[key].val = [...dataArr[key].val,...readDataArr.filter(item => (item > 30 || item <= 200))];
|
||
}
|
||
|
||
}else{
|
||
let key = timeArr[0]+':'+'30'
|
||
if(dataArr[key] == undefined){
|
||
dataArr[key] = {
|
||
val:readDataArr.filter(item => (item > 30 || item <= 200)),
|
||
from:0
|
||
}
|
||
}else{
|
||
dataArr[key].val = [...dataArr[key].val,...readDataArr.filter(item => (item > 30 || item <= 200))];
|
||
}
|
||
|
||
}
|
||
|
||
|
||
|
||
})
|
||
avg = sum / len
|
||
avg = parseInt(avg)
|
||
for (let key in dataArr) {
|
||
if (dataArr.hasOwnProperty(key)) { // 确保key是对象自身的属性
|
||
let timeArr2 = key.split(':');
|
||
let floatData = this.makeFloatHoursMinutes(timeArr2[0],timeArr2[1])
|
||
echartsData.push({value:[floatData,this.getAverage(dataArr[key].val)],itemStyle: {color: this.dataConfig[this.pageData.type].color}})
|
||
// console.log(key , dataArr[key]);
|
||
}
|
||
}
|
||
|
||
this.option.series[0].data = echartsData
|
||
this.option.series[0].markLine.data[0].yAxis = avg
|
||
|
||
this.option.series[0].markLine.lineStyle.color = this.dataConfig[this.pageData.type].color
|
||
this.option.series[0].markLine.label.color = this.dataConfig[this.pageData.type].color
|
||
this.option.title = {
|
||
text :min + '-' + max,
|
||
subtext: '次/分',
|
||
left: 'center'
|
||
};
|
||
this.dataConfig.bloodGlucose.title = min + '-' + max
|
||
// this.option.yAxis.axisLabel.formatter = '{value}%';
|
||
this.option.yAxis.splitNumber = 1;
|
||
this.option.yAxis.min = 30;
|
||
this.option.yAxis.max = 90;
|
||
break;
|
||
case 'bloodLiquid':
|
||
data.map((v,i) => {
|
||
let dataMsg = v.data_msg;
|
||
let real_data = dataMsg.uricAcidVal/10
|
||
let timeArr = v.hour_minute.split(':');
|
||
|
||
if(timeArr[1] % 10 == 0){
|
||
var key = v.hour_minute
|
||
}else{
|
||
var key = timeArr[0]+':'+((timeArr[1] - 5) == 0?'00':(timeArr[1] - 5))
|
||
}
|
||
if(dataArr[key] == undefined){
|
||
dataArr[key] = {
|
||
val:[real_data],
|
||
}
|
||
}else{
|
||
dataArr[key].val = [...dataArr[key].val,real_data];
|
||
}
|
||
sum += real_data
|
||
if(max == 0 || max < real_data){
|
||
max = real_data
|
||
}
|
||
if(min == 0 || min > real_data){
|
||
min = real_data
|
||
}
|
||
len += 1;
|
||
|
||
})
|
||
|
||
avg = sum / len
|
||
avg = parseFloat(avg.toFixed(2))
|
||
for (let key in dataArr) {
|
||
|
||
if (dataArr.hasOwnProperty(key)) { // 确保key是对象自身的属性
|
||
let timeArr2 = key.split(':');
|
||
let floatData = this.makeFloatHoursMinutes(timeArr2[0],timeArr2[1])
|
||
let nextKey = this.subtractMinutes(key,10)
|
||
|
||
echartsData.push({value:[floatData,this.getAverage(dataArr[key].val)],itemStyle: {color: this.dataConfig[this.pageData.type].color}})
|
||
if(!dataArr.hasOwnProperty(nextKey)){
|
||
echartsData.push(null)
|
||
}
|
||
}
|
||
}
|
||
|
||
this.option.series[0].data = echartsData
|
||
//top / left / right / bottom / inside / insideLeft / insideRight / insideTop / insideBottom / insideTopLeft / insideBottomLeft / insideTopRight / insideBottomRight
|
||
this.option.series[0].markLine.label.position ='insideEndTop'
|
||
this.option.series[0].markLine.data[0].yAxis = avg
|
||
this.option.series[0].markLine.lineStyle.color = this.dataConfig[this.pageData.type].color
|
||
this.option.series[0].markLine.label.color = this.dataConfig[this.pageData.type].color
|
||
this.option.series[0].type = 'line'
|
||
this.option.series[0].symbol = 'none',
|
||
this.option.series[0].smooth = true
|
||
|
||
this.option.series[0].itemStyle= {
|
||
color: 'rgb(255, 70, 131)'
|
||
}
|
||
this.option.series[0].areaStyle = {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: 'rgb(254, 174, 173)'
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: 'rgb(255, 255, 248)'
|
||
}
|
||
])
|
||
}
|
||
|
||
// this.option.series[0].type = 'this.dataConfig[this.type].color'
|
||
this.option.title = {
|
||
text :min + '-' + max,
|
||
subtext: '微摩尔/升',
|
||
left: 'center',
|
||
textStyle:{
|
||
fontWeight:"lighter",
|
||
fontSize:24
|
||
}
|
||
};
|
||
this.dataConfig.bloodGlucose.title = min + '-' + max
|
||
|
||
this.option.yAxis.axisLabel.formatter = function(v,i){
|
||
return v;
|
||
}
|
||
this.option.yAxis.splitNumber = 3;
|
||
this.option.yAxis.min = 0;
|
||
this.option.yAxis.max = Math.round(max) + 1;
|
||
break;
|
||
case 'bloodLiquidAll':
|
||
let orTotal = {
|
||
cholesterol:[],
|
||
highDensity:[],
|
||
lowDensity:[],
|
||
triacylglycerol:[],
|
||
}
|
||
data.map((v,i) => {
|
||
let dataMsg = v.data_msg;
|
||
let real_data = {
|
||
cholesterol:(dataMsg.cholesterol/100).toFixed(2),
|
||
highDensity:(dataMsg.highDensity/100).toFixed(2),
|
||
lowDensity:(dataMsg.lowDensity/100).toFixed(2),
|
||
triacylglycerol:(dataMsg.triacylglycerol/100).toFixed(2)
|
||
}
|
||
orTotal.cholesterol.push(parseFloat(real_data.cholesterol))
|
||
orTotal.highDensity.push(parseFloat(real_data.highDensity))
|
||
orTotal.lowDensity.push(parseFloat(real_data.lowDensity))
|
||
orTotal.triacylglycerol.push(parseFloat(real_data.triacylglycerol))
|
||
let timeArr = v.hour_minute.split(':');
|
||
if(timeArr[1] % 10 == 0){
|
||
var key = v.hour_minute
|
||
}else{
|
||
var key = timeArr[0]+':'+((timeArr[1] - 5) == 0?'00':(timeArr[1] - 5))
|
||
}
|
||
if(dataArr[key] == undefined){
|
||
dataArr[key] = {
|
||
val:[real_data.cholesterol],
|
||
highDensity:[real_data.highDensity],
|
||
lowDensity:[real_data.lowDensity],
|
||
triacylglycerol:[real_data.triacylglycerol],
|
||
}
|
||
}else{
|
||
dataArr[key].val = [...dataArr[key].val,real_data.cholesterol];
|
||
dataArr[key].highDensity = [...dataArr[key].highDensity,real_data.highDensity];
|
||
dataArr[key].lowDensity = [...dataArr[key].lowDensity,real_data.lowDensity];
|
||
dataArr[key].triacylglycerol = [...dataArr[key].triacylglycerol,real_data.triacylglycerol];
|
||
}
|
||
|
||
|
||
})
|
||
|
||
let echartsData1 = [];
|
||
echartsData2 = [];
|
||
let echartsData3 = [];
|
||
let echartsData8 = [] // 测试用
|
||
for (let key in dataArr) {
|
||
|
||
if (dataArr.hasOwnProperty(key)) { // 确保key是对象自身的属性
|
||
let timeArr2 = key.split(':');
|
||
let floatData = this.makeFloatHoursMinutes(timeArr2[0],timeArr2[1])
|
||
let nextKey = this.subtractMinutes(key,10)
|
||
|
||
echartsData.push({value:[floatData,this.getAverage(dataArr[key].val)]})
|
||
if(!dataArr.hasOwnProperty(nextKey)){
|
||
echartsData.push(null)
|
||
}
|
||
|
||
echartsData1.push({value:[floatData,this.getAverage(dataArr[key].highDensity)]})
|
||
if(!dataArr.hasOwnProperty(nextKey)){
|
||
echartsData1.push(null)
|
||
}
|
||
|
||
echartsData2.push({value:[floatData,this.getAverage(dataArr[key].lowDensity)]})
|
||
if( !dataArr.hasOwnProperty(nextKey)){
|
||
echartsData2.push(null)
|
||
}
|
||
|
||
echartsData3.push({value:[floatData,this.getAverage(dataArr[key].triacylglycerol)]})
|
||
if( !dataArr.hasOwnProperty(nextKey)){
|
||
echartsData3.push(null)
|
||
}
|
||
|
||
// console.log(key , dataArr[key]);
|
||
}
|
||
}
|
||
console.log(echartsData8)
|
||
this.option.legend = {
|
||
data:['总胆固醇','甘油三酯','高密度脂蛋白','低密度脂蛋白']
|
||
}
|
||
// 总胆固醇
|
||
this.option.series[0].data = echartsData
|
||
this.option.series[0].type = 'line'
|
||
this.option.series[0].symbol = 'none',
|
||
this.option.series[0].smooth = true
|
||
this.option.series[0].name = this.option.legend.data[0]
|
||
this.option.series[0].color = this.dataConfig.bloodLiquidAll.overviewData.data[0].color
|
||
// 甘油三酯
|
||
this.option.series[1] = {}
|
||
this.option.series[1].data = echartsData3
|
||
this.option.series[1].type = 'line'
|
||
this.option.series[1].symbol = 'none',
|
||
this.option.series[1].smooth = true
|
||
this.option.series[1].name = this.option.legend.data[1]
|
||
this.option.series[1].color = this.dataConfig.bloodLiquidAll.overviewData.data[1].color
|
||
// 高
|
||
this.option.series[2] = {}
|
||
this.option.series[2].data = echartsData1
|
||
this.option.series[2].type = 'line'
|
||
this.option.series[2].symbol = 'none',
|
||
this.option.series[2].smooth = true
|
||
this.option.series[2].name = this.option.legend.data[2]
|
||
this.option.series[2].color = this.dataConfig.bloodLiquidAll.overviewData.data[2].color
|
||
// 低
|
||
this.option.series[3] = {}
|
||
this.option.series[3].data = echartsData2
|
||
this.option.series[3].type = 'line'
|
||
this.option.series[3].symbol = 'none',
|
||
this.option.series[3].smooth = true
|
||
this.option.series[3].name = this.option.legend.data[3]
|
||
this.option.series[3].color = this.dataConfig.bloodLiquidAll.overviewData.data[3].color
|
||
|
||
this.option.series[0].markLine = []
|
||
this.dataConfig.bloodGlucose.title = min + '-' + max
|
||
this.dataConfig.bloodLiquidAll.overviewData.data[0].average = this.getAverage(orTotal.cholesterol).toFixed(2)
|
||
this.dataConfig.bloodLiquidAll.overviewData.data[1].average = this.getAverage(orTotal.triacylglycerol).toFixed(2)
|
||
this.dataConfig.bloodLiquidAll.overviewData.data[2].average = this.getAverage(orTotal.highDensity).toFixed(2)
|
||
this.dataConfig.bloodLiquidAll.overviewData.data[3].average = this.getAverage(orTotal.lowDensity).toFixed(2)
|
||
if(orTotal.cholesterol.length > 0){
|
||
this.dataConfig.bloodLiquidAll.overviewData.data[0].value = Math.min(...orTotal.cholesterol).toFixed(2) + '-' + Math.max(...orTotal.cholesterol).toFixed(2)
|
||
this.dataConfig.bloodLiquidAll.overviewData.data[1].value = Math.min(...orTotal.triacylglycerol).toFixed(2) + '-' + Math.max(...orTotal.triacylglycerol).toFixed(2)
|
||
this.dataConfig.bloodLiquidAll.overviewData.data[2].value = Math.min(...orTotal.highDensity).toFixed(2) + '-' + Math.max(...orTotal.highDensity).toFixed(2)
|
||
this.dataConfig.bloodLiquidAll.overviewData.data[3].value = Math.min(...orTotal.lowDensity).toFixed(2) + '-' + Math.max(...orTotal.lowDensity).toFixed(2)
|
||
|
||
}
|
||
this.option.yAxis.splitNumber = 3;
|
||
this.option.yAxis.min = 0;
|
||
this.option.yAxis.max = 6;
|
||
break;
|
||
}
|
||
return this.option;
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.contents {
|
||
width: 100%;
|
||
margin-top:20rpx;
|
||
.left {
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
.total_box{
|
||
height: 400rpx;
|
||
margin: 0rpx 100rpx;
|
||
justify-content: space-between;
|
||
padding-bottom: 80rpx;
|
||
.b1{
|
||
width: 40%;
|
||
height: 200rpx;
|
||
border-radius: 20rpx;
|
||
background-color: #fff;
|
||
margin-right: 20rpx;
|
||
}
|
||
}
|
||
.body-style {
|
||
background-color: #f6f6f6;
|
||
}
|
||
.title{
|
||
background-color: #fff;
|
||
.title-data{
|
||
font-size: 60rpx;
|
||
font-weight: bold;
|
||
margin-right: 10rpx;
|
||
}
|
||
}
|
||
.flx{
|
||
display: flex;
|
||
}
|
||
.jc-end{
|
||
justify-content: end;
|
||
}
|
||
.jc-start{
|
||
justify-content: end;
|
||
}
|
||
.ac{
|
||
align-items: center;
|
||
}
|
||
.jc{
|
||
justify-content: center;
|
||
}
|
||
.jcsb{
|
||
justify-content: space-between;
|
||
}
|
||
.fd_row{
|
||
flex-direction: row;
|
||
}
|
||
|
||
.video {
|
||
width: 80%;
|
||
padding: 0rpx 20rpx;
|
||
}
|
||
|
||
.charts {
|
||
border-radius: 20px;
|
||
padding: 20px 0px;
|
||
margin: 100rpx 50rpx 0rpx 50rpx;
|
||
}
|
||
|
||
.page-view {
|
||
border-radius: 20px;
|
||
margin: 0rpx 100rpx;
|
||
border: 1rpx solid gray;
|
||
}
|
||
|
||
.sport-title {
|
||
font-size: 50rpx;
|
||
}
|
||
|
||
.sport-jvli {
|
||
font-size: 50rpx;
|
||
}
|
||
</style> |