perf(src/packages/external/Informations): 单个摄像头，优化加一个loading效果

@@ -24,6 +24,7 @@ export interface videoListInterface {
   value: string
   value: string
   sn: string
   sn: string
   channelId: string
   channelId: string
+  deviceId: string
   params: GBT28181Params
   params: GBT28181Params
 }
 }
 
 

@@ -103,10 +103,11 @@ const getVideoLists = async (organizationId: string) => {
   videoOptions.value = res?.data?.map((item: videoListInterface) => {
   videoOptions.value = res?.data?.map((item: videoListInterface) => {
     return {
     return {
       label: item.name,
       label: item.name,
-      value: item.accessMode === AccessMode.Streaming ? item.id : item.accessMode === AccessMode.ManuallyEnter ? item.videoUrl : item?.params?.deviceId,
+      value: item.accessMode === AccessMode.Streaming ? item.id : item.accessMode === AccessMode.ManuallyEnter ? item.videoUrl : item.id,
       id: item.id,
       id: item.id,
       accessMode: item.accessMode,
       accessMode: item.accessMode,
-      channelId: item.accessMode === AccessMode.GBT28181 ? item?.params?.channelNo :''
+      channelId: item.accessMode === AccessMode.GBT28181 ? item?.params?.channelNo :'',
+      deviceId: item.accessMode === AccessMode.GBT28181 ? item?.params?.deviceId :'',
     }
     }
   })
   })
 }
 }
@@ -127,8 +128,16 @@ const handleChecked = (value: string) => {
   }
   }
 }
 }
 
 
-const handleSelect = async (_: string, e: videoListInterface) => {
-  const { accessMode, id, value , channelId } = e
+const getVideoControlList = async (deviceId: string, channelId: string) => {
+    const { data: { flv } } = await getVideoControlStart({
+      deviceId,
+      channelId
+    })
+    props.optionData.dataset = flv || ''
+}
+
+const handleSelect =  (_: string, e: videoListInterface) => {
+  const { accessMode, id, value , channelId, deviceId } = e
   //流媒体，需要从服务端调取接口换取播放的地址
   //流媒体，需要从服务端调取接口换取播放的地址
   if (accessMode === AccessMode.Streaming) {
   if (accessMode === AccessMode.Streaming) {
     getVideoUrlById(id)
     getVideoUrlById(id)
@@ -136,12 +145,8 @@ const handleSelect = async (_: string, e: videoListInterface) => {
     props.optionData.videoId = id
     props.optionData.videoId = id
   } else if (accessMode === AccessMode.GBT28181) {
   } else if (accessMode === AccessMode.GBT28181) {
     //gbt28181，需要调用接口获取flv播放地址
     //gbt28181，需要调用接口获取flv播放地址
-    if(!value) return
-    const { data: { flv } } = await getVideoControlStart({
-      deviceId: value,
-      channelId
-    })
-    props.optionData.dataset = flv || ''
+    getVideoControlList(deviceId, channelId)
+    props.optionData.videoId = id
   } else {
   } else {
     props.optionData.dataset = value as string
     props.optionData.dataset = value as string
   }
   }

 <template>
 <template>
   <div>
   <div>
-    <VideoPlay :baseSize="{ w, h }" :sourceSrc="option.dataset" :autoPlay="option.autoplay" :avatar="option.poster" />
+    <n-spin size="medium" :show="showLoading">
+      <template #description>
+        视频正在努力加载中......
+      </template>
+      <div>
+        <VideoPlay :baseSize="{ w, h }" :sourceSrc="option.dataset" :autoPlay="option.autoplay" :avatar="option.poster" />
+      </div>
+    </n-spin>
   </div>
   </div>
 </template>
 </template>
 <script setup lang="ts">
 <script setup lang="ts">
-import { PropType, toRefs, shallowReactive, watch } from 'vue'
+import { PropType, toRefs, shallowReactive, watch, ref } from 'vue'
 import { CreateComponentType } from '@/packages/index.d'
 import { CreateComponentType } from '@/packages/index.d'
 import { option as configOption } from './config'
 import { option as configOption } from './config'
 import { VideoPlay } from './components'
 import { VideoPlay } from './components'
@@ -16,6 +23,8 @@ const props = defineProps({
   }
   }
 })
 })
 
 
+const showLoading = ref(true)
+
 const { w, h } = toRefs(props.chartConfig.attr)
 const { w, h } = toRefs(props.chartConfig.attr)
 
 
 const { autoplay, dataset, poster } = toRefs(props.chartConfig.option as typeof configOption)
 const { autoplay, dataset, poster } = toRefs(props.chartConfig.option as typeof configOption)
@@ -29,6 +38,11 @@ const option = shallowReactive({
 watch(
 watch(
   () => dataset?.value,
   () => dataset?.value,
   (newData: string) => {
   (newData: string) => {
+    if (newData) {
+      setTimeout(() => {
+        showLoading.value = false
+      }, 2000);
+    }
     option.dataset = newData
     option.dataset = newData
   },
   },
   {
   {