|
|
@@ -0,0 +1,296 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <!-- 统计 -->
|
|
|
+ <summaryStatistics></summaryStatistics>
|
|
|
+ <Search :search="moreSearch" :reset="moreReset">
|
|
|
+ <template v-slot:body>
|
|
|
+ <el-form-item label="时间">
|
|
|
+ <el-date-picker unlink-panels clearable @change="timeChange" format="YYYY/MM/DD" value-format="YYYY-MM-DD"
|
|
|
+ v-model="query.time" type="daterange" :shortcuts="shortcuts" range-separator="To" start-placeholder="开始时间"
|
|
|
+ end-placeholder="结束时间" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="优化师" prop="user_id" v-if="!rolesIdentify.includes('optimizer')">
|
|
|
+ <el-select v-model="query.user_id" filterable remote clearable
|
|
|
+ :remote-method="(query) => { remoteMethod(query, 'channelPromotionsUsers') }" placeholder="选择优化师">
|
|
|
+ <el-option v-for="item in promotionsUsersList" :key="item.user_id" :label="item.name" :value="item.user_id" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="小程序" prop="miniprogram_id">
|
|
|
+ <el-select v-model="query.miniprogram_id" filterable remote
|
|
|
+ :remote-method="(query) => { remoteMethod(query, 'channelMiniprogram') }" clearable placeholder="选择小程序">
|
|
|
+ <el-option v-for="item in channelMiniprogram" :key="item.miniprogram_id" :label="item.name"
|
|
|
+ :value="item.miniprogram_id" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </template>
|
|
|
+ <template v-slot:extra_button>
|
|
|
+ <exportExcel api="statistic/users/list" v-action="'statistic.UserStatistics.export'" sheet_name="充值统计" :title_obj="titleObj"
|
|
|
+ :extro_params="{ is_all: true, ...query }">
|
|
|
+ </exportExcel>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ </Search>
|
|
|
+ <div style="margin:8px 6px;">
|
|
|
+ <el-card shadow="hover" :body-style="{ padding: '20px' }">
|
|
|
+ <div class="stat-wrapper">
|
|
|
+ <div>所选时间段内累计充新增用户数:
|
|
|
+ <span class="ml-2 mr-4 stat">{{ statisticalData.new_user_num || '暂无数据' }}</span>
|
|
|
+ </div>
|
|
|
+ <div>累计新用户充值人数:
|
|
|
+ <span class="ml-2 mr-4 stat">{{ statisticalData.new_user_recharge_num || '暂无数据' }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+ <div class="table-default" >
|
|
|
+ <el-table :data="tableData" class="mt-3" v-loading="loading">
|
|
|
+ <el-table-column prop="date" min-width="120px" label="时间" />
|
|
|
+ <el-table-column prop="username" label="优化师" min-width="160px" />
|
|
|
+ <el-table-column prop="miniprogram_name" label="小程序名称" min-width="160px" />
|
|
|
+ <el-table-column label="当日新增用户数" prop="new_user_num" min-width="160px">
|
|
|
+ <template #header>
|
|
|
+ <div class="flex items-center">
|
|
|
+ <el-tooltip placement="top">
|
|
|
+ <template #content>
|
|
|
+ 当天的新增用户<br />
|
|
|
+ </template>
|
|
|
+ <el-icon>
|
|
|
+ <InfoFilled />
|
|
|
+ </el-icon>
|
|
|
+ </el-tooltip>
|
|
|
+ <span>当日新增用户数</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template #default="scope">
|
|
|
+ <div class="wrapper">
|
|
|
+ <div>{{ scope.row.new_user_num }}</div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="当日新增用户充值人数" prop="pay_count" min-width="180px">
|
|
|
+ <template #header>
|
|
|
+ <div class="flex items-center">
|
|
|
+ <el-tooltip placement="top">
|
|
|
+ <template #content>
|
|
|
+ 当日新增用户充值人数<br />
|
|
|
+ </template>
|
|
|
+ <el-icon>
|
|
|
+ <InfoFilled />
|
|
|
+ </el-icon>
|
|
|
+ </el-tooltip>
|
|
|
+ <span>当日新增用户充值人数</span>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template #default="scope">
|
|
|
+ <div class="wrapper">
|
|
|
+ <div>{{ scope.row.new_user_recharge_num }}</div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="当日新增用户充率" prop="recharge_rate" min-width="180px">
|
|
|
+ <template #header>
|
|
|
+ <div class="flex items-center">
|
|
|
+ <el-tooltip placement="top">
|
|
|
+ <template #content>
|
|
|
+ 当日新增用户充率<br />
|
|
|
+ </template>
|
|
|
+ <el-icon>
|
|
|
+ <InfoFilled />
|
|
|
+ </el-icon>
|
|
|
+ </el-tooltip>
|
|
|
+ <span>当日新增用户充率</span>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template #default="scope">
|
|
|
+ <div class="wrapper">
|
|
|
+ <div>{{ scope.row.recharge_rate }}</div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="当日新增用户充总额" prop="new_user_recharge_total" min-width="180px">
|
|
|
+ <template #header>
|
|
|
+ <div class="flex items-center">
|
|
|
+ <el-tooltip placement="top">
|
|
|
+ <template #content>
|
|
|
+ 当日新增用户充总额<br />
|
|
|
+ </template>
|
|
|
+ <el-icon>
|
|
|
+ <InfoFilled />
|
|
|
+ </el-icon>
|
|
|
+ </el-tooltip>
|
|
|
+ <span>当日新增用户充总额</span>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template #default="scope">
|
|
|
+ <div class="wrapper">
|
|
|
+ <div>{{ scope.row.new_user_recharge_total }}</div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="新增用户人均充值" prop="recharge_mean" min-width="180px">
|
|
|
+ <template #header>
|
|
|
+ <div class="flex items-center">
|
|
|
+ <el-tooltip placement="top">
|
|
|
+ <template #content>
|
|
|
+ 新增用户人均充值<br />
|
|
|
+ </template>
|
|
|
+ <el-icon>
|
|
|
+ <InfoFilled />
|
|
|
+ </el-icon>
|
|
|
+ </el-tooltip>
|
|
|
+ <span>新增用户人均充值</span>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template #default="scope">
|
|
|
+ <div class="wrapper">
|
|
|
+ <div>{{ scope.row.recharge_mean }}</div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <Paginate />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script lang="ts" setup>
|
|
|
+import summaryStatistics from './summaryStatistics.vue';
|
|
|
+import { shortcuts } from '@/utils/shortcuts'
|
|
|
+import { useRouter, useRoute } from 'vue-router'
|
|
|
+import { InfoFilled } from '@element-plus/icons-vue';
|
|
|
+import { useGetList } from '@/hook/curd/useGetList';
|
|
|
+import { statisticUserList } from '@/api/dataStatistics/userStatistics'
|
|
|
+import { titleObj } from "./excelTitle";
|
|
|
+import moment from 'moment';
|
|
|
+const start_date = moment().subtract(7, 'days').format('YYYY-MM-DD');
|
|
|
+const end_date = moment().format('YYYY-MM-DD');
|
|
|
+const statisticalData = ref({})
|
|
|
+const api = '/statistic/users/list';
|
|
|
+const router = useRouter()
|
|
|
+const route = useRoute()
|
|
|
+const rolesIdentify = inject('rolesIdentify')
|
|
|
+import {
|
|
|
+ channelMiniprogramUseList,
|
|
|
+ channelPromotionsUsers,
|
|
|
+} from '@/api/orders/index'
|
|
|
+const channelMiniprogram = ref([])
|
|
|
+const promotionsUsersList = ref([])
|
|
|
+const { data, query, search, reset, loading } = useGetList(api);
|
|
|
+const remoteMethod = (query: string, type: string,) => {
|
|
|
+ console.log(query, 'queryquery', type);
|
|
|
+ switch (type) {
|
|
|
+ case 'channelPromotionsUsers':
|
|
|
+ initRemoteOption('channelPromotionsUsers', { name: query })
|
|
|
+ break;
|
|
|
+ case 'channelMiniprogram':
|
|
|
+ initRemoteOption('channelMiniprogram', { name: query })
|
|
|
+ break;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+const initRemoteOption = (type: string, params?: object) => {
|
|
|
+ switch (type) {
|
|
|
+ case 'channelPromotionsUsers':
|
|
|
+ channelPromotionsUsers({ limit: 30, ...params }).then(res => {
|
|
|
+ promotionsUsersList.value = res.data
|
|
|
+ })
|
|
|
+ break;
|
|
|
+ case 'channelMiniprogram':
|
|
|
+ channelMiniprogramUseList({ limit: 30, ...params }).then(res => {
|
|
|
+ channelMiniprogram.value = res.data
|
|
|
+ })
|
|
|
+ break;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+const timeChange = (e: object) => {
|
|
|
+ console.log(e, 'timeChangetimeChangetimeChange');
|
|
|
+ if (query.value.time) {
|
|
|
+ const timeArr = toRaw(e);
|
|
|
+ query.value.start_at = timeArr[0]
|
|
|
+ query.value.end_at = timeArr[1]
|
|
|
+ } else {
|
|
|
+ delete query.value.start_at
|
|
|
+ delete query.value.end_at
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+const moreSearch = () => {
|
|
|
+ search();
|
|
|
+ statisticUserList({ ...query.value }).then(res => {
|
|
|
+ statisticalData.value = res.data
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+const moreReset = () => {
|
|
|
+ reset()
|
|
|
+ statisticUserList({ ...query.value }).then(res => {
|
|
|
+ statisticalData.value = res.data
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+const tableData = computed(() => data.value?.data);
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ initRemoteOption('channelPromotionsUsers')
|
|
|
+ initRemoteOption('channelMiniprogram')
|
|
|
+ query.value.time = [start_date, end_date];
|
|
|
+ query.value.start_at = start_date;
|
|
|
+ query.value.end_at = end_date;
|
|
|
+ moreSearch();
|
|
|
+});
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+.box-card {
|
|
|
+ width: 300px;
|
|
|
+ margin: 8px;
|
|
|
+
|
|
|
+ .money-wrapper {
|
|
|
+ height: 50px;
|
|
|
+ width: 100%;
|
|
|
+ color: #ed892c;
|
|
|
+ font-size: 26px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.stat-wrapper {
|
|
|
+ display: flex;
|
|
|
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
|
+
|
|
|
+ .stat {
|
|
|
+ box-sizing: border-box;
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 550;
|
|
|
+ padding: 0 12px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.table-default {
|
|
|
+ padding: 2px 4px 8px 4px;
|
|
|
+
|
|
|
+ .set-warpper {
|
|
|
+ height: 60px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-end;
|
|
|
+ }
|
|
|
+
|
|
|
+ .wrapper {
|
|
|
+ margin: 8px;
|
|
|
+
|
|
|
+ .label {
|
|
|
+ margin-right: 6px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .content {
|
|
|
+ font-size: 15px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
