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

지붕재 선택 작업중

Browse Source
This commit is contained in:
hyojun.choi 2024-12-18 13:27:05 +09:00
parent a4af0dc006
commit e07d61dc5f
4 changed files with 62 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx
View File

@ -263,7 +263,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
<select className="select-light dark" name="roofGap" ref={roofRef.rafter}>
{raftCodes.map((raft, index) => {
return (
<option key={index} value={raft.clCode}>
<option key={index} value={raft.clCode} selected={currentRoofMaterial.raft === raft.clCode}>
{raft.clCodeNm}
</option>
)

33
src/components/floor-plan/modal/roofAllocation/RoofAllocationSetting.jsx
View File

@ -25,16 +25,16 @@ export default function RoofAllocationSetting(props) {
roofList,
handleDefaultRoofMaterial,
handleChangeRoofMaterial,
handleChangeRaft,
handleChangeLayout,
} = useRoofAllocationSetting(id)
const { fetchBasicSettings } = useCanvasSetting()
const { findCommonCode } = useCommonCode()
const [raftCodes, setRaftCodes] = useState([])
useEffect(() => {
fetchBasicSettings()
const raftCodeList = findCommonCode('203800')
console.log('🚀 ~ useEffect ~ raftCodeList:', raftCodeList)
setRaftCodes(raftCodeList)
setRaftCodes(raftCodeList.map((raft) => ({ ...raft, value: raft.clCode, name: raft.clCodeNm })))
}, [])
return (
<WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap ml mount`}>
@ -125,10 +125,13 @@ export default function RoofAllocationSetting(props) {
<div className="flex-ment">
<span>{getMessage('modal.placement.initial.setting.rafter')}</span>
<div className="grid-select" style={{ width: '84px' }}>
<QSelectBox
options={raftCodes.map((raft) => ({ name: raft.clCodeNm, value: raft.clCode }))}
value={raftCodes.find((r) => r.id === roof.id)}
/>
{raftCodes.length > 0 && (
<QSelectBox
options={raftCodes.map((raft) => ({ name: raft.clCodeNm, value: raft.clCode }))}
onChange={(e) => handleChangeRaft(e, index)}
value={raftCodes.find((r) => r.value === roof.raft)}
/>
)}
{/* <select className="select-light dark" name="roofGap" ref={roofRef.rafter}>
{raftCodes.map((raft, index) => {
return (
@ -157,11 +160,21 @@ export default function RoofAllocationSetting(props) {
</div>
<div className="block-box">
<div className="icon-btn-wrap">
<button className={roof.layout === ROOF_MATERIAL_LAYOUT.PARALLEL ? 'act' : ''}>
<button
className={roof.layout === ROOF_MATERIAL_LAYOUT.PARALLEL ? 'act' : ''}
onClick={() => {
handleChangeLayout(ROOF_MATERIAL_LAYOUT.PARALLEL, index)
}}
>
{getMessage('modal.roof.alloc.select.parallel')}
<i className="allocation01"></i>
</button>
<button className={roof.layout === ROOF_MATERIAL_LAYOUT.STAIRS ? 'act' : ''}>
<button
className={roof.layout === ROOF_MATERIAL_LAYOUT.STAIRS ? 'act' : ''}
onClick={() => {
handleChangeLayout(ROOF_MATERIAL_LAYOUT.STAIRS, index)
}}
>
{getMessage('modal.roof.alloc.select.stairs')} <i className="allocation02"></i>
</button>
</div>

3
src/hooks/option/useCanvasSetting.js
View File

@ -125,6 +125,9 @@ export function useCanvasSetting() {
//지붕재 초기세팅
const addRoofMaterials = async () => {
if (roofMaterials.length !== 0) {
return
}
const { data } = await getRoofMaterialList()
const roofLists = data.map((item, idx) => ({
...item,

41
src/hooks/roofcover/useRoofAllocationSetting.js
View File

@ -1,6 +1,6 @@
import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
import { canvasState, currentMenuState, currentObjectState } from '@/store/canvasAtom'
import { useEffect, useState } from 'react'
import { useEffect, useRef, useState } from 'react'
import { useSwal } from '@/hooks/useSwal'
import { usePolygon } from '@/hooks/usePolygon'
import { basicSettingState, roofDisplaySelector, roofMaterialsSelector, selectedRoofMaterialSelector } from '@/store/settingAtom'
@ -30,15 +30,12 @@ export function useRoofAllocationSetting(id) {
const selectedRoofMaterial = useRecoilValue(selectedRoofMaterialSelector)
const [basicSetting, setBasicSetting] = useRecoilState(basicSettingState)
const [currentRoofMaterial, setCurrentRoofMaterial] = useState(roofMaterials[0]) // 팝업 내 기준 지붕재
const [roofList, setRoofList] = useState([])
const [roofList, setRoofList] = useState(basicSetting.roofs) // 배치면 초기설정에서 선택한 지붕재 배열
const [editingLines, setEditingLines] = useState([])
const isFirstRef = useRef(0)
const { setSurfaceShapePattern } = useRoofFn()
useEffect(() => {
setRoofList(basicSetting.roofs)
}, [basicSetting])
useEffect(() => {
const roofBases = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF) // roofPolygon.innerLines
@ -211,6 +208,11 @@ export function useRoofAllocationSetting(id) {
// 지붕재 변경
const handleChangeRoofMaterial = (value, index) => {
if (isFirstRef.current === 0) {
isFirstRef.current++
return
}
const selectedRoofMaterial = roofMaterials.find((roof) => roof.roofMatlCd === value.id)
const newRoofList = roofList.map((roof, idx) => {
if (idx === index) {
@ -231,6 +233,31 @@ export function useRoofAllocationSetting(id) {
setRoofList(newRoofList)
}
// 서까래 변경
const handleChangeRaft = (e, index) => {
const raftValue = e.value
const newRoofList = roofList.map((roof, idx) => {
if (idx === index) {
return { ...roof, raft: raftValue }
}
return roof
})
setRoofList(newRoofList)
}
const handleChangeLayout = (layoutValue, index) => {
const newRoofList = roofList.map((roof, idx) => {
if (idx === index) {
return { ...roof, layout: layoutValue }
}
return roof
})
setRoofList(newRoofList)
}
return {
handleSave,
onAddRoofMaterial,
@ -246,5 +273,7 @@ export function useRoofAllocationSetting(id) {
roofList,
handleDefaultRoofMaterial,
handleChangeRoofMaterial,
handleChangeRaft,
handleChangeLayout,
}
}