<script lang="ts" setup>
|
import type { MesBagCodeHomeApi } from '#/api/mes/bag-code-home';
|
|
import { onMounted, ref } from 'vue';
|
import { useRouter } from 'vue-router';
|
|
import { Page } from '@vben/common-ui';
|
|
import { Col, Row, message } from 'ant-design-vue';
|
|
import { getBagCodeHomeSummary } from '#/api/mes/bag-code-home';
|
|
import { defaultSummary } from './data';
|
import BagCodeCards from './modules/bag-code-cards.vue';
|
import BagCodeStatusChart from './modules/bag-code-status-chart.vue';
|
import BasicCards from './modules/basic-cards.vue';
|
import BatchStatusChart from './modules/batch-status-chart.vue';
|
import Shortcuts from './modules/shortcuts.vue';
|
import TrendChart from './modules/trend-chart.vue';
|
|
defineOptions({ name: 'DashboardBagCodeHome' });
|
|
const router = useRouter();
|
const summary = ref<MesBagCodeHomeApi.Summary>(defaultSummary); // 首页汇总统计
|
|
/** 跳转到目标页面（按路由 name，未加载时提示） */
|
async function handleNavigate(name: string) {
|
try {
|
await router.push({ name });
|
} catch {
|
message.warning('当前菜单尚未加载，请从左侧菜单进入对应页面');
|
}
|
}
|
|
/** 加载首页汇总统计 */
|
async function loadSummary() {
|
summary.value = await getBagCodeHomeSummary();
|
}
|
|
onMounted(() => {
|
loadSummary();
|
});
|
</script>
|
|
<template>
|
<Page>
|
<!-- 第一行：基础数据卡片 -->
|
<BasicCards :summary="summary" class="mb-2" @navigate="handleNavigate" />
|
|
<!-- 第二行：一袋一码卡片 -->
|
<BagCodeCards :summary="summary" class="mb-4" @navigate="handleNavigate" />
|
|
<!-- 第三行：袋码趋势 + 批次/袋码状态分布 -->
|
<Row :gutter="16" class="mb-4">
|
<Col :lg="12" :md="24" :sm="24" :xl="12" :xs="24" class="mb-4">
|
<TrendChart />
|
</Col>
|
<Col :lg="6" :md="12" :sm="24" :xl="6" :xs="24" class="mb-4">
|
<BatchStatusChart :list="summary.batchStatusList" />
|
</Col>
|
<Col :lg="6" :md="12" :sm="24" :xl="6" :xs="24" class="mb-4">
|
<BagCodeStatusChart :list="summary.bagCodeStatusList" />
|
</Col>
|
</Row>
|
|
<!-- 第四行：快捷入口 -->
|
<Shortcuts @navigate="handleNavigate" />
|
</Page>
|
</template>
|
