<template>
|
<section class="app-panel welcome">
|
<div class="welcome__left">
|
<h2 class="welcome__title">{{ greeting }}，{{ userName }}</h2>
|
<p class="welcome__meta">
|
<span>{{ dateText }}</span>
|
<span class="welcome__sep">|</span>
|
<span>{{ roleName || '系统用户' }}</span>
|
<template v-if="deptName">
|
<span class="welcome__sep">|</span>
|
<span>{{ deptName }}</span>
|
</template>
|
</p>
|
</div>
|
<div class="welcome__chips">
|
<div class="welcome__chip">
|
<span class="welcome__chip-label">待办任务</span>
|
<span class="welcome__chip-value app-num">{{ todoCount }}</span>
|
</div>
|
<div class="welcome__chip">
|
<span class="welcome__chip-label">待生产订单</span>
|
<span class="welcome__chip-value app-num">{{ pendingOrders }}</span>
|
</div>
|
<div class="welcome__chip">
|
<span class="welcome__chip-label">今日入库</span>
|
<span class="welcome__chip-value app-num">{{ todayInbound }}</span>
|
</div>
|
<div class="welcome__chip">
|
<span class="welcome__chip-label">今日完成检验</span>
|
<span class="welcome__chip-value app-num">{{ todayChecked }}</span>
|
</div>
|
</div>
|
</section>
|
</template>
|
|
<script setup>
|
import { ref, computed, onMounted } from 'vue'
|
import dayjs from 'dayjs'
|
import { qualityInspectionCount, orderCount } from '@/api/viewIndex'
|
|
const props = defineProps({
|
userName: { type: String, default: '' },
|
roleName: { type: String, default: '' },
|
deptName: { type: String, default: '' },
|
todoCount: { type: Number, default: 0 },
|
todayInbound: { type: [Number, String], default: 0 }
|
})
|
|
const todayChecked = ref(0)
|
const pendingOrders = ref(0)
|
|
const greeting = computed(() => {
|
const h = dayjs().hour()
|
if (h < 6) return '夜深了'
|
if (h < 12) return '早上好'
|
if (h < 14) return '中午好'
|
if (h < 18) return '下午好'
|
return '晚上好'
|
})
|
|
const weekMap = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
|
const dateText = computed(() => {
|
const d = dayjs()
|
return `${d.format('YYYY年MM月DD日')} ${weekMap[d.day()]}`
|
})
|
|
onMounted(() => {
|
qualityInspectionCount().then((res) => {
|
todayChecked.value = (res.data || {}).todayCompletedCount || 0
|
}).catch(() => {})
|
orderCount().then((res) => {
|
const item = (res.data || []).find((i) => i.name === '待生产订单数')
|
pendingOrders.value = item ? Number(item.value) || 0 : 0
|
}).catch(() => {})
|
})
|
</script>
|
|
<style scoped>
|
.welcome {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
flex-wrap: wrap;
|
gap: 16px;
|
padding: 18px 24px;
|
}
|
|
.welcome__title {
|
margin: 0;
|
font-size: 18px;
|
font-weight: 600;
|
color: var(--app-text);
|
}
|
|
.welcome__meta {
|
margin: 6px 0 0;
|
font-size: 13px;
|
color: var(--app-text-tertiary);
|
}
|
|
.welcome__sep {
|
margin: 0 10px;
|
color: var(--app-border);
|
}
|
|
.welcome__chips {
|
display: flex;
|
flex-wrap: wrap;
|
gap: 12px;
|
}
|
|
.welcome__chip {
|
display: flex;
|
flex-direction: column;
|
gap: 4px;
|
min-width: 96px;
|
padding: 10px 16px;
|
border: 1px solid var(--app-border);
|
border-radius: var(--app-radius-sm);
|
background: var(--app-surface-hover);
|
}
|
|
.welcome__chip-label {
|
font-size: 12px;
|
color: var(--app-text-tertiary);
|
}
|
|
.welcome__chip-value {
|
font-size: 18px;
|
font-weight: 600;
|
color: var(--app-text);
|
}
|
</style>
|
