자동 회로할당 개발중

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

@@ -11,12 +11,13 @@ import { correntObjectNoState } from '@/store/settingAtom'
 import { useRecoilValue } from 'recoil'
 import { GlobalDataContext } from '@/app/GlobalDataProvider'
 import { useRecoilState } from 'recoil'
-import { makersState, modelsState, modelState, pcsCheckState, selectedMakerState, seriesState } from '@/store/circuitTrestleAtom'
+import { makersState, modelsState, modelState, pcsCheckState, selectedMakerState, selectedModelsState, seriesState } from '@/store/circuitTrestleAtom'
 import { POLYGON_TYPE } from '@/common/common'
 import { useSwal } from '@/hooks/useSwal'
 import { canvasState } from '@/store/canvasAtom'
 
 import { useTrestle } from '@/hooks/module/useTrestle'
+import { selectedModuleState } from '@/store/selectedModuleOptions'
 
 const ALLOCATION_TYPE = {
   AUTO: 'auto',
@@ -33,12 +34,15 @@ export default function CircuitTrestleSetting({ id }) {
   const [selectedMaker, setSelectedMaker] = useRecoilState(selectedMakerState)
   const [series, setSeries] = useRecoilState(seriesState)
   const [models, setModels] = useRecoilState(modelsState)
+  const [selectedModels, setSelectedModels] = useRecoilState(selectedModelsState)
   const [pcsCheck, setPcsCheck] = useRecoilState(pcsCheckState)
 
   const [tabNum, setTabNum] = useState(1)
   const [allocationType, setAllocationType] = useState(ALLOCATION_TYPE.AUTO)
   const [circuitAllocationType, setCircuitAllocationType] = useState(1)
-
+  const { managementState, setManagementState, managementStateLoaded } = useContext(GlobalDataContext)
+  const selectedModules = useRecoilValue(selectedModuleState)
+  const { getPcsAutoRecommendList } = useMasterController()
   const powerConditionalSelectProps = {
     tabNum,
     setTabNum,
@@ -50,6 +54,9 @@ export default function CircuitTrestleSetting({ id }) {
     setSeries,
     models,
     setModels,
+    selectedModels,
+    setSelectedModels,
+    managementState,
   }
 
   const passivityProps = {
@@ -67,19 +74,78 @@ export default function CircuitTrestleSetting({ id }) {
     setCircuitAllocationType,
   }
 
+  useEffect(() => {
+    if (!managementState) {
+      setManagementState(managementStateLoaded)
+    }
+  }, [])
+
+  const onAutoRecommend = () => {
+    if (series.filter((s) => s.selected).length === 0) {
+      swalFire({
+        title: '시리즈를 선택해 주세요.',
+        type: 'alert',
+      })
+      return
+    }
+    const roofSurfaceList = canvas
+      .getObjects()
+      .filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE)
+      .map((obj) => {
+        return {
+          roofSurfaceId: obj.id,
+          roofSurface: canvas
+            .getObjects()
+            .filter((o) => o.id === obj.parentId)[0]
+            .directionText.replace(/[0-9]/g, ''),
+          roofSurfaceIncl: canvas.getObjects().filter((o) => o.id === obj.parentId)[0].roofMaterial.pitch,
+          moduleList: obj.modules.map((module) => {
+            return {
+              itemId: module.moduleInfo.itemId,
+            }
+          }),
+        }
+      })
+
+    const params = {
+      maxConnYn: pcsCheck.max ? 'Y' : 'N',
+      smpCirYn: pcsCheck.division ? 'Y' : 'N',
+      coldZoneYn: managementState?.coldRegionFlg === '1' ? 'Y' : 'N',
+      useModuleItemList: selectedModules.itemList.map((m) => {
+        return {
+          itemId: m.itemId,
+          mixMatlNo: m.mixMatlNo,
+        }
+      }),
+      roofSurfaceList: roofSurfaceList,
+      pcsItemList: models.map((model) => {
+        return {
+          itemId: model.itemId,
+          pcsMkrCd: model.pcsMkrCd,
+          pcsSerCd: model.pcsSerCd,
+        }
+      }),
+    }
+    getPcsAutoRecommendList(params).then((res) => {
+      if (res.data?.pcsItemList) {
+        setModels(res.data.pcsItemList)
+        setTabNum(2)
+      } else {
+        swalFire({
+          title: '파워컨디셔너를 추가해 주세요.',
+          type: 'alert',
+        })
+      }
+    })
+  }
+
   const onAutoAllocation = () => {
     let moduleStdQty = 0
     let moduleMaxQty = 0
     const selectedModels = models.filter((m) => m.selected)
 
     if (selectedModels.length === 0) {
-      moduleStdQty = models.reduce((acc, model) => {
+      onAutoRecommend()
-        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)

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

@@ -13,9 +13,23 @@ import { useRecoilValue } from 'recoil'
 import { v4 as uuidv4 } from 'uuid'
 
 export default function PowerConditionalSelect(props) {
-  let { tabNum, setTabNum, makers, setMakers, selectedMaker, setSelectedMaker, series, setSeries, models, setModels } = props
+  let {
+    tabNum,
+    setTabNum,
+    makers,
+    setMakers,
+    selectedMaker,
+    setSelectedMaker,
+    series,
+    setSeries,
+    models,
+    setModels,
+    selectedModels,
+    setSelectedModels,
+    managementState,
+  } = props
   const [pcsCheck, setPcsCheck] = useRecoilState(pcsCheckState)
-  const { managementState, setManagementState, managementStateLoaded } = useContext(GlobalDataContext)
+
   const { getMessage } = useMessage()
   const [selectedRow, setSelectedRow] = useState(null)
   const globalLocale = useRecoilValue(globalLocaleStore)
@@ -47,54 +61,49 @@ export default function PowerConditionalSelect(props) {
   ]
 
   useEffect(() => {
-    console.log('series', series)
-    console.log('models', models)
     if (makers.length === 0) {
       getPcsMakerList().then((res) => {
         setMakers(res.data)
       })
     }
-    console.log('🚀 ~ useEffect ~ selectedModules:', selectedModules)
-    if (!managementState) {
-      setManagementState(managementStateLoaded)
-    }
-    // promiseGet({ url: `/api/object/${correntObjectNo}/detail` }).then((res) => {
-    //   console.log('🚀 ~ useEffect ~ /api/object/${correntObjectNo}/detail:', res)
-    //   // coldRegionFlg-한랭지사양, conType// 계약조건(잉여~,전량)
-    // })
-    // return () => {
-    //   console.log('🚀 ~ useEffect ~ PowerConditionalSelect unmount:', makers, selectedMaker)
-    //   setMakerData({ makers, selectedMaker })
-    //   setSeries({ series: seriesList, selectedSeries })
-    //   setModels({ models, selectedModels })
-    // }
   }, [])
 
-  useEffect(() => {
+  const checkValidation = () => {
-    console.log('🚀 ~ PowerConditionalSelect ~ selectedMaker:', selectedMaker)
+    const checkedSeries = series.filter((s) => s.selected)
-    if (selectedMaker) {
+    if (checkedSeries.length === 0) {
-      setModels(null)
+      swalFire({
-      if (series.length === 0)
+        title: 'PCS 시리즈를 선택해 주세요.',
-        getPcsMakerList(selectedMaker).then((res) => {
+        icon: 'warning',
-          setSeries(
-            res.data.map((series) => {
-              // return { ...series, selected: isNullOrUndefined(series.selected) ? false : series.selected }
-              return { ...series, selected: false }
-            }),
-          )
-        })
-    }
-  }, [selectedMaker])
-
-  useEffect(() => {
-    console.log('🚀 ~ useEffect ~ series:', series)
-    if (series.filter((s) => s.selected).length === 0) return
-    const pcsMkrCd = series.filter((s) => s.selected)[0]?.pcsMkrCd
-    const pcsSerList = series
-      .filter((series) => series.selected)
-      .map((series) => {
-        return { pcsSerCd: series.pcsSerCd }
       })
+      return false
+    } else if (checkedSeries.length === 1) {
+      if (checkedSeries[0].pcsMkrMultiType === 'SINGLE-P' && checkedSeries[0].pcsSerParallelYn === 'Y') {
+        swalFire({
+          title: '병설은 단독으로 안 됨',
+          icon: 'warning',
+        })
+      }
+      return false
+    }
+    return true
+  }
+
+  const onCheckSeries = (data) => {
+    const copySeries = series.map((s) => {
+      return {
+        ...s,
+        selected: s.pcsSerCd === data.pcsSerCd ? !s.selected : s.selected,
+      }
+    })
+    setSeries(copySeries)
+    handleSetmodels(copySeries.filter((s) => s.selected))
+  }
+
+  const handleSetmodels = (series) => {
+    const pcsMkrCd = series[0]?.pcsMkrCd
+    const pcsSerList = series.map((series) => {
+      return { pcsSerCd: series.pcsSerCd }
+    })
     const moduleItemList = selectedModules.itemList?.map((module) => {
       return {
         itemId: module.itemId,
@@ -103,7 +112,6 @@ export default function PowerConditionalSelect(props) {
     })
     getPcsModelList({ pcsMkrCd, pcsSerList, moduleItemList }).then((res) => {
       if (res?.result.code === 200 && res?.data) {
-        console.log('🚀 ~ useEffect ~ res:', res.data)
         setModels(
           res.data.map((model) => {
             return {
@@ -111,21 +119,20 @@ export default function PowerConditionalSelect(props) {
               moduleStdQty: parseInt(model.moduleStdQty),
               moduleMaxQty: parseInt(model.moduleMaxQty),
               code: uuidv4(),
-              selected: false,
             }
           }),
         )
+        return
       }
-    })
-  }, [series])
 
-  const onCheckSeries = (series) => {
+      setModels([])
-    setSeries((prev) => prev.map((s) => ({ ...s, selected: s.pcsSerCd === series.pcsSerCd ? !s.selected : s.selected })))
+      setSelectedModels([])
+    })
   }
 
   const onAddSelectedModel = () => {
     if (selectedRow === null) return
-    if (models.filter((m) => m.selected).length === 3) {
+    if (selectedModels.length === 3) {
       swalFire({
         title: '최대 3개까지 선택할 수 있습니다.',
         icon: 'warning',
@@ -133,41 +140,29 @@ export default function PowerConditionalSelect(props) {
 
       return
     }
-    setModels(
+    setSelectedModels([...selectedModels, selectedRow])
-      models.map((model) => {
-        if (model.code === selectedRow.code) {
-          return {
-            ...model,
-            selected: true,
-          }
-        }
-        return {
-          ...model,
-        }
-      }),
-    )
     setSelectedRow(null)
   }
 
   const onRemoveSelectedModel = (model) => {
-    // setSelectedModels(selectedModels.filter((m) => m.code !== model.code))
     setModels(models.map((m) => ({ ...m, selected: m.code !== model.code ? m.selected : false })))
   }
 
-  // useEffect(() => {
+  const onChangeMaker = (option) => {
-  //   console.log('🚀 ~ useEffect ~ selectedModels:', selectedModels)
+    if (option) {
-  //   const selectedModelsIds = selectedModels.map((model) => model.code)
+      setModels(null)
+      setSelectedMaker(option)
+
+      getPcsMakerList(option).then((res) => {
+        setSeries(
+          res.data.map((series) => {
+            return { ...series, selected: false }
+          }),
+        )
+      })
+    }
+  }
 
-  //   setModels(
-  //     models.map((model) => {
-  //       return {
-  //         ...model,
-  //         selected: selectedModelsIds.includes(model.code),
-  //       }
-  //     }),
-  //   )
-  //   setModel({ ...model, selectedModels: selectedModels })
-  // }, [selectedModels])
   return (
     <>
       <div className="outline-form mb15">
@@ -182,7 +177,7 @@ export default function PowerConditionalSelect(props) {
             sourceKey="pcsMkrCd"
             targetKey="pcsMkrCd"
             value={selectedMaker}
-            onChange={(option) => setSelectedMaker(option)}
+            onChange={(option) => onChangeMaker(option)}
           />
         </div>
         {managementState?.coldRegionFlg === '1' && (
@@ -194,7 +189,7 @@ export default function PowerConditionalSelect(props) {
           <div className="circuit-check-inner overflow">
             {series?.map((series, index) => (
               <div className="d-check-box pop sel">
-                <input type="checkbox" id={`"ch0"${index}`} onClick={() => onCheckSeries(series)} checked={series.selected} />
+                <input type="checkbox" id={`"ch0"${index}`} onChange={() => onCheckSeries(series)} checked={series.selected} />
                 <label htmlFor={`"ch0"${index}`}>{globalLocale === 'ko' ? series.pcsSerNm : series.pcsSerNmJp}</label>
               </div>
             ))}
@@ -216,15 +211,13 @@ export default function PowerConditionalSelect(props) {
                   </tr>
                 </thead>
                 <tbody>
-                  {models
+                  {models?.map((model, index) => (
-                    ?.filter((model) => !model.selected)
+                    <tr key={index} onClick={() => setSelectedRow(model)} className={model === selectedRow ? 'on' : ''}>
-                    .map((model, index) => (
+                      {modelHeader.map((header) => (
-                      <tr key={index} onClick={() => setSelectedRow(model)} className={model === selectedRow ? 'on' : ''}>
+                        <td>{model[header.prop]}</td>
-                        {modelHeader.map((header) => (
+                      ))}
-                          <td>{model[header.prop]}</td>
+                    </tr>
-                        ))}
+                  ))}
-                      </tr>
-                    ))}
                 </tbody>
               </table>
             </div>
@@ -235,13 +228,11 @@ export default function PowerConditionalSelect(props) {
             </button>
           </div>
           <div className="circuit-data-form">
-            {models
+            {selectedModels?.map((model) => (
-              ?.filter((m) => m.selected)
+              <span className="normal-font">
-              ?.map((model) => (
+                {model.itemNm} <button className="del" onClick={() => onRemoveSelectedModel(model)}></button>
-                <span className="normal-font">
+              </span>
-                  {model.itemNm} <button className="del" onClick={() => onRemoveSelectedModel(model)}></button>
+            ))}
-                </span>
-              ))}
           </div>
         </div>
       </div>

src/hooks/common/useMasterController.js

@@ -162,8 +162,7 @@ export function useMasterController() {
    * @returns
    */
   const getPcsAutoRecommendList = async (params = null) => {
-    const paramString = getQueryString(params)
+    return await post({ url: '/api/v1/master/getPcsAutoRecommendList', data: params }).then((res) => {
-    return await post({ url: '/api/master/pcsAutoRecommendList', data: params }).then((res) => {
       console.log('🚀🚀 ~ getPcsAutoRecommendList ~ res:', res)
       return res
     })

src/store/circuitTrestleAtom.js

@@ -17,16 +17,16 @@ export const seriesState = atom({
   default: [],
 })
 
-export const selectedSeriesState = atom({
-  key: 'selectedSeriesState',
-  default: null,
-})
-
 export const modelsState = atom({
   key: 'modelState',
   default: [],
 })
 
+export const selectedModelsState = atom({
+  key: 'selectedModelsState',
+  default: [],
+})
+
 export const pcsCheckState = atom({
   key: 'divisionCircuitState',
   default: { division: true, max: false },