qcast3/qcast-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

회로. 가대 설정 개발중

Browse Source
This commit is contained in:
김민식 2025-01-15 18:51:53 +09:00
parent 414ecc5ffb
commit bdd7de6fff
6 changed files with 257 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

120
src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx
View File

@ -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>

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

@ -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>

59
src/components/floor-plan/modal/circuitTrestle/step/StepUp.jsx
View File

@ -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">

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

@ -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 (
<>
<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>

34
src/hooks/common/useMasterController.js
View File

@ -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,
}
}

5
src/store/circuitTrestleAtom.js
View File

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