<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>零碳园区评价总览 - 管理系统</title>
<!-- 引入 Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- 引入 FontAwesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<!-- 自定义配色配置 -->
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#1677ff', // 品牌蓝
success: '#52c41a', // 成功绿
warning: '#faad14', // 警告黄 (用于激励)
danger: '#ff4d4f', // 错误红
softwarn: '#fa8c16', // 柔和警告 (用于未达标图标)
graybg: '#f0f2f5', // 背景灰
sidebar: '#001529', // 侧边栏深色
}
}
}
}
</script>
<style>
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #999; }
.table-row-hover:hover td { background-color: #fafafa; }
</style>
</head>
<body class="bg-graybg h-screen flex overflow-hidden text-sm text-slate-700 font-sans antialiased">
<!-- 左侧导航栏 -->
<aside class="w-64 bg-sidebar text-white flex-shrink-0 flex flex-col transition-all duration-300">
<div class="h-14 bg-[#002140] flex items-center justify-center shadow-md">
<span class="text-gray-400 text-xs tracking-widest">SYSTEM MENU</span>
</div>
<nav class="flex-1 overflow-y-auto py-4">
<ul class="space-y-1">
<li><a href="#" class="flex items-center px-6 py-3 text-gray-300 hover:text-white hover:bg-[#1890ff] transition-colors"><i class="fa-solid fa-house w-6 text-center"></i><span class="ml-2">系统首页</span></a></li>
<li><a href="#" class="flex items-center px-6 py-3 text-gray-300 hover:text-white hover:bg-[#1890ff] transition-colors"><i class="fa-solid fa-folder-open w-6 text-center"></i><span class="ml-2">园区档案</span></a></li>
<li class="relative">
<div class="absolute left-0 top-0 bottom-0 w-1 bg-primary"></div>
<a href="#" class="flex items-center px-6 py-3 text-white bg-primary bg-opacity-100"><i class="fa-solid fa-chart-pie w-6 text-center"></i><span class="ml-2 font-medium">评价总览</span></a>
</li>
<li><a href="#" class="flex items-center px-6 py-3 text-gray-300 hover:text-white hover:bg-[#1890ff] transition-colors"><i class="fa-solid fa-pen-to-square w-6 text-center"></i><span class="ml-2">数据填报</span></a></li>
<li><a href="#" class="flex items-center px-6 py-3 text-gray-300 hover:text-white hover:bg-[#1890ff] transition-colors"><i class="fa-solid fa-gear w-6 text-center"></i><span class="ml-2">系统设置</span></a></li>
</ul>
</nav>
</aside>
<!-- 右侧主要内容区 -->
<main class="flex-1 flex flex-col h-full overflow-hidden">
<!-- 1. 顶部筛选区 -->
<header class="bg-white border-b border-gray-200 p-4 shadow-sm z-10">
<div class="flex items-center justify-between">
<div class="flex items-center space-x-6">
<div class="flex items-center space-x-2">
<label class="text-gray-500 font-medium">所属园区:</label>
<div class="relative">
<select class="appearance-none bg-white border border-gray-300 text-gray-700 py-1.5 pl-3 pr-8 rounded leading-tight focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary hover:border-primary transition-colors cursor-pointer w-64">
<option>无锡高新零碳产业示范园</option>
<option>苏州工业园区试点A区</option>
</select>
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-500"><i class="fa-solid fa-chevron-down text-xs"></i></div>
</div>
</div>
<div class="flex items-center space-x-2">
<label class="text-gray-500 font-medium">评价任务:</label>
<div class="relative">
<select class="appearance-none bg-white border border-gray-300 text-gray-700 py-1.5 pl-3 pr-8 rounded leading-tight focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary hover:border-primary transition-colors cursor-pointer w-72">
<option>2025年度无锡市零碳园区评估 (执行中)</option>
<option>2024年度无锡市零碳园区评估 (已归档)</option>
</select>
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-500"><i class="fa-solid fa-chevron-down text-xs"></i></div>
</div>
</div>
</div>
<!-- 移除了原来的分析数据按钮 -->
</div>
</header>
<!-- 滚动内容容器 -->
<div class="flex-1 overflow-y-auto p-6 space-y-6">
<!-- 2. A区：园区概况 -->
<section>
<h3 class="text-gray-800 font-bold mb-3 border-l-4 border-primary pl-3 flex items-center">
园区概况
<span class="text-xs text-gray-400 font-normal ml-2 bg-gray-100 px-2 py-0.5 rounded">数据更新截止: 2023-10-26</span>
</h3>
<div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-4">
<!-- Card 1 -->
<div class="bg-white p-4 rounded-lg border border-gray-200 shadow-sm flex items-center justify-between">
<div>
<div class="text-gray-500 text-xs mb-1">总占地面积</div>
<div class="flex items-baseline">
<span class="text-2xl font-bold text-gray-800">12.5</span>
<span class="ml-1 text-xs text-gray-500">km²</span>
</div>
</div>
<div class="w-10 h-10 rounded-full bg-blue-50 flex items-center justify-center text-primary">
<i class="fa-regular fa-map text-xl"></i>
</div>
</div>
<!-- Card 2 (Updated Name) -->
<div class="bg-white p-4 rounded-lg border border-gray-200 shadow-sm flex items-center justify-between">
<div>
<div class="text-gray-500 text-xs mb-1">企业数量</div>
<div class="flex items-baseline">
<span class="text-2xl font-bold text-gray-800">156</span>
<span class="ml-1 text-xs text-gray-500">家</span>
</div>
</div>
<div class="w-10 h-10 rounded-full bg-indigo-50 flex items-center justify-center text-indigo-500">
<i class="fa-regular fa-building text-xl"></i>
</div>
</div>
<!-- Card 3 -->
<div class="bg-white p-4 rounded-lg border border-gray-200 shadow-sm flex items-center justify-between">
<div>
<div class="text-gray-500 text-xs mb-1">工业增加值</div>
<div class="flex items-baseline">
<span class="text-2xl font-bold text-gray-800">450</span>
<span class="ml-1 text-xs text-gray-500">亿元</span>
</div>
</div>
<div class="w-10 h-10 rounded-full bg-green-50 flex items-center justify-center text-green-500">
<i class="fa-solid fa-chart-line text-xl"></i>
</div>
</div>
<!-- Card 4 -->
<div class="bg-white p-4 rounded-lg border border-gray-200 shadow-sm flex items-center justify-between">
<div>
<div class="text-gray-500 text-xs mb-1">总建筑面积</div>
<div class="flex items-baseline">
<span class="text-2xl font-bold text-gray-800">200</span>
<span class="ml-1 text-xs text-gray-500">万m²</span>
</div>
</div>
<div class="w-10 h-10 rounded-full bg-orange-50 flex items-center justify-center text-orange-500">
<i class="fa-regular fa-city text-xl"></i>
</div>
</div>
<!-- Card 5 -->
<div class="bg-white p-4 rounded-lg border border-gray-200 shadow-sm flex items-center justify-between">
<div>
<div class="text-gray-500 text-xs mb-1">年度碳排放量</div>
<div class="flex items-baseline">
<span class="text-2xl font-bold text-gray-800">1,200</span>
<span class="ml-1 text-xs text-gray-500">吨</span>
</div>
</div>
<div class="w-10 h-10 rounded-full bg-red-50 flex items-center justify-center text-red-500">
<i class="fa-solid fa-fire text-xl"></i>
</div>
</div>
</div>
</section>
<!-- 3. B区：核心评价看板 -->
<section>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<!-- 约束性指标 -->
<div class="bg-white rounded-lg border border-gray-200 shadow-sm overflow-hidden">
<div class="bg-red-50 px-4 py-3 border-b border-red-100 flex justify-between items-center">
<div class="flex items-center gap-2">
<span class="w-2 h-2 rounded-full bg-danger"></span>
<h4 class="font-bold text-gray-800">约束性指标</h4>
</div>
</div>
<div class="p-5 space-y-4">
<!-- 近期 -->
<div>
<div class="flex justify-between text-xs mb-1">
<span class="text-gray-500">近期达标 (2025)</span>
<span class="font-bold text-gray-700 font-mono">3 / 4 <span class="text-gray-400 font-normal ml-1">(75%)</span></span>
</div>
<div class="w-full bg-gray-100 rounded-full h-2.5">
<div class="bg-danger h-2.5 rounded-full" style="width: 75%"></div>
</div>
</div>
<!-- 远期 -->
<div>
<div class="flex justify-between text-xs mb-1">
<span class="text-gray-500">远期达标 (2030)</span>
<span class="font-bold text-gray-700 font-mono">1 / 4 <span class="text-gray-400 font-normal ml-1">(25%)</span></span>
</div>
<div class="w-full bg-gray-100 rounded-full h-2.5">
<div class="bg-danger opacity-50 h-2.5 rounded-full" style="width: 25%"></div>
</div>
</div>
</div>
</div>
<!-- 重要参考指标 -->
<div class="bg-white rounded-lg border border-gray-200 shadow-sm overflow-hidden">
<div class="bg-blue-50 px-4 py-3 border-b border-blue-100 flex justify-between items-center">
<div class="flex items-center gap-2">
<span class="w-2 h-2 rounded-full bg-primary"></span>
<h4 class="font-bold text-gray-800">重要参考指标</h4>
</div>
</div>
<div class="p-5 space-y-4">
<!-- 近期 -->
<div>
<div class="flex justify-between text-xs mb-1">
<span class="text-gray-500">近期达标 (2025)</span>
<span class="font-bold text-gray-700 font-mono">8 / 10 <span class="text-gray-400 font-normal ml-1">(80%)</span></span>
</div>
<div class="w-full bg-gray-100 rounded-full h-2.5">
<div class="bg-primary h-2.5 rounded-full" style="width: 80%"></div>
</div>
</div>
<!-- 远期 -->
<div>
<div class="flex justify-between text-xs mb-1">
<span class="text-gray-500">远期达标 (2030)</span>
<span class="font-bold text-gray-700 font-mono">5 / 10 <span class="text-gray-400 font-normal ml-1">(50%)</span></span>
</div>
<div class="w-full bg-gray-100 rounded-full h-2.5">
<div class="bg-primary opacity-50 h-2.5 rounded-full" style="width: 50%"></div>
</div>
</div>
</div>
</div>
<!-- 激励性指标 -->
<div class="bg-white rounded-lg border border-gray-200 shadow-sm overflow-hidden">
<div class="bg-yellow-50 px-4 py-3 border-b border-yellow-100 flex justify-between items-center">
<div class="flex items-center gap-2">
<span class="w-2 h-2 rounded-full bg-warning"></span>
<h4 class="font-bold text-gray-800">激励性指标</h4>
</div>
</div>
<div class="p-5 space-y-4">
<!-- 近期 -->
<div>
<div class="flex justify-between text-xs mb-1">
<span class="text-gray-500">近期达成 (2025)</span>
<span class="font-bold text-gray-700 font-mono">4 / 6 <span class="text-gray-400 font-normal ml-1">(66%)</span></span>
</div>
<div class="w-full bg-gray-100 rounded-full h-2.5">
<div class="bg-warning h-2.5 rounded-full" style="width: 66%"></div>
</div>
</div>
<!-- 远期 -->
<div>
<div class="flex justify-between text-xs mb-1">
<span class="text-gray-500">远期达成 (2030)</span>
<span class="font-bold text-gray-700 font-mono">2 / 6 <span class="text-gray-400 font-normal ml-1">(33%)</span></span>
</div>
<div class="w-full bg-gray-100 rounded-full h-2.5">
<div class="bg-warning opacity-50 h-2.5 rounded-full" style="width: 33%"></div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 4. C区：指标详情 -->
<section class="bg-white border border-gray-200 rounded-lg shadow-sm mb-10">
<!-- 工具栏 -->
<div class="p-4 border-b border-gray-200 flex flex-wrap justify-between items-center gap-4">
<h3 class="text-gray-800 font-bold flex items-center gap-2">
指标详情
</h3>
<div class="flex items-center gap-3">
<select class="text-xs bg-gray-50 border border-gray-300 text-gray-700 rounded py-1.5 px-3 focus:outline-none focus:border-primary hover:border-primary cursor-pointer">
<option value="">指标属性：全部</option>
<option value="约束性">约束性指标</option>
<option value="重要参考">重要参考指标</option>
<option value="激励性">激励性指标</option>
</select>
<select class="text-xs bg-gray-50 border border-gray-300 text-gray-700 rounded py-1.5 px-3 focus:outline-none focus:border-primary hover:border-primary cursor-pointer">
<option value="">达标状态：全部</option>
<option value="近期未达标">近期未达标</option>
<option value="远期未达标">远期未达标</option>
</select>
<button class="text-xs text-gray-500 hover:text-primary transition-colors border border-dashed border-gray-300 rounded px-2 py-1.5 flex items-center gap-1 hover:border-primary">
<i class="fa-solid fa-rotate-left"></i> 重置筛选
</button>
</div>
</div>
<!-- 表格 -->
<div class="overflow-x-auto">
<table class="w-full text-left border-collapse">
<thead>
<tr class="bg-gray-50 text-gray-500 text-xs uppercase tracking-wider">
<th class="p-4 font-medium border-b border-gray-200">指标名称</th>
<th class="p-4 font-medium border-b border-gray-200 w-32">属性</th>
<th class="p-4 font-medium border-b border-gray-200 w-24">单位</th>
<th class="p-4 font-medium border-b border-gray-200">核算数据</th>
<th class="p-4 font-medium border-b border-gray-200">近期目标 (2025)</th>
<th class="p-4 font-medium border-b border-gray-200">远期目标 (2030)</th>
<th class="p-4 font-medium border-b border-gray-200 w-24 text-center">操作</th>
</tr>
</thead>
<tbody class="text-sm divide-y divide-gray-100">
<!-- 1. 约束性 - 碳排放 -->
<tr class="table-row-hover transition-colors">
<td class="p-4 text-gray-800 font-medium">单位能耗碳排放</td>
<td class="p-4"><span class="inline-block px-2 py-0.5 rounded text-xs bg-red-50 text-red-600 border border-red-200">约束性</span></td>
<td class="p-4 text-gray-500">吨/吨标煤</td>
<td class="p-4 font-bold text-gray-800">1.2</td>
<td class="p-4">
<div class="flex items-center gap-2">
<span class="text-gray-600">≤ 1</span>
<i class="fa-solid fa-circle-exclamation text-softwarn" title="未达标"></i>
</div>
</td>
<td class="p-4">
<div class="flex items-center gap-2">
<span class="text-gray-600">≤ 0.2</span>
<i class="fa-solid fa-circle-exclamation text-softwarn" title="未达标"></i>
</div>
</td>
<td class="p-4 text-center"><button onclick="openModal('单位能耗碳排放')" class="text-primary hover:underline">详情</button></td>
</tr>
<!-- 2. 约束性 - 能耗 -->
<tr class="table-row-hover transition-colors">
<td class="p-4 text-gray-800 font-medium">单位工业增加值综合能耗</td>
<td class="p-4"><span class="inline-block px-2 py-0.5 rounded text-xs bg-red-50 text-red-600 border border-red-200">约束性</span></td>
<td class="p-4 text-gray-500">吨标煤/万元</td>
<td class="p-4 font-bold text-gray-800">0.28</td>
<td class="p-4">
<div class="flex items-center gap-2">
<span class="text-gray-600">≤ 0.35</span>
<i class="fa-solid fa-circle-check text-success"></i>
</div>
</td>
<td class="p-4">
<div class="flex items-center gap-2">
<span class="text-gray-600">≤ 0.25</span>
<i class="fa-solid fa-circle-exclamation text-softwarn"></i>
</div>
</td>
<td class="p-4 text-center"><button onclick="openModal('单位工业增加值综合能耗')" class="text-primary hover:underline">详情</button></td>
</tr>
<!-- 3. 约束性 - 碳强度 -->
<tr class="table-row-hover transition-colors">
<td class="p-4 text-gray-800 font-medium">单位工业增加值二氧化碳排放量</td>
<td class="p-4"><span class="inline-block px-2 py-0.5 rounded text-xs bg-red-50 text-red-600 border border-red-200">约束性</span></td>
<td class="p-4 text-gray-500">吨/万元</td>
<td class="p-4 font-bold text-gray-800">0.5</td>
<td class="p-4">
<div class="flex items-center gap-2">
<span class="text-gray-600">≤ 0.6</span>
<i class="fa-solid fa-circle-check text-success"></i>
</div>
</td>
<td class="p-4">
<div class="flex items-center gap-2">
<span class="text-gray-600">≤ 0.1</span>
<i class="fa-solid fa-circle-exclamation text-softwarn"></i>
</div>
</td>
<td class="p-4 text-center"><button onclick="openModal('单位工业增加值二氧化碳排放量')" class="text-primary hover:underline">详情</button></td>
</tr>
<!-- 4. 约束性 - 非化石能源 -->
<tr class="table-row-hover transition-colors">
<td class="p-4 text-gray-800 font-medium">非化石能源消费占比</td>
<td class="p-4"><span class="inline-block px-2 py-0.5 rounded text-xs bg-red-50 text-red-600 border border-red-200">约束性</span></td>
<td class="p-4 text-gray-500">百分比</td>
<td class="p-4 font-bold text-gray-800">15%</td>
<td class="p-4">
<div class="flex items-center gap-2">
<span class="text-gray-600">≥ 20</span>
<i class="fa-solid fa-circle-exclamation text-softwarn"></i>
</div>
</td>
<td class="p-4">
<div class="flex items-center gap-2">
<span class="text-gray-600">≥ 80</span>
<i class="fa-solid fa-circle-exclamation text-softwarn"></i>
</div>
</td>
<td class="p-4 text-center"><button onclick="openModal('非化石能源消费占比')" class="text-primary hover:underline">详情</button></td>
</tr>
<!-- 5. 重要参考 - 数转网联 -->
<tr class="table-row-hover transition-colors">
<td class="p-4 text-gray-800 font-medium">参与“智改数转网联”占比的企业占比</td>
<td class="p-4"><span class="inline-block px-2 py-0.5 rounded text-xs bg-blue-50 text-blue-600 border border-blue-200">重要参考</span></td>
<td class="p-4 text-gray-500">百分比</td>
<td class="p-4 font-bold text-gray-800">25%</td>
<td class="p-4">
<div class="flex items-center gap-2">
<span class="text-gray-600">≥ 20</span>
<i class="fa-solid fa-circle-check text-success"></i>
</div>
</td>
<td class="p-4">
<div class="flex items-center gap-2">
<span class="text-gray-600">≥ 50</span>
<i class="fa-solid fa-circle-exclamation text-softwarn"></i>
</div>
</td>
<td class="p-4 text-center"><button onclick="openModal('参与“智改数转网联”占比的企业占比')" class="text-primary hover:underline">详情</button></td>
</tr>
<!-- 6. 重要参考 - 能效水平 -->
<tr class="table-row-hover transition-colors">
<td class="p-4 text-gray-800 font-medium">能效水平达到行业标杆的企业占比</td>
<td class="p-4"><span class="inline-block px-2 py-0.5 rounded text-xs bg-blue-50 text-blue-600 border border-blue-200">重要参考</span></td>
<td class="p-4 text-gray-500">百分比</td>
<td class="p-4 font-bold text-gray-800">55%</td>
<td class="p-4">
<div class="flex items-center gap-2">
<span class="text-gray-600">≥ 50</span>
<i class="fa-solid fa-circle-check text-success"></i>
</div>
</td>
<td class="p-4">
<div class="flex items-center gap-2">
<span class="text-gray-600">100</span>
<i class="fa-solid fa-circle-exclamation text-softwarn"></i>
</div>
</td>
<td class="p-4 text-center"><button onclick="openModal('能效水平达到行业标杆的企业占比')" class="text-primary hover:underline">详情</button></td>
</tr>
<!-- 7. 重要参考 - 碳足迹核算 -->
<tr class="table-row-hover transition-colors">
<td class="p-4 text-gray-800 font-medium">开展碳足迹核算认证的企业占比</td>
<td class="p-4"><span class="inline-block px-2 py-0.5 rounded text-xs bg-blue-50 text-blue-600 border border-blue-200">重要参考</span></td>
<td class="p-4 text-gray-500">百分比</td>
<td class="p-4 font-bold text-gray-800">12%</td>
<td class="p-4">
<div class="flex items-center gap-2">
<span class="text-gray-600">≥ 10</span>
<i class="fa-solid fa-circle-check text-success"></i>
</div>
</td>
<td class="p-4">
<div class="flex items-center gap-2">
<span class="text-gray-600">≥ 50</span>
<i class="fa-solid fa-circle-exclamation text-softwarn"></i>
</div>
</td>
<td class="p-4 text-center"><button onclick="openModal('开展碳足迹核算认证的企业占比')" class="text-primary hover:underline">详情</button></td>
</tr>
<!-- 8. 重要参考 - 环境信息披露 -->
<tr class="table-row-hover transition-colors">
<td class="p-4 text-gray-800 font-medium">披露环境信息的规上企业占比</td>
<td class="p-4"><span class="inline-block px-2 py-0.5 rounded text-xs bg-blue-50 text-blue-600 border border-blue-200">重要参考</span></td>
<td class="p-4 text-gray-500">百分比</td>
<td class="p-4 font-bold text-gray-800">65%</td>
<td class="p-4">
<div class="flex items-center gap-2">
<span class="text-gray-600">≥ 50</span>
<i class="fa-solid fa-circle-check text-success"></i>
</div>
</td>
<td class="p-4">
<div class="flex items-center gap-2">
<span class="text-gray-600">≥ 80</span>
<i class="fa-solid fa-circle-exclamation text-softwarn"></i>
</div>
</td>
<td class="p-4 text-center"><button onclick="openModal('披露环境信息的规上企业占比')" class="text-primary hover:underline">详情</button></td>
</tr>
<!-- 9. 重要参考 - 绿色供应链 -->
<tr class="table-row-hover transition-colors">
<td class="p-4 text-gray-800 font-medium">绿色工厂、绿色供应链得牌企业占比</td>
<td class="p-4"><span class="inline-block px-2 py-0.5 rounded text-xs bg-blue-50 text-blue-600 border border-blue-200">重要参考</span></td>
<td class="p-4 text-gray-500">百分比</td>
<td class="p-4 font-bold text-gray-800">8%</td>
<td class="p-4">
<div class="flex items-center gap-2">
<span class="text-gray-600">≥ 10</span>
<i class="fa-solid fa-circle-exclamation text-softwarn"></i>
</div>
</td>
<td class="p-4">
<div class="flex items-center gap-2">
<span class="text-gray-600">≥ 30</span>
<i class="fa-solid fa-circle-exclamation text-softwarn"></i>
</div>
</td>
<td class="p-4 text-center"><button onclick="openModal('绿色工厂、绿色供应链得牌企业占比')" class="text-primary hover:underline">详情</button></td>
</tr>
<!-- 10. 激励性 - 创新平台 -->
<tr class="table-row-hover transition-colors">
<td class="p-4 text-gray-800 font-medium">省级以上绿色低碳相关创新平台累计数量</td>
<td class="p-4"><span class="inline-block px-2 py-0.5 rounded text-xs bg-yellow-50 text-yellow-700 border border-yellow-200">激励性</span></td>
<td class="p-4 text-gray-500">个</td>
<td class="p-4 font-bold text-gray-800">1</td>
<td class="p-4">
<div class="flex items-center gap-2">
<span class="text-gray-600">≥ 1</span>
<i class="fa-solid fa-circle-check text-success"></i>
</div>
</td>
<td class="p-4">
<div class="flex items-center gap-2">
<span class="text-gray-600">≥ 2</span>
<i class="fa-solid fa-circle-exclamation text-softwarn"></i>
</div>
</td>
<td class="p-4 text-center"><button onclick="openModal('省级以上绿色低碳相关创新平台累计数量')" class="text-primary hover:underline">详情</button></td>
</tr>
</tbody>
</table>
</div>
</section>
</div>
</main>
<!-- 弹窗 (Modal) -->
<div id="detailModal" class="fixed inset-0 z-50 hidden" aria-labelledby="modal-title" role="dialog" aria-modal="true">
<div class="fixed inset-0 bg-gray-900 bg-opacity-50 transition-opacity backdrop-blur-sm" onclick="closeModal()"></div>
<div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span>
<div class="relative inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-4xl w-full">
<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 border-b border-gray-100 flex justify-between items-start">
<div>
<h3 class="text-lg leading-6 font-bold text-gray-900" id="modal-title">指标详情</h3>
<!-- 移除了副标题 -->
</div>
<button onclick="closeModal()" class="bg-white rounded-md text-gray-400 hover:text-gray-500 focus:outline-none">
<i class="fa-solid fa-xmark text-xl"></i>
</button>
</div>
<div class="px-4 py-4 sm:p-6 bg-gray-50">
<!-- 计算过程 (保持不变) -->
<div class="bg-white p-4 rounded border border-gray-200 mb-6">
<h4 class="text-sm font-bold text-gray-800 mb-3 border-l-4 border-primary pl-2">计算依据</h4>
<div class="flex flex-col md:flex-row gap-6 items-center justify-start">
<div class="bg-gray-50 p-3 rounded border border-gray-200 text-center min-w-[150px]">
<div class="text-xs text-gray-500 mb-1">分子：总量</div>
<div class="text-lg font-bold text-primary">--</div>
</div>
<div class="text-gray-400 font-bold text-xl">/</div>
<div class="bg-gray-50 p-3 rounded border border-gray-200 text-center min-w-[150px]">
<div class="text-xs text-gray-500 mb-1">分母：基准</div>
<div class="text-lg font-bold text-primary">--</div>
</div>
<div class="text-gray-400 font-bold text-xl">=</div>
<div class="bg-blue-50 p-3 rounded border border-blue-200 text-center min-w-[150px]">
<div class="text-xs text-blue-600 mb-1">计算结果</div>
<div class="text-xl font-bold text-blue-700">--</div>
</div>
</div>
</div>
<!-- 企业明细 (修改：多态展示与双导出) -->
<div class="bg-white rounded border border-gray-200 shadow-sm">
<div class="px-4 py-3 border-b border-gray-200 flex justify-between items-center">
<h4 class="text-sm font-bold text-gray-800 border-l-4 border-primary pl-2">企业明细数据</h4>
<div class="flex gap-2">
<button class="text-xs px-2 py-1 border border-gray-300 rounded hover:bg-gray-50 flex items-center gap-1 text-gray-600">
<i class="fa-solid fa-file-excel text-green-600"></i> 导出数据
</button>
<button class="text-xs px-2 py-1 bg-primary text-white rounded hover:bg-blue-600 flex items-center gap-1">
<i class="fa-solid fa-paperclip"></i> 导出附件
</button>
</div>
</div>
<div class="overflow-x-auto max-h-64">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-16">排名</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-48">企业名称</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">上报内容</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-32">附件</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<!-- 场景1：数值类型 -->
<tr>
<td class="px-6 py-3 text-xs text-gray-500">1</td>
<td class="px-6 py-3 text-xs font-medium text-gray-900">无锡宏大光伏科技股份有限公司</td>
<td class="px-6 py-3 text-xs text-gray-900 font-mono">450.5 吨</td>
<td class="px-6 py-3 text-xs text-gray-500">
<a href="#" class="text-primary hover:underline flex items-center gap-1"><i class="fa-regular fa-file-pdf"></i> 报告.pdf</a>
</td>
</tr>
<!-- 场景2：文本描述类型 -->
<tr>
<td class="px-6 py-3 text-xs text-gray-500">2</td>
<td class="px-6 py-3 text-xs font-medium text-gray-900">苏南智能装备制造厂</td>
<td class="px-6 py-3 text-xs text-gray-900">
<div class="max-w-xs truncate" title="已建立完整的能源管理体系，并获得ISO50001认证，证书编号：CN23/00088">已建立完整的能源管理体系，并获得ISO50001认证...</div>
</td>
<td class="px-6 py-3 text-xs text-gray-500">
<a href="#" class="text-primary hover:underline flex items-center gap-1"><i class="fa-regular fa-image"></i> 证书.jpg</a>
</td>
</tr>
<!-- 场景3：布尔类型 (是/否) -->
<tr>
<td class="px-6 py-3 text-xs text-gray-500">3</td>
<td class="px-6 py-3 text-xs font-medium text-gray-900">未来新能源实验室</td>
<td class="px-6 py-3 text-xs">
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800">是</span>
</td>
<td class="px-6 py-3 text-xs text-gray-500">-</td>
</tr>
<!-- 场景4：特殊回答 (不涉及) -->
<tr>
<td class="px-6 py-3 text-xs text-gray-500">4</td>
<td class="px-6 py-3 text-xs font-medium text-gray-900">某小微配套厂</td>
<td class="px-6 py-3 text-xs">
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-500">不涉及</span>
</td>
<td class="px-6 py-3 text-xs text-gray-500">-</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse rounded-b-lg border-t border-gray-200">
<button type="button" onclick="closeModal()" class="w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">关闭</button>
</div>
</div>
</div>
</div>
<script>
function openModal(title) {
document.getElementById('modal-title').textContent = "指标详情：" + title;
document.getElementById('detailModal').classList.remove('hidden');
}
function closeModal() {
document.getElementById('detailModal').classList.add('hidden');
}
</script>
</body>
</html>
index.html
style.css
index.js
index.html