feat(src/packages): 信息下的摄像头，修改流媒体获取方式

@@ -12,7 +12,8 @@ enum Api {
   BASEORIGINATION = '/organization/me/list/',
   BASEORIGINATION = '/organization/me/list/',
   VIDEO = '/video/list',
   VIDEO = '/video/list',
   DEVICE_PROFILE = '/device_profile/me/list',
   DEVICE_PROFILE = '/device_profile/me/list',
-  DEVICE = '/device'
+  DEVICE = '/device',
+  VIDEOURL = '/video/url/'
 }
 }
 
 
 export const getDictItemByCode = (value: string) => {
 export const getDictItemByCode = (value: string) => {
@@ -99,3 +100,9 @@ export const getDeviceList = (params: any, data?: object) =>
     params,
     params,
     data
     data
   })
   })
+
+//获取平台视频流播放地址
+export const getVideoUrl = (id: string) =>
+  defHttp.get({
+    url: `${Api.VIDEOURL}${id}`
+  })

@@ -11,7 +11,8 @@ export enum sourceTypeEnum {
 export const option = {
 export const option = {
   dataset: [
   dataset: [
     {
     {
-      url: '',
+      byIdUrl: '', //通过接口获取的url
+      url: '', //直接获取视频列表的url
       sourceType: 'custom',
       sourceType: 'custom',
       organization: ''
       organization: ''
     }
     }

@@ -28,13 +28,17 @@
             key-field="id"
             key-field="id"
             children-field="children"
             children-field="children"
             :options="originationOption"
             :options="originationOption"
-            @update:value="handleUpdateTreeValue($event, item)"
+            @update:value="handleUpdateTreeValue($event)"
           />
           />
         </setting-item>
         </setting-item>
       </setting-item-box>
       </setting-item-box>
       <setting-item-box v-if="item.sourceType === sourceTypeEnum.PLATFORM" name="视频" :alone="true">
       <setting-item-box v-if="item.sourceType === sourceTypeEnum.PLATFORM" name="视频" :alone="true">
         <setting-item>
         <setting-item>
-          <n-select v-model:value="item.url" :options="videoOptions" />
+          <n-select
+            v-model:value="item.url"
+            @update:value="(value:string,e:any) => handleSelect(value,e, index)"
+            :options="videoOptions"
+          />
         </setting-item>
         </setting-item>
       </setting-item-box>
       </setting-item-box>
       <n-button size="small" @click="optionData.dataset.splice(index, 1)"> - </n-button>
       <n-button size="small" @click="optionData.dataset.splice(index, 1)"> - </n-button>
@@ -43,7 +47,7 @@
       style="margin-left: 10px"
       style="margin-left: 10px"
       v-if="optionData.dataset.length < 9"
       v-if="optionData.dataset.length < 9"
       size="small"
       size="small"
-      @click="optionData.dataset.push({ url: '', sourceType: 'custom', organization: '' })"
+      @click="optionData.dataset.push({ url: '', sourceType: 'custom', organization: '', byIdUrl: '' })"
     >
     >
       +
       +
     </n-button>
     </n-button>
@@ -54,7 +58,7 @@
 import { PropType, ref, onMounted } from 'vue'
 import { PropType, ref, onMounted } from 'vue'
 import { option, sourceTypeEnum } from './config'
 import { option, sourceTypeEnum } from './config'
 import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
 import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
-import { getOrganizationList, getVideoList } from '@/api/external/common/index'
+import { getOrganizationList, getVideoList, getVideoUrl } from '@/api/external/common/index'
 import { NTreeSelect } from 'naive-ui'
 import { NTreeSelect } from 'naive-ui'
 
 
 const props = defineProps({
 const props = defineProps({
@@ -84,13 +88,18 @@ const getOriginationList = async () => {
   originationOption.value = res
   originationOption.value = res
 }
 }
 
 
-const handleUpdateTreeValue = (e: any, value: object) => {
+const handleUpdateTreeValue = (e: any) => {
   getVideoLists(e)
   getVideoLists(e)
 }
 }
 
 
 const getVideoLists = async (organizationId: string) => {
 const getVideoLists = async (organizationId: string) => {
   const res = await getVideoList({ organizationId })
   const res = await getVideoList({ organizationId })
-  videoOptions.value = res?.data?.map((item: any) => ({ label: item.name, value: item.videoUrl }))
+  videoOptions.value = res?.data?.map((item: any) => ({
+    label: item.name,
+    value: item.accessMode === 1 ? item.id : item.videoUrl,
+    id: item.id,
+    accessMode: item.accessMode
+  }))
 }
 }
 
 
 const handleChecked = ({ target }: any, values: object) => {
 const handleChecked = ({ target }: any, values: object) => {
@@ -100,6 +109,24 @@ const handleChecked = ({ target }: any, values: object) => {
   }
   }
 }
 }
 
 
+const getVideoUrlById = async (e: any, id: string, index: number) => {
+  const res = await getVideoUrl(id)
+  if (!res) return
+  const { url } = res.data
+  props.optionData.dataset.forEach((item: any, itemIndex: number) => {
+    if (itemIndex === index) {
+      item.byIdUrl = url
+    }
+  })
+}
+
+const handleSelect = (value: string, e: any, index: number) => {
+  const { accessMode, id } = e
+  if (accessMode === 1) {
+    getVideoUrlById(e, id, index)
+  }
+}
+
 onMounted(() => {
 onMounted(() => {
   props.optionData.dataset.forEach((item: any) => {
   props.optionData.dataset.forEach((item: any) => {
     if (item.sourceType === sourceTypeEnum.PLATFORM) {
     if (item.sourceType === sourceTypeEnum.PLATFORM) {

 <template>
 <template>
-  <div 
-    @mouseenter="handleMouseenter"
-    @mouseleave="handleMouseleave"
-   class="banner-box" ref="root">
+  <div @mouseenter="handleMouseenter" @mouseleave="handleMouseleave" class="banner-box" ref="root">
     <div class="wrapper">
     <div class="wrapper">
       <div v-for="(item, index) in option.dataset" :key="index + item" :class="item.className" :style="item.sty">
       <div v-for="(item, index) in option.dataset" :key="index + item" :class="item.className" :style="item.sty">
         <CameraItem
         <CameraItem
@@ -10,7 +7,7 @@
           :name="item.name"
           :name="item.name"
           :avatar="item.avatar"
           :avatar="item.avatar"
           :key="item + index"
           :key="item + index"
-          :sourceSrc="item.url"
+          :sourceSrc="!item.byIdUrl ? item.url : item.byIdUrl"
           :w="w"
           :w="w"
           :h="h"
           :h="h"
           :index="index"
           :index="index"

@@ -70,10 +70,14 @@ watch(
   () => props.path,
   () => props.path,
   () => {
   () => {
     if (props.path && props.autoPlay) {
     if (props.path && props.autoPlay) {
-      player?.pause()
-      player?.load()
-      player?.src(props.path)
-      player?.play()
+      try {
+        player?.pause()
+        player?.load()
+        player?.src(props.path)
+        player?.play()
+      } catch (e) {
+        console.log(e)
+      }
     }
     }
   },
   },
   {
   {

@@ -9,6 +9,7 @@ export enum sourceTypeEnum {
 }
 }
 
 
 export const option = {
 export const option = {
+  url:'',
   dataset: '',
   dataset: '',
   autoplay: false,
   autoplay: false,
   poster: '',
   poster: '',

@@ -55,7 +55,7 @@
     </setting-item-box>
     </setting-item-box>
     <setting-item-box v-if="optionData.sourceType === sourceTypeEnum.PLATFORM" name="视频" :alone="true">
     <setting-item-box v-if="optionData.sourceType === sourceTypeEnum.PLATFORM" name="视频" :alone="true">
       <setting-item>
       <setting-item>
-        <n-select v-model:value="optionData.dataset" :options="videoOptions" />
+        <n-select @update:value="handleSelect" v-model:value="optionData.dataset" :options="videoOptions" />
       </setting-item>
       </setting-item>
     </setting-item-box>
     </setting-item-box>
     <setting-item-box name="自动播放">
     <setting-item-box name="自动播放">
@@ -75,7 +75,7 @@ import { uploadFile } from '@/api/external/contentSave/content'
 import { UploadCustomRequestOptions, NTreeSelect } from 'naive-ui'
 import { UploadCustomRequestOptions, NTreeSelect } from 'naive-ui'
 import { backgroundImageSize } from '@/settings/designSetting'
 import { backgroundImageSize } from '@/settings/designSetting'
 import { fetchRouteParamsLocation } from '@/utils'
 import { fetchRouteParamsLocation } from '@/utils'
-import { getOrganizationList, getVideoList } from '@/api/external/common/index'
+import { getOrganizationList, getVideoList, getVideoUrl } from '@/api/external/common/index'
 
 
 const props = defineProps({
 const props = defineProps({
   optionData: {
   optionData: {
@@ -113,16 +113,38 @@ const handleUpdateTreeValue = (value: string) => {
 
 
 const getVideoLists = async (organizationId: string) => {
 const getVideoLists = async (organizationId: string) => {
   const res = await getVideoList({ organizationId })
   const res = await getVideoList({ organizationId })
-  videoOptions.value = res?.data?.map((item: any) => ({ label: item.name, value: item.videoUrl }))
+  videoOptions.value = res?.data?.map((item: any) => ({
+    label: item.name,
+    value: item.accessMode === 1 ? item.id : item.videoUrl,
+    id: item.id,
+    accessMode: item.accessMode
+  }))
+}
+
+const getVideoUrlById = async (id: string) => {
+  const res = await getVideoUrl(id)
+  if (!res) return
+  const { url } = res.data
+  props.optionData.url = url
 }
 }
 
 
 const handleChecked = ({ target }: any) => {
 const handleChecked = ({ target }: any) => {
+  props.optionData.dataset = ''
   const { value } = target
   const { value } = target
   if (value === sourceTypeEnum.PLATFORM) {
   if (value === sourceTypeEnum.PLATFORM) {
     getOriginationList()
     getOriginationList()
   }
   }
 }
 }
 
 
+const handleSelect = (value: string, e: any) => {
+  const { accessMode, id } = e
+  if (accessMode === 1) {
+    getVideoUrlById(id)
+  } else {
+    props.optionData.url = ''
+  }
+}
+
 onMounted(() => {
 onMounted(() => {
   if (props.optionData.sourceType === sourceTypeEnum.PLATFORM) {
   if (props.optionData.sourceType === sourceTypeEnum.PLATFORM) {
     getOriginationList()
     getOriginationList()

@@ -18,7 +18,7 @@ const props = defineProps({
 
 
 const { h } = toRefs(props.chartConfig.attr)
 const { h } = toRefs(props.chartConfig.attr)
 
 
-const { autoplay, dataset, poster } = toRefs(props.chartConfig.option)
+const { autoplay, dataset, poster, url } = toRefs(props.chartConfig.option)
 
 
 const option = shallowReactive({
 const option = shallowReactive({
   dataset: configOption.dataset,
   dataset: configOption.dataset,
@@ -28,7 +28,11 @@ const option = shallowReactive({
 watch(
 watch(
   () => dataset?.value,
   () => dataset?.value,
   (newData: string) => {
   (newData: string) => {
-    option.dataset = newData
+    if (url.value) {
+      option.dataset = url.value
+    } else {
+      option.dataset = newData
+    }
   },
   },
   {
   {
     immediate: true
     immediate: true