admin/zhgdyun
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

中建四局(双碳管理):雾炮喷淋模块

Browse Source
This commit is contained in:
骆乐 2022-08-31 10:29:43 +08:00
parent c139bacd9a
commit 2d51ecaf4c
1 changed files with 123 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

128
src/views/projectAdmin/zjsj/carbon/leftCenter.vue
View File

@ -1,14 +1,132 @@
<template> <template>
<Card title="雾炮喷淋"> <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> </Card>
</template> </template>
<script> <script>
import Card from '../components/Card.vue' import Card from "../components/Card.vue";
export default { export default {
components: { Card } components: { Card },
} data() {
return {
alarmList: [
{
deviceName: "一号设备",
tempAlarmTime: "塔吊喷淋",
show: true
},
{
deviceName: "一号设备",
tempAlarmTime: "塔吊喷淋",
show: false
},
{
deviceName: "一号设备",
tempAlarmTime: "塔吊喷淋",
show: false
},
{
deviceName: "一号设备",
tempAlarmTime: "塔吊喷淋",
show: true
}
],
value: true
};
}
};
</script> </script>
<style></style> <style lang="less" scoped>
.containerBox {
width: 100%;
height: 100%;
.titleTxt {
font-size: 18px;
color: #6ee4f0;
margin-top: 5px;
margin-left: 5px;
}
.greenTable {
margin-top: 30px;
th {
color:#72bdc9;
border-bottom: 1px solid rgba(31, 68, 86, 0.3);
}
td {
color: white;
line-height: 25px;
}
}
.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>