klp-oa/klp-ui/src/views/wms/order/dashboard.vue

<template>
  <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>
    <!-- 第一行图表 -->
    <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">
        <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>

<script>
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 {
  name: 'OrderAnalysisDashboard',
  components: {
    OrderSummary,
    OrderCompletion,
    ProductSales,
    CustomerRegion,
  },
  data() {
    return {
      orderSummaryData: {
        totalOrders: 0,
        completedThisMonth: 0,
        completionRate: 0
      },
      productSalesData: [],
      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() {
      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()
      }
    }
  }
}
</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>