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

feat: 完成前后端旋转编码器的数字孪生

Browse Source
This commit is contained in:
SikongJueluo
2025-08-17 17:01:42 +08:00
parent cbf85165b7
commit 4a55143b8e
10 changed files with 818 additions and 265 deletions
Download Patch File Download Diff File Expand all files Collapse all files

559
src/components/equipments/EC11RotaryEncoder.vue
View File

@@ -1,258 +1,301 @@
<template>
<div class="ec11-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 100 100"
class="ec11-encoder">
<defs>
<!-- 发光效果滤镜 -->
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
<feFlood result="flood" flood-color="#00ff88" flood-opacity="1"></feFlood>
<feComposite in="flood" result="mask" in2="SourceGraphic" operator="in"></feComposite>
<feMorphology in="mask" result="dilated" operator="dilate" radius="1"></feMorphology>
<feGaussianBlur in="dilated" stdDeviation="2" result="blur1" />
<feGaussianBlur in="dilated" stdDeviation="4" result="blur2" />
<feGaussianBlur in="dilated" stdDeviation="8" result="blur3" />
<feMerge>
<feMergeNode in="blur3" />
<feMergeNode in="blur2" />
<feMergeNode in="blur1" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<!-- 编码器主体渐变 -->
<radialGradient id="encoderGradient" cx="50%" cy="30%">
<stop offset="0%" stop-color="#666666" />
<stop offset="70%" stop-color="#333333" />
<stop offset="100%" stop-color="#1a1a1a" />
</radialGradient>
<!-- 旋钮渐变 -->
<radialGradient id="knobGradient" cx="30%" cy="30%">
<stop offset="0%" stop-color="#555555" />
<stop offset="70%" stop-color="#222222" />
<stop offset="100%" stop-color="#111111" />
</radialGradient>
<!-- 按下状态渐变 -->
<radialGradient id="knobPressedGradient" cx="50%" cy="50%">
<stop offset="0%" stop-color="#333333" />
<stop offset="70%" stop-color="#555555" />
<stop offset="100%" stop-color="#888888" />
</radialGradient>
</defs>
<!-- 编码器底座 -->
<rect x="10" y="30" width="80" height="60" rx="8" ry="8"
fill="#2a2a2a" stroke="#444444" stroke-width="1"/>
<!-- 编码器主体外壳 -->
<circle cx="50" cy="60" r="32" fill="url(#encoderGradient)" stroke="#555555" stroke-width="1"/>
<!-- 编码器接线端子 -->
<rect x="5" y="75" width="4" height="8" fill="#c9c9c9" rx="1"/>
<rect x="15" y="85" width="4" height="8" fill="#c9c9c9" rx="1"/>
<rect x="25" y="85" width="4" height="8" fill="#c9c9c9" rx="1"/>
<rect x="81" y="85" width="4" height="8" fill="#c9c9c9" rx="1"/>
<rect x="91" y="75" width="4" height="8" fill="#c9c9c9" rx="1"/>
<!-- 旋钮 -->
<circle cx="50" cy="60" r="22"
:fill="isPressed ? 'url(#knobPressedGradient)' : 'url(#knobGradient)'"
stroke="#666666" stroke-width="1"
:transform="`rotate(${rotation/2} 50 60)`"
class="interactive"
@mousedown="handleMouseDown"
@mouseup="handlePress(false)"
@mouseleave="handlePress(false)"/>
<!-- 旋钮指示器 -->
<line x1="50" y1="42" x2="50" y2="48"
stroke="#ffffff" stroke-width="2" stroke-linecap="round"
:transform="`rotate(${rotation} 50 60)`"/>
<!-- 旋钮上的纹理刻度 -->
<g :transform="`rotate(${rotation} 50 60)`">
<circle cx="50" cy="60" r="18" fill="none" stroke="#777777" stroke-width="0.5"/>
<!-- 刻度线 -->
<g v-for="i in 16" :key="i">
<line :x1="50 + 16 * Math.cos((i-1) * Math.PI / 8)"
:y1="60 + 16 * Math.sin((i-1) * Math.PI / 8)"
:x2="50 + 18 * Math.cos((i-1) * Math.PI / 8)"
:y2="60 + 18 * Math.sin((i-1) * Math.PI / 8)"
stroke="#999999" stroke-width="0.5"/>
</g>
</g>
<!-- 编码器编号标签 -->
<text x="50" y="15" text-anchor="middle" font-family="Arial" font-size="10"
fill="#cccccc" font-weight="bold">
EC11-{{ encoderNumber }}
</text>
<!-- 状态指示器 -->
<circle cx="85" cy="20" r="3" :fill="isPressed ? '#ff4444' : '#444444'"
:filter="isPressed ? 'url(#glow)' : ''"
stroke="#666666" stroke-width="0.5"/>
</svg>
</div>
</template>
<script lang="ts" setup>
import { ref, computed } from 'vue';
interface Props {
size?: number;
encoderNumber?: number;
}
const props = withDefaults(defineProps<Props>(), {
size: 1,
encoderNumber: 1
});
// 组件状态
const isPressed = ref(false);
const rotation = ref(0);
// 拖动状态
const isDragging = ref(false);
const dragStartX = ref(0);
const lastTriggerX = ref(0);
const dragThreshold = 20; // 每20像素触发一次旋转
const hasRotated = ref(false); // 标记是否已经发生了旋转
// 计算宽高
const width = computed(() => 100 * props.size);
const height = computed(() => 100 * props.size);
// 定义发出的事件
const emit = defineEmits(['press', 'release', 'rotate-left', 'rotate-right']);
// 鼠标按下处理
function handleMouseDown(event: MouseEvent) {
isDragging.value = true;
dragStartX.value = event.clientX;
lastTriggerX.value = event.clientX;
hasRotated.value = false; // 重置旋转标记
// 添加全局鼠标事件监听
document.addEventListener('mousemove', handleMouseMove);
document.addEventListener('mouseup', handleMouseUp);
}
// 鼠标移动处理
function handleMouseMove(event: MouseEvent) {
if (!isDragging.value) return;
const currentX = event.clientX;
const deltaX = currentX - lastTriggerX.value;
// 检查是否达到触发阈值
if (Math.abs(deltaX) >= dragThreshold) {
hasRotated.value = true; // 标记已经发生旋转
if (deltaX > 0) {
// 右拖动 - 右旋转
rotation.value += 15;
emit('rotate-right', {
encoderNumber: props.encoderNumber
});
} else {
// 左拖动 - 左旋转
rotation.value -= 15;
emit('rotate-left', {
encoderNumber: props.encoderNumber
});
}
// 更新最后触发位置
lastTriggerX.value = currentX;
// 保持角度在0-360度范围内
rotation.value = rotation.value % 720;
if (rotation.value < 0) {
rotation.value += 720;
}
}
}
// 鼠标松开处理
function handleMouseUp() {
isDragging.value = false;
// 只有在没有发生旋转的情况下才识别为按压事件
if (!hasRotated.value) {
// 触发按压和释放事件（模拟快速按压）
handlePress(true);
// 使用setTimeout来模拟按压和释放的时序
setTimeout(() => {
handlePress(false);
}, 100);
}
// 移除全局事件监听
document.removeEventListener('mousemove', handleMouseMove);
document.removeEventListener('mouseup', handleMouseUp);
}
// 按压处理
function handlePress(pressed: boolean) {
if (pressed !== isPressed.value) {
isPressed.value = pressed;
if (pressed) {
emit('press', { encoderNumber: props.encoderNumber });
} else {
emit('release', { encoderNumber: props.encoderNumber });
}
}
}
// 暴露组件方法
defineExpose({
press: () => handlePress(true),
release: () => handlePress(false),
rotateLeft: () => {
rotation.value -= 15;
emit('rotate-left', {
encoderNumber: props.encoderNumber
});
},
rotateRight: () => {
rotation.value += 15;
emit('rotate-right', {
encoderNumber: props.encoderNumber
});
},
isPressed: () => isPressed.value
});
</script>
<script lang="ts">
// 添加一个静态方法来获取默认props
export function getDefaultProps() {
return {
size: 1,
encoderNumber: 1
};
}
</script>
<style scoped lang="postcss">
.ec11-container {
display: inline-block;
user-select: none;
}
.ec11-encoder {
display: block;
overflow: visible;
}
.interactive {
cursor: pointer;
}
</style>
<template>
<div
class="inline-block select-none"
:style="{
width: width + 'px',
height: height + 'px',
position: 'relative',
}"
>
<svg
xmlns="http://www.w3.org/2000/svg"
:width="width"
:height="height"
viewBox="0 0 100 100"
class="ec11-encoder"
>
<defs>
<!-- 发光效果滤镜 -->
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
<feFlood
result="flood"
flood-color="#00ff88"
flood-opacity="1"
></feFlood>
<feComposite
in="flood"
result="mask"
in2="SourceGraphic"
operator="in"
></feComposite>
<feMorphology
in="mask"
result="dilated"
operator="dilate"
radius="1"
></feMorphology>
<feGaussianBlur in="dilated" stdDeviation="2" result="blur1" />
<feGaussianBlur in="dilated" stdDeviation="4" result="blur2" />
<feGaussianBlur in="dilated" stdDeviation="8" result="blur3" />
<feMerge>
<feMergeNode in="blur3" />
<feMergeNode in="blur2" />
<feMergeNode in="blur1" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<!-- 编码器主体渐变 -->
<radialGradient id="encoderGradient" cx="50%" cy="30%">
<stop offset="0%" stop-color="#666666" />
<stop offset="70%" stop-color="#333333" />
<stop offset="100%" stop-color="#1a1a1a" />
</radialGradient>
<!-- 旋钮渐变 -->
<radialGradient id="knobGradient" cx="30%" cy="30%">
<stop offset="0%" stop-color="#555555" />
<stop offset="70%" stop-color="#222222" />
<stop offset="100%" stop-color="#111111" />
</radialGradient>
<!-- 按下状态渐变 -->
<radialGradient id="knobPressedGradient" cx="50%" cy="50%">
<stop offset="0%" stop-color="#333333" />
<stop offset="70%" stop-color="#555555" />
<stop offset="100%" stop-color="#888888" />
</radialGradient>
</defs>
<!-- 编码器底座 -->
<rect
x="10"
y="30"
width="80"
height="60"
rx="8"
ry="8"
fill="#2a2a2a"
stroke="#444444"
stroke-width="1"
/>
<!-- 编码器主体外壳 -->
<circle
cx="50"
cy="60"
r="32"
fill="url(#encoderGradient)"
stroke="#555555"
stroke-width="1"
/>
<!-- 编码器接线端子 -->
<rect x="5" y="75" width="4" height="8" fill="#c9c9c9" rx="1" />
<rect x="15" y="85" width="4" height="8" fill="#c9c9c9" rx="1" />
<rect x="25" y="85" width="4" height="8" fill="#c9c9c9" rx="1" />
<rect x="81" y="85" width="4" height="8" fill="#c9c9c9" rx="1" />
<rect x="91" y="75" width="4" height="8" fill="#c9c9c9" rx="1" />
<!-- 旋钮 -->
<circle
cx="50"
cy="60"
r="22"
:fill="isPressed ? 'url(#knobPressedGradient)' : 'url(#knobGradient)'"
stroke="#666666"
stroke-width="1"
:transform="`rotate(${rotationStep * 7.5} 50 60)`"
class="interactive"
@mousedown="handleMouseDown"
@mouseup="handlePress(false)"
@mouseleave="handlePress(false)"
/>
<!-- 旋钮指示器 -->
<line
x1="50"
y1="42"
x2="50"
y2="48"
stroke="#ffffff"
stroke-width="2"
stroke-linecap="round"
:transform="`rotate(${rotationStep * 15} 50 60)`"
/>
<!-- 旋钮上的纹理刻度 -->
<g :transform="`rotate(${rotationStep * 15} 50 60)`">
<circle
cx="50"
cy="60"
r="18"
fill="none"
stroke="#777777"
stroke-width="0.5"
/>
<!-- 刻度线 -->
<g v-for="i in 16" :key="i">
<line
:x1="50 + 16 * Math.cos(((i - 1) * Math.PI) / 8)"
:y1="60 + 16 * Math.sin(((i - 1) * Math.PI) / 8)"
:x2="50 + 18 * Math.cos(((i - 1) * Math.PI) / 8)"
:y2="60 + 18 * Math.sin(((i - 1) * Math.PI) / 8)"
stroke="#999999"
stroke-width="0.5"
/>
</g>
</g>
<!-- 编码器编号标签 -->
<text
x="50"
y="15"
text-anchor="middle"
font-family="Arial"
font-size="10"
fill="#cccccc"
font-weight="bold"
>
EC11-{{ encoderNumber }}
</text>
<!-- 状态指示器 -->
<circle
cx="85"
cy="20"
r="3"
:fill="isPressed ? '#ff4444' : '#444444'"
:filter="isPressed ? 'url(#glow)' : ''"
stroke="#666666"
stroke-width="0.5"
/>
</svg>
</div>
</template>
<script lang="ts" setup>
import { useRotaryEncoder } from "@/stores/Peripherals/RotaryEncoder";
import { RotaryEncoderDirection } from "@/utils/signalR/Peripherals.RotaryEncoderClient";
import { watch } from "vue";
import { watchEffect } from "vue";
import { ref, computed } from "vue";
const rotataryEncoderStore = useRotaryEncoder();
interface Props {
size?: number;
enableDigitalTwin?: boolean;
encoderNumber?: number;
}
const props = withDefaults(defineProps<Props>(), {
size: 1,
enableDigitalTwin: false,
encoderNumber: 1,
});
// 组件状态
const isPressed = ref(false);
const rotationStep = ref(0); // 步进计数，1步=15度
// 拖动状态对象，增加 hasRotated 标记
const drag = ref<{
active: boolean;
startX: number;
hasRotated: boolean;
} | null>(null);
const dragThreshold = 20; // 每20像素触发一次旋转
// 计算宽高
const width = computed(() => 100 * props.size);
const height = computed(() => 100 * props.size);
// 鼠标按下处理
function handleMouseDown(event: MouseEvent) {
drag.value = { active: true, startX: event.clientX, hasRotated: false };
window.addEventListener("mousemove", handleMouseMove);
window.addEventListener("mouseup", handleMouseUp);
}
// 鼠标移动处理
function handleMouseMove(event: MouseEvent) {
if (!drag.value?.active) return;
const dx = event.clientX - drag.value.startX;
if (Math.abs(dx) >= dragThreshold) {
rotationStep.value += dx > 0 ? 1 : -1;
drag.value.startX = event.clientX;
drag.value.hasRotated = true;
}
}
// 鼠标松开处理
function handleMouseUp() {
if (drag.value && drag.value.active) {
// 仅在未发生旋转时才触发按压
if (!drag.value.hasRotated) {
isPressed.value = true;
setTimeout(() => {
isPressed.value = false;
}, 100);
}
}
drag.value = null;
window.removeEventListener("mousemove", handleMouseMove);
window.removeEventListener("mouseup", handleMouseUp);
}
// 按压处理（用于鼠标离开和mouseup）
function handlePress(pressed: boolean) {
isPressed.value = pressed;
}
watchEffect(() => {
rotataryEncoderStore.setEnable(props.enableDigitalTwin);
});
watch(
() => rotationStep.value,
(newStep, oldStep) => {
if (newStep > oldStep) {
rotataryEncoderStore.rotateOnce(
props.encoderNumber,
RotaryEncoderDirection.Clockwise,
);
} else if (newStep < oldStep) {
rotataryEncoderStore.rotateOnce(
props.encoderNumber,
RotaryEncoderDirection.CounterClockwise,
);
}
},
);
</script>
<script lang="ts">
// 添加一个静态方法来获取默认props
export function getDefaultProps() {
return {
size: 1,
enableDigitalTwin: false,
encoderNumber: 1,
};
}
</script>
<style scoped lang="postcss">
.ec11-container {
display: inline-block;
user-select: none;
}
.ec11-encoder {
display: block;
overflow: visible;
}
.interactive {
cursor: pointer;
}
</style>