125 lines
3.1 KiB
Vue
125 lines
3.1 KiB
Vue
<script setup>
|
|
import { ref, onMounted, defineProps, inject, watch } from "vue";
|
|
import useActiveBtn from "@/hooks/useActiveBtn";
|
|
import { useI18n } from "vue-i18n";
|
|
|
|
const { t } = useI18n();
|
|
const props = defineProps({
|
|
onCancel: Function,
|
|
modalData: Object,
|
|
});
|
|
const { items, changeActiveBtn, setItems, selectedBtn } = useActiveBtn();
|
|
const detailData = ref([]);
|
|
onMounted(() => {
|
|
setItems([
|
|
{
|
|
title: t("alert.online"),
|
|
key: "online",
|
|
active: true,
|
|
},
|
|
{
|
|
title: t("alert.offline"),
|
|
key: "offline",
|
|
active: false,
|
|
},
|
|
{
|
|
title: t("alert.alarm"),
|
|
key: "alarm",
|
|
active: false,
|
|
},
|
|
]);
|
|
});
|
|
|
|
watch(selectedBtn, (newVal, oldVal) => {
|
|
if (newVal) {
|
|
detailData.value = props.modalData[newVal.key];
|
|
}
|
|
});
|
|
|
|
watch(
|
|
() => props.modalData,
|
|
(newVal, oldVal) => {
|
|
if (newVal) {
|
|
changeActiveBtn(items.value[0]);
|
|
}
|
|
},
|
|
{ immediate: true }
|
|
);
|
|
</script>
|
|
|
|
<template>
|
|
<Modal id="system_status_modal" :onCancel="onCancel" :width="600">
|
|
<template #modalTitle>
|
|
<div class="flex items-center justify-between">
|
|
<ButtonGroup
|
|
:items="items"
|
|
:withLine="true"
|
|
className="btn-sm"
|
|
:onclick="
|
|
(e, item) => {
|
|
changeActiveBtn(item);
|
|
}
|
|
"
|
|
/>
|
|
<button
|
|
type="link"
|
|
class="btn-link btn-text-without-border px-2"
|
|
@click="onCancel"
|
|
>
|
|
<font-awesome-icon :icon="['fas', 'times']" class="text-[#a5abb1]" />
|
|
</button>
|
|
</div>
|
|
</template>
|
|
<template #modalContent>
|
|
<div class="overflow-x-auto">
|
|
<table class="table text-base mt-5">
|
|
<thead>
|
|
<tr>
|
|
<th
|
|
class="text-base border text-white text-center bg-cyan-600 bg-opacity-30"
|
|
>
|
|
{{ $t("table.serial_number") }}
|
|
</th>
|
|
<th
|
|
class="text-base border text-white text-center bg-cyan-600 bg-opacity-30"
|
|
>
|
|
{{ $t("table.name") }}
|
|
</th>
|
|
<th
|
|
class="text-base border text-white text-center bg-cyan-600 bg-opacity-30"
|
|
>
|
|
{{ $t("operation.updated_time") }}
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr
|
|
v-if="detailData?.length > 0"
|
|
v-for="(equipment, index) in detailData"
|
|
:key="index"
|
|
class="hover:bg-gray-700"
|
|
>
|
|
<td class="border text-white text-center">
|
|
{{ index + 1 }}
|
|
</td>
|
|
<td class="border text-white text-center">
|
|
{{ equipment.name }}
|
|
</td>
|
|
<td class="border text-white text-center">
|
|
{{ equipment.time || "-" }}
|
|
</td>
|
|
</tr>
|
|
<tr v-else>
|
|
<td colspan="3" class="border text-white text-center">
|
|
{{ $t("table.no_data") }}
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</template>
|
|
</Modal>
|
|
</template>
|
|
|
|
<style lang="scss" scoped></style>
|