diff --git a/空气质量预测/源码/用户端/iapip-web/src/pages/landing/index.tsx b/空气质量预测/源码/用户端/iapip-web/src/pages/landing/index.tsx new file mode 100644 index 0000000..e0287b3 --- /dev/null +++ b/空气质量预测/源码/用户端/iapip-web/src/pages/landing/index.tsx @@ -0,0 +1,250 @@ +import { useEffect, useRef, useState } from 'react' +import { history } from '@umijs/max' +import { LOC_STOR_KEY } from '@/common/constants' +import PhoneAuthModal from '@/components/phone-auth-modal' +import api from '@/services/api' +import type { EcoMaterial } from '@/services/api/material' +import './landing.css' + +const LeafIcon = () => ( + +) +const ArrowIcon = ({ small }: { small?: boolean }) => ( + +) +const CheckIcon = () => ( + +) +const ChevronIcon = ({ dir }: { dir: 'left' | 'right' }) => ( + +) + +const stats = [ + { n: '28+', t: '在管装修项目' }, + { n: '2,400+', t: '累计预测次数' }, + { n: '6 项', t: '污染物 · 甲醛/苯/TVOC/氨/氡/VOC' }, + { n: '2 部', t: '国标依据 · 18883 / 50325' } +] +const news = [ + { tag: '政策解读', date: '专栏 · 2026.05', title: '两大国标怎么读?GB/T 18883 与 GB 50325 的差别', desc: '一个是"住进去后"的室内空气质量标准,一个是"交工验收时"的工程控制标准——限值与采样条件并不相同,看懂它们才能判断房子到底达不达标。' }, + { tag: '科普', date: '专栏 · 2026.04', title: '新装住宅的甲醛,为什么能持续释放 3–15 年?', desc: '人造板里的脲醛树脂胶会缓慢分解释放甲醛,释放周期长、受温湿度影响大。短期通风只能降一时浓度,真正的关键在源头材料的选择。' }, + { tag: '指南', date: '专栏 · 2026.03', title: '夏天为什么更容易超标?温度与释放速率', desc: '温度每升高若干度,材料的甲醛释放速率会明显增大。这也是"冬天测达标、夏天又超标"的原因。预测时把环境温湿度纳入计算,结果才靠谱。' }, + { tag: '方法', date: '专栏 · 2026.02', title: '先预测,再决定要不要做 CMA 检测', desc: '上门检测有成本。用本系统先做一次免费预测、定位高风险房间与主要污染材料,再有针对性地安排第三方 CMA 检测,省钱也更有的放矢。' } +] +const cases = [ + { type: '住宅 · I类民用建筑', name: '锦绣华庭 · 主卧', meta: '主源:多层实木复合地板 · 人造板衣柜', w1: 82, v1: '0.18', w2: 36, v2: '0.08', chip: '甲醛达标' }, + { type: '住宅 · I类民用建筑', name: '翠湖天地 · 儿童房', meta: '主源:人造板衣柜 · 壁纸基膜', w1: 95, v1: '0.21', w2: 32, v2: '0.07', chip: '甲醛达标' }, + { type: '酒店客房 · II类民用建筑', name: '云栖精选酒店 · 标准间', meta: '主源:木器漆饰面 · 软包', w1: 90, v1: '0.72', w2: 58, v2: '0.46', chip: 'TVOC达标' } +] +const steps = [ + { h: '录入房间与材料', p: '选择房间、填写面积层高与通风换气率,勾选所用装修材料及用量。' }, + { h: '公式计算浓度', p: '按稳态质量平衡 C = Σ(EFᵢ·Aᵢ)/(n·V) 计算 6 项污染物浓度,对照国标判定达标。' }, + { h: '溯源与整改建议', p: '若超标,公式溯源出贡献最大的材料并排序,给出通风或换材的可行整改方案。' } +] + +const hasToken = () => !!localStorage.getItem(LOC_STOR_KEY.AUTH_TOKEN) +const goPro = () => history.push(hasToken() ? '/home' : '/login') +const scrollTop = () => window.scrollTo({ top: 0, behavior: 'smooth' }) +const scrollToId = (id: string) => document.getElementById(id)?.scrollIntoView({ behavior: 'smooth' }) + +export default function Landing() { + const [cur, setCur] = useState(0) + const timer = useRef | null>(null) + const go = (n: number) => setCur((((n % news.length) + news.length) % news.length)) + const stop = () => { if (timer.current) { clearInterval(timer.current); timer.current = null } } + const start = () => { stop(); timer.current = setInterval(() => setCur(c => (c + 1) % news.length), 5500) } + const next = () => { setCur(c => (c + 1) % news.length); start() } + const prev = () => { setCur(c => (c - 1 + news.length) % news.length); start() } + useEffect(() => { start(); return stop }, []) + + const [authOpen, setAuthOpen] = useState(false) + const [ecoList, setEcoList] = useState([]) + useEffect(() => { + api.material.getEcoMaterials().then(setEcoList).catch(() => setEcoList([])) + }, []) + const openPredict = () => { + if (hasToken()) history.push('/source') + else setAuthOpen(true) + } + const onAuthed = () => { + setAuthOpen(false) + history.push('/source') + } + + return ( +
+
+
+ + + 装修室内空气质量预测系统
INDOOR AIR · 装修污染 + + + + 免费试算 +
+
+ +
+
+
+ 对照 GB/T 18883-2022 与 GB 50325-2020 双国标 +

装修住得安心,
从一次污染预测开始

+

输入房间、环境与所用材料,系统用稳态质量平衡公式预测甲醛、苯、TVOC 等 6 项污染物浓度,判定是否超标,并溯源到具体污染材料,给出整改建议。

+ +
+ 无需上门,先估后测 + 公式可溯源 + 材料数据库支撑 +
+
+
+
室内 / 装修实景照片
+
6 项污染物预测
+
+
+
+ +
+
+ {stats.map((s, i) =>
{s.n}{s.t}
)} +
+
+ +
+
+
+
健康装修科普

读懂装修污染,先把知识装进脑子

+ 全部文章 +
+
+
+
+ {news.map((n, i) => ( +
+
{n.tag}
资讯配图
+
+
{n.date}
+

{n.title}

+

{n.desc}

+ 阅读全文 +
+
+ ))} +
+
+ + +
+
+ {news.map((_, i) =>
+
+
+ +
+
+
+
预测案例

预测 → 溯源 → 整改,看得见的下降

真实流程演示:从预测超标,到锁定主要污染材料,再到整改复测达标。

+
+
+ {cases.map((c, i) => ( +
+
案例实景图
+
+
{c.type}
+

{c.name}

+
{c.meta}
+
+
治理前
{c.v1}
+
治理后
{c.v2}
+
+
{c.chip}查看溯源
+
+
+ ))} +
+
+
+ + {ecoList.length > 0 && ( +
+
+
+
+
环保建材
+

优选低释放材料,从源头减少污染

+

以下为材料库中环保等级 E0/E1 的低释放建材,选材阶段即可降低甲醛与 TVOC 风险。

+
+
+
+ {ecoList.map(m => ( +
+
+
{m.category} · {m.brand}
+

{m.name || m.brand || '环保建材'}

+
{m.factory || '—'}
+
+ 环保 {m.eco_level} + {typeof m.methanal === 'number' && 甲醛 {m.methanal}} +
+
+
+ ))} +
+
+
+ )} + +
+
+
如何使用

三步,得到一份可溯源的预测报告

+
+ {steps.map((s, i) => ( +
+
{i + 1}

{s.h}

{s.p}

+ {i < steps.length - 1 &&
} +
+ ))} +
+
+
+ +
+
+
+
+

现在就免费预测
你家会不会甲醛超标

+

无需上门,输入材料即可估算。先估后测,把检测的钱花在刀刃上。

+
+ +
+
+
+
+ +
+
+
+ + 装修室内空气质量预测系统 +
+
依据 GB/T 18883-2022 · GB 50325-2020 · 预测结果仅供参考,以 CMA 检测为准
+
+
+ + setAuthOpen(false)} /> +
+ ) +} \ No newline at end of file