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;
|
||
|
|
width: 100%;
|
||
|
|
height: calc(100vh - 125px);
|
||
|
|
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>
|