dms-web/src/views/v1/gameLog/agentByDay/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="8" :lg="8" :xl="6" :xxl="5" :xs="24">
          <a-form-item label="注册日期" field="tdate">
            <a-range-picker
              class="w-full"
              v-model="searchForm.tdate"
              :show-time="false"
              mode="date"
            />
          </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="渠道名称" field="agent_name">
            <a-input
              v-model="searchForm.agent_name"
              placeholder="渠道名称"
              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="3" :xs="24">
          <a-form-item label="广告名称" field="site_name">
            <a-input
              v-model="searchForm.site_name"
              placeholder="广告名称"
              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="5" :xs="24">
          <a-form-item label="媒体类型" field="media_id">
            <media-select v-model="searchForm.media_id" />
          </a-form-item>
        </a-col>
      </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 searchForm = ref({
  game_id: "",
  media_id: "",
  auth_id: "",
  agent_id: "",
  agent_name: "",
  site_name: "",
  site_id: "",
  tdate: [],
});

// SaTable 基础配置
const options = reactive({
  api: api.getAgentDayDataList,
  pk: "tdate",

  showSummary: true,
  showSort: true,
  summary: [
    {
      action: "totalRow",
      dataIndex: "tdate",
    },
    {
      suffixText: "元",
      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: "old_login_total",
    },
    {
      action: "totalRow",
      dataIndex: "reg_cost",
    },
    {
      action: "totalRow",
      dataIndex: "p_cost",
    },
    {
      action: "totalRow",
      dataIndex: "arpu",
    },
    {
      action: "totalRow",
      dataIndex: "r_arpu",
    },
    {
      action: "totalRow",
      dataIndex: "agent_name",
    },
    {
      action: "totalRow",
      dataIndex: "site_name",
    },
    {
      action: "totalRow",
      dataIndex: "auth_name",
    },
    {
      action: "totalRow",
      dataIndex: "pay_total",
    },
    {
      action: "totalRow",
      dataIndex: "pay_amount",
    },
    {
      action: "totalRow",
      dataIndex: "pay_cost",
    },
  ],

  operationColumn: false,
});

// SaTable 列配置
const columns = reactive([
  { title: "日期", dataIndex: "tdate", width: 130, fixed: "left" },
  { title: "支出", dataIndex: "cost", width: 100 },
  { title: "展示IP", dataIndex: "show_ip", width: 100 },
  { title: "激活", dataIndex: "install", width: 100 },
  { title: "激活率", dataIndex: "i_per", width: 100 },

  { title: "注册设备", dataIndex: "reg_dev", width: 100 },
  { title: "注册数", dataIndex: "reg_total", width: 100 },
  { title: "注册率", dataIndex: "r_per", 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: "p_cost", width: 100 },

  { title: "ARPU", dataIndex: "arpu", width: 100 },
  { title: "注册ARPU", dataIndex: "r_arpu", width: 100 },

  { title: "当天回本率", dataIndex: "da_per", width: 100 },
  { title: "累计回本率", dataIndex: "re_per", width: 100 },
  { title: "实际回本率", dataIndex: "re_amount_per", width: 100 },

  { title: "老用户数", dataIndex: "old_login_total", width: 100 },
  { title: "当天收入", dataIndex: "pay_total", width: 100 },
  { title: "实际收入", dataIndex: "pay_amount", width: 100 },
  { title: "实际收支比", dataIndex: "pay_cost", width: 130 },
]);

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

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

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

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