From 4dbf59b7a9ab5160c35aca0bedff9fc6332d75de Mon Sep 17 00:00:00 2001 From: changkyu choi Date: Fri, 14 Feb 2025 17:07:53 +0900 Subject: [PATCH] =?UTF-8?q?=EB=B0=B0=EC=B9=98=EB=A9=B4=EC=B4=88=EA=B8=B0?= =?UTF-8?q?=EC=84=A4=EC=A0=95=20plan=5Fno=20=EC=B6=94=EA=B0=80=20=EC=A0=81?= =?UTF-8?q?=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/floor-plan/CanvasMenu.jsx | 5 + src/components/floor-plan/FloorPlan.jsx | 19 +- .../circuitTrestle/CircuitTrestleSetting.jsx | 3 +- .../placementShape/PlacementShapeSetting.jsx | 55 ++- src/hooks/option/useCanvasSetting.js | 414 +++++++++++------- .../roofcover/useRoofAllocationSetting.js | 102 ++--- src/hooks/usePlan.js | 28 ++ 7 files changed, 397 insertions(+), 229 deletions(-) diff --git a/src/components/floor-plan/CanvasMenu.jsx b/src/components/floor-plan/CanvasMenu.jsx index 58ec721e..07e2c1ec 100644 --- a/src/components/floor-plan/CanvasMenu.jsx +++ b/src/components/floor-plan/CanvasMenu.jsx @@ -329,7 +329,12 @@ export default function CanvasMenu(props) { x: 50, y: 180, }, + planNo: selectedPlan?.planNo ? selectedPlan.planNo : pid, + openPiont: 'canvasMenus', } + /** + * 배치면 초기설정 팝업 열기 + */ const onClickPlacementInitialMenu = () => { addPopup(placementInitialId, 1, ) } diff --git a/src/components/floor-plan/FloorPlan.jsx b/src/components/floor-plan/FloorPlan.jsx index 6adae9a8..054f1e00 100644 --- a/src/components/floor-plan/FloorPlan.jsx +++ b/src/components/floor-plan/FloorPlan.jsx @@ -19,7 +19,7 @@ export default function FloorPlan({ children }) { const { closeAll } = usePopup() const { menuNumber, setMenuNumber } = useCanvasMenu() - const { fetchSettings, fetchBasicSettings } = useCanvasSetting() + const { fetchSettings } = useCanvasSetting() const resetCurrentMenu = useResetRecoilState(currentMenuState) useEffect(() => { return () => { @@ -27,7 +27,9 @@ export default function FloorPlan({ children }) { } }, []) - // URL 파라미터에서 objectNo 설정 + /** + * URL 파라미터에서 objectNo 설정 + */ useEffect(() => { if (!objectNo) { notFound() @@ -35,15 +37,16 @@ export default function FloorPlan({ children }) { setCurrentObjectNo(objectNo) }, [objectNo, setCurrentObjectNo]) - // 설정 데이터 fetch + /** + * 설정 데이터 fetch + */ useEffect(() => { - if (!correntObjectNo) return // correntObjectNo가 없으면 실행하지 않음 + /** + * correntObjectNo가 없으면 실행하지 않음 + */ + if (!correntObjectNo) return - if (menuNumber === null) { - //setMenuNumber(1) - } fetchSettings() - fetchBasicSettings() return () => { closeAll() diff --git a/src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx b/src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx index 2c904ddd..0df59150 100644 --- a/src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx +++ b/src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx @@ -475,8 +475,9 @@ export default function CircuitTrestleSetting({ id }) { type: 'alert', }) return + } else { + setTabNum(2) } - setTabNum(2) } // 닫기 버튼 클릭 시 처리하는 함수 추가 diff --git a/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx b/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx index 046a89a9..0e127c74 100644 --- a/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx +++ b/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx @@ -20,7 +20,7 @@ export const ROOF_MATERIAL_LAYOUT = { PARALLEL: 'P', STAIRS: 'S', } -export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, setShowPlaceShapeModal }) { +export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, planNo, openPiont }) { const [showSizeGuideModal, setShowSizeGuidModal] = useState(false) const [showMaterialGuideModal, setShowMaterialGuidModal] = useState(false) const { closePopup } = usePopup() @@ -28,7 +28,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set const roofMaterials = useRecoilValue(roofMaterialsAtom) const globalLocale = useRecoilValue(globalLocaleStore) - const { basicSetting, setBasicSettings, basicSettingSave } = useCanvasSetting() + const { basicSetting, setBasicSettings, fetchBasicSettings, basicSettingSave } = useCanvasSetting() const [addedRoofs, setAddedRoofs] = useRecoilState(addedRoofsState) const { findCommonCode } = useCommonCode() const [raftCodes, setRaftCodes] = useState([]) // 서까래 정보 @@ -42,19 +42,26 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set hajebichi: useRef(null), } - //치수 입력방법(복시도입력/실측값입력/육지붕) + /** + * 치수 입력방법(복시도입력/실측값입력/육지붕) + */ const roofSizeSetArray = [ { id: 'ra01', name: 'roofSizeSet', value: '1', message: 'modal.placement.initial.setting.size.roof' }, { id: 'ra02', name: 'roofSizeSet', value: '2', message: 'modal.placement.initial.setting.size.actual' }, { id: 'ra03', name: 'roofSizeSet', value: '3', message: 'modal.placement.initial.setting.size.none.pitch' }, ] - //지붕각도 설정(경사/각도) + /** + * 지붕각도 설정(경사/각도) + */ const roofAngleSetArray = [ { id: 'ra04', name: 'roofAngleSet', value: 'slope', message: 'modal.placement.initial.setting.roof.pitch' }, { id: 'ra05', name: 'roofAngleSet', value: 'flat', message: 'modal.placement.initial.setting.roof.angle' }, ] + /** + * 지붕재 초기값 + */ const defaultRoofSettings = { roofSizeSet: '1', // 기본 치수 입력 방법 roofAngleSet: 'slope', // 기본 지붕 각도 설정 @@ -86,14 +93,24 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set width: '265', } + useEffect(() => { + console.log('🚀 ~ useEffect ~ planNo:', planNo, openPiont) + /** + * 메뉴에서 배치면초기설정 선택 시 조회 + */ + if (openPiont && openPiont === 'canvasMenus') fetchBasicSettings(planNo, openPiont) + }, []) + useEffect(() => { if (addedRoofs.length > 0) { const raftCodeList = findCommonCode('203800') setRaftCodes(raftCodeList) - // 데이터 설정 확인 후 데이터가 없으면 기본 데이터 설정 + /** + * 데이터 설정 확인 후 데이터가 없으면 기본 데이터 설정 + */ if (addedRoofs.length > 0) { - setCurrentRoof({ ...addedRoofs[0] }) + setCurrentRoof({ ...addedRoofs[0], planNo: basicSetting.planNo }) } else { setCurrentRoof(defaultRoofSettings) } @@ -101,13 +118,14 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set }, [addedRoofs]) useEffect(() => { - //console.log('🚀 ~ fetchBasicSettings ~ currentRoof :', currentRoof) if (!currentRoof) return setBasicSettings({ ...basicSetting, + planNo: Number(currentRoof.planNo), roofSizeSet: String(currentRoof.roofSizeSet), roofAngleSet: currentRoof.roofAngleSet, roofsData: { + planNo: Number(currentRoof.planNo), roofApply: true, roofSeq: 0, roofMatlCd: currentRoof.roofMatlCd, @@ -130,10 +148,15 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set setCurrentRoof({ ...currentRoof, roofAngleSet: value }) } - // Function to update the roofType and corresponding values const handleRoofTypeChange = (value) => { const selectedRoofMaterial = roofMaterials.find((roof) => roof.roofMatlCd === value) - setCurrentRoof({ ...selectedRoofMaterial, index: 0, roofSizeSet: String(currentRoof.roofSizeSet), roofAngleSet: currentRoof.roofAngleSet }) + setCurrentRoof({ + ...selectedRoofMaterial, + index: 0, + planNo: currentRoof.planNo, + roofSizeSet: String(currentRoof.roofSizeSet), + roofAngleSet: currentRoof.roofAngleSet, + }) } const changeInput = (value, e) => { @@ -152,6 +175,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set const handleSaveBtn = () => { const roofInfo = { ...currentRoof, + planNo: basicSetting.planNo, roofCd: roofRef.roofCd.current?.value, width: roofRef.width.current?.value, length: roofRef.length.current?.value, @@ -169,16 +193,19 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set console.log('save Info', { ...basicSetting, selectedRoofMaterial: { - // 선택된 지붕재 정보 roofInfo, }, }) - // 배치면초기설정 저장 + /** + * 배치면초기설정 저장 + */ basicSettingSave({ ...basicSetting, + /** + * 선택된 지붕재 정보 + */ selectedRoofMaterial: { - // 선택된 지붕재 정보 roofInfo, }, }) @@ -239,9 +266,9 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
{currentRoof && roofAngleSetArray.map((item, index) => ( -
+
-
+
{ const tempFetchRoofMaterials = !fetchRoofMaterials - //최초 1회만 실행하도록 처리 + /* 초 1회만 실행하도록 처리 */ setFetchRoofMaterials(tempFetchRoofMaterials) if (tempFetchRoofMaterials) { addRoofMaterials() } }, []) - useEffect(() => { - // 지붕재 select 정보가 존재해야 배치면초기설정 DB 정보 비교 후 지붕재 정보를 가져올 수 있음 - if ( - (!previousObjectNoRef.current && !correntObjectNo && previousObjectNoRef.current !== correntObjectNo) || - (roofMaterials.length !== 0 && JSON.stringify(previousRoofMaterialsRef.current) !== JSON.stringify(roofMaterials)) - ) { - // 1회만 실행 - if (roofMaterials && previousRoofMaterialsYn === 'N') { - if (correntObjectNo) { - fetchBasicSettings() - previousRoofMaterialsYn = 'Y' - } - } - - // 이전 값을 업데이트 - previousObjectNoRef.current = correntObjectNo - previousRoofMaterialsRef.current = roofMaterials + /** + * 지붕재 초기세팅 + */ + const addRoofMaterials = async () => { + if (roofMaterials.length !== 0) { + return } - }, [roofMaterials, correntObjectNo]) + const { data } = await getRoofMaterialList() - //배치면 초기설정 화면이 열리지 않아도 데이터 set 하기 위해서 추가 + const roofLists = data.map((item, idx) => ({ + ...item, + id: item.roofMatlCd, + name: item.roofMatlNm, + selected: idx === 0, + index: idx, + nameJp: item.roofMatlNmJp, + length: item.lenBase && parseInt(item.lenBase), + width: item.widBase && parseInt(item.widBase), + raft: item.raftBase && parseInt(item.raftBase), + layout: ['ROOF_ID_SLATE', 'ROOF_ID_SINGLE'].includes(item.roofMatlCd) ? ROOF_MATERIAL_LAYOUT.STAIRS : ROOF_MATERIAL_LAYOUT.PARALLEL, + hajebichi: item.roofPchBase && parseInt(item.roofPchBase), + pitch: item.pitch ? parseInt(item.pitch) : 4, + angle: item.angle ? parseInt(item.angle) : 21.8, + })) + setRoofMaterials(roofLists) + const selectedRoofMaterial = roofLists[0] + + if (addedRoofs.length === 0) { + const newAddedRoofs = [] + newAddedRoofs.push({ ...selectedRoofMaterial, selected: true, index: 0 }) + setAddedRoofs(newAddedRoofs) + } + setBasicSettings({ ...basicSetting, selectedRoofMaterial: selectedRoofMaterial }) + } + + // // ObjectNo 최초 데이터 설정 확인 + // const previousObjectNoRef = useRef(null) + // // 지붕재 정보 최초 데이터 설정 확인 + // const previousRoofMaterialsRef = useRef(null) + + // useEffect(() => { + // // 지붕재 select 정보가 존재해야 배치면초기설정 DB 정보 비교 후 지붕재 정보를 가져올 수 있음 + // if ( + // (!previousObjectNoRef.current && !correntObjectNo && previousObjectNoRef.current !== correntObjectNo) || + // (roofMaterials.length !== 0 && JSON.stringify(previousRoofMaterialsRef.current) !== JSON.stringify(roofMaterials)) + // ) { + // // 1회만 실행 + // if (roofMaterials && previousRoofMaterialsYn === 'N') { + // if (correntObjectNo) { + // //fetchBasicSettings() + // previousRoofMaterialsYn = 'Y' + // } + // } + + // // 이전 값을 업데이트 + // previousObjectNoRef.current = correntObjectNo + // previousRoofMaterialsRef.current = roofMaterials + // } + // }, [roofMaterials, correntObjectNo]) + + /** + * 배치면 초기설정 화면이 열리지 않아도 데이터 set 하기 위해서 추가 + */ useEffect(() => { if (addedRoofs.length > 0) { const raftCodeList = findCommonCode('203800') @@ -215,39 +260,6 @@ export function useCanvasSetting() { if (settingsDataSave !== undefined) onClickOption2() }, [settingsData]) - //지붕재 초기세팅 - const addRoofMaterials = async () => { - if (roofMaterials.length !== 0) { - return - } - const { data } = await getRoofMaterialList() - - const roofLists = data.map((item, idx) => ({ - ...item, - id: item.roofMatlCd, - name: item.roofMatlNm, - selected: idx === 0, - index: idx, - nameJp: item.roofMatlNmJp, - length: item.lenBase && parseInt(item.lenBase), - width: item.widBase && parseInt(item.widBase), - raft: item.raftBase && parseInt(item.raftBase), - layout: ['ROOF_ID_SLATE', 'ROOF_ID_SINGLE'].includes(item.roofMatlCd) ? ROOF_MATERIAL_LAYOUT.STAIRS : ROOF_MATERIAL_LAYOUT.PARALLEL, - hajebichi: item.roofPchBase && parseInt(item.roofPchBase), - pitch: item.pitch ? parseInt(item.pitch) : 4, - angle: item.angle ? parseInt(item.angle) : 21.8, - })) - setRoofMaterials(roofLists) - const selectedRoofMaterial = roofLists[0] - - if (addedRoofs.length === 0) { - const newAddedRoofs = [] - newAddedRoofs.push({ ...selectedRoofMaterial, selected: true, index: 0 }) - setAddedRoofs(newAddedRoofs) - } - setBasicSettings({ ...basicSetting, selectedRoofMaterial: selectedRoofMaterial }) - } - const getFonts = (itemValue) => { if (!itemValue) return { id: 1, name: 'MS PGothic', value: 'MS PGothic' } const data = [ @@ -319,22 +331,30 @@ export function useCanvasSetting() { } } - // 기본설정(PlacementShapeSetting) 조회 및 초기화 - const fetchBasicSettings = async () => { + /** + * 기본설정(PlacementShapeSetting) 조회 및 초기화 + */ + const fetchBasicSettings = async (planNo, openPiont) => { try { - await get({ url: `/api/canvas-management/canvas-basic-settings/by-object/${correntObjectNo}` }).then((res) => { + await get({ + //url: `/api/canvas-management/canvas-basic-settings/by-object?objectNo=${correntObjectNo}&planNo=${pid}`, + url: `http://localhost:8080/api/canvas-management/canvas-basic-settings/by-object/${correntObjectNo}/${planNo}`, + //url: `/api/canvas-management/canvas-basic-settings/by-object/${correntObjectNo}/${planNo}`, + }).then((res) => { let roofsRow = {} let roofsArray = {} if (res.length > 0) { roofsRow = res.map((item) => { return { + planNo: item.planNo, roofSizeSet: String(item.roofSizeSet), roofAngleSet: item.roofAngleSet, } }) roofsArray = res.map((item) => { return { + planNo: item.planNo, roofApply: item.roofApply, roofSeq: item.roofSeq, roofMatlCd: item.roofMatlCd, @@ -350,6 +370,7 @@ export function useCanvasSetting() { } else { roofsRow = [ { + planNo: planNo, roofSizeSet: '1', roofAngleSet: 'slope', }, @@ -357,6 +378,7 @@ export function useCanvasSetting() { roofsArray = [ { + planNo: planNo, roofApply: true, roofSeq: 0, roofMatlCd: 'ROOF_ID_WA_53A', @@ -370,10 +392,23 @@ export function useCanvasSetting() { }, ] - setMenuNumber(1) + /* 메뉴에서 배치면 초기설정 클릭 시 실행하지 않음 */ + if (openPiont === null) { + /* 배치면 초기설정 미저장 상태이면 화면 열기 */ + const placementInitialProps = { + id: popupId, + pos: { + x: 50, + y: 180, + }, + planNo: planNo, + openPiont: 'useCanvasSetting', + } + addPopup(popupId, 1, ) + } } - // 데이터 설정 + /* 데이터 설정 */ const addRoofs = [] for (let i = 0; i < roofsArray.length; i++) { roofMaterials?.map((material) => { @@ -387,6 +422,7 @@ export function useCanvasSetting() { hajebichi: roofsArray[i].roofHajebichi, raft: roofsArray[i].roofGap, layout: roofsArray[i].roofLayout, + planNo: roofsRow[i].planNo, roofSizeSet: roofsRow[i].roofSizeSet, roofAngleSet: roofsRow[i].roofAngleSet, pitch: roofsArray[i].roofPitch, @@ -399,6 +435,7 @@ export function useCanvasSetting() { setBasicSettings({ ...basicSetting, roofMaterials: addRoofs[0], + planNo: roofsRow[0].planNo, roofSizeSet: roofsRow[0].roofSizeSet, roofAngleSet: roofsRow[0].roofAngleSet, roofsData: roofsArray, @@ -412,15 +449,19 @@ export function useCanvasSetting() { setCanvasSetting({ ...basicSetting }) } - // 기본설정(PlacementShapeSetting) 저장 + /** + * 기본설정(PlacementShapeSetting) 저장 + */ const basicSettingSave = async (params) => { try { const patternData = { objectNo: correntObjectNo, + planNo: Number(params.planNo), roofSizeSet: Number(params.roofSizeSet), roofAngleSet: params.roofAngleSet, roofMaterialsAddList: [ { + planNo: Number(params.planNo), roofApply: true, roofSeq: 0, roofMatlCd: @@ -438,21 +479,20 @@ export function useCanvasSetting() { } //await post({ url: `/api/canvas-management/canvas-basic-settings`, data: patternData }) - await post({ url: `/api/canvas-management/canvas-basic-settings`, data: patternData }).then((res) => { - console.log('🚀 ~ basicSettingSave ~ res :', res) - + await post({ url: `http://localhost:8080/api/canvas-management/canvas-basic-settings`, data: patternData }).then((res) => { + // await post({ url: `/api/canvas-management/canvas-basic-settings`, data: patternData }).then((res) => { swalFire({ text: getMessage(res.returnMessage) }) - + /* 배치면초기설정 조회 */ setBasicSettings({ ...params }) }) - //Recoil 설정 + /* CanvasSetting Recoil 설정 */ setCanvasSetting({ ...basicSetting }) - // 배치면초기설정 조회 - fetchBasicSettings() + /* 배치면초기설정 조회 */ + fetchBasicSettings(params.planNo, null) - // 메뉴 설정 + /* 메뉴 설정 */ if (['2', '3'].includes(basicSetting?.roofSizeSet)) { setMenuNumber(3) setType('surface') @@ -463,16 +503,11 @@ export function useCanvasSetting() { setCurrentMenu(MENU.ROOF_COVERING.EXTERIOR_WALL_LINE) } - //모듈 선택 데이터 초기화 + /* 모듈 선택 데이터 초기화 */ resetModuleSelectionData() - - // 모듈 선택 데이터 초기화 moduleSelectedDataTrigger({ common: {}, module: {}, roofConstructions: [] }) - - // 모듈 선택 데이터 초기화 const isModuleExist = canvas.getObjects().some((obj) => obj.name === POLYGON_TYPE.MODULE) if (!isModuleExist) { - // 모듈 선택 데이터 초기화 resetSelectedModules() } } catch (error) { @@ -480,7 +515,9 @@ export function useCanvasSetting() { } } - // CanvasSetting 조회 및 초기화 + /** + * CanvasSetting 조회 및 초기화 + */ const fetchSettings = async () => { try { const res = await get({ url: `/api/canvas-management/canvas-settings/by-object/${correntObjectNo}` }) @@ -493,16 +530,24 @@ export function useCanvasSetting() { const optionData4 = settingModalSecondOptions.option4.map((item) => ({ ...item, selected: res[item.column] })) const optionData5 = settingModalFirstOptions.dimensionDisplay.map((item) => ({ ...item })) - //흡착점 ON/OFF + /** + * 흡착점 ON/OFF + */ setAdsorptionPointMode({ ...adsorptionPointMode, adsorptionPoint: res.adsorpPoint }) - //치수선 설정 + /** + * 치수선 설정 + */ setDimensionLineSettings({ ...dimensionLineSettings, pixel: res.originPixel, color: res.originColor }) - //도면크기 설정 + /** + * 도면크기 설정 + */ setPlanSizeSettingMode({ ...planSizeSettingMode, originHorizon: res.originHorizon, originVertical: res.originVertical }) - // 데이터 설정 + /** + * 데이터 설정 + */ setSettingModalFirstOptions({ ...settingModalFirstOptions, option1: optionData1, @@ -517,35 +562,45 @@ export function useCanvasSetting() { const fontPatternData = { commonText: { - //문자 글꼴 조회 데이터 + /** + * 문자 글꼴 조회 데이터 + */ fontFamily: getFonts(res.wordFont), fontWeight: getFontStyles(res.wordFontStyle), fontSize: getFontSizes(res.wordFontSize), fontColor: getFontColors(res.wordFontColor), }, flowText: { - //흐름방향 글꼴 조회 데이터 + /** + * 흐름방향 글꼴 조회 데이터 + */ fontFamily: getFonts(res.flowFont), fontWeight: getFontStyles(res.flowFontStyle), fontSize: getFontSizes(res.flowFontSize), fontColor: getFontColors(res.flowFontColor), }, dimensionLineText: { - //치수 글꼴 조회 데이터 + /** + * 치수 글꼴 조회 데이터 + */ fontFamily: getFonts(res.dimensioFont), fontWeight: getFontStyles(res.dimensioFontStyle), fontSize: getFontSizes(res.dimensioFontSize), fontColor: getFontColors(res.dimensioFontColor), }, circuitNumberText: { - //회로번호 글꼴 조회 데이터 + /** + * 회로번호 글꼴 조회 데이터 + */ fontFamily: getFonts(res.circuitNumFont), fontWeight: getFontStyles(res.circuitNumFontStyle), fontSize: getFontSizes(res.circuitNumFontSize), fontColor: getFontColors(res.circuitNumFontColor), }, lengthText: { - //치수선 글꼴 조회 데이터 + /** + * 치수선 글꼴 조회 데이터 + */ fontFamily: getFonts(res.lengthFont), fontWeight: getFontStyles(res.lengthFontStyle), fontSize: getFontSizes(res.lengthFontSize), @@ -553,10 +608,14 @@ export function useCanvasSetting() { }, } - //조회된 글꼴 데이터 set + /** + * 조회된 글꼴 데이터 set + */ setGlobalFont(fontPatternData) - //점/선 그리드 + /** + * 점/선 그리드 + */ const patternData = { INTERVAL: { type: res.gridType, @@ -572,32 +631,48 @@ export function useCanvasSetting() { setDotLineGridSettingState(patternData) //setCurrentSetting(patternData) - //그리드 색 설정 + /** + * 그리드 색 설정 + */ setGridColor(res.gridColor) } else { //조회된 글꼴 데이터가 없는 경우 (데이터 초기화) - //흡착점 ON/OFF + /** + * 흡착점 ON/OFF + */ setAdsorptionPointMode({ ...adsorptionPointMode, adsorptionPoint: false }) - //치수선 설정 + /** + * 치수선 설정 + */ resetDimensionLineSettings() - //도면크기 설정 + /** + * 도면크기 설정 + */ resetPlanSizeSettingMode() - // 데이터 설정 + /** + * 데이터 설정 + */ resetSettingModalFirstOptions() resetSettingModalSecondOptions() - // 데이터 초기화 + /** + * 데이터 초기화 + */ resetGlobalFont() - //점/선 그리드 + /** + * 점/선 그리드 + */ setDotLineGridSettingState({ ...defaultDotLineGridSetting }) //setCurrentSetting({ ...defaultDotLineGridSetting }) - //그리드 색 설정 + /** + * 그리드 색 설정 + */ setGridColor('#FF0000') } @@ -607,9 +682,13 @@ export function useCanvasSetting() { } } - // CanvasSetting 옵션 클릭 후 저장 + /** + * CanvasSetting 옵션 클릭 후 저장 + */ const onClickOption2 = async () => { - // 서버에 전송할 데이터 + /** + * 서버에 전송할 데이터 + */ const dataToSend = { firstOption1: option1.map((item) => ({ column: item.column, @@ -630,9 +709,13 @@ export function useCanvasSetting() { })), } const patternData = { - //견적서 번호 + /** + * 견적서 번호 + */ objectNo: correntObjectNo, - //디스플레이 설정(다중) + /** + * 디스플레이 설정(다중) + */ allocDisplay: dataToSend.firstOption1[0].selected, outlineDisplay: dataToSend.firstOption1[1].selected, gridDisplay: dataToSend.firstOption1[2].selected, @@ -643,60 +726,82 @@ export function useCanvasSetting() { trestleDisplay: dataToSend.firstOption1[7].selected, imageDisplay: dataToSend.firstOption1[8].selected, totalDisplay: dataToSend.firstOption1[9].selected, - //차수 표시(단 건) + /** + * 차수 표시(단 건) + */ corridorDimension: dataToSend.firstOption3[0].selected, realDimension: dataToSend.firstOption3[1].selected, noneDimension: dataToSend.firstOption3[2].selected, - //화면 표시(단 건) + /** + * 화면 표시(단 건) + */ onlyBorder: dataToSend.firstOption2[0].selected, lineHatch: dataToSend.firstOption2[1].selected, allPainted: dataToSend.firstOption2[2].selected, - //흡착범위 설정(단 건) + /** + * 흡착범위 설정(단 건) + */ adsorpRangeSmall: dataToSend.secondOption2[0].selected, adsorpRangeSmallSemi: dataToSend.secondOption2[1].selected, adsorpRangeMedium: dataToSend.secondOption2[2].selected, adsorpRangeLarge: dataToSend.secondOption2[3].selected, - //흡착점 ON/OFF + /** + * 흡착점 ON/OFF + */ adsorpPoint: adsorptionPointMode.adsorptionPoint, //??: adsorptionRange, 사용여부 확인 필요 - //글꼴 설정 + /** + * 글꼴 설정 + */ //문자 글꼴 wordFont: globalFont.commonText.fontFamily?.value ?? 'MS PGothic', wordFontStyle: globalFont.commonText.fontWeight?.value ?? 'normal', wordFontSize: globalFont.commonText.fontSize?.value ?? 16, wordFontColor: globalFont.commonText.fontColor?.value ?? 'black', - //흐름방향 글꼴 + /** + * 흐름방향 글꼴 + */ flowFont: globalFont.flowText.fontFamily?.value ?? 'MS PGothic', flowFontStyle: globalFont.flowText.fontWeight?.value ?? 'normal', flowFontSize: globalFont.flowText.fontSize?.value ?? 16, flowFontColor: globalFont.flowText.fontColor?.value ?? 'black', - //치수 글꼴 + /** + * 치수 글꼴 + */ dimensioFont: globalFont.dimensionLineText.fontFamily?.value ?? 'MS PGothic', dimensioFontStyle: globalFont.dimensionLineText.fontWeight?.value ?? 'normal', dimensioFontSize: globalFont.dimensionLineText.fontSize?.value ?? 16, dimensioFontColor: globalFont.dimensionLineText.fontColor?.value ?? 'black', - //회로번호 글꼴 + /** + * 회로번호 글꼴 + */ circuitNumFont: globalFont.circuitNumberText.fontFamily?.value ?? 'MS PGothic', circuitNumFontStyle: globalFont.circuitNumberText.fontWeight?.value ?? 'normal', circuitNumFontSize: globalFont.circuitNumberText.fontSize?.value ?? 16, circuitNumFontColor: globalFont.circuitNumberText.fontColor?.value ?? 'black', - //치수선 글꼴 + /** + * 치수선 글꼴 + */ lengthFont: globalFont.lengthText.fontFamily?.value ?? 'MS PGothic', lengthFontStyle: globalFont.lengthText.fontWeight?.value ?? 'normal', lengthFontSize: globalFont.lengthText.fontSize?.value ?? 16, lengthFontColor: globalFont.lengthText.fontColor?.value ?? 'black', - //치수선 설정 + /** + * 치수선 설정 + */ originPixel: dimensionLineSettings.pixel, originColor: dimensionLineSettings.color, - //도면크기 설정 + /** + * 도면크기 설정 + */ originHorizon: planSizeSettingMode.originHorizon, originVertical: planSizeSettingMode.originVertical, @@ -713,14 +818,20 @@ export function useCanvasSetting() { console.log('patternData ', patternData) - // HTTP POST 요청 보내기 + /** + * 저장 API 호출 + */ await post({ url: `/api/canvas-management/canvas-settings`, data: patternData }) .then((res) => { //swalFire({ text: getMessage(res.returnMessage) }) - // Canvas 디스플레이 설정 시 해당 옵션 적용 + /** + * Canvas 디스플레이 설정 시 해당 옵션 적용 + */ frontSettings() - // 저장 후 재조회 + /** + * 저장 후 재조회 + */ fetchSettings() }) .catch((error) => { @@ -731,77 +842,80 @@ export function useCanvasSetting() { //setAdsorptionRange(item.range) } - // Canvas 디스플레이 설정 시 해당 옵션 적용 + /** + * Canvas 디스플레이 설정 시 해당 옵션 적용 + */ const frontSettings = async () => { const option1 = settingModalFirstOptions.option1 - // 'allocDisplay' 할당 표시 - // 'outlineDisplay' 외벽선 표시 'outerLine', POLYGON_TYPE.WALL - // 'gridDisplay' 그리드 표시 'lindGrid', 'dotGrid' - // 'lineDisplay' 지붕선 표시 'roof', POLYGON_TYPE.ROOF - // 'wordDisplay' 문자 표시 - // 'circuitNumDisplay' 회로번호 표시 - // 'flowDisplay' 흐름방향 표시 'arrow', 'flowText' - // 'trestleDisplay' 가대 표시 - // 'imageDisplay' 이미지 표시 - // 'totalDisplay' 집계표 표시 + /** + * 'allocDisplay' 할당 표시 + * 'outlineDisplay' 외벽선 표시 'outerLine', POLYGON_TYPE.WALL + * 'gridDisplay' 그리드 표시 'lindGrid', 'dotGrid' + * 'lineDisplay' 지붕선 표시 'roof', POLYGON_TYPE.ROOF + * 'wordDisplay' 문자 표시 + * 'circuitNumDisplay' 회로번호 표시 + * 'flowDisplay' 흐름방향 표시 'arrow', 'flowText' + * 'trestleDisplay' 가대 표시 + * 'imageDisplay' 이미지 표시 + * 'totalDisplay' 집계표 표시 + */ - let optionName //옵션명 - let optionSelected //옵션상태 + /** + * 옵션명 + * 옵션상태 + */ + let optionName + let optionSelected for (let i = 0; i < option1.length; i++) { switch (option1[i].column) { - case 'allocDisplay': //할당 표시 + case 'allocDisplay': optionName = [] break - case 'outlineDisplay': //외벽선 표시 + case 'outlineDisplay': optionName = ['outerLine', POLYGON_TYPE.WALL] break - case 'gridDisplay': //그리드 표시 + case 'gridDisplay': optionName = ['lindGrid', 'dotGrid', 'tempGrid'] break - case 'lineDisplay': //지붕선 표시 + case 'lineDisplay': optionName = ['roof', POLYGON_TYPE.ROOF] break - case 'wordDisplay': //문자 표시 + case 'wordDisplay': optionName = ['commonText'] break - case 'circuitNumDisplay': //회로번호 표시 + case 'circuitNumDisplay': optionName = ['circuitNumber'] break - case 'flowDisplay': //흐름방향 표시 + case 'flowDisplay': optionName = ['arrow', 'flowText'] break - case 'trestleDisplay': //가대 표시 + case 'trestleDisplay': optionName = ['rack', 'smartRack', 'bracket', 'eaveBar', 'halfEaveBar'] break - case 'imageDisplay': //이미지 표시 + case 'imageDisplay': optionName = ['9'] break - case 'totalDisplay': //집계표 표시 - // 작업할 필요 없음 + case 'totalDisplay': + /** + * 작업할 필요 없음 + */ optionName = [] break } - // 표시 선택 상태(true/false) + /** + * 표시 선택 상태(true/false) + */ optionSelected = option1[i].selected - //canvas.getObjects() >> canvasObjects canvasObjects .filter((obj) => optionName.includes(obj.name)) - //.filter((obj) => obj.name === optionName) .forEach((obj) => { obj.set({ visible: optionSelected }) - //obj.set({ visible: !obj.visible }) }) canvas?.renderAll() - - // console.log( - // 'optionName', - // optionName, - // canvas.getObjects().filter((obj) => optionName.includes(obj.name)), - // ) } } diff --git a/src/hooks/roofcover/useRoofAllocationSetting.js b/src/hooks/roofcover/useRoofAllocationSetting.js index 34ec3f13..f54ac44d 100644 --- a/src/hooks/roofcover/useRoofAllocationSetting.js +++ b/src/hooks/roofcover/useRoofAllocationSetting.js @@ -100,19 +100,26 @@ export function useRoofAllocationSetting(id) { closePopup(id) } - fetchBasicSettings() + fetchBasicSettings(basicSetting.planNo, null) }, []) - // 지붕면 할당 조회 및 초기화 - const fetchBasicSettings = async () => { + /** + * 지붕면 할당 조회 및 초기화 + */ + const fetchBasicSettings = async (planNo, openPiont) => { try { - await get({ url: `/api/canvas-management/canvas-basic-settings/by-object/${correntObjectNo}` }).then((res) => { + await get({ + //url: `/api/canvas-management/canvas-basic-settings/by-object/objectNo=${correntObjectNo}/planNo=${currentCanvasPlan.planNo}`, + url: `http://localhost:8080/api/canvas-management/canvas-basic-settings/by-object/${correntObjectNo}/${planNo}`, + // url: `/api/canvas-management/canvas-basic-settings/by-object/${correntObjectNo}/${planNo}`, + }).then((res) => { console.log('🚀 ~ useRoofAllocationSetting ~ fetchBasicSettings ~ res >>>>>>>>>>>>>>>>>>>>> :', res) let roofsArray = {} if (res.length > 0) { roofsArray = res.map((item) => { return { + planNo: item.planNo, roofApply: item.roofApply, roofSeq: item.roofSeq, roofMatlCd: item.roofMatlCd, @@ -128,6 +135,7 @@ export function useRoofAllocationSetting(id) { } else { roofsArray = [ { + planNo: planNo, roofApply: true, roofSeq: 0, roofMatlCd: 'ROOF_ID_WA_53A', @@ -142,11 +150,9 @@ export function useRoofAllocationSetting(id) { ] } - console.log('fetchBasicSettings roofsArray', roofsArray) - - console.log(roofsArray) - - // 데이터 설정 + /** + * 데이터 설정 + */ const selectRoofs = [] for (let i = 0; i < roofsArray.length; i++) { roofMaterials?.map((material) => { @@ -169,15 +175,16 @@ export function useRoofAllocationSetting(id) { } // setCurrentRoofList(selectRoofs) - //setBasicSetting({ ...basicSetting, roofsData: roofsArray }) setBasicSetting({ ...basicSetting, + planNo: res[0].planNo, roofSizeSet: res[0].roofSizeSet, roofAngleSet: res[0].roofAngleSet, roofsData: roofsArray, selectedRoofMaterial: selectRoofs.find((roof) => roof.selected), }) setBasicInfo({ + planNo: '' + res[0].planNo, roofSizeSet: '' + res[0].roofSizeSet, roofAngleSet: '' + res[0].roofAngleSet, }) @@ -187,14 +194,18 @@ export function useRoofAllocationSetting(id) { } } - // 지붕면 할당 저장 + /** + * 지붕면 할당 저장 + */ const basicSettingSave = async () => { try { const patternData = { objectNo: correntObjectNo, + planNo: Number(basicSetting.planNo), roofSizeSet: Number(basicSetting.roofSizeSet), roofAngleSet: basicSetting.roofAngleSet, roofAllocationList: currentRoofList.map((item, index) => ({ + planNo: Number(basicSetting.planNo), roofApply: item.selected, roofSeq: index, roofMatlCd: item.roofMatlCd === null || item.roofMatlCd === undefined ? 'ROOF_ID_WA_53A' : item.roofMatlCd, @@ -210,14 +221,15 @@ export function useRoofAllocationSetting(id) { console.log('🚀 ~ basicSettingSave ~ patternData >>>>>>>>>>>>> :', patternData) - await post({ url: `/api/canvas-management/roof-allocation-settings`, data: patternData }).then((res) => { + await post({ url: `http://localhost:8080/api/canvas-management/roof-allocation-settings`, data: patternData }).then((res) => { + // await post({ url: `/api/canvas-management/roof-allocation-settings`, data: patternData }).then((res) => { console.log('roof-allocation-settings res ', res) swalFire({ text: getMessage(res.returnMessage) }) }) //Recoil 설정 //setCanvasSetting({ ...basicSetting }) - fetchBasicSettings() + fetchBasicSettings(basicSetting.planNo, null) } catch (error) { swalFire({ text: error.message, icon: 'error' }) } @@ -249,11 +261,15 @@ export function useRoofAllocationSetting(id) { setCurrentRoofList(newRoofList) } - // 선택한 지붕재로 할당 + /** + * 선택한 지붕재로 할당 + */ const handleSave = () => { basicSettingSave() - // 모두 actualSize 있으면 바로 적용 없으면 actualSize 설정 + /** + * 모두 actualSize 있으면 바로 적용 없으면 actualSize 설정 + */ if (checkInnerLines()) { addPopup(popupId, 1, ) } else { @@ -262,7 +278,9 @@ export function useRoofAllocationSetting(id) { } } - // 지붕재 오른쪽 마우스 클릭 후 단일로 지붕재 변경 필요한 경우 + /** + * 지붕재 오른쪽 마우스 클릭 후 단일로 지붕재 변경 필요한 경우 + */ const handleSaveContext = () => { basicSettingSave() const newRoofList = currentRoofList.map((roof, idx) => { @@ -400,7 +418,9 @@ export function useRoofAllocationSetting(id) { canvas?.renderAll() } - // 지붕재 변경 + /** + * 지붕재 변경 + */ const handleChangeRoofMaterial = (value, index) => { const selectedIndex = roofMaterials.findIndex((roof) => roof.selected) @@ -415,7 +435,9 @@ export function useRoofAllocationSetting(id) { setCurrentRoofList(newRoofList) } - // 기본 지붕재 radio값 변경 + /** + * 기본 지붕재 radio값 변경 + */ const handleDefaultRoofMaterial = (index) => { const newRoofList = currentRoofList.map((roof, idx) => { return { ...roof, selected: idx === index } @@ -424,7 +446,9 @@ export function useRoofAllocationSetting(id) { setCurrentRoofList(newRoofList) } - // 서까래 변경 + /** + * 서까래 변경 + */ const handleChangeRaft = (e, index) => { const raftValue = e.clCode @@ -451,42 +475,6 @@ export function useRoofAllocationSetting(id) { const handleChangeInput = (e, type = '', index) => { const value = e.target.value - /*if (type === 'pitch') { - // type이 pitch인 경우 소수점 1자리까지만 입력 가능 - const reg = /^[0-9]+(\.[0-9]{0,1})?$/ - - if (!reg.test(value)) { - e.target.value = value.substring(0, value.length - 1) - const newRoofList = currentRoofList.map((roof, idx) => { - if (idx === index) { - return { - ...roof, - [type]: currentAngleType === 'slope' ? value.substring(0, value.length - 1) : getChonByDegree(value.substring(0, value.length - 1)), - } - } - return roof - }) - - setCurrentRoofList(newRoofList) - - return - } else { - const newRoofList = currentRoofList.map((roof, idx) => { - if (idx === index) { - return { - ...roof, - [type]: currentAngleType === 'slope' ? value : getChonByDegree(value), - } - } - return roof - }) - - setCurrentRoofList(newRoofList) - } - - return - }*/ - const newRoofList = currentRoofList.map((roof, idx) => { if (idx === index) { return { ...roof, [type]: value } @@ -516,7 +504,9 @@ export function useRoofAllocationSetting(id) { setCurrentRoofList(newRoofList) } - // 모듈 선택에서 선택한 데이터 초기화 + /** + * 모듈 선택에서 선택한 데이터 초기화 + */ const modifyModuleSelectionData = () => { if (moduleSelectionData.roofConstructions.length > 0) { setModuleSelectionData({ ...moduleSelectionData, roofConstructions: [] }) diff --git a/src/hooks/usePlan.js b/src/hooks/usePlan.js index c78448db..348686d0 100644 --- a/src/hooks/usePlan.js +++ b/src/hooks/usePlan.js @@ -15,6 +15,7 @@ import { FloorPlanContext } from '@/app/floor-plan/FloorPlanProvider' import { useEstimateController } from '@/hooks/floorPlan/estimate/useEstimateController' import { outerLinePointsState } from '@/store/outerLineAtom' import { placementShapeDrawingPointsState } from '@/store/placementShapeDrawingAtom' +import { useCanvasSetting } from '@/hooks/option/useCanvasSetting' export function usePlan(params = {}) { const { floorPlanState } = useContext(FloorPlanContext) @@ -38,6 +39,8 @@ export function usePlan(params = {}) { const resetOuterLinePoints = useResetRecoilState(outerLinePointsState) const resetPlacementShapeDrawingPoints = useResetRecoilState(placementShapeDrawingPointsState) + const { fetchBasicSettings } = useCanvasSetting() + /** * 마우스 포인터의 가이드라인 제거 */ @@ -209,6 +212,9 @@ export function usePlan(params = {}) { setPlans((plans) => [...plans.map((plan) => ({ ...plan, isCurrent: false })), newPlan]) swalFire({ text: getMessage('plan.message.save') }) } + + /* 플랜 추가 시 배치면초기설정 정보 조회 */ + fetchBasicSettings(newPlan.planNo, null) }) .catch((error) => { swalFire({ text: error.response.data.message, icon: 'error' }) @@ -267,6 +273,10 @@ export function usePlan(params = {}) { const handleCurrentPlan = async (newCurrentId) => { const planNo = plans?.find((obj) => obj.id === newCurrentId).planNo const objectNo = floorPlanState.objectNo + + /* 플랜 이동 시 배치면초기설정 정보 조회 */ + fetchBasicSettings(planNo, null) + //견적서 or 발전시뮬 if (pathname !== '/floor-plan') { @@ -409,6 +419,10 @@ export function usePlan(params = {}) { .then((res) => { setPlans((plans) => plans.filter((plan) => plan.id !== targetPlan.id)) removeImage(currentCanvasPlan.id) + + /* 플랜 삭제 후 배치면 초기설정 삭제 */ + deleteBasicSettings(targetPlan.objectNo, targetPlan.planNo) + swalFire({ text: getMessage('plan.message.delete') }) }) .catch((error) => { @@ -422,6 +436,9 @@ export function usePlan(params = {}) { } else if (targetPlan.id !== lastPlan.id) { setCurrentCanvasPlan(lastPlan) setPlans((plans) => plans.map((plan) => ({ ...plan, isCurrent: plan.id === lastPlan.id }))) + + /* 플랜 삭제 시 그 전 플랫의 배치면초기설정 정보 조회 */ + fetchBasicSettings(lastPlan.planNo, null) } } @@ -470,6 +487,17 @@ export function usePlan(params = {}) { } } + /** + * 플랜 삭제 시 배치면 초기설정 데이터 삭제 + * + * @param {string} objectNo - 물건번호 + * @param {string} planNo - 플랜번호 + */ + const deleteBasicSettings = async (objectNo, planNo) => { + await promiseDel({ url: `http://localhost:8080/api/canvas-management/delete-basic-settings/${objectNo}/${planNo}` }) + //await promiseDel({ url: `/api/canvas-management/delete-basic-settings/${objectNo}/${planNo}` }) + } + return { canvas, plans,