From 01ac59a55edfacc2c78758cae1954e90274eb510 Mon Sep 17 00:00:00 2001
From: songjie <bestsongj@163.com>
Date: Sat, 24 Jan 2026 15:56:18 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AF=B9=E6=8E=A5=E7=94=A8=E6=88=B7=E6=B4=BB?=
 =?UTF-8?q?=E8=B7=83=E5=BA=A6=E7=BB=9F=E8=AE=A1-=E7=94=A8=E6=88=B7?=
 =?UTF-8?q?=E6=B4=BB=E8=B7=83=E5=BA=A6=E8=B6=8B=E5=8A=BF=E5=9B=BE=E6=8E=A5?=
 =?UTF-8?q?=E5=8F=A3=EF=BC=8C=E5=B9=B6=E8=B7=AF=E7=94=B1=E8=AE=B0=E5=BD=95?=
 =?UTF-8?q?=EF=BC=9B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/platformData.js                      |  23 ++++
 src/views/PlatformData/UserActivityStats.vue | 170 +++++++++++++++++++++------
 2 files changed, 156 insertions(+), 37 deletions(-)

diff --git a/src/api/platformData.js b/src/api/platformData.js
index 960626b..4e1ae62 100644
--- a/src/api/platformData.js
+++ b/src/api/platformData.js
@@ -223,3 +223,26 @@ export function getRegionActiveDataHistogram(params) {
     data: formData
   })
 }
+
+// 获取DeepChart用户活跃度趋势
+export function getUserDeepChartTrend(params) {
+  const formData = new FormData();
+  formData.append('token', localStorage.getItem('token'));
+  if (params) {
+    if (params.startTime) formData.append('startTime', params.startTime);
+    if (params.endTime) formData.append('endTime', params.endTime);
+    if (params.mode) formData.append('mode', params.mode);
+  }
+
+  return request({
+    url: 'https://16866f84.r7.cpolar.top/admin/user/deepchart/trend',
+    method: 'post',
+    headers: {
+      'token': localStorage.getItem('token'),
+      'client': 'ios',
+      'version': '1',
+      'Content-Type': 'multipart/form-data'
+    },
+    data: formData
+  })
+}
diff --git a/src/views/PlatformData/UserActivityStats.vue b/src/views/PlatformData/UserActivityStats.vue
index 566f9d3..faeb1c3 100644
--- a/src/views/PlatformData/UserActivityStats.vue
+++ b/src/views/PlatformData/UserActivityStats.vue
@@ -17,13 +17,14 @@
             start-placeholder="开始时间"
             end-placeholder="结束时间"
             size="default"
+            @change="handleChartDateChange"
           />
         </div>
         <div class="filter-right">
           <el-button-group>
-            <el-button type="danger">每日</el-button>
-            <el-button>近七日</el-button>
-            <el-button>近三十日</el-button>
+            <el-button :type="chartMode === 'day' ? 'danger' : 'default'" @click="handleModeChange('day')">每日</el-button>
+            <el-button :type="chartMode === 'week' ? 'danger' : 'default'" @click="handleModeChange('week')">近七日</el-button>
+            <el-button :type="chartMode === 'month' ? 'danger' : 'default'" @click="handleModeChange('month')">近三十日</el-button>
           </el-button-group>
         </div>
       </div>
@@ -88,44 +89,104 @@
 </template>
 
 <script setup>
-import { ref, onMounted, nextTick } from 'vue';
+import { ref, onMounted, nextTick, watch } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
 import * as echarts from 'echarts';
+import { getUserDeepChartTrend } from '../../api/platformData';
+
+const route = useRoute();
+const router = useRouter();
 
 // 图表筛选
 const chartDateRange = ref('');
+const chartMode = ref(route.query.mode || 'day'); // day, week, month
 const chartRef = ref(null);
+let chartInstance = null;
 
-// 表格筛选
-const tableAccount = ref('');
-const tableRegion = ref('');
-const tableDateRange = ref('');
-const currentPage = ref(1);
-const pageSize = ref(50);
+// 初始化 URL 参数
+const initQueryParams = () => {
+    const { mode, startTime, endTime } = route.query;
+    
+    if (mode) {
+        chartMode.value = mode;
+    }
+    
+    if (startTime && endTime) {
+        chartDateRange.value = [new Date(startTime), new Date(endTime)];
+    }
+};
 
-// 表格数据
-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秒' },
-]);
+initQueryParams();
 
-const headerCellStyle = {
-  background: '#f5f7fa',
-  color: '#333',
-  fontWeight: 'bold'
+const updateUrlParams = () => {
+    const query = { ...route.query };
+    query.mode = chartMode.value;
+    
+    if (chartDateRange.value && chartDateRange.value.length === 2) {
+        query.startTime = formatDate(chartDateRange.value[0]);
+        query.endTime = formatDate(chartDateRange.value[1]);
+    } else {
+        delete query.startTime;
+        delete query.endTime;
+    }
+    
+    router.replace({ query });
 };
 
-const initChart = () => {
-  if (chartRef.value) {
-    const chart = echarts.init(chartRef.value);
-    chart.setOption({
+const handleChartDateChange = () => {
+  updateUrlParams();
+  fetchChartData();
+};
+
+const handleModeChange = (mode) => {
+  chartMode.value = mode;
+  updateUrlParams();
+  fetchChartData();
+};
+
+// 格式化日期
+const formatDate = (date) => {
+    if (!date) return '';
+    const d = new Date(date);
+    const pad = (n) => n < 10 ? '0' + n : n;
+    return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
+};
+
+const fetchChartData = async () => {
+  const params = {
+    mode: chartMode.value
+  };
+
+  if (chartDateRange.value && chartDateRange.value.length === 2) {
+    params.startTime = formatDate(chartDateRange.value[0]);
+    params.endTime = formatDate(chartDateRange.value[1]);
+  }
+
+  try {
+    const res = await getUserDeepChartTrend(params);
+    console.log("获取DeepChart趋势数据响应:", res);
+    const data = res.data || res; // 兼容处理
+
+    if (Array.isArray(data)) {
+      updateChart(data);
+    }
+  } catch (e) {
+    console.error('获取DeepChart趋势数据失败:', e);
+  }
+};
+
+const updateChart = (data) => {
+  if (!chartRef.value) return;
+
+  if (!chartInstance) {
+    chartInstance = echarts.init(chartRef.value);
+  }
+
+  const dates = data.map(item => item.time_point);
+  const activeUsers = data.map(item => item.active_users);
+  const useCounts = data.map(item => item.use_count);
+
+  const option = {
       tooltip: {
         trigger: 'axis',
         axisPointer: { type: 'cross' }
@@ -149,20 +210,18 @@ const initChart = () => {
       xAxis: {
         type: 'category',
         boundaryGap: false,
-        data: ['六天前', '五天前', '四天前', '三天前', '两天前', '昨天', '今天']
+        data: dates
       },
       yAxis: [
         {
           type: 'value',
           min: 0,
-          max: 1400,
           position: 'left',
           axisLabel: { formatter: '{value}' }
         },
         {
           type: 'value',
           min: 0,
-          max: 1400,
           position: 'right',
           axisLabel: { formatter: '{value}' }
         }
@@ -172,7 +231,7 @@ const initChart = () => {
           name: 'DeepChart活跃人数',
           type: 'line',
           yAxisIndex: 0,
-          data: [300, 600, 320, 320, 400, 550, 650],
+          data: activeUsers,
           itemStyle: { color: '#e74c3c' },
           symbol: 'circle',
           symbolSize: 8,
@@ -182,14 +241,51 @@ const initChart = () => {
           name: 'DeepChart使用次数',
           type: 'line',
           yAxisIndex: 1,
-          data: [1350, 1250, 1100, 1050, 1050, 1300, 1000],
+          data: useCounts,
           itemStyle: { color: '#2ecc71' },
           symbol: 'circle',
           symbolSize: 8,
           lineStyle: { width: 3 }
         }
       ]
-    });
+    };
+    
+    chartInstance.setOption(option);
+};
+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) {
+    // 初始化图表实例
+    if (!chartInstance) {
+      chartInstance = echarts.init(chartRef.value);
+    }
+    // 初始加载数据
+    fetchChartData();
   }
 };