Merge branch 'dev_local_latest' into 'main_dev'

perf(src/packages/external/Informations): 修改多个摄像头，自动开启切换

See merge request yunteng/thingskit-view!213

@@ -56,8 +56,8 @@ export interface videoList {
 }
 
 export const option = {
-  autoSwitch: false, //开启切换
-  interval: 2000, // 自动播放的间隔（ms）
+  autoSwitch: true, //开启切换
+  interval: 3000, // 自动播放的间隔（ms）
   dataset: [
     {
       id: null,

@@ -57,6 +57,7 @@ export interface Dataset {
 
 export const option = {
   dataset: {} as Dataset,
+  customVideoUrl: '', //用于手动输入视频流地址
   autoplay: true,
   poster: '',
   sourceType: sourceTypeEnum.CUSTOM,

@@ -19,7 +19,7 @@
     <setting-item-box v-if="optionData.sourceType === sourceTypeEnum.CUSTOM" name="源地址" :alone="true">
       <setting-item>
         <n-input-group>
-          <n-input v-model:value="optionData.dataset" size="small" placeholder="请输入源地址"></n-input>
+          <n-input v-model:value="optionData.customVideoUrl" size="small" placeholder="请输入源地址"></n-input>
         </n-input-group>
       </setting-item>
     </setting-item-box>
@@ -59,9 +59,8 @@ import { PropType, ref, onMounted } from 'vue'
 import { AccessMode, option, sourceTypeEnum, videoListInterface, sourceTypeNameEnum, Dataset } from './config'
 import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
 import { NTreeSelect } from 'naive-ui'
-import { getOrganizationList, getVideoList, getVideoUrl } from '@/api/external/common/index'
+import { getOrganizationList, getVideoList } from '@/api/external/common/index'
 import { TKUpload } from '@/components/external/Common/TKUpload'
-import { getVideoControlStart } from '@/api/external/flvPlay'
 
 const props = defineProps({
   optionData: {
@@ -111,29 +110,11 @@ const getVideoLists = async (organizationId: string) => {
   })
 }
 
-//针对萤石云或者海康威视，根据视频id获取播放流地址
-const getVideoUrlById = async (id: string) => {
-  const res = await getVideoUrl(id)
-  if (!res) return
-  const { url } = res.data
-  props.optionData.dataset = url
-}
-
-//针对gbt28181，根据设备id和通道号获取播放流地址
-const getVideoControlList = async (deviceId: string, channelId: string) => {
-  const {
-    data: { flv }
-  } = await getVideoControlStart({
-    deviceId,
-    channelId
-  })
-  props.optionData.dataset = flv
-}
-
 const handleChecked = (value: string) => {
   props.optionData.dataset = {} as Dataset
   props.optionData.organization = ''
   props.optionData.videoId = null
+  props.optionData.customVideoUrl = ''
   if (value === sourceTypeEnum.PLATFORM) {
     getOriginationList()
   }
@@ -151,14 +132,6 @@ const handleSelect = (_: string, e: videoListInterface) => {
     deviceId,
     value
   }
-
-  // if (accessMode === AccessMode.Streaming) {
-  //   getVideoUrlById(id)
-  // } else if (accessMode === AccessMode.GBT28181) {
-  //   getVideoControlList(deviceId, channelId)
-  // } else {
-  //   getCustomUrl(customUrl)
-  // }
 }
 
 onMounted(() => {

@@ -12,7 +12,7 @@
 <script setup lang="ts">
 import { PropType, toRefs, shallowReactive, watch, ref } from 'vue'
 import { CreateComponentType } from '@/packages/index.d'
-import { AccessMode, Dataset, option as configOption } from './config'
+import { AccessMode, Dataset, option as configOption, sourceTypeEnum } from './config'
 import { VideoPlay } from './components'
 import { getVideoControlStart } from '@/api/external/flvPlay'
 import { getVideoUrl } from '@/api/external/common'
@@ -28,7 +28,7 @@ const showLoading = ref(false)
 
 const { w, h } = toRefs(props.chartConfig.attr)
 
-const { autoplay, dataset, poster } = toRefs(props.chartConfig.option as typeof configOption)
+const { autoplay, dataset, poster, customVideoUrl } = toRefs(props.chartConfig.option as typeof configOption)
 
 const option = shallowReactive({
   dataset: configOption.dataset,
@@ -94,6 +94,20 @@ watch(
 )
 
 watch(
+  () => customVideoUrl.value,
+   (newData) => {
+     if(newData){
+      videoPlayerRef.value?.dispose()
+      sourceUrl.value = newData;
+      videoPlayerRef.value?.anewInit()
+    }
+  },
+  {
+    immediate: true
+  }
+)
+
+watch(
   () => [poster.value, autoplay.value],
   newData => {
     option.poster = newData.at(-2) as string