feat:maidian

src/views/index/components/TrackingCharts.vue

@@ -10,6 +10,16 @@
             </el-option>
           </el-select>
         </el-form-item>
+        <el-form-item label="User ID">
+          <el-select v-model="queryForm.userId" allow-create clearable default-first-option filterable placeholder="请输入或选择User ID">
+            <el-option v-for="item in userOptions" :key="item.value" :label="item.label" :value="item.value">
+              <span style="float: left">{{ item.label }}</span>
+              <span v-if="item.value !== item.label" style="float: right; color: #8492a6; font-size: 13px; margin-left: 20px">
+                {{ item.value }}
+              </span>
+            </el-option>
+          </el-select>
+        </el-form-item>
         <el-form-item label="事件名称">
           <el-select v-model="queryForm.eventName" clearable filterable placeholder="全部事件">
             <el-option v-for="(label, value) in eventNameMap" :key="value" :label="label" :value="value">
@@ -134,7 +144,7 @@
   import VChart from 'vue-echarts'
   import dayjs from 'dayjs'
   import { groupBy, countBy } from 'lodash'
-  import { eventNameMap, eventTypeMap, appMap } from '../utils'
+  import { eventNameMap, eventTypeMap, appMap, userMap } from '../utils'
 
   use([CanvasRenderer, LineChart, PieChart, BarChart, GridComponent, TooltipComponent, LegendComponent, TitleComponent])
 
@@ -148,13 +158,16 @@
         eventNameMap,
         eventTypeMap,
         appMap,
+        userMap,
         loading: false,
         queryForm: {
           appId: '69665538a49b8ae3be50fe5d',
+          userId: '',
           eventName: '',
           eventType: '',
           dateRange: [],
         },
+        userOptions: [],
         pickerOptions: {
           shortcuts: [
             {
@@ -231,6 +244,7 @@
         try {
           const params = {
             appId: this.queryForm.appId,
+            userId: this.queryForm.userId || undefined,
             eventName: this.queryForm.eventName || undefined,
             eventType: this.queryForm.eventType || undefined,
             startTime: this.queryForm.dateRange ? this.queryForm.dateRange[0] : undefined,
@@ -241,6 +255,14 @@
 
           const { data } = await getTrackingLogsList(params)
           this.list = data.list || []
+
+          // 如果没有筛选用户，则更新用户选项列表
+          if (!this.queryForm.userId) {
+            const userIds = this.list.map((item) => item.userId).filter(Boolean)
+            const uniqueUsers = [...new Set(userIds)]
+            this.userOptions = uniqueUsers.map((id) => ({ value: id, label: this.userMap[id] || id }))
+          }
+
           this.filteredList = [...this.list]
           this.isFiltered = false
           this.filterText = ''
@@ -257,7 +279,8 @@
         this.fetchData()
       },
       resetQuery() {
-        this.queryForm.appId = 'wx2d5351b816654a93'
+        this.queryForm.appId = '69665538a49b8ae3be50fe5d'
+        this.queryForm.userId = ''
         this.queryForm.eventName = ''
         this.queryForm.eventType = ''
         const end = new Date()