// 【重要】必须使用 const Component 作为组件变量名
// ONEOS-web - 加氢站数字孪生监控大屏（1920×1080 设计稿级布局，高对比科技风）

const Component = function () {
	var useState = React.useState;
	var useEffect = React.useEffect;

	var _now = useState(function () { return new Date(); });
	var now = _now[0];
	var setNow = _now[1];

	useEffect(function () {
		var t = setInterval(function () { setNow(new Date()); }, 1000);
		return function () { clearInterval(t); };
	}, []);

	var pad = function (n) { return n < 10 ? '0' + n : '' + n; };
	var timeStr = now.getFullYear() + '-' + pad(now.getMonth() + 1) + '-' + pad(now.getDate()) + ' ' + pad(now.getHours()) + ':' + pad(now.getMinutes()) + ':' + pad(now.getSeconds());

	var h2PanelTitle = {
		margin: 0,
		fontSize: 15,
		fontWeight: 600,
		letterSpacing: '0.06em',
		color: '#e8f4ff',
		textShadow: '0 0 12px rgba(0, 242, 255, 0.35)',
		display: 'flex',
		alignItems: 'center',
		gap: 8
	};

	var panelShell = {
		background: 'linear-gradient(145deg, rgba(6, 28, 58, 0.88) 0%, rgba(4, 15, 35, 0.92) 100%)',
		border: '1px solid rgba(0, 242, 255, 0.22)',
		borderRadius: 4,
		boxShadow: 'inset 0 0 0 1px rgba(255,255,255,0.04), 0 8px 32px rgba(0,0,0,0.45)',
		backdropFilter: 'blur(8px)',
		overflow: 'hidden',
		position: 'relative'
	};

	var panelHead = {
		height: 40,
		padding: '0 14px',
		display: 'flex',
		alignItems: 'center',
		justifyContent: 'space-between',
		background: 'linear-gradient(90deg, rgba(0, 242, 255, 0.12) 0%, transparent 55%)',
		borderBottom: '1px solid rgba(0, 242, 255, 0.15)'
	};

	var kpiCard = function (label, value, unit, sub) {
		return React.createElement('div', {
			key: label,
			style: {
				flex: 1,
				minWidth: 0,
				padding: '12px 16px',
				background: 'linear-gradient(180deg, rgba(10, 40, 72, 0.75) 0%, rgba(4, 18, 40, 0.85) 100%)',
				border: '1px solid rgba(0, 242, 255, 0.2)',
				borderRadius: 4,
				position: 'relative',
				overflow: 'hidden'
			}
		},
			React.createElement('div', { style: { position: 'absolute', inset: 0, background: 'radial-gradient(ellipse 80% 50% at 0% 0%, rgba(0,242,255,0.12), transparent 55%)', pointerEvents: 'none' } }),
			React.createElement('div', { style: { fontSize: 12, color: '#7a9bb8', marginBottom: 6, letterSpacing: '0.04em' } }, label),
			React.createElement('div', { style: { display: 'flex', alignItems: 'baseline', gap: 6 } },
				React.createElement('span', { style: { fontSize: 26, fontWeight: 700, color: '#00f2ff', fontFamily: '"DIN Alternate", "Roboto Mono", monospace', textShadow: '0 0 20px rgba(0,242,255,0.45)' } }, value),
				React.createElement('span', { style: { fontSize: 12, color: '#5a8aad' } }, unit)
			),
			sub && React.createElement('div', { style: { marginTop: 6, fontSize: 11, color: '#4a7a9c' } }, sub)
		);
	};

	var navItem = function (label, active) {
		return React.createElement('div', {
			key: label,
			style: {
				padding: '6px 14px',
				fontSize: 12,
				color: active ? '#00f2ff' : '#6a8faf',
				border: active ? '1px solid rgba(0,242,255,0.5)' : '1px solid transparent',
				borderRadius: 2,
				background: active ? 'rgba(0,242,255,0.08)' : 'transparent',
				cursor: 'pointer',
				letterSpacing: '0.05em',
				whiteSpace: 'nowrap'
			}
		}, label);
	};

	var subNavBtn = function (label, icon) {
		return React.createElement('div', {
			key: label,
			style: {
				width: 72,
				height: 64,
				display: 'flex',
				flexDirection: 'column',
				alignItems: 'center',
				justifyContent: 'center',
				gap: 6,
				background: 'linear-gradient(180deg, rgba(0,40,80,0.5) 0%, rgba(4,20,45,0.8) 100%)',
				border: '1px solid rgba(0, 242, 255, 0.18)',
				borderRadius: 4,
				fontSize: 11,
				color: '#9ec8e8',
				cursor: 'pointer'
			}
		},
			React.createElement('div', { style: { width: 28, height: 28, borderRadius: 4, border: '1px solid rgba(0,242,255,0.35)', background: 'rgba(0,242,255,0.06)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 14, color: '#00f2ff' } }, icon),
			label
		);
	};

	var alarmRows = [
		{ t: '10:28:06', lv: '紧急', name: '压缩机出口压力超限', loc: '压缩单元-A' },
		{ t: '10:15:42', lv: '一般', name: '储罐液位波动提醒', loc: '储氢区-3#' },
		{ t: '09:52:11', lv: '重要', name: '加氢枪通讯短时中断', loc: '加氢岛-2' }
	];

	return React.createElement('div', {
		className: 'h2-station-screen-root',
		style: {
			width: 1920,
			height: 1080,
			margin: '0 auto',
			position: 'relative',
			background: '#040b1a',
			color: '#e8f4ff',
			fontFamily: '"Inter", "PingFang SC", "Microsoft YaHei", sans-serif',
			overflow: 'hidden',
			boxSizing: 'border-box',
			textRendering: 'geometricPrecision',
			WebkitFontSmoothing: 'antialiased'
		}
	},
		React.createElement('style', null, `
			.h2-station-screen-root * { box-sizing: border-box; }
			@keyframes h2-pulse-border {
				0%, 100% { box-shadow: 0 0 0 1px rgba(0,242,255,0.15), 0 0 24px rgba(0,242,255,0.08); }
				50% { box-shadow: 0 0 0 1px rgba(0,242,255,0.35), 0 0 36px rgba(0,242,255,0.15); }
			}
			.h2-station-screen-root .h2-center-stage {
				animation: h2-pulse-border 4s ease-in-out infinite;
			}
			@keyframes h2-scan {
				0% { transform: translateY(-100%); opacity: 0; }
				10% { opacity: 0.06; }
				90% { opacity: 0.06; }
				100% { transform: translateY(100%); opacity: 0; }
			}
			.h2-station-screen-root .h2-scanline::after {
				content: '';
				position: absolute;
				left: 0; right: 0; top: 0;
				height: 120px;
				background: linear-gradient(180deg, transparent, rgba(0,242,255,0.04), transparent);
				animation: h2-scan 8s linear infinite;
				pointer-events: none;
			}
		`),

		/* 背景网格与光晕 */
		React.createElement('div', {
			style: {
				position: 'absolute',
				inset: 0,
				backgroundImage: `
					linear-gradient(rgba(0, 242, 255, 0.03) 1px, transparent 1px),
					linear-gradient(90deg, rgba(0, 242, 255, 0.03) 1px, transparent 1px)
				`,
				backgroundSize: '48px 48px',
				pointerEvents: 'none'
			}
		}),
		React.createElement('div', {
			style: {
				position: 'absolute',
				width: 900,
				height: 900,
				left: '50%',
				top: '42%',
				transform: 'translate(-50%, -50%)',
				background: 'radial-gradient(circle, rgba(22, 93, 255, 0.12) 0%, transparent 65%)',
				pointerEvents: 'none'
			}
		}),

		/* 顶栏 */
		React.createElement('header', {
			style: {
				position: 'absolute',
				left: 24,
				right: 24,
				top: 16,
				height: 56,
				display: 'flex',
				alignItems: 'center',
				justifyContent: 'space-between',
				zIndex: 20
			}
		},
			React.createElement('div', { style: { fontSize: 13, color: '#7a9bb8', letterSpacing: '0.02em' } },
				timeStr, React.createElement('span', { style: { margin: '0 12px', color: 'rgba(0,242,255,0.35)' } }, '|'),
				'24°C 晴', React.createElement('span', { style: { margin: '0 12px', color: 'rgba(0,242,255,0.35)' } }, '|'),
				'空气质量：优'
			),
			React.createElement('div', {
				style: {
					fontSize: 28,
					fontWeight: 700,
					letterSpacing: '0.12em',
					color: '#f0f8ff',
					textShadow: '0 0 24px rgba(0, 242, 255, 0.55), 0 0 60px rgba(22, 93, 255, 0.35)'
				}
			}, '加氢站数字孪生监控平台'),
			React.createElement('div', { style: { display: 'flex', gap: 8 } },
				['首页', '三维监控', '设备管理', '告警管理', '运营报表', '系统设置'].map(function (x, i) {
					return React.createElement('div', {
						key: x,
						style: {
							padding: '6px 10px',
							fontSize: 12,
							color: i === 1 ? '#00f2ff' : '#6a8faf',
							borderBottom: i === 1 ? '2px solid #00f2ff' : '2px solid transparent'
						}
					}, x);
				})
			)
		),

		/* KPI 行 */
		React.createElement('div', {
			style: {
				position: 'absolute',
				left: 24,
				right: 24,
				top: 84,
				display: 'flex',
				gap: 12,
				zIndex: 15
			}
		},
			kpiCard('氢气最高压力', '35.0', 'MPa', '设计上限 45 MPa'),
			kpiCard('氢气平均温度', '22.5', '°C', '管束区均值'),
			kpiCard('储罐液位', '85', '%', '5 座储罐加权'),
			kpiCard('瞬时流量', '120', 'Nm³/h', '加氢岛合计'),
			kpiCard('H₂ 浓度', '0', 'ppm', '站区环测'),
			kpiCard('安全等级', '一级', '', '连续安全运行 337 天')
		),

		/* 左列 */
		React.createElement('aside', {
			style: {
				position: 'absolute',
				left: 24,
				top: 168,
				width: 400,
				bottom: 200,
				display: 'flex',
				flexDirection: 'column',
				gap: 10,
				zIndex: 12
			}
		},
			React.createElement('div', { style: Object.assign({}, panelShell, { flex: '0 0 auto' }) },
				React.createElement('div', { style: panelHead },
					React.createElement('h2', { style: h2PanelTitle }, React.createElement('span', { style: { width: 3, height: 14, background: '#00f2ff', borderRadius: 1 } }), '站点概况')
				),
				React.createElement('div', { style: { padding: '14px 16px', fontSize: 12, lineHeight: 2, color: '#9ec8e8' } },
					React.createElement('div', null, '投运日期：', React.createElement('span', { style: { color: '#00f2ff' } }, '2023-06-18')),
					React.createElement('div', null, '接入设备：', React.createElement('span', { style: { color: '#00f2ff' } }, '28'), ' 台'),
					React.createElement('div', null, '累计加氢量：', React.createElement('span', { style: { color: '#00f2ff' } }, '385,621'), ' kg'),
					React.createElement('div', null, '安全运行：', React.createElement('span', { style: { color: '#00f2ff' } }, '337'), ' 天')
				)
			),
			React.createElement('div', { style: Object.assign({}, panelShell, { flex: '1 1 0', minHeight: 0 }) },
				React.createElement('div', { style: panelHead },
					React.createElement('h2', { style: h2PanelTitle }, React.createElement('span', { style: { width: 3, height: 14, background: '#00f2ff', borderRadius: 1 } }), '加氢量统计'),
					React.createElement('div', { style: { display: 'flex', gap: 4 } }, navItem('日', true), navItem('月', false), navItem('年', false))
				),
				React.createElement('div', { style: { padding: '8px 12px 4px', fontSize: 11, color: '#5a8aad' } }, '较昨日 ', React.createElement('span', { style: { color: '#52c41a' } }, '+12.5%')),
				React.createElement('div', { style: { padding: '0 8px 8px', height: 140 } },
					React.createElement('svg', { width: '100%', height: '100%', viewBox: '0 0 360 120', preserveAspectRatio: 'none' },
						React.createElement('defs', null,
							React.createElement('linearGradient', { id: 'h2lg1', x1: '0', y1: '0', x2: '0', y2: '1' },
								React.createElement('stop', { offset: '0%', stopColor: 'rgba(0,242,255,0.45)' }),
								React.createElement('stop', { offset: '100%', stopColor: 'rgba(0,242,255,0)' })
							)
						),
						React.createElement('polyline', { fill: 'none', stroke: 'rgba(0,242,255,0.35)', strokeWidth: '1', points: '0,100 360,100' }),
						React.createElement('polygon', { fill: 'url(#h2lg1)', points: '0,100 0,70 40,55 80,62 120,40 160,48 200,35 240,50 280,38 320,45 360,30 360,100' }),
						React.createElement('polyline', { fill: 'none', stroke: '#00f2ff', strokeWidth: '2', points: '0,70 40,55 80,62 120,40 160,48 200,35 240,50 280,38 320,45 360,30' })
					)
				)
			),
			React.createElement('div', { style: Object.assign({}, panelShell, { flex: '0 0 160px' }) },
				React.createElement('div', { style: panelHead },
					React.createElement('h2', { style: h2PanelTitle }, React.createElement('span', { style: { width: 3, height: 14, background: '#00f2ff', borderRadius: 1 } }), '设备状态统计')
				),
				React.createElement('div', { style: { display: 'flex', alignItems: 'center', padding: '8px 16px', gap: 16 } },
					React.createElement('svg', { width: 100, height: 100, viewBox: '0 0 100 100' },
						React.createElement('circle', { cx: 50, cy: 50, r: 38, fill: 'none', stroke: 'rgba(0,242,255,0.15)', strokeWidth: 10 }),
						React.createElement('circle', { cx: 50, cy: 50, r: 38, fill: 'none', stroke: '#00f2ff', strokeWidth: 10, strokeDasharray: '80 159', strokeLinecap: 'round', transform: 'rotate(-90 50 50)' }),
						React.createElement('circle', { cx: 50, cy: 50, r: 38, fill: 'none', stroke: '#165dff', strokeWidth: 10, strokeDasharray: '50 159', strokeDashoffset: -80, strokeLinecap: 'round', transform: 'rotate(-90 50 50)' }),
						React.createElement('text', { x: 50, y: 54, textAnchor: 'middle', fill: '#e8f4ff', fontSize: 14, fontWeight: 700 }, '28')
					),
					React.createElement('div', { style: { fontSize: 11, lineHeight: 1.8, color: '#7a9bb8' } },
						React.createElement('div', null, React.createElement('span', { style: { color: '#00f2ff' } }, '●'), ' 运行 22'),
						React.createElement('div', null, React.createElement('span', { style: { color: '#165dff' } }, '●'), ' 待机 4'),
						React.createElement('div', null, React.createElement('span', { style: { color: '#faad14' } }, '●'), ' 维护 2')
					)
				)
			),
			React.createElement('div', { style: Object.assign({}, panelShell, { flex: '0 0 140px' }) },
				React.createElement('div', { style: panelHead },
					React.createElement('h2', { style: h2PanelTitle }, React.createElement('span', { style: { width: 3, height: 14, background: '#00f2ff', borderRadius: 1 } }), '能耗统计'),
					React.createElement('div', { style: { display: 'flex', gap: 4 } }, navItem('时', true), navItem('日', false))
				),
				React.createElement('div', { style: { padding: '12px 16px', display: 'flex', alignItems: 'flex-end', gap: 6, height: 88 } },
					[40, 65, 55, 80, 48, 72, 60, 90, 52, 68, 75, 58].map(function (h, i) {
						return React.createElement('div', {
							key: i,
							style: {
								flex: 1,
								height: h + '%',
								background: 'linear-gradient(180deg, #00f2ff 0%, rgba(22,93,255,0.4) 100%)',
								borderRadius: 2,
								opacity: 0.85
							}
						});
					})
				)
			)
		),

		/* 右列 */
		React.createElement('aside', {
			style: {
				position: 'absolute',
				right: 24,
				top: 168,
				width: 400,
				bottom: 200,
				display: 'flex',
				flexDirection: 'column',
				gap: 10,
				zIndex: 12
			}
		},
			React.createElement('div', { style: Object.assign({}, panelShell, { flex: '0 0 200px' }) },
				React.createElement('div', { style: panelHead },
					React.createElement('h2', { style: h2PanelTitle }, React.createElement('span', { style: { width: 3, height: 14, background: '#ff4d4f', borderRadius: 1 } }), '实时报警')
				),
				React.createElement('div', { style: { display: 'flex', gap: 8, padding: '8px 12px', fontSize: 11 } },
					React.createElement('span', { style: { color: '#ff4d4f' } }, '紧急 1'),
					React.createElement('span', { style: { color: '#faad14' } }, '重要 1'),
					React.createElement('span', { style: { color: '#52c41a' } }, '一般 1')
				),
				React.createElement('div', { style: { padding: '0 8px 8px', overflow: 'auto', maxHeight: 120 } },
					React.createElement('table', { style: { width: '100%', fontSize: 11, borderCollapse: 'collapse', color: '#9ec8e8' } },
						React.createElement('thead', null,
							React.createElement('tr', { style: { color: '#5a8aad' } },
								React.createElement('th', { style: { textAlign: 'left', padding: '4px 4px', borderBottom: '1px solid rgba(0,242,255,0.12)' } }, '时间'),
								React.createElement('th', { style: { textAlign: 'left', padding: '4px 4px', borderBottom: '1px solid rgba(0,242,255,0.12)' } }, '级别'),
								React.createElement('th', { style: { textAlign: 'left', padding: '4px 4px', borderBottom: '1px solid rgba(0,242,255,0.12)' } }, '事件')
							)
						),
						React.createElement('tbody', null,
							alarmRows.map(function (r) {
								return React.createElement('tr', { key: r.t },
									React.createElement('td', { style: { padding: '6px 4px', borderBottom: '1px solid rgba(255,255,255,0.04)' } }, r.t),
									React.createElement('td', { style: { padding: '6px 4px', borderBottom: '1px solid rgba(255,255,255,0.04)', color: r.lv === '紧急' ? '#ff4d4f' : r.lv === '重要' ? '#faad14' : '#52c41a' } }, r.lv),
									React.createElement('td', { style: { padding: '6px 4px', borderBottom: '1px solid rgba(255,255,255,0.04)' } }, r.name)
								);
							})
						)
					)
				)
			),
			React.createElement('div', { style: Object.assign({}, panelShell, { flex: '0 0 160px' }) },
				React.createElement('div', { style: panelHead },
					React.createElement('h2', { style: h2PanelTitle }, React.createElement('span', { style: { width: 3, height: 14, background: '#00f2ff', borderRadius: 1 } }), '储氢系统监控')
				),
				React.createElement('div', { style: { padding: '12px 16px', display: 'flex', gap: 10, alignItems: 'flex-end' } },
					[88, 92, 76, 85, 79].map(function (pct, i) {
						return React.createElement('div', { key: i, style: { flex: 1, textAlign: 'center' } },
							React.createElement('div', { style: { height: 72, background: 'rgba(0,30,60,0.6)', borderRadius: 2, position: 'relative', border: '1px solid rgba(0,242,255,0.15)' } },
								React.createElement('div', { style: { position: 'absolute', bottom: 0, left: 2, right: 2, height: pct + '%', background: 'linear-gradient(180deg, #00f2ff, #165dff)', borderRadius: '0 0 2px 2px' } })
							),
							React.createElement('div', { style: { fontSize: 10, marginTop: 4, color: '#6a8faf' } }, (i + 1) + '#')
						);
					})
				),
				React.createElement('div', { style: { padding: '0 16px 10px', fontSize: 11, color: '#7a9bb8', display: 'flex', justifyContent: 'space-between' } },
					React.createElement('span', null, '管汇压力 ', React.createElement('b', { style: { color: '#00f2ff' } }, '35.2'), ' MPa'),
					React.createElement('span', null, '可用氢量 ', React.createElement('b', { style: { color: '#00f2ff' } }, '4,250'), ' kg')
				)
			),
			React.createElement('div', { style: Object.assign({}, panelShell, { flex: '0 0 120px' }) },
				React.createElement('div', { style: panelHead },
					React.createElement('h2', { style: h2PanelTitle }, React.createElement('span', { style: { width: 3, height: 14, background: '#00f2ff', borderRadius: 1 } }), '安全环境监测')
				),
				React.createElement('div', { style: { padding: '10px 12px', display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 8, fontSize: 10 } },
					['氢浓度', '可燃气体', '温度', '湿度', '风速', '风向'].map(function (lab) {
						return React.createElement('div', { key: lab, style: { background: 'rgba(0,40,70,0.4)', padding: '6px 8px', borderRadius: 2, border: '1px solid rgba(0,242,255,0.1)' } },
							React.createElement('div', { style: { color: '#5a8aad' } }, lab),
							React.createElement('div', { style: { color: '#52c41a', marginTop: 2 } }, '正常')
						);
					})
				)
			),
			React.createElement('div', { style: Object.assign({}, panelShell, { flex: '1 1 0', minHeight: 0 }) },
				React.createElement('div', { style: panelHead },
					React.createElement('h2', { style: h2PanelTitle }, React.createElement('span', { style: { width: 3, height: 14, background: '#00f2ff', borderRadius: 1 } }), '当日关键指标')
				),
				React.createElement('div', { style: { display: 'flex', justifyContent: 'space-around', padding: '16px 8px' } },
					[{ v: 78, l: '完成率' }, { v: 92, l: '能效' }, { v: 100, l: '安全' }].map(function (g) {
						return React.createElement('div', { key: g.l, style: { textAlign: 'center' } },
							React.createElement('svg', { width: 72, height: 72, viewBox: '0 0 72 72' },
								React.createElement('circle', { cx: 36, cy: 36, r: 30, fill: 'none', stroke: 'rgba(0,242,255,0.12)', strokeWidth: 8 }),
								React.createElement('circle', {
									cx: 36, cy: 36, r: 30, fill: 'none', stroke: '#00f2ff', strokeWidth: 8,
									strokeDasharray: (g.v / 100 * 188) + ' 188',
									strokeLinecap: 'round',
									transform: 'rotate(-90 36 36)'
								}),
								React.createElement('text', { x: 36, y: 40, textAnchor: 'middle', fill: '#e8f4ff', fontSize: 14, fontWeight: 700 }, g.v + '%')
							),
							React.createElement('div', { style: { fontSize: 11, color: '#7a9bb8', marginTop: 6 } }, g.l)
						);
					})
				)
			)
		),

		/* 中央孪生区 */
		React.createElement('div', {
			className: 'h2-center-stage',
			style: {
				position: 'absolute',
				left: 448,
				right: 448,
				top: 168,
				bottom: 288,
				borderRadius: 6,
				border: '1px solid rgba(0, 242, 255, 0.28)',
				background: 'linear-gradient(165deg, rgba(6, 22, 48, 0.92) 0%, rgba(2, 8, 22, 0.96) 100%)',
				zIndex: 10,
				overflow: 'hidden'
			}
		},
			React.createElement('div', { className: 'h2-scanline', style: { position: 'absolute', inset: 0, overflow: 'hidden', pointerEvents: 'none' } }),
			/* 模拟夜景站场视觉 */
			React.createElement('div', {
				style: {
					position: 'absolute',
					inset: 0,
					background: `
						radial-gradient(ellipse 70% 45% at 50% 55%, rgba(0, 80, 120, 0.35) 0%, transparent 60%),
						linear-gradient(180deg, #020810 0%, #061a32 40%, #02060c 100%)
					`
				}
			}),
			React.createElement('div', {
				style: {
					position: 'absolute',
					left: '8%',
					top: '42%',
					width: 120,
					height: 48,
					border: '1px solid rgba(0,242,255,0.45)',
					borderRadius: 4,
					background: 'rgba(0,20,40,0.5)',
					fontSize: 11,
					color: '#00f2ff',
					display: 'flex',
					alignItems: 'center',
					justifyContent: 'center',
					boxShadow: '0 0 20px rgba(0,242,255,0.2)'
				}
			}, '制氢单元'),
			React.createElement('div', {
				style: {
					position: 'absolute',
					left: '38%',
					top: '28%',
					width: 100,
					height: 44,
					border: '1px solid rgba(22,93,255,0.5)',
					borderRadius: 4,
					background: 'rgba(10,30,60,0.45)',
					fontSize: 11,
					color: '#7ab6ff',
					display: 'flex',
					alignItems: 'center',
					justifyContent: 'center'
				}
			}, '压缩系统'),
			React.createElement('div', {
				style: {
					position: 'absolute',
					right: '18%',
					top: '38%',
					width: 110,
					height: 52,
					border: '1px solid rgba(0,242,255,0.4)',
					borderRadius: 4,
					background: 'rgba(0,30,55,0.5)',
					fontSize: 11,
					color: '#00f2ff',
					display: 'flex',
					alignItems: 'center',
					justifyContent: 'center'
				}
			}, '储氢罐组'),
			React.createElement('div', {
				style: {
					position: 'absolute',
					left: '42%',
					bottom: '22%',
					width: 140,
					height: 56,
					border: '1px solid rgba(0,242,255,0.55)',
					borderRadius: 4,
					background: 'rgba(0,40,70,0.55)',
					fontSize: 11,
					color: '#e8f4ff',
					display: 'flex',
					alignItems: 'center',
					justifyContent: 'center',
					boxShadow: '0 0 24px rgba(0,242,255,0.25)'
				}
			}, '加氢岛 · 数字孪生'),
			React.createElement('div', {
				style: {
					position: 'absolute',
					right: 16,
					top: 16,
					width: 56,
					height: 56,
					borderRadius: '50%',
					border: '2px solid rgba(0,242,255,0.35)',
					display: 'flex',
					alignItems: 'center',
					justifyContent: 'center',
					fontSize: 10,
					color: '#7a9bb8'
				}
			}, 'N'),
			React.createElement('div', {
				style: {
					position: 'absolute',
					left: 16,
					bottom: 72,
					fontSize: 11,
					color: 'rgba(0,242,255,0.6)',
					letterSpacing: '0.08em'
				}
			}, '视角：鸟瞰 · LOD 高 · 实时数据叠加'),
			React.createElement('div', {
				style: {
					position: 'absolute',
					left: 0,
					right: 0,
					bottom: 0,
					height: 76,
					padding: '10px 12px',
					background: 'linear-gradient(0deg, rgba(4,12,28,0.95) 0%, transparent 100%)',
					display: 'flex',
					alignItems: 'center',
					justifyContent: 'center',
					gap: 10
				}
			},
				subNavBtn('总览', '◎'),
				subNavBtn('压缩', '▣'),
				subNavBtn('储氢', '◉'),
				subNavBtn('加氢', '⬡'),
				subNavBtn('安全', '⚠'),
				subNavBtn('能耗', '⌁'),
				subNavBtn('管网', '⊞'),
				subNavBtn('报表', '≡')
			)
		),

		/* 底栏三图表面板 */
		React.createElement('footer', {
			style: {
				position: 'absolute',
				left: 448,
				right: 448,
				bottom: 24,
				height: 160,
				display: 'flex',
				gap: 12,
				zIndex: 12
			}
		},
			React.createElement('div', { style: Object.assign({}, panelShell, { flex: 1 }) },
				React.createElement('div', { style: panelHead },
					React.createElement('h2', { style: h2PanelTitle }, React.createElement('span', { style: { width: 3, height: 14, background: '#00f2ff', borderRadius: 1 } }), '加氢车辆统计')
				),
				React.createElement('div', { style: { display: 'flex', alignItems: 'center', padding: '12px 20px', gap: 20 } },
					React.createElement('svg', { width: 100, height: 100, viewBox: '0 0 100 100' },
						React.createElement('circle', { cx: 50, cy: 50, r: 36, fill: 'none', stroke: 'rgba(0,242,255,0.12)', strokeWidth: 14 }),
						React.createElement('circle', { cx: 50, cy: 50, r: 36, fill: 'none', stroke: '#00f2ff', strokeWidth: 14, strokeDasharray: '90 226', strokeLinecap: 'round', transform: 'rotate(-90 50 50)' }),
						React.createElement('circle', { cx: 50, cy: 50, r: 36, fill: 'none', stroke: '#165dff', strokeWidth: 14, strokeDasharray: '55 226', strokeDashoffset: -90, strokeLinecap: 'round', transform: 'rotate(-90 50 50)' }),
						React.createElement('circle', { cx: 50, cy: 50, r: 36, fill: 'none', stroke: '#52c41a', strokeWidth: 14, strokeDasharray: '40 226', strokeDashoffset: -145, strokeLinecap: 'round', transform: 'rotate(-90 50 50)' })
					),
					React.createElement('div', { style: { fontSize: 11, lineHeight: 1.9, color: '#7a9bb8' } },
						React.createElement('div', null, React.createElement('span', { style: { color: '#00f2ff' } }, '●'), ' 重卡 38%'),
						React.createElement('div', null, React.createElement('span', { style: { color: '#165dff' } }, '●'), ' 物流 28%'),
						React.createElement('div', null, React.createElement('span', { style: { color: '#52c41a' } }, '●'), ' 公交 22%'),
						React.createElement('div', null, React.createElement('span', { style: { color: '#8b9bb5' } }, '●'), ' 其他 12%')
					)
				)
			),
			React.createElement('div', { style: Object.assign({}, panelShell, { flex: 1.2 }) },
				React.createElement('div', { style: panelHead },
					React.createElement('h2', { style: h2PanelTitle }, React.createElement('span', { style: { width: 3, height: 14, background: '#00f2ff', borderRadius: 1 } }), '累计加氢量趋势')
				),
				React.createElement('div', { style: { padding: '8px 12px', height: 108 } },
					React.createElement('svg', { width: '100%', height: '100%', viewBox: '0 0 400 100', preserveAspectRatio: 'none' },
						React.createElement('polyline', { fill: 'none', stroke: 'rgba(0,242,255,0.25)', strokeWidth: '1', points: '0,80 400,80' }),
						React.createElement('polyline', { fill: 'none', stroke: '#00f2ff', strokeWidth: '2', points: '0,85 40,78 80,72 120,65 160,58 200,50 240,45 280,38 320,32 360,28 400,22' }),
						React.createElement('polyline', { fill: 'none', stroke: 'rgba(122,155,184,0.6)', strokeWidth: '1.5', strokeDasharray: '4 3', points: '0,90 40,88 80,86 120,82 160,78 200,75 240,72 280,68 320,65 360,62 400,58' })
					)
				),
				React.createElement('div', { style: { padding: '0 12px 8px', fontSize: 10, color: '#5a8aad', display: 'flex', gap: 16 } },
					React.createElement('span', null, '━━ 本年累计'),
					React.createElement('span', null, '- - 去年同期')
				)
			),
			React.createElement('div', { style: Object.assign({}, panelShell, { flex: 1 }) },
				React.createElement('div', { style: panelHead },
					React.createElement('h2', { style: h2PanelTitle }, React.createElement('span', { style: { width: 3, height: 14, background: '#00f2ff', borderRadius: 1 } }), '运行时长统计')
				),
				React.createElement('div', { style: { padding: '16px 20px', display: 'flex', flexDirection: 'column', gap: 10, justifyContent: 'center', height: 108 } },
					[
						{ n: '加氢系统', p: 92 },
						{ n: '压缩系统', p: 88 },
						{ n: '冷却循环', p: 76 },
						{ n: '站控 PLC', p: 100 }
					].map(function (row) {
						return React.createElement('div', { key: row.n, style: { display: 'flex', alignItems: 'center', gap: 10 } },
							React.createElement('div', { style: { width: 72, fontSize: 10, color: '#7a9bb8' } }, row.n),
							React.createElement('div', { style: { flex: 1, height: 8, background: 'rgba(0,40,70,0.5)', borderRadius: 4, overflow: 'hidden' } },
								React.createElement('div', { style: { width: row.p + '%', height: '100%', background: 'linear-gradient(90deg, #165dff, #00f2ff)', borderRadius: 4 } })
							),
							React.createElement('div', { style: { width: 36, fontSize: 10, color: '#00f2ff', textAlign: 'right' } }, row.p + '%')
						);
					})
				)
			)
		),

		/* 四角装饰线 */
		React.createElement('div', { style: { position: 'absolute', left: 12, top: 12, width: 48, height: 48, borderLeft: '2px solid #00f2ff', borderTop: '2px solid #00f2ff', opacity: 0.6, pointerEvents: 'none' } }),
		React.createElement('div', { style: { position: 'absolute', right: 12, top: 12, width: 48, height: 48, borderRight: '2px solid #00f2ff', borderTop: '2px solid #00f2ff', opacity: 0.6, pointerEvents: 'none' } }),
		React.createElement('div', { style: { position: 'absolute', left: 12, bottom: 12, width: 48, height: 48, borderLeft: '2px solid #00f2ff', borderBottom: '2px solid #00f2ff', opacity: 0.6, pointerEvents: 'none' } }),
		React.createElement('div', { style: { position: 'absolute', right: 12, bottom: 12, width: 48, height: 48, borderRight: '2px solid #00f2ff', borderBottom: '2px solid #00f2ff', opacity: 0.6, pointerEvents: 'none' } })
	);
};

if (typeof module !== 'undefined' && module.exports) module.exports = Component;