rentease-web/src/views/statistics/House.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>