Trang chủ Khám phá Trợ giúp
Đăng ký Đăng nhập
dark6f
/
Game-Backstage-Management-System
1
0
Fork 0
Các tập tin Các vấn đề 0 Yêu cầu kéo về 0 Wiki
Browse Source

feat(新增广告数据页): 主页新增广告数据菜单，可查看广告数据总览及广告列表

主页新增广告数据菜单，可查看广告数据总览及广告列表

CustomTable组件：
    -查询表单现在可以支持选择框多选
    -对选择框的label新增补充描述功能，增加supplementInfo即可补充描述;
fxs 6 tháng trước cách đây
mục cha
11f8263541
commit
d861c5194f
13 tập tin đã thay đổi với 611 bổ sung và 25 xóa
Split View Hiển thị tình trạng sai khác
  1. 3 2
      index.html
  2. 11 0
      package-lock.json
  3. 1 0
      package.json
  4. 3 2
      src/components/dataAnalysis/TemporalTrend.vue
  5. 159 2
      src/components/table/CustomTable.vue
  6. 7 3
      src/hooks/useRequest.ts
  7. 29 1
      src/router/home.ts
  8. 2 2
      src/types/dataAnalysis.ts
  9. 7 1
      src/types/table.ts
  10. 12 9
      src/utils/axios/axiosInstance.ts
  11. 223 0
      src/views/Home/AdvertisingData/AdvertisingList.vue
  12. 150 0
      src/views/Home/AdvertisingData/AdvertisingOverview.vue
  13. 4 3
      src/views/IndexView.vue

+ 3 - 2
index.html
Xem Tập Tin 

@@ -2,9 +2,10 @@
 
 <html lang="en">
 
   <head>
 
     <meta charset="UTF-8" />
 
-    <link rel="icon" href="/logo.svg" />
 
+    <link rel="icon" href="/logoTest.svg" />
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
-    <title>淳皓游戏管理平台</title>
 
+    <!-- <title>淳皓游戏管理平台</title> -->
 
+    <title>测试库-游戏管理平台</title>
 
   </head>
 
   <body>
 
     <div id="app"></div>

+ 11 - 0
package-lock.json
Xem Tập Tin 

@@ -25,6 +25,7 @@
 
         "@iconify-json/ep": "^1.1.16",
 
         "@iconify-json/ic": "^1.1.18",
 
         "@iconify-json/icon-park": "^1.1.14",
 
+        "@iconify-json/icon-park-solid": "^1.2.1",
 
         "@iconify-json/logos": "^1.1.44",
 
         "@iconify-json/material-symbols-light": "^1.1.28",
 
         "@iconify-json/mdi": "^1.1.68",
 
@@ -722,6 +723,16 @@
 
         "@iconify/types": "*"
 
       }
 
     },
 
+    "node_modules/@iconify-json/icon-park-solid": {
 
+      "version": "1.2.1",
 
+      "resolved": "https://registry.npmmirror.com/@iconify-json/icon-park-solid/-/icon-park-solid-1.2.1.tgz",
 
+      "integrity": "sha512-pOagJOb6ha6izXJq6y/ACmK+0GR3PszSY5c7HQl42MUe18+Qco794qK8zAmtHY+pmS76/sNK85PUIJU5vkvuUg==",
 
+      "dev": true,
 
+      "license": "Apache-2.0",
 
+      "dependencies": {
 
+        "@iconify/types": "*"
 
+      }
 
+    },
 
     "node_modules/@iconify-json/logos": {
 
       "version": "1.1.44",
 
       "resolved": "https://registry.npmmirror.com/@iconify-json/logos/-/logos-1.1.44.tgz",

+ 1 - 0
package.json
Xem Tập Tin 

@@ -32,6 +32,7 @@
 
     "@iconify-json/ep": "^1.1.16",
 
     "@iconify-json/ic": "^1.1.18",
 
     "@iconify-json/icon-park": "^1.1.14",
 
+    "@iconify-json/icon-park-solid": "^1.2.1",
 
     "@iconify-json/logos": "^1.1.44",
 
     "@iconify-json/material-symbols-light": "^1.1.28",
 
     "@iconify-json/mdi": "^1.1.68",

+ 3 - 2
src/components/dataAnalysis/TemporalTrend.vue
Xem Tập Tin 

@@ -111,7 +111,7 @@ const createTableField = () => {
 
   //  生成表格的字段信息
 
 
   tableFieldsInfo.splice(0, tableFieldsInfo.length)
 
-
 
+  console.log(props.tableFieldsInfo, activeTab.value)
 
   for (const [key, value] of Object.entries(props.tableFieldsInfo[activeTab.value])) {
 
     // 根据传入的信息，生成table需要的字段信息
 
     tableFieldsInfo.push({
 
@@ -121,6 +121,7 @@ const createTableField = () => {
 
       needSort: false
 
     })
 
   }
 
+  console.log(tableFieldsInfo)
 
 }
 
 
 /**
 
@@ -328,7 +329,7 @@ watch(
 
 
 onMounted(() => {
 
   // getData(1)
 
-
 
+  console.log(props.tabInfo)
 
   if (props.tabInfo) activeTab.value = props.tabInfo[0].name
 
 })
 
 </script>

+ 159 - 2
src/components/table/CustomTable.vue
Xem Tập Tin 

@@ -7,7 +7,13 @@
 
  * 
 -->
 
 <script setup lang="ts">
 
-import type { PropsParams, TableFieldInfo, TablePaginationSetting } from '@/types/table.ts'
 
+import type {
 
+  PropsParams,
 
+  QueryInfo,
 
+  SelectInfo,
 
+  TableFieldInfo,
 
+  TablePaginationSetting
 
+} from '@/types/table.ts'
 
 import type { ReqConfig } from '@/types/dataAnalysis.ts'
 
 import type { FormInstance } from 'element-plus'
 
 import { FilterType } from '@/types/table.ts'
 
@@ -26,9 +32,18 @@ import FilterPopover from '../toolsBtn/FilterPopover.vue'
 
 import RefreshBtn from '../toolsBtn/RefreshBtn.vue'
 
 import TableFieldText from './TableFieldText.vue'
 
 import axiosInstance from '@/utils/axios/axiosInstance.ts'
 
+import { isArray } from 'element-plus/es/utils/types.mjs'
 
 
 type CustomFilterRef = InstanceType<typeof CustomFilter>
 
 
+interface SelectAllItem {
 
+  isCheckAll: boolean // 是否选中了所有
 
+  isIndeterminate: boolean // 是否是中间状态
 
+}
 
+
 
+// 所有选择框的全选按钮信息
 
+const filterFormCheckAllInfo = ref<Record<string, SelectAllItem>>({})
 
+
 
 // 自定义筛选组件的ref
 
 const customFilterRef = ref<CustomFilterRef>()
 
 
@@ -136,7 +151,14 @@ const inputFieldsList = computed(() => {
 
 // 所有类型为select的表单控件信息
 
 const selectFieldsList = computed(() => {
 
   return props.queryInfo?.filter((item) => {
 
-    return item.type === FilterType.SELECT
 
+    const isSelect = item.type === FilterType.SELECT || item.type === FilterType.MULTI_SELECT
 
+    if (isSelect && item.type === FilterType.MULTI_SELECT) {
 
+      filterFormCheckAllInfo.value[item.name] = {
 
+        isCheckAll: true,
 
+        isIndeterminate: false
 
+      }
 
+    }
 
+    return isSelect
 
   })
 
 })
 
 
@@ -571,6 +593,92 @@ const resetCustomFilterData = () => {
 
   resetCustomFilterList(FormData)
 
 }
 
 
+const isMultipleSelect = (item: QueryInfo): boolean => {
 
+  const options = item.otherOption
 
+  const formList = queryFormData[item.name]
 
+  let result = true
 
+  if (item.type !== FilterType.MULTI_SELECT) {
 
+    result = false
 
+    console.error('非多选类型')
 
+  }
 
+  if (!(options && isArray(options))) {
 
+    result = false
 
+    console.error('选项为空或非数组')
 
+  }
 
+  if (!(formList && isArray(formList))) {
 
+    result = false
 
+    console.error('表单数据为空或非数组')
 
+  }
 
+  return result
 
+}
 
+
 
+/**
 
+ * 根据全选情况改变选择情况
 
+ *
 
+ * @param item 查询条件信息
 
+ * @param formList 表单数据
 
+ */
 
+const changeCheckAll = (item: QueryInfo) => {
 
+  if (!isMultipleSelect(item)) return
 
+  const options = item.otherOption as Array<SelectInfo>
 
+  const activeSelectInfo = filterFormCheckAllInfo.value[item.name]
 
+  const isCheckAll = activeSelectInfo.isCheckAll
 
+  const formList = queryFormData[item.name]
 
+
 
+  activeSelectInfo.isIndeterminate = false
 
+  if (isCheckAll) {
 
+    const valList = options.map((option) => {
 
+      return option.value
 
+    })
 
+    formList.splice(0, formList.length, ...valList)
 
+  } else {
 
+    formList.splice(0, formList.length)
 
+  }
 
+}
 
+
 
+/**
 
+ * 处理点击多选按钮事件。
 
+ *
 
+ * formData对应的值不为数组或不是多选类型则报错
 
+ *
 
+ * @param item 查询条件信息
 
+ */
 
+const handleCheckAll = (item: QueryInfo) => {
 
+  changeCheckAll(item)
 
+}
 
+
 
+/**
 
+ * 处理选项改变
 
+ * 单选情况：不处理
 
+ * 多选情况：改变上方多选框状态
 
+ *
 
+ * @param item 查询条件信息
 
+ * @param val 目前选择的值
 
+ */
 
+const selectChange = (item: QueryInfo, val: any) => {
 
+  // 目前只处理数组
 
+  if (!isArray(val)) {
 
+    return
 
+  }
 
+  // 不符合多选信息的不处理
 
+  if (!isMultipleSelect(item)) return
 
+  const activeCheckInfo = filterFormCheckAllInfo.value[item.name]
 
+  if (!activeCheckInfo) {
 
+    console.error('不存在的多选信息')
 
+    return
 
+  }
 
+  const options = item.otherOption as Array<SelectInfo>
 
+  const isSelectedAll = val.length === options.length
 
+
 
+  activeCheckInfo.isCheckAll = isSelectedAll
 
+
 
+  if (val.length === 0) {
 
+    activeCheckInfo.isIndeterminate = false
 
+  } else {
 
+    activeCheckInfo.isIndeterminate = !isSelectedAll
 
+  }
 
+}
 
+
 
 // 定义暴露出去的方法
 
 defineExpose({
 
   getData,
 
@@ -654,12 +762,51 @@ onMounted(() => {
 
             :key="item.name"
 
             class="filterItem"
 
           >
 
+            <template #label="{ label }">
 
+              <span class="selectLabelContainer">
 
+                <span class="selectLabel"> {{ label }}</span>
 
+                <span class="selectSupplement" v-if="item.supplementInfo">
 
+                  <!-- <el-icon><QuestionFilled /></el-icon>
 
+                  {{ item.supplementInfo }} -->
 
+                  <el-popover placement="top" trigger="hover">
 
+                    <p
 
+                      style="
 
+                        width: auto;
 
+                        padding: 0 5px;
 
+                        display: inline-block;
 
+                        text-align: center;
 
+                        color: black;
 
+                      "
 
+                    >
 
+                      {{ item.supplementInfo }}
 
+                    </p>
 
+                    <template #reference>
 
+                      <el-icon><QuestionFilled /></el-icon>
 
+                    </template>
 
+                  </el-popover>
 
+                </span>
 
+              </span>
 
+            </template>
 
             <el-select
 
               :empty-values="[undefined, null]"
 
               v-model="queryFormData[item.name]"
 
               :placeholder="item.placeholder"
 
               :value-key="item.name"
 
+              collapse-tags
 
+              collapse-tags-tooltip
 
+              style="width: 240px"
 
+              :multiple="item.type === FilterType.MULTI_SELECT"
 
+              @change="selectChange(item, queryFormData[item.name])"
 
             >
 
+              <template #header v-if="item.type === FilterType.MULTI_SELECT">
 
+                <el-checkbox
 
+                  v-model="filterFormCheckAllInfo[item.name].isCheckAll"
 
+                  :indeterminate="filterFormCheckAllInfo[item.name].isIndeterminate"
 
+                  @change="handleCheckAll(item)"
 
+                >
 
+                  全部
 
+                </el-checkbox>
 
+              </template>
 
               <el-option
 
                 v-for="val in item.otherOption"
 
                 :key="val.name"
 
@@ -981,6 +1128,16 @@ onMounted(() => {
 
   align-items: center;
 
 }
 
 
+.selectLabelContainer,
 
+.selectSupplement {
 
+  display: flex;
 
+  align-items: center;
 
+}
 
+
 
+.selectSupplement {
 
+  margin-left: 5px;
 
+}
 
+
 
 .tableTools {
 
   width: 98%;
 
   display: flex;

+ 7 - 3
src/hooks/useRequest.ts
Xem Tập Tin 

@@ -2,7 +2,7 @@
 
  * @Author: fxs bjnsfxs@163.com
 
  * @Date: 2024-08-20 17:24:06
 
  * @LastEditors: fxs bjnsfxs@163.com
 
- * @LastEditTime: 2024-11-27
 
+ * @LastEditTime: 2024-11-29
 
  * @Description:
 
  *
 
  */
 
@@ -63,9 +63,13 @@ export function useRequest() {
 
     userActionList: `/user/userActionList`, // 游戏事件统计列表
 
 
     // 用户转化条件
 
-
 
     gameConditionList: `/user/gameConditionList`, // 广告列表
 
-    setGameCondition: `/user/setGameCondition` // 编辑游戏用户转化条件
 
+    setGameCondition: `/user/setGameCondition`, // 编辑游戏用户转化条件
 
+
 
+    // 广告数据
 
+    userAdsOverview: `/user/userAdsOverview`, // 用户广告数据总览
 
+    userAdsDaily: `/user/userAdsDaily`, // 广告每日数据曲线
 
+    userAdsDetail: `/user/userAdsDetail` // 广告数据列表
 
   }
 
 
   /**

+ 29 - 1
src/router/home.ts
Xem Tập Tin 

@@ -2,7 +2,7 @@
 
  * @Author: fxs bjnsfxs@163.com
 
  * @Date: 2024-08-20 14:24:58
 
  * @LastEditors: fxs bjnsfxs@163.com
 
- * @LastEditTime: 2024-11-25
 
+ * @LastEditTime: 2024-11-29
 
  * @Description:
 
  *
 
  */
 
@@ -141,6 +141,34 @@ export default [
 
             }
 
           }
 
         ]
 
+      },
 
+      {
 
+        path: 'advertisingData',
 
+        cnName: '广告数据',
 
+        icon: 'Tickets',
 
+        showChild: true,
 
+        children: [
 
+          {
 
+            path: 'advertisingOverview',
 
+            name: 'AdvertisingOverview',
 
+            cnName: '数据总览',
 
+            component: () => import('@/views/Home/AdvertisingData/AdvertisingOverview.vue'),
 
+            meta: {
 
+              activeMenu: 'advertisingOverview',
 
+              needKeepAlive: true
 
+            }
 
+          },
 
+          {
 
+            path: 'advertisingList',
 
+            name: 'AdvertisingList',
 
+            cnName: '广告列表',
 
+            component: () => import('@/views/Home/AdvertisingData/AdvertisingList.vue'),
 
+            meta: {
 
+              activeMenu: 'advertisingList',
 
+              needKeepAlive: true
 
+            }
 
+          }
 
+        ]
 
       }
 
     ]
 
   }

+ 2 - 2
src/types/dataAnalysis.ts
Xem Tập Tin 

@@ -2,7 +2,7 @@
 
  * @Author: fxs bjnsfxs@163.com
 
  * @Date: 2024-08-23 14:58:29
 
  * @LastEditors: fxs bjnsfxs@163.com
 
- * @LastEditTime: 2024-09-28 11:28:23
 
+ * @LastEditTime: 2024-11-29
 
  * @FilePath: \Game-Backstage-Management-System\src\types\dataAnalysis.ts
 
  * @Description:用于dataAnalysis相关组件的type
 
  *
 
@@ -120,7 +120,7 @@ export interface HeaderCardProps {
 
 export interface TemporalTrendInfo {
 
   dataReqConfig: ReqConfig // 请求的参数和配置
 
   resDataField: ResDataFieldInfo // 返回数据中的字段信息
 
-  tabList?: Array<TabInfo> //表格数据
 
+  tabList?: Array<TabInfo> //标签页数据
 
   trendTableFields: TrendTableField // 表格的字段，同时也作为legend的一部分
 
   // chartsStaticField?: Array<StaticField> // 统计字段的信息
 
   chartsStaticField?: { [key: string]: Array<StaticField> } // 统计字段的信息

+ 7 - 1
src/types/table.ts
Xem Tập Tin 

@@ -2,7 +2,7 @@
 
  * @Author: fxs bjnsfxs@163.com
 
  * @Date: 2024-08-20 17:56:13
 
  * @LastEditors: fxs bjnsfxs@163.com
 
- * @LastEditTime: 2024-11-14
 
+ * @LastEditTime: 2024-11-29
 
  * @FilePath: \Game-Backstage-Management-System\src\types\table.ts
 
  * @Description:
 
  *
 
@@ -41,6 +41,7 @@ export interface TablePaginationSetting {
 
 export enum FilterType {
 
   INPUT = 'input',
 
   SELECT = 'select',
 
+  MULTI_SELECT = 'multiSelect',
 
   DATE = 'date',
 
   CUSTOM = 'custom'
 
 }
 
@@ -49,8 +50,13 @@ export enum FilterType {
 
 export interface QueryInfo {
 
   name: string
 
   label: string
 
+
 
   type: FilterType
 
   placeholder: string
 
+  /**
 
+   * 对此项的补充信息
 
+   */
 
+  supplementInfo?: string
 
   valueType?: ValueTypes
 
   otherOption?: any
 
   default?: any

+ 12 - 9
src/utils/axios/axiosInstance.ts
Xem Tập Tin 

@@ -2,7 +2,7 @@
 
  * @Author: fxs bjnsfxs@163.com
 
  * @Date: 2024-08-20 17:18:52
 
  * @LastEditors: fxs bjnsfxs@163.com
 
- * @LastEditTime: 2024-10-15 11:53:42
 
+ * @LastEditTime: 2024-11-29
 
  * @FilePath: \Game-Backstage-Management-System\src\utils\axios\axiosInstance.ts
 
  * @Description:
 
  *
 
@@ -104,15 +104,18 @@ axiosInstance.interceptors.response.use(
 
     return response.data
 
   },
 
   function (error) {
 
-    const code = error.response.data.code
 
-    const msg = errorCodeMsg[code] ?? '服务器错误，请稍后再试'
 
+    if (error) {
 
+      const code = error.response.data.code
 
+      const msg = errorCodeMsg[code] ?? '服务器错误，请稍后再试'
 
+
 
+      // 对响应错误做点什么
 
+      ElMessage({
 
+        type: MessageType.Error,
 
+        message: msg,
 
+        duration: 1500
 
+      })
 
+    }
 
 
-    // 对响应错误做点什么
 
-    ElMessage({
 
-      type: MessageType.Error,
 
-      message: msg,
 
-      duration: 1500
 
-    })
 
     // console.log(error)
 
     // setLoginState(false)
 
     // router.push('/login')

+ 223 - 0
src/views/Home/AdvertisingData/AdvertisingList.vue
Xem Tập Tin 

@@ -0,0 +1,223 @@
 
+<script setup lang="ts">
 
+import CustomTable from '@/components/table/CustomTable.vue'
 
+import HeaderCard from '@/components/dataAnalysis/HeaderCard.vue'
 
+
 
+import { useRequest } from '@/hooks/useRequest'
 
+import { useCommonStore } from '@/stores/useCommon'
 
+import type { HeaderCardProps, ReqConfig } from '@/types/dataAnalysis'
 
+import { reactive } from 'vue'
 
+import { createDateRange, resetTimeToMidnight } from '@/utils/common'
 
+import { useAnalysis } from '@/hooks/useAnalysis'
 
+import { usePage } from '@/hooks/usePage'
 
+import { FilterType, type QueryInfo, type SelectInfo, type TableFieldInfo } from '@/types/table'
 
+
 
+const { selectInfo } = useCommonStore()
 
+const { AllApi } = useRequest()
 
+const { updateReqConfig } = useAnalysis()
 
+
 
+const { watchPageChange } = usePage()
 
+
 
+// 表格请求配置
 
+const requestConfig = reactive<ReqConfig>({
 
+  url: AllApi.userActionList,
 
+  otherOptions: {
 
+    pf: selectInfo.pf,
 
+    gid: selectInfo.gid,
 
+    startTime: createDateRange(7)[0],
 
+    endTime: createDateRange(7)[1],
 
+    adsState: ['0', '1', '2'] // 默认选所有
 
+  }
 
+})
 
+
 
+const paginationConfig = reactive({
 
+  limit: 15, // 每页展示个数
 
+  currentPage: 1, // 当前页码
 
+  total: 0, // 数据总数
 
+  pageSizeList: [15, 30] // 页数大小列表
 
+})
 
+
 
+const tableFieldsInfo: Array<TableFieldInfo> = [
 
+  {
 
+    name: 'id',
 
+    cnName: '主键',
 
+    isShow: false,
 
+    needSort: false
 
+  },
 
+  {
 
+    name: 'pf',
 
+    cnName: '平台',
 
+    isShow: true,
 
+    needSort: false
 
+  },
 
+  {
 
+    name: 'gid',
 
+    cnName: '游戏ID',
 
+    isShow: true,
 
+    needSort: false
 
+  },
 
+  {
 
+    name: 'userId',
 
+    cnName: '用户ID',
 
+    isShow: true,
 
+    needSort: false
 
+  },
 
+  {
 
+    name: 'date',
 
+    cnName: '日期',
 
+    isShow: true,
 
+    needSort: false
 
+  },
 
+  {
 
+    name: 'createdAt',
 
+    cnName: '创建时间',
 
+    isShow: true,
 
+    needSort: false
 
+  },
 
+  {
 
+    name: 'startTime',
 
+    cnName: '广告开始时间',
 
+    isShow: true,
 
+    needSort: false
 
+  },
 
+  {
 
+    name: 'adsId',
 
+    cnName: '广告ID',
 
+    isShow: false,
 
+    needSort: false
 
+  },
 
+  {
 
+    name: 'adsType',
 
+    cnName: '广告类型',
 
+    isShow: true,
 
+    needSort: false
 
+  },
 
+  {
 
+    name: 'adsScene',
 
+    cnName: '广告场景',
 
+    isShow: true,
 
+    needSort: false
 
+  },
 
+  {
 
+    name: 'adsState',
 
+    cnName: '广告状态',
 
+    isShow: true,
 
+    needSort: false
 
+  },
 
+  {
 
+    name: 'openId',
 
+    cnName: '用户openID',
 
+    isShow: false,
 
+    needSort: false
 
+  }
 
+]
 
+
 
+const adStateOptions: Array<SelectInfo> = [
 
+  {
 
+    name: 'unPlay',
 
+    cnName: '未播放',
 
+    value: '0'
 
+  },
 
+  {
 
+    name: 'unFinished',
 
+    cnName: '未看完',
 
+    value: '1'
 
+  },
 
+  {
 
+    name: 'finished',
 
+    cnName: '已看完',
 
+    value: '2'
 
+  }
 
+]
 
+
 
+// 查询字段设置
 
+const queryInfo = reactive<Array<QueryInfo>>([
 
+  {
 
+    name: 'adsState',
 
+    label: '广告状态',
 
+    type: FilterType.MULTI_SELECT,
 
+    placeholder: '请选择广告状态',
 
+    otherOption: adStateOptions,
 
+    default: ['0', '1', '2'],
 
+    supplementInfo: '此项全选与全不选均为查找所有'
 
+  },
 
+  {
 
+    name: 'adsType',
 
+    label: '广告类型',
 
+    type: FilterType.INPUT,
 
+    placeholder: '请输入广告类型',
 
+    otherOption: null,
 
+    default: ''
 
+  },
 
+  {
 
+    name: 'openId',
 
+    label: '用户openId',
 
+    type: FilterType.INPUT,
 
+    placeholder: '请输入用户openId',
 
+    otherOption: null,
 
+    default: ''
 
+  }
 
+])
 
+
 
+const headerCardInfo: HeaderCardProps = {
 
+  title: '广告数据',
 
+  openDateSelect: true
 
+}
 
+
 
+/**
 
+ * 更新请求配置
 
+ * @param {*} date 新的日期
 
+ */
 
+const changeDate = (date: Array<Date>) => {
 
+  updateReqConfig(requestConfig, {
 
+    startTime: resetTimeToMidnight(date[0]),
 
+    endTime: resetTimeToMidnight(date[1])
 
+  })
 
+}
 
+
 
+/**
 
+ * 更新选择
 
+ * @param {*} pf  新pf
 
+ * @param {*} gid 新gid
 
+ */
 
+const updateSelect = (pf: string, gid: string) => {
 
+  updateReqConfig(requestConfig, { pf, gid })
 
+}
 
+
 
+const backupSelect = reactive([])
 
+
 
+watchPageChange(() => [selectInfo.pf, selectInfo.gid], backupSelect, updateSelect)
 
+</script>
 
+
 
+<template>
 
+  <div class="advertisingListContainer">
 
+    <div class="adHeader">
 
+      <HeaderCard
 
+        :title="headerCardInfo.title"
 
+        :open-date-select="headerCardInfo.openDateSelect"
 
+        @change-date="changeDate"
 
+      ></HeaderCard>
 
+    </div>
 
+    <div class="adTableContent">
 
+      <CustomTable
 
+        :pagination-config="paginationConfig"
 
+        :table-fields-info="tableFieldsInfo"
 
+        :request-config="requestConfig"
 
+        :query-info="queryInfo"
 
+        :open-filter-query="true"
 
+      ></CustomTable>
 
+    </div>
 
+  </div>
 
+</template>
 
+
 
+<style scoped>
 
+.advertisingListContainer {
 
+  width: 98%;
 
+  margin: 1% auto;
 
+  background-color: white;
 
+  border: 1px solid #e5e6eb;
 
+}
 
+
 
+.adTableContent {
 
+  padding: 0 24px;
 
+}
 
+</style>

+ 150 - 0
src/views/Home/AdvertisingData/AdvertisingOverview.vue
Xem Tập Tin 

@@ -0,0 +1,150 @@
 
+<script setup lang="ts">
 
+import type { ReqConfig, StaticField, TemporalTrendInfo } from '@/types/dataAnalysis'
 
+import { useCommonStore } from '@/stores/useCommon'
 
+import { useRequest } from '@/hooks/useRequest'
 
+import { reactive, toRaw } from 'vue'
 
+import { useAnalysis } from '@/hooks/useAnalysis'
 
+import { createDateRange, resetTimeToMidnight } from '@/utils/common'
 
+import { usePage } from '@/hooks/usePage'
 
+
 
+const { watchPageChange } = usePage()
 
+const { updateReqConfig } = useAnalysis()
 
+const { AllApi } = useRequest()
 
+const { selectInfo } = useCommonStore()
 
+
 
+const adOverviewFieldsInfo: Array<StaticField> = [
 
+  {
 
+    name: 'adsCount30',
 
+    cnName: '30日广告总数',
 
+    value: ''
 
+  },
 
+  {
 
+    name: 'adsCount7',
 
+    cnName: '近7日广告总数',
 
+    value: ''
 
+  },
 
+  {
 
+    name: 'avgUserAds',
 
+    cnName: '每个用户平均看广告次数',
 
+    value: ''
 
+  },
 
+  {
 
+    name: 'avgUserAds7',
 
+    cnName: '近七日活跃用户平均看广告次数',
 
+    value: ''
 
+  }
 
+]
 
+
 
+/**
 
+ * 此处目前只有正式服有数据，所以URL暂时写死
 
+ */
 
+const adOverviewReqConfig = reactive<ReqConfig>({
 
+  url: `http://service.ichunhao.cn${AllApi.userAdsOverview}`,
 
+  otherOptions: {
 
+    pf: selectInfo.pf,
 
+    gid: selectInfo.gid
 
+  }
 
+})
 
+
 
+const dailyInfo = reactive<TemporalTrendInfo>({
 
+  dataReqConfig: {
 
+    url: `http://service.ichunhao.cn${AllApi.userAdsDaily}`,
 
+    otherOptions: {
 
+      pf: selectInfo.pf,
 
+      gid: selectInfo.gid,
 
+      startTime: createDateRange(7)[0],
 
+      endTime: createDateRange(7)[1]
 
+    }
 
+  },
 
+  resDataField: toRaw({
 
+    xAxis: 'userAdsDaily', // x轴的刻度信息所在的字段
 
+    values: ['userAdsDaily'] // 值所在的字段
 
+  }),
 
+  tabList: toRaw([
 
+    {
 
+      name: 'userAdsDaily',
 
+      tabTitle: '用户广告数据',
 
+      type: 1
 
+    }
 
+  ]),
 
+  trendTableFields: toRaw({
 
+    userAdsDaily: {
 
+      index: '日期',
 
+      userAdsDaily: '用户广告数据'
 
+    }
 
+  })
 
+})
 
+
 
+/**
 
+ * 日期改变，更新请求参数
 
+ * @param {*} date 日期
 
+ */
 
+const changeDate = (date: Array<Date>) => {
 
+  updateReqConfig(dailyInfo.dataReqConfig, {
 
+    startTime: resetTimeToMidnight(date[0]),
 
+    endTime: resetTimeToMidnight(date[1])
 
+  })
 
+}
 
+
 
+const updateSelect = (pf: string, gid: string) => {
 
+  updateReqConfig(dailyInfo.dataReqConfig, { pf, gid })
 
+}
 
+
 
+const backupSelect = reactive([]) // 保存选择数据
 
+
 
+watchPageChange(() => [selectInfo.pf, selectInfo.gid], backupSelect, updateSelect)
 
+</script>
 
+
 
+<template>
 
+  <div class="adOverviewContainer">
 
+    <div class="adOverviewHeader">
 
+      <HeaderCard
 
+        :open-date-select="true"
 
+        :title="'广告数据总览(正式服数据)'"
 
+        @change-date="changeDate"
 
+      ></HeaderCard>
 
+    </div>
 
+    <div class="adOverviewStaticContainer">
 
+      <StatisticText
 
+        ref="overviewStaticRef"
 
+        :fields-info="adOverviewFieldsInfo"
 
+        :request-config="adOverviewReqConfig"
 
+      ></StatisticText>
 
+    </div>
 
+    <div class="periodTrendContainer">
 
+      <div class="dailyTemporalTrend">
 
+        <TemporalTrend
 
+          :need-charts="true"
 
+          :table-fields-info="dailyInfo.trendTableFields"
 
+          :res-data-fields-info="dailyInfo.resDataField"
 
+          :tab-info="dailyInfo.tabList"
 
+          :need-table="false"
 
+          :need-tab="false"
 
+          :select-express-form="1"
 
+          :need-change-express="false"
 
+          :type="1"
 
+          :request-config="dailyInfo.dataReqConfig"
 
+          :title="'广告数据(正式服数据)'"
 
+        ></TemporalTrend>
 
+      </div>
 
+    </div>
 
+  </div>
 
+</template>
 
+
 
+<style scoped>
 
+.adOverviewContainer {
 
+  width: 98%;
 
+  margin: 1% auto;
 
+  /* background-color: white; */
 
+  box-sizing: border-box;
 
+}
 
+
 
+.adOverviewHeader,
 
+.adOverviewStaticContainer,
 
+.periodTrendContainer {
 
+  box-sizing: border-box;
 
+  background-color: white;
 
+  width: 100%;
 
+  padding: 0 24px;
 
+}
 
+</style>

+ 4 - 3
src/views/IndexView.vue
Xem Tập Tin 

@@ -2,7 +2,7 @@
 
  * @Author: fxs bjnsfxs@163.com
 
  * @Date: 2024-08-20 14:06:49
 
  * @LastEditors: fxs bjnsfxs@163.com
 
- * @LastEditTime: 2024-11-28
 
+ * @LastEditTime: 2024-11-29
 
  * @Description: 
  * 
 -->
 
@@ -111,7 +111,7 @@ const changeNavBar = (val: string) => {
 
 
 // 资源的加载路径
 
 const resourceInfo: Record<string, string> = {
 
-  logo: `/img/logo.svg`,
 
+  logo: `/img/logoTest.svg`,
 
   defaultHead: `/img/default/defaultHead.png`
 
 }
 
 
@@ -243,12 +243,13 @@ onMounted(() => {
 
       <div class="navBarBox">
 
         <div class="logoBox">
 
           <el-image :fit="'fill'" class="logoImg" :src="blobUrlInfo.logo"></el-image>
 
-          <span class="logoTitle">淳皓游戏管理平台</span>
 
+          <span class="logoTitle">测试库</span>
 
         </div>
 
 
         <div class="gameSelect">
 
           <el-icon class="gameIcon" :size="20">
 
             <icon-icon-park-game-three></icon-icon-park-game-three>
 
+            <!-- <icon-icon-park-solid-ad></icon-icon-park-solid-ad> -->
 
           </el-icon>
 
           <DropDownSelection
 
             :default-select="gameSelectInfo.defaultSelect"