diff --git a/public/static/images/canvas/penal_arr.svg b/public/static/images/canvas/penal_arr.svg new file mode 100644 index 0000000..0bd7560 --- /dev/null +++ b/public/static/images/canvas/penal_arr.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/static/images/canvas/penal_arr_white.svg b/public/static/images/canvas/penal_arr_white.svg new file mode 100644 index 0000000..e267fb9 --- /dev/null +++ b/public/static/images/canvas/penal_arr_white.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/app/canvas/page.jsx b/src/app/canvas/page.jsx index 29671ee..ae760e9 100644 --- a/src/app/canvas/page.jsx +++ b/src/app/canvas/page.jsx @@ -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() {
+ {/* 패널 배치 집계 */} + + + + + {/* 배치면 초기 설정 */} {/* */} @@ -74,7 +84,7 @@ export default function CanvasPage() { {/* */} {/* 처마∙케라바 변경 */} - + {/* */} {/* 동선이동∙형 올림 내림 */} {/* */} @@ -114,7 +124,7 @@ export default function CanvasPage() { {/* */} {/* 면 흐름 설정 */} - + {/* */} diff --git a/src/components/canvas/penal/Penal01.jsx b/src/components/canvas/penal/Penal01.jsx new file mode 100644 index 0000000..f7ab658 --- /dev/null +++ b/src/components/canvas/penal/Penal01.jsx @@ -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( + +
setPenalAct(!penalAct)}> +

パネル配置集計

+
+ + + + + + + + + + + + + +
屋根面発電量 (kW)
合計0.000
+
+
+ + ) +} \ No newline at end of file diff --git a/src/components/canvas/penal/Penal02.jsx b/src/components/canvas/penal/Penal02.jsx new file mode 100644 index 0000000..4d2b648 --- /dev/null +++ b/src/components/canvas/penal/Penal02.jsx @@ -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( + +
setPenalAct(!penalAct)}> +

パネル配置集計

+
+ + + + + + + + + + + + + + + +
屋根面Q.TRON-MG発電量 (kW)
合計0.0000
+
+
+ + ) +} \ No newline at end of file diff --git a/src/components/canvas/penal/Penal03.jsx b/src/components/canvas/penal/Penal03.jsx new file mode 100644 index 0000000..dcb485c --- /dev/null +++ b/src/components/canvas/penal/Penal03.jsx @@ -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( + +
setPenalAct(!penalAct)}> +

パネル配置集計

+
+ + + + + + + + + + + + + + + + + + + + +
屋根面Q.TRON-MG発電量 (kW)
M 183,440
合計83,440
+
+
+ + ) +} \ No newline at end of file diff --git a/src/components/canvas/penal/Penal04.jsx b/src/components/canvas/penal/Penal04.jsx new file mode 100644 index 0000000..1aa4351 --- /dev/null +++ b/src/components/canvas/penal/Penal04.jsx @@ -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( + +
setPenalAct(!penalAct)}> +

パネル配置集計

+
+ + + + + + + + + + + + + + + + + + + + + + + +
屋根面回路Q.TRON-MG発電量 (kW)
M 1回路0183,440
合計83,440
+
+
+ + ) +} \ No newline at end of file diff --git a/src/styles/_contents.scss b/src/styles/_contents.scss index 3d503b0..034955f 100644 --- a/src/styles/_contents.scss +++ b/src/styles/_contents.scss @@ -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; + } + } } \ No newline at end of file diff --git a/src/styles/_reset.scss b/src/styles/_reset.scss index c330c6d..35e6f9d 100644 --- a/src/styles/_reset.scss +++ b/src/styles/_reset.scss @@ -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;