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 10:42:04 +09:00
parent f74f975463
commit abf0d22d36
9 changed files with 240 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -0,0 +1,3 @@
<svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
<path id="Vector 4" d="M1.5 1.25L5 4.75L8.5 1.25" stroke="#3D3D3D" stroke-width="1.5"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 189 B

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

@ -0,0 +1,3 @@
<svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
<path id="Vector 4" d="M1.5 4.75L5 1.25L8.5 4.75" stroke="white" stroke-width="1.5"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 187 B

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

@ -29,11 +29,15 @@ import RoofAllocation from '@/components/canvas/modal/roofallocation/RoofAllocat
import RoofShapeOption from '@/components/canvas/modal/roofshapeoption/RoofShapeOption'
import SettingModal01 from '@/components/canvas/modal/settoing01/SettingModal01'
import SlopeOption from '@/components/canvas/modal/slopeoption/SlopeOption'
import Penal02 from '@/components/canvas/penal/Penal02'
import Penal01 from '@/components/canvas/penal/Penal01'
import Header from '@/components/layout/Header'
import { modalState } from '@/store/modalAtom'
import '@/styles/contents.scss'
import { useState } from 'react'
import { useRecoilValue } from 'recoil'
import Penal03 from '@/components/canvas/penal/Penal03'
import Penal04 from '@/components/canvas/penal/Penal04'
export default function CanvasPage() {
const modalOption = useRecoilValue(modalState);
@ -47,6 +51,12 @@ export default function CanvasPage() {
<div className="canvas-content">
<CanvasLayout menuValue={menuValue}/>
</div>
{/* 패널 배치 집계 */}
<Penal01/>
<Penal02/>
<Penal03/>
<Penal04/>
{/* 배치면 초기 설정 */}
{/* <PlacementSettingPop/> */}
@ -74,7 +84,7 @@ export default function CanvasPage() {
{/* <AuxiliarylineOption/> */}
{/* 처마∙케라바 변경 */}
<EvaseKerabaOption/>
{/* <EvaseKerabaOption/> */}
{/* 동선이동∙형 올림 내림 */}
{/* <MovingUpDonw/> */}
@ -114,7 +124,7 @@ export default function CanvasPage() {
{/* <EachPropertyChange/> */}
{/* 면 흐름 설정 */}
<DrawingFlow/>
{/* <DrawingFlow/> */}
</div>
</div>
</div>

29
src/components/canvas/penal/Penal01.jsx Normal file
View File

@ -0,0 +1,29 @@
import WithDraggable from "@/components/common/draggable/withDraggable";
import { useState } from 'react';
export default function Penal01(){
const [penalAct, setPenalAct] = useState(true);
return(
<WithDraggable isShow={true} handle=".penal-wrap">
<div className={`penal-wrap ${penalAct ? 'act': ''}`} onClick={() => setPenalAct(!penalAct)}>
<h2>パネル配置集計</h2>
<div className="penal-table-wrap">
<table className="penal-table">
<thead>
<tr>
<th>屋根面</th>
<th>発電量 (kW)</th>
</tr>
</thead>
<tbody>
<tr>
<td>合計</td>
<td className="r">0.000</td>
</tr>
</tbody>
</table>
</div>
</div>
</WithDraggable>
)
}

31
src/components/canvas/penal/Penal02.jsx Normal file
View File

@ -0,0 +1,31 @@
import WithDraggable from "@/components/common/draggable/withDraggable";
import { useState } from 'react';
export default function Penal02(){
const [penalAct, setPenalAct] = useState(true);
return(
<WithDraggable isShow={true} handle=".penal-wrap">
<div className={`penal-wrap ${penalAct ? 'act': ''}`} onClick={() => setPenalAct(!penalAct)}>
<h2>パネル配置集計</h2>
<div className="penal-table-wrap">
<table className="penal-table" style={{width: '335px'}}>
<thead>
<tr>
<th>屋根面</th>
<th>Q.TRON-MG</th>
<th>発電量 (kW)</th>
</tr>
</thead>
<tbody>
<tr>
<td>合計</td>
<td className="r">0.000</td>
<td className="r">0</td>
</tr>
</tbody>
</table>
</div>
</div>
</WithDraggable>
)
}

36
src/components/canvas/penal/Penal03.jsx Normal file
View File

@ -0,0 +1,36 @@
import WithDraggable from "@/components/common/draggable/withDraggable";
import { useState } from 'react';
export default function Penal03(){
const [penalAct, setPenalAct] = useState(true);
return(
<WithDraggable isShow={true} handle=".penal-wrap">
<div className={`penal-wrap ${penalAct ? 'act': ''}`} onClick={() => setPenalAct(!penalAct)}>
<h2>パネル配置集計</h2>
<div className="penal-table-wrap">
<table className="penal-table" style={{width: '335px'}}>
<thead>
<tr>
<th>屋根面</th>
<th>Q.TRON-MG</th>
<th>発電量 (kW)</th>
</tr>
</thead>
<tbody>
<tr>
<td>M 1</td>
<td className="r">8</td>
<td className="r">3,440</td>
</tr>
<tr>
<td>合計</td>
<td className="r">8</td>
<td className="r">3,440</td>
</tr>
</tbody>
</table>
</div>
</div>
</WithDraggable>
)
}

39
src/components/canvas/penal/Penal04.jsx Normal file
View File

@ -0,0 +1,39 @@
import WithDraggable from "@/components/common/draggable/withDraggable";
import { useState } from 'react';
export default function Penal04(){
const [penalAct, setPenalAct] = useState(true);
return(
<WithDraggable isShow={true} handle=".penal-wrap">
<div className={`penal-wrap ${penalAct ? 'act': ''}`} onClick={() => setPenalAct(!penalAct)}>
<h2>パネル配置集計</h2>
<div className="penal-table-wrap">
<table className="penal-table" style={{width: '435px'}}>
<thead>
<tr>
<th>屋根面</th>
<th>回路</th>
<th>Q.TRON-MG</th>
<th>発電量 (kW)</th>
</tr>
</thead>
<tbody>
<tr>
<td>M 1</td>
<td>回路01</td>
<td className="r">8</td>
<td className="r">3,440</td>
</tr>
<tr>
<td>合計</td>
<td></td>
<td className="r">8</td>
<td className="r">3,440</td>
</tr>
</tbody>
</table>
</div>
</div>
</WithDraggable>
)
}

81
src/styles/_contents.scss
View File

@ -842,4 +842,85 @@
color: #344356;
font-weight: 500;
}
}
// 패널 배치 집계
.penal-wrap{
position: fixed;
top: 200px;
left: 50px;
z-index: 999999;
width: 237px;
height: 40px;
line-height: 40px;
background-color: #fff;
border: 1px solid #DFDFDF;
padding: 0 34px 0 10px;
border-radius: 2px;
box-shadow: 0px 7px 14px 0px rgba(0, 0, 0, 0.05);
cursor: pointer;
&::before{
content: '';
position: absolute;
top: 50%;
right: 12px;
transform: translateY(-50%);
width: 10px;
height: 6px;
background: url(../../public/static/images/canvas/penal_arr.svg)no-repeat center;
background-size: cover;
}
h2{
font-size: 12px;
font-weight: 500;
color: #3D3D3D;
}
.penal-table-wrap{
display: none;
position: absolute;
top: 100%;
left: -1px;
min-width: calc(100% + 2px);
background-color: #3D3D3D;
border: 1px solid #3D3D3D;
padding: 20px;
.penal-table{
table-layout: fixed;
border-collapse: collapse;
thead{
th{
text-align: center;
background-color:rgba(255, 255, 255, 0.05);
font-size: 12px;
font-weight: 500;
color: #fff;
border: 1px solid #505050;
}
}
tbody{
td{
font-size: 12px;
color: #fff;
font-weight: 400;
text-align: center;
padding: 0 10px;
border: 1px solid #505050;
}
}
}
}
&.act{
border: 1px solid #3D3D3D;
background-color: #3D3D3D;
h2{
color: #fff;
}
&::before{
background: url(../../public/static/images/canvas/penal_arr_white.svg)no-repeat center;
}
.penal-table-wrap{
display: block;
}
}
}

6
src/styles/_reset.scss
View File

@ -144,6 +144,12 @@ button{
.ml10{margin-left: 10px !important;}
.ml15{margin-left: 15px !important;}
// align
.l{text-align: left !important;}
.r{text-align: right !important;}
.c{text-align: center !important;}
// button
.btn-frame{
display: inline-block;