feat: 新增流量计与视频组件

@@ -14,6 +14,7 @@ enum CameraManagerApi {
   CAMERA_GET_URL = '/video',
   CAMERA_DELETE_URL = '/video',
   CAMERA_GET_DETAIL_URL = '/video',
+  CAMERA_LIST_URL = '/video/list',
   STREAMING_GET_URL = '/video/platform',
   STREAMING_POST_URL = '/video/platform',
   STREAMING_DELETE_URL = '/video/platform',
@@ -27,6 +28,13 @@ export const cameraPage = (params: CameraQueryParam) => {
   });
 };
 
+export const getCameraList = (params: Record<'organizationId', string>) => {
+  return defHttp.get<{ data: CameraModel[] }>({
+    url: CameraManagerApi.CAMERA_LIST_URL,
+    params,
+  });
+};
+
 /**
  * 删除视频
  * @param ids 删除的ids

-import { RadioRecord } from '../../../views/visual/board/detail/config/util';
-import { DeviceTypeEnum } from '../../device/model/deviceModel';
 import { DataType } from '../../device/model/modelOfMatterModel';
 import { DataTypeEnum } from '/@/components/Form/src/externalCompns/components/StructForm/config';
+import { DataSource } from '/@/views/visual/palette/types';
 
 export interface AddDataBoardParams {
   name: string;
@@ -74,34 +73,6 @@ export interface ComponentInfo {
   showDeviceName: boolean;
 }
 
-export interface DataSource {
-  attribute: string;
-  deviceId: string;
-  organizationId: string;
-  attributeRename: string;
-  deviceRename: string;
-  slaveDeviceId: string;
-  gatewayDevice: boolean;
-  componentInfo: ComponentInfo;
-  deviceName: string;
-  deviceProfileId: string;
-  tbDeviceId: string;
-  customCommand: {
-    transportType?: string;
-    commandType?: string;
-    command?: string;
-    service?: string;
-  };
-
-  // front usage
-  uuid?: string;
-  width?: number;
-  height?: number;
-  radio?: RadioRecord;
-  deviceType?: DeviceTypeEnum;
-  [key: string]: any;
-}
-
 export interface DataComponentRecord {
   dataBoardId: string;
   dataSource: DataSource[];

-export enum VideoPlayerType {
-  m3u8 = 'application/x-mpegURL',
-  mp4 = 'video/mp4',
-  webm = 'video/webm',
-}
-
-export const getVideoTypeByUrl = (url: string) => {
-  const splitExtReg = /(?:.*)(?<=\.)/;
-  const type = url.replace(splitExtReg, '');
-  /**
-   * https://vcsplay.scjtonline.cn:8200/live/HD_1569b634-4789-11eb-ab67-3cd2e55e0b20.m3u8?auth_key=1681179278-0-0-5c54a376f2ca32d05c4a152ee96336e9
-   * 如果是这种格式的m3u8，则截取的是这一部分.m3u8?auth_key=1681179278-0-0-5c54a376f2ca32d05c4a152ee96336e9
-   */
-  if (type.startsWith('m3u8')) return VideoPlayerType.m3u8;
-  if (type.startsWith('mp4')) return VideoPlayerType.mp4;
-  if (type.startsWith('webm')) return VideoPlayerType.webm;
-  return;
-};
+export enum VideoPlayerType {
+  m3u8 = 'application/x-mpegURL',
+  mp4 = 'video/mp4',
+  webm = 'video/webm',
+}
+
+export const getVideoTypeByUrl = (url: string) => {
+  const splitExtReg = /(?:.*)(?<=\.)/;
+  const type = url.replace(splitExtReg, '');
+  /**
+   * https://vcsplay.scjtonline.cn:8200/live/HD_1569b634-4789-11eb-ab67-3cd2e55e0b20.m3u8?auth_key=1681179278-0-0-5c54a376f2ca32d05c4a152ee96336e9
+   * 如果是这种格式的m3u8，则截取的是这一部分.m3u8?auth_key=1681179278-0-0-5c54a376f2ca32d05c4a152ee96336e9
+   */
+  if (type.startsWith('m3u8')) return VideoPlayerType.m3u8;
+  if (type.startsWith('mp4')) return VideoPlayerType.mp4;
+  if (type.startsWith('webm')) return VideoPlayerType.webm;
+  return VideoPlayerType.webm;
+};

@@ -15,9 +15,13 @@
   const getDesign = computed(() => {
     const { option, persetOption } = props.config;
     const { componentInfo } = option;
-    const { flowmeterConfig, unit } = componentInfo || {};
+    const { flowmeterConfig, unit, fontColor } = componentInfo || {};
     const { backgroundColor, waveFirst, waveSecond, waveThird } = flowmeterConfig || {};
-    const { flowmeterConfig: presetFlowmeterConfig, unit: persetUnit } = persetOption || {};
+    const {
+      flowmeterConfig: presetFlowmeterConfig,
+      unit: persetUnit,
+      fontColor: presetFontColor,
+    } = persetOption || {};
     const {
       backgroundColor: presetBackgroundColor,
       waveFirst: presetWaveFirst,
@@ -30,6 +34,7 @@
       waveSecond: waveSecond ?? presetWaveSecond,
       waveThird: waveThird ?? presetWaveThird,
       unit: unit ?? persetUnit,
+      fontColor: fontColor ?? presetFontColor,
     };
   });
 
@@ -93,6 +98,7 @@
     </svg>
     <div
       class="absolute w-full h-full top-0 left-0 text-center text-lg flex items-center justify-center flex-col"
+      :style="{ color: getDesign.fontColor }"
     >
       <div>{{ currentValue }}</div>
       <div class="ml-1">{{ getDesign.unit }}</div>

@@ -7,11 +7,9 @@ import {
   PublicPresetOptions,
 } from '/@/views/visual/packages/index.type';
 import { PublicConfigClass, componentInitConfig } from '/@/views/visual/packages/publicConfig';
-import { ComponentConfigFieldEnum } from '/@/views/visual/packages/enum';
 
 export const option: PublicPresetOptions = {
-  [ComponentConfigFieldEnum.FONT_COLOR]: '#',
-  [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
+  componetDesign: false,
 };
 
 export default class Config extends PublicConfigClass implements CreateComponentType {

+import { getCameraList } from '/@/api/camera/cameraManager';
+import { CameraModel } from '/@/api/camera/model/cameraModel';
+import { FormSchema } from '/@/components/Form';
+
+export enum FormFieldEnum {
+  VIDEO_TYPE = 'type',
+  VIDEO_PLAY_URL = 'url',
+  VIDEO_CONFIG = 'videoConfig',
+  ACCESS_MODE = 'accessMode',
+  VIDEO_ID = 'id',
+  ORGANIZATION_ID = 'organizationId',
+}
+
+export interface DataSourceValueType {
+  [FormFieldEnum.VIDEO_TYPE]?: string;
+  [FormFieldEnum.VIDEO_PLAY_URL]?: string;
+  [FormFieldEnum.ACCESS_MODE]?: number;
+  [FormFieldEnum.VIDEO_ID]?: string;
+  [FormFieldEnum.ORGANIZATION_ID]?: string;
+}
+
+export enum VideoOriginalEnum {
+  CUSTOM = 'CUSTOM',
+  VIDEO_MANAGE = 'VIDEO_MANAGE',
+}
+
+export enum VideoOriginalNameEnum {
+  CUSTOM = '自定义',
+  VIDEO_MANAGE = '流媒体获取',
+}
+
+export const formSchemas: FormSchema[] = [
+  {
+    field: FormFieldEnum.VIDEO_TYPE,
+    component: 'Select',
+    label: '视频来源',
+    colProps: { span: 8 },
+    defaultValue: VideoOriginalEnum.CUSTOM,
+    componentProps: {
+      placeholder: '请选择视频来源',
+      options: [
+        { label: VideoOriginalNameEnum[VideoOriginalEnum.CUSTOM], value: VideoOriginalEnum.CUSTOM },
+        {
+          label: VideoOriginalNameEnum[VideoOriginalEnum.VIDEO_MANAGE],
+          value: VideoOriginalEnum.VIDEO_MANAGE,
+        },
+      ],
+    },
+  },
+  {
+    field: FormFieldEnum.ACCESS_MODE,
+    component: 'InputNumber',
+    label: '视频流获取方式',
+    show: false,
+  },
+  {
+    field: FormFieldEnum.VIDEO_PLAY_URL,
+    component: 'Input',
+    label: '地址',
+    colProps: { span: 16 },
+    ifShow: ({ model }) => model[FormFieldEnum.VIDEO_TYPE] === VideoOriginalEnum.CUSTOM,
+    componentProps: {
+      placeholder: '请输入自定义地址',
+    },
+  },
+  {
+    field: FormFieldEnum.ORGANIZATION_ID,
+    component: 'OrgTreeSelect',
+    label: '组织',
+    colProps: { span: 8 },
+    ifShow: ({ model }) => model[FormFieldEnum.VIDEO_TYPE] === VideoOriginalEnum.VIDEO_MANAGE,
+    componentProps: {
+      showCreate: false,
+      allowClean: true,
+    },
+  },
+  {
+    field: FormFieldEnum.VIDEO_ID,
+    component: 'ApiSelect',
+    label: '地址',
+    colProps: { span: 8 },
+    ifShow: ({ model }) => model[FormFieldEnum.VIDEO_TYPE] === VideoOriginalEnum.VIDEO_MANAGE,
+    componentProps: ({ formActionType, formModel }) => {
+      const { setFieldsValue } = formActionType;
+      const organizationId = formModel[FormFieldEnum.ORGANIZATION_ID];
+      return {
+        placeholder: '请选择视频',
+        params: { organizationId },
+        api: getCameraList,
+        labelField: 'name',
+        valueField: 'id',
+        resultField: 'data',
+        onChange(value: string, options: CameraModel) {
+          console.log(options);
+          setFieldsValue({
+            [FormFieldEnum.ACCESS_MODE]: value ? (options || {}).accessMode : null,
+            [FormFieldEnum.VIDEO_PLAY_URL]: value ? (options || {}).videoUrl : null,
+          });
+        },
+      };
+    },
+  },
+];

 <script lang="ts" setup>
   import { CreateComponentType } from '/@/views/visual/packages/index.type';
   import { BasicForm, useForm } from '/@/components/Form';
-  import { dataSourceSchema } from '/@/views/visual/board/detail/config/basicConfiguration';
   import {
     PublicComponentValueType,
     PublicFormInstaceType,
   } from '/@/views/visual/dataSourceBindPanel/index.type';
+  import { DataSourceValueType, FormFieldEnum, formSchemas } from './datasource.config';
+  import { DataSource, VideoConfigType } from '/@/views/visual/palette/types';
 
-  const props = defineProps<{
+  defineProps<{
     values: PublicComponentValueType;
     componentConfig: CreateComponentType;
   }>();
@@ -17,15 +18,19 @@
     showActionButtonGroup: false,
     layout: 'horizontal',
     labelCol: { span: 0 },
-    schemas: dataSourceSchema(false, props.componentConfig.componentConfig.key),
+    schemas: formSchemas,
   });
 
   const getFormValues = () => {
-    return getFieldsValue();
+    const value = getFieldsValue() as DataSourceValueType;
+    return {
+      [FormFieldEnum.VIDEO_CONFIG]: value as VideoConfigType,
+    };
   };
 
-  const setFormValues = (record: Recordable) => {
-    return setFieldsValue(record);
+  const setFormValues = (record: DataSource) => {
+    const { videoConfig = {} } = record;
+    return setFieldsValue(videoConfig);
   };
 
   defineExpose({

 <script lang="ts" setup>
-  import { ComponentPropsConfigType, DataFetchUpdateFn } from '/@/views/visual/packages/index.type';
+  import { ComponentMode, ComponentPropsConfigType } from '/@/views/visual/packages/index.type';
   import { option } from './config';
-  import { useDataFetch } from '/@/views/visual/packages/hook/useSocket';
-  import { BasicVideoPlay } from '/@/components/Video';
+  import { BasicVideoPlay, getVideoTypeByUrl } from '/@/components/Video';
   import { computed } from 'vue';
   import { VideoJsPlayerOptions } from 'video.js';
+  import { AccessMode } from '/@/views/camera/manage/config.data';
+  import { onMounted } from 'vue';
+  import { unref } from 'vue';
+  import { getStreamingPlayUrl } from '/@/api/camera/cameraManager';
+  import { ref } from 'vue';
+  import { Spin } from 'ant-design-vue';
 
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;
   }>();
 
+  const loading = ref(true);
+
+  const getIsSelectPreviewMode = computed(() => {
+    return props.config.option.mode === ComponentMode.SELECT_PREVIEW;
+  });
+
+  const getIsStreamingMode = computed(() => {
+    const { option } = props.config;
+    const { videoConfig } = option;
+    return videoConfig?.accessMode === AccessMode.Streaming;
+  });
+
+  const playSource = ref<Record<'src' | 'type', string>>(
+    {} as unknown as Record<'src' | 'type', string>
+  );
+
+  const exampleVideoPlay =
+    'https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm';
+
+  const getVideoPlaySources = computed(() => {
+    const { option } = props.config;
+    const { videoConfig } = option;
+    const { url } = videoConfig || {};
+    return Object.assign(
+      {
+        src: unref(getIsSelectPreviewMode) ? exampleVideoPlay : url,
+        type: getVideoTypeByUrl(url || ''),
+      },
+      unref(playSource)
+    );
+  });
+
   const getOptions = computed<VideoJsPlayerOptions>(() => {
     const { option } = props.config;
     const { itemHeightRatio, itemWidthRatio, widthPx, heightPx } = option;
@@ -18,21 +55,48 @@
     return {
       width: currentW - 8,
       height: currentH - 8,
-      sources: [
-        {
-          src: 'https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm',
-        },
-      ],
+      sources: unref(getVideoPlaySources).src
+        ? ([unref(getVideoPlaySources)] as VideoJsPlayerOptions['sources'])
+        : [],
     };
   });
 
-  const updateFn: DataFetchUpdateFn = (_message) => {};
+  const handleGetVideoPlayUrl = async () => {
+    try {
+      if (unref(getIsStreamingMode) && !unref(getVideoPlaySources).src) {
+        const { option } = props.config;
+        const { videoConfig } = option;
+        if (!videoConfig?.id) return;
+        const { data: { url } = { url: '' } } = await getStreamingPlayUrl(videoConfig?.id);
+        playSource.value = {
+          src: url,
+          type: getVideoTypeByUrl(url),
+        };
+      }
+    } finally {
+      loading.value = false;
+    }
+  };
 
-  useDataFetch(props, updateFn);
+  onMounted(() => {
+    handleGetVideoPlayUrl();
+  });
 </script>
 
 <template>
   <main class="w-full h-full flex flex-col justify-center items-center p-2">
-    <BasicVideoPlay :options="getOptions" />
+    <Spin :spinning="loading" wrapper-class-name="video-spin">
+      <BasicVideoPlay :options="getOptions" />
+    </Spin>
   </main>
 </template>
+
+<style lang="less" scoped>
+  .video-spin {
+    @apply w-full h-full;
+
+    :deep(.ant-spin-container) {
+      @apply w-full h-full;
+    }
+  }
+</style>

 import { createComponent } from '..';
 import { transformComponentKey } from '../componentMap';
-import { ConfigType, CreateComponentType } from '../index.type';
+import { ConfigType, CreateComponentType, PublicComponentOptions } from '../index.type';
 
 export const useGetComponentConfig = (
   key: string,
-  options: Recordable = {}
+  options: Partial<PublicComponentOptions> = {}
 ): CreateComponentType => {
   try {
     const config = createComponent({ key: transformComponentKey(key) } as ConfigType, options);

@@ -98,12 +98,25 @@ export interface PublicPresetOptions {
   [key: string]: any;
 }
 
+export enum ComponentMode {
+  /**
+   * @description 选择预览
+   */
+  SELECT_PREVIEW = 'SELECT_PREVIEW',
+
+  /**
+   * @description 绑定数据源后
+   */
+  BOUND_PREVIEW = 'BOUND_PREVIEW',
+}
+
 export interface PublicComponentOptions {
   uuid: string;
   widthPx: number;
   heightPx: number;
   itemWidthRatio: number;
   itemHeightRatio: number;
+  mode: ComponentMode;
 
   dataSource?: DataSource[];
   [key: string]: any;

@@ -2,7 +2,7 @@
   import { computed } from 'vue';
   import { WidgetDataType } from '../../hooks/useDataSource';
   import { fetchViewComponent } from '../../../packages';
-  import { ConfigType } from '/@/views/visual/packages/index.type';
+  import { ComponentMode, ConfigType } from '/@/views/visual/packages/index.type';
   import { ExtraDataSource } from '../../types';
   import { CSSProperties } from 'vue';
   import { toRaw } from 'vue';
@@ -36,6 +36,7 @@
       heightPx,
       itemWidthRatio,
       itemHeightRatio,
+      mode: ComponentMode.BOUND_PREVIEW,
     });
   });
 

@@ -26,6 +26,7 @@ export interface DataSource {
   attributeRename: string;
   componentInfo: ComponentInfo;
   customCommand: CustomCommand;
+  videoConfig?: VideoConfigType;
 }
 
 export interface ExtraDataSource extends DataSource, PublicComponentOptions {
@@ -78,3 +79,11 @@ export interface ApiDataBoardDataType {
 export interface ApiDataBoardInfoType {
   data: ApiDataBoardDataType;
 }
+
+export interface VideoConfigType {
+  organizationId?: string;
+  id?: string;
+  accessMode?: number;
+  type?: string;
+  url?: string;
+}

@@ -4,6 +4,7 @@
   import { computed, ref } from 'vue';
   import { Tabs } from 'ant-design-vue';
   import {
+    ComponentMode,
     ConfigType,
     PackagesCategoryEnum,
     PackagesCategoryNameEnum,
@@ -41,7 +42,7 @@
   });
 
   const getBindConfig = (key: string) => {
-    const config = createComponent({ key } as ConfigType);
+    const config = createComponent({ key } as ConfigType, { mode: ComponentMode.SELECT_PREVIEW });
     return {
       config,
     };