diff --git a/src/components/floor-plan/CanvasMenu.jsx b/src/components/floor-plan/CanvasMenu.jsx index d8b7510c..eae0ea4e 100644 --- a/src/components/floor-plan/CanvasMenu.jsx +++ b/src/components/floor-plan/CanvasMenu.jsx @@ -47,6 +47,7 @@ export default function CanvasMenu(props) { setShowMovementModal, setShowWallLineOffsetSettingModal, setShowRoofAllocationSettingModal, + setShowBasicSettingModal, } = props const [menuNumber, setMenuNumber] = useState(null) @@ -102,6 +103,7 @@ export default function CanvasMenu(props) { setShowWallLineOffsetSettingModal, setShowRoofAllocationSettingModal, setShowObjectSettingModal, + setShowBasicSettingModal, type, } diff --git a/src/components/floor-plan/FloorPlan.jsx b/src/components/floor-plan/FloorPlan.jsx index 2902fcf0..d614a809 100644 --- a/src/components/floor-plan/FloorPlan.jsx +++ b/src/components/floor-plan/FloorPlan.jsx @@ -26,6 +26,7 @@ import PlacementSurfaceSetting from '@/components/floor-plan/modal/placementSurf import RoofShapePassivitySetting from '@/components/floor-plan/modal/roofShape/RoofShapePassivitySetting' import MovementSetting from '@/components/floor-plan/modal/movement/MovementSetting' import RoofAllocationSetting from '@/components/floor-plan/modal/roofAllocation/RoofAllocationSetting' +import BasicSetting from '@/components/floor-plan/modal/basic/BasicSetting' export default function FloorPlan() { const [showCanvasSettingModal, setShowCanvasSettingModal] = useState(false) @@ -43,6 +44,7 @@ export default function FloorPlan() { const [showMovementModal, setShowMovementModal] = useState(false) const [showWallLineOffsetSettingModal, setShowWallLineOffsetSettingModal] = useState(false) const [showRoofAllocationSettingModal, setShowRoofAllocationSettingModal] = useState(false) + const [showBasicSettingModal, setShowBasicSettingModal] = useState(false) const globalLocaleState = useRecoilValue(globalLocaleStore) const { get } = useAxios(globalLocaleState) @@ -81,6 +83,7 @@ export default function FloorPlan() { setShowMovementModal, setShowWallLineOffsetSettingModal, setShowRoofAllocationSettingModal, + setShowBasicSettingModal, } useEffect(() => { @@ -154,6 +157,7 @@ export default function FloorPlan() { {showWallLineOffsetSettingModal && } {showObjectSettingModal && } {showPlacementSurfaceSettingModal && } + {showBasicSettingModal && } diff --git a/src/components/floor-plan/MenuDepth01.jsx b/src/components/floor-plan/MenuDepth01.jsx index 8cb10b38..c7642894 100644 --- a/src/components/floor-plan/MenuDepth01.jsx +++ b/src/components/floor-plan/MenuDepth01.jsx @@ -22,6 +22,7 @@ export default function MenuDepth01(props) { setShowWallLineOffsetSettingModal, setShowRoofAllocationSettingModal, setShowObjectSettingModal, + setShowBasicSettingModal, } = props const { getMessage } = useMessage() const [activeMenu, setActiveMenu] = useState() @@ -58,6 +59,18 @@ export default function MenuDepth01(props) { setShowPlacementSurfaceSettingModal(id === 2) setShowObjectSettingModal(id === 3) } + + if (type === 'module') { + setShowOutlineModal(false) + setShowRoofShapeSettingModal(false) + setShowRoofShapePassivitySettingModal(false) + setShowAuxiliaryModal(false) + setShowEavesGableEditModal(false) + setShowMovementModal(false) + setShowWallLineOffsetSettingModal(false) + setShowRoofAllocationSettingModal(false) + setShowBasicSettingModal(id === 0) + } } useEffect(() => { diff --git a/src/components/floor-plan/modal/basic/BasicSetting.jsx b/src/components/floor-plan/modal/basic/BasicSetting.jsx new file mode 100644 index 00000000..d28e3ef5 --- /dev/null +++ b/src/components/floor-plan/modal/basic/BasicSetting.jsx @@ -0,0 +1,56 @@ +import { useMessage } from '@/hooks/useMessage' +import WithDraggable from '@/components/common/draggable/withDraggable' +import { useState } from 'react' +import Orientation from '@/components/floor-plan/modal/basic/step/Orientation' +import Module from '@/components/floor-plan/modal/basic/step/Module' +import Placement from '@/components/floor-plan/modal/basic/step/Placement' + +export default function BasicSetting({ setShowBasicSettingModal }) { + const { getMessage } = useMessage() + const [tabNum, setTabNum] = useState(1) + + return ( + +
+
+

{getMessage('plan.menu.module.circuit.setting.default')}

+ +
+
+
+
{getMessage('modal.module.basic.setting.orientation.setting')}
+ +
{getMessage('modal.module.basic.setting.module.setting')}
+ +
{getMessage('modal.module.basic.setting.module.placement')}
+
+ {tabNum === 1 && } + {tabNum === 2 && } + {tabNum === 3 && } + +
+ {tabNum !== 1 && ( + + )} + {tabNum !== 3 && } + {tabNum !== 3 && ( + + )} + {tabNum === 3 && ( + <> + + + + )} +
+
+
+ + ) +} diff --git a/src/components/floor-plan/modal/basic/step/Module.jsx b/src/components/floor-plan/modal/basic/step/Module.jsx new file mode 100644 index 00000000..8109da08 --- /dev/null +++ b/src/components/floor-plan/modal/basic/step/Module.jsx @@ -0,0 +1,185 @@ +import QSelectBox from '@/components/common/select/QSelectBox' +import { useMessage } from '@/hooks/useMessage' + +export default function Module({}) { + const { getMessage } = useMessage() + const SelectOption01 = [{ name: '0' }, { name: '0' }, { name: '0' }, { name: '0' }] + const moduleData = { + header: [ + { name: getMessage('module'), width: 150, prop: 'module', type: 'color-box' }, + { + name: `${getMessage('높이')} (mm)`, + prop: 'height', + }, + { name: `${getMessage('width')} (mm)`, prop: 'width' }, + { name: `${getMessage('output')} (W)`, prop: 'output' }, + ], + rows: [ + { + module: { name: 'Re.RISE-G3 440', color: '#AA6768' }, + height: { name: '1134' }, + width: { name: '1722' }, + output: { name: '440' }, + }, + { + module: { + name: 'Re.RISE MS-G3 290', + color: '#67A2AA', + }, + height: { name: '1134' }, + width: { name: '1722' }, + output: { name: '240' }, + }, + ], + } + return ( + <> +
+
+
+
+ {getMessage('modal.module.basic.setting.module.setting')} +
+ +
+
+
+ + + + {moduleData.header.map((data) => ( + + ))} + + + + {moduleData.rows.map((row) => ( + <> + + {moduleData.header.map((header) => ( + <> + {header.type === 'color-box' && ( + + )} + {!header.type && header.type !== 'color-box' && } + + ))} + + + ))} + + + + + + + +
+ {data.name} +
+
+ + {row[header.prop].name} +
+ 		{row[header.prop].name}
+
+
+
+
+
+ + + + +
+
+
{getMessage('modal.module.basic.setting.module.roof.material')}: スレーツ（4寸)
+
+
+
{getMessage('modal.module.basic.setting.module.trestle.maker')}
+
+
+ +
+
+
+
+
{getMessage('modal.module.basic.setting.module.construction.method')}
+
+
+ +
+
+
+
+
{getMessage('modal.module.basic.setting.module.under.roof')}
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+ {getMessage('modal.module.basic.setting.module.cotton.classification')} +
+ +
+
+
+ {getMessage('modal.module.basic.setting.module.fitting.height')} +
+ +
+
+
+ {getMessage('modal.module.basic.setting.module.standard.wind.speed')} +
+ +
+
+
+ {getMessage('modal.module.basic.setting.module.standard.snowfall.amount')} +
+ +
+
+
+
+
+
+
+
+ {getMessage('modal.module.basic.setting.module.setting.info1')} +
+ {getMessage('modal.module.basic.setting.module.setting.info2')} +
+
+
+
+
+ + + + + +
+
+
+ + +
+
+ + +
+
+ + ) +} diff --git a/src/components/floor-plan/modal/basic/step/Orientation.jsx b/src/components/floor-plan/modal/basic/step/Orientation.jsx new file mode 100644 index 00000000..3ef15a21 --- /dev/null +++ b/src/components/floor-plan/modal/basic/step/Orientation.jsx @@ -0,0 +1,62 @@ +import { useState } from 'react' +import { useMessage } from '@/hooks/useMessage' + +export default function Orientation({ setTabNum }) { + const { getMessage } = useMessage() + const [compasDeg, setCompasDeg] = useState(0) + const [hasAnglePassivity, setHasAnglePassivity] = useState(false) + + return ( + <> +
+
{getMessage('modal.module.basic.setting.orientation.setting')}
+
+
{getMessage('modal.module.basic.setting.orientation.setting.info')}
+
+
+
+ {Array.from({ length: 180 / 15 }).map((dot, index) => ( +
setCompasDeg(15 * (12 + index))} + > + {index === 0 && 180°} + {index === 6 && 270°} +
+ ))} + {Array.from({ length: 180 / 15 }).map((dot, index) => ( +
setCompasDeg(15 * index)}> + {index === 0 && 0°} + {index === 6 && 90°} +
+ ))} +
+
+
+
+
+
+
+
+ setHasAnglePassivity(!hasAnglePassivity)} /> + +
+
+
+ setCompasDeg(e.target.value !== '' ? Number.parseInt(e.target.value) : 0)} + /> +
+ ° +
+
+
+
+ + ) +} diff --git a/src/components/floor-plan/modal/basic/step/Placement.jsx b/src/components/floor-plan/modal/basic/step/Placement.jsx new file mode 100644 index 00000000..4771ab2a --- /dev/null +++ b/src/components/floor-plan/modal/basic/step/Placement.jsx @@ -0,0 +1,140 @@ +import { useMessage } from '@/hooks/useMessage' + +export default function Placement() { + const { getMessage } = useMessage() + 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 }, + ], + rows: [ + { + check: false, + module: { name: 'Re.RISE-G3 440', color: '#AA6768' }, + output: { name: '440' }, + }, + { + check: false, + module: { + name: 'Re.RISE MS-G3 290', + color: '#67A2AA', + }, + output: { name: '240' }, + }, + ], + } + return ( + <> +
+
+
+
+ + + + {moduleData.header.map((data) => ( + + ))} + + + + {moduleData.rows.map((row) => ( + <> + + {moduleData.header.map((header) => ( + <> + {header.type === 'color-box' && ( + + )} + {header.type === 'check' && ( + + )} + {header.type && header.type !== 'color-box' && header.type !== 'check' && ( + + )} + + ))} + + + ))} + + + + + + +
+ {data.type === 'check' ? ( +
+ + +
+ ) : ( + data.name + )} +
+
+ + {row[header.prop].name} +
+ 		+
+ + +
+ 		{row[header.prop].name}
+
+
+
+
+
+
{getMessage('modal.module.basic.setting.module.placement.select.fitting.type')}
+
+
+
{getMessage('modal.module.basic.setting.module.placement.waterfowl.arrangement')}
+
+
+
+ + +
+
+ + +
+
+
+
+
+
{getMessage('modal.module.basic.setting.module.placement.arrangement.standard')}
+
+
+
+ + +
+
+ + +
+
+ + +
+
+
+
+
+
+
+ + +
+
+
+
+
+ + ) +} diff --git a/src/locales/ja.json b/src/locales/ja.json index 5a73c850..f4f1e299 100644 --- a/src/locales/ja.json +++ b/src/locales/ja.json @@ -80,6 +80,38 @@ "plan.menu.placement.surface.all.remove": "配置面全体を削除", "plan.menu.module.circuit.setting": "モジュール回路構成", "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.module.roof.material": "屋根材", + "modal.module.basic.setting.module.trestle.maker": "架台メーカー", + "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.setting.info1": "※勾配の 範囲には制限があります。屋根傾斜が2.5値未満、10値を超える場合には施工が可能か 施工マニュアルを確認してください。", + "modal.module.basic.setting.module.setting.info2": "モジュール配置時は、施工マニュアルに記載されている＜モジュール配置条件＞を必ず確認してください", + "modal.module.basic.setting.module.cotton.classification": "綿調道区分", + "modal.module.basic.setting.module.fitting.height": "設置高さ", + "modal.module.basic.setting.module.standard.wind.speed": "基準風速", + "modal.module.basic.setting.module.standard.snowfall.amount": "基準積雪量", + "modal.module.basic.setting.module.standard.construction": "標準施工", + "modal.module.basic.setting.module.enforce.construction": "強化施工", + "modal.module.basic.setting.module.multiple.construction": "多設施工", + "modal.module.basic.setting.module.eaves.bar.fitting": "庇力バーの設置", + "modal.module.basic.setting.module.blind.metal.fitting": "目幕金具の設置", + "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.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.maximum": "最大配置する。", + "modal.module.basic.setting.prev": "以前", + "modal.module.basic.setting.passivity.placement": "手動配置", + "modal.module.basic.setting.auto.placement": "設定値に自動配置", "plan.menu.module.circuit.setting.circuit.trestle.setting": "回路と架台の設定", "plan.menu.module.circuit.setting.plan.orientation": "図面方位の適用", "plan.menu.estimate": "見積", @@ -341,6 +373,8 @@ "stuff.gridHeader.createDatetime": "登録日", "stuff.message.periodError": "最大1年間閲覧可能.", "length": "長さ", + "height": "高さ", + "output": "出力", "slope": "傾斜", "eaves.offset": "軒の", "gable.offset": "ケラバ出幅", @@ -363,6 +397,7 @@ "jerkinhead": "半折", "shed": "片側の流れ", "apply": "適用", + "module": "モジュール", "has.sleeve": "袖あり", "has.not.sleeve": "袖なし", "jerkinhead.width": "半折先幅", diff --git a/src/locales/ko.json b/src/locales/ko.json index 6744b294..9d518a5e 100644 --- a/src/locales/ko.json +++ b/src/locales/ko.json @@ -83,6 +83,39 @@ "plan.menu.placement.surface.all.remove": "배치면 전체 삭제", "plan.menu.module.circuit.setting": "모듈,회로 구성", "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.module.roof.material": "지붕재", + "modal.module.basic.setting.module.trestle.maker": "가대메이거", + "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.setting.info1": "※ 구배의 범위에는 제한이 있습니다. 지붕경사가 2.5치 미만, 10치를 초과하는 경우에는 시공이 가능한지 시공 매뉴얼을 확인해주십시오.", + "modal.module.basic.setting.module.setting.info2": "※ 모듈 배치 시에는 시공 매뉴얼에 기재된 <모듈 배치 조건>을 반드시 확인해주십시오.", + "modal.module.basic.setting.module.cotton.classification": "면조도구분", + "modal.module.basic.setting.module.fitting.height": "설치높이", + "modal.module.basic.setting.module.standard.wind.speed": "기준 풍속", + "modal.module.basic.setting.module.standard.snowfall.amount": "기준 적설량", + "modal.module.basic.setting.module.standard.construction": "표준시공", + "modal.module.basic.setting.module.enforce.construction": "강화시공", + "modal.module.basic.setting.module.multiple.construction": "다설시공", + "modal.module.basic.setting.module.eaves.bar.fitting": "처마력 바의 설치", + "modal.module.basic.setting.module.blind.metal.fitting": "눈막이 금구 설치", + "modal.module.basic.setting.module.select": "모듈 선택", + "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.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.maximum": "최대배치 실시한다.", + "modal.module.basic.setting.prev": "이전", + "modal.module.basic.setting.passivity.placement": "수동 배치", + "modal.module.basic.setting.auto.placement": "설정값으로 자동 배치", "plan.menu.module.circuit.setting.circuit.trestle.setting": "회로 및 가대 설정", "plan.menu.module.circuit.setting.plan.orientation": "도면 방위 적용", "plan.menu.estimate": "견적서", @@ -344,6 +377,8 @@ "stuff.gridHeader.createDatetime": "등록일", "stuff.message.periodError": "최대1년 조회 가능합니다.", "length": "길이", + "height": "높이", + "output": "출력", "slope": "경사", "eaves.offset": "처마 출폭", "gable.offset": "케라바 출폭", @@ -366,6 +401,7 @@ "jerkinhead": "반절처", "shed": "한쪽흐름", "apply": "적용", + "module": "모듈", "has.sleeve": "소매 있음", "has.not.sleeve": "소매 없음", "jerkinhead.width": "반절처 폭",