FPGA_WebLab/src/components/equipments/MotherBoardCaps.vue

134 lines
4.4 KiB
Vue

<template>
<div>
<h1 class="font-bold text-center text-2xl">Jtag</h1>
<div class="flex flex-col">
<p class="grow">Jtag Addr: {{ eqps.boardAddr }}</p>
<p class="grow">Jtag Port: {{ eqps.boardPort.toString() }}</p>
<div class="flex justify-between grow">
<p>
IDCode: 0x{{ jtagIDCode.toString(16).padStart(8, "0").toUpperCase() }}
</p>
<button class="btn btn-circle w-6 h-6" :disabled="isGettingIDCode" :onclick="getIDCode">
<RefreshCcwIcon class="icon" :class="{ 'animate-spin': isGettingIDCode }" />
</button>
</div>
</div>
<div class="divider"></div>
<UploadCard class="bg-base-200" :upload-event="eqps.jtagUploadBitstream"
:download-event="eqps.jtagDownloadBitstream" :bitstream-file="eqps.jtagBitstream"
@update:bitstream-file="handleBitstreamChange">
</UploadCard>
<div class="divider"></div>
<div class="w-full">
<legend class="fieldset-legend text-sm mb-0.3">Jtag运行频率</legend>
<select class="select w-full" @change="handleSelectJtagSpeed" :value="props.jtagFreq">
<option v-for="option in selectJtagSpeedOptions" :value="option.id">
{{ option.text }}
</option>
</select>
</div>
<div class="flex flex-row items-center">
<fieldset class="fieldset w-70">
<legend class="fieldset-legend text-sm">边界扫描刷新率 / Hz</legend>
<input type="number" class="input validator" required placeholder="Type a number between 1 to 1000" min="1"
max="1000" v-model="jtagBoundaryScanFreq" title="Type a number between 1 to 1000" />
<p class="validator-hint">输入一个1 ~ 1000的数</p>
</fieldset>
<button class="btn btn-primary grow mx-4" :class="eqps.enableJtagBoundaryScan ? '' : 'btn-soft'"
:onclick="toggleJtagBoundaryScan">
{{ eqps.enableJtagBoundaryScan ? "关闭边界扫描" : "启动边界扫描" }}
</button>
</div>
<div class="divider"></div>
<h1 class="font-bold text-center text-2xl">外设</h1>
<div class="flex flex-row justify-center">
<div class="flex flex-row">
<input type="checkbox" class="checkbox" :checked="eqps.enableMatrixKey"
@change="handleMatrixkeyCheckboxChange" />
<p class="mx-2">启用矩阵键盘</p>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import z from "zod";
import UploadCard from "@/components/UploadCard.vue";
import { useDialogStore } from "@/stores/dialog";
import { useEquipments } from "@/stores/equipments";
import { computed, ref, watchEffect } from "vue";
import { RefreshCcwIcon } from "lucide-vue-next";
interface CapsProps {
jtagFreq?: string;
}
const emits = defineEmits<{
changeJtagFreq: [text: string];
}>();
const props = withDefaults(defineProps<CapsProps>(), {});
const selectJtagSpeedOptions = ref([
{ text: "25 MHz", id: 1 },
{ text: "12.5 MHz", id: 2 },
{ text: "6.25 MHz", id: 3 },
{ text: "3.125 MHz", id: 4 },
{ text: "1562.5 KHz", id: 5 },
{ text: "781.25 KHz", id: 6 },
{ text: "390.625 KHz", id: 7 },
]);
// Global Stores
const dialog = useDialogStore();
const eqps = useEquipments();
const jtagBoundaryScanFreq = computed({
get: () => eqps.jtagBoundaryScanFreq,
set: (val) => {
if (z.number().positive().max(1000).safeParse(val).success)
eqps.jtagBoundaryScanFreq = val;
},
});
// 使用传入的属性或默认值
const jtagIDCode = ref(0xffff_ffff);
function handleBitstreamChange(file: File | undefined) {
eqps.jtagBitstream = file;
}
function handleSelectJtagSpeed(event: Event) {
const target = event.target as HTMLSelectElement;
eqps.jtagSetSpeed(target.selectedIndex);
emits("changeJtagFreq", target.value);
}
async function handleMatrixkeyCheckboxChange(event: Event) {
const target = event.target as HTMLInputElement;
if (target.checked) {
const ret = await eqps.matrixKeypadEnable(true);
if (!ret) {
}
} else {
const ret = await eqps.matrixKeypadEnable(false);
if (!ret) {
}
}
}
async function toggleJtagBoundaryScan() {
eqps.enableJtagBoundaryScan = !eqps.enableJtagBoundaryScan;
}
const isGettingIDCode = ref(false);
async function getIDCode(isQuiet: boolean = false) {
isGettingIDCode.value = true;
jtagIDCode.value = await eqps.jtagGetIDCode(isQuiet);
isGettingIDCode.value = false;
}
</script>
<style scoped lang="postcss">
@import "@/assets/main.css";
</style>