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