육지붕 수정

2025-04-09 16:56:43 +09:00 · 2025-04-09 16:56:43 +09:00 · c869e9d5a3
commit c869e9d5a3
parent e71c655d05
5 changed files with 130 additions and 108 deletions
--- a/src/components/floor-plan/modal/basic/BasicSetting.jsx
+++ b/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>
                </>
--- a/src/components/floor-plan/modal/basic/step/Orientation.jsx
+++ b/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, //설치높이
--- a/src/components/floor-plan/modal/basic/step/pitch/PitchPlacement.jsx
+++ b/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="module-table-inner">
-          <div className="roof-module-table">
-            <table>
-              <thead>
-                <tr>
-                  {moduleData.header.map((data) => (
-                    <th key={data.prop} style={{ width: data.width ? data.width : '' }}>
-                      {data.type === 'check' ? (
-                        <div className="d-check-box no-text pop">
-                          <input type="checkbox" id="ch01" disabled />
-                          <label htmlFor="ch01"></label>
-                        </div>
-                      ) : (
-                        data.name
-                      )}
+      <div className="hexagonal-flex-wrap">
+        <div className="module-table-box ">
+          <div className="module-table-inner">
+            <div className="roof-module-table">
+              <table>
+                <thead>
+                  <tr>
+                    <th style={{ width: '70px' }}>
+                      <div className="d-check-box no-text pop">
+                        <input type="checkbox" id="ch01" disabled />
+                        <label htmlFor="ch01"></label>
+                      </div>
                    </th>
-                  ))}
-                </tr>
-              </thead>
-              <tbody>
-                {selectedModules.itemList &&
-                  selectedModules.itemList.map((item, index) => (
-                    <tr key={index}>
-                      <td className="al-c">
-                        <div className="d-check-box no-text pop">
-                          <input
-                            type="checkbox"
-                            id={item.itemId}
-                            name={item.itemId}
-                            checked={selectedItems[item.itemId]}
-                            onChange={handleSelectedItem}
-                          />
-                          <label htmlFor={item.itemId}></label>
-                        </div>
-                      </td>
-                      <td>
-                        <div className="color-wrap">
-                          <span className="color-box" style={{ backgroundColor: item.color }}></span>
-                          <span className="name">{item.itemNm}</span>
-                        </div>
-                      </td>
-                      <td className="al-r">{item.wpOut}</td>
-                    </tr>
-                  ))}
-              </tbody>
-            </table>
+                    <th>{getMessage('module')}</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {selectedModules.itemList &&
+                    selectedModules.itemList.map((item, index) => (
+                      <tr key={index}>
+                        <td className="al-c">
+                          <div className="d-check-box no-text pop">
+                            <input
+                              type="checkbox"
+                              id={item.itemId}
+                              name={item.itemId}
+                              checked={selectedItems[item.itemId]}
+                              onChange={handleSelectedItem}
+                            />
+                            <label htmlFor={item.itemId}></label>
+                          </div>
+                        </td>
+                        <td>
+                          <div className="color-wrap">
+                            <span className="color-box" style={{ backgroundColor: item.color }}></span>
+                            <span className="name">{item.itemNm}</span>
+                          </div>
+                        </td>
+                      </tr>
+                    ))}
+                </tbody>
+              </table>
+            </div>
          </div>
        </div>
-      </div>
-      <div className="module-table-box mb10">
-        <div className="module-table-inner">
-          <div className="hexagonal-wrap">
-            <div className="hexagonal-item">
-              <div className="bold-font">{getMessage('modal.module.basic.setting.pitch.module.placement.standard.setting')}</div>
-            </div>
-            <div className="hexagonal-item">
-              <div className="pop-form-radio">
-                <div className="d-check-radio pop">
-                  <input
-                    type="radio"
-                    name="radio01"
-                    id="ra01"
-                    value={'south'}
-                    defaultChecked={setupLocation === 'south'}
-                    onClick={handleSetupLocation}
-                  />
-                  <label htmlFor="ra01">{getMessage('modal.module.basic.setting.pitch.module.placement.standard.setting.south')}</label>
-                </div>
-                <div className="d-check-radio pop">
-                  <input
-                    type="radio"
-                    name="radio01"
-                    id="ra02"
-                    value={'excreta'}
-                    defaultChecked={setupLocation === 'excreta'}
-                    onClick={handleSetupLocation}
-                  />
-                  <label htmlFor="ra02">{getMessage('modal.module.basic.setting.pitch.module.placement.standard.setting.select')}</label>
-                </div>
-              </div>
+        <div className="module-table-box non-flex">
+          <div className="module-table-inner">
+            <div className="roof-module-table">
+              <table>
+                <thead>
+                  <tr>
+                    <th>{getMessage('modal.module.basic.setting.pitch.module.placement.standard.setting')}</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr>
+                    <td>
+                      <div className="hexagonal-radio-wrap">
+                        <div className="d-check-radio pop mb10">
+                          <input
+                            type="radio"
+                            name="radio01"
+                            id="ra01"
+                            value={'south'}
+                            defaultChecked={setupLocation === 'south'}
+                            onClick={handleSetupLocation}
+                          />
+                          <label htmlFor="ra01">{getMessage('modal.module.basic.setting.pitch.module.placement.standard.setting.south')}</label>
+                        </div>
+                        <div className="d-check-radio pop">
+                          <input
+                            type="radio"
+                            name="radio01"
+                            id="ra02"
+                            value={'excreta'}
+                            defaultChecked={setupLocation === 'excreta'}
+                            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>
--- a/src/hooks/module/useModuleBasicSetting.js
+++ b/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()
--- a/src/locales/ja.json
+++ b/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.south": "南向き設置",
-  "modal.module.basic.setting.pitch.module.placement.standard.setting.select": "指定した辺を基準に設置",
+  "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.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": "単数",