75 lines
2.8 KiB
JavaScript
75 lines
2.8 KiB
JavaScript
'use client'
|
|
|
|
import { useEffect, useState } from 'react'
|
|
import { useMessage } from '@/hooks/useMessage'
|
|
import WithDraggable from '@/components/common/draggable/WithDraggable'
|
|
import { moduleStatisticsState } from '@/store/circuitTrestleAtom'
|
|
import { useRecoilState, useRecoilValue, useResetRecoilState } from 'recoil'
|
|
import { useModule } from '@/hooks/module/useModule'
|
|
import { useEavesGableEdit } from '@/hooks/roofcover/useEavesGableEdit'
|
|
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 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 (
|
|
<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>
|
|
</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>
|
|
{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>
|
|
</Draggable>
|
|
)
|
|
}
|