<script setup lang="ts">
|
import { ref, onMounted, onUnmounted } from 'vue';
|
import { createDataReceiver } from '../utils/dataFetcher';
|
|
interface ForceData {
|
timestamp: string;
|
fx: number;
|
fy: number;
|
fz: number;
|
mx: number;
|
my: number;
|
mz: number;
|
}
|
|
const tableData = ref<ForceData[]>([]);
|
const maxRows = 100; // 最多显示100条记录
|
|
// 更新表格数据
|
function updateTable(forceData: number[]) {
|
const now = new Date();
|
const timeStr = `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}:${now.getSeconds().toString().padStart(2, '0')}`;
|
|
const newData: ForceData = {
|
timestamp: timeStr,
|
fx: forceData[0],
|
fy: forceData[1],
|
fz: forceData[2],
|
mx: forceData[3],
|
my: forceData[4],
|
mz: forceData[5]
|
};
|
|
tableData.value.unshift(newData);
|
|
// 限制数据行数
|
if (tableData.value.length > maxRows) {
|
tableData.value.pop();
|
}
|
}
|
|
|
|
let dataInterval: number | null = null;
|
|
onMounted(() => {
|
const receiveData = createDataReceiver( (forceData) => {
|
updateTable(forceData);
|
});
|
// 每500ms获取一次数据
|
dataInterval = window.setInterval(receiveData, 500);
|
});
|
|
onUnmounted(() => {
|
if (dataInterval !== null) {
|
clearInterval(dataInterval);
|
}
|
});
|
</script>
|
|
<template>
|
<div class="table-container">
|
<table class="force-table">
|
<thead>
|
<tr>
|
<th>时间</th>
|
<th>Fx (N)</th>
|
<th>Fy (N)</th>
|
<th>Fz (N)</th>
|
<th>Mx (Nm)</th>
|
<th>My (Nm)</th>
|
<th>Mz (Nm)</th>
|
</tr>
|
</thead>
|
<tbody>
|
<tr v-for="(item, index) in tableData" :key="index">
|
<td>{{ item.timestamp }}</td>
|
<td>{{ item.fx.toFixed(2) }}</td>
|
<td>{{ item.fy.toFixed(2) }}</td>
|
<td>{{ item.fz.toFixed(2) }}</td>
|
<td>{{ item.mx.toFixed(2) }}</td>
|
<td>{{ item.my.toFixed(2) }}</td>
|
<td>{{ item.mz.toFixed(2) }}</td>
|
</tr>
|
<tr v-if="tableData.length === 0">
|
<td colspan="7" class="no-data">暂无数据</td>
|
</tr>
|
</tbody>
|
</table>
|
</div>
|
</template>
|
|
<style scoped>
|
.table-container {
|
width: 98%;
|
height: 97%;
|
overflow-y: auto;
|
margin: 10px;
|
}
|
|
.force-table {
|
width: 100%;
|
border-collapse: collapse;
|
font-size: 14px;
|
}
|
|
.force-table th,
|
.force-table td {
|
border: 1px solid #ddd;
|
padding: 8px;
|
text-align: center;
|
}
|
|
.force-table th {
|
background-color: #f2f2f2;
|
position: sticky;
|
top: 0;
|
z-index: 1;
|
}
|
|
.force-table tr:nth-child(even) {
|
background-color: #f9f9f9;
|
}
|
|
.force-table tr:hover {
|
background-color: #f0f0f0;
|
}
|
|
.no-data {
|
text-align: center;
|
padding: 20px;
|
color: #999;
|
}
|
</style>
|
