变更首页

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()
+      }
     }
   }
 }