надо составить код html-страницы, чтобы обеспечить отображение dashboard, которые могут быть включены областями друг к другу, e.g. четыре основных направления a, b, c, d также дирекции такие как ci, cv, bm, ag-05, bg, dn, ag-06, ds, br, bf, cb, bs, ca, cc-01, bd-01, cc-02, ct, cq, gp, ce, dg, ga, gl, gt которые могут накладываться на несколько направлений a, b, c, d прямым выбором и указанием выбора направлений. подробнее расскажу, что Каждая из дирекций содержит определенный набор процессов e.g.: для ci в направлении a процессы hsa, isa в направлении b процесс ins, для cv в направлении b процесс com, для bm в направлении b процессы tim, inp, для ag-05 в направлении b процесс rsk, для bg в направлении b процессы gir, lpr, для dn в направлении a процесс nsa, для ag-06 в направлении b процесс ica, для ds в направлении b процессы con, req, для bf в направлении b процесс fin, для br в направлении b процесс ecm, для cb в направлении a процесс fsa, для bs в направлении a процессы inf, ecs, phs, для ca в направлении c процессы pcc, для cc-01 в направлении c процесс cow, для bd-01 в направлении c процесс els, для cc-02 в направлении c процесс des, для ct в направлении a процессы rsa, epr, env также в направлении c процессы opr, dec также в направлении d процессы mar, mga, mtr, для cq в направлении d процесс doc также в направлении b процессы gua, cha, для gp в направлении d процесс hrs, для ce в направлении d процесс ems, для dg в направлении d процесс trn, для ga в направлении d процессы int, adm, для gl в направлении d процесс lca, для gt в направлении d процесс pro. для каждого процесса должна быть присвоена индентификация по следующему алгоритму "направление"- "дирецкия"- "процесс" e.g.: для направления b дирекции bm и процесса tim будет b-bm-tim. такой индентификатор необходим для дальнейшего выбора и построения между идентификаторами связей. нужно внести логику в код так, чтобы dashboard дирекций графически накладывался на выбранные dashboard направлений. а также для указанных связей графически отображались линии. должна быть обеспечена возможность сохранять информацию из html и загружать в html используя файл базы данных в формате JSON и следующей структуре файла JSON: { "id": "RoiTbL_6Ny3oPjd", "name": "Dashboard", "fields": [ { "id": "RoiF_Egw5fhXx", "name": "код процесса", "type": "text", "width": 250, "required": false, "defaultValue": null, "description": "", "options": [], "createdAt": "2025-07-04T12:41:50+03:00", "updatedAt": "2025-07-04T12:41:50+03:00" }, { "id": "RoiF_DJ6nTQjS", "name": "направление", "type": "select", "width": 250, "required": false, "defaultValue": null, "description": "", "options": [ { "value": "A. Процессы безопасности", "label": "A. Процессы безопасности" }, { "value": "B. Процессы управления", "label": "B. Процессы управления" }, { "value": "C. Основные процессы", "label": "C. Основные процессы" }, { "value": "D. Обеспечивающие процессы", "label": "D. Обеспечивающие процессы" } ], "createdAt": "2025-07-04T12:21:03+03:00", "updatedAt": "2025-07-04T12:21:03+03:00" }, { "id": "RoiF_y6gbxKzn", "name": "дирекция", "type": "select", "width": 250, "required": false, "defaultValue": null, "description": "", "options": [ { "value": "Главный инспектор (CI)", "label": "Главный инспектор (CI)" }, { "value": "Директор по контролю и управлению стоимостью проекта (CV)", "label": "Директор по контролю и управлению стоимостью проекта (CV)" }, { "value": "Директор по проектному управлению (BM)", "label": "Директор по проектному управлению (BM)" }, { "value": "Директор по управлению рисками (AG-05)", "label": "Директор по управлению рисками (AG-05)" }, { "value": "Заместитель генерального директора по корпоративным функциям, инфраструктурным проектам и GR (BG)", "label": "Заместитель генерального директора по корпоративным функциям, инфраструктурным проектам и GR (BG)" }, { "value": "Директор по внутреннему контролю и аудиту (AG-06)", "label": "Директор по внутреннему контролю и аудиту (AG-06)" }, { "value": "Заместитель генерального директора - Финансовый директор (BF)", "label": "Заместитель генерального директора - Финансовый директор (BF)" }, { "value": "Директор по коммуникациям (BR)", "label": "Директор по коммуникациям (BR)" }, { "value": "Заместитель технического директора по инженерно-технической поддержке (DS)", "label": "Заместитель технического директора по инженерно-технической поддержке (DS)" }, { "value": "Заместитель технического директора по ядерной безопасности (DN)", "label": "Заместитель технического директора по ядерной безопасности (DN)" }, { "value": "Служба пожарной безопасности (CB)", "label": "Служба пожарной безопасности (CB)" }, { "value": "Заместитель генерального директора - Директор по безопасности (BS)", "label": "Заместитель генерального директора - Директор по безопасности (BS)" }, { "value": "Директор по пусконаладочным работам (CA)", "label": "Директор по пусконаладочным работам (CA)" }, { "value": "Коммерческий директор (BD-01)", "label": "Коммерческий директор (BD-01)" }, { "value": "Директор по строительству и организации производства (CC-01)", "label": "Директор по строительству и организации производства (CC-01)" }, { "value": "Директор по проектированию (CC-02)", "label": "Директор по проектированию (CC-02)" }, { "value": "Заместитель директора строящейся АЭС - Технический директор (CT)", "label": "Заместитель директора строящейся АЭС - Технический директор (CT)" }, { "value": "Директор по качеству (CQ)", "label": "Директор по качеству (CQ)" }, { "value": "Директор по персоналу (GP)", "label": "Директор по персоналу (GP)" }, { "value": "Директор по оборудованию и материально-техническому обеспечению (CE)", "label": "Директор по оборудованию и материально-техническому обеспечению (CE)" }, { "value": "Заместитель технического директора по подготовке персонала - начальник Учебно-тренировочного центра (УТЦ) (DG)", "label": "Заместитель технического директора по подготовке персонала - начальник Учебно-тренировочного центра (УТЦ) (DG)" }, { "value": "Директор по административному сопровождению деятельности (GA)", "label": "Директор по административному сопровождению деятельности (GA)" }, { "value": "Директор по правовой и корпоративной работе(GL)", "label": "Директор по правовой и корпоративной работе(GL)" }, { "value": "Директор по закупкам (GT)", "label": "Директор по закупкам (GT)" } ], "createdAt": "2025-07-04T12:33:16+03:00", "updatedAt": "2025-07-04T12:46:11+03:00" }, { "id": "RoiF_DowKyGkr", "name": "процесс", "type": "select", "width": 250, "required": false, "defaultValue": null, "description": "", "options": [ { "value": "Управление охраной здоровья и безопасностью труда [HSA]", "label": "Управление охраной здоровья и безопасностью труда [HSA]" }, { "value": "Производственный контроль технической и промышленной безопасности [ISA]", "label": "Производственный контроль технической и промышленной безопасности [ISA]" }, { "value": "Контрольно-инспекционная деятельность [INS]", "label": "Контрольно-инспекционная деятельность [INS]" }, { "value": "Управление ядерной безопасностью [NSA]", "label": "Управление ядерной безопасностью [NSA]" }, { "value": "Управление пожарной безопасностью [FSA]", "label": "Управление пожарной безопасностью [FSA]" }, { "value": "Управление информационной безопасностью [INF]", "label": "Управление информационной безопасностью [INF]" }, { "value": "Управление экономической безопасностью [ECS]", "label": "Управление экономической безопасностью [ECS]" }, { "value": "Управление физической защитой [PHS]", "label": "Управление физической защитой [PHS]" }, { "value": "Управление радиационной безопасностью [RSA]", "label": "Управление радиационной безопасностью [RSA]" }, { "value": "Управление аварийной готовностью и реагированием [EPR]", "label": "Управление аварийной готовностью и реагированием [EPR]" }, { "value": "Управление защитой окружающей среды [ENV]", "label": "Управление защитой окружающей среды [ENV]" }, { "value": "Эксплуатация [OPR]", "label": "Эксплуатация [OPR]" }, { "value": "Вывод из эксплуатации [DEC]", "label": "Вывод из эксплуатации [DEC]" }, { "value": "Техническое обслуживание и ремонт [MAR]", "label": "Техническое обслуживание и ремонт [MAR]" }, { "value": "Управление старением [MGA]", "label": "Управление старением [MGA]" }, { "value": "Метрологическое обеспечение [MTR]", "label": "Метрологическое обеспечение [MTR]" }, { "value": "Поставка оборудования [EMS]", "label": "Поставка оборудования [EMS]" }, { "value": "Управление персоналом [HRS]", "label": "Управление персоналом [HRS]" }, { "value": "Подготовка персонала [TRN]", "label": "Подготовка персонала [TRN]" }, { "value": "Информационные технологии [INT]", "label": "Информационные технологии [INT]" }, { "value": "Административно-хозяйственное обеспечение [ADM]", "label": "Административно-хозяйственное обеспечение [ADM]" }, { "value": "Правовая и корпоративная деятельность [LCA]", "label": "Правовая и корпоративная деятельность [LCA]" }, { "value": "Закупки [PRO]", "label": "Закупки [PRO]" }, { "value": "Управление проектированием [DES]", "label": "Управление проектированием [DES]" }, { "value": "Управление строительно-монтажными работами [COW]", "label": "Управление строительно-монтажными работами [COW]" }, { "value": "Управление ПНР и вводом в эксплуатацию [PCC]", "label": "Управление ПНР и вводом в эксплуатацию [PCC]" }, { "value": "Сбыт электроэнергии [ELS]", "label": "Сбыт электроэнергии [ELS]" }, { "value": "Внутренний контроль и аудит [ICA]", "label": "Внутренний контроль и аудит [ICA]" }, { "value": "Управление конфигурацией [CON]", "label": "Управление конфигурацией [CON]" }, { "value": "Управление требованиями [REQ]", "label": "Управление требованиями [REQ]" }, { "value": "Управление сроками [TIM]", "label": "Управление сроками [TIM]" }, { "value": "Управление интеграцией Проекта [INP]", "label": "Управление интеграцией Проекта [INP]" }, { "value": "Управление стоимостью [COM]", "label": "Управление стоимостью [COM]" }, { "value": "Управление рисками [RSK]", "label": "Управление рисками [RSK]" }, { "value": "Взаимодействие с государственными органами и международное сотрудничество [GIR]", "label": "Взаимодействие с государственными органами и международное сотрудничество [GIR]" }, { "value": "Управление лицензионной и разрешительной деятельностью [LPR]", "label": "Управление лицензионной и разрешительной деятельностью [LPR]" }, { "value": "Финансовая деятельность [FIN]", "label": "Финансовая деятельность [FIN]" }, { "value": "Внешние коммуникации [ECM]", "label": "Внешние коммуникации [ECM]" }, { "value": "Управление качеством [QUA]", "label": "Управление качеством [QUA]" }, { "value": "Управление изменениями [CHA]", "label": "Управление изменениями [CHA]" }, { "value": "Документационное обеспечение [DOC]", "label": "Документационное обеспечение [DOC]" } ], "createdAt": "2025-07-04T12:41:19+03:00", "updatedAt": "2025-07-04T12:41:19+03:00" }, { "id": "RoiF_BRg1hWLs", "name": "связи", "type": "link", "width": 250, "required": false, "defaultValue": null, "description": "", "options": [], "createdAt": "2025-07-04T12:42:09+03:00", "updatedAt": "2025-07-04T12:42:09+03:00" } ], "records": [ { "id": "Roi_REC_KgfciJBB", "data": { "RoiF_Egw5fhXx": "b-bm-tim", "RoiF_DJ6nTQjS": "B. Процессы управления", "RoiF_y6gbxKzn": "Директор по проектному управлению (BM)", "RoiF_DowKyGkr": "Управление сроками [TIM]", "RoiF_BRg1hWLs": "" }, "links": [], "createdAt": "2025-07-04T12:47:06+03:00", "updatedAt": "2025-07-04T12:47:06+03:00", "hierarchyNumber": "1", "level": 0, "parentId": null, "isCollapsed": false } ], "createdAt": "2025-07-04T12:46:27+03:00", "updatedAt": "2025-07-04T12:47:06+03:00" }