1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859 |
- <template>
- <div><h2>Top20单台设备累计借用次数排名</h2></div>
- <div>
- <el-table :data="sortedData" style="width: 100%">
- <el-table-column label="排名" type="index" 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>
- </div>
- </template>
-
- <script setup lang="ts">
- import { onMounted, ref, watch,computed } from 'vue'
- import * as echarts from 'echarts'
- import { useDeviceRanking } from '../composables/useDeviceRanking'
-
- const chartRef = ref<HTMLElement | null>(null)
- const selectedTag = ref('')
- const tags = ['全部', '高值设备', '摄影设备'] // 示例标签
- const { borrowCountData, fetchRanking } = useDeviceRanking()
-
- interface DeviceItem {
- device_id: number
- device_name: string
- device_code: string
- borrow_count: number
- }
- const rawData = ref<DeviceItem[]>([])
-
- const loadData = async () => {
- await fetchRanking()
- rawData.value = borrowCountData.value
- }
- const sortedData = computed(() =>
- [...rawData.value].sort((a, b) => b.borrow_count - a.borrow_count)
- )
-
-
- onMounted(loadData)
-
- // watch(borrowCountData, renderChart)
- </script>
-
-
|