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>
|