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

회로설정 팝업 승압설정 영역 수정

Browse Source
This commit is contained in:
김창수 2025-02-13 17:02:50 +09:00
parent eb231bdcdc
commit 01c35d10fd
5 changed files with 142 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -89,7 +89,7 @@ export default function CanvasPage() {
{/* <Penal04/> */}
{/* 배치면 초기 설정 */}
<PlacementSettingPop/>
{/* <PlacementSettingPop/> */}
{/* 캔버스 기본 셋팅 */}
{/* {modalOption.option && <SettingModal01/>} */}
@ -103,7 +103,7 @@ export default function CanvasPage() {
{/* {modalOption.outerwall && <OuterLineWall/>} */}
{/* 외벽선 속성 설정 */}
<PropertiesSetting/>
{/* <PropertiesSetting/> */}
{/* 지붕형상 설정 */}
{/* <RoofShapeOption/> */}
@ -164,7 +164,7 @@ export default function CanvasPage() {
{/* <HexagonalRoofOption/> */}
{/* 회로 및 가대설정 */}
{/* <CircuitStandSetting/> */}
<CircuitStandSetting/>
{/* 모듈 부가기능 */}

2
src/components/canvas/modal/circuitstandsetting/CircuitStandSetting.jsx
View File

@ -14,6 +14,8 @@ export default function CircuitStandSetting(){
<button className="modal-close">닫기</button>
</div>
<div className="modal-body">
<div className="left-bar handle"></div>
<div className="right-bar handle"></div>
<div className="roof-module-tab">
<div className={`module-tab-bx ${tabNum === 1 || tabNum === 2 || tabNum === 3 ? 'act': ''}`}>パワーコンディショナーを選択</div>
<span className={`tab-arr ${ tabNum === 3 ? 'act': ''}`}></span>

199
src/components/canvas/modal/circuitstandsetting/CircuitStandTab03.jsx
View File

@ -12,105 +12,7 @@ export default function CircuitStandTab03({setTabNum}){
return(
<>
<div className="properties-setting-wrap outer">
<div className="circuit-overflow">
{/* 3개일때 className = by-max */}
<div className={`module-table-box ${arrayLength === 3 ? 'by-max': ''}`}>
{Array.from({length : arrayLength}).map((_, idx) => (
<div key={idx} className="module-table-inner" >
<div className="mb-box">
<div className="circuit-table-tit">HQJP-KA55-5</div>
<div className="roof-module-table overflow-y min">
<table>
<thead>
<tr>
<th>シリアル枚数</th>
<th>総回路数</th>
</tr>
</thead>
<tbody>
<tr className="on">
<td className="al-r">10</td>
<td className="al-r">0</td>
</tr>
<tr>
<td className="al-r">10</td>
<td className="al-r">0</td>
</tr>
<tr >
<td className="al-r">10</td>
<td className="al-r">0</td>
</tr>
<tr>
<td className="al-r">10</td>
<td className="al-r">0</td>
</tr>
<tr>
<td className="al-r">10</td>
<td className="al-r">0</td>
</tr>
<tr>
<td className="al-r">10</td>
<td className="al-r">0</td>
</tr>
</tbody>
</table>
</div>
</div>
<div className="module-box-tab mb10">
<button className={`module-btn ${moduleTab === 1 ? 'act' : ''}`} onClick={() => setModuleTab(1)}>接続する</button>
<button className={`module-btn ${moduleTab === 2 ? 'act' : ''}`} onClick={() => setModuleTab(2)}>昇圧オプション</button>
</div>
<div className="circuit-table-flx-wrap">
{moduleTab === 1 &&
<div className="circuit-table-flx-box">
<div className="roof-module-table min mb10">
<table>
<thead>
<tr>
<th>名称</th>
<th>回路数</th>
<th>昇圧回路数</th>
</tr>
</thead>
<tbody>
<tr>
<td className="al-c">KTN-CBD4C</td>
<td className="al-r">4</td>
<td className="al-r">0</td>
</tr>
</tbody>
</table>
</div>
</div>
}
{moduleTab === 2 &&
<div className="circuit-table-flx-box">
<div className="roof-module-table min mb10">
<table>
<thead>
<tr>
<th>名称</th>
<th>昇圧回路数</th>
</tr>
</thead>
<tbody>
<tr>
<td className="al-c">-</td>
<td className="al-c">-</td>
</tr>
</tbody>
</table>
</div>
</div>
}
</div>
</div>
))}
</div>
</div>
<div className="slope-wrap">
<div className="circuit-title-sel">
<div className="outline-form">
<span className="mr10" style={{width: 'auto'}}>モニターの選択</span>
<div className="grid-select mr10">
@ -118,6 +20,105 @@ export default function CircuitStandTab03({setTabNum}){
</div>
</div>
</div>
<div className="slope-wrap">
<div className="circuit-overflow">
{/* 3개일때 className = by-max */}
<div className={`module-table-box ${arrayLength === 3 ? 'by-max': ''}`}>
{Array.from({length : arrayLength}).map((_, idx) => (
<div key={idx} className="module-table-inner" >
<div className="mb-box">
<div className="circuit-table-tit">HQJP-KA55-5</div>
<div className="roof-module-table overflow-y min">
<table>
<thead>
<tr>
<th>シリアル枚数</th>
<th>総回路数</th>
</tr>
</thead>
<tbody>
<tr className="on">
<td className="al-r">10</td>
<td className="al-r">0</td>
</tr>
<tr>
<td className="al-r">10</td>
<td className="al-r">0</td>
</tr>
<tr >
<td className="al-r">10</td>
<td className="al-r">0</td>
</tr>
<tr>
<td className="al-r">10</td>
<td className="al-r">0</td>
</tr>
<tr>
<td className="al-r">10</td>
<td className="al-r">0</td>
</tr>
<tr>
<td className="al-r">10</td>
<td className="al-r">0</td>
</tr>
</tbody>
</table>
</div>
</div>
<div className="module-box-tab mb10">
<button className={`module-btn ${moduleTab === 1 ? 'act' : ''}`} onClick={() => setModuleTab(1)}>接続する</button>
<button className={`module-btn ${moduleTab === 2 ? 'act' : ''}`} onClick={() => setModuleTab(2)}>昇圧オプション</button>
</div>
<div className="circuit-table-flx-wrap">
{moduleTab === 1 &&
<div className="circuit-table-flx-box">
<div className="roof-module-table min mb10">
<table>
<thead>
<tr>
<th>名称</th>
<th>回路数</th>
<th>昇圧回路数</th>
</tr>
</thead>
<tbody>
<tr>
<td className="al-c">KTN-CBD4C</td>
<td className="al-r">4</td>
<td className="al-r">0</td>
</tr>
</tbody>
</table>
</div>
</div>
}
{moduleTab === 2 &&
<div className="circuit-table-flx-box">
<div className="roof-module-table min mb10">
<table>
<thead>
<tr>
<th>名称</th>
<th>昇圧回路数</th>
</tr>
</thead>
<tbody>
<tr>
<td className="al-c">-</td>
<td className="al-c">-</td>
</tr>
</tbody>
</table>
</div>
</div>
}
</div>
</div>
))}
</div>
</div>
</div>
</div>
<div className="grid-btn-wrap">
<button className="btn-frame modal mr5" onClick={() => setTabNum(1)}>以前</button>

1
src/components/publishpage/PublishPage.jsx
View File

@ -264,6 +264,7 @@ export default function PublishPage() {
<li>2025-02-13</li>
<li>*배치면 초기설정 지붕 각도 설정 수정</li>
<li>*팝업 공통 양 사이드바 추가</li>
<li>*회로설정 팝업 승압설정 영역 수정</li>
</ul>
</td>
<td className="t-center">2024-10-28</td>

37
src/styles/_modal.scss
View File

@ -1668,7 +1668,6 @@ $alert-color: #101010;
.circuit-overflow{
overflow-x: auto;
margin-bottom: 25px;
&::-webkit-scrollbar {
height: 4px;
background-color: transparent;
@ -1686,6 +1685,42 @@ $alert-color: #101010;
}
}
}
.circuit-title-sel{
padding-bottom: 14px;
.outline-form{
span{
color: #62C207;
}
.grid-select{
.sort-select{
border: 1px solid #4E9E04;
background-color: #1A3104;
p{
line-height: 27px;
}
.select-item-wrap{
background-color: #1A3104;
border: 1px solid #4E9E04;
.select-item:hover{
background-color: #294e07;
}
&::-webkit-scrollbar {
width: 2px;
background-color: transparent;
}
&::-webkit-scrollbar-thumb {
background-color: #fff;
border-radius: 10px;
}
&::-webkit-scrollbar-track {
background-color: transparent;
}
}
}
}
}
}
.circuit-table-flx-wrap{
display: flex;