5.3 KiB

Raw Blame History

LawRisk 组织架构功能 - 美化实现说明

📋 功能概述

成功为超级管理员页面添加了组织架构标签页，实现树状结构展示服务部门的上下级关系，并进行了全面的UI美化。

🎯 核心功能

1. 树状组织架构展示

✅ 递归渲染多级树状结构
✅ 清晰展示上下级关系
✅ 连接线可视化层级关系
✅ 响应式设计，支持多设备

2. 层级差异化样式

✅ 根节点：深紫色渐变（#4338ca → #6d28d9）+ 紫色边框
✅ 子节点：浅紫色渐变（#7c3aed → #a855f7）
✅ 视觉上明确区分层级关系

3. 搜索过滤功能

✅ 实时搜索部门名称和编码
✅ 搜索结果高亮显示（黄色背景）
✅ 支持 Enter 键快速搜索
✅ 300ms 防抖优化性能
✅ 搜索结果为空时友好提示

4. 统计信息面板

✅ 总部门数量统计
✅ 组织层级深度统计
✅ 根部门数量统计
✅ 实时更新统计数据

5. 工具提示（Tooltip）

✅ 悬停显示部门详细信息
✅ 包含：部门名称、编码、区域、描述
✅ 优雅的淡入淡出动画
✅ 智能定位防止溢出屏幕

🛠 技术实现

后端 API

GET /fs-ai-asistant/api/workflow/lawrisk/admin/service-departments/tree

返回树状结构的组织架构数据
需要管理员权限认证
数据来自 licensing_risks 数据库

前端实现

文件: static/super_admin.html

新增函数

build_service_department_tree() - 后端树结构构建
loadOrgChart() - 加载组织架构数据
flattenTree() - 扁平化树结构以便搜索
renderOrgTree() - 渲染组织树
searchOrgChart() - 搜索功能
addTooltip() - 添加工具提示
updateOrgStats() - 更新统计信息

新增样式类

.org-chart-controls - 搜索控制栏
.search-input - 搜索输入框
.stats-bar - 统计信息栏
.tree-node.root-node - 根节点样式
.tree-node:not(.root-node) - 子节点样式
.tooltip - 工具提示样式
.highlight - 搜索高亮样式
.no-results - 无结果提示样式

🎨 设计特色

视觉设计

配色方案: 紫色系渐变，符合现代化管理系统风格
层次感: 通过颜色深浅区分层级
交互反馈: 悬停效果、点击反馈
动画: 平滑的过渡动画和渐入渐出效果

用户体验

搜索: 实时、模糊匹配、结果高亮
信息展示: 悬停查看详情，无需点击
统计: 一目了然的组织概况
响应式: 自适应不同屏幕尺寸

📊 数据结构

API 返回数据格式

{
  "success": true,
  "data": {
    "tree": [
      {
        "id": "部门ID",
        "name": "部门名称",
        "code": "部门编码",
        "region_name": "所属区域",
        "description": "部门描述",
        "children": [
          {
            "id": "子部门ID",
            "name": "子部门名称",
            "code": "子部门编码",
            // ... 无children表示叶子节点
          }
        ]
      }
    ]
  }
}

扁平化数据结构（搜索用）

{
  id: "部门ID",
  name: "部门名称",
  code: "部门编码",
  region_name: "所属区域",
  level: 0,  // 层级深度
  node: {...}  // 原始节点数据
}

🚀 使用方法

访问路径

http://localhost:8000/fs-ai-asistant/api/workflow/lawrisk/admin/super

操作步骤

登录超级管理员控制台
点击 "🌳 组织架构" 标签页
查看树状组织架构
使用搜索框过滤部门
悬停查看部门详细信息

搜索示例

搜索 "市级" - 显示所有市级相关部门
搜索 "FSSJ" - 显示编码包含FSSJ的部门
按回车键快速搜索
点击"重置"恢复完整视图

📈 性能优化

防抖搜索: 300ms 延迟避免频繁搜索
数据缓存: 扁平化数据存储在内存中
DOM优化: 事件委托减少内存占用
CSS动画: 使用 transform 而非改变布局属性

🔧 技术栈

前端: 原生 JavaScript + HTML5 + CSS3
后端: Python Flask + PostgreSQL
动画: CSS3 Transitions + Transform
响应式: Flexbox + CSS Media Queries

📝 文件清单

后端修改

lawrisk/services/licensing_repo.py - 添加 build_service_department_tree() 函数
lawrisk/api/v2.py - 添加 /admin/service-departments/tree API 端点

前端修改

static/super_admin.html - 组织架构标签页 + 搜索功能 + 样式美化

✨ 未来扩展建议

导出功能: 支持导出PNG/PDF格式
缩放控制: 支持放大/缩小查看
全屏模式: 全屏查看大型组织架构
拖拽编辑: 支持拖拽调整部门结构
更多统计: 用户数量、活跃度等业务指标
数据可视化: 集成图表展示组织数据

🎉 总结

组织架构功能已完成全面美化实现，包括：

✅ 层级差异化展示
✅ 实时搜索过滤
✅ 工具提示详情
✅ 统计信息面板
✅ 响应式设计
✅ 流畅的交互动画

所有功能均已集成到超级管理员控制台，为用户提供了直观、美观、易用的组织架构浏览体验！

开发时间: 2025年11月17日
技术栈: Python Flask + JavaScript + CSS3
状态: ✅ 已完成并测试通过

5.3 KiB Raw Blame History Unescape Escape