BorrowRankingList.vue 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106
  1. <template>
  2. <div class="ranking-panel">
  3. <div class="panel-header">
  4. <el-select v-model="borrowType" placeholder="借用类型" style="width: 140px">
  5. <el-option label="全部" value="all" />
  6. <el-option label="常规借用" value="regular" />
  7. <el-option label="课堂借用" value="classroom" />
  8. <el-option label="特殊借用" value="special" />
  9. </el-select>
  10. <el-date-picker
  11. v-model="dateRange"
  12. type="daterange"
  13. start-placeholder="开始日期"
  14. end-placeholder="结束日期"
  15. style="margin-left: 10px"
  16. />
  17. <el-input
  18. v-model="keyword"
  19. placeholder="搜索用户/设备"
  20. clearable
  21. style="margin-left: 10px; width: 200px"
  22. />
  23. <el-button type="primary" @click="fetchRanking" style="margin-left: 10px">
  24. 查询
  25. </el-button>
  26. </div>
  27. <el-table
  28. v-if="rankingData.length"
  29. :data="rankingData"
  30. style="width: 100%; margin-top: 20px"
  31. border
  32. >
  33. <el-table-column type="index" label="排名" width="60" />
  34. <el-table-column prop="device_name" label="设备名" />
  35. <el-table-column prop="device_code" label="设备编号" />
  36. <el-table-column prop="borrow_count" label="借用次数" />
  37. <!-- <el-table-column prop="total_quantity" label="累计借用册数" /> -->
  38. </el-table>
  39. <div v-else class="empty-tip">暂无数据</div>
  40. </div>
  41. </template>
  42. <script setup lang="ts">
  43. import { ref, onMounted } from 'vue'
  44. import * as api from '../api'
  45. interface RankingItem {
  46. user_id: number
  47. user_name: string
  48. user_code: string
  49. borrow_count: number
  50. total_quantity: number
  51. }
  52. const borrowType = ref('all')
  53. const dateRange = ref<[string, string] | null>(null)
  54. const keyword = ref('')
  55. const rankingData = ref<RankingItem[]>([])
  56. const fetchRanking = async () => {
  57. const params: Record<string, any> = {
  58. type: borrowType.value
  59. }
  60. if (dateRange.value) {
  61. params.start = dateRange.value[0]
  62. params.end = dateRange.value[1]
  63. }
  64. if (keyword.value) {
  65. params.keyword = keyword.value
  66. }
  67. const res = await api.GetBorrowRanking(params)
  68. if (res.code === 2000) {
  69. rankingData.value = res.data.borrow_count_ranking
  70. } else {
  71. rankingData.value = []
  72. }
  73. }
  74. onMounted(fetchRanking)
  75. </script>
  76. <style scoped>
  77. .ranking-panel {
  78. width: 100%;
  79. padding: 10px;
  80. }
  81. .panel-header {
  82. display: flex;
  83. align-items: center;
  84. flex-wrap: wrap;
  85. }
  86. .empty-tip {
  87. text-align: center;
  88. color: #999;
  89. padding: 20px;
  90. }
  91. </style>