设备告警画面及功能

src/api/demo/device.ts

@@ -7,6 +7,7 @@ enum Api {
   EditUav = '/api/Manage/EditUav',
   DeleteUav = '/api/Manage/DeleteUav',
   GetGateway = '/api/AirportMaintenance/GetGateway',
+  GetManageDeviceHmsList = '/api/AirportMaintenance/GetManageDeviceHmsList',
 }
 
 export function GetDataList(params) {
@@ -47,4 +48,10 @@ export function GetGateway() {
   return defHttp.post({
     url:  Api.GetGateway,
   });
+}
+export function GetManageDeviceHmsList(params) {
+  return defHttp.get({
+    url:  Api.GetManageDeviceHmsList,
+    params
+  });
 }

src/views/demo/workmanagement/device/Airport/DeviceWarning/index.vue

@@ -0,0 +1,68 @@
+<template>
+  <BasicTable class="w-4/4 xl:w-5/5" @register="registerTable">
+    <template #bodyCell="{ column, record }">
+      <template v-if="column.key === 'level'">
+        {{ levelOptions.find(item => item.value == record.level)?.label }}
+      </template>
+      <template v-if="column.key === 'module'">
+        {{ modelOptions.find(item => item.value == record.module)?.label }}
+      </template>
+      <template v-if="column.key === 'action'">
+        <TableAction
+          :actions="[
+            {
+              icon: 'ant-design:file-search-outlined',
+              onClick: () => {
+              },
+            },
+            {
+              icon: 'carbon:calendar-tools',
+              onClick: () => {
+              },
+            },
+          ]"
+        />
+      </template>
+    </template>
+  </BasicTable>
+</template>
+
+<script setup lang="ts">
+import {} from "vue"
+import { BasicTable, useTable, TableAction } from '@/components/Table';
+import { columns, searchFormSchema, levelOptions, modelOptions } from './utils'
+import { GetManageDeviceHmsList } from '@/api/demo/device'
+const [registerTable, { reload, expandAll, getForm}] = useTable({
+  title: '告警信息',
+  api: GetManageDeviceHmsList,
+  columns,
+  rowKey: 'id',
+  formConfig: {
+    labelWidth: 100,
+    schemas: searchFormSchema,
+  },
+  striped: false,
+  // 序号列
+  showIndexColumn: false,
+  // 使用搜索表单
+  useSearchForm: true,
+  // 显示表格设置工具
+  showTableSetting: true,
+  bordered: true,
+  beforeFetch(data) {
+    return data
+  },
+  afterFetch(data) {
+  },
+  // actionColumn: {
+  //   width: 100,
+  //   title: '操作',
+  //   dataIndex: 'action',
+  // },
+  handleSearchInfoFn(info) {
+    return info;
+  },
+});
+</script>
+
+<style lang="scss" scoped></style>

src/views/demo/workmanagement/device/Airport/DeviceWarning/utils.ts

@@ -0,0 +1,73 @@
+import { BasicColumn, FormSchema } from '@/components/Table';
+export const levelOptions = [
+  { label: '全部', value: 0 },
+  { label: '注意', value: 1 },
+  { label: '告警', value: 2 },
+]
+export const modelOptions = [
+  { label: '全部', value: 0 },
+  { label: '设备管理', value: 1 },
+  { label: '媒体管理', value: 2 },
+  { label: 'HMS告警', value: 3 },
+]
+export const columns = [
+  {
+    title: '告警等级',
+    dataIndex: 'level',
+  },
+  {
+    title: '告警开始时间',
+    dataIndex: 'createTime',
+  },
+  {
+    title: '告警结束时间',
+    dataIndex: 'updateTime',
+  },
+  {
+    title: '设备',
+    dataIndex: 'module',
+  },
+  {
+    title: '错误码',
+    dataIndex: 'code',
+  },
+  {
+    title: '告警内容',
+    dataIndex: 'messageZh',
+  },
+  {
+    title: '解决方案',
+    dataIndex: 'messageEn',
+  },
+];
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'time',
+    component: 'RangePicker',
+    colProps: { span: 4 },
+  },
+  {
+    field: 'level',
+    label: '告警等级',
+    component: 'Select',
+    componentProps: {
+      options: levelOptions,
+    },
+    colProps: { span: 4 },
+  },
+  {
+    field: 'model',
+    label: '设备',
+    component: 'Select',
+    componentProps: {
+      options: modelOptions,
+    },
+    colProps: { span: 4 },
+  },
+  {
+    field: 'message',
+    label: '告警信息',
+    component: 'Input',
+    colProps: { span: 6 },
+  },
+];

src/views/demo/workmanagement/device/Airport/index.vue

@@ -21,12 +21,13 @@
         <TableAction
         v-if="!record.pId"
           :actions="[
-            // {
-            //   icon: 'ant-design:file-search-outlined',
-            //   onClick: () => {
-            //     console.log('deviceInfoList',deviceInfoList)
-            //   },
-            // },
+            {
+              icon: 'ant-design:file-search-outlined',
+              onClick: () => {
+                console.log('deviceInfoList',deviceInfoList)
+                deviceWarningDrawer = true
+              },
+            },
             {
               icon: 'carbon:calendar-tools',
               onClick: () => {
@@ -53,6 +54,9 @@
   <a-drawer class="feedback-drawer" v-model:open="feedbackDrawer" width="80%" :closable="false">
     <FeedbackDrawer />
   </a-drawer>
+  <a-drawer class="device-warning" v-model:open="deviceWarningDrawer"  title="告警信息" width="70%" :closable="false">
+    <DeviceWarning />
+  </a-drawer>
   <a-drawer class="feedback-drawer"  title="设备运维" v-model:open="deviceControl" width="45%" :closable="false">
     <DeviceControl :deviceInfoList="deviceInfoList" :controlSN="controlSN"/>
   </a-drawer>
@@ -72,6 +76,7 @@ import FeedbackDrawer from './FeedbackDrawer/index.vue'
 import DeviceBindModal from './DeviceBindModal/index.vue'
 import DeviceControl from './DeviceControl/index.vue'
 import DeviceEdit from './DeviceEdit/index.vue'
+import DeviceWarning from './DeviceWarning/index.vue'
 import { GetDataList, DeleteDronePort } from '@/api/demo/device'
 import { getClient, clientSubscribe } from '@/utils/mqtt'
 import dayjs from "dayjs";
@@ -118,6 +123,7 @@ watch(() => props.connected, () => {
 })
 
 const feedbackDrawer = ref(false)
+const deviceWarningDrawer = ref(false)
 const deviceBindingModal = ref(false)
 const afterFetch = ref(false)
 const deviceControl = ref(false)