优化用户列表查看ECPM弹窗

.env.development

@@ -8,5 +8,6 @@ ENV = 'development'
 # 本地 
 # VITE_BASE_URL = 'http://192.168.1.9:25001'
 # VITE_BASE_URL = 'http://192.168.1.159:25001'
-VITE_BASE_URL = 'http://192.168.1.20:25001'
+# VITE_BASE_URL = 'http://192.168.1.20:25001'
+VITE_BASE_URL = 'http://192.168.1.25:25001'
 

src/api/userModule.js

@@ -46,11 +46,11 @@ export function getEnabledList(params) {
 }
 
 // 查询用户ecpm数据
-export function appUserEcpm(params) {
+export function appUserEcpm(data) {
     return request({
         url: '/agent-service/appUser/ecpm',
-        method: 'get',
-        params
+        method: 'post',
+        data
     })
 }
 

src/views/main/userModule/components/ecpmDialog.vue

@@ -0,0 +1,173 @@
+<template>
+    <div class="layout-container">
+        <From v-if="loading" :form-items="dynamicFormItems" @formSubmitted="handleFormSubmitted" @formReset="handleFormReset" />
+
+        <div class="layout-container-table">
+            <Table @getTableData="changeTableData" v-model:page="page" ref="table" :data="tableData"
+                :height="isFullscreen ? 'calc(100vh - 300px)' : 'calc(100vh - 400px)'">
+                <el-table-column prop="userId" label="用户ID" width="120" />
+                <el-table-column prop="adSourceId" label="广告源ID" width="100" />
+                <el-table-column prop="loginStatus" label="登录状态" width="100">
+                    <template #default="scope">
+                        {{ scope.row.loginStatus === 1 ? '登录前' : '登录后' }}
+                    </template>
+                </el-table-column>
+                <el-table-column prop="beginTime" label="开始时间" width="100" />
+                <el-table-column prop="finishTime" label="完成时间" width="100" />
+                <el-table-column prop="ecpm" label="ECPM" width="100">
+                    <template #default="scope">
+                        {{ roundPrice(scope.row.ecpm) || 0.00 }}
+                    </template>
+                </el-table-column>
+                <el-table-column prop="adSourceType" label="广告源类型" width="160">
+                    <template #default="scope">
+                        {{ getDictionaryName('ad_source_type', scope.row.adSourceType) }}
+                    </template>
+                </el-table-column>
+                <el-table-column prop="adSourceIndex" label="竞价匹配优先级" width="130" />
+                <el-table-column prop="networkFormId" label="广告平台ID" width="100" />
+                <el-table-column prop="networkName" label="广告平台名称" width="120" />
+                <el-table-column prop="networkPlacementId" label="广告平台广告位ID" width="160" />
+                <el-table-column prop="nickName" label="用户昵称" min-width="100" />
+                <el-table-column prop="placementId" label="广告位ID" width="100" />
+                <el-table-column prop="recordId" label="广告记录ID" width="160" />
+                <el-table-column prop="revenue" label="收益" width="100">
+                    <template #default="scope">
+                        {{ roundPrice(scope.row.revenue) || 0.00 }}
+                    </template>
+                </el-table-column>
+            </Table>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { onBeforeMount, ref, reactive, watch } from "vue";
+import { useGetDictList } from '@/hooks/useGetDictList.js'
+import { roundPrice } from '@/utils/index.js'
+import { appUserEcpm } from '@/api/userModule.js'
+import From from "@/components/from/index.vue";
+import Table from "@/components/table/index.vue";
+
+// const emit = defineEmits(['handleFormSubmitted', 'handleFormReset'])
+const props = defineProps({
+    // 表格数据
+    isFullscreen: {
+        type: Boolean,
+        default: false
+    },
+    ecpmData: {
+        type: Object,
+        default: {}
+    },
+});
+
+const { loadDictData, getOptions, getDictionaryName } = useGetDictList();
+const table = ref(null)
+const loading = ref(false)
+const tableData = ref([]);
+
+const dynamicFormItems = ref([
+    {
+        label: '广告源类型',
+        prop: 'adsourceType',
+        type: 'select',
+        labelWidth: 100,
+        options: [],
+    },
+    {
+        label: '登录状态',
+        prop: 'loginStatus',
+        type: 'select',
+        labelWidth: 100,
+        defaultVal: 2,
+        options: [
+            { label: '登陆前', value: 1 },
+            { label: '登录后', value: 2 },
+        ],
+    }
+])
+
+// 分页参数, 供table使用
+const page = reactive({
+    pageNum: 1,
+    pageSize: 20,
+    total: 0,
+});
+
+const formSearch = ref({
+    appId: undefined, // 应用ID
+    userId: undefined, //用户ID
+    adsourceType: undefined,// 广告源类型
+    loginStatus: 2, //登录类型
+    page: 1, // 当前页码
+    limit: 20, // 当前页数量(查询量)
+});
+
+// 分页数据
+const getList = async () => {
+    let res = await appUserEcpm({ ...formSearch.value });
+    tableData.value = res.data;
+    page.total = res.pageMeta.total;
+};
+
+
+// 分页切换
+const changeTableData = (type) => {
+    formSearch.value.page = type ? 1 : page.pageNum;
+    formSearch.value.limit = page.pageSize;
+
+    getList();
+};
+
+// 搜索
+const handleFormSubmitted = (formData) => {
+    console.log("接收到子组件传递的数据", formData);
+    formSearch.value.adsourceType = formData.adsourceType || undefined;
+    formSearch.value.loginStatus = formData.loginStatus || undefined;
+
+    getList();
+};
+
+// 表单重置
+const handleFormReset = async() => {
+    formSearch.value = {
+        appId: props.ecpmData.appId, // 应用ID
+        userId: props.ecpmData.userId, //用户ID
+        adsourceType: undefined,// 广告源类型
+        loginStatus: 2, //登录类型
+        page: 1, // 当前页码
+        limit: 20, // 当前页数量(查询量)
+    };
+    page.pageNum = 1
+    page.pageSize = 20
+    page.total = 0
+
+    await getFormOptions()
+    await getList();
+};
+
+const getFormOptions = async() => {
+    loading.value = false
+    loadDictData().then(() => {
+        dynamicFormItems.value[0].options = getOptions('ad_source_type')
+        dynamicFormItems.value[1].defaultVal = 2
+    }).finally(() => {
+        loading.value = true
+    })
+}
+
+watch(() => props.ecpmData, (newVal) => {
+    formSearch.value.appId = props.ecpmData.appId
+    formSearch.value.userId = props.ecpmData.userId
+
+    getList()
+}, { immediate: true, deep: true })
+
+onBeforeMount(() => {
+    getFormOptions()
+})
+
+</script>
+
+<style lang='scss' scoped></style>

src/views/main/userModule/userList.vue

@@ -51,7 +51,8 @@
         <el-table-column prop="communicationOperator" label="通信运营商" width="130" />
         <el-table-column prop="loginRecordList" label="用户设备" width="200">
           <template #default="scope">
-            {{ scope.row.loginRecordList ? scope.row.loginRecordList[0].deviceBrand : '' }} {{ scope.row.loginRecordList?scope.row.loginRecordList[0].deviceModel:'' }}
+            {{ scope.row.loginRecordList ? scope.row.loginRecordList[0].deviceBrand : '' }} {{
+              scope.row.loginRecordList ? scope.row.loginRecordList[0].deviceModel : '' }}
           </template>
         </el-table-column>
         <el-table-column prop="deviceRepeatCount" label="设备重复数量" width="110" />
@@ -123,43 +124,13 @@
       </el-form>
     </Layer>
 
-    <Layer :layer="ecpmLayer" @confirm="ecpmLayer.show = false" @close="ecpmLayer.show = false">
-      <From :form-items="dynamicFormItems1" @formSubmitted="handleFormSubmitted1" @formReset="handleFormReset1" />
-      <el-divider></el-divider>
-      <Table :showPage="false" ref="ecpmTable" :data="ecpmData" :height="ecpmLayer.height">
-        <el-table-column prop="userId" label="用户ID" width="120" />
-        <el-table-column prop="adSourceId" label="广告源ID" width="100" />
-        <el-table-column prop="beginTime" label="开始时间" width="100" />
-        <el-table-column prop="finishTime" label="完成时间" width="100" />
-        <el-table-column prop="ecpm" label="ECPM" width="100">
-          <template #default="scope">
-            {{ roundPrice(scope.row.ecpm) || 0.00 }}
-          </template>
-        </el-table-column>
-        <el-table-column prop="adSourceType" label="广告源类型" width="160">
-          <template #default="scope">
-            {{ getDictionaryName('ad_source_type', scope.row.adSourceType) }}
-          </template>
-        </el-table-column>
-        <el-table-column prop="adSourceIndex" label="竞价匹配优先级" width="130" />
-        <el-table-column prop="networkFormId" label="广告平台ID" width="100" />
-        <el-table-column prop="networkName" label="广告平台名称" width="120" />
-        <el-table-column prop="networkPlacementId" label="广告平台广告位ID" width="160" />
-        <el-table-column prop="nickName" label="用户昵称" min-width="100" />
-        <el-table-column prop="placementId" label="广告位ID" width="100" />
-        <el-table-column prop="recordId" label="广告记录ID" width="160" />
-        <el-table-column prop="revenue" label="收益" width="100">
-          <template #default="scope">
-            {{ roundPrice(scope.row.revenue) || 0.00 }}
-          </template>
-        </el-table-column>
-      </Table>
-      <template #bottom>
-        <div style="position: absolute;bottom: 0px;right: 10px;">
-          共：{{ ecpmData.length }}
-        </div>
-      </template>
-    </Layer>
+    <el-dialog v-model="ecpmLayer.show" :title="`查看用户《${ecpmData.nickName}》的ECPM`" :width="ecpmLayer.width" align-center center
+       :fullscreen="isFullscreen">
+      <el-icon class=" full-icon" @click="isFullscreen = !isFullscreen">
+        <FullScreen />
+      </el-icon>
+      <EcpmDialog v-if="ecpmLayer.show" v-model:isFullscreen="isFullscreen" :ecpmData="ecpmData"   />
+    </el-dialog>
 
     <!-- 审核备注 -->
     <Layer :layer="layer2" @confirm="submit2(ruleForm2)" @close="layer2.show = false">
@@ -184,6 +155,7 @@ import { onBeforeMount, ref, reactive, nextTick } from "vue";
 import From from "@/components/from/index.vue";
 import Table from "@/components/table/index.vue";
 import Layer from '@/components/layer/index.vue'
+import { FullScreen } from '@element-plus/icons'
 import { ElMessage, ElLoading } from 'element-plus'
 import {
   getUserList, riskBannedUser, riskLockUser, appUserEcpm, getRevenueByTime,
@@ -196,6 +168,7 @@ import { convertUTCToBeijing, roundPrice, getTodayRangeLocal } from '@/utils/ind
 import { useGetDictList } from '@/hooks/useGetDictList.js'
 import { useStore } from 'vuex'
 import { exportToExcel } from '@/utils/exportExcel.js'
+import EcpmDialog from "./components/ecpmDialog.vue";
 
 const store = useStore()
 const { loadDictData, getOptions, getDictionaryName } = useGetDictList();
@@ -223,7 +196,6 @@ const formSearch = ref({
 });
 
 const dynamicFormItems = ref([])
-const dynamicFormItems1 = ref([])
 
 onBeforeMount(() => {
   settingData()
@@ -270,16 +242,6 @@ const settingData = async () => {
       { label: '注册时间结束', prop: 'registryTimeEnd', type: 'date' },
     ]
 
-    // 查看ECPM
-    dynamicFormItems1.value = [
-      {
-        label: '广告源类型',
-        prop: 'adsourceType',
-        type: 'select',
-        labelWidth: 100,
-        options: getOptions('ad_source_type'),
-      },
-    ]
     // 设置动态选项
     getApiOptions()
   })
@@ -666,45 +628,17 @@ const lockUser = async (row) => {
 }
 
 // 查看ECPM
+const ecpmData = ref({})
+const isFullscreen = ref(false)
 const ecpmLayer = ref({
   show: false,
   title: "查看ECPM",
   showButton: true,
   width: '95vw',
-  height: '60vh'
 });
 
-
-const formSearch1 = ref({
-  appId: undefined, // 应用ID
-  userId: undefined, //用户ID
-  adsourceType: undefined,// 广告源类型
-});
-
-const handleFormSubmitted1 = (formData) => {
-  // console.log("接收到子组件传递的数据", formData);
-  formSearch1.value.adsourceType = formData.adsourceType;
-
-  lookEcpm();
-};
-const handleFormReset1 = () => {
-  delete formSearch1.value.adsourceType // 渠道来源
-
-  lookEcpm();
-};
-
-const ecpmTable = ref(null)
-const ecpmData = ref([])
-
 const lookEcpm = async (row) => {
-  if (row) {
-    formSearch1.value.appId = row.appId
-    formSearch1.value.userId = row.userId
-    formSearch1.value.adsourceType = undefined
-  }
-  ecpmData.value = []
-  let res = await appUserEcpm({ ...formSearch1.value })
-  ecpmData.value = res.data
+  ecpmData.value = row
   ecpmLayer.value.show = true
 }
 
@@ -887,4 +821,13 @@ const tableHeader = {
   display: flex;
   margin: 10px 0 -10px 30px;
 }
+
+.full-icon {
+  position: absolute;
+  right: 40px;
+  top: 15px;
+  cursor: pointer;
+  padding: 8px;
+  border-radius: 5px;
+}
 </style>