数据看板更新前后端

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>