zhiyu_duanju_distribution_manage_front/src/views/dataStatistics/userStatistics/index.vue

<template>
  <div>
    <!-- 统计 -->
    <summaryStatistics></summaryStatistics>
    <Search :search="moreSearch" :reset="moreReset">
      <template v-slot:body>
        <div v-if="rolesIdentify.includes('optimizer')" class="w-full m-3 text-gray-500">
          *列表统计的是所有小程序对应日期的数据
        </div>
        <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>
      <template v-slot:content>
        <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  v-if="!rolesIdentify.includes('optimizer')" 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>
      </template>
    </Search>
  </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>