StatusCards.vue 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121
  1. <template>
  2. <div class="status-cards">
  3. <div class="info-title">
  4. 待处理
  5. </div>
  6. <div class="custom-line"></div>
  7. <div class="card-grid">
  8. <el-row :gutter="15">
  9. <el-col
  10. v-for="(item, index) in statusList"
  11. :key="index"
  12. :xs="24"
  13. :sm="8"
  14. :md="8"
  15. :lg="8"
  16. >
  17. <div class="card" @click="handleClick(item)">
  18. <el-icon :size="40" class="card-icon">
  19. <component :is="item.icon" />
  20. </el-icon>
  21. <div class="card-value">{{ item.value }}</div>
  22. <div class="card-label">{{ item.label }}</div>
  23. </div>
  24. </el-col>
  25. </el-row>
  26. </div>
  27. </div>
  28. </template>
  29. <script setup lang="ts" name="StatusCards">
  30. import {
  31. Edit, Refresh, Tools, Box, Folder, Monitor
  32. } from '@element-plus/icons-vue'
  33. import { defineProps ,computed} from 'vue'
  34. import { useRouter } from 'vue-router'
  35. const props = defineProps({
  36. statusData: {
  37. type: Object,
  38. required: true
  39. }
  40. })
  41. const statusList = computed(()=>[
  42. { label: '待审核', value: props.statusData.pending_approval, icon: Edit },
  43. { label: '待归还', value: props.statusData.pending_return, icon: Refresh },
  44. { label: '待维修', value: props.statusData.pending_maintenance, icon: Tools },
  45. { label: '已逾期', value: props.statusData.pending_overdue, icon: Box },
  46. ])
  47. const router = useRouter()
  48. function handleClick(item: any) {
  49. console.log('点击状态卡片:', item.label);
  50. switch (item.label) {
  51. case '待审核':
  52. router.push('/borrow/approval')
  53. break
  54. case '待归还':
  55. router.push('/borrow/list')
  56. break
  57. case '待维修':
  58. router.push('/devicemaintenance')
  59. break
  60. case '已逾期':
  61. router.push('/device/list')
  62. break
  63. default:
  64. console.warn('未知状态:', item.label)
  65. }
  66. }
  67. </script>
  68. <style scoped>
  69. .custom-line {
  70. height: 1px;
  71. background-color: #ccc;
  72. width: 100%;
  73. margin: 10px 0;
  74. }
  75. .info-title{
  76. padding-left: 10%;
  77. padding-top:10px;
  78. font-size: 30px;
  79. }
  80. .status-cards{
  81. background: #fff;
  82. /* padding:30px; */
  83. height: 400px;
  84. }
  85. .card-grid{
  86. padding:30px;
  87. }
  88. .card {
  89. align-items: center;
  90. text-align: center;
  91. padding: 10px;
  92. cursor: pointer;
  93. box-sizing: border-box;
  94. margin-bottom: 10px;
  95. }
  96. .card-icon {
  97. width: 40px;
  98. height: 40px;
  99. margin-bottom: 8px;
  100. }
  101. .card-value {
  102. font-size: 20px;
  103. font-weight: bold;
  104. color: #409EFF;
  105. }
  106. .card-label {
  107. font-size: 14px;
  108. color: #666;
  109. margin-top: 4px;
  110. }
  111. </style>