99 lines
2.4 KiB
Vue
99 lines
2.4 KiB
Vue
<template>
|
|
<Card :title="title">
|
|
<div class="rates">
|
|
<div class="rate">
|
|
<div class="chart">
|
|
<JRingChart :title="{ text: '66%', y: '40%' }" :data="[{ value: 66 }, { 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: '92%', y: '40%' }" :data="[{ value: 92 }, { value: 11 }]" :color="['#FF6C7F', '#39273D']" />
|
|
</div>
|
|
<div class="label">项目及时复查率</div>
|
|
</div>
|
|
</div>
|
|
<!-- <div class="info">
|
|
<vue-scroll v-if="activityList.length > 0 ">
|
|
<div class="info-item" v-for="(item, index) in activityList" :key="index">
|
|
{{ `${item.rectifyPeopleAme}有一条${status[item.state]}的问题` }}
|
|
</div>
|
|
</vue-scroll>
|
|
<div class="nodata" v-else>
|
|
<img src="@/assets/images/noData3.png" alt srcset />
|
|
<p>暂无数据</p>
|
|
</div>
|
|
</div> -->
|
|
</Card>
|
|
</template>
|
|
|
|
<script>
|
|
import Card from '../components/Card.vue'
|
|
import JRingChart from '../jChart/pie/JRingChart.vue'
|
|
import { selectRectifiedSecurityManageList2Api } from '@/assets/js/api/dataBoard'
|
|
export default {
|
|
components: { Card, JRingChart },
|
|
props: {
|
|
title: {
|
|
type: String,
|
|
default: ''
|
|
}
|
|
},
|
|
mounted() {
|
|
selectRectifiedSecurityManageList2Api({ projectSn: this.$store.state.projectSn }).then(res => {
|
|
console.log('------',res)
|
|
this.activityList = res.result || []
|
|
})
|
|
},
|
|
data() {
|
|
return {
|
|
activityList: [],
|
|
status: {
|
|
1: '待整改',
|
|
2: '待审核',
|
|
3: '闭合',
|
|
4: '无需整改'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.rates {
|
|
height: 100%;
|
|
display: flex;
|
|
.rate {
|
|
width: 33%;
|
|
height: 70%;
|
|
.chart {
|
|
height: 100%;
|
|
}
|
|
.label {
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
.info {
|
|
height: 100%;
|
|
.info-item {
|
|
color: #808c9a;
|
|
padding: 10px 0;
|
|
padding-left: 20px;
|
|
}
|
|
.nodata{
|
|
text-align: center;
|
|
padding-top: 10%;
|
|
box-sizing: border-box
|
|
}
|
|
}
|
|
</style>
|