a27e3b8e43
Optimized the root .gitignore to exclude virtual environments, node modules, and temp folders to ensure clean and lightweight version tracking. Co-authored-by: Cursor <cursoragent@cursor.com>
669 lines
29 KiB
JavaScript
669 lines
29 KiB
JavaScript
// 【重要】必须使用 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;
|