배치면초기설정 plan_no 추가 적용

This commit is contained in:
changkyu choi 2025-02-14 17:07:53 +09:00
parent ea7c63f853
commit 4dbf59b7a9
7 changed files with 397 additions and 229 deletions

View File

@ -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, <PlacementShapeSetting {...placementInitialProps} />)
}

View File

@ -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()

View File

@ -475,8 +475,9 @@ export default function CircuitTrestleSetting({ id }) {
type: 'alert',
})
return
} else {
setTabNum(2)
}
setTabNum(2)
}
//

View File

@ -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
<div className="pop-form-radio place">
{currentRoof &&
roofAngleSetArray.map((item, index) => (
<div className="outline-form">
<div className="outline-form" key={item.id}>
<span>
<div className="d-check-radio pop" key={item.id}>
<div className="d-check-radio pop">
<input
type="radio"
id={item.id}

View File

@ -31,7 +31,7 @@ import { dimensionLineSettingsState } from '@/store/commonUtilsAtom'
import { gridColorState } from '@/store/gridAtom'
import { useColor } from 'react-color-palette'
import { useMasterController } from '@/hooks/common/useMasterController'
import { ROOF_MATERIAL_LAYOUT } from '@/components/floor-plan/modal/placementShape/PlacementShapeSetting'
import PlacementShapeSetting, { ROOF_MATERIAL_LAYOUT } from '@/components/floor-plan/modal/placementShape/PlacementShapeSetting'
import { useCanvasMenu } from '../common/useCanvasMenu'
import { menuTypeState } from '@/store/menuAtom'
import { usePopup } from '../usePopup'
@ -39,6 +39,7 @@ import { FloorPlanContext } from '@/app/floor-plan/FloorPlanProvider'
import { moduleSelectionDataState, selectedModuleState } from '@/store/selectedModuleOptions'
import { useCommonCode } from '@/hooks/common/useCommonCode'
import { useCanvasPopupStatusController } from '@/hooks/common/useCanvasPopupStatusController'
import { v4 as uuidv4 } from 'uuid'
const defaultDotLineGridSetting = {
INTERVAL: {
@ -52,11 +53,11 @@ const defaultDotLineGridSetting = {
LINE: false,
}
let previousRoofMaterialsYn = 'N' // 지붕재 select 정보 비교 후 변경된 것이 없으면 1회만 실행
// let previousRoofMaterialsYn = 'N' // 지붕재 select 정보 비교 후 변경된 것이 없으면 1회만 실행
export function useCanvasSetting() {
const canvas = useRecoilValue(canvasState)
// canvas가 null이 아닐 때에만 getObjects 호출
/* canvas가 null이 아닐 때에만 getObjects 호출 */
const canvasObjects = canvas ? canvas.getObjects() : []
const [correntObjectNo, setCorrentObjectNo] = useRecoilState(correntObjectNoState)
@ -126,6 +127,8 @@ export function useCanvasSetting() {
const [raftCodes, setRaftCodes] = useState([]) // 서까래 정보
const { findCommonCode } = useCommonCode()
const [currentRoof, setCurrentRoof] = useState(null) // 현재 선택된 지붕재 정보
const { addPopup } = usePopup()
const [popupId, setPopupId] = useState(uuidv4())
const SelectOptions = [
{ id: 1, name: getMessage('modal.canvas.setting.grid.dot.line.setting.line.origin'), value: 1 },
@ -137,40 +140,82 @@ export function useCanvasSetting() {
const selectedRoofMaterial = useRecoilValue(selectedRoofMaterialSelector) // 선택된 지붕재 정보
const { floorPlanState } = useContext(FloorPlanContext) // 플랜 상태
const { closeAll } = usePopup() // 팝업 닫기
const previousObjectNoRef = useRef(null) // 최초 데이터 설정 확인
const previousRoofMaterialsRef = useRef(null) // 최초 데이터 설정 확인
// const previousObjectNoRef = useRef(null) // 최초 데이터 설정 확인
// const previousRoofMaterialsRef = useRef(null) // 최초 데이터 설정 확인
useEffect(() => {
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, <PlacementShapeSetting {...placementInitialProps} />)
}
}
// 데이터 설정
/* 데이터 설정 */
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)),
// )
}
}

View File

@ -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, <ActualSizeSetting id={popupId} />)
} 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: [] })

View File

@ -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,