const { useMemo, useState } = React;
const typeNames = {
module: '一级模块',
stage: '二级阶段',
aspect: '三级方面'
};
const stageStyles = {
'施工前': 'bg-sky-50 text-sky-700 ring-sky-200',
'施工中': 'bg-slate-100 text-slate-700 ring-slate-200',
'异常处置': 'bg-red-50 text-red-700 ring-red-200',
'复工复核': 'bg-emerald-50 text-emerald-700 ring-emerald-200'
};
const levelStyles = {
'重大风险': 'bg-red-50 text-red-700 ring-red-200',
'较大风险': 'bg-amber-50 text-amber-700 ring-amber-200',
'一般风险': 'bg-emerald-50 text-emerald-700 ring-emerald-200'
};
function App() {
const [path, setPath] = useState([]);
const [query, setQuery] = useState('');
const current = getNodeByPath(window.riskTree, path);
const crumbs = useMemo(() => getCrumbs(window.riskTree, path), [path]);
const stats = useMemo(() => collectStats(window.riskTree), []);
const searchResults = useMemo(() => searchAspects(window.riskTree, query), [query]);
function openPath(nextPath) {
setPath(nextPath);
window.scrollTo({ top: 0, behavior: 'smooth' });
}
function goTo(id) {
openPath([...path, id]);
}
function jumpTo(index) {
openPath(path.slice(0, index));
}
function back() {
openPath(path.slice(0, -1));
}
return (
openPath([])} onJump={jumpTo} />
{path.length > 0 && }
{current.type === 'root' && (
)}
{current.type !== 'root' && current.type !== 'aspect' && }
{current.type === 'aspect' && }
);
}
function TopBar({ stats }) {
return (
智慧工地 · 风险分级管控
抽水蓄能电站施工风险分析系统
);
}
function Metric({ label, value, danger }) {
return (
);
}
function Breadcrumbs({ crumbs, onHome, onJump }) {
return (
);
}
function BackButton({ onClick }) {
return (
);
}
function Home({ node, stats, query, onQuery, searchResults, onOpen, onOpenPath }) {
return (
三级路径：风险类型 → 施工阶段 → 措施类别，当前收录 {stats.aspects} 项措施。
{node.children.map((child, index) => (
))}
);
}
function SearchPanel({ query, onQuery, results, onOpenPath }) {
return (
{query.trim() && (
{results.length === 0 &&
未找到匹配内容。
}
{results.map((result) => (
))}
{children.map((child) => (
))}
);
}
function PanelStat({ label, value }) {
return (
);
}
function ListItem({ node, onOpen }) {
return (
);
}
function StageBadge({ title }) {
return {title};
}
function RiskLevelBadge({ level }) {
return {level};
}
function AspectDetail({ node }) {
const [notice, setNotice] = useState('');
const outputText = buildOutputText(node);
function copyOutput() {
if (navigator.clipboard) {
navigator.clipboard.writeText(outputText).then(() => setNotice('已复制当前措施内容'));
} else {
setNotice('当前浏览器不支持自动复制');
}
}
function exportOutput() {
const blob = new Blob([outputText], { type: 'text/plain;charset=utf-8' });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = `${node.moduleTitle}-${node.stage}-${node.aspect}.txt`;
link.click();
URL.revokeObjectURL(url);
setNotice('已生成文本文件');
}
return (
{node.aspect}
{node.moduleTitle}
{node.stage} · {node.aspect}
{notice &&
{notice}
}
{node.stage === '异常处置' && (
险情初期处置提示
先停工、先撤人、先隔离、先报告，确认无二次伤害风险后再组织专业处置。
)}
重点检查项
{node.checkPoints.map((item) => (
-
{item}
))}
);
}
function MetaCard({ label, value }) {
return (
);
}
function getNodeByPath(root, path) {
return path.reduce((node, id) => (node.children || []).find((child) => child.id === id) || node, root);
}
function getCrumbs(root, path) {
const crumbs = [];
let node = root;
path.forEach((id) => {
node = (node.children || []).find((child) => child.id === id);
if (node) crumbs.push(node);
});
return crumbs;
}
function countAspects(node) {
if (node.type === 'aspect') return 1;
return (node.children || []).reduce((sum, child) => sum + countAspects(child), 0);
}
function collectStats(root) {
const all = [];
walk(root, all);
return {
modules: all.filter((item) => item.type === 'module').length,
stages: all.filter((item) => item.type === 'stage').length,
aspects: all.filter((item) => item.type === 'aspect').length,
major: all.filter((item) => item.type === 'module' && item.riskLevel === '重大风险').length
};
}
function searchAspects(root, query) {
const keyword = query.trim().toLowerCase();
if (!keyword) return [];
const results = [];
walkWithPath(root, [], [], (node, path, labels) => {
if (node.type !== 'aspect') return;
const text = [node.moduleTitle, node.stage, node.aspect, node.content, node.scenarios, node.responsible, ...(node.checkPoints || [])].join(' ').toLowerCase();
if (text.includes(keyword)) {
results.push({ node, path, labels });
}
});
return results.slice(0, 8);
}
function walk(node, bucket) {
bucket.push(node);
(node.children || []).forEach((child) => walk(child, bucket));
}
function walkWithPath(node, path, labels, visitor) {
visitor(node, path, labels);
(node.children || []).forEach((child) => walkWithPath(child, [...path, child.id], [...labels, child.title], visitor));
}
function buildOutputText(node) {
return [
`风险类型：${node.moduleTitle}`,
`风险等级：${node.riskLevel}`,
`施工阶段：${node.stage}`,
`措施类别：${node.aspect}`,
`责任主体：${node.responsible}`,
`适用场景：${node.scenarios}`,
'',
'管控内容：',
node.content,
'',
'重点检查项：',
...node.checkPoints.map((item, index) => `${index + 1}. ${item}`)
].join('\n');
}
ReactDOM.createRoot(document.getElementById('root')).render();