Frudrax Cheng
75 lines
4.2 KiB
Plaintext
75 lines
4.2 KiB
Plaintext
---
|
|
const features = [
|
|
{ icon: 'fa-fire', title: '防火防爆', desc: '储罐区/反应釜温度压力液位实时监测，火焰烟雾秒级识别，联动喷淋切断阀。' },
|
|
{ icon: 'fa-cloud', title: '防毒防泄漏', desc: 'VOCs/H₂S/Cl₂ 吸入式高精度监测，泄漏萌芽即刻预警，自动联动通风疏散。' },
|
|
{ icon: 'fa-ban', title: '防入侵封闭化', desc: '周界电子围栏 + 危化车辆预约-装卸-出厂全流程管控，违章自动抓拍。' },
|
|
{ icon: 'fa-id-card', title: '人员准入安全', desc: '人脸 + 防静电 + 酒精测试三重门禁，UWB 定位 + 智能手环 SOS。' }
|
|
];
|
|
|
|
const layers = [
|
|
{ name: '应用层', color: 'bg-blue-600', items: ['可视化指挥', '隐患工单', '应急疏散', '合规上报'] },
|
|
{ name: '平台层', color: 'bg-indigo-600', items: ['AI 视觉大模型', 'SaaS 中台', '危废联单', '工业互联网'] },
|
|
{ name: '网络层', color: 'bg-cyan-600', items: ['防爆环网', 'LoRa/NB-IoT', '4G/5G', '光纤主干'] },
|
|
{ name: '感知层', color: 'bg-emerald-600', items: ['防爆摄像头', '气体探测器', '压力液位', '智能手环'] }
|
|
];
|
|
---
|
|
|
|
<section class="px-4 lg:px-0 py-16 bg-white overflow-hidden">
|
|
<div class="max-w-7xl mx-auto">
|
|
<div class="bg-slate-50 rounded-3xl border border-blue-100 p-5 md:p-8 lg:p-10">
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-10 items-center">
|
|
<div>
|
|
<p class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-blue-100 text-blue-700 text-sm font-bold tracking-wide mb-4">
|
|
<i class="fa fa-sitemap"></i>
|
|
<span>解决方案 · 系统架构</span>
|
|
</p>
|
|
<h3 class="text-3xl md:text-4xl font-black text-gray-900 tracking-tight leading-tight mb-4">
|
|
AI 视觉 + 五防协同的危化安全闭环
|
|
</h3>
|
|
<p class="text-gray-600 leading-relaxed mb-6">
|
|
围绕<strong>防火、防爆、防毒、防泄漏、防入侵</strong>五大刚需场景，融合 AI 视觉大模型与防爆物联感知，对重大危险源、可燃有毒气体、违规作业实时监控，联动喷淋/切断阀/排烟/广播执行紧急处置，符合《危化品企业安全风险智能化管控平台建设指南》要求。
|
|
</p>
|
|
<div class="grid grid-cols-2 gap-3 mb-6">
|
|
{features.map((f) => (
|
|
<div class="bg-white border border-blue-100 rounded-xl p-3 flex items-start gap-2.5">
|
|
<div class="w-8 h-8 rounded-lg bg-blue-600 text-white flex items-center justify-center shrink-0">
|
|
<i class={`fa ${f.icon} text-base`}></i>
|
|
</div>
|
|
<div class="flex-1 min-w-0">
|
|
<p class="text-base font-black text-gray-900 leading-tight">{f.title}</p>
|
|
<p class="text-sm text-gray-600 mt-1 leading-relaxed">{f.desc}</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div class="bg-white border border-blue-100 rounded-2xl p-4">
|
|
<p class="text-base font-bold text-blue-700 mb-2">价值实现</p>
|
|
<p class="text-base text-gray-600 leading-relaxed">告警准确率 ≥98%，识别响应 ≤1 秒，三级预警机制 + 自动联锁处置，事故事件全程留痕，满足应急管理部门远程监管与数据合规上报要求。</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="space-y-4">
|
|
<div class="rounded-2xl overflow-hidden border border-white shadow-lg bg-white">
|
|
<img src="/img/chemical/architecture.webp" alt="危险化学品系统架构图" class="w-full h-auto object-cover" />
|
|
</div>
|
|
<div class="rounded-2xl bg-white border border-slate-200 shadow-sm p-4 md:p-5">
|
|
<p class="text-sm font-black text-gray-400 tracking-[0.18em] mb-3 text-center">SYSTEM ARCHITECTURE</p>
|
|
<div class="space-y-2">
|
|
{layers.map((l) => (
|
|
<div class="flex items-stretch gap-2">
|
|
<div class={`shrink-0 w-16 ${l.color} text-white rounded-lg flex items-center justify-center font-black text-sm shadow-sm`}>{l.name}</div>
|
|
<div class="flex-1 grid grid-cols-4 gap-1.5">
|
|
{l.items.map((it) => (
|
|
<div class="bg-slate-50 border border-slate-200 rounded-md py-1.5 px-1 text-center text-xs font-bold text-gray-700">{it}</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|