123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106 |
- <template>
- <div class="ranking-panel">
- <div class="panel-header">
- <el-select v-model="borrowType" placeholder="借用类型" style="width: 140px">
- <el-option label="全部" value="all" />
- <el-option label="常规借用" value="regular" />
- <el-option label="课堂借用" value="classroom" />
- <el-option label="特殊借用" value="special" />
- </el-select>
-
- <el-date-picker
- v-model="dateRange"
- type="daterange"
- start-placeholder="开始日期"
- end-placeholder="结束日期"
- style="margin-left: 10px"
- />
-
- <el-input
- v-model="keyword"
- placeholder="搜索用户/设备"
- clearable
- style="margin-left: 10px; width: 200px"
- />
-
- <el-button type="primary" @click="fetchRanking" style="margin-left: 10px">
- 查询
- </el-button>
- </div>
-
- <el-table
- v-if="rankingData.length"
- :data="rankingData"
- style="width: 100%; margin-top: 20px"
- border
- >
- <el-table-column type="index" label="排名" width="60" />
- <el-table-column prop="device_name" label="设备名" />
- <el-table-column prop="device_code" label="设备编号" />
- <el-table-column prop="borrow_count" label="借用次数" />
- <!-- <el-table-column prop="total_quantity" label="累计借用册数" /> -->
- </el-table>
-
- <div v-else class="empty-tip">暂无数据</div>
- </div>
- </template>
-
- <script setup lang="ts">
- import { ref, onMounted } from 'vue'
- import * as api from '../api'
-
- interface RankingItem {
- user_id: number
- user_name: string
- user_code: string
- borrow_count: number
- total_quantity: number
- }
-
- const borrowType = ref('all')
- const dateRange = ref<[string, string] | null>(null)
- const keyword = ref('')
- const rankingData = ref<RankingItem[]>([])
-
- const fetchRanking = async () => {
- const params: Record<string, any> = {
- type: borrowType.value
- }
-
- if (dateRange.value) {
- params.start = dateRange.value[0]
- params.end = dateRange.value[1]
- }
-
- if (keyword.value) {
- params.keyword = keyword.value
- }
-
- const res = await api.GetBorrowRanking(params)
- if (res.code === 2000) {
- rankingData.value = res.data.borrow_count_ranking
- } else {
- rankingData.value = []
- }
- }
-
- onMounted(fetchRanking)
- </script>
-
- <style scoped>
- .ranking-panel {
- width: 100%;
- padding: 10px;
- }
- .panel-header {
- display: flex;
- align-items: center;
- flex-wrap: wrap;
- }
- .empty-tip {
- text-align: center;
- color: #999;
- padding: 20px;
- }
- </style>
-
|