add: AdminView and remote update view
This commit is contained in:
alivender
parent
099d44663d
commit
21197887cd
|
|
@ -5,6 +5,7 @@ import TestView from "../views/TestView.vue";
|
||||||
import JtagTest from "../views/JtagTest.vue";
|
import JtagTest from "../views/JtagTest.vue";
|
||||||
import ProjectView from "../views/ProjectView.vue";
|
import ProjectView from "../views/ProjectView.vue";
|
||||||
import HomeView from "@/views/HomeView.vue";
|
import HomeView from "@/views/HomeView.vue";
|
||||||
|
import AdminView from "@/views/AdminView.vue";
|
||||||
|
|
||||||
const routes = [
|
const routes = [
|
||||||
{ path: "/", name: "Home", component: HomeView },
|
{ path: "/", name: "Home", component: HomeView },
|
||||||
|
|
@ -13,6 +14,7 @@ const routes = [
|
||||||
{ path: "/test", name: "Test", component: TestView },
|
{ path: "/test", name: "Test", component: TestView },
|
||||||
{ path: "/test/jtag", name: "JtagTest", component: JtagTest },
|
{ path: "/test/jtag", name: "JtagTest", component: JtagTest },
|
||||||
{ path: "/project", name: "Project", component: ProjectView },
|
{ path: "/project", name: "Project", component: ProjectView },
|
||||||
|
{ path: "/admin", name: "Admin", component: AdminView },
|
||||||
];
|
];
|
||||||
|
|
||||||
const router = createRouter({
|
const router = createRouter({
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,130 @@
|
||||||
|
<template>
|
||||||
|
<div class="bg-base-200 min-h-screen p-6">
|
||||||
|
<h1 class="text-3xl font-bold mb-6">FPGA 设备管理</h1>
|
||||||
|
|
||||||
|
<div class="card bg-base-100 shadow-xl">
|
||||||
|
<div class="card-body">
|
||||||
|
<h2 class="card-title mb-4">IP 地址列表</h2>
|
||||||
|
|
||||||
|
<div class="overflow-x-auto">
|
||||||
|
<table class="table w-full">
|
||||||
|
<!-- 表头 -->
|
||||||
|
<thead>
|
||||||
|
<tr class="bg-base-300">
|
||||||
|
<th>IP 地址</th>
|
||||||
|
<th>版本号</th>
|
||||||
|
<th>默认启动位流</th>
|
||||||
|
<th>黄金位流</th>
|
||||||
|
<th>应用位流1</th>
|
||||||
|
<th>应用位流2</th>
|
||||||
|
<th>应用位流3</th>
|
||||||
|
<th>操作</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
|
||||||
|
<!-- 表格内容 -->
|
||||||
|
<tbody>
|
||||||
|
<tr class="hover">
|
||||||
|
<td class="font-medium">192.168.1.100</td>
|
||||||
|
<td>v1.2.3</td>
|
||||||
|
<td>
|
||||||
|
<select class="select select-bordered w-full max-w-xs">
|
||||||
|
<option selected>黄金位流</option>
|
||||||
|
<option>应用位流1</option>
|
||||||
|
<option>应用位流2</option>
|
||||||
|
<option>应用位流3</option>
|
||||||
|
</select>
|
||||||
|
</td>
|
||||||
|
<!-- 黄金位流上传区 -->
|
||||||
|
<td>
|
||||||
|
<div class="flex flex-col items-center gap-2">
|
||||||
|
<label class="btn btn-outline btn-primary">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
|
||||||
|
</svg>
|
||||||
|
<input type="file" class="hidden" @change="handleFileChange($event, goldBitstreamFile)" />
|
||||||
|
</label>
|
||||||
|
<span class="text-xs text-primary truncate max-w-32" v-if="goldBitstreamFile">{{ goldBitstreamFile }}</span>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<!-- 应用位流1上传区 -->
|
||||||
|
<td>
|
||||||
|
<div class="flex flex-col items-center gap-2">
|
||||||
|
<label class="btn btn-outline btn-secondary">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
|
||||||
|
</svg>
|
||||||
|
<input type="file" class="hidden" @change="handleFileChange($event, appBitstream1File)" />
|
||||||
|
</label>
|
||||||
|
<span class="text-xs text-secondary truncate max-w-32" v-if="appBitstream1File">{{ appBitstream1File }}</span>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<!-- 应用位流2上传区 -->
|
||||||
|
<td>
|
||||||
|
<div class="flex flex-col items-center gap-2">
|
||||||
|
<label class="btn btn-outline btn-accent">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
|
||||||
|
</svg>
|
||||||
|
<input type="file" class="hidden" @change="handleFileChange($event, appBitstream2File)" />
|
||||||
|
</label>
|
||||||
|
<span class="text-xs text-accent truncate max-w-32" v-if="appBitstream2File">{{ appBitstream2File }}</span>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<!-- 应用位流3上传区 -->
|
||||||
|
<td>
|
||||||
|
<div class="flex flex-col items-center gap-2">
|
||||||
|
<label class="btn btn-outline btn-info">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
|
||||||
|
</svg>
|
||||||
|
<input type="file" class="hidden" @change="handleFileChange($event, appBitstream3File)" />
|
||||||
|
</label>
|
||||||
|
<span class="text-xs text-info truncate max-w-32" v-if="appBitstream3File">{{ appBitstream3File }}</span>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<!-- 操作按钮 -->
|
||||||
|
<td class="flex gap-2">
|
||||||
|
<button class="btn btn-sm btn-warning">固化</button>
|
||||||
|
<button class="btn btn-sm btn-success">切换并热启动</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-6 bg-base-300 p-4 rounded-lg">
|
||||||
|
<p class="text-sm opacity-80">
|
||||||
|
<span class="font-semibold text-warning">提示：</span>
|
||||||
|
请谨慎操作FPGA固化和热启动功能，确保上传的位流文件无误，以避免设备损坏。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
// 存储上传文件的信息
|
||||||
|
const goldBitstreamFile = ref<string>('');
|
||||||
|
const appBitstream1File = ref<string>('');
|
||||||
|
const appBitstream2File = ref<string>('');
|
||||||
|
const appBitstream3File = ref<string>('');
|
||||||
|
|
||||||
|
// 处理文件上传
|
||||||
|
function handleFileChange(event: Event, fileRef: any) {
|
||||||
|
const target = event.target as HTMLInputElement;
|
||||||
|
const file = target.files?.[0];
|
||||||
|
|
||||||
|
if (file) {
|
||||||
|
fileRef.value = file.name;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="postcss">
|
||||||
|
@import "../assets/main.css";
|
||||||
|
</style>
|
||||||
|
|
@ -52,7 +52,6 @@
|
||||||
</svg>
|
</svg>
|
||||||
测试功能
|
测试功能
|
||||||
</router-link>
|
</router-link>
|
||||||
|
|
||||||
<router-link to="/test/jtag" class="btn btn-warning text-base-100 shadow-lg transform transition-all duration-300 hover:scale-105 hover:shadow-xl hover:-translate-y-1">
|
<router-link to="/test/jtag" class="btn btn-warning text-base-100 shadow-lg transform transition-all duration-300 hover:scale-105 hover:shadow-xl hover:-translate-y-1">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
<rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect>
|
<rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect>
|
||||||
|
|
@ -61,6 +60,14 @@
|
||||||
</svg>
|
</svg>
|
||||||
JTAG测试
|
JTAG测试
|
||||||
</router-link>
|
</router-link>
|
||||||
|
|
||||||
|
<router-link to="/admin" class="btn btn-error text-base-100 shadow-lg transform transition-all duration-300 hover:scale-105 hover:shadow-xl hover:-translate-y-1">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5z"></path>
|
||||||
|
<circle cx="12" cy="12" r="3"></circle>
|
||||||
|
</svg>
|
||||||
|
管理控制台
|
||||||
|
</router-link>
|
||||||
</div>
|
</div>
|
||||||
<div class="mt-8 p-4 bg-base-300 rounded-lg shadow-inner opacity-80 transition-all duration-300 hover:opacity-100 hover:shadow-md">
|
<div class="mt-8 p-4 bg-base-300 rounded-lg shadow-inner opacity-80 transition-all duration-300 hover:opacity-100 hover:shadow-md">
|
||||||
<p class="text-sm">
|
<p class="text-sm">
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue