CloudGamingAdmin/admin-client/src/views/home/components/WorkOrder.vue

<script lang="ts" setup>
import { ref, onBeforeUnmount } from "vue";
import AppIcon from "@/core/components/AppIcon.vue";
import AppMonitorService from "@/services/Apps/Ext/AppMonitorService";
interface CardData {
  title: string;
  unit: string;
  value: number;
  icon: string;
  color: string;
}

const iconSize = ref(60);
const timer = ref<NodeJS.Timer | null>(null);
const cards = ref<CardData[]>([
  {
    title: "今日登录人数",
    unit: "人",
    value: 5,
    icon: "UserOutlined",
    color: "#9370DB",
  },
  {
    title: "今日注册人数",
    unit: "人",
    value: 107,
    icon: "UserAddOutlined",
    color: "#32CD32",
  },
  {
    title: "当前在线人数",
    unit: "人",
    value: 0,
    icon: "TeamOutlined",
    color: "#00BFFF",
  },
  {
    title: "当前玩游戏人数",
    unit: "人",
    value: 0,
    icon: "UserSwitchOutlined",
    color: "#FF8C00",
  },
  {
    title: "当前排队人数",
    unit: "人",
    value: 0,
    icon: "UserSwitchOutlined",
    color: "#FF7F50",
  },
  {
    title: "今日意向订单",
    unit: "次",
    value: 5,
    icon: "SolutionOutlined",
    color: "#FFD700",
  },
  {
    title: "今日支付订单",
    unit: "次",
    value: 5,
    icon: "AccountBookOutlined",
    color: "#FF4500",
  },
  {
    title: "今日充值金额",
    unit: "",
    value: 5,
    icon: "AccountBookOutlined",
    color: "#FF6347",
  },
]);

AppMonitorService.GetAppMonitorInfo().then((data) => {
  if (data != null) {
    cards.value[0].value = data.todayLoggedInUsers;
    cards.value[1].value = data.todayRegisteredUsers;
    cards.value[2].value = data.currentOnlineUsers;
    cards.value[3].value = data.currentPlayingUsers;
    cards.value[4].value = data.currentQueuedUsers;
    cards.value[5].value = data.todayIntendedOrders;
    cards.value[6].value = data.todayPaidOrders;
    cards.value[7].value = data.todayRechargeAmount;
  }
});
const updateValues = async () => {
  var data = await AppMonitorService.GetAppMonitorInfo();
  if (data != null) {
    cards.value[0].value = data.todayLoggedInUsers;
    cards.value[1].value = data.todayRegisteredUsers;
    cards.value[2].value = data.currentOnlineUsers;
    cards.value[3].value = data.currentPlayingUsers;
    cards.value[4].value = data.currentQueuedUsers;
    cards.value[5].value = data.todayIntendedOrders;
    cards.value[6].value = data.todayPaidOrders;
    cards.value[7].value = data.todayRechargeAmount;
  }
};

timer.value = setInterval(updateValues, 10000);

onBeforeUnmount(() => {
  if (timer.value) {
    clearInterval(timer.value);
  }
});
let visible = ref(false);
let visbleIndex = ref(0);
const tableData = ref([])

async function onDeList(index) {
  if (index == 2) {
    visible.value = !visible.value;
    visbleIndex = index;
    var c = await AppMonitorService.GetCurrentOnlineUsers();
    tableData.value = c;
  }
}

</script>

<template>
  <a-row class="work-order" :gutter="[16, 16]">
    <a-col v-for="(card, index) in cards" :key="index" :xs="24" :sm="12" :md="12" :lg="6" :xl="4">
      <a-card :bordered="false" hoverable :style="{ background: card.color }" :bodyStyle="{ padding: 0 }"
        @click=" onDeList(index)">
        <a-row class="text-center p-16">
          <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="8" class="icon">
            <AppIcon :name="card.icon" :size="iconSize" style="color: #fff" />
          </a-col>
          <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="14">
            <h3 style="color: #fff">{{ card.title }}</h3>
            <h2 style="color: #fff">{{ card.value }}{{ card.unit }}</h2>
          </a-col>
        </a-row>
      </a-card>
    </a-col>
  </a-row>
  <!-- 抽屉 -->
  <a-drawer v-model:open="visible" title="更多" placement="right" width="90%">

    <el-table :data="tableData" style="width: 100%" v-if="visbleIndex == 2">
      <el-table-column type="index" />
      <el-table-column prop="userId" label="用户id" width="120" />
      <el-table-column prop="nickName" label="昵称" />
      <el-table-column prop="phoneNum" label="手机号" />
      <el-table-column prop="diamond" label="钻石数" />
      <el-table-column prop="deviceNumber" label="设备号" />
    </el-table>
  </a-drawer>
</template>

<style lang="less">
.icon {
  display: flex;
  justify-content: center;
}
</style>