APervov/ui
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

change after review

Browse Source
This commit is contained in:
Первов Артем
2026-06-19 08:22:14 +03:00
parent 6b6e0abe40
commit 26ef325ac1
15 changed files with 1265 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files

140
src/pages/EdgeDetailPage.tsx
View File

@@ -16,15 +16,8 @@ import {
Wrench,
} from 'lucide-react';
import { useNavigate, useParams } from 'react-router-dom';
import {
CurrentEvent,
CurrentItem,
CurrentResponse,
getCurrent,
getCurrentEventsUrl,
getHistory,
getTagTranslations,
} from '../api/cloud';
import type { CurrentEvent, CurrentItem, CurrentResponse, HistoryResponse } from '../api/cloud';
import { getCurrent, getCurrentEventsUrl, getHistory } from '../api/cloud';
import { useAuth } from '../auth/authContext';
import { HistoryChart } from '../components/HistoryChart';
import { MetricCard } from '../components/MetricCard';
@@ -49,8 +42,13 @@ type EdgeDetailPageProps = {
view: DetailView;
};
type DateRangeState = {
from: string;
to: string;
};
/** Создает диапазон истории от текущего времени на заданное количество часов назад. */
function createRange(hours: number) {
function createRange(hours: number): DateRangeState {
const to = new Date();
const from = new Date(to.getTime() - hours * 60 * 60 * 1000);
return {
@@ -59,7 +57,12 @@ function createRange(hours: number) {
};
}
/** Собирает общий layout edge-раздела: меню, live-данные, архив, показатели и iframe оборудования. */
/** Возвращает русское имя тега из tag.name, если оно пришло из cloud-v3. */
function getItemLabel(item: CurrentItem): string {
return item.name?.trim() || item.tag;
}
/** Собирает общий layout edge-раздела: меню, текущие данные, архив, показатели и iframe оборудования. */
export function EdgeDetailPage({ view }: EdgeDetailPageProps) {
const navigate = useNavigate();
const queryClient = useQueryClient();
@@ -70,7 +73,6 @@ export function EdgeDetailPage({ view }: EdgeDetailPageProps) {
const [search, setSearch] = useState('');
const [range, setRange] = useState(() => createRange(24));
const [selectedTags, setSelectedTags] = useState<string[]>([]);
const [valueMode, setValueMode] = useState<'avg' | 'last' | 'min' | 'max'>('avg');
const edgePath = `/edges/${encodeURIComponent(edgeId)}`;
@@ -81,13 +83,6 @@ export function EdgeDetailPage({ view }: EdgeDetailPageProps) {
refetchInterval: currentEventsConnected ? false : 1_000,
});
const tagTranslations = useQuery({
queryKey: ['tag-translations', edgeId, 'ru'],
queryFn: () => getTagTranslations({ edge: edgeId, locale: 'ru' }),
enabled: Boolean(edgeId),
staleTime: 10 * 60 * 1000,
});
useEffect(() => {
if (!edgeId || typeof EventSource === 'undefined') {
setCurrentEventsConnected(false);
@@ -100,16 +95,7 @@ export function EdgeDetailPage({ view }: EdgeDetailPageProps) {
eventSource.onerror = () => setCurrentEventsConnected(false);
eventSource.onmessage = (message) => {
const event = JSON.parse(message.data) as CurrentEvent;
queryClient.setQueryData<CurrentResponse>(['current', edgeId], (previous) => {
const byTag = new Map((previous?.items ?? []).map((item) => [item.tag, item]));
event.items.forEach((item) => byTag.set(item.tag, item));
return {
edge: event.edge,
items: Array.from(byTag.values()).sort((left, right) => left.tag.localeCompare(right.tag)),
};
});
queryClient.setQueryData<CurrentResponse>(['current', edgeId], event);
};
return () => {
@@ -119,8 +105,8 @@ export function EdgeDetailPage({ view }: EdgeDetailPageProps) {
}, [edgeId, queryClient]);
const tagLabels = useMemo(() => {
return Object.fromEntries((tagTranslations.data?.items ?? []).map((item) => [item.tag, item.displayName]));
}, [tagTranslations.data?.items]);
return Object.fromEntries((current.data?.items ?? []).map((item) => [item.tag, getItemLabel(item)]));
}, [current.data?.items]);
const getTagLabel = (tag: string) => tagLabels[tag] ?? tag;
@@ -129,9 +115,21 @@ export function EdgeDetailPage({ view }: EdgeDetailPageProps) {
const items = current.data?.items ?? [];
return query
? items.filter((item) => `${item.tag} ${tagLabels[item.tag] ?? ''}`.toLowerCase().includes(query))
? items.filter((item) =>
[
item.tag,
item.name,
item.comment,
item.tagGroup,
item.unitOfMeasurement,
]
.filter(Boolean)
.join(' ')
.toLowerCase()
.includes(query),
)
: items;
}, [current.data?.items, search, tagLabels]);
}, [current.data?.items, search]);
const latestUpdatedAt = useMemo(() => {
const latest = (current.data?.items ?? []).reduce<number | null>((max, item) => {
@@ -142,13 +140,14 @@ export function EdgeDetailPage({ view }: EdgeDetailPageProps) {
return latest === null ? undefined : new Date(latest);
}, [current.data?.items]);
const liveCount = current.data?.items.filter((item) => {
const ageSeconds = (Date.now() - new Date(item.time).getTime()) / 1000;
return ageSeconds <= 30;
}).length ?? 0;
const liveCount =
current.data?.items.filter((item) => {
const ageSeconds = (Date.now() - new Date(item.time).getTime()) / 1000;
return ageSeconds <= 30;
}).length ?? 0;
const history = useQuery({
queryKey: ['history', edgeId, selectedTags, range.from, range.to, valueMode],
queryKey: ['history', edgeId, selectedTags, range.from, range.to],
queryFn: () =>
getHistory({
edge: edgeId,
@@ -156,7 +155,6 @@ export function EdgeDetailPage({ view }: EdgeDetailPageProps) {
from: toIsoFromInput(range.from),
to: toIsoFromInput(range.to),
targetPoints: 1600,
valueMode,
}),
enabled: Boolean(edgeId && selectedTags.length),
refetchInterval: 5_000,
@@ -238,6 +236,15 @@ export function EdgeDetailPage({ view }: EdgeDetailPageProps) {
<Wrench size={18} />
<span className="nav-label">Оборудование</span>
</button>
{/* Электросхемы временно скрыты до готовности опубликованных схем и diagram-service. */}
{/* <button
className={`nav-item nav-item--button ${view === 'electrical' ? 'nav-item--active' : ''}`}
type="button"
onClick={() => navigate(`${edgePath}/electrical`)}
>
<CircuitBoard size={18} />
<span className="nav-label">Электросхемы</span>
</button> */}
</nav>
</aside>
@@ -246,6 +253,9 @@ export function EdgeDetailPage({ view }: EdgeDetailPageProps) {
<div>
<span className="page-kicker">Операторская панель</span>
<h1>Буровая установка {edgeId}</h1>
<span className={`current-transport current-transport--${currentEventsConnected ? 'sse' : 'polling'}`}>
{currentEventsConnected ? 'SSE live' : 'polling'}
</span>
</div>
<div className="topbar-actions">
<button type="button" className="ghost-button" onClick={() => navigate('/edges')}>
@@ -258,7 +268,7 @@ export function EdgeDetailPage({ view }: EdgeDetailPageProps) {
{auth.enabled ? (
<button type="button" className="ghost-button" onClick={() => void auth.logout()}>
<LogOut size={17} />
Разлогиниться
Выйти
</button>
) : null}
</div>
@@ -285,12 +295,9 @@ export function EdgeDetailPage({ view }: EdgeDetailPageProps) {
history={history.data}
historyLoading={history.isPending && selectedTags.length > 0}
historySource={history.data?.source}
resolutionSeconds={history.data?.resolutionSeconds}
range={range}
valueMode={valueMode}
onSearchChange={setSearch}
onRangeChange={setRange}
onValueModeChange={setValueMode}
onToggleTag={toggleTag}
onSelectFirstTags={selectFirstTags}
onSelectVisibleTags={selectVisibleTags}
@@ -315,6 +322,9 @@ export function EdgeDetailPage({ view }: EdgeDetailPageProps) {
) : null}
{view === 'equipment' ? <EquipmentView /> : null}
{/* Электросхемы временно скрыты до готовности опубликованных схем и diagram-service. */}
{/* {view === 'electrical' ? <ElectricalSchematicsPage edgeId={edgeId} /> : null} */}
</section>
</main>
);
@@ -357,7 +367,7 @@ function OverviewView({
</div>
<div className="summary-card">
<span>Последнее обновление</span>
<strong>{latestUpdatedAt ? formatDateTime(latestUpdatedAt) : '—'}</strong>
<strong>{latestUpdatedAt ? formatDateTime(latestUpdatedAt) : '-'}</strong>
</div>
</div>
@@ -379,6 +389,11 @@ function OverviewView({
<Wrench size={18} />
Состояние оборудования
</button>
{/* Электросхемы временно скрыты до готовности опубликованных схем и diagram-service. */}
{/* <button type="button" onClick={onOpenElectrical}>
<CircuitBoard size={18} />
Электросхемы
</button> */}
<button type="button">
<CalendarClock size={18} />
Техническое обслуживание
@@ -389,7 +404,7 @@ function OverviewView({
);
}
/** Управляет выбором тегов, диапазона и режима агрегации для исторического графика. */
/** Управляет выбором тегов и диапазона для исторического графика cloud-v3. */
function ArchiveView({
items,
search,
@@ -397,12 +412,9 @@ function ArchiveView({
history,
historyLoading,
historySource,
resolutionSeconds,
range,
valueMode,
onSearchChange,
onRangeChange,
onValueModeChange,
onToggleTag,
onSelectFirstTags,
onSelectVisibleTags,
@@ -411,18 +423,15 @@ function ArchiveView({
getTagLabel,
tagLabels,
}: {
items: Array<{ tag: string; value: number; time: string }>;
items: CurrentItem[];
search: string;
selectedTags: string[];
history: Parameters<typeof HistoryChart>[0]['data'];
history?: HistoryResponse;
historyLoading: boolean;
historySource?: string;
resolutionSeconds?: number | null;
range: { from: string; to: string };
valueMode: 'avg' | 'last' | 'min' | 'max';
range: DateRangeState;
onSearchChange: (value: string) => void;
onRangeChange: (value: { from: string; to: string }) => void;
onValueModeChange: (value: 'avg' | 'last' | 'min' | 'max') => void;
onRangeChange: (value: DateRangeState) => void;
onToggleTag: (tag: string) => void;
onSelectFirstTags: () => void;
onSelectVisibleTags: () => void;
@@ -447,8 +456,7 @@ function ArchiveView({
</div>
<div className="source-chip">
<DatabaseZap size={16} />
{historySource ?? 'source'}
{resolutionSeconds ? ` · ${resolutionSeconds}s` : ''}
cloud-v3 · {historySource ?? 'ожидание'}
</div>
</div>
@@ -497,6 +505,7 @@ function ArchiveView({
<div className="tag-select-list">
{items.map((item) => {
const selected = selectedTags.includes(item.tag);
const label = getTagLabel(item.tag);
return (
<button
key={item.tag}
@@ -506,10 +515,10 @@ function ArchiveView({
onClick={() => onToggleTag(item.tag)}
>
<span className="tag-select-item__name">
<span>{getTagLabel(item.tag)}</span>
{getTagLabel(item.tag) !== item.tag ? <small>{item.tag}</small> : null}
<span>{label}</span>
{label !== item.tag ? <small>{item.tag}</small> : null}
</span>
<strong>{item.value.toLocaleString('ru-RU', { maximumFractionDigits: 3 })}</strong>
<strong>{item.value.toLocaleString('ru-RU', { maximumFractionDigits: item.precision ?? 3 })}</strong>
</button>
);
})}
@@ -543,15 +552,6 @@ function ArchiveView({
onChange={(event) => onRangeChange({ ...range, to: event.target.value })}
/>
</label>
<label>
Режим
<select value={valueMode} onChange={(event) => onValueModeChange(event.target.value as typeof valueMode)}>
<option value="avg">avg</option>
<option value="last">last</option>
<option value="min">min</option>
<option value="max">max</option>
</select>
</label>
</div>
{selectedTags.length ? (
@@ -570,7 +570,7 @@ function ArchiveView({
);
}
/** Встраивает страницу активного оборудования из TOиР light почти на всю рабочую область. */
/** Встраивает страницу активного оборудования из ТОиР light почти на всю рабочую область. */
function EquipmentView() {
const [iframeLoaded, setIframeLoaded] = useState(false);

52
src/pages/EdgesDashboard.tsx
View File

@@ -33,7 +33,7 @@ function getEdgeTitle(edge: EdgeItem): string {
return edge.id;
}
/** Отображает стартовый dashboard со списком edge-установок и общей статистикой. */
/** Отображает стартовый dashboard со списком edge-установок и общей статистикой cloud-v3. */
export function EdgesDashboard({ onOpenEdge, onOpenEquipment }: EdgesDashboardProps) {
const [search, setSearch] = useState('');
const auth = useAuth();
@@ -54,19 +54,26 @@ export function EdgesDashboard({ onOpenEdge, onOpenEquipment }: EdgesDashboardPr
return items.filter((edge) => `${edge.id} ${edge.name}`.toLowerCase().includes(query));
}, [edges.data?.items, search]);
const stats = {
total: edges.data?.items.length ?? 0,
normal: 0,
emergency: 0,
equipmentProblem: 0,
maintenanceRequired: 0,
};
const stats = useMemo(() => {
const items = edges.data?.items ?? [];
const normal = items.filter((edge) => getEdgeState(edge) === 'ok').length;
const stale = items.filter((edge) => getEdgeState(edge) === 'warn').length;
const empty = items.filter((edge) => getEdgeState(edge) === 'empty').length;
return {
total: items.length,
normal,
stale,
empty,
liveTags: items.reduce((sum, edge) => sum + edge.liveTagCount, 0),
};
}, [edges.data?.items]);
return (
<main className="dashboard-shell">
<header className="dashboard-header">
<div>
<span className="page-kicker">Drill Cloud</span>
<span className="page-kicker">Drill Cloud v3</span>
<h1>Буровые установки</h1>
</div>
<div className="dashboard-actions">
@@ -80,7 +87,7 @@ export function EdgesDashboard({ onOpenEdge, onOpenEquipment }: EdgesDashboardPr
{auth.enabled ? (
<button type="button" className="ghost-button" onClick={() => void auth.logout()}>
<LogOut size={17} />
Разлогиниться
Выйти
</button>
) : null}
</div>
@@ -89,9 +96,9 @@ export function EdgesDashboard({ onOpenEdge, onOpenEquipment }: EdgesDashboardPr
<section className="dashboard-stats" aria-label="Статистика буровых">
<StatBlock label="Всего установок" value={stats.total} tone="neutral" />
<StatBlock label="В норме" value={stats.normal} tone="success" />
<StatBlock label="Авария" value={stats.emergency} tone="danger" />
<StatBlock label="Проблема оборудования" value={stats.equipmentProblem} tone="warning" />
<StatBlock label="Требуется ТО" value={stats.maintenanceRequired} tone="accent" />
<StatBlock label="Нет live" value={stats.stale} tone="warning" />
<StatBlock label="Нет данных" value={stats.empty} tone="danger" />
<StatBlock label="Live тегов" value={stats.liveTags} tone="accent" />
</section>
{edges.isError ? (
@@ -99,13 +106,19 @@ export function EdgesDashboard({ onOpenEdge, onOpenEquipment }: EdgesDashboardPr
) : (
<section className="edge-card-grid" aria-label="Буровые установки">
{filteredEdges.map((edge, index) => (
<EdgeCard key={edge.id} edge={edge} index={index} onOpenEdge={onOpenEdge} onOpenEquipment={onOpenEquipment} />
<EdgeCard
key={edge.id}
edge={edge}
index={index}
onOpenEdge={onOpenEdge}
onOpenEquipment={onOpenEquipment}
/>
))}
</section>
)}
{!edges.isPending && !filteredEdges.length && !edges.isError ? (
<div className="empty-panel">В cloud-v2 пока нет буровых</div>
<div className="empty-panel">В cloud-v3 пока нет буровых</div>
) : null}
</main>
);
@@ -129,7 +142,7 @@ function StatBlock({
);
}
/** Рендерит продуктовую карточку edge с быстрыми переходами в рабочие разделы. */
/** Рендерит карточку edge с быстрыми переходами в рабочие разделы. */
function EdgeCard({
edge,
onOpenEdge,
@@ -174,7 +187,7 @@ function EdgeCard({
<Clock3 size={14} />
Последние данные
</dt>
<dd>{edge.lastDataAt ? formatDateTime(edge.lastDataAt) : '—'}</dd>
<dd>{edge.lastDataAt ? formatDateTime(edge.lastDataAt) : '-'}</dd>
</div>
</dl>
@@ -187,6 +200,11 @@ function EdgeCard({
<Gauge size={15} />
Состояние байпасов
</button>
{/* Электросхемы временно скрыты до готовности опубликованных схем и diagram-service. */}
{/* <button type="button" onClick={() => onOpenElectrical(edge.id)}>
<CircuitBoard size={15} />
Электросхемы
</button> */}
<button type="button">
<ShieldAlert size={15} />
Аварии приводов

476
src/pages/ElectricalSchematicsPage.tsx Normal file
View File

@@ -0,0 +1,476 @@
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>
);
}