<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: "VideoChart",
|
components: {
|
ExamineHola,
|
},
|
props: {
|
videoList: {
|
type: Object,
|
default: null
|
},
|
},
|
data() {
|
return {
|
dataList: [],
|
};
|
},
|
|
methods: {},
|
mounted() { },
|
watch: {
|
videoList() {
|
// "platformOnline": 96.97, //平台在线率
|
// "monitorQualification": 96.91, //一机一档合格率
|
// "monitorRegistration": 96.44, //一机一档注册率
|
// "archivesRate": 96.4, //档案考核比
|
// "siteOnline": 96.4, //点位在线率
|
// "videoAvailable": 96.52, //录象可用率
|
// "annotationAccuracy": 97.15, //标注正确率
|
// "timingAccuracy": 97.15, //校时准确率
|
// "keySiteOnline": 97.15, //重点点位在线率
|
// "keyVideoAvailable": 97.15, //重点点位录象可用率
|
// "keyAnnotationAccuracy": 97.15, //重点点位标注正确率
|
// "keyTimingAccuracy": 97.15, //重点点位按时正确率
|
// "keyCommandImageInspection": 97.15, //重点指挥图像公安部巡检结果
|
// "keyCommandImageDirectoryTree": 96.07, //重点指挥图像目录树
|
// "onlineInspectionPlatform": 96.07, //在线检查平台部署及运行率
|
// "videoTransmissionAssetsAccuracy": 96.07, //传输网资产准确率
|
// "videoTransmissionAssetsWeakPasswordScore": 96.07, //传输网资产弱口令得分比率
|
// "videoTransmissionDangerousAssetsScore": 96.07, //传输网危险资产得分比重
|
// "videoTransmissionBoundaryIntegrityDetection": 96.07, //传输网边界完整性检测扣分项
|
// "keyCommandImageOnline": 96.41, //月运行率
|
// "operatingRate": 96.07 //重点指挥图像在线率
|
let item = { value: 0, name: "", id: 0, routerUrl: "" }
|
item.value = this.videoList.platformOnline
|
item.name = "平台在线率"
|
item.id = 1
|
item.routerUrl = ""
|
this.dataList.push(item)
|
|
let item1 = { value: 0, name: "", id: 0, routerUrl: "" }
|
item1.value = this.videoList.monitorQualification
|
item1.name = "一机一档合格率"
|
item1.id = 2
|
item1.routerUrl = ""
|
this.dataList.push(item1)
|
|
let item2 = { value: 0, name: "", id: 0, routerUrl: "" }
|
item2.value = this.videoList.monitorRegistration
|
item2.name = "一机一档注册率"
|
item2.id = 3
|
item2.routerUrl = ""
|
this.dataList.push(item2)
|
|
let item3 = { value: 0, name: "", id: 0, routerUrl: "" }
|
item3.value = this.videoList.archivesRate
|
item3.name = "档案考核比"
|
item3.id = 4
|
item3.routerUrl = ""
|
this.dataList.push(item3)
|
|
let item4 = { value: 0, name: "", id: 0, routerUrl: "" }
|
item4.value = this.videoList.siteOnline
|
item4.name = "点位在线率"
|
item4.id = 5
|
item4.routerUrl = ""
|
this.dataList.push(item4)
|
|
let item5 = { value: 0, name: "", id: 0, routerUrl: "" }
|
item5.value = this.videoList.videoAvailable
|
item5.name = "录象可用率"
|
item5.id = 6
|
item5.routerUrl = ""
|
this.dataList.push(item5)
|
|
let item6 = { value: 0, name: "", id: 0, routerUrl: "" }
|
item6.value = this.videoList.annotationAccuracy
|
item6.name = "标注正确率"
|
item6.id = 7
|
item6.routerUrl = ""
|
this.dataList.push(item6)
|
|
let item7 = { value: 0, name: "", id: 0, routerUrl: "" }
|
item7.value = this.videoList.timingAccuracy
|
item7.name = "校时准确率"
|
item7.id = 8
|
item7.routerUrl = ""
|
this.dataList.push(item7)
|
|
let item8 = { value: 0, name: "", id: 0, routerUrl: "" }
|
item8.value = this.videoList.keySiteOnline
|
item8.name = "重点点位在线率"
|
item8.id = 9
|
item8.routerUrl = ""
|
this.dataList.push(item8)
|
|
let item9 = { value: 0, name: "", id: 0, routerUrl: "" }
|
item9.value = this.videoList.keyVideoAvailable
|
item9.name = "重点点位录象可用率"
|
item9.id = 10
|
item9.routerUrl = ""
|
this.dataList.push(item9)
|
|
let item10 = { value: 0, name: "", id: 0, routerUrl: "" }
|
item10.value = this.videoList.keyAnnotationAccuracy
|
item10.name = "重点点位标注正确率"
|
item10.id = 11
|
item10.routerUrl = ""
|
this.dataList.push(item10)
|
|
let item11 = { value: 0, name: "", id: 0, routerUrl: "" }
|
item11.value = this.videoList.keyTimingAccuracy
|
item11.name = "重点点位按时正确率"
|
item11.id = 12
|
item11.routerUrl = ""
|
this.dataList.push(item11)
|
|
let item12 = { value: 0, name: "", id: 0, routerUrl: "" }
|
item12.value = this.videoList.keyCommandImageInspection
|
item12.name = "重点指挥图像巡检结果"
|
item12.id = 13
|
item12.routerUrl = ""
|
this.dataList.push(item12)
|
|
let item13 = { value: 0, name: "", id: 0, routerUrl: "" }
|
item13.value = this.videoList.keyCommandImageDirectoryTree
|
item13.name = "重点指挥图像目录树"
|
item13.id = 14
|
item13.routerUrl = ""
|
this.dataList.push(item13)
|
|
let item14 = { value: 0, name: "", id: 0, routerUrl: "" }
|
item14.value = this.videoList.onlineInspectionPlatform
|
item14.name = "平台部署及运行率"
|
item14.id = 15
|
item14.routerUrl = ""
|
this.dataList.push(item14)
|
|
let item15 = { value: 0, name: "", id: 0, routerUrl: "" }
|
item15.value = this.videoList.videoTransmissionAssetsAccuracy
|
item15.name = "资产准确率"
|
item15.id = 16
|
item15.routerUrl = ""
|
this.dataList.push(item15)
|
|
let item16 = { value: 0, name: "", id: 0, routerUrl: "" }
|
item16.value = this.videoList.videoTransmissionAssetsWeakPasswordScore
|
item16.name = "资产弱口令得分比率"
|
item16.id = 17
|
item16.routerUrl = ""
|
this.dataList.push(item16)
|
|
let item17 = { value: 0, name: "", id: 0, routerUrl: "" }
|
item17.value = this.videoList.videoTransmissionDangerousAssetsScore
|
item17.name = "危险资产得分比重"
|
item17.id = 18
|
item17.routerUrl = ""
|
this.dataList.push(item17)
|
|
let item18 = { value: 0, name: "", id: 0, routerUrl: "" }
|
item18.value = this.videoList.videoTransmissionBoundaryIntegrityDetection
|
item18.name = "边界完整性检测扣分项"
|
item18.id = 19
|
item18.routerUrl = ""
|
this.dataList.push(item18)
|
|
let item19 = { value: 0, name: "", id: 0, routerUrl: "" }
|
item19.value = this.videoList.keyCommandImageOnline
|
item19.name = "月运行率"
|
item19.id = 20
|
item19.routerUrl = ""
|
this.dataList.push(item19)
|
|
let item20 = { value: 0, name: "", id: 0, routerUrl: "" }
|
item20.value = this.videoList.operatingRate
|
item20.name = "重点指挥图像在线率"
|
item20.id = 21
|
item20.routerUrl = ""
|
this.dataList.push(item20)
|
|
|
},
|
}
|
};
|
</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>
|
