变更首页

2025-07-22 16:28:43 +08:00
parent 4422ca9099
commit 93d2618022
9 changed files with 731 additions and 131 deletions
--- 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()
+      }
    }
  }
 }