139 lines
3.0 KiB
Vue
139 lines
3.0 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">{{ 50 }}%</span>
|
||
|
|
</div>
|
||
|
|
<div class="ng flex-column">
|
||
|
|
<span>NG</span>
|
||
|
|
<span class="rate">{{ 50 }}%</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
|
||
|
|
|
||
|
|
const props = defineProps({
|
||
|
|
})
|
||
|
|
const {proxy} = getCurrentInstance()
|
||
|
|
let options = computed(() => {
|
||
|
|
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: 1048, name: 'OK',itemStyle: {color: '#38D380'} },
|
||
|
|
{ value: 735, 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>
|