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

feat: frontend add boundary scan

This commit is contained in:
SikongJueluo 2025-05-19 13:30:06 +08:00
parent 2a3ef1ea7d
commit 5042bf8ce5
No known key found for this signature in database
12 changed files with 611 additions and 538 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
server/src/Controllers.cs
View File

@ -160,6 +160,7 @@ public class JtagController : ControllerBase
/// <param name="address"> 设备地址 </param> /// <param name="address"> 设备地址 </param>
/// <param name="port"> 设备端口 </param> /// <param name="port"> 设备端口 </param>
[HttpGet("GetDeviceIDCode")] [HttpGet("GetDeviceIDCode")]
[EnableCors("Users")]
[ProducesResponseType(typeof(uint), StatusCodes.Status200OK)] [ProducesResponseType(typeof(uint), StatusCodes.Status200OK)]
[ProducesResponseType(typeof(Exception), StatusCodes.Status500InternalServerError)] [ProducesResponseType(typeof(Exception), StatusCodes.Status500InternalServerError)]
public async ValueTask<IResult> GetDeviceIDCode(string address, int port) public async ValueTask<IResult> GetDeviceIDCode(string address, int port)
@ -365,7 +366,7 @@ public class JtagController : ControllerBase
/// <returns>[TODO:return]</returns> /// <returns>[TODO:return]</returns>
[HttpPost("BoundaryScanLogicalPorts")] [HttpPost("BoundaryScanLogicalPorts")]
[EnableCors("Users")] [EnableCors("Users")]
[ProducesResponseType(typeof(bool), StatusCodes.Status200OK)] [ProducesResponseType(typeof(Dictionary<string, bool>), StatusCodes.Status200OK)]
[ProducesResponseType(typeof(string), StatusCodes.Status400BadRequest)] [ProducesResponseType(typeof(string), StatusCodes.Status400BadRequest)]
[ProducesResponseType(typeof(Exception), StatusCodes.Status500InternalServerError)] [ProducesResponseType(typeof(Exception), StatusCodes.Status500InternalServerError)]
public async ValueTask<IResult> BoundaryScanLogicalPorts(string address, int port) public async ValueTask<IResult> BoundaryScanLogicalPorts(string address, int port)

18
src/APIClient.ts
View File

@ -659,7 +659,7 @@ export class JtagClient {
* @param port (optional) [TODO:parameter] * @param port (optional) [TODO:parameter]
* @return [TODO:return] * @return [TODO:return]
*/ */
boundaryScanLogicalPorts(address: string | undefined, port: number | undefined): Promise<boolean> { boundaryScanLogicalPorts(address: string | undefined, port: number | undefined): Promise<{ [key: string]: boolean; }> {
let url_ = this.baseUrl + "/api/Jtag/BoundaryScanLogicalPorts?"; let url_ = this.baseUrl + "/api/Jtag/BoundaryScanLogicalPorts?";
if (address === null) if (address === null)
throw new Error("The parameter 'address' cannot be null."); throw new Error("The parameter 'address' cannot be null.");
@ -683,15 +683,23 @@ export class JtagClient {
}); });
} }
protected processBoundaryScanLogicalPorts(response: Response): Promise<boolean> { protected processBoundaryScanLogicalPorts(response: Response): Promise<{ [key: string]: boolean; }> {
const status = response.status; const status = response.status;
let _headers: any = {}; if (response.headers && response.headers.forEach) { response.headers.forEach((v: any, k: any) => _headers[k] = v); }; let _headers: any = {}; if (response.headers && response.headers.forEach) { response.headers.forEach((v: any, k: any) => _headers[k] = v); };
if (status === 200) { if (status === 200) {
return response.text().then((_responseText) => { return response.text().then((_responseText) => {
let result200: any = null; let result200: any = null;
let resultData200 = _responseText === "" ? null : JSON.parse(_responseText, this.jsonParseReviver); let resultData200 = _responseText === "" ? null : JSON.parse(_responseText, this.jsonParseReviver);
result200 = resultData200 !== undefined ? resultData200 : <any>null; if (resultData200) {
result200 = {} as any;
for (let key in resultData200) {
if (resultData200.hasOwnProperty(key))
(<any>result200)![key] = resultData200[key] !== undefined ? resultData200[key] : <any>null;
}
}
else {
result200 = <any>null;
}
return result200; return result200;
}); });
} else if (status === 400) { } else if (status === 400) {
@ -714,7 +722,7 @@ export class JtagClient {
return throwException("An unexpected server error occurred.", status, _responseText, _headers); return throwException("An unexpected server error occurred.", status, _responseText, _headers);
}); });
} }
return Promise.resolve<boolean>(null as any); return Promise.resolve<{ [key: string]: boolean; }>(null as any);
} }
} }

187
src/components/equipments/MechanicalButton.vue
View File

@ -1,12 +1,11 @@
<template> <template>
<div class="button-container" :style="{ width: width + 'px', height: height + 'px', position: 'relative' }"> <div class="button-container" :style="{
<svg width: width + 'px',
xmlns="http://www.w3.org/2000/svg" height: height + 'px',
:width="width" position: 'relative',
:height="height" }">
viewBox="400 400 800 800" <svg xmlns="http://www.w3.org/2000/svg" :width="width" :height="height" viewBox="400 400 800 800"
class="mechanical-button" class="mechanical-button">
>
<!-- defs 和按钮底座保持不变 --> <!-- defs 和按钮底座保持不变 -->
<defs> <defs>
<filter id="btn-shadow"> <filter id="btn-shadow">
@ -26,7 +25,8 @@
<stop stop-color="#171717" offset="0" /> <stop stop-color="#171717" offset="0" />
<stop stop-color="#4b4b4b" offset="1" /> <stop stop-color="#4b4b4b" offset="1" />
</linearGradient> </linearGradient>
</defs> <!-- 按钮底座 --> </defs>
<!-- 按钮底座 -->
<rect width="800" height="800" x="400" y="400" fill="#464646" rx="20" /> <rect width="800" height="800" x="400" y="400" fill="#464646" rx="20" />
<rect width="700" height="700" x="450" y="450" fill="#eaeaea" rx="20" /> <rect width="700" height="700" x="450" y="450" fill="#eaeaea" rx="20" />
@ -38,65 +38,50 @@
<!-- 按钮主体 --> <!-- 按钮主体 -->
<circle r="220" cx="800" cy="800" fill="black" filter="url(#btn-shadow)" /> <circle r="220" cx="800" cy="800" fill="black" filter="url(#btn-shadow)" />
<circle <circle :r="btnHeight" cx="800" cy="800" :fill="isKeyPressed ? 'url(#pressed)' : 'url(#normal)'"
:r="btnHeight" fill-opacity="0.9" @mousedown="toggleButtonState(true)" @mouseup="toggleButtonState(false)"
cx="800" @mouseleave="toggleButtonState(false)" style="
cy="800" pointer-events: auto;
:fill="isKeyPressed ? 'url(#pressed)' : 'url(#normal)'" transition: all 20ms ease-in-out;
fill-opacity="0.9" cursor: pointer;
@mousedown="toggleButtonState(true)" " />
@mouseup="toggleButtonState(false)"
@mouseleave="toggleButtonState(false)"
style="pointer-events: auto; transition: all 20ms ease-in-out; cursor: pointer;"
/>
<!-- 按键文字 - 仅显示绑定的按键 --> <!-- 按键文字 - 仅显示绑定的按键 -->
<text <text v-if="bindKeyDisplay" x="800" y="800" font-size="310" text-anchor="middle" dominant-baseline="central"
v-if="bindKeyDisplay" fill="#ccc" style="
x="800" font-family: Arial;
y="800" filter: url(#btn-shadow);
font-size="310" user-select: none;
text-anchor="middle" pointer-events: none;
dominant-baseline="central" mix-blend-mode: overlay;
fill="#ccc" ">
style="font-family: Arial; filter: url(#btn-shadow); user-select: none; pointer-events: none; mix-blend-mode: overlay;"
>
{{ bindKeyDisplay }} {{ bindKeyDisplay }}
</text> </text>
</svg> </svg>
<!-- 渲染自定义引脚数组 --> <!-- 渲染自定义引脚数组 -->
<div v-for="pin in props.pins" :key="pin.pinId" <div v-for="pin in props.pins" :key="pin.pinId" :style="{
:style="{ position: 'absolute',
position: 'absolute', left: `${pin.x * props.size}px`,
left: `${pin.x * props.size}px`, top: `${pin.y * props.size}px`,
top: `${pin.y * props.size}px`, transform: 'translate(-50%, -50%)',
transform: 'translate(-50%, -50%)', zIndex: 3,
zIndex: 3, pointerEvents: 'auto',
pointerEvents: 'auto' }" :data-pin-wrapper="`${pin.pinId}`" :data-pin-x="`${pin.x * props.size}`"
}" :data-pin-y="`${pin.y * props.size}`">
:data-pin-wrapper="`${pin.pinId}`" <Pin :ref="(el) => {
:data-pin-x="`${pin.x * props.size}`" if (el) pinRefs[pin.pinId] = el;
:data-pin-y="`${pin.y * props.size}`"> }
<Pin " direction="output" type="digital" :label="pin.pinId" :constraint="pin.constraint" :pinId="pin.pinId"
:ref="el => { if(el) pinRefs[pin.pinId] = el }" :size="0.8" :componentId="props.componentId" @value-change="handlePinValueChange" @pin-click="handlePinClick" />
direction="output"
type="digital"
:label="pin.pinId"
:constraint="pin.constraint"
:pinId="pin.pinId"
:size="0.8"
:componentId="props.componentId"
@value-change="handlePinValueChange"
@pin-click="handlePinClick"
/>
</div> </div>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted, onUnmounted, computed } from 'vue'; import { ref, onMounted, onUnmounted, computed } from "vue";
import Pin from './Pin.vue'; import Pin from "./Pin.vue";
import { notifyConstraintChange } from '../../stores/constraints'; import { useConstraintsStore } from "../../stores/constraints";
const { notifyConstraintChange } = useConstraintsStore();
// 存储多个Pin引用 // 存储多个Pin引用
const pinRefs = ref<Record<string, any>>({}); const pinRefs = ref<Record<string, any>>({});
@ -116,16 +101,16 @@ interface ButtonProps {
const props = withDefaults(defineProps<ButtonProps>(), { const props = withDefaults(defineProps<ButtonProps>(), {
size: 1, size: 1,
bindKey: '', bindKey: "",
componentId: 'button-default', componentId: "button-default",
pins: () => [ pins: () => [
{ {
pinId: 'BTN', pinId: "BTN",
constraint: '', constraint: "",
x: 80, x: 80,
y: 140 y: 140,
} },
] ],
}); });
// 计算实际宽高 // 计算实际宽高
@ -133,17 +118,19 @@ const width = computed(() => 160 * props.size);
const height = computed(() => 160 * props.size); const height = computed(() => 160 * props.size);
// 显示绑定的按键 // 显示绑定的按键
const bindKeyDisplay = computed(() => props.bindKey ? props.bindKey.toUpperCase() : ''); const bindKeyDisplay = computed(() =>
props.bindKey ? props.bindKey.toUpperCase() : "",
);
// 定义组件发出的事件 // 定义组件发出的事件
const emit = defineEmits([ const emit = defineEmits([
'update:bindKey', "update:bindKey",
'update:constraint', "update:constraint",
'press', "press",
'release', "release",
'click', "click",
'value-change', "value-change",
'pin-click' "pin-click",
]); ]);
// 内部状态 // 内部状态
@ -153,12 +140,12 @@ const colorMatrix = ref("1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0");
// 处理Pin值变化 // 处理Pin值变化
function handlePinValueChange(value: any) { function handlePinValueChange(value: any) {
emit('value-change', value); emit("value-change", value);
} }
// 处理Pin点击事件 // 处理Pin点击事件
function handlePinClick(info: any) { function handlePinClick(info: any) {
emit('pin-click', info); emit("pin-click", info);
} }
// --- 按键状态逻辑 --- // --- 按键状态逻辑 ---
@ -168,24 +155,24 @@ function toggleButtonState(isPressed: boolean) {
// 发出事件通知父组件 // 发出事件通知父组件
if (isPressed) { if (isPressed) {
emit('press'); emit("press");
// 如果有约束，通知约束状态变化为高电平 // 如果有约束，通知约束状态变化为高电平
// 对所有引脚应用相同的状态 // 对所有引脚应用相同的状态
if (props.pins) { if (props.pins) {
props.pins.forEach(pin => { props.pins.forEach((pin) => {
if (pin.constraint) { if (pin.constraint) {
notifyConstraintChange(pin.constraint, 'high'); notifyConstraintChange(pin.constraint, "high");
} }
}); });
} }
} else { } else {
emit('release'); emit("release");
emit('click'); emit("click");
// 如果有约束，通知约束状态变化为低电平 // 如果有约束，通知约束状态变化为低电平
if (props.pins) { if (props.pins) {
props.pins.forEach(pin => { props.pins.forEach((pin) => {
if (pin.constraint) { if (pin.constraint) {
notifyConstraintChange(pin.constraint, 'low'); notifyConstraintChange(pin.constraint, "low");
} }
}); });
} }
@ -202,11 +189,11 @@ function handleKeyDown(event: KeyboardEvent) {
// --- 生命周期钩子 --- // --- 生命周期钩子 ---
onMounted(() => { onMounted(() => {
document.addEventListener('keydown', handleKeyDown); document.addEventListener("keydown", handleKeyDown);
}); });
onUnmounted(() => { onUnmounted(() => {
document.removeEventListener('keydown', handleKeyDown); document.removeEventListener("keydown", handleKeyDown);
}); });
// 向外暴露方法 // 向外暴露方法
@ -216,30 +203,38 @@ defineExpose({
// 按钮特有属性 // 按钮特有属性
bindKey: props.bindKey, bindKey: props.bindKey,
componentId: props.componentId, componentId: props.componentId,
pins: props.pins pins: props.pins,
}), }),
// 获取引脚位置 // 获取引脚位置
getPinPosition: (pinId: string) => { getPinPosition: (pinId: string) => {
console.log(`[MechanicalButton] 调用getPinPosition，寻找pinId: ${pinId}`); console.log(`[MechanicalButton] 调用getPinPosition，寻找pinId: ${pinId}`);
console.log(`[MechanicalButton] 组件ID: ${props.componentId}, 当前尺寸: ${props.size}, 组件宽高: ${width.value}x${height.value}`); console.log(
`[MechanicalButton] 组件ID: ${props.componentId}, 当前尺寸: ${props.size}, 组件宽高: ${width.value}x${height.value}`,
);
console.log(`[MechanicalButton] 当前存在的pins:`, props.pins); console.log(`[MechanicalButton] 当前存在的pins:`, props.pins);
// 如果是自定义的引脚ID // 如果是自定义的引脚ID
if (props.pins && props.pins.length > 0) { if (props.pins && props.pins.length > 0) {
const customPin = props.pins.find(p => p.pinId === pinId); const customPin = props.pins.find((p) => p.pinId === pinId);
if (customPin) { if (customPin) {
console.log(`[MechanicalButton] 找到自定义引脚: ${pinId}，配置位置:`, { x: customPin.x, y: customPin.y }); console.log(`[MechanicalButton] 找到自定义引脚: ${pinId}，配置位置:`, {
x: customPin.x,
y: customPin.y,
});
// 考虑组件尺寸的缩放 // 考虑组件尺寸的缩放
// 这里的x和y是针对标准尺寸（size=1）的坐标，需要根据实际size调整 // 这里的x和y是针对标准尺寸（size=1）的坐标，需要根据实际size调整
const scaledX = customPin.x * props.size; const scaledX = customPin.x * props.size;
const scaledY = customPin.y * props.size; const scaledY = customPin.y * props.size;
console.log(`[MechanicalButton] 返回缩放后的坐标:`, { x: scaledX, y: scaledY }); console.log(`[MechanicalButton] 返回缩放后的坐标:`, {
x: scaledX,
y: scaledY,
});
return { return {
x: scaledX, x: scaledX,
y: scaledY y: scaledY,
}; };
} else { } else {
console.log(`[MechanicalButton] 未找到pinId: ${pinId}的引脚配置`); console.log(`[MechanicalButton] 未找到pinId: ${pinId}的引脚配置`);
@ -249,7 +244,7 @@ defineExpose({
} }
console.log(`[MechanicalButton] 返回null，未找到引脚`); console.log(`[MechanicalButton] 返回null，未找到引脚`);
return null; return null;
} },
}); });
</script> </script>
@ -258,15 +253,15 @@ defineExpose({
export function getDefaultProps() { export function getDefaultProps() {
return { return {
size: 1, size: 1,
bindKey: '', bindKey: "",
pins: [ pins: [
{ {
pinId: 'BTN', pinId: "BTN",
constraint: '', constraint: "",
x: 80, x: 80,
y: 140 y: 140,
} },
] ],
}; };
} }
</script> </script>

1
src/components/equipments/MotherBoard.vue
View File

@ -39,6 +39,7 @@ const selectecComponentID = inject(CanvasCurrentSelectedComponentID, ref(null));
const width = computed(() => 800 * props.size); const width = computed(() => 800 * props.size);
const height = computed(() => 600 * props.size); const height = computed(() => 600 * props.size);
// Global store
const eqps = useEquipments(); const eqps = useEquipments();
const bitstreamFile = ref<File | null>(); const bitstreamFile = ref<File | null>();

43
src/components/equipments/MotherBoardCaps.vue
View File

@ -6,9 +6,9 @@
<p class="grow">Jtag Port: {{ props.jtagPort }}</p> <p class="grow">Jtag Port: {{ props.jtagPort }}</p>
<div class="flex justify-between grow"> <div class="flex justify-between grow">
<p>IDCode: 0x{{ jtagIDCode.toString(16).padStart(8, "0") }}</p> <p>IDCode: 0x{{ jtagIDCode.toString(16).padStart(8, "0") }}</p>
<button class="btn btn-circle w-8 h-8" :onclick="getIDCode"> <button class="btn btn-circle w-6 h-6" :onclick="getIDCode">
<svg class="icon opacity-70" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" <svg class="icon opacity-70 fill-primary" viewBox="0 0 1024 1024" version="1.1"
p-id="4865" width="200" height="200"> xmlns="http://www.w3.org/2000/svg" p-id="4865" width="200" height="200">
<path <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" 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> p-id="4866"></path>
@ -19,6 +19,11 @@
<div class="divider"></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> </UploadCard>
<div class="divider"></div>
<button class="btn w-full btn-primary" :class="isEnableJtagBoundaryScan ? '' : 'btn-soft'"
:onclick="toggleJtagBoundaryScan">
{{ isEnableJtagBoundaryScan ? "关闭边界扫描" : "启动边界扫描" }}
</button>
</div> </div>
</template> </template>
@ -27,6 +32,10 @@ import { JtagClient } from "@/APIClient";
import z from "zod"; import z from "zod";
import UploadCard from "@/components/UploadCard.vue"; import UploadCard from "@/components/UploadCard.vue";
import { useDialogStore } from "@/stores/dialog"; import { useDialogStore } from "@/stores/dialog";
import {
useConstraintsStore,
type ConstraintLevel,
} from "@/stores/constraints";
import { isUndefined, toNumber } from "lodash"; import { isUndefined, toNumber } from "lodash";
import { ref, computed, watch } from "vue"; import { ref, computed, watch } from "vue";
@ -37,8 +46,12 @@ interface CapsProps {
const props = withDefaults(defineProps<CapsProps>(), {}); const props = withDefaults(defineProps<CapsProps>(), {});
const jtagController = new JtagClient(); // Global Stores
const dialog = useDialogStore(); const dialog = useDialogStore();
const constrainsts = useConstraintsStore();
const jtagController = new JtagClient();
const isEnableJtagBoundaryScan = ref(false);
// 使用传入的属性或默认值 // 使用传入的属性或默认值
const jtagIDCode = ref(0); const jtagIDCode = ref(0);
@ -47,6 +60,28 @@ const boardPort = computed(() =>
isUndefined(props.jtagPort) ? undefined : toNumber(props.jtagPort), isUndefined(props.jtagPort) ? undefined : toNumber(props.jtagPort),
); );
async function toggleJtagBoundaryScan() {
isEnableJtagBoundaryScan.value = !isEnableJtagBoundaryScan.value;
if (isEnableJtagBoundaryScan.value) jtagBoundaryScan();
}
async function jtagBoundaryScan() {
try {
const portStates = await jtagController.boundaryScanLogicalPorts(
boardAddress.value,
boardPort.value,
);
constrainsts.batchSetConstraintStates(portStates);
} catch (error) {
dialog.error("边界扫描发生错误");
console.error(error);
isEnableJtagBoundaryScan.value = false;
} finally {
if (isEnableJtagBoundaryScan.value) setTimeout(jtagBoundaryScan, 100);
}
}
async function uploadBitstream(event: Event, bitstream: File) { async function uploadBitstream(event: Event, bitstream: File) {
if (!isUndefined(boardAddress.value) || !isUndefined(boardPort.value)) { if (!isUndefined(boardAddress.value) || !isUndefined(boardPort.value)) {
dialog.error("开发板地址或端口空缺"); dialog.error("开发板地址或端口空缺");

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

@ -1,6 +1,10 @@
<template> <template>
<div class="chip-container" :style="{ width: width + 'px', height: height + 'px', position: 'relative' }"> <svg <div class="chip-container" :style="{
xmlns="http://www.w3.org/2000/svg" :width="width" :height="height" viewBox="0 0 400 400" class="fbg676-chip"> 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代替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" /> <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" />
@ -12,18 +16,21 @@
position: 'absolute', position: 'absolute',
left: `${(pin.x || 0) * props.size * 0.37}px`, left: `${(pin.x || 0) * props.size * 0.37}px`,
top: `${(pin.y || 0) * props.size * 0.37}px`, top: `${(pin.y || 0) * props.size * 0.37}px`,
transform: 'translate(-50%, -50%)' transform: 'translate(-50%, -50%)',
}" :data-pin-wrapper="`${pin.pinId}`" :data-pin-x="`${(pin.x || 0) * props.size * 0.37}`" }" :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}`"> :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" <Pin :ref="(el) => {
:pinId="pin.pinId" :size="0.35" @pin-click="$emit('pin-click', $event)" /> 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>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, computed, onMounted } from 'vue'; import { ref, computed } from "vue";
import Pin from './Pin.vue'; import Pin from "./Pin.vue";
// 存储多个Pin引用 // 存储多个Pin引用
const pinRefs = ref<Record<string, any>>({}); const pinRefs = ref<Record<string, any>>({});
@ -34,14 +41,14 @@ interface ChipProps {
pins?: { pins?: {
pinId: string; pinId: string;
constraint: string; constraint: string;
x?: number; // x坐标现在是可选的 x?: number; // x坐标现在是可选的
y?: number; // y坐标现在是可选的 y?: number; // y坐标现在是可选的
}[]; }[];
} }
const props = withDefaults(defineProps<ChipProps>(), { const props = withDefaults(defineProps<ChipProps>(), {
size: 1, size: 1,
pins: () => [] pins: () => [],
}); });
// 计算尺寸 // 计算尺寸
@ -90,9 +97,9 @@ const computedPins = computed(() => {
for (let col = 0; col < pinColumns; col++) { for (let col = 0; col < pinColumns; col++) {
pins.push({ pins.push({
pinId: `pin_${pinIndex++}`, pinId: `pin_${pinIndex++}`,
constraint: '', constraint: "",
x: xStart + col * xStep, x: xStart + col * xStep,
y: yStart + row * yStep y: yStart + row * yStep,
}); });
} }
} }
@ -102,15 +109,15 @@ const computedPins = computed(() => {
defineExpose({ defineExpose({
getInfo: () => ({ getInfo: () => ({
chipType: 'PG2L100H_FBG676', chipType: "PG2L100H_FBG676",
direction: 'inout', direction: "inout",
type: 'digital', type: "digital",
pins: computedPins.value pins: computedPins.value,
}), }),
getPinPosition: (pinId: string) => { getPinPosition: (pinId: string) => {
// 返回指定引脚ID的位置 // 返回指定引脚ID的位置
if (computedPins.value && computedPins.value.length > 0) { if (computedPins.value && computedPins.value.length > 0) {
const customPin = computedPins.value.find(p => p.pinId === pinId); const customPin = computedPins.value.find((p) => p.pinId === pinId);
if (customPin && customPin.x !== undefined && customPin.y !== undefined) { if (customPin && customPin.x !== undefined && customPin.y !== undefined) {
// 考虑组件尺寸的缩放，应用0.37的系数确保居中对齐 // 考虑组件尺寸的缩放，应用0.37的系数确保居中对齐
@ -119,13 +126,13 @@ defineExpose({
return { return {
x: scaledX, x: scaledX,
y: scaledY y: scaledY,
}; };
} }
return null; return null;
} }
return null; return null;
} },
}); });
</script> </script>
@ -134,7 +141,7 @@ defineExpose({
export function getDefaultProps() { export function getDefaultProps() {
return { return {
size: 1, size: 1,
pins: [] // 默认不提供引脚，由computedPins计算生成 pins: [], // 默认不提供引脚，由computedPins计算生成
}; };
} }
</script> </script>

145
src/components/equipments/Pin.vue
View File

@ -1,30 +1,14 @@
<template> <template>
<svg <svg :width="width" :height="height" :viewBox="'0 0 ' + viewBoxWidth + ' ' + viewBoxHeight" class="pin-component">
:width="width" <g :transform="`translate(${viewBoxWidth / 2}, ${viewBoxHeight / 2})`">
:height="height"
:viewBox="'0 0 ' + viewBoxWidth + ' ' + viewBoxHeight"
class="pin-component"
> <g :transform="`translate(${viewBoxWidth/2}, ${viewBoxHeight/2})`">
<g> <g>
<g transform="translate(-12.5, -12.5)"> <!-- 添加一个透明的更大区域来增强点击能力，但比原来小一点 --> <g transform="translate(-12.5, -12.5)">
<circle <!-- 添加一个透明的更大区域来增强点击能力，但比原来小一点 -->
cx="12.5" <circle cx="12.5" cy="12.5" r="5" fill="transparent" class="interactive" @click.stop="handlePinClick"
cy="12.5" @mousedown.stop @touchstart.stop :data-pin-element="`${props.pinId}`"
r="5"
fill="transparent"
class="interactive"
@click.stop="handlePinClick"
@mousedown.stop
@touchstart.stop
:data-pin-element="`${props.pinId}`"
:data-component-id="props.componentId" /> :data-component-id="props.componentId" />
<!-- 实际可见的引脚圆点 --> <!-- 实际可见的引脚圆点 -->
<circle <circle :style="{ fill: pinColor }" cx="12.5" cy="12.5" r="3.75" pointer-events="none"
:style="{ fill: pinColor }"
cx="12.5"
cy="12.5"
r="3.75"
pointer-events="none"
:data-pin-visual="`${props.pinId}`" /> :data-pin-visual="`${props.pinId}`" />
</g> </g>
</g> </g>
@ -33,32 +17,33 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, computed, reactive, watch, onMounted, onUnmounted } from 'vue'; import { ref, computed, watch, onMounted, onUnmounted } from "vue";
import { getConstraintColor, getConstraintState, onConstraintStateChange, notifyConstraintChange } from '../../stores/constraints'; import { useConstraintsStore } from "../../stores/constraints";
const { getConstraintColor, onConstraintStateChange } = useConstraintsStore();
interface Props { interface Props {
size?: number; size?: number;
label?: string; label?: string;
constraint?: string; constraint?: string;
direction?: 'input' | 'output' | 'inout'; direction?: "input" | "output" | "inout";
type?: 'digital' | 'analog'; type?: "digital" | "analog";
pinId?: string; // 添加引脚ID属性，用于唯一标识 pinId?: string; // 添加引脚ID属性，用于唯一标识
componentId?: string; // 添加组件ID属性，关联到父组件 componentId?: string; // 添加组件ID属性，关联到父组件
} }
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {
size: 1, size: 1,
label: 'PIN', label: "PIN",
constraint: '', constraint: "",
direction: 'input', direction: "input",
type: 'digital', type: "digital",
pinId: 'pin-default', // 默认ID pinId: "pin-default", // 默认ID
componentId: '' // 默认空字符串 componentId: "", // 默认空字符串
}); });
const emit = defineEmits([ const emit = defineEmits([
'value-change', "value-change",
'pin-click' // 新增Pin点击事件 "pin-click", // 新增Pin点击事件
]); ]);
// 内部状态 // 内部状态
@ -71,15 +56,15 @@ function handlePinClick(event: MouseEvent) {
const rect = target.getBoundingClientRect(); const rect = target.getBoundingClientRect();
const pinCenter = { const pinCenter = {
x: rect.left + rect.width / 2, x: rect.left + rect.width / 2,
y: rect.top + rect.height / 2 y: rect.top + rect.height / 2,
}; };
emit('pin-click', { emit("pin-click", {
label: props.label, label: props.label,
constraint: props.constraint, constraint: props.constraint,
type: props.type, type: props.type,
direction: props.direction, direction: props.direction,
position: pinCenter, position: pinCenter,
originalEvent: event originalEvent: event,
}); });
} }
@ -89,7 +74,7 @@ const viewBoxWidth = computed(() => 15);
const viewBoxHeight = computed(() => 15); const viewBoxHeight = computed(() => 15);
const getColorByType = computed(() => { const getColorByType = computed(() => {
return props.type === 'analog' ? '#2a6099' : '#444'; return props.type === "analog" ? "#2a6099" : "#444";
}); });
// 根据约束电平状态计算引脚颜色 // 根据约束电平状态计算引脚颜色
@ -105,7 +90,7 @@ onMounted(() => {
if (props.constraint) { if (props.constraint) {
unsubscribe = onConstraintStateChange((constraint, level) => { unsubscribe = onConstraintStateChange((constraint, level) => {
if (constraint === props.constraint) { if (constraint === props.constraint) {
emit('value-change', { constraint, level }); emit("value-change", { constraint, level });
} }
}); });
} }
@ -117,27 +102,30 @@ onUnmounted(() => {
} }
}); });
watch(() => props.constraint, (newConstraint, oldConstraint) => { watch(
if (unsubscribe) { () => props.constraint,
unsubscribe(); (newConstraint, oldConstraint) => {
unsubscribe = null; if (unsubscribe) {
} unsubscribe();
if (newConstraint) { unsubscribe = null;
unsubscribe = onConstraintStateChange((constraint, level) => { }
if (constraint === newConstraint) { if (newConstraint) {
emit('value-change', { constraint, level }); unsubscribe = onConstraintStateChange((constraint, level) => {
} if (constraint === newConstraint) {
}); emit("value-change", { constraint, level });
} }
}); });
}
},
);
function updateAnalogValue(value: number) { function updateAnalogValue(value: number) {
if (props.type !== 'analog') return; if (props.type !== "analog") return;
analogValue.value = Math.max(0, Math.min(1, value)); analogValue.value = Math.max(0, Math.min(1, value));
emit('value-change', { emit("value-change", {
label: props.label, label: props.label,
constraint: props.constraint, constraint: props.constraint,
value: analogValue.value value: analogValue.value,
}); });
} }
@ -149,16 +137,16 @@ defineExpose({
constraint: props.constraint, constraint: props.constraint,
direction: props.direction, direction: props.direction,
type: props.type, type: props.type,
pinId: props.pinId pinId: props.pinId,
}), }),
getPinPosition: () => { getPinPosition: () => {
// Pin组件自身的getPinPosition应该返回相对于父组件的位置 // Pin组件自身的getPinPosition应该返回相对于父组件的位置
// 在MechanicalButton等组件中已经明确传递了position，所以这里实际上可能不会被使用 // 在MechanicalButton等组件中已经明确传递了position，所以这里实际上可能不会被使用
return { return {
x: viewBoxWidth.value / 2, x: viewBoxWidth.value / 2,
y: viewBoxHeight.value / 2 y: viewBoxHeight.value / 2,
}; };
} },
}); });
</script> </script>
@ -167,20 +155,20 @@ defineExpose({
export function getDefaultProps() { export function getDefaultProps() {
return { return {
size: 1, size: 1,
label: 'PIN', label: "PIN",
constraint: '', constraint: "",
direction: 'input', direction: "input",
type: 'digital', type: "digital",
pinId: 'pin-default', pinId: "pin-default",
componentId: '', componentId: "",
pins: [ pins: [
{ {
pinId: 'PIN', pinId: "PIN",
constraint: '', constraint: "",
x: 0, x: 0,
y: 0 y: 0,
} },
] ],
}; };
} }
</script> </script>
@ -190,18 +178,25 @@ export function getDefaultProps() {
display: block; display: block;
user-select: none; user-select: none;
position: relative; position: relative;
z-index: 5; /* 提高引脚组件的z-index */ z-index: 5;
pointer-events: auto; /* 确保可以接收点击事件 */ /* 提高引脚组件的z-index */
overflow: visible; /* 确保可以看到引脚 */ pointer-events: auto;
/* 确保可以接收点击事件 */
overflow: visible;
/* 确保可以看到引脚 */
} }
.interactive { .interactive {
cursor: pointer; cursor: pointer;
transition: filter 0.2s; transition: filter 0.2s;
pointer-events: auto; /* 确保可以接收点击事件 */ pointer-events: auto;
/* 确保可以接收点击事件 */
} }
.interactive:hover { .interactive:hover {
filter: brightness(1.2); filter: brightness(1.2);
stroke: rgba(255, 255, 255, 0.3); /* 添加边框以便更容易看到点击区域 */ stroke: rgba(255, 255, 255, 0.3);
/* 添加边框以便更容易看到点击区域 */
stroke-width: 1; stroke-width: 1;
} }
</style> </style>

4
src/components/equipments/SMT_LED.vue
View File

@ -64,9 +64,11 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, computed, watch, onMounted, onUnmounted } from 'vue'; import { ref, computed, watch, onMounted, onUnmounted } from 'vue';
import { getConstraintState, onConstraintStateChange } from '../../stores/constraints'; import { useConstraintsStore } from '../../stores/constraints';
import Pin from './Pin.vue'; import Pin from './Pin.vue';
const {getConstraintState, onConstraintStateChange} = useConstraintsStore();
// 存储多个Pin引用 // 存储多个Pin引用
const pinRefs = ref<Record<string, any>>({}); const pinRefs = ref<Record<string, any>>({});

199
src/components/equipments/SevenSegmentDisplay.vue
View File

@ -1,106 +1,75 @@
<template> <template>
<div class="seven-segment-display" :style="{ width: width + 'px', height: height + 'px', position: 'relative' }"> <svg <div class="seven-segment-display" :style="{
xmlns="http://www.w3.org/2000/svg" width: width + 'px',
:width="width" height: height + 'px',
:height="height" position: 'relative',
viewBox="0 0 120 220" }">
class="display" <svg xmlns="http://www.w3.org/2000/svg" :width="width" :height="height" viewBox="0 0 120 220" class="display">
>
<!-- 数码管基座 --> <!-- 数码管基座 -->
<rect width="120" height="180" x="0" y="0" fill="#222" rx="10" ry="10" /> <rect width="120" height="180" x="0" y="0" fill="#222" rx="10" ry="10" />
<rect width="110" height="170" x="5" y="5" fill="#333" rx="5" ry="5" /> <rect width="110" height="170" x="5" y="5" fill="#333" rx="5" ry="5" />
<!-- 7段 + 小数点，每个段由多边形表示，重新设计点位置使其更接近实际数码管 --> <!-- 7段 + 小数点，每个段由多边形表示，重新设计点位置使其更接近实际数码管 -->
<!-- a段 (顶部横线) --> <!-- a段 (顶部横线) -->
<polygon <polygon :points="'30,20 90,20 98,28 82,36 38,36 22,28'"
:points="'30,20 90,20 98,28 82,36 38,36 22,28'"
:fill="isSegmentActive('a') ? segmentColor : inactiveColor" :fill="isSegmentActive('a') ? segmentColor : inactiveColor"
:style="{ opacity: isSegmentActive('a') ? 1 : 0.15 }" :style="{ opacity: isSegmentActive('a') ? 1 : 0.15 }" class="segment" />
class="segment"
/>
<!-- b段 (右上竖线) --> <!-- b段 (右上竖线) -->
<polygon <polygon :points="'100,30 108,38 108,82 100,90 92,82 92,38'"
:points="'100,30 108,38 108,82 100,90 92,82 92,38'"
:fill="isSegmentActive('b') ? segmentColor : inactiveColor" :fill="isSegmentActive('b') ? segmentColor : inactiveColor"
:style="{ opacity: isSegmentActive('b') ? 1 : 0.15 }" :style="{ opacity: isSegmentActive('b') ? 1 : 0.15 }" class="segment" />
class="segment"
/>
<!-- c段 (右下竖线) --> <!-- c段 (右下竖线) -->
<polygon <polygon :points="'100,90 108,98 108,142 100,150 92,142 92,98'"
:points="'100,90 108,98 108,142 100,150 92,142 92,98'"
:fill="isSegmentActive('c') ? segmentColor : inactiveColor" :fill="isSegmentActive('c') ? segmentColor : inactiveColor"
:style="{ opacity: isSegmentActive('c') ? 1 : 0.15 }" :style="{ opacity: isSegmentActive('c') ? 1 : 0.15 }" class="segment" />
class="segment"
/>
<!-- d段 (底部横线) --> <!-- d段 (底部横线) -->
<polygon <polygon :points="'30,160 90,160 98,152 82,144 38,144 22,152'"
:points="'30,160 90,160 98,152 82,144 38,144 22,152'"
:fill="isSegmentActive('d') ? segmentColor : inactiveColor" :fill="isSegmentActive('d') ? segmentColor : inactiveColor"
:style="{ opacity: isSegmentActive('d') ? 1 : 0.15 }" :style="{ opacity: isSegmentActive('d') ? 1 : 0.15 }" class="segment" />
class="segment"
/>
<!-- e段 (左下竖线) --> <!-- e段 (左下竖线) -->
<polygon <polygon :points="'20,90 28,98 28,142 20,150 12,142 12,98'"
:points="'20,90 28,98 28,142 20,150 12,142 12,98'"
:fill="isSegmentActive('e') ? segmentColor : inactiveColor" :fill="isSegmentActive('e') ? segmentColor : inactiveColor"
:style="{ opacity: isSegmentActive('e') ? 1 : 0.15 }" :style="{ opacity: isSegmentActive('e') ? 1 : 0.15 }" class="segment" />
class="segment"
/>
<!-- f段 (左上竖线) --> <!-- f段 (左上竖线) -->
<polygon <polygon :points="'20,30 28,38 28,82 20,90 12,82 12,38'"
:points="'20,30 28,38 28,82 20,90 12,82 12,38'"
:fill="isSegmentActive('f') ? segmentColor : inactiveColor" :fill="isSegmentActive('f') ? segmentColor : inactiveColor"
:style="{ opacity: isSegmentActive('f') ? 1 : 0.15 }" :style="{ opacity: isSegmentActive('f') ? 1 : 0.15 }" class="segment" />
class="segment"
/>
<!-- g段 (中间横线) --> <!-- g段 (中间横线) -->
<polygon <polygon :points="'30,90 38,82 82,82 90,90 82,98 38,98'"
:points="'30,90 38,82 82,82 90,90 82,98 38,98'"
:fill="isSegmentActive('g') ? segmentColor : inactiveColor" :fill="isSegmentActive('g') ? segmentColor : inactiveColor"
:style="{ opacity: isSegmentActive('g') ? 1 : 0.15 }" :style="{ opacity: isSegmentActive('g') ? 1 : 0.15 }" class="segment" />
class="segment" <!-- dp段 (小数点) -->
/> <!-- dp段 (小数点) --> <circle cx="108" cy="154" r="6" :fill="isSegmentActive('dp') ? segmentColor : inactiveColor"
<circle :style="{ opacity: isSegmentActive('dp') ? 1 : 0.15 }" class="segment" />
cx="108"
cy="154"
r="6"
:fill="isSegmentActive('dp') ? segmentColor : inactiveColor"
:style="{ opacity: isSegmentActive('dp') ? 1 : 0.15 }"
class="segment"
/>
</svg> </svg>
<!-- 引脚 --> <!-- 引脚 -->
<div v-for="pin in pins" :key="pin.pinId" <div v-for="pin in pins" :key="pin.pinId" :style="{
:style="{ position: 'absolute',
position: 'absolute', left: `${pin.x * props.size}px`,
left: `${pin.x * props.size}px`, top: `${pin.y * props.size}px`,
top: `${pin.y * props.size}px`, transform: 'translate(-50%, -50%)',
transform: 'translate(-50%, -50%)' }" :data-pin-wrapper="`${pin.pinId}`" :data-pin-x="`${pin.x * props.size}`"
}" :data-pin-y="`${pin.y * props.size}`">
:data-pin-wrapper="`${pin.pinId}`" <Pin :ref="(el) => {
:data-pin-x="`${pin.x * props.size}`" if (el) pinRefs[pin.pinId] = el;
:data-pin-y="`${pin.y * props.size}`"> }
<Pin " :label="pin.pinId" :constraint="pin.constraint" :pinId="pin.pinId" @pin-click="$emit('pin-click', $event)" />
:ref="el => { if(el) pinRefs[pin.pinId] = el }"
:label="pin.pinId"
:constraint="pin.constraint"
:pinId="pin.pinId"
@pin-click="$emit('pin-click', $event)"
/>
</div> </div>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, computed, watch, onMounted, onUnmounted } from 'vue'; import { ref, computed, watch, onMounted, onUnmounted } from "vue";
import { getConstraintState, onConstraintStateChange } from '../../stores/constraints'; import { useConstraintsStore } from "../../stores/constraints";
import Pin from './Pin.vue'; import Pin from "./Pin.vue";
const { getConstraintState, onConstraintStateChange } = useConstraintsStore();
// 存储Pin引用 // 存储Pin引用
const pinRefs = ref<Record<string, any>>({}); const pinRefs = ref<Record<string, any>>({});
@ -115,41 +84,41 @@ interface SevenSegmentDisplayProps {
x: number; x: number;
y: number; y: number;
}[]; }[];
cathodeType?: 'common' | 'anode'; // 共阴极或共阳极 cathodeType?: "common" | "anode"; // 共阴极或共阳极
} }
const props = withDefaults(defineProps<SevenSegmentDisplayProps>(), { const props = withDefaults(defineProps<SevenSegmentDisplayProps>(), {
size: 1, size: 1,
color: 'red', color: "red",
cathodeType: 'common', // 默认为共阴极 cathodeType: "common", // 默认为共阴极
pins: () => [ pins: () => [
{ pinId: 'a', constraint: '', x: 10 , y: 170 }, // a段 { pinId: "a", constraint: "", x: 10, y: 170 }, // a段
{ pinId: 'b', constraint: '', x: 25-1 , y: 170 }, // b段 { pinId: "b", constraint: "", x: 25 - 1, y: 170 }, // b段
{ pinId: 'c', constraint: '', x: 40-2 , y: 170 }, // c段 { pinId: "c", constraint: "", x: 40 - 2, y: 170 }, // c段
{ pinId: 'd', constraint: '', x: 55-3 , y: 170 }, // d段 { pinId: "d", constraint: "", x: 55 - 3, y: 170 }, // d段
{ pinId: 'e', constraint: '', x: 70-4 , y: 170 }, // e段 { pinId: "e", constraint: "", x: 70 - 4, y: 170 }, // e段
{ pinId: 'f', constraint: '', x: 85-5 , y: 170 }, // f段 { pinId: "f", constraint: "", x: 85 - 5, y: 170 }, // f段
{ pinId: 'g', constraint: '', x: 100-6, y: 170 }, // g段 { pinId: "g", constraint: "", x: 100 - 6, y: 170 }, // g段
{ pinId: 'dp', constraint: '', x: 115-7, y: 170 }, // 小数点 { pinId: "dp", constraint: "", x: 115 - 7, y: 170 }, // 小数点
{ pinId: 'COM', constraint: '', x: 60 , y: 10 } // 公共端，稍微低一点 { pinId: "COM", constraint: "", x: 60, y: 10 }, // 公共端，稍微低一点
] ],
}); });
const width = computed(() => 120 * props.size); const width = computed(() => 120 * props.size);
const height = computed(() => 220 * props.size); const height = computed(() => 220 * props.size);
// 计算段颜色和非激活状态颜色 // 计算段颜色和非激活状态颜色
const segmentColor = computed(() => props.color || 'red'); const segmentColor = computed(() => props.color || "red");
const inactiveColor = computed(() => '#FFFFFF'); const inactiveColor = computed(() => "#FFFFFF");
// 监听props变化 // 监听props变化
watch( watch(
() => props, () => props,
(newProps) => { (newProps) => {
console.log('SevenSegmentDisplay props changed:', newProps); console.log("SevenSegmentDisplay props changed:", newProps);
updateSegmentStates(); updateSegmentStates();
}, },
{ deep: true } { deep: true },
); );
// 段引脚状态 // 段引脚状态
@ -165,29 +134,34 @@ const segmentStates = ref({
}); });
// 判断段是否激活 // 判断段是否激活
function isSegmentActive(segment: 'a' | 'b' | 'c' | 'd' | 'e' | 'f' | 'g' | 'dp'): boolean { function isSegmentActive(
segment: "a" | "b" | "c" | "d" | "e" | "f" | "g" | "dp",
): boolean {
return segmentStates.value[segment]; return segmentStates.value[segment];
} }
// 更新引脚状态的函数 // 更新引脚状态的函数
function updateSegmentStates() { function updateSegmentStates() {
for (const pin of props.pins) { for (const pin of props.pins) {
if (['a', 'b', 'c', 'd', 'e', 'f', 'g', 'dp'].includes(pin.pinId)) { if (["a", "b", "c", "d", "e", "f", "g", "dp"].includes(pin.pinId)) {
// 如果constraint为空，则默认为未激活状态 // 如果constraint为空，则默认为未激活状态
if (!pin.constraint) { if (!pin.constraint) {
segmentStates.value[pin.pinId as keyof typeof segmentStates.value] = false; segmentStates.value[pin.pinId as keyof typeof segmentStates.value] =
false;
continue; continue;
} }
const pinState = getConstraintState(pin.constraint); const pinState = getConstraintState(pin.constraint);
// 根据阴极/阳极类型反转逻辑 // 根据阴极/阳极类型反转逻辑
if (props.cathodeType === 'common') { if (props.cathodeType === "common") {
// 共阴极: 高电平激活段 // 共阴极: 高电平激活段
segmentStates.value[pin.pinId as keyof typeof segmentStates.value] = pinState === 'high'; segmentStates.value[pin.pinId as keyof typeof segmentStates.value] =
pinState === "high";
} else { } else {
// 共阳极: 低电平激活段 // 共阳极: 低电平激活段
segmentStates.value[pin.pinId as keyof typeof segmentStates.value] = pinState === 'low'; segmentStates.value[pin.pinId as keyof typeof segmentStates.value] =
pinState === "low";
} }
} }
} }
@ -195,8 +169,11 @@ function updateSegmentStates() {
// 监听约束状态变化 // 监听约束状态变化
function onConstraintChange(constraint: string, level: string) { function onConstraintChange(constraint: string, level: string) {
const affectedPin = props.pins.find(pin => pin.constraint === constraint); const affectedPin = props.pins.find((pin) => pin.constraint === constraint);
if (affectedPin && ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'dp'].includes(affectedPin.pinId)) { if (
affectedPin &&
["a", "b", "c", "d", "e", "f", "g", "dp"].includes(affectedPin.pinId)
) {
updateSegmentStates(); updateSegmentStates();
} }
} }
@ -213,7 +190,7 @@ onUnmounted(() => {
// 暴露属性和方法 // 暴露属性和方法
defineExpose({ defineExpose({
updateSegmentStates updateSegmentStates,
}); });
</script> </script>
@ -224,7 +201,9 @@ defineExpose({
} }
.segment { .segment {
transition: opacity 0.2s, fill 0.2s; transition:
opacity 0.2s,
fill 0.2s;
} }
/* 数码管发光效果 */ /* 数码管发光效果 */
@ -238,19 +217,19 @@ defineExpose({
export function getDefaultProps() { export function getDefaultProps() {
return { return {
size: 1, size: 1,
color: 'red', color: "red",
cathodeType: 'common', cathodeType: "common",
pins: [ pins: [
{ pinId: 'a', constraint: '', x: 10 , y: 170 }, { pinId: "a", constraint: "", x: 10, y: 170 },
{ pinId: 'b', constraint: '', x: 25-1 , y: 170 }, { pinId: "b", constraint: "", x: 25 - 1, y: 170 },
{ pinId: 'c', constraint: '', x: 40-2 , y: 170 }, { pinId: "c", constraint: "", x: 40 - 2, y: 170 },
{ pinId: 'd', constraint: '', x: 55-3 , y: 170 }, { pinId: "d", constraint: "", x: 55 - 3, y: 170 },
{ pinId: 'e', constraint: '', x: 70-4 , y: 170 }, { pinId: "e", constraint: "", x: 70 - 4, y: 170 },
{ pinId: 'f', constraint: '', x: 85-5 , y: 170 }, { pinId: "f", constraint: "", x: 85 - 5, y: 170 },
{ pinId: 'g', constraint: '', x: 100-6, y: 170 }, { pinId: "g", constraint: "", x: 100 - 6, y: 170 },
{ pinId: 'dp', constraint: '', x: 115-7, y: 170 }, { pinId: "dp", constraint: "", x: 115 - 7, y: 170 },
{ pinId: 'COM', constraint: '', x: 60 , y: 10 } { pinId: "COM", constraint: "", x: 60, y: 10 },
] ],
}; };
} }
</script> </script>

208
src/components/equipments/Wire.vue
View File

@ -1,28 +1,18 @@
<template> <template>
<g :data-wire-id="props.id"> <g :data-wire-id="props.id">
<path <path :d="pathData" fill="none" :stroke="computedStroke" :stroke-width="strokeWidth" stroke-linecap="round"
:d="pathData" stroke-linejoin="round" :class="{ 'wire-active': props.isActive }" @click="handleClick" />
fill="none"
:stroke="computedStroke"
:stroke-width="strokeWidth"
stroke-linecap="round"
stroke-linejoin="round"
:class="{ 'wire-active': props.isActive }"
@click="handleClick"
/>
<!-- 可选：添加连线标签或状态指示器 --> <!-- 可选：添加连线标签或状态指示器 -->
<text <text v-if="showLabel" :x="labelPosition.x" :y="labelPosition.y" class="wire-label">{{ props.constraint || ""
v-if="showLabel" }}</text>
:x="labelPosition.x"
:y="labelPosition.y"
class="wire-label"
>{{ props.constraint || '' }}</text>
</g> </g>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { computed, defineEmits, reactive, watch, onMounted, onUnmounted } from 'vue'; import { useConstraintsStore } from "@/stores/constraints";
import { getConstraintColor, getConstraintState, onConstraintStateChange } from '../../stores/constraints'; import { computed, defineEmits, watch, onMounted, onUnmounted } from "vue";
const { getConstraintColor, onConstraintStateChange } = useConstraintsStore();
interface Props { interface Props {
id: string; id: string;
@ -33,7 +23,7 @@ interface Props {
strokeColor?: string; strokeColor?: string;
strokeWidth?: number; strokeWidth?: number;
isActive?: boolean; isActive?: boolean;
routingMode?: 'auto' | 'orthogonal' | 'direct' | 'path'; routingMode?: "auto" | "orthogonal" | "direct" | "path";
// 针脚引用属性 // 针脚引用属性
startComponentId?: string; startComponentId?: string;
startPinId?: string; startPinId?: string;
@ -48,12 +38,12 @@ interface Props {
} }
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {
strokeColor: '#4a5568', strokeColor: "#4a5568",
strokeWidth: 2, strokeWidth: 2,
isActive: false, isActive: false,
routingMode: 'orthogonal', routingMode: "orthogonal",
showLabel: false, showLabel: false,
constraint: '' constraint: "",
}); });
// 响应约束状态变化的颜色 // 响应约束状态变化的颜色
@ -64,37 +54,46 @@ const constraintColor = computed(() => {
// 计算实际使用的颜色：isActive优先，其次是constraint电平颜色，最后是默认色 // 计算实际使用的颜色：isActive优先，其次是constraint电平颜色，最后是默认色
const computedStroke = computed(() => { const computedStroke = computed(() => {
if (props.isActive) return '#ff9800'; if (props.isActive) return "#ff9800";
return constraintColor.value || props.strokeColor; return constraintColor.value || props.strokeColor;
}); });
const emit = defineEmits(['click', 'update:active', 'update:position']); const emit = defineEmits(["click", "update:active", "update:position"]);
function handleClick(event: MouseEvent) { function handleClick(event: MouseEvent) {
emit('click', { id: props.id, event }); emit("click", { id: props.id, event });
} }
// 计算标签位置 - 放在连线中间 // 计算标签位置 - 放在连线中间
const labelPosition = computed(() => { const labelPosition = computed(() => {
return { return {
x: (props.startX + props.endX) / 2, x: (props.startX + props.endX) / 2,
y: (props.startY + props.endY) / 2 - 5 y: (props.startY + props.endY) / 2 - 5,
}; };
}); });
const pathData = computed(() => { const pathData = computed(() => {
// 如果有路径命令，使用路径布线模式 // 如果有路径命令，使用路径布线模式
if (props.routingMode === 'path' && props.pathCommands && props.pathCommands.length > 0) { if (
props.routingMode === "path" &&
props.pathCommands &&
props.pathCommands.length > 0
) {
return calculatePathFromCommands( return calculatePathFromCommands(
props.startX, props.startX,
props.startY, props.startY,
props.endX, props.endX,
props.endY, props.endY,
props.pathCommands props.pathCommands,
); );
} }
// 否则使用正交路径 // 否则使用正交路径
return calculateOrthogonalPath(props.startX, props.startY, props.endX, props.endY); return calculateOrthogonalPath(
props.startX,
props.startY,
props.endX,
props.endY,
);
}); });
function calculatePathFromCommands( function calculatePathFromCommands(
@ -102,10 +101,10 @@ function calculatePathFromCommands(
startY: number, startY: number,
endX: number, endX: number,
endY: number, endY: number,
commands: string[] commands: string[],
) { ) {
// 找到分隔符索引，通常是 "*" // 找到分隔符索引，通常是 "*"
const splitterIndex = commands.indexOf('*'); const splitterIndex = commands.indexOf("*");
if (splitterIndex === -1) { if (splitterIndex === -1) {
// 如果没有分隔符，回退到正交路径 // 如果没有分隔符，回退到正交路径
return calculateOrthogonalPath(startX, startY, endX, endY); return calculateOrthogonalPath(startX, startY, endX, endY);
@ -129,7 +128,7 @@ function calculatePathFromCommands(
currentY = newY; currentY = newY;
pathPoints.push([currentX, currentY]); pathPoints.push([currentX, currentY]);
} }
// 从终点开始反向处理 // 从终点开始反向处理
let endCurrentX = endX; let endCurrentX = endX;
let endCurrentY = endY; let endCurrentY = endY;
@ -143,15 +142,18 @@ function calculatePathFromCommands(
endCurrentX = newX; endCurrentX = newX;
endCurrentY = newY; endCurrentY = newY;
endPathPoints.push([endCurrentX, endCurrentY]); endPathPoints.push([endCurrentX, endCurrentY]);
} // 反转终点路径点，保留所有点 } // 反转终点路径点，保留所有点
const reversedEndPoints = [...endPathPoints].reverse(); const reversedEndPoints = [...endPathPoints].reverse();
// 将两部分路径连接起来 // 将两部分路径连接起来
// 如果终点路径的第一个点与起点路径的最后一个点相同，则去掉重复点 // 如果终点路径的第一个点与起点路径的最后一个点相同，则去掉重复点
let combinedPoints; let combinedPoints;
if (pathPoints.length > 0 && reversedEndPoints.length > 0 && if (
pathPoints[pathPoints.length - 1][0] === reversedEndPoints[0][0] && pathPoints.length > 0 &&
pathPoints[pathPoints.length - 1][1] === reversedEndPoints[0][1]) { reversedEndPoints.length > 0 &&
pathPoints[pathPoints.length - 1][0] === reversedEndPoints[0][0] &&
pathPoints[pathPoints.length - 1][1] === reversedEndPoints[0][1]
) {
combinedPoints = [...pathPoints, ...reversedEndPoints.slice(1)]; combinedPoints = [...pathPoints, ...reversedEndPoints.slice(1)];
} else { } else {
combinedPoints = [...pathPoints, ...reversedEndPoints]; combinedPoints = [...pathPoints, ...reversedEndPoints];
@ -160,25 +162,33 @@ function calculatePathFromCommands(
const allPoints = combinedPoints; const allPoints = combinedPoints;
// 检查是否需要添加中间连接点 // 检查是否需要添加中间连接点
if (allPoints.length >= 2) { if (allPoints.length >= 2) {
const startPathEndPoint = pathPoints.length > 0 ? pathPoints[pathPoints.length - 1] : null; const startPathEndPoint =
const endPathStartPoint = reversedEndPoints.length > 0 ? reversedEndPoints[0] : null; pathPoints.length > 0 ? pathPoints[pathPoints.length - 1] : null;
const endPathStartPoint =
reversedEndPoints.length > 0 ? reversedEndPoints[0] : null;
// 只有当起点路径和终点路径不相连时才添加连接线 // 只有当起点路径和终点路径不相连时才添加连接线
if (startPathEndPoint && endPathStartPoint && if (
(startPathEndPoint[0] !== endPathStartPoint[0] || startPathEndPoint[1] !== endPathStartPoint[1])) { startPathEndPoint &&
endPathStartPoint &&
(startPathEndPoint[0] !== endPathStartPoint[0] ||
startPathEndPoint[1] !== endPathStartPoint[1])
) {
// 使用正交连接或直接连接 // 使用正交连接或直接连接
let middlePoints: [number, number][] = []; let middlePoints: [number, number][] = [];
// 正交连接，添加额外点以确保路径是正交的 // 正交连接，添加额外点以确保路径是正交的
middlePoints = generateOrthogonalConnection( middlePoints = generateOrthogonalConnection(
startPathEndPoint[0], startPathEndPoint[1], startPathEndPoint[0],
endPathStartPoint[0], endPathStartPoint[1] startPathEndPoint[1],
endPathStartPoint[0],
endPathStartPoint[1],
); );
// 在起点路径和终点路径之间插入中间点 // 在起点路径和终点路径之间插入中间点
allPoints.splice(pathPoints.length, 0, ...middlePoints); allPoints.splice(pathPoints.length, 0, ...middlePoints);
} }
} // 生成SVG路径 } // 生成SVG路径
if (allPoints.length < 2) { if (allPoints.length < 2) {
// 如果没有足够的点，直接从起点到终点画一条线 // 如果没有足够的点，直接从起点到终点画一条线
return `M ${startX} ${startY} L ${endX} ${endY}`; return `M ${startX} ${startY} L ${endX} ${endY}`;
@ -194,25 +204,29 @@ function calculatePathFromCommands(
} }
// 执行单个路径命令 // 执行单个路径命令
function executePathCommand(x: number, y: number, command: string): { newX: number; newY: number } { function executePathCommand(
x: number,
y: number,
command: string,
): { newX: number; newY: number } {
// 解析命令，例如 "down10", "right20", "downright5" 等 // 解析命令，例如 "down10", "right20", "downright5" 等
let newX = x; let newX = x;
let newY = y; let newY = y;
if (command.startsWith('right')) { if (command.startsWith("right")) {
const distance = parseInt(command.substring(5), 10) || 10; const distance = parseInt(command.substring(5), 10) || 10;
newX = x + distance; newX = x + distance;
newY = y; newY = y;
} else if (command.startsWith('left')) { } else if (command.startsWith("left")) {
const distance = parseInt(command.substring(4), 10) || 10; const distance = parseInt(command.substring(4), 10) || 10;
newX = x - distance; newX = x - distance;
newY = y; newY = y;
} else if (command.startsWith('down')) { } else if (command.startsWith("down")) {
if (command.startsWith('downright')) { if (command.startsWith("downright")) {
const distance = parseInt(command.substring(9), 10) || 10; const distance = parseInt(command.substring(9), 10) || 10;
newX = x + distance; newX = x + distance;
newY = y + distance; newY = y + distance;
} else if (command.startsWith('downleft')) { } else if (command.startsWith("downleft")) {
const distance = parseInt(command.substring(8), 10) || 10; const distance = parseInt(command.substring(8), 10) || 10;
newX = x - distance; newX = x - distance;
newY = y + distance; newY = y + distance;
@ -221,12 +235,12 @@ function executePathCommand(x: number, y: number, command: string): { newX: numb
newX = x; newX = x;
newY = y + distance; newY = y + distance;
} }
} else if (command.startsWith('up')) { } else if (command.startsWith("up")) {
if (command.startsWith('upright')) { if (command.startsWith("upright")) {
const distance = parseInt(command.substring(7), 10) || 10; const distance = parseInt(command.substring(7), 10) || 10;
newX = x + distance; newX = x + distance;
newY = y - distance; newY = y - distance;
} else if (command.startsWith('upleft')) { } else if (command.startsWith("upleft")) {
const distance = parseInt(command.substring(6), 10) || 10; const distance = parseInt(command.substring(6), 10) || 10;
newX = x - distance; newX = x - distance;
newY = y - distance; newY = y - distance;
@ -241,7 +255,12 @@ function executePathCommand(x: number, y: number, command: string): { newX: numb
} }
// 生成两点之间的正交连接点 // 生成两点之间的正交连接点
function generateOrthogonalConnection(x1: number, y1: number, x2: number, y2: number): [number, number][] { function generateOrthogonalConnection(
x1: number,
y1: number,
x2: number,
y2: number,
): [number, number][] {
const dx = x2 - x1; const dx = x2 - x1;
const dy = y2 - y1; const dy = y2 - y1;
@ -267,7 +286,12 @@ function generateOrthogonalConnection(x1: number, y1: number, x2: number, y2: nu
} }
// 计算正交路径 // 计算正交路径
function calculateOrthogonalPath(startX: number, startY: number, endX: number, endY: number) { function calculateOrthogonalPath(
startX: number,
startY: number,
endX: number,
endY: number,
) {
// 计算两点之间的水平和垂直距离 // 计算两点之间的水平和垂直距离
const dx = endX - startX; const dx = endX - startX;
const dy = endY - startY; const dy = endY - startY;
@ -298,32 +322,26 @@ function reversePathCommand(command: string): string {
// 根据命令类型返回反向命令 // 根据命令类型返回反向命令
// 水平方向反转 // 水平方向反转
if (command.startsWith('right')) { if (command.startsWith("right")) {
return `left${distance}`; return `left${distance}`;
} } else if (command.startsWith("left")) {
else if (command.startsWith('left')) {
return `right${distance}`; return `right${distance}`;
} }
// 垂直和斜向反转 // 垂直和斜向反转
else if (command.startsWith('down')) { else if (command.startsWith("down")) {
if (command.startsWith('downright')) { if (command.startsWith("downright")) {
return `upleft${distance}`; return `upleft${distance}`;
} } else if (command.startsWith("downleft")) {
else if (command.startsWith('downleft')) {
return `upright${distance}`; return `upright${distance}`;
} } else {
else {
return `up${distance}`; return `up${distance}`;
} }
} } else if (command.startsWith("up")) {
else if (command.startsWith('up')) { if (command.startsWith("upright")) {
if (command.startsWith('upright')) {
return `downleft${distance}`; return `downleft${distance}`;
} } else if (command.startsWith("upleft")) {
else if (command.startsWith('upleft')) {
return `downright${distance}`; return `downright${distance}`;
} } else {
else {
return `down${distance}`; return `down${distance}`;
} }
} }
@ -354,39 +372,49 @@ onUnmounted(() => {
}); });
// 监听约束属性变化 // 监听约束属性变化
watch(() => props.constraint, (newConstraint, oldConstraint) => { watch(
if (unsubscribe) { () => props.constraint,
unsubscribe(); (newConstraint, oldConstraint) => {
unsubscribe = null; if (unsubscribe) {
} unsubscribe();
unsubscribe = null;
}
if (newConstraint) { if (newConstraint) {
unsubscribe = onConstraintStateChange((constraint, level) => { unsubscribe = onConstraintStateChange((constraint, level) => {
if (constraint === newConstraint) { if (constraint === newConstraint) {
// 约束状态变化，触发重新渲染 // 约束状态变化，触发重新渲染
} }
}); });
} }
}); },
);
// 暴露方法，用于获取这条连线的信息 // 暴露方法，用于获取这条连线的信息
defineExpose({ id: props.id, getInfo: () => ({ defineExpose({
id: props.id,
getInfo: () => ({
id: props.id, id: props.id,
startComponentId: props.startComponentId, startComponentId: props.startComponentId,
startPinId: props.startPinId, startPinId: props.startPinId,
endComponentId: props.endComponentId, endComponentId: props.endComponentId,
endPinId: props.endPinId, endPinId: props.endPinId,
constraint: props.constraint constraint: props.constraint,
}), }),
// 更新连线位置 // 更新连线位置
updatePosition: (newStartX: number, newStartY: number, newEndX: number, newEndY: number) => { updatePosition: (
newStartX: number,
newStartY: number,
newEndX: number,
newEndY: number,
) => {
// 由于 props 是只读的，我们只能通过事件通知父组件更新 // 由于 props 是只读的，我们只能通过事件通知父组件更新
emit('update:position', { emit("update:position", {
id: props.id, id: props.id,
startX: newStartX, startX: newStartX,
startY: newStartY, startY: newStartY,
endX: newEndX, endX: newEndX,
endY: newEndY endY: newEndY,
}); });
}, },
// 获取连线的针脚情况 // 获取连线的针脚情况
@ -395,8 +423,8 @@ defineExpose({ id: props.id, getInfo: () => ({
getRoutingMode: () => props.routingMode, getRoutingMode: () => props.routingMode,
// 设置连线状态（如高亮等） // 设置连线状态（如高亮等）
setActive: (active: boolean) => { setActive: (active: boolean) => {
emit('update:active', active); emit("update:active", active);
} },
}); });
</script> </script>

170
src/stores/constraints.ts
View File

@ -1,81 +1,103 @@
import { ref, reactive } from 'vue'; import { ref, computed, reactive } from 'vue'
import { defineStore } from 'pinia'
import { isBoolean } from 'lodash';
// 约束电平状态类型 // 约束电平状态类型
export type ConstraintLevel = 'high' | 'low' | 'undefined'; export type ConstraintLevel = 'high' | 'low' | 'undefined';
// 约束状态存储 export const useConstraintsStore = defineStore('constraints', () => {
const constraintStates = reactive<Record<string, ConstraintLevel>>({});
// 约束颜色映射 // 约束状态存储
export const constraintColors = { const constraintStates = reactive<Record<string, ConstraintLevel>>({});
high: '#ff3333', // 高电平为红色
low: '#3333ff', // 低电平为蓝色
undefined: '#999999' // 未定义为灰色
};
// 获取约束状态 // 约束颜色映射
export function getConstraintState(constraint: string): ConstraintLevel { const constraintColors = {
if (!constraint) return 'undefined'; high: '#ff3333', // 高电平为红色
return constraintStates[constraint] || 'undefined'; low: '#3333ff', // 低电平为蓝色
} undefined: '#999999' // 未定义为灰色
// 设置约束状态
export function setConstraintState(constraint: string, level: ConstraintLevel) {
if (!constraint) return;
constraintStates[constraint] = level;
}
// 批量设置约束状态
export function batchSetConstraintStates(states: Record<string, ConstraintLevel>) {
// 收集发生变化的约束
const changedConstraints: [string, ConstraintLevel][] = [];
// 更新状态并收集变化
Object.entries(states).forEach(([constraint, level]) => {
if (constraintStates[constraint] !== level) {
constraintStates[constraint] = level;
changedConstraints.push([constraint, level]);
}
});
// 通知所有变化
changedConstraints.forEach(([constraint, level]) => {
stateChangeCallbacks.forEach(callback => callback(constraint, level));
});
}
// 获取约束对应的颜色
export function getConstraintColor(constraint: string): string {
const state = getConstraintState(constraint);
return constraintColors[state];
}
// 清除所有约束状态
export function clearAllConstraintStates() {
Object.keys(constraintStates).forEach(key => {
delete constraintStates[key];
});
}
// 获取所有约束状态
export function getAllConstraintStates(): Record<string, ConstraintLevel> {
return { ...constraintStates };
}
// 注册约束状态变化回调
const stateChangeCallbacks: ((constraint: string, level: ConstraintLevel) => void)[] = [];
export function onConstraintStateChange(callback: (constraint: string, level: ConstraintLevel) => void) {
stateChangeCallbacks.push(callback);
return () => {
const index = stateChangeCallbacks.indexOf(callback);
if (index > -1) {
stateChangeCallbacks.splice(index, 1);
}
}; };
}
// 触发约束变化 // 获取约束状态
export function notifyConstraintChange(constraint: string, level: ConstraintLevel) { function getConstraintState(constraint: string): ConstraintLevel {
setConstraintState(constraint, level); if (!constraint) return 'undefined';
stateChangeCallbacks.forEach(callback => callback(constraint, level)); return constraintStates[constraint] || 'undefined';
} }
// 设置约束状态
function setConstraintState(constraint: string, level: ConstraintLevel) {
if (!constraint) return;
constraintStates[constraint] = level;
}
// 批量设置约束状态
function batchSetConstraintStates(states: Record<string, ConstraintLevel> | Record<string, boolean>) {
// 收集发生变化的约束
const changedConstraints: [string, ConstraintLevel][] = [];
// 更新状态并收集变化
Object.entries(states).forEach(([constraint, level]) => {
if (isBoolean(level)) {
level = level ? "high" : "low";
}
if (constraintStates[constraint] !== level) {
constraintStates[constraint] = level;
changedConstraints.push([constraint, level]);
}
});
// 通知所有变化
changedConstraints.forEach(([constraint, level]) => {
stateChangeCallbacks.forEach(callback => callback(constraint, level));
});
}
// 获取约束对应的颜色
function getConstraintColor(constraint: string): string {
const state = getConstraintState(constraint);
return constraintColors[state];
}
// 清除所有约束状态
function clearAllConstraintStates() {
Object.keys(constraintStates).forEach(key => {
delete constraintStates[key];
});
}
// 获取所有约束状态
function getAllConstraintStates(): Record<string, ConstraintLevel> {
return { ...constraintStates };
}
// 注册约束状态变化回调
const stateChangeCallbacks: ((constraint: string, level: ConstraintLevel) => void)[] = [];
function onConstraintStateChange(callback: (constraint: string, level: ConstraintLevel) => void) {
stateChangeCallbacks.push(callback);
return () => {
const index = stateChangeCallbacks.indexOf(callback);
if (index > -1) {
stateChangeCallbacks.splice(index, 1);
}
};
}
// 触发约束变化
function notifyConstraintChange(constraint: string, level: ConstraintLevel) {
setConstraintState(constraint, level);
stateChangeCallbacks.forEach(callback => callback(constraint, level));
}
return {
getConstraintState,
setConstraintState,
batchSetConstraintStates,
getConstraintColor,
clearAllConstraintStates,
getAllConstraintStates,
onConstraintStateChange,
notifyConstraintChange,
}
})

4
src/views/AdminView.vue
View File

@ -113,7 +113,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import { isNull, isUndefined } from "lodash"; import { isNull, isUndefined } from "lodash";
import { ref } from "vue"; import { ref } from "vue";
import { RemoteUpdaterClient } from "@/APIClient"; import { RemoteUpdateClient } from "@/APIClient";
import { useDialogStore } from "@/stores/dialog"; import { useDialogStore } from "@/stores/dialog";
import { Common } from "@/Common"; import { Common } from "@/Common";
@ -134,7 +134,7 @@ const appBitstream3File = ref<File>();
// 远程升级相关参数 // 远程升级相关参数
const devAddr = ref("192.168.1.100"); const devAddr = ref("192.168.1.100");
const devPort = 1234; const devPort = 1234;
const remoteUpdater = new RemoteUpdaterClient(); const remoteUpdater = new RemoteUpdateClient();
// 处理文件上传 // 处理文件上传
function handleFileChange(event: Event, bistreamNum: number) { function handleFileChange(event: Event, bistreamNum: number) {