|
|
@@ -0,0 +1,187 @@
|
|
|
+<script setup>
|
|
|
+import {Page, useVbenForm} from "@vben/common-ui";
|
|
|
+import {Avatar, Tag, RadioGroup, RadioButton, Card, message} from "ant-design-vue";
|
|
|
+import {onMounted, reactive, ref, toRaw} from 'vue';
|
|
|
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
|
|
|
+import {getGameMinList} from "#/api/game_control/game_config.js";
|
|
|
+import {$t} from "@vben/locales";
|
|
|
+import dayjs from "dayjs";
|
|
|
+import {getTrendAgentDailyList} from "#/api/data_statistics/trend_agent.js";
|
|
|
+const chartRef = ref();
|
|
|
+const { renderEcharts } = useEcharts(chartRef);
|
|
|
+
|
|
|
+const filterGameList = ref([]);
|
|
|
+getGameMinList().then((data) => {
|
|
|
+ data.forEach((game) => {
|
|
|
+ filterGameList.value.push({
|
|
|
+ 'label': `【${game.game_id}】${game.title}`,
|
|
|
+ 'value': game.game_id,
|
|
|
+ })
|
|
|
+ })
|
|
|
+})
|
|
|
+const disabledDate = (current) => {
|
|
|
+ return current && current > dayjs().endOf('day');
|
|
|
+};
|
|
|
+const [QueryForm, formApi] = useVbenForm({
|
|
|
+ // 默认展开
|
|
|
+ collapsed: false,
|
|
|
+ // 所有表单项共用,可单独在表单内覆盖
|
|
|
+ commonConfig: {
|
|
|
+ // 所有表单项
|
|
|
+ componentProps: {
|
|
|
+ class: 'w-full',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ // 提交函数
|
|
|
+ handleSubmit: onSubmit,
|
|
|
+ // 垂直布局,label和input在不同行,值为vertical
|
|
|
+ // 水平布局,label和input在同一行
|
|
|
+ layout: 'horizontal',
|
|
|
+ schema: [
|
|
|
+ {
|
|
|
+ component: 'Select',
|
|
|
+ componentProps: {
|
|
|
+ allowClear: true,
|
|
|
+ filterOption: true,
|
|
|
+ name:'game_id',
|
|
|
+ options: filterGameList,
|
|
|
+ placeholder: $t('common.placeholder_select'),
|
|
|
+ showSearch: true,
|
|
|
+ mode:"tags",
|
|
|
+ maxTagCount: 3
|
|
|
+ },
|
|
|
+ fieldName: 'game_id',
|
|
|
+ label: $t('game_control.game'),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ component: 'Select',
|
|
|
+ defaultValue:'rtp',
|
|
|
+ componentProps: {
|
|
|
+ filterOption: true,
|
|
|
+ name:'data_type',
|
|
|
+ options: [
|
|
|
+ {'label':"RTP", "value":"rtp"},
|
|
|
+ {'label':$t('data_statistics.search.total_bet'), "value": "total_bet"},
|
|
|
+ {'label':$t('data_statistics.search.bet_count'), "value": "bet_count"},
|
|
|
+ {'label':$t('data_statistics.search.bet_users'), "value": "bet_users"},
|
|
|
+ ],
|
|
|
+ placeholder: $t('common.placeholder_select'),
|
|
|
+ },
|
|
|
+ fieldName: 'data_type',
|
|
|
+ label: $t('data_statistics.search.data_type'),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label:$t("common.day_range_time"),
|
|
|
+ component: 'RangePicker',
|
|
|
+ defaultValue: [dayjs(), dayjs()],
|
|
|
+ fieldName: 'range_time',
|
|
|
+ componentProps: {
|
|
|
+ disabledDate: disabledDate,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ // 是否可展开
|
|
|
+ showCollapseButton: false,
|
|
|
+ submitButtonOptions: {
|
|
|
+ content: '查询',
|
|
|
+ },
|
|
|
+ wrapperClass: 'grid-cols-1 md:grid-cols-3',
|
|
|
+});
|
|
|
+
|
|
|
+let echartsOptions ={
|
|
|
+ grid: {
|
|
|
+ bottom: 0,
|
|
|
+ containLabel: true,
|
|
|
+ left: '1%',
|
|
|
+ right: '1%',
|
|
|
+ top: '2 %',
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ // boundaryGap: false,
|
|
|
+ splitLine: {
|
|
|
+ lineStyle: {
|
|
|
+ type: 'solid',
|
|
|
+ width: 1,
|
|
|
+ },
|
|
|
+ show: true,
|
|
|
+ },
|
|
|
+ type: 'category',
|
|
|
+ data: []
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ splitArea: {
|
|
|
+ show: true,
|
|
|
+ },
|
|
|
+ type: 'value'
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ areaStyle: {},
|
|
|
+ itemStyle: {
|
|
|
+ color: '#5ab1ef',
|
|
|
+ },
|
|
|
+ data: [],
|
|
|
+ type: 'line',
|
|
|
+ smooth: true
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ cacheOptions:'',
|
|
|
+ tooltip: {
|
|
|
+ axisPointer: {
|
|
|
+ lineStyle: {
|
|
|
+ color: '#019680',
|
|
|
+ width: 1,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ trigger: 'axis',
|
|
|
+ },
|
|
|
+}
|
|
|
+async function onSubmit(search) {
|
|
|
+ let form = {};
|
|
|
+ if(search.range_time) {
|
|
|
+ form['start_time'] = search.range_time[0].format('YYYY-MM-DD');
|
|
|
+ form['end_time'] = search.range_time[1].format('YYYY-MM-DD');
|
|
|
+ }
|
|
|
+ if (search.game_id) {
|
|
|
+ form['game_id'] = search.game_id;
|
|
|
+ }
|
|
|
+ if(search.data_type) {
|
|
|
+ form['data_type'] = search.data_type;
|
|
|
+ }
|
|
|
+ const res = await getTrendAgentDailyList(form);
|
|
|
+ let xAxisData = [];
|
|
|
+ let yAxisData = [];
|
|
|
+ res.forEach((item) => {
|
|
|
+ xAxisData.push(item.date);
|
|
|
+ yAxisData.push(item[search.data_type]);
|
|
|
+ })
|
|
|
+ echartsOptions.xAxis.data = xAxisData;
|
|
|
+ echartsOptions.series[0]['data'] = yAxisData;
|
|
|
+ console.log(echartsOptions);
|
|
|
+ await renderEcharts(echartsOptions);
|
|
|
+}
|
|
|
+onMounted(() => {
|
|
|
+ formApi.submitForm();
|
|
|
+})
|
|
|
+</script>
|
|
|
+
|
|
|
+<template>
|
|
|
+ <Page>
|
|
|
+ <Card class="mb-5">
|
|
|
+ <QueryForm />
|
|
|
+ </Card>
|
|
|
+ <Card>
|
|
|
+ <EchartsUI ref="chartRef" />
|
|
|
+ </Card>
|
|
|
+ </Page>
|
|
|
+</template>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+
|
|
|
+</style>
|