Merge remote-tracking branch 'origin/ww'

# Conflicts:
#	.env.development

@@ -84,6 +84,7 @@
     "@types/inquirer": "^7.3.3",
     "@types/intro.js": "^3.0.2",
     "@types/jest": "^27.0.1",
+    "@types/jsoneditor": "^9.9.0",
     "@types/lodash-es": "^4.17.4",
     "@types/mockjs": "^1.0.4",
     "@types/node": "^16.6.1",

+import { DeviceRecord } from '../device/model/deviceModel';
 import {
   AddDataBoardParams,
   AddDataComponentParams,
@@ -183,7 +184,7 @@ export const getAllDeviceByOrg = (organizationId: string, deviceProfileId?: stri
  * @returns
  */
 export const getMeetTheConditionsDevice = (params: GetMeetTheConditionsDeviceParams) => {
-  return defHttp.get({
+  return defHttp.get<DeviceRecord[]>({
     url: DeviceUrl.GET_DEVICE,
     params,
   });

@@ -40,6 +40,11 @@ enum DeviceManagerApi {
   DEVICE_PUBLIC = '/customer/public/device',
 
   DEVICE_PRIVATE = '/customer/device',
+
+  /**
+   * @description 通过设备列表获取设备信息
+   */
+  QUERY_DEVICES = '/device/get/devices',
 }
 
 export const devicePage = (params: DeviceQueryParam) => {
@@ -330,3 +335,10 @@ export const privateDevice = (tbDeviceId: string) => {
     { joinPrefix: false }
   );
 };
+
+export const getDevicesByDeviceIds = (ids: string[]) => {
+  return defHttp.post<Record<'data', DeviceModel[]>>({
+    url: DeviceManagerApi.QUERY_DEVICES,
+    data: ids,
+  });
+};

+import {
+  CreateTaskRecordType,
+  GenModbusCommandType,
+  GetTaskListParamsType,
+  ImmediateExecuteTaskType,
+  TaskRecordType,
+} from './model';
+import { PaginationResult } from '/#/axios';
+import { defHttp } from '/@/utils/http/axios';
+
+enum Api {
+  TASK_LIST = '/task_center',
+  ADD_TASK = '/task_center/add',
+  UPDATE_STATE = '/task_center',
+  DELETE_TASK = '/task_center',
+  UPDATE_TASK = '/task_center/update',
+  CANCEL_TASK = '/task_center',
+
+  GEN_MODBUS_COMMAND = '/js/modbus',
+
+  IMMEDIATE_EXECUTE = '/task_center/immediate/execute',
+}
+
+export const getTaskCenterList = (params: GetTaskListParamsType) => {
+  return defHttp.get<PaginationResult<TaskRecordType>>({
+    url: Api.TASK_LIST,
+    params,
+  });
+};
+
+export const createTask = (data: CreateTaskRecordType) => {
+  return defHttp.post({
+    url: Api.ADD_TASK,
+    data,
+  });
+};
+
+export const updateState = (id: string, state: number) => {
+  return defHttp.put({
+    url: `${Api.UPDATE_STATE}/${id}/update/${state}`,
+  });
+};
+
+export const deleteTask = (ids: string[]) => {
+  return defHttp.delete({
+    url: Api.DELETE_TASK,
+    data: { ids },
+  });
+};
+
+export const updateTask = (data: CreateTaskRecordType & Record<'id', string>) => {
+  return defHttp.put({
+    url: Api.UPDATE_TASK,
+    data,
+  });
+};
+
+/**
+ * @description 取消任务
+ * @param data
+ * @returns
+ */
+export const cancelTask = (
+  data: Record<'id' | 'tbDeviceId', string> & Record<'allow', boolean>
+) => {
+  return defHttp.put({
+    url: `${Api.CANCEL_TASK}/${data.id}/update/${data.tbDeviceId}/${data.allow}`,
+  });
+};
+
+/**
+ * @description 生成modbus指令
+ * @param data
+ * @returns {string}
+ */
+export const genModbusCommand = (data: GenModbusCommandType) => {
+  return defHttp.post<string>({
+    url: Api.GEN_MODBUS_COMMAND,
+    data,
+  });
+};
+
+export const immediateExecute = (data: ImmediateExecuteTaskType) => {
+  return defHttp.post<Record<'data', boolean>>(
+    {
+      url: Api.IMMEDIATE_EXECUTE,
+      params: data,
+    },
+    { joinParamsToUrl: true }
+  );
+};

+import { TaskTargetEnum } from '/@/views/task/center/config';
+import {
+  ExecuteTimeTypeEnum,
+  PeriodTypeEnum,
+  PushWayEnum,
+} from '/@/views/task/center/components/DetailModal/config';
+import { TaskTypeEnum } from '/@/views/task/center/config';
+
+export interface GetTaskListParamsType {
+  page: number;
+  pageSize: number;
+  state?: string;
+  tbDeviceId?: string;
+}
+
+export interface CreateTaskRecordType {
+  name: string;
+  targetType: TaskTargetEnum;
+  executeTarget: {
+    organizationId?: string;
+    deviceProfileId?: string;
+    deviceType?: string;
+    cancelExecuteDevices?: string[];
+    data?: string[];
+  };
+  executeContent: {
+    pushContent: {
+      rpcCommand: string | Recordable;
+    };
+    pushWay: PushWayEnum;
+    type: TaskTypeEnum;
+  };
+  executeTime: {
+    cron: string;
+    type: ExecuteTimeTypeEnum;
+    periodType: PeriodTypeEnum;
+    period: string;
+    time: string;
+    pollUnit: string;
+  };
+}
+
+export interface TaskRecordType extends CreateTaskRecordType {
+  id: string;
+  createTime: string;
+  creator: string;
+  enabled: boolean;
+  state: number;
+  lastExecuteTime?: number;
+  tkDeviceTaskCenter?: {
+    allowState: number;
+    taskCenterId: string;
+    tbDeviceId: string;
+  };
+}
+
+export interface GenModbusCommandType {
+  crc: string;
+  deviceCode: string;
+  method: string;
+  registerAddr: string;
+  registerNum?: number;
+  registerValues?: number[];
+}
+
+export interface ImmediateExecuteTaskType {
+  executeTarget: TaskTargetEnum;
+  id: string;
+  cronExpression: string;
+  targetIds: string[];
+  name: string;
+}

@@ -2,6 +2,7 @@ import { withInstall } from '/@/utils';
 // @ts-ignore
 import codeEditor from './src/CodeEditor.vue';
 import jsonPreview from './src/json-preview/JsonPreview.vue';
+export { JSONEditor } from './src/JSONEditor';
 
 export const CodeEditor = withInstall(codeEditor);
 export const JsonPreview = withInstall(jsonPreview);

+import { Rule } from '/@/components/Form';
+
+export { default as JSONEditor } from './index.vue';
+
+export const parseStringToJSON = <T = Recordable>(value: string) => {
+  try {
+    const json = JSON.parse(value) as T;
+    return { json, valid: true };
+  } catch (error) {
+    return { json: null, valid: false };
+  }
+};
+
+export const JSONEditorValidator = (message = 'json格式校验失败'): Rule[] => {
+  return [
+    {
+      validateTrigger: 'blur',
+      validator(_rule: Rule, value: any, _callback: Fn) {
+        const { valid } = parseStringToJSON(value);
+        if (valid) {
+          return Promise.resolve();
+        }
+        return Promise.reject(message);
+      },
+    },
+  ];
+};

+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import JSONEditor, { JSONEditorOptions } from 'jsoneditor';
+  import 'jsoneditor/dist/jsoneditor.min.css';
+  import { unref } from 'vue';
+  import { onMounted } from 'vue';
+  import { computed } from '@vue/reactivity';
+  import { onUnmounted } from 'vue';
+
+  enum EventEnum {
+    UPDATE_VALUE = 'update:value',
+    CHANGE = 'change',
+    BLUR = 'blur',
+    FOCUS = 'focus',
+  }
+
+  const props = withDefaults(
+    defineProps<{
+      value?: string;
+      options?: JSONEditorOptions;
+    }>(),
+    {
+      options: () =>
+        ({
+          mode: 'code',
+          mainMenuBar: false,
+          statusBar: false,
+        } as JSONEditorOptions),
+    }
+  );
+
+  const emit = defineEmits<{
+    (e: EventEnum.UPDATE_VALUE, value: any, instance?: JSONEditor): void;
+    (e: EventEnum.CHANGE, value: any, instance?: JSONEditor): void;
+    (e: EventEnum.BLUR, event: Event, instance?: JSONEditor): void;
+    (e: EventEnum.FOCUS, event: Event, instance?: JSONEditor): void;
+  }>();
+
+  const jsonEditorElRef = ref<Nullable<any>>();
+
+  const editoreRef = ref<JSONEditor>();
+
+  const handleChange = (value: any) => {
+    emit(EventEnum.UPDATE_VALUE, value, unref(editoreRef));
+    emit(EventEnum.CHANGE, value, unref(editoreRef));
+  };
+
+  const handleEmit = (event: Event, key: EventEnum) => {
+    emit(key as EventEnum[keyof EventEnum], event, unref(editoreRef));
+  };
+
+  const getOptions = computed(() => {
+    const { options } = props;
+    return {
+      ...options,
+      onChangeText: handleChange,
+      onBlur: (event: Event) => handleEmit(event, EventEnum.BLUR),
+      onFocus: (event: Event) => handleEmit(event, EventEnum.FOCUS),
+    } as JSONEditorOptions;
+  });
+
+  const initialize = () => {
+    editoreRef.value = new JSONEditor(unref(jsonEditorElRef), unref(getOptions));
+  };
+
+  // watch(
+  //   () => props.value,
+  //   (target) => {
+  //     unref(editoreRef)?.setText(target || '');
+  //   },
+  //   {
+  //     immediate: true,
+  //   }
+  // );
+
+  const get = (): string => {
+    return unref(editoreRef)?.getText() || '';
+  };
+
+  const set = (data: any) => {
+    return unref(editoreRef)?.set(data);
+  };
+
+  onMounted(() => {
+    initialize();
+    unref(editoreRef)?.setText(props.value || '');
+  });
+
+  onUnmounted(() => {
+    unref(editoreRef)?.destroy();
+  });
+
+  defineExpose({
+    get,
+    set,
+  });
+</script>
+
+<template>
+  <div class="p-2 bg-gray-200">
+    <div ref="jsonEditorElRef" class="jsoneditor"></div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+  .jsoneditor {
+    border: none !important;
+
+    :deep(.jsoneditor) {
+      border: none !important;
+    }
+  }
+</style>

@@ -122,4 +122,9 @@ export type ComponentType =
   | 'ApiSelectScrollLoad'
   | 'TransferModal'
   | 'TransferTableModal'
-  | 'ObjectModelValidateForm';
+  | 'ObjectModelValidateForm'
+  | 'DevicePicker'
+  | 'ProductPicker'
+  | 'PollCommandInput'
+  | 'RegisterAddressInput'
+  | 'ControlGroup';

+export enum DictEnum {
+  // 从机地址
+  SLAVE_ADDRESS = 'slave_address',
+  // 功能码
+  FUNCTION_CODE = 'function_code',
+  // 数据校验
+  DATA_VALIDATE = 'data_validate',
+  // 设备类型
+  DEVICE_TYPE = 'device_type',
+}

+export enum DataActionModeEnum {
+  CREATE = 'CREATE',
+  READ = 'READ',
+  UPDATE = 'UPDATE',
+  DELETE = 'DELETE',
+}
+
+export enum TimeUnitEnum {
+  SECOND = 'SECOND',
+  MINUTE = 'MINUTE',
+  HOUR = 'HOUR',
+}
+
+export enum TimeUnitNameEnum {
+  SECOND = '秒',
+  MINUTE = '分',
+  HOUR = '时',
+}

+export const createPickerSearch = (searchValue = false) => {
+  return {
+    showSearch: true,
+    filterOption: (inputValue: string, option: Record<'label' | 'value', string>) => {
+      let { label, value } = option;
+      label = label.toLowerCase();
+      value = value.toLowerCase();
+      inputValue = inputValue.toLowerCase();
+      return label.includes(inputValue) || (searchValue && value.includes(inputValue));
+    },
+  };
+};

@@ -51,6 +51,9 @@
       <TabPane key="eventManage" tab="事件管理">
         <EventManage :tbDeviceId="deviceDetail.tbDeviceId" />
       </TabPane>
+      <TabPane key="task" tab="任务">
+        <Task :tbDeviceId="deviceDetail.tbDeviceId" />
+      </TabPane>
     </Tabs>
   </BasicDrawer>
 </template>
@@ -71,6 +74,7 @@
   import ModelOfMatter from '../tabs/ModelOfMatter.vue';
   import EventManage from '../tabs/EventManage/index.vue';
   import { DeviceRecord } from '/@/api/device/model/deviceModel';
+  import Task from '../tabs/Task.vue';
 
   export default defineComponent({
     name: 'DeviceModal',
@@ -88,6 +92,7 @@
       ModelOfMatter,
       CommandRecord,
       EventManage,
+      Task,
     },
     emits: ['reload', 'register', 'openTbDeviceDetail', 'openGatewayDeviceDetail'],
     setup(_props, { emit }) {

+<script lang="ts" setup>
+  import { ReloadOutlined } from '@ant-design/icons-vue';
+  import { Button, List, Tooltip } from 'ant-design-vue';
+  import { TaskCard } from '/@/views/task/center/components/TaskCard';
+  import { reactive, ref, unref } from 'vue';
+  import { PageWrapper } from '/@/components/Page';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { formSchemas } from '/@/views/task/center/config';
+  import { getTaskCenterList } from '/@/api/task';
+  import { onMounted } from 'vue';
+  import { getBoundingClientRect } from '/@/utils/domUtils';
+  import { TaskRecordType } from '/@/api/task/model';
+
+  const props = defineProps<{
+    tbDeviceId: string;
+  }>();
+
+  const listElRef = ref<Nullable<ComponentElRef>>(null);
+
+  const [registerForm, { getFieldsValue }] = useForm({
+    schemas: formSchemas,
+    baseColProps: { span: 8 },
+    compact: true,
+    showAdvancedButton: true,
+    labelWidth: 100,
+    submitFunc: async () => {
+      pagination.params = getFieldsValue();
+      getDataSource();
+    },
+  });
+
+  const pagination = reactive({
+    total: 10,
+    current: 1,
+    pageSize: 10,
+    showQuickJumper: true,
+    size: 'small',
+    showTotal: (total: number) => `共 ${total} 条数据`,
+    params: {} as Recordable,
+  });
+
+  const dataSource = ref<TaskRecordType[]>([]);
+  const loading = ref(false);
+
+  const getDataSource = async () => {
+    try {
+      loading.value = true;
+      const { items } = await getTaskCenterList({
+        page: pagination.current,
+        pageSize: pagination.pageSize,
+        tbDeviceId: props.tbDeviceId,
+        ...pagination.params,
+      });
+      dataSource.value = items;
+    } catch (error) {
+      throw error;
+    } finally {
+      loading.value = false;
+    }
+  };
+
+  const reload = () => getDataSource();
+
+  const setListHeight = () => {
+    const clientHeight = document.documentElement.clientHeight;
+    const rect = getBoundingClientRect(unref(listElRef)!.$el!) as DOMRect;
+    // margin-top 24 height 24
+    const paginationHeight = 24 + 24 + 8;
+    // list pading top 8 maring-top 8 extra slot 56
+    const listContainerMarginBottom = 8 + 8 + 72;
+    const listContainerHeight =
+      clientHeight - rect.top - paginationHeight - listContainerMarginBottom;
+    const listContainerEl = (unref(listElRef)!.$el as HTMLElement).querySelector(
+      '.ant-spin-container'
+    ) as HTMLElement;
+    listContainerEl &&
+      (listContainerEl.style.height = listContainerHeight + 'px') &&
+      (listContainerEl.style.overflowY = 'auto') &&
+      (listContainerEl.style.overflowX = 'hidden');
+  };
+
+  onMounted(() => {
+    setListHeight();
+    getDataSource();
+  });
+</script>
+
+<template>
+  <PageWrapper class="bg-gray-100 device-task-list-container">
+    <section
+      class="form-container bg-light-50 px-4 pt-4 mt-4 x dark:text-gray-300 dark:bg-dark-900"
+    >
+      <BasicForm @register="registerForm" />
+    </section>
+    <section class="bg-light-50 my-4 p-4 x dark:text-gray-300 dark:bg-dark-900">
+      <List
+        ref="listElRef"
+        :dataSource="dataSource"
+        :pagination="pagination"
+        :grid="{ gutter: 16, xs: 1, sm: 1, md: 1, lg: 2, xl: 2, xxl: 3, column: 3 }"
+        :loading="loading"
+      >
+        <template #header>
+          <section class="flex justify-between gap-4 min-h-12 items-center">
+            <div class="text-lg font-semibold">
+              <span>任务列表</span>
+            </div>
+            <Tooltip title="刷新">
+              <Button type="primary" @click="getDataSource">
+                <ReloadOutlined :spin="loading" />
+              </Button>
+            </Tooltip>
+          </section>
+        </template>
+        <template #renderItem="{ item }">
+          <List.Item :key="item.id">
+            <TaskCard
+              :record="item"
+              :reload="reload"
+              :tbDeviceId="tbDeviceId"
+              :deviceTaskCardMode="true"
+            />
+          </List.Item>
+        </template>
+      </List>
+    </section>
+  </PageWrapper>
+</template>
+
+<style lang="less" scoped>
+  .device-task-list-container {
+    :deep(.ant-list-header) {
+      border: none;
+    }
+
+    :deep(.ant-card-body) {
+      padding: 16px 24px;
+    }
+  }
+</style>

@@ -9,6 +9,14 @@ export enum EJobGroup {
   DEFAULT = 'DEFAULT',
   SYSTEM = 'SYSTEM',
   REPORT = 'REPORT',
+  TASK_CENTER = 'TASK_CENTER',
+}
+
+export enum EJobGroupName {
+  DEFAULT = '默认',
+  SYSTEM = '系统',
+  REPORT = '报表',
+  TASK_CENTER = '任务中心',
 }
 
 //任务详细配置
@@ -16,12 +24,8 @@ export const personSchema: DescItem[] = [
   {
     field: 'jobGroup',
     label: '任务分组：',
-    render: (_, data) => {
-      return data.jobGroup == EJobGroup.DEFAULT
-        ? '默认'
-        : data.jobGroup == EJobGroup.SYSTEM
-        ? '系统'
-        : '报表';
+    render: (value: EJobGroup) => {
+      return EJobGroupName[value];
     },
   },
   {
@@ -108,8 +112,8 @@ export const columnSchedue: BasicColumn[] = [
       const status = record.status;
       const success = status === 1;
       const color = success ? 'green' : 'red';
-      const successText: string = '成功';
-      const failedText: string = '失败';
+      const successText = '成功';
+      const failedText = '失败';
       const text = success ? successText : failedText;
       return h(Tag, { color: color }, () => text);
     },

 import { BasicColumn, FormSchema } from '/@/components/Table';
 import type { FormSchema as QFormSchema } from '/@/components/Form/index';
 import { JCronValidator } from '/@/components/Form';
-import { EJobGroup } from './config.data';
+import { EJobGroup, EJobGroupName } from './config.data';
 
 // 定时任务表格配置
 export const columnSchedue: BasicColumn[] = [
@@ -14,12 +14,8 @@ export const columnSchedue: BasicColumn[] = [
     title: '任务组名',
     dataIndex: 'jobGroup',
     width: 120,
-    format: (_text: string, record: Recordable) => {
-      return record.jobGroup === EJobGroup.DEFAULT
-        ? '默认'
-        : record.jobGroup === EJobGroup.SYSTEM
-        ? '系统'
-        : '报表';
+    format: (text: string) => {
+      return EJobGroupName[text];
     },
   },
   {
@@ -113,6 +109,7 @@ export const formSchema: QFormSchema[] = [
     field: 'jobGroup',
     component: 'Select',
     label: '任务分组',
+    dynamicDisabled: true,
     colProps: {
       span: 24,
     },
@@ -120,17 +117,21 @@ export const formSchema: QFormSchema[] = [
       placeholder: '请选择任务分组',
       options: [
         {
-          label: '默认',
+          label: EJobGroupName.DEFAULT,
           value: EJobGroup.DEFAULT,
         },
         {
-          label: '系统',
+          label: EJobGroupName.SYSTEM,
           value: EJobGroup.SYSTEM,
         },
         {
-          label: '报表',
+          label: EJobGroupName.REPORT,
           value: EJobGroup.REPORT,
         },
+        {
+          label: EJobGroupName.TASK_CENTER,
+          value: EJobGroup.TASK_CENTER,
+        },
       ],
     },
   },
@@ -153,6 +154,7 @@ export const formSchema: QFormSchema[] = [
     label: 'Cron表达式',
     component: 'JEasyCron',
     defaultValue: '* * * * * ? *',
+    dynamicDisabled: true,
     colProps: {
       span: 24,
     },

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

+<script lang="ts" setup>
+  import { BasicForm, FormSchema, useForm } from '/@/components/Form';
+  import { ComponentType, ColEx } from '/@/components/Form/src/types/index';
+  import { computed } from '@vue/reactivity';
+  import { isFunction } from '/@/utils/is';
+  import { unref } from 'vue';
+  import { watch } from 'vue';
+  import { nextTick } from 'vue';
+  import { ref } from 'vue';
+  import { onMounted } from 'vue';
+
+  interface ValueItemType {
+    value: any;
+  }
+
+  enum FormFieldsEnum {
+    TOTAL_CONTROL = 'totalControl',
+  }
+
+  enum EmitEventEnum {
+    UPDATE_VALUE = 'update:value',
+  }
+
+  const emit = defineEmits<{
+    (event: EmitEventEnum.UPDATE_VALUE, value: ValueItemType[]): void;
+  }>();
+
+  const props = withDefaults(
+    defineProps<{
+      value: ValueItemType[];
+      length?: number;
+      component?: ComponentType;
+      itemColProps?: Partial<ColEx>;
+      itemLabel?: (index: number) => string;
+      itemProps?: (index: number) => FormSchema;
+      showTotalControl?: boolean;
+      totalControlProps?: FormSchema;
+    }>(),
+    {
+      value: () => [],
+      length: 0,
+      component: 'Switch',
+      itemLabel: (index: number) => `#${index}`,
+      itemProps: () => ({} as unknown as FormSchema),
+      itemColProps: () => ({ span: 12 } as Partial<ColEx>),
+      showTotalControl: true,
+      totalControlProps: () => ({} as unknown as FormSchema),
+    }
+  );
+
+  const getProps = computed(() => {
+    return props;
+  });
+
+  const batchSetValue = (value: any): ValueItemType[] => {
+    const { length } = unref(getProps);
+    return Array.from({ length }, () => ({ value }));
+  };
+
+  const getTotalControlItem = computed(() => {
+    const { totalControlProps, component, showTotalControl } = unref(getProps);
+    return {
+      ...totalControlProps,
+      field: FormFieldsEnum.TOTAL_CONTROL,
+      component,
+      ifShow: showTotalControl,
+      componentProps: {
+        onChange(value: any) {
+          handleUpdateValue(batchSetValue(value));
+        },
+      },
+    } as FormSchema;
+  });
+
+  const getSchemas = computed(() => {
+    const { itemProps, itemLabel, length, component } = unref(getProps);
+    let label = isFunction(itemLabel) ? itemLabel : (index: number) => `#${index}`;
+    let _itemProps = isFunction(itemProps) ? itemProps : () => ({});
+    const schemas = Array.from(
+      { length },
+      (_item, index) =>
+        ({
+          ..._itemProps(index),
+          label: label(index),
+          field: index.toString(),
+          component,
+          componentProps: {
+            onChange: async () => {
+              await nextTick();
+              handleUpdateValue();
+            },
+          },
+        } as FormSchema)
+    );
+
+    length && schemas.unshift(unref(getTotalControlItem));
+
+    return schemas;
+  });
+
+  const [registerForm, { getFieldsValue, setProps, setFieldsValue }] = useForm({
+    showActionButtonGroup: false,
+    schemas: unref(getSchemas),
+    // baseColProps,
+    baseColProps: props.itemColProps,
+  });
+
+  const handleUpdateValue = (value?: ValueItemType[]) => {
+    if (value) {
+      emit(EmitEventEnum.UPDATE_VALUE, value);
+      return;
+    }
+    const allValue = getFieldsValue();
+    const sortKeyList = Array.from({ length: unref(getProps).length }, (_v, key) => key);
+    const res = sortKeyList.map((item) => ({ value: allValue[item] } as ValueItemType));
+
+    emit(EmitEventEnum.UPDATE_VALUE, res);
+  };
+
+  const transformValue = (value: ValueItemType[]) => {
+    const { length } = unref(getProps);
+    if (value.length !== length) {
+      value = Array.from(
+        { length: unref(getProps).length },
+        () => ({ value: null } as ValueItemType)
+      );
+    }
+    return value.reduce((prev, next, index) => ({ ...prev, [index]: next.value }), {});
+  };
+
+  const initialized = ref(false);
+
+  watch(
+    () => props.value,
+    async (target) => {
+      if (target) {
+        let flag = unref(initialized);
+        if (!flag) {
+          await nextTick();
+        }
+        const value = transformValue(target);
+        setFieldsValue(value);
+
+        if (!flag) {
+          handleUpdateValue();
+        }
+      }
+    },
+    {
+      immediate: true,
+    }
+  );
+
+  watch(
+    () => [props.length, props.component],
+    (target) => {
+      if (target !== undefined || target !== null) {
+        setProps({
+          schemas: unref(getSchemas),
+        });
+        handleUpdateValue();
+      }
+    }
+  );
+
+  onMounted(() => {
+    initialized.value = true;
+  });
+</script>
+
+<template>
+  <BasicForm class="control-group-form" @register="registerForm" />
+</template>
+
+<style lang="less" scoped>
+  .control-group-form {
+    :deep(.ant-form-item-label) {
+      font-weight: 700;
+    }
+  }
+</style>

+import { TaskTargetEnum, TaskTargetNameEnum, TaskTypeEnum, TaskTypeNameEnum } from '../../config';
+import { findDictItemByCode } from '/@/api/system/dict';
+import { FormSchema, useComponentRegister } from '/@/components/Form';
+import {
+  DevicePicker,
+  validateDevicePicker,
+  FormFieldsEnum as DeviceCascadePickerFieldsEnum,
+} from '../DevicePicker';
+import { PollCommandInput, ModeEnum } from '../PollCommandInput';
+import { DeviceProfileModel } from '/@/api/device/model/deviceModel';
+import { TransportTypeEnum } from '/@/views/device/profiles/components/TransportDescript/const';
+import { JSONEditorValidator } from '/@/components/CodeEditor/src/JSONEditor';
+import { TimeUnitEnum, TimeUnitNameEnum } from '/@/enums/toolEnum';
+import { dateUtil } from '/@/utils/dateUtil';
+import { ProductPicker, validateProductPicker } from '../ProductPicker';
+
+useComponentRegister('DevicePicker', DevicePicker);
+useComponentRegister('ProductPicker', ProductPicker);
+useComponentRegister('PollCommandInput', PollCommandInput);
+
+export enum FormFieldsEnum {
+  // 任务名称
+  NAME = 'name',
+  // 目标类型
+  TARGET_TYPE = 'targetType',
+  // 设备类型选择
+  DEVICE_PROFILE = 'deviceProfile',
+  // 执行目标源
+  EXECUTE_TARGET_DATA = 'executeTargetData',
+  // 执行任务类型
+  EXECUTE_CONTENT_TYPE = 'executeContentType',
+  // 下发命令
+  RPC_COMMAND = 'rpcCommand',
+  // 推送方式
+  PUSH_WAY = 'pushWay',
+  // 执行周期类型
+  EXECUTE_TIME_TYPE = 'executeTimeType',
+  // 执行间隔时间
+  EXECUTE_TIME_INTERVAL = 'interval',
+  // 执行周期类型
+  EXECUTE_TIME_PERIOD_TYPE = 'periodType',
+  // 周期 每月 每周
+  EXECUTE_TIME_PERIOD = 'period',
+  // time时间
+  TIME = 'time',
+  // 设备传输协议
+  TRANSPORT_TYPE = 'transportType',
+  // 间隔时间单位
+  POLL_UNIT = 'pollUnit',
+}
+
+export enum PushWayEnum {
+  MQTT = 'MQTT',
+  TCP = 'TCP',
+}
+
+export enum ExecuteTimeTypeEnum {
+  CUSTOM = 'CUSTOM',
+  POLL = 'POLL',
+}
+
+export enum ExecuteTimeTypeNameEnum {
+  CUSTOM = '自定义',
+  POLL = '间隔时间重复',
+}
+
+export enum PeriodTypeEnum {
+  MONTH = 'MONTH',
+  WEEK = 'WEEK',
+  DAY = 'DAY',
+}
+
+export enum PeriodTypeNameEnum {
+  MONTH = '每月',
+  WEEK = '每周',
+  DAY = '每日',
+}
+
+const isShowCustomIntervalTimeSetting = (model: Recordable, flag: PeriodTypeEnum) => {
+  return (
+    model[FormFieldsEnum.EXECUTE_TIME_TYPE] === ExecuteTimeTypeEnum.CUSTOM &&
+    model[FormFieldsEnum.EXECUTE_TIME_PERIOD_TYPE] === flag
+  );
+};
+
+export const formSchemas: FormSchema[] = [
+  {
+    field: FormFieldsEnum.NAME,
+    component: 'Input',
+    label: '任务名称',
+    rules: [{ required: true, message: '请填写任务名称' }],
+    componentProps: {
+      placeholder: '请输入任务名称',
+    },
+  },
+  {
+    field: FormFieldsEnum.TARGET_TYPE,
+    component: 'RadioGroup',
+    label: '目标类型',
+    defaultValue: TaskTargetEnum.DEVICES,
+    helpMessage: ['执行任务的目标设备，可以是多个指定的设备，也可以是一个设备类型下的所有设备.'],
+    componentProps: {
+      options: [
+        { label: TaskTargetNameEnum.DEVICES, value: TaskTargetEnum.DEVICES },
+        { label: TaskTargetNameEnum.PRODUCTS, value: TaskTargetEnum.PRODUCTS },
+      ],
+    },
+  },
+  {
+    field: FormFieldsEnum.DEVICE_PROFILE,
+    component: 'ProductPicker',
+    label: '产品',
+    ifShow: ({ model }) => model[FormFieldsEnum.TARGET_TYPE] === TaskTargetEnum.PRODUCTS,
+    valueField: 'value',
+    changeEvent: 'update:value',
+    rules: [validateProductPicker()],
+    helpMessage: ['任务可以对目标产品按预设的时间策略执行任务。'],
+    componentProps: ({ formActionType }) => {
+      const { setFieldsValue } = formActionType;
+      return {
+        onChange(key: string, _value: string | string[], option: DeviceProfileModel) {
+          if (key === DeviceCascadePickerFieldsEnum.DEVICE_PROFILE) {
+            const isTCP = (option || {}).transportType === TransportTypeEnum.TCP;
+            setFieldsValue({
+              [FormFieldsEnum.TRANSPORT_TYPE]: _value ? option.transportType : null,
+              [FormFieldsEnum.PUSH_WAY]: isTCP ? PushWayEnum.TCP : PushWayEnum.MQTT,
+              ...(isTCP ? {} : { [FormFieldsEnum.EXECUTE_CONTENT_TYPE]: TaskTypeEnum.CUSTOM }),
+            });
+          }
+        },
+        getPopupContainer: () => document.body,
+      };
+    },
+  },
+  {
+    field: FormFieldsEnum.EXECUTE_TARGET_DATA,
+    component: 'DevicePicker',
+    label: '设备',
+    helpMessage: ['任务可以对目标设备按预设的时间策略执行任务。'],
+    ifShow: ({ model }) => model[FormFieldsEnum.TARGET_TYPE] === TaskTargetEnum.DEVICES,
+    rules: [validateDevicePicker()],
+    valueField: 'value',
+    changeEvent: 'update:value',
+    componentProps: ({ formActionType }) => {
+      const { setFieldsValue } = formActionType;
+      return {
+        multiple: true,
+        onChange(key: string, _value: string | string[], option: DeviceProfileModel) {
+          if (key === DeviceCascadePickerFieldsEnum.DEVICE_PROFILE) {
+            const isTCP = (option || {}).transportType === TransportTypeEnum.TCP;
+            setFieldsValue({
+              [FormFieldsEnum.TRANSPORT_TYPE]: _value ? option.transportType : null,
+              [FormFieldsEnum.PUSH_WAY]: isTCP ? PushWayEnum.TCP : PushWayEnum.MQTT,
+              ...(isTCP ? {} : { [FormFieldsEnum.EXECUTE_CONTENT_TYPE]: TaskTypeEnum.CUSTOM }),
+            });
+          }
+        },
+      };
+    },
+  },
+  {
+    field: FormFieldsEnum.TRANSPORT_TYPE,
+    component: 'Input',
+    label: '',
+    show: false,
+  },
+  {
+    field: FormFieldsEnum.EXECUTE_CONTENT_TYPE,
+    component: 'RadioGroup',
+    label: '任务类型',
+    defaultValue: TaskTypeEnum.CUSTOM,
+    componentProps: ({ formActionType, formModel }) => {
+      const { setFieldsValue } = formActionType;
+      const transportType = Reflect.get(formModel, FormFieldsEnum.TRANSPORT_TYPE);
+      return {
+        options: [
+          {
+            label: TaskTypeNameEnum.CUSTOM,
+            value: TaskTypeEnum.CUSTOM,
+          },
+          {
+            label: TaskTypeNameEnum.MODBUS_RTU,
+            value: TaskTypeEnum.MODBUS_RTU,
+            disabled: transportType && transportType !== PushWayEnum.TCP,
+          },
+        ],
+        onChange(value: TaskTypeEnum) {
+          value &&
+            setFieldsValue({
+              [FormFieldsEnum.RPC_COMMAND]: '',
+            });
+        },
+      };
+    },
+  },
+  {
+    field: FormFieldsEnum.PUSH_WAY,
+    component: 'RadioGroup',
+    label: '推送方式',
+    defaultValue: PushWayEnum.TCP,
+    show: false,
+    componentProps: {
+      options: [
+        { label: PushWayEnum.MQTT, value: PushWayEnum.MQTT },
+        { label: PushWayEnum.TCP, value: PushWayEnum.TCP },
+      ],
+    },
+  },
+  {
+    field: FormFieldsEnum.RPC_COMMAND,
+    component: 'PollCommandInput',
+    label: '自定义数据流',
+    rules: [{ required: true, message: '请输入自定义数据流' }],
+    dynamicRules: ({ model }) =>
+      model[FormFieldsEnum.PUSH_WAY] === PushWayEnum.MQTT ? JSONEditorValidator() : [],
+    ifShow: ({ model }) => model[FormFieldsEnum.EXECUTE_CONTENT_TYPE] === TaskTypeEnum.CUSTOM,
+    valueField: 'value',
+    changeEvent: 'update:value',
+    componentProps: ({ formModel }) => {
+      const pushMode = Reflect.get(formModel, FormFieldsEnum.PUSH_WAY);
+      return {
+        inputProps: {
+          placeholder: '请输入自定义数据流',
+        },
+        mode: pushMode === PushWayEnum.MQTT ? ModeEnum.JSON : ModeEnum.NORMAL,
+      };
+    },
+  },
+  {
+    field: FormFieldsEnum.RPC_COMMAND,
+    component: 'PollCommandInput',
+    label: 'ModbusRTU轮询',
+    rules: [{ required: true, message: '请输入Modbus RTU 轮询指令' }],
+    ifShow: ({ model }) => model[FormFieldsEnum.EXECUTE_CONTENT_TYPE] === TaskTypeEnum.MODBUS_RTU,
+    valueField: 'value',
+    changeEvent: 'update:value',
+    componentProps: () => {
+      return {
+        inputProps: {
+          placeholder: '请输入Modbus RTU 轮询指令',
+        },
+        showSettingAddonAfter: false,
+        openSettingOnInputFocus: true,
+        mode: ModeEnum.NORMAL,
+      };
+    },
+  },
+  {
+    field: FormFieldsEnum.EXECUTE_TIME_TYPE,
+    label: '任务定时设置',
+    component: 'RadioGroup',
+    defaultValue: ExecuteTimeTypeEnum.POLL,
+    componentProps: {
+      options: [
+        { label: ExecuteTimeTypeNameEnum.POLL, value: ExecuteTimeTypeEnum.POLL },
+        { label: ExecuteTimeTypeNameEnum.CUSTOM, value: ExecuteTimeTypeEnum.CUSTOM },
+      ],
+    },
+  },
+  {
+    field: FormFieldsEnum.EXECUTE_TIME_PERIOD_TYPE,
+    component: 'Select',
+    label: '周期',
+    required: true,
+    defaultValue: PeriodTypeEnum.MONTH,
+    componentProps: {
+      placeholder: '请选择周期',
+      options: [
+        { label: PeriodTypeNameEnum.DAY, value: PeriodTypeEnum.DAY },
+        { label: PeriodTypeNameEnum.WEEK, value: PeriodTypeEnum.WEEK },
+        { label: PeriodTypeNameEnum.MONTH, value: PeriodTypeEnum.MONTH },
+      ],
+      getPopupContainer: () => document.body,
+    },
+    ifShow: ({ model }) => model[FormFieldsEnum.EXECUTE_TIME_TYPE] === ExecuteTimeTypeEnum.CUSTOM,
+  },
+  {
+    field: FormFieldsEnum.EXECUTE_TIME_PERIOD,
+    component: 'ApiSelect',
+    label: '每月',
+    required: true,
+    componentProps: {
+      placeholder: '请选择月份',
+      api: findDictItemByCode,
+      params: {
+        dictCode: 'every_month',
+      },
+      labelField: 'itemText',
+      valueField: 'itemValue',
+      getPopupContainer: () => document.body,
+    },
+    ifShow: ({ model }) => isShowCustomIntervalTimeSetting(model, PeriodTypeEnum.MONTH),
+  },
+  {
+    field: FormFieldsEnum.EXECUTE_TIME_PERIOD,
+    component: 'ApiSelect',
+    label: '每周',
+    required: true,
+    componentProps: {
+      placeholder: '请选择周期',
+      api: findDictItemByCode,
+      params: {
+        dictCode: 'every_week',
+      },
+      labelField: 'itemText',
+      valueField: 'itemValue',
+      getPopupContainer: () => document.body,
+    },
+    ifShow: ({ model }) => isShowCustomIntervalTimeSetting(model, PeriodTypeEnum.WEEK),
+  },
+  {
+    field: FormFieldsEnum.TIME,
+    component: 'TimePicker',
+    label: '时间',
+    required: true,
+    ifShow: ({ model }) => model[FormFieldsEnum.EXECUTE_TIME_TYPE] === ExecuteTimeTypeEnum.CUSTOM,
+    componentProps: {
+      getPopupContainer: () => document.body,
+      valueFormat: 'HH:mm:ss',
+      defaultOpenValue: dateUtil('00:00:00', 'HH:mm:ss'),
+    },
+  },
+  {
+    field: FormFieldsEnum.POLL_UNIT,
+    component: 'RadioGroup',
+    label: '时间单位',
+    ifShow: ({ model }) => model[FormFieldsEnum.EXECUTE_TIME_TYPE] === ExecuteTimeTypeEnum.POLL,
+    defaultValue: TimeUnitEnum.SECOND,
+    componentProps: {
+      options: [
+        { label: TimeUnitNameEnum.SECOND, value: TimeUnitEnum.SECOND },
+        { label: TimeUnitNameEnum.MINUTE, value: TimeUnitEnum.MINUTE },
+        { label: TimeUnitNameEnum.HOUR, value: TimeUnitEnum.HOUR },
+      ],
+    },
+  },
+  {
+    field: FormFieldsEnum.EXECUTE_TIME_INTERVAL,
+    label: '间隔时间',
+    component: 'InputNumber',
+    ifShow: ({ model }) => model[FormFieldsEnum.EXECUTE_TIME_TYPE] === ExecuteTimeTypeEnum.POLL,
+    componentProps: ({ formModel }) => {
+      const unit = formModel[FormFieldsEnum.POLL_UNIT];
+      return {
+        min: 0,
+        max: unit === TimeUnitEnum.HOUR ? 23 : 59,
+        step: 1,
+        placeholder: '请输入间隔时间',
+      };
+    },
+  },
+];

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

+<script lang="ts" setup>
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { formSchemas } from './config';
+  import { ref } from 'vue';
+  import { composeData, parseData } from './util';
+  import { createTask, updateTask } from '/@/api/task';
+  import { ModalParamsType } from '/#/utils';
+  import { DataActionModeEnum } from '/@/enums/toolEnum';
+  import { TaskRecordType } from '/@/api/task/model';
+  import { FormValueType } from './util';
+  import { unref } from 'vue';
+
+  const props = defineProps<{
+    reload: Fn;
+  }>();
+  defineEmits(['register']);
+
+  const formMode = ref(DataActionModeEnum.CREATE);
+
+  const dataSource = ref<TaskRecordType>();
+  const [registerModal, { closeModal }] = useModalInner(
+    (
+      { record, mode }: ModalParamsType<TaskRecordType> = {
+        record: {} as unknown as TaskRecordType,
+        mode: DataActionModeEnum.CREATE,
+      }
+    ) => {
+      dataSource.value = record;
+      formMode.value = mode;
+      resetFields();
+      if (record && mode === DataActionModeEnum.UPDATE) {
+        const res = parseData(record);
+        setFieldsValue({ ...res });
+      }
+    }
+  );
+
+  const [registerForm, { getFieldsValue, validate, setFieldsValue, resetFields }] = useForm({
+    schemas: formSchemas,
+    showActionButtonGroup: false,
+    layout: 'inline',
+    baseColProps: { span: 24 },
+    labelWidth: 140,
+  });
+
+  const loading = ref(false);
+  const handleOk = async () => {
+    try {
+      loading.value = true;
+      await validate();
+      const res = getFieldsValue();
+      const _res = composeData(res as Required<FormValueType>);
+      formMode.value === DataActionModeEnum.CREATE
+        ? await createTask(_res)
+        : await updateTask({ ..._res, id: unref(dataSource)?.id as string });
+      closeModal();
+      props.reload?.();
+    } catch (error) {
+      throw error;
+    } finally {
+      loading.value = false;
+    }
+  };
+</script>
+
+<template>
+  <BasicModal
+    @register="registerModal"
+    title="创建任务"
+    width="700px"
+    :okButtonProps="{ loading }"
+    @ok="handleOk"
+  >
+    <BasicForm @register="registerForm" class="form-container" />
+  </BasicModal>
+</template>
+
+<style lang="less" scoped>
+  .form-container {
+    :deep(.ant-input-number) {
+      width: 100%;
+    }
+  }
+</style>

+import CronParser, { CronFields, HourRange, SixtyRange } from 'cron-parser';
+import { dateUtil } from '/@/utils/dateUtil';
+import { ExecuteTimeTypeEnum, FormFieldsEnum, PushWayEnum } from './config';
+import { CreateTaskRecordType, TaskRecordType } from '/@/api/task/model';
+import { DeviceCascadePickerValueType } from '../DevicePicker';
+import { TaskTargetEnum } from '../../config';
+import { TimeUnitEnum } from '/@/enums/toolEnum';
+import { ProductCascadePickerValueType } from '../ProductPicker';
+
+export interface FormValueType extends Partial<Record<FormFieldsEnum, any>> {
+  [FormFieldsEnum.EXECUTE_TARGET_DATA]: DeviceCascadePickerValueType;
+  [FormFieldsEnum.DEVICE_PROFILE]: ProductCascadePickerValueType;
+}
+
+type CanWrite<T> = {
+  -readonly [K in keyof T]: T[K];
+};
+
+interface GenCronExpressionResultType {
+  effective: boolean;
+  expression?: string;
+}
+
+export const usePluginGenCronExpression = (
+  time: string,
+  expression = '* * * * * * *',
+  includesYear = true
+): GenCronExpressionResultType => {
+  try {
+    const separator = ' ';
+    const removeYear = expression.split(separator).slice(0, 6).join(separator);
+
+    const date = dateUtil(time, 'HH:mm:ss');
+
+    const second = date.get('second') as SixtyRange;
+    const minute = date.get('minute') as SixtyRange;
+    const hour = date.get('hour') as HourRange;
+
+    const result = CronParser.parseExpression(removeYear, { utc: true, nthDayOfWeek: 4 });
+    const fields = JSON.parse(JSON.stringify(result.fields)) as CanWrite<CronFields>;
+    fields.second = [second];
+    fields.minute = [minute];
+    fields.hour = [hour];
+
+    // console.log(CronParser.fieldsToExpression(CronParser.parseExpression('').fields).stringify());
+
+    let newExpression = CronParser.fieldsToExpression(fields).stringify(true);
+    newExpression = includesYear ? `${newExpression} *` : newExpression;
+    return { effective: true, expression: newExpression };
+  } catch (error) {
+    // throw error;
+    return { effective: false };
+  }
+};
+
+export const genCronExpression = (
+  time: string,
+  expression = '* * * * * * *'
+): GenCronExpressionResultType => {
+  try {
+    const separator = ' ';
+    const list: (string | number)[] = expression.split(separator);
+
+    const date = dateUtil(time, 'HH:mm:ss');
+
+    const second = date.get('second') as SixtyRange;
+    const minute = date.get('minute') as SixtyRange;
+    const hour = date.get('hour') as HourRange;
+
+    list[0] = second;
+    list[1] = minute;
+    list[2] = hour;
+
+    return { effective: true, expression: list.join(separator) };
+  } catch (error) {
+    // throw error;
+    return { effective: false };
+  }
+};
+
+export const composeData = (result: Required<FormValueType>): CreateTaskRecordType => {
+  const {
+    name,
+    targetType,
+    rpcCommand,
+    pushWay,
+    executeContentType,
+    executeTargetData,
+    deviceProfile,
+    executeTimeType,
+    period,
+    periodType,
+    time,
+    interval,
+    pollUnit,
+  } = result;
+
+  const { organizationId, deviceType, deviceId, deviceProfileId } = executeTargetData || {};
+
+  const {
+    organizationId: productOrg,
+    deviceProfileId: productId,
+    deviceType: productDeviceType,
+  } = deviceProfile || {};
+
+  const { expression } = genCronExpression(time, period);
+
+  const cron =
+    executeTimeType === ExecuteTimeTypeEnum.POLL ? `0/${interval} * * * * ? *` : expression!;
+
+  return {
+    name,
+    targetType,
+    executeContent: {
+      pushContent: {
+        rpcCommand: pushWay === PushWayEnum.MQTT ? JSON.parse(rpcCommand) : rpcCommand,
+      },
+      pushWay,
+      type: executeContentType,
+    },
+    executeTarget: {
+      data: targetType === TaskTargetEnum.PRODUCTS ? [productId] : (deviceId as string[]),
+      deviceType: targetType === TaskTargetEnum.PRODUCTS ? productDeviceType : deviceType,
+      organizationId: targetType === TaskTargetEnum.PRODUCTS ? productOrg : organizationId,
+      deviceProfileId: targetType === TaskTargetEnum.PRODUCTS ? productId : deviceProfileId,
+    },
+    executeTime: {
+      type: executeTimeType,
+      periodType,
+      period,
+      time: executeTimeType === ExecuteTimeTypeEnum.POLL ? interval : time,
+      cron,
+      pollUnit,
+    },
+  };
+};
+
+export const parseData = (result: TaskRecordType): Required<FormValueType> => {
+  const { name, targetType, executeContent, executeTarget, executeTime } = result;
+  const { pushContent: { rpcCommand } = {}, pushWay, type: executeContentType } = executeContent;
+  const { data, deviceProfileId, deviceType, organizationId } = executeTarget as Required<
+    TaskRecordType['executeTarget']
+  >;
+  const { type: executeTimeType, period, periodType, time, pollUnit } = executeTime;
+  return {
+    name,
+    targetType,
+    rpcCommand: pushWay === PushWayEnum.MQTT ? JSON.stringify(rpcCommand, null, 2) : rpcCommand,
+    transportType: pushWay,
+    pushWay,
+    executeContentType,
+    executeTargetData: {
+      deviceId: targetType === TaskTargetEnum.DEVICES ? data : [],
+      deviceProfileId,
+      deviceType,
+      organizationId,
+    },
+    deviceProfile:
+      targetType === TaskTargetEnum.PRODUCTS
+        ? {
+            deviceProfileId: data[0],
+            deviceType,
+            organizationId,
+          }
+        : ({} as unknown as ProductCascadePickerValueType),
+    executeTimeType,
+    period,
+    periodType: executeTimeType === ExecuteTimeTypeEnum.CUSTOM ? periodType : null,
+    time: executeTimeType === ExecuteTimeTypeEnum.CUSTOM ? time : null,
+    interval: executeTimeType === ExecuteTimeTypeEnum.POLL ? time : null,
+    pollUnit: executeTimeType === ExecuteTimeTypeEnum.POLL ? pollUnit : TimeUnitEnum.SECOND,
+  };
+};

+export { default as DevicePicker } from './index.vue';
+export { validateDevicePicker } from './utils';
+
+export enum FormFieldsEnum {
+  DEVICE_TYPE = 'deviceType',
+  DEVICE_PROFILE = 'deviceProfileId',
+  ORGANIZATION = 'organizationId',
+  DEVICE = 'deviceId',
+}
+
+export interface DeviceCascadePickerValueType
+  extends Record<Exclude<FormFieldsEnum, FormFieldsEnum.DEVICE>, string> {
+  [FormFieldsEnum.DEVICE]: string | string[];
+}

+<script lang="ts" setup>
+  import { h } from 'vue';
+  import { getMeetTheConditionsDevice } from '/@/api/dataBoard';
+  import { getOrganizationList } from '/@/api/system/system';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { copyTransFun } from '/@/utils/fnUtils';
+  import { Tooltip } from 'ant-design-vue';
+  import { watch } from 'vue';
+  import { nextTick } from 'vue';
+  import { getDeviceProfile } from '/@/api/alarm/position';
+  import { findDictItemByCode } from '/@/api/system/dict';
+  import { DictEnum } from '/@/enums/dictEnum';
+  import { FormFieldsEnum } from '.';
+  import { isObject } from '/@/utils/is';
+  import { createPickerSearch } from '/@/utils/pickerSearch';
+
+  const props = withDefaults(
+    defineProps<{
+      value?: Recordable;
+      multiple?: boolean;
+      max?: 3;
+    }>(),
+    {
+      value: () => ({}),
+      multiple: false,
+    }
+  );
+
+  const emit = defineEmits(['update:value', 'change']);
+
+  const handleChange = (key: string, value: string | string[], option: Recordable) => {
+    emit('change', key, value, option);
+  };
+
+  // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
+  const createMaxTagPlaceholder = (omittedValues: Record<'label' | 'value', string>[]) => {
+    return h(
+      Tooltip,
+      {},
+      {
+        default: () => h('span', `+${omittedValues.length}...`),
+        title: () => h('span', 'other'),
+      }
+    );
+  };
+
+  const handleEmit = async (key: string, value: string | string[], option: Recordable) => {
+    await nextTick();
+    let _value = getFieldsValue();
+    _value = {
+      ..._value,
+
+      ...(key === FormFieldsEnum.DEVICE_TYPE
+        ? {
+            [FormFieldsEnum.DEVICE_PROFILE]: null,
+            [FormFieldsEnum.ORGANIZATION]: null,
+            [FormFieldsEnum.DEVICE]: props.multiple ? [] : null,
+          }
+        : {}),
+
+      ...(key === FormFieldsEnum.DEVICE_PROFILE
+        ? {
+            [FormFieldsEnum.ORGANIZATION]: null,
+            [FormFieldsEnum.DEVICE]: props.multiple ? [] : null,
+          }
+        : {}),
+
+      ...(key === FormFieldsEnum.ORGANIZATION
+        ? {
+            [FormFieldsEnum.DEVICE]: props.multiple ? [] : null,
+          }
+        : {}),
+    };
+    handleChange(key, value, option);
+    emit('update:value', { ..._value });
+  };
+  const [register, { setFieldsValue, getFieldsValue, resetFields }] = useForm({
+    schemas: [
+      {
+        field: FormFieldsEnum.DEVICE_TYPE,
+        component: 'ApiSelect',
+        label: '',
+        componentProps: () => {
+          return {
+            api: findDictItemByCode,
+            params: {
+              dictCode: DictEnum.DEVICE_TYPE,
+            },
+            labelField: 'itemText',
+            valueField: 'itemValue',
+            placeholder: '请选择设备类型',
+            onChange(value: string, option: Recordable) {
+              handleEmit(FormFieldsEnum.DEVICE_TYPE, value, option);
+            },
+            getPopupContainer: () => document.body,
+            ...createPickerSearch(),
+          };
+        },
+      },
+      {
+        field: FormFieldsEnum.DEVICE_PROFILE,
+        component: 'ApiSelect',
+        label: '',
+        componentProps: ({ formModel }) => {
+          const deviceType = Reflect.get(formModel, FormFieldsEnum.DEVICE_TYPE);
+          return {
+            api: async () => {
+              try {
+                return await getDeviceProfile(deviceType);
+              } catch (error) {
+                return [];
+              }
+            },
+            placeholder: '请选择产品',
+            labelField: 'name',
+            valueField: 'id',
+            onChange(value: string, options: Recordable) {
+              handleEmit(FormFieldsEnum.DEVICE_PROFILE, value, options);
+            },
+            getPopupContainer: () => document.body,
+            ...createPickerSearch(),
+          };
+        },
+      },
+      {
+        field: FormFieldsEnum.ORGANIZATION,
+        component: 'ApiTreeSelect',
+        label: '',
+        componentProps: () => {
+          return {
+            api: async () => {
+              try {
+                const data = await getOrganizationList();
+                copyTransFun(data as any);
+                return data;
+              } catch (error) {
+                console.log(error);
+                return [];
+              }
+            },
+            placeholder: '请选择组织',
+            labelField: 'name',
+            valueField: 'id',
+            childField: 'children',
+            onChange(value: string, option: Recordable) {
+              handleEmit(FormFieldsEnum.ORGANIZATION, value, option);
+            },
+            getPopupContainer: () => document.body,
+          };
+        },
+      },
+      {
+        field: FormFieldsEnum.DEVICE,
+        label: '',
+        component: 'ApiSelect',
+        componentProps: ({ formModel }) => {
+          const deviceType = Reflect.get(formModel, FormFieldsEnum.DEVICE_TYPE);
+          const deviceProfileId = Reflect.get(formModel, FormFieldsEnum.DEVICE_PROFILE);
+          const organizationId = Reflect.get(formModel, FormFieldsEnum.ORGANIZATION);
+          return {
+            api: async () => {
+              try {
+                if (!organizationId) return [];
+                return await getMeetTheConditionsDevice({
+                  deviceProfileId,
+                  deviceType,
+                  organizationId,
+                });
+              } catch (error) {
+                return [];
+              }
+            },
+            mode: props.multiple ? 'multiple' : 'combobox',
+            labelField: 'name',
+            valueField: 'tbDeviceId',
+            placeholder: '请选择设备',
+            maxTagCount: 3,
+            maxTagTextLength: 4,
+            onChange(value: string, option: Recordable) {
+              handleEmit(FormFieldsEnum.DEVICE, value, option);
+            },
+            getPopupContainer: () => document.body,
+            ...createPickerSearch(),
+          };
+        },
+      },
+    ],
+    showActionButtonGroup: false,
+    layout: 'inline',
+    baseColProps: { span: 6 },
+  });
+
+  const setValue = async () => {
+    await nextTick();
+    if (!props.value || (isObject(props.value) && !Object.values(props.value).length)) {
+      resetFields();
+      return;
+    }
+    setFieldsValue(props.value);
+  };
+
+  watch(
+    () => props.value,
+    () => {
+      setValue();
+    },
+    {
+      immediate: true,
+    }
+  );
+</script>
+
+<template>
+  <BasicForm @register="register" class="device-picker" />
+</template>
+
+<style lang="less" scoped>
+  .device-picker {
+    :deep(.ant-row) {
+      width: 100%;
+    }
+
+    :deep(.ant-form-item-control-input-content) {
+      div > div {
+        width: 100%;
+      }
+    }
+  }
+</style>

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

+<script lang="ts" setup>
+  import { Button, Spin } from 'ant-design-vue';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { BasicModal, useModal } from '/@/components/Modal';
+  import { formSchemas } from './config';
+  import { ref } from 'vue';
+  import { unref } from 'vue';
+  import { composeModbusModalData } from './util';
+  import { ModbusCommandValueType } from './type';
+  import { genModbusCommand } from '/@/api/task';
+
+  const emit = defineEmits(['update:value']);
+
+  const [registerModal] = useModal();
+
+  const [registerForm, { getFieldsValue }] = useForm({
+    schemas: formSchemas,
+    showActionButtonGroup: false,
+    rowProps: { gutter: 10 },
+    baseColProps: { span: 12 },
+  });
+
+  const commandValue = ref('');
+
+  const loading = ref(false);
+  const handleGetValue = async () => {
+    try {
+      const value = getFieldsValue();
+      const record = composeModbusModalData(value as ModbusCommandValueType);
+      loading.value = true;
+      const result = await genModbusCommand(record);
+      console.log(result);
+      commandValue.value = result;
+    } catch (error) {
+    } finally {
+      loading.value = false;
+    }
+  };
+
+  const formatCommand = (command: string, subNumber: number) => {
+    const list = command.split('');
+    let index = 0;
+    const arr: string[][] = [];
+    while (index <= list.length) {
+      arr.push(list.slice(index, (index += subNumber)));
+    }
+    return arr.reduce((prev, next) => `${prev} ${next.join('')}`, '');
+  };
+
+  const handleOk = () => {
+    emit('update:value', unref(commandValue));
+  };
+</script>
+
+<template>
+  <BasicModal
+    @register="registerModal"
+    :okButtonProps="{ loading }"
+    title="配置操作"
+    @ok="handleOk"
+  >
+    <BasicForm @register="registerForm" class="create-tcp-command-form" />
+    <section>
+      <Button @click="handleGetValue" type="link" class="!px-0">生成预览</Button>
+      <div>
+        <div class="text-gray-400">Modbus 指令预览</div>
+        <Spin :spinning="loading" size="small">
+          <div class="bg-dark-50 text-light-50 p-1 w-full block mt-1 min-h-8">{{
+            formatCommand(commandValue, 2)
+          }}</div>
+        </Spin>
+      </div>
+    </section>
+  </BasicModal>
+</template>
+
+<style lang="less" scoped>
+  .create-tcp-command-form {
+    :deep(.ant-input-number) {
+      width: 100%;
+      min-width: 0;
+    }
+  }
+</style>

+<script lang="ts" setup>
+  import { InputGroup, InputNumber, Select, Input } from 'ant-design-vue';
+  import { unref } from 'vue';
+  import { computed } from 'vue';
+  import { ref } from 'vue';
+
+  enum AddressTypeEnum {
+    DEC = 'DEC',
+    HEX = 'HEX',
+  }
+
+  const emit = defineEmits(['update:value']);
+
+  const DEC_MAX_VALUE = parseInt('0xffff', 16);
+
+  withDefaults(
+    defineProps<{
+      value?: number | string;
+      inputProps?: Recordable;
+    }>(),
+    {
+      value: 0,
+      inputProps: () => ({}),
+    }
+  );
+
+  const addressTypeOptions = [
+    { label: AddressTypeEnum.DEC, value: AddressTypeEnum.DEC },
+    { label: AddressTypeEnum.HEX, value: AddressTypeEnum.HEX },
+  ];
+
+  const type = ref(AddressTypeEnum.DEC);
+
+  const inputValue = ref<number | string>(0);
+
+  const getHexValue = computed(() => {
+    return parseInt(unref(inputValue) || 0, 16);
+  });
+
+  const getDecValue = computed(() => {
+    let formatValue = Number(unref(inputValue) || 0).toString(16);
+    formatValue = `0x${formatValue.padStart(4, '0')}`;
+    return (inputValue.value as number) > DEC_MAX_VALUE ? '0x0000' : formatValue;
+  });
+
+  const toDEC = (value: number | string) => {
+    return unref(type) === AddressTypeEnum.DEC
+      ? isNaN(value as number)
+        ? 0
+        : Number(value)
+      : parseInt(value, 16);
+  };
+
+  const handleEmit = () => {
+    const syncValue = toDEC(unref(inputValue));
+    emit('update:value', syncValue);
+  };
+
+  const handleChange = (value: AddressTypeEnum) => {
+    const syncValue = value === AddressTypeEnum.DEC ? unref(getHexValue) : unref(getDecValue);
+    inputValue.value = syncValue;
+    emit('update:value', toDEC(syncValue));
+  };
+</script>
+
+<template>
+  <InputGroup compact class="!flex">
+    <Select
+      v-model:value="type"
+      :options="addressTypeOptions"
+      @change="handleChange"
+      class="bg-gray-200 max-w-20"
+    />
+    <InputNumber
+      v-if="type === AddressTypeEnum.DEC"
+      v-model:value="inputValue"
+      :step="1"
+      class="flex-1"
+      v-bind="inputProps"
+      @change="handleEmit"
+    />
+    <Input v-if="type === AddressTypeEnum.HEX" v-model:value="inputValue" @change="handleEmit" />
+    <div class="text-center h-8 leading-8 px-2 bg-gray-200 cursor-pointer rounded-1 w-20">
+      <div v-if="type === AddressTypeEnum.DEC">{{ getDecValue }}</div>
+      <div v-if="type === AddressTypeEnum.HEX">{{ getHexValue }}</div>
+    </div>
+  </InputGroup>
+</template>

+import { findDictItemByCode } from '/@/api/system/dict';
+import { FormSchema, useComponentRegister } from '/@/components/Form';
+import { DictEnum } from '/@/enums/dictEnum';
+import RegisterAddressInput from './RegisterAddressInput.vue';
+import { createPickerSearch } from '/@/utils/pickerSearch';
+import { ControlGroup } from '../ControlGroup';
+
+export enum FormFieldsEnum {
+  // 设备地址码
+  DEVICE_CODE = 'deviceCode',
+  // 功能码
+  METHOD = 'method',
+  // 寄存器地址
+  REGISTER_ADDR = 'registerAddr',
+  // 数据校验算法
+  CRC = 'crc',
+  // 线圈个数
+  COIL_NUMBER = 'coilNumber',
+  // 寄存器个数
+  REGISTER_NUMBER = 'registerNumber',
+  // 线圈值
+  COIL_VALUE = 'coilValue',
+  // 寄存器值
+  REGISTER_VALUE = 'registerValue',
+  // 线圈组值
+  COIL_VALUES = 'coilValues',
+  // 寄存器组值
+  REGISTER_VALUES = 'registerValues',
+}
+
+useComponentRegister('RegisterAddressInput', RegisterAddressInput);
+useComponentRegister('ControlGroup', ControlGroup);
+
+export enum FunctionCodeEnum {
+  // 读取线圈状态01
+  READ_COIL_STATE_01 = '01',
+  // 读取输入状态02
+  READ_INPUT_STATE_02 = '02',
+  // 读取保持寄存器
+  READ_KEEP_REGISTER_03 = '03',
+  // 读取输入寄存器
+  READ_INPUT_REGISTER_04 = '04',
+  // 写入耽搁线圈寄存器
+  WRITE_SINGLE_COIL_REGISTER_05 = '05',
+  // 写入单个保持寄存器
+  WRITE_SINGLE_KEEP_COIL_REGISTER_06 = '06',
+  // 写入多个线圈状态
+  WRITE_MULTIPLE_COIL_STATE_15 = '15',
+  // 写入多个保持寄存器
+  WRITE_MULTIPLE_KEEP_REGISTER_16 = '16',
+}
+
+export enum CRCValidTypeEnum {
+  CRC_32_HIGH = 'CRC_32_HIGH',
+  CRC_32_LOWER = 'CRC_32_LOWER',
+  AND_TOTAL_XOR = 'AND_TOTAL_XOR',
+  TOTAL_AND_SUM = 'TOTAL_AND_SUM',
+  CRC_8 = 'CRC_8',
+  CRC_16_HIGH = 'CRC_16_HIGH',
+  CRC_16_LOWER = 'CRC_16_LOWER',
+}
+
+export const showCoilNumber = (value: FunctionCodeEnum) =>
+  [
+    FunctionCodeEnum.READ_COIL_STATE_01,
+    FunctionCodeEnum.READ_INPUT_STATE_02,
+    FunctionCodeEnum.WRITE_MULTIPLE_COIL_STATE_15,
+  ].includes(value);
+
+export const showRegisterNumber = (value: FunctionCodeEnum) =>
+  [
+    FunctionCodeEnum.READ_KEEP_REGISTER_03,
+    FunctionCodeEnum.READ_INPUT_REGISTER_04,
+    FunctionCodeEnum.WRITE_MULTIPLE_KEEP_REGISTER_16,
+  ].includes(value);
+
+export const showCoilValue = (value: FunctionCodeEnum) =>
+  [FunctionCodeEnum.WRITE_SINGLE_COIL_REGISTER_05].includes(value);
+
+export const showRegisterValue = (value: FunctionCodeEnum) =>
+  [FunctionCodeEnum.WRITE_SINGLE_KEEP_COIL_REGISTER_06].includes(value);
+
+export const isWriteCoilGroup = (value: FunctionCodeEnum) =>
+  [FunctionCodeEnum.WRITE_MULTIPLE_COIL_STATE_15].includes(value);
+
+export const isWriteRegisterGroup = (value: FunctionCodeEnum) =>
+  [FunctionCodeEnum.WRITE_MULTIPLE_KEEP_REGISTER_16].includes(value);
+
+export const formSchemas: FormSchema[] = [
+  {
+    field: FormFieldsEnum.DEVICE_CODE,
+    component: 'ApiSelect',
+    label: '从机地址',
+    rules: [{ required: true, message: '请选择从机地址' }],
+    defaultValue: '01',
+    componentProps: () => {
+      return {
+        api: async (params: Recordable) => {
+          try {
+            const result = await findDictItemByCode(params);
+            return result.map((item, index) => ({
+              ...item,
+              itemText: `${index + 1} - ${item.itemText}`,
+            }));
+          } catch (error) {
+            return [];
+          }
+        },
+        params: {
+          dictCode: DictEnum.SLAVE_ADDRESS,
+        },
+        labelField: 'itemText',
+        valueField: 'itemValue',
+        ...createPickerSearch(),
+        getPopupContainer: () => document.body,
+      };
+    },
+  },
+  {
+    field: FormFieldsEnum.METHOD,
+    component: 'ApiSelect',
+    label: '功能码',
+    defaultValue: '01',
+    rules: [{ required: true, message: '请选择功能码' }],
+    componentProps: () => {
+      return {
+        api: findDictItemByCode,
+        params: {
+          dictCode: DictEnum.FUNCTION_CODE,
+        },
+        labelField: 'itemText',
+        valueField: 'itemValue',
+        getPopupContainer: () => document.body,
+      };
+    },
+  },
+  {
+    field: FormFieldsEnum.REGISTER_ADDR,
+    label: '起始寄存器地址',
+    component: 'RegisterAddressInput',
+    valueField: 'value',
+    changeEvent: 'update:value',
+    defaultValue: 0,
+  },
+  {
+    field: FormFieldsEnum.REGISTER_NUMBER,
+    label: '寄存器个数',
+    component: 'InputNumber',
+    ifShow: ({ model }) => showRegisterNumber(model[FormFieldsEnum.METHOD]),
+    defaultValue: 1,
+    rules: [{ required: true, message: '请输入寄存器个数' }],
+    componentProps: {
+      min: 1,
+      max: 64,
+      step: 1,
+      placeholder: '请输入寄存器个数',
+    },
+  },
+  {
+    field: FormFieldsEnum.COIL_NUMBER,
+    label: '线圈个数',
+    component: 'InputNumber',
+    ifShow: ({ model }) => showCoilNumber(model[FormFieldsEnum.METHOD]),
+    defaultValue: 1,
+    rules: [{ required: true, message: '请输入线圈个数' }],
+    componentProps: {
+      min: 1,
+      max: 64,
+      step: 1,
+      placeholder: '请输入线圈个数',
+    },
+  },
+  {
+    field: FormFieldsEnum.COIL_VALUE,
+    label: '线圈值',
+    component: 'RegisterAddressInput',
+    valueField: 'value',
+    changeEvent: 'update:value',
+    ifShow: ({ model }) => showCoilValue(model[FormFieldsEnum.METHOD]),
+    defaultValue: '0',
+    rules: [{ required: true, message: '请输入线圈值' }],
+    componentProps: {
+      placeholder: '请输入线圈值',
+    },
+  },
+  {
+    field: FormFieldsEnum.REGISTER_VALUE,
+    label: '寄存器值',
+    component: 'RegisterAddressInput',
+    valueField: 'value',
+    changeEvent: 'update:value',
+    ifShow: ({ model }) => showRegisterValue(model[FormFieldsEnum.METHOD]),
+    defaultValue: '0',
+    rules: [{ required: true, message: '请输入寄存器值' }],
+    componentProps: {
+      placeholder: '请输入寄存器值',
+    },
+  },
+  {
+    field: FormFieldsEnum.REGISTER_VALUES,
+    label: '',
+    component: 'ControlGroup',
+    colProps: { span: 24 },
+    valueField: 'value',
+    changeEvent: 'update:value',
+    ifShow: ({ model }) => isWriteRegisterGroup(model[FormFieldsEnum.METHOD]),
+    componentProps: ({ formModel }) => {
+      const length = formModel[FormFieldsEnum.REGISTER_NUMBER];
+      return {
+        length: length || 1,
+        itemColProps: { span: 12, style: { paddingRight: '10px' } },
+        component: 'RegisterAddressInput',
+        itemLabel: (index: number) => `#${index} 寄存器值`,
+        showTotalControl: false,
+        itemProps: () => {
+          return {
+            defaultValue: '0',
+          } as FormSchema;
+        },
+      };
+    },
+  },
+  {
+    field: FormFieldsEnum.COIL_VALUES,
+    label: '',
+    component: 'ControlGroup',
+    colProps: { span: 24 },
+    valueField: 'value',
+    changeEvent: 'update:value',
+    ifShow: ({ model }) => isWriteCoilGroup(model[FormFieldsEnum.METHOD]),
+    componentProps: ({ formModel }) => {
+      const length = formModel[FormFieldsEnum.COIL_NUMBER];
+      return {
+        length: length || 1,
+        itemColProps: { span: 6 },
+        itemLabel: (index: number) => `#${index} 线圈状态值`,
+        itemProps: (index: number) => {
+          return {
+            defaultValue: 0,
+            helpMessage: [`设置从起始地址偏移 ${index} 位的线圈开关量状态。`],
+          } as FormSchema;
+        },
+        totalControlProps: {
+          label: '全开或全关',
+          helpMessage: ['将以下所有线圈的开关量状态全部置为 1 或 0,实现一键全开或全关.'],
+          colProps: { span: 24 },
+        } as FormSchema,
+      };
+    },
+  },
+  {
+    field: FormFieldsEnum.CRC,
+    label: '数据校验',
+    component: 'ApiSelect',
+    colProps: { span: 24 },
+    rules: [{ required: true, message: '请选择数据校验方式' }],
+    defaultValue: CRCValidTypeEnum.CRC_16_LOWER,
+    componentProps: () => {
+      return {
+        api: findDictItemByCode,
+        params: {
+          dictCode: DictEnum.DATA_VALIDATE,
+        },
+        labelField: 'itemText',
+        valueField: 'itemValue',
+        placeholder: '请选择数据校验方式',
+        getPopupContainer: () => document.body,
+      };
+    },
+  },
+];

+export { default as PollCommandInput } from './index.vue';
+export enum ModeEnum {
+  JSON = 'application/json',
+  NORMAL = 'normal',
+}

+<script lang="ts" setup>
+  import { Input } from 'ant-design-vue';
+  import { JSONEditor } from '/@/components/CodeEditor';
+  import { SettingOutlined } from '@ant-design/icons-vue';
+  import { ModeEnum } from './index';
+  import { computed } from '@vue/reactivity';
+  import GenModbusCommandModal from './GenModbusCommandModal.vue';
+  import { useModal } from '/@/components/Modal';
+  import { ref } from 'vue';
+  import { unref } from 'vue';
+
+  const props = withDefaults(
+    defineProps<{
+      value?: any;
+      mode?: string;
+      inputProps?: Recordable;
+      showSettingAddonAfter?: boolean;
+      openSettingOnInputFocus?: boolean;
+    }>(),
+    {
+      mode: 'application/json',
+      showSettingAddonAfter: true,
+      openSettingOnInputFocus: false,
+    }
+  );
+
+  const emit = defineEmits(['update:value']);
+
+  const inputElRef = ref<Nullable<HTMLInputElement>>(null);
+
+  const [registerCreateTCPCommandModal, { openModal }] = useModal();
+
+  const getJSONValue = computed(() => {
+    return props.value;
+  });
+
+  const handleEmit = (value: any) => {
+    emit('update:value', value);
+    openModal(false);
+    if (props.openSettingOnInputFocus) {
+      unref(inputElRef)?.blur();
+    }
+  };
+
+  const handleClick = () => {
+    openModal(true);
+  };
+
+  const handleFocus = () => {
+    if (props.openSettingOnInputFocus) {
+      openModal(true);
+      unref(inputElRef)?.blur();
+    }
+  };
+
+  const handleUpdateEditorValue = (value: string) => {
+    handleEmit(value);
+  };
+</script>
+
+<template>
+  <section>
+    <Input
+      v-if="mode === ModeEnum.NORMAL"
+      ref="inputElRef"
+      :value="getJSONValue"
+      @change="handleEmit"
+      v-bind="inputProps"
+      @focus="handleFocus"
+    >
+      <template v-if="showSettingAddonAfter" #addonAfter>
+        <SettingOutlined class="cursor-pointer" @click="handleClick" />
+      </template>
+    </Input>
+    <JSONEditor
+      v-if="mode === ModeEnum.JSON"
+      :value="getJSONValue"
+      @update:value="handleUpdateEditorValue"
+    />
+    <GenModbusCommandModal @register="registerCreateTCPCommandModal" @update:value="handleEmit" />
+  </section>
+</template>

+import { FormFieldsEnum } from './config';
+
+type ValuesItem = { value: any };
+
+export interface ModbusCommandValueType extends Record<FormFieldsEnum, any> {
+  [FormFieldsEnum.REGISTER_VALUES]: ValuesItem[];
+  [FormFieldsEnum.COIL_VALUES]: ValuesItem[];
+}

+import { FunctionCodeEnum } from './config';
+import { ModbusCommandValueType } from './type';
+import { GenModbusCommandType } from '/@/api/task/model';
+
+const registerInfo = (record: ModbusCommandValueType): Partial<GenModbusCommandType> => {
+  const {
+    method,
+    registerNumber,
+    registerValue,
+    registerValues,
+    coilNumber,
+    coilValue,
+    coilValues,
+  } = record;
+  switch (method) {
+    case FunctionCodeEnum.READ_COIL_STATE_01 || FunctionCodeEnum.READ_INPUT_STATE_02:
+      return { registerNum: coilNumber };
+    case FunctionCodeEnum.READ_KEEP_REGISTER_03 || FunctionCodeEnum.READ_INPUT_REGISTER_04:
+      return { registerNum: registerNumber };
+    case FunctionCodeEnum.WRITE_SINGLE_COIL_REGISTER_05:
+      return { registerValues: [coilValue] };
+    case FunctionCodeEnum.WRITE_SINGLE_KEEP_COIL_REGISTER_06:
+      return { registerValues: [registerValue] };
+    case FunctionCodeEnum.WRITE_MULTIPLE_COIL_STATE_15:
+      return {
+        registerNum: coilNumber,
+        registerValues: coilValues.map((item) => (item.value ? 1 : 0)),
+      };
+    case FunctionCodeEnum.WRITE_MULTIPLE_KEEP_REGISTER_16:
+      return {
+        registerNum: registerNumber,
+        registerValues: registerValues.map((item) => item.value),
+      };
+    default:
+      return {};
+  }
+};
+
+export const composeModbusModalData = (record: ModbusCommandValueType): GenModbusCommandType => {
+  const { crc, deviceCode, method, registerAddr } = record;
+  return {
+    crc,
+    deviceCode,
+    method,
+    registerAddr,
+    ...registerInfo(record),
+  };
+};

+export { default as ProductPicker } from './index.vue';
+
+export enum FormFieldsEnum {
+  DEVICE_TYPE = 'deviceType',
+  DEVICE_PROFILE = 'deviceProfileId',
+  ORGANIZATION = 'organizationId',
+}
+
+export type ProductCascadePickerValueType = Record<FormFieldsEnum, string>;
+
+export { validateProductPicker } from './utils';

+<script lang="ts" setup>
+  import { getOrganizationList } from '/@/api/system/system';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { copyTransFun } from '/@/utils/fnUtils';
+  import { watch } from 'vue';
+  import { nextTick } from 'vue';
+  import { getDeviceProfile } from '/@/api/alarm/position';
+  import { findDictItemByCode } from '/@/api/system/dict';
+  import { DictEnum } from '/@/enums/dictEnum';
+  import { FormFieldsEnum } from '.';
+  import { isObject } from '/@/utils/is';
+  import { createPickerSearch } from '/@/utils/pickerSearch';
+
+  const props = withDefaults(
+    defineProps<{
+      value?: Recordable;
+    }>(),
+    {
+      value: () => ({}),
+    }
+  );
+
+  const emit = defineEmits(['update:value', 'change']);
+
+  const handleChange = (key: string, value: string | string[], option: Recordable) => {
+    emit('change', key, value, option);
+  };
+
+  const handleEmit = async (key: string, value: string | string[], option: Recordable) => {
+    await nextTick();
+    let _value = getFieldsValue();
+    _value = {
+      ..._value,
+
+      ...(key === FormFieldsEnum.DEVICE_TYPE
+        ? {
+            [FormFieldsEnum.DEVICE_PROFILE]: null,
+          }
+        : {}),
+    };
+    handleChange(key, value, option);
+    emit('update:value', { ..._value });
+  };
+
+  const [register, { setFieldsValue, getFieldsValue, resetFields }] = useForm({
+    schemas: [
+      {
+        field: FormFieldsEnum.DEVICE_TYPE,
+        component: 'ApiSelect',
+        label: '',
+        componentProps: () => {
+          return {
+            api: findDictItemByCode,
+            params: {
+              dictCode: DictEnum.DEVICE_TYPE,
+            },
+            labelField: 'itemText',
+            valueField: 'itemValue',
+            placeholder: '请选择设备类型',
+            onChange(value: string, option: Recordable) {
+              handleEmit(FormFieldsEnum.DEVICE_TYPE, value, option);
+            },
+            getPopupContainer: () => document.body,
+            ...createPickerSearch(),
+          };
+        },
+      },
+      {
+        field: FormFieldsEnum.ORGANIZATION,
+        component: 'ApiTreeSelect',
+        label: '',
+        componentProps: () => {
+          return {
+            api: async () => {
+              try {
+                const data = await getOrganizationList();
+                copyTransFun(data as any);
+                return data;
+              } catch (error) {
+                console.log(error);
+                return [];
+              }
+            },
+            placeholder: '请选择组织',
+            labelField: 'name',
+            valueField: 'id',
+            childField: 'children',
+            onChange(value: string, option: Recordable) {
+              handleEmit(FormFieldsEnum.ORGANIZATION, value, option);
+            },
+            getPopupContainer: () => document.body,
+          };
+        },
+      },
+      {
+        field: FormFieldsEnum.DEVICE_PROFILE,
+        component: 'ApiSelect',
+        label: '',
+        componentProps: ({ formModel }) => {
+          const deviceType = Reflect.get(formModel, FormFieldsEnum.DEVICE_TYPE);
+          return {
+            api: async () => {
+              try {
+                return await getDeviceProfile(deviceType);
+              } catch (error) {
+                return [];
+              }
+            },
+            placeholder: '请选择产品',
+            labelField: 'name',
+            valueField: 'id',
+            onChange(value: string, options: Recordable) {
+              handleEmit(FormFieldsEnum.DEVICE_PROFILE, value, options);
+            },
+            getPopupContainer: () => document.body,
+            ...createPickerSearch(),
+          };
+        },
+      },
+    ],
+    showActionButtonGroup: false,
+    layout: 'inline',
+    baseColProps: { span: 8 },
+  });
+
+  const setValue = async () => {
+    await nextTick();
+    if (!props.value || (isObject(props.value) && !Object.values(props.value).length)) {
+      resetFields();
+      return;
+    }
+    setFieldsValue(props.value);
+  };
+
+  watch(
+    () => props.value,
+    () => {
+      setValue();
+    },
+    {
+      immediate: true,
+    }
+  );
+</script>
+
+<template>
+  <BasicForm @register="register" class="device-picker" />
+</template>
+
+<style lang="less" scoped>
+  .device-picker {
+    :deep(.ant-row) {
+      width: 100%;
+    }
+
+    :deep(.ant-form-item-control-input-content) {
+      div > div {
+        width: 100%;
+      }
+    }
+  }
+</style>

+import { FormFieldsEnum } from '.';
+import { Rule } from '/@/components/Form';
+
+export const validateProductPicker = () => {
+  return {
+    required: true,
+    validateTrigger: 'blur',
+    validator(_rule: Recordable, value: Recordable, _callback: Fn) {
+      const product = Reflect.get(value || {}, FormFieldsEnum.DEVICE_PROFILE);
+      const org = Reflect.get(value || {}, FormFieldsEnum.ORGANIZATION);
+      if (!product) return Promise.reject('请选择产品');
+      if (!org) return Promise.reject('请选择组织');
+      return Promise.resolve();
+    },
+  } as Rule;
+};

+import { TaskTargetEnum } from '../../config';
+import { getMeetTheConditionsDevice } from '/@/api/dataBoard';
+import { getDevicesByDeviceIds } from '/@/api/device/deviceManager';
+import { TaskRecordType } from '/@/api/task/model';
+import { FormSchema } from '/@/components/Form';
+import { createPickerSearch } from '/@/utils/pickerSearch';
+
+export interface FormValue extends Record<FormFieldsEnum, any> {
+  [FormFieldsEnum.TASK_RECORD]: string;
+}
+
+export enum FormFieldsEnum {
+  EXECUTE_TARGET_TYPE = 'executeTarget',
+  TASK_TYPE = 'taskType',
+  TARGET_IDS = 'targetIds',
+  TASK_RECORD = 'taskRecord',
+}
+
+export enum TargetType {
+  ALL = 'ALL',
+  ASSIGN = 'ASSIGN',
+}
+
+export enum TargetNameType {
+  ALL = '所有目标设备',
+  ASSIGN = '指定目标设备',
+}
+
+export const formSchemas: FormSchema[] = [
+  {
+    field: 'taskName',
+    component: 'Input',
+    label: '任务名称',
+    slot: 'taskName',
+  },
+  {
+    field: FormFieldsEnum.TASK_TYPE,
+    component: 'Input',
+    label: '任务类型',
+    slot: 'taskType',
+  },
+  {
+    field: FormFieldsEnum.TASK_RECORD,
+    component: 'Input',
+    label: '任务详情',
+    show: false,
+  },
+  {
+    field: FormFieldsEnum.EXECUTE_TARGET_TYPE,
+    component: 'RadioGroup',
+    label: '选择目标类型',
+    helpMessage: [
+      '您可以对该任务关联的所有设备批量执行任务，也可以指定其中的一个或多个关联的设备来执行任务。',
+    ],
+    defaultValue: TargetType.ALL,
+    componentProps: {
+      options: [
+        { label: TargetNameType.ALL, value: TargetType.ALL },
+        { label: TargetNameType.ASSIGN, value: TargetType.ASSIGN },
+      ],
+    },
+  },
+  {
+    field: FormFieldsEnum.TARGET_IDS,
+    component: 'ApiSelect',
+    label: '制定目标设备',
+    ifShow: ({ model }) => model[FormFieldsEnum.EXECUTE_TARGET_TYPE] === TargetType.ASSIGN,
+    componentProps: ({ formModel }) => {
+      const record = JSON.parse(formModel[FormFieldsEnum.TASK_RECORD]) as TaskRecordType;
+      const isDevices = record.targetType === TaskTargetEnum.DEVICES;
+      const { executeTarget } = record;
+      const { organizationId, data } = executeTarget;
+      return {
+        api: async () => {
+          try {
+            if (isDevices) {
+              const result = await getDevicesByDeviceIds(data!);
+              return result.data;
+            } else {
+              return await getMeetTheConditionsDevice({
+                organizationId,
+                deviceProfileId: data![0],
+              });
+            }
+          } catch (error) {
+            return [];
+          }
+        },
+        mode: 'multiple',
+        labelField: 'name',
+        valueField: 'tbDeviceId',
+        ...createPickerSearch(),
+        placeholder: '请选择设备',
+        getPopupContainer: () => document.body,
+      };
+    },
+  },
+];

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

+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { ImmediateExecuteTaskType, TaskRecordType } from '/@/api/task/model';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { TaskTargetEnum, TaskTypeNameEnum } from '../../config';
+  import { FormValue, TargetType, formSchemas } from './config';
+  import { unref } from 'vue';
+  import { immediateExecute } from '/@/api/task';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  const props = defineProps<{
+    reload: Fn;
+  }>();
+
+  defineEmits(['register']);
+
+  const dataSource = ref<TaskRecordType>();
+
+  const [registerModal, { closeModal }] = useModalInner((record: TaskRecordType) => {
+    resetFields();
+    dataSource.value = record;
+    if (record) {
+      setFieldsValue({ taskRecord: JSON.stringify(record) } as FormValue);
+    }
+  });
+
+  const [registerForm, { setFieldsValue, getFieldsValue, resetFields }] = useForm({
+    schemas: formSchemas,
+    showActionButtonGroup: false,
+  });
+
+  const composeData = (record: FormValue): ImmediateExecuteTaskType => {
+    const { executeTarget, targetIds } = record;
+    return {
+      executeTarget:
+        executeTarget === TargetType.ASSIGN
+          ? TaskTargetEnum.DEVICES
+          : unref(dataSource)!.targetType,
+      id: unref(dataSource)!.id,
+      targetIds,
+      cronExpression: unref(dataSource)!.executeTime.cron,
+      name: unref(dataSource)!.name,
+    };
+  };
+
+  const loading = ref(false);
+  const { createMessage } = useMessage();
+  const handleOk = async () => {
+    const record = getFieldsValue() as FormValue;
+    const value = composeData(record);
+    try {
+      loading.value = true;
+      const { data } = await immediateExecute(value);
+      data ? createMessage.success('运行成功') : createMessage.error('运行失败');
+      if (data) {
+        closeModal();
+        props.reload?.();
+      }
+    } catch (error) {
+      throw error;
+    } finally {
+      loading.value = false;
+    }
+  };
+</script>
+
+<template>
+  <BasicModal
+    @register="registerModal"
+    title="运行任务"
+    :okButtonProps="{ loading }"
+    @ok="handleOk"
+  >
+    <BasicForm @register="registerForm">
+      <template #taskName>
+        <div class="font-semibold">
+          {{ dataSource?.name }}
+        </div>
+      </template>
+      <template #taskType>
+        <div class="font-semibold">
+          {{
+            dataSource ? TaskTypeNameEnum[dataSource.executeContent.type] : TaskTypeNameEnum.CUSTOM
+          }}
+        </div>
+      </template>
+    </BasicForm>
+  </BasicModal>
+</template>

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

+<script lang="ts" setup>
+  import { Button, Card, Switch, Tooltip } from 'ant-design-vue';
+  import {
+    CloudSyncOutlined,
+    PlayCircleOutlined,
+    QuestionCircleOutlined,
+  } from '@ant-design/icons-vue';
+  import { Authority } from '/@/components/Authority';
+  import { TaskRecordType } from '/@/api/task/model';
+  import { StateEnum, TaskTargetNameEnum, TaskTypeEnum } from '../../config';
+  import { TaskTypeNameEnum, PermissionEnum } from '../../config';
+  import AuthDropDown from '/@/components/Widget/AuthDropDown.vue';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { cancelTask, deleteTask, updateState } from '/@/api/task';
+  import { computed } from '@vue/reactivity';
+  import { unref } from 'vue';
+  import { ref } from 'vue';
+  import { dateUtil } from '/@/utils/dateUtil';
+  import { DEFAULT_DATE_FORMAT } from '/@/views/visual/board/detail/config/util';
+
+  enum DropMenuEvent {
+    DELETE = 'DELETE',
+    EDIT = 'EDIT',
+  }
+
+  const props = withDefaults(
+    defineProps<{
+      record: TaskRecordType;
+      reload: Fn;
+      deviceTaskCardMode?: boolean;
+      tbDeviceId?: string;
+    }>(),
+    {
+      deviceTaskCardMode: false,
+    }
+  );
+
+  const emit = defineEmits(['edit', 'runTask']);
+
+  const loading = ref(false);
+
+  const { createMessage } = useMessage();
+
+  const getRecord = computed(() => {
+    return props.record;
+  });
+
+  const getCancelState = computed(() => {
+    return !!(
+      unref(getRecord).tkDeviceTaskCenter && unref(getRecord).tkDeviceTaskCenter?.allowState
+    );
+  });
+
+  const handleDelete = async () => {
+    try {
+      await deleteTask([unref(getRecord).id]);
+      createMessage.success('删除成功');
+      props.reload?.();
+    } catch (error) {}
+  };
+
+  const handleSwitchState = async () => {
+    try {
+      loading.value = true;
+      await updateState(
+        unref(getRecord).id,
+        !unref(getRecord).state ? StateEnum.ENABLE : StateEnum.CLOSE
+      );
+      createMessage.success('更新状态成功');
+      props.reload?.();
+    } catch (error) {
+      throw error;
+    } finally {
+      loading.value = false;
+    }
+  };
+
+  const handleCancelTask = async () => {
+    try {
+      if (!props.tbDeviceId) return;
+      loading.value = true;
+      await cancelTask({
+        id: unref(getRecord).id,
+        tbDeviceId: props.tbDeviceId,
+        allow: !unref(getCancelState),
+      });
+      createMessage.success('设置成功');
+      props.reload?.();
+    } catch (error) {
+      throw error;
+    } finally {
+      loading.value = false;
+    }
+  };
+
+  const getTwoDateDiff = (date: number, now = dateUtil()) => {
+    const unitList = [
+      { radix: null, unitName: '年', unit: 'year' },
+      { radix: 11, unitName: '月', unit: 'month' },
+      { radix: 30, unitName: '日', unit: 'day' },
+      { radix: 23, unitName: '时', unit: 'hour' },
+      { radix: 59, unitName: '分', unit: 'minute' },
+      { radix: 59, unitName: '秒', unit: 'second' },
+    ];
+
+    for (let i = unitList.length - 1; i >= 0; i--) {
+      const { unit, radix, unitName } = unitList[i];
+      const lastDate = dateUtil(date);
+      const diffValue = now.diff(lastDate, unit as any);
+      if (!radix || diffValue <= radix) {
+        return { value: diffValue, unit, unitName };
+      }
+    }
+  };
+
+  const getLastExecuteTime = computed(() => {
+    if (!unref(getRecord).lastExecuteTime) return;
+    return getTwoDateDiff(unref(getRecord).lastExecuteTime!);
+  });
+
+  const handleRunTask = () => {
+    emit('runTask', unref(getRecord));
+  };
+</script>
+
+<template>
+  <Card hoverable class="card-container !rounded">
+    <div v-if="!deviceTaskCardMode" class="flex justify-end mb-4">
+      <AuthDropDown
+        @click.stop
+        :trigger="['hover']"
+        :drop-menu-list="[
+          {
+            text: '编辑',
+            event: DropMenuEvent.DELETE,
+            disabled: !!getRecord.state,
+            icon: 'ant-design:edit-outlined',
+            auth: PermissionEnum.UPDATE,
+            onClick: emit.bind(null, 'edit', getRecord),
+          },
+          {
+            text: '删除',
+            event: DropMenuEvent.DELETE,
+            icon: 'ant-design:delete-outlined',
+            auth: PermissionEnum.DELETE,
+            popconfirm: {
+              title: '是否确认删除操作?',
+              onConfirm: handleDelete.bind(null),
+            },
+          },
+        ]"
+      />
+    </div>
+    <div class="flex text-base font-medium justify-between mb-2">
+      <Tooltip :title="getRecord.name" placement="topLeft">
+        <div class="truncate max-w-48">{{ getRecord.name }}</div>
+      </Tooltip>
+      <span
+        v-if="deviceTaskCardMode"
+        class="text-xs w-12 leading-6 text-right"
+        :class="getRecord.state === StateEnum.ENABLE ? 'text-green-500' : 'text-red-500'"
+      >
+        {{ getRecord.state === StateEnum.ENABLE ? '已启用' : '未启用' }}
+      </span>
+      <Authority :value="PermissionEnum.START_TASK">
+        <Switch
+          v-if="!deviceTaskCardMode"
+          :checked="getRecord.state === StateEnum.ENABLE"
+          :loading="loading"
+          size="small"
+          @click="handleSwitchState"
+        />
+      </Authority>
+    </div>
+    <div class="flex gap-2 items-center">
+      <div
+        class="rounded flex justify-center items-center w-6 h-6"
+        :class="
+          getRecord.executeContent.type === TaskTypeEnum.MODBUS_RTU
+            ? ' bg-blue-400'
+            : 'bg-green-400'
+        "
+      >
+        <CloudSyncOutlined class="svg:fill-light-50" />
+      </div>
+      <div class="text-gray-400 truncate">
+        <span>{{ TaskTypeNameEnum[getRecord.executeContent.type] }}</span>
+        <span class="mx-1">-</span>
+        <span>{{ TaskTargetNameEnum[getRecord.targetType] }}</span>
+      </div>
+    </div>
+    <div class="mt-4 flex justify-between items-center gap-3">
+      <Button size="small" @click="handleRunTask">
+        <div class="text-xs px-1">
+          <PlayCircleOutlined class="mr-1" />
+          <span>运行任务</span>
+        </div>
+      </Button>
+      <Tooltip
+        v-if="getLastExecuteTime"
+        overlay-class-name="task-last-execute-time-tooltip"
+        placement="topLeft"
+        :title="`最后运行时间: ${dateUtil(getRecord.lastExecuteTime).format(DEFAULT_DATE_FORMAT)}`"
+      >
+        <div class="text-gray-400 text-xs truncate">
+          <span class="mr-2">间隔时间重复</span>
+          <span>{{
+            getLastExecuteTime.value
+              ? `${getLastExecuteTime.value}${getLastExecuteTime.unitName}前`
+              : '刚刚'
+          }}</span>
+        </div>
+      </Tooltip>
+    </div>
+
+    <Authority :value="PermissionEnum.ALLOW">
+      <section
+        v-if="deviceTaskCardMode"
+        class="border-t mt-4 pt-2 text-sm border-gray-100 flex justify-between text-gray-400"
+      >
+        <div>
+          <span>允许该设备</span>
+          <Tooltip title="设置是否允许当前设备定时执行任务。该选项不影响手动执行任务。">
+            <QuestionCircleOutlined class="ml-1" />
+          </Tooltip>
+        </div>
+        <div>
+          <Switch
+            size="small"
+            :loading="loading"
+            :checked="getCancelState"
+            @click="handleCancelTask"
+          />
+        </div>
+      </section>
+    </Authority>
+  </Card>
+</template>
+
+<style>
+  .task-last-execute-time-tooltip {
+    max-width: 300px;
+  }
+</style>

+import { FormSchema } from '/@/components/Form';
+
+export enum PermissionEnum {
+  CREATE = 'api:yt:task_center:add:post',
+  UPDATE = 'api:yt:task_center:update:update',
+  START_TASK = 'api:yt:task_center:update:state',
+  DELETE = 'api:yt:task_center:delete',
+  ALLOW = 'api:yt:task_center:cancel:allow',
+}
+
+export enum FormFieldsEnum {
+  DEVICE_TYPE = 'targetType',
+  TASK_TYPE = 'taskType',
+  TASK_STATUS = 'state',
+}
+
+export enum TaskTargetEnum {
+  DEVICES = 'DEVICES',
+  PRODUCTS = 'PRODUCTS',
+  ALL = 'all',
+}
+
+export enum TaskTargetNameEnum {
+  DEVICES = '设备',
+  PRODUCTS = '产品',
+  ALL = '不限任务目标类型',
+}
+
+export enum TaskTypeEnum {
+  CUSTOM = 'CUSTOM',
+  MODBUS_RTU = 'MODBUS_RTU',
+}
+
+export enum TaskTypeNameEnum {
+  MODBUS_RTU = 'MODBUS_RTU轮询',
+  CUSTOM = '自定义数据下发',
+}
+
+export enum TaskStatusEnum {
+  DEACTIVATE,
+  NORMAL,
+}
+
+export enum TaskStatusNameEnum {
+  DEACTIVATE = '已停用',
+  NORMAL = '正常',
+}
+
+export const formSchemas: FormSchema[] = [
+  {
+    label: '目标类型',
+    component: 'Select',
+    field: FormFieldsEnum.DEVICE_TYPE,
+    componentProps: {
+      options: [
+        { label: TaskTargetNameEnum.DEVICES, value: TaskTargetEnum.DEVICES },
+        { label: TaskTargetNameEnum.PRODUCTS, value: TaskTargetEnum.PRODUCTS },
+      ],
+      placeholder: '请选择目标类型',
+      getPopupContainer: () => document.body,
+    },
+  },
+  {
+    label: '状态',
+    component: 'Select',
+    field: FormFieldsEnum.TASK_STATUS,
+    componentProps: {
+      options: [
+        { label: TaskStatusNameEnum.NORMAL, value: TaskStatusEnum.NORMAL },
+        { label: TaskStatusNameEnum.DEACTIVATE, value: TaskStatusEnum.DEACTIVATE },
+      ],
+      placeholder: '请选择状态',
+      getPopupContainer: () => document.body,
+    },
+  },
+];
+
+export enum StateEnum {
+  CLOSE,
+  ENABLE,
+}

+<script setup lang="ts">
+  import { Button, List, Tooltip } from 'ant-design-vue';
+  import { PageWrapper } from '/@/components/Page';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { PermissionEnum, formSchemas } from './config';
+  import { TaskCard } from './components/TaskCard';
+  import { getTaskCenterList } from '/@/api/task';
+  import { ref, unref } from 'vue';
+  import { onMounted } from 'vue';
+  import { DetailModal } from './components/DetailModal';
+  import { useModal } from '/@/components/Modal';
+  import { TaskRecordType } from '/@/api/task/model';
+  import { reactive } from 'vue';
+  import { ReloadOutlined } from '@ant-design/icons-vue';
+  import { DataActionModeEnum } from '/@/enums/toolEnum';
+  import { ModalParamsType } from '/#/utils';
+  import { Authority } from '/@/components/Authority';
+  import { getBoundingClientRect } from '/@/utils/domUtils';
+  import { RunTaskModal } from './components/RunTaskModal';
+
+  const [registerModal, { openModal }] = useModal();
+  const [registerRunTaskModal, { openModal: openRunTaskModal }] = useModal();
+
+  const [registerForm, { getFieldsValue }] = useForm({
+    schemas: formSchemas,
+    baseColProps: { span: 8 },
+    compact: true,
+    showAdvancedButton: true,
+    labelWidth: 100,
+    submitFunc: async () => {
+      pagination.params = getFieldsValue();
+      getDataSource();
+    },
+  });
+
+  const pagination = reactive({
+    total: 10,
+    current: 1,
+    showQuickJumper: true,
+    size: 'small',
+    showTotal: (total: number) => `共 ${total} 条数据`,
+    params: {} as Recordable,
+  });
+
+  const dataSource = ref<TaskRecordType[]>([]);
+  const loading = ref(false);
+  const getDataSource = async () => {
+    try {
+      loading.value = true;
+      const { items } = await getTaskCenterList({ page: 1, pageSize: 10, ...pagination.params });
+      dataSource.value = items;
+    } catch (error) {
+      throw error;
+    } finally {
+      loading.value = false;
+    }
+  };
+
+  const handleEdit = (record: TaskRecordType) => {
+    openModal(true, {
+      record,
+      mode: DataActionModeEnum.UPDATE,
+    } as ModalParamsType);
+  };
+
+  const handleRunTask = (record: TaskRecordType) => {
+    openRunTaskModal(true, record);
+  };
+
+  const reload = () => getDataSource();
+
+  const listElRef = ref<Nullable<ComponentElRef>>(null);
+
+  const setListHeight = () => {
+    const clientHeight = document.documentElement.clientHeight;
+    const rect = getBoundingClientRect(unref(listElRef)!.$el!) as DOMRect;
+    // margin-top 24 height 24
+    const paginationHeight = 24 + 24 + 8;
+    // list pading top 8 maring-top 8 extra slot 56
+    const listContainerMarginBottom = 8 + 8 + 72;
+    const listContainerHeight =
+      clientHeight - rect.top - paginationHeight - listContainerMarginBottom;
+    const listContainerEl = (unref(listElRef)!.$el as HTMLElement).querySelector(
+      '.ant-spin-container'
+    ) as HTMLElement;
+    listContainerEl &&
+      (listContainerEl.style.height = listContainerHeight + 'px') &&
+      (listContainerEl.style.overflowY = 'auto') &&
+      (listContainerEl.style.overflowX = 'hidden');
+  };
+
+  onMounted(() => {
+    setListHeight();
+    getDataSource();
+  });
+</script>
+
+<template>
+  <PageWrapper class="task-center-container">
+    <section
+      class="bg-light-50 flex p-4 justify-between items-center x dark:text-gray-300 dark:bg-dark-900"
+    >
+      <div class="text-2xl">任务中心</div>
+      <Authority :value="PermissionEnum.CREATE">
+        <Button
+          type="primary"
+          @click="openModal(true, { mode: DataActionModeEnum.CREATE } as ModalParamsType)"
+        >
+          创建任务
+        </Button>
+      </Authority>
+    </section>
+    <section
+      class="form-container bg-light-50 px-4 pt-4 mt-4 x dark:text-gray-300 dark:bg-dark-900"
+    >
+      <BasicForm @register="registerForm" />
+    </section>
+    <section class="bg-light-50 mt-4 p-4 dark:text-gray-300 dark:bg-dark-900">
+      <List
+        ref="listElRef"
+        :dataSource="dataSource"
+        :pagination="pagination"
+        :grid="{ gutter: 16, xs: 1, sm: 1, md: 2, lg: 3, xl: 3, xxl: 4, column: 4 }"
+        :loading="loading"
+      >
+        <template #header>
+          <section class="flex justify-between gap-4 min-h-12 items-center">
+            <div>
+              <span class="text-lg font-medium">任务列表</span>
+            </div>
+            <Tooltip v-if="dataSource.length" title="刷新">
+              <Button type="primary" @click="getDataSource">
+                <ReloadOutlined :spin="loading" />
+              </Button>
+            </Tooltip>
+          </section>
+        </template>
+        <template #renderItem="{ item }">
+          <List.Item :key="item.id">
+            <TaskCard :record="item" :reload="reload" @runTask="handleRunTask" @edit="handleEdit" />
+          </List.Item>
+        </template>
+      </List>
+    </section>
+    <DetailModal @register="registerModal" :reload="reload" />
+    <RunTaskModal :reload="reload" @register="registerRunTaskModal" />
+  </PageWrapper>
+</template>
+
+<style lang="less" scoped>
+  .task-center-container {
+    :deep(.ant-list-header) {
+      border: none;
+    }
+
+    :deep(.ant-card-body) {
+      padding: 16px 24px;
+    }
+  }
+</style>

 <script lang="ts">
   export default {
+    components: { Spin },
     inheritAttrs: false,
   };
 </script>
 <script lang="ts" setup>
+  import { Spin } from 'ant-design-vue';
   import { RadioRecord } from '../../detail/config/util';
   import { ControlComponentDefaultConfig, ControlComponentValue } from './control.config';
   import { useSendCommand } from './useSendCommand';
+  import { ref } from 'vue';
 
   interface VisualComponentProps<Layout = Recordable, Value = ControlComponentValue> {
     value?: Value;
@@ -23,33 +26,45 @@
   const emit = defineEmits(['update:value', 'change']);
 
   const { sendCommand } = useSendCommand();
-  const handleChange = (event: Event) => {
+
+  const loading = ref(false);
+  const handleChange = async (event: Event) => {
     const _value = (event.target as HTMLInputElement).checked;
+    if (props.value) {
+      loading.value = true;
+      const flag = await sendCommand(props.value, _value);
+      loading.value = false;
+      if (!flag) {
+        (event.target as HTMLInputElement).checked = !_value;
+        return;
+      }
+    }
     emit('update:value', _value);
     emit('change', _value);
-    sendCommand(props.value!, _value);
   };
 </script>
 
 <template>
   <div class="flex flex-col justify-center">
-    <label class="sliding-switch">
-      <input
-        :value="!!Number(props.value?.value)"
-        type="checkbox"
-        :checked="!!Number(props.value?.value)"
-        @change="handleChange"
-      />
-      <span class="slider"></span>
-      <span class="on">ON</span>
-      <span class="off">OFF</span>
-    </label>
-    <div
-      class="text-center mt-2 text-gray-700"
-      :style="{ color: props?.value?.fontColor || ControlComponentDefaultConfig.fontColor }"
-    >
-      {{ props.value?.attributeRename || props.value?.attribute }}</div
-    >
+    <Spin :spinning="loading">
+      <label class="sliding-switch">
+        <input
+          :value="!!Number(props.value?.value)"
+          type="checkbox"
+          :checked="!!Number(props.value?.value)"
+          @change="handleChange"
+        />
+        <span class="slider"></span>
+        <span class="on">ON</span>
+        <span class="off">OFF</span>
+      </label>
+      <div
+        class="text-center mt-2 text-gray-700"
+        :style="{ color: props?.value?.fontColor || ControlComponentDefaultConfig.fontColor }"
+      >
+        {{ props.value?.attributeRename || props.value?.attribute }}</div
+      >
+    </Spin>
   </div>
 </template>
 

@@ -31,8 +31,14 @@
   const checked = ref(!!Number(props.value.value));
 
   const { sendCommand } = useSendCommand();
-  const handleChange = (value: boolean) => {
-    sendCommand(props.value, value);
+  const loading = ref(false);
+  const handleChange = async (value: boolean) => {
+    loading.value = true;
+    const flag = await sendCommand(props.value, value);
+    loading.value = false;
+    if (!flag) {
+      checked.value = !value;
+    }
   };
 
   watchEffect(() => {
@@ -59,6 +65,6 @@
         {{ props.value.attributeRename || props.value.attribute }}
       </span>
     </div>
-    <Switch v-model:checked="checked" @change="handleChange" />
+    <Switch v-model:checked="checked" :loading="loading" @change="handleChange" />
   </div>
 </template>

 <script lang="ts">
   export default {
+    components: { Spin },
     inheritAttrs: false,
   };
 </script>
@@ -8,6 +9,8 @@
   import { DEFAULT_RADIO_RECORD, fontSize, RadioRecord } from '../../detail/config/util';
   import { ControlComponentDefaultConfig, ControlComponentValue } from './control.config';
   import { useSendCommand } from './useSendCommand';
+  import { ref } from 'vue';
+  import { Spin } from 'ant-design-vue';
 
   const props = defineProps<{
     value?: ControlComponentValue;
@@ -18,11 +21,20 @@
   const emit = defineEmits(['update:value', 'change']);
 
   const { sendCommand } = useSendCommand();
-  const handleChange = (event: Event) => {
+  const loading = ref(false);
+  const handleChange = async (event: Event) => {
     const _value = (event.target as HTMLInputElement).checked;
+    if (props.value) {
+      loading.value = true;
+      const flag = await sendCommand(props.value, _value);
+      loading.value = false;
+      if (!flag) {
+        (event.target as HTMLInputElement).checked = !_value;
+        return;
+      }
+    }
     emit('update:value', _value);
     emit('change', _value);
-    sendCommand(props.value!, _value);
   };
 
   const getRadio = computed(() => {
@@ -32,35 +44,37 @@
 
 <template>
   <div class="flex flex-col">
-    <div
-      class="toggle-switch"
-      :style="{
-        width: fontSize({ radioRecord: getRadio, basic: 75, max: 75, min: 60 }),
-        height: fontSize({ radioRecord: getRadio, basic: 97.5, max: 97.5, min: 80 }),
-      }"
-    >
-      <label class="switch">
-        <input
-          :value="!!Number(props.value?.value)"
-          type="checkbox"
-          :checked="!!Number(props.value?.value)"
-          @change="handleChange"
-        />
-        <div class="button">
-          <div class="light"></div>
-          <div class="dots"></div>
-          <div class="characters"></div>
-          <div class="shine"></div>
-          <div class="shadow"></div>
-        </div>
-      </label>
-    </div>
-    <div
-      class="text-center mt-2 text-gray-700"
-      :style="{ color: props?.value?.fontColor || ControlComponentDefaultConfig.fontColor }"
-    >
-      {{ props.value?.attributeRename || props.value?.attribute }}</div
-    >
+    <Spin :spinning="loading">
+      <div
+        class="toggle-switch"
+        :style="{
+          width: fontSize({ radioRecord: getRadio, basic: 75, max: 75, min: 60 }),
+          height: fontSize({ radioRecord: getRadio, basic: 97.5, max: 97.5, min: 80 }),
+        }"
+      >
+        <label class="switch">
+          <input
+            :value="!!Number(props.value?.value)"
+            type="checkbox"
+            :checked="!!Number(props.value?.value)"
+            @change="handleChange"
+          />
+          <div class="button">
+            <div class="light"></div>
+            <div class="dots"></div>
+            <div class="characters"></div>
+            <div class="shine"></div>
+            <div class="shadow"></div>
+          </div>
+        </label>
+      </div>
+      <div
+        class="text-center mt-2 text-gray-700"
+        :style="{ color: props?.value?.fontColor || ControlComponentDefaultConfig.fontColor }"
+      >
+        {{ props.value?.attributeRename || props.value?.attribute }}</div
+      >
+    </Spin>
   </div>
 </template>
 

@@ -5,33 +5,44 @@ import { DeviceTypeEnum } from '/@/api/device/model/deviceModel';
 import { getModelServices } from '/@/api/device/modelOfMatter';
 import { useMessage } from '/@/hooks/web/useMessage';
 import { isString } from '/@/utils/is';
+import { TransportTypeEnum } from '/@/views/device/profiles/components/TransportDescript/const';
 
 const { createMessage } = useMessage();
 export function useSendCommand() {
+  const error = () => {
+    createMessage.error('下发指令失败');
+    return false;
+  };
   const sendCommand = async (record: ControlComponentValue, value: any) => {
-    if (!record) return;
+    if (!record) return error();
     const { deviceProfileId, attribute, deviceType } = record;
     let { deviceId } = record;
-    if (!deviceId) return;
+    if (!deviceId) return error();
     try {
       const list = await getDeviceProfile();
       const deviceProfile = list.find((item) => item.id === deviceProfileId);
-      if (!deviceProfile) return;
+      if (!deviceProfile) return error();
+
       let params: string | Recordable = {
         [attribute!]: Number(value),
       };
-      if (deviceProfile.transportType === 'TCP') {
-        const serviceList = await getModelServices({ deviceProfileId: deviceProfileId! });
+
+      // 如果是TCP设备从物模型中获取下发命令(TCP网关子设备无物模型服务与事件)
+      if (deviceProfile!.transportType === TransportTypeEnum.TCP) {
+        const serviceList = (await getModelServices({ deviceProfileId: deviceProfileId! })) || [];
         const record = serviceList.find((item) => item.identifier === attribute);
         const sendCommand = record?.functionJson.inputData?.at(0)?.serviceCommand || '';
         params = isString(sendCommand) ? sendCommand : JSON.stringify(sendCommand);
       }
+
       if (deviceType === DeviceTypeEnum.SENSOR) {
         deviceId = await getDeviceRelation({
           deviceId,
           isSlave: deviceType === DeviceTypeEnum.SENSOR,
         });
       }
+
+      // 控制按钮下发命令为0 或 1
       await sendCommandOneway({
         deviceId,
         value: {
@@ -44,7 +55,11 @@ export function useSendCommand() {
         },
       });
       createMessage.success('命令下发成功');
-    } catch (error) {}
+    } catch (msg) {
+      return error();
+    } finally {
+      return true;
+    }
   };
   return {
     sendCommand,

@@ -57,6 +57,13 @@
     }
   };
 
+  const resetFormFields = async () => {
+    const hasExistEl = Object.keys(dataSourceEl).filter((key) => dataSourceEl[key]);
+    for (const id of hasExistEl) {
+      await dataSourceEl[id]?.resetFields();
+    }
+  };
+
   const validate = async () => {
     await basicMethod.validate();
     await validateDataSourceField();
@@ -258,6 +265,16 @@
     return isControlComponent(props.frontId as FrontComponent);
   });
 
+  watch(
+    () => props.frontId,
+    async (target, oldTarget) => {
+      if (isControlComponent(oldTarget!)) return;
+      if (isControlComponent(target!)) {
+        await resetFormFields();
+      }
+    }
+  );
+
   onMounted(() => handleSort());
 
   defineExpose({
@@ -293,7 +310,7 @@
 
     <section ref="formListEl">
       <div v-for="item in dataSource" :data-id="item.id" :key="item.id" class="flex bg-light-50">
-        <div class="w-24 text-right flex justify-end"> 选择设备 </div>
+        <div class="w-24 text-right flex justify-end" style="flex: 0 0 96px"> 选择设备 </div>
         <div class="pl-2 flex-auto">
           <component
             :frontId="$props.frontId"

@@ -9,6 +9,8 @@ import { getModelServices } from '/@/api/device/modelOfMatter';
 import { findDictItemByCode } from '/@/api/system/dict';
 import { DeviceTypeEnum } from '/@/api/device/model/deviceModel';
 import { DataTypeEnum } from '/@/components/Form/src/externalCompns/components/StructForm/config';
+import { TransportTypeEnum } from '/@/views/device/profiles/components/TransportDescript/const';
+import { nextTick } from 'vue';
 
 export enum BasicConfigField {
   NAME = 'name',
@@ -66,7 +68,7 @@ export const isMapComponent = (frontId: FrontComponent) => {
 };
 
 const isTcpProfile = (transportType: string) => {
-  return transportType === 'TCP';
+  return transportType === TransportTypeEnum.TCP;
 };
 
 export const basicSchema: FormSchema[] = [
@@ -117,6 +119,7 @@ export const dataSourceSchema = (isEdit: boolean, frontId?: FrontComponent): For
       component: 'ApiSelect',
       label: '设备类型',
       colProps: { span: 8 },
+      rules: [{ message: '请选择设备类型', required: true }],
       // defaultValue: DeviceTypeEnum.SENSOR,
       componentProps: ({ formActionType }) => {
         const { setFieldsValue } = formActionType;
@@ -180,7 +183,7 @@ export const dataSourceSchema = (isEdit: boolean, frontId?: FrontComponent): For
       colProps: { span: 8 },
       rules: [{ required: true, message: '组织为必填项' }],
       componentProps({ formActionType }) {
-        const { setFieldsValue } = formActionType;
+        const { setFieldsValue, getFieldsValue } = formActionType;
         return {
           placeholder: '请选择组织',
           api: async () => {
@@ -192,6 +195,9 @@ export const dataSourceSchema = (isEdit: boolean, frontId?: FrontComponent): For
             setFieldsValue({
               [DataSourceField.DEVICE_ID]: null,
             });
+            nextTick(() => {
+              console.log('org change', getFieldsValue());
+            });
           },
           getPopupContainer: () => document.body,
         };
@@ -250,11 +256,24 @@ export const dataSourceSchema = (isEdit: boolean, frontId?: FrontComponent): For
       component: 'ApiSelect',
       label: '属性',
       colProps: { span: 8 },
-      rules: [{ required: true, message: '属性为必填项' }],
+      dynamicRules: ({ model }) => {
+        const transportType = model[DataSourceField.TRANSPORT_TYPE];
+        return [
+          {
+            required: true,
+            message: `${
+              isControlComponent(frontId as FrontComponent) && isTcpProfile(transportType)
+                ? '服务'
+                : '属性'
+            }为必填项`,
+          },
+        ];
+      },
       componentProps({ formModel }) {
         const deviceProfileId = formModel[DataSourceField.DEVICE_PROFILE_ID];
         const transportType = formModel[DataSourceField.TRANSPORT_TYPE];
-        if (isEdit && ![deviceProfileId, transportType].every(Boolean)) return {};
+        if (isEdit && ![deviceProfileId, transportType].every(Boolean))
+          return { placeholder: '请选择属性', getPopupContainer: () => document.body };
         return {
           api: async () => {
             try {

@@ -57,7 +57,7 @@
   const getAceClass = computed((): string => userStore.getDarkMode);
 
   const props = defineProps<{
-    value: Recordable;
+    value?: Recordable;
   }>();
 
   const ROUTE = useRoute();

@@ -126,7 +126,7 @@ export function useSocketConnect(dataSourceRef: Ref<DataBoardLayoutInfo[]>) {
         const { subscriptionId, data = {} } = res;
         if (isNullAndUnDef(subscriptionId)) return;
         const mappingRecord = cmdIdMapping.get(subscriptionId);
-        if (!mappingRecord) return;
+        if (!mappingRecord || !data) return;
         mappingRecord.forEach((item) => {
           const { attribute, recordIndex, dataSourceIndex } = item;
           const [[timespan, value]] = data[attribute];

@@ -249,17 +249,19 @@
                   </div>
                 </div>
                 <div class="flex justify-between mt-4 text-sm" style="color: #999">
-                  <div>
+                  <div class="flex min-w-20 mr-3">
                     <span>
                       {{ item.viewType === ViewType.PRIVATE_VIEW ? '私有看板' : '公共看板' }}
                     </span>
                     <span v-if="item.viewType === ViewType.PUBLIC_VIEW">
                       <Tooltip title="点击复制分享链接">
-                        <ShareAltOutlined class="ml-2" @click.stop="handleCopyShareUrl(item)" />
+                        <ShareAltOutlined class="ml-1" @click.stop="handleCopyShareUrl(item)" />
                       </Tooltip>
                     </span>
                   </div>
-                  <div>{{ item.createTime }}</div>
+                  <Tooltip placement="topLeft" :title="item.createTime">
+                    <div class="truncate">{{ item.createTime }}</div>
+                  </Tooltip>
                 </div>
               </section>
             </Card>

 import type { ComputedRef, Ref } from 'vue';
+import { DataActionModeEnum } from '/@/enums/toolEnum';
 
 export type DynamicProps<T> = {
   [P in keyof T]: Ref<T[P]> | T[P] | ComputedRef<T[P]>;
 };
+
+export interface ModalParamsType<T = Recordable> {
+  mode: DataActionModeEnum;
+  record: T;
+}