육지붕 모듈 팝업 추가
This commit is contained in:
parent
84d33d075d
commit
dca7ce829d
@ -39,6 +39,7 @@ import { useRecoilValue } from 'recoil'
|
||||
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'
|
||||
|
||||
export default function CanvasPage() {
|
||||
const modalOption = useRecoilValue(modalState);
|
||||
@ -128,7 +129,10 @@ export default function CanvasPage() {
|
||||
{/* <DrawingFlow/> */}
|
||||
|
||||
{/* 지붕모듈선택 */}
|
||||
<RoofModuleOption/>
|
||||
{/* <RoofModuleOption/> */}
|
||||
|
||||
{/* 육지붕모듈 선택 */}
|
||||
<HexagonalRoofOption/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -0,0 +1,31 @@
|
||||
import WithDraggable from "@/components/common/draggable/withDraggable";
|
||||
import { useState } from "react";
|
||||
import HexagonalRoofTab01 from "./HexagonalRoofTab01";
|
||||
import HexagonalRoofTab02 from "./HexagonalRoofTab02";
|
||||
import HexagonalRoofTab03 from "./HexagonalRoofTab03";
|
||||
|
||||
export default function HexagonalRoofOption(){
|
||||
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 && <HexagonalRoofTab01 setTabNum={setTabNum}/>}
|
||||
{tabNum === 2 && <HexagonalRoofTab02 setTabNum={setTabNum}/>}
|
||||
{tabNum === 3 && <HexagonalRoofTab03 setTabNum={setTabNum}/>}
|
||||
</div>
|
||||
</div>
|
||||
</WithDraggable>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,64 @@
|
||||
import { useState } from "react";
|
||||
|
||||
export default function HexagonalRoofTab01({setTabNum}){
|
||||
const [compasDeg, setCompasDeg] = useState(0);
|
||||
return(
|
||||
<>
|
||||
<div className="properties-setting-wrap">
|
||||
<div className="setting-tit">方位設定</div>
|
||||
<div className="outline-wrap">
|
||||
<div className="guide">※シミュレーション計算用方位を指定します。南の方位を設定してください。</div>
|
||||
<div className="roof-module-compas">
|
||||
<div className="compas-box">
|
||||
<div className="compas-box-inner">
|
||||
<div className={`circle ${compasDeg === 180 ? 'act' : ''}`} onClick={() => setCompasDeg(180)}><i>180°</i></div>
|
||||
<div className={`circle ${compasDeg === 195 ? 'act' : ''}`} onClick={() => setCompasDeg(195)}></div>
|
||||
<div className={`circle ${compasDeg === 210 ? 'act' : ''}`} onClick={() => setCompasDeg(210)}></div>
|
||||
<div className={`circle ${compasDeg === 225 ? 'act' : ''}`} onClick={() => setCompasDeg(225)}></div>
|
||||
<div className={`circle ${compasDeg === 240 ? 'act' : ''}`} onClick={() => setCompasDeg(240)}></div>
|
||||
<div className={`circle ${compasDeg === 255 ? 'act' : ''}`} onClick={() => setCompasDeg(255)}></div>
|
||||
<div className={`circle ${compasDeg === 270 ? 'act' : ''}`} onClick={() => setCompasDeg(270)}><i>270°</i></div>
|
||||
<div className={`circle ${compasDeg === 285 ? 'act' : ''}`} onClick={() => setCompasDeg(285)}></div>
|
||||
<div className={`circle ${compasDeg === 300 ? 'act' : ''}`} onClick={() => setCompasDeg(300)}></div>
|
||||
<div className={`circle ${compasDeg === 315 ? 'act' : ''}`} onClick={() => setCompasDeg(315)}></div>
|
||||
<div className={`circle ${compasDeg === 330 ? 'act' : ''}`} onClick={() => setCompasDeg(330)}></div>
|
||||
<div className={`circle ${compasDeg === 345 ? 'act' : ''}`} onClick={() => setCompasDeg(345)}></div>
|
||||
<div className={`circle ${compasDeg === 0 ? 'act' : ''}`} onClick={() => setCompasDeg(0)}><i>0°</i></div>
|
||||
<div className={`circle ${compasDeg === 15 ? 'act' : ''}`} onClick={() => setCompasDeg(15)}></div>
|
||||
<div className={`circle ${compasDeg === 30 ? 'act' : ''}`} onClick={() => setCompasDeg(30)}></div>
|
||||
<div className={`circle ${compasDeg === 45 ? 'act' : ''}`} onClick={() => setCompasDeg(45)}></div>
|
||||
<div className={`circle ${compasDeg === 60 ? 'act' : ''}`} onClick={() => setCompasDeg(60)}></div>
|
||||
<div className={`circle ${compasDeg === 75 ? 'act' : ''}`} onClick={() => setCompasDeg(75)}></div>
|
||||
<div className={`circle ${compasDeg === 90 ? 'act' : ''}`} onClick={() => setCompasDeg(90)}><i>90°</i></div>
|
||||
<div className={`circle ${compasDeg === 105 ? 'act' : ''}`} onClick={() => setCompasDeg(105)}></div>
|
||||
<div className={`circle ${compasDeg === 120 ? 'act' : ''}`} onClick={() => setCompasDeg(120)}></div>
|
||||
<div className={`circle ${compasDeg === 135 ? 'act' : ''}`} onClick={() => setCompasDeg(135)}></div>
|
||||
<div className={`circle ${compasDeg === 150 ? 'act' : ''}`} onClick={() => setCompasDeg(150)}></div>
|
||||
<div className={`circle ${compasDeg === 165 ? 'act' : ''}`} onClick={() => setCompasDeg(165)}></div>
|
||||
<div className="compas">
|
||||
<div className="compas-arr" style={{transform: `rotate(${compasDeg}deg)`}}></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="center-wrap">
|
||||
<div className="d-check-box pop">
|
||||
<input type="checkbox" id="ch99" />
|
||||
<label htmlFor="ch99">角度を直接入力（0〜360）</label>
|
||||
</div>
|
||||
<div className="outline-form">
|
||||
<div className="input-grid mr10" style={{width: '160px'}}>
|
||||
<input type="text" className="input-origin block" defaultValue={315}/>
|
||||
</div>
|
||||
<span className="thin" >°</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal act mr5">保存</button>
|
||||
<button className="btn-frame modal" onClick={() => setTabNum(2)}>Next</button>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,69 @@
|
||||
import Qselect from "@/components/common/select/Qselect";
|
||||
|
||||
const SelectOption01 = [
|
||||
{name: '0',}, {name: '0'}, {name: '0'}, {name: '0'}
|
||||
]
|
||||
|
||||
export default function HexagonalRoofTab02({setTabNum}){
|
||||
return(
|
||||
<>
|
||||
<div className="module-table-box">
|
||||
<div className="module-table-inner">
|
||||
<div className="outline-form mb10">
|
||||
<span className="mr10">モジュールの選択</span>
|
||||
<div className="grid-select">
|
||||
<Qselect title={'Search'} option={SelectOption01}/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="roof-module-table">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th style={{width: '250px'}}>モジュール</th>
|
||||
<th>高さ<br/> (mm)</th>
|
||||
<th>幅<br/> (mm)</th>
|
||||
<th>出力<br/> (W)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<div className="color-wrap">
|
||||
<span className="color-box" style={{backgroundColor: '#AA6768'}}></span>
|
||||
<span className="name">Re.RISE-G3 440</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="al-r">1134</td>
|
||||
<td className="al-r">1722</td>
|
||||
<td className="al-r">440</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div className="color-wrap">
|
||||
<span className="color-box" style={{backgroundColor: '#67A2AA'}}></span>
|
||||
<span className="name">Re.RISE MS-G3 290</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="al-r">1134</td>
|
||||
<td className="al-r">1722</td>
|
||||
<td className="al-r">440</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal mr5" onClick={() => setTabNum(1)}>以前</button>
|
||||
<button className="btn-frame modal act mr5">保存</button>
|
||||
<button className="btn-frame modal" onClick={() => setTabNum(3)}>Next</button>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,137 @@
|
||||
|
||||
export default function HexagonalRoofTab03({setTabNum}){
|
||||
return(
|
||||
<>
|
||||
<div className="module-table-box mb10">
|
||||
<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>
|
||||
<th >モジュール</th>
|
||||
<th style={{width: '70px'}}>出力 (W)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className="al-c">
|
||||
<div className="d-check-box no-text pop">
|
||||
<input type="checkbox" id="ch02" />
|
||||
<label htmlFor="ch02"></label>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div className="color-wrap">
|
||||
<span className="color-box" style={{backgroundColor: '#AA6768'}}></span>
|
||||
<span className="name">Re.RISE-G3 440</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="al-r">430</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="al-c">
|
||||
<div className="d-check-box no-text pop">
|
||||
<input type="checkbox" id="ch03" />
|
||||
<label htmlFor="ch03"></label>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div className="color-wrap">
|
||||
<span className="color-box" style={{backgroundColor: '#67A2AA'}}></span>
|
||||
<span className="name">Re.RISE MS-G3 290</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="al-r">290</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</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">配置基準の設定</div>
|
||||
</div>
|
||||
<div className="hexagonal-item">
|
||||
<div className="pop-form-radio">
|
||||
<div className="d-check-radio pop">
|
||||
<input type="radio" name="radio01" id="ra01" />
|
||||
<label htmlFor="ra01">南向きに設置す</label>
|
||||
</div>
|
||||
<div className="d-check-radio pop">
|
||||
<input type="radio" name="radio01" id="ra02" />
|
||||
<label htmlFor="ra02">指定した辺を基準に設置する</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="module-table-box">
|
||||
<div className="module-table-inner">
|
||||
<div className="hexagonal-wrap">
|
||||
<div className="hexagonal-item">
|
||||
<div className="bold-font">割り当て設定</div>
|
||||
</div>
|
||||
<div className="hexagonal-item">
|
||||
<div className="hexagonal-flx-auto">
|
||||
<div className="outline-form">
|
||||
<span className="mr10" style={{width: 'auto'}}>単数</span>
|
||||
<div className="input-grid mr5" style={{width: '70px'}}>
|
||||
<input type="text" className="input-origin block" defaultValue={1}/>
|
||||
</div>
|
||||
<span className="thin">寸法</span>
|
||||
</div>
|
||||
<div className="outline-form">
|
||||
<span className="mr10" style={{width: 'auto'}}>上下間隔</span>
|
||||
<div className="input-grid mr5" style={{width: '70px'}}>
|
||||
<input type="text" className="input-origin block" defaultValue={1}/>
|
||||
</div>
|
||||
<span className="thin">寸法</span>
|
||||
</div>
|
||||
<div className="outline-form">
|
||||
<span className="mr10" style={{width: 'auto'}}>熱水</span>
|
||||
<div className="input-grid mr5" style={{width: '70px'}}>
|
||||
<input type="text" className="input-origin block" defaultValue={1}/>
|
||||
</div>
|
||||
<span className="thin">寸法</span>
|
||||
</div>
|
||||
<div className="outline-form">
|
||||
<span className="mr10" style={{width: 'auto'}}>左右間隔</span>
|
||||
<div className="input-grid mr5" style={{width: '70px'}}>
|
||||
<input type="text" className="input-origin block" defaultValue={300}/>
|
||||
</div>
|
||||
<span className="thin">寸法</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="hexagonal-item">
|
||||
<div className="hexagonal-flx">
|
||||
<div className="normal-font">※バッチパネルの種類が1種類の場合にのみ使用できます。</div>
|
||||
<button className="btn-frame self">北面許可配置登録</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal mr5" onClick={() => setTabNum(2)}>以前</button>
|
||||
<button className="btn-frame modal mr5">手動配置</button>
|
||||
<button className="btn-frame modal act">設定値に自動配置</button>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -5,7 +5,7 @@ import RoofModuleOptionTab02 from "./RoofModuleOptionTab02";
|
||||
import RoofModuleOptionTab03 from "./RoofModuleOptionTab03";
|
||||
|
||||
export default function RoofModuleOption(){
|
||||
const [tabNum, setTabNum] = useState(3);
|
||||
const [tabNum, setTabNum] = useState(1);
|
||||
return(
|
||||
<WithDraggable isShow={true}>
|
||||
<div className={`modal-pop-wrap lx-2`}>
|
||||
|
||||
@ -13,6 +13,17 @@ $alert-color: #101010;
|
||||
to{opacity: 0; scale: 0.95;}
|
||||
}
|
||||
|
||||
.normal-font{
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
color: #fff;
|
||||
}
|
||||
.bold-font{
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.modal-pop-wrap{
|
||||
position: fixed;
|
||||
top: 200px;
|
||||
@ -1347,4 +1358,28 @@ $alert-color: #101010;
|
||||
button{
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
.hexagonal-wrap{
|
||||
.hexagonal-item{
|
||||
padding: 15px 0;
|
||||
border-bottom: 1px solid #4D4D4D;
|
||||
&:first-child{
|
||||
padding-top: 0;
|
||||
}
|
||||
&:last-child{
|
||||
padding-bottom: 0;
|
||||
border: none;
|
||||
}
|
||||
.hexagonal-flx-auto{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.hexagonal-flx{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
button{
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user