klp-oa/klp-ui/src/views/components/OrderDashboard.vue

<template>
  <div
    class="order-analysis-dashboard"
    v-loading="loading"
  >
    <!-- 业绩区 -->
     <el-tabs v-model="activeTab">
      <el-tab-pane label="业绩总览" name="performance">
        <PerformanceArea mode="mini" :performance-area="dashboardData.performanceArea" />
      </el-tab-pane>
     </el-tabs>
  </div>
</template>

<script>
import PerformanceArea from '@/views/wms/order/components/PerformanceArea.vue'
import CurrentSituationArea from '@/views/wms/order/components/CurrentSituationArea.vue'
import RecommendationArea from '@/views/wms/order/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,
      activeTab: 'performance'
    }
  },
  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: #303133;
}

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

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

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