From 63c8541bc5e2e0c73954145bc0960b1e1908590c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A0=82=E7=B3=96?= <qq2178503051@163.com>
Date: Tue, 22 Jul 2025 15:30:55 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B5=8B=E8=AF=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 klp-ui/src/api/wms/order.js                   |   8 +
 .../KLPService/UserSelect/index.vue           | 112 +++
 klp-ui/src/views/index.vue                    | 642 +++++++++++++-----
 .../wms/order/components/CustomerCluster.vue  | 105 +++
 .../wms/order/components/OrderCompletion.vue  | 121 ++++
 .../components/OrderMaterialAnalysis.vue      | 161 +++++
 .../wms/order/components/OrderSummary.vue     | 205 ++++++
 .../wms/order/components/ProductSales.vue     | 125 ++++
 klp-ui/src/views/wms/order/dashboard.vue      |  85 +++
 klp-ui/src/views/wms/order/index.vue          |  14 +-
 klp-ui/src/views/wms/product/index.vue        |  17 +-
 klp-ui/src/views/wms/purchasePlan/index.vue   |  20 +-
 .../panels/CreatePurchasePanel.vue            |   6 +-
 .../views/wms/purchasePlan/panels/detail.vue  |   6 +-
 14 files changed, 1426 insertions(+), 201 deletions(-)
 create mode 100644 klp-ui/src/components/KLPService/UserSelect/index.vue
 create mode 100644 klp-ui/src/views/wms/order/components/CustomerCluster.vue
 create mode 100644 klp-ui/src/views/wms/order/components/OrderCompletion.vue
 create mode 100644 klp-ui/src/views/wms/order/components/OrderMaterialAnalysis.vue
 create mode 100644 klp-ui/src/views/wms/order/components/OrderSummary.vue
 create mode 100644 klp-ui/src/views/wms/order/components/ProductSales.vue
 create mode 100644 klp-ui/src/views/wms/order/dashboard.vue

diff --git a/klp-ui/src/api/wms/order.js b/klp-ui/src/api/wms/order.js
index 37d96d74..7607b00d 100644
--- a/klp-ui/src/api/wms/order.js
+++ b/klp-ui/src/api/wms/order.js
@@ -42,3 +42,11 @@ export function delOrder(orderId) {
     method: 'delete'
   })
 }
+
+// dashboard 
+export function getDashboardData() {
+  return request({
+    url: '/wms/product/dashboard/overview',
+    method: 'get'
+  })
+}
\ No newline at end of file
diff --git a/klp-ui/src/components/KLPService/UserSelect/index.vue b/klp-ui/src/components/KLPService/UserSelect/index.vue
new file mode 100644
index 00000000..8a39408f
--- /dev/null
+++ b/klp-ui/src/components/KLPService/UserSelect/index.vue
@@ -0,0 +1,112 @@
+<template>
+  <el-select
+    v-model="selectedValue"
+    :multiple="multiple"
+    filterable
+    remote
+    :remote-method="handleSearch"
+    :loading="loading"
+    :placeholder="placeholder"
+    style="width: 100%"
+    @change="handleChange"
+    :clearable="clearable"
+  >
+    <el-option
+      v-for="user in filteredUsers"
+      :key="user.userId"
+      :label="`${user.nickName}（${user.dept && user.dept.deptName ? user.dept.deptName : '无部门'}）`"
+      :value="user.userId"
+    >
+      <span>{{ user.nickName }}</span>
+      <span style="color: #999; font-size: 12px; margin-left: 8px;">{{ user.dept && user.dept.deptName ? user.dept.deptName : '无部门' }}</span>
+    </el-option>
+  </el-select>
+</template>
+
+<script>
+import { selectUser } from '@/api/system/user'
+
+export default {
+  name: 'UserSelect',
+  props: {
+    value: {
+      type: [String, Number, Array],
+      default: null
+    },
+    multiple: {
+      type: Boolean,
+      default: false
+    },
+    placeholder: {
+      type: String,
+      default: '请选择用户'
+    },
+    clearable: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      userList: [],
+      loading: false,
+      searchKeyword: '',
+      filteredUsers: []
+    }
+  },
+  computed: {
+    selectedValue: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+        this.$emit('change', val)
+      }
+    }
+  },
+  watch: {
+    searchKeyword(val) {
+      this.filterUsers(val)
+    }
+  },
+  created() {
+    this.fetchUsers()
+  },
+  methods: {
+    fetchUsers() {
+      this.loading = true
+      selectUser({}).then(res => {
+        this.userList = res.data || res.rows || []
+        this.filteredUsers = this.userList
+        this.loading = false
+      }).catch(() => {
+        this.loading = false
+      })
+    },
+    handleSearch(query) {
+      this.searchKeyword = query
+    },
+    filterUsers(keyword) {
+      if (!keyword) {
+        this.filteredUsers = this.userList
+      } else {
+        const lower = keyword.toLowerCase()
+        this.filteredUsers = this.userList.filter(user => {
+          return (
+            (user.nickName && user.nickName.toLowerCase().includes(lower)) ||
+            (user.dept && user.dept.deptName && user.dept.deptName.toLowerCase().includes(lower))
+          )
+        })
+      }
+    },
+    handleChange(val) {
+      this.$emit('input', val)
+      this.$emit('change', val)
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>
diff --git a/klp-ui/src/views/index.vue b/klp-ui/src/views/index.vue
index e5ed3229..7417d8c4 100644
--- a/klp-ui/src/views/index.vue
+++ b/klp-ui/src/views/index.vue
@@ -1,191 +1,489 @@
-<template>
-  <div class="app-container home">
-    <el-row :gutter="20">
-      <el-col :sm="24" :lg="12" style="padding-left: 20px">
-        <h2>RuoYi-Vue-Plus后台管理框架</h2>
-        <p>
-          RuoYi-Vue-Plus 是基于 RuoYi-Vue 针对 分布式集群 场景升级(不兼容原框架)
-          <br/>
-          * 前端开发框架 Vue、Element UI<br/>
-          * 后端开发框架 Spring Boot<br/>
-          * 容器框架 Undertow 基于 XNIO 的高性能容器<br/>
-          * 权限认证框架 Sa-Token、Jwt 支持多终端认证系统<br/>
-          * 关系数据库 MySQL 适配 8.X 最低 5.7<br/>
-          * 关系数据库 Oracle 适配 11g 12c<br/>
-          * 关系数据库 PostgreSQL 适配 13 14<br/>
-          * 关系数据库 SQLServer 适配 2017 2019<br/>
-          * 缓存数据库 Redis 适配 6.X 最低 4.X<br/>
-          * 数据库框架 Mybatis-Plus 快速 CRUD 增加开发效率<br/>
-          * 数据库框架 p6spy 更强劲的 SQL 分析<br/>
-          * 多数据源框架 dynamic-datasource 支持主从与多种类数据库异构<br/>
-          * 序列化框架 Jackson 统一使用 jackson 高效可靠<br/>
-          * Redis客户端 Redisson 性能强劲、API丰富<br/>
-          * 分布式限流 Redisson 全局、请求IP、集群ID 多种限流<br/>
-          * 分布式锁 Lock4j 注解锁、工具锁 多种多样<br/>
-          * 分布式幂等 Redisson 拦截重复提交<br/>
-          * 分布式链路追踪 SkyWalking 支持链路追踪、网格分析、度量聚合、可视化<br/>
-          * 分布式任务调度 Xxl-Job 高性能 高可靠 易扩展<br/>
-          * 分布式文件存储 Minio 本地存储<br/>
-          * 分布式云存储 七牛、阿里、腾讯 云存储<br/>
-          * 监控框架 SpringBoot-Admin 全方位服务监控<br/>
-          * 校验框架 Validation 增强接口安全性 严谨性<br/>
-          * Excel框架 Alibaba EasyExcel 性能优异 扩展性强<br/>
-          * 文档框架 SpringDoc、javadoc 无注解零入侵基于java注释<br/>
-          * 工具类框架 Hutool、Lombok 减少代码冗余 增加安全性<br/>
-          * 代码生成器 适配MP、SpringDoc规范化代码 一键生成前后端代码<br/>
-          * 部署方式 Docker 容器编排 一键部署业务集群<br/>
-          * 国际化 SpringMessage Spring标准国际化方案<br/>
-        </p>
-        <p>
-          <b>当前版本:</b> <span>v{{ version }}</span>
-        </p>
-        <p>
-          <el-tag type="danger">&yen;免费开源</el-tag>
-        </p>
-        <p>
-          <el-button
-            type="primary"
-            size="mini"
-            icon="el-icon-cloudy"
-            plain
-            @click="goTarget('https://gitee.com/dromara/RuoYi-Vue-Plus')"
-            >访问码云</el-button
-          >
-          <el-button
-            type="primary"
-            size="mini"
-            icon="el-icon-cloudy"
-            plain
-            @click="goTarget('https://github.com/dromara/RuoYi-Vue-Plus')"
-          >访问GitHub</el-button
-          >
-          <el-button
-            type="primary"
-            size="mini"
-            icon="el-icon-cloudy"
-            plain
-            @click="goTarget('https://gitee.com/dromara/RuoYi-Vue-Plus/wikis/pages?sort_id=4106467&doc_id=1469725')"
-          >更新日志</el-button
-          >
-        </p>
-      </el-col>
+<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->
 
-      <el-col :sm="24" :lg="12" style="padding-left: 50px">
-        <el-row>
-          <el-col :span="12">
-            <h2>技术选型</h2>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="6">
-            <h4>后端技术</h4>
-            <ul>
-              <li>SpringBoot</li>
-              <li>Sa-Token</li>
-              <li>JWT</li>
-              <li>MyBatis</li>
-              <li>Druid</li>
-              <li>Jackson</li>
-              <li>...</li>
-            </ul>
-          </el-col>
-          <el-col :span="6">
-            <h4>前端技术</h4>
-            <ul>
-              <li>Vue</li>
-              <li>Vuex</li>
-              <li>Element-ui</li>
-              <li>Axios</li>
-              <li>Sass</li>
-              <li>Quill</li>
-              <li>...</li>
-            </ul>
-          </el-col>
-        </el-row>
-      </el-col>
-    </el-row>
-    <el-divider />
+<template>
+  <div class="dashboard-root">
+    <!-- 数据概览区 -->
+    <div class="data-overview">
+      <div v-for="(card, index) in dataCards" :key="index" 
+           class="data-card">
+        <div class="data-card-header">
+          <div>
+            <h3 class="data-card-title">{{ card.title }}</h3>
+            <p class="data-card-value">{{ card.value }}</p>
+          </div>
+          <i :class="['data-card-icon', card.icon, getIconColor(card.color)]"></i>
+        </div>
+        <div class="data-card-chart">
+          <div ref="charts" class="chart-inner"></div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 业务功能区 -->
+    <div class="business-modules">
+      <div v-for="(module, index) in businessModules" :key="index"
+           class="business-module">
+        <div class="business-module-header">
+          <div :class="['business-module-icon', getModuleBg(module.bgColor)]">
+            <i :class="['business-module-icon-inner', module.icon]"></i>
+          </div>
+          <div>
+            <h3 class="business-module-title">{{ module.title }}</h3>
+            <p class="business-module-desc">{{ module.description }}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 监控面板 -->
+    <div class="monitor-panel">
+      <div class="monitor-resource">
+        <h3 class="monitor-title">系统资源监控</h3>
+        <div class="monitor-resource-charts">
+          <div v-for="(chart, index) in resourceCharts" :key="index" class="monitor-resource-chart">
+            <div ref="resourceChart" class="chart-inner"></div>
+          </div>
+        </div>
+      </div>
+      <div class="monitor-records">
+        <h3 class="monitor-title">最近操作记录</h3>
+        <div class="monitor-records-list">
+          <div v-for="(record, index) in operationRecords" :key="index" 
+               class="monitor-record-item">
+            <div :class="['monitor-record-icon', getModuleBg(record.bgColor)]">
+              <i :class="['monitor-record-icon-inner', record.icon]"></i>
+            </div>
+            <div>
+              <p class="monitor-record-action">{{ record.action }}</p>
+              <p class="monitor-record-time">{{ record.time }}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
+import * as echarts from 'echarts';
+
 export default {
-  name: "Index",
   data() {
     return {
-      // 版本号
-      version: "0.8.3",
+      dataCards: [
+        {
+          title: '订单总量',
+          value: '2,384',
+          icon: 'fas fa-shopping-cart',
+          color: 'text-blue-500',
+          chartData: [30, 40, 20, 50, 40, 60, 70]
+        },
+        {
+          title: '库存总量',
+          value: '12,857',
+          icon: 'fas fa-box',
+          color: 'text-green-500',
+          chartData: [40, 30, 50, 40, 60, 50, 70]
+        },
+        {
+          title: '今日任务',
+          value: '48',
+          icon: 'fas fa-tasks',
+          color: 'text-yellow-500',
+          chartData: [20, 40, 30, 50, 40, 60, 50]
+        },
+        {
+          title: '系统状态',
+          value: '正常',
+          icon: 'fas fa-server',
+          color: 'text-purple-500',
+          chartData: [50, 30, 40, 50, 60, 70, 60]
+        }
+      ],
+      businessModules: [
+        {
+          title: '仓库管理',
+          description: '库存管理与货位管理',
+          icon: 'fas fa-warehouse',
+          bgColor: 'bg-blue-500'
+        },
+        {
+          title: '订单处理',
+          description: '订单审核与发货管理',
+          icon: 'fas fa-clipboard-check',
+          bgColor: 'bg-green-500'
+        },
+        {
+          title: '人员管理',
+          description: '员工信息与权限管理',
+          icon: 'fas fa-users',
+          bgColor: 'bg-yellow-500'
+        },
+        {
+          title: '数据分析',
+          description: '业务数据可视化分析',
+          icon: 'fas fa-chart-line',
+          bgColor: 'bg-purple-500'
+        },
+        {
+          title: '设备管理',
+          description: '仓储设备维护管理',
+          icon: 'fas fa-tools',
+          bgColor: 'bg-red-500'
+        },
+        {
+          title: '系统设置',
+          description: '系统参数配置管理',
+          icon: 'fas fa-cog',
+          bgColor: 'bg-indigo-500'
+        }
+      ],
+      resourceCharts: [
+        { name: 'CPU使用率', value: 65 },
+        { name: '内存使用率', value: 45 },
+        { name: '存储使用率', value: 78 },
+        { name: '网络使用率', value: 32 }
+      ],
+      operationRecords: [
+        {
+          action: '张经理审批了采购订单 #38271',
+          time: '10分钟前',
+          icon: 'fas fa-check',
+          bgColor: 'bg-green-500'
+        },
+        {
+          action: '李工程师更新了系统配置',
+          time: '25分钟前',
+          icon: 'fas fa-cog',
+          bgColor: 'bg-blue-500'
+        },
+        {
+          action: '王主管确认了入库单 #92731',
+          time: '40分钟前',
+          icon: 'fas fa-box',
+          bgColor: 'bg-yellow-500'
+        },
+        {
+          action: '系统完成了日常数据备份',
+          time: '1小时前',
+          icon: 'fas fa-database',
+          bgColor: 'bg-purple-500'
+        },
+        {
+          action: '陈经理导出了月度报表',
+          time: '2小时前',
+          icon: 'fas fa-file-export',
+          bgColor: 'bg-indigo-500'
+        }
+      ]
     };
   },
-  methods: {
-    goTarget(href) {
-      window.open(href, "_blank");
-    },
+  mounted() {
+    this.initCharts();
+    this.initResourceCharts();
   },
+  methods: {
+    getIconColor(color) {
+      // 统一映射为自定义 class
+      switch (color) {
+        case 'text-blue-500': return 'icon-blue';
+        case 'text-green-500': return 'icon-green';
+        case 'text-yellow-500': return 'icon-yellow';
+        case 'text-purple-500': return 'icon-purple';
+        default: return '';
+      }
+    },
+    getModuleBg(bgColor) {
+      switch (bgColor) {
+        case 'bg-blue-500': return 'bg-blue';
+        case 'bg-green-500': return 'bg-green';
+        case 'bg-yellow-500': return 'bg-yellow';
+        case 'bg-purple-500': return 'bg-purple';
+        case 'bg-red-500': return 'bg-red';
+        case 'bg-indigo-500': return 'bg-indigo';
+        default: return '';
+      }
+    },
+    initCharts() {
+      this.$nextTick(() => {
+        const charts = document.querySelectorAll('.chart-inner');
+        this.dataCards.forEach((card, index) => {
+          const chart = echarts.init(charts[index]);
+          const option = {
+            animation: false,
+            grid: {
+              left: 0,
+              right: 0,
+              top: 0,
+              bottom: 0
+            },
+            xAxis: {
+              type: 'category',
+              show: false
+            },
+            yAxis: {
+              type: 'value',
+              show: false
+            },
+            series: [{
+              data: card.chartData,
+              type: 'line',
+              smooth: true,
+              showSymbol: false,
+              lineStyle: {
+                color: this.getColor(index)
+              },
+              areaStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                  offset: 0,
+                  color: this.getColor(index, 0.2)
+                }, {
+                  offset: 1,
+                  color: this.getColor(index, 0.1)
+                }])
+              }
+            }]
+          };
+          chart.setOption(option);
+        });
+      });
+    },
+    initResourceCharts() {
+      this.$nextTick(() => {
+        const charts = document.querySelectorAll('.monitor-resource-chart .chart-inner');
+        this.resourceCharts.forEach((item, index) => {
+          const chart = echarts.init(charts[index]);
+          const option = {
+            animation: false,
+            series: [{
+              type: 'gauge',
+              startAngle: 90,
+              endAngle: -270,
+              pointer: {
+                show: false
+              },
+              progress: {
+                show: true,
+                overlap: false,
+                roundCap: true,
+                clip: false,
+                itemStyle: {
+                  color: this.getColor(index)
+                }
+              },
+              axisLine: {
+                lineStyle: {
+                  width: 18
+                }
+              },
+              splitLine: {
+                show: false
+              },
+              axisTick: {
+                show: false
+              },
+              axisLabel: {
+                show: false
+              },
+              title: {
+                offsetCenter: [0, '70%'],
+                fontSize: 14,
+                color: '#666'
+              },
+              detail: {
+                offsetCenter: [0, '0%'],
+                valueAnimation: true,
+                formatter: '{value}% ',
+                color: '#666'
+              },
+              data: [{
+                value: item.value,
+                name: item.name
+              }]
+            }]
+          };
+          chart.setOption(option);
+        });
+      });
+    },
+    getColor(index, alpha = 1) {
+      const colors = [
+        `rgba(59, 130, 246, ${alpha})`,
+        `rgba(34, 197, 94, ${alpha})`,
+        `rgba(234, 179, 8, ${alpha})`,
+        `rgba(168, 85, 247, ${alpha})`
+      ];
+      return colors[index % colors.length];
+    }
+  }
 };
 </script>
 
-<style scoped lang="scss">
-.home {
-  blockquote {
-    padding: 10px 20px;
-    margin: 0 0 20px;
-    font-size: 17.5px;
-    border-left: 5px solid #eee;
-  }
-  hr {
-    margin-top: 20px;
-    margin-bottom: 20px;
-    border: 0;
-    border-top: 1px solid #eee;
-  }
-  .col-item {
-    margin-bottom: 20px;
-  }
+<style scoped>
+.dashboard-root {
+  min-height: 100vh;
+  background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
+  padding: 32px;
+}
+.data-overview {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 24px;
+  margin-bottom: 32px;
+}
+.data-card {
+  padding: 24px;
+  border-radius: 16px;
+  backdrop-filter: blur(4px);
+  background: rgba(255,255,255,0.8);
+  box-shadow: 0 4px 24px 0 rgba(0,0,0,0.06);
+  border: 1px solid rgba(255,255,255,0.2);
+  transition: transform 0.2s;
+}
+.data-card:hover {
+  transform: scale(1.02);
+}
+.data-card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 16px;
+}
+.data-card-title {
+  color: #6b7280;
+  font-size: 14px;
+  margin-bottom: 4px;
+}
+.data-card-value {
+  font-size: 24px;
+  font-weight: 600;
+}
+.data-card-icon {
+  font-size: 24px;
+}
+.icon-blue { color: #3b82f6; }
+.icon-green { color: #22c55e; }
+.icon-yellow { color: #eab308; }
+.icon-purple { color: #a855f7; }
+.data-card-chart {
+  height: 48px;
+  width: 100%;
+}
+.chart-inner {
+  width: 100%;
+  height: 100%;
+}
 
-  ul {
-    padding: 0;
-    margin: 0;
-  }
+.business-modules {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 24px;
+  margin-bottom: 32px;
+}
+.business-module {
+  padding: 24px;
+  border-radius: 16px;
+  background: linear-gradient(135deg, #fff 0%, #f3f4f6 100%);
+  box-shadow: 0 4px 24px 0 rgba(0,0,0,0.06);
+  border: 1px solid rgba(255,255,255,0.2);
+  transition: box-shadow 0.2s;
+  cursor: pointer;
+}
+.business-module:hover {
+  box-shadow: 0 8px 32px 0 rgba(0,0,0,0.10);
+}
+.business-module-header {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+.business-module-icon {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.business-module-icon-inner {
+  font-size: 24px;
+  color: #fff;
+}
+.bg-blue { background: #3b82f6; }
+.bg-green { background: #22c55e; }
+.bg-yellow { background: #eab308; }
+.bg-purple { background: #a855f7; }
+.bg-red { background: #ef4444; }
+.bg-indigo { background: #6366f1; }
+.business-module-title {
+  font-size: 18px;
+  font-weight: 500;
+  margin-bottom: 4px;
+}
+.business-module-desc {
+  color: #6b7280;
+  font-size: 14px;
+}
 
-  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
-  font-size: 13px;
-  color: #676a6c;
-  overflow-x: hidden;
-
-  ul {
-    list-style-type: none;
-  }
-
-  h4 {
-    margin-top: 0px;
-  }
-
-  h2 {
-    margin-top: 10px;
-    font-size: 26px;
-    font-weight: 100;
-  }
-
-  p {
-    margin-top: 10px;
-
-    b {
-      font-weight: 700;
-    }
-  }
-
-  .update-log {
-    ol {
-      display: block;
-      list-style-type: decimal;
-      margin-block-start: 1em;
-      margin-block-end: 1em;
-      margin-inline-start: 0;
-      margin-inline-end: 0;
-      padding-inline-start: 40px;
-    }
-  }
+.monitor-panel {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 24px;
+}
+.monitor-resource, .monitor-records {
+  padding: 24px;
+  border-radius: 16px;
+  background: #fff;
+  box-shadow: 0 4px 24px 0 rgba(0,0,0,0.06);
+}
+.monitor-title {
+  font-size: 18px;
+  font-weight: 500;
+  margin-bottom: 24px;
+}
+.monitor-resource-charts {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 16px;
+}
+.monitor-resource-chart {
+  height: 160px;
+}
+.monitor-records-list {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+.monitor-record-item {
+  display: flex;
+  align-items: center;
+  padding: 12px;
+  border-radius: 12px;
+  transition: background 0.2s;
+}
+.monitor-record-item:hover {
+  background: #f9fafb;
+}
+.monitor-record-icon {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 16px;
+}
+.monitor-record-icon-inner {
+  font-size: 14px;
+  color: #fff;
+}
+.monitor-record-action {
+  font-size: 14px;
+  font-weight: 500;
+}
+.monitor-record-time {
+  font-size: 12px;
+  color: #6b7280;
 }
 </style>
 
diff --git a/klp-ui/src/views/wms/order/components/CustomerCluster.vue b/klp-ui/src/views/wms/order/components/CustomerCluster.vue
new file mode 100644
index 00000000..cc443f4a
--- /dev/null
+++ b/klp-ui/src/views/wms/order/components/CustomerCluster.vue
@@ -0,0 +1,105 @@
+<template>
+  <div class="customer-cluster">
+    <el-card shadow="hover">
+      <div class="chart-title">客户群体聚类分析</div>
+      <div ref="chart" class="chart-container"></div>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+export default {
+  name: 'CustomerCluster',
+  props: {
+    customerCluster: {
+      type: Array,
+      required: true,
+      default: () => []
+    }
+  },
+  data () {
+    return {
+      chartInstance: null,
+      chartOptions: {
+        tooltip: {
+          trigger: 'item',
+          formatter: (params) => {
+            return `客户名称: ${params.data[2]}<br />购买频次: ${params.data[0]}<br />客单价: ${params.data[1]}`
+          }
+        },
+        xAxis: { name: '购买频次' },
+        yAxis: { name: '客单价' },
+        series: [
+          {
+            symbolSize: 10,
+            type: 'scatter',
+            data: []
+          }
+        ]
+      }
+    }
+  },
+  watch: {
+    customerCluster: {
+      immediate: true,
+      handler(newVal) {
+        this.updateChart()
+      }
+    }
+  },
+  mounted () {
+    this.initChart()
+  },
+  beforeDestroy () {
+    if (this.chartInstance) {
+      this.chartInstance.dispose()
+    }
+    window.removeEventListener('resize', this.handleResize)
+  },
+  methods: {
+    initChart () {
+      const chartDom = this.$refs.chart
+      if (!chartDom) return
+      this.chartInstance = echarts.init(chartDom)
+      this.updateChart()
+      window.addEventListener('resize', this.handleResize)
+    },
+    updateChart () {
+      if (!this.chartInstance) return
+      // 格式化数据
+      const chartData = this.customerCluster.map(item => [item.purchaseFreq, item.avgOrderAmount, item.customerName])
+      this.chartOptions.series[0].data = chartData
+      this.chartInstance.setOption(this.chartOptions)
+    },
+    handleResize () {
+      if (this.chartInstance) {
+        this.chartInstance.resize()
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.customer-cluster {
+  width: 100%;
+  height: 100%;
+}
+.chart-title {
+  font-size: 18px;
+  font-weight: bold;
+  margin-bottom: 8px;
+}
+.chart-container {
+  width: 100%;
+  height: 400px;
+}
+.el-card {
+  border-radius: 16px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+}
+</style>
diff --git a/klp-ui/src/views/wms/order/components/OrderCompletion.vue b/klp-ui/src/views/wms/order/components/OrderCompletion.vue
new file mode 100644
index 00000000..1c65754e
--- /dev/null
+++ b/klp-ui/src/views/wms/order/components/OrderCompletion.vue
@@ -0,0 +1,121 @@
+<template>
+  <div class="completion-chart">
+    <el-card shadow="hover">
+      <div class="chart-title">订单完成率</div>
+      <div ref="chart" class="chart-container"></div>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+export default {
+  name: 'OrderCompletion',
+  props: {
+    completionRate: {
+      type: Number,
+      required: true,
+      default: 0
+    }
+  },
+  data () {
+    return {
+      notRate:0,
+      chartInstance: null
+    }
+  },
+  watch: {
+    completionRate: {
+      immediate: true,
+      handler(newVal) {
+        this.updateChart()
+      }
+    }
+  },
+  mounted () {
+    this.initChart()
+  },
+  beforeDestroy () {
+    if (this.chartInstance) {
+      this.chartInstance.dispose()
+    }
+    window.removeEventListener('resize', this.handleResize)
+  },
+  methods: {
+    initChart () {
+      const chartDom = this.$refs.chart
+      if (!chartDom) return
+      this.chartInstance = echarts.init(chartDom)
+      this.updateChart()
+      window.addEventListener('resize', this.handleResize)
+    },
+    updateChart () {
+      if (!this.chartInstance) return
+      this.notRate = 100 - this.completionRate
+      let option =  {
+        tooltip: {
+          trigger: 'item',
+          formatter: '{a} <br/>{b}: {c}%'
+        },
+        legend: {
+          top: '8%',
+          left: 'center',
+          data: ['完成率', '未完成']
+        },
+        series: [
+          {
+            name: '订单完成率',
+            type: 'pie',
+            radius: '60%',
+            center: ['50%', '55%'],
+            data: [
+              {value: this.completionRate, name: '已完成'},
+              {value: this.notRate, name: '未完成'}
+            ],
+            label: {
+              formatter: '{b}: {c}%',
+              fontSize: 14,
+            },
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: 'rgba(0, 0, 0, 0.5)'
+              }
+            }
+          }
+        ]
+      }
+      this.chartInstance.setOption(option)
+    },
+    handleResize () {
+      if (this.chartInstance) {
+        this.chartInstance.resize()
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.completion-chart {
+  width: 100%;
+  height: 100%;
+}
+.chart-title {
+  font-size: 18px;
+  font-weight: bold;
+  margin-bottom: 8px;
+}
+.chart-container {
+  width: 100%;
+  height: 400px;
+}
+.el-card {
+  border-radius: 16px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+}
+</style>
diff --git a/klp-ui/src/views/wms/order/components/OrderMaterialAnalysis.vue b/klp-ui/src/views/wms/order/components/OrderMaterialAnalysis.vue
new file mode 100644
index 00000000..2944ddab
--- /dev/null
+++ b/klp-ui/src/views/wms/order/components/OrderMaterialAnalysis.vue
@@ -0,0 +1,161 @@
+<template>
+  <el-card shadow="hover" class="order-material-analysis">
+    <div slot="header" class="card-header">订单物料分析</div>
+    <div ref="chart" class="chart-container"></div>
+  </el-card>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+export default {
+  name: 'OrderMaterialAnalysis',
+  props: {
+    materialInfo: {
+      type: Object,
+      required: true,
+      default: () => ({
+        categories: [],
+        usageFrequency: [],
+        stockQuantity: [],
+        bundleRate: [],
+        purchaseCycle: [],
+        yAxisUsageMax: 0
+      })
+    }
+  },
+  data() {
+    return {
+      chartInstance: null
+    }
+  },
+  watch: {
+    materialInfo: {
+      deep: true,
+      immediate: true,
+      handler() {
+        this.updateChart()
+      }
+    }
+  },
+  mounted() {
+    this.initChart()
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.resizeChart)
+    if (this.chartInstance) {
+      this.chartInstance.dispose()
+      this.chartInstance = null
+    }
+  },
+  methods: {
+    initChart() {
+      if (!this.chartInstance) {
+        this.chartInstance = echarts.init(this.$refs.chart)
+      }
+      this.updateChart()
+      window.addEventListener('resize', this.resizeChart)
+    },
+    updateChart() {
+      if (!this.chartInstance) return
+      const info = this.materialInfo
+      const option = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: { type: 'shadow' }
+        },
+        legend: {
+          data: ['使用频次', '库存量', '捆绑率', '采购周期'],
+          bottom: 0
+        },
+        xAxis: {
+          type: 'category',
+          data: info.categories,
+          axisTick: { alignWithLabel: true }
+        },
+        yAxis: [
+          {
+            type: 'value',
+            name: '数量',
+            min: 0,
+            max: info.yAxisUsageMax,
+            interval: Math.ceil((info.yAxisUsageMax || 1) / 4),
+            position: 'left',
+            axisLine: { lineStyle: { color: '#3a85ff' } },
+            axisLabel: { formatter: '{value}' }
+          },
+          {
+            type: 'value',
+            name: '百分比',
+            min: 0,
+            max: 100,
+            interval: 20,
+            position: 'right',
+            axisLine: { lineStyle: { color: '#ffb300' } },
+            axisLabel: { formatter: '{value}%'}
+          }
+        ],
+        series: [
+          {
+            name: '使用频次',
+            type: 'bar',
+            data: info.usageFrequency,
+            itemStyle: { color: '#3a85ff' }
+          },
+          {
+            name: '库存量',
+            type: 'bar',
+            data: info.stockQuantity,
+            itemStyle: { color: '#52c41a' }
+          },
+          {
+            name: '捆绑率',
+            type: 'line',
+            yAxisIndex: 1,
+            data: info.bundleRate,
+            lineStyle: { color: '#ffc107', width: 2 },
+            smooth: true,
+            symbol: 'circle',
+            symbolSize: 8
+          },
+          {
+            name: '采购周期',
+            type: 'line',
+            yAxisIndex: 1,
+            data: info.purchaseCycle,
+            lineStyle: { color: '#ff5722', width: 2 },
+            smooth: true,
+            symbol: 'circle',
+            symbolSize: 8
+          }
+        ]
+      }
+      this.chartInstance.setOption(option, { notMerge: true })
+    },
+    resizeChart() {
+      if (this.chartInstance) {
+        this.chartInstance.resize()
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.order-material-analysis {
+  height: 500px;
+  display: flex;
+  flex-direction: column;
+}
+
+.card-header {
+  font-weight: bold;
+  font-size: 16px;
+  padding-bottom: 10px;
+}
+
+.chart-container {
+  flex-grow: 1;
+  min-height: 280px;
+  width: 100%;
+}
+</style>
diff --git a/klp-ui/src/views/wms/order/components/OrderSummary.vue b/klp-ui/src/views/wms/order/components/OrderSummary.vue
new file mode 100644
index 00000000..a46079be
--- /dev/null
+++ b/klp-ui/src/views/wms/order/components/OrderSummary.vue
@@ -0,0 +1,205 @@
+<template>
+  <div class="order-summary">
+    <div class="summary-container">
+      <!-- 总订单数 -->
+      <div class="summary-box total-orders">
+        <div class="content-left">
+          <div class="summary-title">总订单数</div>
+          <div class="summary-value">
+            <strong>{{ dataInfo.totalOrders.toLocaleString() }}</strong>
+            <span class="growth">
+              <svg class="arrow-up" viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="#38c172" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
+                <polyline points="6 15 12 9 18 15"></polyline>
+              </svg>
+              12.5%
+            </span>
+          </div>
+        </div>
+        <div class="icon-bg blue">
+          <svg viewBox="0 0 24 24" width="28" height="28" fill="#2f86f6">
+            <path d="M7 18c-1.1 0-2-.9-2-2s.9-2 2-2h10v-4H7V7H5v3c0 1.1.9 2 2 2v6z"></path>
+            <circle cx="18" cy="18" r="2"></circle>
+          </svg>
+        </div>
+      </div>
+
+      <!-- 本月完成订单 -->
+      <div class="summary-box completed-orders">
+        <div class="content-left">
+          <div class="summary-title">本月完成订单</div>
+          <div class="summary-value">
+            <strong>{{ dataInfo.completedThisMonth.toLocaleString() }}</strong>
+            <span class="growth">
+              <svg class="arrow-up" viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="#38c172" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
+                <polyline points="6 15 12 9 18 15"></polyline>
+              </svg>
+              8.3%
+            </span>
+          </div>
+        </div>
+        <div class="icon-bg green">
+          <svg viewBox="0 0 24 24" width="28" height="28" fill="#38c172">
+            <polyline points="20 6 9 17 4 12" stroke="#38c172" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" />
+          </svg>
+        </div>
+      </div>
+
+      <!-- 订单完成度 -->
+      <div class="summary-box completion-rate">
+        <div class="content-left">
+          <div class="summary-title">订单完成度</div>
+          <div class="summary-value">
+            <strong>{{ dataInfo.completionRate.toFixed(1) }}%</strong>
+            <span class="growth">
+              <svg class="arrow-up" viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="#38c172" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
+                <polyline points="6 15 12 9 18 15"></polyline>
+              </svg>
+              2.1%
+            </span>
+          </div>
+        </div>
+        <div class="icon-bg yellow">
+          <svg viewBox="0 0 24 24" width="28" height="28" fill="#f6bb42">
+            <path d="M4 12h16M4 12a8 8 0 0116 0M12 4v8l4 4" stroke="#f6bb42" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'OrderSummary',
+  props: {
+    dataInfo: {
+      type: Object,
+      required: true,
+      default: () => ({ totalOrders: 0, completedThisMonth: 0, completionRate: 0 })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.order-summary {
+  width: 100%;
+  padding: 10px 0;
+  box-sizing: border-box;
+}
+
+.summary-container {
+  display: flex;
+  justify-content: space-between;
+  gap: 15px; /* 卡片之间间距 */
+  width: 100%;
+}
+
+.summary-box {
+  flex: 1 1 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 24px 30px;
+  border-radius: 16px;
+  box-shadow: 0 6px 20px rgba(31, 47, 70, 0.08);
+  cursor: default;
+  background: #fff;
+  user-select: none;
+  transition: box-shadow 0.3s ease;
+  min-width: 0; /* 防止子元素过大撑破flex */
+}
+
+.summary-box:hover {
+  box-shadow: 0 10px 32px rgba(31, 47, 70, 0.14);
+}
+
+.content-left {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-width: 0;
+}
+
+.summary-title {
+  font-size: 14px;
+  color: #5a5a5a;
+  margin-bottom: 6px;
+  user-select: text;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.summary-value {
+  display: flex;
+  align-items: center;
+  font-weight: 700;
+  font-size: 32px;
+  color: #222;
+  user-select: text;
+  min-width: 0;
+  white-space: nowrap;
+}
+
+.summary-value strong {
+  margin-right: 10px;
+  font-weight: 900;
+}
+
+.growth {
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  color: #38c172;
+  white-space: nowrap;
+}
+
+.arrow-up {
+  margin-right: 4px;
+  stroke: #38c172;
+  fill: none;
+}
+
+.icon-bg {
+  flex-shrink: 0;
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+  background-color: rgba(0, 0, 0, 0.05);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  user-select: none;
+  box-shadow: 0 4px 12px rgba(47, 134, 246, 0.25);
+}
+
+.total-orders {
+  background: linear-gradient(135deg, #d5e7ff 0%, #ffffff 100%);
+  color: #0d3b73;
+}
+
+.total-orders .icon-bg {
+  background-color: rgba(47, 134, 246, 0.15);
+  box-shadow: 0 4px 12px rgba(47, 134, 246, 0.25);
+}
+
+.completed-orders {
+  background: linear-gradient(135deg, #e7f5e8 0%, #ffffff 100%);
+  color: #1f6d28;
+}
+
+.completed-orders .icon-bg {
+  background-color: rgba(56, 193, 114, 0.15);
+  box-shadow: 0 4px 12px rgba(56, 193, 114, 0.25);
+}
+
+.completion-rate {
+  background: linear-gradient(135deg, #fff6e1 0%, #ffffff 100%);
+  color: #7a5a00;
+}
+
+.completion-rate .icon-bg {
+  background-color: rgba(246, 187, 66, 0.15);
+  box-shadow: 0 4px 12px rgba(246, 187, 66, 0.25);
+}
+</style>
diff --git a/klp-ui/src/views/wms/order/components/ProductSales.vue b/klp-ui/src/views/wms/order/components/ProductSales.vue
new file mode 100644
index 00000000..30e0bead
--- /dev/null
+++ b/klp-ui/src/views/wms/order/components/ProductSales.vue
@@ -0,0 +1,125 @@
+<template>
+  <div class="product-sales-chart">
+    <el-card shadow="hover">
+      <div class="chart-title">产品销量排行</div>
+      <div ref="chart" class="chart-container"></div>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+export default {
+  name: 'ProductSales',
+  props: {
+    productSales: {
+      type: Array,
+      required: true,
+      default: () => []
+    }
+  },
+  data () {
+    return {
+      chartInstance: null,
+      chartOptions: {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        grid: {
+          left: '10%',
+          right: '10%',
+          bottom: '10%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          data: []
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: [
+          {
+            name: '销量',
+            type: 'bar',
+            data: [],
+            barWidth: '40%',
+            label: {
+              show: true,
+              position: 'top'
+            },
+            emphasis: {
+              focus: 'series'
+            }
+          }
+        ]
+      }
+    }
+  },
+  watch: {
+    productSales: {
+      immediate: true,
+      handler(newVal) {
+        this.updateChart()
+      }
+    }
+  },
+  mounted () {
+    this.initChart()
+  },
+  beforeDestroy () {
+    if (this.chartInstance) {
+      this.chartInstance.dispose()
+    }
+    window.removeEventListener('resize', this.handleResize)
+  },
+  methods: {
+    initChart () {
+      const chartDom = this.$refs.chart
+      if (!chartDom) return
+      this.chartInstance = echarts.init(chartDom)
+      this.updateChart()
+      window.addEventListener('resize', this.handleResize)
+    },
+    updateChart () {
+      if (!this.chartInstance) return
+      const dataAxis = this.productSales.map(item => item.productName)
+      const totalData = this.productSales.map(item => item.totalProductCount)
+      this.chartOptions.xAxis.data = dataAxis
+      this.chartOptions.series[0].data = totalData
+      this.chartInstance.setOption(this.chartOptions)
+    },
+    handleResize () {
+      if (this.chartInstance) {
+        this.chartInstance.resize()
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.product-sales-chart {
+  width: 100%;
+  height: 100%;
+}
+.chart-title {
+  font-size: 18px;
+  font-weight: bold;
+  margin-bottom: 8px;
+}
+.chart-container {
+  width: 100%;
+  height: 400px;
+}
+.el-card {
+  border-radius: 16px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+}
+</style>
diff --git a/klp-ui/src/views/wms/order/dashboard.vue b/klp-ui/src/views/wms/order/dashboard.vue
new file mode 100644
index 00000000..a3010b8b
--- /dev/null
+++ b/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>
diff --git a/klp-ui/src/views/wms/order/index.vue b/klp-ui/src/views/wms/order/index.vue
index f640df07..fa84827b 100644
--- a/klp-ui/src/views/wms/order/index.vue
+++ b/klp-ui/src/views/wms/order/index.vue
@@ -71,8 +71,17 @@
           icon="el-icon-download"
           size="mini"
           @click="handleExport"
-          
         >导出</el-button>
+        
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          size="mini"
+          @click="goDashboard"
+          
+        >订单分析</el-button>
       </el-col>
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
@@ -231,6 +240,9 @@ export default {
         this.loading = false;
       });
     },
+    goDashboard() {
+      this.$router.push('/wms/order/dashboard');
+    },
     /** 推荐采购计划确认 */
     handleRecommendConfirm(data) {
       console.log('推荐采购计划数据:', data);
diff --git a/klp-ui/src/views/wms/product/index.vue b/klp-ui/src/views/wms/product/index.vue
index 07a397cf..ca38ee91 100644
--- a/klp-ui/src/views/wms/product/index.vue
+++ b/klp-ui/src/views/wms/product/index.vue
@@ -17,13 +17,8 @@
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="负责人" prop="owner">
-        <el-input
-          v-model="queryParams.owner"
-          placeholder="请输入负责人"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
+      <el-form-item label="销售经理" prop="salesManager">
+        <UserSelect v-model="queryParams.salesManager" :multiple="false" placeholder="请选择销售经理" />
       </el-form-item>
       <el-form-item label="基础材质" prop="baseMaterialId">
         <CategorySelect v-model="queryParams.baseMaterialId" categoryType="base_material" placeholder="请选择基础材质分类" clearable />
@@ -177,8 +172,8 @@
             </el-form-item>
           </el-col>
           <el-col :span="12">
-            <el-form-item label="负责人" prop="owner">
-              <el-input v-model="form.owner" placeholder="请输入负责人" />
+            <el-form-item label="销售经理" prop="salesManager">
+              <UserSelect v-model="form.salesManager" :multiple="false" placeholder="请选择销售经理" />
             </el-form-item>
           </el-col>
           <el-col :span="12">
@@ -255,12 +250,14 @@
 import { listProduct, getProduct, delProduct, addProduct, updateProduct } from "@/api/wms/product";
 import CategorySelect from '@/components/KLPService/CategorySelect';
 import CategoryRenderer from '@/components/KLPService/Renderer/CategoryRenderer.vue';
+import UserSelect from '@/components/KLPService/UserSelect';
 
 export default {
   name: "Product",
   components: {
     CategorySelect,
-    CategoryRenderer
+    CategoryRenderer,
+    UserSelect
   },
   dicts: ['common_swicth'],
   data() {
diff --git a/klp-ui/src/views/wms/purchasePlan/index.vue b/klp-ui/src/views/wms/purchasePlan/index.vue
index 4f8cdd0a..ddc565d2 100644
--- a/klp-ui/src/views/wms/purchasePlan/index.vue
+++ b/klp-ui/src/views/wms/purchasePlan/index.vue
@@ -10,12 +10,7 @@
         />
       </el-form-item>
       <el-form-item label="负责人" prop="owner">
-        <el-input
-          v-model="queryParams.owner"
-          placeholder="请输入负责人"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
+        <UserSelect v-model="queryParams.owner" :multiple="false" placeholder="请选择负责人" clearable />
       </el-form-item>
       <el-form-item label="关联订单ID" prop="orderId">
         <el-input
@@ -128,7 +123,7 @@
           <el-input v-model="form.planCode" placeholder="请输入采购计划编号" />
         </el-form-item>
         <el-form-item label="负责人" prop="owner">
-          <el-input v-model="form.owner" placeholder="请输入负责人" />
+          <UserSelect v-model="form.owner" :multiple="false" placeholder="请选择负责人" />
         </el-form-item>
         <el-form-item label="关联订单ID" prop="orderId">
           <el-input v-model="form.orderId" placeholder="请输入关联订单ID" />
@@ -163,12 +158,7 @@
           />
         </el-form-item>
         <el-form-item label="销售经理" prop="salesManager">
-          <el-input
-            v-model="orderQueryParams.salesManager"
-            placeholder="请输入销售经理"
-            clearable
-            @keyup.enter.native="handleOrderQuery"
-          />
+          <UserSelect v-model="orderQueryParams.salesManager" :multiple="false" placeholder="请选择销售经理" clearable />
         </el-form-item>
         <el-form-item label="订单状态" prop="orderStatus">
           <el-select v-model="orderQueryParams.orderStatus" placeholder="请选择订单状态" clearable>
@@ -268,13 +258,15 @@ import PurchasePlanClac from "./panels/clac.vue";
 import PurchasePlanDetail from "./panels/detail.vue";
 import CreatePurchasePanel from "./panels/CreatePurchasePanel.vue";
 import { EOrderStatus } from "../../../utils/enums";
+import UserSelect from '@/components/KLPService/UserSelect'
 
 export default {
   name: "PurchasePlan",
   components: {
     PurchasePlanClac,
     PurchasePlanDetail,
-    CreatePurchasePanel
+    CreatePurchasePanel,
+    UserSelect
   },
   dicts: ['order_status'],
   data() {
diff --git a/klp-ui/src/views/wms/purchasePlan/panels/CreatePurchasePanel.vue b/klp-ui/src/views/wms/purchasePlan/panels/CreatePurchasePanel.vue
index 0ab03932..7b4f39f1 100644
--- a/klp-ui/src/views/wms/purchasePlan/panels/CreatePurchasePanel.vue
+++ b/klp-ui/src/views/wms/purchasePlan/panels/CreatePurchasePanel.vue
@@ -8,7 +8,7 @@
           <el-input v-model="mainForm.planCode" placeholder="请输入计划编号" style="width: 200px;" />
         </el-form-item>
         <el-form-item label="负责人" prop="owner">
-          <el-input v-model="mainForm.owner" placeholder="请输入负责人" style="width: 200px;" />
+          <UserSelect v-model="mainForm.owner" :multiple="false" placeholder="请选择负责人" style="width: 200px;" />
         </el-form-item>
         <el-form-item label="备注" prop="remark">
           <el-input v-model="mainForm.remark" placeholder="请输入备注" style="width: 300px;" />
@@ -77,7 +77,7 @@
           </el-table-column>
           <el-table-column prop="owner" label="负责人">
             <template #default="scope">
-              <el-input v-model="scope.row.owner" size="small" />
+              <UserSelect v-model="scope.row.owner" :multiple="false" placeholder="请选择负责人" size="small" />
             </template>
           </el-table-column>
           <el-table-column prop="remark" label="备注">
@@ -97,9 +97,11 @@
 <script>
 import { createPurchasePlan } from '@/api/wms/purchasePlan'
 import { listRawMaterial } from '@/api/wms/rawMaterial'
+import UserSelect from '@/components/KLPService/UserSelect'
 
 export default {
   name: 'CreatePurchasePanel',
+  components: { UserSelect },
   props: {
     orderId: {
       type: [String, Number],
diff --git a/klp-ui/src/views/wms/purchasePlan/panels/detail.vue b/klp-ui/src/views/wms/purchasePlan/panels/detail.vue
index aa898eb6..3b3adbc1 100644
--- a/klp-ui/src/views/wms/purchasePlan/panels/detail.vue
+++ b/klp-ui/src/views/wms/purchasePlan/panels/detail.vue
@@ -132,7 +132,7 @@
           <RawMaterialSelect v-model="form.rawMaterialId" placeholder="请选择原材料" @change="onRawMaterialChange" />
         </el-form-item>
         <el-form-item label="负责人" prop="owner">
-          <el-input v-model="form.owner" placeholder="请输入负责人" />
+          <UserSelect v-model="form.owner" :multiple="false" placeholder="请选择负责人" />
         </el-form-item>
         <el-form-item label="计划采购数量" prop="quantity">
           <el-input v-model="form.quantity" placeholder="请输入计划采购数量" />
@@ -164,12 +164,14 @@ import { listPurchasePlanDetail, getPurchasePlanDetail, delPurchasePlanDetail, a
 import { EPurchaseDetailStatus } from "@/utils/enums";
 import StockInDialog from "./stockin.vue";
 import RawMaterialSelect from '@/components/KLPService/RawMaterialSelect';
+import UserSelect from '@/components/KLPService/UserSelect'
 
 export default {
   name: "PurchasePlanDetail",
   components: {
     StockInDialog,
-    RawMaterialSelect
+    RawMaterialSelect,
+    UserSelect
   },
   props: {
     planId: {