vf/vf_react
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
zzlgreat
2025-11-05 10:56:56 +08:00
parent 467dad8449
commit fc37df4385
3499 changed files with 1063743 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

423
public/htmls/煤炭.html Normal file
View File

@@ -0,0 +1,423 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>煤炭行业分析报告</title>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700;900&display=swap" rel="stylesheet" />
<!-- Font Awesome Icons -->
<script src="https://kit.fontawesome.com/1d2b6c4f81.js" crossorigin="anonymous"></script>
<!-- Tailwind CSS -->
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css" />
<!-- Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<!-- tsParticles -->
<script src="https://cdn.jsdelivr.net/npm/tsparticles@3/tsparticles.bundle.min.js"></script>
<style>
body {
font-family: 'Noto Sans SC', sans-serif;
background-color: #0f172a;
color: #e2e8f0;
}
.card-bg {
background: rgba(30, 41, 59, 0.7);
backdrop-filter: blur(10px);
border: 1px solid rgba(100, 116, 139, 0.3);
}
.table-row:hover {
background-color: rgba(51, 65, 85, 0.5);
}
#tsparticles {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
}
.highlight-text {
background: linear-gradient(90deg, #3b82f6, #8b5cf6);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-weight: 700;
}
.capacity-bar {
height: 8px;
border-radius: 4px;
background-color: rgba(100, 116, 139, 0.3);
overflow: hidden;
}
.capacity-fill {
height: 100%;
background: linear-gradient(90deg, #3b82f6, #8b5cf6);
border-radius: 4px;
}
</style>
</head>
<body class="min-h-screen relative">
<div id="tsparticles"></div>
<div class="container mx-auto px-4 py-8 relative z-10">
<!-- 标题部分 -->
<div class="text-center mb-12">
<h1 class="text-4xl md:text-5xl font-bold mb-4 highlight-text">煤炭行业产能分析报告</h1>
<p class="text-lg text-slate-300 max-w-3xl mx-auto">
深度剖析中国煤炭行业产能布局，揭示核心企业生产现状与未来发展趋势
</p>
</div>
<!-- 行业洞察部分 -->
<div class="card-bg rounded-2xl p-6 mb-8 shadow-xl">
<div class="flex items-center mb-4">
<div class="w-1 h-6 bg-blue-500 mr-3"></div>
<h2 class="text-2xl font-bold text-white">行业洞察</h2>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
<div class="bg-slate-800/50 rounded-xl p-5 border border-slate-700/50">
<div class="flex items-center mb-3">
<div class="p-2 bg-blue-500/20 rounded-lg mr-3">
<i class="fas fa-industry text-blue-400"></i>
</div>
<h3 class="text-lg font-semibold text-white">产能集中度</h3>
</div>
<p class="text-slate-300 text-sm">
头部五家企业（中国神华、陕西煤业、兖矿能源、中煤能源、潞安环能）占据行业主导地位，合计产能超过8亿吨/年，占全国总产能的显著比例。
</p>
</div>
<div class="bg-slate-800/50 rounded-xl p-5 border border-slate-700/50">
<div class="flex items-center mb-3">
<div class="p-2 bg-purple-500/20 rounded-lg mr-3">
<i class="fas fa-chart-line text-purple-400"></i>
</div>
<h3 class="text-lg font-semibold text-white">区域分布</h3>
</div>
<p class="text-slate-300 text-sm">
山西、陕西、内蒙古、山东、安徽五大产区集中了全国主要煤炭产能，其中山西企业数量最多，陕西煤业单省产能领先。
</p>
</div>
<div class="bg-slate-800/50 rounded-xl p-5 border border-slate-700/50">
<div class="flex items-center mb-3">
<div class="p-2 bg-green-500/20 rounded-lg mr-3">
<i class="fas fa-hammer text-green-400"></i>
</div>
<h3 class="text-lg font-semibold text-white">扩张趋势</h3>
</div>
<p class="text-slate-300 text-sm">
头部企业积极扩张产能，中国神华、陕西煤业、兖矿能源等均有在建产能，预计未来2-3年内将逐步释放，进一步提升市场集中度。
</p>
</div>
</div>
<div class="bg-gradient-to-r from-blue-900/30 to-purple-900/30 rounded-xl p-5 border border-slate-700/50">
<h3 class="text-lg font-semibold text-white mb-3">核心观点</h3>
<p class="text-slate-300">
煤炭行业正处于结构性优化阶段，产能向头部企业集中趋势明显。在能源保供政策背景下，大型煤炭企业凭借规模优势、资源禀赋和先进技术，将持续巩固市场地位。同时，行业正积极向绿色低碳转型，探索清洁高效利用路径，为长期可持续发展奠定基础。
</p>
</div>
</div>
<!-- 股票数据表格部分 -->
<div class="card-bg rounded-2xl p-6 shadow-xl">
<div class="flex items-center justify-between mb-6">
<div class="flex items-center">
<div class="w-1 h-6 bg-blue-500 mr-3"></div>
<h2 class="text-2xl font-bold text-white">企业产能数据</h2>
</div>
<div class="text-sm text-slate-400">
数据来源：煤炭行业表格
</div>
</div>
<div class="overflow-x-auto">
<table class="w-full">
<thead>
<tr class="border-b border-slate-700">
<th class="py-3 px-4 text-left text-sm font-semibold text-slate-300">企业名称</th>
<th class="py-3 px-4 text-left text-sm font-semibold text-slate-300">地区</th>
<th class="py-3 px-4 text-left text-sm font-semibold text-slate-300">2024年产量(万吨)</th>
<th class="py-3 px-4 text-left text-sm font-semibold text-slate-300">核定产能(万吨)</th>
<th class="py-3 px-4 text-left text-sm font-semibold text-slate-300">在建产能(万吨)</th>
<th class="py-3 px-4 text-left text-sm font-semibold text-slate-300">产能利用率</th>
</tr>
</thead>
<tbody id="stockTableBody">
<!-- 表格内容将通过JavaScript动态生成 -->
</tbody>
</table>
</div>
</div>
<!-- 数据可视化部分 -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 mt-8">
<div class="card-bg rounded-2xl p-6 shadow-xl">
<h3 class="text-xl font-bold text-white mb-4">区域产能分布</h3>
<canvas id="regionChart" height="300"></canvas>
</div>
<div class="card-bg rounded-2xl p-6 shadow-xl">
<h3 class="text-xl font-bold text-white mb-4">头部企业产量对比</h3>
<canvas id="topCompaniesChart" height="300"></canvas>
</div>
</div>
</div>
<script>
// 初始化粒子背景
tsParticles.load("tsparticles", {
particles: {
number: {
value: 80,
density: {
enable: true,
value_area: 800
}
},
color: {
value: "#3b82f6"
},
shape: {
type: "circle"
},
opacity: {
value: 0.5,
random: false
},
size: {
value: 3,
random: true
},
move: {
enable: true,
speed: 1,
direction: "none",
random: true,
straight: false,
out_mode: "out"
}
},
interactivity: {
events: {
onhover: {
enable: true,
mode: "repulse"
}
}
}
});
// 股票数据
const stockData = [
{'stock': '中国神华', 'region': '产量前五', '2024年产量(万吨)': '32710', '核定产能(万吨)': '35130', '在建产能(万吨)': '1600'},
{'stock': '陕西煤业', 'region': '产量前五/陕西', '2024年产量(万吨)': '17049', '核定产能(万吨)': '16200', '在建产能(万吨)': '2000'},
{'stock': '兖矿能源', 'region': '产量前五/山东', '2024年产量(万吨)': '14165', '核定产能(万吨)': '23329(含境外)', '在建产能(万吨)': '1180'},
{'stock': '中煤能源', 'region': '产量前五/安徽', '2024年产量(万吨)': '13757', '核定产能(万吨)': '17000', '在建产能(万吨)': '640'},
{'stock': '潞安环能', 'region': '产量前五/山西', '2024年产量(万吨)': '5728', '核定产能(万吨)': '5000', '在建产能(万吨)': '—'},
{'stock': '山西焦煤', 'region': '山西', '2024年产量(万吨)': '4480', '核定产能(万吨)': '4480', '在建产能(万吨)': '—'},
{'stock': '山煤国际', 'region': '山西', '2024年产量(万吨)': '3300', '核定产能(万吨)': '—', '在建产能(万吨)': '—'},
{'stock': '晋控煤业', 'region': '山西', '2024年产量(万吨)': '3450', '核定产能(万吨)': '3510', '在建产能(万吨)': '—'},
{'stock': '华阳股份', 'region': '山西', '2024年产量(万吨)': '3290', '核定产能(万吨)': '—', '在建产能(万吨)': '1000'},
{'stock': '兰花科创', 'region': '山西', '2024年产量(万吨)': '1390', '核定产能(万吨)': '—', '在建产能(万吨)': '—'},
{'stock': '新集能源', 'region': '安徽', '2024年产量(万吨)': '2152', '核定产能(万吨)': '—', '在建产能(万吨)': '—'},
{'stock': '淮北矿业', 'region': '安徽', '2024年产量(万吨)': '2055', '核定产能(万吨)': '—', '在建产能(万吨)': '—'},
{'stock': '恒源煤电', 'region': '安徽', '2024年产量(万吨)': '926', '核定产能(万吨)': '—', '在建产能(万吨)': '—'},
{'stock': '平煤股份', 'region': '河南', '2024年产量(万吨)': '2800', '核定产能(万吨)': '—', '在建产能(万吨)': '—'},
{'stock': '大有能源', 'region': '河南', '2024年产量(万吨)': '968', '核定产能(万吨)': '—', '在建产能(万吨)': '—'},
{'stock': '郑州煤电', 'region': '河南', '2024年产量(万吨)': '684', '核定产能(万吨)': '—', '在建产能(万吨)': '—'},
{'stock': '电投能源', 'region': '内蒙', '2024年产量(万吨)': '4600', '核定产能(万吨)': '—', '在建产能(万吨)': '—'},
{'stock': '冀中能源', 'region': '河北', '2024年产量(万吨)': '2700', '核定产能(万吨)': '—', '在建产能(万吨)': '—'},
{'stock': '昊华能源', 'region': '北京', '2024年产量(万吨)': '1900', '核定产能(万吨)': '—', '在建产能(万吨)': '—'},
{'stock': '上海能源', 'region': '上海', '2024年产量(万吨)': '1800', '核定产能(万吨)': '—', '在建产能(万吨)': '—'},
{'stock': '盘江股份', 'region': '贵州', '2024年产量(万吨)': '1300', '核定产能(万吨)': '—', '在建产能(万吨)': '—'},
{'stock': '辽宁能源', 'region': '辽宁', '2024年产量(万吨)': '600', '核定产能(万吨)': '—', '在建产能(万吨)': '—'},
{'stock': '安源煤业', 'region': '江西', '2024年产量(万吨)': '161', '核定产能(万吨)': '—', '在建产能(万吨)': '—'},
{'stock': '宝丰能源', 'region': '焦炭', '2024年产量(万吨)': '704', '核定产能(万吨)': '—', '在建产能(万吨)': '—'},
{'stock': '陕西黑猫', 'region': '焦炭', '2024年产量(万吨)': '621-699', '核定产能(万吨)': '—', '在建产能(万吨)': '—'},
{'stock': '美锦能源', 'region': '焦炭', '2024年产量(万吨)': '584（23年）', '核定产能(万吨)': '715', '在建产能(万吨)': '—'},
{'stock': '开滦股份', 'region': '焦炭', '2024年产量(万吨)': '536（23年）', '核定产能(万吨)': '—', '在建产能(万吨)': '—'},
{'stock': '山西焦化', 'region': '焦炭', '2024年产量(万吨)': '385（23年）', '核定产能(万吨)': '—', '在建产能(万吨)': '—'},
{'stock': '安泰集团', 'region': '焦炭', '2024年产量(万吨)': '282', '核定产能(万吨)': '—', '在建产能(万吨)': '—'},
{'stock': '云煤能源', 'region': '焦炭', '2024年产量(万吨)': '240', '核定产能(万吨)': '—', '在建产能(万吨)': '—'},
{'stock': '金能科技', 'region': '焦炭', '2024年产量(万吨)': '205', '核定产能(万吨)': '—', '在建产能(万吨)': '—'},
{'stock': '宝泰隆', 'region': '焦炭', '2024年产量(万吨)': '150', '核定产能(万吨)': '—', '在建产能(万吨)': '—'}
];
// 生成表格内容
function generateTable() {
const tableBody = document.getElementById('stockTableBody');
tableBody.innerHTML = '';
stockData.forEach((stock, index) => {
const row = document.createElement('tr');
row.className = 'border-b border-slate-800 table-row';
// 计算产能利用率
let capacityUtilization = '—';
let capacityPercentage = 0;
if (stock['核定产能(万吨)'] && stock['核定产能(万吨)'] !== '—' && stock['2024年产量(万吨)'] && stock['2024年产量(万吨)'] !== '—') {
const capacity = parseFloat(stock['核定产能(万吨)'].toString().replace(/[^0-9.-]+/g,""));
const production = parseFloat(stock['2024年产量(万吨)'].toString().replace(/[^0-9.-]+/g,""));
if (!isNaN(capacity) && !isNaN(production) && capacity > 0) {
capacityPercentage = Math.min(100, Math.round((production / capacity) * 100));
capacityUtilization = capacityPercentage + '%';
}
}
row.innerHTML = `
<td class="py-4 px-4">
<div class="flex items-center">
<div class="w-8 h-8 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center mr-3">
<span class="text-white text-xs font-bold">${stock.stock.charAt(0)}</span>
</div>
<span class="font-medium text-white">${stock.stock}</span>
</div>
</td>
<td class="py-4 px-4 text-slate-300">${stock.region}</td>
<td class="py-4 px-4 text-slate-300">${stock['2024年产量(万吨)']}</td>
<td class="py-4 px-4 text-slate-300">${stock['核定产能(万吨)'] || '—'}</td>
<td class="py-4 px-4 text-slate-300">${stock['在建产能(万吨)'] || '—'}</td>
<td class="py-4 px-4">
<div class="flex items-center">
<div class="w-24 mr-3">
<div class="capacity-bar">
<div class="capacity-fill" style="width: ${capacityPercentage}%"></div>
</div>
</div>
<span class="text-slate-300 text-sm">${capacityUtilization}</span>
</div>
</td>
`;
tableBody.appendChild(row);
});
}
// 生成区域分布图表
function generateRegionChart() {
const ctx = document.getElementById('regionChart').getContext('2d');
// 统计各区域企业数量
const regionCount = {};
stockData.forEach(stock => {
const region = stock.region.split('/')[0];
regionCount[region] = (regionCount[region] || 0) + 1;
});
new Chart(ctx, {
type: 'doughnut',
data: {
labels: Object.keys(regionCount),
datasets: [{
data: Object.values(regionCount),
backgroundColor: [
'#3b82f6',
'#8b5cf6',
'#ec4899',
'#10b981',
'#f59e0b',
'#ef4444',
'#06b6d4',
'#8b5cf6'
],
borderWidth: 0
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'right',
labels: {
color: '#e2e8f0',
font: {
size: 12
}
}
}
}
}
});
}
// 生成头部企业产量对比图表
function generateTopCompaniesChart() {
const ctx = document.getElementById('topCompaniesChart').getContext('2d');
// 获取前5大企业
const topCompanies = stockData
.filter(stock => stock['2024年产量(万吨)'] && stock['2024年产量(万吨)'] !== '—')
.sort((a, b) => {
const aVal = parseFloat(a['2024年产量(万吨)'].toString().replace(/[^0-9.-]+/g,""));
const bVal = parseFloat(b['2024年产量(万吨)'].toString().replace(/[^0-9.-]+/g,""));
return bVal - aVal;
})
.slice(0, 5);
new Chart(ctx, {
type: 'bar',
data: {
labels: topCompanies.map(company => company.stock),
datasets: [{
label: '2024年产量(万吨)',
data: topCompanies.map(company => {
return parseFloat(company['2024年产量(万吨)'].toString().replace(/[^0-9.-]+/g,""));
}),
backgroundColor: [
'rgba(59, 130, 246, 0.8)',
'rgba(139, 92, 246, 0.8)',
'rgba(236, 72, 153, 0.8)',
'rgba(16, 185, 129, 0.8)',
'rgba(245, 158, 11, 0.8)'
],
borderWidth: 0,
borderRadius: 6
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
y: {
beginAtZero: true,
grid: {
color: 'rgba(100, 116, 139, 0.2)'
},
ticks: {
color: '#94a3b8'
}
},
x: {
grid: {
display: false
},
ticks: {
color: '#94a3b8'
}
}
},
plugins: {
legend: {
display: false
}
}
}
});
}
// 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', function() {
generateTable();
generateRegionChart();
generateTopCompaniesChart();
});
</script>
</body>
</html>
```