Merge branch 'fix/video-component' into 'main_dev'

fix: 视频组件视频流为必选&&视频新增loading加载

See merge request yunteng/thingskit-scada!222

@@ -66,9 +66,13 @@ const [register, { getFieldsValue, validate, setFieldsValue }] = useForm({
       field: VideoFormFieldsEnum.VIDEO_ID,
       field: VideoFormFieldsEnum.VIDEO_ID,
       label: VideoFormFieldsNameEnum.VIDEO_ID,
       label: VideoFormFieldsNameEnum.VIDEO_ID,
       component: ComponentEnum.API_SELECT,
       component: ComponentEnum.API_SELECT,
+      required: true,
       componentProps: ({ formModel }) => {
       componentProps: ({ formModel }) => {
         return {
         return {
-          api: getCameraList,
+          api: async (params: Record<'organizationId', string>) => {
+            if (!params.organizationId) return []
+            return await getCameraList(params)
+          },
           params: {
           params: {
             organizationId: formModel[ContentDataFieldsEnum.ORG_ID],
             organizationId: formModel[ContentDataFieldsEnum.ORG_ID],
           },
           },
@@ -167,9 +171,10 @@ createPublicFormContext(nodeDataActinType)
 
 
 <style lang="less" scoped>
 <style lang="less" scoped>
 .form-container {
 .form-container {
+  @apply text-sm;
+
+  :deep(.ant-divider) {
     @apply text-sm;
     @apply text-sm;
-    :deep(.ant-divider) {
-      @apply text-sm;
-    }
   }
   }
+}
 </style>
 </style>

 <script setup lang="ts">
 <script setup lang="ts">
+import { Spin } from 'ant-design-vue'
 import { computed, nextTick, onMounted, onUnmounted, ref, toRaw, unref } from 'vue'
 import { computed, nextTick, onMounted, onUnmounted, ref, toRaw, unref } from 'vue'
 import 'video.js/dist/video-js.css'
 import 'video.js/dist/video-js.css'
 
 
@@ -21,6 +22,7 @@ const props = defineProps<{
 // 获取节点数据
 // 获取节点数据
 const contentDataStore = useContentDataStore()
 const contentDataStore = useContentDataStore()
 const { getResult } = useFingerprint()
 const { getResult } = useFingerprint()
+const loading = ref(false)
 
 
 const getOptions = computed<VideoJsPlayerOptions>(() => {
 const getOptions = computed<VideoJsPlayerOptions>(() => {
   const { config } = props || {}
   const { config } = props || {}
@@ -47,53 +49,58 @@ const playSource = ref<Record<'src' | 'type', string>>(
 
 
 // 数据绑定获取的url
 // 数据绑定获取的url
 const handleGetVideoPlay = async () => {
 const handleGetVideoPlay = async () => {
-  const { dataSourceJson } = unref(videoConfig)[0] || {}
-  const { videoOption } = dataSourceJson || {}
-  const { id, accessMode, videoUrl, deviceId, channelId } = videoOption || {}
-  let type = getVideoTypeByUrl(videoUrl!)
-  let playUrl = videoUrl
-
-  // 判断是否是流媒体播放
-  if (accessMode === VideoAccessModeEnum.Streaming && id) {
-    const { data: { url } = { url: '' } } = await getStreamingPlayUrl(id!)
-    playUrl = url
-    playUrl && (type = getVideoTypeByUrl(playUrl!))
-  }
-  else if (accessMode === VideoAccessModeEnum.GBT28181 && deviceId && channelId) {
-    const {
-      data: { flv },
-    } = await getVideoControlStart({ channelId, deviceId })
+  try {
+    loading.value = true
+    const { dataSourceJson } = unref(videoConfig)[0] || {}
+    const { videoOption } = dataSourceJson || {}
+    const { id, accessMode, videoUrl, deviceId, channelId } = videoOption || {}
+    let type = getVideoTypeByUrl(videoUrl!)
+    let playUrl = videoUrl
+    // 判断是否是流媒体播放
+    if (accessMode === VideoAccessModeEnum.Streaming && id) {
+      const { data: { url } = { url: '' } } = await getStreamingPlayUrl(id!)
+      playUrl = url
+      playUrl && (type = getVideoTypeByUrl(playUrl!))
+    }
+    else if (accessMode === VideoAccessModeEnum.GBT28181 && deviceId && channelId) {
+      const {
+        data: { flv },
+      } = await getVideoControlStart({ channelId, deviceId })
 
 
-    playUrl = flv
-    type = VideoPlayerType.flv
-  }
+      playUrl = flv
+      type = VideoPlayerType.flv
+    }
 
 
-  // 判断是否是rtsp播放
-  if (isRtspProtocol(videoUrl!)) {
-    const result = await getResult()
-    const { visitorId } = result
-    playUrl = getFlvPlayUrl(playUrl!, visitorId)
-    withToken.value = true
-  }
+    // 判断是否是rtsp播放
+    if (isRtspProtocol(videoUrl!)) {
+      const result = await getResult()
+      const { visitorId } = result
+      playUrl = getFlvPlayUrl(playUrl!, visitorId)
+      withToken.value = true
+    }
 
 
-  playSource.value = {
-    src: playUrl!,
-    type,
-  }
+    playSource.value = {
+      src: playUrl!,
+      type,
+    }
 
 
-  const instance = unref(basicVideoPlayEl)?.customInit((options) => {
-    if (unref(withToken)) {
-      (options as any).flvjs.config.headers = {
-        'X-Authorization': `Bearer ${isShareMode() ? getShareJwtToken() : getJwtToken()}`,
+    const instance = unref(basicVideoPlayEl)?.customInit((options) => {
+      if (unref(withToken)) {
+        (options as any).flvjs.config.headers = {
+          'X-Authorization': `Bearer ${isShareMode() ? getShareJwtToken() : getJwtToken()}`,
+        }
       }
       }
-    }
-    return {
-      ...options,
-      sources: [toRaw(unref(playSource))],
-    } as VideoJsPlayerOptions
-  })
+      return {
+        ...options,
+        sources: [toRaw(unref(playSource))],
+      } as VideoJsPlayerOptions
+    })
 
 
-  instance?.play()
+    instance?.play()
+  }
+  finally {
+    loading.value = false
+  }
 }
 }
 
 
 // 默认播放
 // 默认播放
@@ -135,12 +142,12 @@ onUnmounted(async () => {
 
 
 <template>
 <template>
   <div class="w-full h-full flex justify-center items-center">
   <div class="w-full h-full flex justify-center items-center">
-    <!-- <Spin :spinning="loading" wrapper-class-name="video-spin" class="w-full h-full"> -->
-    <BasicVideoPlay
-      ref="basicVideoPlayEl" :options="getOptions" :with-token="withToken"
-      :immediate-init-on-mounted="false"
-    />
-    <!-- </Spin> -->
+    <Spin :spinning="loading">
+      <BasicVideoPlay
+        ref="basicVideoPlayEl" :options="getOptions" :with-token="withToken"
+        :immediate-init-on-mounted="false"
+      />
+    </Spin>
   </div>
   </div>
 </template>
 </template>