n20-common-lib 3.1.4 → 3.1.6

package/src/components/Pivot//344/275/277/347/224/250/350/257/264/346/230/216.md

@@ -0,0 +1,240 @@
+# Pivot 数据透视组件使用说明
+
+## 组件概述
+
+Pivot 是一个数据透视分析组件，以 Dialog 弹窗形式呈现。支持对表格数据进行多维度聚合分析，提供分组统计和交叉统计两种模式，可视化方式包括图表视图和表格视图。
+
+## 基础用法
+
+```vue
+<template>
+  <div>
+    <el-button @click="showPivot = true">打开数据透视</el-button>
+    <Pivot
+      :visible.sync="showPivot"
+      :data="tableData"
+      :columns="columns"
+      :row-fields="rowFields"
+      :col-fields="colFields"
+      :value-fields="valueFields"
+      :chart-type="chartType"
+      @refresh="handleRefresh"
+      @export="handleExport"
+      @add-to-home="handleAddToHome"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      showPivot: false,
+      // 数据源
+      tableData: [
+        { region: '华东', product: '产品A', amount: 10000, count: 50 },
+        { region: '华东', product: '产品B', amount: 15000, count: 60 },
+        { region: '华南', product: '产品A', amount: 8000, count: 40 },
+        { region: '华南', product: '产品B', amount: 12000, count: 55 },
+        // ...更多数据
+      ],
+      // 列定义
+      columns: [
+        { key: 'region', label: '地区', type: 'string' },
+        { key: 'product', label: '产品', type: 'string' },
+        { key: 'amount', label: '金额', type: 'number' },
+        { key: 'count', label: '数量', type: 'number' }
+      ],
+      // 行维度（分组统计时使用）
+      rowFields: ['region'],
+      // 列维度（交叉统计时使用）
+      colFields: ['region', 'product'],
+      // 计算指标
+      valueFields: ['amount', 'count'],
+      // 图表类型
+      chartType: 'bar'
+    }
+  },
+  methods: {
+    handleRefresh() {
+      console.log('刷新数据')
+    },
+    handleExport(data) {
+      console.log('导出数据', data)
+    },
+    handleAddToHome(report) {
+      console.log('添加到首页', report)
+    }
+  }
+}
+</script>
+```
+
+## Props 参数
+
+| 参数 | 说明 | 类型 | 默认值 | 必填 |
+|------|------|------|--------|------|
+| visible | 控制弹窗显示，支持 .sync 修饰符 | Boolean | false | 是 |
+| data | 数据源，原始表格数据 | Array | [] | 是 |
+| columns | 列定义配置 | Array | [] | 是 |
+| rowFields | 行维度字段（分组统计使用） | Array | [] | 否 |
+| colFields | 列维度字段（交叉统计使用） | Array | [] | 否 |
+| valueFields | 计算指标字段 | Array | [] | 否 |
+| chartType | 图表类型 | String | 'bar' | 否 |
+| width | 组件宽度 | Number/String | 1360 | 否 |
+| height | 组件高度 | Number/String | 820 | 否 |
+
+### columns 列定义格式
+
+```javascript
+// 维度字段（字符串类型）
+{ key: 'region', label: '地区', type: 'string' }
+
+// 指标字段（数值类型）
+{ key: 'amount', label: '金额', type: 'number' }
+
+// 日期字段（作为维度）
+{ key: 'date', label: '日期', type: 'date' }
+```
+
+> **自动推断**：如果未指定 rowFields/colFields/valueFields，组件会根据 columns 中的 type 自动推断：
+> - `type: 'string' | 'date'` → 作为维度字段
+> - `type: 'number'` → 作为指标字段
+
+### chartType 图表类型
+
+| 值 | 说明 |
+|----|------|
+| 'bar' | 柱状图（默认） |
+| 'line' | 折线图 |
+| 'pie' | 饼图 |
+| 'area' | 面积图 |
+
+## Events 事件
+
+| 事件名 | 说明 | 回调参数 |
+|--------|------|----------|
+| update:visible | 弹窗显示状态变化 | (visible: Boolean) |
+| refresh | 点击刷新按钮 | - |
+| export | 导出数据 | (data: Array) |
+| add-to-home | 添加到首页 | (report: Object) |
+
+## 功能说明
+
+### 1. 统计模式
+
+#### 分组统计（默认）
+- 按选定的维度字段进行分组
+- 对每个分组内的指标进行聚合计算
+- 支持图表视图和表格视图
+
+#### 交叉统计
+- 按行维度和列维度进行交叉分析
+- 仅支持表格视图
+- 切换到交叉统计时会自动切换为表格视图
+
+### 2. 聚合方式
+
+每个指标可独立设置聚合类型：
+
+| 类型 | 说明 |
+|------|------|
+| sum | 求和（默认） |
+| count | 计数 |
+| avg | 平均值 |
+| max | 最大值 |
+| min | 最小值 |
+
+### 3. 多报表管理
+
+- **新建报表**：点击左侧边栏顶部的 "+" 按钮
+- **重命名**：悬停报表项 → 点击更多 → 选择重命名
+- **删除**：悬停报表项 → 点击更多 → 选择删除
+- **切换报表**：点击报表项即可切换
+
+> 报表配置会自动保存到 localStorage，刷新页面后保留。
+
+### 4. 数据导出
+
+点击工具栏的"更多"按钮 → 选择"导出"，可将当前透视结果导出为 CSV 文件。
+
+### 5. 分页功能
+
+表格视图支持分页，可切换每页显示条数（10/20/50/100），支持跳转指定页码。
+
+## 界面布局
+
+```
+┌────────────────────────────────────────────────────────────────┐
+│                         数据透视分析中心                         │
+├──────────────┬─────────────────────────────────┬──────────────┤
+│  我的报表清单 │          主内容区域              │   维度配置   │
+│   (280px)    │                                  │   (280px)    │
+│              │  ┌─────────────────────────────┐ │              │
+│  + 新建报表   │  │ 报表标题 | 添加到首页        │ │  报表标题    │
+│              │  │ 计算耗时 | 数据条数          │ │  统计类型    │
+│  ● 报表1     │  ├─────────────────────────────┤ │  展示形式    │
+│  ○ 报表2     │  │                             │ │  分组维度    │
+│  ○ 报表3     │  │    图表视图 / 表格视图       │ │  计算指标    │
+│              │  │                             │ │              │
+│              │  └─────────────────────────────┘ │              │
+└──────────────┴─────────────────────────────────┴──────────────┘
+```
+
+## 使用示例
+
+### 示例1：基础分组统计
+
+```vue
+<Pivot
+  :visible.sync="showPivot"
+  :data="salesData"
+  :columns="[
+    { key: 'region', label: '地区', type: 'string' },
+    { key: 'amount', label: '销售额', type: 'number' }
+  ]"
+/>
+```
+
+### 示例2：交叉统计分析
+
+```vue
+<Pivot
+  :visible.sync="showPivot"
+  :data="salesData"
+  :columns="[
+    { key: 'region', label: '地区', type: 'string' },
+    { key: 'product', label: '产品', type: 'string' },
+    { key: 'amount', label: '销售额', type: 'number' }
+  ]"
+  :col-fields="['region', 'product']"
+/>
+```
+
+### 示例3：自定义图表类型
+
+```vue
+<Pivot
+  :visible.sync="showPivot"
+  :data="salesData"
+  :columns="columns"
+  chart-type="pie"
+/>
+```
+
+## 注意事项
+
+1. **数据量限制**：当前版本未实现虚拟滚动，大数据量（>10000条）时可能存在性能问题
+2. **交叉统计无图表**：交叉统计模式仅支持表格视图，不渲染图表
+3. **配置持久化**：报表配置保存在 localStorage，清除浏览器缓存会丢失
+4. **列定义必填**：columns 参数必须正确配置，否则无法正确识别维度和指标字段
+
+## 依赖组件
+
+| 组件 | 说明 |
+|------|------|
+| Dialog | 弹窗容器 |
+| ViewToggle | 视图切换控件 |
+| Empty | 空状态展示 |
+| echarts | 图表渲染（按需加载） |
+| xe-utils | 数据聚合计算 |

package/src/components/Pivot//350/257/264/346/230/216/346/226/207/346/241/243.md

@@ -0,0 +1,171 @@
+# 说明文档
+
+## 项目概述
+
+**项目名称**: Vue2 数据透视组件开发
+**开发框架**: Vue 2.6.11
+
+## 项目规划
+
+### 开发目标
+基于当前工程设计开发一个功能完善的Vue2数据透视组件，实现以下核心功能：
+1. 将表格数据转换为可交互的透视表，支持多维度数据透视
+2. 支持多种图表类型（柱状图、折线图、饼图等）的切换展示
+3. 提供条件聚合功能(计算指标)，允许用户自定义聚合方式（求和、平均值、计数等）
+5. 提供详细的API文档说明数据格式要求和配置参数
+
+## 实施方案
+
+### 技术栈选择
+- **核心框架**: Vue 2.6.11
+- **图表库**: ECharts 5.3.3（项目已有依赖）
+- **表格组件**: VXE-Table 3.20.10（项目已有依赖）
+- **UI组件**: Element UI 2.15.6（项目已有依赖）
+- **工具库**: XE-Utils 4.0.2（项目已有依赖）
+
+### 核心功能模块设计
+
+#### 1. 透视表模块
+- **功能描述**: 将原始表格数据按维度进行透视转换
+- **技术实现**:
+  - 多维度分组算法
+  - 动态列生成
+  - 实时数据计算
+  - CSV数据导出
+
+#### 2. 图表展示模块
+- **功能描述**: 集成ECharts实现多种图表类型展示
+- **支持图表类型**:
+  - 柱状图（bar）
+  - 折线图（line）
+  - 饼图（pie）
+  - 面积图（area）
+- **技术实现**:
+  - ECharts配置封装
+  - 动态类型切换
+  - 响应式适配
+  - 交互式数据提示
+
+#### 3. 聚合配置模块
+- **功能描述**: 提供可视化的聚合配置界面
+- **支持的聚合方式**:
+  - 求和（sum）
+  - 平均值（avg）
+  - 计数（count）
+  - 最大值（max）
+  - 最小值（min）
+- **筛选条件**:
+  - 支持多种操作符（==, !=, >, <, >=, <=, includes）
+  - 多条件组合筛选
+  - 实时更新结果
+
+
+## 进度记录
+
+
+## 使用指南
+
+
+### 组件Props说明
+
+| 属性 | 类型 | 必填 | 默认值 | 说明 |
+|-----|------|-----|--------|------|
+| visible | Boolean | 否 | false | 控制弹窗显示 |
+| data | Array | 是 | [] | 原始表格数据（对象数组） |
+| dataSource | Array | 否 | null | 数据源（向后兼容，优先使用data） |
+| columns | Array | 是 | [] | 原始表格列配置（对象数组） |
+| rowFields | Array | 否 | [] | 行维度字段数组（分组统计模式） |
+| colFields | Array | 否 | [] | 列维度字段数组（交叉统计模式） |
+| valueFields | Array | 否 | [] | 计算指标数组（数值型） |
+| chartType | String | 否 | 'bar' | 图表类型：bar/line/pie/horizontalBar |
+
+### 事件说明
+
+| 事件名 | 参数 | 说明 |
+|-------|------|------|
+| update:visible | Boolean | 弹窗显示状态变化 |
+| refresh | - | 刷新数据 |
+| export | Array | 导出数据 |
+| add-to-home | Object | 添加到首页 |
+| close | - | 关闭弹窗 |
+
+## 核心功能特性
+
+### 📊 透视表功能
+
+
+### 📈 图表展示
+
+### 🔢 条件聚合
+
+
+### 🔍 筛选功能
+
+## 技术实现要点
+
+### 1. 数据透视算法
+分组统计，根据展现形式，分组维度，计算指标进行透视表数据转换：
+交叉统计，根据行维度，列维度，计算指标进行透视表数据转换：
+
+
+### 2. 图表集成
+封装ECharts配置，支持动态类型切换：
+- 根据图表展示形式生成不同配置
+- 提取透视表数据转换为图表数据
+
+### 3. 计算指标
+实现多种计算指标的计算逻辑：
+- 根据计算指标进行数据计算
+- 按统计类型进行数据转换
+- 应用计算指标的计算结果
+- 支持多字段同时计算
+
+### 4. 性能优化
+- 使用防抖处理窗口调整事件
+- 按需更新图表和表格
+- 组件销毁时清理资源
+- 避免不必要的重复计算
+
+## 项目文件清单
+
+
+
+## 注意事项
+
+1. **数据类型要求**
+   - 聚合字段必须是数值类型
+   - 数据格式必须是对象数组
+   - 确保字段名与配置一致
+
+2. **性能考虑**
+   - 建议单次处理数据不超过10,000条
+   - 避免过多的行/列维度
+
+3. **浏览器兼容**
+   - 支持现代浏览器最新版本
+   - 需要支持ES6语法
+   - 需要Canvas支持
+
+4. **依赖安装**
+   - 确保所有必需依赖已安装
+   - 检查依赖版本兼容性
+   - 使用npm或yarn安装
+
+## 后续优化方向
+
+### 性能优化
+- [ ] 实现虚拟滚动支持大数据量
+- [ ] 使用Web Worker后台计算
+- [ ] 实现数据分页加载
+- [ ] 优化大数据集渲染性能
+
+### 功能扩展
+- [ ] 支持自定义计算指标
+- [ ] 添加更多图表类型（雷达图、散点图等）
+- [ ] 实现数据钻取功能
+- [ ] 增强排序和筛选功能
+- [ ] 支持配置模板保存
+- [ ] 添加数据刷新机制
+
+### 用户体验
+- [ ] 添加快捷操作面板

package/src/components/ProFilterView/index.vue

@@ -213,11 +213,12 @@
 
 <script>
 import advancedQuery from './advancedQuery.vue'
+
+import axios from '../../utils/axios.js'
 import ClAdvancedFilter from '../AdvancedFilter/index.vue'
-import ClInputSearch from '../InputSearch/index.vue'
-import ClDragList from '../DragList/index.vue'
 import ClDialog from '../Dialog/index.vue'
-import axios from '../../utils/axios.js'
+import ClDragList from '../DragList/index.vue'
+import ClInputSearch from '../InputSearch/index.vue'
 
 const VIEW_TYPE = { ADVANCED: '0', BASIC: '1' }
 
@@ -299,13 +300,21 @@ export default {
 
     getInitialSearchValue() {
       const obj = {}
-      // 遍历 filterList，为每个 type 为 slot 且有 value 字段的项初始化值
-      // 注意：跳过无 value 的 slot（如 startDate/endDate 多值绑定），这些由父组件在 slot 内部管理
-      this.filterList.forEach((item) => {
-        if (item.type === 'slot' && item.value) {
-          obj[item.value] = undefined
-        }
-      })
+      // 为 slot 类型筛选项初始化值
+      this.filterList
+        .filter((item) => item.type === 'slot')
+        .forEach((item) => {
+          // 单值绑定
+          if (item.value) {
+            obj[item.value] = undefined
+          }
+          // 多值绑定（slotFields 数组）
+          if (item.slotFields?.length) {
+            item.slotFields.forEach((field) => {
+              obj[field] = undefined
+            })
+          }
+        })
       return obj
     },
     filterObj() {
@@ -411,27 +420,38 @@ export default {
     handleClear() {
       // 收集 required 项的当前值，清空时保留
       const preserved = {}
-      this.filterList.forEach((item) => {
-        if (!item.required) return
-        if (item.type === 'daterange' || item.type === 'datetimerange' || item.type === 'monthrange') {
+      this.filterList
+        .filter((item) => item.required)
+        .forEach((item) => {
+          // 日期范围类型
           if (item.startDate && this.searchValue[item.startDate] !== undefined) {
             preserved[item.startDate] = this.searchValue[item.startDate]
           }
           if (item.endDate && this.searchValue[item.endDate] !== undefined) {
             preserved[item.endDate] = this.searchValue[item.endDate]
           }
-        } else if (item.type === 'numberrange') {
+          // 数字范围类型
           if (item.startValue && this.searchValue[item.startValue] !== undefined) {
             preserved[item.startValue] = this.searchValue[item.startValue]
           }
           if (item.endValue && this.searchValue[item.endValue] !== undefined) {
             preserved[item.endValue] = this.searchValue[item.endValue]
           }
-        } else if (item.value && this.searchValue[item.value] !== undefined) {
-          preserved[item.value] = this.searchValue[item.value]
-        }
-      })
-      this.searchValue = { ...this.getInitialSearchValue, ...preserved }
+          // 普通单值
+          if (item.value && this.searchValue[item.value] !== undefined) {
+            preserved[item.value] = this.searchValue[item.value]
+          }
+          // slot 多值绑定
+          if (item.slotFields?.length) {
+            item.slotFields.forEach((field) => {
+              if (this.searchValue[field] !== undefined) {
+                preserved[field] = this.searchValue[field]
+              }
+            })
+          }
+        })
+
+      this.searchValue = { ...this.initialValue, ...this.getInitialSearchValue, ...preserved }
       // 直接构建 payload，绕过 filterObj 避免 initialValue 重新注入
       this.$emit(
         'filter',

package/src/components/v3/TablePro/index.vue

@@ -396,8 +396,6 @@ import { saveTransform } from '../../ShowColumn/index.vue'
 import OperateBtns from '../../TableProOperateColumn/OperateBtns.vue'
 import axios from '../../../utils/axios'
 
-import { $lc } from '../../../utils/i18n/index.js'
-
 const renderer = {
   name: 'renderer',
   props: {
@@ -612,7 +610,7 @@ export default {
         // 当操作列已通过模板固定渲染时，过滤掉 checkColumns 中的操作列，避免重复
         const cols =
           this.isOperateFixed && this.btnList && this.btnList.length > 0
-            ? this.checkColumns.filter((col) => !(col.static && col.label === $lc('操作')))
+            ? this.checkColumns.filter((col) => !(col.static && col.label === this.$lc('操作')))
             : this.checkColumns
         if (this.isAutoWidth) {
           return this.calcColumnWidth(cols)
@@ -726,7 +724,7 @@ export default {
       // 排除模板已固定渲染的操作列，避免保存重复数据
       const cols =
         this.isOperateFixed && this.btnList && this.btnList.length > 0
-          ? this.checkColumns.filter((col) => !(col.static && col.label === $lc('操作')))
+          ? this.checkColumns.filter((col) => !(col.static && col.label === this.$lc('操作')))
           : this.checkColumns
       const columns = saveTransform(cols, this.labelKey, this.isFilter)
       axios.post(
@@ -1329,7 +1327,7 @@ export default {
 
       const calcColumns = columns.map((column) => {
         // 操作列固定宽度
-        if (column.static && column.label === $lc('操作') && !column.width && !column.minWidth) {
+        if (column.static && column.label === this.$lc('操作') && !column.width && !column.minWidth) {
           column.width = OPERATE_WIDTH
         }
         // 复选框列固定宽度