cw_web/src/views/settings/alarmSettings/components/manualAlarm/index.vue

<template>
  <div class="motion-detection">
    <div class="section">
      <div class="section-title">Manual Alarm Control</div>
      <div class="section-content">
        <div class="alarm-status-row">
          <span class="label">Current Status：</span>
          <el-tag :type="alarmActive ? 'danger' : 'info'" size="large">
            {{ alarmActive ? 'Alarm Active' : 'Alarm Inactive' }}
          </el-tag>
        </div>
      </div>
    </div>

    <el-divider class="short-divider"/>

    <div class="section">
      <div class="section-title">Alarm Actions</div>
      <div class="alarm-actions">
        <el-button
            type="primary"
            round
            @click="handleAlarm"
            :loading="loading"
        >
          Enable Manual Alarm
        </el-button>
        <el-button
            type="info"
            round
            @click="handleCloseAlarm"
            :loading="disableLoading"
        >
          Disable Manual Alarm
        </el-button>
      </div>
    </div>

    <el-divider class="short-divider"/>

    <div class="section">
      <div class="section-title">Notes</div>
      <div class="alarm-tip">
        <el-icon class="tip-icon"><InfoFilled/></el-icon>
        <span>Alarm will remain active for 1 minute after activation.</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {ref} from 'vue'
import {ElMessage} from 'element-plus'
import {InfoFilled} from '@element-plus/icons-vue'
import {cameraAlarm} from '@/api/setting'

const loading = ref(false)
const disableLoading = ref(false)
const alarmActive = ref(false)

async function handleCloseAlarm() {
  if (disableLoading.value) return
  disableLoading.value = true
  try {
    const res = await cameraAlarm({AlarmSettings: 0}) as { data: string }
    if (res.data === 'ok\n') {
      alarmActive.value = false
      ElMessage.success('Manual Alarm Deactivated Successfully')
    } else {
      ElMessage.warning('Manual Alarm Deactivation Error')
    }
  } catch {
    ElMessage.error('Manual Alarm Deactivation Error')
  } finally {
    disableLoading.value = false
  }
}

async function handleAlarm() {
  if (loading.value) return
  loading.value = true
  try {
    const res = await cameraAlarm({AlarmSettings: 1}) as { data: string }
    if (res.data === 'ok\n') {
      alarmActive.value = true
      ElMessage.success('Manual alarm activated successfully. It will remain active for 1 minute.')
    } else {
      ElMessage.warning('Manual Alarm Activation Error')
    }
  } catch {
    ElMessage.error('Failed to Activate Manual Alarm.')
  } finally {
    loading.value = false
  }
}
</script>

<style scoped lang="scss">
.motion-detection {
  padding: 20px;

  .short-divider {
    max-width: 700px;
    margin: 16px 0;
  }

  .section {
    margin: 16px 0;

    .section-title {
      font-size: 14px;
      font-weight: 500;
      color: #333;
      margin-bottom: 12px;
    }

    .section-content {
      display: flex;
      gap: 100px;
    }
  }

  .alarm-status-row {
    display: flex;
    align-items: center;

    .label {
      font-size: 14px;
      color: #333;
      flex-shrink: 0;
    }
  }

  .alarm-actions {
    display: flex;
    gap: 16px;
  }

  .alarm-tip {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #909399;

    .tip-icon {
      font-size: 15px;
      color: #909399;
    }
  }
}
</style>