모듈 탭 컨텐트 영역 작업중

This commit is contained in:
lelalela 2025-01-17 10:13:00 +09:00
parent 461709f10d
commit 87b480dba4
8 changed files with 73 additions and 57 deletions

View File

@ -40,12 +40,18 @@ export default function Module({ setTabNum }) {
const [moduleSelectionData, setModuleSelectionData] = useRecoilState(moduleSelectionDataState) //
const [moduleSelectionDataPlanList, setModuleSelectionDataPlanList] = useRecoilState(moduleSelectionDataPlanListState)
const [currentCanvasPlan, setCurrentCanvasPlan] = useRecoilState(currentCanvasPlanState)
const currentCanvasPlan = useRecoilValue(currentCanvasPlanState)
const [tempModuleSelectionData, setTempModuleSelectionData] = useReducer((prevState, nextState) => {
return { ...prevState, ...nextState }
}, moduleSelectionData)
useEffect(() => {
if (moduleSelectionDataPlanList) {
setModuleSelectionData(moduleSelectionDataPlanList[currentCanvasPlan.id])
}
}, [])
useEffect(() => {
handleChangeInstallHeight(debouncedInstallHeight)
}, [debouncedInstallHeight])
@ -72,16 +78,6 @@ export default function Module({ setTabNum }) {
rows: [],
}
useEffect(() => {
console.log('currentCanvasPlan', currentCanvasPlan)
}, [])
useEffect(() => {}, [roofTab])
useEffect(() => {
setModuleSelectionDataPlanList({ ...moduleSelectionDataPlanList, [currentCanvasPlan.id]: moduleSelectionData })
}, [moduleSelectionData])
const handleRoofTab = (tab) => {
setRoofTab(tab)
}
@ -242,11 +238,12 @@ export default function Module({ setTabNum }) {
index={index}
addRoof={roof}
roofTab={index}
moduleConstructionSelectionData={moduleSelectionData.roofConstructions[index]}
setModuleSelectionData={setModuleSelectionData}
moduleConstructionSelectionData={moduleSelectionData?.roofConstructions[index]}
tempModuleSelectionData={tempModuleSelectionData}
setTempModuleSelectionData={setTempModuleSelectionData}
selectedModule={selectedModules}
moduleSelectionDataPlanList={moduleSelectionDataPlanList}
setModuleSelectionDataPlanList={setModuleSelectionDataPlanList}
/>
</div>
))}

View File

@ -1,6 +1,6 @@
import { useEffect, useState, useRef } from 'react'
import { useRecoilValue } from 'recoil'
import { pitchTextSelector } from '@/store/canvasAtom'
import { currentCanvasPlanState, pitchTextSelector } from '@/store/canvasAtom'
import { useMessage } from '@/hooks/useMessage'
import { useMasterController } from '@/hooks/common/useMasterController'
import { useCommonCode } from '@/hooks/common/useCommonCode'
@ -12,14 +12,16 @@ export default function ModuleTabContents({
addRoof,
roofTab,
moduleConstructionSelectionData,
setModuleSelectionData,
tempModuleSelectionData,
setTempModuleSelectionData,
selectedModule,
moduleSelectionDataPlanList,
setModuleSelectionDataPlanList,
}) {
const { getMessage } = useMessage()
const [roofMaterial, setRoofMaterial] = useState(addRoof) //`
const globalPitchText = useRecoilValue(pitchTextSelector) //
const currentCanvasPlan = useRecoilValue(currentCanvasPlanState)
const { findCommonCode } = useCommonCode()
const [raftCodes, setRaftCodes] = useState([]) //
@ -162,6 +164,8 @@ export default function ModuleTabContents({
}
useEffect(() => {
console.log('tempModuleSelectionData', tempModuleSelectionData)
if (isObjectNotEmpty(selectedRoofBase) && isObjectNotEmpty(selectedConstruction)) {
const newRoofConstructions = {
roofIndex: roofTab,
@ -169,6 +173,7 @@ export default function ModuleTabContents({
trestle: selectedRoofBase,
construction: selectedConstruction,
}
const index = tempModuleSelectionData.roofConstructions.findIndex((obj) => obj.roofIndex === roofTab)
if (index > -1) {
@ -241,6 +246,7 @@ export default function ModuleTabContents({
if (isModuleLoaded) {
setTrestleParams({ moduleTpCd: moduleSelectionInitParams.moduleTpCd, roofMatlCd: addRoof.roofMatlCd, raftBaseCd: addRoof.raftBaseCd })
setConstructionList([])
setTempModuleSelectionData({ common: moduleSelectionInitParams, module: selectedModule })
if (isObjectNotEmpty(moduleConstructionSelectionData)) {
//
@ -249,11 +255,11 @@ export default function ModuleTabContents({
setCvrChecked(moduleConstructionSelectionData.construction.setupCover)
setSnowGdChecked(moduleConstructionSelectionData.construction.setupSnowCover)
setIsExistData(true)
setTempModuleSelectionData({ roofConstructions: [{ ...moduleConstructionSelectionData }] })
}
}
}
setTempModuleSelectionData({ common: moduleSelectionInitParams, module: selectedModule })
}, [moduleSelectionInitParams])
useEffect(() => {
@ -282,7 +288,8 @@ export default function ModuleTabContents({
useEffect(() => {
if (isObjectNotEmpty(tempModuleSelectionData)) {
setModuleSelectionData(tempModuleSelectionData)
setModuleSelectionDataPlanList({ ...moduleSelectionDataPlanList, [currentCanvasPlan.id]: tempModuleSelectionData })
// setModuleSelectionData(tempModuleSelectionData)
}
}, [tempModuleSelectionData])

View File

@ -1,15 +1,16 @@
import { forwardRef, useEffect, useState } from 'react'
import { useMessage } from '@/hooks/useMessage'
import { useModuleBasicSetting } from '@/hooks/module/useModuleBasicSetting'
import { checkedModuleState } from '@/store/canvasAtom'
import { useRecoilValue, useRecoilState, useSetRecoilState } from 'recoil'
import { selectedModuleState, moduleSelectionDataState } from '@/store/selectedModuleOptions'
import { checkedModuleState, currentCanvasPlanState } from '@/store/canvasAtom'
import { useRecoilValue, useSetRecoilState } from 'recoil'
import { moduleSelectionDataPlanListState } from '@/store/selectedModuleOptions'
import { useModulePlace } from '@/hooks/module/useModulePlace'
const Placement = forwardRef((props, refs) => {
const { getMessage } = useMessage()
const [isChidori, setIsChidori] = useState(false)
const [isChidoriNotAble, setIsChidoriNotAble] = useState(false)
const currentCanvasPlan = useRecoilValue(currentCanvasPlanState)
const [setupLocation, setSetupLocation] = useState('center')
const [isMaxSetup, setIsMaxSetup] = useState('false')
@ -19,16 +20,18 @@ const Placement = forwardRef((props, refs) => {
const { selectedModules } = useModulePlace()
const setCheckedModules = useSetRecoilState(checkedModuleState)
const moduleSelectionData = useRecoilValue(moduleSelectionDataState)
const moduleSelectionDataPlanList = useRecoilValue(moduleSelectionDataPlanListState)
//
useEffect(() => {
makeModuleInstArea()
//1
const isChidroriValue = moduleSelectionData.roofConstructions.some((item) => item.construction.plvrYn === 'N')
if (isChidroriValue) {
setIsChidoriNotAble(true)
if (moduleSelectionDataPlanList) {
//1
const isChidroriValue = moduleSelectionDataPlanList[currentCanvasPlan.id].roofConstructions.some((item) => item.construction.plvrYn === 'N')
if (isChidroriValue) {
setIsChidoriNotAble(true)
}
}
}, [])

View File

@ -54,9 +54,9 @@ export function useMasterController() {
*/
const getTrestleList = async (params) => {
const paramString = getQueryString(params)
console.log('🚀🚀 ~ getTrestleList ~ paramString:', paramString)
// console.log('🚀🚀 ~ getTrestleList ~ paramString:', paramString)
return await get({ url: '/api/v1/master/getTrestleList' + paramString }).then((res) => {
console.log('🚀🚀 ~ getTrestleList ~ res:', res)
// console.log('🚀🚀 ~ getTrestleList ~ res:', res)
return res
})
}
@ -80,9 +80,9 @@ export function useMasterController() {
*/
const getConstructionList = async (params) => {
const paramString = getQueryString(params)
console.log('🚀🚀 ~ getConstructionList ~ paramString:', paramString)
// console.log('🚀🚀 ~ getConstructionList ~ paramString:', paramString)
return await get({ url: '/api/v1/master/getConstructionList' + paramString }).then((res) => {
console.log('🚀🚀 ~ getConstructionList ~ res:', res)
// console.log('🚀🚀 ~ getConstructionList ~ res:', res)
return res
})
}

View File

@ -389,6 +389,7 @@ export function useModule() {
.filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE && obj.id === activeModule.surfaceId)[0]
let isWarning = false
canvas.discardActiveObject()
moduleSetupSurface.set({ modules: otherModules })
canvas.remove(...columnModules)
canvas.renderAll()
@ -503,6 +504,7 @@ export function useModule() {
let isWarning = false
canvas.discardActiveObject()
moduleSetupSurface.set({ modules: otherModules })
canvas.remove(...rowModules)
canvas.renderAll()
@ -852,8 +854,12 @@ export function useModule() {
const modulesRemove = () => {
const activeModule = canvas.getObjects().filter((obj) => canvas.getActiveObjects()[0].id === obj.id)[0]
const modules = canvas.getObjects().filter((obj) => obj.surfaceId === activeModule.surfaceId && obj.name === POLYGON_TYPE.MODULE)
canvas.remove(...modules)
const modules = canvas
.getObjects()
.filter((obj) => obj.surfaceId === activeModule.surfaceId && obj.name === POLYGON_TYPE.MODULE && activeModule.id !== obj.id)
const surface = canvas.getObjects().filter((obj) => obj.id === activeModule.surfaceId && obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE)[0]
surface.set({ modules: modules })
canvas.remove(activeModule)
canvas.renderAll()
}

View File

@ -698,6 +698,7 @@ export function useModuleBasicSetting() {
checkedModule.forEach((module, index) => {
const { width, height } = getModuleWidthHeight(maxLengthLine, moduleSetupSurface, module)
const flowLines = getFlowLines(moduleSetupSurface, module)
//육지붕이 아닐때만 넣는다 육지붕일땐 클릭 이벤트에 별도로 넣어놓음
let startPoint = flowLines.bottom

View File

@ -1,39 +1,41 @@
import { useEffect, useState } from 'react'
import { useRecoilState, useRecoilValue } from 'recoil'
import { moduleSelectionDataState, selectedModuleState } from '@/store/selectedModuleOptions'
import { moduleSelectionDataPlanListState, selectedModuleState } from '@/store/selectedModuleOptions'
import { useMasterController } from '@/hooks/common/useMasterController'
import { canvasState } from '@/store/canvasAtom'
import { canvasState, currentCanvasPlanState } from '@/store/canvasAtom'
export function useModulePlace() {
const canvas = useRecoilValue(canvasState)
const moduleSelectionData = useRecoilValue(moduleSelectionDataState) //다음으로 넘어가는 최종 데이터
const moduleSelectionDataPlanList = useRecoilValue(moduleSelectionDataPlanListState) //다음으로 넘어가는 최종 데이터
const currentCanvasPlan = useRecoilValue(currentCanvasPlanState)
const [trestleDetailParams, setTrestleDetailParams] = useState([])
const [trestleDetailList, setTrestleDetailList] = useState([])
const selectedModules = useRecoilValue(selectedModuleState)
const { getTrestleDetailList } = useMasterController()
useEffect(() => {
const common = moduleSelectionData.common
const roofConstructions = moduleSelectionData.roofConstructions
if (moduleSelectionDataPlanList) {
const common = moduleSelectionDataPlanList[currentCanvasPlan.id].common
const roofConstructions = moduleSelectionDataPlanList[currentCanvasPlan.id].roofConstructions
const listParams = roofConstructions.map((item) => {
return {
...common,
moduleTpCd: selectedModules.itemTp,
roofMatlCd: item.trestle.roofMatlCd,
trestleMkrCd: item.trestle.trestleMkrCd,
constMthdCd: item.trestle.constMthdCd,
roofBaseCd: item.trestle.roofBaseCd,
constTp: item.construction.constTp,
mixMatlNo: selectedModules.mixMatlNo,
roofPitch: selectedModules.roofPchBase ? selectedModules.roofPchBase : null,
inclCd: String(item.addRoof.pitch),
roofIndex: item.addRoof.index,
}
})
setTrestleDetailParams(listParams)
}, [moduleSelectionData])
const listParams = roofConstructions.map((item) => {
return {
...common,
moduleTpCd: selectedModules.itemTp,
roofMatlCd: item.trestle.roofMatlCd,
trestleMkrCd: item.trestle.trestleMkrCd,
constMthdCd: item.trestle.constMthdCd,
roofBaseCd: item.trestle.roofBaseCd,
constTp: item.construction.constTp,
mixMatlNo: selectedModules.mixMatlNo,
roofPitch: selectedModules.roofPchBase ? selectedModules.roofPchBase : null,
inclCd: String(item.addRoof.pitch),
roofIndex: item.addRoof.index,
}
})
setTrestleDetailParams(listParams)
}
}, [moduleSelectionDataPlanList])
const getTrestleDetailListData = async () => {
const trestleDetailList = await getTrestleDetailList(trestleDetailParams)

View File

@ -67,7 +67,7 @@ export function useContextMenu() {
const commonTextFont = useRecoilValue(fontSelector('commonText'))
const { settingsData, setSettingsDataSave } = useCanvasSetting()
const { swalFire } = useSwal()
const { alignModule } = useModule()
const { alignModule, modulesRemove } = useModule()
const { removeRoofMaterial, removeAllRoofMaterial } = useRoofFn()
const currentMenuSetting = () => {
@ -656,7 +656,7 @@ export function useContextMenu() {
{
id: 'remove',
name: getMessage('contextmenu.remove'),
fn: () => deleteObject(),
fn: () => modulesRemove(),
},
{
id: 'move',