1

src/views/cms/cmsStatistics/index.vue

@@ -0,0 +1,167 @@
+<template>
+  <a-page-header :title="getPageTitle()" @back="() => $router.go(-1)">
+    <a-row :gutter="16">
+      <!-- 统计数据卡片 -->
+      <a-col :span="6">
+        <a-card :bordered="false" class="stat-card">
+          <a-statistic
+            title="用户总数"
+            :value="statistics.userCount"
+            :value-style="{ color: '#3f8600' }"
+          >
+            <template #prefix>
+              <UserOutlined />
+            </template>
+          </a-statistic>
+        </a-card>
+      </a-col>
+
+      <a-col :span="6">
+        <a-card :bordered="false" class="stat-card">
+          <a-statistic
+            title="订单总数"
+            :value="statistics.orderCount"
+            :value-style="{ color: '#1890ff' }"
+          >
+            <template #prefix>
+              <AccountBookOutlined />
+            </template>
+          </a-statistic>
+        </a-card>
+      </a-col>
+
+      <a-col :span="6">
+        <a-card :bordered="false" class="stat-card">
+          <a-statistic
+            title="总营业额"
+            :value="statistics.totalSales"
+            :value-style="{ color: '#cf1322' }"
+          >
+            <template #prefix>
+              <MoneyCollectOutlined />
+            </template>
+          </a-statistic>
+        </a-card>
+      </a-col>
+
+      <a-col :span="6">
+        <a-card :bordered="false" class="stat-card">
+          <a-statistic
+            title="系统运行天数"
+            :value="statistics.runDays"
+            suffix="天"
+            :value-style="{ color: '#722ed1' }"
+          >
+            <template #prefix>
+              <ClockCircleOutlined />
+            </template>
+          </a-statistic>
+        </a-card>
+      </a-col>
+    </a-row>
+  </a-page-header>
+</template>
+
+<script lang="ts" setup>
+  import { ref, onMounted } from 'vue';
+  import {
+    UserOutlined,
+    CalendarOutlined,
+    QrcodeOutlined,
+    ShopOutlined,
+    ClockCircleOutlined,
+    SettingOutlined,
+    AccountBookOutlined,
+    FileTextOutlined,
+    MoneyCollectOutlined
+  } from '@ant-design/icons-vue';
+  import { getSiteInfo } from '@/api/layout';
+  import { CmsWebsite } from '@/api/cms/cmsWebsite/model';
+  import { pageUsers } from '@/api/system/user';
+  import { pageShopOrder } from '@/api/shop/shopOrder';
+  import { getPageTitle, openNew } from '@/utils/common';
+  import { listCmsStatistics } from '@/api/cms/cmsStatistics';
+
+  // 当前小程序项目
+  const siteInfo = ref<CmsWebsite>({});
+
+  // 系统信息
+  const systemInfo = ref({
+    name: '小程序开发',
+    description:
+      '基于Spring、SpringBoot、SpringMVC等技术栈构建的前后端分离开发平台',
+    version: '2.0.0',
+    status: '运行中',
+    logo: '/logo.png',
+    environment: '生产环境',
+    database: 'MySQL 8.0',
+    server: 'Linux CentOS 7.9',
+    expirationTime: '2024-01-01 09:00:00'
+  });
+
+  // 统计数据
+  const statistics = ref({
+    userCount: 0,
+    orderCount: 0,
+    todayVisit: 0,
+    runDays: 365
+  });
+
+  onMounted(() => {
+    // 加载系统信息和统计数据
+    loadSystemInfo();
+    loadStatistics();
+  });
+
+  const loadSystemInfo = async () => {
+    // TODO: 调用API获取系统信息
+    siteInfo.value = await getSiteInfo();
+    if (siteInfo.value.createTime) {
+      // 根据创建时间计算运行天数
+      statistics.value.runDays = Math.floor(
+        (new Date().getTime() - new Date(siteInfo.value.createTime).getTime()) /
+          (24 * 60 * 60 * 1000)
+      );
+    }
+  };
+
+  const loadStatistics = async () => {
+    // TODO: 调用API获取统计数据
+    const users = await pageUsers({});
+    const orders = await pageShopOrder({});
+    if (users) {
+      console.log(users.count);
+      statistics.value.userCount = users.count;
+    }
+    if (orders) {
+      statistics.value.orderCount = orders.count;
+    }
+    // 获取统计表数据
+    const data = await listCmsStatistics({});
+    if (data) {
+      // 统计数据
+      statistics.value.totalSales = data[0].totalSales;
+    }
+  };
+</script>
+
+<style scoped>
+  .system-info h2 {
+    margin-bottom: 8px;
+  }
+
+  .stat-card {
+    text-align: center;
+    margin-bottom: 16px;
+  }
+
+  .stat-card :deep(.ant-statistic-title) {
+    font-size: 14px;
+    color: #666;
+  }
+
+  .stat-card :deep(.ant-statistic-content) {
+    font-size: 24px;
+    font-weight: 600;
+  }
+</style>