180 lines
11 KiB
JavaScript
180 lines
11 KiB
JavaScript
import WithDraggable from "@/components/common/draggable/withDraggable";
|
|
import PlacementGuidePop from "./PlacementGuidePop";
|
|
import RoofingMaterialGudiePop from "./RoofingMaterialGuidePop";
|
|
import Qselect from "@/components/common/select/Qselect";
|
|
const SelectOption01 = [
|
|
{name: '瓦53A',}, {name: '瓦53A'}, {name: '瓦53A'}, {name: '瓦53A'}
|
|
]
|
|
const SelectOption02 = [
|
|
{name: '265',}, {name: '265'}, {name: '265'}, {name: '265'}
|
|
]
|
|
const SelectOption03 = [
|
|
{name: '235',}, {name: '235'}, {name: '235'}, {name: '235'}
|
|
]
|
|
const SelectOption04 = [
|
|
{name: '455'}, {name: '455'}, {name: '455'}, {name: '455'}
|
|
]
|
|
|
|
export default function PlacementSettingPop(){
|
|
return(
|
|
<WithDraggable isShow={true}>
|
|
<div className={`modal-pop-wrap l`}>
|
|
<div className="modal-head">
|
|
<h1 className="title">配置面初期設定</h1>
|
|
<button className="modal-close">닫기</button>
|
|
</div>
|
|
<div className="modal-body">
|
|
<div className="placement-table">
|
|
<table>
|
|
<colgroup>
|
|
<col style={{width: '151px'}}/>
|
|
<col />
|
|
</colgroup>
|
|
<tbody>
|
|
<tr>
|
|
<th>図面の作成方法</th>
|
|
<td>寸法入力による物品作成</td>
|
|
</tr>
|
|
<tr>
|
|
<th>
|
|
<div className="tip-wrap">
|
|
寸法入力方法 <button className="tooltip"></button>
|
|
</div>
|
|
</th>
|
|
<td>
|
|
<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 className="d-check-radio pop">
|
|
<input type="radio" name="radio01" id="ra03" />
|
|
<label htmlFor="ra03">陸上屋根</label>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th>屋根角度設定</th>
|
|
<td>
|
|
<div className="pop-form-radio">
|
|
<div className="d-check-radio pop">
|
|
<input type="radio" name="radio02" id="ra04" />
|
|
<label htmlFor="ra04">傾斜</label>
|
|
</div>
|
|
<div className="d-check-radio pop">
|
|
<input type="radio" name="radio02" id="ra05" />
|
|
<label htmlFor="ra05">角度</label>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th>
|
|
<div className="tip-wrap">
|
|
屋根材の選択(単位:mm)
|
|
<button className="tooltip"></button>
|
|
</div>
|
|
</th>
|
|
<td>
|
|
{/* case01 */}
|
|
<div className="placement-option">
|
|
<div className="grid-select no-flx" style={{width: '171px'}}>
|
|
<Qselect title={'瓦53A'} option={SelectOption01}/>
|
|
</div>
|
|
<div className="flex-ment">
|
|
<span>W</span>
|
|
<div className="grid-select no-flx" style={{width: '84px'}}>
|
|
<Qselect title={'265'} option={SelectOption02}/>
|
|
</div>
|
|
</div>
|
|
<div className="flex-ment">
|
|
<span>L</span>
|
|
<div className="grid-select no-flx" style={{width: '84px'}}>
|
|
<Qselect title={'235'} option={SelectOption03}/>
|
|
</div>
|
|
</div>
|
|
<div className="flex-ment">
|
|
<span>垂木の間隔</span>
|
|
<div className="grid-select no-flx right" style={{width: '84px'}}>
|
|
<Qselect title={'455'} option={SelectOption04}/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="placement-roof-btn-wrap">
|
|
<div className="icon-btn-wrap mt10">
|
|
<button className="act">並列式<i className="allocation01"></i></button>
|
|
<button>カスケード <i className="allocation02"></i></button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* case02 */}
|
|
{/* <div className="placement-option">
|
|
<div className="grid-select no-flx" style={{width: '171px'}}>
|
|
<Qselect title={'瓦53A'} option={SelectOption01}/>
|
|
</div>
|
|
<div className="flex-ment">
|
|
<span>ハゼビーチ</span>
|
|
<div className="grid-select no-flx" style={{width: '84px'}}>
|
|
<Qselect title={'265'} option={SelectOption02}/>
|
|
</div>
|
|
</div>
|
|
<div className="flex-ment">
|
|
<span>垂木の間隔</span>
|
|
<div className="grid-select no-flx right" style={{width: '84px'}}>
|
|
<Qselect title={'455'} option={SelectOption04}/>
|
|
</div>
|
|
</div>
|
|
</div> */}
|
|
|
|
{/* case03 */}
|
|
{/* <div className="placement-option">
|
|
<div className="grid-select no-flx" style={{width: '171px'}}>
|
|
<Qselect title={'瓦53A'} option={SelectOption01}/>
|
|
</div>
|
|
<div className="flex-ment">
|
|
<span>ハゼビーチ</span>
|
|
<div className="grid-select no-flx" style={{width: '84px'}}>
|
|
<Qselect title={'265'} option={SelectOption02}/>
|
|
</div>
|
|
</div>
|
|
</div> */}
|
|
|
|
{/* case04 */}
|
|
{/* <div className="placement-option">
|
|
<div className="grid-select no-flx" style={{width: '171px'}}>
|
|
<Qselect title={'瓦53A'} option={SelectOption01}/>
|
|
</div>
|
|
<div className="flex-ment">
|
|
<span>L</span>
|
|
<div className="grid-select no-flx" style={{width: '84px'}}>
|
|
<Qselect title={'235'} option={SelectOption03}/>
|
|
</div>
|
|
</div>
|
|
<div className="flex-ment">
|
|
<span>垂木の間隔</span>
|
|
<div className="grid-select no-flx right" style={{width: '84px'}}>
|
|
<Qselect title={'455'} option={SelectOption04}/>
|
|
</div>
|
|
</div>
|
|
</div> */}
|
|
</td>
|
|
</tr>
|
|
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div className="grid-btn-wrap">
|
|
<button className="btn-frame modal act">保存</button>
|
|
</div>
|
|
</div>
|
|
{/* <PlacementGuidePop/>
|
|
<RoofingMaterialGudiePop/> */}
|
|
</div>
|
|
</WithDraggable>
|
|
)
|
|
} |