FPGA_WebLab/src/components/equipments/MotherBoardCaps.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
      :exam-id="props.examId"
      :upload-event="eqps.jtagUploadBitstream"
      :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;
  examId?: string; // 新增examId属性
}

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.jtagBoundaryScanSetOnOff(!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>