|
|
import { Fragment, useState, useRef } from "react";
|
|
|
import { Dialog, Disclosure, Menu, Transition } from "@headlessui/react";
|
|
|
import { XMarkIcon } from "@heroicons/react/24/outline";
|
|
|
import {
|
|
|
ChevronUpIcon,
|
|
|
ChevronDownIcon,
|
|
|
FunnelIcon,
|
|
|
MinusIcon,
|
|
|
PlusIcon,
|
|
|
} from "@heroicons/react/20/solid";
|
|
|
|
|
|
import Map, { Layer, Source, Popup, ScaleControl } from "react-map-gl";
|
|
|
import mapstyle from "./points.json";
|
|
|
|
|
|
mapstyle.sources.remap.url = import.meta.env.MODE === "development" ? "http://localhost:8080/capabilities/remap.json" : mapstyle.sources.remap.url
|
|
|
|
|
|
const MAPBOX_TOKEN =
|
|
|
"pk.eyJ1IjoiZ2hlcm1hbnQiLCJhIjoiY2wzbHR0YW1sMXB0YjNkcXd5NWpqaWpybiJ9.jyLcIcB7NLbtZzGYIJZWWg";
|
|
|
|
|
|
const paintedLayers = mapstyle.layers.reduce((acc, cur) => ({ ...acc, [cur.id]: cur }), {})
|
|
|
const pointsColors = mapstyle.layers.find(layer => layer.id == "Объекты").paint["circle-color"].slice(2, -1).reduce((acc, cur, i, source) => (i % 2 == 0 ? [...acc, { name: cur, color: source[i + 1] }] : acc), [])
|
|
|
const pointsSizes = mapstyle.layers.find(layer => layer.id == "Объекты").paint["circle-radius"].slice(3).reduce((acc, cur, i, source) => (i % 2 == 0 ? [...acc, { value: cur, size: source[i + 1] }] : acc), [])
|
|
|
|
|
|
const initialFilters = [
|
|
|
{
|
|
|
id: "id_tech",
|
|
|
name: "ВИЭ-технология",
|
|
|
options: [
|
|
|
{
|
|
|
"value": 1,
|
|
|
"label": "СЭС",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": 2,
|
|
|
"label": "ВЭС",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": 3,
|
|
|
"label": "мГЭС",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": 4,
|
|
|
"label": "БиоЭС (биомасса)",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": 5,
|
|
|
"label": "БиоЭС (биогаз)",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": 6,
|
|
|
"label": "БиоЭС (свалочный газ)",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": 8,
|
|
|
"label": "ПЭС",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": 9,
|
|
|
"label": "ГеоЭС",
|
|
|
"checked": true
|
|
|
}
|
|
|
]
|
|
|
},
|
|
|
{
|
|
|
"id": "region_name",
|
|
|
"name": "Регион размещения",
|
|
|
"options": [
|
|
|
{
|
|
|
"value": "Республика Адыгея ",
|
|
|
"label": "Республика Адыгея ",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": "Республика Алтай",
|
|
|
"label": "Республика Алтай",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": "Республика Башкортостан",
|
|
|
"label": "Республика Башкортостан",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": "Республика Бурятия",
|
|
|
"label": "Республика Бурятия",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": "Республика Дагестан",
|
|
|
"label": "Республика Дагестан",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": "Республика Ингушетия",
|
|
|
"label": "Республика Ингушетия",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": "Кабардино-Балкарская Республика",
|
|
|
"label": "Кабардино-Балкарская Республика",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": "Республика Калмыкия",
|
|
|
"label": "Республика Калмыкия",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": "Карачаево-Черкесская Республика",
|
|
|
"label": "Карачаево-Черкесская Республика",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": "Республика Карелия",
|
|
|
"label": "Республика Карелия",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": "Республика Коми",
|
|
|
"label": "Республика Коми",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": "Республика Крым",
|
|
|
"label": "Республика Крым",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": "Республика Марий Эл",
|
|
|
"label": "Республика Марий Эл",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": "Республика Мордовия",
|
|
|
"label": "Республика Мордовия",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": "Республика Саха (Якутия)",
|
|
|
"label": "Республика Саха (Якутия)",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": "Республика Северная Осетия – Алания",
|
|
|
"label": "Республика Северная Осетия – Алания",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": "Республика Татарстан ",
|
|
|
"label": "Республика Татарстан ",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": "Республика Тыва",
|
|
|
"label": "Республика Тыва",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": "Удмуртская Республика",
|
|
|
"label": "Удмуртская Республика",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": "Республика Хакасия",
|
|
|
"label": "Республика Хакасия",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": "Чеченская Республика",
|
|
|
"label": "Чеченская Республика",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": "Чувашская Республика",
|
|
|
"label": "Чувашская Республика",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": "Алтайский край",
|
|
|
"label": "Алтайский край",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": "Забайкальский край",
|
|
|
"label": "Забайкальский край",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": "Камчатский край",
|
|
|
"label": "Камчатский край",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": "Краснодарский край",
|
|
|
"label": "Краснодарский край",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": "Красноярский край",
|
|
|
"label": "Красноярский край",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": "Пермский край",
|
|
|
"label": "Пермский край",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": "Приморский край",
|
|
|
"label": "Приморский край",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": "Ставропольский край",
|
|
|
"label": "Ставропольский край",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": "Хабаровский край",
|
|
|
"label": "Хабаровский край",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": "Амурская область",
|
|
|
"label": "Амурская область",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": "Архангельская область",
|
|
|
"label": "Архангельская область",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": "Астраханская область",
|
|
|
"label": "Астраханская область",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": "Белгородская область",
|
|
|
"label": "Белгородская область",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": "Брянская область",
|
|
|
"label": "Брянская область",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": "Владимирская область",
|
|
|
"label": "Владимирская область",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": "Волгоградская область",
|
|
|
"label": "Волгоградская область",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": "Вологодская область",
|
|
|
"label": "Вологодская область",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": "Воронежская область",
|
|
|
"label": "Воронежская область",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": "Ивановская область",
|
|
|
"label": "Ивановская область",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": "Иркутская область",
|
|
|
"label": "Иркутская область",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": "Калининградская область",
|
|
|
"label": "Калининградская область",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": "Калужская область",
|
|
|
"label": "Калужская область",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": "Кемеровская область",
|
|
|
"label": "Кемеровская область",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": "Кировская область",
|
|
|
"label": "Кировская область",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": "Костромская область",
|
|
|
"label": "Костромская область",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": "Курганская область",
|
|
|
"label": "Курганская область",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": "Курская область",
|
|
|
"label": "Курская область",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": "Ленинградская область",
|
|
|
"label": "Ленинградская область",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": "Липецкая область",
|
|
|
"label": "Липецкая область",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": "Магаданская область",
|
|
|
"label": "Магаданская область",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": "Московская область",
|
|
|
"label": "Московская область",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": "Мурманская область",
|
|
|
"label": "Мурманская область",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": "Нижегородская область",
|
|
|
"label": "Нижегородская область",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": "Новгородская область",
|
|
|
"label": "Новгородская область",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": "Новосибирская область",
|
|
|
"label": "Новосибирская область",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": "Омская область",
|
|
|
"label": "Омская область",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": "Оренбургская область",
|
|
|
"label": "Оренбургская область",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": "Орловская область",
|
|
|
"label": "Орловская область",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": "Пензенская область",
|
|
|
"label": "Пензенская область",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": "Псковская область",
|
|
|
"label": "Псковская область",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": "Ростовская область",
|
|
|
"label": "Ростовская область",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": "Рязанская область",
|
|
|
"label": "Рязанская область",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": "Самарская область",
|
|
|
"label": "Самарская область",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": "Саратовская область",
|
|
|
"label": "Саратовская область",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": "Сахалинская область",
|
|
|
"label": "Сахалинская область",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": "Свердловская область",
|
|
|
"label": "Свердловская область",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": "Смоленская область",
|
|
|
"label": "Смоленская область",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": "Тамбовская область",
|
|
|
"label": "Тамбовская область",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": "Тверская область",
|
|
|
"label": "Тверская область",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": "Томская область",
|
|
|
"label": "Томская область",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": "Тульская область",
|
|
|
"label": "Тульская область",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": "Тюменская область",
|
|
|
"label": "Тюменская область",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": "Ульяновская область",
|
|
|
"label": "Ульяновская область",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": "Челябинская область",
|
|
|
"label": "Челябинская область",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": "Ярославская область",
|
|
|
"label": "Ярославская область",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": "Город Москва",
|
|
|
"label": "Город Москва",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": "Город Санкт-Петербург",
|
|
|
"label": "Город Санкт-Петербург",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": "Город Севастополь",
|
|
|
"label": "Город Севастополь",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": "Еврейская автономная область",
|
|
|
"label": "Еврейская автономная область",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": "Ненецкий автономный округ",
|
|
|
"label": "Ненецкий автономный округ",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": "Ханты-Мансийский автономный округ – Югра",
|
|
|
"label": "Ханты-Мансийский автономный округ – Югра",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": "Чукотский автономный округ",
|
|
|
"label": "Чукотский автономный округ",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": "Ямало-Ненецкий автономный округ",
|
|
|
"label": "Ямало-Ненецкий автономный округ",
|
|
|
"checked": true
|
|
|
}
|
|
|
]
|
|
|
},
|
|
|
{
|
|
|
"id": "id_support",
|
|
|
"name": "Форма поддержки",
|
|
|
"options": [
|
|
|
{
|
|
|
"value": 1,
|
|
|
"label": "ДПМ ВИЭ 1.0 (оптовый рынок)",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": 2,
|
|
|
"label": "ДПМ ВИЭ 2.0 (оптовый рынок)",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": 3,
|
|
|
"label": "Розничный рынок (с поддержкой)",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": 4,
|
|
|
"label": "Розничный рынок (без поддержки)",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": 5,
|
|
|
"label": "Оптовый рынок (без поддержки)",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": 6,
|
|
|
"label": "Собственная генерация промышленности",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": 7,
|
|
|
"label": "ВИЭ в изолированнных энергосистемах",
|
|
|
"checked": true
|
|
|
}
|
|
|
]
|
|
|
},
|
|
|
{
|
|
|
"id": "main_company_for_site",
|
|
|
"name": "Компания-владелец",
|
|
|
"options": [
|
|
|
{
|
|
|
"value": "ООО \"Вершина Девелопмент\"",
|
|
|
"label": "ООО \"Вершина Девелопмент\"",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": "АО \"НоваВинд\"",
|
|
|
"label": "АО \"НоваВинд\"",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": "ООО \"Ветропарки ФРВ\"",
|
|
|
"label": "ООО \"Ветропарки ФРВ\"",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": "ПАО \"ТГК-1\"",
|
|
|
"label": "ПАО \"ТГК-1\"",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": "ООО \"Солар Системс\"",
|
|
|
"label": "ООО \"Солар Системс\"",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": "ГК \"Хевел\"",
|
|
|
"label": "ГК \"Хевел\"",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": "ПАО \"ЭЛ5-Энерго\"",
|
|
|
"label": "ПАО \"ЭЛ5-Энерго\"",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": "ПАО \"Форвард Энерго\"",
|
|
|
"label": "ПАО \"Форвард Энерго\"",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": "Другие",
|
|
|
"label": "Другие",
|
|
|
"checked": true
|
|
|
}
|
|
|
]
|
|
|
},
|
|
|
{
|
|
|
"id": "year_commissioning_filter",
|
|
|
"name": "Год ввода в эксплуатацию",
|
|
|
"options": [
|
|
|
{
|
|
|
"value": "1905-2009",
|
|
|
"label": "1905-2009",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": "2010",
|
|
|
"label": "2010",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": "2011",
|
|
|
"label": "2011",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": "2012",
|
|
|
"label": "2012",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": "2013",
|
|
|
"label": "2013",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": "2014",
|
|
|
"label": "2014",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": "2015",
|
|
|
"label": "2015",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": "2016",
|
|
|
"label": "2016",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": "2017",
|
|
|
"label": "2017",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": "2018",
|
|
|
"label": "2018",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": "2019",
|
|
|
"label": "2019",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": "2020",
|
|
|
"label": "2020",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": "2021",
|
|
|
"label": "2021",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": "2022",
|
|
|
"label": "2022",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": "2023",
|
|
|
"label": "2023",
|
|
|
"checked": true
|
|
|
}
|
|
|
]
|
|
|
}
|
|
|
]
|
|
|
|
|
|
export default function Points({ mapOptions, onMapOptionClick }) {
|
|
|
const mapRef = useRef(null);
|
|
|
|
|
|
const [open, setOpen] = useState(false)
|
|
|
|
|
|
const [mobileFiltersOpen, setMobileFiltersOpen] = useState(false);
|
|
|
|
|
|
const [popupInfo, setPopupInfo] = useState(null);
|
|
|
|
|
|
const [filters, setFilters] = useState(initialFilters);
|
|
|
|
|
|
const generatePopup = (info) => {
|
|
|
console.log(info)
|
|
|
return (
|
|
|
<div>
|
|
|
<img src={`/photos/${info.id_rreda_parc}.jpg`} className="mb-4 rounded" />
|
|
|
|
|
|
<table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
|
|
|
<tbody>
|
|
|
{info.power_fact_parc_mw != null &&
|
|
|
<tr className="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
|
|
|
<th scope="row" className="px-2 py-4 font-medium text-gray-900 dark:text-white">
|
|
|
Установленная мощность
|
|
|
</th>
|
|
|
<td className="px-2 py-4">
|
|
|
{info.power_fact_parc_mw.toFixed(2).replace(".", ",")} МВт
|
|
|
</td>
|
|
|
</tr>
|
|
|
}
|
|
|
{info.year_commissioning &&
|
|
|
<tr className="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
|
|
|
<th scope="row" className="px-2 py-4 font-medium text-gray-900 dark:text-white">
|
|
|
Год ввода в эксплуатацию
|
|
|
</th>
|
|
|
<td className="px-2 py-4">
|
|
|
{info.year_commissioning}
|
|
|
</td>
|
|
|
</tr>
|
|
|
}
|
|
|
{info.year_qualification &&
|
|
|
<tr className="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
|
|
|
<th scope="row" className="px-2 py-4 font-medium text-gray-900 dark:text-white">
|
|
|
Год квалификации
|
|
|
</th>
|
|
|
<td className="px-2 py-4">
|
|
|
{info.year_qualification}
|
|
|
</td>
|
|
|
</tr>
|
|
|
}
|
|
|
{info.support_name &&
|
|
|
<tr className="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
|
|
|
<th scope="row" className="px-2 py-4 font-medium text-gray-900 dark:text-white">
|
|
|
Механизм поддержки
|
|
|
</th>
|
|
|
<td className="px-2 py-4">
|
|
|
{info.support_name}
|
|
|
</td>
|
|
|
</tr>
|
|
|
}
|
|
|
{info.region_name &&
|
|
|
<tr className="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
|
|
|
<th scope="row" className="px-2 py-4 font-medium text-gray-900 dark:text-white">
|
|
|
Регион размещения
|
|
|
</th>
|
|
|
<td className="px-2 py-4">
|
|
|
{info.region_name}
|
|
|
</td>
|
|
|
</tr>
|
|
|
}
|
|
|
{info.residence_area &&
|
|
|
<tr className="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
|
|
|
<th scope="row" className="px-2 py-4 font-medium text-gray-900 dark:text-white">
|
|
|
Район размещения
|
|
|
</th>
|
|
|
<td className="px-2 py-4">
|
|
|
{[info.residence_area, info.settlement, info.natural_object].filter(item => item).join(", ")}
|
|
|
</td>
|
|
|
</tr>
|
|
|
}
|
|
|
{info.main_owner_company &&
|
|
|
<tr className="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
|
|
|
<th scope="row" className="px-2 py-4 font-medium text-gray-900 dark:text-white">
|
|
|
Владелец объекта
|
|
|
</th>
|
|
|
<td className="px-2 py-4">
|
|
|
{info.current_owner_name && info.main_owner_company != info.current_owner_name ? `${info.current_owner_name} (${info.main_owner_company})` : info.main_owner_company}
|
|
|
</td>
|
|
|
</tr>
|
|
|
}
|
|
|
</tbody>
|
|
|
</table>
|
|
|
|
|
|
{Boolean(info.rreda_member) && info.company_link_rreda && <p className="text-sm mt-4 text-gray-600">Ссылка на компанию: <a href={info.company_link_rreda} target="_blank" className="text-indigo-800">{info.company_link_rreda}</a></p>}
|
|
|
{info.date_actualization && <p className="text-sm mt-1 text-gray-600">Дата актуализации: {info.date_actualization}</p>}
|
|
|
</div>
|
|
|
)
|
|
|
}
|
|
|
|
|
|
const clearAllOptions = (event) => {
|
|
|
event.preventDefault()
|
|
|
const newStateFilters = filters.map((filter) =>
|
|
|
filter.id == event.target.value
|
|
|
? {
|
|
|
...filter,
|
|
|
options: filter.options.map((option) => {
|
|
|
const newoption = { ...option, checked: false }
|
|
|
return (newoption)
|
|
|
})
|
|
|
}
|
|
|
: filter
|
|
|
)
|
|
|
setFilters(newStateFilters);
|
|
|
}
|
|
|
|
|
|
const addAllOptions = (event) => {
|
|
|
event.preventDefault();
|
|
|
const newStateFilters = filters.map((filter) =>
|
|
|
filter.id == event.target.value
|
|
|
? {
|
|
|
...filter,
|
|
|
options: filter.options.map((option) => {
|
|
|
const newoption = { ...option, checked: true }
|
|
|
return (newoption)
|
|
|
})
|
|
|
}
|
|
|
: filter
|
|
|
)
|
|
|
setFilters(newStateFilters);
|
|
|
}
|
|
|
|
|
|
const handleFilterToggle = function (event) {
|
|
|
const newStateFilters = filters.map((filter) =>
|
|
|
filter.id == event.target.name
|
|
|
? {
|
|
|
...filter,
|
|
|
options: filter.options.map((option) =>
|
|
|
option.value == event.target.defaultValue
|
|
|
? { ...option, checked: !option.checked }
|
|
|
: option
|
|
|
),
|
|
|
}
|
|
|
: filter
|
|
|
);
|
|
|
setFilters(newStateFilters);
|
|
|
};
|
|
|
|
|
|
const applyFilters = (filtersObj) => {
|
|
|
const checkedFilters = ["all", ...filtersObj.map((propertyFilter) => [
|
|
|
"in",
|
|
|
["get", propertyFilter.id],
|
|
|
["literal", propertyFilter.options.filter(option => option.checked).map(option => option.value)],
|
|
|
])]
|
|
|
return checkedFilters
|
|
|
};
|
|
|
|
|
|
const handleClick = (event) => {
|
|
|
setOpen(false)
|
|
|
setPopupInfo(null)
|
|
|
if (event.features[0]) {
|
|
|
console.log(event.features[0].geometry)
|
|
|
// event.originalEvent.stopPropagation();
|
|
|
setPopupInfo({
|
|
|
lon: event.features[0].geometry.coordinates[0],
|
|
|
lat: event.features[0].geometry.coordinates[1],
|
|
|
...event.features[0].properties
|
|
|
})
|
|
|
setOpen(true)
|
|
|
}
|
|
|
};
|
|
|
|
|
|
const handleMouseEnter = (event) => {
|
|
|
const feature = event.features[0];
|
|
|
if (!feature) return;
|
|
|
|
|
|
mapRef.current.getCanvas().style.cursor = "pointer";
|
|
|
};
|
|
|
|
|
|
const handleMouseLeave = (event) => {
|
|
|
const feature = event.features[0];
|
|
|
if (!feature) {
|
|
|
return;
|
|
|
}
|
|
|
mapRef.current.getCanvas().style.cursor = "";
|
|
|
};
|
|
|
|
|
|
return (
|
|
|
<div className="bg-white">
|
|
|
<div>
|
|
|
<main className="mx-auto px-4 sm:px-6 lg:px-8">
|
|
|
<div className="flex items-baseline justify-between border-b border-gray-200 pt-24 pb-6">
|
|
|
<h1 className="text-4xl font-bold tracking-tight text-gray-900">
|
|
|
Объекты ВИЭ-генерации в регионах России
|
|
|
</h1>
|
|
|
<div className="flex items-center">
|
|
|
<Menu as="div" className="relative inline-block text-left">
|
|
|
<Menu.Button className="hidden group inline-flex justify-center text-sm font-medium text-gray-700 hover:text-gray-900">
|
|
|
{mapOptions.find((option) => option.current).name}
|
|
|
<ChevronDownIcon
|
|
|
className="-mr-1 ml-1 h-5 w-5 flex-shrink-0 text-gray-400 group-hover:text-gray-500"
|
|
|
aria-hidden="true"
|
|
|
/>
|
|
|
</Menu.Button>
|
|
|
|
|
|
<Transition
|
|
|
as={Fragment}
|
|
|
enter="transition ease-out duration-100"
|
|
|
enterFrom="transform opacity-0 scale-95"
|
|
|
enterTo="transform opacity-100 scale-100"
|
|
|
leave="transition ease-in duration-75"
|
|
|
leaveFrom="transform opacity-100 scale-100"
|
|
|
leaveTo="transform opacity-0 scale-95"
|
|
|
show={true}
|
|
|
>
|
|
|
<Menu.Items className="absolute right-0 z-10 mt-2 w-40 origin-top-right rounded-md bg-white shadow-2xl ring-1 ring-black ring-opacity-5 focus:outline-none">
|
|
|
<div className="py-1">
|
|
|
{mapOptions.map((option) => (
|
|
|
<Menu.Item key={option.name}>
|
|
|
<a
|
|
|
href="#"
|
|
|
className={option.current ? 'font-medium text-gray-900 block px-4 py-2 text-sm' : 'text-gray-500 block px-4 py-2 text-sm'}
|
|
|
onClick={onMapOptionClick}
|
|
|
>
|
|
|
{option.name}
|
|
|
</a>
|
|
|
</Menu.Item>
|
|
|
))}
|
|
|
</div>
|
|
|
</Menu.Items>
|
|
|
</Transition>
|
|
|
</Menu>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<section aria-labelledby="products-heading" className="pt-6 pb-24">
|
|
|
<div className="grid grid-cols-1 gap-x-8 gap-y-10 md:grid-cols-4">
|
|
|
|
|
|
<form className="hidden md:block h-[65vh] px-1 py-1 overflow-y-scroll">
|
|
|
{/* Layers */}
|
|
|
<ul
|
|
|
role="list"
|
|
|
className="space-y-4 border-b border-gray-200 pb-6 text-sm font-medium text-gray-900"
|
|
|
>
|
|
|
{mapstyle.layers.map((layer) => (
|
|
|
<div key={layer.id} className="flex items-center">
|
|
|
<input
|
|
|
id={layer.id}
|
|
|
name={layer.id}
|
|
|
defaultValue={layer.id}
|
|
|
type="checkbox"
|
|
|
defaultChecked={true}
|
|
|
className="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
|
|
|
onChange={(event) => {
|
|
|
mapRef.current
|
|
|
.getMap()
|
|
|
.setLayoutProperty(
|
|
|
event.target.id,
|
|
|
"visibility",
|
|
|
event.target.checked ? "visible" : "none"
|
|
|
);
|
|
|
}}
|
|
|
/>
|
|
|
<label
|
|
|
htmlFor={layer.id}
|
|
|
className="ml-3 text-sm text-gray-600"
|
|
|
>
|
|
|
{layer.id}
|
|
|
</label>
|
|
|
</div>
|
|
|
))}
|
|
|
</ul>
|
|
|
|
|
|
{/* Legend */}
|
|
|
<Disclosure as="div" className="border-b border-gray-200 py-6">
|
|
|
{({ open }) => (
|
|
|
<>
|
|
|
<h3 className="-my-3 flow-root">
|
|
|
<Disclosure.Button className="flex w-full items-center justify-between bg-white py-3 text-sm text-gray-400 hover:text-gray-500">
|
|
|
<span className="font-medium text-gray-900">
|
|
|
Легенда
|
|
|
</span>
|
|
|
<span className="ml-6 flex items-center">
|
|
|
{open ? (
|
|
|
<ChevronUpIcon
|
|
|
className="h-5 w-5"
|
|
|
aria-hidden="true"
|
|
|
/>
|
|
|
) : (
|
|
|
<ChevronDownIcon
|
|
|
className="h-5 w-5"
|
|
|
aria-hidden="true"
|
|
|
/>
|
|
|
)}
|
|
|
</span>
|
|
|
</Disclosure.Button>
|
|
|
</h3>
|
|
|
<Disclosure.Panel className="pt-6">
|
|
|
<div className="space-y-4">
|
|
|
<p className="text-sm">Установленная мощность</p>
|
|
|
<div className="flex items-center"><span className="text-sm text-gray-600">{pointsSizes[0].value}</span><div className={"ml-3 rounded-full border-2 border-gray-400"} style={{ width: pointsSizes[0].size, height: pointsSizes[0].size }}></div><div className={`ml-5 rounded-full border-2 border-gray-400`} style={{ width: pointsSizes[1].size, height: pointsSizes[1].size }}></div><span className="ml-3 text-sm text-gray-600">{pointsSizes[1].value} МВт</span></div>
|
|
|
<p className="text-sm">ВИЭ-технология</p>
|
|
|
{pointsColors.map(e => <div key={e.name} className="flex items-center"><div className={"w-3 h-3 rounded-full"} style={{ backgroundColor: e.color }}></div><p className="ml-2 text-sm text-gray-600">{e.name}</p></div>)}
|
|
|
</div>
|
|
|
<div className="mt-4 space-y-4 text-xs text-gray-600">
|
|
|
<p >СЭС – солнечные электростанции</p>
|
|
|
<p>ВЭС – ветроэлектростанции</p>
|
|
|
<p>мГЭС – малые гидроэлектростанции</p>
|
|
|
<p>БиоЭС (биомасса) – биоэлектростанции на основе биомассы</p>
|
|
|
<p>БиоЭС (биогаз) – биоэлектростанции на основе биогаза</p>
|
|
|
<p>БиоЭС (свалочный газ) – биоэлектростанции на основе свалочного газа</p>
|
|
|
<p>ГеоЭС – геотермальные электростанции</p>
|
|
|
<p>ПЭС – приливные электростанции</p>
|
|
|
|
|
|
</div>
|
|
|
</Disclosure.Panel>
|
|
|
</>
|
|
|
)}
|
|
|
</Disclosure>
|
|
|
|
|
|
{/* Filters */}
|
|
|
{filters.map((section) => (
|
|
|
<Disclosure
|
|
|
as="div"
|
|
|
key={section.id}
|
|
|
className="border-b border-gray-200 py-6"
|
|
|
>
|
|
|
{({ open }) => (
|
|
|
<>
|
|
|
<h3 className="-my-3 flow-root">
|
|
|
<Disclosure.Button className="flex w-full items-center justify-between bg-white py-3 text-sm text-gray-400 hover:text-gray-500">
|
|
|
<span className="font-medium text-gray-900">
|
|
|
{section.name}
|
|
|
</span>
|
|
|
<span className="ml-6 flex items-center">
|
|
|
{open ? (
|
|
|
<ChevronUpIcon
|
|
|
className="h-5 w-5"
|
|
|
aria-hidden="true"
|
|
|
/>
|
|
|
) : (
|
|
|
<ChevronDownIcon
|
|
|
className="h-5 w-5"
|
|
|
aria-hidden="true"
|
|
|
/>
|
|
|
)}
|
|
|
</span>
|
|
|
</Disclosure.Button>
|
|
|
</h3>
|
|
|
<Disclosure.Panel className="pt-4">
|
|
|
<button value={section.id} onClick={addAllOptions} className="text-sm pb-3 text-gray-500">Добавить все</button>
|
|
|
<span className="text-sm pb-3 text-gray-500"> / </span>
|
|
|
<button value={section.id} onClick={clearAllOptions} className="text-sm pb-3 text-gray-500">Убрать все</button>
|
|
|
<div className="space-y-4">
|
|
|
{section.options.map((option, optionIdx) => (
|
|
|
<div
|
|
|
key={option.value}
|
|
|
className="flex items-center"
|
|
|
>
|
|
|
<input
|
|
|
id={`filter-${section.id}-${optionIdx}`}
|
|
|
name={`${section.id}`}
|
|
|
defaultValue={option.value}
|
|
|
type="checkbox"
|
|
|
checked={option.checked}
|
|
|
className="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
|
|
|
onChange={handleFilterToggle}
|
|
|
/>
|
|
|
<label
|
|
|
htmlFor={`filter-${section.id}-${optionIdx}`}
|
|
|
className="ml-3 text-sm text-gray-600"
|
|
|
>
|
|
|
{option.label}
|
|
|
</label>
|
|
|
{pointsColors.find(color => color.name == option.label) && <div className={"w-3 h-3 rounded-full ml-2"} style={{ backgroundColor: pointsColors.find(color => color.name == option.label).color }}></div>}
|
|
|
</div>
|
|
|
))}
|
|
|
</div>
|
|
|
</Disclosure.Panel>
|
|
|
</>
|
|
|
)}
|
|
|
</Disclosure>
|
|
|
))}
|
|
|
|
|
|
{/* Metadata */}
|
|
|
<Disclosure as="div" className="border-b border-gray-200 py-6">
|
|
|
{({ open }) => (
|
|
|
<>
|
|
|
<h3 className="-my-3 flow-root">
|
|
|
<Disclosure.Button className="flex w-full items-center justify-between bg-white py-3 text-sm text-gray-400 hover:text-gray-500">
|
|
|
<span className="font-medium text-gray-900">
|
|
|
Метаданные
|
|
|
</span>
|
|
|
<span className="ml-6 flex items-center">
|
|
|
{open ? (
|
|
|
<ChevronUpIcon
|
|
|
className="h-5 w-5"
|
|
|
aria-hidden="true"
|
|
|
/>
|
|
|
) : (
|
|
|
<ChevronDownIcon
|
|
|
className="h-5 w-5"
|
|
|
aria-hidden="true"
|
|
|
/>
|
|
|
)}
|
|
|
</span>
|
|
|
</Disclosure.Button>
|
|
|
</h3>
|
|
|
<Disclosure.Panel className="pt-6">
|
|
|
<div className="space-y-4">
|
|
|
<p className="text-sm">
|
|
|
© Ассоциация развития возобновляемой энергетики
|
|
|
</p>
|
|
|
</div>
|
|
|
</Disclosure.Panel>
|
|
|
</>
|
|
|
)}
|
|
|
</Disclosure>
|
|
|
</form>
|
|
|
|
|
|
{/* Map itself */}
|
|
|
<div className="md:col-span-3">
|
|
|
<div className="h-[65vh]">
|
|
|
<Map
|
|
|
initialViewState={{
|
|
|
latitude: mapstyle.center[0],
|
|
|
longitude: mapstyle.center[1],
|
|
|
zoom: mapstyle.zoom,
|
|
|
}}
|
|
|
minZoom={mapstyle.minZoom}
|
|
|
ref={mapRef}
|
|
|
mapboxAccessToken={MAPBOX_TOKEN}
|
|
|
interactiveLayerIds={["Объекты"]}
|
|
|
onClick={handleClick}
|
|
|
onMouseEnter={handleMouseEnter}
|
|
|
onMouseLeave={handleMouseLeave}
|
|
|
>
|
|
|
|
|
|
{open && <Popup
|
|
|
longitude={popupInfo.lon}
|
|
|
latitude={popupInfo.lat}
|
|
|
closeButton={false}
|
|
|
>
|
|
|
<h3>{popupInfo.res_name_parc}</h3>
|
|
|
{popupInfo.region_name}
|
|
|
</Popup>}
|
|
|
<ScaleControl />
|
|
|
<Source
|
|
|
id="basemap"
|
|
|
tileSize={512}
|
|
|
{...mapstyle.sources.basemap}
|
|
|
>
|
|
|
<Layer {...paintedLayers["Подложка"]} />
|
|
|
</Source>
|
|
|
<Source
|
|
|
id="remap"
|
|
|
{...mapstyle.sources.remap}
|
|
|
>
|
|
|
<Layer {...paintedLayers["Границы"]} />
|
|
|
<Layer {...paintedLayers["Объекты"]} filter={applyFilters(filters)} />
|
|
|
</Source>
|
|
|
</Map>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</section>
|
|
|
</main>
|
|
|
<Transition.Root show={open} as={Fragment}>
|
|
|
<Dialog as="div" className="relative z-10" onClose={setOpen}>
|
|
|
<Transition.Child
|
|
|
as={Fragment}
|
|
|
enter="ease-in-out duration-500"
|
|
|
enterFrom="opacity-0"
|
|
|
enterTo="opacity-100"
|
|
|
leave="ease-in-out duration-500"
|
|
|
leaveFrom="opacity-100"
|
|
|
leaveTo="opacity-0"
|
|
|
>
|
|
|
<div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
|
|
|
</Transition.Child>
|
|
|
|
|
|
<div className="fixed inset-0 overflow-hidden">
|
|
|
<div className="absolute inset-0 overflow-hidden">
|
|
|
<div className="pointer-events-none fixed inset-y-0 right-0 flex max-w-full pl-10">
|
|
|
<Transition.Child
|
|
|
as={Fragment}
|
|
|
enter="transform transition ease-in-out duration-500 sm:duration-700"
|
|
|
enterFrom="translate-x-full"
|
|
|
enterTo="translate-x-0"
|
|
|
leave="transform transition ease-in-out duration-500 sm:duration-700"
|
|
|
leaveFrom="translate-x-0"
|
|
|
leaveTo="translate-x-full"
|
|
|
>
|
|
|
<Dialog.Panel className="pointer-events-auto relative w-screen max-w-md">
|
|
|
<Transition.Child
|
|
|
as={Fragment}
|
|
|
enter="ease-in-out duration-500"
|
|
|
enterFrom="opacity-0"
|
|
|
enterTo="opacity-100"
|
|
|
leave="ease-in-out duration-500"
|
|
|
leaveFrom="opacity-100"
|
|
|
leaveTo="opacity-0"
|
|
|
>
|
|
|
<div className="absolute top-0 left-0 -ml-8 flex pt-4 pr-2 sm:-ml-10 sm:pr-4">
|
|
|
<button
|
|
|
type="button"
|
|
|
className="rounded-md text-gray-300 hover:text-white focus:outline-none focus:ring-2 focus:ring-white"
|
|
|
onClick={() => setOpen(false)}
|
|
|
>
|
|
|
<span className="sr-only">Close panel</span>
|
|
|
<XMarkIcon className="h-6 w-6" aria-hidden="true" />
|
|
|
</button>
|
|
|
</div>
|
|
|
</Transition.Child>
|
|
|
<div className="flex h-full flex-col overflow-y-scroll bg-white py-6 shadow-xl">
|
|
|
<div className="px-4 sm:px-6">
|
|
|
<Dialog.Title className="text-lg font-medium text-gray-900">{popupInfo && popupInfo.res_name_parc}</Dialog.Title>
|
|
|
</div>
|
|
|
<div className="relative mt-6 flex-1 px-4 sm:px-6">
|
|
|
{/* Replace with your content */}
|
|
|
{popupInfo && generatePopup(popupInfo)}
|
|
|
{/* /End replace */}
|
|
|
</div>
|
|
|
</div>
|
|
|
</Dialog.Panel>
|
|
|
</Transition.Child>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</Dialog>
|
|
|
</Transition.Root>
|
|
|
</div>
|
|
|
</div>
|
|
|
);
|
|
|
}
|
