songjie
1 month ago
1 changed files with 317 additions and 1 deletions
@ -1,14 +1,330 @@ |
|||
<template> |
|||
<div class="user-activity-stats-container"> |
|||
<h1>用户活跃度统计</h1> |
|||
<!-- 顶部全局筛选 --> |
|||
<div class="search-bar global-search"> |
|||
<div class="search-label">地区</div> |
|||
<el-select v-model="globalRegion" placeholder="请选择所属地区" style="width: 200px; margin-right: 20px;"> |
|||
<el-option label="全部" value="all" /> |
|||
<el-option label="中国" value="cn" /> |
|||
</el-select> |
|||
|
|||
<div class="search-label">时间段查询</div> |
|||
<el-date-picker |
|||
v-model="globalDateRange" |
|||
type="daterange" |
|||
range-separator="至" |
|||
start-placeholder="开始时间" |
|||
end-placeholder="结束时间" |
|||
size="default" |
|||
/> |
|||
<el-button type="primary" class="search-btn">搜索</el-button> |
|||
<el-button type="primary" class="reset-btn">重置</el-button> |
|||
<el-button type="danger" class="export-btn">数据导出</el-button> |
|||
</div> |
|||
|
|||
<!-- 用户活跃度趋势图 --> |
|||
<div class="content-card"> |
|||
<div class="card-header"> |
|||
<el-icon class="header-icon"><TrendCharts /></el-icon> |
|||
<span class="header-title">用户活跃度趋势图</span> |
|||
</div> |
|||
|
|||
<div class="card-filter-row"> |
|||
<div class="filter-left"> |
|||
<span class="filter-label">时间段查询</span> |
|||
<el-date-picker |
|||
v-model="chartDateRange" |
|||
type="daterange" |
|||
range-separator="至" |
|||
start-placeholder="开始时间" |
|||
end-placeholder="结束时间" |
|||
size="default" |
|||
/> |
|||
</div> |
|||
<div class="filter-right"> |
|||
<el-button-group> |
|||
<el-button type="danger">每日</el-button> |
|||
<el-button>近七日</el-button> |
|||
<el-button>近三十日</el-button> |
|||
</el-button-group> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="chart-container" ref="chartRef"></div> |
|||
</div> |
|||
|
|||
<!-- DeepChart活跃用户明细 --> |
|||
<div class="content-card"> |
|||
<div class="card-header"> |
|||
<el-icon class="header-icon"><DataLine /></el-icon> |
|||
<span class="header-title">DeepChart活跃用户明细</span> |
|||
</div> |
|||
|
|||
<div class="table-filter-row"> |
|||
<el-input v-model="tableAccount" placeholder="请输入账号" style="width: 150px" /> |
|||
<el-select v-model="tableRegion" placeholder="请选择所属地区" style="width: 150px"> |
|||
<el-option label="全部" value="all" /> |
|||
</el-select> |
|||
|
|||
<el-date-picker |
|||
v-model="tableDateRange" |
|||
type="daterange" |
|||
range-separator="至" |
|||
start-placeholder="开始时间" |
|||
end-placeholder="结束时间" |
|||
size="default" |
|||
style="width: 240px" |
|||
/> |
|||
|
|||
<el-button type="primary" class="search-btn-small">搜索</el-button> |
|||
<el-button type="primary" class="reset-btn-small">重置</el-button> |
|||
<el-button type="danger" class="export-btn-small">数据导出</el-button> |
|||
<el-button type="danger" class="export-list-btn">查看导出列表</el-button> |
|||
</div> |
|||
|
|||
<el-table :data="tableData" style="width: 100%" :header-cell-style="headerCellStyle"> |
|||
<el-table-column prop="index" label="序号" width="80" align="center" /> |
|||
<el-table-column prop="account" label="账号" min-width="120" /> |
|||
<el-table-column prop="name" label="姓名" min-width="120" /> |
|||
<el-table-column prop="region" label="地区" width="100" /> |
|||
<el-table-column prop="loginCount" label="登录次数" width="100" align="center" /> |
|||
<el-table-column prop="totalDuration" label="总停留时长" min-width="150" align="center" /> |
|||
<el-table-column prop="avgDuration" label="平均停留时长" min-width="150" align="center" /> |
|||
<el-table-column prop="deepMate" label="DeepMate" min-width="150" align="center" /> |
|||
<el-table-column prop="deepExplore" label="深度探索" min-width="150" align="center" /> |
|||
</el-table> |
|||
|
|||
<div class="pagination-container"> |
|||
<div class="total-count">共400条</div> |
|||
<el-pagination |
|||
background |
|||
layout="sizes, prev, pager, next, jumper" |
|||
:total="400" |
|||
:page-sizes="[10, 20, 50, 100]" |
|||
v-model:current-page="currentPage" |
|||
v-model:page-size="pageSize" |
|||
/> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { ref, onMounted, nextTick } from 'vue'; |
|||
import * as echarts from 'echarts'; |
|||
|
|||
// 全局筛选 |
|||
const globalRegion = ref(''); |
|||
const globalDateRange = ref(''); |
|||
|
|||
// 图表筛选 |
|||
const chartDateRange = ref(''); |
|||
const chartRef = ref(null); |
|||
|
|||
// 表格筛选 |
|||
const tableAccount = ref(''); |
|||
const tableRegion = ref(''); |
|||
const tableDateRange = ref(''); |
|||
const currentPage = ref(1); |
|||
const pageSize = ref(50); |
|||
|
|||
// 表格数据 |
|||
const tableData = ref([ |
|||
{ index: 1, account: 'DC900480004', name: 'Thea Elowen Hale', region: '中国', loginCount: 99, totalDuration: '99小时99分钟99秒', avgDuration: '99小时99分钟99秒', deepMate: '99小时99分钟99秒', deepExplore: '99小时99分钟99秒' }, |
|||
{ index: 2, account: 'DC900480004', name: '欧帝三萃', region: '美国', loginCount: 99, totalDuration: '99小时99分钟99秒', avgDuration: '99小时99分钟99秒', deepMate: '99小时99分钟99秒', deepExplore: '99小时99分钟99秒' }, |
|||
{ index: 3, account: 'DC900480004', name: 'Thea Elowen Hale', region: '新加坡', loginCount: 99, totalDuration: '99小时99分钟99秒', avgDuration: '99小时99分钟99秒', deepMate: '99小时99分钟99秒', deepExplore: '99小时99分钟99秒' }, |
|||
{ index: 4, account: 'DC900480004', name: 'viên แก้ว หลาว', region: '泰国', loginCount: 99, totalDuration: '99小时99分钟99秒', avgDuration: '99小时99分钟99秒', deepMate: '99小时99分钟99秒', deepExplore: '99小时99分钟99秒' }, |
|||
{ index: 5, account: 'DC900480004', name: 'viên แก้ว หลาว', region: '越南', loginCount: 99, totalDuration: '99小时99分钟99秒', avgDuration: '99小时99分钟99秒', deepMate: '99小时99分钟99秒', deepExplore: '99小时99分钟99秒' }, |
|||
{ index: 6, account: 'DC900480004', name: 'Cien Yong Hao', region: '中国', loginCount: 9999, totalDuration: '99小时99分钟99秒', avgDuration: '99小时99分钟99秒', deepMate: '99小时99分钟99秒', deepExplore: '99小时99分钟99秒' }, |
|||
{ index: 7, account: 'DC900480004', name: 'Cien Yong Hao', region: '美国', loginCount: 999, totalDuration: '99小时99分钟99秒', avgDuration: '99小时99分钟99秒', deepMate: '99小时99分钟99秒', deepExplore: '99小时99分钟99秒' }, |
|||
{ index: 8, account: 'DC900480004', name: 'Tiên Linh Vinh Hảo', region: '新加坡', loginCount: 999, totalDuration: '99小时99分钟99秒', avgDuration: '99小时99分钟99秒', deepMate: '99小时99分钟99秒', deepExplore: '99小时99分钟99秒' }, |
|||
{ index: 9, account: 'DC900480004', name: 'Tiên Linh Vinh Hảo', region: '新加坡', loginCount: 999, totalDuration: '99小时99分钟99秒', avgDuration: '99小时99分钟99秒', deepMate: '99小时99分钟99秒', deepExplore: '99小时99分钟99秒' }, |
|||
{ index: 10, account: 'DC900480004', name: 'Tiên Linh Vinh Hảo', region: '香港', loginCount: 999, totalDuration: '99小时99分钟99秒', avgDuration: '99小时99分钟99秒', deepMate: '99小时99分钟99秒', deepExplore: '99小时99分钟99秒' }, |
|||
]); |
|||
|
|||
const headerCellStyle = { |
|||
background: '#f5f7fa', |
|||
color: '#333', |
|||
fontWeight: 'bold' |
|||
}; |
|||
|
|||
const initChart = () => { |
|||
if (chartRef.value) { |
|||
const chart = echarts.init(chartRef.value); |
|||
chart.setOption({ |
|||
tooltip: { |
|||
trigger: 'axis', |
|||
axisPointer: { type: 'cross' } |
|||
}, |
|||
legend: { |
|||
data: ['DeepChart活跃人数', 'DeepChart使用次数'], |
|||
top: 'top', |
|||
left: 'center', |
|||
itemWidth: 35, |
|||
itemHeight: 18, |
|||
textStyle: { |
|||
fontSize: 14 |
|||
} |
|||
}, |
|||
grid: { |
|||
left: '3%', |
|||
right: '4%', |
|||
bottom: '3%', |
|||
containLabel: true |
|||
}, |
|||
xAxis: { |
|||
type: 'category', |
|||
boundaryGap: false, |
|||
data: ['六天前', '五天前', '四天前', '三天前', '两天前', '昨天', '今天'] |
|||
}, |
|||
yAxis: [ |
|||
{ |
|||
type: 'value', |
|||
min: 0, |
|||
max: 1400, |
|||
position: 'left', |
|||
axisLabel: { formatter: '{value}' } |
|||
}, |
|||
{ |
|||
type: 'value', |
|||
min: 0, |
|||
max: 1400, |
|||
position: 'right', |
|||
axisLabel: { formatter: '{value}' } |
|||
} |
|||
], |
|||
series: [ |
|||
{ |
|||
name: 'DeepChart活跃人数', |
|||
type: 'line', |
|||
yAxisIndex: 0, |
|||
data: [300, 600, 320, 320, 400, 550, 650], |
|||
itemStyle: { color: '#e74c3c' }, |
|||
symbol: 'circle', |
|||
symbolSize: 8, |
|||
lineStyle: { width: 3 } |
|||
}, |
|||
{ |
|||
name: 'DeepChart使用次数', |
|||
type: 'line', |
|||
yAxisIndex: 1, |
|||
data: [1350, 1250, 1100, 1050, 1050, 1300, 1000], |
|||
itemStyle: { color: '#2ecc71' }, |
|||
symbol: 'circle', |
|||
symbolSize: 8, |
|||
lineStyle: { width: 3 } |
|||
} |
|||
] |
|||
}); |
|||
} |
|||
}; |
|||
|
|||
onMounted(() => { |
|||
nextTick(() => { |
|||
initChart(); |
|||
}); |
|||
}); |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.user-activity-stats-container { |
|||
padding: 20px; |
|||
background-color: #fee6e6; |
|||
min-height: calc(100vh - 40px); |
|||
} |
|||
|
|||
/* Global Search */ |
|||
.search-bar { |
|||
background: #fff; |
|||
padding: 15px; |
|||
border-radius: 8px; |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 10px; |
|||
margin-bottom: 20px; |
|||
border: 1px solid #f0f0f0; |
|||
} |
|||
.search-label { |
|||
font-weight: bold; |
|||
margin-right: 5px; |
|||
} |
|||
.search-btn, .reset-btn { |
|||
width: 80px; |
|||
} |
|||
.search-btn { background-color: #409eff; } |
|||
.reset-btn { background-color: #a0cfff; border-color: #a0cfff; } |
|||
.export-btn { margin-left: auto; background-color: #ff7875; border-color: #ff7875; } |
|||
|
|||
/* Content Cards */ |
|||
.content-card { |
|||
background: #fff; |
|||
border-radius: 8px; |
|||
padding: 20px; |
|||
margin-bottom: 20px; |
|||
border: 1px solid #f0f0f0; |
|||
} |
|||
.card-header { |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 8px; |
|||
margin-bottom: 20px; |
|||
} |
|||
.header-icon { |
|||
color: #409eff; |
|||
font-size: 20px; |
|||
} |
|||
.header-title { |
|||
font-size: 18px; |
|||
font-weight: bold; |
|||
color: #333; |
|||
} |
|||
|
|||
/* Chart Section */ |
|||
.card-filter-row { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
margin-bottom: 20px; |
|||
background: #fafafa; |
|||
padding: 10px; |
|||
border-radius: 4px; |
|||
} |
|||
.filter-left { |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 10px; |
|||
} |
|||
.filter-label { |
|||
font-size: 14px; |
|||
font-weight: bold; |
|||
} |
|||
.chart-container { |
|||
width: 100%; |
|||
height: 400px; |
|||
} |
|||
|
|||
/* Table Section */ |
|||
.table-filter-row { |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 10px; |
|||
margin-bottom: 20px; |
|||
} |
|||
.search-btn-small { background-color: #409eff; width: 70px; } |
|||
.reset-btn-small { background-color: #a0cfff; border-color: #a0cfff; width: 70px; } |
|||
.export-btn-small { background-color: #ff7875; border-color: #ff7875; width: 90px; } |
|||
.export-list-btn { background-color: #ff7875; border-color: #ff7875; width: 110px; } |
|||
|
|||
/* Pagination */ |
|||
.pagination-container { |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
margin-top: 20px; |
|||
} |
|||
.total-count { |
|||
font-size: 14px; |
|||
color: #606266; |
|||
margin-right: 20px; |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue