806 lines
32 KiB
Vue
806 lines
32 KiB
Vue
<!-- 频谱仪 -->
|
|
<script setup lang="ts">
|
|
import { $enum } from 'ts-enum-util';
|
|
|
|
import {
|
|
E_Freq单位,
|
|
E_幅度单位,
|
|
E_幅度菜单列表的项目,
|
|
E_数字键盘按键,
|
|
E_跨度菜单列表的项目,
|
|
E_选项卡菜单,
|
|
E_选项卡菜单Freq菜单列表的项目,
|
|
} from './CONST';
|
|
import 设备照片 from './pin-pu-yi-bg.png';
|
|
|
|
const state = reactive({
|
|
选项卡当前显示: E_选项卡菜单.频率菜单列表,
|
|
频谱仪状态: {
|
|
频率输入状态: {
|
|
选中的频率菜单列表的项目: null as E_选项卡菜单Freq菜单列表的项目 | null,
|
|
输入的值临时输入字符串: null as null | string, // 用于暂存用户输入
|
|
},
|
|
幅度输入状态: {
|
|
选中的幅度菜单列表的项目: null as E_幅度菜单列表的项目 | null,
|
|
输入的值临时输入字符串: null as null | string, // 用于暂存用户输入
|
|
refLevel: {
|
|
value: 0,
|
|
unit: E_幅度单位.dBm,
|
|
},
|
|
// attenuation: { value: 0, unit: E_幅度单位.dB }, // 如果需要衰减值
|
|
},
|
|
center: {
|
|
value: 0,
|
|
unit: E_Freq单位.Hz,
|
|
},
|
|
start: {
|
|
value: 0,
|
|
unit: E_Freq单位.Hz,
|
|
},
|
|
stop: {
|
|
value: 0,
|
|
unit: E_Freq单位.Hz,
|
|
},
|
|
span: {
|
|
currentSpan: {
|
|
start: 0,
|
|
stop: 0,
|
|
unit: E_Freq单位.Hz,
|
|
},
|
|
lastSpan: {
|
|
start: 0,
|
|
stop: 0,
|
|
unit: E_Freq单位.Hz,
|
|
},
|
|
fullSpan: {
|
|
start: 0,
|
|
stop: 3,
|
|
unit: E_Freq单位.GHz,
|
|
},
|
|
zeroSpan: false,
|
|
},
|
|
},
|
|
});
|
|
|
|
const 选项卡标题 = computed(() =>
|
|
$enum.mapValue(state.选项卡当前显示).with({
|
|
[E_选项卡菜单.频率菜单列表]: 'Freq/Channel',
|
|
[E_选项卡菜单.频率单位列表]: '',
|
|
[E_选项卡菜单.跨度菜单列表]: 'Span',
|
|
[E_选项卡菜单.幅度菜单列表]: 'Amplitude',
|
|
[E_选项卡菜单.幅度单位列表]: '',
|
|
}),
|
|
);
|
|
|
|
function 执行点击屏幕右边的按钮(按钮序号: number) {
|
|
console.group('🔘 点击屏幕右边的按钮', {
|
|
按钮序号,
|
|
选项卡当前显示: state.选项卡当前显示,
|
|
});
|
|
$enum.visitValue(state.选项卡当前显示).with({
|
|
[E_选项卡菜单.频率菜单列表]: () => {
|
|
switch (按钮序号) {
|
|
case 1: {
|
|
state.频谱仪状态.频率输入状态.选中的频率菜单列表的项目 = E_选项卡菜单Freq菜单列表的项目.CenterFreq;
|
|
console.debug('设置 Freq 输入状态为 CenterFreq');
|
|
break;
|
|
}
|
|
case 2: {
|
|
state.频谱仪状态.频率输入状态.选中的频率菜单列表的项目 = E_选项卡菜单Freq菜单列表的项目.StartFreq;
|
|
console.debug('设置 Freq 输入状态为 StartFreq');
|
|
break;
|
|
}
|
|
case 3: {
|
|
state.频谱仪状态.频率输入状态.选中的频率菜单列表的项目 = E_选项卡菜单Freq菜单列表的项目.StopFreq;
|
|
console.debug('设置 Freq 输入状态为 StopFreq');
|
|
break;
|
|
}
|
|
default: {
|
|
console.debug('频率菜单列表 - 这个按键还没有实现');
|
|
break;
|
|
}
|
|
}
|
|
},
|
|
[E_选项卡菜单.频率单位列表]: () => {
|
|
let selectedUnit: E_Freq单位 | null = null;
|
|
switch (按钮序号) {
|
|
case 1: {
|
|
selectedUnit = E_Freq单位.GHz;
|
|
break;
|
|
}
|
|
case 2: {
|
|
selectedUnit = E_Freq单位.MHz;
|
|
break;
|
|
}
|
|
case 3: {
|
|
selectedUnit = E_Freq单位.kHz;
|
|
break;
|
|
}
|
|
case 4: {
|
|
selectedUnit = E_Freq单位.Hz;
|
|
break;
|
|
}
|
|
default: {
|
|
console.warn('无效的频率单位按钮序号:', 按钮序号);
|
|
console.groupEnd();
|
|
return;
|
|
}
|
|
}
|
|
|
|
const tempInputString = state.频谱仪状态.频率输入状态.输入的值临时输入字符串;
|
|
const selectedFreqItem = state.频谱仪状态.频率输入状态.选中的频率菜单列表的项目;
|
|
// 必须有临时输入值和选中的 Freq 项目才能确认
|
|
if (!tempInputString || !selectedFreqItem) {
|
|
console.warn('频率输入未完成或未选择项目，无法确认单位。');
|
|
console.groupEnd();
|
|
return;
|
|
}
|
|
|
|
const inputValue = Number.parseFloat(tempInputString);
|
|
// 校验解析结果
|
|
if (Number.isNaN(inputValue)) {
|
|
console.warn('无法将临时输入解析为有效数字 (频率):', tempInputString);
|
|
console.groupEnd();
|
|
return;
|
|
}
|
|
|
|
console.debug('确认频率单位:', selectedUnit, '值为:', inputValue);
|
|
switch (selectedFreqItem) {
|
|
case E_选项卡菜单Freq菜单列表的项目.CenterFreq: {
|
|
state.频谱仪状态.center.value = inputValue;
|
|
state.频谱仪状态.center.unit = selectedUnit;
|
|
console.debug('更新 CenterFreq:', state.频谱仪状态.center);
|
|
break;
|
|
}
|
|
case E_选项卡菜单Freq菜单列表的项目.StartFreq: {
|
|
state.频谱仪状态.start.value = inputValue;
|
|
state.频谱仪状态.start.unit = selectedUnit;
|
|
console.debug('更新 StartFreq:', state.频谱仪状态.start);
|
|
break;
|
|
}
|
|
case E_选项卡菜单Freq菜单列表的项目.StopFreq: {
|
|
state.频谱仪状态.stop.value = inputValue;
|
|
state.频谱仪状态.stop.unit = selectedUnit;
|
|
console.debug('更新 StopFreq:', state.频谱仪状态.stop);
|
|
break;
|
|
}
|
|
}
|
|
state.频谱仪状态.频率输入状态.选中的频率菜单列表的项目 = null;
|
|
state.频谱仪状态.频率输入状态.输入的值临时输入字符串 = null;
|
|
state.选项卡当前显示 = E_选项卡菜单.频率菜单列表;
|
|
console.debug('频率输入状态已重置, 切换回频率菜单列表');
|
|
},
|
|
[E_选项卡菜单.跨度菜单列表]: () => {
|
|
switch (按钮序号) {
|
|
case 1: {
|
|
// Full Span
|
|
state.频谱仪状态.span.lastSpan.start = state.频谱仪状态.start.value;
|
|
state.频谱仪状态.span.lastSpan.stop = state.频谱仪状态.stop.value;
|
|
state.频谱仪状态.span.lastSpan.unit = state.频谱仪状态.stop.unit;
|
|
state.频谱仪状态.start.value = state.频谱仪状态.span.fullSpan.start;
|
|
state.频谱仪状态.start.unit = state.频谱仪状态.span.fullSpan.unit;
|
|
state.频谱仪状态.stop.value = state.频谱仪状态.span.fullSpan.stop;
|
|
state.频谱仪状态.stop.unit = state.频谱仪状态.span.fullSpan.unit;
|
|
state.频谱仪状态.center.value = (state.频谱仪状态.start.value + state.频谱仪状态.stop.value) / 2;
|
|
state.频谱仪状态.center.unit = state.频谱仪状态.span.fullSpan.unit;
|
|
state.频谱仪状态.span.zeroSpan = false;
|
|
console.debug('设置为 Full Span');
|
|
break;
|
|
}
|
|
case 2: {
|
|
// Zero Span
|
|
state.频谱仪状态.span.lastSpan.start = state.频谱仪状态.start.value;
|
|
state.频谱仪状态.span.lastSpan.stop = state.频谱仪状态.stop.value;
|
|
state.频谱仪状态.span.lastSpan.unit = state.频谱仪状态.stop.unit;
|
|
state.频谱仪状态.start.value = state.频谱仪状态.center.value;
|
|
state.频谱仪状态.start.unit = state.频谱仪状态.center.unit;
|
|
state.频谱仪状态.stop.value = state.频谱仪状态.center.value;
|
|
state.频谱仪状态.stop.unit = state.频谱仪状态.center.unit;
|
|
state.频谱仪状态.span.zeroSpan = true;
|
|
console.debug('设置为 Zero Span');
|
|
break;
|
|
}
|
|
case 3: {
|
|
// Last Span
|
|
state.频谱仪状态.start.value = state.频谱仪状态.span.lastSpan.start;
|
|
state.频谱仪状态.start.unit = state.频谱仪状态.span.lastSpan.unit;
|
|
state.频谱仪状态.stop.value = state.频谱仪状态.span.lastSpan.stop;
|
|
state.频谱仪状态.stop.unit = state.频谱仪状态.span.lastSpan.unit;
|
|
state.频谱仪状态.center.value = (state.频谱仪状态.start.value + state.频谱仪状态.stop.value) / 2;
|
|
state.频谱仪状态.center.unit = state.频谱仪状态.span.lastSpan.unit;
|
|
state.频谱仪状态.span.zeroSpan = false;
|
|
console.debug('恢复到 Last Span');
|
|
break;
|
|
}
|
|
default: {
|
|
console.debug('跨度菜单列表 - 这个按键还没有实现');
|
|
break;
|
|
}
|
|
}
|
|
},
|
|
[E_选项卡菜单.幅度菜单列表]: () => {
|
|
switch (按钮序号) {
|
|
case 1: {
|
|
// Ref Level
|
|
state.频谱仪状态.幅度输入状态.选中的幅度菜单列表的项目 = E_幅度菜单列表的项目.RefLevel;
|
|
state.频谱仪状态.幅度输入状态.输入的值临时输入字符串 = null;
|
|
console.debug('设置 幅度输入状态为 RefLevel');
|
|
break;
|
|
}
|
|
case 2: {
|
|
// Attenuation
|
|
console.debug('点击了 幅度菜单列表 - Attenuation (功能待实现)');
|
|
break;
|
|
}
|
|
default: {
|
|
console.debug('幅度菜单列表 - 这个按键还没有实现');
|
|
break;
|
|
}
|
|
}
|
|
},
|
|
[E_选项卡菜单.幅度单位列表]: () => {
|
|
let selectedUnit: E_幅度单位 | null = null;
|
|
switch (按钮序号) {
|
|
case 1: {
|
|
selectedUnit = E_幅度单位.dBm;
|
|
break;
|
|
}
|
|
case 2: {
|
|
selectedUnit = E_幅度单位.mV;
|
|
break;
|
|
}
|
|
case 3: {
|
|
selectedUnit = E_幅度单位.uV;
|
|
break;
|
|
}
|
|
case 4: {
|
|
selectedUnit = E_幅度单位.uA;
|
|
break;
|
|
}
|
|
default: {
|
|
console.warn('无效的幅度单位按钮序号:', 按钮序号);
|
|
console.groupEnd();
|
|
return;
|
|
}
|
|
}
|
|
|
|
const tempInputString = state.频谱仪状态.幅度输入状态.输入的值临时输入字符串;
|
|
const selectedAmpItem = state.频谱仪状态.幅度输入状态.选中的幅度菜单列表的项目;
|
|
|
|
if (!tempInputString || !selectedAmpItem) {
|
|
console.warn('幅度输入未完成或未选择项目，无法确认单位。');
|
|
console.groupEnd();
|
|
return;
|
|
}
|
|
|
|
const inputValue = Number.parseFloat(tempInputString);
|
|
if (Number.isNaN(inputValue)) {
|
|
console.warn('无法将临时输入解析为有效数字 (幅度):', tempInputString);
|
|
console.groupEnd();
|
|
return;
|
|
}
|
|
|
|
console.debug('确认幅度单位:', selectedUnit, '值为:', inputValue);
|
|
if (selectedAmpItem === E_幅度菜单列表的项目.RefLevel) {
|
|
state.频谱仪状态.幅度输入状态.refLevel.value = inputValue;
|
|
state.频谱仪状态.幅度输入状态.refLevel.unit = selectedUnit;
|
|
console.debug('更新 RefLevel:', state.频谱仪状态.幅度输入状态.refLevel);
|
|
}
|
|
state.频谱仪状态.幅度输入状态.选中的幅度菜单列表的项目 = null;
|
|
state.频谱仪状态.幅度输入状态.输入的值临时输入字符串 = null;
|
|
state.选项卡当前显示 = E_选项卡菜单.幅度菜单列表;
|
|
console.debug('幅度输入状态已重置, 切换回幅度菜单列表');
|
|
},
|
|
});
|
|
console.groupEnd();
|
|
}
|
|
|
|
function 执行点击数字按钮(按钮值: E_数字键盘按键) {
|
|
console.group('🔢 点击数字按钮', { 按钮值 });
|
|
|
|
const isFreqInputActive = !!state.频谱仪状态.频率输入状态.选中的频率菜单列表的项目;
|
|
const isAmpInputActive = !!state.频谱仪状态.幅度输入状态.选中的幅度菜单列表的项目;
|
|
|
|
if (!isFreqInputActive && !isAmpInputActive) {
|
|
console.warn('请先选择一个频率或幅度菜单项');
|
|
console.groupEnd();
|
|
return;
|
|
}
|
|
|
|
let 当前临时输入: string;
|
|
let 更新临时输入回调: (newVal: null | string) => void;
|
|
let 后续操作菜单: E_选项卡菜单;
|
|
|
|
if (isFreqInputActive) {
|
|
当前临时输入 = state.频谱仪状态.频率输入状态.输入的值临时输入字符串 ?? '';
|
|
更新临时输入回调 = (newVal) => {
|
|
state.频谱仪状态.频率输入状态.输入的值临时输入字符串 = newVal;
|
|
};
|
|
后续操作菜单 = E_选项卡菜单.频率单位列表;
|
|
} else {
|
|
// isAmpInputActive
|
|
当前临时输入 = state.频谱仪状态.幅度输入状态.输入的值临时输入字符串 ?? '';
|
|
更新临时输入回调 = (newVal) => {
|
|
state.频谱仪状态.幅度输入状态.输入的值临时输入字符串 = newVal;
|
|
};
|
|
后续操作菜单 = E_选项卡菜单.幅度单位列表;
|
|
}
|
|
|
|
switch (按钮值) {
|
|
case E_数字键盘按键.Dot: {
|
|
// 只有在当前临时输入不包含小数点时才允许添加
|
|
if (当前临时输入.includes('.')) {
|
|
console.debug('已存在小数点，忽略本次输入');
|
|
} else {
|
|
// 如果当前为空，则为 '0.'，否则追加 '.'
|
|
更新临时输入回调(当前临时输入 ? `${当前临时输入}.` : '0.');
|
|
console.debug(
|
|
'输入小数点，临时字符串:',
|
|
isFreqInputActive
|
|
? state.频谱仪状态.频率输入状态.输入的值临时输入字符串
|
|
: state.频谱仪状态.幅度输入状态.输入的值临时输入字符串,
|
|
);
|
|
}
|
|
break;
|
|
}
|
|
|
|
case E_数字键盘按键.Num0:
|
|
case E_数字键盘按键.Num1:
|
|
case E_数字键盘按键.Num2:
|
|
case E_数字键盘按键.Num3:
|
|
case E_数字键盘按键.Num4:
|
|
case E_数字键盘按键.Num5:
|
|
case E_数字键盘按键.Num6:
|
|
case E_数字键盘按键.Num7:
|
|
case E_数字键盘按键.Num8:
|
|
case E_数字键盘按键.Num9: {
|
|
if (当前临时输入 === '0') {
|
|
更新临时输入回调(String(按钮值));
|
|
} else if (当前临时输入 === '-0') {
|
|
更新临时输入回调(`-${String(按钮值)}`);
|
|
} else {
|
|
更新临时输入回调(当前临时输入 + String(按钮值));
|
|
}
|
|
console.debug(
|
|
'输入数字，临时字符串:',
|
|
isFreqInputActive
|
|
? state.频谱仪状态.频率输入状态.输入的值临时输入字符串
|
|
: state.频谱仪状态.幅度输入状态.输入的值临时输入字符串,
|
|
);
|
|
break;
|
|
}
|
|
case E_数字键盘按键.PlusMinus: {
|
|
if (当前临时输入.startsWith('-')) {
|
|
更新临时输入回调(当前临时输入.slice(1));
|
|
} else if (当前临时输入 && 当前临时输入 !== '0' && 当前临时输入 !== '0.') {
|
|
更新临时输入回调(`-${当前临时输入}`);
|
|
} else if (当前临时输入 === '' || 当前临时输入 === '0' || 当前临时输入 === '0.') {
|
|
更新临时输入回调('-');
|
|
} else {
|
|
console.debug('无法切换正负号');
|
|
}
|
|
console.debug(
|
|
'切换正负号，临时字符串:',
|
|
isFreqInputActive
|
|
? state.频谱仪状态.频率输入状态.输入的值临时输入字符串
|
|
: state.频谱仪状态.幅度输入状态.输入的值临时输入字符串,
|
|
);
|
|
break;
|
|
}
|
|
default: {
|
|
console.warn('未知的数字键盘按键:', 按钮值);
|
|
}
|
|
}
|
|
state.选项卡当前显示 = 后续操作菜单;
|
|
|
|
console.groupEnd();
|
|
}
|
|
|
|
const img_modules = import.meta.glob<{ default: string }>('./imgs/*.png', {
|
|
eager: true,
|
|
});
|
|
const 屏幕照片 = ref(img_modules['./imgs/屏幕_0.png']!.default);
|
|
watch(
|
|
() => state.频谱仪状态.center.value,
|
|
() => {
|
|
屏幕照片.value = img_modules['./imgs/屏幕_1.png']!.default;
|
|
},
|
|
);
|
|
watch(
|
|
() => state.频谱仪状态.start.value,
|
|
() => {
|
|
屏幕照片.value = img_modules['./imgs/屏幕_2.png']!.default;
|
|
},
|
|
);
|
|
watch(
|
|
() => state.频谱仪状态.stop.value,
|
|
() => {
|
|
屏幕照片.value = img_modules['./imgs/屏幕_3.png']!.default;
|
|
},
|
|
);
|
|
watchEffect(() => {
|
|
console.debug(`屏幕照片.value :>> `, 屏幕照片.value);
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<!-- <pre
|
|
v-if="$__DEV__"
|
|
class="fixed bottom-10 right-10 top-10 z-[9999] overflow-auto overflow-y-auto bg-white p-[10px] text-[12px] text-black"
|
|
>{{ { 选项卡菜单7个: $enum(E_选项卡菜单).getValues(), ...state } }}</pre
|
|
> -->
|
|
|
|
<div class="wrp relative">
|
|
<img :src="设备照片" alt="频谱仪设备" />
|
|
|
|
<div
|
|
class="absolute left-[640px] top-[174px] flex w-[55px] flex-col gap-y-[4px] overflow-visible text-black"
|
|
data-box="屏幕右边的按钮"
|
|
>
|
|
<!-- 上下还有一个 ESC / RETURN -->
|
|
<ul class="flex h-[300px] flex-col justify-around gap-y-[4px] overflow-visible" data-box="屏幕右边按钮列表">
|
|
<template v-for="n in 7" :key="`按钮${n}`">
|
|
<li
|
|
class="lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-visible rounded-[2px] text-[12px]"
|
|
@click="执行点击屏幕右边的按钮(n)"
|
|
>
|
|
<button class="ppy-btn !h-full !w-full"></button>
|
|
</li>
|
|
</template>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="absolute left-[195px] top-[140px] h-[350px] w-[430px] bg-black" data-box="屏幕">
|
|
<img :src="屏幕照片" alt="频谱仪屏幕" class="absolute left-0 top-0 !h-[330px] !w-[340px]" />
|
|
|
|
<!-- -->
|
|
<!-- 屏幕左上角 Ref Level -->
|
|
<div class="absolute left-[5px] top-[20px] text-left text-[10px] text-white" data-box="屏幕左上角RefLevel">
|
|
<span>
|
|
Ref {{ state.频谱仪状态.幅度输入状态.refLevel.value }}
|
|
{{ state.频谱仪状态.幅度输入状态.refLevel.unit }}
|
|
</span>
|
|
</div>
|
|
|
|
<div class="absolute bottom-0 left-0 right-[85px] flex justify-between text-white" data-box="下面左Start 右Stop">
|
|
<div class="flex-1 text-left">
|
|
<span>Start </span>
|
|
<span>{{ state.频谱仪状态.start.value }}</span>
|
|
<span>{{ state.频谱仪状态.start.unit }}</span>
|
|
</div>
|
|
<div class="flex-1 text-right">
|
|
<span>Stop </span>
|
|
<span>{{ state.频谱仪状态.stop.value }}</span>
|
|
<span>{{ state.频谱仪状态.stop.unit }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
v-if="
|
|
state.频谱仪状态.频率输入状态.选中的频率菜单列表的项目 ||
|
|
state.频谱仪状态.幅度输入状态.选中的幅度菜单列表的项目
|
|
"
|
|
class="lh-[1.2] absolute left-[40px] top-[140px] flex flex-col gap-y-[0px] bg-gray-500/100 text-white"
|
|
data-box="正在输入的值"
|
|
>
|
|
<!-- 标题：显示当前选中的输入项 -->
|
|
<div v-if="state.频谱仪状态.频率输入状态.选中的频率菜单列表的项目">
|
|
{{ state.频谱仪状态.频率输入状态.选中的频率菜单列表的项目 }}
|
|
</div>
|
|
<div v-else-if="state.频谱仪状态.幅度输入状态.选中的幅度菜单列表的项目">
|
|
{{ state.频谱仪状态.幅度输入状态.选中的幅度菜单列表的项目 }}
|
|
</div>
|
|
|
|
<!-- 值：优先显示临时输入字符串，如果为空，则显示已确认的值 -->
|
|
<div>
|
|
<template
|
|
v-if="
|
|
state.频谱仪状态.频率输入状态.选中的频率菜单列表的项目 &&
|
|
state.频谱仪状态.频率输入状态.输入的值临时输入字符串 !== null
|
|
"
|
|
>
|
|
{{ state.频谱仪状态.频率输入状态.输入的值临时输入字符串 }}
|
|
</template>
|
|
<template
|
|
v-else-if="
|
|
state.频谱仪状态.幅度输入状态.选中的幅度菜单列表的项目 &&
|
|
state.频谱仪状态.幅度输入状态.输入的值临时输入字符串 !== null
|
|
"
|
|
>
|
|
{{ state.频谱仪状态.幅度输入状态.输入的值临时输入字符串 }}
|
|
</template>
|
|
<!-- 已确认的频率值 -->
|
|
<template
|
|
v-else-if="
|
|
state.频谱仪状态.频率输入状态.选中的频率菜单列表的项目 === E_选项卡菜单Freq菜单列表的项目.CenterFreq
|
|
"
|
|
>
|
|
{{ state.频谱仪状态.center.value }}
|
|
{{ state.频谱仪状态.center.unit }}
|
|
</template>
|
|
<template
|
|
v-else-if="
|
|
state.频谱仪状态.频率输入状态.选中的频率菜单列表的项目 === E_选项卡菜单Freq菜单列表的项目.StartFreq
|
|
"
|
|
>
|
|
{{ state.频谱仪状态.start.value }} {{ state.频谱仪状态.start.unit }}
|
|
</template>
|
|
<template
|
|
v-else-if="
|
|
state.频谱仪状态.频率输入状态.选中的频率菜单列表的项目 === E_选项卡菜单Freq菜单列表的项目.StopFreq
|
|
"
|
|
>
|
|
{{ state.频谱仪状态.stop.value }} {{ state.频谱仪状态.stop.unit }}
|
|
</template>
|
|
<!-- 已确认的幅度值 -->
|
|
<template
|
|
v-else-if="state.频谱仪状态.幅度输入状态.选中的幅度菜单列表的项目 === E_幅度菜单列表的项目.RefLevel"
|
|
>
|
|
{{ state.频谱仪状态.幅度输入状态.refLevel.value }}
|
|
{{ state.频谱仪状态.幅度输入状态.refLevel.unit }}
|
|
</template>
|
|
<template v-else>
|
|
0.000000000
|
|
<!-- 默认或回退显示 -->
|
|
</template>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="absolute bottom-[15px] right-0 top-0 flex w-[80px] flex-col gap-y-[4px] text-black"
|
|
data-box="屏幕右侧的选项卡"
|
|
>
|
|
<div class="menu-item lh-[30px] h-[30px] overflow-hidden bg-[#AFAFAF] text-center" data-box="菜单标题">
|
|
{{ 选项卡标题 }}
|
|
</div>
|
|
|
|
<ul
|
|
v-if="state.选项卡当前显示 === E_选项卡菜单.频率菜单列表"
|
|
class="flex h-[300px] flex-col justify-around gap-y-[4px]"
|
|
data-box="频率菜单列表"
|
|
>
|
|
<li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]">
|
|
<span>Center Freq</span>
|
|
{{ state.频谱仪状态.center.value }}
|
|
{{ state.频谱仪状态.center.unit }}
|
|
</li>
|
|
<li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]">
|
|
<span>Start Freq</span>
|
|
{{ state.频谱仪状态.start.value }}
|
|
{{ state.频谱仪状态.start.unit }}
|
|
</li>
|
|
<li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]">
|
|
<span>Stop Freq</span>
|
|
{{ state.频谱仪状态.stop.value }}
|
|
{{ state.频谱仪状态.stop.unit }}
|
|
</li>
|
|
<li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]">
|
|
<span>#CF Step</span>
|
|
<span>0.0000 hz</span>
|
|
<span>X</span>
|
|
</li>
|
|
<li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]">
|
|
<span>#Freq Offset</span>
|
|
<span>0.0000 Hz</span>
|
|
</li>
|
|
<li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]">
|
|
<span>#Singnal Track</span>
|
|
</li>
|
|
<li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]">
|
|
<span>#Scale Type</span>
|
|
</li>
|
|
</ul>
|
|
|
|
<ul
|
|
v-if="state.选项卡当前显示 === E_选项卡菜单.频率单位列表"
|
|
class="flex flex-1 flex-col justify-around gap-y-[4px]"
|
|
data-box="FreqChannel单位列表"
|
|
>
|
|
<li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]">
|
|
<span>GHz</span>
|
|
</li>
|
|
<li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]">
|
|
<span>MHz</span>
|
|
</li>
|
|
<li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]">
|
|
<span>KHz</span>
|
|
</li>
|
|
<li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]">
|
|
<span>Hz</span>
|
|
</li>
|
|
<li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]"></li>
|
|
<li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]"></li>
|
|
<li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]"></li>
|
|
</ul>
|
|
|
|
<ul
|
|
v-if="state.选项卡当前显示 === E_选项卡菜单.跨度菜单列表"
|
|
class="flex h-[300px] flex-col justify-around gap-y-[4px]"
|
|
data-box="跨度菜单列表"
|
|
>
|
|
<li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]">
|
|
<span>{{ E_跨度菜单列表的项目.FullSpan }}</span>
|
|
</li>
|
|
<li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]">
|
|
<span>{{ E_跨度菜单列表的项目.ZeroSpan }}</span>
|
|
</li>
|
|
<li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]">
|
|
<span>{{ E_跨度菜单列表的项目.LastSpan }}</span>
|
|
</li>
|
|
<li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]"></li>
|
|
<li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]"></li>
|
|
<li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]"></li>
|
|
<li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]"></li>
|
|
</ul>
|
|
|
|
<ul
|
|
v-if="state.选项卡当前显示 === E_选项卡菜单.幅度菜单列表"
|
|
class="flex h-[300px] flex-col justify-around gap-y-[4px]"
|
|
data-box="幅度菜单列表"
|
|
>
|
|
<li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]">
|
|
<span>Ref Level</span>
|
|
<span>
|
|
{{ state.频谱仪状态.幅度输入状态.refLevel.value }}
|
|
{{ state.频谱仪状态.幅度输入状态.refLevel.unit }}
|
|
</span>
|
|
</li>
|
|
<li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]">
|
|
<span>#Attenuation</span>
|
|
<!-- <span>TODO</span> -->
|
|
</li>
|
|
<li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]"></li>
|
|
<li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]"></li>
|
|
<li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]"></li>
|
|
<li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]"></li>
|
|
<li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]"></li>
|
|
</ul>
|
|
|
|
<ul
|
|
v-if="state.选项卡当前显示 === E_选项卡菜单.幅度单位列表"
|
|
class="flex h-[300px] flex-col justify-around gap-y-[4px]"
|
|
data-box="幅度单位列表"
|
|
>
|
|
<li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]">
|
|
<span>{{ E_幅度单位.dBm }}</span>
|
|
</li>
|
|
<li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]">
|
|
<span>{{ E_幅度单位.mV }}</span>
|
|
</li>
|
|
<li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]">
|
|
<span>{{ E_幅度单位.uV }}</span>
|
|
</li>
|
|
<li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]">
|
|
<span>{{ E_幅度单位.uA }}</span>
|
|
</li>
|
|
<li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]"></li>
|
|
<li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]"></li>
|
|
<li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]"></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ppy-btns absolute left-[768px] top-[120px] h-[415px] !overflow-visible" data-box="机器右边按键">
|
|
<!-- 左上角. 长的 -->
|
|
<div class="flex flex-col gap-y-[18px] !overflow-visible">
|
|
<button class="ppy-btn !w-[62px]" @click="state.选项卡当前显示 = E_选项卡菜单.频率菜单列表">
|
|
FREQ<br />Channel
|
|
</button>
|
|
<button class="ppy-btn !w-[62px]" @click="state.选项卡当前显示 = E_选项卡菜单.跨度菜单列表">
|
|
SPAN<br />X Scale
|
|
</button>
|
|
<button class="ppy-btn !w-[62px]" @click="state.选项卡当前显示 = E_选项卡菜单.幅度菜单列表">
|
|
AMPLITUDE<br />Y Scale
|
|
</button>
|
|
<button class="ppy-btn !w-[62px] opacity-0">#</button>
|
|
<button class="ppy-btn !w-[62px] opacity-0">#</button>
|
|
</div>
|
|
<div class="mt-[20px] grid grid-cols-3 gap-[16.5px] !overflow-visible" data-box="数字键盘区域">
|
|
<button class="ppy-btn" @click="执行点击数字按钮(E_数字键盘按键.Num7)">7</button>
|
|
<button class="ppy-btn" @click="执行点击数字按钮(E_数字键盘按键.Num8)">8</button>
|
|
<button class="ppy-btn" @click="执行点击数字按钮(E_数字键盘按键.Num9)">9</button>
|
|
<button class="ppy-btn" @click="执行点击数字按钮(E_数字键盘按键.Num4)">4</button>
|
|
<button class="ppy-btn" @click="执行点击数字按钮(E_数字键盘按键.Num5)">5</button>
|
|
<button class="ppy-btn" @click="执行点击数字按钮(E_数字键盘按键.Num6)">6</button>
|
|
<button class="ppy-btn" @click="执行点击数字按钮(E_数字键盘按键.Num1)">1</button>
|
|
<button class="ppy-btn" @click="执行点击数字按钮(E_数字键盘按键.Num2)">2</button>
|
|
<button class="ppy-btn" @click="执行点击数字按钮(E_数字键盘按键.Num3)">3</button>
|
|
<button class="ppy-btn" @click="执行点击数字按钮(E_数字键盘按键.Num0)">0</button>
|
|
<button class="ppy-btn" @click="执行点击数字按钮(E_数字键盘按键.Dot)">.</button>
|
|
<button class="ppy-btn" @click="执行点击数字按钮(E_数字键盘按键.PlusMinus)">+/-</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
@import url('./Helvetica.css');
|
|
|
|
.wrp {
|
|
font-family: 'Helvetica Custom';
|
|
}
|
|
|
|
/* .wrp * {
|
|
overflow: hidden;
|
|
} */
|
|
|
|
img[alt='频谱仪设备'] {
|
|
width: calc(2554px * 0.5);
|
|
max-width: fit-content;
|
|
height: calc(1626px * 0.5);
|
|
max-height: fit-content;
|
|
}
|
|
|
|
.ppy-btn {
|
|
display: flex; /* 使用 flex 居中文本 */
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 36px;
|
|
height: 30px;
|
|
padding-left: 2px;
|
|
overflow: hidden;
|
|
font-size: 10px;
|
|
line-height: 1.2;
|
|
color: #333; /* 深灰色文字 */
|
|
text-align: left;
|
|
text-decoration: none;
|
|
background-color: #e0e0e0; /* 按钮浅灰色背景 */
|
|
border: 1px solid green;
|
|
border: 1px solid #b0b0b0; /* 添加边框 */
|
|
border-radius: 4px;
|
|
box-shadow:
|
|
1px 1px 2px rgb(0 0 0 / 20%),
|
|
/* 轻微外阴影 */ -1px -1px 2px rgb(255 255 255 / 80%); /* 轻微外高光 */
|
|
|
|
transition: all 0.1s ease-in-out; /* 平滑过渡效果 */
|
|
|
|
/* width: 100%; */
|
|
|
|
/* 宽度占满 grid 单元格 */
|
|
|
|
/* height: 100%; */
|
|
|
|
/* 高度占满 grid 单元格 */
|
|
|
|
/* font-size: 20px; */
|
|
|
|
/* 调整字体大小 */
|
|
|
|
/* font-weight: bold; */
|
|
|
|
/* 字体加粗 */
|
|
|
|
/* border-radius: 4px; */
|
|
|
|
/* 按钮圆角 */
|
|
}
|
|
|
|
.ppy-btn:active {
|
|
background-color: #d5d5d5;
|
|
border-color: #a0a0a0;
|
|
box-shadow:
|
|
inset 1px 1px 3px rgb(0 0 0 / 30%),
|
|
inset -1px -1px 3px rgb(255 255 255 / 60%);
|
|
transform: scale(0.98);
|
|
}
|
|
|
|
.menu-item {
|
|
/* @apply bg-gray-200/50 p-[2px]; */
|
|
font-size: 12px;
|
|
|
|
/* border: 1px solid white; */
|
|
}
|
|
|
|
[alt='频谱仪设备'] {
|
|
opacity: 1;
|
|
transition: opacity 0.3s;
|
|
}
|
|
|
|
/* li,
|
|
.ppy-btns,
|
|
[data-box='屏幕'],
|
|
[data-box='菜单标题'] {
|
|
box-shadow: 0 0 0 1px rgba(255, 0, 0, 0.5);
|
|
} */
|
|
</style>
|