qcast3/qcast-pub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

지붕 형상 수동 설정 팝업 수정

Browse Source
This commit is contained in:
김창수 2024-10-08 09:37:46 +09:00
parent 611bb52fcc
commit 2278b620d6
7 changed files with 94 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/app/canvas/page.jsx
View File

@ -40,6 +40,7 @@ import Penal03 from '@/components/canvas/penal/Penal03'
import Penal04 from '@/components/canvas/penal/Penal04'
import RoofModuleOption from '@/components/canvas/modal/roofmoduleoption/RoofModuleOption'
import HexagonalRoofOption from '@/components/canvas/modal/hexagonalroofoption/HexagonalRoofOption'
import CircuitStandSetting from '@/components/canvas/modal/circuitstandsetting/CircuitStandSetting'
export default function CanvasPage() {
const modalOption = useRecoilValue(modalState);
@ -80,7 +81,7 @@ export default function CanvasPage() {
{/* <RoofShapeOption/> */}
{/* 지붕형상 수동 설정 */}
{/* <ManualRoofShape/> */}
<ManualRoofShape/>
{/* 보조선 작성 */}
{/* <AuxiliarylineOption/> */}
@ -92,7 +93,7 @@ export default function CanvasPage() {
{/* <MovingUpDonw/> */}
{/* 외벽선 편집 및 오프셋 */}
<OuterWallOffset/>
{/* <OuterWallOffset/> */}
{/* 보조선 사이즈, 이동, 복사 */}
{/* <AuxiliarySize/> */}
@ -109,7 +110,7 @@ export default function CanvasPage() {
{/* <ArrangementSetting/> */}
{/* 면형상 배치 */}
<PlaneShapeOption/>
{/* <PlaneShapeOption/> */}
{/* 오브젝트 배치*/}
{/* <ObjectOption/> */}
@ -133,6 +134,9 @@ export default function CanvasPage() {
{/* 육지붕모듈 선택 */}
{/* <HexagonalRoofOption/> */}
{/* 회로 및 가대설정 */}
<CircuitStandSetting/>
</div>
</div>
</div>

27
src/components/canvas/modal/circuitstandsetting/CircuitStandSetting.jsx Normal file
View File

@ -0,0 +1,27 @@
import WithDraggable from "@/components/common/draggable/withDraggable";
import { useState } from "react";
import CircuitStandTab01 from "./CircuitStandTab01";
export default function CircuitStandSetting(){
const [tabNum, setTabNum] = useState(1);
return(
<WithDraggable isShow={true}>
<div className={`modal-pop-wrap lx-2`}>
<div className="modal-head">
<h1 className="title">基本設定 </h1>
<button className="modal-close">닫기</button>
</div>
<div className="modal-body">
<div className="roof-module-tab">
<div className={`module-tab-bx ${tabNum === 1 || tabNum === 2 || tabNum === 3 ? 'act': ''}`}>パワーコンディショナーを選択</div>
<span className={`tab-arr ${ tabNum === 2 || tabNum === 3 ? 'act': ''}`}></span>
<div className={`module-tab-bx ${tabNum === 2 || tabNum === 3 ? 'act': ''}`}>回路割り当て</div>
<span className={`tab-arr ${ tabNum === 3 ? 'act': ''}`}></span>
<div className={`module-tab-bx ${tabNum === 3 ? 'act': ''}`}>昇圧設定</div>
</div>
{tabNum === 1 && <CircuitStandTab01/>}
</div>
</div>
</WithDraggable>
)
}

22
src/components/canvas/modal/circuitstandsetting/CircuitStandTab01.jsx Normal file
View File

@ -0,0 +1,22 @@
import Qselect from "@/components/common/select/Qselect";
const SelectOption01 = [
{name: '0',}, {name: '0'}, {name: '0'}, {name: '0'}
]
export default function CircuitStandTab01(){
return(
<>
<div className="outline-form mb10">
<span className="mr10">分類 (余剰)</span>
<div className="grid-select mr10">
<Qselect title={'HQJPシリーズ'} option={SelectOption01}/>
</div>
<span className="thin">寒冷地仕様</span>
</div>
<div className="module-table-box">
<div className="module-table-inner"></div>
</div>
</>
)
}

6
src/components/canvas/modal/manualroofshape/ManualRoofShape.jsx
View File

@ -1,6 +1,8 @@
import WithDraggable from "@/components/common/draggable/withDraggable";
import { useState } from "react";
import ManualTab01 from "./ManualTab01";
import ManualTab02 from "./ManualTab02";
import ManualTab03 from "./ManualTab03";
const buttonMenu = [
{id: 1, name: '軒'},
@ -32,8 +34,8 @@ export default function ManualRoofShape(){
<div className="setting-tit">設定</div>
<div className="discrimination-box">
{buttonAct === 1 && <ManualTab01/>}
{buttonAct === 2 && <ManualTab01/>}
{buttonAct === 3 && <ManualTab01/>}
{buttonAct === 2 && <ManualTab02/>}
{buttonAct === 3 && <ManualTab03/>}
</div>
<div className="grid-btn-wrap">
<button className="btn-frame sub-tab mr5">一変戦に戻る</button>

16
src/components/canvas/modal/manualroofshape/ManualTab01.jsx
View File

@ -8,27 +8,13 @@ export default function ManualTab01() {
</div>
<span className="thin">寸法</span>
</div>
<div className="outline-form mb10">
<div className="outline-form ">
<span className="mr10" style={{width: '63px'}}>軒の</span>
<div className="input-grid mr5">
<input type="text" className="input-origin block" defaultValue={100}/>
</div>
<span className="thin">mm</span>
</div>
<div className="outline-form mb10">
<span className="mr10" style={{width: '63px'}}>ケラバ 出幅</span>
<div className="input-grid mr5">
<input type="text" className="input-origin block" defaultValue={100}/>
</div>
<span className="thin">mm</span>
</div>
<div className="outline-form mb10">
<span className="mr10" style={{width: '63px'}}>片流幅</span>
<div className="input-grid mr5">
<input type="text" className="input-origin block" defaultValue={100}/>
</div>
<span className="thin">mm</span>
</div>
</>
)
}

20
src/components/canvas/modal/manualroofshape/ManualTab02.jsx Normal file
View File

@ -0,0 +1,20 @@
export default function ManualTab02() {
return(
<>
<div className="outline-form mb10">
<span className="mr10" style={{width: '63px'}}>傾斜</span>
<div className="input-grid mr5">
<input type="text" className="input-origin block" defaultValue={100}/>
</div>
<span className="thin">寸法</span>
</div>
<div className="outline-form ">
<span className="mr10" style={{width: '63px'}}>ケラバ 出幅</span>
<div className="input-grid mr5">
<input type="text" className="input-origin block" defaultValue={100}/>
</div>
<span className="thin">mm</span>
</div>
</>
)
}

13
src/components/canvas/modal/manualroofshape/ManualTab03.jsx Normal file
View File

@ -0,0 +1,13 @@
export default function ManualTab03() {
return(
<>
<div className="outline-form">
<span className="mr10" style={{width: '63px'}}>片流幅</span>
<div className="input-grid mr5">
<input type="text" className="input-origin block" defaultValue={100}/>
</div>
<span className="thin">mm</span>
</div>
</>
)
}