82 lines
2.2 KiB
Vue
82 lines
2.2 KiB
Vue
<template>
|
||
<div class="room-statistics">
|
||
<el-card>
|
||
<template slot="header">
|
||
<div class="card-header">
|
||
<span>房间状态统计</span>
|
||
</div>
|
||
</template>
|
||
<div class="chart-container">
|
||
<el-empty description="图表功能暂未实现" style="margin: 40px 0;"></el-empty>
|
||
</div>
|
||
<el-table :data="roomStatusData" style="width: 100%; margin-top: 20px;">
|
||
<el-table-column prop="status" label="状态" width="120"></el-table-column>
|
||
<el-table-column prop="count" label="数量"></el-table-column>
|
||
<el-table-column prop="percentage" label="占比"></el-table-column>
|
||
</el-table>
|
||
<div class="total-count" style="margin-top: 20px; text-align: right;">
|
||
<el-tag size="large" type="primary">房间总数：{{ totalCount }} 间</el-tag>
|
||
</div>
|
||
</el-card>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { statisticsApi } from '../../api/api'
|
||
|
||
export default {
|
||
name: 'RoomStatistics',
|
||
data() {
|
||
return {
|
||
roomStatusData: []
|
||
}
|
||
},
|
||
computed: {
|
||
totalCount() {
|
||
// 只计算在租和空房的数量
|
||
return this.roomStatusData
|
||
.filter(item => item.status === '在租' || item.status === '空房')
|
||
.reduce((sum, item) => sum + item.count, 0)
|
||
}
|
||
},
|
||
mounted() {
|
||
this.loadRoomStatusData()
|
||
},
|
||
methods: {
|
||
async loadRoomStatusData() {
|
||
try {
|
||
const response = await statisticsApi.getRoomStatus()
|
||
const data = response
|
||
// 只计算在租和空房的数量作为总数
|
||
const total = data
|
||
.filter(item => item.status === '在租' || item.status === '空房')
|
||
.reduce((sum, item) => sum + item.count, 0)
|
||
this.roomStatusData = data.map(item => ({
|
||
...item,
|
||
percentage: total > 0 ? `${((item.count / total) * 100).toFixed(2)}%` : '0.00%'
|
||
}))
|
||
} catch (error) {
|
||
this.$message.error('加载房间状态统计数据失败')
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.room-statistics {
|
||
padding: 20px 0;
|
||
}
|
||
|
||
.card-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.chart-container {
|
||
margin: 20px 0;
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
</style> |