# dashboard_overview.html 模板说明

## 适用场景
用于展示园区综合能耗概览，包含能耗与碳排统计、能源费用单价、能耗趋势图表、排名表等复杂数据展示。

## 占位符说明

### HTML 占位符

#### 页面基础
| 占位符 | 说明 | 示例值 |
|--------|------|--------|
| `{{PAGE_TITLE}}` | 页面标题 | "园区综合能耗概览" |

#### 综合能耗与碳排卡片
| 占位符 | 说明 | 示例值 |
|--------|------|--------|
| `{{METRIC_CARD_TITLE}}` | 卡片标题 | "综合能耗与碳排" |
| `{{ENERGY_TITLE}}` | 总能耗标题 | "总能耗" |
| `{{ENERGY_VALUE}}` | 总能耗数值 | "0.115" |
| `{{ENERGY_UNIT}}` | 总能耗单位 | "t 折标煤" |
| `{{ENERGY_SUB_1_LABEL}}` | 电能耗标签 | "电能耗" |
| `{{ENERGY_SUB_1_VALUE}}` | 电能耗数值 | "0.115" |
| `{{ENERGY_SUB_2_LABEL}}` | 热能耗标签 | "热能耗" |
| `{{ENERGY_SUB_2_VALUE}}` | 热能耗数值 | "0.000" |
| `{{ENERGY_SUB_3_LABEL}}` | 燃能耗标签 | "燃能耗" |
| `{{ENERGY_SUB_3_VALUE}}` | 燃能耗数值 | "0.000" |
| `{{CARBON_TITLE}}` | 总碳排标题 | "总碳排" |
| `{{CARBON_VALUE}}` | 总碳排数值 | "0.532" |
| `{{CARBON_UNIT}}` | 总碳排单位 | "tCO₂" |
| `{{CARBON_SUB_1_LABEL}}` | 电碳排标签 | "电碳排" |
| `{{CARBON_SUB_1_VALUE}}` | 电碳排数值 | "0.532" |
| `{{CARBON_SUB_2_LABEL}}` | 热碳排标签 | "热碳排" |
| `{{CARBON_SUB_2_VALUE}}` | 热碳排数值 | "0.000" |
| `{{CARBON_SUB_3_LABEL}}` | 燃碳排标签 | "燃碳排" |
| `{{CARBON_SUB_3_VALUE}}` | 燃碳排数值 | "0.000" |
| `{{YEAR_TITLE}}` | 年度累计标题 | "年度累计" |
| `{{YEAR_VALUE}}` | 年度累计数值 | "0.532" |
| `{{YEAR_UNIT}}` | 年度累计单位 | "tCO₂" |
| `{{YEAR_SUB_1_LABEL}}` | 碳排标签 | "碳排" |
| `{{YEAR_SUB_1_VALUE}}` | 碳排数值 | "0.532" |
| `{{YEAR_SUB_2_LABEL}}` | 光伏节碳标签 | "光伏节碳" |
| `{{YEAR_SUB_2_VALUE}}` | 光伏节碳数值 | "0.000" |

#### 能源费用单价
| 占位符 | 说明 | 示例值 |
|--------|------|--------|
| `{{PRICE_CARD_TITLE}}` | 卡片标题 | "能源费用单价" |
| `{{PRICE_ELECTRIC_LABEL}}` | 电价标签 | "电价（¥）" |
| `{{PRICE_ELECTRIC_VALUE}}` | 电价数值 | "0.658" |
| `{{PRICE_HEAT_LABEL}}` | 热价标签 | "热价（¥）" |
| `{{PRICE_HEAT_VALUE}}` | 热价数值 | "0.000" |
| `{{PRICE_GAS_LABEL}}` | 燃价标签 | "燃价（¥）" |
| `{{PRICE_GAS_VALUE}}` | 燃价数值 | "0.000" |

#### 图表标题
| 占位符 | 说明 | 示例值 |
|--------|------|--------|
| `{{CARBON_DIST_TITLE}}` | 碳排分布标题 | "碳排分布" |
| `{{CARBON_DIST_UNIT}}` | 碳排分布单位 | "单位/tCO₂" |
| `{{PV_TITLE}}` | 光伏节碳标题 | "光伏节碳" |
| `{{PV_UNIT}}` | 光伏节碳单位 | "单位/tCO₂" |
| `{{ENERGY_DIST_TITLE}}` | 能耗分布标题 | "能耗分布（t折标煤）" |
| `{{DEVICE_DIST_TITLE}}` | 设备分布标题 | "设备分布" |
| `{{DEVICE_TOTAL_LABEL}}` | 设备总数标签 | "总数" |
| `{{DEVICE_TOTAL_VALUE}}` | 设备总数数值 | "0" |
| `{{DEVICE_TOTAL_UNIT}}` | 设备总数单位 | "台" |
| `{{RANK_TABLE_TITLE}}` | 排名表标题 | "企业能耗排名" |

#### 表格表头
| 占位符 | 说明 | 示例值 |
|--------|------|--------|
| `{{TABLE_HEADER_1}}` | 第1列表头 | "序号" |
| `{{TABLE_HEADER_2}}` | 第2列表头 | "公司名称" |
| `{{TABLE_HEADER_3}}` | 第3列表头 | "所属园区" |
| `{{TABLE_HEADER_4}}` | 第4列表头 | "总能耗（t折标煤）" |

### JavaScript 占位符

| 占位符 | 说明 |
|--------|------|
| `{{INJECT_DATA}}` | 数据注入位置，需要注入 mockData 对象 |

## JSON 数据格式示例

```json
{
  "PAGE_TITLE": "园区综合能耗概览",
  "METRIC_CARD_TITLE": "综合能耗与碳排",
  "ENERGY_TITLE": "总能耗",
  "ENERGY_VALUE": "0.115",
  "ENERGY_UNIT": "t 折标煤",
  "ENERGY_SUB_1_LABEL": "电能耗",
  "ENERGY_SUB_1_VALUE": "0.115",
  "ENERGY_SUB_2_LABEL": "热能耗",
  "ENERGY_SUB_2_VALUE": "0.000",
  "ENERGY_SUB_3_LABEL": "燃能耗",
  "ENERGY_SUB_3_VALUE": "0.000",
  "CARBON_TITLE": "总碳排",
  "CARBON_VALUE": "0.532",
  "CARBON_UNIT": "tCO₂",
  "CARBON_SUB_1_LABEL": "电碳排",
  "CARBON_SUB_1_VALUE": "0.532",
  "CARBON_SUB_2_LABEL": "热碳排",
  "CARBON_SUB_2_VALUE": "0.000",
  "CARBON_SUB_3_LABEL": "燃碳排",
  "CARBON_SUB_3_VALUE": "0.000",
  "YEAR_TITLE": "年度累计",
  "YEAR_VALUE": "0.532",
  "YEAR_UNIT": "tCO₂",
  "YEAR_SUB_1_LABEL": "碳排",
  "YEAR_SUB_1_VALUE": "0.532",
  "YEAR_SUB_2_LABEL": "光伏节碳",
  "YEAR_SUB_2_VALUE": "0.000",
  "PRICE_CARD_TITLE": "能源费用单价",
  "PRICE_ELECTRIC_LABEL": "电价（¥）",
  "PRICE_ELECTRIC_VALUE": "0.658",
  "PRICE_HEAT_LABEL": "热价（¥）",
  "PRICE_HEAT_VALUE": "0.000",
  "PRICE_GAS_LABEL": "燃价（¥）",
  "PRICE_GAS_VALUE": "0.000",
  "CARBON_DIST_TITLE": "碳排分布",
  "CARBON_DIST_UNIT": "单位/tCO₂",
  "PV_TITLE": "光伏节碳",
  "PV_UNIT": "单位/tCO₂",
  "ENERGY_DIST_TITLE": "能耗分布（t折标煤）",
  "DEVICE_DIST_TITLE": "设备分布",
  "DEVICE_TOTAL_LABEL": "总数",
  "DEVICE_TOTAL_VALUE": "0",
  "DEVICE_TOTAL_UNIT": "台",
  "RANK_TABLE_TITLE": "企业能耗排名",
  "TABLE_HEADER_1": "序号",
  "TABLE_HEADER_2": "公司名称",
  "TABLE_HEADER_3": "所属园区",
  "TABLE_HEADER_4": "总能耗（t折标煤）",
  "INJECT_DATA": "const mockData = { allEnergy: 0.115, eleEnergy: 0.115, heatEnergy: 0.000, gasEnergy: 0.000, allCarbon: 0.532, eleCarbon: 0.532, heatCarbon: 0.000, gasCarbon: 0.000, yearNet: 0.532, yearCarbon: 0.532, yearPv: 0.000, elePrice: 0.658, heatPrice: 0.000, gasPrice: 0.000, devices: [{ name: '智能电表', count: 12, total: 20 }, { name: '热量计', count: 5, total: 20 }, { name: '燃气表', count: 3, total: 20 }], rankings: [{ rank:1, name:'测试园区企业1', park:'测试园区1', value:0.115 }, { rank:2, name:'某制造科技公司', park:'测试园区2', value:0.000 }, { rank:3, name:'某科技有限公司', park:'测试园区3', value:0.000 }], carbonMonths: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'], carbonEle: [0.30, 0.50, 0.53, 0.40, 0.30, 0.10, 0.10, 0.08, 0.10, 0.12, 0.20, 0.25], carbonGas: [0.05, 0.08, 0.04, 0.03, 0.02, 0.01, 0.01, 0.00, 0.01, 0.02, 0.03, 0.04], carbonHeat: [0.10, 0.10, 0.05, 0.02, 0.00, 0.00, 0.00, 0.00, 0.00, 0.02, 0.06, 0.09], pvMonths: ['1月','3月','5月','7月','9月','11月'], pvData: [0.5, 1.2, 2.8, 3.1, 2.0, 0.8], pieParks: ['测试园区1','测试园区2','测试园区3'], pieEle: [0.115, 0, 0], pieHeat: [0.000, 0, 0], pieGas: [0.000, 0, 0] };"
}
```

## 注意事项

1. 三大指标卡使用不同颜色：绿色（能耗）、蓝色（碳排）、橙色（年度）
2. 图表数据通过 {{INJECT_DATA}} 注入完整的 mockData 对象
3. 设备列表和排名表格由 JavaScript 动态生成
4. 所有数值保留3位小数