From 5bf14aed888cd0e258e325c65f14022dad02985b Mon Sep 17 00:00:00 2001
From: baoshiwei <baoshiwei@shlanbao.cn>
Date: 星期四, 17 七月 2025 15:32:01 +0800
Subject: [PATCH] 更改为通过websocket获取数据
---
src/App.vue | 27 +++++++++++++++++++++------
1 files changed, 21 insertions(+), 6 deletions(-)
diff --git a/src/App.vue b/src/App.vue
index bb69d54..f6a644e 100644
--- a/src/App.vue
+++ b/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>
--
Gitblit v1.9.3