| | |
| | | <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 label="仅显示预警设备">仅显示预警设备</el-radio> |
| | | <el-radio label="仅显示设备掉线">仅显示设备掉线</el-radio> |
| | | <el-radio label="仅显示设备故障">仅显示设备故障</el-radio> |
| | |
| | | <el-row |
| | | v-infinite-scroll="load" |
| | | :infinite-scroll-disabled="disabled" |
| | | style="margin-top: 10px" |
| | | style=" |
| | | margin-top: 10px; |
| | | display: flex; |
| | | justify-content: left; |
| | | flex-wrap: wrap; |
| | | " |
| | | > |
| | | <el-col |
| | | class="card-container" |
| | |
| | | :key="index" |
| | | > |
| | | <a href="javascript:void(0);" @click.stop="goToDetails(item)"> |
| | | <el-card |
| | | <!-- <el-card |
| | | :style=" |
| | | item.state == '' |
| | | 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>{{ item.street }}</div> |
| | | <div style="width: 80%">{{ item.street }}</div> |
| | | |
| | | <div class="cet"> |
| | | <!-- <div class="cet"> |
| | | {{ |
| | | item.state == "" |
| | | 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="" /> |
| | | <img v-if="item.deviceType == '监控设备'" src="/img/jiank.png" alt="" /> |
| | | <img v-if="item.deviceType == '一键报警'" src="/img/baojin.png" alt="" /> |
| | | <img v-if="item.deviceType == '一键求助'" src="/img/alarm.png" alt="" /> |
| | | |
| | | <div class="bot"> |
| | | <span> |
| | |
| | | this.loading = false; |
| | | }, 2000); |
| | | }, |
| | | siteStatus(value, e) { |
| | | console.log(this.radio, value); |
| | | |
| | | 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); |
| | | // }); |
| | | // } |
| | | |
| | | if (this.radio == "一键求助") { |
| | | res.data.data.forEach((item) => { |
| | | if (item.deviceType.indexOf("一键求助") != -1) c.push(item); |
| | | }); |
| | | } else if (this.radio == "一键报警") { |
| | | res.data.data.forEach((item) => { |
| | | if (item.deviceType.indexOf("一键报警") != -1) c.push(item); |
| | | }); |
| | | } else if (this.radio == "监控设备") { |
| | | res.data.data.forEach((item) => { |
| | | if (item.deviceType.indexOf("监控设备") != -1) c.push(item); |
| | | }); |
| | | } |
| | | |
| | | var d = f.concat(a.concat(c.concat(b))); |
| | | this.count = []; |
| | | 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 }); |
| | | }, |
| | |
| | | height: 172px !important; |
| | | box-sizing: border-box; |
| | | margin-bottom: 20px !important; |
| | | min-width: 368px; |
| | | max-width: 370px; |
| | | width: 20% !important; |
| | | a { |
| | | width: 100%; |
| | | height: 100%; |
| | |
| | | } |
| | | } |
| | | } |
| | | </style> |
| | | </style> |