610 lines
15 KiB
Vue
610 lines
15 KiB
Vue
<template>
|
||
<view class="body-style">
|
||
<tm-nav-bar left-icon="arrow-left" :title="dataConfig[type].name" @clickLeft="back" />
|
||
<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="title flx ac" style="justify-content: center;">
|
||
<view class="title-data">
|
||
{{dataConfig[type].title}}
|
||
</view>
|
||
<view class="title-unit">
|
||
{{dataConfig[type].unit}}
|
||
</view>
|
||
</view> -->
|
||
<view style=" height:600rpx;background-color: #fff;"><l-echart ref="chartRef" @finished="init"></l-echart></view>
|
||
|
||
<cankao v-if="dataConfig[type].cankaoData" :cankaoData="dataConfig[type].cankaoData" ></cankao>
|
||
<view class="box-rds " @click="goPath">
|
||
<view class="flx jcsb ac">
|
||
<view class="" style="font-size: 26rpx;">
|
||
全部数据
|
||
</view>
|
||
<view style="color: #b8b8b8;">></view>
|
||
</view>
|
||
</view>
|
||
<view class="" style="height: 20rpx;">
|
||
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'
|
||
import { mapGetters } from "vuex";
|
||
export default {
|
||
data() {
|
||
return {
|
||
time: new Date().toISOString().substring(0, 10),
|
||
type:'',
|
||
desc:'',
|
||
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
|
||
}
|
||
]
|
||
},
|
||
bloodOxygen:{
|
||
title:'123123',
|
||
name:'血氧',
|
||
color:"#bf32fc",
|
||
unit:'%',
|
||
cankaoData:false,
|
||
|
||
},
|
||
bodyTemperature:{
|
||
title:'bodyTemperature',
|
||
name:'体温',
|
||
color:"#bf32fc",
|
||
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
|
||
},
|
||
],
|
||
}
|
||
},
|
||
option:{
|
||
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:
|
||
[
|
||
|
||
// [0.5, 3.5],
|
||
// [1.2, 2.4],
|
||
// [1.4, 2.8],
|
||
// [2.7, 2.4],
|
||
// [3.4, 6],
|
||
],
|
||
markLine: {
|
||
data: [
|
||
{
|
||
yAxis: 2.5, // 在 y 值为 100 的位置添加水平参考线
|
||
}
|
||
],
|
||
lineStyle:{
|
||
color:'#ccc',
|
||
cap:"butt"
|
||
},
|
||
label:{
|
||
color:'#ccc',
|
||
},
|
||
},
|
||
type: 'scatter',
|
||
}
|
||
]
|
||
},
|
||
option2: {
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'shadow'
|
||
},
|
||
confine: true
|
||
},
|
||
legend: {
|
||
data: ['热度', '正面', '负面']
|
||
},
|
||
grid: {
|
||
left: 20,
|
||
right: 20,
|
||
bottom: 15,
|
||
top: 40,
|
||
containLabel: true
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: 'value',
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#999999'
|
||
}
|
||
},
|
||
axisLabel: {
|
||
color: '#666666',
|
||
|
||
}
|
||
}
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: 'category',
|
||
axisTick: { show: false },
|
||
data: ['汽车之家', '今日头条', '百度贴吧', '一点资讯', '微信', '微博', '知乎'],
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#999999'
|
||
}
|
||
},
|
||
axisLabel: {
|
||
color: '#666666'
|
||
}
|
||
}
|
||
],
|
||
series: [
|
||
{
|
||
name: '热度',
|
||
type: 'bar',
|
||
label: {
|
||
normal: {
|
||
show: true,
|
||
position: 'inside'
|
||
}
|
||
},
|
||
data: [300, 270, 340, 344, 300, 320, 310],
|
||
},
|
||
{
|
||
name: '正面',
|
||
type: 'bar',
|
||
stack: '总量',
|
||
label: {
|
||
normal: {
|
||
show: true
|
||
}
|
||
},
|
||
data: [120, 102, 141, 174, 190, 250, 220]
|
||
},
|
||
{
|
||
name: '负面',
|
||
type: 'bar',
|
||
stack: '总量',
|
||
label: {
|
||
normal: {
|
||
show: true,
|
||
position: 'left'
|
||
}
|
||
},
|
||
data: [-20, -32, -21, -34, -90, -130, -110]
|
||
}
|
||
]
|
||
},
|
||
|
||
}
|
||
},
|
||
onLoad(e) {
|
||
this.type = e.type
|
||
this.desc = e.desc || ''
|
||
// this.getDataList()
|
||
},
|
||
computed: {
|
||
...mapGetters({
|
||
getActiceDevice: "api/getActiceDevice"
|
||
})
|
||
},
|
||
methods: {
|
||
async init() {
|
||
this.chart = await this.$refs.chartRef.init(echarts);
|
||
let option = await this.getDataList();
|
||
this.chart.setOption(option)
|
||
|
||
},
|
||
back() {
|
||
uni.navigateBack({
|
||
delta: 1
|
||
})
|
||
},
|
||
goPath(){
|
||
uni.navigateTo({
|
||
url:'./detail?type='+this.type +(this.desc == ''?'':'&desc='+this.desc)
|
||
})
|
||
},
|
||
makeHour(hours){
|
||
|
||
return Math.floor(hours/6); // 使用%运算符取余，确保结果是0-4的范围
|
||
},
|
||
makeMinute(minute){
|
||
return minute/60;
|
||
},
|
||
makeFloatHoursMinutes(hours, minutes) {
|
||
|
||
let total = hours * 3600 + minutes * 60;
|
||
let floatData = total / 86400 * 4
|
||
return floatData.toFixed(2);
|
||
},
|
||
async getDataList(){
|
||
let res = await 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
|
||
})
|
||
|
||
return this.makeOptionConfig(res.data);
|
||
},
|
||
makeOptionConfig(data){
|
||
let echartsData = [];
|
||
let sum = 0;
|
||
let max = 0;
|
||
let min = 0;
|
||
let avg = 0;
|
||
let len = 0;
|
||
switch(this.type){
|
||
|
||
case 'bodyTemperature':
|
||
data.map((v,i) => {
|
||
let timeArr = v.hour_minute.split(':');
|
||
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 || max > dataMsg){
|
||
min = dataMsg
|
||
}
|
||
})
|
||
avg = sum / data.length
|
||
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.yAxis.min = 32;
|
||
this.option.yAxis.max = max + 4;
|
||
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 = 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 || max > dataMsg){
|
||
min = dataMsg
|
||
}
|
||
})
|
||
avg = sum / data.length
|
||
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.bodyTemperature.title = min + '-' + max
|
||
break;
|
||
case 'bloodGlucose':
|
||
data.map((v,i) => {
|
||
let timeArr = v.hour_minute.split(':');
|
||
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 || max > v.data_msg){
|
||
min = v.data_msg
|
||
}
|
||
})
|
||
avg = sum / data.length
|
||
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
|
||
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 || max > 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 'pulseReat':
|
||
data.map((v,i) => {
|
||
|
||
let dataMsg = v.data_msg;
|
||
let timeArr = v.hour_minute.split(':');
|
||
for(let i = 0;i<1;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 || max > 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 = 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(':');
|
||
let floatData = this.makeFloatHoursMinutes(timeArr[0],timeArr[1])
|
||
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 || max > real_data){
|
||
min = real_data
|
||
}
|
||
len += 1;
|
||
|
||
})
|
||
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.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 = 330;
|
||
break;
|
||
}
|
||
return this.option;
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped="scss">
|
||
.body-style {
|
||
background-color: #f6f6f6;
|
||
}
|
||
.box-rds {
|
||
background-color: #fff;
|
||
border-radius: 40rpx;
|
||
padding: 30rpx;
|
||
margin: 20rpx;
|
||
|
||
}
|
||
.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;
|
||
}
|
||
|
||
</style>
|