DeviceBorrowCountChart.vue 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
  1. <template>
  2. <div><h2>Top20单台设备累计借用次数排名</h2></div>
  3. <div>
  4. <el-table :data="sortedData" style="width: 100%">
  5. <el-table-column label="排名" type="index" width="60" />
  6. <el-table-column prop="device_name" label="设备名称" />
  7. <el-table-column prop="device_code" label="设备编号" />
  8. <el-table-column prop="borrow_count" label="借用次数" />
  9. </el-table>
  10. </div>
  11. </template>
  12. <script setup lang="ts">
  13. import { onMounted, ref, watch,computed } from 'vue'
  14. import * as echarts from 'echarts'
  15. import { useDeviceRanking } from '../composables/useDeviceRanking'
  16. const chartRef = ref<HTMLElement | null>(null)
  17. const selectedTag = ref('')
  18. const tags = ['全部', '高值设备', '摄影设备'] // 示例标签
  19. const { borrowCountData, fetchRanking } = useDeviceRanking()
  20. interface DeviceItem {
  21. device_id: number
  22. device_name: string
  23. device_code: string
  24. borrow_count: number
  25. }
  26. const rawData = ref<DeviceItem[]>([])
  27. const loadData = async () => {
  28. await fetchRanking()
  29. rawData.value = borrowCountData.value
  30. }
  31. const sortedData = computed(() =>
  32. [...rawData.value].sort((a, b) => b.borrow_count - a.borrow_count)
  33. )
  34. onMounted(loadData)
  35. // watch(borrowCountData, renderChart)
  36. </script>