377 lines
13 KiB
Vue
377 lines
13 KiB
Vue
<template>
|
|
<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="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">
|
|
<!-- 全局触发模式选择 -->
|
|
<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="currentGlobalMode"
|
|
@change="setGlobalMode(currentGlobalMode)"
|
|
class="select select-sm select-bordered w-full"
|
|
>
|
|
<option
|
|
v-for="mode in globalModes"
|
|
:key="mode.value"
|
|
:value="mode.value"
|
|
>
|
|
{{ mode.label }} - {{ mode.description }}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
|
|
<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>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useRequiredInjection } from "@/utils/Common";
|
|
import { useLogicAnalyzerState } from "./LogicAnalyzerManager";
|
|
|
|
const {
|
|
currentGlobalMode,
|
|
isApplying,
|
|
channels,
|
|
signalConfigs,
|
|
enabledChannelCount,
|
|
globalModes,
|
|
operators,
|
|
signalValues,
|
|
enableAllChannels,
|
|
disableAllChannels,
|
|
setGlobalMode,
|
|
applyConfiguration,
|
|
resetConfiguration,
|
|
} = useRequiredInjection(useLogicAnalyzerState);
|
|
|
|
const toggleAllChannels = () => {
|
|
if (enabledChannelCount.value > 0) {
|
|
disableAllChannels();
|
|
} else {
|
|
enableAllChannels();
|
|
}
|
|
};
|
|
</script>
|