<script lang="ts" setup>
|
import type { EchartsUIType } from '@vben/plugins/echarts';
|
|
import { onMounted, ref } from 'vue';
|
|
import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
|
|
import { Card, Col, Row, Spin } from 'ant-design-vue';
|
|
import { getManagementCockpitInventory } from '#/api/mes/management-cockpit';
|
|
import { getBarChartOptions, getPieChartOptions } from '../chart-options';
|
|
defineOptions({ name: 'ManagementCockpitInventoryChart' });
|
|
const loading = ref(false);
|
const warehouseRef = ref<EchartsUIType>();
|
const itemRef = ref<EchartsUIType>();
|
const stateRef = ref<EchartsUIType>();
|
const { renderEcharts: renderWarehouse } = useEcharts(warehouseRef);
|
const { renderEcharts: renderItem } = useEcharts(itemRef);
|
const { renderEcharts: renderState } = useEcharts(stateRef);
|
|
/** 加载库存统计并渲染 */
|
async function loadData() {
|
loading.value = true;
|
try {
|
const data = await getManagementCockpitInventory();
|
const warehouses = data.warehouseDistribution || [];
|
const items = data.itemDistribution || [];
|
const states = data.stateDistribution || [];
|
await renderWarehouse(
|
getBarChartOptions(
|
warehouses.map((w) => w.name),
|
warehouses.map((w) => w.count),
|
'库存数量',
|
'#409EFF',
|
),
|
);
|
await renderItem(
|
getBarChartOptions(
|
items.map((i) => i.name),
|
items.map((i) => i.count),
|
'库存数量',
|
'#36cfc9',
|
),
|
);
|
await renderState(
|
getPieChartOptions(
|
states.map((s) => ({ name: s.name, value: s.count })),
|
),
|
);
|
} finally {
|
loading.value = false;
|
}
|
}
|
|
onMounted(() => {
|
loadData();
|
});
|
</script>
|
|
<template>
|
<Card title="库存维度统计" class="h-full">
|
<Spin :spinning="loading">
|
<Row :gutter="16">
|
<Col :lg="9" :md="24" :sm="24" :xs="24">
|
<div class="mb-1 text-sm text-gray-500">按仓库分布</div>
|
<EchartsUI ref="warehouseRef" class="h-[280px] w-full" />
|
</Col>
|
<Col :lg="9" :md="24" :sm="24" :xs="24">
|
<div class="mb-1 text-sm text-gray-500">按品种分布</div>
|
<EchartsUI ref="itemRef" class="h-[280px] w-full" />
|
</Col>
|
<Col :lg="6" :md="24" :sm="24" :xs="24">
|
<div class="mb-1 text-sm text-gray-500">按库存状态</div>
|
<EchartsUI ref="stateRef" class="h-[280px] w-full" />
|
</Col>
|
</Row>
|
</Spin>
|
</Card>
|
</template>
|
