34 lines
1.3 KiB
Vue
34 lines
1.3 KiB
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>
|