모듈 설치면 작업

src/components/floor-plan/modal/basic/step/Placement.jsx

@@ -5,7 +5,6 @@ import { checkedModuleState, currentCanvasPlanState } from '@/store/canvasAtom'
 import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
 import { moduleSelectionDataState, selectedModuleState } from '@/store/selectedModuleOptions'
 import { isObjectNotEmpty } from '@/util/common-utils'
-import { useCanvasPopupStatusController } from '@/hooks/common/useCanvasPopupStatusController'
 
 const Placement = forwardRef((props, refs) => {
   const { getMessage } = useMessage()
@@ -20,8 +19,7 @@ const Placement = forwardRef((props, refs) => {
 
   const setCheckedModules = useSetRecoilState(checkedModuleState)
   const moduleSelectionData = useRecoilValue(moduleSelectionDataState)
-
+  const { makeModuleInitArea } = useModuleBasicSetting(3)
-  const { trigger: moduleSelectedDataTrigger } = useCanvasPopupStatusController(2)
 
   //모듈 배치면 생성
   useEffect(() => {
@@ -31,6 +29,7 @@ const Placement = forwardRef((props, refs) => {
       if (isChidroriValue) {
         setIsChidoriNotAble(true)
       }
+      makeModuleInitArea(moduleSelectionData)
     }
   }, [])
 

src/hooks/module/useModuleBasicSetting.js

@@ -19,7 +19,7 @@ import { moduleStatisticsState } from '@/store/circuitTrestleAtom'
 import { moduleSelectionDataState, selectedModuleState } from '@/store/selectedModuleOptions'
 import { useMasterController } from '@/hooks/common/useMasterController'
 import { v4 as uuidv4 } from 'uuid'
-import { useCircuitTrestle } from '@/hooks/useCirCuitTrestle'
+// import { useCircuitTrestle } from '@/hooks/useCirCuitTrestle'
 import { isObjectNotEmpty } from '@/util/common-utils'
 
 export function useModuleBasicSetting(tabNum) {
@@ -29,7 +29,7 @@ export function useModuleBasicSetting(tabNum) {
   const [moduleSetupSurface, setModuleSetupSurface] = useRecoilState(moduleSetupSurfaceState)
   const [moduleIsSetup, setModuleIsSetup] = useRecoilState(moduleIsSetupState)
   const { addCanvasMouseEventListener, initEvent, removeMouseEvent, addTargetMouseEventListener } = useEvent()
-  const { setModuleStatisticsData } = useCircuitTrestle()
+  // const { setModuleStatisticsData } = useCircuitTrestle()
   const { swalFire } = useSwal()
 
   const compasDeg = useRecoilValue(compasDegAtom)
@@ -52,6 +52,7 @@ export function useModuleBasicSetting(tabNum) {
 
   useEffect(() => {
     // console.log('basicSetting', basicSetting)
+
     if (canvas) {
       //드래그 여부
       // canvas.selection = true
@@ -62,17 +63,13 @@ export function useModuleBasicSetting(tabNum) {
   // const { addTargetMouseEventListener, addCanvasMouseEventListener, initEvent } = useContext(EventContext)
 
   //모듈 선택에서 선택된 값들 넘어옴
-  useEffect(() => {
+  const makeModuleInitArea = () => {
-    console.log('moduleSelectionData', moduleSelectionData)
+    if (isObjectNotEmpty(moduleSelectionData) && tabNum === 3) {
-
-    console.log('canvasSetting.roofSizeSet', canvasSetting.roofSizeSet)
-
-    if (isObjectNotEmpty(moduleSelectionData)) {
       if (canvasSetting.roofSizeSet !== '3') {
         const common = moduleSelectionData.common
         const roofConstructions = moduleSelectionData.roofConstructions
 
-        console.log('roofConstructions', roofConstructions)
+        // console.log('roofConstructions', roofConstructions)
 
         if (roofConstructions && roofConstructions.length > 0) {
           const listParams = roofConstructions.map((item) => {
@@ -109,7 +106,10 @@ export function useModuleBasicSetting(tabNum) {
           })
       }
     }
-  }, [moduleSelectionData])
+  }
+  // console.log('moduleSelectionData', moduleSelectionData)
+
+  // console.log('canvasSetting.roofSizeSet', canvasSetting.roofSizeSet)
 
   //가대 상세 데이터 조회
   const getTrestleDetailListData = async () => {
@@ -310,7 +310,7 @@ export function useModuleBasicSetting(tabNum) {
         canvas?.renderAll()
         selectedModuleInstSurfaceArray.push(setupSurface)
 
-        console.log('selectedModuleInstSurfaceArray', selectedModuleInstSurfaceArray)
+        // console.log('selectedModuleInstSurfaceArray', selectedModuleInstSurfaceArray)
 
         setCurrentObject({ name: 'moduleSetupSurface', arrayData: [...selectedModuleInstSurfaceArray] })
       } else {
@@ -839,7 +839,7 @@ export function useModuleBasicSetting(tabNum) {
       checkedModule.forEach((module, index) => {
         const { width, height } = getModuleWidthHeight(maxLengthLine, moduleSetupSurface, module)
 
-        const flowLines = getFlowLines(moduleSetupSurface, width)
+        const flowLines = getFlowLines(moduleSetupSurface, height)
         //육지붕이 아닐때만 넣는다 육지붕일땐 클릭 이벤트에 별도로 넣어놓음
         let startPoint = flowLines.bottom
         const moduleArray = []
@@ -859,17 +859,7 @@ export function useModuleBasicSetting(tabNum) {
               startPoint = { ...startPoint, y1: startPoint.y1 - heightMargin }
             }
           }
-        }
+        } else {
-        // else {
-        //   //중앙배치가 아닐때도 흐름 방향 기준면으로 양면이 직선이면 가운데 배치
-        //   if (flowModuleLine.bottom.type === 'flat' && flowModuleLine.left.type === 'flat' && flowModuleLine.right.type === 'flat') {
-        //     //하단 기준으로 양면이 직선이면 하단 방면으로 가운데로 배치
-        //     const halfWidthLength = Math.abs(startPoint.x1 + startPoint.x2) / 2 //밑에 길이에서 반을 가른다
-        //     const halfModuleWidthLength = width / 2
-        //     startPoint = { ...startPoint, x1: halfWidthLength - halfModuleWidthLength }
-        //   }
-        // }
-
           const maxLeftEndPoint = surfaceMaxLines.left.x1 //최 좌측
           const maxRightEndPoint = surfaceMaxLines.right.x1 //최 우측
           const maxTopEndPoint = surfaceMaxLines.top.y1 //최 상단
@@ -934,6 +924,8 @@ export function useModuleBasicSetting(tabNum) {
               }
             }
           }
+        }
+
         setupModule.push(moduleArray)
       })
     }
@@ -1055,7 +1047,7 @@ export function useModuleBasicSetting(tabNum) {
 
       checkedModule.forEach((module, index) => {
         const { width, height } = getModuleWidthHeight(maxLengthLine, moduleSetupSurface, module)
-        const flowLines = getFlowLines(moduleSetupSurface, width)
+        const flowLines = getFlowLines(moduleSetupSurface, height)
         let startPoint = flowLines.top
         const moduleArray = []
 
@@ -1389,9 +1381,7 @@ export function useModuleBasicSetting(tabNum) {
     return hull
   }
 
-  const bottomTopFlowLine = (surface, width) => {
+  const bottomTopFlowLine = (surface, length) => {
-    console.log('bottom', width)
-
     const flowArray = []
 
     const bottomFlow = surface.lines.reduce(
@@ -1450,7 +1440,7 @@ export function useModuleBasicSetting(tabNum) {
       const angle2 = Math.abs(Math.round(Math.atan(height2 / adjust2) * (180 / Math.PI) * 1000) / 1000)
       const angle3 = 180 - (angle1 + angle2)
 
-      const charlie = Number(width) + 3 // 평행선길이 약간 여유를 줌
+      const charlie = Number(length) + 3 // 평행선길이 약간 여유를 줌
       const alpha = (charlie * Math.sin((angle1 * Math.PI) / 180)) / Math.sin((angle3 * Math.PI) / 180)
       const beta = Math.sqrt(alpha ** 2 + charlie ** 2 - 2 * alpha * charlie * Math.cos((angle2 * Math.PI) / 180))
       const h = beta * Math.sin((angle1 * Math.PI) / 180) // 높이
@@ -1467,6 +1457,9 @@ export function useModuleBasicSetting(tabNum) {
         strokeWidth: 1,
         selectable: true,
       })
+
+      console.log(`index ${index} : finalLine`, pointX1, pointY1, pointX2, pointY2)
+
       canvas?.add(finalLine)
       canvas?.renderAll()
 
@@ -1509,9 +1502,7 @@ export function useModuleBasicSetting(tabNum) {
     return rtnObjArray
   }
 
-  const leftRightFlowLine = (surface, width) => {
+  const leftRightFlowLine = (surface, length) => {
-    console.log('left', width)
-
     const flowArray = []
     const leftFlow = surface.lines.reduce(
       (acc, line, index) => {
@@ -1567,7 +1558,7 @@ export function useModuleBasicSetting(tabNum) {
       const angle2 = Math.abs(Math.round(Math.atan(adjust2 / height2) * (180 / Math.PI) * 1000) / 1000)
       const angle3 = 180 - (angle1 + angle2)
 
-      const charlie = Number(width) + 3 // 평행선길이 약간 여유를 줌
+      const charlie = Number(length) + 3 // 평행선길이 약간 여유를 줌
       const alpha = (charlie * Math.sin((angle1 * Math.PI) / 180)) / Math.sin((angle3 * Math.PI) / 180)
       const beta = Math.sqrt(alpha ** 2 + charlie ** 2 - 2 * alpha * charlie * Math.cos((angle2 * Math.PI) / 180))
 
@@ -2201,7 +2192,7 @@ export function useModuleBasicSetting(tabNum) {
       checkedModule.forEach((module, index) => {
         const { width, height } = getModuleWidthHeight(maxLengthLine, moduleSetupSurface, module)
 
-        const flowLines = getFlowLines(moduleSetupSurface, width)
+        const flowLines = getFlowLines(moduleSetupSurface, height)
 
         let startPoint = flowLines.bottom
 
@@ -2292,7 +2283,7 @@ export function useModuleBasicSetting(tabNum) {
     const flatRoofTopFlowSetupModule = (surfaceMaxLines, maxLengthLine, moduleSetupArray, moduleSetupSurface, marginWidth, marginHeight) => {
       checkedModule.forEach((module, index) => {
         const { width, height } = getModuleWidthHeight(maxLengthLine, moduleSetupSurface, module)
-        const flowLines = getFlowLines(moduleSetupSurface, width)
+        const flowLines = getFlowLines(moduleSetupSurface, height)
         let startPoint = flowLines.top
 
         const maxLeftEndPoint = surfaceMaxLines.left.x1 //최 좌측
@@ -2490,7 +2481,7 @@ export function useModuleBasicSetting(tabNum) {
 
   const getModuleStatistics = () => {
     const surfaces = canvas.getObjects().filter((obj) => POLYGON_TYPE.MODULE_SETUP_SURFACE === obj.name)
-    console.log('🚀 ~ getModuleStatistics ~ surfaces:', surfaces)
+    // console.log('🚀 ~ getModuleStatistics ~ surfaces:', surfaces)
     let totalWpout = 0
     let moduleInfo = {}
     const rows = surfaces.map((surface) => {
@@ -2505,7 +2496,7 @@ export function useModuleBasicSetting(tabNum) {
         moduleInfo[module.moduleInfo.itemId].amount++
       })
       totalWpout += wpOut
-      console.log('🚀 ~ moduleData.rows=surfaces.map ~ module:', module)
+      // console.log('🚀 ~ moduleData.rows=surfaces.map ~ module:', module)
       const rowObject = {}
       Object.keys(moduleInfo).forEach((key) => {
         rowObject[key] = moduleInfo[key].amount
@@ -2519,8 +2510,8 @@ export function useModuleBasicSetting(tabNum) {
       }
     })
 
-    console.log('🚀 ~ getModuleStatistics ~ rows:', rows)
+    // console.log('🚀 ~ getModuleStatistics ~ rows:', rows)
-    console.log('🚀 ~ getModuleStatistics ~ moduleInfo:', moduleInfo)
+    // console.log('🚀 ~ getModuleStatistics ~ moduleInfo:', moduleInfo)
     const header = [
       { name: getMessage('modal.panel.batch.statistic.roof.shape'), prop: 'name' },
       ...Object.keys(moduleInfo).map((key) => {
@@ -2540,7 +2531,7 @@ export function useModuleBasicSetting(tabNum) {
       footer.push(footerData[key])
     })
     footer.push((totalWpout / 1000).toFixed(3))
-    console.log({ header: header, rows, footer: footer })
+    // console.log({ header: header, rows, footer: footer })
     setModuleStatistics({ header: header, rows, footer: footer })
   }
 
@@ -2574,14 +2565,14 @@ export function useModuleBasicSetting(tabNum) {
       : { width: tmpWidth, height: tmpHeight }
   }
 
-  const getFlowLines = (moduleSetupSurface, width) => {
+  const getFlowLines = (moduleSetupSurface, length) => {
     let flowLines = {}
 
     flowLines = {
-      bottom: bottomTopFlowLine(moduleSetupSurface, width).find((obj) => obj.target === 'bottom'),
+      bottom: bottomTopFlowLine(moduleSetupSurface, length).find((obj) => obj.target === 'bottom'),
-      top: bottomTopFlowLine(moduleSetupSurface, width).find((obj) => obj.target === 'top'),
+      top: bottomTopFlowLine(moduleSetupSurface, length).find((obj) => obj.target === 'top'),
-      left: leftRightFlowLine(moduleSetupSurface, width).find((obj) => obj.target === 'left'),
+      left: leftRightFlowLine(moduleSetupSurface, length).find((obj) => obj.target === 'left'),
-      right: leftRightFlowLine(moduleSetupSurface, width).find((obj) => obj.target === 'right'),
+      right: leftRightFlowLine(moduleSetupSurface, length).find((obj) => obj.target === 'right'),
     }
     return flowLines
   }
@@ -2595,5 +2586,6 @@ export function useModuleBasicSetting(tabNum) {
     manualFlatroofModuleSetup,
     autoFlatroofModuleSetup,
     checkModuleDisjointObjects,
+    makeModuleInitArea,
   }
 }

src/hooks/module/useModuleTabContents.js

@@ -62,7 +62,7 @@ export function useModuleTabContents({ tabIndex, addRoof, setAddedRoofs, roofTab
     // setConstMthdList([]) //공법 초기화
     // setRoofBaseList([]) //지붕밑바탕 초기화
     // setConstructionList([]) //공법 초기화
-    resetSelected()
+    resetSelected(1)
   }
 
   //처마력바 체크
@@ -114,8 +114,6 @@ export function useModuleTabContents({ tabIndex, addRoof, setAddedRoofs, roofTab
       isObjectNotEmpty(moduleSelectionData.roofConstructions[tabIndex].trestle) &&
       isObjectNotEmpty(moduleSelectionData.roofConstructions[tabIndex].construction)
     ) {
-      // console.log('moduleSelectionData', moduleSelectionData)
-
       const roofConstructions = moduleSelectionData.roofConstructions.filter((item) => item.roofIndex === tabIndex)[0]
       setModuleConstructionSelectionData(roofConstructions)
     }
@@ -127,6 +125,18 @@ export function useModuleTabContents({ tabIndex, addRoof, setAddedRoofs, roofTab
     }
   }, [moduleConstructionSelectionData])
 
+  useEffect(() => {
+    //되돌아왔을때 재호출 하여 선택한다
+    if (isExistData) {
+      setTrestleParams({
+        moduleTpCd: selectedModules.itemTp,
+        roofMatlCd: addRoof.roofMatlCd,
+        raftBaseCd: selectedRaftBase.raftBaseCd ? selectedRaftBase.raftBaseCd : '',
+        workingWidth: lengthBase,
+      })
+    }
+  }, [isExistData])
+
   useEffect(() => {
     if (isExistData) {
       setConstructionListParams({
@@ -158,6 +168,7 @@ export function useModuleTabContents({ tabIndex, addRoof, setAddedRoofs, roofTab
   //모듈 변경
   useEffect(() => {
     //lengbase는 무조건 있다고 가정 하고 최초에 실행 방지
+
     if (selectedModules) {
       //여기서부터 시작
       //가대메이커 파라메터 만들기
@@ -362,7 +373,7 @@ export function useModuleTabContents({ tabIndex, addRoof, setAddedRoofs, roofTab
       isObjectNotEmpty(moduleSelectionInitOriginData.current) &&
       !isEqualObjects(moduleSelectionInitOriginData.current, moduleSelectionInitParams)
     ) {
-      resetSelected()
+      resetSelected(2)
     }
   }, [moduleSelectionInitParams])
 
@@ -372,10 +383,10 @@ export function useModuleTabContents({ tabIndex, addRoof, setAddedRoofs, roofTab
     } else {
       setHajebichi(Number(e.target.value))
     }
-    resetSelected()
+    resetSelected(3)
   }
 
-  const resetSelected = () => {
+  const resetSelected = (num) => {
     //가대 선택 초기화
     setSelectedTrestle({})
 

src/hooks/useCirCuitTrestle.js

@@ -10,11 +10,10 @@ import {
   selectedModelsState,
   seriesState,
 } from '@/store/circuitTrestleAtom'
-import { moduleSelectionDataState, selectedModuleState } from '@/store/selectedModuleOptions'
+import { selectedModuleState } from '@/store/selectedModuleOptions'
 import { useContext } from 'react'
 import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
 import { useMessage } from './useMessage'
-import { useCanvasPopupStatusController } from './common/useCanvasPopupStatusController'
 
 export function useCircuitTrestle() {
   const [makers, setMakers] = useRecoilState(makersState)
@@ -26,8 +25,7 @@ export function useCircuitTrestle() {
   const selectedModules = useRecoilValue(selectedModuleState)
   const { managementState, setManagementState, managementStateLoaded } = useContext(GlobalDataContext)
   const canvas = useRecoilValue(canvasState)
-  const { trigger: moduleSelectedDataTrigger } = useCanvasPopupStatusController(2)
+
-  const [moduleSelectionData, setModuleSelectionData] = useRecoilState(moduleSelectionDataState)
   const setModuleStatistics = useSetRecoilState(moduleStatisticsState)
   const { getMessage } = useMessage()
   const getOptYn = () => {
@@ -62,7 +60,7 @@ export function useCircuitTrestle() {
   // 사용된 모듈아이템 목록
   const getUseModuleItemList = () => {
     console.log('🚀 ~ getUseModuleItemList ~ selectedModules:', selectedModules)
-    return moduleSelectionData.module?.itemList?.map((m) => {
+    return selectedModules?.itemList?.map((m) => {
       return {
         itemId: m.itemId,
         mixMatlNo: m.mixMatlNo,
@@ -73,10 +71,6 @@ export function useCircuitTrestle() {
   // 지붕면 목록
   const getRoofSurfaceList = () => {
     const roofSurfaceList = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE)
-    const modules = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE)
-    roofSurfaceList.forEach((surface) => {
-      surface.modules = modules.filter((module) => module.surfaceId === surface.id)
-    })
     roofSurfaceList.sort((a, b) => a.left - b.left || b.top - a.top)
     return roofSurfaceList
       .map((obj) => {
@@ -183,22 +177,17 @@ export function useCircuitTrestle() {
   const setPowerConditionerData = () => {}
 
   const setModuleStatisticsData = () => {
-    const roofSurfaceList = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE)
+    console.log(canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE))
-    const modules = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE)
+    if (selectedModules?.length === 0) return
-    roofSurfaceList.forEach((surface) => {
-      surface.modules = modules.filter((module) => module.surfaceId === surface.id)
-    })
-    // console.log(moduleSelectionData)
-    if (!moduleSelectionData || !moduleSelectionData.module || moduleSelectionData.module?.itemList?.length === 0) return
     const tempHeader = [
       { name: getMessage('simulator.table.sub1'), prop: 'name' },
       { name: getMessage('modal.circuit.trestle.setting.circuit.allocation.passivity.circuit'), prop: 'circuit' },
-      // ...moduleSelectionData.module?.itemList?.map((module) => {
+      ...selectedModules?.itemList?.map((module) => {
-      //   return {
+        return {
-      //     name: module.itemNm,
+          name: module.itemNm,
-      //     prop: module.itemId,
+          prop: module.itemId,
-      //   }
+        }
-      // }),
+      }),
       { name: `${getMessage('modal.panel.batch.statistic.power.generation.amount')}(kW)`, prop: 'wpOut' },
     ]
     const surfaceObjects = {}
@@ -247,7 +236,7 @@ export function useCircuitTrestle() {
         circuit: surfaceObjects[key].circuit,
         wpOut: parseFloat(surfaceObjects[key].wpOut / 1000),
       }
-      moduleSelectionData.module.itemList.forEach((module) => {
+      selectedModules.itemList.forEach((module) => {
         tempRow[module.itemId] = surfaceObjects[key][module.itemId]
       })
       tempRows.push(tempRow)
@@ -258,7 +247,7 @@ export function useCircuitTrestle() {
           circuit: surfaceObjects[key].circuits[circuit].circuit,
           wpOut: parseFloat(surfaceObjects[key].circuits[circuit].circuits.wpOut / 1000),
         }
-        moduleSelectionData.module.itemList.forEach((module) => {
+        selectedModules.itemList.forEach((module) => {
           row[module.itemId] = surfaceObjects[key].circuits[circuit].circuits[module.itemId]
         })
         tempRows.push(row)
@@ -270,8 +259,8 @@ export function useCircuitTrestle() {
       circuit: '-',
       wpOut: tempRows.reduce((acc, row) => acc + row.wpOut, 0),
     }
-    moduleSelectionData.module.itemList.forEach((module) => {
+    selectedModules.itemList.forEach((module) => {
-      tempFooter[module.itemId] = tempRows.reduce((acc, row) => acc + (row[module.itemId] ?? 0), 0)
+      tempFooter[module.itemId] = tempRows.reduce((acc, row) => acc + row[module.itemId], 0)
     })
     canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE)
     setModuleStatistics({ header: tempHeader, rows: tempRows.filter((row) => row.wpOut !== 0), footer: tempFooter })