|
|
@@ -36,7 +36,23 @@
|
|
|
>
|
|
|
<v-rect :config="point.bgRectConfig" />
|
|
|
<v-rect :config="point.rectConfig" />
|
|
|
- <v-image :config="point.imageConfig" />
|
|
|
+<!-- <v-image :config="point.imageConfig" />-->
|
|
|
+ <v-circle
|
|
|
+ ref="lightRefs"
|
|
|
+ :config="{
|
|
|
+ x: point.lightConfig.x,
|
|
|
+ y: point.lightConfig.y,
|
|
|
+ radius: point.lightConfig.radius,
|
|
|
+ fill: point.lightConfig.fill,
|
|
|
+ stroke: point.lightConfig.stroke,
|
|
|
+ strokeWidth: point.lightConfig.strokeWidth,
|
|
|
+ shadowColor: point.lightConfig.shadowColor,
|
|
|
+ shadowBlur: point.lightConfig.shadowBlur,
|
|
|
+ shadowOffset: point.lightConfig.shadowOffset,
|
|
|
+ shadowOpacity: point.lightConfig.shadowOpacity
|
|
|
+ }"
|
|
|
+ @mouseover="() => highlightLight(point)"
|
|
|
+ />
|
|
|
<v-text :config="point.textConfig" />
|
|
|
</v-group>
|
|
|
|
|
|
@@ -162,8 +178,10 @@ const renderedPoints = computed(() => {
|
|
|
const x = item.x * 50
|
|
|
const y = item.y * 50
|
|
|
const labelText = item.entityName
|
|
|
- const img = new Image();
|
|
|
- img.src = item.pointIcon || '';
|
|
|
+
|
|
|
+ // 获取灯光配置
|
|
|
+ const { lightColor, shadowColor, stroke, isRed, isGrey } = getLightConfig(item.switchStatus)
|
|
|
+
|
|
|
return {
|
|
|
id: item.id,
|
|
|
pointId: item.entityId,
|
|
|
@@ -194,13 +212,19 @@ const renderedPoints = computed(() => {
|
|
|
strokeWidth: 2,
|
|
|
fill: 'white'
|
|
|
},
|
|
|
-
|
|
|
- imageConfig: {
|
|
|
- x: 1,
|
|
|
- y: 0,
|
|
|
- width: 45,
|
|
|
- height: 45,
|
|
|
- image: img
|
|
|
+ lightConfig: {
|
|
|
+ x: 22.5,
|
|
|
+ y: 25,
|
|
|
+ radius: 12,
|
|
|
+ fill: lightColor,
|
|
|
+ stroke: stroke,
|
|
|
+ strokeWidth: 2,
|
|
|
+ shadowColor: shadowColor,
|
|
|
+ shadowBlur: 5,
|
|
|
+ shadowOffset: { x: 0, y: 0 },
|
|
|
+ shadowOpacity: 0.8,
|
|
|
+ isRed,
|
|
|
+ isGrey
|
|
|
},
|
|
|
textConfig: {
|
|
|
x: 8,
|
|
|
@@ -213,8 +237,35 @@ const renderedPoints = computed(() => {
|
|
|
}
|
|
|
})
|
|
|
})
|
|
|
+// 添加灯光配置获取函数
|
|
|
+const getLightConfig = (switchStatus: string) => {
|
|
|
+ let lightColor, shadowColor, stroke
|
|
|
+
|
|
|
+ switch (switchStatus) {
|
|
|
+ case "0": // 关闭状态
|
|
|
+ lightColor = '#e0e0e0'
|
|
|
+ shadowColor = '#e0e0e0'
|
|
|
+ stroke = '#e0e0e0'
|
|
|
+ break
|
|
|
+ case "1": // 开启状态
|
|
|
+ lightColor = '#0ea562'
|
|
|
+ shadowColor = '#3ab890'
|
|
|
+ stroke = '#3ab890'
|
|
|
+ break
|
|
|
+ default: // 未知状态
|
|
|
+ lightColor = 'white'
|
|
|
+ shadowColor = 'white'
|
|
|
+ stroke = 'white'
|
|
|
+ }
|
|
|
|
|
|
-
|
|
|
+ return {
|
|
|
+ lightColor,
|
|
|
+ shadowColor,
|
|
|
+ stroke,
|
|
|
+ isRed: switchStatus === "0",
|
|
|
+ isGrey: switchStatus == null
|
|
|
+ }
|
|
|
+}
|
|
|
// 获取作业区域信息
|
|
|
const getInfo = async () => {
|
|
|
try {
|
|
|
@@ -338,8 +389,67 @@ const getIsIsolationPointPage = async () => {
|
|
|
message.error('获取隔离点失败')
|
|
|
}
|
|
|
}
|
|
|
+// 全局控制闪烁频率同步函数
|
|
|
+// 响应式变量定义
|
|
|
+const blinkLights = ref([])
|
|
|
+const globalBlinkTimer = ref(null)
|
|
|
+const startGlobalBlinkTimer = () => {
|
|
|
+ if (globalBlinkTimer.value) return // 已经启动了
|
|
|
+
|
|
|
+ globalBlinkTimer.value = setInterval(() => {
|
|
|
+ const currentSecond = Math.floor(Date.now() / 200) % 2
|
|
|
+ const isOn = currentSecond === 1
|
|
|
+
|
|
|
+ blinkLights.value.forEach(light => {
|
|
|
+ light.opacity(isOn ? 1 : 0.6)
|
|
|
+ light.scale({ x: isOn ? 1 : 1.1, y: isOn ? 1 : 1.1 })
|
|
|
+ })
|
|
|
|
|
|
+ if (blinkLights.value.length > 0) {
|
|
|
+ blinkLights.value[0].getLayer().batchDraw() // 统一刷新一次就行
|
|
|
+ }
|
|
|
+ }, 50)
|
|
|
+}
|
|
|
|
|
|
+// 绿灯动画
|
|
|
+const addBlinkAnimation = (light, isRed, isGrey) => {
|
|
|
+ if (!isGrey && !isRed) {
|
|
|
+ if (!blinkLights.value.includes(light)) {
|
|
|
+ blinkLights.value.push(light)
|
|
|
+ }
|
|
|
+ startGlobalBlinkTimer()
|
|
|
+ }
|
|
|
+}
|
|
|
+// 添加灯光引用
|
|
|
+const lightRefs = ref([])
|
|
|
+
|
|
|
+// 高亮灯光效果
|
|
|
+const highlightLight = (point) => {
|
|
|
+ const light = lightRefs.value.find(l => l.getNode().id() === point.id)
|
|
|
+ if (light) {
|
|
|
+ light.getNode().to({
|
|
|
+ scaleX: 1.2,
|
|
|
+ scaleY: 1.2,
|
|
|
+ duration: 0.3
|
|
|
+ })
|
|
|
+ }
|
|
|
+}
|
|
|
+// 在渲染后初始化闪烁效果
|
|
|
+watch(renderedPoints, (newPoints) => {
|
|
|
+ nextTick(() => {
|
|
|
+ blinkLights.value = [] // 清空之前的灯光引用
|
|
|
+
|
|
|
+ newPoints.forEach((point, index) => {
|
|
|
+ const light = lightRefs.value[index]?.getNode()
|
|
|
+ if (light) {
|
|
|
+ // 确保lightConfig存在
|
|
|
+ if (point.lightConfig) {
|
|
|
+ addBlinkAnimation(light, point.lightConfig.isRed, point.lightConfig.isGrey)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+}, { immediate: true })
|
|
|
|
|
|
// 组件挂载
|
|
|
onMounted(async () => {
|
|
|
@@ -347,6 +457,12 @@ onMounted(async () => {
|
|
|
await getInfo()
|
|
|
await getIsIsolationPointPage()
|
|
|
})
|
|
|
+onUnmounted(async () => {
|
|
|
+ if (globalBlinkTimer.value) {
|
|
|
+ clearInterval(globalBlinkTimer.value)
|
|
|
+ globalBlinkTimer.value = null
|
|
|
+ }
|
|
|
+})
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|