|
|
@ -1,27 +1,5 @@ |
|
|
<template> |
|
|
<template> |
|
|
<div class="user-activity-stats-container"> |
|
|
<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="content-card"> |
|
|
<div class="card-header"> |
|
|
<div class="card-header"> |
|
|
@ -113,10 +91,6 @@ |
|
|
import { ref, onMounted, nextTick } from 'vue'; |
|
|
import { ref, onMounted, nextTick } from 'vue'; |
|
|
import * as echarts from 'echarts'; |
|
|
import * as echarts from 'echarts'; |
|
|
|
|
|
|
|
|
// 全局筛选 |
|
|
|
|
|
const globalRegion = ref(''); |
|
|
|
|
|
const globalDateRange = ref(''); |
|
|
|
|
|
|
|
|
|
|
|
// 图表筛选 |
|
|
// 图表筛选 |
|
|
const chartDateRange = ref(''); |
|
|
const chartDateRange = ref(''); |
|
|
const chartRef = ref(null); |
|
|
const chartRef = ref(null); |
|
|
@ -233,28 +207,6 @@ onMounted(() => { |
|
|
min-height: calc(100vh - 40px); |
|
|
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: #409eff; border-color: #409eff; } |
|
|
|
|
|
.export-btn { margin-left: auto; background-color: #ff7875; border-color: #ff7875; } |
|
|
|
|
|
|
|
|
|
|
|
/* Content Cards */ |
|
|
/* Content Cards */ |
|
|
.content-card { |
|
|
.content-card { |
|
|
background: #fff; |
|
|
background: #fff; |
|
|
|