feat: 新增数据看板组件

+import cloneDeep from 'lodash-es/cloneDeep';
+import { LateralNumericalControlConfig } from '.';
+import {
+  ConfigType,
+  CreateComponentType,
+  PublicComponentOptions,
+  PublicPresetOptions,
+} from '/@/views/visual/packages/index.type';
+import { PublicConfigClass, componentInitConfig } from '/@/views/visual/packages/publicConfig';
+import { ComponentConfigFieldEnum } from '../../../enum';
+
+export const option: PublicPresetOptions = {
+  [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
+  [ComponentConfigFieldEnum.CONTROL_BAR_COLOR]: '#0072ff',
+  [ComponentConfigFieldEnum.FONT_COLOR]: '#000000',
+};
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key: string = LateralNumericalControlConfig.key;
+
+  public attr = { ...componentInitConfig };
+
+  public componentConfig: ConfigType = cloneDeep(LateralNumericalControlConfig);
+
+  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.CONTROL_BAR_COLOR,
+        label: '控制栏背景色',
+        component: 'ColorPicker',
+        changeEvent: 'update:value',
+        defaultValue: option.controlBarColor,
+      },
+      {
+        field: ComponentConfigFieldEnum.FONT_COLOR,
+        label: '数值字体颜色',
+        component: 'ColorPicker',
+        changeEvent: 'update:value',
+        defaultValue: option.fontColor,
+      },
+      {
+        field: ComponentConfigFieldEnum.SHOW_DEVICE_NAME,
+        label: '显示设备名称',
+        component: 'Checkbox',
+        defaultValue: option.showDeviceName,
+      },
+    ],
+    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 {
+    PublicComponentValueType,
+    PublicFormInstaceType,
+  } from '/@/views/visual/dataSourceBindPanel/index.type';
+  import {
+    CommonDataSourceBindValueType,
+    commonDataSourceSchemas,
+  } from '../../../config/common.config';
+  import { DataSource } 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: commonDataSourceSchemas(),
+  });
+
+  const getFormValues = () => {
+    let value = getFieldsValue() as CommonDataSourceBindValueType;
+    value = {
+      ...value,
+      customCommand: {
+        transportType: value.transportType,
+        service: value.service,
+        command: value.command,
+        commandType: value.commandType,
+      },
+    };
+    return value;
+  };
+
+  const setFormValues = (record: DataSource) => {
+    const { customCommand } = record;
+    return setFieldsValue({
+      ...record,
+      transportType: customCommand?.transportType,
+      service: customCommand?.service,
+      command: customCommand?.command,
+      commandType: customCommand?.commandType,
+    } as unknown as Partial<CommonDataSourceBindValueType>);
+  };
+
+  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('LateralNumericalControl');
+
+export const LateralNumericalControlConfig: ConfigType = {
+  ...componentKeys,
+  title: '控制组件1',
+  package: PackagesCategoryEnum.CONTROL,
+};

+<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 { Slider } from 'ant-design-vue';
+  import { computed, ref } from 'vue';
+  import { useComponentScale } from '../../../hook/useComponentScale';
+  import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
+
+  const props = defineProps<{
+    config: ComponentPropsConfigType<typeof option>;
+  }>();
+
+  const sliderValue = ref<number>(33);
+  const sMin = ref<number>(0);
+  const sMax = ref<number>(100);
+
+  const getDesign = computed(() => {
+    const { option, persetOption } = props.config;
+    const { componentInfo, attribute, attributeRename } = option;
+    const { controlBarColor: persetControlBarColor, fonColor: persetFontColor } =
+      persetOption || {};
+    const { controlBarColor, fontColor } = componentInfo || {};
+    return {
+      attribute: attributeRename || attribute,
+      controlBarColor: controlBarColor ?? persetControlBarColor,
+      fontColor: fontColor ?? persetFontColor,
+    };
+  });
+
+  const handleChange = async () => {};
+
+  const updateFn: DataFetchUpdateFn = () => {
+    // console.log(message, 'message', attribute, 'attribute');
+  };
+
+  useDataFetch(props, updateFn);
+  const { getScale } = useComponentScale(props);
+</script>
+
+<template>
+  <main class="w-full h-full flex flex-col justify-center">
+    <DeviceName :config="config" class="text-center" />
+    <main :style="getScale">
+      <div class="flex flex-col ml-11 mr-11">
+        <span
+          :style="{ color: getDesign.fontColor }"
+          class="font-bold text-xl mt-3 truncate text-center"
+          >{{ sliderValue }}</span
+        >
+        <Slider
+          :style="{ '--slider-color': getDesign.controlBarColor }"
+          class="no-drag"
+          v-model:value="sliderValue"
+          :min="sMin"
+          :max="sMax"
+          @change="handleChange"
+        />
+
+        <span
+          :style="{ color: getDesign.fontColor }"
+          class="mt-3 truncate font-bold text-xs text-center"
+        >
+          {{ getDesign.attribute || '设备1' }}
+        </span>
+      </div>
+    </main>
+  </main>
+</template>
+<style lang="less" scoped>
+  :deep(.ant-slider-track) {
+    background: var(--slider-color) !important;
+  }
+</style>

+import cloneDeep from 'lodash-es/cloneDeep';
+import { SwitchListConfig } from '.';
+import {
+  ConfigType,
+  CreateComponentType,
+  PublicComponentOptions,
+  PublicPresetOptions,
+} from '/@/views/visual/packages/index.type';
+import { PublicConfigClass, componentInitConfig } from '/@/views/visual/packages/publicConfig';
+import { ComponentConfigFieldEnum } from '../../../enum';
+
+export const option: PublicPresetOptions = {
+  multipleDataSourceComponent: true,
+  [ComponentConfigFieldEnum.ICON]: 'shuiwen',
+  [ComponentConfigFieldEnum.ICON_COLOR]: '#377DFF',
+  [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
+};
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key: string = SwitchListConfig.key;
+
+  public attr = { ...componentInitConfig };
+
+  public componentConfig: ConfigType = cloneDeep(SwitchListConfig);
+
+  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.ICON_COLOR,
+        label: '图标颜色',
+        component: 'ColorPicker',
+        changeEvent: 'update:value',
+        defaultValue: option.iconColor,
+      },
+      {
+        field: ComponentConfigFieldEnum.ICON,
+        label: '图标',
+        component: 'IconDrawer',
+        changeEvent: 'update:value',
+        defaultValue: option.icon,
+        componentProps({ formModel }) {
+          const color = formModel[ComponentConfigFieldEnum.ICON_COLOR];
+          return {
+            color,
+          };
+        },
+      },
+      {
+        field: ComponentConfigFieldEnum.SHOW_DEVICE_NAME,
+        label: '显示设备名称',
+        component: 'Checkbox',
+        defaultValue: option.showDeviceName,
+      },
+    ],
+    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 {
+    PublicComponentValueType,
+    PublicFormInstaceType,
+  } from '/@/views/visual/dataSourceBindPanel/index.type';
+  import {
+    CommonDataSourceBindValueType,
+    commonDataSourceSchemas,
+  } from '../../../config/common.config';
+  import { DataSource } 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: commonDataSourceSchemas(),
+  });
+
+  const getFormValues = () => {
+    let value = getFieldsValue() as CommonDataSourceBindValueType;
+    value = {
+      ...value,
+      customCommand: {
+        transportType: value.transportType,
+        service: value.service,
+        command: value.command,
+        commandType: value.commandType,
+      },
+    };
+    return value;
+  };
+
+  const setFormValues = (record: DataSource) => {
+    const { customCommand } = record;
+    return setFieldsValue({
+      ...record,
+      transportType: customCommand?.transportType,
+      service: customCommand?.service,
+      command: customCommand?.command,
+      commandType: customCommand?.commandType,
+    } as unknown as Partial<CommonDataSourceBindValueType>);
+  };
+
+  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('SwitchList');
+
+export const SwitchListConfig: ConfigType = {
+  ...componentKeys,
+  title: '开关量控制列表',
+  package: PackagesCategoryEnum.CONTROL,
+};

+<script lang="ts" setup>
+  import {
+    ComponentPropsConfigType,
+    MultipleDataFetchUpdateFn,
+  } from '/@/views/visual/packages/index.type';
+  import { option } from './config';
+  import { useMultipleDataFetch } from '/@/views/visual/packages/hook/useSocket';
+  import { SvgIcon } from '/@/components/Icon';
+  import { Switch } from 'ant-design-vue';
+  import { computed, ref } from 'vue';
+  import { useComponentScale } from '../../../hook/useComponentScale';
+  import { useSendCommand } from '../../../hook/useSendCommand';
+  import { unref } from 'vue';
+  import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
+
+  const props = defineProps<{
+    config: ComponentPropsConfigType<typeof option>;
+  }>();
+
+  const checked = ref(false);
+
+  const svgList = ref<any>([
+    {
+      value: 26.2,
+      name: 'wendu',
+      icon: 'zongfushe',
+      unit: 'kw',
+      iconColor: '#367BFF',
+      fontColor: '#357CFB',
+      checked: false,
+      id: 0,
+    },
+    {
+      value: 53.7,
+      name: 'shidu',
+      icon: 'guangzhaoqiangdu',
+      unit: '℃',
+      iconColor: '#FFA000',
+      fontColor: '#FFA000',
+      checked: true,
+      id: 1,
+    },
+  ]);
+
+  const getDesign = computed(() => {
+    const { persetOption = {}, option } = props.config;
+    const { dataSource = [] } = option || {};
+    const {
+      unit: persetUnit,
+      fontColor: persetFontColor,
+      icon: persetIcon,
+      iconColor: persetIconColor,
+    } = persetOption || {};
+    return {
+      dataSource: dataSource.map((item) => {
+        const { fontColor, icon, iconColor, unit } = item.componentInfo;
+        const { attribute, attributeRename } = item;
+        return {
+          unit: unit ?? persetUnit,
+          fontColor: fontColor ?? persetFontColor,
+          icon: icon ?? persetIcon,
+          iconColor: iconColor ?? persetIconColor,
+          attribute: attribute || attributeRename,
+          attributeRename,
+        };
+      }),
+    };
+  });
+
+  const { sendCommand, loading } = useSendCommand();
+  const handleChange = async (index: number) => {
+    const flag = await sendCommand(props.config.option, unref(checked));
+    if (!flag) svgList[index].checked = !svgList[index].checked;
+  };
+
+  const updateFn: MultipleDataFetchUpdateFn = (message) => {
+    const { data = {} } = message;
+    const { dataSource } = unref(getDesign);
+    svgList.value.length = 0;
+    svgList.value = dataSource.map((item) => {
+      const { icon, iconColor, unit, fontColor, attribute } = item || {};
+      const [latest] = data[attribute] || [];
+      const [_timespan, value] = latest || [];
+      return {
+        value: Number(value),
+        name: attribute,
+        icon,
+        unit,
+        iconColor,
+        fontColor,
+      };
+    });
+  };
+
+  useMultipleDataFetch(props, updateFn);
+  const { getRatio } = useComponentScale(props);
+</script>
+
+<template>
+  <main class="w-full h-full flex flex-col justify-evenly items-center">
+    <DeviceName :config="config" />
+    <div
+      style="width: 86%"
+      v-for="(item, index) in svgList"
+      :key="item.id"
+      class="flex justify-between items-center"
+    >
+      <div class="flex items-center">
+        <SvgIcon
+          :name="item.icon!"
+          prefix="iconfont"
+          :size="getRatio ? 30 * getRatio : 30"
+          :style="{ color: item.iconColor }"
+        />
+
+        <div class="text-gray-500 text-lg truncate ml-6">{{ item.attribute || '温度' }}</div>
+      </div>
+
+      <Switch v-model:checked="item.checked" :loading="loading" @change="handleChange(index)" />
+    </div>
+  </main>
+</template>

 import { ControlComponentSlidingSwitchConfig } from './ControlComponentSlidingSwitch';
 import { ControlComponentSwitchWithIconConfig } from './ControlComponentSwitchWithIcon';
 import { ControlComponentToggleSwitchConfig } from './ControlComponentToggleSwitch';
+import { LateralNumericalControlConfig } from './LateralNumericalControl';
+// import { SwitchListConfig } from './SwitchList';
 
 export const ControlList = [
   ControlComponentSwitchWithIconConfig,
   ControlComponentSlidingSwitchConfig,
   ControlComponentToggleSwitchConfig,
+  LateralNumericalControlConfig,
+  // SwitchListConfig,
 ];

@@ -53,7 +53,6 @@
       [ComponentConfigFieldEnum.FONT_COLOR]: fontColor,
       [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: showDeviceName,
     };
-    console.log(value, 'valie');
     return setFieldsValue(value);
   };
 

@@ -32,7 +32,6 @@
     } = persetOption || {};
     const { unit, fontColor, pointerColor, gradientInfo, progressBarCircle, instrumentPanelColor } =
       componentInfo || {};
-    console.log(option, 'unit');
     return {
       unit: unit ?? presetUnit,
       fontColor: fontColor ?? presetFontColor,

+import cloneDeep from 'lodash-es/cloneDeep';
+import { StatisticsComponent1Config } from '.';
+import {
+  ConfigType,
+  CreateComponentType,
+  PublicComponentOptions,
+  PublicPresetOptions,
+} from '../../../index.type';
+import { PublicConfigClass, componentInitConfig } from '../../../publicConfig';
+import { ComponentConfigFieldEnum } from '../../../enum';
+
+export enum Gradient {
+  FIRST = 'first',
+  SECOND = 'second',
+}
+export enum GradientColor {
+  FIRST = '#07ffd6',
+  SECOND = '#5eff10',
+}
+export const option: PublicPresetOptions = {
+  multipleDataSourceComponent: true,
+  [ComponentConfigFieldEnum.FONT_COLOR]: '#FD7347',
+  [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
+  [ComponentConfigFieldEnum.UNIT]: '℃',
+};
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key: string = StatisticsComponent1Config.key;
+
+  public attr = { ...componentInitConfig };
+
+  public componentConfig: ConfigType = cloneDeep(StatisticsComponent1Config);
+
+  public persetOption = cloneDeep(option);
+
+  public option: PublicComponentOptions;
+
+  constructor(option: PublicComponentOptions) {
+    super();
+    this.option = { ...option };
+  }
+}

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

+<script lang="ts" setup>
+  import { commonDataSourceSchemas } from '../../../config/common.config';
+  import { CreateComponentType } from '../../../index.type';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import {
+    PublicComponentValueType,
+    PublicFormInstaceType,
+  } from '/@/views/visual/dataSourceBindPanel/index.type';
+
+  defineProps<{
+    values: PublicComponentValueType;
+    componentConfig: CreateComponentType;
+  }>();
+
+  const [register, { getFieldsValue, setFieldsValue, validate, resetFields }] = useForm({
+    labelWidth: 0,
+    showActionButtonGroup: false,
+    layout: 'horizontal',
+    labelCol: { span: 0 },
+    schemas: commonDataSourceSchemas(),
+  });
+
+  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('StatisticsComponent1');
+
+export const StatisticsComponent1Config: ConfigType = {
+  ...componentKeys,
+  title: '饼图',
+  package: PackagesCategoryEnum.STATISTICS,
+};

+<script lang="ts" setup>
+  import { EChartsOption, SeriesOption, ECharts, init } from 'echarts';
+  import { unref, ref, onMounted, computed, nextTick } from 'vue';
+  import { useMultipleDataFetch } from '../../../hook/useSocket';
+  import { ComponentPropsConfigType, MultipleDataFetchUpdateFn } from '../../../index.type';
+  import { option } from './config';
+  import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
+  import { useComponentScale } from '../../../hook/useComponentScale';
+  import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
+
+  const props = defineProps<{
+    config: ComponentPropsConfigType<typeof option>;
+  }>();
+
+  const chartRefEl = ref<Nullable<HTMLDivElement>>(null);
+
+  const chartInstance = ref<Nullable<ECharts>>(null);
+
+  const time = ref<Nullable<number>>(null);
+
+  const getDesign = computed(() => {
+    const { persetOption, option } = props.config;
+    const { dataSource = [] } = option || {};
+    const { unit: presetUnit, fontColor: presetFontColor } = persetOption || {};
+    return {
+      dataSource: dataSource?.map((item) => {
+        const { unit, fontColor } = item.componentInfo || {};
+        const { attribute, attributeRename } = item;
+        return {
+          unit: unit ?? presetUnit,
+          fontColor: fontColor ?? presetFontColor,
+          attribute,
+          attributeRename,
+        };
+      }),
+    };
+  });
+
+  const options = (): EChartsOption => {
+    // getStageColor(gradientInfo);
+    return {
+      tooltip: {
+        trigger: 'item',
+      },
+      legend: {
+        top: '5%',
+        left: 'center',
+        textStyle: {
+          fontSize: unref(getRatio) ? 14 * unref(getRatio) : 14,
+        },
+      },
+      series: [
+        {
+          name: '',
+          type: 'pie',
+          radius: ['%', '70%'],
+          center: ['50%', '65%'],
+          avoidLabelOverlap: false,
+          itemStyle: {
+            borderRadius: 4,
+            borderColor: '#fff',
+            borderWidth: 2,
+          },
+          label: {
+            show: false,
+            position: 'center',
+          },
+          labelLine: {
+            show: false,
+          },
+          data: [
+            { value: 1048, name: '数据1' },
+            { value: 735, name: '数据2' },
+            { value: 580, name: '数据3' },
+          ],
+        },
+      ],
+    };
+  };
+
+  const initial = () => {
+    chartInstance.value = init(unref(chartRefEl)! as HTMLElement);
+    chartInstance.value.setOption(options());
+  };
+
+  // const randomFn = () => {
+  //   useIntervalFn(() => {
+  //     const value = (Math.random() * 100).toFixed(0);
+  //     unref(chartInstance)?.setOption({
+  //       series: [{ data: [{ value }] }, { data: [{ value }] }],
+  //     } as EChartsOption);
+  //   }, 3000);
+  // };
+
+  const updateChart = (data: SeriesOption['data']) => {
+    unref(chartInstance)?.setOption({
+      series: [{ data }],
+      // color: unref(list).map((item) => item.title.color),
+    } as EChartsOption);
+  };
+
+  const updateFn: MultipleDataFetchUpdateFn = (message) => {
+    const { data = {} } = message;
+    const { dataSource } = unref(getDesign);
+    const series = dataSource.map((item) => {
+      const { attribute, attributeRename, fontColor, unit } = item;
+      const [latest] = data[attribute] || [];
+      const [_timespan, value] = latest || [];
+
+      return {
+        value,
+        name: attributeRename ?? attribute,
+        itemStyle: { color: fontColor },
+        tooltip: {
+          valueFormatter(value) {
+            return `${value} ${unit ?? ''}`;
+          },
+        },
+      } as SeriesOption['data'];
+    });
+    updateChart(series);
+  };
+
+  useMultipleDataFetch(props, updateFn);
+
+  onMounted(() => {
+    initial();
+    // !props.config.option.uuid && randomFn();
+    !props.config.option.uuid;
+  });
+
+  const resize = async () => {
+    await nextTick();
+
+    // 修改echarts大小
+    unref(chartInstance)?.setOption({
+      legend: {
+        textStyle: {
+          fontSize: 14 * unref(getRatio),
+        },
+      },
+    } as EChartsOption);
+    unref(chartInstance)?.resize();
+  };
+
+  const { getRatio } = useComponentScale(props, resize);
+</script>
+
+<template>
+  <main class="w-full h-full flex flex-col justify-center items-center">
+    <DeviceName :config="config" />
+    <div ref="chartRefEl" class="flex-1 w-full h-full"> </div>
+    <UpdateTime :time="time" />
+  </main>
+</template>

+import cloneDeep from 'lodash-es/cloneDeep';
+import { StatisticsComponent2Config } from '.';
+import {
+  ConfigType,
+  CreateComponentType,
+  PublicComponentOptions,
+  PublicPresetOptions,
+} from '../../../index.type';
+import { PublicConfigClass, componentInitConfig } from '../../../publicConfig';
+import { ComponentConfigFieldEnum } from '../../../enum';
+
+export enum Gradient {
+  FIRST = 'first',
+  SECOND = 'second',
+}
+export enum GradientColor {
+  FIRST = '#07ffd6',
+  SECOND = '#5eff10',
+}
+export const option: PublicPresetOptions = {
+  multipleDataSourceComponent: true,
+  [ComponentConfigFieldEnum.FONT_COLOR]: '#FD7347',
+  [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
+  [ComponentConfigFieldEnum.UNIT]: '℃',
+};
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key: string = StatisticsComponent2Config.key;
+
+  public attr = { ...componentInitConfig };
+
+  public componentConfig: ConfigType = cloneDeep(StatisticsComponent2Config);
+
+  public persetOption = cloneDeep(option);
+
+  public option: PublicComponentOptions;
+
+  constructor(option: PublicComponentOptions) {
+    super();
+    this.option = { ...option };
+  }
+}

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

+<script lang="ts" setup>
+  import { commonDataSourceSchemas } from '../../../config/common.config';
+  import { CreateComponentType } from '../../../index.type';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import {
+    PublicComponentValueType,
+    PublicFormInstaceType,
+  } from '/@/views/visual/dataSourceBindPanel/index.type';
+
+  defineProps<{
+    values: PublicComponentValueType;
+    componentConfig: CreateComponentType;
+  }>();
+
+  const [register, { getFieldsValue, setFieldsValue, validate, resetFields }] = useForm({
+    labelWidth: 0,
+    showActionButtonGroup: false,
+    layout: 'horizontal',
+    labelCol: { span: 0 },
+    schemas: commonDataSourceSchemas(),
+  });
+
+  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('StatisticsComponent2');
+
+export const StatisticsComponent2Config: ConfigType = {
+  ...componentKeys,
+  title: '半环形图',
+  package: PackagesCategoryEnum.STATISTICS,
+};

+<script lang="ts" setup>
+  import { EChartsOption, SeriesOption, ECharts, init } from 'echarts';
+  import { unref, ref, onMounted, computed, nextTick } from 'vue';
+  import { useMultipleDataFetch } from '../../../hook/useSocket';
+  import { ComponentPropsConfigType, MultipleDataFetchUpdateFn } from '../../../index.type';
+  import { option } from './config';
+  import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
+  import { useComponentScale } from '../../../hook/useComponentScale';
+  import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
+
+  const props = defineProps<{
+    config: ComponentPropsConfigType<typeof option>;
+  }>();
+
+  const chartRefEl = ref<Nullable<HTMLDivElement>>(null);
+
+  const chartInstance = ref<Nullable<ECharts>>(null);
+
+  const time = ref<Nullable<number>>(null);
+
+  const getDesign = computed(() => {
+    const { persetOption, option } = props.config;
+    const { dataSource = [] } = option || {};
+    const { unit: presetUnit, fontColor: presetFontColor } = persetOption || {};
+    return {
+      dataSource: dataSource?.map((item) => {
+        const { unit, fontColor } = item.componentInfo || {};
+        const { attribute, attributeRename } = item;
+        return {
+          unit: unit ?? presetUnit,
+          fontColor: fontColor ?? presetFontColor,
+          attribute,
+          attributeRename,
+        };
+      }),
+    };
+  });
+
+  const options = (): EChartsOption => {
+    // getStageColor(gradientInfo);
+    return {
+      tooltip: {
+        trigger: 'item',
+      },
+      legend: {
+        top: '5%',
+        left: 'center',
+        selectedMode: false,
+        textStyle: {
+          fontSize: unref(getRatio) ? 14 * unref(getRatio) : 14,
+        },
+      },
+      series: [
+        {
+          type: 'pie',
+          radius: ['40%', '70%'],
+          center: ['50%', '70%'],
+          // adjust the start angle
+          startAngle: 180,
+          label: {
+            show: false,
+          },
+          itemStyle: {
+            borderRadius: 4,
+            borderColor: '#fff',
+            borderWidth: 2,
+          },
+          data: [
+            { value: 1048, name: '数据1' },
+            { value: 735, name: '数据2' },
+            {
+              value: 1048 + 735,
+              itemStyle: {
+                color: 'none',
+                decal: {
+                  symbol: 'none',
+                },
+              },
+              label: {
+                show: false,
+              },
+            },
+          ],
+        },
+      ],
+    };
+  };
+
+  const initial = () => {
+    chartInstance.value = init(unref(chartRefEl)! as HTMLElement);
+    chartInstance.value.setOption(options());
+  };
+
+  // const randomFn = () => {
+  //   useIntervalFn(() => {
+  //     const value = (Math.random() * 100).toFixed(0);
+  //     unref(chartInstance)?.setOption({
+  //       series: [{ data: [{ value }] }, { data: [{ value }] }],
+  //     } as EChartsOption);
+  //   }, 3000);
+  // };
+
+  const updateChart = (data: SeriesOption['data']) => {
+    unref(chartInstance)?.setOption({
+      series: [{ data }],
+      // color: unref(list).map((item) => item.title.color),
+    } as EChartsOption);
+  };
+
+  const updateFn: MultipleDataFetchUpdateFn = (message) => {
+    const { data = {} } = message;
+    const { dataSource } = unref(getDesign);
+    const series = dataSource.map((item) => {
+      const { attribute, attributeRename, fontColor, unit } = item;
+      const [latest] = data[attribute] || [];
+      const [_timespan, value] = latest || [];
+
+      return {
+        value,
+        name: attributeRename ?? attribute,
+        itemStyle: { color: fontColor },
+        tooltip: {
+          valueFormatter(value) {
+            return `${value} ${unit ?? ''}`;
+          },
+        },
+      } as SeriesOption['data'];
+    });
+    // if (series.length > 1) {
+    series.push({
+      value: series.reduce((total: number, current: any) => total + Number(current.value), 0),
+      itemStyle: {
+        color: 'none',
+        decal: {
+          symbol: 'none',
+        },
+      },
+      label: {
+        show: false,
+      },
+    });
+    // }
+    // console.log(message, 'message', series, 'series', sum);
+    updateChart(series);
+  };
+
+  useMultipleDataFetch(props, updateFn);
+
+  onMounted(() => {
+    initial();
+    // !props.config.option.uuid && randomFn();
+    !props.config.option.uuid;
+  });
+
+  const resize = async () => {
+    await nextTick();
+
+    // 修改echarts大小
+    unref(chartInstance)?.setOption({
+      legend: {
+        textStyle: {
+          fontSize: 14 * unref(getRatio),
+        },
+      },
+    } as EChartsOption);
+    unref(chartInstance)?.resize();
+  };
+
+  const { getRatio } = useComponentScale(props, resize);
+</script>
+
+<template>
+  <main class="w-full h-full flex flex-col justify-center items-center">
+    <DeviceName :config="config" />
+    <div ref="chartRefEl" class="flex-1 w-full h-full"> </div>
+    <UpdateTime :time="time" />
+  </main>
+</template>

+import cloneDeep from 'lodash-es/cloneDeep';
+import { StatisticsComponent3Config } from '.';
+import {
+  ConfigType,
+  CreateComponentType,
+  PublicComponentOptions,
+  PublicPresetOptions,
+} from '../../../index.type';
+import { PublicConfigClass, componentInitConfig } from '../../../publicConfig';
+import { ComponentConfigFieldEnum } from '../../../enum';
+
+export enum Gradient {
+  FIRST = 'first',
+  SECOND = 'second',
+}
+export enum GradientColor {
+  FIRST = '#07ffd6',
+  SECOND = '#5eff10',
+}
+export const option: PublicPresetOptions = {
+  multipleDataSourceComponent: true,
+  [ComponentConfigFieldEnum.FONT_COLOR]: '#FD7347',
+  [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
+  [ComponentConfigFieldEnum.UNIT]: '℃',
+};
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key: string = StatisticsComponent3Config.key;
+
+  public attr = { ...componentInitConfig };
+
+  public componentConfig: ConfigType = cloneDeep(StatisticsComponent3Config);
+
+  public persetOption = cloneDeep(option);
+
+  public option: PublicComponentOptions;
+
+  constructor(option: PublicComponentOptions) {
+    super();
+    this.option = { ...option };
+  }
+}

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

+<script lang="ts" setup>
+  import { commonDataSourceSchemas } from '../../../config/common.config';
+  import { CreateComponentType } from '../../../index.type';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import {
+    PublicComponentValueType,
+    PublicFormInstaceType,
+  } from '/@/views/visual/dataSourceBindPanel/index.type';
+
+  defineProps<{
+    values: PublicComponentValueType;
+    componentConfig: CreateComponentType;
+  }>();
+
+  const [register, { getFieldsValue, setFieldsValue, validate, resetFields }] = useForm({
+    labelWidth: 0,
+    showActionButtonGroup: false,
+    layout: 'horizontal',
+    labelCol: { span: 0 },
+    schemas: commonDataSourceSchemas(),
+  });
+
+  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('StatisticsComponent3');
+
+export const StatisticsComponent3Config: ConfigType = {
+  ...componentKeys,
+  title: '横柱状图',
+  package: PackagesCategoryEnum.STATISTICS,
+};

+<script lang="ts" setup>
+  import { EChartsOption, SeriesOption, ECharts, init } from 'echarts';
+  import { unref, ref, onMounted, computed, nextTick } from 'vue';
+  import { useMultipleDataFetch } from '../../../hook/useSocket';
+  import { ComponentPropsConfigType, MultipleDataFetchUpdateFn } from '../../../index.type';
+  import { option } from './config';
+  import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
+  import { useComponentScale } from '../../../hook/useComponentScale';
+  import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
+
+  const props = defineProps<{
+    config: ComponentPropsConfigType<typeof option>;
+  }>();
+
+  const chartRefEl = ref<Nullable<HTMLDivElement>>(null);
+
+  const chartInstance = ref<Nullable<ECharts>>(null);
+
+  const time = ref<Nullable<number>>(null);
+
+  const getDesign = computed(() => {
+    const { persetOption, option } = props.config;
+    const { dataSource = [] } = option || {};
+    const { unit: presetUnit, fontColor: presetFontColor } = persetOption || {};
+    return {
+      dataSource: dataSource?.map((item) => {
+        const { unit, fontColor } = item.componentInfo || {};
+        const { attribute, attributeRename } = item;
+        return {
+          unit: unit ?? presetUnit,
+          fontColor: fontColor ?? presetFontColor,
+          attribute,
+          attributeRename,
+        };
+      }),
+    };
+  });
+  const seriesList = [
+    { value: 120, name: '123', itemStyle: { color: '#02E5F0' } },
+    { value: 150, name: '456', itemStyle: { color: '#028CF0' } },
+    { value: 40, name: '789', itemStyle: { color: '#F09202' } },
+  ];
+  const data = ['温度', '湿度', '温度1'];
+  const options = (): EChartsOption => {
+    // getStageColor(gradientInfo);
+    return {
+      color: ['#3398DB'],
+      tooltip: {
+        // 提示框
+        trigger: 'axis',
+        axisPointer: {
+          type: 'shadow',
+        },
+      },
+      xAxis: {
+        type: 'category',
+        data: data,
+        axisTick: {
+          alignWithLabel: true,
+        },
+        axisPointer: {
+          type: 'line',
+        },
+      },
+      grid: {
+        top: '15%',
+        left: '20%',
+        bottom: '15%',
+      },
+      yAxis: {
+        type: 'value',
+      },
+      series: [
+        {
+          name: '',
+          type: 'bar',
+          barWidth: '60%',
+          data: seriesList,
+        },
+      ],
+    };
+  };
+
+  const initial = () => {
+    chartInstance.value = init(unref(chartRefEl)! as HTMLElement);
+    chartInstance.value.setOption(options());
+  };
+
+  // const randomFn = () => {
+  //   useIntervalFn(() => {
+  //     const value = (Math.random() * 100).toFixed(0);
+  //     unref(chartInstance)?.setOption({
+  //       series: [{ data: [{ value }] }, { data: [{ value }] }],
+  //     } as EChartsOption);
+  //   }, 3000);
+  // };
+
+  const updateChart = (data: SeriesOption['data'], xAxisData) => {
+    unref(chartInstance)?.setOption({
+      series: [{ data }],
+      xAxis: { data: xAxisData },
+      // color: unref(list).map((item) => item.title.color),
+    } as EChartsOption);
+  };
+
+  const updateFn: MultipleDataFetchUpdateFn = (message) => {
+    const { data = {} } = message;
+    const { dataSource } = unref(getDesign);
+    const series = dataSource.map((item) => {
+      const { attribute, attributeRename, fontColor, unit } = item;
+      const [latest] = data[attribute] || [];
+      const [_timespan, value] = latest || [];
+
+      return {
+        value,
+        name: attributeRename ?? attribute,
+        itemStyle: { color: fontColor },
+        tooltip: {
+          valueFormatter(value) {
+            return `${value} ${unit ?? ''}`;
+          },
+        },
+      } as SeriesOption['data'];
+    });
+    const xAxisData = series.map((item) => {
+      const { name } = item as any;
+      return name;
+    });
+    // }
+    // console.log(message, 'message', series, 'series', sum);
+    updateChart(series, xAxisData);
+  };
+
+  useMultipleDataFetch(props, updateFn);
+
+  onMounted(() => {
+    initial();
+    // !props.config.option.uuid && randomFn();
+    !props.config.option.uuid;
+  });
+
+  const resize = async () => {
+    await nextTick();
+
+    // 修改echarts大小
+    unref(chartInstance)?.setOption({
+      legend: {
+        textStyle: {
+          fontSize: 14 * unref(getRatio),
+        },
+      },
+    } as EChartsOption);
+    unref(chartInstance)?.resize();
+  };
+
+  const { getRatio } = useComponentScale(props, resize);
+</script>
+
+<template>
+  <main class="w-full h-full flex flex-col justify-center items-center">
+    <DeviceName :config="config" />
+    <div ref="chartRefEl" class="flex-1 w-full h-full"> </div>
+    <UpdateTime :time="time" />
+  </main>
+</template>

+import cloneDeep from 'lodash-es/cloneDeep';
+import { StatisticsComponent4Config } from '.';
+import {
+  ConfigType,
+  CreateComponentType,
+  PublicComponentOptions,
+  PublicPresetOptions,
+} from '../../../index.type';
+import { PublicConfigClass, componentInitConfig } from '../../../publicConfig';
+import { ComponentConfigFieldEnum } from '../../../enum';
+
+export enum Gradient {
+  FIRST = 'first',
+  SECOND = 'second',
+}
+export enum GradientColor {
+  FIRST = '#07ffd6',
+  SECOND = '#5eff10',
+}
+export const option: PublicPresetOptions = {
+  multipleDataSourceComponent: true,
+  [ComponentConfigFieldEnum.FONT_COLOR]: '#FD7347',
+  [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
+  [ComponentConfigFieldEnum.UNIT]: '℃',
+};
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key: string = StatisticsComponent4Config.key;
+
+  public attr = { ...componentInitConfig };
+
+  public componentConfig: ConfigType = cloneDeep(StatisticsComponent4Config);
+
+  public persetOption = cloneDeep(option);
+
+  public option: PublicComponentOptions;
+
+  constructor(option: PublicComponentOptions) {
+    super();
+    this.option = { ...option };
+  }
+}

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

+<script lang="ts" setup>
+  import { commonDataSourceSchemas } from '../../../config/common.config';
+  import { CreateComponentType } from '../../../index.type';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import {
+    PublicComponentValueType,
+    PublicFormInstaceType,
+  } from '/@/views/visual/dataSourceBindPanel/index.type';
+
+  defineProps<{
+    values: PublicComponentValueType;
+    componentConfig: CreateComponentType;
+  }>();
+
+  const [register, { getFieldsValue, setFieldsValue, validate, resetFields }] = useForm({
+    labelWidth: 0,
+    showActionButtonGroup: false,
+    layout: 'horizontal',
+    labelCol: { span: 0 },
+    schemas: commonDataSourceSchemas(),
+  });
+
+  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('StatisticsComponent4');
+
+export const StatisticsComponent4Config: ConfigType = {
+  ...componentKeys,
+  title: '竖柱状图',
+  package: PackagesCategoryEnum.STATISTICS,
+};

+<script lang="ts" setup>
+  import { EChartsOption, SeriesOption, ECharts, init } from 'echarts';
+  import { unref, ref, onMounted, computed, nextTick } from 'vue';
+  import { useMultipleDataFetch } from '../../../hook/useSocket';
+  import { ComponentPropsConfigType, MultipleDataFetchUpdateFn } from '../../../index.type';
+  import { option } from './config';
+  import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
+  import { useComponentScale } from '../../../hook/useComponentScale';
+  import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
+
+  const props = defineProps<{
+    config: ComponentPropsConfigType<typeof option>;
+  }>();
+
+  const chartRefEl = ref<Nullable<HTMLDivElement>>(null);
+
+  const chartInstance = ref<Nullable<ECharts>>(null);
+
+  const time = ref<Nullable<number>>(null);
+
+  const getDesign = computed(() => {
+    const { persetOption, option } = props.config;
+    const { dataSource = [] } = option || {};
+    const { unit: presetUnit, fontColor: presetFontColor } = persetOption || {};
+    return {
+      dataSource: dataSource?.map((item) => {
+        const { unit, fontColor } = item.componentInfo || {};
+        const { attribute, attributeRename } = item;
+        return {
+          unit: unit ?? presetUnit,
+          fontColor: fontColor ?? presetFontColor,
+          attribute,
+          attributeRename,
+        };
+      }),
+    };
+  });
+  const seriesList = [
+    { value: 120, name: '123', itemStyle: { color: '#02E5F0' } },
+    { value: 150, name: '456', itemStyle: { color: '#028CF0' } },
+    { value: 40, name: '789', itemStyle: { color: '#F09202' } },
+  ];
+  const data = ['温度', '湿度', '温度1'];
+  const options = (): EChartsOption => {
+    // getStageColor(gradientInfo);
+    return {
+      color: ['#3398DB'],
+      tooltip: {
+        // 提示框
+        trigger: 'axis',
+        axisPointer: {
+          type: 'shadow',
+        },
+      },
+      xAxis: {
+        type: 'value',
+      },
+      yAxis: {
+        type: 'category',
+        data: data,
+        axisTick: {
+          alignWithLabel: true,
+        },
+        axisPointer: {
+          type: 'line',
+        },
+      },
+      grid: {
+        top: '15%',
+        left: '28%',
+        bottom: '15%',
+      },
+      series: [
+        {
+          name: '',
+          type: 'bar',
+          barWidth: '60%',
+          data: seriesList,
+        },
+      ],
+    };
+  };
+
+  const initial = () => {
+    chartInstance.value = init(unref(chartRefEl)! as HTMLElement);
+    chartInstance.value.setOption(options());
+  };
+
+  // const randomFn = () => {
+  //   useIntervalFn(() => {
+  //     const value = (Math.random() * 100).toFixed(0);
+  //     unref(chartInstance)?.setOption({
+  //       series: [{ data: [{ value }] }, { data: [{ value }] }],
+  //     } as EChartsOption);
+  //   }, 3000);
+  // };
+
+  const updateChart = (data: SeriesOption['data'], yAxisData) => {
+    unref(chartInstance)?.setOption({
+      series: [{ data }],
+      yAxis: { data: yAxisData },
+      // color: unref(list).map((item) => item.title.color),
+    } as EChartsOption);
+  };
+
+  const updateFn: MultipleDataFetchUpdateFn = (message) => {
+    const { data = {} } = message;
+    const { dataSource } = unref(getDesign);
+    const series = dataSource.map((item) => {
+      const { attribute, attributeRename, fontColor, unit } = item;
+      const [latest] = data[attribute] || [];
+      const [_timespan, value] = latest || [];
+
+      return {
+        value,
+        name: attributeRename ?? attribute,
+        itemStyle: { color: fontColor },
+        tooltip: {
+          valueFormatter(value) {
+            return `${value} ${unit ?? ''}`;
+          },
+        },
+      } as SeriesOption['data'];
+    });
+    const yAxisData = series.map((item) => {
+      const { name } = item as any;
+      return name;
+    });
+    // }
+    // console.log(message, 'message', series, 'series', sum);
+    updateChart(series, yAxisData);
+  };
+
+  useMultipleDataFetch(props, updateFn);
+
+  onMounted(() => {
+    initial();
+    // !props.config.option.uuid && randomFn();
+    !props.config.option.uuid;
+  });
+
+  const resize = async () => {
+    await nextTick();
+
+    // 修改echarts大小
+    unref(chartInstance)?.setOption({
+      legend: {
+        textStyle: {
+          fontSize: 14 * unref(getRatio),
+        },
+      },
+    } as EChartsOption);
+    unref(chartInstance)?.resize();
+  };
+
+  const { getRatio } = useComponentScale(props, resize);
+</script>
+
+<template>
+  <main class="w-full h-full flex flex-col justify-center items-center">
+    <DeviceName :config="config" />
+    <div ref="chartRefEl" class="flex-1 w-full h-full"> </div>
+    <UpdateTime :time="time" />
+  </main>
+</template>

+import cloneDeep from 'lodash-es/cloneDeep';
+import { StatisticsComponent5Config } from '.';
+import {
+  ConfigType,
+  CreateComponentType,
+  PublicComponentOptions,
+  PublicPresetOptions,
+} from '../../../index.type';
+import { PublicConfigClass, componentInitConfig } from '../../../publicConfig';
+import { ComponentConfigFieldEnum } from '../../../enum';
+
+export enum Gradient {
+  FIRST = 'first',
+  SECOND = 'second',
+}
+export enum GradientColor {
+  FIRST = '#07ffd6',
+  SECOND = '#5eff10',
+}
+export const option: PublicPresetOptions = {
+  multipleDataSourceComponent: true,
+  [ComponentConfigFieldEnum.FONT_COLOR]: '#FD7347',
+  [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
+  [ComponentConfigFieldEnum.UNIT]: '℃',
+};
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key: string = StatisticsComponent5Config.key;
+
+  public attr = { ...componentInitConfig };
+
+  public componentConfig: ConfigType = cloneDeep(StatisticsComponent5Config);
+
+  public persetOption = cloneDeep(option);
+
+  public option: PublicComponentOptions;
+
+  constructor(option: PublicComponentOptions) {
+    super();
+    this.option = { ...option };
+  }
+}

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

+<script lang="ts" setup>
+  import { commonDataSourceSchemas } from '../../../config/common.config';
+  import { CreateComponentType } from '../../../index.type';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import {
+    PublicComponentValueType,
+    PublicFormInstaceType,
+  } from '/@/views/visual/dataSourceBindPanel/index.type';
+
+  defineProps<{
+    values: PublicComponentValueType;
+    componentConfig: CreateComponentType;
+  }>();
+
+  const [register, { getFieldsValue, setFieldsValue, validate, resetFields }] = useForm({
+    labelWidth: 0,
+    showActionButtonGroup: false,
+    layout: 'horizontal',
+    labelCol: { span: 0 },
+    schemas: commonDataSourceSchemas(),
+  });
+
+  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('StatisticsComponent5');
+
+export const StatisticsComponent5Config: ConfigType = {
+  ...componentKeys,
+  title: '实时数据表格',
+  package: PackagesCategoryEnum.STATISTICS,
+};

+<script lang="ts" setup>
+  import { reactive, ref } from 'vue';
+  import { useMultipleDataFetch } from '../../../hook/useSocket';
+  import { ComponentPropsConfigType, MultipleDataFetchUpdateFn } from '../../../index.type';
+  import { option } from './config';
+  import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
+  import { BasicTable, useTable, BasicColumn } from '/@/components/Table';
+
+  const props = defineProps<{
+    config: ComponentPropsConfigType<typeof option>;
+  }>();
+
+  const realTimeList = ref<any>([
+    { attribute: '测试', price: 2, time: '2023-06-29' },
+    { attribute: '测试1', price: 21, time: '2023-06-29' },
+    { attribute: '测试2', price: 213, time: '2023-06-29' },
+  ]);
+  const realTimeColumn = reactive<BasicColumn[]>([
+    { title: '属性', dataIndex: 'attribute', width: 80, ellipsis: true },
+    { title: '值', dataIndex: 'price', width: 80, ellipsis: true },
+    { title: '时间', dataIndex: 'time', width: 80, ellipsis: true },
+  ]);
+
+  const [registerTable] = useTable({
+    showIndexColumn: false,
+    showTableSetting: false,
+    dataSource: realTimeList,
+    canResize: true,
+    maxHeight: 144,
+    size: 'small',
+    // columns: [{ title: '属性', dataIndex: 'attribute', width: 80 }],
+    columns: realTimeColumn as any,
+  });
+
+  // const getDesign = computed(() => {
+  //   const { persetOption, option } = props.config;
+  //   clearInterval;
+  //   return {};
+  // });
+
+  // const randomFn = () => {
+  //   useIntervalFn(() => {
+  //     const value = (Math.random() * 100).toFixed(0);
+  //     unref(chartInstance)?.setOption({
+  //       series: [{ data: [{ value }] }, { data: [{ value }] }],
+  //     } as EChartsOption);
+  //   }, 3000);
+  // };
+
+  const updateFn: MultipleDataFetchUpdateFn = () => {};
+
+  useMultipleDataFetch(props, updateFn);
+
+  // const { getRatio } = useComponentScale(props);
+</script>
+
+<template>
+  <main class="flex flex-col justify-center items-center">
+    <DeviceName :config="config" />
+    <div>
+      <!-- <PageWrapper> -->
+      <BasicTable @register="registerTable" />
+      <!-- </PageWrapper> -->
+    </div>
+  </main>
+</template>

+import cloneDeep from 'lodash-es/cloneDeep';
+import { StatisticsComponent6Config } from '.';
+import {
+  ConfigType,
+  CreateComponentType,
+  PublicComponentOptions,
+  PublicPresetOptions,
+} from '../../../index.type';
+import { PublicConfigClass, componentInitConfig } from '../../../publicConfig';
+import { ComponentConfigFieldEnum } from '../../../enum';
+
+export enum Gradient {
+  FIRST = 'first',
+  SECOND = 'second',
+}
+export enum GradientColor {
+  FIRST = '#07ffd6',
+  SECOND = '#5eff10',
+}
+export const option: PublicPresetOptions = {
+  multipleDataSourceComponent: true,
+  [ComponentConfigFieldEnum.FONT_COLOR]: '#FD7347',
+  [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
+  [ComponentConfigFieldEnum.UNIT]: '℃',
+};
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key: string = StatisticsComponent6Config.key;
+
+  public attr = { ...componentInitConfig };
+
+  public componentConfig: ConfigType = cloneDeep(StatisticsComponent6Config);
+
+  public persetOption = cloneDeep(option);
+
+  public option: PublicComponentOptions;
+
+  constructor(option: PublicComponentOptions) {
+    super();
+    this.option = { ...option };
+  }
+}

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

+<script lang="ts" setup>
+  import { commonDataSourceSchemas } from '../../../config/common.config';
+  import { CreateComponentType } from '../../../index.type';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import {
+    PublicComponentValueType,
+    PublicFormInstaceType,
+  } from '/@/views/visual/dataSourceBindPanel/index.type';
+
+  defineProps<{
+    values: PublicComponentValueType;
+    componentConfig: CreateComponentType;
+  }>();
+
+  const [register, { getFieldsValue, setFieldsValue, validate, resetFields }] = useForm({
+    labelWidth: 0,
+    showActionButtonGroup: false,
+    layout: 'horizontal',
+    labelCol: { span: 0 },
+    schemas: commonDataSourceSchemas(),
+  });
+
+  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('StatisticsComponent6');
+
+export const StatisticsComponent6Config: ConfigType = {
+  ...componentKeys,
+  title: '实时数据折线图',
+  package: PackagesCategoryEnum.STATISTICS,
+};

+<script lang="ts" setup>
+  import { EChartsOption, ECharts, init } from 'echarts';
+  import { unref, ref, onMounted, nextTick } from 'vue';
+  import { useMultipleDataFetch } from '../../../hook/useSocket';
+  import { ComponentPropsConfigType, MultipleDataFetchUpdateFn } from '../../../index.type';
+  import { option } from './config';
+  import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
+  import { useComponentScale } from '../../../hook/useComponentScale';
+  import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
+  import { dateFormat } from '/@/utils/common/compUtils';
+
+  const props = defineProps<{
+    config: ComponentPropsConfigType<typeof option>;
+  }>();
+
+  const chartRefEl = ref<Nullable<HTMLDivElement>>(null);
+
+  const chartInstance = ref<Nullable<ECharts>>(null);
+
+  const time = ref<Nullable<number>>(null);
+
+  function randomData() {
+    now.value = now.value + oneDay;
+    const newTime = dateFormat(unref(now), 'MM-dd hh:mm:ss');
+    value = value + Math.random() * 21 - 10;
+    return {
+      name: newTime,
+      value: [newTime, Math.round(value)],
+    };
+  }
+  const data = ref<any>([]);
+  const now = ref<number>(1688026367000);
+  let oneDay = 5000; //间隔秒数
+  let value = Math.random() * 1000;
+  for (let i = 0; i < 10; i++) {
+    data.value.push(randomData());
+  }
+  setInterval(function () {
+    for (let i = 0; i < 1; i++) {
+      data.value.shift();
+      data.value.push(randomData());
+    }
+    unref(chartInstance)?.setOption(options());
+  }, 1000);
+
+  // const getDesign = computed(() => {
+  //   const { persetOption, option } = props.config;
+  //   const { dataSource = [] } = option || {};
+  //   const { unit: presetUnit, fontColor: presetFontColor } = persetOption || {};
+  //   return {
+  //     dataSource: dataSource?.map((item) => {
+  //       const { unit, fontColor } = item.componentInfo || {};
+  //       const { attribute, attributeRename } = item;
+  //       return {
+  //         unit: unit ?? presetUnit,
+  //         fontColor: fontColor ?? presetFontColor,
+  //         attribute,
+  //         attributeRename,
+  //       };
+  //     }),
+  //   };
+  // });
+
+  const options = (): EChartsOption => {
+    // getStageColor(gradientInfo);
+    return {
+      trigger: 'axis',
+      axisPointer: {
+        lineStyle: {
+          width: 1,
+          color: '#019680',
+        },
+      },
+      legend: {
+        top: '10%',
+        left: 'center',
+        data: ['温度', '湿度'],
+      },
+      grid: {
+        top: '45%',
+        left: '20%',
+        bottom: '14%',
+        containLabel: true,
+      },
+      xAxis: {
+        type: 'category',
+        splitLine: {
+          show: true,
+          lineStyle: {
+            width: 1,
+            type: 'solid',
+            color: 'rgba(226,226,226,0.5)',
+          },
+        },
+        data: unref(data).map((item) => item.name),
+      },
+      yAxis: {
+        type: 'value',
+        boundaryGap: [0, '50%'],
+        splitLine: {
+          show: false,
+        },
+      },
+      series: [
+        {
+          type: 'line',
+          name: '温度',
+          stack: 'Total',
+          data: unref(data).map((item) => item.value),
+        },
+        {
+          type: 'line',
+          name: '湿度',
+          stack: 'Total',
+          data: unref(data).map((item) => {
+            return Number(item.value[1]) * 0.99;
+          }),
+        },
+      ],
+    };
+  };
+
+  const initial = () => {
+    chartInstance.value = init(unref(chartRefEl)! as HTMLElement);
+    chartInstance.value.setOption(options());
+  };
+
+  // const updateChart = (data: SeriesOption['data'], yAxisData) => {
+  //   unref(chartInstance)?.setOption({
+  //     series: [{ data }],
+  //     yAxis: { data: yAxisData },
+  //   } as EChartsOption);
+  // };
+
+  const updateFn: MultipleDataFetchUpdateFn = () => {
+    // console.log(message, 'message');
+    return {};
+  };
+
+  useMultipleDataFetch(props, updateFn);
+
+  onMounted(() => {
+    initial();
+    // !props.config.option.uuid && randomFn();
+    !props.config.option.uuid;
+  });
+
+  const resize = async () => {
+    await nextTick();
+
+    // 修改echarts大小
+    unref(chartInstance)?.setOption({
+      legend: {
+        textStyle: {
+          fontSize: 14 * unref(getRatio),
+        },
+      },
+    } as EChartsOption);
+    unref(chartInstance)?.resize();
+  };
+
+  const { getRatio } = useComponentScale(props, resize);
+</script>
+
+<template>
+  <main class="w-full h-full flex flex-col justify-center items-center">
+    <DeviceName :config="config" />
+    <div ref="chartRefEl" class="flex-1 w-full h-full"> </div>
+    <UpdateTime :time="time" />
+  </main>
+</template>

+import { StatisticsComponent1Config } from './StatisticsComponent1';
+import { StatisticsComponent2Config } from './StatisticsComponent2';
+// import { StatisticsComponent3Config } from './StatisticsComponent3';
+// import { StatisticsComponent4Config } from './StatisticsComponent4';
+// import { StatisticsComponent5Config } from './StatisticsComponent5';
+// import { StatisticsComponent6Config } from './StatisticsComponent6';
+
+export const STATISTICSList = [
+  StatisticsComponent1Config,
+  StatisticsComponent2Config,
+  // StatisticsComponent3Config,
+  // StatisticsComponent4Config,
+  // StatisticsComponent5Config,
+  // StatisticsComponent6Config,
+];

+import cloneDeep from 'lodash-es/cloneDeep';
+import { SwitchSignalLightConfig } 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.OPEN_COLOR]: '#30f230',
+  [ComponentConfigFieldEnum.CLOSE_COLOR]: '#eeeeee',
+  [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: true,
+};
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key: string = SwitchSignalLightConfig.key;
+
+  public attr = { ...componentInitConfig };
+
+  public componentConfig: ConfigType = cloneDeep(SwitchSignalLightConfig);
+
+  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.OPEN_COLOR,
+        label: 'ON颜色',
+        component: 'ColorPicker',
+        changeEvent: 'update:value',
+        componentProps: {
+          defaultValue: option.openColor,
+        },
+      },
+      {
+        field: ComponentConfigFieldEnum.CLOSE_COLOR,
+        label: 'OFF颜色',
+        component: 'ColorPicker',
+        changeEvent: 'update:value',
+        componentProps: {
+          defaultValue: option.closeColor,
+        },
+      },
+      {
+        field: ComponentConfigFieldEnum.SHOW_DEVICE_NAME,
+        label: '显示设备名称',
+        component: 'Checkbox',
+        defaultValue: option.showDeviceName,
+      },
+    ],
+    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 { commonDataSourceSchemas } from '../../../config/common.config';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { PublicFormInstaceType } from '/@/views/visual/dataSourceBindPanel/index.type';
+
+  const [register, { getFieldsValue, setFieldsValue, validate, resetFields }] = useForm({
+    labelWidth: 0,
+    showActionButtonGroup: false,
+    layout: 'horizontal',
+    labelCol: { span: 0 },
+    schemas: commonDataSourceSchemas(),
+  });
+
+  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 { ComponentEnum, ComponentNameEnum } from '../index.type';
+import { useComponentKeys } from '/@/views/visual/packages/hook/useComponentKeys';
+import { ConfigType, PackagesCategoryEnum } from '/@/views/visual/packages/index.type';
+
+const componentKeys = useComponentKeys('SwitchSignalLight');
+export const SwitchSignalLightConfig: ConfigType = {
+  ...componentKeys,
+  // title: ComponentNameEnum.TEXT_COMPONENT_1,
+  title: '开关量信号灯',
+  package: PackagesCategoryEnum.TEXT,
+};

+<script lang="ts" setup>
+  import { ComponentPropsConfigType, DataFetchUpdateFn } from '/@/views/visual/packages/index.type';
+  import { option } from './config';
+  import { useComponentScale } from '/@/views/visual/packages/hook/useComponentScale';
+  import { useDataFetch } from '/@/views/visual/packages/hook/useSocket';
+  import { computed } from 'vue';
+  import { ref, onMounted, unref } from 'vue';
+  import { useIntervalFn } from '@vueuse/core';
+  import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
+
+  const props = defineProps<{
+    config: ComponentPropsConfigType<typeof option>;
+  }>();
+
+  const isOpenClose = ref<boolean>(true);
+
+  const getDesign = computed(() => {
+    const { persetOption = {}, option } = props.config;
+    const {
+      openColor: persetOpenColor,
+      closeColor: persetCloseColor,
+      showDeviceName: persetShowDeviceName,
+    } = persetOption || {};
+    const { componentInfo } = option;
+
+    const { openColor, closeColor, showDeviceName } = componentInfo || {};
+    return {
+      openColor: openColor ?? persetOpenColor,
+      closeColor: closeColor ?? persetCloseColor,
+      showDeviceName: showDeviceName ?? persetShowDeviceName,
+    };
+  });
+
+  const randomFn = () => {
+    useIntervalFn(() => {
+      isOpenClose.value = !unref(isOpenClose);
+    }, 2000);
+  };
+
+  const updateFn: DataFetchUpdateFn = () => {};
+
+  onMounted(() => {
+    !props.config.option.uuid && randomFn();
+  });
+
+  useDataFetch(props, updateFn);
+
+  const { getScale } = useComponentScale(props);
+</script>
+
+<template>
+  <main :style="getScale" class="w-full h-full flex flex-col justify-center items-center">
+    <DeviceName :config="config" class="text-center" />
+    <div
+      :style="{
+        '--open-color': getDesign.openColor,
+        '--close-color': getDesign.closeColor,
+      }"
+      :class="isOpenClose ? 'switch_open' : 'switch_close'"
+    ></div>
+  </main>
+</template>
+<style lang="less" scoped>
+  .switch_open {
+    background: var(--open-color);
+    box-shadow: var(--open-color) 0 0 10px 3px;
+    width: 60px;
+    height: 60px;
+    border-radius: 50%;
+    margin: 10px 0;
+  }
+
+  .switch_close {
+    background-color: var(--close-color);
+    box-shadow: none;
+    width: 42.023px;
+    height: 42.023px;
+    border-radius: 50%;
+    margin: 10px 0;
+  }
+</style>

+import cloneDeep from 'lodash-es/cloneDeep';
+import { SwitchStatusConfig } 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.ICON]: 'shuiwen',
+  [ComponentConfigFieldEnum.ICON_COLOR]: '#367bff',
+  [ComponentConfigFieldEnum.ICON_CLOSE]: 'shuiwen',
+  [ComponentConfigFieldEnum.ICON_COLOR_CLOSE]: '#CCCCCC',
+  [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
+};
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key: string = SwitchStatusConfig.key;
+
+  public attr = { ...componentInitConfig };
+
+  public componentConfig: ConfigType = cloneDeep(SwitchStatusConfig);
+
+  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.ICON,
+        label: '开启状态图标',
+        component: 'IconDrawer',
+        changeEvent: 'update:value',
+        defaultValue: option.icon,
+        componentProps({ formModel }) {
+          const color = formModel[ComponentConfigFieldEnum.ICON_COLOR];
+          return {
+            color,
+          };
+        },
+      },
+      {
+        field: ComponentConfigFieldEnum.ICON_COLOR,
+        label: '开启图标颜色',
+        component: 'ColorPicker',
+        changeEvent: 'update:value',
+        defaultValue: option.iconColor,
+      },
+      {
+        field: ComponentConfigFieldEnum.ICON_CLOSE,
+        label: '关闭状态图标',
+        component: 'IconDrawer',
+        changeEvent: 'update:value',
+        defaultValue: option.iconClose,
+        componentProps({ formModel }) {
+          const color = formModel[ComponentConfigFieldEnum.ICON_COLOR_CLOSE];
+          return {
+            color,
+          };
+        },
+      },
+      {
+        field: ComponentConfigFieldEnum.ICON_COLOR_CLOSE,
+        label: '关闭图标颜色',
+        component: 'ColorPicker',
+        changeEvent: 'update:value',
+        defaultValue: option.iconColorClose,
+      },
+      {
+        field: ComponentConfigFieldEnum.SHOW_DEVICE_NAME,
+        label: '显示设备名称',
+        component: 'Checkbox',
+        defaultValue: option.showDeviceName,
+      },
+    ],
+    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 { commonDataSourceSchemas } from '../../../config/common.config';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { PublicFormInstaceType } from '/@/views/visual/dataSourceBindPanel/index.type';
+
+  // const props = defineProps<{
+  //   values: PublicComponentDataSourceProps;
+  // }>();
+
+  const [register, { getFieldsValue, setFieldsValue, validate, resetFields }] = useForm({
+    labelWidth: 0,
+    showActionButtonGroup: false,
+    layout: 'horizontal',
+    labelCol: { span: 0 },
+    schemas: commonDataSourceSchemas(),
+  });
+
+  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('SwitchStatus');
+export const SwitchStatusConfig: ConfigType = {
+  ...componentKeys,
+  title: '开关量状态',
+  package: PackagesCategoryEnum.TEXT,
+};

+<script lang="ts" setup>
+  import { useDataFetch } from '/@/views/visual/packages/hook/useSocket';
+  import { ComponentPropsConfigType, DataFetchUpdateFn } from '/@/views/visual/packages/index.type';
+
+  import { option } from './config';
+  import { SvgIcon } from '/@/components/Icon';
+  import { computed } from 'vue';
+  import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
+
+  const props = defineProps<{
+    config: ComponentPropsConfigType<typeof option>;
+  }>();
+
+  const getDesign = computed(() => {
+    const { persetOption = {}, option } = props.config;
+
+    const {
+      iconColor: persetIconColor,
+      unit: perseUnit,
+      icon: persetIcon,
+      fontColor: persetFontColor,
+    } = persetOption;
+
+    const { componentInfo, attribute, attributeRename } = option;
+
+    const { icon, iconColor, fontColor, unit } = componentInfo || {};
+    return {
+      iconColor: iconColor || persetIconColor,
+      unit: unit ?? perseUnit,
+      icon: icon || persetIcon,
+      fontColor: fontColor || persetFontColor,
+      attribute: attributeRename || attribute,
+    };
+  });
+
+  // const svgList = ref<any>([
+  //   {
+  //     value: 26.2,
+  //     name: 'wendu',
+  //     icon: 'zongfushe',
+  //     unit: 'kw',
+  //     iconColor: '#367BFF',
+  //     fontColor: '#357CFB',
+  //   },
+  //   {
+  //     value: 53.7,
+  //     name: 'shidu',
+  //     icon: 'guangzhaoqiangdu',
+  //     unit: '℃',
+  //     iconColor: '#FFA000',
+  //     fontColor: '#FFA000',
+  //   },
+  // ]);
+
+  const updateFn: DataFetchUpdateFn = () => {};
+
+  useDataFetch(props, updateFn);
+</script>
+
+<template>
+  <main class="w-full h-full flex flex-col justify-evenly items-center">
+    <DeviceName :config="config" />
+    <div class="flex justify-center items-center">
+      <SvgIcon
+        :name="getDesign.icon!"
+        prefix="iconfont"
+        :size="60"
+        :style="{ color: getDesign.iconColor }"
+      />
+    </div>
+  </main>
+</template>

+import cloneDeep from 'lodash-es/cloneDeep';
+import { ValueList1Config } 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 = {
+  multipleDataSourceComponent: true,
+  [ComponentConfigFieldEnum.FONT_COLOR]: '#000',
+  [ComponentConfigFieldEnum.UNIT]: '℃',
+  [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
+  [ComponentConfigFieldEnum.BACKGROUND_COLOR]: '#377dff',
+  fontSize: '18px',
+};
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key: string = ValueList1Config.key;
+
+  public attr = { ...componentInitConfig };
+
+  public componentConfig: ConfigType = cloneDeep(ValueList1Config);
+
+  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.FONT_COLOR,
+        label: '数值字体颜色',
+        component: 'ColorPicker',
+        changeEvent: 'update:value',
+        componentProps: {
+          defaultValue: option.fontColor,
+        },
+      },
+      {
+        field: ComponentConfigFieldEnum.BACKGROUND_COLOR,
+        label: '进度条背景色',
+        component: 'ColorPicker',
+        changeEvent: 'update:value',
+        componentProps: {
+          defaultValue: option.backgroundColor,
+        },
+      },
+
+      {
+        field: ComponentConfigFieldEnum.UNIT,
+        label: '数值单位',
+        component: 'Input',
+        defaultValue: option.unit,
+      },
+      // {
+      //   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 { commonDataSourceSchemas } from '../../../config/common.config';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { PublicFormInstaceType } from '/@/views/visual/dataSourceBindPanel/index.type';
+
+  // const props = defineProps<{
+  //   values: PublicComponentDataSourceProps;
+  // }>();
+
+  const [register, { getFieldsValue, setFieldsValue, validate, resetFields }] = useForm({
+    labelWidth: 0,
+    showActionButtonGroup: false,
+    layout: 'horizontal',
+    labelCol: { span: 0 },
+    schemas: commonDataSourceSchemas(),
+  });
+
+  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('ValueList1');
+export const ValueList1Config: ConfigType = {
+  ...componentKeys,
+  title: '数值列表1',
+  package: PackagesCategoryEnum.TEXT,
+};

+<script lang="ts" setup>
+  import { option } from './config';
+  // import { useComponentScale } from '/@/views/visual/packages/hook/useComponentScale';
+  import { ComponentPropsConfigType, MultipleDataFetchUpdateFn } from '../../../index.type';
+  import { useMultipleDataFetch } from '/@/views/visual/packages/hook/useSocket';
+  import { computed } from 'vue';
+  import { ref } from 'vue';
+  import { Progress } from 'ant-design-vue';
+  import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
+  import { unref } from 'vue';
+  import { onMounted } from 'vue';
+
+  const props = defineProps<{
+    config: ComponentPropsConfigType<typeof option>;
+  }>();
+
+  const percentList = ref<any[]>([
+    {
+      value: 20,
+      fontColor: '#19eff',
+      backgroundColor: '#19eff',
+      color: '#000',
+      fontSize: '16px',
+      unit: '℃',
+      id: 1,
+    },
+    {
+      value: 66,
+      fontColor: '#1E8667',
+      backgroundColor: '#1E8667',
+      color: '#000',
+      fontSize: '16px',
+      unit: '℃',
+      id: 2,
+    },
+    {
+      value: 49,
+      fontColor: '#2196F3',
+      backgroundColor: '#2196F3',
+      color: '#000',
+      fontSize: '16px',
+      unit: '℃',
+      id: 3,
+    },
+  ]);
+
+  const getDesign = computed(() => {
+    const { persetOption = {}, option } = props.config;
+    const { dataSource = [] } = option || {};
+    const {
+      unit: presetUnit,
+      fontColor: presetFontColor,
+      backgroundColor: persetBackgroundColor,
+    } = persetOption || {};
+    return {
+      dataSource: dataSource?.map((item) => {
+        const { unit, fontColor, fontSize, backgroundColor } = item.componentInfo || {};
+        const { attribute, attributeRename } = item;
+        return {
+          unit: unit ?? presetUnit,
+          fontColor: fontColor ?? presetFontColor,
+          fontSize,
+          backgroundColor: backgroundColor ?? persetBackgroundColor,
+          attribute,
+          attributeRename,
+        };
+      }),
+    };
+  });
+
+  const newPercentList = ref<any[]>([]);
+
+  const updateFn: MultipleDataFetchUpdateFn = (message) => {
+    const { data = {} } = message;
+    const { dataSource } = unref(getDesign);
+    newPercentList.value = dataSource.map((item) => {
+      const { attribute, fontSize, attributeRename, fontColor, unit, backgroundColor } = item;
+
+      const [latest] = data[attribute] || [];
+      const [_timespan, value] = latest || [];
+      return {
+        value: Number(value),
+        name: attributeRename ?? attribute,
+        fontSize,
+        unit,
+        backgroundColor: backgroundColor,
+        fontColor: fontColor,
+      };
+    });
+    // console.log(numberList, 'numberList');
+  };
+
+  onMounted(() => {
+    newPercentList.value = percentList.value;
+    !props.config.option.uuid;
+  });
+
+  useMultipleDataFetch(props, updateFn);
+
+  // const { getScale } = useComponentScale(props);
+</script>
+
+<template>
+  <main class="w-full h-full flex flex-col justify-center">
+    <DeviceName :config="config" />
+
+    <div
+      v-for="item in newPercentList"
+      :key="item.id"
+      class="flex flex-col ml-3 mr-3 items-stretch"
+    >
+      <div class="flex justify-between">
+        <div class="text-gray-500 text-lg truncate">{{ item.name || '温度' }}</div>
+        <span class="text-lg" :style="{ color: item.fontColor }"
+          >{{ item.value }} {{ item.unit }}</span
+        >
+      </div>
+      <div>
+        <Progress :strokeColor="item.backgroundColor" :percent="item.value" :showInfo="false" />
+      </div>
+    </div>
+  </main>
+</template>
+<style lang="less" scoped>
+  // :deep(.ant-progress-success-bg, .ant-progress-bg) {
+  //   background: '#2196F3' !important;
+  // }
+</style>

+import cloneDeep from 'lodash-es/cloneDeep';
+import { ValueList2Config } 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 = {
+  multipleDataSourceComponent: true,
+  [ComponentConfigFieldEnum.UNIT]: '℃',
+  [ComponentConfigFieldEnum.ICON]: 'shuiwen',
+  [ComponentConfigFieldEnum.ICON_COLOR]: '#367bff',
+  [ComponentConfigFieldEnum.FONT_COLOR]: '#000',
+  [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
+};
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key: string = ValueList2Config.key;
+
+  public attr = { ...componentInitConfig };
+
+  public componentConfig: ConfigType = cloneDeep(ValueList2Config);
+
+  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.FONT_COLOR,
+        label: '数值字体颜色',
+        component: 'ColorPicker',
+        changeEvent: 'update:value',
+        valueField: 'value',
+        defaultValue: option.fontColor,
+      },
+      {
+        field: ComponentConfigFieldEnum.UNIT,
+        label: '数值单位',
+        component: 'Input',
+        defaultValue: option.unit,
+        componentProps: {
+          placeholder: '请输入数值单位',
+        },
+      },
+      {
+        field: ComponentConfigFieldEnum.ICON_COLOR,
+        label: '图标颜色',
+        component: 'ColorPicker',
+        changeEvent: 'update:value',
+        defaultValue: option.iconColor,
+      },
+      {
+        field: ComponentConfigFieldEnum.ICON,
+        label: '图标',
+        component: 'IconDrawer',
+        changeEvent: 'update:value',
+        valueField: 'value',
+        defaultValue: option.icon,
+        componentProps({ formModel }) {
+          const color = formModel[ComponentConfigFieldEnum.ICON_COLOR];
+          return {
+            color,
+          };
+        },
+      },
+      {
+        field: ComponentConfigFieldEnum.SHOW_DEVICE_NAME,
+        label: '显示设备名称',
+        component: 'Checkbox',
+        defaultValue: option.showDeviceName,
+      },
+    ],
+    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 { commonDataSourceSchemas } from '../../../config/common.config';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { PublicFormInstaceType } from '/@/views/visual/dataSourceBindPanel/index.type';
+
+  // const props = defineProps<{
+  //   values: PublicComponentDataSourceProps;
+  // }>();
+
+  const [register, { getFieldsValue, setFieldsValue, validate, resetFields }] = useForm({
+    labelWidth: 0,
+    showActionButtonGroup: false,
+    layout: 'horizontal',
+    labelCol: { span: 0 },
+    schemas: commonDataSourceSchemas(),
+  });
+
+  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('ValueList2');
+export const ValueList2Config: ConfigType = {
+  ...componentKeys,
+  title: '数值列表2',
+  package: PackagesCategoryEnum.TEXT,
+};

+<script lang="ts" setup>
+  import { ComponentPropsConfigType, MultipleDataFetchUpdateFn } from '../../../index.type';
+
+  import { option } from './config';
+  import { useMultipleDataFetch } from '/@/views/visual/packages/hook/useSocket';
+  import { ref, unref } from 'vue';
+  import { SvgIcon } from '/@/components/Icon';
+  import { computed } from 'vue';
+  import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
+
+  const props = defineProps<{
+    config: ComponentPropsConfigType<typeof option>;
+  }>();
+
+  const getDesign = computed(() => {
+    const { persetOption = {}, option } = props.config;
+    const { dataSource = [] } = option || {};
+    const {
+      unit: persetUnit,
+      fontColor: persetFontColor,
+      icon: persetIcon,
+      iconColor: persetIconColor,
+    } = persetOption || {};
+    return {
+      dataSource: dataSource.map((item) => {
+        const { fontColor, icon, iconColor, unit } = item.componentInfo;
+        const { attribute, attributeRename } = item;
+        return {
+          unit: unit ?? persetUnit,
+          fontColor: fontColor ?? persetFontColor,
+          icon: icon ?? persetIcon,
+          iconColor: iconColor ?? persetIconColor,
+          attribute: attribute || attributeRename,
+          attributeRename,
+        };
+      }),
+    };
+  });
+  const svgList = ref<any>([
+    {
+      value: 26.2,
+      name: 'wendu',
+      icon: 'zongfushe',
+      unit: 'kw',
+      iconColor: '#367BFF',
+      fontColor: '#357CFB',
+    },
+    {
+      value: 53.7,
+      name: 'shidu',
+      icon: 'guangzhaoqiangdu',
+      unit: '℃',
+      iconColor: '#FFA000',
+      fontColor: '#FFA000',
+    },
+  ]);
+
+  const updateFn: MultipleDataFetchUpdateFn = (message) => {
+    const { data = {} } = message;
+    const { dataSource } = unref(getDesign);
+    svgList.value.length = 0;
+    svgList.value = dataSource.map((item) => {
+      const { icon, iconColor, unit, fontColor, attribute } = item || {};
+      const [latest] = data[attribute] || [];
+      const [_timespan, value] = latest || [];
+      return {
+        value: Number(value),
+        name: attribute,
+        icon,
+        unit,
+        iconColor,
+        fontColor,
+      };
+    });
+  };
+
+  useMultipleDataFetch(props, updateFn);
+</script>
+
+<template>
+  <main class="w-full h-full flex flex-col justify-evenly items-center">
+    <DeviceName :config="config" />
+    <div
+      style="width: 86%"
+      v-for="item in svgList"
+      :key="item.id"
+      class="flex justify-between items-center"
+    >
+      <div class="flex items-center">
+        <SvgIcon
+          :name="item.icon!"
+          prefix="iconfont"
+          :size="45"
+          :style="{ color: item.iconColor }"
+        />
+
+        <div class="text-gray-500 text-lg truncate ml-6">{{ item.attribute || '温度' }}</div>
+      </div>
+
+      <h1 class="font-bold text-xl m-2 truncate" :style="{ color: item.fontColor }">
+        <span> {{ item.value || 0 }}</span>
+        <span>{{ item.unit }} </span>
+      </h1>
+    </div>
+  </main>
+</template>

@@ -2,10 +2,18 @@ import { TextComponent1Config } from './TextComponent1';
 import { TextComponent2Config } from './TextComponent2';
 import { TextComponent3Config } from './TextComponent3';
 import { TextComponent4Config } from './TextComponent4';
+import { SwitchSignalLightConfig } from './SwitchSignalLight';
+// import { SwitchStatusConfig } from './SwitchStatus';
+import { ValueList1Config } from './ValueList1';
+// import { ValueList2Config } from './ValueList2';
 
 export const TextList = [
   TextComponent1Config,
   TextComponent2Config,
   TextComponent3Config,
   TextComponent4Config,
+  ValueList1Config,
+  // ValueList2Config,
+  SwitchSignalLightConfig,
+  // SwitchStatusConfig,
 ];

@@ -3,12 +3,15 @@ export enum ComponentConfigFieldEnum {
   UNIT = 'unit',
   POINTER_COLOR = 'pointerColor',
   INSTRUMENT_PANEL_COLOR = 'instrumentPanelColor',
+  CONTROL_BAR_COLOR = 'controlBarColor',
   // INSTRUMENT_PANEL_WIDTH = 'instrumentPanelWidth',
 
   PROGRESS_BAR_CIRCLE = 'progressBarCircle',
 
   ICON_COLOR = 'iconColor',
+  ICON_COLOR_CLOSE = 'iconColorClose',
   ICON = 'icon',
+  ICON_CLOSE = 'iconClose',
   FIRST_PHASE_COLOR = 'firstPhaseColor',
   SECOND_PHASE_COLOR = 'secondPhaseColor',
   THIRD_PHASE_COLOR = 'thirdPhaseColor',
@@ -23,4 +26,6 @@ export enum ComponentConfigFieldEnum {
   WAVE_SECOND = 'waveSecond',
   WAVE_THIRD = 'waveThird',
   BACKGROUND_COLOR = 'backgroundColor',
+  OPEN_COLOR = 'openColor',
+  CLOSE_COLOR = 'closeColor',
 }

@@ -8,6 +8,7 @@ export const useGetComponentConfig = (
 ): CreateComponentType => {
   try {
     const config = createComponent({ key: transformComponentKey(key) } as ConfigType, options);
+    if (!config) console.error(`can not get component config by component key (${key})`);
     return config;
   } catch (error) {
     console.error(`can not get component config by component key (${key})`);

@@ -20,6 +20,7 @@ export enum PackagesCategoryNameEnum {
   CONTROL = '控制组件',
   MAP = '地图组件',
   FLOWMETER = '流量计',
+  STATISTICS = '统计',
   OTHER = '其他',
 }
 
@@ -33,6 +34,7 @@ export enum PackagesCategoryEnum {
   CONTROL = 'CONTROL',
   MAP = 'MAP',
   FLOWMETER = 'FLOWMETER',
+  STATISTICS = 'STATISTICS',
   OTHER = 'OTHER',
 }
 
@@ -92,6 +94,7 @@ export interface PublicPresetOptions {
   [ComponentConfigFieldEnum.UNIT]?: string;
   [ComponentConfigFieldEnum.ICON_COLOR]?: string;
   [ComponentConfigFieldEnum.ICON]?: string;
+  [ComponentConfigFieldEnum.CONTROL_BAR_COLOR]?: string;
   [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]?: boolean;
   [ComponentConfigFieldEnum.PROGRESS_BAR_CIRCLE]?: boolean;
   [ComponentConfigFieldEnum.GRADIENT_INFO]?: ComponentInfoGradientInfoType[];
@@ -134,6 +137,7 @@ export interface PackagesType {
   [PackagesCategoryEnum.CONTROL]: ConfigType[];
   [PackagesCategoryEnum.MAP]: ConfigType[];
   [PackagesCategoryEnum.FLOWMETER]: ConfigType[];
+  [PackagesCategoryEnum.STATISTICS]: ConfigType[];
   [PackagesCategoryEnum.OTHER]: ConfigType[];
 }
 

@@ -5,6 +5,7 @@ import { MapList } from './components/Map';
 import { OtherList } from './components/Other';
 import { PictureList } from './components/Picture';
 import { TextList } from './components/Text';
+import { STATISTICSList } from './components/Statistics';
 import { PackagesCategoryEnum, PackagesType } from './index.type';
 
 export const packageList: PackagesType = {
@@ -14,5 +15,6 @@ export const packageList: PackagesType = {
   [PackagesCategoryEnum.CONTROL]: ControlList,
   [PackagesCategoryEnum.MAP]: MapList,
   [PackagesCategoryEnum.FLOWMETER]: FlowmeterList,
+  [PackagesCategoryEnum.STATISTICS]: STATISTICSList,
   [PackagesCategoryEnum.OTHER]: OtherList,
 };

@@ -58,6 +58,7 @@ export interface ComponentInfo {
   instrumentPanelColor?: string;
   // instrumentPanelWidth?: string | number;
   progressBarCircle?: Boolean;
+  [key: string]: any;
 }
 
 export interface CustomCommand {