update
This commit is contained in:
zk
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="terminal-container">
|
||||
<div class="terminal-container self">
|
||||
<public-title title="睡眠" />
|
||||
<div class="inner">
|
||||
<div class="title">
|
||||
@@ -21,12 +21,16 @@
|
||||
type: String,
|
||||
});
|
||||
const sleepChart = ref<HTMLElement>();
|
||||
onMounted(() => {
|
||||
init();
|
||||
});
|
||||
watch(props, () => {
|
||||
init();
|
||||
});
|
||||
// onMounted(() => {
|
||||
// init();
|
||||
// });
|
||||
watch(
|
||||
props,
|
||||
() => {
|
||||
init();
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
const nums = ref({
|
||||
avgShort: '',
|
||||
avgLong: '',
|
||||
@@ -68,13 +72,19 @@
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.terminal-container.self {
|
||||
position: relative;
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.inner {
|
||||
height: calc(100% - 40px);
|
||||
height: calc(100% - 20px);
|
||||
|
||||
.title {
|
||||
color: #cfcfcf;
|
||||
text-align: left;
|
||||
padding: 1% 6%;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
|
||||
.count {
|
||||
font-size: 28px;
|
||||
@@ -82,7 +92,7 @@
|
||||
}
|
||||
|
||||
.lightSleep {
|
||||
padding-left: 2%;
|
||||
padding: 3px 0 3px 2%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { computed, ref } from 'vue';
|
||||
import { ref } from 'vue';
|
||||
import dayjs from 'dayjs';
|
||||
import { minuteToStr } from '/@/utils/utils.ts';
|
||||
|
||||
@@ -6,7 +6,7 @@ function timeFormat(type, list) {
|
||||
const o = {
|
||||
week: 'MM-DD',
|
||||
month: 'MM-DD',
|
||||
year: 'MM',
|
||||
year: 'YYYY-MM',
|
||||
};
|
||||
if (list) {
|
||||
return list.map((item) => dayjs(item).format(o[type]));
|
||||
@@ -24,28 +24,51 @@ export function formatStr({ list, len }) {
|
||||
return minuteToStr(sum);
|
||||
}
|
||||
|
||||
function createWeek() {
|
||||
let arr = [];
|
||||
for (let i = 0; i < 7; i++) {}
|
||||
}
|
||||
|
||||
const defaultVal = (type) => {
|
||||
if (type == 'week') {
|
||||
return {
|
||||
defaultTime: [],
|
||||
};
|
||||
}
|
||||
if (type == 'month') {
|
||||
}
|
||||
if (type == 'year') {
|
||||
}
|
||||
};
|
||||
|
||||
export function sleepCharts({ time, short, long, awake, type }) {
|
||||
let middleIndex = Math.floor(time.length / 2);
|
||||
return {
|
||||
grid: {
|
||||
top: '15%',
|
||||
left: '0%',
|
||||
right: '0%',
|
||||
bottom: '0%',
|
||||
containLabel: true,
|
||||
left: '5%',
|
||||
right: '5%',
|
||||
bottom: 30,
|
||||
},
|
||||
tooltip: {
|
||||
show: true,
|
||||
trigger: 'axis',
|
||||
textStyle: {
|
||||
align: 'left', // 使用左对齐样式显示tooltip文本
|
||||
color: '#fff',
|
||||
},
|
||||
backgroundColor: 'rgba(50,50,50,0.7)',
|
||||
borderColor: '#1b7ef2',
|
||||
},
|
||||
legend: {
|
||||
data: ['清醒', '浅睡', '深睡'],
|
||||
textStyle: {
|
||||
color: '#ffffff',
|
||||
},
|
||||
top: 0,
|
||||
icon: 'roundRect',
|
||||
height: 40,
|
||||
itemHeight: 14,
|
||||
top: -5,
|
||||
left: '55%',
|
||||
},
|
||||
color: ['#14B3F8', '#6D7BEB', '#5451DC'],
|
||||
@@ -57,8 +80,13 @@ export function sleepCharts({ time, short, long, awake, type }) {
|
||||
axisLabel: {
|
||||
color: '#ffffff',
|
||||
formatter: (item, i) => {
|
||||
if (i == 0 || i == time.length - 1 || i == Math.floor(time.length / 2)) return item;
|
||||
let mid = time.length == 30 ? 16 : middleIndex;
|
||||
if (i == 0 || i == mid || i == time.length - 1) {
|
||||
return item;
|
||||
}
|
||||
},
|
||||
showMinLabel: true,
|
||||
showMaxLabel: true,
|
||||
},
|
||||
data: timeFormat(type, time),
|
||||
},
|
||||
@@ -99,34 +127,35 @@ export function sleepCharts({ time, short, long, awake, type }) {
|
||||
|
||||
//步数
|
||||
export function useStep() {
|
||||
const total = ref();
|
||||
const stepData = ref([
|
||||
{
|
||||
name: '5000以下',
|
||||
value: '23',
|
||||
value: '0',
|
||||
type: 'lessThanFiveThousand',
|
||||
type_dictText: '恶性肿瘤',
|
||||
},
|
||||
{
|
||||
name: '5000~1w',
|
||||
value: '2',
|
||||
value: '0',
|
||||
type: 'fiveThousandToTenThousand',
|
||||
type_dictText: '其他',
|
||||
},
|
||||
{
|
||||
name: '1~1.5w',
|
||||
value: '34',
|
||||
value: '0',
|
||||
type: 'TenThousandToFifteenThousand',
|
||||
type_dictText: '其他',
|
||||
},
|
||||
{
|
||||
name: '1.5w~2w',
|
||||
value: '43',
|
||||
value: '0',
|
||||
type: 'FifteenToTwentyThousand',
|
||||
type_dictText: '其他',
|
||||
},
|
||||
{
|
||||
name: '2以上',
|
||||
value: '43',
|
||||
value: '0',
|
||||
type: 'TwentyThousandOrMore',
|
||||
type_dictText: '其他',
|
||||
},
|
||||
@@ -136,9 +165,11 @@ export function useStep() {
|
||||
stepData.value.map((item) => {
|
||||
item.value = data[item.type] || 0;
|
||||
});
|
||||
total.value = data?.userCount;
|
||||
}
|
||||
|
||||
return {
|
||||
total,
|
||||
stepData,
|
||||
setStep,
|
||||
};
|
||||
|
||||
@@ -38,15 +38,18 @@
|
||||
total: 0,
|
||||
onChange: pageChange,
|
||||
});
|
||||
const timer = ref(null);
|
||||
const pages = ref(0); //总页数
|
||||
|
||||
function handlePoliceDetail(record) {
|
||||
$bus.emit(earlyWarning, record);
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
init();
|
||||
init(1);
|
||||
setHeight();
|
||||
window.addEventListener('resize', setHeight);
|
||||
interval();
|
||||
});
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('resize', setHeight);
|
||||
@@ -56,20 +59,33 @@
|
||||
tableHeight.value = document.querySelector('.inner-screen').getBoundingClientRect().height - 60;
|
||||
}
|
||||
|
||||
async function init() {
|
||||
async function init(page) {
|
||||
const { pageSize, current } = pagination.value;
|
||||
const { code, result } = await getMonitorList({ pageSize, pageNo: current });
|
||||
const { code, result } = await getMonitorList({ pageSize, pageNo: page });
|
||||
if (code == 200) {
|
||||
dataSource.value = [...result.records, ...result.records.map((item, i) => ({ ...item, id: item.id + i }))];
|
||||
pagination.value.total = result.total * 2;
|
||||
dataSource.value = result.records;
|
||||
pagination.value.total = result.total;
|
||||
pages.value = result.pages;
|
||||
pagination.value.current = page;
|
||||
}
|
||||
}
|
||||
|
||||
function pageChange(page, pageS) {
|
||||
pagination.value.current = page;
|
||||
pagination.value.pageSize = pageS;
|
||||
init();
|
||||
init(page);
|
||||
}
|
||||
|
||||
function interval() {
|
||||
timer.value = setInterval(() => {
|
||||
let page = pagination.value.current < pages.value ? pagination.value.current + 1 : 1;
|
||||
init(page);
|
||||
}, 10000);
|
||||
}
|
||||
|
||||
onUnmounted(() => {
|
||||
clearInterval(timer.value);
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.inner-screen {
|
||||
@@ -100,7 +116,6 @@
|
||||
|
||||
:deep(.ant-table) {
|
||||
background-color: transparent;
|
||||
//pointer-events: none;
|
||||
}
|
||||
|
||||
:deep(.ant-table-tbody > tr > td) {
|
||||
|
||||
@@ -1,7 +1,11 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="pie-container self">
|
||||
<public-title title="步数" />
|
||||
<div class="inner" ref="healthChart"></div>
|
||||
<div class="count">
|
||||
<div class="t">总人数</div>
|
||||
<div class="v">{{ total }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
@@ -24,7 +28,7 @@
|
||||
onMounted(() => {
|
||||
init();
|
||||
});
|
||||
const { stepData, getValue, setStep } = useStep();
|
||||
const { stepData, total, setStep } = useStep();
|
||||
|
||||
async function init() {
|
||||
try {
|
||||
@@ -59,4 +63,34 @@
|
||||
margin: 0 auto;
|
||||
height: calc(100% - 40px);
|
||||
}
|
||||
|
||||
.pie-container.self {
|
||||
position: relative;
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.count {
|
||||
position: absolute;
|
||||
width: 80%;
|
||||
top: 51%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
font-size: 22px;
|
||||
font-weight: bold;
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
|
||||
> div {
|
||||
width: 80px;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.t {
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user