회로. 가대 설정 개발중

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

@@ -12,12 +12,15 @@ 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'
 
+import { selectedModuleState } from '@/store/selectedModuleOptions'
+
 const ALLOCATION_TYPE = {
   AUTO: 'auto',
   PASSIVITY: 'passivity',
@@ -29,36 +32,21 @@ export default function CircuitTrestleSetting({ id }) {
   // 탭 번호 2: 회로 할당
   const [tabNum, setTabNum] = useState(1)
   const [allocationType, setAllocationType] = useState(ALLOCATION_TYPE.AUTO)
+
+  const [makers, setMakers] = useState([])
+  const [series, setSeries] = useState([])
+  const [model, setModel] = useRecoilState(modelState)
+  const [selectedModels, setSelectedModels] = useState(model.selectedModels)
+  const [models, setModels] = useState(model.models)
+  const [selectedMaker, setSelectedMaker] = 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()
-
-  const apply = () => {
-    closePopup(id)
-  }
-
-  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 = {
@@ -72,6 +60,76 @@ 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)
+  }
+
+  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`}>
@@ -94,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,6 +1,11 @@
+import { GlobalDataContext } from '@/app/GlobalDataProvider'
 import QSelectBox from '@/components/common/select/QSelectBox'
 import { useMessage } from '@/hooks/useMessage'
-import { useState } from 'react'
+import { canvasState } from '@/store/canvasAtom'
+import { modelState, pcsCheckState } from '@/store/circuitTrestleAtom'
+import { selectedModuleState } from '@/store/selectedModuleOptions'
+import { useContext, useState } from 'react'
+import { useRecoilState } from 'recoil'
 
 const SelectOption01 = [{ name: '0' }, { name: '0' }, { name: '0' }, { name: '0' }]
 
@@ -8,6 +13,58 @@ 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)
+  }, [])
+
   return (
     <>
       <div className="properties-setting-wrap outer">

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

@@ -1,15 +1,22 @@
 import { useMessage } from '@/hooks/useMessage'
+import { modelState } from '@/store/circuitTrestleAtom'
+import { selectedModuleState } from '@/store/selectedModuleOptions'
+import { useEffect, useState } from 'react'
+import { useRecoilValue } from 'recoil'
 
 export default function PassivityCircuitAllocation() {
   const { getMessage } = useMessage()
+  const selectedModules = useRecoilValue(selectedModuleState)
   const moduleData = {
     header: [
       { name: getMessage('modal.panel.batch.statistic.roof.shape'), prop: 'roofShape' },
-      { name: getMessage('modal.circuit.trestle.setting.circuit'), prop: 'circuit' },
+      { name: getMessage('modal.circuit.trestle.setting.circuilt'), prop: 'circuit' },
-      {
+      ...selectedModules.itemList.map((module) => {
-        name: getMessage('Q.TRON M-G2'),
+        return {
-        prop: 'moduleName',
+          name: module.itemNm,
-      },
+          prop: 'moduleName',
+        }
+      }),
       {
         name: `${getMessage('modal.panel.batch.statistic.power.generation.amount')}(kW)`,
         prop: 'powerGeneration',
@@ -30,6 +37,12 @@ export default function PassivityCircuitAllocation() {
       },
     ],
   }
+  const model = useRecoilValue(modelState)
+  const [selectedModels, setSelectedModels] = useState(model.selectedModels)
+  const [selectedPcs, setSelectedPcs] = useState(selectedModels[0])
+  useEffect(() => {
+    console.log('🚀 ~ useEffect ~ selectedPcs:', selectedPcs)
+  }, [selectedPcs])
   return (
     <>
       <div className="properties-setting-wrap outer">
@@ -69,7 +82,19 @@ 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} (標準回路2枚～10枚)</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 +105,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/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'
 
 /**
  * 마스터 컨트롤러 훅
@@ -130,21 +132,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,
@@ -154,5 +179,6 @@ export function useMasterController() {
     getTrestleDetailList,
     getPcsMakerList,
     getPcsModelList,
+    getPcsAutoRecommendList,
   }
 }

src/store/circuitTrestleAtom.js

@@ -15,3 +15,8 @@ export const modelState = atom({
   key: 'modelState',
   default: { models: [], selectedModels: [] },
 })
+
+export const pcsCheckState = atom({
+  key: 'divisionCircuitState',
+  default: { division: true, max: false },
+})