zzc/api-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat:maidian

Browse Source
This commit is contained in:
zzc
2026-02-20 08:04:46 +08:00
parent 911a182143
commit eac6eec9e3
4 changed files with 381 additions and 554 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/api/system/index.js
View File

@@ -7,3 +7,11 @@ export function getDeviceList(data) {
params: data,
})
}
export function getTrackingLogsList(data) {
return request({
url: 'management/api/system/tracking-logs/list',
method: 'get',
params: data,
})
}

350
src/views/index/components/TrackingCharts.vue Normal file
View File

@@ -0,0 +1,350 @@
<template>
<div class="tracking-charts">
<el-card class="filter-card" shadow="never">
<el-form :inline="true" :model="queryForm" size="small" @submit.native.prevent>
<el-form-item label="App">
<el-select v-model="queryForm.appId" filterable>
<el-option v-for="(label, value) in appMap" :key="value" :label="label" :value="value">
<span style="float: left">{{ label }}</span>
<span style="float: right; color: #8492a6; font-size: 13px">{{ 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">
<span style="float: left">{{ label }}</span>
<span style="float: right; color: #8492a6; font-size: 13px">{{ value }}</span>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="事件类型">
<el-select v-model="queryForm.eventType" clearable placeholder="全部类型">
<el-option v-for="(label, value) in eventTypeMap" :key="value" :label="label" :value="value" />
</el-select>
</el-form-item>
<el-form-item label="时间范围">
<el-date-picker
v-model="queryForm.dateRange"
:default-time="['00:00:00', '23:59:59']"
end-placeholder="结束日期"
:picker-options="pickerOptions"
range-separator="至"
start-placeholder="开始日期"
type="datetimerange"
value-format="yyyy-MM-dd HH:mm:ss"
/>
</el-form-item>
<el-form-item>
<el-button icon="el-icon-search" type="primary" @click="handleQuery">查询</el-button>
<el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
</el-card>
<div v-loading="loading" class="charts-container">
<el-row :gutter="20">
<el-col :span="24">
<el-card class="chart-card" shadow="never">
<div slot="header"><span>时段趋势</span></div>
<v-chart autoresize class="chart" :option="trendOption" />
</el-card>
</el-col>
</el-row>
<el-row :gutter="20" style="margin-top: 20px">
<el-col :span="12">
<el-card class="chart-card" shadow="never">
<div slot="header"><span>事件名称分布</span></div>
<v-chart autoresize class="chart" :option="eventNameOption" />
</el-card>
</el-col>
<el-col :span="12">
<el-card class="chart-card" shadow="never">
<div slot="header"><span>事件类型分布</span></div>
<v-chart autoresize class="chart" :option="eventTypeOption" />
</el-card>
</el-col>
</el-row>
<el-row :gutter="20" style="margin-top: 20px">
<el-col :span="24">
<el-card class="chart-card" shadow="never">
<div slot="header"><span>页面访问排行</span></div>
<v-chart autoresize class="chart" :option="pageOption" />
</el-card>
</el-col>
</el-row>
</div>
</div>
</template>
<script>
import { getTrackingLogsList } from '@/api/system'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { LineChart, PieChart, BarChart } from 'echarts/charts'
import { GridComponent, TooltipComponent, LegendComponent, TitleComponent } from 'echarts/components'
import VChart from 'vue-echarts'
import dayjs from 'dayjs'
import { groupBy, countBy } from 'lodash'
import { eventNameMap, eventTypeMap, appMap } from '../utils'
use([CanvasRenderer, LineChart, PieChart, BarChart, GridComponent, TooltipComponent, LegendComponent, TitleComponent])
export default {
name: 'TrackingCharts',
components: {
VChart,
},
data() {
return {
eventNameMap,
eventTypeMap,
appMap,
loading: false,
queryForm: {
appId: '69665538a49b8ae3be50fe5d',
eventName: '',
eventType: '',
dateRange: [],
},
pickerOptions: {
shortcuts: [
{
text: '今天',
onClick(picker) {
const end = new Date()
const start = new Date()
start.setHours(0, 0, 0, 0)
end.setHours(23, 59, 59, 999)
picker.$emit('pick', [start, end])
},
},
{
text: '昨天',
onClick(picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24)
start.setHours(0, 0, 0, 0)
end.setTime(end.getTime() - 3600 * 1000 * 24)
end.setHours(23, 59, 59, 999)
picker.$emit('pick', [start, end])
},
},
{
text: '最近一周',
onClick(picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
picker.$emit('pick', [start, end])
},
},
],
},
list: [],
trendOption: {},
eventNameOption: {},
eventTypeOption: {},
pageOption: {},
}
},
created() {
// 默认选中今天
const end = new Date()
const start = new Date()
start.setHours(0, 0, 0, 0)
end.setHours(23, 59, 59, 999)
this.queryForm.dateRange = [dayjs(start).format('YYYY-MM-DD HH:mm:ss'), dayjs(end).format('YYYY-MM-DD HH:mm:ss')]
this.fetchData()
},
methods: {
async fetchData() {
this.loading = true
try {
const params = {
appId: this.queryForm.appId,
eventName: this.queryForm.eventName || undefined,
eventType: this.queryForm.eventType || undefined,
startTime: this.queryForm.dateRange ? this.queryForm.dateRange[0] : undefined,
endTime: this.queryForm.dateRange ? this.queryForm.dateRange[1] : undefined,
pageNo: 1,
pageSize: 10000, // 获取足够多的数据进行前端统计，或者应该依赖后端聚合接口
}
const { data } = await getTrackingLogsList(params)
this.list = data.list || []
this.processData()
} catch (error) {
console.error(error)
this.$baseMessage('获取数据失败', 'error')
} finally {
this.loading = false
}
},
handleQuery() {
this.fetchData()
},
resetQuery() {
this.queryForm.appId = 'wx2d5351b816654a93'
this.queryForm.eventName = ''
this.queryForm.eventType = ''
const end = new Date()
const start = new Date()
start.setHours(0, 0, 0, 0)
end.setHours(23, 59, 59, 999)
this.queryForm.dateRange = [dayjs(start).format('YYYY-MM-DD HH:mm:ss'), dayjs(end).format('YYYY-MM-DD HH:mm:ss')]
this.fetchData()
},
processData() {
// 1. 时段趋势
const logsByHour = groupBy(this.list, (item) => dayjs(item.createdAt).format('HH:00'))
const hours = []
const counts = []
for (let i = 0; i < 24; i++) {
const hour = `${String(i).padStart(2, '0')}:00`
hours.push(hour)
counts.push(logsByHour[hour] ? logsByHour[hour].length : 0)
}
this.trendOption = {
tooltip: {
trigger: 'axis',
},
xAxis: {
type: 'category',
data: hours,
},
yAxis: {
type: 'value',
},
series: [
{
data: counts,
type: 'line',
smooth: true,
areaStyle: {},
},
],
}
// 2. 事件名称分布
const eventNameCounts = countBy(this.list, 'eventName')
const eventNameData = Object.keys(eventNameCounts).map((key) => ({
name: this.eventNameMap[key] || key,
value: eventNameCounts[key],
}))
this.eventNameOption = {
tooltip: {
trigger: 'item',
},
legend: {
orient: 'vertical',
left: 'left',
},
series: [
{
name: '事件名称',
type: 'pie',
radius: '50%',
data: eventNameData,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)',
},
},
},
],
}
// 3. 事件类型分布
const eventTypeCounts = countBy(this.list, 'eventType')
const eventTypeData = Object.keys(eventTypeCounts).map((key) => ({
name: this.eventTypeMap[key] || key,
value: eventTypeCounts[key],
}))
this.eventTypeOption = {
tooltip: {
trigger: 'item',
},
legend: {
orient: 'vertical',
left: 'left',
},
series: [
{
name: '事件类型',
type: 'pie',
radius: '50%',
data: eventTypeData,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)',
},
},
},
],
}
// 4. 页面访问排行
const pageCounts = countBy(this.list, 'page')
// 排序并取前10
const sortedPages = Object.keys(pageCounts)
.sort((a, b) => pageCounts[b] - pageCounts[a])
.slice(0, 10)
const pageData = sortedPages.map((key) => pageCounts[key])
this.pageOption = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true,
},
xAxis: {
type: 'value',
boundaryGap: [0, 0.01],
},
yAxis: {
type: 'category',
data: sortedPages,
},
series: [
{
name: '访问次数',
type: 'bar',
data: pageData,
},
],
}
},
},
}
</script>
<style scoped>
.tracking-charts {
padding: 20px;
}
.filter-card {
margin-bottom: 20px;
}
.chart-card {
height: 400px;
}
.chart {
height: 300px;
}
</style>

558
src/views/index/index.vue
View File

@@ -1,569 +1,19 @@
<template>
<div class="index-container">
<!-- <el-row :gutter="20">
<el-col :lg="24" :md="24" :sm="24" :xl="24" :xs="24">
<el-alert v-if="noticeList">
<div style="display: flex; align-items: center; justify-content: center">
<a href="https://github.com/zxwk1998/vue-admin-better" target="_blank">
<img
src="https://img.shields.io/github/stars/zxwk1998/vue-admin-better?style=flat-square&label=Stars&logo=github"
style="margin-right: 10px"
/>
</a>
<p v-html="noticeList.notice"></p>
</div>
</el-alert>
</el-col>
<el-col :lg="6" :md="12" :sm="24" :xl="6" :xs="24">
<el-card shadow="never">
<div slot="header">
<span>访问量</span>
</div>
<vab-chart autoresize :option="fwl" />
<div class="bottom">
<span>
日均访问量:
{{ config1.endVal }}
</span>
</div>
</el-card>
</el-col>
<el-col :lg="6" :md="12" :sm="24" :xl="6" :xs="24">
<el-card shadow="never">
<div slot="header">
<span>授权数</span>
</div>
<vab-chart autoresize :option="sqs" />
<div class="bottom">
<span>
总授权数:
{{ config2.endVal }}
</span>
</div>
</el-card>
</el-col>
<el-col v-for="(item, index) in iconList" :key="index" :lg="3" :md="3" :sm="6" :xl="3" :xs="12">
<router-link target="_blank" :to="item.link">
<el-card class="icon-panel" shadow="never">
<vab-icon :icon="['fas', item.icon]" :style="{ color: item.color }" />
<p>{{ item.title }}</p>
</el-card>
</router-link>
</el-col>
<el-col :lg="11" :md="24" :sm="24" :xl="11" :xs="24">
<el-card class="card" shadow="never">
<div slot="header">
<span>依赖信息</span>
<div style="float: right">部署时间:{{ updateTime }}</div>
</div>
<table class="table">
<tr>
<td>@vue/cli版本</td>
<td>{{ devDependencies['@vue/cli-service'] }}</td>
<td>vue版本</td>
<td>{{ dependencies['vue'] }}</td>
</tr>
<tr>
<td>vuex版本</td>
<td>{{ dependencies['vuex'] }}</td>
<td>vue-router版本</td>
<td>{{ dependencies['vue-router'] }}</td>
</tr>
<tr>
<td>element-ui版本</td>
<td>{{ dependencies['element-ui'] }}</td>
<td>axios版本</td>
<td>{{ dependencies['axios'] }}</td>
</tr>
<tr>
<td>eslint版本</td>
<td>{{ devDependencies['eslint'] }}</td>
<td>prettier版本</td>
<td>{{ devDependencies['prettier'] }}</td>
</tr>
<tr>
<td>sass版本</td>
<td>{{ devDependencies['sass'] }}</td>
<td>mockjs版本</td>
<td>{{ dependencies['mockjs'] }}</td>
</tr>
<tr>
<td>layouts版本</td>
<td>{{ dependencies['layouts'] }}</td>
<td>lodash版本</td>
<td>{{ dependencies['lodash'] }}</td>
</tr>
</table>
<br />
<el-alert :closable="false" :title="userAgent" type="info" />
<br />
</el-card>
</el-col>
<el-col :lg="13" :md="13" :sm="24" :xl="13" :xs="24">
<el-card shadow="never">
<div slot="header">
<span>其他信息</span>
</div>
<div style="text-align: center">
<vab-colorful-icon icon-class="vab" style="font-size: 140px" />
<h1 style="font-size: 30px">vue-admin-better</h1>
</div>
<div class="bottom-btn"></div>
</el-card>
</el-col>
</el-row> -->
<tracking-charts />
</div>
</template>
<script>
// import VabChart from '@/plugins/echarts'
import { dependencies, devDependencies } from '../../../package.json'
import { getNoticeList } from '@/api/notice'
import TrackingCharts from './components/TrackingCharts'
export default {
name: 'Index',
components: {
// VabChart,
TrackingCharts,
},
data() {
return {
timer: 0,
updateTime: process.env.VUE_APP_UPDATE_TIME,
nodeEnv: process.env.NODE_ENV,
dependencies: dependencies,
devDependencies: devDependencies,
config1: {
startVal: 0,
endVal: this.$baseLodash.random(20000, 60000),
decimals: 0,
prefix: '',
suffix: '',
separator: ',',
duration: 8000,
},
config2: {
startVal: 0,
endVal: this.$baseLodash.random(1000, 20000),
decimals: 0,
prefix: '',
suffix: '',
separator: ',',
duration: 8000,
},
config3: {
startVal: 0,
endVal: this.$baseLodash.random(1000, 20000),
decimals: 0,
prefix: '',
suffix: '',
separator: ',',
duration: 8000,
},
//访问量
fwl: {
color: ['#1890FF', '#36CBCB', '#4ECB73', '#FBD437', '#F2637B', '#975FE5'],
backgroundColor: 'rgba(252,252,252,0)',
grid: {
top: '4%',
left: '2%',
right: '4%',
bottom: '0%',
containLabel: true,
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: [],
axisTick: {
alignWithLabel: true,
},
},
],
yAxis: [
{
type: 'value',
},
],
series: [
{
name: '访问量',
type: 'line',
data: [],
smooth: true,
areaStyle: {},
},
],
},
//授权数
sqs: {
color: ['#1890FF', '#36CBCB', '#4ECB73', '#FBD437', '#F2637B', '#975FE5'],
backgroundColor: 'rgba(252,252,252,0)',
grid: {
top: '4%',
left: '2%',
right: '4%',
bottom: '0%',
containLabel: true,
},
xAxis: [
{
type: 'category',
/*boundaryGap: false,*/
data: ['0时', '4时', '8时', '12时', '16时', '20时', '24时'],
axisTick: {
alignWithLabel: true,
},
},
],
yAxis: [
{
type: 'value',
},
],
series: [
{
name: '授权数',
type: 'bar',
barWidth: '60%',
data: [10, 52, 20, 33, 39, 33, 22],
},
],
},
//词云
cy: {
grid: {
top: '4%',
left: '2%',
right: '4%',
bottom: '0%',
},
series: [
{
type: 'wordCloud',
gridSize: 15,
sizeRange: [12, 40],
rotationRange: [0, 0],
width: '100%',
height: '100%',
textStyle: {
normal: {
color() {
const arr = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#975FE5']
let index = Math.floor(Math.random() * arr.length)
return arr[index]
},
},
},
data: [
{
name: 'vue-admin-better',
value: 15000,
},
{
name: 'element',
value: 10081,
},
{
name: 'beautiful',
value: 9386,
},
{
name: 'vue',
value: 6500,
},
{
name: 'zxwk1998',
value: 6000,
},
{
name: 'good',
value: 4500,
},
{
name: 'success',
value: 3800,
},
{
name: 'never',
value: 3000,
},
{
name: 'boy',
value: 2500,
},
{
name: 'girl',
value: 2300,
},
{
name: 'github',
value: 2000,
},
{
name: 'hbuilder',
value: 1900,
},
{
name: 'dcloud',
value: 1800,
},
{
name: 'china',
value: 1700,
},
{
name: '1204505056',
value: 1600,
},
{
name: '972435319',
value: 1500,
},
{
name: 'young',
value: 1200,
},
{
name: 'old',
value: 1100,
},
{
name: 'vuex',
value: 900,
},
{
name: 'router',
value: 800,
},
{
name: 'money',
value: 700,
},
{
name: 'qingdao',
value: 800,
},
{
name: 'yantai',
value: 9000,
},
{
name: 'author is very cool',
value: 9200,
},
],
},
],
},
//更新日志
reverse: true,
activities: [],
noticeList: [],
//其他信息
userAgent: navigator.userAgent,
//卡片图标
iconList: [
{
icon: 'video',
title: '视频播放器',
link: '/vab/player',
color: '#ffc069',
},
{
icon: 'table',
title: '表格',
link: '/vab/table/comprehensiveTable',
color: '#5cdbd3',
},
{
icon: 'laptop-code',
title: '源码',
link: 'https://github.com/zxwk1998/vue-admin-better',
color: '#b37feb',
},
{
icon: 'book',
title: '书籍',
link: '',
color: '#69c0ff',
},
{
icon: 'bullhorn',
title: '公告',
link: '',
color: '#ff85c0',
},
{
icon: 'gift',
title: '礼物',
link: '',
color: '#ffd666',
},
{
icon: 'balance-scale-left',
title: '公平的世界',
link: '',
color: '#ff9c6e',
},
{
icon: 'coffee',
title: '休息一下',
link: '',
color: '#95de64',
},
],
}
},
created() {
this.fetchData()
},
beforeDestroy() {
clearInterval(this.timer)
},
mounted() {
let base = +new Date(2020, 1, 1)
let oneDay = 24 * 3600 * 1000
let date = []
let data = [Math.random() * 1500]
let now = new Date(base)
const addData = (shift) => {
now = [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/')
date.push(now)
data.push(this.$baseLodash.random(20000, 60000))
if (shift) {
date.shift()
data.shift()
}
now = new Date(+new Date(now) + oneDay)
}
for (let i = 1; i < 6; i++) {
addData()
}
addData(true)
this.fwl.xAxis[0].data = date
this.fwl.series[0].data = data
this.timer = setInterval(() => {
addData(true)
this.fwl.xAxis[0].data = date
this.fwl.series[0].data = data
}, 3000)
},
methods: {
handleClick(e) {
this.$baseMessage(`点击了${e.name},这里可以写跳转`)
},
handleZrClick() {},
handleChangeTheme() {
this.$baseEventBus.$emit('theme')
},
async fetchData() {
const res = await getNoticeList()
this.noticeList = res.data
},
return {}
},
}
</script>
<style lang="scss" scoped>
.index-container {
padding: 0 !important;
margin: 0 !important;
background: #f5f7f8 !important;
::v-deep {
.el-alert {
padding: $base-padding;
&--info.is-light {
min-height: 82px;
padding: $base-padding;
margin-bottom: 15px;
color: #909399;
background-color: $base-color-white;
border: 1px solid #ebeef5;
}
}
.el-card__body {
.echarts {
width: 100%;
height: 115px;
}
}
}
.card {
::v-deep {
.el-card__body {
.echarts {
width: 100%;
height: 305px;
}
}
}
}
.bottom {
padding-top: 20px;
margin-top: 5px;
color: #595959;
text-align: left;
border-top: 1px solid $base-border-color;
}
.table {
width: 100%;
color: #666;
border-collapse: collapse;
background-color: #fff;
td {
position: relative;
min-height: 20px;
padding: 9px 15px;
font-size: 14px;
line-height: 20px;
border: 1px solid #e6e6e6;
&:nth-child(odd) {
width: 20%;
text-align: right;
background-color: #f7f7f7;
}
}
}
.icon-panel {
height: 117px;
text-align: center;
cursor: pointer;
svg {
font-size: 40px;
}
p {
margin-top: 10px;
}
}
.bottom-btn {
button {
margin: 5px 10px 15px 0;
}
}
}
</style>

19
src/views/index/utils/index.js Normal file
View File

@@ -0,0 +1,19 @@
export const eventNameMap = {
card_tpl_choose: '选择祝福卡片模板',
card_title_choose: '选择祝福卡片标题',
avatar_choose_album: '选择头像相册',
index_function_select: '首页功能选择',
index_goto_make: '首页推荐跳转',
index_recommend_click: '首页推荐点击',
}
export const eventTypeMap = {
jump: '跳转',
click: '点击',
select: '选择',
load_more: '加载更多',
}
export const appMap = {
'69665538a49b8ae3be50fe5d': '新春祝福',
}