Merge branch 'main_dev' into feat/rule-engine-designer

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

@@ -167,6 +167,7 @@ export interface DeviceRecord {
   creator: string;
   createTime: string;
   codeType?: string;
+  code?: string;
   name: string;
   tenantId: string;
   transportType: string;

@@ -16,6 +16,7 @@
           :formProps="getProps"
           :allDefaultValues="defaultValueRef"
           :formModel="formModel"
+          :validateFields="validateFields"
           :setFormModel="setFormModel"
         >
           <template #[item]="data" v-for="item in Object.keys($slots)">
@@ -229,10 +230,10 @@
 
       function setFormModel(key: string, value: any) {
         formModel[key] = value;
-        const { validateTrigger } = unref(getBindValue);
-        if (!validateTrigger || validateTrigger === 'change') {
-          validateFields([key]).catch((_) => {});
-        }
+        // const { validateTrigger } = unref(getBindValue);
+        // if (!validateTrigger || validateTrigger === 'change') {
+        //   validateFields([key]).catch((_) => {});
+        // }
       }
 
       function handleEnterPress(e: KeyboardEvent) {

@@ -14,6 +14,7 @@
   import { upperFirst, cloneDeep } from 'lodash-es';
   import { useItemLabelWidth } from '../hooks/useLabelWidth';
   import { useI18n } from '/@/hooks/web/useI18n';
+  import { NamePath, ValidateOptions } from 'ant-design-vue/lib/form/interface';
 
   export default defineComponent({
     name: 'BasicFormItem',
@@ -39,6 +40,12 @@
         type: Function as PropType<(key: string, value: any) => void>,
         default: null,
       },
+      validateFields: {
+        type: Function as PropType<
+          (nameList?: NamePath[], options?: ValidateOptions) => Promise<any>
+        >,
+        default: null,
+      },
       tableAction: {
         type: Object as PropType<TableActionType>,
       },
@@ -208,6 +215,7 @@
             rules[characterInx].message ||
             t('component.form.maxTip', [rules[characterInx].max] as Recordable);
         }
+        rules.forEach((item) => !item.trigger && (item.trigger = 'change'));
         return rules;
       }
 
@@ -234,6 +242,10 @@
             const value = target ? (isCheck ? target.checked : target.value) : e;
             props.setFormModel(field, value);
           },
+          onBlur: (...args) => {
+            unref(getComponentsProps)?.onBlur?.(...args);
+            props.validateFields([field], { triggerName: 'blur' }).catch((_) => {});
+          },
         };
         const Comp = componentMap.get(component) as ReturnType<typeof defineComponent>;
 

 <script lang="ts" setup>
   import { Button } from 'ant-design-vue';
-  import { nextTick, ref, unref, watch } from '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';
@@ -19,8 +19,6 @@
     }
   );
 
-  const dataType = ref(props.dataType); //获取数据类型
-
   const emit = defineEmits(['update:value']);
 
   const [
@@ -46,15 +44,17 @@
     show.value = false;
   };
 
-  watch(
-    () => props.dataType,
-    (value) => {
-      dataType.value = value;
+  watch(show, async (value) => {
+    if (value) {
+      await nextTick();
       updateSchema([
-        { field: FormFieldsEnum.ZOOM_FACTOR, ifShow: unref(dataType) == 'BOOL' ? false : true },
+        {
+          field: FormFieldsEnum.ZOOM_FACTOR,
+          ifShow: props.dataType == DataTypeEnum.IS_BOOL ? false : true,
+        },
       ]);
     }
-  );
+  });
 
   watch(
     () => props.value,

 import type { FormProps, FormActionType, UseFormReturnType, FormSchema } from '../types/form';
-import type { NamePath } from 'ant-design-vue/lib/form/interface';
+import type { NamePath, ValidateOptions } from 'ant-design-vue/lib/form/interface';
 import type { DynamicProps } from '/#/utils';
 import { ref, onUnmounted, unref, nextTick, watch } from 'vue';
 import { isProdMode } from '/@/utils/env';
@@ -112,9 +112,12 @@ export function useForm(props?: Props): UseFormReturnType {
       return form.validate(nameList);
     },
 
-    validateFields: async (nameList?: NamePath[]): Promise<Recordable> => {
+    validateFields: async (
+      nameList?: NamePath[],
+      options?: ValidateOptions
+    ): Promise<Recordable> => {
       const form = await getForm();
-      return form.validateFields(nameList);
+      return form.validateFields(nameList, options);
     },
   };
 

 import type { ComputedRef, Ref } from 'vue';
 import type { FormProps, FormSchema, FormActionType } from '../types/form';
-import type { NamePath } from 'ant-design-vue/lib/form/interface';
+import type { NamePath, ValidateOptions } from 'ant-design-vue/lib/form/interface';
 import { unref, toRaw } from 'vue';
 import { isArray, isFunction, isObject, isString } from '/@/utils/is';
 import { deepMerge } from '/@/utils';
@@ -206,8 +206,8 @@ export function useFormEvents({
     });
   }
 
-  async function validateFields(nameList?: NamePath[] | undefined) {
-    return unref(formElRef)?.validateFields(nameList);
+  async function validateFields(nameList?: NamePath[] | undefined, options?: ValidateOptions) {
+    return unref(formElRef)?.validateFields(nameList, options);
   }
 
   async function validate(nameList?: NamePath[] | undefined) {

-import type { NamePath, RuleObject } from 'ant-design-vue/lib/form/interface';
+import type { NamePath, RuleObject, ValidateOptions } from 'ant-design-vue/lib/form/interface';
 import type { VNode } from 'vue';
 import type { ButtonProps as AntdButtonProps } from '/@/components/Button';
 import type { FormItem } from './formItem';
@@ -39,7 +39,7 @@ export interface FormActionType {
     prefixField: string | undefined,
     first?: boolean | undefined
   ) => Promise<void>;
-  validateFields: (nameList?: NamePath[]) => Promise<any>;
+  validateFields: (nameList?: NamePath[], options?: ValidateOptions) => Promise<any>;
   validate: (nameList?: NamePath[]) => Promise<any>;
   scrollToField: (name: NamePath, options?: ScrollOptions) => Promise<void>;
 }

@@ -33,6 +33,7 @@
   import { openWindow } from '/@/utils';
 
   import { useOpenKeys } from './useOpenKeys';
+  import { useMenuActiveFix } from '/@/hooks/business/useMenuActiveFix';
   export default defineComponent({
     name: 'SimpleMenu',
     components: {
@@ -120,7 +121,9 @@
           isClickGo.value = false;
           return;
         }
-        const path = (route || unref(currentRoute)).path;
+
+        let { flag, path } = useMenuActiveFix(route || unref(currentRoute));
+        path = flag ? path : (route || unref(currentRoute)).path;
 
         menuState.activeName = path;
 

@@ -29,7 +29,6 @@ export function useOpenKeys(
           return;
         }
         const keys = getAllParentPath(menuList, path);
-
         if (!unref(accordion)) {
           menuState.openNames = uniq([...menuState.openNames, ...keys]);
         } else {

@@ -48,6 +48,7 @@
       'update:value',
       'change',
       'check',
+      'unSelectAll',
       'update:searchValue',
     ],
     setup(props, { attrs, slots, emit, expose }) {
@@ -188,6 +189,7 @@
       }
 
       function checkAll(checkAll: boolean) {
+        if (!checkAll) emit('unSelectAll');
         state.checkedKeys = checkAll ? getEnabledKeys() : ([] as Keys);
       }
 

@@ -2,17 +2,23 @@
   import { isNumber } from 'lodash';
   import videoJs, { VideoJsPlayer, VideoJsPlayerOptions } from 'video.js';
   import 'video.js/dist/video-js.css';
-  import { computed, CSSProperties, onMounted, onUnmounted, ref, unref } from 'vue';
+  import { computed, CSSProperties, onMounted, onUnmounted, ref, toRaw, unref } from 'vue';
   import { useDesign } from '/@/hooks/web/useDesign';
   import { getJwtToken, getShareJwtToken } from '/@/utils/auth';
   import { isShareMode } from '/@/views/sys/share/hook';
   import 'videojs-flvjs-es6';
   const { prefixCls } = useDesign('basic-video-play');
 
-  const props = defineProps<{
-    options?: VideoJsPlayerOptions;
-    withToken?: boolean;
-  }>();
+  const props = withDefaults(
+    defineProps<{
+      options?: VideoJsPlayerOptions;
+      withToken?: boolean;
+      immediateInitOnMounted?: boolean;
+    }>(),
+    {
+      immediateInitOnMounted: true,
+    }
+  );
 
   const emit = defineEmits<{
     (event: 'ready', instance?: Nullable<VideoJsPlayer>): void;
@@ -68,8 +74,18 @@
     });
   };
 
+  const customInit = (getOptionsFn: (optios: VideoJsPlayerOptions) => VideoJsPlayerOptions) => {
+    return (videoPlayInstance.value = videoJs(
+      unref(videoPlayEl)!,
+      getOptionsFn(toRaw(unref(getOptions))),
+      () => {
+        emit('ready', unref(videoPlayInstance));
+      }
+    ));
+  };
+
   onMounted(() => {
-    init();
+    props.immediateInitOnMounted && init();
   });
 
   onUnmounted(() => {
@@ -79,6 +95,7 @@
   });
 
   defineExpose({
+    customInit,
     reloadPlayer: init,
     getInstance: () => unref(videoPlayInstance),
   });

+import { RouteLocationNormalizedLoaded } from 'vue-router';
+
+const menuMap = new Map();
+
+menuMap.set('/visual/board/detail/:boardId/:boardName?', '/visual/board');
+
+export const useMenuActiveFix = (route: RouteLocationNormalizedLoaded) => {
+  let flag = false;
+  let path;
+
+  const matchPath = route.matched.map((item) => item.path);
+  const needFixMenus: string[] = Array.from(menuMap.keys());
+
+  for (const item of matchPath) {
+    for (const menu of needFixMenus) {
+      if (menu === item) {
+        flag = true;
+        path = menuMap.get(menu);
+        break;
+      }
+    }
+  }
+
+  return {
+    flag,
+    path,
+  };
+};

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

@@ -19,6 +19,7 @@
   import { useRootSetting } from '/@/hooks/setting/useRootSetting';
   import { useAppInject } from '/@/hooks/web/useAppInject';
   import { useDesign } from '/@/hooks/web/useDesign';
+  import { OUTSIDE_LINK_PREFIX } from '/@/router/helper/routeHelper';
 
   export default defineComponent({
     name: 'LayoutMenu',
@@ -113,6 +114,11 @@
        */
 
       function handleMenuClick(path: string) {
+        if (path.startsWith(OUTSIDE_LINK_PREFIX)) {
+          path = path.replace(OUTSIDE_LINK_PREFIX, '');
+          window.open(path);
+          return;
+        }
         go(path);
       }
 
@@ -183,7 +189,6 @@
       padding: 10px 4px 10px 10px;
 
       img {
-        width: @logo-width;
         height: @logo-width;
       }
     }

@@ -6,6 +6,7 @@ import { cloneDeep, omit } from 'lodash-es';
 import { warn } from '/@/utils/log';
 import { createRouter, createWebHashHistory } from 'vue-router';
 
+export const OUTSIDE_LINK_PREFIX = '/outside/link';
 export type LayoutMapKey = 'LAYOUT';
 const IFRAME = () => import('/@/views/sys/iframe/FrameBlank.vue');
 
@@ -81,6 +82,9 @@ export function transformObjToRoute<T = AppRouteModule>(routeList: AppRouteModul
         route.meta = meta;
       }
     }
+    if (!route.path.startsWith('/') && route.meta.isLink) {
+      route.path = `${OUTSIDE_LINK_PREFIX}${route.path}`;
+    }
     route.children && asyncImportRoute(route.children);
   });
   return routeList as unknown as T[];

@@ -16,6 +16,7 @@
           mode="multiple"
           v-model:value="model[field]"
           :options="alarmContactOptions.map((item) => ({ value: item.value, label: item.label }))"
+          @change="handleChange"
         >
           <template #dropdownRender="{ menuNode: menu }">
             <v-nodes :vnodes="menu" />
@@ -82,6 +83,7 @@
       const [registerAlarmContactDrawer, { openDrawer }] = useDrawer();
       async function handleSuccess() {
         //获取告警联系人
+        if (!unref(orgId)) return;
         const res = await byOrgIdGetAlarmContact(orgId.value);
         if (res) {
           alarmContactOptions.value = res.map((m) => {
@@ -91,6 +93,10 @@
           alarmContactOptions.value = [];
         }
       }
+
+      const handleChange = () => {
+        validateFields(['alarmContactId']);
+      };
       // 新增或编辑
       const handleOpenAlarmContact = () => {
         openDrawer(true, {
@@ -100,7 +106,10 @@
       const isUpdate = ref(true);
       let allData: any = reactive({});
       const editId = ref('');
-      const [registerForm, { validate, setFieldsValue, resetFields, updateSchema }] = useForm({
+      const [
+        registerForm,
+        { validate, setFieldsValue, resetFields, updateSchema, validateFields },
+      ] = useForm({
         labelWidth: 120,
         schemas: formSchema,
         showActionButtonGroup: false,
@@ -191,6 +200,7 @@
         handleOpenAlarmContact,
         registerAlarmContactDrawer,
         handleSuccess,
+        handleChange,
       };
     },
   });

@@ -37,13 +37,21 @@
           </a-button>
         </template>
         <template #status="{ record }">
-          <Switch
-            :checked="record.status === 1"
-            :loading="record.pendingStatus"
-            checkedChildren="启用"
-            unCheckedChildren="禁用"
-            @change="(checked:boolean)=>statusChange(checked,record)"
-          />
+          <Authority value="api:yt:alarm:profile:status">
+            <Switch
+              :checked="record.status === 1"
+              :loading="record.pendingStatus"
+              checkedChildren="启用"
+              unCheckedChildren="禁用"
+              @change="(checked:boolean)=>statusChange(checked,record)"
+            />
+          </Authority>
+          <Tag
+            v-if="!hasPermission('api:yt:alarm:profile:status')"
+            :color="record.status ? 'green' : 'red'"
+          >
+            {{ record.status ? '启用' : '禁用' }}
+          </Tag>
         </template>
         <template #action="{ record }">
           <TableAction
@@ -88,7 +96,7 @@
   import { useResetOrganizationTree, OrganizationIdTree } from '/@/views/common/organizationIdTree';
   import { deleteAlarmConfig, queryAlarmConfig } from '/@/api/alarm/config/alarmConfig';
   import { searchFormSchema, columns } from './config.data';
-  import { Modal, Popconfirm } from 'ant-design-vue';
+  import { Modal, Popconfirm, Tag } from 'ant-design-vue';
   import { JsonPreview } from '/@/components/CodeEditor';
   import { findDictItemByCode } from '/@/api/system/dict';
   import { alarmContactGetPage } from '/@/api/device/deviceConfigApi';
@@ -97,6 +105,7 @@
   import { putAlarmConfigStatus } from '/@/api/alarm/config/alarmConfig';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { Authority } from '/@/components/Authority';
+  import { usePermission } from '/@/hooks/web/usePermission';
 
   export default defineComponent({
     components: {
@@ -108,8 +117,10 @@
       Switch,
       Authority,
       Popconfirm,
+      Tag,
     },
     setup() {
+      const { hasPermission } = usePermission();
       const searchInfo = reactive<Recordable>({});
       const { organizationIdTreeRef, resetFn } = useResetOrganizationTree(searchInfo);
       // 刷新
@@ -250,6 +261,7 @@
         showAlarmContact,
         showMessageMode,
         statusChange,
+        hasPermission,
       };
     },
   });

@@ -17,10 +17,21 @@ export enum ConfigurationPermission {
   UPDATE = 'api:yt:dataview:center:update',
   DELETE = 'api:yt:dataview:center:delete',
   SHARE = 'api:yt:dataview:center:share',
-  DESIGN = 'api:yt:dataview:center:get_configuration_info:design',
+  // DESIGN = 'api:yt:dataview:center:get_configuration_info:design',
+  DESIGN = 'api:yt:dataview:center:get_dataview_info:design',
   PREVIEW = 'api:yt:dataview:center:get_configuration_info:preview',
   PUBLISH = 'api:yt:dataview:center:publish',
   // CANCEL_PUBLISH = 'api:yt:dataview:center:cancel_publish',
+  PUBLISH_INTERFACE = 'api:yt:dataview:center:public_interface',
+}
+
+export enum PublicInterface {
+  CREATE = 'api:yt:dataview:center:public_interface:post',
+  LIST = 'api:yt:dataview:center:public_interface:list',
+  UPDATE = 'api:yt:dataview:center:public_interface:update',
+  DELETE = 'api:yt:dataview:center:public_interface:delete',
+  PUBLISH = 'api:yt:dataview:center:public_interface:publish',
+  CANCEL_PUBLISH = 'api:yt:dataview:center:public_interface:cancel',
 }
 
 // 查询字段

@@ -218,7 +218,10 @@
             <Authority v-if="!isCustomerUser" :value="ConfigurationPermission.CREATE">
               <Button type="primary" @click="handleCreateOrUpdate()"> 新增大屏 </Button>
             </Authority>
-            <Authority v-if="hasPublicInterfacePermission" :value="ConfigurationPermission.CREATE">
+            <Authority
+              v-if="hasPublicInterfacePermission"
+              :value="ConfigurationPermission.PUBLISH_INTERFACE"
+            >
               <Button type="primary" @click="handleCreateOrUpdatePublicApi()">公共接口管理</Button>
             </Authority>
             <CardLayoutButton v-model:value="listColumn" @change="handleCardLayoutChange" />
@@ -280,6 +283,7 @@
                 </Tooltip>
                 <Tooltip v-if="!isCustomerUser" title="设计">
                   <AuthIcon
+                    :auth="ConfigurationPermission.DESIGN"
                     :disabled="item.state === 1"
                     icon="ant-design:edit-outlined"
                     @click="handleDesign(item)"

@@ -9,23 +9,30 @@
         <a-button type="link" class="ml-2" @click="handleRecordContent(record)"> 查看 </a-button>
       </template>
       <template #toolbar>
-        <a-button type="primary" @click="handleCreateOrEdit(null)"> 新增公共接口 </a-button>
-        <Popconfirm
-          title="您确定要批量删除数据"
-          ok-text="确定"
-          cancel-text="取消"
-          @confirm="handleDeleteOrBatchDelete(null)"
-        >
-          <a-button color="error" :disabled="hasBatchDelete"> 批量删除 </a-button>
-        </Popconfirm>
-        <Popconfirm
-          title="您确定要批量发布"
-          ok-text="确定"
-          cancel-text="取消"
-          @confirm="handleBatchPublish('batchPublish')"
-        >
-          <a-button color="error" :disabled="hasBatchPublish"> 批量发布 </a-button>
-        </Popconfirm>
+        <Authority :value="PublicInterface.CREATE">
+          <a-button type="primary" @click="handleCreateOrEdit(null)"> 新增公共接口 </a-button>
+        </Authority>
+
+        <Authority :value="PublicInterface.DELETE">
+          <Popconfirm
+            title="您确定要批量删除数据"
+            ok-text="确定"
+            cancel-text="取消"
+            @confirm="handleDeleteOrBatchDelete(null)"
+          >
+            <a-button color="error" :disabled="hasBatchDelete"> 批量删除 </a-button>
+          </Popconfirm>
+        </Authority>
+        <Authority :value="PublicInterface.PUBLISH">
+          <Popconfirm
+            title="您确定要批量发布"
+            ok-text="确定"
+            cancel-text="取消"
+            @confirm="handleBatchPublish('batchPublish')"
+          >
+            <a-button color="error" :disabled="hasBatchPublish"> 批量发布 </a-button>
+          </Popconfirm>
+        </Authority>
         <!-- <Popconfirm
           title="您确定要批量取消发布"
           ok-text="确定"
@@ -41,6 +48,7 @@
             {
               label: '发布',
               icon: 'ant-design:node-expand-outlined',
+              auth: PublicInterface.PUBLISH,
               onClick: handlePublish.bind(null, 'publish', record),
               ifShow: () => {
                 return record.state === 0 && record.creator === userId;
@@ -49,6 +57,7 @@
             {
               label: '取消发布',
               icon: 'ant-design:node-collapse-outlined',
+              auth: PublicInterface.CANCEL_PUBLISH,
               onClick: handlePublish.bind(null, 'canelPublish', record),
               ifShow: () => {
                 return record.state === 1 && record.creator === userId;
@@ -57,6 +66,7 @@
             {
               label: '修改',
               icon: 'clarity:note-edit-line',
+              auth: PublicInterface.UPDATE,
               onClick: handleCreateOrEdit.bind(null, record),
               ifShow: () => {
                 return record.state === 0 && record.creator === userId;
@@ -65,6 +75,7 @@
             {
               label: '删除',
               icon: 'ant-design:delete-outlined',
+              auth: PublicInterface.DELETE,
               color: 'error',
               ifShow: () => {
                 return record.state === 0 && record.creator === userId;
@@ -99,6 +110,8 @@
   import { useMessage } from '/@/hooks/web/useMessage';
   import { USER_INFO_KEY } from '/@/enums/cacheEnum';
   import { getAuthCache } from '/@/utils/auth';
+  import { PublicInterface } from '../config';
+  import { Authority } from '/@/components/Authority';
 
   const userInfo = getAuthCache(USER_INFO_KEY) as any;
 
@@ -119,7 +132,7 @@
     },
     useSearchForm: true,
     actionColumn: {
-      width: 150,
+      width: 180,
       title: '操作',
       dataIndex: 'action',
       slots: { customRender: 'action' },

@@ -125,23 +125,25 @@ export const step1Schemas: FormSchema[] = [
     dynamicRules({ values }) {
       return [
         {
-          required:
-            (values?.transportType === TransportTypeEnum.TCP &&
-              values?.deviceType === DeviceTypeEnum.SENSOR) ||
-            values?.deviceType === DeviceTypeEnum.GATEWAY,
+          required: values?.transportType === TransportTypeEnum.TCP,
           message: '请输入设备标识符',
         },
       ];
     },
-    ifShow: ({ values }) =>
-      values?.transportType === TransportTypeEnum.TCP &&
-      (values.deviceType === DeviceTypeEnum.SENSOR || values.deviceType === DeviceTypeEnum.GATEWAY),
-    componentProps: ({}) => {
+    // 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 });
+        },
       };
     },
   },
@@ -167,11 +169,17 @@ export const step1Schemas: FormSchema[] = [
       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.deviceType === DeviceTypeEnum.SENSOR ||
-          values.deviceType === DeviceTypeEnum.GATEWAY) &&
         values?.codeType === TaskTypeEnum.MODBUS_RTU
       );
     },

@@ -43,7 +43,9 @@ export const descSchema = (emit: EmitType): DescItem[] => {
             type: 'link',
             style: { padding: 0 },
             onClick: () =>
-              !isCustomer ? go(PageEnum.DEVICE_PROFILE + '?name=' + String(val)) : '',
+              !isCustomer
+                ? go(PageEnum.DEVICE_PROFILE + '?name=' + encodeURIComponent(String(val)))
+                : '',
           },
           { default: () => val }
         );
@@ -167,12 +169,12 @@ export const alarmColumns: BasicColumn[] = [
   {
     title: '告警时间',
     dataIndex: 'createdTime',
-    width: 120,
+    width: 180,
   },
   {
     title: '告警设备',
     dataIndex: 'deviceName',
-    width: 100,
+    width: 120,
   },
   {
     title: '告警场景',
@@ -182,14 +184,20 @@ export const alarmColumns: BasicColumn[] = [
   {
     title: '告警级别',
     dataIndex: 'severity',
-    width: 160,
+    width: 90,
     format: (text) => alarmLevel(text),
   },
   {
+    title: '告警详情',
+    dataIndex: 'details',
+    slots: { customRender: 'details' },
+    width: 160,
+  },
+  {
     title: '状态',
     dataIndex: 'status',
     format: (text) => statusType(text),
-    width: 160,
+    width: 100,
   },
 ];
 
@@ -261,14 +269,6 @@ export const alarmSchemasForm: FormSchema[] = [
       disabled: true,
     },
   },
-  {
-    field: 'details',
-    label: '详情',
-    component: 'InputTextArea',
-    componentProps: {
-      maxLength: 255,
-    },
-  },
 ];
 // 子设备
 export const childDeviceSchemas: FormSchema[] = [

@@ -54,10 +54,6 @@
         await resetFields();
         await setFieldsValue({
           ...data,
-          details: JSON.stringify(data?.details?.data).slice(
-            1,
-            JSON.stringify(data?.details?.data).length - 1
-          ),
           severity: alarmLevel(data.severity),
           status: statusType(data.status),
         });

@@ -145,6 +145,8 @@
           // !!!此处需要删除地图的属性，否则会报堆栈溢出的错误 Uncaught RangeError: Maximum call stack size exceeded
           Reflect.deleteProperty(DeviceStep1Ref.value.positionState, 'map');
           Reflect.deleteProperty(DeviceStep1Ref.value.positionState, 'marker');
+          Reflect.deleteProperty(DeviceStep1Ref.value.devicePositionState, 'map');
+          Reflect.deleteProperty(DeviceStep1Ref.value.devicePositionState, 'marker');
           setModalProps({
             confirmLoading: true,
           });
@@ -156,7 +158,7 @@
               customerId: currentDeviceData.customerId,
               deviceInfo: {
                 avatar: DeviceStep1Ref.value?.devicePic,
-                ...DeviceStep1Ref.value?.positionState,
+                ...DeviceStep1Ref.value?.devicePositionState,
               },
             };
             validateNameLength(stepRecord.name);
@@ -168,7 +170,7 @@
               sn: stepRecord.name,
               deviceInfo: {
                 avatar: DeviceStep1Ref.value?.devicePic,
-                ...DeviceStep1Ref.value?.positionState,
+                ...DeviceStep1Ref.value?.devicePositionState,
               },
               deviceToken:
                 unref(current) === 0 || !unref(stepState).addAgree

@@ -46,7 +46,7 @@
           </div>
         </template>
         <template #deviceAddress>
-          <Input disabled v-model:value="positionState.address">
+          <Input disabled v-model:value="devicePositionState.address">
             <template #addonAfter>
               <EnvironmentTwoTone @click="selectPosition" />
             </template>
@@ -128,6 +128,7 @@
   import { useDrawer } from '/@/components/Drawer';
   import DeptDrawer from '/@/views/system/organization/OrganizationDrawer.vue';
   import { TaskTypeEnum } from '/@/views/task/center/config';
+  import { toRaw } from 'vue';
 
   export default defineComponent({
     components: {
@@ -239,8 +240,14 @@
       const selectPosition = () => {
         visible.value = true;
         if (!positionState.longitude) {
-          positionState.longitude = '104.04666605565338';
-          positionState.latitude = '30.543516387560476';
+          positionState.longitude = '104.05326410962411';
+          positionState.latitude = '30.54855093076791';
+
+          // 根据经纬度获取详细位置
+          if (positionState.longitude && positionState.latitude) {
+            var pt = new BMap.Point(positionState.longitude, positionState.latitude);
+            getAddrByPoint(pt);
+          }
           initMap(positionState.longitude, positionState.latitude);
         } else {
           initMap(positionState.longitude, positionState.latitude);
@@ -261,6 +268,15 @@
         map: null,
         marker: null,
       });
+
+      const devicePositionState = ref({
+        longitude: '',
+        latitude: '',
+        address: '',
+        map: null,
+        marker: null,
+      });
+
       /**
        * 逆地址解析函数（根据坐标点获取详细地址）
        * @param {Object} point   百度地图坐标点，必传
@@ -371,6 +387,7 @@
       // 确定选择的位置
       const handleOk = () => {
         visible.value = false;
+        devicePositionState.value = { ...toRaw(positionState) };
       };
       // 取消选择位置
       const handleCancel = () => {
@@ -385,6 +402,7 @@
         positionState.longitude = deviceInfo.longitude;
         positionState.latitude = deviceInfo.latitude;
         positionState.address = deviceInfo.address;
+        devicePositionState.value = { ...toRaw(positionState) };
         devicePic.value = deviceInfo.avatar;
         setFieldsValue({
           ...data,
@@ -418,11 +436,13 @@
       function parentResetDevicePic(deviceInfo) {
         devicePic.value = deviceInfo.avatar;
       }
+
       // 父组件重置位置
       function parentResetPositionState() {
         for (let key in positionState) {
           positionState[key] = '';
         }
+        devicePositionState.value = { ...toRaw(positionState) };
       }
       // 禁用设备类型
       function disabledDeviceType(disabled: boolean) {
@@ -474,6 +494,7 @@
         handleOpenOrgDrawer,
         handleSuccess,
         handleTreeOrg,
+        devicePositionState,
       };
     },
   });

@@ -12,17 +12,31 @@
           ]"
         />
       </template>
+      <template #details="{ record }">
+        <a-button type="link" class="ml-2" @click="handleViewAlarmDetails(record)">
+          查看告警详情
+        </a-button>
+      </template>
     </BasicTable>
     <AlarmDetailModal @register="registerDetailModal" @success="handleSuccess" />
   </div>
 </template>
 <script lang="ts">
-  import { defineComponent } from 'vue';
+  import { defineComponent, h, nextTick } from 'vue';
   import { BasicTable, useTable, TableAction } from '/@/components/Table';
   import { alarmColumns, alarmSearchSchemas } from '../../config/detail.config';
   import { getDeviceAlarm } from '/@/api/device/deviceManager';
   import AlarmDetailModal from '../modal/AlarmDetailModal.vue';
   import { useModal } from '/@/components/Modal';
+  import { Modal } from 'ant-design-vue';
+  import { JsonPreview } from '/@/components/CodeEditor';
+  import { getDeviceDetail } from '/@/api/device/deviceManager';
+  import { getAttribute } from '/@/api/ruleengine/ruleengineApi';
+  import {
+    operationNumber_OR_TIME,
+    operationString,
+    operationBoolean,
+  } from '/@/views/rule/linkedge/config/formatData';
   export default defineComponent({
     name: 'DeviceManagement',
     components: {
@@ -66,11 +80,86 @@
       const handleSuccess = () => {
         reload();
       };
+      const handleViewAlarmDetails = async (record: Recordable) => {
+        await nextTick();
+        const { details } = record;
+        const deviceIdKeys = Object.keys(details);
+        const detailObject = deviceIdKeys.map((key) => ({ label: key, value: details[key] }));
+        const dataFormat = await handleAlarmDetailFormat(deviceIdKeys);
+        console.log(detailObject, dataFormat, 'dataFormat');
+        const dataFormats = detailObject.reduce((acc: any, curr: any) => {
+          dataFormat.forEach((item) => {
+            if (item.tbDeviceId === curr.label) {
+              const findName = item.attribute.find(
+                (item) => item.identifier === curr.value.key
+              )?.name;
+              const findLogin = [
+                ...operationNumber_OR_TIME,
+                ...operationString,
+                ...operationBoolean,
+              ].find((item) => item.value === curr.value.logic)?.symbol;
+              const findAttribute = item.attribute.find(
+                (findItem) => findItem.identifier === curr.value.key
+              );
+              const value = {
+                ['触发属性']: findName,
+                ['触发条件']: `${findLogin}${curr.value.logicValue}`,
+                ['触发值']: `${curr.value.realValue}${findAttribute.detail?.dataType?.specs?.unit?.key}`,
+              };
+              const data = {
+                [item.name]: value,
+              };
+              acc.push(data);
+            }
+          });
+          return [...acc];
+        }, []);
+        const objectFormat = dataFormats.reduce((acc: any, curr: any) => {
+          return {
+            ...acc,
+            ...curr,
+          };
+        }, {});
+        Modal.info({
+          title: '告警详情',
+          width: 600,
+          centered: true,
+          maskClosable: true,
+          content: h(JsonPreview, { data: JSON.parse(JSON.stringify(objectFormat)) }),
+        });
+      };
+      const handleAlarmDetailFormat = async (keys: string[]) => {
+        const temp: any = [];
+        for (let item of keys) {
+          if (item === 'key' || item === 'data') return []; //旧数据则终止
+          const deviceDetailRes = await getDeviceDetail(item);
+          const { deviceProfileId } = deviceDetailRes;
+          if (!deviceProfileId) return [];
+          const attributeRes = await getAttribute(deviceProfileId);
+          const dataFormat: any = handleDataFormat(deviceDetailRes, attributeRes);
+          temp.push(dataFormat);
+        }
+        return temp;
+      };
+      const handleDataFormat = (deviceDetail: any, attributes: any) => {
+        const { name, tbDeviceId } = deviceDetail;
+        const attribute = attributes.map((item) => ({
+          identifier: item.identifier,
+          name: item.name,
+          detail: item.detail,
+        }));
+        return {
+          name,
+          tbDeviceId,
+          attribute,
+        };
+      };
       return {
         registerTable,
         registerDetailModal,
         handleDetail,
         handleSuccess,
+        handleViewAlarmDetails,
       };
     },
   });

@@ -52,7 +52,9 @@
     <div class="mt-4" v-if="!isCustomer">
       <a-button type="primary" class="mr-4" @click="copyTbDeviceId">复制设备ID</a-button>
       <a-button type="primary" class="mr-4" @click="copyDeviceToken">复制访问令牌</a-button>
-      <a-button type="primary" class="mr-4" @click="manageDeviceToken">管理设备凭证</a-button>
+      <Authority value="api:yt:device:equipment">
+        <a-button type="primary" class="mr-4" @click="manageDeviceToken">管理设备凭证</a-button>
+      </Authority>
       <ManageDeviceTokenModal @register="registerModal" />
     </div>
     <div class="mt-4">
@@ -84,10 +86,10 @@
   import { DeviceTypeEnum } from '/@/api/device/model/deviceModel';
   import { useAuthDeviceDetail } from '../../hook/useAuthDeviceDetail';
   import { useClipboard } from '@vueuse/core';
-
   import wz from '/@/assets/images/wz.png';
   import { useAsyncQueue } from '../../../localtion/useAsyncQueue';
   import locationImage from '/@/assets/icons/location.svg';
+  import { Authority } from '/@/components/Authority';
 
   export default defineComponent({
     components: {
@@ -98,6 +100,7 @@
       BasicModal,
       Tooltip,
       Empty,
+      Authority,
     },
     props: {
       deviceDetail: {

@@ -72,7 +72,7 @@ export const formSchemas: FormSchema[] = [
   },
   {
     field: 'eventType',
-    label: '告警类型',
+    label: '事件类型',
     component: 'ApiSelect',
     componentProps: {
       placeholder: '请选择事件类型',

@@ -167,6 +167,7 @@
     mode.value = value;
     await nextTick();
     setTableData(socketInfo.originData);
+    socketInfo.dataSource = socketInfo.originData;
   };
 
   const { createMessage } = useMessage();
@@ -315,10 +316,10 @@
         <ModeSwitchButton v-model:value="mode" @change="switchMode" />
       </div>
       <List
-        v-if="mode === EnumTableCardMode.CARD"
+        v-show="mode === EnumTableCardMode.CARD"
         ref="listElRef"
         class="list-mode !px-2"
-        :data-source="socketInfo.originData"
+        :data-source="socketInfo.dataSource"
         :grid="grid"
         :pagination="pagination"
       >

@@ -129,17 +129,20 @@ const SingleToHexBatch = (t) => {
 
 const formSchemasConfig = (schemas, actionType): FormSchema[] => {
   const { identifier, functionName } = schemas;
-  console.log(identifier, 'identifier', actionType, 'actionType');
   if (actionType == '06') {
     return [
       {
         field: identifier,
         label: functionName,
         component: 'InputNumber',
-        rules: [{ required: true, message: '请输入值' }],
+        rules: [{ required: true, message: '请输入正数' }],
         componentProps: {
-          precision: 0,
-          placeholder: `请输入整数`,
+          min: 0,
+          formatter: (e) => {
+            const value = `${e}`.replace('-', '').replace(/^(-)*(\d+)\.(\d\d).*$/, '$1$2.$3');
+            return value;
+          },
+          placeholder: `请输入正数`,
         },
       },
     ];
@@ -166,7 +169,7 @@ const formSchemasConfig = (schemas, actionType): FormSchema[] => {
         component: 'InputNumber',
         rules: [{ required: true, message: '请输入值' }],
         componentProps: {
-          placeholder: `请输入值`,
+          placeholder: `请输入数字`,
           formatter: (e) =>
             `${e}`.replace(/\B(?=(\d{3})+(?!\d))/g, '').replace(/^(-)*(\d+)\.(\d\d).*$/, '$1$2.$3'),
         },

@@ -39,10 +39,9 @@
     const { name, detail, identifier, deviceDetail, extensionDesc } = record;
     const { dataType } = detail;
     const { type } = dataType || {};
-    const { codeType, deviceProfile } = deviceDetail || {};
+    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;
@@ -64,7 +63,7 @@
       isShowModBUS.value = true;
       modBUSForm.value = {
         crc: 'CRC_16_LOWER',
-        deviceCode: '01',
+        deviceCode: code,
         method: actionType == '16' ? '10' : actionType,
         registerAddress,
         registerNumber: 1,
@@ -91,6 +90,17 @@
     return array;
   };
 
+  // 获取小数
+  const getFloatPart = (number: string | number) => {
+    const isLessZero = Number(number) < 0;
+    number = number.toString();
+    const floatPartStartIndex = number.indexOf('.');
+    const value = ~floatPartStartIndex
+      ? `${isLessZero ? '-' : ''}0.${number.substring(floatPartStartIndex + 1)}`
+      : '0';
+    return Number(value);
+  };
+
   const { createMessage } = useMessage();
   const loading = ref(false);
   const handleSend = async () => {
@@ -111,15 +121,37 @@
         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 = [oldValue * unref(zoomFactorValue)];
+          modBUSForm.value.registerValues = [newValue];
         }
 
         if (unref(modBUSForm).method == '16' || unref(modBUSForm).method == '10') {
-          const newValue = getArray(
-            SingleToHex(unref(isShowMultiply) ? oldValue * unref(zoomFactorValue) : oldValue)
-          );
+          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';

@@ -5,7 +5,9 @@
   >
     <template #toolbar>
       <Space>
-        <Button type="primary" @click="openModal(true)">命令下发</Button>
+        <Authority value="api:yt:device:rpc">
+          <Button type="primary" @click="openModal(true)">命令下发</Button>
+        </Authority>
       </Space>
     </template>
     <template #recordContent="{ record }">
@@ -43,6 +45,7 @@
   import { DeviceRecord } from '/@/api/device/model/deviceModel';
   import { BasicModal, useModal } from '/@/components/Modal';
   import CommandIssuance from '../CommandIssuance.vue';
+  import { Authority } from '/@/components/Authority';
 
   const props = defineProps({
     fromId: {
@@ -85,7 +88,8 @@
   };
   const handleRecordContent = (record) => {
     if (!record?.request?.body) return;
-    const jsonParams = record?.request?.body;
+    if (Object.prototype.toString.call(record?.request?.body) !== '[object Object]') return;
+    const jsonParams = record?.request?.body?.params;
     commonModalInfo('命令下发内容', jsonParams);
   };
   const handleRecordResponseContent = (record) => {

@@ -24,14 +24,16 @@
           <Authority value="api:yt:device:import">
             <Button type="primary" @click="handleBatchImport">导入</Button>
           </Authority>
-          <a-button
-            v-if="authBtn(role)"
-            type="primary"
-            @click="handleBatchAssign"
-            :disabled="!isExistOption"
-          >
-            批量分配
-          </a-button>
+          <Authority value="api:yt:device:assign">
+            <a-button
+              v-if="authBtn(role)"
+              type="primary"
+              @click="handleBatchAssign"
+              :disabled="!isExistOption"
+            >
+              批量分配
+            </a-button>
+          </Authority>
         </template>
         <template #img="{ record }">
           <TableImg
@@ -134,6 +136,7 @@
                     label: '分配客户',
                     icon: 'mdi:account-arrow-right',
                     ifShow: authBtn(role),
+                    auth: 'api:yt:device:assign',
                     onClick: handleDispatchCustomer.bind(null, record),
                   },
               {

@@ -33,9 +33,15 @@
                 </Button>
               </Authority>
               <Button type="primary" @click="handleOpenTsl"> 物模型TSL </Button>
-              <Upload v-if="isShowBtn" :show-upload-list="false" :customRequest="handleImportModel">
-                <Button type="primary" :loading="importLoading"> 导入物模型 </Button>
-              </Upload>
+              <Authority value="api:yt:things_model:import">
+                <Upload
+                  v-if="isShowBtn"
+                  :show-upload-list="false"
+                  :customRequest="handleImportModel"
+                >
+                  <Button type="primary" :loading="importLoading"> 导入物模型 </Button>
+                </Upload>
+              </Authority>
             </div>
             <div class="flex gap-2">
               <Authority :value="ModelOfMatterPermission.RELEASE">

@@ -19,6 +19,6 @@
 </template>
 <style scoped>
   :deep(.ant-table-body) {
-    overflow: hidden !important;
+    overflow: scroll !important;
   }
 </style>

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

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

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

@@ -17,16 +17,26 @@
         </Authority>
       </template>
       <template #config="{ record }">
-        <a-button type="link" class="ml-2" @click="showData(record)"> 查看配置 </a-button>
+        <Authority value="api:yt:message:get:config">
+          <a-button type="link" class="ml-2" @click="showData(record)"> 查看配置 </a-button>
+        </Authority>
       </template>
       <template #status="{ record }">
-        <Switch
-          :checked="record.status === 1"
-          :loading="record.pendingStatus"
-          checkedChildren="启用"
-          unCheckedChildren="禁用"
-          @change="(checked:boolean)=>statusChange(checked,record)"
-        />
+        <Authority value="api:yt:message:status">
+          <Switch
+            :checked="record.status === 1"
+            :loading="record.pendingStatus"
+            checkedChildren="启用"
+            unCheckedChildren="禁用"
+            @change="(checked:boolean)=>statusChange(checked,record)"
+          />
+        </Authority>
+        <Tag
+          v-if="!hasPermission('api:yt:message:status')"
+          :color="record.status ? 'green' : 'red'"
+        >
+          {{ record.status ? '启用' : '禁用' }}
+        </Tag>
       </template>
       <template #action="{ record }">
         <TableAction
@@ -62,18 +72,20 @@
   import { useDrawer } from '/@/components/Drawer';
   import ConfigDrawer from './ConfigDrawer.vue';
   import { columns, searchFormSchema } from './config.data';
-  import { Modal, Popconfirm } from 'ant-design-vue';
+  import { Modal, Popconfirm, Tag } from 'ant-design-vue';
   import { JsonPreview } from '/@/components/CodeEditor';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
   import { Switch } from 'ant-design-vue';
   import { setMessageConfigStatus } from '/@/api/message/config';
   import { Authority } from '/@/components/Authority';
+  import { usePermission } from '/@/hooks/web/usePermission';
 
   export default defineComponent({
     name: 'MessageConfigManagement',
-    components: { BasicTable, ConfigDrawer, TableAction, Switch, Authority, Popconfirm },
+    components: { BasicTable, ConfigDrawer, TableAction, Switch, Authority, Popconfirm, Tag },
     setup() {
+      const { hasPermission } = usePermission();
       const [registerDrawer, { openDrawer }] = useDrawer();
       function handleSuccess() {
         reload();
@@ -168,6 +180,7 @@
         handleDeleteOrBatchDelete,
         hasBatchDelete,
         statusChange,
+        hasPermission,
       };
     },
   });

@@ -22,13 +22,21 @@
         </a-button>
       </template>
       <template #status="{ record }">
-        <Switch
-          :checked="record.status === 1"
-          :loading="record.pendingStatus"
-          checkedChildren="启用"
-          unCheckedChildren="禁用"
-          @change="(checked:boolean)=>statusChange(checked,record)"
-        />
+        <Authority value="api:yt:template:status">
+          <Switch
+            :checked="record.status === 1"
+            :loading="record.pendingStatus"
+            checkedChildren="启用"
+            unCheckedChildren="禁用"
+            @change="(checked:boolean)=>statusChange(checked,record)"
+          />
+        </Authority>
+        <Tag
+          v-if="!hasPermission('api:yt:template:status')"
+          :color="record.status ? 'green' : 'red'"
+        >
+          {{ record.status ? '启用' : '禁用' }}
+        </Tag>
       </template>
       <template #action="{ record }">
         <TableAction
@@ -80,9 +88,10 @@
   import SendEmail from '/@/views/message/template/SendEmail.vue';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
-  import { Switch, Popconfirm } from 'ant-design-vue';
+  import { Switch, Popconfirm, Tag } from 'ant-design-vue';
   import { setMessageTemplateStatus } from '/@/api/message/template';
   import { Authority } from '/@/components/Authority';
+  import { usePermission } from '/@/hooks/web/usePermission';
 
   export default defineComponent({
     name: 'MessageTemplateManagement',
@@ -95,8 +104,10 @@
       Switch,
       Authority,
       Popconfirm,
+      Tag,
     },
     setup() {
+      const { hasPermission } = usePermission();
       const [registerModal, { openModal: openModal }] = useModal();
       const [registerMailModal, { openModal: openMailModal }] = useModal();
       const go = useGo();
@@ -218,6 +229,7 @@
         handleDeleteOrBatchDelete,
         statusChange,
         hasBatchDelete,
+        hasPermission,
       };
     },
   });

@@ -135,10 +135,14 @@
       <Tabs.TabPane tab="详情" key="detail">
         <Space>
           <!-- <Button type="primary" @click="openDetailPage">打开详情页</Button> -->
-          <Button type="primary" @click="downloadPackage" :disabled="!!otaRecord.url">
-            下载包
-          </Button>
-          <Button type="primary" @click="deletePackage" danger>删除包</Button>
+          <Authority :value="OtaPermissionKey.DOWNLOAD">
+            <Button type="primary" @click="downloadPackage" :disabled="!!otaRecord.url">
+              下载包
+            </Button>
+          </Authority>
+          <Authority :value="OtaPermissionKey.DELETE">
+            <Button type="primary" @click="deletePackage" danger>删除包</Button>
+          </Authority>
         </Space>
         <div class="mt-3">
           <Space>

@@ -9,6 +9,7 @@ export enum PermissionReportConfigEnum {
   PERMISSION_GET = 'api:yt:report:get',
   PERMISSION_DELETE = 'api:yt:report_form:config:delete',
   PERMISSION_UPDATE = 'api:yt:report_form:config:update',
+  PERMISSION_STATUS = 'api:yt:report_form:config:status',
 }
 
 //业务文字描述配置枚举

@@ -74,14 +74,22 @@
         />
       </template>
       <template #configStatus="{ record }">
-        <Switch
-          :disabled="disabledSwitch"
-          :checked="record.status === 1"
-          :loading="record.pendingStatus"
-          :checkedChildren="BusinessReportConfigTextEnum.BUSINESS_ENABLE_TEXT"
-          :unCheckedChildren="BusinessReportConfigTextEnum.BUSINESS_DISABLE_TEXT"
-          @change="(checked: boolean) => statusChange(checked, record)"
-        />
+        <Authority :value="PermissionReportConfigEnum.PERMISSION_STATUS">
+          <Switch
+            :disabled="disabledSwitch"
+            :checked="record.status === 1"
+            :loading="record.pendingStatus"
+            :checkedChildren="BusinessReportConfigTextEnum.BUSINESS_ENABLE_TEXT"
+            :unCheckedChildren="BusinessReportConfigTextEnum.BUSINESS_DISABLE_TEXT"
+            @change="(checked: boolean) => statusChange(checked, record)"
+          />
+        </Authority>
+        <Tag
+          v-if="!hasPermission(PermissionReportConfigEnum.PERMISSION_STATUS)"
+          :color="record.status ? 'green' : 'red'"
+        >
+          {{ record.status ? '启用' : '禁用' }}
+        </Tag>
       </template>
     </BasicTable>
     <ReportConfigDrawer @register="registerDrawer" @success="handleSuccess" />
@@ -101,7 +109,7 @@
   import { defaultTableAttribtes } from './config';
   import { Authority } from '/@/components/Authority';
   import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
-  import { Popconfirm, Switch } from 'ant-design-vue';
+  import { Popconfirm, Switch, Tag } from 'ant-design-vue';
   import { useModal } from '/@/components/Modal';
   import { useGo } from '/@/hooks/web/usePage';
   import { useMessage } from '/@/hooks/web/useMessage';
@@ -111,6 +119,9 @@
     BusinessReportConfigTextEnum,
     BusinessReportConfigStatusEnum,
   } from './enum';
+  import { usePermission } from '/@/hooks/web/usePermission';
+
+  const { hasPermission } = usePermission();
 
   const disabledSwitch = ref(false);
 

@@ -192,8 +192,8 @@
             },
             toolbox: {},
             grid: {
-              left: '8%',
-              right: '8%',
+              left: '14%',
+              right: '20%',
               bottom: 80,
               containLabel: true,
             },

@@ -8,6 +8,7 @@ export enum PermissionDataFlowEnum {
   PERMISSION_GET = 'api:yt:convert:config:get',
   PERMISSION_DELETE = 'api:yt:convert:config:delete',
   PERMISSION_UPDATE = 'api:yt:convert:config:update',
+  PERMISSION_STATUS = 'api:yt:convert:config:status',
 }
 
 //业务文字描述配置枚举

@@ -79,13 +79,21 @@
         />
       </template>
       <template #status="{ record }">
-        <Switch
-          :checked="record.status === 1"
-          :loading="record.pendingStatus"
-          checkedChildren="启用"
-          unCheckedChildren="禁用"
-          @change="(checked:boolean)=>hanldeSwitch(checked,record)"
-        />
+        <Authority :value="PermissionDataFlowEnum.PERMISSION_STATUS">
+          <Switch
+            :checked="record.status === 1"
+            :loading="record.pendingStatus"
+            checkedChildren="启用"
+            unCheckedChildren="禁用"
+            @change="(checked:boolean)=>hanldeSwitch(checked,record)"
+          />
+        </Authority>
+        <Tag
+          v-if="!hasPermission(PermissionDataFlowEnum.PERMISSION_STATUS)"
+          :color="record.status ? 'green' : 'red'"
+        >
+          {{ record.status ? '启用' : '禁用' }}
+        </Tag>
       </template>
     </BasicTable>
     <DataFlowModal @register="registerModal" @success="handleSuccess" />
@@ -103,15 +111,18 @@
   import { useMessage } from '/@/hooks/web/useMessage';
   import { Authority } from '/@/components/Authority';
   import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
-  import { Switch, Popconfirm } from 'ant-design-vue';
+  import { Switch, Popconfirm, Tag } from 'ant-design-vue';
   import { PermissionDataFlowEnum, BusinessDataFlowTextEnum } from './enum';
   import { DataFlowModal } from './components/dataflowmodal';
   import { defaultTableAttribute } from './config';
+  import { usePermission } from '/@/hooks/web/usePermission';
 
   const { createMessage } = useMessage();
 
   const loading = ref(true);
 
+  const { hasPermission } = usePermission();
+
   const handleSuccess = () => {
     reload();
   };

@@ -31,6 +31,7 @@ export type TOption = {
 export enum CommandTypeEnum {
   CUSTOM = 0,
   SERVICE = 1,
+  ATTRIBUTE = 2,
 }
 
 /**

@@ -164,26 +164,26 @@ export const genActionData = (actionData) => {
 };
 
 export const operationNumber_OR_TIME = [
-  { label: '等于', value: Number_Operation.EQUAL },
-  { label: '不等于', value: Number_Operation.NOT_EQUAL },
-  { label: '小于', value: Number_Operation.LESS },
-  { label: '小于等于', value: Number_Operation.LESS_OR_EQUAL },
-  { label: '大于', value: Number_Operation.GREATER },
-  { label: '大于等于', value: Number_Operation.GREATER_OR_EQUAL },
+  { label: '等于', value: Number_Operation.EQUAL, symbol: '=' },
+  { label: '不等于', value: Number_Operation.NOT_EQUAL, symbol: '!=' },
+  { label: '小于', value: Number_Operation.LESS, symbol: '<' },
+  { label: '小于等于', value: Number_Operation.LESS_OR_EQUAL, symbol: '<=' },
+  { label: '大于', value: Number_Operation.GREATER, symbol: '>' },
+  { label: '大于等于', value: Number_Operation.GREATER_OR_EQUAL, symbol: '>=' },
 ];
 
 export const operationString = [
-  { label: '等于', value: String_Operation.EQUAL },
-  { label: '不等于', value: String_Operation.NOT_EQUAL },
-  { label: '开始于', value: String_Operation.BEGAN_IN },
-  { label: '结束于', value: String_Operation.END_IN },
-  { label: '包含', value: String_Operation.INCLUDE },
-  { label: '不包含', value: String_Operation.NOT_INCLUDE },
+  { label: '等于', value: String_Operation.EQUAL, symbol: '=' },
+  { label: '不等于', value: String_Operation.NOT_EQUAL, symbol: '!=' },
+  { label: '开始于', value: String_Operation.BEGAN_IN, symbol: '开始于' },
+  { label: '结束于', value: String_Operation.END_IN, symbol: '结束于' },
+  { label: '包含', value: String_Operation.INCLUDE, symbol: '包含' },
+  { label: '不包含', value: String_Operation.NOT_INCLUDE, symbol: '不包含' },
 ];
 
 export const operationBoolean = [
-  { label: '等于', value: Boolean_Operation.EQUAL },
-  { label: '不等于', value: Boolean_Operation.NOT_EQUAL },
+  { label: '等于', value: Boolean_Operation.EQUAL, symbol: '=' },
+  { label: '不等于', value: Boolean_Operation.NOT_EQUAL, symbol: '!=' },
 ];
 
 export const scheduleOptions = [

@@ -50,13 +50,21 @@
       </template>
 
       <template #status="{ record }">
-        <Switch
-          :checked="record.status === 1"
-          :loading="record.pendingStatus"
-          checkedChildren="启用"
-          unCheckedChildren="禁用"
-          @change="(checked:boolean)=>statusChange(checked,record)"
-        />
+        <Authority value="api:yt:sceneLinkage:status">
+          <Switch
+            :checked="record.status === 1"
+            :loading="record.pendingStatus"
+            checkedChildren="启用"
+            unCheckedChildren="禁用"
+            @change="(checked:boolean)=>statusChange(checked,record)"
+          />
+        </Authority>
+        <Tag
+          v-if="!hasPermission('api:yt:sceneLinkage:status')"
+          :color="record.status ? 'green' : 'red'"
+        >
+          {{ record.status ? '启用' : '禁用' }}
+        </Tag>
       </template>
     </BasicTable>
     <SceneLinkAgeDrawer @register="registerDrawer" @success="handleSuccess" />
@@ -72,16 +80,18 @@
     screenLinkPagePutApi,
   } from '/@/api/ruleengine/ruleengineApi';
   import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
-  import { Switch, Popconfirm } from 'ant-design-vue';
+  import { Switch, Popconfirm, Tag } from 'ant-design-vue';
   import { columns, searchFormSchema } from './config/config.data';
   import { USER_INFO_KEY } from '/@/enums/cacheEnum';
   import { getAuthCache } from '/@/utils/auth';
   import SceneLinkAgeDrawer from './SceneLinkAgeDrawer.vue';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { Authority } from '/@/components/Authority';
+  import { usePermission } from '/@/hooks/web/usePermission';
 
   const userInfo: any = getAuthCache(USER_INFO_KEY);
   const userId = userInfo.userId;
+  const { hasPermission } = usePermission();
 
   const [registerDrawer, { openDrawer }] = useDrawer();
   const [registerTable, { reload, setProps, setSelectedRowKeys }] = useTable({

@@ -17,13 +17,21 @@
         </Authority>
       </template>
       <template #status="{ record }">
-        <Switch
-          :checked="record.status === 1"
-          :loading="record.pendingStatus"
-          checkedChildren="启用"
-          unCheckedChildren="禁用"
-          @change="(checked:boolean)=>statusChange(checked,record)"
-        />
+        <Authority value="api:yt:convert:js:status">
+          <Switch
+            :checked="record.status === 1"
+            :loading="record.pendingStatus"
+            checkedChildren="启用"
+            unCheckedChildren="禁用"
+            @change="(checked:boolean)=>statusChange(checked,record)"
+          />
+        </Authority>
+        <Tag
+          v-if="!hasPermission('api:yt:convert:js:status')"
+          :color="record.status ? 'green' : 'red'"
+        >
+          {{ record.status ? '启用' : '禁用' }}
+        </Tag>
       </template>
       <template #action="{ record }">
         <TableAction
@@ -69,7 +77,7 @@
 
 <script lang="ts" setup>
   import { ref, nextTick } from 'vue';
-  import { Switch, Popconfirm } from 'ant-design-vue';
+  import { Switch, Popconfirm, Tag } from 'ant-design-vue';
   import { BasicTable, useTable, TableAction } from '/@/components/Table';
   import { columns } from '../config/config.data';
   import { getConvertApi, deleteTransformApi } from '/@/api/device/TransformScriptApi';
@@ -81,11 +89,14 @@
   import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
   import { Authority } from '/@/components/Authority';
   import { computed, unref } from 'vue';
+  import { usePermission } from '/@/hooks/web/usePermission';
 
   const props = defineProps<{ searchInfo: Recordable }>();
 
   const getSearchInfo = computed(() => props.searchInfo);
 
+  const { hasPermission } = usePermission();
+
   const handleSuccess = () => {
     reload();
   };

@@ -16,8 +16,8 @@
         <div class="hidden min-h-full pl-4 mr-4 xl:flex xl:flex-col xl:w-6/12">
           <!-- <AppLogo class="-enter-x" /> -->
           <div style="display: flex; margin-top: 10px">
-            <img v-if="defaultLogo" :src="defaultLogo" style="width: 48px; height: 48px" />
-            <img style="width: 48px; height: 48px" v-else src="/src/assets/images/logo.png" />
+            <img v-if="defaultLogo" :src="defaultLogo" class="h-12" />
+            <img class="h-12" v-else src="/src/assets/images/logo.png" />
             <div
               class="ml-2 truncate md:opacity-100"
               style="

@@ -24,8 +24,9 @@
                   :customRequest="customUploadIconPic"
                   :before-upload="beforeUploadIconPic"
                 >
-                  <div v-if="iconPic">
+                  <div v-if="iconPic" class="relative">
                     <img :src="iconPic" class="m-auto fill-img" />
+                    <CloseCircleOutlined class="absolute icon-delete" @click.stop="handleDelete" />
                     <div style="background-color: #ccc; margin-top: 20px">重新上传</div>
                   </div>
                   <div v-else>
@@ -81,7 +82,7 @@
   import { useMessage } from '/@/hooks/web/useMessage';
   import type { FileItem } from '/@/components/Upload/src/typing';
   import { iconUpload, getPlatForm, updatePlatForm, resetPlateInfo } from '/@/api/oem/index';
-  import { PlusOutlined } from '@ant-design/icons-vue';
+  import { PlusOutlined, CloseCircleOutlined } from '@ant-design/icons-vue';
   import { useUserStore } from '/@/store/modules/user';
   import { createLocalStorage } from '/@/utils/cache/index';
   import { Authority } from '/@/components/Authority';
@@ -100,6 +101,7 @@
       ContentUploadText,
       Spin,
       CustomUploadComp,
+      CloseCircleOutlined,
     },
     setup() {
       const loading = ref(false);
@@ -188,6 +190,11 @@
         storage.set('platformInfo', newFieldValue);
       }
 
+      // 删除浏览器ico图标
+      const handleDelete = () => {
+        iconPic.value = '';
+      };
+
       onMounted(async () => {
         const res = await getPlatForm();
         setFieldsValue(res);
@@ -227,6 +234,7 @@
         handleResetInfo,
         handleSetBgImgUrl,
         handleSetLogoImgUrl,
+        handleDelete,
       };
     },
   });
@@ -251,4 +259,12 @@
     width: 100%;
     height: 100%;
   }
+
+  .icon-delete {
+    top: -13px;
+    right: -13px;
+    color: rgb(146, 145, 145);
+    font-size: 1rem;
+    z-index: 9999;
+  }
 </style>

 <script setup name="CustomUploadComp" lang="ts">
-  import { PlusOutlined } from '@ant-design/icons-vue';
+  import { PlusOutlined, CloseCircleOutlined } from '@ant-design/icons-vue';
   import { Upload, Spin } from 'ant-design-vue';
   import { ref, watchEffect } from 'vue';
   import { useUpload } from './hooks/useUploadFile.hook';
@@ -40,6 +40,12 @@
     }
   };
 
+  // 删除图片
+  const handleDelete = () => {
+    uploadImgUrl.value = '';
+    emit('setImg', uploadImgUrl.value);
+  };
+
   watchEffect(() => {
     init();
   });
@@ -59,7 +65,10 @@
       :customRequest="customUpload"
       :before-upload="beforeUploadVerify"
     >
-      <img v-if="uploadImgUrl" class="fill-img" :src="uploadImgUrl" alt="avatar" />
+      <div v-if="uploadImgUrl" class="w-full h-full modal-div relative">
+        <img class="fill-img" :src="uploadImgUrl" alt="avatar" />
+        <CloseCircleOutlined class="absolute icon-delete" @click.stop="handleDelete" />
+      </div>
       <div v-else>
         <Spin v-if="uploadLoading" tip="正在上传中..." />
         <PlusOutlined v-else />
@@ -74,4 +83,12 @@
     width: 100%;
     height: 100%;
   }
+
+  .icon-delete {
+    top: -13px;
+    right: -13px;
+    color: rgb(146, 145, 145);
+    font-size: 1rem;
+    z-index: 9999;
+  }
 </style>

@@ -21,13 +21,18 @@
         </Authority>
       </template>
       <template #status="{ record }">
-        <Switch
-          :checked="record.status === 1"
-          :loading="record.pendingStatus"
-          checkedChildren="启用"
-          unCheckedChildren="禁用"
-          @change="(checked:boolean)=>statusChange(checked,record)"
-        />
+        <Authority value="api:yt:role:status">
+          <Switch
+            :checked="record.status === 1"
+            :loading="record.pendingStatus"
+            checkedChildren="启用"
+            unCheckedChildren="禁用"
+            @change="(checked:boolean)=>statusChange(checked,record)"
+          />
+        </Authority>
+        <Tag v-if="!hasPermission('api:yt:role:status')" :color="record.status ? 'green' : 'red'">
+          {{ record.status ? '启用' : '禁用' }}
+        </Tag>
       </template>
       <template #action="{ record }">
         <TableAction
@@ -67,12 +72,14 @@
   import { Authority } from '/@/components/Authority';
   import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
   import { useMessage } from '/@/hooks/web/useMessage';
-  import { Switch, Popconfirm } from 'ant-design-vue';
+  import { Switch, Popconfirm, Tag } from 'ant-design-vue';
+  import { usePermission } from '/@/hooks/web/usePermission';
 
   export default defineComponent({
     name: 'RoleManagement',
-    components: { BasicTable, RoleDrawer, TableAction, Authority, Switch, Popconfirm },
+    components: { BasicTable, RoleDrawer, TableAction, Authority, Switch, Popconfirm, Tag },
     setup() {
+      const { hasPermission } = usePermission();
       const [registerDrawer, { openDrawer }] = useDrawer();
       function handleSuccess() {
         reload();
@@ -157,6 +164,7 @@
         hasBatchDelete,
         handleDeleteOrBatchDelete,
         statusChange,
+        hasPermission,
       };
     },
   });

@@ -7,7 +7,7 @@ export const validateDevicePicker = () => {
     validateTrigger: 'blur',
     validator(_rule: Recordable, value: Recordable, _callback: Fn) {
       const device = Reflect.get(value || {}, FormFieldsEnum.DEVICE);
-      if (!device) return Promise.reject('请选择设备');
+      if (!device || !device.length) return Promise.reject('请选择设备');
       return Promise.resolve();
     },
   } as Rule;

@@ -41,7 +41,9 @@
   const inputType = ref(props.type);
 
   const getInputValue = computed(() => {
-    const { type, value, toUpperCase } = props;
+    const { type, toUpperCase } = props;
+    let { value } = props;
+    if (isNaN(value as number)) value = undefined;
 
     if (isNullOrUnDef(value)) return value;
 

@@ -133,6 +133,7 @@
             text: '详情',
             event: DropMenuEvent.DETAIL,
             icon: 'ant-design:eye-outlined',
+            auth: PermissionEnum.DETAIL,
             onClick: emit.bind(null, 'detail', getRecord),
           },
           {

@@ -7,6 +7,7 @@ export enum PermissionEnum {
   DELETE = 'api:yt:task_center:delete',
   ALLOW = 'api:yt:task_center:cancel:allow',
   EXECUTE = 'api:yt:task_center:immediate:execute',
+  DETAIL = 'api:yt:task_center:get',
 }
 
 export enum FormFieldsEnum {

@@ -16,6 +16,7 @@
             :replaceFields="{ title: 'name', key: 'id' }"
             :checkedKeys="roleMenus"
             @check="handleCheckClick"
+            @unSelectAll="handleUnSelectAll"
             checkable
             toolbar
             ref="treeRef"
@@ -128,6 +129,11 @@
       });
       const getTitle = computed(() => (!unref(isUpdate) ? '新增角色' : '编辑角色'));
 
+      // 取消全部的时候清除回显时获取的
+      const handleUnSelectAll = () => {
+        checkedKeysWithHalfChecked.value = [];
+      };
+
       async function handleSubmit() {
         setDrawerProps({ loading: true, confirmLoading: true });
         const { createMessage } = useMessage();
@@ -143,7 +149,8 @@
             roleType: RoleEnum.TENANT_ADMIN,
             menu,
           };
-          if (req.menu == undefined) return createMessage.error('请勾选权限菜单');
+          if (req.menu == undefined || !req.menu.length)
+            return createMessage.error('请勾选权限菜单');
           const res = await saveOrUpdateRoleInfoWithMenu(req);
           if (res) {
             closeDrawer();
@@ -247,6 +254,7 @@
         roleMenus,
         treeRef,
         handleCheckClick,
+        handleUnSelectAll,
       };
     },
   });

@@ -9,6 +9,7 @@ export enum VisualBoardPermission {
   UPDATE = 'api:yt:data_board:update:update',
   DELETE = 'api:yt:data_board:delete',
   CREATE = '',
+  SHARE = 'api:yt:data_board:share',
   DETAIL = 'api:yt:data_component:list',
 }
 

@@ -99,19 +99,22 @@
   const dropMenuList = computed<DropMenu[]>(() => {
     const hasUpdatePermission = hasPermission(VisualBoardPermission.UPDATE);
     const hasDeletePermission = hasPermission(VisualBoardPermission.DELETE);
-    const basicMenu: DropMenu[] = [
-      {
-        text: '分享',
-        event: MoreActionEvent.SHARE,
-        icon: 'ant-design:share-alt-outlined',
-      },
-    ];
+    const hasSharePermission = hasPermission(VisualBoardPermission.SHARE);
+    let basicMenu: DropMenu[] = [];
     if (hasUpdatePermission)
       basicMenu.push({
         text: '编辑',
         event: MoreActionEvent.EDIT,
         icon: 'ant-design:edit-outlined',
       });
+    if (hasSharePermission) {
+      basicMenu.push({
+        text: '分享',
+        event: MoreActionEvent.SHARE,
+        icon: 'ant-design:share-alt-outlined',
+      });
+    }
+
     if (hasDeletePermission)
       basicMenu.push({
         text: '删除',

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

@@ -95,6 +95,11 @@
         };
         setFormValues(record);
       } else {
+        selectWidgetKeys.value = {
+          componentKey: TextComponent1Config.key,
+          categoryKey: PackagesCategoryEnum.TEXT,
+        };
+        activeKey.value = TabKeyEnum.BASIC;
         dataSource.value = [genNewDataSourceItem()];
       }
     }

@@ -16,6 +16,7 @@ export const option: PublicPresetOptions = {
   [ComponentConfigFieldEnum.CLOSE_COLOR]: '#FF0000',
   [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: true,
   [ComponentConfigFieldEnum.SHOW_TIME]: false,
+  [ComponentConfigFieldEnum.FONT_SIZE]: 14,
 };
 
 export default class Config extends PublicConfigClass implements CreateComponentType {

@@ -36,6 +36,23 @@
         component: 'Checkbox',
         defaultValue: option.showTime,
       },
+      {
+        field: ComponentConfigFieldEnum.FONT_SIZE,
+        label: '文本字体大小',
+        component: 'InputNumber',
+        defaultValue: 14,
+        componentProps: {
+          min: 0,
+          formatter: (e) => {
+            const value = e.replace(/^0/g, '');
+            if (value) {
+              return value.replace(/^0/g, '');
+            } else {
+              return 0;
+            }
+          },
+        },
+      },
     ],
     showActionButtonGroup: false,
     labelWidth: 120,

@@ -24,6 +24,7 @@
     showTime: boolean;
     status: IStatus;
     time: number;
+    fontSize?: number;
   }
 
   const props = defineProps<{
@@ -53,7 +54,11 @@
   const getDesign = computed(() => {
     const { persetOption = {}, option } = props.config;
     const { dataSource } = option;
-    const { showDeviceName: presetShowDeviceName, showTime: persetShowTime } = persetOption;
+    const {
+      showDeviceName: presetShowDeviceName,
+      showTime: persetShowTime,
+      fontSize: persetFontSize,
+    } = persetOption;
 
     return {
       dataSource: dataSource?.map((item) => {
@@ -63,6 +68,7 @@
           deviceName: deviceRename || deviceName,
           showDeviceName: componentInfo.showDeviceName ?? presetShowDeviceName,
           showTime: componentInfo.showTime ?? persetShowTime,
+          fontSize: componentInfo.fontSize || persetFontSize,
         };
       }),
     };
@@ -82,6 +88,7 @@
       time: 1689574726,
       showDeviceName: true,
       showTime: true,
+      fontSize: 14,
     },
   ]);
 
@@ -133,6 +140,7 @@
         showTime: item.showTime,
         status: { text: '', color: '' },
         time: 0,
+        fontSize: item.fontSize,
       };
     }) as any;
     const { data, update } = message;
@@ -163,7 +171,7 @@
   <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"
+        <div class="text-gray-500 truncate" :style="{ fontSize: item.fontSize + 'px' }"
           >{{
             item.status.text
               ? item.showDeviceName

@@ -11,6 +11,7 @@ import { ComponentConfigFieldEnum } from '../../../enum';
 
 export const option: PublicPresetOptions = {
   [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
+  [ComponentConfigFieldEnum.FONT_SIZE]: 14,
   // [ComponentConfigFieldEnum.FONT_COLOR]: '#000',
 };
 

@@ -19,6 +19,12 @@
         component: 'Checkbox',
         defaultValue: option.showDeviceName,
       },
+      {
+        field: ComponentConfigFieldEnum.FONT_SIZE,
+        label: '文本字体大小',
+        component: 'InputNumber',
+        defaultValue: 14,
+      },
     ],
     showActionButtonGroup: false,
     labelWidth: 120,

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

@@ -2,12 +2,13 @@
   import { ComponentPropsConfigType } from '/@/views/visual/packages/index.type';
   import { option } from './config';
   import { Spin } from 'ant-design-vue';
-  import { computed, ref } from 'vue';
+  import { computed, ref, unref } from 'vue';
   import { useComponentScale } from '../../../hook/useComponentScale';
   import { useSendCommand } from '../../../hook/useSendCommand';
   import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
   import { DataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
   import { useDataFetch } from '../../../hook/socket/useSocket';
+  import { getSendValues } from '../config';
 
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;
@@ -18,10 +19,28 @@
   const currentValue = ref(false);
 
   const getDesign = computed(() => {
-    const { option } = props.config;
-    const { attribute, attributeRename, attributeName } = option;
+    const { option, persetOption } = props.config;
+    const {
+      attribute,
+      attributeRename,
+      attributeName,
+      componentInfo,
+      commandType,
+      extensionDesc,
+      codeType,
+      deviceCode,
+      customCommand,
+    } = option;
+    const { fontSize: persetFontSize } = persetOption || {};
+    const { fontSize } = componentInfo || {};
     return {
       attribute: attributeRename || attributeName || attribute,
+      fontSize: fontSize || persetFontSize || 14,
+      extensionDesc: extensionDesc ? JSON.parse(extensionDesc) : {},
+      commandType,
+      codeType,
+      deviceCode,
+      customCommand,
     };
   });
 
@@ -29,8 +48,12 @@
   const handleChange = async (event: Event) => {
     const target = event.target as HTMLInputElement;
     const value = target.checked;
+    const { option } = props.config || {};
 
-    const flag = await sendCommand(props.config.option, value);
+    const { values, isModbusCommand, sendValue } =
+      (await getSendValues(option, unref(getDesign), value)) || {};
+
+    const flag = await sendCommand(values, isModbusCommand ? sendValue : value, isModbusCommand);
     if (flag) currentValue.value = value;
     flag ? (currentValue.value = value) : (target.checked = !value);
   };
@@ -61,7 +84,10 @@
           <span class="on">ON</span>
           <span class="off">OFF</span>
         </label>
-        <div class="text-center mt-2 text-gray-700" :style="getScale">
+        <div
+          class="text-center mt-2 text-gray-700"
+          :style="{ ...getScale, fontSize: getDesign.fontSize + 'px' }"
+        >
           {{ getDesign.attribute || '属性' }}
         </div>
       </Spin>

@@ -13,6 +13,7 @@ export const option: PublicPresetOptions = {
   [ComponentConfigFieldEnum.ICON]: 'shuiwen',
   [ComponentConfigFieldEnum.ICON_COLOR]: '#377DFF',
   [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
+  [ComponentConfigFieldEnum.FONT_SIZE]: 14,
 };
 
 export default class Config extends PublicConfigClass implements CreateComponentType {

@@ -32,6 +32,12 @@
         component: 'Checkbox',
         defaultValue: option.showDeviceName,
       },
+      {
+        field: ComponentConfigFieldEnum.FONT_SIZE,
+        label: '文本字体大小',
+        component: 'InputNumber',
+        defaultValue: option.fontSize,
+      },
     ],
     showActionButtonGroup: false,
     labelWidth: 120,

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

@@ -10,6 +10,7 @@
   import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
   import { DataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
   import { useDataFetch } from '../../../hook/socket/useSocket';
+  import { getSendValues } from '../config';
 
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;
@@ -19,19 +20,50 @@
 
   const getDesign = computed(() => {
     const { option, persetOption } = props.config;
-    const { componentInfo, attribute, attributeRename, attributeName } = option;
-    const { icon: presetIcon, iconColor: presetIconColor } = persetOption || {};
-    const { icon, iconColor } = componentInfo || {};
+    const {
+      componentInfo,
+      attribute,
+      attributeRename,
+      attributeName,
+      commandType,
+      extensionDesc,
+      codeType,
+      deviceCode,
+      customCommand,
+    } = option;
+    const {
+      icon: presetIcon,
+      iconColor: presetIconColor,
+      fontSize: persetFontSize,
+    } = persetOption || {};
+    const { icon, iconColor, fontSize } = componentInfo || {};
+
     return {
       icon: icon ?? presetIcon,
       iconColor: iconColor || presetIconColor,
       attribute: attributeRename || attributeName || attribute,
+      extensionDesc: extensionDesc ? JSON.parse(extensionDesc) : {},
+      fontSize: fontSize || persetFontSize || 14,
+      commandType,
+      codeType,
+      deviceCode,
+      customCommand,
     };
   });
 
   const { sendCommand, loading } = useSendCommand();
+
   const handleChange = async () => {
-    const flag = await sendCommand(props.config.option, unref(checked));
+    const { option } = props.config || {};
+
+    const { values, isModbusCommand, sendValue } =
+      (await getSendValues(option, unref(getDesign), unref(checked))) || {};
+
+    const flag = await sendCommand(
+      values,
+      isModbusCommand ? sendValue : unref(checked),
+      isModbusCommand
+    );
     if (!flag) checked.value = !unref(checked);
   };
 
@@ -57,7 +89,10 @@
           :style="{ color: getDesign.iconColor }"
           :size="50"
         />
-        <span class="mt-3 truncate text-gray-500 text-xs text-center">
+        <span
+          class="mt-3 truncate text-gray-500 text-center"
+          :style="{ fontSize: getDesign.fontSize + 'px' }"
+        >
           {{ getDesign.attribute || '属性' }}
         </span>
       </div>

@@ -11,6 +11,7 @@ import { ComponentConfigFieldEnum } from '../../../enum';
 
 export const option: PublicPresetOptions = {
   [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
+  [ComponentConfigFieldEnum.FONT_SIZE]: 14,
   // [ComponentConfigFieldEnum.FONT_COLOR]: '#000',
 };
 

@@ -18,6 +18,12 @@
         component: 'Checkbox',
         defaultValue: option.showDeviceName,
       },
+      {
+        field: ComponentConfigFieldEnum.FONT_SIZE,
+        label: '文本字体大小',
+        component: 'InputNumber',
+        defaultValue: option.fontSize,
+      },
     ],
     showActionButtonGroup: false,
     labelWidth: 120,

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

@@ -2,12 +2,13 @@
   import { ComponentPropsConfigType } from '/@/views/visual/packages/index.type';
   import { option } from './config';
   import { Spin } from 'ant-design-vue';
-  import { computed, ref } from 'vue';
+  import { computed, ref, unref } from 'vue';
   import { useComponentScale } from '../../../hook/useComponentScale';
   import { useSendCommand } from '../../../hook/useSendCommand';
   import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
   import { DataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
   import { useDataFetch } from '../../../hook/socket/useSocket';
+  import { getSendValues } from '../config';
 
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;
@@ -18,10 +19,28 @@
   const currentValue = ref(false);
 
   const getDesign = computed(() => {
-    const { option } = props.config;
-    const { attribute, attributeRename, attributeName } = option;
+    const { option, persetOption } = props.config;
+    const {
+      attribute,
+      attributeRename,
+      attributeName,
+      commandType,
+      extensionDesc,
+      codeType,
+      deviceCode,
+      customCommand,
+      componentInfo,
+    } = option;
+    const { fontSize: persetFontSize } = persetOption || {};
+    const { fontSize } = componentInfo || {};
     return {
       attribute: attributeRename || attributeName || attribute,
+      extensionDesc: extensionDesc ? JSON.parse(extensionDesc) : {},
+      commandType,
+      codeType,
+      deviceCode,
+      customCommand,
+      fontSize: fontSize || persetFontSize || 14,
     };
   });
 
@@ -29,7 +48,12 @@
   const handleChange = async (event: Event) => {
     const target = event.target as HTMLInputElement;
     const value = target.checked;
-    const flag = await sendCommand(props.config.option, value);
+    const { option } = props.config || {};
+
+    const { values, isModbusCommand, sendValue } =
+      (await getSendValues(option, unref(getDesign), value)) || {};
+
+    const flag = await sendCommand(values, isModbusCommand ? sendValue : value, isModbusCommand);
     flag ? (currentValue.value = value) : (target.checked = !value);
   };
 
@@ -60,9 +84,11 @@
             </div>
           </label>
         </div>
-        <div class="text-center mt-2 text-gray-500" :style="getScale">{{
-          getDesign.attribute || '属性'
-        }}</div>
+        <div
+          class="text-center mt-2 text-gray-500"
+          :style="{ ...getScale, fontSize: getDesign.fontSize + 'px' }"
+          >{{ getDesign.attribute || '属性' }}</div
+        >
       </Spin>
     </main>
   </main>

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

@@ -8,20 +8,39 @@
   const [register, { getFieldsValue, setFieldsValue, resetFields }] = useForm({
     schemas: [
       {
-        field: ComponentConfigFieldEnum.CONTROL_BAR_COLOR,
-        label: '控制栏背景色',
+        field: ComponentConfigFieldEnum.FONT_COLOR,
+        label: '数值字体颜色',
         component: 'ColorPicker',
         changeEvent: 'update:value',
-        defaultValue: option.controlBarColor,
+        defaultValue: option.fontColor,
       },
       {
-        field: ComponentConfigFieldEnum.FONT_COLOR,
-        label: '数值字体颜色',
+        field: ComponentConfigFieldEnum.VALUE_SIZE,
+        label: '数值字体大小',
+        component: 'InputNumber',
+        defaultValue: option.fontSize,
+      },
+      {
+        field: ComponentConfigFieldEnum.TEXT_COLOR,
+        label: '文本字体颜色',
         component: 'ColorPicker',
         changeEvent: 'update:value',
         defaultValue: option.fontColor,
       },
       {
+        field: ComponentConfigFieldEnum.FONT_SIZE,
+        label: '文本字体大小',
+        component: 'InputNumber',
+        defaultValue: option.fontSize,
+      },
+      {
+        field: ComponentConfigFieldEnum.CONTROL_BAR_COLOR,
+        label: '控制栏背景色',
+        component: 'ColorPicker',
+        changeEvent: 'update:value',
+        defaultValue: option.controlBarColor,
+      },
+      {
         field: ComponentConfigFieldEnum.MIN_NUMBER,
         label: '最小值',
         component: 'InputNumber',
@@ -61,6 +80,7 @@
           };
         },
       },
+
       {
         field: ComponentConfigFieldEnum.SHOW_DEVICE_NAME,
         label: '显示设备名称',

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

@@ -9,6 +9,10 @@
   import { useReceiveValue } from '../../../hook/useReceiveValue';
   import { DataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
   import { useDataFetch } from '../../../hook/socket/useSocket';
+  import { TaskTypeEnum } from '/@/views/task/center/config';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { SingleToHex } from '/@/views/device/list/cpns/tabs/ObjectModelCommandDeliveryModal/config';
+  import { genModbusCommand } from '/@/api/task';
 
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;
@@ -23,20 +27,42 @@
 
   const getDesign = computed(() => {
     const { option, persetOption } = props.config;
-    const { componentInfo, attribute, attributeRename, attributeName } = option;
+    const {
+      componentInfo,
+      attribute,
+      attributeRename,
+      attributeName,
+      commandType,
+      extensionDesc,
+      codeType,
+      deviceCode,
+      customCommand,
+    } = option;
     const {
       controlBarColor: persetControlBarColor,
       fonColor: persetFontColor,
       minNumber: persetMinNumber,
       maxNumber: persetMaxNumber,
+      textColor: persetTextColor,
+      valueSize: persetValueSize,
+      fontSize: persetFontSize,
     } = persetOption || {};
-    const { controlBarColor, fontColor, minNumber, maxNumber } = componentInfo || {};
+    const { controlBarColor, fontColor, minNumber, maxNumber, textColor, valueSize, fontSize } =
+      componentInfo || {};
     return {
       attribute: attributeRename || attributeName || attribute,
       controlBarColor: controlBarColor ?? persetControlBarColor,
       fontColor: fontColor ?? persetFontColor,
       minNumber: minNumber ?? persetMinNumber,
       maxNumber: maxNumber ?? persetMaxNumber,
+      extensionDesc: extensionDesc ? JSON.parse(extensionDesc) : {},
+      commandType,
+      codeType,
+      deviceCode,
+      customCommand,
+      textColor: textColor || persetTextColor,
+      valueSize: valueSize || persetValueSize || 20,
+      fontSize: fontSize || persetFontSize || 14,
     };
   });
 
@@ -59,9 +85,98 @@
     sliderValue.value = afterValue.value; //这一步是因为当我们是点击不是拖动时候，会让值更新不了，所以需要赋值一次
   };
 
+  const { createMessage } = useMessage();
+
+  // 获取小数
+  const getFloatPart = (number: string | number) => {
+    const isLessZero = Number(number) < 0;
+    number = number.toString();
+    const floatPartStartIndex = number.indexOf('.');
+    const value = ~floatPartStartIndex
+      ? `${isLessZero ? '-' : ''}0.${number.substring(floatPartStartIndex + 1)}`
+      : '0';
+    return Number(value);
+  };
+
+  const getArray = (values) => {
+    const str = values.replace(/\s+/g, '');
+    const array: any = [];
+
+    for (let i = 0; i < str.length; i += 4) {
+      const chunk = parseInt(str.substring(i, i + 4), 16);
+      array.push(chunk);
+    }
+    return array;
+  };
+
+  const getSendValue = async (value: number) => {
+    const { extensionDesc, codeType, deviceCode, customCommand } = unref(getDesign) || {};
+    const { transportType } = customCommand || {};
+    const { registerAddress, actionType, zoomFactor } = extensionDesc || {};
+    const newZoomValue = zoomFactor ? Number(zoomFactor) : 1;
+    if (transportType == 'TCP' && codeType == TaskTypeEnum.MODBUS_RTU) {
+      if (!deviceCode) {
+        createMessage.warning('当前设备没有设置地址码');
+        return;
+      }
+      const modbusForm = ref({
+        crc: 'CRC_16_LOWER',
+        deviceCode: deviceCode,
+        method: actionType == '16' ? '10' : actionType,
+        registerAddress,
+        registerNumber: 1,
+        registerValues: [value],
+      }) as any;
+      if (!actionType) {
+        createMessage.warning('当前物模型扩展描述没有填写');
+        return;
+      }
+      if (actionType == '06') {
+        const newValue = Math.trunc(value) * newZoomValue + getFloatPart(value) * newZoomValue;
+        if (newValue % 1 != 0) {
+          createMessage.warning(`值必须是整数,缩放因子为${unref(newZoomValue)}`);
+          return;
+        }
+
+        if (newValue > 65535) {
+          createMessage.warning(`值不能超过65535,缩放因子是${unref(newZoomValue)}`);
+          return;
+        }
+        modbusForm.value.registerValues = [newValue];
+      }
+      if (actionType == '05') {
+        if (Number(value) != 0 || Number(value) != 1) {
+          createMessage.warning(`当前物模型仅支持值为0和1`);
+          return;
+        }
+      }
+      if (actionType == '16' || actionType == '10') {
+        const regex = /^-?\d+(\.\d{0,2})?$/;
+        const values =
+          Math.trunc(value) * unref(newZoomValue) + getFloatPart(value) * unref(newZoomValue);
+        if (!regex.test(values as any)) {
+          createMessage.warning(`值精确到两位小数,缩放因子是${unref(newZoomValue)}`);
+          return;
+        }
+        const newValue = values == 0 ? [0, 0] : getArray(SingleToHex(values));
+        modbusForm.value.registerValues = newValue;
+        modbusForm.value.registerNumber = 2;
+        modbusForm.value.method = '10';
+      }
+      const sendValue = await genModbusCommand(unref(modbusForm));
+      return sendValue;
+    }
+  };
+
   const handleBlur = async () => {
     if (unref(oldSliderValue) !== unref(sliderValue)) {
-      const flag = await sendCommand(props.config.option, unref(sliderValue));
+      const { codeType, customCommand } = unref(getDesign) || {};
+      const { transportType } = customCommand || {};
+      const sendValue = ref<any>(unref(sliderValue));
+      if (transportType == 'TCP' && codeType == TaskTypeEnum.MODBUS_RTU) {
+        sendValue.value = await getSendValue(unref(sliderValue));
+      }
+      const flag = await sendCommand(props.config.option, unref(sendValue), true);
       flag
         ? ((sliderValue.value = unref(sliderValue)),
           (oldSliderValue.value = sliderValue.value),
@@ -90,7 +205,7 @@
       <Spin :spinning="loading" class="w-full h-full">
         <div class="flex flex-col" style="width: 80%">
           <span
-            :style="{ color: getDesign.fontColor }"
+            :style="{ color: getDesign.fontColor, fontSize: getDesign.valueSize + 'px' }"
             class="font-bold text-xl mt-3 truncate text-center"
             >{{ sliderValue }}</span
           >
@@ -107,7 +222,7 @@
           />
 
           <span
-            :style="{ color: getDesign.fontColor }"
+            :style="{ color: getDesign.textColor, fontSize: getDesign.fontSize + 'px' }"
             class="mt-3 truncate font-bold text-xs text-center"
           >
             {{ getDesign.attribute || '属性' }}

@@ -14,6 +14,7 @@ export const option: PublicPresetOptions = {
   [ComponentConfigFieldEnum.ICON]: 'shuiwen',
   [ComponentConfigFieldEnum.ICON_COLOR]: '#377DFF',
   [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
+  [ComponentConfigFieldEnum.FONT_SIZE]: 14,
 };
 
 export default class Config extends PublicConfigClass implements CreateComponentType {

@@ -27,6 +27,12 @@
         },
       },
       {
+        field: ComponentConfigFieldEnum.FONT_SIZE,
+        label: '文本字体大小',
+        component: 'InputNumber',
+        defaultValue: option.fontSize,
+      },
+      {
         field: ComponentConfigFieldEnum.SHOW_DEVICE_NAME,
         label: '显示设备名称',
         component: 'Checkbox',

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

@@ -5,6 +5,6 @@ const componentKeys = useComponentKeys('SwitchList');
 
 export const SwitchListConfig: ConfigType = {
   ...componentKeys,
-  title: '开关量控制列表',
+  title: '开关控制列表',
   package: PackagesCategoryEnum.CONTROL,
 };

@@ -13,6 +13,7 @@
   import { useReceiveMessage } from '../../../hook/useReceiveMessage';
   import { useReceiveValue } from '../../../hook/useReceiveValue';
   import { DataSource } from '/@/views/visual/palette/types';
+  import { getSendValues, CommandTypeEnumLIst } from '../config';
 
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;
@@ -51,12 +52,24 @@
       fontColor: persetFontColor,
       icon: persetIcon,
       iconColor: persetIconColor,
+      fontSize: persetFontSize,
     } = persetOption || {};
     return {
       dataSource: dataSource.map((item) => {
-        const { fontColor, icon, iconColor, unit, showDeviceName } = item.componentInfo;
-        const { attribute, attributeRename, attributeName, deviceId, deviceName, deviceRename } =
-          item;
+        const { fontColor, icon, iconColor, unit, showDeviceName, fontSize } = item.componentInfo;
+        const {
+          attribute,
+          attributeRename,
+          attributeName,
+          deviceId,
+          deviceName,
+          deviceRename,
+          commandType,
+          extensionDesc,
+          codeType,
+          deviceCode,
+          customCommand,
+        } = item;
         return {
           unit: unit ?? persetUnit,
           fontColor: fontColor ?? persetFontColor,
@@ -67,6 +80,12 @@
           showDeviceName,
           deviceName: deviceRename || deviceName,
           id: deviceId,
+          extensionDesc: extensionDesc ? JSON.parse(extensionDesc) : {},
+          commandType,
+          codeType,
+          deviceCode,
+          customCommand,
+          fontSize: fontSize || persetFontSize || 14,
         };
       }),
     };
@@ -76,7 +95,6 @@
   const handleChange = async (index: number, checked: Boolean) => {
     const { heightPx, itemHeightRatio, itemWidthRatio, mode, widthPx, dataSource } =
       props.config.option;
-
     const data = {
       ...dataSource?.[index],
       heightPx,
@@ -85,8 +103,10 @@
       mode,
       widthPx,
     } as DataSource;
+    const { values, isModbusCommand, sendValue } =
+      (await getSendValues(data, unref(getDesign).dataSource[index], checked)) || {};
 
-    const flag = await sendCommand(data, checked);
+    const flag = await sendCommand(values, isModbusCommand ? sendValue : checked, isModbusCommand);
     if (!flag) controlList.value[index].checked = !checked;
   };
 
@@ -128,15 +148,15 @@
         <SvgIcon
           :name="item.icon!"
           prefix="iconfont"
-          :size="getRatio ? 30 * getRatio : 30"
+          :size="getRatio ? 25 * getRatio : 25"
           :style="{ color: item.iconColor }"
         />
 
-        <div
-          class="text-gray-500 truncate ml-6"
-          :style="{ fontSize: getRatio ? '18px' : getRatio * 18 + 'px' }"
-          >{{ `${item.deviceName} - ${item.attributeName}` }}</div
-        >
+        <div class="text-gray-500 truncate ml-6" :style="{ fontSize: item.fontSize + 'px' }">{{
+          `${item.deviceName} - ${
+            item.commandType ? CommandTypeEnumLIst[item.commandType].name : item.attributeName
+          }`
+        }}</div>
       </div>
 
       <Switch

+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: '属性' },
+};

@@ -13,6 +13,8 @@ export const option: PublicPresetOptions = {
   [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
   [ComponentConfigFieldEnum.UNIT]: 'm',
   [ComponentConfigFieldEnum.MAX_NUMBER]: 100,
+  [ComponentConfigFieldEnum.VALUE_SIZE]: 20,
+  [ComponentConfigFieldEnum.FONT_SIZE]: 14,
   [ComponentConfigFieldEnum.FONT_COLOR]: '#fff',
   [ComponentConfigFieldEnum.SHOW_TIME]: false,
   [ComponentConfigFieldEnum.FLOWMETER_CONFIG]: {

@@ -10,7 +10,7 @@
     schemas: [
       {
         field: ComponentConfigFieldEnum.FONT_COLOR,
-        label: '字体颜色',
+        label: '数值字体颜色',
         component: 'ColorPicker',
         changeEvent: 'update:value',
         defaultValue: option.fontColor,
@@ -50,6 +50,40 @@
         defaultValue: option.unit,
       },
       {
+        field: ComponentConfigFieldEnum.VALUE_SIZE,
+        label: '数值字体大小',
+        component: 'InputNumber',
+        defaultValue: 14,
+        componentProps: {
+          min: 0,
+          formatter: (e) => {
+            const value = e.replace(/^0/g, '');
+            if (value) {
+              return value.replace(/^0/g, '');
+            } else {
+              return 0;
+            }
+          },
+        },
+      },
+      {
+        field: ComponentConfigFieldEnum.FONT_SIZE,
+        label: '文本字体大小',
+        component: 'InputNumber',
+        defaultValue: 14,
+        componentProps: {
+          min: 0,
+          formatter: (e) => {
+            const value = e.replace(/^0/g, '');
+            if (value) {
+              return value.replace(/^0/g, '');
+            } else {
+              return 0;
+            }
+          },
+        },
+      },
+      {
         field: ComponentConfigFieldEnum.MAX_NUMBER,
         label: '最大值',
         component: 'InputNumber',

@@ -20,7 +20,8 @@
   const getDesign = computed(() => {
     const { option, persetOption } = props.config;
     const { componentInfo, attribute, attributeName, attributeRename } = option;
-    const { flowmeterConfig, unit, fontColor, showTime, maxNumber } = componentInfo || {};
+    const { flowmeterConfig, unit, fontColor, showTime, maxNumber, valueSize, fontSize } =
+      componentInfo || {};
     const { backgroundColor, waveFirst, waveSecond, waveThird } = flowmeterConfig || {};
     const {
       flowmeterConfig: presetFlowmeterConfig,
@@ -28,6 +29,8 @@
       fontColor: presetFontColor,
       showTime: persetShowTime,
       maxNumber: persetMaxNumber,
+      valueSize: persetValueSize,
+      fontSize: persetFontSize,
     } = persetOption || {};
     const {
       backgroundColor: presetBackgroundColor,
@@ -45,6 +48,8 @@
       attribute: attributeRename || attributeName || attribute,
       showTime: showTime ?? persetShowTime,
       maxNumber: maxNumber ?? persetMaxNumber,
+      valueSize: valueSize || persetValueSize || 20,
+      fontSize: fontSize || persetFontSize || 14,
     };
   });
 
@@ -129,14 +134,17 @@
 
     <div
       class="absolute w-full h-full top-0 left-0 text-center text-lg flex items-center justify-center"
-      :style="{ color: getDesign.fontColor }"
+      :style="{ color: getDesign.fontColor, fontSize: getDesign.valueSize + 'px' }"
     >
       <div>{{ currentValue }}</div>
       <div class="ml-1">{{ getDesign.unit }}</div>
     </div>
-    <div class="text-gray-500 text-sm truncate" style="flex: 0 0 20px">{{
-      getDesign.attribute || '属性'
-    }}</div>
+    <div
+      class="text-gray-500 text-sm truncate"
+      style="flex: 0 0 20px"
+      :style="{ fontSize: getDesign.fontSize + 'px' }"
+      >{{ getDesign.attribute || '属性' }}</div
+    >
     <UpdateTime v-show="getDesign.showTime" :time="time" />
   </main>
 </template>

@@ -14,6 +14,8 @@ export const option: PublicPresetOptions = {
   [ComponentConfigFieldEnum.SHOW_TIME]: false,
   [ComponentConfigFieldEnum.UNIT]: 'm',
   [ComponentConfigFieldEnum.MAX_NUMBER]: 100,
+  [ComponentConfigFieldEnum.FONT_SIZE]: 14,
+  [ComponentConfigFieldEnum.VALUE_SIZE]: 20,
   [ComponentConfigFieldEnum.FLOWMETER_CONFIG]: {
     [ComponentConfigFieldEnum.BACKGROUND_COLOR]: '#8badcb',
     [ComponentConfigFieldEnum.WAVE_FIRST]: '#4579e2',

@@ -10,7 +10,7 @@
     schemas: [
       {
         field: ComponentConfigFieldEnum.FONT_COLOR,
-        label: '字体颜色',
+        label: '数值字体颜色',
         component: 'ColorPicker',
         changeEvent: 'update:value',
         defaultValue: option.fontColor,
@@ -56,6 +56,40 @@
       //   defaultValue: 0,
       // },
       {
+        field: ComponentConfigFieldEnum.VALUE_SIZE,
+        label: '数值字体大小',
+        component: 'InputNumber',
+        defaultValue: 14,
+        componentProps: {
+          min: 0,
+          formatter: (e) => {
+            const value = e.replace(/^0/g, '');
+            if (value) {
+              return value.replace(/^0/g, '');
+            } else {
+              return 0;
+            }
+          },
+        },
+      },
+      {
+        field: ComponentConfigFieldEnum.FONT_SIZE,
+        label: '文本字体大小',
+        component: 'InputNumber',
+        defaultValue: 14,
+        componentProps: {
+          min: 0,
+          formatter: (e) => {
+            const value = e.replace(/^0/g, '');
+            if (value) {
+              return value.replace(/^0/g, '');
+            } else {
+              return 0;
+            }
+          },
+        },
+      },
+      {
         field: ComponentConfigFieldEnum.MAX_NUMBER,
         label: '最大值',
         component: 'InputNumber',

@@ -20,7 +20,8 @@
   const getDesign = computed(() => {
     const { option, persetOption } = props.config;
     const { componentInfo, attribute, attributeName, attributeRename } = option;
-    const { flowmeterConfig, unit, fontColor, showTime, maxNumber } = componentInfo || {};
+    const { flowmeterConfig, unit, fontColor, showTime, maxNumber, fontSize, valueSize } =
+      componentInfo || {};
     const { backgroundColor, waveFirst, waveSecond, waveThird } = flowmeterConfig || {};
     const {
       flowmeterConfig: presetFlowmeterConfig,
@@ -28,6 +29,8 @@
       fontColor: presetFontColor,
       showTime: persetShowTime,
       maxNumber: persetMaxNumber,
+      fontSize: persetFontSize,
+      valueSize: persetValueSize,
     } = persetOption || {};
     const {
       backgroundColor: presetBackgroundColor,
@@ -45,6 +48,8 @@
       attribute: attributeRename || attributeName || attribute,
       showTime: showTime ?? persetShowTime,
       maxNumber: maxNumber ?? persetMaxNumber,
+      fontSize: fontSize || persetFontSize || 14,
+      valueSize: valueSize || persetValueSize || 20,
     };
   });
 
@@ -122,14 +127,17 @@
     </svg>
     <div
       class="absolute w-full h-full top-0 left-0 text-center text-lg flex items-center justify-center"
-      :style="{ color: getDesign.fontColor }"
+      :style="{ color: getDesign.fontColor, fontSize: getDesign.valueSize + 'px' }"
     >
       <div>{{ currentValue }}</div>
       <div class="ml-1">{{ getDesign.unit }}</div>
     </div>
-    <div class="text-gray-500 text-sm truncate" style="flex: 0 0 20px">{{
-      getDesign.attribute || '属性'
-    }}</div>
+    <div
+      class="text-gray-500"
+      style="flex: 0 0 20px"
+      :style="{ fontSize: getDesign.fontSize + 'px', height: getDesign.fontSize + 'px' }"
+      >{{ getDesign.attribute || '属性' }}</div
+    >
     <UpdateTime v-show="getDesign.showTime" :time="time" />
   </main>
 </template>

@@ -27,6 +27,8 @@ export const option: PublicPresetOptions = {
   [ComponentConfigFieldEnum.UNIT]: '℃',
   [ComponentConfigFieldEnum.POINTER_COLOR]: '#15E2C6',
   [ComponentConfigFieldEnum.INSTRUMENT_PANEL_COLOR]: '#61D4C5',
+  [ComponentConfigFieldEnum.FONT_SIZE]: 14,
+  [ComponentConfigFieldEnum.VALUE_SIZE]: 14,
   [ComponentConfigFieldEnum.GRADIENT_INFO]: [
     { key: Gradient.FIRST, value: 0, color: GradientColor.FIRST },
     { key: Gradient.SECOND, value: 1, color: GradientColor.SECOND },

@@ -43,26 +43,6 @@
         changeEvent: 'update:value',
         defaultValue: GradientColor.SECOND,
       },
-      // {
-      //   field: ComponentConfigFieldEnum.INSTRUMENT_PANEL_WIDTH,
-      //   label: '仪表盘宽度',
-      //   component: 'Slider',
-      //   changeEvent: 'update:value',
-      //   defaultValue: option.pointerColor,
-      // },
-      {
-        field: ComponentConfigFieldEnum.SHOW_DEVICE_NAME,
-        label: '显示设备名称',
-        component: 'Checkbox',
-        defaultValue: option.showDeviceName,
-      },
-      {
-        field: ComponentConfigFieldEnum.SHOW_TIME,
-        label: '显示时间',
-        component: 'Checkbox',
-        defaultValue: option.showTime,
-      },
-
       {
         field: ComponentConfigFieldEnum.UNIT,
         label: '数值单位',
@@ -70,6 +50,40 @@
         defaultValue: option.unit,
       },
       {
+        field: ComponentConfigFieldEnum.VALUE_SIZE,
+        label: '数值字体大小',
+        component: 'InputNumber',
+        defaultValue: 14,
+        componentProps: {
+          min: 0,
+          formatter: (e) => {
+            const value = e.replace(/^0/g, '');
+            if (value) {
+              return value.replace(/^0/g, '');
+            } else {
+              return 0;
+            }
+          },
+        },
+      },
+      {
+        field: ComponentConfigFieldEnum.FONT_SIZE,
+        label: '文本字体大小',
+        component: 'InputNumber',
+        defaultValue: 14,
+        componentProps: {
+          min: 0,
+          formatter: (e) => {
+            const value = e.replace(/^0/g, '');
+            if (value) {
+              return value.replace(/^0/g, '');
+            } else {
+              return 0;
+            }
+          },
+        },
+      },
+      {
         field: ComponentConfigFieldEnum.MAX_NUMBER,
         label: '最大值',
         component: 'InputNumber',
@@ -90,6 +104,18 @@
           };
         },
       },
+      {
+        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,
@@ -120,13 +146,24 @@
       showTime: item[ComponentConfigFieldEnum.SHOW_TIME],
       pointerColor: item[ComponentConfigFieldEnum.POINTER_COLOR],
       maxNumber: item[ComponentConfigFieldEnum.MAX_NUMBER],
+      fontSize: item[ComponentConfigFieldEnum.FONT_SIZE],
+      valueSize: item[ComponentConfigFieldEnum.VALUE_SIZE],
     } as ComponentInfo;
   };
 
   const setFormValues = (data: Recordable) => {
     // return setFieldsValue(data);
-    const { gradientInfo, unit, fontColor, showDeviceName, pointerColor, showTime, maxNumber } =
-      data;
+    const {
+      gradientInfo,
+      unit,
+      fontColor,
+      showDeviceName,
+      pointerColor,
+      showTime,
+      maxNumber,
+      fontSize,
+      valueSize,
+    } = data;
     const firstRecord = gradientInfo.find((item) => item.key === Gradient.FIRST);
     const secondRecord = gradientInfo.find((item) => item.key === Gradient.SECOND);
 
@@ -141,6 +178,8 @@
       [ComponentConfigFieldEnum.SECOND_PHASE_COLOR]: secondRecord?.color,
       [ComponentConfigFieldEnum.POINTER_COLOR]: pointerColor,
       [ComponentConfigFieldEnum.MAX_NUMBER]: maxNumber,
+      [ComponentConfigFieldEnum.FONT_SIZE]: fontSize,
+      [ComponentConfigFieldEnum.VALUE_SIZE]: valueSize,
     };
     return setFieldsValue(value);
   };

@@ -32,6 +32,8 @@
       gradientInfo: presetGradientInfo,
       showTime: persetShowTime,
       maxNumber: persetMaxNumber,
+      fontSize: persetFontSize,
+      valueSize: persetValueSize,
     } = persetOption || {};
     const {
       unit,
@@ -41,6 +43,8 @@
       gradientInfo,
       showTime,
       maxNumber,
+      fontSize,
+      valueSize,
     } = componentInfo || {};
     return {
       unit: unit ?? presetUnit,
@@ -51,6 +55,8 @@
       gradientInfo: gradientInfo ?? presetGradientInfo,
       showTime: showTime ?? persetShowTime,
       maxNumber: maxNumber || persetMaxNumber,
+      fontSize: fontSize || persetFontSize || 14,
+      valueSize: valueSize || persetValueSize || 14,
     };
   });
 
@@ -66,7 +72,7 @@
   };
 
   const options = (): EChartsOption => {
-    const { unit, fontColor, pointerColor, gradientInfo, maxNumber } = unref(getDesign);
+    const { unit, fontColor, pointerColor, gradientInfo, maxNumber, valueSize } = unref(getDesign);
 
     const instrumentPanelColor = getStageColor(gradientInfo);
     // getStageColor(gradientInfo);
@@ -108,7 +114,7 @@
             //指针
             show: true,
             icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z',
-            width: 4 * unref(getRatio) ? 4 * unref(getRatio) : 4,
+            width: unref(getRatio) ? 4 * unref(getRatio) : 4,
             length: '100%',
             itemStyle: {
               color: pointerColor,
@@ -128,7 +134,7 @@
           },
           detail: {
             valueAnimation: true,
-            fontSize: 14 * unref(getRatio),
+            fontSize: unref(getRatio) ? valueSize * unref(getRatio) : valueSize,
             fontWeight: 'bolder',
             formatter: `{value} ${unit ?? ''}`,
             color: fontColor || 'inherit',
@@ -199,7 +205,7 @@
             width: 4 * unref(getRatio),
           },
           detail: {
-            fontSize: 14 * unref(getRatio),
+            fontSize: unref(getDesign).valueSize * unref(getRatio),
           },
         },
       ],
@@ -219,9 +225,11 @@
     <div class="w-full h-full flex flex-1 flex-col justify-center items-center">
       <div ref="chartRefEl" class="flex-1 w-full h-6/7 flex flex-col justify-center items-center">
       </div>
-      <div class="text-gray-500 text-xs text-center truncate">{{
-        getDesign.attribute || '湿度'
-      }}</div>
+      <div
+        class="text-gray-500 text-center truncate"
+        :style="{ fontSize: getDesign.fontSize + 'px' }"
+        >{{ getDesign.attribute || '湿度' }}</div
+      >
     </div>
     <UpdateTime v-if="getDesign.showTime" :time="time" />
   </main>

@@ -26,6 +26,8 @@ export const option: PublicPresetOptions = {
   [ComponentConfigFieldEnum.POINTER_COLOR]: '#15E2C6',
   [ComponentConfigFieldEnum.INSTRUMENT_PANEL_COLOR]: '#61D4C5',
   [ComponentConfigFieldEnum.MAX_NUMBER]: 100,
+  [ComponentConfigFieldEnum.FONT_SIZE]: 14,
+  [ComponentConfigFieldEnum.VALUE_SIZE]: 14,
   [ComponentConfigFieldEnum.GRADIENT_INFO]: [
     { key: Gradient.FIRST, value: 0, color: GradientColor.FIRST },
     { key: Gradient.SECOND, value: 1, color: GradientColor.SECOND },

@@ -43,24 +43,6 @@
         defaultValue: GradientColor.SECOND,
       },
       {
-        field: ComponentConfigFieldEnum.PROGRESS_BAR_CIRCLE,
-        label: '显示进度条圆形',
-        component: 'Checkbox',
-        defaultValue: option.progressBarCircle,
-      },
-      {
-        field: ComponentConfigFieldEnum.SHOW_DEVICE_NAME,
-        label: '显示设备名称',
-        component: 'Checkbox',
-        defaultValue: option.showDeviceName,
-      },
-      {
-        field: ComponentConfigFieldEnum.SHOW_TIME,
-        label: '显示时间',
-        component: 'Checkbox',
-        defaultValue: option.showTime,
-      },
-      {
         field: ComponentConfigFieldEnum.MAX_NUMBER,
         label: '最大值',
         component: 'InputNumber',
@@ -81,6 +63,58 @@
           };
         },
       },
+      {
+        field: ComponentConfigFieldEnum.VALUE_SIZE,
+        label: '数值字体大小',
+        component: 'InputNumber',
+        defaultValue: 14,
+        componentProps: {
+          min: 0,
+          formatter: (e) => {
+            const value = e.replace(/^0/g, '');
+            if (value) {
+              return value.replace(/^0/g, '');
+            } else {
+              return 0;
+            }
+          },
+        },
+      },
+      {
+        field: ComponentConfigFieldEnum.FONT_SIZE,
+        label: '文本字体大小',
+        component: 'InputNumber',
+        defaultValue: 14,
+        componentProps: {
+          min: 0,
+          formatter: (e) => {
+            const value = e.replace(/^0/g, '');
+            if (value) {
+              return value.replace(/^0/g, '');
+            } else {
+              return 0;
+            }
+          },
+        },
+      },
+      {
+        field: ComponentConfigFieldEnum.PROGRESS_BAR_CIRCLE,
+        label: '显示进度条圆形',
+        component: 'Checkbox',
+        defaultValue: option.progressBarCircle,
+      },
+      {
+        field: ComponentConfigFieldEnum.SHOW_DEVICE_NAME,
+        label: '显示设备名称',
+        component: 'Checkbox',
+        defaultValue: option.showDeviceName,
+      },
+      {
+        field: ComponentConfigFieldEnum.SHOW_TIME,
+        label: '显示时间',
+        component: 'Checkbox',
+        defaultValue: option.showTime,
+      },
     ],
     showActionButtonGroup: false,
     labelWidth: 120,
@@ -111,6 +145,8 @@
       showTime: item[ComponentConfigFieldEnum.SHOW_TIME],
       progressBarCircle: item[ComponentConfigFieldEnum.PROGRESS_BAR_CIRCLE],
       maxNumber: item[ComponentConfigFieldEnum.MAX_NUMBER],
+      valueSize: item[ComponentConfigFieldEnum.VALUE_SIZE],
+      fontSize: item[ComponentConfigFieldEnum.FONT_SIZE],
     } as ComponentInfo;
   };
 
@@ -124,6 +160,8 @@
       progressBarCircle,
       showTime,
       maxNumber,
+      valueSize,
+      fontSize,
     } = data;
     const firstRecord = gradientInfo.find((item) => item.key === Gradient.FIRST);
     const secondRecord = gradientInfo.find((item) => item.key === Gradient.SECOND);
@@ -139,6 +177,8 @@
       [ComponentConfigFieldEnum.SECOND_PHASE_COLOR]: secondRecord?.color,
       [ComponentConfigFieldEnum.PROGRESS_BAR_CIRCLE]: progressBarCircle,
       [ComponentConfigFieldEnum.MAX_NUMBER]: maxNumber,
+      [ComponentConfigFieldEnum.VALUE_SIZE]: valueSize,
+      [ComponentConfigFieldEnum.FONT_SIZE]: fontSize,
     };
     return setFieldsValue(value);
   };

@@ -33,6 +33,8 @@
       gradientInfo: presetGradientInfo,
       showTime: persetShowTime,
       maxNumber: persetMaxNumber,
+      fontSize: persetFontSize,
+      valueSize: persetValueSize,
     } = persetOption || {};
     const {
       unit,
@@ -43,6 +45,8 @@
       instrumentPanelColor,
       showTime,
       maxNumber,
+      fontSize,
+      valueSize,
     } = componentInfo || {};
     return {
       unit: unit ?? presetUnit,
@@ -54,6 +58,8 @@
       gradientInfo: gradientInfo ?? presetGradientInfo,
       showTime: showTime ?? persetShowTime,
       maxNumber: maxNumber || persetMaxNumber,
+      fontSize: fontSize || persetFontSize || 14,
+      valueSize: valueSize || persetValueSize || 14,
     };
   });
 
@@ -71,7 +77,8 @@
   const titleValue = ref<number>(20);
 
   const options = (): EChartsOption => {
-    const { unit, fontColor, progressBarCircle, gradientInfo, maxNumber } = unref(getDesign);
+    const { unit, fontColor, progressBarCircle, gradientInfo, maxNumber, valueSize } =
+      unref(getDesign);
     const instrumentPanelColor = getStageColor(gradientInfo);
     return {
       title: {
@@ -79,7 +86,7 @@
         top: 'center',
         left: 'center',
         textStyle: {
-          fontSize: unref(getRatio) ? 14 * unref(getRatio) : 14,
+          fontSize: unref(getRatio) ? valueSize * unref(getRatio) : valueSize,
           color: fontColor || '#65d3ff',
           valueAnimation: true,
         },
@@ -210,7 +217,7 @@
       ],
       title: {
         textStyle: {
-          fontSize: 14 * unref(getRatio),
+          fontSize: unref(getDesign).valueSize * unref(getRatio),
         },
       },
     });
@@ -229,9 +236,11 @@
     <div class="flex w-full h-full flex-col justify-center items-center flex-1">
       <div ref="chartRefEl" class="flex-1 w-full h-6/7 flex-col justify-center items-center flex">
       </div>
-      <div class="text-gray-500 text-xs text-center truncate">{{
-        getDesign.attribute || '湿度'
-      }}</div>
+      <div
+        class="text-gray-500 text-center truncate"
+        :style="{ fontSize: getDesign.fontSize + 'px' }"
+        >{{ getDesign.attribute || '湿度' }}</div
+      >
     </div>
     <UpdateTime v-if="getDesign.showTime" :time="time" />
   </main>

@@ -23,6 +23,8 @@ export const option: PublicPresetOptions = {
   [ComponentConfigFieldEnum.SHOW_TIME]: false,
   [ComponentConfigFieldEnum.MAX_NUMBER]: 100,
   [ComponentConfigFieldEnum.UNIT]: 'kw',
+  [ComponentConfigFieldEnum.FONT_SIZE]: 14,
+  [ComponentConfigFieldEnum.VALUE_SIZE]: 14,
 };
 
 export default class Config extends PublicConfigClass implements CreateComponentType {

@@ -22,18 +22,6 @@
         defaultValue: option.unit,
       },
       {
-        field: ComponentConfigFieldEnum.SHOW_DEVICE_NAME,
-        label: '显示设备名称',
-        component: 'Checkbox',
-        defaultValue: option.showDeviceName,
-      },
-      {
-        field: ComponentConfigFieldEnum.SHOW_TIME,
-        label: '显示时间',
-        component: 'Checkbox',
-        defaultValue: option.showTime,
-      },
-      {
         field: ComponentConfigFieldEnum.MAX_NUMBER,
         label: '最大值',
         component: 'InputNumber',
@@ -54,6 +42,52 @@
           };
         },
       },
+      {
+        field: ComponentConfigFieldEnum.VALUE_SIZE,
+        label: '数值字体大小',
+        component: 'InputNumber',
+        defaultValue: 14,
+        componentProps: {
+          min: 0,
+          formatter: (e) => {
+            const value = e.replace(/^0/g, '');
+            if (value) {
+              return value.replace(/^0/g, '');
+            } else {
+              return 0;
+            }
+          },
+        },
+      },
+      {
+        field: ComponentConfigFieldEnum.FONT_SIZE,
+        label: '文本字体大小',
+        component: 'InputNumber',
+        defaultValue: 14,
+        componentProps: {
+          min: 0,
+          formatter: (e) => {
+            const value = e.replace(/^0/g, '');
+            if (value) {
+              return value.replace(/^0/g, '');
+            } else {
+              return 0;
+            }
+          },
+        },
+      },
+      {
+        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,
@@ -71,12 +105,14 @@
       showDeviceName: item[ComponentConfigFieldEnum.SHOW_DEVICE_NAME],
       showTime: item[ComponentConfigFieldEnum.SHOW_TIME],
       maxNumber: item[ComponentConfigFieldEnum.MAX_NUMBER],
+      fontSize: item[ComponentConfigFieldEnum.FONT_SIZE],
+      valueSize: item[ComponentConfigFieldEnum.VALUE_SIZE],
     } as ComponentInfo;
   };
 
   const setFormValues = (data: Recordable) => {
     // return setFieldsValue(data);
-    const { unit, fontColor, showDeviceName, showTime, maxNumber } = data;
+    const { unit, fontColor, showDeviceName, showTime, maxNumber, fontSize, valueSize } = data;
 
     const value = {
       [ComponentConfigFieldEnum.UNIT]: unit,
@@ -84,6 +120,8 @@
       [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: showDeviceName,
       [ComponentConfigFieldEnum.SHOW_TIME]: showTime,
       [ComponentConfigFieldEnum.MAX_NUMBER]: maxNumber,
+      [ComponentConfigFieldEnum.FONT_SIZE]: fontSize,
+      [ComponentConfigFieldEnum.VALUE_SIZE]: valueSize,
     };
     return setFieldsValue(value);
   };

@@ -31,6 +31,8 @@
       gradientInfo: presetGradientInfo,
       showTime: persetShowTime,
       maxNumber: persetMaxNumber,
+      fontSize: persetFontSize,
+      valueSize: persetValueSize,
     } = persetOption || {};
     const {
       unit,
@@ -40,6 +42,8 @@
       gradientInfo,
       showTime,
       maxNumber,
+      fontSize,
+      valueSize,
     } = componentInfo || {};
     return {
       unit: unit ?? presetUnit,
@@ -50,11 +54,13 @@
       gradientInfo: gradientInfo ?? presetGradientInfo,
       showTime: showTime ?? persetShowTime,
       maxNumber: maxNumber || persetMaxNumber,
+      fontSize: fontSize || persetFontSize || 14,
+      valueSize: valueSize || persetValueSize || 14,
     };
   });
 
   const options = (): EChartsOption => {
-    const { unit, fontColor, pointerColor, maxNumber } = unref(getDesign);
+    const { unit, fontColor, pointerColor, maxNumber, valueSize } = unref(getDesign);
 
     // getStageColor(gradientInfo);
     return {
@@ -110,7 +116,7 @@
           },
           detail: {
             valueAnimation: true,
-            fontSize: unref(getRatio) ? 16 * unref(getRatio) : 16,
+            fontSize: unref(getRatio) ? valueSize * unref(getRatio) : valueSize,
             offsetCenter: [0, '70%'],
             formatter: `{value} ${unit ?? ''}`,
             color: fontColor || 'inherit',
@@ -191,7 +197,7 @@
             },
           },
           detail: {
-            fontSize: 16 * unref(getRatio),
+            fontSize: unref(getDesign).valueSize * unref(getRatio),
           },
         },
       ],
@@ -211,7 +217,7 @@
     <div class="flex flex-1 flex-col justify-center items-center w-full h-full">
       <div ref="chartRefEl" class="flex-1 w-full h-6/7 flex flex-col justify-center items-center">
       </div>
-      <div class="text-gray-500 text-xs text-center truncate">{{
+      <div class="text-gray-500 text-center" :style="{ fontSize: getDesign.fontSize + 'px' }">{{
         getDesign.attribute || '速度'
       }}</div>
     </div>

@@ -15,6 +15,8 @@ export const option: PublicPresetOptions = {
   [ComponentConfigFieldEnum.SHOW_TIME]: false,
   [ComponentConfigFieldEnum.MAX_NUMBER]: 100,
   [ComponentConfigFieldEnum.UNIT]: '℃',
+  [ComponentConfigFieldEnum.VALUE_SIZE]: 14,
+  [ComponentConfigFieldEnum.FONT_SIZE]: 14,
 };
 
 export default class Config extends PublicConfigClass implements CreateComponentType {

@@ -53,6 +53,40 @@
           };
         },
       },
+      {
+        field: ComponentConfigFieldEnum.VALUE_SIZE,
+        label: '数值字体大小',
+        component: 'InputNumber',
+        defaultValue: 14,
+        componentProps: {
+          min: 0,
+          formatter: (e) => {
+            const value = e.replace(/^0/g, '');
+            if (value) {
+              return value.replace(/^0/g, '');
+            } else {
+              return 0;
+            }
+          },
+        },
+      },
+      {
+        field: ComponentConfigFieldEnum.FONT_SIZE,
+        label: '文本字体大小',
+        component: 'InputNumber',
+        defaultValue: 14,
+        componentProps: {
+          min: 0,
+          formatter: (e) => {
+            const value = e.replace(/^0/g, '');
+            if (value) {
+              return value.replace(/^0/g, '');
+            } else {
+              return 0;
+            }
+          },
+        },
+      },
     ],
     showActionButtonGroup: false,
     labelWidth: 120,

@@ -32,19 +32,23 @@
       unit: presetUnit,
       showTime: persetShowTime,
       maxNumber: persetMaxNumber,
+      valueSize: persetValueSize,
+      fontSize: persetFontSize,
     } = persetOption || {};
-    const { unit, fontColor, showTime, maxNumber } = componentInfo || {};
+    const { unit, fontColor, showTime, maxNumber, valueSize, fontSize } = componentInfo || {};
     return {
       unit: unit ?? presetUnit,
       fontColor: fontColor ?? presetFontColor,
       attribute: attributeRename || attributeName || attribute,
       showTime: persetShowTime || showTime,
       maxNumber: maxNumber || persetMaxNumber,
+      valueSize: valueSize || persetValueSize || 14,
+      fontSize: fontSize || persetFontSize || 14,
     };
   });
 
   const options = (): EChartsOption => {
-    const { unit, fontColor, maxNumber } = unref(getDesign);
+    const { unit, fontColor, maxNumber, valueSize } = unref(getDesign);
     return {
       series: [
         {
@@ -104,7 +108,7 @@
             lineHeight: 10,
             borderRadius: 8,
             offsetCenter: [0, '40%'],
-            fontSize: unref(getRatio) ? 14 * unref(getRatio) : 14,
+            fontSize: unref(getRatio) ? valueSize * unref(getRatio) : valueSize,
             fontWeight: 'bolder',
             formatter: `{value} ${unit ?? ''}`,
             color: fontColor || 'inherit',
@@ -200,7 +204,7 @@
       series: [
         {
           detail: {
-            fontSize: 14 * unref(getRatio),
+            fontSize: unref(getDesign).valueSize * unref(getRatio),
           },
           progress: {
             width: 24 * unref(getRatio),
@@ -238,9 +242,11 @@
     <div class="w-full h-full flex justify-center items-center flex-1 flex-col">
       <div ref="chartRefEl" class="flex-1 w-full h-6/7 flex justify-center items-center flex-col">
       </div>
-      <div class="text-gray-500 text-xs text-center truncate">{{
-        getDesign.attribute || '温度'
-      }}</div>
+      <div
+        class="text-gray-500 text-center truncate"
+        :style="{ fontSize: getDesign.fontSize + 'px' }"
+        >{{ getDesign.attribute || '温度' }}</div
+      >
     </div>
     <UpdateTime v-show="getDesign.showTime" :time="time" />
   </main>

@@ -31,6 +31,8 @@ export const option: PublicPresetOptions = {
   [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
   [ComponentConfigFieldEnum.SHOW_TIME]: false,
   [ComponentConfigFieldEnum.MAX_NUMBER]: 100,
+  [ComponentConfigFieldEnum.FONT_SIZE]: 14,
+  [ComponentConfigFieldEnum.VALUE_SIZE]: 14,
 };
 
 export default class Config extends PublicConfigClass implements CreateComponentType {

@@ -77,16 +77,38 @@
         },
       },
       {
-        field: ComponentConfigFieldEnum.SHOW_DEVICE_NAME,
-        label: '显示设备名称',
-        component: 'Checkbox',
-        defaultValue: option.showDeviceName,
+        field: ComponentConfigFieldEnum.VALUE_SIZE,
+        label: '数值字体大小',
+        component: 'InputNumber',
+        defaultValue: 14,
+        componentProps: {
+          min: 0,
+          formatter: (e) => {
+            const value = e.replace(/^0/g, '');
+            if (value) {
+              return value.replace(/^0/g, '');
+            } else {
+              return 0;
+            }
+          },
+        },
       },
       {
-        field: ComponentConfigFieldEnum.SHOW_TIME,
-        label: '显示时间',
-        component: 'Checkbox',
-        defaultValue: option.showTime,
+        field: ComponentConfigFieldEnum.FONT_SIZE,
+        label: '文本字体大小',
+        component: 'InputNumber',
+        defaultValue: 14,
+        componentProps: {
+          min: 0,
+          formatter: (e) => {
+            const value = e.replace(/^0/g, '');
+            if (value) {
+              return value.replace(/^0/g, '');
+            } else {
+              return 0;
+            }
+          },
+        },
       },
       {
         field: ComponentConfigFieldEnum.MAX_NUMBER,
@@ -109,6 +131,18 @@
           };
         },
       },
+      {
+        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,
@@ -142,11 +176,22 @@
       showDeviceName: value[ComponentConfigFieldEnum.SHOW_DEVICE_NAME],
       showTime: value[ComponentConfigFieldEnum.SHOW_TIME],
       maxNumber: value[ComponentConfigFieldEnum.MAX_NUMBER],
+      valueSize: value[ComponentConfigFieldEnum.VALUE_SIZE],
+      fontSize: value[ComponentConfigFieldEnum.FONT_SIZE],
     } as ComponentInfo;
   };
 
   const setFormValues = (data: ComponentInfo) => {
-    const { gradientInfo, unit, fontColor, showDeviceName, showTime, maxNumber } = data;
+    const {
+      gradientInfo,
+      unit,
+      fontColor,
+      showDeviceName,
+      showTime,
+      maxNumber,
+      valueSize,
+      fontSize,
+    } = data;
     const firstRecord = gradientInfo.find((item) => item.key === Gradient.FIRST);
     const secondRecord = gradientInfo.find((item) => item.key === Gradient.SECOND);
     const thirdRecord = gradientInfo.find((item) => item.key === Gradient.THIRD);
@@ -156,6 +201,8 @@
       [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: showDeviceName,
       [ComponentConfigFieldEnum.SHOW_TIME]: showTime,
       [ComponentConfigFieldEnum.MAX_NUMBER]: maxNumber,
+      [ComponentConfigFieldEnum.VALUE_SIZE]: valueSize,
+      [ComponentConfigFieldEnum.FONT_SIZE]: fontSize,
       [ComponentConfigFieldEnum.FIRST_PHASE_VALUE]: firstRecord?.value,
       [ComponentConfigFieldEnum.FIRST_PHASE_COLOR]: firstRecord?.color,
       [ComponentConfigFieldEnum.SECOND_PHASE_VALUE]: secondRecord?.value,

@@ -38,9 +38,12 @@
       gradientInfo: presetGradientInfo,
       showTime: persetShowTime,
       maxNumber: persetMaxNumber,
+      fontSize: persetFontSize,
+      valueSize: persetValueSize,
     } = persetOption || {};
 
-    const { unit, fontColor, gradientInfo, showTime, maxNumber } = componentInfo || {};
+    const { unit, fontColor, gradientInfo, showTime, maxNumber, fontSize, valueSize } =
+      componentInfo || {};
     return {
       unit: unit ?? presetUnit,
       fontColor: fontColor ?? presetFontColor,
@@ -48,6 +51,8 @@
       attribute: attributeRename || attributeName || attribute,
       showTime: showTime || persetShowTime,
       maxNumber: maxNumber || persetMaxNumber,
+      fontSize: fontSize || persetFontSize || 14,
+      valueSize: valueSize || persetValueSize || 14,
     };
   });
 
@@ -57,7 +62,7 @@
   };
 
   const options = (): EChartsOption => {
-    const { gradientInfo, unit, fontColor, maxNumber } = unref(getDesign);
+    const { gradientInfo, unit, fontColor, maxNumber, valueSize } = unref(getDesign);
     const firstRecord = getGradient(Gradient.FIRST, gradientInfo);
     const secondRecord = getGradient(Gradient.SECOND, gradientInfo);
     const thirdRecord = getGradient(Gradient.THIRD, gradientInfo);
@@ -122,7 +127,7 @@
             formatter: `{value} ${unit ?? ''}`,
             color: fontColor || 'inherit',
             offsetCenter: [0, '70%'],
-            fontSize: unref(getRatio) ? unref(getRatio) * 14 : 14,
+            fontSize: unref(getRatio) ? unref(getRatio) * valueSize : valueSize,
           },
           data: [
             {
@@ -194,7 +199,7 @@
             fontSize: 6 * unref(getRatio),
           },
           detail: {
-            fontSize: 14 * unref(getRatio),
+            fontSize: unref(getDesign).valueSize * unref(getRatio),
           },
         },
       ],
@@ -218,7 +223,10 @@
     <div class="w-full h-full flex justify-center items-center flex-col flex-1">
       <div ref="chartRefEl" class="flex-1 w-full h-6/7 flex flex-col justify-center items-center">
       </div>
-      <div class="text-center text-gray-500 text-xs truncate">
+      <div
+        class="text-center text-gray-500 truncate"
+        :style="{ fontSize: getDesign.fontSize + 'px' }"
+      >
         {{ getDesign.attribute || '速度' }}
       </div>
     </div>

@@ -42,17 +42,17 @@
 
   const handleGetVideoPlayUrl = async () => {
     try {
-      const instance = unref(basicVideoPlayEl)?.getInstance();
       const { config } = props;
       const { option } = config;
       const { videoConfig, uuid } = option || {};
       if (!uuid) return;
       const { url, id, accessMode } = videoConfig || {};
-      const type = getVideoTypeByUrl(url!);
+      let type = getVideoTypeByUrl(url!);
       let playUrl = url;
       if (accessMode === AccessMode.Streaming && id) {
         const { data: { url } = { url: '' } } = await getStreamingPlayUrl(id!);
         playUrl = url;
+        playUrl && (type = getVideoTypeByUrl(playUrl!));
       }
 
       if (isRtspProtocol(url!)) {
@@ -60,10 +60,6 @@
         const { visitorId } = result;
         playUrl = getFlvPlayUrl(playUrl!, visitorId);
         withToken.value = true;
-
-        (instance!.options_ as any).flvjs.config.headers = {
-          'X-Authorization': `Bearer ${isShareMode() ? getShareJwtToken() : getJwtToken()}`,
-        };
       }
 
       playSource.value = {
@@ -71,7 +67,17 @@
         type,
       };
 
-      instance?.src(toRaw(unref(playSource)));
+      const instance = unref(basicVideoPlayEl)?.customInit((options) => {
+        withToken.value = true;
+
+        if (unref(withToken)) {
+          (options as any).flvjs.config.headers = {
+            'X-Authorization': `Bearer ${isShareMode() ? getShareJwtToken() : getJwtToken()}`,
+          };
+        }
+        return { ...options, sources: [toRaw(unref(playSource))] } as VideoJsPlayerOptions;
+      });
+
       instance?.play();
     } finally {
       loading.value = false;
@@ -80,8 +86,19 @@
 
   const handleSelectPreview = () => {
     loading.value = false;
-    const instance = unref(basicVideoPlayEl)?.getInstance();
-    instance?.src({ type: getVideoTypeByUrl(exampleVideoPlay), src: exampleVideoPlay });
+    const instance = unref(basicVideoPlayEl)?.customInit((options) => {
+      withToken.value = true;
+
+      if (unref(withToken)) {
+        (options as any).flvjs.config.headers = {
+          'X-Authorization': `Bearer ${isShareMode() ? getShareJwtToken() : getJwtToken()}`,
+        };
+      }
+      return {
+        ...options,
+        sources: [{ type: getVideoTypeByUrl(exampleVideoPlay), src: exampleVideoPlay }],
+      } as VideoJsPlayerOptions;
+    });
     instance?.play();
   };
 
@@ -103,7 +120,12 @@
 <template>
   <main class="w-full h-full flex flex-col justify-center items-center p-2">
     <Spin :spinning="loading" wrapper-class-name="video-spin">
-      <BasicVideoPlay ref="basicVideoPlayEl" :options="getOptions" :with-token="withToken" />
+      <BasicVideoPlay
+        ref="basicVideoPlayEl"
+        :options="getOptions"
+        :with-token="withToken"
+        :immediateInitOnMounted="false"
+      />
     </Spin>
   </main>
 </template>

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

@@ -25,6 +25,29 @@
         },
       },
       {
+        field: ComponentConfigFieldEnum.FONT_SIZE,
+        label: '文本字体大小',
+        component: 'InputNumber',
+        defaultValue: 14,
+        componentProps: {
+          min: 0,
+          formatter: (e) => {
+            const value = e.replace(/^0/g, '');
+            if (value) {
+              return value.replace(/^0/g, '');
+            } else {
+              return 0;
+            }
+          },
+        },
+      },
+      {
+        field: ComponentConfigFieldEnum.SHOW_DEVICE_NAME,
+        label: '显示设备名称',
+        component: 'Checkbox',
+        defaultValue: option.showDeviceName,
+      },
+      {
         field: ComponentConfigFieldEnum.SHOW_TIME,
         label: '显示时间',
         component: 'Checkbox',

@@ -25,16 +25,18 @@
       closeColor: persetCloseColor,
       showDeviceName: persetShowDeviceName,
       showTime: persetShowTime,
+      fontSize: persetFontSize,
     } = persetOption || {};
     const { componentInfo, attribute, attributeName, attributeRename } = option;
 
-    const { openColor, closeColor, showDeviceName, showTime } = componentInfo || {};
+    const { openColor, closeColor, showDeviceName, showTime, fontSize } = componentInfo || {};
     return {
       openColor: openColor ?? persetOpenColor,
       closeColor: closeColor ?? persetCloseColor,
       showDeviceName: showDeviceName ?? persetShowDeviceName,
       attribute: attributeRename || attributeName || attribute,
       showTime: showTime ?? persetShowTime,
+      fontSize: fontSize || persetFontSize || 14,
     };
   });
 
@@ -78,7 +80,9 @@
         }"
         :class="isOpenClose ? 'switch_open' : 'switch_close'"
       ></div>
-      <div class="text-gray-500 text-sm truncate">{{ getDesign.attribute }}</div>
+      <div class="text-gray-500 truncate" :style="{ fontSize: getDesign.fontSize + 'px' }">{{
+        getDesign.attribute
+      }}</div>
     </div>
     <UpdateTime v-if="getDesign.showTime" :time="time" />
   </main>

@@ -16,6 +16,7 @@ export const option: PublicPresetOptions = {
   [ComponentConfigFieldEnum.ICON_COLOR_CLOSE]: '#CCCCCC',
   [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
   [ComponentConfigFieldEnum.SHOW_TIME]: false,
+  [ComponentConfigFieldEnum.FONT_SIZE]: 14,
 };
 
 export default class Config extends PublicConfigClass implements CreateComponentType {

@@ -47,6 +47,23 @@
         defaultValue: option.iconColorClose,
       },
       {
+        field: ComponentConfigFieldEnum.FONT_SIZE,
+        label: '文本字体大小',
+        component: 'InputNumber',
+        defaultValue: 14,
+        componentProps: {
+          min: 0,
+          formatter: (e) => {
+            const value = e.replace(/^0/g, '');
+            if (value) {
+              return value.replace(/^0/g, '');
+            } else {
+              return 0;
+            }
+          },
+        },
+      },
+      {
         field: ComponentConfigFieldEnum.SHOW_DEVICE_NAME,
         label: '显示设备名称',
         component: 'Checkbox',

@@ -26,11 +26,12 @@
       iconClose: persetIconCLose,
       iconColorClose: persetIconColorClose,
       showTime: persetShowTime,
+      fontSize: persetFontSize,
     } = persetOption;
 
     const { componentInfo, attributeName, attributeRename } = option;
 
-    const { icon, iconColor, fontColor, unit, iconClose, iconColorClose, showTime } =
+    const { icon, iconColor, fontColor, unit, iconClose, iconColorClose, showTime, fontSize } =
       componentInfo || {};
     return {
       iconColor: iconColor || persetIconColor,
@@ -41,6 +42,7 @@
       iconClose: iconClose || persetIconCLose,
       iconColorClose: iconColorClose || persetIconColorClose,
       showTime: showTime ?? persetShowTime,
+      fontSize: fontSize || persetFontSize || 14,
     };
   });
 
@@ -68,7 +70,9 @@
         :size="60"
         :style="{ color: isOpenClose ? getDesign.iconColor : getDesign.iconColorClose }"
       />
-      <div class="text-gray-500 text-sm truncate m-2">{{ getDesign.attribute || '' }}</div>
+      <div class="text-gray-500 truncate m-2" :style="{ fontSize: getDesign.fontSize + 'px' }">{{
+        getDesign.attribute || ''
+      }}</div>
     </div>
     <UpdateTime v-show="getDesign.showTime" :time="time" />
   </main>

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

@@ -19,6 +19,40 @@
         label: '显示设备名称',
         component: 'Checkbox',
       },
+      {
+        field: ComponentConfigFieldEnum.VALUE_SIZE,
+        label: '数值字体大小',
+        component: 'InputNumber',
+        defaultValue: 20,
+        componentProps: {
+          min: 0,
+          formatter: (e) => {
+            const value = e.replace(/^0/g, '');
+            if (value) {
+              return value.replace(/^0/g, '');
+            } else {
+              return 0;
+            }
+          },
+        },
+      },
+      {
+        field: ComponentConfigFieldEnum.FONT_SIZE,
+        label: '文本字体大小',
+        component: 'InputNumber',
+        defaultValue: 14,
+        componentProps: {
+          min: 0,
+          formatter: (e) => {
+            const value = e.replace(/^0/g, '');
+            if (value) {
+              return value.replace(/^0/g, '');
+            } else {
+              return 0;
+            }
+          },
+        },
+      },
     ],
     showActionButtonGroup: false,
     labelWidth: 120,

@@ -17,13 +17,19 @@
   const getDesign = computed(() => {
     const { persetOption = {}, option } = props.config;
 
-    const { fontColor: persetFontColor } = persetOption;
+    const {
+      fontColor: persetFontColor,
+      fontSize: persetFontSize,
+      valueSize: persetValueSize,
+    } = persetOption;
 
     const { componentInfo, attribute, attributeRename, attributeName } = option;
 
-    const { fontColor } = componentInfo || {};
+    const { fontColor, fontSize, valueSize } = componentInfo || {};
     return {
       fontColor: fontColor || persetFontColor,
+      fontSize: fontSize || persetFontSize || 14,
+      valueSize: valueSize || persetValueSize || 20,
       attribute: attributeRename || attributeName || attribute,
     };
   });
@@ -45,10 +51,15 @@
   <main :style="getScale" class="w-full h-full flex flex-col justify-center items-center">
     <DeviceName :config="config" />
 
-    <h1 class="my-4 font-bold text-xl !my-2 truncate" :style="{ color: getDesign.fontColor }">
+    <h1
+      class="my-4 font-bold !my-2 truncate"
+      :style="{ color: getDesign.fontColor, fontSize: getDesign.valueSize + 'px' }"
+    >
       {{ currentValue || 0 }}
     </h1>
-    <div class="text-gray-500 text-sm truncate">{{ getDesign.attribute || '温度' }}</div>
+    <div class="text-gray-500 truncate" :style="{ fontSize: getDesign.fontSize + 'px' }">{{
+      getDesign.attribute || '温度'
+    }}</div>
     <!-- <div v-if="config.option.componentInfo.showDeviceName">
       {{ config.option.deviceRename || config.option.deviceName }}
     </div> -->

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

@@ -19,6 +19,40 @@
         label: '显示设备名称',
         component: 'Checkbox',
       },
+      {
+        field: ComponentConfigFieldEnum.VALUE_SIZE,
+        label: '数值字体大小',
+        component: 'InputNumber',
+        defaultValue: 20,
+        componentProps: {
+          min: 0,
+          formatter: (e) => {
+            const value = e.replace(/^0/g, '');
+            if (value) {
+              return value.replace(/^0/g, '');
+            } else {
+              return 0;
+            }
+          },
+        },
+      },
+      {
+        field: ComponentConfigFieldEnum.FONT_SIZE,
+        label: '文本字体大小',
+        component: 'InputNumber',
+        defaultValue: 14,
+        componentProps: {
+          min: 0,
+          formatter: (e) => {
+            const value = e.replace(/^0/g, '');
+            if (value) {
+              return value.replace(/^0/g, '');
+            } else {
+              return 0;
+            }
+          },
+        },
+      },
     ],
     showActionButtonGroup: false,
     labelWidth: 120,

@@ -19,14 +19,20 @@
   const getDesign = computed(() => {
     const { persetOption = {}, option } = props.config;
 
-    const { fontColor: persetFontColor } = persetOption;
+    const {
+      fontColor: persetFontColor,
+      valueSize: persetValueSize,
+      fontSize: persetFontSize,
+    } = persetOption;
 
     const { componentInfo, attribute, attributeName, attributeRename } = option;
 
-    const { fontColor } = componentInfo || {};
+    const { fontColor, valueSize, fontSize } = componentInfo || {};
 
     return {
       fontColor: fontColor || persetFontColor,
+      valueSize: valueSize || persetValueSize || 20,
+      fontSize: fontSize || persetFontSize || 14,
       attribute: attributeRename || attributeName || attribute,
     };
   });
@@ -50,10 +56,15 @@
     <DeviceName :config="config" />
 
     <div class="flex-1 flex justify-center items-center flex-col" :style="getScale">
-      <h1 class="my-4 font-bold text-xl !my-2 truncate" :style="{ color: getDesign.fontColor }">
+      <h1
+        class="my-4 font-bold !my-2 truncate"
+        :style="{ color: getDesign.fontColor, fontSize: getDesign.valueSize + 'px' }"
+      >
         {{ currentValue || 0 }}
       </h1>
-      <div class="text-gray-500 text-sm truncate">{{ getDesign.attribute || '温度' }}</div>
+      <div class="text-gray-500 truncate" :style="{ fontSize: getDesign.fontSize + 'px' }">{{
+        getDesign.attribute || '温度'
+      }}</div>
     </div>
     <UpdateTime :time="time" />
   </main>

@@ -15,6 +15,8 @@ export const option: PublicPresetOptions = {
   [ComponentConfigFieldEnum.ICON_COLOR]: '#367bff',
   [ComponentConfigFieldEnum.FONT_COLOR]: '#000',
   [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
+  [ComponentConfigFieldEnum.VALUE_SIZE]: 20,
+  [ComponentConfigFieldEnum.FONT_SIZE]: 14,
 };
 
 export default class Config extends PublicConfigClass implements CreateComponentType {

@@ -23,6 +23,41 @@
           placeholder: '请输入数值单位',
         },
       },
+
+      {
+        field: ComponentConfigFieldEnum.VALUE_SIZE,
+        label: '数值字体大小',
+        component: 'InputNumber',
+        defaultValue: 20,
+        componentProps: {
+          min: 0,
+          formatter: (e) => {
+            const value = e.replace(/^0/g, '');
+            if (value) {
+              return value.replace(/^0/g, '');
+            } else {
+              return 0;
+            }
+          },
+        },
+      },
+      {
+        field: ComponentConfigFieldEnum.FONT_SIZE,
+        label: '文本字体大小',
+        component: 'InputNumber',
+        defaultValue: 14,
+        componentProps: {
+          min: 0,
+          formatter: (e) => {
+            const value = e.replace(/^0/g, '');
+            if (value) {
+              return value.replace(/^0/g, '');
+            } else {
+              return 0;
+            }
+          },
+        },
+      },
       {
         field: ComponentConfigFieldEnum.ICON_COLOR,
         label: '图标颜色',

@@ -26,17 +26,21 @@
       unit: perseUnit,
       icon: persetIcon,
       fontColor: persetFontColor,
+      valueSize: persetValueSize,
+      fontSize: persetFontSize,
     } = persetOption;
 
     const { componentInfo, attribute, attributeRename, attributeName } = option;
 
-    const { icon, iconColor, fontColor, unit } = componentInfo || {};
+    const { icon, iconColor, fontColor, unit, valueSize, fontSize } = componentInfo || {};
     return {
       iconColor: iconColor || persetIconColor,
       unit: unit ?? perseUnit,
       icon: icon || persetIcon,
       fontColor: fontColor || persetFontColor,
       attribute: attributeRename || attributeName || attribute,
+      valueSize: valueSize || persetValueSize || 20,
+      fontSize: fontSize || persetFontSize || 14,
     };
   });
 
@@ -64,11 +68,16 @@
         :size="60"
         :style="{ color: getDesign.iconColor }"
       />
-      <h1 class="font-bold text-xl m-2 truncate" :style="{ color: getDesign.fontColor }">
+      <h1
+        class="font-bold m-2 truncate"
+        :style="{ color: getDesign.fontColor, fontSize: getDesign.valueSize + 'px' }"
+      >
         <span> {{ currentValue || 0 }}</span>
         <span>{{ getDesign.unit }} </span>
       </h1>
-      <div class="text-gray-500 text-sm truncate">{{ getDesign.attribute || '温度' }}</div>
+      <div class="text-gray-500 truncate" :style="{ fontSize: getDesign.fontSize + 'px' }">{{
+        getDesign.attribute || '温度'
+      }}</div>
     </div>
     <UpdateTime :time="time" />
   </main>

@@ -15,6 +15,8 @@ export const option: PublicPresetOptions = {
   [ComponentConfigFieldEnum.ICON_COLOR]: '#367bff',
   [ComponentConfigFieldEnum.FONT_COLOR]: '#000',
   [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
+  [ComponentConfigFieldEnum.VALUE_SIZE]: 20,
+  [ComponentConfigFieldEnum.FONT_SIZE]: 14,
 };
 
 export default class Config extends PublicConfigClass implements CreateComponentType {

@@ -24,6 +24,40 @@
         },
       },
       {
+        field: ComponentConfigFieldEnum.VALUE_SIZE,
+        label: '数值字体大小',
+        component: 'InputNumber',
+        defaultValue: 20,
+        componentProps: {
+          min: 0,
+          formatter: (e) => {
+            const value = e.replace(/^0/g, '');
+            if (value) {
+              return value.replace(/^0/g, '');
+            } else {
+              return 0;
+            }
+          },
+        },
+      },
+      {
+        field: ComponentConfigFieldEnum.FONT_SIZE,
+        label: '文本字体大小',
+        component: 'InputNumber',
+        defaultValue: 14,
+        componentProps: {
+          min: 0,
+          formatter: (e) => {
+            const value = e.replace(/^0/g, '');
+            if (value) {
+              return value.replace(/^0/g, '');
+            } else {
+              return 0;
+            }
+          },
+        },
+      },
+      {
         field: ComponentConfigFieldEnum.ICON_COLOR,
         label: '图标颜色',
         component: 'ColorPicker',

@@ -23,17 +23,21 @@
       unit: perseUnit,
       icon: persetIcon,
       fontColor: persetFontColor,
+      valueSize: persetValueSize,
+      fontSize: persetFontSize,
     } = persetOption;
 
     const { componentInfo, attribute, attributeRename, attributeName } = option;
 
-    const { icon, iconColor, fontColor, unit } = componentInfo || {};
+    const { icon, iconColor, fontColor, unit, valueSize, fontSize } = componentInfo || {};
     return {
       iconColor: iconColor || persetIconColor,
       unit: unit ?? perseUnit,
       icon: icon || persetIcon,
       fontColor: fontColor || persetFontColor,
       attribute: attributeRename || attributeName || attribute,
+      valueSize: valueSize || persetValueSize || 20,
+      fontSize: fontSize || persetFontSize || 14,
     };
   });
 
@@ -60,11 +64,16 @@
         :size="60"
         :style="{ color: getDesign.iconColor }"
       />
-      <h1 class="my-4 font-bold text-lg !my-2 truncate" :style="{ color: getDesign.fontColor }">
+      <h1
+        class="my-4 font-bold !my-2 truncate"
+        :style="{ color: getDesign.fontColor, fontSize: getDesign.valueSize + 'px' }"
+      >
         <span>{{ currentValue || 0 }}</span>
         <span>{{ getDesign.unit }}</span>
       </h1>
-      <div class="text-gray-500 text-sm truncate">{{ getDesign.attribute || '温度' }}</div>
+      <div class="text-gray-500 truncate" :style="{ fontSize: getDesign.fontSize + 'px' }">{{
+        getDesign.attribute || '温度'
+      }}</div>
     </div>
   </main>
 </template>

@@ -16,7 +16,8 @@ export const option: PublicPresetOptions = {
   [ComponentConfigFieldEnum.UNIT]: '℃',
   [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
   [ComponentConfigFieldEnum.BACKGROUND_COLOR]: '#377dff',
-  fontSize: '18px',
+  [ComponentConfigFieldEnum.VALUE_SIZE]: 20,
+  [ComponentConfigFieldEnum.FONT_SIZE]: 14,
 };
 
 export default class Config extends PublicConfigClass implements CreateComponentType {

@@ -24,6 +24,41 @@
           defaultValue: option.backgroundColor,
         },
       },
+
+      {
+        field: ComponentConfigFieldEnum.VALUE_SIZE,
+        label: '数值字体大小',
+        component: 'InputNumber',
+        defaultValue: 20,
+        componentProps: {
+          min: 0,
+          formatter: (e) => {
+            const value = e.replace(/^0/g, '');
+            if (value) {
+              return value.replace(/^0/g, '');
+            } else {
+              return 0;
+            }
+          },
+        },
+      },
+      {
+        field: ComponentConfigFieldEnum.FONT_SIZE,
+        label: '文本字体大小',
+        component: 'InputNumber',
+        defaultValue: 14,
+        componentProps: {
+          min: 0,
+          formatter: (e) => {
+            const value = e.replace(/^0/g, '');
+            if (value) {
+              return value.replace(/^0/g, '');
+            } else {
+              return 0;
+            }
+          },
+        },
+      },
       {
         field: ComponentConfigFieldEnum.MAX_NUMBER,
         label: '最大值',

@@ -29,6 +29,7 @@
     attributeName?: string;
     deviceRename?: string;
     maxNumber?: number;
+    [key: string]: number | string | undefined;
   }
 
   const defaultValue: PercentType[] = [
@@ -39,6 +40,8 @@
       unit: '℃',
       deviceName: '温湿度',
       attribute: '温度',
+      fontSize: 14,
+      valueSize: 20,
       id: buildUUID(),
     },
     {
@@ -60,10 +63,13 @@
       fontColor: presetFontColor,
       backgroundColor: persetBackgroundColor,
       maxNumber: persetMaxNumber,
+      valueSize: persetValueSize,
+      fontSize: persetFontSize,
     } = persetOption || {};
     return {
       dataSource: dataSource.map((item) => {
-        const { unit, fontColor, backgroundColor, maxNumber } = item.componentInfo || {};
+        const { unit, fontColor, backgroundColor, maxNumber, valueSize, fontSize } =
+          item.componentInfo || {};
         const { attribute, attributeRename, deviceName, deviceRename, deviceId, attributeName } =
           item;
         return {
@@ -75,6 +81,8 @@
           attributeName: attributeRename || attributeName,
           maxNumber: maxNumber || persetMaxNumber,
           id: deviceId,
+          valueSize: valueSize || persetValueSize || 20,
+          fontSize: fontSize || persetFontSize || 14,
         } as PercentType;
       }),
     };
@@ -112,14 +120,17 @@
       class="mt-2 flex flex-col ml-3 mr-3 items-stretch"
     >
       <div class="flex justify-between">
-        <div class="text-gray-500 text-sm truncate" :style="{ color: item.fontColor }">
+        <div
+          class="text-gray-500 text-sm truncate"
+          :style="{ color: item.fontColor, fontSize: item.fontSize + 'px' }"
+        >
           {{
             `${item.deviceName}
             -
             ${item.attributeName || item.attribute || '温度'}`
           }}
         </div>
-        <span class="text-lg" :style="{ color: item.fontColor }"
+        <span class="text-lg" :style="{ color: item.fontColor, fontSize: item.valueSize + 'px' }"
           >{{ item.value }} {{ item.unit }}</span
         >
       </div>

@@ -16,6 +16,8 @@ export const option: PublicPresetOptions = {
   [ComponentConfigFieldEnum.ICON_COLOR]: '#367bff',
   [ComponentConfigFieldEnum.FONT_COLOR]: '#000',
   [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
+  [ComponentConfigFieldEnum.VALUE_SIZE]: 20,
+  [ComponentConfigFieldEnum.FONT_SIZE]: 14,
 };
 
 export default class Config extends PublicConfigClass implements CreateComponentType {

@@ -23,6 +23,41 @@
           placeholder: '请输入数值单位',
         },
       },
+
+      {
+        field: ComponentConfigFieldEnum.VALUE_SIZE,
+        label: '数值字体大小',
+        component: 'InputNumber',
+        defaultValue: 20,
+        componentProps: {
+          min: 0,
+          formatter: (e) => {
+            const value = e.replace(/^0/g, '');
+            if (value) {
+              return value.replace(/^0/g, '');
+            } else {
+              return 0;
+            }
+          },
+        },
+      },
+      {
+        field: ComponentConfigFieldEnum.FONT_SIZE,
+        label: '文本字体大小',
+        component: 'InputNumber',
+        defaultValue: 14,
+        componentProps: {
+          min: 0,
+          formatter: (e) => {
+            const value = e.replace(/^0/g, '');
+            if (value) {
+              return value.replace(/^0/g, '');
+            } else {
+              return 0;
+            }
+          },
+        },
+      },
       {
         field: ComponentConfigFieldEnum.ICON_COLOR,
         label: '图标颜色',

@@ -9,6 +9,7 @@
   import { useReceiveValue } from '../../../hook/useReceiveValue';
   import { useMultipleDataFetch } from '../../../hook/socket/useSocket';
   import { MultipleDataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
+  import { useComponentScale } from '../../../hook/useComponentScale';
 
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;
@@ -24,10 +25,12 @@
       fontColor: persetFontColor,
       icon: persetIcon,
       iconColor: persetIconColor,
+      valueSize: persetValueSize,
+      fontSize: persetFontSize,
     } = persetOption || {};
     return {
       dataSource: dataSource.map((item) => {
-        const { fontColor, icon, iconColor, unit } = item.componentInfo;
+        const { fontColor, icon, iconColor, unit, valueSize, fontSize } = item.componentInfo;
         const { attribute, attributeRename, deviceName, deviceRename, deviceId, attributeName } =
           item;
 
@@ -40,6 +43,8 @@
           deviceName: deviceRename || deviceName,
           attributeName: attributeRename || attributeName,
           id: deviceId,
+          valueSize: valueSize || persetValueSize || 20,
+          fontSize: fontSize || persetFontSize || 14,
         };
       }),
     };
@@ -84,6 +89,7 @@
   };
 
   useMultipleDataFetch(props, updateFn);
+  const { getRatio } = useComponentScale(props);
 </script>
 
 <template>
@@ -99,19 +105,21 @@
         <SvgIcon
           :name="item.icon!"
           prefix="iconfont"
-          :size="40"
+          :size="getRatio ? 25 * getRatio : 25"
           :style="{ color: item.iconColor }"
         />
 
-        <div class="text-gray-500 text-lg truncate ml-6">{{
-          item.deviceName + '-' + item.attributeName || '温度'
-        }}</div>
+        <div
+          class="text-gray-500 text-sm truncate ml-6"
+          :style="{ fontSize: item.fontSize + 'px' }"
+          >{{ item.deviceName + '-' + item.attributeName || '温度' }}</div
+        >
       </div>
 
-      <h1 class="font-bold text-xl m-2 truncate" :style="{ color: item.fontColor }">
+      <span class="text-lg" :style="{ color: item.fontColor, fontSize: item.valueSize + 'px' }">
         <span> {{ item.value || 0 }}</span>
         <span>{{ item.unit }} </span>
-      </h1>
+      </span>
     </div>
     <!-- <UpdateTime :time="time" /> -->
   </main>

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

 export enum ComponentConfigFieldEnum {
-  FONT_COLOR = 'fontColor',
+  FONT_COLOR = 'fontColor', //数值字体颜色
+  VALUE_SIZE = 'valueSize', //数值字体大小
+  TEXT_COLOR = 'textColor', //文本字体颜色
+  FONT_SIZE = 'fontSize', //文本数值颜色
   UNIT = 'unit',
   POINTER_COLOR = 'pointerColor',
   INSTRUMENT_PANEL_COLOR = 'instrumentPanelColor',

@@ -102,7 +102,7 @@ class Subscriber {
       return {
         cmdId: subscriptionId,
         entityId: deviceId,
-        keys: Array.from(attributes.values()).join(','),
+        keys: Array.from(attributes.values()).filter(Boolean).join(','),
         entityType: EntityTypeEnum.DEVICE,
         scope: ScopeTypeEnum.LATEST_TELEMERY,
         ...(unsubscribe ? { unsubscribe } : {}),

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

@@ -54,7 +54,7 @@
     },
     labelWidth: 120,
     fieldMapToTime: [
-      [SchemaFiled.DATE_RANGE, [SchemaFiled.START_TS, SchemaFiled.END_TS], 'YYYY-MM-DD HH:ss'],
+      [SchemaFiled.DATE_RANGE, [SchemaFiled.START_TS, SchemaFiled.END_TS], 'YYYY-MM-DD HH:mm:ss'],
     ],
     submitButtonOptions: {
       loading: loading as unknown as boolean,
@@ -260,7 +260,7 @@
     :show-ok-btn="false"
     cancel-text="关闭"
     width="70%"
-    title="历史趋势"
+    title="选择时间"
   >
     <section
       class="flex flex-col p-4 h-full w-full min-w-7/10"

@@ -152,8 +152,10 @@
   <section class="p-5 flex flex-col w-full">
     <main class="flex w-full h-full h-7">
       <Tooltip :title="sourceInfo.name">
-        <div class="flex-1 w-full h-full flex text-lg justify-center font-semibold">
-          {{ sourceInfo.name }}
+        <div class="flex-1 w-full h-full flex text-lg justify-center font-semibold truncate">
+          <div class="w-full truncate text-center">
+            {{ sourceInfo.name }}
+          </div>
         </div>
       </Tooltip>
 

@@ -28,6 +28,7 @@ export interface DataSource {
   componentInfo: ComponentInfo;
   customCommand: CustomCommand;
   videoConfig?: VideoConfigType;
+  [key: string]: any;
 }
 
 export interface ExtraDataSource extends DataSource, PublicComponentOptions {
@@ -62,6 +63,8 @@ export interface ComponentInfo {
   progressBarCircle?: Boolean;
   lineColor?: string;
   maxNumber?: number;
+  fontSize?: string | number;
+  valueSize?: string | number;
   [key: string]: any;
 }
 
@@ -71,6 +74,7 @@ export interface CustomCommand {
   command: string;
   service: string;
   callType: string;
+  [key: string]: string | undefined;
 }
 
 export interface ComponentLayoutType {