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

140
src/APIClient.ts
View File

@@ -593,11 +593,10 @@ export class JtagClient {
* [TODO:description]
* @param address (optional) [TODO:parameter]
* @param port (optional) [TODO:parameter]
* @param portNum (optional) [TODO:parameter]
* @return [TODO:return]
*/
boundaryScan(address: string | undefined, port: number | undefined, portNum: number | undefined): Promise<boolean> {
let url_ = this.baseUrl + "/api/Jtag/BoundaryScan?";
boundaryScanAllPorts(address: string | undefined, port: number | undefined): Promise<boolean> {
let url_ = this.baseUrl + "/api/Jtag/BoundaryScanAllPorts?";
if (address === null)
throw new Error("The parameter 'address' cannot be null.");
else if (address !== undefined)
@@ -606,10 +605,6 @@ export class JtagClient {
throw new Error("The parameter 'port' cannot be null.");
else if (port !== undefined)
url_ += "port=" + encodeURIComponent("" + port) + "&";
if (portNum === null)
throw new Error("The parameter 'portNum' cannot be null.");
else if (portNum !== undefined)
url_ += "portNum=" + encodeURIComponent("" + portNum) + "&";
url_ = url_.replace(/[?&]$/, "");
let options_: RequestInit = {
@@ -620,11 +615,75 @@ export class JtagClient {
};
return this.http.fetch(url_, options_).then((_response: Response) => {
return this.processBoundaryScan(_response);
return this.processBoundaryScanAllPorts(_response);
});
}
protected processBoundaryScan(response: Response): Promise<boolean> {
protected processBoundaryScanAllPorts(response: Response): Promise<boolean> {
const status = response.status;
let _headers: any = {}; if (response.headers && response.headers.forEach) { response.headers.forEach((v: any, k: any) => _headers[k] = v); };
if (status === 200) {
return response.text().then((_responseText) => {
let result200: any = null;
let resultData200 = _responseText === "" ? null : JSON.parse(_responseText, this.jsonParseReviver);
result200 = resultData200 !== undefined ? resultData200 : <any>null;
return result200;
});
} else if (status === 400) {
return response.text().then((_responseText) => {
let result400: any = null;
let resultData400 = _responseText === "" ? null : JSON.parse(_responseText, this.jsonParseReviver);
result400 = resultData400 !== undefined ? resultData400 : <any>null;
return throwException("A server side error occurred.", status, _responseText, _headers, result400);
});
} else if (status === 500) {
return response.text().then((_responseText) => {
let result500: any = null;
let resultData500 = _responseText === "" ? null : JSON.parse(_responseText, this.jsonParseReviver);
result500 = Exception.fromJS(resultData500);
return throwException("A server side error occurred.", status, _responseText, _headers, result500);
});
} else if (status !== 200 && status !== 204) {
return response.text().then((_responseText) => {
return throwException("An unexpected server error occurred.", status, _responseText, _headers);
});
}
return Promise.resolve<boolean>(null as any);
}
/**
* [TODO:description]
* @param address (optional) [TODO:parameter]
* @param port (optional) [TODO:parameter]
* @return [TODO:return]
*/
boundaryScanLogicalPorts(address: string | undefined, port: number | undefined): Promise<boolean> {
let url_ = this.baseUrl + "/api/Jtag/BoundaryScanLogicalPorts?";
if (address === null)
throw new Error("The parameter 'address' cannot be null.");
else if (address !== undefined)
url_ += "address=" + encodeURIComponent("" + address) + "&";
if (port === null)
throw new Error("The parameter 'port' cannot be null.");
else if (port !== undefined)
url_ += "port=" + encodeURIComponent("" + port) + "&";
url_ = url_.replace(/[?&]$/, "");
let options_: RequestInit = {
method: "POST",
headers: {
"Accept": "application/json"
}
};
return this.http.fetch(url_, options_).then((_response: Response) => {
return this.processBoundaryScanLogicalPorts(_response);
});
}
protected processBoundaryScanLogicalPorts(response: Response): Promise<boolean> {
const status = response.status;
let _headers: any = {}; if (response.headers && response.headers.forEach) { response.headers.forEach((v: any, k: any) => _headers[k] = v); };
if (status === 200) {
@@ -659,7 +718,7 @@ export class JtagClient {
}
}
export class RemoteUpdaterClient {
export class RemoteUpdateClient {
private http: { fetch(url: RequestInfo, init?: RequestInit): Promise<Response> };
private baseUrl: string;
protected jsonParseReviver: ((key: string, value: any) => any) | undefined = undefined;
@@ -679,7 +738,7 @@ export class RemoteUpdaterClient {
* @return 上传结果
*/
uploadBitstreams(address: string | undefined, goldenBitream: FileParameter | null | undefined, bitstream1: FileParameter | null | undefined, bitstream2: FileParameter | null | undefined, bitstream3: FileParameter | null | undefined): Promise<boolean> {
let url_ = this.baseUrl + "/api/RemoteUpdater/UploadBitstream?";
let url_ = this.baseUrl + "/api/RemoteUpdate/UploadBitstream?";
if (address === null)
throw new Error("The parameter 'address' cannot be null.");
else if (address !== undefined)
@@ -742,7 +801,7 @@ export class RemoteUpdaterClient {
* @param bitstreamNum (optional) 比特流位号
*/
updateBitstream(address: string | undefined, port: number | undefined, bitstreamNum: number | undefined): Promise<boolean> {
let url_ = this.baseUrl + "/api/RemoteUpdater/DownloadBitstream?";
let url_ = this.baseUrl + "/api/RemoteUpdate/DownloadBitstream?";
if (address === null)
throw new Error("The parameter 'address' cannot be null.");
else if (address !== undefined)
@@ -810,7 +869,7 @@ export class RemoteUpdaterClient {
* @return 总共上传比特流的数量
*/
downloadMultiBitstreams(address: string | undefined, port: number | undefined, bitstreamNum: number | null | undefined): Promise<number> {
let url_ = this.baseUrl + "/api/RemoteUpdater/DownloadMultiBitstreams?";
let url_ = this.baseUrl + "/api/RemoteUpdate/DownloadMultiBitstreams?";
if (address === null)
throw new Error("The parameter 'address' cannot be null.");
else if (address !== undefined)
@@ -876,7 +935,7 @@ export class RemoteUpdaterClient {
* @return 操作结果
*/
hotResetBitstream(address: string | undefined, port: number | undefined, bitstreamNum: number | undefined): Promise<boolean> {
let url_ = this.baseUrl + "/api/RemoteUpdater/HotResetBitstream?";
let url_ = this.baseUrl + "/api/RemoteUpdate/HotResetBitstream?";
if (address === null)
throw new Error("The parameter 'address' cannot be null.");
else if (address !== undefined)
@@ -943,7 +1002,7 @@ export class RemoteUpdaterClient {
* @return [TODO:return]
*/
getFirmwareVersion(address: string | undefined, port: number | undefined): Promise<number> {
let url_ = this.baseUrl + "/api/RemoteUpdater/GetFirmwareVersion?";
let url_ = this.baseUrl + "/api/RemoteUpdate/GetFirmwareVersion?";
if (address === null)
throw new Error("The parameter 'address' cannot be null.");
else if (address !== undefined)
@@ -1240,6 +1299,55 @@ export class DDSClient {
}
}
export class BsdlParserClient {
private http: { fetch(url: RequestInfo, init?: RequestInit): Promise<Response> };
private baseUrl: string;
protected jsonParseReviver: ((key: string, value: any) => any) | undefined = undefined;
constructor(baseUrl?: string, http?: { fetch(url: RequestInfo, init?: RequestInit): Promise<Response> }) {
this.http = http ? http : window as any;
this.baseUrl = baseUrl ?? "http://localhost:5000";
}
getBoundaryLogicalPorts(): Promise<FileResponse> {
let url_ = this.baseUrl + "/api/BsdlParser/GetBoundaryLogicalPorts";
url_ = url_.replace(/[?&]$/, "");
let options_: RequestInit = {
method: "GET",
headers: {
"Accept": "application/octet-stream"
}
};
return this.http.fetch(url_, options_).then((_response: Response) => {
return this.processGetBoundaryLogicalPorts(_response);
});
}
protected processGetBoundaryLogicalPorts(response: Response): Promise<FileResponse> {
const status = response.status;
let _headers: any = {}; if (response.headers && response.headers.forEach) { response.headers.forEach((v: any, k: any) => _headers[k] = v); };
if (status === 200 || status === 206) {
const contentDisposition = response.headers ? response.headers.get("content-disposition") : undefined;
let fileNameMatch = contentDisposition ? /filename\*=(?:(\\?['"])(.*?)\1|(?:[^\s]+'.*?')?([^;\n]*))/g.exec(contentDisposition) : undefined;
let fileName = fileNameMatch && fileNameMatch.length > 1 ? fileNameMatch[3] || fileNameMatch[2] : undefined;
if (fileName) {
fileName = decodeURIComponent(fileName);
} else {
fileNameMatch = contentDisposition ? /filename="?([^"]*?)"?(;|$)/g.exec(contentDisposition) : undefined;
fileName = fileNameMatch && fileNameMatch.length > 1 ? fileNameMatch[1] : undefined;
}
return response.blob().then(blob => { return { fileName: fileName, data: blob, status: status, headers: _headers }; });
} else if (status !== 200 && status !== 204) {
return response.text().then((_responseText) => {
return throwException("An unexpected server error occurred.", status, _responseText, _headers);
});
}
return Promise.resolve<FileResponse>(null as any);
}
}
export class DataClient {
private http: { fetch(url: RequestInfo, init?: RequestInit): Promise<Response> };
private baseUrl: string;
@@ -1710,4 +1818,4 @@ function throwException(message: string, status: number, response: string, heade
throw result;
else
throw new ApiException(message, status, response, headers, null);
}
}

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