<template>
|
<div class="face-container">
|
<wrapper-title :title="'人脸设备数据'" :path="'/monitorServe/face'"></wrapper-title>
|
|
<div class="face-content">
|
<div class="data-plane">
|
<dv-border-box-13 class="plane">
|
<div class="data-item">
|
<div class="data-icon">
|
<img src="@/assets/images/screen/icon/icon1.png" alt="" class="width-img">
|
</div>
|
<div class="data-info">
|
<div class="data-lable">设备总数</div>
|
<div class="data-num type1" v-roll>{{ 1123 }}</div>
|
</div>
|
</div>
|
</dv-border-box-13>
|
|
<dv-border-box-13 class="plane">
|
<div class="data-item">
|
<div class="data-icon">
|
<img src="@/assets/images/screen/icon/icon2.png" alt="" class="width-img">
|
</div>
|
<div class="data-info">
|
<div class="data-lable">设备正常数</div>
|
<div class="data-num type2" v-roll>{{ 2000 }}</div>
|
</div>
|
</div>
|
</dv-border-box-13>
|
|
<dv-border-box-13 class="plane">
|
<div class="data-item">
|
<div class="data-icon">
|
<img src="@/assets/images/screen/icon/icon2.png" alt="" class="width-img">
|
</div>
|
<div class="data-info">
|
<div class="data-lable">设备异常数</div>
|
<div class="data-num type3" v-roll>{{ 1000 }}</div>
|
</div>
|
</div>
|
</dv-border-box-13>
|
</div>
|
</div>
|
</div>
|
|
</template>
|
|
<script>
|
import WrapperTitle from '../wrapper-title/index';
|
export default {
|
name: 'ScreenFace',
|
components: {
|
WrapperTitle
|
},
|
data() {
|
return {
|
dataList: {
|
state: { '01:00': 1000, '02:00': 2131, '03:00': 1233, '04:00': 2132, '05:00': 3211, '06:00': 213, '07:00': 123, '08:00': 566 },
|
state2: { '01:00': 900, '02:00': 1131, '03:00': 1533, '04:00': 2132, '05:00': 3011, '06:00': 13, '07:00': 113, '08:00': 566 },
|
},
|
}
|
},
|
|
methods: {
|
},
|
|
mounted() {
|
|
},
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.face-container {
|
width: 100%;
|
height: fit-content;
|
display: flex;
|
flex-direction: column;
|
}
|
|
.face-content {
|
flex: 1;
|
background: rgba(67, 102, 155, 0.3);
|
border: 1px solid rgba(47, 91, 157, 0.8);
|
|
.plane {
|
margin-bottom: 10px;
|
}
|
|
.data-plane {
|
.data-item {
|
width: 100%;
|
padding: 10px 20px;
|
display: flex;
|
align-items: center;
|
|
.data-icon {
|
width: 40px;
|
margin: 0 20px;
|
}
|
|
.data-info {
|
flex: 1;
|
color: #5b83bd;
|
font-size: 16px;
|
|
.data-num {
|
margin-top: 5px;
|
font-size: 24px;
|
color: #fff;
|
}
|
|
.type1 {
|
color: #287cfa;
|
}
|
.type2 {
|
color: #0cd81d;
|
}
|
.type3 {
|
color: #e20c0c
|
}
|
}
|
}
|
}
|
|
#faceChart {
|
width: 100%;
|
height: 300px;
|
}
|
}
|
|
.width-img {
|
width: 100%;
|
}
|
</style>
|
