Merge branch 'sqy_dev' into 'main'

feat:告警页面及逻辑编写,告警中心页面开发，设备凭证调试...

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

@@ -82,13 +82,6 @@ export const createOrEditDevice = (data) => {
   });
 };
 
-// 获取设备唯一token
-export const getDeviceToken = () => {
-  return defHttp.get({
-    url: '/common',
-  });
-};
-
 // 查询设备详情
 export const getDeviceDetail = (id: string) => {
   return defHttp.get({

@@ -49,6 +49,7 @@ export default {
     alarmManagement: 'alarm management',
     geographicPosition: 'geographic position',
     alarmContact: 'alarm contact',
+    alarmCenter: 'alarm center',
   },
 
   dept: {

@@ -62,6 +62,7 @@ export default {
     alarmManagement: '告警管理',
     geographicPosition: '地理位置',
     alarmContact: '告警联系人',
+    alarmCenter: '告警中心',
   },
   system: {
     system: '系统管理',

+import { alarmLevel, statusType } from '/@/views/device/manage/config/detail.config';
+import { FormSchema } from '/@/components/Form';
+import { BasicColumn } from '/@/components/Table';
+export const alarmSearchSchemas: FormSchema[] = [
+  {
+    field: 'status',
+    label: '告警状态',
+    component: 'Select',
+    colProps: { span: 6 },
+    componentProps: {
+      options: [
+        {
+          label: '清除未确认',
+          value: 'CLEARED_UNACK',
+        },
+        {
+          label: '激活未确认',
+          value: 'ACTIVE_UNACK',
+        },
+        {
+          label: '清除已确认',
+          value: 'CLEARED_ACK',
+        },
+        {
+          label: '激活已确认',
+          value: 'ACTIVE_ACK',
+        },
+      ],
+    },
+  },
+  {
+    field: 'alarmType',
+    label: '告警类型',
+    component: 'Input',
+    colProps: { span: 6 },
+  },
+  {
+    field: 'time',
+    label: '告警时间范围',
+    component: 'RangePicker',
+    componentProps: {},
+    colProps: { span: 6 },
+  },
+];
+export const alarmColumns: BasicColumn[] = [
+  {
+    title: '告警时间',
+    dataIndex: 'createdTime',
+    width: 120,
+  },
+  {
+    title: '告警设备',
+    dataIndex: 'deviceName',
+    width: 100,
+  },
+  {
+    title: '类型',
+    dataIndex: 'type',
+    width: 160,
+  },
+  {
+    title: '告警级别',
+    dataIndex: 'severity',
+    width: 160,
+    format: (text) => alarmLevel(text),
+  },
+  {
+    title: '状态',
+    dataIndex: 'status',
+    format: (text) => statusType(text),
+    width: 160,
+  },
+];
+
+export const alarmSchemasForm: FormSchema[] = [
+  {
+    field: 'deviceName',
+    label: '告警设备',
+    component: 'Input',
+    componentProps: {
+      disabled: true,
+    },
+  },
+
+  {
+    field: 'startTs',
+    label: '开始时间',
+    component: 'Input',
+    componentProps: {
+      disabled: true,
+    },
+  },
+  {
+    field: 'endTs',
+    label: '结束时间',
+    component: 'Input',
+    componentProps: {
+      disabled: true,
+    },
+  },
+  {
+    field: 'ackTs',
+    label: '处理时间',
+    component: 'Input',
+    componentProps: {
+      disabled: true,
+    },
+    ifShow: ({ values }) => values.status === '激活已确认' || values.status === '清除已确认',
+  },
+  {
+    field: 'clearTs',
+    label: '清除时间',
+    component: 'Input',
+    componentProps: {
+      disabled: true,
+    },
+    ifShow: ({ values }) => values.status === '清除已确认' || values.status === '清除未确认',
+  },
+  {
+    field: 'type',
+    label: '告警类型',
+    component: 'Input',
+    componentProps: {
+      disabled: true,
+    },
+  },
+  {
+    field: 'severity',
+    label: '严重程度',
+    component: 'Input',
+    componentProps: {
+      disabled: true,
+    },
+  },
+  {
+    field: 'status',
+    label: '状态',
+    component: 'Input',
+    componentProps: {
+      disabled: true,
+    },
+  },
+  {
+    field: 'details',
+    label: '详情',
+    component: 'InputTextArea',
+  },
+];

+<template>
+  <BasicDrawer v-bind="$attrs" title="告警详情" @register="registerDrawer" width="30%">
+    <BasicForm @register="registerForm" />
+    <div class="flex justify-end">
+      <a-button
+        type="primary"
+        class="mr-4"
+        @click="handleAlarm"
+        v-if="alarmStatus !== 'ACTIVE_ACK' && alarmStatus !== 'CLEARED_ACK'"
+        >处理</a-button
+      >
+      <a-button
+        danger
+        type="primary"
+        @click="clearAlarm"
+        v-if="alarmStatus !== 'CLEARED_UNACK' && alarmStatus !== 'CLEARED_ACK'"
+        >清除</a-button
+      >
+    </div>
+  </BasicDrawer>
+</template>
+
+<script lang="ts">
+  import { defineComponent, ref, unref } from 'vue';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { alarmSchemasForm } from '../config/detail.config';
+  import { clearOrAckAlarm } from '/@/api/device/deviceManager';
+  import { alarmLevel, statusType } from '/@/views/device/manage/config/detail.config';
+  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
+  export default defineComponent({
+    name: 'AlarmDetailDrawer',
+    components: {
+      BasicForm,
+      BasicDrawer,
+    },
+    emits: ['success', 'register'],
+    setup(_, { emit }) {
+      const [registerForm, { setFieldsValue, resetFields }] = useForm({
+        showActionButtonGroup: false,
+        schemas: alarmSchemasForm,
+        labelCol: {
+          span: 5,
+        },
+      });
+      const alarmId = ref('');
+      const alarmStatus = ref('');
+      const [registerDrawer, { closeDrawer }] = useDrawerInner(async (data) => {
+        await resetFields();
+        await setFieldsValue({
+          ...data,
+          severity: alarmLevel(data.severity),
+          status: statusType(data.status),
+        });
+        console.log(data.status);
+        alarmStatus.value = data.status;
+        alarmId.value = data.id;
+      });
+      // 处理报警
+      const handleAlarm = async () => {
+        await clearOrAckAlarm(unref(alarmId), false);
+        emit('success');
+        closeDrawer();
+      };
+      // 清除报警
+      const clearAlarm = async () => {
+        await clearOrAckAlarm(unref(alarmId), true);
+        emit('success');
+        closeDrawer();
+      };
+      return {
+        registerDrawer,
+        registerForm,
+        clearAlarm,
+        handleAlarm,
+        alarmStatus,
+      };
+    },
+  });
+</script>
+
+<style lang="less" scoped></style>

+<template>
+  <div>
+    <BasicTable @register="registerTable">
+      <template #action="{ record }">
+        <TableAction
+          :actions="[
+            {
+              label: '详情',
+              icon: 'ant-design:eye-outlined',
+              onClick: handleDetail.bind(null, record),
+            },
+          ]"
+        />
+      </template>
+    </BasicTable>
+    <AlarmDetailDrawer @register="registerDetailDrawer" @success="handleSuccess" />
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import { BasicTable, useTable, TableAction } from '/@/components/Table';
+  import { alarmColumns, alarmSearchSchemas } from './config/detail.config';
+  import { getDeviceAlarm } from '/@/api/device/deviceManager';
+  import AlarmDetailDrawer from './cpns/AlarmDetailDrawer.vue';
+  import { useDrawer } from '/@/components/Drawer';
+  export default defineComponent({
+    name: 'DeviceManagement',
+    components: {
+      BasicTable,
+      TableAction,
+      AlarmDetailDrawer,
+    },
+
+    setup() {
+      const [registerTable, { reload }] = useTable({
+        api: getDeviceAlarm,
+        columns: alarmColumns,
+        formConfig: {
+          labelWidth: 120,
+          schemas: alarmSearchSchemas,
+          fieldMapToTime: [['time', ['startTime', 'endTime'], 'x']],
+        },
+        useSearchForm: true,
+        bordered: true,
+        showIndexColumn: false,
+        actionColumn: {
+          width: 200,
+          title: '操作',
+          slots: { customRender: 'action' },
+          fixed: 'right',
+        },
+        beforeFetch: (data) => {
+          Reflect.set(data, 'startTime', null);
+        },
+      });
+      const [registerDetailDrawer, { openDrawer }] = useDrawer();
+      const handleDetail = (record: Recordable) => {
+        openDrawer(true, record);
+      };
+      const handleSuccess = () => {
+        reload();
+      };
+      return {
+        registerTable,
+        registerDetailDrawer,
+        handleDetail,
+        handleSuccess,
+      };
+    },
+  });
+</script>

@@ -84,12 +84,6 @@ export const step1Schemas: FormSchema[] = [
     show: false,
   },
   {
-    field: 'deviceToken',
-    label: '设备唯一token',
-    component: 'Input',
-    show: false,
-  },
-  {
     field: 'tenantId',
     label: '租户Code',
     component: 'Input',
@@ -103,6 +97,11 @@ export const step1Schemas: FormSchema[] = [
   },
 ];
 
+export enum credentialTypeEnum {
+  ACCESS_TOKEN = 'ACCESS_TOKEN',
+  X_509 = 'X509_CERTIFICATE',
+  MQTT_BASIC = 'MQTT_BASIC',
+}
 // 第二步的表单
 export const step2Schemas: FormSchema[] = [
   {
@@ -114,37 +113,37 @@ export const step2Schemas: FormSchema[] = [
   {
     label: '凭据类型',
     component: 'Select',
-    field: 'creaentialsType',
+    field: 'credentialType',
+    required: true,
     componentProps({ formActionType }) {
       const { updateSchema, setFieldsValue } = formActionType;
       return {
         options: [
           {
-            value: 'Access token',
-            label: 'Access token',
+            value: credentialTypeEnum.ACCESS_TOKEN,
+            label: 'Access Token',
           },
-
           {
-            value: 'X.509',
+            value: credentialTypeEnum.X_509,
             label: 'X.509',
           },
           {
-            value: 'MQTT Basic',
+            value: credentialTypeEnum.MQTT_BASIC,
             label: 'MQTT Basic',
           },
         ],
         onChange(value) {
           setFieldsValue({
             publicKey: '',
-            token: '',
+            credentialsId: '',
             clientId: '',
             username: '',
             password: '',
           });
-          if (value === 'Access token') {
+          if (value === credentialTypeEnum.ACCESS_TOKEN) {
             updateSchema([
               {
-                field: 'token',
+                field: 'credentialsId',
                 ifShow: true,
               },
               {
@@ -164,14 +163,14 @@ export const step2Schemas: FormSchema[] = [
                 ifShow: false,
               },
             ]);
-          } else if (value === 'X.509') {
+          } else if (value === credentialTypeEnum.X_509) {
             updateSchema([
               {
                 field: 'publicKey',
                 ifShow: true,
               },
               {
-                field: 'token',
+                field: 'credentialsId',
                 ifShow: false,
               },
               {
@@ -187,7 +186,7 @@ export const step2Schemas: FormSchema[] = [
                 ifShow: false,
               },
             ]);
-          } else {
+          } else if (value === credentialTypeEnum.MQTT_BASIC) {
             updateSchema([
               {
                 field: 'clientId',
@@ -206,7 +205,30 @@ export const step2Schemas: FormSchema[] = [
                 ifShow: false,
               },
               {
-                field: 'token',
+                field: 'credentialsId',
+                ifShow: false,
+              },
+            ]);
+          } else {
+            updateSchema([
+              {
+                field: 'clientId',
+                ifShow: false,
+              },
+              {
+                field: 'username',
+                ifShow: false,
+              },
+              {
+                field: 'password',
+                ifShow: false,
+              },
+              {
+                field: 'publicKey',
+                ifShow: false,
+              },
+              {
+                field: 'credentialsId',
                 ifShow: false,
               },
             ]);
@@ -219,7 +241,7 @@ export const step2Schemas: FormSchema[] = [
   {
     label: '访问令牌',
     component: 'Input',
-    field: 'token',
+    field: 'credentialsId',
     required: true,
     ifShow: false,
   },

@@ -2,7 +2,6 @@ import { formatToDateTime } from '/@/utils/dateUtil';
 import { FormSchema } from '/@/components/Form';
 import { BasicColumn } from '/@/components/Table';
 import { DeviceTypeEnum } from '/@/api/device/model/deviceModel';
-import {} from '';
 
 export const columns: BasicColumn[] = [
   {
@@ -43,16 +42,7 @@ export const columns: BasicColumn[] = [
     key: 'description',
   },
 ];
-
-// 实时数据
-export const realTimeDataSearchSchemas: FormSchema[] = [
-  {
-    field: 'key',
-    label: '键 / 值',
-    component: 'Input',
-    colProps: { span: 8 },
-  },
-];
+// 实时数据表格
 export const realTimeDataColumns: BasicColumn[] = [
   {
     title: '键',
@@ -101,18 +91,16 @@ export const alarmSearchSchemas: FormSchema[] = [
     },
   },
   {
-    field: 'type',
+    field: 'alarmType',
     label: '告警类型',
     component: 'Input',
     colProps: { span: 6 },
   },
   {
-    field: 'startTime',
-    label: '      ',
-    component: 'DatePicker',
-    componentProps: {
-      format: (value) => dayjs(value).valueOf(),
-    },
+    field: 'time',
+    label: '告警时间范围',
+    component: 'RangePicker',
+    componentProps: {},
     colProps: { span: 6 },
   },
 ];
@@ -145,30 +133,6 @@ export const alarmColumns: BasicColumn[] = [
     width: 160,
   },
 ];
-const alarmLevel = (type: string): string => {
-  if (type === 'CRITICAL') {
-    return '危险';
-  } else if (type === 'MAJOR') {
-    return '重要';
-  } else if (type === 'MINOR') {
-    return '次要';
-  } else if (type === 'WARNING') {
-    return '警告';
-  } else {
-    return '不确定';
-  }
-};
-const statusType = (type: string): string => {
-  if (type === 'CLEARED_UNACK') {
-    return '清除未确认';
-  } else if (type === 'CLEARED_ACK') {
-    return '清除已确认';
-  } else if (type === 'ACTIVE_ACK') {
-    return '激活已确认';
-  } else {
-    return '激活未确认';
-  }
-};
 
 export const alarmSchemasForm: FormSchema[] = [
   {
@@ -197,6 +161,24 @@ export const alarmSchemasForm: FormSchema[] = [
     },
   },
   {
+    field: 'ackTs',
+    label: '处理时间',
+    component: 'Input',
+    componentProps: {
+      disabled: true,
+    },
+    ifShow: ({ values }) => values.status === '激活已确认' || values.status === '清除已确认',
+  },
+  {
+    field: 'clearTs',
+    label: '清除时间',
+    component: 'Input',
+    componentProps: {
+      disabled: true,
+    },
+    ifShow: ({ values }) => values.status === '清除已确认' || values.status === '清除未确认',
+  },
+  {
     field: 'type',
     label: '告警类型',
     component: 'Input',
@@ -224,9 +206,6 @@ export const alarmSchemasForm: FormSchema[] = [
     field: 'details',
     label: '详情',
     component: 'InputTextArea',
-    componentProps: {
-      disabled: true,
-    },
   },
 ];
 
@@ -277,3 +256,28 @@ export const childDeviceColumns: BasicColumn[] = [
     width: 160,
   },
 ];
+
+export const alarmLevel = (type: string): string => {
+  if (type === 'CRITICAL') {
+    return '危险';
+  } else if (type === 'MAJOR') {
+    return '重要';
+  } else if (type === 'MINOR') {
+    return '次要';
+  } else if (type === 'WARNING') {
+    return '警告';
+  } else {
+    return '不确定';
+  }
+};
+export const statusType = (type: string): string => {
+  if (type === 'CLEARED_UNACK') {
+    return '清除未确认';
+  } else if (type === 'CLEARED_ACK') {
+    return '清除已确认';
+  } else if (type === 'ACTIVE_ACK') {
+    return '激活已确认';
+  } else {
+    return '激活未确认';
+  }
+};

@@ -8,8 +8,20 @@
   >
     <BasicForm @register="registerForm" />
     <div class="flex justify-end">
-      <a-button type="primary" class="mr-4" @click="handleAlarm">处理</a-button>
-      <a-button type="danger" @click="clearAlarm">清除</a-button>
+      <a-button
+        type="primary"
+        class="mr-4"
+        @click="handleAlarm"
+        v-if="alarmStatus !== 'ACTIVE_ACK' && alarmStatus !== 'CLEARED_ACK'"
+        >处理</a-button
+      >
+      <a-button
+        danger
+        type="primary"
+        @click="clearAlarm"
+        v-if="alarmStatus !== 'CLEARED_UNACK' && alarmStatus !== 'CLEARED_ACK'"
+        >清除</a-button
+      >
     </div>
   </BasicModal>
 </template>
@@ -20,32 +32,44 @@
   import { BasicForm, useForm } from '/@/components/Form';
   import { alarmSchemasForm } from '../../config/detail.config';
   import { clearOrAckAlarm } from '/@/api/device/deviceManager';
+  import { alarmLevel, statusType } from '../../config/detail.config';
   export default defineComponent({
-    name: 'AlarmDetailDrawer',
+    name: 'AlarmDetailModal',
     components: {
       BasicModal,
       BasicForm,
     },
-    setup() {
+    emits: ['success', 'register'],
+    setup(_, { emit }) {
       const [registerForm, { setFieldsValue, resetFields }] = useForm({
         showActionButtonGroup: false,
         schemas: alarmSchemasForm,
+        labelCol: {
+          span: 5,
+        },
       });
       const alarmId = ref('');
+      const alarmStatus = ref('');
       const [registerModal, { closeModal }] = useModalInner(async (data) => {
         await resetFields();
-        await setFieldsValue(data);
+        await setFieldsValue({
+          ...data,
+          severity: alarmLevel(data.severity),
+          status: statusType(data.status),
+        });
         alarmId.value = data.id;
-        console.log(data);
+        alarmStatus.value = data.status;
       });
       // 处理报警
       const handleAlarm = async () => {
         await clearOrAckAlarm(unref(alarmId), false);
+        emit('success');
         closeModal();
       };
       // 清除报警
       const clearAlarm = async () => {
         await clearOrAckAlarm(unref(alarmId), true);
+        emit('success');
         closeModal();
       };
       return {
@@ -53,6 +77,7 @@
         registerForm,
         clearAlarm,
         handleAlarm,
+        alarmStatus,
       };
     },
   });

@@ -6,12 +6,13 @@
     @register="register"
     @cancel="handleCancel"
     @ok="handleOk"
+    destroyOnClose
     centered
   >
     <div class="step-form-form">
       <Steps :current="current">
-        <Step title="填写设备信息" />
-        <Step title="添加设备凭证" />
+        <Step title="填写设备信息" v-if="!isUpdate" />
+        <Step title="添加设备凭证" v-if="!isUpdate" />
       </Steps>
     </div>
     <div class="mt-5">
@@ -20,12 +21,14 @@
         ref="DeviceStep1Ref"
         :deviceInfo="deviceInfo"
         v-show="current === 0"
+        :isUpdate="!isUpdate"
       />
       <DeviceStep2
         ref="DeviceStep2Ref"
         @prev="handleStepPrev"
         @next="handleStep2Next"
         v-show="current === 1"
+        v-if="!isUpdate"
       />
     </div>
   </BasicModal>
@@ -33,12 +36,12 @@
 <script lang="ts">
   import { defineComponent, ref, computed, unref } from 'vue';
   import { BasicModal, useModalInner } from '/@/components/Modal';
-  import { createOrEditDevice, getDeviceToken } from '/@/api/device/deviceManager';
+  import { createOrEditDevice } from '/@/api/device/deviceManager';
   import DeviceStep1 from '../step/DeviceStep1.vue';
   import DeviceStep2 from '../step/DeviceStep2.vue';
   import { Steps, Step } from 'ant-design-vue';
   import { useMessage } from '/@/hooks/web/useMessage';
-
+  import { credentialTypeEnum } from '../../config/data';
   export default defineComponent({
     name: 'DeviceModal',
     components: {
@@ -57,26 +60,26 @@
       const DeviceStep2Ref = ref<InstanceType<typeof DeviceStep2>>();
       const { createMessage } = useMessage();
       const current = ref(0);
-      const isUpdate = ref<Boolean>();
+      const isUpdate = ref<Boolean>(false);
       const deviceInfo = ref({});
       const getTitle = computed(() => (!unref(isUpdate) ? '新增设备' : '编辑设备'));
       // 所有参数
       let stepState = ref();
       // 编辑回显
       const [register, { closeModal }] = useModalInner((data) => {
-        if (data.isUpdate) {
-          DeviceStep1Ref?.value?.parentSetFieldsValue(data.record);
-          DeviceStep1Ref?.value?.parentSetFieldsValue({
+        isUpdate.value = data?.isUpdate;
+        if (unref(isUpdate)) {
+          unref(DeviceStep1Ref)?.parentSetFieldsValue(data.record);
+          unref(DeviceStep1Ref)?.parentSetFieldsValue({
             profile: data.record.deviceProfile.name,
             profileId: data.record.profileId,
             deviceType: data.record.deviceType,
           });
           deviceInfo.value = data.record.deviceInfo;
         } else {
-          DeviceStep1Ref?.value?.parentResetPositionState();
+          unref(DeviceStep1Ref)?.parentResetPositionState();
           deviceInfo.value = {};
         }
-        isUpdate.value = data?.isUpdate;
       });
 
       // 上一步
@@ -94,31 +97,37 @@
       }
       function handleCancel() {
         if (unref(isUpdate)) {
-          DeviceStep1Ref?.value?.parentResetDevicePic(deviceInfo.value);
+          unref(DeviceStep1Ref)?.parentResetDevicePic(deviceInfo.value);
         }
         current.value = 0;
-        DeviceStep1Ref?.value?.resetFields();
-        DeviceStep2Ref?.value?.resetFieldsValueAndStatus();
+        unref(DeviceStep1Ref)?.resetFields();
+        unref(DeviceStep2Ref)?.resetFieldsValueAndStatus();
       }
       // 提交
       async function handleOk() {
         if (current.value === 0) {
           // 验证
-          const valid = await DeviceStep1Ref.value?.parentValidate();
+          const valid = await unref(DeviceStep1Ref)?.parentValidate();
+          console.log('123');
           if (!valid) return;
-          stepState.value = DeviceStep1Ref?.value?.parentGetFieldsValue();
+          stepState.value = unref(DeviceStep1Ref)?.parentGetFieldsValue();
         } else {
-          if (DeviceStep2Ref?.value?.getFieldsValue().creaentialsType) {
-            const valid = await DeviceStep2Ref?.value?.validate();
-            // 第二页验证通过情况
+          if (unref(DeviceStep2Ref)?.getFieldsValue().addAgree) {
+            const valid = await unref(DeviceStep2Ref)?.validate();
             if (!valid) return;
+
+            // 第二页验证通过情况
+            stepState.value = {
+              ...unref(stepState),
+              ...unref(DeviceStep2Ref)?.getFieldsValue(),
+            };
           }
         }
         // 验证成功 --调-- 新增或者编辑接口
         const msg = computed(() => (unref(stepState).id ? '更新设备成功' : '新增设备成功'));
         if (unref(stepState).id) {
           const editData = {
-            ...stepState.value,
+            ...unref(stepState),
             deviceInfo: {
               avatar: DeviceStep1Ref.value?.devicePic,
               ...DeviceStep1Ref.value?.positionState,
@@ -126,19 +135,33 @@
           };
           await createOrEditDevice(editData);
         } else {
-          let deviceToken = await getDeviceToken();
-          // 创建需要携带唯一的设备token
           const createData = {
-            ...stepState.value,
-            deviceToken,
+            ...unref(stepState),
             deviceInfo: {
               avatar: DeviceStep1Ref.value?.devicePic,
               ...DeviceStep1Ref.value?.positionState,
             },
+            deviceToken:
+              unref(current) === 0 || !unref(stepState).addAgree
+                ? null
+                : {
+                    credentialsType: unref(stepState).credentialType,
+                    credentialsId: unref(stepState).credentialsId,
+                    credentialsValue:
+                      unref(stepState).credentialType === credentialTypeEnum.MQTT_BASIC
+                        ? JSON.stringify({
+                            userName: unref(stepState).username,
+                            password: unref(stepState).password,
+                            clientId: unref(stepState).clientId,
+                          })
+                        : unref(stepState).credentialType === credentialTypeEnum.X_509
+                        ? unref(stepState).publicKey
+                        : null,
+                  },
           };
           await createOrEditDevice(createData);
         }
-        createMessage.success(msg.value);
+        createMessage.success(unref(msg));
         handleCancel();
         closeModal();
         emit('reload');
@@ -149,6 +172,7 @@
         DeviceStep1Ref,
         DeviceStep2Ref,
         deviceInfo,
+        isUpdate,
         register,
         handleStepPrev,
         handleStep1Next,

+<template>
+  <BasicModal @register="registerModal" v-bind="$attrs" title="管理设备凭证">
+    <BasicForm @register="registerForm" @cancel="handleCancel" @ok="handleOk">
+      <template #addAgree="{ model, field }">
+        <Checkbox v-model:checked="model[field]" @change="checkedChange" />
+        <span class="ml-2">添加协议</span>
+      </template>
+    </BasicForm>
+  </BasicModal>
+</template>
+
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import { useModalInner, BasicModal } from '/@/components/Modal';
+  import { Checkbox } from 'ant-design-vue';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { step2Schemas } from '../../config/data';
+
+  export default defineComponent({
+    components: {
+      BasicModal,
+      BasicForm,
+      Checkbox,
+    },
+    emits: ['register'],
+    setup() {
+      const [registerModal, { closeModal }] = useModalInner(async (data) => {
+        console.log(data);
+      });
+      const [
+        registerForm,
+        { getFieldsValue, updateSchema, validate, resetFields, setFieldsValue },
+      ] = useForm({
+        labelWidth: 100,
+        schemas: step2Schemas,
+        actionColOptions: {
+          span: 14,
+        },
+        labelAlign: 'left',
+        showSubmitButton: false,
+        showResetButton: false,
+        wrapperCol: {
+          span: 12,
+        },
+      });
+      const checkedChange = async (e) => {
+        if (!e.target.checked) {
+          await updateSchema([
+            {
+              field: 'credentialsId',
+              ifShow: false,
+            },
+            {
+              field: 'clientId',
+              ifShow: false,
+            },
+            {
+              field: 'username',
+              ifShow: false,
+            },
+            {
+              field: 'password',
+              ifShow: false,
+            },
+            {
+              field: 'publicKey',
+              ifShow: false,
+            },
+          ]);
+          setFieldsValue({
+            credentialType: '',
+          });
+        }
+      };
+      const handleCancel = () => {
+        console.log('取消');
+      };
+      const handleOk = () => {
+        console.log('确定');
+      };
+      return {
+        registerModal,
+        registerForm,
+        checkedChange,
+        handleCancel,
+        handleOk,
+      };
+    },
+  });
+</script>

@@ -26,6 +26,9 @@
           </Input>
         </template>
       </BasicForm>
+      <div class="flex justify-center" v-if="isUpdate">
+        <a-button type="primary" @click="nextStep">下一步</a-button>
+      </div>
     </div>
     <Modal
       v-model:visible="visible"
@@ -86,6 +89,9 @@
         type: Object,
         default: () => ({}),
       },
+      isUpdate: {
+        type: Boolean,
+      },
     },
     emits: ['next'],
     setup(props, { emit }) {
@@ -106,14 +112,11 @@
         actionColOptions: {
           span: 14,
         },
-        labelAlign: 'left',
+        labelAlign: 'right',
         showResetButton: false,
-        submitButtonOptions: {
-          text: '下一步',
-        },
-        submitFunc: customSubmitFunc,
+        showSubmitButton: false,
       });
-      async function customSubmitFunc() {
+      async function nextStep() {
         try {
           let values = await validate();
           values = { devicePic: devicePic.value, ...positionState, ...values };
@@ -268,6 +271,7 @@
         parentValidate,
         parentResetDevicePic,
         parentResetPositionState,
+        nextStep,
       };
     },
   });

@@ -2,7 +2,8 @@
   <div class="step2">
     <BasicForm @register="registerForm">
       <template #addAgree="{ model, field }">
-        <Checkbox v-model:checked="model[field]" @change="checkedChange" />添加协议
+        <Checkbox v-model:checked="model[field]" @change="checkedChange" />
+        <span class="ml-2">添加协议</span>
       </template>
     </BasicForm>
     <div>
@@ -47,7 +48,7 @@
         if (!e.target.checked) {
           await updateSchema([
             {
-              field: 'token',
+              field: 'credentialsId',
               ifShow: false,
             },
             {
@@ -67,6 +68,9 @@
               ifShow: false,
             },
           ]);
+          setFieldsValue({
+            credentialType: '',
+          });
         }
       };
       function resetFieldsValueAndStatus() {
@@ -80,7 +84,7 @@
             ifShow: false,
           },
           {
-            field: 'token',
+            field: 'credentialsId',
             ifShow: false,
           },
           {
@@ -97,6 +101,10 @@
           },
         ]);
       }
+      // 验证
+      function validateStep2Method() {
+        validate();
+      }
 
       return {
         prevStep,
@@ -105,6 +113,7 @@
         getFieldsValue,
         validate,
         resetFieldsValueAndStatus,
+        validateStep2Method,
       };
     },
   });

@@ -13,7 +13,7 @@
         />
       </template>
     </BasicTable>
-    <AlarmDetailModal @register="registerDetailModal" />
+    <AlarmDetailModal @register="registerDetailModal" @success="handleSuccess" />
   </div>
 </template>
 <script lang="ts">
@@ -37,18 +37,20 @@
       },
     },
     setup(props) {
-      const [registerTable] = useTable({
+      const [registerTable, { reload }] = useTable({
         api: getDeviceAlarm,
         columns: alarmColumns,
         formConfig: {
           labelWidth: 120,
           schemas: alarmSearchSchemas,
+          fieldMapToTime: [['time', ['startTime', 'endTime'], 'x']],
         },
         useSearchForm: true,
         bordered: true,
         showIndexColumn: false,
         beforeFetch: (data) => {
           Reflect.set(data, 'deviceId', props.id);
+          Reflect.set(data, 'startTime', null);
         },
         actionColumn: {
           width: 200,
@@ -61,17 +63,15 @@
       const handleDetail = (record: Recordable) => {
         openModal(true, record);
       };
+      const handleSuccess = () => {
+        reload();
+      };
       return {
         registerTable,
         registerDetailModal,
         handleDetail,
+        handleSuccess,
       };
     },
   });
 </script>
-
-<style>
-  .aaa {
-    position: absolute;
-  }
-</style>

@@ -15,14 +15,16 @@
         style="width: 800px"
       />
     </div>
+    <div class="mt-4">
+      <a-button type="primary" class="mr-4" @click="copyTbDeviceId">复制设备ID</a-button>
+      <a-button type="primary" class="mr-4" @click="copyDeviceToken">复制访问令牌</a-button>
+      <a-button type="primary" @click="manageDeviceToken">管理设备凭证</a-button>
+      <ManageDeviceTokenModal @register="registerModal" />
+    </div>
     <div v-if="deviceDetail?.deviceInfo?.address" class="mt-4">
       <p>设备位置</p>
       <div ref="wrapRef" style="height: 400px; width: 90%"></div>
     </div>
-    <div class="mt-4">
-      <a-button type="primary" class="mr-4" @click="copyTbDeviceId">复制设备ID</a-button>
-      <a-button type="primary" @click="copyDeviceToken">复制访问令牌</a-button>
-    </div>
   </div>
 </template>
 <script lang="ts">
@@ -33,10 +35,13 @@
   import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { BAI_DU_MAP_URL } from '/@/utils/fnUtils';
+  import { useModal } from '/@/components/Modal';
+  import ManageDeviceTokenModal from '../modal/ManageDeviceTokenModal.vue';
   export default defineComponent({
     components: {
       Image,
       Table,
+      ManageDeviceTokenModal,
     },
     props: {
       deviceDetail: {
@@ -92,6 +97,10 @@
           createMessage.success('复制成功~');
         }
       };
+      const [registerModal, { openModal }] = useModal();
+      const manageDeviceToken = () => {
+        openModal(true);
+      };
 
       return {
         columns,
@@ -99,6 +108,8 @@
         copyTbDeviceId,
         copyDeviceToken,
         initMap,
+        manageDeviceToken,
+        registerModal,
       };
     },
   });

@@ -4,7 +4,7 @@
 <script lang="ts">
   import { defineComponent, reactive } from 'vue';
   import { BasicTable, useTable } from '/@/components/Table';
-  import { realTimeDataColumns, realTimeDataSearchSchemas } from '../../config/detail.config';
+  import { realTimeDataColumns } from '../../config/detail.config';
   import { useWebSocket } from '@vueuse/core';
   import { JWT_TOKEN_KEY } from '/@/enums/cacheEnum';
   import { getAuthCache } from '/@/utils/auth';
@@ -40,11 +40,6 @@
       const { createMessage } = useMessage();
       const [registerTable] = useTable({
         columns: realTimeDataColumns,
-        formConfig: {
-          labelWidth: 120,
-          schemas: realTimeDataSearchSchemas,
-        },
-        useSearchForm: true,
         showTableSetting: false,
         bordered: true,
         showIndexColumn: false,
@@ -78,7 +73,6 @@
               if (item.key === item1.key) {
                 item1.time = item.time;
                 item1.value = item.value;
-                console.log('哈哈哈', item, item1, state.recordList);
                 flag = true;
               }
             });

@@ -34,7 +34,7 @@
   import { useDrawerInner } from '/@/components/Drawer';
   import { columns, searchFormSchema } from './email.data';
   import { useMessage } from '/@/hooks/web/useMessage';
-  import { deleteSmsLog, mailLogPage, deleteMailLog } from '/@/api/message/records';
+  import { mailLogPage, deleteMailLog } from '/@/api/message/records';
   import { useModal } from '/@/components/Modal';
   import EmailDetail from '/@/views/message/records/item/EmailDetail.vue';
   export default defineComponent({