删除告警功能

src/html/AlertManagement.vue

@@ -48,17 +48,18 @@
           <el-date-picker v-model="filterParams.timeBefore" type="datetime" placeholder="请选择结束时间"></el-date-picker>
         </el-form-item>
       </el-col>
-      <el-col :span="4" class="filter-buttons" :offset="15">
+      <el-col :span="8" class="filter-buttons" :offset="0">
         <el-button type="primary" @click="handleFilter">查询</el-button>
         <el-button @click="handleReset">重置</el-button>
         <el-button :disabled="isExporting" @click="exportData">
           {{ isExporting ? '正在导出，请勿重复点击' : '导出' }}
         </el-button>
-      </el-col>
-      <el-col :span="1" :offset="0">
         <el-button type="primary" :disabled="!selectedAlerts.length" @click="batchMarkAsProcessed">
           批量标记为已处理
         </el-button>
+        <!-- <el-button type="danger" :disabled="!selectedAlerts.length" @click="handleDelete">删除选中</el-button> -->
+      </el-col>
+      <el-col :span="15" :offset="0">
       </el-col>
     </el-row>
 
@@ -149,7 +150,7 @@
           </div>
         </div> -->
         <!-- <div class="event-media" :class="{ 'center-media': mediums.length === 1 }"> -->
-        <div class="event-media" >
+        <div class="event-media">
           <!-- 告警关联视频 -->
           <!-- <div v-if="hasVideo" class="media-container video-item">
             <p>告警关联视频</p>
@@ -200,9 +201,9 @@ import { ref, reactive, onMounted, computed } from 'vue';
 // import Statistics from '@/components/Statistics.vue';
 // import AlertChart from '@/components/AlertChart.vue';
 import { BoxApi } from '@/utils/boxApi.ts';  // 导入 BoxApi
-
 import { saveAs } from 'file-saver';
 import Papa from 'papaparse';
+import { ElMessageBox, ElMessage } from 'element-plus';
 
 // 创建 BoxApi 实例
 const boxApi = new BoxApi();
@@ -250,6 +251,49 @@ const batchMarkAsProcessed = async () => {
   }
 };
 
+const handleDelete = () => {
+  // 显示确认框
+  ElMessageBox.confirm(
+    `确认删除选中的 ${selectedAlerts.value.length} 条告警吗？`,
+    '删除确认',
+    {
+      confirmButtonText: '删除',
+      cancelButtonText: '取消',
+      type: 'warning'
+    }
+  )
+    .then(async () => {
+      try {
+        // 调用 API 删除选中的告警
+        const results = await boxApi.delEvents(token.value, selectedAlerts.value);
+        
+        // 检查结果，显示操作成功或失败
+        const failedDeletions = results.filter(item => !item.success);
+        if (failedDeletions.length === 0) {
+          ElMessage.success('删除成功');
+        } else {
+          ElMessage.error(
+            `部分删除失败：${failedDeletions
+              .map(item => `ID: ${item.id}`)
+              .join(', ')}`
+          );
+        }
+        
+        // 刷新表格数据
+        await fetchEvents();
+        selectedAlerts.value = []; // 清空选中项
+      } catch (error) {
+        console.error('删除操作失败:', error);
+        ElMessage.error('删除失败，请稍后再试');
+      }
+    })
+    .catch(() => {
+      // 用户取消删除操作
+      ElMessage.info('删除已取消');
+    });
+};
+
+
 
 const formatDateTimeToISO = (datetime) => {
   return new Date(datetime).toISOString().replace('.000', '');