alongor666/weekpi-html

华安保险车险周报HTML可视化生成器

核心目标

将周度车险保单数据转化为交互式网页仪表盘，采用标签页切换和下钻分析，支持机构/客户类别双维度分析，麦肯锡风格设计。

使用流程

快速开始（3步）

# 1. 确认配置文件（首次使用需检查）
ls references/thresholds.json  # 阈值配置
ls references/plans.json        # 保费计划（可选）

# 2. 上传数据文件
# 用户上传：车险保单变动成本清单.xlsx

# 3. 运行生成命令
cd scripts
python generate_html_dashboard.py <数据文件> <周次> <机构名称> ../references

# 示例
python generate_html_dashboard.py ../data.xlsx 49 四川分公司 ../references

数据文件要求

支持格式：

• .xlsx / .xls - Excel 文件（推荐）
• .csv - CSV 文本文件（UTF-8 编码）
• .json - JSON 格式（数组或对象）
• .db / .duckdb - DuckDB 数据库

必需字段（与 insurance-weekly-report 一致）：

• 机构：三级机构名称
• 客户类别：客户分类
• 签单保费：本周保费收入（元）
• 满期赔付率：百分比值
• 费用率：百分比值
• 变动成本率：百分比值
• 已报告赔款：已报案赔款金额（元）
• 出险率：百分比值
• 案均赔款：平均每案赔款（元）

工作流程

完整网页生成流程

1. 数据准备
   ↓
   用户上传数据文件
   系统识别格式（Excel/CSV/JSON/DuckDB）

2. 数据处理
   ↓
   ├─ 读取数据
   ├─ 数据验证
   ├─ 应用阈值配置
   └─ 计算聚合指标
      ├─ 分机构聚合
      └─ 分客户类别聚合

3. 图表生成
   ↓
   为5个标签页生成ECharts配置
   ├─ 经营概览：KPI卡片 + 四象限散点图
   ├─ 保费进度：条形图 + 计划对比图
   ├─ 变动成本：条形图 + 趋势图
   ├─ 损失暴露：气泡图 + 明细表
   └─ 费用支出：条形图 + 费用结构图

4. HTML生成
   ↓
   ├─ 使用模板（assets/dashboard_template.html）
   ├─ 嵌入数据和图表配置
   ├─ 配置交互逻辑
   │   ├─ 标签页切换
   │   ├─ 下钻分析
   │   └─ 响应式布局
   └─ 应用麦肯锡配色（#a02724）

5. 交互功能
   ↓
   ├─ 标签页切换（5个Tab）
   ├─ 下钻分析
   │   ├─ 点击机构 → 查看该机构明细
   │   └─ 点击客户类别 → 查看该类别明细
   └─ 图表联动
      └─ 选中数据点 → 高亮关联数据

6. 输出交付
   ↓
   生成文件：{机构名称}_周报_第{周次}周_仪表盘.html
   特点：
   ├─ 单文件，无外部依赖
   ├─ 可直接用浏览器打开
   └─ 支持导出图片

决策逻辑

• 格式识别：自动判断数据文件类型和结构
• 图表选择：根据数据特点选择最合适的可视化方式
• 交互设计：支持多层级下钻，便于深入分析
• 配色方案：统一使用麦肯锡深红色系，保持专业性

网页结构设计

页面布局

┌─────────────────────────────────────────────────────────┐
│  华安保险车险第XX周经营分析 | 四川分公司 | 2025-XX-XX  │
├─────────────────────────────────────────────────────────┤
│  [经营概览] [保费进度] [变动成本] [损失暴露] [费用支出] │
├─────────────────────────────────────────────────────────┤
│                                                         │
│  当前标签页内容区域                                      │
│  - 核心指标卡片                                         │
│  - 交互式图表（ECharts）                                │
│  - 分机构/分客户类别切换按钮                            │
│                                                         │
└─────────────────────────────────────────────────────────┘

标签页内容

Tab 1: 经营概览

核心指标卡片（顶部）：

• 签单保费（大数字，48px）
• 变动成本率（带状态色）
• 满期赔付率
• 费用率

交互图表：

• 四象限散点图：X轴=年计划达成率，Y轴=变动成本率
• 气泡大小=签单保费
• 点击数据点可下钻查看详情

下钻功能：

• 默认显示：分机构视图
• 切换按钮：[按机构] [按客户类别]

Tab 2: 保费进度

表格展示：

• 列：机构/客户类别 | 年累计 | 当周值 | 年计划达成率 | 周计划达成率
• 未达标行标红高亮

可视化图表：

• 柱状图：年计划达成率对比
• 进度条：周计划完成情况

下钻功能：

• [按机构] [按客户类别] 切换

Tab 3: 变动成本

四象限散点图：

• X轴：满期赔付率
• Y轴：费用率
• 气泡大小：签单保费占比
• 基准线：X=70%, Y=18%（可配置）

问题机构标注：

• 自动标注高成本机构名称
• 悬停显示详细数据

下钻功能：

• [按机构] [按客户类别] 切换

Tab 4: 损失暴露

子标签页：

• [气泡图分析] [二级指标分析]

气泡图（默认）：

• X轴：满期赔付率
• Y轴：当年已报告赔款占比
• 气泡大小：当周已报告赔款占比

二级指标（四象限）：

• X轴：出险率
• Y轴：案均赔款
• 基准线可配置

下钻功能：

• [按机构] [按客户类别] 切换

Tab 5: 费用支出

四象限散点图：

• X轴：费用率
• Y轴：费用占比超保费占比
• 标注问题机构

费用趋势图（可选）：

• 折线图：费用率随时间变化

下钻功能：

• [按机构] [按客户类别] 切换

交互功能设计

标签页切换

• 点击顶部标签切换内容区域
• 保持当前下钻状态（机构/客户类别）
• URL哈希锚点支持（可书签分享）

下钻分析

• 每个标签页提供 [按机构] [按客户类别] 切换按钮
• 切换时图表自动重新渲染
• 数据实时计算聚合

图表交互

• 鼠标悬停：显示详细数据提示框
• 点击数据点：高亮显示，展开详情面板
• 缩放平移：ECharts 原生支持
• 导出功能：图表右键菜单导出为图片

响应式设计

• 桌面端：1920x1080 最佳
• 平板端：自动调整布局
• 移动端：堆叠式布局，垂直滚动

麦肯锡风格规范

配色方案

--primary-red: #a02724; /* 主色-华安红 */
--success-green: #00b050; /* 达标-绿 */
--warning-yellow: #ffc000; /* 预警-黄 */
--danger-red: #c00000; /* 严重-红 */
--gray-dark: #333333; /* 文本主色 */
--gray-medium: #666666; /* 文本次要 */
--gray-light: #cccccc; /* 边框/分隔线 */
--background: #f5f5f5; /* 页面背景 */

字体规范

• 标题：微软雅黑 Bold 24px
• 核心数字：Arial Bold 48px
• 正文：微软雅黑 14px
• 图表标签：12px

图表设计

• 配色：单色或双色，避免渐变
• 基准线：虚线样式，灰色
• 数据标注：直接标注，不使用图例
• 气泡图：透明度70%，边框实线

配置文件说明

references/thresholds.json

与 insurance-weekly-report 共享，定义所有阈值。

references/plans.json（可选）

保费计划数据，用于计算达成率。

references/field_mappings.json（可选）

字段映射配置，支持自定义字段名称。

技术栈

• 前端框架：纯 HTML5 + CSS3 + JavaScript（无依赖）
• 图表库：ECharts 5.x（CDN引入）
• 数据处理：Python pandas + numpy
• 模板引擎：Jinja2（生成HTML）
• 样式框架：自定义CSS（麦肯锡风格）

生成流程

Step 1: 数据处理

1. 读取数据文件（Excel/CSV/JSON/DuckDB）
2. 数据验证和清洗
3. 计算聚合指标（分机构、分客户类别）
4. 生成JSON数据文件

Step 2: HTML生成

1. 加载HTML模板（assets/templates/dashboard.html）
2. 使用Jinja2渲染数据
3. 嵌入JSON数据到JavaScript
4. 生成单文件HTML（自包含）

Step 3: 输出

1. 保存HTML文件到输出目录
2. 可选：生成配套资源文件夹（图片/CSS分离）
3. 返回文件路径供用户下载

输出文件结构

选项1：单文件HTML（推荐）

车险第49周经营分析_四川分公司_20251209.html  # 自包含，双击即可打开

选项2：分离式结构

dashboard/
├── index.html              # 主页面
├── data/
│   └── data.json          # 数据文件
├── css/
│   └── styles.css         # 样式表
└── js/
    └── charts.js          # 图表逻辑

KPI 计算公式

与 insurance-weekly-report 和 kpi-calculator 完全一致：

核心 KPI

1. 满期赔付率 = 已报告赔款 / 满期保费 × 100%
2. 费用率 = 费用金额 / 签单保费 × 100%
3. 变动成本率 = 满期赔付率 + 费用率
4. 满期出险率 = (出险件数 / 保单件数) × 满期率
5. 案均赔款 = 已报告赔款 / 出险件数

占比指标

6. 保费占比 = 三级机构签单保费 / 各机构签单保费之和
7. 费用占比 = 三级机构费用 / 各机构费用之和
8. 费用占比超保费占比 = 费用占比 - 保费占比

调用示例

场景1：基础用法

用户：帮我把第49周的车险数据生成一个可视化网页

Skill执行：
1. 检查 references/ 配置文件
2. 识别文件格式（.xlsx）
3. 运行：python scripts/generate_html_dashboard.py data.xlsx 49 四川分公司 references/
4. 生成单文件HTML
5. 返回文件路径

场景2：交互式仪表盘

用户：我需要一个可以下钻分析的HTML报告

Skill执行：
1. 确认用户需要交互功能
2. 生成包含标签切换和下钻功能的HTML
3. 测试所有交互功能
4. 返回文件

场景3：多周对比

用户：生成第48周和第49周的对比网页

Skill执行：
1. 处理两周数据
2. 生成趋势对比图表
3. 添加周度对比标签页
4. 返回HTML

版本信息

• 版本：v1.0.0
• 创建日期：2025-12-09
• 维护者：Alongor
• 设计风格：McKinsey & Company
• 依赖技能：insurance-weekly-report (数据处理逻辑)

核心特性

✅ 标签页切换 - 5个核心分析维度 ✅ 下钻分析 - 机构/客户类别双维度 ✅ 交互式图表 - ECharts 支持 ✅ 响应式布局 - 适配多设备 ✅ 麦肯锡风格 - 专业视觉设计 ✅ 单文件输出 - 无需服务器部署 ✅ 数据隐私 - 本地运行，无外部请求