diff --git a/src/components/floor-plan/CanvasMenu.jsx b/src/components/floor-plan/CanvasMenu.jsx index 0e9055ab..fc68f5e4 100644 --- a/src/components/floor-plan/CanvasMenu.jsx +++ b/src/components/floor-plan/CanvasMenu.jsx @@ -296,7 +296,9 @@ export default function CanvasMenu(props) { }, [type, globalLocale]) useEffect(() => { - if (Object.keys(basicSetting).length === 0) return + console.log('π ~ useEffect ~ basicSetting:', basicSetting) + if (Object.keys(basicSetting).length === 0 || !basicSetting.roofSizeSet) return + // setMenuNumber(1) // if ([2, 3].some((num) => num === canvasSetting?.roofSizeSet)) { // setMenuNumber(3) @@ -308,7 +310,6 @@ export default function CanvasMenu(props) { // setCurrentMenu(MENU.ROOF_COVERING.EXTERIOR_WALL_LINE) // } }, [basicSetting]) - const checkMenuState = (menu) => { return (['2', '3'].includes(canvasSetting?.roofSizeSet) && menu.index === 2) || (menuNumber === 4 && menu.index === 2) } diff --git a/src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx b/src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx index 4a265f67..b14bfa31 100644 --- a/src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx +++ b/src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx @@ -12,6 +12,11 @@ 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 { POLYGON_TYPE } from '@/common/common' +import { useSwal } from '@/hooks/useSwal' +import { canvasState } from '@/store/canvasAtom' const ALLOCATION_TYPE = { AUTO: 'auto', @@ -24,72 +29,41 @@ 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 [models, setModels] = useState([]) - 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 canvas = useRecoilValue(canvasState) + const { swalFire } = useSwal() + const apply = () => { closePopup(id) } useEffect(() => { - getPcsMakerList().then((res) => { - setMakers(res.data) - }) - if (!managementState) { - console.log('π ~ useEffect ~ managementState:', managementState) - setManagementState(managementStateLoaded) - } - console.log('π ~ useEffect ~ managementState:', managementState) - // promiseGet({ url: `/api/object/${correntObjectNo}/detail` }).then((res) => { - // console.log('π ~ useEffect ~ /api/object/${correntObjectNo}/detail:', res) - // // coldRegionFlg-νλμ§μ¬μ, conType// κ³μ½μ‘°κ±΄(μμ¬~,μ λ) - // }) + // 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(() => { - if (selectedMaker) { - getPcsMakerList(selectedMaker).then((res) => { - const series = res.data.map((series) => { - return { ...series, selected: false } - }) - setSeries(series) - }) - } - }, [selectedMaker]) - - 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]) + // 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 = { tabNum, setTabNum, - makers, - selectedMaker, - setSelectedMaker, - series, - setSeries, - selectedSeries, - setSelectedSeries, - models, - setModels, - selectedModels, - setSelectedModels, - managementState, } const circuitProps = { tabNum, diff --git a/src/components/floor-plan/modal/circuitTrestle/step/PowerConditionalSelect.jsx b/src/components/floor-plan/modal/circuitTrestle/step/PowerConditionalSelect.jsx index 101f2be4..420a2e35 100644 --- a/src/components/floor-plan/modal/circuitTrestle/step/PowerConditionalSelect.jsx +++ b/src/components/floor-plan/modal/circuitTrestle/step/PowerConditionalSelect.jsx @@ -1,61 +1,142 @@ +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 { makerState, modelState, seriesState } from '@/store/circuitTrestleAtom' import { globalLocaleStore } from '@/store/localeAtom' -import { useState } from 'react' +import { moduleSelectionDataState, selectedModuleState } from '@/store/selectedModuleOptions' +import { useContext, useEffect, useState } from 'react' +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) { - const { - makers, - selectedMaker, - setSelectedMaker, - series, - setSeries, - selectedSeries, - setSelectedSeries, - models, - selectedModels, - tabNum, - setTabNum, - managementState, - } = 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 = useRecoilValue(modelState) + const [models, setModels] = useState(model.models) + const [selectedModels, setSelectedModels] = useState(model.selectedModels) + const { managementState, setManagementState, managementStateLoaded } = useContext(GlobalDataContext) const { getMessage } = useMessage() - const [selectedRowIndex, setSelectedRowIndex] = useState(null) - const [powerConditions, setPowerConditions] = useState([]) + const [selectedRow, setSelectedRow] = useState(null) const globalLocale = useRecoilValue(globalLocaleStore) + const { getPcsMakerList, getPcsModelList } = useMasterController() + const selectedModules = useRecoilValue(selectedModuleState) const modelHeader = [ - { name: getMessage('λͺ μΉ'), width: '15%', prop: 'name', type: 'color-box' }, + { name: getMessage('λͺ μΉ'), width: '15%', prop: 'itemNm', type: 'color-box' }, { name: `${getMessage('modal.circuit.trestle.setting.power.conditional.select.rated.output')} (kW)`, width: '10%', - prop: 'ratedOutput', + prop: 'ratedCapa', }, { name: `${getMessage('modal.circuit.trestle.setting.power.conditional.select.circuit.amount')}`, width: '10%', - prop: 'circuitAmount', + prop: 'paralMax', }, { name: `${getMessage('modal.circuit.trestle.setting.power.conditional.select.max.connection')}`, width: '10%', - prop: 'maxConnection', + prop: 'moduleStdQty', }, { name: `${getMessage('modal.circuit.trestle.setting.power.conditional.select.max.overload')}`, width: '10%', - prop: 'maxOverload', - }, - { - name: `${getMessage('modal.circuit.trestle.setting.power.conditional.select.output.current')}`, - width: '10%', - prop: 'outputCurrent', + prop: 'moduleMaxQty', }, ] + + useEffect(() => { + if (makers.length === 0) { + getPcsMakerList().then((res) => { + setMakers(res.data) + }) + } + 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// κ³μ½μ‘°κ±΄(μμ¬~,μ λ) + // }) + }, []) + + useEffect(() => { + console.log('π ~ PowerConditionalSelect ~ selectedMaker:', selectedMaker) + if (selectedMaker) { + setSelectedModels([]) + getPcsMakerList(selectedMaker).then((res) => { + setSeriesList( + res.data.map((series) => { + return { ...series, selected: false } + }), + ) + }) + } + }, [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 + .filter((series) => series.selected) + .map((series) => { + return { pcsSerCd: series.pcsSerCd } + }) + const moduleItemList = selectedModules.itemList?.map((module) => { + return { + itemId: module.itemId, + 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) + setModels( + res.data.map((model) => { + return { + ...model, + code: uuidv4(), + selected: false, + } + }), + ) + } + }) + }, [seriesList]) + const onCheckSeries = (series) => { - setSeries((prev) => prev.map((s) => ({ ...s, selected: s.pcsSerCd === series.pcsSerCd ? !s.selected : s.selected }))) + setSeriesList((prev) => prev.map((s) => ({ ...s, selected: s.pcsSerCd === series.pcsSerCd ? !s.selected : s.selected }))) } + + const onAddSelectedModel = () => { + setSelectedModels([...selectedModels, selectedRow]) + setSelectedRow(null) + } + + useEffect(() => { + const selectedModelsIds = selectedModels.map((model) => model.itemId) + + setModels( + models.map((model) => { + return { + ...model, + selected: selectedModelsIds.includes(model.itemId) === selectedRow.itemId ? true : false, + } + }), + ) + }, [selectedModels]) return ( <>