지붕면 할당 팝업 및 기본모듈 선택 팝업 수정

This commit is contained in:
김창수 2025-02-04 13:42:44 +09:00
parent 254108d077
commit 76bf6a19f9
5 changed files with 86 additions and 174 deletions

View File

@ -89,7 +89,7 @@ export default function CanvasPage() {
{/* <Penal04/> */}
{/* 배치면 초기 설정 */}
<PlacementSettingPop/>
{/* <PlacementSettingPop/> */}
{/* 캔버스 기본 셋팅 */}
{/* {modalOption.option && <SettingModal01/>} */}
@ -106,7 +106,7 @@ export default function CanvasPage() {
{/* <PropertiesSetting/> */}
{/* 지붕형상 설정 */}
<RoofShapeOption/>
{/* <RoofShapeOption/> */}
{/* 지붕형상 수동 설정 */}
{/* <ManualRoofShape/> */}
@ -129,13 +129,13 @@ export default function CanvasPage() {
{/* <AuxiliaryCopy/> */}
{/* 지붕면 할당 */}
{/* <RoofAllocation/> */}
<RoofAllocation/>
{/* 경사 설정 */}
{/* <SlopeOption/> */}
{/* 배치면 그리기 */}
<ArrangementSetting/>
{/* <ArrangementSetting/> */}
{/* 면형상 배치 */}
{/* <PlaneShapeOption/> */}
@ -164,7 +164,7 @@ export default function CanvasPage() {
{/* <HexagonalRoofOption/> */}
{/* 회로 및 가대설정 */}
<CircuitStandSetting/>
{/* <CircuitStandSetting/> */}
{/* 모듈 부가기능 */}

View File

@ -37,45 +37,53 @@ export default function RoofAllocation() {
<div className="grid-option-block-form">
<div className="block-box">
<div className="flex-ment">
<div className="grid-select" style={{width: '248px'}}>
<div className="grid-select" >
<Qselect title={'瓦53A'} option={SelectOption01}/>
</div>
<span className="dec">基本屋根材</span>
<span className="absol dec">基本屋根材</span>
</div>
</div>
<div className="block-box" >
<div className="flex-ment">
<span>斜傾</span>
<div className="input-grid" style={{width: '214px'}}>
<div className="input-grid" >
<input type="text" className="input-origin block" defaultValue={100} readOnly/>
</div>
<span>()</span>
<span className="absol">()</span>
</div>
</div>
<div className="block-box">
<div className="flex-ment">
<span>W</span>
<div className="input-grid" style={{width: '100px'}}>
<div className="input-grid" >
<input type="text" className="input-origin block" defaultValue={100} readOnly/>
</div>
</div>
</div>
<div className="block-box">
<div className="flex-ment">
<span>L</span>
<div className="input-grid" style={{width: '100px'}}>
<div className="input-grid">
<input type="text" className="input-origin block" defaultValue={100} readOnly/>
</div>
</div>
</div>
<div className="block-box">
<div className="flex-ment">
<span>垂木の間隔</span>
<div className="grid-select" style={{width: '178px'}}>
<div className="grid-select">
<Qselect title={'455'} option={SelectOption04}/>
</div>
</div>
</div>
<div className="block-box" >
<div className="flex-ment">
<span>ハゼビーチ</span>
<div className="input-grid" >
<input type="text" className="input-origin block" defaultValue={100} readOnly/>
</div>
</div>
</div>
<div className="block-box">
<div className="icon-btn-wrap">
<button className="act">並列式<i className="allocation01"></i></button>
@ -85,6 +93,7 @@ export default function RoofAllocation() {
</div>
</div>
<div className="grid-option-box">
<div className="d-check-radio pop no-text">
<input type="radio" name="radio01" id="ra01" />
@ -93,157 +102,55 @@ export default function RoofAllocation() {
<div className="grid-option-block-form">
<div className="block-box">
<div className="flex-ment">
<div className="grid-select" style={{width: '248px'}}>
<div className="grid-select" >
<Qselect title={'瓦53A'} option={SelectOption01}/>
</div>
<span className="dec">基本屋根材</span>
<span className="absol">
<button className="delete"></button>
</span>
</div>
</div>
<div className="block-box" >
<div className="flex-ment">
<span>斜傾</span>
<div className="input-grid" style={{width: '214px'}}>
<div className="input-grid" >
<input type="text" className="input-origin block" defaultValue={100} readOnly/>
</div>
<span>()</span>
<span className="absol">()</span>
</div>
</div>
<div className="block-box">
<div className="flex-ment">
<span>W</span>
<div className="input-grid" style={{width: '100px'}}>
<div className="input-grid" >
<input type="text" className="input-origin block" defaultValue={100} readOnly/>
</div>
</div>
</div>
<div className="block-box">
<div className="flex-ment">
<span>L</span>
<div className="input-grid" style={{width: '100px'}}>
<div className="input-grid">
<input type="text" className="input-origin block" defaultValue={100} readOnly/>
</div>
</div>
</div>
<div className="block-box">
<div className="flex-ment">
<span>垂木の間隔</span>
<div className="grid-select" style={{width: '178px'}}>
<div className="grid-select">
<Qselect title={'455'} option={SelectOption04}/>
</div>
</div>
</div>
<div className="block-box">
<div className="icon-btn-wrap">
<button className="act">並列式<i className="allocation01"></i></button>
<button>カスケード <i className="allocation02"></i></button>
</div>
</div>
</div>
</div>
<div className="grid-option-box">
<div className="d-check-radio pop no-text">
<input type="radio" name="radio01" id="ra01" />
<label htmlFor="ra01"></label>
</div>
<div className="grid-option-block-form">
<div className="block-box">
<div className="flex-ment">
<div className="grid-select" style={{width: '248px'}}>
<Qselect title={'瓦53A'} option={SelectOption01}/>
</div>
<span className="dec">基本屋根材</span>
</div>
</div>
<div className="block-box" >
<div className="flex-ment">
<span>斜傾</span>
<div className="input-grid" style={{width: '214px'}}>
<input type="text" className="input-origin block" defaultValue={100} readOnly/>
</div>
<span>()</span>
</div>
</div>
<div className="block-box">
<div className="flex-ment">
<span>W</span>
<div className="input-grid" style={{width: '100px'}}>
<input type="text" className="input-origin block" defaultValue={100} readOnly/>
</div>
</div>
<div className="flex-ment">
<span>L</span>
<div className="input-grid" style={{width: '100px'}}>
<span>ハゼビーチ</span>
<div className="input-grid" >
<input type="text" className="input-origin block" defaultValue={100} readOnly/>
</div>
</div>
</div>
<div className="block-box">
<div className="flex-ment">
<span>垂木の間隔</span>
<div className="grid-select" style={{width: '178px'}}>
<Qselect title={'455'} option={SelectOption04}/>
</div>
</div>
</div>
<div className="block-box">
<div className="icon-btn-wrap">
<button className="act">並列式<i className="allocation01"></i></button>
<button>カスケード <i className="allocation02"></i></button>
</div>
</div>
</div>
</div>
<div className="grid-option-box">
<div className="d-check-radio pop no-text">
<input type="radio" name="radio01" id="ra01" />
<label htmlFor="ra01"></label>
</div>
<div className="grid-option-block-form">
<div className="block-box">
<div className="flex-ment">
<div className="grid-select" style={{width: '248px'}}>
<Qselect title={'瓦53A'} option={SelectOption01}/>
</div>
<span className="dec">基本屋根材</span>
</div>
</div>
<div className="block-box" >
<div className="flex-ment">
<span>斜傾</span>
<div className="input-grid" style={{width: '214px'}}>
<input type="text" className="input-origin block" defaultValue={100} readOnly/>
</div>
<span>()</span>
</div>
</div>
<div className="block-box">
<div className="flex-ment">
<span>W</span>
<div className="input-grid" style={{width: '100px'}}>
<input type="text" className="input-origin block" defaultValue={100} readOnly/>
</div>
</div>
<div className="flex-ment">
<span>L</span>
<div className="input-grid" style={{width: '100px'}}>
<input type="text" className="input-origin block" defaultValue={100} readOnly/>
</div>
</div>
</div>
<div className="block-box">
<div className="flex-ment">
<span>垂木の間隔</span>
<div className="grid-select" style={{width: '178px'}}>
<Qselect title={'455'} option={SelectOption04}/>
</div>
</div>
</div>
<div className="block-box">
<div className="icon-btn-wrap">
<button className="act">並列式<i className="allocation01"></i></button>

View File

@ -52,12 +52,6 @@ export default function RoofModuleOptionTab02({setTabNum}){
<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>
@ -65,7 +59,6 @@ export default function RoofModuleOptionTab02({setTabNum}){
</div>
<div className="module-table-box none-flex">
<div className="module-table-inner">
<div className="module-table-tit">商品情報</div>
<div className="eaves-keraba-table">
<div className="eaves-keraba-item">
<div className="eaves-keraba-th">
@ -212,14 +205,14 @@ export default function RoofModuleOptionTab02({setTabNum}){
<button className="btn-frame roof">多設施工II</button>
<button className="btn-frame roof">強化施工</button>
</div>
<div className="grid-check-form">
<div className="grid-check-form-block">
<div className="d-check-box pop">
<input type="checkbox" id="ch01" />
<label htmlFor="ch01">庇力バーの設置</label>
<label htmlFor="ch01">庇力バーの設置庇力バーの設置庇力バーの設置庇力バーの設置</label>
</div>
<div className="d-check-box pop">
<input type="checkbox" id="ch02" />
<label htmlFor="ch02">目幕金具の設置</label>
<label htmlFor="ch02">目幕金具の設置目幕金具の設置目幕金具の設置目幕金具の設置</label>
</div>
</div>
</div>
@ -242,16 +235,11 @@ export default function RoofModuleOptionTab02({setTabNum}){
{/* 설정 오류시 노출 */}
</div>
</div>
<div className="reset-word-wrap">
<div className="reset-word">
施工方法が選択できません 基準風速または基準積雪量を確認してください
</div>
<div className="grid-btn-wrap">
<button className="btn-frame modal mr5" onClick={() => setTabNum(1)}>以前</button>
<button className="btn-frame modal act" onClick={() => setTabNum(3)}>Next</button>
</div>
</div>
</>
)
}

View File

@ -243,7 +243,7 @@ export default function PublishPage() {
<li>2025-01-17</li>
<li>*면형상 배치 팝업에 handle가능 공통 modal-foot 추가</li>
</ul> */}
<ul className=''>
<ul className='mb10'>
<li>2025-01-20</li>
<li>*지붕모듈 설정 팝업 title, 회로 가대설정 팝업title, 해당 메뉴 명칭 변경</li>
<li>*배치면 그리기 팝업 버튼명 변경경</li>
@ -255,6 +255,11 @@ export default function PublishPage() {
<li>*패널 배치 집계 수정</li>
<li>*Qselect 컴포넌트 수정 배치면 초기설정 selelct disabled 추가</li>
</ul>
<ul>
<li>2025-02-04</li>
<li>*지붕면 할당 팝업 클래스 css수정</li>
<li>*기본모듈선택 팝업 요청 수정</li>
</ul>
</td>
<td className="t-center">2024-10-28</td>
</tr>

View File

@ -259,6 +259,12 @@ $alert-color: #101010;
border-bottom: 1px solid #424242;
}
}
.grid-check-form-block{
display: block;
> div{
margin-bottom: 10px;
}
}
.grid-option-overflow{
max-height: 350px;
overflow-y: auto;
@ -305,6 +311,25 @@ $alert-color: #101010;
}
.grid-option-block-form{
flex: 1;
.flex-ment{
position: relative;
padding-right: 70px;
flex: 1 1 auto;
span{
width: 70px;
&.absol{
width: fit-content;
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
}
}
.input-grid{
flex: 1;
}
}
}
}
.select-form{
@ -312,6 +337,7 @@ $alert-color: #101010;
}
.grid-select{
flex: 1;
height: 30px;
&.no-flx{
flex: unset;
}
@ -2013,7 +2039,7 @@ $alert-color: #101010;
}
}
.roof-module-tab2-overflow{
max-height: 500px;
max-height: 650px;
overflow-y: auto;
padding-bottom: 15px;
border-bottom: 1px solid #4D4D4D;
@ -2088,17 +2114,3 @@ $alert-color: #101010;
justify-content: flex-end;
}
}
.reset-word-wrap{
display: flex;
align-items: center;
.grid-btn-wrap{
margin-left: auto;
}
}
.reset-word{
font-size: 12px;
color: #FFCACA;
font-weight: 400;
margin-top: 10px;
}