173 lines
3.9 KiB
Vue
173 lines
3.9 KiB
Vue
<template>
|
|
<view>
|
|
<div class="countCard">
|
|
<div class="countCard_text">水质设备状态</div>
|
|
<div class="countCard_tab">
|
|
<div class="countCard_tab_content" @click="name => online = !online" :class="{ active: online }">
|
|
<div class="countCard_tab_content_top">
|
|
<div class="countCard_tab_content_top_icon" style="color:#02A7F0;background: #d2ebfb;">在线</div>
|
|
</div>
|
|
<div class="countCard_tab_content_text">
|
|
<span style="color:#02A7F0">{{onlineNum}}</span>
|
|
<span style="font-size: 12px;margin-left: 5px;">个</span>
|
|
</div>
|
|
</div>
|
|
<div class="countCard_tab_content" @click="name => outline = !outline" :class="{ active: outline }">
|
|
<div class="countCard_tab_content_top">
|
|
<div class="countCard_tab_content_top_icon" style="color:#ffffff;background: #e79e42;">离线</div>
|
|
</div>
|
|
<div class="countCard_tab_content_text">
|
|
<span style="color:#e79e42">{{outlineNum}}</span>
|
|
<span style="font-size: 12px;margin-left: 5px;">个</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="countCard2">
|
|
<u-search placeholder="请输入" v-model="keyword" :showAction="false"></u-search>
|
|
</div>
|
|
<div class="scollBox">
|
|
<szItem v-for="(item, index) in listData" :key="item.mn" :record="item"></szItem>
|
|
</div>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import szItem from "./szItem.vue"
|
|
|
|
export default {
|
|
components: { szItem },
|
|
data() {
|
|
return {
|
|
online:true,
|
|
onlineNum:0,
|
|
outline:true,
|
|
outlineNum:0,
|
|
keyword:null,
|
|
data:[]
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getData()
|
|
},
|
|
computed: {
|
|
listData() {
|
|
let list = this.data||[]
|
|
//筛选在线
|
|
if( this.online && !this.outline){
|
|
list = list.filter(item=>item.status==='1')
|
|
}
|
|
//筛选离线
|
|
if( !this.online && this.outline){
|
|
list = list.filter(item=>item.status==='0')
|
|
}
|
|
//清空
|
|
if( !this.online && !this.outline){
|
|
list = []
|
|
}
|
|
if( this.keyword ){
|
|
list = list.filter(item=>item.name.indexOf(this.keyword)>-1)
|
|
}
|
|
|
|
return list
|
|
},
|
|
},
|
|
methods: {
|
|
getData() {
|
|
uni.request(
|
|
{
|
|
url: 'http://ywxj.cloudowr.cn/yjt/wq/real/online',
|
|
method: 'GET',
|
|
success: (res) => {
|
|
if(res.data.code!==200){return}
|
|
const list = []
|
|
let onlineNum = 0
|
|
let outlineNum = 0
|
|
res.data.data[true]?.map((item)=>{
|
|
list.push({
|
|
...item,
|
|
status:'1'
|
|
})
|
|
onlineNum = onlineNum + 1
|
|
})
|
|
res.data.data[false]?.map((item)=>{
|
|
list.push({
|
|
...item,
|
|
status:'0'
|
|
})
|
|
outlineNum = outlineNum + 1
|
|
})
|
|
this.onlineNum = onlineNum
|
|
this.outlineNum = outlineNum
|
|
this.data = list
|
|
},
|
|
fail: (err) => {
|
|
console.log('失败:', err);
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.countCard{
|
|
width: calc( 100% - 32px );
|
|
margin: 5px;
|
|
margin-top: 10px;
|
|
padding: 10px;
|
|
background: #ffffff;
|
|
border-radius: 5px;
|
|
border: 1px solid #eee;
|
|
}
|
|
.countCard2{
|
|
width: calc( 100% - 32px );
|
|
margin: 5px;
|
|
margin-top: 5px;
|
|
padding: 10px;
|
|
background: #ffffff;
|
|
border-radius: 5px;
|
|
border: 1px solid #eee;
|
|
}
|
|
.countCard_text{
|
|
color: #333333;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
margin-bottom: 8px;
|
|
}
|
|
.countCard_tab{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
.countCard_tab_content{
|
|
width: 48%;
|
|
height: 60px;
|
|
border: 1px solid #eee;
|
|
border-radius: 5px;
|
|
}
|
|
.countCard_tab_content_top_icon{
|
|
width: 80px;
|
|
height: 20px;
|
|
font-size: 12px;
|
|
text-align: center;
|
|
line-height: 20px;
|
|
border-radius: 4px;
|
|
}
|
|
.countCard_tab_content_text{
|
|
font-size: 18px;
|
|
text-align: center;
|
|
color: #8c8c8c;
|
|
font-weight: 500;
|
|
line-height: 30px;
|
|
}
|
|
.active {
|
|
border: 1px solid #3498db;
|
|
box-shadow: 0 0 10px rgba(52, 152, 219, 0.2);
|
|
}
|
|
.scollBox{
|
|
width: 100%;
|
|
overflow-y: scroll;
|
|
height: calc( 100vh - 304px );
|
|
}
|
|
</style>
|