59 lines
1.3 KiB
Vue
59 lines
1.3 KiB
Vue
|
<template>
|
||
|
|
<Card :title="title">
|
||
|
|
<div class="rates">
|
||
|
|
<div class="rate">
|
||
|
|
<div class="chart">
|
||
|
|
<JRingChart :title="{ text: '89%', y: '40%' }" :data="[{ value: 89 }, { value: 11 }]" :color="['#557DEE', '#182B53']" />
|
||
|
|
</div>
|
||
|
|
<div class="label">项目整改率</div>
|
||
|
|
</div>
|
||
|
|
<div class="rate">
|
||
|
|
<div class="chart">
|
||
|
|
<JRingChart :title="{ text: '89%', y: '40%' }" :data="[{ value: 89 }, { value: 11 }]" :color="['#5BE2F6', '#193F54']" />
|
||
|
|
</div>
|
||
|
|
<div class="label">项目及时整改率</div>
|
||
|
|
</div>
|
||
|
|
<div class="rate">
|
||
|
|
<div class="chart">
|
||
|
|
<JRingChart :title="{ text: '89%', y: '40%' }" :data="[{ value: 89 }, { value: 11 }]" :color="['#FF6C7F', '#39273D']" />
|
||
|
|
</div>
|
||
|
|
<div class="label">项目及时复查率</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</Card>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import Card from '../components/Card.vue'
|
||
|
|
import JRingChart from '../jChart/pie/JRingChart.vue'
|
||
|
|
export default {
|
||
|
|
components: { Card, JRingChart },
|
||
|
|
props: {
|
||
|
|
title: {
|
||
|
|
type: String,
|
||
|
|
default: ''
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="less" scoped>
|
||
|
|
.rates {
|
||
|
|
height: 100%;
|
||
|
|
display: flex;
|
||
|
|
.rate {
|
||
|
|
width: 33%;
|
||
|
|
height: 70%;
|
||
|
|
.chart {
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
.label {
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|