From 5cb3195b60c2f9600dcde03e4d5fc497117d3b79 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EC=B0=BD=EC=88=98?= Date: Wed, 25 Sep 2024 15:55:42 +0900 Subject: [PATCH] =?UTF-8?q?=EB=B0=9C=EC=A0=84=EC=8B=9C=EB=AE=AC=EB=A0=88?= =?UTF-8?q?=EC=9D=B4=EC=85=98=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/static/images/sub/simulation_guide.svg | 9 ++ src/app/canvas/page.jsx | 10 +- src/components/canvas/CanvasSimulator.jsx | 146 +++++++++++++++++- src/styles/_contents.scss | 76 ++++++++- src/styles/_table.scss | 74 +++++++++ 5 files changed, 307 insertions(+), 8 deletions(-) create mode 100644 public/static/images/sub/simulation_guide.svg diff --git a/public/static/images/sub/simulation_guide.svg b/public/static/images/sub/simulation_guide.svg new file mode 100644 index 0000000..3f164b9 --- /dev/null +++ b/public/static/images/sub/simulation_guide.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/app/canvas/page.jsx b/src/app/canvas/page.jsx index 617d790..ff7e7ea 100644 --- a/src/app/canvas/page.jsx +++ b/src/app/canvas/page.jsx @@ -26,11 +26,11 @@ export default function CanvasPage() {
- {modalOption.option && } - {modalOption.outerwall && } 확인용 숨김처리 - {modalOption.gridoption && } - {modalOption.gridcopy && } - {modalOption.gridmove && } + {/* {modalOption.option && } */} + {/* {modalOption.outerwall && } 확인용 숨김처리 */} + {/* {modalOption.gridoption && } */} + {/* {modalOption.gridcopy && } */} + {/* {modalOption.gridmove && } */} diff --git a/src/components/canvas/CanvasSimulator.jsx b/src/components/canvas/CanvasSimulator.jsx index c33e5eb..010446f 100644 --- a/src/components/canvas/CanvasSimulator.jsx +++ b/src/components/canvas/CanvasSimulator.jsx @@ -97,8 +97,150 @@ export default function CanvasSimulator() {
-
-
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
屋根面傾斜角方位角（度)太陽電池モジュール枚数
西南西10.3寸81 +
+ Re.RISE-G2 415 +
+ 		20
西南西10.3寸81 +
+ Re.RISE-G2 415 +
+ 		20
西南西10.3寸81 +
+ Re.RISE-G2 415 +
+ 		20
西南西10.3寸81 +
+ Re.RISE-G2 415 +
+ 		20
+
+
合計
+
60
+
+
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
パワーコンディショナーティーン
+
+ HQJP-MA55-3 +
+ 		2
+
+ HQJP-MA55-3 +
+ 		2
+
+ HQJP-MA55-3 +
+ 		2
+
+ HQJP-MA55-3 +
+ 		2
+
+ HQJP-MA55-3 +
+ 		2
+
+
+
+ + +
+
+
+
+ Hanwha Japan 年間発電量 +
+ シミュレーションガイドライン + +
+
+
+
計算式
+
月間発電量（kWh）＝太陽電池モジュール容量（kW×月平均傾斜日射量×パワーコンディショナー変換効率×太陽電池モジュール温度損失×その月日数×その他係数*1
+
※その他係数*1につきましては下記の注意事項注4をご参照ください。
+
+
+
注意事項
+
注1 複数の条件（気象、立地、設置条件）によって実際の発電量は大きく変動することがあります。
+
注2 実際の建物に設置した場合、正方形、方位角、緯度、システム回路構成および構成機器の種類によって発電が異なる場合があります。
+
+
diff --git a/src/styles/_contents.scss b/src/styles/_contents.scss index 90260d4..3d503b0 100644 --- a/src/styles/_contents.scss +++ b/src/styles/_contents.scss @@ -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; + } } \ No newline at end of file diff --git a/src/styles/_table.scss b/src/styles/_table.scss index b812e59..d3c207a 100644 --- a/src/styles/_table.scss +++ b/src/styles/_table.scss @@ -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; + } + } + } + } +} \ No newline at end of file