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-01-07 16:48:34 +09:00
parent 37eb8f9ae4
commit 1045cd4541
10 changed files with 186 additions and 376 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -89,7 +89,7 @@ export default function CanvasPage() {
{/* <Penal04/> */} {/* <Penal04/> */}
{/* 배치면 초기 설정 */} {/* 배치면 초기 설정 */}
<PlacementSettingPop/> {/* <PlacementSettingPop/> */}
{/* 캔버스 기본 셋팅 */} {/* 캔버스 기본 셋팅 */}
{/* {modalOption.option && <SettingModal01/>} */} {/* {modalOption.option && <SettingModal01/>} */}
@ -164,7 +164,7 @@ export default function CanvasPage() {
{/* <HexagonalRoofOption/> */} {/* <HexagonalRoofOption/> */}
{/* 회로 및 가대설정 */} {/* 회로 및 가대설정 */}
{/* <CircuitStandSetting/> */} <CircuitStandSetting/>
{/* 모듈 부가기능 */} {/* 모듈 부가기능 */}

3
src/components/canvas/MenuDepth02.jsx
View File

@ -7,8 +7,7 @@ export default function MenuDepth02(){
return( return(
<div className="canvas-depth2-inner"> <div className="canvas-depth2-inner">
<ul className="canvas-depth2-list"> <ul className="canvas-depth2-list">
<li className="canvas-depth2-item active"><button>傾斜設定</button></li> <li className="canvas-depth2-item active"><button>配置面の描画</button></li>
<li className="canvas-depth2-item"><button>配置面の描画</button></li>
<li className="canvas-depth2-item"><button>面形状の配置</button></li> <li className="canvas-depth2-item"><button>面形状の配置</button></li>
<li className="canvas-depth2-item"><button>オブジェクトの配置</button></li> <li className="canvas-depth2-item"><button>オブジェクトの配置</button></li>
<li className="canvas-depth2-item"><button>配置面全体を削除</button></li> <li className="canvas-depth2-item"><button>配置面全体を削除</button></li>

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

@ -8,18 +8,16 @@ export default function CircuitStandSetting(){
const [tabNum, setTabNum] = useState(1); const [tabNum, setTabNum] = useState(1);
return( return(
<WithDraggable isShow={true}> <WithDraggable isShow={true}>
<div className={`modal-pop-wrap lx-2`}> <div className={`modal-pop-wrap l-2`}>
<div className="modal-head"> <div className="modal-head">
<h1 className="title">回路と架台設定 </h1> <h1 className="title">回路と架台設定 </h1>
<button className="modal-close">닫기</button> <button className="modal-close">닫기</button>
</div> </div>
<div className="modal-body"> <div className="modal-body">
<div className="roof-module-tab"> <div className="roof-module-tab">
<div className={`module-tab-bx ${tabNum === 1 || tabNum === 2 || tabNum === 3 ? 'act': ''}`}>パワーコンディショナーを選択</div> <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> <span className={`tab-arr ${ tabNum === 3 ? 'act': ''}`}></span>
<div className={`module-tab-bx ${tabNum === 3 ? 'act': ''}`}>昇圧設定</div> <div className={`module-tab-bx ${tabNum === 3 ? 'act': ''}`}>回路割当&#40;昇圧設定&#41;</div>
</div> </div>
{tabNum === 1 && <CircuitStandTab01 setTabNum={setTabNum}/>} {tabNum === 1 && <CircuitStandTab01 setTabNum={setTabNum}/>}
{tabNum === 2 && <CircuitStandTab02 setTabNum={setTabNum}/>} {tabNum === 2 && <CircuitStandTab02 setTabNum={setTabNum}/>}

11
src/components/canvas/modal/circuitstandsetting/CircuitStandTab01.jsx
View File

@ -35,38 +35,38 @@ export default function CircuitStandTab01({setTabNum}){
<table> <table>
<thead> <thead>
<tr> <tr>
<th style={{width: '15%'}}>シリーズ</th>
<th style={{width: '15%'}}>名称</th> <th style={{width: '15%'}}>名称</th>
<th style={{width: '10%'}}>定格出力 (kW)</th> <th style={{width: '10%'}}>定格出力 (kW)</th>
<th style={{width: '10%'}}>回路数</th> <th style={{width: '10%'}}>回路数</th>
<th style={{width: '10%'}}>最大接続枚数</th> <th style={{width: '10%'}}>最大接続枚数</th>
<th style={{width: '10%'}}>過積最大枚数</th> <th style={{width: '10%'}}>過積最大枚数</th>
<th style={{width: '10%'}}>出力電流</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>屋内PCS&#40;HQJP</td>
<td>HQJP-KA30-5</td> <td>HQJP-KA30-5</td>
<td className="al-c"><span className="warning">PCSオプションマスター</span></td> <td className="al-c"><span className="warning">PCSオプションマスター</span></td>
<td className="al-r">2</td> <td className="al-r">2</td>
<td className="al-r">2</td> <td className="al-r">2</td>
<td className="al-c">-</td> <td className="al-c">-</td>
<td className="al-c">-</td>
</tr> </tr>
<tr className="on"> <tr className="on">
<td>屋内PCS&#40;HQJP</td>
<td>HQJP-KA40-5</td> <td>HQJP-KA40-5</td>
<td className="al-r">1.00</td> <td className="al-r">1.00</td>
<td className="al-r">2</td> <td className="al-r">2</td>
<td className="al-r">2</td> <td className="al-r">2</td>
<td className="al-c">-</td> <td className="al-c">-</td>
<td className="al-c">-</td>
</tr> </tr>
<tr> <tr>
<td>屋内PCS&#40;HQJP</td>
<td>HQJP-KA50-5</td> <td>HQJP-KA50-5</td>
<td className="al-r">1.00</td> <td className="al-r">1.00</td>
<td className="al-r">2</td> <td className="al-r">2</td>
<td className="al-r">2</td> <td className="al-r">2</td>
<td className="al-c">-</td> <td className="al-c">-</td>
<td className="al-c">-</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
@ -93,7 +93,8 @@ export default function CircuitStandTab01({setTabNum}){
</div> </div>
</div> </div>
<div className="grid-btn-wrap"> <div className="grid-btn-wrap">
<button className="btn-frame modal act" onClick={() => setTabNum(2)}>保存</button> <button className="btn-frame modal mr5" onClick={() => setTabNum(3)}>回路割当&#40;昇圧設定&#41;</button>
<button className="btn-frame modal act" onClick={() => setTabNum(2)}>手動回路構成</button>
</div> </div>
</> </>
) )

11
src/components/canvas/modal/circuitstandsetting/CircuitStandTab02.jsx
View File

@ -4,18 +4,13 @@ import CircuitStandSecondTab01 from "./circuitstandsecondtab/CircuitStandSecondT
import CircuitStandSecondTab02 from "./circuitstandsecondtab/CircuitStandSecondTab02"; import CircuitStandSecondTab02 from "./circuitstandsecondtab/CircuitStandSecondTab02";
export default function CircuitStandTab02({setTabNum}){ export default function CircuitStandTab02({setTabNum}){
const [secondTab, setSecondTab] = useState(1);
return( return(
<> <>
<div className="module-box-tab"> <CircuitStandSecondTab02/>
<button className={`module-btn ${secondTab === 1 ? 'act':''}`} onClick={() => setSecondTab(1)}>自動回路割り当て</button>
<button className={`module-btn ${secondTab === 2 ? 'act':''}`} onClick={() => setSecondTab(2)}>手動回路割当</button>
</div>
{secondTab === 1 && <CircuitStandSecondTab01/>}
{secondTab === 2 && <CircuitStandSecondTab02/>}
<div className="grid-btn-wrap"> <div className="grid-btn-wrap">
<button className="btn-frame modal mr5" onClick={() => setTabNum(1)}>以前</button> <button className="btn-frame modal mr5" onClick={() => setTabNum(1)}>以前</button>
<button className="btn-frame modal act" onClick={() => setTabNum(3)}>保存</button> <button className="btn-frame modal act" onClick={() => setTabNum(3)}>回路割当&#40;昇圧設定&#41;</button>
</div> </div>
</> </>
) )

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

@ -1,4 +1,5 @@
import Qselect from "@/components/common/select/Qselect"; import Qselect from "@/components/common/select/Qselect";
import { useState } from "react";
const SelectOption01 = [ const SelectOption01 = [
{name: '0',}, {name: '0'}, {name: '0'}, {name: '0'} {name: '0',}, {name: '0'}, {name: '0'}, {name: '0'}
@ -6,16 +7,19 @@ const SelectOption01 = [
export default function CircuitStandTab03({setTabNum}){ export default function CircuitStandTab03({setTabNum}){
const [moduleTab, setModuleTab] = useState(1);
const [arrayLength, setArrayLength] = useState(3); //module-table-inner의 반복 개수
return( return(
<> <>
<div className="properties-setting-wrap outer"> <div className="properties-setting-wrap outer">
<div className="setting-tit">昇圧設定</div>
<div className="circuit-overflow"> <div className="circuit-overflow">
<div className="module-table-box mb10"> {/* 3개일때 className = by-max */}
<div className="module-table-inner"> <div className={`module-table-box ${arrayLength === 3 ? 'by-max': ''}`}>
{Array.from({length : arrayLength}).map((_, idx) => (
<div className="module-table-inner" key={idx}>
<div className="mb-box"> <div className="mb-box">
<div className="circuit-table-tit">HQJP-KA55-5</div> <div className="circuit-table-tit">HQJP-KA55-5</div>
<div className="roof-module-table overflow-y"> <div className="roof-module-table overflow-y min">
<table> <table>
<thead> <thead>
<tr> <tr>
@ -24,7 +28,7 @@ export default function CircuitStandTab03({setTabNum}){
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr className="on">
<td className="al-r">10</td> <td className="al-r">10</td>
<td className="al-r">0</td> <td className="al-r">0</td>
</tr> </tr>
@ -32,6 +36,10 @@ export default function CircuitStandTab03({setTabNum}){
<td className="al-r">10</td> <td className="al-r">10</td>
<td className="al-r">0</td> <td className="al-r">0</td>
</tr> </tr>
<tr >
<td className="al-r">10</td>
<td className="al-r">0</td>
</tr>
<tr> <tr>
<td className="al-r">10</td> <td className="al-r">10</td>
<td className="al-r">0</td> <td className="al-r">0</td>
@ -48,338 +56,83 @@ export default function CircuitStandTab03({setTabNum}){
</table> </table>
</div> </div>
</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"> <div className="circuit-table-flx-wrap">
<div className="circuit-table-flx-box"> {moduleTab === 1 &&
<div className="bold-font mb10">接続する</div> <div className="circuit-table-flx-box">
<div className="roof-module-table mb10"> <div className="roof-module-table min mb10">
<table> <table>
<thead> <thead>
<tr> <tr>
<th style={{width: '140px'}}>名称</th> <th>名称</th>
<th>回路数</th> <th>回路数</th>
<th>昇圧回路数</th> <th>昇圧回路数</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td className="al-c">KTN-CBD4C</td> <td className="al-c">KTN-CBD4C</td>
<td className="al-r">4</td> <td className="al-r">4</td>
<td className="al-r">0</td> <td className="al-r">0</td>
</tr> </tr>
<tr> <tr>
<td className="al-c">KTN-CBD4C</td> <td className="al-c">KTN-CBD4C</td>
<td className="al-r">4</td> <td className="al-r">4</td>
<td className="al-r">0</td> <td className="al-r">0</td>
</tr> </tr>
<tr> </tbody>
<td className="al-c">KTN-CBD4C</td> </table>
<td className="al-r">4</td>
<td className="al-r">0</td>
</tr>
</tbody>
</table>
</div>
<div className="bottom-wrap">
<div className="circuit-right-wrap mb10">
<button className="btn-frame self mr5">追加</button>
</div> </div>
<div className="circuit-data-form"> <div className="bottom-wrap">
<span className="normal-font">HQJP-KA40-5<button className="del"></button></span> <div className="circuit-right-wrap mb10">
<button className="btn-frame self mr5">追加</button>
</div>
<div className="circuit-data-form">
<span className="normal-font">HQJP-KA40-5<button className="del"></button></span>
</div>
</div> </div>
</div> </div>
</div> }
<div className="circuit-table-flx-box"> {moduleTab === 2 &&
<div className="bold-font mb10">昇圧オプション</div> <div className="circuit-table-flx-box">
<div className="roof-module-table mb10"> <div className="roof-module-table min mb10">
<table> <table>
<thead> <thead>
<tr> <tr>
<th>名称</th> <th>名称</th>
<th>昇圧回路数</th> <th>昇圧回路数</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td className="al-c">-</td> <td className="al-c">-</td>
<td className="al-c">-</td> <td className="al-c">-</td>
</tr> </tr>
<tr> <tr>
<td className="al-c">-</td> <td className="al-c">-</td>
<td className="al-c">-</td> <td className="al-c">-</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div>
<div className="bottom-wrap">
<div className="circuit-right-wrap mb10">
<button className="btn-frame self mr5">追加</button>
</div> </div>
<div className="circuit-data-form"> <div className="bottom-wrap">
<span className="normal-font">HQJP-KA40-5<button className="del"></button></span> <div className="circuit-right-wrap mb10">
<button className="btn-frame self mr5">追加</button>
</div>
<div className="circuit-data-form">
<span className="normal-font">HQJP-KA40-5<button className="del"></button></span>
</div>
</div> </div>
</div> </div>
</div> }
</div>
<div className="circuit-count-input">
<span className="normal-font">綿調道区分</span>
<div className="input-grid mr5" style={{width: '40px'}}>
<input type="text" className="input-origin block" />
</div>
<span className="normal-font">回路</span>
<span className="normal-font">(二重昇圧回路数</span>
<div className="input-grid mr5" style={{width: '40px'}}>
<input type="text" className="input-origin block" />
</div>
<span className="normal-font">回路)</span>
</div>
</div>
</div>
<div className="module-table-box mb10">
<div className="module-table-inner">
<div className="mb-box">
<div className="circuit-table-tit">HQJP-KA55-5</div>
<div className="roof-module-table overflow-y">
<table>
<thead>
<tr>
<th>シリアル枚数</th>
<th>総回路数</th>
</tr>
</thead>
<tbody>
<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="circuit-table-flx-wrap">
<div className="circuit-table-flx-box">
<div className="bold-font mb10">接続する</div>
<div className="roof-module-table mb10">
<table>
<thead>
<tr>
<th style={{width: '140px'}}>名称</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>
<tr>
<td className="al-c">KTN-CBD4C</td>
<td className="al-r">4</td>
<td className="al-r">0</td>
</tr>
<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 className="bottom-wrap">
<div className="circuit-right-wrap mb10">
<button className="btn-frame self mr5">追加</button>
</div>
<div className="circuit-data-form">
<span className="normal-font">HQJP-KA40-5<button className="del"></button></span>
</div>
</div>
</div>
<div className="circuit-table-flx-box">
<div className="bold-font mb10">昇圧オプション</div>
<div className="roof-module-table mb10">
<table>
<thead>
<tr>
<th>名称</th>
<th>昇圧回路数</th>
</tr>
</thead>
<tbody>
<tr>
<td className="al-c">-</td>
<td className="al-c">-</td>
</tr>
<tr>
<td className="al-c">-</td>
<td className="al-c">-</td>
</tr>
</tbody>
</table>
</div>
<div className="bottom-wrap">
<div className="circuit-right-wrap mb10">
<button className="btn-frame self mr5">追加</button>
</div>
<div className="circuit-data-form">
<span className="normal-font">HQJP-KA40-5<button className="del"></button></span>
</div>
</div>
</div>
</div>
<div className="circuit-count-input">
<span className="normal-font">綿調道区分</span>
<div className="input-grid mr5" style={{width: '40px'}}>
<input type="text" className="input-origin block" />
</div>
<span className="normal-font">回路</span>
<span className="normal-font">(二重昇圧回路数</span>
<div className="input-grid mr5" style={{width: '40px'}}>
<input type="text" className="input-origin block" />
</div>
<span className="normal-font">回路)</span>
</div>
</div>
</div>
<div className="module-table-box ">
<div className="module-table-inner">
<div className="mb-box">
<div className="circuit-table-tit">HQJP-KA55-5</div>
<div className="roof-module-table overflow-y">
<table>
<thead>
<tr>
<th>シリアル枚数</th>
<th>総回路数</th>
</tr>
</thead>
<tbody>
<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="circuit-table-flx-wrap">
<div className="circuit-table-flx-box">
<div className="bold-font mb10">接続する</div>
<div className="roof-module-table mb10">
<table>
<thead>
<tr>
<th style={{width: '140px'}}>名称</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>
<tr>
<td className="al-c">KTN-CBD4C</td>
<td className="al-r">4</td>
<td className="al-r">0</td>
</tr>
<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 className="bottom-wrap">
<div className="circuit-right-wrap mb10">
<button className="btn-frame self mr5">追加</button>
</div>
<div className="circuit-data-form">
<span className="normal-font">HQJP-KA40-5<button className="del"></button></span>
</div>
</div>
</div>
<div className="circuit-table-flx-box">
<div className="bold-font mb10">昇圧オプション</div>
<div className="roof-module-table mb10">
<table>
<thead>
<tr>
<th>名称</th>
<th>昇圧回路数</th>
</tr>
</thead>
<tbody>
<tr>
<td className="al-c">-</td>
<td className="al-c">-</td>
</tr>
<tr>
<td className="al-c">-</td>
<td className="al-c">-</td>
</tr>
</tbody>
</table>
</div>
<div className="bottom-wrap">
<div className="circuit-right-wrap mb10">
<button className="btn-frame self mr5">追加</button>
</div>
<div className="circuit-data-form">
<span className="normal-font">HQJP-KA40-5<button className="del"></button></span>
</div>
</div>
</div>
</div>
<div className="circuit-count-input">
<span className="normal-font">綿調道区分</span>
<div className="input-grid mr5" style={{width: '40px'}}>
<input type="text" className="input-origin block" />
</div>
<span className="normal-font">回路</span>
<span className="normal-font">(二重昇圧回路数</span>
<div className="input-grid mr5" style={{width: '40px'}}>
<input type="text" className="input-origin block" />
</div>
<span className="normal-font">回路)</span>
</div> </div>
</div> </div>
))}
</div> </div>
</div> </div>
<div className="slope-wrap"> <div className="slope-wrap">
<div className="outline-form"> <div className="outline-form">
@ -391,8 +144,8 @@ export default function CircuitStandTab03({setTabNum}){
</div> </div>
</div> </div>
<div className="grid-btn-wrap"> <div className="grid-btn-wrap">
<button className="btn-frame modal mr5" onClick={() => setTabNum(2)}>以前</button> <button className="btn-frame modal mr5" onClick={() => setTabNum(1)}>以前</button>
<button className="btn-frame modal act">保存 (仮割り当て)</button> <button className="btn-frame modal act">保存&#40;仮代割当&#41;</button>
</div> </div>
</> </>
) )

2
src/components/canvas/modal/circuitstandsetting/circuitstandsecondtab/CircuitStandSecondTab02.jsx
View File

@ -76,12 +76,12 @@ export default function CircuitStandSecondTab02(){
<div className="input-grid mr5" style={{width: '70px'}}> <div className="input-grid mr5" style={{width: '70px'}}>
<input type="text" className="input-origin block" /> <input type="text" className="input-origin block" />
</div> </div>
<button className="btn-frame roof">番号確定</button>
</div> </div>
</div> </div>
<div className="circuit-right-wrap"> <div className="circuit-right-wrap">
<button className="btn-frame roof mr5">選択されたパワーコンディショナーの回路番号の初期化</button> <button className="btn-frame roof mr5">選択されたパワーコンディショナーの回路番号の初期化</button>
<button className="btn-frame roof mr5">すべての回路番号の初期化</button> <button className="btn-frame roof mr5">すべての回路番号の初期化</button>
<button className="btn-frame roof">番号確定</button>
</div> </div>
</div> </div>
</div> </div>

74
src/components/canvas/modal/roofallocation/RoofAllocation.jsx
View File

@ -59,11 +59,12 @@ export default function RoofAllocation() {
</div> </div>
</div> </div>
<div className="block-box" > <div className="block-box" >
<div className="flex-ment"> <div className="flex-ment">
<span>垂木の</span> <span>斜傾</span>
<div className="input-grid" style={{width: '178px'}}> <div className="input-grid" style={{width: '214px'}}>
<input type="text" className="input-origin block" defaultValue={100} readOnly/> <input type="text" className="input-origin block" defaultValue={100} readOnly/>
</div> </div>
<span>寸(度)</span>
</div> </div>
</div> </div>
<div className="block-box"> <div className="block-box">
@ -86,8 +87,8 @@ export default function RoofAllocation() {
</div> </div>
<div className="grid-option-box"> <div className="grid-option-box">
<div className="d-check-radio pop no-text"> <div className="d-check-radio pop no-text">
<input type="radio" name="radio01" id="ra02" /> <input type="radio" name="radio01" id="ra01" />
<label htmlFor="ra02"></label> <label htmlFor="ra01"></label>
</div> </div>
<div className="grid-option-block-form"> <div className="grid-option-block-form">
<div className="block-box"> <div className="block-box">
@ -95,9 +96,10 @@ export default function RoofAllocation() {
<div className="grid-select" style={{width: '248px'}}> <div className="grid-select" style={{width: '248px'}}>
<Qselect title={'瓦53A'} option={SelectOption01}/> <Qselect title={'瓦53A'} option={SelectOption01}/>
</div> </div>
<button className="delete"></button> <span className="dec">基本屋根材</span>
</div> </div>
</div> </div>
<div className="block-box"> <div className="block-box">
<div className="flex-ment"> <div className="flex-ment">
<span>W</span> <span>W</span>
@ -111,16 +113,25 @@ export default function RoofAllocation() {
<input type="text" className="input-origin block" defaultValue={100} readOnly/> <input type="text" className="input-origin block" defaultValue={100} readOnly/>
</div> </div>
</div> </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>
<div className="block-box"> <div className="block-box">
<div className="flex-ment"> <div className="flex-ment">
<span>垂木の間隔</span> <span>垂木の間隔</span>
<div className="grid-select" style={{width: '178px'}}> <div className="grid-select" style={{width: '178px'}}>
<Qselect title={'세로 455mm이하'} option={SelectOption04}/> <Qselect title={'455'} option={SelectOption04}/>
</div> </div>
</div> </div>
</div> </div>
<div className="block-box"> <div className="block-box">
<div className="icon-btn-wrap"> <div className="icon-btn-wrap">
<button className="act">並列式<i className="allocation01"></i></button> <button className="act">並列式<i className="allocation01"></i></button>
@ -132,8 +143,8 @@ export default function RoofAllocation() {
</div> </div>
<div className="grid-option-box"> <div className="grid-option-box">
<div className="d-check-radio pop no-text"> <div className="d-check-radio pop no-text">
<input type="radio" name="radio01" id="ra02" /> <input type="radio" name="radio01" id="ra01" />
<label htmlFor="ra02"></label> <label htmlFor="ra01"></label>
</div> </div>
<div className="grid-option-block-form"> <div className="grid-option-block-form">
<div className="block-box"> <div className="block-box">
@ -141,9 +152,10 @@ export default function RoofAllocation() {
<div className="grid-select" style={{width: '248px'}}> <div className="grid-select" style={{width: '248px'}}>
<Qselect title={'瓦53A'} option={SelectOption01}/> <Qselect title={'瓦53A'} option={SelectOption01}/>
</div> </div>
<button className="delete"></button> <span className="dec">基本屋根材</span>
</div> </div>
</div> </div>
<div className="block-box"> <div className="block-box">
<div className="flex-ment"> <div className="flex-ment">
<span>W</span> <span>W</span>
@ -157,28 +169,38 @@ export default function RoofAllocation() {
<input type="text" className="input-origin block" defaultValue={100} readOnly/> <input type="text" className="input-origin block" defaultValue={100} readOnly/>
</div> </div>
</div> </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>
<div className="block-box"> <div className="block-box">
<div className="flex-ment"> <div className="flex-ment">
<span>垂木の間隔</span> <span>垂木の間隔</span>
<div className="grid-select" style={{width: '178px'}}> <div className="grid-select" style={{width: '178px'}}>
<Qselect title={'세로 455mm이하'} option={SelectOption04}/> <Qselect title={'455'} option={SelectOption04}/>
</div> </div>
</div> </div>
</div> </div>
<div className="block-box"> <div className="block-box">
<div className="icon-btn-wrap"> <div className="icon-btn-wrap">
<button className="act">並列式<i className="allocation01"></i></button> <button className="act">並列式<i className="allocation01"></i></button>
<button>カスケード <i className="allocation02"></i></button> <button>カスケード <i className="allocation02"></i></button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div className="grid-option-box"> <div className="grid-option-box">
<div className="d-check-radio pop no-text"> <div className="d-check-radio pop no-text">
<input type="radio" name="radio01" id="ra02" /> <input type="radio" name="radio01" id="ra01" />
<label htmlFor="ra02"></label> <label htmlFor="ra01"></label>
</div> </div>
<div className="grid-option-block-form"> <div className="grid-option-block-form">
<div className="block-box"> <div className="block-box">
@ -186,9 +208,10 @@ export default function RoofAllocation() {
<div className="grid-select" style={{width: '248px'}}> <div className="grid-select" style={{width: '248px'}}>
<Qselect title={'瓦53A'} option={SelectOption01}/> <Qselect title={'瓦53A'} option={SelectOption01}/>
</div> </div>
<button className="delete"></button> <span className="dec">基本屋根材</span>
</div> </div>
</div> </div>
<div className="block-box"> <div className="block-box">
<div className="flex-ment"> <div className="flex-ment">
<span>W</span> <span>W</span>
@ -202,24 +225,35 @@ export default function RoofAllocation() {
<input type="text" className="input-origin block" defaultValue={100} readOnly/> <input type="text" className="input-origin block" defaultValue={100} readOnly/>
</div> </div>
</div> </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>
<div className="block-box"> <div className="block-box">
<div className="flex-ment"> <div className="flex-ment">
<span>垂木の間隔</span> <span>垂木の間隔</span>
<div className="grid-select" style={{width: '178px'}}> <div className="grid-select" style={{width: '178px'}}>
<Qselect title={'세로 455mm이하'} option={SelectOption04}/> <Qselect title={'455'} option={SelectOption04}/>
</div> </div>
</div> </div>
</div> </div>
<div className="block-box"> <div className="block-box">
<div className="icon-btn-wrap"> <div className="icon-btn-wrap">
<button className="act">並列式<i className="allocation01"></i></button> <button className="act">並列式<i className="allocation01"></i></button>
<button>カスケード <i className="allocation02"></i></button> <button>カスケード <i className="allocation02"></i></button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div className="grid-btn-wrap"> <div className="grid-btn-wrap">

13
src/styles/_modal.scss
View File

@ -1575,11 +1575,10 @@ $alert-color: #101010;
} }
.circuit-overflow{ .circuit-overflow{
max-height: 400px; overflow-x: auto;
overflow-y: auto; margin-bottom: 25px;
margin-bottom: 15px;
&::-webkit-scrollbar { &::-webkit-scrollbar {
width: 4px; height: 4px;
background-color: transparent; background-color: transparent;
} }
&::-webkit-scrollbar-thumb { &::-webkit-scrollbar-thumb {
@ -1588,6 +1587,12 @@ $alert-color: #101010;
&::-webkit-scrollbar-track { &::-webkit-scrollbar-track {
background-color: transparent; background-color: transparent;
} }
.module-table-box{
display: flex;
&.by-max{
min-width: 886px;
}
}
} }
.circuit-table-flx-wrap{ .circuit-table-flx-wrap{

25
src/styles/_table.scss
View File

@ -311,6 +311,31 @@ table{
} }
} }
} }
&.min{
table{
tbody{
max-height: 100px;
td{
height: 20px;
}
}
}
}
}
&.min{
table{
thead{
th{
height: 30px;
font-size: 11px;
}
}
tbody{
td{
font-size: 11px;
}
}
}
} }
} }