From 2b9a6e109cb7796c7febaeba2860ceee0a7cc1de Mon Sep 17 00:00:00 2001 From: zzc <1761997216@qq.com> Date: Fri, 20 Feb 2026 15:45:23 +0800 Subject: [PATCH] feat:maidian --- src/views/index/components/TrackingCharts.vue | 132 +++++++++++++++++- src/views/spring/user/user/index.vue | 4 +- 2 files changed, 132 insertions(+), 4 deletions(-) diff --git a/src/views/index/components/TrackingCharts.vue b/src/views/index/components/TrackingCharts.vue index 25a6bf6..c94bb06 100644 --- a/src/views/index/components/TrackingCharts.vue +++ b/src/views/index/components/TrackingCharts.vue @@ -56,13 +56,13 @@
事件名称分布
- +
事件类型分布
- + @@ -75,6 +75,52 @@ + + + + +
+ + 详细日志列表 + ({{ filterText }}) + + 清除筛选 +
+ + + + + + + + + + + + + + + + + + + @@ -145,12 +191,27 @@ ], }, list: [], + filteredList: [], + currentPage: 1, + pageSize: 10, + isFiltered: false, + filterText: '', trendOption: {}, eventNameOption: {}, eventTypeOption: {}, pageOption: {}, } }, + computed: { + total() { + return this.filteredList.length + }, + paginatedList() { + const start = (this.currentPage - 1) * this.pageSize + const end = start + this.pageSize + return this.filteredList.slice(start, end) + }, + }, created() { // 默认选中今天 const end = new Date() @@ -162,6 +223,9 @@ this.fetchData() }, methods: { + formatTime(time) { + return dayjs(time).format('YYYY-MM-DD HH:mm:ss') + }, async fetchData() { this.loading = true try { @@ -177,6 +241,10 @@ const { data } = await getTrackingLogsList(params) this.list = data.list || [] + this.filteredList = [...this.list] + this.isFiltered = false + this.filterText = '' + this.currentPage = 1 this.processData() } catch (error) { console.error(error) @@ -199,6 +267,62 @@ this.queryForm.dateRange = [dayjs(start).format('YYYY-MM-DD HH:mm:ss'), dayjs(end).format('YYYY-MM-DD HH:mm:ss')] this.fetchData() }, + handleSizeChange(val) { + this.pageSize = val + this.currentPage = 1 + }, + handleCurrentChange(val) { + this.currentPage = val + }, + clearFilter() { + this.filteredList = [...this.list] + this.isFiltered = false + this.filterText = '' + this.currentPage = 1 + }, + handleEventNameClick(params) { + const name = params.name + // name 可能是中文映射名，需要反向查找 key，或者在 processData 时把 key 存入 + // 简单起见，processData 中 name 已经是中文名或者 key 了。 + // 如果我们用中文名展示，过滤时比较麻烦。 + // 最好在 processData 中让 echarts data item 包含原始 key。 + + // 重新检查 processData + // const eventNameData = Object.keys(eventNameCounts).map((key) => ({ + // name: this.eventNameMap[key] || key, + // value: eventNameCounts[key], + // key: key // 添加原始 key + // })) + + const key = params.data.key || params.name // 如果没有 key 属性，回退到 name + this.filteredList = this.list.filter((item) => { + const itemKey = item.eventName + const itemName = this.eventNameMap[itemKey] || itemKey + // 如果 params.data.key 存在，则精确匹配 key + if (params.data.key) { + return item.eventName === params.data.key + } + return itemName === name + }) + this.isFiltered = true + this.filterText = `筛选事件: ${name}` + this.currentPage = 1 + }, + handleEventTypeClick(params) { + const name = params.name + const key = params.data.key || params.name + this.filteredList = this.list.filter((item) => { + if (params.data.key) { + return item.eventType === params.data.key + } + const itemKey = item.eventType + const itemName = this.eventTypeMap[itemKey] || itemKey + return itemName === name + }) + this.isFiltered = true + this.filterText = `筛选类型: ${name}` + this.currentPage = 1 + }, processData() { // 1. 时段趋势 const logsByHour = groupBy(this.list, (item) => dayjs(item.createdAt).format('HH:00')) @@ -235,10 +359,12 @@ const eventNameData = Object.keys(eventNameCounts).map((key) => ({ name: this.eventNameMap[key] || key, value: eventNameCounts[key], + key: key, // 保存原始key })) this.eventNameOption = { tooltip: { trigger: 'item', + formatter: '{b}: {c} ({d}%)', }, legend: { orient: 'vertical', @@ -266,10 +392,12 @@ const eventTypeData = Object.keys(eventTypeCounts).map((key) => ({ name: this.eventTypeMap[key] || key, value: eventTypeCounts[key], + key: key, // 保存原始key })) this.eventTypeOption = { tooltip: { trigger: 'item', + formatter: '{b}: {c} ({d}%)', }, legend: { orient: 'vertical', diff --git a/src/views/spring/user/user/index.vue b/src/views/spring/user/user/index.vue index 5570989..2eaa525 100644 --- a/src/views/spring/user/user/index.vue +++ b/src/views/spring/user/user/index.vue @@ -8,7 +8,7 @@ - + 查询 @@ -104,7 +104,7 @@ queryForm: { pageNo: 1, pageSize: 10, - permission: '', + userId: '', }, timeOutID: null, }