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>

    <!-- 业绩区 -->
    <el-row :gutter="20" class="section-row">
      <el-col :span="24">
        <div class="section-title">
          <h2>业绩区</h2>
          <p>产品销售情况、销售人员业绩、总订单数量</p>
        </div>
        <PerformanceArea :performance-area="dashboardData.performanceArea" />
      </el-col>
    </el-row>

    <!-- 当前情况区 -->
    <el-row :gutter="20" class="section-row">
      <el-col :span="24">
        <div class="section-title">
          <h2>情况区</h2>
          <p>订单所需的产品统计、根据参数计算的原料需求、原料库存和需求情况</p>
        </div>
        <CurrentSituationArea :current-situation-area="dashboardData.currentSituationArea" />
      </el-col>
    </el-row>

    <!-- 推荐区 -->
    <el-row :gutter="20" class="section-row">
      <el-col :span="24">
        <div class="section-title">
          <h2>推荐区</h2>
          <p>订单维度推荐、原料维度推荐</p>
        </div>
        <RecommendationArea :recommendation-area="dashboardData.recommendationArea" />
      </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 :controls=false controls-position="right" 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 PerformanceArea from './components/PerformanceArea.vue'
import CurrentSituationArea from './components/CurrentSituationArea.vue'
import RecommendationArea from './components/RecommendationArea.vue'
import { getDashboardData } from '@/api/wms/order'

export default {
  name: 'OrderAnalysisDashboard',
  components: {
    PerformanceArea,
    CurrentSituationArea,
    RecommendationArea,
  },
  data() {
    return {
      // 新的数据结构
      dashboardData: {
        performanceArea: {},
        currentSituationArea: {},
        recommendationArea: {}
      },
      // 新增定时刷新相关数据
      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.dashboardData = {
          performanceArea: data.performanceArea || {},
          currentSituationArea: data.currentSituationArea || {},
          recommendationArea: data.recommendationArea || {}
        }

      } catch (error) {
        console.error('获取数据看板数据失败:', error)
        this.$message.error('获取数据失败，请稍后重试')
      } 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;
  box-sizing: border-box;
}

.section-row {
  margin-bottom: 30px;
}

.section-title {
  margin-bottom: 20px;
  padding: 0 10px;
}

.section-title h2 {
  margin: 0 0 8px 0;
  font-size: 20px;
  font-weight: 600;
  color: #ddd;
}

.section-title p {
  margin: 0;
  font-size: 14px;
  color: #ccc;
}

.top-row,
.chart-row {
  margin-bottom: 20px;
}

.chart-row > .el-col {
  display: flex;
  flex-direction: column;
  justify-content: stretch;
}
</style>