Merge branch 'dev' into feature/qcast-229

src/components/floor-plan/modal/basic/step/Module.jsx

@@ -156,7 +156,6 @@ export default function Module({ setTabNum }) {
 
           <div className="module-table-box none-flex">
             <div className="module-table-inner">
-              <div className="module-table-tit">{getMessage('modal.module.basic.setting.module.stuff.info')}</div>
               <div className="eaves-keraba-table">
                 <div className="eaves-keraba-item">
                   <div className="eaves-keraba-th">{getMessage('modal.module.basic.setting.module.surface.type')}</div>
@@ -271,7 +270,6 @@ export default function Module({ setTabNum }) {
             </div>
           </div>
           {/* 설정 오류시 노출 */}
-          <div className="reset-word">※ 施工方法が選択できません。 基準風速または基準積雪量を確認してください。</div>
         </div>
       </div>
     </>

src/components/floor-plan/modal/basic/step/ModuleTabContents.jsx

@@ -203,7 +203,7 @@ export default function ModuleTabContents({ tabIndex, addRoof, setAddedRoofs, ro
                 強化施工
               </button>
             </div>
-            <div className="grid-check-form">
+            <div className="grid-check-form-block">
               <div className="d-check-box pop">
                 <input
                   type="checkbox"

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

@@ -95,6 +95,7 @@ export default function CircuitTrestleSetting({ id }) {
             return {
               ...model,
               id: uuidv4(),
+              isUsed: false,
             }
           })
           const pcsVoltageChkParams = {
@@ -252,36 +253,6 @@ export default function CircuitTrestleSetting({ id }) {
     return moduleList
   }
 
-  const onAutoAllocation = () => {
-    let moduleStdQty = 0
-    let moduleMaxQty = 0
-    const selectedModels = models.filter((m) => m.selected)
-
-    if (selectedModels.length === 0) {
-      onAutoRecommend()
-    } else {
-      moduleStdQty = selectedModels.reduce((acc, model) => {
-        return acc + parseInt(model.moduleStdQty)
-      }, 0)
-      moduleMaxQty = selectedModels.reduce((acc, model) => {
-        return acc + parseInt(model.moduleMaxQty)
-      }, 0)
-    }
-    // const target = pcsCheck.max ? moduleMaxQty : moduleStdQty
-    // const placementModules = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE)
-
-    // if (placementModules.length > target) {
-    //   swalFire({
-    //     title: '배치가능 매수를 초과합니다. 파워컨디셔너를 다시 선택해 주세요.',
-    //     type: 'alert',
-    //   })
-    //   return
-    // }
-
-    // setAllocationType(ALLOCATION_TYPE.AUTO)
-    // setTabNum(2)
-  }
-
   const onPassivityAllocation = () => {
     if (selectedModels.length === 0) {
       const params = {
@@ -365,6 +336,14 @@ export default function CircuitTrestleSetting({ id }) {
       })
 
     const result = await apply()
+    removeNotAllocationModules()
+    apply()
+  }
+
+  const removeNotAllocationModules = () => {
+    const notAllocationModules = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE && !obj.circuit)
+    canvas.remove(...notAllocationModules)
+    canvas.renderAll()
   }
 
   const onClickPrev = () => {
@@ -477,7 +456,7 @@ export default function CircuitTrestleSetting({ id }) {
           {tabNum === 2 && <StepUp {...stepUpProps} onInitialize={handleStepUpInitialize} />}
           {tabNum === 1 && allocationType === ALLOCATION_TYPE.AUTO && (
             <div className="grid-btn-wrap">
-              <button className="btn-frame modal mr5" onClick={() => onAutoAllocation()}>
+              <button className="btn-frame modal mr5" onClick={() => onAutoRecommend()}>
                 {getMessage('modal.circuit.trestle.setting.circuit.allocation.auto')}
               </button>
               <button className="btn-frame modal act" onClick={() => onPassivityAllocation()}>

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

@@ -38,7 +38,7 @@ export default function PowerConditionalSelect(props) {
   const { swalFire } = useSwal()
   const modelHeader = [
     { name: getMessage('시리즈'), width: '15%', prop: 'pcsSerNm', type: 'color-box' },
-    { name: getMessage('명칭'), width: '15%', prop: 'itemNm', type: 'color-box' },
+    { name: getMessage('명칭'), width: '15%', prop: 'goodsNo', type: 'color-box' },
     {
       name: `${getMessage('modal.circuit.trestle.setting.power.conditional.select.rated.output')} (kW)`,
       width: '10%',
@@ -240,7 +240,7 @@ export default function PowerConditionalSelect(props) {
           <div className="circuit-data-form">
             {selectedModels?.map((model) => (
               <span className="normal-font">
-                {model.itemNm} <button className="del" onClick={() => onRemoveSelectedModel(model)}></button>
+                {model.goodsNo} <button className="del" onClick={() => onRemoveSelectedModel(model)}></button>
               </span>
             ))}
           </div>

src/components/floor-plan/modal/circuitTrestle/step/type/PassivityCircuitAllocation.jsx

@@ -14,6 +14,7 @@ export default function PassivityCircuitAllocation(props) {
     tabNum,
     setTabNum,
     selectedModels,
+    setSelectedModels,
     getOptYn: getApiProps,
     getUseModuleItemList: getSelectedModuleList,
     getSelectModelList: getSelectModelList,
@@ -201,6 +202,7 @@ export default function PassivityCircuitAllocation(props) {
       }
     }
 
+    let tempSelectedPcs = { ...selectedPcs }
     canvas.discardActiveObject()
     canvas
       .getObjects()
@@ -229,6 +231,8 @@ export default function PassivityCircuitAllocation(props) {
         obj.pcsItemId = selectedPcs.itemId
         obj.circuit = moduleCircuitText
         obj.circuitNumber = getCircuitNumber()
+        tempSelectedPcs.used = true
+        setSelectedPcs(tempSelectedPcs)
         canvas.add(moduleCircuitText)
       })
 
@@ -249,25 +253,47 @@ export default function PassivityCircuitAllocation(props) {
           }),
         }
       })
+
     console.log('uniqueCircuitNumbers', uniqueCircuitNumbers)
-    const pcsItemList = selectedModels.map((model, index) => {
+    const usedPcses = selectedModels.filter((model) => model.isUsed)
-      return {
+    const pcsItemList =
-        pcsMkrCd: model.pcsMkrCd,
+      usedPcses.length === 0
-        pcsSerCd: model.pcsSerCd,
+        ? [
-        itemId: model.itemId,
+            {
-        itemNm: model.itemNm,
+              pcsMkrCd: selectedPcs.pcsMkrCd,
-        goodsNo: model.goodsNo,
+              pcsSerCd: selectedPcs.pcsSerCd,
-        serQtyList: [
+              itemId: selectedPcs.itemId,
-          {
+              itemNm: selectedPcs.itemNm,
-            serQty: targetModules.length,
+              goodsNo: selectedPcs.goodsNo,
-            paralQty: uniqueCircuitNumbers.length,
+              serQtyList: [
-            rmdYn: 'Y',
+                {
-            usePossYn: 'Y',
+                  serQty: targetModules.length,
-            roofSurfaceList: roofSurfaceList,
+                  paralQty: uniqueCircuitNumbers.length,
-          },
+                  rmdYn: 'Y',
-        ],
+                  usePossYn: 'Y',
-      }
+                  roofSurfaceList: roofSurfaceList,
-    })
+                },
+              ],
+            },
+          ]
+        : selectedModels.map((model, index) => {
+            return {
+              pcsMkrCd: model.pcsMkrCd,
+              pcsSerCd: model.pcsSerCd,
+              itemId: model.itemId,
+              itemNm: model.itemNm,
+              goodsNo: model.goodsNo,
+              serQtyList: [
+                {
+                  serQty: targetModules.length,
+                  paralQty: uniqueCircuitNumbers.length,
+                  rmdYn: 'Y',
+                  usePossYn: 'Y',
+                  roofSurfaceList: roofSurfaceList,
+                },
+              ],
+            }
+          })
 
     const params = {
       ...getApiProps(),
@@ -276,6 +302,7 @@ export default function PassivityCircuitAllocation(props) {
     }
 
     getPcsManualConfChk(params).then((res) => {
+      console.log('targetModules', targetModules)
       if (res.resultCode === 'E') {
         swalFire({
           text: res.resultMsg,
@@ -295,10 +322,17 @@ export default function PassivityCircuitAllocation(props) {
             canvas.renderAll()
           },
         })
-
+        setSelectedPcs({ ...selectedPcs, used: false })
+        setTargetModules([])
         return
       }
 
+      setSelectedModels(
+        selectedModels.map((model) => {
+          return { ...model, isUsed: model.id === selectedPcs.id ? true : model.isUsed }
+        }),
+      )
+
       setTargetModules([])
       setCircuitNumber(+circuitNumber + 1)
       setTableData()
@@ -512,7 +546,7 @@ export default function PassivityCircuitAllocation(props) {
                       onChange={() => setSelectedPcs(model)}
                     />
                     <label htmlFor={`ra0${index + 1}`}>
-                      {model.itemNm} (
+                      {model.goodsNo} (
                       {getMessage(
                         'modal.circuit.trestle.setting.circuit.allocation.passivity.circuit.info',
                         managementState?.coldRegionFlg === '1' ? [model.serMinQty, model.serColdZoneMaxQty] : [model.serMinQty, model.serMaxQty],

src/components/floor-plan/modal/roofAllocation/RoofAllocationSetting.jsx

@@ -99,7 +99,7 @@ export default function RoofAllocationSetting(props) {
                         <div className="grid-option-block-form">
                           <div className="block-box">
                             <div className="flex-ment">
-                              <div className="grid-select" style={{ width: '248px' }}>
+                              <div className="grid-select">
                                 <QSelectBox
                                   options={roofMaterials}
                                   value={roof}
@@ -109,14 +109,18 @@ export default function RoofAllocationSetting(props) {
                                   onChange={(e) => handleChangeRoofMaterial(e, index)}
                                 />
                               </div>
-                              {index === 0 && <span className="dec">{getMessage('modal.roof.alloc.default.roof.material')}</span>}
+                              {index === 0 && <span className="absol dec">{getMessage('modal.roof.alloc.default.roof.material')}</span>}
-                              {index !== 0 && <button className="delete" onClick={() => onDeleteRoofMaterial(index)}></button>}
+                              {index !== 0 && (
+                                <span className="absol">
+                                  <button className="delete" onClick={() => onDeleteRoofMaterial(index)}></button>
+                                </span>
+                              )}
                             </div>
                           </div>
                           <div className="block-box">
                             <div className="flex-ment">
                               <span>{getMessage('slope')}</span>
-                              <div className="input-grid" style={{ width: '214px' }}>
+                              <div className="input-grid">
                                 <input
                                   type="text"
                                   className="input-origin block"
@@ -126,49 +130,53 @@ export default function RoofAllocationSetting(props) {
                                   defaultValue={currentAngleType === 'slope' ? roof.pitch : roof.angle}
                                 />
                               </div>
-                              <span>{pitchText}</span>
+                              <span className="absol">{pitchText}</span>
                             </div>
                           </div>
                           {(roof.widAuth || roof.lenAuth) && (
-                            <div className="block-box">
+                            <>
                               {roof.widAuth && (
-                                <div className="flex-ment">
+                                <div className="block-box">
-                                  <span>W</span>
+                                  <div className="flex-ment">
-                                  <div className="input-grid" style={{ width: '100px' }}>
+                                    <span>W</span>
-                                    <input
+                                    <div className="input-grid">
-                                      type="text"
+                                      <input
-                                      className="input-origin block"
+                                        type="text"
-                                      defaultValue={roof.width}
+                                        className="input-origin block"
-                                      onChange={(e) => handleChangeInput(e, 'width', index)}
+                                        defaultValue={roof.width}
-                                      readOnly={roof.widAuth === 'R'}
+                                        onChange={(e) => handleChangeInput(e, 'width', index)}
-                                    />
+                                        readOnly={roof.widAuth === 'R'}
+                                      />
+                                    </div>
                                   </div>
                                 </div>
                               )}
                               {roof.lenAuth && (
-                                <div className="flex-ment">
+                                <div className="block-box">
-                                  <span>L</span>
+                                  <div className="flex-ment">
-                                  <div className="input-grid" style={{ width: '100px' }}>
+                                    <span>L</span>
-                                    <input
+                                    <div className="input-grid">
-                                      type="text"
+                                      <input
-                                      className="input-origin block"
+                                        type="text"
-                                      defaultValue={roof.length}
+                                        className="input-origin block"
-                                      onChange={(e) => handleChangeInput(e, 'length', index)}
+                                        defaultValue={roof.length}
-                                      readOnly={roof.lenAuth === 'R'}
+                                        onChange={(e) => handleChangeInput(e, 'length', index)}
-                                    />
+                                        readOnly={roof.lenAuth === 'R'}
+                                      />
+                                    </div>
                                   </div>
                                 </div>
                               )}
-                            </div>
+                            </>
                           )}
                           {(roof.raftAuth || roof.roofPchAuth) && (
-                            <div className="block-box">
+                            <>
                               {roof.raftAuth && (
                                 <div className="block-box">
                                   <div className="flex-ment">
                                     <span>{getMessage('modal.placement.initial.setting.rafter')}</span>
                                     {raftCodes.length > 0 && (
-                                      <div className="grid-select" style={{ width: '160px' }}>
+                                      <div className="grid-select">
                                         <QSelectBox
                                           options={raftCodes}
                                           value={roof}
@@ -186,7 +194,7 @@ export default function RoofAllocationSetting(props) {
                                 <div className="block-box">
                                   <div className="flex-ment">
                                     <span>{getMessage('hajebichi')}</span>
-                                    <div className="input-grid" style={{ width: '84px' }}>
+                                    <div className="input-grid">
                                       <input
                                         type="text"
                                         className="input-origin block"
@@ -198,7 +206,7 @@ export default function RoofAllocationSetting(props) {
                                   </div>
                                 </div>
                               )}
-                            </div>
+                            </>
                           )}
                           <div className="block-box">
                             <div className="icon-btn-wrap">

src/components/floor-plan/modal/roofShape/type/option/Wall.jsx

@@ -6,7 +6,6 @@ export default function Wall({ sleeveOffset, setSleeveOffset, hasSleeve, setHasS
   const { getMessage } = useMessage()
   return (
     <>
-      {hasSleeve}
       <div className="eaves-keraba-table">
         <div className="eaves-keraba-item">
           <div className="eaves-keraba-th">

src/styles/_modal.scss

@@ -259,6 +259,12 @@ $alert-color: #101010;
         border-bottom: 1px solid #424242;
     }
 }
+.grid-check-form-block{
+    display: block;
+    > div{
+        margin-bottom: 10px;
+    }
+}
 .grid-option-overflow{
     max-height: 350px;
     overflow-y: auto;
@@ -305,6 +311,25 @@ $alert-color: #101010;
     }
     .grid-option-block-form{
         flex: 1;
+        .flex-ment{
+            position: relative;
+            padding-right: 70px;
+            flex: 1 1 auto;
+            span{
+                width: 70px;
+                &.absol{
+                    width: fit-content;
+                    position: absolute;
+                    top: 50%;
+                    right: 0;
+                    transform: translateY(-50%);
+                    
+                }
+            }
+            .input-grid{
+                flex: 1;
+            }
+        }
     }
 }
 .select-form{
@@ -312,6 +337,7 @@ $alert-color: #101010;
 }
 .grid-select{
     flex: 1;
+    height: 30px;
     &.no-flx{
         flex: unset;
     }
@@ -2013,7 +2039,7 @@ $alert-color: #101010;
     }
 }
 .roof-module-tab2-overflow{
-    max-height: 500px;
+    max-height: 650px;
     overflow-y: auto;
     padding-bottom: 15px;
     border-bottom: 1px solid #4D4D4D;
@@ -2088,17 +2114,3 @@ $alert-color: #101010;
         justify-content: flex-end;
     }
 }
-
-.reset-word-wrap{
-    display: flex;
-    align-items: center;
-    .grid-btn-wrap{
-        margin-left: auto;
-    }
-}
-.reset-word{
-    font-size: 12px;
-    color: #FFCACA;
-    font-weight: 400;
-    margin-top: 10px;
-}