지붕모듈 팝업 및 육지붕 모듈 팝업 수정 메뉴 앞 데이터명 추가
This commit is contained in:
parent
b02cd7cdb2
commit
0da38fef7f
@ -89,7 +89,7 @@ export default function CanvasPage() {
|
||||
{/* <Penal04/> */}
|
||||
|
||||
{/* 배치면 초기 설정 */}
|
||||
<PlacementSettingPop/>
|
||||
{/* <PlacementSettingPop/> */}
|
||||
|
||||
{/* 캔버스 기본 셋팅 */}
|
||||
{/* {modalOption.option && <SettingModal01/>} */}
|
||||
@ -161,7 +161,7 @@ export default function CanvasPage() {
|
||||
<RoofModuleOption/>
|
||||
|
||||
{/* 육지붕모듈 선택 */}
|
||||
{/* <HexagonalRoofOption/> */}
|
||||
<HexagonalRoofOption/>
|
||||
|
||||
{/* 회로 및 가대설정 */}
|
||||
{/* <CircuitStandSetting/> */}
|
||||
|
||||
@ -25,6 +25,7 @@ export default function CanvasLayout ({menuValue}) {
|
||||
return(
|
||||
<div className="canvas-layout">
|
||||
<div className={`canvas-page-list ${(menuValue === 2 || menuValue === 3 || menuValue === 4) ? 'active' : ""}`}>
|
||||
<div className="canvas-id">RT01250306004</div>
|
||||
<div className="canvas-plane-wrap">
|
||||
{plans.map((plan, idx) => (
|
||||
<button
|
||||
|
||||
@ -2,7 +2,6 @@ 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);
|
||||
@ -16,15 +15,12 @@ export default function HexagonalRoofOption(){
|
||||
<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 === 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 className={`module-tab-bx ${tabNum === 1 || tabNum === 2 ? 'act': ''}`}>防衛設定</div>
|
||||
<span className={`tab-arr ${ tabNum === 2 ? 'act': ''}`}></span>
|
||||
<div className={`module-tab-bx ${tabNum === 2 ? 'act': ''}`}>モジュールの配置</div>
|
||||
</div>
|
||||
{tabNum === 1 && <HexagonalRoofTab01 setTabNum={setTabNum}/>}
|
||||
{tabNum === 2 && <HexagonalRoofTab02 setTabNum={setTabNum}/>}
|
||||
{tabNum === 3 && <HexagonalRoofTab03 setTabNum={setTabNum}/>}
|
||||
</div>
|
||||
<div className="modal-foot handle"></div>
|
||||
</WithDraggable>
|
||||
|
||||
@ -1,60 +1,136 @@
|
||||
import Qselect from "@/components/common/select/Qselect";
|
||||
import { useState } from "react";
|
||||
|
||||
const SelectOption01 = [
|
||||
{name: '0',}, {name: '0'}, {name: '0'}, {name: '0'}
|
||||
]
|
||||
|
||||
|
||||
export default function HexagonalRoofTab01({setTabNum}){
|
||||
const [compasDeg, setCompasDeg] = useState(0);
|
||||
return(
|
||||
<>
|
||||
<div className="properties-setting-wrap">
|
||||
<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>-90°</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 className="roof-module-inner">
|
||||
<div className="compas-wrapper">
|
||||
<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>-90°</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="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 className="center-wrap">
|
||||
<div className="d-check-box pop">
|
||||
<input type="checkbox" id="ch99" />
|
||||
<label htmlFor="ch99">角度を直接入力（ -180 〜 180 ）</label>
|
||||
</div>
|
||||
<div className="outline-form">
|
||||
<div className="input-grid mr10" style={{width: '160px'}}>
|
||||
<input type="text" className="input-origin block" defaultValue={315}/>
|
||||
<div className="compas-table-wrap">
|
||||
<div className="compas-table-box">
|
||||
<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>
|
||||
<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>
|
||||
<span className="thin" >°</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal mr5">保存</button>
|
||||
<button className="btn-frame modal act" onClick={() => setTabNum(2)}>Next</button>
|
||||
</div>
|
||||
</>
|
||||
|
||||
@ -1,67 +1,165 @@
|
||||
import Qselect from "@/components/common/select/Qselect";
|
||||
|
||||
const SelectOption01 = [
|
||||
{name: '0',}, {name: '0'}, {name: '0'}, {name: '0'}
|
||||
]
|
||||
|
||||
export default function HexagonalRoofTab02({setTabNum}){
|
||||
export default function HexagonalRoofTab03({setTabNum}){
|
||||
return(
|
||||
<>
|
||||
<div className="module-table-box">
|
||||
<div className="module-table-box mb10">
|
||||
<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>
|
||||
<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'}}>Max単数</th>
|
||||
<th style={{width: '100px'}}>混合Max単数</th>
|
||||
<th style={{width: '80px'}}>単数</th>
|
||||
<th style={{width: '80px'}}>熱水</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">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 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 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(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>
|
||||
</>
|
||||
)
|
||||
|
||||
@ -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>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -1,60 +1,158 @@
|
||||
import Qselect from "@/components/common/select/Qselect";
|
||||
import { useState } from "react";
|
||||
|
||||
const SelectOption01 = [
|
||||
{name: '0',}, {name: '0'}, {name: '0'}, {name: '0'}
|
||||
]
|
||||
|
||||
export default function RoofModuleOptionTab01({setTabNum}){
|
||||
const [compasDeg, setCompasDeg] = useState(0);
|
||||
return(
|
||||
<>
|
||||
<div className="properties-setting-wrap">
|
||||
<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>-90°</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 className="roof-module-inner">
|
||||
<div className="compas-wrapper">
|
||||
<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>-90°</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="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 className="center-wrap">
|
||||
<div className="d-check-box pop">
|
||||
<input type="checkbox" id="ch99" />
|
||||
<label htmlFor="ch99">角度を直接入力（ -180 〜 180 ）</label>
|
||||
</div>
|
||||
<div className="outline-form">
|
||||
<div className="input-grid mr10" style={{width: '160px'}}>
|
||||
<input type="text" className="input-origin block" defaultValue={315}/>
|
||||
<div className="compas-table-wrap">
|
||||
<div className="compas-table-box mb10">
|
||||
<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>
|
||||
<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>
|
||||
<span className="thin" >°</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal mr5">保存</button>
|
||||
<button className="btn-frame modal act" onClick={() => setTabNum(2)}>Next</button>
|
||||
</div>
|
||||
</>
|
||||
|
||||
@ -9,112 +9,6 @@ export default function RoofModuleOptionTab02({setTabNum}){
|
||||
return(
|
||||
<>
|
||||
<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-box-tab">
|
||||
<button className="module-btn act">屋根材1</button>
|
||||
@ -123,9 +17,12 @@ export default function RoofModuleOptionTab02({setTabNum}){
|
||||
<button className="module-btn">屋根材4</button>
|
||||
</div>
|
||||
<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-flex-item">
|
||||
<div className="module-flex-item-tit">屋根材：スレーツ（4寸）</div>
|
||||
<div className="eaves-keraba-table">
|
||||
{/* <div className="eaves-keraba-item">
|
||||
<div className="eaves-keraba-th">
|
||||
@ -145,16 +42,6 @@ export default function RoofModuleOptionTab02({setTabNum}){
|
||||
</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-th">
|
||||
垂木の間隔
|
||||
@ -208,17 +95,45 @@ export default function RoofModuleOptionTab02({setTabNum}){
|
||||
<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>
|
||||
</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-table-box ">
|
||||
<div className="warning-guide">
|
||||
|
||||
@ -91,12 +91,12 @@ export default function RoofModuleOptionTab03({setTabNum}){
|
||||
</div>
|
||||
<div className="module-table-box">
|
||||
<div className="module-table-inner">
|
||||
<div className="self-table-tit">設置形態を選択してくださ</div>
|
||||
<div className="self-table-tit">設置形態を選択してください。</div>
|
||||
<div className="roof-module-table self">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th >水鳥の配置</th>
|
||||
<th >千鳥配置</th>
|
||||
<th >配置基準</th>
|
||||
</tr>
|
||||
</thead>
|
||||
@ -118,11 +118,11 @@ export default function RoofModuleOptionTab03({setTabNum}){
|
||||
<div className="self-table-radio">
|
||||
<div className="d-check-radio pop mr10">
|
||||
<input type="radio" name="radio03" id="ra05" />
|
||||
<label htmlFor="ra05">軒の側</label>
|
||||
<label htmlFor="ra05">軒側</label>
|
||||
</div>
|
||||
<div className="d-check-radio pop">
|
||||
<input type="radio" name="radio03" id="ra06" />
|
||||
<label htmlFor="ra06">龍丸側</label>
|
||||
<label htmlFor="ra06">棟側</label>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
@ -284,6 +284,11 @@ export default function PublishPage() {
|
||||
<li>2025-03-14</li>
|
||||
<li>* 회로설정 팝업 마지막 셀렉트 추가</li>
|
||||
</ul>
|
||||
<ul className='mb10'>
|
||||
<li>2025-03-18</li>
|
||||
<li>* 지붕모듈 팝업 및 육지붕 모듈 팝업 수정</li>
|
||||
<li>* 캔버스 메뉴 앞 데이터 명 추가</li>
|
||||
</ul>
|
||||
</td>
|
||||
<td className="t-center">2024-10-28</td>
|
||||
</tr>
|
||||
|
||||
@ -340,6 +340,14 @@
|
||||
&.active{
|
||||
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{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@ -2326,7 +2326,7 @@ $alert-color: #101010;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
.outline-form{
|
||||
span{
|
||||
width: 60px;
|
||||
width: 65px;
|
||||
&.thin{
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
@ -222,7 +222,7 @@ button{
|
||||
padding: 0 10px;
|
||||
line-height: 28px;
|
||||
font-family: 'Noto Sans JP', sans-serif;
|
||||
background-color: transparent;
|
||||
background-color: #353535;
|
||||
border: 1px solid #484848;
|
||||
color: #fff;
|
||||
&.blue{
|
||||
@ -245,9 +245,9 @@ button{
|
||||
}
|
||||
&:hover{
|
||||
font-weight: 400;
|
||||
background-color: transparent;
|
||||
border: 1px solid #484848;
|
||||
color: #fff;
|
||||
background-color: #fff;
|
||||
border: 1px solid #fff;
|
||||
color: #101010;
|
||||
}
|
||||
}
|
||||
&.self{
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user