103 lines
2.3 KiB
Vue
103 lines
2.3 KiB
Vue
<template>
|
||
<div
|
||
class="motherboard-container"
|
||
v-bind="$attrs"
|
||
: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>
|
||
<Teleport
|
||
to="#ComponentCapabilities"
|
||
v-if="selectecComponentID === props.componentId"
|
||
>
|
||
<MotherBoardCaps :jtagFreq="jtagFreq" :exam-id="examId" @change-jtag-freq="changeJtagFreq" />
|
||
</Teleport>
|
||
</template>
|
||
|
||
<script setup lang="tsx">
|
||
import MotherBoardCaps from "./MotherBoardCaps.vue";
|
||
import { ref, computed, inject } from "vue";
|
||
import { CanvasCurrentSelectedComponentID } from "../InjectKeys";
|
||
import { toNumber } from "lodash";
|
||
|
||
// 主板特有属性
|
||
export interface MotherBoardProps {
|
||
size: number;
|
||
componentId?: string;
|
||
examId?: string; // 新增examId属性
|
||
}
|
||
|
||
const emit = defineEmits<{
|
||
(e: "pinClick", pinId: string): void;
|
||
}>();
|
||
|
||
const props = withDefaults(defineProps<MotherBoardProps>(), getDefaultProps());
|
||
const selectecComponentID = inject(CanvasCurrentSelectedComponentID, ref(null));
|
||
|
||
const jtagFreq = ref("25 MHz");
|
||
function changeJtagFreq(text: string) {
|
||
jtagFreq.value = text;
|
||
}
|
||
|
||
// 计算实际宽高
|
||
const width = computed(() => 800 * props.size);
|
||
const height = computed(() => 600 * props.size);
|
||
|
||
// 向外暴露方法
|
||
defineExpose({
|
||
getInfo: () => ({
|
||
size: props.size,
|
||
type: "motherboard",
|
||
}),
|
||
// 主板没有引脚，但为了接口一致性，提供一个空的getPinPosition方法
|
||
getPinPosition: () => null,
|
||
});
|
||
</script>
|
||
|
||
<script lang="tsx">
|
||
// 添加一个静态方法来获取默认props
|
||
export function getDefaultProps(): MotherBoardProps {
|
||
return {
|
||
size: 1,
|
||
};
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.motherboard-container {
|
||
display: block;
|
||
position: relative;
|
||
user-select: none;
|
||
-webkit-user-select: none;
|
||
/* Safari */
|
||
-moz-user-select: none;
|
||
/* Firefox */
|
||
-ms-user-select: none;
|
||
/* IE/Edge */
|
||
}
|
||
|
||
.motherboard-svg {
|
||
width: 100%;
|
||
height: 100%;
|
||
pointer-events: none;
|
||
/* 禁止鼠标交互 */
|
||
}
|
||
</style>
|