-
- setHasAnglePassivity(!hasAnglePassivity)} />
-
-
-
-
-
checkDegree(e.target.value)
- // setCompasDeg(
-
- // e.target.value === '-' || (e.target.value !== '' && parseInt(e.target.value) <= 180 && parseInt(e.target.value) >= -180)
- // ? e.target.value
- // : 0,
- // )
- }
- />
+
+
+
+
{getMessage('modal.module.basic.setting.module.setting')}
+
+ {moduleList && (
+ handleChangeModule(e)}
+ />
+ )}
+
+
+
+
+
+
+ {moduleData.header.map((header) => {
+ return (
+ |
+ {header.name}
+ |
+ )
+ })}
+
+
+
+ {Array.from({ length: 2 }).map((_, index) => {
+ return selectedModules && selectedModules?.itemList && selectedModules?.itemList?.length >= index + 1 ? (
+
+ |
+
+
+ {selectedModules.itemList[index].itemNm}
+
+ |
+ {Number(selectedModules.itemList[index].shortAxis).toFixed(0)} |
+ {Number(selectedModules.itemList[index].longAxis).toFixed(0)} |
+ {Number(selectedModules.itemList[index].wpOut).toFixed(0)} |
+
+ ) : (
+
+ |
+
+ |
+ |
+ |
+ |
+
+ )
+ })}
+
+
+
+ {basicSetting && basicSetting.roofSizeSet === '3' && (
+
+
{getMessage('modal.module.basic.setting.module.placement.area')}
+
+ setInputInstallHeight(e.target.value)}
+ />
+
+
m
+
+ )}
-
°
+
+ {basicSetting && basicSetting.roofSizeSet !== '3' && (
+
+
+
+
{getMessage('modal.module.basic.setting.module.surface.type')}
+
+ {roughnessCodes.length > 0 && managementState && (
+ {
+ console.log('🚀 ~ handleChangeModule ~ inputRoughness:', e)
+ setInputRoughness(e)
+ }}
+ />
+ )}
+
+
+
+
{getMessage('modal.module.basic.setting.module.fitting.height')}
+
+ setInputInstallHeight(e.target.value)}
+ />
+
+
m
+
+
+
{getMessage('modal.module.basic.setting.module.standard.wind.speed')}
+
+ {windSpeedCodes.length > 0 && managementState && (
+ {
+ console.log('🚀 ~ handleChangeModule ~ inputStandardWindSpeed:', e)
+ setInputStandardWindSpeed(e)
+ }}
+ />
+ )}
+
+
+
+
{getMessage('modal.module.basic.setting.module.standard.snowfall.amount')}
+
+ setInputVerticalSnowCover(e.target.value)}
+ />
+
+
cm
+
+
+
+ )}
diff --git a/src/components/floor-plan/modal/basic/step/Trestle.jsx b/src/components/floor-plan/modal/basic/step/Trestle.jsx
new file mode 100644
index 00000000..a6c62750
--- /dev/null
+++ b/src/components/floor-plan/modal/basic/step/Trestle.jsx
@@ -0,0 +1,532 @@
+import { GlobalDataContext } from '@/app/GlobalDataProvider'
+import QSelectBox from '@/components/common/select/QSelectBox'
+import { useModuleTrestle } from '@/hooks/module/useModuleTrestle'
+import { useMessage } from '@/hooks/useMessage'
+import { currentAngleTypeSelector, pitchTextSelector } from '@/store/canvasAtom'
+import { roofsState } from '@/store/roofAtom'
+import { moduleSelectionDataState, selectedModuleState } from '@/store/selectedModuleOptions'
+import { isObjectNotEmpty } from '@/util/common-utils'
+import { forwardRef, useContext, useEffect, useImperativeHandle, useState } from 'react'
+import { useRecoilState, useRecoilValue } from 'recoil'
+
+const Trestle = forwardRef((props, ref) => {
+ const { setTabNum, trestleTrigger, roofs, setRoofs, moduleSelectionData, setModuleSelectionData } = props
+ const { getMessage } = useMessage()
+ // const [selectedTrestle, setSelectedTrestle] = useState()
+ const currentAngleType = useRecoilValue(currentAngleTypeSelector)
+ const pitchText = useRecoilValue(pitchTextSelector)
+ const [selectedRoof, setSelectedRoof] = useState()
+ const {
+ trestleState,
+ dispatch,
+ raftBaseList,
+ trestleList,
+ constMthdList,
+ roofBaseList,
+ constructionList,
+ eavesMargin,
+ ridgeMargin,
+ kerabaMargin,
+ setEavesMargin,
+ setRidgeMargin,
+ setKerabaMargin,
+ cvrYn,
+ cvrChecked,
+ snowGdPossYn,
+ snowGdChecked,
+ setCvrYn,
+ setCvrChecked,
+ setSnowGdPossYn,
+ setSnowGdChecked,
+ } = useModuleTrestle({
+ selectedRoof,
+ })
+ const selectedModules = useRecoilValue(selectedModuleState) //선택된 모듈
+ // const [moduleSelectionData, setModuleSelectionData] = useRecoilState(moduleSelectionDataState)
+ const [lengthBase, setLengthBase] = useState(0)
+ const [hajebichi, setHajebichi] = useState(0)
+ const [selectedRaftBase, setSelectedRaftBase] = useState(null)
+ const [selectedTrestle, setSelectedTrestle] = useState(null)
+ const [selectedConstMthd, setSelectedConstMthd] = useState(null)
+ const [selectedConstruction, setSelectedConstruction] = useState(null)
+ const [selectedRoofBase, setSelectedRoofBase] = useState(null)
+ const { managementState } = useContext(GlobalDataContext)
+
+ useEffect(() => {
+ if (roofs && !selectedRoof) {
+ setSelectedRoof(roofs[0])
+ }
+ }, [roofs])
+
+ useEffect(() => {
+ if (selectedRoof) {
+ dispatch({ type: 'SET_INITIALIZE', roof: { ...selectedRoof, moduleTpCd: selectedModules.itemTp } })
+ }
+ }, [selectedRoof])
+
+ useEffect(() => {
+ if (raftBaseList.length > 0) setSelectedRaftBase(raftBaseList.find((raft) => raft.clCode === trestleState?.raftBaseCd) ?? null)
+ }, [raftBaseList])
+
+ useEffect(() => {
+ if (trestleList.length > 0) setSelectedTrestle(trestleList.find((trestle) => trestle.trestleMkrCd === trestleState?.trestleMkrCd) ?? null)
+ }, [trestleList])
+
+ useEffect(() => {
+ if (roofBaseList.length > 0) setSelectedRoofBase(roofBaseList.find((roofBase) => roofBase.roofBaseCd === trestleState?.roofBaseCd) ?? null)
+ }, [roofBaseList])
+
+ useEffect(() => {
+ if (constMthdList.length > 0) setSelectedConstMthd(constMthdList.find((constMthd) => constMthd.constMthdCd === trestleState?.constMthdCd) ?? null)
+ }, [constMthdList])
+
+ useEffect(() => {
+ if (constructionList.length > 0) {
+ setSelectedConstruction(constructionList.find((construction) => construction.constTp === trestleState?.constTp) ?? null)
+ }
+ }, [constructionList])
+
+ const getConstructionState = (index) => {
+ if (constructionList && constructionList.length > 0) {
+ if (constructionList[index].constPossYn === 'Y') {
+ if (trestleState && trestleState.constTp === constructionList[index].constTp) {
+ return 'blue'
+ }
+ return 'white'
+ }
+ return 'no-click'
+ }
+ return 'no-click'
+ }
+
+ const onChangeRaftBase = (e) => {
+ setSelectedRaftBase(e)
+ dispatch({
+ type: 'SET_RAFT_BASE',
+ roof: {
+ moduleTpCd: selectedModules.itemTp ?? '',
+ roofMatlCd: selectedRoof?.roofMatlCd ?? '',
+ raftBaseCd: e.clCode,
+ },
+ })
+ }
+
+ const onChangeTrestleMaker = (e) => {
+ setSelectedTrestle(e)
+ dispatch({
+ type: 'SET_TRESTLE_MAKER',
+ roof: {
+ moduleTpCd: selectedModules.itemTp ?? '',
+ roofMatlCd: selectedRoof?.roofMatlCd ?? '',
+ raftBaseCd: trestleState.raftBaseCd ?? '',
+ trestleMkrCd: e.trestleMkrCd,
+ },
+ })
+ }
+
+ const onChangeConstMthd = (e) => {
+ setSelectedConstMthd(e)
+ dispatch({
+ type: 'SET_CONST_MTHD',
+ roof: {
+ moduleTpCd: selectedModules.itemTp ?? '',
+ roofMatlCd: selectedRoof?.roofMatlCd ?? '',
+ raftBaseCd: trestleState.raftBaseCd ?? '',
+ trestleMkrCd: trestleState.trestleMkrCd,
+ constMthdCd: e.constMthdCd,
+ },
+ })
+ }
+
+ const onChangeRoofBase = (e) => {
+ setSelectedRoofBase(e)
+ dispatch({
+ type: 'SET_ROOF_BASE',
+ roof: {
+ moduleTpCd: selectedModules.itemTp ?? '',
+ roofMatlCd: selectedRoof?.roofMatlCd ?? '',
+ raftBaseCd: trestleState.raftBaseCd ?? '',
+ trestleMkrCd: trestleState.trestleMkrCd,
+ constMthdCd: trestleState.constMthdCd,
+ roofBaseCd: e.roofBaseCd,
+ illuminationTp: managementState?.surfaceTypeValue ?? '',
+ instHt: managementState?.installHeight ?? '',
+ stdWindSpeed: managementState?.standardWindSpeedId ?? '',
+ stdSnowLd: managementState?.verticalSnowCover ?? '',
+ inclCd: selectedRoof?.pitch ?? 0,
+ roofPitch: Math.round(selectedRoof?.roofPchBase ?? 0),
+ },
+ })
+ }
+ const handleChangeRoofMaterial = (index) => {
+ const newAddedRoofs = roofs.map((roof, i) => {
+ if (i === selectedRoof.index) {
+ return {
+ ...selectedRoof,
+ ...trestleState,
+ eavesMargin,
+ ridgeMargin,
+ kerabaMargin,
+ cvrYn,
+ snowGdPossYn,
+ cvrChecked,
+ snowGdChecked,
+ }
+ }
+ return { ...roof }
+ })
+ setRoofs(newAddedRoofs)
+ setSelectedRoof(newAddedRoofs[index])
+ }
+
+ const handleConstruction = (index) => {
+ if (constructionList[index]?.constPossYn === 'Y') {
+ dispatch({
+ type: 'SET_CONSTRUCTION',
+ roof: {
+ moduleTpCd: selectedModules.itemTp ?? '',
+ roofMatlCd: selectedRoof?.roofMatlCd ?? '',
+ raftBaseCd: trestleState.raftBaseCd ?? '',
+ trestleMkrCd: trestleState.trestleMkrCd,
+ constMthdCd: trestleState.constMthdCd,
+ roofBaseCd: trestleState.roofBaseCd,
+ illuminationTp: managementState?.surfaceTypeValue ?? '',
+ instHt: managementState?.installHeight ?? '',
+ stdWindSpeed: managementState?.standardWindSpeedId ?? '',
+ stdSnowLd: +managementState?.verticalSnowCover ?? '',
+ inclCd: selectedRoof?.pitch.toString() ?? 0,
+ roofPitch: Math.round(selectedRoof?.roofPchBase ?? 0),
+ constTp: constructionList[index].constTp,
+ mixMatlNo: selectedModules.mixMatlNo,
+ workingWidth: selectedRoof?.length.toString() ?? '',
+ // snowGdPossYn: constructionList[index].snowGdPossYn,
+ // cvrYn: constructionList[index].cvrYn,
+ },
+ })
+
+ setCvrYn(constructionList[index].cvrYn)
+ setSnowGdPossYn(constructionList[index].snowGdPossYn)
+ setCvrChecked(false)
+ setSnowGdChecked(false)
+ }
+ }
+
+ const isComplete = () => {
+ const newAddedRoofs = roofs.map((roof, i) => {
+ if (i === selectedRoof?.index) {
+ return {
+ ...selectedRoof,
+ ...trestleState,
+ eavesMargin,
+ ridgeMargin,
+ kerabaMargin,
+ cvrYn,
+ snowGdPossYn,
+ cvrChecked,
+ snowGdChecked,
+ }
+ }
+ return { ...roof }
+ })
+
+ let result = true
+ newAddedRoofs.forEach((roof) => {
+ if (roof.eavesMargin && roof.ridgeMargin && roof.kerabaMargin) {
+ return true
+ }
+
+ if (!roof.trestleMkrCd) result = false
+ if (!roof.constMthdCd) result = false
+ if (!roof.roofBaseCd) result = false
+ if (!roof.constTp) result = false
+
+ if (selectedRoof.lenAuth === 'C') {
+ if (!trestleState?.lengthBase) result = false
+ }
+ if (['C', 'R'].includes(selectedRoof.raftAuth)) {
+ if (!roof.raftBaseCd) result = false
+ }
+
+ if (['C', 'R'].includes(selectedRoof.roofPchAuth)) {
+ if (!roof.roofPchBase) result = false
+ }
+ })
+
+ console.log('newAddedRoofs', newAddedRoofs)
+
+ if (result) {
+ setRoofs(newAddedRoofs)
+ setModuleSelectionData({
+ ...moduleSelectionData,
+ roofConstruction: {
+ ...newAddedRoofs,
+ },
+ })
+ trestleTrigger({
+ roofConstruction: newAddedRoofs.map((roof) => {
+ return {
+ roofIndex: roof.index,
+ addRoof: {
+ ...roof,
+ },
+ trestle: {
+ ...selectedTrestle,
+ raftBaseCd: roof.raftBaseCd,
+ },
+ construction: {
+ ...constructionList.find((construction) => trestleState.constTp === construction.constTp),
+ roofIndex: roof.index,
+ setupCover: roof.cvrYn === 'Y',
+ setupSnowCover: roof.snowGdYn === 'Y',
+ selectedIndex: roof.index,
+ },
+ }
+ }),
+ })
+ }
+
+ return result
+ }
+
+ useImperativeHandle(ref, () => ({
+ isComplete,
+ }))
+
+ return (
+
+
+
+ {roofs &&
+ roofs.map((roof, index) => (
+
+ ))}
+
+
+
+
+
+ {selectedRoof && selectedRoof.lenAuth === 'C' && (
+ <>
+
+
L
+
+
+ setLengthBase(e.target.value)}
+ disabled={selectedRoof.lenAuth === 'R'}
+ />
+
+
+
+
+ )}
+ {selectedRoof && ['C', 'R'].includes(selectedRoof.raftAuth) && (
+ <>
+
+
{getMessage('modal.module.basic.setting.module.rafter.margin')}
+
+
+ {raftBaseList.length > 0 && (
+ onChangeRaftBase(e)}
+ />
+ )}
+
+
+
+
+ )}
+ {selectedRoof && ['C', 'R'].includes(selectedRoof.roofPchAuth) && (
+ <>
+
+
{getMessage('modal.module.basic.setting.module.hajebichi')}
+
+
+ handleHajebichiAndLength(e, 'hajebichi')}
+ value={hajebichi}
+ />
+
+
+
+
+ )}
+
+
{getMessage('modal.module.basic.setting.module.trestle.maker')}
+
+
+ {trestleList && (
+ onChangeTrestleMaker(e)}
+ />
+ )}
+
+
+
+
+
{getMessage('modal.module.basic.setting.module.construction.method')}
+
+
+ {constMthdList && (
+ onChangeConstMthd(e)}
+ />
+ )}
+
+
+
+
+
{getMessage('modal.module.basic.setting.module.under.roof')}
+
+
+ {roofBaseList && (
+ onChangeRoofBase(e)}
+ />
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
{getMessage('modal.module.basic.setting.module.placement.area')}
+
+
{getMessage('modal.module.basic.setting.module.placement.area.eaves')}
+
+ dispatch({ type: 'SET_TRESTLE_DETAIL', roof: { ...trestleState, eavesMargin: e.target.value } })}
+ onChange={(e) => setEavesMargin(e.target.value)}
+ />
+
+
mm
+
+
+
{getMessage('modal.module.basic.setting.module.placement.area.ridge')}
+
+ dispatch({ type: 'SET_TRESTLE_DETAIL', roof: { ...trestleState, ridgeMargin: e.target.value } })}
+ onChange={(e) => setRidgeMargin(e.target.value)}
+ />
+
+
mm
+
+
+
{getMessage('modal.module.basic.setting.module.placement.area.keraba')}
+
+ dispatch({ type: 'SET_TRESTLE_DETAIL', roof: { ...trestleState, kerabaMargin: e.target.value } })}
+ onChange={(e) => setKerabaMargin(e.target.value)}
+ />
+
+
mm
+
+
+
+
+
+
+
+
+ {getMessage('modal.module.basic.setting.module.setting.info1')}
+
+ {getMessage('modal.module.basic.setting.module.setting.info2')}
+
+
+
+
+
+ )
+})
+
+export default Trestle
diff --git a/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx b/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx
index e2e499b6..9d0d7d63 100644
--- a/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx
+++ b/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx
@@ -19,7 +19,6 @@ import { getChonByDegree, getDegreeByChon } from '@/util/canvas-util'
import { usePolygon } from '@/hooks/usePolygon'
import { canvasState } from '@/store/canvasAtom'
import { useRoofFn } from '@/hooks/common/useRoofFn'
-import { usePlan } from '@/hooks/usePlan'
/**
* 지붕 레이아웃
@@ -46,7 +45,6 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, pla
const { setSurfaceShapePattern } = useRoofFn()
const canvas = useRecoilValue(canvasState)
const roofDisplay = useRecoilValue(roofDisplaySelector)
- const { saveCanvas } = usePlan()
const roofRef = {
roofCd: useRef(null),
diff --git a/src/hooks/common/useCanvasPopupStatusController.js b/src/hooks/common/useCanvasPopupStatusController.js
index a31bd0ed..4a6ed6dd 100644
--- a/src/hooks/common/useCanvasPopupStatusController.js
+++ b/src/hooks/common/useCanvasPopupStatusController.js
@@ -1,6 +1,6 @@
'use client'
-import { useRecoilState, useRecoilValue } from 'recoil'
+import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
import useSWRMutation from 'swr/mutation'
import { useAxios } from '../useAxios'
import { unescapeString } from '@/util/common-utils'
@@ -10,6 +10,8 @@ import { canvasState, currentCanvasPlanState } from '@/store/canvasAtom'
import { POLYGON_TYPE } from '@/common/common'
import { useCircuitTrestle } from '../useCirCuitTrestle'
import { useEffect } from 'react'
+import { addedRoofsState } from '@/store/settingAtom'
+import { roofsState } from '@/store/roofAtom'
/**
* 캔버스 팝업 상태 관리
@@ -19,13 +21,14 @@ import { useEffect } from 'react'
export function useCanvasPopupStatusController(param = 1) {
const popupType = parseInt(param)
- const [compasDeg, setCompasDeg] = useRecoilState(compasDegAtom)
- const [moduleSelectionDataStore, setModuleSelectionDataStore] = useRecoilState(moduleSelectionDataState)
- const [selectedModules, setSelectedModules] = useRecoilState(selectedModuleState)
+ const setCompasDeg = useSetRecoilState(compasDegAtom)
+ const setModuleSelectionDataStore = useSetRecoilState(moduleSelectionDataState)
+ const setSelectedModules = useSetRecoilState(selectedModuleState)
const { get, promiseGet, getFetcher, postFetcher } = useAxios()
const canvas = useRecoilValue(canvasState)
const currentCanvasPlan = useRecoilValue(currentCanvasPlanState)
-
+ const [addedRoofs, setAddedRoofs] = useRecoilState(addedRoofsState)
+ const [roofs, setRoofs] = useRecoilState(roofsState)
/**
* 팝업 상태 조회
* @param {number} popupTypeParam
@@ -53,19 +56,27 @@ export function useCanvasPopupStatusController(param = 1) {
const handleModuleSelectionTotal = async () => {
for (let i = 1; i < 3; i++) {
const result = await getModuleSelection(i)
- console.log('🚀 ~ handleModuleSelectionTotal ~ result:', result)
if (!result.objectNo) return
if (i === 1) {
- setCompasDeg(result.popupStatus)
+ if (result.popupStatus && unescapeString(result.popupStatus)) {
+ const data = JSON.parse(unescapeString(result.popupStatus))
+
+ if (data?.compasDeg) setCompasDeg(data.compasDeg)
+ if (data?.module) setSelectedModules(data.module)
+ setModuleSelectionDataStore(data)
+ }
} else if (i === 2) {
const data = JSON.parse(unescapeString(result.popupStatus))
- setModuleSelectionDataStore(data)
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)
})
- if (data.module) setSelectedModules(data.module)
+ if (data.roofConstruction) {
+ setRoofs(data.roofConstruction)
+ // setManagementState({ ...managementState, roofs: data.roofConstruction.map((roof) => roof.construction.managementState) })
+ }
+ // if (data?.module) setManagementState(data.common.managementState)
}
}
}
@@ -80,7 +91,8 @@ export function useCanvasPopupStatusController(param = 1) {
objectNo: currentCanvasPlan.objectNo,
planNo: parseInt(currentCanvasPlan.planNo),
popupType: popupType.toString(),
- popupStatus: popupType === 1 ? arg : JSON.stringify(arg).replace(/"/g, '\"'),
+ // popupStatus: popupType === 1 ? arg : JSON.stringify(arg).replace(/"/g, '\"'),
+ popupStatus: JSON.stringify(arg).replace(/"/g, '\"'),
}
postFetcher(`/api/v1/canvas-popup-status`, params)
},
diff --git a/src/hooks/module/useModule.js b/src/hooks/module/useModule.js
index db4762b1..4397ebb1 100644
--- a/src/hooks/module/useModule.js
+++ b/src/hooks/module/useModule.js
@@ -991,14 +991,14 @@ export function useModule() {
const getRowModules = (target) => {
return canvas
.getObjects()
- .filter((obj) => target.surfaceId === obj.surfaceId && obj.name === POLYGON_TYPE.MODULE && obj.top === target.top)
+ .filter((obj) => target.surfaceId === obj.surfaceId && obj.name === POLYGON_TYPE.MODULE && Math.abs(obj.top - target.top) < 1)
.sort((a, b) => a.left - b.left)
}
const getColumnModules = (target) => {
return canvas
.getObjects()
- .filter((obj) => target.surfaceId === obj.surfaceId && obj.name === POLYGON_TYPE.MODULE && obj.left === target.left)
+ .filter((obj) => target.surfaceId === obj.surfaceId && obj.name === POLYGON_TYPE.MODULE && Math.abs(obj.left - target.left) < 1)
.sort((a, b) => a.top - b.top)
}
diff --git a/src/hooks/module/useModuleSelection.js b/src/hooks/module/useModuleSelection.js
index 8fa274a4..1373ea05 100644
--- a/src/hooks/module/useModuleSelection.js
+++ b/src/hooks/module/useModuleSelection.js
@@ -19,9 +19,9 @@ export function useModuleSelection(props) {
const [moduleList, setModuleList] = useState([{}]) //모듈 목록
const [selectedSurfaceType, setSelectedSurfaceType] = useState({}) //선택된 면조도
- const [installHeight, setInstallHeight] = useState() //설치 높이
- const [standardWindSpeed, setStandardWindSpeed] = useState({}) //기준풍속
- const [verticalSnowCover, setVerticalSnowCover] = useState() //수직적설량
+ const [installHeight, setInstallHeight] = useState(managementState?.installHeight) //설치 높이
+ const [standardWindSpeed, setStandardWindSpeed] = useState() //기준풍속
+ const [verticalSnowCover, setVerticalSnowCover] = useState(managementState?.verticalSnowCover) //수직적설량
const [selectedModules, setSelectedModules] = useRecoilState(selectedModuleState) //선택된 모듈
const [moduleSelectionInitParams, setModuleSelectionInitParams] = useRecoilState(moduleSelectionInitParamsState) //모듈 기본 데이터 ex) 면조도, 높이등등
@@ -32,6 +32,7 @@ export function useModuleSelection(props) {
const { restoreModuleInstArea } = useModuleBasicSetting()
const bindInitData = () => {
+ console.log('bindInitData', managementState)
setInstallHeight(managementState?.installHeight)
setStandardWindSpeed(managementState?.standardWindSpeedId)
setVerticalSnowCover(managementState?.verticalSnowCover)
@@ -184,14 +185,6 @@ export function useModuleSelection(props) {
})
}
- useEffect(() => {
- // console.log('installHeight', installHeight)
- }, [installHeight])
-
- useEffect(() => {
- // console.log('verticalSnowCover', verticalSnowCover)
- }, [verticalSnowCover])
-
//TODO: 설치높이, 기준적설량 debounce 적용해서 추가해야됨
// useEffect(() => {
@@ -226,11 +219,17 @@ export function useModuleSelection(props) {
roughnessCodes,
windSpeedCodes,
managementState,
+ setManagementState,
moduleList,
+ setSelectedModules,
selectedSurfaceType,
+ setSelectedSurfaceType,
installHeight,
+ setInstallHeight,
standardWindSpeed,
+ setStandardWindSpeed,
verticalSnowCover,
+ setVerticalSnowCover,
handleChangeModule,
handleChangeSurfaceType,
handleChangeWindSpeed,
diff --git a/src/locales/ja.json b/src/locales/ja.json
index 82918191..50c2a087 100644
--- a/src/locales/ja.json
+++ b/src/locales/ja.json
@@ -18,6 +18,7 @@
"plan.menu.placement.surface.initial.setting": "配置面初期設定",
"modal.placement.initial.setting.plan.drawing": "図面の作成方法",
"modal.placement.initial.setting.plan.drawing.size.stuff": "寸法入力による物件作成",
+ "modal.placement.initial.setting.plan.drawing.size.info": "※数字は[半角]入力のみ可能です。",
"modal.placement.initial.setting.size": "寸法入力方法",
"modal.placement.initial.setting.size.info": "寸法入力方法案内",
"modal.placement.initial.setting.size.roof": "伏図入力",
@@ -88,13 +89,17 @@
"plan.menu.module.circuit.setting.default": "モジュール/架台設定",
"modal.module.basic.setting.orientation.setting": "方位設定",
"modal.module.basic.setting.orientation.setting.info": "※シミュレーション計算用方位を指定します。南の方位を設定してください。",
- "modal.module.basic.setting.orientation.setting.angle.passivity": "勾配を直接入力",
+ "modal.module.basic.setting.orientation.setting.angle.passivity": "角度変更",
"modal.module.basic.setting.module.roof.material": "屋根材",
"modal.module.basic.setting.module.trestle.maker": "架台メーカー",
"modal.module.basic.setting.module.rafter.margin": "垂木の間隔",
"modal.module.basic.setting.module.construction.method": "工法",
"modal.module.basic.setting.module.under.roof": "屋根の下",
"modal.module.basic.setting.module.setting": "モジュールの選択",
+ "modal.module.basic.setting.module.placement.area": "モジュール配置領域",
+ "modal.module.basic.setting.module.placement.area.eaves": "軒側",
+ "modal.module.basic.setting.module.placement.area.ridge": "棟側",
+ "modal.module.basic.setting.module.placement.area.keraba": "けらぱ",
"modal.module.basic.setting.module.hajebichi": "ハゼピッチ",
"modal.module.basic.setting.module.setting.info1": "※勾配の範囲には制限があります。屋根傾斜が2.5値未満10値を超える場合は、施工が可能かどうか施工マニュアルを確認してください。",
"modal.module.basic.setting.module.setting.info2": "※モジュール配置時は、施工マニュアルに記載されている＜モジュール配置条件＞を必ずご確認ください。",
@@ -112,12 +117,16 @@
"modal.module.basic.setting.module.placement": "モジュールの配置",
"modal.module.basic.setting.module.placement.select.fitting.type": "設置形態を選択してください。",
"modal.module.basic.setting.module.placement.waterfowl.arrangement": "千鳥配置",
+ "modal.module.basic.setting.module.placement.max.row.amount": "Max単数",
+ "modal.module.basic.setting.module.placement.mix.max.row.amount": "混合Max単数",
+ "modal.module.basic.setting.module.placement.row.amount": "単数",
+ "modal.module.basic.setting.module.placement.column.amount": "熱水",
"modal.module.basic.setting.module.placement.do": "する",
"modal.module.basic.setting.module.placement.do.not": "しない",
"modal.module.basic.setting.module.placement.arrangement.standard": "配置基準",
"modal.module.basic.setting.module.placement.arrangement.standard.center": "中央",
- "modal.module.basic.setting.module.placement.arrangement.standard.eaves": "軒",
- "modal.module.basic.setting.module.placement.arrangement.standard.ridge": "棟",
+ "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": "南向き設置",
@@ -128,9 +137,10 @@
"modal.module.basic.setting.pitch.module.row.margin": "上下間隔",
"modal.module.basic.setting.pitch.module.column.amount": "列数",
"modal.module.basic.setting.pitch.module.column.margin": "左右間隔",
- "modal.module.basic.setting.prev": "前に戻る",
+ "modal.module.basic.setting.prev": "移転",
+ "modal.module.basic.setting.row.batch": "単数指定配置",
"modal.module.basic.setting.passivity.placement": "手動配置",
- "modal.module.basic.setting.auto.placement": "設定値に自動配置",
+ "modal.module.basic.setting.auto.placement": "自動配置",
"plan.menu.module.circuit.setting.circuit.trestle.setting": "回路設定",
"modal.circuit.trestle.setting": "回路設定",
"modal.circuit.trestle.setting.alloc.trestle": "架台配置",
@@ -594,7 +604,6 @@
"myinfo.message.password.error": "パスワードが間違っています。",
"login": "ログイン",
"login.auto.page.text": "自動ログイン中です。",
- "login.fail": "アカウントが存在しないか、パスワードが間違っています。",
"login.id.save": "ID保存",
"login.id.placeholder": "IDを入力してください。",
"login.password.placeholder": "パスワードを入力してください。",
diff --git a/src/locales/ko.json b/src/locales/ko.json
index 39d48c9e..abd8594b 100644
--- a/src/locales/ko.json
+++ b/src/locales/ko.json
@@ -18,6 +18,7 @@
"plan.menu.placement.surface.initial.setting": "배치면 초기설정",
"modal.placement.initial.setting.plan.drawing": "도면 작성방법",
"modal.placement.initial.setting.plan.drawing.size.stuff": "치수 입력에 의한 물건 작성",
+ "modal.placement.initial.setting.plan.drawing.size.info": "※숫자는 [반각] 입력만 가능합니다.",
"modal.placement.initial.setting.size": "치수 입력방법",
"modal.placement.initial.setting.size.info": "치수 입력방법 안내",
"modal.placement.initial.setting.size.roof": "복시도 입력",
@@ -88,13 +89,17 @@
"plan.menu.module.circuit.setting.default": "모듈/가대설정",
"modal.module.basic.setting.orientation.setting": "방위 설정",
"modal.module.basic.setting.orientation.setting.info": "※시뮬레이션 계산용 방위를 지정합니다. 남쪽의 방위를 설정해주세요.",
- "modal.module.basic.setting.orientation.setting.angle.passivity": "각도를 직접 입력",
+ "modal.module.basic.setting.orientation.setting.angle.passivity": "각도 입력",
"modal.module.basic.setting.module.roof.material": "지붕재",
"modal.module.basic.setting.module.trestle.maker": "가대메이커",
"modal.module.basic.setting.module.rafter.margin": "서까래 간격",
"modal.module.basic.setting.module.construction.method": "공법",
"modal.module.basic.setting.module.under.roof": "지붕밑바탕",
"modal.module.basic.setting.module.setting": "모듈 선택",
+ "modal.module.basic.setting.module.placement.area": "모듈 배치 영역",
+ "modal.module.basic.setting.module.placement.area.eaves": "처마쪽",
+ "modal.module.basic.setting.module.placement.area.ridge": "용마루쪽",
+ "modal.module.basic.setting.module.placement.area.keraba": "케라바쪽",
"modal.module.basic.setting.module.hajebichi": "망둥어 피치",
"modal.module.basic.setting.module.setting.info1": "※ 구배의 범위에는 제한이 있습니다. 지붕경사가 2.5치 미만 10치를 초과하는 경우에는 시공이 가능한지 시공 매뉴얼을 확인해주십시오.",
"modal.module.basic.setting.module.setting.info2": "※ 모듈 배치 시에는 시공 매뉴얼에 기재된 <모듈 배치 조건>을 반드시 확인해주십시오.",
@@ -112,12 +117,16 @@
"modal.module.basic.setting.module.placement": "모듈 배치",
"modal.module.basic.setting.module.placement.select.fitting.type": "설치형태를 선택합니다.",
"modal.module.basic.setting.module.placement.waterfowl.arrangement": "물떼새 배치",
+ "modal.module.basic.setting.module.placement.max.row.amount": "Max 단수",
+ "modal.module.basic.setting.module.placement.mix.max.row.amount": "혼합Max 단수",
+ "modal.module.basic.setting.module.placement.row.amount": "단수",
+ "modal.module.basic.setting.module.placement.column.amount": "열수",
"modal.module.basic.setting.module.placement.do": "한다",
"modal.module.basic.setting.module.placement.do.not": "하지 않는다",
"modal.module.basic.setting.module.placement.arrangement.standard": "배치 기준",
"modal.module.basic.setting.module.placement.arrangement.standard.center": "중앙",
- "modal.module.basic.setting.module.placement.arrangement.standard.eaves": "처마",
- "modal.module.basic.setting.module.placement.arrangement.standard.ridge": "용마루",
+ "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": "남향설치",
@@ -129,6 +138,7 @@
"modal.module.basic.setting.pitch.module.column.amount": "열수",
"modal.module.basic.setting.pitch.module.column.margin": "좌우간격",
"modal.module.basic.setting.prev": "이전",
+ "modal.module.basic.setting.row.batch": "단수지정 배치",
"modal.module.basic.setting.passivity.placement": "수동 배치",
"modal.module.basic.setting.auto.placement": "설정값으로 자동 배치",
"plan.menu.module.circuit.setting.circuit.trestle.setting": "회로설정",
diff --git a/src/styles/_contents.scss b/src/styles/_contents.scss
index 10a04637..bfd7b1f8 100644
--- a/src/styles/_contents.scss
+++ b/src/styles/_contents.scss
@@ -340,6 +340,14 @@
&.active{
top: calc(92.8px + 50px);
}
+ .canvas-id{
+ display: flex;
+ align-items: center;
+ padding: 9.6px 20px;
+ font-size: 12px;
+ color: #fff;
+ background-color: #1083E3;
+ }
.canvas-plane-wrap{
display: flex;
align-items: center;
diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss
index 65b104b7..fef7c2fd 100644
--- a/src/styles/_modal.scss
+++ b/src/styles/_modal.scss
@@ -279,10 +279,11 @@ $alert-color: #101010;
border-bottom: 1px solid #424242;
}
}
-.grid-check-form-block{
- display: block;
- > div{
- margin-bottom: 10px;
+.grid-check-form-flex{
+ display: flex;
+ gap: 10px;
+ .d-check-box{
+ flex: 1;
}
}
.grid-option-overflow{
@@ -1313,13 +1314,13 @@ $alert-color: #101010;
.circle {
position: absolute;
- width: 12px;
- height: 12px;
+ width: 10px;
+ height: 10px;
border: 1px solid #fff;
border-radius: 50%;
- top: 95%;
+ top: 88%;
left: 50%;
- transform-origin: 0 -90px; /* 중심에서 반지름 거리만큼 떨어져 위치 */
+ transform-origin: 0 -76px; /* 중심에서 반지름 거리만큼 떨어져 위치 */
cursor:pointer;
z-index: 3;
/* 0번을 180도 위치(아래)에, 13번을 0도 위치(위)에 배치 */
@@ -1366,8 +1367,8 @@ $alert-color: #101010;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
- width: 5px;
- height: 5px;
+ width: 4px;
+ height: 4px;
background-color: #fff;
border-radius: 50%;
}
@@ -1381,15 +1382,15 @@ $alert-color: #101010;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
- width: 148px;
- height: 148px;
+ width: 121px;
+ height: 121px;
border: 4px solid #fff;
border-radius: 50%;
.compas-arr{
width: 100%;
height: 100%;
background: url(../../public/static/images/canvas/compas.svg)no-repeat center;
- background-size: 122px 122px;
+ background-size: 100px 100px;
}
}
}
@@ -1441,10 +1442,10 @@ $alert-color: #101010;
.roof-module-compas{
margin-bottom: 24px;
.compas-box-inner{
- width: 280px;
- height: 253px;
+ width: 235px;
+ height: 215px;
.circle{
- top: 86%;
+ top: 85%;
// &:nth-child(1),
// &:nth-child(7),
// &:nth-child(13),
@@ -1461,7 +1462,7 @@ $alert-color: #101010;
// }
// }
i{
- top: 22px;
+ top: 19px;
}
&.act{
i{color: #8B8B8B;}
@@ -1482,6 +1483,10 @@ $alert-color: #101010;
.outline-form{
flex: 1;
}
+ .non-flex{
+ min-width: 300px;
+ flex: none;
+ }
}
.module-box-tab{
@@ -2172,31 +2177,46 @@ $alert-color: #101010;
&.tab2{
margin-top: 10px;
gap: 15px;
-
+ .eaves-keraba-table{
+ margin-top: 0;
+ }
}
.module-flex-item{
flex: 1;
- .module-flex-item-tit{
- font-size: 12px;
- font-weight: 500;
- color: #fff;
- padding-bottom: 10px;
- border-bottom: 1px solid #4D4D4D;
- }
+
.flex-item-btn-wrap{
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
- margin-bottom: 24px;
+ margin-bottom: 10px;
}
&.non-flex{
display: flex;
flex-direction: column;
justify-content: flex-start;
flex: none;
- padding-top: 27.5px;
- width: 260px;
+ width: 340px;
}
+ .flex-item-button{
+ margin-top: 10px;
+ button{
+ width: 100%;
+ }
+ }
+ }
+}
+.module-flex-item-tit-wrap{
+ display: flex;
+ align-items: center;
+ padding-bottom: 10px;
+ border-bottom: 1px solid #4D4D4D;
+ .module-flex-item-tit{
+ font-size: 12px;
+ font-weight: 500;
+ color: #fff;
+ }
+ button{
+ margin-left: auto;
}
}
@@ -2277,4 +2297,129 @@ $alert-color: #101010;
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5), -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #fff;
}
}
+}
+
+.roof-module-inner{
+ display: flex;
+ .compas-wrapper{
+ position: relative;
+ flex: none;
+ width: 300px;
+ padding-right: 15px;
+ &:before{
+ content: '';
+ position: absolute;
+ top: 0;
+ right: 10px;
+ width: 1px;
+ height: 100%;
+ background-color: #424242;
+ }
+ }
+ .compas-table-wrap{
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+
+
+ }
+ .compas-table-box{
+ background-color: #3D3D3D;
+ padding: 10px;
+ .outline-form{
+ span{
+ width: auto;
+ }
+ }
+ .compas-grid-table{
+ display: grid;
+ gap: 10px;
+ grid-template-columns: repeat(2, 1fr);
+ .outline-form{
+ span{
+ width: 65px;
+ &.thin{
+ width: 20px;
+ }
+ }
+ }
+ }
+ }
+}
+
+
+.module-table-block-wrap{
+ .roof-module-table{
+ &.self{
+ table{
+ table-layout: fixed;
+ }
+ }
+ }
+ .self-table-radio{
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+}
+
+.module-area{
+ display: flex;
+ align-items: center;
+ .module-area-title{
+ flex: none;
+ font-size: 12px;
+ color: #fff;
+ font-weight: 500;
+ margin-right: 20px;
+ }
+ .outline-form{
+ flex: 1;
+ }
+}
+
+.placement-name-guide{
+ font-size: 11px;
+ margin-left: 10px;
+ color: #53a7eb;
+ font-weight: 500;
+}
+
+.hexagonal-flex-wrap{
+ display: flex;
+ gap: 10px;
+ .non-flex{
+ flex: none;
+ }
+}
+
+.hexagonal-radio-wrap{
+ padding: 17px 10px;
+}
+
+.hide-check-guide{
+ display: flex;
+ align-items: center;
+ font-size: 12px;
+ color: #fff;
+ margin-top: 10px;
+ font-weight: 500;
+ .arr{
+ width: 13px;
+ height: 13px;
+ margin-left: 10px;
+ background: url(../../public/static/images/canvas/hide-check-arr.svg) no-repeat center;
+ background-size: contain;
+ transform: rotate(180deg);
+ &.act{
+ transform: rotate(0deg);
+ }
+ }
+}
+
+.module-table-box{
+ &.hide{
+ overflow: hidden;
+ height: 0;
+ }
}
\ No newline at end of file
diff --git a/src/styles/_reset.scss b/src/styles/_reset.scss
index 34dcaf33..fab3eb04 100644
--- a/src/styles/_reset.scss
+++ b/src/styles/_reset.scss
@@ -222,15 +222,16 @@ button{
padding: 0 10px;
line-height: 28px;
font-family: 'Noto Sans JP', sans-serif;
- background-color: transparent;
+ background-color: #353535;
border: 1px solid #484848;
color: #fff;
&.blue{
background-color: #4C6FBF;
border: 1px solid #4C6FBF;
&:hover{
- background-color: #414E6C;
- border: 1px solid #414E6C;
+ background-color: #4C6FBF;
+ border: 1px solid #4C6FBF;
+ font-weight: normal;
}
}
&.white{
@@ -241,13 +242,14 @@ button{
background-color: #fff;
border: 1px solid #fff;
color: #101010;
+ font-weight: normal;
}
}
&:hover{
- font-weight: 400;
- background-color: transparent;
+ background-color: #353535;
border: 1px solid #484848;
color: #fff;
+ font-weight: normal;
}
}
&.self{
diff --git a/src/styles/_table.scss b/src/styles/_table.scss
index 5efacd7c..5fe69afe 100644
--- a/src/styles/_table.scss
+++ b/src/styles/_table.scss
@@ -236,6 +236,16 @@ table{
.d-check-box{
opacity: 0.5;
}
+ .color-wrap{
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ .color-box{
+ width: 14px;
+ height: 14px;
+ margin-right: 8px;
+ }
+ }
}
}
tbody{