<template> <div class="hone-content-box"> <a-row :gutter="24"> <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }"> <div class="statistics"> <div class="icon" style="background-color:#1890ff;"><a-icon type="team" /></div> <!-- <img class="icon" src="~@/assets/guaz.png" alt=""> --> <div> <p style="color:#666;margin-bottom:5px;">小区总数量</p> <p style="margin-bottom:0;color:#333;font-size:28px;line-height:1;">{{pageForm.communityNum}}</p> </div> </div> </a-col> <a-col :sm="24" :md="12" :xl="6" :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.roomNum}}</p> </div> </div> </a-col> <a-col :sm="24" :md="12" :xl="6" :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.ownerNum}}</p> </div> </div> </a-col> <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }"> <div class="statistics"> <div class="icon" style="background-color:#52c41a;"><a-icon type="pay-circle" /></div> <div> <p style="color:#666;margin-bottom:5px;">年度累计已缴物业费</p> <p style="margin-bottom:0;color:#333;font-size:28px;line-height:1;">{{pageForm.propertyYearFee}}</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"> <h3 class="box-title">缴费率</h3> <pie :dataSource="payData" /> </div> </a-col> <a-col :sm="24" :md="12" :xl="12" :style="{ marginBottom: '24px' }"> <div class="announcement t-box"> <div class="title"> <h3 class="box-title">最新公告</h3><a-button size="small" @click="toMore()">查看更多</a-button> <a-button size="small" @click="toMore()">发布公告</a-button> </div> <ul> <li v-for="(item, index) in noticeList" :key="index"><a @click="toDetails(item)">{{ item.noticeTitle}}</a> <p>{{ item.createTime.slice(0,10)}}</p> </li> </ul> </div> </a-col> </a-row> <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="SFLX00001">物业费</a-radio-button> <a-radio-button value="SFLX00002">水费</a-radio-button> <a-radio-button value="SFLX00003">电费</a-radio-button> <a-radio-button value="SFLX00004">燃气费</a-radio-button> <a-radio-button value="SFLX00005">暖气费</a-radio-button> </a-radio-group> </div> <div v-if="barData.length > 0"> <bar :dataSource="barData" style="padding: 0;" /> </div> </div> <a-row :gutter="24"> <a-col :sm="24" :md="12" :xl="12" :style="{ marginBottom: '24px' }"> <div class="pay-cost t-box"> <h3 class="box-title">报修统计 </h3> <pie :dataSource="repairData" /> <div class="number"> <p>全部报修 {{pageForm.repairTotal}}</p> <p v-for="(item, index) in repairData1" :key="index">{{ item.item }} {{ item.count }}</p> </div> </div> </a-col> <a-col :sm="24" :md="12" :xl="12" :style="{ marginBottom: '24px' }"> <div class="pay-cost t-box"> <h3 class="box-title">投诉统计</h3> <pie :dataSource="complaintsData" /> <div class="number"> <p>全部投诉 {{pageForm.complaintTotal}}</p> <p v-for="(item, index) in complaintsData" :key="index">{{ item.item }} {{ item.count }}</p> </div> </div> </a-col> </a-row> <a-modal :title="noticeTitle" :visible="visible" @cancel="handleCancel" :footer="null" width="40%"> <div class="notice-content"> <p v-html="noticeContent "></p> </div> </a-modal> </div> </template> <script> import Bar from '@/components/chart/Bar' import Pie from '@/components/chart/Pie' import { homeDataStatistics, 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, payData: [], noticeList: [], typeCode: 'SFLX00001', repairData: [], repairData1:[], complaintsData: [], barData: [], noticeTitle: '', noticeContent: '', visible: false, } }, created() { this.onDetail() this.companyNotice() }, methods: { async onDetail(typeCode) { let { result } = await homeDataStatistics({ typeCode: typeCode }) this.pageForm = { ...result } this.payData = [ { item: '物业费', count: result.propertyFeeRate || 0 }, { item: '水费', count: result.waterRate || 0 }, { item: '电费', count: result.electricRate || 0 }, { item: '燃气费', count: result.gasFeeRate || 0 }, { item: '暖气费', count: result.heatFeeRate || 0 }, ] this.barData = result.monthlyStatistics.map((item) => { return { x: item.monthNum + '月', y: item.totalMoney, } }) this.repairData1 = [ // { item: '全部报修', count: result.repairTotal || 0 }, { item: '待派单', count: result.waitDispatch || 0 }, { item: '维修中', count: result.inRepair || 0 }, { item: '已完成', count: result.repairOver || 0 }, ] this.repairData = [ // { item: '全部报修', count: result.repairTotal || 0 }, // { item: '待派单', count: result.waitDispatch || 0 }, // { item: '维修中', count: result.inRepair || 0 }, { item: '未完成', count: result.repairTotal - result.repairOver || 0 }, { item: '已完成', count: result.repairOver || 0 }, ] this.complaintsData = [ // { item: '全部投诉', count: result.complaintTotal || 0 }, { item: '待处理', count: result.waitHandle || 0 }, { item: '已完成', count: result.complaintOver || 0 }, ] this.loading = !this.loading }, async companyNotice() { let { result } = await companyNoticeList({ pageNo: 1, pageSize: 9, order: 'desc', column: 'createTime'}) this.noticeList = result.records }, toMore() { this.$router.push({ path: '/property/NoticeList', }) }, toDetails(item) { this.noticeTitle = item.noticeTitle this.noticeContent = item.noticeContent this.visible = true }, handleCancel(e) { this.visible = false }, 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: 60px; height: 60px; border-radius: 60px; margin-right: 12px; display: flex; text-align: center; align-items: center; justify-content: center; .anticon { font-size: 32px; 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: 380px; } .announcement { height: 380px; .title { .ant-btn { float: right; margin-left: 10px; } } ul { padding-left: 5px; li { list-style-type: none; height: 30px; line-height: 30px; display: flex; justify-content: space-between; a { color: #666; width: 80%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } } } } .salesCard { margin-bottom: 25px; } .extra-type { a { margin-right: 20px; } } .number { width: 80%; margin: 0 10%; display: flex; justify-content: space-evenly; p { font-size: 14px; margin: 0; } } .notice-content{ word-break: break-all; /deep/ img{ width: 100%; height: auto; } } </style>