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

고도화 작업 레이아웃 모듈 설치 기능

Browse Source
This commit is contained in:
yjnoh 2025-04-03 11:23:37 +09:00
parent 6c6e5845ef
commit 7d76929689
6 changed files with 55 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/floor-plan/modal/basic/BasicSetting.jsx
View File

@ -95,7 +95,7 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
addedRoofs.map((roof, index) => {
return {
...roof,
...roofsStore[index].addRoof,
...roofsStore[index]?.addRoof,
}
}),
)

2
src/components/floor-plan/modal/basic/step/Orientation.jsx
View File

@ -321,7 +321,7 @@ export const Orientation = forwardRef((props, ref) => {
</tr>
</thead>
<tbody>
{Array.from({ length: 2 }).map((_, index) => {
{Array.from({ length: 3 }).map((_, index) => {
return selectedModules && selectedModules?.itemList && selectedModules?.itemList?.length >= index + 1 ? (
<tr key={index}>
<td>

16
src/components/floor-plan/modal/basic/step/Placement.jsx
View File

@ -5,6 +5,7 @@ import {
checkedModuleState,
isManualModuleLayoutSetupState,
isManualModuleSetupState,
moduleRowColArrayState,
moduleSetupOptionState,
toggleManualSetupModeState,
} from '@/store/canvasAtom'
@ -36,6 +37,7 @@ const Placement = forwardRef((props, refs) => {
const resetModuleSetupOption = useResetRecoilState(moduleSetupOptionState)
const [colspan, setColspan] = useState(1)
const [moduleRowColArray, setModuleRowColArray] = useRecoilState(moduleRowColArrayState)
//모듈 배치면 생성
useEffect(() => {
@ -62,6 +64,10 @@ const Placement = forwardRef((props, refs) => {
}
}, [])
useEffect(() => {
console.log('moduleRowColArray', moduleRowColArray)
}, [moduleRowColArray])
//최초 지입시 체크
useEffect(() => {
if (isObjectNotEmpty(moduleSelectionData)) {
@ -342,18 +348,18 @@ const Placement = forwardRef((props, refs) => {
</tr>
</thead>
<tbody>
{moduleSelectionData.roofConstructions.map((item) => (
{moduleSelectionData.roofConstructions.map((item, index) => (
<tr>
<td>
<div className="color-wrap">
<span className="color-box" style={{ backgroundColor: roofOutlineColor(item.roofIndex) }}></span>
<span className="color-box" style={{ backgroundColor: roofOutlineColor(item.addRoof.index) }}></span>
<span className="name">{item.addRoof.roofMatlNmJp}</span>
</div>
</td>
{selectedModules.itemList.map((item) => (
{moduleRowColArray[index]?.map((item) => (
<>
<td className="al-c">7</td>
{colspan > 1 && <td className="al-c">5</td>}
<td className="al-c">{item.moduleMaxRows}</td>
{colspan > 1 && <td className="al-c">{item.mixModuleMaxRows}</td>}
</>
))}
</tr>

11
src/components/floor-plan/modal/basic/step/Trestle.jsx
View File

@ -1,5 +1,6 @@
import { GlobalDataContext } from '@/app/GlobalDataProvider'
import QSelectBox from '@/components/common/select/QSelectBox'
import { useModuleBasicSetting } from '@/hooks/module/useModuleBasicSetting'
import { useModuleTrestle } from '@/hooks/module/useModuleTrestle'
import { useMessage } from '@/hooks/useMessage'
import { currentAngleTypeSelector, pitchTextSelector } from '@/store/canvasAtom'
@ -52,11 +53,15 @@ const Trestle = forwardRef((props, ref) => {
const [selectedConstruction, setSelectedConstruction] = useState(null)
const [selectedRoofBase, setSelectedRoofBase] = useState(null)
const { managementState } = useContext(GlobalDataContext)
const { restoreModuleInstArea } = useModuleBasicSetting()
useEffect(() => {
if (roofs && !selectedRoof) {
setSelectedRoof(roofs[0])
}
//모듈 설치 영역 복구
restoreModuleInstArea()
}, [roofs])
useEffect(() => {
@ -263,16 +268,16 @@ const Trestle = forwardRef((props, ref) => {
roofConstructions: newAddedRoofs.map((roof, index) => {
return {
addRoof: {
...moduleSelectionData.roofConstructions[index]?.addRoof,
...roof.addRoof,
...moduleSelectionData.roofConstructions[index].addRoof,
},
trestle: {
...roof.trestle,
...moduleSelectionData.roofConstructions[index].trestle,
...moduleSelectionData.roofConstructions[index]?.trestle,
},
construction: {
...roof.construction,
...moduleSelectionData.roofConstructions[index].construction,
...moduleSelectionData.roofConstructions[index]?.construction,
},
trestleDetail: {
...roof.trestleDetail,

39
src/hooks/module/useModuleBasicSetting.js
View File

@ -10,6 +10,7 @@ import {
isManualModuleSetupState,
moduleSetupOptionState,
toggleManualSetupModeState,
moduleRowColArrayState,
} from '@/store/canvasAtom'
import { rectToPolygon, polygonToTurfPolygon, calculateVisibleModuleHeight, getDegreeByChon, toFixedWithoutRounding } from '@/util/canvas-util'
@ -61,6 +62,7 @@ export function useModuleBasicSetting(tabNum) {
const { drawDirectionArrow } = usePolygon()
const moduleSetupOption = useRecoilValue(moduleSetupOptionState)
const setManualSetupMode = useSetRecoilState(toggleManualSetupModeState)
const [moduleRowColArray, setModuleRowColArray] = useRecoilState(moduleRowColArrayState)
useEffect(() => {
return () => {
@ -81,6 +83,8 @@ export function useModuleBasicSetting(tabNum) {
//모듈 선택에서 선택된 값들 넘어옴
const makeModuleInitArea = () => {
console.log('moduleSelectionData', moduleSelectionData)
if (isObjectNotEmpty(moduleSelectionData) && tabNum === 3) {
if (canvasSetting.roofSizeSet !== '3') {
const common = moduleSelectionData.common
@ -90,11 +94,11 @@ export function useModuleBasicSetting(tabNum) {
const listParams = roofConstructions.map((item) => {
return {
...common,
roofMatlCd: item.trestle.roofMatlCd,
trestleMkrCd: item.trestle.trestleMkrCd,
constMthdCd: item.trestle.constMthdCd,
roofBaseCd: item.trestle.roofBaseCd,
constTp: item.construction.constTp,
roofMatlCd: item.addRoof.roofMatlCd,
trestleMkrCd: item.addRoof.trestleMkrCd,
constMthdCd: item.addRoof.constMthdCd,
roofBaseCd: item.addRoof.roofBaseCd,
constTp: item.addRoof.constTp,
mixMatlNo: selectedModules.mixMatlNo,
roofPitch: item.addRoof.hajebichi ? item.addRoof.hajebichi : 0,
inclCd: String(item.addRoof.pitch),
@ -140,6 +144,7 @@ export function useModuleBasicSetting(tabNum) {
//가대 상세 데이터 들어오면 실행
useEffect(() => {
if (trestleDetailList.length > 0) {
let rowColArray = []
//지붕을 가져옴
canvas
.getObjects()
@ -147,26 +152,38 @@ export function useModuleBasicSetting(tabNum) {
.forEach((roof) => {
if (!roof.roofMaterial) return
const roofIndex = roof.roofMaterial.index //지붕의 지붕재의 순번
console.log('moduleSelectionData', moduleSelectionData)
trestleDetailList.forEach((detail) => {
if (detail.data !== null) {
const moduleRowArray = []
if (Number(detail.data.roofIndex) === roofIndex) {
//roof에 상세 데이터 추가
roof.set({
trestleDetail: detail.data,
stroke: roofOutlineColor(roofIndex),
strokeWidth: 7,
})
const offsetObjects = moduleSelectionData.roofConstructions.find((item) => item.addRoof.index === roofIndex)
console.log('offsetObjects', offsetObjects)
roof.lines.forEach((line) => {
line.attributes = { ...line.attributes, offset: getOffset(detail.data, line.attributes.type) }
line.attributes = { ...line.attributes, offset: getOffset(offsetObjects.addRoof, line.attributes.type) }
})
//배치면 설치 영역
makeModuleInstArea(roof, detail.data)
//surface에 상세 데이터 추가
}
detail.data.module.forEach((module) => {
moduleRowArray.push({ moduleMaxRows: module.moduleMaxRows, mixModuleMaxRows: module.mixModuleMaxRows })
})
rowColArray.push(moduleRowArray)
}
})
})
setModuleRowColArray(rowColArray)
}
}, [trestleDetailList])
@ -185,12 +202,12 @@ export function useModuleBasicSetting(tabNum) {
const getOffset = (data, type) => {
switch (type) {
case LINE_TYPE.WALLLINE.EAVES:
return data.eaveIntvl / 10
return data.eavesMargin / 10
case LINE_TYPE.WALLLINE.GABLE:
return data.kerabaIntvl / 10
return data.kerabaMargin / 10
case LINE_TYPE.SUBLINE.RIDGE:
case LINE_TYPE.WALLLINE.SHED:
return data.ridgeIntvl / 10
return data.ridgeMargin / 10
default:
return 200 / 10
}

6
src/store/canvasAtom.js
View File

@ -402,3 +402,9 @@ export const toggleManualSetupModeState = atom({
key: 'toggleManualSetupModeState',
default: '',
})
export const moduleRowColArrayState = atom({
key: 'moduleRowColArrayState',
default: [],
dangerouslyAllowMutability: true,
})