육지붕 수정

src/components/floor-plan/modal/basic/BasicSetting.jsx

@@ -77,11 +77,13 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
   const [roofsStore, setRoofsStore] = useRecoilState(roofsState)
 
   // const { initEvent } = useContext(EventContext)
-  const { manualModuleSetup, autoModuleSetup, manualFlatroofModuleSetup, autoFlatroofModuleSetup, manualModuleLayoutSetup } =
+  const { manualModuleSetup, autoModuleSetup, manualFlatroofModuleSetup, autoFlatroofModuleSetup, manualModuleLayoutSetup, restoreModuleInstArea } =
     useModuleBasicSetting(tabNum)
   const { updateObjectDate } = useMasterController()
 
   useEffect(() => {
+    const moduleTabNum = basicSetting.roofSizeSet != 3 ? 3 : 2
+
     let hasModules = canvas
       .getObjects()
       .filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE)
@@ -89,7 +91,7 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
 
     if (hasModules) {
       orientationRef.current.handleNextStep()
-      setTabNum(3)
+      setTabNum(moduleTabNum)
     }
   }, [])
 
@@ -364,7 +366,7 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
                   <button className={`btn-frame modal mr5 ${isManualModuleSetup ? 'act' : ''}`} onClick={handleManualModuleSetup}>
                     {getMessage('modal.module.basic.setting.passivity.placement')}
                   </button>
-                  <button className="btn-frame modal act" onClick={() => autoModuleSetup()}>
+                  <button className="btn-frame modal act" onClick={() => autoFlatroofModuleSetup(placementFlatRef)}>
                     {getMessage('modal.module.basic.setting.auto.placement')}
                   </button>
                 </>

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

@@ -1,14 +1,12 @@
 import { forwardRef, use, useContext, useEffect, useImperativeHandle, useState } from 'react'
 import { useMessage } from '@/hooks/useMessage'
-import { useOrientation } from '@/hooks/module/useOrientation'
 import { getDegreeInOrientation } from '@/util/canvas-util'
 import { numberCheck } from '@/util/common-utils'
-import { useCanvasPopupStatusController } from '@/hooks/common/useCanvasPopupStatusController'
 import { addedRoofsState, basicSettingState } from '@/store/settingAtom'
 import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
 import QSelectBox from '@/components/common/select/QSelectBox'
-import { moduleSelectionDataState } from '@/store/selectedModuleOptions'
 import { roofsState } from '@/store/roofAtom'
+import { useModuleBasicSetting } from '@/hooks/module/useModuleBasicSetting'
 import Swal from 'sweetalert2'
 
 export const Orientation = forwardRef((props, ref) => {
@@ -55,6 +53,7 @@ export const Orientation = forwardRef((props, ref) => {
   const [inputVerticalSnowCover, setInputVerticalSnowCover] = useState('0')
   const [inputRoughness, setInputRoughness] = useState(selectedSurfaceType)
   const [inputStandardWindSpeed, setInputStandardWindSpeed] = useState(standardWindSpeed)
+  const { restoreModuleInstArea } = useModuleBasicSetting()
   const moduleData = {
     header: [
       { name: getMessage('module'), width: 150, prop: 'module', type: 'color-box' },
@@ -67,6 +66,12 @@ export const Orientation = forwardRef((props, ref) => {
     ],
   }
 
+  useEffect(() => {
+    if (basicSetting.roofSizeSet == '3') {
+      restoreModuleInstArea()
+    }
+  }, [])
+
   useEffect(() => {
     if (moduleSelectionData?.common) {
       setInputMargin(moduleSelectionData?.common?.margin)
@@ -108,7 +113,7 @@ export const Orientation = forwardRef((props, ref) => {
         illuminationTp: inputRoughness.clCode,
         illuminationTpNm: inputRoughness.clCodeNm,
         instHt: inputInstallHeight,
-        stdWindSpeed: inputStandardWindSpeed.clCode,
+        stdWindSpeed: inputStandardWindSpeed?.clCode,
         stdSnowLd: inputVerticalSnowCover,
         saleStoreNorthFlg: managementState?.saleStoreNorthFlg,
         moduleTpCd: selectedModules.itemTp,
@@ -125,7 +130,7 @@ export const Orientation = forwardRef((props, ref) => {
         ...managementState,
         installHeight: inputInstallHeight,
         verticalSnowCover: inputVerticalSnowCover,
-        standardWindSpeedId: inputStandardWindSpeed.clCode,
+        standardWindSpeedId: inputStandardWindSpeed?.clCode,
         surfaceType: inputRoughness.clCodeNm,
         surfaceTypeValue: inputRoughness.clCode,
       })
@@ -146,7 +151,7 @@ export const Orientation = forwardRef((props, ref) => {
       })
       updateObjectDataApi({
         objectNo: currentCanvasPlan.objectNo, //오브젝트_no
-        standardWindSpeedId: inputStandardWindSpeed.clCode, //기준풍속코드
+        standardWindSpeedId: inputStandardWindSpeed?.clCode, //기준풍속코드
         verticalSnowCover: inputVerticalSnowCover, //적설량
         surfaceType: inputRoughness.clCodeNm, //면조도구분
         installHeight: inputInstallHeight, //설치높이

src/components/floor-plan/modal/basic/step/pitch/PitchPlacement.jsx

@@ -33,14 +33,6 @@ const PitchPlacement = forwardRef((props, refs) => {
     setSelectedItems({ ...selectedItems, [e.target.name]: e.target.checked })
   }
 
-  const moduleData = {
-    header: [
-      { type: 'check', name: '', prop: 'check', width: 70 },
-      { type: 'color-box', name: getMessage('module'), prop: 'module' },
-      { type: 'text', name: `${getMessage('output')} (W)`, prop: 'output', width: 70 },
-    ],
-  }
-
   //체크된 모듈 데이터
   useEffect(() => {
     const checkedModuleIds = Object.keys(selectedItems).filter((key) => selectedItems[key])
@@ -105,87 +97,91 @@ const PitchPlacement = forwardRef((props, refs) => {
 
   return (
     <>
-      <div className="module-table-box mb10">
+      <div className="hexagonal-flex-wrap">
-        <div className="module-table-inner">
+        <div className="module-table-box ">
-          <div className="roof-module-table">
+          <div className="module-table-inner">
-            <table>
+            <div className="roof-module-table">
-              <thead>
+              <table>
-                <tr>
+                <thead>
-                  {moduleData.header.map((data) => (
+                  <tr>
-                    <th key={data.prop} style={{ width: data.width ? data.width : '' }}>
+                    <th style={{ width: '70px' }}>
-                      {data.type === 'check' ? (
+                      <div className="d-check-box no-text pop">
-                        <div className="d-check-box no-text pop">
+                        <input type="checkbox" id="ch01" disabled />
-                          <input type="checkbox" id="ch01" disabled />
+                        <label htmlFor="ch01"></label>
-                          <label htmlFor="ch01"></label>
+                      </div>
-                        </div>
-                      ) : (
-                        data.name
-                      )}
                     </th>
-                  ))}
+                    <th>{getMessage('module')}</th>
-                </tr>
+                  </tr>
-              </thead>
+                </thead>
-              <tbody>
+                <tbody>
-                {selectedModules.itemList &&
+                  {selectedModules.itemList &&
-                  selectedModules.itemList.map((item, index) => (
+                    selectedModules.itemList.map((item, index) => (
-                    <tr key={index}>
+                      <tr key={index}>
-                      <td className="al-c">
+                        <td className="al-c">
-                        <div className="d-check-box no-text pop">
+                          <div className="d-check-box no-text pop">
-                          <input
+                            <input
-                            type="checkbox"
+                              type="checkbox"
-                            id={item.itemId}
+                              id={item.itemId}
-                            name={item.itemId}
+                              name={item.itemId}
-                            checked={selectedItems[item.itemId]}
+                              checked={selectedItems[item.itemId]}
-                            onChange={handleSelectedItem}
+                              onChange={handleSelectedItem}
-                          />
+                            />
-                          <label htmlFor={item.itemId}></label>
+                            <label htmlFor={item.itemId}></label>
-                        </div>
+                          </div>
-                      </td>
+                        </td>
-                      <td>
+                        <td>
-                        <div className="color-wrap">
+                          <div className="color-wrap">
-                          <span className="color-box" style={{ backgroundColor: item.color }}></span>
+                            <span className="color-box" style={{ backgroundColor: item.color }}></span>
-                          <span className="name">{item.itemNm}</span>
+                            <span className="name">{item.itemNm}</span>
-                        </div>
+                          </div>
-                      </td>
+                        </td>
-                      <td className="al-r">{item.wpOut}</td>
+                      </tr>
-                    </tr>
+                    ))}
-                  ))}
+                </tbody>
-              </tbody>
+              </table>
-            </table>
+            </div>
           </div>
         </div>
-      </div>
+        <div className="module-table-box non-flex">
-      <div className="module-table-box mb10">
+          <div className="module-table-inner">
-        <div className="module-table-inner">
+            <div className="roof-module-table">
-          <div className="hexagonal-wrap">
+              <table>
-            <div className="hexagonal-item">
+                <thead>
-              <div className="bold-font">{getMessage('modal.module.basic.setting.pitch.module.placement.standard.setting')}</div>
+                  <tr>
-            </div>
+                    <th>{getMessage('modal.module.basic.setting.pitch.module.placement.standard.setting')}</th>
-            <div className="hexagonal-item">
+                  </tr>
-              <div className="pop-form-radio">
+                </thead>
-                <div className="d-check-radio pop">
+                <tbody>
-                  <input
+                  <tr>
-                    type="radio"
+                    <td>
-                    name="radio01"
+                      <div className="hexagonal-radio-wrap">
-                    id="ra01"
+                        <div className="d-check-radio pop mb10">
-                    value={'south'}
+                          <input
-                    defaultChecked={setupLocation === 'south'}
+                            type="radio"
-                    onClick={handleSetupLocation}
+                            name="radio01"
-                  />
+                            id="ra01"
-                  <label htmlFor="ra01">{getMessage('modal.module.basic.setting.pitch.module.placement.standard.setting.south')}</label>
+                            value={'south'}
-                </div>
+                            defaultChecked={setupLocation === 'south'}
-                <div className="d-check-radio pop">
+                            onClick={handleSetupLocation}
-                  <input
+                          />
-                    type="radio"
+                          <label htmlFor="ra01">{getMessage('modal.module.basic.setting.pitch.module.placement.standard.setting.south')}</label>
-                    name="radio01"
+                        </div>
-                    id="ra02"
+                        <div className="d-check-radio pop">
-                    value={'excreta'}
+                          <input
-                    defaultChecked={setupLocation === 'excreta'}
+                            type="radio"
-                    onClick={handleSetupLocation}
+                            name="radio01"
-                  />
+                            id="ra02"
-                  <label htmlFor="ra02">{getMessage('modal.module.basic.setting.pitch.module.placement.standard.setting.select')}</label>
+                            value={'excreta'}
-                </div>
+                            defaultChecked={setupLocation === 'excreta'}
-              </div>
+                            onClick={handleSetupLocation}
+                          />
+                          <label htmlFor="ra02">{getMessage('modal.module.basic.setting.pitch.module.placement.standard.setting.select')}</label>
+                        </div>
+                      </div>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
             </div>
           </div>
         </div>

src/hooks/module/useModuleBasicSetting.js

@@ -83,8 +83,6 @@ export function useModuleBasicSetting(tabNum) {
 
   //모듈 선택에서 선택된 값들 넘어옴
   const makeModuleInitArea = () => {
-    console.log('moduleSelectionData', moduleSelectionData)
-
     if (isObjectNotEmpty(moduleSelectionData) && tabNum === 3) {
       if (canvasSetting.roofSizeSet !== '3') {
         const common = moduleSelectionData.common
@@ -115,8 +113,6 @@ export function useModuleBasicSetting(tabNum) {
 
   //가대 상세 데이터 들어오면 실행
   useEffect(() => {
-    console.log('trestleDetailList', trestleDetailList)
-
     if (trestleDetailList.length > 0) {
       let rowColArray = []
       //지붕을 가져옴
@@ -258,8 +254,10 @@ export function useModuleBasicSetting(tabNum) {
         const allPointsOutside = result.every((point) => !originPolygon.inPolygon(point))
 
         if (canvasSetting.roofSizeSet == '3') {
+          const margin = moduleSelectionData.common.margin ? moduleSelectionData.common.margin : 200
+
           //육지붕일때는 그냥 하드코딩
-          offsetPoints = offsetPolygon(roof.points, -30) //육지붕일때
+          offsetPoints = offsetPolygon(roof.points, -Number(margin) / 10) //육지붕일때
         } else {
           //육지붕이 아닐때
           if (allPointsOutside) {
@@ -410,7 +408,7 @@ export function useModuleBasicSetting(tabNum) {
   }
 
   useEffect(() => {
-    if (canvasSetting.roofSizeSet !== '3') {
+    if (canvasSetting.roofSizeSet != '3') {
       if (isObjectNotEmpty(moduleSelectionData) && moduleSelectionData.common.saleStoreNorthFlg === '1') {
         setSaleStoreNorthFlg(true)
       }
@@ -2833,7 +2831,7 @@ export function useModuleBasicSetting(tabNum) {
 
               targetRoof.fire('modified')
               targetSurface.fire('modified')
-              drawDirectionArrow(targetRoof)
+              // drawDirectionArrow(targetRoof)
             }
             canvas.remove(obj)
           })
@@ -2845,7 +2843,7 @@ export function useModuleBasicSetting(tabNum) {
 
             targetRoof.fire('modified')
             surface.fire('modified')
-            drawDirectionArrow(targetRoof)
+            // drawDirectionArrow(targetRoof)
           })
         }
         canvas.renderAll()
@@ -3081,6 +3079,17 @@ export function useModuleBasicSetting(tabNum) {
 
         addCanvasMouseEventListener('mouse:up', (e) => {
           let isIntersection = true
+
+          if (trestlePolygon.modules.length > 0) {
+            //이미 설치된 모듈중에 한개만 가져옴
+            const mixAsgYn = trestlePolygon.modules[0].moduleInfo.mixAsgYn
+            //현재 체크된 모듈기준으로 혼합가능인지 확인 Y === Y, N === N 일때만 설치 가능
+            if (checkedModule[0].mixAsgYn !== mixAsgYn) {
+              swalFire({ text: getMessage('modal.module.basic.setting.module.placement.mix.asg.yn.error') })
+              return
+            }
+          }
+
           if (!inside) return
           if (tempModule) {
             const rectPoints = [
@@ -3154,6 +3163,16 @@ export function useModuleBasicSetting(tabNum) {
   const autoFlatroofModuleSetup = (placementFlatRef) => {
     initEvent() //마우스 이벤트 초기화
 
+    //혼합 가능 모듈과 혼합 불가능 모듈을 선택했을때 카운트를 해서 확인
+    const mixAsgY = checkedModule.filter((obj) => obj.mixAsgYn === 'Y')
+    const mixAsgN = checkedModule.filter((obj) => obj.mixAsgYn === 'N')
+
+    //Y인 모듈과 N인 모듈이 둘다 존재하면 설치 불가
+    if (mixAsgY.length > 0 && mixAsgN.length > 0) {
+      swalFire({ text: getMessage('modal.module.basic.setting.module.placement.mix.asg.yn.error') })
+      return
+    }
+
     const moduleSetupSurfaces = moduleSetupSurface //선택 설치면
     const notSelectedTrestlePolygons = canvas
       ?.getObjects()
@@ -3219,7 +3238,7 @@ export function useModuleBasicSetting(tabNum) {
           targetRoof.setCoords()
           targetSurface.setCoords()
           moduleSetupSurfaces.push(targetSurface)
-          drawDirectionArrow(targetSurface)
+          // drawDirectionArrow(targetSurface)
         }
         canvas.remove(obj)
       })
@@ -3231,7 +3250,7 @@ export function useModuleBasicSetting(tabNum) {
 
         targetRoof.fire('modified')
         surface.fire('modified')
-        drawDirectionArrow(surface)
+        // drawDirectionArrow(surface)
       })
     }
     canvas.renderAll()

src/locales/ja.json

@@ -128,9 +128,9 @@
   "modal.module.basic.setting.module.placement.arrangement.standard.eaves": "軒の側",
   "modal.module.basic.setting.module.placement.arrangement.standard.ridge": "龍丸側",
   "modal.module.basic.setting.module.placement.maximum": "最大配置",
-  "modal.module.basic.setting.pitch.module.placement.standard.setting": "配置基準設定",
+  "modal.module.basic.setting.pitch.module.placement.standard.setting": "配置基準の設定",
-  "modal.module.basic.setting.pitch.module.placement.standard.setting.south": "南向き設置",
+  "modal.module.basic.setting.pitch.module.placement.standard.setting.south": "南向きに設置す",
-  "modal.module.basic.setting.pitch.module.placement.standard.setting.select": "指定した辺を基準に設置",
+  "modal.module.basic.setting.pitch.module.placement.standard.setting.select": "指定した辺を基準に設置する",
   "modal.module.basic.setting.pitch.module.allocation.setting": "割り当て設定",
   "modal.module.basic.setting.pitch.module.allocation.setting.info": "※配置パネルの種類が1種類の場合のみ使用できます。",
   "modal.module.basic.setting.pitch.module.row.amount": "単数",