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

3
.env.example
View File

@@ -1,2 +1,3 @@
VITE_CLOUD_API_URL=http://localhost:3100 VITE_CLOUD_API_URL=http://localhost:3101
VITE_DIAGRAM_API_URL=http://localhost:3002
VITE_DEFAULT_EDGE=edge5 VITE_DEFAULT_EDGE=edge5

5
.env.local.example
View File

@@ -1,9 +1,10 @@
VITE_CLOUD_API_URL=http://localhost:3100 VITE_CLOUD_API_URL=http://localhost:3101
VITE_DIAGRAM_API_URL=http://localhost:3002
# Если эти переменные не заданы, greact.drill.ui работает без SSO для локальной разработки. # Если эти переменные не заданы, greact.drill.ui работает без SSO для локальной разработки.
VITE_KEYCLOAK_URL=https://sso.greact.ru VITE_KEYCLOAK_URL=https://sso.greact.ru
VITE_KEYCLOAK_REALM=toir VITE_KEYCLOAK_REALM=toir
VITE_KEYCLOAK_CLIENT_ID=drill-ui-frontend VITE_KEYCLOAK_CLIENT_ID=drill-ui-frontend
# Origin встроенного TOиР light. По умолчанию используется https://toir-light.greact.ru. # Origin встроенного ТОиР light. По умолчанию используется https://toir-light.greact.ru.
VITE_TOIR_LIGHT_ORIGIN=https://toir-light.greact.ru VITE_TOIR_LIGHT_ORIGIN=https://toir-light.greact.ru

2
Dockerfile
View File

@@ -7,7 +7,7 @@ FROM node:22-alpine AS build
WORKDIR /app WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules COPY --from=deps /app/node_modules ./node_modules
COPY . . COPY . .
ARG VITE_CLOUD_API_URL=http://localhost:3100 ARG VITE_CLOUD_API_URL=http://localhost:3101
ARG VITE_DEFAULT_EDGE=edge5 ARG VITE_DEFAULT_EDGE=edge5
ENV VITE_CLOUD_API_URL=$VITE_CLOUD_API_URL ENV VITE_CLOUD_API_URL=$VITE_CLOUD_API_URL
ENV VITE_DEFAULT_EDGE=$VITE_DEFAULT_EDGE ENV VITE_DEFAULT_EDGE=$VITE_DEFAULT_EDGE

2
docker-compose.yml
View File

@@ -3,7 +3,7 @@ services:
build: build:
context: . context: .
args: args:
VITE_CLOUD_API_URL: ${VITE_CLOUD_API_URL:-http://localhost:3100} VITE_CLOUD_API_URL: ${VITE_CLOUD_API_URL:-http://localhost:3101}
VITE_DEFAULT_EDGE: ${VITE_DEFAULT_EDGE:-edge5} VITE_DEFAULT_EDGE: ${VITE_DEFAULT_EDGE:-edge5}
expose: expose:
- "80" - "80"

2
src/App.tsx
View File

@@ -25,6 +25,8 @@ export default function App() {
<Route path="/edges/:edgeId/archive" element={<EdgeDetailPage view="archive" />} /> <Route path="/edges/:edgeId/archive" element={<EdgeDetailPage view="archive" />} />
<Route path="/edges/:edgeId/indicators" element={<EdgeDetailPage view="indicators" />} /> <Route path="/edges/:edgeId/indicators" element={<EdgeDetailPage view="indicators" />} />
<Route path="/edges/:edgeId/equipment" element={<EdgeDetailPage view="equipment" />} /> <Route path="/edges/:edgeId/equipment" element={<EdgeDetailPage view="equipment" />} />
{/* Электросхемы временно скрыты до готовности опубликованных схем и diagram-service. */}
{/* <Route path="/edges/:edgeId/electrical" element={<EdgeDetailPage view="electrical" />} /> */}
<Route path="*" element={<Navigate to="/edges" replace />} /> <Route path="*" element={<Navigate to="/edges" replace />} />
</Routes> </Routes>
</BrowserRouter> </BrowserRouter>

90
src/api/cloud.ts
View File

@@ -1,4 +1,4 @@
const API_URL = import.meta.env.VITE_CLOUD_API_URL ?? 'http://localhost:3100'; const API_URL = import.meta.env.VITE_CLOUD_API_URL ?? 'http://localhost:3101';
export type HealthResponse = { export type HealthResponse = {
status: 'ok'; status: 'ok';
@@ -13,8 +13,16 @@ export type CurrentItem = {
edge: string; edge: string;
tag: string; tag: string;
value: number; value: number;
time: string; createdAt: string;
updatedAt: string; updatedAt: string;
time: string;
name: string | null;
tagGroup: string | null;
min: number | null;
max: number | null;
comment: string | null;
unitOfMeasurement: string | null;
precision: number | null;
}; };
export type CurrentResponse = { export type CurrentResponse = {
@@ -27,27 +35,41 @@ export type CurrentEvent = CurrentResponse;
export type EdgeItem = { export type EdgeItem = {
id: string; id: string;
name: string; name: string;
parentId: string | null;
tagIds: string[];
tagCount: number; tagCount: number;
currentTagCount: number; currentTagCount: number;
liveTagCount: number; liveTagCount: number;
lastDataAt: string | null; lastDataAt: string | null;
createdAt: string;
updatedAt: string;
}; };
export type EdgeResponse = { export type EdgeResponse = {
items: EdgeItem[]; items: EdgeItem[];
}; };
export type TagItem = {
id: string;
name: string;
tagGroup: string | null;
min: number;
max: number;
comment: string;
unitOfMeasurement: string;
edgeIds: string[];
precision: number | null;
};
export type TagResponse = {
items: TagItem[];
};
export type HistoryPoint = { export type HistoryPoint = {
t: number; t: number;
v: number; v: number;
first?: number; min: number;
min?: number; avg: number;
max?: number; max: number;
avg?: number; count: number;
last?: number;
count?: number;
}; };
export type HistorySeries = { export type HistorySeries = {
@@ -64,25 +86,9 @@ export type HistoryResponse = {
from?: string; from?: string;
to?: string; to?: string;
resolutionSeconds?: number | null; resolutionSeconds?: number | null;
valueMode?: 'raw' | 'avg' | 'last' | 'first' | 'min' | 'max';
}; };
export type TagTranslationItem = { /** Выполняет типизированный GET-запрос к cloud-v3 и централизованно обрабатывает HTTP-ошибки. */
edge: string;
tag: string;
locale: string;
displayName: string;
source: string | null;
updatedAt: string;
};
export type TagTranslationResponse = {
edge: string;
locale: string;
items: TagTranslationItem[];
};
/** Выполняет типизированный GET-запрос к cloud-v2 и централизованно обрабатывает ошибки HTTP. */
async function request<T>(path: string, params?: Record<string, string | number | undefined>): Promise<T> { async function request<T>(path: string, params?: Record<string, string | number | undefined>): Promise<T> {
const url = new URL(path, API_URL); const url = new URL(path, API_URL);
Object.entries(params ?? {}).forEach(([key, value]) => { Object.entries(params ?? {}).forEach(([key, value]) => {
@@ -100,17 +106,22 @@ async function request<T>(path: string, params?: Record<string, string | number
return response.json() as Promise<T>; return response.json() as Promise<T>;
} }
/** Запрашивает состояние cloud-v2 и подключенной базы данных. */ /** Запрашивает состояние cloud-v3 и подключенной базы данных. */
export function getHealth(): Promise<HealthResponse> { export function getHealth(): Promise<HealthResponse> {
return request<HealthResponse>('/health'); return request<HealthResponse>('/health');
} }
/** Возвращает список edge-установок, доступных в cloud-v2. */ /** Возвращает список edge-установок, доступных в cloud-v3. */
export function getEdges(): Promise<EdgeResponse> { export function getEdges(): Promise<EdgeResponse> {
return request<EdgeResponse>('/edge'); return request<EdgeResponse>('/edge');
} }
/** Загружает текущие значения показателей для выбранного edge. */ /** Загружает справочник тегов, используя tag.name как отображаемое имя. */
export function getTags(params: { edge?: string; search?: string } = {}): Promise<TagResponse> {
return request<TagResponse>('/tag', params);
}
/** Загружает текущие значения показателей для выбранного edge вместе с метаданными тегов. */
export function getCurrent(edge: string, tags?: string[]): Promise<CurrentResponse> { export function getCurrent(edge: string, tags?: string[]): Promise<CurrentResponse> {
return request<CurrentResponse>('/current', { return request<CurrentResponse>('/current', {
edge, edge,
@@ -118,7 +129,7 @@ export function getCurrent(edge: string, tags?: string[]): Promise<CurrentRespon
}); });
} }
/** Формирует URL SSE-потока для live-обновлений текущих значений. */ /** Формирует URL SSE-потока текущих значений для выбранного edge. */
export function getCurrentEventsUrl(edge: string, tags?: string[]): string { export function getCurrentEventsUrl(edge: string, tags?: string[]): string {
const url = new URL('/current/events', API_URL); const url = new URL('/current/events', API_URL);
url.searchParams.set('edge', edge); url.searchParams.set('edge', edge);
@@ -130,14 +141,13 @@ export function getCurrentEventsUrl(edge: string, tags?: string[]): string {
return url.toString(); return url.toString();
} }
/** Запрашивает исторические ряды для графика с учетом диапазона, тегов и режима агрегации. */ /** Запрашивает исторические ряды с avg-линией и min/max-диапазоном для графика. */
export function getHistory(params: { export function getHistory(params: {
edge: string; edge: string;
tags?: string[]; tags?: string[];
from?: string; from?: string;
to?: string; to?: string;
targetPoints?: number; targetPoints?: number;
valueMode?: 'avg' | 'last' | 'first' | 'min' | 'max';
}): Promise<HistoryResponse> { }): Promise<HistoryResponse> {
return request<HistoryResponse>('/history', { return request<HistoryResponse>('/history', {
edge: params.edge, edge: params.edge,
@@ -145,19 +155,5 @@ export function getHistory(params: {
from: params.from, from: params.from,
to: params.to, to: params.to,
targetPoints: params.targetPoints, targetPoints: params.targetPoints,
valueMode: params.valueMode,
});
}
/** Загружает русскоязычный справочник названий тегов для выбранного edge. */
export function getTagTranslations(params: {
edge: string;
locale?: string;
tags?: string[];
}): Promise<TagTranslationResponse> {
return request<TagTranslationResponse>('/tag-translations', {
edge: params.edge,
locale: params.locale ?? 'ru',
tags: params.tags?.join(','),
}); });
} }

124
src/api/diagram.ts Normal file
View File

@@ -0,0 +1,124 @@
import { getAccessToken } from '../auth/keycloak';
const DIAGRAM_API_URL = import.meta.env.VITE_DIAGRAM_API_URL ?? 'http://localhost:3002';
export type DiagramPoint = {
x: number;
y: number;
};
export type DiagramSize = {
width: number;
height: number;
};
export type DiagramBindingConfig = {
stateTagId?: string;
alarmTagId?: string;
edgeId?: string;
sseEdgeId?: string;
sseUrl?: string;
};
export type DiagramNode =
| {
id: string;
kind: 'tagWidget';
tagId: string;
edgeId: string;
widgetType: string;
position: DiagramPoint;
size?: DiagramSize;
zIndex?: number;
label?: string;
displayType?: 'widget' | 'compact' | 'card';
style?: Record<string, unknown>;
}
| {
id: string;
kind: 'decoration';
decorationType: string;
position: DiagramPoint;
size: DiagramSize;
rotation?: number;
zIndex?: number;
data?: Record<string, unknown>;
style?: Record<string, unknown>;
bindings?: DiagramBindingConfig;
};
export type DiagramEdge = {
id: string;
sourceNodeId: string;
targetNodeId: string;
sourceSide?: 'left' | 'right' | 'top' | 'bottom';
targetSide?: 'left' | 'right' | 'top' | 'bottom';
kind: 'wire' | 'power' | 'signal' | 'alert';
label?: string;
animated?: boolean;
waypoints?: DiagramPoint[];
};
export type DiagramDocument = {
schemaVersion: number;
pageKey: string;
ownerEdgeId: string;
title?: string;
viewport?: { x: number; y: number; zoom: number } | null;
background?: {
url?: string;
opacity?: number;
fit?: 'contain' | 'cover' | 'stretch';
};
nodes: DiagramNode[];
edges: DiagramEdge[];
};
export type DiagramPageSummary = {
pageKey: string;
ownerEdgeId: string;
title?: string | null;
schemaVersion: number;
revision: number;
status: 'draft' | 'published' | 'archived';
publishedRevision?: number;
publishedAt?: string;
createdAt: string;
updatedAt: string;
};
export type DiagramPageResponse = DiagramPageSummary & {
document: DiagramDocument;
};
/** Выполняет запрос к diagram-service и пробрасывает Bearer-токен, если UI работает с SSO. */
async function request<T>(path: string, params?: Record<string, string | undefined>): Promise<T> {
const url = new URL(path, DIAGRAM_API_URL);
Object.entries(params ?? {}).forEach(([key, value]) => {
if (value) {
url.searchParams.set(key, value);
}
});
const token = await getAccessToken();
const response = await fetch(url, {
headers: token ? { Authorization: `Bearer ${token}` } : undefined,
});
if (!response.ok) {
const message = await response.text();
throw new Error(message || `${response.status} ${response.statusText}`);
}
return response.json() as Promise<T>;
}
/** Возвращает список страниц схем, опубликованность определяется по publishedRevision. */
export function listDiagramPages(ownerEdgeId?: string): Promise<DiagramPageSummary[]> {
return request<DiagramPageSummary[]>('/diagram/pages', { ownerEdgeId });
}
/** Загружает опубликованную версию страницы схемы. */
export function getPublishedDiagramPage(pageKey: string): Promise<DiagramPageResponse> {
return request<DiagramPageResponse>(`/diagram/pages/${encodeURIComponent(pageKey)}/published`);
}

188
src/components/HistoryChart.tsx
View File

@@ -1,4 +1,4 @@
import { LineChart } from 'echarts/charts'; import { LineChart, ScatterChart } from 'echarts/charts';
import { import {
DataZoomComponent, DataZoomComponent,
GridComponent, GridComponent,
@@ -8,9 +8,18 @@ import {
import * as echarts from 'echarts/core'; import * as echarts from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers'; import { CanvasRenderer } from 'echarts/renderers';
import ReactEChartsCore from 'echarts-for-react/esm/core.js'; import ReactEChartsCore from 'echarts-for-react/esm/core.js';
import type { EChartsOption, SeriesOption } from 'echarts';
import type { HistoryResponse } from '../api/cloud'; import type { HistoryResponse } from '../api/cloud';
echarts.use([LineChart, GridComponent, LegendComponent, TooltipComponent, DataZoomComponent, CanvasRenderer]); echarts.use([
LineChart,
ScatterChart,
GridComponent,
LegendComponent,
TooltipComponent,
DataZoomComponent,
CanvasRenderer,
]);
const SERIES_COLORS = [ const SERIES_COLORS = [
'#5B8FF9', '#5B8FF9',
@@ -31,6 +40,14 @@ type HistoryChartProps = {
tagLabels?: Record<string, string>; tagLabels?: Record<string, string>;
}; };
type AvgPointValue = [time: number, value: number, min: number, avg: number, max: number, count: number];
type TooltipParam = {
marker?: string;
seriesName?: string;
value?: unknown;
};
/** Подбирает подпись оси времени под текущий масштаб графика. */ /** Подбирает подпись оси времени под текущий масштаб графика. */
function formatAxisDate(value: number, spanMs?: number): string { function formatAxisDate(value: number, spanMs?: number): string {
const date = new Date(value); const date = new Date(value);
@@ -46,13 +63,155 @@ function formatAxisDate(value: number, spanMs?: number): string {
return new Intl.DateTimeFormat('ru-RU', { day: '2-digit', month: '2-digit' }).format(date); return new Intl.DateTimeFormat('ru-RU', { day: '2-digit', month: '2-digit' }).format(date);
} }
/** Рисует исторические ряды показателей через ECharts с динамической временной шкалой. */ /** Форматирует числовое значение для tooltip без лишнего шума в дробной части. */
function formatChartValue(value: number): string {
return new Intl.NumberFormat('ru-RU', {
maximumFractionDigits: Math.abs(value) >= 100 ? 2 : 3,
}).format(value);
}
/** Проверяет, что tooltip получил основную точку avg-линии, а не вспомогательную серию. */
function isAvgPointValue(value: unknown): value is AvgPointValue {
return Array.isArray(value) && value.length >= 6 && value.every((item) => typeof item === 'number');
}
/** Собирает tooltip с min/avg/max для всех серий на выбранной отметке времени. */
function formatTooltip(params: unknown): string {
const items = (Array.isArray(params) ? params : [params]).filter(
(item): item is TooltipParam => typeof item === 'object' && item !== null,
);
const avgItems = items.filter((item) => isAvgPointValue(item.value));
const firstValue = avgItems[0]?.value as AvgPointValue | undefined;
if (!firstValue) {
return '';
}
const header = new Intl.DateTimeFormat('ru-RU', {
day: '2-digit',
month: '2-digit',
year: 'numeric',
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
}).format(new Date(firstValue[0]));
const rows = avgItems.map((item) => {
const value = item.value as AvgPointValue;
return [
'<div class="chart-tooltip-row">',
`<span>${item.marker ?? ''}${item.seriesName ?? ''}</span>`,
'<strong>',
`min ${formatChartValue(value[2])} · avg ${formatChartValue(value[3])} · max ${formatChartValue(value[4])}`,
value[5] > 1 ? ` · ${value[5]} точек` : '',
'</strong>',
'</div>',
].join('');
});
return [`<div class="chart-tooltip"><div class="chart-tooltip-title">${header}</div>`, ...rows, '</div>'].join('');
}
/** Создает avg-линию, вертикальные min/max отрезки и точки экстремумов для одной серии. */
function createSeriesOptions(
series: NonNullable<HistoryResponse['series']>[number],
index: number,
label: string,
): SeriesOption[] {
const color = SERIES_COLORS[index % SERIES_COLORS.length];
const avgData: AvgPointValue[] = series.points.map((point) => [
point.t,
point.v,
point.min,
point.avg,
point.max,
point.count,
]);
const spreadData = series.points.flatMap((point) => [
[point.t, point.min],
[point.t, point.max],
[point.t, null],
]);
return [
{
name: `${label} min/max`,
type: 'line',
data: spreadData,
showSymbol: false,
connectNulls: false,
silent: true,
tooltip: { show: false },
legendHoverLink: false,
lineStyle: {
width: 1,
opacity: 0.42,
color,
},
emphasis: {
disabled: true,
},
z: 1,
},
{
name: `${label} min`,
type: 'scatter',
data: series.points.map((point) => [point.t, point.min]),
symbolSize: 4,
silent: true,
tooltip: { show: false },
itemStyle: {
color,
opacity: 0.72,
},
emphasis: {
disabled: true,
},
z: 2,
},
{
name: `${label} max`,
type: 'scatter',
data: series.points.map((point) => [point.t, point.max]),
symbolSize: 4,
silent: true,
tooltip: { show: false },
itemStyle: {
color,
opacity: 0.72,
},
emphasis: {
disabled: true,
},
z: 2,
},
{
name: label,
type: 'line',
showSymbol: false,
smooth: false,
sampling: 'lttb',
data: avgData,
lineStyle: {
width: 1.8,
color,
},
emphasis: {
focus: 'series',
},
z: 3,
},
];
}
/** Рисует исторические ряды: avg соединяется линией, min/max показываются точками и вертикальным диапазоном. */
export function HistoryChart({ data, loading, from, to, tagLabels = {} }: HistoryChartProps) { export function HistoryChart({ data, loading, from, to, tagLabels = {} }: HistoryChartProps) {
const xMin = from ? new Date(from).getTime() : undefined; const xMin = from ? new Date(from).getTime() : undefined;
const xMax = to ? new Date(to).getTime() : undefined; const xMax = to ? new Date(to).getTime() : undefined;
const xSpan = Number.isFinite(xMin) && Number.isFinite(xMax) ? Number(xMax) - Number(xMin) : undefined; const xSpan = Number.isFinite(xMin) && Number.isFinite(xMax) ? Number(xMax) - Number(xMin) : undefined;
const legendData = data?.series.map((series) => tagLabels[series.tag] ?? series.tag) ?? [];
const option = { const option: EChartsOption = {
color: SERIES_COLORS, color: SERIES_COLORS,
animation: false, animation: false,
backgroundColor: 'transparent', backgroundColor: 'transparent',
@@ -65,11 +224,12 @@ export function HistoryChart({ data, loading, from, to, tagLabels = {} }: Histor
backgroundColor: 'rgba(10, 13, 18, 0.96)', backgroundColor: 'rgba(10, 13, 18, 0.96)',
borderColor: 'rgba(212, 165, 116, 0.32)', borderColor: 'rgba(212, 165, 116, 0.32)',
textStyle: { color: '#f8fafc' }, textStyle: { color: '#f8fafc' },
valueFormatter: (value: unknown) => (typeof value === 'number' ? value.toFixed(3) : String(value)), formatter: formatTooltip,
}, },
legend: { legend: {
type: 'scroll', type: 'scroll',
top: 0, top: 0,
data: legendData,
textStyle: { color: '#cbd5e1' }, textStyle: { color: '#cbd5e1' },
}, },
grid: { grid: {
@@ -115,21 +275,9 @@ export function HistoryChart({ data, loading, from, to, tagLabels = {} }: Histor
}, },
], ],
series: series:
data?.series.map((series, index) => ({ data?.series.flatMap((series, index) =>
name: tagLabels[series.tag] ?? series.tag, createSeriesOptions(series, index, tagLabels[series.tag] ?? series.tag),
type: 'line', ) ?? [],
showSymbol: false,
smooth: false,
sampling: 'lttb',
lineStyle: {
width: 1.8,
color: SERIES_COLORS[index % SERIES_COLORS.length],
},
emphasis: {
focus: 'series',
},
data: series.points.map((point) => [point.t, point.v]),
})) ?? [],
}; };
if (loading) { if (loading) {

140
src/pages/EdgeDetailPage.tsx
View File

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

52
src/pages/EdgesDashboard.tsx
View File

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

32
src/styles/charts.css
View File

@@ -18,6 +18,38 @@
border-radius: var(--radius); border-radius: var(--radius);
} }
.chart-tooltip {
min-width: 240px;
}
.chart-tooltip-title {
margin-bottom: 8px;
color: #e5e7eb;
font-weight: 750;
}
.chart-tooltip-row {
display: grid;
grid-template-columns: minmax(90px, 1fr) auto;
align-items: center;
gap: 14px;
margin-top: 5px;
}
.chart-tooltip-row span {
min-width: 0;
overflow: hidden;
color: #cbd5e1;
text-overflow: ellipsis;
white-space: nowrap;
}
.chart-tooltip-row strong {
color: #f8fafc;
font-variant-numeric: tabular-nums;
font-weight: 650;
}
.chart-section--archive .chart-placeholder { .chart-section--archive .chart-placeholder {
flex: 1; flex: 1;
min-height: 520px; min-height: 520px;

302
src/styles/detail.css
View File

@@ -3,6 +3,33 @@
gap: 18px; gap: 18px;
} }
.current-transport {
display: inline-flex;
align-items: center;
min-height: 24px;
margin-top: 8px;
padding: 0 9px;
border: 1px solid rgba(148, 163, 184, 0.18);
border-radius: 999px;
color: var(--muted);
font-size: 0.72rem;
font-weight: 750;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.current-transport--sse {
border-color: rgba(34, 197, 94, 0.34);
background: rgba(34, 197, 94, 0.1);
color: #86efac;
}
.current-transport--polling {
border-color: rgba(245, 158, 11, 0.32);
background: rgba(245, 158, 11, 0.08);
color: #facc15;
}
.chart-section, .chart-section,
.tags-section { .tags-section {
border: 1px solid var(--line); border: 1px solid var(--line);
@@ -193,12 +220,266 @@
background: #05080d; background: #05080d;
} }
.electrical-section {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
padding: 18px;
border: 1px solid var(--line);
border-radius: var(--radius);
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.055), transparent 30%),
repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 12px),
rgba(10, 13, 18, 0.72);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.07),
0 18px 36px rgba(0, 0, 0, 0.24);
}
.electrical-toolbar {
display: flex;
align-items: end;
justify-content: flex-end;
gap: 10px;
flex-wrap: wrap;
}
.electrical-toolbar label {
min-width: 260px;
}
.electrical-live-chip--sse {
border-color: rgba(34, 197, 94, 0.34);
background: rgba(34, 197, 94, 0.1);
color: #86efac;
}
.electrical-layout {
min-height: 0;
display: grid;
grid-template-columns: minmax(0, 1fr) 220px;
gap: 14px;
flex: 1;
}
.electrical-canvas-shell {
min-width: 0;
min-height: 0;
overflow: auto;
border: 1px solid rgba(88, 103, 121, 0.5);
border-radius: 8px;
background:
linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
#070b12;
background-size: 28px 28px;
}
.electrical-canvas {
position: relative;
min-width: 100%;
min-height: 100%;
}
.electrical-background {
position: absolute;
inset: 0;
z-index: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.electrical-background--contain {
object-fit: contain;
}
.electrical-background--cover {
object-fit: cover;
}
.electrical-background--stretch {
object-fit: fill;
}
.electrical-wires {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
}
.electrical-wire {
fill: none;
stroke: #94a3b8;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
opacity: 0.9;
}
.electrical-wire--power {
stroke: #f97316;
stroke-width: 3;
}
.electrical-wire--signal {
stroke: #38bdf8;
stroke-dasharray: 8 6;
}
.electrical-wire--alert {
stroke: #ef4444;
stroke-dasharray: 5 5;
}
.electrical-wire--animated {
animation: electricalWireFlow 900ms linear infinite;
}
.electrical-node {
position: absolute;
z-index: 2;
display: grid;
grid-template-rows: auto minmax(0, 1fr) auto;
gap: 6px;
overflow: hidden;
padding: 10px;
border: 1px solid rgba(148, 163, 184, 0.34);
border-radius: 7px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.07), transparent 32%),
rgba(15, 23, 42, 0.9);
color: #e5e7eb;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.08),
0 12px 24px rgba(0, 0, 0, 0.28);
}
.electrical-node--decoration {
border-style: dashed;
background:
repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.026) 0 1px, transparent 1px 10px),
rgba(15, 23, 42, 0.74);
}
.electrical-node--active {
border-color: rgba(34, 197, 94, 0.58);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.08),
0 0 0 1px rgba(34, 197, 94, 0.2),
0 0 22px rgba(34, 197, 94, 0.16);
}
.electrical-node--alarm {
border-color: rgba(239, 68, 68, 0.76);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.08),
0 0 0 1px rgba(239, 68, 68, 0.24),
0 0 26px rgba(239, 68, 68, 0.22);
}
.electrical-node__header,
.electrical-node__footer {
display: flex;
align-items: center;
gap: 6px;
min-width: 0;
}
.electrical-node__header span,
.electrical-node__footer span,
.electrical-node__text {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.electrical-node__header {
color: #f8fafc;
font-size: 0.78rem;
font-weight: 750;
}
.electrical-node__value {
align-self: center;
min-width: 0;
overflow: hidden;
color: #f8fafc;
font-size: clamp(1.2rem, 2vw, 1.9rem);
font-variant-numeric: tabular-nums;
line-height: 1;
text-overflow: ellipsis;
white-space: nowrap;
}
.electrical-node__value small {
margin-left: 6px;
color: var(--muted);
font-size: 0.72rem;
font-weight: 650;
}
.electrical-node__text {
align-self: center;
color: #cbd5e1;
font-size: 0.9rem;
}
.electrical-node__footer {
color: var(--muted);
font-size: 0.68rem;
}
.electrical-node__alarm {
margin-left: auto;
color: #fca5a5;
}
.electrical-side-panel {
display: grid;
align-content: start;
gap: 10px;
}
.electrical-side-panel div {
min-height: 82px;
padding: 12px;
border: 1px solid rgba(88, 103, 121, 0.46);
border-radius: 8px;
background: rgba(2, 6, 23, 0.32);
}
.electrical-side-panel span {
display: block;
color: var(--muted);
font-size: 0.72rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.electrical-side-panel strong {
display: block;
margin-top: 10px;
color: #f8fafc;
font-size: 1.18rem;
line-height: 1.2;
}
@keyframes equipmentFrameSpin { @keyframes equipmentFrameSpin {
to { to {
transform: rotate(360deg); transform: rotate(360deg);
} }
} }
@keyframes electricalWireFlow {
to {
stroke-dashoffset: -28;
}
}
.section-header { .section-header {
justify-content: space-between; justify-content: space-between;
margin-bottom: 16px; margin-bottom: 16px;
@@ -394,6 +675,14 @@
grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-columns: repeat(2, minmax(0, 1fr));
} }
.electrical-layout {
grid-template-columns: 1fr;
}
.electrical-side-panel {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.tag-selector__header { .tag-selector__header {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
@@ -419,4 +708,17 @@
flex-direction: column; flex-direction: column;
align-items: stretch; align-items: stretch;
} }
.electrical-side-panel {
grid-template-columns: 1fr 1fr;
}
.electrical-toolbar {
align-items: stretch;
flex-direction: column;
}
.electrical-toolbar label {
min-width: 0;
}
} }

3
src/styles/layout.css
View File

@@ -146,7 +146,8 @@
} }
.workspace--archive, .workspace--archive,
.workspace--equipment { .workspace--equipment,
.workspace--electrical {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: auto; overflow: auto;

7
src/utils/format.ts
View File

@@ -1,7 +1,7 @@
/** Форматирует числовое значение показателя для карточек и мини-плиток. */ /** Форматирует числовое значение показателя для карточек и мини-плиток. */
export function formatNumber(value: number): string { export function formatNumber(value: number): string {
if (!Number.isFinite(value)) { if (!Number.isFinite(value)) {
return '—'; return '-';
} }
return new Intl.NumberFormat('ru-RU', { return new Intl.NumberFormat('ru-RU', {
@@ -9,11 +9,11 @@ export function formatNumber(value: number): string {
}).format(value); }).format(value);
} }
/** Приводит дату/время к короткому русскому формату для операторского интерфейса. */ /** Приводит дату и время к короткому русскому формату для операторского интерфейса. */
export function formatDateTime(value: string | number | Date): string { export function formatDateTime(value: string | number | Date): string {
const date = new Date(value); const date = new Date(value);
if (Number.isNaN(date.getTime())) { if (Number.isNaN(date.getTime())) {
return '—'; return '-';
} }
return new Intl.DateTimeFormat('ru-RU', { return new Intl.DateTimeFormat('ru-RU', {
@@ -27,7 +27,6 @@ export function formatDateTime(value: string | number | Date): string {
/** Конвертирует Date в формат, который ожидает input[type="datetime-local"]. */ /** Конвертирует Date в формат, который ожидает input[type="datetime-local"]. */
export function toInputDateTimeValue(date: Date): string { export function toInputDateTimeValue(date: Date): string {
/** Дополняет часть даты ведущим нулем для стабильного input-формата. */
const pad = (part: number) => String(part).padStart(2, '0'); const pad = (part: number) => String(part).padStart(2, '0');
return [ return [
`${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`, `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`,