emcp/frontend/src/views/AlarmHistoryView.vue

<script setup lang="ts">
defineProps<{ store: any; actions: any }>()
</script>

<template>
  <section class="panel">
    <div class="section-header">
      <h2>报警历史</h2>
      <div class="actions">
        <button class="primary" :disabled="store.alarmLoading" @click="actions.refreshAlarms()">
          {{ store.alarmLoading ? '刷新中...' : '刷新列表' }}
        </button>
      </div>
    </div>
    <table class="table">
      <thead><tr><th>类型</th><th>时间</th><th>编号</th><th>内容</th><th>级别</th></tr></thead>
      <tbody>
        <tr v-for="alarm in store.alarms" :key="`${alarm.time}-${alarm.no}-${alarm.content}`">
          <td>{{ alarm.alarm_type }}</td>
          <td>{{ alarm.time }}</td>
          <td>{{ alarm.no }}</td>
          <td>{{ alarm.content }}</td>
          <td>{{ alarm.level }}</td>
        </tr>
      </tbody>
    </table>
    <div class="actions">
      <button class="primary" :disabled="store.alarmLoading || store.alarmPage <= 1" @click="actions.prevAlarmPage()">上一页</button>
      <button class="primary" :disabled="store.alarmLoading || !store.alarmHasNext" @click="actions.nextAlarmPage()">下一页</button>
    </div>
    <p class="hint">当前页：{{ store.alarmPage }}，最后刷新：{{ store.alarmUpdatedAt || '--' }}</p>
  </section>
</template>