decompose structure
This commit is contained in:
Первов Артем
@@ -1,723 +1,2 @@
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
import { useQuery, useQueryClient } from '@tanstack/react-query';
|
||||
import {
|
||||
Activity,
|
||||
BarChart3,
|
||||
CalendarClock,
|
||||
ChevronDown,
|
||||
DatabaseZap,
|
||||
Gauge,
|
||||
LogOut,
|
||||
Menu,
|
||||
PanelLeftClose,
|
||||
PanelLeftOpen,
|
||||
RefreshCw,
|
||||
Search,
|
||||
Wrench,
|
||||
} from 'lucide-react';
|
||||
import { useNavigate, useParams } from 'react-router-dom';
|
||||
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';
|
||||
import { ToirLightIframe } from '../components/ToirLightIframe';
|
||||
import { formatDateTime, formatNumber, toInputDateTimeValue, toIsoFromInput } from '../utils/format';
|
||||
import { getMetricStatus } from '../utils/metricStatus';
|
||||
|
||||
const RANGE_PRESETS = [
|
||||
{ id: '1h', label: '1 час', hours: 1 },
|
||||
{ id: '6h', label: '6 часов', hours: 6 },
|
||||
{ id: '24h', label: '24 часа', hours: 24 },
|
||||
{ id: '7d', label: '7 дней', hours: 24 * 7 },
|
||||
{ id: '30d', label: '30 дней', hours: 24 * 30 },
|
||||
] as const;
|
||||
|
||||
const ACTIVE_EQUIPMENT_PATH =
|
||||
'/equipment?filter=%7B%22status%22%3A%5B%22Active%22%5D%7D&displayedFilters=%7B%22status%22%3Atrue%7D';
|
||||
|
||||
type DetailView = 'overview' | 'archive' | 'indicators' | 'equipment';
|
||||
|
||||
type EdgeDetailPageProps = {
|
||||
view: DetailView;
|
||||
};
|
||||
|
||||
type DateRangeState = {
|
||||
from: string;
|
||||
to: string;
|
||||
};
|
||||
|
||||
/** Создает диапазон истории от текущего времени на заданное количество часов назад. */
|
||||
function createRange(hours: number): DateRangeState {
|
||||
const to = new Date();
|
||||
const from = new Date(to.getTime() - hours * 60 * 60 * 1000);
|
||||
return {
|
||||
from: toInputDateTimeValue(from),
|
||||
to: toInputDateTimeValue(to),
|
||||
};
|
||||
}
|
||||
|
||||
/** Возвращает русское имя тега из 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();
|
||||
const auth = useAuth();
|
||||
const { edgeId = '' } = useParams();
|
||||
const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
|
||||
const [currentEventsConnected, setCurrentEventsConnected] = useState(false);
|
||||
const [search, setSearch] = useState('');
|
||||
const [range, setRange] = useState(() => createRange(24));
|
||||
const [selectedTags, setSelectedTags] = useState<string[]>([]);
|
||||
|
||||
const edgePath = `/edges/${encodeURIComponent(edgeId)}`;
|
||||
|
||||
const current = useQuery({
|
||||
queryKey: ['current', edgeId],
|
||||
queryFn: () => getCurrent(edgeId),
|
||||
enabled: Boolean(edgeId),
|
||||
refetchInterval: currentEventsConnected ? false : 1_000,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (!edgeId || typeof EventSource === 'undefined') {
|
||||
setCurrentEventsConnected(false);
|
||||
return undefined;
|
||||
}
|
||||
|
||||
const eventSource = new EventSource(getCurrentEventsUrl(edgeId));
|
||||
|
||||
eventSource.onopen = () => setCurrentEventsConnected(true);
|
||||
eventSource.onerror = () => setCurrentEventsConnected(false);
|
||||
eventSource.onmessage = (message) => {
|
||||
const event = JSON.parse(message.data) as CurrentEvent;
|
||||
queryClient.setQueryData<CurrentResponse>(['current', edgeId], event);
|
||||
};
|
||||
|
||||
return () => {
|
||||
eventSource.close();
|
||||
setCurrentEventsConnected(false);
|
||||
};
|
||||
}, [edgeId, queryClient]);
|
||||
|
||||
const tagLabels = useMemo(() => {
|
||||
return Object.fromEntries((current.data?.items ?? []).map((item) => [item.tag, getItemLabel(item)]));
|
||||
}, [current.data?.items]);
|
||||
|
||||
const getTagLabel = (tag: string) => tagLabels[tag] ?? tag;
|
||||
|
||||
const visibleItems = useMemo(() => {
|
||||
const query = search.trim().toLowerCase();
|
||||
const items = current.data?.items ?? [];
|
||||
|
||||
return 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]);
|
||||
|
||||
const latestUpdatedAt = useMemo(() => {
|
||||
const latest = (current.data?.items ?? []).reduce<number | null>((max, item) => {
|
||||
const updatedAt = new Date(item.updatedAt).getTime();
|
||||
return Number.isFinite(updatedAt) && (max === null || updatedAt > max) ? updatedAt : max;
|
||||
}, null);
|
||||
|
||||
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 history = useQuery({
|
||||
queryKey: ['history', edgeId, selectedTags, range.from, range.to],
|
||||
queryFn: () =>
|
||||
getHistory({
|
||||
edge: edgeId,
|
||||
tags: selectedTags,
|
||||
from: toIsoFromInput(range.from),
|
||||
to: toIsoFromInput(range.to),
|
||||
targetPoints: 1600,
|
||||
}),
|
||||
enabled: Boolean(edgeId && selectedTags.length),
|
||||
refetchInterval: false,
|
||||
});
|
||||
|
||||
/** Переключает выбранный тег для отображения на историческом графике. */
|
||||
const toggleTag = (tag: string) => {
|
||||
setSelectedTags((prev) => (prev.includes(tag) ? prev.filter((item) => item !== tag) : [...prev, tag]));
|
||||
};
|
||||
|
||||
/** Быстро выбирает первые найденные показатели для первичного анализа графика. */
|
||||
const selectFirstTags = () => {
|
||||
setSelectedTags(visibleItems.slice(0, 6).map((item) => item.tag));
|
||||
};
|
||||
|
||||
/** Добавляет все отфильтрованные показатели к текущему набору выбранных тегов. */
|
||||
const selectVisibleTags = () => {
|
||||
setSelectedTags((prev) => Array.from(new Set([...prev, ...visibleItems.map((item) => item.tag)])));
|
||||
};
|
||||
|
||||
/** Снимает выбор только с тех тегов, которые сейчас видны после фильтра поиска. */
|
||||
const clearVisibleTags = () => {
|
||||
const visibleTags = new Set(visibleItems.map((item) => item.tag));
|
||||
setSelectedTags((prev) => prev.filter((tag) => !visibleTags.has(tag)));
|
||||
};
|
||||
|
||||
return (
|
||||
<main className={`app-shell ${sidebarCollapsed ? 'app-shell--sidebar-collapsed' : ''}`}>
|
||||
<aside className="sidebar">
|
||||
<div className="brand">
|
||||
<img src="/logo.png" alt="" />
|
||||
<div className="brand__text">
|
||||
<strong>Drill UI</strong>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className="sidebar-toggle"
|
||||
onClick={() => setSidebarCollapsed((collapsed) => !collapsed)}
|
||||
title={sidebarCollapsed ? 'Развернуть меню' : 'Свернуть меню'}
|
||||
>
|
||||
{sidebarCollapsed ? <PanelLeftOpen size={18} /> : <PanelLeftClose size={18} />}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<nav className="nav-list" aria-label="Основная навигация">
|
||||
<button className="nav-item nav-item--button" type="button" onClick={() => navigate('/edges')}>
|
||||
<Menu size={18} />
|
||||
<span className="nav-label">Буровые</span>
|
||||
</button>
|
||||
<button
|
||||
className={`nav-item nav-item--button ${view === 'overview' ? 'nav-item--active' : ''}`}
|
||||
type="button"
|
||||
onClick={() => navigate(edgePath)}
|
||||
>
|
||||
<Gauge size={18} />
|
||||
<span className="nav-label">Обзор</span>
|
||||
</button>
|
||||
<button
|
||||
className={`nav-item nav-item--button ${view === 'archive' ? 'nav-item--active' : ''}`}
|
||||
type="button"
|
||||
onClick={() => navigate(`${edgePath}/archive`)}
|
||||
>
|
||||
<BarChart3 size={18} />
|
||||
<span className="nav-label">Архив</span>
|
||||
</button>
|
||||
<button
|
||||
className={`nav-item nav-item--button ${view === 'indicators' ? 'nav-item--active' : ''}`}
|
||||
type="button"
|
||||
onClick={() => navigate(`${edgePath}/indicators`)}
|
||||
>
|
||||
<Activity size={18} />
|
||||
<span className="nav-label">Показатели</span>
|
||||
</button>
|
||||
<button
|
||||
className={`nav-item nav-item--button ${view === 'equipment' ? 'nav-item--active' : ''}`}
|
||||
type="button"
|
||||
onClick={() => navigate(`${edgePath}/equipment`)}
|
||||
>
|
||||
<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>
|
||||
|
||||
<section className={`workspace workspace--${view}`}>
|
||||
<header className="topbar">
|
||||
<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')}>
|
||||
<Menu size={17} />
|
||||
К списку
|
||||
</button>
|
||||
<button type="button" className="icon-button" onClick={() => current.refetch()} title="Обновить данные">
|
||||
<RefreshCw size={18} />
|
||||
</button>
|
||||
{auth.enabled ? (
|
||||
<button type="button" className="ghost-button" onClick={() => void auth.logout()}>
|
||||
<LogOut size={17} />
|
||||
Выйти
|
||||
</button>
|
||||
) : null}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{view === 'overview' ? (
|
||||
<OverviewView
|
||||
edgeId={edgeId}
|
||||
totalTags={current.data?.items.length ?? 0}
|
||||
liveCount={liveCount}
|
||||
latestUpdatedAt={latestUpdatedAt}
|
||||
selectedCount={selectedTags.length}
|
||||
onOpenArchive={() => navigate(`${edgePath}/archive`)}
|
||||
onOpenIndicators={() => navigate(`${edgePath}/indicators`)}
|
||||
onOpenEquipment={() => navigate(`${edgePath}/equipment`)}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
{view === 'archive' ? (
|
||||
<ArchiveView
|
||||
items={visibleItems}
|
||||
search={search}
|
||||
selectedTags={selectedTags}
|
||||
history={history.data}
|
||||
historyLoading={history.isPending && selectedTags.length > 0}
|
||||
historySource={history.data?.source}
|
||||
range={range}
|
||||
onSearchChange={setSearch}
|
||||
onRangeChange={setRange}
|
||||
onToggleTag={toggleTag}
|
||||
onSelectFirstTags={selectFirstTags}
|
||||
onSelectVisibleTags={selectVisibleTags}
|
||||
onClearVisibleTags={clearVisibleTags}
|
||||
onClearTags={() => setSelectedTags([])}
|
||||
getTagLabel={getTagLabel}
|
||||
tagLabels={tagLabels}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
{view === 'indicators' ? (
|
||||
<IndicatorsView
|
||||
items={visibleItems}
|
||||
search={search}
|
||||
isError={current.isError}
|
||||
error={current.error}
|
||||
selectedTags={selectedTags}
|
||||
getTagLabel={getTagLabel}
|
||||
onSearchChange={setSearch}
|
||||
onToggleTag={toggleTag}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
{view === 'equipment' ? <EquipmentView /> : null}
|
||||
|
||||
{/* Электросхемы временно скрыты до готовности опубликованных схем и diagram-service. */}
|
||||
{/* {view === 'electrical' ? <ElectricalSchematicsPage edgeId={edgeId} /> : null} */}
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
/** Показывает обзор выбранного edge и быстрые переходы в основные разделы. */
|
||||
function OverviewView({
|
||||
edgeId,
|
||||
totalTags,
|
||||
liveCount,
|
||||
latestUpdatedAt,
|
||||
selectedCount,
|
||||
onOpenArchive,
|
||||
onOpenIndicators,
|
||||
onOpenEquipment,
|
||||
}: {
|
||||
edgeId: string;
|
||||
totalTags: number;
|
||||
liveCount: number;
|
||||
latestUpdatedAt?: Date;
|
||||
selectedCount: number;
|
||||
onOpenArchive: () => void;
|
||||
onOpenIndicators: () => void;
|
||||
onOpenEquipment: () => void;
|
||||
}) {
|
||||
return (
|
||||
<section className="detail-overview">
|
||||
<div className="summary-grid">
|
||||
<div className="summary-card">
|
||||
<span>Всего показателей</span>
|
||||
<strong>{totalTags}</strong>
|
||||
</div>
|
||||
<div className="summary-card">
|
||||
<span>Live</span>
|
||||
<strong>{liveCount}</strong>
|
||||
</div>
|
||||
<div className="summary-card">
|
||||
<span>Выбрано для графика</span>
|
||||
<strong>{selectedCount}</strong>
|
||||
</div>
|
||||
<div className="summary-card">
|
||||
<span>Последнее обновление</span>
|
||||
<strong>{latestUpdatedAt ? formatDateTime(latestUpdatedAt) : '-'}</strong>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section className="detail-action-panel">
|
||||
<div>
|
||||
<span className="page-kicker">Разделы</span>
|
||||
<h2>{edgeId}</h2>
|
||||
</div>
|
||||
<div className="detail-action-grid">
|
||||
<button type="button" onClick={onOpenIndicators}>
|
||||
<Activity size={18} />
|
||||
Текущие показатели
|
||||
</button>
|
||||
<button type="button" onClick={onOpenArchive}>
|
||||
<BarChart3 size={18} />
|
||||
Архив и график
|
||||
</button>
|
||||
<button type="button" onClick={onOpenEquipment}>
|
||||
<Wrench size={18} />
|
||||
Состояние оборудования
|
||||
</button>
|
||||
{/* Электросхемы временно скрыты до готовности опубликованных схем и diagram-service. */}
|
||||
{/* <button type="button" onClick={onOpenElectrical}>
|
||||
<CircuitBoard size={18} />
|
||||
Электросхемы
|
||||
</button> */}
|
||||
<button type="button">
|
||||
<CalendarClock size={18} />
|
||||
Техническое обслуживание
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
/** Управляет выбором тегов и диапазона для исторического графика cloud-v3. */
|
||||
function ArchiveView({
|
||||
items,
|
||||
search,
|
||||
selectedTags,
|
||||
history,
|
||||
historyLoading,
|
||||
historySource,
|
||||
range,
|
||||
onSearchChange,
|
||||
onRangeChange,
|
||||
onToggleTag,
|
||||
onSelectFirstTags,
|
||||
onSelectVisibleTags,
|
||||
onClearVisibleTags,
|
||||
onClearTags,
|
||||
getTagLabel,
|
||||
tagLabels,
|
||||
}: {
|
||||
items: CurrentItem[];
|
||||
search: string;
|
||||
selectedTags: string[];
|
||||
history?: HistoryResponse;
|
||||
historyLoading: boolean;
|
||||
historySource?: string;
|
||||
range: DateRangeState;
|
||||
onSearchChange: (value: string) => void;
|
||||
onRangeChange: (value: DateRangeState) => void;
|
||||
onToggleTag: (tag: string) => void;
|
||||
onSelectFirstTags: () => void;
|
||||
onSelectVisibleTags: () => void;
|
||||
onClearVisibleTags: () => void;
|
||||
onClearTags: () => void;
|
||||
getTagLabel: (tag: string) => string;
|
||||
tagLabels: Record<string, string>;
|
||||
}) {
|
||||
const [selectorOpen, setSelectorOpen] = useState(false);
|
||||
const selectedPreview = selectedTags.slice(0, 10);
|
||||
const hiddenSelectedCount = Math.max(0, selectedTags.length - selectedPreview.length);
|
||||
|
||||
return (
|
||||
<section className="chart-section chart-section--archive">
|
||||
<div className="section-header">
|
||||
<div>
|
||||
<span className="page-kicker">
|
||||
<CalendarClock size={14} />
|
||||
История
|
||||
</span>
|
||||
<h2>График параметров</h2>
|
||||
</div>
|
||||
<div className="source-chip">
|
||||
<DatabaseZap size={16} />
|
||||
cloud-v3 · {historySource ?? 'ожидание'}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="archive-tag-panel">
|
||||
<button
|
||||
type="button"
|
||||
className="archive-tag-panel__toggle"
|
||||
onClick={() => setSelectorOpen((open) => !open)}
|
||||
aria-expanded={selectorOpen}
|
||||
>
|
||||
<span>
|
||||
Показатели
|
||||
<strong>{selectedTags.length} выбрано · {items.length} найдено</strong>
|
||||
</span>
|
||||
<ChevronDown size={18} />
|
||||
</button>
|
||||
|
||||
{selectorOpen ? (
|
||||
<div className="tag-selector">
|
||||
<div className="tag-selector__header">
|
||||
<label className="search-box">
|
||||
<Search size={16} />
|
||||
<input value={search} onChange={(event) => onSearchChange(event.target.value)} placeholder="Поиск" />
|
||||
</label>
|
||||
<div className="tag-selector__tools">
|
||||
<button type="button" onClick={onSelectFirstTags}>
|
||||
Первые 6
|
||||
</button>
|
||||
<button type="button" onClick={onSelectVisibleTags}>
|
||||
Выбрать найденные
|
||||
</button>
|
||||
<button type="button" onClick={onClearVisibleTags}>
|
||||
Снять найденные
|
||||
</button>
|
||||
<button type="button" onClick={onClearTags}>
|
||||
Сбросить все
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="selected-tags">
|
||||
{selectedPreview.length ? selectedPreview.map((tag) => <span key={tag}>{getTagLabel(tag)}</span>) : <span>Не выбрано</span>}
|
||||
{hiddenSelectedCount > 0 ? <span>+{hiddenSelectedCount}</span> : null}
|
||||
</div>
|
||||
|
||||
<div className="tag-select-list">
|
||||
{items.map((item) => {
|
||||
const selected = selectedTags.includes(item.tag);
|
||||
const label = getTagLabel(item.tag);
|
||||
return (
|
||||
<button
|
||||
key={item.tag}
|
||||
type="button"
|
||||
className={`tag-select-item ${selected ? 'tag-select-item--selected' : ''}`}
|
||||
title={item.tag}
|
||||
onClick={() => onToggleTag(item.tag)}
|
||||
>
|
||||
<span className="tag-select-item__name">
|
||||
<span>{label}</span>
|
||||
{label !== item.tag ? <small>{item.tag}</small> : null}
|
||||
</span>
|
||||
<strong>{item.value.toLocaleString('ru-RU', { maximumFractionDigits: item.precision ?? 3 })}</strong>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
<div className="archive-chart">
|
||||
<div className="toolbar">
|
||||
<div className="segmented">
|
||||
{RANGE_PRESETS.map((preset) => (
|
||||
<button key={preset.id} type="button" onClick={() => onRangeChange(createRange(preset.hours))}>
|
||||
{preset.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<label>
|
||||
С
|
||||
<input
|
||||
type="datetime-local"
|
||||
value={range.from}
|
||||
onChange={(event) => onRangeChange({ ...range, from: event.target.value })}
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
По
|
||||
<input
|
||||
type="datetime-local"
|
||||
value={range.to}
|
||||
onChange={(event) => onRangeChange({ ...range, to: event.target.value })}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{selectedTags.length ? (
|
||||
<HistoryChart
|
||||
key={`${range.from}:${range.to}:${selectedTags.join(',')}`}
|
||||
data={history}
|
||||
loading={historyLoading}
|
||||
from={toIsoFromInput(range.from)}
|
||||
to={toIsoFromInput(range.to)}
|
||||
tagLabels={tagLabels}
|
||||
/>
|
||||
) : (
|
||||
<div className="chart-placeholder">Разверните список показателей и выберите серии для графика</div>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
/** Встраивает страницу активного оборудования из ТОиР light почти на всю рабочую область. */
|
||||
function EquipmentView() {
|
||||
const [iframeLoaded, setIframeLoaded] = useState(false);
|
||||
|
||||
return (
|
||||
<section className="equipment-section" aria-label="Активное оборудование">
|
||||
<div className="equipment-frame-shell" aria-busy={!iframeLoaded}>
|
||||
{!iframeLoaded ? (
|
||||
<div className="equipment-frame-loading" role="status" aria-live="polite">
|
||||
<span className="equipment-frame-loading__ring" aria-hidden />
|
||||
<span>Загрузка интерфейса управления оборудованием...</span>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<ToirLightIframe
|
||||
className="equipment-frame"
|
||||
path={ACTIVE_EQUIPMENT_PATH}
|
||||
title="ТОиР light: управление активным оборудованием"
|
||||
onLoad={() => setIframeLoaded(true)}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
/** Показывает текущие показатели edge в режимах общей картины и детальных карточек. */
|
||||
function IndicatorsView({
|
||||
items,
|
||||
search,
|
||||
isError,
|
||||
error,
|
||||
selectedTags,
|
||||
getTagLabel,
|
||||
onSearchChange,
|
||||
onToggleTag,
|
||||
}: {
|
||||
items: CurrentItem[];
|
||||
search: string;
|
||||
isError: boolean;
|
||||
error: unknown;
|
||||
selectedTags: string[];
|
||||
getTagLabel: (tag: string) => string;
|
||||
onSearchChange: (value: string) => void;
|
||||
onToggleTag: (tag: string) => void;
|
||||
}) {
|
||||
const [displayMode, setDisplayMode] = useState<'overview' | 'cards'>('overview');
|
||||
const itemStatuses = useMemo(() => {
|
||||
const now = Date.now();
|
||||
return items.map((item) => ({ item, statusInfo: getMetricStatus(item, now) }));
|
||||
}, [items]);
|
||||
const statusCounts = itemStatuses.reduce(
|
||||
(counts, { statusInfo }) => {
|
||||
counts[statusInfo.status] += 1;
|
||||
return counts;
|
||||
},
|
||||
{ normal: 0, warning: 0, critical: 0 },
|
||||
);
|
||||
|
||||
return (
|
||||
<section className="tags-section">
|
||||
<div className="section-header">
|
||||
<div>
|
||||
<span className="page-kicker">
|
||||
<Search size={14} />
|
||||
Показатели
|
||||
</span>
|
||||
<h2>Текущие значения</h2>
|
||||
</div>
|
||||
<div className="indicator-controls">
|
||||
<div className="view-switch" aria-label="Режим отображения показателей">
|
||||
<button
|
||||
type="button"
|
||||
className={displayMode === 'overview' ? 'view-switch__button--active' : ''}
|
||||
onClick={() => setDisplayMode('overview')}
|
||||
>
|
||||
Картина
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={displayMode === 'cards' ? 'view-switch__button--active' : ''}
|
||||
onClick={() => setDisplayMode('cards')}
|
||||
>
|
||||
Карточки
|
||||
</button>
|
||||
</div>
|
||||
<label className="search-box">
|
||||
<Search size={16} />
|
||||
<input value={search} onChange={(event) => onSearchChange(event.target.value)} placeholder="Поиск показателя" />
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="indicator-summary">
|
||||
<div>
|
||||
<span>Всего</span>
|
||||
<strong>{items.length}</strong>
|
||||
</div>
|
||||
<div>
|
||||
<span>В норме</span>
|
||||
<strong>{statusCounts.normal}</strong>
|
||||
</div>
|
||||
<div>
|
||||
<span>Предупреждение</span>
|
||||
<strong>{statusCounts.warning}</strong>
|
||||
</div>
|
||||
<div>
|
||||
<span>Критично</span>
|
||||
<strong>{statusCounts.critical}</strong>
|
||||
</div>
|
||||
<div>
|
||||
<span>На графике</span>
|
||||
<strong>{selectedTags.length}</strong>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{isError ? (
|
||||
<div className="empty-panel">Не удалось загрузить текущие значения: {String(error)}</div>
|
||||
) : displayMode === 'overview' ? (
|
||||
<div className="metric-mosaic">
|
||||
{itemStatuses.map(({ item, statusInfo }) => (
|
||||
<button
|
||||
key={`${item.edge}:${item.tag}`}
|
||||
type="button"
|
||||
className={`metric-tile metric-tile--${statusInfo.status} ${selectedTags.includes(item.tag) ? 'metric-tile--selected' : ''}`}
|
||||
title={`${getTagLabel(item.tag)} (${item.tag}): ${formatNumber(item.value)} · ${statusInfo.label}`}
|
||||
onClick={() => onToggleTag(item.tag)}
|
||||
>
|
||||
<span className="metric-tile__status" />
|
||||
<span className="metric-tile__tag">{getTagLabel(item.tag)}</span>
|
||||
<strong>{formatNumber(item.value)}</strong>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="metric-grid">
|
||||
{itemStatuses.map(({ item, statusInfo }) => (
|
||||
<MetricCard
|
||||
key={`${item.edge}:${item.tag}`}
|
||||
item={item}
|
||||
displayName={getTagLabel(item.tag)}
|
||||
statusInfo={statusInfo}
|
||||
selected={selectedTags.includes(item.tag)}
|
||||
onToggle={onToggleTag}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
export { EdgeDetailPage } from '../features/edge-detail/EdgeDetailPage';
|
||||
export type { DetailView } from '../features/edge-detail/types';
|
||||
|
||||
@@ -1,235 +1 @@
|
||||
import { useMemo, useState } from 'react';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { ArrowRight, Clock3, Gauge, LogOut, RefreshCw, Search, ShieldAlert, Wrench } from 'lucide-react';
|
||||
import edgeImage from '../assets/edge.png';
|
||||
import { EdgeItem, getEdges } from '../api/cloud';
|
||||
import { useAuth } from '../auth/authContext';
|
||||
import { formatDateTime } from '../utils/format';
|
||||
|
||||
type EdgesDashboardProps = {
|
||||
onOpenEdge: (edgeId: string) => void;
|
||||
onOpenEquipment: (edgeId: string) => void;
|
||||
};
|
||||
|
||||
/** Определяет базовый статус edge по наличию последних и live-данных. */
|
||||
function getEdgeState(edge: EdgeItem): 'ok' | 'warn' | 'empty' {
|
||||
if (!edge.lastDataAt) {
|
||||
return 'empty';
|
||||
}
|
||||
|
||||
if (edge.liveTagCount > 0) {
|
||||
return 'ok';
|
||||
}
|
||||
|
||||
return 'warn';
|
||||
}
|
||||
|
||||
/** Возвращает пользовательское имя edge, если оно отличается от технического id. */
|
||||
function getEdgeTitle(edge: EdgeItem): string {
|
||||
if (edge.name && edge.name !== edge.id) {
|
||||
return edge.name;
|
||||
}
|
||||
|
||||
return edge.id;
|
||||
}
|
||||
|
||||
/** Отображает стартовый dashboard со списком edge-установок и общей статистикой cloud-v3. */
|
||||
export function EdgesDashboard({ onOpenEdge, onOpenEquipment }: EdgesDashboardProps) {
|
||||
const [search, setSearch] = useState('');
|
||||
const auth = useAuth();
|
||||
const edges = useQuery({
|
||||
queryKey: ['edge'],
|
||||
queryFn: getEdges,
|
||||
refetchInterval: 5_000,
|
||||
});
|
||||
|
||||
const filteredEdges = useMemo(() => {
|
||||
const query = search.trim().toLowerCase();
|
||||
const items = edges.data?.items ?? [];
|
||||
|
||||
if (!query) {
|
||||
return items;
|
||||
}
|
||||
|
||||
return items.filter((edge) => `${edge.id} ${edge.name}`.toLowerCase().includes(query));
|
||||
}, [edges.data?.items, search]);
|
||||
|
||||
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 v3</span>
|
||||
<h1>Буровые установки</h1>
|
||||
</div>
|
||||
<div className="dashboard-actions">
|
||||
<label className="search-box dashboard-search">
|
||||
<Search size={16} />
|
||||
<input value={search} onChange={(event) => setSearch(event.target.value)} placeholder="Поиск буровой" />
|
||||
</label>
|
||||
<button type="button" className="icon-button" onClick={() => edges.refetch()} title="Обновить список">
|
||||
<RefreshCw size={18} />
|
||||
</button>
|
||||
{auth.enabled ? (
|
||||
<button type="button" className="ghost-button" onClick={() => void auth.logout()}>
|
||||
<LogOut size={17} />
|
||||
Выйти
|
||||
</button>
|
||||
) : null}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section className="dashboard-stats" aria-label="Статистика буровых">
|
||||
<StatBlock label="Всего установок" value={stats.total} tone="neutral" />
|
||||
<StatBlock label="В норме" value={stats.normal} tone="success" />
|
||||
<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 ? (
|
||||
<div className="empty-panel">Не удалось загрузить список буровых: {String(edges.error)}</div>
|
||||
) : (
|
||||
<section className="edge-card-grid" aria-label="Буровые установки">
|
||||
{filteredEdges.map((edge, index) => (
|
||||
<EdgeCard
|
||||
key={edge.id}
|
||||
edge={edge}
|
||||
index={index}
|
||||
onOpenEdge={onOpenEdge}
|
||||
onOpenEquipment={onOpenEquipment}
|
||||
/>
|
||||
))}
|
||||
</section>
|
||||
)}
|
||||
|
||||
{!edges.isPending && !filteredEdges.length && !edges.isError ? (
|
||||
<div className="empty-panel">В cloud-v3 пока нет буровых</div>
|
||||
) : null}
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
/** Показывает один числовой показатель общей статистики dashboard. */
|
||||
function StatBlock({
|
||||
label,
|
||||
value,
|
||||
tone,
|
||||
}: {
|
||||
label: string;
|
||||
value: number;
|
||||
tone: 'neutral' | 'success' | 'danger' | 'warning' | 'accent';
|
||||
}) {
|
||||
return (
|
||||
<article className={`dashboard-stat dashboard-stat--${tone}`}>
|
||||
<span>{label}</span>
|
||||
<strong>{value}</strong>
|
||||
</article>
|
||||
);
|
||||
}
|
||||
|
||||
/** Рендерит карточку edge с быстрыми переходами в рабочие разделы. */
|
||||
function EdgeCard({
|
||||
edge,
|
||||
onOpenEdge,
|
||||
onOpenEquipment,
|
||||
}: {
|
||||
edge: EdgeItem;
|
||||
index: number;
|
||||
onOpenEdge: (edgeId: string) => void;
|
||||
onOpenEquipment: (edgeId: string) => void;
|
||||
}) {
|
||||
const state = getEdgeState(edge);
|
||||
const title = getEdgeTitle(edge);
|
||||
const stateLabel = state === 'ok' ? 'В норме' : state === 'warn' ? 'Нет live' : 'Нет данных';
|
||||
|
||||
return (
|
||||
<article className={`edge-card edge-card--${state}`}>
|
||||
<header className="edge-card__header">
|
||||
<div className="edge-card__logo">
|
||||
<img src={edgeImage} alt="" />
|
||||
</div>
|
||||
<div className="edge-card__title">
|
||||
<h2>{title}</h2>
|
||||
<span>{edge.id}</span>
|
||||
</div>
|
||||
<span className={`edge-state edge-state--${state}`}>
|
||||
<Gauge size={14} />
|
||||
{stateLabel}
|
||||
</span>
|
||||
</header>
|
||||
|
||||
<dl className="edge-card__meta">
|
||||
<div>
|
||||
<dt>Показатели</dt>
|
||||
<dd>{edge.currentTagCount}/{edge.tagCount}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>Live</dt>
|
||||
<dd>{edge.liveTagCount}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>
|
||||
<Clock3 size={14} />
|
||||
Последние данные
|
||||
</dt>
|
||||
<dd>{edge.lastDataAt ? formatDateTime(edge.lastDataAt) : '-'}</dd>
|
||||
</div>
|
||||
</dl>
|
||||
|
||||
<div className="edge-card__actions" aria-label={`Разделы ${title}`}>
|
||||
<button type="button" onClick={() => onOpenEquipment(edge.id)}>
|
||||
<Wrench size={15} />
|
||||
Оборудование
|
||||
</button>
|
||||
<button type="button">
|
||||
<Gauge size={15} />
|
||||
Состояние байпасов
|
||||
</button>
|
||||
{/* Электросхемы временно скрыты до готовности опубликованных схем и diagram-service. */}
|
||||
{/* <button type="button" onClick={() => onOpenElectrical(edge.id)}>
|
||||
<CircuitBoard size={15} />
|
||||
Электросхемы
|
||||
</button> */}
|
||||
<button type="button">
|
||||
<ShieldAlert size={15} />
|
||||
Аварии приводов
|
||||
</button>
|
||||
<button type="button">
|
||||
<Clock3 size={15} />
|
||||
Техническое обслуживание
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<section className="edge-card__maintenance" aria-label="Техническое обслуживание">
|
||||
<span>Техническое обслуживание</span>
|
||||
<div>
|
||||
<button type="button">Ежедневное</button>
|
||||
<button type="button">Еженедельное</button>
|
||||
<button type="button">Ежемесячное</button>
|
||||
<button type="button">Полугодовое</button>
|
||||
<button type="button">Годовое</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<button type="button" className="edge-card__details" onClick={() => onOpenEdge(edge.id)}>
|
||||
<span>Подробнее</span>
|
||||
<ArrowRight size={18} />
|
||||
</button>
|
||||
</article>
|
||||
);
|
||||
}
|
||||
export { EdgesDashboard } from '../features/edges-dashboard/EdgesDashboard';
|
||||
|
||||
@@ -1,476 +1 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
export { ElectricalSchematicsPage } from '../features/electrical-schematics/ElectricalSchematicsPage';
|
||||
|
||||
Reference in New Issue
Block a user