tyj_admin_ui/src/views/gameManage/statistics/index.vue

<template>
  <div class="game-statistics-container">
    <el-card shadow="hover">
      <div class="system-user-search mb15">
        <el-form :inline="true">
          <el-form-item label="起始时间" prop="lowTime">
            <el-date-picker type="datetime" size="large" v-model="tableData.param.lowTime" format="YYYY/MM/DD HH:mm:ss"
                            value-format="x"/>
          </el-form-item>
          <el-form-item label="终止时间" prop="time">
            <el-date-picker type="datetime" v-model="tableData.param.upTime" format="YYYY/MM/DD HH:mm:ss"
                            value-format="x"/>
          </el-form-item>

          <el-form-item>
            <el-button size="default" type="primary" class="ml10" @click="getRemain">
              <el-icon>
                <ele-Search/>
              </el-icon>
              查询
            </el-button>

          </el-form-item>
        </el-form>

        <el-form :inline="true">
          <el-form-item label="注册数量:">
            <el-input v-model="tableData.registerNum" placeholder="" class="w-50 m-2" size="large"/>
          </el-form-item>
          <el-form-item label="充值人数:">
            <el-input v-model="tableData.depositNum" placeholder="" class="w-50 m-2" size="large"/>
          </el-form-item>
          <el-form-item label="充值总额:">
            <el-input v-model="tableData.sum" placeholder="" class="w-50 m-2" size="large"/>
          </el-form-item>
        </el-form>
      </div>
      <el-table :data="tableData.data" style="width: 100%">
        <el-table-column type="index" label="序号" width="60"/>
        <el-table-column prop="date" label="日期" width="180"></el-table-column>
        <el-table-column prop="remainRate" label="留存" show-overflow-tooltip></el-table-column>
        <el-table-column prop="remainVal" label="留存人数" show-overflow-tooltip></el-table-column>
        <el-table-column prop="total" label="总人数" show-overflow-tooltip></el-table-column>
      </el-table>
      <el-pagination
          :hide-on-single-page="true"
          :total="tableData.total"
          v-model:page="tableData.param.pageNum"
          v-model:limit="tableData.param.pageSize"
          @pagination="getRemain"
      />
    </el-card>
  </div>
</template>

<script lang="ts">
  import {toRefs, reactive, onMounted, defineComponent,} from 'vue';
  //import { ElMessageBox, ElMessage } from 'element-plus';
  import {gameRemain} from "/@/api/game/mange";

  // 定义接口来定义对象的类型
  interface TableData{
    date: number
    remainRate: number
    remainVal: number
    total: number
  }

  interface TableDataState{
    tableData: {
      data: Array<TableData>;
      registerNum: number;
      depositNum: number;
      sum: number
      param: {
        pageNum: number;
        pageSize: number;
        lowTime: number;
        upTime: number
      };
      total: number;
    };
  }

  export default defineComponent({
    name: 'apiV1SystemRoleList',
    setup(){
      const state = reactive<TableDataState>({
        tableData: {
          data: [],
          registerNum: 0,
          depositNum: 0,
          sum: 0,
          param: {
            pageNum: 0,
            pageSize: 0,
            lowTime: 0,
            upTime: 0
          },
          total: 0,
        },
      });


      const getRemain = () => {
        const data: Array<TableData> = [];
        gameRemain(state.tableData.param).then(res => {
          const list = res.data.mails ?? [];
          list.map((item: TableData) => {
            data.push({
              date: item.date,
              remainRate: item.remainRate,
              remainVal: item.remainVal,
              total: item.total,
            });
          })
          state.tableData.data = data;
          // state.tableData.total = res.data.total;
        })
      };

      // 删除角色
      // const onRowDel = (row: any) => {
      // 	ElMessageBox.confirm(`此操作将永久删除角色：“${row.name}”，是否继续?`, '提示', {
      // 		confirmButtonText: '确认',
      // 		cancelButtonText: '取消',
      // 		type: 'warning',
      // 	})
      // 		.then(() => {
      //       deleteRole(row.id).then(()=>{
      //         ElMessage.success('删除成功');
      //         proxy.$refs['editRoleRef'].resetMenuSession();
      //         roleList();
      //       })
      // 		})
      // 		.catch(() => {});
      // };
      // // 分页改变
      // const onHandleSizeChange = (val: number) => {
      // 	state.tableData.param.pageSize = val;
      // };
      // // 分页改变
      // const onHandleCurrentChange = (val: number) => {
      // 	state.tableData.param.pageNum = val;
      // };
      // 页面加载时
      onMounted(() => {
        //	initTableData();
      });
      return {
        // addRoleRef,
        // editRoleRef,
        // onOpenAddRole,
        // onOpenEditRole,
        //onRowDel,
        //onHandleSizeChange,
        //onHandleCurrentChange,
        getRemain,
        ...toRefs(state),
      };
    },
  });
</script>