137 lines
2.9 KiB
Vue
137 lines
2.9 KiB
Vue
|
<template>
|
||
|
|
<Card title="雾炮喷淋">
|
||
|
|
<div class="containerBox">
|
||
|
|
<div class="dataBoardContent">
|
||
|
|
<vue-scroll>
|
||
|
|
<table class="greenTable">
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th>报警设备</th>
|
||
|
|
<th>报警时间</th>
|
||
|
|
<th>报警类型</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<tr v-for="(item, index) in alarmList" :key="index">
|
||
|
|
<td>{{ item.deviceName }}</td>
|
||
|
|
<td>{{ item.tempAlarmTime }}</td>
|
||
|
|
<td>
|
||
|
|
<div :class=" !item.show ? 'unAlarm' : 'alarmType'"></div>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
<div class="placeholderBox placeholderBox2" v-if="alarmList.length == 0">
|
||
|
|
<img src="@/assets/images/noData3.png" alt srcset />
|
||
|
|
<p>
|
||
|
|
<!-- 暂无数据 -->
|
||
|
|
{{$t('message.dataBoard.nodata')}}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</vue-scroll>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</Card>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import Card from "../components/Card.vue";
|
||
|
|
export default {
|
||
|
|
components: { Card },
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
alarmList: [
|
||
|
|
{
|
||
|
|
deviceName: "一号设备",
|
||
|
|
tempAlarmTime: "塔吊喷淋",
|
||
|
|
show: true
|
||
|
|
},
|
||
|
|
{
|
||
|
|
deviceName: "一号设备",
|
||
|
|
tempAlarmTime: "塔吊喷淋",
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
{
|
||
|
|
deviceName: "一号设备",
|
||
|
|
tempAlarmTime: "塔吊喷淋",
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
{
|
||
|
|
deviceName: "一号设备",
|
||
|
|
tempAlarmTime: "塔吊喷淋",
|
||
|
|
show: true
|
||
|
|
},
|
||
|
|
{
|
||
|
|
deviceName: "一号设备",
|
||
|
|
tempAlarmTime: "塔吊喷淋",
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
],
|
||
|
|
|
||
|
|
value: true
|
||
|
|
};
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="less" scoped>
|
||
|
|
.containerBox {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
|
||
|
|
.titleTxt {
|
||
|
|
font-size: 18px;
|
||
|
|
color: #6ee4f0;
|
||
|
|
margin-top: 5px;
|
||
|
|
margin-left: 5px;
|
||
|
|
}
|
||
|
|
.greenTable {
|
||
|
|
th {
|
||
|
|
color:#72bdc9;
|
||
|
|
border-bottom: 1px solid rgba(31, 68, 86, 0.3);
|
||
|
|
line-height: 35px;
|
||
|
|
}
|
||
|
|
td {
|
||
|
|
color: #c5c7cc;
|
||
|
|
line-height: 35px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.alarmType {
|
||
|
|
position: relative;
|
||
|
|
left: 40%;
|
||
|
|
width: 35px;
|
||
|
|
height: 15px;
|
||
|
|
background-color: #08b58a;
|
||
|
|
border-radius: 8px;
|
||
|
|
}
|
||
|
|
.alarmType::before {
|
||
|
|
content: "";
|
||
|
|
position: absolute;
|
||
|
|
top: 1px;
|
||
|
|
left: 3px;
|
||
|
|
width: 12px;
|
||
|
|
height: 12px;
|
||
|
|
border-radius: 50%;
|
||
|
|
background-color: #fff;
|
||
|
|
}
|
||
|
|
.unAlarm {
|
||
|
|
position: relative;
|
||
|
|
left: 40%;
|
||
|
|
width: 35px;
|
||
|
|
height: 15px;
|
||
|
|
background-color: #6d7077;
|
||
|
|
border-radius: 8px;
|
||
|
|
}
|
||
|
|
.unAlarm::before {
|
||
|
|
content: "";
|
||
|
|
position: absolute;
|
||
|
|
top: 1px;
|
||
|
|
right: 3px;
|
||
|
|
width: 12px;
|
||
|
|
height: 12px;
|
||
|
|
border-radius: 50%;
|
||
|
|
background-color: #fff;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|