<template>
|
<el-row>
|
<el-col
|
class="card-container"
|
:span="1"
|
v-for="(item, index) in option"
|
:key="index"
|
>
|
<a href="">
|
<el-card
|
:style="
|
item.state == ''
|
? item.onlineStatus == 1
|
? 'background: #1DBB99e6'
|
: 'background: #C9C9C9e6'
|
: 'background: #F48F57e6'
|
"
|
@click="alert(1)"
|
>
|
<div>{{ item.deviceName }}</div>
|
<div>{{ item.street }}</div>
|
|
<div class="cet">
|
{{
|
item.state == ""
|
? item.onlineStatus == 1
|
? "设备在线"
|
: "设备掉线"
|
: "设备故障"
|
}}
|
</div>
|
|
<img src="/img/alarm.png" alt="" />
|
|
<div class="bot">
|
<span>
|
{{ item.deviceNumber }}
|
</span>
|
<span>
|
{{ item.stime }}
|
</span>
|
</div>
|
</el-card>
|
</a>
|
</el-col>
|
</el-row>
|
</template>
|
|
<script>
|
import { getList } from "@/api/supervisory/card";
|
export default {
|
data() {
|
return {
|
option: [],
|
};
|
},
|
created() {
|
getList().then((res) => {
|
var a = [],
|
b = [],
|
c = [];
|
|
res.data.data.forEach((item) => {
|
if (item.state != "") a.push(item);
|
if (item.state == "" && item.onlineStatus != 1) b.push(item);
|
if (item.state == "" && item.onlineStatus == 1) c.push(item);
|
});
|
|
this.option = a.concat(c.concat(b));
|
});
|
},
|
};
|
</script>
|
|
<style lang="scss">
|
.card-container {
|
padding: 0 10px;
|
height: 172px !important;
|
box-sizing: border-box;
|
margin-bottom: 20px !important;
|
min-width: 368px;
|
max-width: 370px;
|
a {
|
width: 100%;
|
height: 100%;
|
cursor: pointer;
|
.el-card {
|
height: 100%;
|
color: #180808;
|
&:hover {
|
transform: scale(1.04);
|
}
|
.el-card__body {
|
position: relative;
|
height: 100%;
|
box-sizing: border-box;
|
.bot {
|
position: absolute;
|
left: 16px;
|
bottom: 16px;
|
width: calc(100% - 32px);
|
span:nth-child(1) {
|
float: left;
|
}
|
span:nth-child(2) {
|
float: right;
|
}
|
}
|
.cet {
|
position: absolute;
|
top: 50%;
|
left: 16px;
|
}
|
div {
|
line-height: 24px;
|
font-size: 14px;
|
}
|
img {
|
position: absolute;
|
right: 16px;
|
top: 40%;
|
width: 40px;
|
}
|
}
|
}
|
&:hover {
|
color: #180808;
|
text-decoration: none;
|
}
|
}
|
}
|
</style>
|
