FPGA_WebLab/src/views/TestView.vue

108 lines
3.2 KiB
Vue

<template>
<div class="flex w-screen h-screen justify-center">
<div class="flex flex-col w-3/5 h-screen shadow-2xl p-10">
<div class="flex justify-center">
<h1 class="font-bold text-3xl">Jtag 下载</h1>
</div>
<div class="divider"></div>
<div class="w-full">
<div class="collapse bg-primary">
<input type="checkbox" />
<div class="collapse-title font-semibold text-lg text-white">
自定义开发板参数
</div>
<div class="collapse-content bg-primary-content text-sm">
<div class="form-control w-full my-3">
<label class="label">
<span class="label-text text-gray-700">开发板IP地址</span>
</label>
<label class="input w-full">
<img class="h-[1em] opacity-50" src="@/assets/pwd.svg" alt="User img" />
<input type="text" class="grow" placeholder="IP地址" v-model="boardAddress" />
</label>
</div>
<div class="form-control w-full my-3">
<label class="label">
<span class="label-text text-gray-700">开发板端口号</span>
</label>
<label class="input w-full">
<img class="h-[1em] opacity-50" src="@/assets/pwd.svg" alt="User img" />
<input type="text" class="grow" placeholder="端口号" v-model="boardPort" />
</label>
</div>
</div>
</div>
</div>
<div class="divider"></div>
<UploadCard :upload-event="uploadBitstream" :download-event="downloadBitstream">
</UploadCard>
</div>
</div>
</template>
<script setup lang="ts">
import { JtagClient, type FileParameter } from "@/APIClient";
import UploadCard from "@/components/UploadCard.vue";
import { useDialogStore } from "@/stores/dialog";
import { toNumber } from "lodash";
import { ref } from "vue";
const jtagController = new JtagClient();
const dialog = useDialogStore();
// Models with default values
const boardAddress = ref("127.0.0.1"); // 默认IP地址
const boardPort = ref("1234"); // 默认端口号
async function uploadBitstream(event: Event, bitstream: File) {
if (boardAddress.value.length == 0) {
dialog.error("开发板地址空缺");
return;
}
if (boardPort.value.length == 0) {
dialog.error("开发板端口空缺");
return;
}
const fileParam: FileParameter = {
data: bitstream,
fileName: bitstream.name,
};
try {
const resp = await jtagController.uploadBitstream(
boardAddress.value,
fileParam,
);
return resp
} catch (e) {
dialog.error("上传错误");
}
}
async function downloadBitstream() {
if (boardAddress.value.length == 0) {
dialog.error("开发板地址空缺");
return;
}
if (boardPort.value.length == 0) {
dialog.error("开发板端口空缺");
return;
}
try {
const resp = await jtagController.downloadBitstream(
boardAddress.value,
toNumber(boardPort.value),
);
return resp;
} catch (e) {
dialog.error("上传错误");
console.error(e);
}
}
</script>
<style scoped lang="postcss">
@import "../assets/main.css";
</style>