更改为通过websocket获取数据

baoshiwei

6 天以前 5bf14aed888cd0e258e325c65f14022dad02985b

 src/components/TableDisplay.vue

@@ -1,10 +1,6 @@
<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';
import { sendToPipe } from '../pipe_client';

const props = defineProps<{
  pipeName: string;
}>();
import { createDataReceiver } from '../utils/dataFetcher';

interface ForceData {
  timestamp: string;
@@ -42,44 +38,14 @@
  }
}

// 状态变量，用于控制错误显示频率
const errorCount = ref(0);
const maxConsecutiveErrors = 5;
const showingError = ref(false);

// 接收管道数据的函数
async function receiveData() {
  try {
    const response = await sendToPipe(props.pipeName, 'GET_FORCE_DATA');
    
    // 重置错误计数
    errorCount.value = 0;
    showingError.value = false;
    
    // 解析数据
    try {
      const forceData = JSON.parse(response);
      if (Array.isArray(forceData) && forceData.length === 6) {
        updateTable(forceData);
      }
    } catch (parseErr) {
      console.error('数据解析错误:', parseErr);
    }
  } catch (err) {
    // 增加错误计数
    errorCount.value++;
    
    // 只在连续错误达到阈值且尚未显示错误时显示
    if (errorCount.value >= maxConsecutiveErrors && !showingError.value) {
      console.error('管道通信失败:', err);
      showingError.value = true;
    }
  }
}

let dataInterval: number | null = null;

onMounted(() => {
  const receiveData = createDataReceiver( (forceData) => {
    updateTable(forceData);
  });
  // 每500ms获取一次数据
  dataInterval = window.setInterval(receiveData, 500);
});