<template>
	<Card title="报警记录">
		<div class="tableBox">
			<div class="tabList">
				<div class="tabOne">报警设备</div>
				<div class="tabTwo">报警时间</div>
				<div class="tabThree">报警类型</div>
			</div>
			<div class="listBox" ref="scrollRef">
				<el-scrollbar style="height:85%">
				<div v-for="item in list" class="listStyle">
					<div class="dev">{{ item.deviceName }}</div>
					<div class="time">{{ item.tempAlarmTime }}</div>
					<div class="type" style="margin-right: 8%; width: 6%">{{ item.alarmTypeName }}</div>
				</div>
			</el-scrollbar>
				<div class="notoDta" v-if="list.length == 0">
					<img src="@/assets/images/noData.png" alt="" />
					<p>暂无数据</p>
				</div>
			</div>
		</div>
	</Card>
</template>

<script lang="ts" setup>
import { selectNewEnvironmentAlarmListApi } from "@/api/modules/headNoise";
import { GlobalStore } from "@/stores";
import { ref, onMounted } from "vue";
import Card from "@/components/card.vue";
const store = GlobalStore();

const list = ref([]);
//获取报警记录
const getList = async () => {
	const res = await selectNewEnvironmentAlarmListApi({ projectSn: store.sn });
	console.log("获取报警记录", res);
	list.value = res.result;
};
onMounted(() => {
	getList();
});
</script>

<style lang="scss" scoped>
.tableBox {
	width: 100%;
	height: 100%;
	.tabList {
		display: flex;
		width: 100%;
		height: 14%;
		background: url("@/assets/images/dustNoise/rightBottom.png") no-repeat;
		background-size: 100% 100%;
		// position: absolute;
		left: 75.5%;
		top: 75%;
		color: #7b86a3;
		font-size: calc(100vw * 14 / 1920);
		line-height: 30px;
		justify-content: space-around;
	}
	.listBox {
		height: 100%;
		.listStyle {
			display: flex;
			justify-content: space-around;
			color: #fff;
			height: 12%;
			line-height: 25px;
			font-size: calc(100vw * 12 / 1920);
			.dev{
				width: 20%;
				white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
			}
		}
		.listStyle:hover {
			background: #091f3f;
		}
	}
	.notoDta {
		top: 71%;
		width: 12%;
		margin: 5% -40%;
		left: 120%;
		position: absolute;
		img {
			width: 40%;
			margin: 5% 30%;
		}
		p {
			color: #fff;
			font-size: calc(100vw * 14 / 1920);
			margin: -6% 37%;
		}
	}
}
</style>
