nestjs rewrite
This commit is contained in:
popovspiridon99
@ -1,4 +1,4 @@
|
||||
import { useEffect, useMemo, useState } from 'react'
|
||||
import { useMemo, useState } from 'react'
|
||||
import useSWR from 'swr'
|
||||
import { fetcher } from '../../http/axiosInstance'
|
||||
import { BASE_URL } from '../../constants'
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import { useEffect, useRef, useState } from 'react'
|
||||
import { jsPDF } from "jspdf"
|
||||
import 'ol/ol.css'
|
||||
import { Modify } from 'ol/interaction'
|
||||
import { ImageStatic, Vector as VectorSource } from 'ol/source'
|
||||
@ -8,20 +7,20 @@ import { IRectCoords, SatelliteMapsProvider } from '../../interfaces/map'
|
||||
import { Extent, getCenter } from 'ol/extent'
|
||||
import { highlightStyleRed, highlightStyleYellow } from './MapStyles'
|
||||
import { customMapSource, googleMapsSatelliteSource, yandexMapsSatelliteSource } from './MapSources'
|
||||
import { Geometry, LineString, SimpleGeometry } from 'ol/geom'
|
||||
import { Geometry, SimpleGeometry } from 'ol/geom'
|
||||
import { fromExtent } from 'ol/geom/Polygon'
|
||||
import { Coordinate } from 'ol/coordinate'
|
||||
import { addInteractions, handleImageDrop, loadFeatures, processFigure, processLine } from './mapUtils'
|
||||
import useSWR, { SWRConfiguration } from 'swr'
|
||||
import { fetcher } from '../../http/axiosInstance'
|
||||
import { BASE_URL } from '../../constants'
|
||||
import { ActionIcon, Autocomplete, CloseButton, Flex, Select as MantineSelect, MantineStyleProp, rem, useMantineColorScheme, Portal, Menu, Button, Group, Divider, LoadingOverlay, Stack, Container, Modal, Transition, Text, Select, Switch, Checkbox, Radio, ScrollAreaAutosize } from '@mantine/core'
|
||||
import { IconArrowsMaximize, IconArrowsMinimize, IconBoxMultiple, IconBoxPadding, IconChevronCompactLeft, IconChevronDown, IconChevronLeft, IconChevronsDown, IconHelp, IconPlus, IconSearch, IconUpload, IconWindowMaximize, IconWindowMinimize } from '@tabler/icons-react'
|
||||
import { ActionIcon, Autocomplete, CloseButton, Flex, Select as MantineSelect, MantineStyleProp, rem, useMantineColorScheme, Portal, Menu, Button, Group, Divider, LoadingOverlay, Stack, Container, Transition, } from '@mantine/core'
|
||||
import { IconBoxMultiple, IconBoxPadding, IconChevronDown, IconChevronLeft, IconPlus, IconSearch, IconUpload, } from '@tabler/icons-react'
|
||||
import { ICitySettings, IFigure, ILine } from '../../interfaces/gis'
|
||||
import axios from 'axios'
|
||||
import MapToolbar from './MapToolbar/MapToolbar'
|
||||
import MapStatusbar from './MapStatusbar/MapStatusbar'
|
||||
import { setAlignMode, setSatMapsProvider, setTypeRoles, useMapStore, setMapLabel, clearPrintArea, setPreviousView, setMode, setPrintScale, PrintScale, setPrintScaleLine } from '../../store/map'
|
||||
import { setAlignMode, setSatMapsProvider, setTypeRoles, useMapStore, setMapLabel, } from '../../store/map'
|
||||
import { useThrottle } from '@uidotdev/usehooks'
|
||||
import ObjectTree from '../Tree/ObjectTree'
|
||||
import { setCurrentObjectId, setSelectedDistrict, setSelectedRegion, setSelectedYear, useObjectsStore } from '../../store/objects'
|
||||
@ -33,11 +32,8 @@ import GeoJSON from 'ol/format/GeoJSON'
|
||||
import MapLegend from './MapLegend/MapLegend'
|
||||
import GisService from '../../services/GisService'
|
||||
import MapMode from './MapMode'
|
||||
import ScaleLine from 'ol/control/ScaleLine'
|
||||
import { getPointResolution } from 'ol/proj'
|
||||
import { PrintFormat, PrintOrientation, printResolutions, setPrintOrientation, setPrintResolution, usePrintStore } from '../../store/print'
|
||||
import { printDimensions, satMapsProviders, scaleOptions, schemas } from '../../constants/map'
|
||||
import { modals } from "@mantine/modals";
|
||||
import { satMapsProviders, schemas } from '../../constants/map'
|
||||
import MapPrint from './MapPrint/MapPrint'
|
||||
|
||||
const swrOptions: SWRConfiguration = {
|
||||
revalidateOnFocus: false
|
||||
@ -69,17 +65,23 @@ const MapComponent = ({
|
||||
mode, map, currentTool, alignMode, satMapsProvider,
|
||||
selectedObjectType, file, measureDraw,
|
||||
polygonExtent, rectCoords, draw, snap, translate,
|
||||
nodeLayerSource, drawingLayerSource,
|
||||
drawingLayerSource,
|
||||
satLayer, staticMapLayer, figuresLayer, linesLayer,
|
||||
regionsLayer, districtBoundLayer, baseLayer,
|
||||
previousView, printArea, printSource, printAreaDraw, printScale, printScaleLine,
|
||||
printAreaDraw,
|
||||
} = useMapStore().id[id]
|
||||
|
||||
const { printOrientation, printResolution, printFormat } = usePrintStore()
|
||||
|
||||
// Tab settings
|
||||
const objectsPane: ITabsPane[] = [{ title: 'Объекты', value: 'objects', view: <ObjectTree map_id={id} /> }, { title: 'Неразмещенные', value: 'unplaced', view: <></> }, { title: 'Другие', value: 'other', view: <></> },]
|
||||
const paramsPane: ITabsPane[] = [{ title: 'История изменений', value: 'history', view: <></> }, { title: 'Параметры', value: 'parameters', view: <ObjectParameters map_id={id} /> }, { title: 'Вычисляемые', value: 'calculated', view: <></> }]
|
||||
const objectsPane: ITabsPane[] = [
|
||||
{ title: 'Объекты', value: 'objects', view: <ObjectTree map_id={id} /> },
|
||||
{ title: 'Неразмещенные', value: 'unplaced', view: <></> },
|
||||
{ title: 'Другие', value: 'other', view: <></> },
|
||||
]
|
||||
const paramsPane: ITabsPane[] = [
|
||||
{ title: 'История изменений', value: 'history', view: <></> },
|
||||
{ title: 'Параметры', value: 'parameters', view: <ObjectParameters map_id={id} /> },
|
||||
{ title: 'Вычисляемые', value: 'calculated', view: <></> }
|
||||
]
|
||||
|
||||
// Map
|
||||
const mapElement = useRef<HTMLDivElement | null>(null)
|
||||
@ -124,7 +126,6 @@ const MapComponent = ({
|
||||
// map.current?.setView(new View({
|
||||
// extent: bounds.getExtent()
|
||||
// }))
|
||||
console.log(bounds.getFeatures().length)
|
||||
})
|
||||
}
|
||||
}, [selectedDistrict, selectedYear])
|
||||
@ -183,26 +184,26 @@ const MapComponent = ({
|
||||
backdropFilter: 'blur(8px)',
|
||||
}
|
||||
|
||||
const { data: nodes } = useSWR('/nodes/all', () => fetcher('/nodes/all', BASE_URL.ems), { revalidateOnFocus: false })
|
||||
// const { data: nodes } = useSWR('/nodes/all', () => fetcher('/nodes/all', BASE_URL.ems), { revalidateOnFocus: false })
|
||||
|
||||
useEffect(() => {
|
||||
// Draw features based on database data
|
||||
if (Array.isArray(nodes)) {
|
||||
nodes.map(node => {
|
||||
if (node.shape_type === 'LINE') {
|
||||
const coordinates: Coordinate[] = []
|
||||
if (Array.isArray(node.shape)) {
|
||||
node.shape.map((point: { x: number, y: number }) => {
|
||||
const coordinate = [point.x as number, point.y as number] as Coordinate
|
||||
coordinates.push(coordinate)
|
||||
})
|
||||
}
|
||||
//console.log(coordinates)
|
||||
nodeLayerSource.addFeature(new Feature({ geometry: new LineString(coordinates) }))
|
||||
}
|
||||
})
|
||||
}
|
||||
}, [nodes, nodeLayerSource])
|
||||
// useEffect(() => {
|
||||
// // Draw features based on database data
|
||||
// if (Array.isArray(nodes)) {
|
||||
// nodes.map(node => {
|
||||
// if (node.shape_type === 'LINE') {
|
||||
// const coordinates: Coordinate[] = []
|
||||
// if (Array.isArray(node.shape)) {
|
||||
// node.shape.map((point: { x: number, y: number }) => {
|
||||
// const coordinate = [point.x as number, point.y as number] as Coordinate
|
||||
// coordinates.push(coordinate)
|
||||
// })
|
||||
// }
|
||||
// //console.log(coordinates)
|
||||
// nodeLayerSource.addFeature(new Feature({ geometry: new LineString(coordinates) }))
|
||||
// }
|
||||
// })
|
||||
// }
|
||||
// }, [nodes, nodeLayerSource])
|
||||
|
||||
const [searchObject, setSearchObject] = useState<string | undefined>("")
|
||||
const throttledSearchObject = useThrottle(searchObject, 500)
|
||||
@ -271,11 +272,15 @@ const MapComponent = ({
|
||||
}
|
||||
}, [currentObjectId])
|
||||
|
||||
const { data: regionsData } = useSWR(`/general/regions/all`, (url) => fetcher(url, BASE_URL.ems), swrOptions)
|
||||
const { data: regionsData } = useSWR(`/general/regions`, (url) => fetcher(url, BASE_URL.ems), swrOptions)
|
||||
|
||||
const { data: districtsData } = useSWR(selectedRegion ? `/general/districts/all?region_id=${selectedRegion}` : null, (url) => fetcher(url, BASE_URL.ems), swrOptions)
|
||||
const { data: districtsData } = useSWR(selectedRegion ? `/general/districts/?region_id=${selectedRegion}` : null, (url) => fetcher(url, BASE_URL.ems), swrOptions)
|
||||
|
||||
const { data: searchData } = useSWR(throttledSearchObject !== "" && selectedDistrict && selectedYear ? `/general/search/objects?q=${throttledSearchObject}&id_city=${selectedDistrict}&year=${selectedYear}` : null, (url) => fetcher(url, BASE_URL.ems), swrOptions)
|
||||
const { data: searchData } = useSWR(
|
||||
throttledSearchObject !== "" && selectedDistrict && selectedYear ? `/general/search/objects?q=${throttledSearchObject}&id_city=${selectedDistrict}&year=${selectedYear}` : null,
|
||||
(url) => fetcher(url, BASE_URL.ems),
|
||||
swrOptions
|
||||
)
|
||||
|
||||
const { data: figuresData, isValidating: figuresValidating } = useSWR(
|
||||
selectedDistrict && selectedYear ? `/gis/figures/all?city_id=${selectedDistrict}&year=${selectedYear}&offset=0&limit=${10000}` : null,
|
||||
@ -385,7 +390,7 @@ const MapComponent = ({
|
||||
if (selectedDistrict && districtData) {
|
||||
const settings = getCitySettings()
|
||||
|
||||
const imageUrl = `${import.meta.env.VITE_API_EMS_URL}/static/${selectedDistrict}`
|
||||
const imageUrl = `${import.meta.env.VITE_API_EMS_URL}/tiles/static/${selectedDistrict}`
|
||||
const img = new Image()
|
||||
img.src = imageUrl
|
||||
img.onload = () => {
|
||||
@ -420,6 +425,8 @@ const MapComponent = ({
|
||||
}
|
||||
}, [selectedDistrict, districtData, staticMapLayer])
|
||||
|
||||
|
||||
// Light/dark theme
|
||||
useEffect(() => {
|
||||
if (baseLayer) {
|
||||
baseLayer.on('prerender', function (e) {
|
||||
@ -446,12 +453,6 @@ const MapComponent = ({
|
||||
}
|
||||
}, [colorScheme])
|
||||
|
||||
const scaleLine = useRef(new ScaleLine({
|
||||
bar: true,
|
||||
text: true,
|
||||
minWidth: 125
|
||||
}))
|
||||
|
||||
useEffect(() => {
|
||||
if (map) {
|
||||
if (mode === 'print') {
|
||||
@ -462,197 +463,9 @@ const MapComponent = ({
|
||||
}
|
||||
}, [mode, map, printAreaDraw])
|
||||
|
||||
useEffect(() => {
|
||||
if (printArea) {
|
||||
// backup view before entering print mode
|
||||
setPreviousView(id, map?.getView())
|
||||
|
||||
map?.setTarget('print-portal')
|
||||
|
||||
printSource.clear()
|
||||
map?.getView().setCenter(getCenter(printArea))
|
||||
map?.getView().fit(printArea, {
|
||||
size: printOrientation === 'horizontal' ? [594, 420] : [420, 594]
|
||||
})
|
||||
map?.removeInteraction(printAreaDraw)
|
||||
}
|
||||
}, [printArea, map])
|
||||
|
||||
const exportToPDF = (format: PrintFormat, resolution: number, orientation: PrintOrientation) => {
|
||||
const dim = printDimensions[format]
|
||||
|
||||
const width = Math.round((dim[orientation === 'horizontal' ? 0 : 1] * resolution) / 25.4)
|
||||
const height = Math.round((dim[orientation === 'horizontal' ? 1 : 0] * resolution) / 25.4)
|
||||
|
||||
if (!map) return
|
||||
|
||||
// Store original size and scale
|
||||
const originalSize = map.getSize()
|
||||
const originalResolution = map.getView().getResolution()
|
||||
|
||||
if (!originalSize || !originalResolution) return
|
||||
|
||||
// Calculate new resolution to fit high DPI
|
||||
const scaleFactor = width / originalSize[0]
|
||||
const newResolution = originalResolution / scaleFactor
|
||||
|
||||
// console.log(`New resolution: ${newResolution}`)
|
||||
|
||||
const center = map.getView().getCenter()
|
||||
let scaleResolution
|
||||
if (center) {
|
||||
scaleResolution = Number(printScale) / getPointResolution(map.getView().getProjection(), Number(resolution) / 25.4, center)
|
||||
// console.log(`Scaled resolution: ${scaleResolution}`)
|
||||
}
|
||||
|
||||
console.log(width, height)
|
||||
// Set new high-resolution rendering
|
||||
map.setSize([width, height])
|
||||
map.getView().setResolution(newResolution)
|
||||
map.renderSync()
|
||||
|
||||
map.once("rendercomplete", function () {
|
||||
const mapCanvas = document.createElement("canvas")
|
||||
mapCanvas.width = width
|
||||
mapCanvas.height = height
|
||||
const mapContext = mapCanvas.getContext("2d")
|
||||
|
||||
if (!mapContext) return
|
||||
|
||||
const canvas = document.querySelector('canvas')
|
||||
if (canvas) {
|
||||
if (canvas.width > 0) {
|
||||
const opacity = canvas.parentElement?.style.opacity || "1"
|
||||
mapContext.globalAlpha = parseFloat(opacity)
|
||||
|
||||
const transform = canvas.style.transform
|
||||
const matrixMatch = transform.match(/^matrix\(([^)]+)\)$/)
|
||||
if (matrixMatch) {
|
||||
const matrix = matrixMatch[1].split(",").map(Number)
|
||||
mapContext.setTransform(...matrix as [number, number, number, number, number, number])
|
||||
}
|
||||
|
||||
mapContext.drawImage(canvas, 0, 0)
|
||||
}
|
||||
}
|
||||
|
||||
mapContext.globalAlpha = 1
|
||||
mapContext.setTransform(1, 0, 0, 1, 0, 0)
|
||||
|
||||
// Restore original map settings
|
||||
map.setSize(originalSize)
|
||||
map.getView().setResolution(originalResolution)
|
||||
map.renderSync()
|
||||
|
||||
// Generate PDF
|
||||
const pdf = new jsPDF(orientation === 'horizontal' ? "landscape" : 'portrait', undefined, format)
|
||||
pdf.addImage(mapCanvas.toDataURL("image/jpeg"), "JPEG", 0, 0, orientation === 'horizontal' ? dim[0] : dim[1], orientation === 'horizontal' ? dim[1] : dim[0])
|
||||
|
||||
const filename = `${selectedYear}-${selectedRegion}-${selectedDistrict}-${new Date().toISOString()}.pdf`
|
||||
pdf.save(filename, {
|
||||
returnPromise: true
|
||||
}).then(() => {
|
||||
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (printScaleLine) {
|
||||
map?.addControl(scaleLine.current)
|
||||
} else {
|
||||
map?.removeControl(scaleLine.current)
|
||||
}
|
||||
}, [printScaleLine])
|
||||
|
||||
const [fullscreen, setFullscreen] = useState(false)
|
||||
|
||||
return (
|
||||
<>
|
||||
<Modal.Root scrollAreaComponent={ScrollAreaAutosize} keepMounted size='auto' opened={!!printArea} onClose={() => {
|
||||
clearPrintArea(id)
|
||||
map?.setTarget(mapElement.current as HTMLDivElement)
|
||||
map?.addInteraction(printAreaDraw)
|
||||
}} fullScreen={fullscreen}>
|
||||
<Modal.Overlay />
|
||||
<Modal.Content style={{ transition: 'all .3s ease' }}>
|
||||
<Modal.Header>
|
||||
<Modal.Title>
|
||||
Предпросмотр области печати
|
||||
</Modal.Title>
|
||||
|
||||
<Flex ml='auto' gap='md'>
|
||||
<ActionIcon title='Помощь' ml='auto' variant='transparent'>
|
||||
<IconHelp color='gray' />
|
||||
</ActionIcon>
|
||||
<ActionIcon title={fullscreen ? 'Свернуть' : 'Развернуть'} variant='transparent' onClick={() => setFullscreen(!fullscreen)}>
|
||||
{fullscreen ? <IconWindowMinimize color='gray' /> : <IconWindowMaximize color='gray' />}
|
||||
</ActionIcon>
|
||||
<Modal.CloseButton title='Закрыть' />
|
||||
</Flex>
|
||||
</Modal.Header>
|
||||
<Modal.Body>
|
||||
<Stack align='center'>
|
||||
<Text w='100%'>Область печати можно передвигать.</Text>
|
||||
|
||||
<div id='print-portal' style={{
|
||||
width: printOrientation === 'horizontal' ? '594px' : '420px',
|
||||
height: printOrientation === 'horizontal' ? '420px' : '594px'
|
||||
}}>
|
||||
|
||||
</div>
|
||||
|
||||
<Flex w='100%' wrap='wrap' gap='lg' justify='space-between'>
|
||||
<Radio.Group
|
||||
label='Ориентация'
|
||||
value={printOrientation}
|
||||
onChange={(value) => setPrintOrientation(value as PrintOrientation)}
|
||||
>
|
||||
<Stack>
|
||||
<Radio value='horizontal' label='Горизонтальная' />
|
||||
<Radio value='vertical' label='Вертикальная' />
|
||||
</Stack>
|
||||
</Radio.Group>
|
||||
|
||||
<Select
|
||||
allowDeselect={false}
|
||||
label="Разрешение"
|
||||
placeholder="Выберите разрешение"
|
||||
data={printResolutions}
|
||||
value={printResolution.toString()}
|
||||
onChange={(value) => setPrintResolution(Number(value))}
|
||||
/>
|
||||
|
||||
<Select
|
||||
allowDeselect={false}
|
||||
label="Масштаб"
|
||||
placeholder="Выберите масштаб"
|
||||
data={scaleOptions}
|
||||
value={printScale}
|
||||
onChange={(value) => setPrintScale(id, value as PrintScale)}
|
||||
/>
|
||||
|
||||
<Checkbox
|
||||
checked={printScaleLine}
|
||||
label="Масштабная линия"
|
||||
onChange={(event) => setPrintScaleLine(id, event.currentTarget.checked)}
|
||||
/>
|
||||
</Flex>
|
||||
|
||||
<Flex w='100%' gap='sm' align='center'>
|
||||
<Button ml='auto' onClick={() => {
|
||||
if (previousView) {
|
||||
exportToPDF(printFormat, printResolution, printOrientation)
|
||||
}
|
||||
}}>
|
||||
Печать
|
||||
</Button>
|
||||
</Flex>
|
||||
|
||||
</Stack>
|
||||
</Modal.Body>
|
||||
</Modal.Content>
|
||||
</Modal.Root>
|
||||
<MapPrint id={id} mapElement={mapElement} />
|
||||
|
||||
{active &&
|
||||
<Portal target='#header-portal'>
|
||||
|
||||
@ -1,7 +1,9 @@
|
||||
import { Accordion, ColorSwatch, Flex, MantineStyleProp, ScrollAreaAutosize, Stack, Text, useMantineColorScheme } from '@mantine/core'
|
||||
import useSWR from 'swr';
|
||||
import { fetcher } from '../../../http/axiosInstance';
|
||||
import { BASE_URL } from '../../../constants';
|
||||
import { Accordion, ActionIcon, Collapse, ColorSwatch, Flex, MantineStyleProp, ScrollAreaAutosize, Stack, Text, useMantineColorScheme } from '@mantine/core'
|
||||
import useSWR from 'swr'
|
||||
import { fetcher } from '../../../http/axiosInstance'
|
||||
import { BASE_URL } from '../../../constants'
|
||||
import { useDisclosure } from '@mantine/hooks'
|
||||
import { IconChevronDown } from '@tabler/icons-react'
|
||||
|
||||
const MapLegend = ({
|
||||
selectedDistrict,
|
||||
@ -12,7 +14,7 @@ const MapLegend = ({
|
||||
selectedYear: number | null,
|
||||
style: MantineStyleProp
|
||||
}) => {
|
||||
const { colorScheme } = useMantineColorScheme();
|
||||
const { colorScheme } = useMantineColorScheme()
|
||||
|
||||
const { data: existingObjectsList } = useSWR(
|
||||
selectedYear && selectedDistrict ? `/general/objects/list?year=${selectedYear}&city_id=${selectedDistrict}&planning=0` : null,
|
||||
@ -30,28 +32,38 @@ const MapLegend = ({
|
||||
}
|
||||
)
|
||||
|
||||
const [opened, { toggle }] = useDisclosure(false)
|
||||
|
||||
return (
|
||||
<ScrollAreaAutosize offsetScrollbars maw='300px' w='100%' fz='xs' mt='auto' style={{...style, zIndex: 1, backdropFilter: 'blur(8px)', backgroundColor: colorScheme === 'light' ? '#FFFFFFAA' : '#000000AA', borderRadius: '4px' }}>
|
||||
<ScrollAreaAutosize maw='300px' w='100%' fz='xs' mt='auto' style={{ ...style, zIndex: 1, backdropFilter: 'blur(8px)', backgroundColor: colorScheme === 'light' ? '#FFFFFFAA' : '#000000AA', borderRadius: '4px' }}>
|
||||
<Stack gap='sm' p='sm'>
|
||||
<Text fz='xs'>
|
||||
Легенда
|
||||
</Text>
|
||||
<Flex align='center'>
|
||||
<Text fz='xs'>
|
||||
Легенда
|
||||
</Text>
|
||||
|
||||
<Accordion defaultValue={['existing', 'planning']} multiple>
|
||||
<Accordion.Item value='existing' key='existing'>
|
||||
<Accordion.Control>Существующие</Accordion.Control>
|
||||
<Accordion.Panel>
|
||||
{existingObjectsList && <LegendGroup objectsList={existingObjectsList} border='solid' />}
|
||||
</Accordion.Panel>
|
||||
</Accordion.Item>
|
||||
<ActionIcon ml='auto' variant='subtle' onClick={toggle} >
|
||||
<IconChevronDown style={{ transform: opened ? 'rotate(0deg)' : 'rotate(180deg)' }} />
|
||||
</ActionIcon>
|
||||
</Flex>
|
||||
|
||||
<Accordion.Item value='planning' key='planning'>
|
||||
<Accordion.Control>Планируемые</Accordion.Control>
|
||||
<Accordion.Panel>
|
||||
{planningObjectsList && <LegendGroup objectsList={planningObjectsList} border='dotted' />}
|
||||
</Accordion.Panel>
|
||||
</Accordion.Item>
|
||||
</Accordion>
|
||||
<Collapse in={opened}>
|
||||
<Accordion defaultValue={['existing', 'planning']} multiple>
|
||||
<Accordion.Item value='existing' key='existing'>
|
||||
<Accordion.Control>Существующие</Accordion.Control>
|
||||
<Accordion.Panel>
|
||||
{existingObjectsList && <LegendGroup objectsList={existingObjectsList} border='solid' />}
|
||||
</Accordion.Panel>
|
||||
</Accordion.Item>
|
||||
|
||||
<Accordion.Item value='planning' key='planning'>
|
||||
<Accordion.Control>Планируемые</Accordion.Control>
|
||||
<Accordion.Panel>
|
||||
{planningObjectsList && <LegendGroup objectsList={planningObjectsList} border='dotted' />}
|
||||
</Accordion.Panel>
|
||||
</Accordion.Item>
|
||||
</Accordion>
|
||||
</Collapse>
|
||||
</Stack>
|
||||
</ScrollAreaAutosize>
|
||||
)
|
||||
|
||||
125
client/src/components/map/MapLineTest.tsx
Normal file
125
client/src/components/map/MapLineTest.tsx
Normal file
@ -0,0 +1,125 @@
|
||||
import { useEffect, useRef } from 'react'
|
||||
import 'ol/ol.css'
|
||||
import { Container, Stack, Tabs } from '@mantine/core'
|
||||
import OlMap from 'ol/Map'
|
||||
import { v4 as uuidv4 } from 'uuid'
|
||||
import TileLayer from 'ol/layer/Tile'
|
||||
import { OSM } from 'ol/source'
|
||||
import View from 'ol/View'
|
||||
import { transform } from 'ol/proj'
|
||||
import VectorLayer from 'ol/layer/Vector'
|
||||
import VectorSource from 'ol/source/Vector'
|
||||
import Feature from 'ol/Feature'
|
||||
import { LineString } from 'ol/geom'
|
||||
import { Stroke, Style, Text } from 'ol/style'
|
||||
|
||||
const center = [14443331.466543002, 8878970.176309839]
|
||||
|
||||
const style = new Style({
|
||||
stroke: new Stroke({ color: 'blue', width: 2 }),
|
||||
text: new Text({
|
||||
font: 'bold 14px',
|
||||
placement: 'line',
|
||||
offsetY: -14
|
||||
}),
|
||||
})
|
||||
|
||||
const MapLineTest = () => {
|
||||
const lines = [
|
||||
{ name: 'A', points: [[100, 100], [200, 200]] },
|
||||
{ name: 'B', points: [[200, 200], [300, 200]] },
|
||||
{ name: 'X', points: [[200, 200], [300, 300]] },
|
||||
{ name: 'L', points: [[300, 300], [350, 300]] },
|
||||
{ name: 'N', points: [[300, 300], [250, 300]] },
|
||||
{ name: 'I', points: [[300, 200], [300, 100]] },
|
||||
{ name: 'J', points: [[300, 100], [250, 50]] },
|
||||
{ name: 'C', points: [[300, 200], [400, 150]] },
|
||||
{ name: 'D', points: [[400, 150], [400, 100]] },
|
||||
]
|
||||
|
||||
const map = useRef<OlMap | null>(null)
|
||||
const vectorLayer = useRef(new VectorLayer({
|
||||
source: new VectorSource(),
|
||||
style: feature => {
|
||||
style.getText()?.setText(feature.get('label'))
|
||||
return style
|
||||
}
|
||||
}))
|
||||
|
||||
const mapElement = useRef<HTMLDivElement | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
map.current = new OlMap({
|
||||
controls: [],
|
||||
layers: [
|
||||
new TileLayer({ source: new OSM(), properties: { id: uuidv4(), name: 'OpenStreetMap' } }),
|
||||
vectorLayer.current
|
||||
]
|
||||
})
|
||||
map.current.setTarget(mapElement.current as HTMLDivElement)
|
||||
map.current.setView(new View({
|
||||
center: transform([129.7466541, 62.083504], 'EPSG:4326', 'EPSG:3857'),
|
||||
zoom: 16,
|
||||
maxZoom: 21,
|
||||
}))
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
if (map.current) {
|
||||
const graph = new Map<string, { node: string, distance: number }[]>()
|
||||
|
||||
// build graph adjacency list
|
||||
lines.forEach(({ points }) => {
|
||||
const [start, end] = points.map(pt => pt.join(','))
|
||||
const distance = Math.hypot(points[1][0] - points[0][0], points[1][1] - points[0][1])
|
||||
|
||||
if (!graph.has(start)) graph.set(start, [])
|
||||
if (!graph.has(end)) graph.set(end, [])
|
||||
|
||||
graph.get(start)?.push({ node: end, distance })
|
||||
graph.get(end)?.push({ node: start, distance })
|
||||
})
|
||||
|
||||
// perform DFS to calculate distances from "A"
|
||||
const startNode = lines[0].points[0].join(',')
|
||||
const distances = new Map<string, number>()
|
||||
const dfs = (node: string, currentDist: number) => {
|
||||
if (distances.has(node) && distances.get(node)! <= currentDist) return
|
||||
distances.set(node, currentDist)
|
||||
for (const { node: neighbor, distance } of graph.get(node) || []) {
|
||||
dfs(neighbor, currentDist + distance)
|
||||
}
|
||||
}
|
||||
dfs(startNode, 0)
|
||||
|
||||
// render features
|
||||
lines.forEach(({ name, points }) => {
|
||||
const lineCoords = points.map(point => [point[0] + center[0], point[1] + center[1]])
|
||||
const feature = new Feature(new LineString(lineCoords))
|
||||
|
||||
const lastNode = points[1].join(',')
|
||||
const label = `${name} ${feature.getGeometry()?.getLength().toFixed(2)} (${distances.get(lastNode)?.toFixed(1) ?? '∞'})`
|
||||
|
||||
feature.set('label', label)
|
||||
vectorLayer.current.getSource()?.addFeature(feature)
|
||||
})
|
||||
}
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<Container fluid w='100%' pos='relative' p={0}>
|
||||
<Tabs h='100%' variant='default' value={'map'} keepMounted={true}>
|
||||
<Stack gap={0} h='100%'>
|
||||
<Tabs.List>
|
||||
<Tabs.Tab value={'map'}>Map</Tabs.Tab>
|
||||
</Tabs.List>
|
||||
<Tabs.Panel value={'map'} h='100%' pos='relative'>
|
||||
<Container pos='absolute' fluid p={0} w='100%' h='100%' ref={mapElement}></Container>
|
||||
</Tabs.Panel>
|
||||
</Stack>
|
||||
</Tabs>
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
|
||||
export default MapLineTest
|
||||
234
client/src/components/map/MapPrint/MapPrint.tsx
Normal file
234
client/src/components/map/MapPrint/MapPrint.tsx
Normal file
@ -0,0 +1,234 @@
|
||||
import { ActionIcon, Button, Checkbox, Flex, Modal, Radio, ScrollAreaAutosize, Select, Stack, Text } from '@mantine/core'
|
||||
import { IconHelp, IconWindowMaximize, IconWindowMinimize } from '@tabler/icons-react'
|
||||
import React, { useEffect, useRef, useState } from 'react'
|
||||
import { clearPrintArea, PrintScale, setPreviousView, setPrintScale, setPrintScaleLine, useMapStore } from '../../../store/map'
|
||||
import { PrintFormat, PrintOrientation, printResolutions, setPrintOrientation, setPrintResolution, usePrintStore } from '../../../store/print'
|
||||
import { printDimensions, scaleOptions } from '../../../constants/map'
|
||||
import { useObjectsStore } from '../../../store/objects'
|
||||
// import { getPointResolution } from 'ol/proj'
|
||||
import jsPDF from 'jspdf'
|
||||
import { getCenter } from 'ol/extent'
|
||||
import ScaleLine from 'ol/control/ScaleLine'
|
||||
|
||||
const MapPrint = ({
|
||||
id,
|
||||
mapElement
|
||||
}: {
|
||||
id: string
|
||||
mapElement: React.MutableRefObject<HTMLDivElement | null>
|
||||
}) => {
|
||||
const [fullscreen, setFullscreen] = useState(false)
|
||||
const { printOrientation, printResolution, printFormat } = usePrintStore()
|
||||
const { selectedYear, selectedRegion, selectedDistrict } = useObjectsStore().id[id]
|
||||
|
||||
const {
|
||||
map,
|
||||
previousView, printArea, printSource, printAreaDraw, printScale, printScaleLine,
|
||||
} = useMapStore().id[id]
|
||||
|
||||
const exportToPDF = (format: PrintFormat, resolution: number, orientation: PrintOrientation) => {
|
||||
const dim = printDimensions[format]
|
||||
|
||||
const width = Math.round((dim[orientation === 'horizontal' ? 0 : 1] * resolution) / 25.4)
|
||||
const height = Math.round((dim[orientation === 'horizontal' ? 1 : 0] * resolution) / 25.4)
|
||||
|
||||
if (!map) return
|
||||
|
||||
// Store original size and scale
|
||||
const originalSize = map.getSize()
|
||||
const originalResolution = map.getView().getResolution()
|
||||
|
||||
if (!originalSize || !originalResolution) return
|
||||
|
||||
// Calculate new resolution to fit high DPI
|
||||
const scaleFactor = width / originalSize[0]
|
||||
const newResolution = originalResolution / scaleFactor
|
||||
|
||||
// console.log(`New resolution: ${newResolution}`)
|
||||
|
||||
// const center = map.getView().getCenter()
|
||||
// let scaleResolution = 1
|
||||
// if (center) {
|
||||
// scaleResolution = Number(printScale) / getPointResolution(map.getView().getProjection(), Number(resolution) / 25.4, center)
|
||||
// // console.log(`Scaled resolution: ${scaleResolution}`)
|
||||
// }
|
||||
|
||||
console.log(width, height)
|
||||
// Set new high-resolution rendering
|
||||
map.setSize([width, height])
|
||||
map.getView().setResolution(newResolution)
|
||||
map.renderSync()
|
||||
|
||||
map.once("rendercomplete", function () {
|
||||
const mapCanvas = document.createElement("canvas")
|
||||
mapCanvas.width = width
|
||||
mapCanvas.height = height
|
||||
const mapContext = mapCanvas.getContext("2d")
|
||||
|
||||
if (!mapContext) return
|
||||
|
||||
const canvas = document.querySelector('canvas')
|
||||
if (canvas) {
|
||||
if (canvas.width > 0) {
|
||||
const opacity = canvas.parentElement?.style.opacity || "1"
|
||||
mapContext.globalAlpha = parseFloat(opacity)
|
||||
|
||||
const transform = canvas.style.transform
|
||||
const matrixMatch = transform.match(/^matrix\(([^)]+)\)$/)
|
||||
if (matrixMatch) {
|
||||
const matrix = matrixMatch[1].split(",").map(Number)
|
||||
mapContext.setTransform(...matrix as [number, number, number, number, number, number])
|
||||
}
|
||||
|
||||
mapContext.drawImage(canvas, 0, 0)
|
||||
}
|
||||
}
|
||||
|
||||
mapContext.globalAlpha = 1
|
||||
mapContext.setTransform(1, 0, 0, 1, 0, 0)
|
||||
|
||||
// Restore original map settings
|
||||
map.setSize(originalSize)
|
||||
map.getView().setResolution(originalResolution)
|
||||
map.renderSync()
|
||||
|
||||
const dimensions = {
|
||||
w: orientation === 'horizontal' ? dim[0] : dim[1],
|
||||
h: orientation === 'horizontal' ? dim[1] : dim[0]
|
||||
}
|
||||
|
||||
// Generate PDF
|
||||
const pdf = new jsPDF(orientation === 'horizontal' ? "landscape" : 'portrait', undefined, format)
|
||||
pdf.addImage(mapCanvas.toDataURL("image/jpeg"), "JPEG", 0, 0, dimensions.w, dimensions.h)
|
||||
|
||||
const filename = `${selectedYear}-${selectedRegion}-${selectedDistrict}-${new Date().toISOString()}.pdf`
|
||||
pdf.save(filename, {
|
||||
returnPromise: true
|
||||
}).then(() => {
|
||||
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
const scaleLine = useRef(new ScaleLine({
|
||||
bar: true,
|
||||
text: true,
|
||||
minWidth: 125
|
||||
}))
|
||||
|
||||
useEffect(() => {
|
||||
if (printArea) {
|
||||
// backup view before entering print mode
|
||||
setPreviousView(id, map?.getView())
|
||||
|
||||
map?.setTarget('print-portal')
|
||||
|
||||
printSource.clear()
|
||||
map?.getView().setCenter(getCenter(printArea))
|
||||
map?.getView().fit(printArea, {
|
||||
size: printOrientation === 'horizontal' ? [594, 420] : [420, 594]
|
||||
})
|
||||
map?.removeInteraction(printAreaDraw)
|
||||
}
|
||||
}, [printArea, map])
|
||||
|
||||
useEffect(() => {
|
||||
if (printScaleLine && printArea) {
|
||||
map?.addControl(scaleLine.current)
|
||||
} else {
|
||||
map?.removeControl(scaleLine.current)
|
||||
}
|
||||
}, [printScaleLine, printArea])
|
||||
|
||||
return (
|
||||
<Modal.Root
|
||||
scrollAreaComponent={ScrollAreaAutosize}
|
||||
keepMounted size='auto'
|
||||
opened={!!printArea}
|
||||
onClose={() => {
|
||||
clearPrintArea(id)
|
||||
map?.setTarget(mapElement.current as HTMLDivElement)
|
||||
map?.addInteraction(printAreaDraw)
|
||||
}} fullScreen={fullscreen}>
|
||||
<Modal.Overlay />
|
||||
<Modal.Content style={{ transition: 'all .3s ease' }}>
|
||||
<Modal.Header>
|
||||
<Modal.Title>
|
||||
Предпросмотр области печати
|
||||
</Modal.Title>
|
||||
|
||||
<Flex ml='auto' gap='md'>
|
||||
<ActionIcon title='Помощь' ml='auto' variant='transparent'>
|
||||
<IconHelp color='gray' />
|
||||
</ActionIcon>
|
||||
<ActionIcon title={fullscreen ? 'Свернуть' : 'Развернуть'} variant='transparent' onClick={() => setFullscreen(!fullscreen)}>
|
||||
{fullscreen ? <IconWindowMinimize color='gray' /> : <IconWindowMaximize color='gray' />}
|
||||
</ActionIcon>
|
||||
<Modal.CloseButton title='Закрыть' />
|
||||
</Flex>
|
||||
</Modal.Header>
|
||||
<Modal.Body>
|
||||
<Stack align='center'>
|
||||
<Text w='100%'>Область печати можно передвигать.</Text>
|
||||
|
||||
<div id='print-portal' style={{
|
||||
width: printOrientation === 'horizontal' ? '594px' : '420px',
|
||||
height: printOrientation === 'horizontal' ? '420px' : '594px'
|
||||
}}>
|
||||
|
||||
</div>
|
||||
|
||||
<Flex w='100%' wrap='wrap' gap='lg' justify='space-between'>
|
||||
<Radio.Group
|
||||
label='Ориентация'
|
||||
value={printOrientation}
|
||||
onChange={(value) => setPrintOrientation(value as PrintOrientation)}
|
||||
>
|
||||
<Stack>
|
||||
<Radio value='horizontal' label='Горизонтальная' />
|
||||
<Radio value='vertical' label='Вертикальная' />
|
||||
</Stack>
|
||||
</Radio.Group>
|
||||
|
||||
<Select
|
||||
allowDeselect={false}
|
||||
label="Разрешение"
|
||||
placeholder="Выберите разрешение"
|
||||
data={printResolutions}
|
||||
value={printResolution.toString()}
|
||||
onChange={(value) => setPrintResolution(Number(value))}
|
||||
/>
|
||||
|
||||
<Select
|
||||
allowDeselect={false}
|
||||
label="Масштаб"
|
||||
placeholder="Выберите масштаб"
|
||||
data={scaleOptions}
|
||||
value={printScale}
|
||||
onChange={(value) => setPrintScale(id, value as PrintScale)}
|
||||
/>
|
||||
|
||||
<Checkbox
|
||||
checked={printScaleLine}
|
||||
label="Масштабная линия"
|
||||
onChange={(event) => setPrintScaleLine(id, event.currentTarget.checked)}
|
||||
/>
|
||||
</Flex>
|
||||
|
||||
<Flex w='100%' gap='sm' align='center'>
|
||||
<Button ml='auto' onClick={() => {
|
||||
if (previousView) {
|
||||
exportToPDF(printFormat, printResolution, printOrientation)
|
||||
}
|
||||
}}>
|
||||
Печать
|
||||
</Button>
|
||||
</Flex>
|
||||
</Stack>
|
||||
</Modal.Body>
|
||||
</Modal.Content>
|
||||
</Modal.Root>
|
||||
)
|
||||
}
|
||||
|
||||
export default MapPrint
|
||||
@ -6,7 +6,7 @@ import { BASE_URL } from '../../constants'
|
||||
|
||||
const ObjectData = (object_data: IObjectData) => {
|
||||
const { data: typeData } = useSWR(
|
||||
object_data.type ? `/general/types/all` : null,
|
||||
object_data.type ? `/general/types` : null,
|
||||
(url) => fetcher(url, BASE_URL.ems),
|
||||
{
|
||||
revalidateOnFocus: false
|
||||
|
||||
@ -16,7 +16,7 @@ const ObjectParameter = ({
|
||||
map_id
|
||||
}: ObjectParameterProps) => {
|
||||
const { data: paramData } = useSWR(
|
||||
`/general/params/all?param_id=${param.id_param}`,
|
||||
`/general/params/?param_id=${param.id_param}`,
|
||||
(url) => fetcher(url, BASE_URL.ems).then(res => res[0] as IParam),
|
||||
{
|
||||
revalidateOnFocus: false,
|
||||
|
||||
@ -15,7 +15,7 @@ const ObjectParameters = ({
|
||||
const { currentObjectId } = useObjectsStore().id[map_id]
|
||||
|
||||
const { data: valuesData, isValidating: valuesValidating } = useSWR(
|
||||
currentObjectId ? `/general/values/all?object_id=${currentObjectId}` : null,
|
||||
currentObjectId ? `/general/values/?object_id=${currentObjectId}` : null,
|
||||
(url) => fetcher(url, BASE_URL.ems),
|
||||
{
|
||||
revalidateOnFocus: false,
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { IconBuildingFactory2, IconComponents, IconDeviceDesktopAnalytics, IconFiles, IconHome, IconLogin, IconLogin2, IconMap, IconPassword, IconReport, IconServer, IconSettings, IconShield, IconUsers } from "@tabler/icons-react";
|
||||
import { IconBuildingFactory2, IconComponents, IconDeviceDesktopAnalytics, IconFiles, IconFlame, IconHome, IconLogin, IconLogin2, IconMap, IconPassword, IconReport, icons, IconServer, IconSettings, IconShield, IconUsers } from "@tabler/icons-react";
|
||||
import SignIn from "../pages/auth/SignIn";
|
||||
import SignUp from "../pages/auth/SignUp";
|
||||
import PasswordReset from "../pages/auth/PasswordReset";
|
||||
@ -15,6 +15,8 @@ import Boilers from "../pages/Boilers";
|
||||
import MapTest from "../pages/MapTest";
|
||||
import PrintReport from "../pages/PrintReport";
|
||||
import DBManager from "../pages/DBManager";
|
||||
import MapLineTest from "../components/map/MapLineTest";
|
||||
import FuelPage from "../pages/Fuel";
|
||||
|
||||
// Определение страниц с путями и компонентом для рендера
|
||||
|
||||
@ -127,6 +129,15 @@ const pages = [
|
||||
dashboard: true,
|
||||
enabled: true,
|
||||
},
|
||||
{
|
||||
label: "Map line test",
|
||||
path: "/map-line-test",
|
||||
icon: <IconMap />,
|
||||
component: <MapLineTest />,
|
||||
drawer: true,
|
||||
dashboard: true,
|
||||
enabled: true,
|
||||
},
|
||||
{
|
||||
label: "Монитор",
|
||||
path: "/monitor",
|
||||
@ -152,7 +163,7 @@ const pages = [
|
||||
component: <PrintReport />,
|
||||
drawer: true,
|
||||
dashboard: true,
|
||||
enabled: false,
|
||||
enabled: true,
|
||||
},
|
||||
{
|
||||
label: "Тест БД",
|
||||
@ -163,6 +174,15 @@ const pages = [
|
||||
dashboard: true,
|
||||
enabled: true,
|
||||
},
|
||||
{
|
||||
label: 'Fuel',
|
||||
path: '/fuel',
|
||||
icon: <IconFlame />,
|
||||
component: <FuelPage />,
|
||||
drawer: true,
|
||||
dashboard: true,
|
||||
enabled: true
|
||||
}
|
||||
]
|
||||
|
||||
export {
|
||||
|
||||
29
client/src/dto/fuel/fuel.dto.ts
Normal file
29
client/src/dto/fuel/fuel.dto.ts
Normal file
@ -0,0 +1,29 @@
|
||||
export class FuelExpenseDto {
|
||||
id_boiler?: string
|
||||
id_fuel?: number
|
||||
date?: Date
|
||||
value?: number
|
||||
}
|
||||
|
||||
export const FuelExpenseDtoHeaders = {
|
||||
id_boiler: 'Boiler ID',
|
||||
id_fuel: 'Fuel ID',
|
||||
date: 'Date',
|
||||
value: 'Value',
|
||||
}
|
||||
|
||||
export class FuelLimitDto {
|
||||
id_boiler?: string
|
||||
id_fuel?: number
|
||||
month?: Date
|
||||
year?: number
|
||||
value?: number
|
||||
}
|
||||
|
||||
export const FuelLimitDtoHeaders = {
|
||||
id_boiler: 'Boiler ID',
|
||||
id_fuel: 'Fuel ID',
|
||||
month: 'Month',
|
||||
year: 'Year',
|
||||
value: 'Value'
|
||||
}
|
||||
27
client/src/http/axiosInstanceNest.ts
Normal file
27
client/src/http/axiosInstanceNest.ts
Normal file
@ -0,0 +1,27 @@
|
||||
import axios, { ResponseType } from 'axios';
|
||||
import { useAuthStore } from '../store/auth';
|
||||
|
||||
const axiosInstance = axios.create();
|
||||
|
||||
axiosInstance.interceptors.request.use(
|
||||
(config) => {
|
||||
const token = useAuthStore.getState().token;
|
||||
if (token) {
|
||||
config.headers['Authorization'] = `Bearer ${token}`;
|
||||
}
|
||||
return config;
|
||||
},
|
||||
(error) => {
|
||||
return Promise.reject(error);
|
||||
}
|
||||
);
|
||||
|
||||
export const fetcher = (url: string, baseURL?: string, responseType?: ResponseType) => axiosInstance.get(url, {
|
||||
baseURL: baseURL || import.meta.env.VITE_API_NEST_URL,
|
||||
headers: {
|
||||
'Content-Type': 'application/x-www-form-urlencoded'
|
||||
},
|
||||
responseType: responseType ? responseType : "json"
|
||||
}).then(res => res.data)
|
||||
|
||||
export default axiosInstance;
|
||||
@ -1,5 +1,3 @@
|
||||
// Layout for fullscreen pages
|
||||
|
||||
import { Flex } from "@mantine/core";
|
||||
import { Outlet } from "react-router-dom";
|
||||
|
||||
|
||||
@ -1,10 +1,13 @@
|
||||
import "@fontsource/inter";
|
||||
import '@mantine/core/styles.css';
|
||||
import '@mantine/dates/styles.css';
|
||||
import React from 'react'
|
||||
import ReactDOM from 'react-dom/client'
|
||||
import App from './App.tsx'
|
||||
import './index.css'
|
||||
import { createTheme, DEFAULT_THEME, MantineProvider, mergeMantineTheme } from '@mantine/core';
|
||||
import 'dayjs/locale/ru';
|
||||
import { DatesProvider } from "@mantine/dates";
|
||||
|
||||
const overrides = createTheme({
|
||||
// Set this color to `--mantine-color-body` CSS variable
|
||||
@ -19,7 +22,9 @@ const theme = mergeMantineTheme(DEFAULT_THEME, overrides);
|
||||
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
|
||||
<React.StrictMode>
|
||||
<MantineProvider theme={theme}>
|
||||
<App />
|
||||
<DatesProvider settings={{ locale: 'ru' }}>
|
||||
<App />
|
||||
</DatesProvider>
|
||||
</MantineProvider>
|
||||
</React.StrictMode>,
|
||||
)
|
||||
207
client/src/pages/Fuel.tsx
Normal file
207
client/src/pages/Fuel.tsx
Normal file
@ -0,0 +1,207 @@
|
||||
import { ActionIcon, Button, Flex, Input, Loader, LoadingOverlay, Modal, Overlay, Table, Tabs, TextInput, useMantineColorScheme } from "@mantine/core";
|
||||
import { IconMathMax, IconPlus, IconTableMinus, IconTablePlus } from "@tabler/icons-react";
|
||||
import { FuelExpenseDto, FuelExpenseDtoHeaders, FuelLimitDto, FuelLimitDtoHeaders } from "../dto/fuel/fuel.dto";
|
||||
import useSWR from "swr";
|
||||
import { fetcher } from "../http/axiosInstanceNest";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useDisclosure } from "@mantine/hooks";
|
||||
import { DateInput, DatePicker } from '@mantine/dates'
|
||||
import { SubmitHandler, useForm } from "react-hook-form";
|
||||
|
||||
import { AgGridReact } from "ag-grid-react";
|
||||
import { AllCommunityModule, ColDef, ModuleRegistry } from 'ag-grid-community'
|
||||
|
||||
ModuleRegistry.registerModules([AllCommunityModule])
|
||||
|
||||
type FieldType = 'text' | 'number' | 'select' | 'date'
|
||||
|
||||
interface IPostInclude {
|
||||
field: string
|
||||
field_type: FieldType
|
||||
}
|
||||
|
||||
interface ITableSchema {
|
||||
label: string
|
||||
value: string
|
||||
get: string
|
||||
post: string
|
||||
headers: { [key: string]: string }
|
||||
post_include: IPostInclude[]
|
||||
icon: JSX.Element
|
||||
}
|
||||
|
||||
export default function FuelPage() {
|
||||
const tables: ITableSchema[] = [
|
||||
{
|
||||
label: 'Расходы',
|
||||
value: 'expenses',
|
||||
get: '/fuel/expenses',
|
||||
post: '/fuel/expenses',
|
||||
headers: FuelExpenseDtoHeaders,
|
||||
post_include: [
|
||||
{
|
||||
field: 'id_boiler',
|
||||
field_type: 'text'
|
||||
},
|
||||
{
|
||||
field: 'id_fuel',
|
||||
field_type: 'text'
|
||||
},
|
||||
{
|
||||
field: 'date',
|
||||
field_type: 'date'
|
||||
},
|
||||
{
|
||||
field: 'value',
|
||||
field_type: 'text'
|
||||
}
|
||||
],
|
||||
icon: <IconTableMinus size={12} />
|
||||
},
|
||||
{
|
||||
label: 'Лимиты',
|
||||
value: 'limits',
|
||||
get: '/fuel/limits',
|
||||
post: '/fuel/limits',
|
||||
headers: FuelLimitDtoHeaders,
|
||||
post_include: [
|
||||
{
|
||||
field: 'id_boiler',
|
||||
field_type: 'text'
|
||||
},
|
||||
{
|
||||
field: 'id_fuel',
|
||||
field_type: 'text'
|
||||
},
|
||||
{
|
||||
field: 'month',
|
||||
field_type: 'number'
|
||||
},
|
||||
{
|
||||
field: 'year',
|
||||
field_type: 'number'
|
||||
},
|
||||
{
|
||||
field: 'value',
|
||||
field_type: 'text'
|
||||
}
|
||||
],
|
||||
icon: <IconMathMax size={12} />,
|
||||
}
|
||||
]
|
||||
|
||||
const [currentTab, setCurrentTab] = useState(tables[0])
|
||||
|
||||
const { data, isLoading } = useSWR(currentTab.get, () => fetcher(currentTab.get), { revalidateOnFocus: false })
|
||||
|
||||
const [openedCreateModal, { open: openCreateModal, close: closeCreateModal }] = useDisclosure(false)
|
||||
|
||||
const { colorScheme } = useMantineColorScheme()
|
||||
|
||||
useEffect(() => {
|
||||
if (colorScheme === 'dark') {
|
||||
document.body.dataset.agThemeMode = 'dark'
|
||||
} else {
|
||||
document.body.dataset.agThemeMode = 'light'
|
||||
}
|
||||
}, [colorScheme])
|
||||
|
||||
return (
|
||||
<>
|
||||
<ModalCreate openedCreateModal={openedCreateModal} closeCreateModal={closeCreateModal} currentTab={currentTab} />
|
||||
|
||||
<Tabs defaultValue={tables[0].value} w='100%' onChange={(tab) => setCurrentTab(tables.find(table => table.value === tab) || tables[0])}>
|
||||
<Tabs.List>
|
||||
{tables.map((table, index) => (
|
||||
<Tabs.Tab key={index} value={table.value} leftSection={table.icon}>
|
||||
{table.label}
|
||||
</Tabs.Tab>
|
||||
))}
|
||||
</Tabs.List>
|
||||
|
||||
<Flex p='sm'>
|
||||
<Button leftSection={<IconPlus />} onClick={openCreateModal}>
|
||||
Добавить
|
||||
</Button>
|
||||
</Flex>
|
||||
|
||||
{tables.map((table, index) => (
|
||||
<Tabs.Panel key={index} value={table.value} w='100%' h='100%'>
|
||||
{isLoading ?
|
||||
<Flex w='100%' justify={'center'} p='md'>
|
||||
<Loader />
|
||||
</Flex>
|
||||
:
|
||||
<>
|
||||
<AgGridReact
|
||||
//rowData={data}
|
||||
rowData={[
|
||||
Object.keys(table.headers).reduce((obj, key) => ({ ...obj, [key]: 'test' }), {}),
|
||||
Object.keys(table.headers).reduce((obj, key) => ({ ...obj, [key]: 'test' }), {})
|
||||
]}
|
||||
columnDefs={Object.keys(table.headers).map((header) => ({
|
||||
field: header
|
||||
})) as ColDef[]}
|
||||
defaultColDef={{
|
||||
flex: 1,
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
}
|
||||
</Tabs.Panel>
|
||||
))}
|
||||
</Tabs>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
const ModalCreate = ({
|
||||
openedCreateModal,
|
||||
closeCreateModal,
|
||||
currentTab
|
||||
}: {
|
||||
openedCreateModal: boolean
|
||||
closeCreateModal: () => void
|
||||
currentTab: ITableSchema
|
||||
}) => {
|
||||
const { register, handleSubmit, reset, watch, formState: { errors, isSubmitting, dirtyFields, isValid } } = useForm({
|
||||
mode: 'onChange',
|
||||
})
|
||||
|
||||
const onSubmit: SubmitHandler<any> = async (values: any) => {
|
||||
console.log('Values to submit:', values)
|
||||
}
|
||||
|
||||
return (
|
||||
<Modal withinPortal opened={openedCreateModal} onClose={closeCreateModal}>
|
||||
<LoadingOverlay visible={isSubmitting} />
|
||||
|
||||
<Flex direction='column' gap='sm' component='form' onSubmit={handleSubmit(onSubmit)}>
|
||||
{currentTab.post_include.map((header, index) => {
|
||||
switch (header.field_type) {
|
||||
case 'date':
|
||||
return (
|
||||
<DateInput label={header.field} />
|
||||
)
|
||||
case 'text':
|
||||
return (
|
||||
<TextInput key={index} label={header.field} {...register(header.field, {
|
||||
required: true
|
||||
})} />
|
||||
)
|
||||
default:
|
||||
return (
|
||||
<TextInput key={index} label={header.field} {...register(header.field, {
|
||||
required: true
|
||||
})} />
|
||||
)
|
||||
}
|
||||
})}
|
||||
|
||||
<Button mt='xl' type='submit'>
|
||||
Добавить
|
||||
</Button>
|
||||
</Flex>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
@ -13,9 +13,9 @@ function MapTest() {
|
||||
const tabs = [
|
||||
{
|
||||
id: uuidv4(),
|
||||
year: 2023,
|
||||
year: 2018,
|
||||
region: 11,
|
||||
district: 145,
|
||||
district: 146,
|
||||
},
|
||||
// {
|
||||
// id: uuidv4(),
|
||||
|
||||
@ -1,11 +1,10 @@
|
||||
import { ActionIcon, Button, Flex, Group, Input, Stack, Text, TextInput } from "@mantine/core"
|
||||
import { ActionIcon, Button, Flex, Group, Stack, Text, TextInput } from "@mantine/core"
|
||||
import { useEffect, useState } from "react"
|
||||
import createReport, { listCommands } from 'docx-templates'
|
||||
import { Dropzone, DropzoneProps, IMAGE_MIME_TYPE, MS_WORD_MIME_TYPE } from '@mantine/dropzone'
|
||||
import { IconFile, IconFileTypeDocx, IconPhoto, IconPlus, IconUpload, IconX } from "@tabler/icons-react"
|
||||
import { Dropzone, IMAGE_MIME_TYPE } from '@mantine/dropzone'
|
||||
import { IconFileTypeDocx, IconPlus, IconUpload, IconX } from "@tabler/icons-react"
|
||||
import { CommandSummary } from "docx-templates/lib/types"
|
||||
import { Control, Controller, FieldValues, SubmitHandler, useFieldArray, useForm, UseFormRegister } from "react-hook-form"
|
||||
import { TemplateHandler } from 'easy-template-x'
|
||||
|
||||
const xslTemplate = `<?xml version="1.0" encoding="utf-8"?>
|
||||
<xsl:stylesheet version="1.0" xmlns="urn:schemas-microsoft-com:office:spreadsheet" xmlns:ss="urn:schemas-microsoft-com:office:spreadsheet" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
|
||||
@ -962,54 +961,6 @@ const handleGenerateExcel = () => {
|
||||
URL.revokeObjectURL(url)
|
||||
}
|
||||
|
||||
const TemplateFormET = ({
|
||||
templateUrl
|
||||
}: {
|
||||
templateUrl: string
|
||||
}) => {
|
||||
const [templateUint8Array, setTemplateUint8Array] = useState<Uint8Array | null>(null)
|
||||
const [loading, setLoading] = useState(false)
|
||||
|
||||
const loadTemplate = async (templateUrl: string) => {
|
||||
setLoading(true)
|
||||
try {
|
||||
const response = await fetch(templateUrl)
|
||||
const templateArrayBuffer = await response.arrayBuffer()
|
||||
|
||||
setTemplateUint8Array(new Uint8Array(templateArrayBuffer))
|
||||
} catch (error) {
|
||||
console.error("Error generating DOCX:", error)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const loadTags = async (templateUint8Array: Uint8Array) => {
|
||||
const handler = new TemplateHandler()
|
||||
const tags = await handler.parseTags(templateUint8Array)
|
||||
|
||||
console.log(tags)
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (templateUint8Array) {
|
||||
loadTags(templateUint8Array)
|
||||
}
|
||||
}, [templateUint8Array])
|
||||
|
||||
useEffect(() => {
|
||||
if (templateUrl) {
|
||||
loadTemplate(templateUrl)
|
||||
}
|
||||
}, [templateUrl])
|
||||
|
||||
return (
|
||||
<div>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
interface TemplateCommand extends CommandSummary {
|
||||
children?: CommandSummary[]
|
||||
}
|
||||
@ -1098,6 +1049,7 @@ const FormLoop = ({
|
||||
))
|
||||
}
|
||||
</Stack>
|
||||
|
||||
<ActionIcon onClick={() => {
|
||||
if (command.children) {
|
||||
append(command.children.map(c => c.code).reduce((acc, key) => {
|
||||
@ -1132,51 +1084,51 @@ const renderCommand = (
|
||||
|
||||
if (command.type === 'IMAGE') {
|
||||
return (
|
||||
<Controller
|
||||
key={key}
|
||||
name={name}
|
||||
control={control}
|
||||
render={({ field: { onChange, value } }) => (
|
||||
<Dropzone
|
||||
accept={IMAGE_MIME_TYPE}
|
||||
maxSize={5 * 1024 ** 2}
|
||||
onReject={(files) => console.log('rejected files', files)}
|
||||
onDrop={(files) => {
|
||||
console.log(files[0])
|
||||
files[0].arrayBuffer().then(res => {
|
||||
onChange({
|
||||
width: 6,
|
||||
height: 6,
|
||||
data: new Uint8Array(res),
|
||||
extension: files[0]?.path?.match(/\.[^.]+$/)?.[0] || ""
|
||||
<Stack gap={0}>
|
||||
<Text size='sm' fw={500}>{command.code}</Text>
|
||||
<Controller
|
||||
key={key}
|
||||
name={name}
|
||||
control={control}
|
||||
render={({ field: { onChange } }) => (
|
||||
<Dropzone
|
||||
accept={IMAGE_MIME_TYPE}
|
||||
maxSize={5 * 1024 ** 2}
|
||||
onReject={(files) => console.log('rejected files', files)}
|
||||
onDrop={(files) => {
|
||||
console.log(files[0])
|
||||
files[0].arrayBuffer().then(res => {
|
||||
onChange({
|
||||
width: 6,
|
||||
height: 6,
|
||||
data: new Uint8Array(res),
|
||||
extension: files[0]?.path?.match(/\.[^.]+$/)?.[0] || ""
|
||||
})
|
||||
})
|
||||
})
|
||||
}}
|
||||
maxFiles={1}
|
||||
>
|
||||
<Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
|
||||
<Dropzone.Accept>
|
||||
<IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
|
||||
</Dropzone.Accept>
|
||||
<Dropzone.Reject>
|
||||
<IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
|
||||
</Dropzone.Reject>
|
||||
<Dropzone.Idle>
|
||||
<IconFileTypeDocx size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
|
||||
</Dropzone.Idle>
|
||||
}}
|
||||
maxFiles={1}
|
||||
>
|
||||
<Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
|
||||
<Dropzone.Accept>
|
||||
<IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
|
||||
</Dropzone.Accept>
|
||||
<Dropzone.Reject>
|
||||
<IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
|
||||
</Dropzone.Reject>
|
||||
<Dropzone.Idle>
|
||||
<IconFileTypeDocx size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
|
||||
</Dropzone.Idle>
|
||||
|
||||
<div>
|
||||
<Text size="xl" inline>
|
||||
Drag files here or click to select files
|
||||
</Text>
|
||||
<Text size="sm" c="dimmed" inline mt={7}>
|
||||
Attach as many files as you like, each file should not exceed 5mb
|
||||
</Text>
|
||||
</div>
|
||||
</Group>
|
||||
</Dropzone>
|
||||
)}
|
||||
/>
|
||||
<div>
|
||||
<Text size="xl" inline>
|
||||
Перетащите файлы сюда или нажмите, чтобы выбрать их
|
||||
</Text>
|
||||
</div>
|
||||
</Group>
|
||||
</Dropzone>
|
||||
)}
|
||||
/>
|
||||
</Stack>
|
||||
)
|
||||
}
|
||||
}
|
||||
@ -1186,7 +1138,7 @@ const TemplateForm = ({
|
||||
}: {
|
||||
templateUrl: string,
|
||||
}) => {
|
||||
const { register, control, handleSubmit, reset, watch, formState } = useForm({
|
||||
const { register, control, handleSubmit } = useForm({
|
||||
mode: 'onChange',
|
||||
})
|
||||
|
||||
@ -1276,6 +1228,15 @@ const TemplateForm = ({
|
||||
}
|
||||
}, [templateUrl])
|
||||
|
||||
useEffect(() => {
|
||||
console.log(loading)
|
||||
}, [loading])
|
||||
|
||||
useEffect(() => {
|
||||
console.log(saving)
|
||||
}, [saving])
|
||||
|
||||
|
||||
if (commandList) {
|
||||
return (
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
@ -1283,13 +1244,16 @@ const TemplateForm = ({
|
||||
{commandList.map(command => {
|
||||
if (command.type === 'FOR') {
|
||||
return (
|
||||
<FormLoop key={command.code} control={control} register={register} command={command} />
|
||||
<Stack gap={0} key={command.code}>
|
||||
<Text size='sm' fw={500}>{command.code}</Text>
|
||||
<FormLoop control={control} register={register} command={command} />
|
||||
</Stack>
|
||||
)
|
||||
} else {
|
||||
return renderCommand(control, register, command, command.code, command.code, command.code)
|
||||
}
|
||||
})}
|
||||
<Button type='submit'>Submit</Button>
|
||||
<Button ml='auto' w='fit-content' type='submit'>Сохранить</Button>
|
||||
</Stack>
|
||||
</form>
|
||||
)
|
||||
@ -1297,8 +1261,6 @@ const TemplateForm = ({
|
||||
}
|
||||
|
||||
const PrintReport = () => {
|
||||
const [loading, setLoading] = useState(false)
|
||||
|
||||
return (
|
||||
<Stack p='sm' gap='sm' w='100%'>
|
||||
<TemplateForm templateUrl="/template_table.docx" />
|
||||
|
||||
@ -235,7 +235,7 @@ export const initializeMapState = (
|
||||
const printAreaDraw = new Draw({
|
||||
source: printSource,
|
||||
type: 'Circle',
|
||||
style: (feature) => {
|
||||
style: () => {
|
||||
return new Style({
|
||||
fill: new Fill({
|
||||
color: "rgba(0, 0, 255, 0.3)", // Semi-transparent blue fill
|
||||
@ -331,12 +331,13 @@ export const initializeMapState = (
|
||||
|
||||
if (pixel) {
|
||||
map?.forEachFeatureAtPixel(pixel, function (feature, layer) {
|
||||
if (layer.get('type') === 'region') {
|
||||
console.log("clicked on region")
|
||||
zoomToFeature(id, feature as Feature)
|
||||
if (layer) {
|
||||
if (layer.get('type') === 'region') {
|
||||
zoomToFeature(id, feature as Feature)
|
||||
|
||||
if (feature.get('entity_id')) {
|
||||
setSelectedRegion(id, feature.get('entity_id'))
|
||||
if (feature.get('entity_id')) {
|
||||
setSelectedRegion(id, feature.get('entity_id'))
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user