lixiaolong
1b2cdce5bd
- 将静态图像显示改为视频流显示，提升用户体验 - 添加缓冲视频元素，实现平滑切换视频源 - 优化内存使用，及时释放 blob 对象 URL - 引入防抖函数，避免频繁订阅和取消订阅 - 调整页面布局，优化响应式设计
83 lines
2.0 KiB
Vue
83 lines
2.0 KiB
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">
|
|
<RightCharts :bottom-series-data="bottomSeriesData" />
|
|
<RightBottomCharts :max-data="maxData" :avg-data="avgData" style="height: 50%" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue';
|
|
import RightCharts 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, avgData }) => {
|
|
maxData.value = newData;
|
|
avgData.value = avgData;
|
|
};
|
|
|
|
</script>
|
|
|
|
<style scoped>
|
|
.container {
|
|
display: flex;
|
|
flex: 1;
|
|
width: 100%;
|
|
background-color: #fff;
|
|
border-radius: 20px;
|
|
}
|
|
|
|
.left-panel,
|
|
.right-panel {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
width: 50%;
|
|
padding: 10px;
|
|
}
|
|
|
|
.hand-container {
|
|
position: relative;
|
|
height: 50%;
|
|
}
|
|
|
|
</style> |