完成串口读取数据和处理

baoshiwei

5 天以前 2ad852ee08e21ee681950f1d6058499248baf88e

 src/components/ThreeDDisplay.vue

@@ -2,12 +2,7 @@
import { ref, onMounted, onUnmounted } from 'vue';
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import { sendToPipe } from '../pipe_client';

const props = defineProps<{
  pipeName: string;
}>();

import { createDataReceiver } from '../utils/dataFetcher';
const containerRef = ref<HTMLElement | null>(null);
let scene: THREE.Scene | null = null;
let camera: THREE.PerspectiveCamera | null = null;
@@ -358,60 +353,25 @@
  renderer.setSize(width, height);
}

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

// 接收管道数据的函数
async function receiveForceData() {
  try {
    // 从管道接收数据
    const response = await sendToPipe(props.pipeName, 'GET_FORCE_DATA');
    
    // 成功接收数据，重置错误计数
    errorCount.value = 0;
    if (showingError.value) {
      showingError.value = false;
      console.log('管道通信已恢复');
    }
    
    // 解析接收到的数据
    try {
      const forceData = JSON.parse(response);
      if (Array.isArray(forceData) && forceData.length === 6) {
        updateVisualization(forceData);
      }
    } catch (e) {
      console.warn('解析数据失败:', e);
    }
  } catch (err) {
    // 增加错误计数
    errorCount.value++;
    
    // 只在连续错误达到阈值时显示错误信息，避免日志刷屏
    if (errorCount.value >= maxConsecutiveErrors && !showingError.value) {
      showingError.value = true;
      console.error('管道通信持续失败，请检查服务端状态:', err);
    }
  }
}

// 定时获取数据
let dataTimer: number | null = null;


onMounted(() => {
  initScene();
  animate();
  
  // 每秒获取一次数据
  dataTimer = window.setInterval(receiveForceData, 3000);
  // createDataReceiver 现在直接注册回调并返回一个清理函数
 createDataReceiver((forceData) => {
    updateVisualization(forceData);
  }); // 传递 isSerialPortConnected 函数
  
  // 监听窗口大小变化
  window.addEventListener('resize', handleResize);
});

onUnmounted(() => {
  // 清理定时器和事件监听
  if (dataTimer !== null) {
    clearInterval(dataTimer);
  }

  
  window.removeEventListener('resize', handleResize);