统计

src/api/api.js

@@ -60,6 +60,8 @@ export const statisticsApi = {
   getApartmentRoomStatusStats: () => get('/statistics/apartment-room-status'),
   getEmptyRoomsByApartment: () => get('/statistics/empty-rooms-by-apartment'),
   getRentedRoomsByApartment: () => get('/statistics/rented-rooms-by-apartment'),
+  getSoonExpireRoomsByApartment: () => get('/statistics/soon-expire-rooms-by-apartment'),
+  getExpiredRoomsByApartment: () => get('/statistics/expired-rooms-by-apartment'),
   getTenantRentalStats: () => get('/statistics/tenant-rental-stats')
 };
 

src/layouts/MainLayout.vue

@@ -21,11 +21,7 @@
               <span v-if="notificationCount > 0" class="notification-badge">{{ notificationCount }}</span>
             </div>
             <el-dropdown-menu slot="dropdown">
-              <el-dropdown-item command="viewAll">
-                查看所有通知
-                <span v-if="notificationCount > 0" class="notification-badge-small">{{ notificationCount }}</span>
-              </el-dropdown-item>
-              <el-dropdown-item divided command="expired">
+              <el-dropdown-item command="expired">
                 已到期房间
                 <span v-if="expiredCount > 0" class="notification-badge-small">{{ expiredCount }}</span>
               </el-dropdown-item>
@@ -354,10 +350,6 @@ export default {
     // 处理通知命令
     handleNotificationCommand(command) {
       switch (command) {
-        case 'viewAll':
-          // 查看所有通知
-          this.$router.push('/rental/list')
-          break
         case 'expired':
           // 查看已到期房间
           this.$router.push('/rental/list?subStatus=expired')

src/views/statistics/House.vue

@@ -58,6 +58,40 @@
           </el-table-column>
         </el-table>
       </div>
+      <div class="table-wrapper" style="margin-top: 30px;">
+        <h3 style="margin-bottom: 15px;">即将到期分布</h3>
+        <el-table :data="soonExpireRoomsData" style="width: 100%;" class="stats-table">
+          <el-table-column type="index" label="序号" width="60"></el-table-column>
+          <el-table-column prop="apartmentName" label="公寓名称" min-width="150"></el-table-column>
+          <el-table-column label="即将到期信息" min-width="300">
+            <template slot-scope="scope">
+              <div v-if="scope.row.soonExpireRooms && scope.row.soonExpireRooms.length > 0">
+                {{ scope.row.soonExpireRooms.map(room => room.roomNumber).join('，') }}
+              </div>
+              <div v-else class="no-empty-rooms">
+                无即将到期房间
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="table-wrapper" style="margin-top: 30px;">
+        <h3 style="margin-bottom: 15px;">已到期分布</h3>
+        <el-table :data="expiredRoomsData" style="width: 100%;" class="stats-table">
+          <el-table-column type="index" label="序号" width="60"></el-table-column>
+          <el-table-column prop="apartmentName" label="公寓名称" min-width="150"></el-table-column>
+          <el-table-column label="已到期信息" min-width="300">
+            <template slot-scope="scope">
+              <div v-if="scope.row.expiredRooms && scope.row.expiredRooms.length > 0">
+                {{ scope.row.expiredRooms.map(room => room.roomNumber).join('，') }}
+              </div>
+              <div v-else class="no-empty-rooms">
+                无已到期房间
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
       <div class="table-wrapper" style="margin-top: 30px;">
         <h3 style="margin-bottom: 15px;">租客在租统计</h3>
         <el-table :data="tenantRentalData" style="width: 100%;" class="stats-table">
@@ -93,6 +127,8 @@ export default {
       roomStatusData: [],
       emptyRoomsData: [],
       rentedRoomsData: [],
+      soonExpireRoomsData: [],
+      expiredRoomsData: [],
       tenantRentalData: []
     }
   },
@@ -107,6 +143,8 @@ export default {
     this.loadRoomStatusData()
     this.loadEmptyRoomsData()
     this.loadRentedRoomsData()
+    this.loadSoonExpireRoomsData()
+    this.loadExpiredRoomsData()
     this.loadTenantRentalData()
   },
   methods: {
@@ -176,6 +214,22 @@ export default {
       } catch (error) {
         this.$message.error('加载租客在租统计数据失败')
       }
+    },
+    async loadSoonExpireRoomsData() {
+      try {
+        const response = await statisticsApi.getSoonExpireRoomsByApartment()
+        this.soonExpireRoomsData = response
+      } catch (error) {
+        this.$message.error('加载即将到期分布数据失败')
+      }
+    },
+    async loadExpiredRoomsData() {
+      try {
+        const response = await statisticsApi.getExpiredRoomsByApartment()
+        this.expiredRoomsData = response
+      } catch (error) {
+        this.$message.error('加载已到期分布数据失败')
+      }
     }
   }
 }