扣子空间网页预览功能实现分析
扣子空间的网页预览实现的简单暴力，主要是下面这些步骤
- 在提示词中限定了可以使用部分第三方库，以及生成一个单文件的 jsx 格式的 React 组件
- 通过这个入口加载单文件 jsx:
https://space.coze.cn/web?uri=*.jsx - 解析 uri 参数，下载 jsx 文件内容
- 通过 @swc/wasm-web 将 jsx 编译为 js 代码
- 通过
eval动态构造 React 组件，部分第三方库通过require注入
第三方库支持
从源代码中很容易发现支持的第三方库有下面这些
- lucide-react
- react-hook-form
- recharts
- zod
- framer-motion
- @hookform/resolvers/zod
- react-leaflet
- @amap/amap-jsapi-loader
- mermaid
let w = (e) => ({
'lucide-react': m,
react: {
...n,
createElement: function (r, t) {
for (var o = arguments.length, n = Array(o > 2 ? o - 2 : 0), a = 2; a < o; a++) n[a - 2] = arguments[a]
if (!r) return null
let s = i.createElement(r, t, ...n)
return 'img' === r && e ? (null == e ? void 0 : e(s)) : s
},
},
'react-hook-form': d,
recharts: u,
zod: c,
'framer-motion': f,
'@hookform/resolvers/zod': h,
'react-leaflet': l,
'@amap/amap-jsapi-loader': p,
mermaid: {
...window.mermaid,
default: window.mermaid,
},
process: {
env: {
NODE_ENV: 'production',
},
},
})
样式的处理
扣子生成的 React 组件的样式非常简单粗暴，直接使用 <script src="https://cdn.tailwindcss.com/3.4.1"></script> 加载 Play CDN 版本的 Tailwind CSS，其原理是扫描 HTML 的 class 动态构造 style 标签注入样式，同时通过 MutationObserver 兼听 class 变化更新样式。显然性能比较差，不推荐用于生产环境，但是用在这种简单的预览环境倒也合适。
jsx 代码编译为 React 组件
逻辑比较简单清晰，就是使用 @swc/wasm-web 将 jsx 代码编译为 js 代码，然后通过 eval 动态执行 js 代码返回函数，通过函数的 module, exports, require 参数实现调用外部库。这是比较常见的做法。
class JSXLoader {
setExternals(e) {
this.externals = e
}
async transformJsx(e) {
return (
await (0, _swc_wasm_web__WEBPACK_IMPORTED_MODULE_0__.ZP)(),
(0, _swc_wasm_web__WEBPACK_IMPORTED_MODULE_0__.pG)(e, {
jsc: {
target: 'es2022',
parser: {
syntax: 'typescript',
tsx: !0,
},
},
module: {
type: 'commonjs',
},
sourceMaps: !1,
})
)
}
async getReactNodeFromJsx(code) {
let externals = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : {},
resolvedExternals = {
...this.externals,
...externals,
}
await (0, _swc_wasm_web__WEBPACK_IMPORTED_MODULE_0__.ZP)()
let _exports = {
default: null,
},
result = {
exports: _exports,
__esModule: !1,
},
evalFn = eval('(module, exports, require) => __code__ => eval(__code__)'),
require = (e) => resolvedExternals[e],
transformedCode = (0, _swc_wasm_web__WEBPACK_IMPORTED_MODULE_0__.pG)(code, swcConfig).code
return (
evalFn(
result,
_exports,
require
)(`${transformedCode}
`),
(null == _exports ? void 0 : _exports.default) || _exports
)
}
constructor() {
;(0, _swc_helpers_define_property__WEBPACK_IMPORTED_MODULE_1__._)(this, 'externals', {})
}
}
swc 可以在 https://play.swc.rs/ 在线编译 jsx 代码
实例
以这个空间为例 https://space.coze.cn/web?uri=7494598963371360293%2F%E5%9B%BD%E5%AE%B6%E7%94%B5%E6%8A%95%E8%BF%91%E5%87%A0%E5%B9%B4%E5%8F%91%E5%B1%95%E4%B8%8E%E6%8A%95%E8%B5%84%E6%83%85%E5%86%B5%E5%88%86%E6%9E%90%E6%8A%A5%E5%91%8A-af765abd1a.jsx查看 jsx 代码
import React, { useState, useEffect } from 'react'
import {
BarChart,
Bar,
LineChart,
Line,
XAxis,
YAxis,
CartesianGrid,
Tooltip,
Legend,
ResponsiveContainer,
PieChart,
Pie,
Cell,
} from 'recharts'
import {
Activity,
Zap,
Wind,
Sun,
Battery,
Factory,
Droplets,
Globe,
Award,
LineChart as LineChartIcon,
BarChart2,
PieChart as PieChartIcon,
ChevronUp,
ChevronDown,
} from 'lucide-react'
import { motion } from 'framer-motion'
const SPICReport = () => {
const [activeSection, setActiveSection] = useState('overview')
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
// 装机容量数据
const capacityData = [
{ name: '2015', 总装机: 1.07, 清洁能源: 0.43, 清洁占比: 40 },
{ name: '2024', 总装机: 2.6, 清洁能源: 1.93, 清洁占比: 72.71 },
]
// 发电量数据
const generationData = [
{ year: '2021', 发电量: 5600 },
{ year: '2022', 发电量: 6200 },
{ year: '2023', 发电量: 6800 },
{ year: '2024', 发电量: 7200 },
]
// 投资分布数据
const investmentData = [
{ name: '核电', value: 450 },
{ name: '风电', value: 600 },
{ name: '光伏', value: 500 },
{ name: '煤电', value: 200 },
{ name: '水电', value: 150 },
{ name: '其他', value: 100 },
]
// 各板块装机数据
const sectorData = [
{ name: '核电', 装机: 745, 在建: 250 },
{ name: '风电', 装机: 1800, 在建: 930 },
{ name: '光伏', 装机: 2500, 在建: 800 },
{ name: '煤电', 装机: 6700, 在建: 400 },
{ name: '水电', 装机: 1200, 在建: 300 },
]
const COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042', '#8884D8', '#82CA9D']
const scrollToSection = (sectionId) => {
const element = document.getElementById(sectionId)
if (element) {
element.scrollIntoView({ behavior: 'smooth' })
setActiveSection(sectionId)
setIsMobileMenuOpen(false)
}
}
return (
<div className="min-h-screen font-sans bg-gray-50 text-gray-800">
{/* 导航条 */}
<nav className="sticky top-0 z-50 bg-white shadow-sm">
<div className="container mx-auto px-4 py-3 flex justify-between items-center">
<div className="flex items-center">
<Zap className="text-blue-600 mr-2" size={24} />
<h1 className="text-xl font-bold text-blue-800">国家电投发展报告</h1>
</div>
<div className="hidden md:flex space-x-6">
{['overview', 'development', 'investment', 'strategy', 'outlook'].map((item) => (
<button
key={item}
onClick={() => scrollToSection(item)}
className={`${
activeSection === item ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-600'
} px-1 py-2 font-medium transition-colors`}
>
{
{
overview: '公司概况',
development: '发展情况',
investment: '投资分析',
strategy: '发展战略',
outlook: '未来展望',
}[item]
}
</button>
))}
</div>
<button className="md:hidden text-gray-600" onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}>
{isMobileMenuOpen ? <ChevronUp size={24} /> : <ChevronDown size={24} />}
</button>
</div>
{/* 移动端菜单 */}
{isMobileMenuOpen && (
<div className="md:hidden bg-white py-2 px-4 shadow-md">
{['overview', 'development', 'investment', 'strategy', 'outlook'].map((item) => (
<button
key={item}
onClick={() => scrollToSection(item)}
className={`${
activeSection === item ? 'text-blue-600 bg-blue-50' : 'text-gray-600'
} block w-full text-left px-4 py-2 rounded-md mb-1`}
>
{
{
overview: '公司概况',
development: '发展情况',
investment: '投资分析',
strategy: '发展战略',
outlook: '未来展望',
}[item]
}
</button>
))}
</div>
)}
</nav>
{/* 头部横幅 */}
<header className="bg-gradient-to-r from-blue-700 to-blue-900 text-white py-16">
<div className="container mx-auto px-4 text-center">
<motion.h1
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8 }}
className="text-3xl md:text-4xl font-bold mb-4"
>
国家电投发展与投资分析报告
</motion.h1>
<p className="text-xl mb-8">中国领先的综合性能源企业</p>
<div className="flex flex-wrap justify-center gap-4">
<motion.div
whileHover={{ scale: 1.05 }}
className="bg-white/10 backdrop-blur-md rounded-xl p-4 min-w-[200px]"
>
<div className="flex items-center justify-center mb-2">
<Zap className="mr-2" size={20} />
<span className="font-medium">总装机容量</span>
</div>
<div className="text-2xl font-bold">2.6亿千瓦</div>
<div className="text-sm mt-1">清洁能源占比72.71%</div>
</motion.div>
<motion.div
whileHover={{ scale: 1.05 }}
className="bg-white/10 backdrop-blur-md rounded-xl p-4 min-w-[200px]"
>
<div className="flex items-center justify-center mb-2">
<Activity className="mr-2" size={20} />
<span className="font-medium">年发电量</span>
</div>
<div className="text-2xl font-bold">7200亿千瓦时</div>
<div className="text-sm mt-1">同比增长6.3%</div>
</motion.div>
<motion.div
whileHover={{ scale: 1.05 }}
className="bg-white/10 backdrop-blur-md rounded-xl p-4 min-w-[200px]"
>
<div className="flex items-center justify-center mb-2">
<BarChart2 className="mr-2" size={20} />
<span className="font-medium">年投资额</span>
</div>
<div className="text-2xl font-bold">2000亿元</div>
<div className="text-sm mt-1">清洁能源占比85%</div>
</motion.div>
</div>
</div>
</header>
{/* 公司概况部分 */}
<section id="overview" className="container mx-auto py-12 px-4">
<motion.div
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8 }}
viewport={{ once: true }}
className="bg-white rounded-xl shadow-md p-6 mb-8"
>
<h2 className="text-2xl font-bold mb-6 flex items-center">
<div className="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 mr-3">
<Globe size={18} />
</div>
公司概况
</h2>
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
<div>
<p className="mb-4">
国家电力投资集团有限公司于2015年5月由中国电力投资集团和国家核电技术有限公司重组成立，是中国第一家拥有新能源、核电、水电、火电等全部发电类型的综合性能源企业。
</p>
<p className="mb-4">
成立之初，国家电投装机规模位于五大发电集团末位；资产总额位列第三，次于华能集团及原国电集团。但在清洁能源方面拥有先天优势，火电装机最少、清洁能源占比最高，当年已达40%。
</p>
<p>
截至2024年底，国家电投电力总装机达2.6亿千瓦，全年发电量超7200亿千瓦时，装机排名升至第三；总资产升至第二，仅次于国家能源集团；清洁能源装机已达1.93亿千瓦，占比升至72.71%，仍位列五大发电集团之首。
</p>
</div>
<div className="h-64 md:h-full">
<ResponsiveContainer width="100%" height="100%">
<BarChart data={capacityData}>
<CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" />
<XAxis dataKey="name" />
<YAxis />
<Tooltip />
<Legend />
<Bar dataKey="总装机" fill="#3b82f6" name="总装机(亿千瓦)" />
<Bar dataKey="清洁能源" fill="#10b981" name="清洁能源(亿千瓦)" />
</BarChart>
</ResponsiveContainer>
</div>
</div>
</motion.div>
</section>
{/* 发展情况部分 */}
<section id="development" className="container mx-auto py-12 px-4">
<motion.div
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8 }}
viewport={{ once: true }}
className="bg-white rounded-xl shadow-md p-6 mb-8"
>
<h2 className="text-2xl font-bold mb-6 flex items-center">
<div className="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center text-green-600 mr-3">
<Activity size={18} />
</div>
2024年发展成果
</h2>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
<motion.div whileHover={{ y: -5 }} className="bg-blue-50 rounded-lg p-4">
<div className="flex items-center mb-2">
<Award className="text-blue-600 mr-2" size={18} />
<h3 className="font-semibold text-blue-800">党建与改革</h3>
</div>
<p className="text-sm text-gray-700">
巡视整改实效为先、真抓实改，深化改革系统推进，企业更加坚定更加主动地融入和服务全国大局。
</p>
</motion.div>
<motion.div whileHover={{ y: -5 }} className="bg-purple-50 rounded-lg p-4">
<div className="flex items-center mb-2">
<Zap className="text-purple-600 mr-2" size={18} />
<h3 className="font-semibold text-purple-800">科技创新</h3>
</div>
<p className="text-sm text-gray-700">
"国和一号"示范工程1号机组成功并网发电，300兆瓦级F级重型燃气轮机完成满负荷试验。
</p>
</motion.div>
<motion.div whileHover={{ y: -5 }} className="bg-green-50 rounded-lg p-4">
<div className="flex items-center mb-2">
<LineChartIcon className="text-green-600 mr-2" size={18} />
<h3 className="font-semibold text-green-800">经营质量</h3>
</div>
<p className="text-sm text-gray-700">
穆迪评级上调至A1，清洁能源装机占比72.71%，新增装机首次突破3000万千瓦。
</p>
</motion.div>
</div>
<h3 className="text-xl font-semibold mb-4 mt-8">各能源板块发展情况</h3>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
<motion.div whileHover={{ y: -5 }} className="bg-white border border-gray-200 rounded-lg p-4 shadow-sm">
<div className="flex items-center mb-2">
<Zap className="text-red-500 mr-2" size={18} />
<h4 className="font-medium">核电板块</h4>
</div>
<p className="text-sm text-gray-600">
广西白龙核电一期工程核准开工，广东廉江核电进入"双机组"建设新阶段，在建核电机组达8台。
</p>
</motion.div>
<motion.div whileHover={{ y: -5 }} className="bg-white border border-gray-200 rounded-lg p-4 shadow-sm">
<div className="flex items-center mb-2">
<Wind className="text-blue-500 mr-2" size={18} />
<h4 className="font-medium">海风板块</h4>
</div>
<p className="text-sm text-gray-600">
山东半岛南U场址二期、广东徐闻增容项目全容量并网，海上风电领先优势得到巩固。
</p>
</motion.div>
<motion.div whileHover={{ y: -5 }} className="bg-white border border-gray-200 rounded-lg p-4 shadow-sm">
<div className="flex items-center mb-2">
<Factory className="text-gray-600 mr-2" size={18} />
<h4 className="font-medium">煤电板块</h4>
</div>
<p className="text-sm text-gray-600">
内蒙古白音华坑口电厂2*66万千瓦超超临界机组投产，全力当好"稳定器"和"压舱石"。
</p>
</motion.div>
<motion.div whileHover={{ y: -5 }} className="bg-white border border-gray-200 rounded-lg p-4 shadow-sm">
<div className="flex items-center mb-2">
<Droplets className="text-blue-300 mr-2" size={18} />
<h4 className="font-medium">水电板块</h4>
</div>
<p className="text-sm text-gray-600">
黄河公司羊曲水电站"一年三投"，实现全容量投产发电，促进青海省新能源规模化开发。
</p>
</motion.div>
<motion.div whileHover={{ y: -5 }} className="bg-white border border-gray-200 rounded-lg p-4 shadow-sm">
<div className="flex items-center mb-2">
<Battery className="text-green-500 mr-2" size={18} />
<h4 className="font-medium">创新业态</h4>
</div>
<p className="text-sm text-gray-600">
大安风光制绿氢合成氨一体化创新示范项目制氢合成氨工程已完成机械竣工。
</p>
</motion.div>
<motion.div whileHover={{ y: -5 }} className="bg-white border border-gray-200 rounded-lg p-4 shadow-sm">
<div className="flex items-center mb-2">
<Globe className="text-purple-500 mr-2" size={18} />
<h4 className="font-medium">国际业务</h4>
</div>
<p className="text-sm text-gray-600">
匈牙利Tokaj197兆瓦光伏并网，境外权益装机达1192万千瓦，涵盖47个国家和地区。
</p>
</motion.div>
</div>
<div className="mt-8 h-80">
<ResponsiveContainer width="100%" height="100%">
<LineChart data={generationData}>
<CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" />
<XAxis dataKey="year" />
<YAxis />
<Tooltip />
<Legend />
<Line
type="monotone"
dataKey="发电量"
stroke="#3b82f6"
strokeWidth={2}
activeDot={{ r: 8 }}
name="发电量(亿千瓦时)"
/>
</LineChart>
</ResponsiveContainer>
</div>
</motion.div>
</section>
{/* 投资分析部分 */}
<section id="investment" className="container mx-auto py-12 px-4">
<motion.div
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8 }}
viewport={{ once: true }}
className="bg-white rounded-xl shadow-md p-6"
>
<h2 className="text-2xl font-bold mb-6 flex items-center">
<div className="w-8 h-8 rounded-full bg-purple-100 flex items-center justify-center text-purple-600 mr-3">
<BarChart2 size={18} />
</div>
投资情况分析
</h2>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
<div>
<h3 className="text-xl font-semibold mb-4">投资规模与趋势</h3>
<p className="mb-4">
2024年，国家电投全年投资规模近2000亿元，同比增长超6%。全年清洁能源投资超1700亿元，同比增长7%。
</p>
<p className="mb-4">
2025年，国家电投集团提出将认真贯彻落实中央经济工作会精神，坚持稳中有进，积极扩大有效投资，保持投资额的稳步增长。
</p>
<p>
清洁能源装机比重将力争达到75%以上，在2024年同比提升2.82个百分点的基础上，再提升2.6个百分点。新能源投产规模预计同比增长3%，力争再创历史新高。
</p>
</div>
<div className="h-64">
<ResponsiveContainer width="100%" height="100%">
<PieChart>
<Pie
data={investmentData}
cx="50%"
cy="50%"
labelLine={false}
outerRadius={80}
fill="#8884d8"
dataKey="value"
nameKey="name"
label={({ name, percent }) => `${name} ${(percent * 100).toFixed(0)}%`}
>
{investmentData.map((entry, index) => (
<Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
))}
</Pie>
<Tooltip />
</PieChart>
</ResponsiveContainer>
</div>
</div>
<h3 className="text-xl font-semibold mb-4 mt-8">重点行业布局投资</h3>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
<div className="bg-blue-50 rounded-lg p-4">
<div className="flex items-center mb-2">
<Sun className="text-yellow-500 mr-2" size={18} />
<h4 className="font-medium">新能源领域</h4>
</div>
<p className="text-sm text-gray-700 mb-2">
光伏方面，黄河公司业务涉及全产业链。N型技术布局方面，黄河水电拥有200MW
IBC电池组件产线，电池平均量产转换效率达到24.2%。
</p>
<p className="text-sm text-gray-700">
2024年国家电投转让了15家新能源公司股权，主要因光伏产业"大而不强"，收益率日渐下滑。
</p>
</div>
<div className="bg-red-50 rounded-lg p-4">
<div className="flex items-center mb-2">
<Zap className="text-red-500 mr-2" size={18} />
<h4 className="font-medium">核电领域</h4>
</div>
<p className="text-sm text-gray-700 mb-2">
2025年电投产融拟置入电投核能100%股权，并募集配套资金用于电投核能旗下山东海阳核电站3、4号机组项目的建设。
</p>
<p className="text-sm text-gray-700">
随着国内核电核准节奏重回正轨，未来数年国电投旗下多个CAP系列三代核电机组将迎来建设高峰期。
</p>
</div>
</div>
<div className="h-80 mt-8">
<ResponsiveContainer width="100%" height="100%">
<BarChart data={sectorData} layout="vertical" margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
<CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" />
<XAxis type="number" />
<YAxis dataKey="name" type="category" />
<Tooltip />
<Legend />
<Bar dataKey="装机" fill="#3b82f6" name="装机(万千瓦)" />
<Bar dataKey="在建" fill="#10b981" name="在建(万千瓦)" />
</BarChart>
</ResponsiveContainer>
</div>
</motion.div>
</section>
{/* 发展战略部分 */}
<section id="strategy" className="container mx-auto py-12 px-4">
<motion.div
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8 }}
viewport={{ once: true }}
className="bg-white rounded-xl shadow-md p-6"
>
<h2 className="text-2xl font-bold mb-6 flex items-center">
<div className="w-8 h-8 rounded-full bg-yellow-100 flex items-center justify-center text-yellow-600 mr-3">
<Award size={18} />
</div>
"均衡增长战略"对发展和投资的影响
</h2>
<div className="mb-8">
<p className="mb-4">
2024年7月，国家电投集团党组聚焦"国之大者"，基于发展实际，制定实施"均衡增长战略"，即坚持"四个均衡"：
</p>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
<div className="bg-blue-50 p-4 rounded-lg">
<h4 className="font-semibold text-blue-800 mb-2">规模增长和投资能力均衡匹配</h4>
<p className="text-sm text-gray-700">合理控制发展节奏，确保投资可持续</p>
</div>
<div className="bg-green-50 p-4 rounded-lg">
<h4 className="font-semibold text-green-800 mb-2">传统产业和创新业态均衡发展</h4>
<p className="text-sm text-gray-700">兼顾传统能源保供与新能源创新</p>
</div>
<div className="bg-purple-50 p-4 rounded-lg">
<h4 className="font-semibold text-purple-800 mb-2">电源品种和区域布局均衡优化</h4>
<p className="text-sm text-gray-700">优化电源结构，合理区域分布</p>
</div>
<div className="bg-yellow-50 p-4 rounded-lg">
<h4 className="font-semibold text-yellow-800 mb-2">存量提质和增量做优均衡推进</h4>
<p className="text-sm text-gray-700">提升存量资产质量，优化新增投资</p>
</div>
</div>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
<div>
<h3 className="text-xl font-semibold mb-4">对发展的影响</h3>
<p className="mb-4">
推动了国家电投各能源板块的协调发展，如在保证新能源快速发展的同时，也注重传统煤电的保供责任，以及水电、核电等项目的稳步推进。
</p>
<p>系统单位围绕"四个均衡"加快实现"四个突破"，践行国家使命和适应市场形势的能力进一步提升。</p>
</div>
<div>
<h3 className="text-xl font-semibold mb-4">对投资的影响</h3>
<p className="mb-4">
战略实施后国家电投进行了一系列产权转让、资产重组，以及成立新公司的动作，如转让部分新能源公司股权，重组远达环保打造水电资产上市平台等，以实现资源的优化配置和投资的均衡。
</p>
<p>战略也调整了电源开发侧重点，不再强调光伏，而是突出核电和风电的发展。</p>
</div>
</div>
</motion.div>
</section>
{/* 未来展望部分 */}
<section id="outlook" className="container mx-auto py-12 px-4">
<motion.div
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8 }}
viewport={{ once: true }}
className="bg-white rounded-xl shadow-md p-6"
>
<h2 className="text-2xl font-bold mb-6 flex items-center">
<div className="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center text-green-600 mr-3">
<Globe size={18} />
</div>
未来展望
</h2>
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
<div>
<h3 className="text-xl font-semibold mb-4">发展目标与规划</h3>
<ul className="space-y-3">
<li className="flex items-start">
<div className="flex-shrink-0 h-5 w-5 text-green-500 mr-2 mt-0.5">
<ChevronUp size={20} />
</div>
<span>清洁能源装机比重将力争达到75%以上</span>
</li>
<li className="flex items-start">
<div className="flex-shrink-0 h-5 w-5 text-green-500 mr-2 mt-0.5">
<ChevronUp size={20} />
</div>
<span>新能源投产规模预计同比增长3%，力争再创历史新高</span>
</li>
<li className="flex items-start">
<div className="flex-shrink-0 h-5 w-5 text-green-500 mr-2 mt-0.5">
<ChevronUp size={20} />
</div>
<span>加力推动"均衡增长战略"落地，全面提升发展质量效益</span>
</li>
<li className="flex items-start">
<div className="flex-shrink-0 h-5 w-5 text-green-500 mr-2 mt-0.5">
<ChevronUp size={20} />
</div>
<span>加强自主创新能力建设，勇当推进高水平科技自立自强的排头兵</span>
</li>
</ul>
</div>
<div>
<h3 className="text-xl font-semibold mb-4">面临的挑战与机遇</h3>
<div className="space-y-4">
<div>
<h4 className="font-medium text-red-600 mb-1">挑战</h4>
<p className="text-sm text-gray-700">
光伏电站面临消纳和电价下行的风险，收益率下滑；核电建设周期长，资金需求巨大；国际业务拓展中面临多方面风险。
</p>
</div>
<div>
<h4 className="font-medium text-green-600 mb-1">机遇</h4>
<p className="text-sm text-gray-700">
全球对清洁能源需求增加；国内核电核准节奏重回正轨；科技创新成果有助于提升核心竞争力。
</p>
</div>
</div>
</div>
</div>
</motion.div>
</section>
{/* 页脚 */}
<footer className="bg-gray-100 py-6 mt-12">
<div className="container mx-auto px-4 text-center text-sm text-gray-600">
<p>
created by{' '}
<a href="https://space.coze.cn" className="text-blue-600 hover:text-blue-800">
coze space
</a>
</p>
<p className="mt-1">页面内容均由 AI 生成，仅供参考</p>
</div>
</footer>
</div>
)
}
export default SPICReport
查看编译后的代码
'use strict'
Object.defineProperty(exports, '__esModule', {
value: true,
})
Object.defineProperty(exports, 'default', {
enumerable: true,
get: function () {
return _default
},
})
const _lucidereact = require('lucide-react')
const _react = /*#__PURE__*/ _interop_require_wildcard(require('react'))
const _recharts = require('recharts')
const _framermotion = require('framer-motion')
function _getRequireWildcardCache(nodeInterop) {
if (typeof WeakMap !== 'function') return null
var cacheBabelInterop = new WeakMap()
var cacheNodeInterop = new WeakMap()
return (_getRequireWildcardCache = function (nodeInterop) {
return nodeInterop ? cacheNodeInterop : cacheBabelInterop
})(nodeInterop)
}
function _interop_require_wildcard(obj, nodeInterop) {
if (!nodeInterop && obj && obj.__esModule) {
return obj
}
if (obj === null || (typeof obj !== 'object' && typeof obj !== 'function')) {
return {
default: obj,
}
}
var cache = _getRequireWildcardCache(nodeInterop)
if (cache && cache.has(obj)) {
return cache.get(obj)
}
var newObj = {
__proto__: null,
}
var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor
for (var key in obj) {
if (key !== 'default' && Object.prototype.hasOwnProperty.call(obj, key)) {
var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null
if (desc && (desc.get || desc.set)) {
Object.defineProperty(newObj, key, desc)
} else {
newObj[key] = obj[key]
}
}
}
newObj.default = obj
if (cache) {
cache.set(obj, newObj)
}
return newObj
}
const SPICReport = () => {
const [activeSection, setActiveSection] = (0, _react.useState)('overview')
const [isMobileMenuOpen, setIsMobileMenuOpen] = (0, _react.useState)(false)
// 装机容量数据
const capacityData = [
{
name: '2015',
总装机: 1.07,
清洁能源: 0.43,
清洁占比: 40,
},
{
name: '2024',
总装机: 2.6,
清洁能源: 1.93,
清洁占比: 72.71,
},
]
// 发电量数据
const generationData = [
{
year: '2021',
发电量: 5600,
},
{
year: '2022',
发电量: 6200,
},
{
year: '2023',
发电量: 6800,
},
{
year: '2024',
发电量: 7200,
},
]
// 投资分布数据
const investmentData = [
{
name: '核电',
value: 450,
},
{
name: '风电',
value: 600,
},
{
name: '光伏',
value: 500,
},
{
name: '煤电',
value: 200,
},
{
name: '水电',
value: 150,
},
{
name: '其他',
value: 100,
},
]
// 各板块装机数据
const sectorData = [
{
name: '核电',
装机: 745,
在建: 250,
},
{
name: '风电',
装机: 1800,
在建: 930,
},
{
name: '光伏',
装机: 2500,
在建: 800,
},
{
name: '煤电',
装机: 6700,
在建: 400,
},
{
name: '水电',
装机: 1200,
在建: 300,
},
]
const COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042', '#8884D8', '#82CA9D']
const scrollToSection = (sectionId) => {
const element = document.getElementById(sectionId)
if (element) {
element.scrollIntoView({
behavior: 'smooth',
})
setActiveSection(sectionId)
setIsMobileMenuOpen(false)
}
}
return /*#__PURE__*/ _react.default.createElement(
'div',
{
className: 'min-h-screen font-sans bg-gray-50 text-gray-800',
},
/*#__PURE__*/ _react.default.createElement(
'nav',
{
className: 'sticky top-0 z-50 bg-white shadow-sm',
},
/*#__PURE__*/ _react.default.createElement(
'div',
{
className: 'container mx-auto px-4 py-3 flex justify-between items-center',
},
/*#__PURE__*/ _react.default.createElement(
'div',
{
className: 'flex items-center',
},
/*#__PURE__*/ _react.default.createElement(_lucidereact.Zap, {
className: 'text-blue-600 mr-2',
size: 24,
}),
/*#__PURE__*/ _react.default.createElement(
'h1',
{
className: 'text-xl font-bold text-blue-800',
},
'国家电投发展报告'
)
),
/*#__PURE__*/ _react.default.createElement(
'div',
{
className: 'hidden md:flex space-x-6',
},
['overview', 'development', 'investment', 'strategy', 'outlook'].map((item) =>
/*#__PURE__*/ _react.default.createElement(
'button',
{
key: item,
onClick: () => scrollToSection(item),
className: `${
activeSection === item ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-600'
} px-1 py-2 font-medium transition-colors`,
},
{
overview: '公司概况',
development: '发展情况',
investment: '投资分析',
strategy: '发展战略',
outlook: '未来展望',
}[item]
)
)
),
/*#__PURE__*/ _react.default.createElement(
'button',
{
className: 'md:hidden text-gray-600',
onClick: () => setIsMobileMenuOpen(!isMobileMenuOpen),
},
isMobileMenuOpen
? /*#__PURE__*/ _react.default.createElement(_lucidereact.ChevronUp, {
size: 24,
})
: /*#__PURE__*/ _react.default.createElement(_lucidereact.ChevronDown, {
size: 24,
})
)
),
isMobileMenuOpen &&
/*#__PURE__*/ _react.default.createElement(
'div',
{
className: 'md:hidden bg-white py-2 px-4 shadow-md',
},
['overview', 'development', 'investment', 'strategy', 'outlook'].map((item) =>
/*#__PURE__*/ _react.default.createElement(
'button',
{
key: item,
onClick: () => scrollToSection(item),
className: `${
activeSection === item ? 'text-blue-600 bg-blue-50' : 'text-gray-600'
} block w-full text-left px-4 py-2 rounded-md mb-1`,
},
{
overview: '公司概况',
development: '发展情况',
investment: '投资分析',
strategy: '发展战略',
outlook: '未来展望',
}[item]
)
)
)
),
/*#__PURE__*/ _react.default.createElement(
'header',
{
className: 'bg-gradient-to-r from-blue-700 to-blue-900 text-white py-16',
},
/*#__PURE__*/ _react.default.createElement(
'div',
{
className: 'container mx-auto px-4 text-center',
},
/*#__PURE__*/ _react.default.createElement(
_framermotion.motion.h1,
{
initial: {
opacity: 0,
y: 20,
},
animate: {
opacity: 1,
y: 0,
},
transition: {
duration: 0.8,
},
className: 'text-3xl md:text-4xl font-bold mb-4',
},
'国家电投发展与投资分析报告'
),
/*#__PURE__*/ _react.default.createElement(
'p',
{
className: 'text-xl mb-8',
},
'中国领先的综合性能源企业'
),
/*#__PURE__*/ _react.default.createElement(
'div',
{
className: 'flex flex-wrap justify-center gap-4',
},
/*#__PURE__*/ _react.default.createElement(
_framermotion.motion.div,
{
whileHover: {
scale: 1.05,
},
className: 'bg-white/10 backdrop-blur-md rounded-xl p-4 min-w-[200px]',
},
/*#__PURE__*/ _react.default.createElement(
'div',
{
className: 'flex items-center justify-center mb-2',
},
/*#__PURE__*/ _react.default.createElement(_lucidereact.Zap, {
className: 'mr-2',
size: 20,
}),
/*#__PURE__*/ _react.default.createElement(
'span',
{
className: 'font-medium',
},
'总装机容量'
)
),
/*#__PURE__*/ _react.default.createElement(
'div',
{
className: 'text-2xl font-bold',
},
'2.6亿千瓦'
),
/*#__PURE__*/ _react.default.createElement(
'div',
{
className: 'text-sm mt-1',
},
'清洁能源占比72.71%'
)
),
/*#__PURE__*/ _react.default.createElement(
_framermotion.motion.div,
{
whileHover: {
scale: 1.05,
},
className: 'bg-white/10 backdrop-blur-md rounded-xl p-4 min-w-[200px]',
},
/*#__PURE__*/ _react.default.createElement(
'div',
{
className: 'flex items-center justify-center mb-2',
},
/*#__PURE__*/ _react.default.createElement(_lucidereact.Activity, {
className: 'mr-2',
size: 20,
}),
/*#__PURE__*/ _react.default.createElement(
'span',
{
className: 'font-medium',
},
'年发电量'
)
),
/*#__PURE__*/ _react.default.createElement(
'div',
{
className: 'text-2xl font-bold',
},
'7200亿千瓦时'
),
/*#__PURE__*/ _react.default.createElement(
'div',
{
className: 'text-sm mt-1',
},
'同比增长6.3%'
)
),
/*#__PURE__*/ _react.default.createElement(
_framermotion.motion.div,
{
whileHover: {
scale: 1.05,
},
className: 'bg-white/10 backdrop-blur-md rounded-xl p-4 min-w-[200px]',
},
/*#__PURE__*/ _react.default.createElement(
'div',
{
className: 'flex items-center justify-center mb-2',
},
/*#__PURE__*/ _react.default.createElement(_lucidereact.BarChart2, {
className: 'mr-2',
size: 20,
}),
/*#__PURE__*/ _react.default.createElement(
'span',
{
className: 'font-medium',
},
'年投资额'
)
),
/*#__PURE__*/ _react.default.createElement(
'div',
{
className: 'text-2xl font-bold',
},
'2000亿元'
),
/*#__PURE__*/ _react.default.createElement(
'div',
{
className: 'text-sm mt-1',
},
'清洁能源占比85%'
)
)
)
)
),
/*#__PURE__*/ _react.default.createElement(
'section',
{
id: 'overview',
className: 'container mx-auto py-12 px-4',
},
/*#__PURE__*/ _react.default.createElement(
_framermotion.motion.div,
{
initial: {
opacity: 0,
y: 20,
},
whileInView: {
opacity: 1,
y: 0,
},
transition: {
duration: 0.8,
},
viewport: {
once: true,
},
className: 'bg-white rounded-xl shadow-md p-6 mb-8',
},
/*#__PURE__*/ _react.default.createElement(
'h2',
{
className: 'text-2xl font-bold mb-6 flex items-center',
},
/*#__PURE__*/ _react.default.createElement(
'div',
{
className: 'w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 mr-3',
},
/*#__PURE__*/ _react.default.createElement(_lucidereact.Globe, {
size: 18,
})
),
'公司概况'
),
/*#__PURE__*/ _react.default.createElement(
'div',
{
className: 'grid grid-cols-1 md:grid-cols-2 gap-8',
},
/*#__PURE__*/ _react.default.createElement(
'div',
null,
/*#__PURE__*/ _react.default.createElement(
'p',
{
className: 'mb-4',
},
'国家电力投资集团有限公司于2015年5月由中国电力投资集团和国家核电技术有限公司重组成立，是中国第一家拥有新能源、核电、水电、火电等全部发电类型的综合性能源企业。'
),
/*#__PURE__*/ _react.default.createElement(
'p',
{
className: 'mb-4',
},
'成立之初，国家电投装机规模位于五大发电集团末位；资产总额位列第三，次于华能集团及原国电集团。但在清洁能源方面拥有先天优势，火电装机最少、清洁能源占比最高，当年已达40%。'
),
/*#__PURE__*/ _react.default.createElement(
'p',
null,
'截至2024年底，国家电投电力总装机达2.6亿千瓦，全年发电量超7200亿千瓦时，装机排名升至第三；总资产升至第二，仅次于国家能源集团；清洁能源装机已达1.93亿千瓦，占比升至72.71%，仍位列五大发电集团之首。'
)
),
/*#__PURE__*/ _react.default.createElement(
'div',
{
className: 'h-64 md:h-full',
},
/*#__PURE__*/ _react.default.createElement(
_recharts.ResponsiveContainer,
{
width: '100%',
height: '100%',
},
/*#__PURE__*/ _react.default.createElement(
_recharts.BarChart,
{
data: capacityData,
},
/*#__PURE__*/ _react.default.createElement(_recharts.CartesianGrid, {
strokeDasharray: '3 3',
stroke: '#f0f0f0',
}),
/*#__PURE__*/ _react.default.createElement(_recharts.XAxis, {
dataKey: 'name',
}),
/*#__PURE__*/ _react.default.createElement(_recharts.YAxis, null),
/*#__PURE__*/ _react.default.createElement(_recharts.Tooltip, null),
/*#__PURE__*/ _react.default.createElement(_recharts.Legend, null),
/*#__PURE__*/ _react.default.createElement(_recharts.Bar, {
dataKey: '总装机',
fill: '#3b82f6',
name: '总装机(亿千瓦)',
}),
/*#__PURE__*/ _react.default.createElement(_recharts.Bar, {
dataKey: '清洁能源',
fill: '#10b981',
name: '清洁能源(亿千瓦)',
})
)
)
)
)
)
),
/*#__PURE__*/ _react.default.createElement(
'section',
{
id: 'development',
className: 'container mx-auto py-12 px-4',
},
/*#__PURE__*/ _react.default.createElement(
_framermotion.motion.div,
{
initial: {
opacity: 0,
y: 20,
},
whileInView: {
opacity: 1,
y: 0,
},
transition: {
duration: 0.8,
},
viewport: {
once: true,
},
className: 'bg-white rounded-xl shadow-md p-6 mb-8',
},
/*#__PURE__*/ _react.default.createElement(
'h2',
{
className: 'text-2xl font-bold mb-6 flex items-center',
},
/*#__PURE__*/ _react.default.createElement(
'div',
{
className: 'w-8 h-8 rounded-full bg-green-100 flex items-center justify-center text-green-600 mr-3',
},
/*#__PURE__*/ _react.default.createElement(_lucidereact.Activity, {
size: 18,
})
),
'2024年发展成果'
),
/*#__PURE__*/ _react.default.createElement(
'div',
{
className: 'grid grid-cols-1 md:grid-cols-3 gap-6 mb-8',
},
/*#__PURE__*/ _react.default.createElement(
_framermotion.motion.div,
{
whileHover: {
y: -5,
},
className: 'bg-blue-50 rounded-lg p-4',
},
/*#__PURE__*/ _react.default.createElement(
'div',
{
className: 'flex items-center mb-2',
},
/*#__PURE__*/ _react.default.createElement(_lucidereact.Award, {
className: 'text-blue-600 mr-2',
size: 18,
}),
/*#__PURE__*/ _react.default.createElement(
'h3',
{
className: 'font-semibold text-blue-800',
},
'党建与改革'
)
),
/*#__PURE__*/ _react.default.createElement(
'p',
{
className: 'text-sm text-gray-700',
},
'巡视整改实效为先、真抓实改，深化改革系统推进，企业更加坚定更加主动地融入和服务全国大局。'
)
),
/*#__PURE__*/ _react.default.createElement(
_framermotion.motion.div,
{
whileHover: {
y: -5,
},
className: 'bg-purple-50 rounded-lg p-4',
},
/*#__PURE__*/ _react.default.createElement(
'div',
{
className: 'flex items-center mb-2',
},
/*#__PURE__*/ _react.default.createElement(_lucidereact.Zap, {
className: 'text-purple-600 mr-2',
size: 18,
}),
/*#__PURE__*/ _react.default.createElement(
'h3',
{
className: 'font-semibold text-purple-800',
},
'科技创新'
)
),
/*#__PURE__*/ _react.default.createElement(
'p',
{
className: 'text-sm text-gray-700',
},
'"国和一号"示范工程1号机组成功并网发电，300兆瓦级F级重型燃气轮机完成满负荷试验。'
)
),
/*#__PURE__*/ _react.default.createElement(
_framermotion.motion.div,
{
whileHover: {
y: -5,
},
className: 'bg-green-50 rounded-lg p-4',
},
/*#__PURE__*/ _react.default.createElement(
'div',
{
className: 'flex items-center mb-2',
},
/*#__PURE__*/ _react.default.createElement(_lucidereact.LineChart, {
className: 'text-green-600 mr-2',
size: 18,
}),
/*#__PURE__*/ _react.default.createElement(
'h3',
{
className: 'font-semibold text-green-800',
},
'经营质量'
)
),
/*#__PURE__*/ _react.default.createElement(
'p',
{
className: 'text-sm text-gray-700',
},
'穆迪评级上调至A1，清洁能源装机占比72.71%，新增装机首次突破3000万千瓦。'
)
)
),
/*#__PURE__*/ _react.default.createElement(
'h3',
{
className: 'text-xl font-semibold mb-4 mt-8',
},
'各能源板块发展情况'
),
/*#__PURE__*/ _react.default.createElement(
'div',
{
className: 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8',
},
/*#__PURE__*/ _react.default.createElement(
_framermotion.motion.div,
{
whileHover: {
y: -5,
},
className: 'bg-white border border-gray-200 rounded-lg p-4 shadow-sm',
},
/*#__PURE__*/ _react.default.createElement(
'div',
{
className: 'flex items-center mb-2',
},
/*#__PURE__*/ _react.default.createElement(_lucidereact.Zap, {
className: 'text-red-500 mr-2',
size: 18,
}),
/*#__PURE__*/ _react.default.createElement(
'h4',
{
className: 'font-medium',
},
'核电板块'
)
),
/*#__PURE__*/ _react.default.createElement(
'p',
{
className: 'text-sm text-gray-600',
},
'广西白龙核电一期工程核准开工，广东廉江核电进入"双机组"建设新阶段，在建核电机组达8台。'
)
),
/*#__PURE__*/ _react.default.createElement(
_framermotion.motion.div,
{
whileHover: {
y: -5,
},
className: 'bg-white border border-gray-200 rounded-lg p-4 shadow-sm',
},
/*#__PURE__*/ _react.default.createElement(
'div',
{
className: 'flex items-center mb-2',
},
/*#__PURE__*/ _react.default.createElement(_lucidereact.Wind, {
className: 'text-blue-500 mr-2',
size: 18,
}),
/*#__PURE__*/ _react.default.createElement(
'h4',
{
className: 'font-medium',
},
'海风板块'
)
),
/*#__PURE__*/ _react.default.createElement(
'p',
{
className: 'text-sm text-gray-600',
},
'山东半岛南U场址二期、广东徐闻增容项目全容量并网，海上风电领先优势得到巩固。'
)
),
/*#__PURE__*/ _react.default.createElement(
_framermotion.motion.div,
{
whileHover: {
y: -5,
},
className: 'bg-white border border-gray-200 rounded-lg p-4 shadow-sm',
},
/*#__PURE__*/ _react.default.createElement(
'div',
{
className: 'flex items-center mb-2',
},
/*#__PURE__*/ _react.default.createElement(_lucidereact.Factory, {
className: 'text-gray-600 mr-2',
size: 18,
}),
/*#__PURE__*/ _react.default.createElement(
'h4',
{
className: 'font-medium',
},
'煤电板块'
)
),
/*#__PURE__*/ _react.default.createElement(
'p',
{
className: 'text-sm text-gray-600',
},
'内蒙古白音华坑口电厂2*66万千瓦超超临界机组投产，全力当好"稳定器"和"压舱石"。'
)
),
/*#__PURE__*/ _react.default.createElement(
_framermotion.motion.div,
{
whileHover: {
y: -5,
},
className: 'bg-white border border-gray-200 rounded-lg p-4 shadow-sm',
},
/*#__PURE__*/ _react.default.createElement(
'div',
{
className: 'flex items-center mb-2',
},
/*#__PURE__*/ _react.default.createElement(_lucidereact.Droplets, {
className: 'text-blue-300 mr-2',
size: 18,
}),
/*#__PURE__*/ _react.default.createElement(
'h4',
{
className: 'font-medium',
},
'水电板块'
)
),
/*#__PURE__*/ _react.default.createElement(
'p',
{
className: 'text-sm text-gray-600',
},
'黄河公司羊曲水电站"一年三投"，实现全容量投产发电，促进青海省新能源规模化开发。'
)
),
/*#__PURE__*/ _react.default.createElement(
_framermotion.motion.div,
{
whileHover: {
y: -5,
},
className: 'bg-white border border-gray-200 rounded-lg p-4 shadow-sm',
},
/*#__PURE__*/ _react.default.createElement(
'div',
{
className: 'flex items-center mb-2',
},
/*#__PURE__*/ _react.default.createElement(_lucidereact.Battery, {
className: 'text-green-500 mr-2',
size: 18,
}),
/*#__PURE__*/ _react.default.createElement(
'h4',
{
className: 'font-medium',
},
'创新业态'
)
),
/*#__PURE__*/ _react.default.createElement(
'p',
{
className: 'text-sm text-gray-600',
},
'大安风光制绿氢合成氨一体化创新示范项目制氢合成氨工程已完成机械竣工。'
)
),
/*#__PURE__*/ _react.default.createElement(
_framermotion.motion.div,
{
whileHover: {
y: -5,
},
className: 'bg-white border border-gray-200 rounded-lg p-4 shadow-sm',
},
/*#__PURE__*/ _react.default.createElement(
'div',
{
className: 'flex items-center mb-2',
},
/*#__PURE__*/ _react.default.createElement(_lucidereact.Globe, {
className: 'text-purple-500 mr-2',
size: 18,
}),
/*#__PURE__*/ _react.default.createElement(
'h4',
{
className: 'font-medium',
},
'国际业务'
)
),
/*#__PURE__*/ _react.default.createElement(
'p',
{
className: 'text-sm text-gray-600',
},
'匈牙利Tokaj197兆瓦光伏并网，境外权益装机达1192万千瓦，涵盖47个国家和地区。'
)
)
),
/*#__PURE__*/ _react.default.createElement(
'div',
{
className: 'mt-8 h-80',
},
/*#__PURE__*/ _react.default.createElement(
_recharts.ResponsiveContainer,
{
width: '100%',
height: '100%',
},
/*#__PURE__*/ _react.default.createElement(
_recharts.LineChart,
{
data: generationData,
},
/*#__PURE__*/ _react.default.createElement(_recharts.CartesianGrid, {
strokeDasharray: '3 3',
stroke: '#f0f0f0',
}),
/*#__PURE__*/ _react.default.createElement(_recharts.XAxis, {
dataKey: 'year',
}),
/*#__PURE__*/ _react.default.createElement(_recharts.YAxis, null),
/*#__PURE__*/ _react.default.createElement(_recharts.Tooltip, null),
/*#__PURE__*/ _react.default.createElement(_recharts.Legend, null),
/*#__PURE__*/ _react.default.createElement(_recharts.Line, {
type: 'monotone',
dataKey: '发电量',
stroke: '#3b82f6',
strokeWidth: 2,
activeDot: {
r: 8,
},
name: '发电量(亿千瓦时)',
})
)
)
)
)
),
/*#__PURE__*/ _react.default.createElement(
'section',
{
id: 'investment',
className: 'container mx-auto py-12 px-4',
},
/*#__PURE__*/ _react.default.createElement(
_framermotion.motion.div,
{
initial: {
opacity: 0,
y: 20,
},
whileInView: {
opacity: 1,
y: 0,
},
transition: {
duration: 0.8,
},
viewport: {
once: true,
},
className: 'bg-white rounded-xl shadow-md p-6',
},
/*#__PURE__*/ _react.default.createElement(
'h2',
{
className: 'text-2xl font-bold mb-6 flex items-center',
},
/*#__PURE__*/ _react.default.createElement(
'div',
{
className: 'w-8 h-8 rounded-full bg-purple-100 flex items-center justify-center text-purple-600 mr-3',
},
/*#__PURE__*/ _react.default.createElement(_lucidereact.BarChart2, {
size: 18,
})
),
'投资情况分析'
),
/*#__PURE__*/ _react.default.createElement(
'div',
{
className: 'grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8',
},
/*#__PURE__*/ _react.default.createElement(
'div',
null,
/*#__PURE__*/ _react.default.createElement(
'h3',
{
className: 'text-xl font-semibold mb-4',
},
'投资规模与趋势'
),
/*#__PURE__*/ _react.default.createElement(
'p',
{
className: 'mb-4',
},
'2024年，国家电投全年投资规模近2000亿元，同比增长超6%。全年清洁能源投资超1700亿元，同比增长7%。'
),
/*#__PURE__*/ _react.default.createElement(
'p',
{
className: 'mb-4',
},
'2025年，国家电投集团提出将认真贯彻落实中央经济工作会精神，坚持稳中有进，积极扩大有效投资，保持投资额的稳步增长。'
),
/*#__PURE__*/ _react.default.createElement(
'p',
null,
'清洁能源装机比重将力争达到75%以上，在2024年同比提升2.82个百分点的基础上，再提升2.6个百分点。新能源投产规模预计同比增长3%，力争再创历史新高。'
)
),
/*#__PURE__*/ _react.default.createElement(
'div',
{
className: 'h-64',
},
/*#__PURE__*/ _react.default.createElement(
_recharts.ResponsiveContainer,
{
width: '100%',
height: '100%',
},
/*#__PURE__*/ _react.default.createElement(
_recharts.PieChart,
null,
/*#__PURE__*/ _react.default.createElement(
_recharts.Pie,
{
data: investmentData,
cx: '50%',
cy: '50%',
labelLine: false,
outerRadius: 80,
fill: '#8884d8',
dataKey: 'value',
nameKey: 'name',
label: ({ name, percent }) => `${name} ${(percent * 100).toFixed(0)}%`,
},
investmentData.map((entry, index) =>
/*#__PURE__*/ _react.default.createElement(_recharts.Cell, {
key: `cell-${index}`,
fill: COLORS[index % COLORS.length],
})
)
),
/*#__PURE__*/ _react.default.createElement(_recharts.Tooltip, null)
)
)
)
),
/*#__PURE__*/ _react.default.createElement(
'h3',
{
className: 'text-xl font-semibold mb-4 mt-8',
},
'重点行业布局投资'
),
/*#__PURE__*/ _react.default.createElement(
'div',
{
className: 'grid grid-cols-1 md:grid-cols-2 gap-6 mb-8',
},
/*#__PURE__*/ _react.default.createElement(
'div',
{
className: 'bg-blue-50 rounded-lg p-4',
},
/*#__PURE__*/ _react.default.createElement(
'div',
{
className: 'flex items-center mb-2',
},
/*#__PURE__*/ _react.default.createElement(_lucidereact.Sun, {
className: 'text-yellow-500 mr-2',
size: 18,
}),
/*#__PURE__*/ _react.default.createElement(
'h4',
{
className: 'font-medium',
},
'新能源领域'
)
),
/*#__PURE__*/ _react.default.createElement(
'p',
{
className: 'text-sm text-gray-700 mb-2',
},
'光伏方面，黄河公司业务涉及全产业链。N型技术布局方面，黄河水电拥有200MW IBC电池组件产线，电池平均量产转换效率达到24.2%。'
),
/*#__PURE__*/ _react.default.createElement(
'p',
{
className: 'text-sm text-gray-700',
},
'2024年国家电投转让了15家新能源公司股权，主要因光伏产业"大而不强"，收益率日渐下滑。'
)
),
/*#__PURE__*/ _react.default.createElement(
'div',
{
className: 'bg-red-50 rounded-lg p-4',
},
/*#__PURE__*/ _react.default.createElement(
'div',
{
className: 'flex items-center mb-2',
},
/*#__PURE__*/ _react.default.createElement(_lucidereact.Zap, {
className: 'text-red-500 mr-2',
size: 18,
}),
/*#__PURE__*/ _react.default.createElement(
'h4',
{
className: 'font-medium',
},
'核电领域'
)
),
/*#__PURE__*/ _react.default.createElement(
'p',
{
className: 'text-sm text-gray-700 mb-2',
},
'2025年电投产融拟置入电投核能100%股权，并募集配套资金用于电投核能旗下山东海阳核电站3、4号机组项目的建设。'
),
/*#__PURE__*/ _react.default.createElement(
'p',
{
className: 'text-sm text-gray-700',
},
'随着国内核电核准节奏重回正轨，未来数年国电投旗下多个CAP系列三代核电机组将迎来建设高峰期。'
)
)
),
/*#__PURE__*/ _react.default.createElement(
'div',
{
className: 'h-80 mt-8',
},
/*#__PURE__*/ _react.default.createElement(
_recharts.ResponsiveContainer,
{
width: '100%',
height: '100%',
},
/*#__PURE__*/ _react.default.createElement(
_recharts.BarChart,
{
data: sectorData,
layout: 'vertical',
margin: {
top: 5,
right: 30,
left: 20,
bottom: 5,
},
},
/*#__PURE__*/ _react.default.createElement(_recharts.CartesianGrid, {
strokeDasharray: '3 3',
stroke: '#f0f0f0',
}),
/*#__PURE__*/ _react.default.createElement(_recharts.XAxis, {
type: 'number',
}),
/*#__PURE__*/ _react.default.createElement(_recharts.YAxis, {
dataKey: 'name',
type: 'category',
}),
/*#__PURE__*/ _react.default.createElement(_recharts.Tooltip, null),
/*#__PURE__*/ _react.default.createElement(_recharts.Legend, null),
/*#__PURE__*/ _react.default.createElement(_recharts.Bar, {
dataKey: '装机',
fill: '#3b82f6',
name: '装机(万千瓦)',
}),
/*#__PURE__*/ _react.default.createElement(_recharts.Bar, {
dataKey: '在建',
fill: '#10b981',
name: '在建(万千瓦)',
})
)
)
)
)
),
/*#__PURE__*/ _react.default.createElement(
'section',
{
id: 'strategy',
className: 'container mx-auto py-12 px-4',
},
/*#__PURE__*/ _react.default.createElement(
_framermotion.motion.div,
{
initial: {
opacity: 0,
y: 20,
},
whileInView: {
opacity: 1,
y: 0,
},
transition: {
duration: 0.8,
},
viewport: {
once: true,
},
className: 'bg-white rounded-xl shadow-md p-6',
},
/*#__PURE__*/ _react.default.createElement(
'h2',
{
className: 'text-2xl font-bold mb-6 flex items-center',
},
/*#__PURE__*/ _react.default.createElement(
'div',
{
className: 'w-8 h-8 rounded-full bg-yellow-100 flex items-center justify-center text-yellow-600 mr-3',
},
/*#__PURE__*/ _react.default.createElement(_lucidereact.Award, {
size: 18,
})
),
'"均衡增长战略"对发展和投资的影响'
),
/*#__PURE__*/ _react.default.createElement(
'div',
{
className: 'mb-8',
},
/*#__PURE__*/ _react.default.createElement(
'p',
{
className: 'mb-4',
},
'2024年7月，国家电投集团党组聚焦"国之大者"，基于发展实际，制定实施"均衡增长战略"，即坚持"四个均衡"：'
),
/*#__PURE__*/ _react.default.createElement(
'div',
{
className: 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6',
},
/*#__PURE__*/ _react.default.createElement(
'div',
{
className: 'bg-blue-50 p-4 rounded-lg',
},
/*#__PURE__*/ _react.default.createElement(
'h4',
{
className: 'font-semibold text-blue-800 mb-2',
},
'规模增长和投资能力均衡匹配'
),
/*#__PURE__*/ _react.default.createElement(
'p',
{
className: 'text-sm text-gray-700',
},
'合理控制发展节奏，确保投资可持续'
)
),
/*#__PURE__*/ _react.default.createElement(
'div',
{
className: 'bg-green-50 p-4 rounded-lg',
},
/*#__PURE__*/ _react.default.createElement(
'h4',
{
className: 'font-semibold text-green-800 mb-2',
},
'传统产业和创新业态均衡发展'
),
/*#__PURE__*/ _react.default.createElement(
'p',
{
className: 'text-sm text-gray-700',
},
'兼顾传统能源保供与新能源创新'
)
),
/*#__PURE__*/ _react.default.createElement(
'div',
{
className: 'bg-purple-50 p-4 rounded-lg',
},
/*#__PURE__*/ _react.default.createElement(
'h4',
{
className: 'font-semibold text-purple-800 mb-2',
},
'电源品种和区域布局均衡优化'
),
/*#__PURE__*/ _react.default.createElement(
'p',
{
className: 'text-sm text-gray-700',
},
'优化电源结构，合理区域分布'
)
),
/*#__PURE__*/ _react.default.createElement(
'div',
{
className: 'bg-yellow-50 p-4 rounded-lg',
},
/*#__PURE__*/ _react.default.createElement(
'h4',
{
className: 'font-semibold text-yellow-800 mb-2',
},
'存量提质和增量做优均衡推进'
),
/*#__PURE__*/ _react.default.createElement(
'p',
{
className: 'text-sm text-gray-700',
},
'提升存量资产质量，优化新增投资'
)
)
)
),
/*#__PURE__*/ _react.default.createElement(
'div',
{
className: 'grid grid-cols-1 md:grid-cols-2 gap-8',
},
/*#__PURE__*/ _react.default.createElement(
'div',
null,
/*#__PURE__*/ _react.default.createElement(
'h3',
{
className: 'text-xl font-semibold mb-4',
},
'对发展的影响'
),
/*#__PURE__*/ _react.default.createElement(
'p',
{
className: 'mb-4',
},
'推动了国家电投各能源板块的协调发展，如在保证新能源快速发展的同时，也注重传统煤电的保供责任，以及水电、核电等项目的稳步推进。'
),
/*#__PURE__*/ _react.default.createElement(
'p',
null,
'系统单位围绕"四个均衡"加快实现"四个突破"，践行国家使命和适应市场形势的能力进一步提升。'
)
),
/*#__PURE__*/ _react.default.createElement(
'div',
null,
/*#__PURE__*/ _react.default.createElement(
'h3',
{
className: 'text-xl font-semibold mb-4',
},
'对投资的影响'
),
/*#__PURE__*/ _react.default.createElement(
'p',
{
className: 'mb-4',
},
'战略实施后国家电投进行了一系列产权转让、资产重组，以及成立新公司的动作，如转让部分新能源公司股权，重组远达环保打造水电资产上市平台等，以实现资源的优化配置和投资的均衡。'
),
/*#__PURE__*/ _react.default.createElement(
'p',
null,
'战略也调整了电源开发侧重点，不再强调光伏，而是突出核电和风电的发展。'
)
)
)
)
),
/*#__PURE__*/ _react.default.createElement(
'section',
{
id: 'outlook',
className: 'container mx-auto py-12 px-4',
},
/*#__PURE__*/ _react.default.createElement(
_framermotion.motion.div,
{
initial: {
opacity: 0,
y: 20,
},
whileInView: {
opacity: 1,
y: 0,
},
transition: {
duration: 0.8,
},
viewport: {
once: true,
},
className: 'bg-white rounded-xl shadow-md p-6',
},
/*#__PURE__*/ _react.default.createElement(
'h2',
{
className: 'text-2xl font-bold mb-6 flex items-center',
},
/*#__PURE__*/ _react.default.createElement(
'div',
{
className: 'w-8 h-8 rounded-full bg-green-100 flex items-center justify-center text-green-600 mr-3',
},
/*#__PURE__*/ _react.default.createElement(_lucidereact.Globe, {
size: 18,
})
),
'未来展望'
),
/*#__PURE__*/ _react.default.createElement(
'div',
{
className: 'grid grid-cols-1 md:grid-cols-2 gap-8 mb-8',
},
/*#__PURE__*/ _react.default.createElement(
'div',
null,
/*#__PURE__*/ _react.default.createElement(
'h3',
{
className: 'text-xl font-semibold mb-4',
},
'发展目标与规划'
),
/*#__PURE__*/ _react.default.createElement(
'ul',
{
className: 'space-y-3',
},
/*#__PURE__*/ _react.default.createElement(
'li',
{
className: 'flex items-start',
},
/*#__PURE__*/ _react.default.createElement(
'div',
{
className: 'flex-shrink-0 h-5 w-5 text-green-500 mr-2 mt-0.5',
},
/*#__PURE__*/ _react.default.createElement(_lucidereact.ChevronUp, {
size: 20,
})
),
/*#__PURE__*/ _react.default.createElement('span', null, '清洁能源装机比重将力争达到75%以上')
),
/*#__PURE__*/ _react.default.createElement(
'li',
{
className: 'flex items-start',
},
/*#__PURE__*/ _react.default.createElement(
'div',
{
className: 'flex-shrink-0 h-5 w-5 text-green-500 mr-2 mt-0.5',
},
/*#__PURE__*/ _react.default.createElement(_lucidereact.ChevronUp, {
size: 20,
})
),
/*#__PURE__*/ _react.default.createElement(
'span',
null,
'新能源投产规模预计同比增长3%，力争再创历史新高'
)
),
/*#__PURE__*/ _react.default.createElement(
'li',
{
className: 'flex items-start',
},
/*#__PURE__*/ _react.default.createElement(
'div',
{
className: 'flex-shrink-0 h-5 w-5 text-green-500 mr-2 mt-0.5',
},
/*#__PURE__*/ _react.default.createElement(_lucidereact.ChevronUp, {
size: 20,
})
),
/*#__PURE__*/ _react.default.createElement(
'span',
null,
'加力推动"均衡增长战略"落地，全面提升发展质量效益'
)
),
/*#__PURE__*/ _react.default.createElement(
'li',
{
className: 'flex items-start',
},
/*#__PURE__*/ _react.default.createElement(
'div',
{
className: 'flex-shrink-0 h-5 w-5 text-green-500 mr-2 mt-0.5',
},
/*#__PURE__*/ _react.default.createElement(_lucidereact.ChevronUp, {
size: 20,
})
),
/*#__PURE__*/ _react.default.createElement(
'span',
null,
'加强自主创新能力建设，勇当推进高水平科技自立自强的排头兵'
)
)
)
),
/*#__PURE__*/ _react.default.createElement(
'div',
null,
/*#__PURE__*/ _react.default.createElement(
'h3',
{
className: 'text-xl font-semibold mb-4',
},
'面临的挑战与机遇'
),
/*#__PURE__*/ _react.default.createElement(
'div',
{
className: 'space-y-4',
},
/*#__PURE__*/ _react.default.createElement(
'div',
null,
/*#__PURE__*/ _react.default.createElement(
'h4',
{
className: 'font-medium text-red-600 mb-1',
},
'挑战'
),
/*#__PURE__*/ _react.default.createElement(
'p',
{
className: 'text-sm text-gray-700',
},
'光伏电站面临消纳和电价下行的风险，收益率下滑；核电建设周期长，资金需求巨大；国际业务拓展中面临多方面风险。'
)
),
/*#__PURE__*/ _react.default.createElement(
'div',
null,
/*#__PURE__*/ _react.default.createElement(
'h4',
{
className: 'font-medium text-green-600 mb-1',
},
'机遇'
),
/*#__PURE__*/ _react.default.createElement(
'p',
{
className: 'text-sm text-gray-700',
},
'全球对清洁能源需求增加；国内核电核准节奏重回正轨；科技创新成果有助于提升核心竞争力。'
)
)
)
)
)
)
),
/*#__PURE__*/ _react.default.createElement(
'footer',
{
className: 'bg-gray-100 py-6 mt-12',
},
/*#__PURE__*/ _react.default.createElement(
'div',
{
className: 'container mx-auto px-4 text-center text-sm text-gray-600',
},
/*#__PURE__*/ _react.default.createElement(
'p',
null,
'created by ',
/*#__PURE__*/ _react.default.createElement(
'a',
{
href: 'https://space.coze.cn',
className: 'text-blue-600 hover:text-blue-800',
},
'coze space'
)
),
/*#__PURE__*/ _react.default.createElement(
'p',
{
className: 'mt-1',
},
'页面内容均由 AI 生成，仅供参考'
)
)
)
)
}
const _default = SPICReport