Merge remote-tracking branch 'origin/0.8.X' into 0.8.X

2025-07-23 16:04:39 +08:00
parent 7db38923c9 c28fe1a741
commit 811490efa4
15 changed files with 748 additions and 143 deletions
--- a/klp-ui/src/router/index.js
+++ b/klp-ui/src/router/index.js
@@ -70,7 +70,7 @@ export const constantRoutes = [
        path: 'index',
        component: () => import('@/views/index'),
        name: 'Index',
-        meta: { title: '首页', icon: 'dashboard', affix: true }
+        meta: { title: '工作台', icon: 'dashboard', affix: true }
      }
    ]
  },
--- a/klp-ui/src/store/getters.js
+++ b/klp-ui/src/store/getters.js
@@ -8,6 +8,7 @@ const getters = {
  token: state => state.user.token,
  avatar: state => state.user.avatar,
  name: state => state.user.name,
+  avatar: state => state.user.avatar,
  introduction: state => state.user.introduction,
  roles: state => state.user.roles,
  permissions: state => state.user.permissions,
--- a/klp-ui/src/views/components/AllApplications.vue
+++ b/klp-ui/src/views/components/AllApplications.vue
@@ -0,0 +1,149 @@
+<template>
+  <div class="all-applications-container">
+    <h3 class="title">全部应用</h3>
+    <el-tabs v-model="activeTabName" class="app-tabs">
+      <el-tab-pane
+        v-for="menu in filteredMenus"
+        :key="menu.path"
+        :label="menu.meta.title"
+        :name="menu.path"
+      >
+        <div class="app-grid">
+          <div
+            v-for="child in menu.children"
+            :key="child.path"
+            class="app-item"
+            @click="handleAppClick(menu, child)"
+          >
+            <div class="app-icon-wrapper">
+              <svg-icon :icon-class="child.meta.icon || 'documentation'" class="app-icon" />
+            </div>
+            <span class="app-name">{{ child.meta.title }}</span>
+          </div>
+        </div>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script>
+import { getRouters } from '@/api/menu'
+import path from 'path'
+
+export default {
+  name: 'AllApplications',
+  data() {
+    return {
+      allMenus: [],
+      activeTabName: ''
+    }
+  },
+  computed: {
+    filteredMenus() {
+      const filterHidden = (menus) => {
+        return menus
+          .filter(menu => menu.hidden !== true)
+          .map(menu => {
+            if (menu.children) {
+              menu.children = filterHidden(menu.children)
+            }
+            return menu
+          })
+      }
+      const topLevelMenus = filterHidden(this.allMenus).filter(
+        menu => menu.children && menu.children.length > 0
+      )
+      return topLevelMenus
+    }
+  },
+  created() {
+    this.fetchMenus()
+  },
+  methods: {
+    fetchMenus() {
+      getRouters().then(response => {
+        this.allMenus = response.data
+        if (this.filteredMenus.length > 0) {
+          this.activeTabName = this.filteredMenus[0].path
+        }
+      })
+    },
+    handleAppClick(parentMenu, childMenu) {
+      const basePath = parentMenu.path
+      const fullPath = path.resolve(basePath, childMenu.path)
+      this.$router.push(fullPath)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.all-applications-container {
+  background-color: #fff;
+  padding: 20px;
+  border-radius: 8px;
+  margin-top: 20px;
+}
+
+.title {
+  font-size: 18px;
+  font-weight: 600;
+  margin-bottom: 16px;
+  color: #303133;
+}
+
+.app-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+  gap: 20px;
+  padding-top: 10px;
+}
+
+.app-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  cursor: pointer;
+  padding: 10px;
+  border-radius: 8px;
+  transition: background-color 0.3s ease;
+
+  &:hover {
+    background-color: #f5f7fa;
+  }
+}
+
+.app-icon-wrapper {
+  width: 56px;
+  height: 56px;
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 10px;
+  background-color: #f0f5ff;
+}
+
+.app-icon {
+  font-size: 28px;
+  color: #409eff;
+}
+
+.app-name {
+  font-size: 14px;
+  color: #606266;
+  text-align: center;
+}
+
+::v-deep .el-tabs__header {
+  margin-bottom: 0;
+}
+
+::v-deep .el-tabs__nav-wrap::after {
+  height: 1px;
+}
+
+::v-deep .el-tabs__item {
+  font-size: 15px;
+}
+</style> 
--- a/klp-ui/src/views/index.vue
+++ b/klp-ui/src/views/index.vue
@@ -2,6 +2,14 @@

 <template>
  <div class="dashboard-root">
+     <!-- 第一行：头像+欢迎语 -->
+    <div class="user-greeting-row">
+      <img :src="avatar" class="user-avatar" alt="头像" />
+      <div class="greeting-text">
+        <div class="greeting-title">{{ greeting }}，{{ name }}</div>
+        <div class="greeting-desc">愿你天黑有灯，下雨有伞</div>
+      </div>
+    </div>
    <!-- 数据概览区 -->
    <div class="data-overview">
      <div v-for="(card, index) in dataCards" :key="index" 
@@ -22,21 +30,16 @@
    <!-- 业务功能区 -->
    <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>
+           class="business-module" @click="handleLink(module.link)">
+        <div :class="['business-module-icon', getModuleBg(module.bgColor)]">
+          <i :class="module.icon"></i>
        </div>
+        <h3 class="business-module-title">{{ module.title }}</h3>
      </div>
    </div>

    <!-- 监控面板 -->
-    <div class="monitor-panel">
+    <!-- <div class="monitor-panel">
      <div class="monitor-resource">
        <h3 class="monitor-title">系统资源监控</h3>
        <div class="monitor-resource-charts">
@@ -60,38 +63,48 @@
          </div>
        </div>
      </div>
-    </div>
+    </div> -->
+
+    <!-- 全部应用 -->
+    <AllApplications />
  </div>
 </template>

 <script>
 import * as echarts from 'echarts';
+import AllApplications from '@/views/components/AllApplications.vue';

 export default {
+  components: {
+    AllApplications
+  },
  data() {
    return {
+      avatar: '',
+      name: '',
+      greeting: '',
      dataCards: [
        {
          title: '订单总量',
          value: '2,384',
          icon: 'fas fa-shopping-cart',
          color: 'text-blue-500',
-          chartData: [30, 40, 20, 50, 40, 60, 70]
+          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]
+          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: '正常',
@@ -105,37 +118,43 @@ export default {
          title: '仓库管理',
          description: '库存管理与货位管理',
          icon: 'fas fa-warehouse',
-          bgColor: 'bg-blue-500'
+          bgColor: 'bg-blue-500',
+          link: '/wms/stock'
        },
        {
          title: '订单处理',
          description: '订单审核与发货管理',
          icon: 'fas fa-clipboard-check',
-          bgColor: 'bg-green-500'
+          bgColor: 'bg-green-500',
+          link: '/wms/order'
        },
        {
          title: '人员管理',
          description: '员工信息与权限管理',
          icon: 'fas fa-users',
-          bgColor: 'bg-yellow-500'
+          bgColor: 'bg-yellow-500',
+          link: '/system/user'
        },
        {
-          title: '数据分析',
-          description: '业务数据可视化分析',
+          title: '订单分析',
+          description: '订单数据可视化分析',
          icon: 'fas fa-chart-line',
-          bgColor: 'bg-purple-500'
+          bgColor: 'bg-purple-500',
+          link: '/wms/order/dashboard'
        },
        {
-          title: '设备管理',
-          description: '仓储设备维护管理',
+          title: '出库入库',
+          description: '出库入库管理',
          icon: 'fas fa-tools',
-          bgColor: 'bg-red-500'
+          bgColor: 'bg-red-500',
+          link: '/wms/stcokIo'
        },
        {
          title: '系统设置',
          description: '系统参数配置管理',
          icon: 'fas fa-cog',
-          bgColor: 'bg-indigo-500'
+          bgColor: 'bg-indigo-500',
+          link: '/system/menu'
        }
      ],
      resourceCharts: [
@@ -181,6 +200,9 @@ export default {
  mounted() {
    this.initCharts();
    this.initResourceCharts();
+    this.avatar = this.$store.getters.avatar;
+    this.name = this.$store.getters.name;
+    this.greeting = this.getGreeting();
  },
  methods: {
    getIconColor(color) {
@@ -193,6 +215,19 @@ export default {
        default: return '';
      }
    },
+    handleLink(item) {
+      this.$router.push(item);
+    },
+    getGreeting() {
+      const hour = new Date().getHours();
+      if (hour < 6) return '凌晨好';
+      if (hour < 9) return '早上好';
+      if (hour < 12) return '上午好';
+      if (hour < 14) return '中午好';
+      if (hour < 18) return '下午好';
+      if (hour < 21) return '晚上好';
+      return '夜深了';
+    },
    getModuleBg(bgColor) {
      switch (bgColor) {
        case 'bg-blue-500': return 'bg-blue';
@@ -376,37 +411,36 @@ export default {

 .business-modules {
  display: grid;
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(6, 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;
+  display: flex;
+  align-items: center;
+  padding: 16px;
+  border-radius: 12px;
+  background: #fff;
+  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.05);
+  transition: all 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;
+  box-shadow: 0 4px 16px 0 rgba(0,0,0,0.1);
+  transform: translateY(-2px);
 }
 .business-module-icon {
-  width: 48px;
-  height: 48px;
-  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
+  flex-shrink: 0;
+  margin-right: 12px;
 }
-.business-module-icon-inner {
-  font-size: 24px;
+.business-module-icon i {
+  font-size: 20px;
  color: #fff;
 }
 .bg-blue { background: #3b82f6; }
@@ -416,13 +450,9 @@ export default {
 .bg-red { background: #ef4444; }
 .bg-indigo { background: #6366f1; }
 .business-module-title {
-  font-size: 18px;
+  font-size: 16px;
  font-weight: 500;
-  margin-bottom: 4px;
-}
-.business-module-desc {
-  color: #6b7280;
-  font-size: 14px;
+  color: #303133;
 }

 .monitor-panel {
@@ -485,5 +515,41 @@ export default {
  font-size: 12px;
  color: #6b7280;
 }
+.user-greeting-row {
+  display: flex;
+  align-items: center;
+  gap: 24px;
+  margin-bottom: 24px;
+}
+.user-avatar {
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  object-fit: cover;
+  border: 2px solid #e0e0e0;
+  background: #fff;
+}
+.greeting-text {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+.greeting-title {
+  font-size: 28px;
+  font-weight: 600;
+  color: #333;
+}
+.greeting-desc {
+  font-size: 16px;
+  color: #888;
+  margin-top: 4px;
+}
+</style>
+<style>
+.business-module-header,
+.business-module-icon-inner,
+.business-module-desc {
+  display: none;
+}
 </style>

--- a/klp-ui/src/views/wms/order/components/CustomerRegion.vue
+++ b/klp-ui/src/views/wms/order/components/CustomerRegion.vue
@@ -0,0 +1,103 @@
+<template>
+  <div class="chart-container">
+    <div ref="chart" style="width: 100%; height: 400px;"></div>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+
+export default {
+  name: 'CustomerRegion',
+  props: {
+    customerData: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  watch: {
+    customerData: {
+      deep: true,
+      handler(val) {
+        if (val) {
+          this.initChart()
+        }
+      }
+    }
+  },
+  mounted() {
+    this.initChart()
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      if (!this.$refs.chart) return
+      this.chart = echarts.init(this.$refs.chart)
+      const option = {
+        title: {
+          text: '客户区域分布',
+          left: 'center'
+        },
+        tooltip: {
+          trigger: 'item',
+          formatter: '{a} <br/>{b}: {c} ({d}%)'
+        },
+        legend: {
+          orient: 'vertical',
+          left: 10,
+          data: this.customerData.map(item => item.region)
+        },
+        series: [
+          {
+            name: '客户数量',
+            type: 'pie',
+            radius: ['50%', '70%'],
+            avoidLabelOverlap: false,
+            label: {
+              show: false,
+              position: 'center'
+            },
+            emphasis: {
+              label: {
+                show: true,
+                fontSize: '30',
+                fontWeight: 'bold'
+              }
+            },
+            labelLine: {
+              show: false
+            },
+            data: this.customerData.map(item => ({
+              name: item.region,
+              value: item.customerCount
+            }))
+          }
+        ]
+      }
+      this.chart.setOption(option)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.chart-container {
+  background-color: #ffffff;
+  border-radius: 8px;
+  padding: 20px;
+  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
+  height: 100%;
+  box-sizing: border-box;
+}
+</style> 
--- a/klp-ui/src/views/wms/order/components/MaterialAnalysis.vue
+++ b/klp-ui/src/views/wms/order/components/MaterialAnalysis.vue
@@ -0,0 +1,117 @@
+<template>
+  <div class="chart-container">
+    <div ref="chart" style="width: 100%; height: 400px;"></div>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+
+export default {
+  name: 'MaterialAnalysis',
+  props: {
+    materialData: {
+      type: Object,
+      default: () => ({
+        categories: [],
+        usageFrequency: [],
+        stockQuantity: [],
+        purchaseCycle: []
+      })
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  watch: {
+    materialData: {
+      deep: true,
+      handler(val) {
+        if (val) {
+          this.initChart()
+        }
+      }
+    }
+  },
+  mounted() {
+    this.initChart()
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      if (!this.$refs.chart) return
+      this.chart = echarts.init(this.$refs.chart)
+      const option = {
+        title: {
+          text: '物料使用分析',
+          left: 'center'
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross'
+          }
+        },
+        legend: {
+          data: ['使用频率', '库存量', '采购周期'],
+          top: 30
+        },
+        xAxis: {
+          type: 'category',
+          data: this.materialData.categories
+        },
+        yAxis: [
+          {
+            type: 'value',
+            name: '数量/频率',
+            position: 'left'
+          },
+          {
+            type: 'value',
+            name: '采购周期(天)',
+            position: 'right'
+          }
+        ],
+        series: [
+          {
+            name: '使用频率',
+            type: 'bar',
+            data: this.materialData.usageFrequency
+          },
+          {
+            name: '库存量',
+            type: 'bar',
+            data: this.materialData.stockQuantity
+          },
+          {
+            name: '采购周期',
+            type: 'line',
+            yAxisIndex: 1,
+            data: this.materialData.purchaseCycle
+          }
+        ]
+      }
+      this.chart.setOption(option)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.chart-container {
+  background-color: #ffffff;
+  border-radius: 8px;
+  padding: 20px;
+  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
+  height: 100%;
+  box-sizing: border-box;
+}
+</style> 
--- a/klp-ui/src/views/wms/order/components/OrderSummary.vue
+++ b/klp-ui/src/views/wms/order/components/OrderSummary.vue
@@ -6,12 +6,12 @@
        <div class="content-left">
          <div class="summary-title">总订单数</div>
          <div class="summary-value">
-            <strong>{{ dataInfo.totalOrders.toLocaleString() }}</strong>
+            <strong>{{ dataInfo.totalOrderCount.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%
+              {{ dataInfo.totalOrderCountGrowthRate }}%
            </span>
          </div>
        </div>
@@ -28,12 +28,12 @@
        <div class="content-left">
          <div class="summary-title">本月完成订单</div>
          <div class="summary-value">
-            <strong>{{ dataInfo.completedThisMonth.toLocaleString() }}</strong>
+            <strong>{{ dataInfo.monthFinishedOrderCount.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%
+              {{ dataInfo.monthFinishedOrderCountGrowthRate }}%
            </span>
          </div>
        </div>
@@ -49,12 +49,12 @@
        <div class="content-left">
          <div class="summary-title">订单完成度</div>
          <div class="summary-value">
-            <strong>{{ dataInfo.completionRate.toFixed(1) }}%</strong>
+            <strong>{{ dataInfo.finishedRate.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%
+              {{ dataInfo.finishedRateGrowthRate }}%
            </span>
          </div>
        </div>
@@ -74,7 +74,14 @@ export default {
    dataInfo: {
      type: Object,
      required: true,
-      default: () => ({ totalOrders: 0, completedThisMonth: 0, completionRate: 0 })
+      default: () => ({
+        totalOrderCount: 0,
+        monthFinishedOrderCount: 0,
+        finishedRate: 0,
+        totalOrderCountGrowthRate: 0,
+        monthFinishedOrderCountGrowthRate: 0,
+        finishedRateGrowthRate: 0,
+      })
    }
  }
 }
--- a/klp-ui/src/views/wms/order/components/ProductSales.vue
+++ b/klp-ui/src/views/wms/order/components/ProductSales.vue
@@ -1,14 +1,17 @@
 <template>
  <div class="product-sales-chart">
    <el-card shadow="hover">
-      <div class="chart-title">产品销量排行</div>
-      <div ref="chart" class="chart-container"></div>
+      <div v-if="!productSales || productSales.length === 0" class="no-data-placeholder">
+        暂无产品销量数据
+      </div>
+      <div v-show="productSales && productSales.length > 0" ref="chart" class="chart-container"></div>
    </el-card>
  </div>
 </template>

 <script>
 import * as echarts from 'echarts'
+
 export default {
  name: 'ProductSales',
  props: {
@@ -18,81 +21,131 @@ export default {
      default: () => []
    }
  },
-  data () {
+  data() {
    return {
-      chartInstance: null,
-      chartOptions: {
+      chartInstance: null
+    }
+  },
+  watch: {
+    productSales: {
+      deep: true,
+      handler(newVal) {
+        if (newVal && newVal.length > 0) {
+          // Use nextTick to ensure the DOM is updated before rendering the chart
+          this.$nextTick(() => {
+            this.renderChart(newVal)
+          })
+        }
+      }
+    }
+  },
+  mounted() {
+    // The watcher handles the initial render.
+    // Add resize listener.
+    window.addEventListener('resize', this.handleResize)
+  },
+  beforeDestroy() {
+    // Dispose chart instance and remove listener
+    if (this.chartInstance) {
+      this.chartInstance.dispose()
+      this.chartInstance = null
+    }
+    window.removeEventListener('resize', this.handleResize)
+  },
+  methods: {
+    renderChart(data) {
+      const chartDom = this.$refs.chart
+      if (!chartDom) return
+
+      // Initialize chart instance if it doesn't exist
+      if (!this.chartInstance) {
+        this.chartInstance = echarts.init(chartDom)
+      }
+
+      // Resize the chart to fit the container, especially after v-show makes it visible
+      this.chartInstance.resize()
+
+      const productNames = data.map(item => item.productName)
+      const salesData = data.map(item => item.totalSales)
+
+      const option = {
+        title: {
+          text: '产品销量排行',
+          left: 'center',
+          textStyle: {
+            color: '#333',
+            fontWeight: 'bold',
+            fontSize: 18
+          }
+        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
-          }
+          },
+          formatter: '{b}: {c}件'
        },
        grid: {
-          left: '10%',
-          right: '10%',
-          bottom: '10%',
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
-          data: []
+          data: productNames,
+          axisLabel: {
+            interval: 0,
+            rotate: 30,
+            color: '#666'
+          }
        },
        yAxis: {
-          type: 'value'
+          type: 'value',
+          axisLine: {
+            show: true
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              type: 'dashed'
+            }
+          }
        },
        series: [
          {
            name: '销量',
            type: 'bar',
-            data: [],
-            barWidth: '40%',
+            data: salesData,
+            barWidth: '60%',
            label: {
              show: true,
-              position: 'top'
+              position: 'top',
+              color: '#333'
+            },
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: '#83bff6' },
+                { offset: 0.5, color: '#188df0' },
+                { offset: 1, color: '#188df0' }
+              ])
            },
            emphasis: {
-              focus: 'series'
+              focus: 'series',
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: '#2378f7' },
+                  { offset: 0.7, color: '#2378f7' },
+                  { offset: 1, color: '#83bff6' }
+                ])
+              }
            }
          }
        ]
      }
-    }
-  },
-  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)
+      this.chartInstance.setOption(option, true) // Use true to clear previous canvas
    },
-    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 () {
+    handleResize() {
      if (this.chartInstance) {
        this.chartInstance.resize()
      }
@@ -106,15 +159,18 @@ export default {
  width: 100%;
  height: 100%;
 }
-.chart-title {
-  font-size: 18px;
-  font-weight: bold;
-  margin-bottom: 8px;
-}
 .chart-container {
  width: 100%;
  height: 400px;
 }
+.no-data-placeholder {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 400px;
+  color: #909399;
+  font-size: 16px;
+}
 .el-card {
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
--- a/klp-ui/src/views/wms/order/dashboard.vue
+++ b/klp-ui/src/views/wms/order/dashboard.vue
@@ -1,13 +1,22 @@
 <template>
-  <div class="order-analysis-dashboard">
+  <div
+    class="order-analysis-dashboard"
+    v-loading="loading"
+  >
+    <!-- 顶部操作栏：刷新和定时刷新设置按钮 -->
+    <el-row :gutter="20" class="top-row" style="margin-bottom: 0;">
+      <el-col :span="24" style="display: flex; justify-content: flex-end; align-items: center; margin-bottom: 10px;">
+        <el-button type="primary" icon="el-icon-refresh" @click="handleRefresh">刷新</el-button>
+        <el-button icon="el-icon-setting" style="margin-left: 10px;" @click="drawerVisible = true">定时刷新设置</el-button>
+      </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>
-
-    <!-- 第二行：3 个图表 -->
+    <!-- 第一行图表 -->
    <el-row :gutter="20" class="chart-row">
      <el-col :span="8">
        <OrderCompletion :completion-rate="orderSummaryData.completionRate" />
@@ -16,8 +25,29 @@
        <ProductSales :product-sales="productSalesData" />
      </el-col>
      <el-col :span="8">
+        <CustomerRegion :customer-data="customerClusterData" />
      </el-col>
    </el-row>
+    <!-- 定时刷新设置抽屉 -->
+    <el-drawer
+      title="定时刷新设置"
+      :visible.sync="drawerVisible"
+      direction="rtl"
+      size="350px"
+    >
+      <el-form label-width="100px">
+        <el-form-item label="启用定时刷新">
+          <el-switch v-model="autoRefresh" />
+        </el-form-item>
+        <el-form-item label="刷新间隔(秒)">
+          <el-input-number v-model="refreshInterval" :min="5" :max="3600" :step="1" :disabled="!autoRefresh" />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="saveRefreshSetting">保存</el-button>
+          <el-button @click="drawerVisible = false">取消</el-button>
+        </el-form-item>
+      </el-form>
+    </el-drawer>
  </div>
 </template>

@@ -25,6 +55,7 @@
 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 { getDashboardData } from '@/api/wms/order'

 export default {
@@ -33,6 +64,7 @@ export default {
    OrderSummary,
    OrderCompletion,
    ProductSales,
+    CustomerRegion,
  },
  data() {
    return {
@@ -42,24 +74,93 @@ export default {
        completionRate: 0
      },
      productSalesData: [],
-      materialAnalysisData: {
-        categories: [],
-        usageFrequency: [],
-        stockQuantity: [],
-        bundleRate: [],
-        purchaseCycle: [],
-        yAxisUsageMax: 0
-      },
-      customerClusterData: []
+      customerClusterData: [],
+      // 新增定时刷新相关数据
+      drawerVisible: false,
+      autoRefresh: false,
+      refreshInterval: 30, // 默认30秒
+      refreshTimer: null,
+      loading: false
    }
  },
  created() {
    this.fetchAllData()
+    this.loadRefreshSetting()
+    this.startAutoRefresh()
+  },
+  beforeDestroy() {
+    this.clearAutoRefresh()
  },
  methods: {
    async fetchAllData() {
-      const res = await getDashboardData()
-      console.log(res)
+      this.loading = true
+      try {
+        const res = await getDashboardData()
+        const data = res
+        this.orderSummaryData = {
+          totalOrders: data.orderSummary.totalOrderCount,
+          completedThisMonth: data.orderSummary.monthFinishedOrderCount,
+          completionRate: data.orderSummary.finishedRate,
+          ...data.orderSummary
+        }
+        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)
+        }
+      } finally {
+        this.loading = false
+      }
+    },
+    handleRefresh() {
+      this.fetchAllData()
+    },
+    // 定时刷新相关
+    startAutoRefresh() {
+      this.clearAutoRefresh()
+      if (this.autoRefresh) {
+        this.refreshTimer = setInterval(() => {
+          this.fetchAllData()
+        }, this.refreshInterval * 1000)
+      }
+    },
+    clearAutoRefresh() {
+      if (this.refreshTimer) {
+        clearInterval(this.refreshTimer)
+        this.refreshTimer = null
+      }
+    },
+    saveRefreshSetting() {
+      // 可持久化到localStorage
+      localStorage.setItem('orderDashboardAutoRefresh', JSON.stringify({
+        autoRefresh: this.autoRefresh,
+        refreshInterval: this.refreshInterval
+      }))
+      this.drawerVisible = false
+      this.startAutoRefresh()
+    },
+    loadRefreshSetting() {
+      const setting = localStorage.getItem('orderDashboardAutoRefresh')
+      if (setting) {
+        const { autoRefresh, refreshInterval } = JSON.parse(setting)
+        this.autoRefresh = autoRefresh
+        this.refreshInterval = refreshInterval
+      }
+    }
+  },
+  watch: {
+    autoRefresh(val) {
+      if (!val) {
+        this.clearAutoRefresh()
+      }
+    },
+    refreshInterval(val) {
+      if (this.autoRefresh) {
+        this.startAutoRefresh()
+      }
    }
  }
 }
--- a/klp-ui/src/views/wms/product/index.vue
+++ b/klp-ui/src/views/wms/product/index.vue
@@ -17,8 +17,8 @@
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
-      <el-form-item label="销售经理" prop="salesManager">
-        <UserSelect v-model="queryParams.salesManager" :multiple="false" placeholder="请选择销售经理" />
+      <el-form-item label="owner" prop="salesManager">
+        <el-input v-model="queryParams.owner" :multiple="false" placeholder="请选择销售经理" />
      </el-form-item>
      <el-form-item label="基础材质" prop="baseMaterialId">
        <CategorySelect v-model="queryParams.baseMaterialId" categoryType="base_material" placeholder="请选择基础材质分类" clearable />
@@ -172,8 +172,8 @@
            </el-form-item>
          </el-col>
          <el-col :span="12">
-            <el-form-item label="销售经理" prop="salesManager">
-              <UserSelect v-model="form.salesManager" :multiple="false" placeholder="请选择销售经理" />
+            <el-form-item label="负责人" prop="owner">
+              <el-input v-model="form.owner" :multiple="false" placeholder="请选择负责人" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
--- a/klp-ui/src/views/wms/purchasePlan/index.vue
+++ b/klp-ui/src/views/wms/purchasePlan/index.vue
@@ -10,7 +10,7 @@
        />
      </el-form-item>
      <el-form-item label="负责人" prop="owner">
-        <UserSelect v-model="queryParams.owner" :multiple="false" placeholder="请选择负责人" clearable />
+        <el-input v-model="queryParams.owner" :multiple="false" placeholder="请选择负责人" clearable />
      </el-form-item>
      <el-form-item label="关联订单ID" prop="orderId">
        <el-input
@@ -82,7 +82,7 @@
      <el-table-column label="采购计划编号" align="center" prop="planCode" />
      <el-table-column label="负责人" align="center" prop="owner" />
      <!-- <el-table-column label="关联订单ID" align="center" prop="orderId" /> -->
-      <el-table-column label="状态" align="center" prop="status" />
+      <!-- <el-table-column label="状态" align="center" prop="status" /> -->
      <el-table-column label="备注" align="center" prop="remark" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
@@ -123,7 +123,7 @@
          <el-input v-model="form.planCode" placeholder="请输入采购计划编号" />
        </el-form-item>
        <el-form-item label="负责人" prop="owner">
-          <UserSelect v-model="form.owner" :multiple="false" placeholder="请选择负责人" />
+          <el-input 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" />
@@ -158,7 +158,7 @@
          />
        </el-form-item>
        <el-form-item label="销售经理" prop="salesManager">
-          <UserSelect v-model="orderQueryParams.salesManager" :multiple="false" placeholder="请选择销售经理" clearable />
+          <el-input 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>
--- 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">
-          <UserSelect v-model="mainForm.owner" :multiple="false" placeholder="请选择负责人" style="width: 200px;" />
+          <el-input 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">
-              <UserSelect v-model="scope.row.owner" :multiple="false" placeholder="请选择负责人" size="small" />
+              <el-input v-model="scope.row.owner" :multiple="false" placeholder="请选择负责人" size="small" />
            </template>
          </el-table-column>
          <el-table-column prop="remark" label="备注">
--- 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">
-          <UserSelect v-model="form.owner" :multiple="false" placeholder="请选择负责人" />
+          <el-input v-model="form.owner" :multiple="false" placeholder="请选择负责人" />
        </el-form-item>
        <el-form-item label="计划采购数量" prop="quantity">
          <el-input v-model="form.quantity" placeholder="请输入计划采购数量" />
--- a/klp-ui/src/views/wms/rawMaterial/index.vue
+++ b/klp-ui/src/views/wms/rawMaterial/index.vue
@@ -113,7 +113,6 @@

    <el-table v-loading="loading" :data="rawMaterialList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="主键ID" align="center" prop="rawMaterialId" v-if="true"/>
      <el-table-column label="原材料编号" align="center" prop="rawMaterialCode" />
      <el-table-column label="原材料名称" align="center" prop="rawMaterialName" />
      <el-table-column label="计量单位" align="center" prop="unit" />
--- a/klp-wms/src/main/java/com/klp/service/impl/WmsPurchasePlanServiceImpl.java
+++ b/klp-wms/src/main/java/com/klp/service/impl/WmsPurchasePlanServiceImpl.java
@@ -12,6 +12,7 @@ import com.klp.domain.WmsPurchasePlanDetail;
 import com.klp.domain.vo.WmsOrderDetailVo;
 import com.klp.domain.vo.WmsPurchasePlanDetailVo;
 import com.klp.mapper.WmsPurchasePlanDetailMapper;
+import com.klp.mapper.WmsRawMaterialMapper;
 import com.klp.service.*;
 import lombok.RequiredArgsConstructor;
 import org.springframework.beans.BeanUtils;
@@ -47,6 +48,9 @@ public class WmsPurchasePlanServiceImpl implements IWmsPurchasePlanService {
    @Resource
    private  WmsPurchasePlanDetailMapper wmsPurchasePlanDetailMapper;

+    @Resource
+    private WmsRawMaterialMapper wmsRawMaterialMapper;
+
    @Transactional
    @Override
    public Boolean insertWithDetails(WmsPurchasePlanVo planVo) {
@@ -80,6 +84,8 @@ public class WmsPurchasePlanServiceImpl implements IWmsPurchasePlanService {
                vo.setRawMaterialId(bom.getRawMaterialId());
                vo.setQuantity(vo.getQuantity() == null ? needQty : vo.getQuantity().add(needQty));
                vo.setUnit(bom.getUnit());
+                vo.setRawMaterialName(wmsRawMaterialMapper.selectById(bom.getRawMaterialId()).getRawMaterialName());
+                vo.setRawMaterialCode(wmsRawMaterialMapper.selectById(bom.getRawMaterialId()).getRawMaterialCode());
                materialMap.put(bom.getRawMaterialId(), vo);
            }
        }