235 lines
7.1 KiB
Vue
235 lines
7.1 KiB
Vue
<template>
|
|
<div class="dashboard">
|
|
<el-card class="welcome-card">
|
|
<h2>欢迎使用租房管理系统</h2>
|
|
<p>本系统提供区域管理、房源管理、租客管理、合同管理和统计分析等功能</p>
|
|
</el-card>
|
|
|
|
<el-row :gutter="20" style="margin-top: 20px;">
|
|
<el-col :xs="24" :sm="12" :md="8">
|
|
<el-card class="stat-card">
|
|
<div class="stat-item">
|
|
<el-icon class="el-icon-location"></el-icon>
|
|
<div class="stat-info">
|
|
<div class="stat-value">{{ regionCount }}</div>
|
|
<div class="stat-label">区域数量</div>
|
|
</div>
|
|
</div>
|
|
</el-card>
|
|
</el-col>
|
|
<el-col :xs="24" :sm="12" :md="8">
|
|
<el-card class="stat-card">
|
|
<div class="stat-item">
|
|
<el-icon class="el-icon-building"></el-icon>
|
|
<div class="stat-info">
|
|
<div class="stat-value">{{ apartmentCount }}</div>
|
|
<div class="stat-label">公寓数量</div>
|
|
</div>
|
|
</div>
|
|
</el-card>
|
|
</el-col>
|
|
<el-col :xs="24" :sm="12" :md="8">
|
|
<el-card class="stat-card">
|
|
<div class="stat-item">
|
|
<el-icon class="el-icon-home"></el-icon>
|
|
<div class="stat-info">
|
|
<div class="stat-value">{{ roomCount }}</div>
|
|
<div class="stat-label">房间数量</div>
|
|
</div>
|
|
</div>
|
|
</el-card>
|
|
</el-col>
|
|
<el-col :xs="24" :sm="12" :md="8">
|
|
<el-card class="stat-card">
|
|
<div class="stat-item">
|
|
<el-icon class="el-icon-user"></el-icon>
|
|
<div class="stat-info">
|
|
<div class="stat-value">{{ tenantCount }}</div>
|
|
<div class="stat-label">租客数量</div>
|
|
</div>
|
|
</div>
|
|
</el-card>
|
|
</el-col>
|
|
<el-col :xs="24" :sm="12" :md="8">
|
|
<el-card class="stat-card">
|
|
<div class="stat-item">
|
|
<el-icon class="el-icon-document"></el-icon>
|
|
<div class="stat-info">
|
|
<div class="stat-value">{{ contractCount }}</div>
|
|
<div class="stat-label">合同数量</div>
|
|
</div>
|
|
</div>
|
|
</el-card>
|
|
</el-col>
|
|
<el-col :xs="24" :sm="12" :md="8">
|
|
<el-card class="stat-card">
|
|
<div class="stat-item">
|
|
<el-icon class="el-icon-s-finance"></el-icon>
|
|
<div class="stat-info">
|
|
<div class="stat-value">{{ emptyRoomCount }}</div>
|
|
<div class="stat-label">空房数量</div>
|
|
</div>
|
|
</div>
|
|
</el-card>
|
|
</el-col>
|
|
<el-col :xs="24" :sm="12" :md="8">
|
|
<el-card class="stat-card">
|
|
<div class="stat-item">
|
|
<el-icon class="el-icon-s-finance"></el-icon>
|
|
<div class="stat-info">
|
|
<div class="stat-value">{{ rentedRoomCount }}</div>
|
|
<div class="stat-label">在租数量</div>
|
|
</div>
|
|
</div>
|
|
</el-card>
|
|
</el-col>
|
|
<el-col :xs="24" :sm="12" :md="8">
|
|
<el-card class="stat-card">
|
|
<div class="stat-item">
|
|
<el-icon class="el-icon-s-finance"></el-icon>
|
|
<div class="stat-info">
|
|
<div class="stat-value">¥{{ collectedRentAmount }}</div>
|
|
<div class="stat-label">已收租金</div>
|
|
</div>
|
|
</div>
|
|
</el-card>
|
|
</el-col>
|
|
<el-col :xs="24" :sm="12" :md="8">
|
|
<el-card class="stat-card">
|
|
<div class="stat-item">
|
|
<el-icon class="el-icon-s-finance"></el-icon>
|
|
<div class="stat-info">
|
|
<div class="stat-value">¥{{ collectedWaterAmount }}</div>
|
|
<div class="stat-label">已收水费</div>
|
|
</div>
|
|
</div>
|
|
</el-card>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-card style="margin-top: 20px;">
|
|
<template slot="header">
|
|
<div class="card-header">
|
|
<span>区域公寓房间状态分布</span>
|
|
</div>
|
|
</template>
|
|
<el-table :data="regionApartmentHouseStats" style="width: 100%">
|
|
<el-table-column prop="region" label="区域" width="180"></el-table-column>
|
|
<el-table-column prop="apartment" label="公寓" width="180"></el-table-column>
|
|
<el-table-column prop="empty" label="空房" width="80"></el-table-column>
|
|
<el-table-column prop="rented" label="在租" width="80"></el-table-column>
|
|
<el-table-column prop="soon_expire" label="即将到期" width="100"></el-table-column>
|
|
<el-table-column prop="expired" label="已到期" width="80"></el-table-column>
|
|
<el-table-column prop="cleaning" label="打扫中" width="80"></el-table-column>
|
|
<el-table-column prop="maintenance" label="维修中" width="80"></el-table-column>
|
|
<el-table-column prop="total" label="总数" width="80"></el-table-column>
|
|
</el-table>
|
|
</el-card>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { regionApi, apartmentApi, roomApi, tenantApi, contractApi, statisticsApi } from '../api/api'
|
|
|
|
export default {
|
|
name: 'Dashboard',
|
|
data() {
|
|
return {
|
|
regionCount: 0,
|
|
apartmentCount: 0,
|
|
roomCount: 0,
|
|
tenantCount: 0,
|
|
contractCount: 0,
|
|
emptyRoomCount: 0,
|
|
rentedRoomCount: 0,
|
|
collectedRentAmount: 0,
|
|
collectedWaterAmount: 0,
|
|
regionApartmentHouseStats: []
|
|
}
|
|
},
|
|
mounted() {
|
|
this.loadData()
|
|
},
|
|
methods: {
|
|
async loadData() {
|
|
try {
|
|
// 并行加载所有数据
|
|
const [dashboardStatsResponse, regionApartmentHouseStatsResponse] = await Promise.all([
|
|
statisticsApi.getDashboardStats(),
|
|
statisticsApi.getRegionApartmentHouseStats()
|
|
])
|
|
|
|
// 处理响应数据
|
|
const dashboardStats = dashboardStatsResponse.data || dashboardStatsResponse
|
|
|
|
// 更新统计数据
|
|
this.regionCount = dashboardStats.regionCount
|
|
this.apartmentCount = dashboardStats.apartmentCount
|
|
this.roomCount = dashboardStats.roomCount
|
|
this.tenantCount = dashboardStats.tenantCount
|
|
this.contractCount = dashboardStats.contractCount
|
|
this.emptyRoomCount = dashboardStats.emptyRoomCount
|
|
this.rentedRoomCount = dashboardStats.rentedRoomCount
|
|
this.collectedRentAmount = dashboardStats.collectedRentAmount
|
|
this.collectedWaterAmount = dashboardStats.collectedWaterAmount
|
|
this.regionApartmentHouseStats = regionApartmentHouseStatsResponse
|
|
} catch (error) {
|
|
this.$message.error('加载数据失败')
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.dashboard {
|
|
padding: 20px 0;
|
|
}
|
|
|
|
.welcome-card {
|
|
text-align: center;
|
|
padding: 40px 0;
|
|
}
|
|
|
|
.stat-card {
|
|
height: 120px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.stat-item {
|
|
display: flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
padding: 0 20px;
|
|
}
|
|
|
|
.stat-item .el-icon {
|
|
font-size: 36px;
|
|
color: #409EFF;
|
|
margin-right: 20px;
|
|
}
|
|
|
|
.stat-info {
|
|
flex: 1;
|
|
}
|
|
|
|
.stat-value {
|
|
font-size: 24px;
|
|
font-weight: bold;
|
|
color: #333;
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: 14px;
|
|
color: #666;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.card-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
</style> |