41 lines
1.1 KiB
Vue
41 lines
1.1 KiB
Vue
<script setup>
|
|
import useAlarmStore from "@/stores/useAlarmStore";
|
|
import dayjs from "dayjs";
|
|
import { computed } from "vue";
|
|
|
|
const store = useAlarmStore();
|
|
const alarms = computed(() =>
|
|
store.alarmData.slice(0, 5).map((d) => ({
|
|
...d,
|
|
timestamp_date: dayjs(d.timestamp_date).format("YYYY.MM.DD"),
|
|
timestamp_time: d.timestamp_time.split(":").slice(0, 2).join(":"),
|
|
}))
|
|
);
|
|
</script>
|
|
|
|
<template>
|
|
<div class="overflow-x-auto">
|
|
<h3 class="text-info font-bold text-xl text-center">異常資料 Top 5</h3>
|
|
<table class="table">
|
|
<thead>
|
|
<tr class="border-b-2 border-info text-base">
|
|
<th>日期</th>
|
|
<th>時間</th>
|
|
<th>設備名稱</th>
|
|
<th>備註</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="text-base">
|
|
<tr v-for="alarm in alarms" :key="alarm.uuid">
|
|
<td>{{ alarm.timestamp_date }}</td>
|
|
<td>{{ alarm.timestamp_time }}</td>
|
|
<td>{{ alarm.full_name }}</td>
|
|
<td>{{ alarm.msg }}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped></style>
|