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

모듈 선택 중간 작업

Browse Source
This commit is contained in:
lelalela 2025-01-13 16:22:12 +09:00
parent 9bfd247995
commit ad0c31e4ac
4 changed files with 238 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/floor-plan/modal/basic/step/Module.jsx
View File

@ -71,6 +71,10 @@ export default function Module({}) {
useEffect(() => {}, [roofTab])
useEffect(() => {
console.log('moduleSelectionData', moduleSelectionData)
}, [])
const handleRoofTab = (tab) => {
setRoofTab(tab)
}
@ -226,8 +230,9 @@ export default function Module({}) {
key={index}
index={index}
addRoof={roof}
roofTab={roofTab}
moduleSelectionData={moduleSelectionData}
roofTab={index}
moduleCommonSelectionData={moduleSelectionData.common}
moduleConstructionSelectionData={moduleSelectionData.roofConstructions[index]}
setModuleSelectionData={setModuleSelectionData}
tempModuleSelectionData={tempModuleSelectionData}
setTempModuleSelectionData={setTempModuleSelectionData}

50
src/components/floor-plan/modal/basic/step/ModuleTabContents.jsx
View File

@ -1,24 +1,25 @@
import { useEffect, useState, useRef, useReducer } from 'react'
import { useRecoilValue, useRecoilState } from 'recoil'
import { useEffect, useState, useRef } from 'react'
import { useRecoilValue } from 'recoil'
import { canvasSettingState, pitchSelector, pitchTextSelector } from '@/store/canvasAtom'
import { useMessage } from '@/hooks/useMessage'
import { useMasterController } from '@/hooks/common/useMasterController'
import { useCommonCode } from '@/hooks/common/useCommonCode'
import { moduleSelectionInitParamsState, selectedModuleState } from '@/store/selectedModuleOptions'
import { isNotEmptyArray, isObjectNotEmpty } from '@/util/common-utils'
import { isObjectNotEmpty } from '@/util/common-utils'
import QSelectBox from '@/components/common/select/QSelectBox'
export default function ModuleTabContents({
addRoof,
roofTab,
moduleSelectionData,
moduleCommonSelectionData,
moduleConstructionSelectionData,
setModuleSelectionData,
tempModuleSelectionData,
setTempModuleSelectionData,
}) {
const { getMessage } = useMessage()
const canvasSetting = useRecoilValue(canvasSettingState) //캔버스 기본 셋팅
const [roofMaterial, setRoofMaterial] = useState(addRoof) //지붕재
const [roofMaterial, setRoofMaterial] = useState(addRoof) //지붕재`
const globalPitch = useRecoilValue(pitchSelector) //피치
const globalPitchText = useRecoilValue(pitchTextSelector) //피치 텍스트
@ -54,6 +55,10 @@ export default function ModuleTabContents({
const [isExistData, setIsExistData] = useState(false)
useEffect(() => {
console.log('addRoof', addRoof)
}, [])
//서까래간격 변경
const handleChangeRaftBase = (option) => {
setSelectedRaftBase(option)
@ -89,11 +94,12 @@ export default function ModuleTabContents({
const getModuleOptionsListData = async (params) => {
const optionsList = await getTrestleList(params)
if (optionsList.data.length > 0) {
if (optionsList.data[0].trestleMkrCd && optionsList.data[0].constMthdCd === null) {
setTrestleList(optionsList.data)
if (isExistData) {
setSelectedTrestle({ ...moduleSelectionData.roofConstructions[roofTab].trestle })
setSelectedTrestle({ ...moduleConstructionSelectionData.trestle })
} else {
setConstMthdList([])
setRoofBaseList([])
@ -103,7 +109,7 @@ export default function ModuleTabContents({
if (optionsList.data[0].trestleMkrCd && optionsList.data[0].constMthdCd && optionsList.data[0].roofBaseCd === null) {
setConstMthdList(optionsList.data)
if (isExistData) {
setSelectedConstMthd({ ...moduleSelectionData.roofConstructions[roofTab].trestle })
setSelectedConstMthd({ ...moduleConstructionSelectionData.trestle })
} else {
setRoofBaseList([])
}
@ -112,7 +118,7 @@ export default function ModuleTabContents({
if (optionsList.data[0].trestleMkrCd && optionsList.data[0].constMthdCd && optionsList.data[0].roofBaseCd) {
setRoofBaseList(optionsList.data)
if (isExistData) {
setSelectedRoofBase({ ...moduleSelectionData.roofConstructions[roofTab].trestle })
setSelectedRoofBase({ ...moduleConstructionSelectionData.trestle })
}
}
}
@ -139,8 +145,6 @@ export default function ModuleTabContents({
constructionRef.current[index].classList.remove('white')
constructionRef.current[index].classList.add('blue')
debugger
const selectedConstruction = constructionList[index]
selectedConstruction.roofIndex = roofTab
selectedConstruction.setupCover = false //처마력바 설치 여부
@ -197,8 +201,8 @@ export default function ModuleTabContents({
}, [selectedRoofBase])
useEffect(() => {
if (isExistData) {
const selectedIndex = moduleSelectionData.roofConstructions[roofTab].construction.selectedIndex
if (isExistData && constructionList.length > 0) {
const selectedIndex = moduleConstructionSelectionData.construction.selectedIndex
handleConstruction(selectedIndex)
}
}, [constructionList])
@ -227,9 +231,11 @@ export default function ModuleTabContents({
setTrestleParams({ moduleTpCd: moduleSelectionInitParams.moduleTpCd, roofMatlCd: addRoof.roofMatlCd, raftBaseCd: addRoof.raftBaseCd })
setConstructionList([])
if (isObjectNotEmpty(moduleSelectionData.roofConstructions[roofTab])) {
setConstructionParams({ ...moduleSelectionData.roofConstructions[roofTab].trestle, constMthdCd: '', roofBaseCd: '' })
setRoofBaseParams({ ...moduleSelectionData.roofConstructions[roofTab].trestle, roofBaseCd: '' })
if (isObjectNotEmpty(moduleConstructionSelectionData)) {
setConstructionParams({ ...moduleConstructionSelectionData.trestle, constMthdCd: '', roofBaseCd: '' })
setRoofBaseParams({ ...moduleConstructionSelectionData.trestle, roofBaseCd: '' })
setCvrChecked(moduleConstructionSelectionData.construction.setupCover)
setSnowGdChecked(moduleConstructionSelectionData.construction.setupSnowCover)
setIsExistData(true)
}
}
@ -437,18 +443,24 @@ export default function ModuleTabContents({
</div>
<div className="grid-check-form">
<div className="d-check-box pop">
<input type="checkbox" id="ch01" disabled={cvrYn === 'N' ? true : false} checked={cvrChecked} onChange={handleCvrChecked} />
<label htmlFor="ch01">{getMessage('modal.module.basic.setting.module.eaves.bar.fitting')}</label>
<input
type="checkbox"
id={`ch01_${roofTab}`}
disabled={cvrYn === 'N' ? true : false}
checked={cvrChecked}
onChange={handleCvrChecked}
/>
<label htmlFor={`ch01_${roofTab}`}>{getMessage('modal.module.basic.setting.module.eaves.bar.fitting')}</label>
</div>
<div className="d-check-box pop">
<input
type="checkbox"
id="ch02"
id={`ch02_${roofTab}`}
disabled={snowGdPossYn === 'N' ? true : false}
checked={snowGdChecked}
onChange={handleSnowGdChecked}
/>
<label htmlFor="ch02">{getMessage('modal.module.basic.setting.module.blind.metal.fitting')}</label>
<label htmlFor={`ch02_${roofTab}`}>{getMessage('modal.module.basic.setting.module.blind.metal.fitting')}</label>
</div>
</div>
</div>

184
src/hooks/module/useModulePlace.js Normal file
View File

@ -0,0 +1,184 @@
import { useRecoilState, useRecoilValue } from 'recoil'
import { useContext, useEffect, useState } from 'react'
import { GlobalDataContext } from '@/app/GlobalDataProvider'
import { useMasterController } from '@/hooks/common/useMasterController'
import { useCommonCode } from '@/hooks/common/useCommonCode'
import { selectedModuleState, moduleSelectionInitParamsState } from '@/store/selectedModuleOptions'
import { pitchSelector } from '@/store/canvasAtom'
export function useModuleSelection(props) {
const { managementState, setManagementState, managementStateLoaded } = useContext(GlobalDataContext)
const globalPitch = useRecoilValue(pitchSelector) //피치
const [roughnessCodes, setRoughnessCodes] = useState([]) //면조도 목록
const [windSpeedCodes, setWindSpeedCodes] = useState([]) //기준풍속 목록
const [moduleList, setModuleList] = useState([{}]) //모듈 목록
const [selectedModules, setSelectedModules] = useRecoilState(selectedModuleState) //선택된 모듈
const [selectedSurfaceType, setSelectedSurfaceType] = useState({}) //선택된 면조도
const [installHeight, setInstallHeight] = useState('0') //설치 높이
const [standardWindSpeed, setStandardWindSpeed] = useState({}) //기준풍속
const [verticalSnowCover, setVerticalSnowCover] = useState('0') //수직적설량
const [moduleSelectionInitParams, setModuleSelectionInitParams] = useRecoilState(moduleSelectionInitParamsState) //모듈 기본 데이터 ex) 면조도, 높이등등
const { getModuleTypeItemList } = useMasterController()
const { findCommonCode } = useCommonCode()
//탭별 파라메터 초기화
useEffect(() => {
setInstallHeight(managementState?.installHeight)
setStandardWindSpeed(managementState?.standardWindSpeedId)
setVerticalSnowCover(managementState?.verticalSnowCover)
setSelectedSurfaceType(managementState?.surfaceType)
const initParams = {
illuminationTp: managementState?.surfaceTypeValue, //면조도
instHt: managementState?.installHeight, //설치높이
stdWindSpeed: managementState?.standardWindSpeedId, //기준풍속
stdSnowLd: managementState?.verticalSnowCover, //기준적설량
inclCd: globalPitch,
}
setModuleSelectionInitParams(initParams)
}, [managementState])
useEffect(() => {
// 113700 면조도
const roughnessCodeList = findCommonCode('113700')
roughnessCodeList.forEach((obj) => {
obj.name = obj.clCodeNm
obj.id = obj.clCode
})
setRoughnessCodes(roughnessCodeList)
// 202000 풍속
const windCodeList = findCommonCode('202000')
windCodeList.forEach((obj) => {
obj.name = obj.clCodeNm
obj.id = obj.clCode
})
setWindSpeedCodes(windCodeList)
//지붕재 선택
const roofsIds = props.addedRoofs.filter((obj) => obj.roofMatlCd).map((obj) => obj.roofMatlCd)
if (roofsIds.length === 0) {
return
}
//새로고침시 데이터 날아가는거 방지
if (!managementState) {
setManagementState(managementStateLoaded)
}
getModuleData(roofsIds)
}, [])
const getModuleData = async (roofsIds) => {
const list = await getModuleTypeItemList(roofsIds)
//selectbox에 이름을 넣는다
list.data.forEach((item) => {
item.name = item.itemNm
})
//셀렉트박스 데이터 초기화
setModuleList(list.data)
}
const handleChangeModule = (option) => {
//선택된 모듈
setSelectedModules(option) //선택값 저장
//init 데이터에 선택된 모듈 추가
setModuleSelectionInitParams({
...moduleSelectionInitParams,
moduleTpCd: option.itemTp,
})
}
const handleChangeSurfaceType = (option) => {
setModuleSelectionInitParams({
...moduleSelectionInitParams,
illuminationTp: option.clCode,
})
}
const handleChangeWindSpeed = (option) => {
setModuleSelectionInitParams({
...moduleSelectionInitParams,
surfaceType: option.clCode,
})
}
const handleChangeInstallHeight = (option) => {
setInstallHeight(option)
setModuleSelectionInitParams({
...moduleSelectionInitParams,
instHt: option,
})
}
const handleChangeVerticalSnowCover = (option) => {
setVerticalSnowCover(option)
setModuleSelectionInitParams({
...moduleSelectionInitParams,
stdSnowLd: option,
})
}
useEffect(() => {
console.log('installHeight', installHeight)
}, [installHeight])
useEffect(() => {
console.log('verticalSnowCover', verticalSnowCover)
}, [verticalSnowCover])
//TODO: 설치높이, 기준적설량 debounce 적용해서 추가해야됨
// useEffect(() => {
// getConstructionListData(constructionListParams)
// }, [constructionListParams])
// const getConstructionListData = async (params) => {
// if (params.trestleMkrCd && params.constMthdCd && params.roofBaseCd) {
// const optionsList = await getConstructionList(params)
// console.log('optionsList', optionsList)
// setConstructionList(optionsList.data)
// }
// }
//state 배열에 데이터 추가 함수
// const addRoofTabParams = (key, value, excludeArray = []) => {
// const index = roofTabParams.findIndex((obj) => obj.roofTab === roofTab)
// if (index !== -1) {
// roofTabParams[index][key] = value
// if (excludeArray.length > 0) {
// excludeArray.forEach((exclude) => {
// roofTabParams[index][exclude] = ''
// })
// }
// setRoofTabParams((prev) => [...prev.slice(0, index), roofTabParams[index], ...prev.slice(index + 1)])
// }
// }
return {
moduleSelectionInitParams,
selectedModules,
roughnessCodes,
windSpeedCodes,
managementState,
moduleList,
selectedSurfaceType,
installHeight,
standardWindSpeed,
verticalSnowCover,
handleChangeModule,
handleChangeSurfaceType,
handleChangeWindSpeed,
handleChangeInstallHeight,
handleChangeVerticalSnowCover,
}
}

25
src/hooks/module/useModuleSelection.js
View File

@ -1,16 +1,14 @@
import { useRecoilState, useRecoilValue } from 'recoil'
import { useContext, useEffect, useReducer, useState, useRef } from 'react'
import { useContext, useEffect, useState } from 'react'
import { GlobalDataContext } from '@/app/GlobalDataProvider'
import { useMasterController } from '@/hooks/common/useMasterController'
import { useCommonCode } from '@/hooks/common/useCommonCode'
import { selectedModuleState, moduleSelectionInitParamsState } from '@/store/selectedModuleOptions'
import { pitchSelector } from '@/store/canvasAtom'
import { useDebounceValue } from 'usehooks-ts'
export function useModuleSelection(props) {
const { managementState, setManagementState, managementStateLoaded } = useContext(GlobalDataContext)
const globalPitch = useRecoilValue(pitchSelector) //피치
const [roughnessCodes, setRoughnessCodes] = useState([]) //면조도 목록
@ -20,7 +18,7 @@ export function useModuleSelection(props) {
const [selectedModules, setSelectedModules] = useRecoilState(selectedModuleState) //선택된 모듈
const [selectedSurfaceType, setSelectedSurfaceType] = useState({}) //선택된 면조도
const [installHeight, setInstallHeight] = useState('0') //설치 높이
const [standardWindSpeed, setStandardWindSpeed] = useState('0') //기준풍속
const [standardWindSpeed, setStandardWindSpeed] = useState({}) //기준풍속
const [verticalSnowCover, setVerticalSnowCover] = useState('0') //수직적설량
const [moduleSelectionInitParams, setModuleSelectionInitParams] = useRecoilState(moduleSelectionInitParamsState) //모듈 기본 데이터 ex) 면조도, 높이등등
@ -46,11 +44,6 @@ export function useModuleSelection(props) {
}, [managementState])
useEffect(() => {
//새로고침시 데이터 날아가는거 방지
if (!managementState) {
setManagementState(managementStateLoaded)
}
// 113700 면조도
const roughnessCodeList = findCommonCode('113700')
roughnessCodeList.forEach((obj) => {
@ -73,6 +66,12 @@ export function useModuleSelection(props) {
if (roofsIds.length === 0) {
return
}
//새로고침시 데이터 날아가는거 방지
if (!managementState) {
setManagementState(managementStateLoaded)
}
getModuleData(roofsIds)
}, [])
@ -129,6 +128,14 @@ export function useModuleSelection(props) {
})
}
useEffect(() => {
console.log('installHeight', installHeight)
}, [installHeight])
useEffect(() => {
console.log('verticalSnowCover', verticalSnowCover)
}, [verticalSnowCover])
//TODO: 설치높이, 기준적설량 debounce 적용해서 추가해야됨
// useEffect(() => {