Начало Каталог Помощ
Регистрация Вход
dark6f
/
Game-Backstage-Management-System
1
0
Разклонения 0
Файлове Задачи 0 Заявки за сливане 0 Уики
Преглед на файлове

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

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

CustomTable组件：
    -查询表单现在可以支持选择框多选
    -对选择框的label新增补充描述功能，增加supplementInfo即可补充描述;
fxs преди 6 месеца
родител
11f8263541
ревизия
d861c5194f
променени са 13 файла, в които са добавени 611 реда и са изтрити 25 реда
Разделен изглед Покажи статистика за разликите
  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
Целия файл 

@@ -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
Целия файл 

@@ -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
Целия файл 

@@ -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
Целия файл 

@@ -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
Целия файл 

@@ -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
Целия файл 

@@ -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
Целия файл 

@@ -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
Целия файл 

@@ -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
Целия файл 

@@ -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
Целия файл 

@@ -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
Целия файл 

@@ -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
Целия файл 

@@ -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
Целия файл 

@@ -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"