477 lines
16 KiB
TypeScript
477 lines
16 KiB
TypeScript
import { useEffect, useMemo, useState, type CSSProperties } from 'react';
|
||
import { useQuery } from '@tanstack/react-query';
|
||
import { Activity, AlertTriangle, CircuitBoard, DatabaseZap, PlugZap, RefreshCw } from 'lucide-react';
|
||
import type {
|
||
CurrentEvent,
|
||
CurrentItem,
|
||
CurrentResponse,
|
||
} from '../api/cloud';
|
||
import { getCurrent, getCurrentEventsUrl } from '../api/cloud';
|
||
import {
|
||
getPublishedDiagramPage,
|
||
listDiagramPages,
|
||
type DiagramDocument,
|
||
type DiagramEdge,
|
||
type DiagramNode,
|
||
type DiagramPageSummary,
|
||
type DiagramPoint,
|
||
} from '../api/diagram';
|
||
import { formatDateTime, formatNumber } from '../utils/format';
|
||
|
||
type ElectricalSchematicsPageProps = {
|
||
edgeId: string;
|
||
};
|
||
|
||
type LiveValue = CurrentItem & {
|
||
sourceKey: string;
|
||
};
|
||
|
||
type BindingTag = {
|
||
tagId: string;
|
||
edgeId: string;
|
||
sourceKey: string;
|
||
sseUrl?: string;
|
||
};
|
||
|
||
type LiveGroup = {
|
||
sourceKey: string;
|
||
edgeId: string;
|
||
sseUrl?: string;
|
||
tags: string[];
|
||
};
|
||
|
||
const DEFAULT_PAGE_PREFIXES = ['ELECTRICAL', 'MAIN', 'DIRECT'];
|
||
|
||
/** Выбирает опубликованную страницу, отдавая приоритет электросхеме текущей установки. */
|
||
function pickDefaultPage(pages: DiagramPageSummary[], edgeId: string): DiagramPageSummary | undefined {
|
||
const published = pages.filter((page) => page.publishedRevision);
|
||
const byPriority = [...published].sort((a, b) => {
|
||
const aRank = getPageRank(a.pageKey, edgeId);
|
||
const bRank = getPageRank(b.pageKey, edgeId);
|
||
return aRank - bRank || a.pageKey.localeCompare(b.pageKey);
|
||
});
|
||
|
||
return byPriority[0];
|
||
}
|
||
|
||
/** Чем меньше ранг, тем выше страница в списке выбора опубликованных схем. */
|
||
function getPageRank(pageKey: string, edgeId: string): number {
|
||
const exactKeys = DEFAULT_PAGE_PREFIXES.map((prefix) => (prefix === 'DIRECT' ? edgeId : `${prefix}_${edgeId}`));
|
||
const exactIndex = exactKeys.indexOf(pageKey);
|
||
if (exactIndex >= 0) {
|
||
return exactIndex;
|
||
}
|
||
|
||
return pageKey.includes(edgeId) ? 10 : 20;
|
||
}
|
||
|
||
/** Собирает теги, которые надо читать по SSE, из виджетов и bindings у элементов схемы. */
|
||
function collectBindingTags(document: DiagramDocument): BindingTag[] {
|
||
const tags: BindingTag[] = [];
|
||
|
||
for (const node of document.nodes) {
|
||
if (node.kind === 'tagWidget') {
|
||
tags.push({
|
||
tagId: node.tagId,
|
||
edgeId: node.edgeId || document.ownerEdgeId,
|
||
sourceKey: `edge:${node.edgeId || document.ownerEdgeId}`,
|
||
});
|
||
continue;
|
||
}
|
||
|
||
const bindings = node.bindings;
|
||
if (!bindings) {
|
||
continue;
|
||
}
|
||
|
||
const edgeId = bindings.sseEdgeId || bindings.edgeId || document.ownerEdgeId;
|
||
const sourceKey = bindings.sseUrl || `edge:${edgeId}`;
|
||
|
||
[bindings.stateTagId, bindings.alarmTagId].filter(Boolean).forEach((tagId) => {
|
||
tags.push({
|
||
tagId: tagId!,
|
||
edgeId,
|
||
sourceKey,
|
||
sseUrl: bindings.sseUrl,
|
||
});
|
||
});
|
||
}
|
||
|
||
const unique = new Map<string, BindingTag>();
|
||
tags.forEach((tag) => unique.set(`${tag.sourceKey}:${tag.edgeId}:${tag.tagId}`, tag));
|
||
return Array.from(unique.values());
|
||
}
|
||
|
||
/** Группирует подписки так, чтобы один EventSource читал сразу несколько тегов одного edge/source. */
|
||
function createLiveGroups(tags: BindingTag[]): LiveGroup[] {
|
||
const groups = new Map<string, LiveGroup>();
|
||
|
||
tags.forEach((tag) => {
|
||
const group = groups.get(tag.sourceKey) ?? {
|
||
sourceKey: tag.sourceKey,
|
||
edgeId: tag.edgeId,
|
||
sseUrl: tag.sseUrl,
|
||
tags: [],
|
||
};
|
||
|
||
if (!group.tags.includes(tag.tagId)) {
|
||
group.tags.push(tag.tagId);
|
||
}
|
||
|
||
groups.set(tag.sourceKey, group);
|
||
});
|
||
|
||
return Array.from(groups.values());
|
||
}
|
||
|
||
/** Добавляет tags-параметр к пользовательскому SSE URL, если он еще не задан в настройке. */
|
||
function buildCustomSseUrl(sseUrl: string, tags: string[]): string {
|
||
const url = new URL(sseUrl, window.location.origin);
|
||
if (tags.length && !url.searchParams.has('tags')) {
|
||
url.searchParams.set('tags', tags.join(','));
|
||
}
|
||
|
||
return url.toString();
|
||
}
|
||
|
||
/** Возвращает live-значение с учетом edge, но оставляет fallback по tag для старых схем. */
|
||
function getLiveValue(values: Map<string, LiveValue>, edgeId: string, tagId?: string): LiveValue | undefined {
|
||
if (!tagId) {
|
||
return undefined;
|
||
}
|
||
|
||
return values.get(`${edgeId}:${tagId}`) ?? values.get(`tag:${tagId}`);
|
||
}
|
||
|
||
/** Рассчитывает размеры полотна по опубликованным координатам элементов. */
|
||
function getCanvasBounds(document?: DiagramDocument) {
|
||
const nodes = document?.nodes ?? [];
|
||
const maxX = Math.max(...nodes.map((node) => node.position.x + getNodeSize(node).width), 960);
|
||
const maxY = Math.max(...nodes.map((node) => node.position.y + getNodeSize(node).height), 560);
|
||
|
||
return {
|
||
width: Math.ceil(maxX + 80),
|
||
height: Math.ceil(maxY + 80),
|
||
};
|
||
}
|
||
|
||
function getNodeSize(node: DiagramNode) {
|
||
if (node.kind === 'decoration') {
|
||
return node.size;
|
||
}
|
||
|
||
return node.size ?? { width: 190, height: 82 };
|
||
}
|
||
|
||
function getNodeTitle(node: DiagramNode, value?: LiveValue) {
|
||
if (node.kind === 'tagWidget') {
|
||
return node.label || value?.name || node.tagId;
|
||
}
|
||
|
||
return String(node.data?.title || node.data?.text || node.decorationType);
|
||
}
|
||
|
||
function getNodeCenter(node: DiagramNode): DiagramPoint {
|
||
const size = getNodeSize(node);
|
||
return {
|
||
x: node.position.x + size.width / 2,
|
||
y: node.position.y + size.height / 2,
|
||
};
|
||
}
|
||
|
||
function getEdgePoints(edge: DiagramEdge, nodeMap: Map<string, DiagramNode>): DiagramPoint[] {
|
||
const source = nodeMap.get(edge.sourceNodeId);
|
||
const target = nodeMap.get(edge.targetNodeId);
|
||
if (!source || !target) {
|
||
return [];
|
||
}
|
||
|
||
return [getNodeCenter(source), ...(edge.waypoints ?? []), getNodeCenter(target)];
|
||
}
|
||
|
||
function pointsToPolyline(points: DiagramPoint[]) {
|
||
return points.map((point) => `${point.x},${point.y}`).join(' ');
|
||
}
|
||
|
||
/** Отображает опубликованную электросхему и подставляет live-значения через SSE cloud-v3. */
|
||
export function ElectricalSchematicsPage({ edgeId }: ElectricalSchematicsPageProps) {
|
||
const [selectedPageKey, setSelectedPageKey] = useState('');
|
||
const [liveValues, setLiveValues] = useState(() => new Map<string, LiveValue>());
|
||
const [connectedSources, setConnectedSources] = useState<Set<string>>(new Set());
|
||
|
||
const pages = useQuery({
|
||
queryKey: ['diagram-pages', edgeId],
|
||
queryFn: () => listDiagramPages(edgeId),
|
||
enabled: Boolean(edgeId),
|
||
});
|
||
|
||
const publishedPages = useMemo(() => pages.data?.filter((page) => page.publishedRevision) ?? [], [pages.data]);
|
||
const selectedPage = useMemo(
|
||
() => publishedPages.find((page) => page.pageKey === selectedPageKey) ?? pickDefaultPage(publishedPages, edgeId),
|
||
[edgeId, publishedPages, selectedPageKey],
|
||
);
|
||
|
||
useEffect(() => {
|
||
if (selectedPage && selectedPage.pageKey !== selectedPageKey) {
|
||
setSelectedPageKey(selectedPage.pageKey);
|
||
}
|
||
}, [selectedPage, selectedPageKey]);
|
||
|
||
const page = useQuery({
|
||
queryKey: ['published-diagram-page', selectedPage?.pageKey],
|
||
queryFn: () => getPublishedDiagramPage(selectedPage!.pageKey),
|
||
enabled: Boolean(selectedPage?.pageKey),
|
||
});
|
||
|
||
const document = page.data?.document;
|
||
const bindingTags = useMemo(() => (document ? collectBindingTags(document) : []), [document]);
|
||
const liveGroups = useMemo(() => createLiveGroups(bindingTags), [bindingTags]);
|
||
const nodeMap = useMemo(() => new Map((document?.nodes ?? []).map((node) => [node.id, node])), [document?.nodes]);
|
||
const canvasBounds = useMemo(() => getCanvasBounds(document), [document]);
|
||
|
||
useEffect(() => {
|
||
setLiveValues(new Map());
|
||
setConnectedSources(new Set());
|
||
}, [selectedPage?.pageKey]);
|
||
|
||
useEffect(() => {
|
||
if (!liveGroups.length) {
|
||
return undefined;
|
||
}
|
||
|
||
let closed = false;
|
||
const eventSources: EventSource[] = [];
|
||
|
||
const mergeResponse = (response: CurrentResponse, sourceKey: string) => {
|
||
if (closed) {
|
||
return;
|
||
}
|
||
|
||
setLiveValues((previous) => {
|
||
const next = new Map(previous);
|
||
response.items.forEach((item) => {
|
||
const value = { ...item, sourceKey };
|
||
next.set(`${item.edge}:${item.tag}`, value);
|
||
next.set(`tag:${item.tag}`, value);
|
||
});
|
||
return next;
|
||
});
|
||
};
|
||
|
||
liveGroups.forEach((group) => {
|
||
if (!group.sseUrl) {
|
||
void getCurrent(group.edgeId, group.tags).then((response) => mergeResponse(response, group.sourceKey));
|
||
}
|
||
|
||
const url = group.sseUrl ? buildCustomSseUrl(group.sseUrl, group.tags) : getCurrentEventsUrl(group.edgeId, group.tags);
|
||
const eventSource = new EventSource(url);
|
||
|
||
eventSource.onopen = () => {
|
||
setConnectedSources((previous) => new Set(previous).add(group.sourceKey));
|
||
};
|
||
|
||
eventSource.onerror = () => {
|
||
setConnectedSources((previous) => {
|
||
const next = new Set(previous);
|
||
next.delete(group.sourceKey);
|
||
return next;
|
||
});
|
||
};
|
||
|
||
eventSource.onmessage = (message) => {
|
||
const event = JSON.parse(message.data) as CurrentEvent;
|
||
mergeResponse(event, group.sourceKey);
|
||
};
|
||
|
||
eventSources.push(eventSource);
|
||
});
|
||
|
||
return () => {
|
||
closed = true;
|
||
eventSources.forEach((eventSource) => eventSource.close());
|
||
};
|
||
}, [liveGroups]);
|
||
|
||
const liveTagCount = liveValues.size ? Array.from(liveValues.keys()).filter((key) => key.startsWith('tag:')).length : 0;
|
||
const connected = connectedSources.size > 0;
|
||
|
||
return (
|
||
<section className="electrical-section">
|
||
<div className="section-header">
|
||
<div>
|
||
<span className="page-kicker">
|
||
<CircuitBoard size={14} />
|
||
Электросхемы
|
||
</span>
|
||
<h2>{page.data?.title || document?.title || selectedPage?.pageKey || edgeId}</h2>
|
||
</div>
|
||
<div className="electrical-toolbar">
|
||
{publishedPages.length > 1 ? (
|
||
<label>
|
||
Схема
|
||
<select value={selectedPageKey} onChange={(event) => setSelectedPageKey(event.target.value)}>
|
||
{publishedPages.map((item) => (
|
||
<option key={item.pageKey} value={item.pageKey}>
|
||
{item.title || item.pageKey}
|
||
</option>
|
||
))}
|
||
</select>
|
||
</label>
|
||
) : null}
|
||
<div className={`source-chip electrical-live-chip ${connected ? 'electrical-live-chip--sse' : ''}`}>
|
||
<DatabaseZap size={16} />
|
||
{connected ? `SSE · ${connectedSources.size}` : liveGroups.length ? 'подключение SSE' : 'нет привязок'}
|
||
</div>
|
||
<button type="button" className="icon-button" onClick={() => void page.refetch()} title="Обновить схему">
|
||
<RefreshCw size={18} />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{pages.isError ? (
|
||
<div className="empty-panel">Не удалось загрузить список опубликованных схем: {String(pages.error)}</div>
|
||
) : null}
|
||
|
||
{!pages.isPending && !publishedPages.length && !pages.isError ? (
|
||
<div className="empty-panel">Для {edgeId} пока нет опубликованных схем</div>
|
||
) : null}
|
||
|
||
{page.isError ? (
|
||
<div className="empty-panel">Не удалось загрузить опубликованную схему: {String(page.error)}</div>
|
||
) : null}
|
||
|
||
{document ? (
|
||
<div className="electrical-layout">
|
||
<div className="electrical-canvas-shell">
|
||
<div
|
||
className="electrical-canvas"
|
||
style={{ width: canvasBounds.width, height: canvasBounds.height }}
|
||
>
|
||
{document.background?.url ? (
|
||
<img
|
||
className={`electrical-background electrical-background--${document.background.fit ?? 'contain'}`}
|
||
src={document.background.url}
|
||
alt=""
|
||
style={{ opacity: document.background.opacity ?? 0.22 }}
|
||
/>
|
||
) : null}
|
||
|
||
<svg className="electrical-wires" width={canvasBounds.width} height={canvasBounds.height}>
|
||
{(document.edges ?? []).map((edge) => {
|
||
const points = getEdgePoints(edge, nodeMap);
|
||
if (points.length < 2) {
|
||
return null;
|
||
}
|
||
|
||
return (
|
||
<polyline
|
||
key={edge.id}
|
||
className={`electrical-wire electrical-wire--${edge.kind} ${edge.animated ? 'electrical-wire--animated' : ''}`}
|
||
points={pointsToPolyline(points)}
|
||
/>
|
||
);
|
||
})}
|
||
</svg>
|
||
|
||
{document.nodes.map((node) => (
|
||
<ElectricalNode
|
||
key={node.id}
|
||
node={node}
|
||
ownerEdgeId={document.ownerEdgeId}
|
||
liveValues={liveValues}
|
||
/>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
<aside className="electrical-side-panel">
|
||
<div>
|
||
<span>Опубликовано</span>
|
||
<strong>{page.data?.publishedAt ? formatDateTime(page.data.publishedAt) : '-'}</strong>
|
||
</div>
|
||
<div>
|
||
<span>Элементы</span>
|
||
<strong>{document.nodes.length}</strong>
|
||
</div>
|
||
<div>
|
||
<span>Провода</span>
|
||
<strong>{document.edges.length}</strong>
|
||
</div>
|
||
<div>
|
||
<span>Live-теги</span>
|
||
<strong>{liveTagCount}</strong>
|
||
</div>
|
||
</aside>
|
||
</div>
|
||
) : page.isPending || pages.isPending ? (
|
||
<div className="empty-panel">Загрузка опубликованной схемы...</div>
|
||
) : null}
|
||
</section>
|
||
);
|
||
}
|
||
|
||
function ElectricalNode({
|
||
node,
|
||
ownerEdgeId,
|
||
liveValues,
|
||
}: {
|
||
node: DiagramNode;
|
||
ownerEdgeId: string;
|
||
liveValues: Map<string, LiveValue>;
|
||
}) {
|
||
const size = getNodeSize(node);
|
||
const bindings = node.kind === 'decoration' ? node.bindings : undefined;
|
||
const bindingEdgeId = bindings?.sseEdgeId || bindings?.edgeId || ownerEdgeId;
|
||
const mainValue =
|
||
node.kind === 'tagWidget'
|
||
? getLiveValue(liveValues, node.edgeId || ownerEdgeId, node.tagId)
|
||
: getLiveValue(liveValues, bindingEdgeId, bindings?.stateTagId);
|
||
const alarmValue = node.kind === 'decoration' ? getLiveValue(liveValues, bindingEdgeId, bindings?.alarmTagId) : undefined;
|
||
const alarmActive = Boolean(alarmValue && Number(alarmValue.value) !== 0);
|
||
const stateActive = Boolean(mainValue && Number(mainValue.value) !== 0);
|
||
const title = getNodeTitle(node, mainValue);
|
||
const style: CSSProperties = {
|
||
left: node.position.x,
|
||
top: node.position.y,
|
||
width: size.width,
|
||
height: size.height,
|
||
zIndex: node.zIndex ?? 1,
|
||
transform: node.kind === 'decoration' && node.rotation ? `rotate(${node.rotation}deg)` : undefined,
|
||
};
|
||
|
||
return (
|
||
<article
|
||
className={[
|
||
'electrical-node',
|
||
`electrical-node--${node.kind}`,
|
||
node.kind === 'decoration' ? `electrical-node--${node.decorationType}` : `electrical-node--${node.widgetType}`,
|
||
stateActive ? 'electrical-node--active' : '',
|
||
alarmActive ? 'electrical-node--alarm' : '',
|
||
].join(' ')}
|
||
style={style}
|
||
title={title}
|
||
>
|
||
<div className="electrical-node__header">
|
||
{alarmActive ? <AlertTriangle size={15} /> : node.kind === 'tagWidget' ? <Activity size={15} /> : <PlugZap size={15} />}
|
||
<span>{title}</span>
|
||
</div>
|
||
|
||
{mainValue ? (
|
||
<strong className="electrical-node__value">
|
||
{formatNumber(mainValue.value)}
|
||
{mainValue.unitOfMeasurement ? <small>{mainValue.unitOfMeasurement}</small> : null}
|
||
</strong>
|
||
) : node.kind === 'decoration' ? (
|
||
<span className="electrical-node__text">{String(node.data?.text || node.data?.title || node.decorationType)}</span>
|
||
) : (
|
||
<strong className="electrical-node__value">-</strong>
|
||
)}
|
||
|
||
<div className="electrical-node__footer">
|
||
{node.kind === 'tagWidget' ? <span>{node.tagId}</span> : bindings?.stateTagId ? <span>{bindings.stateTagId}</span> : <span>{node.decorationType}</span>}
|
||
{alarmValue ? <span className="electrical-node__alarm">alarm {formatNumber(alarmValue.value)}</span> : null}
|
||
</div>
|
||
</article>
|
||
);
|
||
}
|