From a45b41dc459bce7e7a90115db3e6ca61e992bc0d Mon Sep 17 00:00:00 2001
From: xiaosi <2652281683@qq.com>
Date: Mon, 31 Aug 2026 12:06:20 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E6=8A=BD=E5=8F=96=20AlarmItem=20?=
 =?UTF-8?q?=E5=91=8A=E8=AD=A6=E5=88=97=E8=A1=A8=E9=A1=B9=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/AlarmItem.vue        | 24 ++++++++++++++++++++++++
 src/views/AlarmsView/AlarmsView.vue | 22 +++++++++++++---------
 2 files changed, 37 insertions(+), 9 deletions(-)
 create mode 100644 src/components/AlarmItem.vue

diff --git a/src/components/AlarmItem.vue b/src/components/AlarmItem.vue
new file mode 100644
index 0000000..09be622
--- /dev/null
+++ b/src/components/AlarmItem.vue
@@ -0,0 +1,24 @@
+<template>
+  <article class="alarm-item" :class="severityClass">
+    <span class="alarm-severity">{{ severity }}</span>
+    <div>
+      <strong>{{ title }}</strong>
+      <small>{{ device }} · {{ time }}</small>
+    </div>
+    <em class="status" :class="statusClass">{{ status }}</em>
+    <t-button class="alarm-handle" variant="outline" size="small" @click="$emit('handle')">处理</t-button>
+  </article>
+</template>
+
+<script setup>
+defineProps({
+  severity: { type: String, required: true },
+  severityClass: { type: String, required: true },
+  title: { type: String, required: true },
+  device: { type: String, required: true },
+  time: { type: String, required: true },
+  status: { type: String, required: true },
+  statusClass: { type: String, required: true }
+})
+defineEmits(['handle'])
+</script>
diff --git a/src/views/AlarmsView/AlarmsView.vue b/src/views/AlarmsView/AlarmsView.vue
index 360d776..6a8188d 100644
--- a/src/views/AlarmsView/AlarmsView.vue
+++ b/src/views/AlarmsView/AlarmsView.vue
@@ -18,15 +18,18 @@
     <div class="business-workspace alarm-workspace">
       <div class="alarm-layout" style="height:100%">
         <div class="alarm-list">
-          <article v-for="a in alarms" :key="a.id" class="alarm-item" :class="a.severityClass">
-            <span class="alarm-severity">{{ a.severity }}</span>
-            <div>
-              <strong>{{ a.title }}</strong>
-              <small>{{ a.device }} · {{ a.time }}</small>
-            </div>
-            <em class="status" :class="a.statusClass">{{ a.status }}</em>
-            <t-button class="alarm-handle" variant="outline" size="small" @click="handle(a)">处理</t-button>
-          </article>
+          <AlarmItem
+            v-for="a in alarms"
+            :key="a.id"
+            :severity="a.severity"
+            :severity-class="a.severityClass"
+            :title="a.title"
+            :device="a.device"
+            :time="a.time"
+            :status="a.status"
+            :status-class="a.statusClass"
+            @handle="handle(a)"
+          />
           <div v-if="!alarms.length" class="table-empty">暂无告警</div>
         </div>
 
@@ -54,6 +57,7 @@
 import { computed, onMounted, ref } from 'vue'
 import { useUiStore } from '@/stores/modules/uiStore'
 import request from '@/utils/http'
+import AlarmItem from '@/components/AlarmItem.vue'
 import * as urls from '@/config/urls'
 
 const ui = useUiStore()