diff --git a/src/app/canvas/page.jsx b/src/app/canvas/page.jsx index 83c6625..64f118e 100644 --- a/src/app/canvas/page.jsx +++ b/src/app/canvas/page.jsx @@ -81,7 +81,7 @@ export default function CanvasPage() { {/* */} {/* 지붕형상 수동 설정 */} - + {/* */} {/* 보조선 작성 */} {/* */} diff --git a/src/components/canvas/modal/circuitstandsetting/CircuitStandSetting.jsx b/src/components/canvas/modal/circuitstandsetting/CircuitStandSetting.jsx index 64e4923..56cd700 100644 --- a/src/components/canvas/modal/circuitstandsetting/CircuitStandSetting.jsx +++ b/src/components/canvas/modal/circuitstandsetting/CircuitStandSetting.jsx @@ -1,6 +1,8 @@ import WithDraggable from "@/components/common/draggable/withDraggable"; import { useState } from "react"; import CircuitStandTab01 from "./CircuitStandTab01"; +import CircuitStandTab02 from "./CircuitStandTab02"; +import CircuitStandTab03 from "./CircuitStandTab03"; export default function CircuitStandSetting(){ const [tabNum, setTabNum] = useState(1); @@ -19,7 +21,9 @@ export default function CircuitStandSetting(){
昇圧設定
- {tabNum === 1 && } + {tabNum === 1 && } + {tabNum === 2 && } + {tabNum === 3 && } diff --git a/src/components/canvas/modal/circuitstandsetting/CircuitStandTab01.jsx b/src/components/canvas/modal/circuitstandsetting/CircuitStandTab01.jsx index 9409aa3..2dcd044 100644 --- a/src/components/canvas/modal/circuitstandsetting/CircuitStandTab01.jsx +++ b/src/components/canvas/modal/circuitstandsetting/CircuitStandTab01.jsx @@ -4,18 +4,97 @@ const SelectOption01 = [ {name: '0',}, {name: '0'}, {name: '0'}, {name: '0'} ] -export default function CircuitStandTab01(){ +export default function CircuitStandTab01({setTabNum}){ return( <> -
+
分類 (余剰)
寒冷地仕様
-
-
+
+
+
+
+ + +
+
+ + +
+
+
+
+
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
名称定格出力 (kW)回路数最大接続枚数過積最大枚数出力電流
HQJP-KA30-5PCSオプションマスター22--
HQJP-KA40-51.0022--
HQJP-KA50-51.0022--
+
+
+
+ + +
+
+ HQJP-KA40-5 + HQJP-KA40-5 + HQJP-KA40-5 +
+
+
+
+
+ + +
+
+ + +
+
+
+
) diff --git a/src/components/canvas/modal/circuitstandsetting/CircuitStandTab02.jsx b/src/components/canvas/modal/circuitstandsetting/CircuitStandTab02.jsx new file mode 100644 index 0000000..c9c15a9 --- /dev/null +++ b/src/components/canvas/modal/circuitstandsetting/CircuitStandTab02.jsx @@ -0,0 +1,22 @@ + +import { useState } from "react"; +import CircuitStandSecondTab01 from "./circuitstandsecondtab/CircuitStandSecondTab01"; +import CircuitStandSecondTab02 from "./circuitstandsecondtab/CircuitStandSecondTab02"; + +export default function CircuitStandTab02({setTabNum}){ + const [secondTab, setSecondTab] = useState(1); + return( + <> +
+ + +
+ {secondTab === 1 && } + {secondTab === 2 && } +
+ + +
+ + ) +} \ No newline at end of file diff --git a/src/components/canvas/modal/circuitstandsetting/CircuitStandTab03.jsx b/src/components/canvas/modal/circuitstandsetting/CircuitStandTab03.jsx new file mode 100644 index 0000000..6754143 --- /dev/null +++ b/src/components/canvas/modal/circuitstandsetting/CircuitStandTab03.jsx @@ -0,0 +1,405 @@ +import Qselect from "@/components/common/select/Qselect"; + +const SelectOption01 = [ + {name: '0',}, {name: '0'}, {name: '0'}, {name: '0'} +] + + +export default function CircuitStandTab03({setTabNum}){ + return( + <> +
+
昇圧設定
+
+
+
+
+
HQJP-KA55-5
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
シリアル枚数総回路数
100
100
100
100
100
+
+
+
+
+
接続する
+
+ + + + + + + + + + + + + + + + + + + + + + + + + +
名称回路数昇圧回路数
KTN-CBD4C40
KTN-CBD4C40
KTN-CBD4C40
+
+
+
+ + +
+
+ HQJP-KA40-5 +
+
+
+
+
昇圧オプション
+
+ + + + + + + + + + + + + + + + + +
名称昇圧回路数
--
--
+
+
+
+ + +
+
+ HQJP-KA40-5 +
+
+
+
+
+ 綿調道区分 +
+ +
+ 回路 + (二重昇圧回路数 +
+ +
+ 回路) +
+
+
+
+
+
+
HQJP-KA55-5
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
シリアル枚数総回路数
100
100
100
100
100
+
+
+
+
+
接続する
+
+ + + + + + + + + + + + + + + + + + + + + + + + + +
名称回路数昇圧回路数
KTN-CBD4C40
KTN-CBD4C40
KTN-CBD4C40
+
+
+
+ + +
+
+ HQJP-KA40-5 +
+
+
+
+
昇圧オプション
+
+ + + + + + + + + + + + + + + + + +
名称昇圧回路数
--
--
+
+
+
+ + +
+
+ HQJP-KA40-5 +
+
+
+
+
+ 綿調道区分 +
+ +
+ 回路 + (二重昇圧回路数 +
+ +
+ 回路) +
+
+
+
+
+
+
HQJP-KA55-5
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
シリアル枚数総回路数
100
100
100
100
100
+
+
+
+
+
接続する
+
+ + + + + + + + + + + + + + + + + + + + + + + + + +
名称回路数昇圧回路数
KTN-CBD4C40
KTN-CBD4C40
KTN-CBD4C40
+
+
+
+ + +
+
+ HQJP-KA40-5 +
+
+
+
+
昇圧オプション
+
+ + + + + + + + + + + + + + + + + +
名称昇圧回路数
--
--
+
+
+
+ + +
+
+ HQJP-KA40-5 +
+
+
+
+
+ 綿調道区分 +
+ +
+ 回路 + (二重昇圧回路数 +
+ +
+ 回路) +
+
+
+
+
+
+ モニターの選択 +
+ +
+
+
+
+
+ + +
+ + ) +} \ No newline at end of file diff --git a/src/components/canvas/modal/circuitstandsetting/circuitstandsecondtab/CircuitStandSecondTab01.jsx b/src/components/canvas/modal/circuitstandsetting/circuitstandsecondtab/CircuitStandSecondTab01.jsx new file mode 100644 index 0000000..1facbde --- /dev/null +++ b/src/components/canvas/modal/circuitstandsetting/circuitstandsecondtab/CircuitStandSecondTab01.jsx @@ -0,0 +1,17 @@ +export default function CircuitStandSecondTab01(){ + return( +
+
回路割り当て
+
+
+
+
+ + +
+
+
+
+
+ ) +} \ No newline at end of file diff --git a/src/components/canvas/modal/circuitstandsetting/circuitstandsecondtab/CircuitStandSecondTab02.jsx b/src/components/canvas/modal/circuitstandsetting/circuitstandsecondtab/CircuitStandSecondTab02.jsx new file mode 100644 index 0000000..a3be782 --- /dev/null +++ b/src/components/canvas/modal/circuitstandsetting/circuitstandsecondtab/CircuitStandSecondTab02.jsx @@ -0,0 +1,89 @@ +export default function CircuitStandSecondTab02(){ + return( +
+
回路割り当て
+
+
+
手動回路割当
+
同じ回路のモジュールを選択状態にした後、 [番号確認]ボタンを押すと番号が割り当てられます。
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
屋根面Q.TRON M-G2発電量 (kW)
M 183,440
合計83,440
合計83,440
合計83,440
合計83,440
+
+
+
+
+
+
+
+
選択したパワーコンディショナー
+
+
+
+ + +
+
+ + +
+
+ + +
+
+
+
+
+
+
+
+ 設定する回路番号 (1~) +
+ +
+
+
+
+ + + +
+
+
+ ) +} \ No newline at end of file diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss index 361f7b9..583d27f 100644 --- a/src/styles/_modal.scss +++ b/src/styles/_modal.scss @@ -1253,6 +1253,7 @@ $alert-color: #101010; height: 30px; font-size: 12px; font-weight: 400; + transition: all .15s ease-in-out; &:first-child{ border-left: 1px solid #505050; } @@ -1379,4 +1380,91 @@ $alert-color: #101010; } } } +} + +// 회로 및 가대설정 +.circuit-check-inner{ + padding: 5px 0; +} + +.x-scroll-table{ + overflow-x: auto; + padding-bottom: 5px; + .roof-module-table{ + min-width: 1200px; + } + &::-webkit-scrollbar { + height: 4px; + background-color: transparent; + } + &::-webkit-scrollbar-thumb { + background-color: #D9D9D9; + } + &::-webkit-scrollbar-track { + background-color: transparent; + } +} + +.circuit-right-wrap{ + display: flex; + justify-content: flex-end; +} + +.circuit-data-form{ + display: flex; + flex-direction: column; + gap: 5px; + min-height: 60px; + padding: 12px; + border: 1px solid rgba(255, 255, 255, 0.20); +} +.circuit-table-tit{ + color: #fff; + font-size: 12px; + font-weight: 600; + padding: 11px 10px; + background-color: #474747; + border: 1px solid #505050; + border-bottom: none; +} + +.circuit-overflow{ + max-height: 560px; + overflow-y: auto; + margin-bottom: 15px; + &::-webkit-scrollbar { + width: 4px; + background-color: transparent; + } + &::-webkit-scrollbar-thumb { + background-color: #D9D9D9; + } + &::-webkit-scrollbar-track { + background-color: transparent; + } +} + +.circuit-table-flx-wrap{ + display: flex; + gap: 10px; + margin-bottom: 10px; + .circuit-table-flx-box{ + flex: 1; + display: flex; + flex-direction: column; + .bottom-wrap{ + margin-top: auto; + } + .roof-module-table{ + table{ + table-layout: fixed; + } + } + } +} + +.circuit-count-input{ + display: flex; + align-items: center; + gap: 10px; } \ No newline at end of file diff --git a/src/styles/_reset.scss b/src/styles/_reset.scss index 5e7540d..6073b36 100644 --- a/src/styles/_reset.scss +++ b/src/styles/_reset.scss @@ -258,7 +258,7 @@ button{ color: #AAAAAA; &:hover{ background-color: #272727; - border-color: #272727; + border-color: #676767; font-weight: 400; } } @@ -700,6 +700,7 @@ input[type=text]{ // check-box .d-check-box{ label{ + &.red{color: #FFCACA;} &::before{ cursor: pointer; content: ""; @@ -751,6 +752,15 @@ input[type=text]{ } } } + &.sel{ + input[type=checkbox]:checked + label{ + color: #D7C863; + } + input[type=checkbox]:checked + label::before, + input[type=checkbox]:checked + label::after{ + border-color: #D7C863; + } + } } // date-picker diff --git a/src/styles/_table.scss b/src/styles/_table.scss index 949f877..5ab6b53 100644 --- a/src/styles/_table.scss +++ b/src/styles/_table.scss @@ -198,6 +198,12 @@ table{ } } tbody{ + tr{ + cursor: pointer; + &.on{ + background-color: #272727; + } + } td{ height: 40px; vertical-align: middle; @@ -209,6 +215,9 @@ table{ white-space: nowrap; text-overflow: ellipsis; overflow: hidden; + .warning{ + color: PCSオプションマスター; + } .color-wrap{ display: flex; align-items: center; @@ -228,4 +237,38 @@ table{ } } } + &.overflow-y{ + table{ + table-layout: fixed; + border-collapse: collapse; + thead{ + display: table; + table-layout: fixed; + width: 100%; + border-collapse: collapse; + } + tbody{ + display: block; + max-height: 81px; + overflow-y: auto; + tr{ + display: table; + table-layout: fixed; + width: 100%; + border-collapse: collapse; + margin-top: -1px; + } + &::-webkit-scrollbar { + width: 2px; + background-color: rgba(255, 255, 255, 0.05); + } + &::-webkit-scrollbar-thumb { + background-color: #C1CCD7; + } + &::-webkit-scrollbar-track { + background-color: rgba(255, 255, 255, 0.05); + } + } + } + } } \ No newline at end of file