数据看板更新前后端

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

@@ -10,12 +10,57 @@
         <el-button icon="el-icon-setting" style="margin-left: 10px;" @click="drawerVisible = true">定时刷新设置</el-button>
       </el-col>
     </el-row>
+
+    <!-- 业绩区 -->
+    <el-row :gutter="20" class="section-row">
+      <el-col :span="24">
+        <div class="section-title">
+          <h2>业绩区</h2>
+          <p>产品销售情况、销售人员业绩、总订单数量</p>
+        </div>
+        <PerformanceArea :performance-area="dashboardData.performanceArea" />
+      </el-col>
+    </el-row>
+
+    <!-- 当前情况区 -->
+    <el-row :gutter="20" class="section-row">
+      <el-col :span="24">
+        <div class="section-title">
+          <h2>情况区</h2>
+          <p>订单所需的产品统计、根据BOM计算的原料需求、原料库存和需求情况</p>
+        </div>
+        <CurrentSituationArea :current-situation-area="dashboardData.currentSituationArea" />
+      </el-col>
+    </el-row>
+
+    <!-- 推荐区 -->
+    <el-row :gutter="20" class="section-row">
+      <el-col :span="24">
+        <div class="section-title">
+          <h2>推荐区</h2>
+          <p>订单维度推荐、原料维度推荐</p>
+        </div>
+        <RecommendationArea :recommendation-area="dashboardData.recommendationArea" />
+      </el-col>
+    </el-row>
+
+    <!-- 原有图表区域（保留兼容性） -->
+    <el-row :gutter="20" class="section-row">
+      <el-col :span="24">
+        <div class="section-title">
+          <h2>原有图表区域</h2>
+          <p>兼容原有的图表展示</p>
+        </div>
+      </el-col>
+    </el-row>
+
     <!-- 顶部：3 张summary卡片 -->
     <el-row :gutter="20" class="top-row">
       <el-col :span="24">
         <OrderSummary :data-info="orderSummaryData" />
       </el-col>
     </el-row>
+
     <!-- 第一行图表 -->
     <el-row :gutter="20" class="chart-row">
       <el-col :span="8">
@@ -28,6 +73,7 @@
         <CustomerRegion :customer-data="customerClusterData" />
       </el-col>
     </el-row>
+
     <!-- 定时刷新设置抽屉 -->
     <el-drawer
       title="定时刷新设置"
@@ -56,6 +102,9 @@ import OrderSummary from './components/OrderSummary.vue'
 import OrderCompletion from './components/OrderCompletion.vue'
 import ProductSales from './components/ProductSales.vue'
 import CustomerRegion from './components/CustomerRegion.vue'
+import PerformanceArea from './components/PerformanceArea.vue'
+import CurrentSituationArea from './components/CurrentSituationArea.vue'
+import RecommendationArea from './components/RecommendationArea.vue'
 import { getDashboardData } from '@/api/wms/order'
 
 export default {
@@ -65,9 +114,19 @@ export default {
     OrderCompletion,
     ProductSales,
     CustomerRegion,
+    PerformanceArea,
+    CurrentSituationArea,
+    RecommendationArea,
   },
   data() {
     return {
+      // 新的数据结构
+      dashboardData: {
+        performanceArea: {},
+        currentSituationArea: {},
+        recommendationArea: {}
+      },
+      // 原有数据结构（保持兼容性）
       orderSummaryData: {
         totalOrders: 0,
         completedThisMonth: 0,
@@ -97,20 +156,32 @@ export default {
       try {
         const res = await getDashboardData()
         const data = res
+
+        // 更新新的数据结构
+        this.dashboardData = {
+          performanceArea: data.performanceArea || {},
+          currentSituationArea: data.currentSituationArea || {},
+          recommendationArea: data.recommendationArea || {}
+        }
+
+        // 保持原有数据结构的兼容性
         this.orderSummaryData = {
-          totalOrders: data.orderSummary.totalOrderCount,
-          completedThisMonth: data.orderSummary.monthFinishedOrderCount,
-          completionRate: data.orderSummary.finishedRate,
+          totalOrders: data.orderSummary?.totalOrderCount || 0,
+          completedThisMonth: data.orderSummary?.monthFinishedOrderCount || 0,
+          completionRate: data.orderSummary?.finishedRate || 0,
           ...data.orderSummary
         }
-        this.productSalesData = data.productRank
-        this.customerClusterData = data.customerRegion
+        this.productSalesData = data.productRank || []
+        this.customerClusterData = data.customerRegion || []
         this.materialAnalysisData = {
-          categories: data.orderMaterial.map(item => item.materialName),
-          usageFrequency: data.orderMaterial.map(item => item.usedCount),
-          stockQuantity: data.orderMaterial.map(item => item.stockCount),
-          purchaseCycle: data.orderMaterial.map(item => item.purchaseCycle)
+          categories: (data.orderMaterial || []).map(item => item.materialName),
+          usageFrequency: (data.orderMaterial || []).map(item => item.usedCount),
+          stockQuantity: (data.orderMaterial || []).map(item => item.stockCount),
+          purchaseCycle: (data.orderMaterial || []).map(item => item.purchaseCycle)
         }
+      } catch (error) {
+        console.error('获取数据看板数据失败:', error)
+        this.$message.error('获取数据失败，请稍后重试')
       } finally {
         this.loading = false
       }
@@ -173,6 +244,28 @@ export default {
   box-sizing: border-box;
 }
 
+.section-row {
+  margin-bottom: 30px;
+}
+
+.section-title {
+  margin-bottom: 20px;
+  padding: 0 10px;
+}
+
+.section-title h2 {
+  margin: 0 0 8px 0;
+  font-size: 20px;
+  font-weight: 600;
+  color: #303133;
+}
+
+.section-title p {
+  margin: 0;
+  font-size: 14px;
+  color: #909399;
+}
+
 .top-row,
 .chart-row {
   margin-bottom: 20px;