投入产出

src/router/modules/charge.ts

@@ -1,28 +1,41 @@
-// import { RouteRecordRaw } from 'vue-router';
-// // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// // @ts-ignore
-// const router: RouteRecordRaw[] = [
-//   {
-//     path: '/charge',
-//     component: () => import('@/layout/index.vue'),
-//     meta: { title: '数据统计', icon: 'user' },
-//     children: [
-//       {
-//         path: 'index',
-//         name: 'user-account11',
-//         meta: { title: '短剧统计', icon: 'home' },
-//         component: () =>
-//           import('@/views/dataStatistics/shortStatistical/index.vue')
-//       },
-//       {
-//         path: 'index1',
-//         name: 'user-account',
-//         meta: { title: '充值统计', icon: 'home' },
-//         component: () =>
-//           import('@/views/dataStatistics/rechargeStatistics/index.vue')
-//       }
-//     ]
-//   }
-// ];
+import { RouteRecordRaw } from 'vue-router';
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+const router: RouteRecordRaw[] = [
+  {
+    path: '/charge',
+    component: () => import('@/layout/index.vue'),
+    meta: { title: '数据统计', icon: 'user' },
+    children: [
+      {
+        path: 'index',
+        name: 'user-account11',
+        meta: { title: '短剧统计', icon: 'home' },
+        component: () =>
+          import('@/views/dataStatistics/shortStatistical/index.vue')
+      },
+      {
+        path: 'index3',
+        name: 'user-account112',
+        meta: { title: '投入产出', icon: 'home' },
+        component: () =>
+          import('@/views/dataStatistics/roiStatistical/index.vue')
+      },
+      {
+        path: 'index1',
+        name: 'user-account',
+        meta: { title: '充值统计', icon: 'home' },
+        component: () =>
+          import('@/views/dataStatistics/rechargeStatistics/index.vue')
+      },
+      {
+        path: 'index2',
+        name: 'user-account99',
+        meta: { title: '微信提审', icon: 'home', hidden: true },
+        component: () => import('@/views/videoManage/wechatAudit/index.vue')
+      }
+    ]
+  }
+];
 
-// export default router;
+export default router;

src/views/dataStatistics/roiStatistical/excelTitle.ts

@@ -1,10 +1,24 @@
 // 导出中文/字段
 export const titleObj = {
-  时间: 'day',
-  短剧名称: 'video_name',
-  短剧ID: 'video_id',
-  充值金额: 'amount',
-  充值次数: 'charge_count',
-  充值人数: 'charge_user_num',
-  播放次数: 'play_count'
+  时间: 'day_at',
+  商户名称: 'company_username',
+  优化师: 'optimizer_name',
+  小程序名称: 'miniprogram_name',
+  推广链接: 'promotion_name',
+  当日新增用户数: 'new_user_num',
+  累计充值人数: 'new_user_pay_uv',
+  投放成本: 'cost_money',
+  回本率金额: 'new_user_pay_money',
+  回本: 'huiben',
+  新增用户成本: 'new_user_cost_money',
+  新用户人均充值: 'new_user_pay_money_per',
+  会员成本金额: 'new_user_vip_pay_money',
+  会员成本人数: 'new_user_vip_pay_uv',
+  会员成本累计: 'vip_money_per',
+  充值成本金额: 'new_user_pay_money',
+  充值成本人数: 'new_user_common_pay_uv',
+  充值成本累计: 'common_money_per',
+  会员转化率: 'zhuanhua_vip',
+  充值转化率: 'zhuanhua_common',
+  总计转化率: 'zhuanhua_all'
 };

src/views/dataStatistics/roiStatistical/index.vue

@@ -2,43 +2,91 @@
   <div>
     <Search :search="moreSearch" :reset="moreReset">
       <template v-slot:body>
-        <el-form-item label="短剧名称" prop="video_name">
-          <el-input v-model="query.video_name" placeholder="请输入短剧名称" clearable />
-        </el-form-item>
         <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="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>
+        <el-form-item label="推广名称" prop="ranse_id">
+          <el-select v-model="query.ranse_id" filterable remote clearable
+            :remote-method="(query) => { remoteMethod(query, 'channelPromotions') }" placeholder="选择推广名称">
+            <el-option v-for="item in channelPromotions" :key="item.promotion_id" :label="item.name"
+              :value="item.promotion_id" />
+          </el-select>
+        </el-form-item>
       </template>
       <template v-slot:extra_button>
-        <exportExcel api="statistic/video/list" sheet_name="短剧统计" :title_obj="titleObj"
-          :extro_params="{ is_export: true, ...query }">
+        <exportExcel api="statistic/roi/list" sheet_name="投入产出" :title_obj="titleObj"
+          :extro_params="{ is_export: 1, ...query }">
         </exportExcel>
       </template>
     </Search>
-    <div style="margin:8px 0;" v-action="'statistic.VideoStat.stats'">
+    <div style="margin:8px 0;" v-action="'statistic.ROITJ.listTotal'">
       <el-card shadow="hover" :body-style="{ padding: '20px' }">
         <div class="stat-wrapper">
-          <div>所选时间段内累计充值金额: <span class="ml-2 mr-4 stat">{{ statisticalData.amount || '暂无数据' }}</span>
+          <div>所选时间段内总收入: <span class="ml-2 mr-4 stat">{{ statisticalData.pay_money || '暂无数据' }}</span>
           </div>
-          <div>累计充值次数: <span class="ml-2 mr-4 stat">{{ statisticalData.charge_count || '暂无数据' }}</span>
+          <div>总成本: <span class="ml-2 mr-4 stat">{{ statisticalData.cost_money || '暂无数据' }}</span>
           </div>
-          <div>累计充值人数: <span class="ml-2 mr-4 stat">{{ statisticalData.charge_user_num || '暂无数据' }}</span></div>
         </div>
       </el-card>
     </div>
-    <div class="table-default" v-action="'statistic.VideoStat.index'">
+    <div class="table-default" v-action="'statistic.ROITJ.list'">
       <el-table :data="tableData" class="mt-3" v-loading="loading">
-        <el-table-column prop="day" label="时间" />
-        <el-table-column prop="video_name" label="短剧名称" min-width="160px" />
-        <el-table-column prop="video_id" label="短剧ID" />
-        <el-table-column label="充值金额" sortable prop="amount">
+        <el-table-column prop="day_at" label="时间" min-width="150px" />
+        <el-table-column prop="company_username" label="商户名称" min-width="100px" />
+        <el-table-column prop="optimizer_name" label="优化师" min-width="150px" />
+        <el-table-column prop="miniprogram_name" label="小程序名称" min-width="150px" />
+        <el-table-column prop="promotion_name" label="推广链接" min-width="100px" />
+        <el-table-column label="新增人数" prop="" min-width="180px">
+          <template #header>
+            <span>新增人数</span>
+            <el-tooltip placement="top">
+              <template #content>
+                当日新增用户数:当日新增用户<br />
+                累计充值人数:新增用户中的累计付费人数
+              </template>
+              <el-icon>
+                <InfoFilled />
+              </el-icon>
+            </el-tooltip>
+          </template>
+          <template #default="scope">
+            <div class="wrapper">
+              <div>
+                <span>当日新增用户数：</span>
+                <span>{{ scope.row.new_user_num }}</span>
+              </div>
+              <div>
+                <span>累计充值人数：</span>
+                <span>{{ scope.row.new_user_pay_uv }}</span>
+              </div>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="投放成本" prop="" min-width="100px">
+          <template #default="scope">
+            <div class="wrapper">
+              <div>
+                <span>{{ scope.row.cost_money }}</span>
+              </div>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="回本率" prop="" min-width="150px">
           <template #header>
-            <span>充值金额</span>
+            <span>回本率</span>
             <el-tooltip placement="top">
               <template #content>
-                当日短剧充值总额；基于推广公司的小程序统计；<br />
+                金额:当前日期新增用户的充值金额<br />
+                回本:金额/投放成本
               </template>
               <el-icon>
                 <InfoFilled />
@@ -47,16 +95,24 @@
           </template>
           <template #default="scope">
             <div class="wrapper">
-              <div>{{ scope.row.amount }}</div>
+              <div>
+                <span>金额：</span>
+                <span>{{ scope.row.new_user_pay_money }}</span>
+              </div>
+              <div>
+                <span>回本：</span>
+                <span>{{ scope.row.huiben }}</span>
+              </div>
             </div>
           </template>
         </el-table-column>
-        <el-table-column label="充值次数" sortable prop="charge_count">
+        <el-table-column label="获客成本" prop="" min-width="180px">
           <template #header>
-            <span>充值次数</span>
+            <span>获客成本</span>
             <el-tooltip placement="top">
               <template #content>
-                当日短剧充值总次数；基于推广公司的小程序统计；<br />
+                新增用户成本:投放成本/新增用户数<br />
+                新增用户人均充值金额:新增用户充值金额/新增用户充值人数
               </template>
               <el-icon>
                 <InfoFilled />
@@ -65,16 +121,25 @@
           </template>
           <template #default="scope">
             <div class="wrapper">
-              <div>{{ scope.row.charge_count }}</div>
+              <div>
+                <span>新增用户成本：</span>
+                <span>{{ scope.row.new_user_cost_money }}</span>
+              </div>
+              <div>
+                <span>新用户人均充值：</span>
+                <span>{{ scope.row.new_user_pay_money_per }}</span>
+              </div>
             </div>
           </template>
         </el-table-column>
-        <el-table-column label="充值人数" sortable prop="charge_user_num">
+        <el-table-column label="会员成本" prop="" min-width="150px">
           <template #header>
-            <span>充值人数</span>
+            <span>会员成本</span>
             <el-tooltip placement="top">
               <template #content>
-                当日累计充值人数；基于推广公司的小程序统计；<br />
+                金额:全站会员充值的金额<br />
+                人数:会员充值的人数<br />
+                累计:成本/累计全站会员人数
               </template>
               <el-icon>
                 <InfoFilled />
@@ -83,16 +148,29 @@
           </template>
           <template #default="scope">
             <div class="wrapper">
-              <div>{{ scope.row.charge_user_num }}</div>
+              <div>
+                <span>金额：</span>
+                <span>{{ scope.row.new_user_vip_pay_money }}</span>
+              </div>
+              <div>
+                <span>人数：</span>
+                <span>{{ scope.row.new_user_vip_pay_uv }}</span>
+              </div>
+              <div>
+                <span>累计：</span>
+                <span>{{ scope.row.vip_money_per }}</span>
+              </div>
             </div>
           </template>
         </el-table-column>
-        <el-table-column label="播放次数" sortable prop="play_count">
+        <el-table-column label="充值成本" prop="" min-width="150px">
           <template #header>
-            <span>播放次数</span>
+            <span>充值成本</span>
             <el-tooltip placement="top">
               <template #content>
-                当日短剧累计播放次数：指当日绑定此短剧的所有推广链接，累计被点击次数<br />
+                金额:普通充值的金额<br />
+                人数:普通充值的人数<br />
+                累计:成本/累计普通充值人数
               </template>
               <el-icon>
                 <InfoFilled />
@@ -101,7 +179,49 @@
           </template>
           <template #default="scope">
             <div class="wrapper">
-              <div>{{ scope.row.play_count }}</div>
+              <div>
+                <span>金额：</span>
+                <span>{{ scope.row.new_user_pay_money }}</span>
+              </div>
+              <div>
+                <span>人数：</span>
+                <span>{{ scope.row.new_user_common_pay_uv }}</span>
+              </div>
+              <div>
+                <span>累计：</span>
+                <span>{{ scope.row.common_money_per }}</span>
+              </div>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="转化率" prop="" min-width="150px">
+          <template #header>
+            <span>转化率</span>
+            <el-tooltip placement="top">
+              <template #content>
+                会员:会员人数/总新增人数<br />
+                充值:普通充值人数/总新增人数<br />
+                总计:总充值人数/总新增人数
+              </template>
+              <el-icon>
+                <InfoFilled />
+              </el-icon>
+            </el-tooltip>
+          </template>
+          <template #default="scope">
+            <div class="wrapper">
+              <div>
+                <span>会员：</span>
+                <span>{{ scope.row.zhuanhua_vip }}</span>
+              </div>
+              <div>
+                <span>充值：</span>
+                <span>{{ scope.row.zhuanhua_common }}</span>
+              </div>
+              <div>
+                <span>总计：</span>
+                <span>{{ scope.row.zhuanhua_all }}</span>
+              </div>
             </div>
           </template>
         </el-table-column>
@@ -115,40 +235,74 @@ 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 { statisticVideoStats } from '@/api/dataStatistics/shortStatistical/index';
+import { statisticRoiListTotal } from '@/api/dataStatistics/roiStatistical/index';
 import { titleObj } from "./excelTitle";
+import {
+  channelMiniprogramUseList,
+  channelPromotionsOptions,
+} from '@/api/orders/index'
 import moment from 'moment';
-const start_date = moment().subtract(7, 'days').format('YYYY-MM-DD');
-const end_date = moment().format('YYYY-MM-DD');
+const start_date = moment().subtract(1, 'days').format('YYYY-MM-DD');;
+const end_date = moment().subtract(1, 'days').format('YYYY-MM-DD');;
 const statisticalData = ref({});
-const api = 'statistic/video/list';
+const api = 'statistic/roi/list';
 const router = useRouter()
 const route = useRoute()
 const { data, query, search, reset, loading } = useGetList(api);
 const rolesIdentify = inject('rolesIdentify')
+const channelMiniprogram = ref([])
+const channelPromotions = ref([])
+
+
+const remoteMethod = (query: string, type: string,) => {
+  console.log(query, 'queryquery', type);
+  switch (type) {
+    case 'channelPromotions':
+      initRemoteOption('channelPromotions', { name: query })
+      break;
+    case 'channelMiniprogram':
+      initRemoteOption('channelMiniprogram', { name: query })
+      break;
+  }
+}
+
+const initRemoteOption = (type: string, params?: object) => {
+  switch (type) {
+    case 'channelPromotions':
+      channelPromotionsOptions({ limit: 30, ...params }).then(res => {
+        channelPromotions.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_date = timeArr[0]
-    query.value.end_date = timeArr[1]
+    query.value.start_at = timeArr[0]
+    query.value.end_at = timeArr[1]
   } else {
-    delete query.value.start_date
-    delete query.value.end_date
+    delete query.value.start_at
+    delete query.value.end_at
   }
 }
 
 const moreSearch = () => {
   search();
-  statisticVideoStats({ ...query.value }).then(res => {
+  statisticRoiListTotal({ ...query.value }).then(res => {
     statisticalData.value = res.data
   })
 }
 
 const moreReset = () => {
   reset()
-  statisticVideoStats({ ...query.value }).then(res => {
+  statisticRoiListTotal({ ...query.value }).then(res => {
     statisticalData.value = res.data
   })
 }
@@ -156,9 +310,11 @@ const moreReset = () => {
 const tableData = computed(() => data.value?.data);
 
 onMounted(() => {
+  initRemoteOption('channelMiniprogram')
+  initRemoteOption('channelPromotions')
   query.value.time = [start_date, end_date];
-  query.value.start_date = start_date;
-  query.value.end_date = end_date;
+  query.value.start_at = start_date;
+  query.value.end_at = end_date;
   moreSearch();
 });
 </script>