# Weekpi HTML

> 华安保险车险周报HTML可视化生成器。将车险周报数据（Excel/CSV/JSON/DuckDB）转化为交互式网页仪表盘，支持标签页切换（经营概览、保费进度、变动成本、损失暴露、费用支出）和下钻分析（机构/客户类别双维度）。采用ECharts图表、响应式布局、麦肯锡配色方案。触发场景：用户上传车险周报数据文件，要求生成HTML可视化网页、交互式仪表盘或网页版报告。

- Skill: `majiayu000/weekpi-html` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add majiayu000/weekpi-html`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/weekpi-html/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/weekpi-html

---


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

## 核心目标

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

## 使用流程

### 快速开始（3步）

```bash
# 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 最佳
- 平板端：自动调整布局
- 移动端：堆叠式布局，垂直滚动

## 麦肯锡风格规范

### 配色方案

```css
--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 支持
✅ **响应式布局** - 适配多设备
✅ **麦肯锡风格** - 专业视觉设计
✅ **单文件输出** - 无需服务器部署
✅ **数据隐私** - 本地运行，无外部请求