<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: "CarChart",
|
components: {
|
ExamineHola,
|
},
|
props: {
|
carList: {
|
type: Object,
|
default: null
|
},
|
},
|
data() {
|
return {
|
dataList: [],
|
};
|
},
|
|
methods: {},
|
mounted() { },
|
watch: {
|
carList() {
|
// "viewConnectStability": 95.26, //视图库对接稳定性
|
// "siteOnline": 95.26, //点位在线率
|
// "deviceDirectoryConsistent": 95.26, //联网卡口目录一致率
|
// "vehicleInformationCollectionAccuracy": 95.26, //信息采集准确率
|
// "vehicleCaptureIntegrity": 95.26, //抓拍数据完整性
|
// "vehicleCaptureAccuracy": 95.26, //抓拍数据准确性
|
// "vehicleTimingAccuracy": 95.26, //时钟准确性
|
// "vehicleUploadTimeliness": 95.26, //抓拍数据上传及时性
|
// "vehicleUrlAvailability": 95.26, //url可用性
|
// "vehiclePictureAvailability": 95.26 //抓拍数据大图可用性
|
this.dataList = [];
|
|
let item = { value: 0, name: "", id: 0, routerUrl: "" }
|
item.value = this.carList.viewConnectStability
|
item.name = "视图库对接稳定性"
|
item.id = 1
|
item.routerUrl = ""
|
this.dataList.push(item)
|
|
let item1 = { value: 0, name: "", id: 0, routerUrl: "" }
|
item1.value = this.carList.siteOnline
|
item1.name = "点位在线率"
|
item1.id = 2
|
item1.routerUrl = ""
|
this.dataList.push(item1)
|
|
let item2 = { value: 0, name: "", id: 0, routerUrl: "" }
|
item2.value = this.carList.deviceDirectoryConsistent
|
item2.name = "联网卡口目录一致率"
|
item2.id = 3
|
item2.routerUrl = ""
|
this.dataList.push(item2)
|
|
let item3 = { value: 0, name: "", id: 0, routerUrl: "" }
|
item3.value = this.carList.vehicleInformationCollectionAccuracy
|
item3.name = "信息采集准确率"
|
item3.id = 4
|
item3.routerUrl = ""
|
this.dataList.push(item3)
|
|
let item4 = { value: 0, name: "", id: 0, routerUrl: "" }
|
item4.value = this.carList.vehicleCaptureIntegrity
|
item4.name = "抓拍数据完整性"
|
item4.id = 5
|
item4.routerUrl = ""
|
this.dataList.push(item4)
|
|
let item5 = { value: 0, name: "", id: 0, routerUrl: "" }
|
item5.value = this.carList.vehicleCaptureAccuracy
|
item5.name = "抓拍数据准确性"
|
item5.id = 6
|
item5.routerUrl = ""
|
this.dataList.push(item5)
|
|
let item6 = { value: 0, name: "", id: 0, routerUrl: "" }
|
item6.value = this.carList.vehicleTimingAccuracy
|
item6.name = "时钟准确性"
|
item6.id = 7
|
item6.routerUrl = ""
|
this.dataList.push(item6)
|
|
let item7 = { value: 0, name: "", id: 0, routerUrl: "" }
|
item7.value = this.carList.vehicleUploadTimeliness
|
item7.name = "抓拍数据上传及时性"
|
item7.id = 8
|
item7.routerUrl = ""
|
this.dataList.push(item7)
|
|
let item8 = { value: 0, name: "", id: 0, routerUrl: "" }
|
item8.value = this.carList.vehicleUrlAvailability
|
item8.name = "url可用性"
|
item8.id = 9
|
item8.routerUrl = ""
|
this.dataList.push(item8)
|
|
let item9 = { value: 0, name: "", id: 0, routerUrl: "" }
|
item9.value = this.carList.vehiclePictureAvailability
|
item9.name = "抓拍数据大图可用性"
|
item9.id = 10
|
item9.routerUrl = ""
|
this.dataList.push(item9)
|
|
},
|
}
|
};
|
</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>
|
