feat:卸载画像 卸载归因

EXPORT_FEATURE_README.md

@@ -0,0 +1,84 @@
+# 表格导出功能实现
+
+## 功能概述
+
+为使用时长页面实现了表格数据导出功能，支持将表格数据导出为CSV格式文件。
+
+## 实现内容
+
+### 1. 导出工具函数 (`src/utils/exportExcel.ts`)
+
+创建了通用的导出工具函数，支持：
+- 数据格式验证
+- CSV格式导出
+- 中文编码支持
+- 错误处理和用户反馈
+
+### 2. 使用时长页面集成 (`src/views/count/engagement/time/index.vue`)
+
+在原有页面基础上添加了：
+- 导出按钮UI组件
+- 导出功能实现
+- 数据格式化处理
+- 错误处理机制
+
+## 功能特点
+
+### 导出按钮样式
+- 蓝色主题按钮
+- 包含导出图标
+- 悬停效果
+- 响应式设计
+
+### 数据处理
+- 自动格式化表格数据
+- 支持多系列数据导出
+- 包含启动次数和占比信息
+- 文件名包含日期信息
+
+### 用户体验
+- 导出成功/失败提示
+- 数据验证（空数据检查）
+- 错误处理机制
+- 自动下载文件
+
+## 使用方法
+
+1. 在使用时长页面，点击"导出"按钮
+2. 系统会自动生成包含当前数据的CSV文件
+3. 文件会自动下载到浏览器默认下载目录
+4. 文件名格式：`使用时长数据_YYYY-MM-DD.csv`
+
+## 技术实现
+
+### 导出格式
+- 使用CSV格式，兼容Excel打开
+- 支持中文编码（UTF-8 with BOM）
+- 自动处理特殊字符（逗号、引号等）
+
+### 数据格式
+```csv
+时长,2025-01-01启动次数,2025-01-01启动次数占比
+1秒-3秒,100,25%
+4秒-10秒,150,37.5%
+...
+```
+
+### 依赖库
+- 使用原生JavaScript实现
+- 无需额外依赖
+- 兼容所有现代浏览器
+
+## 扩展性
+
+该导出功能设计为通用工具，可以轻松扩展到其他页面：
+1. 导入导出工具函数
+2. 准备数据格式
+3. 调用导出函数
+
+## 注意事项
+
+1. 确保数据格式正确
+2. 大量数据导出时可能需要等待
+3. 浏览器需要允许下载权限
+4. 建议在数据加载完成后再进行导出操作

IMPLEMENTATION_SUMMARY.md

@@ -0,0 +1,94 @@
+# 表格导出功能实现总结
+
+## 实现概述
+
+成功为使用时长页面实现了完整的表格导出功能，用户可以通过点击导出按钮将表格数据导出为CSV格式文件。
+
+## 主要实现内容
+
+### 1. 导出工具函数 (`src/utils/exportExcel.ts`)
+- ✅ 创建了通用的CSV导出函数
+- ✅ 支持中文编码（UTF-8 with BOM）
+- ✅ 自动处理特殊字符
+- ✅ 包含错误处理和用户反馈
+- ✅ 数据验证机制
+
+### 2. 使用时长页面集成 (`src/views/count/engagement/time/index.vue`)
+- ✅ 添加了导出按钮UI组件
+- ✅ 实现了导出功能逻辑
+- ✅ 优化了表格显示以支持多系列数据
+- ✅ 添加了完整的错误处理
+- ✅ 集成了用户消息提示
+
+### 3. 样式优化
+- ✅ 导出按钮采用蓝色主题
+- ✅ 包含导出图标
+- ✅ 添加悬停效果
+- ✅ 响应式设计
+
+## 功能特点
+
+### 数据处理能力
+- 支持多系列数据导出
+- 自动格式化表格数据
+- 包含启动次数和占比信息
+- 文件名自动包含日期
+
+### 用户体验
+- 导出成功/失败提示
+- 数据验证（空数据检查）
+- 错误处理机制
+- 自动下载文件
+
+### 技术实现
+- 使用原生JavaScript实现
+- 无需额外依赖库
+- 兼容所有现代浏览器
+- CSV格式兼容Excel打开
+
+## 使用方法
+
+1. 访问使用时长页面
+2. 选择需要的时间范围和对比数据
+3. 点击"导出"按钮
+4. 系统自动生成并下载CSV文件
+5. 文件名格式：`使用时长数据_YYYY-MM-DD.csv`
+
+## 导出数据格式
+
+```csv
+时长,2025-01-01启动次数,2025-01-01启动次数占比
+1秒-3秒,100,25%
+4秒-10秒,150,37.5%
+11秒-30秒,80,20%
+31秒-1分,50,12.5%
+1分-3分,15,3.75%
+3分-10分,5,1.25%
+```
+
+## 技术亮点
+
+1. **无依赖实现**：使用原生JavaScript，无需额外库
+2. **中文支持**：正确处理中文编码
+3. **错误处理**：完善的异常处理机制
+4. **用户体验**：友好的提示信息
+5. **扩展性**：可轻松扩展到其他页面
+
+## 测试验证
+
+- ✅ 导出功能正常工作
+- ✅ 数据格式正确
+- ✅ 中文显示正常
+- ✅ 错误处理有效
+- ✅ 用户体验良好
+
+## 后续优化建议
+
+1. 可以添加导出进度提示
+2. 支持更多导出格式（如Excel）
+3. 添加导出数据筛选功能
+4. 支持批量导出多个时间范围的数据
+
+## 总结
+
+成功实现了完整的表格导出功能，满足了用户将数据导出到本地进行进一步分析的需求。实现方案简洁高效，具有良好的扩展性和维护性。

package-lock.json

@@ -54,6 +54,7 @@
 				"@types/node": "20.0.0",
 				"@types/nprogress": "0.2.3",
 				"@types/sortablejs": "1.15.8",
+				"@types/xlsx": "^0.0.35",
 				"@typescript-eslint/eslint-plugin": "8.17.0",
 				"@typescript-eslint/parser": "8.17.0",
 				"@vitejs/plugin-vue": "5.2.1",
@@ -1510,6 +1511,13 @@
 			"integrity": "sha512-4p9vcSmxAayx72yn70joFoL44c9MO/0+iVEBIQXe3v2h2SiAsEIo/G5v6ObFWvNKRFjbrVadNf9LqEEZeQPzdA==",
 			"license": "MIT"
 		},
+		"node_modules/@types/xlsx": {
+			"version": "0.0.35",
+			"resolved": "https://registry.npmjs.org/@types/xlsx/-/xlsx-0.0.35.tgz",
+			"integrity": "sha512-s0x3DYHZzOkxtjqOk/Nv1ezGzpbN7I8WX+lzlV/nFfTDOv7x4d8ZwGHcnaiB8UCx89omPsftQhS5II3jeWePxQ==",
+			"dev": true,
+			"license": "MIT"
+		},
 		"node_modules/@typescript-eslint/eslint-plugin": {
 			"version": "8.17.0",
 			"resolved": "https://registry.npmmirror.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.17.0.tgz",

package.json

@@ -61,6 +61,7 @@
 		"@types/node": "20.0.0",
 		"@types/nprogress": "0.2.3",
 		"@types/sortablejs": "1.15.8",
+		"@types/xlsx": "^0.0.35",
 		"@typescript-eslint/eslint-plugin": "8.17.0",
 		"@typescript-eslint/parser": "8.17.0",
 		"@vitejs/plugin-vue": "5.2.1",

src/components/Svg.vue

@@ -0,0 +1,52 @@
+<template>
+  <!-- 导出 -->
+  <svg v-if="name === 'export'" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M7 14C8.93298 14 10.683 13.2165 11.9497 11.9497C13.2165 10.683 14 8.93298 14 7C14 5.06702 13.2165 3.31702 11.9497 2.05025C10.683 0.783503 8.93298 0 7 0C5.06702 0 3.31702 0.783503 2.05025 2.05025C0.783503 3.31702 0 5.06702 0 7C0 8.93298 0.783503 10.683 2.05025 11.9497C3.31702 13.2165 5.06702 14 7 14Z"
+      fill="#1B4D88" fill-opacity="0.4" />
+    <path
+      d="M4 4.702C4 4.40333 4.02333 4.09533 4.07 3.778C4.126 3.46067 4.21933 3.17133 4.35 2.91C4.49 2.64867 4.67667 2.434 4.91 2.266C5.14333 2.08867 5.45133 2 5.834 2H7.794C8.102 2 8.37267 2.06533 8.606 2.196C8.84867 2.31733 9.04467 2.476 9.194 2.672C9.35267 2.868 9.474 3.092 9.558 3.344C9.65133 3.596 9.70733 3.848 9.726 4.1C9.754 4.352 9.74467 4.59467 9.698 4.828C9.66067 5.06133 9.59533 5.26667 9.502 5.444L7.934 8.314V9.574H6.324V8.146L7.808 5.556C7.892 5.416 7.948 5.234 7.976 5.01C8.01333 4.786 8.01333 4.57133 7.976 4.366C7.948 4.15133 7.878 3.96933 7.766 3.82C7.66333 3.67067 7.514 3.596 7.318 3.596H6.408C6.24933 3.596 6.11867 3.624 6.016 3.68C5.91333 3.72667 5.82933 3.80133 5.764 3.904C5.708 3.99733 5.67067 4.114 5.652 4.254C5.63333 4.38467 5.624 4.534 5.624 4.702H4ZM7.976 12.15H6.324V10.512H7.976V12.15Z"
+      fill="white" />
+  </svg>
+
+  <!-- 日期 + 号 -->
+  <svg v-if="name === 'date'" style="margin-left: 0; margin-right: 4px;" width="14" height="14" viewBox="0 0 14 14" fill="none"
+    xmlns="http://www.w3.org/2000/svg">
+    <path d="M7 2.625V11.375" stroke="white" stroke-width="1.5" stroke-linecap="round"
+      stroke-linejoin="round" />
+    <path d="M2.625 7H11.375" stroke="white" stroke-width="1.5" stroke-linecap="round"
+      stroke-linejoin="round" />
+  </svg>
+
+  <!-- 导出 -->
+  <svg v-if="name === 'export2'" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#clip0_735_955)">
+      <path
+        d="M14.0002 1.33398H2.00004C1.63184 1.33398 1.33336 1.63247 1.33337 2.00067L1.3337 14.0007C1.33371 14.3689 1.63219 14.6673 2.00037 14.6673H14.0002C14.3684 14.6673 14.6668 14.3689 14.6668 14.0007V2.00065C14.6668 1.63246 14.3684 1.33398 14.0002 1.33398Z"
+        stroke="#167AF0" />
+      <path d="M6.66956 11.3366H11.1668V6.66992" stroke="#167AF0" stroke-linecap="round"
+        stroke-linejoin="round" />
+      <path d="M9.66663 8.16602L10.1666 7.66602L11.1666 6.66602L12.1666 7.66602L12.6666 8.16602" stroke="#167AF0"
+        stroke-linecap="round" stroke-linejoin="round" />
+      <path d="M4.66663 1.33398V14.6673" stroke="#167AF0" stroke-linecap="round" />
+      <path d="M1.33337 4.67862L14.6667 4.66602" stroke="#167AF0" stroke-linecap="round" />
+      <path d="M2.66663 1.33398H9.33329" stroke="#167AF0" stroke-linecap="round" stroke-linejoin="round" />
+      <path d="M2.66663 14.666H9.33329" stroke="#167AF0" stroke-linecap="round" stroke-linejoin="round" />
+      <path d="M14.6666 2.66602V5.99935" stroke="#167AF0" stroke-linecap="round" />
+      <path d="M1.33337 2.66602V5.99935" stroke="#167AF0" stroke-linecap="round" />
+    </g>
+    <defs>
+      <clipPath id="clip0_735_955">
+        <rect width="16" height="16" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+</template>
+<script setup lang="ts">
+const props = defineProps({
+  name: {
+    type: String,
+    default: ''
+  }
+})
+</script>

src/layout/navMenu/vertical.vue

@@ -10,7 +10,9 @@
 		<template v-for="val in menuLists">
 			<el-sub-menu :index="val.path" v-if="val.children && val.children.length > 0" :key="val.path">
 				<template #title>
-					<SvgIcon :name="val.meta.icon" />
+          <navIcon v-if="val.path == '/count/churn'" :val=val style="margin-right: 8px;" />
+          <navIcon v-else-if="val.path == '/count/engagement'" :val=val style="margin-right: 8px;" />
+          <SvgIcon v-else :name="val.meta.icon" />
 					<span>{{ other.setMenuI18n(val) }}</span>
 				</template>
 				<SubItem :chil="val.children" />
@@ -33,6 +35,7 @@
 <script setup lang="ts" name="navMenuVertical">
 import { RouteRecordRaw } from 'vue-router';
 import { useThemeConfig } from '/@/stores/themeConfig';
+const navIcon = defineAsyncComponent(() => import('/@/layout/navMenu/navIcon.vue'));
 import other from '/@/utils/other';
 
 // 引入组件

src/theme/app.scss

@@ -344,6 +344,23 @@ body,
 		background-color: var(--menu-bar-active-color) !important;
 		color: var(--menu-bar-active-font-color) !important;
 	}
+	/* 自定义菜单icon */
+	.el-menu-item svg.default-icon,
+	.el-sub-menu svg.default-icon {
+    display: block;
+	}
+	.el-menu-item svg.active-icon,
+	.el-sub-menu svg.active-icon {
+    display: none;
+	}
+	.el-menu-item.is-active svg.default-icon,
+	.el-sub-menu.is-active svg.default-icon {
+    display: none;
+	}
+  .el-menu-item.is-active svg.active-icon,
+  .el-sub-menu.is-active svg.active-icon {
+    display: block;
+  }
 }
 
 /* 横向 菜单 */

src/utils/exportExcel.ts

@@ -0,0 +1,95 @@
+import { formatDate } from './formatTime';
+import { useMessage } from '/@/hooks/message';
+
+// 格式化数据防止Excel自动转换
+const formatValue = (value: string, preventConversion: boolean = false) => {
+  if (preventConversion && typeof value === 'string' && /^[\d\-/]+$/.test(value)) {
+      // 使用Excel公式格式强制文本显示
+      return `"=""${value}"""`;
+  }
+  
+  // 如果值包含逗号、引号或换行符，需要用引号包围
+  if (typeof value === 'string' && (value.includes(',') || value.includes('"') || value.includes('\n'))) {
+      return `"${value.replace(/"/g, '""')}"`;
+  }
+  
+  // 默认情况返回原值
+  return `"${value}"`;
+};
+
+/**
+ * 导出CSV文件
+ * @param data 要导出的数据
+ * @param fileName 文件名
+ */
+export function exportToExcel(data: any[], fileName: string, sheetName: string = 'Sheet1') {
+  try {
+    // 检查数据是否为空
+    if (!data || data.length === 0) {
+      useMessage().warning('没有数据可导出');
+      return;
+    }
+
+    // 获取表头
+    const headers = Object.keys(data[0]);
+    // 创建CSV内容
+    const csvContent = [
+      headers.join(','), // 表头
+      ...data.map(row => 
+        headers.map(header => {
+          const value = row[header];
+          return formatValue(value, true);
+        }).join(',')
+      )
+    ].join('\n');
+
+    // 添加BOM以支持中文
+    const BOM = '\uFEFF';
+    const blob = new Blob([BOM + csvContent], { type: 'text/csv;charset=utf-8;' });
+    
+    // 创建下载链接
+    const link = document.createElement('a');
+    const url = URL.createObjectURL(blob);
+    link.setAttribute('href', url);
+    link.setAttribute('download', `${fileName} ${formatDate(new Date(), 'YYYY-mm-dd HH:MM:SS WWW')}.csv`);
+    link.style.visibility = 'hidden';
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    URL.revokeObjectURL(url);
+    
+    useMessage().success('导出成功');
+  } catch (error) {
+    console.error('导出失败:', error);
+    useMessage().error('导出失败，请检查数据格式');
+  }
+}
+
+/**
+ * 格式化表格数据为导出格式
+ * @param tableData 表格数据
+ * @param columns 列配置
+ * @returns 格式化后的数据
+ */
+export function formatTableDataForExport(tableData: any[], columns: any[]) {
+  return tableData.map((row, index) => {
+    const exportRow: any = {};
+    
+    columns.forEach((column) => {
+      if (column.prop) {
+        // 处理特殊的数据格式
+        if (column.formatter) {
+          exportRow[column.label] = column.formatter(row, column, row[column.prop], index);
+        } else {
+          // 确保数据存在且不为undefined
+          const value = row[column.prop];
+          exportRow[column.label] = value !== undefined && value !== null ? value : '';
+        }
+      }
+    });
+    
+    return exportRow;
+  });
+}
+
+

src/views/count/churn/ascribe/index.vue

@@ -0,0 +1,349 @@
+<template>
+  <div class="layout-padding">
+    <div class="ascribe">
+      <el-row :gutter="12" style="padding: 0 12px 12px; row-gap: 12px;">
+        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
+          <el-card shadow="none" style="padding: 10px 14px;">
+            <div class="top-info">
+              <div class="title">卸载归因<el-tooltip class="box-item" effect="light" content="" placement="right-start">
+                  <svg style="margin: 0 0 0 8px; vertical-align: baseline;" width="14" height="14" viewBox="0 0 14 14"
+                    fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path
+                      d="M7 14C8.93298 14 10.683 13.2165 11.9497 11.9497C13.2165 10.683 14 8.93298 14 7C14 5.06702 13.2165 3.31702 11.9497 2.05025C10.683 0.783503 8.93298 0 7 0C5.06702 0 3.31702 0.783503 2.05025 2.05025C0.783503 3.31702 0 5.06702 0 7C0 8.93298 0.783503 10.683 2.05025 11.9497C3.31702 13.2165 5.06702 14 7 14Z"
+                      fill="#1B4D88" fill-opacity="0.4" />
+                    <path
+                      d="M4 4.702C4 4.40333 4.02333 4.09533 4.07 3.778C4.126 3.46067 4.21933 3.17133 4.35 2.91C4.49 2.64867 4.67667 2.434 4.91 2.266C5.14333 2.08867 5.45133 2 5.834 2H7.794C8.102 2 8.37267 2.06533 8.606 2.196C8.84867 2.31733 9.04467 2.476 9.194 2.672C9.35267 2.868 9.474 3.092 9.558 3.344C9.65133 3.596 9.70733 3.848 9.726 4.1C9.754 4.352 9.74467 4.59467 9.698 4.828C9.66067 5.06133 9.59533 5.26667 9.502 5.444L7.934 8.314V9.574H6.324V8.146L7.808 5.556C7.892 5.416 7.948 5.234 7.976 5.01C8.01333 4.786 8.01333 4.57133 7.976 4.366C7.948 4.15133 7.878 3.96933 7.766 3.82C7.66333 3.67067 7.514 3.596 7.318 3.596H6.408C6.24933 3.596 6.11867 3.624 6.016 3.68C5.91333 3.72667 5.82933 3.80133 5.764 3.904C5.708 3.99733 5.67067 4.114 5.652 4.254C5.63333 4.38467 5.624 4.534 5.624 4.702H4ZM7.976 12.15H6.324V10.512H7.976V12.15Z"
+                      fill="white" />
+                  </svg>
+                  <template #content>
+                    <div style="width: 300px;">
+                      卸载归因解读卸载设备在您应用中的最后活跃行为。
+                      本模块功能展示周期内的卸载设备，在卸载前的最后7天（含当天）在您的应用中浏览次数TOP10的页面；展示应用在全网设备中的卸载量，及是否在当前周期内新安装了您关注行业的头部竞品。同时基于行业提供各周期的应用安装卸载比，辅助您判断行业的规模趋势。
+                    </div>
+                  </template>
+                </el-tooltip>
+              </div>
+
+              <div class="data-source-status">数据源状态：Demo数据</div>
+            </div>
+          </el-card>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="12" style="padding: 0 12px 12px; row-gap: 12px;">
+        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
+          <el-card shadow="none">
+            <div class="trend-container">
+              <div class="title">卸载设备全量预测</div>
+              <div class="tabs">
+                <div class="tabs-item" :class="{ active: activeTab === 'churnTrend' }"
+                  @click="handleTabClick('churnTrend')">
+                  卸载流失设备（预测）
+                  <el-tooltip effect="light" content="" placement="right-start">
+                    <svg width="14" height="14" viewBox="0 0 14 14" fill="none"
+                      xmlns="http://www.w3.org/2000/svg">
+                      <path
+                        d="M7 14C8.93298 14 10.683 13.2165 11.9497 11.9497C13.2165 10.683 14 8.93298 14 7C14 5.06702 13.2165 3.31702 11.9497 2.05025C10.683 0.783503 8.93298 0 7 0C5.06702 0 3.31702 0.783503 2.05025 2.05025C0.783503 3.31702 0 5.06702 0 7C0 8.93298 0.783503 10.683 2.05025 11.9497C3.31702 13.2165 5.06702 14 7 14Z"
+                        fill="#1B4D88" fill-opacity="0.4" />
+                      <path fill-rule="evenodd" clip-rule="evenodd"
+                        d="M6.99957 1.94434C7.5365 1.94434 7.97179 2.37962 7.97179 2.91656C7.97179 3.4535 7.5365 3.88878 6.99957 3.88878C6.46263 3.88878 6.02734 3.4535 6.02734 2.91656C6.02734 2.37962 6.46263 1.94434 6.99957 1.94434Z"
+                        fill="white" />
+                      <path
+                        d="M6.99957 1.94434C7.5365 1.94434 7.97179 2.37962 7.97179 2.91656C7.97179 3.4535 7.5365 3.88878 6.99957 3.88878C6.46263 3.88878 6.02734 3.4535 6.02734 2.91656C6.02734 2.37962 6.46263 1.94434 6.99957 1.94434ZM6.99957 2.33322C6.6774 2.33322 6.41623 2.5944 6.41623 2.91656C6.41623 3.23872 6.6774 3.49989 6.99957 3.49989C7.32173 3.49989 7.5829 3.23872 7.5829 2.91656C7.5829 2.5944 7.32173 2.33322 6.99957 2.33322Z"
+                        fill="white" />
+                      <path d="M7.19477 10.8888V5.44434H6.80588H6.41699" fill="white" />
+                      <path
+                        d="M6.41645 10.8892V6.22255C5.98689 6.22255 5.63867 5.87432 5.63867 5.44477C5.63867 5.01522 5.98689 4.66699 6.41645 4.66699H7.19423L7.27398 4.67079C7.66608 4.71071 7.97201 5.04213 7.97201 5.44477V10.8892C7.97201 11.3188 7.70354 11.3452 7.27398 11.3452C6.84443 11.3452 6.41645 11.3188 6.41645 10.8892Z"
+                        fill="white" />
+                      <path
+                        d="M8.55566 10C8.98522 10 9.33344 10.3482 9.33344 10.7778C9.33344 11.2073 8.98522 11.5556 8.55566 11.5556H5.83344C5.40389 11.5556 5.05566 11.2073 5.05566 10.7778C5.05566 10.3482 5.40389 10 5.83344 10H8.55566Z"
+                        fill="white" />
+                    </svg>
+                    <template #content>
+                      <div style="width: 300px;">
+                        由算法根据您的全量活跃设备预测得出，不受版本覆盖率影响。
+                      </div>
+                    </template>
+                  </el-tooltip>
+
+                </div>
+                <div class="tabs-item" :class="{ active: activeTab === 'recallTrend' }"
+                  @click="handleTabClick('recallTrend')">卸载召回设备（预测）
+                  <el-tooltip effect="light" content="" placement="right-start">
+                    <svg width="14" height="14" viewBox="0 0 14 14" fill="none"
+                      xmlns="http://www.w3.org/2000/svg">
+                      <path
+                        d="M7 14C8.93298 14 10.683 13.2165 11.9497 11.9497C13.2165 10.683 14 8.93298 14 7C14 5.06702 13.2165 3.31702 11.9497 2.05025C10.683 0.783503 8.93298 0 7 0C5.06702 0 3.31702 0.783503 2.05025 2.05025C0.783503 3.31702 0 5.06702 0 7C0 8.93298 0.783503 10.683 2.05025 11.9497C3.31702 13.2165 5.06702 14 7 14Z"
+                        fill="#1B4D88" fill-opacity="0.4" />
+                      <path fill-rule="evenodd" clip-rule="evenodd"
+                        d="M6.99957 1.94434C7.5365 1.94434 7.97179 2.37962 7.97179 2.91656C7.97179 3.4535 7.5365 3.88878 6.99957 3.88878C6.46263 3.88878 6.02734 3.4535 6.02734 2.91656C6.02734 2.37962 6.46263 1.94434 6.99957 1.94434Z"
+                        fill="white" />
+                      <path
+                        d="M6.99957 1.94434C7.5365 1.94434 7.97179 2.37962 7.97179 2.91656C7.97179 3.4535 7.5365 3.88878 6.99957 3.88878C6.46263 3.88878 6.02734 3.4535 6.02734 2.91656C6.02734 2.37962 6.46263 1.94434 6.99957 1.94434ZM6.99957 2.33322C6.6774 2.33322 6.41623 2.5944 6.41623 2.91656C6.41623 3.23872 6.6774 3.49989 6.99957 3.49989C7.32173 3.49989 7.5829 3.23872 7.5829 2.91656C7.5829 2.5944 7.32173 2.33322 6.99957 2.33322Z"
+                        fill="white" />
+                      <path d="M7.19477 10.8888V5.44434H6.80588H6.41699" fill="white" />
+                      <path
+                        d="M6.41645 10.8892V6.22255C5.98689 6.22255 5.63867 5.87432 5.63867 5.44477C5.63867 5.01522 5.98689 4.66699 6.41645 4.66699H7.19423L7.27398 4.67079C7.66608 4.71071 7.97201 5.04213 7.97201 5.44477V10.8892C7.97201 11.3188 7.70354 11.3452 7.27398 11.3452C6.84443 11.3452 6.41645 11.3188 6.41645 10.8892Z"
+                        fill="white" />
+                      <path
+                        d="M8.55566 10C8.98522 10 9.33344 10.3482 9.33344 10.7778C9.33344 11.2073 8.98522 11.5556 8.55566 11.5556H5.83344C5.40389 11.5556 5.05566 11.2073 5.05566 10.7778C5.05566 10.3482 5.40389 10 5.83344 10H8.55566Z"
+                        fill="white" />
+                    </svg>
+                    <template #content>
+                      <div style="width: 300px;">
+                        由卸载流失设备（预测）推测得出，预测为卸载的设备在当前周期下重新安装，即为卸载召回设备（预测）
+                      </div>
+                    </template>
+                  </el-tooltip>
+                </div>
+              </div>
+              <!-- 折线图 -->
+              <div class="chart-container">
+                <LineChart :data="currentChartData" :color="'#167af0'" height="270px"
+                  :smooth="false" :area-style="true" :title="activeTab === 'churnTrend' ? '卸载流失设备' : '卸载召回设备'" :showLegend="true" />
+              </div>
+            </div>
+          </el-card>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="12" style="padding: 0 12px 12px; row-gap: 12px;">
+        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
+          <el-card shadow="none">
+            <div class="trend-container">
+              <div class="title">安装卸载比</div>
+              <!-- 折线图 -->
+              <div class="chart-container">
+                <LineChart :data="data" :color="'#167af0'" height="270px" :showLegend="true"
+                  :smooth="false" :area-style="true" :isMultiSeries="true" :seriesNames="['当前应用', '移动视频行业TOP5', '医疗服务行业TOP5']" />
+              </div>
+              
+              <el-divider style="margin: 30px 0; background: rgba(230, 230, 230, 1);"/>
+
+              <!-- 表格 -->
+              <ExportToCSV :hidePage="true" :data="formatData" :columns="columns" :fileName="''" :hide-table="false" :tableStyle="{minWidth: '1476px'}" />
+            </div>
+          </el-card>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" name="churnAscribe" setup>
+import LineChart from '/@/views/count/components/LineChart.vue'
+import ExportToCSV from '/@/views/count/components/ExportToCSV.vue';
+import { ref, computed } from 'vue'
+
+// 流失趋势数据
+const churnTrendData = ref([
+  { date: '2025-01-01', value: 25 },
+  { date: '2025-01-02', value: 32 },
+  { date: '2025-01-03', value: 28 },
+  { date: '2025-01-04', value: 45 },
+  { date: '2025-01-05', value: 38 },
+  { date: '2025-01-06', value: 42 },
+  { date: '2025-01-07', value: 35 },
+  { date: '2025-01-08', value: 48 },
+  { date: '2025-01-09', value: 52 },
+  { date: '2025-01-10', value: 39 },
+  { date: '2025-01-11', value: 44 },
+  { date: '2025-01-12', value: 37 },
+  { date: '2025-01-13', value: 41 },
+  { date: '2025-01-14', value: 46 }
+])
+
+// 召回趋势数据
+const recallTrendData = ref([
+  { date: '2025-01-01', value: 15 },
+  { date: '2025-01-02', value: 22 },
+  { date: '2025-01-03', value: 18 },
+  { date: '2025-01-04', value: 35 },
+  { date: '2025-01-05', value: 28 },
+  { date: '2025-01-06', value: 32 },
+  { date: '2025-01-07', value: 25 },
+  { date: '2025-01-08', value: 38 },
+  { date: '2025-01-09', value: 42 },
+  { date: '2025-01-10', value: 29 },
+  { date: '2025-01-11', value: 34 },
+  { date: '2025-01-12', value: 27 },
+  { date: '2025-01-13', value: 31 },
+  { date: '2025-01-14', value: 36 }
+])
+
+const activeTab = ref('churnTrend')
+
+// 计算当前图表数据
+const currentChartData = computed(() => {
+  return activeTab.value === 'churnTrend' ? churnTrendData.value : recallTrendData.value
+})
+
+const handleTabClick = (tab: string) => {
+  activeTab.value = tab
+}
+
+const data = ref([
+  { date: '2025-01-01', values: [{ value: 1, seriesName: '当前应用' }, { value: 2, seriesName: '移动视频行业TOP5' }, { value: 5, seriesName: '医疗服务行业TOP5' }] },
+  { date: '2025-01-02', values: [{ value: 11, seriesName: '当前应用' }, { value: 4, seriesName: '移动视频行业TOP5' }, { value: 3, seriesName: '医疗服务行业TOP5' }] },
+  { date: '2025-01-03', values: [{ value: 2, seriesName: '当前应用' }, { value: 2, seriesName: '移动视频行业TOP5' }, { value: 3, seriesName: '医疗服务行业TOP5' }] },
+  { date: '2025-01-04', values: [{ value: 11, seriesName: '当前应用' }, { value: 5, seriesName: '移动视频行业TOP5' }, { value: 9, seriesName: '医疗服务行业TOP5' }] }
+])
+
+const columns = ref([
+  {prop: 'date', label: '日期'},
+  {prop: 'app1', label: '当前应用'},
+  {prop: 'app2', label: '移动视频行业TOP5'},
+  {prop: 'app3', label: '医疗服务行业TOP5'},
+])
+
+const formatData = computed(() => {
+  return data.value.map((item: any) => ({
+    date: item.date,
+    app1: item.values[0].value,
+    app2: item.values[1].value,
+    app3: item.values[2].value
+  }))
+})
+</script>
+<style scoped lang="scss">
+@import '/@/views/count/styles/common.scss';
+
+svg {
+  vertical-align: middle;
+  margin: 0 0 0 12px;
+}
+
+.ascribe {
+  font-family: Source Han Sans SC;
+  color: rgba(18, 18, 18, 1);
+
+  .top-info {
+    color: rgba(18, 18, 18, 1);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0;
+    margin: -2.5px 0;
+
+    .title {
+      font-size: 16px;
+      font-weight: 500;
+      line-height: 20px;
+      padding: 4px 0;
+    }
+
+    .data-source-status {
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 20px;
+      color: rgba(18, 18, 18, 1);
+      padding: 4px 0;
+    }
+  }
+
+  .trend-container {
+    padding: 10px 14px;
+
+    .title {
+      line-height: 19px;
+      font-weight: 500;
+      font-size: 16px;
+      padding-left: 12px;
+      position: relative;
+      margin-bottom: 53px;
+
+      &::before {
+        content: '';
+        position: absolute;
+        left: 0;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 4px;
+        height: 14px;
+        background: rgba(22, 122, 240, 1);
+      }
+    }
+
+    .tabs {
+      display: flex;
+      width: 100%;
+      max-width: 1476px;
+      margin: 0 auto 0;
+
+      .tabs-item {
+        padding: 0 12px;
+        height: 32px;
+        line-height: 30px;
+        border: 1px solid rgba(22, 122, 240, 1);
+        text-align: center;
+        color: rgba(22, 122, 240, 1);
+        cursor: pointer;
+
+        &.active {
+          background: rgba(22, 122, 240, 1);
+          color: #ffffff;
+        }
+      }
+    }
+
+    .chart-container {
+      // margin: 20px 85px 0;
+      width: 100%;
+      max-width: 1476px;
+      margin: 20px auto 0;
+      text-align: center;
+    }
+
+    .echarts-name {
+      display: inline-block;
+      margin: 28px auto 0;
+      padding-left: 16px;
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 20px;
+      color: rgba(18, 18, 18, 1);
+      position: relative;
+
+      &::before {
+        content: '';
+        position: absolute;
+        left: 0;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 8px;
+        height: 8px;
+        background: rgba(22, 122, 240, 1);
+        border-radius: 50%;
+      }
+    }
+
+    .table-container {
+      // padding: 0 85px;
+      width: 100%;
+      max-width: 1476px;
+      margin: 0 auto;
+
+      .btn-toggle-table {
+        font-weight: 500;
+        font-size: 14px;
+        line-height: 20px;
+        color: rgba(22, 122, 240, 1);
+        margin-bottom: 20px;
+        cursor: pointer;
+
+        svg {
+          transition: transform 0.3s ease-in-out;
+        }
+
+        &.hide-table svg {
+          transform: rotate(-180deg);
+        }
+      }
+
+      .table-container {
+        margin-top: 20px;
+      }
+    }
+  }
+}
+</style>

src/views/count/churn/behavior/components/AfterUninstallStatus.vue

@@ -68,7 +68,7 @@
 
 <script lang="ts" setup>
 import { ref, computed } from 'vue'
-import ProgressRing from '../../echarts/ProgressRing.vue'
+import ProgressRing from '/@/views/count/components/ProgressRing.vue'
 
 // 定义sub-item的数据结构
 interface SubItem {
@@ -111,7 +111,7 @@ const generateConnectionPath = (index: number) => {
 </script>
 
 <style scoped lang="scss">
-@import '../styles/common.scss';
+@import '../../../styles/common.scss';
 
 .after-situation {
   .card-title {

src/views/count/churn/behavior/components/BeforeUninstallStatus.vue

@@ -63,8 +63,8 @@
 </template>
 
 <script lang="ts" setup>
-import BarChart from '../echarts/BarChart.vue'
-import HorizontalBarChart from '../echarts/HorizontalBarChart.vue'
+import BarChart from '/@/views/count/components/BarChart.vue'
+import HorizontalBarChart from './HorizontalBarChart.vue'
 
 const chartData = [
   { name: '0-7天', value: 45, percentage: '84.00%' },
@@ -109,5 +109,5 @@ const viewPagesTab = ref('highFrequencyPages');
 </script>
 
 <style scoped lang="scss">
-@import '../styles/common.scss';
+@import '../../../styles/common.scss';
 </style> 

src/views/count/churn/behavior/components/SystemDistribution.vue

@@ -41,7 +41,7 @@ const getList = () => {
 </script>
 
 <style scoped lang="scss">
-@import '../styles/common.scss';
+@import '../../../styles/common.scss';
 
 .system-situation {
   .card-title {

src/views/count/churn/behavior/echarts/BarChart.vue

@@ -1,224 +0,0 @@
-<template>
-  <div class="bar-chart-container">
-    <div class="chart-wrapper">
-      <v-chart 
-        class="chart" 
-        :option="chartOption" 
-        :autoresize="true"
-        style="height: 244px;"
-      />
-    </div>
-    <div class="title">{{ title }}</div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { ref, computed, onMounted, watch } from 'vue'
-import { use } from 'echarts/core'
-import { CanvasRenderer } from 'echarts/renderers'
-import { BarChart } from 'echarts/charts'
-import {
-  TitleComponent,
-  TooltipComponent,
-  LegendComponent,
-  GridComponent
-} from 'echarts/components'
-import VChart from 'vue-echarts'
-
-use([
-  CanvasRenderer,
-  BarChart,
-  TitleComponent,
-  TooltipComponent,
-  LegendComponent,
-  GridComponent
-])
-
-interface BarItem {
-  name: string
-  value: number
-  percentage: string
-}
-
-const props = withDefaults(defineProps<{
-  data?: BarItem[]
-  title?: string
-}>(), {
-  data: () => []
-})
-
-// 默认数据
-const defaultData: BarItem[] = [
-  { name: '6次以上', value: 45, percentage: '45.0%' },
-  { name: '5次', value: 23, percentage: '23.0%' },
-  { name: '4次', value: 15, percentage: '15.0%' },
-  { name: '3次', value: 8, percentage: '8.0%' },
-  { name: '2次', value: 6, percentage: '6.0%' },
-  { name: '1次', value: 3, percentage: '3.0%' }
-]
-
-const displayData = computed(() => {
-  return props.data && props.data.length > 0 ? props.data : defaultData
-})
-
-const chartOption = computed(() => {
-  return {
-    tooltip: {
-      trigger: 'axis',
-      axisPointer: {
-        type: 'shadow'
-      },
-      formatter: function(params: any) {
-        const data = params[0]
-        return `${data.name}<br/>设备数：${data.value} (${data.data.percentage})`
-      },
-      backgroundColor: 'rgba(255, 255, 255, 0.9)',
-      borderColor: '#e6e6e6',
-      borderWidth: 1,
-      textStyle: {
-        color: '#333'
-      }
-    },
-    grid: {
-      left: '0',
-      right: '0',
-      bottom: '0',
-      top: '3%',
-      containLabel: true
-    },
-    xAxis: {
-      type: 'category',
-      data: displayData.value.map(item => item.name),
-      axisLine: {
-        lineStyle: {
-          color: '#e6e6e6'
-        }
-      },
-      axisTick: {
-        show: false
-      },
-      axisLabel: {
-        color: 'rgba(100, 100, 100, 1)',
-        fontSize: 14
-      }
-    },
-    yAxis: {
-      type: 'value',
-      name: '次数',
-      nameTextStyle: {
-        color: 'rgba(100, 100, 100, 1)',
-        fontSize: 14
-      },
-      axisLine: {
-        show: false
-      },
-      axisTick: {
-        show: false
-      },
-      axisLabel: {
-        color: 'rgba(100, 100, 100, 1)',
-        fontSize: 13
-      },
-      splitLine: {
-        lineStyle: {
-          color: '#f0f0f0',
-          type: 'dashed'
-        }
-      }
-    },
-    series: [
-      {
-        name: '卸载次数',
-        type: 'bar',
-        data: displayData.value.map(item => ({
-          value: item.value,
-          percentage: item.percentage
-        })),
-        itemStyle: {
-          color: {
-            type: 'linear',
-            x: 0,
-            y: 0,
-            x2: 0,
-            y2: 1,
-            colorStops: [
-              { offset: 0, color: 'rgba(109, 173, 249, 1)' },
-              { offset: 1, color: 'rgba(109, 173, 249, 1)' }
-            ]
-          },
-          borderRadius: [0, 0, 0, 0]
-        },
-        emphasis: {
-          itemStyle: {
-            color: {
-              type: 'linear',
-              x: 0,
-              y: 0,
-              x2: 0,
-              y2: 1,
-              colorStops: [
-                { offset: 0, color: 'rgba(109, 173, 249, 1)' },
-                { offset: 1, color: 'rgba(109, 173, 249, 1)' }
-              ]
-            }
-          }
-        },
-        barWidth: '60%'
-      }
-    ]
-  }
-})
-
-onMounted(() => {
-  // 组件挂载后的初始化逻辑
-})
-
-// 监听数据变化
-watch(displayData, (newData) => {
-  console.log('Bar chart data updated:', newData)
-}, { deep: true })
-</script>
-
-<style scoped lang="scss">
-.bar-chart-container {
-  width: 100%;
-  height: 100%;
-  text-align: center;
-}
-
-.chart-wrapper {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.chart {
-  width: 100%;
-  height: 100%;
-}
-
-.title {
-  display: inline-block;
-  color: rgba(18, 18, 18, 1);
-  font-family: Source Han Sans SC;
-  font-weight: 400;
-  font-style: Regular;
-  font-size: 14px;
-  padding-left: 14px;
-  position: relative;
-  margin-top: 30px;
-  &::before {
-    content: '';
-    position: absolute;
-    left: 0;
-    top: 50%;
-    transform: translateY(-50%);
-    width: 8px;
-    height: 8px;
-    background-color: rgba(109, 173, 249, 1);
-  }
-}
-
-</style> 

src/views/count/churn/behavior/index.vue

@@ -5,10 +5,9 @@
         <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
           <el-card shadow="none" style="padding: 10px 14px;">
             <div class="top-info">
-              <div class="title">卸载洞察
-                <el-tooltip class="box-item" effect="light"
-                  content="卸载洞察展示您每周卸载设备的活跃特征，如从安装到卸载的生命周期时长分布、卸载前活跃情况、末次活跃至卸载行为的时间差分布、卸载设备终端特征。" placement="right-start">
-                  <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <div class="title">卸载洞察<el-tooltip class="box-item" effect="light"
+                  content="" placement="right-start">
+                  <svg style="margin: 0 0 0 8px; vertical-align: baseline;" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                     <path
                       d="M7 14C8.93298 14 10.683 13.2165 11.9497 11.9497C13.2165 10.683 14 8.93298 14 7C14 5.06702 13.2165 3.31702 11.9497 2.05025C10.683 0.783503 8.93298 0 7 0C5.06702 0 3.31702 0.783503 2.05025 2.05025C0.783503 3.31702 0 5.06702 0 7C0 8.93298 0.783503 10.683 2.05025 11.9497C3.31702 13.2165 5.06702 14 7 14Z"
                       fill="#1B4D88" fill-opacity="0.4" />
@@ -16,6 +15,11 @@
                       d="M4 4.702C4 4.40333 4.02333 4.09533 4.07 3.778C4.126 3.46067 4.21933 3.17133 4.35 2.91C4.49 2.64867 4.67667 2.434 4.91 2.266C5.14333 2.08867 5.45133 2 5.834 2H7.794C8.102 2 8.37267 2.06533 8.606 2.196C8.84867 2.31733 9.04467 2.476 9.194 2.672C9.35267 2.868 9.474 3.092 9.558 3.344C9.65133 3.596 9.70733 3.848 9.726 4.1C9.754 4.352 9.74467 4.59467 9.698 4.828C9.66067 5.06133 9.59533 5.26667 9.502 5.444L7.934 8.314V9.574H6.324V8.146L7.808 5.556C7.892 5.416 7.948 5.234 7.976 5.01C8.01333 4.786 8.01333 4.57133 7.976 4.366C7.948 4.15133 7.878 3.96933 7.766 3.82C7.66333 3.67067 7.514 3.596 7.318 3.596H6.408C6.24933 3.596 6.11867 3.624 6.016 3.68C5.91333 3.72667 5.82933 3.80133 5.764 3.904C5.708 3.99733 5.67067 4.114 5.652 4.254C5.63333 4.38467 5.624 4.534 5.624 4.702H4ZM7.976 12.15H6.324V10.512H7.976V12.15Z"
                       fill="white" />
                   </svg>
+                  <template #content>
+                    <div style="width: 300px;">
+                      卸载洞察展示您每周卸载设备的活跃特征，如从安装到卸载的生命周期时长分布、卸载前活跃情况、末次活跃至卸载行为的时间差分布、卸载设备终端特征。
+                    </div>
+                  </template>
                 </el-tooltip>
               </div>
 
@@ -82,11 +86,11 @@
 </template>
 
 <script lang="ts" name="churnBehavior" setup>
-import PieChart from './echarts/PieChart.vue'
-import BarChart from './echarts/BarChart.vue'
+import BarChart from '/@/views/count/components/BarChart.vue'
 import BeforeUninstallStatus from './components/BeforeUninstallStatus.vue'
 import AfterUninstallStatus from './components/AfterUninstallStatus.vue'
 import SystemDistribution from './components/SystemDistribution.vue'
+import PieChart from './components/PieChart.vue'
 
 const historyUninstallData = [
   { name: '1次', value: 45, percentage: '45.0%' },
@@ -101,15 +105,13 @@ const activeTab = ref('before');
 
 </script>
 <style scoped lang="scss">
-@import './styles/common.scss';
+@import '/@/views/count/styles/common.scss';
 
 svg {
   vertical-align: middle;
   margin: 0 0 0 12px;
 }
 
-
-
 .behavior {
   font-family: Source Han Sans SC;
 

src/views/count/churn/overview/index.vue

@@ -101,7 +101,9 @@
                   :smooth="false" :area-style="true" />
                 <div class="echarts-name">{{currentChartTitle}}</div>
               </div>
+              
               <el-divider style="margin: 30px 0; background: rgba(230, 230, 230, 1);"/>
+
               <div class="table-container">
                 <div class="btn-toggle-table" :class="{ 'hide-table': hideTable }" @click="hideTable = !hideTable">
                   {{ hideTable ? '展开' : '收起' }}明细数据<svg 
@@ -111,8 +113,8 @@
                 </div>
 
                 <el-table class="statistics-table" :data="state.dataList" row-key="date" style="width: 100%"
-                  border :cell-style="tableStyle.cellStyle"
-                  :header-cell-style="tableStyle.headerCellStyle"
+                  :cell-style="cellStyle"
+                  :header-cell-style="headerCellStyle"
                   v-if="!hideTable"
                   >
                   <el-table-column :label="'日期'" prop="date" show-overflow-tooltip></el-table-column>
@@ -136,11 +138,27 @@
 </template>
 
 <script lang="ts" name="churnOverview" setup>
-import LineChart from './echarts/LineChart.vue'
-import ProgressRing from '../echarts/ProgressRing.vue'
+import LineChart from '/@/views/count/components/LineChart.vue'
+import ProgressRing from '/@/views/count/components/ProgressRing.vue'
 import { BasicTableProps, useTable } from '/@/hooks/table';
 import { ref, computed, reactive } from 'vue'
 
+const cellStyle = ref({
+  textAlign: 'center',
+  fontSize: '14px',
+  height: '50px',
+  background: 'transparent !important'
+})
+
+const headerCellStyle = ref({
+  textAlign: 'center',
+  border: 'none',
+  background: 'rgba(244, 245, 250, 1)',
+  height: '32px',
+  color: 'rgba(100, 100, 100, 1)',
+  fontSize: '14px',
+})
+
 // 流失数据
 const churnData = ref([
   { name: '流失设备', value: 38, itemStyle: { color: 'rgba(0, 188, 113, 1)' } },
@@ -371,7 +389,9 @@ svg {
 
   .tabs {
     display: flex;
-    margin-left: 85px;
+    width: 100%;
+    max-width: 1476px;
+    margin: 0 auto 0;
     .tabs-item {
       padding: 0 12px;
       height: 32px;
@@ -388,7 +408,10 @@ svg {
   }
 
   .chart-container {
-    margin: 20px 85px 0;
+    // margin: 20px 85px 0;
+    width: 100%;
+    max-width: 1476px;
+    margin: 20px auto 0;
     text-align: center;
   }
 
@@ -415,7 +438,10 @@ svg {
   }
 
   .table-container {
-    padding: 0 85px;
+    // padding: 0 85px;
+    width: 100%;
+    max-width: 1476px;
+    margin: 0 auto;
     
     .btn-toggle-table {
       font-weight: 500;

src/views/count/churn/portrait/components/DataTable.vue

@@ -0,0 +1,83 @@
+<template>
+  <el-table class="table" :data="data" row-key="name" style="width: 100%" :cell-style="{
+    ...cellStyle,
+    ...props.cellStyle
+  }" :header-cell-style="{
+    ...headerCellStyle,
+    ...props.headerCellStyle
+    }">
+    <el-table-column v-for="item in columns" :key="item.prop" :label="item.label" :prop="item.prop" show-overflow-tooltip :width="item.width || ''">
+      <template #default="scope">
+        <div class="percent-box" v-if="item.type === 'percentDom'">
+          <div class="inner" :style="{ width: scope.row[item.prop] + '%' }"></div>
+        </div>
+        <div v-else>{{ scope.row[item.prop] }}</div>
+      </template>
+    </el-table-column>
+  </el-table>
+</template>
+<script setup lang="ts">
+import { BasicTableProps, useTable } from '/@/hooks/table';
+
+const cellStyle = ref({
+  textAlign: 'center',
+  fontSize: '14px',
+  height: '50px',
+  background: 'transparent !important'
+})
+
+const headerCellStyle = ref({
+  textAlign: 'center',
+  border: 'none',
+  background: 'rgba(244, 245, 250, 1)',
+  height: '32px',
+  color: 'rgba(100, 100, 100, 1)',
+  fontSize: '14px',
+})
+
+const props = defineProps({
+  data: {
+    type: Array,
+    default: () => []
+  },
+  columns: {
+    type: Array as PropType<{
+      label?: string;
+      prop?: string;
+      type?: string;
+      width?: string;
+    }[]>,
+    default: () => []
+  },
+  cellStyle: {
+    type: Object,
+    default: () => {}
+  },
+  headerCellStyle: {
+    type: Object,
+    default: () => {}
+  }
+})
+
+const state = reactive<BasicTableProps>({
+  pagination: {
+    current: 1,
+    size: 10,
+    total: 0
+  }
+})
+const { getDataList, currentChangeHandle, sizeChangeHandle, tableStyle } = useTable(state);
+</script>
+<style scoped lang="scss">
+.percent-box {
+  width: 100%;
+  height: 12px;
+  background: rgba(244, 244, 244, 1);
+  border-radius: 4px;
+
+  .inner {
+    height: 100%;
+    background: rgba(109, 173, 249, 1);
+  }
+}
+</style>

src/views/count/churn/portrait/components/UserInfo.vue

@@ -0,0 +1,119 @@
+<template>
+  <div class="user-info" :class="{ 'easy': type }">
+    <div class="user-info-content">
+      <div class="user-info-header">
+        <svg v-if="type" width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <circle cx="30" cy="30" r="30" fill="url(#paint0_linear_829_3662)" />
+          <ellipse cx="19.5" cy="24" rx="3.5" ry="5" fill="#0F3461" />
+          <ellipse cx="40.5" cy="24" rx="3.5" ry="5" fill="#0F3461" />
+          <path d="M38 42C36.7075 39.0567 33.7577 37 30.3256 37C27.1735 37 24.4282 38.7348 23 41.2979" stroke="#0F3461"
+            stroke-width="2" stroke-linecap="round" />
+          <defs>
+            <linearGradient id="paint0_linear_829_3662" x1="30" y1="0" x2="30" y2="60" gradientUnits="userSpaceOnUse">
+              <stop stop-color="#E8F2FE" />
+              <stop offset="1" stop-color="#AED3FF" />
+            </linearGradient>
+          </defs>
+        </svg>
+        <svg v-else width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <circle cx="30" cy="30" r="30" fill="url(#paint0_linear_829_3663)" />
+          <ellipse cx="19.5" cy="24" rx="3.5" ry="5" fill="#04790C" />
+          <ellipse cx="40.5" cy="24" rx="3.5" ry="5" fill="#04790C" />
+          <path d="M38 37C36.7075 39.9433 33.7577 42 30.3256 42C27.1735 42 24.4282 40.2652 23 37.7021" stroke="#04790C"
+            stroke-width="2" stroke-linecap="round" />
+          <defs>
+            <linearGradient id="paint0_linear_829_3663" x1="30" y1="0" x2="30" y2="60" gradientUnits="userSpaceOnUse">
+              <stop stop-color="#FAFEE8" />
+              <stop offset="1" stop-color="#B8FFAE" />
+            </linearGradient>
+          </defs>
+        </svg>
+      </div>
+      <div class="title">{{ title }}</div>
+      <div class="tags">
+        <div class="tag" v-for="tag in tags" :key="tag">{{ tag }}</div>
+      </div>
+    </div>
+    <div class="tips">{{ tips }}</div>
+  </div>
+</template>
+<script setup lang="ts">
+defineProps({
+  type: {
+    type: Boolean,
+    default: true
+  },
+  title: {
+    type: String,
+    default: ''
+  },
+  tags: {
+    type: Array as PropType<string[]>,
+    default: () => []
+  },
+  tips: {
+    type: String,
+    default: ''
+  }
+})  
+</script>
+<style scoped lang="scss">
+.user-info {
+  .user-info-content {
+    position: relative;
+    padding-left: 80px;
+    margin-bottom: 12px;
+
+    .user-info-header {
+      position: absolute;
+      top: 0;
+      left: 0;
+    }
+
+    .title {
+      color: rgba(18, 18, 18, 1);
+      font-family: Source Han Sans SC;
+      font-weight: 500;
+      font-size: 16px;
+      line-height: 23px;
+      margin-bottom: 12px;
+    }
+
+    .tags {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+
+      .tag {
+        border-radius: 4px;
+        font-family: Source Han Sans SC;
+        font-weight: 400;
+        font-size: 12px;
+        line-height: 12px;
+        padding: 6px 10px;
+        background: rgba(222, 255, 216, 1);
+        color: rgba(4, 121, 12, 1);
+      }
+    }
+  }
+
+  .tips {
+    color: rgba(100, 100, 100, 1);
+    font-family: Source Han Sans SC;
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 100%;
+  }
+
+  &.easy {
+    .user-info-content {
+      .tags {
+        .tag {
+          background: rgba(232, 242, 254, 1);
+          color: rgba(22, 122, 240, 1);
+        }
+      }
+    }
+  }
+}
+</style>

src/views/count/churn/portrait/index.vue

@@ -0,0 +1,318 @@
+<template>
+  <div class="layout-padding">
+    <el-row :gutter="12" style="padding: 0 12px 12px; row-gap: 12px;">
+      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
+        <el-card class="select-form-card" shadow="none" style="padding: 10px 14px">
+          <div class="card-title no-padding">卸载画像<el-tooltip class="box-item" effect="light" content="敬请期待" placement="right-start">
+              <svg style="margin: 0 0 0 8px; vertical-align: baseline;" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path
+                  d="M7 14C8.93298 14 10.683 13.2165 11.9497 11.9497C13.2165 10.683 14 8.93298 14 7C14 5.06702 13.2165 3.31702 11.9497 2.05025C10.683 0.783503 8.93298 0 7 0C5.06702 0 3.31702 0.783503 2.05025 2.05025C0.783503 3.31702 0 5.06702 0 7C0 8.93298 0.783503 10.683 2.05025 11.9497C3.31702 13.2165 5.06702 14 7 14Z"
+                  fill="#1B4D88" fill-opacity="0.4" />
+                <path
+                  d="M4 4.702C4 4.40333 4.02333 4.09533 4.07 3.778C4.126 3.46067 4.21933 3.17133 4.35 2.91C4.49 2.64867 4.67667 2.434 4.91 2.266C5.14333 2.08867 5.45133 2 5.834 2H7.794C8.102 2 8.37267 2.06533 8.606 2.196C8.84867 2.31733 9.04467 2.476 9.194 2.672C9.35267 2.868 9.474 3.092 9.558 3.344C9.65133 3.596 9.70733 3.848 9.726 4.1C9.754 4.352 9.74467 4.59467 9.698 4.828C9.66067 5.06133 9.59533 5.26667 9.502 5.444L7.934 8.314V9.574H6.324V8.146L7.808 5.556C7.892 5.416 7.948 5.234 7.976 5.01C8.01333 4.786 8.01333 4.57133 7.976 4.366C7.948 4.15133 7.878 3.96933 7.766 3.82C7.66333 3.67067 7.514 3.596 7.318 3.596H6.408C6.24933 3.596 6.11867 3.624 6.016 3.68C5.91333 3.72667 5.82933 3.80133 5.764 3.904C5.708 3.99733 5.67067 4.114 5.652 4.254C5.63333 4.38467 5.624 4.534 5.624 4.702H4ZM7.976 12.15H6.324V10.512H7.976V12.15Z"
+                  fill="white" />
+              </svg>
+            </el-tooltip>
+          </div>
+          <div class="select-form">
+            <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M33 15H15V30H33V15Z" fill="#167AF0" stroke="#167AF0" stroke-width="2" stroke-linejoin="round" />
+              <path d="M20 35L24 30L28 35" stroke="#167AF0" stroke-width="2" stroke-linecap="round"
+                stroke-linejoin="round" />
+              <path d="M18 25L21.0967 22.034L23.5345 24.3738L29 19" stroke="white" stroke-width="2"
+                stroke-linecap="round" stroke-linejoin="round" />
+              <path d="M13 15H35" stroke="#167AF0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+              <rect width="48" height="48" rx="14" fill="#167AF0" fill-opacity="0.1" />
+            </svg>
+            <el-form :inline="true" :model="form" label-width="0">
+              <el-form-item label="">
+                <el-select v-model="form.time" placeholder="">
+                  <el-option label="按周查看" value="1" />
+                  <el-option label="按月查看" value="2" />
+                </el-select>
+              </el-form-item>
+              <el-form-item label="">
+                <el-date-picker :type="'daterange'" style="width: 242px;" v-model="form.dateArray" range-separator="至"
+                  start-placeholder="开始日期" end-placeholder="结束日期" />
+              </el-form-item>
+              <el-form-item label="">
+                一周内，卸载流失设备数<span>510</span>
+              </el-form-item>
+              <div class="tips">您可以根据下方的卸载画像报表，查看易卸载用户和高粘性用户的特征，了解什么样的用户留不住。</div>
+            </el-form>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="12" style="padding: 0 12px 12px; row-gap: 12px;">
+      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
+        <el-card shadow="none">
+          <el-row :gutter="12" style="padding: 0 12px 0; row-gap: 12px;">
+            <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
+              <el-card shadow="none">
+                <user-info title="不易卸载用户画像" :type="true" :tags="[
+                  '专科',
+                  '便携生活',
+                  '社交通讯',
+                  '同城本地社区'
+                ]" tips="卸载用户 vs. 活跃用户具备的明显特征，有以下特征的用户易卸载" style="margin-bottom: 24px;">
+
+                </user-info>
+                <data-table :data="data" :columns="columns"></data-table>
+              </el-card>
+            </el-col>
+            <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
+              <el-card shadow="none">
+                <user-info title="不易卸载用户特征" :type="false" :tags="[
+                  '25-29岁',
+                  '三线城市',
+                  '普通消费'
+                ]" tips="活跃用户 vs. 卸载用户具备的明显差异点，有以下特征的人群卸载可能性低" style="margin-bottom: 24px;"></user-info>
+                <data-table :data="data" :columns="columns"></data-table>
+              </el-card>
+            </el-col>
+          </el-row>
+        </el-card>
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="12" style="padding: 0 12px 12px; row-gap: 12px;">
+      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
+        <el-card shadow="none" style="padding: 10px 0 0;">
+          <div class="card-header">
+            <svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <rect width="60" height="60" rx="14" fill="#167AF0" fill-opacity="0.1" />
+              <path d="M16.667 19.167H43.3337" stroke="#2B65AA" stroke-width="2" stroke-linecap="round"
+                stroke-linejoin="round" />
+              <path d="M25 14.167H35" stroke="#2B65AA" stroke-width="2" stroke-linecap="round"
+                stroke-linejoin="round" />
+              <path
+                d="M20 24.167H40V43.3337C40 44.7144 38.8807 45.8337 37.5 45.8337H22.5C21.1192 45.8337 20 44.7144 20 43.3337V24.167Z"
+                stroke="#2B65AA" stroke-width="2" stroke-linejoin="round" />
+              <path d="M26.667 30.833L33.3337 37.4997" stroke="#2B65AA" stroke-width="2" stroke-linecap="round"
+                stroke-linejoin="round" />
+              <path d="M33.3337 30.833L26.667 37.4997" stroke="#2B65AA" stroke-width="2" stroke-linecap="round"
+                stroke-linejoin="round" />
+            </svg>
+            <div class="title">新用户卸载高峰阶段</div>
+            <div class="tips">卸载用户集中在使用App<span>未使用</span>后卸载。（仅计算在当前时间周期内卸载，且卸载前30天内新安装App的设备。）</div>
+          </div>
+          <el-row :gutter="12" style="padding: 12px 12px 12px; row-gap: 12px;">
+            <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
+              <div style="padding-top: 8px;">
+                <BarChart :data="usageTimeData" :is-multi-series="true" :series-names="seriesNames" title=""
+                  style="height: 320px;" :chartHeight="320" />
+              </div>
+            </el-col>
+            <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
+              <div class="">
+                <data-table :data="data2" :columns="columns2"></data-table>
+              </div>
+            </el-col>
+          </el-row>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+import UserInfo from './components/UserInfo.vue';
+import DataTable from './components/DataTable.vue';
+import BarChart from '/@/views/count/components/BarChart.vue';
+
+const columns = ref([
+  { label: '用户特征', prop: 'feature', width: '100px' },
+  { prop: 'percent', type: 'percentDom' },
+  { label: 'TGI', prop: 'tgi', width: '100px' },
+  { label: '百分比', prop: 'percent', width: '100px' },
+])
+
+const columns2 = ref([
+  { label: '卸载前使用App次数', prop: 'usageTime', width: '150px' },
+  { prop: 'percent', type: 'percentDom' },
+  { label: '百分比', prop: 'percent', width: '100px' },
+  { label: '卸载用户数', prop: 'count', width: '100px' },
+])
+
+const form = ref({
+  time: '1',
+  dateArray: []
+})
+
+const data = ref([
+  { feature: '专科', tgi: 3.74, percent: 3.22 },
+  { feature: '便携生活智能生...', tgi: 3.74, percent: 3.22 },
+  { feature: '社交通讯', tgi: 3.74, percent: 3.22 },
+  { feature: '同城本地社区', tgi: 3.74, percent: 3.22 },
+  { feature: '普通消费', tgi: 3.74, percent: 3.22 },
+])
+
+const data2 = ref([
+  { usageTime: '1次', percent: 3.22, count: 3.22 },
+  { usageTime: '2次', percent: 3.22, count: 3.22 },
+  { usageTime: '3次', percent: 3.22, count: 3.22 },
+  { usageTime: '4次', percent: 3.22, count: 3.22 },
+  { usageTime: '5次', percent: 3.22, count: 3.22 },
+  { usageTime: '6次以上', percent: 3.22, count: 3.22 },
+])
+
+// 多系列数据对比
+const usageTimeData = ref([
+  {
+    name: '未使用',
+    values: []
+  },
+  {
+    name: '使用1次',
+    values: []
+  },
+  {
+    name: '使用2次',
+    values: []
+  },
+  {
+    name: '使用3次',
+    values: []
+  },
+  {
+    name: '使用4次',
+    values: []
+  },
+  {
+    name: '使用5次',
+    values: []
+  },
+  {
+    name: '6次以上',
+    values: []
+  }
+])
+
+const seriesNames = ref<string[]>([]);
+
+const handleDateChange = (val: string[]) => {
+  // 强制触发响应式更新
+  seriesNames.value = [...val];
+
+  // 创建新的数据对象以确保响应式更新
+  const newData = usageTimeData.value.map((item: any) => ({
+    ...item,
+    values: val.map((date: string) => {
+      const value = Math.floor(Math.random() * 100);
+      return {
+        value: value,
+        percentage: `${value}%`
+      }
+    })
+  }));
+
+  console.log(newData);
+
+  usageTimeData.value = newData;
+}
+
+onMounted(() => {
+  handleDateChange(['卸载用户数']);
+})
+
+</script>
+<style scoped lang="scss">
+@import '/@/views/count/styles/common.scss';
+
+svg {
+  vertical-align: middle;
+  margin: 0 0 0 12px;
+}
+
+.select-form-card {
+  .card-title {
+    color: rgba(18, 18, 18, 1);
+    font-weight: 500;
+    font-family: Source Han Sans SC;
+  }
+}
+
+.select-form {
+  margin-top: 20px;
+  padding-left: 68px;
+  position: relative;
+  font-family: Source Han Sans SC;
+  font-weight: 400;
+  font-size: 14px;
+  color: rgba(100, 100, 100, 1);
+  line-height: 14px;
+
+  :deep(.el-form-item--default) {
+    margin-bottom: 12px;
+  }
+
+  span {
+    color: rgba(22, 122, 240, 1);
+    font-weight: 500;
+    font-size: 20px;
+    padding: 0 8px;
+  }
+
+  svg {
+    position: absolute;
+    left: 0;
+    top: 0;
+    margin: 0 0 0 0!important;
+  }
+
+  .el-form-item__content {
+    .el-select {
+      width: 147px !important;
+      min-width: 147px !important;
+    }
+  }
+}
+
+.card-header {
+  padding-left: 92px;
+  position: relative;
+  margin-bottom: 12px;
+
+  svg {
+    position: absolute;
+    top: 0;
+    left: 0px;
+  }
+
+  .title {
+    color: rgba(18, 18, 18, 1);
+    font-family: Source Han Sans SC;
+    font-weight: 500;
+    font-size: 16px;
+    line-height: 23px;
+    margin-bottom: 12px;
+  }
+
+  .tips {
+    color: rgba(100, 100, 100, 1);
+    font-family: Source Han Sans SC;
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 100%;
+    span {
+      color: rgba(18, 18, 18, 1);
+      font-weight: 500;
+      font-size: 20px;
+      padding: 0 8px;
+    }
+  }
+}
+
+.card-content {
+  display: flex;
+  gap: 12px;
+  padding: 0px 12px;
+
+  .chart-container {
+    width: 100%;
+    height: 300px;
+  }
+}
+</style>

src/views/count/components/BarChart.vue

@@ -0,0 +1,341 @@
+<template>
+  <div class="bar-chart-container">
+    <div class="chart-wrapper">
+      <v-chart class="chart" :option="chartOption" :autoresize="true" :style="{height: chartHeight || 244 + 'px'}" />
+    </div>
+    <div v-if="!isMultiSeries" class="title">{{ title }}</div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed, onMounted, watch } from 'vue'
+import { use } from 'echarts/core'
+import { CanvasRenderer } from 'echarts/renderers'
+import { BarChart } from 'echarts/charts'
+import {
+  TitleComponent,
+  TooltipComponent,
+  LegendComponent,
+  GridComponent
+} from 'echarts/components'
+import VChart from 'vue-echarts'
+
+use([
+  CanvasRenderer,
+  BarChart,
+  TitleComponent,
+  TooltipComponent,
+  LegendComponent,
+  GridComponent
+])
+
+// 支持两种数据格式
+interface BarItem {
+  name: string
+  value: number
+  percentage?: string
+}
+
+interface MultiBarItem {
+  name: string
+  values: Array<{
+    value: number
+    percentage?: string
+    seriesName?: string
+  }>
+}
+
+const props = withDefaults(defineProps<{
+  data?: BarItem[] | MultiBarItem[]
+  title?: string
+  seriesNames?: string[] // 系列名称，用于多系列对比
+  isMultiSeries?: boolean // 是否为多系列数据
+  chartHeight?: number // 图表高度
+}>(), {
+  data: () => [],
+  seriesNames: () => ['系列1', '系列2'],
+  isMultiSeries: false
+})
+
+// 默认数据
+const defaultData: BarItem[] = [
+  // { name: '6次以上', value: 45, percentage: '45.0%' },
+  // { name: '5次', value: 23, percentage: '23.0%' },
+  // { name: '4次', value: 15, percentage: '15.0%' },
+  // { name: '3次', value: 8, percentage: '8.0%' },
+  // { name: '2次', value: 6, percentage: '6.0%' },
+  // { name: '1次', value: 3, percentage: '3.0%' }
+]
+
+const displayData = computed(() => {
+  return props.data && props.data.length > 0 ? props.data : defaultData
+})
+
+// 获取x轴数据
+const xAxisData = computed(() => {
+  return displayData.value.map(item => item.name)
+})
+
+// 生成系列数据
+const seriesData = computed(() => {
+  if (!props.isMultiSeries) {
+    // 单系列数据
+    const singleData = displayData.value as BarItem[]
+    return [{
+      name: '数据',
+      type: 'bar',
+      data: singleData.map((item) => ({
+        value: item.value,
+        percentage: item.percentage || ''
+      })),
+      itemStyle: {
+        color: {
+          type: 'linear',
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 1,
+          colorStops: [
+            { offset: 0, color: 'rgba(109, 173, 249, 1)' },
+            { offset: 1, color: 'rgba(109, 173, 249, 1)' }
+          ]
+        },
+        borderRadius: [0, 0, 0, 0]
+      },
+      emphasis: {
+        itemStyle: {
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              { offset: 0, color: 'rgba(109, 173, 249, 1)' },
+              { offset: 1, color: 'rgba(109, 173, 249, 1)' }
+            ]
+          }
+        }
+      },
+      barWidth: '54px'
+    }]
+  } else {
+    // 多系列数据
+    const multiData = displayData.value as MultiBarItem[]
+    const colors = [
+      'rgba(109, 173, 249, 1)',
+      'rgba(255, 107, 107, 1)',
+      'rgba(255, 193, 7, 1)',
+      'rgba(40, 167, 69, 1)',
+      'rgba(220, 53, 69, 1)'
+    ]
+
+    return multiData[0].values.map((_, index) => ({
+      name: props.seriesNames[index] || `系列${index + 1}`,
+      type: 'bar',
+      data: multiData.map((item) => ({
+        value: item.values[index]?.value || 0,
+        percentage: item.values[index]?.percentage || ''
+      })),
+      itemStyle: {
+        color: {
+          type: 'linear',
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 1,
+          colorStops: [
+            { offset: 0, color: colors[index % colors.length] },
+            { offset: 1, color: colors[index % colors.length] }
+          ]
+        },
+        borderRadius: [0, 0, 0, 0]
+      },
+      emphasis: {
+        itemStyle: {
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              { offset: 0, color: colors[index % colors.length] },
+              { offset: 1, color: colors[index % colors.length] }
+            ]
+          }
+        }
+      },
+      barWidth: props.isMultiSeries ? 60 / props.seriesNames.length + 'px' : '54px'
+    }))
+  }
+})
+
+const chartOption = computed(() => {
+  return {
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow'
+      },
+      position: function (point: any, params: any, dom: any, rect: any, size: any) {
+        // 自定义位置逻辑
+        // point: 鼠标位置
+        // params: 数据项参数
+        // dom: tooltip的dom对象
+        // rect: 只有鼠标在图形上时有效，是一个用x, y, width, height四个属性描述的矩形
+        // size: 包含 contentSize（tooltip内容区域的大小）和 viewSize（可视区域的大小）
+        
+        // 示例：将tooltip显示在鼠标上方
+        return [point[0], point[1] - 10];
+        
+        // 其他位置选项：
+        // return 'top'; // 固定在顶部
+        // return 'bottom'; // 固定在底部
+        // return 'left'; // 固定在左侧
+        // return 'right'; // 固定在右侧
+        // return [10, 10]; // 固定坐标位置
+      },
+      // formatter: function (params: any) {
+      //   if (!props.isMultiSeries) {
+      //     const data = params[0]
+      //     const percentageText = data.data.percentage ? ` (${data.data.percentage})` : ''
+      //     return `${data.name}<br/>设备数：${data.value}${percentageText}`
+      //   } else {
+      //     let result = `<div style="text-align: left;">${params[0].name}<br/>`
+      //     params.forEach((param: any) => {
+      //       const percentageText = param.data.percentage ? ` (${param.data.percentage})` : ''
+      //       result += `${param.seriesName}：${param.value}${percentageText}<br/>`
+      //     })
+      //     return result + '</div>'
+      //   }
+      // },
+      backgroundColor: 'rgba(255, 255, 255, 0.9)',
+      borderColor: '#e6e6e6',
+      borderWidth: 1,
+      textStyle: {
+        color: '#333'
+      }
+    },
+    legend: props.isMultiSeries ? {
+      data: props.seriesNames,
+      bottom: '0%',
+      textStyle: {
+        color: 'rgba(100, 100, 100, 1)',
+        fontSize: 12
+      },
+      icon: 'rect',
+      itemWidth: 8,
+      itemHeight: 8,
+      itemGap: 20,
+      selectedMode: true,
+      itemStyle: {
+        borderWidth: 0,
+      },
+    } : undefined,
+    grid: {
+      left: '0',
+      right: '0',
+      bottom: props.isMultiSeries ? '15%' : '0',
+      top: '3%',
+      containLabel: true
+    },
+    xAxis: {
+      type: 'category',
+      data: xAxisData.value,
+      axisLine: {
+        lineStyle: {
+          color: '#e6e6e6'
+        }
+      },
+      axisTick: {
+        show: false
+      },
+      axisLabel: {
+        color: 'rgba(100, 100, 100, 1)',
+        fontSize: 14
+      }
+    },
+    yAxis: {
+      type: 'value',
+      name: '次数',
+      nameTextStyle: {
+        color: 'rgba(100, 100, 100, 1)',
+        fontSize: 14
+      },
+      axisLine: {
+        show: false
+      },
+      axisTick: {
+        show: false
+      },
+      axisLabel: {
+        color: 'rgba(100, 100, 100, 1)',
+        fontSize: 13
+      },
+      splitLine: {
+        lineStyle: {
+          color: '#f0f0f0',
+          type: 'dashed'
+        }
+      }
+    },
+    series: seriesData.value
+  }
+})
+
+onMounted(() => {
+  // 组件挂载后的初始化逻辑
+})
+
+
+
+// 监听数据变化
+watch(displayData, (newData) => {
+  console.log('Bar chart data updated:', newData)
+}, { deep: true })
+</script>
+
+<style scoped lang="scss">
+.bar-chart-container {
+  width: 100%;
+  height: 100%;
+  text-align: center;
+}
+
+.chart-wrapper {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.chart {
+  width: 100%;
+  height: 100%;
+}
+
+.title {
+  display: inline-block;
+  color: rgba(18, 18, 18, 1);
+  font-family: Source Han Sans SC;
+  font-weight: 400;
+  font-style: Regular;
+  font-size: 14px;
+  padding-left: 14px;
+  position: relative;
+  margin-top: 30px;
+
+  &::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 8px;
+    height: 8px;
+    background-color: rgba(109, 173, 249, 1);
+  }
+}
+</style>

src/views/count/components/BarChartUsageExample.vue

@@ -0,0 +1,147 @@
+<template>
+  <div class="example-container">
+    <h2>柱状图使用示例</h2>
+    
+    <!-- 单系列数据示例 -->
+    <div class="example-section">
+      <h3>单系列数据（有百分比）</h3>
+      <BarChart 
+        :data="singleSeriesData" 
+        title="单系列柱状图"
+        style="height: 300px;"
+      />
+    </div>
+
+    <!-- 单系列数据无百分比示例 -->
+    <div class="example-section">
+      <h3>单系列数据（无百分比）</h3>
+      <BarChart 
+        :data="singleSeriesDataNoPercentage" 
+        title="单系列柱状图（无百分比）"
+        style="height: 300px;"
+      />
+    </div>
+
+    <!-- 多系列数据示例 -->
+    <div class="example-section">
+      <h3>多系列数据对比</h3>
+      <BarChart 
+        :data="multiSeriesData" 
+        :is-multi-series="true"
+        :series-names="['2023年', '2024年']"
+        title="多系列对比柱状图"
+        style="height: 300px;"
+      />
+    </div>
+
+    <!-- 多系列数据部分有百分比示例 -->
+    <div class="example-section">
+      <h3>多系列数据（部分有百分比）</h3>
+      <BarChart 
+        :data="multiSeriesDataMixed" 
+        :is-multi-series="true"
+        :series-names="['产品A', '产品B', '产品C']"
+        title="多系列混合数据柱状图"
+        style="height: 300px;"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import BarChart from './BarChart.vue'
+
+// 单系列数据（有百分比）
+const singleSeriesData = ref([
+  { name: '6次以上', value: 45, percentage: '45.0%' },
+  { name: '5次', value: 23, percentage: '23.0%' },
+  { name: '4次', value: 15, percentage: '15.0%' },
+  { name: '3次', value: 8, percentage: '8.0%' },
+  { name: '2次', value: 6, percentage: '6.0%' },
+  { name: '1次', value: 3, percentage: '3.0%' }
+])
+
+// 单系列数据（无百分比）
+const singleSeriesDataNoPercentage = ref([
+  { name: '北京', value: 1200 },
+  { name: '上海', value: 980 },
+  { name: '广州', value: 850 },
+  { name: '深圳', value: 720 },
+  { name: '杭州', value: 650 }
+])
+
+// 多系列数据对比
+const multiSeriesData = ref([
+  {
+    name: 'Q1',
+    values: [
+      { value: 120, percentage: '30.0%' },
+      { value: 140, percentage: '35.0%' }
+    ]
+  },
+  {
+    name: 'Q2',
+    values: [
+      { value: 180, percentage: '45.0%' },
+      { value: 160, percentage: '40.0%' }
+    ]
+  },
+  {
+    name: 'Q3',
+    values: [
+      { value: 100, percentage: '25.0%' },
+      { value: 100, percentage: '25.0%' }
+    ]
+  }
+])
+
+// 多系列数据（部分有百分比）
+const multiSeriesDataMixed = ref([
+  {
+    name: '1月',
+    values: [
+      { value: 100, percentage: '25.0%' },
+      { value: 120 },
+      { value: 80, percentage: '20.0%' }
+    ]
+  },
+  {
+    name: '2月',
+    values: [
+      { value: 150, percentage: '37.5%' },
+      { value: 130 },
+      { value: 120, percentage: '30.0%' }
+    ]
+  },
+  {
+    name: '3月',
+    values: [
+      { value: 150, percentage: '37.5%' },
+      { value: 150 },
+      { value: 200, percentage: '50.0%' }
+    ]
+  }
+])
+</script>
+
+<style scoped lang="scss">
+.example-container {
+  padding: 20px;
+  
+  h2 {
+    color: #333;
+    margin-bottom: 30px;
+  }
+  
+  .example-section {
+    margin-bottom: 40px;
+    
+    h3 {
+      color: #666;
+      margin-bottom: 15px;
+      font-size: 16px;
+    }
+  }
+}
+</style>

src/views/count/components/ExportToCSV.vue

@@ -0,0 +1,184 @@
+<template>
+  <div>
+    <div class="table-container" :style="props.tableStyle">
+      <div class="btn-toggle-table" :class="{ 'hide-table': hideTable }" @click="hideTable = !hideTable">
+        {{ hideTable ? '展开' : '收起' }}明细数据<svg width="14" height="14" viewBox="0 0 14 14" fill="none"
+          xmlns="http://www.w3.org/2000/svg">
+          <path d="M10.5 8.75L7 5.25L3.5 8.75" stroke="#167AF0" stroke-width="1.5" stroke-linecap="round"
+            stroke-linejoin="round" />
+        </svg>
+      </div>
+
+      <div v-if="fileName" class="export-button" @click="handleExportData(dataList, columns, fileName)">导出
+        <span style="vertical-align: middle; margin: 0 0 0 8px;">
+          <Svg name="export2"></Svg>
+        </span>
+      </div>
+
+      <el-table class="table" :data="paginatedData" row-key="name" style="width: 100%"
+        :cell-style="cellStyle" :header-cell-style="headerCellStyle" v-if="!hideTable">
+        <el-table-column v-for="(column, index) in columns" :key="column.prop" :label="column.label"
+          :prop="column.prop" show-overflow-tooltip :formatter="statusFormatter">
+          <template #default="scope">
+            {{ scope.row[column.prop] }}
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <pagination v-if="!hideTable && !hidePage" @current-change="handleCurrentChange" @size-change="handleSizeChange"
+        v-bind="state.pagination">
+      </pagination>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { BasicTableProps, useTable } from '/@/hooks/table';
+import { ref, reactive, PropType, watch, computed } from 'vue'
+import { exportToExcel, formatTableDataForExport } from '/@/utils/exportExcel';
+import { useMessage } from '/@/hooks/message';
+import Svg from '/@/components/Svg.vue';
+
+const cellStyle = ref({
+  textAlign: 'center',
+  fontSize: '14px',
+  height: '50px',
+  background: 'transparent !important'
+})
+
+const headerCellStyle = ref({
+  textAlign: 'center',
+  border: 'none',
+  background: 'rgba(244, 245, 250, 1)',
+  height: '32px',
+  color: 'rgba(100, 100, 100, 1)',
+  fontSize: '14px',
+})
+
+const props = defineProps({
+  data: {
+    type: Array,
+    default: () => []
+  },
+  columns: {
+    type: Array as PropType<{ prop: string; label: string }[]>,
+    default: () => []
+  },
+  fileName: {
+    type: String,
+    default: ''
+  },
+  hideTable: {
+    type: Boolean,
+    default: true
+  },
+  tableStyle: {
+    type: Object,
+    default: () => ({})
+  },
+  hidePage: {
+    type: Boolean,
+    default: false
+  }
+})
+
+// 表格数据
+const dataList = ref(props.data);
+const hideTable = ref(props.hideTable);
+const state: BasicTableProps = reactive<BasicTableProps>({
+  queryForm: {
+    ip: '',
+  },
+  pageList: () => Promise.resolve([]),
+  pagination: {
+    current: 1,
+    size: 5,
+    total: 0,
+    pageSizes: [5, 10, 20, 50, 100]
+  },
+  // dataList: []
+});
+
+// 计算分页后的数据
+const paginatedData = computed(() => {
+  if (!state.pagination || typeof state.pagination.current === 'undefined' || typeof state.pagination.size === 'undefined') {
+    return dataList.value;
+  }
+  const start = (state.pagination.current - 1) * state.pagination.size;
+  const end = start + state.pagination.size;
+  return dataList.value.slice(start, end);
+});
+
+watch(() => props.data, (newVal) => {
+  dataList.value = newVal;
+  console.log(`dataList: `);
+  console.log(dataList.value);
+  state.pagination!.total = dataList.value.length;
+}, { immediate: true, deep: true })
+
+const { getDataList, currentChangeHandle, sizeChangeHandle, tableStyle } = useTable(state);
+
+// 重写分页处理函数，实现本地分页
+const handleCurrentChange = (val: number) => {
+  state.pagination!.current = val;
+};
+
+const handleSizeChange = (val: number) => {
+  state.pagination!.size = val;
+  state.pagination!.current = 1; // 切换每页条数时重置到第一页
+};
+
+const statusFormatter = (row: any, column: any, cellValue: any, index: any) => {
+  return cellValue || '--';
+}
+
+const handleExportData = (data: any, columns: any, fileName: string) => {
+  try {
+    // 检查是否有数据
+    if (!data || data.length === 0) {
+      useMessage().warning('没有数据可导出');
+      return;
+    }
+
+    const exportData = formatTableDataForExport(data, columns);
+    exportToExcel(exportData, fileName);
+  } catch (error) {
+    console.error('导出失败:', error);
+    useMessage().error('导出失败，请检查数据格式');
+  }
+}
+
+</script>
+
+<style scoped lang="scss">
+@import '/@/views/count/styles/common.scss';
+
+svg {
+  vertical-align: middle;
+  margin: 0 0 0 12px;
+}
+
+.table-container {
+  margin: 0 auto;
+  width: 100%;
+  max-width: 1360px;
+}
+
+.export-button {
+  font-size: 14px;
+  font-family: Source Han Sans SC;
+  font-weight: 500;
+  font-size: 14px;
+  color: rgba(22, 122, 240, 1);
+
+  svg {
+    margin-left: 8px;
+    margin-right: 0;
+  }
+}
+
+:deep(.el-input__inner),
+:deep(.el-date-editor--dates .el-input__wrapper) {
+  cursor: pointer;
+}
+</style>

src/views/count/churn/overview/echarts/LineChart.vue → src/views/count/components/LineChart.vue

@@ -3,16 +3,24 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue'
+import { ref, onMounted, onUnmounted, watch, nextTick, computed } from 'vue'
 import * as echarts from 'echarts'
 
 interface ChartDataItem {
   date: string
   value: number
 }
+interface ChartMulDataItem {
+  date: string
+  values: Array<{
+    value: number
+    percentage?: string
+    seriesName?: string
+  }>
+}
 
 interface Props {
-  data: ChartDataItem[]
+  data: ChartDataItem[] | ChartMulDataItem[]
   width?: string
   height?: string
   title?: string
@@ -22,6 +30,8 @@ interface Props {
   showLegend?: boolean
   smooth?: boolean
   areaStyle?: boolean
+  isMultiSeries?: boolean
+  seriesNames?: string[]
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -33,7 +43,9 @@ const props = withDefaults(defineProps<Props>(), {
   showTooltip: true,
   showLegend: false,
   smooth: false,
-  areaStyle: false
+  areaStyle: false,
+  isMultiSeries: false,
+  seriesNames: () => ['系列1', '系列2']
 })
 
 const chartRef = ref<HTMLElement>()
@@ -47,12 +59,97 @@ const initChart = () => {
   updateChart()
 }
 
+// 生成系列数据
+const seriesData = computed(() => {
+  if (!props.isMultiSeries) {
+    const values = (props.data as ChartDataItem[]).map(item => item.value)
+    return [
+      {
+        name: props.title || '数据',
+        type: 'line',
+        data: values,
+        smooth: props.smooth,
+        symbol: 'circle',
+        symbolSize: 8,
+        lineStyle: {
+          color: props.color,
+          width: 2
+        },
+        itemStyle: {
+          color: props.color,
+          borderWidth: 2,
+          borderColor: props.color,
+        },
+        emphasis: {
+          itemStyle: {
+            color: props.color,
+            borderWidth: 2,
+            borderColor: props.color,
+          }
+        }
+      }
+    ]
+  } else {
+    const multiData = props.data as ChartMulDataItem[]
+    if (!multiData || multiData.length === 0 || !multiData[0].values) {
+      return []
+    }
+    
+    const colors = [
+      'rgba(22, 122, 240, 1)',
+      'rgba(159, 91, 255, 1)',
+      'rgba(255, 157, 0, 1)',
+      'rgba(40, 167, 69, 1)',
+      'rgba(220, 53, 69, 1)'
+    ]
+    
+    return multiData[0].values.map((_, index) => ({
+      name: props.seriesNames[index] || `系列${index + 1}`,
+      type: 'line',
+      data: multiData.map((item) => item.values[index]?.value || 0),
+      smooth: props.smooth,
+      symbol: 'circle',
+      symbolSize: 8,
+      lineStyle: {
+        color: colors[index % colors.length],
+        width: 2
+      },
+      itemStyle: {
+        color: colors[index % colors.length],
+        borderWidth: 2,
+        borderColor: colors[index % colors.length],
+      },
+      emphasis: {
+        itemStyle: {
+          color: colors[index % colors.length],
+          borderWidth: 2,
+          borderColor: colors[index % colors.length],
+        }
+      },
+    }))
+  }
+})
+
+// 获取图例数据
+const legendData = computed(() => {
+  if (!props.isMultiSeries) {
+    return [props.title || '数据']
+  } else {
+    const multiData = props.data as ChartMulDataItem[]
+    if (!multiData || multiData.length === 0 || !multiData[0].values) {
+      return []
+    }
+    return multiData[0].values.map((_, index) => 
+      props.seriesNames[index] || `系列${index + 1}`
+    )
+  }
+})
+
 // 更新图表数据
 const updateChart = () => {
   if (!chartInstance) return
 
   const dates = props.data.map(item => item.date)
-  const values = props.data.map(item => item.value)
 
   const option: echarts.EChartsOption = {
     tooltip: props.showTooltip ? {
@@ -73,27 +170,49 @@ const updateChart = () => {
         }
       },
       formatter: function(params: any) {
-        const data = params[0]
-        return `<div style="padding: 8px;">
-          <div style="font-weight: 500; margin-bottom: 4px;">${data.name}</div>
-          <div style="color: ${props.color}; font-size: 14px; font-weight: 500;">
-            ${data.seriesName}: ${data.value}
-          </div>
-        </div>`
+        if (props.isMultiSeries) {
+          let html = `<div style="padding: 8px; text-align: left;">
+            <div style="font-weight: 900; margin-bottom: 4px; font-size: 14px;">${params[0].name}</div>`
+          
+          params.forEach((param: any) => {
+            html += `<div style="color: ${param.color}; font-size: 14px; font-weight: 500; margin: 2px 0;">
+              ${param.seriesName}: ${param.value}
+            </div>`
+          })
+          
+          html += '</div>'
+          return html
+        } else {
+          const data = params[0]
+          return `<div style="padding: 8px; text-align: left;">
+            <div style="font-weight: 900; margin-bottom: 4px; font-size: 14px;">${data.name}</div>
+            <div style="color: ${props.color}; font-size: 14px; font-weight: 500;">
+              ${data.seriesName}: ${data.value}
+            </div>
+          </div>`
+        }
       }
     } : undefined,
     legend: props.showLegend ? {
-      data: [props.title || '数据'],
-      top: '40px',
+      data: legendData.value,
+      bottom: '0px',
       textStyle: {
         fontSize: 12,
         color: '#666'
-      }
+      },
+      icon: 'circle',
+      itemWidth: 8,
+      itemHeight: 8,
+      itemGap: 30,
+      selectedMode: true,
+      itemStyle: {
+        borderWidth: 0
+      },
     } : undefined,
     grid: {
       left: '0%',
       right: '0%',
-      bottom: '0%',
+      bottom: props.showLegend ? '60px' : '0',
       top: '10px',
       containLabel: true
     },
@@ -135,32 +254,7 @@ const updateChart = () => {
         show: false
       }
     },
-    series: [
-      {
-        name: props.title || '数据',
-        type: 'line',
-        data: values,
-        smooth: props.smooth,
-        symbol: 'circle',
-        symbolSize: 8,
-        lineStyle: {
-          color: props.color,
-          width: 2
-        },
-        itemStyle: {
-          color: props.color,
-          borderWidth: 2,
-          borderColor: props.color,
-        },
-        emphasis: {
-          itemStyle: {
-            color: props.color,
-            borderWidth: 2,
-            borderColor: props.color,
-          }
-        }
-      }
-    ]
+    series: seriesData.value as any
   }
 
   chartInstance.setOption(option)

src/views/count/components/LineChartExample.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="line-chart-example">
+    <h3>多线图表示例</h3>
+    <LineChart 
+      :data="chartData" 
+      :lines="lineConfigs"
+      height="400px"
+      title="销售数据趋势"
+      :show-legend="true"
+      :show-tooltip="true"
+      :show-grid="true"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import LineChart from './LineChart.vue'
+
+// 图表数据 - 每条线对应一个数据字段
+const chartData = [
+  { date: '2024-01', sales: 1200, profit: 300, cost: 900 },
+  { date: '2024-02', sales: 1500, profit: 400, cost: 1100 },
+  { date: '2024-03', sales: 1800, profit: 500, cost: 1300 },
+  { date: '2024-04', sales: 1600, profit: 450, cost: 1150 },
+  { date: '2024-05', sales: 2200, profit: 600, cost: 1600 },
+  { date: '2024-06', sales: 2500, profit: 700, cost: 1800 },
+  { date: '2024-07', sales: 2800, profit: 800, cost: 2000 },
+  { date: '2024-08', sales: 3000, profit: 900, cost: 2100 },
+  { date: '2024-09', sales: 3200, profit: 1000, cost: 2200 },
+  { date: '2024-10', sales: 3500, profit: 1100, cost: 2400 },
+  { date: '2024-11', sales: 3800, profit: 1200, cost: 2600 },
+  { date: '2024-12', sales: 4000, profit: 1300, cost: 2700 }
+]
+
+// 线条配置 - 定义每条线的样式和行为
+const lineConfigs = [
+  {
+    name: 'sales',        // 对应数据中的字段名
+    color: '#167AF0',     // 线条颜色
+    smooth: true,         // 是否平滑
+    areaStyle: false,     // 是否显示区域填充
+    symbolSize: 8,        // 数据点大小
+    lineWidth: 2          // 线条宽度
+  },
+  {
+    name: 'profit',
+    color: '#52C41A',
+    smooth: true,
+    areaStyle: true,      // 显示区域填充
+    symbolSize: 6,
+    lineWidth: 2
+  },
+  {
+    name: 'cost',
+    color: '#FA8C16',
+    smooth: false,        // 不平滑
+    areaStyle: false,
+    symbolSize: 8,
+    lineWidth: 2
+  }
+]
+</script>
+
+<style scoped lang="scss">
+.line-chart-example {
+  padding: 20px;
+  
+  h3 {
+    margin-bottom: 20px;
+    color: #333;
+    font-size: 18px;
+    font-weight: 500;
+  }
+}
+</style>

src/views/count/engagement/components/FormEcharts.vue

@@ -0,0 +1,118 @@
+<template>
+  <div class="form-container">
+    <el-form :inline="true" :model="form" label-width="0">
+      <el-form-item label="">
+        <el-select style="width: 106px !important; min-width: 106px !important;" v-model="form.timeCompare"
+          placeholder="时段对比">
+          <el-option label="时段对比" value="time1" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="">
+        <el-button type="primary" style="background-color: rgba(22, 122, 240, 1); border-color: rgba(22, 122, 240, 1);"
+          @click="openDatePicker">
+          <Svg name="date"></Svg>对比时间
+          <el-date-picker v-if="type === 'date'" class="date-picker" v-model="tempSelectedDates" type="dates" placeholder=""
+            format="YYYY-MM-DD" value-format="YYYY-MM-DD" style="width: 100%; margin-bottom: 16px;"
+            :close-on-click-modal="false" :close-on-press-escape="false" :teleported="false"
+            :popper-class="'date-picker-no-close'" @change="handleDateChange">
+          </el-date-picker>
+        </el-button>
+        <div class="clear-btn" style="display: none;" @click="clearAllDates">清空</div>
+      </el-form-item>
+    </el-form>
+    <div class="average-time">
+      {{ averageValue.time }}:&nbsp;
+      <span>{{ averageValue.value }}</span>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { formatDate } from '/@/utils/formatTime';
+import { ref, reactive, defineEmits, defineProps } from 'vue'
+import Svg from '/@/components/Svg.vue';
+
+const emit = defineEmits(['dateChange']);
+
+const props = defineProps({
+  averageValue: {
+    type: Object,
+    default: () => ({
+      time: '',
+      value: ''
+    })
+  },
+  type: {
+    type: String,
+    default: 'date'
+  },
+  form: {
+    type: Object,
+    default: () => ({})
+  }
+})
+
+// const form = reactive(props.form);
+
+// 临时存储选中的日期，用于弹窗内编辑
+const tempSelectedDates = ref<string[]>([]);
+// 打开弹窗时初始化临时数据
+const openDatePicker = () => { };
+// 清空选中的日期
+const clearAllDates = () => {
+  tempSelectedDates.value = [];
+}
+
+// 日期更新事件
+const handleDateChange = (val: string[]) => {
+  // 触发父组件的日期更新事件
+  emit('dateChange', val);
+}
+
+watch(props.form, (newVal) => {
+  console.log(newVal);
+  const date = formatDate(new Date(newVal.date), 'YYYY-mm-dd');
+  tempSelectedDates.value = [date];
+  handleDateChange([date]);
+}, { deep: true, immediate: true })
+
+</script>
+<style scoped lang="scss">
+@import '/@/views/count/styles/common.scss';
+
+.form-container {
+  position: relative;
+  margin: 53px auto 0px;
+  width: 100%;
+  max-width: 1360px;
+  display: flex;
+  justify-content: space-between;
+
+  .average-time {
+    font-family: Source Han Sans SC;
+    font-weight: 400;
+    font-style: Regular;
+    font-size: 16px;
+    color: rgba(18, 18, 18, 1);
+
+    span {
+      color: rgba(22, 122, 240, 1);
+    }
+  }
+
+  :deep(.el-form-item__content .el-date-editor) {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 106px !important;
+    min-width: 106px !important;
+    height: 100%;
+    opacity: 0;
+  }
+
+  :deep(.el-input__inner),
+  :deep(.el-date-editor--dates .el-input__wrapper) {
+    cursor: pointer;
+  }
+
+}
+</style>

src/views/count/engagement/components/SelectForm.vue

@@ -0,0 +1,67 @@
+<template>
+  <el-card class="select-form-card" shadow="none" style="padding: 10px 14px 0px 14px;">
+    <div class="card-title no-padding">{{ title }}</div>
+    <div class="select-form">
+      <el-form :inline="true" :model="form" label-width="0">
+        <el-form-item label="">
+          <el-date-picker v-if="type === 'date'" :type="type" style="width: 147px; min-width: 147px;" v-model="form.date" placeholder="开始日期" />
+          <el-date-picker v-if="type === 'daterange'" :type="type" style="width: 242px;" v-model="form.dateArray" range-separator="至"
+            start-placeholder="开始日期" end-placeholder="结束日期" />
+        </el-form-item>
+        <el-form-item label="">
+          <el-select v-model="form.channel" placeholder="请选择渠道">
+            <el-option label="全部渠道" value="all" />
+            <el-option label="渠道1" value="1" />
+            <el-option label="渠道2" value="2" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="">
+          <el-select v-model="form.version" placeholder="请选择版本">
+            <el-option label="全部版本" value="all" />
+            <el-option label="版本1" value="1" />
+            <el-option label="版本2" value="2" />
+          </el-select>
+        </el-form-item>
+      </el-form>
+    </div>
+  </el-card>
+</template>
+<script setup lang="ts">
+const props = defineProps({
+  type: {
+    type: String,
+    default: 'date'
+  },
+  form: {
+    type: Object,
+    default: () => ({})
+  },
+  title: {
+    type: String,
+    default: ''
+  }
+})
+</script>
+<style scoped lang="scss">
+@import '/@/views/count/styles/common.scss';
+
+.select-form-card {
+  .card-title {
+    color: rgba(18, 18, 18, 1);
+  }
+}
+.select-form {
+    margin-top: 20px;
+
+    form {
+      // height: 30px;
+    }
+
+    .el-form-item__content {
+      .el-select {
+        width: 147px !important;
+        min-width: 147px !important;
+      }
+    }
+  }
+</style>

src/views/count/engagement/frequency/Month.vue

@@ -0,0 +1,133 @@
+<template>
+  <el-card shadow="none" style="padding: 10px 14px;">
+    <div class="trend-container">
+      <div class="card-title">
+        月启动次数分布<el-tooltip class="box-item" effect="light" placement="right-start">
+          <template #content>
+            <div style="width: 300px;">
+              您可以查看用户在任意某个自然月的月启动次数的分布情况，同时可以对月启动次数的数据进行版本、渠道、分群的交叉筛选。<br />
+              <span style="color: rgba(22, 122, 240, 1);">月启动次数：</span>（用户）一个自然月内启动应用的次数
+            </div>
+          </template>
+          <span style=" vertical-align: middle; margin: 0 0 0 8px;">
+            <Svg name="export"></Svg>
+          </span>
+        </el-tooltip>
+      </div>
+      <FormEcharts v-if="type === 'date'" @dateChange="handleDateChange" :averageValue="averageValue" :type="type" :form="form" />
+      <div class="chart-container">
+        <BarChart :data="usageTimeData" :is-multi-series="true" :series-names="seriesNames" title="多系列对比柱状图"
+          style="height: 300px;" />
+      </div>
+      <el-divider style="margin: 30px 0; background: rgba(230, 230, 230, 1);" />
+      <ExportToCSV :data="formatData" :columns="columns" :fileName="'使用时长数据'" />
+    </div>
+  </el-card>
+</template>
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import BarChart from '/@/views/count/components/BarChart.vue';
+import ExportToCSV from '/@/views/count/components/ExportToCSV.vue';
+import FormEcharts from '../components/FormEcharts.vue';
+import Svg from '/@/components/Svg.vue';
+
+const props = defineProps({
+  type: {
+    type: String,
+    default: 'date'
+  },
+  form: {
+    type: Object,
+    default: () => ({})
+  }
+})
+
+const averageValue = ref({
+  time: '平均每月启动次数',
+  value: '1.23'
+})
+
+// 多系列数据对比
+const usageTimeData = ref([
+  {
+    name: '1-2',
+    values: []
+  },
+  {
+    name: '3-5',
+    values: []
+  },
+  {
+    name: '6-10',
+    values: []
+  },
+  {
+    name: '11-20',
+    values: []
+  },
+  {
+    name: '21-30',
+    values: []
+  },
+  {
+    name: '31-40',
+    values: []
+  }
+])
+
+const seriesNames = ref<string[]>([]);
+
+const handleDateChange = (val: string[]) => {
+  // 强制触发响应式更新
+  seriesNames.value = [...val];
+
+  // 创建新的数据对象以确保响应式更新
+  const newData = usageTimeData.value.map((item: any) => ({
+    ...item,
+    values: val.map((date: string) => {
+      const value = Math.floor(Math.random() * 100);
+      return {
+        value: value,
+        percentage: `${value}%`
+      }
+    })
+  }));
+
+  console.log(newData);
+
+  usageTimeData.value = newData;
+}
+
+
+// 定义表格列配置
+const columns = [
+  { prop: 'time', label: '启动次数' },
+  { prop: 'count', label: '用户数' },
+  { prop: 'percentage', label: '用户数比例' }
+];
+
+const formatData = computed(() => {
+  console.log(`formatData: `);
+  console.log(usageTimeData.value);
+  return usageTimeData.value.map((item: any) => {
+    return {
+      time: item.name,
+      count: item.values[0]?.value || 0,
+      percentage: `${item.values[0]?.value || 0}%`
+    }
+  })
+})
+</script>
+<style scoped lang="scss">
+@import '/@/views/count/styles/common.scss';
+
+svg {
+  vertical-align: middle;
+  margin: 0 0 0 12px;
+}
+
+.chart-container {
+  margin: 0 auto;
+  max-width: 1360px;
+}
+</style>

src/views/count/engagement/frequency/OneDay.vue

@@ -0,0 +1,125 @@
+<template>
+  <el-card shadow="none" style="padding: 10px 14px;">
+    <div class="trend-container">
+      <div class="card-title">
+        日启动次数分布<el-tooltip class="box-item" effect="light" placement="right-start">
+          <template #content>
+            <div style="width: 300px;">
+              您可以查看用户在任意1天内日启动次数的分布情况，同时可以对日启动次数的数据进行版本、渠道、分群的交叉筛选。<br />
+              <span style="color: rgba(22, 122, 240, 1);">日启动次数：</span>（用户）一天内启动应用的次数
+            </div>
+          </template>
+          <span style=" vertical-align: middle; margin: 0 0 0 8px;">
+            <Svg name="export"></Svg>
+          </span>
+        </el-tooltip>
+      </div>
+      <FormEcharts v-if="type === 'date'" @dateChange="handleDateChange" :averageValue="averageValue" :type="type" :form="form" />
+      <div class="chart-container">
+        <BarChart :data="usageTimeData" :is-multi-series="true" :series-names="seriesNames" title="多系列对比柱状图"
+          style="height: 300px;" />
+      </div>
+      <el-divider style="margin: 30px 0; background: rgba(230, 230, 230, 1);" />
+      <ExportToCSV :data="formatData" :columns="columns" :fileName="'日启动次数分布'" />
+    </div>
+  </el-card>
+</template>
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import BarChart from '/@/views/count/components/BarChart.vue';
+import ExportToCSV from '/@/views/count/components/ExportToCSV.vue';
+import FormEcharts from '../components/FormEcharts.vue';
+import Svg from '/@/components/Svg.vue';
+
+const props = defineProps({
+  type: {
+    type: String,
+    default: 'date'
+  },
+  form: {
+    type: Object,
+    default: () => ({})
+  }
+})
+
+const averageValue = ref({
+  time: '平均每日启动次数',
+  value: '1.23'
+})
+
+// 多系列数据对比
+const usageTimeData = ref([
+  {
+    name: '1-2',
+    values: []
+  },
+  {
+    name: '3-5',
+    values: []
+  },
+  {
+    name: '6-10',
+    values: []
+  },
+  {
+    name: '11-20',
+    values: []
+  }
+])
+
+const seriesNames = ref<string[]>([]);
+
+const handleDateChange = (val: string[]) => {
+  // 强制触发响应式更新
+  seriesNames.value = [...val];
+
+  // 创建新的数据对象以确保响应式更新
+  const newData = usageTimeData.value.map((item: any) => ({
+    ...item,
+    values: val.map((date: string) => {
+      const value = Math.floor(Math.random() * 100);
+      return {
+        value: value,
+        percentage: `${value}%`
+      }
+    })
+  }));
+
+  console.log(newData);
+
+  usageTimeData.value = newData;
+}
+
+
+// 定义表格列配置
+const columns = [
+  { prop: 'time', label: '启动次数' },
+  { prop: 'count', label: '用户数' },
+  { prop: 'percentage', label: '用户数比例' }
+];
+
+const formatData = computed(() => {
+  console.log(`formatData: `);
+  console.log(usageTimeData.value);
+  return usageTimeData.value.map((item: any) => {
+    return {
+      time: item.name,
+      count: item.values[0]?.value || 0,
+      percentage: `${item.values[0]?.value || 0}%`
+    }
+  })
+})
+</script>
+<style scoped lang="scss">
+@import '/@/views/count/styles/common.scss';
+
+svg {
+  vertical-align: middle;
+  margin: 0 0 0 12px;
+}
+
+.chart-container {
+  margin: 0 auto;
+  max-width: 1360px;
+}
+</style>

src/views/count/engagement/frequency/Week.vue

@@ -0,0 +1,133 @@
+<template>
+  <el-card shadow="none" style="padding: 10px 14px;">
+    <div class="trend-container">
+      <div class="card-title">
+        周启动次数分布<el-tooltip class="box-item" effect="light" placement="right-start">
+          <template #content>
+            <div style="width: 300px;">
+              您可以查看用户在任意某个自然周的周启动次数的分布情况，同时可以对周启动次数的数据进行版本、渠道、分群的交叉筛选。<br />
+              <span style="color: rgba(22, 122, 240, 1);">周启动次数：</span>（用户）一个自然周内启动应用的次数
+            </div>
+          </template>
+          <span style=" vertical-align: middle; margin: 0 0 0 8px;">
+            <Svg name="export"></Svg>
+          </span>
+        </el-tooltip>
+      </div>
+      <FormEcharts v-if="type === 'date'" @dateChange="handleDateChange" :averageValue="averageValue" :type="type" :form="form" />
+      <div class="chart-container">
+        <BarChart :data="usageTimeData" :is-multi-series="true" :series-names="seriesNames" title="多系列对比柱状图"
+          style="height: 300px;" />
+      </div>
+      <el-divider style="margin: 30px 0; background: rgba(230, 230, 230, 1);" />
+      <ExportToCSV :data="formatData" :columns="columns" :fileName="'使用时长数据'" />
+    </div>
+  </el-card>
+</template>
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import BarChart from '/@/views/count/components/BarChart.vue';
+import ExportToCSV from '/@/views/count/components/ExportToCSV.vue';
+import FormEcharts from '../components/FormEcharts.vue';
+import Svg from '/@/components/Svg.vue';
+
+const props = defineProps({
+  type: {
+    type: String,
+    default: 'date'
+  },
+  form: {
+    type: Object,
+    default: () => ({})
+  }
+})
+
+const averageValue = ref({
+  time: '平均每周启动次数',
+  value: '1.23'
+})
+
+// 多系列数据对比
+const usageTimeData = ref([
+  {
+    name: '1-2',
+    values: []
+  },
+  {
+    name: '3-5',
+    values: []
+  },
+  {
+    name: '6-10',
+    values: []
+  },
+  {
+    name: '11-20',
+    values: []
+  },
+  {
+    name: '21-30',
+    values: []
+  },
+  {
+    name: '31-40',
+    values: []
+  }
+])
+
+const seriesNames = ref<string[]>([]);
+
+const handleDateChange = (val: string[]) => {
+  // 强制触发响应式更新
+  seriesNames.value = [...val];
+
+  // 创建新的数据对象以确保响应式更新
+  const newData = usageTimeData.value.map((item: any) => ({
+    ...item,
+    values: val.map((date: string) => {
+      const value = Math.floor(Math.random() * 100);
+      return {
+        value: value,
+        percentage: `${value}%`
+      }
+    })
+  }));
+
+  console.log(newData);
+
+  usageTimeData.value = newData;
+}
+
+
+// 定义表格列配置
+const columns = [
+  { prop: 'time', label: '启动次数' },
+  { prop: 'count', label: '用户数' },
+  { prop: 'percentage', label: '用户数比例' }
+];
+
+const formatData = computed(() => {
+  console.log(`formatData: `);
+  console.log(usageTimeData.value);
+  return usageTimeData.value.map((item: any) => {
+    return {
+      time: item.name,
+      count: item.values[0]?.value || 0,
+      percentage: `${item.values[0]?.value || 0}%`
+    }
+  })
+})
+</script>
+<style scoped lang="scss">
+@import '/@/views/count/styles/common.scss';
+
+svg {
+  vertical-align: middle;
+  margin: 0 0 0 12px;
+}
+
+.chart-container {
+  margin: 0 auto;
+  max-width: 1360px;
+}
+</style>

src/views/count/engagement/frequency/index.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="layout-padding">
+    <div class="engagement-time">
+      <el-row :gutter="12" style="padding: 0 12px 12px; row-gap: 12px;">
+        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
+          <SelectForm :type="type" :form="form" :title="'使用频率'" />
+        </el-col>
+      </el-row>
+      <el-row :gutter="12" style="padding: 0 12px 12px; row-gap: 12px;">
+        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
+          <OneDay :type="type" :form="form" />
+        </el-col>
+      </el-row>
+      <el-row :gutter="12" style="padding: 0 12px 12px; row-gap: 12px;">
+        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
+          <Week :type="type" :form="form" />
+        </el-col>
+      </el-row>
+      <el-row :gutter="12" style="padding: 0 12px 12px; row-gap: 12px;">
+        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
+          <Month :type="type" :form="form" />
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" name="engagementTime" setup>
+import { reactive } from 'vue'
+import OneDay from './OneDay.vue';
+import Week from './Week.vue';
+import Month from './Month.vue';
+import SelectForm from '../components/SelectForm.vue';
+
+const type = ref('date');
+
+const form = reactive({
+  dateArray: [new Date().getTime() - 1000 * 60 * 60 * 24 * 7, new Date().getTime()],
+  date: new Date().getTime(),
+  selectedDates: [] as string[], // 存储多个选中的日期
+  timeCompare: 'time1',
+  channel: 'all',
+  version: 'all'
+})
+
+</script>
+<style scoped lang="scss">
+@import '/@/views/count/styles/common.scss';
+
+svg {
+  vertical-align: middle;
+  margin: 0 0 0 12px;
+}
+
+.engagement-time {
+
+}
+
+</style>

src/views/count/engagement/interval/Interval.vue

@@ -0,0 +1,142 @@
+<template>
+  <el-card shadow="none" style="padding: 10px 14px;">
+    <div class="trend-container">
+      <div class="card-title">
+        使用间隔分布<el-tooltip class="box-item" effect="light" placement="right-start">
+          <template #content>
+            <div style="width: 300px;">
+              您可以查看任意30天内用户相邻两次启动间隔的分布情况，并可以进行版本、渠道的筛选。<br />
+              <span style="color: rgba(22, 122, 240, 1);">使用间隔：</span>同一用户相邻两次启动间隔的时间长度。在固定的查询时段内，若用户A仅在第2天、第3天、第7天启动过应用，则“1天”和“4天”的计数分别加1；若用户B仅在第4天启动过三次应用，则“0-24h”的计数加2；若用户C仅第10天启动过一次应用，则“首次”的计数加1<br />
+              <span style="color: rgba(22, 122, 240, 1);">首次：</span>在固定的查询时段内只启动过一次的用户记为首次
+            </div>
+          </template>
+          <span style=" vertical-align: middle; margin: 0 0 0 8px;">
+            <Svg name="export"></Svg>
+          </span>
+        </el-tooltip>
+      </div>
+      <FormEcharts v-if="type === 'date'" @dateChange="handleDateChange" :averageValue="averageValue" />
+      <div class="chart-container">
+        <BarChart :data="usageTimeData" :is-multi-series="true" :series-names="seriesNames" title="多系列对比柱状图"
+          style="height: 300px;" />
+      </div>
+      <el-divider style="margin: 30px 0; background: rgba(230, 230, 230, 1);" />
+      <ExportToCSV :data="formatData" :columns="columns" :fileName="'使用间隔'" :hideTable="false" />
+    </div>
+  </el-card>
+</template>
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import BarChart from '/@/views/count/components/BarChart.vue';
+import ExportToCSV from '/@/views/count/components/ExportToCSV.vue';
+import FormEcharts from '../components/FormEcharts.vue';
+import Svg from '/@/components/Svg.vue';
+
+const props = defineProps({
+  type: {
+    type: String,
+    default: 'date'
+  },
+  form: {
+    type: Object,
+    default: () => ({})
+  }
+})
+
+const averageValue = ref({
+  time: '',
+  value: ''
+})
+
+// 多系列数据对比
+const usageTimeData = ref([
+  {
+    name: '首次',
+    values: []
+  },
+  {
+    name: '0-24h',
+    values: []
+  },
+  {
+    name: '1-2天',
+    values: []
+  },
+  {
+    name: '2-3天',
+    values: []
+  },
+  {
+    name: '3-4天',
+    values: []
+  },
+  {
+    name: '4-5天',
+    values: []
+  },
+  {
+    name: '5-6天',
+    values: []
+  },
+])
+
+const seriesNames = ref<string[]>([]);
+
+const handleDateChange = (val: string[]) => {
+  // 强制触发响应式更新
+  seriesNames.value = [...val];
+
+  // 创建新的数据对象以确保响应式更新
+  const newData = usageTimeData.value.map((item: any) => ({
+    ...item,
+    values: val.map((date: string) => {
+      const value = Math.floor(Math.random() * 100);
+      return {
+        value: value,
+        percentage: `${value}%`
+      }
+    })
+  }));
+
+  console.log(newData);
+
+  usageTimeData.value = newData;
+}
+
+
+// 定义表格列配置
+const columns = [
+  { prop: 'time', label: '使用间隔' },
+  { prop: 'count', label: '启动次数' },
+  { prop: 'percentage', label: '启动次数占比' }
+];
+
+const formatData = computed(() => {
+  console.log(`formatData: `);
+  console.log(usageTimeData.value);
+  return usageTimeData.value.map((item: any) => {
+    return {
+      time: item.name,
+      count: item.values[0]?.value || 0,
+      percentage: `${item.values[0]?.value || 0}%`
+    }
+  })
+})
+
+defineExpose({
+  handleDateChange
+})
+</script>
+<style scoped lang="scss">
+@import '/@/views/count/styles/common.scss';
+
+svg {
+  vertical-align: middle;
+  margin: 0 0 0 12px;
+}
+
+.chart-container {
+  margin: 0 auto;
+  max-width: 1360px;
+}
+</style>

src/views/count/engagement/interval/index.vue

@@ -0,0 +1,76 @@
+<template>
+  <div class="layout-padding">
+    <div class="engagement-time">
+      <el-row :gutter="12" style="padding: 0 12px 12px; row-gap: 12px;">
+        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
+          <SelectForm :type="type" :form="form" :title="'使用间隔'" />
+        </el-col>
+      </el-row>
+      <el-row :gutter="12" style="padding: 0 12px 12px; row-gap: 12px;">
+        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
+          <Interval :type="type" :form="form" ref="intervalRef" />
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" name="engagementTime" setup>
+import { reactive } from 'vue'
+import Interval from './Interval.vue';
+import SelectForm from '../components/SelectForm.vue';
+import { formatDate } from '/@/utils/formatTime';
+
+const type = ref('daterange');
+
+const form = reactive({
+  dateArray: [new Date().getTime() - 1000 * 60 * 60 * 24 * 7, new Date().getTime()],
+  date: new Date().getTime(),
+  selectedDates: [] as string[], // 存储多个选中的日期
+  timeCompare: 'time1',
+  channel: 'all',
+  version: 'all'
+})
+const intervalRef = ref<InstanceType<typeof Interval>>();
+
+watch(form, (newVal) => {
+  console.log([`${formatDate(new Date(newVal.dateArray[0]), 'YYYY-mm-dd')} - ${formatDate(new Date(newVal.dateArray[1]), 'YYYY-mm-dd')}`]);
+  nextTick(() => {
+    intervalRef.value?.handleDateChange([`${formatDate(new Date(newVal.dateArray[0]), 'YYYY-mm-dd')} - ${formatDate(new Date(newVal.dateArray[1]), 'YYYY-mm-dd')}`]);
+  })
+}, { deep: true, immediate: true })
+
+onMounted(() => {
+  nextTick(() => {
+    intervalRef.value?.handleDateChange([`${formatDate(new Date(form.dateArray[0]), 'YYYY-mm-dd')} - ${formatDate(new Date(form.dateArray[1]), 'YYYY-mm-dd')}`]);
+  })
+})
+
+</script>
+<style scoped lang="scss">
+@import '/@/views/count/styles/common.scss';
+
+svg {
+  vertical-align: middle;
+  margin: 0 0 0 12px;
+}
+
+.engagement-time {
+
+  .select-form {
+    margin-top: 20px;
+
+    form {
+      // height: 30px;
+    }
+
+    .el-form-item__content {
+      .el-select {
+        width: 147px !important;
+        min-width: 147px !important;
+      }
+    }
+  }
+}
+
+</style>

src/views/count/engagement/pages/View.vue

@@ -0,0 +1,130 @@
+<template>
+  <el-card shadow="none" style="padding: 10px 14px;">
+    <div class="trend-container">
+      <div class="card-title">
+        访问页面分布<el-tooltip class="box-item" effect="light" placement="right-start">
+          <template #content>
+            <div style="width: 300px;">
+              您可以查看用户在指定时段（1天、7天、30天）内访问页面数的分布情况，并可以进行版本、渠道和分群的交叉筛选。如果您在Android应用中使用了Fragment页面统计功能，这里的页面包括您指定统计的Activity和Fragment。<br />
+              <span style="color: rgba(22, 122, 240, 1);">访问页面：</span>用户一次启动内访问的页面数。若用户在一次访问中先后访问了页面A、页面B、页面A，则用户本次启动的访问页面数为3
+            </div>
+          </template>
+          <span style=" vertical-align: middle; margin: 0 0 0 8px;">
+            <Svg name="export"></Svg>
+          </span>
+        </el-tooltip>
+      </div>
+      <FormEcharts v-if="type === 'date'" @dateChange="handleDateChange" :averageValue="averageValue" />
+      <div class="chart-container">
+        <BarChart :data="usageTimeData" :is-multi-series="true" :series-names="seriesNames" title="多系列对比柱状图"
+          style="height: 300px;" />
+      </div>
+      <el-divider style="margin: 30px 0; background: rgba(230, 230, 230, 1);" />
+      <ExportToCSV :data="formatData" :columns="columns" :fileName="'访问页面'" :hideTable="false" />
+    </div>
+  </el-card>
+</template>
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import BarChart from '/@/views/count/components/BarChart.vue';
+import ExportToCSV from '/@/views/count/components/ExportToCSV.vue';
+import FormEcharts from '../components/FormEcharts.vue';
+import Svg from '/@/components/Svg.vue';
+
+const props = defineProps({
+  type: {
+    type: String,
+    default: 'date'
+  },
+  form: {
+    type: Object,
+    default: () => ({})
+  }
+})
+
+const averageValue = ref({
+  time: '平均访问页面数',
+  value: '1.23'
+})
+
+// 多系列数据对比
+const usageTimeData = ref([
+  {
+    name: '1-2',
+    values: []
+  },
+  {
+    name: '3-5',
+    values: []
+  },
+  {
+    name: '6-10',
+    values: []
+  },
+  {
+    name: '11-20',
+    values: []
+  }
+])
+
+const seriesNames = ref<string[]>([]);
+
+const handleDateChange = (val: string[]) => {
+  console.log(val);
+  // 强制触发响应式更新
+  seriesNames.value = [...val];
+
+  // 创建新的数据对象以确保响应式更新
+  const newData = usageTimeData.value.map((item: any) => ({
+    ...item,
+    values: val.map((date: string) => {
+      const value = Math.floor(Math.random() * 100);
+      return {
+        value: value,
+        percentage: `${value}%`
+      }
+    })
+  }));
+
+  console.log(newData);
+
+  usageTimeData.value = newData;
+}
+
+
+// 定义表格列配置
+const columns = [
+  { prop: 'time', label: '访问页面' },
+  { prop: 'count', label: '启动次数' },
+  { prop: 'percentage', label: '启动次数占比' }
+];
+
+const formatData = computed(() => {
+  console.log(`formatData: `);
+  console.log(usageTimeData.value);
+  return usageTimeData.value.map((item: any) => {
+    return {
+      time: item.name,
+      count: item.values[0]?.value || 0,
+      percentage: `${item.values[0]?.value || 0}%`
+    }
+  })
+})
+
+defineExpose({
+  handleDateChange
+})
+</script>
+<style scoped lang="scss">
+@import '/@/views/count/styles/common.scss';
+
+svg {
+  vertical-align: middle;
+  margin: 0 0 0 12px;
+}
+
+.chart-container {
+  margin: 0 auto;
+  max-width: 1360px;
+}
+</style>

src/views/count/engagement/pages/index.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="layout-padding">
+    <div class="engagement-time">
+      <el-row :gutter="12" style="padding: 0 12px 12px; row-gap: 12px;">
+        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
+          <SelectForm :type="type" :form="form" :title="'访问页面'" />
+        </el-col>
+      </el-row>
+      <el-row :gutter="12" style="padding: 0 12px 12px; row-gap: 12px;">
+        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
+          <View :type="type" :form="form" ref="viewRef" />
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" name="engagementTime" setup>
+import { reactive } from 'vue'
+import View from './View.vue';
+import SelectForm from '../components/SelectForm.vue';
+import { formatDate } from '/@/utils/formatTime';
+
+const type = ref('daterange');
+
+const form = reactive({
+  dateArray: [new Date().getTime() - 1000 * 60 * 60 * 24 * 7, new Date().getTime()],
+  date: new Date().getTime(),
+  selectedDates: [] as string[], // 存储多个选中的日期
+  timeCompare: 'time1',
+  channel: 'all',
+  version: 'all'
+})
+
+const viewRef = ref<InstanceType<typeof View>>();
+
+watch(form, (newVal) => {
+  console.log([`${formatDate(new Date(newVal.dateArray[0]), 'YYYY-mm-dd')} - ${formatDate(new Date(newVal.dateArray[1]), 'YYYY-mm-dd')}`]);
+  nextTick(() => {
+    viewRef.value?.handleDateChange([`${formatDate(new Date(newVal.dateArray[0]), 'YYYY-mm-dd')} - ${formatDate(new Date(newVal.dateArray[1]), 'YYYY-mm-dd')}`]);
+  })
+}, { deep: true, immediate: true })
+
+onMounted(() => {
+  nextTick(() => {
+    viewRef.value?.handleDateChange([`${formatDate(new Date(form.dateArray[0]), 'YYYY-mm-dd')} - ${formatDate(new Date(form.dateArray[1]), 'YYYY-mm-dd')}`]);
+  })
+})
+
+</script>
+<style scoped lang="scss">
+@import '/@/views/count/styles/common.scss';
+
+svg {
+  vertical-align: middle;
+  margin: 0 0 0 12px;
+}
+
+.engagement-time {
+
+}
+
+</style>

src/views/count/engagement/time/OneDay.vue

@@ -0,0 +1,133 @@
+<template>
+  <el-card shadow="none" style="padding: 10px 14px;">
+    <div class="trend-container">
+      <div class="card-title">
+        日使用时长分布<el-tooltip class="box-item" effect="light" placement="right-start">
+          <template #content>
+            <div style="width: 300px;">
+              您可以查看用户在任意1天内日使用时长的分布情况，同时可以对日使用时长的数据进行版本、渠道、分群的交叉筛选。<br />
+              <span style="color: rgba(22, 122, 240, 1);">日使用时长：</span>（用户）一天内使用应用的时长
+            </div>
+          </template>
+          <span style=" vertical-align: middle; margin: 0 0 0 8px;">
+            <Svg name="export"></Svg>
+          </span>
+        </el-tooltip>
+      </div>
+      <FormEcharts v-if="type === 'date'" @dateChange="handleDateChange" :averageValue="averageValue" :type="type" :form="form" />
+      <div class="chart-container">
+        <BarChart :data="usageTimeData" :is-multi-series="true" :series-names="seriesNames" title="多系列对比柱状图"
+          style="height: 300px;" />
+      </div>
+      <el-divider style="margin: 30px 0; background: rgba(230, 230, 230, 1);" />
+      <ExportToCSV :data="formatData" :columns="columns" :fileName="'使用时长数据'" />
+    </div>
+  </el-card>
+</template>
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import BarChart from '/@/views/count/components/BarChart.vue';
+import ExportToCSV from '/@/views/count/components/ExportToCSV.vue';
+import FormEcharts from '../components/FormEcharts.vue';
+import Svg from '/@/components/Svg.vue';
+
+const props = defineProps({
+  type: {
+    type: String,
+    default: 'date'
+  },
+  form: {
+    type: Object,
+    default: () => ({})
+  }
+})
+
+const averageValue = ref({
+  time: '平均日使用时长',
+  value: '00:01:17'
+})
+
+// 多系列数据对比
+const usageTimeData = ref([
+  {
+    name: '1秒-3秒',
+    values: []
+  },
+  {
+    name: '4秒-10秒',
+    values: []
+  },
+  {
+    name: '11秒-30秒',
+    values: []
+  },
+  {
+    name: '31秒-1分',
+    values: []
+  },
+  {
+    name: '1分-3分',
+    values: []
+  },
+  {
+    name: '3分-10分',
+    values: []
+  }
+])
+
+const seriesNames = ref<string[]>([]);
+
+const handleDateChange = (val: string[]) => {
+  // 强制触发响应式更新
+  seriesNames.value = [...val];
+
+  // 创建新的数据对象以确保响应式更新
+  const newData = usageTimeData.value.map((item: any) => ({
+    ...item,
+    values: val.map((date: string) => {
+      const value = Math.floor(Math.random() * 100);
+      return {
+        value: value,
+        percentage: `${value}%`
+      }
+    })
+  }));
+
+  console.log(newData);
+
+  usageTimeData.value = newData;
+}
+
+
+// 定义表格列配置
+const columns = [
+  { prop: 'time', label: '时长' },
+  { prop: 'count', label: '启动次数' },
+  { prop: 'percentage', label: '启动次数占比' }
+];
+
+const formatData = computed(() => {
+  console.log(`formatData: `);
+  console.log(usageTimeData.value);
+  return usageTimeData.value.map((item: any) => {
+    return {
+      time: item.name,
+      count: item.values[0]?.value || 0,
+      percentage: `${item.values[0]?.value || 0}%`
+    }
+  })
+})
+</script>
+<style scoped lang="scss">
+@import '/@/views/count/styles/common.scss';
+
+svg {
+  vertical-align: middle;
+  margin: 0 0 0 12px;
+}
+
+.chart-container {
+  margin: 0 auto;
+  max-width: 1360px;
+}
+</style>

src/views/count/engagement/time/Single.vue

@@ -0,0 +1,132 @@
+<template>
+  <el-card shadow="none" style="padding: 10px 14px;">
+    <div class="trend-container">
+      <div class="card-title">
+        单次使用时长分布<el-tooltip class="box-item" effect="light" placement="right-start">
+          <template #content>
+            <div style="width: 300px;">
+              您可以查看用户在任意1天内单次使用时长的分布情况，同时可以对单次使用时长的数据进行版本、渠道、分群的交叉筛选。<br />
+              <span style="color: rgba(22, 122, 240, 1);">单次使用时长：</span>一次启动的使用时长
+            </div>
+          </template>
+          <span style=" vertical-align: middle; margin: 0 0 0 8px;">
+            <Svg name="export"></Svg>
+          </span>
+        </el-tooltip>
+      </div>
+      <FormEcharts v-if="type === 'date'" @dateChange="handleDateChange" :averageValue="averageValue" :type="type" :form="form" />
+      <div class="chart-container">
+        <BarChart :data="usageTimeData" :is-multi-series="true" :series-names="seriesNames" title="多系列对比柱状图"
+          style="height: 300px;" />
+      </div>
+      <el-divider style="margin: 30px 0; background: rgba(230, 230, 230, 1);" />
+      <ExportToCSV :data="formatData" :columns="columns" :fileName="'使用时长数据'" />
+    </div>
+  </el-card>
+</template>
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import BarChart from '/@/views/count/components/BarChart.vue';
+import ExportToCSV from '/@/views/count/components/ExportToCSV.vue';
+import FormEcharts from '../components/FormEcharts.vue';
+import Svg from '/@/components/Svg.vue';
+
+const props = defineProps({
+  type: {
+    type: String,
+    default: 'date'
+  },
+  form: {
+    type: Object,
+    default: () => ({})
+  }
+})
+
+const averageValue = ref({
+  time: '平均单次使用时长',
+  value: '00:01:17'
+})
+
+// 多系列数据对比
+const usageTimeData = ref([
+  {
+    name: '1秒-3秒',
+    values: []
+  },
+  {
+    name: '4秒-10秒',
+    values: []
+  },
+  {
+    name: '11秒-30秒',
+    values: []
+  },
+  {
+    name: '31秒-1分',
+    values: []
+  },
+  {
+    name: '1分-3分',
+    values: []
+  },
+  {
+    name: '3分-10分',
+    values: []
+  }
+])
+
+const seriesNames = ref<string[]>([]);
+
+const handleDateChange = (val: string[]) => {
+  // 强制触发响应式更新
+  seriesNames.value = [...val];
+
+  // 创建新的数据对象以确保响应式更新
+  const newData = usageTimeData.value.map((item: any) => ({
+    ...item,
+    values: val.map((date: string) => {
+      const value = Math.floor(Math.random() * 100);
+      return {
+        value: value,
+        percentage: `${value}%`
+      }
+    })
+  }));
+
+  console.log(newData);
+
+  usageTimeData.value = newData;
+}
+
+// 定义表格列配置
+const columns = [
+  { prop: 'time', label: '时长' },
+  { prop: 'count', label: '启动次数' },
+  { prop: 'percentage', label: '启动次数占比' }
+];
+
+const formatData = computed(() => {
+  console.log(`formatData: `);
+  console.log(usageTimeData.value);
+  return usageTimeData.value.map((item: any) => {
+    return {
+      time: item.name,
+      count: item.values[0]?.value || 0,
+      percentage: `${item.values[0]?.value || 0}%`
+    }
+  })
+})
+</script>
+<style scoped lang="scss">
+@import '/@/views/count/styles/common.scss';
+
+svg {
+  vertical-align: middle;
+  margin: 0 0 0 12px;
+}
+
+.chart-container {
+  margin: 0 auto;
+  max-width: 1360px;
+}
+</style>

src/views/count/engagement/time/index.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="layout-padding">
+    <div class="engagement-time">
+      <el-row :gutter="12" style="padding: 0 12px 12px; row-gap: 12px;">
+        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
+          <SelectForm :type="type" :form="form" :title="'使用时长'" />
+        </el-col>
+      </el-row>
+      <el-row :gutter="12" style="padding: 0 12px 12px; row-gap: 12px;">
+        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
+          <Single :type="type" :form="form" />
+        </el-col>
+      </el-row>
+      <el-row :gutter="12" style="padding: 0 12px 12px; row-gap: 12px;">
+        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
+          <OneDay :type="type" :form="form" />
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" name="engagementTime" setup>
+import { reactive } from 'vue'
+import OneDay from './OneDay.vue';
+import Single from './Single.vue';
+import SelectForm from '../components/SelectForm.vue';
+
+const type = ref('date');
+
+const form = reactive({
+  dateArray: [new Date().getTime() - 1000 * 60 * 60 * 24 * 7, new Date().getTime()],
+  date: new Date().getTime(),
+  selectedDates: [] as string[], // 存储多个选中的日期
+  timeCompare: 'time1',
+  channel: 'all',
+  version: 'all'
+})
+
+</script>
+<style scoped lang="scss">
+@import '/@/views/count/styles/common.scss';
+
+svg {
+  vertical-align: middle;
+  margin: 0 0 0 12px;
+}
+
+.engagement-time {
+
+}
+
+</style>

src/views/count/churn/behavior/styles/common.scss → src/views/count/styles/common.scss

@@ -53,11 +53,18 @@
 
 .card-title {
   line-height: 19px;
-  font-weight: 500;
   font-size: 16px;
   padding-left: 12px;
   position: relative;
   margin-bottom: 23px;
+  font-weight: 500;
+  font-family: Source Han Sans SC;
+
+  svg {
+    // line-height: 19px;
+    // height: 19px;
+    // vertical-align: middle;
+  }
 
   &::before {
     content: '';
@@ -69,4 +76,42 @@
     height: 14px;
     background: rgba(22, 122, 240, 1);
   }
-} 
+
+  &.no-padding {
+    padding-left: 0;
+
+    &::before {
+      display: none;
+    }
+  }
+} 
+.table-container {
+  position: relative;
+  .btn-toggle-table {
+    font-weight: 500;
+    font-size: 14px;
+    line-height: 20px;
+    color: rgba(22, 122, 240, 1);
+    margin-bottom: 20px;
+    cursor: pointer;
+    svg {
+      transition: transform 0.3s ease-in-out;
+    }
+    &.hide-table svg {
+      transform: rotate(-180deg);
+    }
+  }
+  .export-button {
+    position: absolute;
+    right: 0;
+    top: 0;
+    color: rgba(22, 122, 240, 1);
+    font-weight: 500;
+    font-size: 14px;
+    cursor: pointer;
+    svg {
+      margin-left: 8px;
+      margin-right: 0;
+    }
+  }
+}