qcast3/qcast-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

집계표 단독으로 Draggable Component 적용

Browse Source
This commit is contained in:
김민식 2025-03-14 14:59:45 +09:00
parent 197c107e7a
commit d7d4768ed7
1 changed files with 41 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
src/components/floor-plan/modal/panelBatch/PanelBatchStatistics.jsx
View File

@ -11,60 +11,64 @@ import { canvasState } from '@/store/canvasAtom'
import { POLYGON_TYPE } from '@/common/common'
import { useCircuitTrestle } from '@/hooks/useCirCuitTrestle'
import { moduleSelectionDataState } from '@/store/selectedModuleOptions'
import Draggable from 'react-draggable'
export default function PanelBatchStatistics() {
const { getMessage } = useMessage()
const [isFold, setIsFold] = useState(false)
const [pos, setPos] = useState({
x: 0,
y: 30,
})
const canvas = useRecoilValue(canvasState)
const { header, rows, footer } = useRecoilValue(moduleStatisticsState)
const { setModuleStatisticsData } = useCircuitTrestle(true)
const [moduleSelectionDataStore, setModuleSelectionDataStore] = useRecoilState(moduleSelectionDataState)
const [position, setPosition] = useState({
x: 0,
y: 30,
})
const handleOnDrag = (e, data) => {
e.stopPropagation()
setPosition({ x: data.x, y: data.y })
}
useEffect(() => {
if (moduleSelectionDataStore && moduleSelectionDataStore.module) setModuleStatisticsData()
}, [])
return (
<WithDraggable isShow={true} handle=".penal-wrap" pos={pos} isModal={false}>
<WithDraggable.Panel>
<div className={`penal-wrap ${!isFold ? 'act' : ''}`}>
<h2>{getMessage('modal.panel.batch.statistic')}</h2>
<button className="penal-arr" onClick={() => setIsFold(!isFold)}></button>
<div className="penal-table-wrap">
<table className="penal-table">
<thead>
<tr>
{header.map((item, index) => (
<th key={`statistic-hd-${index}`}>{item.name}</th>
))}
</tr>
</thead>
<tbody>
{rows.map((row, index) => (
<tr key={`statistic-row-${index}`}>
{header.map((item, i) => (
<td key={`statistic-col-${i}`}>{row[item.prop] ?? 0}</td>
))}
</tr>
<Draggable position={{ x: position.x, y: position.y }} onDrag={(e, data) => handleOnDrag(e, data)} handle=".penal-wrap">
<div className={`penal-wrap ${!isFold ? 'act' : ''}`}>
<h2>{getMessage('modal.panel.batch.statistic')}</h2>
<button className="penal-arr" onClick={() => setIsFold(!isFold)}></button>
<div className="penal-table-wrap">
<table className="penal-table">
<thead>
<tr>
{header.map((item, index) => (
<th key={`statistic-hd-${index}`}>{item.name}</th>
))}
<tr>
{header.map((header, index) => (
<td key={`statistic-ft-${index}`}>
{typeof footer[header.prop] === 'number'
? footer[header.prop].toLocaleString('ko-KR', { maximumFractionDigits: 4 })
: footer[header.prop]}
</td>
</tr>
</thead>
<tbody>
{rows.map((row, index) => (
<tr key={`statistic-row-${index}`}>
{header.map((item, i) => (
<td key={`statistic-col-${i}`}>{row[item.prop] ?? 0}</td>
))}
</tr>
</tbody>
</table>
</div>
))}
<tr>
{header.map((header, index) => (
<td key={`statistic-ft-${index}`}>
{typeof footer[header.prop] === 'number'
? footer[header.prop].toLocaleString('ko-KR', { maximumFractionDigits: 4 })
: footer[header.prop]}
</td>
))}
</tr>
</tbody>
</table>
</div>
</WithDraggable.Panel>
</WithDraggable>
</div>
</Draggable>
)
}