BorrowRankingList.vue 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188
  1. <template>
  2. <div class="ranking-panel">
  3. <div class="panel-title">
  4. <div class="title">单台设备累计借用次数排名</div>
  5. <!-- <div class="more">更多</div> -->
  6. </div>
  7. <div class="panel-header">
  8. <el-row :gutter="24">
  9. <el-col :span="6">
  10. <el-select v-model="borrowType" clearable placeholder="借用类型" style="width: 140px;" @change="fetchRanking">
  11. <el-option label="全部" value="all" />
  12. <el-option label="常规借用" value="regular" />
  13. <el-option label="课堂借用" value="classroom" />
  14. <el-option label="特殊借用" value="special" />
  15. </el-select>
  16. </el-col>
  17. <el-col :span="12">
  18. <el-date-picker v-model="dateRange" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期" clearable
  19. @change="fetchRanking" />
  20. </el-col>
  21. <el-col :span="6">
  22. <el-select multiple clearable v-model="deviceTagIds" placeholder="标签名" style="margin-left: 30%; width: 100px;"
  23. @change="fetchRanking">
  24. <el-option v-for="item in labelType" :key="item.id" :label="item.name" :value="item.id" >
  25. <template #default>
  26. <el-checkbox
  27. :label="item.name"
  28. :checked="deviceTagIds.includes(item.id)"
  29. >
  30. {{ item.name }}
  31. </el-checkbox>
  32. </template>
  33. </el-option>
  34. </el-select>
  35. </el-col>
  36. </el-row>
  37. </div>
  38. <el-table v-if="rankingData.length" :data="rankingData" style="width: 100%; margin-top: 20px; height: 350px"
  39. max-height="500">
  40. <el-table-column type="index" label="排名" width="60" />
  41. <el-table-column prop="device_name" label="设备名" />
  42. <!-- <el-table-column prop="device_name" label="标签名">
  43. <template #default="scope">
  44. <el-tag v-for="tag in scope.row.device_tags" :key="tag" :type="tag.type">{{ tag.name }}</el-tag>
  45. </template>
  46. </el-table-column> -->
  47. <el-table-column prop="device_code" label="设备编号" />
  48. <el-table-column prop="borrow_count" label="借用次数" />
  49. <!-- <el-table-column prop="total_quantity" label="累计借用册数" /> -->
  50. </el-table>
  51. <div v-else class="empty-tip">暂无数据</div>
  52. </div>
  53. </template>
  54. <script setup lang="ts">
  55. import { ref, onMounted } from 'vue'
  56. import * as api from '../api'
  57. import { GetList } from '../../devicelabel/api'
  58. import { Session } from '/@/utils/storage';
  59. interface RankingItem {
  60. user_id: number
  61. user_name: string
  62. user_code: string
  63. borrow_count: number
  64. total_quantity: number
  65. }
  66. const borrowType = ref('all')
  67. const dateRange = ref<[string, string] | null>(null)
  68. const keyword = ref('')
  69. const rankingData = ref<RankingItem[]>([])
  70. // const deviceTagId = ref('')
  71. const deviceTagIds = ref<number[]>([])
  72. const fetchRanking = async () => {
  73. const params: Record<string, any> = {
  74. type: borrowType.value
  75. }
  76. if (dateRange.value) {
  77. params.start = dateRange.value[0]
  78. params.end = dateRange.value[1]
  79. }
  80. if (keyword.value) {
  81. params.keyword = keyword.value
  82. }
  83. // if (deviceTagId.value) {
  84. // params.tag_id = deviceTagId.value
  85. // }
  86. if (deviceTagIds.value.length) {
  87. params.tag_id = deviceTagIds.value
  88. // console.log("params.tag_id::",params.tag_id)
  89. }
  90. const res = await api.GetBorrowRanking(params)
  91. if (res.code === 2000) {
  92. rankingData.value = res.data.borrow_count_ranking
  93. } else {
  94. rankingData.value = []
  95. }
  96. }
  97. const labelType = ref([])
  98. const getList = async () => {
  99. const res = await GetList({
  100. page: 1,
  101. page_size: 20,
  102. })
  103. if (res.code === 2000) {
  104. labelType.value = res.data
  105. }
  106. }
  107. onMounted(() => {
  108. fetchRanking()
  109. if(Session.get('userInfo').username =='平台管理员') return
  110. getList()
  111. })
  112. </script>
  113. <style scoped>
  114. .ranking-panel {
  115. width: 100%;
  116. padding: 16px;
  117. background: #fff;
  118. border-radius: 4px;
  119. }
  120. .panel-title {
  121. display: flex;
  122. justify-content: space-between;
  123. align-items: center;
  124. margin-bottom: 16px;
  125. }
  126. .panel-title .title {
  127. font-size: 16px;
  128. font-weight: 500;
  129. color: #333;
  130. }
  131. .panel-title .more {
  132. font-size: 14px;
  133. color: #999;
  134. cursor: pointer;
  135. }
  136. .panel-header {
  137. display: flex;
  138. align-items: center;
  139. flex-wrap: wrap;
  140. margin-bottom: 16px;
  141. }
  142. .empty-tip {
  143. text-align: center;
  144. color: #999;
  145. padding: 20px;
  146. }
  147. :deep(.el-table) {
  148. border: none !important;
  149. }
  150. :deep(.el-table th) {
  151. background-color: #f5f7fa;
  152. color: #606266;
  153. font-weight: 400;
  154. border-bottom: 1px solid #EBEEF5;
  155. }
  156. :deep(.el-table td) {
  157. color: #606266;
  158. }
  159. :deep(.el-table--border) {
  160. border: none;
  161. }
  162. :deep(.el-table__inner-wrapper::before) {
  163. display: none;
  164. }
  165. </style>