<template>
|
<div>
|
<div class="card-search">
|
<div class="input-search">
|
<el-input
|
placeholder="按设备号、名称、地址"
|
v-model="inputSearchValue"
|
class="input-with-select"
|
>
|
<el-button
|
slot="append"
|
icon="el-icon-search"
|
@click.stop="inputSearchBtn"
|
></el-button>
|
</el-input>
|
</div>
|
<div class="radio">
|
<el-radio-group v-model="radio" @change="siteStatus">
|
<el-radio label="全部">全部</el-radio>
|
<el-radio label="仅显示预警设备">仅显示预警设备</el-radio>
|
<el-radio label="仅显示设备掉线">仅显示设备掉线</el-radio>
|
<el-radio label="仅显示设备故障">仅显示设备故障</el-radio>
|
</el-radio-group>
|
</div>
|
</div>
|
<el-row
|
v-infinite-scroll="load"
|
:infinite-scroll-disabled="disabled"
|
style="
|
margin-top: 10px;
|
display: flex;
|
justify-content: left;
|
flex-wrap: wrap;
|
"
|
>
|
<el-col
|
class="card-container"
|
:span="1"
|
v-for="(item, index) in option"
|
:key="index"
|
>
|
<a href="javascript:void(0);" @click.stop="goToDetails(item)">
|
<!-- <el-card
|
:style="
|
item.jtype == 1
|
? 'background: #F34A4Ae6'
|
: item.state == ''
|
? item.onlineStatus == 1
|
? 'background: #1DBB99e6'
|
: 'background: #C9C9C9e6'
|
: 'background: #F48F57e6'
|
"
|
> -->
|
<el-card
|
:style="
|
item.dtype == 0
|
? 'background: #C9C9C9e6'
|
: item.dtype == 1
|
? 'background: #1DBB99e6'
|
: item.dtype == 2
|
? 'background: #F34A4Ae6'
|
: item.dtype == 3
|
? 'background: #F48F57e6'
|
: ''
|
"
|
>
|
<div>{{ item.deviceName }}</div>
|
<div style="width: 80%">{{ item.street }}</div>
|
|
<!-- <div class="cet">
|
{{
|
item.jtype == 1
|
? "设备预警"
|
: item.state == ""
|
? item.onlineStatus == 1
|
? "设备正常"
|
: "设备掉线"
|
: "设备故障"
|
}}
|
</div> -->
|
|
<div class="cet">
|
{{
|
item.dtype == 0
|
? "设备掉线"
|
: item.dtype == 1
|
? "设备正常"
|
: item.dtype == 2
|
? "设备预警"
|
: item.dtype == 3
|
? "设备故障"
|
: ""
|
}}
|
</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>
|
<div class="card-load-btm">
|
<div class="spinner" v-if="loading" style="margin: auto; width: 70px">
|
<div class="bounce1"></div>
|
<div class="bounce2"></div>
|
<div class="bounce3"></div>
|
</div>
|
<div v-if="noMore">我是有底线的！</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { getList } from "@/api/supervisory/card";
|
export default {
|
data() {
|
return {
|
option: [],
|
count: [],
|
loading: false,
|
radio: "全部",
|
inputSearchValue: "",
|
};
|
},
|
computed: {
|
noMore() {
|
return this.option.length >= this.count.length;
|
},
|
disabled() {
|
return this.loading || this.noMore;
|
},
|
},
|
created() {
|
this.getEquipmentLists();
|
},
|
|
methods: {
|
load() {
|
this.loading = true;
|
|
setTimeout(() => {
|
for (var i = 0; i <= 20; i++) {
|
if (this.count.length > 0) {
|
this.option.push(this.count[0]);
|
this.count.shift();
|
}
|
}
|
this.loading = false;
|
}, 2000);
|
},
|
|
inputSearchBtn() {
|
this.getEquipmentLists();
|
},
|
|
siteStatus() {
|
this.inputSearchValue = "";
|
this.getEquipmentLists();
|
},
|
|
getEquipmentLists() {
|
getList({ deviceName: this.inputSearchValue }).then((res) => {
|
var a = [],
|
b = [],
|
c = [],
|
f = [];
|
if (this.radio == "全部") {
|
res.data.data.forEach((item) => {
|
if (item.dtype == 2) {
|
f.push(item);
|
} else {
|
if (item.dtype == 3) a.push(item);
|
if (item.dtype == 1) c.push(item);
|
if (item.dtype == 0) b.push(item);
|
}
|
});
|
} else if (this.radio == "仅显示预警设备") {
|
res.data.data.forEach((item) => {
|
if (item.dtype == 2) c.push(item);
|
});
|
} else if (this.radio == "仅显示设备掉线") {
|
res.data.data.forEach((item) => {
|
if (item.dtype == 0) b.push(item);
|
});
|
} else if (this.radio == "仅显示设备故障") {
|
res.data.data.forEach((item) => {
|
if (item.dtype == 3) a.push(item);
|
});
|
}
|
// if (this.radio == "全部") {
|
// res.data.data.forEach((item) => {
|
// if (item.jtype == 1) {
|
// f.push(item);
|
// } else {
|
// if (item.state != "") a.push(item);
|
// if (item.state == "" && item.onlineStatus == 1) c.push(item);
|
// if (item.state == "" && item.onlineStatus != 1) b.push(item);
|
// }
|
// });
|
// } else if (this.radio == "仅显示预警设备") {
|
// res.data.data.forEach((item) => {
|
// if (item.jtype == 1) c.push(item);
|
// });
|
// } else if (this.radio == "仅显示设备掉线") {
|
// res.data.data.forEach((item) => {
|
// if (item.onlineStatus != 1) b.push(item);
|
// });
|
// } else if (this.radio == "仅显示设备故障") {
|
// res.data.data.forEach((item) => {
|
// if (item.state != "") a.push(item);
|
// });
|
// }
|
|
var d = f.concat(a.concat(c.concat(b)));
|
|
d.forEach((item) => {
|
this.count.push(item);
|
});
|
this.option = [];
|
for (var i = 0; i <= 24; i++) {
|
if (this.count.length > 0) {
|
this.option.push(this.count[0]);
|
this.count.shift();
|
}
|
}
|
this.inputSearchValue = "";
|
});
|
},
|
|
goToDetails(data) {
|
this.$router.push({ path: "/dataL/dataL", query: data });
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss">
|
@-webkit-keyframes sk-bouncedelay {
|
0%,
|
80%,
|
to {
|
-webkit-transform: scale(0);
|
}
|
|
40% {
|
-webkit-transform: scale(1);
|
}
|
}
|
|
@keyframes sk-bouncedelay {
|
0%,
|
80%,
|
to {
|
-webkit-transform: scale(0);
|
transform: scale(0);
|
}
|
|
40% {
|
-webkit-transform: scale(1);
|
transform: scale(1);
|
}
|
}
|
.card-search {
|
padding: 0 5px;
|
height: 50px;
|
line-height: 50px;
|
border-bottom: 1px solid #e4e4e4;
|
.input-search {
|
min-width: 360px;
|
float: left;
|
.el-input__inner,
|
.el-input-group__append {
|
height: 32px;
|
border: none;
|
background-color: #fff;
|
}
|
.el-input-group__append {
|
padding-left: 20px;
|
padding-right: 16px;
|
button {
|
padding: 9px 10px;
|
}
|
}
|
}
|
.radio {
|
float: right;
|
}
|
}
|
.card-load-btm {
|
line-height: 40px;
|
text-align: center;
|
color: #9e9d9d;
|
.spinner {
|
margin: auto;
|
width: 70px;
|
text-align: center;
|
div {
|
display: inline-block;
|
width: 15px;
|
height: 15px;
|
border-radius: 100%;
|
background-color: #9e9e9e;
|
-webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
|
animation: sk-bouncedelay 1.4s infinite ease-in-out both;
|
}
|
.bounce1 {
|
-webkit-animation-delay: -0.32s;
|
animation-delay: -0.32s;
|
}
|
.bounce2 {
|
-webkit-animation-delay: -0.16s;
|
animation-delay: -0.16s;
|
}
|
div + * {
|
margin-left: 5px;
|
}
|
}
|
}
|
.card-container {
|
padding: 0 10px;
|
height: 172px !important;
|
box-sizing: border-box;
|
margin-bottom: 20px !important;
|
width: 20% !important;
|
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>
|
