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

+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 { useForm, BasicForm } from '/@/components/Form';
   import { PublicFormInstaceType } from '/@/views/visual/dataSourceBindPanel/index.type';
   import { PublicFormInstaceType } from '/@/views/visual/dataSourceBindPanel/index.type';
   import { option } from './config';
   import { option } from './config';
+  import { ComponentInfo } from '/@/views/visual/palette/types';
+  import { toRaw } from 'vue';
 
 
   const [register, { getFieldsValue, setFieldsValue, resetFields }] = useForm({
   const [register, { getFieldsValue, setFieldsValue, resetFields }] = useForm({
     schemas: [
     schemas: [
       {
       {
+        field: ComponentConfigFieldEnum.FONT_COLOR,
+        label: '字体颜色',
+        component: 'ColorPicker',
+        changeEvent: 'update:value',
+        defaultValue: option.fontColor,
+      },
+      {
         field: ComponentConfigFieldEnum.BACKGROUND_COLOR,
         field: ComponentConfigFieldEnum.BACKGROUND_COLOR,
         label: '背景颜色',
         label: '背景颜色',
         component: 'ColorPicker',
         component: 'ColorPicker',
@@ -49,11 +58,27 @@
   });
   });
 
 
   const getFormValues = () => {
   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({
   defineExpose({

@@ -10,12 +10,12 @@
     config: ComponentPropsConfigType<typeof option>;
     config: ComponentPropsConfigType<typeof option>;
   }>();
   }>();
 
 
-  const currentValue = ref(0);
+  const currentValue = ref(25);
 
 
   const getDesign = computed(() => {
   const getDesign = computed(() => {
     const { option, persetOption } = props.config;
     const { option, persetOption } = props.config;
     const { componentInfo } = option;
     const { componentInfo } = option;
-    const { flowmeterConfig, unit } = componentInfo;
+    const { flowmeterConfig, unit } = componentInfo || {};
     const { backgroundColor, waveFirst, waveSecond, waveThird } = flowmeterConfig || {};
     const { backgroundColor, waveFirst, waveSecond, waveThird } = flowmeterConfig || {};
     const { flowmeterConfig: presetFlowmeterConfig, unit: persetUnit } = persetOption || {};
     const { flowmeterConfig: presetFlowmeterConfig, unit: persetUnit } = persetOption || {};
     const {
     const {
@@ -54,7 +54,7 @@
 </script>
 </script>
 
 
 <template>
 <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
     <svg
       class="waves-rect"
       class="waves-rect"
       viewBox="0 0 100 100"
       viewBox="0 0 100 100"
@@ -90,21 +90,13 @@
         height="100"
         height="100"
         :fill="getDesign.waveThird"
         :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>
     </svg>
+    <div
+      class="absolute w-full h-full top-0 left-0 text-center text-lg flex items-center justify-center flex-col"
+    >
+      <div>{{ currentValue }}</div>
+      <div class="ml-1">{{ getDesign.unit }}</div>
+    </div>
   </main>
   </main>
 </template>
 </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 { 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';
+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 = 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>

+<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('MonitorVideo');
+
+export const MonitorVideoConfig: ConfigType = {
+  ...componentKeys,
+  title: '监控视频',
+  package: PackagesCategoryEnum.OTHER,
+};

+<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 { BasicVideoPlay } from '/@/components/Video';
+  import { computed } from 'vue';
+  import { VideoJsPlayerOptions } from 'video.js';
+
+  const props = defineProps<{
+    config: ComponentPropsConfigType<typeof option>;
+  }>();
+
+  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: [
+        {
+          src: 'https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm',
+        },
+      ],
+    };
+  });
+
+  const updateFn: DataFetchUpdateFn = (_message) => {};
+
+  useDataFetch(props, updateFn);
+</script>
+
+<template>
+  <main class="w-full h-full flex flex-col justify-center items-center p-2">
+    <BasicVideoPlay :options="getOptions" />
+  </main>
+</template>

+import { MonitorVideoConfig } from './MonitorVideo';
+
+export const OtherList = [MonitorVideoConfig];

@@ -33,7 +33,7 @@ export enum PackagesCategoryEnum {
   CONTROL = 'CONTROL',
   CONTROL = 'CONTROL',
   MAP = 'MAP',
   MAP = 'MAP',
   FLOWMETER = 'FLOWMETER',
   FLOWMETER = 'FLOWMETER',
-  OTHER = 'FLOWMETER',
+  OTHER = 'OTHER',
 }
 }
 
 
 /**
 /**

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