<template>
<div class="hone-content-box">
<a-row :gutter="24">
<a-col :sm="24" :md="12" :xl="4" :style="{ marginBottom: '24px' }">
<div class="statistics">
<div class="icon" style="background-color:#1890ff;"><a-icon type="team" /></div>
<div>
<p style="color:#666;margin-bottom:5px;">总人口</p>
<p style="margin-bottom:0;color:#333;font-size:28px;line-height:1;">{{pageForm.ownerTotalNum}}</p>
</div>
</div>
</a-col>
<a-col :sm="24" :md="12" :xl="4" :style="{ marginBottom: '24px' }">
<div class="statistics">
<div class="icon" style="background-color:#7262fd;"><a-icon type="home" /></div>
<div>
<p style="color:#666;margin-bottom:5px;">业主</p>
<p style="margin-bottom:0;color:#333;font-size:28px;line-height:1;">{{pageForm.ownerNum}}</p>
</div>
</div>
</a-col>
<a-col :sm="24" :md="12" :xl="4" :style="{ marginBottom: '24px' }">
<div class="statistics">
<div class="icon" style="background-color:#ffaa00;"><a-icon type="user" /></div>
<div>
<p style="color:#666;margin-bottom:5px;">租客</p>
<p style="margin-bottom:0;color:#333;font-size:28px;line-height:1;">{{pageForm.tenantNum}}</p>
</div>
</div>
</a-col>
<a-col :sm="24" :md="12" :xl="4" :style="{ marginBottom: '24px' }">
<div class="statistics">
<div class="icon" style="background-color:#52c41a;"><a-icon type="bank" /></div>
<div>
<p style="color:#666;margin-bottom:5px;">房屋数量</p>
<p style="margin-bottom:0;color:#333;font-size:28px;line-height:1;">{{pageForm.roomNum}}</p>
</div>
</div>
</a-col>
<a-col :sm="24" :md="12" :xl="4" :style="{ marginBottom: '24px' }">
<div class="statistics">
<div class="icon" style="background-color:#36cfc9;"><a-icon type="appstore" /></div>
<div>
<p style="color:#666;margin-bottom:5px;">单元数量</p>
<p style="margin-bottom:0;color:#333;font-size:28px;line-height:1;">{{pageForm.unitNum}}</p>
</div>
</div>
</a-col>
<a-col :sm="24" :md="12" :xl="4" :style="{ marginBottom: '24px' }">
<div class="statistics">
<div class="icon" style="background-color:#ff7875;"><a-icon type="database" /></div>
<div>
<p style="color:#666;margin-bottom:5px;">楼栋数量</p>
<p style="margin-bottom:0;color:#333;font-size:28px;line-height:1;">{{pageForm.buildingNum}}</p>
</div>
</div>
</a-col>
</a-row>
<a-row :gutter="24">
<a-col :sm="24" :md="12" :xl="12" :style="{ marginBottom: '24px' }">
<div class="pay-cost t-box">
<pie :dataSource="repairData" />
</div>
</a-col>
<a-col :sm="24" :md="12" :xl="12" :style="{ marginBottom: '24px' }">
<div class="pay-cost t-box">
<pie :dataSource="complaintsData" />
</div>
</a-col>
</a-row>
<a-row :gutter="24">
<a-col :sm="24" :md="24" :xl="24" :style="{ marginBottom: '24px' }">
<div class="salesCard t-box">
<!-- <h3 class="box-title">缴费统计</h3> -->
<div class="extra-type">
<a-radio-group @change="handleSizeChange" :value="typeCode">
<a-radio-button value="1">已缴纳总金额</a-radio-button>
<a-radio-button value="2">未缴纳总金额</a-radio-button>
<a-radio-button value="3">已缴纳业主</a-radio-button>
<a-radio-button value="4">未缴纳业主</a-radio-button>
</a-radio-group>
</div>
<div>
<bar :dataSource="barData" :yaxisText="yaxisText" style="padding: 0;" />
</div>
</div>
</a-col>
</a-row>
</div>
</template>
<script>
import Bar from '@/components/chart/Bar'
import Pie from '@/components/chart/Pie'
import { propertyFeeStatistics, companyNoticeList } from '@/api/api'
// const barData = []
// for (let i = 0; i < 12; i += 1) {
// barData.push({
// x: `${i + 1}月`,
// y: 1000,
// })
// }
export default {
name: 'Analysis',
components: {
Bar,
Pie,
},
data() {
return {
pageForm: {},
loading: true,
noticeList: [],
typeCode: '2',
repairData: [],
complaintsData: [],
barData: [],
visible: false,
}
},
created() {
this.onDetail('2')
},
computed: {
yaxisText() {
switch(this.typeCode) {
case '1':
return '已缴纳总金额'
break;
case '2':
return '未缴纳总金额'
break;
case '3':
return '已缴纳业主'
break;
case '4':
return '未缴纳业主'
break;
default:
return ''
}
}
},
methods: {
async onDetail(typeCode) {
console.log(typeCode)
let { result } = await propertyFeeStatistics({ beginDate: '',endDate:'' })
this.pageForm = { ...result }
this.barData = result.monthlyStatistics.map((item) => {
var num = '';
if(typeCode == '1'){
num = item.paidTotal
}else if(typeCode == '2'){
num = item.unPaidTotal
}else if(typeCode == '3'){
num = item.paidOwnerNum
}else if(typeCode == '4'){
num = item.unPaidOwnerNum
}
return {
x: item.monthNum + '月',
y: num,
min: 700
}
})
this.repairData = [
{ item: '未缴总金额', count: result.unPaidTotal || 0 },
{ item: '已缴总金额', count: result.paidTotal || 0 },
]
this.complaintsData = [
{ item: '未缴纳业主', count: result.unPaidOwnerNum || 0 },
{ item: '已缴纳业主', count: result.paidOwnerNum || 0 },
]
this.loading = !this.loading
},
handleSizeChange(e) {
let that = this
this.typeCode = e.target.value
that.onDetail(this.typeCode)
},
},
}
</script>
<style lang="less" scoped>
.hone-content-box {
padding: 10px;
.statistics {
// flex: none;
background: #fff;
width: 100%;
height: 90px;
box-sizing: border-box;
border: 1px solid #e0dfdf;
display: flex;
align-items: center;
padding-left: 20px;
.icon {
width: 50px;
height: 50px;
border-radius: 50px;
margin-right: 12px;
display: flex;
text-align: center;
align-items: center;
justify-content: center;
.anticon {
font-size: 26px;
color: #ffffff;
}
}
}
.pay-box {
display: flex;
.left-box {
flex: none;
width: 50%;
}
}
}
.t-box {
background: #fff;
padding: 15px;
border: 1px solid #e0dfdf;
}
.box-title {
font-weight: bold;
margin-bottom: 15px;
display: inline-block;
padding-left: 10px;
border-left: 3px solid #1890ff;
height: 20px;
line-height: 20px;
}
.pay-cost {
height: 260px;
padding: 30px 0;
}
.salesCard {
height: 380px;
padding-top: 50px;
}
.extra-type {
text-align: center;
a {
margin-right: 20px;
}
}
.number {
width: 80%;
margin: 0 10%;
display: flex;
justify-content: space-evenly;
p {
font-size: 14px;
margin: 0;
}
}
</style>