| name | weekpi-html |
| description | 华安保险车险周报HTML可视化生成器。将车险周报数据（Excel/CSV/JSON/DuckDB）转化为交互式网页仪表盘，支持标签页切换（经营概览、保费进度、变动成本、损失暴露、费用支出）和下钻分析（机构/客户类别双维度）。采用ECharts图表、响应式布局、麦肯锡配色方案。触发场景：用户上传车险周报数据文件，要求生成HTML可视化网页、交互式仪表盘或网页版报告。 |
华安保险车险周报HTML可视化生成器
核心目标
将周度车险保单数据转化为交互式网页仪表盘，采用标签页切换和下钻分析，支持机构/客户类别双维度分析，麦肯锡风格设计。
使用流程
快速开始（3步）
ls references/thresholds.json
ls references/plans.json
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轴：当年已报告赔款占比
- 气泡大小：当周已报告赔款占比
二级指标（四象限）：
下钻功能：
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: 数据处理
- 读取数据文件（Excel/CSV/JSON/DuckDB）
- 数据验证和清洗
- 计算聚合指标（分机构、分客户类别）
- 生成JSON数据文件
Step 2: HTML生成
- 加载HTML模板（assets/templates/dashboard.html）
- 使用Jinja2渲染数据
- 嵌入JSON数据到JavaScript
- 生成单文件HTML（自包含）
Step 3: 输出
- 保存HTML文件到输出目录
- 可选：生成配套资源文件夹（图片/CSS分离）
- 返回文件路径供用户下载
输出文件结构
选项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
- 满期赔付率 = 已报告赔款 / 满期保费 × 100%
- 费用率 = 费用金额 / 签单保费 × 100%
- 变动成本率 = 满期赔付率 + 费用率
- 满期出险率 = (出险件数 / 保单件数) × 满期率
- 案均赔款 = 已报告赔款 / 出险件数
占比指标
- 保费占比 = 三级机构签单保费 / 各机构签单保费之和
- 费用占比 = 三级机构费用 / 各机构费用之和
- 费用占比超保费占比 = 费用占比 - 保费占比
调用示例
场景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 支持
✅ 响应式布局 - 适配多设备
✅ 麦肯锡风格 - 专业视觉设计
✅ 单文件输出 - 无需服务器部署
✅ 数据隐私 - 本地运行，无外部请求
