dms-web/src/views/v1/gameLog/agent/index.vue

<template>
  <div class="ma-content-block">
    <sa-table
      ref="crudRef"
      :options="options"
      :columns="columns"
      :searchForm="searchForm"
    >
      <!-- 搜索区 tableSearch -->
      <template #tableSearch>
        <a-col :sm="24" :md="8" :lg="8" :xl="6" :xxl="4" :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="24" :md="17" :lg="17" :xl="12" :xxl="8" :xs="24">
          <a-form-item label="注册日期" field="tdate">
            <a-space>
              <a-range-picker
                class="w-full"
                v-model="searchForm.tdate"
                :show-time="false"
                mode="date"
              />
              <a-button
                size="mini"
                type="outline"
                @click="refreshDay('yesterday')"
                >前一天</a-button
              >
              <a-button size="mini" type="outline" @click="refreshDay('today')"
                >当天</a-button
              >
              <a-button
                size="mini"
                type="outline"
                @click="refreshDay('tomorrow')"
                >后一天</a-button
              >
            </a-space>
          </a-form-item>
        </a-col>
        <a-col :sm="24" :md="8" :lg="8" :xl="6" :xxl="4" :xs="24">
          <a-form-item label="媒体类型" field="media_id">
            <media-select v-model="searchForm.media_id" />
          </a-form-item>
        </a-col>
        <a-col :sm="24" :md="8" :lg="8" :xl="6" :xxl="4" :xs="24">
          <a-form-item label="渠道ID" field="agent_id">
            <a-input
              v-model="searchForm.agent_id"
              placeholder="请输入渠道ID"
              allow-clear
            />
          </a-form-item>
        </a-col>
        <a-col :sm="24" :md="8" :lg="8" :xl="6" :xxl="4" :xs="24">
          <a-form-item label="广告位ID" field="site_id">
            <a-input
              v-model="searchForm.site_id"
              placeholder="请输入广告位ID"
              allow-clear
            />
          </a-form-item>
        </a-col>
        <a-col :sm="24" :md="8" :lg="8" :xl="6" :xxl="4" :xs="24">
          <a-form-item label="负责人" field="auth_id">
            <auth-select v-model="searchForm.auth_id" multiple />
          </a-form-item>
        </a-col>
        <a-col :sm="24" :md="8" :lg="8" :xl="6" :xxl="4" :xs="24">
          <a-form-item label="分组" field="group">
            <a-select
              v-model="searchForm.group"
              placeholder="请选择分组"
              allow-clear
            >
              <a-option value="">按渠道ID</a-option>
              <a-option :value="1">按游戏ID</a-option>
              <!-- <a-option :value="4">按游戏组</a-option> -->
              <a-option :value="2">按负责人</a-option>
              <a-option :value="3">按渠道组</a-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :sm="24" :md="8" :lg="8" :xl="8" :xxl="8" :xs="24">
          <a-form-item label="其他" field="filter">
            <a-space direction="vertical">
              <a-checkbox-group v-model="searchForm.filter">
                <a-checkbox value="igz">忽略0投入</a-checkbox>
                <a-checkbox value="fak">忽略后台录入</a-checkbox>
              </a-checkbox-group>
            </a-space>
          </a-form-item>
        </a-col>
      </template>
      <template #tableSearchExtend>
        <div class="text-red-500 font-bold">
          <a-space>
            大盘数据：注册成本 {{ total.reg_cost }}, roi {{ total.roi }},
            付费成本 {{ total.p_cost }}, 付费率
            {{ total.p_per }}
          </a-space>
        </div>
      </template>

      <!-- Table 自定义渲染 -->
    </sa-table>
  </div>
</template>

<script setup>
import { onMounted, ref, reactive } from "vue";
import api from "../../api/gameLog/channelAnalysis";
import dayjs from "dayjs";
import GameSelect from "@/components/game-select/index.vue";
import MediaSelect from "@/components/media-select/index.vue";

import AuthSelect from "@/components/auth-select/index.vue";

// 引用定义
const crudRef = ref();
const gameList = ref([]);

const total = ref({
  reg_cost: 0,
  roi: 0,
  p_cost: 0,
  p_per: 0,
});

// 搜索表单
const searchForm = ref({
  game_id: "",
  media_id: "",
  auth_id: "",
  agent_id: "",
  site_id: "",
  tdate: [],
  group: "",
  filter: [],
});

// SaTable 基础配置
const options = reactive({
  api: api.getAgentDataList,
  pk: "akey",
  showSort: true,
  showSummary: true,
  summary: [
    {
      action: "totalRow",
      dataIndex: "akey",
    },
    {
      action: "totalRow",
      dataIndex: "cost",
    },
    {
      action: "totalRow",
      dataIndex: "install",
    },
    {
      action: "totalRow",
      dataIndex: "reg_dev",
    },
    {
      action: "totalRow",
      dataIndex: "reg_total",
    },
    {
      action: "totalRow",
      dataIndex: "role_total",
    },
    {
      action: "totalRow",
      dataIndex: "role_per",
    },
    {
      action: "totalRow",
      dataIndex: "active",
    },
    {
      action: "totalRow",
      dataIndex: "a_cost",
    },
    {
      action: "totalRow",
      dataIndex: "a_per",
    },
    {
      action: "totalRow",
      dataIndex: "reg_pay_num",
    },
    {
      action: "totalRow",
      dataIndex: "reg_pay_total",
    },
    {
      action: "totalRow",
      dataIndex: "p_per",
    },
    {
      action: "totalRow",
      dataIndex: "da_per",
    },
    {
      action: "totalRow",
      dataIndex: "re_per",
    },
    {
      action: "totalRow",
      dataIndex: "re_amount_per",
    },
    {
      action: "totalRow",
      dataIndex: "re_amount_per_7",
    },
    {
      action: "totalRow",
      dataIndex: "p_cost",
    },
    {
      action: "totalRow",
      dataIndex: "arpu",
    },
    {
      action: "totalRow",
      dataIndex: "r_arpu",
    },
    {
      action: "totalRow",
      dataIndex: "old_login_total",
    },
  ],
  operationColumn: false,
});

// SaTable 列配置
const columns = reactive([
  { title: "ID", dataIndex: "akey", width: 100, fixed: "left" },
  { title: "支出", dataIndex: "cost", width: 100 },
  { title: "激活", dataIndex: "install", width: 100 },
  { title: "注册设备", dataIndex: "reg_dev", width: 100 },
  { title: "注册数", dataIndex: "reg_total", width: 100 },
  { title: "注册成本", dataIndex: "reg_cost", width: 100 },
  { title: "创角数", dataIndex: "role_total", width: 100 },
  { title: "创角率", dataIndex: "role_per", width: 100 },
  { title: "次留数", dataIndex: "active", width: 100 },
  { title: "次留成本", dataIndex: "a_cost", width: 100 },
  { title: "次留率", dataIndex: "a_per", width: 100 },
  { title: "总付费人数", dataIndex: "reg_pay_num", width: 100 },
  { title: "总付费金额", dataIndex: "reg_pay_total", width: 100 },
  { title: "付费率", dataIndex: "p_per", width: 100 },
  { title: "当天回本率", dataIndex: "da_per", width: 100 },
  { title: "累计回本率", dataIndex: "re_per", width: 100 },
  { title: "实际回本率", dataIndex: "re_amount_per", width: 100 },
  { title: "7天实际回本率", dataIndex: "re_amount_per_7", width: 100 },
  { title: "付费成本", dataIndex: "p_cost", width: 100 },
  { title: "ARPU", dataIndex: "arpu", width: 100 },
  { title: "注册ARPU", dataIndex: "r_arpu", width: 100 },

  { title: "老用户数", dataIndex: "old_login_total", width: 100 },

  { title: "分组名称", dataIndex: "name", width: 100 },
  { title: "负责人", dataIndex: "auth_name", width: 100 },
]);

// 页面数据初始化
const initPage = () => {
  searchForm.value.tdate = [
    dayjs().format("YYYY-MM-DD"),
    dayjs().format("YYYY-MM-DD"),
  ];
};

const refreshDay = async (day) => {
  switch (day) {
    case "yesterday":
      searchForm.value.tdate = [
        dayjs(searchForm.value.tdate[0])
          .subtract(1, "day")
          .format("YYYY-MM-DD"),
        dayjs(searchForm.value.tdate[1])
          .subtract(1, "day")
          .format("YYYY-MM-DD"),
      ];
      break;
    case "today":
      searchForm.value.tdate = [
        dayjs().format("YYYY-MM-DD"),
        dayjs().format("YYYY-MM-DD"),
      ];
      break;
    case "tomorrow":
      searchForm.value.tdate = [
        dayjs(searchForm.value.tdate[0]).add(1, "day").format("YYYY-MM-DD"),
        dayjs(searchForm.value.tdate[1]).add(1, "day").format("YYYY-MM-DD"),
      ];
      break;
    default:
      break;
  }
  refresh();
};

// SaTable 数据请求
const refresh = async () => {
  crudRef.value?.refresh();
};

// 页面加载完成执行
onMounted(async () => {
  initPage();
  refresh();
});
</script>

<script>
export default { name: "v1/channelAnalysis/agent" };
</script>