diff --git a/src/components/floor-plan/modal/panelBatch/PanelBatchStatistics.jsx b/src/components/floor-plan/modal/panelBatch/PanelBatchStatistics.jsx index e789bc4a..fa4703be 100644 --- a/src/components/floor-plan/modal/panelBatch/PanelBatchStatistics.jsx +++ b/src/components/floor-plan/modal/panelBatch/PanelBatchStatistics.jsx @@ -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 ( - - -
-

{getMessage('modal.panel.batch.statistic')}

- -
- - - - {header.map((item, index) => ( - - ))} - - - - {rows.map((row, index) => ( - - {header.map((item, i) => ( - - ))} - + handleOnDrag(e, data)} handle=".penal-wrap"> +
+

{getMessage('modal.panel.batch.statistic')}

+ +
+
{item.name}
{row[item.prop] ?? 0}
+ + + {header.map((item, index) => ( + ))} - - {header.map((header, index) => ( - + + + + {rows.map((row, index) => ( + + {header.map((item, i) => ( + ))} - -
{item.name}
- {typeof footer[header.prop] === 'number' - ? footer[header.prop].toLocaleString('ko-KR', { maximumFractionDigits: 4 }) - : footer[header.prop]} -
{row[item.prop] ?? 0}
-
+ ))} + + {header.map((header, index) => ( + + {typeof footer[header.prop] === 'number' + ? footer[header.prop].toLocaleString('ko-KR', { maximumFractionDigits: 4 }) + : footer[header.prop]} + + ))} + + +
-
-
+ + ) }