更改为通过websocket获取数据

baoshiwei

6 天以前 5bf14aed888cd0e258e325c65f14022dad02985b

 src/components/GaugeDisplay.vue

@@ -1,11 +1,7 @@
<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';
import * as echarts from 'echarts';
import { sendToPipe } from '../pipe_client';

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

const chartContainer = ref<HTMLElement | null>(null);
let chart: echarts.ECharts | null = null;
@@ -38,8 +34,8 @@
      {
        name: 'Fx',
        type: 'gauge',
        min: -100,
        max: 100,
        min: 1000,
        max: 4000,
        splitNumber: 10,
        radius: '30%',
        center: ['16.7%', '30%'],
@@ -61,8 +57,8 @@
      {
        name: 'Fy',
        type: 'gauge',
        min: -100,
        max: 100,
        min: 1000,
        max: 4000,
        splitNumber: 10,
        radius: '30%',
        center: ['50%', '30%'],
@@ -84,8 +80,8 @@
      {
        name: 'Fz',
        type: 'gauge',
        min: -100,
        max: 100,
        min: 1000,
        max: 4000,
        splitNumber: 10,
        radius: '30%',
        center: ['83.3%', '30%'],
@@ -107,8 +103,8 @@
      {
        name: 'Mx',
        type: 'gauge',
        min: -10,
        max: 10,
        min: 1000,
        max: 4000,
        splitNumber: 10,
        radius: '30%',
        center: ['16.7%', '75%'],
@@ -130,8 +126,8 @@
      {
        name: 'My',
        type: 'gauge',
        min: -10,
        max: 10,
        min: 1000,
        max: 4000,
        splitNumber: 10,
        radius: '30%',
        center: ['50%', '75%'],
@@ -153,8 +149,8 @@
      {
        name: 'Mz',
        type: 'gauge',
        min: -10,
        max: 10,
        min: 1000,
        max: 4000,
        splitNumber: 10,
        radius: '30%',
        center: ['83.3%', '75%'],
@@ -209,46 +205,17 @@
  });
}

// 状态变量，用于控制错误显示频率
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) {
        updateChart(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(() => {
  initChart();
  
  const receiveData = createDataReceiver((forceData) => {
    updateChart(forceData);
  });
  
  // 每200ms获取一次数据
  dataInterval = window.setInterval(receiveData, 200);