자동 회로할당 개발중

2025-01-21 11:07:47 +09:00 · 2025-01-21 11:07:47 +09:00 · fd8045aa8f
commit fd8045aa8f
parent b34c30fbba
5 changed files with 98 additions and 96 deletions
--- a/src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx
+++ b/src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx
@ -6,14 +6,12 @@ import StepUp from '@/components/floor-plan/modal/circuitTrestle/step/StepUp'
 import { useMessage } from '@/hooks/useMessage'
 import { usePopup } from '@/hooks/usePopup'
 import PassivityCircuitAllocation from './step/type/PassivityCircuitAllocation'
-import { useAxios } from '@/hooks/useAxios'
 import { useMasterController } from '@/hooks/common/useMasterController'
-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 { modelState, pcsCheckState, powerConditionalState } from '@/store/circuitTrestleAtom'
+import { makersState, modelsState, modelState, pcsCheckState, selectedMakerState, seriesState } from '@/store/circuitTrestleAtom'
 import { POLYGON_TYPE } from '@/common/common'
 import { useSwal } from '@/hooks/useSwal'
 import { canvasState } from '@/store/canvasAtom'
@ -27,30 +25,31 @@ const ALLOCATION_TYPE = {
 export default function CircuitTrestleSetting({ id }) {
  const { getMessage } = useMessage()
  const { closePopup } = usePopup()
-  // 탭 번호 1: 파워 컨디셔너 선택(+수동 설정)
-  // 탭 번호 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 canvas = useRecoilValue(canvasState)
+
+  const [makers, setMakers] = useRecoilState(makersState)
+  const [selectedMaker, setSelectedMaker] = useRecoilState(selectedMakerState)
+  const [series, setSeries] = useRecoilState(seriesState)
+  const [models, setModels] = useRecoilState(modelsState)
+  const [pcsCheck, setPcsCheck] = useRecoilState(pcsCheckState)
+
+  const [tabNum, setTabNum] = useState(1)
+  const [allocationType, setAllocationType] = useState(ALLOCATION_TYPE.AUTO)
  const [circuitAllocationType, setCircuitAllocationType] = useState(1)

  const powerConditionalSelectProps = {
    tabNum,
    setTabNum,
+    makers,
+    setMakers,
+    selectedMaker,
+    setSelectedMaker,
+    series,
+    setSeries,
+    models,
+    setModels,
  }
  const circuitProps = {
    tabNum,
@ -59,11 +58,6 @@ export default function CircuitTrestleSetting({ id }) {
    setCircuitAllocationType,
  }

-  useEffect(() => {
-    console.log('🚀 ~ CircuitTrestleSetting ~ model:', model)
-    setSelectedModels(model.selectedModels)
-  }, [model])
-
  const onAutoAllocation = () => {
    let moduleStdQty = 0
    let moduleMaxQty = 0
@ -100,14 +94,16 @@ export default function CircuitTrestleSetting({ id }) {
  }

  const onPassivityAllocation = () => {
-    console.log('🚀 ~ onPassivityAllocation ~ selectedModels:', model)
-    if (selectedModels.length === 0) {
+    console.log('🚀 ~ onPassivityAllocation ~ selectedModels:', models)
+
+    if (models.filter((m) => m.selected).length === 0) {
      swalFire({
        title: '파워 컨디셔너를 추가해 주세요.',
        type: 'alert',
      })
      return
    } else if (pcsCheck.max) {
+      const selectedModels = models.filter((m) => m.selected)
      const moduleStdQty = selectedModels.reduce((acc, model) => {
        return acc + parseInt(model.moduleStdQty)
      }, 0)
--- a/src/components/floor-plan/modal/circuitTrestle/step/PowerConditionalSelect.jsx
+++ b/src/components/floor-plan/modal/circuitTrestle/step/PowerConditionalSelect.jsx
@ -1,28 +1,18 @@
 import { GlobalDataContext } from '@/app/GlobalDataProvider'
 import QSelectBox from '@/components/common/select/QSelectBox'
 import { useMasterController } from '@/hooks/common/useMasterController'
-import { useEvent } from '@/hooks/useEvent'
 import { useMessage } from '@/hooks/useMessage'
 import { useSwal } from '@/hooks/useSwal'
-import { makerState, modelState, pcsCheckState, seriesState } from '@/store/circuitTrestleAtom'
+import { pcsCheckState } from '@/store/circuitTrestleAtom'
 import { globalLocaleStore } from '@/store/localeAtom'
-import { moduleSelectionDataState, selectedModuleState } from '@/store/selectedModuleOptions'
+import { selectedModuleState } from '@/store/selectedModuleOptions'
 import { useContext, useEffect, useState } from 'react'
 import { useRecoilState } from 'recoil'
 import { useRecoilValue } from 'recoil'
 import { v4 as uuidv4 } from 'uuid'

 export default function PowerConditionalSelect(props) {
-  let { tabNum, setTabNum } = props
-  const [makerData, setMakerData] = useRecoilState(makerState)
-  const [makers, setMakers] = useState(makerData.makers)
-  const [selectedMaker, setSelectedMaker] = useState(makerData.selectedMaker)
-  const [series, setSeries] = useRecoilState(seriesState)
-  const [seriesList, setSeriesList] = useState(series.series)
-  const [selectedSeries, setSelectedSeries] = useState(series.selectedSeries)
-  const [model, setModel] = useRecoilState(modelState)
-  const [models, setModels] = useState(model.models)
-  const [selectedModels, setSelectedModels] = useState(model.selectedModels)
+  let { tabNum, setTabNum, makers, setMakers, selectedMaker, setSelectedMaker, series, setSeries, models, setModels } = props
  const [pcsCheck, setPcsCheck] = useRecoilState(pcsCheckState)
  const { managementState, setManagementState, managementStateLoaded } = useContext(GlobalDataContext)
  const { getMessage } = useMessage()
@ -69,20 +59,20 @@ export default function PowerConditionalSelect(props) {
    //   console.log('🚀 ~ useEffect ~ /api/object/${correntObjectNo}/detail:', res)
    //   // coldRegionFlg-한랭지사양, conType// 계약조건(잉여~,전량)
    // })
-    return () => {
-      setMakerData({ makers, selectedMaker })
-      setSeries({ series: seriesList, selectedSeries })
-      setModel({ models, selectedModels })
-    }
+    // return () => {
+    //   console.log('🚀 ~ useEffect ~ PowerConditionalSelect unmount:', makers, selectedMaker)
+    //   setMakerData({ makers, selectedMaker })
+    //   setSeries({ series: seriesList, selectedSeries })
+    //   setModels({ models, selectedModels })
+    // }
  }, [])

  useEffect(() => {
    console.log('🚀 ~ PowerConditionalSelect ~ selectedMaker:', selectedMaker)
    if (selectedMaker) {
-      setSelectedModels([])
-      setModels([])
+      setModels(null)
      getPcsMakerList(selectedMaker).then((res) => {
-        setSeriesList(
+        setSeries(
          res.data.map((series) => {
            return { ...series, selected: false }
          }),
@ -92,9 +82,9 @@ export default function PowerConditionalSelect(props) {
  }, [selectedMaker])

  useEffect(() => {
-    if (seriesList.filter((series) => series.selected).length === 0) return
-    const pcsMkrCd = seriesList.filter((series) => series.selected)[0]?.pcsMkrCd
-    const pcsSerList = seriesList
+    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 }
@ -106,7 +96,7 @@ export default function PowerConditionalSelect(props) {
      }
    })
    getPcsModelList({ pcsMkrCd, pcsSerList, moduleItemList }).then((res) => {
-      if (res?.result.code === 200) {
+      if (res?.result.code === 200 && res?.data) {
        console.log('🚀 ~ useEffect ~ res:', res.data)
        setModels(
          res.data.map((model) => {
@ -121,23 +111,15 @@ export default function PowerConditionalSelect(props) {
        )
      }
    })
-  }, [seriesList])
-
-  useEffect(() => {
-    console.log('🚀 ~ useEffect ~ models:', models)
-  }, [models])
-
-  useEffect(() => {
-    console.log('🚀 ~ useEffect ~ pcsCheck:', pcsCheck)
-  }, [pcsCheck])
+  }, [series])

  const onCheckSeries = (series) => {
-    setSeriesList((prev) => prev.map((s) => ({ ...s, selected: s.pcsSerCd === series.pcsSerCd ? !s.selected : s.selected })))
+    setSeries((prev) => prev.map((s) => ({ ...s, selected: s.pcsSerCd === series.pcsSerCd ? !s.selected : s.selected })))
  }

  const onAddSelectedModel = () => {
    if (selectedRow === null) return
-    if (selectedModels.length === 3) {
+    if (models.filter((m) => m.selected).length === 3) {
      swalFire({
        title: '최대 3개까지 선택할 수 있습니다.',
        icon: 'warning',
@ -145,28 +127,41 @@ export default function PowerConditionalSelect(props) {

      return
    }
-    setSelectedModels([...selectedModels, selectedRow])
+    setModels(
+      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))
+    // setSelectedModels(selectedModels.filter((m) => m.code !== model.code))
+    setModels(models.map((m) => ({ ...m, selected: m.code !== model.code ? m.selected : false })))
  }

-  useEffect(() => {
-    console.log('🚀 ~ useEffect ~ selectedModels:', selectedModels)
-    const selectedModelsIds = selectedModels.map((model) => model.code)
+  // useEffect(() => {
+  //   console.log('🚀 ~ useEffect ~ selectedModels:', selectedModels)
+  //   const selectedModelsIds = selectedModels.map((model) => model.code)

-    setModels(
-      models.map((model) => {
-        return {
-          ...model,
-          selected: selectedModelsIds.includes(model.code),
-        }
-      }),
-    )
-    setModel({ ...model, selectedModels: selectedModels })
-  }, [selectedModels])
+  //   setModels(
+  //     models.map((model) => {
+  //       return {
+  //         ...model,
+  //         selected: selectedModelsIds.includes(model.code),
+  //       }
+  //     }),
+  //   )
+  //   setModel({ ...model, selectedModels: selectedModels })
+  // }, [selectedModels])
  return (
    <>
      <div className="outline-form mb15">
@ -191,7 +186,7 @@ export default function PowerConditionalSelect(props) {
      <div className="module-table-box mb10">
        <div className="module-table-inner">
          <div className="circuit-check-inner overflow">
-            {seriesList?.map((series, index) => (
+            {series?.map((series, index) => (
              <div className="d-check-box pop sel">
                <input type="checkbox" id={`"ch0"${index}`} onClick={() => onCheckSeries(series)} checked={series.selected} />
                <label htmlFor={`"ch0"${index}`}>{globalLocale === 'ko' ? series.pcsSerNm : series.pcsSerNmJp}</label>
@ -234,11 +229,13 @@ export default function PowerConditionalSelect(props) {
            </button>
          </div>
          <div className="circuit-data-form">
-            {selectedModels?.map((model) => (
-              <span className="normal-font">
-                {model.itemNm} <button className="del" onClick={() => onRemoveSelectedModel(model)}></button>
-              </span>
-            ))}
+            {models
+              ?.filter((m) => m.selected)
+              ?.map((model) => (
+                <span className="normal-font">
+                  {model.itemNm} <button className="del" onClick={() => onRemoveSelectedModel(model)}></button>
+                </span>
+              ))}
          </div>
        </div>
      </div>
--- a/src/components/floor-plan/modal/circuitTrestle/step/type/PassivityCircuitAllocation.jsx
+++ b/src/components/floor-plan/modal/circuitTrestle/step/type/PassivityCircuitAllocation.jsx
@ -2,7 +2,7 @@ import { GlobalDataContext } from '@/app/GlobalDataProvider'
 import { POLYGON_TYPE } from '@/common/common'
 import { useMessage } from '@/hooks/useMessage'
 import { canvasState } from '@/store/canvasAtom'
-import { modelState, moduleStatisticsState } from '@/store/circuitTrestleAtom'
+import { modelState } from '@/store/circuitTrestleAtom'
 import { selectedModuleState } from '@/store/selectedModuleOptions'
 import { useContext, useEffect, useState } from 'react'
 import { useRecoilValue } from 'recoil'
@ -19,16 +19,15 @@ export default function PassivityCircuitAllocation() {
  const canvas = useRecoilValue(canvasState)
  const selectedModules = useRecoilValue(selectedModuleState)
  const { managementState, setManagementState, managementStateLoaded } = useContext(GlobalDataContext)
-  const { header, rows, footer } = useRecoilValue(moduleStatisticsState)
  const [moduleData, setModuleData] = useState({
-    header: header,
-    rows: rows,
-    footer: footer,
+    header: [],
+    rows: [],
  })
  const model = useRecoilValue(modelState)
  const [selectedModels, setSelectedModels] = useState(model.selectedModels)
  const [selectedPcs, setSelectedPcs] = useState(selectedModels[0])
  const [totalWpout, setTotalWpout] = useState(0)
+
  useEffect(() => {
    setSurfaceInfo()
    if (!managementState) {
--- a/src/hooks/common/useMasterController.js
+++ b/src/hooks/common/useMasterController.js
@ -147,7 +147,7 @@ export function useMasterController() {
      ],
    }

-    return await post({ url: '/api/v1/master/getPcsSeriesItemList', data: test }).then((res) => {
+    return await post({ url: '/api/v1/master/getPcsSeriesItemList', data: params }).then((res) => {
      return res
    })
  }
--- a/src/store/circuitTrestleAtom.js
+++ b/src/store/circuitTrestleAtom.js
@ -1,20 +1,30 @@
 import { useMessage } from '@/hooks/useMessage'
 import { atom } from 'recoil'

-export const makerState = atom({
-  key: 'makerState',
-  default: { makers: [], selectedMaker: null },
+export const makersState = atom({
+  key: 'makersState',
+  default: [],
  dangerouslyAllowMutability: true,
 })

+export const selectedMakerState = atom({
+  key: 'selectedMakerState',
+  default: null,
+})
+
 export const seriesState = atom({
  key: 'seriesState',
-  default: { series: [], selectedSeries: [] },
+  default: [],
 })

-export const modelState = atom({
+export const selectedSeriesState = atom({
+  key: 'selectedSeriesState',
+  default: null,
+})
+
+export const modelsState = atom({
  key: 'modelState',
-  default: { models: [], selectedModels: [] },
+  default: [],
 })

 export const pcsCheckState = atom({