✨ feat: 数据大屏

gear-ui3/src/views/dashboard/home.vue

@@ -0,0 +1,93 @@
+<template>
+  <!-- 布局组件：传入状态与方法 -->
+  <DashboardLayout
+    :title="title"
+    :loading="loading"
+    :is-refreshing="isRefreshing"
+    :handle-back="handleBack"
+    :handle-refresh="handleRefresh"
+  >
+    <!-- 图表网格组件：传入数据源 -->
+    <DashboardChartsGrid
+      :orders="orders"
+      :order-details="orderDetails"
+      :customers="customers"
+      :return-exchanges="returnExchanges"
+      :is-refreshing="isRefreshing"
+    />
+  </DashboardLayout>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { useRouter } from 'vue-router';
+import { ElMessage } from 'element-plus';
+
+// 导入子组件
+import DashboardLayout from './layout/index.vue';
+import DashboardChartsGrid from './grid/index.vue';
+
+// API 请求（业务逻辑）
+import { listOrder } from '@/api/wms/order';
+import { listOrderDetail } from '@/api/wms/orderDetail';
+import { listReturnExchange } from '@/api/oa/returnExchange';
+import { listCustomer } from '@/api/wms/customer';
+
+// 路由实例
+const router = useRouter();
+
+// 1. 页面状态（供子组件使用）
+const title = ref('销售数据可视化大屏');
+const loading = ref(false); // 加载态（全屏加载）
+const isRefreshing = ref(false); // 刷新动画状态
+
+// 2. 图表数据源（供图表组件使用）
+const customers = ref([]);
+const orders = ref([]);
+const orderDetails = ref([]);
+const returnExchanges = ref([]);
+
+// 3. 生命周期：页面初始化加载数据
+onMounted(() => {
+  fetchAllData();
+});
+
+// 4. 核心方法：统一请求所有数据
+const fetchAllData = async () => {
+  try {
+    loading.value = true;
+    // 并行请求（提升加载效率）
+    const [customerRes, orderRes, detailRes, returnRes] = await Promise.all([
+      listCustomer({ pageNum: 1, pageSize: 1000 }),
+      listOrder({ pageNum: 1, pageSize: 1000 }),
+      listOrderDetail({ pageNum: 1, pageSize: 1000 }),
+      listReturnExchange({ pageNum: 1, pageSize: 1000 })
+    ]);
+    // 适配接口返回格式（兼容 data/rows 两种常见结构）
+    customers.value = customerRes.data || customerRes.rows || [];
+    orders.value = orderRes.data || orderRes.rows || [];
+    orderDetails.value = detailRes.data || detailRes.rows || [];
+    returnExchanges.value = returnRes.data || returnRes.rows || [];
+  } catch (error) {
+    console.error('数据加载失败:', error);
+    ElMessage.error('数据加载失败，请重试');
+  } finally {
+    loading.value = false;
+    isRefreshing.value = false; // 结束刷新动画
+  }
+};
+
+// 5. 导航方法：返回上一页
+const handleBack = () => {
+  router.back();
+};
+
+// 6. 刷新方法：触发数据重新加载
+const handleRefresh = () => {
+  isRefreshing.value = true; // 启动刷新动画
+  // 延迟触发（确保动画可见，避免数据加载过快导致动画闪烁）
+  setTimeout(() => {
+    fetchAllData();
+  }, 300);
+};
+</script>