From 2ad852ee08e21ee681950f1d6058499248baf88e Mon Sep 17 00:00:00 2001
From: baoshiwei <baoshiwei@shlanbao.cn>
Date: 星期五, 18 七月 2025 15:04:22 +0800
Subject: [PATCH] 完成串口读取数据和处理
---
src/App.vue | 116 +++++++++++++++++++++++++++++++++++++++------------------
1 files changed, 79 insertions(+), 37 deletions(-)
diff --git a/src/App.vue b/src/App.vue
index f6a644e..de2dee5 100644
--- a/src/App.vue
+++ b/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;
}
--
Gitblit v1.9.3