6ebfcf848d
新增图形界面模块webui，使用Vue 3 + Quasar + TypeScript + Tailwind CSS开发 扩展README文档说明图形界面使用方法 更新.gitignore忽略前端相关文件 添加Python版本配置文件
149 lines
3.0 KiB
Markdown
149 lines
3.0 KiB
Markdown
# EGM Web 界面
|
||
|
||
基于 pywebview 的输电线路绕击跳闸率计算程序图形界面。
|
||
|
||
## 技术栈
|
||
|
||
- **后端**: Python + pywebview
|
||
- **前端**: Vue 3 + Quasar + TypeScript + Tailwind CSS
|
||
- **构建工具**: Vite
|
||
|
||
## 安装步骤
|
||
|
||
### 1. 安装 Python 依赖
|
||
|
||
```bash
|
||
# 在项目根目录
|
||
uv sync
|
||
# 或
|
||
pip install pywebview
|
||
```
|
||
|
||
### 2. 安装前端依赖
|
||
|
||
```bash
|
||
cd webui
|
||
npm install
|
||
```
|
||
|
||
## 运行方式
|
||
|
||
### 开发模式
|
||
|
||
1. 启动前端开发服务器：
|
||
|
||
```bash
|
||
cd webui
|
||
npm run dev
|
||
```
|
||
|
||
2. 在另一个终端启动 pywebview：
|
||
|
||
```bash
|
||
cd ..
|
||
python webview_app.py
|
||
```
|
||
|
||
### 生产模式
|
||
|
||
1. 构建前端：
|
||
|
||
```bash
|
||
cd webui
|
||
npm run build
|
||
```
|
||
|
||
2. 启动 pywebview：
|
||
|
||
```bash
|
||
cd ..
|
||
python webview_app.py
|
||
```
|
||
|
||
## 项目结构
|
||
|
||
```
|
||
webui/
|
||
├── src/
|
||
│ ├── components/
|
||
│ │ └── ParameterForm.vue # 参数表单组件
|
||
│ ├── types/
|
||
│ │ └── index.ts # TypeScript 类型定义
|
||
│ ├── App.vue # 主应用组件
|
||
│ ├── main.ts # 应用入口
|
||
│ └── style.css # 全局样式
|
||
├── package.json # 前端依赖配置
|
||
├── vite.config.ts # Vite 配置
|
||
├── tsconfig.json # TypeScript 配置
|
||
├── tailwind.config.js # Tailwind CSS 配置
|
||
└── index.html # HTML 入口
|
||
```
|
||
|
||
## 功能说明
|
||
|
||
### 参数配置
|
||
|
||
界面提供三个参数分组：
|
||
|
||
1. **基本参数**：
|
||
- 额定电压等级 (kV)
|
||
- 导线弧垂 (m)
|
||
- 地线弧垂 (m)
|
||
- 导线串子绝缘长度 (m)
|
||
- 导线串长 (m)
|
||
- 地线串长 (m)
|
||
- 导、地线挂点垂直距离 (m)
|
||
- 导、地线水平坐标 (m)
|
||
- 地面倾角 (°)
|
||
- 海拔高度 (m)
|
||
- 雷暴日 (d)
|
||
|
||
2. **高级参数**：
|
||
- 地闪密度 (次/(km²·a))
|
||
- 雷电流概率密度曲线系数 a
|
||
- 雷电流概率密度曲线系数 b
|
||
|
||
3. **可选参数**：
|
||
- 计算时电压分成多少份
|
||
- 最大尝试雷电流 (kA)
|
||
|
||
### 操作功能
|
||
|
||
- **开始计算**: 执行 EGM 计算
|
||
- **重置参数**: 恢复默认参数值
|
||
- **导出配置**: 将当前配置导出为 JSON 文件
|
||
|
||
## 开发说明
|
||
|
||
### 添加新功能
|
||
|
||
1. 在 `src/types/index.ts` 中添加类型定义
|
||
2. 在 `src/components/ParameterForm.vue` 中添加 UI 组件
|
||
3. 在 `webview_app.py` 中添加后端 API 方法
|
||
|
||
### 样式定制
|
||
|
||
- 使用 Tailwind CSS 类名进行样式定制
|
||
- Quasar 组件自带 Material Design 风格
|
||
|
||
## 常见问题
|
||
|
||
### Q: pywebview 窗口无法打开？
|
||
|
||
A: 请确保已安装 pywebview：`pip install pywebview`
|
||
|
||
### Q: 前端开发服务器无法连接？
|
||
|
||
A: 请确保先运行 `npm run dev`，然后再启动 `python webview_app.py`
|
||
|
||
### Q: 计算功能不工作？
|
||
|
||
A: 当前版本仅提供界面框架，需要进一步集成 core.py 中的计算逻辑。
|
||
|
||
## 后续开发
|
||
|
||
- [ ] 集成 core.py 中的实际计算函数
|
||
- [ ] 添加计算结果可视化
|
||
- [ ] 支持导入/导出 TOML 配置文件
|
||
- [ ] 添加批量计算功能
|
||
- [ ] 添加结果导出（DXF、PDF 等） |