完成串口读取数据和处理

baoshiwei

5 天以前 2ad852ee08e21ee681950f1d6058499248baf88e

 src/App.vue

@@ -1,30 +1,29 @@
<script setup lang="ts">
import { ref } from "vue";
import { invoke } from "@tauri-apps/api/core";
import ForceChart from "./components/ForceChart.vue";
import GaugeDisplay from "./components/GaugeDisplay.vue";
import TableDisplay from "./components/TableDisplay.vue";
import ThreeDDisplay from "./components/ThreeDDisplay.vue";
import TitleBar from "./components/TitleBar.vue";
import SerialPortConfig from "./components/SerialPortConfig.vue";

// const message = ref('');
const logs = ref<string[]>([]);
const showChart = ref(false);
const pipeName = 'tauri-pipe-server';
const currentDisplay = ref('line'); // 默认显示曲线图
const dataSource = ref<'pipe' | 'ws'>('ws'); // 默认数据源为管道
// const isSerialPortConnected = ref(false); // 新增：跟踪串口连接状态

async function startPipeServer() {
  try {
    const res = await invoke('start_pipe_server_command', {pipeName});
    console.log(res);
    logs.value.push('[系统] 数据接收服务已启动');
    console.log('[系统] 管道服务端已启动');
    showChart.value = true;
  } catch (err) {
    logs.value.push(`[错误] 启动失败: ${err}`);
  }
}
const currentDisplay = ref('setting'); // 默认显示曲线图


// async function startPipeServer() {
//   try {
//     const res = await invoke('start_pipe_server_command', {pipeName});
//     console.log(res);
//     logs.value.push('[系统] 数据接收服务已启动');
//     console.log('[系统] 管道服务端已启动');
//     showChart.value = true;
//   } catch (err) {
//     logs.value.push(`[错误] 启动失败: ${err}`);
//   }
// }

// async function sendToPipe() {
//   if (!message.value) return;
@@ -38,21 +37,27 @@
//     logs.value.push(`[错误] 通信失败: ${err}`);
//   }
// }
startPipeServer();
// startPipeServer();

const handleConnectionChange = (connected: boolean) => {
  if (connected) {
    currentDisplay.value = 'line';
  }
}
</script>

<template>
  <TitleBar :currentDisplay="currentDisplay" @start-service="startPipeServer" @select-display="(mode) => currentDisplay = mode" />
  <TitleBar :currentDisplay="currentDisplay"  @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">
   

    <div class="display-mode-icons">
      <button :class="['icon-button', { active: currentDisplay === 'setting' }]" @click="currentDisplay = 'setting'" title="串口设置">
        <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.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/>
          <circle cx="12" cy="12" r="3"/>
        </svg>
      </button>
      <button :class="['icon-button', { active: currentDisplay === 'line' }]" @click="currentDisplay = 'line'" title="曲线图">
        <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="M2 13L8.5 6L13.5 12L19 7L22 10"/><path d="M18 13a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"/></svg>
      </button>
@@ -70,15 +75,17 @@
      <h2>Force Sensor Data Visualization</h2>
    </div>
    

    
    <!-- 显示力传感器数据 -->
    <div v-if="showChart" class="chart-wrapper">
      <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  class="chart-wrapper">

      <ForceChart v-if="currentDisplay === 'line'" />
      <GaugeDisplay v-else-if="currentDisplay === 'gauge'" />
      <TableDisplay v-else-if="currentDisplay === 'table'"/>
      <ThreeDDisplay v-else-if="currentDisplay === '3d'" />
      <SerialPortConfig v-else-if="currentDisplay === 'setting'" @connection-change="handleConnectionChange" />
    </div>

 
    
    <!-- <div class="input-group">
      <input 
@@ -122,7 +129,7 @@
.log-container {

  border-radius: 8px;
  max-height: 300px;
  height: 34px;
  overflow-y: auto;

}
@@ -138,6 +145,41 @@
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Modal Styles */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  position: relative;
  min-width: 300px;
  max-width: 90%;
}

.close-button {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  font-size: 1.2em;
  cursor: pointer;
  color: #555;
}
</style>

@@ -295,7 +337,7 @@
  justify-content: center;
  gap: 4px; /* Smaller gap for icons */
  margin-top: -27px; /* Space between icons and window controls */
  width: 100px;
  width: 150px;
  z-index: 9999;
}