From d793ab8ac1845bd2fe3a33b6a3474c47e0e31bd8 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 10:29:29 +0900 Subject: [PATCH] =?UTF-8?q?canvas=20modal=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/canvas/page.jsx | 4 +- src/components/canvas/CanvasLayout.jsx | 2 + src/components/canvas/CanvasSimulator.jsx | 109 ++++++++++++++++++ .../canvas/modal/gridoption/GridOption.jsx | 4 +- .../canvas/modal/settoing01/FirstOption.jsx | 14 ++- src/components/publishpage/PublishPage.jsx | 1 + src/styles/_contents.scss | 64 +++++++++- 7 files changed, 187 insertions(+), 11 deletions(-) create mode 100644 src/components/canvas/CanvasSimulator.jsx diff --git a/src/app/canvas/page.jsx b/src/app/canvas/page.jsx index 463c6ab..617d790 100644 --- a/src/app/canvas/page.jsx +++ b/src/app/canvas/page.jsx @@ -26,11 +26,11 @@ export default function CanvasPage() {
- {/* {modalOption.option && } + {modalOption.option && } {modalOption.outerwall && } 확인용 숨김처리 {modalOption.gridoption && } {modalOption.gridcopy && } - {modalOption.gridmove && } */} + {modalOption.gridmove && } diff --git a/src/components/canvas/CanvasLayout.jsx b/src/components/canvas/CanvasLayout.jsx index d9e875b..ce7900b 100644 --- a/src/components/canvas/CanvasLayout.jsx +++ b/src/components/canvas/CanvasLayout.jsx @@ -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}) { {menuValue !== 5 && menuValue !== 6 && } {menuValue === 5 && } + {menuValue === 6 && } ) } \ No newline at end of file diff --git a/src/components/canvas/CanvasSimulator.jsx b/src/components/canvas/CanvasSimulator.jsx new file mode 100644 index 0000000..c33e5eb --- /dev/null +++ b/src/components/canvas/CanvasSimulator.jsx @@ -0,0 +1,109 @@ +import Footer from "../layout/Footer"; + +export default function CanvasSimulator() { + return( +
+
+
+
+
+
+
品番
+
RX524231020006 (Plan No: 1)
+
+
+
作成日
+
2024.09.28
+
+
+
システム容量
+
8.3 kW
+
+
+
年間予測発電量
+
9,740
+
+
+
+
+
都道府県
+
東京
+
+
+
日射量観測地点
+
東京
+
+
+
積雪条件
+
30 cm
+
+
+
風速条件
+
34 m/s以下
+
+
+
+
+
+
+
+
+
+ chart +
+
+
+

予測発電量 (kWh)

+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
1月2月3月4月5月6月7月8月9月10月11月12月合計
5866689181,2001,0809169541,0247637155574559,744
+
+
+
+
+
+
+
+
+
+
+
+
+ ) +} \ No newline at end of file diff --git a/src/components/canvas/modal/gridoption/GridOption.jsx b/src/components/canvas/modal/gridoption/GridOption.jsx index 13c230a..b98c7ce 100644 --- a/src/components/canvas/modal/gridoption/GridOption.jsx +++ b/src/components/canvas/modal/gridoption/GridOption.jsx @@ -53,7 +53,7 @@ export default function GridOption() { mm
- 横間隔 + 縦間隔
@@ -66,7 +66,7 @@ export default function GridOption() {
- 横間隔 + 比間隔
diff --git a/src/components/canvas/modal/settoing01/FirstOption.jsx b/src/components/canvas/modal/settoing01/FirstOption.jsx index 8eed536..38eda90 100644 --- a/src/components/canvas/modal/settoing01/FirstOption.jsx +++ b/src/components/canvas/modal/settoing01/FirstOption.jsx @@ -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: 'ボーダーのみ'}, diff --git a/src/components/publishpage/PublishPage.jsx b/src/components/publishpage/PublishPage.jsx index 7e6b285..8fb0fa6 100644 --- a/src/components/publishpage/PublishPage.jsx +++ b/src/components/publishpage/PublishPage.jsx @@ -82,6 +82,7 @@ export default function PublishPage() { CanvasPage 견적서 6번째 탭 클릭시 나옴 + 발전시뮬레이션 7번째 탭 클릭시 나옴 2024-09-24 diff --git a/src/styles/_contents.scss b/src/styles/_contents.scss index 61ce5bc..90260d4 100644 --- a/src/styles/_contents.scss +++ b/src/styles/_contents.scss @@ -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; + } + } + } } \ No newline at end of file