forked from SmartBench/CMVR-IOT-UI
lixiaolong
84373c8292
- 使用 ResizeObserver 替代 window resize 事件监听，提高性能 - 优化组件布局，确保在不同屏幕尺寸下正常显示 - 修复了一些样式问题，如重复 padding、min-height 等 - 优化了图表组件的初始化和销毁逻辑，提高资源利用率
87 lines
2.5 KiB
Vue
87 lines
2.5 KiB
Vue
<!-- index.vue -->
|
|
<template>
|
|
<div class="container">
|
|
<div class="left-panel">
|
|
<div class="hand-container">
|
|
<LeftTopHand @update:topSeriesData="handleUpdateTopSeriesData" />
|
|
</div>
|
|
<div class="hand-container">
|
|
<LeftBottomHand @update:bottomSeriesData="handleUpdateBottomSeriesData" />
|
|
</div>
|
|
</div>
|
|
<div class="right-panel">
|
|
<RightTopCharts :top-series-data="topSeriesData" style="height: 50%;" />
|
|
<RightBottomCharts :max-data="maxData" :avg-data="avgData" style="height: 50%;" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue';
|
|
import RightTopCharts from './RightTopCharts.vue';
|
|
import LeftTopHand from './LeftTopHand.vue';
|
|
import LeftBottomHand from './LeftBottomHand.vue';
|
|
import RightBottomCharts from './RightBottomCharts.vue';
|
|
|
|
const topSeriesData = ref([0, 0, 0, 0, 0, 0]);
|
|
const bottomSeriesData = ref([0, 0, 0, 0, 0, 0]);
|
|
const maxData = ref({
|
|
thumb: { end: 0, tip: 0, middle: 0, palm: 0 },
|
|
indexFinger: { end: 0, tip: 0, middle: 0 },
|
|
middleFinger: { end: 0, tip: 0, middle: 0 },
|
|
ringFinger: { end: 0, tip: 0, middle: 0 },
|
|
littleFinger: { end: 0, tip: 0, middle: 0 },
|
|
palm: { touch: 0 }
|
|
});
|
|
const avgData = ref({
|
|
thumb: { end: 0, tip: 0, middle: 0, palm: 0 },
|
|
indexFinger: { end: 0, tip: 0, middle: 0 },
|
|
middleFinger: { end: 0, tip: 0, middle: 0 },
|
|
ringFinger: { end: 0, tip: 0, middle: 0 },
|
|
littleFinger: { end: 0, tip: 0, middle: 0 },
|
|
palm: { touch: 0 }
|
|
});
|
|
|
|
const handleUpdateTopSeriesData = (newData) => {
|
|
topSeriesData.value = newData;
|
|
};
|
|
|
|
const handleUpdateBottomSeriesData = ({ maxData: newMaxData, avgData: newAvgData }) => {
|
|
maxData.value = newMaxData;
|
|
avgData.value = newAvgData;
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.container {
|
|
display: flex;
|
|
flex: 1; /* 占据父容器所有可用空间 */
|
|
width: 100%;
|
|
height: 100%; /* 占满父容器高度 */
|
|
min-height: 0; /* 防止 flex 子项最小高度问题 */
|
|
background-color: #fff;
|
|
border-radius: 20px;
|
|
overflow: hidden; /* 防止内容溢出 */
|
|
box-sizing: border-box; /* 包含 padding 和 border */
|
|
padding: 20px; /* 与父容器一致，避免双重 padding */
|
|
}
|
|
|
|
.left-panel,
|
|
.right-panel {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
width: 50%;
|
|
height: 100%; /* 占满 container 高度 */
|
|
padding: 0; /* 移除子面板内边距，交给 container 处理 */
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.hand-container {
|
|
position: relative;
|
|
height: 50%; /* 每个 hand-container 占左面板的 50% 高度 */
|
|
width: 100%;
|
|
overflow: hidden;
|
|
}
|
|
</style> |