117 lines
3.4 KiB
Vue
117 lines
3.4 KiB
Vue
<template>
|
|
<div class="terminal-container self">
|
|
<div class="inner">
|
|
<div class="title">
|
|
<span class="lightSleep">平均睡眠 {{ nums.avg || 0 }} 深睡 {{ nums.avgLong || 0 }} 浅睡 {{ nums.avgShort || 0 }}</span>
|
|
</div>
|
|
<div class="sleepChart" ref="sleepChart"></div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import * as echarts from 'echarts';
|
|
import { ref, watch } from 'vue';
|
|
import { formatStr, sleepCharts } from '/@/components/secondaryScreen/screen-right/screenRightHooks';
|
|
import { getSleep } from '/@/components/secondaryScreen/commonApi.ts';
|
|
import { useSession, caching } from '/@/hooks/autoRefresh/caching.ts';
|
|
|
|
const { setSession, getSession } = useSession();
|
|
const { PAGE2_RIGHT1 } = caching;
|
|
const props = defineProps({
|
|
orgCode: String,
|
|
type: String,
|
|
themeType: String,
|
|
bKey: {
|
|
type: String,
|
|
default: () => '',
|
|
},
|
|
});
|
|
const sleepChart = ref<HTMLElement>();
|
|
watch(
|
|
() => props,
|
|
() => {
|
|
init();
|
|
},
|
|
{ immediate: true, deep: true }
|
|
);
|
|
const nums = ref({
|
|
avgShort: '',
|
|
avgLong: '',
|
|
avg: '',
|
|
});
|
|
|
|
async function init() {
|
|
try {
|
|
const params = {
|
|
orgCode: props.orgCode,
|
|
type: props.type,
|
|
};
|
|
const { code, result } = await getSleep(params);
|
|
if (code == 200 && result.length > 0) {
|
|
setSession(PAGE2_RIGHT1, JSON.stringify(result));
|
|
setValue(result);
|
|
}
|
|
} catch {
|
|
const result = JSON.parse(getSession(PAGE2_RIGHT1) || '{}');
|
|
setValue(result);
|
|
}
|
|
}
|
|
|
|
function setValue(result: any) {
|
|
let time = result?.map((item: any) => item.dataDate);
|
|
let short = result?.map((item: any) => item.avgShortDuration);
|
|
let long = result?.map((item: any) => item.avgLongDuration);
|
|
let awake = result?.map((item: any) => item.awakeDuration);
|
|
let avg = result?.map((item: any) => item.averageDuration);
|
|
initChart({ time, short, long, awake, type: props.type });
|
|
const len = time.length;
|
|
if (!len > 0) {
|
|
return;
|
|
}
|
|
nums.value = {
|
|
avgShort: formatStr({ list: short, len }),
|
|
avgLong: formatStr({ list: long, len }),
|
|
avg: formatStr({ list: avg, len }), //平均
|
|
};
|
|
}
|
|
|
|
function initChart({ time, short, long, awake, type }) {
|
|
let myChart = echarts.init(sleepChart.value);
|
|
let options = sleepCharts({ time, short, long, awake, type });
|
|
myChart.setOption(options);
|
|
window.addEventListener('resize', () => {
|
|
myChart.resize();
|
|
});
|
|
}
|
|
</script>
|
|
<style scoped lang="less">
|
|
.terminal-container.self {
|
|
position: relative;
|
|
padding-bottom: 0 !important;
|
|
}
|
|
|
|
.inner {
|
|
height: 100%;
|
|
|
|
.title {
|
|
color: #cfcfcf;
|
|
text-align: left;
|
|
height: 30px;
|
|
line-height: 30px;
|
|
|
|
.count {
|
|
font-size: 28px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.lightSleep {
|
|
padding: 3px 0 3px 2%;
|
|
}
|
|
}
|
|
|
|
.sleepChart {
|
|
height: 90%;
|
|
}
|
|
}
|
|
</style>
|