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-03-18 09:21:31 +09:00
parent b02cd7cdb2
commit 0da38fef7f
13 changed files with 469 additions and 409 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/>} */}
@ -161,7 +161,7 @@ export default function CanvasPage() {
<RoofModuleOption/> <RoofModuleOption/>
{/* 육지붕모듈 선택 */} {/* 육지붕모듈 선택 */}
{/* <HexagonalRoofOption/> */} <HexagonalRoofOption/>
{/* 회로 및 가대설정 */} {/* 회로 및 가대설정 */}
{/* <CircuitStandSetting/> */} {/* <CircuitStandSetting/> */}

1
src/components/canvas/CanvasLayout.jsx
View File

@ -25,6 +25,7 @@ export default function CanvasLayout ({menuValue}) {
return( return(
<div className="canvas-layout"> <div className="canvas-layout">
<div className={`canvas-page-list ${(menuValue === 2 || menuValue === 3 || menuValue === 4) ? 'active' : ""}`}> <div className={`canvas-page-list ${(menuValue === 2 || menuValue === 3 || menuValue === 4) ? 'active' : ""}`}>
<div className="canvas-id">RT01250306004</div>
<div className="canvas-plane-wrap"> <div className="canvas-plane-wrap">
{plans.map((plan, idx) => ( {plans.map((plan, idx) => (
<button <button

10
src/components/canvas/modal/hexagonalroofoption/HexagonalRoofOption.jsx
View File

@ -2,7 +2,6 @@ import WithDraggable from "@/components/common/draggable/withDraggable";
import { useState } from "react"; import { useState } from "react";
import HexagonalRoofTab01 from "./HexagonalRoofTab01"; import HexagonalRoofTab01 from "./HexagonalRoofTab01";
import HexagonalRoofTab02 from "./HexagonalRoofTab02"; import HexagonalRoofTab02 from "./HexagonalRoofTab02";
import HexagonalRoofTab03 from "./HexagonalRoofTab03";
export default function HexagonalRoofOption(){ export default function HexagonalRoofOption(){
const [tabNum, setTabNum] = useState(1); const [tabNum, setTabNum] = useState(1);
@ -16,15 +15,12 @@ export default function HexagonalRoofOption(){
<div className="left-bar handle"></div> <div className="left-bar handle"></div>
<div className="right-bar handle"></div> <div className="right-bar handle"></div>
<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 ? 'act': ''}`}>防衛設定</div>
<span className={`tab-arr ${ tabNum === 2 || tabNum === 3 ? 'act': ''}`}></span> <span className={`tab-arr ${ tabNum === 2 ? 'act': ''}`}></span>
<div className={`module-tab-bx ${tabNum === 2 || tabNum === 3 ? 'act': ''}`}>モジュール設定</div> <div className={`module-tab-bx ${tabNum === 2 ? 'act': ''}`}>モジュールの配置</div>
<span className={`tab-arr ${ tabNum === 3 ? 'act': ''}`}></span>
<div className={`module-tab-bx ${tabNum === 3 ? 'act': ''}`}>モジュールの配置</div>
</div> </div>
{tabNum === 1 && <HexagonalRoofTab01 setTabNum={setTabNum}/>} {tabNum === 1 && <HexagonalRoofTab01 setTabNum={setTabNum}/>}
{tabNum === 2 && <HexagonalRoofTab02 setTabNum={setTabNum}/>} {tabNum === 2 && <HexagonalRoofTab02 setTabNum={setTabNum}/>}
{tabNum === 3 && <HexagonalRoofTab03 setTabNum={setTabNum}/>}
</div> </div>
<div className="modal-foot handle"></div> <div className="modal-foot handle"></div>
</WithDraggable> </WithDraggable>

156
src/components/canvas/modal/hexagonalroofoption/HexagonalRoofTab01.jsx
View File

@ -1,60 +1,136 @@
import Qselect from "@/components/common/select/Qselect";
import { useState } from "react"; import { useState } from "react";
const SelectOption01 = [
{name: '0',}, {name: '0'}, {name: '0'}, {name: '0'}
]
export default function HexagonalRoofTab01({setTabNum}){ export default function HexagonalRoofTab01({setTabNum}){
const [compasDeg, setCompasDeg] = useState(0); const [compasDeg, setCompasDeg] = useState(0);
return( return(
<> <>
<div className="properties-setting-wrap"> <div className="properties-setting-wrap">
<div className="outline-wrap"> <div className="outline-wrap">
<div className="guide">※シミュレーション計算用方位を指定します。南の方位を設定してください。</div> <div className="roof-module-inner">
<div className="roof-module-compas"> <div className="compas-wrapper">
<div className="compas-box"> <div className="guide">※シミュレーション計算用方位を指定します。南の方位を設定してください。</div>
<div className="compas-box-inner"> <div className="roof-module-compas">
<div className={`circle ${compasDeg === 180 ? 'act' : ''}`} onClick={() => setCompasDeg(180)}><i>180°</i></div> <div className="compas-box">
<div className={`circle ${compasDeg === 195 ? 'act' : ''}`} onClick={() => setCompasDeg(195)}></div> <div className="compas-box-inner">
<div className={`circle ${compasDeg === 210 ? 'act' : ''}`} onClick={() => setCompasDeg(210)}></div> <div className={`circle ${compasDeg === 180 ? 'act' : ''}`} onClick={() => setCompasDeg(180)}><i>180°</i></div>
<div className={`circle ${compasDeg === 225 ? 'act' : ''}`} onClick={() => setCompasDeg(225)}></div> <div className={`circle ${compasDeg === 195 ? 'act' : ''}`} onClick={() => setCompasDeg(195)}></div>
<div className={`circle ${compasDeg === 240 ? 'act' : ''}`} onClick={() => setCompasDeg(240)}></div> <div className={`circle ${compasDeg === 210 ? 'act' : ''}`} onClick={() => setCompasDeg(210)}></div>
<div className={`circle ${compasDeg === 255 ? 'act' : ''}`} onClick={() => setCompasDeg(255)}></div> <div className={`circle ${compasDeg === 225 ? 'act' : ''}`} onClick={() => setCompasDeg(225)}></div>
<div className={`circle ${compasDeg === 270 ? 'act' : ''}`} onClick={() => setCompasDeg(270)}><i>-90°</i></div> <div className={`circle ${compasDeg === 240 ? 'act' : ''}`} onClick={() => setCompasDeg(240)}></div>
<div className={`circle ${compasDeg === 285 ? 'act' : ''}`} onClick={() => setCompasDeg(285)}></div> <div className={`circle ${compasDeg === 255 ? 'act' : ''}`} onClick={() => setCompasDeg(255)}></div>
<div className={`circle ${compasDeg === 300 ? 'act' : ''}`} onClick={() => setCompasDeg(300)}></div> <div className={`circle ${compasDeg === 270 ? 'act' : ''}`} onClick={() => setCompasDeg(270)}><i>-90°</i></div>
<div className={`circle ${compasDeg === 315 ? 'act' : ''}`} onClick={() => setCompasDeg(315)}></div> <div className={`circle ${compasDeg === 285 ? 'act' : ''}`} onClick={() => setCompasDeg(285)}></div>
<div className={`circle ${compasDeg === 330 ? 'act' : ''}`} onClick={() => setCompasDeg(330)}></div> <div className={`circle ${compasDeg === 300 ? 'act' : ''}`} onClick={() => setCompasDeg(300)}></div>
<div className={`circle ${compasDeg === 345 ? 'act' : ''}`} onClick={() => setCompasDeg(345)}></div> <div className={`circle ${compasDeg === 315 ? 'act' : ''}`} onClick={() => setCompasDeg(315)}></div>
<div className={`circle ${compasDeg === 0 ? 'act' : ''}`} onClick={() => setCompasDeg(0)}><i>0°</i></div> <div className={`circle ${compasDeg === 330 ? 'act' : ''}`} onClick={() => setCompasDeg(330)}></div>
<div className={`circle ${compasDeg === 15 ? 'act' : ''}`} onClick={() => setCompasDeg(15)}></div> <div className={`circle ${compasDeg === 345 ? 'act' : ''}`} onClick={() => setCompasDeg(345)}></div>
<div className={`circle ${compasDeg === 30 ? 'act' : ''}`} onClick={() => setCompasDeg(30)}></div> <div className={`circle ${compasDeg === 0 ? 'act' : ''}`} onClick={() => setCompasDeg(0)}><i>0°</i></div>
<div className={`circle ${compasDeg === 45 ? 'act' : ''}`} onClick={() => setCompasDeg(45)}></div> <div className={`circle ${compasDeg === 15 ? 'act' : ''}`} onClick={() => setCompasDeg(15)}></div>
<div className={`circle ${compasDeg === 60 ? 'act' : ''}`} onClick={() => setCompasDeg(60)}></div> <div className={`circle ${compasDeg === 30 ? 'act' : ''}`} onClick={() => setCompasDeg(30)}></div>
<div className={`circle ${compasDeg === 75 ? 'act' : ''}`} onClick={() => setCompasDeg(75)}></div> <div className={`circle ${compasDeg === 45 ? 'act' : ''}`} onClick={() => setCompasDeg(45)}></div>
<div className={`circle ${compasDeg === 90 ? 'act' : ''}`} onClick={() => setCompasDeg(90)}><i>90°</i></div> <div className={`circle ${compasDeg === 60 ? 'act' : ''}`} onClick={() => setCompasDeg(60)}></div>
<div className={`circle ${compasDeg === 105 ? 'act' : ''}`} onClick={() => setCompasDeg(105)}></div> <div className={`circle ${compasDeg === 75 ? 'act' : ''}`} onClick={() => setCompasDeg(75)}></div>
<div className={`circle ${compasDeg === 120 ? 'act' : ''}`} onClick={() => setCompasDeg(120)}></div> <div className={`circle ${compasDeg === 90 ? 'act' : ''}`} onClick={() => setCompasDeg(90)}><i>90°</i></div>
<div className={`circle ${compasDeg === 135 ? 'act' : ''}`} onClick={() => setCompasDeg(135)}></div> <div className={`circle ${compasDeg === 105 ? 'act' : ''}`} onClick={() => setCompasDeg(105)}></div>
<div className={`circle ${compasDeg === 150 ? 'act' : ''}`} onClick={() => setCompasDeg(150)}></div> <div className={`circle ${compasDeg === 120 ? 'act' : ''}`} onClick={() => setCompasDeg(120)}></div>
<div className={`circle ${compasDeg === 165 ? 'act' : ''}`} onClick={() => setCompasDeg(165)}></div> <div className={`circle ${compasDeg === 135 ? 'act' : ''}`} onClick={() => setCompasDeg(135)}></div>
<div className="compas"> <div className={`circle ${compasDeg === 150 ? 'act' : ''}`} onClick={() => setCompasDeg(150)}></div>
<div className="compas-arr" style={{transform: `rotate(${compasDeg}deg)`}}></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="outline-form">
<div className="d-check-box pop mr10">
<input type="checkbox" id="ch99" />
<label htmlFor="ch99">角度変更</label>
</div>
<div className="input-grid mr10" style={{width: '60px'}}>
<input type="text" className="input-origin block" defaultValue={315}/>
</div>
<span className="thin" >°</span>
<span className="thin" >（ -180 〜 180 ）</span>
</div> </div>
</div> </div>
</div> </div>
</div> <div className="compas-table-wrap">
<div className="center-wrap"> <div className="compas-table-box">
<div className="d-check-box pop"> <div className="outline-form mb10">
<input type="checkbox" id="ch99" /> <span className="mr10">モジュールの選択</span>
<label htmlFor="ch99">角度を直接入力（ -180 〜 180 ）</label> <div className="grid-select">
</div> <Qselect title={'Search'} option={SelectOption01}/>
<div className="outline-form"> </div>
<div className="input-grid mr10" style={{width: '160px'}}> </div>
<input type="text" className="input-origin block" defaultValue={315}/> <div className="roof-module-table">
<table>
<thead>
<tr>
<th style={{width: '150px'}}>モジュール</th>
<th>高さ (mm)</th>
<th>幅 (mm)</th>
<th>出力 (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>
<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>
</tbody>
</table>
</div>
<div className="outline-form mt15">
<span>モジュール配置領域 : </span>
<div className="input-grid mr10" style={{width: '60px'}}>
<input type="text" className="input-origin block" defaultValue={315}/>
</div>
<span className="thin" >mm</span>
</div>
</div> </div>
<span className="thin" >°</span>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div className="grid-btn-wrap"> <div className="grid-btn-wrap">
<button className="btn-frame modal mr5">保存</button>
<button className="btn-frame modal act" onClick={() => setTabNum(2)}>Next</button> <button className="btn-frame modal act" onClick={() => setTabNum(2)}>Next</button>
</div> </div>
</> </>

208
src/components/canvas/modal/hexagonalroofoption/HexagonalRoofTab02.jsx
View File

@ -1,67 +1,165 @@
import Qselect from "@/components/common/select/Qselect";
const SelectOption01 = [ export default function HexagonalRoofTab03({setTabNum}){
{name: '0',}, {name: '0'}, {name: '0'}, {name: '0'}
]
export default function HexagonalRoofTab02({setTabNum}){
return( return(
<> <>
<div className="module-table-box"> <div className="module-table-box mb10">
<div className="module-table-inner"> <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"> <div className="roof-module-table">
<table> <table>
<thead> <thead>
<tr> <tr>
<th style={{width: '250px'}}>モジュール</th> <th style={{width: '70px'}}>
<th>高さ<br/> (mm)</th> <div className="d-check-box no-text pop">
<th>幅<br/> (mm)</th> <input type="checkbox" id="ch01" disabled/>
<th>出力<br/> (W)</th> <label htmlFor="ch01"></label>
</tr> </div>
</thead> </th>
<tbody> <th >モジュール</th>
<tr> <th style={{width: '70px'}}>Max単数</th>
<td> <th style={{width: '100px'}}>混合Max単数</th>
<div className="color-wrap"> <th style={{width: '80px'}}>単数</th>
<span className="color-box" style={{backgroundColor: '#AA6768'}}></span> <th style={{width: '80px'}}>熱水</th>
<span className="name">Re.RISE-G3 440</span> </tr>
</div> </thead>
</td> <tbody>
<td className="al-r">1134</td> <tr>
<td className="al-r">1722</td> <td className="al-c">
<td className="al-r">440</td> <div className="d-check-box no-text pop">
</tr> <input type="checkbox" id="ch02" />
<tr> <label htmlFor="ch02"></label>
<td> </div>
<div className="color-wrap"> </td>
<span className="color-box" style={{backgroundColor: '#67A2AA'}}></span> <td>
<span className="name">Re.RISE MS-G3 290</span> <div className="color-wrap">
</div> <span className="color-box" style={{backgroundColor: '#AA6768'}}></span>
</td> <span className="name">Re.RISE-G3 440</span>
<td className="al-r">1134</td> </div>
<td className="al-r">1722</td> </td>
<td className="al-r">440</td> <td className="al-r">00</td>
</tr> <td className="al-r">00</td>
<tr> <td className="al-r">
<td></td> <div className="input-grid" >
<td></td> <input type="text" className="input-origin block" defaultValue={13}/>
<td></td> </div>
<td></td> </td>
</tr> <td className="al-r">
</tbody> <div className="input-grid" >
</table> <input type="text" className="input-origin block" defaultValue={13}/>
</div> </div>
</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">00</td>
<td className="al-r">00</td>
<td className="al-r">
<div className="input-grid" >
<input type="text" className="input-origin block" defaultValue={13}/>
</div>
</td>
<td className="al-r">
<div className="input-grid" >
<input type="text" className="input-origin block" defaultValue={13}/>
</div>
</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div> </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">mm</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">mm</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">mm</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">mm</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"> <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)}>Next</button> <button className="btn-frame modal mr5">単数指定配置</button>
<button className="btn-frame modal mr5">手動配置</button>
<button className="btn-frame modal act">設定値に自動配置</button>
</div> </div>
</> </>
) )

137
src/components/canvas/modal/hexagonalroofoption/HexagonalRoofTab03.jsx
View File

@ -1,137 +0,0 @@
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">mm</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">mm</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">mm</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">mm</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>
</>
)
}

178
src/components/canvas/modal/roofmoduleoption/RoofModuleOptionTab01.jsx
View File

@ -1,60 +1,158 @@
import Qselect from "@/components/common/select/Qselect";
import { useState } from "react"; import { useState } from "react";
const SelectOption01 = [
{name: '0',}, {name: '0'}, {name: '0'}, {name: '0'}
]
export default function RoofModuleOptionTab01({setTabNum}){ export default function RoofModuleOptionTab01({setTabNum}){
const [compasDeg, setCompasDeg] = useState(0); const [compasDeg, setCompasDeg] = useState(0);
return( return(
<> <>
<div className="properties-setting-wrap"> <div className="properties-setting-wrap">
<div className="outline-wrap"> <div className="outline-wrap">
<div className="guide">※シミュレーション計算用方位を指定します。南の方位を設定してください。</div> <div className="roof-module-inner">
<div className="roof-module-compas"> <div className="compas-wrapper">
<div className="compas-box"> <div className="guide">※シミュレーション計算用方位を指定します。南の方位を設定してください。</div>
<div className="compas-box-inner"> <div className="roof-module-compas">
<div className={`circle ${compasDeg === 180 ? 'act' : ''}`} onClick={() => setCompasDeg(180)}><i>180°</i></div> <div className="compas-box">
<div className={`circle ${compasDeg === 195 ? 'act' : ''}`} onClick={() => setCompasDeg(195)}></div> <div className="compas-box-inner">
<div className={`circle ${compasDeg === 210 ? 'act' : ''}`} onClick={() => setCompasDeg(210)}></div> <div className={`circle ${compasDeg === 180 ? 'act' : ''}`} onClick={() => setCompasDeg(180)}><i>180°</i></div>
<div className={`circle ${compasDeg === 225 ? 'act' : ''}`} onClick={() => setCompasDeg(225)}></div> <div className={`circle ${compasDeg === 195 ? 'act' : ''}`} onClick={() => setCompasDeg(195)}></div>
<div className={`circle ${compasDeg === 240 ? 'act' : ''}`} onClick={() => setCompasDeg(240)}></div> <div className={`circle ${compasDeg === 210 ? 'act' : ''}`} onClick={() => setCompasDeg(210)}></div>
<div className={`circle ${compasDeg === 255 ? 'act' : ''}`} onClick={() => setCompasDeg(255)}></div> <div className={`circle ${compasDeg === 225 ? 'act' : ''}`} onClick={() => setCompasDeg(225)}></div>
<div className={`circle ${compasDeg === 270 ? 'act' : ''}`} onClick={() => setCompasDeg(270)}><i>-90°</i></div> <div className={`circle ${compasDeg === 240 ? 'act' : ''}`} onClick={() => setCompasDeg(240)}></div>
<div className={`circle ${compasDeg === 285 ? 'act' : ''}`} onClick={() => setCompasDeg(285)}></div> <div className={`circle ${compasDeg === 255 ? 'act' : ''}`} onClick={() => setCompasDeg(255)}></div>
<div className={`circle ${compasDeg === 300 ? 'act' : ''}`} onClick={() => setCompasDeg(300)}></div> <div className={`circle ${compasDeg === 270 ? 'act' : ''}`} onClick={() => setCompasDeg(270)}><i>-90°</i></div>
<div className={`circle ${compasDeg === 315 ? 'act' : ''}`} onClick={() => setCompasDeg(315)}></div> <div className={`circle ${compasDeg === 285 ? 'act' : ''}`} onClick={() => setCompasDeg(285)}></div>
<div className={`circle ${compasDeg === 330 ? 'act' : ''}`} onClick={() => setCompasDeg(330)}></div> <div className={`circle ${compasDeg === 300 ? 'act' : ''}`} onClick={() => setCompasDeg(300)}></div>
<div className={`circle ${compasDeg === 345 ? 'act' : ''}`} onClick={() => setCompasDeg(345)}></div> <div className={`circle ${compasDeg === 315 ? 'act' : ''}`} onClick={() => setCompasDeg(315)}></div>
<div className={`circle ${compasDeg === 0 ? 'act' : ''}`} onClick={() => setCompasDeg(0)}><i>0°</i></div> <div className={`circle ${compasDeg === 330 ? 'act' : ''}`} onClick={() => setCompasDeg(330)}></div>
<div className={`circle ${compasDeg === 15 ? 'act' : ''}`} onClick={() => setCompasDeg(15)}></div> <div className={`circle ${compasDeg === 345 ? 'act' : ''}`} onClick={() => setCompasDeg(345)}></div>
<div className={`circle ${compasDeg === 30 ? 'act' : ''}`} onClick={() => setCompasDeg(30)}></div> <div className={`circle ${compasDeg === 0 ? 'act' : ''}`} onClick={() => setCompasDeg(0)}><i>0°</i></div>
<div className={`circle ${compasDeg === 45 ? 'act' : ''}`} onClick={() => setCompasDeg(45)}></div> <div className={`circle ${compasDeg === 15 ? 'act' : ''}`} onClick={() => setCompasDeg(15)}></div>
<div className={`circle ${compasDeg === 60 ? 'act' : ''}`} onClick={() => setCompasDeg(60)}></div> <div className={`circle ${compasDeg === 30 ? 'act' : ''}`} onClick={() => setCompasDeg(30)}></div>
<div className={`circle ${compasDeg === 75 ? 'act' : ''}`} onClick={() => setCompasDeg(75)}></div> <div className={`circle ${compasDeg === 45 ? 'act' : ''}`} onClick={() => setCompasDeg(45)}></div>
<div className={`circle ${compasDeg === 90 ? 'act' : ''}`} onClick={() => setCompasDeg(90)}><i>90°</i></div> <div className={`circle ${compasDeg === 60 ? 'act' : ''}`} onClick={() => setCompasDeg(60)}></div>
<div className={`circle ${compasDeg === 105 ? 'act' : ''}`} onClick={() => setCompasDeg(105)}></div> <div className={`circle ${compasDeg === 75 ? 'act' : ''}`} onClick={() => setCompasDeg(75)}></div>
<div className={`circle ${compasDeg === 120 ? 'act' : ''}`} onClick={() => setCompasDeg(120)}></div> <div className={`circle ${compasDeg === 90 ? 'act' : ''}`} onClick={() => setCompasDeg(90)}><i>90°</i></div>
<div className={`circle ${compasDeg === 135 ? 'act' : ''}`} onClick={() => setCompasDeg(135)}></div> <div className={`circle ${compasDeg === 105 ? 'act' : ''}`} onClick={() => setCompasDeg(105)}></div>
<div className={`circle ${compasDeg === 150 ? 'act' : ''}`} onClick={() => setCompasDeg(150)}></div> <div className={`circle ${compasDeg === 120 ? 'act' : ''}`} onClick={() => setCompasDeg(120)}></div>
<div className={`circle ${compasDeg === 165 ? 'act' : ''}`} onClick={() => setCompasDeg(165)}></div> <div className={`circle ${compasDeg === 135 ? 'act' : ''}`} onClick={() => setCompasDeg(135)}></div>
<div className="compas"> <div className={`circle ${compasDeg === 150 ? 'act' : ''}`} onClick={() => setCompasDeg(150)}></div>
<div className="compas-arr" style={{transform: `rotate(${compasDeg}deg)`}}></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="outline-form">
<div className="d-check-box pop mr10">
<input type="checkbox" id="ch99" />
<label htmlFor="ch99">角度変更</label>
</div>
<div className="input-grid mr10" style={{width: '60px'}}>
<input type="text" className="input-origin block" defaultValue={315}/>
</div>
<span className="thin" >°</span>
<span className="thin" >（ -180 〜 180 ）</span>
</div> </div>
</div> </div>
</div> </div>
</div> <div className="compas-table-wrap">
<div className="center-wrap"> <div className="compas-table-box mb10">
<div className="d-check-box pop"> <div className="outline-form mb10">
<input type="checkbox" id="ch99" /> <span className="mr10">モジュールの選択</span>
<label htmlFor="ch99">角度を直接入力（ -180 〜 180 ）</label> <div className="grid-select">
</div> <Qselect title={'Search'} option={SelectOption01}/>
<div className="outline-form"> </div>
<div className="input-grid mr10" style={{width: '160px'}}> </div>
<input type="text" className="input-origin block" defaultValue={315}/> <div className="roof-module-table">
<table>
<thead>
<tr>
<th style={{width: '150px'}}>モジュール</th>
<th>高さ (mm)</th>
<th>幅 (mm)</th>
<th>出力 (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>
<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>
</tbody>
</table>
</div>
</div>
<div className="compas-table-box">
<div className="compas-grid-table">
<div className="outline-form">
<span>綿調道区分</span>
<div className="grid-select">
<Qselect title={'Ⅲ ∙ Ⅳ'} option={SelectOption01}/>
</div>
</div>
<div className="outline-form">
<span>設置高さ</span>
<div className="input-grid mr10" >
<input type="text" className="input-origin block" defaultValue={13}/>
</div>
<span className="thin">m</span>
</div>
<div className="outline-form">
<span>基準風速</span>
<div className="grid-select">
<Qselect title={'32'} option={SelectOption01}/>
</div>
</div>
<div className="outline-form">
<span>垂直積雪量</span>
<div className="input-grid mr10" >
<input type="text" className="input-origin block" defaultValue={13}/>
</div>
<span className="thin">cm</span>
</div>
</div>
</div> </div>
<span className="thin" >°</span>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div className="grid-btn-wrap"> <div className="grid-btn-wrap">
<button className="btn-frame modal mr5">保存</button>
<button className="btn-frame modal act" onClick={() => setTabNum(2)}>Next</button> <button className="btn-frame modal act" onClick={() => setTabNum(2)}>Next</button>
</div> </div>
</> </>

153
src/components/canvas/modal/roofmoduleoption/RoofModuleOptionTab02.jsx
View File

@ -9,112 +9,6 @@ export default function RoofModuleOptionTab02({setTabNum}){
return( return(
<> <>
<div className="roof-module-tab2-overflow"> <div className="roof-module-tab2-overflow">
<div className="module-table-flex-wrap mb10">
<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: '150px'}}>モジュール</th>
<th>高さ (mm)</th>
<th>幅 (mm)</th>
<th>出力 (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>
</tbody>
</table>
</div>
</div>
</div>
<div className="module-table-box none-flex">
<div className="module-table-inner">
<div className="eaves-keraba-table">
<div className="eaves-keraba-item">
<div className="eaves-keraba-th">
綿調道区分
</div>
<div className="eaves-keraba-td">
<div className="outline-form">
<div className="grid-select">
<Qselect title={'Ⅲ ∙ Ⅳ'} option={SelectOption01}/>
</div>
</div>
</div>
</div>
<div className="eaves-keraba-item">
<div className="eaves-keraba-th">
設置高さ
</div>
<div className="eaves-keraba-td">
<div className="outline-form">
<div className="grid-select mr10">
<Qselect title={'13'} option={SelectOption01}/>
</div>
<span className="thin">m</span>
</div>
</div>
</div>
<div className="eaves-keraba-item">
<div className="eaves-keraba-th">
基準風速
</div>
<div className="eaves-keraba-td">
<div className="outline-form">
<div className="grid-select mr10">
<Qselect title={'32'} option={SelectOption01}/>
</div>
<span className="thin">m/s</span>
</div>
</div>
</div>
<div className="eaves-keraba-item">
<div className="eaves-keraba-th">
基準積雪量
</div>
<div className="eaves-keraba-td">
<div className="outline-form">
<div className="grid-select mr10">
<Qselect title={'13'} option={SelectOption01}/>
</div>
<span className="thin">cm</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div className="module-table-box mb10"> <div className="module-table-box mb10">
<div className="module-box-tab"> <div className="module-box-tab">
<button className="module-btn act">屋根材1</button> <button className="module-btn act">屋根材1</button>
@ -123,9 +17,12 @@ export default function RoofModuleOptionTab02({setTabNum}){
<button className="module-btn">屋根材4</button> <button className="module-btn">屋根材4</button>
</div> </div>
<div className="module-table-inner"> <div className="module-table-inner">
<div className="module-flex-item-tit-wrap">
<div className="module-flex-item-tit">屋根材：スレーツ（4寸）</div>
<button className="btn-frame roof">架台保存</button>
</div>
<div className="module-table-flex-wrap tab2"> <div className="module-table-flex-wrap tab2">
<div className="module-flex-item"> <div className="module-flex-item">
<div className="module-flex-item-tit">屋根材：スレーツ（4寸）</div>
<div className="eaves-keraba-table"> <div className="eaves-keraba-table">
{/* <div className="eaves-keraba-item"> {/* <div className="eaves-keraba-item">
<div className="eaves-keraba-th"> <div className="eaves-keraba-th">
@ -145,16 +42,6 @@ export default function RoofModuleOptionTab02({setTabNum}){
</div> </div>
</div> </div>
</div> */} </div> */}
<div className="eaves-keraba-item">
<div className="eaves-keraba-th">
マンドンピッチ
</div>
<div className="eaves-keraba-td">
<div className="grid-select">
<Qselect title={'屋根技術研究所'} option={SelectOption01}/>
</div>
</div>
</div>
<div className="eaves-keraba-item"> <div className="eaves-keraba-item">
<div className="eaves-keraba-th"> <div className="eaves-keraba-th">
垂木の間隔 垂木の間隔
@ -208,17 +95,45 @@ export default function RoofModuleOptionTab02({setTabNum}){
<div className="grid-check-form-block"> <div className="grid-check-form-block">
<div className="d-check-box pop"> <div className="d-check-box pop">
<input type="checkbox" id="ch01" /> <input type="checkbox" id="ch01" />
<label htmlFor="ch01">庇力バーの設置庇力バーの設置庇力バーの設置庇力バーの設置</label> <label htmlFor="ch01">軒カバーの設置</label>
</div> </div>
<div className="d-check-box pop"> <div className="d-check-box pop">
<input type="checkbox" id="ch02" /> <input type="checkbox" id="ch02" />
<label htmlFor="ch02">目幕金具の設置目幕金具の設置目幕金具の設置目幕金具の設置</label> <label htmlFor="ch02">落雪防止金具設置</label>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div className="module-table-box mb10">
<div className="module-table-inner">
<div className="module-area">
<div className="module-area-title">モジュール配置領域</div>
<div className="outline-form mr15">
<span>軒側</span>
<div className="input-grid mr10" >
<input type="text" className="input-origin block" defaultValue={13}/>
</div>
<span className="thin">mm</span>
</div>
<div className="outline-form mr15">
<span>棟側</span>
<div className="input-grid mr10" >
<input type="text" className="input-origin block" defaultValue={13}/>
</div>
<span className="thin">mm</span>
</div>
<div className="outline-form ">
<span>けらぱ</span>
<div className="input-grid mr10" >
<input type="text" className="input-origin block" defaultValue={13}/>
</div>
<span className="thin">mm</span>
</div>
</div>
</div>
</div>
<div className="module-bottom"> <div className="module-bottom">
<div className="module-table-box "> <div className="module-table-box ">
<div className="warning-guide"> <div className="warning-guide">

8
src/components/canvas/modal/roofmoduleoption/RoofModuleOptionTab03.jsx
View File

@ -91,12 +91,12 @@ export default function RoofModuleOptionTab03({setTabNum}){
</div> </div>
<div className="module-table-box"> <div className="module-table-box">
<div className="module-table-inner"> <div className="module-table-inner">
<div className="self-table-tit">設置形態を選択してくださ</div> <div className="self-table-tit">設置形態を選択してください。</div>
<div className="roof-module-table self"> <div className="roof-module-table self">
<table> <table>
<thead> <thead>
<tr> <tr>
<th >水鳥の配置</th> <th >千鳥配置</th>
<th >配置基準</th> <th >配置基準</th>
</tr> </tr>
</thead> </thead>
@ -118,11 +118,11 @@ export default function RoofModuleOptionTab03({setTabNum}){
<div className="self-table-radio"> <div className="self-table-radio">
<div className="d-check-radio pop mr10"> <div className="d-check-radio pop mr10">
<input type="radio" name="radio03" id="ra05" /> <input type="radio" name="radio03" id="ra05" />
<label htmlFor="ra05">軒の側</label> <label htmlFor="ra05">軒側</label>
</div> </div>
<div className="d-check-radio pop"> <div className="d-check-radio pop">
<input type="radio" name="radio03" id="ra06" /> <input type="radio" name="radio03" id="ra06" />
<label htmlFor="ra06">龍丸側</label> <label htmlFor="ra06">棟側</label>
</div> </div>
</div> </div>
</td> </td>

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

@ -284,6 +284,11 @@ export default function PublishPage() {
<li>2025-03-14</li> <li>2025-03-14</li>
<li>* 회로설정 팝업 마지막 셀렉트 추가</li> <li>* 회로설정 팝업 마지막 셀렉트 추가</li>
</ul> </ul>
<ul className='mb10'>
<li>2025-03-18</li>
<li>* 지붕모듈 팝업 및 육지붕 모듈 팝업 수정</li>
<li>* 캔버스 메뉴 앞 데이터 명 추가</li>
</ul>
</td> </td>
<td className="t-center">2024-10-28</td> <td className="t-center">2024-10-28</td>
</tr> </tr>

8
src/styles/_contents.scss
View File

@ -340,6 +340,14 @@
&.active{ &.active{
top: calc(92.8px + 50px); top: calc(92.8px + 50px);
} }
.canvas-id{
display: flex;
align-items: center;
padding: 9.6px 20px;
font-size: 12px;
color: #fff;
background-color: #777777;
}
.canvas-plane-wrap{ .canvas-plane-wrap{
display: flex; display: flex;
align-items: center; align-items: center;

2
src/styles/_modal.scss
View File

@ -2326,7 +2326,7 @@ $alert-color: #101010;
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
.outline-form{ .outline-form{
span{ span{
width: 60px; width: 65px;
&.thin{ &.thin{
width: 20px; width: 20px;
} }

8
src/styles/_reset.scss
View File

@ -222,7 +222,7 @@ button{
padding: 0 10px; padding: 0 10px;
line-height: 28px; line-height: 28px;
font-family: 'Noto Sans JP', sans-serif; font-family: 'Noto Sans JP', sans-serif;
background-color: transparent; background-color: #353535;
border: 1px solid #484848; border: 1px solid #484848;
color: #fff; color: #fff;
&.blue{ &.blue{
@ -245,9 +245,9 @@ button{
} }
&:hover{ &:hover{
font-weight: 400; font-weight: 400;
background-color: transparent; background-color: #fff;
border: 1px solid #484848; border: 1px solid #fff;
color: #fff; color: #101010;
} }
} }
&.self{ &.self{