SikongJueluo/FPGA_WebLab
Archived
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style: pretty frontend chip vue

Browse Source 
feat: fronten add boundary scan to APIClient
This commit is contained in:
SikongJueluo
2025-05-18 23:33:08 +08:00
parent 4885447c2b
commit 2a3ef1ea7d
2 changed files with 149 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
src/components/equipments/PG2L100H_FBG676.vue
View File

@@ -1,36 +1,22 @@
<template>
<div class="chip-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 400 400"
class="fbg676-chip"
> <!-- 芯片外边框 - 用多段path代替rect，这样可以实现缺角 -->
<path
d="M30,0 H390 Q400,0 400,10 V390 Q400,400 390,400 H10 Q0,400 0,390 V30 L30,0 Z"
fill="#1C4E2D"
/>
<div class="chip-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 400 400" class="fbg676-chip">
<!-- 芯片外边框 - 用多段path代替rect，这样可以实现缺角 -->
<path d="M30,0 H390 Q400,0 400,10 V390 Q400,400 390,400 H10 Q0,400 0,390 V30 L30,0 Z" fill="#1C4E2D" />
<!-- 芯片内层 - 增大尺寸 -->
<rect width="280" height="280" x="60" y="60" fill="#0F1211" rx="2" ry="2" />
</svg>
<!-- 渲染芯片引脚 --> <div v-for="pin in computedPins" :key="pin.pinId"
:style="{
position: 'absolute',
left: `${(pin.x || 0) * props.size * 0.37}px`,
top: `${(pin.y || 0) * props.size * 0.37}px`,
transform: 'translate(-50%, -50%)'
}"
:data-pin-wrapper="`${pin.pinId}`"
:data-pin-x="`${(pin.x || 0) * props.size * 0.37}`"
:data-pin-y="`${(pin.y || 0) * props.size * 0.37}`"> <Pin
:ref="el => { if(el) pinRefs[pin.pinId] = el }"
:label="pin.pinId"
:constraint="pin.constraint"
:pinId="pin.pinId"
:size="0.35"
@pin-click="$emit('pin-click', $event)"
/>
<!-- 渲染芯片引脚 -->
<div v-for="pin in computedPins" :key="pin.pinId" :style="{
position: 'absolute',
left: `${(pin.x || 0) * props.size * 0.37}px`,
top: `${(pin.y || 0) * props.size * 0.37}px`,
transform: 'translate(-50%, -50%)'
}" :data-pin-wrapper="`${pin.pinId}`" :data-pin-x="`${(pin.x || 0) * props.size * 0.37}`"
:data-pin-y="`${(pin.y || 0) * props.size * 0.37}`">
<Pin :ref="el => { if (el) pinRefs[pin.pinId] = el }" :label="pin.pinId" :constraint="pin.constraint"
:pinId="pin.pinId" :size="0.35" @pin-click="$emit('pin-click', $event)" />
</div>
</div>
</template>
@@ -74,12 +60,12 @@ const computedPins = computed(() => {
const yEnd = 400 - margin;
const xStep = (xEnd - xStart) / (pinColumns - 1);
const yStep = (yEnd - yStart) / (pinRows - 1);
// 如果提供了pins，则合并引脚信息和位置信息
if (props.pins && props.pins.length > 0) {
// 复制一份提供的pins
const mergedPins = [...props.pins];
// 对于不包含xy坐标的引脚，生成默认的xy坐标
for (let i = 0; i < mergedPins.length; i++) {
const pin = mergedPins[i];
@@ -87,19 +73,19 @@ const computedPins = computed(() => {
if (pin.x === undefined || pin.y === undefined) {
const row = Math.floor(i / pinColumns);
const col = i % pinColumns;
pin.x = xStart + col * xStep;
pin.y = yStart + row * yStep;
}
}
return mergedPins;
}
// 否则生成默认的676个引脚，按BGA格式矩阵排列
const pins = [];
let pinIndex = 0;
// 生成BGA封装的矩阵引脚
// 生成BGA封装的矩阵引脚
for (let row = 0; row < pinRows; row++) {
for (let col = 0; col < pinColumns; col++) {
pins.push({
@@ -110,7 +96,7 @@ const computedPins = computed(() => {
});
}
}
return pins;
});
@@ -120,17 +106,17 @@ defineExpose({
direction: 'inout',
type: 'digital',
pins: computedPins.value
}),
}),
getPinPosition: (pinId: string) => {
// 返回指定引脚ID的位置
if (computedPins.value && computedPins.value.length > 0) {
const customPin = computedPins.value.find(p => p.pinId === pinId);
if (customPin && customPin.x !== undefined && customPin.y !== undefined) {
// 考虑组件尺寸的缩放，应用0.37的系数确保居中对齐
const scaledX = customPin.x * props.size * 0.37;
const scaledY = customPin.y * props.size * 0.37;
return {
x: scaledX,
y: scaledY