Merge remote-tracking branch 'origin/qcast-pub' into dev

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

@@ -12,9 +12,8 @@ import { get } from 'react-hook-form'
 import { correntObjectNoState } from '@/store/settingAtom'
 import { useRecoilValue } from 'recoil'
 import { GlobalDataContext } from '@/app/GlobalDataProvider'
-
 import { useRecoilState } from 'recoil'
-import { powerConditionalState } from '@/store/circuitTrestleAtom'
+import { modelState, pcsCheckState, powerConditionalState } from '@/store/circuitTrestleAtom'
 import { POLYGON_TYPE } from '@/common/common'
 import { useSwal } from '@/hooks/useSwal'
 import { canvasState } from '@/store/canvasAtom'
@@ -35,38 +34,18 @@ export default function CircuitTrestleSetting({ id }) {
 
   const [makers, setMakers] = useState([])
   const [series, setSeries] = useState([])
-  const [models, setModels] = useState([])
+  const [model, setModel] = useRecoilState(modelState)
+  const [selectedModels, setSelectedModels] = useState(model.selectedModels)
+  const [models, setModels] = useState(model.models)
   const [selectedMaker, setSelectedMaker] = useState(null)
-  const [selectedModels, setSelectedModels] = useState(null)
   const [selectedSeries, setSelectedSeries] = useState(null)
   const correntObjectNo = useRecoilValue(correntObjectNoState)
   const { getPcsMakerList } = useMasterController()
   const { managementState, setManagementState, managementStateLoaded } = useContext(GlobalDataContext)
+  const [pcsCheck, setPcsCheck] = useRecoilState(pcsCheckState)
+  const canvas = useRecoilValue(canvasState)
   const { apply } = useTrestle()
-
+  const { swalFire } = useSwal()
-  useEffect(() => {
-    // console.log(canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE))
-    // if (canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE).length === 0) {
-    //   swalFire({
-    //     title: '모듈을 배치해주세요.',
-    //     type: 'alert',
-    //     confirmFn: () => {
-    //       closePopup(id)
-    //     },
-    //   })
-    // }
-  }, [])
-
-  // useEffect(() => {
-  //   console.log('🚀 ~ CircuitTrestleSetting ~ series:', series)
-  //   const selectedSeries = series.filter((s) => s.selectd).map((s) => s.pcsSerCd)
-  //   if (selectedSeries.length > 0) {
-  //     getPcsMakerList(selectedSeries).then((res) => {
-  //       setModels(res.data)
-  //     })
-  //   }
-  // }, [series])
-  // 회로 할당 유형
   const [circuitAllocationType, setCircuitAllocationType] = useState(1)
 
   const powerConditionalSelectProps = {
@@ -80,6 +59,77 @@ export default function CircuitTrestleSetting({ id }) {
     setCircuitAllocationType,
   }
 
+  useEffect(() => {
+    console.log('🚀 ~ CircuitTrestleSetting ~ model:', model)
+    setSelectedModels(model.selectedModels)
+  }, [model])
+
+  const onAutoAllocation = () => {
+    let moduleStdQty = 0
+    let moduleMaxQty = 0
+
+    if (selectedModels.length === 0) {
+      moduleStdQty = models.reduce((acc, model) => {
+        return acc + parseInt(model.moduleStdQty)
+      }, 0)
+
+      moduleMaxQty = models.reduce((acc, model) => {
+        return acc + parseInt(model.moduleMaxQty)
+      }, 0)
+    } 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 = () => {
+    console.log('🚀 ~ onPassivityAllocation ~ selectedModels:', model)
+    if (selectedModels.length === 0) {
+      swalFire({
+        title: '파워 컨디셔너를 추가해 주세요.',
+        type: 'alert',
+      })
+      return
+    } else if (pcsCheck.max) {
+      const moduleStdQty = selectedModels.reduce((acc, model) => {
+        return acc + parseInt(model.moduleStdQty)
+      }, 0)
+      const 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.PASSIVITY)
+  }
+
   return (
     <WithDraggable isShow={true} pos={{ x: 50, y: 230 }}>
       <div className={`modal-pop-wrap l-2`}>
@@ -102,10 +152,10 @@ export default function CircuitTrestleSetting({ id }) {
           {tabNum === 2 && <StepUp />}
           {tabNum === 1 && allocationType === ALLOCATION_TYPE.AUTO && (
             <div className="grid-btn-wrap">
-              <button className="btn-frame modal mr5" onClick={() => setTabNum(2)}>
+              <button className="btn-frame modal mr5" onClick={() => onAutoAllocation()}>
                 {getMessage('modal.circuit.trestle.setting.circuit.allocation.auto')}
               </button>
-              <button className="btn-frame modal act" onClick={() => setAllocationType(ALLOCATION_TYPE.PASSIVITY)}>
+              <button className="btn-frame modal act" onClick={() => onPassivityAllocation()}>
                 {getMessage('modal.circuit.trestle.setting.circuit.allocation.passivity')}
               </button>
             </div>

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

@@ -3,7 +3,8 @@ import QSelectBox from '@/components/common/select/QSelectBox'
 import { useMasterController } from '@/hooks/common/useMasterController'
 import { useEvent } from '@/hooks/useEvent'
 import { useMessage } from '@/hooks/useMessage'
-import { makerState, modelState, seriesState } from '@/store/circuitTrestleAtom'
+import { useSwal } from '@/hooks/useSwal'
+import { makerState, modelState, pcsCheckState, seriesState } from '@/store/circuitTrestleAtom'
 import { globalLocaleStore } from '@/store/localeAtom'
 import { moduleSelectionDataState, selectedModuleState } from '@/store/selectedModuleOptions'
 import { useContext, useEffect, useState } from 'react'
@@ -11,8 +12,6 @@ import { useRecoilState } from 'recoil'
 import { useRecoilValue } from 'recoil'
 import { v4 as uuidv4 } from 'uuid'
 
-const SelectOption01 = [{ name: '0' }, { name: '0' }, { name: '0' }, { name: '0' }]
-
 export default function PowerConditionalSelect(props) {
   let { tabNum, setTabNum } = props
   const [makerData, setMakerData] = useRecoilState(makerState)
@@ -21,15 +20,17 @@ export default function PowerConditionalSelect(props) {
   const [series, setSeries] = useRecoilState(seriesState)
   const [seriesList, setSeriesList] = useState(series.series)
   const [selectedSeries, setSelectedSeries] = useState(series.selectedSeries)
-  const model = useRecoilValue(modelState)
+  const [model, setModel] = useRecoilState(modelState)
   const [models, setModels] = useState(model.models)
   const [selectedModels, setSelectedModels] = useState(model.selectedModels)
+  const [pcsCheck, setPcsCheck] = useRecoilState(pcsCheckState)
   const { managementState, setManagementState, managementStateLoaded } = useContext(GlobalDataContext)
   const { getMessage } = useMessage()
   const [selectedRow, setSelectedRow] = useState(null)
   const globalLocale = useRecoilValue(globalLocaleStore)
   const { getPcsMakerList, getPcsModelList } = useMasterController()
   const selectedModules = useRecoilValue(selectedModuleState)
+  const { swalFire } = useSwal()
   const modelHeader = [
     { name: getMessage('명칭'), width: '15%', prop: 'itemNm', type: 'color-box' },
     {
@@ -60,20 +61,26 @@ export default function PowerConditionalSelect(props) {
         setMakers(res.data)
       })
     }
+    console.log('🚀 ~ useEffect ~ selectedModules:', selectedModules)
     if (!managementState) {
-      console.log('🚀 ~ useEffect ~ managementState:', managementState)
       setManagementState(managementStateLoaded)
     }
     // promiseGet({ url: `/api/object/${correntObjectNo}/detail` }).then((res) => {
     //   console.log('🚀 ~ useEffect ~ /api/object/${correntObjectNo}/detail:', res)
     //   // coldRegionFlg-한랭지사양, conType// 계약조건(잉여~,전량)
     // })
+    return () => {
+      setMakerData({ makers, selectedMaker })
+      setSeries({ series: seriesList, selectedSeries })
+      setModel({ models, selectedModels })
+    }
   }, [])
 
   useEffect(() => {
     console.log('🚀 ~ PowerConditionalSelect ~ selectedMaker:', selectedMaker)
     if (selectedMaker) {
       setSelectedModels([])
+      setModels([])
       getPcsMakerList(selectedMaker).then((res) => {
         setSeriesList(
           res.data.map((series) => {
@@ -85,7 +92,6 @@ export default function PowerConditionalSelect(props) {
   }, [selectedMaker])
 
   useEffect(() => {
-    console.log('🚀 ~ useEffect ~ seriesList:', seriesList)
     if (seriesList.filter((series) => series.selected).length === 0) return
     const pcsMkrCd = seriesList.filter((series) => series.selected)[0]?.pcsMkrCd
     const pcsSerList = seriesList
@@ -99,7 +105,6 @@ export default function PowerConditionalSelect(props) {
         mixMatlNo: module.mixMatlNo,
       }
     })
-    console.log('🚀 ~ useEffect ~ moduleItemList:', selectedModules)
     getPcsModelList({ pcsMkrCd, pcsSerList, moduleItemList }).then((res) => {
       if (res?.result.code === 200) {
         console.log('🚀 ~ useEffect ~ res:', res.data)
@@ -107,6 +112,8 @@ export default function PowerConditionalSelect(props) {
           res.data.map((model) => {
             return {
               ...model,
+              moduleStdQty: parseInt(model.moduleStdQty),
+              moduleMaxQty: parseInt(model.moduleMaxQty),
               code: uuidv4(),
               selected: false,
             }
@@ -116,26 +123,49 @@ export default function PowerConditionalSelect(props) {
     })
   }, [seriesList])
 
+  useEffect(() => {
+    console.log('🚀 ~ useEffect ~ models:', models)
+  }, [models])
+
+  useEffect(() => {
+    console.log('🚀 ~ useEffect ~ pcsCheck:', pcsCheck)
+  }, [pcsCheck])
+
   const onCheckSeries = (series) => {
     setSeriesList((prev) => prev.map((s) => ({ ...s, selected: s.pcsSerCd === series.pcsSerCd ? !s.selected : s.selected })))
   }
 
   const onAddSelectedModel = () => {
+    if (selectedRow === null) return
+    if (selectedModels.length === 3) {
+      swalFire({
+        title: '최대 3개까지 선택할 수 있습니다.',
+        icon: 'warning',
+      })
+
+      return
+    }
     setSelectedModels([...selectedModels, selectedRow])
     setSelectedRow(null)
   }
 
+  const onRemoveSelectedModel = (model) => {
+    setSelectedModels(selectedModels.filter((m) => m.code !== model.code))
+  }
+
   useEffect(() => {
-    const selectedModelsIds = selectedModels.map((model) => model.itemId)
+    console.log('🚀 ~ useEffect ~ selectedModels:', selectedModels)
+    const selectedModelsIds = selectedModels.map((model) => model.code)
 
     setModels(
       models.map((model) => {
         return {
           ...model,
-          selected: selectedModelsIds.includes(model.itemId) === selectedRow.itemId ? true : false,
+          selected: selectedModelsIds.includes(model.code),
         }
       }),
     )
+    setModel({ ...model, selectedModels: selectedModels })
   }, [selectedModels])
   return (
     <>
@@ -154,7 +184,7 @@ export default function PowerConditionalSelect(props) {
             onChange={(option) => setSelectedMaker(option)}
           />
         </div>
-        {managementState?.conType === '1' && (
+        {managementState?.coldRegionFlg === '1' && (
           <span className="thin">{getMessage('modal.circuit.trestle.setting.power.conditional.select.cold.region')}</span>
         )}
       </div>
@@ -206,7 +236,7 @@ export default function PowerConditionalSelect(props) {
           <div className="circuit-data-form">
             {selectedModels?.map((model) => (
               <span className="normal-font">
-                {model.itemNm} <button className="del"></button>
+                {model.itemNm} <button className="del" onClick={() => onRemoveSelectedModel(model)}></button>
               </span>
             ))}
           </div>
@@ -214,11 +244,11 @@ export default function PowerConditionalSelect(props) {
       </div>
       <div className="slope-wrap">
         <div className="d-check-box pop mb15">
-          <input type="checkbox" id="ch03" />
+          <input type="checkbox" id="ch03" checked={pcsCheck.division} onChange={() => setPcsCheck({ ...pcsCheck, division: !pcsCheck.division })} />
           <label htmlFor="ch03">{getMessage('modal.circuit.trestle.setting.power.conditional.select.check1')}</label>
         </div>
         <div className="d-check-box pop">
-          <input type="checkbox" id="ch04" />
+          <input type="checkbox" id="ch04" checked={pcsCheck.max} onChange={() => setPcsCheck({ ...pcsCheck, max: !pcsCheck.max })} />
           <label className="red" htmlFor="ch04">
             {getMessage('modal.circuit.trestle.setting.power.conditional.select.check2')}
           </label>

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

@@ -1,16 +1,71 @@
-import { useState } from 'react'
+import { GlobalDataContext } from '@/app/GlobalDataProvider'
-import { useRecoilValue } from 'recoil'
+import QSelectBox from '@/components/common/select/QSelectBox'
+import { useMessage } from '@/hooks/useMessage'
+import { canvasState } from '@/store/canvasAtom'
+import { modelState, pcsCheckState } from '@/store/circuitTrestleAtom'
+import { selectedModuleState } from '@/store/selectedModuleOptions'
+import { useContext, useEffect, useState } from 'react'
+import { useRecoilState, useRecoilValue } from 'recoil'
 import { useCanvasPopupStatusController } from '@/hooks/common/useCanvasPopupStatusController'
 import { canvasPopupStatusStore } from '@/store/canvasPopupStatusAtom'
-import { useMessage } from '@/hooks/useMessage'
+import { useMasterController } from '@/hooks/common/useMasterController'
-import QSelectBox from '@/components/common/select/QSelectBox'
-
-const SelectOption01 = [{ name: '0' }, { name: '0' }, { name: '0' }, { name: '0' }]
 
 export default function StepUp({}) {
   const { getMessage } = useMessage()
   const [moduleTab, setModuleTab] = useState(1)
   const [arrayLength, setArrayLength] = useState(3) //module-table-inner의 반복 개수
+  const [pcsCheck, setPcsCheck] = useRecoilState(pcsCheckState)
+  const model = useRecoilValue(modelState)
+  const { getPcsAutoRecommendList } = useMasterController()
+  const { managementState, setManagementState, managementStateLoaded } = useContext(GlobalDataContext)
+  const canvas = useRecoilValue(canvasState)
+  const selectedModules = useRecoilValue(selectedModuleState)
+
+  useEffect(() => {
+    if (!managementState) {
+      console.log('🚀 ~ useEffect ~ managementState:', managementState)
+      setManagementState(managementStateLoaded)
+    }
+
+    const useModuleItemList = model.selectedModels.map((model) => {
+      return { itemId: model.itemId, mixMatlNo: model.mixMatlNo }
+    })
+    // [{ roofSurfaceId: '', roofSurface: '', roofSurfaceIncl: '', moduleList: [{ itemId: '' }] }],
+    const roofSurfaceList = canvas
+      .getObjects()
+      .filter((obj) => ['roofSurface', 'moduleSetupSurface'].includes(obj.name))
+      .map((obj) => {
+        return {
+          roofSurfaceId: obj.id,
+          roofSurface: obj.name,
+          roofSurfaceIncl: obj.angle,
+          moduleList: selectedModules.itemList?.map((module) => {
+            return {
+              itemId: module.itemId,
+              mixMatlNo: module.mixMatlNo,
+            }
+          }),
+        }
+      })
+    // [{ itemId: '', pcsMkrCd: '', pcsSerCd: '' }],
+    const pscItemList = model.selectedModels.map((model) => {
+      return {
+        itemId: model.itemId,
+        pcsMkrCd: model.pcsMkrCd,
+        pcsSerCd: model.pcsSerCd,
+      }
+    })
+
+    const params = {
+      maxConnYn: pcsCheck.max,
+      smpCirYn: pcsCheck.division,
+      coldZoneYn: managementState.coldRegionFlg,
+      useModuleItemList: useModuleItemList,
+      roofSurfaceList: roofSurfaceList,
+      pscItemList: pscItemList,
+    }
+    getPcsAutoRecommendList(params)
+  }, [])
 
   useCanvasPopupStatusController(6)
   const canvasPopupStatusState = useRecoilValue(canvasPopupStatusStore)
@@ -126,7 +181,7 @@ export default function StepUp({}) {
               {getMessage('modal.circuit.trestle.setting.step.up.allocation.select.monitor')}
             </span>
             <div className="grid-select mr10">
-              <QSelectBox title={'電力検出ユニット (モニター付き)'} options={SelectOption01} />
+              <QSelectBox title={'電力検出ユニット (モニター付き)'} />
             </div>
           </div>
         </div>

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

@@ -1,34 +1,82 @@
+import { GlobalDataContext } from '@/app/GlobalDataProvider'
+import { POLYGON_TYPE } from '@/common/common'
 import { useMessage } from '@/hooks/useMessage'
+import { canvasState } from '@/store/canvasAtom'
+import { modelState } from '@/store/circuitTrestleAtom'
+import { selectedModuleState } from '@/store/selectedModuleOptions'
+import { useContext, useEffect, useState } from 'react'
+import { useRecoilValue } from 'recoil'
+
+const DIRECTION = {
+  north: '北',
+  south: '南',
+  west: '西',
+  east: '東',
+}
 
 export default function PassivityCircuitAllocation() {
   const { getMessage } = useMessage()
-  const moduleData = {
+  const canvas = useRecoilValue(canvasState)
-    header: [
+  const selectedModules = useRecoilValue(selectedModuleState)
-      { name: getMessage('modal.panel.batch.statistic.roof.shape'), prop: 'roofShape' },
+  const { managementState, setManagementState, managementStateLoaded } = useContext(GlobalDataContext)
-      { name: getMessage('modal.circuit.trestle.setting.circuit'), prop: 'circuit' },
+  const [moduleData, setModuleData] = useState({
-      {
+    header: [],
-        name: getMessage('Q.TRON M-G2'),
+    rows: [],
-        prop: 'moduleName',
+  })
-      },
+  const model = useRecoilValue(modelState)
-      {
+  const [selectedModels, setSelectedModels] = useState(model.selectedModels)
-        name: `${getMessage('modal.panel.batch.statistic.power.generation.amount')}(kW)`,
+  const [selectedPcs, setSelectedPcs] = useState(selectedModels[0])
-        prop: 'powerGeneration',
+  const [totalWpout, setTotalWpout] = useState(0)
-      },
+
-    ],
+  useEffect(() => {
-    rows: [
+    setSurfaceInfo()
-      {
+    if (!managementState) {
-        roofShape: { name: 'M 1' },
+      setManagementState(managementStateLoaded)
-        circuit: { name: 'M 1' },
+    }
-        moduleName: { name: '8' },
+  }, [])
-        powerGeneration: { name: '3,400' },
+
-      },
+  const setSurfaceInfo = () => {
-      {
+    const surfaces = canvas.getObjects().filter((obj) => POLYGON_TYPE.MODULE_SETUP_SURFACE === obj.name)
-        roofShape: { name: 'M 1' },
+    let totalWpout = 0
-        circuit: { name: 'M 1' },
+    const rows = surfaces.map((surface) => {
-        moduleName: { name: '8' },
+      let wpOut = 0
-        powerGeneration: { name: '3,400' },
+      let moduleInfo = {}
-      },
+      surface.modules.forEach((module) => {
-    ],
+        wpOut += +module.moduleInfo.wpOut
+        if (!moduleInfo[module.moduleInfo.itemId]) moduleInfo[module.moduleInfo.itemId] = 0
+        moduleInfo[module.moduleInfo.itemId]++
+      })
+      totalWpout += wpOut
+      console.log('🚀 ~ moduleData.rows=surfaces.map ~ module:', module)
+      return {
+        roofShape: DIRECTION[surface.direction],
+        powerGeneration: wpOut.toLocaleString('ko-KR', { maximumFractionDigits: 4 }),
+        ...moduleInfo,
+      }
+    })
+
+    setTotalWpout(totalWpout)
+    // 지붕면 리스트 -> 지붕면에 있는 모듈 리스트 -> 발전량 총합 계산
+    // wpOut
+    console.log('🚀 ~ setSurfaceInfo ~ modules:', rows)
+    console.log('🚀 ~ setSurfaceInfo ~ surfaces:', surfaces)
+    setModuleData({
+      header: [
+        { name: getMessage('modal.panel.batch.statistic.roof.shape'), prop: 'roofShape' },
+        { name: getMessage('modal.circuit.trestle.setting.circuit.allocation.passivity.circuit'), prop: 'circuit' },
+        ...selectedModules.itemList.map((module) => {
+          return {
+            name: module.itemNm,
+            prop: module.itemId,
+          }
+        }),
+        {
+          name: `${getMessage('modal.panel.batch.statistic.power.generation.amount')}(kW)`,
+          prop: 'powerGeneration',
+        },
+      ],
+      rows: rows,
+    })
   }
   return (
     <>
@@ -39,26 +87,36 @@ export default function PassivityCircuitAllocation() {
             <div className="bold-font mb10">{getMessage('modal.circuit.trestle.setting.circuit.allocation.passivity')}</div>
             <div className="normal-font mb15">{getMessage('modal.circuit.trestle.setting.circuit.allocation.passivity.info')}</div>
             <div className="roof-module-table overflow-y">
-              <table>
+              {moduleData.header && (
-                <thead>
+                <table>
-                  <tr>
+                  <thead>
-                    {moduleData.header.map((header) => (
+                    <tr>
-                      <th key={header.prop}>{header.name}</th>
-                    ))}
-                  </tr>
-                </thead>
-                <tbody>
-                  {moduleData.rows.map((row, index) => (
-                    <tr key={index}>
                       {moduleData.header.map((header) => (
-                        <td className="al-c" key={header.prop}>
+                        <th key={header.prop}>{header.name}</th>
-                          {row[header.prop].name}
-                        </td>
                       ))}
                     </tr>
-                  ))}
+                  </thead>
-                </tbody>
+                  <tbody>
-              </table>
+                    {moduleData.rows.map((row, index) => (
+                      <tr key={index} className="wrong">
+                        {moduleData.header.map((header) => (
+                          <td className="al-c" key={header.prop}>
+                            {row[header.prop]}
+                          </td>
+                        ))}
+                      </tr>
+                    ))}
+                    <tr className="wrong">
+                      <td className="al-c">총합</td>
+                      {Array.from({ length: moduleData.header.length - 3 }).map((_, index) => {
+                        return <td key={index} className="al-c"></td>
+                      })}
+                      <td className="al-c">{totalWpout.toLocaleString('ko-KR', { maximumFractionDigits: 4 })}</td>
+                      <td className="al-c">{totalWpout.toLocaleString('ko-KR', { maximumFractionDigits: 4 })}</td>
+                    </tr>
+                  </tbody>
+                </table>
+              )}
             </div>
           </div>
         </div>
@@ -69,7 +127,26 @@ export default function PassivityCircuitAllocation() {
                 <div className="bold-font">{getMessage('modal.circuit.trestle.setting.circuit.allocation.passivity.selected.power.conditional')}</div>
               </div>
               <div className="hexagonal-item">
-                <div className="d-check-radio pop mb10">
+                {selectedModels.map((model, index) => (
+                  <div className="d-check-radio pop mb10">
+                    <input
+                      type="radio"
+                      name="radio01"
+                      id={`ra0${index + 1}`}
+                      checked={selectedPcs === model}
+                      onChange={() => setSelectedPcs(model)}
+                    />
+                    <label htmlFor="ra01">
+                      {model.itemNm} (
+                      {getMessage(
+                        'modal.circuit.trestle.setting.circuit.allocation.passivity.circuit.info',
+                        managementState?.coldRegionFlg === '1' ? [model.serMinQty, model.serColdZoneMaxQty] : [model.serMinQty, model.serMaxQty],
+                      )}
+                      )
+                    </label>
+                  </div>
+                ))}
+                {/* <div className="d-check-radio pop mb10">
                   <input type="radio" name="radio01" id="ra01" />
                   <label htmlFor="ra01">HQJP-KA55-5 (標準回路2枚～10枚)</label>
                 </div>
@@ -80,7 +157,7 @@ export default function PassivityCircuitAllocation() {
                 <div className="d-check-radio pop">
                   <input type="radio" name="radio01" id="ra03" />
                   <label htmlFor="ra03">HQJP-KA55-5 (標準回路2枚～10枚)</label>
-                </div>
+                </div>*/}
               </div>
             </div>
           </div>

src/components/floor-plan/modal/panelBatch/PanelBatchStatistics.jsx

@@ -3,6 +3,8 @@
 import { useState } from 'react'
 import { useMessage } from '@/hooks/useMessage'
 import WithDraggable from '@/components/common/draggable/WithDraggable'
+import { moduleStatisticsState } from '@/store/circuitTrestleAtom'
+import { useRecoilValue } from 'recoil'
 
 export default function PanelBatchStatistics() {
   const { getMessage } = useMessage()
@@ -11,6 +13,7 @@ export default function PanelBatchStatistics() {
     x: 0,
     y: 30,
   })
+  const { header, rows, footer } = useRecoilValue(moduleStatisticsState)
 
   return (
     <WithDraggable isShow={true} handle=".penal-wrap" pos={pos}>
@@ -21,14 +24,25 @@ export default function PanelBatchStatistics() {
           <table className="penal-table">
             <thead>
               <tr>
-                <th>{getMessage('modal.panel.batch.statistic.roof.shape')}</th>
+                {header.map((item) => (
-                <th>{getMessage('modal.panel.batch.statistic.power.generation.amount')} (kW)</th>
+                  <th>{item.name}</th>
+                ))}
               </tr>
             </thead>
             <tbody>
+              {rows.map((row) => (
+                <tr>
+                  {header.map((item) => (
+                    // <td>{item.prop === 'name' ? item.name : item.prop === 'powerGeneration' ? item.powerGeneration : item.amount}</td>
+                    <td>{row[item.prop]}</td>
+                  ))}
+                </tr>
+              ))}
               <tr>
-                <td>{getMessage('modal.panel.batch.statistic.total')}</td>
+                {footer.map((item) => (
-                <td className="al-r">0.000</td>
+                  <td>{item}</td>
+                  // <td className="al-r">{item.amount}</td>
+                ))}
               </tr>
             </tbody>
           </table>

src/hooks/common/useMasterController.js

@@ -4,6 +4,8 @@ import { useSwal } from '@/hooks/useSwal'
 import { getQueryString } from '@/util/common-utils'
 import { trestleRequest, constructionRequest, trestleDetailRequest } from '@/models/apiModels'
 import { POST } from '@/app/api/image-upload/route'
+import { canvasState } from '@/store/canvasAtom'
+import { useRecoilValue } from 'recoil'
 
 /**
  * 마스터 컨트롤러 훅
@@ -128,21 +130,44 @@ export function useMasterController() {
   }
 
   /**
-   * PCS 메이커, 시리즈 목록 조회
+   * 모듈 타입별 아이템 목록 조회
-   * @param {PCS 메이커코드}   pcsMkrCd
+   * @param {PCS 메이커코드}        pcsMkrCd
-   * @param {혼합모듈번호}      mixMatlNo
+   * @param {PCS시리즈코드 목록}    pcsSerList
+   * @param {모듈아이템 ID 목록}    moduleItemList
    * @returns
    */
   const getPcsModelList = async (params = null) => {
     const test = {
       pcsMkrCd: 'MKR003',
       pcsSerList: [{ pcsSerCd: 'SER007' }, { pcsSerCd: 'SER009' }, { pcsSerCd: 'SER010' }],
-      moduleItemList: [{ itemId: '107015', mixMatlNo: '' }, { itemId: '107077' }, { itemId: '107015' }],
+      moduleItemList: [
+        { itemId: '107015', mixMatlNo: null },
+        { itemId: '107077', mixMatlNo: null },
+        { itemId: '107015', mixMatlNo: null },
+      ],
     }
+
     return await post({ url: '/api/v1/master/getPcsSeriesItemList', data: test }).then((res) => {
       return res
     })
   }
+  /**
+   * 시리즈중 자동으로 추천 PCS 정보 조회
+   * @param {Max접속(과적)여부}       maxConnYn
+   * @param {동일회로도여부}          smpCirYn
+   * @param {한랭지여부}            coldZoneYn
+   * @param {사용된 모듈 아이템 List}    useModuleItemList
+   * @param {지붕면별 목록}          roofSurfaceList
+   * @param {PCS 제품 목록}          pcsItemList
+   * @returns
+   */
+  const getPcsAutoRecommendList = async (params = null) => {
+    const paramString = getQueryString(params)
+    return await post({ url: '/api/master/pcsAutoRecommendList', data: params }).then((res) => {
+      console.log('🚀🚀 ~ getPcsAutoRecommendList ~ res:', res)
+      return res
+    })
+  }
 
   return {
     getRoofMaterialList,
@@ -152,5 +177,6 @@ export function useMasterController() {
     getTrestleDetailList,
     getPcsMakerList,
     getPcsModelList,
+    getPcsAutoRecommendList,
   }
 }

src/hooks/module/useModuleBasicSetting.js

@@ -16,6 +16,7 @@ import { QLine } from '@/components/fabric/QLine'
 import { useRoofFn } from '@/hooks/common/useRoofFn'
 import { useEffect } from 'react'
 import { useMessage } from '@/hooks/useMessage'
+import { moduleStatisticsState } from '@/store/circuitTrestleAtom'
 
 export function useModuleBasicSetting() {
   const canvas = useRecoilValue(canvasState)
@@ -31,6 +32,7 @@ export function useModuleBasicSetting() {
   const [basicSetting, setBasicSettings] = useRecoilState(basicSettingState)
   const checkedModule = useRecoilValue(checkedModuleState)
   const [isManualModuleSetup, setIsManualModuleSetup] = useRecoilState(isManualModuleSetupState)
+  const [moduleStatistics, setModuleStatistics] = useRecoilState(moduleStatisticsState)
 
   useEffect(() => {
     // console.log('basicSetting', basicSetting)
@@ -1206,7 +1208,7 @@ export function useModuleBasicSetting() {
       })
 
       moduleSetupSurface.set({ modules: moduleSetupArray })
-
+      getModuleStatistics()
       // const moduleArray = [...moduleIsSetup]
       // moduleArray.push({
       //   surfaceId: moduleSetupSurface.surfaceId,
@@ -2279,6 +2281,68 @@ export function useModuleBasicSetting() {
     return isDisjoint
   }
 
+  const getModuleStatistics = () => {
+    const surfaces = canvas.getObjects().filter((obj) => POLYGON_TYPE.MODULE_SETUP_SURFACE === obj.name)
+    console.log('🚀 ~ getModuleStatistics ~ surfaces:', surfaces)
+    let totalWpout = 0
+    let moduleInfo = {}
+    const rows = surfaces.map((surface) => {
+      let wpOut = 0
+      moduleInfo = {}
+      surface.modules.forEach((module) => {
+        if (!moduleInfo[module.moduleInfo.itemId]) {
+          moduleInfo[module.moduleInfo.itemId] = { name: module.moduleInfo.itemNm, amount: 0, id: module.moduleInfo.itemId }
+        }
+        wpOut += +module.moduleInfo.wpOut
+
+        moduleInfo[module.moduleInfo.itemId].amount++
+      })
+      totalWpout += wpOut
+      console.log('🚀 ~ moduleData.rows=surfaces.map ~ module:', module)
+      const rowObject = {}
+      Object.keys(moduleInfo).forEach((key) => {
+        rowObject[key] = moduleInfo[key].amount
+      })
+      return {
+        ...rowObject, // 총 발전량 = 발전량 * 모듈 개수
+        name: canvas.getObjects().filter((obj) => obj.id === surface.parentId)[0].directionText, // 지붕면
+        // powerGeneration: wpOut.toLocaleString('ko-KR', { maximumFractionDigits: 4 }),
+        wpOut: wpOut,
+      }
+    })
+
+    console.log('🚀 ~ getModuleStatistics ~ moduleInfo:', moduleInfo)
+    const header = [
+      { name: getMessage('modal.panel.batch.statistic.roof.shape'), prop: 'name' },
+      ...Object.keys(moduleInfo).map((key) => {
+        return { name: moduleInfo[key].name, prop: key }
+      }),
+      { name: `${getMessage('modal.panel.batch.statistic.power.generation.amount')}(kW)`, prop: 'wpOut' },
+    ]
+    let footer = ['합계']
+    let footerData = {}
+    rows.forEach((row) => {
+      Object.keys(moduleInfo).map((key) => {
+        if (!footerData[key]) footerData[key] = 0
+        footerData[key] += row[key]
+      })
+    })
+    Object.keys(footerData).forEach((key) => {
+      footer.push(footerData[key])
+    })
+    footer.push(totalWpout)
+    // const footer = [
+    //   '합계',
+    //   ...Object.keys(moduleInfo).map((key) => {
+    //     return { name: moduleInfo[key].name, prop: moduleInfo[key] }
+    //   }),
+    //   totalWpout,
+    // ]
+    // const footer = []
+    console.log('@@@@@@@@@@', header, rows, footer)
+    setModuleStatistics({ header: header, rows, footer: footer })
+  }
+
   return {
     makeModuleInstArea,
     manualModuleSetup,

src/hooks/usePlan.js

@@ -374,6 +374,7 @@ export function usePlan(params = {}) {
    * plan 조회
    */
   const loadCanvasPlanData = async (userId, objectNo, planNo) => {
+    console.log('🚀 ~ loadCanvasPlanData ~ userId, objectNo, planNo:', userId, objectNo, planNo)
     await getCanvasByObjectNo(userId, objectNo).then((res) => {
       if (res.length > 0) {
         setPlans(res)

src/locales/ja.json

@@ -141,9 +141,11 @@
   "modal.circuit.trestle.setting.circuit.allocation": "回路割り当て",
   "modal.circuit.trestle.setting.circuit.allocation.auto": "自動回路割り当て",
   "modal.circuit.trestle.setting.circuit.allocation.passivity": "手動回路割当",
+  "modal.circuit.trestle.setting.circuit.allocation.passivity.circuit": "回路",
   "modal.circuit.trestle.setting.circuit.allocation.passivity.info": "同じ回路のモジュールを選択状態にした後、 [番号確認]ボタンを押すと番号が割り当てられます。",
   "modal.circuit.trestle.setting.circuit.allocation.passivity.selected.power.conditional": "選択したパワーコンディショナー",
   "modal.circuit.trestle.setting.circuit.allocation.passivity.circuit.num": "設定する回路番号 (1~)",
+  "modal.circuit.trestle.setting.circuit.allocation.passivity.circuit.info": "標準回路{0}枚～{1}枚",
   "modal.circuit.trestle.setting.circuit.allocation.passivity.selected.power.conditional.reset": "選択されたパワーコンディショナーの回路番号の初期化",
   "modal.circuit.trestle.setting.circuit.allocation.passivity.all.power.conditional.reset": "すべての回路番号の初期化",
   "modal.circuit.trestle.setting.circuit.allocation.passivity.circuit.num.fix": "番号確定",

src/locales/ko.json

@@ -145,9 +145,11 @@
   "modal.circuit.trestle.setting.circuit.allocation": "회로 할당",
   "modal.circuit.trestle.setting.circuit.allocation.auto": "자동 회로 할당",
   "modal.circuit.trestle.setting.circuit.allocation.passivity": "수동 회로 할당",
+  "modal.circuit.trestle.setting.circuit.allocation.passivity.circuit": "회로",
   "modal.circuit.trestle.setting.circuit.allocation.passivity.info": "동일한 회로의 모듈을 선택 상태로 만든 후 [번호 확정] 버튼을 누르면 번호가 할당됩니다.",
   "modal.circuit.trestle.setting.circuit.allocation.passivity.selected.power.conditional": "선택된 파워컨디셔너",
   "modal.circuit.trestle.setting.circuit.allocation.passivity.circuit.num": "설정할 회로번호(1~)",
+  "modal.circuit.trestle.setting.circuit.allocation.passivity.circuit.info": "표준회로{0}장～{1}장",
   "modal.circuit.trestle.setting.circuit.allocation.passivity.selected.power.conditional.reset": "선택된 파워컨디셔너의 회로번호 초기화",
   "modal.circuit.trestle.setting.circuit.allocation.passivity.all.power.conditional.reset": "모든 회로번호 초기화",
   "modal.circuit.trestle.setting.circuit.allocation.passivity.circuit.num.fix": "번호 확정",

src/store/circuitTrestleAtom.js

@@ -1,3 +1,4 @@
+import { useMessage } from '@/hooks/useMessage'
 import { atom } from 'recoil'
 
 export const makerState = atom({
@@ -15,3 +16,23 @@ export const modelState = atom({
   key: 'modelState',
   default: { models: [], selectedModels: [] },
 })
+
+export const pcsCheckState = atom({
+  key: 'divisionCircuitState',
+  default: { division: true, max: false },
+})
+
+export const moduleStatisticsState = atom({
+  key: 'moduleStatisticsState',
+  default: {
+    header: [
+      { name: '지붕면', prop: 'name' },
+      { name: `발전량(kW)`, prop: 'amount' },
+    ],
+    rows: [],
+    footer: [
+      { name: '합계', prop: 'name' },
+      { name: `발전량(kW)`, prop: 'amount' },
+    ],
+  },
+})