feat(设备事件): 添加设备事件处理功能及UI优化

- 新增设备事件处理API接口
- 在报警弹窗中添加事件处理功能
- 更新设备统计表格添加处理人列
- 优化报警弹窗UI样式和交互

src/api/event/index.ts

@@ -0,0 +1,8 @@
+import request from '@/request'
+
+// 处理设备事件
+export const handleDeviceEvent = (params: {
+  eventListId: string
+}): Promise<ResponseData<object>> => {
+  return request.get(`/event/handleFallEvent`, { params })
+}

src/layout/components/alertModal/index.vue

@@ -37,16 +37,18 @@
       </div>
 
       <div class="alert-footer">
-        <button class="btn btn-acknowledge" @click="close"> 立即处理 </button>
-        <button class="btn btn-view-details" @click="close"> 稍后处理 </button>
+        <button class="btn btn-acknowledge" @click="alertHandler"> 立即处理 </button>
+        <button class="btn btn-view-details" @click="close"> 暂不处理 </button>
       </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { defineProps, defineEmits, withDefaults } from 'vue'
+import { defineProps, defineEmits, withDefaults, ref } from 'vue'
 import { WarningOutlined } from '@ant-design/icons-vue'
+import * as eventAPI from '@/api/event'
+import { message } from 'ant-design-vue'
 
 defineOptions({
   name: 'AlertModal',
@@ -58,6 +60,7 @@ type Props = {
     devName: string
     tenantName: string
     clientId: string
+    eventListId: string
   }
 }
 const emit = defineEmits<{
@@ -70,9 +73,23 @@ const props = withDefaults(defineProps<Props>(), {
     devName: '',
     tenantName: '',
     clientId: '',
+    eventListId: '',
   }),
 })
 
+const handleText = ref('立即处理')
+const alertHandler = async () => {
+  try {
+    handleText.value = '处理中...'
+    await eventAPI.handleDeviceEvent({ eventListId: props.data.eventListId })
+    handleText.value = '处理完成'
+    close()
+    message.success('处理完成')
+  } catch (error) {
+    console.error('❌处理设备事件失败', error)
+  }
+}
+
 const close = () => {
   emit('update:open', false)
 }
@@ -97,7 +114,7 @@ const close = () => {
     width: 500px;
 
     background: rgba(10, 15, 35, 0.9);
-    border: 1px solid rgba(0, 195, 255, 0.3);
+    border: 5px solid rgba(0, 195, 255, 0.3);
     box-shadow:
       0 0 20px rgba(0, 195, 255, 0.5),
       0 0 40px rgba(0, 89, 255, 0.3),
@@ -113,7 +130,8 @@ const close = () => {
       position: relative;
       display: flex;
       align-items: center;
-      border-bottom: 1px solid rgba(0, 195, 255, 0.3);
+      border-bottom: 3px solid rgba(0, 195, 255, 0.3);
+      border-radius: 5px;
     }
 
     .alert-icon {
@@ -271,7 +289,6 @@ const close = () => {
     .btn-acknowledge:hover {
       background: linear-gradient(90deg, #00d9ff 0%, #0088ff 100%);
       box-shadow: 0 0 20px rgba(0, 195, 255, 0.7);
-      // transform: translateY(-2px);
     }
 
     .btn-view-details {
@@ -308,29 +325,29 @@ const close = () => {
     .corner-tl {
       top: 0;
       left: 0;
-      border-top: 2px solid #00c3ff;
-      border-left: 2px solid #00c3ff;
+      border-top: 3px solid #00c3ff;
+      border-left: 3px solid #00c3ff;
     }
 
     .corner-tr {
       top: 0;
       right: 0;
-      border-top: 2px solid #00c3ff;
-      border-right: 2px solid #00c3ff;
+      border-top: 3px solid #00c3ff;
+      border-right: 3px solid #00c3ff;
     }
 
     .corner-bl {
       bottom: 0;
       left: 0;
-      border-bottom: 2px solid #00c3ff;
-      border-left: 2px solid #00c3ff;
+      border-bottom: 3px solid #00c3ff;
+      border-left: 3px solid #00c3ff;
     }
 
     .corner-br {
       bottom: 0;
       right: 0;
-      border-bottom: 2px solid #00c3ff;
-      border-right: 2px solid #00c3ff;
+      border-bottom: 3px solid #00c3ff;
+      border-right: 3px solid #00c3ff;
     }
 
     .scan-line {

src/layout/index.vue

@@ -184,13 +184,15 @@ const alertModalState = reactive({
   devName: '',
   tenantName: '',
   clientId: '',
+  eventListId: '',
 })
 watchEffect(() => {
-  const { msgType, event, devName, tenantName, clientId } = MqttData.value || {}
+  const { msgType, event, devName, tenantName, clientId, eventListId } = MqttData.value || {}
   if (msgType === 'fall' && event === 'fall_confirmed') {
     alertModalState.devName = devName
     alertModalState.tenantName = tenantName
     alertModalState.clientId = clientId
+    alertModalState.eventListId = eventListId
     openAlertModal.value = true
   }
 

src/views/device/detail/components/deviceStatsDrawer/const.ts

@@ -21,6 +21,13 @@ export const fallColumns = [
     align: 'center',
     width: 150,
   },
+  {
+    title: '处理人',
+    key: 'remark',
+    dataIndex: 'remark',
+    align: 'center',
+    width: 150,
+  },
 ]
 
 //异常滞留统计列表表头