110 lines
2.1 KiB
Vue
110 lines
2.1 KiB
Vue
<template>
|
|
<!-- 进度总览 -->
|
|
<div class="containerBox">
|
|
<div class="titleTxt">{{ title }}</div>
|
|
<div class="content">
|
|
<div class="num">
|
|
679
|
|
<p>完成任务数</p>
|
|
</div>
|
|
<div class="num">
|
|
67%
|
|
<p>完成率</p>
|
|
</div>
|
|
<div class="num">
|
|
45
|
|
<p>延期天数</p>
|
|
</div>
|
|
</div>
|
|
<div class="charts">
|
|
<div class="chart">
|
|
<JRingChart :title="{ text: '89%', subTitle: '总进度' }" :color="['#547ced','#162a51']"
|
|
:data="[
|
|
{ value: 7, name: '' },
|
|
{ value: 3, name: '' }
|
|
]"/>
|
|
</div>
|
|
<div class="chart">
|
|
<JRingChart :title="{ text: '89%', subTitle: '总进度' }" :color="['#5be1f5','#193f54']"
|
|
:data="[
|
|
{ value: 3, name: '' },
|
|
{ value: 5, name: '' }
|
|
]"/>
|
|
</div>
|
|
<div class="chart">
|
|
<JRingChart :title="{ text: '89%', subTitle: '总进度' }" :color="['#fe6b7e','#39273d']"
|
|
:data="[
|
|
{ value: 4, name: '' },
|
|
{ value: 6, 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>
|
|
.containerBox {
|
|
width: 100%;
|
|
height: 100%;
|
|
border: 1px solid #0081c3;
|
|
|
|
.titleTxt {
|
|
font-size: 18px;
|
|
color: #6ee4f0;
|
|
margin-top: 5px;
|
|
margin-left: 5px;
|
|
}
|
|
.content{
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-top:20px;
|
|
margin-left: 30px;
|
|
}
|
|
.num{
|
|
width: 88px;
|
|
line-height: 38px;
|
|
height: 38px;
|
|
text-align: center;
|
|
margin-right: 35px;
|
|
color: #47b1c4;
|
|
background-image: url(~@/assets/images/projectImg/numBgc.png);
|
|
p{
|
|
color: #d3d5d9;
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
.charts {
|
|
padding: 10px 30px 0;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
.chart {
|
|
width: 200px;
|
|
height: 200px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|