测试

klp-ui/src/views/wms/order/dashboard.vue

@@ -0,0 +1,85 @@
+<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>