fix: mother board reactive problem
This commit is contained in:
File diff suppressed because it is too large
Load Diff
@@ -1,25 +1,12 @@
|
||||
<template>
|
||||
<div
|
||||
class="motherboard-container"
|
||||
:style="{
|
||||
width: width + 'px',
|
||||
height: height + 'px',
|
||||
position: 'relative',
|
||||
}"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
:width="width"
|
||||
:height="height"
|
||||
:viewBox="`0 0 800 600`"
|
||||
class="motherboard-svg"
|
||||
>
|
||||
<image
|
||||
href="../equipments/svg/motherboard.svg"
|
||||
width="100%"
|
||||
height="100%"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
/>
|
||||
<div class="motherboard-container" :style="{
|
||||
width: width + 'px',
|
||||
height: height + 'px',
|
||||
position: 'relative',
|
||||
}">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" :width="width" :height="height" :viewBox="`0 0 800 600`"
|
||||
class="motherboard-svg">
|
||||
<image href="../equipments/svg/motherboard.svg" width="100%" height="100%" preserveAspectRatio="xMidYMid meet" />
|
||||
</svg>
|
||||
</div>
|
||||
</template>
|
||||
@@ -27,13 +14,13 @@
|
||||
<script setup lang="tsx">
|
||||
import MotherBoardCaps from "./MotherBoardCaps.vue";
|
||||
import { useEquipments } from "@/stores/equipments";
|
||||
import {ref, computed, defineComponent, watch } from "vue";
|
||||
import { ref, computed, defineComponent, watchEffect } from "vue";
|
||||
|
||||
// 主板特有属性
|
||||
interface MotherBoardProps {
|
||||
export interface MotherBoardProps {
|
||||
size?: number;
|
||||
jtagAddr?: string;
|
||||
jtagPort?: string;
|
||||
boardAddr?: string;
|
||||
boardPort?: string;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<MotherBoardProps>(), getDefaultProps());
|
||||
@@ -44,11 +31,11 @@ const height = computed(() => 600 * props.size);
|
||||
|
||||
const eqps = useEquipments();
|
||||
|
||||
const bitstreamFile = ref<File | null> ();
|
||||
const bitstreamFile = ref<File | null>();
|
||||
|
||||
watch([props.jtagAddr, props.jtagPort], () => {
|
||||
eqps.jtagIPAddr = props.jtagAddr;
|
||||
eqps.jtagPort = props.jtagPort;
|
||||
watchEffect(() => {
|
||||
eqps.setAddr(props.boardAddr);
|
||||
eqps.setPort(props.boardPort);
|
||||
});
|
||||
|
||||
// 向外暴露方法
|
||||
@@ -63,21 +50,11 @@ defineExpose({
|
||||
// 返回组件定义而不是直接返回JSX
|
||||
return defineComponent({
|
||||
name: "MotherBoardCaps",
|
||||
props: {
|
||||
jtagAddr: {
|
||||
type: String,
|
||||
default: props.jtagAddr,
|
||||
},
|
||||
jtagPort: {
|
||||
type: String,
|
||||
default: props.jtagPort,
|
||||
}
|
||||
},
|
||||
setup(props) {
|
||||
setup() {
|
||||
return () => (
|
||||
<MotherBoardCaps
|
||||
jtagAddr={props.jtagAddr}
|
||||
jtagPort={props.jtagPort}
|
||||
jtagAddr={eqps.boardAddr}
|
||||
jtagPort={eqps.boardPort.toString()}
|
||||
/>
|
||||
);
|
||||
},
|
||||
@@ -87,12 +64,14 @@ defineExpose({
|
||||
</script>
|
||||
|
||||
<script lang="tsx">
|
||||
const eqps = useEquipments();
|
||||
// 添加一个静态方法来获取默认props
|
||||
export function getDefaultProps() {
|
||||
export function getDefaultProps(): MotherBoardProps {
|
||||
console.log(`board监听改动: ${eqps.boardAddr}:${eqps.boardPort}`);
|
||||
return {
|
||||
size: 1,
|
||||
jtagAddr: "127.0.0.1",
|
||||
jtagPort: "1234",
|
||||
boardAddr: eqps.boardAddr,
|
||||
boardPort: eqps.boardPort.toString(),
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,31 +1,23 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1 class="font-bold text-center text-2xl">Jtag</h1>
|
||||
<div class="flex">
|
||||
<p class="grow">IDCode: {{ jtagIDCode }}</p>
|
||||
<button class="btn btn-circle w-8 h-8" :onclick="getIDCode">
|
||||
<svg
|
||||
class="icon opacity-70"
|
||||
viewBox="0 0 1024 1024"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
p-id="4865"
|
||||
width="200"
|
||||
height="200"
|
||||
>
|
||||
<path
|
||||
d="M894.481158 505.727133c0 49.589418-9.711176 97.705276-28.867468 143.007041-18.501376 43.74634-44.98454 83.031065-78.712713 116.759237-33.728172 33.728172-73.012897 60.211337-116.759237 78.712713-45.311998 19.156292-93.417623 28.877701-143.007041 28.877701s-97.695043-9.721409-142.996808-28.877701c-43.756573-18.501376-83.031065-44.98454-116.76947-78.712713-33.728172-33.728172-60.211337-73.012897-78.712713-116.759237-19.156292-45.301765-28.867468-93.417623-28.867468-143.007041 0-49.579185 9.711176-97.695043 28.867468-142.996808 18.501376-43.74634 44.98454-83.031065 78.712713-116.759237 33.738405-33.728172 73.012897-60.211337 116.76947-78.712713 45.301765-19.166525 93.40739-28.877701 142.996808-28.877701 52.925397 0 104.008842 11.010775 151.827941 32.745798 46.192042 20.977777 86.909395 50.79692 121.016191 88.608084 4.389984 4.860704 8.646937 9.854439 12.781094 14.97097l0-136.263453c0-11.307533 9.168824-20.466124 20.466124-20.466124 11.307533 0 20.466124 9.15859 20.466124 20.466124l0 183.64253c0 5.433756-2.148943 10.632151-5.986341 14.46955-3.847631 3.837398-9.046027 5.996574-14.479783 5.996574l-183.64253-0.020466c-11.307533 0-20.466124-9.168824-20.466124-20.466124 0-11.307533 9.168824-20.466124 20.466124-20.466124l132.293025 0.020466c-3.960195-4.952802-8.063653-9.782807-12.289907-14.479783-30.320563-33.605376-66.514903-60.098773-107.549481-78.753645-42.467207-19.289322-87.850837-29.072129-134.902456-29.072129-87.195921 0-169.172981 33.9533-230.816946 95.597265-61.654198 61.654198-95.597265 143.621025-95.597265 230.816946s33.943067 169.172981 95.597265 230.816946c61.643965 61.654198 143.621025 95.607498 230.816946 95.607498s169.172981-33.9533 230.816946-95.607498c61.654198-61.643965 95.597265-143.621025 95.597265-230.816946 0-11.2973 9.168824-20.466124 20.466124-20.466124C885.322567 485.261009 894.481158 494.429833 894.481158 505.727133z"
|
||||
p-id="4866"
|
||||
></path>
|
||||
</svg>
|
||||
</button>
|
||||
<div class="flex flex-col">
|
||||
<p class="grow">Jtag Addr: {{ props.jtagAddr }}</p>
|
||||
<p class="grow">Jtag Port: {{ props.jtagPort }}</p>
|
||||
<div class="flex justify-between grow">
|
||||
<p>IDCode: 0x{{ jtagIDCode.toString(16).padStart(8, "0") }}</p>
|
||||
<button class="btn btn-circle w-8 h-8" :onclick="getIDCode">
|
||||
<svg class="icon opacity-70" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
|
||||
p-id="4865" width="200" height="200">
|
||||
<path
|
||||
d="M894.481158 505.727133c0 49.589418-9.711176 97.705276-28.867468 143.007041-18.501376 43.74634-44.98454 83.031065-78.712713 116.759237-33.728172 33.728172-73.012897 60.211337-116.759237 78.712713-45.311998 19.156292-93.417623 28.877701-143.007041 28.877701s-97.695043-9.721409-142.996808-28.877701c-43.756573-18.501376-83.031065-44.98454-116.76947-78.712713-33.728172-33.728172-60.211337-73.012897-78.712713-116.759237-19.156292-45.301765-28.867468-93.417623-28.867468-143.007041 0-49.579185 9.711176-97.695043 28.867468-142.996808 18.501376-43.74634 44.98454-83.031065 78.712713-116.759237 33.738405-33.728172 73.012897-60.211337 116.76947-78.712713 45.301765-19.166525 93.40739-28.877701 142.996808-28.877701 52.925397 0 104.008842 11.010775 151.827941 32.745798 46.192042 20.977777 86.909395 50.79692 121.016191 88.608084 4.389984 4.860704 8.646937 9.854439 12.781094 14.97097l0-136.263453c0-11.307533 9.168824-20.466124 20.466124-20.466124 11.307533 0 20.466124 9.15859 20.466124 20.466124l0 183.64253c0 5.433756-2.148943 10.632151-5.986341 14.46955-3.847631 3.837398-9.046027 5.996574-14.479783 5.996574l-183.64253-0.020466c-11.307533 0-20.466124-9.168824-20.466124-20.466124 0-11.307533 9.168824-20.466124 20.466124-20.466124l132.293025 0.020466c-3.960195-4.952802-8.063653-9.782807-12.289907-14.479783-30.320563-33.605376-66.514903-60.098773-107.549481-78.753645-42.467207-19.289322-87.850837-29.072129-134.902456-29.072129-87.195921 0-169.172981 33.9533-230.816946 95.597265-61.654198 61.654198-95.597265 143.621025-95.597265 230.816946s33.943067 169.172981 95.597265 230.816946c61.643965 61.654198 143.621025 95.607498 230.816946 95.607498s169.172981-33.9533 230.816946-95.607498c61.654198-61.643965 95.597265-143.621025 95.597265-230.816946 0-11.2973 9.168824-20.466124 20.466124-20.466124C885.322567 485.261009 894.481158 494.429833 894.481158 505.727133z"
|
||||
p-id="4866"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
<UploadCard
|
||||
class="bg-base-200"
|
||||
:upload-event="uploadBitstream"
|
||||
:download-event="downloadBitstream"
|
||||
>
|
||||
<UploadCard class="bg-base-200" :upload-event="uploadBitstream" :download-event="downloadBitstream">
|
||||
</UploadCard>
|
||||
</div>
|
||||
</template>
|
||||
@@ -35,7 +27,7 @@ import { JtagClient } from "@/APIClient";
|
||||
import z from "zod";
|
||||
import UploadCard from "@/components/UploadCard.vue";
|
||||
import { useDialogStore } from "@/stores/dialog";
|
||||
import { toNumber, toString } from "lodash";
|
||||
import { isUndefined, toNumber } from "lodash";
|
||||
import { ref, computed, watch } from "vue";
|
||||
|
||||
interface CapsProps {
|
||||
@@ -43,21 +35,20 @@ interface CapsProps {
|
||||
jtagPort?: string;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<CapsProps>(), {
|
||||
jtagAddr: "127.0.0.1",
|
||||
jtagPort: "1234",
|
||||
});
|
||||
const props = withDefaults(defineProps<CapsProps>(), {});
|
||||
|
||||
const jtagController = new JtagClient();
|
||||
const dialog = useDialogStore();
|
||||
|
||||
// 使用传入的属性或默认值
|
||||
const jtagIDCode = ref("");
|
||||
const jtagIDCode = ref(0);
|
||||
const boardAddress = computed(() => props.jtagAddr);
|
||||
const boardPort = computed(() => toNumber(props.jtagPort));
|
||||
const boardPort = computed(() =>
|
||||
isUndefined(props.jtagPort) ? undefined : toNumber(props.jtagPort),
|
||||
);
|
||||
|
||||
async function uploadBitstream(event: Event, bitstream: File) {
|
||||
if (!boardAddress.value || !boardPort.value) {
|
||||
if (!isUndefined(boardAddress.value) || !isUndefined(boardPort.value)) {
|
||||
dialog.error("开发板地址或端口空缺");
|
||||
return;
|
||||
}
|
||||
@@ -115,7 +106,7 @@ async function getIDCode() {
|
||||
boardAddress.value,
|
||||
boardPort.value,
|
||||
);
|
||||
jtagIDCode.value = toString(resp);
|
||||
jtagIDCode.value = resp;
|
||||
} catch (e) {
|
||||
dialog.error("获取IDCode错误");
|
||||
console.error(e);
|
||||
|
||||
Reference in New Issue
Block a user