119 lines
2.4 KiB
Vue
119 lines
2.4 KiB
Vue
<template>
|
|
<Card :title="title">
|
|
<DeviceCard
|
|
:leftCount="{
|
|
value: videoCountList.onlineNum,
|
|
label: '在线设备',
|
|
img: 'online'
|
|
}"
|
|
:rightCount="{
|
|
value: videoCountList.totalDevNum,
|
|
label: '离线设备',
|
|
img: 'offline'
|
|
}"
|
|
>
|
|
<div class="list">
|
|
<div class="list-head">设备名称</div>
|
|
<div class="listBox">
|
|
<div
|
|
class="list-item"
|
|
:class="item.deviceState == 1 ? 'online' : 'offline'"
|
|
v-for="(item, index) in videoCountList.videoList"
|
|
:key="index"
|
|
>
|
|
<div class="label">{{ item.videoName }}</div>
|
|
<div class="status">
|
|
{{ item.deviceState == 1 ? '在线' : '离线' }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</DeviceCard>
|
|
</Card>
|
|
</template>
|
|
|
|
<script>
|
|
import Card from '../components/Card.vue'
|
|
import DeviceCard from './components/DeviceCard.vue'
|
|
export default {
|
|
components: { Card, DeviceCard },
|
|
props: {
|
|
title: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
videoCountList: {
|
|
type: Object,
|
|
default: []
|
|
}
|
|
},
|
|
data() {
|
|
return {}
|
|
},
|
|
mounted() {
|
|
// console.log('--------------',this.videoCountList)
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
::-webkit-scrollbar {
|
|
width: 3px;
|
|
color: #636364;
|
|
}
|
|
|
|
.list {
|
|
padding: 0 10px;
|
|
color: #fff;
|
|
.list-head {
|
|
margin-bottom: 6px;
|
|
padding-left: 16px;
|
|
font-size: 12px;
|
|
}
|
|
.listBox {
|
|
height: 120px;
|
|
overflow: auto;
|
|
.list-item {
|
|
margin-bottom: 6px;
|
|
padding: 0 16px;
|
|
height: 22px;
|
|
display: flex;
|
|
align-items: center;
|
|
&.online {
|
|
background-image: linear-gradient(
|
|
90deg,
|
|
rgba(23, 54, 74, 1),
|
|
rgba(23, 54, 74, 0.2)
|
|
);
|
|
.status {
|
|
background-color: #3cabfd;
|
|
}
|
|
}
|
|
&.offline {
|
|
background-image: linear-gradient(
|
|
90deg,
|
|
rgba(67, 42, 63, 1),
|
|
rgba(67, 42, 63, 0.2)
|
|
);
|
|
.status {
|
|
background-color: #ff6c7f;
|
|
}
|
|
}
|
|
.status {
|
|
margin-right: 6px;
|
|
width: 36px;
|
|
height: 16px;
|
|
line-height: 16px;
|
|
text-align: center;
|
|
font-size: 12px;
|
|
border-radius: 9px;
|
|
}
|
|
.label {
|
|
margin-right: auto;
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|