From 1126a1f54f81c010da6c62e2fc3ae88a3f7e36a6 Mon Sep 17 00:00:00 2001
From: songjie <bestsongj@163.com>
Date: Thu, 22 Jan 2026 15:41:24 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E7=94=A8=E6=88=B7=E6=B4=BB?=
 =?UTF-8?q?=E8=B7=83=E5=BA=A6=E9=A1=B5=E9=9D=A2=EF=BC=9B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/PlatformData/UserActivityStats.vue | 318 ++++++++++++++++++++++++++-
 1 file changed, 317 insertions(+), 1 deletion(-)

diff --git a/src/views/PlatformData/UserActivityStats.vue b/src/views/PlatformData/UserActivityStats.vue
index 4b69495..ad2d681 100644
--- a/src/views/PlatformData/UserActivityStats.vue
+++ b/src/views/PlatformData/UserActivityStats.vue
@@ -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>