Merge branch 'qcast-pub' into dev

src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx

@@ -440,6 +440,7 @@ export default function CircuitTrestleSetting({ id }) {
     seletedOption,
     setSeletedOption,
     getModuleList,
+    setModuleStatisticsData,
   }
 
   // 승압설정 목록 조회

src/components/floor-plan/modal/circuitTrestle/step/StepUp.jsx

@@ -28,6 +28,7 @@ export default function StepUp(props) {
     setSelectedModels,
     getSelectedPcsItemList,
     getModuleList,
+    setModuleStatisticsData,
   } = props
   const { getMessage } = useMessage()
   const { swalFire } = useSwal()
@@ -148,6 +149,7 @@ export default function StepUp(props) {
           })
 
           canvas.renderAll()
+          setModuleStatisticsData()
         } else {
           swalFire({ text: getMessage('common.message.send.error') })
           // swalFire({
@@ -467,6 +469,7 @@ export default function StepUp(props) {
     })
 
     canvas.renderAll()
+    setModuleStatisticsData()
   }
 
   // 현재 선택된 값들을 가져오는 함수 추가
@@ -511,6 +514,32 @@ export default function StepUp(props) {
   return (
     <>
       <div className="properties-setting-wrap outer">
+        <div className="circuit-title-sel">
+          <div className="outline-form">
+            <span className="mr10" style={{ width: 'auto' }}>
+              {getMessage('modal.circuit.trestle.setting.step.up.allocation.select.monitor')}
+            </span>
+            {optCodes.length > 0 && (
+              <div className="grid-select mr10">
+                {/* <QSelectBox title={'電力検出ユニット (モニター付き)'} /> */}
+                <QSelectBox
+                  //options={optCodes}
+                  options={optCodes.map((roof) => {
+                    return { ...roof, name: globalLocale === 'ko' ? roof.name : roof.nameJp }
+                  })}
+                  title={globalLocale === 'ko' ? optCodes[0].name : optCodes[0].nameJp}
+                  value={seletedOption}
+                  sourceKey="code"
+                  targetKey="code"
+                  showKey="name"
+                  onChange={(e) => setSeletedOption(e)}
+                />
+              </div>
+            )}
+          </div>
+        </div>
+
+        <div className="slope-wrap">
           <div className="circuit-overflow">
             {/* 3개일때 className = by-max */}
             {stepUpListData.map((stepUp, index) => (
@@ -618,29 +647,6 @@ export default function StepUp(props) {
               </div>
             ))}
           </div>
-        <div className="slope-wrap">
-          <div className="outline-form">
-            <span className="mr10" style={{ width: 'auto' }}>
-              {getMessage('modal.circuit.trestle.setting.step.up.allocation.select.monitor')}
-            </span>
-            {optCodes.length > 0 && (
-              <div className="grid-select mr10">
-                {/* <QSelectBox title={'電力検出ユニット (モニター付き)'} /> */}
-                <QSelectBox
-                  //options={optCodes}
-                  options={optCodes.map((roof) => {
-                    return { ...roof, name: globalLocale === 'ko' ? roof.name : roof.nameJp }
-                  })}
-                  title={globalLocale === 'ko' ? optCodes[0].name : optCodes[0].nameJp}
-                  value={seletedOption}
-                  sourceKey="code"
-                  targetKey="code"
-                  showKey="name"
-                  onChange={(e) => setSeletedOption(e)}
-                />
-              </div>
-            )}
-          </div>
         </div>
       </div>
     </>

src/hooks/useCirCuitTrestle.js

@@ -208,7 +208,7 @@ export function useCircuitTrestle() {
       surface.modules.forEach((module) => {
         if (!surfaceObjects[surface.id][module.moduleInfo.itemId]) {
           // 지붕면에 모듈 존재 여부
-          surfaceObjects[surface.id][module.moduleInfo.itemId] = new Big(0) // 모듈 초기화
+          surfaceObjects[surface.id][module.moduleInfo.itemId] = Big(0) // 모듈 초기화
         }
 
         surfaceObjects[surface.id][module.moduleInfo.itemId]++
@@ -266,7 +266,7 @@ export function useCircuitTrestle() {
     })
     let ftWpOut = 0
     tempRows.forEach((row) => {
-      ftWpOut = Big(ftWpOut).plus(+row.wpOut).toNumber()
+      ftWpOut = Big(ftWpOut).plus(Big(row.wpOut)).toNumber()
     })
 
     const tempFooter = {
@@ -277,9 +277,11 @@ export function useCircuitTrestle() {
     selectedModules.itemList.forEach((module) => {
       let wpOut = 0
       tempRows.forEach((row) => {
+        if (row[module.itemId]) {
           wpOut = Big(wpOut)
-          .plus(+row[module.itemId] ?? 0)
+            .plus(Big(row[module.itemId] ?? 0))
             .toNumber()
+        }
       })
       tempFooter[module.itemId] = wpOut
     })

src/styles/_modal.scss

@@ -142,8 +142,28 @@ $alert-color: #101010;
         background: url(../../public/static/images/canvas/modal_close.svg)no-repeat center;
     }
 }
+
 .modal-body{
+    position: relative;
     padding: 24px;
+    .left-bar{
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 5px;
+        height: 100%;
+        background-color: #000;
+        cursor: pointer;
+    }
+    .right-bar{
+        position: absolute;
+        top: 0;
+        right: 0;
+        width: 5px;
+        height: 100%;
+        background-color: #000;
+        cursor: pointer;
+    }
     .modal-btn-wrap{
         display: flex;
         align-items: center;
@@ -524,7 +544,7 @@ $alert-color: #101010;
     align-items: center;
     gap: 10px;
     &.place{
-        gap: 15px;
+        gap: 33px;
         .outline-form{
             span{
                 width: fit-content;
@@ -1648,7 +1668,6 @@ $alert-color: #101010;
 
 .circuit-overflow{
     overflow-x: auto;
-    margin-bottom: 25px;
     &::-webkit-scrollbar {
         height: 4px;
         background-color: transparent;
@@ -1666,6 +1685,42 @@ $alert-color: #101010;
         }
     }
 }
+.circuit-title-sel{
+    padding-bottom: 14px;
+    .outline-form{
+        span{
+            color: #62C207;
+        }
+        .grid-select{
+            .sort-select{
+                border: 1px solid #4E9E04;
+                background-color: #1A3104;
+                p{
+                    line-height: 27px;
+                }
+                .select-item-wrap{
+                    background-color: #1A3104;
+                    border: 1px solid #4E9E04;
+                    .select-item:hover{
+                        background-color: #294e07;
+                    }
+                    &::-webkit-scrollbar {
+                        width: 2px;
+                        background-color: transparent;
+                        
+                    }
+                    &::-webkit-scrollbar-thumb {
+                        background-color: #fff;
+                        border-radius: 10px;
+                    }
+                    &::-webkit-scrollbar-track {
+                        background-color: transparent;
+                    }
+                }
+            }
+        } 
+    }
+}
 
 .circuit-table-flx-wrap{
     display: flex;