Merge branch 'main_dev' into 'main'

merge Main dev main

See merge request yunteng/thingskit-front!812

@@ -13,7 +13,7 @@
       name="viewport"
       content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0"
     />
-    <title> <%= title %> </title>
+    <title></title>
     <link rel="icon" href="/favicon.ico" />
   </head>
 

@@ -126,6 +126,10 @@ export interface MasterDeviceList {
   name: string;
   label?: string;
   value?: string;
+  alias?: string;
+  codeType?: string;
+  code?: string;
+  [key: string]: string | undefined;
 }
 
 export interface ComponentInfoDetail {

@@ -10,6 +10,7 @@ export const batchImportDevice = (data: ImportDeviceParams) => {
     {
       url: BatchImportApi.IMPORT,
       data,
+      timeout: 1000 * 60 * 60,
     },
     { joinPrefix: false }
   );

@@ -166,6 +166,8 @@ export interface DeviceRecord {
   id: string;
   creator: string;
   createTime: string;
+  codeType?: string;
+  code?: string;
   name: string;
   tenantId: string;
   transportType: string;
@@ -199,6 +201,8 @@ export interface DeviceModelOfMatterAttrs {
   identifier: string;
   accessMode: string;
   detail: StructJSON;
+  deviceDetail?: DeviceRecord;
+  extensionDesc?: any;
 }
 
 export interface DeviceStateLogModel {

@@ -51,6 +51,7 @@ export interface ModelOfMatterParams {
   callType?: string;
   eventType?: string;
   accessMode?: string;
+  extensionDesc?: Recordable;
 }
 
 export interface GetModelTslParams {

@@ -59,8 +59,8 @@ export interface GenModbusCommandType {
   crc: string;
   deviceCode: string;
   method: string;
-  registerAddr: string;
-  registerNum?: number;
+  registerAddress: string;
+  registerNumber?: number;
   registerValues?: number[];
 }
 

@@ -39,6 +39,8 @@ import CustomMinMaxInput from './externalCompns/components/CustomMinMaxInput.vue
 import StructForm from './externalCompns/components/StructForm/StructForm.vue';
 import ApiSelectScrollLoad from './components/ApiSelectScrollLoad.vue';
 import InputGroup from './components/InputGroup.vue';
+import RegisterAddressInput from '/@/views/task/center/components/PollCommandInput/RegisterAddressInput.vue';
+import ExtendDesc from '/@/components/Form/src/externalCompns/components/ExtendDesc/index.vue';
 
 const componentMap = new Map<ComponentType, Component>();
 
@@ -85,6 +87,8 @@ componentMap.set('CustomMinMaxInput', CustomMinMaxInput);
 componentMap.set('StructForm', StructForm);
 componentMap.set('ApiSelectScrollLoad', ApiSelectScrollLoad);
 componentMap.set('InputGroup', InputGroup);
+componentMap.set('RegisterAddressInput', RegisterAddressInput);
+componentMap.set('ExtendDesc', ExtendDesc);
 
 export function add(compName: ComponentType, component: Component) {
   componentMap.set(compName, component);

+import { findDictItemByCode } from '/@/api/system/dict';
+import { FormSchema } from '/@/components/Table';
+import { DictEnum } from '/@/enums/dictEnum';
+
+export enum FormFieldsEnum {
+  REGISTER_ADDRESS = 'registerAddress',
+  DATA_TYPE = 'dataType',
+  ACTION_TYPE = 'actionType',
+  ZOOM_FACTOR = 'zoomFactor',
+}
+
+export const formSchemas: FormSchema[] = [
+  {
+    field: FormFieldsEnum.REGISTER_ADDRESS,
+    component: 'RegisterAddressInput',
+    label: '寄存器地址',
+    changeEvent: 'update:value',
+    valueField: 'value',
+    rules: [{ message: '请输入寄存器地址', required: true, type: 'number' }],
+    componentProps: {
+      placeholder: '请输入寄存器地址',
+    },
+  },
+  {
+    field: FormFieldsEnum.DATA_TYPE,
+    component: 'ApiSelect',
+    label: '数据格式',
+    rules: [{ message: '请选择数据格式', required: true }],
+    componentProps: {
+      api: findDictItemByCode,
+      params: {
+        dictCode: DictEnum.REGISTER_DATA_FORMAT,
+      },
+      labelField: 'itemText',
+      valueField: 'itemValue',
+      placeholder: '请选择数据格式',
+      getPopupContainer: () => document.body,
+    },
+  },
+  {
+    field: FormFieldsEnum.ACTION_TYPE,
+    component: 'Select',
+    label: '操作类型',
+    rules: [{ message: '请选择操作类型', required: true }],
+    componentProps: {
+      options: [
+        { label: '05 写入单个线圈寄存器', value: '05' },
+        { label: '06 写入单个保持寄存器', value: '06' },
+        // { label: '0F 写入多个线圈状态', value: '0F' },
+        { label: '16 写入多个保持寄存器', value: '16' },
+      ],
+      placeholder: '请选择操作类型',
+      getPopupContainer: () => document.body,
+    },
+  },
+  {
+    field: FormFieldsEnum.ZOOM_FACTOR,
+    component: 'InputNumber',
+    label: '缩放因子',
+    helpMessage: ['缩放因子不能为0,默认为1'],
+    defaultValue: 1,
+    componentProps: {
+      min: 1,
+      placeholder: '请输入缩放因子',
+    },
+  },
+];

+<script lang="ts" setup>
+  import { Button } from 'ant-design-vue';
+  import { nextTick, ref, watch } from 'vue';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { BasicModal } from '/@/components/Modal';
+  import { PlusCircleOutlined } from '@ant-design/icons-vue';
+  import { FormFieldsEnum, formSchemas } from './config';
+  import { DataTypeEnum } from '../StructForm/config';
+  const show = ref(false);
+
+  const props = withDefaults(
+    defineProps<{
+      value?: object;
+      disabled?: boolean;
+      dataType?: DataTypeEnum;
+    }>(),
+    {
+      value: () => ({}),
+    }
+  );
+
+  const emit = defineEmits(['update:value']);
+
+  const [
+    registerForm,
+    { setFieldsValue, getFieldsValue, setProps, validate, resetFields, updateSchema },
+  ] = useForm({
+    schemas: formSchemas,
+    showActionButtonGroup: false,
+  });
+
+  const handleClick = async () => {
+    show.value = true;
+    await nextTick();
+    resetFields();
+    setProps({ disabled: props.disabled });
+    setFieldsValue(props.value);
+  };
+
+  const handleSubmit = async () => {
+    await validate();
+    const value = getFieldsValue();
+    emit('update:value', value);
+    show.value = false;
+  };
+
+  watch(show, async (value) => {
+    if (value) {
+      await nextTick();
+      updateSchema([
+        {
+          field: FormFieldsEnum.ZOOM_FACTOR,
+          ifShow: props.dataType == DataTypeEnum.IS_BOOL ? false : true,
+        },
+      ]);
+    }
+  });
+
+  watch(
+    () => props.value,
+    (value) => {
+      setFieldsValue(value);
+    }
+  );
+</script>
+
+<template>
+  <section>
+    <Button type="link" @click="handleClick"><PlusCircleOutlined />新增扩展描述</Button>
+    <BasicModal title="扩展描述" v-model:visible="show" @ok="handleSubmit">
+      <BasicForm class="extension-form" @register="registerForm" />
+    </BasicModal>
+  </section>
+</template>
+
+<style lang="less" scoped>
+  .extension-form {
+    :deep(.ant-input-number) {
+      width: 100%;
+    }
+  }
+</style>

@@ -139,6 +139,7 @@
         {
           required: props.required,
           message: `${functionName}是必填项`,
+          type: 'number',
         },
       ],
       componentProps: {

@@ -28,7 +28,7 @@ export const validateJSON = (_rule, value = [] as ModelOfMatterParams[], _callba
   return Promise.reject('JSON对象不能为空');
 };
 
-export const formSchemas = (hasStructForm: boolean): FormSchema[] => {
+export const formSchemas = (hasStructForm: boolean, isTcp = false): FormSchema[] => {
   return [
     {
       field: FormField.FUNCTION_NAME,
@@ -276,6 +276,22 @@ export const formSchemas = (hasStructForm: boolean): FormSchema[] => {
       ifShow: ({ values }) => values[FormField.TYPE] === DataTypeEnum.IS_STRING,
     },
     {
+      field: FormField.EXTENSION_DESC,
+      component: 'ExtendDesc',
+      label: '扩展描述',
+      valueField: 'value',
+      changeEvent: 'update:value',
+      ifShow: isTcp,
+      colProps: {
+        span: 16,
+      },
+      componentProps: ({ formModel }) => {
+        return {
+          dataType: formModel[FormField.TYPE],
+        };
+      },
+    },
+    {
       field: FormField.ACCESS_MODE,
       component: 'ApiRadioGroup',
       label: '读写类型',

@@ -129,4 +129,5 @@ export type ComponentType =
   | 'RegisterAddressInput'
   | 'ControlGroup'
   | 'JSONEditor'
-  | 'OrgTreeSelect';
+  | 'OrgTreeSelect'
+  | 'ExtendDesc';

@@ -17,4 +17,6 @@ export enum DictEnum {
   DISABLED_TENANT_AUTH = 'disabled_tenant_auth',
   // 客户禁用的权限
   DISABLE_CUSTOMER_AUTH = 'disabled_customer_auth',
+  // 寄存器数据格式
+  REGISTER_DATA_FORMAT = 'register_data_format',
 }

@@ -54,10 +54,11 @@
         field: FiledKey.WEBSITE,
         label: handleDecode(t('routes.aboutSoftware.websiteLabel')),
         render: (val: string) => {
+          let joinWww = val.substring(0, 8) + 'www.' + val.substring(8);
           return h(
             'span',
-            { class: 'text-blue-500 cursor-pointer', onClick: () => open(val) },
-            val
+            { class: 'text-blue-500 cursor-pointer', onClick: () => open(joinWww) },
+            joinWww
           );
         },
       },

@@ -67,7 +67,7 @@ export function useAlarmNotify(params: UseAlarmNotifyParams = {}) {
 
       if (items.length) {
         const first = items.at(0)!;
-        const { deviceName, id, severity } = first;
+        const { deviceName, id, severity, type } = first;
 
         let key: Nullable<string> = `open-notify-${id}`;
 
@@ -82,6 +82,10 @@ export function useAlarmNotify(params: UseAlarmNotifyParams = {}) {
               h('span', { style: { marginRight: '5px' } }, '设备:'),
               h('span', {}, `[${deviceName}]`),
             ]),
+            h('div', { style: { marginRight: '5px' } }, [
+              h('span', { style: { marginRight: '5px' } }, '告警场景:'),
+              h('span', {}, `[${type}]`),
+            ]),
             h('div', { style: { marginTop: '5px' } }, [
               h('span', { style: { marginRight: '5px' } }, '告警状态:'),
               h(Tag, { color }, () => `${alarmNotifyStatusMean}`),

@@ -10,6 +10,9 @@ import { ModelOfMatterParams } from '/@/api/device/model/modelOfMatterModel';
 import { toRaw, unref } from 'vue';
 import ObjectModelValidateForm from '/@/components/Form/src/externalCompns/components/ObjectModelValidateForm/ObjectModelValidateForm.vue';
 import { CommandDeliveryWayEnum, ServiceCallTypeEnum } from '/@/enums/toolEnum';
+import { TaskTypeEnum } from '/@/views/task/center/config';
+import { AddressTypeEnum } from '/@/views/task/center/components/PollCommandInput';
+
 useComponentRegister('JSONEditor', JSONEditor);
 useComponentRegister('ObjectModelValidateForm', ObjectModelValidateForm);
 
@@ -17,6 +20,7 @@ export enum TypeEnum {
   IS_GATEWAY = 'GATEWAY',
   SENSOR = 'SENSOR',
 }
+
 export const isGateWay = (type: string) => {
   return type === TypeEnum.IS_GATEWAY;
 };
@@ -85,6 +89,9 @@ export const step1Schemas: FormSchema[] = [
             transportType,
             deviceProfileId: id,
             gatewayId: null,
+            codeType: transportType === TransportTypeEnum.TCP ? TaskTypeEnum.MODBUS_RTU : null,
+            code: null,
+            addressCode: null,
           });
         },
         showSearch: true,
@@ -112,18 +119,101 @@ export const step1Schemas: FormSchema[] = [
     },
   },
   {
+    field: 'codeType',
+    label: '标识符类型',
+    component: 'Select',
+    dynamicRules({ values }) {
+      return [
+        {
+          required: values?.transportType === TransportTypeEnum.TCP,
+          message: '请输入设备标识符',
+        },
+      ];
+    },
+    // ifShow: ({ values }) =>
+    //   values?.transportType === TransportTypeEnum.TCP &&
+    //   (values.deviceType === DeviceTypeEnum.SENSOR || values.deviceType === DeviceTypeEnum.GATEWAY),
+    ifShow: ({ values }) => values?.transportType === TransportTypeEnum.TCP,
+    componentProps: ({ formActionType }) => {
+      const { setFieldsValue } = formActionType;
+      return {
+        options: [
+          { label: '自定义', value: TaskTypeEnum.CUSTOM },
+          { label: 'ModBus', value: TaskTypeEnum.MODBUS_RTU },
+        ],
+        onChange() {
+          setFieldsValue({ addressCode: null });
+        },
+      };
+    },
+  },
+  {
+    field: 'addressCode',
+    label: '地址码',
+    dynamicRules({ values }) {
+      return [
+        {
+          required:
+            values?.transportType === TransportTypeEnum.TCP &&
+            values?.deviceType === DeviceTypeEnum.SENSOR,
+          message: '请输入设备地址码',
+        },
+      ];
+    },
+    component: 'RegisterAddressInput',
+    changeEvent: 'update:value',
+    valueField: 'value',
+    componentProps: {
+      type: AddressTypeEnum.DEC,
+      maxValue: 247,
+      minValue: 0,
+      disabledSwitch: true,
+    },
+    // ifShow: ({ values }) => {
+    //   return (
+    //     values?.transportType === TransportTypeEnum.TCP &&
+    //     (values.deviceType === DeviceTypeEnum.SENSOR ||
+    //       values.deviceType === DeviceTypeEnum.GATEWAY) &&
+    //     values?.codeType === TaskTypeEnum.MODBUS_RTU
+    //   );
+    // },
+    ifShow: ({ values }) => {
+      return (
+        values?.transportType === TransportTypeEnum.TCP &&
+        values?.codeType === TaskTypeEnum.MODBUS_RTU
+      );
+    },
+  },
+  {
     field: 'code',
     label: '设备标识',
-    required: true,
+    dynamicRules({ values }) {
+      return [
+        {
+          required:
+            values?.transportType === TransportTypeEnum.TCP &&
+            values.deviceType === DeviceTypeEnum.SENSOR,
+          message: '请输入设备标识符',
+        },
+      ];
+    },
     component: 'Input',
-    componentProps: {
-      maxLength: 255,
-      placeholder: '请输入设备标识或设备地址码',
+    componentProps: () => {
+      return {
+        maxLength: 255,
+        placeholder: '请输入设备标识或设备地址码',
+      };
+    },
+    ifShow: ({ values }) => {
+      return (
+        values?.transportType === TransportTypeEnum.TCP &&
+        (values.deviceType === DeviceTypeEnum.SENSOR ||
+          values.deviceType === DeviceTypeEnum.GATEWAY) &&
+        values?.codeType === TaskTypeEnum.CUSTOM
+      );
     },
-    ifShow: ({ values }) =>
-      values?.transportType === TransportTypeEnum.TCP &&
-      values.deviceType === DeviceTypeEnum.SENSOR,
   },
+
   {
     field: 'brand',
     component: 'ApiRadioGroup',
@@ -876,8 +966,8 @@ export const CommandSchemas = (
             const setValues = {
               [CommandFieldsEnum.CUSTOM_TYPE]:
                 options.callType === ServiceCallTypeEnum.ASYNC
-                  ? CommandDeliveryWayEnum.TWO_WAY
-                  : CommandDeliveryWayEnum.ONE_WAY,
+                  ? CommandDeliveryWayEnum.ONE_WAY
+                  : CommandDeliveryWayEnum.TWO_WAY,
               [CommandFieldsEnum.MODEL_INPUT]: null,
             };
 

@@ -43,7 +43,9 @@ export const descSchema = (emit: EmitType): DescItem[] => {
             type: 'link',
             style: { padding: 0 },
             onClick: () =>
-              !isCustomer ? go(PageEnum.DEVICE_PROFILE + '?name=' + String(val)) : '',
+              !isCustomer
+                ? go(PageEnum.DEVICE_PROFILE + '?name=' + encodeURIComponent(String(val)))
+                : '',
           },
           { default: () => val }
         );

@@ -109,6 +109,15 @@
         unref(DeviceStep1Ref)?.resetFields();
         unref(DeviceStep2Ref)?.resetFieldsValueAndStatus();
       }
+      //验证设备名称不能超过255长度
+      const MAX_NAME_LENGTH = 255;
+      const validateNameLength = (name: string) => {
+        if (String(name).length > MAX_NAME_LENGTH) {
+          const errorText = `设备名称长度不能超过${MAX_NAME_LENGTH}`;
+          createMessage.error(errorText);
+          throw Error(errorText);
+        }
+      };
       // 提交
       const msg = computed(() => (unref(isUpdate) ? '更新设备成功' : '新增设备成功'));
       async function handleOk() {
@@ -150,6 +159,7 @@
                 ...DeviceStep1Ref.value?.positionState,
               },
             };
+            validateNameLength(stepRecord.name);
             await createOrEditDevice(editData);
           } else {
             const stepRecord = unref(stepState);
@@ -178,6 +188,7 @@
                           : null,
                     },
             };
+            validateNameLength(stepRecord.name);
             await createOrEditDevice(createData);
           }
           createMessage.success(unref(msg));

@@ -127,6 +127,7 @@
   import { copyTransFun } from '/@/utils/fnUtils';
   import { useDrawer } from '/@/components/Drawer';
   import DeptDrawer from '/@/views/system/organization/OrganizationDrawer.vue';
+  import { TaskTypeEnum } from '/@/views/task/center/config';
 
   export default defineComponent({
     components: {
@@ -187,7 +188,7 @@
 
       const [register, { validate, resetFields, setFieldsValue, getFieldsValue, updateSchema }] =
         useForm({
-          labelWidth: 120,
+          labelWidth: 140,
           schemas: step1Schemas,
           actionColOptions: {
             span: 14,
@@ -385,11 +386,26 @@
         positionState.latitude = deviceInfo.latitude;
         positionState.address = deviceInfo.address;
         devicePic.value = deviceInfo.avatar;
-        setFieldsValue(data);
+        setFieldsValue({
+          ...data,
+          code: data?.code,
+          addressCode: parseInt(data?.code || '', 16),
+        });
       }
       // 父组件调用获取字段值的方法
       function parentGetFieldsValue() {
-        return getFieldsValue();
+        const value = getFieldsValue();
+        return {
+          ...value,
+          ...(value?.code || value?.addressCode
+            ? {
+                code:
+                  value?.codeType === TaskTypeEnum.CUSTOM
+                    ? value?.code
+                    : (value?.addressCode || '').toString(16).padStart(2, '0').toUpperCase(),
+              }
+            : {}),
+        };
       }
 
       // 父组件调用表单验证

 <script lang="ts" setup>
-  import { nextTick, onMounted, onUnmounted, reactive, ref, unref } from 'vue';
-  import { List, Card, Tooltip, Space } from 'ant-design-vue';
+  import { nextTick, onMounted, onUnmounted, reactive, ref, unref, computed } from 'vue';
+  import { List, Card, Tooltip, Space, PaginationProps } from 'ant-design-vue';
   import { PageWrapper } from '/@/components/Page';
   import { BasicTable, useTable } from '/@/components/Table';
   import { realTimeDataColumns } from '../../config/detail.config';
@@ -14,7 +14,6 @@
   import { BasicModal, useModal } from '/@/components/Modal';
   import { getDeviceAttrs } from '/@/api/device/deviceManager';
   import { DeviceModelOfMatterAttrs, DeviceRecord } from '/@/api/device/model/deviceModel';
-  import { computed } from '@vue/reactivity';
   import { Specs, StructJSON } from '/@/api/device/model/modelOfMatterModel';
   import { isArray, isObject } from '/@/utils/is';
   import { DataTypeEnum } from '/@/components/Form/src/externalCompns/components/StructForm/config';
@@ -50,11 +49,24 @@
   const grid = {
     gutter: 8,
     column: 3,
-  };
+  } as any;
 
+  const listElRef = ref<Nullable<ComponentElRef<HTMLDivElement>>>(null);
   const token = getAuthCache(JWT_TOKEN_KEY);
   const { socketUrl } = useGlobSetting();
+
+  const pagination = reactive<PaginationProps>({
+    size: 'small',
+    showSizeChanger: true,
+    showQuickJumper: true,
+    hideOnSinglePage: false,
+    showTotal: (total: number) => `共${total}条数据`,
+    onChange: handleChange,
+    onShowSizeChange: handleChange,
+  });
+
   const socketInfo = reactive({
+    cmdId: 0,
     origin: `${socketUrl}${token}`,
     attr: undefined as string | undefined,
     originData: [] as DataSource[],
@@ -63,6 +75,22 @@
     attrKeys: [] as DeviceModelOfMatterAttrs[],
   });
 
+  const getPaginationAttrkey = computed<DeviceModelOfMatterAttrs[]>(() => {
+    const { current = 1, pageSize = 10 } = pagination;
+    return socketInfo.attrKeys.slice(current * pageSize - pageSize, current * pageSize);
+  });
+
+  function createUnsubscribeMessage(cmdId: number) {
+    return {
+      tsSubCmds: [
+        {
+          cmdId,
+          unsubscribe: true,
+        },
+      ],
+    };
+  }
+
   const getSendValue = computed(() => {
     return {
       tsSubCmds: [
@@ -70,8 +98,10 @@
           entityType: 'DEVICE',
           entityId: props.deviceDetail!.tbDeviceId,
           scope: 'LATEST_TELEMETRY',
-          cmdId: 1,
-          keys: socketInfo.attrKeys.map((item) => item.identifier).join(','),
+          cmdId: socketInfo.cmdId,
+          keys: unref(getPaginationAttrkey)
+            .map((item) => item.identifier)
+            .join(','),
         },
       ],
     };
@@ -116,10 +146,19 @@
   const [registerTable, { setTableData }] = useTable({
     columns: realTimeDataColumns,
     showTableSetting: true,
+    pagination: pagination as any,
     bordered: true,
     showIndexColumn: false,
   });
 
+  function handleChange(page: number, pageSize: number) {
+    pagination.current = page;
+    pagination.pageSize = pageSize;
+    send(JSON.stringify(createUnsubscribeMessage(socketInfo.cmdId)));
+    socketInfo.cmdId = socketInfo.cmdId + 1;
+    send(JSON.stringify(unref(getSendValue)));
+  }
+
   const [registerModal, { openModal }] = useModal();
 
   const mode = ref<EnumTableCardMode>(EnumTableCardMode.CARD);
@@ -127,7 +166,7 @@
   const switchMode = async (value: EnumTableCardMode) => {
     mode.value = value;
     await nextTick();
-    setTableData(socketInfo.dataSource);
+    setTableData(socketInfo.originData);
   };
 
   const { createMessage } = useMessage();
@@ -238,17 +277,28 @@
   const handleSendCommandModal = (data: DataSource) => {
     openSendCommandModal(true, {
       mode: DataActionModeEnum.READ,
-      record: { ...toRaw(data.detail) },
+      record: { ...toRaw(data.detail), deviceDetail: props.deviceDetail as any },
     } as ModalParamsType);
   };
 
+  onMounted(() => {
+    const element = unref(listElRef)?.$el;
+    if (!element) return;
+    const totalHeight = document.documentElement.clientHeight;
+    const { top } = element?.getBoundingClientRect() || {};
+    const containerEl = element.querySelector('.ant-spin-container') as HTMLDivElement;
+    containerEl.style.height = `${totalHeight - top - 20 - 50}px`;
+    containerEl.style.overflowY = 'auto';
+    containerEl.style.overflowX = 'hidden';
+  });
+
   onUnmounted(() => close());
 </script>
 
 <template>
   <PageWrapper
     dense
-    content-class="flex flex-col bg-transparent p-4 bg-neutral-100 dark:text-gray-300 dark:bg-dark-700"
+    content-class="flex flex-col p-4 dark:text-gray-300 dark:bg-dark-700 bg-gray-100"
   >
     <section
       class="flex flex-col justify-between w-full bg-light-50 pt-3 mb-4 dark:text-gray-300 dark:bg-dark-900"
@@ -265,10 +315,12 @@
         <ModeSwitchButton v-model:value="mode" @change="switchMode" />
       </div>
       <List
-        v-if="mode === EnumTableCardMode.CARD"
+        v-show="mode === EnumTableCardMode.CARD"
+        ref="listElRef"
         class="list-mode !px-2"
-        :data-source="socketInfo.dataSource"
+        :data-source="socketInfo.originData"
         :grid="grid"
+        :pagination="pagination"
       >
         <template #renderItem="{ item }">
           <List.Item>
@@ -279,11 +331,6 @@
               <template #extra>
                 <Space>
                   <Tooltip title="属性下发">
-                    <!-- <MacCommandOutlined
-                      v-if="ReadAndWriteEnum.READ_AND_WRITE === item.accessMode"
-                      class="cursor-pointer text-lg svg:fill-blue-500"
-                      @click="handleSendCommandModal(item)"
-                    /> -->
                     <SvgIcon
                       name="send-command"
                       prefix="iconfont"

+import { FormSchema } from '/@/components/Form';
+
+const InsertString = (t, c, n) => {
+  const r: string | number[] = [];
+
+  for (let i = 0; i * 2 < t.length; i++) {
+    r.push(t.substr(i * 2, n));
+  }
+  return r.join(c);
+};
+const FillString = (t, c, n, b) => {
+  if (t == '' || c.length != 1 || n <= t.length) {
+    return t;
+  }
+  const l = t.length;
+
+  for (let i = 0; i < n - l; i++) {
+    if (b == true) {
+      t = c + t;
+    } else {
+      t += c;
+    }
+  }
+  return t;
+};
+const SingleToHex = (t) => {
+  if (t == '') {
+    return '';
+  }
+  t = parseFloat(t);
+
+  if (isNaN(t) == true) {
+    return 'Error';
+  }
+  if (t == 0) {
+    return '00000000';
+  }
+  let s, e, m;
+
+  if (t > 0) {
+    s = 0;
+  } else {
+    s = 1;
+
+    t = 0 - t;
+  }
+  m = t.toString(2);
+
+  if (m >= 1) {
+    if (m.indexOf('.') == -1) {
+      m = m + '.0';
+    }
+    e = m.indexOf('.') - 1;
+  } else {
+    e = 1 - m.indexOf('1');
+  }
+  if (e >= 0) {
+    m = m.replace('.', '');
+  } else {
+    m = m.substring(m.indexOf('1'));
+  }
+  if (m.length > 24) {
+    m = m.substr(0, 24);
+  } else {
+    m = FillString(m, '0', 24, false);
+  }
+  m = m.substring(1);
+
+  e = (e + 127).toString(2);
+
+  e = FillString(e, '0', 8, true);
+
+  let r = parseInt(s + e + m, 2).toString(16);
+
+  r = FillString(r, '0', 8, true);
+
+  return InsertString(r, ' ', 2).toUpperCase();
+};
+
+const FormatHex = (t, n, ie) => {
+  const r: string[] = [];
+
+  let s = '';
+
+  let c = 0;
+
+  for (let i = 0; i < t.length; i++) {
+    if (t.charAt(i) != ' ') {
+      s += t.charAt(i);
+
+      c += 1;
+
+      if (c == n) {
+        r.push(s);
+
+        s = '';
+
+        c = 0;
+      }
+    }
+    if (ie == false) {
+      if (i == t.length - 1 && s != '') {
+        r.push(s);
+      }
+    }
+  }
+  return r.join('\n');
+};
+const FormatHexBatch = (t, n, ie) => {
+  const a = t.split('\n');
+
+  const r: string[] = [];
+
+  for (let i = 0; i < a.length; i++) {
+    r[i] = FormatHex(a[i], n, ie);
+  }
+  return r.join('\n');
+};
+const SingleToHexBatch = (t) => {
+  const a = t.split('\n');
+
+  const r: string[] = [];
+
+  for (let i = 0; i < a.length; i++) {
+    r[i] = SingleToHex(a[i]);
+  }
+  return r.join('\r\n');
+};
+
+const formSchemasConfig = (schemas, actionType): FormSchema[] => {
+  const { identifier, functionName } = schemas;
+  if (actionType == '06') {
+    return [
+      {
+        field: identifier,
+        label: functionName,
+        component: 'InputNumber',
+        rules: [{ required: true, message: '请输入正数' }],
+        componentProps: {
+          min: 0,
+          formatter: (e) => {
+            const value = `${e}`.replace('-', '').replace(/^(-)*(\d+)\.(\d\d).*$/, '$1$2.$3');
+            return value;
+          },
+          placeholder: `请输入正数`,
+        },
+      },
+    ];
+  } else if (actionType == '05') {
+    return [
+      {
+        field: identifier,
+        label: functionName,
+        component: 'InputNumber',
+        rules: [{ required: true, message: '请输入值' }],
+        componentProps: {
+          min: 0,
+          max: 1,
+          precision: 0,
+          placeholder: `请输入0或1`,
+        },
+      },
+    ];
+  } else {
+    return [
+      {
+        field: identifier,
+        label: functionName,
+        component: 'InputNumber',
+        rules: [{ required: true, message: '请输入值' }],
+        componentProps: {
+          placeholder: `请输入数字`,
+          formatter: (e) =>
+            `${e}`.replace(/\B(?=(\d{3})+(?!\d))/g, '').replace(/^(-)*(\d+)\.(\d\d).*$/, '$1$2.$3'),
+        },
+      },
+    ];
+  }
+};
+
+export {
+  InsertString,
+  FillString,
+  SingleToHex,
+  FormatHex,
+  FormatHexBatch,
+  SingleToHexBatch,
+  formSchemasConfig,
+};

@@ -10,11 +10,14 @@
   import { sendCommandOneway } from '/@/api/dataBoard';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { unref } from 'vue';
+  import { genModbusCommand } from '/@/api/task';
+  import { TaskTypeEnum } from '/@/views/task/center/config';
+  import { SingleToHex, formSchemasConfig } from './config';
 
   defineEmits(['register']);
   const props = defineProps<{ deviceId: string; deviceName: string }>();
 
-  const [registerForm, { setProps, getFieldsValue, resetFields }] = useForm({
+  const [registerForm, { setProps, getFieldsValue, resetFields, validate }] = useForm({
     schemas: [],
     showActionButtonGroup: false,
     layout: 'vertical',
@@ -24,11 +27,24 @@
 
   const keys = ref<string[]>([]);
 
-  const [register] = useModalInner((params: ModalParamsType<DeviceModelOfMatterAttrs>) => {
+  const modBUSForm = ref<any>({});
+  const isShowModBUS = ref<Boolean>(false); //用于判断标识符类型是否时自定义还是modBUS
+  const isShowActionType = ref<Boolean>(true); //判断设备属性标识符为modBus时没有填写扩展描述
+  const formField = ref(''); //存一个表单取值的field
+  const zoomFactorValue = ref<number>(1); //缩放因子
+  const isShowMultiply = ref<Boolean>(false); // 只有tcp --> int和double类型才相乘缩放因子
+
+  const [register] = useModalInner(async (params: ModalParamsType<DeviceModelOfMatterAttrs>) => {
     const { record } = params;
-    const { name, detail, identifier } = record;
+    const { name, detail, identifier, deviceDetail, extensionDesc } = record;
     const { dataType } = detail;
     const { type } = dataType || {};
+    const { codeType, deviceProfile, code } = deviceDetail || {};
+    const { transportType } = deviceProfile || {};
+    const { registerAddress, actionType, zoomFactor } = extensionDesc || {}; //获取扩展描述内容
+    formField.value = identifier;
+    zoomFactorValue.value = zoomFactor ? Number(zoomFactor) : 1;
+    isShowMultiply.value = type == 'INT' || type == 'DOUBLE' ? true : false;
 
     let schemas = [{ dataType: dataType, identifier, functionName: name } as StructJSON];
 
@@ -36,33 +52,130 @@
       schemas = dataType?.specs as StructJSON[];
     }
 
-    const formSchemas = genForm(schemas);
-
     keys.value = schemas.map((item) => {
       return item.identifier!;
     });
-    setProps({ schemas: formSchemas });
+    isShowActionType.value = actionType ? true : false; //判断modBUS类型时 物模型是否填写扩展描述
+
+    //是modBUS类型的就用另外的表单
+    //判断是否是TCP ==> modBus的下发命令
+    if (codeType == TaskTypeEnum.MODBUS_RTU && transportType == 'TCP') {
+      isShowModBUS.value = true;
+      modBUSForm.value = {
+        crc: 'CRC_16_LOWER',
+        deviceCode: code,
+        method: actionType == '16' ? '10' : actionType,
+        registerAddress,
+        registerNumber: 1,
+        registerValues: [],
+      };
+      setProps({ schemas: formSchemasConfig(schemas[0], actionType) });
+    } else {
+      isShowModBUS.value = false;
+      const formSchemas = genForm(schemas);
+      setProps({ schemas: formSchemas });
+    }
+
     resetFields();
   });
 
+  const getArray = (values) => {
+    const str = values.replace(/\s+/g, '');
+    const array: any = [];
+
+    for (let i = 0; i < str.length; i += 4) {
+      const chunk = parseInt(str.substring(i, i + 4), 16);
+      array.push(chunk);
+    }
+    return array;
+  };
+
+  // 获取小数
+  const getFloatPart = (number: string | number) => {
+    const isLessZero = Number(number) < 0;
+    number = number.toString();
+    const floatPartStartIndex = number.indexOf('.');
+    const value = ~floatPartStartIndex
+      ? `${isLessZero ? '-' : ''}0.${number.substring(floatPartStartIndex + 1)}`
+      : '0';
+    return Number(value);
+  };
+
   const { createMessage } = useMessage();
   const loading = ref(false);
   const handleSend = async () => {
     try {
       loading.value = true;
       if (!props.deviceId) return;
-      const _value = getFieldsValue();
-      const value = unref(keys).reduce((prev, next) => {
-        return { ...prev, [next]: _value[next] };
-      }, {});
+
+      const sendValue = ref({});
+      //判断tcp类型 标识符是自定义还是ModBus
+      if (unref(isShowModBUS)) {
+        if (!unref(isShowActionType)) {
+          createMessage.warning('当前物模型扩展描述没有填写');
+          return;
+        }
+        const flag = await validate();
+        if (!flag) return;
+
+        const oldValue = getFieldsValue()[unref(formField)];
+        modBUSForm.value.registerNumber = 1;
+        modBUSForm.value.registerValues = [oldValue];
+
+        if (unref(isShowMultiply) && unref(modBUSForm).method == '06') {
+          const newValue =
+            Math.trunc(oldValue) * unref(zoomFactorValue) +
+            getFloatPart(oldValue) * unref(zoomFactorValue);
+          if (newValue % 1 != 0) {
+            createMessage.warning(`属性下发类型必须是整数,缩放因子为${unref(zoomFactorValue)}`);
+            return;
+          }
+
+          if (oldValue * unref(zoomFactorValue) > 65535) {
+            createMessage.warning(`属性下发值不能超过65535,缩放因子是${unref(zoomFactorValue)}`);
+            return;
+          }
+          //bool类型的就不用去乘缩放因子了
+          modBUSForm.value.registerValues = [newValue];
+        }
+
+        if (unref(modBUSForm).method == '16' || unref(modBUSForm).method == '10') {
+          const regex = /^-?\d+(\.\d{0,2})?$/;
+          const values =
+            Math.trunc(oldValue) * unref(zoomFactorValue) +
+            getFloatPart(oldValue) * unref(zoomFactorValue);
+
+          if (!regex.test(values as any)) {
+            createMessage.warning(`属性下发值精确到两位小数,缩放因子是${unref(zoomFactorValue)}`);
+            return;
+          }
+
+          const newValue =
+            values == 0 ? [0, 0] : getArray(SingleToHex(unref(isShowMultiply) ? values : oldValue));
+          modBUSForm.value.registerValues = newValue;
+          modBUSForm.value.registerNumber = 2;
+          modBUSForm.value.method = '10';
+        }
+
+        sendValue.value = await genModbusCommand(unref(modBUSForm));
+      } else {
+        const _value = getFieldsValue();
+
+        sendValue.value = unref(keys).reduce((prev, next) => {
+          return { ...prev, [next]: _value[next] };
+        }, {});
+      }
+
       await sendCommandOneway({
         deviceId: props.deviceId,
         value: {
           persistent: true,
           method: 'methodThingskit',
-          params: {
-            ...value,
-          },
+          params: unref(isShowModBUS)
+            ? unref(sendValue)
+            : {
+                ...unref(sendValue),
+              },
         },
       });
       createMessage.success('属性下发成功~');

@@ -20,7 +20,6 @@ export const useGenDynamicForm = () => {
     const { specs, type } = dataType;
     const { valueRange, step } = specs! as Partial<Specs>;
     const { max, min } = valueRange || {};
-    console.log({ max, min });
     return {
       field: identifier,
       label: functionName,

@@ -84,10 +84,10 @@
     });
   };
   const handleRecordContent = (record) => {
-    if (!record?.request?.body?.params) return;
-    //如果是正常格式则返回params，否则输入什么内容则显示什么内容
-    const jsonParams = JSON.parse(record?.request?.body?.params);
-    commonModalInfo('命令下发内容', jsonParams?.params ? jsonParams?.params : jsonParams);
+    if (!record?.request?.body) return;
+    if (Object.prototype.toString.call(record?.request?.body) !== '[object Object]') return;
+    const jsonParams = record?.request?.body?.params;
+    commonModalInfo('命令下发内容', jsonParams);
   };
   const handleRecordResponseContent = (record) => {
     const jsonParams = record?.response;

@@ -182,7 +182,7 @@
   </div>
 </template>
 <script lang="ts">
-  import { defineComponent, reactive, unref, h, onMounted } from 'vue';
+  import { defineComponent, reactive, unref, onMounted } from 'vue';
   import {
     DeviceModel,
     DeviceRecord,
@@ -195,7 +195,6 @@
   import {
     deleteDevice,
     devicePage,
-    checkDeviceOccupied,
     cancelDispatchCustomer,
     getGATEWAY,
     privateDevice,
@@ -331,15 +330,8 @@
       async function handleCancelDispatchCustomer(record: Recordable) {
         try {
           // 该设备是否正在被场景联动使用中？
-          const isEnabled = await checkDeviceOccupied(record.id);
-          if (!isEnabled.data) {
-            const props = { style: { maxWidth: '600' + 'px' } };
-            const small = h('small', '');
-            createMessage.warn(h('h2', props, [`${isEnabled.message}`, small]));
-          } else {
-            await cancelDispatchCustomer(record);
-            handleReload();
-          }
+          await cancelDispatchCustomer(record);
+          handleReload();
         } catch {}
       }
 
@@ -369,7 +361,7 @@
         handleSuccess();
       }
       function goDeviceProfile(e) {
-        go(PageEnum.DEVICE_PROFILE + '?name=' + String(e));
+        go(PageEnum.DEVICE_PROFILE + '?name=' + encodeURIComponent(String(e)));
       }
       const { copied, copy } = useClipboard({ legacy: true });
       const copySN = async (snCode: string) => {

 <script lang="ts" setup>
   import { PageWrapper } from '/@/components/Page';
   import { BasicForm, useForm } from '/@/components/Form';
-  import { List, Button, Tooltip, Card, PaginationProps, Image } from 'ant-design-vue';
+  import { List, Button, Tooltip, Card, PaginationProps, Image, Popconfirm } from 'ant-design-vue';
   import { ReloadOutlined } from '@ant-design/icons-vue';
   import { computed, onMounted, reactive, ref, unref } from 'vue';
   import {
@@ -175,6 +175,9 @@
 
   const { query: routeParams } = useRoute();
   onMounted(() => {
+    routeParams.name = decodeURIComponent(
+      ((routeParams as unknown as Recordable) || {})?.name || ''
+    );
     getDataSource(routeParams);
   });
 </script>
@@ -204,14 +207,16 @@
               {{ getSelectAllFlag ? '反选' : '全选' }}
             </Button>
             <Authority :value="ProductPermission.DELETE">
-              <Button
-                type="primary"
-                danger
-                :disabled="!getCheckedRecord.length"
-                @click="handleDelete(getCheckedRecord)"
+              <Popconfirm
+                title="您确定要批量删除数据"
+                ok-text="确定"
+                cancel-text="取消"
+                @confirm="handleDelete(getCheckedRecord)"
               >
-                批量删除
-              </Button>
+                <Button type="primary" danger :disabled="!getCheckedRecord.length">
+                  批量删除
+                </Button>
+              </Popconfirm>
             </Authority>
 
             <ModeSwitchButton :value="$props.mode" @change="handleModeChange" />

@@ -13,7 +13,7 @@
           ? { minHeight: 55 + 'vh' }
           : isMqttType == 'SNMP'
           ? { minHeight: 60 + 'vh' }
-          : isMqttType == 'TCP'
+          : isMqttType == 'TCP/UDP'
           ? { minHeight: 15 + 'vh' }
           : { minHeight: 25 + 'vh' },
       ]"
@@ -117,7 +117,7 @@
             { label: 'CoAP', value: 'COAP' },
             // { label: 'LWM2M', value: 'LWM2M' },
             // { label: 'SNMP', value: 'SNMP' },
-            { label: 'TCP', value: 'TCP' },
+            { label: 'TCP/UDP', value: 'TCP' },
           ],
           onChange(e) {
             isMqttType.value = e;
@@ -159,7 +159,7 @@
           { label: 'CoAP', value: 'COAP' },
           // { label: 'LWM2M', value: 'LWM2M' },
           // { label: 'SNMP', value: 'SNMP' },
-          { label: 'TCP', value: 'TCP' },
+          { label: 'TCP/UDP', value: 'TCP' },
         ],
         onChange(e) {
           isMqttType.value = e;

@@ -30,6 +30,7 @@
         <Attribute
           v-if="activeKey === FunctionType.PROPERTIES"
           :openModalMode="openModalMode"
+          :transportType="record.transportType"
           ref="AttrRef"
         />
         <Service
@@ -77,8 +78,7 @@
     return deviceType === DeviceTypeEnum.SENSOR && transportType === 'TCP';
   });
 
-  const blockContent = `属性一般是设备的运行状态，如当前温度等；服务是设备可被调用的方法，支持定义参数，如执行某项任务；事件则是设备上报的
-通知，如告警，需要被及时处理。`;
+  const blockContent = `属性一般是指设备的运行状态，如当前温度等；服务是指设备可被调用的方法，支持定义参数，如执行某项任务；事件则是指设备上报的通知，如告警，需要被及时处理。`;
   const activeKey = ref<FunctionType>(FunctionType.PROPERTIES);
   const size = ref('small');
 

@@ -13,12 +13,13 @@
   import { isArray } from 'lodash';
   import { OpenModelMode } from '../types';
   import { formSchemas } from '/@/components/Form/src/externalCompns/components/StructForm/config';
+  import { TransportTypeEnum } from '../../../../components/TransportDescript/const';
 
-  defineProps<{ openModalMode: OpenModelMode }>();
+  const props = defineProps<{ openModalMode: OpenModelMode; transportType: string }>();
 
   const [register, { validate, resetFields, setFieldsValue, setProps }] = useForm({
     labelWidth: 100,
-    schemas: formSchemas(false),
+    schemas: formSchemas(false, props.transportType === TransportTypeEnum.TCP),
     actionColOptions: {
       span: 14,
     },
@@ -37,13 +38,13 @@
     const { functionName, remark, identifier, accessMode } = _values;
     const structJSON = transfromToStructJSON(_values);
     const dataType = excludeIdInStructJSON(structJSON.dataType!);
-
     const value = {
       functionName,
       functionType: FunctionType.PROPERTIES,
       remark,
       identifier,
       accessMode,
+      extensionDesc: _values.extensionDesc,
       functionJson: {
         dataType: dataType,
       },
@@ -67,7 +68,6 @@
       ...dataType,
       ...(isArray(specs) ? specs : { ...specs }),
     };
-
     setFieldsValue(value);
   };
 

@@ -89,7 +89,9 @@
       functionJson: {
         inputData,
         outputData,
-        ...(serviceCommand ? { inputData: [{ serviceCommand }] } : {}),
+        ...(serviceCommand
+          ? { inputData: [{ serviceCommand: serviceCommand.replaceAll(/\s/g, '').toUpperCase() }] }
+          : {}),
       },
     } as ModelOfMatterParams;
 

@@ -24,7 +24,8 @@ export enum FormField {
   EVENT_TYPE = 'eventType',
   SERVICE_COMMAND = 'serviceCommand',
   ACCESS_MODE = 'accessMode',
-
+  REGISTER_ADDRESS = 'registerAddress',
+  EXTENSION_DESC = 'extensionDesc',
   STRUCT = 'struct',
 }
 
@@ -116,7 +117,18 @@ export const serviceSchemas = (tcpDeviceFlag: boolean): FormSchema[] => {
       field: FormField.SERVICE_COMMAND,
       label: '输入参数',
       component: 'Input',
-      rules: [{ message: '输入参数为必填项', required: true }],
+      rules: [
+        { message: '输入参数为必填项', required: true },
+        {
+          message: '请输入ASCII或HEX服务命令(0~9/A~F)',
+          validator(_rule, value, _callback) {
+            const reg = /^[\s0-9a-fA-F]+$/;
+
+            if (reg.test(value)) return Promise.resolve();
+            return Promise.reject('请输入ASCII或HEX服务命令(0~9/A~F)');
+          },
+        },
+      ],
       ifShow: tcpDeviceFlag,
       componentProps: {
         placeholder: '请输入ASCII或HEX服务命令',

@@ -49,7 +49,7 @@ export const useHooks = () => {
       const item = ref<TSelectOption>();
       if (items?.identifier !== null) {
         item.value = {
-          label: items?.identifier,
+          label: items?.name,
           value: items?.identifier,
         };
         return item.value;

@@ -42,7 +42,7 @@ export const modeApiForm: FormSchema[] = [
     required: true,
     component: 'Input',
     componentProps: {
-      maxLength: 255,
+      maxLength: 32,
       placeholder: '请输入名称',
     },
   },

@@ -45,7 +45,7 @@ export const modelKafkaForm: FormSchema[] = [
     required: true,
     component: 'Input',
     componentProps: {
-      maxLength: 255,
+      maxLength: 32,
       placeholder: '请输入名称',
     },
   },
@@ -152,12 +152,14 @@ export const modelKafkaForm: FormSchema[] = [
     field: 'otherProperties',
     label: '其他属性',
     colProps: { span: 24 },
+    defaultValue: {},
     component: 'JAddInput',
   },
   {
     field: 'addMetadataKeyValuesAsKafkaHeaders',
     label: '是否启用',
     colProps: { span: 12 },
+    defaultValue: false,
     component: 'Checkbox',
     renderComponentContent: '将消息的元数据以键值对的方式添加到Kafka消息头中',
   },

@@ -32,9 +32,9 @@
   import { modelFormPublicConfig } from '../../../dataflowmodal/config';
 
   const credentialsFile = reactive({
-    caCertFileName: '',
-    certFileName: '',
-    privateKeyFileName: '',
+    caCertFileName: undefined,
+    certFileName: undefined,
+    privateKeyFileName: undefined,
   });
 
   const [register, { validateFields, setFieldsValue, resetFields }] = useForm({

@@ -31,7 +31,7 @@ export const modeMqttForm: FormSchema[] = [
     component: 'Input',
     required: true,
     componentProps: {
-      maxLength: 255,
+      maxLength: 32,
       placeholder: '请输入名称',
     },
   },
@@ -52,6 +52,7 @@ export const modeMqttForm: FormSchema[] = [
     label: '主机',
     colProps: { span: 12 },
     component: 'Input',
+    required: true,
     componentProps: {
       maxLength: 255,
       placeholder: '请输入Host',

@@ -12,6 +12,7 @@ class RabbitMqFormPartialConfig {
   static password = 'guest'; //密码
   static connectionTimeout = 60000; //连接超时（毫秒）
   static handshakeTimeout = 10000; //握手超时（毫秒）
+  static automaticRecoveryEnabled = false;
 
   //anonymous Select options配置
   static getMessageProperties() {
@@ -34,7 +35,7 @@ export const modeRabbitMqForm: FormSchema[] = [
     required: true,
     component: 'Input',
     componentProps: {
-      maxLength: 255,
+      maxLength: 32,
       placeholder: '请输入名称',
     },
   },
@@ -43,6 +44,7 @@ export const modeRabbitMqForm: FormSchema[] = [
     label: '交换名称模式',
     colProps: { span: 12 },
     component: 'Input',
+    defaultValue: '',
     componentProps: {
       maxLength: 255,
       placeholder: '请输入模式',
@@ -52,6 +54,7 @@ export const modeRabbitMqForm: FormSchema[] = [
     field: 'routingKeyPattern',
     label: '路由密钥模式',
     colProps: { span: 12 },
+    defaultValue: '',
     component: 'Input',
     componentProps: {
       maxLength: 255,
@@ -63,6 +66,7 @@ export const modeRabbitMqForm: FormSchema[] = [
     component: 'Select',
     label: '消息属性',
     colProps: { span: 12 },
+    defaultValue: null,
     componentProps: {
       placeholder: '请选择消息属性',
       options: RabbitMqFormPartialConfig.getMessageProperties(),
@@ -129,6 +133,7 @@ export const modeRabbitMqForm: FormSchema[] = [
     field: 'automaticRecoveryEnabled',
     label: '是否启用',
     colProps: { span: 12 },
+    defaultValue: RabbitMqFormPartialConfig.automaticRecoveryEnabled,
     component: 'Checkbox',
     renderComponentContent: '自动恢复',
   },
@@ -159,6 +164,7 @@ export const modeRabbitMqForm: FormSchema[] = [
     label: '客户端属性',
     colProps: { span: 24 },
     component: 'JAddInput',
+    defaultValue: {},
   },
   {
     field: 'description',

@@ -82,6 +82,14 @@
     setValue(record);
   });
 
+  // 判断转换方式
+  const isRabbitmq = (type) => {
+    return type == 'org.thingsboard.rule.engine.rabbitmq.TbRabbitMqNode';
+  };
+  const isKafka = (type) => {
+    return type == 'org.thingsboard.rule.engine.kafka.TbKafkaNode';
+  };
+
   const handleSubmit = async (closeModalAfterSuccess = true) => {
     try {
       if (closeModalAfterSuccess) {
@@ -98,7 +106,30 @@
           getDataFlowParams?.clientProperties
         );
         const data = getValue(description, name, getDataFlowMethod, getDataFlowParams);
-        const rest = await postAddConvertApi({ ...restData.data, ...data });
+        const configuration = {
+          ...getDataFlowParams,
+          clientId: !isKafka(getDataFlowMethod?.type)
+            ? getDataFlowParams.clientId
+              ? getDataFlowParams.clientId
+              : null
+            : undefined,
+          kafkaHeadersCharset: isKafka(getDataFlowMethod?.type)
+            ? getDataFlowParams?.kafkaHeadersCharset
+              ? getDataFlowParams?.kafkaHeadersCharset
+              : 'UTF-8'
+            : undefined,
+          credentials: !isKafka(getDataFlowMethod?.type)
+            ? {
+                ...getDataFlowParams.credentials,
+                type: getDataFlowParams.type,
+                username: getDataFlowParams.username ? getDataFlowParams.username : undefined,
+                password: getDataFlowParams.password ? getDataFlowParams.password : undefined,
+              }
+            : undefined,
+        };
+        const rest = isRabbitmq(getDataFlowMethod?.type)
+          ? await postAddConvertApi({ ...restData.data, ...data })
+          : await postAddConvertApi({ ...restData.data, ...data, configuration });
         if (rest) {
           closeModalAfterSuccess && createMessage.success(`${businessText.value}成功`);
           closeModalAfterSuccess && closeModal();
@@ -120,7 +151,7 @@
       ...record,
       ...record?.configuration,
       name: record?.name,
-      description: record?.additionalInfo?.description,
+      description: record?.configuration.description || record?.additionalInfo?.description,
     });
   };
 
@@ -147,10 +178,11 @@
   };
 
   //上一步
-  const handlePrevDataFlowMethod = (value) => {
-    currentStep.value = value;
+  const handlePrevDataFlowMethod = (oldData: { currentStep: number; values: Object }) => {
+    currentStep.value = oldData.currentStep;
     setModalProps({ showOkBtn: false });
     if (hasEditOrView(businessText.value)) {
+      restData.data = { ...restData.data, configuration: oldData.values };
       setValue(restData.data);
     }
   };

@@ -52,8 +52,9 @@
 
   const dataFlowMethodIsRabbitMqRef = ref<InstanceType<typeof DataFlowMethodIsRabbitMq>>();
 
-  const currentDataFlowParamsHanlePrevStep = () => {
-    emit('currentDataFlowParamsEmitPrevStep', 0);
+  const currentDataFlowParamsHanlePrevStep = async () => {
+    const values = await getValue();
+    emit('currentDataFlowParamsEmitPrevStep', { currentStep: 0, values });
   };
 
   //表单配置项（kafka、mqtt、rabbitmq、restapi）

@@ -31,6 +31,7 @@ export type TOption = {
 export enum CommandTypeEnum {
   CUSTOM = 0,
   SERVICE = 1,
+  ATTRIBUTE = 2,
 }
 
 /**
@@ -264,6 +265,13 @@ export const trigger_condition_schema: FormSchema[] = [
             useByProductGetAttribute(res, updateSchema, options);
           }
         },
+        filterOption: (inputValue: string, option: Record<'label' | 'value', string>) => {
+          let { label, value } = option;
+          label = label.toLowerCase();
+          value = value.toLowerCase();
+          inputValue = inputValue.toLowerCase();
+          return label.includes(inputValue) || value.includes(inputValue);
+        },
       };
     },
   },
@@ -308,6 +316,13 @@ export const trigger_condition_schema: FormSchema[] = [
         },
         placeholder: '请选择设备',
         getPopupContainer: () => document.body,
+        filterOption: (inputValue: string, option: Record<'label' | 'value', string>) => {
+          let { label, value } = option;
+          label = label.toLowerCase();
+          value = value.toLowerCase();
+          inputValue = inputValue.toLowerCase();
+          return label.includes(inputValue) || value.includes(inputValue);
+        },
       };
     },
     ifShow: ({ values }) => isPart(values.device),

@@ -103,6 +103,7 @@
     beforeFetch: (params: Recordable) => {
       return { ...unref(getSearchInfo), ...params };
     },
+    resizeHeightOffset: 30,
     actionColumn: {
       width: 180,
       title: '操作',

@@ -107,7 +107,6 @@
           v-else
           v-model:value="scriptForm.output"
           placeholder="输出参数为服务端返回的内容"
-          :maxlength="255"
         />
       </a-form-item>
     </a-form>

@@ -48,6 +48,11 @@ export const aceEditorOptions = {
   enableEmmet: true,
 };
 
+const scriptTypeInfo = {
+  TRANSPORT_TCP_UP: '上行数据解析',
+  TRANSPORT_TCP_AUTH: '设备鉴权',
+};
+
 // 表格配置
 export const columns: BasicColumn[] = [
   {
@@ -68,6 +73,14 @@ export const columns: BasicColumn[] = [
     slots: { customRender: 'convertJs' },
   },
   {
+    title: '脚本类型',
+    dataIndex: 'scriptType',
+    width: 120,
+    format: (values) => {
+      return scriptTypeInfo[values];
+    },
+  },
+  {
     title: '备注',
     dataIndex: 'description',
     width: 120,

@@ -122,6 +122,7 @@
   const [registerTable, { reload, setProps, setSelectedRowKeys }] = useTable({
     api: ScriptPage,
     ...defaultTableAttribtes,
+    resizeHeightOffset: 30,
     beforeFetch: (params: Recordable) => {
       return { ...unref(props.searchInfo), ...params };
     },

@@ -67,7 +67,6 @@
   import { useI18n } from '/@/hooks/web/useI18n';
   import { useDesign } from '/@/hooks/web/useDesign';
   import { useLocaleStore } from '/@/store/modules/locale';
-  import { useTitle } from '@vueuse/core';
   import defaultBackgroundImage from '/@/assets/svg/thingskit-login-background.svg';
   import { getPlatFormInfo } from '../../system/customize/hook/usePlatformInfo';
 
@@ -85,10 +84,6 @@
   const localeStore = useLocaleStore();
   const showLocale = localeStore.getShowPicker;
 
-  onMounted(() => {
-    useTitle('ThingsKit 物联网平台');
-  });
-
   const show = ref(false);
 
   onMounted(() => {

@@ -82,10 +82,15 @@ export const usePlatform = async () => {
     document.head.appendChild(styleEl);
   };
 
+  const setTitle = () => {
+    document.title = platformInfo.name || '';
+  };
+
   const bootstrap = () => {
     replaceSiteIco();
     replaceLoadingEffect();
     setBackgroundImage();
+    setTitle();
   };
 
   bootstrap();

@@ -138,7 +138,7 @@ export const formSchema: FormSchema[] = [
     component: 'Input',
     required: true,
     componentProps: {
-      maxLength: 255,
+      maxLength: 100,
     },
   },
 

@@ -67,6 +67,10 @@ export const searchSchedueFormSchema: FormSchema[] = [
           label: '报表',
           value: EJobGroup.REPORT,
         },
+        {
+          label: '任务中心',
+          value: EJobGroup.TASK_CENTER,
+        },
       ],
       placeholder: '请选择任务组名',
     },

@@ -5,9 +5,9 @@
         <Authority value="api:yt:schedule:post">
           <a-button type="primary" @click="handleCreateOrEdit(null)"> 新增 </a-button>
         </Authority>
-        <Authority value="api:yt:schedule:get">
+        <!-- <Authority value="api:yt:schedule:get">
           <a-button type="primary"> 导出 </a-button>
-        </Authority>
+        </Authority> -->
         <Authority value="api:yt:schedule:delete">
           <Popconfirm
             title="您确定要批量删除数据"

@@ -3,7 +3,7 @@
   import { ComponentType, ColEx } from '/@/components/Form/src/types/index';
   import { computed } from '@vue/reactivity';
   import { isFunction } from '/@/utils/is';
-  import { unref } from 'vue';
+  import { toRaw, unref } from 'vue';
   import { watch } from 'vue';
   import { nextTick } from 'vue';
   import { ref } from 'vue';
@@ -48,17 +48,13 @@
     }
   );
 
-  const getProps = computed(() => {
-    return props;
-  });
-
   const batchSetValue = (value: any): ValueItemType[] => {
-    const { length } = unref(getProps);
+    const { length } = props;
     return Array.from({ length }, () => ({ value }));
   };
 
   const getTotalControlItem = computed(() => {
-    const { totalControlProps, component, showTotalControl } = unref(getProps);
+    const { totalControlProps, component, showTotalControl } = props;
     return {
       ...totalControlProps,
       field: FormFieldsEnum.TOTAL_CONTROL,
@@ -72,12 +68,13 @@
     } as FormSchema;
   });
 
-  const getSchemas = computed(() => {
-    const { itemProps, itemLabel, length, component } = unref(getProps);
+  const allDefaultValue = ref({});
+  const getSchemas = () => {
+    const { itemProps, itemLabel, length, component } = props;
     let label = isFunction(itemLabel) ? itemLabel : (index: number) => `#${index}`;
     let _itemProps = isFunction(itemProps) ? itemProps : () => ({});
     const schemas = Array.from(
-      { length },
+      { length: props.length },
       (_item, index) =>
         ({
           ..._itemProps(index),
@@ -93,14 +90,17 @@
         } as FormSchema)
     );
 
-    length && schemas.unshift(unref(getTotalControlItem));
-
+    length && schemas.unshift(toRaw(getTotalControlItem.value));
+    allDefaultValue.value = unref(schemas).reduce(
+      (prev, next) => ({ ...prev, [next.field]: next.defaultValue }),
+      {}
+    );
     return schemas;
-  });
+  };
 
   const [registerForm, { getFieldsValue, setProps, setFieldsValue }] = useForm({
     showActionButtonGroup: false,
-    schemas: unref(getSchemas),
+    schemas: toRaw(unref(getSchemas())),
     // baseColProps,
     baseColProps: props.itemColProps,
   });
@@ -111,19 +111,18 @@
       return;
     }
     const allValue = getFieldsValue();
-    const sortKeyList = Array.from({ length: unref(getProps).length }, (_v, key) => key);
-    const res = sortKeyList.map((item) => ({ value: allValue[item] } as ValueItemType));
+    const sortKeyList = Array.from({ length: props.length }, (_v, key) => key);
+    const res = sortKeyList.map(
+      (item) => ({ value: allValue[item] ?? unref(allDefaultValue)[item] } as ValueItemType)
+    );
 
     emit(EmitEventEnum.UPDATE_VALUE, res);
   };
 
   const transformValue = (value: ValueItemType[]) => {
-    const { length } = unref(getProps);
+    const { length } = props;
     if (value.length !== length) {
-      value = Array.from(
-        { length: unref(getProps).length },
-        () => ({ value: null } as ValueItemType)
-      );
+      value = Array.from({ length: props.length }, () => ({ value: null } as ValueItemType));
     }
     return value.reduce((prev, next, index) => ({ ...prev, [index]: next.value }), {});
   };
@@ -153,13 +152,11 @@
 
   watch(
     () => [props.length, props.component],
-    (target) => {
-      if (target !== undefined || target !== null) {
-        setProps({
-          schemas: unref(getSchemas),
-        });
-        handleUpdateValue();
-      }
+    () => {
+      setProps({
+        schemas: toRaw(unref(getSchemas())),
+      });
+      handleUpdateValue();
     }
   );
 

@@ -29,7 +29,6 @@
       const record = composeModbusModalData(value as ModbusCommandValueType);
       loading.value = true;
       const result = await genModbusCommand(record);
-      console.log(result);
       commandValue.value = result;
     } catch (error) {
     } finally {

 <script lang="ts" setup>
-  import { InputGroup, InputNumber, Select, Input } from 'ant-design-vue';
-  import { unref } from 'vue';
-  import { computed } from 'vue';
-  import { ref } from 'vue';
+  import { Select, InputGroup, Input } from 'ant-design-vue';
+  import { ref, unref, computed } from 'vue';
+  import { isNullOrUnDef } from '/@/utils/is';
 
   enum AddressTypeEnum {
     DEC = 'DEC',
@@ -11,78 +10,154 @@
 
   const emit = defineEmits(['update:value']);
 
-  const DEC_MAX_VALUE = parseInt('0xffff', 16);
-
-  withDefaults(
+  const props = withDefaults(
     defineProps<{
       value?: number | string;
-      inputProps?: Recordable;
+      disabled?: boolean;
+      maxValue?: number | string;
+      minValue?: number | string;
+      type?: string;
+      toUpperCase?: boolean;
+      disabledSwitch?: boolean;
     }>(),
     {
-      value: 0,
       inputProps: () => ({}),
+      type: 'DEC',
+      maxValue: parseInt('FFFF', 16),
+      minValue: 0,
+      toUpperCase: true,
     }
   );
 
+  const maxHexPadLength = computed(() => {
+    const { maxValue, type } = props;
+    if (type === AddressTypeEnum.DEC) {
+      return Number(maxValue).toString(16).length;
+    } else {
+      return maxValue.toString().length;
+    }
+  });
+
+  const inputType = ref(props.type);
+
+  const getInputValue = computed(() => {
+    const { type, toUpperCase } = props;
+    let { value } = props;
+    if (isNaN(value as number)) value = undefined;
+
+    if (isNullOrUnDef(value)) return value;
+
+    if (type === AddressTypeEnum.DEC) {
+      if (unref(inputType) === AddressTypeEnum.DEC) {
+        return Number(value);
+      } else {
+        const _value = Number(value).toString(16);
+        return toUpperCase ? _value.toUpperCase() : _value;
+      }
+    } else {
+      if (unref(inputType) === AddressTypeEnum.DEC) {
+        return parseInt(value, 16);
+      } else {
+        return toUpperCase ? value.toString().toUpperCase() : value;
+      }
+    }
+  });
+
+  const getValueOpposite = computed(() => {
+    if (isNullOrUnDef(unref(getInputValue))) {
+      if (unref(inputType) === AddressTypeEnum.DEC) {
+        return `0x${decToHex(props.minValue).padStart(unref(maxHexPadLength), '0').toUpperCase()}`;
+      } else {
+        return hexToDec(props.minValue);
+      }
+    }
+    if (unref(inputType) === AddressTypeEnum.DEC)
+      return `0x${decToHex(unref(getInputValue)!)
+        .toString()
+        .padStart(unref(maxHexPadLength), '0')
+        .toUpperCase()}`;
+    else return hexToDec(unref(getInputValue)!);
+  });
+
   const addressTypeOptions = [
     { label: AddressTypeEnum.DEC, value: AddressTypeEnum.DEC },
     { label: AddressTypeEnum.HEX, value: AddressTypeEnum.HEX },
   ];
 
-  const type = ref(AddressTypeEnum.DEC);
+  const getValueByInputType = (value: string | number) => {
+    let { type, toUpperCase, maxValue, minValue } = props;
 
-  const inputValue = ref<number | string>(0);
+    if (type === AddressTypeEnum.DEC) {
+      if (unref(inputType) === AddressTypeEnum.HEX) {
+        value = hexToDec(value);
+      }
+      value = Number(value);
+      maxValue = Number(maxValue);
+      minValue = Number(minValue);
+      value = value > maxValue ? maxValue : value;
+      value = value < minValue ? minValue : value;
+    } else {
+      if (unref(inputType) === AddressTypeEnum.DEC) {
+        value = decToHex(value);
+      }
 
-  const getHexValue = computed(() => {
-    return parseInt(unref(inputValue) || 0, 16);
-  });
+      const _maxValue = parseInt(maxValue, 16);
+      const _minValue = parseInt(minValue, 16);
 
-  const getDecValue = computed(() => {
-    let formatValue = Number(unref(inputValue) || 0).toString(16);
-    formatValue = `0x${formatValue.padStart(4, '0')}`;
-    return (inputValue.value as number) > DEC_MAX_VALUE ? '0x0000' : formatValue;
-  });
+      value = parseInt(value, 16) > _maxValue ? maxValue : value;
+      value = parseInt(value, 16) < _minValue ? minValue : value;
+
+      value = toUpperCase ? value.toString().toUpperCase() : value;
+    }
 
-  const toDEC = (value: number | string) => {
-    return unref(type) === AddressTypeEnum.DEC
-      ? isNaN(value as number)
-        ? 0
-        : Number(value)
-      : parseInt(value, 16);
+    return value;
   };
 
-  const handleEmit = () => {
-    const syncValue = toDEC(unref(inputValue));
-    emit('update:value', syncValue);
+  const validate = (value: string | number) => {
+    if (unref(inputType) === AddressTypeEnum.DEC) {
+      return /^[0-9]\d*$/.test(value.toString());
+    } else {
+      return /(0x)?[0-9a-fA-F]+/.test(value.toString());
+    }
   };
 
-  const handleChange = (value: AddressTypeEnum) => {
-    const syncValue = value === AddressTypeEnum.DEC ? unref(getHexValue) : unref(getDecValue);
-    inputValue.value = syncValue;
-    emit('update:value', toDEC(syncValue));
+  const handleSyncValue = (event: ChangeEvent) => {
+    const value = (event.target as HTMLInputElement).value;
+    if (isNullOrUnDef(value) || value === '') {
+      emit('update:value', null);
+      return;
+    }
+    if (!validate(value)) return;
+    const syncValue = getValueByInputType(value);
+    emit('update:value', syncValue);
   };
+
+  function decToHex(value: number | string) {
+    return Number(value).toString(16);
+  }
+
+  function hexToDec(value: number | string) {
+    return parseInt(value, 16);
+  }
 </script>
 
 <template>
   <InputGroup compact class="!flex">
     <Select
-      v-model:value="type"
+      v-if="!disabledSwitch"
+      v-model:value="inputType"
       :options="addressTypeOptions"
-      @change="handleChange"
+      :disabled="disabled"
       class="bg-gray-200 max-w-20"
     />
-    <InputNumber
-      v-if="type === AddressTypeEnum.DEC"
-      v-model:value="inputValue"
-      :step="1"
-      class="flex-1"
-      v-bind="inputProps"
-      @change="handleEmit"
+    <Input
+      :value="getInputValue"
+      @change="handleSyncValue"
+      :disabled="disabled"
+      :placeholder="`请输入${inputType === AddressTypeEnum.DEC ? '十进制' : '十六进制'}设备地址码`"
     />
-    <Input v-if="type === AddressTypeEnum.HEX" v-model:value="inputValue" @change="handleEmit" />
     <div class="text-center h-8 leading-8 px-2 bg-gray-200 cursor-pointer rounded-1 w-20">
-      <div v-if="type === AddressTypeEnum.DEC">{{ getDecValue }}</div>
-      <div v-if="type === AddressTypeEnum.HEX">{{ getHexValue }}</div>
+      <div>{{ getValueOpposite }}</div>
     </div>
   </InputGroup>
 </template>

 import { findDictItemByCode } from '/@/api/system/dict';
 import { FormSchema, useComponentRegister } from '/@/components/Form';
 import { DictEnum } from '/@/enums/dictEnum';
-import RegisterAddressInput from './RegisterAddressInput.vue';
 import { createPickerSearch } from '/@/utils/pickerSearch';
 import { ControlGroup } from '../ControlGroup';
 
+useComponentRegister('ControlGroup', ControlGroup);
+
 export enum FormFieldsEnum {
   // 设备地址码
   DEVICE_CODE = 'deviceCode',
   // 功能码
   METHOD = 'method',
   // 寄存器地址
-  REGISTER_ADDR = 'registerAddr',
+  REGISTER_ADDRESS = 'registerAddress',
   // 数据校验算法
   CRC = 'crc',
   // 线圈个数
@@ -28,9 +29,6 @@ export enum FormFieldsEnum {
   REGISTER_VALUES = 'registerValues',
 }
 
-useComponentRegister('RegisterAddressInput', RegisterAddressInput);
-useComponentRegister('ControlGroup', ControlGroup);
-
 export enum FunctionCodeEnum {
   // 读取线圈状态01
   READ_COIL_STATE_01 = '01',
@@ -135,7 +133,7 @@ export const formSchemas: FormSchema[] = [
     },
   },
   {
-    field: FormFieldsEnum.REGISTER_ADDR,
+    field: FormFieldsEnum.REGISTER_ADDRESS,
     label: '起始寄存器地址',
     component: 'RegisterAddressInput',
     valueField: 'value',
@@ -178,7 +176,7 @@ export const formSchemas: FormSchema[] = [
     changeEvent: 'update:value',
     ifShow: ({ model }) => showCoilValue(model[FormFieldsEnum.METHOD]),
     defaultValue: '0',
-    rules: [{ required: true, message: '请输入线圈值' }],
+    rules: [{ required: true, message: '请输入线圈值', type: 'number' }],
     componentProps: {
       placeholder: '请输入线圈值',
     },
@@ -191,7 +189,7 @@ export const formSchemas: FormSchema[] = [
     changeEvent: 'update:value',
     ifShow: ({ model }) => showRegisterValue(model[FormFieldsEnum.METHOD]),
     defaultValue: '0',
-    rules: [{ required: true, message: '请输入寄存器值' }],
+    rules: [{ required: true, message: '请输入寄存器值', type: 'number' }],
     componentProps: {
       placeholder: '请输入寄存器值',
     },
@@ -214,7 +212,8 @@ export const formSchemas: FormSchema[] = [
         showTotalControl: false,
         itemProps: () => {
           return {
-            defaultValue: '0',
+            valueField: 'value',
+            changeEvent: 'update:value',
           } as FormSchema;
         },
       };

@@ -3,3 +3,8 @@ export enum ModeEnum {
   JSON = 'application/json',
   NORMAL = 'normal',
 }
+
+export enum AddressTypeEnum {
+  DEC = 'DEC',
+  HEX = 'HEX',
+}

@@ -12,23 +12,28 @@ const registerInfo = (record: ModbusCommandValueType): Partial<GenModbusCommandT
     coilValue,
     coilValues,
   } = record;
+
   switch (method) {
-    case FunctionCodeEnum.READ_COIL_STATE_01 || FunctionCodeEnum.READ_INPUT_STATE_02:
-      return { registerNum: coilNumber };
-    case FunctionCodeEnum.READ_KEEP_REGISTER_03 || FunctionCodeEnum.READ_INPUT_REGISTER_04:
-      return { registerNum: registerNumber };
+    case FunctionCodeEnum.READ_COIL_STATE_01:
+      return { registerNumber: coilNumber };
+    case FunctionCodeEnum.READ_INPUT_STATE_02:
+      return { registerNumber: coilNumber };
+    case FunctionCodeEnum.READ_KEEP_REGISTER_03:
+      return { registerNumber };
+    case FunctionCodeEnum.READ_INPUT_REGISTER_04:
+      return { registerNumber };
     case FunctionCodeEnum.WRITE_SINGLE_COIL_REGISTER_05:
       return { registerValues: [coilValue] };
     case FunctionCodeEnum.WRITE_SINGLE_KEEP_COIL_REGISTER_06:
       return { registerValues: [registerValue] };
     case FunctionCodeEnum.WRITE_MULTIPLE_COIL_STATE_15:
       return {
-        registerNum: coilNumber,
+        registerNumber: coilNumber,
         registerValues: coilValues.map((item) => (item.value ? 1 : 0)),
       };
     case FunctionCodeEnum.WRITE_MULTIPLE_KEEP_REGISTER_16:
       return {
-        registerNum: registerNumber,
+        registerNumber,
         registerValues: registerValues.map((item) => item.value),
       };
     default:
@@ -37,12 +42,12 @@ const registerInfo = (record: ModbusCommandValueType): Partial<GenModbusCommandT
 };
 
 export const composeModbusModalData = (record: ModbusCommandValueType): GenModbusCommandType => {
-  const { crc, deviceCode, method, registerAddr } = record;
+  const { crc, deviceCode, method, registerAddress } = record;
   return {
     crc,
     deviceCode,
-    method,
-    registerAddr,
+    method: Number(method).toString(16).padStart(2, '0').toUpperCase(),
+    registerAddress,
     ...registerInfo(record),
   };
 };

@@ -122,13 +122,19 @@
     });
   };
 
-  const handleCopy = (record: DataSourceType) => {
+  const handleCopy = async (record: DataSourceType) => {
+    const { key } = props.componentConfig || {};
+    if (key == 'HumidityComponent2' && props.dataSource.length >= 6) {
+      createMessage.warning('绑定的数据源不能超过6条~');
+      return;
+    }
+
     if (props.dataSource.length >= DATA_SOURCE_LIMIT_NUMBER) {
       createMessage.warning('绑定的数据源不能超过10条~');
       return;
     }
 
-    const allValues = getFormValues();
+    const allValues = await getFormValues();
     const currentRecord = getFormValueByUUID(record.uuid);
     const uuid = trackUpdate();
     const raw = toRaw(record);
@@ -167,7 +173,7 @@
 
   const handleSettingOk = (data: DataSourceType) => {
     const { uuid } = data;
-    const _dataSource = cloneDeep(props.dataSource);
+    const _dataSource = cloneDeep(getFormValues());
 
     const index = _dataSource.findIndex((item) => item.uuid === uuid);
 

@@ -95,6 +95,10 @@
         };
         setFormValues(record);
       } else {
+        selectWidgetKeys.value = {
+          componentKey: TextComponent1Config.key,
+          categoryKey: PackagesCategoryEnum.TEXT,
+        };
         dataSource.value = [genNewDataSourceItem()];
       }
     }
@@ -113,6 +117,11 @@
   };
 
   const handleNewRecord = () => {
+    const { componentKey } = unref(selectWidgetKeys);
+    if (componentKey === 'HumidityComponent2' && unref(dataSource).length >= 6) {
+      createMessage.warning('绑定的数据源不能超过6条~');
+      return;
+    }
     if (unref(dataSource).length >= DATA_SOURCE_LIMIT_NUMBER) {
       createMessage.warning('绑定的数据源不能超过10条~');
       return;

+import cloneDeep from 'lodash-es/cloneDeep';
+import { DeviceAlarmConfig } 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,
+  // componetDesign: false,
+  [ComponentConfigFieldEnum.OPEN_COLOR]: '#00F43D',
+  [ComponentConfigFieldEnum.CLOSE_COLOR]: '#FF0000',
+  [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: true,
+  [ComponentConfigFieldEnum.SHOW_TIME]: false,
+};
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key: string = DeviceAlarmConfig.key;
+
+  public attr = { ...componentInitConfig };
+
+  public componentConfig: ConfigType = cloneDeep(DeviceAlarmConfig);
+
+  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: '设备正常颜色',
+      //   component: 'ColorPicker',
+      //   changeEvent: 'update:value',
+      //   componentProps: {
+      //     defaultValue: option.openColor,
+      //   },
+      // },
+      // {
+      //   field: ComponentConfigFieldEnum.CLOSE_COLOR,
+      //   label: '设备告警颜色',
+      //   component: 'ColorPicker',
+      //   changeEvent: 'update:value',
+      //   componentProps: {
+      //     defaultValue: option.closeColor,
+      //   },
+      // },
+      {
+        field: ComponentConfigFieldEnum.SHOW_DEVICE_NAME,
+        label: '显示设备名称',
+        component: 'Checkbox',
+        defaultValue: option.showDeviceName,
+      },
+      {
+        field: ComponentConfigFieldEnum.SHOW_TIME,
+        label: '显示时间',
+        component: 'Checkbox',
+        defaultValue: option.showTime,
+      },
+    ],
+    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';
+  import { formSchemas } from '../DeviceAlarmHistory/datasource.config';
+
+  const [register, { getFieldsValue, setFieldsValue, validate, resetFields }] = useForm({
+    labelWidth: 0,
+    showActionButtonGroup: false,
+    layout: 'horizontal',
+    labelCol: { span: 0 },
+    schemas: formSchemas(),
+  });
+
+  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('DeviceAlarm');
+export const DeviceAlarmConfig: ConfigType = {
+  ...componentKeys,
+  title: '设备告警',
+  package: PackagesCategoryEnum.ALARM,
+};

+<script lang="ts" setup>
+  import { ComponentPropsConfigType } from '/@/views/visual/packages/index.type';
+  import { option } from './config';
+  import { useComponentScale } from '/@/views/visual/packages/hook/useComponentScale';
+  import { computed, watch } from 'vue';
+  import { ref, onMounted, unref } from 'vue';
+  import { useIntervalFn } from '@vueuse/core';
+  import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
+  import { useCustomDataFetch } from '../../../hook/socket/useSocket';
+  import { ReceiveAlarmDataCmdsMessageType } from '../../../hook/socket/useSocket.type';
+  import { useDataBoardContext } from '/@/views/visual/palette/hooks/useDataBoardContext';
+  import { useAlarmContext } from '/@/views/visual/palette/hooks/useAlarmTime';
+  import { getMessage } from '../config';
+
+  interface IStatus {
+    text: string;
+    color: string;
+  }
+
+  interface IAlarmStatusList {
+    id: string;
+    deviceName: string;
+    showDeviceName: boolean;
+    showTime: boolean;
+    status: IStatus;
+    time: number;
+  }
+
+  const props = defineProps<{
+    config: ComponentPropsConfigType<typeof option>;
+  }>();
+
+  const isOpenClose = ref<boolean>(true);
+
+  const { send } = useDataBoardContext();
+
+  const currentCmdId = ref();
+
+  const alarmLevel = (type: string): IStatus => {
+    if (type === 'CRITICAL') {
+      return { text: '紧急', color: 'alarm_state_critical' };
+    } else if (type === 'MAJOR') {
+      return { text: '重要', color: 'alarm_state_major' };
+    } else if (type === 'MINOR') {
+      return { text: '次要', color: 'alarm_state_minor' };
+    } else if (type === 'WARNING') {
+      return { text: '警告', color: 'alarm_state_warning' };
+    } else {
+      return { text: '不确定', color: 'alarm_state_other' };
+    }
+  };
+
+  const getDesign = computed(() => {
+    const { persetOption = {}, option } = props.config;
+    const { dataSource } = option;
+    const { showDeviceName: presetShowDeviceName, showTime: persetShowTime } = persetOption;
+
+    return {
+      dataSource: dataSource?.map((item) => {
+        const { deviceId, deviceName, deviceRename, componentInfo } = item;
+        return {
+          id: deviceId,
+          deviceName: deviceRename || deviceName,
+          showDeviceName: componentInfo.showDeviceName ?? presetShowDeviceName,
+          showTime: componentInfo.showTime ?? persetShowTime,
+        };
+      }),
+    };
+  });
+
+  const randomFn = () => {
+    useIntervalFn(() => {
+      isOpenClose.value = !unref(isOpenClose);
+    }, 4000);
+  };
+
+  const alarmStatusList = ref<IAlarmStatusList[]>([
+    {
+      id: '1',
+      deviceName: '设备',
+      status: { text: '紧急', color: 'alarm_state_major' },
+      time: 1689574726,
+      showDeviceName: true,
+      showTime: true,
+    },
+  ]);
+
+  const { alarmForm } = useAlarmContext();
+
+  watch(
+    () => alarmForm?.value,
+    () => {
+      if (props.config.option.mode == 'SELECT_PREVIEW') return;
+      send?.(JSON.stringify(getMessage(unref(currentCmdId), unref(getDesign), unref(alarmForm))));
+    },
+    { immediate: false }
+  );
+
+  const transformMessage = (cmdId: number) => {
+    if (props.config.option.mode == 'SELECT_PREVIEW') return;
+    currentCmdId.value = cmdId;
+    send?.(JSON.stringify(getMessage(cmdId, unref(getDesign), unref(alarmForm))));
+  };
+
+  const getReduce = (data) => {
+    const list = data.reduce((acc, obj) => {
+      const found = acc.find((item) => item.entityId.id == obj.entityId.id);
+      if (!found) {
+        acc.push(obj);
+      }
+      return acc;
+    }, []);
+
+    data.forEach((item) => {
+      list?.forEach((item1) => {
+        if (item.entityId.id == item1.entityId.id) {
+          item1.time = Number(item1.createdTime > item.createdTime)
+            ? item1.createdTime
+            : item.createdTime;
+        }
+      });
+    });
+
+    return list;
+  };
+
+  const updateFn = (message: ReceiveAlarmDataCmdsMessageType) => {
+    alarmStatusList.value = unref(getDesign).dataSource?.map((item) => {
+      return {
+        id: item.id,
+        deviceName: item.deviceName,
+        showDeviceName: item.showDeviceName,
+        showTime: item.showTime,
+        status: { text: '', color: '' },
+        time: 0,
+      };
+    }) as any;
+    const { data, update } = message;
+    const alarmList = data?.data || update;
+    const uniData = getReduce(alarmList); //去重得到最新的事件对象
+
+    // if (!data?.data.length) return;
+    uniData.forEach((item) => {
+      alarmStatusList.value?.forEach((item1) => {
+        if (item.entityId.id == item1.id) {
+          item1.status = alarmLevel(item.severity);
+          item1.time = item.createdTime;
+        }
+      });
+    });
+  };
+
+  onMounted(() => {
+    !props.config.option.uuid && randomFn();
+  });
+
+  useCustomDataFetch(props, transformMessage, updateFn);
+
+  const { getScale } = useComponentScale(props);
+</script>
+
+<template>
+  <main :style="getScale" class="w-full h-full flex justify-center items-center">
+    <div v-for="item in alarmStatusList" :key="item.id" class="flex flex-col items-center">
+      <div class="flex justify-center items-center flex-col">
+        <div class="text-gray-500 text-sm truncate"
+          >{{
+            item.status.text
+              ? item.showDeviceName
+                ? item.deviceName + '-'
+                : ''
+              : '当前设备未发现告警'
+          }}{{ item.status.text }}</div
+        >
+        <div :class="item.status.color"></div>
+      </div>
+      <UpdateTime v-show="item.showTime" :time="item.time" />
+    </div>
+  </main>
+</template>
+<style lang="less" scoped>
+  .alarm_state_critical {
+    background: #cf1322;
+    box-shadow: 0 -1px 7px 1px rgba(0, 0, 0, 0.2), inset 0 -1px 9px #304701, 0 2px 12px #cf1322;
+    width: 60px;
+    height: 60px;
+    border-radius: 50%;
+    margin: 10px 0;
+  }
+
+  .alarm_state_major {
+    background: #ff6e03;
+    box-shadow: 0 -1px 7px 1px rgba(0, 0, 0, 0.2), inset 0 -1px 9px #304701, 0 2px 12px #ff6e03;
+    width: 60px;
+    height: 60px;
+    border-radius: 50%;
+    margin: 10px 0;
+  }
+
+  .alarm_state_minor {
+    background: #ff0;
+    box-shadow: 0 -1px 7px 1px rgba(0, 0, 0, 0.2), inset 0 -1px 9px #304701, 0 2px 12px #ff0;
+    width: 60px;
+    height: 60px;
+    border-radius: 50%;
+    margin: 10px 0;
+  }
+
+  .alarm_state_warning {
+    background: #edf760;
+    box-shadow: 0 -1px 7px 1px rgba(0, 0, 0, 0.2), inset 0 -1px 9px #304701, 0 2px 12px #edf760;
+    width: 60px;
+    height: 60px;
+    border-radius: 50%;
+    margin: 10px 0;
+  }
+
+  .alarm_state_other {
+    background: #d3adf7;
+    box-shadow: 0 -1px 7px 1px rgba(0, 0, 0, 0.2), inset 0 -1px 9px #304701, 0 2px 12px #d3adf7;
+    width: 60px;
+    height: 60px;
+    border-radius: 50%;
+    margin: 10px 0;
+  }
+</style>

+import cloneDeep from 'lodash-es/cloneDeep';
+import { DeviceAlarmHistoryConfig } from '.';
+import {
+  ConfigType,
+  CreateComponentType,
+  PublicComponentOptions,
+  PublicPresetOptions,
+} from '../../../index.type';
+import { PublicConfigClass, componentInitConfig } from '../../../publicConfig';
+import { ComponentConfigFieldEnum } from '../../../enum';
+
+export const option: PublicPresetOptions = {
+  multipleDataSourceComponent: true,
+  componetDesign: false,
+  [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
+  [ComponentConfigFieldEnum.UNIT]: '℃',
+};
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key: string = DeviceAlarmHistoryConfig.key;
+
+  public attr = { ...componentInitConfig };
+
+  public componentConfig: ConfigType = cloneDeep(DeviceAlarmHistoryConfig);
+
+  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.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 {
+      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>

+import { FormSchema } from '/@/components/Form';
+import { DataSourceField } from '../../../config/common.config';
+import { DeviceTypeEnum } from '/@/api/device/model/deviceModel';
+import { findDictItemByCode } from '/@/api/system/dict';
+// import { getDeviceProfile } from '/@/api/alarm/position';
+// import { useSelectWidgetMode } from '/@/views/visual/dataSourceBindPanel/useContext';
+// import { DataActionModeEnum } from '/@/enums/toolEnum';
+// import { unref } from 'vue';
+import { getMeetTheConditionsDevice } from '/@/api/dataBoard';
+import { MasterDeviceList } from '/@/api/dataBoard/model';
+
+export const formSchemas = (): FormSchema[] => {
+  // const mode = useSelectWidgetMode();
+  // const isUpdate = unref(mode) === DataActionModeEnum.UPDATE;
+  return [
+    {
+      field: DataSourceField.DEVICE_NAME,
+      component: 'Input',
+      label: '设备名',
+      show: false,
+    },
+    {
+      field: DataSourceField.DEVICE_TYPE,
+      component: 'ApiSelect',
+      label: '设备类型',
+      colProps: { span: 8 },
+      rules: [{ message: '请选择设备类型', required: true }],
+      componentProps: ({ formActionType }) => {
+        const { setFieldsValue } = formActionType;
+        return {
+          api: findDictItemByCode,
+          params: {
+            dictCode: 'device_type',
+          },
+          valueField: 'itemValue',
+          labelField: 'itemText',
+          placeholder: '请选择设备类型',
+          onChange: (value: DeviceTypeEnum) => {
+            setFieldsValue({
+              [DataSourceField.IS_GATEWAY_DEVICE]: value === DeviceTypeEnum.GATEWAY,
+              [DataSourceField.DEVICE_PROFILE_ID]: null,
+              [DataSourceField.DEVICE_ID]: null,
+              [DataSourceField.ATTRIBUTE]: null,
+              [DataSourceField.ATTRIBUTE_NAME]: null,
+              [DataSourceField.TRANSPORT_TYPE]: null,
+            });
+          },
+          getPopupContainer: () => document.body,
+        };
+      },
+    },
+    // {
+    //   field: DataSourceField.DEVICE_PROFILE_ID,
+    //   component: 'ApiSelect',
+    //   label: '产品',
+    //   colProps: { span: 8 },
+    //   rules: [{ required: true, message: '产品为必填项' }],
+    //   componentProps: ({ formActionType, formModel }) => {
+    //     const { setFieldsValue } = formActionType;
+    //     const deviceType = formModel[DataSourceField.DEVICE_TYPE];
+    //     return {
+    //       api: async () => {
+    //         if (!deviceType) return [];
+    //         const list = await getDeviceProfile(deviceType);
+    //         if (isUpdate) {
+    //           const deviceProfileId = formModel[DataSourceField.DEVICE_PROFILE_ID];
+    //           const record = list.find((item) => item.id === deviceProfileId);
+    //           setFieldsValue({ [DataSourceField.TRANSPORT_TYPE]: record?.transportType });
+    //         }
+    //         return list;
+    //       },
+    //       labelField: 'name',
+    //       valueField: 'id',
+    //       placeholder: '请选择产品',
+    //       onChange: (_, option = {} as Record<'transportType', string>) => {
+    //         setFieldsValue({
+    //           [DataSourceField.DEVICE_ID]: null,
+    //           [DataSourceField.ATTRIBUTE]: null,
+    //           [DataSourceField.ATTRIBUTE_NAME]: null,
+    //           [DataSourceField.TRANSPORT_TYPE]: option[DataSourceField.TRANSPORT_TYPE],
+    //         });
+    //       },
+    //       getPopupContainer: () => document.body,
+    //     };
+    //   },
+    // },
+    {
+      field: DataSourceField.ORIGINATION_ID,
+      component: 'OrgTreeSelect',
+      label: '组织',
+      colProps: { span: 8 },
+      rules: [{ required: true, message: '组织为必填项' }],
+      componentProps({ formActionType }) {
+        const { setFieldsValue } = formActionType;
+        return {
+          placeholder: '请选择组织',
+          onChange() {
+            setFieldsValue({
+              [DataSourceField.DEVICE_ID]: null,
+            });
+          },
+          showCreate: false,
+          getPopupContainer: () => document.body,
+        };
+      },
+    },
+    {
+      field: DataSourceField.DEVICE_PROFILE_ID,
+      component: 'Input',
+      label: '',
+      show: false,
+    },
+    {
+      field: DataSourceField.DEVICE_ID,
+      component: 'ApiSelect',
+      label: '设备',
+      colProps: { span: 8 },
+      rules: [{ required: true, message: '设备名称为必填项' }],
+      componentProps({ formModel, formActionType }) {
+        const { setFieldsValue } = formActionType;
+        const organizationId = formModel[DataSourceField.ORIGINATION_ID];
+        const deviceProfileId = formModel[DataSourceField.DEVICE_PROFILE_ID];
+        const deviceType = formModel[DataSourceField.DEVICE_TYPE];
+
+        return {
+          api: async () => {
+            if (organizationId) {
+              try {
+                const data = await getMeetTheConditionsDevice({
+                  organizationId,
+                  deviceProfileId,
+                  deviceType,
+                });
+                if (data)
+                  return data.map((item) => ({
+                    ...item,
+                    label: item.alias || item.name,
+                    value: item.tbDeviceId,
+                    deviceType: item.deviceType,
+                  }));
+              } catch (error) {}
+            }
+            return [];
+          },
+          onChange(_value, record: MasterDeviceList) {
+            setFieldsValue({
+              [DataSourceField.DEVICE_NAME]: record?.label,
+            });
+          },
+          placeholder: '请选择设备',
+          getPopupContainer: () => document.body,
+        };
+      },
+    },
+    {
+      field: DataSourceField.DEVICE_RENAME,
+      component: 'Input',
+      label: '设备名',
+      colProps: { span: 8 },
+      componentProps: {
+        placeholder: '设备重命名',
+      },
+    },
+  ];
+};

+<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';
+
+  import { formSchemas } from './datasource.config';
+
+  defineProps<{
+    values: PublicComponentValueType;
+    componentConfig: CreateComponentType;
+  }>();
+
+  const [register, { getFieldsValue, setFieldsValue, validate, resetFields }] = useForm({
+    labelWidth: 0,
+    showActionButtonGroup: false,
+    layout: 'horizontal',
+    labelCol: { span: 0 },
+    schemas: formSchemas(),
+  });
+
+  const getFormValues = () => {
+    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('DeviceAlarmHistory');
+
+export const DeviceAlarmHistoryConfig: ConfigType = {
+  ...componentKeys,
+  title: '设备告警历史',
+  package: PackagesCategoryEnum.ALARM,
+};

+<script lang="ts" setup>
+  import { computed, unref, ref, watch } from 'vue';
+  import { ComponentPropsConfigType } from '../../../index.type';
+  import { option } from './config';
+  import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
+  import { BasicTable, useTable, BasicColumn } from '/@/components/Table';
+  import { formatToDateTime } from '/@/utils/dateUtil';
+  import { onMounted } from 'vue';
+  import { nextTick } from 'vue';
+  import { useComponentScale } from '../../../hook/useComponentScale';
+  import { h } from 'vue';
+  import { Tag } from 'ant-design-vue';
+  import { useDataBoardContext } from '/@/views/visual/palette/hooks/useDataBoardContext';
+  import { useCustomDataFetch } from '../../../hook/socket/useSocket';
+  import { ReceiveAlarmDataCmdsMessageType } from '../../../hook/socket/useSocket.type';
+  import { useAlarmContext } from '/@/views/visual/palette/hooks/useAlarmTime';
+
+  import { getMessage } from '../config';
+
+  const props = defineProps<{
+    config: ComponentPropsConfigType<typeof option>;
+  }>();
+
+  interface IList {
+    [key: string]: string | number;
+  }
+
+  const alarmLevel = (type: string): IList => {
+    if (type === 'CRITICAL') {
+      return { text: '紧急', color: 'red' };
+    } else if (type === 'MAJOR') {
+      return { text: '重要', color: 'pink' };
+    } else if (type === 'MINOR') {
+      return { text: '次要', color: 'warning' };
+    } else if (type === 'WARNING') {
+      return { text: '警告', color: 'warning' };
+    } else {
+      return { text: '不确定', color: 'default' };
+    }
+  };
+
+  const statusType = (type: string): string => {
+    if (type === 'CLEARED_UNACK') {
+      return '清除未确认';
+    } else if (type === 'CLEARED_ACK') {
+      return '清除已确认';
+    } else if (type === 'ACTIVE_ACK') {
+      return '激活已确认';
+    } else {
+      return '激活未确认';
+    }
+  };
+
+  const { send } = useDataBoardContext();
+
+  const currentCmdId = ref();
+
+  const alarmColumns: BasicColumn[] = [
+    {
+      title: '状态',
+      dataIndex: 'severity',
+      ellipsis: true,
+      width: 80,
+      customRender: ({ record }) => {
+        const { severity } = record;
+        const { text, color } = alarmLevel(severity);
+        return h(Tag, { color }, () => text);
+      },
+    },
+    { title: '设备', dataIndex: 'device', ellipsis: true, width: 120 },
+    { title: '告警场景', dataIndex: 'type', ellipsis: true, width: 80 },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      ellipsis: true,
+      width: 80,
+      format: (text) => statusType(text),
+    },
+    {
+      title: '时间',
+      dataIndex: 'time',
+      ellipsis: true,
+      width: 110,
+      format(text) {
+        return formatToDateTime(text, 'YYYY-MM-DD HH:mm:ss');
+      },
+    },
+  ];
+  const devicealarmList = ref([
+    { severity: 0, device: '温湿度', type: '规则', status: 50, time: 1688974276000 },
+    { severity: 1, device: '温湿度1', type: '规则1', status: 350, time: 1688994276000 },
+    { severity: 0, device: '温湿度2', type: '规则2', status: 150, time: 1688174276000 },
+    { severity: 0, device: '温湿度3', type: '规则2', status: 150, time: 1688174276000 },
+    { severity: 0, device: '温湿度4', type: '规则2', status: 150, time: 1688174276000 },
+    { severity: 0, device: '温湿度5', type: '规则2', status: 150, time: 1688174276000 },
+  ]);
+
+  const [registerTable, { setProps, redoHeight, setTableData }] = useTable({
+    showIndexColumn: false,
+    showTableSetting: false,
+    canResize: true,
+    size: 'small',
+    maxHeight: 144,
+    dataSource: devicealarmList,
+    columns: alarmColumns,
+  });
+
+  const getDesign = computed(() => {
+    const { persetOption, option } = props.config;
+    const { dataSource = [] } = option || {};
+    const { unit: presetUnit, presetShowDeviceName } = persetOption || {};
+    return {
+      dataSource: dataSource?.map((item) => {
+        const { unit, showDeviceName } = item.componentInfo || {};
+        const { attribute, attributeName, attributeRename, deviceName, deviceRename, deviceId } =
+          item;
+        return {
+          unit: unit ?? presetUnit,
+          attribute,
+          attributeRename,
+          attributeName,
+          showDeviceName: showDeviceName ?? presetShowDeviceName,
+          deviceName,
+          deviceRename,
+          id: deviceId,
+        };
+      }),
+    };
+  });
+
+  const { alarmForm } = useAlarmContext();
+
+  watch(
+    () => alarmForm?.value,
+    () => {
+      if (props.config.option.mode == 'SELECT_PREVIEW') return;
+      send?.(JSON.stringify(getMessage(unref(currentCmdId), unref(getDesign), unref(alarmForm))));
+    },
+    { immediate: false }
+  );
+
+  const transformMessage = (cmdId: number) => {
+    if (props.config.option.mode == 'SELECT_PREVIEW') return;
+    currentCmdId.value = cmdId;
+    send?.(JSON.stringify(getMessage(cmdId, unref(getDesign), unref(alarmForm))));
+  };
+
+  const updateFn = (message: ReceiveAlarmDataCmdsMessageType) => {
+    const { data } = message || {};
+    if (!data?.data) return;
+    const tableList = ref<any>(
+      data?.data?.map((item) => {
+        return {
+          time: item.createdTime,
+          device: item.originatorName,
+          severity: item.severity,
+          type: item.type,
+          status: item.status,
+        };
+      })
+    );
+    setTableData(unref(tableList));
+  };
+
+  useCustomDataFetch(props, transformMessage, updateFn);
+
+  onMounted(async () => {
+    await nextTick();
+    resize();
+  });
+
+  const resize = async () => {
+    const { height } = unref(getContainerSize);
+    height && setProps({ maxHeight: height - 110, scroll: { x: 470, y: height - 110 } });
+    await nextTick();
+    redoHeight();
+  };
+
+  const { getContainerSize } = useComponentScale(props, resize);
+</script>
+
+<template>
+  <main class="flex flex-col justify-center items-center w-full h-full">
+    <DeviceName :config="config" />
+    <div class="w-full h-full">
+      <BasicTable autoCreateKey style="flex: auto" @register="registerTable" />
+    </div>
+  </main>
+</template>

+// isRealTime是否是实时
+
+export const getMessage = (cmdId, getDesign, alarmForm) => {
+  const entityList = [...new Set(getDesign.dataSource?.map((item) => item.id))];
+  const message = {
+    alarmDataCmds: [
+      {
+        query: {
+          entityFilter: {
+            type: 'entityList',
+            resolveMultiple: true,
+            entityType: 'DEVICE',
+            entityList: entityList,
+          },
+          pageLink: {
+            page: 0,
+            pageSize: alarmForm?.pageSize,
+            textSearch: null,
+            searchPropagatedAlarms: false,
+            statusList: [],
+            severityList: [],
+            typeList: [],
+            sortOrder: {
+              key: {
+                key: 'createdTime',
+                type: 'ALARM_FIELD',
+              },
+              direction: 'DESC',
+            },
+            timeWindow: alarmForm?.time,
+            startTs: alarmForm?.startTs ? new Date(alarmForm?.startTs).getTime() : undefined,
+            endTs: alarmForm?.endTs ? new Date(alarmForm?.endTs).getTime() : undefined,
+          },
+          alarmFields: [
+            {
+              type: 'ALARM_FIELD',
+              key: 'createdTime',
+            },
+            {
+              type: 'ALARM_FIELD',
+              key: 'originator',
+            },
+            {
+              type: 'ALARM_FIELD',
+              key: 'type',
+            },
+            {
+              type: 'ALARM_FIELD',
+              key: 'severity',
+            },
+            {
+              type: 'ALARM_FIELD',
+              key: 'status',
+            },
+          ],
+          entityFields: [],
+          latestValues: [],
+        },
+        cmdId,
+      },
+    ],
+  };
+  return message;
+};

+import { DeviceAlarmHistoryConfig } from './DeviceAlarmHistory';
+import { DeviceAlarmConfig } from './DeviceAlarm';
+
+export const AlarmList = [DeviceAlarmConfig, DeviceAlarmHistoryConfig];

@@ -32,6 +32,10 @@
         transportType: value.transportType,
         service: value.service,
         command: value.command,
+        openService: value.openService,
+        closeService: value.closeService,
+        openCommand: value.openCommand,
+        closeCommand: value.closeCommand,
         commandType: value.commandType,
         callType: value.callType,
       },
@@ -45,6 +49,10 @@
       ...record,
       transportType: customCommand?.transportType || (record as Recordable).transportType,
       service: customCommand?.service || (record as Recordable).service,
+      openService: customCommand?.openService || (record as Recordable).openService,
+      closeService: customCommand?.closeService || (record as Recordable).closeService,
+      openCommand: customCommand?.openCommand || (record as Recordable).openCommand,
+      closeCommand: customCommand?.closeCommand || (record as Recordable).closeCommand,
       command: customCommand?.command || (record as Recordable).command,
       commandType: customCommand?.commandType || (record as Recordable).commandType,
       callType: customCommand?.callType || (record as Recordable).callType,

 <script lang="ts" setup>
-  import { ComponentPropsConfigType, DataFetchUpdateFn } from '/@/views/visual/packages/index.type';
+  import { ComponentPropsConfigType } from '/@/views/visual/packages/index.type';
   import { option } from './config';
-  import { useDataFetch } from '/@/views/visual/packages/hook/useSocket';
   import { Spin } from 'ant-design-vue';
-  import { computed, ref } from 'vue';
+  import { computed, ref, unref } from 'vue';
   import { useComponentScale } from '../../../hook/useComponentScale';
   import { useSendCommand } from '../../../hook/useSendCommand';
   import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
+  import { DataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
+  import { useDataFetch } from '../../../hook/socket/useSocket';
+  import { getSendValues } from '../config';
 
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;
@@ -17,10 +19,25 @@
   const currentValue = ref(false);
 
   const getDesign = computed(() => {
+    // console.log(props.config, 'config');
     const { option } = props.config;
-    const { attribute, attributeRename, attributeName } = option;
+    const {
+      attribute,
+      attributeRename,
+      attributeName,
+      commandType,
+      extensionDesc,
+      codeType,
+      deviceCode,
+      customCommand,
+    } = option;
     return {
       attribute: attributeRename || attributeName || attribute,
+      extensionDesc: extensionDesc ? JSON.parse(extensionDesc) : {},
+      commandType,
+      codeType,
+      deviceCode,
+      customCommand,
     };
   });
 
@@ -28,8 +45,12 @@
   const handleChange = async (event: Event) => {
     const target = event.target as HTMLInputElement;
     const value = target.checked;
+    const { option } = props.config || {};
 
-    const flag = await sendCommand(props.config.option, value);
+    const { values, isModbusCommand, sendValue } =
+      (await getSendValues(option, unref(getDesign), value)) || {};
+
+    const flag = await sendCommand(values, isModbusCommand ? sendValue : value, isModbusCommand);
     if (flag) currentValue.value = value;
     flag ? (currentValue.value = value) : (target.checked = !value);
   };

@@ -32,6 +32,10 @@
         transportType: value.transportType,
         service: value.service,
         command: value.command,
+        openService: value.openService,
+        closeService: value.closeService,
+        openCommand: value.openCommand,
+        closeCommand: value.closeCommand,
         commandType: value.commandType,
         callType: value.callType,
       },
@@ -41,14 +45,20 @@
 
   const setFormValues = (record: DataSource) => {
     const { customCommand } = record;
-    return setFieldsValue({
+    const values = {
       ...record,
       transportType: customCommand?.transportType || (record as Recordable).transportType,
       service: customCommand?.service || (record as Recordable).service,
       command: customCommand?.command || (record as Recordable).command,
+      openService: customCommand?.openService || (record as Recordable).openService,
+      closeService: customCommand?.closeService || (record as Recordable).closeService,
+      openCommand: customCommand?.openCommand || (record as Recordable).openCommand,
+      closeCommand: customCommand?.closeCommand || (record as Recordable).closeCommand,
       commandType: customCommand?.commandType || (record as Recordable).commandType,
       callType: customCommand?.callType || (record as Recordable).callType,
-    } as unknown as Partial<CommonDataSourceBindValueType>);
+    } as unknown as Partial<CommonDataSourceBindValueType>;
+
+    return setFieldsValue(values);
   };
 
   defineExpose({

 <script lang="ts" setup>
-  import { ComponentPropsConfigType, DataFetchUpdateFn } from '/@/views/visual/packages/index.type';
+  import { ComponentPropsConfigType } from '/@/views/visual/packages/index.type';
   import { option } from './config';
-  import { useDataFetch } from '/@/views/visual/packages/hook/useSocket';
   import { SvgIcon } from '/@/components/Icon';
   import { Switch } from 'ant-design-vue';
   import { computed, ref } from 'vue';
@@ -9,6 +8,9 @@
   import { useSendCommand } from '../../../hook/useSendCommand';
   import { unref } from 'vue';
   import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
+  import { DataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
+  import { useDataFetch } from '../../../hook/socket/useSocket';
+  import { getSendValues } from '../config';
 
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;
@@ -18,19 +20,45 @@
 
   const getDesign = computed(() => {
     const { option, persetOption } = props.config;
-    const { componentInfo, attribute, attributeRename, attributeName } = option;
+    const {
+      componentInfo,
+      attribute,
+      attributeRename,
+      attributeName,
+      commandType,
+      extensionDesc,
+      codeType,
+      deviceCode,
+      customCommand,
+    } = option;
     const { icon: presetIcon, iconColor: presetIconColor } = persetOption || {};
     const { icon, iconColor } = componentInfo || {};
+
     return {
       icon: icon ?? presetIcon,
       iconColor: iconColor || presetIconColor,
       attribute: attributeRename || attributeName || attribute,
+      extensionDesc: extensionDesc ? JSON.parse(extensionDesc) : {},
+      commandType,
+      codeType,
+      deviceCode,
+      customCommand,
     };
   });
 
   const { sendCommand, loading } = useSendCommand();
+
   const handleChange = async () => {
-    const flag = await sendCommand(props.config.option, unref(checked));
+    const { option } = props.config || {};
+
+    const { values, isModbusCommand, sendValue } =
+      (await getSendValues(option, unref(getDesign), unref(checked))) || {};
+
+    const flag = await sendCommand(
+      values,
+      isModbusCommand ? sendValue : unref(checked),
+      isModbusCommand
+    );
     if (!flag) checked.value = !unref(checked);
   };
 

@@ -32,6 +32,10 @@
         transportType: value.transportType,
         service: value.service,
         command: value.command,
+        openService: value.openService,
+        closeService: value.closeService,
+        openCommand: value.openCommand,
+        closeCommand: value.closeCommand,
         commandType: value.commandType,
         callType: value.callType,
       },
@@ -45,6 +49,10 @@
       ...record,
       transportType: customCommand?.transportType || (record as Recordable).transportType,
       service: customCommand?.service || (record as Recordable).service,
+      openService: customCommand?.openService || (record as Recordable).openService,
+      closeService: customCommand?.closeService || (record as Recordable).closeService,
+      openCommand: customCommand?.openCommand || (record as Recordable).openCommand,
+      closeCommand: customCommand?.closeCommand || (record as Recordable).closeCommand,
       command: customCommand?.command || (record as Recordable).command,
       commandType: customCommand?.commandType || (record as Recordable).commandType,
       callType: customCommand?.callType || (record as Recordable).callType,

 <script lang="ts" setup>
-  import { ComponentPropsConfigType, DataFetchUpdateFn } from '/@/views/visual/packages/index.type';
+  import { ComponentPropsConfigType } from '/@/views/visual/packages/index.type';
   import { option } from './config';
-  import { useDataFetch } from '/@/views/visual/packages/hook/useSocket';
   import { Spin } from 'ant-design-vue';
-  import { computed, ref } from 'vue';
+  import { computed, ref, unref } from 'vue';
   import { useComponentScale } from '../../../hook/useComponentScale';
   import { useSendCommand } from '../../../hook/useSendCommand';
   import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
+  import { DataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
+  import { useDataFetch } from '../../../hook/socket/useSocket';
+  import { getSendValues } from '../config';
 
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;
@@ -18,9 +20,23 @@
 
   const getDesign = computed(() => {
     const { option } = props.config;
-    const { attribute, attributeRename, attributeName } = option;
+    const {
+      attribute,
+      attributeRename,
+      attributeName,
+      commandType,
+      extensionDesc,
+      codeType,
+      deviceCode,
+      customCommand,
+    } = option;
     return {
       attribute: attributeRename || attributeName || attribute,
+      extensionDesc: extensionDesc ? JSON.parse(extensionDesc) : {},
+      commandType,
+      codeType,
+      deviceCode,
+      customCommand,
     };
   });
 
@@ -28,7 +44,12 @@
   const handleChange = async (event: Event) => {
     const target = event.target as HTMLInputElement;
     const value = target.checked;
-    const flag = await sendCommand(props.config.option, value);
+    const { option } = props.config || {};
+
+    const { values, isModbusCommand, sendValue } =
+      (await getSendValues(option, unref(getDesign), value)) || {};
+
+    const flag = await sendCommand(values, isModbusCommand ? sendValue : value, isModbusCommand);
     flag ? (currentValue.value = value) : (target.checked = !value);
   };
 

@@ -13,6 +13,8 @@ export const option: PublicPresetOptions = {
   [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
   [ComponentConfigFieldEnum.CONTROL_BAR_COLOR]: '#0072ff',
   [ComponentConfigFieldEnum.FONT_COLOR]: '#000000',
+  [ComponentConfigFieldEnum.MIN_NUMBER]: 0,
+  [ComponentConfigFieldEnum.MAX_NUMBER]: 100,
 };
 
 export default class Config extends PublicConfigClass implements CreateComponentType {

@@ -3,6 +3,7 @@
   import { useForm, BasicForm } from '/@/components/Form';
   import { PublicFormInstaceType } from '/@/views/visual/dataSourceBindPanel/index.type';
   import { option } from './config';
+  import { nextTick } from 'vue';
 
   const [register, { getFieldsValue, setFieldsValue, resetFields }] = useForm({
     schemas: [
@@ -21,6 +22,46 @@
         defaultValue: option.fontColor,
       },
       {
+        field: ComponentConfigFieldEnum.MIN_NUMBER,
+        label: '最小值',
+        component: 'InputNumber',
+        defaultValue: option.minNumber,
+        componentProps: ({ formActionType }) => {
+          const { setFieldsValue } = formActionType;
+          return {
+            placeholder: '请输入最小值',
+            onChange: async (e) => {
+              if ((typeof e === 'string' || typeof e === 'object') && !e) {
+                await nextTick();
+                setFieldsValue({ [ComponentConfigFieldEnum.MIN_NUMBER]: 0 });
+              }
+            },
+          };
+        },
+      },
+      {
+        field: ComponentConfigFieldEnum.MAX_NUMBER,
+        label: '最大值',
+        component: 'InputNumber',
+        defaultValue: option.maxNumber,
+        componentProps: ({ formModel, formActionType }) => {
+          const { setFieldsValue } = formActionType;
+          return {
+            placeholder: '请输入最大值',
+            min: formModel[ComponentConfigFieldEnum.MIN_NUMBER] + 100,
+            onChange: async (e) => {
+              if (!e) {
+                await nextTick();
+                setFieldsValue({
+                  [ComponentConfigFieldEnum.MAX_NUMBER]:
+                    formModel[ComponentConfigFieldEnum.MIN_NUMBER] + 100,
+                });
+              }
+            },
+          };
+        },
+      },
+      {
         field: ComponentConfigFieldEnum.SHOW_DEVICE_NAME,
         label: '显示设备名称',
         component: 'Checkbox',

@@ -32,6 +32,10 @@
         transportType: value.transportType,
         service: value.service,
         command: value.command,
+        openService: value.openService,
+        closeService: value.closeService,
+        openCommand: value.openCommand,
+        closeCommand: value.closeCommand,
         commandType: value.commandType,
       },
     };
@@ -42,10 +46,14 @@
     const { customCommand } = record;
     return setFieldsValue({
       ...record,
-      transportType: customCommand?.transportType,
-      service: customCommand?.service,
-      command: customCommand?.command,
-      commandType: customCommand?.commandType,
+      transportType: customCommand?.transportType || (record as Recordable).transportType,
+      service: customCommand?.service || (record as Recordable).service,
+      openService: customCommand?.openService || (record as Recordable).openService,
+      closeService: customCommand?.closeService || (record as Recordable).closeService,
+      openCommand: customCommand?.openCommand || (record as Recordable).openCommand,
+      closeCommand: customCommand?.closeCommand || (record as Recordable).closeCommand,
+      command: customCommand?.command || (record as Recordable).command,
+      commandType: customCommand?.commandType || (record as Recordable).command,
     } as unknown as Partial<CommonDataSourceBindValueType>);
   };
 

 <script lang="ts" setup>
-  import { ComponentPropsConfigType, DataFetchUpdateFn } from '/@/views/visual/packages/index.type';
+  import { ComponentPropsConfigType } from '/@/views/visual/packages/index.type';
   import { option } from './config';
-  import { useDataFetch } from '/@/views/visual/packages/hook/useSocket';
   import { Slider, Spin } from 'ant-design-vue';
   import { computed, ref, unref } from 'vue';
   import { useComponentScale } from '../../../hook/useComponentScale';
   import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
   import { useSendCommand } from '../../../hook/useSendCommand';
   import { useReceiveValue } from '../../../hook/useReceiveValue';
+  import { DataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
+  import { useDataFetch } from '../../../hook/socket/useSocket';
+  import { TaskTypeEnum } from '/@/views/task/center/config';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { SingleToHex } from '/@/views/device/list/cpns/tabs/ObjectModelCommandDeliveryModal/config';
+  import { genModbusCommand } from '/@/api/task';
 
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;
@@ -16,43 +21,155 @@
   const sliderValue = ref<number>(33);
   const oldSliderValue = ref<number>(33);
   const noSendValue = ref<number>(0);
-  const sMin = ref<number>(0);
-  const sMax = ref<number>(100);
   const sliderEl = ref<Nullable<InstanceType<typeof Slider>>>(null);
 
   const { loading, sendCommand } = useSendCommand();
 
   const getDesign = computed(() => {
     const { option, persetOption } = props.config;
-    const { componentInfo, attribute, attributeRename, attributeName } = option;
-    const { controlBarColor: persetControlBarColor, fonColor: persetFontColor } =
-      persetOption || {};
-    const { controlBarColor, fontColor } = componentInfo || {};
+    const {
+      componentInfo,
+      attribute,
+      attributeRename,
+      attributeName,
+      commandType,
+      extensionDesc,
+      codeType,
+      deviceCode,
+      customCommand,
+    } = option;
+    const {
+      controlBarColor: persetControlBarColor,
+      fonColor: persetFontColor,
+      minNumber: persetMinNumber,
+      maxNumber: persetMaxNumber,
+    } = persetOption || {};
+    const { controlBarColor, fontColor, minNumber, maxNumber } = componentInfo || {};
     return {
       attribute: attributeRename || attributeName || attribute,
       controlBarColor: controlBarColor ?? persetControlBarColor,
       fontColor: fontColor ?? persetFontColor,
+      minNumber: minNumber ?? persetMinNumber,
+      maxNumber: maxNumber ?? persetMaxNumber,
+      extensionDesc: extensionDesc ? JSON.parse(extensionDesc) : {},
+      commandType,
+      codeType,
+      deviceCode,
+      customCommand,
     };
   });
 
   const index = ref<number>(0);
+  const afterValue = ref<number>(0); //点击Slider获取的值
 
   const handleChange = async (e) => {
     index.value++;
+    afterValue.value = e;
     if (index.value == 1) {
       oldSliderValue.value = unref(sliderValue);
+      return; //这个是因为设置了最大值时，当sliderValue的值大于最大值时只会显示设置的最大值，会执行一次change
     }
     sliderValue.value = e;
   };
 
   const handleAfterChange = async () => {
     unref(sliderEl)?.blur();
+    if (unref(sliderValue) == unref(afterValue)) return;
+    sliderValue.value = afterValue.value; //这一步是因为当我们是点击不是拖动时候，会让值更新不了，所以需要赋值一次
+  };
+
+  const { createMessage } = useMessage();
+
+  // 获取小数
+  const getFloatPart = (number: string | number) => {
+    const isLessZero = Number(number) < 0;
+    number = number.toString();
+    const floatPartStartIndex = number.indexOf('.');
+    const value = ~floatPartStartIndex
+      ? `${isLessZero ? '-' : ''}0.${number.substring(floatPartStartIndex + 1)}`
+      : '0';
+    return Number(value);
+  };
+
+  const getArray = (values) => {
+    const str = values.replace(/\s+/g, '');
+    const array: any = [];
+
+    for (let i = 0; i < str.length; i += 4) {
+      const chunk = parseInt(str.substring(i, i + 4), 16);
+      array.push(chunk);
+    }
+    return array;
+  };
+
+  const getSendValue = async (value: number) => {
+    const { extensionDesc, codeType, deviceCode, customCommand } = unref(getDesign) || {};
+    const { transportType } = customCommand || {};
+    const { registerAddress, actionType, zoomFactor } = extensionDesc || {};
+    const newZoomValue = zoomFactor ? Number(zoomFactor) : 1;
+    if (transportType == 'TCP' && codeType == TaskTypeEnum.MODBUS_RTU) {
+      if (!deviceCode) {
+        createMessage.warning('当前设备没有设置地址码');
+        return;
+      }
+      const modbusForm = ref({
+        crc: 'CRC_16_LOWER',
+        deviceCode: deviceCode,
+        method: actionType == '16' ? '10' : actionType,
+        registerAddress,
+        registerNumber: 1,
+        registerValues: [value],
+      }) as any;
+      if (!actionType) {
+        createMessage.warning('当前物模型扩展描述没有填写');
+        return;
+      }
+      if (actionType == '06') {
+        const newValue = Math.trunc(value) * newZoomValue + getFloatPart(value) * newZoomValue;
+        if (newValue % 1 != 0) {
+          createMessage.warning(`值必须是整数,缩放因子为${unref(newZoomValue)}`);
+          return;
+        }
+
+        if (newValue > 65535) {
+          createMessage.warning(`值不能超过65535,缩放因子是${unref(newZoomValue)}`);
+          return;
+        }
+        modbusForm.value.registerValues = [newValue];
+      }
+      if (actionType == '05') {
+        if (Number(value) != 0 || Number(value) != 1) {
+          createMessage.warning(`当前物模型仅支持值为0和1`);
+          return;
+        }
+      }
+      if (actionType == '16' || actionType == '10') {
+        const regex = /^-?\d+(\.\d{0,2})?$/;
+        const values =
+          Math.trunc(value) * unref(newZoomValue) + getFloatPart(value) * unref(newZoomValue);
+        if (!regex.test(values as any)) {
+          createMessage.warning(`值精确到两位小数,缩放因子是${unref(newZoomValue)}`);
+          return;
+        }
+        const newValue = values == 0 ? [0, 0] : getArray(SingleToHex(values));
+        modbusForm.value.registerValues = newValue;
+        modbusForm.value.registerNumber = 2;
+        modbusForm.value.method = '10';
+      }
+      const sendValue = await genModbusCommand(unref(modbusForm));
+      return sendValue;
+    }
   };
 
   const handleBlur = async () => {
     if (unref(oldSliderValue) !== unref(sliderValue)) {
-      console.log('effect');
-      const flag = await sendCommand(props.config.option, unref(sliderValue));
+      const { codeType, customCommand } = unref(getDesign) || {};
+      const { transportType } = customCommand || {};
+      const sendValue = ref<any>(unref(sliderValue));
+      if (transportType == 'TCP' && codeType == TaskTypeEnum.MODBUS_RTU) {
+        sendValue.value = await getSendValue(unref(sliderValue));
+      }
+      const flag = await sendCommand(props.config.option, unref(sendValue), true);
       flag
         ? ((sliderValue.value = unref(sliderValue)),
           (oldSliderValue.value = sliderValue.value),
@@ -90,8 +207,8 @@
             :style="{ '--slider-color': getDesign.controlBarColor }"
             class="no-drag"
             :value="sliderValue"
-            :min="sMin"
-            :max="sMax"
+            :min="getDesign.minNumber"
+            :max="getDesign.maxNumber"
             @change="handleChange"
             @afterChange="handleAfterChange"
             @blur="handleBlur"

@@ -32,7 +32,12 @@
         transportType: value.transportType,
         service: value.service,
         command: value.command,
+        openService: value.openService,
+        closeService: value.closeService,
+        openCommand: value.openCommand,
+        closeCommand: value.closeCommand,
         commandType: value.commandType,
+        callType: value.callType,
       },
     };
     return value;
@@ -42,10 +47,15 @@
     const { customCommand } = record;
     return setFieldsValue({
       ...record,
-      transportType: customCommand?.transportType,
-      service: customCommand?.service,
-      command: customCommand?.command,
-      commandType: customCommand?.commandType,
+      transportType: customCommand?.transportType || (record as Recordable).transportType,
+      service: customCommand?.service || (record as Recordable).service,
+      openService: customCommand?.openService || (record as Recordable).openService,
+      closeService: customCommand?.closeService || (record as Recordable).closeService,
+      openCommand: customCommand?.openCommand || (record as Recordable).openCommand,
+      closeCommand: customCommand?.closeCommand || (record as Recordable).closeCommand,
+      command: customCommand?.command || (record as Recordable).command,
+      commandType: customCommand?.commandType || (record as Recordable).commandType,
+      callType: customCommand?.callType || (record as Recordable).callType,
     } as unknown as Partial<CommonDataSourceBindValueType>);
   };
 

 <script lang="ts" setup>
-  import {
-    ComponentPropsConfigType,
-    MultipleDataFetchUpdateFn,
-  } from '/@/views/visual/packages/index.type';
+  import { ComponentPropsConfigType } 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';
@@ -12,17 +8,22 @@
   import { useSendCommand } from '../../../hook/useSendCommand';
   import { unref } from 'vue';
   import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
+  import { MultipleDataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
+  import { useMultipleDataFetch } from '../../../hook/socket/useSocket';
+  import { useReceiveMessage } from '../../../hook/useReceiveMessage';
+  import { useReceiveValue } from '../../../hook/useReceiveValue';
+  import { DataSource } from '/@/views/visual/palette/types';
+  import { getSendValues, CommandTypeEnumLIst } from '../config';
 
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;
   }>();
 
-  const checked = ref(false);
-
   const svgList = ref<any>([
     {
       value: 26.2,
-      name: 'wendu',
+      deviceName: '光照设备',
+      attributeName: '光照',
       icon: 'zongfushe',
       unit: 'kw',
       iconColor: '#367BFF',
@@ -32,7 +33,8 @@
     },
     {
       value: 53.7,
-      name: 'shidu',
+      deviceName: '风机设备',
+      attributeName: '风机',
       icon: 'guangzhaoqiangdu',
       unit: '℃',
       iconColor: '#FFA000',
@@ -53,42 +55,77 @@
     } = persetOption || {};
     return {
       dataSource: dataSource.map((item) => {
-        const { fontColor, icon, iconColor, unit } = item.componentInfo;
-        const { attribute, attributeRename } = item;
+        const { fontColor, icon, iconColor, unit, showDeviceName } = item.componentInfo;
+        const {
+          attribute,
+          attributeRename,
+          attributeName,
+          deviceId,
+          deviceName,
+          deviceRename,
+          commandType,
+          extensionDesc,
+          codeType,
+          deviceCode,
+          customCommand,
+        } = item;
         return {
           unit: unit ?? persetUnit,
           fontColor: fontColor ?? persetFontColor,
           icon: icon ?? persetIcon,
           iconColor: iconColor ?? persetIconColor,
-          attribute: attribute || attributeRename,
-          attributeRename,
+          attribute: attribute,
+          attributeName: attributeRename || attributeName,
+          showDeviceName,
+          deviceName: deviceRename || deviceName,
+          id: deviceId,
+          extensionDesc: extensionDesc ? JSON.parse(extensionDesc) : {},
+          commandType,
+          codeType,
+          deviceCode,
+          customCommand,
         };
       }),
     };
   });
 
-  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 { loading, sendCommand } = useSendCommand();
+  const handleChange = async (index: number, checked: Boolean) => {
+    const { heightPx, itemHeightRatio, itemWidthRatio, mode, widthPx, dataSource } =
+      props.config.option;
+    const data = {
+      ...dataSource?.[index],
+      heightPx,
+      itemHeightRatio,
+      itemWidthRatio,
+      mode,
+      widthPx,
+    } as DataSource;
+    const { values, isModbusCommand, sendValue } =
+      (await getSendValues(data, unref(getDesign).dataSource[index], checked)) || {};
+
+    const flag = await sendCommand(values, isModbusCommand ? sendValue : checked, isModbusCommand);
+    if (!flag) controlList.value[index].checked = !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,
-      };
+  const { forEachGroupMessage } = useReceiveMessage();
+  const { getNumberValue } = useReceiveValue();
+
+  const controlList = ref(
+    props.config.option.dataSource
+      ? unref(getDesign).dataSource.map((item) => {
+          return { ...item, checked: false };
+        })
+      : svgList
+  );
+
+  const updateFn: MultipleDataFetchUpdateFn = async (message, deviceId, attribute) => {
+    forEachGroupMessage(message, deviceId, attribute, (attribute, value) => {
+      controlList.value.forEach((item) => {
+        if (item.id === deviceId && item.attribute === attribute && value) {
+          item.checked = Boolean(getNumberValue(value));
+        }
+      });
     });
   };
 
@@ -101,7 +138,7 @@
     <DeviceName :config="config" />
     <div
       style="width: 86%"
-      v-for="(item, index) in svgList"
+      v-for="(item, index) in controlList"
       :key="item.id"
       class="flex justify-between items-center"
     >
@@ -113,10 +150,22 @@
           :style="{ color: item.iconColor }"
         />
 
-        <div class="text-gray-500 text-lg truncate ml-6">{{ item.attribute || '温度' }}</div>
+        <div
+          class="text-gray-500 truncate ml-6"
+          :style="{ fontSize: getRatio ? '18px' : getRatio * 18 + 'px' }"
+          >{{
+            `${item.deviceName} - ${
+              item.commandType ? CommandTypeEnumLIst[item.commandType].name : item.attributeName
+            }`
+          }}</div
+        >
       </div>
 
-      <Switch v-model:checked="item.checked" :loading="loading" @change="handleChange(index)" />
+      <Switch
+        v-model:checked="item.checked"
+        :loading="loading"
+        @change="handleChange(index, item.checked)"
+      />
     </div>
   </main>
 </template>

+import { ref, unref } from 'vue';
+import { TransportTypeEnum } from '/@/views/device/profiles/components/TransportDescript/const';
+import { CommandTypeEnum } from '/@/views/rule/linkedge/config/config.data';
+import { TaskTypeEnum } from '/@/views/task/center/config';
+import { genModbusCommand } from '/@/api/task';
+import { useMessage } from '/@/hooks/web/useMessage';
+import { SingleToHex } from '/@/views/device/list/cpns/tabs/ObjectModelCommandDeliveryModal/config';
+
+const getArray = (values) => {
+  const str = values.replace(/\s+/g, '');
+  const array: any = [];
+
+  for (let i = 0; i < str.length; i += 4) {
+    const chunk = parseInt(str.substring(i, i + 4), 16);
+    array.push(chunk);
+  }
+  return array;
+};
+
+export const getSendValues = async (option, getDesign, checked) => {
+  const values: any = option;
+  const isModbusCommand = ref<boolean>(false); //判断是否是TCP设备-> 且设备标识符是modeBUs，切选择是下发命令类型是属性
+  const { extensionDesc, commandType, codeType, deviceCode, customCommand } = getDesign || {};
+  const { registerAddress, actionType } = extensionDesc || {};
+  const { openCommand, closeCommand, transportType } = customCommand || {};
+  const modBUS = ref<any>({});
+  const sendValue = ref();
+
+  const { createMessage } = useMessage();
+  //判断是不是TCP类型设备
+  if (transportType === TransportTypeEnum.TCP) {
+    if (
+      //判断TCP下发类型是否是自定义还是服务
+      commandType === CommandTypeEnum.CUSTOM.toString() ||
+      commandType == CommandTypeEnum.SERVICE.toString()
+    ) {
+      values.customCommand.command = checked ? openCommand : closeCommand;
+      values.customCommand.command = values.customCommand.command
+        .replaceAll(/\s/g, '')
+        .toUpperCase();
+    }
+    if (
+      //判断命令下发类型是不是属性 且是modbus
+      commandType === CommandTypeEnum.ATTRIBUTE.toString() &&
+      codeType === TaskTypeEnum.MODBUS_RTU
+    ) {
+      if (!deviceCode) {
+        createMessage.warning('当前设备没有设置地址码');
+        return;
+      }
+      if (!actionType) {
+        createMessage.warning('当前物模型扩展描述没有填写');
+        return;
+      }
+      isModbusCommand.value = true;
+      modBUS.value = {
+        crc: 'CRC_16_LOWER',
+        deviceCode: deviceCode,
+        method: actionType == '16' ? '10' : actionType,
+        registerAddress,
+        registerNumber: 1,
+        registerValues: [Number(checked)],
+      };
+
+      if (actionType == '16' || actionType == '10') {
+        const newValue = Number(checked) == 0 ? [0, 0] : getArray(SingleToHex(Number(checked)));
+        modBUS.value.registerValues = newValue;
+        modBUS.value.registerNumber = 2;
+        modBUS.value.method = '10';
+      }
+
+      sendValue.value = await genModbusCommand(unref(modBUS));
+    }
+  }
+
+  return { values, sendValue: unref(sendValue), isModbusCommand: unref(isModbusCommand) };
+};
+
+export const CommandTypeEnumLIst = {
+  '0': { CUSTOM: 0, name: '自定义' },
+  '1': { CUSTOM: 0, name: '服务' },
+  '2': { CUSTOM: 0, name: '属性' },
+};

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

@@ -12,8 +12,9 @@ import { ComponentConfigFieldEnum } from '/@/views/visual/packages/enum';
 export const option: PublicPresetOptions = {
   [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
   [ComponentConfigFieldEnum.UNIT]: 'm',
+  [ComponentConfigFieldEnum.MAX_NUMBER]: 100,
   [ComponentConfigFieldEnum.FONT_COLOR]: '#fff',
-  [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
+  [ComponentConfigFieldEnum.SHOW_TIME]: false,
   [ComponentConfigFieldEnum.FLOWMETER_CONFIG]: {
     [ComponentConfigFieldEnum.BACKGROUND_COLOR]: '#8badcb',
     [ComponentConfigFieldEnum.WAVE_FIRST]: '#4579e2',

@@ -4,7 +4,7 @@
   import { PublicFormInstaceType } from '/@/views/visual/dataSourceBindPanel/index.type';
   import { option } from './config';
   import { ComponentInfo } from '/@/views/visual/palette/types';
-  import { toRaw } from 'vue';
+  import { nextTick, toRaw } from 'vue';
 
   const [register, { getFieldsValue, setFieldsValue, resetFields }] = useForm({
     schemas: [
@@ -50,11 +50,38 @@
         defaultValue: option.unit,
       },
       {
+        field: ComponentConfigFieldEnum.MAX_NUMBER,
+        label: '最大值',
+        component: 'InputNumber',
+        defaultValue: 100,
+        componentProps: ({ formActionType }) => {
+          const { setFieldsValue } = formActionType;
+          return {
+            placeholder: '请输入最大值',
+            min: 100,
+            onChange: async (e) => {
+              if (!e) {
+                await nextTick();
+                setFieldsValue({
+                  [ComponentConfigFieldEnum.MAX_NUMBER]: 100,
+                });
+              }
+            },
+          };
+        },
+      },
+      {
         field: ComponentConfigFieldEnum.SHOW_DEVICE_NAME,
         label: '显示设备名称',
         component: 'Checkbox',
         defaultValue: option.showDeviceName,
       },
+      {
+        field: ComponentConfigFieldEnum.SHOW_TIME,
+        label: '显示时间',
+        component: 'Checkbox',
+        defaultValue: option.showDeviceName,
+      },
     ],
     showActionButtonGroup: false,
     labelWidth: 120,

@@ -5,6 +5,6 @@ const componentKeys = useComponentKeys('CircleFlowmeter');
 
 export const CircleFlowmeterConfig: ConfigType = {
   ...componentKeys,
-  title: '流量计2',
+  title: '计量计2',
   package: PackagesCategoryEnum.FLOWMETER,
 };

 <script lang="ts" setup>
-  import { ComponentPropsConfigType, DataFetchUpdateFn } from '/@/views/visual/packages/index.type';
+  import { ComponentPropsConfigType } from '/@/views/visual/packages/index.type';
   import { option } from './config';
-  import { useDataFetch } from '/@/views/visual/packages/hook/useSocket';
   import { computed } from 'vue';
   import { ref } from 'vue';
   import { unref } from 'vue';
   import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
   import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
+  import { useDataFetch } from '../../../hook/socket/useSocket';
+  import { DataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
 
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;
@@ -19,12 +20,14 @@
   const getDesign = computed(() => {
     const { option, persetOption } = props.config;
     const { componentInfo, attribute, attributeName, attributeRename } = option;
-    const { flowmeterConfig, unit, fontColor } = componentInfo || {};
+    const { flowmeterConfig, unit, fontColor, showTime, maxNumber } = componentInfo || {};
     const { backgroundColor, waveFirst, waveSecond, waveThird } = flowmeterConfig || {};
     const {
       flowmeterConfig: presetFlowmeterConfig,
       unit: persetUnit,
       fontColor: presetFontColor,
+      showTime: persetShowTime,
+      maxNumber: persetMaxNumber,
     } = persetOption || {};
     const {
       backgroundColor: presetBackgroundColor,
@@ -40,6 +43,8 @@
       unit: unit ?? persetUnit,
       fontColor: fontColor ?? presetFontColor,
       attribute: attributeRename || attributeName || attribute,
+      showTime: showTime ?? persetShowTime,
+      maxNumber: maxNumber ?? persetMaxNumber,
     };
   });
 
@@ -55,17 +60,26 @@
 
   const getWaveHeight = computed(() => {
     const value = unref(currentValue);
-    return value <= 0 ? 0 : -value - 15;
+    const size = ref(1);
+    if (unref(getDesign).maxNumber > 100) {
+      size.value = 100 / unref(getDesign).maxNumber;
+    }
+    return value * unref(size) <= 0 ? 0 : -(value * unref(size)) - 15;
   });
 
   const getHeight = computed(() => {
     const value = unref(currentValue);
-    return value >= 100 ? 0 : 100 - value + 10;
+    const size = ref(1);
+    if (unref(getDesign).maxNumber > 100) {
+      size.value = 100 / unref(getDesign).maxNumber;
+    }
+    return value * unref(size) >= 100 ? 0 : 100 - value * unref(size) + 10;
   });
 
   const updateFn: DataFetchUpdateFn = (message, attribute) => {
     const { data = {} } = message;
     const [latest] = data[attribute] || [];
+    if (!latest.length) return;
     const [timespan, value] = latest;
     time.value = timespan;
     currentValue.value = Number(value);
@@ -75,7 +89,10 @@
 </script>
 
 <template>
-  <main class="w-full h-full flex flex-col justify-center items-center relative">
+  <main
+    class="w-full h-full flex flex-col justify-center items-center relative"
+    :class="!getDesign.showTime && 'p-5'"
+  >
     <DeviceName :config="config" />
     <svg
       class="waves-rect"
@@ -120,7 +137,7 @@
     <div class="text-gray-500 text-sm truncate" style="flex: 0 0 20px">{{
       getDesign.attribute || '属性'
     }}</div>
-    <UpdateTime :time="time" />
+    <UpdateTime v-show="getDesign.showTime" :time="time" />
   </main>
 </template>
 

@@ -11,7 +11,9 @@ import { ComponentConfigFieldEnum } from '/@/views/visual/packages/enum';
 
 export const option: PublicPresetOptions = {
   [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
+  [ComponentConfigFieldEnum.SHOW_TIME]: false,
   [ComponentConfigFieldEnum.UNIT]: 'm',
+  [ComponentConfigFieldEnum.MAX_NUMBER]: 100,
   [ComponentConfigFieldEnum.FLOWMETER_CONFIG]: {
     [ComponentConfigFieldEnum.BACKGROUND_COLOR]: '#8badcb',
     [ComponentConfigFieldEnum.WAVE_FIRST]: '#4579e2',

@@ -4,7 +4,7 @@
   import { PublicFormInstaceType } from '/@/views/visual/dataSourceBindPanel/index.type';
   import { option } from './config';
   import { ComponentInfo } from '/@/views/visual/palette/types';
-  import { toRaw } from 'vue';
+  import { nextTick, toRaw } from 'vue';
 
   const [register, { getFieldsValue, setFieldsValue, resetFields }] = useForm({
     schemas: [
@@ -49,12 +49,45 @@
         component: 'Input',
         defaultValue: option.unit,
       },
+      // {
+      //   field: ComponentConfigFieldEnum.MIN_NUMBER,
+      //   label: '最小值',
+      //   component: 'InputNumber',
+      //   defaultValue: 0,
+      // },
+      {
+        field: ComponentConfigFieldEnum.MAX_NUMBER,
+        label: '最大值',
+        component: 'InputNumber',
+        defaultValue: 100,
+        componentProps: ({ formActionType }) => {
+          const { setFieldsValue } = formActionType;
+          return {
+            placeholder: '请输入最大值',
+            min: 100,
+            onChange: async (e) => {
+              if (!e) {
+                await nextTick();
+                setFieldsValue({
+                  [ComponentConfigFieldEnum.MAX_NUMBER]: 100,
+                });
+              }
+            },
+          };
+        },
+      },
       {
         field: ComponentConfigFieldEnum.SHOW_DEVICE_NAME,
         label: '显示设备名称',
         component: 'Checkbox',
         defaultValue: option.showDeviceName,
       },
+      {
+        field: ComponentConfigFieldEnum.SHOW_TIME,
+        label: '显示时间',
+        component: 'Checkbox',
+        defaultValue: option.showTime,
+      },
     ],
     showActionButtonGroup: false,
     labelWidth: 120,

@@ -5,6 +5,6 @@ const componentKeys = useComponentKeys('RectFlowmeter');
 
 export const RectFlowmeteConfig: ConfigType = {
   ...componentKeys,
-  title: '流量计1',
+  title: '计量计1',
   package: PackagesCategoryEnum.FLOWMETER,
 };

 <script lang="ts" setup>
-  import { ComponentPropsConfigType, DataFetchUpdateFn } from '/@/views/visual/packages/index.type';
+  import { ComponentPropsConfigType } from '/@/views/visual/packages/index.type';
   import { option } from './config';
-  import { useDataFetch } from '/@/views/visual/packages/hook/useSocket';
   import { computed } from 'vue';
   import { ref } from 'vue';
   import { unref } from 'vue';
   import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
   import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
+  import { useDataFetch } from '../../../hook/socket/useSocket';
+  import { DataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
 
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;
@@ -19,12 +20,14 @@
   const getDesign = computed(() => {
     const { option, persetOption } = props.config;
     const { componentInfo, attribute, attributeName, attributeRename } = option;
-    const { flowmeterConfig, unit, fontColor } = componentInfo || {};
+    const { flowmeterConfig, unit, fontColor, showTime, maxNumber } = componentInfo || {};
     const { backgroundColor, waveFirst, waveSecond, waveThird } = flowmeterConfig || {};
     const {
       flowmeterConfig: presetFlowmeterConfig,
       unit: persetUnit,
       fontColor: presetFontColor,
+      showTime: persetShowTime,
+      maxNumber: persetMaxNumber,
     } = persetOption || {};
     const {
       backgroundColor: presetBackgroundColor,
@@ -40,23 +43,34 @@
       unit: unit ?? persetUnit,
       fontColor: fontColor ?? presetFontColor,
       attribute: attributeRename || attributeName || attribute,
+      showTime: showTime ?? persetShowTime,
+      maxNumber: maxNumber ?? persetMaxNumber,
     };
   });
 
   const getWaveHeight = computed(() => {
     const value = unref(currentValue);
-    return value <= 0 ? 0 : -value - 15;
+    const size = ref(1);
+    if (unref(getDesign).maxNumber > 100) {
+      size.value = 100 / unref(getDesign).maxNumber;
+    }
+    return value * unref(size) <= 0 ? 0 : -(value * unref(size)) - 15;
   });
 
   const getHeight = computed(() => {
     const value = unref(currentValue);
-    return value >= 100 ? 0 : 100 - value + 10;
+    const size = ref(1);
+    if (unref(getDesign).maxNumber > 100) {
+      size.value = 100 / unref(getDesign).maxNumber;
+    }
+    return value * unref(size) >= 100 ? 0 : 100 - value * unref(size) + 10;
   });
 
   const updateFn: DataFetchUpdateFn = (message, attribute) => {
     const { data = {} } = message;
     const [latest] = data[attribute] || [];
     const [timespan, value] = latest;
+    if (!latest.length) return;
     time.value = timespan;
     currentValue.value = Number(value);
   };
@@ -65,7 +79,10 @@
 </script>
 
 <template>
-  <main class="w-full h-full flex flex-col justify-center items-center relative">
+  <main
+    class="w-full h-full flex flex-col justify-center items-center relative"
+    :class="!getDesign.showTime && 'p-5'"
+  >
     <DeviceName :config="config" />
     <svg
       class="waves-rect"
@@ -113,7 +130,7 @@
     <div class="text-gray-500 text-sm truncate" style="flex: 0 0 20px">{{
       getDesign.attribute || '属性'
     }}</div>
-    <UpdateTime :time="time" />
+    <UpdateTime v-show="getDesign.showTime" :time="time" />
   </main>
 </template>
 

@@ -12,6 +12,7 @@ import { ComponentConfigFieldEnum } from '/@/views/visual/packages/enum';
 export const option: PublicPresetOptions = {
   [ComponentConfigFieldEnum.FONT_COLOR]: '#',
   [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
+  [ComponentConfigFieldEnum.SHOW_TIME]: false,
 };
 
 export default class Config extends PublicConfigClass implements CreateComponentType {

@@ -19,6 +19,11 @@
         label: '显示设备名称',
         component: 'Checkbox',
       },
+      {
+        field: ComponentConfigFieldEnum.SHOW_TIME,
+        label: '显示时间',
+        component: 'Checkbox',
+      },
     ],
     showActionButtonGroup: false,
     labelWidth: 120,

 <script lang="ts" setup>
-  import { ComponentPropsConfigType, DataFetchUpdateFn } from '/@/views/visual/packages/index.type';
+  import { ComponentPropsConfigType } from '/@/views/visual/packages/index.type';
   import { option } from './config';
-  import { useDataFetch } from '/@/views/visual/packages/hook/useSocket';
   import { ref } from 'vue';
   import { computed } from 'vue';
   import { unref } from 'vue';
   import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
   import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
+  import { useDataFetch } from '../../../hook/socket/useSocket';
+  import { DataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
 
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;
@@ -36,18 +37,20 @@
 
   const getDesign = computed(() => {
     const { persetOption, option } = props.config;
-    const { fontColor: presetFontColor } = persetOption || {};
+    const { fontColor: presetFontColor, showTime: persetShowTime } = persetOption || {};
     const { componentInfo, attribute, attributeName, attributeRename } = option || {};
-    const { fontColor } = componentInfo || {};
+    const { fontColor, showTime } = componentInfo || {};
     return {
       fontColor: fontColor ?? presetFontColor,
       attribute: attributeRename || attributeName || attribute,
+      showTime: showTime ?? persetShowTime,
     };
   });
 
   const updateFn: DataFetchUpdateFn = (message, attribute) => {
     const { data = {} } = message;
     const [latest] = data[attribute] || [];
+    if (!latest.length) return;
     const [timespan, value] = latest;
     time.value = timespan;
 
@@ -58,7 +61,10 @@
 </script>
 
 <template>
-  <main class="w-full h-full flex flex-col justify-center items-center relative">
+  <main
+    class="w-full h-full flex flex-col justify-center items-center relative"
+    :class="!getDesign.showTime && 'p-5'"
+  >
     <DeviceName :config="config" />
     <svg class="flowmeter-thermometer" viewBox="0 0 200 250" xmlns="http://www.w3.org/2000/svg">
       <defs>
@@ -255,7 +261,7 @@
     <div class="text-gray-500 text-sm truncate" style="flex: 0 0 20px">{{
       getDesign.attribute || '属性'
     }}</div>
-    <UpdateTime :time="time" />
+    <UpdateTime v-show="getDesign.showTime" :time="time" />
   </main>
 </template>
 

@@ -13,6 +13,7 @@ export const option: PublicPresetOptions = {
   [ComponentConfigFieldEnum.FONT_COLOR]: '#000',
   [ComponentConfigFieldEnum.UNIT]: 'kw/h',
   [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
+  [ComponentConfigFieldEnum.SHOW_TIME]: false,
 };
 
 export default class Config extends PublicConfigClass implements CreateComponentType {

@@ -28,6 +28,12 @@
         component: 'Checkbox',
         defaultValue: option.showDeviceName,
       },
+      {
+        field: ComponentConfigFieldEnum.SHOW_TIME,
+        label: '显示时间',
+        component: 'Checkbox',
+        defaultValue: option.showDeviceName,
+      },
     ],
     showActionButtonGroup: false,
     labelWidth: 120,

 <script lang="ts" setup>
-  import { ComponentPropsConfigType, DataFetchUpdateFn } from '/@/views/visual/packages/index.type';
+  import { ComponentPropsConfigType } from '/@/views/visual/packages/index.type';
   import { option } from './config';
-  import { useDataFetch } from '/@/views/visual/packages/hook/useSocket';
   import { ref, computed, unref } from 'vue';
   import { Space } from 'ant-design-vue';
   import { useComponentScale } from '/@/views/visual/packages/hook/useComponentScale';
   import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
   import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
+  import { useDataFetch } from '../../../hook/socket/useSocket';
+  import { DataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
 
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;
@@ -24,7 +25,6 @@
 
     if (_value.length > max) return ''.padStart(max, '9');
     if (_value.length < max) return _value.padStart(max, '0');
-
     return _value;
   });
 
@@ -37,6 +37,8 @@
 
     let _value = number.toString().split('.')[1] || '0';
 
+    if (_value.length == 1) return _value + '0';
+
     if (_value.length < keepNumber) return ''.padStart(keepNumber, '0');
 
     if (_value.length > keepNumber) return _value.slice(0, 2);
@@ -47,18 +49,24 @@
   const getDesign = computed(() => {
     const { option, persetOption } = props.config;
     const { componentInfo, attribute, attributeRename, attributeName } = option;
-    const { fontColor: presetFontColor, unit: presetUnit } = persetOption || {};
-    const { unit, fontColor } = componentInfo || {};
+    const {
+      fontColor: presetFontColor,
+      unit: presetUnit,
+      showTime: persetShowTime,
+    } = persetOption || {};
+    const { unit, fontColor, showTime } = componentInfo || {};
     return {
       unit: unit ?? presetUnit,
       fontColor: fontColor ?? presetFontColor,
       attribute: attributeRename || attributeName || attribute,
+      showTime: showTime ?? persetShowTime,
     };
   });
 
   const updateFn: DataFetchUpdateFn = (message, attribute) => {
     const { data = {} } = message;
     const [latest] = data[attribute] || [];
+    if (!latest.length) return;
     const [timespan, value] = latest;
     time.value = timespan;
     currentValue.value = isNaN(value as unknown as number) ? 0 : Number(value);
@@ -70,7 +78,10 @@
 </script>
 
 <template>
-  <main class="w-full h-full flex flex-col justify-center items-center">
+  <main
+    class="w-full h-full flex flex-col justify-center items-center"
+    :class="!getDesign.showTime && 'p-5'"
+  >
     <div class="flex flex-col w-full h-full">
       <DeviceName class="text-center" :config="config" />
 
@@ -133,7 +144,7 @@
         <span>{{ getDesign.attribute || '电表' }}</span>
       </div>
 
-      <UpdateTime :time="time" />
+      <UpdateTime v-show="getDesign.showTime" :time="time" />
     </div>
   </main>
 </template>

@@ -22,6 +22,8 @@ export enum GradientColor {
 export const option: PublicPresetOptions = {
   [ComponentConfigFieldEnum.FONT_COLOR]: '#FD7347',
   [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
+  [ComponentConfigFieldEnum.MAX_NUMBER]: 100,
+  [ComponentConfigFieldEnum.SHOW_TIME]: false,
   [ComponentConfigFieldEnum.UNIT]: '℃',
   [ComponentConfigFieldEnum.POINTER_COLOR]: '#15E2C6',
   [ComponentConfigFieldEnum.INSTRUMENT_PANEL_COLOR]: '#61D4C5',

 <script lang="ts" setup>
+  import { nextTick } from 'vue';
   import { ComponentConfigFieldEnum } from '../../../enum';
   import { option, Gradient, GradientColor } from './config';
   import { useForm, BasicForm } from '/@/components/Form';
@@ -22,18 +23,26 @@
         defaultValue: option.fontColor,
       },
       {
-        field: ComponentConfigFieldEnum.UNIT,
-        label: '数值单位',
-        component: 'Input',
-        defaultValue: option.unit,
-      },
-      {
         field: ComponentConfigFieldEnum.POINTER_COLOR,
         label: '指针颜色',
         component: 'ColorPicker',
         changeEvent: 'update:value',
         defaultValue: option.pointerColor,
       },
+      {
+        field: ComponentConfigFieldEnum.FIRST_PHASE_COLOR,
+        label: '起始颜色',
+        component: 'ColorPicker',
+        changeEvent: 'update:value',
+        defaultValue: GradientColor.FIRST,
+      },
+      {
+        field: ComponentConfigFieldEnum.SECOND_PHASE_COLOR,
+        label: '结尾颜色',
+        component: 'ColorPicker',
+        changeEvent: 'update:value',
+        defaultValue: GradientColor.SECOND,
+      },
       // {
       //   field: ComponentConfigFieldEnum.INSTRUMENT_PANEL_WIDTH,
       //   label: '仪表盘宽度',
@@ -48,18 +57,38 @@
         defaultValue: option.showDeviceName,
       },
       {
-        field: ComponentConfigFieldEnum.FIRST_PHASE_COLOR,
-        label: '起始颜色',
-        component: 'ColorPicker',
-        changeEvent: 'update:value',
-        defaultValue: GradientColor.FIRST,
+        field: ComponentConfigFieldEnum.SHOW_TIME,
+        label: '显示时间',
+        component: 'Checkbox',
+        defaultValue: option.showTime,
       },
+
       {
-        field: ComponentConfigFieldEnum.SECOND_PHASE_COLOR,
-        label: '结尾颜色',
-        component: 'ColorPicker',
-        changeEvent: 'update:value',
-        defaultValue: GradientColor.SECOND,
+        field: ComponentConfigFieldEnum.UNIT,
+        label: '数值单位',
+        component: 'Input',
+        defaultValue: option.unit,
+      },
+      {
+        field: ComponentConfigFieldEnum.MAX_NUMBER,
+        label: '最大值',
+        component: 'InputNumber',
+        defaultValue: 100,
+        componentProps: ({ formActionType }) => {
+          const { setFieldsValue } = formActionType;
+          return {
+            placeholder: '请输入最大值',
+            min: 100,
+            onChange: async (e) => {
+              if (!e) {
+                await nextTick();
+                setFieldsValue({
+                  [ComponentConfigFieldEnum.MAX_NUMBER]: 100,
+                });
+              }
+            },
+          };
+        },
       },
     ],
     showActionButtonGroup: false,
@@ -88,13 +117,16 @@
       fontColor: item[ComponentConfigFieldEnum.FONT_COLOR],
       unit: item[ComponentConfigFieldEnum.UNIT],
       showDeviceName: item[ComponentConfigFieldEnum.SHOW_DEVICE_NAME],
+      showTime: item[ComponentConfigFieldEnum.SHOW_TIME],
       pointerColor: item[ComponentConfigFieldEnum.POINTER_COLOR],
+      maxNumber: item[ComponentConfigFieldEnum.MAX_NUMBER],
     } as ComponentInfo;
   };
 
   const setFormValues = (data: Recordable) => {
     // return setFieldsValue(data);
-    const { gradientInfo, unit, fontColor, showDeviceName, pointerColor } = data;
+    const { gradientInfo, unit, fontColor, showDeviceName, pointerColor, showTime, maxNumber } =
+      data;
     const firstRecord = gradientInfo.find((item) => item.key === Gradient.FIRST);
     const secondRecord = gradientInfo.find((item) => item.key === Gradient.SECOND);
 
@@ -102,11 +134,13 @@
       [ComponentConfigFieldEnum.UNIT]: unit,
       [ComponentConfigFieldEnum.FONT_COLOR]: fontColor,
       [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: showDeviceName,
+      [ComponentConfigFieldEnum.SHOW_TIME]: showTime,
       [ComponentConfigFieldEnum.FIRST_PHASE_VALUE]: 0,
       [ComponentConfigFieldEnum.FIRST_PHASE_COLOR]: firstRecord?.color,
       [ComponentConfigFieldEnum.SECOND_PHASE_VALUE]: 1,
       [ComponentConfigFieldEnum.SECOND_PHASE_COLOR]: secondRecord?.color,
       [ComponentConfigFieldEnum.POINTER_COLOR]: pointerColor,
+      [ComponentConfigFieldEnum.MAX_NUMBER]: maxNumber,
     };
     return setFieldsValue(value);
   };

 <script lang="ts" setup>
   import { EChartsOption, ECharts, init } from 'echarts';
   import { unref, ref, onMounted, computed, nextTick } from 'vue';
-  import { useDataFetch } from '../../../hook/useSocket';
-  import { ComponentPropsConfigType, DataFetchUpdateFn } from '../../../index.type';
+  import { ComponentPropsConfigType } from '../../../index.type';
   import { option } from './config';
   import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
   import { useIntervalFn } from '@vueuse/core';
   import { useComponentScale } from '../../../hook/useComponentScale';
   import { isArray } from '/@/utils/is';
   import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
+  import { useDataFetch } from '../../../hook/socket/useSocket';
+  import { DataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
 
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;
@@ -29,9 +30,18 @@
       pointerColor: presetPointerColor,
       instrumentPanelColor: presetInstrumentPanelColor,
       gradientInfo: presetGradientInfo,
+      showTime: persetShowTime,
+      maxNumber: persetMaxNumber,
     } = persetOption || {};
-    const { unit, fontColor, pointerColor, instrumentPanelColor, gradientInfo } =
-      componentInfo || {};
+    const {
+      unit,
+      fontColor,
+      pointerColor,
+      instrumentPanelColor,
+      gradientInfo,
+      showTime,
+      maxNumber,
+    } = componentInfo || {};
     return {
       unit: unit ?? presetUnit,
       fontColor: fontColor ?? presetFontColor,
@@ -39,6 +49,8 @@
       pointerColor: pointerColor ?? presetPointerColor,
       instrumentPanelColor: instrumentPanelColor ?? presetInstrumentPanelColor,
       gradientInfo: gradientInfo ?? presetGradientInfo,
+      showTime: showTime ?? persetShowTime,
+      maxNumber: maxNumber || persetMaxNumber,
     };
   });
 
@@ -46,13 +58,6 @@
     if (!isArray(array)) {
       return;
     }
-    // const item: any = [];
-    // array.forEach((value, index) => {
-    //   item[index] =
-    //     index == 0
-    //       ? { offset: value.value == 100 ? 1 : 0, color: value.color }
-    //       : { offset: Number((value.value / 100).toFixed(1)), color: value.color };
-    // });
     const colorList = array.map((item) => ({
       offset: item.value,
       color: item.color,
@@ -61,7 +66,7 @@
   };
 
   const options = (): EChartsOption => {
-    const { unit, fontColor, pointerColor, gradientInfo } = unref(getDesign);
+    const { unit, fontColor, pointerColor, gradientInfo, maxNumber } = unref(getDesign);
 
     const instrumentPanelColor = getStageColor(gradientInfo);
     // getStageColor(gradientInfo);
@@ -69,6 +74,8 @@
       series: [
         {
           type: 'gauge',
+          min: 0,
+          max: maxNumber,
           center: ['50%', '60%'],
           startAngle: 150,
           endAngle: 30,
@@ -159,6 +166,7 @@
   const updateFn: DataFetchUpdateFn = (message, attribute) => {
     const { data = {} } = message;
     const [latest] = data[attribute] || [];
+    if (!latest.length) return;
     const [timespan, value] = latest;
     time.value = timespan;
     updateChart(isNaN(value as unknown as number) ? 0 : Number(value));
@@ -203,12 +211,18 @@
 </script>
 
 <template>
-  <main class="w-full h-full flex flex-col justify-center items-center">
+  <main
+    class="w-full h-full flex flex-col justify-center items-center"
+    :class="!getDesign.showTime && 'p-5'"
+  >
     <DeviceName :config="config" />
-    <div ref="chartRefEl" class="flex-1 w-full h-full"> </div>
-    <div class="text-gray-500 text-xs text-center truncate">{{
-      getDesign.attribute || '湿度'
-    }}</div>
-    <UpdateTime :time="time" />
+    <div class="w-full h-full flex flex-1 flex-col justify-center items-center">
+      <div ref="chartRefEl" class="flex-1 w-full h-6/7 flex flex-col justify-center items-center">
+      </div>
+      <div class="text-gray-500 text-xs text-center truncate">{{
+        getDesign.attribute || '湿度'
+      }}</div>
+    </div>
+    <UpdateTime v-if="getDesign.showTime" :time="time" />
   </main>
 </template>

@@ -20,10 +20,12 @@ export enum GradientColor {
 export const option: PublicPresetOptions = {
   [ComponentConfigFieldEnum.FONT_COLOR]: '#FD7347',
   [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
+  [ComponentConfigFieldEnum.SHOW_TIME]: false,
   [ComponentConfigFieldEnum.PROGRESS_BAR_CIRCLE]: false,
   [ComponentConfigFieldEnum.UNIT]: '℃',
   [ComponentConfigFieldEnum.POINTER_COLOR]: '#15E2C6',
   [ComponentConfigFieldEnum.INSTRUMENT_PANEL_COLOR]: '#61D4C5',
+  [ComponentConfigFieldEnum.MAX_NUMBER]: 100,
   [ComponentConfigFieldEnum.GRADIENT_INFO]: [
     { key: Gradient.FIRST, value: 0, color: GradientColor.FIRST },
     { key: Gradient.SECOND, value: 1, color: GradientColor.SECOND },

 <script lang="ts" setup>
+  import { nextTick } from 'vue';
   import { ComponentConfigFieldEnum } from '../../../enum';
   import { option, Gradient, GradientColor } from './config';
   import { useForm, BasicForm } from '/@/components/Form';
@@ -28,18 +29,6 @@
         defaultValue: option.unit,
       },
       {
-        field: ComponentConfigFieldEnum.SHOW_DEVICE_NAME,
-        label: '显示设备名称',
-        component: 'Checkbox',
-        defaultValue: option.showDeviceName,
-      },
-      {
-        field: ComponentConfigFieldEnum.PROGRESS_BAR_CIRCLE,
-        label: '显示进度条圆形',
-        component: 'Checkbox',
-        defaultValue: option.progressBarCircle,
-      },
-      {
         field: ComponentConfigFieldEnum.FIRST_PHASE_COLOR,
         label: '起始颜色',
         component: 'ColorPicker',
@@ -53,6 +42,45 @@
         changeEvent: 'update:value',
         defaultValue: GradientColor.SECOND,
       },
+      {
+        field: ComponentConfigFieldEnum.PROGRESS_BAR_CIRCLE,
+        label: '显示进度条圆形',
+        component: 'Checkbox',
+        defaultValue: option.progressBarCircle,
+      },
+      {
+        field: ComponentConfigFieldEnum.SHOW_DEVICE_NAME,
+        label: '显示设备名称',
+        component: 'Checkbox',
+        defaultValue: option.showDeviceName,
+      },
+      {
+        field: ComponentConfigFieldEnum.SHOW_TIME,
+        label: '显示时间',
+        component: 'Checkbox',
+        defaultValue: option.showTime,
+      },
+      {
+        field: ComponentConfigFieldEnum.MAX_NUMBER,
+        label: '最大值',
+        component: 'InputNumber',
+        defaultValue: 100,
+        componentProps: ({ formActionType }) => {
+          const { setFieldsValue } = formActionType;
+          return {
+            placeholder: '请输入最大值',
+            min: 100,
+            onChange: async (e) => {
+              if (!e) {
+                await nextTick();
+                setFieldsValue({
+                  [ComponentConfigFieldEnum.MAX_NUMBER]: 100,
+                });
+              }
+            },
+          };
+        },
+      },
     ],
     showActionButtonGroup: false,
     labelWidth: 120,
@@ -80,13 +108,23 @@
       fontColor: item[ComponentConfigFieldEnum.FONT_COLOR],
       unit: item[ComponentConfigFieldEnum.UNIT],
       showDeviceName: item[ComponentConfigFieldEnum.SHOW_DEVICE_NAME],
+      showTime: item[ComponentConfigFieldEnum.SHOW_TIME],
       progressBarCircle: item[ComponentConfigFieldEnum.PROGRESS_BAR_CIRCLE],
+      maxNumber: item[ComponentConfigFieldEnum.MAX_NUMBER],
     } as ComponentInfo;
   };
 
   const setFormValues = (data: Recordable) => {
     // return setFieldsValue(data);
-    const { gradientInfo, unit, fontColor, showDeviceName, progressBarCircle } = data;
+    const {
+      gradientInfo,
+      unit,
+      fontColor,
+      showDeviceName,
+      progressBarCircle,
+      showTime,
+      maxNumber,
+    } = data;
     const firstRecord = gradientInfo.find((item) => item.key === Gradient.FIRST);
     const secondRecord = gradientInfo.find((item) => item.key === Gradient.SECOND);
 
@@ -94,11 +132,13 @@
       [ComponentConfigFieldEnum.UNIT]: unit,
       [ComponentConfigFieldEnum.FONT_COLOR]: fontColor,
       [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: showDeviceName,
+      [ComponentConfigFieldEnum.SHOW_TIME]: showTime,
       [ComponentConfigFieldEnum.FIRST_PHASE_VALUE]: 0,
       [ComponentConfigFieldEnum.FIRST_PHASE_COLOR]: firstRecord?.color,
       [ComponentConfigFieldEnum.SECOND_PHASE_VALUE]: 1,
       [ComponentConfigFieldEnum.SECOND_PHASE_COLOR]: secondRecord?.color,
       [ComponentConfigFieldEnum.PROGRESS_BAR_CIRCLE]: progressBarCircle,
+      [ComponentConfigFieldEnum.MAX_NUMBER]: maxNumber,
     };
     return setFieldsValue(value);
   };

 <script lang="ts" setup>
   import { EChartsOption, ECharts, init } from 'echarts';
   import { unref, ref, onMounted, computed, nextTick } from 'vue';
-  import { useDataFetch } from '../../../hook/useSocket';
-  import { ComponentPropsConfigType, DataFetchUpdateFn } from '../../../index.type';
+  import { ComponentPropsConfigType } from '../../../index.type';
   import { option } from './config';
   import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
   import { useIntervalFn } from '@vueuse/core';
   import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
   import { isArray } from '/@/utils/is';
   import { useComponentScale } from '/@/views/visual/packages/hook/useComponentScale';
+  import { useDataFetch } from '../../../hook/socket/useSocket';
+  import { DataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
 
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;
@@ -30,9 +31,19 @@
       instrumentPanelColor: presetInstrumentPanelColor,
       progressBarCircle: presetProgressBarCircle,
       gradientInfo: presetGradientInfo,
+      showTime: persetShowTime,
+      maxNumber: persetMaxNumber,
     } = persetOption || {};
-    const { unit, fontColor, pointerColor, gradientInfo, progressBarCircle, instrumentPanelColor } =
-      componentInfo || {};
+    const {
+      unit,
+      fontColor,
+      pointerColor,
+      gradientInfo,
+      progressBarCircle,
+      instrumentPanelColor,
+      showTime,
+      maxNumber,
+    } = componentInfo || {};
     return {
       unit: unit ?? presetUnit,
       fontColor: fontColor ?? presetFontColor,
@@ -41,6 +52,8 @@
       instrumentPanelColor: instrumentPanelColor ?? presetInstrumentPanelColor,
       progressBarCircle: progressBarCircle ?? presetProgressBarCircle,
       gradientInfo: gradientInfo ?? presetGradientInfo,
+      showTime: showTime ?? persetShowTime,
+      maxNumber: maxNumber || persetMaxNumber,
     };
   });
 
@@ -58,7 +71,7 @@
   const titleValue = ref<number>(20);
 
   const options = (): EChartsOption => {
-    const { unit, fontColor, progressBarCircle, gradientInfo } = unref(getDesign);
+    const { unit, fontColor, progressBarCircle, gradientInfo, maxNumber } = unref(getDesign);
     const instrumentPanelColor = getStageColor(gradientInfo);
     return {
       title: {
@@ -75,6 +88,8 @@
         {
           type: 'gauge',
           center: ['50%', '50%'],
+          min: 0,
+          max: maxNumber,
           startAngle: '90',
           endAngle: '-270',
           progress: {
@@ -162,6 +177,7 @@
   const updateFn: DataFetchUpdateFn = (message, attribute) => {
     const { data = {} } = message;
     const [latest] = data[attribute] || [];
+    if (!latest.length) return;
     const [timespan, value] = latest;
     time.value = timespan;
     updateChart(isNaN(value as unknown as number) ? 0 : Number(value));
@@ -205,12 +221,18 @@
 </script>
 
 <template>
-  <main class="w-full h-full flex flex-col justify-center items-center">
+  <main
+    class="w-full h-full flex flex-col justify-center items-center"
+    :class="!getDesign.showTime && 'p-5'"
+  >
     <DeviceName :config="config" />
-    <div ref="chartRefEl" class="flex-1 w-full h-full"> </div>
-    <div class="text-gray-500 text-xs text-center truncate">{{
-      getDesign.attribute || '湿度'
-    }}</div>
-    <UpdateTime :time="time" />
+    <div class="flex w-full h-full flex-col justify-center items-center flex-1">
+      <div ref="chartRefEl" class="flex-1 w-full h-6/7 flex-col justify-center items-center flex">
+      </div>
+      <div class="text-gray-500 text-xs text-center truncate">{{
+        getDesign.attribute || '湿度'
+      }}</div>
+    </div>
+    <UpdateTime v-if="getDesign.showTime" :time="time" />
   </main>
 </template>

 <script lang="ts" setup>
   import { EChartsOption, ECharts, init } from 'echarts';
   import { unref, ref, onMounted, computed, nextTick } from 'vue';
-  import { useMultipleDataFetch } from '../../../hook/useSocket';
-  import { ComponentPropsConfigType, MultipleDataFetchUpdateFn } from '../../../index.type';
+  import { ComponentPropsConfigType } from '../../../index.type';
   import { option } from './config';
-  import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
-  // import { useIntervalFn } from '@vueuse/core';
+  // import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
   import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
   import { useComponentScale } from '/@/views/visual/packages/hook/useComponentScale';
   import { useReceiveMessage } from '../../../hook/useReceiveMessage';
   import { useReceiveValue } from '../../../hook/useReceiveValue';
+  import { MultipleDataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
+  import { useMultipleDataFetch } from '../../../hook/socket/useSocket';
 
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;
@@ -19,7 +19,7 @@
 
   const chartInstance = ref<Nullable<ECharts>>(null);
 
-  const time = ref<Nullable<number>>(null);
+  // const time = ref<Nullable<number>>(null);
 
   const getDesign = computed(() => {
     const { option, persetOption } = props.config;
@@ -64,7 +64,7 @@
       case 1:
         return (offsetList.value = [
           ['0%', '0%'],
-          ['0%', '10%'],
+          ['0%', '15%'],
         ]);
         break;
       case 2:
@@ -119,7 +119,7 @@
             : ['0%', '60%'],
         ]);
         break;
-      case 6 || 7 || 8 || 9 || 10:
+      case 6:
         return (offsetList.value = [
           index == 0
             ? ['0%', '-55%']
@@ -256,31 +256,14 @@
     chartInstance.value.setOption(options());
   };
 
-  // const randomFn = () => {
-  //   gaugeData[0].value = +(Math.random() * 100).toFixed(2);
-  //   gaugeData[1].value = +(Math.random() * 100).toFixed(2);
-  //   useIntervalFn(() => {
-  //     unref(chartInstance)?.setOption({
-  //       series: [
-  //         {
-  //           data: gaugeData,
-  //           pointer: {
-  //             show: false,
-  //           },
-  //         },
-  //       ],
-  //     });
-  //   }, 3000);
-  // };
-
   const { forEachGroupMessage } = useReceiveMessage();
   const { getNumberValue } = useReceiveValue();
   const updateFn: MultipleDataFetchUpdateFn = (message, deviceId, attribute) => {
-    forEachGroupMessage(message, deviceId, attribute, (attribute, value, timespan) => {
+    forEachGroupMessage(message, deviceId, attribute, (attribute, value) => {
       series.value.forEach((item) => {
-        if (item.id === deviceId && item.attribute === attribute) {
+        if (item.id === deviceId && item.attribute === attribute && value) {
           item.value = getNumberValue(value);
-          time.value = timespan;
+          // time.value = timespan;
         }
       });
     });
@@ -333,7 +316,8 @@
 <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" />
+    <div ref="chartRefEl" class="flex-1 w-full h-full justify-center items-center flex-col flex">
+    </div>
+    <!-- <UpdateTime :time="time" /> -->
   </main>
 </template>

@@ -20,7 +20,9 @@ export enum GradientColor {
 export const option: PublicPresetOptions = {
   [ComponentConfigFieldEnum.FONT_COLOR]: '#FD7347',
   [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
-  [ComponentConfigFieldEnum.UNIT]: '℃',
+  [ComponentConfigFieldEnum.SHOW_TIME]: false,
+  [ComponentConfigFieldEnum.MAX_NUMBER]: 100,
+  [ComponentConfigFieldEnum.UNIT]: 'kw',
 };
 
 export default class Config extends PublicConfigClass implements CreateComponentType {

 <script lang="ts" setup>
+  import { nextTick } from 'vue';
   import { ComponentConfigFieldEnum } from '../../../enum';
   import { option } from './config';
   import { useForm, BasicForm } from '/@/components/Form';
@@ -26,6 +27,33 @@
         component: 'Checkbox',
         defaultValue: option.showDeviceName,
       },
+      {
+        field: ComponentConfigFieldEnum.SHOW_TIME,
+        label: '显示时间',
+        component: 'Checkbox',
+        defaultValue: option.showTime,
+      },
+      {
+        field: ComponentConfigFieldEnum.MAX_NUMBER,
+        label: '最大值',
+        component: 'InputNumber',
+        defaultValue: 100,
+        componentProps: ({ formActionType }) => {
+          const { setFieldsValue } = formActionType;
+          return {
+            placeholder: '请输入最大值',
+            min: 100,
+            onChange: async (e) => {
+              if (!e) {
+                await nextTick();
+                setFieldsValue({
+                  [ComponentConfigFieldEnum.MAX_NUMBER]: 100,
+                });
+              }
+            },
+          };
+        },
+      },
     ],
     showActionButtonGroup: false,
     labelWidth: 120,
@@ -41,17 +69,21 @@
       fontColor: item[ComponentConfigFieldEnum.FONT_COLOR],
       unit: item[ComponentConfigFieldEnum.UNIT],
       showDeviceName: item[ComponentConfigFieldEnum.SHOW_DEVICE_NAME],
+      showTime: item[ComponentConfigFieldEnum.SHOW_TIME],
+      maxNumber: item[ComponentConfigFieldEnum.MAX_NUMBER],
     } as ComponentInfo;
   };
 
   const setFormValues = (data: Recordable) => {
     // return setFieldsValue(data);
-    const { unit, fontColor, showDeviceName } = data;
+    const { unit, fontColor, showDeviceName, showTime, maxNumber } = data;
 
     const value = {
       [ComponentConfigFieldEnum.UNIT]: unit,
       [ComponentConfigFieldEnum.FONT_COLOR]: fontColor,
       [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: showDeviceName,
+      [ComponentConfigFieldEnum.SHOW_TIME]: showTime,
+      [ComponentConfigFieldEnum.MAX_NUMBER]: maxNumber,
     };
     return setFieldsValue(value);
   };

 <script lang="ts" setup>
   import { EChartsOption, ECharts, init } from 'echarts';
   import { unref, ref, onMounted, computed, nextTick } from 'vue';
-  import { useDataFetch } from '../../../hook/useSocket';
-  import { ComponentPropsConfigType, DataFetchUpdateFn } from '../../../index.type';
+  import { ComponentPropsConfigType } from '../../../index.type';
   import { option } from './config';
   import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
   import { useIntervalFn } from '@vueuse/core';
   import { useComponentScale } from '../../../hook/useComponentScale';
   import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
+  import { useDataFetch } from '../../../hook/socket/useSocket';
+  import { DataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
 
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;
@@ -28,9 +29,18 @@
       pointerColor: presetPointerColor,
       instrumentPanelColor: presetInstrumentPanelColor,
       gradientInfo: presetGradientInfo,
+      showTime: persetShowTime,
+      maxNumber: persetMaxNumber,
     } = persetOption || {};
-    const { unit, fontColor, pointerColor, instrumentPanelColor, gradientInfo } =
-      componentInfo || {};
+    const {
+      unit,
+      fontColor,
+      pointerColor,
+      instrumentPanelColor,
+      gradientInfo,
+      showTime,
+      maxNumber,
+    } = componentInfo || {};
     return {
       unit: unit ?? presetUnit,
       fontColor: fontColor ?? presetFontColor,
@@ -38,17 +48,21 @@
       pointerColor: pointerColor ?? presetPointerColor,
       instrumentPanelColor: instrumentPanelColor ?? presetInstrumentPanelColor,
       gradientInfo: gradientInfo ?? presetGradientInfo,
+      showTime: showTime ?? persetShowTime,
+      maxNumber: maxNumber || persetMaxNumber,
     };
   });
 
   const options = (): EChartsOption => {
-    const { unit, fontColor, pointerColor } = unref(getDesign);
+    const { unit, fontColor, pointerColor, maxNumber } = unref(getDesign);
 
     // getStageColor(gradientInfo);
     return {
       series: [
         {
           type: 'gauge',
+          min: 0,
+          max: maxNumber,
           progress: {
             show: true,
             width: unref(getRatio) ? 6 * unref(getRatio) : 6,
@@ -134,6 +148,7 @@
   const updateFn: DataFetchUpdateFn = (message, attribute) => {
     const { data = {} } = message;
     const [latest] = data[attribute] || [];
+    if (!latest.length) return;
     const [timespan, value] = latest;
     time.value = timespan;
     updateChart(isNaN(value as unknown as number) ? 0 : Number(value));
@@ -188,12 +203,18 @@
 </script>
 
 <template>
-  <main class="w-full h-full flex flex-col justify-center items-center">
+  <main
+    class="w-full h-full flex flex-col justify-center items-center"
+    :class="!getDesign.showTime && 'p-5'"
+  >
     <DeviceName :config="config" />
-    <div ref="chartRefEl" class="flex-1 w-full h-full"> </div>
-    <div class="text-gray-500 text-xs text-center truncate">{{
-      getDesign.attribute || '湿度'
-    }}</div>
-    <UpdateTime :time="time" />
+    <div class="flex flex-1 flex-col justify-center items-center w-full h-full">
+      <div ref="chartRefEl" class="flex-1 w-full h-6/7 flex flex-col justify-center items-center">
+      </div>
+      <div class="text-gray-500 text-xs text-center truncate">{{
+        getDesign.attribute || '速度'
+      }}</div>
+    </div>
+    <UpdateTime v-if="getDesign.showTime" :time="time" />
   </main>
 </template>

@@ -12,6 +12,8 @@ import { ComponentConfigFieldEnum } from '../../../enum';
 export const option: PublicPresetOptions = {
   [ComponentConfigFieldEnum.FONT_COLOR]: '#FD7347',
   [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
+  [ComponentConfigFieldEnum.SHOW_TIME]: false,
+  [ComponentConfigFieldEnum.MAX_NUMBER]: 100,
   [ComponentConfigFieldEnum.UNIT]: '℃',
 };
 

 <script lang="ts" setup>
+  import { nextTick } from 'vue';
   import { ComponentConfigFieldEnum } from '../../../enum';
   import { option } from './config';
   import { useForm, BasicForm } from '/@/components/Form';
@@ -25,6 +26,33 @@
         component: 'Checkbox',
         defaultValue: option.showDeviceName,
       },
+      {
+        field: ComponentConfigFieldEnum.SHOW_TIME,
+        label: '显示时间',
+        component: 'Checkbox',
+        defaultValue: option.showTime,
+      },
+      {
+        field: ComponentConfigFieldEnum.MAX_NUMBER,
+        label: '最大值',
+        component: 'InputNumber',
+        defaultValue: 100,
+        componentProps: ({ formActionType }) => {
+          const { setFieldsValue } = formActionType;
+          return {
+            placeholder: '请输入最大值',
+            min: 100,
+            onChange: async (e) => {
+              if (!e) {
+                await nextTick();
+                setFieldsValue({
+                  [ComponentConfigFieldEnum.MAX_NUMBER]: 100,
+                });
+              }
+            },
+          };
+        },
+      },
     ],
     showActionButtonGroup: false,
     labelWidth: 120,

@@ -3,8 +3,7 @@
   import { onMounted } from 'vue';
   import { unref } from 'vue';
   import { ref } from 'vue';
-  import { useDataFetch } from '../../../hook/useSocket';
-  import { ComponentPropsConfigType, DataFetchUpdateFn } from '../../../index.type';
+  import { ComponentPropsConfigType } from '../../../index.type';
   import { option } from './config';
   import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
   import { useIntervalFn } from '@vueuse/core';
@@ -12,6 +11,8 @@
   import { useComponentScale } from '../../../hook/useComponentScale';
   import { nextTick } from 'vue';
   import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
+  import { useDataFetch } from '../../../hook/socket/useSocket';
+  import { DataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
 
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;
@@ -26,27 +27,34 @@
   const getDesign = computed(() => {
     const { option, persetOption } = props.config;
     const { componentInfo, attribute, attributeRename, attributeName } = option;
-    const { fontColor: presetFontColor, unit: presetUnit } = persetOption || {};
-    const { unit, fontColor } = componentInfo || {};
+    const {
+      fontColor: presetFontColor,
+      unit: presetUnit,
+      showTime: persetShowTime,
+      maxNumber: persetMaxNumber,
+    } = persetOption || {};
+    const { unit, fontColor, showTime, maxNumber } = componentInfo || {};
     return {
       unit: unit ?? presetUnit,
       fontColor: fontColor ?? presetFontColor,
       attribute: attributeRename || attributeName || attribute,
+      showTime: persetShowTime || showTime,
+      maxNumber: maxNumber || persetMaxNumber,
     };
   });
 
   const options = (): EChartsOption => {
-    const { unit, fontColor } = unref(getDesign);
+    const { unit, fontColor, maxNumber } = unref(getDesign);
     return {
       series: [
         {
           type: 'gauge',
+          min: 0,
+          max: maxNumber,
           radius: '50%',
           center: ['50%', '60%'],
           startAngle: 200,
           endAngle: -20,
-          min: 0,
-          max: 100,
           splitNumber: 10,
           itemStyle: {
             color: fontColor,
@@ -114,7 +122,7 @@
           startAngle: 200,
           endAngle: -20,
           min: 0,
-          max: 100,
+          max: maxNumber,
           itemStyle: {
             color: fontColor,
           },
@@ -173,6 +181,7 @@
   const updateFn: DataFetchUpdateFn = (message, attribute) => {
     const { data = {} } = message;
     const [latest] = data[attribute] || [];
+    if (!latest.length) return;
     const [timespan, value] = latest;
     time.value = timespan;
     updateChart(isNaN(value as unknown as number) ? 0 : Number(value));
@@ -221,12 +230,18 @@
 </script>
 
 <template>
-  <main class="w-full h-full flex flex-col justify-center items-center">
+  <main
+    class="w-full h-full flex flex-col justify-center items-center"
+    :class="!getDesign.showTime && 'p-5'"
+  >
     <DeviceName :config="config" />
-    <div ref="chartRefEl" class="flex-1 w-full h-full"> </div>
-    <div class="text-gray-500 text-xs text-center truncate">{{
-      getDesign.attribute || '温度'
-    }}</div>
-    <UpdateTime :time="time" />
+    <div class="w-full h-full flex justify-center items-center flex-1 flex-col">
+      <div ref="chartRefEl" class="flex-1 w-full h-6/7 flex justify-center items-center flex-col">
+      </div>
+      <div class="text-gray-500 text-xs text-center truncate">{{
+        getDesign.attribute || '温度'
+      }}</div>
+    </div>
+    <UpdateTime v-show="getDesign.showTime" :time="time" />
   </main>
 </template>

@@ -29,6 +29,8 @@ export const option: PublicPresetOptions = {
   ],
   [ComponentConfigFieldEnum.UNIT]: 'km/h',
   [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
+  [ComponentConfigFieldEnum.SHOW_TIME]: false,
+  [ComponentConfigFieldEnum.MAX_NUMBER]: 100,
 };
 
 export default class Config extends PublicConfigClass implements CreateComponentType {

@@ -4,6 +4,7 @@
   import { PublicFormInstaceType } from '/@/views/visual/dataSourceBindPanel/index.type';
   import { Gradient, GradientColor, option } from './config';
   import { ComponentInfo } from '/@/views/visual/palette/types';
+  import { nextTick } from 'vue';
 
   const [register, { getFieldsValue, setFieldsValue, resetFields }] = useForm({
     schemas: [
@@ -81,6 +82,33 @@
         component: 'Checkbox',
         defaultValue: option.showDeviceName,
       },
+      {
+        field: ComponentConfigFieldEnum.SHOW_TIME,
+        label: '显示时间',
+        component: 'Checkbox',
+        defaultValue: option.showTime,
+      },
+      {
+        field: ComponentConfigFieldEnum.MAX_NUMBER,
+        label: '最大值',
+        component: 'InputNumber',
+        defaultValue: 100,
+        componentProps: ({ formActionType }) => {
+          const { setFieldsValue } = formActionType;
+          return {
+            placeholder: '请输入最大值',
+            min: 100,
+            onChange: async (e) => {
+              if (!e) {
+                await nextTick();
+                setFieldsValue({
+                  [ComponentConfigFieldEnum.MAX_NUMBER]: 100,
+                });
+              }
+            },
+          };
+        },
+      },
     ],
     showActionButtonGroup: false,
     labelWidth: 120,
@@ -112,11 +140,13 @@
       fontColor: value[ComponentConfigFieldEnum.FONT_COLOR],
       unit: value[ComponentConfigFieldEnum.UNIT],
       showDeviceName: value[ComponentConfigFieldEnum.SHOW_DEVICE_NAME],
+      showTime: value[ComponentConfigFieldEnum.SHOW_TIME],
+      maxNumber: value[ComponentConfigFieldEnum.MAX_NUMBER],
     } as ComponentInfo;
   };
 
   const setFormValues = (data: ComponentInfo) => {
-    const { gradientInfo, unit, fontColor, showDeviceName } = data;
+    const { gradientInfo, unit, fontColor, showDeviceName, showTime, maxNumber } = data;
     const firstRecord = gradientInfo.find((item) => item.key === Gradient.FIRST);
     const secondRecord = gradientInfo.find((item) => item.key === Gradient.SECOND);
     const thirdRecord = gradientInfo.find((item) => item.key === Gradient.THIRD);
@@ -124,6 +154,8 @@
       [ComponentConfigFieldEnum.UNIT]: unit,
       [ComponentConfigFieldEnum.FONT_COLOR]: fontColor,
       [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: showDeviceName,
+      [ComponentConfigFieldEnum.SHOW_TIME]: showTime,
+      [ComponentConfigFieldEnum.MAX_NUMBER]: maxNumber,
       [ComponentConfigFieldEnum.FIRST_PHASE_VALUE]: firstRecord?.value,
       [ComponentConfigFieldEnum.FIRST_PHASE_COLOR]: firstRecord?.color,
       [ComponentConfigFieldEnum.SECOND_PHASE_VALUE]: secondRecord?.value,

 <script lang="ts" setup>
-  import { ComponentPropsConfigType, DataFetchUpdateFn } from '/@/views/visual/packages/index.type';
+  import { ComponentPropsConfigType } from '/@/views/visual/packages/index.type';
   import { Gradient, GradientColor, option } from './config';
-  import { useDataFetch } from '/@/views/visual/packages/hook/useSocket';
   import { ECharts, EChartsOption, init } from 'echarts';
   import { ref, unref, onMounted, computed } from 'vue';
   import { isArray } from '/@/utils/is';
@@ -11,6 +10,8 @@
   import { useIntervalFn } from '@vueuse/core';
   import { nextTick } from 'vue';
   import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
+  import { useDataFetch } from '../../../hook/socket/useSocket';
+  import { DataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
 
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;
@@ -35,14 +36,18 @@
       fontColor: presetFontColor,
       unit: presetUnit,
       gradientInfo: presetGradientInfo,
+      showTime: persetShowTime,
+      maxNumber: persetMaxNumber,
     } = persetOption || {};
 
-    const { unit, fontColor, gradientInfo } = componentInfo || {};
+    const { unit, fontColor, gradientInfo, showTime, maxNumber } = componentInfo || {};
     return {
       unit: unit ?? presetUnit,
       fontColor: fontColor ?? presetFontColor,
       gradientInfo: gradientInfo ?? presetGradientInfo,
       attribute: attributeRename || attributeName || attribute,
+      showTime: showTime || persetShowTime,
+      maxNumber: maxNumber || persetMaxNumber,
     };
   });
 
@@ -52,7 +57,7 @@
   };
 
   const options = (): EChartsOption => {
-    const { gradientInfo, unit, fontColor } = unref(getDesign);
+    const { gradientInfo, unit, fontColor, maxNumber } = unref(getDesign);
     const firstRecord = getGradient(Gradient.FIRST, gradientInfo);
     const secondRecord = getGradient(Gradient.SECOND, gradientInfo);
     const thirdRecord = getGradient(Gradient.THIRD, gradientInfo);
@@ -66,18 +71,18 @@
           .join('')
     );
 
-    const firstGradient = firstRecord?.value ? firstRecord.value / max : 0.3;
-    const secondGradient = secondRecord?.value ? secondRecord.value / max : 0.7;
+    const firstGradient = firstRecord?.value ? firstRecord.value / maxNumber : 0.3;
+    const secondGradient = secondRecord?.value ? secondRecord.value / maxNumber : 0.7;
 
     return {
       series: [
         {
           type: 'gauge',
           min: 0,
-          max,
+          max: maxNumber,
           axisLine: {
             lineStyle: {
-              width: 20,
+              width: unref(getRatio) ? 20 * unref(getRatio) : 20,
               color: [
                 [firstGradient, firstRecord?.color || GradientColor.FIRST],
                 [secondGradient, secondRecord?.color || GradientColor.SECOND],
@@ -91,33 +96,33 @@
             },
           },
           axisTick: {
-            distance: -30,
+            distance: unref(getRatio) ? -30 * unref(getRatio) : -30,
             length: 8,
             splitNumber: max / 100,
             lineStyle: {
               color: '#fff',
-              width: 2,
+              width: unref(getRatio) ? 2 * unref(getRatio) : 2,
             },
           },
           splitLine: {
-            distance: -10,
-            length: 30,
+            distance: unref(getRatio) ? -10 * unref(getRatio) : -10,
+            length: unref(getRatio) ? unref(getRatio) * 30 : 30,
             lineStyle: {
               color: '#fff',
-              width: 4,
+              width: unref(getRatio) ? unref(getRatio) * 4 : 4,
             },
           },
           axisLabel: {
             color: 'inherit',
-            distance: 5,
-            fontSize: 6,
+            distance: unref(getRatio) ? unref(getRatio) * 5 : 5,
+            fontSize: unref(getRatio) ? unref(getRatio) * 6 : 6,
           },
           detail: {
             valueAnimation: true,
             formatter: `{value} ${unit ?? ''}`,
             color: fontColor || 'inherit',
             offsetCenter: [0, '70%'],
-            fontSize: 14,
+            fontSize: unref(getRatio) ? unref(getRatio) * 14 : 14,
           },
           data: [
             {
@@ -152,6 +157,7 @@
   const updateFn: DataFetchUpdateFn = (message, attribute) => {
     const { data = {} } = message;
     const [latest] = data[attribute] || [];
+    if (!latest.length) return;
     const [timespan, value] = latest;
     time.value = timespan;
     updateChartFn(isNaN(value as unknown as number) ? 0 : Number(value));
@@ -204,12 +210,18 @@
 </script>
 
 <template>
-  <main class="w-full h-full flex flex-col justify-center items-center">
+  <main
+    class="w-full h-full flex flex-col justify-center items-center"
+    :class="!getDesign.showTime && 'p-5'"
+  >
     <DeviceName :config="config" />
-    <div ref="chartRefEl" class="flex-1 w-full h-full"> </div>
-    <div class="text-center text-gray-500 text-xs truncate">
-      {{ getDesign.attribute || '速度' }}
+    <div class="w-full h-full flex justify-center items-center flex-col flex-1">
+      <div ref="chartRefEl" class="flex-1 w-full h-6/7 flex flex-col justify-center items-center">
+      </div>
+      <div class="text-center text-gray-500 text-xs truncate">
+        {{ getDesign.attribute || '速度' }}
+      </div>
     </div>
-    <UpdateTime :time="time" />
+    <UpdateTime v-show="getDesign.showTime" :time="time" />
   </main>
 </template>

@@ -32,7 +32,7 @@
       );
       const options = deviceList
         .filter((item) => item.tbDeviceId === deviceRecord.deviceId)
-        .map((item) => ({ ...item, label: item.name, value: item.tbDeviceId }));
+        .map((item) => ({ ...item, label: item.alias || item.name, value: item.tbDeviceId }));
 
       const attKey = dataSource.map((item) => ({
         ...item,

 <script lang="ts" setup>
-  import {
-    ComponentPropsConfigType,
-    MultipleDataFetchUpdateFn,
-  } from '/@/views/visual/packages/index.type';
+  import { ComponentPropsConfigType } from '/@/views/visual/packages/index.type';
   import { option } from './config';
-  import { useMultipleDataFetch } from '/@/views/visual/packages/hook/useSocket';
   import { useBaiduMapSDK } from '../../../hook/useBaiduMapSDK';
   import { ref, unref } from 'vue';
   import { buildUUID } from '/@/utils/uuid';
   import { Spin } from 'ant-design-vue';
   import { computed } from 'vue';
   import { useMapTrackPlayBack } from './useMapTrackPlayback';
+  import { useMultipleDataFetch } from '../../../hook/socket/useSocket';
+  import { MultipleDataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
 
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;

@@ -2,8 +2,9 @@
   import { ref } from 'vue';
   import { Image as AntImage } from 'ant-design-vue';
   import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
-  import { useDataFetch } from '../../../hook/useSocket';
-  import { ComponentPropsConfigType, DataFetchUpdateFn } from '../../../index.type';
+  import { ComponentPropsConfigType } from '../../../index.type';
+  import { useDataFetch } from '../../../hook/socket/useSocket';
+  import { DataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
 
   const props = defineProps<{
     config: ComponentPropsConfigType;

@@ -13,6 +13,7 @@ export const option: PublicPresetOptions = {
   [ComponentConfigFieldEnum.OPEN_COLOR]: '#30f230',
   [ComponentConfigFieldEnum.CLOSE_COLOR]: '#eeeeee',
   [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: true,
+  [ComponentConfigFieldEnum.SHOW_TIME]: false,
 };
 
 export default class Config extends PublicConfigClass implements CreateComponentType {

@@ -25,10 +25,10 @@
         },
       },
       {
-        field: ComponentConfigFieldEnum.SHOW_DEVICE_NAME,
-        label: '显示设备名称',
+        field: ComponentConfigFieldEnum.SHOW_TIME,
+        label: '显示时间',
         component: 'Checkbox',
-        defaultValue: option.showDeviceName,
+        defaultValue: option.showTime,
       },
     ],
     showActionButtonGroup: false,

 <script lang="ts" setup>
-  import { ComponentPropsConfigType, DataFetchUpdateFn } from '/@/views/visual/packages/index.type';
+  import { ComponentPropsConfigType } 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';
   import { useReceiveValue } from '../../../hook/useReceiveValue';
   import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
+  import { DataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
+  import { useDataFetch } from '../../../hook/socket/useSocket';
 
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;
@@ -23,15 +24,17 @@
       openColor: persetOpenColor,
       closeColor: persetCloseColor,
       showDeviceName: persetShowDeviceName,
+      showTime: persetShowTime,
     } = persetOption || {};
     const { componentInfo, attribute, attributeName, attributeRename } = option;
 
-    const { openColor, closeColor, showDeviceName } = componentInfo || {};
+    const { openColor, closeColor, showDeviceName, showTime } = componentInfo || {};
     return {
       openColor: openColor ?? persetOpenColor,
       closeColor: closeColor ?? persetCloseColor,
       showDeviceName: showDeviceName ?? persetShowDeviceName,
       attribute: attributeRename || attributeName || attribute,
+      showTime: showTime ?? persetShowTime,
     };
   });
 
@@ -44,6 +47,7 @@
   const updateFn: DataFetchUpdateFn = (message, attribute) => {
     const { data = {} } = message;
     const [latest] = data[attribute] || [];
+    if (!latest.length) return;
     const [timespan, value] = latest;
     time.value = timespan;
     isOpenClose.value = Boolean(getNumberValue(value));
@@ -59,18 +63,24 @@
 </script>
 
 <template>
-  <main :style="getScale" class="w-full h-full flex flex-col justify-center items-center">
+  <main
+    :style="getScale"
+    class="w-full h-full flex flex-col justify-center items-center"
+    :class="!getDesign.showTime && 'p-5'"
+  >
     <DeviceName :config="config" class="text-center" />
 
-    <div
-      :style="{
-        '--open-color': getDesign.openColor,
-        '--close-color': getDesign.closeColor,
-      }"
-      :class="isOpenClose ? 'switch_open' : 'switch_close'"
-    ></div>
-    <div class="text-gray-500 text-sm truncate">{{ getDesign.attribute }}</div>
-    <UpdateTime :time="time" />
+    <div class="flex-1 flex justify-center items-center flex-col" :style="getScale">
+      <div
+        :style="{
+          '--open-color': getDesign.openColor,
+          '--close-color': getDesign.closeColor,
+        }"
+        :class="isOpenClose ? 'switch_open' : 'switch_close'"
+      ></div>
+      <div class="text-gray-500 text-sm truncate">{{ getDesign.attribute }}</div>
+    </div>
+    <UpdateTime v-if="getDesign.showTime" :time="time" />
   </main>
 </template>
 <style lang="less" scoped>

@@ -10,11 +10,12 @@ import { PublicConfigClass, componentInitConfig } from '/@/views/visual/packages
 import { ComponentConfigFieldEnum } from '/@/views/visual/packages/enum';
 
 export const option: PublicPresetOptions = {
-  [ComponentConfigFieldEnum.ICON]: 'shuiwen',
-  [ComponentConfigFieldEnum.ICON_COLOR]: '#367bff',
-  [ComponentConfigFieldEnum.ICON_CLOSE]: 'shuiwen',
+  [ComponentConfigFieldEnum.ICON]: 'dianyuandianya',
+  [ComponentConfigFieldEnum.ICON_COLOR]: '#ffa621',
+  [ComponentConfigFieldEnum.ICON_CLOSE]: 'dianyuandianya',
   [ComponentConfigFieldEnum.ICON_COLOR_CLOSE]: '#CCCCCC',
   [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
+  [ComponentConfigFieldEnum.SHOW_TIME]: false,
 };
 
 export default class Config extends PublicConfigClass implements CreateComponentType {

@@ -52,6 +52,12 @@
         component: 'Checkbox',
         defaultValue: option.showDeviceName,
       },
+      {
+        field: ComponentConfigFieldEnum.SHOW_TIME,
+        label: '显示时间',
+        component: 'Checkbox',
+        defaultValue: option.showTime,
+      },
     ],
     showActionButtonGroup: false,
     labelWidth: 120,

@@ -5,5 +5,5 @@ const componentKeys = useComponentKeys('SwitchStatus');
 export const SwitchStatusConfig: ConfigType = {
   ...componentKeys,
   title: '开关量状态',
-  package: PackagesCategoryEnum.TEXT,
+  package: PackagesCategoryEnum.OTHER,
 };

+<script lang="ts" setup>
+  import { ComponentPropsConfigType } from '/@/views/visual/packages/index.type';
+  import { option } from './config';
+  import { SvgIcon } from '/@/components/Icon';
+  import { computed, ref } from 'vue';
+  import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
+  import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
+  import { useDataFetch } from '../../../hook/socket/useSocket';
+  import { DataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
+  import { useReceiveValue } from '../../../hook/useReceiveValue';
+
+  const props = defineProps<{
+    config: ComponentPropsConfigType<typeof option>;
+  }>();
+
+  const time = ref<Nullable<number>>(null);
+  const isOpenClose = ref<boolean>(true);
+
+  const getDesign = computed(() => {
+    const { persetOption = {}, option } = props.config;
+    const {
+      iconColor: persetIconColor,
+      unit: perseUnit,
+      icon: persetIcon,
+      fontColor: persetFontColor,
+      iconClose: persetIconCLose,
+      iconColorClose: persetIconColorClose,
+      showTime: persetShowTime,
+    } = persetOption;
+
+    const { componentInfo, attributeName, attributeRename } = option;
+
+    const { icon, iconColor, fontColor, unit, iconClose, iconColorClose, showTime } =
+      componentInfo || {};
+    return {
+      iconColor: iconColor || persetIconColor,
+      unit: unit ?? perseUnit,
+      icon: icon || persetIcon,
+      fontColor: fontColor || persetFontColor,
+      attribute: attributeRename || attributeName,
+      iconClose: iconClose || persetIconCLose,
+      iconColorClose: iconColorClose || persetIconColorClose,
+      showTime: showTime ?? persetShowTime,
+    };
+  });
+
+  const { getNumberValue } = useReceiveValue();
+
+  const updateFn: DataFetchUpdateFn = (message, attribute) => {
+    const { data = {} } = message;
+    const [latest] = data[attribute] || [];
+    if (!latest.length) return;
+    const [timespan, value] = latest;
+    time.value = timespan;
+    isOpenClose.value = Boolean(getNumberValue(value));
+  };
+
+  useDataFetch(props, updateFn);
+</script>
+
+<template>
+  <main class="w-full h-full flex flex-col justify-center items-center">
+    <DeviceName :config="config" />
+    <div class="flex flex-1 flex-col justify-center items-center">
+      <SvgIcon
+        :name="isOpenClose ? getDesign.icon : getDesign.iconClose"
+        prefix="iconfont"
+        :size="60"
+        :style="{ color: isOpenClose ? getDesign.iconColor : getDesign.iconColorClose }"
+      />
+      <div class="text-gray-500 text-sm truncate m-2">{{ getDesign.attribute || '' }}</div>
+    </div>
+    <UpdateTime v-show="getDesign.showTime" :time="time" />
+  </main>
+</template>

 import { MonitorVideoConfig } from './MonitorVideo';
 import { PictureConfig } from './Picture';
 import { SwitchSignalLightConfig } from './SwitchSignalLight';
+import { SwitchStatusConfig } from './SwitchStatus';
 
-export const OtherList = [MonitorVideoConfig, PictureConfig, SwitchSignalLightConfig];
+export const OtherList = [
+  MonitorVideoConfig,
+  PictureConfig,
+  SwitchSignalLightConfig,
+  SwitchStatusConfig,
+];

@@ -2,8 +2,9 @@
   import { ref } from 'vue';
   import { Image as AntImage } from 'ant-design-vue';
   import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
-  import { useDataFetch } from '../../../hook/useSocket';
-  import { ComponentPropsConfigType, DataFetchUpdateFn } from '../../../index.type';
+  import { ComponentPropsConfigType } from '../../../index.type';
+  import { useDataFetch } from '../../../hook/socket/useSocket';
+  import { DataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
 
   const props = defineProps<{
     config: ComponentPropsConfigType;
@@ -16,27 +17,6 @@
 
   const url = ref<string>(fallback);
 
-  // const getImagBase64 = ref(fallback);
-
-  // const getBase64Image = (url: string) => {
-  //   let canvas: Nullable<HTMLCanvasElement> = document.createElement('canvas');
-  //   const ctx = canvas.getContext('2d');
-  //   let image: Nullable<HTMLImageElement> = new Image();
-
-  //   image.onload = function () {
-  //     canvas!.height = image!.height;
-  //     canvas!.width = image!.width;
-  //     ctx?.drawImage(image!, 0, 0);
-  //     const dataUrl = canvas!.toDataURL('image/png');
-  //     getImagBase64.value = dataUrl;
-  //     console.log(dataUrl);
-  //     image = null;
-  //     canvas = null;
-  //   };
-  //   image.setAttribute('crossOrigin', 'Anonymous');
-  //   image.src = url;
-  // };
-
   const updateFn: DataFetchUpdateFn = (message, attribute) => {
     const { data = {} } = message;
     const [latest] = data[attribute] || [];

 <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 { ComponentPropsConfigType } 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 { useReceiveMessage } from '../../../hook/useReceiveMessage';
   import { useReceiveValue } from '../../../hook/useReceiveValue';
+  import { useMultipleDataFetch } from '../../../hook/socket/useSocket';
+  import { MultipleDataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
 
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;
@@ -66,10 +67,8 @@
       },
     }))
   );
-  // console.log(unref(series), 'series');
 
   const options = (): EChartsOption => {
-    // getStageColor(gradientInfo);
     return {
       tooltip: {
         trigger: 'item',

 <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 { ComponentPropsConfigType } from '../../../index.type';
   import { option } from './config';
   import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
   import { useComponentScale } from '../../../hook/useComponentScale';
@@ -10,6 +9,8 @@
   import { useReceiveMessage } from '../../../hook/useReceiveMessage';
   import { useReceiveValue } from '../../../hook/useReceiveValue';
   import { toRaw } from 'vue';
+  import { useMultipleDataFetch } from '../../../hook/socket/useSocket';
+  import { MultipleDataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
 
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;

@@ -8,15 +8,6 @@ import {
 } 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',

 <script lang="ts" setup>
   import { EChartsOption, SeriesOption, ECharts, init } from 'echarts';
   import { unref, ref, onMounted, computed, nextTick, toRaw } from 'vue';
-  import { useMultipleDataFetch } from '../../../hook/useSocket';
-  import { ComponentPropsConfigType, MultipleDataFetchUpdateFn } from '../../../index.type';
+  import { ComponentPropsConfigType } from '../../../index.type';
   import { option } from './config';
-  import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
+  // import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
   import { useComponentScale } from '../../../hook/useComponentScale';
   import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
+  import { useReceiveMessage } from '../../../hook/useReceiveMessage';
+  import { useReceiveValue } from '../../../hook/useReceiveValue';
+  import { useMultipleDataFetch } from '../../../hook/socket/useSocket';
+  import { MultipleDataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
 
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;
@@ -21,33 +24,45 @@
   const getDesign = computed(() => {
     const { persetOption, option } = props.config;
     const { dataSource = [] } = option || {};
-    const { unit: presetUnit, fontColor: presetFontColor } = persetOption || {};
+    const {
+      unit: presetUnit,
+      fontColor: presetFontColor,
+      showDeviceName: persetShowDeviceName,
+    } = persetOption || {};
     return {
       dataSource: dataSource?.map((item) => {
-        const { unit, fontColor } = item.componentInfo || {};
-        const { attribute, attributeRename } = item;
+        const { unit, fontColor, showDeviceName } = item.componentInfo || {};
+        const { attribute, attributeName, attributeRename, deviceId, deviceName, deviceRename } =
+          item;
         return {
           unit: unit ?? presetUnit,
           fontColor: fontColor ?? presetFontColor,
           attribute,
+          attributeName,
           attributeRename,
+          deviceName,
+          deviceRename,
+          showDeviceName: showDeviceName ?? persetShowDeviceName,
+          id: deviceId,
         };
       }),
     };
   });
+
   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',
+        trigger: 'item',
+        confine: true,
         axisPointer: {
           type: 'shadow',
         },
@@ -58,9 +73,6 @@
         axisTick: {
           alignWithLabel: true,
         },
-        // axisPointer: {
-        //   type: 'line',
-        // },
       },
       grid: {
         top: '15%',
@@ -103,32 +115,40 @@
     } 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 ?? ''}`;
-          },
+  const { forEachGroupMessage } = useReceiveMessage();
+  const { getNumberValue } = useReceiveValue();
+
+  const series = ref(
+    unref(getDesign).dataSource.map((item) => ({
+      value: 0,
+      name: `${item.showDeviceName ? `${item.deviceRename || item.deviceName}-` : ''}${
+        item.attributeRename || item.attributeName || item.attribute
+      }`,
+      attribute: item.attribute,
+      id: item.id,
+      itemStyle: {
+        color: item.fontColor,
+      },
+      tooltip: {
+        valueFormatter(value) {
+          return `${value} ${item.unit ?? ''}`;
         },
-      } as SeriesOption['data'];
-    });
-    const xAxisData = series.map((item) => {
-      const { name } = item as any;
-      return name;
+      },
+    }))
+  );
+
+  const updateFn: MultipleDataFetchUpdateFn = (message, deviceId, attribute) => {
+    forEachGroupMessage(message, deviceId, attribute, (attribute, value, timespan) => {
+      series.value.forEach((item) => {
+        if (item.id == deviceId && item.attribute === attribute && value) {
+          item.value = getNumberValue(value);
+        }
+      });
+      time.value = timespan;
     });
-    // }
-    // console.log(message, 'message', series, 'series', sum);
-    updateChart(series, xAxisData);
+    const xAxisData = unref(series).map((item) => item.name);
+
+    updateChart(toRaw(unref(series)), xAxisData);
   };
 
   useMultipleDataFetch(props, updateFn);
@@ -136,10 +156,10 @@
   onMounted(() => {
     initial();
     // !props.config.option.uuid && randomFn();
-    !props.config.option.uuid;
   });
 
   const resize = async () => {
+    console.log(123321);
     await nextTick();
 
     // 修改echarts大小
@@ -159,7 +179,11 @@
 <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" />
+    <div
+      ref="chartRefEl"
+      class="flex-1 w-full h-7/8 flex justify-center items-center flex-col mb-3"
+    >
+    </div>
+    <!-- <UpdateTime :time="time" /> -->
   </main>
 </template>

 <script lang="ts" setup>
   import { EChartsOption, SeriesOption, ECharts, init } from 'echarts';
   import { unref, ref, onMounted, computed, nextTick, toRaw } from 'vue';
-  import { useMultipleDataFetch } from '../../../hook/useSocket';
-  import { ComponentPropsConfigType, MultipleDataFetchUpdateFn } from '../../../index.type';
+  import { ComponentPropsConfigType } from '../../../index.type';
   import { option } from './config';
-  import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
+  // import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
   import { useComponentScale } from '../../../hook/useComponentScale';
   import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
+  import { useReceiveMessage } from '../../../hook/useReceiveMessage';
+  import { useReceiveValue } from '../../../hook/useReceiveValue';
+  import { useMultipleDataFetch } from '../../../hook/socket/useSocket';
+  import { MultipleDataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
 
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;
@@ -21,16 +24,26 @@
   const getDesign = computed(() => {
     const { persetOption, option } = props.config;
     const { dataSource = [] } = option || {};
-    const { unit: presetUnit, fontColor: presetFontColor } = persetOption || {};
+    const {
+      unit: presetUnit,
+      fontColor: presetFontColor,
+      showDeviceName: persetShowDeviceName,
+    } = persetOption || {};
     return {
       dataSource: dataSource?.map((item) => {
-        const { unit, fontColor } = item.componentInfo || {};
-        const { attribute, attributeRename } = item;
+        const { unit, fontColor, showDeviceName } = item.componentInfo || {};
+        const { attribute, attributeName, attributeRename, deviceId, deviceName, deviceRename } =
+          item;
         return {
           unit: unit ?? presetUnit,
           fontColor: fontColor ?? presetFontColor,
           attribute,
+          attributeName,
           attributeRename,
+          deviceName,
+          deviceRename,
+          showDeviceName: showDeviceName ?? persetShowDeviceName,
+          id: deviceId,
         };
       }),
     };
@@ -47,7 +60,8 @@
       color: ['#3398DB'],
       tooltip: {
         // 提示框
-        trigger: 'axis',
+        trigger: 'item',
+        confine: true,
         axisPointer: {
           type: 'shadow',
         },
@@ -103,32 +117,39 @@
     } 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 ?? ''}`;
-          },
+  const { forEachGroupMessage } = useReceiveMessage();
+  const { getNumberValue } = useReceiveValue();
+
+  const series = ref(
+    unref(getDesign).dataSource.map((item) => ({
+      value: 0,
+      name: `${item.showDeviceName ? `${item.deviceRename || item.deviceName}-` : ''}${
+        item.attributeRename || item.attributeName || item.attribute
+      }`,
+      attribute: item.attribute,
+      id: item.id,
+      itemStyle: {
+        color: item.fontColor,
+      },
+      tooltip: {
+        valueFormatter(value) {
+          return `${value} ${item.unit ?? ''}`;
         },
-      } as SeriesOption['data'];
-    });
-    const yAxisData = series.map((item) => {
-      const { name } = item as any;
-      return name;
+      },
+    }))
+  );
+
+  const updateFn: MultipleDataFetchUpdateFn = (message, deviceId, attribute) => {
+    forEachGroupMessage(message, deviceId, attribute, (attribute, value, timespan) => {
+      series.value.forEach((item) => {
+        if (item.id == deviceId && item.attribute === attribute && value) {
+          item.value = getNumberValue(value);
+        }
+        time.value = timespan;
+      });
     });
-    // }
-    // console.log(message, 'message', series, 'series', sum);
-    updateChart(series, yAxisData);
+    const xAxisData = unref(series).map((item) => item.name);
+    updateChart(toRaw(unref(series)), xAxisData);
   };
 
   useMultipleDataFetch(props, updateFn);
@@ -159,7 +180,11 @@
 <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" />
+    <div
+      ref="chartRefEl"
+      class="flex-1 w-full h-full flex flex-col justify-center items-center mb-3"
+    >
+    </div>
+    <!-- <UpdateTime :time="time" /> -->
   </main>
 </template>

 <script lang="ts" setup>
-  import { reactive, ref } from 'vue';
-  import { useMultipleDataFetch } from '../../../hook/useSocket';
-  import { ComponentPropsConfigType, MultipleDataFetchUpdateFn } from '../../../index.type';
+  import { computed, unref } from 'vue';
+  import { ComponentPropsConfigType } from '../../../index.type';
   import { option } from './config';
   import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
   import { BasicTable, useTable, BasicColumn } from '/@/components/Table';
+  import { useReceiveMessage } from '../../../hook/useReceiveMessage';
+  import { useReceiveValue } from '../../../hook/useReceiveValue';
+  import { formatToDateTime } from '/@/utils/dateUtil';
+  import { nextTick } from 'vue';
+  import { onMounted } from 'vue';
+  import { toRaw } from 'vue';
+  import { useComponentScale } from '../../../hook/useComponentScale';
+  import { useMultipleDataFetch } from '../../../hook/socket/useSocket';
+  import { MultipleDataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
+
+  interface IList {
+    [key: string]: string | number | object;
+  }
 
   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 columns: BasicColumn[] = [
+    {
+      title: '设备属性',
+      dataIndex: 'attribute',
+      width: 80,
+      ellipsis: true,
+      format(text) {
+        if (props.config.option.mode == 'SELECT_PREVIEW') return text;
+        const { uniqueArr } = unref(getDesign);
+        const values = uniqueArr.filter((item) => item[text])[0][text];
+        return values;
+      },
+    },
+    {
+      title: '值',
+      dataIndex: 'value',
+      width: 80,
+      ellipsis: true,
+      format(text, record) {
+        const value = text ? text + (record.unit || '') : '';
+        return value;
+      },
+    },
+    {
+      title: '时间',
+      dataIndex: 'time',
+      width: 110,
+      ellipsis: true,
+      format(text) {
+        return formatToDateTime(text, 'YYYY-MM-DD HH:mm:ss');
+      },
+    },
+  ];
 
-  const [registerTable] = useTable({
+  const [registerTable, { setTableData, getDataSource, redoHeight, setProps }] = useTable({
     showIndexColumn: false,
     showTableSetting: false,
-    dataSource: realTimeList,
     canResize: true,
-    maxHeight: 144,
     size: 'small',
-    // columns: [{ title: '属性', dataIndex: 'attribute', width: 80 }],
-    columns: realTimeColumn as any,
+    maxHeight: 144,
+    columns,
   });
 
-  // const getDesign = computed(() => {
-  //   const { persetOption, option } = props.config;
-  //   clearInterval;
-  //   return {};
-  // });
+  const getDesign = computed(() => {
+    const { persetOption, option } = props.config;
+    const { dataSource = [] } = option || {};
+    const { unit: presetUnit, showDeviceName: presetShowDeviceName } = persetOption || {};
+    const convert = dataSource.map((item) => {
+      return {
+        [item.attribute + '-' + item.deviceId]: item.deviceName + '-' + item.attributeName,
+        id: item.deviceId,
+      };
+    });
+
+    const uniqueSet = new Set();
+    const uniqueArr = convert.filter((obj) => {
+      const jsonString = JSON.stringify(obj);
+      const isUnique = !uniqueSet.has(jsonString);
+      uniqueSet.add(jsonString);
+      return isUnique;
+    });
+    return {
+      uniqueArr,
+      dataSource: dataSource?.map((item) => {
+        const { unit, showDeviceName } = item.componentInfo || {};
+        const { attribute, attributeName, attributeRename, deviceName, deviceRename, deviceId } =
+          item;
+        return {
+          unit: unit ?? presetUnit,
+          attribute,
+          attributeName: attributeRename || attributeName,
+          showDeviceName: showDeviceName ?? presetShowDeviceName,
+          deviceName: deviceRename || deviceName,
+          id: deviceId,
+        };
+      }),
+    };
+  });
 
-  // const randomFn = () => {
-  //   useIntervalFn(() => {
-  //     const value = (Math.random() * 100).toFixed(0);
-  //     unref(chartInstance)?.setOption({
-  //       series: [{ data: [{ value }] }, { data: [{ value }] }],
-  //     } as EChartsOption);
-  //   }, 3000);
-  // };
+  const { forEachGroupMessage } = useReceiveMessage();
+  const { getNumberValue } = useReceiveValue();
 
-  const updateFn: MultipleDataFetchUpdateFn = () => {};
+  const updateFn: MultipleDataFetchUpdateFn = async (message, deviceId, attribute) => {
+    const list: IList = {};
+    const list1: IList = {};
+    forEachGroupMessage(message, deviceId, attribute, (attribute, value, timespan) => {
+      list[deviceId + attribute] = getNumberValue(value);
+      list.time = timespan || list.time;
+
+      if (timespan && value) {
+        list1[attribute + '-' + deviceId] = {
+          attribute: attribute + '-' + deviceId,
+          value: value ? getNumberValue(value) : value,
+          time: timespan,
+        };
+      }
+    });
+    await nextTick();
+    setTableData([...Object.values(list1), ...toRaw(unref(getDataSource()))]);
+  };
 
   useMultipleDataFetch(props, updateFn);
+  onMounted(async () => {
+    !props.config.option.dataSource &&
+      setTableData([
+        { attribute: '温度', value: 1, time: '2023-06-29' },
+        { attribute: '湿度', value: 1, time: '2023-06-29' },
+        { attribute: '湿度', value: 1, time: '2023-06-29' },
+      ]);
+
+    await nextTick();
+    resize();
+  });
+  const resize = async () => {
+    const { height } = unref(getContainerSize);
+    height && setProps({ maxHeight: height - 110, scroll: { x: 470, y: height - 110 } });
+
+    await nextTick();
+    redoHeight();
+  };
 
-  // const { getRatio } = useComponentScale(props);
+  const { getContainerSize } = useComponentScale(props, resize);
 </script>
 
 <template>
-  <main class="flex flex-col justify-center items-center">
+  <main class="flex flex-col justify-center items-center w-full h-full">
     <DeviceName :config="config" />
-    <div>
+    <div class="w-full h-full">
       <!-- <PageWrapper> -->
-      <BasicTable @register="registerTable" />
+      <BasicTable autoCreateKey style="flex: auto" @register="registerTable" />
       <!-- </PageWrapper> -->
     </div>
   </main>

@@ -8,24 +8,17 @@
   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,
-      },
+      // {
+      //   field: ComponentConfigFieldEnum.SHOW_DEVICE_NAME,
+      //   label: '显示设备名称',
+      //   component: 'Checkbox',
+      //   defaultValue: option.showDeviceName,
+      // },
     ],
     showActionButtonGroup: false,
     labelWidth: 120,

 <script lang="ts" setup>
   import { EChartsOption, ECharts, init } from 'echarts';
-  import { unref, ref, onMounted, nextTick, toRaw } from 'vue';
-  import { useMultipleDataFetch } from '../../../hook/useSocket';
-  import { ComponentPropsConfigType, MultipleDataFetchUpdateFn } from '../../../index.type';
+  import { unref, ref, onMounted, nextTick, toRaw, computed } from 'vue';
+  import { ComponentPropsConfigType } from '../../../index.type';
   import { option } from './config';
-  import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
+  // 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';
+  import { useIntervalFn } from '@vueuse/core';
+  import { useMultipleDataFetch } from '../../../hook/socket/useSocket';
+  import { MultipleDataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
+  import { useReceiveMessage } from '../../../hook/useReceiveMessage';
+  import { formatToDateTime } from '/@/utils/dateUtil';
+  interface IList {
+    [key: string]: string | number;
+  }
 
   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 time = ref<Nullable<number>>(null);
+  const updateInterval = ref<number>(1000); //默认每秒更新一次
+  const maxDataPoints = ref<number>(30); //默认每秒显示10个数据点
 
-  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 chartData = ref<{ time: string | number; value: number }[]>([]);
+  const legendData = ref<string[]>(['温度']);
+  const timeList = ref<string[]>([]);
+
+  const generateRandomData = () => {
+    const minValue = 0;
+    const maxValue = 100;
+    const time = new Date().toLocaleTimeString();
+    const value = Math.floor(Math.random() * (maxValue - minValue + 1)) + minValue;
+    return { time, value, name: '温度' };
+  };
 
   const options = (): EChartsOption => {
-    // getStageColor(gradientInfo);
     return {
-      trigger: 'axis',
-      axisPointer: {
-        lineStyle: {
-          width: 1,
-          color: '#019680',
-        },
-      },
       tooltip: {
-        show: true,
+        // trigger: 'axis',
       },
       legend: {
         top: '10%',
         left: 'center',
-        data: ['温度', '湿度'],
+        data: ['温度'],
       },
       grid: {
-        top: '45%',
-        left: '20%',
-        bottom: '14%',
+        top: '30%',
+        left: '6%',
+        right: '10%',
+        bottom: '8%',
         containLabel: true,
       },
       xAxis: {
         type: 'category',
-        splitLine: {
-          show: true,
-          lineStyle: {
-            width: 1,
-            type: 'solid',
-            color: 'rgba(226,226,226,0.5)',
-          },
-        },
-        data: toRaw(unref(data)).map((item) => item.name),
+        // boundaryGap: false,
       },
       yAxis: {
         type: 'value',
-        boundaryGap: [0, '50%'],
-        splitLine: {
-          show: false,
-        },
+        boundaryGap: [0, '100%'],
       },
-      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;
-          }),
-        },
-      ],
+      series: [{ type: 'line', name: '温度', data: [] }],
     };
   };
 
+  const random = () => {
+    useIntervalFn(() => {
+      const newData = generateRandomData();
+      chartData.value.push(newData);
+      if (unref(chartData).length > maxDataPoints.value) {
+        chartData.value.shift();
+      }
+      unref(chartInstance)?.setOption({
+        xAxis: {
+          data: toRaw(unref(chartData).map((data) => data.time)),
+        },
+        series: [{ data: toRaw(unref(chartData).map((item) => item.value)) }],
+      });
+    }, updateInterval);
+  };
+
+  const getDesign = computed(() => {
+    const { persetOption, option } = props.config;
+    const { dataSource = [] } = option || {};
+    const {
+      unit: presetUnit,
+      fontColor: presetFontColor,
+      // lineColor: persetLineColor,
+    } = persetOption || {};
+
+    return {
+      dataSource: dataSource?.map((item) => {
+        const { unit, showDeviceName, fontColor } = item.componentInfo || {};
+        const { attribute, attributeRename, deviceId, attributeName, deviceName, deviceRename } =
+          item;
+        return {
+          unit: unit ?? presetUnit,
+          fontColor: fontColor ?? presetFontColor,
+          attribute,
+          attributeName: attributeRename || attributeName,
+          showDeviceName,
+          deviceName: deviceRename || deviceName,
+          id: deviceId,
+          // lineColor: lineColor || persetLineColor,
+        };
+      }),
+    };
+  });
+
   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 {};
+  const series = ref(
+    unref(getDesign).dataSource.map((item) => {
+      return {
+        type: 'line',
+        name: `${item.deviceName} - ${item.attributeName}`,
+        data: [] as { name: string; value: number }[],
+        id: item.id,
+        attribute: item.attribute,
+        // itemStyle: {
+        //   color: item.lineColor,
+        // },
+        // lineStyle: {
+        //   color: item.lineColor,
+        // },
+      };
+    })
+  );
+
+  const { forEachGroupMessage } = useReceiveMessage();
+
+  const updateFn: MultipleDataFetchUpdateFn = async (message, deviceId, attribute) => {
+    legendData.value = unref(getDesign).dataSource.map((item) => {
+      return `${item.deviceName} - ${item.attributeName}`;
+    });
+    const list: IList | any = {};
+    forEachGroupMessage(message, deviceId, attribute, (attribute, value, timespan) => {
+      list.time = timespan || list.time;
+      series.value.forEach((item) => {
+        if (item.id === deviceId && item.attribute === attribute) {
+          item.data.push({
+            name: formatToDateTime(list.time, 'YYYY-MM-DD HH:mm:ss'),
+            value: value,
+          });
+          if (item.data.length > unref(maxDataPoints)) {
+            item.data.shift();
+          }
+        }
+      });
+    });
+    list.time && timeList.value.push(formatToDateTime(list.time, 'YYYY-MM-DD HH:mm:ss'));
+    if (unref(timeList).length > unref(maxDataPoints)) {
+      timeList.value.shift();
+    }
+    await nextTick();
+    unref(chartInstance)?.setOption({
+      xAxis: {
+        data: toRaw(unref(timeList)),
+      },
+      legend: {
+        data: toRaw(unref(legendData)),
+      },
+      series: toRaw(
+        unref(series).map((item) => {
+          const { type, name, data } = item;
+          return {
+            type,
+            name,
+            data,
+            // itemStyle,
+            // lineStyle,
+          };
+        })
+      ),
+    });
   };
 
   useMultipleDataFetch(props, updateFn);
-
   onMounted(() => {
     initial();
-    // !props.config.option.uuid && randomFn();
-    !props.config.option.uuid;
+    !props.config.option.dataSource?.length && random();
   });
 
   const resize = async () => {
     await nextTick();
 
     // 修改echarts大小
-    unref(chartInstance)?.setOption({
-      legend: {
-        textStyle: {
-          fontSize: 14 * unref(getRatio),
-        },
-      },
-    } as EChartsOption);
+    // unref(chartInstance)?.setOption({
+    //   legend: {
+    //     textStyle: {
+    //       fontSize: 14 * unref(getRatio),
+    //     },
+    //   },
+    // } as EChartsOption);
     unref(chartInstance)?.resize();
   };
 
-  const { getRatio } = useComponentScale(props, resize);
+  useComponentScale(props, resize);
 </script>
 
 <template>
-  <main class="w-full h-full flex flex-col justify-center items-center">
+  <main class="w-full h-full flex flex-col justify-center items-center flex-1">
     <DeviceName :config="config" />
-    <div ref="chartRefEl" class="flex-1 w-full h-full"> </div>
-    <UpdateTime :time="time" />
+    <div
+      ref="chartRefEl"
+      class="flex-1 w-full h-7/8 flex-col justify-center items-center flex mb-3"
+    >
+    </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';
+// 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,
+  // StatisticsComponent1Config,
+  // StatisticsComponent2Config,
+  StatisticsComponent3Config,
+  StatisticsComponent4Config,
+  StatisticsComponent5Config,
+  StatisticsComponent6Config,
 ];

 <script lang="ts" setup>
-  import { ComponentPropsConfigType, DataFetchUpdateFn } from '/@/views/visual/packages/index.type';
+  import { ComponentPropsConfigType } 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 { ref, onMounted, unref } from 'vue';
   import { useIntervalFn } from '@vueuse/core';
   import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
   import { useReceiveValue } from '../../../hook/useReceiveValue';
+  import { useDataFetch } from '../../../hook/socket/useSocket';
+  import { DataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
 
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;

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

 <script lang="ts" setup>
-  import { ComponentPropsConfigType, DataFetchUpdateFn } from '/@/views/visual/packages/index.type';
+  import { ComponentPropsConfigType } 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 } from 'vue';
   import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
+  import { useDataFetch } from '../../../hook/socket/useSocket';
+  import { DataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
 
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;
@@ -30,6 +31,7 @@
   const updateFn: DataFetchUpdateFn = (message, attribute) => {
     const { data = {} } = message;
     const [latest] = data[attribute] || [];
+    if (!latest.length) return;
     const [_, value] = latest;
     currentValue.value = value;
   };

 <script lang="ts" setup>
-  import { ComponentPropsConfigType, DataFetchUpdateFn } from '/@/views/visual/packages/index.type';
+  import { ComponentPropsConfigType } 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 } from 'vue';
   import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
   import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
+  import { useDataFetch } from '../../../hook/socket/useSocket';
+  import { DataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
 
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;
@@ -33,6 +34,7 @@
   const updateFn: DataFetchUpdateFn = (message, attribute) => {
     const { data = {} } = message;
     const [info] = data[attribute] || [];
+    if (!info.length) return;
     const [timespan, value] = info;
     currentValue.value = value;
     time.value = timespan;

 <script lang="ts" setup>
-  import { ComponentPropsConfigType, DataFetchUpdateFn } from '/@/views/visual/packages/index.type';
+  import { ComponentPropsConfigType } 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 { ref } from 'vue';
   import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
   import { SvgIcon } from '/@/components/Icon';
   import { computed } from 'vue';
   import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
+  import { useDataFetch } from '../../../hook/socket/useSocket';
+  import { DataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
 
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;
@@ -42,6 +43,7 @@
   const updateFn: DataFetchUpdateFn = (message, attribute) => {
     const { data = {} } = message;
     const [latest] = data[attribute] || [];
+    if (!latest.length) return;
     const [timespan, value] = latest;
     currentValue.value = value;
     time.value = timespan;

 <script lang="ts" setup>
-  import { ComponentPropsConfigType, DataFetchUpdateFn } from '/@/views/visual/packages/index.type';
+  import { ComponentPropsConfigType } 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 } from 'vue';
   import { SvgIcon } from '/@/components/Icon';
   import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
+  import { useDataFetch } from '../../../hook/socket/useSocket';
+  import { DataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
 
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;
@@ -39,6 +40,7 @@
   const updateFn: DataFetchUpdateFn = (message, attribute) => {
     const { data = {} } = message;
     const [info] = data[attribute] || [];
+    if (!info.length) return;
     const [_, value] = info;
     currentValue.value = value;
   };

@@ -12,6 +12,7 @@ import { ComponentConfigFieldEnum } from '/@/views/visual/packages/enum';
 export const option: PublicPresetOptions = {
   multipleDataSourceComponent: true,
   [ComponentConfigFieldEnum.FONT_COLOR]: '#000',
+  [ComponentConfigFieldEnum.MAX_NUMBER]: 100,
   [ComponentConfigFieldEnum.UNIT]: '℃',
   [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
   [ComponentConfigFieldEnum.BACKGROUND_COLOR]: '#377dff',

@@ -3,6 +3,7 @@
   import { useForm, BasicForm } from '/@/components/Form';
   import { PublicFormInstaceType } from '/@/views/visual/dataSourceBindPanel/index.type';
   import { option } from './config';
+  import { nextTick } from 'vue';
   const [register, { getFieldsValue, setFieldsValue, resetFields }] = useForm({
     schemas: [
       {
@@ -23,7 +24,27 @@
           defaultValue: option.backgroundColor,
         },
       },
-
+      {
+        field: ComponentConfigFieldEnum.MAX_NUMBER,
+        label: '最大值',
+        component: 'InputNumber',
+        defaultValue: 100,
+        componentProps: ({ formActionType }) => {
+          const { setFieldsValue } = formActionType;
+          return {
+            placeholder: '请输入最大值',
+            min: 100,
+            onChange: async (e) => {
+              if (!e) {
+                await nextTick();
+                setFieldsValue({
+                  [ComponentConfigFieldEnum.MAX_NUMBER]: 100,
+                });
+              }
+            },
+          };
+        },
+      },
       {
         field: ComponentConfigFieldEnum.UNIT,
         label: '数值单位',

 <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 { ComponentPropsConfigType } from '../../../index.type';
+  import { Slider } from 'ant-design-vue';
   import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
-  import { unref } from 'vue';
-  import { onMounted } from 'vue';
-  import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
   import { useReceiveMessage } from '../../../hook/useReceiveMessage';
   import { buildUUID } from '/@/utils/uuid';
   import { useReceiveValue } from '../../../hook/useReceiveValue';
+  import { ref, computed, unref, onMounted } from 'vue';
+  import { useMultipleDataFetch } from '../../../hook/socket/useSocket';
+  import { MultipleDataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
 
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;
@@ -32,6 +28,7 @@
     deviceName?: string;
     attributeName?: string;
     deviceRename?: string;
+    maxNumber?: number;
   }
 
   const defaultValue: PercentType[] = [
@@ -40,8 +37,8 @@
       fontColor: '#377dff',
       backgroundColor: '#377dff',
       unit: '℃',
-      deviceName: '温度',
-      attribute: '1',
+      deviceName: '温湿度',
+      attribute: '温度',
       id: buildUUID(),
     },
     {
@@ -49,8 +46,8 @@
       fontColor: '#1E8667',
       backgroundColor: '#1E8667',
       unit: '℃',
-      deviceName: '温度',
-      attribute: '3',
+      deviceName: '温湿度',
+      attribute: '湿度',
       id: buildUUID(),
     },
   ];
@@ -62,21 +59,21 @@
       unit: presetUnit,
       fontColor: presetFontColor,
       backgroundColor: persetBackgroundColor,
+      maxNumber: persetMaxNumber,
     } = persetOption || {};
     return {
       dataSource: dataSource.map((item) => {
-        const { unit, fontColor, backgroundColor } = item.componentInfo || {};
+        const { unit, fontColor, backgroundColor, maxNumber } = item.componentInfo || {};
         const { attribute, attributeRename, deviceName, deviceRename, deviceId, attributeName } =
           item;
         return {
           unit: unit ?? presetUnit,
           fontColor: fontColor ?? presetFontColor,
           backgroundColor: backgroundColor ?? persetBackgroundColor,
-          deviceName,
-          deviceRename,
+          deviceName: deviceRename || deviceName,
           attribute,
-          attributeRename,
-          attributeName,
+          attributeName: attributeRename || attributeName,
+          maxNumber: maxNumber || persetMaxNumber,
           id: deviceId,
         } as PercentType;
       }),
@@ -92,7 +89,7 @@
   const updateFn: MultipleDataFetchUpdateFn = (message, deviceId, attribute) => {
     forEachGroupMessage(message, deviceId, attribute, (attribute, value, timespan) => {
       percentList.value.forEach((item) => {
-        if (item.id === deviceId && item.attribute === attribute) {
+        if (item.id === deviceId && item.attribute === attribute && value) {
           item.value = getNumberValue(value);
           time.value = timespan;
         }
@@ -117,9 +114,9 @@
       <div class="flex justify-between">
         <div class="text-gray-500 text-sm truncate" :style="{ color: item.fontColor }">
           {{
-            `${item.deviceRename || item.deviceName}
+            `${item.deviceName}
             -
-            ${item.attributeRename || item.attributeName || item.attribute || '温度'}`
+            ${item.attributeName || item.attribute || '温度'}`
           }}
         </div>
         <span class="text-lg" :style="{ color: item.fontColor }"
@@ -127,24 +124,39 @@
         >
       </div>
       <div>
-        <Progress :strokeColor="item.backgroundColor" :percent="item.value" :showInfo="false" />
+        <!-- <Progress :strokeColor="item.backgroundColor" :percent="item.value" :showInfo="false" /> -->
+        <Slider
+          ref="sliderEl"
+          :style="{ '--slider-color': item.backgroundColor }"
+          :value="item.value"
+          :disabled="true"
+          :min="0"
+          :max="item.maxNumber"
+        />
       </div>
     </div>
-    <UpdateTime :time="time" />
+    <!-- <UpdateTime :time="time" /> -->
   </main>
 </template>
 <style lang="less" scoped>
-  // :deep(.ant-progress-success-bg, .ant-progress-bg) {
-  //   background: '#2196F3' !important;
-  // }
-  // :deep(.ant-slider-handle) {
-  //   all: unset;
-  // }
-  // :deep(.ant-slider-track) {
-  //   background: var(--slider-color) !important;
-  //   height: 8px;
-  // }
-  // :deep(.ant-slider-rail) {
-  //   height: 8px;
-  // }
+  :deep(.ant-progress-success-bg, .ant-progress-bg) {
+    background: #2196f3 !important;
+  }
+
+  :deep(.ant-slider-handle) {
+    all: unset;
+  }
+
+  :deep(.ant-slider-track) {
+    background: var(--slider-color) !important;
+    height: 8px;
+  }
+
+  :deep(.ant-slider-rail) {
+    height: 8px;
+  }
+
+  :deep(.ant-slider-disabled) {
+    cursor: auto !important;
+  }
 </style>

 <script lang="ts" setup>
-  import { ComponentPropsConfigType, MultipleDataFetchUpdateFn } from '../../../index.type';
-
+  import { ComponentPropsConfigType } 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 { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
   import { computed } from 'vue';
   import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
   import { useReceiveMessage } from '../../../hook/useReceiveMessage';
   import { useReceiveValue } from '../../../hook/useReceiveValue';
+  import { useMultipleDataFetch } from '../../../hook/socket/useSocket';
+  import { MultipleDataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
 
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;
@@ -29,42 +28,36 @@
     return {
       dataSource: dataSource.map((item) => {
         const { fontColor, icon, iconColor, unit } = item.componentInfo;
-        const { attribute, attributeRename, deviceName, deviceRename, deviceId } = item;
+        const { attribute, attributeRename, deviceName, deviceRename, deviceId, attributeName } =
+          item;
 
         return {
           unit: unit ?? persetUnit,
           fontColor: fontColor ?? persetFontColor,
           icon: icon ?? persetIcon,
           iconColor: iconColor ?? persetIconColor,
-          attribute: attribute || attributeRename,
-          attributeRename,
-          deviceName,
-          deviceRename,
+          attribute,
+          deviceName: deviceRename || deviceName,
+          attributeName: attributeRename || attributeName,
           id: deviceId,
         };
-        // return {
-        //   unit: unit ?? persetUnit,
-        //   fontColor: fontColor ?? persetFontColor,
-        //   icon: icon ?? persetIcon,
-        //   iconColor: iconColor ?? persetIconColor,
-        //   attribute: attribute || attributeRename,
-        //   attributeRename,
-        // };
       }),
     };
   });
   const defaultSvgList = ref<any>([
     {
       value: 26.2,
-      name: 'wendu',
+      deviceName: '温湿度',
+      attributeName: '温度',
       icon: 'zongfushe',
-      unit: 'kw',
+      unit: '℃',
       iconColor: '#367BFF',
       fontColor: '#357CFB',
     },
     {
       value: 53.7,
-      name: 'shidu',
+      deviceName: '温湿度',
+      attributeName: '湿度',
       icon: 'guangzhaoqiangdu',
       unit: '℃',
       iconColor: '#FFA000',
@@ -80,33 +73,14 @@
   );
 
   const updateFn: MultipleDataFetchUpdateFn = (message, deviceId, attribute) => {
-    // console.log(unref(getDesign).dataSource, 'dataSource');
     forEachGroupMessage(message, deviceId, attribute, (attribute, value, timespan) => {
       updateSvgList.value.forEach((item) => {
-        if (item.id === deviceId && item.attribute === attribute) {
+        if (item.id === deviceId && item.attribute === attribute && value) {
           item.value = getNumberValue(value);
           time.value = timespan;
         }
       });
-      // });
     });
-    // console.log(unref(svgList), 'svglist');
-    // 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);
@@ -119,20 +93,18 @@
       style="width: 86%"
       v-for="item in updateSvgList"
       :key="item.id"
-      class="flex justify-between items-center"
+      class="flex justify-between items-center mt-2"
     >
       <div class="flex items-center">
         <SvgIcon
           :name="item.icon!"
           prefix="iconfont"
-          :size="45"
+          :size="40"
           :style="{ color: item.iconColor }"
         />
 
         <div class="text-gray-500 text-lg truncate ml-6">{{
-          item.deviceRename ||
-          item.deviceName + '-' + (item.attributeRename || item.attribute) ||
-          '温度'
+          item.deviceName + '-' + item.attributeName || '温度'
         }}</div>
       </div>
 
@@ -141,6 +113,6 @@
         <span>{{ item.unit }} </span>
       </h1>
     </div>
-    <UpdateTime :time="time" />
+    <!-- <UpdateTime :time="time" /> -->
   </main>
 </template>

@@ -3,6 +3,7 @@ import { TextComponent2Config } from './TextComponent2';
 import { TextComponent3Config } from './TextComponent3';
 import { TextComponent4Config } from './TextComponent4';
 import { ValueList1Config } from './ValueList1';
+import { ValueList2Config } from './ValueList2';
 
 export const TextList = [
   TextComponent1Config,
@@ -10,4 +11,5 @@ export const TextList = [
   TextComponent3Config,
   TextComponent4Config,
   ValueList1Config,
+  ValueList2Config,
 ];

@@ -14,6 +14,7 @@ import { OrgTreeSelect } from '/@/views/common/OrgTreeSelect';
 import { TransportTypeEnum } from '/@/views/device/profiles/components/TransportDescript/const';
 import { CommandTypeEnum } from '/@/views/rule/linkedge/config/config.data';
 import { DataActionModeEnum } from '/@/enums/toolEnum';
+import { TaskTypeEnum } from '/@/views/task/center/config';
 
 useComponentRegister('OrgTreeSelect', OrgTreeSelect);
 
@@ -24,6 +25,7 @@ export interface CommonDataSourceBindValueType extends Record<DataSourceField, s
     command?: string;
     commandType?: string;
     callType?: string;
+    [ksy: string]: string | undefined;
   };
 }
 
@@ -33,6 +35,7 @@ export enum DataSourceField {
   TRANSPORT_TYPE = 'transportType',
   ORIGINATION_ID = 'organizationId',
   DEVICE_ID = 'deviceId',
+  DEVICE_CODE = 'deviceCode', //设备地址码
   DEVICE_PROFILE_ID = 'deviceProfileId',
   ATTRIBUTE = 'attribute',
   ATTRIBUTE_NAME = 'attributeName',
@@ -41,10 +44,15 @@ export enum DataSourceField {
   DEVICE_RENAME = 'deviceRename',
   LONGITUDE_ATTRIBUTE = 'longitudeAttribute',
   LATITUDE_ATTRIBUTE = 'latitudeAttribute',
-
+  CODE_TYPE = 'codeType',
   COMMAND = 'command',
+  OPEN_COMMAND = 'openCommand',
+  CLOSE_COMMAND = 'closeCommand',
   COMMAND_TYPE = 'commandType',
   SERVICE = 'service',
+  OPEN_SERVICE = 'openService',
+  CLOSE_SERVICE = 'closeService',
+  EXTENSION_DESC = 'extensionDesc',
   CALL_TYPE = 'callType',
 }
 
@@ -54,7 +62,10 @@ const isControlComponent = (category?: string) => PackagesCategoryEnum.CONTROL =
 
 const isBooleanComponent = (componentKeys: { categoryKey?: string; componentKey?: string }) => {
   const { categoryKey, componentKey } = componentKeys;
-  return categoryKey == 'OTHER' && componentKey == 'SwitchSignalLight';
+  return (
+    categoryKey == 'OTHER' &&
+    (componentKey == 'SwitchSignalLight' || componentKey == 'SwitchStatus')
+  );
 };
 
 const getDeviceService = async (deviceProfileId: string) => {
@@ -69,7 +80,7 @@ const getDeviceService = async (deviceProfileId: string) => {
 const getDeviceAttribute = async (params: DeviceAttributeParams) => {
   try {
     const data = await getDeviceAttributes(params);
-    if (data) return data.map((item) => ({ label: item.name, value: item.identifier }));
+    if (data) return data.map((item) => ({ ...item, label: item.name, value: item.identifier }));
   } catch (error) {}
   return [];
 };
@@ -79,7 +90,6 @@ export const commonDataSourceSchemas = (): FormSchema[] => {
   const isUpdate = unref(mode) === DataActionModeEnum.UPDATE;
   const selectWidgetKeys = useSelectWidgetKeys();
   const category = unref(selectWidgetKeys).categoryKey;
-
   return [
     {
       field: DataSourceField.IS_GATEWAY_DEVICE,
@@ -158,6 +168,7 @@ export const commonDataSourceSchemas = (): FormSchema[] => {
               [DataSourceField.ATTRIBUTE]: null,
               [DataSourceField.ATTRIBUTE_NAME]: null,
               [DataSourceField.TRANSPORT_TYPE]: option[DataSourceField.TRANSPORT_TYPE],
+              [DataSourceField.COMMAND_TYPE]: null,
             });
           },
           getPopupContainer: () => document.body,
@@ -225,6 +236,9 @@ export const commonDataSourceSchemas = (): FormSchema[] => {
           onChange(_value, record: MasterDeviceList) {
             setFieldsValue({
               [DataSourceField.DEVICE_NAME]: record?.label,
+              [DataSourceField.CODE_TYPE]: record?.codeType,
+              [DataSourceField.DEVICE_CODE]: record?.code,
+              [DataSourceField.COMMAND_TYPE]: null,
             });
           },
           placeholder: '请选择设备',
@@ -233,19 +247,94 @@ export const commonDataSourceSchemas = (): FormSchema[] => {
       },
     },
     {
+      field: DataSourceField.CODE_TYPE,
+      component: 'Input',
+      label: '设备标识符',
+      show: false,
+    },
+
+    {
+      field: DataSourceField.DEVICE_CODE,
+      component: 'Input',
+      show: false,
+      label: '设备地址码',
+    },
+
+    {
       field: DataSourceField.ATTRIBUTE_NAME,
       component: 'Input',
       label: '属性名',
       show: false,
     },
     {
+      field: DataSourceField.COMMAND_TYPE,
+      component: 'ApiSelect',
+      label: '命令类型',
+      defaultValue: CommandTypeEnum.CUSTOM.toString(),
+      rules: [{ required: true, message: '请选择命令类型' }],
+      colProps: { span: 8 },
+      ifShow: ({ model }) => {
+        return isControlComponent(category!) && isTcpProfile(model[DataSourceField.TRANSPORT_TYPE]);
+      },
+      componentProps: ({ formActionType, formModel }) => {
+        const { setFieldsValue } = formActionType;
+        const { codeType } = formModel || {};
+        return {
+          // api: findDictItemByCode,
+          api: async (params: Recordable) => {
+            try {
+              const record = await findDictItemByCode(params);
+              if (unref(selectWidgetKeys).componentKey == 'LateralNumericalControl') {
+                return record.filter(
+                  (item) => item.itemValue == CommandTypeEnum.ATTRIBUTE.toString()
+                );
+              }
+              if (codeType == TaskTypeEnum.MODBUS_RTU) {
+                // setFieldsValue({ [DataSourceField.COMMAND_TYPE]: undefined });
+                return record.filter(
+                  (item) => item.itemValue !== CommandTypeEnum.CUSTOM.toString()
+                );
+              } else {
+                return record.filter(
+                  (item) => item.itemValue !== CommandTypeEnum.ATTRIBUTE.toString()
+                );
+              }
+            } catch (error) {
+              console.log(error);
+              return [];
+            }
+          },
+          params: {
+            dictCode: 'custom_define',
+          },
+          labelField: 'itemText',
+          valueField: 'itemValue',
+          placeholder: '请选择命令类型',
+          getPopupContainer: () => document.body,
+          onChange() {
+            setFieldsValue({
+              [DataSourceField.COMMAND]: null,
+              [DataSourceField.SERVICE]: null,
+              [DataSourceField.OPEN_COMMAND]: null,
+              [DataSourceField.CLOSE_COMMAND]: null,
+              [DataSourceField.OPEN_SERVICE]: null,
+              [DataSourceField.CLOSE_SERVICE]: null,
+              [DataSourceField.CALL_TYPE]: null,
+              [DataSourceField.ATTRIBUTE]: null,
+            });
+          },
+        };
+      },
+    },
+    {
       field: DataSourceField.ATTRIBUTE,
       component: 'ApiSelect',
       label: '属性',
       colProps: { span: 8 },
       rules: [{ required: true, message: '请选择属性' }],
       ifShow: ({ model }) =>
-        !(isTcpProfile(model[DataSourceField.TRANSPORT_TYPE]) && isControlComponent(category!)),
+        !(isTcpProfile(model[DataSourceField.TRANSPORT_TYPE]) && isControlComponent(category!)) ||
+        model[DataSourceField.COMMAND_TYPE] == 2,
       componentProps({ formModel, formActionType }) {
         const { setFieldsValue } = formActionType;
         const deviceProfileId = formModel[DataSourceField.DEVICE_PROFILE_ID];
@@ -253,7 +342,7 @@ export const commonDataSourceSchemas = (): FormSchema[] => {
           api: async () => {
             try {
               if (deviceProfileId) {
-                return await getDeviceAttribute({
+                const option = await getDeviceAttribute({
                   deviceProfileId,
                   dataType:
                     (isControlComponent(category!) &&
@@ -262,59 +351,97 @@ export const commonDataSourceSchemas = (): FormSchema[] => {
                       ? DataTypeEnum.IS_BOOL
                       : undefined,
                 });
+
+                // 选择控制组件4的时候只能选择属性且是（int double类型）
+                if (unref(selectWidgetKeys).componentKey == 'LateralNumericalControl') {
+                  setFieldsValue({
+                    [DataSourceField.COMMAND_TYPE]: CommandTypeEnum.ATTRIBUTE.toString(),
+                  });
+                  return option.filter(
+                    (item) =>
+                      item.detail.dataType.type == 'INT' || item.detail.dataType.type == 'DOUBLE'
+                  );
+                }
+                return option;
               }
             } catch (error) {}
             return [];
           },
           placeholder: '请选择属性',
           getPopupContainer: () => document.body,
-          onChange(value: string, option: Record<'label' | 'value', string>) {
-            setFieldsValue({ [DataSourceField.ATTRIBUTE_NAME]: value ? option.label : null });
+          onChange(value: string, option: Record<'label' | 'value' | any, string>) {
+            setFieldsValue({
+              [DataSourceField.ATTRIBUTE_NAME]: value ? option.label : null,
+              [DataSourceField.EXTENSION_DESC]: value ? JSON.stringify(option.extensionDesc) : '',
+            });
           },
         };
       },
     },
     {
-      field: DataSourceField.COMMAND_TYPE,
+      field: DataSourceField.EXTENSION_DESC,
+      component: 'Input',
+      show: false,
+      label: '扩展描述符',
+    },
+
+    {
+      field: DataSourceField.CALL_TYPE,
+      component: 'Input',
+      ifShow: false,
+      label: 'callType',
+    },
+    {
+      field: DataSourceField.OPEN_SERVICE,
       component: 'ApiSelect',
-      label: '命令类型',
-      defaultValue: CommandTypeEnum.CUSTOM.toString(),
-      rules: [{ required: true, message: '请选择命令类型' }],
+      label: '开服务',
       colProps: { span: 8 },
+      rules: [{ required: true, message: '请选择开服务' }],
       ifShow: ({ model }) =>
-        isControlComponent(category!) && isTcpProfile(model[DataSourceField.TRANSPORT_TYPE]),
-      componentProps: ({ formActionType }) => {
+        isControlComponent(category!) &&
+        model[DataSourceField.COMMAND_TYPE] === CommandTypeEnum.SERVICE.toString() &&
+        isTcpProfile(model[DataSourceField.TRANSPORT_TYPE]),
+      componentProps({ formModel, formActionType }) {
         const { setFieldsValue } = formActionType;
+        const deviceProfileId = formModel[DataSourceField.DEVICE_PROFILE_ID];
+        const transportType = formModel[DataSourceField.TRANSPORT_TYPE];
+        if (isUpdate && ![deviceProfileId, transportType].every(Boolean))
+          return { placeholder: '请选择开服务', getPopupContainer: () => document.body };
         return {
-          api: findDictItemByCode,
-          params: {
-            dictCode: 'custom_define',
+          api: async () => {
+            try {
+              if (deviceProfileId) {
+                const services = await getDeviceService(deviceProfileId);
+                const value = formModel[DataSourceField.SERVICE];
+                if (value) {
+                  const selected = services.find((item) => item.value === value);
+                  selected && setFieldsValue({ [DataSourceField.CALL_TYPE]: selected.callType });
+                }
+                return services;
+              }
+            } catch (error) {}
+            return [];
           },
-          labelField: 'itemText',
-          valueField: 'itemValue',
-          placeholder: '请选择命令类型',
-          onChange() {
+          placeholder: '请选择开服务',
+          getPopupContainer: () => document.body,
+          onChange(value: string, options: ModelOfMatterParams) {
+            const command = value
+              ? (options.functionJson.inputData || [])[0]?.serviceCommand
+              : null;
             setFieldsValue({
-              [DataSourceField.COMMAND]: null,
-              [DataSourceField.SERVICE]: null,
-              [DataSourceField.CALL_TYPE]: null,
+              [DataSourceField.OPEN_COMMAND]: command,
+              [DataSourceField.CALL_TYPE]: value ? options.callType : null,
             });
           },
         };
       },
     },
     {
-      field: DataSourceField.CALL_TYPE,
-      component: 'Input',
-      ifShow: false,
-      label: 'callType',
-    },
-    {
-      field: DataSourceField.SERVICE,
+      field: DataSourceField.CLOSE_SERVICE,
       component: 'ApiSelect',
-      label: '服务',
+      label: '关服务',
       colProps: { span: 8 },
-      rules: [{ required: true, message: '请选择服务' }],
+      rules: [{ required: true, message: '请选择关服务' }],
       ifShow: ({ model }) =>
         isControlComponent(category!) &&
         model[DataSourceField.COMMAND_TYPE] === CommandTypeEnum.SERVICE.toString() &&
@@ -324,7 +451,7 @@ export const commonDataSourceSchemas = (): FormSchema[] => {
         const deviceProfileId = formModel[DataSourceField.DEVICE_PROFILE_ID];
         const transportType = formModel[DataSourceField.TRANSPORT_TYPE];
         if (isUpdate && ![deviceProfileId, transportType].every(Boolean))
-          return { placeholder: '请选择服务', getPopupContainer: () => document.body };
+          return { placeholder: '请选择关服务', getPopupContainer: () => document.body };
         return {
           api: async () => {
             try {
@@ -340,14 +467,14 @@ export const commonDataSourceSchemas = (): FormSchema[] => {
             } catch (error) {}
             return [];
           },
-          placeholder: '请选择服务',
+          placeholder: '请选择关服务',
           getPopupContainer: () => document.body,
           onChange(value: string, options: ModelOfMatterParams) {
             const command = value
               ? (options.functionJson.inputData || [])[0]?.serviceCommand
               : null;
             setFieldsValue({
-              [DataSourceField.COMMAND]: command,
+              [DataSourceField.CLOSE_COMMAND]: command,
               [DataSourceField.CALL_TYPE]: value ? options.callType : null,
             });
           },
@@ -355,11 +482,27 @@ export const commonDataSourceSchemas = (): FormSchema[] => {
       },
     },
     {
-      field: DataSourceField.COMMAND,
+      field: DataSourceField.OPEN_COMMAND,
+      component: 'Input',
+      label: '命令',
+      colProps: { span: 8 },
+      rules: [{ required: true, message: '请输入开下发命令' }],
+      // 是控制组件  && 自定义命令  && 传输协议为TCP
+      ifShow: ({ model }) =>
+        isControlComponent(category!) &&
+        model[DataSourceField.COMMAND_TYPE] === CommandTypeEnum.CUSTOM.toString() &&
+        model[DataSourceField.TRANSPORT_TYPE] &&
+        isTcpProfile(model[DataSourceField.TRANSPORT_TYPE]),
+      componentProps: {
+        placeholder: '请输入开下发命令',
+      },
+    },
+    {
+      field: DataSourceField.CLOSE_COMMAND,
       component: 'Input',
       label: '命令',
       colProps: { span: 8 },
-      rules: [{ required: true, message: '请输入下发命令' }],
+      rules: [{ required: true, message: '请输入关下发命令' }],
       // 是控制组件  && 自定义命令  && 传输协议为TCP
       ifShow: ({ model }) =>
         isControlComponent(category!) &&
@@ -367,7 +510,7 @@ export const commonDataSourceSchemas = (): FormSchema[] => {
         model[DataSourceField.TRANSPORT_TYPE] &&
         isTcpProfile(model[DataSourceField.TRANSPORT_TYPE]),
       componentProps: {
-        placeholder: '请输入下发命令',
+        placeholder: '请输入关下发命令',
       },
     },
     {

@@ -5,6 +5,7 @@ export enum ComponentConfigFieldEnum {
   INSTRUMENT_PANEL_COLOR = 'instrumentPanelColor',
   CONTROL_BAR_COLOR = 'controlBarColor',
   // INSTRUMENT_PANEL_WIDTH = 'instrumentPanelWidth',
+  LINE_COLOR = 'lineColor',
 
   PROGRESS_BAR_CIRCLE = 'progressBarCircle',
 
@@ -19,6 +20,7 @@ export enum ComponentConfigFieldEnum {
   SECOND_PHASE_VALUE = 'secondPhaseValue',
   THIRD_PHASE_VALUE = 'thirdPhaseValue',
   SHOW_DEVICE_NAME = 'showDeviceName',
+  SHOW_TIME = 'showTime',
   GRADIENT_INFO = 'gradientInfo',
 
   FLOWMETER_CONFIG = 'flowmeterConfig',
@@ -28,4 +30,6 @@ export enum ComponentConfigFieldEnum {
   BACKGROUND_COLOR = 'backgroundColor',
   OPEN_COLOR = 'openColor',
   CLOSE_COLOR = 'closeColor',
+  MIN_NUMBER = 'minNumber',
+  MAX_NUMBER = 'maxNumber',
 }

 import { Ref, computed, onUnmounted, unref, watch } from 'vue';
-import { WidgetDataType } from '../../palette/hooks/useDataSource';
+import { WidgetDataType } from '../../../palette/hooks/useDataSource';
 import { useWebSocket } from '@vueuse/core';
 import { useGlobSetting } from '/@/hooks/setting';
 import { isShareMode } from '/@/views/sys/share/hook';
 import { getJwtToken, getShareJwtToken } from '/@/utils/auth';
-import { isNullAndUnDef } from '/@/utils/is';
+import { DataSource } from '../../../palette/types';
+import { CUSTOM_SUBSCRIBE_MESSAGE_COMPONENT_KEY_LIST } from '../../package';
 import {
-  ComponentPropsConfigType,
+  CmdUpdateMsg,
+  CmdUpdateTypeEnum,
   DataFetchUpdateFn,
   EntityTypeEnum,
   MultipleDataFetchUpdateFn,
-  ReceiveGroupMessageType,
+  ReceiveAlarmDataCmdsMessageType,
+  ReceiveEntityCountMessageType,
+  ReceiveEntityDataMessageType,
   ReceiveMessageType,
+  ReceiveTsSubCmdsGroupMessageType,
+  ReceiveTsSubCmdsMessageType,
   ScopeTypeEnum,
-  SubscribeMessageItemType,
   SubscribeMessageType,
-} from '../index.type';
-import { DataSource } from '../../palette/types';
+  TsSubCmdsItemType,
+} from './useSocket.type';
+import { ComponentPropsConfigType } from '../../index.type';
+import { isNullOrUnDef } from '/@/utils/is';
 
 interface DeviceGroupMapType {
   subscriptionId: number;
@@ -29,11 +36,18 @@ interface ComponentUpdateFnMapValueType {
   attributes: string[];
 }
 
-const parseMessage = (text: string): ReceiveMessageType => {
+interface CustomSubscribeMapValueType {
+  uuid: string;
+  updateFn?: Fn;
+}
+
+export type CustomSubscribeSendMessageFnType = (cmdId: number) => void;
+
+const parseMessage = (text: string): ReceiveTsSubCmdsMessageType => {
   try {
     return JSON.parse(text);
   } catch (error) {
-    return {} as ReceiveMessageType;
+    return {} as ReceiveTsSubCmdsMessageType;
   }
 };
 
@@ -48,6 +62,8 @@ class Subscriber {
 
   componentGroupUpdateFnMap = new Map<string, ComponentUpdateFnMapValueType[]>();
 
+  customSubscribeMap = new Map<number, CustomSubscribeMapValueType>();
+
   getNextSubscribeId() {
     return this.subscribeId++;
   }
@@ -55,9 +71,14 @@ class Subscriber {
   clearSubscriber = () => {
     this.deviceGroupMap.clear();
     this.subscriptionMap.clear();
-    this.componentUpdateFnMap.clear();
+    this.customSubscribeMap.clear();
   };
 
+  clearUpdateFn() {
+    this.componentUpdateFnMap.clear();
+    this.componentGroupUpdateFnMap.clear();
+  }
+
   addSubscriber = (info: Record<'deviceId' | 'slaveDeviceId' | 'attribute' | 'uuid', string>) => {
     const { deviceId, attribute, uuid } = info;
     if (!this.deviceGroupMap.has(deviceId)) {
@@ -81,11 +102,11 @@ class Subscriber {
       return {
         cmdId: subscriptionId,
         entityId: deviceId,
-        keys: Array.from(attributes.values()).join(','),
+        keys: Array.from(attributes.values()).filter(Boolean).join(','),
         entityType: EntityTypeEnum.DEVICE,
         scope: ScopeTypeEnum.LATEST_TELEMERY,
         ...(unsubscribe ? { unsubscribe } : {}),
-      } as SubscribeMessageItemType;
+      } as TsSubCmdsItemType;
     });
     return { tsSubCmds: message } as SubscribeMessageType;
   }
@@ -98,14 +119,14 @@ class Subscriber {
     return this.genBasicMessage();
   }
 
-  getScopeMessage(message: ReceiveMessageType, attribute: string[]) {
+  getScopeMessage(message: ReceiveTsSubCmdsMessageType, attribute: string[]) {
     const data = attribute.reduce((prev, next) => {
       return { ...prev, [next]: (message.data || {})[next] || [[]] };
-    }, {} as ReceiveMessageType['data']);
+    }, {} as ReceiveTsSubCmdsMessageType['data']);
 
     const latestValues = attribute.reduce((prev, next) => {
       return { ...prev, [next]: (message.latestValues || {})[next] || [[]] };
-    }, {} as ReceiveMessageType['data']);
+    }, {} as ReceiveTsSubCmdsMessageType['data']);
 
     return {
       subscriptionId: message.subscriptionId,
@@ -113,10 +134,14 @@ class Subscriber {
       errorMsg: message.errorMsg,
       data,
       latestValues,
-    } as ReceiveMessageType;
+    } as ReceiveTsSubCmdsMessageType;
   }
 
-  getGroupScopeMessage(message: ReceiveMessageType, attribute: string[], deviceId: string) {
+  getGroupScopeMessage(
+    message: ReceiveTsSubCmdsMessageType,
+    attribute: string[],
+    deviceId: string
+  ) {
     const result = this.getScopeMessage(message, attribute);
 
     return {
@@ -127,7 +152,13 @@ class Subscriber {
       latestValues: {
         [deviceId]: result.latestValues,
       },
-    } as ReceiveGroupMessageType;
+    } as ReceiveTsSubCmdsGroupMessageType;
+  }
+
+  customSubscribe(uuid: string, sendMessageFn: CustomSubscribeSendMessageFnType, updateFn: Fn) {
+    const cmdId = this.getNextSubscribeId();
+    this.customSubscribeMap.set(cmdId, { uuid, updateFn });
+    sendMessageFn(cmdId);
   }
 
   trackUpdate(uuid: string, fn: Fn) {
@@ -144,8 +175,31 @@ class Subscriber {
   }
 
   triggerUpdate(message: ReceiveMessageType) {
+    if (message.errorCode) {
+      return;
+    }
+
+    if (isEntityDataUpdateMsg(message)) {
+      this.triggerEntityDataMessage(message);
+      return;
+    }
+
+    if (isAlarmDataUpdateMsg(message)) {
+      this.triggerAlarmDataMesssage(message);
+      return;
+    }
+
+    if (isEntityCountUpdateMsg(message)) {
+      return;
+    }
+
+    if (!isNullOrUnDef(message.subscriptionId)) {
+      this.triggerTsSubCmdsMessage(message);
+    }
+  }
+
+  triggerTsSubCmdsMessage(message: ReceiveTsSubCmdsMessageType) {
     const { subscriptionId } = message;
-    if (isNullAndUnDef(subscriptionId)) return;
     const deviceId = this.subscriptionMap.get(subscriptionId);
     if (!deviceId) return;
     const deviceGroup = this.deviceGroupMap.get(deviceId);
@@ -155,29 +209,59 @@ class Subscriber {
     const updateGroups = this.componentGroupUpdateFnMap.get(deviceId);
 
     if (updateGroups) {
-      (updateGroups || []).forEach((item) => {
+      for (const item of updateGroups || []) {
         const { attributes, fn } = item;
         try {
-          if (!fn) return;
+          if (!fn) continue;
           fn?.(this.getGroupScopeMessage(message, attributes, deviceId), deviceId, attributes);
         } catch (error) {
           console.error(`deviceId: ${deviceId}`);
           throw error;
         }
-      });
+      }
+      // return;
     }
 
-    subscriptionGroup.forEach((item) => {
+    for (const item of subscriptionGroup) {
       const { attribute, uuid } = item;
       const updateFn = this.componentUpdateFnMap.get(uuid);
       try {
-        if (!updateFn) return;
+        if (!updateFn) continue;
         updateFn?.(this.getScopeMessage(message, [attribute]), attribute);
       } catch (error) {
         console.error(`uuid: ${uuid}`);
         throw error;
       }
-    });
+    }
+  }
+
+  triggerAlarmDataMesssage(message: ReceiveAlarmDataCmdsMessageType) {
+    const { cmdId } = message;
+    const isCustomSubscribeMessage = this.customSubscribeMap.get(cmdId);
+    if (isCustomSubscribeMessage) {
+      const updateFn = isCustomSubscribeMessage.updateFn;
+      try {
+        updateFn?.(message);
+      } catch (error) {
+        console.error(`Custom subscribe message invoke update function failed`);
+        throw error;
+      }
+      return;
+    }
+  }
+  triggerEntityDataMessage(message: ReceiveEntityDataMessageType) {
+    const { cmdId } = message;
+    const isCustomSubscribeMessage = this.customSubscribeMap.get(cmdId);
+    if (isCustomSubscribeMessage) {
+      const updateFn = isCustomSubscribeMessage.updateFn;
+      try {
+        updateFn?.(message);
+      } catch (error) {
+        console.error(`Custom subscribe message invoke update function failed`);
+        throw error;
+      }
+      return;
+    }
   }
 }
 
@@ -206,12 +290,14 @@ export const useSocket = (dataSourceRef: Ref<WidgetDataType[]>) => {
 
   const initSubscribe = () => {
     subscriber.clearSubscriber();
-    unref(dataSourceRef).forEach((item) => {
-      item.dataSource.forEach((temp) => {
+
+    for (const item of unref(dataSourceRef)) {
+      if (CUSTOM_SUBSCRIBE_MESSAGE_COMPONENT_KEY_LIST.includes(item.frontId)) continue;
+      for (const temp of item.dataSource) {
         const { deviceId, slaveDeviceId, attribute, uuid } = temp;
         subscriber.addSubscriber({ deviceId, slaveDeviceId, attribute, uuid });
-      });
-    });
+      }
+    }
   };
 
   watch(
@@ -233,9 +319,37 @@ export const useSocket = (dataSourceRef: Ref<WidgetDataType[]>) => {
 
   onUnmounted(() => {
     close();
+    subscriber.clearSubscriber();
+    subscriber.clearUpdateFn();
   });
+
+  return {
+    send,
+    close,
+  };
 };
 
+export function isEntityDataUpdateMsg(
+  message: ReceiveMessageType
+): message is ReceiveEntityDataMessageType {
+  const updateMsg = message as CmdUpdateMsg;
+  return updateMsg.cmdId !== undefined && updateMsg.cmdUpdateType === CmdUpdateTypeEnum.ENTITY_DATA;
+}
+
+export function isAlarmDataUpdateMsg(
+  message: ReceiveMessageType
+): message is ReceiveAlarmDataCmdsMessageType {
+  const updateMsg = message as CmdUpdateMsg;
+  return updateMsg.cmdId !== undefined && updateMsg.cmdUpdateType === CmdUpdateTypeEnum.ALARM_DATA;
+}
+
+export function isEntityCountUpdateMsg(
+  message: ReceiveMessageType
+): message is ReceiveEntityCountMessageType {
+  const updateMsg = message as CmdUpdateMsg;
+  return updateMsg.cmdId !== undefined && updateMsg.cmdUpdateType === CmdUpdateTypeEnum.COUNT_DATA;
+}
+
 export const useDataFetch = (
   props: { config: ComponentPropsConfigType },
   updateFn: DataFetchUpdateFn
@@ -288,16 +402,6 @@ export const useMultipleDataFetch = (
   });
 
   if (!Object.keys(unref(getDataSourceGroup)).length) return;
-  // const getBindAttributes = computed(() => {
-  //   const attributes = props.config.option.dataSource?.map((item) => item.attribute);
-  //   return [...new Set(attributes)];
-  // });
-
-  // if (!unref(getBindAttributes).length) return;
-
-  // const getDeviceId = computed(() => {
-  //   return props.config.option.dataSource?.at(0)?.deviceId;
-  // });
 
   watch(
     () => getDataSourceGroup,
@@ -318,3 +422,27 @@ export const useMultipleDataFetch = (
 
   return {};
 };
+
+export const useCustomDataFetch = (
+  props: { config: ComponentPropsConfigType },
+  transformMessage: Fn,
+  updateFn: Fn
+) => {
+  const getUUID = computed(() => {
+    return props.config.option.uuid;
+  });
+
+  watch(
+    () => getUUID,
+    () => {
+      subscriber.customSubscribe(props.config.option.uuid, transformMessage, updateFn);
+    },
+    {
+      immediate: true,
+    }
+  );
+
+  return {
+    getNextSubscribeId: subscriber.getNextSubscribeId,
+  };
+};

+export interface SubscribeMessageType {
+  tsSubCmds?: TsSubCmdsItemType[];
+  alarmDataCmds?: AlarmDataCmdsItemType[];
+  alarmDataUnsubscribeCmds?: UnsubscribeCmdsItemType[];
+  attrSubCmds?: [];
+  entityCountCmds?: [];
+  entityCountUnsubscribeCmds?: UnsubscribeCmdsItemType[];
+  entityDataCmds?: [];
+  entityDataUnsubscribeCmds?: UnsubscribeCmdsItemType[];
+  historyCmds?: [];
+}
+
+export interface UnsubscribeCmdsItemType {
+  cmdId: number;
+}
+
+export enum CmdUpdateTypeEnum {
+  ENTITY_DATA = 'ENTITY_DATA',
+  ALARM_DATA = 'ALARM_DATA',
+  COUNT_DATA = 'COUNT_DATA',
+}
+
+export interface AlarmDataCmdsItemType {
+  cmdId: number;
+}
+
+export interface TsSubCmdsItemType {
+  cmdId: number;
+  entityId: string;
+  entityType: string;
+  keys?: string;
+  scope?: string;
+  unsubscribe?: boolean;
+}
+
+export interface ReceiveTsSubCmdsMessageType {
+  subscriptionId: number;
+  errorCode: number;
+  errorMsg: Nullable<string>;
+  data: Record<string, [number, string][]>;
+  latestValues: Record<string, number>;
+}
+
+export interface ReceiveTsSubCmdsGroupMessageType {
+  subscriptionId: number;
+  errorCode: number;
+  errorMsg: Nullable<string>;
+  data: {
+    string: Record<string, [number, string][]>;
+  };
+  latestValues: {
+    string: Record<string, number>;
+  };
+}
+
+export interface PageData<T> {
+  data: T[];
+  totalPages: number;
+  totalElements: number;
+  hasNext: boolean;
+}
+
+export interface CmdUpdateMsg {
+  cmdId: number;
+  errorCode: number;
+  errorMsg: string;
+  cmdUpdateType: CmdUpdateTypeEnum;
+}
+
+export interface DataUpdateMsg<T> extends CmdUpdateMsg {
+  data?: PageData<T>;
+  update?: T[];
+}
+
+export enum EntityType {
+  TENANT = 'TENANT',
+  TENANT_PROFILE = 'TENANT_PROFILE',
+  CUSTOMER = 'CUSTOMER',
+  USER = 'USER',
+  DASHBOARD = 'DASHBOARD',
+  ASSET = 'ASSET',
+  DEVICE = 'DEVICE',
+  DEVICE_PROFILE = 'DEVICE_PROFILE',
+  ASSET_PROFILE = 'ASSET_PROFILE',
+  ALARM = 'ALARM',
+  RULE_CHAIN = 'RULE_CHAIN',
+  RULE_NODE = 'RULE_NODE',
+  EDGE = 'EDGE',
+  ENTITY_VIEW = 'ENTITY_VIEW',
+  WIDGETS_BUNDLE = 'WIDGETS_BUNDLE',
+  WIDGET_TYPE = 'WIDGET_TYPE',
+  API_USAGE_STATE = 'API_USAGE_STATE',
+  TB_RESOURCE = 'TB_RESOURCE',
+  OTA_PACKAGE = 'OTA_PACKAGE',
+  RPC = 'RPC',
+  QUEUE = 'QUEUE',
+}
+
+export enum AliasEntityType {
+  CURRENT_CUSTOMER = 'CURRENT_CUSTOMER',
+  CURRENT_TENANT = 'CURRENT_TENANT',
+  CURRENT_USER = 'CURRENT_USER',
+  CURRENT_USER_OWNER = 'CURRENT_USER_OWNER',
+}
+
+export interface HasUUID {
+  id: string;
+}
+
+export interface TsValue {
+  ts: number;
+  value: string;
+  count?: number;
+}
+
+export interface EntityId extends HasUUID {
+  entityType: EntityType | AliasEntityType;
+}
+
+export interface ComparisonTsValue {
+  current?: TsValue;
+  previous?: TsValue;
+}
+
+export interface EntityData {
+  entityId: EntityId;
+  latest: { [entityKeyType: string]: { [key: string]: TsValue } };
+  timeseries: { [key: string]: TsValue[] };
+  aggLatest?: { [id: number]: ComparisonTsValue };
+}
+
+/**
+ * @description entity data receive message
+ */
+export interface ReceiveEntityDataMessageType extends DataUpdateMsg<EntityData> {
+  cmdUpdateType: CmdUpdateTypeEnum.ENTITY_DATA;
+}
+
+/**
+ * @description 告警
+ */
+export interface ReceiveAlarmDataCmdsMessageType extends DataUpdateMsg<Recordable> {
+  cmdUpdateType: CmdUpdateTypeEnum.ALARM_DATA;
+  allowedEntities: number;
+  totalEntities: number;
+}
+
+/**
+ * @description entity count receive message
+ */
+export interface ReceiveEntityCountMessageType extends CmdUpdateMsg {
+  cmdUpdateType: CmdUpdateTypeEnum.COUNT_DATA;
+  count: number;
+}
+
+/**
+ * @description 接受消息
+ */
+export type ReceiveMessageType =
+  | ReceiveTsSubCmdsMessageType
+  | ReceiveAlarmDataCmdsMessageType
+  | ReceiveEntityDataMessageType
+  | ReceiveEntityCountMessageType;
+
+export enum EntityTypeEnum {
+  DEVICE = 'DEVICE',
+}
+
+export enum ScopeTypeEnum {
+  LATEST_TELEMERY = 'LATEST_TELEMERY',
+}
+
+export enum AttributeScopeEnum {
+  CLIENT_SCOPE = 'CLIENT_SCOPE',
+  SERVER_SCOPE = 'SERVER_SCOPE',
+  SHARED_SCOPE = 'SHARED_SCOPE',
+}
+
+export type DataFetchUpdateFn = (message: ReceiveTsSubCmdsMessageType, attr: string) => void;
+
+export type MultipleDataFetchUpdateFn = (
+  message: ReceiveTsSubCmdsGroupMessageType,
+  deviceId: string,
+  attr: string[]
+) => void;

@@ -3,6 +3,15 @@ import { ComponentPropsConfigType } from '../index.type';
 import { componentOptionsInitConfig } from '../publicConfig';
 
 export const useComponentScale = (props: { config: ComponentPropsConfigType }, onScale?: Fn) => {
+  const getContainerSize = computed(() => {
+    const { option } = props.config;
+    const { widthPx, heightPx } = option;
+    return {
+      width: widthPx,
+      height: heightPx,
+    };
+  });
+
   const getRatio = computed(() => {
     try {
       const { option, attr } = props.config;
@@ -47,5 +56,5 @@ export const useComponentScale = (props: { config: ComponentPropsConfigType }, o
       onScale?.();
     });
 
-  return { getScale, getScaleRadio, getRatio };
+  return { getScale, getScaleRadio, getRatio, getContainerSize };
 };

-import { ReceiveGroupMessageType } from '../index.type';
+import { ReceiveTsSubCmdsGroupMessageType } from '../index.type';
 
 export const useReceiveMessage = () => {
   const forEachGroupMessage = (
-    message: ReceiveGroupMessageType,
+    message: ReceiveTsSubCmdsGroupMessageType,
     deviceId: string,
     attributes: string[],
     Fn: (attribute: string, value: any, timespan: number) => void

@@ -14,7 +14,7 @@ export function useSendCommand() {
     return false;
   };
 
-  const sendCommand = async (record: DataSource, value: any) => {
+  const sendCommand = async (record: DataSource, value: any, isModbusCommand = false) => {
     if (!record) return false;
     const { customCommand, attribute } = record || {};
     const { deviceId } = record;
@@ -25,16 +25,18 @@ export function useSendCommand() {
       let params: string | Recordable = {
         [attribute!]: Number(value),
       };
+      if (isModbusCommand) {
+        params = value;
+      }
 
       let sendCommandFn = sendCommandOneway;
       // 如果是TCP设备从物模型中获取下发命令(TCP网关子设备无物模型服务与事件)
-      if (customCommand?.transportType === TransportTypeEnum.TCP) {
+      if (customCommand?.transportType === TransportTypeEnum.TCP && !isModbusCommand) {
         params = customCommand.command!;
-        if (customCommand.callType === ServiceCallTypeEnum.ASYNC) {
+        if (customCommand.callType === ServiceCallTypeEnum.SYNC) {
           sendCommandFn = sendCommandTwoway;
         }
       }
-
       // 控制按钮下发命令为0 或 1
       await sendCommandFn({
         deviceId,

@@ -19,8 +19,9 @@ export enum PackagesCategoryNameEnum {
   // PICTURE = '图片组件',
   CONTROL = '控制组件',
   MAP = '地图组件',
-  FLOWMETER = '流量计',
+  FLOWMETER = '计量计',
   STATISTICS = '统计',
+  ALARM = '告警',
   OTHER = '其他',
 }
 
@@ -35,6 +36,7 @@ export enum PackagesCategoryEnum {
   MAP = 'MAP',
   FLOWMETER = 'FLOWMETER',
   STATISTICS = 'STATISTICS',
+  ALARM = 'ALARM',
   OTHER = 'OTHER',
 }
 
@@ -137,71 +139,7 @@ export interface PackagesType {
   [PackagesCategoryEnum.CONTROL]: ConfigType[];
   [PackagesCategoryEnum.MAP]: ConfigType[];
   [PackagesCategoryEnum.FLOWMETER]: ConfigType[];
-  // [PackagesCategoryEnum.STATISTICS]: ConfigType[];
+  [PackagesCategoryEnum.STATISTICS]: ConfigType[];
   [PackagesCategoryEnum.OTHER]: ConfigType[];
+  [PackagesCategoryEnum.ALARM]: ConfigType[];
 }
-
-export interface SubscribeMessageType {
-  tsSubCmds: SubscribeMessageItemType[];
-}
-
-export interface SubscribeMessageItemType {
-  cmdId: number;
-  entityId: string;
-  entityType: string;
-  keys?: string;
-  scope?: string;
-  unsubscribe?: boolean;
-}
-
-export interface ReceiveMessageType {
-  subscriptionId: number;
-  errorCode: number;
-  errorMsg: Nullable<string>;
-  data: Record<string, [number, string][]>;
-  latestValues: Record<string, number>;
-}
-
-export interface ReceiveGroupMessageType {
-  subscriptionId: number;
-  errorCode: number;
-  errorMsg: Nullable<string>;
-  data: {
-    string: Record<string, [number, string][]>;
-  };
-  latestValues: {
-    string: Record<string, number>;
-  };
-}
-
-export enum EntityTypeEnum {
-  DEVICE = 'DEVICE',
-}
-
-export enum ScopeTypeEnum {
-  LATEST_TELEMERY = 'LATEST_TELEMERY',
-}
-
-export type DataFetchUpdateFn = (message: ReceiveMessageType, attr: string) => void;
-
-export type MultipleDataFetchUpdateFn = (
-  message: ReceiveGroupMessageType,
-  deviceId: string,
-  attr: string[]
-) => void;
-
-// 旧 组件key
-// TEXT_COMPONENT_1 = 'text-component-1',
-// TEXT_COMPONENT_2 = 'text-component-2',
-// TEXT_COMPONENT_3 = 'text-component-3',
-// TEXT_COMPONENT_4 = 'text-component-4',
-// TEXT_COMPONENT_5 = 'text-component-5',
-// INSTRUMENT_COMPONENT_1 = 'instrument-component-1',
-// INSTRUMENT_COMPONENT_2 = 'instrument-component-2',
-// DIGITAL_DASHBOARD_COMPONENT = 'digital-dashboard-component',
-// PICTURE_COMPONENT_1 = 'picture-component-1',
-// CONTROL_COMPONENT_TOGGLE_SWITCH = 'control-component-toggle-switch',
-// CONTROL_COMPONENT_SWITCH_WITH_ICON = 'control-component-switch-with-icon',
-// CONTROL_COMPONENT_SLIDING_SWITCH = 'control-component-sliding-switch',
-// MAP_COMPONENT_TRACK_REAL = 'map-component-track-real',
-// MAP_COMPONENT_TRACK_HISTORY = 'map-component-track-history',

@@ -5,7 +5,8 @@ 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 { STATISTICSList } from './components/Statistics';
+import { AlarmList } from './components/Alarm';
 import { PackagesCategoryEnum, PackagesType } from './index.type';
 
 export const packageList: PackagesType = {
@@ -15,6 +16,12 @@ export const packageList: PackagesType = {
   [PackagesCategoryEnum.CONTROL]: ControlList,
   [PackagesCategoryEnum.MAP]: MapList,
   [PackagesCategoryEnum.FLOWMETER]: FlowmeterList,
-  // [PackagesCategoryEnum.STATISTICS]: STATISTICSList,
+  [PackagesCategoryEnum.STATISTICS]: STATISTICSList,
+  [PackagesCategoryEnum.ALARM]: AlarmList,
   [PackagesCategoryEnum.OTHER]: OtherList,
 };
+
+/**
+ * @description
+ */
+export const CUSTOM_SUBSCRIBE_MESSAGE_COMPONENT_KEY_LIST: string[] = ['DeviceAlarmHistory'];

 <script lang="ts" setup>
-  import { ComponentPropsConfigType, DataFetchUpdateFn } from '/@/views/visual/packages/index.type';
+  import { ComponentPropsConfigType } from '/@/views/visual/packages/index.type';
   import { option } from './config';
-  import { useDataFetch } from '/@/views/visual/packages/hook/useSocket';
+  import { useDataFetch } from '../hook/socket/useSocket';
+  import { DataFetchUpdateFn } from '../hook/socket/useSocket.type';
 
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;

@@ -6,7 +6,7 @@
   import { DataActionModeEnum } from '/@/enums/toolEnum';
   import { VisualComponentPermission } from '../..';
   import { Tooltip } from 'ant-design-vue';
-  import { MoreOutlined, AreaChartOutlined } from '@ant-design/icons-vue';
+  import { MoreOutlined, AreaChartOutlined, FieldTimeOutlined } from '@ant-design/icons-vue';
   import { WidgetDataType } from '../../hooks/useDataSource';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { addDataComponent, deleteDataComponent } from '/@/api/dataBoard';
@@ -29,6 +29,7 @@
     (event: 'ok'): void;
     (event: 'update', data: WidgetDataType): void;
     (event: 'openTrend', data: WidgetDataType): void;
+    (event: 'openAlarm', data: WidgetDataType): void;
   }>();
 
   const { isCustomerUser } = useRole();
@@ -88,6 +89,27 @@
     return isBoolean(flag) ? flag : true;
   });
 
+  const isAlarmHistory = computed(() => {
+    const frontId = props.sourceInfo.frontId;
+    if (
+      // frontId == 'DeviceAlarm' ||
+      frontId == 'DeviceAlarmHistory' ||
+      frontId == 'StatisticsComponent7'
+    ) {
+      return true;
+    } else {
+      return false;
+    }
+  });
+  const isAlarm = computed(() => {
+    const frontId = props.sourceInfo.frontId;
+    if (frontId == 'DeviceAlarm') {
+      return false;
+    } else {
+      return true;
+    }
+  });
+
   async function handleCopy() {
     const id = props.sourceInfo.id;
     const copyRecord = props.rawDataSource.componentData.find((item) => item.id === id);
@@ -120,20 +142,30 @@
   const handleOpenTrendModal = () => {
     emit('openTrend', toRaw(props.sourceInfo));
   };
+
+  const handleAlarmModal = () => {
+    emit('openAlarm', toRaw(props.sourceInfo));
+  };
 </script>
 
 <template>
   <section class="p-5 flex flex-col w-full">
     <main class="flex w-full h-full h-7">
       <Tooltip :title="sourceInfo.name">
-        <div class="flex-1 w-full h-full flex text-lg justify-center font-semibold">
-          {{ sourceInfo.name }}
+        <div class="flex-1 w-full h-full flex text-lg justify-center font-semibold truncate">
+          <div class="w-full truncate text-center">
+            {{ sourceInfo.name }}
+          </div>
         </div>
       </Tooltip>
 
       <div v-if="!getIsSharePage" class="flex items-center w-16 justify-evenly">
-        <Tooltip v-if="!isCustomerUser && hasTrendQueryIcon" title="趋势">
-          <AreaChartOutlined class="text-lg" @click="handleOpenTrendModal" />
+        <Tooltip
+          v-if="!isCustomerUser && hasTrendQueryIcon && isAlarm"
+          :title="isAlarmHistory ? '时间' : '趋势'"
+        >
+          <FieldTimeOutlined v-if="isAlarmHistory" class="text-lg" @click="handleAlarmModal" />
+          <AreaChartOutlined v-else class="text-lg" @click="handleOpenTrendModal" />
         </Tooltip>
         <AuthDropDown
           v-if="!isCustomerUser && dropMenuList.length"

+import moment from 'moment';
+import { FormSchema } from '/@/components/Form';
+import { ColEx } from '/@/components/Form/src/types';
+import { useGridLayout } from '/@/hooks/component/useGridLayout';
+import { intervalOption } from '/@/views/device/localtion/cpns/TimePeriodForm/helper';
+export enum QueryWay {
+  LATEST = 'latest',
+  TIME_PERIOD = 'timePeriod',
+}
+
+export enum SchemaFiled {
+  DEVICE_ID = 'deviceId',
+  WAY = 'way',
+  TIME_PERIOD = 'timePeriod',
+  KEYS = 'keys',
+  DATE_RANGE = 'dataRange',
+  START_TS = 'startTs',
+  END_TS = 'endTs',
+  INTERVAL = 'interval',
+  LIMIT = 'limit',
+  AGG = 'agg',
+  ORDER_BY = 'orderBy',
+  PAGE_SIZE = 'pageSize',
+}
+
+export enum AggregateDataEnum {
+  MIN = 'MIN',
+  MAX = 'MAX',
+  AVG = 'AVG',
+  SUM = 'SUM',
+  COUNT = 'COUNT',
+  NONE = 'NONE',
+}
+export const formSchema = (): FormSchema[] => {
+  return [
+    {
+      field: SchemaFiled.WAY,
+      label: '查询方式',
+      component: 'RadioGroup',
+      defaultValue: QueryWay.LATEST,
+      componentProps({ formActionType }) {
+        const { setFieldsValue } = formActionType;
+        return {
+          options: [
+            { label: '最后', value: QueryWay.LATEST },
+            { label: '时间段', value: QueryWay.TIME_PERIOD },
+          ],
+          onChange(event: ChangeEvent) {
+            (event.target as HTMLInputElement).value === QueryWay.LATEST
+              ? setFieldsValue({
+                  [SchemaFiled.DATE_RANGE]: [],
+                  [SchemaFiled.START_TS]: null,
+                  [SchemaFiled.END_TS]: null,
+                })
+              : setFieldsValue({ [SchemaFiled.START_TS]: null });
+          },
+          getPopupContainer: () => document.body,
+        };
+      },
+    },
+
+    {
+      field: SchemaFiled.PAGE_SIZE,
+      label: '分页条数',
+      component: 'InputNumber',
+      defaultValue: 20,
+      ifShow: true,
+      componentProps() {
+        return {
+          min: 10,
+          max: 50000,
+          getPopupContainer: () => document.body,
+        };
+      },
+    },
+    {
+      field: SchemaFiled.START_TS,
+      label: '最后数据',
+      component: 'Select',
+      ifShow({ values }) {
+        return values[SchemaFiled.WAY] === QueryWay.LATEST;
+      },
+      defaultValue: 2592000000,
+      componentProps({ formActionType }) {
+        const { setFieldsValue } = formActionType;
+        return {
+          options: intervalOption,
+          onChange() {
+            setFieldsValue({ [SchemaFiled.INTERVAL]: null });
+          },
+          getPopupContainer: () => document.body,
+        };
+      },
+      colProps: useGridLayout(2, 2, 2, 2, 2, 2) as unknown as ColEx,
+      rules: [{ required: true, message: '最后数据为必选项', type: 'number' }],
+    },
+    {
+      field: SchemaFiled.DATE_RANGE,
+      label: '时间段',
+      component: 'RangePicker',
+      ifShow({ values }) {
+        return values[SchemaFiled.WAY] === QueryWay.TIME_PERIOD;
+      },
+      rules: [{ required: true, message: '时间段为必选项' }],
+      componentProps({ formActionType }) {
+        const { setFieldsValue } = formActionType;
+        return {
+          showTime: {
+            defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')],
+          },
+          onChange() {
+            setFieldsValue({ [SchemaFiled.INTERVAL]: null });
+          },
+          getPopupContainer: () => document.body,
+        };
+      },
+      colProps: useGridLayout(2, 2, 2, 2, 2, 2) as unknown as ColEx,
+    },
+    {
+      field: SchemaFiled.LIMIT,
+      label: '最大条数',
+      component: 'InputNumber',
+      ifShow({ values }) {
+        return values[SchemaFiled.AGG] === AggregateDataEnum.NONE;
+      },
+      helpMessage: ['根据查询条件，查出的数据条数不超过这个值'],
+      componentProps() {
+        return {
+          max: 50000,
+          min: 7,
+          getPopupContainer: () => document.body,
+        };
+      },
+    },
+  ];
+};

+export { default as AlarmTimeModal } from './index.vue';

+<script lang="ts" setup>
+  import { formSchema, SchemaFiled } from './config';
+  import { useForm } from '/@/components/Form';
+  import { useModalInner } from '/@/components/Modal';
+  import { useGridLayout } from '/@/hooks/component/useGridLayout';
+  import { ColEx } from '/@/components/Form/src/types';
+  import { BasicForm } from '/@/components/Form';
+  import { BasicModal } from '/@/components/Modal';
+  import { nextTick } from 'vue';
+  const emit = defineEmits(['register', 'getAlarmForm', 'getHistoryForm']);
+  // const emit = defineEmits<{
+  //   (event: 'getAlarmForm', data: WidgetDataType): void;
+  // }>();
+
+  // const fontId = ref('');
+  const [registerModal, { closeModal }] = useModalInner(async () => {});
+
+  const [register, method] = useForm({
+    schemas: formSchema(),
+    baseColProps: useGridLayout(1) as unknown as ColEx,
+    showSubmitButton: false,
+    showResetButton: false,
+    rowProps: {
+      gutter: 10,
+    },
+    labelWidth: 120,
+    fieldMapToTime: [
+      [SchemaFiled.DATE_RANGE, [SchemaFiled.START_TS, SchemaFiled.END_TS], 'YYYY-MM-DD HH:ss:mm'],
+    ],
+  });
+
+  const handleCancel = () => {
+    // destory()
+  };
+  const handleSubmit = async () => {
+    const values = method.getFieldsValue();
+    // if (unref(fontId) == 'StatisticsComponent7') {
+    //   emit('getHistoryForm', values);
+    // } else {
+
+    // }
+    emit('getAlarmForm', values);
+    await nextTick();
+    closeModal();
+  };
+</script>
+
+<template>
+  <BasicModal
+    @register="registerModal"
+    @cancel="handleCancel"
+    @ok="handleSubmit"
+    :destroy-on-close="true"
+    :show-ok-btn="true"
+    cancel-text="关闭"
+    width="40%"
+    title="历史趋势"
+  >
+    <section
+      class="flex flex-col p-4 h-full w-full min-w-7/10"
+      style="color: #f0f2f5; background-color: #f0f2f5"
+    >
+      <section class="bg-white my-3 p-2">
+        <BasicForm @register="register" />
+      </section>
+    </section>
+  </BasicModal>
+</template>
+
+<style scoped></style>

+import { Ref, inject, provide } from 'vue';
+
+const SymbolKey = Symbol('alarm-info');
+interface IAlarm {
+  pageSize: number;
+  time?: string | number;
+  startTs?: string | number;
+  endTs?: string | number;
+}
+
+export interface AlarmContextType {
+  alarmForm: Ref<IAlarm>;
+  getAlarmForm?: (value: any) => void;
+}
+
+export const createAlarmContext = (options: AlarmContextType) => {
+  provide(SymbolKey, options);
+};
+
+export const useAlarmContext = () => {
+  return inject<AlarmContextType>(SymbolKey) || ({} as Partial<AlarmContextType>);
+};

+import { inject, provide } from 'vue';
+
+const SymbolKey = Symbol('data-board');
+
+export interface ContextOptionsType {
+  send: (data: string | ArrayBuffer | Blob, useBuffer?: boolean | undefined) => boolean;
+  close: (code?: number | undefined, reason?: string | undefined) => void;
+}
+
+export const createDataBoardContext = (options: ContextOptionsType) => {
+  provide(SymbolKey, options);
+};
+
+export const useDataBoardContext = () => {
+  return inject<ContextOptionsType>(SymbolKey) || ({} as Partial<ContextOptionsType>);
+};

+import { Ref, inject, provide } from 'vue';
+
+const SymbolKey = Symbol('history-info');
+interface IHistory {
+  [key: string]: string;
+}
+
+export interface HistoryContextType {
+  historyForm: Ref<IHistory> | any;
+  getHistoryForm: (value: any) => void;
+}
+
+export const createHistoryContext = (options: HistoryContextType) => {
+  provide(SymbolKey, options);
+};
+
+export const useHistoryContext = () => {
+  return inject<HistoryContextType>(SymbolKey) || ({} as Partial<HistoryContextType>);
+};

@@ -25,10 +25,14 @@
   import { ModalParamsType } from '/#/utils';
   import { DataActionModeEnum } from '/@/enums/toolEnum';
   import { HistoryTrendModal } from './components/HistoryTrendModal';
-  import { useSocket } from '../packages/hook/useSocket';
+  import { AlarmTimeModal } from './components/AlarmTimeModal';
   import { watch } from 'vue';
   import { useRootSetting } from '/@/hooks/setting/useRootSetting';
   import { ThemeEnum } from '/@/enums/appEnum';
+  import { createDataBoardContext } from './hooks/useDataBoardContext';
+  import { useSocket } from '/@/views/visual/packages/hook/socket/useSocket';
+  import { createAlarmContext } from './hooks/useAlarmTime';
+  import { createHistoryContext } from './hooks/useHistoryForm';
 
   const props = defineProps<{
     value?: Recordable;
@@ -72,7 +76,74 @@
     openTrendModal(true, { mode: DataActionModeEnum.READ, record: data } as ModalParamsType);
   };
 
-  useSocket(dataSource);
+  // 设备告警时间选择
+  const [registerAlarmModal, { openModal: openAlarmModal }] = useModal();
+  const handleOpenAlarm = (data: WidgetDataType) => {
+    openAlarmModal(true, { mode: DataActionModeEnum.READ, record: data } as ModalParamsType);
+  };
+
+  const alarmForm = ref<{
+    time?: number | string;
+    pageSize: number;
+    startTs?: number | string;
+    endTs?: string | number;
+  }>({
+    time: 2592000000,
+    pageSize: 20,
+    startTs: undefined,
+    endTs: undefined,
+  });
+
+  //告警发送数据
+  const getAlarmForm = (values) => {
+    const { way, pageSize, startTs, endTs } = values;
+    if (way == 'timePeriod') {
+      alarmForm.value = {
+        time: undefined,
+        startTs,
+        endTs,
+        pageSize,
+      };
+    } else
+      alarmForm.value = {
+        time: startTs,
+        pageSize,
+        startTs: undefined,
+        endTs: undefined,
+      };
+  };
+  createAlarmContext({ alarmForm: alarmForm });
+
+  // 历史数据发送
+  const historyForm = ref({
+    startTs: Date.now() - 30 * 24 * 60 * 60 * 1000,
+    endTs: Date.now(),
+    agg: 'NONE',
+    limit: 30,
+    interval: undefined,
+    way: 'latest',
+  });
+
+  const getHistoryForm = (values) => {
+    const { startTs, endTs, agg, limit, interval, way } = values;
+    historyForm.value = {
+      startTs,
+      endTs,
+      agg,
+      limit,
+      interval,
+      way,
+    };
+    if (way === 'latest') {
+      historyForm.value.startTs = Date.now() - startTs;
+      historyForm.value.endTs = Date.now();
+    }
+  };
+  createHistoryContext({ historyForm: historyForm, getHistoryForm });
+
+  const { send, close } = useSocket(dataSource);
+
+  createDataBoardContext({ send, close });
 
   const { getDarkMode } = useRootSetting();
   watch(
@@ -144,6 +215,7 @@
                 :source-info="item"
                 @update="handleUpdateWidget"
                 @open-trend="handleOpenTrend"
+                @open-alarm="handleOpenAlarm"
                 @ok="getDataSource"
               />
             </template>
@@ -159,7 +231,11 @@
 
     <DataSourceBindPanel @register="register" :layout="dataSource" @ok="getDataSource" />
 
+    <!-- 趋势 -->
     <HistoryTrendModal @register="registerTrendModal" />
+
+    <!-- 选择时间 -->
+    <AlarmTimeModal @register="registerAlarmModal" @getAlarmForm="getAlarmForm" />
   </section>
 </template>
 

@@ -28,6 +28,7 @@ export interface DataSource {
   componentInfo: ComponentInfo;
   customCommand: CustomCommand;
   videoConfig?: VideoConfigType;
+  [key: string]: any;
 }
 
 export interface ExtraDataSource extends DataSource, PublicComponentOptions {
@@ -53,12 +54,15 @@ export interface ComponentInfo {
   icon: string;
   iconColor: string;
   showDeviceName: boolean;
+  showTime?: boolean;
   gradientInfo: ComponentInfoGradientInfoType[];
   flowmeterConfig: FlowmeterConfigType;
   pointerColor?: string;
   instrumentPanelColor?: string;
   // instrumentPanelWidth?: string | number;
   progressBarCircle?: Boolean;
+  lineColor?: string;
+  maxNumber?: number;
   [key: string]: any;
 }
 
@@ -68,6 +72,7 @@ export interface CustomCommand {
   command: string;
   service: string;
   callType: string;
+  [key: string]: string | undefined;
 }
 
 export interface ComponentLayoutType {

@@ -80,12 +80,12 @@
         :tab="item.title"
         :forceRender="false"
       >
-        <main class="flex min-h-64 px-2 gap-8 flex-wrap justify-start">
+        <main class="flex min-h-64 px-2 gap-8 flex-wrap justify-start py-2">
           <StageFrame
             class="mt-4"
             v-for="temp in item.items"
             :key="temp.key"
-            @click="handleSelected(temp)"
+            @click.capture="handleSelected(temp)"
             :class="temp.key === props.checked?.componentKey ? '!border-2 !border-blue-500' : ''"
           >
             <component :is="componentMap.get(temp.key)" v-bind="getBindConfig(temp.key)" />