<script lang="ts" setup>
|
import type { MesHomeApi } from '#/api/mes/home';
|
|
import { computed, onMounted, ref } from 'vue';
|
import { useRouter } from 'vue-router';
|
|
import { Page } from '@vben/common-ui';
|
|
import { Col, Row } from 'ant-design-vue';
|
|
import { getHomeSummary } from '#/api/mes/home';
|
import { useHomeAccess } from '#/utils/use-home-access';
|
|
import {
|
ALERT_MENUS,
|
defaultSummary,
|
HOME_BLOCK_MENUS,
|
HOME_SHORTCUTS,
|
} from './data';
|
import AlertPanel from './modules/alert-panel.vue';
|
import KpiCards from './modules/kpi-cards.vue';
|
import ProductionTrend from './modules/production-trend.vue';
|
import Shortcuts from './modules/shortcuts.vue';
|
import WorkOrderChart from './modules/work-order-chart.vue';
|
|
const router = useRouter();
|
const summary = ref<MesHomeApi.Summary>(defaultSummary); // 首页汇总统计
|
|
// 首页模块跟随侧边栏菜单：菜单没开的模块整块不展示
|
const { canSeeMenu } = useHomeAccess();
|
/** 生产趋势（取自生产报工） */
|
const showTrend = computed(() => canSeeMenu(HOME_BLOCK_MENUS.feedback));
|
/** 待办与异常：任意一条的菜单开着就渲染这一列 */
|
const showAlert = computed(() => ALERT_MENUS.some((menu) => canSeeMenu(menu)));
|
/** 订单状态分布（取自生产订单） */
|
const showChart = computed(() => canSeeMenu(HOME_BLOCK_MENUS.workOrder));
|
/** 快捷入口：任意一个入口的菜单开着就渲染这一列 */
|
const showShortcuts = computed(() =>
|
HOME_SHORTCUTS.some((item) => canSeeMenu(item.menu)),
|
);
|
|
/** 跳转到目标页面（按路由 name） */
|
function handleNavigate(name: string) {
|
router.push({ name });
|
}
|
|
/** 加载首页汇总统计 */
|
async function loadSummary() {
|
summary.value = await getHomeSummary();
|
}
|
|
onMounted(() => {
|
loadSummary();
|
});
|
</script>
|
|
<template>
|
<Page><!-- 第一行：核心 KPI 汇总卡片 -->
|
<KpiCards :summary="summary" class="mb-4" @navigate="handleNavigate" />
|
|
<!-- 第二行：生产趋势 + 待办异常 -->
|
<Row v-if="showTrend || showAlert" :gutter="16" class="mb-4">
|
<Col
|
v-if="showTrend"
|
:lg="showAlert ? 16 : 24"
|
:md="24"
|
:sm="24"
|
:xl="showAlert ? 16 : 24"
|
:xs="24"
|
class="mb-4"
|
>
|
<ProductionTrend />
|
</Col>
|
<Col
|
v-if="showAlert"
|
:lg="showTrend ? 8 : 24"
|
:md="24"
|
:sm="24"
|
:xl="showTrend ? 8 : 24"
|
:xs="24"
|
class="mb-4"
|
>
|
<AlertPanel :summary="summary" @navigate="handleNavigate" />
|
</Col>
|
</Row>
|
|
<!-- 第三行：订单分布 + 快捷入口 -->
|
<Row v-if="showChart || showShortcuts" :gutter="16">
|
<Col
|
v-if="showChart"
|
:lg="showShortcuts ? 12 : 24"
|
:md="24"
|
:sm="24"
|
:xl="showShortcuts ? 12 : 24"
|
:xs="24"
|
class="mb-4"
|
>
|
<WorkOrderChart />
|
</Col>
|
<Col
|
v-if="showShortcuts"
|
:lg="showChart ? 12 : 24"
|
:md="24"
|
:sm="24"
|
:xl="showChart ? 12 : 24"
|
:xs="24"
|
class="mb-4"
|
>
|
<Shortcuts @navigate="handleNavigate" />
|
</Col>
|
</Row>
|
</Page>
|
</template>
|
