86 lines
1.8 KiB
Vue
86 lines
1.8 KiB
Vue
<template>
|
||
<div class="order-analysis-dashboard">
|
||
<!-- 顶部：3 张summary卡片 -->
|
||
<el-row :gutter="20" class="top-row">
|
||
<el-col :span="24">
|
||
<OrderSummary :data-info="orderSummaryData" />
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<!-- 第二行：3 个图表 -->
|
||
<el-row :gutter="20" class="chart-row">
|
||
<el-col :span="8">
|
||
<OrderCompletion :completion-rate="orderSummaryData.completionRate" />
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<ProductSales :product-sales="productSalesData" />
|
||
</el-col>
|
||
<el-col :span="8">
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import OrderSummary from './components/OrderSummary.vue'
|
||
import OrderCompletion from './components/OrderCompletion.vue'
|
||
import ProductSales from './components/ProductSales.vue'
|
||
import { getDashboardData } from '@/api/wms/order'
|
||
|
||
export default {
|
||
name: 'OrderAnalysisDashboard',
|
||
components: {
|
||
OrderSummary,
|
||
OrderCompletion,
|
||
ProductSales,
|
||
},
|
||
data() {
|
||
return {
|
||
orderSummaryData: {
|
||
totalOrders: 0,
|
||
completedThisMonth: 0,
|
||
completionRate: 0
|
||
},
|
||
productSalesData: [],
|
||
materialAnalysisData: {
|
||
categories: [],
|
||
usageFrequency: [],
|
||
stockQuantity: [],
|
||
bundleRate: [],
|
||
purchaseCycle: [],
|
||
yAxisUsageMax: 0
|
||
},
|
||
customerClusterData: []
|
||
}
|
||
},
|
||
created() {
|
||
this.fetchAllData()
|
||
},
|
||
methods: {
|
||
async fetchAllData() {
|
||
const res = await getDashboardData()
|
||
console.log(res)
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.order-analysis-dashboard {
|
||
padding: 24px;
|
||
background-color: #f7f8fa;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.top-row,
|
||
.chart-row {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.chart-row > .el-col {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: stretch;
|
||
}
|
||
</style>
|