Implement DDS exercise, customer UI and local demo
This commit is contained in:
andreysk0304
parent
cec84ffcd0
commit
0526b11f91
46 changed files with 2504 additions and 253 deletions
|
|
@ -5,8 +5,10 @@ import { Instructor } from "@/pages/instructor/Instructor";
|
|||
import { Dds } from "@/pages/dds/Dds";
|
||||
import { Admin } from "@/pages/admin/Admin";
|
||||
import { Profile } from "@/pages/profile/Profile";
|
||||
import { Groups } from "@/pages/groups/Groups";
|
||||
import { Wall } from "@/pages/wall/Wall";
|
||||
import { RequireAuth } from "@/features/auth/Login";
|
||||
import { DEMO_MODE } from "@/features/auth/useAuth";
|
||||
|
||||
// Четыре интерфейса — одна SPA (docs/arch/FRONTEND.md).
|
||||
// session_id живёт в URL: /instructor?session=..., монитор открывают ссылкой.
|
||||
|
|
@ -18,11 +20,12 @@ const guarded = (screen: string, element: JSX.Element) => (
|
|||
);
|
||||
|
||||
export const router = createBrowserRouter([
|
||||
{ path: "/", element: <Navigate to="/trainee" replace /> },
|
||||
{ path: "/", element: <Navigate to={DEMO_MODE ? "/instructor" : "/trainee"} replace /> },
|
||||
{ path: "/trainee", element: guarded("/trainee", <Call />) },
|
||||
{ path: "/instructor", element: guarded("/instructor", <Instructor />) },
|
||||
{ path: "/wall", element: guarded("/wall", <Wall />) },
|
||||
{ path: "/profile", element: guarded("/profile", <Profile />) },
|
||||
{ path: "/groups", element: guarded("/groups", <Groups />) },
|
||||
{ path: "/dds", element: guarded("/dds", <Dds />) },
|
||||
{ path: "/admin", element: guarded("/admin", <Admin />) },
|
||||
]);
|
||||
|
|
|
|||
|
|
@ -1,9 +1,32 @@
|
|||
// Экран входа. Ставится перед всеми остальными: номер занятия перестал быть
|
||||
// пропуском, по ссылке пускает роль, а не знание адреса (lct-23).
|
||||
|
||||
import { useState, type ReactNode } from "react";
|
||||
import { useState, type MouseEvent, type ReactNode } from "react";
|
||||
|
||||
import { SCREENS, useLogin, useLogout, useMe } from "./useAuth";
|
||||
import { DEMO_MODE, SCREENS, useDemoLogin, useLogin, useLogout, useMe } from "./useAuth";
|
||||
|
||||
function DemoLinks() {
|
||||
const openScreen = (event: MouseEvent<HTMLAnchorElement>, path: string) => {
|
||||
event.preventDefault();
|
||||
const current = new URLSearchParams(window.location.search);
|
||||
const session = current.get("session") || window.sessionStorage.getItem("demo_session");
|
||||
if (session) window.sessionStorage.setItem("demo_session", session);
|
||||
const target = new URL(path, window.location.origin);
|
||||
if (session) target.searchParams.set("session", session);
|
||||
if (path === "/dds") target.searchParams.set("role", current.get("role") || "dds_01");
|
||||
window.location.assign(target.pathname + target.search);
|
||||
};
|
||||
|
||||
return <nav className="demo-switcher" aria-label="Демо-переходы между АРМ">
|
||||
<details><summary>Демо · экраны</summary>
|
||||
<div>
|
||||
<a href="/instructor" onClick={(event) => openScreen(event, "/instructor")}>Преподаватель</a>
|
||||
<a href="/trainee" onClick={(event) => openScreen(event, "/trainee")}>Оператор 112</a>
|
||||
<a href="/dds" onClick={(event) => openScreen(event, "/dds")}>ДДС</a>
|
||||
</div>
|
||||
</details>
|
||||
</nav>;
|
||||
}
|
||||
|
||||
export function RequireAuth({ screen, children }: { screen: string; children: ReactNode }) {
|
||||
const me = useMe();
|
||||
|
|
@ -14,7 +37,9 @@ export function RequireAuth({ screen, children }: { screen: string; children: Re
|
|||
}
|
||||
if (!me.data) return <Login />;
|
||||
|
||||
const allowed = SCREENS[me.data.role] ?? [];
|
||||
const demoUser = DEMO_MODE && ["dev", "demo-instructor"].includes(me.data.login)
|
||||
&& me.data.role === "instructor";
|
||||
const allowed = [...(SCREENS[me.data.role] ?? []), ...(demoUser ? ["/trainee"] : [])];
|
||||
if (!allowed.includes(screen)) {
|
||||
return (
|
||||
<main className="page">
|
||||
|
|
@ -27,11 +52,12 @@ export function RequireAuth({ screen, children }: { screen: string; children: Re
|
|||
</main>
|
||||
);
|
||||
}
|
||||
return <>{children}</>;
|
||||
return <>{children}{demoUser && <DemoLinks />}</>;
|
||||
}
|
||||
|
||||
function Login() {
|
||||
const login = useLogin();
|
||||
const demoLogin = useDemoLogin();
|
||||
const [name, setName] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
|
||||
|
|
@ -70,6 +96,17 @@ function Login() {
|
|||
</button>
|
||||
</p>
|
||||
</form>
|
||||
{DEMO_MODE && <div className="demo-login">
|
||||
<p>Локальный деморежим: вход без учётной записи доступен только при включённом обходе авторизации на backend.</p>
|
||||
<button type="button" disabled={demoLogin.isPending} onClick={() => demoLogin.mutate()}>
|
||||
{demoLogin.isPending ? "Входим…" : "Войти в демо одним нажатием"}
|
||||
</button>
|
||||
{demoLogin.isError && <p className="warn" role="alert">
|
||||
{demoLogin.error instanceof Error && demoLogin.error.message === "404"
|
||||
? "Демо-вход выключен на сервере: запустите backend с DEV_AUTH_BYPASS=true."
|
||||
: "Не удалось выполнить демо-вход. Проверьте подключение к локальному backend."}
|
||||
</p>}
|
||||
</div>}
|
||||
{/* Причину отказа не уточняем: «нет такого логина» — это список
|
||||
действующих учётных записей для того, кто подбирает. */}
|
||||
{login.isError && <p className="warn">Логин или пароль неверны</p>}
|
||||
|
|
|
|||
|
|
@ -5,6 +5,10 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
|||
|
||||
import type { Role } from "@/shared/types/generated";
|
||||
|
||||
// Vite подставляет значение при сборке. В обычном стенде демо-вход и его
|
||||
// элементы интерфейса отсутствуют, даже если backend поддерживает endpoint.
|
||||
export const DEMO_MODE = import.meta.env.VITE_DEMO_MODE === "true";
|
||||
|
||||
export interface Principal {
|
||||
login: string;
|
||||
full_name: string;
|
||||
|
|
@ -47,6 +51,17 @@ export function useLogin() {
|
|||
});
|
||||
}
|
||||
|
||||
export function useDemoLogin() {
|
||||
const cache = useQueryClient();
|
||||
return useMutation({
|
||||
mutationFn: () => {
|
||||
if (!DEMO_MODE) throw new Error("demo_disabled");
|
||||
return call<Principal>("/api/auth/dev-token", { method: "POST" });
|
||||
},
|
||||
onSuccess: (who) => cache.setQueryData(["me"], who),
|
||||
});
|
||||
}
|
||||
|
||||
export function useLogout() {
|
||||
const cache = useQueryClient();
|
||||
return useMutation({
|
||||
|
|
@ -58,7 +73,7 @@ export function useLogout() {
|
|||
/** Какие экраны открыты роли. Повторяет domain/roles.py: список короткий
|
||||
* и меняется редко, а держать его на сервере ради двух строк — лишний запрос. */
|
||||
export const SCREENS: Record<Role, string[]> = {
|
||||
admin: ["/admin", "/profile"],
|
||||
instructor: ["/instructor", "/wall", "/profile", "/dds"],
|
||||
admin: ["/admin", "/profile", "/groups"],
|
||||
instructor: ["/instructor", "/wall", "/profile", "/dds", "/groups"],
|
||||
trainee: ["/trainee", "/dds", "/profile"],
|
||||
};
|
||||
|
|
|
|||
|
|
@ -11,6 +11,10 @@ export function StandStatus() {
|
|||
}
|
||||
if (!health.data) return null;
|
||||
|
||||
if (health.data.demo_no_db) {
|
||||
return <div className="stand stand-warn">Локальная демка: карточки 112 и ДДС работают без БД и голоса; история занятий не сохраняется.</div>;
|
||||
}
|
||||
|
||||
const troubles: string[] = [];
|
||||
if (!health.data.models_ready) troubles.push("голосовой контур выключен: звонок будет без звука");
|
||||
if (!health.data.embeddings_ready) troubles.push("нет модели эмбеддингов: подсказки идут по порядку чек-листа");
|
||||
|
|
|
|||
|
|
@ -167,7 +167,7 @@ export function ScenarioEditor({
|
|||
</div>
|
||||
{draft && (
|
||||
<>
|
||||
<p className="ref">Черновик {draft.id}. Факты и эталон доступны только преподавателю до утверждения.</p>
|
||||
<p className="ref">Черновик {draft.id}. Факты и эталон доступны только преподавателю до утверждения. Поле score_weights позволяет задать веса метрик (0–10), например {"{\"address\": 3, \"dds_ack\": 2}"}.</p>
|
||||
<label className="scenario-editor-json">JSON тела сценария
|
||||
<textarea value={bodyText} onChange={(event) => { setBodyText(event.target.value); setValidation(null); }} spellCheck={false} />
|
||||
</label>
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ export function useControl(sessionId: string | null) {
|
|||
}, [sessionId]);
|
||||
|
||||
const start = useCallback(
|
||||
(scenarioId: string, mode: SessionMode, trainee: string, exercise: "dds" | "call" | "card" = "dds", group?: string, traineeId?: string) => {
|
||||
(scenarioId: string, mode: SessionMode, trainee: string, exercise: "dds" | "call" | "card" = "dds", group?: string, traineeId?: string, scenarioIds?: string[]) => {
|
||||
const message = {
|
||||
type: "scenario.start",
|
||||
scenario_id: scenarioId,
|
||||
|
|
@ -34,6 +34,7 @@ export function useControl(sessionId: string | null) {
|
|||
group_id: group || null,
|
||||
trainee_id: traineeId || null,
|
||||
exercise,
|
||||
scenario_ids: scenarioIds?.length ? scenarioIds : undefined,
|
||||
} as const;
|
||||
channel.current?.send(message);
|
||||
},
|
||||
|
|
|
|||
|
|
@ -3,95 +3,124 @@
|
|||
|
||||
import { useSigns } from "@/shared/api/http";
|
||||
import { type CardState, display } from "./merge";
|
||||
import { type Field, visibleGroups } from "./fields";
|
||||
import { type Field, type FieldGroup, visibleGroups } from "./fields";
|
||||
|
||||
interface Props {
|
||||
state: CardState;
|
||||
/** Обязательные поля приходят сценарием в `call.incoming`. */
|
||||
required?: string[];
|
||||
readOnly?: boolean;
|
||||
referenceArm?: boolean;
|
||||
onChange?: (path: string, value: unknown) => void;
|
||||
}
|
||||
|
||||
export function KioCard({ state, required = [], readOnly = false, onChange }: Props) {
|
||||
export function KioCard({ state, required = [], readOnly = false, referenceArm = false, onChange }: Props) {
|
||||
const dds = display(state, "dds") as string | null;
|
||||
const groups = visibleGroups(dds);
|
||||
const section = (group: FieldGroup) => (
|
||||
<section className={`kio-arm-section kio-arm-${group.area}`} key={group.title}>
|
||||
{(!referenceArm || group.area !== "header") && <div className="kio-arm-section-title">{group.title}</div>}
|
||||
<div className="kio-arm-fields">
|
||||
{(referenceArm && group.area === "incident"
|
||||
? [...group.fields].sort((a, b) => Number(b.path === "incident_type") - Number(a.path === "incident_type"))
|
||||
: group.fields).map((field) => (
|
||||
<Row
|
||||
key={field.path}
|
||||
field={field}
|
||||
value={display(state, field.path)}
|
||||
pending={field.path in state.pending}
|
||||
required={required.includes(field.path)}
|
||||
readOnly={readOnly || field.readOnly}
|
||||
referenceArm={referenceArm}
|
||||
onChange={onChange}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="kio">
|
||||
{visibleGroups(dds).map((group) => (
|
||||
<table className="grid" key={group.title}>
|
||||
<thead>
|
||||
<tr>
|
||||
<th colSpan={2}>{group.title}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{group.fields.map((field) => (
|
||||
<Row
|
||||
key={field.path}
|
||||
field={field}
|
||||
value={display(state, field.path)}
|
||||
pending={field.path in state.pending}
|
||||
required={required.includes(field.path)}
|
||||
readOnly={readOnly || field.readOnly}
|
||||
onChange={onChange}
|
||||
/>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
))}
|
||||
<div className={`kio-arm${referenceArm ? " kio-arm-ref" : ""}`}>
|
||||
<div className="kio-arm-top">
|
||||
{groups.filter((group) => group.title === "Звонящий").map(section)}
|
||||
{groups.filter((group) => group.title === "Служебное").map(section)}
|
||||
</div>
|
||||
<div className="kio-arm-main">
|
||||
<div className="kio-arm-left">{groups.filter((group) => group.area === "address" || group.area === "description").map(section)}</div>
|
||||
<div className="kio-arm-right">{groups.filter((group) => group.area === "incident" || group.area === "dispatch" || group.area === "details").map(section)}</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Row({
|
||||
field, value, pending, required, readOnly, onChange,
|
||||
field, value, pending, required, readOnly, referenceArm, onChange,
|
||||
}: {
|
||||
field: Field;
|
||||
value: unknown;
|
||||
pending: boolean;
|
||||
required: boolean;
|
||||
readOnly?: boolean;
|
||||
referenceArm: boolean;
|
||||
onChange?: (path: string, value: unknown) => void;
|
||||
}) {
|
||||
const empty = value === null || value === undefined || value === "";
|
||||
const empty = value === null || value === undefined || value === "" || (Array.isArray(value) && value.length === 0);
|
||||
return (
|
||||
<tr>
|
||||
<th>
|
||||
{field.label}
|
||||
<div className={`kio-arm-row kio-arm-row-${field.path.replaceAll(".", "-")}${required && empty ? " kio-arm-missing" : ""}${pending ? " kio-arm-pending" : ""}`}>
|
||||
<div className="kio-arm-label">
|
||||
{referenceArm && field.path === "incident_type" ? "Что случилось?"
|
||||
: referenceArm && field.path === "caller_number" ? "АОН"
|
||||
: referenceArm && field.path === "caller_contact" ? "Предоставленный"
|
||||
: referenceArm && field.path === "caller_name" ? "Фамилия и имя заявителя"
|
||||
: field.label}
|
||||
{required && <span title="обязательное поле" className="required"> ·</span>}
|
||||
</th>
|
||||
<td className={required && empty ? "warn" : pending ? "pending" : ""}>
|
||||
</div>
|
||||
<div className="kio-arm-value">
|
||||
{readOnly ? (
|
||||
<span>{formatValue(value)}</span>
|
||||
<span className="kio-arm-readonly">{formatValue(value, field)}</span>
|
||||
) : (
|
||||
<Input field={field} value={value} onChange={onChange} />
|
||||
<Input field={field} value={value} referenceArm={referenceArm} onChange={onChange} />
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Input({
|
||||
field, value, onChange,
|
||||
field, value, referenceArm, onChange,
|
||||
}: {
|
||||
field: Field;
|
||||
value: unknown;
|
||||
referenceArm: boolean;
|
||||
onChange?: (path: string, value: unknown) => void;
|
||||
}) {
|
||||
const emit = (next: unknown) => onChange?.(field.path, next);
|
||||
|
||||
if (field.kind === "list") {
|
||||
return <span>{formatValue(value)}</span>;
|
||||
return <span className="kio-arm-readonly">{formatValue(value)}</span>;
|
||||
}
|
||||
if (field.kind === "bool") {
|
||||
return (
|
||||
<input type="checkbox" checked={value === true} onChange={(e) => emit(e.target.checked)} />
|
||||
<div className="kio-arm-choice" role="group" aria-label={field.label}>
|
||||
<button type="button" aria-pressed={value === true} className={value === true ? "kio-arm-selected" : ""} onClick={() => emit(true)}>Да</button>
|
||||
<button type="button" aria-pressed={value === false} className={value === false ? "kio-arm-selected" : ""} onClick={() => emit(false)}>Нет</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
if (field.kind === "select") {
|
||||
if (referenceArm && field.path === "incident_type") {
|
||||
return (
|
||||
<div className="kio-arm-type-picker" role="group" aria-label="Что случилось?">
|
||||
{field.options?.map((option) => (
|
||||
<button type="button" key={option.value} aria-pressed={value === option.value}
|
||||
className={value === option.value ? "kio-arm-selected" : ""}
|
||||
onClick={() => emit(option.value)}>{option.label}</button>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<select value={(value as string) ?? ""} onChange={(e) => emit(e.target.value || null)}>
|
||||
<select aria-label={field.label} value={(value as string) ?? ""} onChange={(e) => emit(e.target.value || null)}>
|
||||
<option value="">—</option>
|
||||
{field.options?.map((option) => (
|
||||
<option key={option.value} value={option.value}>{option.label}</option>
|
||||
|
|
@ -102,10 +131,14 @@ function Input({
|
|||
if (field.kind === "signs") {
|
||||
return <SignsPicker value={(value as string[]) ?? []} onChange={(next) => emit(next)} />;
|
||||
}
|
||||
if (field.kind === "textarea") {
|
||||
return <textarea aria-label={field.label} rows={5} value={(value as string) ?? ""} placeholder="Введите сведения со слов заявителя" onChange={(e) => emit(e.target.value)} />;
|
||||
}
|
||||
if (field.kind === "number") {
|
||||
return (
|
||||
<input
|
||||
type="number"
|
||||
aria-label={field.label}
|
||||
min={0}
|
||||
value={value === null || value === undefined ? "" : String(value)}
|
||||
onChange={(e) => {
|
||||
|
|
@ -120,7 +153,7 @@ function Input({
|
|||
);
|
||||
}
|
||||
return (
|
||||
<input type="text" value={(value as string) ?? ""} onChange={(e) => emit(e.target.value)} />
|
||||
<input type="text" aria-label={field.label} value={(value as string) ?? ""} onChange={(e) => emit(e.target.value)} />
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -152,6 +185,9 @@ function SignsPicker({
|
|||
}}
|
||||
/>
|
||||
))}
|
||||
{value.length > 0 && <div className="signs-selected" aria-label="Выбранные признаки">
|
||||
{value.map((sign, index) => <span key={`${index}-${sign}`}>{sign}</span>)}
|
||||
</div>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -168,7 +204,7 @@ function SignSelect({
|
|||
// Уровня может не быть: часть происшествий классифицируется двумя признаками.
|
||||
if (!page.isLoading && values.length === 0) return null;
|
||||
return (
|
||||
<select value={chosen} onChange={(e) => onPick(e.target.value)} disabled={page.isLoading}>
|
||||
<select aria-label={`Признак происшествия ${prefix.length + 1}`} value={chosen} onChange={(e) => onPick(e.target.value)} disabled={page.isLoading}>
|
||||
<option value="">—</option>
|
||||
{values.map((sign) => (
|
||||
<option key={sign} value={sign}>{sign}</option>
|
||||
|
|
@ -177,10 +213,11 @@ function SignSelect({
|
|||
);
|
||||
}
|
||||
|
||||
function formatValue(value: unknown): string {
|
||||
function formatValue(value: unknown, field?: Field): string {
|
||||
if (value === true) return "да";
|
||||
if (value === false) return "нет";
|
||||
if (Array.isArray(value)) return value.length ? value.join(", ") : "—";
|
||||
if (value === null || value === undefined || value === "") return "—";
|
||||
if (field?.options) return field.options.find((option) => option.value === value)?.label ?? String(value);
|
||||
return String(value);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
|
||||
import type { DDSCode, IncidentType } from "@/shared/types/generated";
|
||||
|
||||
export type FieldKind = "text" | "number" | "bool" | "select" | "signs" | "list";
|
||||
export type FieldKind = "text" | "textarea" | "number" | "bool" | "select" | "signs" | "list";
|
||||
|
||||
export interface Field {
|
||||
/** Путь в карточке: «floor», «fire.floors» — так же, как в `kio.patch`. */
|
||||
|
|
@ -21,6 +21,9 @@ export interface Field {
|
|||
export interface FieldGroup {
|
||||
title: string;
|
||||
fields: Field[];
|
||||
/** Рабочие зоны карточки 112: плотная шапка, адрес и описание слева,
|
||||
* классификация и маршрутизация справа. */
|
||||
area: "header" | "address" | "description" | "incident" | "dispatch" | "details";
|
||||
/** Группа показывается только для этой службы. */
|
||||
dds?: DDSCode;
|
||||
}
|
||||
|
|
@ -45,6 +48,7 @@ const DDS: { value: DDSCode; label: string }[] = [
|
|||
export const GROUPS: FieldGroup[] = [
|
||||
{
|
||||
title: "Служебное",
|
||||
area: "header",
|
||||
fields: [
|
||||
{ path: "registered_at", label: "Время регистрации", kind: "text", readOnly: true },
|
||||
{ path: "response_status", label: "Статус реагирования", kind: "text", readOnly: true },
|
||||
|
|
@ -52,6 +56,7 @@ export const GROUPS: FieldGroup[] = [
|
|||
},
|
||||
{
|
||||
title: "Звонящий",
|
||||
area: "header",
|
||||
fields: [
|
||||
{ path: "caller_number", label: "Номер телефона", kind: "text", readOnly: true },
|
||||
{ path: "caller_name", label: "ФИО", kind: "text" },
|
||||
|
|
@ -61,6 +66,7 @@ export const GROUPS: FieldGroup[] = [
|
|||
},
|
||||
{
|
||||
title: "Место",
|
||||
area: "address",
|
||||
fields: [
|
||||
{ path: "okato", label: "ОКАТО", kind: "text" },
|
||||
{ path: "address", label: "Адрес", kind: "text" },
|
||||
|
|
@ -71,15 +77,22 @@ export const GROUPS: FieldGroup[] = [
|
|||
{ path: "intercom_code", label: "Код домофона", kind: "text" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Описание со слов заявителя",
|
||||
area: "description",
|
||||
fields: [
|
||||
{ path: "description", label: "Описание", kind: "textarea" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Происшествие",
|
||||
area: "incident",
|
||||
fields: [
|
||||
// Признаки по ЕКП — то, что оператор действительно проставляет.
|
||||
// Код и список оповещения считает сервер (docs/spec/DATASET.md).
|
||||
{ path: "signs", label: "Признаки происшествия", kind: "signs" },
|
||||
{ path: "incident_code", label: "Код ЕКП", kind: "text", readOnly: true },
|
||||
{ path: "incident_type", label: "Тип происшествия", kind: "select", options: INCIDENT },
|
||||
{ path: "description", label: "Описание", kind: "text" },
|
||||
{ path: "victims_count", label: "Пострадавших", kind: "number" },
|
||||
{ path: "is_emergency", label: "Признак ЧС", kind: "bool" },
|
||||
{ path: "life_threat", label: "Угроза жизни", kind: "bool" },
|
||||
|
|
@ -88,6 +101,7 @@ export const GROUPS: FieldGroup[] = [
|
|||
},
|
||||
{
|
||||
title: "Дежурно-диспетчерская служба",
|
||||
area: "dispatch",
|
||||
fields: [
|
||||
// Список оповещения оператор не выбирает: он производен от признаков.
|
||||
{ path: "notify", label: "Список оповещения", kind: "list", readOnly: true },
|
||||
|
|
@ -98,6 +112,7 @@ export const GROUPS: FieldGroup[] = [
|
|||
},
|
||||
{
|
||||
title: "Уточнения: пожар",
|
||||
area: "details",
|
||||
dds: "01",
|
||||
fields: [
|
||||
{ path: "fire.fire_nature", label: "Характер пожара", kind: "text" },
|
||||
|
|
@ -110,6 +125,7 @@ export const GROUPS: FieldGroup[] = [
|
|||
},
|
||||
{
|
||||
title: "Уточнения: полиция",
|
||||
area: "details",
|
||||
dds: "02",
|
||||
fields: [
|
||||
{ path: "police.offence_kind", label: "Вид правонарушения", kind: "text" },
|
||||
|
|
@ -120,6 +136,7 @@ export const GROUPS: FieldGroup[] = [
|
|||
},
|
||||
{
|
||||
title: "Уточнения: медицина",
|
||||
area: "details",
|
||||
dds: "03",
|
||||
fields: [
|
||||
{ path: "medical.reason", label: "Повод к вызову", kind: "text" },
|
||||
|
|
@ -131,6 +148,7 @@ export const GROUPS: FieldGroup[] = [
|
|||
},
|
||||
{
|
||||
title: "Уточнения: ЖКХ и прочие",
|
||||
area: "details",
|
||||
dds: "gkh",
|
||||
fields: [
|
||||
{ path: "utility.failure_kind", label: "Тип аварии", kind: "text" },
|
||||
|
|
|
|||
|
|
@ -12,12 +12,17 @@ import { ALARMING, CARD_STATUS_LABELS, SERVICE_STATUS_LABELS } from "./statuses"
|
|||
const ACK_LIMIT_S = 30;
|
||||
type ReportPhase = "dispatched" | "arrived" | "working" | "completed";
|
||||
interface PhoneReport { service: string; crew: string; phase: ReportPhase; text: string; at: string }
|
||||
interface CompletedCard { card_id: string; scenario_id: string; score_auto: number }
|
||||
interface DdsSnapshot extends StationSnapshot {
|
||||
crew_options?: string[];
|
||||
crew_selected?: string | null;
|
||||
phone_reports?: PhoneReport[];
|
||||
card_id?: string | null;
|
||||
card_index?: number;
|
||||
card_total?: number;
|
||||
reply_text?: string;
|
||||
completed_cards?: CompletedCard[];
|
||||
}
|
||||
type DdsCommand = { type: "crew.select"; crew: string } | { type: "phone.dial" } | { type: "station.finish" };
|
||||
const REPORT_LABELS: Record<ReportPhase, string> = {
|
||||
dispatched: "Доклад о выезде", arrived: "Доклад о прибытии",
|
||||
working: "Доклад о ходе работ", completed: "Доклад о завершении работ",
|
||||
|
|
@ -35,10 +40,19 @@ function time(value: string): string {
|
|||
return Number.isNaN(parsed.getTime()) ? value : parsed.toLocaleTimeString("ru-RU");
|
||||
}
|
||||
|
||||
function serviceTitle(service: string): string {
|
||||
return service.startsWith("Служба ") ? service : `Служба ${service}`;
|
||||
}
|
||||
|
||||
export function Dds() {
|
||||
const sessionId = sessionIdFromUrl();
|
||||
const role = new URLSearchParams(location.search).get("role") ?? "dds_01";
|
||||
const [status, setStatus] = useState<ChannelStatus>("connecting");
|
||||
const [view, setView] = useState<"registry" | "card">("registry");
|
||||
const [pane, setPane] = useState<"status" | "phone" | "reply" | "full" | "journal" | "more" | null>(null);
|
||||
const [activeService, setActiveService] = useState<string | null>(null);
|
||||
const [search, setSearch] = useState("");
|
||||
const [clockNow, setClockNow] = useState(() => new Date());
|
||||
const [card, setCard] = useState<CardState | null>(null);
|
||||
const [from, setFrom] = useState("");
|
||||
const [receivedAt, setReceivedAt] = useState<number | null>(null);
|
||||
|
|
@ -55,7 +69,10 @@ export function Dds() {
|
|||
const [bounceComment, setBounceComment] = useState("");
|
||||
const [bounced, setBounced] = useState(false);
|
||||
const [zone, setZone] = useState<boolean | null>(null);
|
||||
const [reply, setReply] = useState({ text: "", dirty: false });
|
||||
const [advancePending, setAdvancePending] = useState(false);
|
||||
const channel = useRef<ReturnType<typeof stationChannel> | null>(null);
|
||||
const activeCardId = useRef<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!sessionId) return;
|
||||
|
|
@ -84,20 +101,49 @@ export function Dds() {
|
|||
const ch = stationChannel(sessionId, role, {
|
||||
onStatus: (next) => { setStatus(next); if (next !== "open") setDialing(false); },
|
||||
onEvent: (event) => {
|
||||
if (event.type === "station.state") { setStation(event.snapshot as DdsSnapshot); setError(""); }
|
||||
if (event.type === "station.state") {
|
||||
const snapshot = event.snapshot as DdsSnapshot;
|
||||
setStation(snapshot);
|
||||
setActiveService((previous) => previous && snapshot.services.includes(previous)
|
||||
? previous : snapshot.services[0] ?? null);
|
||||
setReply((previous) => {
|
||||
const saved = snapshot.reply_text ?? "";
|
||||
if (previous.text === saved) return { text: saved, dirty: false };
|
||||
return previous.dirty ? previous : { text: saved, dirty: false };
|
||||
});
|
||||
setError("");
|
||||
}
|
||||
else if (event.type === "card.received") {
|
||||
setCard(applyState(emptyCard, event.card as unknown as Record<string, unknown>));
|
||||
const nextId = String(event.card.card_id);
|
||||
if (activeCardId.current !== nextId) {
|
||||
activeCardId.current = nextId;
|
||||
setStation(null);
|
||||
setReply({ text: "", dirty: false });
|
||||
setLastReport(null);
|
||||
setDialing(false);
|
||||
setMissing([]);
|
||||
setBounceComment("");
|
||||
setBounced(false);
|
||||
setZone(null);
|
||||
setReport(null);
|
||||
setReportState("idle");
|
||||
setView("registry");
|
||||
setPane(null);
|
||||
setActiveService(null);
|
||||
}
|
||||
setCard(applyState(emptyCard, { ...event.card }));
|
||||
setFrom(event.from_operator);
|
||||
// Норматив идёт с передачи карточки сервером, в том числе если
|
||||
// диспетчер открыл АРМ уже после начала занятия.
|
||||
const transmittedAt = new Date(event.at).getTime();
|
||||
setReceivedAt(Number.isNaN(transmittedAt) ? Date.now() : transmittedAt);
|
||||
setEnded(false);
|
||||
} else if (event.type === "error") { setError(event.message); setDialing(false); }
|
||||
else if (event.type === "session.ended") { setEnded(true); setDialing(false); }
|
||||
setAdvancePending(false);
|
||||
} else if (event.type === "error") { setError(event.message); setDialing(false); setAdvancePending(false); }
|
||||
else if (event.type === "session.ended") { setEnded(true); setDialing(false); setAdvancePending(false); setPane(null); setView("registry"); }
|
||||
else if (event.type === "score.ready") { void loadReport(); }
|
||||
else if ((event as { type: string }).type === "phone.report") {
|
||||
setLastReport(event as unknown as PhoneReport);
|
||||
else if (event.type === "phone.report") {
|
||||
setLastReport(event);
|
||||
setDialing(false);
|
||||
setError("");
|
||||
}
|
||||
|
|
@ -116,7 +162,12 @@ export function Dds() {
|
|||
return () => clearInterval(timer);
|
||||
}, [receivedAt, primaryRecorded]);
|
||||
|
||||
const send = (command: DdsCommand): boolean => channel.current?.send(command as StationToServer) ?? false;
|
||||
useEffect(() => {
|
||||
const timer = setInterval(() => setClockNow(new Date()), 1000);
|
||||
return () => clearInterval(timer);
|
||||
}, []);
|
||||
|
||||
const send = (command: StationToServer): boolean => channel.current?.send(command) ?? false;
|
||||
if (!sessionId) return <main className="page"><h1>АРМ диспетчера ДДС</h1>
|
||||
<p className="warn">Откройте ссылку занятия вида /dds?session=…&role=dds_01</p></main>;
|
||||
|
||||
|
|
@ -124,15 +175,29 @@ export function Dds() {
|
|||
const selectedCrew = station?.crew_selected ?? "";
|
||||
const latest = lastReport ?? reports.at(-1) ?? null;
|
||||
const isConnected = status === "open";
|
||||
const cardId = card ? String(readPath(card.server, "card_id") ?? "") : "";
|
||||
const cardIndex = station?.card_index ?? 1;
|
||||
const cardTotal = station?.card_total ?? 1;
|
||||
const completedCards = station?.completed_cards ?? [];
|
||||
const activeIsCompleted = completedCards.some((item) => item.card_id === cardId);
|
||||
const query = search.trim().toLocaleLowerCase("ru-RU");
|
||||
const visibleCompletedCards = completedCards.filter((item) =>
|
||||
!query || `${item.card_id} ${item.scenario_id}`.toLocaleLowerCase("ru-RU").includes(query));
|
||||
const showActive = card && !activeIsCompleted && (!query ||
|
||||
[cardId, field(card, "address"), field(card, "description"), field(card, "incident_type")]
|
||||
.some((value) => value.toLocaleLowerCase("ru-RU").includes(query)));
|
||||
const crewAccepted = Boolean(station?.services.some((service) =>
|
||||
selectedCrew.startsWith(`${service} —`) &&
|
||||
["accepted", "responding", "arrived", "working"].includes(station.statuses[service])));
|
||||
|
||||
return <main className="page dds-workspace">
|
||||
<header className="dds-header"><div><div className="dds-eyebrow">Учебный контур · АРМ системы-112</div>
|
||||
<h1>Дежурно-диспетчерская служба <span>{role}</span></h1></div>
|
||||
<div className={`dds-connection ${isConnected ? "state-ok" : "state-warn"}`}>
|
||||
{isConnected ? "● Канал подключён" : `● ${status}`}</div></header>
|
||||
<header className="dds-app-top">
|
||||
<span className="dds-brand">112</span>
|
||||
<span className="dds-app-name">ГБУ Система 112 · учебное АРМ ДДС</span>
|
||||
<span className="dds-top-role">{role}</span>
|
||||
<span className={`dds-connection ${isConnected ? "state-ok" : "state-warn"}`}>
|
||||
{isConnected ? "● На связи" : `● ${status}`}</span>
|
||||
</header>
|
||||
{error && <div className="dds-alert" role="alert">Действие не принято: {error}</div>}
|
||||
{ended && <div className="dds-alert dds-done">Занятие завершено. Оценка появится после расчёта.</div>}
|
||||
{(ended || reportState !== "idle") && <section className="dds-panel" aria-live="polite">
|
||||
|
|
@ -142,6 +207,17 @@ export function Dds() {
|
|||
{report.score_final !== report.score_auto && ` · автооценка ${report.score_auto.toFixed(0)}`}</p>
|
||||
<p className="ref">Скачать отчёт: <a href={`/api/sessions/${sessionId}/report.csv`}>CSV</a>
|
||||
{" · "}<a href={`/api/sessions/${sessionId}/report.pdf`}>PDF</a></p>
|
||||
{Boolean(report.card_results?.length) && <>
|
||||
<h3>Результаты по карточкам</h3>
|
||||
{report.card_results?.map((item, index) => <details className="dds-details" key={item.card_id}>
|
||||
<summary>Карточка {index + 1} · {item.scenario_id} · {item.score_auto.toFixed(0)} / 100</summary>
|
||||
<p><b>Ответ диспетчера:</b> {item.reply_text || "не внесён"}</p>
|
||||
{item.metrics.filter((metric) => !metric.passed).map((metric) =>
|
||||
<p key={metric.key} className="state-violated">{metric.title}: {metric.fact} · норматив {metric.norm}</p>)}
|
||||
{item.findings.map((finding, findingIndex) =>
|
||||
<p key={`${finding.code}-${findingIndex}`}>{finding.code}: {finding.summary}</p>)}
|
||||
</details>)}
|
||||
</>}
|
||||
<h3>Не выполнены нормативы</h3>
|
||||
<table className="dds-registry"><tbody>
|
||||
{report.metrics.filter((metric) => !metric.passed).map((metric) => <tr key={metric.key}>
|
||||
|
|
@ -172,20 +248,81 @@ export function Dds() {
|
|||
</div>}
|
||||
</section>}
|
||||
|
||||
<section className="dds-panel"><div className="dds-panel-title"><h2>Реестр обращений</h2><span>Входящие карточки</span></div>
|
||||
<div className="dds-table-wrap"><table className="dds-registry"><thead><tr>
|
||||
<th>№ карточки</th><th>Время</th><th>Адрес происшествия</th><th>Тип</th><th>Службы</th><th>Статус</th><th>Решение ДДС</th>
|
||||
</tr></thead><tbody>{card ? <tr className="dds-selected">
|
||||
<td>{sessionId.slice(0, 8).toUpperCase()}</td><td>{time(field(card, "registered_at"))}</td>
|
||||
<td>{field(card, "address")}</td><td>{field(card, "incident_type")}</td>
|
||||
<td>{station?.services.join(", ") || field(card, "notify")}</td>
|
||||
<td>{station ? CARD_STATUS_LABELS[station.card] : "Получена"}</td>
|
||||
<td>{station?.services.map((service) => `${service}: ${SERVICE_STATUS_LABELS[station.statuses[service]]}`).join("; ") || "ожидается"}</td>
|
||||
</tr> : <tr><td colSpan={7} className="dds-empty">Ожидание готовой карточки от преподавателя или оператора 112…</td></tr>}</tbody></table></div>
|
||||
{view === "registry" && <>
|
||||
<section className="dds-search">
|
||||
<div className="dds-search-main">
|
||||
<h1>Поиск происшествий</h1>
|
||||
<div className="dds-search-line"><label htmlFor="dds-search-input">Поиск по номеру, адресу или описанию</label>
|
||||
<input id="dds-search-input" type="search" value={search} onChange={(event) => setSearch(event.target.value)}
|
||||
placeholder="Введите номер или адрес" />
|
||||
<button type="button" onClick={() => setSearch("")}>сбросить</button></div>
|
||||
</div>
|
||||
<div className="dds-clock"><small>{clockNow.toLocaleDateString("ru-RU", { weekday: "long", day: "numeric", month: "long", year: "numeric" })}</small>
|
||||
<strong>{clockNow.toLocaleTimeString("ru-RU")}</strong><span>Учебный контур</span></div>
|
||||
</section>
|
||||
<section className="dds-panel dds-register-panel"><div className="dds-panel-title"><h2>Список происшествий⌃</h2>
|
||||
<span>Карточка {cardIndex} из {cardTotal} · обработано {completedCards.length}</span></div>
|
||||
<div className="dds-table-wrap"><table className="dds-registry"><thead><tr>
|
||||
<th>Связи</th><th>ЧС</th><th>Опер.</th><th>АРМ</th><th>Номер</th><th>Дата</th><th>Время</th><th>Тип происшествия</th><th>Постр.</th><th>Адрес</th><th>Статус службы</th>
|
||||
</tr></thead><tbody>
|
||||
{visibleCompletedCards.map((item) => <tr key={item.card_id}>
|
||||
<td data-label="Связи">▾</td><td data-label="ЧС">—</td><td data-label="Опер.">0</td><td data-label="АРМ">ДДС</td>
|
||||
<td data-label="Номер">{item.card_id.slice(0, 8).toUpperCase()}</td><td data-label="Дата">—</td><td data-label="Время">—</td>
|
||||
<td data-label="Тип происшествия">Сценарий {item.scenario_id}</td><td data-label="Постр.">—</td><td data-label="Адрес">—</td>
|
||||
<td data-label="Статус службы">Отработана · {item.score_auto.toFixed(0)} / 100</td>
|
||||
</tr>)}
|
||||
{showActive && card && <tr className="dds-selected" aria-current="true">
|
||||
<td data-label="Связи"><button type="button" className="dds-row-open" onClick={() => setView("card")} aria-label="Открыть карточку">▾</button></td>
|
||||
<td data-label="ЧС">{field(card, "is_emergency") === "true" ? "Да" : "Нет"}</td>
|
||||
<td data-label="Опер.">0</td><td data-label="АРМ">ДДС</td>
|
||||
<td data-label="Номер"><button type="button" className="dds-row-link" onClick={() => setView("card")}>{cardId.slice(0, 8).toUpperCase()}</button></td>
|
||||
<td data-label="Дата">{receivedAt ? new Date(receivedAt).toLocaleDateString("ru-RU") : "—"}</td>
|
||||
<td data-label="Время">{receivedAt ? new Date(receivedAt).toLocaleTimeString("ru-RU") : "—"}</td>
|
||||
<td data-label="Тип происшествия">{field(card, "incident_code")} · {field(card, "incident_type")}
|
||||
<small>Описание: {field(card, "description")}</small></td>
|
||||
<td data-label="Постр.">{field(card, "victims_count")}</td>
|
||||
<td data-label="Адрес">{field(card, "address")}</td>
|
||||
<td data-label="Статус службы">{station?.services.map((service) => `${service}: ${SERVICE_STATUS_LABELS[station.statuses[service]]}`).join("; ") || "Добавлена"}</td>
|
||||
</tr>}
|
||||
{!showActive && !visibleCompletedCards.length && <tr><td colSpan={11} className="dds-empty">
|
||||
{query ? "По запросу ничего не найдено." : "Ожидание готовой карточки от преподавателя или оператора 112…"}</td></tr>}
|
||||
</tbody></table></div>
|
||||
{cardTotal > cardIndex && <p className="dds-hint">Остальные {cardTotal - cardIndex} карточки поступят после завершения текущей.</p>}
|
||||
</section>
|
||||
</>}
|
||||
|
||||
{card && <div className="dds-main"><div className="dds-left">
|
||||
<section className="dds-panel"><div className="dds-panel-title"><h2>Карточка обращения</h2>
|
||||
{card && view === "card" && <div className="dds-case-layout">
|
||||
<div className="dds-case-top"><button type="button" onClick={() => { setView("registry"); setPane(null); }}>← Список происшествий</button>
|
||||
<span>Происшествие {cardId.slice(0, 8).toUpperCase()} · карточка {cardIndex} из {cardTotal}</span></div>
|
||||
<div className="dds-call-strip">
|
||||
<div className="dds-call-off"><span className="dds-call-icon">☎</span><strong>Отключение</strong><small>записи звонков · список SMS</small></div>
|
||||
<div><span className="dds-call-icon">☎</span><small>АОН</small><strong>{field(card, "caller_number")}</strong></div>
|
||||
<div><span className="dds-call-icon">☎</span><small>предоставленный</small><strong>{field(card, "caller_contact")}</strong></div>
|
||||
<div><span className="dds-call-icon">☎</span><small>телефон на место</small><strong>{field(card, "caller_contact")}</strong></div>
|
||||
<div className="dds-call-incident"><strong>Происшествие {cardId.slice(0, 8).toUpperCase()}</strong>
|
||||
<small>Сохр. {receivedAt ? new Date(receivedAt).toLocaleString("ru-RU") : "—"}</small>
|
||||
<small>Опер., АРМ ДДС</small></div>
|
||||
<div className="dds-case-top-buttons"><button type="button" onClick={() => setPane("full")}>просмотр</button>
|
||||
<button type="button" onClick={() => setPane("more")}>дополнение</button></div>
|
||||
</div>
|
||||
<div className="dds-case-meta"><span>ФИО заявителя: <b>{field(card, "caller_name")}</b></span>
|
||||
<span>Пострадавшие: {field(card, "victims_count")} ЧС: {field(card, "is_emergency") === "true" ? "да" : "нет"}</span>
|
||||
<span>✎</span></div>
|
||||
<div className="dds-case-summary">
|
||||
<div className="dds-case-address"><strong>{field(card, "address")}</strong><span>{field(card, "street")} {field(card, "building")}</span>
|
||||
<div><b>{receivedAt ? new Date(receivedAt).toLocaleString("ru-RU") : "—"}</b> {field(card, "description")}</div></div>
|
||||
<div className="dds-case-classification"><strong>Происшествие {field(card, "incident_code")}</strong>
|
||||
<div><b>{field(card, "description")}</b></div>
|
||||
<div>Класс: <b>{field(card, "incident_type")}</b></div>
|
||||
<div>Список оповещения: <b>{station?.services.join(", ") || field(card, "notify")}</b></div></div>
|
||||
</div>
|
||||
<div className="dds-case-stage">
|
||||
{pane && <div className={`dds-case-drawer dds-case-drawer-${pane}`}>
|
||||
<header className="dds-drawer-title"><strong>{({ status: "Статусы службы", phone: "IP-телефон", reply: "Ответ диспетчера",
|
||||
full: "Карточка информационного обмена", journal: "Журнал реагирования", more: "Дополнение" })[pane]}</strong>
|
||||
<button type="button" onClick={() => setPane(null)} aria-label="Закрыть панель">×</button></header>
|
||||
<div className="dds-main"><div className="dds-left">
|
||||
{pane === "full" && <section className="dds-panel"><div className="dds-panel-title"><h2>Карточка обращения</h2>
|
||||
<span>Источник: {from || "112"}</span></div>
|
||||
<div className="dds-summary">
|
||||
<div><small>Адрес</small><strong>{field(card, "address")}</strong></div>
|
||||
|
|
@ -193,28 +330,39 @@ export function Dds() {
|
|||
<div><small>Телефон</small><strong>{field(card, "caller_contact")}</strong></div>
|
||||
<div><small>Происшествие</small><strong>{field(card, "description")}</strong></div>
|
||||
</div><details className="dds-details"><summary>Полная карточка информационного обмена</summary><KioCard state={card} readOnly /></details>
|
||||
</section>
|
||||
<section className="dds-panel"><div className="dds-panel-title"><h2>Реагирование служб</h2>
|
||||
</section>}
|
||||
{pane === "status" && <section className="dds-panel"><div className="dds-panel-title"><h2>Реагирование служб</h2>
|
||||
<span className={station && ALARMING.includes(station.card) ? "state-violated" : "state-ok"}>
|
||||
{station ? CARD_STATUS_LABELS[station.card] : "—"}</span></div>
|
||||
{!primaryRecorded && receivedAt !== null && <div className={`dds-deadline ${elapsed > ACK_LIMIT_S ? "state-violated" : "state-ok"}`}>
|
||||
Первичное решение «Принята» / «Не принята»: {elapsed.toFixed(0)} из {ACK_LIMIT_S} секунд</div>}
|
||||
{station && station.services.length > 0 ? <div className="dds-table-wrap"><table className="dds-registry dds-status-table">
|
||||
<thead><tr><th>Служба</th><th>Текущий статус</th><th>Следующее действие</th></tr></thead><tbody>
|
||||
{station.services.map((service) => <StatusRow key={service} service={service}
|
||||
{station && station.services.length > 0 ? <>
|
||||
<div className="dds-status-history"><strong>Служба {activeService ?? station.services[0]}</strong>
|
||||
<button type="button" className="dds-status-close" onClick={() => setPane(null)} aria-label="Закрыть статусы">×</button>
|
||||
{station.log.filter((entry) => entry.service === (activeService ?? station.services[0])).map((entry, index) =>
|
||||
<div key={`${entry.at}-${index}`}><span>› {time(entry.at)} {SERVICE_STATUS_LABELS[entry.status]}</span>
|
||||
<span>{entry.comment || "—"}</span></div>)}
|
||||
{!station.log.some((entry) => entry.service === (activeService ?? station.services[0])) &&
|
||||
<div><span>› Карточка получена службой</span><span>Ожидается первичное решение</span></div>}
|
||||
</div>
|
||||
{station.services.filter((service) => service === (activeService ?? station.services[0])).map((service) =>
|
||||
<StatusRow key={`${cardId}:${service}`} service={service}
|
||||
current={station.statuses[service]} available={station.available[service] ?? []}
|
||||
disabled={!isConnected || ended} reports={reports.filter((report) => report.service === service)}
|
||||
phoneExercise={from === "учебный сценарий"}
|
||||
crewOptions={station.crew_options?.filter((crew) => crew.startsWith(`${service} —`)) ?? []}
|
||||
selectedCrew={selectedCrew.startsWith(`${service} —`) ? selectedCrew : ""}
|
||||
onCrew={(crew) => send({ type: "crew.select", crew })}
|
||||
onSet={(next, comment) => channel.current?.send({ type: "card.status", service, status: next, comment })} />)}
|
||||
</tbody></table></div> : <p className="dds-empty">Ожидаем состав служб по карточке.</p>}
|
||||
</> : <p className="dds-empty">Ожидаем состав служб по карточке.</p>}
|
||||
<p className="dds-hint">Сначала примите карточку или укажите причину отказа. Последующие статусы в занятии ДДС подтверждаются докладами по телефону.</p>
|
||||
</section>
|
||||
{station && station.log.length > 0 && <section className="dds-panel"><div className="dds-panel-title"><h2>Журнал реагирования</h2></div>
|
||||
</section>}
|
||||
{pane === "journal" && station && station.log.length > 0 && <section className="dds-panel"><div className="dds-panel-title"><h2>Журнал реагирования</h2></div>
|
||||
<div className="dds-table-wrap"><table className="dds-registry"><thead><tr><th>Время</th><th>Служба</th><th>Статус</th><th>Комментарий</th></tr></thead>
|
||||
<tbody>{station.log.map((entry, index) => <tr key={`${entry.at}-${index}`}><td>{time(entry.at)}</td><td>{entry.service}</td>
|
||||
<td>{SERVICE_STATUS_LABELS[entry.status]}</td><td>{entry.comment || "—"}</td></tr>)}</tbody></table></div></section>}
|
||||
</div><aside className="dds-right">
|
||||
<section className="dds-panel dds-phone"><div className="dds-panel-title"><h2>IP-телефон</h2><span>Учебная имитация</span></div>
|
||||
{pane === "phone" && <section className="dds-panel dds-phone"><div className="dds-panel-title"><h2>IP-телефон</h2><span>Учебная имитация</span></div>
|
||||
<p className="dds-hint">Выберите бригаду вручную, свяжитесь со старшим группы и внесите его доклад в карточку.</p>
|
||||
<label htmlFor="dds-crew">Дежурная бригада</label>
|
||||
<select id="dds-crew" value={selectedCrew} disabled={!isConnected || ended || !station?.crew_options?.length}
|
||||
|
|
@ -233,8 +381,21 @@ export function Dds() {
|
|||
{reports.length > 0 && <details className="dds-details"><summary>История докладов ({reports.length})</summary>
|
||||
<ol className="dds-reports">{reports.map((report, index) => <li key={`${report.at}-${index}`}><b>{REPORT_LABELS[report.phase]}</b> · {time(report.at)}<br />{report.text}</li>)}</ol>
|
||||
</details>}
|
||||
</section>
|
||||
<section className="dds-panel dds-secondary"><div className="dds-panel-title"><h2>Дополнительные действия</h2></div>
|
||||
</section>}
|
||||
{pane === "reply" && <section className="dds-panel dds-reply">
|
||||
<div className="dds-panel-title"><h2>Ответ и комментарий диспетчера</h2>
|
||||
<span>{reply.dirty ? "Не сохранено" : "Сохранено"}</span></div>
|
||||
<label htmlFor="dds-reply-text">Свободный текст по текущей карточке</label>
|
||||
<textarea id="dds-reply-text" rows={7} value={reply.text}
|
||||
disabled={!isConnected || ended || advancePending}
|
||||
placeholder="Что сообщено старшему группы, какие сведения получены и почему принято решение"
|
||||
onChange={(event) => setReply({ text: event.target.value, dirty: true })} />
|
||||
<p className="dds-hint">Ответ сохраняется в журнале текущей карточки. Автооценка проверяет его наличие и минимальную полноту, но не грамотность или фактическую верность каждого предложения.</p>
|
||||
<button type="button" disabled={!cardId || !reply.dirty || !isConnected || ended || advancePending}
|
||||
onClick={() => { if (send({ type: "card.reply", card_id: cardId, text: reply.text })) setError(""); }}>
|
||||
Сохранить ответ</button>
|
||||
</section>}
|
||||
{pane === "more" && <section className="dds-panel dds-secondary"><div className="dds-panel-title"><h2>Дополнительные действия</h2></div>
|
||||
<div className="dds-zone">Зона ответственности: <button type="button" disabled={zone !== null || !isConnected || ended}
|
||||
onClick={() => { channel.current?.send({ type: "zone.decision", in_zone: true }); setZone(true); }}>Наша</button>
|
||||
<button type="button" disabled={zone !== null || !isConnected || ended}
|
||||
|
|
@ -247,15 +408,42 @@ export function Dds() {
|
|||
channel.current?.send({ type: "card.bounce", missing_fields: missing, comment: bounceComment }); setBounced(true);
|
||||
}}>Вернуть оператору</button>
|
||||
</details>
|
||||
<button type="button" className="dds-finish" disabled={!isConnected || ended} onClick={() => send({ type: "station.finish" })}>Завершить упражнение ДДС</button>
|
||||
</section>
|
||||
</aside></div>}
|
||||
<button type="button" className="dds-finish" disabled={!cardId || !isConnected || ended || advancePending}
|
||||
onClick={() => {
|
||||
if (reply.dirty && !send({ type: "card.reply", card_id: cardId, text: reply.text })) return;
|
||||
if (send({ type: "card.next", card_id: cardId })) setAdvancePending(true);
|
||||
}}>
|
||||
{cardIndex < cardTotal ? "Завершить карточку и открыть следующую" : "Завершить карточку и занятие"}
|
||||
</button>
|
||||
{cardTotal > 1 && <button type="button" disabled={!isConnected || ended || advancePending}
|
||||
onClick={() => { if (window.confirm("Завершить занятие досрочно? Остальные карточки не будут пройдены.")) send({ type: "station.finish" }); }}>
|
||||
Досрочно завершить занятие</button>}
|
||||
</section>}
|
||||
</aside></div></div>}
|
||||
</div>
|
||||
<nav className="dds-service-dock" aria-label="Действия с карточкой">
|
||||
<span className="dds-dock-label">Службы:</span>
|
||||
{station?.services.map((service) => <button type="button" className={pane === "status" && activeService === service ? "active" : ""}
|
||||
key={service} onClick={() => { setActiveService(service); setPane("status"); }}>
|
||||
<b>{serviceTitle(service)}</b><small>{SERVICE_STATUS_LABELS[station.statuses[service]]}</small>
|
||||
</button>)}
|
||||
<button type="button" onClick={() => setPane("phone")}><b>☎ Связь</b><small>Бригада</small></button>
|
||||
<button type="button" onClick={() => setPane("reply")}><b>✎ Ответ</b><small>{reply.dirty ? "Не сохранён" : "Комментарий"}</small></button>
|
||||
<button type="button" onClick={() => setPane("journal")}><b>Журнал</b><small>Статусы</small></button>
|
||||
<button type="button" disabled={!cardId || !isConnected || ended || advancePending}
|
||||
onClick={() => {
|
||||
if (reply.dirty && !send({ type: "card.reply", card_id: cardId, text: reply.text })) return;
|
||||
if (send({ type: "card.next", card_id: cardId })) setAdvancePending(true);
|
||||
}}><b>✓ Завершить</b><small>{cardIndex < cardTotal ? "Следующая карточка" : "Занятие"}</small></button>
|
||||
</nav>
|
||||
</div>}
|
||||
</main>;
|
||||
}
|
||||
|
||||
function StatusRow({ service, current, available, disabled, reports, phoneExercise, onSet }: {
|
||||
function StatusRow({ service, current, available, disabled, reports, phoneExercise, crewOptions, selectedCrew, onCrew, onSet }: {
|
||||
service: string; current: ServiceStatus; available: ServiceStatus[]; disabled: boolean;
|
||||
reports: PhoneReport[]; phoneExercise: boolean; onSet: (status: ServiceStatus, comment: string) => void;
|
||||
reports: PhoneReport[]; phoneExercise: boolean; crewOptions: string[]; selectedCrew: string;
|
||||
onCrew: (crew: string) => void; onSet: (status: ServiceStatus, comment: string) => void;
|
||||
}) {
|
||||
const [chosen, setChosen] = useState<ServiceStatus | "">("");
|
||||
const [comment, setComment] = useState("");
|
||||
|
|
@ -265,17 +453,32 @@ function StatusRow({ service, current, available, disabled, reports, phoneExerci
|
|||
};
|
||||
const matchingReport = !chosen || !phoneExercise || !reportNeeded[chosen] ||
|
||||
reports.some((report) => report.phase === reportNeeded[chosen]);
|
||||
return <tr><td>{service}</td><td><strong>{SERVICE_STATUS_LABELS[current]}</strong></td><td>
|
||||
{available.length ? <div className="dds-status-action">
|
||||
if (!available.length) return <p className="dds-hint">{serviceTitle(service)}: {SERVICE_STATUS_LABELS[current]}. Дальнейшие статусы недоступны.</p>;
|
||||
return <div className="dds-status-editor">
|
||||
<label>Статус
|
||||
<select value={chosen} disabled={disabled} aria-label={`Следующий статус ${service}`}
|
||||
onChange={(event) => setChosen(event.target.value as ServiceStatus)}>
|
||||
<option value="">Выберите статус</option>
|
||||
<option value="">{SERVICE_STATUS_LABELS[current]} →</option>
|
||||
{available.map((next) => <option key={next} value={next}>{SERVICE_STATUS_LABELS[next]}</option>)}
|
||||
</select>
|
||||
{needsComment && <input type="text" value={comment} placeholder="Причина отказа и кому передана информация"
|
||||
onChange={(event) => setComment(event.target.value)} />}
|
||||
{chosen && !matchingReport && <span className="state-warn">Сначала получите доклад по телефону.</span>}
|
||||
<button type="button" disabled={disabled || !chosen || (needsComment && !comment.trim()) || !matchingReport}
|
||||
onClick={() => { if (chosen) { onSet(chosen, comment.trim()); setChosen(""); setComment(""); } }}>Сохранить статус</button>
|
||||
</div> : "Карточка закрыта для редактирования"}</td></tr>;
|
||||
</label>
|
||||
<label>Номер наряда
|
||||
<select value={selectedCrew} disabled={disabled || !crewOptions.length} aria-label={`Наряд ${service}`}
|
||||
onChange={(event) => { if (event.target.value) onCrew(event.target.value); }}>
|
||||
<option value="">—</option>
|
||||
{crewOptions.map((crew) => <option value={crew} key={crew}>{crew}</option>)}
|
||||
</select>
|
||||
</label>
|
||||
<label>Комментарий
|
||||
<input type="text" value={comment} disabled={disabled} aria-label={`Комментарий к статусу ${service}`}
|
||||
placeholder={needsComment ? "Причина отказа и кому передана информация" : "Комментарий"}
|
||||
onChange={(event) => setComment(event.target.value)} />
|
||||
</label>
|
||||
<button type="button" className="dds-status-save" aria-label="Сохранить статус"
|
||||
disabled={disabled || !chosen || (needsComment && !comment.trim()) || !matchingReport}
|
||||
onClick={() => { if (chosen) { onSet(chosen, comment.trim()); setChosen(""); setComment(""); } }}>✓</button>
|
||||
<button type="button" className="dds-status-cancel" aria-label="Отменить изменение статуса"
|
||||
onClick={() => { setChosen(""); setComment(""); }}>×</button>
|
||||
{chosen && !matchingReport && <span className="dds-status-warning state-warn">Сначала получите доклад по телефону.</span>}
|
||||
</div>;
|
||||
}
|
||||
|
|
|
|||
94
frontend/src/pages/groups/Groups.tsx
Normal file
94
frontend/src/pages/groups/Groups.tsx
Normal file
|
|
@ -0,0 +1,94 @@
|
|||
import { useEffect, useState } from "react";
|
||||
|
||||
import { useAssignTrainee, useCreateGroup, useGroupAnalytics, useGroups, useTrainees } from "@/shared/api/http";
|
||||
|
||||
export function Groups() {
|
||||
const groups = useGroups();
|
||||
const trainees = useTrainees();
|
||||
const create = useCreateGroup();
|
||||
const assign = useAssignTrainee();
|
||||
const [groupId, setGroupId] = useState<string | null>(null);
|
||||
const [groupName, setGroupName] = useState("");
|
||||
const [traineeId, setTraineeId] = useState("");
|
||||
const report = useGroupAnalytics(groupId);
|
||||
|
||||
useEffect(() => {
|
||||
if (!groupId && groups.data?.length) setGroupId(groups.data[0].id);
|
||||
}, [groups.data, groupId]);
|
||||
|
||||
return (
|
||||
<main className="page">
|
||||
<h1>Аналитика учебной группы</h1>
|
||||
<p><a href="/instructor">← к пульту преподавателя</a></p>
|
||||
<form onSubmit={(event) => {
|
||||
event.preventDefault();
|
||||
create.mutate(groupName.trim(), { onSuccess: (group) => {
|
||||
setGroupId(group.id);
|
||||
setGroupName("");
|
||||
} });
|
||||
}}>
|
||||
<label>Новая группа{" "}
|
||||
<input value={groupName} maxLength={120} onChange={(event) => setGroupName(event.target.value)} />
|
||||
</label>{" "}
|
||||
<button type="submit" disabled={!groupName.trim() || create.isPending}>Создать</button>
|
||||
{create.isError && <span className="warn"> Не удалось создать группу: возможно, имя занято.</span>}
|
||||
</form>
|
||||
<label>
|
||||
Группа{" "}
|
||||
<select value={groupId ?? ""} onChange={(event) => setGroupId(event.target.value || null)}>
|
||||
<option value="">— выберите группу —</option>
|
||||
{groups.data?.map((group) => (
|
||||
<option key={group.id} value={group.id}>{group.name}</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
{groupId && <form onSubmit={(event) => {
|
||||
event.preventDefault();
|
||||
if (traineeId) assign.mutate({ groupId, traineeId }, { onSuccess: () => setTraineeId("") });
|
||||
}}>
|
||||
<label>Добавить курсанта{" "}
|
||||
<select value={traineeId} onChange={(event) => setTraineeId(event.target.value)}>
|
||||
<option value="">— выберите курсанта —</option>
|
||||
{trainees.data?.map((trainee) => (
|
||||
<option key={trainee.id} value={trainee.id}>{trainee.name}{trainee.group ? ` · ${trainee.group}` : ""}</option>
|
||||
))}
|
||||
</select>
|
||||
</label>{" "}
|
||||
<button type="submit" disabled={!traineeId || assign.isPending}>Назначить</button>
|
||||
{assign.isError && <span className="warn"> Не удалось назначить курсанта.</span>}
|
||||
</form>}
|
||||
{groups.isError && <p className="warn">Не удалось загрузить группы.</p>}
|
||||
{groups.data?.length === 0 && <p>Учебные группы ещё не заведены.</p>}
|
||||
{report.isError && <p className="warn">Не удалось загрузить аналитику.</p>}
|
||||
{report.data && (
|
||||
<>
|
||||
<p>
|
||||
Курсанты: {report.data.active_trainees} занимались из {report.data.enrolled_trainees} ·
|
||||
оценённых попыток: {report.data.scored_attempts} ·
|
||||
средний балл: {report.data.average_score?.toFixed(1) ?? "—"}
|
||||
</p>
|
||||
<p className="ref">
|
||||
Доли ошибок считаются среди курсантов с оценёнными попытками; повторные попытки
|
||||
одного человека не увеличивают долю. Рекомендации сформированы по правилам,
|
||||
не нейросетью.
|
||||
</p>
|
||||
<table className="grid">
|
||||
<thead><tr><th>Типичная ошибка</th><th>Курсанты</th><th>Рекомендация</th></tr></thead>
|
||||
<tbody>
|
||||
{report.data.errors.map((item) => (
|
||||
<tr key={item.code}>
|
||||
<th>{item.code} · {item.title}</th>
|
||||
<td>{item.affected_trainees} · {item.rate_percent.toFixed(1)}%</td>
|
||||
<td>{item.recommendation}</td>
|
||||
</tr>
|
||||
))}
|
||||
{report.data.errors.length === 0 && (
|
||||
<tr><td colSpan={3}>Пока нет ошибок в оценённых занятиях.</td></tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</>
|
||||
)}
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
|
@ -28,6 +28,7 @@ const MODES: { value: SessionMode; label: string }[] = [
|
|||
export function Instructor() {
|
||||
const [sessionId, setSessionId] = useState<string | null>(sessionIdFromUrl());
|
||||
const [scenarioId, setScenarioId] = useState("");
|
||||
const [extraScenarioIds, setExtraScenarioIds] = useState<string[]>([]);
|
||||
const [mode, setMode] = useState<SessionMode>("training");
|
||||
const [exercise, setExercise] = useState<"dds" | "call" | "card">("dds");
|
||||
const [trainee, setTrainee] = useState("");
|
||||
|
|
@ -62,8 +63,11 @@ export function Instructor() {
|
|||
if (!sessionId || control.status !== "open" || toStart.current !== sessionId) return;
|
||||
toStart.current = null;
|
||||
const selected = trainees.data?.find((item) => item.id === traineeId);
|
||||
control.start(scenarioId, mode, selected?.name || trainee || "Демо-курсант", exercise, undefined, selected?.id);
|
||||
}, [sessionId, control, scenarioId, mode, trainee, traineeId, trainees.data, exercise]);
|
||||
const scenarioIds = exercise === "dds"
|
||||
? [scenarioId, ...extraScenarioIds.filter((id) => id !== scenarioId)] : undefined;
|
||||
control.start(scenarioId, mode, selected?.name || trainee || "Демо-курсант", exercise,
|
||||
undefined, selected?.id, scenarioIds && scenarioIds.length > 1 ? scenarioIds : undefined);
|
||||
}, [sessionId, control, scenarioId, extraScenarioIds, mode, trainee, traineeId, trainees.data, exercise]);
|
||||
|
||||
const links = sessionId
|
||||
? {
|
||||
|
|
@ -87,13 +91,27 @@ export function Instructor() {
|
|||
<tr>
|
||||
<th>Сценарий</th>
|
||||
<td>
|
||||
<select value={scenarioId} onChange={(event) => setScenarioId(event.target.value)}>
|
||||
<select value={scenarioId} onChange={(event) => {
|
||||
setScenarioId(event.target.value);
|
||||
setExtraScenarioIds((previous) => previous.filter((id) => id !== event.target.value));
|
||||
}}>
|
||||
{scenarios.data?.map((scenario) => (
|
||||
<option key={scenario.id} value={scenario.id}>
|
||||
{scenario.title} · {scenario.level}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
{exercise === "dds" && <details className="scenario-queue">
|
||||
<summary>Дополнительные карточки ({extraScenarioIds.length})</summary>
|
||||
<p className="ref">Карточки поступят последовательно после завершения текущей.</p>
|
||||
{scenarios.data?.filter((scenario) => scenario.id !== scenarioId).map((scenario) =>
|
||||
<label key={scenario.id} className="mode-choice">
|
||||
<input type="checkbox" checked={extraScenarioIds.includes(scenario.id)} onChange={() =>
|
||||
setExtraScenarioIds((previous) => previous.includes(scenario.id)
|
||||
? previous.filter((id) => id !== scenario.id) : [...previous, scenario.id])} />
|
||||
{" "}{scenario.title} · {scenario.level}
|
||||
</label>)}
|
||||
</details>}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
|
@ -219,7 +237,7 @@ export function Instructor() {
|
|||
|
||||
<section style={{ flex: "0 0 260px" }}>
|
||||
<h2>История группы</h2>
|
||||
<p><a href="/profile">профили курсантов</a></p>
|
||||
<p><a href="/profile">профили курсантов</a> · <a href="/groups">аналитика группы</a></p>
|
||||
<table className="grid">
|
||||
<tbody>
|
||||
{history.data?.slice(0, 15).map((item) => (
|
||||
|
|
|
|||
|
|
@ -47,30 +47,36 @@ export function Call() {
|
|||
}
|
||||
|
||||
if (call.briefing) {
|
||||
return <main className="page">
|
||||
const services = display(call.card, "notify");
|
||||
const notifiedServices = Array.isArray(services) ? services.map(String) : [];
|
||||
return <main className="page arm-page">
|
||||
<ModeBanner mode={call.briefing.mode} />
|
||||
<h1>АРМ оператора 112 · учебная карточка</h1>
|
||||
<p className="ref">Текстовое упражнение: входящий голосовой вызов и микрофон не используются.</p>
|
||||
<table className="grid"><tbody>
|
||||
<tr><th>Канал</th><td className={call.status === "open" ? "state-ok" : "state-warn"}>{STATUS_LABEL[call.status]}</td></tr>
|
||||
<tr><th>Сценарий</th><td>{call.briefing.scenario_id}</td></tr>
|
||||
<tr><th>Состояние</th><td>{call.cardSubmitted ? "карточка отправлена на оценку" : "карточка заполняется"}</td></tr>
|
||||
</tbody></table>
|
||||
<section style={{ maxWidth: 900, marginTop: 16 }}>
|
||||
<h2>Вводная о происшествии</h2>
|
||||
<div style={{ background: "#fff", border: "1px solid var(--line)", padding: 16, whiteSpace: "pre-wrap", lineHeight: 1.5 }}>
|
||||
{call.briefing.text}
|
||||
</div>
|
||||
<p className="ref">Извлеките сведения из вводной, заполните поля карточки и проверьте предлагаемый список оповещения.</p>
|
||||
<h2>Карточка информационного обмена</h2>
|
||||
<KioCard state={call.card} required={call.briefing.required_fields}
|
||||
readOnly={call.cardSubmitted || call.status !== "open"} onChange={call.patchKio} />
|
||||
{!call.cardSubmitted && <p><button type="button" className="start" disabled={call.status !== "open"}
|
||||
onClick={call.submitCard}>Отправить карточку на проверку</button></p>}
|
||||
{call.error && <p className="state-violated" role="alert">{call.error}</p>}
|
||||
{call.cardSubmitted && !call.report && !call.reportError && <p>Карточка отправлена. Ожидаем итоговую оценку…</p>}
|
||||
{call.reportError && <p className="state-violated" role="alert">{call.reportError}</p>}
|
||||
<header className="arm-topbar arm-topbar-text">
|
||||
<div className="arm-topbar-mark">112</div>
|
||||
<div className="arm-topbar-title"><strong>Карточка информационного обмена</strong><span>Текстовое упражнение · сценарий {call.briefing.scenario_id}</span></div>
|
||||
<div className="arm-topbar-state"><span className={call.status === "open" ? "state-ok" : "state-warn"}>● {call.status === "open" ? "АРМ подключён" : STATUS_LABEL[call.status]}</span><small>{call.cardSubmitted ? "Карточка отправлена" : "Карточка заполняется"}</small></div>
|
||||
</header>
|
||||
<section className="arm-briefing">
|
||||
<div className="arm-briefing-label"><strong>Учебная вводная</strong><span>Текстовый режим · без входящего звонка</span></div>
|
||||
<div className="arm-briefing-text">{call.briefing.text}</div>
|
||||
</section>
|
||||
<div className="arm-card-wrap">
|
||||
<KioCard state={call.card} required={call.briefing.required_fields}
|
||||
readOnly={call.cardSubmitted || call.status !== "open"} referenceArm onChange={call.patchKio} />
|
||||
</div>
|
||||
<footer className="arm-footer">
|
||||
<span className="arm-footer-services">Службы:
|
||||
{notifiedServices.length
|
||||
? notifiedServices.map((service) => <b key={service}>{service}</b>)
|
||||
: <em>появятся после выбора признаков</em>}
|
||||
</span>
|
||||
{!call.cardSubmitted && <button type="button" className="arm-primary" disabled={call.status !== "open"}
|
||||
onClick={call.submitCard}>Сохранить и проверить</button>}
|
||||
{call.cardSubmitted && <strong>Карточка отправлена</strong>}
|
||||
</footer>
|
||||
{call.error && <p className="state-violated arm-message" role="alert">{call.error}</p>}
|
||||
{call.cardSubmitted && !call.report && !call.reportError && <p className="arm-message">Карточка отправлена. Ожидаем итоговую оценку…</p>}
|
||||
{call.reportError && <p className="state-violated arm-message" role="alert">{call.reportError}</p>}
|
||||
{call.report && <Debrief report={call.report} />}
|
||||
</main>;
|
||||
}
|
||||
|
|
@ -80,59 +86,53 @@ export function Call() {
|
|||
const autoRoute = Boolean(display(call.card, "incident_code")) && Array.isArray(notify) && notify.length > 0;
|
||||
|
||||
return (
|
||||
<main className="page">
|
||||
<main className="page arm-page">
|
||||
<StandStatus />
|
||||
<ModeBanner mode={call.incoming?.mode} />
|
||||
<h1>АРМ оператора 112</h1>
|
||||
<InterviewTimer timers={call.timers} />
|
||||
<table className="grid">
|
||||
<tbody>
|
||||
<tr><th>Канал</th><td className={call.status === "open" ? "" : "warn"}>{STATUS_LABEL[call.status]}</td></tr>
|
||||
<tr><th>Вызов</th><td>{call.incoming ? `${call.incoming.caller_number} · сценарий ${call.incoming.scenario_id} · режим ${call.incoming.mode}` : "ожидание"}</td></tr>
|
||||
<tr><th>Гарнитура</th><td>{call.micOn ? "микрофон включён" : "выключен"}</td></tr>
|
||||
<tr><th>Звонящий</th><td>{call.callerSpeaking ? "говорит" : "молчит"}</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<header className="arm-topbar">
|
||||
<div className="arm-topbar-mark">112</div>
|
||||
<div className="arm-phone-cell"><small>Канал связи</small><strong className={call.status === "open" ? "state-ok" : "state-warn"}>{STATUS_LABEL[call.status]}</strong><span>{call.micOn ? "● Микрофон включён" : "Микрофон выключен"}</span></div>
|
||||
<div className="arm-phone-cell arm-phone-main"><small>Входящий вызов</small><strong>{call.incoming?.caller_number || "Ожидание вызова"}</strong><span>{call.incoming ? `Сценарий ${call.incoming.scenario_id} · ${call.callerSpeaking ? "заявитель говорит" : "заявитель молчит"}` : "Карточка не назначена"}</span></div>
|
||||
<div className="arm-topbar-title"><strong>АРМ оператора 112</strong><span>Карточка информационного обмена</span></div>
|
||||
<div className="arm-topbar-clock"><InterviewTimer timers={call.timers} /></div>
|
||||
</header>
|
||||
|
||||
<p>
|
||||
{call.phase === "incoming" && !call.micOn && (
|
||||
<button type="button" onClick={() => void call.answer()}>Ответить</button>
|
||||
)}
|
||||
{call.micOn && <button type="button" onClick={call.hangup}>Завершить вызов</button>}{" "}
|
||||
{call.micOn && hintsAllowed(call.incoming?.mode) && (
|
||||
<button type="button" onClick={call.hint}>Подсказка</button>
|
||||
)}
|
||||
</p>
|
||||
<div className="arm-call-actions">
|
||||
{call.phase === "incoming" && !call.micOn && <button type="button" className="arm-answer" onClick={() => void call.answer()}>☎ Ответить на вызов</button>}
|
||||
{call.micOn && <span className="arm-live">● Разговор идёт</span>}
|
||||
{call.micOn && hintsAllowed(call.incoming?.mode) && <button type="button" onClick={call.hint}>Подсказка</button>}
|
||||
<span className="arm-call-actions-note">{call.phase === "ended" ? "Вызов завершён" : "Заполните адрес и признаки происшествия со слов заявителя"}</span>
|
||||
</div>
|
||||
|
||||
{call.error && <p className="violated">{call.error}</p>}
|
||||
{call.error && <p className="violated arm-message" role="alert">{call.error}</p>}
|
||||
|
||||
{call.phase === "ended" && !call.selfAssessed && call.checklist.length > 0 && (
|
||||
<SelfAssessment checklist={call.checklist} onSubmit={call.submitSelfAssessment} />
|
||||
)}
|
||||
{call.selfAssessed && !call.report && <p>Самооценка принята, оценка считается…</p>}
|
||||
{call.report && <Debrief report={call.report} />}
|
||||
|
||||
<div className="columns">
|
||||
<section>
|
||||
<h2>Карточка информационного обмена</h2>
|
||||
<div className="arm-card-wrap">
|
||||
<KioCard
|
||||
state={call.card}
|
||||
required={call.incoming?.required_fields ?? []}
|
||||
readOnly={!call.micOn}
|
||||
referenceArm
|
||||
onChange={call.patchKio}
|
||||
/>
|
||||
<p>
|
||||
</div>
|
||||
<footer className="arm-footer">
|
||||
<span>Службы · список оповещения рассчитывается по признакам</span>
|
||||
<div className="arm-footer-actions">
|
||||
<button
|
||||
type="button"
|
||||
className="arm-primary"
|
||||
disabled={!call.micOn || (!service && !autoRoute)}
|
||||
onClick={() => call.dispatch(service)}
|
||||
>
|
||||
Передать в ДДС
|
||||
</button>
|
||||
</p>
|
||||
{call.micOn && <button type="button" onClick={call.hangup}>Завершить вызов</button>}
|
||||
</div>
|
||||
</footer>
|
||||
<div className="arm-secondary">
|
||||
{/* Не каждый вызов заканчивается карточкой: справка и чужой регион —
|
||||
отдельные исходы, и курсант выбирает их сам (docs/spec/TICKETS.md). */}
|
||||
<details>
|
||||
<details className="arm-resolve">
|
||||
<summary>Закрыть вызов без карточки</summary>
|
||||
<p>
|
||||
<input
|
||||
|
|
@ -166,12 +166,10 @@ export function Call() {
|
|||
</p>
|
||||
{resolved && <p className="warn">Вызов закрыт: {RESOLVE_LABELS[resolved]}</p>}
|
||||
</details>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Нормативы</h2>
|
||||
<section className="arm-support">
|
||||
<h2>Нормативы и разговор</h2>
|
||||
<Timers timers={call.timers} />
|
||||
<h2>Разговор</h2>
|
||||
<table className="grid">
|
||||
<table className="grid">
|
||||
<tbody>
|
||||
{call.lines.map((line, index) => (
|
||||
<tr key={index}>
|
||||
|
|
@ -184,6 +182,11 @@ export function Call() {
|
|||
</table>
|
||||
</section>
|
||||
</div>
|
||||
{call.phase === "ended" && !call.selfAssessed && call.checklist.length > 0 && (
|
||||
<SelfAssessment checklist={call.checklist} onSubmit={call.submitSelfAssessment} />
|
||||
)}
|
||||
{call.selfAssessed && !call.report && <p className="arm-message">Самооценка принята, оценка считается…</p>}
|
||||
{call.report && <Debrief report={call.report} />}
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
// HTTP-клиент и хуки. Типы ответов HTTP в generated.ts пока не попадают —
|
||||
// там только события WS; здесь описаны руками по docs/arch/CONTRACT.md#http-api.
|
||||
|
||||
import { useMutation, useQuery } from "@tanstack/react-query";
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
|
||||
import type { Level, SessionMode } from "@/shared/types/generated";
|
||||
|
||||
|
|
@ -32,6 +32,7 @@ export interface Health {
|
|||
embeddings_ready: boolean;
|
||||
scenarios_loaded: number;
|
||||
offline: boolean;
|
||||
demo_no_db?: boolean;
|
||||
}
|
||||
|
||||
export interface ScenarioSummary {
|
||||
|
|
@ -125,6 +126,60 @@ export function useSigns(prefix: string[]) {
|
|||
export const useTrainees = () =>
|
||||
useQuery({ queryKey: ["trainees"], queryFn: () => request<TraineeInfo[]>("/api/trainees") });
|
||||
|
||||
export interface GroupInfo {
|
||||
id: string;
|
||||
name: string;
|
||||
}
|
||||
|
||||
export interface GroupAnalytics {
|
||||
group: GroupInfo;
|
||||
enrolled_trainees: number;
|
||||
active_trainees: number;
|
||||
scored_attempts: number;
|
||||
average_score: number | null;
|
||||
errors: {
|
||||
code: string;
|
||||
title: string;
|
||||
affected_trainees: number;
|
||||
occurrences: number;
|
||||
rate_percent: number;
|
||||
recommendation: string;
|
||||
}[];
|
||||
}
|
||||
|
||||
export const useGroups = () =>
|
||||
useQuery({ queryKey: ["groups"], queryFn: () => request<GroupInfo[]>("/api/groups") });
|
||||
|
||||
export function useCreateGroup() {
|
||||
const cache = useQueryClient();
|
||||
return useMutation({
|
||||
mutationFn: (name: string) => request<GroupInfo>("/api/groups", {
|
||||
method: "POST", body: JSON.stringify({ name }),
|
||||
}),
|
||||
onSuccess: () => void cache.invalidateQueries({ queryKey: ["groups"] }),
|
||||
});
|
||||
}
|
||||
|
||||
export function useAssignTrainee() {
|
||||
const cache = useQueryClient();
|
||||
return useMutation({
|
||||
mutationFn: ({ groupId, traineeId }: { groupId: string; traineeId: string }) =>
|
||||
request<GroupInfo>(`/api/groups/${groupId}/trainees/${traineeId}`, { method: "PUT" }),
|
||||
onSuccess: () => {
|
||||
void cache.invalidateQueries({ queryKey: ["trainees"] });
|
||||
void cache.invalidateQueries({ queryKey: ["group-analytics"] });
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
export const useGroupAnalytics = (groupId: string | null) =>
|
||||
useQuery({
|
||||
queryKey: ["group-analytics", groupId],
|
||||
queryFn: () => request<GroupAnalytics>(`/api/groups/${groupId}/analytics`),
|
||||
enabled: Boolean(groupId),
|
||||
refetchInterval: 15_000,
|
||||
});
|
||||
|
||||
export const useProfile = (traineeId: string | null) =>
|
||||
useQuery({
|
||||
queryKey: ["profile", traineeId],
|
||||
|
|
|
|||
|
|
@ -87,12 +87,25 @@ export interface CardBriefing {
|
|||
card?: KIO | null;
|
||||
}
|
||||
|
||||
export interface CardNext {
|
||||
type: "card.next";
|
||||
card_id: string;
|
||||
}
|
||||
|
||||
/** Снимок КИО. После передачи не меняется — оператор не дописывает задним числом. */
|
||||
export interface CardReceived {
|
||||
type: "card.received";
|
||||
card: KIO;
|
||||
from_operator: string;
|
||||
at: string;
|
||||
card_index?: number;
|
||||
card_total?: number;
|
||||
}
|
||||
|
||||
export interface CardReply {
|
||||
type: "card.reply";
|
||||
card_id: string;
|
||||
text: string;
|
||||
}
|
||||
|
||||
/** Статус карточки целиком — считается из статусов служб, руками не ставится. */
|
||||
|
|
@ -134,6 +147,23 @@ export interface CrewSelect {
|
|||
/** Дежурно-диспетчерская служба, в которую уходит карточка. */
|
||||
export type DDSCode = "01" | "02" | "03" | "04" | "gkh";
|
||||
|
||||
export interface DdsCardReport {
|
||||
card_id: string;
|
||||
scenario_id: string;
|
||||
score_auto: number;
|
||||
reply_text: string;
|
||||
metrics: Array<Metric>;
|
||||
findings: Array<Finding>;
|
||||
actions?: Array<Record<string, unknown>>;
|
||||
duration_ms?: number;
|
||||
}
|
||||
|
||||
export interface DdsCardSummary {
|
||||
card_id: string;
|
||||
scenario_id: string;
|
||||
score_auto: number;
|
||||
}
|
||||
|
||||
/** Передача в ДДС. При маршрутизации по ЕКП служба уже есть в notify. */
|
||||
export interface DdsDispatch {
|
||||
type: "dds.dispatch";
|
||||
|
|
@ -387,6 +417,7 @@ export interface ScenarioPublish {
|
|||
export interface ScenarioStart {
|
||||
type: "scenario.start";
|
||||
scenario_id: string;
|
||||
scenario_ids?: Array<string> | null;
|
||||
trainee: string;
|
||||
trainee_id?: string | null;
|
||||
group_id?: string | null;
|
||||
|
|
@ -455,6 +486,7 @@ export interface SessionReport {
|
|||
transcript: Array<TranscriptEntry>;
|
||||
findings: Array<Finding>;
|
||||
metrics: Array<Metric>;
|
||||
card_results?: Array<DdsCardReport>;
|
||||
competencies: Array<CompetencyScore>;
|
||||
reference_questions: Array<HintShown>;
|
||||
missed_checklist: Array<string>;
|
||||
|
|
@ -507,6 +539,11 @@ export interface StationSnapshot {
|
|||
crew_options?: Array<string>;
|
||||
crew_selected?: string | null;
|
||||
phone_reports?: Array<PhoneReportRecord>;
|
||||
card_id?: string | null;
|
||||
card_index?: number;
|
||||
card_total?: number;
|
||||
reply_text?: string;
|
||||
completed_cards?: Array<DdsCardSummary>;
|
||||
}
|
||||
|
||||
/** Состояние АРМ ДДС после каждой отметки: что стоит и что доступно дальше. */
|
||||
|
|
@ -614,7 +651,7 @@ export type InstructorToServer = ScenarioStart | DirectorInject | ReferencePlay
|
|||
|
||||
export type ServerToStation = CardReceived | StationState | PhoneReport | TimerTick | SessionEnded | ScoreReady | ErrorEvent;
|
||||
|
||||
export type StationToServer = CardAck | CardBounce | ServiceStatusSet | CrewSelect | PhoneDial | StationFinish | ZoneDecision | CrewDispatched | CrewArrived;
|
||||
export type StationToServer = CardAck | CardBounce | ServiceStatusSet | CrewSelect | PhoneDial | StationFinish | CardReply | CardNext | ZoneDecision | CrewDispatched | CrewArrived;
|
||||
|
||||
export type EventName =
|
||||
"bg.start"
|
||||
|
|
@ -630,7 +667,9 @@ export type EventName =
|
|||
| "card.ack"
|
||||
| "card.bounce"
|
||||
| "card.briefing"
|
||||
| "card.next"
|
||||
| "card.received"
|
||||
| "card.reply"
|
||||
| "card.status"
|
||||
| "card.submit"
|
||||
| "crew.arrived"
|
||||
|
|
|
|||
|
|
@ -40,6 +40,16 @@ button:disabled { opacity: 0.5; cursor: default; }
|
|||
.warn { color: var(--warn); }
|
||||
.violated { color: var(--violated); }
|
||||
|
||||
/* Локальная демо-навигация существует только при VITE_DEMO_MODE=true. */
|
||||
.demo-login { max-width: 480px; margin-top: 28px; padding: 12px 16px; border: 1px solid #b9bec6; background: #fff; }
|
||||
.demo-login p { margin: 0 0 12px; }
|
||||
.demo-login .warn { margin: 10px 0 0; }
|
||||
.demo-switcher { position: fixed; right: 10px; bottom: 80px; z-index: 60; max-width: calc(100vw - 20px); border: 1px solid #708492; background: #f7fafc; box-shadow: 0 2px 12px #1d2b3240; color: #25343c; font-size: 12px; }
|
||||
.demo-switcher summary { padding: 6px 10px; cursor: pointer; font-weight: 700; }
|
||||
.demo-switcher div { display: grid; min-width: 140px; border-top: 1px solid #b9c8d0; }
|
||||
.demo-switcher a { padding: 8px 10px; color: #154c71; text-decoration: none; }
|
||||
.demo-switcher a:hover, .demo-switcher a:focus-visible { background: #d7ebf6; text-decoration: underline; }
|
||||
|
||||
/* Две колонки: карточка и разговор рядом, как на настоящем АРМ. */
|
||||
.columns { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; }
|
||||
.columns > section { flex: 1 1 420px; min-width: 0; }
|
||||
|
|
@ -169,5 +179,315 @@ button:disabled { opacity: 0.5; cursor: default; }
|
|||
.dds-secondary .bounce-fields { max-height: 200px; overflow-y: auto; font-size: 12px; }
|
||||
.dds-secondary input[type="text"] { max-width: 100%; margin: 4px 0; }
|
||||
.dds-finish { display: block; margin: 12px; }
|
||||
.dds-reply > label { display: block; margin: 12px 12px 5px; font-size: 13px; font-weight: 600; }
|
||||
.dds-reply textarea { box-sizing: border-box; display: block; width: calc(100% - 24px); margin: 0 12px; padding: 8px; border: 1px solid var(--line); font: inherit; resize: vertical; }
|
||||
.dds-reply > button { margin: 0 12px 12px; }
|
||||
.scenario-queue { margin-top: 8px; max-height: 220px; overflow-y: auto; }
|
||||
.scenario-queue summary { cursor: pointer; font-size: 13px; color: #23577e; }
|
||||
@media (max-width: 900px) { .dds-main { grid-template-columns: 1fr; } .dds-right { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } }
|
||||
@media (max-width: 640px) { .dds-right, .dds-summary { display: block; } .dds-header { align-items: flex-start; flex-direction: column; } }
|
||||
|
||||
/* На телефоне действия остаются в одной колонке; таблица реестра читается
|
||||
как список карточек, остальные служебные таблицы допускают прокрутку. */
|
||||
@media (max-width: 700px) {
|
||||
:root { font-size: 14px; }
|
||||
.page { padding: 10px; max-width: 100%; overflow-x: auto; }
|
||||
.columns { display: block; }
|
||||
.columns > section { width: 100%; box-sizing: border-box; margin-bottom: 18px; }
|
||||
.grid { min-width: 0; width: 100%; max-width: 100%; }
|
||||
.grid th, .grid td { width: auto; overflow-wrap: anywhere; }
|
||||
.kio .grid { table-layout: fixed; }
|
||||
.kio .grid tbody th { width: 38%; }
|
||||
.kio input[type="text"], .kio input[type="number"], .kio select { box-sizing: border-box; width: 100%; font-size: 16px; }
|
||||
.kio .signs select { margin-bottom: 4px; }
|
||||
input[type="text"], input[type="password"], select, textarea { max-width: 100%; font-size: 16px; box-sizing: border-box; }
|
||||
button { min-height: 42px; white-space: normal; }
|
||||
.interview-value { font-size: 32px; }
|
||||
.mode-banner, .stand { margin: -10px -10px 10px; padding: 6px 10px; }
|
||||
.dds-panel-title { align-items: flex-start; flex-wrap: wrap; }
|
||||
.dds-register-panel .dds-registry thead { display: none; }
|
||||
.dds-register-panel .dds-registry tr { display: block; border-bottom: 2px solid var(--line); }
|
||||
.dds-register-panel .dds-registry td { display: flex; justify-content: space-between; gap: 12px; border-right: 0; padding: 6px 10px; overflow-wrap: anywhere; }
|
||||
.dds-register-panel .dds-registry td::before { content: attr(data-label); flex: 0 0 38%; font-weight: 600; color: #56616c; }
|
||||
.dds-register-panel .dds-registry td.dds-empty { display: block; }
|
||||
.dds-register-panel .dds-registry td.dds-empty::before { content: none; }
|
||||
.dds-status-action { display: grid; grid-template-columns: 1fr; }
|
||||
.dds-status-action select, .dds-status-action input { min-width: 0; max-width: none; width: 100%; }
|
||||
.dds-phone > select, .dds-dial, .dds-reply textarea { font-size: 16px; }
|
||||
.bounce-fields { grid-template-columns: 1fr; }
|
||||
}
|
||||
|
||||
/* АРМ 112: рабочая геометрия оригинальной карточки — серое поле, белые
|
||||
плотные панели, синие выбранные признаки и оранжевая полоса действий. */
|
||||
.arm-page { box-sizing: border-box; min-height: 100vh; padding: 8px; background: #d5dde2; color: #303943; font-family: Arial, "Segoe UI", sans-serif; font-size: 14px; }
|
||||
.arm-page .mode-banner, .arm-page .stand { margin: -8px -8px 8px; padding: 5px 12px; font-size: 12px; }
|
||||
.arm-topbar { display: flex; align-items: stretch; gap: 5px; min-height: 76px; margin-bottom: 8px; }
|
||||
.arm-topbar > div { box-sizing: border-box; background: #f8f9fa; }
|
||||
.arm-topbar-mark { display: grid; place-items: center; flex: 0 0 72px; color: #ed5931; font-size: 29px; font-weight: 800; letter-spacing: -3px; }
|
||||
.arm-phone-cell { display: flex; flex: 1 1 210px; min-width: 0; flex-direction: column; justify-content: center; gap: 4px; padding: 8px 12px; border-left: 1px solid #d0d5d9; }
|
||||
.arm-phone-cell small, .arm-topbar-title span, .arm-topbar-state small { color: #69727a; font-size: 12px; }
|
||||
.arm-phone-cell strong { overflow: hidden; font-size: 19px; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.arm-phone-cell span { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.arm-phone-main { flex: 1.3 1 250px; }
|
||||
.arm-topbar-title { display: flex; flex: 0 1 285px; min-width: 190px; flex-direction: column; justify-content: center; gap: 4px; padding: 9px 12px; }
|
||||
.arm-topbar-title strong { font-size: 16px; }
|
||||
.arm-topbar-text { min-height: 56px; margin-bottom: 6px; }
|
||||
.arm-topbar-text .arm-topbar-title { flex: 1 1 auto; }
|
||||
.arm-topbar-clock { display: grid; flex: 0 0 132px; place-items: center; background: #252e35 !important; color: white; }
|
||||
.arm-topbar-clock .interview { display: grid; gap: 0; margin: 0; text-align: center; }
|
||||
.arm-topbar-clock .interview-value { font-size: 32px; line-height: 1; }
|
||||
.arm-topbar-clock .interview-label, .arm-topbar-clock .interview-limit { color: white; font-size: 9px; }
|
||||
.arm-topbar-state { display: flex; flex: 0 1 235px; flex-direction: column; justify-content: center; gap: 6px; padding: 10px 14px; }
|
||||
.arm-topbar-state > span { font-weight: 700; }
|
||||
.arm-call-actions { display: flex; align-items: center; gap: 8px; min-height: 54px; margin-bottom: 8px; padding: 6px 10px; background: #f8f9fa; }
|
||||
.arm-call-actions button, .arm-footer button { min-height: 38px; border-color: #aab3b9; background: #fff; font-size: 14px; font-weight: 600; }
|
||||
.arm-call-actions .arm-answer { border-color: #ed5931; color: #df4d29; }
|
||||
.arm-live { color: #a51d1d; font-weight: 700; }
|
||||
.arm-call-actions-note { margin-left: auto; color: #69727a; font-size: 12px; }
|
||||
.arm-briefing { display: grid; grid-template-columns: 180px minmax(0, 1fr); max-height: 82px; margin-bottom: 8px; overflow: auto; background: #f8f9fa; }
|
||||
.arm-briefing-label { display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: 8px 12px; border-right: 1px solid #d1d6da; }
|
||||
.arm-briefing-label span, .arm-briefing p { color: #69727a; font-size: 12px; }
|
||||
.arm-briefing-text { min-height: 0; padding: 8px 12px; overflow: auto; white-space: pre-wrap; line-height: 1.4; }
|
||||
.arm-briefing p { margin: 0; padding: 0 15px 10px; }
|
||||
.arm-card-wrap { min-width: 0; }
|
||||
.arm-footer { position: sticky; z-index: 4; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 70px; margin: 8px -8px 0; padding: 8px 16px; box-sizing: border-box; background: #f26137; color: white; }
|
||||
.arm-footer > span { font-size: 13px; font-weight: 700; }
|
||||
.arm-footer-services { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
|
||||
.arm-footer-services b { padding: 7px 10px; border: 1px solid #fff; font-size: 12px; }
|
||||
.arm-footer-services em { font-size: 12px; font-weight: 400; font-style: normal; }
|
||||
.arm-footer-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
|
||||
.arm-footer button { padding: 8px 16px; border-color: white; background: transparent; color: white; }
|
||||
.arm-footer .arm-primary { border-color: white; background: white; color: #e65a32; font-size: 16px; }
|
||||
.arm-footer button:disabled { opacity: .55; }
|
||||
.arm-message { margin: 8px 0; padding: 8px 12px; background: white; }
|
||||
.arm-secondary { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(420px, 2fr); gap: 8px; margin-top: 8px; }
|
||||
.arm-resolve, .arm-support { min-width: 0; padding: 12px; background: #f8f9fa; }
|
||||
.arm-resolve summary { color: #235b85; cursor: pointer; font-weight: 700; }
|
||||
.arm-resolve input { width: min(100%, 450px); padding: 7px; border: 1px solid #bac1c6; }
|
||||
.arm-resolve button { margin: 2px 4px 2px 0; }
|
||||
.arm-support h2 { margin: 0 0 8px; font-size: 14px; }
|
||||
.arm-support .grid { width: 100%; min-width: 0; }
|
||||
.arm-support .grid th { width: 110px; }
|
||||
|
||||
.kio-arm { min-width: 0; container: kio-card / inline-size; }
|
||||
.kio-arm-top { display: grid; grid-template-columns: minmax(0, 3fr) minmax(240px, 1fr); gap: 8px; margin-bottom: 8px; }
|
||||
.kio-arm-main { display: grid; grid-template-columns: minmax(340px, 45%) minmax(420px, 55%); gap: 8px; align-items: stretch; }
|
||||
.arm-page .kio-arm-main { min-height: calc(100vh - 315px); }
|
||||
.kio-arm-left, .kio-arm-right { display: flex; min-width: 0; flex-direction: column; gap: 8px; }
|
||||
.kio-arm-section { min-width: 0; box-sizing: border-box; background: #f8f9fa; }
|
||||
.kio-arm-section-title { padding: 8px 10px; border-bottom: 1px solid #d5d9dc; color: #67717a; font-size: 12px; }
|
||||
.kio-arm-fields { padding: 4px 10px 12px; }
|
||||
.kio-arm-row { min-width: 0; box-sizing: border-box; }
|
||||
.kio-arm-label { overflow: hidden; margin: 6px 0 3px; color: #6b747d; font-size: 12px; text-overflow: ellipsis; }
|
||||
.kio-arm-value { min-height: 28px; min-width: 0; }
|
||||
.kio-arm input[type="text"], .kio-arm input[type="number"], .kio-arm select, .kio-arm textarea { box-sizing: border-box; display: block; width: 100%; min-height: 29px; padding: 5px 3px; border: 0; border-bottom: 1px solid #cbd1d5; border-radius: 0; background: transparent; color: #303943; font: inherit; outline-offset: -1px; }
|
||||
.kio-arm input:focus, .kio-arm select:focus, .kio-arm textarea:focus { border-bottom-color: #1976b8; outline: 1px solid #1976b8; }
|
||||
.kio-arm input::placeholder, .kio-arm textarea::placeholder { color: #88929a; }
|
||||
.kio-arm textarea { min-height: 170px; resize: vertical; }
|
||||
.kio-arm-readonly { display: block; min-height: 22px; padding: 5px 3px 2px; border-bottom: 1px solid #d2d7db; overflow-wrap: anywhere; }
|
||||
.kio-arm-missing .kio-arm-label .required { color: #e45d32; }
|
||||
.kio-arm-pending .kio-arm-value { background: #fff9d8; }
|
||||
.kio-arm-top .kio-arm-section-title { padding: 6px 10px; }
|
||||
.kio-arm-top .kio-arm-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 12px; padding-bottom: 8px; }
|
||||
.kio-arm-ref .kio-arm-top .kio-arm-section { min-height: 62px; }
|
||||
.kio-arm-ref .kio-arm-top .kio-arm-fields { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 7px 10px; }
|
||||
.kio-arm-ref .kio-arm-top .kio-arm-label { margin: 0 0 2px; }
|
||||
.kio-arm-ref .kio-arm-top .kio-arm-value { min-height: 25px; }
|
||||
.kio-arm-top .kio-arm-section:last-child .kio-arm-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
.kio-arm-address { flex: 1 1 auto; min-height: 340px; }
|
||||
.arm-page .kio-arm-address { flex: 0 0 57%; min-height: 0; }
|
||||
.kio-arm-address .kio-arm-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 13px; }
|
||||
.kio-arm-address .kio-arm-row-address { grid-column: 1 / -1; }
|
||||
.kio-arm-address .kio-arm-row-street { grid-column: span 2; }
|
||||
.kio-arm-description { flex: 0 0 auto; }
|
||||
.arm-page .kio-arm-description { display: flex; flex: 1 1 auto; flex-direction: column; }
|
||||
.kio-arm-description .kio-arm-section-title { border-bottom: 0; }
|
||||
.kio-arm-description .kio-arm-fields { padding-top: 0; }
|
||||
.arm-page .kio-arm-description .kio-arm-fields { display: flex; flex: 1; }
|
||||
.arm-page .kio-arm-description .kio-arm-row, .arm-page .kio-arm-description .kio-arm-value { display: flex; flex: 1; min-width: 0; }
|
||||
.arm-page .kio-arm-description textarea { flex: 1; min-height: 120px; }
|
||||
.kio-arm-description .kio-arm-label { display: none; }
|
||||
.kio-arm-incident { flex: 1 1 auto; min-height: 340px; }
|
||||
.kio-arm-incident .kio-arm-section-title, .kio-arm-details .kio-arm-section-title { background: #303438; color: #fff; font-size: 13px; font-weight: 700; }
|
||||
.kio-arm-incident .kio-arm-row, .kio-arm-dispatch .kio-arm-row, .kio-arm-details .kio-arm-row { display: grid; grid-template-columns: minmax(130px, 31%) minmax(0, 1fr); gap: 10px; align-items: start; min-height: 42px; }
|
||||
.kio-arm-incident .kio-arm-label, .kio-arm-dispatch .kio-arm-label, .kio-arm-details .kio-arm-label { margin-top: 12px; }
|
||||
.kio-arm-incident .kio-arm-row-signs { display: block; padding: 7px 0 12px; border-bottom: 1px solid #d6dade; }
|
||||
.kio-arm-incident .kio-arm-row-signs .kio-arm-label { margin: 0 0 7px; font-size: 16px; }
|
||||
.kio-arm-ref .kio-arm-incident .kio-arm-row-incident_type { display: block; min-height: 0; padding: 6px 0 10px; border-bottom: 1px solid #d6dade; }
|
||||
.kio-arm-ref .kio-arm-incident .kio-arm-row-incident_type .kio-arm-label { margin: 2px 0 12px; font-size: 20px; font-weight: 400; }
|
||||
.kio-arm-type-picker { display: flex; flex-wrap: wrap; gap: 7px; }
|
||||
.kio-arm-type-picker button { padding: 8px 12px; border: 1px solid #b3bdc5; background: white; color: #303943; font-size: 13px; font-weight: 700; }
|
||||
.kio-arm-type-picker .kio-arm-selected { border-color: #1876b4; background: #1876b4; color: white; }
|
||||
.kio-arm-incident .signs { display: flex; flex-wrap: wrap; gap: 5px; }
|
||||
.kio-arm-incident .signs select { flex: 1 1 180px; width: auto; max-width: 100%; padding: 7px 8px; border: 1px solid #acb5bc; background: white; }
|
||||
.kio-arm-ref .signs-selected { display: flex; flex: 1 1 100%; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
|
||||
.kio-arm-ref .signs-selected span { padding: 7px 10px; background: #1876b4; color: white; font-size: 12px; font-weight: 700; }
|
||||
.kio-arm-choice { display: flex; flex-wrap: wrap; gap: 6px; padding: 5px 0; }
|
||||
.kio-arm-choice button { min-width: 49px; padding: 6px 11px; border: 1px solid #aeb6bd; background: white; font-size: 13px; font-weight: 700; }
|
||||
.kio-arm-choice .kio-arm-selected { border-color: #1979bb; background: #1979bb; color: white; }
|
||||
.kio-arm-dispatch .kio-arm-fields { padding-top: 5px; }
|
||||
.kio-arm-details .kio-arm-fields { padding-top: 8px; }
|
||||
|
||||
@media (max-width: 950px) {
|
||||
.arm-topbar { flex-wrap: wrap; }
|
||||
.arm-topbar-title { flex: 1 1 190px; }
|
||||
.arm-topbar-clock { flex: 0 0 110px; }
|
||||
.kio-arm-main { grid-template-columns: 1fr; }
|
||||
.kio-arm-address, .kio-arm-incident { min-height: 0; }
|
||||
.arm-page .kio-arm-main { min-height: 0; }
|
||||
.arm-page .kio-arm-address { flex-basis: auto; }
|
||||
}
|
||||
@container kio-card (max-width: 800px) {
|
||||
.kio-arm-top, .kio-arm-main { grid-template-columns: 1fr; }
|
||||
.kio-arm-address, .kio-arm-incident { min-height: 0; }
|
||||
}
|
||||
@container kio-card (max-width: 480px) {
|
||||
.kio-arm-top .kio-arm-fields, .kio-arm-address .kio-arm-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
.kio-arm-incident .kio-arm-row, .kio-arm-dispatch .kio-arm-row, .kio-arm-details .kio-arm-row { grid-template-columns: 110px minmax(0, 1fr); }
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.arm-page { padding: 6px; }
|
||||
.arm-page .mode-banner, .arm-page .stand { margin: -6px -6px 6px; }
|
||||
.arm-topbar-mark { flex-basis: 55px; }
|
||||
.arm-topbar-clock { flex: 1 1 100%; min-height: 55px; }
|
||||
.arm-topbar-clock .interview { display: flex; align-items: baseline; gap: 10px; }
|
||||
.arm-call-actions, .arm-footer { flex-wrap: wrap; }
|
||||
.arm-call-actions-note { flex: 1 1 100%; margin: 0; }
|
||||
.arm-footer { margin-right: -6px; margin-left: -6px; }
|
||||
.arm-briefing { grid-template-columns: 1fr; max-height: 160px; }
|
||||
.arm-briefing-label { border-right: 0; border-bottom: 1px solid #d1d6da; }
|
||||
.arm-secondary, .kio-arm-top { grid-template-columns: 1fr; }
|
||||
.kio-arm-top .kio-arm-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
.kio-arm-address .kio-arm-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
.kio-arm-incident .kio-arm-row, .kio-arm-dispatch .kio-arm-row, .kio-arm-details .kio-arm-row { grid-template-columns: 115px minmax(0, 1fr); }
|
||||
.kio-arm input[type="text"], .kio-arm input[type="number"], .kio-arm select, .kio-arm textarea { font-size: 16px; }
|
||||
}
|
||||
|
||||
/* ДДС: повтор композиции предоставленного АРМ (msg480, кадры 2–13, 20).
|
||||
Тёмный реестр и нижняя полоса служб — ориентиры боевого интерфейса. */
|
||||
.dds-workspace { box-sizing: border-box; max-width: none; min-height: 100vh; padding: 0; background: #d9e0e5; font-family: Arial, "Segoe UI", sans-serif; font-size: 13px; }
|
||||
.dds-app-top { box-sizing: border-box; display: flex; align-items: center; gap: 12px; min-height: 38px; padding: 4px 14px; background: #edf4fa; border-bottom: 1px solid #c7d3dc; color: #293740; }
|
||||
.dds-brand { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; background: #bd2630; color: white; font-weight: 800; border-radius: 4px; }
|
||||
.dds-app-name { flex: 1; font-weight: 600; }
|
||||
.dds-top-role { color: #52616d; }
|
||||
.dds-workspace .dds-connection { color: #52616d; font-size: 12px; }
|
||||
.dds-search { display: grid; grid-template-columns: minmax(0, 1fr) 340px; min-height: 122px; background: #f7f9fa; }
|
||||
.dds-search-main { padding: 14px 18px 10px; }
|
||||
.dds-search-main h1 { margin: 0 0 8px; padding-bottom: 4px; border-bottom: 1px solid #252f35; font-size: 30px; line-height: 1.2; font-weight: 400; }
|
||||
.dds-search-line { display: flex; align-items: center; gap: 8px; }
|
||||
.dds-search-line label { font-size: 12px; color: #53616c; }
|
||||
.dds-search-line input { flex: 1; min-width: 100px; max-width: 520px; padding: 5px 8px; border: 0; border-bottom: 1px solid #8b989f; background: transparent; font: inherit; }
|
||||
.dds-search-line button { padding: 4px 10px; font-size: 12px; }
|
||||
.dds-clock { display: grid; align-content: center; grid-template-columns: 1fr auto; gap: 3px 8px; padding: 10px 16px; background: #2d363b; color: white; }
|
||||
.dds-clock small { font-size: 14px; font-weight: 600; }
|
||||
.dds-clock strong { grid-row: span 2; font-size: 44px; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
|
||||
.dds-clock span { font-size: 11px; color: #b9c5ca; }
|
||||
.dds-register-panel { box-sizing: border-box; min-height: calc(100vh - 160px); margin: 0; padding: 10px 17px 24px; border: 0; background: #7e8d96; color: #f5f8fa; }
|
||||
.dds-register-panel .dds-panel-title { padding: 8px 8px 12px; border: 0; background: transparent; color: #fff; }
|
||||
.dds-register-panel .dds-panel-title h2 { font-size: 18px; }
|
||||
.dds-register-panel .dds-panel-title span { color: #dce5e8; }
|
||||
.dds-register-panel .dds-registry { color: #fff; border-collapse: separate; border-spacing: 0 1px; font-size: 12px; }
|
||||
.dds-register-panel .dds-registry th { padding: 4px 7px 9px; border: 0; background: transparent; color: #e5ecf0; font-weight: 400; }
|
||||
.dds-register-panel .dds-registry td { padding: 7px; border-right: 1px solid #71808a; border-bottom: 0; background: #303b42; color: #eef5f8; }
|
||||
.dds-register-panel .dds-registry tr.dds-selected td { background: #303b42; }
|
||||
.dds-register-panel .dds-registry tr.dds-selected { box-shadow: none; }
|
||||
.dds-register-panel .dds-registry td small { display: block; margin-top: 5px; padding-top: 5px; border-top: 1px solid #697881; color: #ccd6dc; }
|
||||
.dds-register-panel .dds-registry td.dds-empty { background: transparent; color: #fff; }
|
||||
.dds-row-open, .dds-row-link { min-height: 0; padding: 0 3px; border: 0; background: transparent; color: #fff; font: inherit; font-weight: 700; text-decoration: underline; }
|
||||
.dds-row-open:hover, .dds-row-link:hover { color: #aedbf9; }
|
||||
.dds-register-panel .dds-hint { color: #edf3f6; }
|
||||
.dds-case-layout { display: flex; flex-direction: column; min-height: calc(100vh - 38px); background: #d7dfe4; }
|
||||
.dds-case-top { display: flex; align-items: center; gap: 12px; min-height: 30px; padding: 3px 8px; background: #eaf1f6; color: #24323a; }
|
||||
.dds-case-top button { min-height: 0; padding: 3px 8px; border: 0; background: transparent; color: #164d70; }
|
||||
.dds-case-top span { font-size: 14px; }
|
||||
.dds-call-strip { display: grid; grid-template-columns: .9fr 1.1fr 1.1fr 1.1fr 200px 100px; gap: 5px; padding: 7px; background: #d0d8dd; }
|
||||
.dds-call-strip > div { box-sizing: border-box; min-width: 0; min-height: 64px; padding: 6px 8px; background: #f7f9fa; }
|
||||
.dds-call-strip > div:not(.dds-case-top-buttons) { display: grid; align-content: start; gap: 3px; }
|
||||
.dds-call-strip small { color: #56636c; font-size: 11px; }
|
||||
.dds-call-strip strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.dds-call-icon { float: left; color: #65737b; font-size: 18px; }
|
||||
.dds-call-off { border-left: 4px solid #697984; }
|
||||
.dds-case-top-buttons { display: grid; gap: 5px; padding: 0 !important; background: transparent !important; }
|
||||
.dds-case-top-buttons button { min-height: 0; padding: 5px; background: #176b9d; color: #fff; border: 0; font-size: 11px; }
|
||||
.dds-case-top-buttons button:last-child { background: #303a41; }
|
||||
.dds-case-meta { display: grid; grid-template-columns: 1.2fr 1fr 65px; gap: 6px; padding: 2px 7px 6px; background: #d0d8dd; }
|
||||
.dds-case-meta span { min-height: 29px; padding: 7px; background: #f7f9fa; }
|
||||
.dds-case-summary { display: grid; grid-template-columns: .95fr 1.05fr; gap: 7px; padding: 0 7px; }
|
||||
.dds-case-address, .dds-case-classification { min-width: 0; }
|
||||
.dds-case-address > strong, .dds-case-address > span, .dds-case-address > div,
|
||||
.dds-case-classification > strong, .dds-case-classification > div { display: block; box-sizing: border-box; min-height: 30px; margin-bottom: 5px; padding: 7px 9px; background: #f7f9fa; }
|
||||
.dds-case-address > div { min-height: 330px; }
|
||||
.dds-case-classification > strong { background: #2c3439; color: #fff; }
|
||||
.dds-case-classification > div:first-of-type { font-weight: 600; }
|
||||
.dds-case-stage { position: relative; flex: 1; min-height: 360px; }
|
||||
.dds-case-drawer { position: absolute; bottom: 12px; left: 4%; z-index: 3; box-sizing: border-box; width: min(920px, 92%); max-height: min(65vh, 650px); overflow-y: auto; border: 1px solid #69899a; background: #f7f9fa; box-shadow: 0 8px 32px #1d2b3280; }
|
||||
.dds-drawer-title { position: sticky; top: 0; z-index: 4; display: flex; align-items: center; justify-content: space-between; padding: 4px 9px; background: #1d6e9e; color: #fff; }
|
||||
.dds-drawer-title button { min-height: 0; padding: 0 7px; border: 0; background: transparent; color: #fff; font-size: 22px; }
|
||||
.dds-case-drawer .dds-main { display: block; margin: 0; padding: 8px; }
|
||||
.dds-case-drawer .dds-panel { margin: 0; border: 0; }
|
||||
.dds-case-drawer .dds-right { display: block; }
|
||||
.dds-case-drawer .dds-panel-title { padding: 5px 8px; }
|
||||
.dds-case-drawer .dds-panel-title h2 { font-size: 13px; }
|
||||
.dds-case-drawer-status { bottom: 0; left: 8.5%; width: min(1050px, 86%); border: 0; box-shadow: 0 -4px 20px #1d2b3233; }
|
||||
.dds-case-drawer-status > .dds-drawer-title { display: none; }
|
||||
.dds-case-drawer-status .dds-main { padding: 0; }
|
||||
.dds-case-drawer-status .dds-panel-title { display: none; }
|
||||
.dds-case-drawer-status .dds-hint { margin: 0; padding: 2px 8px 4px; background: #fff; font-size: 10px; }
|
||||
.dds-status-history { position: relative; max-height: 120px; overflow-y: auto; padding: 4px 30px 4px 10px; background: #1e6e9e; color: #fff; }
|
||||
.dds-status-history > strong { display: block; margin-bottom: 6px; }
|
||||
.dds-status-history > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; padding: 3px 0; border-bottom: 1px solid #5a9ac0; font-size: 11px; }
|
||||
.dds-status-history .dds-status-close { position: absolute; top: 1px; right: 7px; min-height: 0; padding: 0 3px; border: 0; background: transparent; color: #fff; font-size: 19px; }
|
||||
.dds-status-editor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr) 28px 28px; gap: 5px; align-items: end; padding: 3px 6px; background: #fff; }
|
||||
.dds-status-editor label { display: grid; gap: 2px; min-width: 0; color: #5c6b75; font-size: 10px; }
|
||||
.dds-status-editor select, .dds-status-editor input { box-sizing: border-box; width: 100%; min-width: 0; min-height: 25px; padding: 2px 4px; border: 0; border-bottom: 1px solid #8999a2; background: #fff; color: #26343d; font-size: 12px; }
|
||||
.dds-status-editor button { min-width: 0; min-height: 25px; padding: 0; border: 1px solid #9bacb6; color: #25333b; font-size: 18px; }
|
||||
.dds-status-warning { grid-column: 1 / -1; font-size: 11px; }
|
||||
.dds-service-dock { display: flex; align-items: stretch; min-height: 64px; overflow-x: auto; background: #43525b; color: #fff; }
|
||||
.dds-dock-label { display: flex; align-items: center; padding: 8px; border-right: 1px solid #85929b; font-size: 12px; }
|
||||
.dds-service-dock button { display: grid; align-content: center; gap: 3px; flex: 0 0 auto; min-width: 115px; padding: 8px 11px; border: 0; border-right: 1px solid #87949b; background: #43525b; color: #fff; text-align: left; }
|
||||
.dds-service-dock button:hover, .dds-service-dock button.active { background: #176b9d; }
|
||||
.dds-service-dock button:disabled { color: #d0d7db; }
|
||||
.dds-service-dock button small { color: #d8e5ea; font-size: 10px; }
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.dds-search { grid-template-columns: 1fr 220px; }
|
||||
.dds-clock { grid-template-columns: 1fr; }
|
||||
.dds-clock strong { grid-row: auto; font-size: 30px; }
|
||||
.dds-call-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
||||
.dds-case-summary { grid-template-columns: 1fr 1fr; }
|
||||
}
|
||||
@media (max-width: 700px) {
|
||||
.dds-workspace { overflow-x: hidden; }
|
||||
.dds-app-top { flex-wrap: wrap; }
|
||||
.dds-app-name { flex-basis: calc(100% - 45px); }
|
||||
.dds-search { display: block; }
|
||||
.dds-search-main h1 { font-size: 24px; }
|
||||
.dds-search-line { flex-wrap: wrap; }
|
||||
.dds-search-line label { flex-basis: 100%; }
|
||||
.dds-clock { display: flex; align-items: center; justify-content: space-between; min-height: 42px; }
|
||||
.dds-clock small { font-size: 11px; }
|
||||
.dds-clock strong { font-size: 22px; }
|
||||
.dds-clock span { display: none; }
|
||||
.dds-register-panel { min-height: calc(100vh - 190px); padding: 8px; }
|
||||
.dds-register-panel .dds-registry tr { border-bottom: 2px solid #b1c2cb; }
|
||||
.dds-register-panel .dds-registry td { background: #303b42; color: #fff; border-bottom: 1px solid #596b75; }
|
||||
.dds-register-panel .dds-registry td::before { color: #d2dce1; }
|
||||
.dds-case-top { flex-wrap: wrap; }
|
||||
.dds-call-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
.dds-call-strip .dds-call-incident, .dds-case-top-buttons { grid-column: span 2; }
|
||||
.dds-case-meta { grid-template-columns: 1fr 1fr; }
|
||||
.dds-case-meta span:last-child { display: none; }
|
||||
.dds-case-summary { display: block; }
|
||||
.dds-case-address > div { min-height: 150px; }
|
||||
.dds-case-stage { min-height: 0; }
|
||||
.dds-case-drawer { position: static; width: auto; max-height: none; margin: 10px; overflow: visible; }
|
||||
.dds-service-dock { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; }
|
||||
.dds-dock-label { grid-column: span 2; }
|
||||
.dds-service-dock button { min-width: 0; }
|
||||
.dds-case-drawer .dds-status-table, .dds-case-drawer .dds-registry { min-width: 500px; }
|
||||
.dds-case-drawer-status { width: auto; }
|
||||
.dds-status-editor { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
.dds-status-editor label { grid-column: 1 / -1; }
|
||||
.dds-status-editor button { min-height: 38px; }
|
||||
.dds-status-history > div { grid-template-columns: 1fr; gap: 2px; }
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue