-
+
+
总消耗：{{ calorieData.total || '--' }}
+
-
![]()
-
923
+
![]()
+
{{ Math.abs(calorieData.lastCalorieTotalCompare) || '--' }}
-
+
+
平均消耗：{{ calorieData.avg || '--' }}
+
-
![]()
-
923
+
![]()
+
{{ Math.abs(calorieData.avg) || '--' }}
@@ -158,6 +166,7 @@ import ToastService from '@/services/toast-service';
import { /* EmotionModel, */ PsyBaseUrl } from '@/config/models';
import axios from 'axios';
import EchartBox from '@/components/EchartBox';
+import APIHealthUser from '@/api/health-user';
export default {
components: {
DateSwitch,
@@ -283,7 +292,11 @@ export default {
currentEmoName: '', //当前情绪名称
emotionList: [],
weekAndMonthSeries: null,
- emoType: '1'
+ emoType: '1',
+ signData: {},
+ signDaysList: [],
+ stepsData: {},
+ calorieData: {}
};
},
created() {
@@ -307,9 +320,10 @@ export default {
},
signActive(val) {
console.log(val);
- /* this.$nextTick(() => {
- this.initSignChart();
- }); */
+ this.$nextTick(() => {
+ /* this.initSignChart(); */
+ this.initData();
+ });
}
},
computed: {
@@ -890,6 +904,7 @@ export default {
/* if (!this.emotionChart) {
this.emotionChart = this.$echarts.init(document.getElementById('emotionChart'));
} */
+
if (!this.signChart) {
this.signChart = this.$echarts.init(document.getElementById('signChart'));
}
@@ -942,147 +957,26 @@ export default {
this.emotionChart.setOption(option);
},
- initSignChart() {
+ async initSignChart() {
let option = this.getOption();
-
+ let data = await this.getReportData();
if (this.signActive == 0) {
//测试
- let data = [
- {
- time: '5.11',
- value: 50
- },
- {
- time: '5.12',
- value: 60
- },
- {
- time: '5.13',
- value: 70
- },
- {
- time: '5.14',
- value: 80
- },
- {
- time: '5.15',
- value: 120
- },
- {
- time: '5.16',
- value: 130
- },
- {
- time: '5.17',
- value: 150
- }
- ];
-
- this.formateHeartRateData(option, data);
+ this.formateHeartRateData(option, data.day);
this.signChart.setOption(option);
} else if (this.signActive == 1) {
//测试
- let data = [
- {
- time: '5.11',
- value: 36
- },
- {
- time: '5.12',
- value: 38
- },
- {
- time: '5.13',
- value: 37
- },
- {
- time: '5.14',
- value: 36
- },
- {
- time: '5.15',
- value: 38
- },
- {
- time: '5.16',
- value: 37
- },
- {
- time: '5.17',
- value: 39
- }
- ];
- this.formateTemperatureData(option, data);
+ this.formateTemperatureData(option, data.day);
this.signChart.setOption(option);
} else if (this.signActive == 2) {
option = this.getOption(false);
let option2 = this.getOption(false);
+ let data2 = await this.getReportData(3);
+ this.stepsData = { ...data };
+ this.calorieData = { ...data2 };
- //测试
- let data = [
- {
- time: '5.11',
- value: 36
- },
- {
- time: '5.12',
- value: 38
- },
- {
- time: '5.13',
- value: 37
- },
- {
- time: '5.14',
- value: 36
- },
- {
- time: '5.15',
- value: 38
- },
- {
- time: '5.16',
- value: 37
- },
- {
- time: '5.17',
- value: 39
- }
- ];
- //测试
- let data2 = [
- {
- time: '5.11',
- value: 36
- },
- {
- time: '5.12',
- value: 38
- },
- {
- time: '5.13',
- value: 37
- },
- {
- time: '5.14',
- value: 36
- },
- {
- time: '5.15',
- value: 38
- },
- {
- time: '5.16',
- value: 37
- },
- {
- time: '5.17',
- value: 39
- }
- ];
-
- this.formateStepData(option, data);
- this.formateCalorieData(option2, data2);
+ this.formateStepData(option, data.day);
+ this.formateCalorieData(option2, data2.day);
this.stepChart.setOption(option);
this.calorieChart.setOption(option2);
@@ -1145,23 +1039,25 @@ export default {
}
});
data.forEach(item => {
- xdata.push(item.time);
+ xdata.push(item.date);
fill.push({
value: max - item.value,
label: {
show: false
},
itemStyle: {
- color: this.formateHeartRateColor(item.value)
+ borderWidth: 3,
+ borderColor: this.calcColorByEvaluate(item.evaluate)
}
});
ydata.push({
value: item.value,
label: {
- show: true
+ show: false
},
itemStyle: {
- color: this.formateHeartRateColor(item.value)
+ borderWidth: 3,
+ borderColor: this.calcColorByEvaluate(item.evaluate)
}
});
});
@@ -1209,23 +1105,25 @@ export default {
}
});
data.forEach(item => {
- xdata.push(item.time);
+ xdata.push(item.date);
fill.push({
value: max - item.value,
label: {
show: false
},
itemStyle: {
- color: this.formateTemperatureColor(item.value)
+ borderWidth: 3,
+ borderColor: this.calcColorByEvaluate(item.evaluate)
}
});
ydata.push({
value: item.value,
label: {
- show: true
+ show: false
},
itemStyle: {
- color: this.formateTemperatureColor(item.value)
+ borderWidth: 3,
+ borderColor: this.calcColorByEvaluate(item.evaluate)
}
});
});
@@ -1248,14 +1146,15 @@ export default {
let xdata = [];
let ydata = [];
data.forEach(item => {
- xdata.push(item.time);
+ xdata.push(item.date);
ydata.push({
value: item.value,
label: {
show: true
},
itemStyle: {
- color: this.formateTemperatureColor(item.value)
+ borderWidth: 3,
+ borderColor: this.calcColorByEvaluate(item.evaluate)
}
});
});
@@ -1268,14 +1167,15 @@ export default {
let xdata = [];
let ydata = [];
data.forEach(item => {
- xdata.push(item.time);
+ xdata.push(item.date);
ydata.push({
value: item.value,
label: {
show: true
},
itemStyle: {
- color: this.formateTemperatureColor(item.value)
+ borderWidth: 3,
+ borderColor: this.calcColorByEvaluate(item.evaluate)
}
});
});
@@ -1284,9 +1184,11 @@ export default {
// 隐藏y轴
option.yAxis.show = false;
},
- getOption(point = true) {
+ getOption(/* point = true */) {
let option = {
grid: {
+ show: true,
+ borderWidth: 0,
top: '10%',
left: '10%',
right: '10%',
@@ -1299,34 +1201,86 @@ export default {
},
axisTick: {
show: false
+ },
+ splitLine: {
+ show: false,
+ lineStyle: {
+ color: '#ddd',
+ width: 4
+ }
+ },
+ axisLabel: {
+ show: true,
+ fontSize: 12,
+ showMinLabel: true, //显示最小值
+ showMaxLabel: true, //显示最大值
+ marginBottom: 10 // 调整标签与轴线的距离
}
},
yAxis: {
- type: 'value'
+ type: 'value',
+ boundaryGap: ['5%', '5%'],
+ nameTextStyle: {
+ fontSize: 13
+ },
+ alignTicks: false,
+ axisTick: {
+ show: false
+ },
+ axisLabel: {
+ show: true,
+ fontSize: 13
+ },
+ splitLine: {
+ show: false,
+ lineStyle: {
+ color: '#ddd',
+ width: 1
+ }
+ }
},
- series: [
+ dataZoom: [
{
- type: 'bar',
- barMaxWidth: 15,
- stack: 'value',
- stackStrategy: 'all',
- animation: false,
- label: {
- show: true,
- width: 15,
- height: 15,
- backgroundColor: '#fff',
- borderRadius: 50,
- borderWidth: 3,
- borderColor: 'inherit',
- verticalAlign: 'middle',
- position: 'insideTop',
- formatter: function () {
- return '';
- }
+ start: 0,
+ end: 100,
+ textStyle: {
+ color: '#FFF',
+ fontSize: 14
},
+ show: true,
+ height: 20,
+ bottom: 8,
+ handleStyle: {
+ borderWidth: 4,
+ borderCap: 'square'
+ }
+ }
+ ],
+ tooltip: {
+ trigger: 'axis',
+ textStyle: {
+ fontSize: 16,
+ align: 'center'
+ },
+ formatter: function (params) {
+ return params[0].marker + params[0].name + '' + params[0].value;
+ }
+ },
+ series: [
+ {
+ type: 'line',
+ padding: 10,
+ smooth: true,
+ symbol: 'circle',
+ symbolSize: 10,
itemStyle: {
- borderRadius: [0, 0, 12, 12]
+ color: '#fff',
+ borderWidth: 4
+ },
+ lineStyle: {
+ width: 6,
+ type: 'solid',
+ color: '#189b3b'
}
},
{
@@ -1336,13 +1290,14 @@ export default {
stackStrategy: 'all',
animation: false,
itemStyle: {
- borderRadius: [12, 12, 0, 0]
+ borderRadius: [12, 12, 0, 0],
+ show: false
}
}
]
};
- if (!point) {
+ /* if (!point) {
option.series = [
{
type: 'bar',
@@ -1357,7 +1312,7 @@ export default {
}
}
];
- }
+ } */
return option;
},
@@ -1384,6 +1339,65 @@ export default {
name: name
}
});
+ },
+ // 根据等级计算颜色
+ calcColorByEvaluate(value) {
+ let color = '';
+ const intValue = Number(value);
+ switch (intValue) {
+ case 1:
+ // 偏高
+ color = '#ff5f8b';
+ break;
+ case 2:
+ // 正常
+ color = '#189b3b';
+ break;
+ case 3:
+ // 偏低
+ color = '#2ea7e0';
+ break;
+ default:
+ color = '#189b3b';
+ break;
+ }
+ return color;
+ },
+ // 获取体征历史数据
+ getReportData(value) {
+ let reqBody = {
+ personId: this.$store.getters.personId,
+ dateType: 1,
+ healthyType: value || this.signActive,
+ startTime: '2024-01-28',
+ endTime: '2024-02-03'
+ };
+ return new Promise(resolve => {
+ APIHealthUser.getReportData(reqBody).then(res => {
+ if (res.data.data.day) {
+ res.data.data.day = res.data.data.day.map(item => {
+ item.date = this.$dayjs(item.date).format('MM-DD');
+ return item;
+ });
+ }
+ this.signData = { ...res.data.data };
+
+ if (this.signActive === 1) {
+ this.signDaysList = [
+ { day: res.data.data.normal, name: '正常', color: '#189b3b' },
+ { day: res.data.data.fever, name: '偏高', color: '#ff5f8b' }
+ /* { day: res.data.data.low, name: '偏低', color: '#2ea7e0' } */
+ ];
+ } else {
+ this.signDaysList = [
+ { day: res.data.data.normal, name: '正常', color: '#189b3b' },
+ { day: res.data.data.high, name: '偏高', color: '#ff5f8b' },
+ { day: res.data.data.low, name: '偏低', color: '#2ea7e0' }
+ ];
+ }
+ resolve(res.data.data);
+ });
+ });
}
}
};
@@ -1475,7 +1489,7 @@ export default {
.ChatBox {
overflow: hidden;
width: calc(100vw - 60px);
- height: 600px;
+ height: 650px;
border: 2px solid #cdf348;
border-radius: 70px;
margin-top: 30px;
@@ -1484,7 +1498,7 @@ export default {
}
.legendBox {
width: 100%;
- height: 150px;
+ height: 100px;
display: flex;
justify-content: flex-end;
align-items: center;
diff --git a/src/views/today/signsDetails.vue b/src/views/today/signsDetails.vue
index 056ad02..f7aa551 100644
--- a/src/views/today/signsDetails.vue
+++ b/src/views/today/signsDetails.vue
@@ -572,11 +572,6 @@ export default {
data: this.xAxisData
},
dataZoom: [
- /* {
- type: "inside",
- start: 0,
- end: 100,
- }, */
{
start: 0,
end: 100,