diff --git a/src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx b/src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx index b14bfa31..41bc9183 100644 --- a/src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx +++ b/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 (
@@ -94,10 +152,10 @@ export default function CircuitTrestleSetting({ id }) { {tabNum === 2 && } {tabNum === 1 && allocationType === ALLOCATION_TYPE.AUTO && (
- -
diff --git a/src/components/floor-plan/modal/circuitTrestle/step/PowerConditionalSelect.jsx b/src/components/floor-plan/modal/circuitTrestle/step/PowerConditionalSelect.jsx index 420a2e35..a58abfc3 100644 --- a/src/components/floor-plan/modal/circuitTrestle/step/PowerConditionalSelect.jsx +++ b/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)} />
- {managementState?.conType === '1' && ( + {managementState?.coldRegionFlg === '1' && ( {getMessage('modal.circuit.trestle.setting.power.conditional.select.cold.region')} )} @@ -206,7 +236,7 @@ export default function PowerConditionalSelect(props) {
{selectedModels?.map((model) => ( - {model.itemNm} + {model.itemNm} ))}
@@ -214,11 +244,11 @@ export default function PowerConditionalSelect(props) {
- + setPcsCheck({ ...pcsCheck, division: !pcsCheck.division })} />
- + setPcsCheck({ ...pcsCheck, max: !pcsCheck.max })} /> diff --git a/src/components/floor-plan/modal/circuitTrestle/step/StepUp.jsx b/src/components/floor-plan/modal/circuitTrestle/step/StepUp.jsx index 287d9ff8..27efaae7 100644 --- a/src/components/floor-plan/modal/circuitTrestle/step/StepUp.jsx +++ b/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 ( <>
diff --git a/src/components/floor-plan/modal/circuitTrestle/step/type/PassivityCircuitAllocation.jsx b/src/components/floor-plan/modal/circuitTrestle/step/type/PassivityCircuitAllocation.jsx index 7c01cd6c..5ace632a 100644 --- a/src/components/floor-plan/modal/circuitTrestle/step/type/PassivityCircuitAllocation.jsx +++ b/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('Q.TRON M-G2'), - prop: 'moduleName', - }, + { name: getMessage('modal.circuit.trestle.setting.circuilt'), prop: 'circuit' }, + ...selectedModules.itemList.map((module) => { + return { + 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 ( <>
@@ -69,7 +82,19 @@ export default function PassivityCircuitAllocation() {
{getMessage('modal.circuit.trestle.setting.circuit.allocation.passivity.selected.power.conditional')}
-
+ {selectedModels.map((model, index) => ( +
+ setSelectedPcs(model)} + /> + +
+ ))} + {/*
@@ -80,7 +105,7 @@ export default function PassivityCircuitAllocation() {
-
+
*/}
diff --git a/src/hooks/common/useMasterController.js b/src/hooks/common/useMasterController.js index f6dacdff..0e90fcdb 100644 --- a/src/hooks/common/useMasterController.js +++ b/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 {혼합모듈번호} mixMatlNo + * 모듈 타입별 아이템 목록 조회 + * @param {PCS 메이커코드} pcsMkrCd + * @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, } } diff --git a/src/store/circuitTrestleAtom.js b/src/store/circuitTrestleAtom.js index bac7ee7a..3fbb0b3e 100644 --- a/src/store/circuitTrestleAtom.js +++ b/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 }, +})