<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 //重点指挥图像在线率
|
this.dataList = [];
|
|
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.ministrySiteOnline
|
item6.name = "部级点位在线率"
|
item6.id = 7
|
item6.routerUrl = ""
|
this.dataList.push(item6)
|
|
let item7 = { value: 0, name: "", id: 0, routerUrl: "" }
|
item7.value = this.videoList.ministryVideoAvailable
|
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.keyCommandImageOnline
|
item12.name = "重点指挥图像在线率"
|
item12.id = 13
|
item12.routerUrl = ""
|
this.dataList.push(item12)
|
|
let item13 = { value: 0, name: "", id: 0, routerUrl: "" }
|
item13.value = this.videoList.imageResourceSecurity
|
item13.name = "图像资源安全管理"
|
item13.id = 14
|
item13.routerUrl = ""
|
this.dataList.push(item13)
|
},
|
}
|
};
|
</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>
|
