增加处理按钮

src/views/Home/home.vue

@@ -90,13 +90,17 @@
                   effect="dark"
                   >警</el-tag
                 > -->
-                <Icon
-                  v-if="hasWarning(elderly.id)"
-                  icon="mdi:alert"
-                  class="warning-flag"
-                  color="red"
-                  :size="50"
-                />
+                <div v-if="hasWarning(elderly.id)" class="warning-action-group">
+                  <Icon icon="mdi:alert" class="warning-flag" color="red" :size="50" />
+                  <el-button
+                    type="warning"
+                    size="small"
+                    class="handle-warning-btn"
+                    @click.stop="openHandleWarningDialog(elderly)"
+                  >
+                    去处理
+                  </el-button>
+                </div>
                 <div class="elderly-avatar-large" :class="getGenderClass(elderly.gender)">
                   <span class="avatar-initial">{{ getNameInitial(elderly.name) }}</span>
                 </div>
@@ -445,6 +449,52 @@
         <el-button type="primary" @click="submitAddElder" size="large">确认添加</el-button>
       </template>
     </el-dialog>
+
+    <!-- 处理告警对话框 -->
+    <el-dialog
+      v-model="handleWarningDialogVisible"
+      title="处理告警"
+      width="500px"
+      append-to-body
+      center
+      class="large-screen-dialog"
+    >
+      <div class="handle-warning-content">
+        <div class="elderly-info-section">
+          <p><strong>长者姓名：</strong>{{ currentWarningElderly?.name || '' }}</p>
+        </div>
+        <el-form ref="handleWarningFormRef" :model="handleWarningForm" label-width="120px">
+          <el-form-item
+            label="处理方式"
+            :rules="[{ required: true, message: '请选择处理方式', trigger: 'change' }]"
+          >
+            <el-radio-group v-model="handleWarningForm.handleType" size="large">
+              <el-radio label="phone">电话回访</el-radio>
+              <el-radio label="report">上报告警情况</el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item
+            v-if="handleWarningForm.handleType === 'report'"
+            label="上报信息"
+            prop="message"
+            :rules="[{ required: true, message: '请输入上报信息', trigger: 'blur' }]"
+          >
+            <el-input
+              v-model="handleWarningForm.message"
+              type="textarea"
+              :rows="4"
+              placeholder="请输入上报信息"
+              maxlength="200"
+              show-word-limit
+            />
+          </el-form-item>
+        </el-form>
+      </div>
+      <template #footer>
+        <el-button @click="closeHandleWarningDialog" size="large">取消</el-button>
+        <el-button type="primary" @click="submitHandleWarning" size="large">确认处理</el-button>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
@@ -784,6 +834,15 @@ const addElderForm = reactive({
   gender: 1 // 默认男性
 })
 
+// 处理告警相关数据
+const handleWarningDialogVisible = ref(false)
+const handleWarningFormRef = ref()
+const currentWarningElderly = ref<Elderly | null>(null)
+const handleWarningForm = reactive({
+  handleType: 'phone' as 'phone' | 'report',
+  message: ''
+})
+
 // 添加长者表单验证规则
 const elderFormRules = {
   name: [
@@ -922,6 +981,63 @@ const submitAddElder = async () => {
   }
 }
 
+// 打开处理告警对话框
+const openHandleWarningDialog = (elderly: Elderly) => {
+  currentWarningElderly.value = elderly
+  handleWarningForm.handleType = 'phone'
+  handleWarningForm.message = ''
+  handleWarningDialogVisible.value = true
+  // 清除表单验证
+  nextTick(() => {
+    if (handleWarningFormRef.value) {
+      handleWarningFormRef.value.clearValidate()
+    }
+  })
+}
+
+// 关闭处理告警对话框
+const closeHandleWarningDialog = () => {
+  handleWarningDialogVisible.value = false
+  currentWarningElderly.value = null
+}
+
+// 提交处理告警
+const submitHandleWarning = async () => {
+  if (!currentWarningElderly.value) return
+  // 如果是上报
+  if (handleWarningForm.handleType === 'report') {
+    try {
+      let apiUrl = '/api/pc/admin/dealWith'
+      let requestData: any = {
+        elderId: currentWarningElderly.value.id,
+        message: handleWarningForm.message || ''
+      }
+      const res = await fetchHttp.post(apiUrl, requestData, {
+        headers: {
+          Authorization: `Bearer ${getAccessToken()}`
+        }
+      })
+      if (res) {
+        ElMessage.success('告警情况已上报！')
+        // 清除该老人的告警标记
+        clearWarningFlag(currentWarningElderly.value.id)
+        closeHandleWarningDialog()
+        if (selectedElderly.value.id === currentWarningElderly.value.id) {
+          await getElderDeviceMessage(selectedElderly.value.id)
+        }
+      } else {
+        ElMessage.error('处理失败，请重试')
+      }
+    } catch (error) {
+      console.error('处理告警失败:', error)
+      ElMessage.error('处理告警时出现错误')
+    }
+  }
+  if (handleWarningForm.handleType === 'phone') {
+    // 展示家属电话和长者电话
+  }
+}
+
 // 方法
 const openAddDeviceDialog = (elderly: SelectElderly) => {
   currentElderly.value = elderly
@@ -2293,14 +2409,40 @@ $transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   white-space: nowrap;
 }
 
-/* 未读告警徽标 */
-.warning-flag {
+/* 告警操作组 */
+.warning-action-group {
   position: absolute;
-  top: 10px;
+  top: 0;
   left: 160px;
   z-index: 2;
-  border-radius: 10px;
-  padding: 2px 6px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.handle-warning-btn {
+  white-space: nowrap;
+  font-size: 14px;
+  padding: 8px 16px !important;
+}
+
+.handle-warning-content {
+  .elderly-info-section {
+    padding: 15px;
+    margin-bottom: 20px;
+    background: rgb(255 255 255 / 5%);
+    border-radius: 8px;
+
+    p {
+      margin: 0;
+      font-size: 16px;
+      color: $text-light;
+
+      strong {
+        color: $primary-color;
+      }
+    }
+  }
 }
 
 /* 右侧详情区域 */