perf(广告列表和用户行为页面): 将原本的hooks拆分为两个单独的hooks，实现不同的显示效果

src/components/echarts/PieBorderRadius.vue

@@ -75,7 +75,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="chart" ref="chart" style="width: 100%; height: 365px"></div>
+  <div class="chart" ref="chart" style="width: 100%; height: 600px"></div>
 </template>
 
 <style scoped></style>

src/components/echarts/index.ts

@@ -12,7 +12,9 @@ import {
   ToolboxComponent,
   LegendComponent,
   DatasetComponent,
-  TransformComponent
+  TransformComponent,
+  DataZoomSliderComponent,
+  DataZoomInsideComponent
 } from 'echarts/components'
 // 标签自动布局，全局过渡动画等特性
 import { LabelLayout, UniversalTransition } from 'echarts/features'
@@ -22,6 +24,8 @@ import { CanvasRenderer } from 'echarts/renderers'
 
 // 注册必须的组件
 echarts.use([
+  DataZoomInsideComponent,
+  DataZoomSliderComponent,
   TitleComponent,
   TooltipComponent,
   GridComponent,

src/components/table/TableFilterForm/TableFilterForm.vue

@@ -63,6 +63,60 @@ const queryFormData = defineModel<TableFilterFormData>('queryFormData', {
 // 备份表单的默认值信息
 const backupFormDefault: TableFilterFormData = {}
 
+const defaultTime = ref<[Date, Date]>([
+  new Date(2025, 1, 1, 0, 0, 0),
+  new Date(2025, 2, 1, 23, 59, 59)
+])
+
+// 添加快捷选项配置
+const shortcuts = [
+  {
+    text: '今天',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setHours(0, 0, 0, 0)
+      return [start, end]
+    }
+  },
+  {
+    text: '昨天',
+    value: () => {
+      const end = new Date()
+      end.setDate(end.getDate() - 1)
+      end.setHours(23, 59, 59, 999)
+      const start = new Date(end)
+      start.setHours(0, 0, 0, 0)
+      return [start, end]
+    }
+  },
+  {
+    text: '过去7天',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 6)
+      start.setHours(0, 0, 0, 0)
+      return [start, end]
+    }
+  },
+  {
+    text: '过去30天',
+    value: () => {
+      const end = new Date()
+      const start = new Date()
+      start.setDate(start.getDate() - 29)
+      start.setHours(0, 0, 0, 0)
+      return [start, end]
+    }
+  }
+]
+
+// 禁用今天之后的日期
+const disabledDate = (time: Date) => {
+  return time.getTime() > Date.now()
+}
+
 /**
  * 初始化查询选项集合
  *
@@ -205,6 +259,9 @@ defineExpose({
           :type="item.otherOption.dataRange ? 'daterange' : 'date'"
           :value-format="item.otherOption.valueFormat"
           :placeholder="item.placeholder"
+          :default-time="defaultTime"
+          :shortcuts="shortcuts"
+          :disabled-date="disabledDate"
           clearable
         />
       </el-form-item>

src/hooks/useTableChart.ts

@@ -3,17 +3,26 @@ import type { EChartsOption } from 'echarts/types/dist/shared'
 import axiosInstance from '@/utils/axios/axiosInstance.ts'
 import type { ResponseInfo } from '@/types/res.ts'
 import type { QueryInfo } from '@/types/table.ts'
+import { generateUniqueColors } from '@/utils/common'
+
+interface AdChartItem {
+  name: string
+  value: number
+  sumType0: number
+  sumType1: number
+  sumType2: number
+}
 
 interface BarChartInfo {
   labelList: string[]
-  valueList: any[]
+  valueList: number[]
+  sumType0List: number[]
+  sumType1List: number[]
+  sumType2List: number[]
 }
 
 interface ChartInfo {
-  PieChart: Array<{
-    name: string
-    value: number
-  }>
+  PieChart: AdChartItem[]
   BarChart: BarChartInfo
 }
 
@@ -24,81 +33,23 @@ export function useTableChart(
   chartNeedFields: Array<string>,
   isPie: Ref<boolean>
 ) {
-  const pieChartOptions = computed<EChartsOption>(() => {
-    return {
-      tooltip: {
-        trigger: 'item'
-      },
-      legend: {
-        top: '5%',
-        left: 'center'
-      },
-      series: [
-        {
-          name: '',
-          type: 'pie',
-          radius: ['40%', '70%'],
-          avoidLabelOverlap: false,
-          itemStyle: {
-            borderRadius: 10,
-            borderColor: '#fff',
-            borderWidth: 2
-          },
-          label: {
-            show: false,
-            position: 'center'
-          },
-          emphasis: {
-            label: {
-              show: true,
-              fontSize: 40,
-              fontWeight: 'bold'
-            }
-          },
-          labelLine: {
-            show: false
-          },
-          data: chartInfo.value.PieChart
-        }
-      ]
-    }
-  })
-
-  const barChartOptions = computed<EChartsOption>(() => {
-    const barChartInfo = chartInfo.value.BarChart
-    return {
-      xAxis: {
-        type: 'category',
-        data: barChartInfo.labelList
-      },
-      yAxis: {
-        type: 'value'
-      },
-      series: [
-        {
-          data: barChartInfo.valueList,
-          type: 'bar'
-        }
-      ]
-    }
-  })
-
   const chartInfo = ref<ChartInfo>({
     PieChart: [],
     BarChart: {
       labelList: [],
-      valueList: []
+      valueList: [],
+      sumType0List: [],
+      sumType1List: [],
+      sumType2List: []
     }
   })
 
   const updateChartData = async () => {
-    // 如果没有筛选，则提示.根据chartNeedFields来
     if (chartNeedFields.length > 0) {
       const hasFilter = chartNeedFields.every((item) => {
         return queryFormData.value[item] === ''
       })
       if (hasFilter) {
-        // ElMessage.warning('请选择筛选条件')
         const tip = filterInfo
           .filter((item) => {
             return chartNeedFields.includes(item.name as any)
@@ -114,11 +65,9 @@ export function useTableChart(
 
     const params = {} as any
     Object.assign(params, queryFormData.value)
-    // TODO 时间范围问题
     if (queryFormData.value.createTime) {
       params.createTime = queryFormData.value.createTime
         .map((item: any) => {
-          // 日期转时间戳
           return new Date(item).getTime().toString()
         })
         .join(',')
@@ -133,12 +82,19 @@ export function useTableChart(
     const data = res.data as Array<{
       name: string
       count: number
+      sumType0: number
+      sumType1: number
+      sumType2: number
     }> | null
+
     if (!data) {
       chartInfo.value.PieChart = []
       chartInfo.value.BarChart = {
         labelList: [],
-        valueList: []
+        valueList: [],
+        sumType0List: [],
+        sumType1List: [],
+        sumType2List: []
       }
     } else {
       const isAllZero = data.every((item) => item.count === 0)
@@ -146,23 +102,313 @@ export function useTableChart(
         chartInfo.value.PieChart = []
         chartInfo.value.BarChart = {
           labelList: [],
-          valueList: []
+          valueList: [],
+          sumType0List: [],
+          sumType1List: [],
+          sumType2List: []
         }
         return
       }
-      chartInfo.value.PieChart = data.map((item) => {
-        return {
-          name: item.name,
-          value: item.count
-        }
-      })
+
+      chartInfo.value.PieChart = data.map((item) => ({
+        name: item.name,
+        value: item.count,
+        sumType0: item.sumType0 || 0,
+        sumType1: item.sumType1 || 0,
+        sumType2: item.sumType2 || 0
+      }))
       chartInfo.value.BarChart = {
         labelList: data.map((item) => item.name),
-        valueList: data.map((item) => item.count)
+        valueList: data.map((item) => item.count),
+        sumType0List: data.map((item) => item.sumType0 || 0),
+        sumType1List: data.map((item) => item.sumType1 || 0),
+        sumType2List: data.map((item) => item.sumType2 || 0)
       }
     }
   }
 
+  const pieChartOptions = computed<EChartsOption>(() => {
+    const colors = generateUniqueColors(chartInfo.value.PieChart.length)
+    return {
+      color: colors,
+      tooltip: {
+        trigger: 'item',
+        formatter: (params: any) => {
+          const data = chartInfo.value.PieChart[params.dataIndex]
+          const seriesName = params.seriesName
+          let value = 0
+          if (seriesName === '未播放') {
+            value = data.sumType0
+          } else if (seriesName === '未看完') {
+            value = data.sumType1
+          } else if (seriesName === '已看完') {
+            value = data.sumType2
+          }
+          return `${data.name}: ${value}`
+        }
+      },
+
+      legend: {
+        type: 'scroll',
+        orient: 'vertical',
+        right: 10,
+        top: 20,
+        bottom: 20
+        // top: '8%',
+        // left: 'center',
+        // itemGap: 35,
+        // textStyle: {
+        //   fontSize: 14
+        // },
+        // padding: [0, 50]
+      },
+      grid: [
+        { left: '5%', top: '35%', width: '25%', height: '60%' },
+        { left: '37.5%', top: '35%', width: '25%', height: '60%' },
+        { left: '70%', top: '35%', width: '25%', height: '60%' }
+      ],
+      title: [
+        {
+          text: '未播放',
+          left: '17.5%',
+          top: '18%',
+          textAlign: 'center',
+          textStyle: {
+            fontSize: 16,
+            fontWeight: 'bold'
+          }
+        },
+        {
+          text: '未看完',
+          left: '50%',
+          top: '18%',
+          textAlign: 'center',
+          textStyle: {
+            fontSize: 16,
+            fontWeight: 'bold'
+          }
+        },
+        {
+          text: '已看完',
+          left: '82.5%',
+          top: '18%',
+          textAlign: 'center',
+          textStyle: {
+            fontSize: 16,
+            fontWeight: 'bold'
+          }
+        }
+      ],
+      series: [
+        {
+          name: '未播放',
+          type: 'pie',
+          radius: ['30%', '45%'],
+          center: ['15%', '55%'],
+          avoidLabelOverlap: true,
+          itemStyle: {
+            borderRadius: 10,
+            borderColor: '#fff',
+            borderWidth: 2
+          },
+          label: {
+            show: true,
+            position: 'outside',
+            formatter: '{b}:{c}',
+            fontSize: 12,
+            fontWeight: 'bold'
+            // lineHeight: 20,
+            // minMargin: 25
+          },
+          emphasis: {
+            label: {
+              show: true,
+              fontSize: 16,
+              fontWeight: 'bold'
+            }
+          },
+          labelLine: {
+            show: true,
+            length: 15,
+            length2: 15
+          },
+          data: chartInfo.value.PieChart.map((item) => ({
+            name: item.name,
+            value: item.sumType0
+          }))
+        },
+        {
+          name: '未看完',
+          type: 'pie',
+          radius: ['30%', '45%'],
+          center: ['45%', '55%'],
+          avoidLabelOverlap: true,
+          itemStyle: {
+            borderRadius: 10,
+            borderColor: '#fff',
+            borderWidth: 2
+          },
+          label: {
+            show: true,
+            position: 'outside',
+            formatter: '{b}:{c}',
+            fontSize: 12,
+            fontWeight: 'bold'
+            // lineHeight: 20
+          },
+          emphasis: {
+            label: {
+              show: true,
+              fontSize: 16,
+              fontWeight: 'bold'
+            }
+          },
+          labelLine: {
+            show: true,
+            length: 15,
+            length2: 15
+          },
+          data: chartInfo.value.PieChart.map((item) => ({
+            name: item.name,
+            value: item.sumType1
+          }))
+        },
+        {
+          name: '已看完',
+          type: 'pie',
+          radius: ['30%', '45%'],
+          center: ['75%', '55%'],
+          avoidLabelOverlap: true,
+          itemStyle: {
+            borderRadius: 10,
+            borderColor: '#fff',
+            borderWidth: 2
+          },
+          label: {
+            show: true,
+            position: 'outside',
+            formatter: '{b}:{c}',
+            fontSize: 12,
+            fontWeight: 'bold'
+            // lineHeight: 20
+          },
+          emphasis: {
+            label: {
+              show: true,
+              fontSize: 16,
+              fontWeight: 'bold'
+            }
+          },
+          labelLine: {
+            show: true,
+            length: 15,
+            length2: 15
+          },
+          data: chartInfo.value.PieChart.map((item) => ({
+            name: item.name,
+            value: item.sumType2
+          }))
+        }
+      ]
+    }
+  })
+
+  const barChartOptions = computed<EChartsOption>(() => {
+    const barChartInfo = chartInfo.value.BarChart
+    const colors = generateUniqueColors(barChartInfo.labelList.length)
+    return {
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+          type: 'shadow',
+          label: {
+            show: true
+          }
+        }
+      },
+      xAxis: {
+        type: 'category',
+        data: barChartInfo.labelList,
+        axisLabel: {
+          interval: 30,
+          // rotate: 30,
+          // width: 80, // 增加标签宽度
+          overflow: 'truncate' // 过长时显示省略号
+        }
+      },
+      yAxis: {
+        type: 'log',
+        min: 1,
+        axisLabel: {
+          formatter: (value: number) => value.toLocaleString()
+        }
+      },
+      dataZoom: [
+        {
+          show: true,
+          start: 94,
+          end: 100
+        },
+        {
+          type: 'inside',
+          start: 94,
+          end: 100
+        },
+        {
+          show: true,
+          yAxisIndex: 0,
+          filterMode: 'empty',
+          width: 30,
+          height: '80%',
+          showDataShadow: false,
+          left: '93%'
+        }
+      ],
+      color: colors,
+      grid: {
+        top: '12%',
+        left: '1%',
+        right: '10%',
+        containLabel: true
+      },
+      series: [
+        {
+          name: '未播放',
+          data: barChartInfo.sumType0List.map((v) => v), // 处理 0 值
+          type: 'bar',
+
+          label: {
+            show: true,
+            position: 'top',
+            formatter: '{c}'
+          }
+        },
+        {
+          name: '未看完',
+          data: barChartInfo.sumType1List.map((v) => v),
+          type: 'bar',
+
+          label: {
+            show: true,
+            position: 'top',
+            formatter: '{c}'
+          }
+        },
+        {
+          name: '已看完',
+          data: barChartInfo.sumType2List.map((v) => v),
+          type: 'bar',
+
+          label: {
+            show: true,
+            position: 'top',
+            formatter: '{c}'
+          }
+        }
+      ]
+    }
+  })
+
   const chartOptions = computed(() => {
     const pieChartInfo = chartInfo.value.PieChart.length ?? null
     const barChartInfo = chartInfo.value.BarChart.valueList.length ?? null

src/hooks/useUserBehaviorChart.ts

@@ -0,0 +1,223 @@
+import { computed, type Ref, ref } from 'vue'
+import type { EChartsOption } from 'echarts/types/dist/shared'
+import axiosInstance from '@/utils/axios/axiosInstance.ts'
+import type { ResponseInfo } from '@/types/res.ts'
+import type { QueryInfo } from '@/types/table.ts'
+import { generateUniqueColors } from '@/utils/common'
+
+interface UserBehaviorChartItem {
+  name: string
+  value: number
+}
+
+interface ChartInfo {
+  PieChart: UserBehaviorChartItem[]
+  BarChart: {
+    labelList: string[]
+    valueList: number[]
+  }
+}
+
+export function useUserBehaviorChart(
+  url: string,
+  queryFormData: Ref<any>,
+  filterInfo: Array<QueryInfo>,
+  chartNeedFields: Array<string>,
+  isPie: Ref<boolean>
+) {
+  const chartInfo = ref<ChartInfo>({
+    PieChart: [],
+    BarChart: {
+      labelList: [],
+      valueList: []
+    }
+  })
+
+  const updateChartData = async () => {
+    if (chartNeedFields.length > 0) {
+      const hasFilter = chartNeedFields.every((item) => {
+        return queryFormData.value[item] === ''
+      })
+      if (hasFilter) {
+        const tip = filterInfo
+          .filter((item) => {
+            return chartNeedFields.includes(item.name as any)
+          })
+          .map((item) => {
+            return item.label
+          })
+          .join(',')
+        ElMessage.warning(`${tip}请至少输入一个筛选条件`)
+        return
+      }
+    }
+
+    const params = {} as any
+    Object.assign(params, queryFormData.value)
+    if (queryFormData.value.createTime) {
+      params.createTime = queryFormData.value.createTime
+        .map((item: any) => {
+          return new Date(item).getTime().toString()
+        })
+        .join(',')
+    }
+
+    const res = (await axiosInstance.post(url, params)) as ResponseInfo
+    if (res.code !== 0) {
+      ElMessage.error('获取数据失败')
+      return
+    }
+
+    const data = res.data as Array<{
+      name: string
+      count: number
+    }> | null
+
+    if (!data) {
+      chartInfo.value.PieChart = []
+      chartInfo.value.BarChart = {
+        labelList: [],
+        valueList: []
+      }
+    } else {
+      const isAllZero = data.every((item) => item.count === 0)
+      if (isAllZero) {
+        chartInfo.value.PieChart = []
+        chartInfo.value.BarChart = {
+          labelList: [],
+          valueList: []
+        }
+        return
+      }
+
+      chartInfo.value.PieChart = data.map((item) => ({
+        name: item.name,
+        value: item.count
+      }))
+      chartInfo.value.BarChart = {
+        labelList: data.map((item) => item.name),
+        valueList: data.map((item) => item.count)
+      }
+    }
+  }
+
+  const pieChartOptions = computed<EChartsOption>(() => {
+    const colors = generateUniqueColors(chartInfo.value.PieChart.length)
+    return {
+      color: colors,
+      tooltip: {
+        trigger: 'item',
+        formatter: (params: any) => {
+          const data = chartInfo.value.PieChart[params.dataIndex]
+          return `${data.name}<br/>
+                  数量: ${data.value}`
+        }
+      },
+      legend: {
+        top: '5%',
+        left: 'center',
+        itemGap: 20,
+        textStyle: {
+          fontSize: 12
+        }
+      },
+      series: [
+        {
+          name: '用户行为',
+          type: 'pie',
+          radius: ['40%', '70%'],
+          center: ['50%', '50%'],
+          avoidLabelOverlap: false,
+          itemStyle: {
+            borderRadius: 10,
+            borderColor: '#fff',
+            borderWidth: 2
+          },
+          label: {
+            show: false,
+            position: 'center'
+          },
+          emphasis: {
+            label: {
+              show: true,
+              fontSize: 20,
+              fontWeight: 'bold'
+            }
+          },
+          labelLine: {
+            show: false
+          },
+          data: chartInfo.value.PieChart
+        }
+      ]
+    }
+  })
+
+  const barChartOptions = computed<EChartsOption>(() => {
+    const barChartInfo = chartInfo.value.BarChart
+    const colors = generateUniqueColors(barChartInfo.labelList.length)
+    return {
+      xAxis: {
+        type: 'category',
+        data: barChartInfo.labelList,
+        axisLabel: {
+          interval: 0,
+          rotate: 30
+        }
+      },
+      yAxis: {
+        type: 'log',
+        min: 1
+      },
+      color: colors,
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+          type: 'shadow'
+        },
+        formatter: (params: any) => {
+          const data = chartInfo.value.PieChart[params[0].dataIndex]
+          return `${data.name}<br/>
+                  数量: ${data.value}`
+        }
+      },
+      grid: {
+        top: '15%',
+        left: '3%',
+        right: '4%',
+        bottom: '15%',
+        containLabel: true
+      },
+      series: [
+        {
+          name: '用户行为',
+          data: barChartInfo.valueList,
+          type: 'bar',
+          barWidth: '10%',
+          label: {
+            show: true,
+            position: 'top',
+            formatter: '{c}'
+          },
+          itemStyle: {
+            // color: (params) => {
+            //   return colors[params.dataIndex]
+            // }
+          }
+        }
+      ]
+    }
+  })
+
+  const chartOptions = computed(() => {
+    const pieChartInfo = chartInfo.value.PieChart.length ?? null
+    const barChartInfo = chartInfo.value.BarChart.valueList.length ?? null
+    if (!pieChartInfo && !barChartInfo) return null
+    return isPie.value ? pieChartOptions.value : barChartOptions.value
+  })
+
+  return {
+    updateChartData,
+    chartOptions
+  }
+}

src/utils/common/index.ts

@@ -218,3 +218,30 @@ export const generateRandomFileName = () => {
   const randomString = Math.random().toString(36).substring(2, 8) // 生成8位随机字符串
   return timestamp + randomString
 }
+
+/**
+ * 生成随机颜色
+ * @param count 生成颜色的数量
+ */
+export function generateUniqueColors(count: number) {
+  const colors = []
+  // 基础参数：控制颜色柔和度
+  const baseSaturation = 90 // 饱和度范围 65-75%（避免过艳）
+  const baseLightness = 70 // 亮度范围 65-75%（避免过深或过亮）
+
+  for (let i = 0; i < count; i++) {
+    // 1. 色相均匀分布（核心区分度）
+    const hue = ((i * 360) / count) % 360
+
+    // 2. 饱和度和亮度微调（增加次区分度）
+    const saturation = baseSaturation + ((i % 3) - 1) * 5 // 波动 ±5%
+    const lightness = baseLightness + ((i % 2) - 0.5) * 10 // 奇数项稍暗，偶数项稍亮
+
+    // 3. 约束范围（确保不过深/过亮）
+    const clampedSaturation = Math.min(75, Math.max(65, saturation))
+    const clampedLightness = Math.min(75, Math.max(65, lightness))
+
+    colors.push(`hsl(${hue}, ${clampedSaturation}%, ${clampedLightness}%)`)
+  }
+  return colors
+}

src/views/Home/AdvertisingData/AdvertisingList.vue

@@ -26,8 +26,9 @@ import { FilterType, type QueryInfo, type SelectInfo } from '@/types/table'
 
 import TableFilterForm from '@/components/table/TableFilterForm/TableFilterForm.vue'
 import { useTableChart } from '@/hooks/useTableChart.ts'
+import { usePage } from '@/hooks/usePage.ts'
 
-const { tempMultipleChoice } = useCommonStore()
+const { tempMultipleChoice, selectInfo } = useCommonStore()
 const { AllApi } = useRequest()
 
 const adTypeOptions: Array<SelectInfo> = [
@@ -96,6 +97,36 @@ const chartNeedFields: string[] = []
 const isPie = ref(true)
 const isRadioPf = ref(false)
 
+// watch(
+//   () => tempMultipleChoice,
+//   (newVal: { gid: string; pf: Array<string> }) => {
+//     queryFormData.value.gid = newVal.gid
+//     queryFormData.value.pf = newVal.pf
+//   },
+//   {
+//     deep: true
+//   }
+// )
+
+/**
+ * 更新请求配置
+ * @param pf  新pf
+ * @param  gid 新gid
+ */
+const updateAllReq = (pf: string[], gid: string) => {
+  queryFormData.value.gid = gid
+  queryFormData.value.pf = pf
+  updateChartData()
+  console.log('更新GID')
+  // updateReqConfig(keepDataTableInfo.requestConfig, { pf, gid })
+}
+
+const { watchPageChange } = usePage()
+
+const backupSelect = reactive([])
+
+watchPageChange(() => [tempMultipleChoice.pf, selectInfo.gid], backupSelect, updateAllReq)
+
 const { updateChartData, chartOptions } = useTableChart(
   AllApi.adListChart,
   queryFormData,
@@ -137,16 +168,6 @@ const { updateChartData, chartOptions } = useTableChart(
           </div>
         </div>
       </div>
-      <!--      <CustomTable-->
-      <!--        :pagination-config="paginationConfig"-->
-      <!--        :table-fields-info="tableFieldsInfo"-->
-      <!--        :request-config="requestConfig"-->
-      <!--        :query-info="filterInfo"-->
-      <!--        :open-filter-query="true"-->
-      <!--        :tools="tableToolsConfig"-->
-      <!--        :need-total="true"-->
-      <!--        :total-func="getSummary"-->
-      <!--      ></CustomTable>-->
     </div>
   </div>
 </template>

src/views/Home/Analysis/EventAnalysisView.vue

@@ -57,7 +57,7 @@ const dateChange = (newDate: Array<Date>) => {
         :title="headerProps.title"
         :open-date-select="headerProps.openDateSelect"
         :need-breadcrumb="true"
-        :need-pf-select="false"
+        :need-pf-select="true"
         :is-radio="false"
         @change-date="dateChange"
       ></HeaderCard>

src/views/Home/Analysis/UserBehavior.vue

@@ -2,7 +2,7 @@
  * @Author: fxs bjnsfxs@163.com
  * @Date: 2024-11-27
  * @LastEditors: fxs bjnsfxs@163.com
- * @LastEditTime: 2024-12-03
+ * @LastEditTime: 2025-04-08
  * @Description: 
  * 
 -->
@@ -11,13 +11,14 @@ import type { HeaderCardProps } from '@/types/dataAnalysis'
 import type { QueryInfo, SelectInfo } from '@/types/table'
 import { FilterType } from '@/types/table'
 
-import { ref } from 'vue'
+import { reactive, ref } from 'vue'
 import { useRequest } from '@/hooks/useRequest'
 
 import { useCommonStore } from '@/stores/useCommon'
 
 import TableFilterForm from '@/components/table/TableFilterForm/TableFilterForm.vue'
-import { useTableChart } from '@/hooks/useTableChart.ts'
+import { useUserBehaviorChart } from '@/hooks/useUserBehaviorChart'
+import { usePage } from '@/hooks/usePage.ts'
 
 interface ChartQuery {
   /** 游戏ID */
@@ -108,12 +109,6 @@ const conversionStateSelect: Array<SelectInfo> = [
 
 // 事件表格的上方查询字段信息
 const filterInfo: Array<QueryInfo> = [
-  // {
-  //   name: 'openId',
-  //   label: 'OpenId',
-  //   type: FilterType.INPUT,
-  //   placeholder: '输入OpenId'
-  // },
   {
     name: 'activeStatus',
     label: '上报状态',
@@ -179,7 +174,29 @@ const headerCardInfo: HeaderCardProps = {
   openDateSelect: false
 }
 
-const { updateChartData, chartOptions } = useTableChart(
+// 是否是单选的pf
+const isSinglePf = true
+
+/**
+ * 更新请求配置
+ * @param pf  新pf
+ * @param  gid 新gid
+ */
+const updateAllReq = (pf: string, gid: string) => {
+  pf = isSinglePf ? pf[0] : pf
+  queryFormData.value.gid = gid
+  queryFormData.value.pf = pf
+  updateChartData()
+  // updateReqConfig(keepDataTableInfo.requestConfig, { pf, gid })
+}
+
+const { watchPageChange } = usePage()
+
+const backupSelect = reactive([])
+
+watchPageChange(() => [selectInfo.pf, selectInfo.gid], backupSelect, updateAllReq)
+
+const { updateChartData, chartOptions } = useUserBehaviorChart(
   AllApi.userBehaviorPieChart,
   queryFormData,
   filterInfo,