<template>
|
<div class="chart-container">
|
<div class="rank-chart">
|
<div class="hola-item" v-for="item in dataList" :key="item.id">
|
<examine-hola :startColor="'#124ae4'" :endColor="'#99b3fd'" :centerValue="item.value" :bottomTitle="item.name"
|
:routerPath="item.routerUrl"></examine-hola>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import ExamineHola from "./examine-hola.vue";
|
let barChart = null;
|
export default {
|
name: "FaceChart",
|
components: {
|
ExamineHola,
|
},
|
props: {
|
faceList: {
|
type: Object,
|
default: null
|
},
|
},
|
data() {
|
return {
|
dataList: [],
|
};
|
},
|
|
methods: {},
|
mounted() { },
|
watch: {
|
faceList() {
|
// "viewConnectStability": 96.39, //视图库对接稳定性
|
// "siteOnline": 96.39, //点位在线率
|
// "deviceDirectoryConsistent": 96.39, //目录一致率
|
// "faceInformationCollectionAccuracy": 96.39, //信息采集准确率
|
// "facePictureQualification": 96.39, //抓拍图片合格性
|
// "faceTimingAccuracy": 96.39, //抓拍图片时钟准确性
|
// "faceUploadTimeliness": 96.39, //抓拍数据上传及时性
|
// "facePictureAvailability": 96.39 //抓拍数据大图可用性
|
let item = { value: 0, name: "", id: 0, routerUrl: "" }
|
item.value = this.faceList.viewConnectStability
|
item.name = "视图库对接稳定性"
|
item.id = 1
|
item.routerUrl = ""
|
this.dataList.push(item)
|
|
let item1 = { value: 0, name: "", id: 0, routerUrl: "" }
|
item1.value = this.faceList.siteOnline
|
item1.name = "点位在线率"
|
item1.id = 2
|
item1.routerUrl = ""
|
this.dataList.push(item1)
|
|
let item2 = { value: 0, name: "", id: 0, routerUrl: "" }
|
item2.value = this.faceList.deviceDirectoryConsistent
|
item2.name = "目录一致率"
|
item2.id = 3
|
item2.routerUrl = ""
|
this.dataList.push(item2)
|
|
let item3 = { value: 0, name: "", id: 0, routerUrl: "" }
|
item3.value = this.faceList.faceInformationCollectionAccuracy
|
item3.name = "信息采集准确率"
|
item3.id = 4
|
item3.routerUrl = ""
|
this.dataList.push(item3)
|
|
let item4 = { value: 0, name: "", id: 0, routerUrl: "" }
|
item4.value = this.faceList.facePictureQualification
|
item4.name = "抓拍图片合格性"
|
item4.id = 5
|
item4.routerUrl = ""
|
this.dataList.push(item4)
|
|
let item5 = { value: 0, name: "", id: 0, routerUrl: "" }
|
item5.value = this.faceList.faceTimingAccuracy
|
item5.name = "抓拍图片时钟准确性"
|
item5.id = 6
|
item5.routerUrl = ""
|
this.dataList.push(item5)
|
|
let item6 = { value: 0, name: "", id: 0, routerUrl: "" }
|
item6.value = this.faceList.faceUploadTimeliness
|
item6.name = "抓拍数据上传及时性"
|
item6.id = 7
|
item6.routerUrl = ""
|
this.dataList.push(item6)
|
|
let item7 = { value: 0, name: "", id: 0, routerUrl: "" }
|
item7.value = this.faceList.facePictureAvailability
|
item7.name = "抓拍数据大图可用性"
|
item7.id = 8
|
item7.routerUrl = ""
|
this.dataList.push(item7)
|
|
},
|
}
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.chart-container {
|
width: 100%;
|
height: 100%;
|
|
.rank-chart {
|
width: 100%;
|
height: 100%;
|
display: flex;
|
justify-content: space-between;
|
flex-wrap: wrap;
|
align-content: space-between;
|
padding: 20px 0;
|
box-sizing: border-box;
|
|
.hola-item {
|
flex-shrink: 0;
|
width: 150px;
|
height: 120px;
|
}
|
}
|
}
|
</style>
|
