Merge branch 'main_dev' into refractor_home

@@ -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;
+};

+import cloneDeep from 'lodash-es/cloneDeep';
+import { CircleFlowmeterConfig } from '.';
+import {
+  ConfigType,
+  CreateComponentType,
+  PublicComponentOptions,
+  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.SHOW_DEVICE_NAME]: false,
+  [ComponentConfigFieldEnum.UNIT]: 'm',
+  [ComponentConfigFieldEnum.FONT_COLOR]: '#fff',
+  [ComponentConfigFieldEnum.FLOWMETER_CONFIG]: {
+    [ComponentConfigFieldEnum.BACKGROUND_COLOR]: '#8badcb',
+    [ComponentConfigFieldEnum.WAVE_FIRST]: '#4579e2',
+    [ComponentConfigFieldEnum.WAVE_SECOND]: '#3461c1',
+    [ComponentConfigFieldEnum.WAVE_THIRD]: '#2d55aa',
+  },
+};
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key: string = CircleFlowmeterConfig.key;
+
+  public attr = { ...componentInitConfig };
+
+  public componentConfig: ConfigType = cloneDeep(CircleFlowmeterConfig);
+
+  public persetOption = cloneDeep(option);
+
+  public option: PublicComponentOptions;
+
+  constructor(option: PublicComponentOptions) {
+    super();
+    this.option = { ...option };
+  }
+}

+<script lang="ts" setup>
+  import { ComponentConfigFieldEnum } from '/@/views/visual/packages/enum';
+  import { useForm, BasicForm } from '/@/components/Form';
+  import { PublicFormInstaceType } from '/@/views/visual/dataSourceBindPanel/index.type';
+  import { option } from './config';
+  import { ComponentInfo } from '/@/views/visual/palette/types';
+  import { toRaw } from 'vue';
+
+  const [register, { getFieldsValue, setFieldsValue, resetFields }] = useForm({
+    schemas: [
+      {
+        field: ComponentConfigFieldEnum.FONT_COLOR,
+        label: '字体颜色',
+        component: 'ColorPicker',
+        changeEvent: 'update:value',
+        defaultValue: option.fontColor,
+      },
+      {
+        field: ComponentConfigFieldEnum.BACKGROUND_COLOR,
+        label: '背景颜色',
+        component: 'ColorPicker',
+        changeEvent: 'update:value',
+        defaultValue: option.flowmeterConfig?.backgroundColor,
+      },
+      {
+        field: ComponentConfigFieldEnum.WAVE_FIRST,
+        label: '浪1',
+        component: 'ColorPicker',
+        changeEvent: 'update:value',
+        defaultValue: option.flowmeterConfig?.waveFirst,
+      },
+      {
+        field: ComponentConfigFieldEnum.WAVE_SECOND,
+        label: '浪2',
+        component: 'ColorPicker',
+        changeEvent: 'update:value',
+        defaultValue: option.flowmeterConfig?.waveSecond,
+      },
+      {
+        field: ComponentConfigFieldEnum.WAVE_THIRD,
+        label: '浪3',
+        component: 'ColorPicker',
+        changeEvent: 'update:value',
+        defaultValue: option.flowmeterConfig?.waveThird,
+      },
+      {
+        field: ComponentConfigFieldEnum.UNIT,
+        label: '单位',
+        component: 'Input',
+        defaultValue: option.unit,
+      },
+    ],
+    showActionButtonGroup: false,
+    labelWidth: 120,
+    baseColProps: {
+      span: 12,
+    },
+  });
+
+  const getFormValues = () => {
+    const value = getFieldsValue();
+    return {
+      ...value,
+      flowmeterConfig: {
+        backgroundColor: value[ComponentConfigFieldEnum.BACKGROUND_COLOR],
+        waveFirst: value[ComponentConfigFieldEnum.WAVE_FIRST],
+        waveSecond: value[ComponentConfigFieldEnum.WAVE_SECOND],
+        waveThird: value[ComponentConfigFieldEnum.WAVE_THIRD],
+      },
+    } as ComponentInfo;
+  };
+
+  const setFormValues = (data: ComponentInfo) => {
+    const { flowmeterConfig } = data || {};
+    return setFieldsValue({
+      ...toRaw(data),
+      [ComponentConfigFieldEnum.BACKGROUND_COLOR]: flowmeterConfig?.backgroundColor,
+      [ComponentConfigFieldEnum.WAVE_FIRST]: flowmeterConfig?.waveFirst,
+      [ComponentConfigFieldEnum.WAVE_SECOND]: flowmeterConfig?.waveSecond,
+      [ComponentConfigFieldEnum.WAVE_THIRD]: flowmeterConfig?.waveThird,
+    });
+  };
+
+  defineExpose({
+    getFormValues,
+    setFormValues,
+    resetFormValues: resetFields,
+  } as PublicFormInstaceType);
+</script>
+
+<template>
+  <BasicForm @register="register" />
+</template>

+<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';
+
+  const props = defineProps<{
+    values: PublicComponentValueType;
+    componentConfig: CreateComponentType;
+  }>();
+
+  const [register, { getFieldsValue, setFieldsValue, validate, resetFields }] = useForm({
+    labelWidth: 0,
+    showActionButtonGroup: false,
+    layout: 'horizontal',
+    labelCol: { span: 0 },
+    schemas: dataSourceSchema(false, props.componentConfig.componentConfig.key),
+  });
+
+  const getFormValues = () => {
+    return getFieldsValue();
+  };
+
+  const setFormValues = (record: Recordable) => {
+    return setFieldsValue(record);
+  };
+
+  defineExpose({
+    getFormValues,
+    setFormValues,
+    validate,
+    resetFormValues: resetFields,
+  } as PublicFormInstaceType);
+</script>
+
+<template>
+  <BasicForm @register="register" />
+</template>

+import { useComponentKeys } from '/@/views/visual/packages/hook/useComponentKeys';
+import { ConfigType, PackagesCategoryEnum } from '/@/views/visual/packages/index.type';
+
+const componentKeys = useComponentKeys('CircleFlowmeter');
+
+export const CircleFlowmeterConfig: ConfigType = {
+  ...componentKeys,
+  title: '流量计2',
+  package: PackagesCategoryEnum.FLOWMETER,
+};

+<script lang="ts" setup>
+  import { ComponentPropsConfigType, DataFetchUpdateFn } from '/@/views/visual/packages/index.type';
+  import { option } from './config';
+  import { useDataFetch } from '/@/views/visual/packages/hook/useSocket';
+  import { computed } from 'vue';
+  import { ref } from 'vue';
+  import { unref } from 'vue';
+
+  const props = defineProps<{
+    config: ComponentPropsConfigType<typeof option>;
+  }>();
+
+  const currentValue = ref(25);
+
+  const getDesign = computed(() => {
+    const { option, persetOption } = props.config;
+    const { componentInfo } = option;
+    const { flowmeterConfig, unit, fontColor } = componentInfo || {};
+    const { backgroundColor, waveFirst, waveSecond, waveThird } = flowmeterConfig || {};
+    const {
+      flowmeterConfig: presetFlowmeterConfig,
+      unit: persetUnit,
+      fontColor: presetFontColor,
+    } = persetOption || {};
+    const {
+      backgroundColor: presetBackgroundColor,
+      waveFirst: presetWaveFirst,
+      waveSecond: presetWaveSecond,
+      waveThird: presetWaveThird,
+    } = presetFlowmeterConfig || {};
+    return {
+      backgroundColor: backgroundColor ?? presetBackgroundColor,
+      waveFirst: waveFirst ?? presetWaveFirst,
+      waveSecond: waveSecond ?? presetWaveSecond,
+      waveThird: waveThird ?? presetWaveThird,
+      unit: unit ?? persetUnit,
+      fontColor: fontColor ?? presetFontColor,
+    };
+  });
+
+  const getSize = computed(() => {
+    const { option } = props.config;
+    const { itemHeightRatio, itemWidthRatio, widthPx, heightPx } = option;
+    const currentW = (widthPx * itemWidthRatio) / 100;
+    const currentH = (heightPx * itemHeightRatio) / 100;
+
+    const size = Math.min(currentW, currentH);
+    return size;
+  });
+
+  const getWaveHeight = computed(() => {
+    const value = unref(currentValue);
+    return value <= 0 ? 0 : -value - 15;
+  });
+
+  const getHeight = computed(() => {
+    const value = unref(currentValue);
+    return value >= 100 ? 0 : 100 - value + 10;
+  });
+
+  const updateFn: DataFetchUpdateFn = (message, attribute) => {
+    const { data = {} } = message;
+    const [latest] = data[attribute] || [];
+    const [_, value] = latest;
+    currentValue.value = Number(value);
+  };
+
+  useDataFetch(props, updateFn);
+</script>
+
+<template>
+  <main class="w-full h-full flex flex-col justify-center items-center relative">
+    <svg
+      class="waves-rect"
+      viewBox="0 0 100 100"
+      preserveAspectRatio="none"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlns:xlink="http://www.w3.org/1999/xlink"
+      clip-path="circle()"
+      transform="scale(0.9)"
+      :style="{ width: `${getSize}px`, height: `${getSize}px` }"
+    >
+      <defs>
+        <path
+          id="wave"
+          d="M-160 118c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v100h-352z"
+        />
+      </defs>
+      <circle cx="50" cy="50" r="50" :fill="getDesign.backgroundColor" />
+
+      <g class="height" :transform="`translate(0 ${getWaveHeight})`">
+        <use class="wave waveFirst" xlink:href="#wave" :fill="getDesign.waveFirst" x="0" y="0" />
+        <use class="wave waveSecond" xlink:href="#wave" :fill="getDesign.waveSecond" x="0" y="2" />
+        <use class="wave waveThird" xlink:href="#wave" :fill="getDesign.waveThird" x="0" y="4" />
+      </g>
+      <rect
+        :transform="`translate(0 ${getHeight})`"
+        x="0"
+        y="0"
+        width="100"
+        height="100"
+        :fill="getDesign.waveThird"
+      />
+    </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>
+    </div>
+  </main>
+</template>
+
+<style lang="less" scoped>
+  @keyframes move {
+    from {
+      transform: translate(-90px, 0%);
+    }
+
+    to {
+      transform: translate(85px, 0%);
+    }
+  }
+
+  .wave {
+    animation: move 3s linear infinite;
+    animation-play-state: running;
+  }
+
+  .wave:nth-child(1) {
+    animation-delay: -2s;
+    animation-duration: 9s;
+  }
+
+  .wave:nth-child(2) {
+    animation-delay: -4s;
+    animation-duration: 6s;
+  }
+
+  .wave:nth-child(3) {
+    animation-delay: -6s;
+    animation-duration: 3s;
+  }
+
+  .waves-rect > g + rect {
+    transition: transform linear 1s;
+  }
+
+  .height {
+    transition: transform linear 1s;
+  }
+</style>

@@ -3,10 +3,19 @@
   import { useForm, BasicForm } from '/@/components/Form';
   import { PublicFormInstaceType } from '/@/views/visual/dataSourceBindPanel/index.type';
   import { option } from './config';
+  import { ComponentInfo } from '/@/views/visual/palette/types';
+  import { toRaw } from 'vue';
 
   const [register, { getFieldsValue, setFieldsValue, resetFields }] = useForm({
     schemas: [
       {
+        field: ComponentConfigFieldEnum.FONT_COLOR,
+        label: '字体颜色',
+        component: 'ColorPicker',
+        changeEvent: 'update:value',
+        defaultValue: option.fontColor,
+      },
+      {
         field: ComponentConfigFieldEnum.BACKGROUND_COLOR,
         label: '背景颜色',
         component: 'ColorPicker',
@@ -49,11 +58,27 @@
   });
 
   const getFormValues = () => {
-    return getFieldsValue();
+    const value = getFieldsValue();
+    return {
+      ...value,
+      flowmeterConfig: {
+        backgroundColor: value[ComponentConfigFieldEnum.BACKGROUND_COLOR],
+        waveFirst: value[ComponentConfigFieldEnum.WAVE_FIRST],
+        waveSecond: value[ComponentConfigFieldEnum.WAVE_SECOND],
+        waveThird: value[ComponentConfigFieldEnum.WAVE_THIRD],
+      },
+    } as ComponentInfo;
   };
 
-  const setFormValues = (data: Recordable) => {
-    return setFieldsValue(data);
+  const setFormValues = (data: ComponentInfo) => {
+    const { flowmeterConfig } = data || {};
+    return setFieldsValue({
+      ...toRaw(data),
+      [ComponentConfigFieldEnum.BACKGROUND_COLOR]: flowmeterConfig?.backgroundColor,
+      [ComponentConfigFieldEnum.WAVE_FIRST]: flowmeterConfig?.waveFirst,
+      [ComponentConfigFieldEnum.WAVE_SECOND]: flowmeterConfig?.waveSecond,
+      [ComponentConfigFieldEnum.WAVE_THIRD]: flowmeterConfig?.waveThird,
+    });
   };
 
   defineExpose({

@@ -10,14 +10,18 @@
     config: ComponentPropsConfigType<typeof option>;
   }>();
 
-  const currentValue = ref(0);
+  const currentValue = ref(25);
 
   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,
     };
   });
 
@@ -54,7 +59,7 @@
 </script>
 
 <template>
-  <main class="w-full h-full flex flex-col justify-center items-center">
+  <main class="w-full h-full flex flex-col justify-center items-center relative">
     <svg
       class="waves-rect"
       viewBox="0 0 100 100"
@@ -90,21 +95,14 @@
         height="100"
         :fill="getDesign.waveThird"
       />
-
-      <foreignObject
-        x="0"
-        y="0"
-        width="100"
-        height="100"
-        text-anchor="middle"
-        dominant-baseline="middle"
-      >
-        <div xmlns="http://www.w3.org/1999/xhtml" class="text">
-          <span>{{ currentValue }}</span>
-          <span class="ml-1">{{ getDesign.unit }}</span>
-        </div>
-      </foreignObject>
     </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>
+    </div>
   </main>
 </template>
 

+import cloneDeep from 'lodash-es/cloneDeep';
+import { ThermometerConfig } from '.';
+import {
+  ConfigType,
+  CreateComponentType,
+  PublicComponentOptions,
+  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,
+};
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key: string = ThermometerConfig.key;
+
+  public attr = { ...componentInitConfig };
+
+  public componentConfig: ConfigType = cloneDeep(ThermometerConfig);
+
+  public persetOption = cloneDeep(option);
+
+  public option: PublicComponentOptions;
+
+  constructor(option: PublicComponentOptions) {
+    super();
+    this.option = { ...option };
+  }
+}

+<script lang="ts" setup>
+  import { ComponentConfigFieldEnum } from '/@/views/visual/packages/enum';
+  import { useForm, BasicForm } from '/@/components/Form';
+  import { PublicFormInstaceType } from '/@/views/visual/dataSourceBindPanel/index.type';
+
+  const [register, { getFieldsValue, setFieldsValue, resetFields }] = useForm({
+    schemas: [
+      {
+        field: ComponentConfigFieldEnum.FONT_COLOR,
+        label: '数值字体颜色',
+        component: 'ColorPicker',
+        changeEvent: 'update:value',
+        componentProps: {
+          defaultValue: '#FD7347',
+        },
+      },
+      {
+        field: ComponentConfigFieldEnum.SHOW_DEVICE_NAME,
+        label: '显示设备名称',
+        component: 'Checkbox',
+      },
+    ],
+    showActionButtonGroup: false,
+    labelWidth: 120,
+    baseColProps: {
+      span: 12,
+    },
+  });
+
+  const getFormValues = () => {
+    return getFieldsValue();
+  };
+
+  const setFormValues = (data: Recordable) => {
+    return setFieldsValue(data);
+  };
+
+  defineExpose({
+    getFormValues,
+    setFormValues,
+    resetFormValues: resetFields,
+  } as PublicFormInstaceType);
+</script>
+
+<template>
+  <BasicForm @register="register" />
+</template>

+<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';
+
+  const props = defineProps<{
+    values: PublicComponentValueType;
+    componentConfig: CreateComponentType;
+  }>();
+
+  const [register, { getFieldsValue, setFieldsValue, validate, resetFields }] = useForm({
+    labelWidth: 0,
+    showActionButtonGroup: false,
+    layout: 'horizontal',
+    labelCol: { span: 0 },
+    schemas: dataSourceSchema(false, props.componentConfig.componentConfig.key),
+  });
+
+  const getFormValues = () => {
+    return getFieldsValue();
+  };
+
+  const setFormValues = (record: Recordable) => {
+    return setFieldsValue(record);
+  };
+
+  defineExpose({
+    getFormValues,
+    setFormValues,
+    validate,
+    resetFormValues: resetFields,
+  } as PublicFormInstaceType);
+</script>
+
+<template>
+  <BasicForm @register="register" />
+</template>

+import { useComponentKeys } from '/@/views/visual/packages/hook/useComponentKeys';
+import { ConfigType, PackagesCategoryEnum } from '/@/views/visual/packages/index.type';
+
+const componentKeys = useComponentKeys('Thermometer');
+
+export const ThermometerConfig: ConfigType = {
+  ...componentKeys,
+  title: '温度计',
+  package: PackagesCategoryEnum.FLOWMETER,
+};

+<script lang="ts" setup>
+  import { ComponentPropsConfigType, DataFetchUpdateFn } from '/@/views/visual/packages/index.type';
+  import { option } from './config';
+  import { useDataFetch } from '/@/views/visual/packages/hook/useSocket';
+  import { ref } from 'vue';
+  import { computed } from 'vue';
+  import { unref } from 'vue';
+
+  const props = defineProps<{
+    config: ComponentPropsConfigType<typeof option>;
+  }>();
+
+  const currentValue = ref(50);
+
+  const getValue = computed(() => {
+    const maxHeight = 190;
+    const minHeight = 15;
+    const height = maxHeight - minHeight;
+    const rangeNumber = 7;
+    const itemRange = 20;
+    const itemHeight = height / (rangeNumber * itemRange);
+    const value = unref(currentValue);
+    const transformValue =
+      maxHeight - (value >= 0 ? value + 20 : itemRange - Math.abs(value)) * itemHeight;
+
+    return transformValue >= maxHeight
+      ? maxHeight
+      : transformValue <= minHeight
+      ? minHeight
+      : transformValue;
+  });
+
+  const updateFn: DataFetchUpdateFn = (message, attribute) => {
+    const { data = {} } = message;
+    const [latest] = data[attribute] || [];
+    const [_, value] = latest;
+
+    currentValue.value = Number(value);
+  };
+
+  useDataFetch(props, updateFn);
+</script>
+
+<template>
+  <main class="w-full h-full flex flex-col justify-center items-center relative">
+    <svg class="flowmeter-thermometer" viewBox="0 0 200 250" xmlns="http://www.w3.org/2000/svg">
+      <defs>
+        <radialGradient id="thermometerdiv_meter_2" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
+          <stop offset="0%" style="stop-color: rgb(230, 200, 200)" />
+          <stop offset="90%" style="stop-color: rgb(230, 0, 0)" />
+        </radialGradient>
+        <clipPath id="over">
+          <rect width="100" height="190" x="100" y="10" />
+        </clipPath>
+      </defs>
+      <circle
+        r="9.25"
+        cx="109"
+        cy="14.25"
+        style="fill: rgb(255, 255, 255); stroke: rgb(136, 136, 136); stroke-width: 1px"
+      />
+      <rect
+        x="99.75"
+        y="14.25"
+        height="192.75"
+        width="18.5"
+        style="
+          shape-rendering: crispEdges;
+          fill: rgb(255, 255, 255);
+          stroke: rgb(136, 136, 136);
+          stroke-width: 1px;
+        "
+      />
+      <circle r="8.75" cx="109" cy="14.25" style="fill: rgb(255, 255, 255); stroke: none" />
+      <circle
+        r="18"
+        cx="109"
+        cy="207"
+        style="fill: rgb(255, 255, 255); stroke: rgb(136, 136, 136)"
+      />
+      <rect
+        x="100.25"
+        y="14.25"
+        height="192.75"
+        width="17.5"
+        style="shape-rendering: crispEdges; fill: rgb(255, 255, 255); stroke: none"
+      />
+      <line
+        class="thermometer-min-line"
+        x1="99.75"
+        x2="140.25"
+        y1="165"
+        y2="165"
+        style="stroke: rgb(136, 136, 136); stroke-width: 1px; shape-rendering: crispEdges"
+      />
+      <text
+        class="thermometer-min-label"
+        x="120.25"
+        y="168.46428571428572"
+        dy="0.72em"
+        style="fill: rgb(0, 0, 230); font-size: 10px"
+      >
+        min
+      </text>
+      <line
+        class="thermometer-max-line"
+        x1="99.75"
+        x2="140.25"
+        y1="40"
+        y2="40"
+        style="stroke: rgb(136, 136, 136); stroke-width: 1px; shape-rendering: crispEdges"
+      />
+      <text
+        class="thermometer-max-label"
+        x="120.25"
+        y="35.285714285714306"
+        style="fill: rgb(230, 0, 0); font-size: 10px"
+      >
+        max
+      </text>
+      <rect
+        class="thermometer-mercury-column"
+        x="104"
+        :y="getValue"
+        width="10.5"
+        height="190"
+        style="shape-rendering: crispEdges; fill: rgb(230, 0, 0)"
+        clip-path="url(#over)"
+      />
+      <circle
+        r="13"
+        cx="109"
+        cy="207"
+        style="fill: url('#thermometerdiv_meter_2'); stroke: rgb(230, 0, 0); stroke-width: 2px"
+      />
+      <foreignObject>
+        <div></div>
+      </foreignObject>
+      <g
+        class="thermometer-temperature-axis"
+        transform="translate(99.75,0)"
+        fill="none"
+        font-size="10"
+        font-family="sans-serif"
+        text-anchor="end"
+      >
+        <g class="tick" opacity="1" transform="translate(0,190)">
+          <line
+            stroke="currentColor"
+            x2="-7"
+            style="stroke: rgb(136, 136, 136); shape-rendering: crispEdges; stroke-width: 1px"
+          />
+          <foreignObject xmlns="http://www.w3.org/2000/svg" x="-55" y="-10" width="45" height="20">
+            <div class="tick-label" xmlns="http://www.w3.org/1999/xhtml">-20</div>
+          </foreignObject>
+        </g>
+        <g class="tick" opacity="1" transform="translate(0,165)">
+          <line
+            stroke="currentColor"
+            x2="-7"
+            style="stroke: rgb(136, 136, 136); shape-rendering: crispEdges; stroke-width: 1px"
+          />
+          <foreignObject xmlns="http://www.w3.org/2000/svg" x="-55" y="-10" width="45" height="20">
+            <div class="tick-label" xmlns="http://www.w3.org/1999/xhtml">0</div>
+          </foreignObject>
+        </g>
+        <g class="tick" opacity="1" transform="translate(0,140)">
+          <line
+            stroke="currentColor"
+            x2="-7"
+            style="stroke: rgb(136, 136, 136); shape-rendering: crispEdges; stroke-width: 1px"
+          />
+          <foreignObject xmlns="http://www.w3.org/2000/svg" x="-55" y="-10" width="45" height="20">
+            <div class="tick-label" xmlns="http://www.w3.org/1999/xhtml">20</div>
+          </foreignObject>
+        </g>
+        <g class="tick" opacity="1" transform="translate(0,115)">
+          <line
+            stroke="currentColor"
+            x2="-7"
+            style="stroke: rgb(136, 136, 136); shape-rendering: crispEdges; stroke-width: 1px"
+          />
+          <foreignObject xmlns="http://www.w3.org/2000/svg" x="-55" y="-10" width="45" height="20">
+            <div class="tick-label" xmlns="http://www.w3.org/1999/xhtml">40</div>
+          </foreignObject>
+        </g>
+        <g class="tick" opacity="1" transform="translate(0,90)">
+          <line
+            stroke="currentColor"
+            x2="-7"
+            style="stroke: rgb(136, 136, 136); shape-rendering: crispEdges; stroke-width: 1px"
+          />
+          <foreignObject xmlns="http://www.w3.org/2000/svg" x="-55" y="-10" width="45" height="20">
+            <div class="tick-label" xmlns="http://www.w3.org/1999/xhtml">60</div>
+          </foreignObject>
+        </g>
+        <g class="tick" opacity="1" transform="translate(0,65)">
+          <line
+            stroke="currentColor"
+            x2="-7"
+            style="stroke: rgb(136, 136, 136); shape-rendering: crispEdges; stroke-width: 1px"
+          />
+          <foreignObject xmlns="http://www.w3.org/2000/svg" x="-55" y="-10" width="45" height="20">
+            <div class="tick-label" xmlns="http://www.w3.org/1999/xhtml">80</div>
+          </foreignObject>
+        </g>
+        <g class="tick" opacity="1" transform="translate(0,40)">
+          <line
+            stroke="currentColor"
+            x2="-7"
+            style="stroke: rgb(136, 136, 136); shape-rendering: crispEdges; stroke-width: 1px"
+          />
+          <foreignObject xmlns="http://www.w3.org/2000/svg" x="-55" y="-10" width="45" height="20">
+            <div class="tick-label" xmlns="http://www.w3.org/1999/xhtml">100</div>
+          </foreignObject>
+        </g>
+        <g class="tick" opacity="1" transform="translate(0,15)">
+          <line
+            stroke="currentColor"
+            x2="-7"
+            style="stroke: rgb(136, 136, 136); shape-rendering: crispEdges; stroke-width: 1px"
+          />
+          <foreignObject xmlns="http://www.w3.org/2000/svg" x="-55" y="-10" width="45" height="20">
+            <div class="tick-label" xmlns="http://www.w3.org/1999/xhtml">120</div>
+          </foreignObject>
+        </g>
+      </g>
+    </svg>
+    <!-- <div class="absolute w-full h-full flex justify-center items-center bg-transparent">
+      <div class="transform translate-x-full text-lg text-gray-500">
+        <span>{{ currentValue }}</span>
+        <span>{{ '℃' }}</span>
+      </div>
+    </div> -->
+  </main>
+</template>
+
+<style scoped lang="less">
+  .tick-label {
+    font-size: 12px;
+    text-align: right;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: #5b6b73;
+  }
+
+  .thermometer-mercury-column {
+    transition: y 0.5s cubic-bezier(0.19, 1, 0.22, 1);
+  }
+</style>

+import { CircleFlowmeterConfig } from './CircleFlowmeter';
 import { RectFlowmeteConfig } from './RectFlowmeter';
+import { ThermometerConfig } from './Thermometer';
 
-export const FlowmeterList = [RectFlowmeteConfig];
+export const FlowmeterList = [RectFlowmeteConfig, CircleFlowmeterConfig, ThermometerConfig];

+import cloneDeep from 'lodash-es/cloneDeep';
+import { MonitorVideoConfig } from '.';
+import {
+  ConfigType,
+  CreateComponentType,
+  PublicComponentOptions,
+  PublicPresetOptions,
+} from '/@/views/visual/packages/index.type';
+import { PublicConfigClass, componentInitConfig } from '/@/views/visual/packages/publicConfig';
+
+export const option: PublicPresetOptions = {
+  componetDesign: false,
+};
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key: string = MonitorVideoConfig.key;
+
+  public attr = { ...componentInitConfig };
+
+  public componentConfig: ConfigType = cloneDeep(MonitorVideoConfig);
+
+  public persetOption = cloneDeep(option);
+
+  public option: PublicComponentOptions;
+
+  constructor(option: PublicComponentOptions) {
+    super();
+    this.option = { ...option };
+  }
+}

+<script lang="ts" setup>
+  import { ComponentConfigFieldEnum } from '/@/views/visual/packages/enum';
+  import { useForm, BasicForm } from '/@/components/Form';
+  import { PublicFormInstaceType } from '/@/views/visual/dataSourceBindPanel/index.type';
+
+  const [register, { getFieldsValue, setFieldsValue, resetFields }] = useForm({
+    schemas: [
+      {
+        field: ComponentConfigFieldEnum.FONT_COLOR,
+        label: '数值字体颜色',
+        component: 'ColorPicker',
+        changeEvent: 'update:value',
+        componentProps: {
+          defaultValue: '#FD7347',
+        },
+      },
+      {
+        field: ComponentConfigFieldEnum.SHOW_DEVICE_NAME,
+        label: '显示设备名称',
+        component: 'Checkbox',
+      },
+    ],
+    showActionButtonGroup: false,
+    labelWidth: 120,
+    baseColProps: {
+      span: 12,
+    },
+  });
+
+  const getFormValues = () => {
+    return getFieldsValue();
+  };
+
+  const setFormValues = (data: Recordable) => {
+    return setFieldsValue(data);
+  };
+
+  defineExpose({
+    getFormValues,
+    setFormValues,
+    resetFormValues: resetFields,
+  } as PublicFormInstaceType);
+</script>
+
+<template>
+  <BasicForm @register="register" />
+</template>

+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 {
+    PublicComponentValueType,
+    PublicFormInstaceType,
+  } from '/@/views/visual/dataSourceBindPanel/index.type';
+  import { DataSourceValueType, FormFieldEnum, formSchemas } from './datasource.config';
+  import { DataSource, VideoConfigType } from '/@/views/visual/palette/types';
+
+  defineProps<{
+    values: PublicComponentValueType;
+    componentConfig: CreateComponentType;
+  }>();
+
+  const [register, { getFieldsValue, setFieldsValue, validate, resetFields }] = useForm({
+    labelWidth: 0,
+    showActionButtonGroup: false,
+    layout: 'horizontal',
+    labelCol: { span: 0 },
+    schemas: formSchemas,
+  });
+
+  const getFormValues = () => {
+    const value = getFieldsValue() as DataSourceValueType;
+    return {
+      [FormFieldEnum.VIDEO_CONFIG]: value as VideoConfigType,
+    };
+  };
+
+  const setFormValues = (record: DataSource) => {
+    const { videoConfig = {} } = record;
+    return setFieldsValue(videoConfig);
+  };
+
+  defineExpose({
+    getFormValues,
+    setFormValues,
+    validate,
+    resetFormValues: resetFields,
+  } as PublicFormInstaceType);
+</script>
+
+<template>
+  <BasicForm @register="register" />
+</template>

+import { useComponentKeys } from '/@/views/visual/packages/hook/useComponentKeys';
+import { ConfigType, PackagesCategoryEnum } from '/@/views/visual/packages/index.type';
+
+const componentKeys = useComponentKeys('MonitorVideo');
+
+export const MonitorVideoConfig: ConfigType = {
+  ...componentKeys,
+  title: '监控视频',
+  package: PackagesCategoryEnum.OTHER,
+};

+<script lang="ts" setup>
+  import { ComponentMode, ComponentPropsConfigType } from '/@/views/visual/packages/index.type';
+  import { option } from './config';
+  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;
+    const currentW = widthPx * (itemWidthRatio / 100);
+    const currentH = heightPx * (itemHeightRatio / 100);
+    return {
+      width: currentW - 8,
+      height: currentH - 8,
+      sources: unref(getVideoPlaySources).src
+        ? ([unref(getVideoPlaySources)] as VideoJsPlayerOptions['sources'])
+        : [],
+    };
+  });
+
+  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;
+    }
+  };
+
+  onMounted(() => {
+    handleGetVideoPlayUrl();
+  });
+</script>
+
+<template>
+  <main class="w-full h-full flex flex-col justify-center items-center p-2">
+    <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 { MonitorVideoConfig } from './MonitorVideo';
+
+export const OtherList = [MonitorVideoConfig];

 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);

@@ -33,7 +33,7 @@ export enum PackagesCategoryEnum {
   CONTROL = 'CONTROL',
   MAP = 'MAP',
   FLOWMETER = 'FLOWMETER',
-  OTHER = 'FLOWMETER',
+  OTHER = 'OTHER',
 }
 
 /**
@@ -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;

 import { ControlList } from './components/Control';
-// import { FlowmeterList } from './components/Flowmeter';
+import { FlowmeterList } from './components/Flowmeter';
 import { InstrumentList } from './components/Instrument';
 import { MapList } from './components/Map';
+import { OtherList } from './components/Other';
 import { PictureList } from './components/Picture';
 import { TextList } from './components/Text';
 import { PackagesCategoryEnum, PackagesType } from './index.type';
@@ -12,5 +13,6 @@ export const packageList: PackagesType = {
   [PackagesCategoryEnum.PICTURE]: PictureList,
   [PackagesCategoryEnum.CONTROL]: ControlList,
   [PackagesCategoryEnum.MAP]: MapList,
-  // [PackagesCategoryEnum.FLOWMETER]: FlowmeterList,
+  [PackagesCategoryEnum.FLOWMETER]: FlowmeterList,
+  [PackagesCategoryEnum.OTHER]: OtherList,
 };

@@ -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,
     };