renkang/xj-screen
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source 
1.修改睡眠模块，总览添加步数模块
This commit is contained in:
weixin
2024-01-22 17:42:45 +08:00
parent 5cf32ce40e
commit ef3e1c3b31
5 changed files with 257 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/images/allStep.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.7 KiB

src/components/secondaryScreen/secondMap/components/userInfoModal/allLook.vue
+2 -2
View File
@@ -8,7 +8,7 @@
</a-radio-group>
</div>
<all-look-item :info-data="props.infoData" />
<all-look-item :info-data="props.infoData" :paramsDate="paramsDate" />
</div>
</template>
<script setup lang="ts">
@@ -29,4 +29,4 @@
emit('changeParamsDate', v.target.value);
}
</script>
<style scoped lang="less"></style>
<style scoped lang="less"></style>
src/components/secondaryScreen/secondMap/components/userInfoModal/allLookItem.vue
+25 -1
View File
@@ -207,6 +207,28 @@
</div>
</div>
</div>
<div class="box-con-small">
<div style="display: flex; align-items: center; padding: 10px 0; justify-content: flex-start">
<img :src="allStep" alt="" />
步数
</div>
<div style="display: flex">
<div style="display: flex; width: 100%">
<div class="label-d">
<div>{{ paramsDate === '0' ? '总步数值' : '最大步数值' }}</div>
<div :style="{ opacity: props.paramsDate === '0' ? 0 : 1 }">最小步数值</div>
<div :style="{ opacity: props.paramsDate === '0' ? 0 : 1 }">平均步数值</div>
</div>
<div class="value-d">
<div>{{ getNum(props.infoData?.sdcStat?.max) }}</div>
<div :style="{ opacity: props.paramsDate === '0' ? 0 : 1 }">{{ getNum(props.infoData?.sdcStat?.min) }}</div>
<div :style="{ opacity: props.paramsDate === '0' ? 0 : 1 }">{{ getNum(props.infoData?.sdcStat?.avg) }}</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
@@ -215,10 +237,12 @@
const blood = new URL('/@/assets/images/blood_oxygen.png', import.meta.url).href;
const heart_rate = new URL('/@/assets/images/heart_rate.png', import.meta.url).href;
const temperature = new URL('/@/assets/images/temperature.png', import.meta.url).href;
const allStep = new URL('/@/assets/images/allStep.png', import.meta.url).href;
const pressure = new URL('/@/assets/images/pressure.png', import.meta.url).href;
const sleep = new URL('/@/assets/images/sleep.png', import.meta.url).href;
const props = defineProps({
infoData: propTypes.object.def({}),
paramsDate: propTypes.string.def('0'),
});
function getTime(time) {
@@ -316,4 +340,4 @@
padding: 5px 0;
}
}
</style>
</style>
src/components/secondaryScreen/secondMap/components/userInfoModal/sleep.vue
+228 -107
View File
@@ -3,27 +3,38 @@
<div class="item-three" style="display: flex; justify-content: center" v-if="status">
<div style="width: 15%; text-align: center">
<div>
<span style="font-size: 25px"> {{ maxInfo }}</span>
<template v-if="getTime(maxInfo)?.h > 0">
<span style="font-size: 25px"> {{ getTime(maxInfo)?.h }}</span>
<span style="color: #aa9db6">小时</span>
</template>
<span style="font-size: 25px"> {{ getTime(maxInfo)?.m }}</span>
<span style="color: #aa9db6">分钟</span>
</div>
<div style="color: #aa9db6">最高睡眠时长</div>
<div style="color: #aa9db6">{{ type == 1 ? '深睡睡眠时长' : '日均深睡时长' }}</div>
</div>
<div style="width: 15%; text-align: center">
<div>
<span style="font-size: 25px"> {{ minInfo }}</span>
<template v-if="getTime(minInfo)?.h > 0">
<span style="font-size: 25px"> {{ getTime(minInfo)?.h }}</span>
<span style="color: #aa9db6">小时</span>
</template>
<span style="font-size: 25px"> {{ getTime(minInfo)?.m }}</span>
<span style="color: #aa9db6">分钟</span>
</div>
<div style="color: #aa9db6">最低睡眠时长</div>
<div style="color: #aa9db6">{{ type == 1 ? '浅睡睡眠时长' : '日均浅睡时长' }}</div>
</div>
<div style="width: 15%; text-align: center">
<div>
<span style="font-size: 25px">{{ middleInfo }}</span>
<template v-if="getTime(middleInfo)?.h > 0">
<span style="font-size: 25px">{{ getTime(middleInfo)?.h }}</span>
<span style="color: #aa9db6">小时</span>
</template>
<span style="font-size: 25px">{{ getTime(middleInfo)?.m }}</span>
<span style="color: #aa9db6">分钟</span>
</div>
<div style="color: #aa9db6">平均睡眠时长</div>
<div style="color: #aa9db6">{{ type == 1 ? '睡眠总时长' : '日均睡眠总时长' }}</div>
</div>
</div>
<div v-if="status && !isEmpty" ref="chartRef" style="min-height: 300px; width: 100%"></div>
<template v-if="status && isEmpty">
<div style="min-height: 300px; width: 100%; display: flex; align-items: center; justify-content: center">
@@ -89,7 +100,7 @@
function initF() {
if (status.value) {
echart && echart.clear();
initEchart('0');
initEchart();
} else {
tableReload();
}
@@ -99,7 +110,7 @@
status.value = s;
if (s) {
nextTick(() => {
initEchart('0');
initEchart();
});
}
}
@@ -109,58 +120,153 @@
/**
* @type 传入 type = '1' 则不需要要渲染图表
* */
async function initEchart(t) {
async function initEchart() {
try {
const { code, result, message: msg } = await querySleepStatisticsApi(getParams());
maxInfo.value = '';
middleInfo.value = '';
minInfo.value = '';
if (code === 200) {
isEmpty.value = result.viewDataList.length === 0;
let xArr = [];
let yArr = [];
let yArr1 = [];
maxInfo.value = result.maxValue ? result.maxValue : '/';
middleInfo.value = result.avgValue ? result.avgValue : '/';
minInfo.value = result.minValue ? result.minValue : '/';
if (t === '1') return;
type.value === 1 &&
result.viewDataList.map((item) => {
xArr.push(item.date);
yArr.push(item.value === 1 ? 1 : 0);
yArr1.push(item.value === 2 ? 1 : 0);
});
isEmpty.value = type.value === 1 ? result.timePeriods.length === 0 : result.viewDataList.length === 0;
let xArr: any[] = [];
let yArr: any[] = [];
let yArr1: any[] = [];
maxInfo.value = type.value === 1 ? result.maxValue : result.deepSleepTimes ? result.deepSleepTimes : '';
middleInfo.value = type.value === 1 ? result.total1 : result.deepLightTimes ? result.deepLightTimes : '';
minInfo.value = type.value === 1 ? result.minValue : result.lightSleepTimes ? result.lightSleepTimes : '';
// debugger;
// type.value === 1 &&
// result.viewDataList.map((item) => {
// xArr.push(item.date);
// yArr.push(item.value === 1 ? 1 : 0);
// yArr1.push(item.value === 2 ? 1 : 0);
// });
type.value !== 1 &&
result.viewDataList.map((item) => {
const total = (item.value ? item.value : 0) + (item.value1 ? item.value1 : 0);
xArr.push(item.date);
yArr.push(item.value);
yArr1.push(item.value1);
// let p1 = parseInt(((item.value ? item.value : 0) / total) * 100);
// let p2 = parseInt(((item.value1 ? item.value1 : 0) / total) * 100);
yArr.push(item.value ? item.value : 0);
yArr1.push(item.value1 ? item.value1 : 0);
});
echart = echarts.init(chartRef.value);
const option = {
title: {},
legend: {
textStyle: {
color: '#fff',
},
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
textStyle: {
color: '#fff',
},
backgroundColor: 'rgba(50,50,50,0.7)',
borderColor: '#1b7ef2',
formatter: function (params) {
let tar1 = params[1];
let tar = params[0];
let str = '';
if (type.value === 1) {
str = xArr[tar.dataIndex] + '<br/>' + (tar1.value > 0 ? '浅睡' : '深睡');
} else {
str =
xArr[tar.dataIndex] +
`<div>
if (type.value === 1) {
getZXEchart(result);
} else {
getZEcahrt(xArr, yArr, yArr1);
}
} else {
isEmpty.value = true;
message.warn(msg);
}
} catch {}
}
function getZXEchart(res) {
echart = echarts.init(chartRef.value);
let xArr: any[] = [];
let yArr: any[] = [];
res.timePeriods &&
res.timePeriods.map((item) => {
switch (item.flag) {
case 1:
// 浅睡
yArr.push(1);
yArr.push(1);
break;
case 3:
// 深睡
yArr.push(0);
yArr.push(0);
break;
case 4:
// 清醒
yArr.push(3);
yArr.push(3);
break;
case 5:
// 零星小睡
yArr.push(2);
yArr.push(2);
break;
}
xArr.push(dayjs(item.start).format('HH:mm'));
xArr.push(dayjs(item.end).format('HH:mm'));
});
const option = {
xAxis: {
type: 'category',
data: xArr,
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
formatter: function (params) {
console.log(params);
let tar = params[0];
let name = '';
switch (tar.value) {
case 3:
name = '清醒';
break;
case 2:
name = '零星小睡';
break;
case 1:
name = '浅睡';
break;
case 0:
name = '深睡';
break;
}
return xArr[tar.dataIndex] + '<br/>' + name;
},
},
yAxis: {
show: false,
},
series: [
{
data: yArr,
type: 'line',
},
],
};
echart.setOption(option);
window.addEventListener('resize', () => {
echart.resize();
});
}
function getZEcahrt(xArr, yArr, yArr1) {
echart = echarts.init(chartRef.value);
const option = {
title: {},
legend: {
textStyle: {
color: '#ffffff',
},
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
formatter: function (params) {
let tar1 = params[1];
let tar = params[0];
// let tar = params[1];
// return (tar1.value > 0 ? '短睡' : '长睡') + '<br/>' + tar.seriesName + ' : ' + tar.value;
let str = '';
if (type.value === 1) {
str = xArr[tar.dataIndex] + '<br/>' + (tar1.value > 0 ? '浅睡' : '深睡');
} else {
str =
xArr[tar.dataIndex] +
`<div>
<div style="display: flex;justify-content: space-between">
<div>
深睡：${tar.value ? tar.value : 0}
@@ -178,62 +284,71 @@
</div>
</div>
</div>`;
}
return str;
},
}
return str;
},
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true,
},
xAxis: {
type: 'category',
splitLine: { show: false },
data: xArr,
axisLabel: {
color: '#fff',
},
},
yAxis: {
show: false,
},
series: [
{
name: '深睡',
type: 'bar',
barMaxWidth: '20px',
stack: 'a',
itemStyle: {
borderColor: '#5087ec',
borderWidth: 0,
color: '#5087ec',
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true,
// emphasis: {
// itemStyle: {
// borderColor: '#68bbc4',
// color: '#68bbc4',
// },
// },
axisLabel: {
color: '#fff',
},
xAxis: {
type: 'category',
splitLine: { show: false },
data: xArr,
axisLabel: {
color: '#fff',
},
data: yArr,
},
{
name: '浅睡',
barMaxWidth: '20px',
stack: 'a',
itemStyle: {
borderColor: '#85d0dc',
borderWidth: 0,
color: '#85d0dc',
},
yAxis: {
show: false,
axisLabel: {
color: '#fff',
},
series: [
{
name: '深睡',
type: 'bar',
barMaxWidth: '20px',
itemStyle: {
borderColor: '#5087ec',
borderWidth: 0,
color: '#5087ec',
},
data: yArr,
},
{
name: '浅睡',
barMaxWidth: '20px',
itemStyle: {
borderColor: '#85d0dc',
borderWidth: 0,
color: '#85d0dc',
},
type: 'bar',
data: yArr1,
},
],
};
type: 'bar',
data: yArr1,
},
],
};
echart.setOption(option);
window.addEventListener('resize', () => {
echart.resize();
});
} else {
isEmpty.value = true;
message.warn(msg);
}
} catch {}
echart.setOption(option);
window.addEventListener('resize', () => {
echart.resize();
});
}
function getParams() {
@@ -259,8 +374,14 @@
return params;
}
function getTime(time) {
if (!time) return { h: 0, m: 0 };
if (time < 60) return { h: 0, m: time };
return { h: (time - (time % 60)) / 60, m: time % 60 };
}
onMounted(() => {
initEchart('0');
initEchart();
});
</script>
<style scoped lang="less"></style>
<style scoped lang="less"></style>
src/components/secondaryScreen/secondMap/components/userInfoModal/userInfoModal.vue
+2 -2
View File
@@ -18,11 +18,11 @@
<a-tab-pane key="0" tab="总览" />
<a-tab-pane key="1" tab="心率" />
<a-tab-pane key="2" tab="血氧" />
<a-tab-pane key="4" tab="睡眠" />
<a-tab-pane key="3" tab="压力" />
<a-tab-pane key="4" tab="睡眠" />
<a-tab-pane key="5" tab="体温" />
<a-tab-pane key="6" tab="锻炼" />
<a-tab-pane key="7" tab="步数" />
<a-tab-pane key="5" tab="体温" />
</a-tabs>
<div style="height: 60vh; overflow: auto">
<all-look