Merge branch 'main_dev' into 'main'

merge Main dev main

See merge request yunteng/thingskit-front!812

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

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

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

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

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

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

@@ -39,6 +39,8 @@ import CustomMinMaxInput from './externalCompns/components/CustomMinMaxInput.vue
 import StructForm from './externalCompns/components/StructForm/StructForm.vue';
 import StructForm from './externalCompns/components/StructForm/StructForm.vue';
 import ApiSelectScrollLoad from './components/ApiSelectScrollLoad.vue';
 import ApiSelectScrollLoad from './components/ApiSelectScrollLoad.vue';
 import InputGroup from './components/InputGroup.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>();
 const componentMap = new Map<ComponentType, Component>();
 
 
@@ -85,6 +87,8 @@ componentMap.set('CustomMinMaxInput', CustomMinMaxInput);
 componentMap.set('StructForm', StructForm);
 componentMap.set('StructForm', StructForm);
 componentMap.set('ApiSelectScrollLoad', ApiSelectScrollLoad);
 componentMap.set('ApiSelectScrollLoad', ApiSelectScrollLoad);
 componentMap.set('InputGroup', InputGroup);
 componentMap.set('InputGroup', InputGroup);
+componentMap.set('RegisterAddressInput', RegisterAddressInput);
+componentMap.set('ExtendDesc', ExtendDesc);
 
 
 export function add(compName: ComponentType, component: Component) {
 export function add(compName: ComponentType, component: Component) {
   componentMap.set(compName, 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,
           required: props.required,
           message: `${functionName}是必填项`,
           message: `${functionName}是必填项`,
+          type: 'number',
         },
         },
       ],
       ],
       componentProps: {
       componentProps: {

@@ -28,7 +28,7 @@ export const validateJSON = (_rule, value = [] as ModelOfMatterParams[], _callba
   return Promise.reject('JSON对象不能为空');
   return Promise.reject('JSON对象不能为空');
 };
 };
 
 
-export const formSchemas = (hasStructForm: boolean): FormSchema[] => {
+export const formSchemas = (hasStructForm: boolean, isTcp = false): FormSchema[] => {
   return [
   return [
     {
     {
       field: FormField.FUNCTION_NAME,
       field: FormField.FUNCTION_NAME,
@@ -276,6 +276,22 @@ export const formSchemas = (hasStructForm: boolean): FormSchema[] => {
       ifShow: ({ values }) => values[FormField.TYPE] === DataTypeEnum.IS_STRING,
       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,
       field: FormField.ACCESS_MODE,
       component: 'ApiRadioGroup',
       component: 'ApiRadioGroup',
       label: '读写类型',
       label: '读写类型',

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

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

@@ -54,10 +54,11 @@
         field: FiledKey.WEBSITE,
         field: FiledKey.WEBSITE,
         label: handleDecode(t('routes.aboutSoftware.websiteLabel')),
         label: handleDecode(t('routes.aboutSoftware.websiteLabel')),
         render: (val: string) => {
         render: (val: string) => {
+          let joinWww = val.substring(0, 8) + 'www.' + val.substring(8);
           return h(
           return h(
             'span',
             '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) {
       if (items.length) {
         const first = items.at(0)!;
         const first = items.at(0)!;
-        const { deviceName, id, severity } = first;
+        const { deviceName, id, severity, type } = first;
 
 
         let key: Nullable<string> = `open-notify-${id}`;
         let key: Nullable<string> = `open-notify-${id}`;
 
 
@@ -82,6 +82,10 @@ export function useAlarmNotify(params: UseAlarmNotifyParams = {}) {
               h('span', { style: { marginRight: '5px' } }, '设备:'),
               h('span', { style: { marginRight: '5px' } }, '设备:'),
               h('span', {}, `[${deviceName}]`),
               h('span', {}, `[${deviceName}]`),
             ]),
             ]),
+            h('div', { style: { marginRight: '5px' } }, [
+              h('span', { style: { marginRight: '5px' } }, '告警场景:'),
+              h('span', {}, `[${type}]`),
+            ]),
             h('div', { style: { marginTop: '5px' } }, [
             h('div', { style: { marginTop: '5px' } }, [
               h('span', { style: { marginRight: '5px' } }, '告警状态:'),
               h('span', { style: { marginRight: '5px' } }, '告警状态:'),
               h(Tag, { color }, () => `${alarmNotifyStatusMean}`),
               h(Tag, { color }, () => `${alarmNotifyStatusMean}`),

@@ -10,6 +10,9 @@ import { ModelOfMatterParams } from '/@/api/device/model/modelOfMatterModel';
 import { toRaw, unref } from 'vue';
 import { toRaw, unref } from 'vue';
 import ObjectModelValidateForm from '/@/components/Form/src/externalCompns/components/ObjectModelValidateForm/ObjectModelValidateForm.vue';
 import ObjectModelValidateForm from '/@/components/Form/src/externalCompns/components/ObjectModelValidateForm/ObjectModelValidateForm.vue';
 import { CommandDeliveryWayEnum, ServiceCallTypeEnum } from '/@/enums/toolEnum';
 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('JSONEditor', JSONEditor);
 useComponentRegister('ObjectModelValidateForm', ObjectModelValidateForm);
 useComponentRegister('ObjectModelValidateForm', ObjectModelValidateForm);
 
 
@@ -17,6 +20,7 @@ export enum TypeEnum {
   IS_GATEWAY = 'GATEWAY',
   IS_GATEWAY = 'GATEWAY',
   SENSOR = 'SENSOR',
   SENSOR = 'SENSOR',
 }
 }
+
 export const isGateWay = (type: string) => {
 export const isGateWay = (type: string) => {
   return type === TypeEnum.IS_GATEWAY;
   return type === TypeEnum.IS_GATEWAY;
 };
 };
@@ -85,6 +89,9 @@ export const step1Schemas: FormSchema[] = [
             transportType,
             transportType,
             deviceProfileId: id,
             deviceProfileId: id,
             gatewayId: null,
             gatewayId: null,
+            codeType: transportType === TransportTypeEnum.TCP ? TaskTypeEnum.MODBUS_RTU : null,
+            code: null,
+            addressCode: null,
           });
           });
         },
         },
         showSearch: true,
         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',
     field: 'code',
     label: '设备标识',
     label: '设备标识',
-    required: true,
+    dynamicRules({ values }) {
+      return [
+        {
+          required:
+            values?.transportType === TransportTypeEnum.TCP &&
+            values.deviceType === DeviceTypeEnum.SENSOR,
+          message: '请输入设备标识符',
+        },
+      ];
+    },
     component: 'Input',
     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',
     field: 'brand',
     component: 'ApiRadioGroup',
     component: 'ApiRadioGroup',
@@ -876,8 +966,8 @@ export const CommandSchemas = (
             const setValues = {
             const setValues = {
               [CommandFieldsEnum.CUSTOM_TYPE]:
               [CommandFieldsEnum.CUSTOM_TYPE]:
                 options.callType === ServiceCallTypeEnum.ASYNC
                 options.callType === ServiceCallTypeEnum.ASYNC
-                  ? CommandDeliveryWayEnum.TWO_WAY
-                  : CommandDeliveryWayEnum.ONE_WAY,
+                  ? CommandDeliveryWayEnum.ONE_WAY
+                  : CommandDeliveryWayEnum.TWO_WAY,
               [CommandFieldsEnum.MODEL_INPUT]: null,
               [CommandFieldsEnum.MODEL_INPUT]: null,
             };
             };
 
 

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

@@ -109,6 +109,15 @@
         unref(DeviceStep1Ref)?.resetFields();
         unref(DeviceStep1Ref)?.resetFields();
         unref(DeviceStep2Ref)?.resetFieldsValueAndStatus();
         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) ? '更新设备成功' : '新增设备成功'));
       const msg = computed(() => (unref(isUpdate) ? '更新设备成功' : '新增设备成功'));
       async function handleOk() {
       async function handleOk() {
@@ -150,6 +159,7 @@
                 ...DeviceStep1Ref.value?.positionState,
                 ...DeviceStep1Ref.value?.positionState,
               },
               },
             };
             };
+            validateNameLength(stepRecord.name);
             await createOrEditDevice(editData);
             await createOrEditDevice(editData);
           } else {
           } else {
             const stepRecord = unref(stepState);
             const stepRecord = unref(stepState);
@@ -178,6 +188,7 @@
                           : null,
                           : null,
                     },
                     },
             };
             };
+            validateNameLength(stepRecord.name);
             await createOrEditDevice(createData);
             await createOrEditDevice(createData);
           }
           }
           createMessage.success(unref(msg));
           createMessage.success(unref(msg));

@@ -127,6 +127,7 @@
   import { copyTransFun } from '/@/utils/fnUtils';
   import { copyTransFun } from '/@/utils/fnUtils';
   import { useDrawer } from '/@/components/Drawer';
   import { useDrawer } from '/@/components/Drawer';
   import DeptDrawer from '/@/views/system/organization/OrganizationDrawer.vue';
   import DeptDrawer from '/@/views/system/organization/OrganizationDrawer.vue';
+  import { TaskTypeEnum } from '/@/views/task/center/config';
 
 
   export default defineComponent({
   export default defineComponent({
     components: {
     components: {
@@ -187,7 +188,7 @@
 
 
       const [register, { validate, resetFields, setFieldsValue, getFieldsValue, updateSchema }] =
       const [register, { validate, resetFields, setFieldsValue, getFieldsValue, updateSchema }] =
         useForm({
         useForm({
-          labelWidth: 120,
+          labelWidth: 140,
           schemas: step1Schemas,
           schemas: step1Schemas,
           actionColOptions: {
           actionColOptions: {
             span: 14,
             span: 14,
@@ -385,11 +386,26 @@
         positionState.latitude = deviceInfo.latitude;
         positionState.latitude = deviceInfo.latitude;
         positionState.address = deviceInfo.address;
         positionState.address = deviceInfo.address;
         devicePic.value = deviceInfo.avatar;
         devicePic.value = deviceInfo.avatar;
-        setFieldsValue(data);
+        setFieldsValue({
+          ...data,
+          code: data?.code,
+          addressCode: parseInt(data?.code || '', 16),
+        });
       }
       }
       // 父组件调用获取字段值的方法
       // 父组件调用获取字段值的方法
       function parentGetFieldsValue() {
       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>
 <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 { PageWrapper } from '/@/components/Page';
   import { BasicTable, useTable } from '/@/components/Table';
   import { BasicTable, useTable } from '/@/components/Table';
   import { realTimeDataColumns } from '../../config/detail.config';
   import { realTimeDataColumns } from '../../config/detail.config';
@@ -14,7 +14,6 @@
   import { BasicModal, useModal } from '/@/components/Modal';
   import { BasicModal, useModal } from '/@/components/Modal';
   import { getDeviceAttrs } from '/@/api/device/deviceManager';
   import { getDeviceAttrs } from '/@/api/device/deviceManager';
   import { DeviceModelOfMatterAttrs, DeviceRecord } from '/@/api/device/model/deviceModel';
   import { DeviceModelOfMatterAttrs, DeviceRecord } from '/@/api/device/model/deviceModel';
-  import { computed } from '@vue/reactivity';
   import { Specs, StructJSON } from '/@/api/device/model/modelOfMatterModel';
   import { Specs, StructJSON } from '/@/api/device/model/modelOfMatterModel';
   import { isArray, isObject } from '/@/utils/is';
   import { isArray, isObject } from '/@/utils/is';
   import { DataTypeEnum } from '/@/components/Form/src/externalCompns/components/StructForm/config';
   import { DataTypeEnum } from '/@/components/Form/src/externalCompns/components/StructForm/config';
@@ -50,11 +49,24 @@
   const grid = {
   const grid = {
     gutter: 8,
     gutter: 8,
     column: 3,
     column: 3,
-  };
+  } as any;
 
 
+  const listElRef = ref<Nullable<ComponentElRef<HTMLDivElement>>>(null);
   const token = getAuthCache(JWT_TOKEN_KEY);
   const token = getAuthCache(JWT_TOKEN_KEY);
   const { socketUrl } = useGlobSetting();
   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({
   const socketInfo = reactive({
+    cmdId: 0,
     origin: `${socketUrl}${token}`,
     origin: `${socketUrl}${token}`,
     attr: undefined as string | undefined,
     attr: undefined as string | undefined,
     originData: [] as DataSource[],
     originData: [] as DataSource[],
@@ -63,6 +75,22 @@
     attrKeys: [] as DeviceModelOfMatterAttrs[],
     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(() => {
   const getSendValue = computed(() => {
     return {
     return {
       tsSubCmds: [
       tsSubCmds: [
@@ -70,8 +98,10 @@
           entityType: 'DEVICE',
           entityType: 'DEVICE',
           entityId: props.deviceDetail!.tbDeviceId,
           entityId: props.deviceDetail!.tbDeviceId,
           scope: 'LATEST_TELEMETRY',
           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({
   const [registerTable, { setTableData }] = useTable({
     columns: realTimeDataColumns,
     columns: realTimeDataColumns,
     showTableSetting: true,
     showTableSetting: true,
+    pagination: pagination as any,
     bordered: true,
     bordered: true,
     showIndexColumn: false,
     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 [registerModal, { openModal }] = useModal();
 
 
   const mode = ref<EnumTableCardMode>(EnumTableCardMode.CARD);
   const mode = ref<EnumTableCardMode>(EnumTableCardMode.CARD);
@@ -127,7 +166,7 @@
   const switchMode = async (value: EnumTableCardMode) => {
   const switchMode = async (value: EnumTableCardMode) => {
     mode.value = value;
     mode.value = value;
     await nextTick();
     await nextTick();
-    setTableData(socketInfo.dataSource);
+    setTableData(socketInfo.originData);
   };
   };
 
 
   const { createMessage } = useMessage();
   const { createMessage } = useMessage();
@@ -238,17 +277,28 @@
   const handleSendCommandModal = (data: DataSource) => {
   const handleSendCommandModal = (data: DataSource) => {
     openSendCommandModal(true, {
     openSendCommandModal(true, {
       mode: DataActionModeEnum.READ,
       mode: DataActionModeEnum.READ,
-      record: { ...toRaw(data.detail) },
+      record: { ...toRaw(data.detail), deviceDetail: props.deviceDetail as any },
     } as ModalParamsType);
     } 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());
   onUnmounted(() => close());
 </script>
 </script>
 
 
 <template>
 <template>
   <PageWrapper
   <PageWrapper
     dense
     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
     <section
       class="flex flex-col justify-between w-full bg-light-50 pt-3 mb-4 dark:text-gray-300 dark:bg-dark-900"
       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" />
         <ModeSwitchButton v-model:value="mode" @change="switchMode" />
       </div>
       </div>
       <List
       <List
-        v-if="mode === EnumTableCardMode.CARD"
+        v-show="mode === EnumTableCardMode.CARD"
+        ref="listElRef"
         class="list-mode !px-2"
         class="list-mode !px-2"
-        :data-source="socketInfo.dataSource"
+        :data-source="socketInfo.originData"
         :grid="grid"
         :grid="grid"
+        :pagination="pagination"
       >
       >
         <template #renderItem="{ item }">
         <template #renderItem="{ item }">
           <List.Item>
           <List.Item>
@@ -279,11 +331,6 @@
               <template #extra>
               <template #extra>
                 <Space>
                 <Space>
                   <Tooltip title="属性下发">
                   <Tooltip title="属性下发">
-                    <!-- <MacCommandOutlined
-                      v-if="ReadAndWriteEnum.READ_AND_WRITE === item.accessMode"
-                      class="cursor-pointer text-lg svg:fill-blue-500"
-                      @click="handleSendCommandModal(item)"
-                    /> -->
                     <SvgIcon
                     <SvgIcon
                       name="send-command"
                       name="send-command"
                       prefix="iconfont"
                       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 { sendCommandOneway } from '/@/api/dataBoard';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { unref } from 'vue';
   import { unref } from 'vue';
+  import { genModbusCommand } from '/@/api/task';
+  import { TaskTypeEnum } from '/@/views/task/center/config';
+  import { SingleToHex, formSchemasConfig } from './config';
 
 
   defineEmits(['register']);
   defineEmits(['register']);
   const props = defineProps<{ deviceId: string; deviceName: string }>();
   const props = defineProps<{ deviceId: string; deviceName: string }>();
 
 
-  const [registerForm, { setProps, getFieldsValue, resetFields }] = useForm({
+  const [registerForm, { setProps, getFieldsValue, resetFields, validate }] = useForm({
     schemas: [],
     schemas: [],
     showActionButtonGroup: false,
     showActionButtonGroup: false,
     layout: 'vertical',
     layout: 'vertical',
@@ -24,11 +27,24 @@
 
 
   const keys = ref<string[]>([]);
   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 { record } = params;
-    const { name, detail, identifier } = record;
+    const { name, detail, identifier, deviceDetail, extensionDesc } = record;
     const { dataType } = detail;
     const { dataType } = detail;
     const { type } = dataType || {};
     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];
     let schemas = [{ dataType: dataType, identifier, functionName: name } as StructJSON];
 
 
@@ -36,33 +52,130 @@
       schemas = dataType?.specs as StructJSON[];
       schemas = dataType?.specs as StructJSON[];
     }
     }
 
 
-    const formSchemas = genForm(schemas);
-
     keys.value = schemas.map((item) => {
     keys.value = schemas.map((item) => {
       return item.identifier!;
       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();
     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 { createMessage } = useMessage();
   const loading = ref(false);
   const loading = ref(false);
   const handleSend = async () => {
   const handleSend = async () => {
     try {
     try {
       loading.value = true;
       loading.value = true;
       if (!props.deviceId) return;
       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({
       await sendCommandOneway({
         deviceId: props.deviceId,
         deviceId: props.deviceId,
         value: {
         value: {
           persistent: true,
           persistent: true,
           method: 'methodThingskit',
           method: 'methodThingskit',
-          params: {
-            ...value,
-          },
+          params: unref(isShowModBUS)
+            ? unref(sendValue)
+            : {
+                ...unref(sendValue),
+              },
         },
         },
       });
       });
       createMessage.success('属性下发成功~');
       createMessage.success('属性下发成功~');

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

@@ -84,10 +84,10 @@
     });
     });
   };
   };
   const handleRecordContent = (record) => {
   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 handleRecordResponseContent = (record) => {
     const jsonParams = record?.response;
     const jsonParams = record?.response;

@@ -182,7 +182,7 @@
   </div>
   </div>
 </template>
 </template>
 <script lang="ts">
 <script lang="ts">
-  import { defineComponent, reactive, unref, h, onMounted } from 'vue';
+  import { defineComponent, reactive, unref, onMounted } from 'vue';
   import {
   import {
     DeviceModel,
     DeviceModel,
     DeviceRecord,
     DeviceRecord,
@@ -195,7 +195,6 @@
   import {
   import {
     deleteDevice,
     deleteDevice,
     devicePage,
     devicePage,
-    checkDeviceOccupied,
     cancelDispatchCustomer,
     cancelDispatchCustomer,
     getGATEWAY,
     getGATEWAY,
     privateDevice,
     privateDevice,
@@ -331,15 +330,8 @@
       async function handleCancelDispatchCustomer(record: Recordable) {
       async function handleCancelDispatchCustomer(record: Recordable) {
         try {
         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 {}
         } catch {}
       }
       }
 
 
@@ -369,7 +361,7 @@
         handleSuccess();
         handleSuccess();
       }
       }
       function goDeviceProfile(e) {
       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 { copied, copy } = useClipboard({ legacy: true });
       const copySN = async (snCode: string) => {
       const copySN = async (snCode: string) => {

 <script lang="ts" setup>
 <script lang="ts" setup>
   import { PageWrapper } from '/@/components/Page';
   import { PageWrapper } from '/@/components/Page';
   import { BasicForm, useForm } from '/@/components/Form';
   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 { ReloadOutlined } from '@ant-design/icons-vue';
   import { computed, onMounted, reactive, ref, unref } from 'vue';
   import { computed, onMounted, reactive, ref, unref } from 'vue';
   import {
   import {
@@ -175,6 +175,9 @@
 
 
   const { query: routeParams } = useRoute();
   const { query: routeParams } = useRoute();
   onMounted(() => {
   onMounted(() => {
+    routeParams.name = decodeURIComponent(
+      ((routeParams as unknown as Recordable) || {})?.name || ''
+    );
     getDataSource(routeParams);
     getDataSource(routeParams);
   });
   });
 </script>
 </script>
@@ -204,14 +207,16 @@
               {{ getSelectAllFlag ? '反选' : '全选' }}
               {{ getSelectAllFlag ? '反选' : '全选' }}
             </Button>
             </Button>
             <Authority :value="ProductPermission.DELETE">
             <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>
             </Authority>
 
 
             <ModeSwitchButton :value="$props.mode" @change="handleModeChange" />
             <ModeSwitchButton :value="$props.mode" @change="handleModeChange" />

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

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

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

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

@@ -24,7 +24,8 @@ export enum FormField {
   EVENT_TYPE = 'eventType',
   EVENT_TYPE = 'eventType',
   SERVICE_COMMAND = 'serviceCommand',
   SERVICE_COMMAND = 'serviceCommand',
   ACCESS_MODE = 'accessMode',
   ACCESS_MODE = 'accessMode',
-
+  REGISTER_ADDRESS = 'registerAddress',
+  EXTENSION_DESC = 'extensionDesc',
   STRUCT = 'struct',
   STRUCT = 'struct',
 }
 }
 
 
@@ -116,7 +117,18 @@ export const serviceSchemas = (tcpDeviceFlag: boolean): FormSchema[] => {
       field: FormField.SERVICE_COMMAND,
       field: FormField.SERVICE_COMMAND,
       label: '输入参数',
       label: '输入参数',
       component: 'Input',
       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,
       ifShow: tcpDeviceFlag,
       componentProps: {
       componentProps: {
         placeholder: '请输入ASCII或HEX服务命令',
         placeholder: '请输入ASCII或HEX服务命令',

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

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

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

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

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

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

@@ -82,6 +82,14 @@
     setValue(record);
     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) => {
   const handleSubmit = async (closeModalAfterSuccess = true) => {
     try {
     try {
       if (closeModalAfterSuccess) {
       if (closeModalAfterSuccess) {
@@ -98,7 +106,30 @@
           getDataFlowParams?.clientProperties
           getDataFlowParams?.clientProperties
         );
         );
         const data = getValue(description, name, getDataFlowMethod, getDataFlowParams);
         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) {
         if (rest) {
           closeModalAfterSuccess && createMessage.success(`${businessText.value}成功`);
           closeModalAfterSuccess && createMessage.success(`${businessText.value}成功`);
           closeModalAfterSuccess && closeModal();
           closeModalAfterSuccess && closeModal();
@@ -120,7 +151,7 @@
       ...record,
       ...record,
       ...record?.configuration,
       ...record?.configuration,
       name: record?.name,
       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 });
     setModalProps({ showOkBtn: false });
     if (hasEditOrView(businessText.value)) {
     if (hasEditOrView(businessText.value)) {
+      restData.data = { ...restData.data, configuration: oldData.values };
       setValue(restData.data);
       setValue(restData.data);
     }
     }
   };
   };

@@ -52,8 +52,9 @@
 
 
   const dataFlowMethodIsRabbitMqRef = ref<InstanceType<typeof DataFlowMethodIsRabbitMq>>();
   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）
   //表单配置项（kafka、mqtt、rabbitmq、restapi）

@@ -31,6 +31,7 @@ export type TOption = {
 export enum CommandTypeEnum {
 export enum CommandTypeEnum {
   CUSTOM = 0,
   CUSTOM = 0,
   SERVICE = 1,
   SERVICE = 1,
+  ATTRIBUTE = 2,
 }
 }
 
 
 /**
 /**
@@ -264,6 +265,13 @@ export const trigger_condition_schema: FormSchema[] = [
             useByProductGetAttribute(res, updateSchema, options);
             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: '请选择设备',
         placeholder: '请选择设备',
         getPopupContainer: () => document.body,
         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),
     ifShow: ({ values }) => isPart(values.device),

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

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

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

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

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

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

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

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

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

@@ -3,7 +3,7 @@
   import { ComponentType, ColEx } from '/@/components/Form/src/types/index';
   import { ComponentType, ColEx } from '/@/components/Form/src/types/index';
   import { computed } from '@vue/reactivity';
   import { computed } from '@vue/reactivity';
   import { isFunction } from '/@/utils/is';
   import { isFunction } from '/@/utils/is';
-  import { unref } from 'vue';
+  import { toRaw, unref } from 'vue';
   import { watch } from 'vue';
   import { watch } from 'vue';
   import { nextTick } from 'vue';
   import { nextTick } from 'vue';
   import { ref } from 'vue';
   import { ref } from 'vue';
@@ -48,17 +48,13 @@
     }
     }
   );
   );
 
 
-  const getProps = computed(() => {
-    return props;
-  });
-
   const batchSetValue = (value: any): ValueItemType[] => {
   const batchSetValue = (value: any): ValueItemType[] => {
-    const { length } = unref(getProps);
+    const { length } = props;
     return Array.from({ length }, () => ({ value }));
     return Array.from({ length }, () => ({ value }));
   };
   };
 
 
   const getTotalControlItem = computed(() => {
   const getTotalControlItem = computed(() => {
-    const { totalControlProps, component, showTotalControl } = unref(getProps);
+    const { totalControlProps, component, showTotalControl } = props;
     return {
     return {
       ...totalControlProps,
       ...totalControlProps,
       field: FormFieldsEnum.TOTAL_CONTROL,
       field: FormFieldsEnum.TOTAL_CONTROL,
@@ -72,12 +68,13 @@
     } as FormSchema;
     } 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 label = isFunction(itemLabel) ? itemLabel : (index: number) => `#${index}`;
     let _itemProps = isFunction(itemProps) ? itemProps : () => ({});
     let _itemProps = isFunction(itemProps) ? itemProps : () => ({});
     const schemas = Array.from(
     const schemas = Array.from(
-      { length },
+      { length: props.length },
       (_item, index) =>
       (_item, index) =>
         ({
         ({
           ..._itemProps(index),
           ..._itemProps(index),
@@ -93,14 +90,17 @@
         } as FormSchema)
         } 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;
     return schemas;
-  });
+  };
 
 
   const [registerForm, { getFieldsValue, setProps, setFieldsValue }] = useForm({
   const [registerForm, { getFieldsValue, setProps, setFieldsValue }] = useForm({
     showActionButtonGroup: false,
     showActionButtonGroup: false,
-    schemas: unref(getSchemas),
+    schemas: toRaw(unref(getSchemas())),
     // baseColProps,
     // baseColProps,
     baseColProps: props.itemColProps,
     baseColProps: props.itemColProps,
   });
   });
@@ -111,19 +111,18 @@
       return;
       return;
     }
     }
     const allValue = getFieldsValue();
     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);
     emit(EmitEventEnum.UPDATE_VALUE, res);
   };
   };
 
 
   const transformValue = (value: ValueItemType[]) => {
   const transformValue = (value: ValueItemType[]) => {
-    const { length } = unref(getProps);
+    const { length } = props;
     if (value.length !== length) {
     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 }), {});
     return value.reduce((prev, next, index) => ({ ...prev, [index]: next.value }), {});
   };
   };
@@ -153,13 +152,11 @@
 
 
   watch(
   watch(
     () => [props.length, props.component],
     () => [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);
       const record = composeModbusModalData(value as ModbusCommandValueType);
       loading.value = true;
       loading.value = true;
       const result = await genModbusCommand(record);
       const result = await genModbusCommand(record);
-      console.log(result);
       commandValue.value = result;
       commandValue.value = result;
     } catch (error) {
     } catch (error) {
     } finally {
     } finally {

 <script lang="ts" setup>
 <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 {
   enum AddressTypeEnum {
     DEC = 'DEC',
     DEC = 'DEC',
@@ -11,78 +10,154 @@
 
 
   const emit = defineEmits(['update:value']);
   const emit = defineEmits(['update:value']);
 
 
-  const DEC_MAX_VALUE = parseInt('0xffff', 16);
-
-  withDefaults(
+  const props = withDefaults(
     defineProps<{
     defineProps<{
       value?: number | string;
       value?: number | string;
-      inputProps?: Recordable;
+      disabled?: boolean;
+      maxValue?: number | string;
+      minValue?: number | string;
+      type?: string;
+      toUpperCase?: boolean;
+      disabledSwitch?: boolean;
     }>(),
     }>(),
     {
     {
-      value: 0,
       inputProps: () => ({}),
       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 = [
   const addressTypeOptions = [
     { label: AddressTypeEnum.DEC, value: AddressTypeEnum.DEC },
     { label: AddressTypeEnum.DEC, value: AddressTypeEnum.DEC },
     { label: AddressTypeEnum.HEX, value: AddressTypeEnum.HEX },
     { 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>
 </script>
 
 
 <template>
 <template>
   <InputGroup compact class="!flex">
   <InputGroup compact class="!flex">
     <Select
     <Select
-      v-model:value="type"
+      v-if="!disabledSwitch"
+      v-model:value="inputType"
       :options="addressTypeOptions"
       :options="addressTypeOptions"
-      @change="handleChange"
+      :disabled="disabled"
       class="bg-gray-200 max-w-20"
       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 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>
     </div>
   </InputGroup>
   </InputGroup>
 </template>
 </template>

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

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

@@ -12,23 +12,28 @@ const registerInfo = (record: ModbusCommandValueType): Partial<GenModbusCommandT
     coilValue,
     coilValue,
     coilValues,
     coilValues,
   } = record;
   } = record;
+
   switch (method) {
   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:
     case FunctionCodeEnum.WRITE_SINGLE_COIL_REGISTER_05:
       return { registerValues: [coilValue] };
       return { registerValues: [coilValue] };
     case FunctionCodeEnum.WRITE_SINGLE_KEEP_COIL_REGISTER_06:
     case FunctionCodeEnum.WRITE_SINGLE_KEEP_COIL_REGISTER_06:
       return { registerValues: [registerValue] };
       return { registerValues: [registerValue] };
     case FunctionCodeEnum.WRITE_MULTIPLE_COIL_STATE_15:
     case FunctionCodeEnum.WRITE_MULTIPLE_COIL_STATE_15:
       return {
       return {
-        registerNum: coilNumber,
+        registerNumber: coilNumber,
         registerValues: coilValues.map((item) => (item.value ? 1 : 0)),
         registerValues: coilValues.map((item) => (item.value ? 1 : 0)),
       };
       };
     case FunctionCodeEnum.WRITE_MULTIPLE_KEEP_REGISTER_16:
     case FunctionCodeEnum.WRITE_MULTIPLE_KEEP_REGISTER_16:
       return {
       return {
-        registerNum: registerNumber,
+        registerNumber,
         registerValues: registerValues.map((item) => item.value),
         registerValues: registerValues.map((item) => item.value),
       };
       };
     default:
     default:
@@ -37,12 +42,12 @@ const registerInfo = (record: ModbusCommandValueType): Partial<GenModbusCommandT
 };
 };
 
 
 export const composeModbusModalData = (record: ModbusCommandValueType): GenModbusCommandType => {
 export const composeModbusModalData = (record: ModbusCommandValueType): GenModbusCommandType => {
-  const { crc, deviceCode, method, registerAddr } = record;
+  const { crc, deviceCode, method, registerAddress } = record;
   return {
   return {
     crc,
     crc,
     deviceCode,
     deviceCode,
-    method,
-    registerAddr,
+    method: Number(method).toString(16).padStart(2, '0').toUpperCase(),
+    registerAddress,
     ...registerInfo(record),
     ...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) {
     if (props.dataSource.length >= DATA_SOURCE_LIMIT_NUMBER) {
       createMessage.warning('绑定的数据源不能超过10条~');
       createMessage.warning('绑定的数据源不能超过10条~');
       return;
       return;
     }
     }
 
 
-    const allValues = getFormValues();
+    const allValues = await getFormValues();
     const currentRecord = getFormValueByUUID(record.uuid);
     const currentRecord = getFormValueByUUID(record.uuid);
     const uuid = trackUpdate();
     const uuid = trackUpdate();
     const raw = toRaw(record);
     const raw = toRaw(record);
@@ -167,7 +173,7 @@
 
 
   const handleSettingOk = (data: DataSourceType) => {
   const handleSettingOk = (data: DataSourceType) => {
     const { uuid } = data;
     const { uuid } = data;
-    const _dataSource = cloneDeep(props.dataSource);
+    const _dataSource = cloneDeep(getFormValues());
 
 
     const index = _dataSource.findIndex((item) => item.uuid === uuid);
     const index = _dataSource.findIndex((item) => item.uuid === uuid);
 
 

@@ -95,6 +95,10 @@
         };
         };
         setFormValues(record);
         setFormValues(record);
       } else {
       } else {
+        selectWidgetKeys.value = {
+          componentKey: TextComponent1Config.key,
+          categoryKey: PackagesCategoryEnum.TEXT,
+        };
         dataSource.value = [genNewDataSourceItem()];
         dataSource.value = [genNewDataSourceItem()];
       }
       }
     }
     }
@@ -113,6 +117,11 @@
   };
   };
 
 
   const handleNewRecord = () => {
   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) {
     if (unref(dataSource).length >= DATA_SOURCE_LIMIT_NUMBER) {
       createMessage.warning('绑定的数据源不能超过10条~');
       createMessage.warning('绑定的数据源不能超过10条~');
       return;
       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,
         transportType: value.transportType,
         service: value.service,
         service: value.service,
         command: value.command,
         command: value.command,
+        openService: value.openService,
+        closeService: value.closeService,
+        openCommand: value.openCommand,
+        closeCommand: value.closeCommand,
         commandType: value.commandType,
         commandType: value.commandType,
         callType: value.callType,
         callType: value.callType,
       },
       },
@@ -45,6 +49,10 @@
       ...record,
       ...record,
       transportType: customCommand?.transportType || (record as Recordable).transportType,
       transportType: customCommand?.transportType || (record as Recordable).transportType,
       service: customCommand?.service || (record as Recordable).service,
       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,
       command: customCommand?.command || (record as Recordable).command,
       commandType: customCommand?.commandType || (record as Recordable).commandType,
       commandType: customCommand?.commandType || (record as Recordable).commandType,
       callType: customCommand?.callType || (record as Recordable).callType,
       callType: customCommand?.callType || (record as Recordable).callType,

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

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

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

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

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

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

@@ -3,6 +3,7 @@
   import { useForm, BasicForm } from '/@/components/Form';
   import { useForm, BasicForm } from '/@/components/Form';
   import { PublicFormInstaceType } from '/@/views/visual/dataSourceBindPanel/index.type';
   import { PublicFormInstaceType } from '/@/views/visual/dataSourceBindPanel/index.type';
   import { option } from './config';
   import { option } from './config';
+  import { nextTick } from 'vue';
 
 
   const [register, { getFieldsValue, setFieldsValue, resetFields }] = useForm({
   const [register, { getFieldsValue, setFieldsValue, resetFields }] = useForm({
     schemas: [
     schemas: [
@@ -21,6 +22,46 @@
         defaultValue: option.fontColor,
         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,
         field: ComponentConfigFieldEnum.SHOW_DEVICE_NAME,
         label: '显示设备名称',
         label: '显示设备名称',
         component: 'Checkbox',
         component: 'Checkbox',

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

 <script lang="ts" setup>
 <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 { option } from './config';
-  import { useDataFetch } from '/@/views/visual/packages/hook/useSocket';
   import { Slider, Spin } from 'ant-design-vue';
   import { Slider, Spin } from 'ant-design-vue';
   import { computed, ref, unref } from 'vue';
   import { computed, ref, unref } from 'vue';
   import { useComponentScale } from '../../../hook/useComponentScale';
   import { useComponentScale } from '../../../hook/useComponentScale';
   import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
   import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
   import { useSendCommand } from '../../../hook/useSendCommand';
   import { useSendCommand } from '../../../hook/useSendCommand';
   import { useReceiveValue } from '../../../hook/useReceiveValue';
   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<{
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;
     config: ComponentPropsConfigType<typeof option>;
@@ -16,43 +21,155 @@
   const sliderValue = ref<number>(33);
   const sliderValue = ref<number>(33);
   const oldSliderValue = ref<number>(33);
   const oldSliderValue = ref<number>(33);
   const noSendValue = ref<number>(0);
   const noSendValue = ref<number>(0);
-  const sMin = ref<number>(0);
-  const sMax = ref<number>(100);
   const sliderEl = ref<Nullable<InstanceType<typeof Slider>>>(null);
   const sliderEl = ref<Nullable<InstanceType<typeof Slider>>>(null);
 
 
   const { loading, sendCommand } = useSendCommand();
   const { loading, sendCommand } = useSendCommand();
 
 
   const getDesign = computed(() => {
   const getDesign = computed(() => {
     const { option, persetOption } = props.config;
     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 {
     return {
       attribute: attributeRename || attributeName || attribute,
       attribute: attributeRename || attributeName || attribute,
       controlBarColor: controlBarColor ?? persetControlBarColor,
       controlBarColor: controlBarColor ?? persetControlBarColor,
       fontColor: fontColor ?? persetFontColor,
       fontColor: fontColor ?? persetFontColor,
+      minNumber: minNumber ?? persetMinNumber,
+      maxNumber: maxNumber ?? persetMaxNumber,
+      extensionDesc: extensionDesc ? JSON.parse(extensionDesc) : {},
+      commandType,
+      codeType,
+      deviceCode,
+      customCommand,
     };
     };
   });
   });
 
 
   const index = ref<number>(0);
   const index = ref<number>(0);
+  const afterValue = ref<number>(0); //点击Slider获取的值
 
 
   const handleChange = async (e) => {
   const handleChange = async (e) => {
     index.value++;
     index.value++;
+    afterValue.value = e;
     if (index.value == 1) {
     if (index.value == 1) {
       oldSliderValue.value = unref(sliderValue);
       oldSliderValue.value = unref(sliderValue);
+      return; //这个是因为设置了最大值时，当sliderValue的值大于最大值时只会显示设置的最大值，会执行一次change
     }
     }
     sliderValue.value = e;
     sliderValue.value = e;
   };
   };
 
 
   const handleAfterChange = async () => {
   const handleAfterChange = async () => {
     unref(sliderEl)?.blur();
     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 () => {
   const handleBlur = async () => {
     if (unref(oldSliderValue) !== unref(sliderValue)) {
     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
       flag
         ? ((sliderValue.value = unref(sliderValue)),
         ? ((sliderValue.value = unref(sliderValue)),
           (oldSliderValue.value = sliderValue.value),
           (oldSliderValue.value = sliderValue.value),
@@ -90,8 +207,8 @@
             :style="{ '--slider-color': getDesign.controlBarColor }"
             :style="{ '--slider-color': getDesign.controlBarColor }"
             class="no-drag"
             class="no-drag"
             :value="sliderValue"
             :value="sliderValue"
-            :min="sMin"
-            :max="sMax"
+            :min="getDesign.minNumber"
+            :max="getDesign.maxNumber"
             @change="handleChange"
             @change="handleChange"
             @afterChange="handleAfterChange"
             @afterChange="handleAfterChange"
             @blur="handleBlur"
             @blur="handleBlur"

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

 <script lang="ts" setup>
 <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 { option } from './config';
-  import { useMultipleDataFetch } from '/@/views/visual/packages/hook/useSocket';
   import { SvgIcon } from '/@/components/Icon';
   import { SvgIcon } from '/@/components/Icon';
   import { Switch } from 'ant-design-vue';
   import { Switch } from 'ant-design-vue';
   import { computed, ref } from 'vue';
   import { computed, ref } from 'vue';
@@ -12,17 +8,22 @@
   import { useSendCommand } from '../../../hook/useSendCommand';
   import { useSendCommand } from '../../../hook/useSendCommand';
   import { unref } from 'vue';
   import { unref } from 'vue';
   import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
   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<{
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;
     config: ComponentPropsConfigType<typeof option>;
   }>();
   }>();
 
 
-  const checked = ref(false);
-
   const svgList = ref<any>([
   const svgList = ref<any>([
     {
     {
       value: 26.2,
       value: 26.2,
-      name: 'wendu',
+      deviceName: '光照设备',
+      attributeName: '光照',
       icon: 'zongfushe',
       icon: 'zongfushe',
       unit: 'kw',
       unit: 'kw',
       iconColor: '#367BFF',
       iconColor: '#367BFF',
@@ -32,7 +33,8 @@
     },
     },
     {
     {
       value: 53.7,
       value: 53.7,
-      name: 'shidu',
+      deviceName: '风机设备',
+      attributeName: '风机',
       icon: 'guangzhaoqiangdu',
       icon: 'guangzhaoqiangdu',
       unit: '℃',
       unit: '℃',
       iconColor: '#FFA000',
       iconColor: '#FFA000',
@@ -53,42 +55,77 @@
     } = persetOption || {};
     } = persetOption || {};
     return {
     return {
       dataSource: dataSource.map((item) => {
       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 {
         return {
           unit: unit ?? persetUnit,
           unit: unit ?? persetUnit,
           fontColor: fontColor ?? persetFontColor,
           fontColor: fontColor ?? persetFontColor,
           icon: icon ?? persetIcon,
           icon: icon ?? persetIcon,
           iconColor: iconColor ?? persetIconColor,
           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" />
     <DeviceName :config="config" />
     <div
     <div
       style="width: 86%"
       style="width: 86%"
-      v-for="(item, index) in svgList"
+      v-for="(item, index) in controlList"
       :key="item.id"
       :key="item.id"
       class="flex justify-between items-center"
       class="flex justify-between items-center"
     >
     >
@@ -113,10 +150,22 @@
           :style="{ color: item.iconColor }"
           :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>
       </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>
     </div>
   </main>
   </main>
 </template>
 </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 { ControlComponentSwitchWithIconConfig } from './ControlComponentSwitchWithIcon';
 import { ControlComponentToggleSwitchConfig } from './ControlComponentToggleSwitch';
 import { ControlComponentToggleSwitchConfig } from './ControlComponentToggleSwitch';
 import { LateralNumericalControlConfig } from './LateralNumericalControl';
 import { LateralNumericalControlConfig } from './LateralNumericalControl';
-// import { SwitchListConfig } from './SwitchList';
+import { SwitchListConfig } from './SwitchList';
 
 
 export const ControlList = [
 export const ControlList = [
   ControlComponentSwitchWithIconConfig,
   ControlComponentSwitchWithIconConfig,
   ControlComponentSlidingSwitchConfig,
   ControlComponentSlidingSwitchConfig,
   ControlComponentToggleSwitchConfig,
   ControlComponentToggleSwitchConfig,
   LateralNumericalControlConfig,
   LateralNumericalControlConfig,
-  // SwitchListConfig,
+  SwitchListConfig,
 ];
 ];

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

@@ -4,7 +4,7 @@
   import { PublicFormInstaceType } from '/@/views/visual/dataSourceBindPanel/index.type';
   import { PublicFormInstaceType } from '/@/views/visual/dataSourceBindPanel/index.type';
   import { option } from './config';
   import { option } from './config';
   import { ComponentInfo } from '/@/views/visual/palette/types';
   import { ComponentInfo } from '/@/views/visual/palette/types';
-  import { toRaw } from 'vue';
+  import { nextTick, toRaw } from 'vue';
 
 
   const [register, { getFieldsValue, setFieldsValue, resetFields }] = useForm({
   const [register, { getFieldsValue, setFieldsValue, resetFields }] = useForm({
     schemas: [
     schemas: [
@@ -50,11 +50,38 @@
         defaultValue: option.unit,
         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,
         field: ComponentConfigFieldEnum.SHOW_DEVICE_NAME,
         label: '显示设备名称',
         label: '显示设备名称',
         component: 'Checkbox',
         component: 'Checkbox',
         defaultValue: option.showDeviceName,
         defaultValue: option.showDeviceName,
       },
       },
+      {
+        field: ComponentConfigFieldEnum.SHOW_TIME,
+        label: '显示时间',
+        component: 'Checkbox',
+        defaultValue: option.showDeviceName,
+      },
     ],
     ],
     showActionButtonGroup: false,
     showActionButtonGroup: false,
     labelWidth: 120,
     labelWidth: 120,

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

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

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

@@ -4,7 +4,7 @@
   import { PublicFormInstaceType } from '/@/views/visual/dataSourceBindPanel/index.type';
   import { PublicFormInstaceType } from '/@/views/visual/dataSourceBindPanel/index.type';
   import { option } from './config';
   import { option } from './config';
   import { ComponentInfo } from '/@/views/visual/palette/types';
   import { ComponentInfo } from '/@/views/visual/palette/types';
-  import { toRaw } from 'vue';
+  import { nextTick, toRaw } from 'vue';
 
 
   const [register, { getFieldsValue, setFieldsValue, resetFields }] = useForm({
   const [register, { getFieldsValue, setFieldsValue, resetFields }] = useForm({
     schemas: [
     schemas: [
@@ -49,12 +49,45 @@
         component: 'Input',
         component: 'Input',
         defaultValue: option.unit,
         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,
         field: ComponentConfigFieldEnum.SHOW_DEVICE_NAME,
         label: '显示设备名称',
         label: '显示设备名称',
         component: 'Checkbox',
         component: 'Checkbox',
         defaultValue: option.showDeviceName,
         defaultValue: option.showDeviceName,
       },
       },
+      {
+        field: ComponentConfigFieldEnum.SHOW_TIME,
+        label: '显示时间',
+        component: 'Checkbox',
+        defaultValue: option.showTime,
+      },
     ],
     ],
     showActionButtonGroup: false,
     showActionButtonGroup: false,
     labelWidth: 120,
     labelWidth: 120,

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

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

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

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

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

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

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

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

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

 <script lang="ts" setup>
 <script lang="ts" setup>
+  import { nextTick } from 'vue';
   import { ComponentConfigFieldEnum } from '../../../enum';
   import { ComponentConfigFieldEnum } from '../../../enum';
   import { option, Gradient, GradientColor } from './config';
   import { option, Gradient, GradientColor } from './config';
   import { useForm, BasicForm } from '/@/components/Form';
   import { useForm, BasicForm } from '/@/components/Form';
@@ -22,18 +23,26 @@
         defaultValue: option.fontColor,
         defaultValue: option.fontColor,
       },
       },
       {
       {
-        field: ComponentConfigFieldEnum.UNIT,
-        label: '数值单位',
-        component: 'Input',
-        defaultValue: option.unit,
-      },
-      {
         field: ComponentConfigFieldEnum.POINTER_COLOR,
         field: ComponentConfigFieldEnum.POINTER_COLOR,
         label: '指针颜色',
         label: '指针颜色',
         component: 'ColorPicker',
         component: 'ColorPicker',
         changeEvent: 'update:value',
         changeEvent: 'update:value',
         defaultValue: option.pointerColor,
         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,
       //   field: ComponentConfigFieldEnum.INSTRUMENT_PANEL_WIDTH,
       //   label: '仪表盘宽度',
       //   label: '仪表盘宽度',
@@ -48,18 +57,38 @@
         defaultValue: option.showDeviceName,
         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,
     showActionButtonGroup: false,
@@ -88,13 +117,16 @@
       fontColor: item[ComponentConfigFieldEnum.FONT_COLOR],
       fontColor: item[ComponentConfigFieldEnum.FONT_COLOR],
       unit: item[ComponentConfigFieldEnum.UNIT],
       unit: item[ComponentConfigFieldEnum.UNIT],
       showDeviceName: item[ComponentConfigFieldEnum.SHOW_DEVICE_NAME],
       showDeviceName: item[ComponentConfigFieldEnum.SHOW_DEVICE_NAME],
+      showTime: item[ComponentConfigFieldEnum.SHOW_TIME],
       pointerColor: item[ComponentConfigFieldEnum.POINTER_COLOR],
       pointerColor: item[ComponentConfigFieldEnum.POINTER_COLOR],
+      maxNumber: item[ComponentConfigFieldEnum.MAX_NUMBER],
     } as ComponentInfo;
     } as ComponentInfo;
   };
   };
 
 
   const setFormValues = (data: Recordable) => {
   const setFormValues = (data: Recordable) => {
     // return setFieldsValue(data);
     // 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 firstRecord = gradientInfo.find((item) => item.key === Gradient.FIRST);
     const secondRecord = gradientInfo.find((item) => item.key === Gradient.SECOND);
     const secondRecord = gradientInfo.find((item) => item.key === Gradient.SECOND);
 
 
@@ -102,11 +134,13 @@
       [ComponentConfigFieldEnum.UNIT]: unit,
       [ComponentConfigFieldEnum.UNIT]: unit,
       [ComponentConfigFieldEnum.FONT_COLOR]: fontColor,
       [ComponentConfigFieldEnum.FONT_COLOR]: fontColor,
       [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: showDeviceName,
       [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: showDeviceName,
+      [ComponentConfigFieldEnum.SHOW_TIME]: showTime,
       [ComponentConfigFieldEnum.FIRST_PHASE_VALUE]: 0,
       [ComponentConfigFieldEnum.FIRST_PHASE_VALUE]: 0,
       [ComponentConfigFieldEnum.FIRST_PHASE_COLOR]: firstRecord?.color,
       [ComponentConfigFieldEnum.FIRST_PHASE_COLOR]: firstRecord?.color,
       [ComponentConfigFieldEnum.SECOND_PHASE_VALUE]: 1,
       [ComponentConfigFieldEnum.SECOND_PHASE_VALUE]: 1,
       [ComponentConfigFieldEnum.SECOND_PHASE_COLOR]: secondRecord?.color,
       [ComponentConfigFieldEnum.SECOND_PHASE_COLOR]: secondRecord?.color,
       [ComponentConfigFieldEnum.POINTER_COLOR]: pointerColor,
       [ComponentConfigFieldEnum.POINTER_COLOR]: pointerColor,
+      [ComponentConfigFieldEnum.MAX_NUMBER]: maxNumber,
     };
     };
     return setFieldsValue(value);
     return setFieldsValue(value);
   };
   };