feat: 完成逻辑分析仪前端设计
This commit is contained in:
@@ -1,266 +1,376 @@
|
||||
<template>
|
||||
<div class="space-y-4">
|
||||
<!-- 全局触发模式配置 -->
|
||||
<div class="form-control">
|
||||
<label class="label">
|
||||
<span class="label-text font-medium">全局触发模式</span>
|
||||
</label>
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-2">
|
||||
<button
|
||||
v-for="mode in globalModes"
|
||||
:key="mode.value"
|
||||
@click="setGlobalMode(mode.value)"
|
||||
:class="[
|
||||
'btn btn-sm',
|
||||
currentGlobalMode === mode.value ? 'btn-primary' : 'btn-outline',
|
||||
]"
|
||||
>
|
||||
{{ mode.label }}
|
||||
</button>
|
||||
<div class="space-y-6">
|
||||
<!-- 通道状态概览 -->
|
||||
<div class="stats stats-horizontal bg-base-100 shadow flex justify-between">
|
||||
<div class="stat">
|
||||
<div class="stat-title">总通道数</div>
|
||||
<div class="stat-value text-primary">8</div>
|
||||
<div class="stat-desc">逻辑分析仪通道</div>
|
||||
</div>
|
||||
<div class="label">
|
||||
<span class="label-text-alt text-gray-500">
|
||||
选择多路信号触发条件的逻辑组合方式
|
||||
</span>
|
||||
|
||||
<div class="stat">
|
||||
<div class="stat-title">启用通道</div>
|
||||
<div class="stat-value text-success">{{ enabledChannelCount }}</div>
|
||||
<div class="stat-desc">当前激活通道</div>
|
||||
</div>
|
||||
|
||||
<div class="stat">
|
||||
<div class="stat-title">采样率</div>
|
||||
<div class="stat-value text-info">100MHz</div>
|
||||
<div class="stat-desc">最大采样频率</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 信号触发配置 -->
|
||||
<!-- 通道配置 -->
|
||||
<div class="form-control">
|
||||
<label class="label">
|
||||
<span class="label-text font-medium">信号触发配置</span>
|
||||
</label>
|
||||
<div class="space-y-2">
|
||||
<div
|
||||
v-for="(signal, index) in signalConfigs"
|
||||
:key="index"
|
||||
class="flex items-center gap-2 p-3 bg-base-200 rounded-lg"
|
||||
>
|
||||
<span class="text-sm font-medium w-16">CH{{ index }}</span>
|
||||
|
||||
<!-- 操作符选择 -->
|
||||
<!-- 全局触发模式选择 -->
|
||||
<div class="flex flex-row justify-between my-4 mx-2">
|
||||
<div class="flex flex-row gap-4">
|
||||
<label class="label">
|
||||
<span class="label-text text-sm">全局触发逻辑</span>
|
||||
</label>
|
||||
<select
|
||||
v-model="signal.operator"
|
||||
class="select select-sm select-bordered w-32"
|
||||
>
|
||||
<option v-for="op in operators" :key="op.value" :value="op.value">
|
||||
{{ op.label }}
|
||||
</option>
|
||||
</select>
|
||||
|
||||
<!-- 信号值选择 -->
|
||||
<select
|
||||
v-model="signal.value"
|
||||
class="select select-sm select-bordered w-32"
|
||||
v-model="currentGlobalMode"
|
||||
@change="setGlobalMode(currentGlobalMode)"
|
||||
class="select select-sm select-bordered w-full"
|
||||
>
|
||||
<option
|
||||
v-for="val in signalValues"
|
||||
:key="val.value"
|
||||
:value="val.value"
|
||||
v-for="mode in globalModes"
|
||||
:key="mode.value"
|
||||
:value="mode.value"
|
||||
>
|
||||
{{ val.label }}
|
||||
{{ mode.label }} - {{ mode.description }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- 启用/禁用开关 -->
|
||||
<div class="form-control">
|
||||
<label class="label cursor-pointer gap-2">
|
||||
<span class="label-text text-sm">启用</span>
|
||||
<input
|
||||
type="checkbox"
|
||||
v-model="signal.enabled"
|
||||
class="toggle toggle-sm toggle-primary"
|
||||
/>
|
||||
</label>
|
||||
<div class="flex flex-row gap-4">
|
||||
<button @click="toggleAllChannels" class="btn btn-primary btn-sm">
|
||||
{{ enabledChannelCount > 0 ? "全部禁用" : "全部启用" }}
|
||||
</button>
|
||||
<button
|
||||
@click="applyConfiguration"
|
||||
:disabled="isApplying"
|
||||
class="btn btn-primary btn-sm"
|
||||
>
|
||||
<span
|
||||
v-if="isApplying"
|
||||
class="loading loading-spinner loading-sm"
|
||||
></span>
|
||||
应用配置
|
||||
</button>
|
||||
|
||||
<button @click="resetConfiguration" class="btn btn-outline btn-sm">
|
||||
重置
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 通道列表 -->
|
||||
<div class="space-y-2">
|
||||
<!-- 表头 - 小屏幕单列时显示 -->
|
||||
<div
|
||||
class="flex items-center gap-2 p-2 bg-base-300 rounded-lg text-sm font-medium lg:hidden"
|
||||
>
|
||||
<span class="w-16">通道</span>
|
||||
<span class="w-20">启用/触发</span>
|
||||
<span class="w-32">标签</span>
|
||||
<span class="w-16">颜色</span>
|
||||
<span class="w-32">触发操作</span>
|
||||
<span class="w-32">触发值</span>
|
||||
</div>
|
||||
|
||||
<!-- 通道配置网格 -->
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
||||
<!-- 左列 (CH0-CH3) -->
|
||||
<div class="space-y-2">
|
||||
<!-- 左列表头 - 大屏幕时显示 -->
|
||||
<div
|
||||
class="hidden lg:flex items-center gap-2 p-2 bg-base-300 rounded-lg text-sm font-medium"
|
||||
>
|
||||
<span class="w-16">通道</span>
|
||||
<span class="w-20">启用</span>
|
||||
<span class="w-32">标签</span>
|
||||
<span class="w-16">颜色</span>
|
||||
<span class="w-32">触发操作</span>
|
||||
<span class="w-32">触发值</span>
|
||||
</div>
|
||||
|
||||
<!-- 左列通道 (0-3) -->
|
||||
<div
|
||||
v-for="(channel, index) in channels.slice(0, 4)"
|
||||
:key="index"
|
||||
class="flex items-center gap-2 p-3 bg-base-200 rounded-lg hover:bg-base-300 transition-colors"
|
||||
>
|
||||
<!-- 通道编号和颜色指示 -->
|
||||
<div class="flex items-center gap-2 w-16">
|
||||
<span class="font-mono font-medium">CH{{ index }}</span>
|
||||
<div
|
||||
class="w-3 h-3 rounded-full border-2 border-white shadow-sm"
|
||||
:style="{ backgroundColor: channel.color }"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<!-- 通道启用开关（同时控制触发） -->
|
||||
<div class="form-control w-20">
|
||||
<input
|
||||
type="checkbox"
|
||||
v-model="channel.enabled"
|
||||
class="toggle toggle-sm toggle-primary"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 通道标签 -->
|
||||
<div class="form-control w-32">
|
||||
<input
|
||||
type="text"
|
||||
v-model="channel.label"
|
||||
:placeholder="`通道 ${index}`"
|
||||
class="input input-sm input-bordered w-full"
|
||||
:disabled="!channel.enabled"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 颜色选择 -->
|
||||
<div class="form-control w-16">
|
||||
<input
|
||||
type="color"
|
||||
v-model="channel.color"
|
||||
class="w-8 h-8 rounded border-2 border-base-300 cursor-pointer"
|
||||
:disabled="!channel.enabled"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 触发操作符选择 -->
|
||||
<select
|
||||
v-model="signalConfigs[index].operator"
|
||||
class="select select-sm select-bordered w-32"
|
||||
:disabled="!channel.enabled"
|
||||
>
|
||||
<option
|
||||
v-for="op in operators"
|
||||
:key="op.value"
|
||||
:value="op.value"
|
||||
>
|
||||
{{ op.label }}
|
||||
</option>
|
||||
</select>
|
||||
|
||||
<!-- 触发信号值选择 -->
|
||||
<select
|
||||
v-model="signalConfigs[index].value"
|
||||
class="select select-sm select-bordered w-32"
|
||||
:disabled="!channel.enabled"
|
||||
>
|
||||
<option
|
||||
v-for="val in signalValues"
|
||||
:key="val.value"
|
||||
:value="val.value"
|
||||
>
|
||||
{{ val.label }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右列 (CH4-CH7) - 仅在大屏幕显示 -->
|
||||
<div class="hidden lg:block space-y-2">
|
||||
<!-- 右列表头 -->
|
||||
<div
|
||||
class="flex items-center gap-2 p-2 bg-base-300 rounded-lg text-sm font-medium"
|
||||
>
|
||||
<span class="w-16">通道</span>
|
||||
<span class="w-20">启用/触发</span>
|
||||
<span class="w-32">标签</span>
|
||||
<span class="w-16">颜色</span>
|
||||
<span class="w-32">触发操作</span>
|
||||
<span class="w-32">触发值</span>
|
||||
</div>
|
||||
|
||||
<!-- 右列通道 (4-7) -->
|
||||
<div
|
||||
v-for="(channel, index) in channels.slice(4, 8)"
|
||||
:key="index + 4"
|
||||
class="flex items-center gap-2 p-3 bg-base-200 rounded-lg hover:bg-base-300 transition-colors"
|
||||
>
|
||||
<!-- 通道编号和颜色指示 -->
|
||||
<div class="flex items-center gap-2 w-16">
|
||||
<span class="font-mono font-medium">CH{{ index + 4 }}</span>
|
||||
<div
|
||||
class="w-3 h-3 rounded-full border-2 border-white shadow-sm"
|
||||
:style="{ backgroundColor: channel.color }"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<!-- 通道启用开关（同时控制触发） -->
|
||||
<div class="form-control w-20">
|
||||
<input
|
||||
type="checkbox"
|
||||
v-model="channel.enabled"
|
||||
class="toggle toggle-sm toggle-primary"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 通道标签 -->
|
||||
<div class="form-control w-32">
|
||||
<input
|
||||
type="text"
|
||||
v-model="channel.label"
|
||||
:placeholder="`通道 ${index + 4}`"
|
||||
class="input input-sm input-bordered w-full"
|
||||
:disabled="!channel.enabled"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 颜色选择 -->
|
||||
<div class="form-control w-16">
|
||||
<input
|
||||
type="color"
|
||||
v-model="channel.color"
|
||||
class="w-8 h-8 rounded border-2 border-base-300 cursor-pointer"
|
||||
:disabled="!channel.enabled"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 触发操作符选择 -->
|
||||
<select
|
||||
v-model="signalConfigs[index + 4].operator"
|
||||
class="select select-sm select-bordered w-32"
|
||||
:disabled="!channel.enabled"
|
||||
>
|
||||
<option
|
||||
v-for="op in operators"
|
||||
:key="op.value"
|
||||
:value="op.value"
|
||||
>
|
||||
{{ op.label }}
|
||||
</option>
|
||||
</select>
|
||||
|
||||
<!-- 触发信号值选择 -->
|
||||
<select
|
||||
v-model="signalConfigs[index + 4].value"
|
||||
class="select select-sm select-bordered w-32"
|
||||
:disabled="!channel.enabled"
|
||||
>
|
||||
<option
|
||||
v-for="val in signalValues"
|
||||
:key="val.value"
|
||||
:value="val.value"
|
||||
>
|
||||
{{ val.label }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 小屏幕时继续显示 CH4-CH7 -->
|
||||
<div class="lg:hidden space-y-2">
|
||||
<div
|
||||
v-for="(channel, index) in channels.slice(4, 8)"
|
||||
:key="index + 4"
|
||||
class="flex items-center gap-2 p-3 bg-base-200 rounded-lg hover:bg-base-300 transition-colors"
|
||||
>
|
||||
<!-- 通道编号和颜色指示 -->
|
||||
<div class="flex items-center gap-2 w-16">
|
||||
<span class="font-mono font-medium">CH{{ index + 4 }}</span>
|
||||
<div
|
||||
class="w-3 h-3 rounded-full border-2 border-white shadow-sm"
|
||||
:style="{ backgroundColor: channel.color }"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<!-- 通道启用开关（同时控制触发） -->
|
||||
<div class="form-control w-20">
|
||||
<input
|
||||
type="checkbox"
|
||||
v-model="channel.enabled"
|
||||
class="toggle toggle-sm toggle-primary"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 通道标签 -->
|
||||
<div class="form-control w-32">
|
||||
<input
|
||||
type="text"
|
||||
v-model="channel.label"
|
||||
:placeholder="`通道 ${index + 4}`"
|
||||
class="input input-sm input-bordered w-full"
|
||||
:disabled="!channel.enabled"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 颜色选择 -->
|
||||
<div class="form-control w-16">
|
||||
<input
|
||||
type="color"
|
||||
v-model="channel.color"
|
||||
class="w-8 h-8 rounded border-2 border-base-300 cursor-pointer"
|
||||
:disabled="!channel.enabled"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 触发操作符选择 -->
|
||||
<select
|
||||
v-model="signalConfigs[index + 4].operator"
|
||||
class="select select-sm select-bordered w-32"
|
||||
:disabled="!channel.enabled"
|
||||
>
|
||||
<option
|
||||
v-for="op in operators"
|
||||
:key="op.value"
|
||||
:value="op.value"
|
||||
>
|
||||
{{ op.label }}
|
||||
</option>
|
||||
</select>
|
||||
|
||||
<!-- 触发信号值选择 -->
|
||||
<select
|
||||
v-model="signalConfigs[index + 4].value"
|
||||
class="select select-sm select-bordered w-32"
|
||||
:disabled="!channel.enabled"
|
||||
>
|
||||
<option
|
||||
v-for="val in signalValues"
|
||||
:key="val.value"
|
||||
:value="val.value"
|
||||
>
|
||||
{{ val.label }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div class="flex gap-2 pt-4">
|
||||
<button
|
||||
@click="applyConfiguration"
|
||||
:disabled="isApplying"
|
||||
class="btn btn-primary btn-sm"
|
||||
>
|
||||
<span
|
||||
v-if="isApplying"
|
||||
class="loading loading-spinner loading-sm"
|
||||
></span>
|
||||
应用配置
|
||||
</button>
|
||||
|
||||
<button @click="resetConfiguration" class="btn btn-outline btn-sm">
|
||||
重置
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 状态指示 -->
|
||||
<div
|
||||
v-if="lastApplyResult"
|
||||
class="alert alert-sm"
|
||||
:class="lastApplyResult.success ? 'alert-success' : 'alert-error'"
|
||||
>
|
||||
<span>{{ lastApplyResult.message }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, computed } from "vue";
|
||||
import { useEquipments } from "@/stores/equipments";
|
||||
import {
|
||||
CaptureConfig,
|
||||
LogicAnalyzerClient,
|
||||
GlobalCaptureMode,
|
||||
SignalOperator,
|
||||
SignalValue,
|
||||
type SignalTriggerConfig,
|
||||
} from "@/APIClient";
|
||||
import { AuthManager } from "@/utils/AuthManager";
|
||||
import { useRequiredInjection } from "@/utils/Common";
|
||||
import { useLogicAnalyzerState } from "./LogicAnalyzerManager";
|
||||
|
||||
// 使用设备配置
|
||||
const equipments = useEquipments();
|
||||
const {
|
||||
currentGlobalMode,
|
||||
isApplying,
|
||||
channels,
|
||||
signalConfigs,
|
||||
enabledChannelCount,
|
||||
globalModes,
|
||||
operators,
|
||||
signalValues,
|
||||
enableAllChannels,
|
||||
disableAllChannels,
|
||||
setGlobalMode,
|
||||
applyConfiguration,
|
||||
resetConfiguration,
|
||||
} = useRequiredInjection(useLogicAnalyzerState);
|
||||
|
||||
// 当前全局模式
|
||||
const currentGlobalMode = ref<GlobalCaptureMode>(GlobalCaptureMode.AND);
|
||||
|
||||
// 加载状态
|
||||
const isApplying = ref(false);
|
||||
const lastApplyResult = ref<{ success: boolean; message: string } | null>(null);
|
||||
|
||||
// 全局模式选项
|
||||
const globalModes = [
|
||||
{
|
||||
value: GlobalCaptureMode.AND,
|
||||
label: "AND",
|
||||
description: "所有条件都满足时触发",
|
||||
},
|
||||
{
|
||||
value: GlobalCaptureMode.OR,
|
||||
label: "OR",
|
||||
description: "任一条件满足时触发",
|
||||
},
|
||||
{ value: GlobalCaptureMode.NAND, label: "NAND", description: "AND的非" },
|
||||
{ value: GlobalCaptureMode.NOR, label: "NOR", description: "OR的非" },
|
||||
];
|
||||
|
||||
// 操作符选项
|
||||
const operators = [
|
||||
{ value: SignalOperator.Equal, label: "=" },
|
||||
{ value: SignalOperator.NotEqual, label: "≠" },
|
||||
{ value: SignalOperator.LessThan, label: "<" },
|
||||
{ value: SignalOperator.LessThanOrEqual, label: "≤" },
|
||||
{ value: SignalOperator.GreaterThan, label: ">" },
|
||||
{ value: SignalOperator.GreaterThanOrEqual, label: "≥" },
|
||||
];
|
||||
|
||||
// 信号值选项
|
||||
const signalValues = [
|
||||
{ value: SignalValue.Logic0, label: "0" },
|
||||
{ value: SignalValue.Logic1, label: "1" },
|
||||
{ value: SignalValue.NotCare, label: "X" },
|
||||
{ value: SignalValue.Rise, label: "↑" },
|
||||
{ value: SignalValue.Fall, label: "↓" },
|
||||
{ value: SignalValue.RiseOrFall, label: "↕" },
|
||||
{ value: SignalValue.NoChange, label: "—" },
|
||||
{ value: SignalValue.SomeNumber, label: "#" },
|
||||
];
|
||||
|
||||
// 8个信号通道的配置
|
||||
const signalConfigs = reactive(
|
||||
Array.from({ length: 8 }, (_, index) => ({
|
||||
signalIndex: index,
|
||||
operator: SignalOperator.Equal,
|
||||
value: SignalValue.Logic1,
|
||||
enabled: false,
|
||||
})),
|
||||
);
|
||||
|
||||
// 设置全局触发模式
|
||||
const setGlobalMode = async (mode: GlobalCaptureMode) => {
|
||||
try {
|
||||
const client = AuthManager.createAuthenticatedLogicAnalyzerClient();
|
||||
const success = await client.setGlobalTrigMode(mode);
|
||||
|
||||
if (success) {
|
||||
currentGlobalMode.value = mode;
|
||||
lastApplyResult.value = {
|
||||
success: true,
|
||||
message: `全局触发模式已设置为 ${globalModes.find((m) => m.value === mode)?.label}`,
|
||||
};
|
||||
} else {
|
||||
throw new Error("设置失败");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("设置全局触发模式失败:", error);
|
||||
lastApplyResult.value = {
|
||||
success: false,
|
||||
message: "设置全局触发模式失败",
|
||||
};
|
||||
const toggleAllChannels = () => {
|
||||
if (enabledChannelCount.value > 0) {
|
||||
disableAllChannels();
|
||||
} else {
|
||||
enableAllChannels();
|
||||
}
|
||||
};
|
||||
|
||||
// 应用完整配置
|
||||
const applyConfiguration = async () => {
|
||||
isApplying.value = true;
|
||||
lastApplyResult.value = null;
|
||||
|
||||
try {
|
||||
const client = AuthManager.createAuthenticatedLogicAnalyzerClient();
|
||||
|
||||
// 准备配置数据
|
||||
const enabledSignals = signalConfigs.filter((signal) => signal.enabled);
|
||||
const config = new CaptureConfig({
|
||||
globalMode: currentGlobalMode.value,
|
||||
signalConfigs: enabledSignals.map(
|
||||
(signal) =>
|
||||
({
|
||||
signalIndex: signal.signalIndex,
|
||||
operator: signal.operator,
|
||||
value: signal.value,
|
||||
}) as SignalTriggerConfig,
|
||||
),
|
||||
});
|
||||
|
||||
// 发送配置
|
||||
const success = await client.configureCapture(config);
|
||||
|
||||
if (success) {
|
||||
lastApplyResult.value = {
|
||||
success: true,
|
||||
message: `配置已成功应用，启用了 ${enabledSignals.length} 个通道`,
|
||||
};
|
||||
} else {
|
||||
throw new Error("应用配置失败");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("应用配置失败:", error);
|
||||
lastApplyResult.value = {
|
||||
success: false,
|
||||
message: "应用配置失败，请检查设备连接",
|
||||
};
|
||||
} finally {
|
||||
isApplying.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 重置配置
|
||||
const resetConfiguration = () => {
|
||||
currentGlobalMode.value = GlobalCaptureMode.AND;
|
||||
signalConfigs.forEach((signal) => {
|
||||
signal.operator = SignalOperator.Equal;
|
||||
signal.value = SignalValue.Logic1;
|
||||
signal.enabled = false;
|
||||
});
|
||||
lastApplyResult.value = null;
|
||||
};
|
||||
|
||||
// 清除状态消息
|
||||
setTimeout(() => {
|
||||
if (lastApplyResult.value) {
|
||||
lastApplyResult.value = null;
|
||||
}
|
||||
}, 5000);
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user