Commit ab6da34faa55f8062d66086d020d6688e2c2d91e

Authored by ww
1 parent a316e31e

fix: 修复图片组件无法更新

1 <script setup lang="ts"> 1 <script setup lang="ts">
2 import { ref } from 'vue' 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 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') 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 </script> 23 </script>
7 24
8 <template> 25 <template>
9 <div class="w-full h-full flex justify-center items-center"> 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 </div> 28 </div>
12 </template> 29 </template>
@@ -40,7 +40,7 @@ export class MessageHandler { @@ -40,7 +40,7 @@ export class MessageHandler {
40 if (!cell) return 40 if (!cell) return
41 const instanceId = getAppInstanceId(cell) 41 const instanceId = getAppInstanceId(cell)
42 const instance = window?.VueInstanceMap?.[instanceId] as App 42 const instance = window?.VueInstanceMap?.[instanceId] as App
43 - if (instance) 43 + if (instance && (instance._instance?.exposed as RenderComponentExposeType)?.onMessage)
44 (instance._instance?.exposed as RenderComponentExposeType)?.onMessage?.(commandSource, message) 44 (instance._instance?.exposed as RenderComponentExposeType)?.onMessage?.(commandSource, message)
45 else 45 else
46 this.defaultHandler(commandSource, message) 46 this.defaultHandler(commandSource, message)