feat: 实现简易示波器功能
This commit is contained in:
0
src/components/Alert/Alert.vue
Normal file
0
src/components/Alert/Alert.vue
Normal file
0
src/components/Alert/index.ts
Normal file
0
src/components/Alert/index.ts
Normal file
172
src/components/Oscilloscope/WaveformDisplay.vue
Normal file
172
src/components/Oscilloscope/WaveformDisplay.vue
Normal file
@@ -0,0 +1,172 @@
|
||||
<template>
|
||||
<div class="w-full h-100">
|
||||
<v-chart v-if="true" class="w-full h-full" :option="option" autoresize />
|
||||
<div
|
||||
v-else
|
||||
class="w-full h-full flex items-center justify-center text-gray-500"
|
||||
>
|
||||
暂无数据
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, withDefaults } from "vue";
|
||||
import { forEach } from "lodash";
|
||||
import VChart from "vue-echarts";
|
||||
|
||||
// Echarts
|
||||
import { use } from "echarts/core";
|
||||
import { LineChart } from "echarts/charts";
|
||||
import {
|
||||
TitleComponent,
|
||||
TooltipComponent,
|
||||
LegendComponent,
|
||||
ToolboxComponent,
|
||||
DataZoomComponent,
|
||||
GridComponent,
|
||||
} from "echarts/components";
|
||||
import { CanvasRenderer } from "echarts/renderers";
|
||||
import type { ComposeOption } from "echarts/core";
|
||||
import type { LineSeriesOption } from "echarts/charts";
|
||||
import type {
|
||||
TitleComponentOption,
|
||||
TooltipComponentOption,
|
||||
LegendComponentOption,
|
||||
ToolboxComponentOption,
|
||||
DataZoomComponentOption,
|
||||
GridComponentOption,
|
||||
} from "echarts/components";
|
||||
|
||||
use([
|
||||
TitleComponent,
|
||||
TooltipComponent,
|
||||
LegendComponent,
|
||||
ToolboxComponent,
|
||||
DataZoomComponent,
|
||||
GridComponent,
|
||||
LineChart,
|
||||
CanvasRenderer,
|
||||
]);
|
||||
|
||||
type EChartsOption = ComposeOption<
|
||||
| TitleComponentOption
|
||||
| TooltipComponentOption
|
||||
| LegendComponentOption
|
||||
| ToolboxComponentOption
|
||||
| DataZoomComponentOption
|
||||
| GridComponentOption
|
||||
| LineSeriesOption
|
||||
>;
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
data?: {
|
||||
x: number[];
|
||||
y: number[][];
|
||||
};
|
||||
}>(),
|
||||
{
|
||||
data: () => ({
|
||||
x: [],
|
||||
y: [],
|
||||
}),
|
||||
},
|
||||
);
|
||||
|
||||
const hasData = computed(() => {
|
||||
return (
|
||||
props.data &&
|
||||
props.data.x &&
|
||||
props.data.y &&
|
||||
props.data.x.length > 0 &&
|
||||
props.data.y.length > 0 &&
|
||||
props.data.y.some((channel) => channel.length > 0)
|
||||
);
|
||||
});
|
||||
|
||||
const option = computed((): EChartsOption => {
|
||||
const series: LineSeriesOption[] = [];
|
||||
|
||||
forEach(props.data.y, (yData, index) => {
|
||||
// 将 x 和 y 数据组合成 [x, y] 格式
|
||||
const seriesData = props.data.x.map((xValue, i) => [xValue, yData[i] || 0]);
|
||||
|
||||
series.push({
|
||||
type: "line",
|
||||
name: `通道 ${index + 1}`,
|
||||
data: seriesData,
|
||||
smooth: false, // 示波器通常显示原始波形
|
||||
symbol: "none", // 不显示数据点标记
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
return {
|
||||
grid: {
|
||||
left: "10%",
|
||||
right: "10%",
|
||||
top: "15%",
|
||||
bottom: "25%",
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
formatter: (params: any) => {
|
||||
let result = `时间: ${params[0].data[0].toFixed(2)} ms<br/>`;
|
||||
params.forEach((param: any) => {
|
||||
result += `${param.seriesName}: ${param.data[1].toFixed(3)} V<br/>`;
|
||||
});
|
||||
return result;
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
top: "5%",
|
||||
data: series.map((s) => s.name) as string[],
|
||||
},
|
||||
toolbox: {
|
||||
feature: {
|
||||
restore: {},
|
||||
saveAsImage: {},
|
||||
},
|
||||
},
|
||||
dataZoom: [
|
||||
{
|
||||
type: "inside",
|
||||
start: 0,
|
||||
end: 100,
|
||||
},
|
||||
{
|
||||
start: 0,
|
||||
end: 100,
|
||||
},
|
||||
],
|
||||
xAxis: {
|
||||
type: "value",
|
||||
name: "时间 (ms)",
|
||||
nameLocation: "middle",
|
||||
nameGap: 30,
|
||||
axisLine: {
|
||||
show: true,
|
||||
},
|
||||
axisTick: {
|
||||
show: true,
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
name: "电压 (V)",
|
||||
nameLocation: "middle",
|
||||
nameGap: 40,
|
||||
axisLine: {
|
||||
show: true,
|
||||
},
|
||||
axisTick: {
|
||||
show: true,
|
||||
},
|
||||
},
|
||||
series: series,
|
||||
};
|
||||
});
|
||||
</script>
|
||||
26
src/components/Oscilloscope/index.ts
Normal file
26
src/components/Oscilloscope/index.ts
Normal file
@@ -0,0 +1,26 @@
|
||||
import WaveformDisplay from "./WaveformDisplay.vue";
|
||||
|
||||
// Test data generator
|
||||
const generateTestData = () => {
|
||||
const sampleRate = 1000; // 1kHz
|
||||
const duration = 0.1; // 10ms
|
||||
const points = Math.floor(sampleRate * duration);
|
||||
|
||||
const x = Array.from({ length: points }, (_, i) => i / sampleRate * 1000); // time in ms
|
||||
|
||||
// Generate multiple channels with different waveforms
|
||||
const y = [
|
||||
// Channel 1: Sine wave 50Hz
|
||||
Array.from({ length: points }, (_, i) => Math.sin(2 * Math.PI * 50 * i / sampleRate) * 3.3),
|
||||
// Channel 2: Square wave 25Hz
|
||||
Array.from({ length: points }, (_, i) => Math.sign(Math.sin(2 * Math.PI * 25 * i / sampleRate)) * 5),
|
||||
// Channel 3: Sawtooth wave 33Hz
|
||||
Array.from({ length: points }, (_, i) => (2 * ((33 * i / sampleRate) % 1) - 1) * 2.5),
|
||||
// Channel 4: Noise + DC offset
|
||||
Array.from({ length: points }, () => Math.random() * 0.5 + 1.5)
|
||||
];
|
||||
|
||||
return { x, y };
|
||||
};
|
||||
|
||||
export { WaveformDisplay, generateTestData };
|
||||
@@ -1,23 +1,27 @@
|
||||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
import HomeView from '../views/HomeView.vue'
|
||||
import LoginView from '../views/LoginView.vue'
|
||||
import LabView from '../views/LabView.vue'
|
||||
import ProjectView from '../views/ProjectView.vue'
|
||||
import TestView from '../views/TestView.vue'
|
||||
import UserView from '../views/UserView.vue'
|
||||
import AdminView from '../views/AdminView.vue'
|
||||
import VideoStreamView from '../views/VideoStreamView.vue'
|
||||
import { createRouter, createWebHistory } from "vue-router";
|
||||
import HomeView from "../views/HomeView.vue";
|
||||
import LoginView from "../views/LoginView.vue";
|
||||
import LabView from "../views/LabView.vue";
|
||||
import ProjectView from "../views/ProjectView.vue";
|
||||
import TestView from "../views/TestView.vue";
|
||||
import UserView from "../views/UserView.vue";
|
||||
import AdminView from "../views/AdminView.vue";
|
||||
import VideoStreamView from "../views/VideoStreamView.vue";
|
||||
import OscilloscopeView from "@/views/OscilloscopeView.vue";
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(import.meta.env.BASE_URL),
|
||||
routes: [
|
||||
{path: '/', name: 'home', component: HomeView},
|
||||
{path: '/login', name: 'login', component: LoginView},
|
||||
{path: '/lab/:id',name: 'lab', component: LabView},
|
||||
{path: '/project',name: 'project',component: ProjectView},
|
||||
{path: '/test', name: 'test', component: TestView},
|
||||
{path: '/user', name: 'user', component: UserView},
|
||||
{path: '/admin', name: 'admin', component: AdminView}, {path: '/video-stream',name: 'video-stream',component: VideoStreamView}]
|
||||
})
|
||||
{ path: "/", name: "home", component: HomeView },
|
||||
{ path: "/login", name: "login", component: LoginView },
|
||||
{ path: "/lab/:id", name: "lab", component: LabView },
|
||||
{ path: "/project", name: "project", component: ProjectView },
|
||||
{ path: "/test", name: "test", component: TestView },
|
||||
{ path: "/user", name: "user", component: UserView },
|
||||
{ path: "/admin", name: "admin", component: AdminView },
|
||||
{ path: "/video-stream", name: "videoStream", component: VideoStreamView },
|
||||
{ path: "/oscilloscope", name: "oscilloscope", component: OscilloscopeView },
|
||||
],
|
||||
});
|
||||
|
||||
export default router
|
||||
export default router;
|
||||
|
||||
224
src/views/OscilloscopeView.vue
Normal file
224
src/views/OscilloscopeView.vue
Normal file
@@ -0,0 +1,224 @@
|
||||
<template>
|
||||
<div
|
||||
class="min-h-screen bg-base-100 flex flex-col mx-auto p-6 space-y-6 container"
|
||||
>
|
||||
<!-- 设置 -->
|
||||
<div class="card bg-base-200 shadow-xl">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">
|
||||
<Settings class="w-5 h-5" />
|
||||
示波器配置
|
||||
</h2>
|
||||
|
||||
<div class="flex flex-row justify-around gap-4">
|
||||
<div class="grow">
|
||||
<label class="label">
|
||||
<Globe class="w-4 h-4" />
|
||||
<span class="label-text">IP 地址</span>
|
||||
</label>
|
||||
<div class="input-group">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="192.168.1.100"
|
||||
class="input input-bordered flex-1"
|
||||
v-model="tempConfig.ip"
|
||||
:class="{ 'input-error': ipError }"
|
||||
/>
|
||||
</div>
|
||||
<label class="label" v-if="ipError">
|
||||
<span class="label-text-alt text-error">{{ ipError }}</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="grow">
|
||||
<label class="label">
|
||||
<Network class="w-4 h-4" />
|
||||
<span class="label-text">端口</span>
|
||||
</label>
|
||||
<div class="input-group">
|
||||
<input
|
||||
type="number"
|
||||
placeholder="8080"
|
||||
class="input input-bordered flex-1"
|
||||
v-model.number="tempConfig.port"
|
||||
:class="{ 'input-error': portError }"
|
||||
/>
|
||||
</div>
|
||||
<label class="label" v-if="portError">
|
||||
<span class="label-text-alt text-error">{{ portError }}</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-actions justify-end mt-4">
|
||||
<button
|
||||
class="btn btn-ghost"
|
||||
@click="resetConfig"
|
||||
:disabled="isDefault"
|
||||
>
|
||||
<RotateCcw class="w-4 h-4" />
|
||||
重置
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-primary"
|
||||
@click="saveConfig"
|
||||
:disabled="!isValidConfig || !hasChanges"
|
||||
:class="{ loading: isSaving }"
|
||||
>
|
||||
<Save class="w-4 h-4" v-if="!isSaving" />
|
||||
保存配置
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 波形展示 -->
|
||||
<div class="card bg-base-200 shadow-xl">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">
|
||||
<Activity class="w-5 h-5" />
|
||||
波形显示
|
||||
</h2>
|
||||
<WaveformDisplay :data="generateTestData()" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, reactive, watch } from "vue";
|
||||
import { useStorage } from "@vueuse/core";
|
||||
import { z } from "zod";
|
||||
import {
|
||||
Settings,
|
||||
Globe,
|
||||
Network,
|
||||
Save,
|
||||
RotateCcw,
|
||||
CheckCircle,
|
||||
Activity,
|
||||
} from "lucide-vue-next";
|
||||
import { WaveformDisplay, generateTestData } from "@/components/Oscilloscope";
|
||||
|
||||
// 配置类型定义
|
||||
const configSchema = z.object({
|
||||
ip: z
|
||||
.string()
|
||||
.ip({ version: "v4", message: "请输入有效的IPv4地址" })
|
||||
.min(1, "请输入IP地址"),
|
||||
port: z
|
||||
.number()
|
||||
.int("端口必须是整数")
|
||||
.min(1, "端口必须大于0")
|
||||
.max(65535, "端口必须小于等于65535"),
|
||||
});
|
||||
|
||||
type OscilloscopeConfig = z.infer<typeof configSchema>;
|
||||
|
||||
// 默认配置
|
||||
const defaultConfig: OscilloscopeConfig = {
|
||||
ip: "192.168.1.100",
|
||||
port: 8080,
|
||||
};
|
||||
|
||||
// 使用 VueUse 存储配置
|
||||
const config = useStorage<OscilloscopeConfig>(
|
||||
"oscilloscope-config",
|
||||
defaultConfig,
|
||||
localStorage,
|
||||
{
|
||||
serializer: {
|
||||
read: (value: string) => {
|
||||
try {
|
||||
const parsed = JSON.parse(value);
|
||||
const result = configSchema.safeParse(parsed);
|
||||
return result.success ? result.data : defaultConfig;
|
||||
} catch {
|
||||
return defaultConfig;
|
||||
}
|
||||
},
|
||||
write: (value: OscilloscopeConfig) => JSON.stringify(value),
|
||||
},
|
||||
},
|
||||
);
|
||||
|
||||
// 临时配置（用于编辑）
|
||||
const tempConfig = reactive<OscilloscopeConfig>({
|
||||
ip: config.value.ip,
|
||||
port: config.value.port,
|
||||
});
|
||||
|
||||
// 状态管理
|
||||
const isSaving = ref(false);
|
||||
|
||||
// 验证错误
|
||||
const ipError = computed(() => {
|
||||
if (!tempConfig.ip) return "";
|
||||
const result = z.string().ip({ version: "v4" }).safeParse(tempConfig.ip);
|
||||
return result.success
|
||||
? ""
|
||||
: result.error.errors[0]?.message || "无效的IP地址";
|
||||
});
|
||||
|
||||
const portError = computed(() => {
|
||||
if (!tempConfig.port && tempConfig.port !== 0) return "";
|
||||
const result = z.number().int().min(1).max(65535).safeParse(tempConfig.port);
|
||||
return result.success ? "" : result.error.errors[0]?.message || "无效的端口";
|
||||
});
|
||||
|
||||
// 检查配置是否有效
|
||||
const isValidConfig = computed(() => {
|
||||
const result = configSchema.safeParse(tempConfig);
|
||||
return result.success;
|
||||
});
|
||||
|
||||
// 检查是否有更改
|
||||
const hasChanges = computed(() => {
|
||||
return (
|
||||
tempConfig.ip !== config.value.ip || tempConfig.port !== config.value.port
|
||||
);
|
||||
});
|
||||
|
||||
const isDefault = computed(() => {
|
||||
return (
|
||||
defaultConfig.ip === tempConfig.ip && defaultConfig.port === tempConfig.port
|
||||
);
|
||||
});
|
||||
|
||||
// 保存配置
|
||||
const saveConfig = async () => {
|
||||
if (!isValidConfig.value) return;
|
||||
|
||||
isSaving.value = true;
|
||||
|
||||
try {
|
||||
// 模拟保存延迟
|
||||
await new Promise((resolve) => setTimeout(resolve, 500));
|
||||
|
||||
config.value = {
|
||||
ip: tempConfig.ip,
|
||||
port: tempConfig.port,
|
||||
};
|
||||
} catch (error) {
|
||||
console.error("保存配置失败:", error);
|
||||
} finally {
|
||||
isSaving.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 重置配置
|
||||
const resetConfig = () => {
|
||||
tempConfig.ip = defaultConfig.ip;
|
||||
tempConfig.port = defaultConfig.port;
|
||||
};
|
||||
|
||||
// 监听存储的配置变化，同步到临时配置
|
||||
watch(
|
||||
config,
|
||||
(newConfig) => {
|
||||
tempConfig.ip = newConfig.ip;
|
||||
tempConfig.port = newConfig.port;
|
||||
},
|
||||
{ deep: true },
|
||||
);
|
||||
</script>
|
||||
Reference in New Issue
Block a user