발전시뮬레이션 페이지 추가
This commit is contained in:
parent
02ccaf9616
commit
5cb3195b60
9
public/static/images/sub/simulation_guide.svg
Normal file
9
public/static/images/sub/simulation_guide.svg
Normal file
@ -0,0 +1,9 @@
|
||||
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="icon">
|
||||
<circle id="Ellipse 2012" cx="20" cy="20" r="20" fill="#5B7385"/>
|
||||
<g id="elements">
|
||||
<path id="Vector" d="M29.9598 18.9707C30.0134 19.8009 30.0134 20.6607 29.9598 21.4909C29.6856 25.7332 26.3536 29.1125 22.1706 29.3905C20.7435 29.4854 19.2536 29.4852 17.8294 29.3905C17.339 29.3579 16.8044 29.2409 16.344 29.0513C15.8318 28.8403 15.5756 28.7348 15.4454 28.7508C15.3153 28.7668 15.1264 28.9061 14.7487 29.1846C14.0827 29.6757 13.2437 30.0285 11.9994 29.9982C11.3703 29.9829 11.0557 29.9752 10.9148 29.7351C10.774 29.495 10.9494 29.1626 11.3002 28.4978C11.7867 27.5758 12.095 26.5203 11.6279 25.6746C10.8234 24.4666 10.1401 23.036 10.0402 21.4909C9.98659 20.6607 9.98659 19.8009 10.0402 18.9707C10.3144 14.7284 13.6464 11.3491 17.8294 11.0711C19.0318 10.9911 19.2812 10.9786 20.5 11.0337" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path id="Ellipse 351" d="M30 13.5C30 15.433 28.433 17 26.5 17C24.567 17 23 15.433 23 13.5C23 11.567 24.567 10 26.5 10C28.433 10 30 11.567 30 13.5Z" stroke="white" stroke-width="1.5"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
@ -26,11 +26,11 @@ export default function CanvasPage() {
|
||||
<div className="canvas-content">
|
||||
<CanvasLayout menuValue={menuValue}/>
|
||||
</div>
|
||||
{modalOption.option && <SettingModal01/>}
|
||||
{modalOption.outerwall && <OuterLineWall/>} 확인용 숨김처리
|
||||
{modalOption.gridoption && <GridOption/>}
|
||||
{modalOption.gridcopy && <GridCopy/>}
|
||||
{modalOption.gridmove && <GridMove/>}
|
||||
{/* {modalOption.option && <SettingModal01/>} */}
|
||||
{/* {modalOption.outerwall && <OuterLineWall/>} 확인용 숨김처리 */}
|
||||
{/* {modalOption.gridoption && <GridOption/>} */}
|
||||
{/* {modalOption.gridcopy && <GridCopy/>} */}
|
||||
{/* {modalOption.gridmove && <GridMove/>} */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -97,8 +97,150 @@ export default function CanvasSimulator() {
|
||||
</div>
|
||||
</div>
|
||||
<div className="chart-table-wrap">
|
||||
<div className="sub-table-box"></div>
|
||||
<div className="sub-table-box"></div>
|
||||
<div className="sub-table-box">
|
||||
<div className="module-table ">
|
||||
<table className="small">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>屋根面</th>
|
||||
<th>傾斜角</th>
|
||||
<th>方位角（度)</th>
|
||||
<th>太陽電池モジュール</th>
|
||||
<th>枚数</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>西南西1</td>
|
||||
<td>0.3寸</td>
|
||||
<td>81</td>
|
||||
<td>
|
||||
<div className="overflow-lab">
|
||||
Re.RISE-G2 415
|
||||
</div>
|
||||
</td>
|
||||
<td>20</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>西南西1</td>
|
||||
<td>0.3寸</td>
|
||||
<td>81</td>
|
||||
<td>
|
||||
<div className="overflow-lab">
|
||||
Re.RISE-G2 415
|
||||
</div>
|
||||
</td>
|
||||
<td>20</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>西南西1</td>
|
||||
<td>0.3寸</td>
|
||||
<td>81</td>
|
||||
<td>
|
||||
<div className="overflow-lab">
|
||||
Re.RISE-G2 415
|
||||
</div>
|
||||
</td>
|
||||
<td>20</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>西南西1</td>
|
||||
<td>0.3寸</td>
|
||||
<td>81</td>
|
||||
<td>
|
||||
<div className="overflow-lab">
|
||||
Re.RISE-G2 415
|
||||
</div>
|
||||
</td>
|
||||
<td>20</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div className="module-total">
|
||||
<div className="total-title">合計</div>
|
||||
<div className="total-num">60</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="sub-table-box">
|
||||
<div className="module-table ">
|
||||
<table className="big">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>パワーコンディショナー</th>
|
||||
<th>ティーン</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className="al-l">
|
||||
<div className="overflow-lab">
|
||||
HQJP-MA55-3
|
||||
</div>
|
||||
</td>
|
||||
<td>2</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="al-l">
|
||||
<div className="overflow-lab">
|
||||
HQJP-MA55-3
|
||||
</div>
|
||||
</td>
|
||||
<td>2</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="al-l">
|
||||
<div className="overflow-lab">
|
||||
HQJP-MA55-3
|
||||
</div>
|
||||
</td>
|
||||
<td>2</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="al-l">
|
||||
<div className="overflow-lab">
|
||||
HQJP-MA55-3
|
||||
</div>
|
||||
</td>
|
||||
<td>2</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="al-l">
|
||||
<div className="overflow-lab">
|
||||
HQJP-MA55-3
|
||||
</div>
|
||||
</td>
|
||||
<td>2</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="sub-content-box">
|
||||
<div className="sub-table-box">
|
||||
<div className="simulation-guide-wrap">
|
||||
<div className="simulation-tit-wrap">
|
||||
<span
|
||||
>Hanwha Japan 年間発電量
|
||||
<br/>
|
||||
シミュレーションガイドライン
|
||||
</span>
|
||||
</div>
|
||||
<div className="simulation-guide-box">
|
||||
<dl>
|
||||
<dt>計算式</dt>
|
||||
<dd>月間発電量（kWh）＝太陽電池モジュール容量（kW×月平均傾斜日射量×パワーコンディショナー変換効率×太陽電池モジュール温度損失×その月日数×その他係数*1</dd>
|
||||
<dd>※その他係数*1につきましては下記の注意事項注4をご参照ください。</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>注意事項</dt>
|
||||
<dd>注1 複数の条件（気象、立地、設置条件）によって実際の発電量は大きく変動することがあります。</dd>
|
||||
<dd>注2 実際の建物に設置した場合、正方形、方位角、緯度、システム回路構成および構成機器の種類によって発電が異なる場合があります。</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -720,7 +720,7 @@
|
||||
gap: 20px;
|
||||
width: 100%;
|
||||
.sub-table-box{
|
||||
height: auto;
|
||||
height: 100%;
|
||||
}
|
||||
.chart-inner{
|
||||
flex: 1;
|
||||
@ -768,4 +768,78 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.simulation-guide-wrap{
|
||||
display: flex;
|
||||
padding: 20px;
|
||||
.simulation-tit-wrap{
|
||||
padding-right: 40px;
|
||||
border-right: 1px solid #EEEEEE;
|
||||
span{
|
||||
display: block;
|
||||
position: relative;
|
||||
padding-left: 60px;
|
||||
font-size: 15px;
|
||||
color: #14324F;
|
||||
font-weight: 600;
|
||||
&::before{
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
transform: translateY(-50%);
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: url(../../public/static/images/sub/simulation_guide.svg)no-repeat center;
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
}
|
||||
.simulation-guide-box{
|
||||
padding-left: 40px;
|
||||
dl{
|
||||
margin-bottom: 25px;
|
||||
dt{
|
||||
font-size: 13px;
|
||||
color: #101010;
|
||||
font-weight: 600;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
dd{
|
||||
font-size: 12px;
|
||||
color: #45576F;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
}
|
||||
&:last-child{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.module-total{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #F8F9FA;
|
||||
padding: 9px 0;
|
||||
margin-right: 4px;
|
||||
border: 1px solid #ECF0F4;
|
||||
border-top: none;
|
||||
.total-title{
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
color: #344356;
|
||||
font-weight: 500;
|
||||
}
|
||||
.total-num{
|
||||
flex: none;
|
||||
width: 121px;
|
||||
text-align: center;
|
||||
font-size: 15px;
|
||||
color: #344356;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
@ -3,6 +3,17 @@
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
table{
|
||||
.overflow-lab{
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
.al-l{
|
||||
text-align: left !important;
|
||||
}
|
||||
}
|
||||
|
||||
.common-table{
|
||||
table{
|
||||
table-layout: fixed;
|
||||
@ -101,3 +112,66 @@
|
||||
}
|
||||
}
|
||||
|
||||
.module-table{
|
||||
table{
|
||||
table-layout: fixed;
|
||||
border-collapse: collapse;
|
||||
thead{
|
||||
display: table;
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
th{
|
||||
padding: 13px 0;
|
||||
font-size: 13px;
|
||||
color: #344356;
|
||||
font-weight: 500;
|
||||
border-bottom: 2px solid #E0E5EB;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
tbody{
|
||||
display: block;
|
||||
overflow-y: auto;
|
||||
tr{
|
||||
display: table;
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
border: 1px solid #ECF0F4;
|
||||
td{
|
||||
padding: 10px 0px;
|
||||
font-size: 13px;
|
||||
color: #45576F;
|
||||
font-weight: 400;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
&::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
background-color: transparent;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: #C1CCD7;
|
||||
}
|
||||
&::-webkit-scrollbar-track {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
&.small{
|
||||
tbody{height: 120px;}
|
||||
}
|
||||
&.big{
|
||||
td,
|
||||
th{
|
||||
&:nth-child(2){
|
||||
width: 121px;
|
||||
}
|
||||
}
|
||||
tbody{
|
||||
height: 160px;
|
||||
td{
|
||||
padding: 10px 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user