feat: 数据看板新增流量计组件

+import cloneDeep from 'lodash-es/cloneDeep';
+import { RectFlowmeteConfig } 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.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 = RectFlowmeteConfig.key;
+
+  public attr = { ...componentInitConfig };
+
+  public componentConfig: ConfigType = cloneDeep(RectFlowmeteConfig);
+
+  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';
+
+  const [register, { getFieldsValue, setFieldsValue, resetFields }] = useForm({
+    schemas: [
+      {
+        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 = () => {
+    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('RectFlowmeter');
+
+export const RectFlowmeteConfig: ConfigType = {
+  ...componentKeys,
+  title: '流量计1',
+  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(0);
+
+  const getDesign = computed(() => {
+    const { option, persetOption } = props.config;
+    const { componentInfo } = option;
+    const { flowmeterConfig, unit } = componentInfo;
+    const { backgroundColor, waveFirst, waveSecond, waveThird } = flowmeterConfig || {};
+    const { flowmeterConfig: presetFlowmeterConfig, unit: persetUnit } = 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,
+    };
+  });
+
+  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">
+    <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"
+    >
+      <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>
+      <rect
+        class="bgColor"
+        x="0"
+        y="0"
+        width="100"
+        height="100"
+        :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
+        class="waveThird"
+        :transform="`translate(0 ${getHeight})`"
+        x="0"
+        y="0"
+        width="100"
+        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>
+  </main>
+</template>
+
+<style lang="less" scoped>
+  .waves-rect {
+    width: 90%;
+    height: 90%;
+  }
+
+  @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 {
+    // transform: translateY(
+    //   calc(calc(100 - var(--value)) * var(--full-flag) * 1% + var(--full-flag) * 15%)
+    // );
+    transition: transform linear 1s;
+  }
+
+  .height {
+    // transform: translateY(calc(var(--value) * -1% - 10% + var(--over-min-flag) * 10%));
+    transition: transform linear 1s;
+  }
+
+  .waves-rect .text {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    color: #fff;
+    font-weight: 700;
+  }
+</style>

+import { RectFlowmeteConfig } from './RectFlowmeter';
+
+export const FlowmeterList = [RectFlowmeteConfig];

@@ -11,4 +11,10 @@ export enum ComponentConfigFieldEnum {
   THIRD_PHASE_VALUE = 'thirdPhaseValue',
   SHOW_DEVICE_NAME = 'showDeviceName',
   GRADIENT_INFO = 'gradientInfo',
+
+  FLOWMETER_CONFIG = 'flowmeterConfig',
+  WAVE_FIRST = 'waveFirst',
+  WAVE_SECOND = 'waveSecond',
+  WAVE_THIRD = 'waveThird',
+  BACKGROUND_COLOR = 'backgroundColor',
 }

-import { ComponentInfoGradientInfoType, DataSource } from '../palette/types';
+import { ComponentInfoGradientInfoType, DataSource, FlowmeterConfigType } from '../palette/types';
 import { ComponentConfigFieldEnum } from './enum';
 
 /**
@@ -19,6 +19,8 @@ export enum PackagesCategoryNameEnum {
   PICTURE = '图片组件',
   CONTROL = '控制组件',
   MAP = '地图组件',
+  FLOWMETER = '流量计',
+  OTHER = '其他',
 }
 
 /**
@@ -30,6 +32,8 @@ export enum PackagesCategoryEnum {
   PICTURE = 'PICTURE',
   CONTROL = 'CONTROL',
   MAP = 'MAP',
+  FLOWMETER = 'FLOWMETER',
+  OTHER = 'FLOWMETER',
 }
 
 /**
@@ -90,6 +94,7 @@ export interface PublicPresetOptions {
   [ComponentConfigFieldEnum.ICON]?: string;
   [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]?: boolean;
   [ComponentConfigFieldEnum.GRADIENT_INFO]?: ComponentInfoGradientInfoType[];
+  [ComponentConfigFieldEnum.FLOWMETER_CONFIG]?: FlowmeterConfigType;
   [key: string]: any;
 }
 
@@ -114,6 +119,8 @@ export interface PackagesType {
   [PackagesCategoryEnum.INSTRUMENT]: ConfigType[];
   [PackagesCategoryEnum.CONTROL]: ConfigType[];
   [PackagesCategoryEnum.MAP]: ConfigType[];
+  [PackagesCategoryEnum.FLOWMETER]: ConfigType[];
+  [PackagesCategoryEnum.OTHER]: ConfigType[];
 }
 
 export interface SubscribeMessageType {

 import { ControlList } from './components/Control';
+import { FlowmeterList } from './components/Flowmeter';
 import { InstrumentList } from './components/Instrument';
 import { MapList } from './components/Map';
 import { PictureList } from './components/Picture';
@@ -11,4 +12,5 @@ export const packageList: PackagesType = {
   [PackagesCategoryEnum.PICTURE]: PictureList,
   [PackagesCategoryEnum.CONTROL]: ControlList,
   [PackagesCategoryEnum.MAP]: MapList,
+  [PackagesCategoryEnum.FLOWMETER]: FlowmeterList,
 };

@@ -38,6 +38,13 @@ export interface ComponentInfoGradientInfoType {
   color: string;
 }
 
+export interface FlowmeterConfigType {
+  backgroundColor: string;
+  waveFirst: string;
+  waveSecond: string;
+  waveThird: string;
+}
+
 export interface ComponentInfo {
   fontColor: string;
   unit: string;
@@ -45,6 +52,7 @@ export interface ComponentInfo {
   iconColor: string;
   showDeviceName: boolean;
   gradientInfo: ComponentInfoGradientInfoType[];
+  flowmeterConfig: FlowmeterConfigType;
 }
 
 export interface CustomCommand {