|
|
@@ -0,0 +1,491 @@
|
|
|
+<template>
|
|
|
+ <div class="ma-content-block">
|
|
|
+ <a-layout-content class="flex flex-col lg:h-full relative w-full">
|
|
|
+ <a-card :bordered="false">
|
|
|
+ <a-row>
|
|
|
+ <a-col :flex="1">
|
|
|
+ <a-form :model="searchForm" ref="searchFormRef" :auto-label-width="true">
|
|
|
+ <a-row :gutter="10">
|
|
|
+ <a-col :sm="8" :xs="24">
|
|
|
+ <a-form-item label="游戏" field="game_id">
|
|
|
+ <game-select v-model="searchForm.game_id" multiple />
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :sm="8" :xs="24">
|
|
|
+ <a-form-item label="对比方式" field="compare_type">
|
|
|
+ <a-select
|
|
|
+ v-model="searchForm.compare_type"
|
|
|
+ :options="compareTypeOptions"
|
|
|
+ placeholder="请选择对比方式">
|
|
|
+ </a-select>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :sm="8" :xs="24" v-if="searchForm.compare_type === 'day'">
|
|
|
+ <a-form-item label="对比日期1" field="compare_date1">
|
|
|
+ <a-range-picker v-model="searchForm.compare_date1" type="date" allow-clear />
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :sm="8" :xs="24" v-if="searchForm.compare_type === 'day'">
|
|
|
+ <a-form-item label="对比日期2" field="compare_date2">
|
|
|
+ <a-range-picker v-model="searchForm.compare_date2" type="date" allow-clear />
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :sm="8" :xs="24" v-if="searchForm.compare_type === 'hour'">
|
|
|
+ <a-form-item label="对比日期1" field="compare_date1_date">
|
|
|
+ <a-date-picker v-model="searchForm.compare_date1_date" type="date" allow-clear />
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :sm="8" :xs="24" v-if="searchForm.compare_type === 'hour'">
|
|
|
+ <a-form-item label="对比日期2" field="compare_date2_date">
|
|
|
+ <a-date-picker v-model="searchForm.compare_date2_date" type="date" allow-clear />
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ </a-form>
|
|
|
+ </a-col>
|
|
|
+ <a-divider style="height: 84px" direction="vertical" />
|
|
|
+ <a-col flex="80px" :style="{ textAlign: 'right' }">
|
|
|
+ <a-space direction="vertical" :size="20">
|
|
|
+ <a-button type="primary" @click="search">
|
|
|
+ <template #icon>
|
|
|
+ <icon-search />
|
|
|
+ </template>
|
|
|
+ {{ '搜索' }}
|
|
|
+ </a-button>
|
|
|
+ <a-button @click="resetSearch">
|
|
|
+ <template #icon>
|
|
|
+ <icon-refresh />
|
|
|
+ </template>
|
|
|
+ {{ '重置' }}
|
|
|
+ </a-button>
|
|
|
+ </a-space>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ <a-divider style="margin-top: 0; margin-bottom: 15px" />
|
|
|
+ </a-card>
|
|
|
+ </a-layout-content>
|
|
|
+
|
|
|
+ <!-- 充值对比 -->
|
|
|
+ <div class="p-10">
|
|
|
+ <sa-chart height="300px" :option="payChartOptions" />
|
|
|
+ </div>
|
|
|
+ <!-- 消耗对比 -->
|
|
|
+ <div class="p-10">
|
|
|
+ <sa-chart height="300px" :option="costChartOptions" />
|
|
|
+ </div>
|
|
|
+ <!-- 注册对比 -->
|
|
|
+ <div class="p-10">
|
|
|
+ <sa-chart height="300px" :option="registerChartOptions" />
|
|
|
+ </div>
|
|
|
+ <!-- 登录对比 -->
|
|
|
+ <div class="p-10">
|
|
|
+ <sa-chart height="300px" :option="loginChartOptions" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { onMounted, ref } from 'vue'
|
|
|
+import GameSelect from '@/components/game-select/index.vue'
|
|
|
+import api from '@/views/v1/api/gameLog/analyse'
|
|
|
+import dayjs from 'dayjs'
|
|
|
+const payChartOptions = ref({})
|
|
|
+const costChartOptions = ref({})
|
|
|
+const registerChartOptions = ref({})
|
|
|
+const loginChartOptions = ref({})
|
|
|
+// 引用定义
|
|
|
+const compareTypeOptions = ref([
|
|
|
+ {
|
|
|
+ label: '按天',
|
|
|
+ value: 'day',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '按小时',
|
|
|
+ value: 'hour',
|
|
|
+ },
|
|
|
+])
|
|
|
+
|
|
|
+// 搜索表单
|
|
|
+const searchForm = ref({
|
|
|
+ game_id: '',
|
|
|
+ compare_type: 'day',
|
|
|
+ compare_date1: [],
|
|
|
+ compare_date2: [],
|
|
|
+ compare_date1_date: '',
|
|
|
+ compare_date2_date: '',
|
|
|
+})
|
|
|
+
|
|
|
+// 页面数据初始化
|
|
|
+const initPage = async () => {
|
|
|
+ searchForm.value.compare_date1[0] = dayjs().subtract(14, 'day').format('YYYY-MM-DD')
|
|
|
+ searchForm.value.compare_date1[1] = dayjs().subtract(7, 'day').format('YYYY-MM-DD')
|
|
|
+ searchForm.value.compare_date2[0] = dayjs().subtract(7, 'day').format('YYYY-MM-DD')
|
|
|
+ searchForm.value.compare_date2[1] = dayjs().subtract(0, 'day').format('YYYY-MM-DD')
|
|
|
+ searchForm.value.compare_date1_date = dayjs().subtract(1, 'day').format('YYYY-MM-DD')
|
|
|
+ searchForm.value.compare_date2_date = dayjs().format('YYYY-MM-DD')
|
|
|
+ await search()
|
|
|
+}
|
|
|
+
|
|
|
+// 页面加载完成执行
|
|
|
+onMounted(async () => {
|
|
|
+ initPage()
|
|
|
+})
|
|
|
+
|
|
|
+// 搜索
|
|
|
+const search = async () => {
|
|
|
+ const { data } = await api.getChartData(searchForm.value)
|
|
|
+ console.log(data)
|
|
|
+ const colors = ['#5470C6', '#EE6666']
|
|
|
+ payChartOptions.value = {
|
|
|
+ color: colors,
|
|
|
+ title: {
|
|
|
+ text: '充值对比',
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'none',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'cross',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ legend: {},
|
|
|
+ grid: {
|
|
|
+ left: '3%',
|
|
|
+ right: '4%',
|
|
|
+ bottom: '3%',
|
|
|
+ containLabel: true,
|
|
|
+ },
|
|
|
+ xAxis: [
|
|
|
+ {
|
|
|
+ type: 'category',
|
|
|
+ axisTick: {
|
|
|
+ alignWithLabel: true,
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: colors[1],
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisPointer: {
|
|
|
+ label: {
|
|
|
+ formatter: function (params) {
|
|
|
+ return params.value + (params.seriesData.length ? '：' + params.seriesData[0].data : '')
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data: data.days2,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'category',
|
|
|
+ axisTick: {
|
|
|
+ alignWithLabel: true,
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: colors[0],
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisPointer: {
|
|
|
+ label: {
|
|
|
+ formatter: function (params) {
|
|
|
+ return params.value + (params.seriesData.length ? '：' + params.seriesData[0].data : '')
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data: data.days1,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ type: 'value',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: data.data1.series,
|
|
|
+ type: 'line',
|
|
|
+ xAxisIndex: 1,
|
|
|
+ smooth: true,
|
|
|
+ emphasis: {
|
|
|
+ focus: 'series',
|
|
|
+ },
|
|
|
+ data: data.data1.pay,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: data.data2.series,
|
|
|
+ type: 'line',
|
|
|
+ smooth: true,
|
|
|
+ emphasis: {
|
|
|
+ focus: 'series',
|
|
|
+ },
|
|
|
+ data: data.data2.pay,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ }
|
|
|
+ costChartOptions.value = {
|
|
|
+ color: colors,
|
|
|
+ title: {
|
|
|
+ text: '消耗对比',
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'none',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'cross',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ legend: {},
|
|
|
+ grid: {
|
|
|
+ left: '3%',
|
|
|
+ right: '4%',
|
|
|
+ bottom: '3%',
|
|
|
+ containLabel: true,
|
|
|
+ },
|
|
|
+ xAxis: [
|
|
|
+ {
|
|
|
+ type: 'category',
|
|
|
+ axisTick: {
|
|
|
+ alignWithLabel: true,
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: colors[1],
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisPointer: {
|
|
|
+ label: {
|
|
|
+ formatter: function (params) {
|
|
|
+ return params.value + (params.seriesData.length ? '：' + params.seriesData[0].data : '')
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ // prettier-ignore
|
|
|
+ data: data.days2,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'category',
|
|
|
+ axisTick: {
|
|
|
+ alignWithLabel: true,
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: colors[0],
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisPointer: {
|
|
|
+ label: {
|
|
|
+ formatter: function (params) {
|
|
|
+ return params.value + (params.seriesData.length ? '：' + params.seriesData[0].data : '')
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ // prettier-ignore
|
|
|
+ data: data.days1,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ type: 'value',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: data.data1.series,
|
|
|
+ type: 'line',
|
|
|
+ xAxisIndex: 1,
|
|
|
+ smooth: true,
|
|
|
+ emphasis: {
|
|
|
+ focus: 'series',
|
|
|
+ },
|
|
|
+ data: data.data1.cost,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: data.data2.series,
|
|
|
+ type: 'line',
|
|
|
+ smooth: true,
|
|
|
+ emphasis: {
|
|
|
+ focus: 'series',
|
|
|
+ },
|
|
|
+ data: data.data2.cost,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ }
|
|
|
+ registerChartOptions.value = {
|
|
|
+ color: colors,
|
|
|
+ title: {
|
|
|
+ text: '注册对比',
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'none',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'cross',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ legend: {},
|
|
|
+ grid: {
|
|
|
+ left: '3%',
|
|
|
+ right: '4%',
|
|
|
+ bottom: '3%',
|
|
|
+ containLabel: true,
|
|
|
+ },
|
|
|
+ xAxis: [
|
|
|
+ {
|
|
|
+ type: 'category',
|
|
|
+ axisTick: {
|
|
|
+ alignWithLabel: true,
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: colors[1],
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisPointer: {
|
|
|
+ label: {
|
|
|
+ formatter: function (params) {
|
|
|
+ return params.value + (params.seriesData.length ? '：' + params.seriesData[0].data : '')
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ // prettier-ignore
|
|
|
+ data: data.days2,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'category',
|
|
|
+ axisTick: {
|
|
|
+ alignWithLabel: true,
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: colors[0],
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisPointer: {
|
|
|
+ label: {
|
|
|
+ formatter: function (params) {
|
|
|
+ return params.value + (params.seriesData.length ? '：' + params.seriesData[0].data : '')
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ // prettier-ignore
|
|
|
+ data: data.days1,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ type: 'value',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: data.data1.series,
|
|
|
+ type: 'line',
|
|
|
+ xAxisIndex: 1,
|
|
|
+ smooth: true,
|
|
|
+ emphasis: {
|
|
|
+ focus: 'series',
|
|
|
+ },
|
|
|
+ data: data.data1.reg,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: data.data2.series,
|
|
|
+ type: 'line',
|
|
|
+ smooth: true,
|
|
|
+ emphasis: {
|
|
|
+ focus: 'series',
|
|
|
+ },
|
|
|
+ data: data.data2.reg,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ }
|
|
|
+ loginChartOptions.value = {
|
|
|
+ color: colors,
|
|
|
+ title: {
|
|
|
+ text: '登录对比',
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'none',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'cross',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ legend: {},
|
|
|
+ grid: {
|
|
|
+ left: '3%',
|
|
|
+ right: '4%',
|
|
|
+ bottom: '3%',
|
|
|
+ containLabel: true,
|
|
|
+ },
|
|
|
+ xAxis: [
|
|
|
+ {
|
|
|
+ type: 'category',
|
|
|
+ axisTick: {
|
|
|
+ alignWithLabel: true,
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: colors[1],
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisPointer: {
|
|
|
+ label: {
|
|
|
+ formatter: function (params) {
|
|
|
+ return params.value + (params.seriesData.length ? '：' + params.seriesData[0].data : '')
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ // prettier-ignore
|
|
|
+ data: data.days2,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'category',
|
|
|
+ axisTick: {
|
|
|
+ alignWithLabel: true,
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: colors[0],
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisPointer: {
|
|
|
+ label: {
|
|
|
+ formatter: function (params) {
|
|
|
+ return params.value + (params.seriesData.length ? '：' + params.seriesData[0].data : '')
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ // prettier-ignore
|
|
|
+ data: data.days1,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ type: 'value',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: data.data1.series,
|
|
|
+ type: 'line',
|
|
|
+ xAxisIndex: 1,
|
|
|
+ smooth: true,
|
|
|
+ emphasis: {
|
|
|
+ focus: 'series',
|
|
|
+ },
|
|
|
+ data: data.data1.login,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: data.data2.series,
|
|
|
+ type: 'line',
|
|
|
+ smooth: true,
|
|
|
+ emphasis: {
|
|
|
+ focus: 'series',
|
|
|
+ },
|
|
|
+ data: data.data2.login,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 重置
|
|
|
+const resetSearch = async () => {
|
|
|
+ initPage()
|
|
|
+}
|
|
|
+</script>
|
