123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121 |
- <template>
- <div class="status-cards">
- <div class="info-title">
- 待处理
- </div>
- <div class="custom-line"></div>
- <div class="card-grid">
-
- <el-row :gutter="15">
- <el-col
- v-for="(item, index) in statusList"
- :key="index"
- :xs="24"
- :sm="8"
- :md="8"
- :lg="8"
- >
- <div class="card" @click="handleClick(item)">
- <el-icon :size="40" class="card-icon">
- <component :is="item.icon" />
- </el-icon>
- <div class="card-value">{{ item.value }}</div>
- <div class="card-label">{{ item.label }}</div>
- </div>
- </el-col>
- </el-row>
- </div>
- </div>
- </template>
-
- <script setup lang="ts" name="StatusCards">
- import {
- Edit, Refresh, Tools, Box, Folder, Monitor
- } from '@element-plus/icons-vue'
- import { defineProps ,computed} from 'vue'
- import { useRouter } from 'vue-router'
- const props = defineProps({
- statusData: {
- type: Object,
- required: true
- }
- })
- const statusList = computed(()=>[
- { label: '待审核', value: props.statusData.pending_approval, icon: Edit },
- { label: '待归还', value: props.statusData.pending_return, icon: Refresh },
- { label: '待维修', value: props.statusData.pending_maintenance, icon: Tools },
- { label: '已逾期', value: props.statusData.pending_overdue, icon: Box },
- ])
- const router = useRouter()
- function handleClick(item: any) {
- console.log('点击状态卡片:', item.label);
- switch (item.label) {
- case '待审核':
- router.push('/borrow/approval')
- break
- case '待归还':
- router.push('/borrow/list')
- break
- case '待维修':
- router.push('/devicemaintenance')
- break
- case '已逾期':
- router.push('/device/list')
- break
- default:
- console.warn('未知状态:', item.label)
- }
- }
- </script>
-
- <style scoped>
- .custom-line {
- height: 1px;
- background-color: #ccc;
- width: 100%;
- margin: 10px 0;
- }
- .info-title{
- padding-left: 10%;
- padding-top:10px;
- font-size: 30px;
- }
- .status-cards{
- background: #fff;
- /* padding:30px; */
- height: 400px;
- }
- .card-grid{
- padding:30px;
- }
- .card {
- align-items: center;
- text-align: center;
- padding: 10px;
- cursor: pointer;
- box-sizing: border-box;
- margin-bottom: 10px;
- }
- .card-icon {
- width: 40px;
- height: 40px;
- margin-bottom: 8px;
- }
- .card-value {
- font-size: 20px;
- font-weight: bold;
- color: #409EFF;
- }
- .card-label {
- font-size: 14px;
- color: #666;
- margin-top: 4px;
- }
- </style>
-
|