<template>
|
<div class="dashboard">
|
<!-- 顶部横向两栏 -->
|
<div class="dashboard-top">
|
<!-- 左：企业信息+库存数据卡片（上下排列） -->
|
<div class="top-left">
|
<div class="company-info">
|
<!-- 顶部问候条 -->
|
<div class="welcome-banner">
|
<div class="welcome-title">
|
<span class="welcome-user">{{ userStore.nickName || '系统管理员' }}</span>
|
<span> 您好！祝您开心每一天</span>
|
</div>
|
<div class="welcome-time">登录于: {{ userStore.currentLoginTime }}</div>
|
</div>
|
|
<!-- 用户信息卡片 -->
|
<div class="user-card">
|
<img :src="userStore.avatar" class="avatar" alt="" />
|
<div class="user-card-main">
|
<div class="user-name">{{ userStore.name }}</div>
|
<div class="user-role">{{ userStore.roleName }}</div>
|
<div class="user-meta">
|
<span>{{ userStore.phonenumber || '123456789' }}</span>
|
<span class="sep">|</span>
|
<span>{{ userStore.currentFactoryName || '组织架构' }}</span>
|
<span class="sep">|</span>
|
<span>{{ userStore.remark || '岗位名' }}</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<!-- 右：库存数据卡片 -->
|
<div class="data-cards">
|
<div class="data-card inventory">
|
<div class="data-title">库存数据</div>
|
<div class="data-num">
|
<div>
|
<div class="data-desc">当前库存总量/件</div>
|
<div class="data-value">{{ businessInfo.inventoryNum }}</div>
|
</div>
|
<div>
|
<div class="data-desc">今日入库/件</div>
|
<div class="data-value">{{ businessInfo.todayInventoryNum }}</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref, onMounted } from 'vue'
|
import useUserStore from "@/store/modules/user.js";
|
import { getBusiness } from "@/api/viewIndex.js";
|
|
const userStore = useUserStore()
|
|
const businessInfo = ref({
|
inventoryNum: 0,
|
todayInventoryNum: 0,
|
})
|
|
const getBusinessData = () => {
|
getBusiness().then((res) => {
|
businessInfo.value = { ...res.data }
|
})
|
}
|
|
onMounted(() => {
|
getBusinessData()
|
})
|
</script>
|
|
<style lang="scss" scoped>
|
.dashboard {
|
padding: 20px;
|
background: #f5f7fa;
|
min-height: calc(100vh - 84px);
|
}
|
|
.dashboard-top {
|
display: grid;
|
grid-template-columns: 380px 1fr;
|
gap: 20px;
|
margin-bottom: 20px;
|
}
|
|
// 左侧用户信息
|
.top-left {
|
.company-info {
|
background: #fff;
|
border-radius: 12px;
|
overflow: hidden;
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
|
}
|
}
|
|
.welcome-banner {
|
background: linear-gradient(135deg, var(--el-color-primary) 0%, var(--el-color-primary-light-3) 100%);
|
padding: 20px;
|
color: #fff;
|
|
.welcome-title {
|
font-size: 16px;
|
margin-bottom: 8px;
|
|
.welcome-user {
|
font-size: 20px;
|
font-weight: 600;
|
}
|
}
|
|
.welcome-time {
|
font-size: 13px;
|
opacity: 0.9;
|
}
|
}
|
|
.user-card {
|
display: flex;
|
align-items: center;
|
gap: 16px;
|
padding: 20px;
|
|
.avatar {
|
width: 64px;
|
height: 64px;
|
border-radius: 50%;
|
object-fit: cover;
|
border: 3px solid var(--el-color-primary-light-8);
|
}
|
|
.user-card-main {
|
flex: 1;
|
|
.user-name {
|
font-size: 18px;
|
font-weight: 600;
|
color: #303133;
|
margin-bottom: 4px;
|
}
|
|
.user-role {
|
font-size: 13px;
|
color: var(--el-color-primary);
|
background: var(--el-color-primary-light-9);
|
display: inline-block;
|
padding: 2px 10px;
|
border-radius: 12px;
|
margin-bottom: 8px;
|
}
|
|
.user-meta {
|
font-size: 13px;
|
color: #909399;
|
|
.sep {
|
margin: 0 8px;
|
color: #dcdfe6;
|
}
|
}
|
}
|
}
|
|
// 右侧库存数据卡片
|
.data-cards {
|
display: flex;
|
align-items: stretch;
|
}
|
|
.data-card {
|
background: #fff;
|
border-radius: 12px;
|
padding: 24px;
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
|
flex: 1;
|
|
.data-title {
|
font-size: 16px;
|
font-weight: 600;
|
color: #606266;
|
margin-bottom: 20px;
|
padding-bottom: 12px;
|
border-bottom: 1px solid #ebeef5;
|
}
|
|
.data-num {
|
display: flex;
|
gap: 40px;
|
|
> div {
|
flex: 1;
|
}
|
|
.data-desc {
|
font-size: 13px;
|
color: #909399;
|
margin-bottom: 8px;
|
}
|
|
.data-value {
|
font-size: 28px;
|
font-weight: 700;
|
color: #303133;
|
}
|
}
|
|
&.inventory {
|
border-left: 4px solid var(--el-color-primary);
|
}
|
}
|
|
// 响应式
|
@media (max-width: 1200px) {
|
.dashboard-top {
|
grid-template-columns: 1fr;
|
}
|
}
|
|
@media (max-width: 768px) {
|
.data-card .data-num {
|
flex-direction: column;
|
gap: 20px;
|
}
|
}
|
</style>
|
