You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
330 lines
11 KiB
330 lines
11 KiB
<template>
|
|
<div class="user-activity-stats-container">
|
|
<!-- 顶部全局筛选 -->
|
|
<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>
|