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

canvas modal 수정

Browse Source
This commit is contained in:
김창수 2024-09-25 10:29:29 +09:00
parent 290a939410
commit d793ab8ac1
7 changed files with 187 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -26,11 +26,11 @@ export default function CanvasPage() {
<div className="canvas-content">
<CanvasLayout menuValue={menuValue}/>
</div>
{/* {modalOption.option && <SettingModal01/>}
{modalOption.option && <SettingModal01/>}
{modalOption.outerwall && <OuterLineWall/>} 확인용 숨김처리
{modalOption.gridoption && <GridOption/>}
{modalOption.gridcopy && <GridCopy/>}
{modalOption.gridmove && <GridMove/>} */}
{modalOption.gridmove && <GridMove/>}
</div>
</div>
</div>

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

@ -3,6 +3,7 @@
import { useState } from "react"
import CanvasFrame from "./CanvasFrame";
import CanvasEstimate from "./CanvasEstimate";
import CanvasSimulator from "./CanvasSimulator";
export default function CanvasLayout ({menuValue}) {
const [plans, setPlans] = useState([{ id: 0, name: 'Plan 1' }, { id: 1, name: 'Plan 2' }, { id: 2, name: 'Plan 3' }]);
@ -42,6 +43,7 @@ export default function CanvasLayout ({menuValue}) {
</div>
{menuValue !== 5 && menuValue !== 6 && <CanvasFrame/>}
{menuValue === 5 && <CanvasEstimate/>}
{menuValue === 6 && <CanvasSimulator/>}
</div>
)
}

109
src/components/canvas/CanvasSimulator.jsx Normal file
View File

@ -0,0 +1,109 @@
import Footer from "../layout/Footer";
export default function CanvasSimulator() {
return(
<div className="sub-content estimate">
<div className="sub-content-inner">
<div className="sub-content-box">
<div className="sub-table-box">
<div className="estimate-list-wrap">
<div className="estimate-box">
<div className="estimate-tit">品番</div>
<div className="estimate-name">RX524231020006 (Plan No: 1)</div>
</div>
<div className="estimate-box">
<div className="estimate-tit">作成日</div>
<div className="estimate-name">2024.09.28</div>
</div>
<div className="estimate-box">
<div className="estimate-tit">システム容量</div>
<div className="estimate-name">8.3 kW</div>
</div>
<div className="estimate-box">
<div className="estimate-tit">年間予測発電量</div>
<div className="estimate-name">9,740</div>
</div>
</div>
<div className="estimate-list-wrap">
<div className="estimate-box">
<div className="estimate-tit">都道府県</div>
<div className="estimate-name">東京</div>
</div>
<div className="estimate-box">
<div className="estimate-tit">日射量観測地点</div>
<div className="estimate-name">東京</div>
</div>
<div className="estimate-box">
<div className="estimate-tit">積雪条件</div>
<div className="estimate-name">30 cm</div>
</div>
<div className="estimate-box">
<div className="estimate-tit">風速条件</div>
<div className="estimate-name">34 m/s以下</div>
</div>
</div>
</div>
</div>
<div className="sub-content-box">
<div className="chart-wrap">
<div className="chart-inner">
<div className="sub-table-box">
<div className="chart-box">
chart
</div>
<div className="table-box-title-wrap">
<div className="title-wrap">
<h3>予測発電量 (kWh) </h3>
</div>
</div>
<div className="chart-month-table">
<table>
<thead>
<tr>
<th>1月</th>
<th>2月</th>
<th>3月</th>
<th>4月</th>
<th>5月</th>
<th>6月</th>
<th>7月</th>
<th>8月</th>
<th>9月</th>
<th>10月</th>
<th>11月</th>
<th>12月</th>
<th>合計</th>
</tr>
</thead>
<tbody>
<tr>
<td>586</td>
<td>668</td>
<td>918</td>
<td>1,200</td>
<td>1,080</td>
<td>916</td>
<td>954</td>
<td>1,024</td>
<td>763</td>
<td>715</td>
<td>557</td>
<td>455</td>
<td>9,744</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div className="chart-table-wrap">
<div className="sub-table-box"></div>
<div className="sub-table-box"></div>
</div>
</div>
</div>
</div>
<Footer/>
</div>
)
}

4
src/components/canvas/modal/gridoption/GridOption.jsx
View File

@ -53,7 +53,7 @@ export default function GridOption() {
<span>mm</span>
</div>
<div className="grid-input-form">
<span className="mr10">横間隔</span>
<span className="mr10">縦間隔</span>
<div className="input-grid mr5">
<input type="text" className="input-origin" defaultValue={910}/>
</div>
@ -66,7 +66,7 @@ export default function GridOption() {
<label htmlFor="ra02"></label>
</div>
<div className="grid-input-form">
<span className="mr10">横間隔</span>
<span className="mr10">比間隔</span>
<div className="input-grid mr5">
<input type="text" className="input-origin" defaultValue={910}/>
</div>

14
src/components/canvas/modal/settoing01/FirstOption.jsx
View File

@ -1,15 +1,17 @@
const buttonList01 = [
{id: 1, name: '割り当て表示'},
{id: 2, name: '実寸表示'},
{id: 2, name: '外壁線表示'},
{id: 3, name: '図面表示'},
{id: 4, name: '寸法表示なし'},
{id: 4, name: '屋根線標示'},
{id: 5, name: 'グリッド表示'},
{id: 6, name: '架台表示'},
{id: 6, name: '回路番号表示'},
{id: 7, name: '文字表示'},
{id: 8, name: '座標表示'},
{id: 8, name: '架台表示'},
{id: 9, name: '流れ方向表示'},
{id: 10, name: '図面切替表示'},
{id: 11, name: 'ü廊下寸法表示'},
{id: 10, name: '集計表表示'},
{id: 11, name: '廊下寸法表示'},
{id: 12, name: '実際の寸法表示'},
{id: 13, name: '寸法表示なし'},
]
const buttonList02 = [
{id: 1, name: 'ボーダーのみ'},

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

@ -82,6 +82,7 @@ export default function PublishPage() {
<td><Link href="/canvas" target="_blank">CanvasPage</Link></td>
<td className="coding_stat_web">
견적서 6번째 탭 클릭시 나옴
발전시뮬레이션 7번째 탭 클릭시 나옴
</td>
<td className="t-center">2024-09-24</td>
</tr>

64
src/styles/_contents.scss
View File

@ -519,6 +519,7 @@
padding-top: 0;
.sub-content-inner{
flex: 1;
width: 100%;
}
}
}
@ -632,12 +633,14 @@
.estimate-list-wrap{
display: flex;
align-items: center;
margin-bottom: 10px;
.estimate-box{
flex: 1 1 auto;
flex: 1 ;
display: flex;
align-items: center;
&:last-child{
flex: none;
min-width: 220px;
}
.estimate-tit{
width: 105px;
@ -657,6 +660,9 @@
font-weight: 400;
}
}
&:last-child{
margin-bottom: 0;
}
}
// file drag box
@ -706,4 +712,60 @@
}
}
}
}
// 발전시물레이션
.chart-wrap{
display: flex;
gap: 20px;
width: 100%;
.sub-table-box{
height: auto;
}
.chart-inner{
flex: 1;
.chart-box{
margin-bottom: 30px;
}
}
.chart-table-wrap{
display: flex;
flex-direction: column;
flex: none;
width: 650px;
.sub-table-box{
flex: 1;
&:first-child{
margin-bottom: 20px;
}
}
}
}
.chart-month-table{
table{
table-layout: fixed;
border-collapse:collapse;
border: 1px solid #ECF0F4;
border-radius: 4px;
thead{
th{
padding: 4.5px 0;
border-bottom: 1px solid #ECF0F4;
text-align: center;
font-size: 13px;
color: #45576F;
font-weight: 500;
background-color: #F8F9FA;
}
}
tbody{
td{
font-size: 13px;
color: #45576F;
text-align: center;
padding: 4.5px 0;
}
}
}
}