|
|
@@ -0,0 +1,147 @@
|
|
|
+<script setup>
|
|
|
+import {Page} from "@vben/common-ui";
|
|
|
+import dayjs from "dayjs";
|
|
|
+import {$t} from "@vben/locales";
|
|
|
+import {useVbenVxeGrid} from "#/adapter/vxe-table.js";
|
|
|
+import {ref} from "vue";
|
|
|
+import {Avatar, Tag, RadioGroup, RadioButton} from "ant-design-vue";
|
|
|
+import {getRankLoseList} from "#/api/data_statistics/rank_lose.js";
|
|
|
+
|
|
|
+const disabledDate = (current) => {
|
|
|
+ return current && current > dayjs().endOf('day');
|
|
|
+};
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+const formOptions = {
|
|
|
+ // 默认展开
|
|
|
+ collapsed: false,
|
|
|
+ // 所有表单项共用,可单独在表单内覆盖
|
|
|
+ commonConfig: {
|
|
|
+ // 所有表单项
|
|
|
+ componentProps: {
|
|
|
+ class: 'w-full',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ // 垂直布局,label和input在不同行,值为vertical
|
|
|
+ // 水平布局,label和input在同一行
|
|
|
+ layout: 'horizontal',
|
|
|
+ schema: [
|
|
|
+ {
|
|
|
+ label:$t("common.day_range_time"),
|
|
|
+ component: 'DatePicker',
|
|
|
+ defaultValue: dayjs(),
|
|
|
+ fieldName: 'range_time',
|
|
|
+ componentProps: {
|
|
|
+ disabledDate: disabledDate,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ // 是否可展开
|
|
|
+ submitButtonOptions: {
|
|
|
+ content: '查询',
|
|
|
+ },
|
|
|
+ showCollapseButton: false,
|
|
|
+ wrapperClass: 'grid-cols-1 md:grid-cols-3',
|
|
|
+}
|
|
|
+
|
|
|
+// 列表
|
|
|
+const gridOptions = {
|
|
|
+ border: true,
|
|
|
+ stripe: true,
|
|
|
+ scrollbarConfig: {
|
|
|
+ x: {
|
|
|
+ visible: 'visible'
|
|
|
+ },
|
|
|
+ y: {
|
|
|
+ visible: 'auto'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ columns: [
|
|
|
+ { fixed: 'left', field: "ranking", title: $t('data_statistics.rank_win.ranking'), type: 'seq', width: 80, slots: {'default':"ranking"}},
|
|
|
+ { field: 'nickname', title: $t('data_statistics.rank_win.nickname')},
|
|
|
+ { field: 'total_lose', title: $t('data_statistics.rank_win.total_lose'), slots:{'default':'total_lose'}},
|
|
|
+ { field: 'rtp', title: "RTP", width: 100},
|
|
|
+ { field: 'bet_count', title: $t('data_statistics.rank_win.bet_count')},
|
|
|
+ { field: 'balance', title: $t('data_statistics.rank_win.balance')},
|
|
|
+ ],
|
|
|
+ keepSource: true,
|
|
|
+ proxyConfig: {
|
|
|
+ ajax: {
|
|
|
+ query: async ({ page }) => {
|
|
|
+ let form = {
|
|
|
+ page: page.currentPage,
|
|
|
+ limit: page.pageSize,
|
|
|
+ compress: 0
|
|
|
+ };
|
|
|
+ const search = await gridApi.formApi.getValues();
|
|
|
+ for (let key in search) {
|
|
|
+ if(search[key]) {
|
|
|
+ form[key] = search[key];
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if(search.range_time) {
|
|
|
+ if(form.range_time) {
|
|
|
+ delete form.range_time;
|
|
|
+ }
|
|
|
+ if(tabType.value == 1) {
|
|
|
+ form['date'] = search.range_time.format('YYYY-MM-DD');
|
|
|
+ }
|
|
|
+ }
|
|
|
+ const list = await getRankLoseList(form);
|
|
|
+ list.list.forEach((item, index) => {
|
|
|
+ item['ranking'] = index + 1;
|
|
|
+ })
|
|
|
+ return {
|
|
|
+ total: list.total,
|
|
|
+ items: list.list
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ rowConfig: {
|
|
|
+ isHover: true,
|
|
|
+ },
|
|
|
+ toolbarConfig: {
|
|
|
+ custom: true,
|
|
|
+ export: true,
|
|
|
+ // import: true,
|
|
|
+ refresh: true,
|
|
|
+ zoom: true,
|
|
|
+ },
|
|
|
+};
|
|
|
+const [Grid, gridApi] = useVbenVxeGrid({
|
|
|
+ formOptions,
|
|
|
+ gridOptions,
|
|
|
+});
|
|
|
+
|
|
|
+let tabType = ref("1");
|
|
|
+const changeTabType = function () {
|
|
|
+ gridApi.reload();
|
|
|
+}
|
|
|
+
|
|
|
+</script>
|
|
|
+
|
|
|
+<template>
|
|
|
+ <Page>
|
|
|
+ <Grid>
|
|
|
+ <template #ranking="{ row }">
|
|
|
+ <h2 style="font-size:1rem;">No.{{row.ranking}}</h2>
|
|
|
+ </template>
|
|
|
+ <template #total_lose="{ row }">
|
|
|
+ <span style="color:green" v-if="row.total_lose >= 0">{{row.total_lose}}</span>
|
|
|
+ <span style="color:red" v-else>{{row.total_lose}}</span>
|
|
|
+ </template>
|
|
|
+ <template #toolbar-actions>
|
|
|
+ <RadioGroup v-model:value="tabType" button-style="solid" @change="changeTabType">
|
|
|
+ <RadioButton value="1">{{ $t('data_statistics.day_ranking') }}</RadioButton>
|
|
|
+ <RadioButton value="2">{{ $t('data_statistics.total_ranking') }}</RadioButton>
|
|
|
+ </RadioGroup>
|
|
|
+ </template>
|
|
|
+ </Grid>
|
|
|
+ </Page>
|
|
|
+</template>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+
|
|
|
+</style>
|