<template>
|
<div class="workbench">
|
<HomeWelcome
|
:user-name="displayName"
|
:role-name="userStore.roleName"
|
:dept-name="userStore.deptName"
|
:todo-count="todos.length"
|
:today-inbound="business.todayInventoryNum || 0"
|
/>
|
|
<HomeStats :business="business" />
|
|
<div class="workbench__row workbench__row--main">
|
<HomeProcessChart class="workbench__grow" />
|
<HomeTodo class="workbench__side" :list="todos" :loading="todosLoading" />
|
</div>
|
|
<div class="workbench__row workbench__row--triple">
|
<HomeContractChart />
|
<HomeFinanceChart />
|
<HomeQuickEntry />
|
</div>
|
|
<div class="workbench__row workbench__row--double">
|
<HomeQualityChart />
|
<HomeInvoiceChart />
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref, computed, onMounted } from 'vue'
|
import useUserStore from '@/store/modules/user'
|
import { getBusiness, homeTodos } from '@/api/viewIndex'
|
import HomeWelcome from './home/components/HomeWelcome.vue'
|
import HomeStats from './home/components/HomeStats.vue'
|
import HomeTodo from './home/components/HomeTodo.vue'
|
import HomeQuickEntry from './home/components/HomeQuickEntry.vue'
|
import HomeProcessChart from './home/components/charts/HomeProcessChart.vue'
|
import HomeContractChart from './home/components/charts/HomeContractChart.vue'
|
import HomeFinanceChart from './home/components/charts/HomeFinanceChart.vue'
|
import HomeQualityChart from './home/components/charts/HomeQualityChart.vue'
|
import HomeInvoiceChart from './home/components/charts/HomeInvoiceChart.vue'
|
|
const userStore = useUserStore()
|
|
const business = ref({})
|
const todos = ref([])
|
const todosLoading = ref(true)
|
|
const displayName = computed(() => userStore.nickName || userStore.name || '用户')
|
|
onMounted(() => {
|
getBusiness().then((res) => {
|
business.value = res.data || {}
|
}).catch(() => {})
|
|
homeTodos().then((res) => {
|
todos.value = res.data || []
|
}).catch(() => {}).finally(() => {
|
todosLoading.value = false
|
})
|
})
|
</script>
|
|
<style scoped>
|
.workbench {
|
display: flex;
|
flex-direction: column;
|
gap: var(--app-gap);
|
min-height: 100%;
|
padding: var(--app-gap);
|
box-sizing: border-box;
|
background: var(--app-bg);
|
}
|
|
.workbench__row {
|
display: grid;
|
gap: var(--app-gap);
|
min-width: 0;
|
}
|
|
.workbench__row--main {
|
grid-template-columns: minmax(0, 1fr) 380px;
|
}
|
|
.workbench__row--triple {
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
}
|
|
.workbench__row--double {
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
}
|
|
.workbench__grow,
|
.workbench__side {
|
min-width: 0;
|
}
|
|
@media (max-width: 1440px) {
|
.workbench__row--main { grid-template-columns: 1fr; }
|
.workbench__row--triple { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
}
|
|
@media (max-width: 1024px) {
|
.workbench__row--triple,
|
.workbench__row--double { grid-template-columns: 1fr; }
|
}
|
|
@media (max-width: 768px) {
|
.workbench { padding: 12px; }
|
}
|
</style>
|
