/* ============================================================ Operion WTT — P&ID Synoptic v2 (full-height, ISA symbols, bigger) ============================================================ */ (function () { const { useState } = React; const h = React.createElement; const Icon = window.Icon; /* ── Colors ─────────────────────────────────────────────── */ const PL = '#1E9FD5', WL = '#E07A35', SL = '#9A7040', CH = '#9B6AF0'; const ST = { run: '#22C865', warn: '#F0B429', alarm: '#E53935', idle: '#5A7A90', fault: '#E53935' }; let TXT1 = '#DFF0FF', TXT2 = '#7AACC8', TXT3 = '#3D6480'; let GRID = 'rgba(255,255,255,.03)'; let BGF = '#0A1626'; let UVC = '#90CFFF'; /* ── Shared helpers ─────────────────────────────────────── */ // Animated pipe — two layers: body + dash const Pipe = ({ x1, y1, x2, y2, c, w = 3.5, simR = true }) => h('g', null, h('line', { x1, y1, x2, y2, stroke: c, strokeWidth: w + 7, strokeOpacity: .07, strokeLinecap: 'round' }), h('line', { x1, y1, x2, y2, stroke: c, strokeWidth: w, strokeOpacity: .4, strokeLinecap: 'round' }), h('line', { x1, y1, x2, y2, stroke: c, strokeWidth: w, strokeLinecap: 'round', className: 'flow-dash', style: simR ? null : { animationPlayState: 'paused' } })); // ISA instrument bubble (r=18, leader line, divided circle, tag+value) const Instr = ({ x, y, tag, val, c, below = false }) => { const R = 18, ly = below ? 36 : -36, cy2 = below ? 54 : -54; return h('g', null, h('line', { x1: x, y1: y, x2: x, y2: y + ly, stroke: TXT3, strokeWidth: 1.2 }), h('circle', { cx: x, cy: y + cy2, r: R, fill: BGF, stroke: c, strokeWidth: 1.5 }), h('line', { x1: x - R, y1: y + cy2, x2: x + R, y2: y + cy2, stroke: c, strokeWidth: .9, strokeOpacity: .55 }), h('text', { x, y: y + cy2 - 5, textAnchor: 'middle', fontSize: 9, fontFamily: 'IBM Plex Mono,monospace', fill: c, fontWeight: 700 }, tag), h('text', { x, y: y + cy2 + 7, textAnchor: 'middle', fontSize: 9, fontFamily: 'IBM Plex Mono,monospace', fill: TXT1 }, val)); }; // Chemical dosing diamond on pipe const DosePoint = ({ x, y, label, c = CH }) => h('g', null, h('line', { x1: x, y1: y, x2: x, y2: y - 28, stroke: c, strokeWidth: 1.2 }), h('path', { d: `M${x},${y - 37} L${x + 9},${y - 28} L${x},${y - 19} L${x - 9},${y - 28} Z`, fill: c, fillOpacity: .55, stroke: c, strokeWidth: 1.2 }), h('text', { x, y: y - 48, textAnchor: 'middle', fontSize: 10, fontFamily: 'IBM Plex Mono,monospace', fill: c }, label)); // Centrifugal pump (ISA: circle + inner impeller triangle) const Pump = ({ x, y, r = 22, c, status = 'run', tag, onClick }) => { const sc = ST[status] || ST.run; const run = status === 'run'; return h('g', { className: 'pid-node', onClick, style: { cursor: 'pointer' }, transform: `translate(${x},${y})` }, h('circle', { cx: 0, cy: 0, r: r + 4, fill: BGF, stroke: c, strokeWidth: 1.8 }), h('path', { d: `M${-r * .55},${-r * .6} L${r * .65},0 L${-r * .55},${r * .6} Z`, fill: c, fillOpacity: run ? .65 : .18 }), h('circle', { cx: r * .65, cy: -r * .65, r: 5, fill: sc }), h('text', { x: 0, y: r + 17, textAnchor: 'middle', fontSize: 11, fontFamily: 'IBM Plex Mono,monospace', fill: TXT2, letterSpacing: '.03em' }, tag)); }; // Vertical tank with animated level fill const VTank = ({ x, y, w = 70, th = 120, lvl = 60, c, tag, label, status = 'run', onClick }) => { const sc = ST[status] || ST.run; const fillH = Math.max(3, (lvl / 100) * (th - 8)); const col = (status === 'alarm' || status === 'fault') ? ST.alarm : c; return h('g', { className: 'pid-node', onClick, style: { cursor: 'pointer' }, transform: `translate(${x},${y})` }, h('rect', { x: -w / 2, y: -th / 2, width: w, height: th, rx: 4, fill: BGF, stroke: col, strokeWidth: 2 }), h('rect', { x: -w / 2 + 3, y: th / 2 - fillH - 3, width: w - 6, height: fillH, rx: 3, fill: col, fillOpacity: .28 }), h('line', { x1: -w / 2 + 3, y1: th / 2 - fillH - 3, x2: w / 2 - 3, y2: th / 2 - fillH - 3, stroke: col, strokeOpacity: .6, strokeWidth: 1.2 }), h('circle', { cx: w / 2 - 7, cy: -th / 2 + 8, r: 5.5, fill: sc }), h('text', { x: 0, y: 7, textAnchor: 'middle', fontSize: 16, fontFamily: 'IBM Plex Mono,monospace', fill: col, fontWeight: 700 }, lvl + '%'), h('text', { x: 0, y: th / 2 + 15, textAnchor: 'middle', fontSize: 11, fontFamily: 'IBM Plex Mono,monospace', fill: TXT2 }, tag), h('text', { x: 0, y: th / 2 + 27, textAnchor: 'middle', fontSize: 10, fontFamily: 'Titillium Web,sans-serif', fill: TXT3 }, label)); }; // Circular clarifier (top-view: double ring + radial arms) const Clarifier = ({ x, y, r = 56, c, tag, label, status = 'run', onClick }) => { const sc = ST[status] || ST.run; return h('g', { className: 'pid-node', onClick, style: { cursor: 'pointer' }, transform: `translate(${x},${y})` }, h('circle', { cx: 0, cy: 0, r, fill: BGF, stroke: c, strokeWidth: 2 }), h('circle', { cx: 0, cy: 0, r: r * .38, fill: 'none', stroke: c, strokeWidth: 1.2, strokeOpacity: .45 }), h('line', { x1: 0, y1: -r, x2: 0, y2: r, stroke: c, strokeWidth: 1, strokeOpacity: .22 }), h('line', { x1: -r, y1: 0, x2: r, y2: 0, stroke: c, strokeWidth: 1, strokeOpacity: .22 }), h('line', { x1: -r * .7, y1: -r * .7, x2: r * .7, y2: r * .7, stroke: c, strokeWidth: 1, strokeOpacity: .1 }), h('circle', { cx: r * .68, cy: -r * .68, r: 5.5, fill: sc }), h('text', { x: 0, y: 6, textAnchor: 'middle', fontSize: 11, fontFamily: 'IBM Plex Mono,monospace', fill: c, fontWeight: 700 }, tag), h('text', { x: 0, y: r + 15, textAnchor: 'middle', fontSize: 10, fontFamily: 'Titillium Web,sans-serif', fill: TXT2 }, label)); }; // Filter vessel (vertical rect with media stripes) const FVessel = ({ x, y, w = 54, th = 92, c, tag, label, status = 'run', onClick }) => { const sc = ST[status] || ST.run; return h('g', { className: 'pid-node', onClick, style: { cursor: 'pointer' }, transform: `translate(${x},${y})` }, h('rect', { x: -w / 2, y: -th / 2, width: w, height: th, rx: 3, fill: BGF, stroke: c, strokeWidth: 2 }), ...[.18, .32, .46, .60, .74, .88].map((p, i) => h('line', { key: i, x1: -w / 2 + 5, y1: -th / 2 + th * p, x2: w / 2 - 5, y2: -th / 2 + th * p, stroke: c, strokeWidth: 1.2, strokeOpacity: .32 })), h('circle', { cx: w / 2 - 7, cy: -th / 2 + 8, r: 5.5, fill: sc }), h('text', { x: 0, y: th / 2 + 15, textAnchor: 'middle', fontSize: 11, fontFamily: 'IBM Plex Mono,monospace', fill: TXT2 }, tag), h('text', { x: 0, y: th / 2 + 27, textAnchor: 'middle', fontSize: 10, fontFamily: 'Titillium Web,sans-serif', fill: TXT3 }, label)); }; // Membrane module (horizontal layers) const MemModule = ({ x, y, w = 96, mh = 40, c, tag, label, status = 'run', onClick }) => { const sc = ST[status] || ST.run; return h('g', { className: 'pid-node', onClick, style: { cursor: 'pointer' }, transform: `translate(${x},${y})` }, h('rect', { x: -w / 2, y: -mh / 2, width: w, height: mh, rx: 6, fill: BGF, stroke: c, strokeWidth: 2 }), ...[...Array(6)].map((_, i) => h('line', { key: i, x1: -w / 2 + 8, y1: -mh / 2 + (i + 1) * mh / 7, x2: w / 2 - 8, y2: -mh / 2 + (i + 1) * mh / 7, stroke: c, strokeWidth: 1, strokeOpacity: .28 })), h('circle', { cx: w / 2 - 8, cy: -mh / 2 + 7, r: 5.5, fill: sc }), h('text', { x: 0, y: mh / 2 + 15, textAnchor: 'middle', fontSize: 11, fontFamily: 'IBM Plex Mono,monospace', fill: TXT2 }, tag), h('text', { x: 0, y: mh / 2 + 27, textAnchor: 'middle', fontSize: 10, fontFamily: 'Titillium Web,sans-serif', fill: TXT3 }, label)); }; // Bar screen const BarScreen = ({ x, y, w = 30, sh = 74, c, tag }) => h('g', { transform: `translate(${x},${y})` }, h('rect', { x: -w / 2 - 3, y: -sh / 2, width: w + 6, height: sh, rx: 2, fill: BGF, stroke: c, strokeWidth: 2 }), ...[...Array(5)].map((_, i) => h('line', { key: i, x1: -w / 2 + 2 + i * (w / 4), y1: -sh / 2 + 6, x2: -w / 2 + 2 + i * (w / 4), y2: sh / 2 - 6, stroke: c, strokeWidth: 2, strokeOpacity: .65 })), h('text', { x: 0, y: sh / 2 + 15, textAnchor: 'middle', fontSize: 11, fontFamily: 'IBM Plex Mono,monospace', fill: TXT2 }, tag)); // UV inline reactor const UVReactor = ({ x, y, w = 80, rh = 30, c, tag, status = 'run' }) => { const sc = ST[status] || ST.run; const uc = UVC; return h('g', { transform: `translate(${x},${y})` }, h('rect', { x: -w / 2, y: -rh / 2, width: w, height: rh, rx: rh / 2, fill: BGF, stroke: uc, strokeWidth: 1.8 }), h('rect', { x: -w / 2, y: -rh / 2, width: w, height: rh, rx: rh / 2, fill: uc, fillOpacity: .07 }), h('line', { x1: -w / 2 + 12, y1: 0, x2: w / 2 - 12, y2: 0, stroke: uc, strokeWidth: 2, strokeOpacity: .7, strokeDasharray: '5 3' }), h('circle', { cx: w / 2 - 8, cy: -rh / 2 + 6, r: 5.5, fill: sc }), h('text', { x: 0, y: rh / 2 + 15, textAnchor: 'middle', fontSize: 11, fontFamily: 'IBM Plex Mono,monospace', fill: TXT2 }, tag)); }; // Blower / fan const Blower = ({ x, y, r = 18, c, status = 'run', tag }) => { const sc = ST[status] || ST.run; const run = status === 'run'; return h('g', { transform: `translate(${x},${y})` }, h('circle', { cx: 0, cy: 0, r: r + 3, fill: BGF, stroke: c, strokeWidth: 1.8 }), ...[0, 60, 120, 180, 240, 300].map((a, i) => { const rd = a * Math.PI / 180; return h('line', { key: i, x1: 0, y1: 0, x2: Math.cos(rd) * r * .85, y2: Math.sin(rd) * r * .85, stroke: c, strokeWidth: 2.5, strokeLinecap: 'round', strokeOpacity: run ? .7 : .2 }); }), h('circle', { cx: 0, cy: 0, r: 4, fill: c }), h('circle', { cx: r * .7, cy: -r * .7, r: 5, fill: sc }), h('text', { x: 0, y: r + 17, textAnchor: 'middle', fontSize: 10, fontFamily: 'IBM Plex Mono,monospace', fill: TXT2 }, tag)); }; // Source / intake box const SourceBox = ({ x, y, c, tag, label }) => h('g', { transform: `translate(${x},${y})` }, h('rect', { x: -18, y: -38, width: 36, height: 76, rx: 4, fill: BGF, stroke: c, strokeWidth: 1.8 }), ...[0, 1, 2].map((i) => h('text', { key: i, x: 0, y: -20 + i * 18, textAnchor: 'middle', fontSize: 16, fontFamily: 'serif', fill: c, fillOpacity: .7 }, '≈')), h('text', { x: 0, y: 54, textAnchor: 'middle', fontSize: 11, fontFamily: 'IBM Plex Mono,monospace', fill: TXT2, letterSpacing: '.04em' }, tag), h('text', { x: 0, y: 67, textAnchor: 'middle', fontSize: 10, fontFamily: 'Titillium Web,sans-serif', fill: TXT3 }, label)); /* ── MAIN SYNOPTIC ──────────────────────────────────────── */ function Synoptic() { const s = window.useStore(); const { t, tl, sim, toast } = window.useApp(); const [sel, setSel] = useState(null); const [zoom, setZoom] = useState(1); const simR = window.STORE.simRunning; const L = s.live; const dark = document.documentElement.getAttribute('data-theme') === 'dark'; TXT1 = dark ? '#DFF0FF' : '#15273C'; TXT2 = dark ? '#7AACC8' : '#40607C'; TXT3 = dark ? '#3D6480' : '#93A6B6'; GRID = dark ? 'rgba(255,255,255,.04)' : 'rgba(35,65,106,.08)'; BGF = dark ? '#0A1626' : '#FFFFFF'; UVC = dark ? '#90CFFF' : '#1B82B8'; const ps = (id) => (s.pumps.find((x) => x.id === id) || {}).state || 'idle'; const tlvl = (id) => (s.tanks.find((x) => x.id === id) || {}).lvl || 60; const pH_A = (s.primarySensors.find((x) => x.id === 'AI-101') || { val: 7.4 }).val.toFixed(1); const turb = (s.primarySensors.find((x) => x.id === 'AI-102') || { val: 18 }).val.toFixed(1); const cond = (s.primarySensors.find((x) => x.id === 'AI-103') || { val: 612 }).val.toFixed(0); const flowA = (s.primarySensors.find((x) => x.id === 'FI-105') || { val: 120 }).val.toFixed(0); const presA = (s.primarySensors.find((x) => x.id === 'PI-106') || { val: 3.4 }).val.toFixed(1); const lvlC = (s.primarySensors.find((x) => x.id === 'LI-107') || { val: 72 }).val.toFixed(0); const lbl = (o) => o[s.lang] || o.it; const clampZoom = (value) => Math.max(0.75, Math.min(2.5, Math.round(value * 20) / 20)); const zoomBy = (step) => setZoom((value) => clampZoom(value + step)); const onZoomWheel = (event) => { if (Math.abs(event.deltaY) < 2) return; event.preventDefault(); zoomBy(event.deltaY > 0 ? -0.1 : 0.1); }; /* layout */ const VW = 2500, VH = 1420; const YA = 320, YB = 840, YC = 1210; const A = { src: 72, p1: 230, scr: 385, sbb: 540, coag: 700, dec: 905, fs: 1110, fac: 1285, uf: 1455, ro: 1655, uv: 1855, tk5: 2060, end: 2300 }; const B = { src: 72, scr: 240, diss: 405, tk2: 600, p201: 800, prim: 985, tk3: 1210, tk4: 1475, terz: 1710, dis: 1895, end: 2160 }; const C = { p301: 1100, thk: 1330, cf: 1610, cas: 1890 }; return h('div', { className: 'page page-pid' }, /* toolbar */ h('div', { className: 'toolbar', style: { marginBottom: 12 } }, h('div', { className: 'legend', style: { gap: 18 } }, [[PL, lbl({ it: 'Acque primarie', en: 'Primary water', es: 'Agua primaria', fr: 'Eaux primaires', de: 'Primärwasser' })], [WL, lbl({ it: 'Acque reflue', en: 'Wastewater', es: 'Residuales', fr: 'Eaux usées', de: 'Abwasser' })], [SL, lbl({ it: 'Fanghi', en: 'Sludge', es: 'Fangos', fr: 'Boues', de: 'Schlamm' })], [CH, lbl({ it: 'Chimici', en: 'Chemicals', es: 'Químicos', fr: 'Chimique', de: 'Chemie' })] ].map(([c, l], i) => h('span', { key: i, className: 'li', style: { whiteSpace: 'nowrap' } }, h('span', { className: 'sw', style: { background: c, width: 20, height: 3.5, borderRadius: 2 } }), l))), h('span', { className: 'spacer' }), h(window.Badge, { status: simR ? 'run' : 'idle', label: simR ? t('sim.on') : t('sim.off'), pulse: simR }), h('button', { className: 'btn btn-ghost btn-sm', onClick: simR ? sim.pause : sim.start }, h(Icon, { name: simR ? 'pause' : 'play', size: 14 }), simR ? t('sim.pause') : t('sim.start'))), /* P&ID canvas — full height */ h('div', { className: 'pid-wrap', onWheel: onZoomWheel }, h('div', { className: 'pid-zoom-toolbar', onWheel: (event) => event.stopPropagation() }, h('button', { className: 'pid-zoom-btn', type: 'button', onClick: () => zoomBy(-0.15), title: 'Riduci zoom' }, '−'), h('span', { className: 'pid-zoom-value' }, Math.round(zoom * 100) + '%'), h('button', { className: 'pid-zoom-btn', type: 'button', onClick: () => zoomBy(0.15), title: 'Aumenta zoom' }, '+'), h('button', { className: 'pid-zoom-action', type: 'button', onClick: () => setZoom(1.35), title: 'Ingrandimento rapido' }, 'Zoom'), h('button', { className: 'pid-zoom-action', type: 'button', onClick: () => setZoom(1), title: 'Adatta alla vista' }, 'Fit')), h('svg', { viewBox: `0 0 ${VW} ${VH}`, preserveAspectRatio: 'xMidYMid meet', style: { display: 'block', width: (zoom * 100) + '%', height: (zoom * 100) + '%', minWidth: '100%', minHeight: '100%' }, className: simR ? '' : 'sim-paused' }, /* bg */ h('defs', null, h('pattern', { id: 'pidg', width: 50, height: 50, patternUnits: 'userSpaceOnUse' }, h('path', { d: 'M50 0L0 0 0 50', fill: 'none', stroke: GRID, strokeWidth: .6 }))), h('rect', { width: VW, height: VH, fill: 'transparent' }), h('rect', { width: VW, height: VH, fill: 'url(#pidg)' }), /* ── ZONE BANNERS ────────────────────────────────── */ h('rect', { x: 16, y: 20, width: 320, height: 24, rx: 4, fill: PL, fillOpacity: .1 }), h('text', { x: 26, y: 37, fontSize: 12, fontFamily: 'IBM Plex Mono,monospace', fill: PL, letterSpacing: '.1em', fontWeight: 700 }, 'A · ' + lbl({ it: 'ACQUE PRIMARIE', en: 'PRIMARY WATER', es: 'AGUA PRIMARIA', fr: 'EAUX PRIMAIRES', de: 'PRIMÄRWASSER' })), h('rect', { x: 16, y: 560, width: 270, height: 24, rx: 4, fill: WL, fillOpacity: .1 }), h('text', { x: 26, y: 577, fontSize: 12, fontFamily: 'IBM Plex Mono,monospace', fill: WL, letterSpacing: '.1em', fontWeight: 700 }, 'B · ' + lbl({ it: 'ACQUE REFLUE', en: 'WASTEWATER', es: 'AGUAS RESIDUALES', fr: 'EAUX USÉES', de: 'ABWASSER' })), h('rect', { x: 16, y: 1080, width: 210, height: 24, rx: 4, fill: SL, fillOpacity: .1 }), h('text', { x: 26, y: 1097, fontSize: 12, fontFamily: 'IBM Plex Mono,monospace', fill: SL, letterSpacing: '.1em', fontWeight: 700 }, 'C · ' + lbl({ it: 'LINEA FANGHI', en: 'SLUDGE LINE', es: 'LÍNEA FANGOS', fr: 'FILIÈRE BOUES', de: 'SCHLAMMLINIE' })), /* ═══════════════════════════════════════════════════ LINE A — PRIMARY WATER ══════════════════════════════════════════════════ */ /* P-102 parallel run */ h(Pipe, { x1: A.src + 18, y1: YA + 65, x2: A.scr - 16, y2: YA + 65, c: PL, simR }), h(Pipe, { x1: A.src + 18, y1: YA, x2: A.src + 18, y2: YA + 65, c: PL, simR }), h(Pipe, { x1: A.scr - 16, y1: YA, x2: A.scr - 16, y2: YA + 65, c: PL, simR }), /* main backbone */ h(Pipe, { x1: A.src + 18, y1: YA, x2: A.p1 - 26, y2: YA, c: PL, simR }), h(Pipe, { x1: A.p1 + 26, y1: YA, x2: A.scr - 16, y2: YA, c: PL, simR }), h(Pipe, { x1: A.scr + 16, y1: YA, x2: A.sbb - 28, y2: YA, c: PL, simR }), h(Pipe, { x1: A.sbb + 28, y1: YA, x2: A.coag - 37, y2: YA, c: PL, simR }), h(Pipe, { x1: A.coag + 37, y1: YA, x2: A.dec - 58, y2: YA, c: PL, simR }), h(Pipe, { x1: A.dec + 58, y1: YA, x2: A.fs - 29, y2: YA, c: PL, simR }), h(Pipe, { x1: A.fs + 29, y1: YA, x2: A.fac - 29, y2: YA, c: PL, simR }), h(Pipe, { x1: A.fac + 29, y1: YA, x2: A.uf - 50, y2: YA, c: PL, simR }), h(Pipe, { x1: A.uf + 50, y1: YA, x2: A.ro - 55, y2: YA, c: PL, simR }), h(Pipe, { x1: A.ro + 50, y1: YA, x2: A.uv - 42, y2: YA, c: PL, simR }), h(Pipe, { x1: A.uv + 42, y1: YA, x2: A.tk5 - 37, y2: YA, c: PL, simR }), h(Pipe, { x1: A.tk5 + 37, y1: YA, x2: A.end, y2: YA, c: PL, simR }), /* end arrow */ h('polygon', { points: `${A.end},${YA - 9} ${A.end + 20},${YA} ${A.end},${YA + 9}`, fill: PL, fillOpacity: .8 }), h('text', { x: A.end + 26, y: YA - 6, fontSize: 10, fontFamily: 'IBM Plex Mono,monospace', fill: TXT2 }, lbl({ it: 'UTENZA', en: 'SUPPLY', es: 'SUMIN.', fr: 'RÉSEAU', de: 'VERSORG.' })), /* INSTRUMENTS A (above pipe) */ h(Instr, { x: A.p1 + 68, y: YA, tag: 'FIT', val: flowA + ' m³/h', c: PL }), h(Instr, { x: A.p1 + 68, y: YA + 65, tag: 'PIT', val: presA + ' bar', c: PL, below: true }), h(Instr, { x: A.sbb + 72, y: YA, tag: 'AIT', val: 'pH ' + pH_A, c: PL }), h(Instr, { x: A.coag + 72, y: YA, tag: 'AIT', val: turb + ' NTU', c: PL }), h(Instr, { x: A.dec + 76, y: YA, tag: 'LIT', val: lvlC + '%', c: PL }), h(Instr, { x: A.fac + 76, y: YA, tag: 'AIT', val: cond + ' µS', c: PL }), h(Instr, { x: A.ro - 24, y: YA, tag: 'PIT', val: '12.4 bar', c: '#F0B429', below: true }), h(Instr, { x: A.tk5 + 70, y: YA, tag: 'AIT', val: 'Cl₂ 0.3', c: PL }), /* DOSING A */ h(DosePoint, { x: A.coag - 60, y: YA, label: 'FeCl₃', c: CH }), h(DosePoint, { x: A.uv + 50, y: YA, label: 'NaOCl', c: CH }), /* EQUIPMENT A */ h(SourceBox, { x: A.src, y: YA, c: PL, tag: 'CAP-1', label: lbl({ it: 'CAPTAZ.', en: 'INTAKE', es: 'CAPTAC.', fr: 'CAPTAGE', de: 'ENTNAHME' }) }), h(Pump, { x: A.p1, y: YA, r: 22, c: PL, status: ps('P-101'), tag: 'P-101', onClick: () => setSel({ id: 'P-101' }) }), h(Pump, { x: A.p1, y: YA + 65, r: 22, c: PL, status: ps('P-102'), tag: 'P-102', onClick: () => setSel({ id: 'P-102' }) }), h(BarScreen, { x: A.scr, y: YA, w: 30, sh: 74, c: PL, tag: 'SCR-1' }), /* grit/desanding */ h('g', { transform: `translate(${A.sbb},${YA})` }, h('rect', { x: -32, y: -40, width: 64, height: 80, rx: 3, fill: BGF, stroke: PL, strokeWidth: 2 }), h('path', { d: `M-22,26 Q0,36 22,26`, stroke: PL, fill: 'none', strokeWidth: 1.5, strokeOpacity: .5 }), h('circle', { cx: 24, cy: -32, r: 5.5, fill: ST.run }), h('text', { x: 0, y: 58, textAnchor: 'middle', fontSize: 11, fontFamily: 'IBM Plex Mono,monospace', fill: TXT2 }, 'SBB-1'), h('text', { x: 0, y: 71, textAnchor: 'middle', fontSize: 10, fontFamily: 'Titillium Web,sans-serif', fill: TXT3 }, lbl({ it: 'DISSABBIATURA', en: 'GRIT REMOVAL', es: 'DESARENADO', fr: 'DESSABLAGE', de: 'SANDFANG' }))), h(VTank, { x: A.coag, y: YA, w: 70, th: 120, lvl: Math.round(Number(lvlC) * .84), c: PL, tag: 'COAG-1', label: lbl({ it: 'COAG/FLOCC', en: 'COAG/FLOCC', es: 'COAG/FLOC', fr: 'COAG/FLOC', de: 'KOAG/FLOCK' }), status: 'run', onClick: () => setSel({ id: 'COAG-1' }) }), h(Clarifier, { x: A.dec, y: YA, r: 56, c: PL, tag: 'DEC-1', label: lbl({ it: 'DECANTATORE', en: 'SETTLING TANK', es: 'DECANTADOR', fr: 'DÉCANTEUR', de: 'ABSETZBECKEN' }), status: 'run', onClick: () => setSel({ id: 'DEC-1' }) }), h(FVessel, { x: A.fs, y: YA, w: 54, th: 92, c: PL, tag: 'F-301', label: lbl({ it: 'F. SABBIA', en: 'SAND FILTER', es: 'F. ARENA', fr: 'F. SABLE', de: 'SANDFILTER' }), status: ps('P-501') === 'fault' ? 'warn' : 'run', onClick: () => setSel({ id: 'F-301' }) }), h(FVessel, { x: A.fac, y: YA, w: 54, th: 92, c: PL, tag: 'F-302', label: lbl({ it: 'C. ATTIVO', en: 'ACT. CARBON', es: 'C. ACTIVO', fr: 'CHARBON', de: 'AKTIVKOHLE' }), status: 'run', onClick: () => setSel({ id: 'F-302' }) }), h(MemModule, { x: A.uf, y: YA, w: 96, mh: 40, c: PL, tag: 'UF-1', label: lbl({ it: 'ULTRAFILTRAZ.', en: 'ULTRAFILT.', es: 'ULTRAFILTR.', fr: 'ULTRAFILTR.', de: 'ULTRAFILTR.' }), status: 'run', onClick: () => setSel({ id: 'UF-1' }) }), /* HP pump before RO */ h(Pump, { x: A.ro - 80, y: YA, r: 16, c: '#F0B429', status: 'run', tag: 'P-HP' }), h(MemModule, { x: A.ro, y: YA, w: 96, mh: 40, c: '#F0B429', tag: 'RO-1', label: lbl({ it: 'OSMOSI INVERSA', en: 'REVERSE OSMOSIS', es: 'ÓSMOSIS INV.', fr: 'OSMOSE INV.', de: 'UMKEHROSMOSE' }), status: 'warn', onClick: () => setSel({ id: 'RO-1' }) }), h(UVReactor, { x: A.uv, y: YA, w: 80, rh: 30, c: PL, tag: 'UV-401', status: 'run' }), h(VTank, { x: A.tk5, y: YA, w: 70, th: 120, lvl: tlvl('TK-05'), c: PL, tag: 'TK-05', label: lbl({ it: 'SERB. ACQUA TRATTATA', en: 'CLEAN WATER TANK', es: 'DEPOS. TRAT.', fr: 'EAU TRAITÉE', de: 'REINWASSERTANK' }), status: 'run', onClick: () => setSel({ id: 'TK-05' }) }), /* ═══════════════════════════════════════════════════ LINE B — WASTEWATER ══════════════════════════════════════════════════ */ h(Pipe, { x1: B.src + 18, y1: YB, x2: B.scr - 16, y2: YB, c: WL, simR }), h(Pipe, { x1: B.scr + 16, y1: YB, x2: B.diss - 28, y2: YB, c: WL, simR }), h(Pipe, { x1: B.diss + 28, y1: YB, x2: B.tk2 - 37, y2: YB, c: WL, simR }), h(Pipe, { x1: B.tk2 + 37, y1: YB, x2: B.p201 - 26, y2: YB, c: WL, simR }), h(Pipe, { x1: B.p201 + 26, y1: YB, x2: B.prim - 37, y2: YB, c: WL, simR }), h(Pipe, { x1: B.prim + 37, y1: YB, x2: B.tk3 - 48, y2: YB, c: WL, simR }), h(Pipe, { x1: B.tk3 + 48, y1: YB, x2: B.tk4 - 56, y2: YB, c: WL, simR }), h(Pipe, { x1: B.tk4 + 56, y1: YB, x2: B.terz - 29, y2: YB, c: WL, simR }), h(Pipe, { x1: B.terz + 29, y1: YB, x2: B.dis - 42, y2: YB, c: WL, simR }), h(Pipe, { x1: B.dis + 42, y1: YB, x2: B.end, y2: YB, c: WL, simR }), h('polygon', { points: `${B.end},${YB - 9} ${B.end + 20},${YB} ${B.end},${YB + 9}`, fill: WL, fillOpacity: .8 }), h('text', { x: B.end + 26, y: YB - 6, fontSize: 10, fontFamily: 'IBM Plex Mono,monospace', fill: TXT2 }, lbl({ it: 'SCARICO', en: 'DISCHARGE', es: 'VERTIDO', fr: 'REJET', de: 'ABLAUF' })), /* INSTRUMENTS B */ h(Instr, { x: B.src + 68, y: YB, tag: 'FIT', val: L.flowWaste.toFixed(0) + ' m³/h', c: WL }), h(Instr, { x: B.diss + 68, y: YB, tag: 'AIT', val: 'pH 7.6', c: WL }), h(Instr, { x: B.tk2 + 60, y: YB, tag: 'LIT', val: tlvl('TK-02') + '%', c: tlvl('TK-02') > 85 ? ST.alarm : WL }), h(Instr, { x: B.p201 + 68, y: YB, tag: 'AIT', val: 'COD 450', c: WL }), h(Instr, { x: B.tk3 + 72, y: YB, tag: 'AIT', val: 'DO ' + L.doO2.toFixed(1), c: WL }), h(Instr, { x: B.tk4 + 72, y: YB, tag: 'AIT', val: 'COD ' + L.codOut, c: WL }), h(Instr, { x: B.dis - 18, y: YB, tag: 'AIT', val: 'pH ' + L.phOut.toFixed(1), c: ST.run }), /* DOSING B */ h(DosePoint, { x: B.prim - 65, y: YB, label: 'FeCl₃', c: CH }), h(DosePoint, { x: B.dis + 20, y: YB, label: 'NaOCl', c: CH }), /* EQUIPMENT B */ h(SourceBox, { x: B.src, y: YB, c: WL, tag: 'WIN', label: lbl({ it: 'INGRESSO REFLUO', en: 'WW INLET', es: 'ENTRADA', fr: 'ENTRÉE', de: 'ZULAUF' }) }), h(BarScreen, { x: B.scr, y: YB, w: 30, sh: 74, c: WL, tag: 'SCR-2' }), /* dissabbiatore / disoleatore */ h('g', { transform: `translate(${B.diss},${YB})` }, h('rect', { x: -32, y: -40, width: 64, height: 80, rx: 3, fill: BGF, stroke: WL, strokeWidth: 2 }), h('rect', { x: -28, y: -38, width: 56, height: 16, rx: 2, fill: WL, fillOpacity: .14 }), h('line', { x1: -22, y1: -22, x2: 22, y2: -22, stroke: WL, strokeWidth: 1.2, strokeOpacity: .45, strokeDasharray: '4 3' }), h('circle', { cx: 24, cy: -32, r: 5.5, fill: ST.run }), h('text', { x: 0, y: 58, textAnchor: 'middle', fontSize: 11, fontFamily: 'IBM Plex Mono,monospace', fill: TXT2 }, 'DISS'), h('text', { x: 0, y: 71, textAnchor: 'middle', fontSize: 10, fontFamily: 'Titillium Web,sans-serif', fill: TXT3 }, lbl({ it: 'DISS/DISOLEAZ.', en: 'GRIT/DE-OIL', es: 'DESAR./DESENGR.', fr: 'DESABL./DESHU.', de: 'SANDF./ENTÖL.' }))), h(VTank, { x: B.tk2, y: YB, w: 70, th: 120, lvl: tlvl('TK-02'), c: tlvl('TK-02') > 85 ? ST.alarm : WL, tag: 'TK-02', label: lbl({ it: 'VASCA EQUALIZZAZIONE', en: 'EQUALIZATION BASIN', es: 'IGUALIZACIÓN', fr: 'BASSIN ÉGAL.', de: 'AUSGLEICHSBECKEN' }), status: tlvl('TK-02') > 85 ? 'alarm' : 'run', onClick: () => setSel({ id: 'TK-02' }) }), h(Pump, { x: B.p201, y: YB, r: 22, c: WL, status: ps('P-201'), tag: 'P-201', onClick: () => setSel({ id: 'P-201' }) }), h(Clarifier, { x: B.prim, y: YB, r: 36, c: WL, tag: 'TK-P', label: lbl({ it: 'TRATT. PRIMARIO', en: 'PRIMARY CLARIF.', es: 'PRIMARIO', fr: 'PRIM.', de: 'VORKLÄRUNG' }), status: 'run', onClick: () => setSel({ id: 'TK-P' }) }), /* biological reactor — big box */ h('g', { transform: `translate(${B.tk3},${YB})`, className: 'pid-node', onClick: () => setSel({ id: 'TK-03' }), style: { cursor: 'pointer' } }, h('rect', { x: -48, y: -60, width: 96, height: 120, rx: 4, fill: BGF, stroke: WL, strokeWidth: 2.5 }), h('rect', { x: -45, y: -60 + 120 * (1 - tlvl('TK-03') / 100), width: 90, height: 120 * tlvl('TK-03') / 100, rx: 3, fill: WL, fillOpacity: .13 }), ...[...Array(7)].map((_, i) => h('circle', { key: i, cx: -36 + i * 12, cy: 25, r: 2.8, fill: WL, fillOpacity: .55 })), h('circle', { cx: 36, cy: -52, r: 6, fill: ST.run }), h('text', { x: 0, y: -36, textAnchor: 'middle', fontSize: 11, fontFamily: 'IBM Plex Mono,monospace', fill: WL, fontWeight: 700 }, 'TK-03'), h('text', { x: 0, y: -22, textAnchor: 'middle', fontSize: 10, fontFamily: 'Titillium Web,sans-serif', fill: TXT2 }, lbl({ it: 'VASCA BIOLOGICA', en: 'BIOLOGICAL BASIN', es: 'V. BIOLÓGICA', fr: 'BASSIN BIO', de: 'BELEBUNGSBECKEN' })), h('text', { x: 0, y: 6, textAnchor: 'middle', fontSize: 18, fontFamily: 'IBM Plex Mono,monospace', fill: WL, fontWeight: 700 }, tlvl('TK-03') + '%'), h('text', { x: 0, y: 26, textAnchor: 'middle', fontSize: 10, fontFamily: 'IBM Plex Mono,monospace', fill: TXT2 }, 'DO ' + L.doO2.toFixed(1) + ' mg/L')), /* blowers under bio */ h(Pipe, { x1: B.tk3 - 26, y1: YB + 60, x2: B.tk3 - 26, y2: YB + 100, c: WL, simR }), h(Pipe, { x1: B.tk3 + 26, y1: YB + 60, x2: B.tk3 + 26, y2: YB + 100, c: WL, simR }), h(Blower, { x: B.tk3 - 26, y: YB + 118, r: 18, c: WL, status: 'run', tag: 'B-201' }), h(Blower, { x: B.tk3 + 26, y: YB + 118, r: 18, c: WL, status: 'warn', tag: 'B-202' }), h('text', { x: B.tk3, y: YB + 155, textAnchor: 'middle', fontSize: 10, fontFamily: 'Titillium Web,sans-serif', fill: TXT3 }, lbl({ it: 'SOFFIANTI', en: 'BLOWERS', es: 'SOPLANTES', fr: 'SURPRESSEURS', de: 'GEBLÄSE' })), h(Clarifier, { x: B.tk4, y: YB, r: 54, c: WL, tag: 'TK-04', label: lbl({ it: 'SEDIM. SECONDARIO', en: 'SECONDARY SETTLER', es: 'DECANT. SEC.', fr: 'DÉCANT. SEC.', de: 'NACHKLÄRBECKEN' }), status: 'run', onClick: () => setSel({ id: 'TK-04' }) }), h(FVessel, { x: B.terz, y: YB, w: 54, th: 90, c: WL, tag: 'F-401', label: lbl({ it: 'FILTRAZ. TERZIARIA', en: 'TERTIARY FILTER', es: 'FILTRO TERCIARIO', fr: 'FILTRE TERTIAIRE', de: 'TERTIÄRFILTER' }), status: 'run', onClick: () => setSel({ id: 'F-401' }) }), h(UVReactor, { x: B.dis, y: YB, w: 80, rh: 30, c: WL, tag: 'UV-402', status: 'run' }), /* ═══════════════════════════════════════════════════ SLUDGE CONNECTIONS + LINE C ══════════════════════════════════════════════════ */ /* primary drop to sludge */ h(Pipe, { x1: B.prim, y1: YB + 37, x2: B.prim, y2: YC, c: SL, simR }), /* RAS recirculation secondary → bio */ h(Pipe, { x1: B.tk4, y1: YB + 54, x2: B.tk4, y2: YB + 80, c: SL, simR }), h(Pipe, { x1: B.tk4, y1: YB + 80, x2: B.tk3 + 48, y2: YB + 80, c: SL, simR }), h(Pump, { x: (B.tk3 + B.tk4) / 2, y: YB + 80, r: 16, c: SL, status: ps('P-301'), tag: 'P-301', onClick: () => setSel({ id: 'P-301' }) }), h('text', { x: (B.tk3 + B.tk4) / 2, y: YB + 105, textAnchor: 'middle', fontSize: 10, fontFamily: 'IBM Plex Mono,monospace', fill: SL }, 'RAS'), h('polygon', { points: `${B.tk3 + 48},${YB + 73} ${B.tk3 + 48},${YB + 87} ${B.tk3 + 62},${YB + 80}`, fill: SL, fillOpacity: .75 }), /* WAS drop from secondary to sludge line */ h(Pipe, { x1: B.tk4, y1: YB + 80, x2: B.tk4, y2: YC, c: SL, simR }), /* sludge backbone */ h(Pipe, { x1: B.prim, y1: YC, x2: C.p301 - 18, y2: YC, c: SL, simR }), h(Pump, { x: C.p301, y: YC, r: 18, c: SL, status: ps('P-302'), tag: 'P-302', onClick: () => setSel({ id: 'P-302' }) }), h(Pipe, { x1: C.p301 + 18, y1: YC, x2: C.thk - 32, y2: YC, c: SL, simR }), h(Pipe, { x1: B.tk4, y1: YC, x2: C.p301 - 18, y2: YC, c: SL, simR }), /* thickener */ h(Clarifier, { x: C.thk, y: YC, r: 38, c: SL, tag: 'ISP-1', label: lbl({ it: 'ISPESSITORE', en: 'THICKENER', es: 'ESPESADOR', fr: 'ÉPAISSISS.', de: 'EINDICKER' }), status: 'run', onClick: () => setSel({ id: 'ISP-1' }) }), h(Pipe, { x1: C.thk + 38, y1: YC, x2: C.cf - 32, y2: YC, c: SL, simR }), /* poly dosing */ h(DosePoint, { x: C.cf - 60, y: YC, label: 'POLY', c: CH }), /* centrifuge */ h('g', { transform: `translate(${C.cf},${YC})`, className: 'pid-node', onClick: () => setSel({ id: 'CF-1' }), style: { cursor: 'pointer' } }, h('ellipse', { cx: 0, cy: 0, rx: 34, ry: 26, fill: BGF, stroke: SL, strokeWidth: 2 }), h('ellipse', { cx: 0, cy: 0, rx: 16, ry: 11, fill: 'none', stroke: SL, strokeWidth: 1.2, strokeOpacity: .55 }), h('line', { x1: -16, y1: 0, x2: 16, y2: 0, stroke: SL, strokeWidth: 1, strokeOpacity: .4 }), h('line', { x1: 0, y1: -11, x2: 0, y2: 11, stroke: SL, strokeWidth: 1, strokeOpacity: .4 }), h('circle', { cx: 24, cy: -19, r: 5.5, fill: ST.run }), h('text', { x: 0, y: 45, textAnchor: 'middle', fontSize: 11, fontFamily: 'IBM Plex Mono,monospace', fill: TXT2 }, 'CF-1'), h('text', { x: 0, y: 58, textAnchor: 'middle', fontSize: 10, fontFamily: 'Titillium Web,sans-serif', fill: TXT3 }, lbl({ it: 'CENTRIFUGA', en: 'CENTRIFUGE', es: 'CENTRÍFUGA', fr: 'CENTRIFUGE', de: 'ZENTRIFUGE' }))), h(Pipe, { x1: C.cf + 34, y1: YC, x2: C.cas - 35, y2: YC, c: SL, simR }), /* sludge container */ h('g', { transform: `translate(${C.cas},${YC})` }, h('rect', { x: -35, y: -32, width: 70, height: 64, rx: 3, fill: BGF, stroke: SL, strokeWidth: 2 }), h('rect', { x: -32, y: -32 + 64 * .22, width: 64, height: 64 * .78, rx: 2, fill: SL, fillOpacity: .32 }), h('circle', { cx: 26, cy: -24, r: 5.5, fill: ST.warn }), h('text', { x: 0, y: 7, textAnchor: 'middle', fontSize: 16, fontFamily: 'IBM Plex Mono,monospace', fill: SL, fontWeight: 700 }, '78%'), h('text', { x: 0, y: 52, textAnchor: 'middle', fontSize: 11, fontFamily: 'IBM Plex Mono,monospace', fill: TXT2 }, 'CASS-1'), h('text', { x: 0, y: 65, textAnchor: 'middle', fontSize: 10, fontFamily: 'Titillium Web,sans-serif', fill: TXT3 }, lbl({ it: 'CASSONE FANGHI', en: 'SLUDGE SKIP', es: 'CONTENEDOR', fr: 'BENNE BOUES', de: 'SCHLAMMCONTAINER' }))) ) /* /svg */ ), /* /pid-wrap */ /* detail drawer */ sel && h(PIDDrawer, { sel, onClose: () => setSel(null) }) ); /* /page */ } /* ── Detail drawer ──────────────────────────────────────── */ const TITLES = { it: { 'P-101': 'Pompa captazione 1', 'P-102': 'Pompa captazione 2', 'P-201': 'Pompa sollevamento refluo', 'P-301': 'Pompa ricircolo RAS', 'P-302': 'Pompa spurgo WAS', 'TK-02': 'Vasca equalizzazione', 'TK-03': 'Vasca biologica', 'TK-04': 'Sedimentatore secondario', 'TK-05': 'Serbatoio acqua trattata', 'COAG-1': 'Coagulazione / Flocculazione', 'DEC-1': 'Decantatore primario', 'F-301': 'Filtro a sabbia', 'F-302': 'Filtro a carbone attivo', 'F-401': 'Filtro terziario', 'UF-1': 'Ultrafiltrazione', 'RO-1': 'Osmosi inversa', 'TK-P': 'Chiarificatore primario', 'ISP-1': 'Ispessitore fanghi', 'CF-1': 'Centrifuga disidratazione' }, en: { 'P-101': 'Intake pump 1', 'P-102': 'Intake pump 2', 'P-201': 'WW lift pump', 'P-301': 'Sludge RAS pump', 'P-302': 'Sludge WAS pump', 'TK-02': 'Equalization basin', 'TK-03': 'Biological basin', 'TK-04': 'Secondary settler', 'TK-05': 'Clean water tank', 'COAG-1': 'Coagulation / Flocculation', 'DEC-1': 'Primary clarifier', 'F-301': 'Sand filter', 'F-302': 'Act. carbon filter', 'F-401': 'Tertiary filter', 'UF-1': 'Ultrafiltration', 'RO-1': 'Reverse osmosis', 'TK-P': 'Primary clarifier', 'ISP-1': 'Sludge thickener', 'CF-1': 'Dewatering centrifuge' }, }; function PIDDrawer({ sel, onClose }) { const { t, tl, toast } = window.useApp(); const s = window.useStore(); const pump = s.pumps.find((p) => p.id === sel.id); const tank = s.tanks.find((tk) => tk.id === sel.id); const lang = s.lang === 'en' ? 'en' : 'it'; const title = (TITLES[lang] || TITLES.it)[sel.id] || sel.id; const status = pump ? pump.state : tank && tank.lvl > 85 ? 'warn' : 'run'; const icon = pump ? 'pump' : tank ? 'tank' : sel.id.startsWith('F-') ? 'filter' : sel.id.startsWith('UF') || sel.id.startsWith('RO') ? 'grid' : sel.id.startsWith('CF') ? 'fan' : 'beaker'; return h(window.Drawer, { title, sub: sel.id, icon, status, onClose, footer: [ pump && h(window.Btn, { key: 'st', variant: 'run', icon: 'play', sm: true, onClick: () => { window.STORE.setPumpState(sel.id, 'run'); toast('run', t('toast.pumpstart'), sel.id); } }, t('a.start')), pump && h(window.Btn, { key: 'sp', variant: 'alarm', icon: 'pause', sm: true, onClick: () => { window.STORE.setPumpState(sel.id, 'idle'); toast('warn', t('toast.pumpstop'), sel.id); } }, t('a.stop')), h(window.Btn, { key: 'rs', variant: 'ghost', icon: 'reset', sm: true, onClick: () => toast('info', t('a.reset'), sel.id) }, t('a.reset')), ].filter(Boolean) }, h(window.DList, { items: [ [t('c.status'), h(window.Badge, { status })], pump && [t('c.mode'), h(window.Badge, { status: pump.mode, label: t('st.' + pump.mode) })], pump && [t('c.runhours'), pump.hours.toLocaleString() + ' h'], pump && [t('c.current_a'), pump.amp.toFixed(1) + ' A'], pump && [t('c.flow'), pump.flow + ' m³/h'], tank && [t('c.level'), tank.lvl + '%'], tank && [t('c.volume'), Math.round((tank.lvl / 100) * tank.cap).toLocaleString() + ' m³'], tank && [t('c.capacity'), tank.cap.toLocaleString() + ' m³'], [t('c.lastmaint'), '15/05/26'], [t('c.nextmaint'), sel.id === 'RO-1' ? '20/06/26' : '15/08/26'], ].filter(Boolean) }), sel.id === 'RO-1' && h('div', { className: 'detail-section' }, h('h4', null, t('k.activealarms')), h(window.Badge, { status: 'warn', label: 'PAH-106 · Pressione elevata', pulse: true })), tank && tank.id === 'TK-02' && tank.lvl > 85 && h('div', { className: 'detail-section' }, h('h4', null, t('k.activealarms')), h(window.Badge, { status: 'alarm', label: 'LSH-302 · Alto livello', pulse: true }))); } window.Sections = window.Sections || {}; window.Sections.Synoptic = Synoptic; })();