Merge branch 'ft-dev' into 'main'

feat:新增设备配置，已调通新增和详情和分页，待调通删除

See merge request huang/yun-teng-iot-front!30

+import { defHttp } from '/@/utils/http/axios';
+import {
+  TDeviceConfigParams,
+  IDeviceConfigAddOrEditModel,
+} from '/@/api/device/model/deviceConfigModel';
+
+enum EDeviceConfigApi {
+  /**
+   * 设备配置URL
+   */
+  DEVICE_CONFIG_GET_PAGE = '/deviceProfile',
+  DEVICE_CONFIG_POST_ADD_OR_EDIT = '/deviceProfile',
+  DEVICE_CONFIG_GET_DETAIL = '/deviceProfile/',
+  DEVICE_CONFIG_DELETE = '/deviceProfile',
+  DEVICE_CONFIG_GET_RULECHAIN = '/rulechain/me/list',
+  ALARM_CONTACT_GET_PAGE = '/alarmContact',
+  DEVICE_CONFIG_EXPORT = '/deviceProfile/export',
+  DEVICE_CONFIG_IMPORT = '/deviceProfile/import',
+}
+
+/**
+ * 设备配置详情
+ */
+export const deviceConfigGetDetail = (id: string) => {
+  return defHttp.get({
+    url: `${EDeviceConfigApi.DEVICE_CONFIG_GET_DETAIL}${id}`,
+  });
+};
+
+/**
+ * 获取规则链
+ */
+export const deviceConfigGetRuleChain = (params: {}) => {
+  return defHttp.get({
+    url: EDeviceConfigApi.DEVICE_CONFIG_GET_RULECHAIN,
+    params,
+  });
+};
+
+/**
+ * 获取告警联系人
+ */
+export const alarmContactGetPage = () => {
+  return defHttp.get({
+    url: `${EDeviceConfigApi.ALARM_CONTACT_GET_PAGE}?page=1&pageSize=10`,
+  });
+};
+
+/**
+ * 分页查询设备配置页面
+ */
+export const deviceConfigGetQuery = (params?: TDeviceConfigParams) => {
+  return defHttp.get({
+    url: EDeviceConfigApi.DEVICE_CONFIG_GET_PAGE,
+    params,
+  });
+};
+
+/**
+ * 新增或者编辑设备配置
+
+ */
+export const deviceConfigAddOrEdit = (params: IDeviceConfigAddOrEditModel) => {
+  return defHttp.post<IDeviceConfigAddOrEditModel>({
+    url: EDeviceConfigApi.DEVICE_CONFIG_POST_ADD_OR_EDIT,
+    params,
+  });
+};
+
+/**
+ * 删除设备配置
+ */
+export const deviceConfigDelete = (ids: string[]) => {
+  return defHttp.delete({
+    url: EDeviceConfigApi.DEVICE_CONFIG_DELETE,
+    data: {
+      ids: ids,
+    },
+  });
+};
+
+/**
+ * 导出设备配置
+ */
+export const deviceConfigExport = (params: IDeviceConfigAddOrEditModel) => {
+  return defHttp.post<IDeviceConfigAddOrEditModel>({
+    url: EDeviceConfigApi.DEVICE_CONFIG_EXPORT,
+    params,
+  });
+};
+
+/**
+ * 导入设备配置
+ */
+export const deviceConfigImport = (params: IDeviceConfigAddOrEditModel) => {
+  return defHttp.post<IDeviceConfigAddOrEditModel>({
+    url: EDeviceConfigApi.DEVICE_CONFIG_IMPORT,
+    params,
+  });
+};

+import { BasicPageParams } from '/@/api/model/baseModel';
+
+export type TDeviceConfigPageQueryParam = BasicPageParams & TDeviceConfigParams;
+
+export type TDeviceConfigParams = {
+  name?: string;
+  transportType?: string;
+  orderFiled?: string;
+  orderType?: string;
+};
+
+export interface IDeviceConfigAddOrEditModel {
+  alarmProfile?: {
+    alarmContactId: string;
+    createTime: '2021-12-15T02:17:26.644Z';
+    creator: string;
+    defaultConfig: string;
+    description: string;
+    deviceProfileId: string;
+    enabled: true;
+    icon: string;
+    id: string;
+    messageMode: string;
+    name: string;
+    roleIds: [string];
+    tenantExpireTime: '2021-12-15T02:17:26.644Z';
+    tenantId: string;
+    tenantStatus: 'DISABLED';
+    updateTime: '2021-12-15T02:17:26.644Z';
+    updater: string;
+  };
+  convertJs?: string;
+  createTime?: '2021-12-15T02:17:26.644Z';
+  creator?: string;
+  defaultConfig?: string;
+  defaultRuleChainId?: string;
+  description?: string;
+  enabled?: true;
+  icon?: string;
+  id?: string;
+  name?: string;
+  profileData?: {
+    configuration: {};
+    transportConfiguration: {};
+    provisionConfiguration: {
+      provisionDeviceSecret: string;
+    };
+    alarms: [
+      {
+        id: 'highTemperatureAlarmID';
+        alarmType: 'High Temperature Alarm';
+        createRules: {
+          additionalProp1: {
+            condition: {
+              condition: [
+                {
+                  key: {
+                    type: 'TIME_SERIES';
+                    key: 'temp';
+                  };
+                  valueType: 'NUMERIC';
+                  value: {};
+                  predicate: {};
+                }
+              ];
+              spec: {};
+            };
+            schedule: {
+              type: 'ANY_TIME';
+            };
+            alarmDetails: string;
+            dashboardId: {
+              id: '784f394c-42b6-435a-983c-b7beff2784f9';
+              entityType: 'DASHBOARD';
+            };
+          };
+          additionalProp2: {
+            condition: {
+              condition: [
+                {
+                  key: {
+                    type: 'TIME_SERIES';
+                    key: 'temp';
+                  };
+                  valueType: 'NUMERIC';
+                  value: {};
+                  predicate: {};
+                }
+              ];
+              spec: {};
+            };
+            schedule: {
+              type: 'ANY_TIME';
+            };
+            alarmDetails: string;
+            dashboardId: {
+              id: '784f394c-42b6-435a-983c-b7beff2784f9';
+              entityType: 'DASHBOARD';
+            };
+          };
+          additionalProp3: {
+            condition: {
+              condition: [
+                {
+                  key: {
+                    type: 'TIME_SERIES';
+                    key: 'temp';
+                  };
+                  valueType: 'NUMERIC';
+                  value: {};
+                  predicate: {};
+                }
+              ];
+              spec: {};
+            };
+            schedule: {
+              type: 'ANY_TIME';
+            };
+            alarmDetails: string;
+            dashboardId: {
+              id: '784f394c-42b6-435a-983c-b7beff2784f9';
+              entityType: 'DASHBOARD';
+            };
+          };
+        };
+        clearRule: {
+          condition: {
+            condition: [
+              {
+                key: {
+                  type: 'TIME_SERIES';
+                  key: 'temp';
+                };
+                valueType: 'NUMERIC';
+                value: {};
+                predicate: {};
+              }
+            ];
+            spec: {};
+          };
+          schedule: {
+            type: 'ANY_TIME';
+          };
+          alarmDetails: string;
+          dashboardId: {
+            id: '784f394c-42b6-435a-983c-b7beff2784f9';
+            entityType: 'DASHBOARD';
+          };
+        };
+        propagate: true;
+        propagateRelationTypes: [string];
+      }
+    ];
+  };
+  roleIds?: [string];
+  tbProfileId?: string;
+  tenantExpireTime?: '2021-12-15T02:17:26.645Z';
+  tenantId?: string;
+  tenantStatus?: 'DISABLED';
+  transportType?: 'COAP';
+  updateTime?: '2021-12-15T02:17:26.645Z';
+  updater?: string;
+}

@@ -70,7 +70,8 @@ export const notifyAddLeaseApi = (params: NotifyAddreLeaseModel) => {
  */
  */
 export const notifyDeleteApi = (ids: string[]) => {
 export const notifyDeleteApi = (ids: string[]) => {
   return defHttp.delete({
   return defHttp.delete({
-    url: `${NotifyManagerApi.NOTICE_DELETE_URL}?ids=${ids}`,
+    url: NotifyManagerApi.NOTICE_DELETE_URL,
+    data: ids,
   });
   });
 };
 };
 
 

@@ -96,7 +96,7 @@ export const useMultipleTabStore = defineStore({
       const len = this.tabList.length;
       const len = this.tabList.length;
       const { path } = unref(router.currentRoute);
       const { path } = unref(router.currentRoute);
 
 
-      let toPath: PageEnum | string = BASE_HOME;
+      let toPath: PageEnum | string = PageEnum.BASE_HOME;
 
 
       if (len > 0) {
       if (len > 0) {
         const page = this.tabList[len - 1];
         const page = this.tabList[len - 1];

@@ -180,11 +180,12 @@ export const usePermissionStore = defineStore({
             this.changePermissionCode();
             this.changePermissionCode();
             routeList = (await getMenuList()) as AppRouteRecordRaw[];
             routeList = (await getMenuList()) as AppRouteRecordRaw[];
             //这里判断是否含有首页
             //这里判断是否含有首页
+            // console.log(routeList);
             const getHomePage = routeList.find((f) => {
             const getHomePage = routeList.find((f) => {
               return f.path == '/dashboard';
               return f.path == '/dashboard';
             });
             });
             if (getHomePage?.path == '/dashboard') {
             if (getHomePage?.path == '/dashboard') {
-              router.push('/dashboard');
+              router.push('/dashboard/workbench');
             } else {
             } else {
               const route = routeList[0].path + '';
               const route = routeList[0].path + '';
               router.push(route);
               router.push(route);
@@ -206,7 +207,6 @@ export const usePermissionStore = defineStore({
           routes = [PAGE_NOT_FOUND_ROUTE, ...routeList];
           routes = [PAGE_NOT_FOUND_ROUTE, ...routeList];
           break;
           break;
       }
       }
-      console.log('错误页');
       routes.push(ERROR_LOG_ROUTE);
       routes.push(ERROR_LOG_ROUTE);
       patchHomeAffix(routes);
       patchHomeAffix(routes);
       return routes;
       return routes;

@@ -12,22 +12,44 @@
         <a-step title="设备配置" />
         <a-step title="设备配置" />
         <a-step title="传输配置" />
         <a-step title="传输配置" />
         <a-step title="告警配置" />
         <a-step title="告警配置" />
+        <a-step title="告警通知" />
       </a-steps>
       </a-steps>
     </div>
     </div>
     <div class="mt-5">
     <div class="mt-5">
-      <DeviceProfileStep1 @next="handleStep1Next" v-if="current === 0" />
-      <DeviceProfileStep2 @prev="handleStepPrev" @next="handleStep2Next" v-if="current === 1" />
-      <DeviceProfileStep3 @prev="handleStepPrev" @redo="handleRedo" v-if="current === 2" />
+      <DeviceProfileStep1 :echoStep1="editEchoData" @next="handleStepNext1" v-if="current === 0" />
+      <DeviceProfileStep2
+        :echoStep2="editEchoData"
+        @prev="handleStepPrev"
+        @next="handleStep2Next"
+        v-if="current === 1"
+      />
+      <DeviceProfileStep3
+        :echoStep3="editEchoData"
+        @prev="handleStepPrev"
+        @next="handleStep3Next"
+        @redo="handleRedo"
+        v-if="current === 2"
+      />
+      <DeviceProfileStep4
+        :echoStep4="editEchoData"
+        ref="getStepData"
+        @prev="handleStepPrev"
+        v-if="current === 3"
+      />
     </div>
     </div>
   </BasicModal>
   </BasicModal>
 </template>
 </template>
 <script lang="ts">
 <script lang="ts">
-  import { defineComponent, ref, computed, unref } from 'vue';
+  import { defineComponent, ref, computed, unref, getCurrentInstance } from 'vue';
   import { BasicModal, useModalInner } from '/@/components/Modal';
   import { BasicModal, useModalInner } from '/@/components/Modal';
   import DeviceProfileStep1 from '/@/views/device/profile/step/DeviceProfileStep1.vue';
   import DeviceProfileStep1 from '/@/views/device/profile/step/DeviceProfileStep1.vue';
   import DeviceProfileStep2 from '/@/views/device/profile/step/DeviceProfileStep2.vue';
   import DeviceProfileStep2 from '/@/views/device/profile/step/DeviceProfileStep2.vue';
   import DeviceProfileStep3 from '/@/views/device/profile/step/DeviceProfileStep3.vue';
   import DeviceProfileStep3 from '/@/views/device/profile/step/DeviceProfileStep3.vue';
+  import DeviceProfileStep4 from '/@/views/device/profile/step/DeviceProfileStep4.vue';
   import { Steps } from 'ant-design-vue';
   import { Steps } from 'ant-design-vue';
+  import { deviceConfigAddOrEdit } from '/@/api/device/deviceConfigApi';
+  import { useMessage } from '/@/hooks/web/useMessage';
+
   export default defineComponent({
   export default defineComponent({
     name: 'DeviceModal',
     name: 'DeviceModal',
     components: {
     components: {
@@ -35,48 +57,84 @@
       DeviceProfileStep1,
       DeviceProfileStep1,
       DeviceProfileStep2,
       DeviceProfileStep2,
       DeviceProfileStep3,
       DeviceProfileStep3,
+      DeviceProfileStep4,
       [Steps.name]: Steps,
       [Steps.name]: Steps,
       [Steps.Step.name]: Steps.Step,
       [Steps.Step.name]: Steps.Step,
     },
     },
     props: {
     props: {
       userData: { type: Object },
       userData: { type: Object },
     },
     },
-    setup(_) {
+    emits: ['success'],
+    setup(_, { emit }) {
+      const { createMessage } = useMessage();
+      const getStepData = ref(null);
+      const { proxy } = getCurrentInstance();
+      const postDeviceConfogData: any = ref({});
+      const getStepOneData: any = ref({});
+      const getStepTwoData: any = ref({});
+      const editEchoData: any = ref({});
       const current = ref(0);
       const current = ref(0);
       const isUpdate = ref(true);
       const isUpdate = ref(true);
       const getTitle = computed(() => (!unref(isUpdate) ? '新增设备配置' : '编辑设备配置'));
       const getTitle = computed(() => (!unref(isUpdate) ? '新增设备配置' : '编辑设备配置'));
-      const [register] = useModalInner((data) => {
+      const [register, { closeModal }] = useModalInner((data) => {
         isUpdate.value = !!data?.isUpdate;
         isUpdate.value = !!data?.isUpdate;
         if (!unref(isUpdate)) {
         if (!unref(isUpdate)) {
           current.value = 0;
           current.value = 0;
         }
         }
+        if (unref(isUpdate)) {
+          editEchoData.value = data.record;
+          console.log(editEchoData.value);
+        }
       });
       });
       function handleStepPrev() {
       function handleStepPrev() {
         current.value--;
         current.value--;
       }
       }
-      function handleStep1Next() {
+      function handleStepNext1(v) {
+        current.value++;
+        console.log('第一步的数据', v);
+        getStepOneData.value = v;
+      }
+      function handleStep2Next(v) {
         current.value++;
         current.value++;
+        console.log('第二步的数据', v);
+        getStepTwoData.value = v;
       }
       }
-      function handleStep2Next() {
+      function handleStep3Next(v) {
         current.value++;
         current.value++;
+        console.log('第三步的数据', v);
       }
       }
       function handleRedo() {
       function handleRedo() {
         current.value = 0;
         current.value = 0;
       }
       }
-      const handleSubmit = () => {
-        console.log();
+      const handleSubmit = async () => {
+        let getStep4Data = proxy.$refs.getStepData.getAllFields();
+        console.log('第四步的数据', getStep4Data);
+        Object.assign(
+          postDeviceConfogData.value,
+          getStepOneData.value,
+          getStepTwoData.value,
+          getStep4Data
+        );
+        console.log('搜集的所有数据', postDeviceConfogData.value);
+        await deviceConfigAddOrEdit(postDeviceConfogData.value);
+        createMessage.success('新增设备配置成功');
+        closeModal();
+        emit('success');
       };
       };
-      const handleCancel = () => {
-        console.log();
+      const handleCancel = async () => {
+        console.log(2);
       };
       };
       return {
       return {
+        editEchoData,
+        getStepData,
+        handleStep3Next,
         handleSubmit,
         handleSubmit,
         handleCancel,
         handleCancel,
         register,
         register,
         getTitle,
         getTitle,
         current,
         current,
         handleStepPrev,
         handleStepPrev,
-        handleStep1Next,
+        handleStepNext1,
         handleStep2Next,
         handleStep2Next,
         handleRedo,
         handleRedo,
       };
       };

 import { FormSchema } from '/@/components/Form';
 import { FormSchema } from '/@/components/Form';
 import { findDictItemByCode } from '/@/api/system/dict';
 import { findDictItemByCode } from '/@/api/system/dict';
+import { alarmContactGetPage } from '/@/api/device/deviceConfigApi';
 
 
 export const alertContactsSchemas: FormSchema[] = [
 export const alertContactsSchemas: FormSchema[] = [
   {
   {
-    field: 'alertType',
+    field: 'name',
+    label: '告警通知联系人',
+    component: 'ApiSelect',
+    componentProps: {
+      api: alarmContactGetPage,
+      labelField: 'username',
+      valueField: 'id',
+    },
+  },
+  {
+    field: 'messageMode',
     label: '告警通知方式',
     label: '告警通知方式',
     required: true,
     required: true,
     component: 'ApiSelect',
     component: 'ApiSelect',

+<template>
+  <BasicModal v-bind="$attrs" width="55rem" @register="register" :title="getTitle">
+    <PageWrapper title="设备配置详情">
+      <Description @register="register1" class="mt-4" />
+    </PageWrapper>
+  </BasicModal>
+</template>
+<script lang="ts">
+  import { defineComponent, ref, computed, unref } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { Description, DescItem, useDescription } from '/@/components/Description/index';
+  import { PageWrapper } from '/@/components/Page';
+  import { deviceConfigGetDetail } from '/@/api/device/deviceConfigApi';
+
+  const schema: DescItem[] = [
+    {
+      field: 'description',
+      label: '描述',
+    },
+    {
+      field: 'enabled',
+      label: '禁用',
+    },
+    {
+      field: 'name',
+      label: '设备配置名称',
+    },
+    {
+      field: 'transportType',
+      label: '传输类型',
+    },
+  ];
+  export default defineComponent({
+    name: 'ConfigDrawer',
+    components: { BasicModal, Description, PageWrapper },
+    emits: ['success', 'register'],
+    setup() {
+      let descInfo = ref(null);
+      const isUpdate = ref(true);
+      const [register] = useModalInner(async (data) => {
+        isUpdate.value = !!data?.isUpdate;
+        let getDescInfo = await deviceConfigGetDetail(data.record.id);
+        descInfo.value = getDescInfo;
+      });
+      const getTitle = computed(() => (!unref(isUpdate) ? '查看设备配置' : '查看设备配置'));
+      const [register1] = useDescription({
+        title: '详情',
+        bordered: false,
+        data: descInfo,
+        schema: schema,
+      });
+      return {
+        register,
+        register1,
+        getTitle,
+      };
+    },
+  });
+</script>

 <template>
 <template>
   <div>
   <div>
-    <BasicTable @register="registerTable">
+    <BasicTable
+      @selection-change="useSelectionChange"
+      @register="registerTable"
+      :rowSelection="{ type: 'checkbox' }"
+    >
       <template #toolbar>
       <template #toolbar>
         <a-button type="primary" @click="handleCreate"> 新增设备配置 </a-button>
         <a-button type="primary" @click="handleCreate"> 新增设备配置 </a-button>
+        <ImpExcel @success="loadDataSuccess" dateFormat="YYYY-MM-DD">
+          <a-button type="info" @click="handleImport"> 导入设备配置 </a-button>
+        </ImpExcel>
+        <a-button type="danger" @click="handleTableDel"> 删除 </a-button>
       </template>
       </template>
       <template #action="{ record }">
       <template #action="{ record }">
         <TableAction
         <TableAction
           :actions="[
           :actions="[
             {
             {
+              label: '详情',
+              icon: 'clarity:note-edit-line',
+              onClick: handleDetailView.bind(null, record),
+            },
+            {
               label: '编辑',
               label: '编辑',
               icon: 'clarity:note-edit-line',
               icon: 'clarity:note-edit-line',
               onClick: handleEdit.bind(null, record),
               onClick: handleEdit.bind(null, record),
             },
             },
             {
             {
+              label: '导出',
+              icon: 'clarity:note-edit-line',
+              onClick: handleExport.bind(null, record),
+            },
+            {
               label: '删除',
               label: '删除',
               icon: 'ant-design:delete-outlined',
               icon: 'ant-design:delete-outlined',
               color: 'error',
               color: 'error',
@@ -25,26 +43,34 @@
         />
         />
       </template>
       </template>
     </BasicTable>
     </BasicTable>
-    <DeviceProfileModal @register="registerModal" @success="handleSuccess" />
+    <DeviceProfileModal v-if="isJudgeStatus" @register="registerModal" @success="handleSuccess" />
+    <DeviceConfigDetail v-if="!isJudgeStatus" @register="registerModal" @success="handleSuccess" />
   </div>
   </div>
 </template>
 </template>
 <script lang="ts">
 <script lang="ts">
-  import { defineComponent } from 'vue';
+  import { defineComponent, ref, reactive } from 'vue';
   import { BasicTable, useTable, TableAction } from '/@/components/Table';
   import { BasicTable, useTable, TableAction } from '/@/components/Table';
   import { columns, searchFormSchema } from './device.profile.data';
   import { columns, searchFormSchema } from './device.profile.data';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { useMessage } from '/@/hooks/web/useMessage';
-  import { deviceProfilePage, deleteDeviceProfile } from '/@/api/device/deviceManager';
+  import { deviceConfigGetQuery, deviceConfigDelete } from '/@/api/device/deviceConfigApi';
   import { useModal } from '/@/components/Modal';
   import { useModal } from '/@/components/Modal';
   import DeviceProfileModal from '/@/views/device/profile/DeviceProfileModal.vue';
   import DeviceProfileModal from '/@/views/device/profile/DeviceProfileModal.vue';
+  import DeviceConfigDetail from '/@/views/device/profile/deviceConfigDetail.vue';
+  // import { aoaToSheetXlsx } from '/@/components/Excel';
+  import { ImpExcel, ExcelData } from '/@/components/Excel';
+
   export default defineComponent({
   export default defineComponent({
     name: 'DeviceProfileManagement',
     name: 'DeviceProfileManagement',
-    components: { BasicTable, DeviceProfileModal, TableAction },
+    components: { BasicTable, DeviceProfileModal, TableAction, ImpExcel, DeviceConfigDetail },
     setup() {
     setup() {
+      let selectedRowKeys: string[] = reactive([]);
+      let isJudgeStatus = ref(true);
       const { createMessage } = useMessage();
       const { createMessage } = useMessage();
       const [registerModal, { openModal }] = useModal();
       const [registerModal, { openModal }] = useModal();
-      const [registerTable, { reload }] = useTable({
+      const [registerTable, { reload, getSelectRowKeys }] = useTable({
         title: '设备配置列表',
         title: '设备配置列表',
-        api: deviceProfilePage,
+        clickToRowSelect: false,
+        api: deviceConfigGetQuery,
         columns,
         columns,
         formConfig: {
         formConfig: {
           labelWidth: 120,
           labelWidth: 120,
@@ -62,10 +88,36 @@
         },
         },
       });
       });
 
 
+      const tableListRef = ref<
+        {
+          title: string;
+          columns?: any[];
+          dataSource?: any[];
+        }[]
+      >([]);
+
+      function loadDataSuccess(excelDataList: ExcelData[]) {
+        tableListRef.value = [];
+        console.log(excelDataList);
+        for (const excelData of excelDataList) {
+          const {
+            header,
+            results,
+            meta: { sheetName },
+          } = excelData;
+          const columns: BasicColumn[] = [];
+          for (const title of header) {
+            columns.push({ title, dataIndex: title });
+          }
+          tableListRef.value.push({ title: sheetName, dataSource: results, columns });
+        }
+      }
+
       function handleCreate() {
       function handleCreate() {
         openModal(true, {
         openModal(true, {
           isUpdate: false,
           isUpdate: false,
         });
         });
+        isJudgeStatus.value = true;
       }
       }
 
 
       function handleEdit(record: Recordable) {
       function handleEdit(record: Recordable) {
@@ -73,20 +125,56 @@
           record,
           record,
           isUpdate: true,
           isUpdate: true,
         });
         });
+        isJudgeStatus.value = true;
+      }
+      const useSelectionChange = () => {
+        selectedRowKeys = getSelectRowKeys();
+      };
+      async function handleTableDel() {
+        await deviceConfigDelete(selectedRowKeys);
+        createMessage.success('删除成功');
+        // reload();
+        handleSuccess();
       }
       }
 
 
       function handleDelete(record: Recordable) {
       function handleDelete(record: Recordable) {
         let ids = [record.id];
         let ids = [record.id];
-        deleteDeviceProfile(ids).then(() => {
+        deviceConfigDelete(ids).then(() => {
           createMessage.success('删除设备配置成功');
           createMessage.success('删除设备配置成功');
           handleSuccess();
           handleSuccess();
         });
         });
       }
       }
 
 
+      async function handleDetailView(record: Recordable) {
+        openModal(true, {
+          record,
+          isUpdate: false,
+        });
+        isJudgeStatus.value = false;
+      }
+      function handleExport(record: Recordable) {
+        console.log(record);
+        // aoaToSheetXlsx({
+        //   // data: record,
+        //   // header: arrHeader,
+        //   filename: '二维数组方式导出excel.xlsx',
+        // });
+      }
+      function handleImport() {
+        console.log('record');
+      }
       function handleSuccess() {
       function handleSuccess() {
         reload();
         reload();
       }
       }
       return {
       return {
+        useSelectionChange,
+        handleTableDel,
+        isJudgeStatus,
+        tableListRef,
+        loadDataSuccess,
+        handleImport,
+        handleExport,
+        handleDetailView,
         registerTable,
         registerTable,
         handleCreate,
         handleCreate,
         handleEdit,
         handleEdit,

@@ -34,18 +34,15 @@
         resetFunc: customResetFunc,
         resetFunc: customResetFunc,
         submitFunc: customSubmitFunc,
         submitFunc: customSubmitFunc,
       });
       });
-
       async function customResetFunc() {
       async function customResetFunc() {
         emit('prev');
         emit('prev');
       }
       }
-
       async function customSubmitFunc() {
       async function customSubmitFunc() {
         try {
         try {
           const values = await validate();
           const values = await validate();
           emit('next', values);
           emit('next', values);
         } catch (error) {}
         } catch (error) {}
       }
       }
-
       return { register };
       return { register };
     },
     },
   });
   });

@@ -58,30 +58,11 @@
     </template>
     </template>
     <div class="flex justify-start">
     <div class="flex justify-start">
       <a-button class="mr-5" @click="prevStep">上一步</a-button>
       <a-button class="mr-5" @click="prevStep">上一步</a-button>
-      <a-button type="primary" @click="addAlarmRule">添加报警规则</a-button>
-      <a-button style="margin-left: 14px" @click="handleClickAddAlertContacts">下一步</a-button>
+      <a-button @click="handleFormStep3toStep4Next">下一步</a-button>
+      <a-button style="margin-left: 20px" type="primary" @click="addAlarmRule"
+        >添加报警规则</a-button
+      >
     </div>
     </div>
-    <BasicModal
-      v-if="statusModel"
-      @register="registerAlert"
-      v-bind="$attrs"
-      :showCancelBtn="true"
-      :showOkBtn="true"
-      :canFullscreen="false"
-      :closable="false"
-      :height="900"
-      :width="500"
-      :maskClosable="false"
-      title="告警通知"
-      :helpMessage="['告警通知']"
-      @ok="handleModal"
-    >
-      <div>
-        <span>请选择告警通知联系人：</span>
-        <Tag v-for="(item, index) in 10" closable @close="log" :key="index"> 冯涛+{{ item }}</Tag>
-      </div>
-      <AlertContacts ref="getAlertContactRef" />
-    </BasicModal>
   </div>
   </div>
 </template>
 </template>
 
 
@@ -98,9 +79,7 @@
     PlusOutlined,
     PlusOutlined,
     EditOutlined,
     EditOutlined,
   } from '@ant-design/icons-vue';
   } from '@ant-design/icons-vue';
-  import { Tooltip, Checkbox, Tag } from 'ant-design-vue';
-  import AlertContacts from '../cpns/index.vue';
-  import { BasicModal, useModal } from '/@/components/Modal';
+  import { Tooltip, Checkbox } from 'ant-design-vue';
 
 
   export default defineComponent({
   export default defineComponent({
     components: {
     components: {
@@ -113,12 +92,10 @@
       EditOutlined,
       EditOutlined,
       Checkbox,
       Checkbox,
       Tooltip,
       Tooltip,
-      BasicModal,
-      AlertContacts,
-      Tag,
     },
     },
-    emits: ['prev'],
+    emits: ['prev', 'next'],
     setup(_, { emit }) {
     setup(_, { emit }) {
+      const getAllFormData: any = ref({});
       //告警列表
       //告警列表
       let alarmList = ref<alarmListItem[]>([]);
       let alarmList = ref<alarmListItem[]>([]);
       const log = (e) => {
       const log = (e) => {
@@ -135,8 +112,8 @@
       const addAlarmRule = () => {
       const addAlarmRule = () => {
         unref(alarmList).push({
         unref(alarmList).push({
           id: Date.now(),
           id: Date.now(),
-          alarmType: '',
-          isPass: false,
+          messageMode: '',
+          enabled: false,
           createRule: [
           createRule: [
             {
             {
               id: Date.now() + Math.random(),
               id: Date.now() + Math.random(),
@@ -152,7 +129,7 @@
       };
       };
 
 
       // 表单部分 报警类型
       // 表单部分 报警类型
-      const [registerForm] = useForm({
+      const [registerForm, { validate: validateRegisterForm }] = useForm({
         labelWidth: 120,
         labelWidth: 120,
         schemas: step3Schemas,
         schemas: step3Schemas,
         showResetButton: false,
         showResetButton: false,
@@ -160,7 +137,7 @@
       });
       });
 
 
       // 高级设置
       // 高级设置
-      const [registerFormHighSetting] = useForm({
+      const [registerFormHighSetting, { validate: validateRegisterFormHighSetting }] = useForm({
         labelWidth: 120,
         labelWidth: 120,
         schemas: step3HighSetting,
         schemas: step3HighSetting,
         showResetButton: false,
         showResetButton: false,
@@ -171,7 +148,7 @@
       });
       });
 
 
       // 添加创建条件表单
       // 添加创建条件表单
-      const [registerFormCreateAlarm] = useForm({
+      const [registerFormCreateAlarm, { validate: validateRegisterFormCreateAlarm }] = useForm({
         labelWidth: 120,
         labelWidth: 120,
         schemas: step3CreateAlarm,
         schemas: step3CreateAlarm,
         showResetButton: false,
         showResetButton: false,
@@ -182,7 +159,7 @@
       });
       });
 
 
       // 清除条件表单
       // 清除条件表单
-      const [registerFormClearAlarm] = useForm({
+      const [registerFormClearAlarm, { validate: validateRegisterFormClearAlarm }] = useForm({
         labelWidth: 120,
         labelWidth: 120,
         schemas: step3ClearAlarm,
         schemas: step3ClearAlarm,
         showResetButton: false,
         showResetButton: false,
@@ -208,22 +185,27 @@
         alarmList.value[index].createRule.splice(createIndex, 1);
         alarmList.value[index].createRule.splice(createIndex, 1);
       };
       };
 
 
-      const statusModel = ref(false);
-      const [registerAlert, { openModal }] = useModal();
-      const handleClickAddAlertContacts = () => {
-        statusModel.value = true;
-        openModal(statusModel.value);
-      };
-      const handleModal = () => {
-        console.log(1);
+      const handleFormStep3toStep4Next = async () => {
+        try {
+          // const values = 1;
+          const valueRegisterForm = await validateRegisterForm();
+          const valueRegisterFormHighSetting = await validateRegisterFormHighSetting();
+          const valueRegisterFormCreateAlarm = await validateRegisterFormCreateAlarm();
+          const valueRegisterFormClearAlarm = await validateRegisterFormClearAlarm();
+          Object.assign(
+            getAllFormData.value,
+            valueRegisterForm,
+            valueRegisterFormHighSetting,
+            valueRegisterFormCreateAlarm,
+            valueRegisterFormClearAlarm
+          );
+          emit('next', getAllFormData.value);
+        } catch (error) {}
       };
       };
 
 
       return {
       return {
-        handleModal,
+        handleFormStep3toStep4Next,
         log,
         log,
-        statusModel,
-        registerAlert,
-        handleClickAddAlertContacts,
         alarmList,
         alarmList,
         deleteAlarmRule,
         deleteAlarmRule,
         prevStep,
         prevStep,

 <template>
 <template>
-  <div class="step3">
-    <h1 v-if="alarmList.length === 0" style="font-size: 24px" class="text-center"
-      >未配置报警规则</h1
-    >
-
-    <template v-else v-for="(item, index) in alarmList" :key="item">
-      <CollapseContainer :title="item.alarmType" style="border: 1px solid #bfbfbf" class="mb-6">
-        <template #action>
-          <div @click="handleDeleteAlarm(index)" class="cursor-pointer">
-            <DeleteOutlined style="font-size: 20px" class="mr-2" />
-          </div>
-        </template>
-        <a-form :wrapper-col="wrapperCol" labelAlign="left" :model="item" :rules="rules">
-          <a-form-item label="报警类型" :labelCol="{ style: { width: '80px' } }" name="alarmType">
-            <a-input v-model:value="item.alarmType" />
-          </a-form-item>
-        </a-form>
-
-        <CollapseContainer>
-          <template #action> 高级设置 </template>
-          <div class="flex" style="align-items: center">
-            <input type="checkbox" v-model="item.isPass" /> <div class="ml-2">传递警报</div>
-          </div>
-
-          <a-form :wrapper-col="wrapperCol" labelAlign="left" v-if="item.isPass">
-            <a-form-item label="传递的关联类型" :labelCol="{ style: { width: '120px' } }">
-              <a-input />
-            </a-form-item>
-          </a-form>
-        </CollapseContainer>
-        <p style="color: #3c3c3c">创建报警规则</p>
-        <template v-for="(item1, index1) in item.alarmRule" :key="item1">
-          <div class="alarm-rule mb-4">
-            <div style="width: 90%; border: 2px solid #8c8c8c; border-radius: 5px" class="flex">
-              <div style="width: 30%; height: 100%; border-right: 1px solid #e0e0e0">
-                <span style="color: #305680; margin-left: 10px">严重程度</span>
-                <a-select :options="options" style="width: 100px; margin-left: 10px" />
-              </div>
-              <div style="width: 70%; height: 100%">
-                <p style="color: #f5594e" class="mt-4 ml-4"
-                  >请添加报警规则条件
-                  <PlusOutlined
-                    class="cursor-pointer ml-4"
-                    style="font-size: 20px"
-                    @click="editAlarmCondition(index, index1)"
-                /></p>
-                <p class="mt-4 ml-4"
-                  >启用规则：始终启用
-                  <EditOutlined class="cursor-pointer ml-4" style="font-size: 20px"
-                /></p>
-                <p class="mt-4 ml-4"
-                  >详情：{{ item1.detail }}
-                  <EditOutlined
-                    @click="item1.detailVisible = true"
-                    class="cursor-pointer ml-4"
-                    style="font-size: 20px"
-                /></p>
-                <p class="mt-4 ml-4">dashboard: <a-select style="width: 180px" /></p>
-              </div>
-            </div>
-            <div style="width: 10%" class="alarm-remove">
-              <a-tooltip title="移除">
-                <MinusCircleOutlined
-                  style="font-size: 25px color:#305680"
-                  class="cursor-pointer"
-                  @click="handleDeleteCondition(index, index1)"
-                />
-              </a-tooltip>
-            </div>
-          </div>
-          <!-- 编辑报警规则条件 -->
-          <a-modal
-            v-model:visible="item1.alarmVisible"
-            title="编辑报警规则条件"
-            centered
-            width="800px"
-            @cancel="handleAlarmCancel(index, index1)"
-            @ok="item1.alarmVisible = false"
-          >
-            <CollapseContainer title="键名筛选器" style="border: 1px solid #bfbfbf" class="mb-6">
-              <a-modal
-                v-model:visible="item1.addKeyFilterVisible"
-                title="添加键名筛选器"
-                centered
-                width="600px"
-                @ok="item1.addKeyFilterVisible = false"
-              >
-                <a-form
-                  :wrapper-col="wrapperCol"
-                  :labelCol="{ style: { width: '80px' } }"
-                  labelAlign="right"
-                >
-                  <a-form-item label="键类型">
-                    <a-select :options="keyTypeOptions" default-value="Timeseries" />
-                  </a-form-item>
-                  <a-form-item label="键名">
-                    <a-input />
-                  </a-form-item>
-                  <a-form-item label="值类型">
-                    <a-select :options="valueTypeOptions" />
-                  </a-form-item>
-                </a-form>
-                <collapseContainer title="筛选器">
-                  <template v-for="filterItem in item1.filterList" :key="filterItem">
-                    <div class="flex justify-between mb-4" style="align-items: center">
-                      <a-select
-                        style="width: 150px"
-                        :options="operatorOptions"
-                        default-value="="
-                      /><a-input style="width: 350px" />
-                      <a-tooltip title="删除筛选器">
-                        <CloseOutlined @click="deleteFilter(index, index1)" />
-                      </a-tooltip>
-                    </div>
-                  </template>
-                  <div class="flex">
-                    <a-button type="primary" class="mr-4" @click="addFilter(index, index1)"
-                      >添加</a-button
-                    >
-                    <a-button type="primary">添加复合</a-button>
-                  </div>
-                </collapseContainer>
-              </a-modal>
-              <div class="flex justify-start">
-                <a-button type="primary" @click="item1.addKeyFilterVisible = true"
-                  >添加键名筛选器</a-button
-                >
-              </div>
-            </CollapseContainer>
-            <CollapseContainer title="筛选器预览" style="border: 1px solid #bfbfbf" class="mb-6" />
-          </a-modal>
-          <!-- 启用规则-->
-          <!-- <a-modal
-            v-model:visible="visible"
-            title="编辑报警规则条件"
-            centered
-            @cancel="handleCancel(index, index1)"
-            @ok="visible = false"
-          >
-            编辑报警规则条件123
-          </a-modal> -->
-
-          <!-- 创建报警规则详情的弹框 -->
-          <a-modal
-            v-model:visible="item1.detailVisible"
-            title="详情"
-            centered
-            @cancel="handleCancel(index, index1)"
-            @ok="item1.detailVisible = false"
-          >
-            <a-textarea v-model:value="item1.detail" placeholder="报警详细信息" :rows="4" />
-          </a-modal>
-        </template>
-        <a-button class="mt-5" @click="addCreateRole(index)"
-          ><PlusCircleOutlined />添加创建条件</a-button
-        >
-        <p style="color: #3c3c3c">清除报警规则</p>
-        <template v-for="(item2, index2) in item.removeRule" :key="item2">
-          <div class="alarm-rule mb-4">
-            <div style="width: 90%; border: 2px solid #8c8c8c; border-radius: 5px" class="flex">
-              <div style="width: 70%; height: 100%">
-                <p style="color: #f5594e" class="mt-4 ml-4"
-                  >请添加报警规则条件
-                  <PlusOutlined class="cursor-pointer ml-4" style="font-size: 20px"
-                /></p>
-                <p class="mt-4 ml-4"
-                  >启用规则：始终启用
-                  <EditOutlined class="cursor-pointer ml-4" style="font-size: 20px"
-                /></p>
-                <p class="mt-4 ml-4"
-                  >详情：{{ item2.detail }}
-                  <EditOutlined
-                    class="cursor-pointer ml-4"
-                    style="font-size: 20px"
-                    @click="editRemoveVisible = true"
-                  />
-                </p>
-
-                <p class="mt-4 ml-4">Mobile dashboard: <a-select style="width: 150px" /></p>
-              </div>
-            </div>
-            <div style="width: 10%" class="alarm-remove">
-              <a-tooltip title="移除">
-                <MinusCircleOutlined
-                  style="font-size: 25px color:#305680"
-                  class="cursor-pointer"
-                  @click="handleDeleteRemoveCondition(index, index2)"
-                />
-              </a-tooltip>
-            </div>
-          </div>
-          <a-modal
-            v-model:visible="editRemoveVisible"
-            title="详情"
-            centered
-            @cancel="handleCancel1(index, index2)"
-            @ok="editRemoveVisible = false"
-          >
-            <a-textarea v-model:value="item2.detail" placeholder="报警详细信息" :rows="4" />
-          </a-modal>
-        </template>
-        <a-button class="mt-5" @click="addRemoveRule(index)"
-          ><PlusCircleOutlined />添加清除条件</a-button
-        >
-      </CollapseContainer>
-    </template>
-    <div class="flex justify-start">
-      <a-button class="mr-5" @click="prevStep">上一步</a-button>
-      <a-button type="primary" @click="addAlarmRule">添加报警规则</a-button>
-    </div>
+  <div>
+    <span>请选择告警通知联系人：</span>
+    <Tag v-for="(item, index) in 15" closable :key="index"> 冯涛+{{ item }}</Tag>
+    <BasicForm :showSubmitButton="false" @register="register" />
   </div>
   </div>
 </template>
 </template>
 <script lang="ts">
 <script lang="ts">
   import { defineComponent, ref } from 'vue';
   import { defineComponent, ref } from 'vue';
-  import {
-    Alert,
-    Divider,
-    Descriptions,
-    Input,
-    Form,
-    FormItem,
-    Button,
-    Select,
-    Tooltip,
-    Textarea,
-    Modal,
-  } from 'ant-design-vue';
-  import {
-    DeleteOutlined,
-    MinusCircleOutlined,
-    PlusCircleOutlined,
-    PlusOutlined,
-    EditOutlined,
-    CloseOutlined,
-  } from '@ant-design/icons-vue';
-  import { CollapseContainer } from '/@/components/Container/index';
-  import { alarmListItem } from '../types/index';
+  import { Tag } from 'ant-design-vue';
+  import { BasicForm, useForm } from '/@/components/Form/index';
+  import { alertContactsSchemas } from '../cpns/config';
+
   export default defineComponent({
   export default defineComponent({
     components: {
     components: {
-      DeleteOutlined,
-      MinusCircleOutlined,
-      PlusCircleOutlined,
-      CollapseContainer,
-      EditOutlined,
-      PlusOutlined,
-      CloseOutlined,
-      [Form.name]: Form,
-      [FormItem.name]: FormItem,
-      [Modal.name]: Modal,
-      [Textarea.name]: Textarea,
-      [Tooltip.name]: Tooltip,
-      [Button.name]: Button,
-      [Input.name]: Input,
-      [Select.name]: Select,
-      [Form.name]: Form,
-      [Form.Item.name]: Form.Item,
-      [Alert.name]: Alert,
-      [Divider.name]: Divider,
-      [Descriptions.name]: Descriptions,
-      [Descriptions.Item.name]: Descriptions.Item,
+      Tag,
+      BasicForm,
     },
     },
     emits: ['prev'],
     emits: ['prev'],
     setup(_, { emit }) {
     setup(_, { emit }) {
-      const alarmList = ref<alarmListItem[]>([]);
-
-      const options = ref([
-        {
-          value: '1',
-          label: '危险',
-        },
-
-        {
-          value: '2',
-          label: '重要',
-        },
-        {
-          value: '3',
-          label: '次要',
-        },
-        {
-          value: '4',
-          label: '警告',
-        },
-        {
-          value: '5',
-          label: '不确定',
-        },
-      ]);
-      const keyTypeOptions = ref([
-        {
-          value: 'properties',
-          label: '属性',
-        },
-
-        {
-          value: 'Timeseries',
-          label: 'Timeseries',
-        },
-        {
-          value: 'constant',
-          label: '常量',
-        },
-      ]);
-      const valueTypeOptions = ref([
-        {
-          value: 'string',
-          label: '字符串',
-        },
-        {
-          value: 'number',
-          label: '数字',
-        },
-        {
-          value: 'boolean',
-          label: '布尔值',
-        },
-        {
-          value: 'dateTime',
-          label: '日期时间',
-        },
-      ]);
-      const operatorOptions = ref([
-        {
-          value: '=',
-          label: '等于',
-        },
-        {
-          value: '!=',
-          label: '不等于',
-        },
-        {
-          value: '>',
-          label: '大于',
-        },
-        {
-          value: '<',
-          label: '小于',
-        },
-        {
-          value: '>=',
-          label: '大于或等于',
-        },
-        {
-          value: '<=',
-          label: '小于或等于',
-        },
-      ]);
-      const rules = {
-        alarmType: [
-          {
-            required: true,
-            message: '报警类型必填',
-            trigger: 'blur',
-          },
-        ],
-      };
-
-      const prevStep = () => {
+      const getValueData: any = ref({});
+      const [register, { setProps, validate }] = useForm({
+        schemas: alertContactsSchemas,
+        actionColOptions: {
+          span: 24,
+        },
+        resetButtonOptions: {
+          text: '上一步',
+        },
+        resetFunc: customResetFunc,
+      });
+      async function customResetFunc() {
         emit('prev');
         emit('prev');
-      };
-      // 添加报警规则
-      const addAlarmRule = () => {
-        alarmList.value.push({
-          alarmType: '',
-          isPass: false,
-          createRule: [],
-          clearRule: [],
-        });
-      };
-      const handleDeleteAlarm = (index: number) => {
-        alarmList.value.splice(index, 1);
-      };
-      // 添加‘创建条件’
-      const addCreateRole = (index: number) => {
-        alarmList.value[index].createRule.push({
-          alarmVisible: false,
-          addKeyFilterVisible: false,
-          detailVisible: false,
-          detail: '',
-          filterList: [],
-        });
-      };
-      const handleDeleteCondition = (index: number, index1: number) => {
-        alarmList.value[index].createRule.splice(index1, 1);
-      };
-
-      // 添加‘清除报警规则’
-      const addRemoveRule = (index: number) => {
-        alarmList.value[index].clearRule.push({
-          detail: '',
-        });
-      };
-      const handleDeleteRemoveCondition = (index: number, index1: number) => {
-        alarmList.value[index].clearRule.splice(index1, 1);
-      };
-
-      // 弹框取消事件 --2个
-      const visible = ref(false);
-      const editRemoveVisible = ref(false);
-      const handleCancel = (index: number, index1: number) => {
-        alarmList.value[index].createRule[index1].detail = '';
-        alarmList.value[index].createRule[index1].detailVisible = false;
-      };
-
-      const handleCancel1 = (index: number, index2: number) => {
-        alarmList.value[index].clearRule[index2].detail = '';
-        editRemoveVisible.value = false;
-      };
-
-      const handleAlarmCancel = (index, index1) => {
-        alarmList.value[index].createRule[index1].alarmVisible = false;
-        console.log('object---');
-      };
-      const editAlarmCondition = (index, index1) => {
-        alarmList.value[index].createRule[index1].alarmVisible = true;
-        console.log('object');
-      };
-      // 添加键名筛选器
-      const addFilter = (index, index1) => {
-        console.log(index, index1);
-        alarmList.value[index].createRule[index1].filterList?.push({
-          operator: '=',
-          value: '',
-        });
-      };
-      const deleteFilter = (index: number, index1: number) => {
-        alarmList.value[index].createRule[index1].filterList?.splice(index1, 1);
-      };
+      }
+      async function getAllFields(getV) {
+        const values = await validate();
+        getValueData.value = values;
+        getV = getValueData.value;
+        return getV;
+      }
       return {
       return {
-        rules,
-        alarmList,
-        options,
-        visible,
-        editRemoveVisible,
-        prevStep,
-        addAlarmRule,
-        addCreateRole,
-        handleDeleteAlarm,
-        handleDeleteCondition,
-        addRemoveRule,
-        handleDeleteRemoveCondition,
-        handleCancel,
-        handleCancel1,
-        handleAlarmCancel,
-        editAlarmCondition,
-        keyTypeOptions,
-        valueTypeOptions,
-        operatorOptions,
-        deleteFilter,
-        addFilter,
-        labelCol: { style: { width: '150px' } },
-        wrapperCol: { span: 18 },
+        customResetFunc,
+        getAllFields,
+        register,
+        setProps,
       };
       };
     },
     },
   });
   });
 </script>
 </script>
-<style lang="less" scoped>
-  .step3 {
-    width: 500px;
-    margin: 0 auto;
-  }
-  .alarm-rule {
-    height: 200px;
-    display: flex;
-    .alarm-remove {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
-  }
-</style>

+<template>
+  <div class="step3">
+    <h1 v-if="alarmList.length === 0" style="font-size: 24px" class="text-center"
+      >未配置报警规则</h1
+    >
+
+    <template v-else v-for="(item, index) in alarmList" :key="item">
+      <CollapseContainer :title="item.alarmType" style="border: 1px solid #bfbfbf" class="mb-6">
+        <template #action>
+          <div @click="handleDeleteAlarm(index)" class="cursor-pointer">
+            <DeleteOutlined style="font-size: 20px" class="mr-2" />
+          </div>
+        </template>
+        <a-form :wrapper-col="wrapperCol" labelAlign="left" :model="item" :rules="rules">
+          <a-form-item label="报警类型" :labelCol="{ style: { width: '80px' } }" name="alarmType">
+            <a-input v-model:value="item.alarmType" />
+          </a-form-item>
+        </a-form>
+
+        <CollapseContainer>
+          <template #action> 高级设置 </template>
+          <div class="flex" style="align-items: center">
+            <input type="checkbox" v-model="item.isPass" /> <div class="ml-2">传递警报</div>
+          </div>
+
+          <a-form :wrapper-col="wrapperCol" labelAlign="left" v-if="item.isPass">
+            <a-form-item label="传递的关联类型" :labelCol="{ style: { width: '120px' } }">
+              <a-input />
+            </a-form-item>
+          </a-form>
+        </CollapseContainer>
+        <p style="color: #3c3c3c">创建报警规则</p>
+        <template v-for="(item1, index1) in item.alarmRule" :key="item1">
+          <div class="alarm-rule mb-4">
+            <div style="width: 90%; border: 2px solid #8c8c8c; border-radius: 5px" class="flex">
+              <div style="width: 30%; height: 100%; border-right: 1px solid #e0e0e0">
+                <span style="color: #305680; margin-left: 10px">严重程度</span>
+                <a-select :options="options" style="width: 100px; margin-left: 10px" />
+              </div>
+              <div style="width: 70%; height: 100%">
+                <p style="color: #f5594e" class="mt-4 ml-4"
+                  >请添加报警规则条件
+                  <PlusOutlined
+                    class="cursor-pointer ml-4"
+                    style="font-size: 20px"
+                    @click="editAlarmCondition(index, index1)"
+                /></p>
+                <p class="mt-4 ml-4"
+                  >启用规则：始终启用
+                  <EditOutlined class="cursor-pointer ml-4" style="font-size: 20px"
+                /></p>
+                <p class="mt-4 ml-4"
+                  >详情：{{ item1.detail }}
+                  <EditOutlined
+                    @click="item1.detailVisible = true"
+                    class="cursor-pointer ml-4"
+                    style="font-size: 20px"
+                /></p>
+                <p class="mt-4 ml-4">dashboard: <a-select style="width: 180px" /></p>
+              </div>
+            </div>
+            <div style="width: 10%" class="alarm-remove">
+              <a-tooltip title="移除">
+                <MinusCircleOutlined
+                  style="font-size: 25px color:#305680"
+                  class="cursor-pointer"
+                  @click="handleDeleteCondition(index, index1)"
+                />
+              </a-tooltip>
+            </div>
+          </div>
+          <!-- 编辑报警规则条件 -->
+          <a-modal
+            v-model:visible="item1.alarmVisible"
+            title="编辑报警规则条件"
+            centered
+            width="800px"
+            @cancel="handleAlarmCancel(index, index1)"
+            @ok="item1.alarmVisible = false"
+          >
+            <CollapseContainer title="键名筛选器" style="border: 1px solid #bfbfbf" class="mb-6">
+              <a-modal
+                v-model:visible="item1.addKeyFilterVisible"
+                title="添加键名筛选器"
+                centered
+                width="600px"
+                @ok="item1.addKeyFilterVisible = false"
+              >
+                <a-form
+                  :wrapper-col="wrapperCol"
+                  :labelCol="{ style: { width: '80px' } }"
+                  labelAlign="right"
+                >
+                  <a-form-item label="键类型">
+                    <a-select :options="keyTypeOptions" default-value="Timeseries" />
+                  </a-form-item>
+                  <a-form-item label="键名">
+                    <a-input />
+                  </a-form-item>
+                  <a-form-item label="值类型">
+                    <a-select :options="valueTypeOptions" />
+                  </a-form-item>
+                </a-form>
+                <collapseContainer title="筛选器">
+                  <template v-for="filterItem in item1.filterList" :key="filterItem">
+                    <div class="flex justify-between mb-4" style="align-items: center">
+                      <a-select
+                        style="width: 150px"
+                        :options="operatorOptions"
+                        default-value="="
+                      /><a-input style="width: 350px" />
+                      <a-tooltip title="删除筛选器">
+                        <CloseOutlined @click="deleteFilter(index, index1)" />
+                      </a-tooltip>
+                    </div>
+                  </template>
+                  <div class="flex">
+                    <a-button type="primary" class="mr-4" @click="addFilter(index, index1)"
+                      >添加</a-button
+                    >
+                    <a-button type="primary">添加复合</a-button>
+                  </div>
+                </collapseContainer>
+              </a-modal>
+              <div class="flex justify-start">
+                <a-button type="primary" @click="item1.addKeyFilterVisible = true"
+                  >添加键名筛选器</a-button
+                >
+              </div>
+            </CollapseContainer>
+            <CollapseContainer title="筛选器预览" style="border: 1px solid #bfbfbf" class="mb-6" />
+          </a-modal>
+          <!-- 启用规则-->
+          <!-- <a-modal
+            v-model:visible="visible"
+            title="编辑报警规则条件"
+            centered
+            @cancel="handleCancel(index, index1)"
+            @ok="visible = false"
+          >
+            编辑报警规则条件123
+          </a-modal> -->
+
+          <!-- 创建报警规则详情的弹框 -->
+          <a-modal
+            v-model:visible="item1.detailVisible"
+            title="详情"
+            centered
+            @cancel="handleCancel(index, index1)"
+            @ok="item1.detailVisible = false"
+          >
+            <a-textarea v-model:value="item1.detail" placeholder="报警详细信息" :rows="4" />
+          </a-modal>
+        </template>
+        <a-button class="mt-5" @click="addCreateRole(index)"
+          ><PlusCircleOutlined />添加创建条件</a-button
+        >
+        <p style="color: #3c3c3c">清除报警规则</p>
+        <template v-for="(item2, index2) in item.removeRule" :key="item2">
+          <div class="alarm-rule mb-4">
+            <div style="width: 90%; border: 2px solid #8c8c8c; border-radius: 5px" class="flex">
+              <div style="width: 70%; height: 100%">
+                <p style="color: #f5594e" class="mt-4 ml-4"
+                  >请添加报警规则条件
+                  <PlusOutlined class="cursor-pointer ml-4" style="font-size: 20px"
+                /></p>
+                <p class="mt-4 ml-4"
+                  >启用规则：始终启用
+                  <EditOutlined class="cursor-pointer ml-4" style="font-size: 20px"
+                /></p>
+                <p class="mt-4 ml-4"
+                  >详情：{{ item2.detail }}
+                  <EditOutlined
+                    class="cursor-pointer ml-4"
+                    style="font-size: 20px"
+                    @click="editRemoveVisible = true"
+                  />
+                </p>
+
+                <p class="mt-4 ml-4">Mobile dashboard: <a-select style="width: 150px" /></p>
+              </div>
+            </div>
+            <div style="width: 10%" class="alarm-remove">
+              <a-tooltip title="移除">
+                <MinusCircleOutlined
+                  style="font-size: 25px color:#305680"
+                  class="cursor-pointer"
+                  @click="handleDeleteRemoveCondition(index, index2)"
+                />
+              </a-tooltip>
+            </div>
+          </div>
+          <a-modal
+            v-model:visible="editRemoveVisible"
+            title="详情"
+            centered
+            @cancel="handleCancel1(index, index2)"
+            @ok="editRemoveVisible = false"
+          >
+            <a-textarea v-model:value="item2.detail" placeholder="报警详细信息" :rows="4" />
+          </a-modal>
+        </template>
+        <a-button class="mt-5" @click="addRemoveRule(index)"
+          ><PlusCircleOutlined />添加清除条件</a-button
+        >
+      </CollapseContainer>
+    </template>
+    <div class="flex justify-start">
+      <a-button class="mr-5" @click="prevStep">上一步</a-button>
+      <a-button type="primary" @click="addAlarmRule">添加报警规则</a-button>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent, ref } from 'vue';
+  import {
+    Alert,
+    Divider,
+    Descriptions,
+    Input,
+    Form,
+    FormItem,
+    Button,
+    Select,
+    Tooltip,
+    Textarea,
+    Modal,
+  } from 'ant-design-vue';
+  import {
+    DeleteOutlined,
+    MinusCircleOutlined,
+    PlusCircleOutlined,
+    PlusOutlined,
+    EditOutlined,
+    CloseOutlined,
+  } from '@ant-design/icons-vue';
+  import { CollapseContainer } from '/@/components/Container/index';
+  import { alarmListItem } from '../types/index';
+  export default defineComponent({
+    components: {
+      DeleteOutlined,
+      MinusCircleOutlined,
+      PlusCircleOutlined,
+      CollapseContainer,
+      EditOutlined,
+      PlusOutlined,
+      CloseOutlined,
+      [Form.name]: Form,
+      [FormItem.name]: FormItem,
+      [Modal.name]: Modal,
+      [Textarea.name]: Textarea,
+      [Tooltip.name]: Tooltip,
+      [Button.name]: Button,
+      [Input.name]: Input,
+      [Select.name]: Select,
+      [Form.name]: Form,
+      [Form.Item.name]: Form.Item,
+      [Alert.name]: Alert,
+      [Divider.name]: Divider,
+      [Descriptions.name]: Descriptions,
+      [Descriptions.Item.name]: Descriptions.Item,
+    },
+    emits: ['prev'],
+    setup(_, { emit }) {
+      const alarmList = ref<alarmListItem[]>([]);
+
+      const options = ref([
+        {
+          value: '1',
+          label: '危险',
+        },
+
+        {
+          value: '2',
+          label: '重要',
+        },
+        {
+          value: '3',
+          label: '次要',
+        },
+        {
+          value: '4',
+          label: '警告',
+        },
+        {
+          value: '5',
+          label: '不确定',
+        },
+      ]);
+      const keyTypeOptions = ref([
+        {
+          value: 'properties',
+          label: '属性',
+        },
+
+        {
+          value: 'Timeseries',
+          label: 'Timeseries',
+        },
+        {
+          value: 'constant',
+          label: '常量',
+        },
+      ]);
+      const valueTypeOptions = ref([
+        {
+          value: 'string',
+          label: '字符串',
+        },
+        {
+          value: 'number',
+          label: '数字',
+        },
+        {
+          value: 'boolean',
+          label: '布尔值',
+        },
+        {
+          value: 'dateTime',
+          label: '日期时间',
+        },
+      ]);
+      const operatorOptions = ref([
+        {
+          value: '=',
+          label: '等于',
+        },
+        {
+          value: '!=',
+          label: '不等于',
+        },
+        {
+          value: '>',
+          label: '大于',
+        },
+        {
+          value: '<',
+          label: '小于',
+        },
+        {
+          value: '>=',
+          label: '大于或等于',
+        },
+        {
+          value: '<=',
+          label: '小于或等于',
+        },
+      ]);
+      const rules = {
+        alarmType: [
+          {
+            required: true,
+            message: '报警类型必填',
+            trigger: 'blur',
+          },
+        ],
+      };
+
+      const prevStep = () => {
+        emit('prev');
+      };
+      // 添加报警规则
+      const addAlarmRule = () => {
+        alarmList.value.push({
+          alarmType: '',
+          isPass: false,
+          createRule: [],
+          clearRule: [],
+        });
+      };
+      const handleDeleteAlarm = (index: number) => {
+        alarmList.value.splice(index, 1);
+      };
+      // 添加‘创建条件’
+      const addCreateRole = (index: number) => {
+        alarmList.value[index].createRule.push({
+          alarmVisible: false,
+          addKeyFilterVisible: false,
+          detailVisible: false,
+          detail: '',
+          filterList: [],
+        });
+      };
+      const handleDeleteCondition = (index: number, index1: number) => {
+        alarmList.value[index].createRule.splice(index1, 1);
+      };
+
+      // 添加‘清除报警规则’
+      const addRemoveRule = (index: number) => {
+        alarmList.value[index].clearRule.push({
+          detail: '',
+        });
+      };
+      const handleDeleteRemoveCondition = (index: number, index1: number) => {
+        alarmList.value[index].clearRule.splice(index1, 1);
+      };
+
+      // 弹框取消事件 --2个
+      const visible = ref(false);
+      const editRemoveVisible = ref(false);
+      const handleCancel = (index: number, index1: number) => {
+        alarmList.value[index].createRule[index1].detail = '';
+        alarmList.value[index].createRule[index1].detailVisible = false;
+      };
+
+      const handleCancel1 = (index: number, index2: number) => {
+        alarmList.value[index].clearRule[index2].detail = '';
+        editRemoveVisible.value = false;
+      };
+
+      const handleAlarmCancel = (index, index1) => {
+        alarmList.value[index].createRule[index1].alarmVisible = false;
+        console.log('object---');
+      };
+      const editAlarmCondition = (index, index1) => {
+        alarmList.value[index].createRule[index1].alarmVisible = true;
+        console.log('object');
+      };
+      // 添加键名筛选器
+      const addFilter = (index, index1) => {
+        console.log(index, index1);
+        alarmList.value[index].createRule[index1].filterList?.push({
+          operator: '=',
+          value: '',
+        });
+      };
+      const deleteFilter = (index: number, index1: number) => {
+        alarmList.value[index].createRule[index1].filterList?.splice(index1, 1);
+      };
+      return {
+        rules,
+        alarmList,
+        options,
+        visible,
+        editRemoveVisible,
+        prevStep,
+        addAlarmRule,
+        addCreateRole,
+        handleDeleteAlarm,
+        handleDeleteCondition,
+        addRemoveRule,
+        handleDeleteRemoveCondition,
+        handleCancel,
+        handleCancel1,
+        handleAlarmCancel,
+        editAlarmCondition,
+        keyTypeOptions,
+        valueTypeOptions,
+        operatorOptions,
+        deleteFilter,
+        addFilter,
+        labelCol: { style: { width: '150px' } },
+        wrapperCol: { span: 18 },
+      };
+    },
+  });
+</script>
+<style lang="less" scoped>
+  .step3 {
+    width: 500px;
+    margin: 0 auto;
+  }
+  .alarm-rule {
+    height: 200px;
+    display: flex;
+    .alarm-remove {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+</style>

 import { FormSchema } from '/@/components/Form';
 import { FormSchema } from '/@/components/Form';
 import { findDictItemByCode } from '/@/api/system/dict';
 import { findDictItemByCode } from '/@/api/system/dict';
+import { getOrganizationList } from '/@/api/system/system';
+import { copyTransFun } from '/@/utils/fnUtils';
+import { deviceConfigGetRuleChain } from '/@/api/device/deviceConfigApi';
 
 
 export const step1Schemas: FormSchema[] = [
 export const step1Schemas: FormSchema[] = [
   {
   {
@@ -12,7 +15,30 @@ export const step1Schemas: FormSchema[] = [
     },
     },
   },
   },
   {
   {
-    field: 'deviceType',
+    required: true,
+    field: 'organizationId',
+    label: '请选择组织',
+    component: 'ApiTreeSelect',
+    componentProps: {
+      api: async () => {
+        const data = await getOrganizationList();
+        copyTransFun(data as any as any[]);
+        return data;
+      },
+    },
+  },
+  {
+    field: 'defaultRuleChainId',
+    label: '请选择规则链',
+    component: 'ApiSelect',
+    componentProps: {
+      api: deviceConfigGetRuleChain,
+      labelField: 'name',
+      valueField: 'type',
+    },
+  },
+  {
+    field: 'defaultConfig',
     label: '队列优先级',
     label: '队列优先级',
     component: 'ApiSelect',
     component: 'ApiSelect',
     componentProps: {
     componentProps: {
@@ -25,8 +51,8 @@ export const step1Schemas: FormSchema[] = [
     },
     },
   },
   },
   {
   {
-    label: '备注',
-    field: 'remark',
+    label: '描述',
+    field: 'description',
     component: 'InputTextArea',
     component: 'InputTextArea',
   },
   },
 ];
 ];
@@ -36,16 +62,39 @@ export const step2Schemas: FormSchema[] = [
     field: 'transportType',
     field: 'transportType',
     component: 'Select',
     component: 'Select',
     label: '传输方式',
     label: '传输方式',
-    defaultValue: 'DEFAULT',
+    defaultValue: 'COAP',
+    componentProps: {
+      options: [
+        { label: 'MQTT', value: 'MQTT' },
+        { label: 'TCP', value: 'TCP' },
+        { label: 'COAP', value: 'COAP' },
+      ],
+    },
+  },
+  {
+    field: 'Topic',
+    component: 'Input',
+    label: 'Topic',
     componentProps: {
     componentProps: {
-      options: [{ label: '默认', value: 'DEFAULT' }],
+      placeholder: '请输入',
+    },
+  },
+  {
+    field: 'Payload',
+    component: 'Select',
+    label: 'Payload',
+    componentProps: {
+      options: [
+        { label: 'JSON', value: 'DEFAULT' },
+        { label: 'Protobuf', value: 'DEFAULT' },
+      ],
     },
     },
   },
   },
 ];
 ];
 
 
 export const step3Schemas: FormSchema[] = [
 export const step3Schemas: FormSchema[] = [
   {
   {
-    field: 'transportType',
+    field: 'description',
     component: 'Input',
     component: 'Input',
     label: '报警类型',
     label: '报警类型',
     required: true,
     required: true,
@@ -57,19 +106,19 @@ export const step3Schemas: FormSchema[] = [
 
 
 export const step3HighSetting: FormSchema[] = [
 export const step3HighSetting: FormSchema[] = [
   {
   {
-    field: 'isPass',
+    field: 'enabled',
     component: 'Checkbox',
     component: 'Checkbox',
     label: '',
     label: '',
     slot: 'checkBox',
     slot: 'checkBox',
   },
   },
   {
   {
-    field: 'associationType',
+    field: 'messageMode',
     component: 'Input',
     component: 'Input',
     label: '关联类型',
     label: '关联类型',
     componentProps: {
     componentProps: {
       placeholder: '要传递的关联类型',
       placeholder: '要传递的关联类型',
     },
     },
-    ifShow: ({ values }) => !!values.isPass,
+    ifShow: ({ values }) => !!values.enabled,
   },
   },
 ];
 ];
 
 

@@ -15,8 +15,8 @@ interface clearRule {
 }
 }
 export interface alarmListItem {
 export interface alarmListItem {
   id: number;
   id: number;
-  alarmType: string;
-  isPass: boolean;
+  messageMode: string;
+  enabled: boolean;
   createRule: createRule[];
   createRule: createRule[];
   clearRule: clearRule[];
   clearRule: clearRule[];
 }
 }

@@ -101,7 +101,6 @@
 
 
       const useSelectionChange = () => {
       const useSelectionChange = () => {
         selectedRowKeys = getSelectRowKeys();
         selectedRowKeys = getSelectRowKeys();
-        selectedRowKeys.join(',');
       };
       };
 
 
       async function handleToolbarDel() {
       async function handleToolbarDel() {
@@ -124,7 +123,7 @@
         isJudgeStatus.value = true;
         isJudgeStatus.value = true;
       }
       }
       async function handleDelete(record: Recordable) {
       async function handleDelete(record: Recordable) {
-        let ids = record.id;
+        let ids = [record.id];
         await notifyDeleteApi(ids);
         await notifyDeleteApi(ids);
         createMessage.success('删除成功');
         createMessage.success('删除成功');
         reload();
         reload();