134 lines
3.0 KiB
Vue
134 lines
3.0 KiB
Vue
<template>
|
|
<Card title="质量巡检">
|
|
<div class="container">
|
|
<div class="dllm">
|
|
<div class="chart">
|
|
<JRingChart
|
|
:title="{ text: '质量验收', subTitle: '987条件' }"
|
|
:color="['#6EE4F0', '#E7622A']"
|
|
:data="[{ value: 2314 }, { value: 987 }]"
|
|
:radius="['60%', '85%']"
|
|
/>
|
|
</div>
|
|
<div class="legend">
|
|
<div class="row">
|
|
<span>已处理</span>
|
|
<span>占比</span>
|
|
</div>
|
|
<div class="row">
|
|
<span>123456</span>
|
|
<span>20%</span>
|
|
</div>
|
|
</div>
|
|
<div class="legend">
|
|
<div class="row">
|
|
<span>未处理</span>
|
|
<span>占比</span>
|
|
</div>
|
|
<div class="row">
|
|
<span>123456</span>
|
|
<span>20%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="dllm">
|
|
<div class="chart">
|
|
<JRingChart
|
|
:title="{ text: '质量整改', subTitle: '987条件' }"
|
|
:color="['#6EE4F0', '#E7622A']"
|
|
:data="[{ value: 2314 }, { value: 987 }]"
|
|
:radius="['55%', '80%']"
|
|
/>
|
|
</div>
|
|
<div class="legend">
|
|
<div class="row">
|
|
<span>已巡检</span>
|
|
<span>占比</span>
|
|
</div>
|
|
<div class="row">
|
|
<span>123456</span>
|
|
<span>20%</span>
|
|
</div>
|
|
</div>
|
|
<div class="legend">
|
|
<div class="row">
|
|
<span>未巡检</span>
|
|
<span>占比</span>
|
|
</div>
|
|
<div class="row">
|
|
<span>123456</span>
|
|
<span>20%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</template>
|
|
|
|
<script>
|
|
import Card from '../components/Card.vue'
|
|
import JRingChart from '../../common/jChart/pie/JRingChart.vue'
|
|
export default {
|
|
components: { Card, JRingChart }
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.container {
|
|
height: 100%;
|
|
display: flex;
|
|
color: #fff;
|
|
.dllm {
|
|
flex: 1;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
.chart {
|
|
width: 100%;
|
|
height: calc(100% - 92px);
|
|
}
|
|
.legend {
|
|
position: relative;
|
|
width: 100px;
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 4px;
|
|
left: -4px;
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 50%;
|
|
}
|
|
&:nth-child(2)::before {
|
|
background-color: #6ee4ef;
|
|
}
|
|
&:nth-child(3)::before {
|
|
background-color: #e7622a;
|
|
}
|
|
.row {
|
|
display: flex;
|
|
span {
|
|
text-align: center;
|
|
&:first-child {
|
|
width: 60%;
|
|
}
|
|
&:last-child {
|
|
width: 40%;
|
|
}
|
|
}
|
|
&:first-child {
|
|
font-size: 14px;
|
|
}
|
|
&:last-child {
|
|
height: 30px;
|
|
line-height: 30px;
|
|
font-size: 12px;
|
|
color: #6ae3eb;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|