更改为通过websocket获取数据

baoshiwei

6 天以前 5bf14aed888cd0e258e325c65f14022dad02985b

 src/App.vue

@@ -12,6 +12,7 @@
const showChart = ref(false);
const pipeName = 'tauri-pipe-server';
const currentDisplay = ref('line'); // 默认显示曲线图
const dataSource = ref<'pipe' | 'ws'>('ws'); // 默认数据源为管道

async function startPipeServer() {
  try {
@@ -43,6 +44,13 @@
<template>
  <TitleBar :currentDisplay="currentDisplay" @start-service="startPipeServer" @select-display="(mode) => currentDisplay = mode" />
  <main class="container">
    <!-- <div class="data-source-switch">
      <label>数据源：</label>
      <select v-model="dataSource">
        <option value="pipe">管道</option>
        <option value="ws">WebSocket</option>
      </select>
    </div> -->
    
      <div class="display-mode-icons">
      <button :class="['icon-button', { active: currentDisplay === 'line' }]" @click="currentDisplay = 'line'" title="曲线图">
@@ -54,9 +62,9 @@
      <button :class="['icon-button', { active: currentDisplay === 'table' }]" @click="currentDisplay = 'table'" title="数据表格">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="14" x="2" y="7" rx="2"/><path d="M10 12H6"/><path d="M18 12h-4"/><path d="M10 16H6"/><path d="M18 16h-4"/></svg>
      </button>
      <!-- <button :class="['icon-button', { active: currentDisplay === '3d' }]" @click="currentDisplay = '3d'" title="3D坐标轴">
      <button :class="['icon-button', { active: currentDisplay === '3d' }]" @click="currentDisplay = '3d'" title="3D坐标轴">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2L2 7l10 5l10-5l-10-5z"/><path d="M2 17l10 5l10-5"/><path d="M2 12l10 5l10-5"/></svg>
      </button> -->
      </button>
    </div>
    <div class="header-row">
      <h2>Force Sensor Data Visualization</h2>
@@ -66,10 +74,10 @@
    
    <!-- 显示力传感器数据 -->
    <div v-if="showChart" class="chart-wrapper">
      <ForceChart v-if="currentDisplay === 'line'" :pipeName="pipeName" />
      <GaugeDisplay v-else-if="currentDisplay === 'gauge'" :pipeName="pipeName" />
      <TableDisplay v-else-if="currentDisplay === 'table'" :pipeName="pipeName" />
      <ThreeDDisplay v-else-if="currentDisplay === '3d'" :pipeName="pipeName" />
      <ForceChart v-if="currentDisplay === 'line'" :pipeName="pipeName" :dataSource="dataSource" />
      <GaugeDisplay v-else-if="currentDisplay === 'gauge'" :pipeName="pipeName" :dataSource="dataSource" />
      <TableDisplay v-else-if="currentDisplay === 'table'" :pipeName="pipeName" :dataSource="dataSource" />
      <ThreeDDisplay v-else-if="currentDisplay === '3d'" :pipeName="pipeName" :dataSource="dataSource" />
    </div>
    
    <!-- <div class="input-group">
@@ -124,6 +132,13 @@
  color: #000;
  font-size: 0.9em;
}

.data-source-switch {
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
</style>

<style>