80 lines
2.4 KiB
Vue
80 lines
2.4 KiB
Vue
<script setup>
|
||
import { onMounted } from "vue";
|
||
import useAlarmStore from "@/stores/useAlarmStore";
|
||
import { ackSingleAlarm } from "@/apis/building";
|
||
|
||
const store = useAlarmStore();
|
||
|
||
onMounted(() => {
|
||
store.getAlarmDataFromBaja();
|
||
});
|
||
|
||
const ackedAlarm = async (uuid) => {
|
||
const res = await ackSingleAlarm(uuid);
|
||
console.log("ackedAlarm", res);
|
||
};
|
||
</script>
|
||
|
||
<template>
|
||
<div>
|
||
<ul class="py-6 pr-4 min-h-full text-base-content">
|
||
<!-- Sidebar content here -->
|
||
<li class="my-3" v-for="alarm in store.alarmData" :key="alarm.uuid">
|
||
<div
|
||
class="w-full shadow-xl border border-success bg-body bg-opacity-80"
|
||
>
|
||
<div class="p-5">
|
||
<p class="text-base flex justify-between">
|
||
<span>
|
||
<font-awesome-icon
|
||
:icon="['fas', 'exclamation-triangle']"
|
||
class="text-warning mr-2"
|
||
/>
|
||
<span>{{ $t("alarm.notify") }}</span></span
|
||
>
|
||
<small>
|
||
<span class="mr-4"
|
||
>{{ alarm.timestamp_date }} {{ alarm.timestamp_time }}</span
|
||
>
|
||
<font-awesome-icon
|
||
:icon="['fas', 'times']"
|
||
size="lg"
|
||
class="text-white"
|
||
/>
|
||
</small>
|
||
</p>
|
||
<div class="divider my-2"></div>
|
||
<div>
|
||
<p>{{ $t("alarm.number") }}：{{ alarm.uuid }}</p>
|
||
<!-- <p>異常等級：255</p> -->
|
||
<p>{{ $t("alarm.category") }}：{{ alarm.alarmClass }}</p>
|
||
<p>{{ $t("alarm.device_name") }}：{{ alarm.full_name }}</p>
|
||
<p>{{ $t("alarm.message") }}：{{ alarm.msg }}</p>
|
||
</div>
|
||
<div class="card-actions mt-1 justify-end">
|
||
<button
|
||
class="btn btn-sm btn-success"
|
||
@click="() => ackedAlarm(alarm.uuid)"
|
||
>
|
||
{{ $t("alarm.confirm") }}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</template>
|
||
|
||
<style lang="scss" scoped>
|
||
.card::before {
|
||
@apply absolute h-5 w-5 top-1 left-1 bg-no-repeat z-10 bg-[url('../../assets/img/table/content-box-background01.svg')] bg-center;
|
||
content: "";
|
||
}
|
||
|
||
.card::after {
|
||
@apply absolute bottom-1 right-1 h-5 w-5 bg-no-repeat z-10 bg-[url('../../assets/img/table/content-box-background05.svg')] bg-center;
|
||
content: "";
|
||
}
|
||
</style>
|