feat: 设备列表新增事件管理面板

-<template>
-  <BasicDrawer
-    v-bind="$attrs"
-    isDetail
-    @register="register"
-    destroyOnClose
-    @close="closeDrawer"
-    :title="deviceDetail.alias || deviceDetail.name"
-    width="80%"
-  >
-    <Tabs v-model:activeKey="activeKey" :size="size">
-      <TabPane key="1" tab="详情">
-        <Detail
-          ref="deviceDetailRef"
-          :deviceDetail="deviceDetail"
-          @open-gateway-device="handleOpenGatewayDevice"
-        />
-      </TabPane>
-      <TabPane key="modelOfMatter" tab="物模型数据">
-        <ModelOfMatter :deviceDetail="deviceDetail" />
-      </TabPane>
-      <!-- <TabPane key="2" tab="实时数据" v-if="deviceDetail?.deviceType !== 'GATEWAY'">
-        <RealTimeData :deviceDetail="deviceDetail" />
-      </TabPane>
-      <TabPane key="7" tab="历史数据" v-if="deviceDetail?.deviceType !== 'GATEWAY'">
-        <HistoryData :deviceDetail="deviceDetail" />
-      </TabPane> -->
-      <TabPane key="5" tab="命令下发" v-if="deviceDetail?.deviceType !== 'SENSOR'">
-        <CommandIssuance :deviceDetail="deviceDetail" />
-      </TabPane>
-      <TabPane key="3" tab="告警"><Alarm :id="deviceDetail.id" /></TabPane>
-      <TabPane key="4" tab="子设备" v-if="deviceDetail?.deviceType === 'GATEWAY'">
-        <ChildDevice
-          :fromId="deviceDetail?.tbDeviceId"
-          @openTbDeviceDetail="handleOpenTbDeviceDetail"
-        />
-      </TabPane>
-      <TabPane key="7" tab="命令下发记录">
-        <CommandRecord :fromId="deviceDetail?.tbDeviceId" />
-      </TabPane>
-      <!-- 网关设备并且场家是TBox -->
-      <TabPane
-        key="6"
-        tab="TBox"
-        v-if="deviceDetail?.deviceType === 'GATEWAY' && deviceDetail?.brand == 'TBox'"
-      >
-        <TBoxDetail :deviceDetail="deviceDetail" />
-      </TabPane>
-      <!-- 网关设备并且是TBox -->
-    </Tabs>
-  </BasicDrawer>
-</template>
-<script lang="ts">
-  import { defineComponent, ref } from 'vue';
-  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
-
-  import { Tabs } from 'ant-design-vue';
-  import Detail from '../tabs/Detail.vue';
-  // import RealTimeData from '../tabs/RealTimeData.vue';
-  import Alarm from '../tabs/Alarm.vue';
-  import ChildDevice from '../tabs/ChildDevice.vue';
-  import TBoxDetail from '../tabs/TBoxDetail.vue';
-  import CommandIssuance from '../tabs/CommandIssuance.vue';
-  import { CommandRecord } from '../tabs/commandRecord/index';
-  import { getDeviceDetail } from '/@/api/device/deviceManager';
-  // import HistoryData from '../tabs/HistoryData.vue';
-  import ModelOfMatter from '../tabs/ModelOfMatter.vue';
-  export default defineComponent({
-    name: 'DeviceModal',
-    components: {
-      BasicDrawer,
-      Tabs,
-      TabPane: Tabs.TabPane,
-      Detail,
-      // RealTimeData,
-      Alarm,
-      ChildDevice,
-      CommandIssuance,
-      TBoxDetail,
-      // HistoryData,
-      ModelOfMatter,
-      CommandRecord,
-    },
-    emits: ['reload', 'register', 'openTbDeviceDetail', 'openGatewayDeviceDetail'],
-    setup(_props, { emit }) {
-      const activeKey = ref('1');
-      const size = ref('small');
-      const deviceDetailRef = ref();
-      const deviceDetail = ref<any>({});
-      const tbDeviceId = ref('');
-      // 详情回显
-      const [register] = useDrawerInner(async (data) => {
-        const { id } = data;
-        // 设备详情
-        const res = await getDeviceDetail(id);
-        deviceDetail.value = res;
-        const { latitude, longitude, address } = res.deviceInfo;
-        if (latitude) {
-          deviceDetailRef.value.initMap(longitude, latitude, address);
-        }
-      });
-      const closeDrawer = () => {
-        activeKey.value = '1';
-      };
-
-      const handleOpenTbDeviceDetail = (data: { id: string; tbDeviceId: string }) => {
-        emit('openTbDeviceDetail', data);
-      };
-
-      const handleOpenGatewayDevice = (data: { gatewayId: string; tbDeviceId: string }) => {
-        emit('openGatewayDeviceDetail', { id: data.gatewayId });
-      };
-
-      return {
-        size,
-        activeKey,
-        register,
-        closeDrawer,
-        deviceDetail,
-        deviceDetailRef,
-        tbDeviceId,
-        handleOpenTbDeviceDetail,
-        handleOpenGatewayDevice,
-      };
-    },
-  });
-</script>
+<template>
+  <BasicDrawer
+    v-bind="$attrs"
+    isDetail
+    @register="register"
+    destroyOnClose
+    @close="closeDrawer"
+    :title="deviceDetail.alias || deviceDetail.name"
+    width="80%"
+  >
+    <Tabs v-model:activeKey="activeKey" :size="size">
+      <TabPane key="1" tab="详情">
+        <Detail
+          ref="deviceDetailRef"
+          :deviceDetail="deviceDetail"
+          @open-gateway-device="handleOpenGatewayDevice"
+        />
+      </TabPane>
+      <TabPane key="modelOfMatter" tab="物模型数据">
+        <ModelOfMatter :deviceDetail="deviceDetail" />
+      </TabPane>
+      <!-- <TabPane key="2" tab="实时数据" v-if="deviceDetail?.deviceType !== 'GATEWAY'">
+        <RealTimeData :deviceDetail="deviceDetail" />
+      </TabPane>
+      <TabPane key="7" tab="历史数据" v-if="deviceDetail?.deviceType !== 'GATEWAY'">
+        <HistoryData :deviceDetail="deviceDetail" />
+      </TabPane> -->
+      <TabPane key="5" tab="命令下发" v-if="deviceDetail?.deviceType !== 'SENSOR'">
+        <CommandIssuance :deviceDetail="deviceDetail" />
+      </TabPane>
+      <TabPane key="3" tab="告警"><Alarm :id="deviceDetail.id" /></TabPane>
+      <TabPane key="4" tab="子设备" v-if="deviceDetail?.deviceType === 'GATEWAY'">
+        <ChildDevice
+          :fromId="deviceDetail?.tbDeviceId"
+          @openTbDeviceDetail="handleOpenTbDeviceDetail"
+        />
+      </TabPane>
+      <TabPane key="7" tab="命令下发记录">
+        <CommandRecord :fromId="deviceDetail?.tbDeviceId" />
+      </TabPane>
+      <!-- 网关设备并且场家是TBox -->
+      <TabPane
+        key="6"
+        tab="TBox"
+        v-if="deviceDetail?.deviceType === 'GATEWAY' && deviceDetail?.brand == 'TBox'"
+      >
+        <TBoxDetail :deviceDetail="deviceDetail" />
+      </TabPane>
+      <!-- 网关设备并且是TBox -->
+
+      <TabPane key="eventManage" tab="事件管理">
+        <EventManage />
+      </TabPane>
+    </Tabs>
+  </BasicDrawer>
+</template>
+<script lang="ts">
+  import { defineComponent, ref } from 'vue';
+  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
+
+  import { Tabs } from 'ant-design-vue';
+  import Detail from '../tabs/Detail.vue';
+  // import RealTimeData from '../tabs/RealTimeData.vue';
+  import Alarm from '../tabs/Alarm.vue';
+  import ChildDevice from '../tabs/ChildDevice.vue';
+  import TBoxDetail from '../tabs/TBoxDetail.vue';
+  import CommandIssuance from '../tabs/CommandIssuance.vue';
+  import { CommandRecord } from '../tabs/commandRecord/index';
+  import { getDeviceDetail } from '/@/api/device/deviceManager';
+  // import HistoryData from '../tabs/HistoryData.vue';
+  import ModelOfMatter from '../tabs/ModelOfMatter.vue';
+  import EventManage from '../tabs/EventManage/index.vue';
+
+  export default defineComponent({
+    name: 'DeviceModal',
+    components: {
+      BasicDrawer,
+      Tabs,
+      TabPane: Tabs.TabPane,
+      Detail,
+      // RealTimeData,
+      Alarm,
+      ChildDevice,
+      CommandIssuance,
+      TBoxDetail,
+      // HistoryData,
+      ModelOfMatter,
+      CommandRecord,
+      EventManage,
+    },
+    emits: ['reload', 'register', 'openTbDeviceDetail', 'openGatewayDeviceDetail'],
+    setup(_props, { emit }) {
+      const activeKey = ref('1');
+      const size = ref('small');
+      const deviceDetailRef = ref();
+      const deviceDetail = ref<any>({});
+      const tbDeviceId = ref('');
+      // 详情回显
+      const [register] = useDrawerInner(async (data) => {
+        const { id } = data;
+        // 设备详情
+        const res = await getDeviceDetail(id);
+        deviceDetail.value = res;
+        const { latitude, longitude, address } = res.deviceInfo;
+        if (latitude) {
+          deviceDetailRef.value.initMap(longitude, latitude, address);
+        }
+      });
+      const closeDrawer = () => {
+        activeKey.value = '1';
+      };
+
+      const handleOpenTbDeviceDetail = (data: { id: string; tbDeviceId: string }) => {
+        emit('openTbDeviceDetail', data);
+      };
+
+      const handleOpenGatewayDevice = (data: { gatewayId: string; tbDeviceId: string }) => {
+        emit('openGatewayDeviceDetail', { id: data.gatewayId });
+      };
+
+      return {
+        size,
+        activeKey,
+        register,
+        closeDrawer,
+        deviceDetail,
+        deviceDetailRef,
+        tbDeviceId,
+        handleOpenTbDeviceDetail,
+        handleOpenGatewayDevice,
+      };
+    },
+  });
+</script>

+import { findDictItemByCode } from '/@/api/system/dict';
+import { BasicColumn, FormSchema } from '/@/components/Table';
+
+export const columnSchema: BasicColumn[] = [
+  {
+    title: '时间',
+    dataIndex: 'time',
+  },
+  {
+    title: '标识符',
+    dataIndex: 'identifier',
+    helpMessage: ['标识符格式为模块标识符: 功能定义标识符'],
+  },
+  {
+    title: '事件名称',
+    dataIndex: 'eventName',
+  },
+  {
+    title: '事件类型',
+    dataIndex: 'eventType',
+  },
+  {
+    title: '输出参数',
+    dataIndex: 'outputParams',
+  },
+];
+
+export const formSchemas: FormSchema[] = [
+  {
+    field: 'identifier',
+    label: '标识符',
+    component: 'Input',
+  },
+  {
+    field: 'alarmType',
+    label: '告警类型',
+    component: 'ApiSelect',
+    defaultValue: 'INFO',
+    componentProps: {
+      placeholder: '请选择事件类型',
+      api: findDictItemByCode,
+      params: {
+        dictCode: 'event_type',
+      },
+      labelField: 'itemText',
+      valueField: 'itemValue',
+    },
+  },
+  {
+    field: 'dateRange',
+    label: '时间范围',
+    component: 'RangePicker',
+    colProps: { span: 10 },
+  },
+];

+<script lang="ts" setup>
+  import { BasicTable, useTable } from '/@/components/Table';
+  import { formSchemas, columnSchema } from './config';
+  const [register] = useTable({
+    columns: columnSchema,
+    size: 'small',
+    rowKey: 'id',
+    showIndexColumn: false,
+    useSearchForm: true,
+    showTableSetting: true,
+    bordered: true,
+    formConfig: {
+      layout: 'inline',
+      baseColProps: { span: 6 },
+      labelWidth: 80,
+      schemas: formSchemas,
+    },
+    handleSearchInfoFn: (params: Recordable) => {
+      // console.log(params);
+      return params;
+    },
+  });
+</script>
+
+<template>
+  <BasicTable @register="register" style="background-color: #f0f2f5" />
+</template>