회로번호 초기화 기능 추가 및 미할당 모듈 삭제

번호 확정시 validation 추가

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

@@ -50,6 +50,14 @@ export default function CircuitTrestleSetting({ id }) {
     }
   }, [])
 
+  useEffect(() => {
+    if (allocationType === ALLOCATION_TYPE.PASSIVITY && tabNum === 2) {
+      const notAllocationModules = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE && !obj.circuit)
+      canvas.remove(...notAllocationModules)
+      canvas.renderAll()
+    }
+  }, [tabNum])
+
   const onAutoRecommend = () => {
     if (series.filter((s) => s.selected).length === 0) {
       swalFire({
@@ -59,13 +67,11 @@ export default function CircuitTrestleSetting({ id }) {
       return
     }
 
-    console.log('🚀 ~ onAutoRecommend ~ selectedModules:', selectedModules)
-
     const params = {
-      ...getApiProps(),
+      ...getOptYn(),
-      useModuleItemList: getSelectedModuleList(),
+      useModuleItemList: getUseModuleItemList(),
       roofSurfaceList: getRoofSurfaceList(),
-      pcsItemList: getModelList(),
+      pcsItemList: getPcsItemList(),
     }
 
     getPcsAutoRecommendList(params).then((res) => {
@@ -81,7 +87,7 @@ export default function CircuitTrestleSetting({ id }) {
     })
   }
 
-  const getApiProps = () => {
+  const getOptYn = () => {
     return {
       maxConnYn: pcsCheck.max ? 'Y' : 'N',
       smpCirYn: pcsCheck.division ? 'Y' : 'N',
@@ -89,7 +95,7 @@ export default function CircuitTrestleSetting({ id }) {
     }
   }
 
-  const getModelList = () => {
+  const getPcsItemList = () => {
     return models.map((model) => {
       return {
         itemId: model.itemId,
@@ -113,27 +119,14 @@ export default function CircuitTrestleSetting({ id }) {
             paralQty: 0,
             rmdYn: 'Y',
             usePossYn: 'Y',
-            roofSurfaceList: [
+            roofSurfaceList: getRoofSurfaceList(),
-              {
-                roofSurfaceId: '',
-                roofSurface: '',
-                roofSurfaceIncl: '',
-                moduleList: [
-                  {
-                    itemId: '',
-                    circuit: '',
-                    pcsItemId: '',
-                  },
-                ],
-              },
-            ],
           },
         ],
       }
     })
   }
 
-  const getSelectedModuleList = () => {
+  const getUseModuleItemList = () => {
     return selectedModules.itemList.map((m) => {
       return {
         itemId: m.itemId,
@@ -157,6 +150,8 @@ export default function CircuitTrestleSetting({ id }) {
           moduleList: obj.modules.map((module) => {
             return {
               itemId: module.moduleInfo.itemId,
+              circuit: module.circuitNumber ? module.circuitNumber : null,
+              pcsItemId: module.circuit ? module.circuit?.pcsItemId : null,
             }
           }),
         }
@@ -223,6 +218,25 @@ export default function CircuitTrestleSetting({ id }) {
     setAllocationType(ALLOCATION_TYPE.PASSIVITY)
   }
 
+  const onClickPrev = () => {
+    setAllocationType(ALLOCATION_TYPE.AUTO)
+    swalFire({
+      text: '할당한 회로 번호가 초기화됩니다.',
+      type: 'alert',
+      icon: 'warning',
+      confirmFn: () => {
+        const circuitModules = canvas
+          .getObjects()
+          .filter((obj) => obj.name === 'module' && selectedModels.map((model) => model.id).includes(obj.circuit?.circuitInfo?.id))
+        canvas.remove(...circuitModules.map((module) => module.circuit))
+        circuitModules.forEach((obj) => {
+          obj.circuit = null
+          obj.pcsItemId = null
+        })
+      },
+    })
+  }
+
   const powerConditionalSelectProps = {
     tabNum,
     setTabNum,
@@ -245,11 +259,10 @@ export default function CircuitTrestleSetting({ id }) {
     pcsCheck,
     selectedModels,
     setSelectedModels,
-    getApiProps,
+    getOptYn,
-    getSelectedModuleList,
+    getUseModuleItemList,
     getSelectModelList,
     getRoofSurfaceList,
-    getModelList,
   }
 
   const stepUpProps = {
@@ -257,12 +270,10 @@ export default function CircuitTrestleSetting({ id }) {
     setTabNum,
     models,
     setModels,
-    circuitAllocationType,
+    getOptYn, // 옵션 Y/N
-    setCircuitAllocationType,
+    getUseModuleItemList, // 사용된 모듈아이템 List
-    getApiProps,
+    getRoofSurfaceList, // 지붕면 목록
-    getSelectedModuleList,
+    getPcsItemList, // PCS 아이템 목록
-    getRoofSurfaceList,
-    getModelList,
   }
 
   return (
@@ -297,7 +308,7 @@ export default function CircuitTrestleSetting({ id }) {
           )}
           {tabNum === 1 && allocationType === ALLOCATION_TYPE.PASSIVITY && (
             <div className="grid-btn-wrap">
-              <button className="btn-frame modal mr5" onClick={() => setAllocationType(ALLOCATION_TYPE.AUTO)}>
+              <button className="btn-frame modal mr5" onClick={() => onClickPrev()}>
                 {getMessage('modal.common.prev')}
               </button>
               <button className="btn-frame modal act" onClick={() => setTabNum(2)}>

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

@@ -146,7 +146,7 @@ export default function PowerConditionalSelect(props) {
   }
 
   const onRemoveSelectedModel = (model) => {
-    setModels(models.map((m) => ({ ...m, selected: m.code !== model.code ? m.selected : false })))
+    setSelectedModels(selectedModels.filter((m) => m.id !== model.id))
   }
 
   const onChangeMaker = (option) => {

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

@@ -10,7 +10,20 @@ import { useContext, useEffect, useState } from 'react'
 import { useRecoilValue } from 'recoil'
 
 export default function PassivityCircuitAllocation(props) {
-  const { tabNum, setTabNum, selectedModels, getApiProps, getSelectedModuleList, getSelectModelList, getRoofSurfaceList, getModelList } = props
+  // getOptYn,
+  //   getUseModuleItemList,
+  //   getSelectModelList,
+  //   getRoofSurfaceList,
+  const {
+    tabNum,
+    setTabNum,
+    selectedModels,
+    getOptYn: getApiProps,
+    getUseModuleItemList: getSelectedModuleList,
+    getSelectModelList: getSelectModelList,
+    getRoofSurfaceList,
+    getModelList,
+  } = props
   const { swalFire } = useSwal()
   const { getMessage } = useMessage()
   const canvas = useRecoilValue(canvasState)
@@ -19,21 +32,39 @@ export default function PassivityCircuitAllocation(props) {
   const moduleStatistics = useRecoilValue(moduleStatisticsState)
   // const [totalWpout, setTotalWpout] = useState(0)
   const [selectedPcs, setSelectedPcs] = useState(selectedModels[0])
-  const { header, rows: row } = moduleStatistics
+  // const { header, rows: row } = moduleStatistics
-  const [headers, setHeaders] = useState(header)
+  const [header, setHeader] = useState(moduleStatistics.header)
-  const [rows, setRows] = useState(row)
+  const [rows, setRows] = useState(moduleStatistics.rows)
   const [footer, setFooter] = useState(['합계'])
   const [circuitNumber, setCircuitNumber] = useState(1)
   const [targetModules, setTargetModules] = useState([])
   const { getPcsManualConfChk } = useMasterController()
 
   useEffect(() => {
-    console.log('🚀 ~ PassivityCircuitAllocation ~ selectedModels:', selectedModels)
+    console.log('header, rows', header, rows)
-  }, [])
+    // setSurfaceInfo()
+    setTableData()
+    if (!managementState) {
+      setManagementState(managementStateLoaded)
+    }
+    canvas
+      .getObjects()
+      .filter((obj) => obj.name === POLYGON_TYPE.MODULE)
+      .forEach((obj) => {
+        obj.on('mousedown', (e) => handleTargetModules(obj))
+      })
 
-  useEffect(() => {
+    return () => {
-    console.log('🚀 ~ PassivityCircuitAllocation ~ selectedPcs:', selectedPcs)
+      canvas
-  }, [selectedPcs])
+        .getObjects()
+        .filter((obj) => obj.name === POLYGON_TYPE.MODULE)
+        .forEach((obj) => {
+          obj.set({ strokeWidth: 0.3 })
+          obj.off('mousedown')
+        })
+      canvas.renderAll()
+    }
+  }, [])
 
   const handleTargetModules = (obj) => {
     if (!Array.isArray(targetModules)) {
@@ -54,32 +85,9 @@ export default function PassivityCircuitAllocation(props) {
     canvas.renderAll()
   }
 
-  useEffect(() => {
-    setSurfaceInfo()
-    if (!managementState) {
-      setManagementState(managementStateLoaded)
-    }
-    const modules = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE)
-
-    modules.forEach((obj) => {
-      obj.on('mousedown', (e) => handleTargetModules(obj))
-    })
-
-    return () => {
-      canvas
-        .getObjects()
-        .filter((obj) => obj.name === POLYGON_TYPE.MODULE)
-        .forEach((obj) => {
-          obj.set({ strokeWidth: 0.3 })
-          obj.off('mousedown')
-        })
-      canvas.renderAll()
-    }
-  }, [])
-
   const setSurfaceInfo = () => {
     const surfaces = canvas.getObjects().filter((obj) => POLYGON_TYPE.MODULE_SETUP_SURFACE === obj.name)
-    setHeaders([header[0], { name: '회로', prop: 'circuit' }, ...header.slice(1)])
+    // setHeaders([header[0], { name: '회로', prop: 'circuit' }, ...header.slice(1)])
     setRows(
       rows.map((row) => {
         return {
@@ -155,62 +163,144 @@ export default function PassivityCircuitAllocation(props) {
     if (!circuitNumber || circuitNumber === 0) {
       swalFire({
         text: '회로번호를 1 이상입력해주세요.',
-        type: 'warning',
+        type: 'alert',
         icon: 'warning',
       })
       return
     } else if (targetModules.length === 0) {
       swalFire({
         text: '모듈을 선택해주세요.',
-        type: 'warning',
+        type: 'alert',
         icon: 'warning',
       })
       return
+    } else if (selectedModels.length > 1) {
+      const uniqueCircuitNumbers = [
+        ...new Set(
+          canvas
+            .getObjects()
+            .filter((obj) => obj.name === POLYGON_TYPE.MODULE && obj.circuitNumber)
+            .map((obj) => obj.circuitNumber),
+        ),
+      ]
+
+      let result = false
+      uniqueCircuitNumbers.forEach((number) => {
+        if (
+          number.split('-')[1] === circuitNumber + ')' &&
+          number.split('-')[0] !== '(' + (selectedModels.findIndex((model) => model.id === selectedPcs.id) + 1)
+        ) {
+          result = true
+        }
+      })
+      if (result) {
+        swalFire({
+          text: '회로 번호가 같은 다른 파워 컨디셔너 모듈이 있습니다. 다른 회로 번호를 설정하십시오.',
+          type: 'alert',
+          icon: 'warning',
+        })
+        return
+      }
     }
+
+    canvas.discardActiveObject()
+    canvas
+      .getObjects()
+      .filter((obj) => targetModules.includes(obj.id))
+      .forEach((obj) => {
+        const moduleCircuitText = new fabric.Text(getCircuitNumber(), {
+          left: obj.left + obj.width / 2,
+          top: obj.top + obj.height / 2,
+          fill: 'black',
+          fontSize: 20,
+          width: obj.width,
+          height: obj.height,
+          textAlign: 'center',
+          originX: 'center',
+          originY: 'center',
+          name: 'circuitNumber',
+          parentId: obj.id,
+          circuitInfo: selectedPcs,
+        })
+        obj.set({
+          strokeWidth: 0.3,
+        })
+        obj.pcsItemId = selectedPcs.itemId
+        obj.circuit = moduleCircuitText
+        obj.circuitNumber = getCircuitNumber()
+        canvas.add(moduleCircuitText)
+      })
+
+    const roofSurfaceList = canvas
+      .getObjects()
+      .filter((obj) => POLYGON_TYPE.MODULE_SETUP_SURFACE === obj.name)
+      .map((surface) => {
+        return {
+          roofSurfaceId: surface.id,
+          roofSurface: surface.direction,
+          roofSurfaceIncl: surface.incl,
+          moduleList: surface.modules.map((module) => {
+            return {
+              itemId: module.moduleInfo.itemId,
+              circuit: module.circuitNumber,
+              pcsItemId: module.pcsItemId,
+            }
+          }),
+        }
+      })
+
+    const pcsItemList = selectedModels.map((model) => {
+      return {
+        pcsMkrCd: model.pcsMkrCd,
+        pcsSerCd: model.pcsSerCd,
+        itemId: model.itemId,
+        itemNm: model.itemNm,
+        goodsNo: model.goodsNo,
+        serQtyList: [
+          {
+            serQty: 0,
+            paralQty: 0,
+            rmdYn: 'Y',
+            usePossYn: 'Y',
+            roofSurfaceList: roofSurfaceList,
+          },
+        ],
+      }
+    })
+
     const params = {
       ...getApiProps(),
       useModuleItemList: getSelectedModuleList(),
-      pcsItemList: getSelectModelList(),
+      pcsItemList: pcsItemList,
     }
-    console.log(params)
-    // getPcsManualConfChk(params).then((res) => {
-    //   console.log(res)
-    //
-    // })
 
-    // canvas.discardActiveObject()
+    getPcsManualConfChk(params).then((res) => {
-    //
+      if (res.resultCode === 'E') {
-    // canvas
+        swalFire({
-    //   .getObjects()
+          text: res.resultMsg,
-    //   .filter((obj) => targetModules.includes(obj.id))
+          type: 'alert',
-    //   .forEach((obj) => {
+          icon: 'warning',
-    //     const moduleCircuitText = new fabric.Text(getCircuitNumber(), {
+          confirmFn: () => {
-    //       left: obj.left + obj.width / 2,
+            const circuitNumbers = canvas.getObjects().filter((obj) => obj.name === 'circuitNumber' && targetModules.includes(obj.parentId))
-    //       top: obj.top + obj.height / 2,
+            canvas.remove(...circuitNumbers)
-    //       fill: 'black',
+            canvas
-    //       fontSize: 20,
+              .getObjects()
-    //       width: obj.width,
+              .filter((obj) => obj.name === 'module' && targetModules.includes(obj.id))
-    //       height: obj.height,
+              .forEach((obj) => {
-    //       textAlign: 'center',
+                obj.pcsItemId = null
-    //       originX: 'center',
+                obj.circuit = null
-    //       originY: 'center',
+                obj.circuitNumber = null
-    //       name: 'circuitNumber',
+              })
-    //       parentId: obj.id,
+            canvas.renderAll()
-    //       circuitInfo: selectedPcs,
+          },
-    //     })
+        })
-    //     obj.set({
-    //       strokeWidth: 0.3,
-    //     })
-    //     obj.pcsItemId = selectedPcs.itemId
 
-    //     obj.circuit = moduleCircuitText
+        return
-    //     canvas.add(moduleCircuitText)
+      }
-    //     canvas.renderAll()
+
-    //     console.log(obj)
+      setTargetModules([])
-    //   })
+      setCircuitNumber(+circuitNumber + 1)
-    // setTargetModules([])
+    })
-    // setCircuitNumber(+circuitNumber + 1)
-    // canvas.renderAll()
   }
 
   const getCircuitNumber = () => {
@@ -221,12 +311,36 @@ export default function PassivityCircuitAllocation(props) {
     }
   }
 
+  const setTableData = () => {
+    const tempHeader = [
+      { name: '지붕면', prop: 'name' },
+      { name: '회로', prop: 'circuit' },
+      ...selectedModules.itemList.map((module) => {
+        return {
+          name: module.itemNm,
+          prop: module.itemId,
+        }
+      }),
+      { name: '발전량(kW)', prop: 'wpOut' },
+    ]
+    const tempRows = rows.map((row) => {
+      return {
+        name: '',
+        circuit: '',
+        ...selectedModules.itemList.map((module) => {
+          return {
+            name: module.itemNm,
+            prop: module.itemId,
+          }
+        }),
+        wpOut: 0,
+      }
+    })
+
+    console.log('tempHeader', tempHeader)
+  }
+
   const initSelectedPcsCircuitNumber = () => {
-    console.log(
-      'module',
-      canvas.getObjects().filter((obj) => obj.name === 'module'),
-    )
-    console.log('selectedPcs', selectedPcs)
     swalFire({
       title: '선택된 파워 컨디셔너의 회로할당을 초기화합니다.',
       type: 'confirm',
@@ -281,7 +395,7 @@ export default function PassivityCircuitAllocation(props) {
                 <table>
                   <thead>
                     <tr>
-                      {headers.map((header, index) => (
+                      {header.map((header, index) => (
                         <th key={'header' + index}>{header.name}</th>
                       ))}
                     </tr>
@@ -289,7 +403,7 @@ export default function PassivityCircuitAllocation(props) {
                   <tbody>
                     {rows.map((row, index) => (
                       <tr key={'row' + index}>
-                        {headers.map((header, i) => (
+                        {header.map((header, i) => (
                           <td className="al-c" key={'rowcell' + i}>
                             {row[header.prop]}
                           </td>