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

처마 케라바 수정 및 모듈설정 팝업 추가

Browse Source
This commit is contained in:
김창수 2024-10-07 14:28:55 +09:00
parent abf0d22d36
commit fc8abf5710
12 changed files with 306 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
public/static/images/canvas/eaves_icon09.svg Normal file
View File

@ -0,0 +1,10 @@
<svg width="32" height="30" viewBox="0 0 32 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.75" width="30" height="30" fill="#45CD7D"/>
<mask id="mask0_13_48" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="31" height="30">
<rect x="0.75" width="30" height="30" fill="#45CD7D"/>
</mask>
<g mask="url(#mask0_13_48)">
<path d="M0 -5.48276L16.254 9L32 -6" stroke="black" stroke-width="2"/>
<path d="M16.2 9V30" stroke="black" stroke-width="2"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 491 B

3
public/static/images/canvas/module_tab_arr.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="9" height="14" viewBox="0 0 9 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path id="Vector 7183" d="M1.33333 1L7.33333 7L1.33333 13" stroke="#7D7D7D" stroke-width="1.5"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 198 B

3
public/static/images/canvas/module_tab_arr_white.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="9" height="14" viewBox="0 0 9 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path id="Vector 7183" d="M1.33331 1L7.33331 7L1.33331 13" stroke="white" stroke-width="1.5"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 196 B

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

@ -38,6 +38,7 @@ import { useState } from 'react'
import { useRecoilValue } from 'recoil'
import Penal03 from '@/components/canvas/penal/Penal03'
import Penal04 from '@/components/canvas/penal/Penal04'
import RoofModuleOption from '@/components/canvas/modal/roofmoduleoption/RoofModuleOption'
export default function CanvasPage() {
const modalOption = useRecoilValue(modalState);
@ -52,10 +53,10 @@ export default function CanvasPage() {
<CanvasLayout menuValue={menuValue}/>
</div>
{/* 패널 배치 집계 */}
<Penal01/>
<Penal02/>
<Penal03/>
<Penal04/>
{/* <Penal01/> */}
{/* <Penal02/> */}
{/* <Penal03/> */}
{/* <Penal04/> */}
{/* 배치면 초기 설정 */}
{/* <PlacementSettingPop/> */}
@ -84,7 +85,7 @@ export default function CanvasPage() {
{/* <AuxiliarylineOption/> */}
{/* 처마∙케라바 변경 */}
{/* <EvaseKerabaOption/> */}
<EvaseKerabaOption/>
{/* 동선이동∙형 올림 내림 */}
{/* <MovingUpDonw/> */}
@ -125,6 +126,9 @@ export default function CanvasPage() {
{/* 면 흐름 설정 */}
{/* <DrawingFlow/> */}
{/* 지붕모듈선택 */}
<RoofModuleOption/>
</div>
</div>
</div>

14
src/components/canvas/modal/displaychange/DisplayChange.jsx
View File

@ -25,12 +25,18 @@ export default function DisplayChange(){
<input type="text" className="input-origin block" defaultValue={5933} readOnly/>
</div>
</div>
<div className="outline-form">
<span className="mr10" >変更の長さ</span>
<div className="input-grid mr5">
<input type="text" className="input-origin block" defaultValue={0}/>
<div className="mb-box">
<div className="outline-form">
<span className="mr10" >変更の長さ</span>
<div className="input-grid mr5">
<input type="text" className="input-origin block" defaultValue={0}/>
</div>
</div>
</div>
<div className="d-check-box pop">
<input type="checkbox" id="ch99" />
<label htmlFor="ch99">コーナー・ゴールの場合</label>
</div>
</div>
</div>
<div className="slope-wrap">

2
src/components/canvas/modal/eaves_keraba/EavesKerabaTab02.jsx
View File

@ -36,7 +36,7 @@ export default function EavesKerabaTab02(){
</div>
<div className="eaves-keraba-td">
<div className="eaves-keraba-ico">
<Image src="/static/images/canvas/eaves_icon01.svg" alt="react" width={30} height={30} />
<Image src="/static/images/canvas/eaves_icon09.svg" alt="react" width={30} height={30} />
</div>
</div>
</div>

31
src/components/canvas/modal/roofmoduleoption/RoofModuleOption.jsx Normal file
View File

@ -0,0 +1,31 @@
import WithDraggable from "@/components/common/draggable/withDraggable";
import RoofModuleOptionTab01 from "./RoofModuleOptionTab01";
import { useState } from "react";
import RoofModuleOptionTab02 from "./RoofModuleOptionTab02";
import RoofModuleOptionTab03 from "./RoofModuleOptionTab03";
export default function RoofModuleOption(){
const [tabNum, setTabNum] = useState(1);
return(
<WithDraggable isShow={true}>
<div className={`modal-pop-wrap lx-2`}>
<div className="modal-head">
<h1 className="title">基本設定 </h1>
<button className="modal-close">닫기</button>
</div>
<div className="modal-body">
<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>
{tabNum === 1 && <RoofModuleOptionTab01 setTabNum={setTabNum}/>}
{tabNum === 2 && <RoofModuleOptionTab02 setTabNum={setTabNum}/>}
{tabNum === 3 && <RoofModuleOptionTab03 setTabNum={setTabNum}/>}
</div>
</div>
</WithDraggable>
)
}

64
src/components/canvas/modal/roofmoduleoption/RoofModuleOptionTab01.jsx Normal file
View File

@ -0,0 +1,64 @@
import { useState } from "react";
export default function RoofModuleOptionTab01({setTabNum}){
const [compasDeg, setCompasDeg] = useState(0);
return(
<>
<div className="properties-setting-wrap">
<div className="setting-tit">方位設定</div>
<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>270°</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="d-check-box pop">
<input type="checkbox" id="ch99" />
<label htmlFor="ch99">角度を直接入力（0〜360）</label>
</div>
<div className="outline-form">
<div className="input-grid mr10" style={{width: '160px'}}>
<input type="text" className="input-origin block" defaultValue={315}/>
</div>
<span className="thin" >°</span>
</div>
</div>
</div>
</div>
<div className="grid-btn-wrap">
<button className="btn-frame modal act mr5">保存</button>
<button className="btn-frame modal" onClick={() => setTabNum(2)}>Next</button>
</div>
</>
)
}

54
src/components/canvas/modal/roofmoduleoption/RoofModuleOptionTab02.jsx Normal file
View File

@ -0,0 +1,54 @@
import Qselect from "@/components/common/select/Qselect";
const SelectOption01 = [
{name: '0',}, {name: '0'}, {name: '0'}, {name: '0'}
]
export default function RoofModuleOptionTab02({setTabNum}){
return(
<>
<div className="module-table-flex-wrap">
<div className="module-table-box">
<div className="module-table-inneer">
<div className="outline-form">
<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></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div className="module-table-box">
<div className="module-table-inneer"></div>
</div>
</div>
<div className="grid-btn-wrap">
<button className="btn-frame modal mr5" onClick={() => setTabNum(1)}>以前</button>
<button className="btn-frame modal act mr5">保存</button>
<button className="btn-frame modal" onClick={() => setTabNum(3)}>Next</button>
</div>
</>
)
}

14
src/components/canvas/modal/roofmoduleoption/RoofModuleOptionTab03.jsx Normal file
View File

@ -0,0 +1,14 @@
export default function RoofModuleOptionTab03({setTabNum}){
return(
<>
<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>
</>
)
}

100
src/styles/_modal.scss
View File

@ -55,6 +55,9 @@ $alert-color: #101010;
&.l-2{
width: 640px;
}
&.lx-2{
width: 740px;
}
&.lx{
width: 770px;
}
@ -1139,3 +1142,100 @@ $alert-color: #101010;
}
}
}
// 지붕모듈선택
.roof-module-tab{
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 14px;
.module-tab-bx{
flex: 1;
height: 34px;
line-height: 31px;
border: 1px solid #484848;
border-radius: 2px;
background-color: transparent;
font-size: 12px;
color: #AAA;
text-align: center;
cursor: default;
transition: all .15s ease-in-out;
&.act{
background-color: #1083E3;
border: 1px solid #1083E3;
color: #fff;
font-weight: 500;
}
}
.tab-arr{
display: block;
width: 9px;
height: 14px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-image: url(../../public/static/images/canvas/module_tab_arr.svg);
transition: all .15s ease-in-out;
&.act{
background-image: url(../../public/static/images/canvas/module_tab_arr_white.svg);
}
}
}
.roof-module-compas{
margin-bottom: 24px;
.compas-box-inner{
width: 280px;
height: 253px;
.circle{
top: 86%;
&:nth-child(1),
&:nth-child(7),
&:nth-child(13),
&:nth-child(19){
&::before{
content: '';
position: absolute;
top: 20px;
left: 50%;
transform: translateX(-50%);
width: 1px;
height: 6px;
background-color: #8B8B8B;
}
}
i{
top: 32px;
}
&.act{
i{color: #8B8B8B;}
}
}
}
}
.center-wrap{
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
}
.module-table-flex-wrap{
display: flex;
gap: 10px;
}
.module-table-box{
flex: 1;
background-color: #3D3D3D;
border-radius: 2px;
.module-table-inneer{
padding: 10px;
.outline-form{
span{
width: auto;
}
}
}
}

7
src/styles/_table.scss
View File

@ -174,4 +174,11 @@ table{
}
}
}
}
.roof-module-table{
table{
table-layout: fixed;
border-collapse: collapse;
}
}