h
5 months ago
commit
40d67832d7
@ -0,0 +1,6 @@
|
||||
.gitignore
|
||||
.gitlab-ci.yml
|
||||
README.md
|
||||
.git
|
||||
docker-compose.yml
|
||||
.env
|
||||
@ -0,0 +1,24 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
# dist
|
||||
# dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
@ -0,0 +1,11 @@
|
||||
{
|
||||
auto_https off
|
||||
}
|
||||
|
||||
:80 {
|
||||
handle {
|
||||
root * /srv
|
||||
file_server
|
||||
}
|
||||
}
|
||||
|
||||
|
After Width: | Height: | Size: 3.2 KiB |
|
After Width: | Height: | Size: 36 KiB |
|
After Width: | Height: | Size: 376 KiB |
@ -0,0 +1 @@
|
||||
function s(r,i){for(var o=0;o<i.length;o++){const e=i[o];if(typeof e!="string"&&!Array.isArray(e)){for(const t in e)if(t!=="default"&&!(t in r)){const n=Object.getOwnPropertyDescriptor(e,t);n&&Object.defineProperty(r,t,n.get?n:{enumerable:!0,get:()=>e[t]})}}}return Object.freeze(Object.defineProperty(r,Symbol.toStringTag,{value:"Module"}))}var a={},c=a.printMsg=function(){console.log("This is a message from the demo package")};const f=s({__proto__:null,printMsg:c,default:a},[a]);export{f as i};
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,15 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link href="/vite.svg" rel="icon"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>DZKH by Spatial</title>
|
||||
<script type="module" crossorigin src="/assets/index.8efd437a.js"></script>
|
||||
<link rel="stylesheet" href="/assets/index.767ffdb3.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
@ -0,0 +1,13 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link href="/vite.svg" rel="icon"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>DZKH by Spatial</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.jsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,46 @@
|
||||
server {
|
||||
listen 80;
|
||||
server_name _;
|
||||
|
||||
location / {
|
||||
root /usr/share/nginx/html;
|
||||
try_files $uri /index.html;
|
||||
}
|
||||
|
||||
# error_page 500 502 503 504 /50x.html;
|
||||
# location = /50x.html {
|
||||
# root /usr/share/nginx/html;
|
||||
# }
|
||||
|
||||
# proxy the PHP scripts to Apache listening on 127.0.0.1:80
|
||||
#
|
||||
#location ~ \.php$ {
|
||||
# proxy_pass http://127.0.0.1;
|
||||
#}
|
||||
|
||||
# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
|
||||
#
|
||||
#location ~ \.php$ {
|
||||
# root html;
|
||||
# fastcgi_pass 127.0.0.1:9000;
|
||||
# fastcgi_index index.php;
|
||||
# fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name;
|
||||
# include fastcgi_params;
|
||||
#}
|
||||
|
||||
# deny access to .htaccess files, if Apache's document root
|
||||
# concurs with nginx's one
|
||||
#
|
||||
#location ~ /\.ht {
|
||||
# deny all;
|
||||
#}
|
||||
}
|
||||
|
||||
server {
|
||||
listen 8888;
|
||||
server_name _;
|
||||
location /nginx-health {
|
||||
return 200 "healthy\n";
|
||||
access_log off;
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,53 @@
|
||||
{
|
||||
"name": "dzkh-frontend",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@ant-design/icons": "^5.0.1",
|
||||
"@nanostores/react": "^0.4.1",
|
||||
"@react-keycloak/web": "^3.4.0",
|
||||
"@tanstack/react-query": "^4.24.9",
|
||||
"@turf/bbox": "^6.5.0",
|
||||
"@turf/helpers": "^6.5.0",
|
||||
"@watergis/maplibre-gl-export": "^1.3.7",
|
||||
"antd": "^4.23.6",
|
||||
"axios": "^1.1.3",
|
||||
"chart.js": "^4.4.0",
|
||||
"immer": "^9.0.19",
|
||||
"immutable": "^4.3.0",
|
||||
"lodash.debounce": "^4.0.8",
|
||||
"mapbox-gl": "npm:empty-npm-package@1.0.0",
|
||||
"maplibre-gl": "^2.4.0",
|
||||
"nanostores": "^0.7.3",
|
||||
"react": "^18.2.0",
|
||||
"react-beautiful-dnd": "^13.1.1",
|
||||
"react-chartjs-2": "^5.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-icons": "^4.8.0",
|
||||
"react-map-gl": "^7.0.19",
|
||||
"react-router-dom": "^6.8.1",
|
||||
"scroll-into-view-if-needed": "^3.0.6",
|
||||
"tailwind-merge": "^1.7.0",
|
||||
"typescript": "^4.9.5",
|
||||
"vite-plugin-svgr": "^2.4.0",
|
||||
"wellknown": "^0.5.0",
|
||||
"zustand": "^4.1.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.0.28",
|
||||
"@types/react-dom": "^18.0.11",
|
||||
"@vitejs/plugin-react": "^2.2.0",
|
||||
"autoprefixer": "^10.4.13",
|
||||
"less": "^4.1.3",
|
||||
"postcss": "^8.4.18",
|
||||
"simple-zustand-devtools": "^1.1.0",
|
||||
"tailwindcss": "^3.2.1",
|
||||
"vite": "^3.2.0"
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,6 @@
|
||||
module.exports = {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
@ -0,0 +1,14 @@
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
|
||||
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
|
||||
sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
|
||||
monospace;
|
||||
}
|
||||
@ -0,0 +1,27 @@
|
||||
import "./App.css";
|
||||
import {BrowserRouter, Route, Routes} from "react-router-dom";
|
||||
import {MapPage} from "./pages/Map";
|
||||
import {QueryClient, QueryClientProvider} from "@tanstack/react-query";
|
||||
import {enableMapSet} from "immer";
|
||||
|
||||
const queryClient = new QueryClient();
|
||||
|
||||
enableMapSet();
|
||||
|
||||
if (import.meta.env.MODE === "development") {
|
||||
// for debugging purpose
|
||||
}
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<BrowserRouter basename={import.meta.env.BASE_URL}>
|
||||
<Routes>
|
||||
<Route path="/" element={<MapPage />} />
|
||||
</Routes>
|
||||
</BrowserRouter>
|
||||
</QueryClientProvider>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
@ -0,0 +1,22 @@
|
||||
import { Layer, Source } from "react-map-gl";
|
||||
|
||||
const greyMap =
|
||||
"https://api.mapbox.com/styles/v1/ghermant/cla2nwk5f00el14nxvtjlsi6z/tiles/256/{z}/{x}/{y}@2x?access_token=pk.eyJ1IjoiZ2hlcm1hbnQiLCJhIjoiY2xhMm5zZ3ZrMDF4MDN2bzc5Yjd0ZjZ1dCJ9.fqnvrEqKKBoguR7R6DR7Yw";
|
||||
// const colorMap =
|
||||
// "https://api.mapbox.com/styles/v1/ghermant/cl9vd1nji002n15s2xxj25f4m/tiles/256/{z}/{x}/{y}@2x?access_token=pk.eyJ1IjoiZ2hlcm1hbnQiLCJhIjoiY2pncDUwcnRmNDQ4ZjJ4czdjZXMzaHZpNyJ9.3rFyYRRtvLUngHm027HZ7A";
|
||||
//
|
||||
// const positron =
|
||||
// "https://a.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}@2x.png";
|
||||
|
||||
export const Basemap = () => {
|
||||
return (
|
||||
<Source type={"raster"} id={"basemap"} tiles={[greyMap]} tileSize={256}>
|
||||
<Layer
|
||||
type={"raster"}
|
||||
source={"basemap"}
|
||||
id={"basemap-layer"}
|
||||
paint={{}}
|
||||
/>
|
||||
</Source>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,23 @@
|
||||
import {Layer, Source} from "react-map-gl";
|
||||
import {selectedRegionLayer} from "../../dzkh-features/Layers/layers-config.js";
|
||||
import {useDzkhFilters} from "../../stores/useDzkhFilters.js";
|
||||
|
||||
const SelectedRegionLayer = ({ data }) => {
|
||||
return (
|
||||
<Source id="selected-region" type="geojson" data={data}>
|
||||
<Layer {...selectedRegionLayer} />
|
||||
</Source>
|
||||
);
|
||||
};
|
||||
|
||||
export const SelectedRegion = () => {
|
||||
const {
|
||||
filters: { region },
|
||||
} = useDzkhFilters();
|
||||
|
||||
if (region?.geometry) {
|
||||
return <SelectedRegionLayer data={region.geometry} />
|
||||
}
|
||||
|
||||
return null
|
||||
};
|
||||
@ -0,0 +1,16 @@
|
||||
import { useMemo } from "react";
|
||||
|
||||
const REGION_FIELD_MAPPER = {
|
||||
ao: "ao_id",
|
||||
rayon: "rayon_id",
|
||||
};
|
||||
|
||||
export const useRegionFilterExpression = (region) => {
|
||||
return useMemo(
|
||||
() =>
|
||||
region
|
||||
? ["==", ["get", REGION_FIELD_MAPPER[region.type]], region.id]
|
||||
: null,
|
||||
[region]
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,176 @@
|
||||
import maplibregl from "maplibre-gl";
|
||||
import Map, {MapProvider} from "react-map-gl";
|
||||
import {useEffect, useRef, useState} from "react";
|
||||
import {Sidebar} from "../modules/Sidebar/Sidebar";
|
||||
import {Layers} from "../dzkh-features/Layers/Layers.jsx";
|
||||
import {MapPopup} from "./Popup/Popup";
|
||||
import {Basemap} from "./Basemap";
|
||||
import debounce from "lodash.debounce";
|
||||
import {usePopup} from "../stores/usePopup";
|
||||
import {useClickedPointConfig} from "../stores/useClickedPointConfig";
|
||||
import {Legend} from "../dzkh-features/Legend.jsx";
|
||||
import {TableWrapper} from "../modules/Table/TableWrapper";
|
||||
import {SidebarControl} from "./SidebarControl";
|
||||
import {useTable} from "../stores/useTable";
|
||||
import {twMerge} from "tailwind-merge";
|
||||
import {ImportDataModal} from "../dzkh-features/ImportDataModal.jsx";
|
||||
import {ImportDataButton} from "../dzkh-features/ImportDataButton.jsx";
|
||||
import {WeatherSlider} from "../dzkh-features/WeatherSlider/WeatherSlider.jsx";
|
||||
import {LAYER_IDS} from "../dzkh-features/constants.js";
|
||||
import {AccidentSimulationResults} from "../dzkh-features/AccidentSimulationResults.jsx";
|
||||
import { icons } from "../icons/icons-config.js";
|
||||
|
||||
export const MapComponent = () => {
|
||||
const mapRef = useRef(null);
|
||||
const mapContainerRef = useRef(null);
|
||||
const sidebarRef = useRef(null);
|
||||
const { popup, setPopup } = usePopup();
|
||||
const { setClickedPointConfig } = useClickedPointConfig();
|
||||
const { tableState, openTable } = useTable();
|
||||
|
||||
const handleClick = (event) => {
|
||||
if (!event.features) {
|
||||
setPopup(null);
|
||||
setClickedPointConfig(null);
|
||||
return;
|
||||
}
|
||||
|
||||
const feature = event.features[0];
|
||||
if (!feature) {
|
||||
setPopup(null);
|
||||
setClickedPointConfig(null);
|
||||
return;
|
||||
}
|
||||
|
||||
const { lng: pointLng } = event.lngLat;
|
||||
|
||||
if (feature.geometry.type === "Point") {
|
||||
const coordinates = feature.geometry.coordinates.slice();
|
||||
while (Math.abs(pointLng - coordinates[0]) > 180) {
|
||||
coordinates[0] += pointLng > coordinates[0] ? 360 : -360;
|
||||
}
|
||||
|
||||
setPopup({ features: event.features, coordinates });
|
||||
}
|
||||
};
|
||||
|
||||
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 = "";
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const resizeObserver = new ResizeObserver(
|
||||
debounce(() => {
|
||||
mapRef?.current?.resize();
|
||||
}, 16)
|
||||
);
|
||||
if (mapContainerRef.current) {
|
||||
resizeObserver.observe(mapContainerRef.current);
|
||||
}
|
||||
|
||||
return () => {
|
||||
resizeObserver.disconnect();
|
||||
};
|
||||
}, [mapContainerRef.current]);
|
||||
|
||||
useEffect(() => {
|
||||
if (tableState.fullScreen && !tableState.isOpened) {
|
||||
openTable();
|
||||
}
|
||||
}, [tableState.fullScreen]);
|
||||
|
||||
const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false);
|
||||
|
||||
const toggleCollapseSidebar = () =>
|
||||
setIsSidebarCollapsed((prevState) => !prevState);
|
||||
|
||||
const [isImportOpen, setIsImportOpen] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
icons.map((icon) => {
|
||||
const img = new Image(
|
||||
icon.size?.width || 64,
|
||||
icon.size?.height || 64
|
||||
);
|
||||
img.src = icon.url;
|
||||
img.crossOrigin = "Anonymous";
|
||||
img.onload = () => {
|
||||
mapRef.current.addImage(icon.name, img);
|
||||
}
|
||||
});
|
||||
}, [icons]);
|
||||
|
||||
return (
|
||||
<MapProvider>
|
||||
<div className={"w-screen h-screen relative flex overflow-hidden"}>
|
||||
<Sidebar isCollapsed={isSidebarCollapsed} ref={sidebarRef} />
|
||||
<div className="flex-1 h-screen flex flex-col ">
|
||||
<div
|
||||
ref={mapContainerRef}
|
||||
className={twMerge(tableState.fullScreen ? "" : "flex-1")}
|
||||
>
|
||||
<Map
|
||||
mapLib={maplibregl}
|
||||
initialViewState={{
|
||||
latitude: 55.7558,
|
||||
longitude: 37.6173,
|
||||
zoom: 12,
|
||||
}}
|
||||
dragRotate={false}
|
||||
ref={mapRef}
|
||||
interactiveLayerIds={[
|
||||
LAYER_IDS.consumer,
|
||||
LAYER_IDS.source,
|
||||
LAYER_IDS.dispatcher,
|
||||
]}
|
||||
onClick={handleClick}
|
||||
onMouseEnter={handleMouseEnter}
|
||||
onMouseLeave={handleMouseLeave}
|
||||
id="map"
|
||||
>
|
||||
{popup && (
|
||||
<MapPopup
|
||||
lat={popup.coordinates[1]}
|
||||
lng={popup.coordinates[0]}
|
||||
features={popup.features}
|
||||
onClose={() => {
|
||||
setPopup(null);
|
||||
setClickedPointConfig(null);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
<ImportDataButton onClick={() => setIsImportOpen(true)}/>
|
||||
|
||||
<SidebarControl toggleCollapse={toggleCollapseSidebar} />
|
||||
<WeatherSlider />
|
||||
|
||||
<Basemap />
|
||||
<Layers />
|
||||
|
||||
<Legend />
|
||||
|
||||
<AccidentSimulationResults />
|
||||
|
||||
{isImportOpen && <ImportDataModal onClose={() => setIsImportOpen(false)} />}
|
||||
</Map>
|
||||
</div>
|
||||
<div className="w-full border-solid border-border border-0 border-t-[1px] z-20">
|
||||
<TableWrapper fullWidth={isSidebarCollapsed} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</MapProvider>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,99 @@
|
||||
import {commonPopupConfig,} from "./config";
|
||||
import {Button, Col, Row} from "antd";
|
||||
import {isNil} from "../../../utils.js";
|
||||
import {useGetRegions} from "../../../components/RegionSelect.jsx";
|
||||
import {useSimulateAccident} from "../../../stores/useSimulateAccident.js";
|
||||
import {useWeatherFilter} from "../../../dzkh-features/WeatherSlider/useWeatherFilter.js";
|
||||
import {tempMapper} from "../../../config.js";
|
||||
|
||||
const dynamicFields = [
|
||||
{
|
||||
field: 'prob1',
|
||||
name: 'Отсутствие отопления в доме'
|
||||
},{
|
||||
field: 'prob2',
|
||||
name: 'Протечка труб в подъезде'
|
||||
},{
|
||||
field: 'prob3',
|
||||
name: 'Температура в квартире ниже нормативной'
|
||||
},{
|
||||
field: 'prob4',
|
||||
name: 'Температура в помещении общего пользования ниже нормативной'
|
||||
},{
|
||||
field: 'prob5',
|
||||
name: 'Течь в системе отопления'
|
||||
},{
|
||||
field: 'cooling_time',
|
||||
name: 'Время остывания (часы)'
|
||||
},{
|
||||
field: 'priority',
|
||||
name: 'Приоритет здания'
|
||||
}
|
||||
]
|
||||
|
||||
export const FeatureProperties = ({ feature }) => {
|
||||
const { data } = useGetRegions();
|
||||
const { setSelectedSourceConfig } = useSimulateAccident();
|
||||
const { value: temperature } = useWeatherFilter();
|
||||
|
||||
const isSourcePoint = feature.properties.point_type === 'tp'
|
||||
const isDispatcherPoint = feature.properties.point_type === 'ods'
|
||||
|
||||
const getConfig = () => {
|
||||
if (isDispatcherPoint) return commonPopupConfig
|
||||
|
||||
if (isSourcePoint) {
|
||||
return [
|
||||
...commonPopupConfig, {field: `prob6_${tempMapper[temperature]}`, name: 'Авария на ТП'}
|
||||
]
|
||||
}
|
||||
|
||||
const additionalFields = dynamicFields.map((item) => {
|
||||
return {
|
||||
...item,
|
||||
field: `${item.field}_${tempMapper[temperature]}`,
|
||||
}
|
||||
})
|
||||
return [...commonPopupConfig, ...additionalFields];
|
||||
};
|
||||
|
||||
const getValue = ({ field, render, empty, type, fallbackField }) => {
|
||||
let value = feature.properties[field];
|
||||
|
||||
if (type === "region") {
|
||||
value = value ? value : feature[fallbackField];
|
||||
value = render(value, data?.normalized);
|
||||
} else {
|
||||
value = render ? render(value) : value;
|
||||
value = isNil(value) && empty ? empty : value;
|
||||
}
|
||||
|
||||
return value;
|
||||
};
|
||||
|
||||
const simulateAccident = () => setSelectedSourceConfig({
|
||||
pointId: feature.properties.id,
|
||||
sourceId: feature.properties.tp_number,
|
||||
dispatcherNumber: feature.properties.ods_number
|
||||
});
|
||||
|
||||
return (
|
||||
<div>
|
||||
{getConfig().map((row) => {
|
||||
return (
|
||||
<Row className={"p-1"} key={row.field}>
|
||||
<Col className={"font-semibold"} span={12}>
|
||||
{row.name}
|
||||
</Col>
|
||||
<Col span={12} className={'text-right'}>{getValue(row)}</Col>
|
||||
</Row>
|
||||
);
|
||||
})}
|
||||
{isSourcePoint ?
|
||||
<div className={'mt-3 text-center'}>
|
||||
<Button type={'primary'} onClick={simulateAccident}>Смоделировать аварию</Button>
|
||||
</div>
|
||||
: null}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,21 @@
|
||||
export const getRegionNameById = (id, normalizedRegions) =>
|
||||
normalizedRegions?.[id]?.name ?? id;
|
||||
|
||||
export const commonPopupConfig = [
|
||||
{
|
||||
name: "Адрес",
|
||||
field: "building_address",
|
||||
},
|
||||
{
|
||||
name: "Номер ТП",
|
||||
field: "tp_number",
|
||||
},
|
||||
{
|
||||
name: "Номер ОДС",
|
||||
field: "ods_number",
|
||||
},
|
||||
{
|
||||
name: "Телефон ОДС",
|
||||
field: "phone_number",
|
||||
}
|
||||
];
|
||||
@ -0,0 +1,70 @@
|
||||
import {Button} from "antd";
|
||||
import {PopupWrapper} from "./PopupWrapper";
|
||||
import {FeatureProperties} from "./FeatureProperties/FeatureProperties";
|
||||
import {usePopup} from "../../stores/usePopup.js";
|
||||
import { ChartModal } from "../../dzkh-features/Chart/ChartModal.jsx";
|
||||
|
||||
const SingleFeaturePopup = ({ feature }) => {
|
||||
return (
|
||||
<div className="flex-col gap-2">
|
||||
{feature.properties.point_type === "potreb" && <ChartModal point={feature.properties}/>}
|
||||
<FeatureProperties feature={feature} />
|
||||
</div>
|
||||
|
||||
);
|
||||
};
|
||||
|
||||
const typeMapper = {
|
||||
potreb: 'Потребитель',
|
||||
tp: 'Источник',
|
||||
ods: 'Диспетчерская'
|
||||
}
|
||||
|
||||
const MultipleFeaturesPopup = ({ features }) => {
|
||||
const { setPopup } = usePopup();
|
||||
|
||||
return (
|
||||
<div className="space-y-2 p-1">
|
||||
{features.map((feature) => {
|
||||
const featureId = feature.properties.id;
|
||||
|
||||
return (
|
||||
<div className="flex flex-row items-center gap-2 w-full" key={featureId}>
|
||||
<Button
|
||||
className="text-start flex-1 !w-0"
|
||||
block
|
||||
onClick={() => {
|
||||
setPopup({
|
||||
features: [feature],
|
||||
coordinates: feature.geometry.coordinates,
|
||||
});
|
||||
}}
|
||||
>
|
||||
<div className="space-x-2 flex items-center w-full">
|
||||
<span className="flex-1 truncate inline-block">
|
||||
{typeMapper[feature.properties.point_type]}
|
||||
</span>
|
||||
</div>
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const MapPopup = ({features, lat, lng, onClose}) => {
|
||||
const getContent = () => {
|
||||
if (features.length === 1) {
|
||||
return <SingleFeaturePopup feature={features[0]} />;
|
||||
}
|
||||
|
||||
return <MultipleFeaturesPopup features={features} />;
|
||||
};
|
||||
|
||||
return (
|
||||
<PopupWrapper lat={lat} lng={lng} onClose={onClose}>
|
||||
{getContent()}
|
||||
</PopupWrapper>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,15 @@
|
||||
import { Popup } from "react-map-gl";
|
||||
|
||||
export const PopupWrapper = ({ lat, lng, onClose, children }) => {
|
||||
return (
|
||||
<Popup
|
||||
longitude={lng}
|
||||
latitude={lat}
|
||||
onClose={onClose}
|
||||
closeOnClick={false}
|
||||
style={{ minWidth: "330px" }}
|
||||
>
|
||||
{children}
|
||||
</Popup>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,12 @@
|
||||
import { Button } from "antd";
|
||||
import { FiltersIcon } from "../icons/FiltersIcon";
|
||||
|
||||
export const SidebarControl = ({ toggleCollapse }) => {
|
||||
return (
|
||||
<Button
|
||||
icon={<FiltersIcon width={16} height={16} />}
|
||||
onClick={toggleCollapse}
|
||||
className="border-l-0 rounded-bl-none rounded-tl-none absolute top-[100px] flex items-center justify-center"
|
||||
/>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,75 @@
|
||||
import axios from "axios";
|
||||
|
||||
export const BASE_URL = import.meta.env.VITE_API_URL;
|
||||
|
||||
export const api = axios.create({
|
||||
baseURL:
|
||||
import.meta.env.MODE === "development"
|
||||
? "http://localhost:5173/"
|
||||
: BASE_URL,
|
||||
});
|
||||
|
||||
const enrichParamsWithRegionFilter = (params, region) => {
|
||||
const resultParams = params ? params : new URLSearchParams();
|
||||
|
||||
if (region) {
|
||||
if (region.type === "ao") {
|
||||
resultParams.append("district[]", region.id);
|
||||
}
|
||||
|
||||
if (region.type === "rayon") {
|
||||
resultParams.append("rayon", region.id);
|
||||
}
|
||||
}
|
||||
|
||||
return resultParams;
|
||||
};
|
||||
|
||||
export const getPoints = async (params, region, signal) => {
|
||||
const resultParams = enrichParamsWithRegionFilter(params, region);
|
||||
|
||||
const { data } = await api.get(
|
||||
`/api/data/?${resultParams.toString()}`, {signal}
|
||||
);
|
||||
|
||||
return data;
|
||||
};
|
||||
|
||||
export const exportPoints = async (params, region) => {
|
||||
const resultParams = enrichParamsWithRegionFilter(params, region);
|
||||
|
||||
const { data } = await api.get(
|
||||
`/api/data/to_csv/?${resultParams.toString()}`,
|
||||
{ responseType: "arraybuffer" }
|
||||
);
|
||||
|
||||
return data;
|
||||
};
|
||||
|
||||
export const downloadImportTemplate = async (dataType) => {
|
||||
const { data } = await api.get(
|
||||
`/default_data/templates/${dataType}.xlsx`,
|
||||
{ responseType: "arraybuffer" }
|
||||
);
|
||||
|
||||
return data;
|
||||
};
|
||||
|
||||
export const uploadPointsFile = async (file, dataType, refill = false,) => {
|
||||
const formData = new FormData();
|
||||
formData.append("file", file);
|
||||
formData.append("model", dataType);
|
||||
formData.append("refill", refill);
|
||||
const { data } = await api.post(
|
||||
`/api/import_file/`,
|
||||
formData
|
||||
);
|
||||
|
||||
return data;
|
||||
};
|
||||
|
||||
export const startAnalysis = async () => {
|
||||
const { data } = await api.get(`/api/data/start_ds_miracle`);
|
||||
|
||||
return data;
|
||||
};
|
||||
|
After Width: | Height: | Size: 3.2 KiB |
|
After Width: | Height: | Size: 36 KiB |
|
After Width: | Height: | Size: 376 KiB |
@ -0,0 +1,9 @@
|
||||
import { Button } from "antd";
|
||||
|
||||
export const ClearFiltersButton = ({ onClick, disabled }) => {
|
||||
return (
|
||||
<Button block className={"mt-2"} onClick={onClick} disabled={disabled}>
|
||||
Сбросить фильтры
|
||||
</Button>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,98 @@
|
||||
import { Title } from "./Title";
|
||||
import { Slider } from "antd";
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
const Mark = ({ value }) => {
|
||||
return (
|
||||
<span className={"text-grey text-xs bg-white-background-light"}>
|
||||
{value}
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
const getInitialMarks = (fullRange, value) => {
|
||||
if (Array.isArray(value)) {
|
||||
const [min, max] = value;
|
||||
return {
|
||||
...fullRange,
|
||||
[min]: <Mark value={min} />,
|
||||
[max]: <Mark value={max} />,
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
...fullRange,
|
||||
[value]: <Mark value={value} />,
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
export const SliderComponent = ({
|
||||
title,
|
||||
value: initialValue,
|
||||
onChange,
|
||||
onAfterChange,
|
||||
min = 0,
|
||||
max = 100,
|
||||
range = false,
|
||||
step = 1,
|
||||
disabled = false,
|
||||
onMouseEnter,
|
||||
onMouseLeave,
|
||||
showZeroMark = false,
|
||||
}) => {
|
||||
const fullRangeMarks = {
|
||||
[min]: <Mark value={min} />,
|
||||
[max]: <Mark value={max} />,
|
||||
};
|
||||
const [value, setValue] = useState(initialValue);
|
||||
const [marks, setMarks] = useState(
|
||||
getInitialMarks(fullRangeMarks, initialValue)
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
setValue(initialValue);
|
||||
setMarks(getInitialMarks(fullRangeMarks, initialValue));
|
||||
}, [initialValue]);
|
||||
|
||||
const handleAfterChange = (value) => {
|
||||
if (Array.isArray(value)) {
|
||||
const [min, max] = value;
|
||||
setMarks({
|
||||
...fullRangeMarks,
|
||||
[min]: <Mark value={min} />,
|
||||
[max]: <Mark value={max} />,
|
||||
});
|
||||
} else {
|
||||
setMarks({
|
||||
...fullRangeMarks,
|
||||
[value]: <Mark value={value} />,
|
||||
});
|
||||
}
|
||||
|
||||
onAfterChange?.(value);
|
||||
};
|
||||
|
||||
const handleChange = (value) => {
|
||||
setValue(value);
|
||||
onChange?.(value);
|
||||
};
|
||||
|
||||
const finalMarks = showZeroMark ? { ...marks, 0: <Mark value={0} /> } : marks;
|
||||
|
||||
return (
|
||||
<div onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
|
||||
<Title text={title} />
|
||||
<Slider
|
||||
range={range}
|
||||
value={value}
|
||||
marks={finalMarks}
|
||||
onChange={handleChange}
|
||||
onAfterChange={handleAfterChange}
|
||||
min={min}
|
||||
max={max}
|
||||
step={step}
|
||||
disabled={disabled}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,17 @@
|
||||
import { Typography } from "antd";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
|
||||
const { Text } = Typography;
|
||||
|
||||
export const Title = ({ text, className, classNameText, type = "secondary" }) => {
|
||||
return (
|
||||
<div className={twMerge("mb-1", className)}>
|
||||
<Text
|
||||
type={type}
|
||||
className={classNameText}
|
||||
>
|
||||
{text}
|
||||
</Text>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,57 @@
|
||||
export const CONSUMER_OPTIONS = [
|
||||
{
|
||||
value: "category1",
|
||||
title: "Прогнозирование",
|
||||
selectable: false,
|
||||
children: [
|
||||
{
|
||||
value: "prob1",
|
||||
title: "Отсутствие отопления в доме",
|
||||
},
|
||||
{
|
||||
value: "prob2",
|
||||
title: "Протечка труб в подъезде",
|
||||
},
|
||||
{
|
||||
value: "prob3",
|
||||
title: "Температура в квартире ниже нормативной",
|
||||
},
|
||||
{
|
||||
value: "prob4",
|
||||
title: "Температура в помещении общего пользования ниже нормативной",
|
||||
},
|
||||
{
|
||||
value: "prob5",
|
||||
title: "Течь в системе отопления",
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
value: "category2",
|
||||
title: "Реагирование",
|
||||
selectable: false,
|
||||
children: [
|
||||
{
|
||||
value: "cooling_time",
|
||||
title: "Время остывания, ч",
|
||||
},
|
||||
{
|
||||
value: "priority",
|
||||
title: "Приоритет здания",
|
||||
},
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
const getTempMapper = () => {
|
||||
const result = {}
|
||||
let index = 0
|
||||
for (let temp = -25; temp < 25; temp++) {
|
||||
result[temp] = index
|
||||
index++
|
||||
}
|
||||
|
||||
return result
|
||||
}
|
||||
|
||||
export const tempMapper = getTempMapper()
|
||||
@ -0,0 +1,37 @@
|
||||
import { Button, Col, Divider, Modal, Popover, Row, Tooltip } from "antd";
|
||||
import {useSimulateAccident} from "../stores/useSimulateAccident.js";
|
||||
import {Title} from "../components/Title.jsx";
|
||||
import { AccidentSimulationModal } from "./AccidentSimulation/AccidentSimulationModal.jsx";
|
||||
import { useState } from "react";
|
||||
import { BiInfoCircle } from "react-icons/all.js";
|
||||
|
||||
export const AccidentSimulationResults = () => {
|
||||
const {selectedSourceConfig, setSelectedSourceConfig} = useSimulateAccident();
|
||||
const [modalOpen, setModalOpen] = useState(false);
|
||||
if (!selectedSourceConfig.pointId) return "";
|
||||
|
||||
const {pointId} = selectedSourceConfig;
|
||||
|
||||
const stopSimulation = () => setSelectedSourceConfig({sourceId: null, dispatcherNumber: null})
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className='absolute bottom-[20px] left-[20px] text-grey z-10 bg-white-background rounded-xl p-3 text-center'>
|
||||
<Title text={`Результаты моделирования аварии на ТП ${selectedSourceConfig?.sourceId}`}/>
|
||||
<div className="flex justify-center flex-row gap-2">
|
||||
<Button type="primary" onClick={stopSimulation}>Отменить</Button>
|
||||
{!!pointId && (
|
||||
<Popover content={<AccidentSimulationModal id={pointId} />}>
|
||||
<Button className="flex justify-center items-center" type="primary" onClick={() => setModalOpen(true)}>
|
||||
<BiInfoCircle className="w-4 h-4" />
|
||||
</Button>
|
||||
</Popover>
|
||||
)}
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
{!!pointId && <AccidentSimulationModal id={pointId} modalOpen={modalOpen} setModalOpen={setModalOpen} />}
|
||||
</>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,14 @@
|
||||
import {Button, Tooltip} from "antd";
|
||||
import {UploadOutlined} from "@ant-design/icons";
|
||||
|
||||
export const ImportDataButton = ({onClick}) => {
|
||||
return <div className='absolute top-[20px] left-[20px]'>
|
||||
<Tooltip title='Импорт данных' placement='right'>
|
||||
<Button
|
||||
type="primary"
|
||||
icon={<UploadOutlined />}
|
||||
onClick={onClick}
|
||||
/>
|
||||
</Tooltip>
|
||||
</div>
|
||||
}
|
||||
@ -0,0 +1,96 @@
|
||||
import {Layer} from "react-map-gl";
|
||||
import {useLayersVisibility} from "../../stores/useLayersVisibility.js";
|
||||
import {useRegionFilterExpression} from "../../Map/Layers/useRegionFilterExpression.js";
|
||||
import { CONSUMER_COLOR, CONSUMER_COLOR_COOLING, consumerPointLayer } from "./layers-config.js";
|
||||
import {LAYER_IDS} from "../constants.js";
|
||||
import {useDzkhFilters} from "../../stores/useDzkhFilters.js";
|
||||
import { useConsumerLayerFilterExpression } from "./useConsumerLayerFilterExpression.js";
|
||||
import {useSimulateAccident} from "../../stores/useSimulateAccident.js";
|
||||
import {useWeatherFilter} from "../WeatherSlider/useWeatherFilter.js";
|
||||
import {tempMapper} from "../../config.js";
|
||||
import { useMemo } from "react";
|
||||
import { useGetDzkhFiltersRange } from "../api/filters.js";
|
||||
|
||||
const typeExpression = ["==", ["get", "point_type"], LAYER_IDS.consumer];
|
||||
|
||||
export const ConsumerLayer = () => {
|
||||
const { isVisible } = useLayersVisibility();
|
||||
const {
|
||||
filters: { region },
|
||||
consumer_filter
|
||||
} = useDzkhFilters();
|
||||
const regionFilterExpression = useRegionFilterExpression(region);
|
||||
const filterExpression = useConsumerLayerFilterExpression();
|
||||
const { selectedSourceConfig } = useSimulateAccident();
|
||||
const { value: temp } = useWeatherFilter();
|
||||
|
||||
const key = useMemo(() => {
|
||||
return consumer_filter?.key;
|
||||
}, [consumer_filter?.key]);
|
||||
|
||||
const filterKey = useMemo(() => {
|
||||
if (!!key) return `${key}_${tempMapper[temp]}`;
|
||||
return undefined;
|
||||
}, [key, temp]);
|
||||
|
||||
const {data, isLoading: isRangeLoading} = useGetDzkhFiltersRange(filterKey);
|
||||
|
||||
const range = useMemo(() => {
|
||||
return data?.range || [0, 0]
|
||||
}, [data?.range]);
|
||||
|
||||
const getFilter = () => {
|
||||
const result = ["all", typeExpression, ...filterExpression];
|
||||
if (regionFilterExpression) {
|
||||
result.push(regionFilterExpression)
|
||||
}
|
||||
|
||||
if (selectedSourceConfig.sourceId) {
|
||||
result.push(["==", ["get", "tp_number"], selectedSourceConfig.sourceId])
|
||||
}
|
||||
return result
|
||||
};
|
||||
|
||||
const propToColor = consumer_filter?.key ? `${consumer_filter.key}_${tempMapper[temp]}` : null;
|
||||
|
||||
const isCooling = useMemo(() => {
|
||||
return consumer_filter && consumer_filter.key.includes('cooling')
|
||||
}, [consumer_filter]);
|
||||
|
||||
const colorStops = useMemo(() => {
|
||||
const min = range[0];
|
||||
const max = range[1];
|
||||
const step = (max - min) / 8;
|
||||
if (isCooling) return [].concat(CONSUMER_COLOR.stops).reverse().map((c, i) => {
|
||||
return [min + i * step, c[1]];
|
||||
})
|
||||
return CONSUMER_COLOR.stops.map((c, i) => {
|
||||
return [min + i * step, c[1]];
|
||||
})
|
||||
|
||||
}, [range]);
|
||||
|
||||
const paintConfig = propToColor ? {
|
||||
...consumerPointLayer.paint,
|
||||
"circle-color": {
|
||||
property: propToColor,
|
||||
stops: colorStops
|
||||
}
|
||||
} : consumerPointLayer.paint
|
||||
|
||||
return (
|
||||
<>
|
||||
<Layer
|
||||
{...consumerPointLayer}
|
||||
id={LAYER_IDS.consumer}
|
||||
source={"points"}
|
||||
source-layer={"public.data"}
|
||||
layout={{
|
||||
visibility: isVisible[LAYER_IDS.consumer] ? "visible" : "none",
|
||||
}}
|
||||
filter={getFilter()}
|
||||
paint={paintConfig}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,46 @@
|
||||
import {Layer} from "react-map-gl";
|
||||
import {useLayersVisibility} from "../../stores/useLayersVisibility.js";
|
||||
import {useRegionFilterExpression} from "../../Map/Layers/useRegionFilterExpression.js";
|
||||
import { dispatcherPointLayer, getPointSymbolLayer } from "./layers-config.js";
|
||||
import {LAYER_IDS} from "../constants.js";
|
||||
import {useDzkhFilters} from "../../stores/useDzkhFilters.js";
|
||||
import {useSimulateAccident} from "../../stores/useSimulateAccident.js";
|
||||
|
||||
const typeExpression = ["==", ["get", "point_type"], LAYER_IDS.dispatcher];
|
||||
|
||||
export const DispatcherLayer = () => {
|
||||
const { isVisible } = useLayersVisibility();
|
||||
const {
|
||||
filters: { region },
|
||||
} = useDzkhFilters();
|
||||
const regionFilterExpression = useRegionFilterExpression(region);
|
||||
const { selectedSourceConfig } = useSimulateAccident()
|
||||
|
||||
const getFilter = () => {
|
||||
const result = ["all", typeExpression];
|
||||
if (regionFilterExpression) {
|
||||
result.push(regionFilterExpression)
|
||||
}
|
||||
|
||||
if (selectedSourceConfig.sourceId) {
|
||||
result.push(["==", ["get", "ods_number"], selectedSourceConfig.dispatcherNumber])
|
||||
}
|
||||
return result
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Layer
|
||||
type={getPointSymbolLayer("dispatcherIcon").type}
|
||||
id={LAYER_IDS.dispatcher}
|
||||
source={"points"}
|
||||
source-layer={"public.data"}
|
||||
layout={{
|
||||
...getPointSymbolLayer("dispatcherIcon").layout,
|
||||
visibility: isVisible[LAYER_IDS.dispatcher] ? "visible" : "none",
|
||||
}}
|
||||
filter={getFilter()}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,41 @@
|
||||
import {Points} from "./Points.jsx";
|
||||
import {Layer, Source} from "react-map-gl";
|
||||
import {aoLayer, rayonLayer} from "./layers-config.js";
|
||||
import {BASE_URL} from "../../api.js";
|
||||
import {SelectedRegion} from "../../Map/Layers/SelectedRegion.jsx";
|
||||
|
||||
export const Layers = () => {
|
||||
return (
|
||||
<>
|
||||
<Source
|
||||
id="ao"
|
||||
type="vector"
|
||||
tiles={[`${BASE_URL}/martin/public.service_ao/{z}/{x}/{y}.pbf`]}
|
||||
>
|
||||
<Layer
|
||||
{...aoLayer}
|
||||
layout={{
|
||||
...aoLayer.layout,
|
||||
}}
|
||||
/>
|
||||
</Source>
|
||||
|
||||
<Source
|
||||
id="rayon"
|
||||
type="vector"
|
||||
tiles={[`${BASE_URL}/martin/public.service_rayon/{z}/{x}/{y}.pbf`]}
|
||||
>
|
||||
<Layer
|
||||
{...rayonLayer}
|
||||
layout={{
|
||||
...rayonLayer.layout,
|
||||
}}
|
||||
/>
|
||||
</Source>
|
||||
|
||||
<SelectedRegion />
|
||||
|
||||
<Points />
|
||||
</>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,27 @@
|
||||
import { Source } from "react-map-gl";
|
||||
import { BASE_URL } from "../../api.js";
|
||||
import { useUpdateLayerCounter } from "../../stores/useUpdateLayerCounter.js";
|
||||
import { ConsumerLayer } from "./ConsumerLayer.jsx";
|
||||
import { DispatcherLayer } from "./DispatcherLayer.jsx";
|
||||
import { SourceLayer } from "./SourceLayer.jsx";
|
||||
|
||||
export const Points = () => {
|
||||
const { updateCounter } = useUpdateLayerCounter();
|
||||
|
||||
return (
|
||||
<>
|
||||
<Source
|
||||
id="points"
|
||||
type="vector"
|
||||
key={`points-${updateCounter}`}
|
||||
tiles={[
|
||||
`${BASE_URL}/martin/public.data/{z}/{x}/{y}.pbf`,
|
||||
]}
|
||||
>
|
||||
<SourceLayer />
|
||||
<ConsumerLayer />
|
||||
<DispatcherLayer />
|
||||
</Source>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,61 @@
|
||||
import {Layer} from "react-map-gl";
|
||||
import {useLayersVisibility} from "../../stores/useLayersVisibility.js";
|
||||
import {useRegionFilterExpression} from "../../Map/Layers/useRegionFilterExpression.js";
|
||||
import {SOURCE_COLOR, sourcePointLayer} from "./layers-config.js";
|
||||
import {LAYER_IDS} from "../constants.js";
|
||||
import {useDzkhFilters} from "../../stores/useDzkhFilters.js";
|
||||
import {useSourceLayerFilterExpression} from "./useSourceLayerFilterExpression.js";
|
||||
import {useSimulateAccident} from "../../stores/useSimulateAccident.js";
|
||||
import {tempMapper} from "../../config.js";
|
||||
import {useWeatherFilter} from "../WeatherSlider/useWeatherFilter.js";
|
||||
|
||||
const typeExpression = ["==", ["get", "point_type"], LAYER_IDS.source];
|
||||
|
||||
export const SourceLayer = () => {
|
||||
const { isVisible } = useLayersVisibility();
|
||||
const {
|
||||
filters: { region },
|
||||
source_filter
|
||||
} = useDzkhFilters();
|
||||
const regionFilterExpression = useRegionFilterExpression(region);
|
||||
const filterExpression = useSourceLayerFilterExpression();
|
||||
const { selectedSourceConfig } = useSimulateAccident()
|
||||
const { value: temp } = useWeatherFilter()
|
||||
|
||||
const getFilter = () => {
|
||||
const result = ["all", typeExpression, ...filterExpression];
|
||||
if (regionFilterExpression) {
|
||||
result.push(regionFilterExpression)
|
||||
}
|
||||
|
||||
if (selectedSourceConfig.sourceId) {
|
||||
result.push(["==", ["get", "tp_number"], selectedSourceConfig.sourceId])
|
||||
}
|
||||
return result
|
||||
};
|
||||
|
||||
const propToColor = source_filter?.key ? `${source_filter.key}_${tempMapper[temp]}` : null;
|
||||
const paintConfig = propToColor ? {
|
||||
...sourcePointLayer.paint,
|
||||
"circle-color": {
|
||||
property: propToColor,
|
||||
stops: SOURCE_COLOR.stops
|
||||
}
|
||||
} : sourcePointLayer.paint
|
||||
|
||||
return (
|
||||
<>
|
||||
<Layer
|
||||
{...sourcePointLayer}
|
||||
id={LAYER_IDS.source}
|
||||
source={"points"}
|
||||
source-layer={"public.data"}
|
||||
layout={{
|
||||
visibility: isVisible[LAYER_IDS.source] ? "visible" : "none",
|
||||
}}
|
||||
filter={getFilter()}
|
||||
paint={paintConfig}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,150 @@
|
||||
const POINT_SIZE = 6;
|
||||
|
||||
export const CONSUMER_COLOR = {
|
||||
stops: [
|
||||
[0.05, "#fff700"],
|
||||
[0.20, "#ffda00"],
|
||||
[0.35, "#ffbc00"],
|
||||
[0.5, "#ff9d00"],
|
||||
[0.65, "#ff7a00"],
|
||||
[0.8, "#ff5200"],
|
||||
[0.95, "#ff0000"],
|
||||
],
|
||||
};
|
||||
|
||||
export const CONSUMER_COLOR_COOLING = {
|
||||
stops: [
|
||||
[2.8, "#ff0000"],
|
||||
[3.7, "#ff5200"],
|
||||
[4.6, "#ff7a00"],
|
||||
[5.5, "#ff9d00"],
|
||||
[6.4, "#ffbc00"],
|
||||
[7.3, "#ffda00"],
|
||||
[8.2, "#fff700"],
|
||||
],
|
||||
};
|
||||
|
||||
|
||||
|
||||
export const DISPATCHER_COLOR = "#078500";
|
||||
export const SOURCE_COLOR = {
|
||||
stops: [
|
||||
[0.05, "#fd99ff"],
|
||||
[0.20, "#da7ee1"],
|
||||
[0.35, "#b964c3"],
|
||||
[0.5, "#984ba6"],
|
||||
[0.65, "#793389"],
|
||||
[0.8, "#5a1a6e"],
|
||||
[0.95, "#3d0053"],
|
||||
],
|
||||
};
|
||||
|
||||
const DEFAULT_POINT_CONFIG = {
|
||||
type: "circle",
|
||||
paint: {
|
||||
"circle-stroke-width": 0.1,
|
||||
"circle-stroke-color": "#262626",
|
||||
"circle-opacity": 0.8,
|
||||
},
|
||||
};
|
||||
|
||||
const getPointConfig = (color = 'grey', size = POINT_SIZE) => {
|
||||
return {
|
||||
...DEFAULT_POINT_CONFIG,
|
||||
paint: {
|
||||
...DEFAULT_POINT_CONFIG.paint,
|
||||
"circle-color": color,
|
||||
"circle-radius": [
|
||||
"interpolate",
|
||||
["linear"],
|
||||
["zoom"],
|
||||
3,
|
||||
0,
|
||||
10,
|
||||
1,
|
||||
13,
|
||||
size,
|
||||
],
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
export const getPointSymbolLayer = (image) => {
|
||||
return {
|
||||
type: "symbol",
|
||||
layout: {
|
||||
"icon-image": [
|
||||
'coalesce',
|
||||
['image', image],
|
||||
['image', 'defaultIcon']
|
||||
],
|
||||
"icon-size": ["interpolate", ["linear"], ["zoom"], 3, 0, 9, 0.1, 13, 0.5],
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
export const consumerPointLayer = {
|
||||
...getPointConfig(),
|
||||
paint: {
|
||||
...getPointConfig().paint,
|
||||
},
|
||||
};
|
||||
|
||||
export const dispatcherPointLayer = {
|
||||
...getPointSymbolLayer("dispatcherIcon"),
|
||||
};
|
||||
|
||||
export const sourcePointLayer = {
|
||||
...getPointConfig('grey', 10),
|
||||
paint: {
|
||||
...getPointConfig('grey', 10).paint,
|
||||
},
|
||||
};
|
||||
|
||||
const regionColor = "#676767";
|
||||
|
||||
export const aoLayer = {
|
||||
id: "ao",
|
||||
type: "line",
|
||||
source: "ao",
|
||||
"source-layer": "public.service_ao",
|
||||
layout: {
|
||||
"line-join": "round",
|
||||
"line-cap": "round",
|
||||
},
|
||||
paint: {
|
||||
"line-color": regionColor,
|
||||
"line-width": 1.5,
|
||||
"line-opacity": 0.8,
|
||||
},
|
||||
};
|
||||
|
||||
export const rayonLayer = {
|
||||
id: "rayon",
|
||||
type: "line",
|
||||
source: "rayon",
|
||||
"source-layer": "public.service_rayon",
|
||||
layout: {
|
||||
"line-join": "round",
|
||||
"line-cap": "round",
|
||||
},
|
||||
paint: {
|
||||
"line-color": regionColor,
|
||||
"line-width": 0.5,
|
||||
"line-opacity": 0.8,
|
||||
},
|
||||
};
|
||||
|
||||
export const selectedRegionLayer = {
|
||||
id: "selected-region",
|
||||
type: "line",
|
||||
source: "selected-region",
|
||||
layout: {
|
||||
"line-join": "round",
|
||||
"line-cap": "round",
|
||||
},
|
||||
paint: {
|
||||
"line-color": "#CC2222",
|
||||
"line-width": 4,
|
||||
},
|
||||
};
|
||||
@ -0,0 +1,36 @@
|
||||
import { useDzkhFilters } from "../../stores/useDzkhFilters.js";
|
||||
import { useWeatherFilter } from "../WeatherSlider/useWeatherFilter.js";
|
||||
import { tempMapper } from "../../config.js";
|
||||
|
||||
export const useConsumerLayerFilterExpression = () => {
|
||||
const {consumer_filter, consumer_type, energy_class, wall_material} = useDzkhFilters();
|
||||
const {value: temperature} = useWeatherFilter();
|
||||
const t = tempMapper[temperature]
|
||||
const consumerFilterExpression = () => {
|
||||
const res = [];
|
||||
if (consumer_filter) {
|
||||
const key = `${consumer_filter.key}_${t}`;
|
||||
|
||||
res.push(
|
||||
...[
|
||||
[">=", ["get", key], consumer_filter.gt],
|
||||
["<=", ["get", key], consumer_filter.lt],
|
||||
]
|
||||
)
|
||||
}
|
||||
if (consumer_type) {
|
||||
res.push(["==", ["get", "potreb_type"], consumer_type.value]);
|
||||
}
|
||||
if (energy_class) {
|
||||
res.push(["==", ["get", "fi_energy_class"], energy_class.value]);
|
||||
}
|
||||
if (wall_material) {
|
||||
res.push(["==", ["get", "wall_materials"], wall_material.value]);
|
||||
}
|
||||
return res;
|
||||
}
|
||||
|
||||
return [
|
||||
...consumerFilterExpression()
|
||||
]
|
||||
}
|
||||
@ -0,0 +1,24 @@
|
||||
import { useDzkhFilters } from "../../stores/useDzkhFilters.js";
|
||||
import { useWeatherFilter } from "../WeatherSlider/useWeatherFilter.js";
|
||||
import { tempMapper } from "../../config.js";
|
||||
|
||||
export const useSourceLayerFilterExpression = () => {
|
||||
const {source_filter} = useDzkhFilters();
|
||||
const {value: temperature} = useWeatherFilter();
|
||||
const t = tempMapper[temperature]
|
||||
const consumerFilterExpression = () => {
|
||||
if (source_filter) {
|
||||
const key = `${source_filter.key}_${t}`;
|
||||
|
||||
return [
|
||||
[">=", ["get", key], source_filter.gt],
|
||||
["<=", ["get", key], source_filter.lt],
|
||||
]
|
||||
}
|
||||
return [];
|
||||
}
|
||||
|
||||
return [
|
||||
...consumerFilterExpression()
|
||||
]
|
||||
}
|
||||
@ -0,0 +1,105 @@
|
||||
import React, { useMemo } from "react";
|
||||
import Checkbox from "antd/es/checkbox/Checkbox";
|
||||
import {LAYER_IDS} from "./constants.js";
|
||||
import {useLayersVisibility} from "../stores/useLayersVisibility.js";
|
||||
import { Image } from "antd";
|
||||
import { CONSUMER_COLOR, CONSUMER_COLOR_COOLING, SOURCE_COLOR } from "./Layers/layers-config.js";
|
||||
import {useDzkhFilters} from "../stores/useDzkhFilters.js";
|
||||
import dispIcon from "../assets/circle.svg";
|
||||
|
||||
export const LegendPointItem = ({color, imageSrc, name, border}) => {
|
||||
return (
|
||||
<div className="flex gap-2 items-center">
|
||||
{imageSrc && <Image src={imageSrc} width={18} height={18} className='flex items-center' preview={false}/>}
|
||||
{color && !imageSrc && (
|
||||
<span className="w-4 h-[100%] flex items-center justify-center">
|
||||
<span
|
||||
className={`rounded-xl w-3 h-3 inline-block ${border && "border-black border-[1px] border-solid"}`}
|
||||
style={{backgroundColor: color}}
|
||||
/>
|
||||
</span>
|
||||
)}
|
||||
|
||||
<span className='text-xs text-grey'>{name}</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const LegendColorRampItem = ({colors, name, desc}) => {
|
||||
return (
|
||||
<div>
|
||||
<span className='text-xs text-grey'>{name}</span>
|
||||
<div className="w-[200px]">
|
||||
<div
|
||||
className={"w-full h-[10px] rounded-xl"}
|
||||
style={{
|
||||
background: `linear-gradient(to right, ${colors.join(",")})`,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<span className="text-xs text-grey italic">{desc} →</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const consumerColors = CONSUMER_COLOR.stops.map(stop => stop[1])
|
||||
const sourceColors = SOURCE_COLOR.stops.map(stop => stop[1])
|
||||
|
||||
export function Legend() {
|
||||
const { toggleVisibility, isVisible } = useLayersVisibility();
|
||||
const { consumer_filter, source_filter } = useDzkhFilters();
|
||||
const isCooling = useMemo(() => {
|
||||
return consumer_filter && consumer_filter.key.includes('cooling')
|
||||
}, [consumer_filter])
|
||||
const consumerColors = useMemo(() => {
|
||||
if (isCooling) return CONSUMER_COLOR_COOLING.stops.map(stop => stop[1]);
|
||||
return CONSUMER_COLOR.stops.map(stop => stop[1])
|
||||
}, [isCooling]);
|
||||
|
||||
return (
|
||||
<div
|
||||
className="absolute bottom-[20px] right-[20px] text-xs text-grey z-10 bg-white-background rounded-xl p-3 space-y-3">
|
||||
<div>
|
||||
<div className="space-y-2 flex flex-col">
|
||||
<Checkbox
|
||||
className={"!ml-0"}
|
||||
onChange={() => toggleVisibility(LAYER_IDS.consumer)}
|
||||
checked={isVisible[LAYER_IDS.consumer]}
|
||||
>
|
||||
{
|
||||
consumer_filter ? <LegendColorRampItem
|
||||
colors={consumerColors}
|
||||
name="Потребитель"
|
||||
desc={consumer_filter.key.includes("prob") ? "склонность к аварийности" : consumer_filter.key.includes("cooling_time") ? "время остывания, ч" : "приоритет здания"}
|
||||
/> : <LegendPointItem name="Потребитель"/>
|
||||
}
|
||||
|
||||
</Checkbox>
|
||||
|
||||
<Checkbox
|
||||
className={"!ml-0"}
|
||||
onChange={() => toggleVisibility(LAYER_IDS.source)}
|
||||
checked={isVisible[LAYER_IDS.source]}
|
||||
>
|
||||
{
|
||||
source_filter ? <LegendColorRampItem
|
||||
colors={sourceColors}
|
||||
name="Источник"
|
||||
desc={'склонность к аварийности'}
|
||||
/> : <LegendPointItem name="Источник"/>
|
||||
}
|
||||
</Checkbox>
|
||||
|
||||
<Checkbox
|
||||
className={"!ml-0 flex items-center"}
|
||||
onChange={() => toggleVisibility(LAYER_IDS.dispatcher)}
|
||||
checked={isVisible[LAYER_IDS.dispatcher]}
|
||||
>
|
||||
<LegendPointItem name="Диспетчерская" imageSrc={dispIcon} />
|
||||
</Checkbox>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,31 @@
|
||||
import { TreeSelect } from "antd";
|
||||
import { Title } from "../../components/Title.jsx";
|
||||
import { CONSUMER_OPTIONS } from "../../config.js";
|
||||
import { useDzkhFilters } from "../../stores/useDzkhFilters.js";
|
||||
|
||||
export const ConsumerParameterSelect = ({ disabled }) => {
|
||||
const {
|
||||
consumer_filter,
|
||||
setConsumerFilter,
|
||||
} = useDzkhFilters();
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Title text={"Показатель потребителя"} />
|
||||
|
||||
<TreeSelect
|
||||
mode="tags"
|
||||
style={{
|
||||
width: "100%",
|
||||
}}
|
||||
placeholder="Выберите показатель"
|
||||
onChange={(key) => setConsumerFilter(key)}
|
||||
treeData={CONSUMER_OPTIONS}
|
||||
allowClear={true}
|
||||
value={consumer_filter?.key}
|
||||
disabled={disabled}
|
||||
treeDefaultExpandAll
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,66 @@
|
||||
import {SliderComponent as Slider} from "../../components/SliderComponent.jsx";
|
||||
import {useMemo} from "react";
|
||||
import {Spin} from "antd";
|
||||
import {useDzkhFilters} from "../../stores/useDzkhFilters.js";
|
||||
import {useGetDzkhFiltersRange} from "../api/filters.js";
|
||||
import {useWeatherFilter} from "../WeatherSlider/useWeatherFilter.js";
|
||||
import {tempMapper} from "../../config.js";
|
||||
|
||||
export const ConsumerParameterSlider = ({ disabled, isLoading }) => {
|
||||
const {
|
||||
consumer_filter,
|
||||
setConsumerFilter,
|
||||
} = useDzkhFilters();
|
||||
|
||||
const key = useMemo(() => {
|
||||
return consumer_filter?.key;
|
||||
}, [consumer_filter?.key]);
|
||||
|
||||
const values = useMemo(() => {
|
||||
if (!key) return [0, 0];
|
||||
const gt = consumer_filter.gt;
|
||||
const lt = consumer_filter.lt;
|
||||
|
||||
return [gt, lt];
|
||||
}, [consumer_filter, key]);
|
||||
|
||||
const {value: temperature} = useWeatherFilter();
|
||||
|
||||
const filterKey = useMemo(() => {
|
||||
if (!!key) return `${key}_${tempMapper[temperature]}`;
|
||||
return undefined;
|
||||
}, [key, temperature]);
|
||||
|
||||
const {data, isLoading: isRangeLoading} = useGetDzkhFiltersRange(filterKey);
|
||||
|
||||
const range = useMemo(() => {
|
||||
return data?.range || [0, 0]
|
||||
}, [data?.range])
|
||||
|
||||
const handleAfterChange = (range) => setConsumerFilter(key, range);
|
||||
|
||||
if (isLoading || isRangeLoading) {
|
||||
return (
|
||||
<div className={"flex justify-center items-center"}>
|
||||
<Spin />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{consumer_filter && range && (
|
||||
<Slider
|
||||
title={key.includes("prob") ? "Склонность к аварийности" : key.includes("cooling_time") ? "Время остывания, ч" : "Приоритет здания"}
|
||||
value={[values[0], values[1]]}
|
||||
onAfterChange={handleAfterChange}
|
||||
min={range[0]}
|
||||
max={range[1]}
|
||||
range
|
||||
step={0.01}
|
||||
disabled={disabled}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,46 @@
|
||||
import { Select } from "antd";
|
||||
import { Title } from "../../components/Title.jsx";
|
||||
import { useDzkhFilters } from "../../stores/useDzkhFilters.js";
|
||||
import { useGetDzkhFiltersValues } from "../api/filters.js";
|
||||
import { useMemo } from "react";
|
||||
|
||||
const key = "potreb_type";
|
||||
const mapper = {
|
||||
living_house: "Жилой дом",
|
||||
soc_object: "Социальный объект"
|
||||
}
|
||||
export const ConsumerTypeSelect = ({ disabled }) => {
|
||||
const {
|
||||
consumer_type,
|
||||
setConsumerType,
|
||||
} = useDzkhFilters();
|
||||
|
||||
const {data, isLoading: isrLoading} = useGetDzkhFiltersValues(key);
|
||||
|
||||
const options = useMemo(() => {
|
||||
if (!data) return [];
|
||||
return data?.filter(Boolean).map((item) => {
|
||||
return {
|
||||
value: item,
|
||||
label: mapper[item]
|
||||
}
|
||||
})
|
||||
}, [data])
|
||||
return (
|
||||
<div>
|
||||
<Title text={"Тип потребителя"} />
|
||||
|
||||
<Select
|
||||
style={{
|
||||
width: "100%",
|
||||
}}
|
||||
placeholder="Выберите тип"
|
||||
onChange={(v, o) => setConsumerType(o)}
|
||||
options={options}
|
||||
allowClear={true}
|
||||
value={consumer_type}
|
||||
disabled={disabled}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,43 @@
|
||||
import { Select } from "antd";
|
||||
import { Title } from "../../components/Title.jsx";
|
||||
import { useDzkhFilters } from "../../stores/useDzkhFilters.js";
|
||||
import { useGetDzkhFiltersValues } from "../api/filters.js";
|
||||
import { useMemo } from "react";
|
||||
|
||||
const key = "fi_energy_class";
|
||||
|
||||
export const EnergyClassSelect = ({ disabled }) => {
|
||||
const {
|
||||
energy_class,
|
||||
setEnergyClass,
|
||||
} = useDzkhFilters();
|
||||
|
||||
const {data, isLoading: isrLoading} = useGetDzkhFiltersValues(key);
|
||||
|
||||
const options = useMemo(() => {
|
||||
if (!data) return [];
|
||||
return data?.filter(Boolean).map((item) => {
|
||||
return {
|
||||
value: item,
|
||||
label: item
|
||||
}
|
||||
})
|
||||
}, [data])
|
||||
return (
|
||||
<div>
|
||||
<Title text={"Класс энергоэффективности"} />
|
||||
|
||||
<Select
|
||||
style={{
|
||||
width: "100%",
|
||||
}}
|
||||
placeholder="Выберите тип"
|
||||
onChange={(v, o) => setEnergyClass(o)}
|
||||
options={options}
|
||||
allowClear={true}
|
||||
value={energy_class}
|
||||
disabled={disabled}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,36 @@
|
||||
import {useDzkhFilters} from "../../stores/useDzkhFilters.js";
|
||||
import {Button} from "antd";
|
||||
import {ConsumerParameterSelect} from "./ConsumerParameterSelect.jsx";
|
||||
import {ConsumerParameterSlider} from "./ConsumerParameterSlider.jsx";
|
||||
import {SourceParameterSelect} from "./SourceParameterSelect.jsx";
|
||||
import {SourceParameterSlider} from "./SourceParameterSlider.jsx";
|
||||
import { ConsumerTypeSelect } from "./ConsumerTypeSelect.jsx";
|
||||
import { EnergyClassSelect } from "./EnergyClassSelect.jsx";
|
||||
import { WallMaterialSelect } from "./WallMaterialsSelect.jsx";
|
||||
|
||||
export const DzkhFilters = () => {
|
||||
const { clear, consumer_filter, source_filter } = useDzkhFilters();
|
||||
|
||||
return (
|
||||
<div className="flex flex-col flex-1">
|
||||
<div className="space-y-5">
|
||||
<ConsumerParameterSelect />
|
||||
<ConsumerParameterSlider />
|
||||
|
||||
<SourceParameterSelect />
|
||||
<SourceParameterSlider />
|
||||
|
||||
<ConsumerTypeSelect />
|
||||
<EnergyClassSelect />
|
||||
<WallMaterialSelect />
|
||||
</div>
|
||||
{(consumer_filter || source_filter) && <div className="flex items-center justify-end pt-4">
|
||||
<div className="flex gap-2">
|
||||
<Button onClick={() => clear()} type="secondary">
|
||||
Сбросить фильтры
|
||||
</Button>
|
||||
</div>
|
||||
</div>}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,35 @@
|
||||
import { TreeSelect } from "antd";
|
||||
import { Title } from "../../components/Title.jsx";
|
||||
import { useDzkhFilters } from "../../stores/useDzkhFilters.js";
|
||||
|
||||
const options = [{
|
||||
value: "prob6",
|
||||
label: "Авария на ТП"
|
||||
}];
|
||||
|
||||
export const SourceParameterSelect = ({ disabled }) => {
|
||||
const {
|
||||
source_filter,
|
||||
setSourceFilter,
|
||||
} = useDzkhFilters();
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Title text={"Показатель источника"} />
|
||||
|
||||
<TreeSelect
|
||||
mode="tags"
|
||||
style={{
|
||||
width: "100%",
|
||||
}}
|
||||
placeholder="Выберите показатель"
|
||||
onChange={(key) => setSourceFilter(key)}
|
||||
treeData={options}
|
||||
allowClear={true}
|
||||
value={source_filter?.key}
|
||||
disabled={disabled}
|
||||
treeDefaultExpandAll
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,66 @@
|
||||
import {SliderComponent as Slider} from "../../components/SliderComponent.jsx";
|
||||
import {useMemo} from "react";
|
||||
import {Spin} from "antd";
|
||||
import {useDzkhFilters} from "../../stores/useDzkhFilters.js";
|
||||
import {useWeatherFilter} from "../WeatherSlider/useWeatherFilter.js";
|
||||
import {tempMapper} from "../../config.js";
|
||||
import {useGetDzkhFiltersRange} from "../api/filters.js";
|
||||
|
||||
export const SourceParameterSlider = ({ disabled, isLoading }) => {
|
||||
const {
|
||||
source_filter,
|
||||
setSourceFilter,
|
||||
} = useDzkhFilters();
|
||||
|
||||
const key = useMemo(() => {
|
||||
return source_filter?.key;
|
||||
}, [source_filter?.key]);
|
||||
|
||||
const values = useMemo(() => {
|
||||
if (!key) return [0, 0];
|
||||
const gt = source_filter.gt;
|
||||
const lt = source_filter.lt;
|
||||
|
||||
return [gt, lt];
|
||||
}, [source_filter, key]);
|
||||
|
||||
const {value: temperature} = useWeatherFilter();
|
||||
|
||||
const filterKey = useMemo(() => {
|
||||
if (!!key) return `${key}_${tempMapper[temperature]}`;
|
||||
return undefined;
|
||||
}, [key, temperature]);
|
||||
|
||||
const {data, isLoading: isRangeLoading} = useGetDzkhFiltersRange(filterKey);
|
||||
|
||||
const range = useMemo(() => {
|
||||
return data?.range || [0, 0]
|
||||
}, [data?.range])
|
||||
|
||||
const handleAfterChange = (range) => setSourceFilter(key, range);
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className={"flex justify-center items-center"}>
|
||||
<Spin />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{source_filter && range && (
|
||||
<Slider
|
||||
title={"Фильтр по показателю"}
|
||||
value={[values[0], values[1]]}
|
||||
onAfterChange={handleAfterChange}
|
||||
min={range[0]}
|
||||
max={range[1]}
|
||||
range
|
||||
step={0.01}
|
||||
disabled={disabled}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,43 @@
|
||||
import { Select } from "antd";
|
||||
import { Title } from "../../components/Title.jsx";
|
||||
import { useDzkhFilters } from "../../stores/useDzkhFilters.js";
|
||||
import { useGetDzkhFiltersValues } from "../api/filters.js";
|
||||
import { useMemo } from "react";
|
||||
|
||||
const key = "wall_materials";
|
||||
|
||||
export const WallMaterialSelect = ({ disabled }) => {
|
||||
const {
|
||||
wall_material,
|
||||
setWallMaterial,
|
||||
} = useDzkhFilters();
|
||||
|
||||
const {data, isLoading: isLoading} = useGetDzkhFiltersValues(key);
|
||||
|
||||
const options = useMemo(() => {
|
||||
if (!data) return [];
|
||||
return data?.filter(Boolean).map((item) => {
|
||||
return {
|
||||
value: item,
|
||||
label: item
|
||||
}
|
||||
})
|
||||
}, [data])
|
||||
return (
|
||||
<div>
|
||||
<Title text={"Материал стен"} />
|
||||
|
||||
<Select
|
||||
style={{
|
||||
width: "100%",
|
||||
}}
|
||||
placeholder="Выберите тип"
|
||||
onChange={(v, o) => setWallMaterial(o)}
|
||||
options={options}
|
||||
allowClear={true}
|
||||
value={wall_material}
|
||||
disabled={disabled}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,27 @@
|
||||
import { SliderComponent as Slider } from "../../components/SliderComponent.jsx";
|
||||
import { Spin } from "antd";
|
||||
import { useWeatherFilter } from "./useWeatherFilter.js";
|
||||
|
||||
export const WeatherSlider = ({ disabled, fullRange, isLoading }) => {
|
||||
const { value, setValue, range } = useWeatherFilter();
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className={"flex justify-center items-center"}>
|
||||
<Spin />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="absolute w-[200px] top-[20px] right-[20px] text-xs text-grey z-10 bg-white-background rounded-xl p-3 space-y-3">
|
||||
<Slider
|
||||
title={"Температура воздуха на улице"}
|
||||
value={value}
|
||||
onAfterChange={setValue}
|
||||
min={range[0]}
|
||||
max={range[1]}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,23 @@
|
||||
import { create } from "zustand";
|
||||
import { immer } from "zustand/middleware/immer";
|
||||
import { persist } from "zustand/middleware";
|
||||
|
||||
const store = (set) => ({
|
||||
value: 0,
|
||||
range: [-25, 18],
|
||||
|
||||
setValue: (value) => {
|
||||
set((state) => {
|
||||
state.value = value;
|
||||
});
|
||||
},
|
||||
|
||||
clear: () =>
|
||||
set((state) => {
|
||||
state.value = 0;
|
||||
}),
|
||||
});
|
||||
|
||||
export const useWeatherFilter = create(
|
||||
persist(immer(store), { name: "weather-filter" })
|
||||
);
|
||||
@ -0,0 +1,82 @@
|
||||
import {useQuery} from "@tanstack/react-query";
|
||||
import {api} from "../../api.js";
|
||||
import { useWeatherFilter } from "../WeatherSlider/useWeatherFilter.js";
|
||||
|
||||
export const useGetDzkhFiltersRange = (field) => {
|
||||
return useQuery(
|
||||
["dzkh-filter-range", field],
|
||||
async () => {
|
||||
const { data, isInitialLoading, isFetching } = await api.get(
|
||||
`/api/data/filters_ranges/?field=${field}`
|
||||
);
|
||||
return {data, isLoading: isInitialLoading || isFetching};
|
||||
},
|
||||
{
|
||||
select: ({data, isLoading}) => {
|
||||
let r;
|
||||
if (!data || !data[field]) r = [0, 0];
|
||||
else r = [data[field].min, data[field].max];
|
||||
return {
|
||||
range: r,
|
||||
isLoading: isLoading
|
||||
};
|
||||
},
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
export const useGetDzkhFiltersValues = (field) => {
|
||||
return useQuery(
|
||||
["dzkh-filter-values", field],
|
||||
async () => {
|
||||
const { data, isInitialLoading, isFetching } = await api.get(
|
||||
`/api/data/filters_ranges/?field=${field}`
|
||||
);
|
||||
return {data, isLoading: isInitialLoading || isFetching};
|
||||
},
|
||||
{
|
||||
select: ({data, isLoading}) => {
|
||||
if (!data) return [];
|
||||
return [...data[field]];
|
||||
},
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
export const useShap = (id) => {
|
||||
return useQuery(
|
||||
["dzkh-shap", id],
|
||||
async () => {
|
||||
const { data, isInitialLoading, isFetching } = await api.get(
|
||||
`/api/data/${id}/data_shap/`
|
||||
);
|
||||
return {data, isLoading: isInitialLoading || isFetching};
|
||||
|
||||
},
|
||||
{
|
||||
select: (raw) => {
|
||||
return raw.data.shap
|
||||
}
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
export const useCrushSummary = (id) => {
|
||||
const {value: temp} = useWeatherFilter();
|
||||
if (!id) return {data: null};
|
||||
return useQuery(
|
||||
["dzkh-crush", id],
|
||||
async () => {
|
||||
const { data, isInitialLoading, isFetching } = await api.get(
|
||||
`/api/data/${id}/crush_summary/?current_temp=${temp}`
|
||||
);
|
||||
return {data, isLoading: isInitialLoading || isFetching};
|
||||
|
||||
},
|
||||
{
|
||||
select: (raw) => {
|
||||
return raw.data
|
||||
}
|
||||
}
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,5 @@
|
||||
export const LAYER_IDS = {
|
||||
consumer: 'potreb',
|
||||
source: 'tp',
|
||||
dispatcher: 'ods'
|
||||
};
|
||||
@ -0,0 +1,25 @@
|
||||
import { useState, useEffect } from "react";
|
||||
|
||||
const useLocalStorage = (key, defaultValue) => {
|
||||
const [value, setValue] = useState(() => {
|
||||
let currentValue;
|
||||
|
||||
try {
|
||||
currentValue = JSON.parse(
|
||||
localStorage.getItem(key) || String(defaultValue)
|
||||
);
|
||||
} catch (error) {
|
||||
currentValue = defaultValue;
|
||||
}
|
||||
|
||||
return currentValue;
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
localStorage.setItem(key, JSON.stringify(value));
|
||||
}, [value, key]);
|
||||
|
||||
return [value, setValue];
|
||||
};
|
||||
|
||||
export default useLocalStorage;
|
||||
@ -0,0 +1,27 @@
|
||||
export const FiltersIcon = ({ width = 24, height = 24 }) => {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
width={width}
|
||||
height={height}
|
||||
>
|
||||
<polygon points="23.7,4.1 23.7,6.1 0.1,6.2 0.1,4.1 " />
|
||||
<g>
|
||||
<circle cx="6.3" cy="5.2" r="3.1" />
|
||||
<circle fill="#fff" cx="6.3" cy="5.2" r="1.4" />
|
||||
</g>
|
||||
<polygon points="23.6,11.1 23.7,13.1 0,13.1 0,11 " />
|
||||
<g>
|
||||
<circle cx="18.6" cy="12.1" r="3.1" />
|
||||
<circle fill="#fff" cx="18.6" cy="12.1" r="1.4" />
|
||||
</g>
|
||||
<polygon points="23.8,18.2 23.9,20.1 0.2,20.2 0.2,18.2 " />
|
||||
<g>
|
||||
<circle cx="10.2" cy="19.1" r="3.1" />
|
||||
<circle fill="#fff" cx="10.2" cy="19.1" r="1.4" />
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,5 @@
|
||||
import dispatcherIcon from "../assets/circle.svg";
|
||||
|
||||
export const icons = [
|
||||
{ name: "dispatcherIcon", url: dispatcherIcon },
|
||||
];
|
||||
@ -0,0 +1,126 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
.mapboxgl-popup,
|
||||
.maplibregl-popup {
|
||||
@apply max-w-[400px] min-w-[250px];
|
||||
}
|
||||
|
||||
.mapboxgl-popup-content,
|
||||
.maplibregl-popup-content {
|
||||
@apply bg-grey-light shadow-lg rounded-md max-h-[500px] overflow-y-auto;
|
||||
}
|
||||
|
||||
.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip,
|
||||
.maplibregl-popup-anchor-bottom .maplibregl-popup-tip {
|
||||
@apply border-t-grey-light;
|
||||
}
|
||||
|
||||
.mapboxgl-popup-anchor-top .mapboxgl-popup-tip,
|
||||
.maplibregl-popup-anchor-top .maplibregl-popup-tip {
|
||||
@apply border-b-grey-light;
|
||||
}
|
||||
|
||||
.ant-popover-inner {
|
||||
@apply bg-white-background rounded-xl max-h-[calc(100vh-100px)] overflow-y-auto;
|
||||
}
|
||||
|
||||
/*.ant-modal-header {*/
|
||||
/* border-bottom: none;*/
|
||||
/*}*/
|
||||
|
||||
.ant-select-multiple .ant-select-selection-item {
|
||||
@apply !bg-rose;
|
||||
}
|
||||
|
||||
.mapboxgl-ctrl-group,
|
||||
.maplibregl-ctrl-group {
|
||||
@apply bg-white-background;
|
||||
}
|
||||
|
||||
.mapboxgl-ctrl-group button,
|
||||
.maplibregl-ctrl-group button {
|
||||
@apply w-fit;
|
||||
}
|
||||
|
||||
.maplibregl-export-control {
|
||||
@apply !w-[30px] !h-[30px];
|
||||
background: url('data:image/svg+xml;charset=UTF-8,<svg id="Capa_1" enable-background="new 0 0 512 512" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg"><g><path d="m422.5 99v-24c0-41.355-33.645-75-75-75h-184c-41.355 0-75 33.645-75 75v24z"/><path d="m118.5 319v122 26 15c0 16.568 13.431 30 30 30h214c16.569 0 30-13.432 30-30v-15-26-122zm177 128h-80c-8.284 0-15-6.716-15-15s6.716-15 15-15h80c8.284 0 15 6.716 15 15s-6.716 15-15 15zm0-64h-80c-8.284 0-15-6.716-15-15s6.716-15 15-15h80c8.284 0 15 6.716 15 15s-6.716 15-15 15z"/><path d="m436.5 129h-361c-41.355 0-75 33.645-75 75v120c0 41.355 33.645 75 75 75h13v-80h-9c-8.284 0-15-6.716-15-15s6.716-15 15-15h24 304 24c8.284 0 15 6.716 15 15s-6.716 15-15 15h-9v80h14c41.355 0 75-33.645 75-75v-120c0-41.355-33.645-75-75-75zm-309 94h-48c-8.284 0-15-6.716-15-15s6.716-15 15-15h48c8.284 0 15 6.716 15 15s-6.716 15-15 15z"/></g></svg>');
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 70%;
|
||||
}
|
||||
|
||||
.mapboxgl-ctrl-top-left .mapboxgl-ctrl,
|
||||
.maplibregl-ctrl-top-left .maplibregl-ctrl {
|
||||
margin: 20px 0 0 20px;
|
||||
}
|
||||
|
||||
.maplibregl-export-list {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.ant-select-item-option-content {
|
||||
overflow: initial;
|
||||
white-space: initial;
|
||||
text-overflow: initial;
|
||||
}
|
||||
|
||||
.generate-button {
|
||||
color: #fff;
|
||||
border-color: #0052FF !important;
|
||||
background: #0052FF !important;
|
||||
text-shadow: 0 -1px 0 rgb(0 0 0 / 12%);
|
||||
box-shadow: 0 2px 0 rgb(0 0 0 / 5%);
|
||||
line-height: 1.5715;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
font-weight: 400;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
background-image: none;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
touch-action: manipulation;
|
||||
height: 32px;
|
||||
padding: 4px 8px;
|
||||
margin: 8px auto 0;
|
||||
font-size: 14px;
|
||||
border-radius: 5px;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.legend_group .ant-collapse-header {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.filter_group .ant-collapse-header {
|
||||
padding: 0 !important;
|
||||
}
|
||||
.filter_group .ant-collapse-arrow {
|
||||
right: 0 !important;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
border: 4px solid rgba(0, 0, 0, 0);
|
||||
background-clip: padding-box;
|
||||
border-radius: 9999px;
|
||||
background-color: #e2e2e3;
|
||||
}
|
||||
|
||||
/* Works on Firefox*/
|
||||
* {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
|
||||
}
|
||||
|
||||
@ -0,0 +1,10 @@
|
||||
import React from "react";
|
||||
import ReactDOM from "react-dom/client";
|
||||
import App from "./App";
|
||||
import "maplibre-gl/dist/maplibre-gl.css";
|
||||
import "antd/dist/antd.less";
|
||||
import "./index.css";
|
||||
|
||||
ReactDOM.createRoot(document.getElementById("root")).render(
|
||||
<App />
|
||||
);
|
||||
@ -0,0 +1,43 @@
|
||||
import {twMerge} from "tailwind-merge";
|
||||
import {forwardRef} from "react";
|
||||
import {RegionSelect} from "../../components/RegionSelect.jsx";
|
||||
import {DzkhFilters} from "../../dzkh-features/Sidebar/Filters.jsx";
|
||||
import {useDzkhFilters} from "../../stores/useDzkhFilters.js";
|
||||
|
||||
import logo from "../../assets/dzkh_logo.png";
|
||||
import ditlogo from "../../assets/dit_logo.png";
|
||||
|
||||
export const Logo = ({ width = 40, height = 40 }) => {
|
||||
return (
|
||||
<img width={150} height={40} src={logo} alt={"logo"}/>
|
||||
);
|
||||
};
|
||||
|
||||
export const Sidebar = forwardRef(({ isCollapsed }, ref) => {
|
||||
const { filters, setRegion } = useDzkhFilters();
|
||||
|
||||
return (
|
||||
<div
|
||||
className={twMerge(
|
||||
"h-screen p-3 overflow-y-auto shrink-0 border-solid border-border border-0 border-r-[1px] flex flex-col transition-all",
|
||||
isCollapsed ? "basis-0 px-0 -translate-x-[320px]" : "basis-[320px]"
|
||||
)}
|
||||
ref={ref}
|
||||
>
|
||||
<div className="flex flex-col flex-1">
|
||||
<div className="space-y-5">
|
||||
<div className="flex flex-row gap-1 justify-between items-center">
|
||||
<img width={"48%"} height={50} src={logo} alt={"logo"}/>
|
||||
<img width={"48%"} height={50} src={ditlogo} alt={"logo"}/>
|
||||
</div>
|
||||
|
||||
<RegionSelect
|
||||
value={filters.region?.id}
|
||||
onChange={setRegion}
|
||||
/>
|
||||
<DzkhFilters />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
@ -0,0 +1,58 @@
|
||||
import React, {useCallback, useState} from "react";
|
||||
import {Table} from "../Table";
|
||||
import {useClickedPointConfig} from "../../../stores/useClickedPointConfig";
|
||||
import {useTableData} from "./useTableData.js";
|
||||
import {HeaderWrapper} from "../HeaderWrapper";
|
||||
import {useExportData} from "./useExportData.js";
|
||||
import {useColumns} from "../useColumns.jsx";
|
||||
import {PAGE_SIZE} from "../constants.js";
|
||||
import {usePopup} from "../../../stores/usePopup.js";
|
||||
|
||||
const tableKey = 'dzkhTable';
|
||||
export const DzkhTable = ({ fullWidth }) => {
|
||||
const { setClickedPointConfig } = useClickedPointConfig();
|
||||
const [page, setPage] = useState(1);
|
||||
const [pageSize, setPageSize] = useState(PAGE_SIZE);
|
||||
const { columns, orderColumns, sort, setSort } = useColumns(tableKey);
|
||||
const { setPopup } = usePopup();
|
||||
|
||||
const onSort = (sortDirection, key) => {
|
||||
if (sortDirection === `ascend`) setSort(key);
|
||||
if (sortDirection === `descend`) setSort(`-${key}`);
|
||||
if (!sortDirection) setSort(null);
|
||||
}
|
||||
|
||||
const { data, isClickedPointLoading, isDataLoading } = useTableData(
|
||||
page,
|
||||
() => setPage(1),
|
||||
pageSize,
|
||||
setPageSize,
|
||||
sort
|
||||
);
|
||||
|
||||
const resetPageSize = () => setPageSize(PAGE_SIZE);
|
||||
|
||||
const handlePageChange = useCallback((page) => {
|
||||
resetPageSize();
|
||||
setClickedPointConfig(null);
|
||||
setPopup(null);
|
||||
setPage(page);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Table
|
||||
data={data}
|
||||
onPageChange={handlePageChange}
|
||||
page={page}
|
||||
pageSize={pageSize}
|
||||
isClickedPointLoading={isClickedPointLoading}
|
||||
columns={columns}
|
||||
fullWidth={fullWidth}
|
||||
onChange={(val, filter, sorter) => {
|
||||
onSort(sorter.order, sorter.columnKey);
|
||||
}}
|
||||
header={<HeaderWrapper exportProvider={useExportData} orderColumns={orderColumns} />}
|
||||
loading={isDataLoading}
|
||||
/>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,66 @@
|
||||
import {useQuery} from "@tanstack/react-query";
|
||||
import {exportPoints} from "../../../api";
|
||||
import {handleExportSuccess} from "../ExportButton";
|
||||
import {appendFiltersInUse} from "../../../utils.js";
|
||||
import {useDzkhFilters} from "../../../stores/useDzkhFilters.js";
|
||||
import { useWeatherFilter } from "../../../dzkh-features/WeatherSlider/useWeatherFilter.js";
|
||||
import { useSimulateAccident } from "../../../stores/useSimulateAccident.js";
|
||||
import { tempMapper } from "../../../config.js";
|
||||
import { useUpdateLayerCounter } from "../../../stores/useUpdateLayerCounter.js";
|
||||
|
||||
export const useExportData = (enabled, onSettled) => {
|
||||
const { filters, consumer_filter, source_filter, consumer_type, wall_material, energy_class } = useDzkhFilters();
|
||||
const { value } = useWeatherFilter();
|
||||
const { selectedSourceConfig } = useSimulateAccident()
|
||||
const t = tempMapper[value];
|
||||
const {
|
||||
region,
|
||||
} = filters;
|
||||
|
||||
const getParams = () => {
|
||||
const params = new URLSearchParams();
|
||||
|
||||
const customFilters = [];
|
||||
if (consumer_filter && source_filter) {
|
||||
const cK = consumer_filter.key + "_" + t;
|
||||
const sK = source_filter.key + "_" + t;
|
||||
const cFilter = `${cK}__gte=${consumer_filter.gt}&${cK}__lte=${consumer_filter.lt}`;
|
||||
const sFilter = `${sK}__gte=${source_filter.gt}&${sK}__lt=${source_filter.lt}`;
|
||||
customFilters.push(`(${sFilter})|(${cFilter})`);
|
||||
}
|
||||
|
||||
if (selectedSourceConfig) {
|
||||
if (selectedSourceConfig.sourceId) customFilters.push(`(tp_number=${selectedSourceConfig.sourceId})`);
|
||||
if (selectedSourceConfig.dispatcherNumber) customFilters.push(`(ods_number=${selectedSourceConfig.dispatcherNumber})`);
|
||||
}
|
||||
|
||||
if (customFilters.length !== 0) {
|
||||
params.append("filters", customFilters.join("&"));
|
||||
}
|
||||
|
||||
if (consumer_filter && !source_filter) {
|
||||
params.append(consumer_filter.key + "_" + t + "__gt" , consumer_filter.gt)
|
||||
params.append(consumer_filter.key + "_" + t + "__lt", consumer_filter.lt)
|
||||
}
|
||||
if (source_filter && !consumer_filter) {
|
||||
params.append(source_filter.key + "_" + t + "__gt" , source_filter.gt)
|
||||
params.append(source_filter.key + "_" + t + "__lt", source_filter.lt)
|
||||
}
|
||||
|
||||
return params;
|
||||
}
|
||||
|
||||
return useQuery(
|
||||
["export-initial", filters],
|
||||
async () => {
|
||||
|
||||
return await exportPoints(getParams(), region);
|
||||
},
|
||||
{
|
||||
enabled,
|
||||
onSuccess: handleExportSuccess,
|
||||
onSettled,
|
||||
retry: false,
|
||||
}
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,96 @@
|
||||
import {useQuery} from "@tanstack/react-query";
|
||||
import {getPoints} from "../../../api";
|
||||
import {useMergeTableData} from "../useMergeTableData";
|
||||
import {appendFiltersInUse} from "../../../utils.js";
|
||||
import {useUpdateLayerCounter} from "../../../stores/useUpdateLayerCounter.js";
|
||||
import {useDzkhFilters} from "../../../stores/useDzkhFilters.js";
|
||||
import { useWeatherFilter } from "../../../dzkh-features/WeatherSlider/useWeatherFilter.js";
|
||||
import { CONSUMER_OPTIONS, tempMapper } from "../../../config.js";
|
||||
import { useSimulateAccident } from "../../../stores/useSimulateAccident.js";
|
||||
|
||||
export const useTableData = (page, resetPage, pageSize, setPageSize, sort) => {
|
||||
const { filters, consumer_filter, source_filter, consumer_type, wall_material, energy_class } = useDzkhFilters();
|
||||
const { value } = useWeatherFilter();
|
||||
const { selectedSourceConfig } = useSimulateAccident()
|
||||
const t = tempMapper[value];
|
||||
const { updateCounter } = useUpdateLayerCounter();
|
||||
const {
|
||||
region,
|
||||
} = filters;
|
||||
|
||||
const getParams = () => {
|
||||
const order =
|
||||
sort &&
|
||||
(sort.includes("prob") ||
|
||||
sort.includes("cooling_time") ||
|
||||
sort.includes("priority")) ?
|
||||
`${sort}_${t}` : sort;
|
||||
|
||||
const params = new URLSearchParams({
|
||||
page,
|
||||
page_size: pageSize,
|
||||
});
|
||||
|
||||
if (order) {
|
||||
params.append("ordering", order);
|
||||
}
|
||||
|
||||
const customFilters = [];
|
||||
if (consumer_filter && source_filter) {
|
||||
const cK = consumer_filter.key + "_" + t;
|
||||
const sK = source_filter.key + "_" + t;
|
||||
const cFilter = `${cK}__gte=${consumer_filter.gt}&${cK}__lte=${consumer_filter.lt}`;
|
||||
const sFilter = `${sK}__gte=${source_filter.gt}&${sK}__lt=${source_filter.lt}`;
|
||||
customFilters.push(`(${sFilter})|(${cFilter})`);
|
||||
}
|
||||
|
||||
if (selectedSourceConfig) {
|
||||
if (selectedSourceConfig.sourceId) customFilters.push(`(tp_number=${selectedSourceConfig.sourceId})`);
|
||||
if (selectedSourceConfig.dispatcherNumber) customFilters.push(`(ods_number=${selectedSourceConfig.dispatcherNumber})`);
|
||||
}
|
||||
|
||||
if (customFilters.length !== 0) {
|
||||
params.append("filters", customFilters.join("&"));
|
||||
}
|
||||
|
||||
if (consumer_filter && !source_filter) {
|
||||
params.append(consumer_filter.key + "_" + t + "__gt" , consumer_filter.gt)
|
||||
params.append(consumer_filter.key + "_" + t + "__lt", consumer_filter.lt)
|
||||
}
|
||||
if (source_filter && !consumer_filter) {
|
||||
params.append(source_filter.key + "_" + t + "__gt" , source_filter.gt)
|
||||
params.append(source_filter.key + "_" + t + "__lt", source_filter.lt)
|
||||
}
|
||||
|
||||
return params;
|
||||
}
|
||||
|
||||
const {data, isInitialLoading, isFetching} = useQuery(
|
||||
["table", page, filters, sort, updateCounter, consumer_filter, source_filter, selectedSourceConfig],
|
||||
async ({signal}) => {
|
||||
const params = getParams();
|
||||
|
||||
return await getPoints(params, region, signal);
|
||||
},
|
||||
{
|
||||
onError: (err) => {
|
||||
if (err.response.data.detail === "Неправильная страница") {
|
||||
resetPage();
|
||||
}
|
||||
},
|
||||
refetchOnWindowFocus: false
|
||||
}
|
||||
);
|
||||
|
||||
const {data: mergedData, isClickedPointLoading} = useMergeTableData(
|
||||
data,
|
||||
setPageSize
|
||||
);
|
||||
|
||||
return {
|
||||
data: mergedData,
|
||||
pageSize,
|
||||
isClickedPointLoading,
|
||||
isDataLoading: isInitialLoading || isFetching,
|
||||
};
|
||||
};
|
||||
@ -0,0 +1,31 @@
|
||||
import { useState } from "react";
|
||||
import { Button, Tooltip } from "antd";
|
||||
import { DownloadOutlined } from "@ant-design/icons";
|
||||
import { download } from "../../utils";
|
||||
|
||||
export const handleExportSuccess = (data) => {
|
||||
download("data.csv", data);
|
||||
};
|
||||
|
||||
export const ExportButton = ({ provider }) => {
|
||||
const [startExport, setStartExport] = useState(false);
|
||||
|
||||
provider(startExport, () => setStartExport(false));
|
||||
|
||||
const handleExport = (e) => {
|
||||
e.stopPropagation();
|
||||
setStartExport(true);
|
||||
};
|
||||
|
||||
return (
|
||||
<Tooltip title="Скачать данные">
|
||||
<Button
|
||||
onClick={handleExport}
|
||||
loading={startExport}
|
||||
disabled={startExport}
|
||||
>
|
||||
<DownloadOutlined />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,73 @@
|
||||
import { ExportButton } from "./ExportButton";
|
||||
import { Button, Tooltip } from "antd";
|
||||
import { useTable } from "../../stores/useTable";
|
||||
import { FullscreenExitOutlined, FullscreenOutlined } from "@ant-design/icons";
|
||||
import { useEffect, useState } from "react";
|
||||
import { TableSettings } from "./TableSettings";
|
||||
|
||||
const ToggleFullScreenButton = () => {
|
||||
const {
|
||||
tableState: { fullScreen },
|
||||
toggleFullScreen,
|
||||
} = useTable();
|
||||
const [hover, setHover] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => setHover(false), 1500);
|
||||
|
||||
return () => clearTimeout(timer);
|
||||
}, [hover]);
|
||||
|
||||
const handleMouseEnter = () => {
|
||||
setHover(true);
|
||||
};
|
||||
const handleMouseLeave = () => {
|
||||
setHover(false);
|
||||
};
|
||||
|
||||
const handleClick = (e) => {
|
||||
e.stopPropagation();
|
||||
toggleFullScreen();
|
||||
};
|
||||
|
||||
return (
|
||||
<Tooltip
|
||||
title={fullScreen ? "Свернуть" : "Раскрыть на полный экран"}
|
||||
placement={"topRight"}
|
||||
open={hover}
|
||||
>
|
||||
<Button
|
||||
onClick={handleClick}
|
||||
onMouseEnter={handleMouseEnter}
|
||||
onMouseLeave={handleMouseLeave}
|
||||
>
|
||||
{fullScreen ? <FullscreenExitOutlined /> : <FullscreenOutlined />}
|
||||
</Button>
|
||||
</Tooltip>
|
||||
);
|
||||
};
|
||||
|
||||
export const HeaderWrapper = ({
|
||||
leftColumn,
|
||||
rightColumn,
|
||||
exportProvider,
|
||||
classes,
|
||||
orderColumns
|
||||
}) => {
|
||||
return (
|
||||
<div className={"flex items-center w-full justify-between"}>
|
||||
<div className={classes?.leftColumn}>
|
||||
<span className="py-[5px]">Таблица атрибутов</span>
|
||||
{leftColumn}
|
||||
</div>
|
||||
<div className={classes?.rightColumn}>
|
||||
{rightColumn}
|
||||
<div className="flex items-center gap-x-1">
|
||||
<TableSettings orderColumns={orderColumns} />
|
||||
{exportProvider && <ExportButton provider={exportProvider} />}
|
||||
<ToggleFullScreenButton />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,84 @@
|
||||
.ant-collapse-content-box {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.table__wrapper .ant-table {
|
||||
@apply max-w-[calc(100vw-320px)];
|
||||
}
|
||||
|
||||
.table__wrapper .ant-table[data-fullwidth="true"] {
|
||||
@apply max-w-[100vw];
|
||||
}
|
||||
|
||||
.table__wrapper .ant-table-row {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.table__wrapper__fullScreen .ant-table-container {
|
||||
height: calc(100vh - 98px);
|
||||
}
|
||||
|
||||
.table__title {
|
||||
padding: 0 1rem;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.title__content {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
column-gap: 12px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.table__badge {
|
||||
background-color: rgba(51, 51, 51, 0.05);
|
||||
}
|
||||
|
||||
.ant-table-pagination.ant-pagination {
|
||||
@apply !my-2 !mx-3;
|
||||
}
|
||||
|
||||
.ant-table.ant-table-small .ant-table-title,
|
||||
.ant-table.ant-table-small .ant-table-footer,
|
||||
.ant-table.ant-table-small .ant-table-thead > tr > th,
|
||||
.ant-table.ant-table-small .ant-table-tbody > tr > td,
|
||||
.ant-table.ant-table-small tfoot > tr > th,
|
||||
.ant-table.ant-table-small tfoot > tr > td {
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.ant-collapse > .ant-collapse-item > .ant-collapse-header {
|
||||
@apply !items-center;
|
||||
}
|
||||
|
||||
.ant-collapse-header-text {
|
||||
@apply flex items-center;
|
||||
}
|
||||
|
||||
.ant-table-tbody > tr.ant-table-row-selected > td {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.ant-table-tbody > tr:not(.ant-table-placeholder):hover > td {
|
||||
@apply !bg-grey-light;
|
||||
}
|
||||
|
||||
.ant-table-tbody > tr.ant-table-row-selected.scroll-row > td {
|
||||
@apply !bg-primary-light;
|
||||
}
|
||||
|
||||
.ant-table-tbody > tr.ant-table-row.scroll-row > td {
|
||||
@apply !bg-primary-light;
|
||||
}
|
||||
|
||||
.ant-table-tbody > tr.ant-table-row-selected.scroll-row:hover > td {
|
||||
@apply !bg-primary-light;
|
||||
}
|
||||
|
||||
.ant-table-tbody > tr.ant-table-row.scroll-row:hover > td {
|
||||
@apply !bg-primary-light;
|
||||
}
|
||||
@ -0,0 +1,118 @@
|
||||
import React, { useEffect } from "react";
|
||||
import { Collapse, Empty, Table as AntdTable } from "antd";
|
||||
import "./Table.css";
|
||||
import parse from "wellknown";
|
||||
import { useMap } from "react-map-gl";
|
||||
import { useClickedPointConfig } from "../../stores/useClickedPointConfig";
|
||||
import scrollIntoView from "scroll-into-view-if-needed";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
import { HeaderWrapper } from "./HeaderWrapper";
|
||||
import { useTable } from "../../stores/useTable";
|
||||
import { usePopup } from "../../stores/usePopup.js";
|
||||
|
||||
export const Table = React.memo(
|
||||
({
|
||||
data,
|
||||
pageSize,
|
||||
isClickedPointLoading,
|
||||
page,
|
||||
onPageChange,
|
||||
columns,
|
||||
header,
|
||||
fullWidth,
|
||||
loading,
|
||||
onChange
|
||||
}) => {
|
||||
const { clickedPointConfig, setClickedPointConfig } =
|
||||
useClickedPointConfig();
|
||||
const { map } = useMap();
|
||||
const { tableState, toggleOpened } = useTable();
|
||||
const { setPopup } = usePopup();
|
||||
|
||||
const SCROLL = {
|
||||
y: tableState.fullScreen ? "calc(100vh - 136px)" : "200px",
|
||||
x: "max-content",
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (clickedPointConfig === null || isClickedPointLoading) return;
|
||||
|
||||
const row = document.querySelector(".scroll-row");
|
||||
if (row) {
|
||||
scrollIntoView(row, { behavior: "smooth" });
|
||||
}
|
||||
}, [clickedPointConfig, data]);
|
||||
|
||||
return (
|
||||
<Collapse
|
||||
bordered={false}
|
||||
onChange={toggleOpened}
|
||||
activeKey={tableState.isOpened ? "opened" : null}
|
||||
>
|
||||
<Collapse.Panel
|
||||
key={"opened"}
|
||||
header={header ? header : <HeaderWrapper />}
|
||||
collapsible={tableState.fullScreen ? "disabled" : undefined}
|
||||
>
|
||||
<AntdTable
|
||||
size="small"
|
||||
className={twMerge(
|
||||
"table__wrapper",
|
||||
tableState.fullScreen && "table__wrapper__fullScreen"
|
||||
)}
|
||||
locale={{ emptyText: <Empty description="Нет данных" /> }}
|
||||
pagination={{
|
||||
pageSize,
|
||||
current: page,
|
||||
onChange: onPageChange,
|
||||
total: data?.count,
|
||||
showSizeChanger: false,
|
||||
position: "bottomCenter",
|
||||
}}
|
||||
showHeader={data?.results && data.results.length > 0}
|
||||
dataSource={data?.results}
|
||||
columns={columns}
|
||||
onChange={onChange}
|
||||
rowKey="id"
|
||||
scroll={SCROLL}
|
||||
sticky={true}
|
||||
onRow={(record) => {
|
||||
return {
|
||||
onClick: () => {
|
||||
const geometry = parse(record.geometry);
|
||||
map.flyTo({
|
||||
center: [geometry.coordinates[0], geometry.coordinates[1]],
|
||||
zoom: 13,
|
||||
essential: true,
|
||||
});
|
||||
|
||||
const feature = {
|
||||
properties: record,
|
||||
};
|
||||
|
||||
setPopup({
|
||||
features: [feature],
|
||||
coordinates: geometry.coordinates,
|
||||
});
|
||||
|
||||
setClickedPointConfig(
|
||||
record.id,
|
||||
rowSelection?.selectedRowKeys.includes(record.id)
|
||||
);
|
||||
},
|
||||
};
|
||||
}}
|
||||
rowClassName={(record) =>
|
||||
twMerge(
|
||||
"cursor-pointer",
|
||||
record.id === clickedPointConfig?.id && "scroll-row"
|
||||
)
|
||||
}
|
||||
data-fullwidth={fullWidth}
|
||||
loading={loading}
|
||||
/>
|
||||
</Collapse.Panel>
|
||||
</Collapse>
|
||||
);
|
||||
}
|
||||
);
|
||||
@ -0,0 +1,79 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import {Button, Checkbox, Dropdown} from "antd";
|
||||
import {SettingOutlined} from "@ant-design/icons";
|
||||
import {DragDropContext, Draggable, Droppable} from "react-beautiful-dnd";
|
||||
|
||||
export const TableSettings = ({orderColumns}) => {
|
||||
const [columnsList, setColumnsList] = useState(orderColumns.order);
|
||||
useEffect(() => {
|
||||
setColumnsList(orderColumns.order);
|
||||
}, [orderColumns]);
|
||||
|
||||
const handleDrop = (droppedItem) => {
|
||||
// Ignore drop outside droppable container
|
||||
if (!droppedItem.destination) return;
|
||||
var updatedList = [...columnsList];
|
||||
// Remove dragged item
|
||||
const [reorderedItem] = updatedList.splice(droppedItem.source.index, 1);
|
||||
// Add dropped item
|
||||
updatedList.splice(droppedItem.destination.index, 0, reorderedItem);
|
||||
// Update State
|
||||
setColumnsList(updatedList);
|
||||
orderColumns.setOrder(updatedList);
|
||||
};
|
||||
|
||||
const hideColumn = (columnIndex) => {
|
||||
const updatedList = columnsList.map((item, index) => {
|
||||
if (columnIndex === index) return {...item, show: !item.show};
|
||||
return item;
|
||||
});
|
||||
setColumnsList(updatedList);
|
||||
orderColumns.setOrder(updatedList);
|
||||
}
|
||||
|
||||
const columnsListRender = () => {
|
||||
return (
|
||||
<div onClick={(e) => e.stopPropagation()} className='z-10 bg-white-background rounded-xl p-3 space-y-3'
|
||||
style={{ maxHeight: "80vh", overflowY: "scroll", margin: "24px 0 24px" }}>
|
||||
<DragDropContext onDragEnd={handleDrop}>
|
||||
<Droppable droppableId="tableOrder">
|
||||
{(provided) => (
|
||||
<div className="flex flex-col" {...provided.droppableProps} ref={provided.innerRef}>
|
||||
{columnsList.map((item, index) => {
|
||||
const num = item.position;
|
||||
if (!orderColumns.defaultColumns[num]) return;
|
||||
return (
|
||||
<Draggable key={`list-${num}`} draggableId={`list-${num}`} index={index}>
|
||||
{(provided) => (
|
||||
<div className="flex flex-row gap-2 p-1.5 hover:bg-gray-300 rounded-md" ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>
|
||||
<Checkbox onChange={() => hideColumn(index)} checked={item.show} />
|
||||
<p className="m-0">
|
||||
{ orderColumns.defaultColumns[num].name || orderColumns.defaultColumns[num].title }
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</Draggable>
|
||||
);
|
||||
})}
|
||||
{provided.placeholder}
|
||||
</div>
|
||||
)}
|
||||
</Droppable>
|
||||
</DragDropContext>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<Dropdown
|
||||
trigger="click"
|
||||
dropdownRender={() => columnsListRender()}
|
||||
>
|
||||
<Button
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<SettingOutlined/>
|
||||
</Button>
|
||||
</Dropdown>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,5 @@
|
||||
import { DzkhTable } from "./DzkhTable/DzkhTable.jsx";
|
||||
|
||||
export const TableWrapper = ({ fullWidth }) => {
|
||||
return <DzkhTable fullWidth={fullWidth} />;
|
||||
};
|
||||
@ -0,0 +1 @@
|
||||
export const PAGE_SIZE = 30;
|
||||
@ -0,0 +1,196 @@
|
||||
import {tempMapper} from "../../config";
|
||||
import {useEffect, useMemo} from "react";
|
||||
import {useGetRegions} from "../../components/RegionSelect.jsx";
|
||||
import {useTable} from "../../stores/useTable.js";
|
||||
import useLocalStorage from "../../hooks/useLocalStorage.js";
|
||||
import {useWeatherFilter} from "../../dzkh-features/WeatherSlider/useWeatherFilter.js";
|
||||
|
||||
export const useColumns = (key) => {
|
||||
const { data: regions } = useGetRegions();
|
||||
const {
|
||||
tableState: { fullScreen },
|
||||
} = useTable();
|
||||
|
||||
const {value: temperature} = useWeatherFilter();
|
||||
|
||||
const [sort, setSort] = useLocalStorage(`${key}Sort`, null);
|
||||
|
||||
const defaultColumns = useMemo(() => {
|
||||
return [
|
||||
{
|
||||
title: "Адрес",
|
||||
dataIndex: "building_address",
|
||||
key: "building_address",
|
||||
width: "120px",
|
||||
ellipsis: true,
|
||||
sorter: true,
|
||||
showSorterTooltip: false,
|
||||
},
|
||||
{
|
||||
title: "Номер ТП",
|
||||
dataIndex: "tp_number",
|
||||
key: "tp_number",
|
||||
width: "120px",
|
||||
ellipsis: true,
|
||||
sorter: true,
|
||||
showSorterTooltip: false,
|
||||
},
|
||||
{
|
||||
title: "Номер ОДС",
|
||||
dataIndex: "ods_number",
|
||||
key: "ods_number",
|
||||
width: "120px",
|
||||
ellipsis: true,
|
||||
sorter: true,
|
||||
showSorterTooltip: false,
|
||||
},
|
||||
{
|
||||
title: "Телефон ОДС",
|
||||
dataIndex: "phone_number",
|
||||
key: "phone_number",
|
||||
width: "120px",
|
||||
ellipsis: true,
|
||||
sorter: true,
|
||||
showSorterTooltip: false,
|
||||
},
|
||||
{
|
||||
title: "Отсутствие отопления в доме",
|
||||
dataIndex: `prob1_${tempMapper[temperature]}`,
|
||||
key: "prob1",
|
||||
width: "120px",
|
||||
ellipsis: true,
|
||||
sorter: true,
|
||||
showSorterTooltip: false,
|
||||
},
|
||||
{
|
||||
title: "Протечка труб в подъезде",
|
||||
dataIndex: `prob2_${tempMapper[temperature]}`,
|
||||
key: "prob2",
|
||||
width: "120px",
|
||||
ellipsis: true,
|
||||
sorter: true,
|
||||
showSorterTooltip: false,
|
||||
},
|
||||
{
|
||||
title: "Температура в квартире ниже нормативной",
|
||||
dataIndex: `prob3_${tempMapper[temperature]}`,
|
||||
key: "prob3",
|
||||
width: "120px",
|
||||
ellipsis: true,
|
||||
sorter: true,
|
||||
showSorterTooltip: false,
|
||||
},
|
||||
{
|
||||
title: "Температура в помещении общего пользования ниже нормативной",
|
||||
dataIndex: `prob4_${tempMapper[temperature]}`,
|
||||
key: "prob4",
|
||||
width: "120px",
|
||||
ellipsis: true,
|
||||
sorter: true,
|
||||
showSorterTooltip: false,
|
||||
},
|
||||
{
|
||||
title: "Течь в системе отопления",
|
||||
dataIndex: `prob5_${tempMapper[temperature]}`,
|
||||
key: "prob5",
|
||||
width: "120px",
|
||||
ellipsis: true,
|
||||
sorter: true,
|
||||
showSorterTooltip: false,
|
||||
},
|
||||
{
|
||||
title: "Авария на ТП",
|
||||
dataIndex: `prob6_${tempMapper[temperature]}`,
|
||||
key: "prob6",
|
||||
width: "120px",
|
||||
ellipsis: true,
|
||||
sorter: true,
|
||||
showSorterTooltip: false,
|
||||
},
|
||||
|
||||
{
|
||||
title: "Время остывания, ч",
|
||||
dataIndex: `cooling_time_${tempMapper[temperature]}`,
|
||||
key: "cooling_time",
|
||||
width: "120px",
|
||||
ellipsis: true,
|
||||
sorter: true,
|
||||
showSorterTooltip: false,
|
||||
},
|
||||
{
|
||||
title: "Приоритет здания",
|
||||
dataIndex: `priority_${tempMapper[temperature]}`,
|
||||
key: "priority",
|
||||
width: "120px",
|
||||
ellipsis: true,
|
||||
sorter: true,
|
||||
showSorterTooltip: false,
|
||||
},
|
||||
{
|
||||
title: "Материал стен",
|
||||
dataIndex: "wall_materials",
|
||||
key: "wall_materials",
|
||||
width: "120px",
|
||||
ellipsis: true,
|
||||
sorter: true,
|
||||
showSorterTooltip: false,
|
||||
},
|
||||
{
|
||||
title: "Класс энергоэффективности",
|
||||
dataIndex: "fi_energy_class",
|
||||
key: "fi_energy_class",
|
||||
width: "120px",
|
||||
ellipsis: true,
|
||||
sorter: true,
|
||||
showSorterTooltip: false,
|
||||
},
|
||||
].filter(Boolean);
|
||||
}, [regions?.normalized, fullScreen, temperature]);
|
||||
|
||||
const [order, setOrder] = useLocalStorage(`${key}Order`, defaultColumns.map((column, index) => {
|
||||
return {
|
||||
key: column.key,
|
||||
position: index,
|
||||
show: true,
|
||||
}
|
||||
}));
|
||||
|
||||
useEffect(() => {
|
||||
const newColumns = defaultColumns.filter((column) => {
|
||||
return !order.find(c => c.key === column.key);
|
||||
});
|
||||
const newOrderColumns = newColumns.map((column, index) => {
|
||||
return {
|
||||
key: column.key,
|
||||
position: defaultColumns.length - index - 1,
|
||||
show: true,
|
||||
}
|
||||
});
|
||||
setOrder([
|
||||
...order,
|
||||
...newOrderColumns
|
||||
]);
|
||||
}, [defaultColumns]);
|
||||
|
||||
const columns = useMemo(() => {
|
||||
return order.flatMap((item) => !item.show ? [] : defaultColumns[item.position])
|
||||
.map((column) => {
|
||||
if (sort && sort.includes(column?.key)) return {
|
||||
...column,
|
||||
defaultSortOrder: sort.includes('-') ? 'descend' : 'ascend',
|
||||
};
|
||||
return column;
|
||||
}).filter(Boolean);
|
||||
}, [defaultColumns, order, sort]);
|
||||
|
||||
return {
|
||||
columns,
|
||||
orderColumns: {
|
||||
defaultColumns,
|
||||
order,
|
||||
setOrder,
|
||||
},
|
||||
sort,
|
||||
setSort
|
||||
};
|
||||
};
|
||||
@ -0,0 +1,28 @@
|
||||
import { useClickedPointConfig } from "../../stores/useClickedPointConfig";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { api } from "../../api";
|
||||
|
||||
export const useGetClickedPoint = (enabled, onSuccess) => {
|
||||
const { clickedPointConfig } = useClickedPointConfig();
|
||||
|
||||
const { data, isInitialLoading, isFetching } = useQuery(
|
||||
["clicked-point", clickedPointConfig?.id],
|
||||
async () => {
|
||||
const params = new URLSearchParams({
|
||||
"location_ids[]": [clickedPointConfig.id],
|
||||
});
|
||||
|
||||
const { data } = await api.get(
|
||||
`/api/placement_points?${params.toString()}`
|
||||
);
|
||||
|
||||
return data;
|
||||
},
|
||||
{
|
||||
enabled,
|
||||
onSuccess,
|
||||
}
|
||||
);
|
||||
|
||||
return { data, isLoading: isInitialLoading || isFetching };
|
||||
};
|
||||
@ -0,0 +1,66 @@
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { PAGE_SIZE } from "./constants";
|
||||
import { useClickedPointConfig } from "../../stores/useClickedPointConfig";
|
||||
import { useGetClickedPoint } from "./useGetClickedPoint";
|
||||
import { useQueryClient } from "@tanstack/react-query";
|
||||
|
||||
export const useMergeTableData = (fullData, onPageSizeChange) => {
|
||||
const [mergedData, setMergedData] = useState();
|
||||
const [shouldLoadClickedPoint, setShouldLoadClickedPoint] = useState(false);
|
||||
const lastClickedPointId = useRef();
|
||||
|
||||
const { data: clickedPointData, isLoading: isClickedPointLoading } =
|
||||
useGetClickedPoint(shouldLoadClickedPoint, () =>
|
||||
setShouldLoadClickedPoint(false)
|
||||
);
|
||||
|
||||
const { clickedPointConfig } = useClickedPointConfig();
|
||||
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
useEffect(() => {
|
||||
if (!fullData) return;
|
||||
|
||||
setMergedData(fullData);
|
||||
}, [fullData]);
|
||||
|
||||
// find clicked point among already loaded data - if no - fetch it
|
||||
useEffect(() => {
|
||||
if (!fullData || clickedPointConfig === null) return;
|
||||
|
||||
const clickedPoint = fullData.results.find(
|
||||
(item) => item.id === clickedPointConfig.id
|
||||
);
|
||||
|
||||
if (clickedPoint) {
|
||||
return;
|
||||
}
|
||||
|
||||
setShouldLoadClickedPoint(true);
|
||||
}, [fullData, clickedPointConfig]);
|
||||
|
||||
// merge data with clicked point
|
||||
useEffect(() => {
|
||||
if (!clickedPointData?.results?.[0]) return;
|
||||
|
||||
lastClickedPointId.current = clickedPointData.results[0].id;
|
||||
|
||||
onPageSizeChange(PAGE_SIZE + 1);
|
||||
setMergedData({
|
||||
count: fullData?.count + 1,
|
||||
results: [clickedPointData.results[0], ...fullData.results],
|
||||
});
|
||||
}, [clickedPointData, fullData]);
|
||||
|
||||
// reset data after popup disappeared
|
||||
useEffect(() => {
|
||||
if (clickedPointConfig === null) {
|
||||
const queryKey = ["clicked-point", lastClickedPointId.current];
|
||||
queryClient.removeQueries({ queryKey });
|
||||
onPageSizeChange(PAGE_SIZE);
|
||||
setMergedData(fullData);
|
||||
}
|
||||
}, [clickedPointConfig, fullData]);
|
||||
|
||||
return { data: mergedData, isClickedPointLoading };
|
||||
};
|
||||
@ -0,0 +1,7 @@
|
||||
import { MapComponent } from "../Map/MapComponent";
|
||||
|
||||
export function MapPage() {
|
||||
return (
|
||||
<MapComponent />
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,9 @@
|
||||
import { action, atom } from "nanostores";
|
||||
|
||||
export const userInfoLoading$ = atom(true);
|
||||
|
||||
export const isAuthorized$ = atom(false);
|
||||
|
||||
export const setAuth = action(isAuthorized$, "setAuth", (store, newValue) => {
|
||||
store.set(newValue);
|
||||
});
|
||||
@ -0,0 +1,19 @@
|
||||
export class DjangoValidationError extends Error {
|
||||
errors;
|
||||
|
||||
constructor(errObject) {
|
||||
super("");
|
||||
this.name = "DjangoValidationError";
|
||||
|
||||
const fieldsErrors = [];
|
||||
|
||||
for (const field in errObject) {
|
||||
fieldsErrors.push({
|
||||
name: field,
|
||||
errors: errObject[field],
|
||||
});
|
||||
}
|
||||
|
||||
this.errors = fieldsErrors;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,21 @@
|
||||
import { create } from "zustand";
|
||||
import { immer } from "zustand/middleware/immer";
|
||||
|
||||
const store = (set) => ({
|
||||
clickedPointConfig: null,
|
||||
|
||||
setClickedPointConfig: (id, shouldSelect = false) => {
|
||||
set((state) => {
|
||||
if (id === null) {
|
||||
state.clickedPointConfig = null;
|
||||
return state;
|
||||
}
|
||||
state.clickedPointConfig = {
|
||||
id,
|
||||
shouldSelect,
|
||||
};
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
export const useClickedPointConfig = create(immer(store));
|
||||
@ -0,0 +1,126 @@
|
||||
import { create } from "zustand";
|
||||
import { immer } from "zustand/middleware/immer";
|
||||
import { persist } from "zustand/middleware";
|
||||
|
||||
export const INITIAL = {
|
||||
region: null,
|
||||
prob1__gt: 0,
|
||||
prob1__lt: 5000,
|
||||
prob2__gt: 0,
|
||||
prob2__lt: 5000,
|
||||
prob3__gt: 0,
|
||||
prob3__lt: 5000,
|
||||
prob4__gt: 0,
|
||||
prob4__lt: 5000,
|
||||
prob5__gt: 0,
|
||||
prob5__lt: 5000,
|
||||
prob6__gt: 0,
|
||||
prob6__lt: 5000,
|
||||
cooling_time__gt: 0,
|
||||
cooling_time__lt: 5000,
|
||||
priority__gt: 0,
|
||||
priority__lt: 5000,
|
||||
};
|
||||
|
||||
const INITIAL_RANGES = {
|
||||
prob1: [0, 5000],
|
||||
prob2: [0, 5000],
|
||||
prob3: [0, 5000],
|
||||
prob4: [0, 5000],
|
||||
prob5: [0, 5000],
|
||||
prob6: [0, 5000],
|
||||
cooling_time: [0, 5000],
|
||||
priority: [0, 5000],
|
||||
}
|
||||
|
||||
const store = (set) => ({
|
||||
filters: INITIAL,
|
||||
consumer_filter: null,
|
||||
consumer_ranges: null,
|
||||
source_filter: null,
|
||||
consumer_type: null,
|
||||
energy_class: null,
|
||||
wall_material: null,
|
||||
ranges: INITIAL_RANGES,
|
||||
|
||||
setConsumerFilter: (key, value) =>
|
||||
set((state) => {
|
||||
if (!key) {
|
||||
state.consumer_filter = null;
|
||||
return;
|
||||
}
|
||||
const arr = value ? value : state.ranges[key];
|
||||
state.consumer_filter = {
|
||||
key: key,
|
||||
gt: arr[0],
|
||||
lt: arr[1],
|
||||
};
|
||||
}),
|
||||
|
||||
setSourceFilter: (key, value) =>
|
||||
set((state) => {
|
||||
if (!key) {
|
||||
state.source_filter = null;
|
||||
return;
|
||||
}
|
||||
const arr = value ? value : state.ranges[key];
|
||||
state.source_filter = {
|
||||
key: key,
|
||||
gt: arr[0],
|
||||
lt: arr[1],
|
||||
};
|
||||
}),
|
||||
|
||||
setRegion: (value) =>
|
||||
set((state) => {
|
||||
state.filters.region = value;
|
||||
}),
|
||||
|
||||
setConsumerType: (value) =>
|
||||
set((state) => {
|
||||
state.consumer_type = value;
|
||||
}),
|
||||
|
||||
setEnergyClass: (value) =>
|
||||
set((state) => {
|
||||
state.energy_class = value;
|
||||
}),
|
||||
|
||||
setWallMaterial: (value) =>
|
||||
set((state) => {
|
||||
state.wall_material = value;
|
||||
}),
|
||||
|
||||
setFilterWithKey: (value, key) =>
|
||||
set((state) => {
|
||||
state.filters[`${key}__gt`] = value[0];
|
||||
state.filters[`${key}__lt`] = value[1];
|
||||
}),
|
||||
|
||||
setRanges: (value) =>
|
||||
set((state) => {
|
||||
state.ranges = value;
|
||||
}),
|
||||
|
||||
clear: (fullRange) =>
|
||||
set((state) => {
|
||||
|
||||
state.consumer_filter = null;
|
||||
state.source_filter = null;
|
||||
state.energy_class = null;
|
||||
state.consumer_type = null;
|
||||
state.wall_material = null;
|
||||
if (!fullRange) {
|
||||
state.filters = INITIAL;
|
||||
return state;
|
||||
}
|
||||
state.filters = {
|
||||
...INITIAL,
|
||||
prediction: fullRange.prediction,
|
||||
};
|
||||
}),
|
||||
});
|
||||
|
||||
export const useDzkhFilters = create(
|
||||
persist(immer(store), { name: "dzkh/filters" })
|
||||
);
|
||||
@ -0,0 +1,43 @@
|
||||
import { create } from "zustand";
|
||||
import { immer } from "zustand/middleware/immer";
|
||||
import { persist } from "zustand/middleware";
|
||||
import { LAYER_IDS } from "../dzkh-features/constants.js";
|
||||
|
||||
const INITIAL_STATE = {
|
||||
[LAYER_IDS.consumer]: true,
|
||||
[LAYER_IDS.source]: true,
|
||||
[LAYER_IDS.dispatcher]: true,
|
||||
};
|
||||
|
||||
const store = (set) => ({
|
||||
isVisible: INITIAL_STATE,
|
||||
|
||||
toggleVisibility: (layerId) =>
|
||||
set((state) => {
|
||||
state.isVisible[layerId] = !state.isVisible[layerId];
|
||||
}),
|
||||
|
||||
showLayers: (layerIds) =>
|
||||
set((state) => {
|
||||
layerIds.forEach((layerId) => {
|
||||
state.isVisible[layerId] = true;
|
||||
});
|
||||
}),
|
||||
|
||||
setLayersVisibility: (visibleLayerIds) =>
|
||||
set((state) => {
|
||||
visibleLayerIds.forEach((layerId) => {
|
||||
state.isVisible[layerId] = true;
|
||||
});
|
||||
const invisibleLayersIds = Object.keys(state.isVisible).filter(
|
||||
(l) => !visibleLayerIds.includes(l)
|
||||
);
|
||||
invisibleLayersIds.forEach((layerId) => {
|
||||
state.isVisible[layerId] = false;
|
||||
});
|
||||
}),
|
||||
});
|
||||
|
||||
export const useLayersVisibility = create(
|
||||
persist(immer(store), { name: "dzkh/layers-visibility" })
|
||||
);
|
||||
@ -0,0 +1,18 @@
|
||||
import { create } from "zustand";
|
||||
import { immer } from "zustand/middleware/immer";
|
||||
|
||||
const store = (set) => ({
|
||||
popup: null,
|
||||
|
||||
setPopup: (popupState) => {
|
||||
set((state) => {
|
||||
if (!popupState) {
|
||||
state.popup = null;
|
||||
return state;
|
||||
}
|
||||
state.popup = popupState;
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
export const usePopup = create(immer(store));
|
||||
@ -0,0 +1,16 @@
|
||||
import { create } from "zustand";
|
||||
import { immer } from "zustand/middleware/immer";
|
||||
|
||||
const store = (set) => ({
|
||||
selectedSourceConfig: {
|
||||
sourceId: null,
|
||||
dispatcherNumber: null
|
||||
},
|
||||
|
||||
setSelectedSourceConfig: ({pointId, sourceId, dispatcherNumber}) =>
|
||||
set((state) => {
|
||||
state.selectedSourceConfig = { pointId, sourceId, dispatcherNumber: dispatcherNumber || null }
|
||||
}),
|
||||
});
|
||||
|
||||
export const useSimulateAccident = create(immer(store));
|
||||
@ -0,0 +1,31 @@
|
||||
import { create } from "zustand";
|
||||
import { immer } from "zustand/middleware/immer";
|
||||
|
||||
const INITIAL_STATE = {
|
||||
isOpened: false,
|
||||
fullScreen: false,
|
||||
};
|
||||
|
||||
const store = (set) => ({
|
||||
tableState: INITIAL_STATE,
|
||||
|
||||
toggleOpened: (value) => {
|
||||
set((state) => {
|
||||
state.tableState.isOpened = value[0] === "opened";
|
||||
});
|
||||
},
|
||||
|
||||
toggleFullScreen: () => {
|
||||
set((state) => {
|
||||
state.tableState.fullScreen = !state.tableState.fullScreen;
|
||||
});
|
||||
},
|
||||
|
||||
openTable: () => {
|
||||
set((state) => {
|
||||
state.tableState.isOpened = true;
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
export const useTable = create(immer(store));
|
||||
@ -0,0 +1,14 @@
|
||||
import { create } from "zustand";
|
||||
import { immer } from "zustand/middleware/immer";
|
||||
|
||||
const store = (set) => ({
|
||||
updateCounter: -1,
|
||||
|
||||
toggleUpdateCounter: () => {
|
||||
set((state) => {
|
||||
state.updateCounter = state.updateCounter === -1 ? 1 : -1;
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
export const useUpdateLayerCounter = create(immer(store));
|
||||
@ -0,0 +1,17 @@
|
||||
export function download(filename, data) {
|
||||
const downloadLink = window.document.createElement("a");
|
||||
downloadLink.href = window.URL.createObjectURL(
|
||||
new Blob([data], {
|
||||
type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
|
||||
})
|
||||
);
|
||||
downloadLink.download = filename;
|
||||
document.body.appendChild(downloadLink);
|
||||
downloadLink.click();
|
||||
document.body.removeChild(downloadLink);
|
||||
}
|
||||
|
||||
export const appendFiltersInUse = (params, filters, ranges) => {}
|
||||
|
||||
export const isNil = (value) =>
|
||||
value === undefined || value === null || value === "";
|
||||
@ -0,0 +1,23 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: ["./src/**/*.{js,jsx}"],
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
primary: "#0052FF",
|
||||
'primary-light': "#ffe4e4",
|
||||
blue: "rgba(167,201,236,0.57)",
|
||||
"white-background": "rgba(255, 255, 255, 0.9)",
|
||||
"white-background-light": "rgba(255, 255, 255, 0.6)",
|
||||
grey: "rgba(0,0, 0, 0.5)",
|
||||
"grey-light": "rgba(239,239,239,0.9)",
|
||||
border: '#d9d9d9',
|
||||
rose: '#FAA7B4'
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
corePlugins: {
|
||||
preflight: false, // <== disable this!
|
||||
},
|
||||
};
|
||||
@ -0,0 +1,25 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ESNext",
|
||||
"useDefineForClassFields": true,
|
||||
"lib": ["DOM", "DOM.Iterable", "ESNext"],
|
||||
"allowJs": false,
|
||||
"skipLibCheck": true,
|
||||
"esModuleInterop": false,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"strict": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "Node",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx"
|
||||
},
|
||||
"include": ["src"],
|
||||
"references": [
|
||||
{
|
||||
"path": "./tsconfig.node.json"
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -0,0 +1,9 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "Node",
|
||||
"allowSyntheticDefaultImports": true
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
}
|
||||
@ -0,0 +1 @@
|
||||
/// <reference types="vite/client" />
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue