70 lines
1.4 KiB
Vue
70 lines
1.4 KiB
Vue
<template>
|
|
<!-- 质量问题 -->
|
|
<div class="wrap">
|
|
<div class="title">{{ title }}</div>
|
|
<div class="charts">
|
|
<div class="chart">
|
|
<JRingChart title="45" subTitle="问题总数" :color="['#3CABFD']" />
|
|
</div>
|
|
<div class="chart">
|
|
<JRingChart title="45" subTitle="未闭合问题" :color="['#557DEE']" />
|
|
</div>
|
|
<div class="chart">
|
|
<JRingChart title="45" subTitle="未整改问题" :color="['#FE6C7F']" />
|
|
</div>
|
|
<div class="chart">
|
|
<JRingChart
|
|
title="90%"
|
|
subTitle="即时整改问题"
|
|
:color="['#557DEE', '#43D7B5']"
|
|
:data="[
|
|
{ value: 1, name: '' },
|
|
{ value: 9, name: '' }
|
|
]"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import JRingChart from '../jChart/pie/JRingChart.vue'
|
|
export default {
|
|
components: { JRingChart },
|
|
props: {
|
|
title: {
|
|
type: String,
|
|
default: 'default title'
|
|
}
|
|
},
|
|
data() {
|
|
return {}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.wrap {
|
|
width: 100%;
|
|
height: 100%;
|
|
border: 1px solid #0081c3;
|
|
|
|
.title {
|
|
padding-left: 6px;
|
|
height: 30px;
|
|
line-height: 30px;
|
|
font-size: 18px;
|
|
color: #6ee4f0;
|
|
}
|
|
.charts {
|
|
padding: 10px 30px 0;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
.chart {
|
|
width: 200px;
|
|
height: 200px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|