1
|
1
|
<script setup lang="ts">
|
2
|
2
|
import { ref } from 'vue'
|
|
3
|
+import type { RenderComponentExposeType } from '@/core/Library/types'
|
|
4
|
+import { useOnMessage } from '@/core/Library/hook/useOnMessage'
|
|
5
|
+import { useLatestMessageValue } from '@/core/Library/hook/useLatestMessageValue'
|
|
6
|
+import type { CommandSource } from '@/core/websocket/processor'
|
|
7
|
+import type { SubscriptionUpdateMsg } from '@/core/websocket/type/message'
|
|
8
|
+import type { NodeDataDataSourceJsonType } from '@/api/node/model'
|
3
|
9
|
|
4
|
10
|
const imageSrc = ref('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="24" height="24" viewBox="0 0 24 24"%3E%3Cpath fill="currentColor" d="M19 2H5a3.009 3.009 0 0 0-3 3v8.86l3.88-3.88a3.075 3.075 0 0 1 4.24 0l2.871 2.887l.888-.888a3.008 3.008 0 0 1 4.242 0L22 15.86V5a3.009 3.009 0 0 0-3-3z" opacity=".5"%2F%3E%3Cpath fill="currentColor" d="M10.12 9.98a3.075 3.075 0 0 0-4.24 0L2 13.86V19a3.009 3.009 0 0 0 3 3h14a3 3 0 0 0 2.16-.92L10.12 9.98z"%2F%3E%3Cpath fill="currentColor" d="m22 15.858l-3.879-3.879a3.008 3.008 0 0 0-4.242 0l-.888.888l8.165 8.209c.542-.555.845-1.3.844-2.076v-3.142z" opacity=".25"%2F%3E%3C%2Fsvg%3E')
|
5
|
|
-defineExpose()
|
|
11
|
+
|
|
12
|
+const onReceiveDataSourceMessage = (commandSource: CommandSource, message: SubscriptionUpdateMsg) => {
|
|
13
|
+ const { data } = commandSource
|
|
14
|
+ const { attr } = data as NodeDataDataSourceJsonType
|
|
15
|
+ const { latestValue } = useLatestMessageValue(message.data, attr)
|
|
16
|
+ imageSrc.value = latestValue
|
|
17
|
+}
|
|
18
|
+
|
|
19
|
+const { onMessage } = useOnMessage({
|
|
20
|
+ onReceiveDataSourceMessage,
|
|
21
|
+})
|
|
22
|
+defineExpose<RenderComponentExposeType>({ onMessage })
|
6
|
23
|
</script>
|
7
|
24
|
|
8
|
25
|
<template>
|
9
|
26
|
<div class="w-full h-full flex justify-center items-center">
|
10
|
|
- <img class="w-50 h-50" :src="imageSrc">
|
|
27
|
+ <img class="w-full" :src="imageSrc">
|
11
|
28
|
</div>
|
12
|
29
|
</template> |
...
|
...
|
|