# influxDB-cleint
**Repository Path**: Gulu_Lv/influx-db-cleint
## Basic Information
- **Project Name**: influxDB-cleint
- **Description**: InfluxDB Client 是一款基于 Electron、Vue.js 和 Node.js 构建的跨平台桌面应用程序，为管理和查询 InfluxDB 数据库提供了直观的界面。它简化了数据库操作、数据可视化和查询管理，使开发人员和数据分析师更容易处理时间序列数据。
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 2
- **Forks**: 1
- **Created**: 2025-09-10
- **Last Updated**: 2026-03-24
## Categories & Tags
**Categories**: dbmanager
**Tags**: Vue, Electron, influxdb
## README
## 📖 概述
InfluxDB Client 是一款基于 Electron、Vue.js 和 Node.js 构建的跨平台桌面应用程序，为管理和查询 InfluxDB 数据库提供了直观的界面。它简化了数据库操作、数据可视化和查询管理，使开发人员和数据分析师更容易处理时间序列数据。
## ✨ 功能特性
### 核心功能
- 🔌 **连接管理** - 管理多个 InfluxDB 连接，支持 InfluxDB 1.x（用户名/密码）和 2.x（Token）认证
- 📊 **数据库浏览器** - 浏览数据库、测量和数据，支持高级筛选和时间范围选择
- ✍️ **查询编辑器** - 编写和执行 InfluxQL 查询，支持语法高亮和查询历史
- 📈 **数据可视化** - 从查询结果创建交互式图表（折线图、柱状图、面积图、散点图）
- 🗄️ **数据库管理** - 创建和删除数据库及测量
### 数据操作
- 💾 **数据导出** - 以 CSV 或 JSON 格式导出查询结果
- 🕐 **时间范围筛选** - 使用日期/时间选择器按自定义时间范围筛选数据
- 🎛️ **列显示控制** - 自定义数据表格中显示哪些列，支持列搜索和批量选择
- 🔢 **纳秒精度显示** - 表格和图表完整显示纳秒级别的时间戳（精确到 9 位小数）
- 📄 **分页支持** - 支持自定义每页显示数量（10/20/50/100/200/500/1000）
### 界面与交互
- 🔍 **数据库搜索** - 快速搜索和筛选数据库列表，支持高亮匹配
- 🔄 **数据库排序** - 支持按名称（A-Z/Z-A）或按数据时间（最新/最早）排序
- 🌍 **国际化** - 完全支持中英文双语切换
- 🎨 **现代化界面** - 使用 Element UI 构建的简洁响应式界面
- 🖱️ **右键菜单** - 数据库右键菜单支持快速删除操作
### 性能优化
- ⚡ **连接池** - Axios 实例池化，支持多连接高效管理
- 💾 **查询缓存** - LRU 缓存机制，5 分钟 TTL，最多缓存 50 条查询结果
- 🎯 **数据采样** - 支持 LTTB 算法对大数据集进行智能采样
- 📊 **虚拟滚动准备** - 性能工具类已实现，支持大数据集渲染优化
- 📝 **结构化日志** - 完整的日志系统，支持性能监控和调试
## 🖼️ 应用截图
### 连接管理与数据浏览
连接管理器 - 管理多个 InfluxDB 连接，支持连接测试
### 数据库浏览器
数据库浏览器 - 浏览数据库、查看测量数据，支持纳秒精度时间显示、数据排序和导出
### 数据可视化
数据可视化 - 创建交互式图表，支持折线图、柱状图、面积图、散点图
## 🎯 主要功能界面
| 界面 | 功能说明 |
|------|---------|
| **连接管理器** | 创建、编辑、删除和测试 InfluxDB 连接 |
| **数据库浏览器** | 浏览数据库、测量，查看和导出数据 |
| **查询编辑器** | 执行 InfluxQL 查询，查看历史记录 |
| **数据可视化** | 创建交互式图表，支持多种图表类型 |
| **数据管理** | 额外的数据管理功能 |
| **设置** | 语言切换和应用配置 |
| **关于** | 应用信息和技术栈介绍 |
## 🛠️ 技术栈
- **前端框架：** Vue.js 2.6 + Vue Router + Vuex
- **UI 组件库：** Element UI
- **桌面框架：** Electron 25
- **运行时：** Node.js 18+
- **图表库：** ECharts 5.4
- **代码编辑器：** CodeMirror 5.65
- **InfluxDB 客户端：** @influxdata/influxdb-client 1.33
- **HTTP 客户端：** Axios 0.27
- **CSV 处理：** PapaParse 5.4
- **构建工具：** Vue CLI + Electron Builder
- **国际化：** Vue I18n
## 📦 安装
### 环境要求
- Node.js 18 或更高版本
- npm 或 yarn 包管理器
- InfluxDB 1.x 或 2.x 服务器
### 下载发布版本
从 [Releases](https://gitee.com/Gulu_Lv/influx-db-cleint/releases) 页面下载适合您平台的最新版本。
### 从源码构建
```bash
# 克隆仓库
git clone https://gitee.com/Gulu_Lv/influx-db-cleint.git
cd influx-db-cleint
# 安装依赖
npm install
# 开发模式运行
npm run electron:serve
# 构建生产版本
npm run electron:build
```
## 📖 使用说明
### 1. 连接到 InfluxDB
1. 启动应用程序
2. 在连接管理器中点击"新建连接"
3. 输入 InfluxDB 连接详情：
- **名称：** 连接的友好名称
- **URL：** InfluxDB 服务器地址（例如：`http://localhost:8086`）
- **查询类型：** 选择 InfluxQL（1.x）或 Flux（2.x）
- **用户名/密码：** 用于 InfluxDB 1.x 认证
- **Token：** 用于 InfluxDB 2.x 认证
4. 点击"测试连接"进行验证
5. 点击"保存"保存连接
6. 点击"连接"按钮激活连接
### 2. 浏览数据库
1. 从侧边栏进入"数据库浏览器"
2. 左侧面板显示所有数据库：
- 使用搜索框快速查找数据库
- 使用排序下拉菜单按名称或时间排序
- 点击"+"按钮创建新数据库
- 右键点击数据库可删除
3. 选择数据库后，右侧显示 Measurements 列表
4. 选择 Measurement 查看数据：
- 数据以表格形式展示，支持分页
- 时间列显示纳秒精度（格式：`YYYY-MM-DD HH:mm:ss.nnnnnnnnn`）
- 点击"列设置"按钮自定义显示的列
- 使用排序功能对列进行排序
5. 时间筛选：
- 设置开始时间和结束时间
- 调整数据限制（Limit）
- 点击"应用筛选"更新数据
6. 导出数据：
- 点击"导出数据"按钮
- 选择 CSV 或 JSON 格式
### 3. 执行查询
1. 从侧边栏进入"查询编辑器"
2. 在代码编辑器中编写 InfluxQL 查询
3. 点击"执行"按钮运行查询
4. 结果显示在下方的表格中
5. 功能按钮：
- **查询历史：** 查看之前执行的查询
- **清空：** 清空编辑器内容
- **导出：** 导出查询结果
- **可视化：** 将结果发送到可视化页面
### 4. 创建可视化
1. 执行查询后，点击"可视化"按钮，或直接从侧边栏进入"数据可视化"
2. 配置图表：
- **图表类型：** 折线图、柱状图、面积图、散点图
- **图表标题：** 自定义标题
- **X 轴：** 选择 X 轴数据列（通常选择 time 列）
- **Y 轴：** 选择 Y 轴数据列（数值类型）
- **分组：** 可选，按某个字段分组显示多条线
3. 图表交互：
- 鼠标悬停查看详细数据（时间显示纳秒精度）
- 使用数据缩放工具放大/缩小
- 拖动查看不同时间段
4. 导出图表：
- 点击"导出图片"按钮
- 保存为 PNG 格式
### 5. 管理数据库
#### 创建数据库
1. 在数据库浏览器左侧面板点击"+"按钮
2. 输入数据库名称（只允许字母、数字和下划线）
3. 点击"确定"创建
#### 删除数据库
1. 在数据库列表中右键点击要删除的数据库
2. 选择"删除数据库"
3. 确认删除操作
#### 删除 Measurement
1. 选择数据库后，在右侧 Measurement 下拉框中选择要删除的 Measurement
2. 点击"删除 Measurement"按钮
3. 确认删除操作
### 6. 列显示设置
1. 在数据表格上方点击"列设置"按钮
2. 在弹出的对话框中：
- 使用搜索框快速查找列
- 勾选/取消勾选要显示/隐藏的列
- 使用"全选"/"全不选"按钮批量操作
- 点击"重置"恢复默认设置
3. 点击"确定"应用设置
### 7. 应用设置
1. 从侧边栏进入"设置"
2. 选择界面语言：
- 中文（简体）
- English
3. 设置会自动保存
## 💻 开发
### 项目结构
```
influxdb-client/
├── src/
│ ├── background.js # Electron 主进程
│ ├── App.vue # 根 Vue 组件
│ ├── main.js # Vue 应用入口
│ ├── router/ # Vue Router 配置
│ │ └── index.js
│ ├── store/ # Vuex 状态管理
│ │ └── index.js
│ ├── views/ # 页面组件
│ │ ├── ConnectionManager.vue # 连接管理器
│ │ ├── DatabaseExplorer.vue # 数据库浏览器
│ │ ├── QueryEditor.vue # 查询编辑器
│ │ ├── DataVisualization.vue # 数据可视化
│ │ ├── DataManagement.vue # 数据管理
│ │ ├── Settings.vue # 设置
│ │ └── About.vue # 关于
│ ├── components/ # 可复用组件
│ │ └── Sidebar.vue # 侧边栏导航
│ ├── utils/ # 工具函数
│ │ ├── influxdb.js # InfluxDB 客户端服务
│ │ ├── storage.js # 本地存储服务
│ │ ├── logger.js # 日志系统
│ │ └── performance.js # 性能优化工具
│ ├── i18n/ # 国际化
│ │ └── index.js # 中英文翻译
│ ├── mixins/ # Vue 混入
│ │ └── i18nMixin.js
│ └── assets/ # 静态资源
│ └── icon.jpg
├── public/ # 公共资源
│ └── icon.jpg
├── package.json # 项目配置
├── vue.config.js # Vue CLI 配置
└── babel.config.js # Babel 配置
```
### 可用脚本
```bash
# 开发
npm run serve # 运行 Web 版本（用于开发调试）
npm run electron:serve # 运行桌面版本（支持热重载）
# 生产构建
npm run build # 构建 Web 版本
npm run electron:build # 构建桌面版本（当前平台）
# 其他
npm run postinstall # 安装 Electron 依赖
npm run check-icons # 检查图标文件
```
### 构建说明
Electron Builder 会根据当前平台自动构建：
- **Windows:** 生成 NSIS 安装程序
- **Linux:** 生成 AppImage
- **macOS:** 需要在 macOS 系统上构建
构建输出目录：`dist_electron/`
### 环境设置
1. 克隆仓库
2. 安装依赖：`npm install`
3. 启动开发服务器：`npm run electron:serve`
4. 进行开发修改
5. 测试功能
6. 构建生产版本：`npm run electron:build`
## 🎯 核心功能说明
### 查询缓存机制
- 使用 LRU（Least Recently Used）算法
- 缓存容量：50 条查询结果
- 缓存过期时间：5 分钟
- 自动清理：每 60 秒清理一次过期缓存
- 缓存键：基于连接 ID + 查询语句 + 数据库名
### 时间精度处理
系统支持多种时间格式，并统一显示为纳秒精度：
| 输入格式 | 示例 | 输出显示 |
|---------|------|---------|
| RFC3339 字符串 | `2024-10-22T15:30:45.123456789Z` | `2024-10-22 15:30:45.123456789` |
| 纳秒时间戳（19位） | `1729608645123456789` | `2024-10-22 15:30:45.123456789` |
| 微秒时间戳（16位） | `1729608645123456` | `2024-10-22 15:30:45.123456000` |
| 毫秒时间戳（13位） | `1729608645123` | `2024-10-22 15:30:45.123000000` |
### 数据排序功能
数据库列表支持 4 种排序方式：
1. **名称升序（A-Z）** - 按字母顺序排序
2. **名称降序（Z-A）** - 按字母倒序排序
3. **最新数据（新到旧）** - 按数据库中最新数据的时间排序
4. **最早数据（旧到新）** - 按数据库中最早数据的时间排序
排序功能会自动查询每个数据库的元数据，首次加载可能需要一些时间。
### 连接管理
- 支持多连接保存，使用 LocalStorage 持久化
- 支持 InfluxDB 1.x（InfluxQL + 用户名密码认证）
- 支持 InfluxDB 2.x（Flux + Token 认证）
- 连接测试功能，保存前验证连接有效性
- 连接池管理，每个连接使用独立的 Axios 实例
## 🔧 常见问题
### 连接失败
**问题：** 无法连接到 InfluxDB 服务器
**解决方案：**
1. 检查 InfluxDB 服务是否正在运行
2. 确认 URL 地址正确（包括协议 `http://` 或 `https://`）
3. 检查防火墙设置
4. 验证用户名密码或 Token 是否正确
5. 确认选择了正确的查询类型（InfluxQL 或 Flux）
### 查询超时
**问题：** 查询执行时间过长或超时
**解决方案：**
1. 减少查询的数据量（使用 LIMIT）
2. 缩小时间范围筛选
3. 检查网络连接
4. 考虑在服务器端优化数据索引
### 时间显示不正确
**问题：** 时间列显示格式不对或时区不对
**解决方案：**
1. 时间会自动转换为本地时区显示
2. 检查系统时区设置
3. InfluxDB 默认使用 UTC 时间存储
### 数据导出失败
**问题：** CSV 或 JSON 导出没有响应
**解决方案：**
1. 检查是否有数据可导出
2. 确认浏览器允许文件下载
3. 检查磁盘空间是否充足
## 🤝 贡献
欢迎贡献！请随时提交 Pull Request。
贡献流程：
1. Fork 本仓库
2. 创建您的功能分支 (`git checkout -b feature/AmazingFeature`)
3. 提交您的更改 (`git commit -m 'Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 打开一个 Pull Request
## 📄 许可证
本项目基于 MIT 许可证开源 - 查看 [LICENSE](LICENSE) 文件了解详情。
## 🔗 相关链接
- **项目仓库：** [Gitee - influx-db-cleint](https://gitee.com/Gulu_Lv/influx-db-cleint)
- **InfluxDB 官方文档：** [InfluxDB Documentation](https://docs.influxdata.com/influxdb/)
- **问题反馈：** [Issues](https://gitee.com/Gulu_Lv/influx-db-cleint/issues)
- **InfluxDB GitHub：** [influxdata/influxdb](https://github.com/influxdata/influxdb)
© 2025 GuLu. All rights reserved.
为时间序列数据社区用 ❤️ 打造
