feat(packages/external): 新增单个摄像头

@@ -13,11 +13,6 @@
         </n-button>
       </setting-item>
     </setting-item-box>
-    <setting-item-box name="排布">
-      <setting-item>
-        <n-select v-model:value="optionData.displayMode" size="small" :options="displayModeOptions"></n-select>
-      </setting-item>
-    </setting-item-box>
   </CollapseItem>
 </template>
 
@@ -32,20 +27,4 @@ defineProps({
     required: true
   }
 })
-
-// 旋转方式
-const displayModeOptions = [
-  {
-    value: 'singleGrid',
-    label: '默认'
-  },
-  {
-    value: 'fourGrid',
-    label: '四宫格'
-  },
-  {
-    value: 'nineGrid',
-    label: '九宫格'
-  }
-]
 </script>

@@ -8,7 +8,7 @@ export const CameraConfig: ConfigType = {
   key,
   chartKey,
   conKey,
-  title: '摄像头',
+  title: '多个摄像头',
   category: ChatCategoryEnum.MORE,
   categoryName: ChatCategoryEnumName.MORE,
   package: EPackagesCategoryEnum.COMPOSES,

+<template>
+  <video
+    crossOrigin="anonymous"
+    :id="`my-player${index}`"
+    ref="videoRef"
+    class="video-js my-video vjs-theme-city vjs-big-play-centered"
+  >
+    <source :src="sourceSrc" />
+  </video>
+</template>
+<script setup lang="ts">
+import { onMounted, ref, onUnmounted, watch } from 'vue'
+import videojs from 'video.js'
+import type { VideoJsPlayerOptions } from 'video.js'
+import 'video.js/dist/video-js.min.css'
+
+const props = defineProps({
+  sourceSrc: {
+    type: String
+  },
+  name: {
+    type: String
+  },
+  avatar: {
+    type: String
+  },
+  index: {
+    type: Number
+  }
+})
+
+// video标签
+const videoRef = ref<HTMLElement | null>(null)
+
+// video实例对象
+let videoPlayer: videojs.Player | null = null
+
+//options配置
+const options: VideoJsPlayerOptions = {
+  language: 'zh-CN', // 设置语言
+  controls: true, // 是否显示控制条
+  preload: 'auto', // 预加载
+  autoplay: true, // 是否自动播放
+  fluid: false, // 自适应宽高
+  poster: props?.avatar || '',
+  src: props?.sourceSrc || '', // 要嵌入的视频源的源 URL
+  muted: true,
+  userActions: {
+    hotkeys: true
+  }
+}
+
+// 初始化videojs
+const initVideo = () => {
+  if (videoRef.value) {
+    // 创建 video 实例
+    videoPlayer = videojs(videoRef.value, options)
+  }
+}
+
+watch(
+  () => props.sourceSrc,
+  (newData: any) => {
+    // props.sourceSrc = newData
+    videoPlayer?.src(newData) as any
+    videoPlayer?.play()
+  },
+  {
+    immediate: true
+  }
+)
+
+onMounted(() => {
+  initVideo()
+})
+
+onUnmounted(() => {
+  handleVideoDispose()
+})
+
+//播放
+const handleVideoPlay = () => videoPlayer?.play()
+
+const handleVideoDispose = () => videoPlayer?.dispose() && videoPlayer?.pause()
+//暂停
+defineExpose({
+  handleVideoPlay,
+  handleVideoDispose
+})
+</script>
+
+<style lang="scss" scoped>
+.my-video {
+  width: 100%;
+  height: 100%;
+}
+</style>

+import CameraItem from './CameraItem.vue'
+
+export { CameraItem }

+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { SingleCameraConfig } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+
+export const option = {
+  dataset: [
+    {
+      url: ''
+    }
+  ] as any,
+  // 自动播放的间隔（ms）
+  interval: 5000,
+  autoplay: true,
+  effect: 'slide',
+  displayMode: 'singleGrid'
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = SingleCameraConfig.key
+  public chartConfig = cloneDeep(SingleCameraConfig)
+  public option = cloneDeep(option)
+}

+<template>
+  <CollapseItem name="播放器配置" :expanded="true">
+    <setting-item-box name="源地址" :alone="true">
+      <setting-item v-for="(item, index) in optionData.dataset" :key="index">
+        <n-input-group>
+          <n-input v-model:value="item.url" size="small" placeholder="请输入源地址"></n-input>
+        </n-input-group>
+      </setting-item>
+    </setting-item-box>
+  </CollapseItem>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import { option } from './config'
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+
+defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+
+</script>

+import { ChartFrameEnum, ConfigType } from '@/packages/index.d'
+import { EPackagesCategoryEnum } from '@/packages/components/external/types'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+import { useWidgetKey } from '@/packages/external/useWidgetKey'
+
+const { key, chartKey, conKey } = useWidgetKey('SingleCamera')
+export const SingleCameraConfig: ConfigType = {
+  key,
+  chartKey,
+  conKey,
+  title: '单个摄像头',
+  category: ChatCategoryEnum.MORE,
+  categoryName: ChatCategoryEnumName.MORE,
+  package: EPackagesCategoryEnum.COMPOSES,
+  chartFrame: ChartFrameEnum.NAIVE_UI,
+  image: 'camera.png'
+}

+<template>
+  <div class="banner-box" ref="root">
+    <n-grid x-gap="12" :y-gap="12" :cols="computedCols">
+      <n-gi v-for="(item, index) in option.dataset" :key="index + item">
+        <div class="camera-container">
+          <CameraItem
+            ref="cameraRef"
+            :name="item.name"
+            :avatar="item.avatar"
+            :key="item + index"
+            :sourceSrc="item.url"
+            :index="index"
+          />
+        </div>
+      </n-gi>
+    </n-grid>
+  </div>
+</template>
+<script setup lang="ts">
+import { PropType, toRefs, watch, shallowReactive, ref, computed } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+import 'video.js/dist/video-js.min.css'
+import { option as configOption } from './config'
+import { CameraItem } from './components'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+
+const { h } = toRefs(props.chartConfig.attr)
+
+const responsiveComputeValue = ref(0)
+
+const option = shallowReactive({
+  dataset: configOption.dataset
+})
+
+const computedCols = computed(() => {
+  if (option.dataset.length <= 1) return 1
+  if (option.dataset.length <= 4) return 2
+  return 3
+})
+
+const cameraRef = ref<InstanceType<typeof CameraItem>>()
+
+const responsive = (value: number) => {
+  responsiveComputeValue.value = value
+  if (option.dataset.length <= 2) responsiveComputeValue.value = value
+  if (option.dataset.length > 2 && option.dataset.length <= 4) responsiveComputeValue.value = value / 2.03
+  if (option.dataset.length > 4 && option.dataset.length <= 9) responsiveComputeValue.value = value / 3.1
+}
+
+watch(
+  () => props.chartConfig.option.dataset,
+  newData => {
+    option.dataset = newData
+    responsive(h.value)
+  },
+  {
+    immediate: true,
+    deep: true
+  }
+)
+
+watch(
+  () => h.value,
+  newData => responsive(newData),
+  {
+    immediate: true
+  }
+)
+</script>
+
+<style lang="scss" scoped>
+.banner-box {
+  .camera-container {
+    height: v-bind('`${responsiveComputeValue}px`');
+  }
+}
+</style>

@@ -2,6 +2,7 @@ import { Title1Config } from './Title1/index'
 import { Title2Config } from './Title2/index'
 import { Title3Config } from './Title3/index'
 import { CameraConfig } from './Camera/index'
+import { SingleCameraConfig } from './SingleCamera/index'
 import { ThreeDimensionalConfig } from './ThreeDimensional/index'
 
-export default [Title1Config, Title2Config, Title3Config, CameraConfig, ThreeDimensionalConfig]
+export default [Title1Config, Title2Config, Title3Config, CameraConfig, SingleCameraConfig, ThreeDimensionalConfig]