87 lines
2.2 KiB
Vue
87 lines
2.2 KiB
Vue
<template>
|
|
<div class="alarm-wrapper">
|
|
<div class="table-header">
|
|
<div
|
|
class="header-item"
|
|
v-for="item in headerList"
|
|
:key="item.id"
|
|
:style="{ width: item.width }"
|
|
>
|
|
<div class="name">{{ item.name }}</div>
|
|
<div class="img"></div>
|
|
</div>
|
|
</div>
|
|
<div class="table-body">
|
|
<div
|
|
class="table-row"
|
|
v-for="(item, index) in tableList"
|
|
:key="item.id"
|
|
:class="index % 2 === 0 ? 'active-bg' : ''"
|
|
>
|
|
<div style="width: 35%" class="title">
|
|
{{ item.alarmStartTime }}
|
|
</div>
|
|
<div style="width: 25%" class="title title-overflow">
|
|
{{ item.deviceName }}
|
|
</div>
|
|
<div style="width: 22%" class="title">{{ item.alarmTypeLabel }}</div>
|
|
<div
|
|
style="width: 18%"
|
|
class="title"
|
|
:class="
|
|
item.state === '2'
|
|
? 'color-two'
|
|
: item.state === '3'
|
|
? 'color-three'
|
|
: item.state === '4'
|
|
? 'color-four'
|
|
: 'color-one'
|
|
"
|
|
>
|
|
{{ item.stateLabel }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { alarmManage } from "@/api/largeScreen";
|
|
import { getDicts } from "@/api/index";
|
|
|
|
const props = defineProps(["buildingId"]);
|
|
|
|
const headerList = ref([
|
|
{ id: 0, name: "告警时间", width: "35%" },
|
|
{ id: 1, name: "设备名称", width: "25%" },
|
|
{ id: 2, name: "告警类型", width: "22%" },
|
|
{ id: 3, name: "告警状态", width: "18%" },
|
|
]);
|
|
const tableList = ref([]);
|
|
|
|
const alarmTypeList = ref([]);
|
|
const alarmStateList = ref([]);
|
|
|
|
onMounted(async () => {
|
|
alarmTypeList.value = await getDicts("alarm_type");
|
|
alarmStateList.value = await getDicts("alarm_state");
|
|
|
|
alarmManage({ buildingIdList: props.buildingId }).then((res) => {
|
|
tableList.value = res.rows.map((item) => {
|
|
return {
|
|
...item,
|
|
alarmTypeLabel: alarmTypeList.value.data.find(
|
|
(v) => v.dictValue === item.alarmType
|
|
)?.dictLabel,
|
|
stateLabel: alarmStateList.value.data.find(
|
|
(v) => v.dictValue === item.state
|
|
)?.dictLabel,
|
|
};
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
</style>
|