mp-10579/src/views/cms/cmsStatistics/index.vue

<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>