popovspiridon99/universal_is
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update MapComponent + ObjectParameters

Browse Source
This commit is contained in:
popovspiridon99
2025-11-14 17:15:39 +09:00
parent 676bc6d0cb
commit 38b041cfa5
2 changed files with 115 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
client/src/components/map/MapComponent.tsx
View File

@ -68,11 +68,11 @@ const MapComponent = ({
{ 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 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)
@ -519,7 +519,8 @@ const MapComponent = ({
<Drawer style={{ borderRadius: '0.25rem', height: '100%', zIndex: 1 }} type='inline' open={!!selectedRegion && !!selectedDistrict && !!selectedYear && !leftPaneHidden}>
<TabsPane defaultTab='objects' tabs={objectsPane} />
<Divider />
<TabsPane defaultTab='parameters' tabs={paramsPane} />
<ObjectParameters map_id={id} />
{/* <TabsPane defaultTab='parameters' tabs={paramsPane} /> */}
</Drawer>
{!!selectedRegion && !!selectedDistrict && !!selectedYear &&

109
client/src/components/map/ObjectParameters/ObjectParameters.tsx
View File

@ -4,7 +4,8 @@ import useSWR from 'swr';
import { BASE_URL } from '../../../constants';
import { fetcher } from '../../../http/axiosInstance';
import { useObjectsStore } from '../../../store/objects';
import { Spinner, Table, TableBody, TableHeader, TableHeaderCell, TableRow } from '@fluentui/react-components';
import { Spinner, Tab, Table, TableBody, TableHeader, TableHeaderCell, TableRow, TabList, Text } from '@fluentui/react-components';
import { useState } from 'react';
const ObjectParameters = ({
map_id
@ -23,6 +24,112 @@ const ObjectParameters = ({
}
)
const [selectedTab, setSelectedTab] = useState<string | unknown>('parameters')
return (
<div style={{
display: 'flex',
flexDirection: 'column',
width: '100%',
height: '100%',
maxHeight: '50%',
}}>
<div style={{
display: 'flex',
flexWrap: 'wrap',
maxWidth: '100%',
overflowX: 'auto',
minHeight: 'min-content',
borderBottom: '1px solid var(--colorNeutralShadowKey)'
}}>
<TabList size='small' selectedValue={selectedTab} onTabSelect={(_, data) => setSelectedTab(data.value)}>
<Tab key={'history'} value={'history'}>
<Text size={200}>{'История изменений'}</Text>
</Tab>
<Tab key={'parameters'} value={'parameters'}>
<Text size={200}>{'Параметры'}</Text>
</Tab>
<Tab key={'calculated'} value={'calculated'}>
<Text size={200}>{'Вычисляемые'}</Text>
</Tab>
</TabList>
</div>
<div style={{
display: 'flex',
overflow: 'auto',
position: 'relative'
}}>
{(valuesValidating) && (
<div
style={{
position: "absolute",
inset: 0,
backgroundColor: "rgba(255, 255, 255, 0.6)",
display: "flex",
justifyContent: "center",
alignItems: "center",
zIndex: 9999,
}}
>
<Spinner size="large" label="Загрузка..." />
</div>
)}
<div style={{ display: selectedTab !== 'history' ? 'none' : 'initial' }}>
</div>
<div style={{ display: selectedTab !== 'parameters' ? 'none' : 'initial' }}>
<Table size='extra-small'>
<TableHeader>
<TableRow appearance='neutral'>
<TableHeaderCell>Параметр</TableHeaderCell>
<TableHeaderCell>Значение</TableHeaderCell>
</TableRow>
</TableHeader>
<TableBody>
{Array.isArray(valuesData) &&
valuesData.filter((param: IObjectParam) => param.format !== 'calculate').map((param: IObjectParam) => (
<>
<ObjectParameter map_id={map_id} key={param.id_param} param={param} />
</>
))
}
</TableBody>
</Table>
</div>
<div style={{ display: selectedTab !== 'calculated' ? 'none' : 'initial' }}>
<Table size='extra-small'>
<TableHeader>
<TableRow appearance='neutral'>
<TableHeaderCell>Параметр</TableHeaderCell>
<TableHeaderCell>Значение</TableHeaderCell>
</TableRow>
</TableHeader>
<TableBody>
{Array.isArray(valuesData) &&
valuesData.filter((param: IObjectParam) => param.format === 'calculate').map((param: IObjectParam) => (
<>
<ObjectParameter map_id={map_id} key={param.id_param} param={param} />
</>
))
}
</TableBody>
</Table>
</div>
</div>
</div>
)
return (
<div style={{ display: 'flex', gap: '1rem', flexDirection: 'column', position: 'relative' }}>
{(valuesValidating) && (