184 lines
4.5 KiB
Vue
184 lines
4.5 KiB
Vue
<template>
|
|
<div class="card">
|
|
<div class="card-title">
|
|
{{ $t('message.' + data.title) }}
|
|
</div>
|
|
<div class="card-content">
|
|
<div class="counts">
|
|
<div class="count">
|
|
<img :src="data.countImg" />
|
|
<div class="info">
|
|
<div class="num blue">{{ data.countNum }}</div>
|
|
<div class="label">
|
|
{{ $t('message.dataBoard.' + data.countLabel) }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="count">
|
|
<img :src="data.todayImg" />
|
|
<div class="info">
|
|
<div class="num orange">{{ data.todayNum }}</div>
|
|
<div class="label">
|
|
{{ $t('message.dataBoard.' + data.todayLabel) }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="list">
|
|
<vue-scroll>
|
|
<template v-if="type === 'face'">
|
|
<div class="list-item" :class="item.deviceState == 2 ? 'offline' : 'online'" v-for="(item, index) in list" :key="index">
|
|
<span class="type" v-if="item.deviceState == 1">在线</span>
|
|
<span class="type" v-else>离线</span>
|
|
<p>{{ item.devName }}</p>
|
|
<span class="alarm">进场人数:{{ item.inTotalNum }}</span>
|
|
<span class="alarm">出场人数:{{ item.outTotalNum }}</span>
|
|
</div>
|
|
</template>
|
|
<template v-else>
|
|
<div
|
|
class="list-item"
|
|
:class="
|
|
item.devonline !== undefined ? (item.devonline == 0 ? 'offline' : 'online') : item.devOnline == 2 ? 'offline' : 'online'
|
|
"
|
|
v-for="(item, index) in list"
|
|
:key="index"
|
|
>
|
|
<span class="type">
|
|
{{ item.devonline !== undefined ? (item.devonline == 0 ? '在线' : '离线') : item.devOnline == 2 ? '离线' : '在线' }}
|
|
</span>
|
|
<p>{{ item.devName || item.deviceName }}</p>
|
|
<span class="alarm">今日报警:{{ item.alarmNum || 0 }}</span>
|
|
</div>
|
|
</template>
|
|
</vue-scroll>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
data: {
|
|
type: Object,
|
|
required: true,
|
|
default: () => {
|
|
return {
|
|
title: '',
|
|
countNum: 0,
|
|
countLabel: '',
|
|
countImg: '',
|
|
todayNum: 0,
|
|
todayLabel: '',
|
|
todayImg: ''
|
|
}
|
|
}
|
|
},
|
|
list: {
|
|
type: Array,
|
|
required: true,
|
|
default: () => []
|
|
},
|
|
type: {
|
|
type: String,
|
|
default: ''
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.card {
|
|
position: relative;
|
|
margin-bottom: 25px;
|
|
width: 100%;
|
|
height: calc(33.33% - 25px);
|
|
background-image: url(/img/blockBG.8e204bca.png);
|
|
background-position: bottom center;
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
z-index: 1;
|
|
.card-title {
|
|
position: relative;
|
|
top: -10px;
|
|
font-size: 17px;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
color: #6ce9f0;
|
|
}
|
|
.card-content {
|
|
position: relative;
|
|
padding: 10px 20px;
|
|
height: calc(100% - 20px - 24px);
|
|
z-index: 2;
|
|
.counts {
|
|
padding: 0 10px;
|
|
display: flex;
|
|
.count {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
img {
|
|
margin-right: 6px;
|
|
width: 52px;
|
|
height: 52px;
|
|
}
|
|
}
|
|
}
|
|
.list {
|
|
box-sizing: border-box;
|
|
margin-top: 10px;
|
|
width: 100%;
|
|
height: calc(100% - 52px);
|
|
overflow: hidden;
|
|
.list-item {
|
|
margin-top: 8px;
|
|
width: 100%;
|
|
height: 37px;
|
|
line-height: 37px;
|
|
background-color: #121a21;
|
|
display: flex;
|
|
&.online {
|
|
background-color: #0a2124;
|
|
.type {
|
|
background-color: #298372;
|
|
}
|
|
}
|
|
.type {
|
|
display: inline-block;
|
|
width: 50px;
|
|
border-radius: 10px;
|
|
text-align: center;
|
|
height: 18px;
|
|
line-height: 18px;
|
|
margin-top: 10px;
|
|
margin-left: 10px;
|
|
font-size: 15px;
|
|
background-color: #949494;
|
|
}
|
|
p {
|
|
flex: 1;
|
|
padding: 0 10px;
|
|
height: 37px;
|
|
line-height: 37px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.alarm {
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.blue {
|
|
color: #5181f6;
|
|
}
|
|
.orange {
|
|
color: #f67f51;
|
|
}
|
|
}
|
|
</style>
|