✨ feat: 首页增加销售看板

2025-08-22 14:28:10 +08:00
parent 76926c3a10
commit 9361f0ea8d
9 changed files with 668 additions and 67 deletions
--- a/klp-ui/src/views/components/OrderDashboard.vue
+++ b/klp-ui/src/views/components/OrderDashboard.vue
@@ -0,0 +1,170 @@
+<template>
+  <div
+    class="order-analysis-dashboard"
+    v-loading="loading"
+  >
+    <!-- 业绩区 -->
+     <el-tabs v-model="activeTab" type="card">
+      <el-tab-pane label="业绩总览" name="performance">
+        <PerformanceArea mode="mini" :performance-area="dashboardData.performanceArea" />
+      </el-tab-pane>
+      <el-tab-pane label="订单统计" name="currentSituation">
+        <CurrentSituationArea mode="mini" :current-situation-area="dashboardData.currentSituationArea" />
+      </el-tab-pane>
+      <el-tab-pane label="采购推荐" name="recommendation">
+        <RecommendationArea mode="mini" :recommendation-area="dashboardData.recommendationArea" />
+      </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;
+  background-color: #f7f8fa;
+  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>