PinPuYi
This commit is contained in:
严浩
@ -2,7 +2,7 @@
|
||||
<script setup lang="ts">
|
||||
import { $enum } from 'ts-enum-util';
|
||||
|
||||
import 设备照片 from './pin-pu-yi-bg-clean.png';
|
||||
import 设备照片 from './pin-pu-yi-bg.png';
|
||||
|
||||
enum E_选项卡菜单 {
|
||||
频率菜单列表 = '频率菜单列表',
|
||||
@ -256,16 +256,32 @@ function 执行点击数字按钮(按钮值: E_数字键盘按键) {
|
||||
}
|
||||
|
||||
const img_modules = import.meta.glob<{ default: string }>('./imgs/*.png', { eager: true });
|
||||
const 屏幕照片 = computed(() => {
|
||||
if (state.频率状态.center.value > 0) return img_modules['./imgs/屏幕_1.png'].default;
|
||||
if (state.频率状态.start.value > 0) return img_modules['./imgs/屏幕_2.png'].default;
|
||||
if (state.频率状态.stop.value > 0) return img_modules['./imgs/屏幕_3.png'].default;
|
||||
return img_modules['./imgs/屏幕_0.png'].default;
|
||||
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 class="fixed top-10 right-10 z-[9999] bg-white text-black p-[10px] text-[12px] overflow-auto">{{
|
||||
<pre v-if="$__DEV__" class="fixed top-10 right-10 z-[9999] bg-white text-black p-[10px] text-[12px] overflow-auto">{{
|
||||
{ 选项卡菜单7个: $enum(E_选项卡菜单).getValues(), ...state }
|
||||
}}</pre>
|
||||
<div class="relative wrp">
|
||||
@ -273,27 +289,27 @@ const 屏幕照片 = computed(() => {
|
||||
|
||||
<div
|
||||
data-box="屏幕右边的按钮"
|
||||
class="flex flex-col gap-y-[4px] w-[55px] absolute top-[174px] left-[640px] text-black"
|
||||
class="flex flex-col overflow-visible gap-y-[4px] w-[55px] absolute top-[174px] left-[640px] text-black"
|
||||
>
|
||||
<!-- 上下还有一个 ESC / RETURN -->
|
||||
<ul class="flex flex-col justify-around gap-y-[4px] h-[300px]" data-box="按钮列表">
|
||||
<ul class="flex overflow-visible flex-col justify-around gap-y-[4px] h-[300px]" data-box="屏幕右边按钮列表">
|
||||
<template v-for="n in 7" :key="`按钮${n}`">
|
||||
<li
|
||||
@click="执行点击屏幕右边的按钮(n)"
|
||||
class="flex-1 menu-item flex flex-col gap-y-[0px] lh-[1.2] bg-gray-500/70!"
|
||||
class="overflow-visible flex-1 flex flex-col gap-y-[0px] lh-[1.2] text-[12px] rounded-[2px]"
|
||||
>
|
||||
<span>{{ n }}.</span>
|
||||
<button class="ppy-btn w-full! h-full!">{{ n }}.</button>
|
||||
</li>
|
||||
</template>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div data-box="屏幕" class="absolute top-[140px] left-[170px] w-[460px] h-[350px] bg-black">
|
||||
<img :src="屏幕照片" alt="频谱仪屏幕" class="absolute top-0 left-0 w-[380px]! h-[330px]!" />
|
||||
<div data-box="屏幕" class="absolute top-[140px] left-[195px] w-[430px] h-[350px] bg-black">
|
||||
<img :src="屏幕照片" alt="频谱仪屏幕" class="absolute top-0 left-0 w-[340px]! h-[330px]!" />
|
||||
<div
|
||||
v-if="state.频率状态.输入状态.选中的频率菜单列表的项目"
|
||||
data-box="显示输入的 Freq/Channel 的值"
|
||||
class="flex flex-col gap-y-[0px] text-white bg-pink-500/100 absolute left-[40px] top-[140px] lh-[1.2]"
|
||||
class="flex flex-col gap-y-[0px] text-white bg-gray-500/100 absolute left-[40px] top-[140px] lh-[1.2]"
|
||||
>
|
||||
<!-- 优先显示临时输入字符串，如果为空，则显示默认或已确认的值 -->
|
||||
<div>{{ state.频率状态.输入状态.选中的频率菜单列表的项目 }}</div>
|
||||
@ -328,38 +344,40 @@ const 屏幕照片 = computed(() => {
|
||||
data-box="屏幕右侧的选项卡"
|
||||
class="flex flex-col gap-y-[4px] w-[80px] text-black absolute right-0 top-0 bottom-[15px]"
|
||||
>
|
||||
<div class="h-[30px] overflow-hidden menu-item lh-[30px] text-center" data-box="菜单标题">{{ 选项卡标题 }}</div>
|
||||
<div class="h-[30px] overflow-hidden menu-item lh-[30px] text-center bg-[#AFAFAF]" data-box="菜单标题">
|
||||
{{ 选项卡标题 }}
|
||||
</div>
|
||||
|
||||
<ul
|
||||
v-if="state.选项卡当前显示 === E_选项卡菜单.频率菜单列表"
|
||||
class="h-[300px] flex flex-col justify-around gap-y-[4px]"
|
||||
data-box="FreqChannel菜单列表"
|
||||
data-box="频率菜单列表"
|
||||
>
|
||||
<li class="flex-1 menu-item flex flex-col gap-y-[0px] lh-[1.2]">
|
||||
<li class="flex-1 menu-item flex flex-col gap-y-[0px] lh-[1.2] overflow-hidden bg-[#AFAFAF]">
|
||||
<span>Center Freq</span>
|
||||
<span>{{ state.频率状态.center.value }} {{ state.频率状态.center.unit }}</span>
|
||||
</li>
|
||||
<li class="flex-1 menu-item flex flex-col gap-y-[0px] lh-[1.2]">
|
||||
<li class="flex-1 menu-item flex flex-col gap-y-[0px] lh-[1.2] overflow-hidden bg-[#AFAFAF]">
|
||||
<span>Start Freq</span>
|
||||
<span>{{ state.频率状态.start.value }} {{ state.频率状态.start.unit }}</span>
|
||||
</li>
|
||||
<li class="flex-1 menu-item flex flex-col gap-y-[0px] lh-[1.2]">
|
||||
<li class="flex-1 menu-item flex flex-col gap-y-[0px] lh-[1.2] overflow-hidden bg-[#AFAFAF]">
|
||||
<span>Stop Freq</span>
|
||||
<span>{{ state.频率状态.stop.value }} {{ state.频率状态.stop.unit }}</span>
|
||||
</li>
|
||||
<li class="flex-1 menu-item flex flex-col gap-y-[0px] lh-[1.2]">
|
||||
<li class="flex-1 menu-item flex flex-col gap-y-[0px] lh-[1.2] overflow-hidden bg-[#AFAFAF]">
|
||||
<span>#CF Step</span>
|
||||
<span>0.0000 hz</span>
|
||||
<span>X</span>
|
||||
</li>
|
||||
<li class="flex-1 menu-item flex flex-col gap-y-[0px] lh-[1.2]">
|
||||
<li class="flex-1 menu-item flex flex-col gap-y-[0px] lh-[1.2] overflow-hidden bg-[#AFAFAF]">
|
||||
<span>#Freq Offset</span>
|
||||
<span>0.0000 Hz</span>
|
||||
</li>
|
||||
<li class="flex-1 menu-item flex flex-col gap-y-[0px] lh-[1.2]">
|
||||
<li class="flex-1 menu-item flex flex-col gap-y-[0px] lh-[1.2] overflow-hidden bg-[#AFAFAF]">
|
||||
<span>#Singnal Track</span>
|
||||
</li>
|
||||
<li class="flex-1 menu-item flex flex-col gap-y-[0px] lh-[1.2]">
|
||||
<li class="flex-1 menu-item flex flex-col gap-y-[0px] lh-[1.2] overflow-hidden bg-[#AFAFAF]">
|
||||
<span>#Scale Type</span>
|
||||
</li>
|
||||
</ul>
|
||||
@ -369,37 +387,36 @@ const 屏幕照片 = computed(() => {
|
||||
class="flex-1 flex flex-col justify-around gap-y-[4px]"
|
||||
data-box="FreqChannel单位列表"
|
||||
>
|
||||
<li class="flex-1 menu-item flex flex-col gap-y-[0px] lh-[1.2]">
|
||||
<li class="flex-1 menu-item flex flex-col gap-y-[0px] lh-[1.2] overflow-hidden bg-[#AFAFAF]">
|
||||
<span>GHz</span>
|
||||
</li>
|
||||
<li class="flex-1 menu-item flex flex-col gap-y-[0px] lh-[1.2]">
|
||||
<li class="flex-1 menu-item flex flex-col gap-y-[0px] lh-[1.2] overflow-hidden bg-[#AFAFAF]">
|
||||
<span>MHz</span>
|
||||
</li>
|
||||
<li class="flex-1 menu-item flex flex-col gap-y-[0px] lh-[1.2]">
|
||||
<li class="flex-1 menu-item flex flex-col gap-y-[0px] lh-[1.2] overflow-hidden bg-[#AFAFAF]">
|
||||
<span>KHz</span>
|
||||
</li>
|
||||
<li class="flex-1 menu-item flex flex-col gap-y-[0px] lh-[1.2]">
|
||||
<li class="flex-1 menu-item flex flex-col gap-y-[0px] lh-[1.2] overflow-hidden bg-[#AFAFAF]">
|
||||
<span>Hz</span>
|
||||
</li>
|
||||
<li class="flex-1 menu-item flex flex-col gap-y-[0px] lh-[1.2]"></li>
|
||||
<li class="flex-1 menu-item flex flex-col gap-y-[0px] lh-[1.2]"></li>
|
||||
<li class="flex-1 menu-item flex flex-col gap-y-[0px] lh-[1.2]"></li>
|
||||
<li class="flex-1 menu-item flex flex-col gap-y-[0px] lh-[1.2] overflow-hidden bg-[#AFAFAF]"></li>
|
||||
<li class="flex-1 menu-item flex flex-col gap-y-[0px] lh-[1.2] overflow-hidden bg-[#AFAFAF]"></li>
|
||||
<li class="flex-1 menu-item flex flex-col gap-y-[0px] lh-[1.2] overflow-hidden bg-[#AFAFAF]"></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="absolute top-[120px] left-[768px] ppy-btns h-[415px]" data-box="按键">
|
||||
<div class="absolute top-[120px] left-[768px] ppy-btns h-[415px] overflow-visible!" data-box="机器右边按键">
|
||||
<!-- 左上角. 长的 -->
|
||||
<div class="flex flex-col gap-y-[18px]">
|
||||
<div class="flex flex-col gap-y-[18px] overflow-visible!">
|
||||
<button class="ppy-btn w-[62px]!">Freq<br />Channel</button>
|
||||
<button class="ppy-btn w-[62px]!">#</button
|
||||
><!-- SPAN<br />X Scale -->
|
||||
<button class="ppy-btn w-[62px]!">#</button>
|
||||
<button class="ppy-btn w-[62px]!">#</button>
|
||||
<button class="ppy-btn w-[62px]!">#</button>
|
||||
<button class="ppy-btn w-[62px]! opacity-0">#</button>
|
||||
<!-- SPAN<br />X Scale -->
|
||||
<button class="ppy-btn w-[62px]! opacity-0">#</button>
|
||||
<button class="ppy-btn w-[62px]! opacity-0">#</button>
|
||||
<button class="ppy-btn w-[62px]! opacity-0">#</button>
|
||||
</div>
|
||||
<!-- 数字键盘区域 -->
|
||||
<div class="grid grid-cols-3 gap-[16.5px] mt-[20px]">
|
||||
<div class="grid grid-cols-3 gap-[16.5px] mt-[20px] overflow-visible!" data-box="数字键盘区域">
|
||||
<button @click="执行点击数字按钮(E_数字键盘按键.Num7)" class="ppy-btn">7</button>
|
||||
<button @click="执行点击数字按钮(E_数字键盘按键.Num8)" class="ppy-btn">8</button>
|
||||
<button @click="执行点击数字按钮(E_数字键盘按键.Num9)" class="ppy-btn">9</button>
|
||||
@ -422,11 +439,11 @@ const 屏幕照片 = computed(() => {
|
||||
.wrp {
|
||||
font-family: 'Helvetica Custom';
|
||||
}
|
||||
.wrp * {
|
||||
/* .wrp * {
|
||||
overflow: hidden;
|
||||
}
|
||||
} */
|
||||
|
||||
img {
|
||||
img[alt='频谱仪设备'] {
|
||||
width: calc(2554px * 0.5);
|
||||
height: calc(1626px * 0.5);
|
||||
max-width: fit-content;
|
||||
@ -443,10 +460,35 @@ img {
|
||||
line-height: 1.2;
|
||||
padding-left: 2px;
|
||||
border-radius: 4px;
|
||||
|
||||
text-decoration: none;
|
||||
display: flex; /* 使用 flex 居中文本 */
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
/* width: 100%; */ /* 宽度占满 grid 单元格 */
|
||||
/* height: 100%; */ /* 高度占满 grid 单元格 */
|
||||
background-color: #e0e0e0; /* 按钮浅灰色背景 */
|
||||
color: #333333; /* 深灰色文字 */
|
||||
/* font-size: 20px; */ /* 调整字体大小 */
|
||||
/* font-weight: bold; */ /* 字体加粗 */
|
||||
/* border-radius: 4px; */ /* 按钮圆角 */
|
||||
border: 1px solid #b0b0b0; /* 添加边框 */
|
||||
box-shadow:
|
||||
1px 1px 2px rgba(0, 0, 0, 0.2),
|
||||
/* 轻微外阴影 */ -1px -1px 2px rgba(255, 255, 255, 0.8); /* 轻微外高光 */
|
||||
transition: all 0.1s ease-in-out; /* 平滑过渡效果 */
|
||||
}
|
||||
.ppy-btn:active {
|
||||
background-color: #d5d5d5;
|
||||
box-shadow:
|
||||
inset 1px 1px 3px rgba(0, 0, 0, 0.3),
|
||||
inset -1px -1px 3px rgba(255, 255, 255, 0.6);
|
||||
border-color: #a0a0a0;
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
@apply bg-gray-200/50 p-[2px] rounded-[2px];
|
||||
/* @apply bg-gray-200/50 p-[2px]; */
|
||||
font-size: 12px;
|
||||
/* border: 1px solid white; */
|
||||
}
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 204 KiB After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 938 B After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 14 KiB |
BIN
src/components/PinPuYi/imgs/屏幕_3.png
Normal file
BIN
src/components/PinPuYi/imgs/屏幕_3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 MiB After Width: | Height: | Size: 810 KiB |
Reference in New Issue
Block a user