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>
      <pagination
          v-show="tableData.total>0"
          :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/index";
// 定义接口来定义对象的类型
interface TableData {
  date:number
  remainRate:number
  remainVal:number
  total : number
}
interface TableDataState {
	tableData: {
		data: Array<TableData>;
    registerNum: number;
    depositNum: number;
    sum:number
		param: {
      lowTime:number;
      upTime:number
		};
	};
}

export default defineComponent({
	name: 'apiV1SystemRoleList',
	setup() {
   // const {proxy} = getCurrentInstance() as any;

		const state = reactive<TableDataState>({
			tableData: {
				data: [],
        registerNum: 0,
        depositNum: 0,
        sum:0,
				param: {
          lowTime:0,
          upTime: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>