数据看板更新前后端

klp-ui/src/views/wms/order/components/CurrentSituationArea.vue

@@ -0,0 +1,198 @@
+<template>
+  <div class="current-situation-area">
+    <el-row :gutter="20">
+      <!-- 订单所需的产品统计 -->
+      <el-col :span="8">
+        <el-card shadow="hover" class="situation-card">
+          <div slot="header" class="card-header">
+            <span>订单所需的产品统计</span>
+          </div>
+          <div class="table-container">
+            <el-table :data="orderProductStatistics" size="small" height="320" v-loading="!orderProductStatistics.length">
+              <el-table-column prop="productName" label="产品名称" width="120" />
+              <el-table-column prop="orderDemandQuantity" label="需求数量" width="80" />
+              <el-table-column prop="currentStockQuantity" label="库存数量" width="80" />
+              <el-table-column prop="stockGap" label="库存缺口" width="80">
+                <template slot-scope="scope">
+                  <span :class="getStockGapClass(scope.row.stockGap)">
+                    {{ scope.row.stockGap }}
+                  </span>
+                </template>
+              </el-table-column>
+              <el-table-column prop="relatedOrderCount" label="相关订单" width="80" />
+            </el-table>
+            <div v-if="!orderProductStatistics.length" class="empty-data">
+              <i class="el-icon-warning-outline"></i>
+              <p>暂无数据</p>
+            </div>
+          </div>
+        </el-card>
+      </el-col>
+      
+      <!-- 根据BOM计算的原料需求 -->
+      <el-col :span="8">
+        <el-card shadow="hover" class="situation-card">
+          <div slot="header" class="card-header">
+            <span>BOM原料需求</span>
+          </div>
+          <div class="table-container">
+            <el-table :data="productMaterialRequirements" size="small" height="320" v-loading="!productMaterialRequirements.length">
+              <el-table-column prop="productName" label="产品" width="100" />
+              <el-table-column prop="materialName" label="原料" width="100" />
+              <el-table-column prop="requiredQuantity" label="需求数量" width="80" />
+              <el-table-column prop="currentStockQuantity" label="库存" width="60" />
+              <el-table-column prop="inTransitQuantity" label="在途" width="60" />
+              <el-table-column prop="stockGap" label="缺口" width="60">
+                <template slot-scope="scope">
+                  <span :class="getStockGapClass(scope.row.stockGap)">
+                    {{ scope.row.stockGap }}
+                  </span>
+                </template>
+              </el-table-column>
+            </el-table>
+            <div v-if="!productMaterialRequirements.length" class="empty-data">
+              <i class="el-icon-warning-outline"></i>
+              <p>暂无数据</p>
+            </div>
+          </div>
+        </el-card>
+      </el-col>
+      
+      <!-- 原料库存和需求情况 -->
+      <el-col :span="8">
+        <el-card shadow="hover" class="situation-card">
+          <div slot="header" class="card-header">
+            <span>原料库存情况</span>
+          </div>
+          <div class="table-container">
+            <el-table :data="rawMaterialInventory" size="small" height="320" v-loading="!rawMaterialInventory.length">
+              <el-table-column prop="materialName" label="原料名称" width="120" />
+              <el-table-column prop="currentStockQuantity" label="库存" width="60" />
+              <el-table-column prop="inTransitQuantity" label="在途" width="60" />
+              <el-table-column prop="totalRequiredQuantity" label="需求" width="60" />
+              <el-table-column prop="stockGap" label="缺口" width="60">
+                <template slot-scope="scope">
+                  <span :class="getStockGapClass(scope.row.stockGap)">
+                    {{ scope.row.stockGap }}
+                  </span>
+                </template>
+              </el-table-column>
+              <el-table-column prop="stockStatus" label="状态" width="60">
+                <template slot-scope="scope">
+                  <el-tag :type="getStockStatusType(scope.row.stockStatus)" size="mini">
+                    {{ scope.row.stockStatus }}
+                  </el-tag>
+                </template>
+              </el-table-column>
+            </el-table>
+            <div v-if="!rawMaterialInventory.length" class="empty-data">
+              <i class="el-icon-warning-outline"></i>
+              <p>暂无数据</p>
+            </div>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'CurrentSituationArea',
+  props: {
+    currentSituationArea: {
+      type: Object,
+      required: true,
+      default: () => ({})
+    }
+  },
+  computed: {
+    orderProductStatistics() {
+      return this.currentSituationArea.orderProductStatistics || []
+    },
+    productMaterialRequirements() {
+      return this.currentSituationArea.productMaterialRequirements || []
+    },
+    rawMaterialInventory() {
+      return this.currentSituationArea.rawMaterialInventory || []
+    }
+  },
+  methods: {
+    getStockGapClass(stockGap) {
+      if (stockGap > 0) {
+        return 'text-danger'
+      } else if (stockGap === 0) {
+        return 'text-success'
+      } else {
+        return 'text-warning'
+      }
+    },
+    getStockStatusType(status) {
+      switch (status) {
+        case '充足':
+          return 'success'
+        case '不足':
+          return 'warning'
+        case '紧急':
+          return 'danger'
+        default:
+          return 'info'
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.current-situation-area {
+  margin-bottom: 20px;
+}
+
+.situation-card {
+  height: 400px;
+}
+
+.card-header {
+  font-weight: bold;
+  color: #303133;
+}
+
+.table-container {
+  height: 320px;
+  overflow: hidden;
+}
+
+.text-danger {
+  color: #f56c6c;
+  font-weight: bold;
+}
+
+.text-success {
+  color: #67c23a;
+  font-weight: bold;
+}
+
+.text-warning {
+  color: #e6a23c;
+  font-weight: bold;
+}
+
+.empty-data {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  text-align: center;
+  color: #909399;
+}
+
+.empty-data i {
+  font-size: 48px;
+  margin-bottom: 10px;
+}
+
+.empty-data p {
+  margin: 0;
+  font-size: 14px;
+}
+</style> 

klp-ui/src/views/wms/order/components/PerformanceArea.vue

@@ -0,0 +1,298 @@
+<template>
+  <div class="performance-area">
+    <el-row :gutter="20">
+      <!-- 产品销售情况 -->
+      <el-col :span="8">
+        <el-card shadow="hover" class="performance-card">
+          <div slot="header" class="card-header">
+            <span>产品销售情况</span>
+          </div>
+          <div class="chart-container" ref="productSalesChart"></div>
+        </el-card>
+      </el-col>
+      
+      <!-- 销售人员业绩 -->
+      <el-col :span="8">
+        <el-card shadow="hover" class="performance-card">
+          <div slot="header" class="card-header">
+            <span>销售人员业绩</span>
+          </div>
+          <div class="chart-container" ref="salesPersonChart"></div>
+        </el-card>
+      </el-col>
+      
+      <!-- 总订单数量统计 -->
+      <el-col :span="8">
+        <el-card shadow="hover" class="performance-card">
+          <div slot="header" class="card-header">
+            <span>总订单数量统计</span>
+          </div>
+          <div class="stats-container">
+            <div class="stat-item">
+              <div class="stat-number">{{ orderCountStatistics.totalOrderCount || 0 }}</div>
+              <div class="stat-label">总订单数</div>
+            </div>
+            <div class="stat-item">
+              <div class="stat-number">{{ orderCountStatistics.completedOrderCount || 0 }}</div>
+              <div class="stat-label">已完成</div>
+            </div>
+            <div class="stat-item">
+              <div class="stat-number">{{ orderCountStatistics.inProgressOrderCount || 0 }}</div>
+              <div class="stat-label">进行中</div>
+            </div>
+            <div class="stat-item">
+              <div class="stat-number">{{ orderCountStatistics.pendingOrderCount || 0 }}</div>
+              <div class="stat-label">待处理</div>
+            </div>
+            <div class="stat-item">
+              <div class="stat-number">{{ orderCountStatistics.monthlyNewOrderCount || 0 }}</div>
+              <div class="stat-label">本月新增</div>
+            </div>
+            <div class="stat-item">
+              <div class="stat-number">{{ ((orderCountStatistics.completionRate || 0) * 100).toFixed(1) }}%</div>
+              <div class="stat-label">完成率</div>
+            </div>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+
+export default {
+  name: 'PerformanceArea',
+  props: {
+    performanceArea: {
+      type: Object,
+      required: true,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      productSalesChart: null,
+      salesPersonChart: null
+    }
+  },
+  computed: {
+    productSalesPerformance() {
+      return this.performanceArea.productSalesPerformance || []
+    },
+    salesPersonPerformance() {
+      return this.performanceArea.salesPersonPerformance || []
+    },
+    orderCountStatistics() {
+      return this.performanceArea.orderCountStatistics || {}
+    }
+  },
+  watch: {
+    performanceArea: {
+      deep: true,
+      handler() {
+        this.$nextTick(() => {
+          this.renderCharts()
+        })
+      }
+    }
+  },
+  mounted() {
+    this.renderCharts()
+    window.addEventListener('resize', this.handleResize)
+  },
+  beforeDestroy() {
+    if (this.productSalesChart) {
+      this.productSalesChart.dispose()
+    }
+    if (this.salesPersonChart) {
+      this.salesPersonChart.dispose()
+    }
+    window.removeEventListener('resize', this.handleResize)
+  },
+  methods: {
+    renderCharts() {
+      this.renderProductSalesChart()
+      this.renderSalesPersonChart()
+    },
+    renderProductSalesChart() {
+      const chartDom = this.$refs.productSalesChart
+      if (!chartDom) return
+
+      if (!this.productSalesChart) {
+        this.productSalesChart = echarts.init(chartDom)
+      }
+
+      if (!this.productSalesPerformance.length) {
+        // 显示空数据状态
+        this.productSalesChart.setOption({
+          title: {
+            text: '暂无数据',
+            left: 'center',
+            top: 'center',
+            textStyle: {
+              color: '#999',
+              fontSize: 14
+            }
+          }
+        })
+        return
+      }
+
+      const option = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          data: this.productSalesPerformance.map(item => item.productName),
+          axisLabel: {
+            rotate: 45,
+            fontSize: 10
+          }
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: [
+          {
+            name: '销售数量',
+            type: 'bar',
+            data: this.productSalesPerformance.map(item => item.salesQuantity),
+            itemStyle: {
+              color: '#409EFF'
+            }
+          }
+        ]
+      }
+
+      this.productSalesChart.setOption(option)
+    },
+    renderSalesPersonChart() {
+      const chartDom = this.$refs.salesPersonChart
+      if (!chartDom) return
+
+      if (!this.salesPersonChart) {
+        this.salesPersonChart = echarts.init(chartDom)
+      }
+
+      if (!this.salesPersonPerformance.length) {
+        // 显示空数据状态
+        this.salesPersonChart.setOption({
+          title: {
+            text: '暂无数据',
+            left: 'center',
+            top: 'center',
+            textStyle: {
+              color: '#999',
+              fontSize: 14
+            }
+          }
+        })
+        return
+      }
+
+      const option = {
+        tooltip: {
+          trigger: 'item',
+          formatter: '{a} <br/>{b}: {c} ({d}%)'
+        },
+        series: [
+          {
+            name: '销售业绩',
+            type: 'pie',
+            radius: ['40%', '70%'],
+            avoidLabelOverlap: false,
+            label: {
+              show: false,
+              position: 'center'
+            },
+            emphasis: {
+              label: {
+                show: true,
+                fontSize: '18',
+                fontWeight: 'bold'
+              }
+            },
+            labelLine: {
+              show: false
+            },
+            data: this.salesPersonPerformance.map(item => ({
+              name: item.salesPersonName,
+              value: item.salesAmount
+            }))
+          }
+        ]
+      }
+
+      this.salesPersonChart.setOption(option)
+    },
+    handleResize() {
+      if (this.productSalesChart) {
+        this.productSalesChart.resize()
+      }
+      if (this.salesPersonChart) {
+        this.salesPersonChart.resize()
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.performance-area {
+  margin-bottom: 20px;
+}
+
+.performance-card {
+  height: 400px;
+}
+
+.card-header {
+  font-weight: bold;
+  color: #303133;
+}
+
+.chart-container {
+  height: 320px;
+  width: 100%;
+}
+
+.stats-container {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 20px;
+  padding: 20px;
+  height: 320px;
+}
+
+.stat-item {
+  text-align: center;
+  padding: 15px;
+  background: #f8f9fa;
+  border-radius: 8px;
+  border: 1px solid #e9ecef;
+}
+
+.stat-number {
+  font-size: 24px;
+  font-weight: bold;
+  color: #409EFF;
+  margin-bottom: 5px;
+}
+
+.stat-label {
+  font-size: 12px;
+  color: #606266;
+}
+</style> 

klp-ui/src/views/wms/order/components/RecommendationArea.vue

@@ -0,0 +1,152 @@
+<template>
+  <div class="recommendation-area">
+    <el-row :gutter="20">
+      <!-- 订单维度推荐 -->
+      <el-col :span="12">
+        <el-card shadow="hover" class="recommendation-card">
+          <div slot="header" class="card-header">
+            <span>订单维度推荐</span>
+          </div>
+          <div class="table-container">
+            <el-table :data="orderRecommendations" size="small" height="320" v-loading="!orderRecommendations.length">
+              <el-table-column prop="orderCode" label="订单编号" width="120" />
+              <el-table-column prop="customerName" label="客户名称" width="100" />
+              <el-table-column prop="orderStatus" label="订单状态" width="80" />
+              <el-table-column prop="priority" label="优先级" width="60">
+                <template slot-scope="scope">
+                  <el-tag :type="getPriorityType(scope.row.priority)" size="mini">
+                    {{ scope.row.priority }}
+                  </el-tag>
+                </template>
+              </el-table-column>
+              <el-table-column prop="recommendationReason" label="推荐原因" width="150" show-overflow-tooltip />
+              <el-table-column prop="suggestedAction" label="建议操作" width="100" />
+              <el-table-column prop="estimatedCompletionTime" label="预计完成时间" width="120" />
+            </el-table>
+            <div v-if="!orderRecommendations.length" class="empty-data">
+              <i class="el-icon-warning-outline"></i>
+              <p>暂无推荐数据</p>
+            </div>
+          </div>
+        </el-card>
+      </el-col>
+      
+      <!-- 原料维度推荐 -->
+      <el-col :span="12">
+        <el-card shadow="hover" class="recommendation-card">
+          <div slot="header" class="card-header">
+            <span>原料维度推荐</span>
+          </div>
+          <div class="table-container">
+            <el-table :data="materialRecommendations" size="small" height="320" v-loading="!materialRecommendations.length">
+              <el-table-column prop="materialName" label="原料名称" width="120" />
+              <el-table-column prop="recommendedPurchaseQuantity" label="推荐采购数量" width="120" />
+              <el-table-column prop="recommendedSupplier" label="推荐供应商" width="100" show-overflow-tooltip />
+              <el-table-column prop="urgencyLevel" label="紧急程度" width="80">
+                <template slot-scope="scope">
+                  <el-tag :type="getUrgencyType(scope.row.urgencyLevel)" size="mini">
+                    {{ scope.row.urgencyLevel }}
+                  </el-tag>
+                </template>
+              </el-table-column>
+              <el-table-column prop="recommendationReason" label="推荐原因" width="150" show-overflow-tooltip />
+              <el-table-column prop="suggestedAction" label="建议操作" width="100" />
+              <el-table-column prop="estimatedArrivalTime" label="预计到货时间" width="120" />
+            </el-table>
+            <div v-if="!materialRecommendations.length" class="empty-data">
+              <i class="el-icon-warning-outline"></i>
+              <p>暂无推荐数据</p>
+            </div>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'RecommendationArea',
+  props: {
+    recommendationArea: {
+      type: Object,
+      required: true,
+      default: () => ({})
+    }
+  },
+  computed: {
+    orderRecommendations() {
+      return this.recommendationArea.orderRecommendations || []
+    },
+    materialRecommendations() {
+      return this.recommendationArea.materialRecommendations || []
+    }
+  },
+  methods: {
+    getPriorityType(priority) {
+      switch (priority) {
+        case '高':
+          return 'danger'
+        case '中':
+          return 'warning'
+        case '低':
+          return 'success'
+        default:
+          return 'info'
+      }
+    },
+    getUrgencyType(urgency) {
+      switch (urgency) {
+        case '紧急':
+          return 'danger'
+        case '一般':
+          return 'warning'
+        case '低':
+          return 'success'
+        default:
+          return 'info'
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.recommendation-area {
+  margin-bottom: 20px;
+}
+
+.recommendation-card {
+  height: 400px;
+}
+
+.card-header {
+  font-weight: bold;
+  color: #303133;
+}
+
+.table-container {
+  height: 320px;
+  overflow: hidden;
+  position: relative;
+}
+
+.empty-data {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  text-align: center;
+  color: #909399;
+}
+
+.empty-data i {
+  font-size: 48px;
+  margin-bottom: 10px;
+}
+
+.empty-data p {
+  margin: 0;
+  font-size: 14px;
+}
+</style> 

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;