159 lines
3.5 KiB
Vue
159 lines
3.5 KiB
Vue
<template>
|
|
<div class="rbottom-container">
|
|
<div class="title">{{ tLang('device', '检测结果占比') }}</div>
|
|
<div class="content">
|
|
<div class="chart">
|
|
<v-chart autoresize :option="options" theme="dark" style="width: 100%;height: 100%;" />
|
|
</div>
|
|
<div class="rate-info">
|
|
<div class="ok flex-column">
|
|
<span>OK</span>
|
|
<span class="rate">{{ rate.okRate+'%('+props.data.ok + '/'+rate.total+')' }} </span>
|
|
</div>
|
|
<div class="ng flex-column">
|
|
<span>NG</span>
|
|
<span class="rate">{{ rate.ngRate+'%('+props.data.ng + '/'+rate.total+')' }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { reactive } from 'vue'
|
|
|
|
|
|
|
|
const props = defineProps({
|
|
data: {
|
|
type: Object,
|
|
default: () => {
|
|
return {
|
|
ok: 0,
|
|
ng: 0
|
|
}
|
|
}
|
|
}
|
|
})
|
|
const {proxy} = getCurrentInstance()
|
|
let rate = reactive({
|
|
okRate: 0,
|
|
ngRate: 0,
|
|
total: 0
|
|
})
|
|
let options = computed(() => {
|
|
let total = props.data.ok + props.data.ng
|
|
rate.okRate = ((props.data.ok / total) * 100).toFixed(1)
|
|
rate.ngRate = 100 - rate.okRate
|
|
rate.total = total
|
|
return {
|
|
tooltip: {
|
|
trigger: 'item'
|
|
},
|
|
// legend: {
|
|
// top: '5%',
|
|
// left: 'center'
|
|
// },
|
|
backgroundColor: 'transparent',
|
|
series: [
|
|
{
|
|
name: '',
|
|
type: 'pie',
|
|
radius: ['40%', '70%'],
|
|
avoidLabelOverlap: false,
|
|
padAngle: 5,
|
|
itemStyle: {
|
|
borderRadius: 10
|
|
},
|
|
label: {
|
|
show: false,
|
|
position: 'center'
|
|
},
|
|
// emphasis: {
|
|
// label: {
|
|
// show: true,
|
|
// fontSize: 40,
|
|
// fontWeight: 'bold'
|
|
// }
|
|
// },
|
|
labelLine: {
|
|
show: false
|
|
},
|
|
data: [
|
|
{ value: props.data.ok, name: 'OK',itemStyle: {color: '#38D380'} },
|
|
{ value: props.data.ng, name: 'NG',itemStyle: {color: '#F05A5A'} },
|
|
]
|
|
}
|
|
]
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.title {
|
|
width: 100%;
|
|
height: 20px;
|
|
line-height: 20px;
|
|
font-size: 12px;
|
|
color: #cfcfcf;
|
|
|
|
}
|
|
|
|
.content {
|
|
width: 100%;
|
|
height: calc(100% - 20px);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.rbottom-container {
|
|
width: 100%;
|
|
height: 100%;
|
|
.content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
.chart {
|
|
width: 100%;
|
|
height: 70%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.rate-info {
|
|
width: 100%;
|
|
height: 30%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
.ok {
|
|
width: 40%;
|
|
height: 80%;
|
|
background: #173027;
|
|
margin: 0 10px;
|
|
color: #38D380;
|
|
}
|
|
.ng {
|
|
width: 40%;
|
|
height: 80%;
|
|
background: #372022;
|
|
margin: 0 10px;
|
|
color: #F05A5A;
|
|
}
|
|
.flex-column {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
color: 12px;
|
|
.rate {
|
|
color: #cfcfcf;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|