729 lines
28 KiB
JavaScript
729 lines
28 KiB
JavaScript
import { GlobalDataContext } from '@/app/GlobalDataProvider'
|
|
import QSelectBox from '@/components/common/select/QSelectBox'
|
|
import { useMessage } from '@/hooks/useMessage'
|
|
import { canvasState } from '@/store/canvasAtom'
|
|
import { modelState, pcsCheckState } from '@/store/circuitTrestleAtom'
|
|
import { selectedModuleState } from '@/store/selectedModuleOptions'
|
|
import { useContext, useEffect, useState } from 'react'
|
|
import { useRecoilState, useRecoilValue } from 'recoil'
|
|
import { useCanvasPopupStatusController } from '@/hooks/common/useCanvasPopupStatusController'
|
|
import { canvasPopupStatusStore } from '@/store/canvasPopupStatusAtom'
|
|
import { useMasterController } from '@/hooks/common/useMasterController'
|
|
import { v4 as uuidv4 } from 'uuid'
|
|
import { globalLocaleStore } from '@/store/localeAtom'
|
|
import { POLYGON_TYPE } from '@/common/common'
|
|
import { useSwal } from '@/hooks/useSwal'
|
|
import { circuitNumDisplaySelector } from '@/store/settingAtom'
|
|
import { fontSelector } from '@/store/fontAtom'
|
|
import { PCS_MKR_MULTI_TYPE } from './PowerConditionalSelect'
|
|
|
|
export default function StepUp(props) {
|
|
const {
|
|
models,
|
|
allocationType,
|
|
stepUpListData,
|
|
setStepUpListData,
|
|
seletedMainOption,
|
|
setSeletedMainOption,
|
|
seletedSubOption,
|
|
setSeletedSubOption,
|
|
selectedMaker,
|
|
selectedModels,
|
|
setSelectedModels,
|
|
getSelectedPcsItemList,
|
|
getModuleList,
|
|
setModuleStatisticsData,
|
|
} = props
|
|
const { getMessage } = useMessage()
|
|
const { swalFire } = useSwal()
|
|
const globalLocale = useRecoilValue(globalLocaleStore)
|
|
const [moduleTab, setModuleTab] = useState(1)
|
|
const [moduleTabs, setModuleTabs] = useState({})
|
|
const [arrayLength, setArrayLength] = useState(3) //module-table-inner의 반복 개수
|
|
const [pcsCheck, setPcsCheck] = useRecoilState(pcsCheckState)
|
|
const { getPcsVoltageStepUpList, getPcsAutoRecommendList, getPcsVoltageChk, getPcsConnOptionItemList } = useMasterController()
|
|
const canvas = useRecoilValue(canvasState)
|
|
const selectedModules = useRecoilValue(selectedModuleState)
|
|
const [optCodes, setOptCodes] = useState([])
|
|
const [mainOptions, setMainOptions] = useState([])
|
|
const [subOptions, setSubOptions] = useState([])
|
|
|
|
const [selectedRows, setSelectedRows] = useState({})
|
|
const [isManualSelection, setIsManualSelection] = useState({})
|
|
|
|
const isDisplayCircuitNumber = useRecoilValue(circuitNumDisplaySelector)
|
|
const circuitNumberText = useRecoilValue(fontSelector('circuitNumberText'))
|
|
|
|
useEffect(() => {
|
|
if (allocationType === 'auto') {
|
|
/** 자동일 때 모듈의 회로 정보 초기화 */
|
|
canvas
|
|
.getObjects()
|
|
.filter((obj) => obj.name === POLYGON_TYPE.MODULE)
|
|
.forEach((module) => {
|
|
module.circuit = null
|
|
module.circuitNumber = null
|
|
module.pcsItemId = null
|
|
})
|
|
|
|
canvas.renderAll()
|
|
|
|
/** PCS 자동 승압설정 정보 조회 */
|
|
fetchAutoStepUpData()
|
|
} else {
|
|
/** PCS 수동 승압설정 정보 조회 */
|
|
fetchPassiStepUpData()
|
|
}
|
|
}, [])
|
|
|
|
/**
|
|
* PCS 자동 승압설정 정보 조회
|
|
*/
|
|
|
|
const isMultiOptions = () => {
|
|
return selectedModels.some((model) => model.pcsSerParallelYn === 'Y')
|
|
}
|
|
|
|
const fetchAutoStepUpData = async () => {
|
|
try {
|
|
const params = {
|
|
...props.getOptYn() /** 옵션 Y/N */,
|
|
useModuleItemList: props.getUseModuleItemList() /** 사용된 모듈아이템 List */,
|
|
roofSurfaceList: props.getRoofSurfaceList() /** 지붕면 목록 */,
|
|
pcsItemList: props.getSelectedPcsItemList() /** PCS 아이템 목록 */,
|
|
}
|
|
/** 회로 구성 가능 여부 체크 통과 시 승압설정 정보 조회 */
|
|
getPcsVoltageStepUpList(params).then((res) => {
|
|
if (res?.result.resultCode === 'S' && res?.data) {
|
|
const dataArray = Array.isArray(res.data) ? res.data : [res.data]
|
|
const stepUpListData = formatStepUpListData(dataArray)
|
|
|
|
/** PCS 승압설정 정보 SET */
|
|
setStepUpListData(stepUpListData)
|
|
|
|
/** PCS 옵션 조회 */
|
|
// const formattedOptCodes = formatOptionCodes(res.data.optionList)
|
|
// setOptCodes(formattedOptCodes)
|
|
// setSeletedOption(formattedOptCodes[0])
|
|
|
|
/** 캔버스에 회로 정보 적용 */
|
|
// 병설일때 pcs 있으면 setSubOpsions, 없으면 setMainOptions
|
|
console.log('stepUpListData', stepUpListData)
|
|
stepUpListData[0].pcsItemList.forEach((pcsItem, index) => {
|
|
const optionList = formatOptionCodes(pcsItem.optionList)
|
|
if (isMultiOptions()) {
|
|
if (index === 0) {
|
|
setMainOptions(optionList)
|
|
setSeletedMainOption(optionList[0])
|
|
} else {
|
|
setSubOptions(optionList)
|
|
setSeletedSubOption(optionList[0])
|
|
}
|
|
} else {
|
|
if (index === 0) {
|
|
setMainOptions(optionList)
|
|
setSeletedMainOption(optionList[0])
|
|
}
|
|
}
|
|
const selectedSerQty = pcsItem.serQtyList.find((serQty) => serQty.selected)
|
|
if (selectedSerQty) {
|
|
selectedSerQty.roofSurfaceList.forEach((roofSurface) => {
|
|
const targetSurface = canvas.getObjects().filter((obj) => obj.id === roofSurface.roofSurfaceId)[0]
|
|
const moduleIds = targetSurface.modules.map((module) => module.id)
|
|
|
|
/** 기존 모듈 텍스트 삭제 */
|
|
canvas
|
|
.getObjects()
|
|
.filter((obj) => moduleIds.includes(obj.parentId))
|
|
.forEach((text) => canvas.remove(text))
|
|
|
|
/** 새로운 모듈 회로 정보 추가 */
|
|
roofSurface.moduleList.forEach((module) => {
|
|
const targetModule = canvas.getObjects().find((obj) => obj.id === module.uniqueId)
|
|
if (targetModule && module.circuit !== '' && module.circuit) {
|
|
const moduleCircuitText = new fabric.Text(module.circuit, {
|
|
left: targetModule.left + targetModule.width / 2,
|
|
top: targetModule.top + targetModule.height / 2,
|
|
fontFamily: circuitNumberText.fontFamily.value,
|
|
fontWeight: circuitNumberText.fontWeight.value.toLowerCase().includes('bold') ? 'bold' : 'normal',
|
|
fontStyle: circuitNumberText.fontWeight.value.toLowerCase().includes('italic') ? 'italic' : 'normal',
|
|
fontSize: circuitNumberText.fontSize.value,
|
|
fill: circuitNumberText.fontColor.value,
|
|
width: targetModule.width,
|
|
height: targetModule.height,
|
|
textAlign: 'center',
|
|
originX: 'center',
|
|
originY: 'center',
|
|
name: 'circuitNumber',
|
|
parentId: targetModule.id,
|
|
circuitInfo: module.pcsItemId,
|
|
selectable: false,
|
|
visible: isDisplayCircuitNumber,
|
|
})
|
|
targetModule.circuit = moduleCircuitText
|
|
targetModule.pcsItemId = module.pcsItemId
|
|
targetModule.circuitNumber = module.circuit
|
|
canvas.add(moduleCircuitText)
|
|
}
|
|
})
|
|
})
|
|
}
|
|
})
|
|
|
|
canvas.renderAll()
|
|
setModuleStatisticsData()
|
|
} else {
|
|
swalFire({ text: getMessage('common.message.send.error') })
|
|
}
|
|
})
|
|
} catch (error) {
|
|
console.error('Error fetching step up data:', error)
|
|
}
|
|
}
|
|
|
|
/**
|
|
* PCS 수동 승압설정 정보 조회
|
|
*/
|
|
const fetchPassiStepUpData = async () => {
|
|
try {
|
|
/** 모듈 데이터 가져오기 */
|
|
const modules = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE)
|
|
|
|
/** PCS별 회로 정보를 저장할 객체 */
|
|
const pcsSummary = {}
|
|
|
|
/** 각 모듈을 순회하며 PCS별 회로 정보 수집 */
|
|
modules.forEach((module) => {
|
|
if (!module.circuit || !module.pcsItemId) return
|
|
|
|
if (!pcsSummary[module.circuit.circuitInfo.id]) {
|
|
pcsSummary[module.circuit.circuitInfo.id] = {
|
|
circuits: {},
|
|
totalModules: 0,
|
|
}
|
|
}
|
|
|
|
const circuitNumber = module.circuitNumber
|
|
if (!pcsSummary[module.circuit.circuitInfo.id].circuits[circuitNumber]) {
|
|
pcsSummary[module.circuit.circuitInfo.id].circuits[circuitNumber] = 0
|
|
}
|
|
pcsSummary[module.circuit.circuitInfo.id].circuits[circuitNumber]++
|
|
pcsSummary[module.circuit.circuitInfo.id].totalModules++
|
|
})
|
|
|
|
const params = {
|
|
useModuleItemList: props.getUseModuleItemList(),
|
|
pcsItemList: getSelectedPcsItemList(),
|
|
}
|
|
|
|
/** PCS 접속함 및 옵션 목록 조회 */
|
|
getPcsConnOptionItemList(params).then((res) => {
|
|
if (res?.result.code === 200 && res?.data) {
|
|
/** PCS 아이템 리스트에 serQtyList 추가 */
|
|
const pcsItemListWithSerQty = res.data.pcsItemList.map((pcsItem, index) => {
|
|
const pcsData = pcsSummary[selectedModels[index].id] || { circuits: {}, totalModules: 0 }
|
|
const circuitCounts = Object.values(pcsData.circuits)
|
|
const optionList = formatOptionCodes(pcsItem.optionList)
|
|
if (isMultiOptions()) {
|
|
if (index === 0) {
|
|
setMainOptions(optionList)
|
|
setSeletedMainOption(optionList[0])
|
|
} else {
|
|
setSubOptions(optionList)
|
|
setSeletedSubOption(optionList[0])
|
|
}
|
|
} else {
|
|
if (index === 0) {
|
|
setMainOptions(optionList)
|
|
setSeletedMainOption(optionList[0])
|
|
}
|
|
}
|
|
return {
|
|
...pcsItem,
|
|
serQtyList: [
|
|
{
|
|
/** 한 회로당 최대 모듈 수 */
|
|
serQty: circuitCounts.length > 0 ? Math.max(...circuitCounts) : 0,
|
|
/** 회로 개수 */
|
|
paralQty: Object.keys(pcsData.circuits).length || 0,
|
|
rmdYn: 'Y',
|
|
usePossYn: 'Y',
|
|
roofSurfaceList: props.getRoofSurfaceList(),
|
|
},
|
|
],
|
|
}
|
|
})
|
|
|
|
/** res.data with modified pcsItemList */
|
|
res.data.pcsItemList = pcsItemListWithSerQty
|
|
|
|
const dataArray = Array.isArray(res.data) ? res.data : [res.data]
|
|
const stepUpListData = formatStepUpListData(dataArray)
|
|
|
|
/** PCS 승압설정 정보 SET */
|
|
setStepUpListData(stepUpListData)
|
|
|
|
/** PCS 옵션 조회 */
|
|
// const formattedOptCodes = formatOptionCodes(res.data.optionList)
|
|
// setOptCodes(formattedOptCodes)
|
|
// setSeletedOption(formattedOptCodes[0])
|
|
}
|
|
})
|
|
} catch (error) {
|
|
console.error('Error fetching step up data:', error)
|
|
}
|
|
}
|
|
|
|
/**
|
|
* PCS 옵션 조회
|
|
*/
|
|
const formatOptionCodes = (optionList = []) => {
|
|
return optionList?.map((opt) => ({
|
|
code: opt.pcsOptCd ?? '',
|
|
name: opt.pcsOptNm ?? '',
|
|
nameJp: opt.pcsOptNmJp ?? '',
|
|
}))
|
|
}
|
|
|
|
/**
|
|
* PCS 승압설정 정보 포맷 후 추천 값 저장
|
|
*/
|
|
const formatStepUpListData = (dataArray = []) => {
|
|
const formattedData = dataArray?.map((stepUps) => ({
|
|
...stepUps,
|
|
optionList: formatOptionList(stepUps.optionList),
|
|
pcsItemList: formatPcsItemList(stepUps.pcsItemList),
|
|
selectedPcsItem: formatPcsItemList(stepUps.pcsItemList),
|
|
}))
|
|
|
|
return formattedData
|
|
}
|
|
|
|
/**
|
|
* PCS 옵션 포맷
|
|
*/
|
|
const formatOptionList = (optionList = []) => {
|
|
return optionList?.map((option) => ({
|
|
pcsOptCd: option.pcsOptCd ?? '',
|
|
pcsOptNm: option.pcsOptNm ?? '',
|
|
pcsOptNmJp: option.pcsOptNmJp ?? '',
|
|
}))
|
|
}
|
|
|
|
/**
|
|
* PCS 아이템 포맷
|
|
*/
|
|
const formatPcsItemList = (pcsItemList = []) => {
|
|
return pcsItemList?.map((item, index) => ({
|
|
goodsNo: item.goodsNo ? item.goodsNo : '',
|
|
itemId: item.itemId ? item.itemId : '',
|
|
itemNm: item.itemNm ? item.itemNm : '',
|
|
pcsMkrCd: item.pcsMkrCd ? item.pcsMkrCd : '',
|
|
pcsSerCd: item.pcsSerCd ? item.pcsSerCd : '',
|
|
uniqueIndex: `${item.itemId}_${index}`, // 고유 식별자 추가(동일한 PCS를 구분)
|
|
connList: formatConnList(item.connList),
|
|
serQtyList: formatSerQtyList(item.serQtyList),
|
|
optionList: item.optionList ?? [],
|
|
}))
|
|
}
|
|
|
|
/**
|
|
* PCS 연결 포맷
|
|
*/
|
|
const formatConnList = (connList = []) => {
|
|
if (!connList) return [] // null인 경우 빈 배열 반환
|
|
|
|
return connList?.map((conn) => ({
|
|
connAllowCur: conn.connAllowCur ?? 0,
|
|
connMaxParalCnt: conn.connMaxParalCnt ?? 0,
|
|
goodsNo: conn.goodsNo ?? '',
|
|
itemId: conn.itemId ?? '',
|
|
itemNm: conn.itemNm ?? '',
|
|
vstuParalCnt: conn.vstuParalCnt ?? 0,
|
|
}))
|
|
}
|
|
|
|
/**
|
|
* PCS 시리즈 포맷
|
|
*/
|
|
const formatSerQtyList = (serQtyList = []) => {
|
|
return serQtyList?.map((qty) => ({
|
|
code: uuidv4(),
|
|
serQty: qty.serQty ?? 0,
|
|
paralQty: qty.paralQty ?? 0,
|
|
rmdYn: qty.rmdYn ?? 'N',
|
|
usePossYn: qty.usePossYn ?? 'Y',
|
|
roofSurfaceList: formatRoofSurfaceList(qty.roofSurfaceList),
|
|
selected: qty.rmdYn === 'Y',
|
|
}))
|
|
}
|
|
|
|
/**
|
|
* PCS RoofSurface 포맷
|
|
*/
|
|
const formatRoofSurfaceList = (roofSurfaceList = []) => {
|
|
return roofSurfaceList?.map((rsf) => ({
|
|
moduleList: formatModuleList(rsf.moduleList),
|
|
roofSurface: rsf.roofSurface ?? '',
|
|
roofSurfaceId: rsf.roofSurfaceId ?? '',
|
|
roofSurfaceIncl: rsf.roofSurfaceIncl ? +rsf.roofSurfaceIncl : '',
|
|
}))
|
|
}
|
|
|
|
/**
|
|
* PCS MatModule 포맷
|
|
*/
|
|
const formatModuleList = (moduleList = []) => {
|
|
return moduleList?.map((module) => ({
|
|
circuit: module.circuit ?? '',
|
|
itemId: module.itemId ?? '',
|
|
pcsItemId: module.pcsItemId ?? '',
|
|
uniqueId: module.uniqueId ?? '',
|
|
}))
|
|
}
|
|
|
|
/**
|
|
* 각 모듈의 탭을 변경하는 함수
|
|
*/
|
|
const handleTabChange = (goodsNo, idx, tabNumber) => {
|
|
setModuleTabs((prev) => ({
|
|
...prev,
|
|
[`${goodsNo}_${idx}`]: tabNumber,
|
|
}))
|
|
}
|
|
|
|
/**
|
|
* 행 선택 핸들러 함수 추가
|
|
*/
|
|
const handleRowClick = (mainIdx, subIdx) => {
|
|
/** 자동 승압 설정인 경우만 실행 */
|
|
if (allocationType !== 'auto') return
|
|
|
|
let tempStepUpListData = [...stepUpListData]
|
|
let selectedData = {}
|
|
|
|
tempStepUpListData[0].pcsItemList[mainIdx].serQtyList.forEach((item, index) => {
|
|
if (index === subIdx) {
|
|
selectedData = item
|
|
}
|
|
item.selected = index === subIdx
|
|
})
|
|
/** 선택된 행 정보 저장 */
|
|
setStepUpListData(tempStepUpListData)
|
|
|
|
/** PCS 2개 이상 또는 첫번째 PCS 선택 시에만 실행 */
|
|
if (tempStepUpListData[0].pcsItemList.length > 1 && mainIdx === 0) {
|
|
/** 파워컨디셔너 옵션 조회 요청 파라미터 */
|
|
const params = {
|
|
...props.getOptYn(), // 옵션 Y/N
|
|
useModuleItemList: props.getUseModuleItemList(), // 사용된 모듈아이템 List
|
|
roofSurfaceList: props.getRoofSurfaceList(), // 지붕면 목록
|
|
pcsItemList: props.getSelectedPcsItemList().map((pcsItem, index) => {
|
|
/** PCS 아이템 목록
|
|
* tempStepUpListData에서 해당 PCS 아이템 찾기
|
|
* uniqueIndex를 사용하여 매칭
|
|
*/
|
|
const matchingPcsItem = tempStepUpListData[0].pcsItemList.find((item) => item.uniqueIndex === `${pcsItem.itemId}_${index}`)
|
|
|
|
/** 선택된 serQty 찾기 */
|
|
const selectedSerQty = matchingPcsItem?.serQtyList.find((serQty) => serQty.selected)?.serQty || 0
|
|
|
|
return {
|
|
...pcsItem,
|
|
applySerQty: selectedSerQty,
|
|
}
|
|
}),
|
|
}
|
|
|
|
/** PCS가 1개 이고 2번째 또는 3번째 PCS serQty가 0인 경우는 추천 API 실행하지 않음 */
|
|
if (params.pcsItemList.length !== 1 && (params.pcsItemList[1]?.applySerQty !== 0 || params.pcsItemList[2]?.applySerQty) !== 0) {
|
|
/** PCS 승압설정 정보 조회 */
|
|
getPcsVoltageStepUpList(params).then((res) => {
|
|
if (res?.result.resultCode === 'S' && res?.data) {
|
|
const dataArray = Array.isArray(res.data) ? res.data : [res.data]
|
|
const stepUpListData = formatStepUpListData(dataArray)
|
|
|
|
/** PCS 승압설정 정보 SET */
|
|
setStepUpListData(stepUpListData)
|
|
|
|
/** PCS 옵션 조회 */
|
|
// const formattedOptCodes = formatOptionCodes(res.data.optionList)
|
|
// setOptCodes(formattedOptCodes)
|
|
// setSeletedOption(formattedOptCodes[0])
|
|
} else {
|
|
swalFire({ text: getMessage('common.message.send.error') })
|
|
}
|
|
})
|
|
}
|
|
}
|
|
|
|
/** 모듈 목록 삭제 */
|
|
canvas
|
|
.getObjects()
|
|
.filter((obj) => obj.name === POLYGON_TYPE.MODULE)
|
|
.forEach((module) => {
|
|
module.circuit = null
|
|
module.circuitNumber = null
|
|
module.pcsItemId = null
|
|
})
|
|
|
|
/** 선택된 모듈 목록 추가 */
|
|
selectedData.roofSurfaceList.forEach((roofSurface) => {
|
|
const targetSurface = canvas.getObjects().filter((obj) => obj.id === roofSurface.roofSurfaceId)[0]
|
|
const moduleIds = targetSurface.modules.map((module) => {
|
|
return module.id
|
|
})
|
|
|
|
/** 모듈 목록 삭제 */
|
|
canvas
|
|
.getObjects()
|
|
.filter((obj) => moduleIds.includes(obj.parentId))
|
|
.map((text) => {
|
|
canvas.remove(text)
|
|
})
|
|
|
|
/** 모듈 목록 추가 */
|
|
canvas.renderAll()
|
|
|
|
roofSurface.moduleList.forEach((module) => {
|
|
const targetModule = canvas.getObjects().find((obj) => obj.id === module.uniqueId)
|
|
if (targetModule && module.circuit !== '' && module.circuit !== null) {
|
|
const moduleCircuitText = new fabric.Text(module.circuit, {
|
|
left: targetModule.left + targetModule.width / 2,
|
|
top: targetModule.top + targetModule.height / 2,
|
|
fontFamily: circuitNumberText.fontFamily.value,
|
|
fontWeight: circuitNumberText.fontWeight.value.toLowerCase().includes('bold') ? 'bold' : 'normal',
|
|
fontStyle: circuitNumberText.fontWeight.value.toLowerCase().includes('italic') ? 'italic' : 'normal',
|
|
fontSize: circuitNumberText.fontSize.value,
|
|
fill: circuitNumberText.fontColor.value,
|
|
width: targetModule.width,
|
|
height: targetModule.height,
|
|
textAlign: 'center',
|
|
originX: 'center',
|
|
originY: 'center',
|
|
name: 'circuitNumber',
|
|
parentId: targetModule.id,
|
|
circuitInfo: module.pcsItemId,
|
|
visible: isDisplayCircuitNumber,
|
|
})
|
|
targetModule.circuit = moduleCircuitText
|
|
targetModule.pcsItemId = module.pcsItemId
|
|
targetModule.circuitNumber = module.circuit
|
|
canvas.add(moduleCircuitText)
|
|
}
|
|
})
|
|
})
|
|
|
|
canvas.renderAll()
|
|
setModuleStatisticsData()
|
|
}
|
|
|
|
/**
|
|
* 현재 선택된 값들을 가져오는 함수 추가
|
|
*/
|
|
const getCurrentSelections = () => {
|
|
const selectedValues = stepUpListData[0].pcsItemList.forEach((item) => {
|
|
item.serQtyList.filter((serQty) => serQty.selected)
|
|
return item.serQtyList.map((serQty) => {
|
|
return {
|
|
pcsMkrCd: serQty.pcsMkrCd,
|
|
pcsSerCd: serQty.pcsSerCd,
|
|
pcsItemId: serQty.itemId,
|
|
pcsOptCd: seletedOption,
|
|
paralQty: serQty.paralQty,
|
|
connections: {
|
|
connItemId: item.connList[0].itemId,
|
|
},
|
|
}
|
|
})
|
|
})
|
|
|
|
return selectedValues
|
|
}
|
|
|
|
/** props로 getCurrentSelections 함수 전달 */
|
|
useEffect(() => {
|
|
if (props.onInitialize) {
|
|
props.onInitialize(getCurrentSelections)
|
|
}
|
|
}, [])
|
|
|
|
/** stepUpListData가 변경될 때마다 업데이트하는 useEffect */
|
|
useEffect(() => {
|
|
if (props.onInitialize) {
|
|
/** onInitialize를 props에서 가져옴 */
|
|
props.onInitialize(() => ({
|
|
...getCurrentSelections(),
|
|
stepUpListData /** stepUpListData를 포함하여 반환 */,
|
|
}))
|
|
}
|
|
}, [stepUpListData])
|
|
|
|
return (
|
|
<>
|
|
<div className="properties-setting-wrap outer">
|
|
<div className="circuit-title-sel">
|
|
<p className="circuit-title">{getMessage('modal.circuit.trestle.setting.step.up.allocation.select.monitor')}</p>
|
|
<div className="circuit-sel-wrap">
|
|
<div className="grid-select mr10">
|
|
{mainOptions.length > 0 && (
|
|
<QSelectBox
|
|
options={mainOptions}
|
|
value={seletedMainOption}
|
|
sourceKey="code"
|
|
targetKey="code"
|
|
showKey={`${globalLocale === 'ja' ? 'nameJp' : 'name'}`}
|
|
onChange={(e) => setSeletedMainOption(e)}
|
|
/>
|
|
)}
|
|
</div>
|
|
{isMultiOptions() && selectedModels.length === 2 && (
|
|
<div className="grid-select ">
|
|
{subOptions.length > 0 && (
|
|
<QSelectBox
|
|
options={subOptions}
|
|
value={seletedSubOption}
|
|
sourceKey="code"
|
|
targetKey="code"
|
|
showKey={`${globalLocale === 'ja' ? 'nameJp' : 'name'}`}
|
|
onChange={(e) => setSeletedSubOption(e)}
|
|
/>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* <div className="outline-form">
|
|
<span className="mr10" style={{ width: 'auto' }}>
|
|
{getMessage('modal.circuit.trestle.setting.step.up.allocation.select.monitor')}
|
|
</span>
|
|
{optCodes.length > 0 && (
|
|
<div className="grid-select mr10">
|
|
<QSelectBox
|
|
options={optCodes.map((roof) => {
|
|
return { ...roof, name: globalLocale === 'ko' ? roof.name : roof.nameJp }
|
|
})}
|
|
title={globalLocale === 'ko' ? optCodes[0].name : optCodes[0].nameJp}
|
|
value={seletedOption}
|
|
sourceKey="code"
|
|
targetKey="code"
|
|
showKey="name"
|
|
onChange={(e) => setSeletedOption(e)}
|
|
/>
|
|
</div>
|
|
)}
|
|
</div> */}
|
|
</div>
|
|
|
|
<div className="slope-wrap">
|
|
<div className="circuit-overflow">
|
|
{/* 3개일때 className = by-max */}
|
|
{stepUpListData.map((stepUp, index) => (
|
|
<div key={index} className={`module-table-box ${stepUp.pcsItemList.length === 3 ? 'by-max' : ''}`}>
|
|
{stepUp?.pcsItemList.map((pcsItem, idx) => (
|
|
<div key={idx} className="module-table-inner">
|
|
<div className="mb-box">
|
|
<div className="circuit-table-tit">{stepUp.pcsItemList[idx].goodsNo}</div>
|
|
<div className="roof-module-table overflow-y min">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>{getMessage('modal.circuit.trestle.setting.step.up.allocation.serial.amount')}</th>
|
|
<th>{getMessage('modal.circuit.trestle.setting.step.up.allocation.total.amount')}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{pcsItem.serQtyList.map((item, serQtyIdx) => {
|
|
return (
|
|
<tr
|
|
key={`row-${serQtyIdx}`}
|
|
className={`${item.selected ? 'on' : ''}`}
|
|
onClick={() => handleRowClick(idx, serQtyIdx)}
|
|
style={{ cursor: allocationType === 'auto' ? 'pointer' : 'default' }}
|
|
>
|
|
<td className="al-r">{item.serQty}</td>
|
|
<td className="al-r">{item.paralQty}</td>
|
|
</tr>
|
|
)
|
|
})}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div className="module-box-tab mb10">
|
|
<button
|
|
className={`module-btn ${(moduleTabs[`${stepUp.pcsItemList[idx].goodsNo}_${idx}`] || 1) === 1 ? 'act' : ''}`}
|
|
onClick={() => handleTabChange(stepUp.pcsItemList[idx].goodsNo, idx, 1)}
|
|
>
|
|
{getMessage('modal.circuit.trestle.setting.step.up.allocation.connected')}
|
|
</button>
|
|
<button
|
|
className={`module-btn ${(moduleTabs[`${stepUp.pcsItemList[idx].goodsNo}_${idx}`] || 1) === 2 ? 'act' : ''}`}
|
|
onClick={() => handleTabChange(stepUp.pcsItemList[idx].goodsNo, idx, 2)}
|
|
>
|
|
{getMessage('modal.circuit.trestle.setting.step.up.allocation.option')}
|
|
</button>
|
|
</div>
|
|
<div className="circuit-table-flx-wrap">
|
|
{(moduleTabs[`${stepUp.pcsItemList[idx].goodsNo}_${idx}`] || 1) === 1 && (
|
|
<div className="circuit-table-flx-box">
|
|
<div className="roof-module-table min mb10">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>{getMessage('modal.circuit.trestle.setting.power.conditional.select.name')}</th>
|
|
<th>{getMessage('modal.circuit.trestle.setting.power.conditional.select.circuit.amount')}</th>
|
|
<th>{getMessage('modal.circuit.trestle.setting.step.up.allocation.circuit.amount')}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td className="al-c">
|
|
{stepUp.pcsItemList[idx].connList?.[0]?.goodsNo ? stepUp.pcsItemList[idx].connList?.[0]?.goodsNo : '-'}
|
|
</td>
|
|
<td className="al-c">
|
|
{stepUp.pcsItemList[idx].connList?.[0]?.connMaxParalCnt
|
|
? (stepUp.pcsItemList[idx].connList?.[0]?.connMaxParalCnt ?? '-')
|
|
: '-'}
|
|
</td>
|
|
<td className="al-c">
|
|
{stepUp.pcsItemList[idx].connList?.[0]?.vstuParalCnt ? stepUp.pcsItemList[idx].connList?.[0]?.vstuParalCnt : '-'}
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
)}
|
|
{(moduleTabs[`${stepUp.pcsItemList[idx].goodsNo}_${idx}`] || 1) === 2 && (
|
|
<div className="circuit-table-flx-box">
|
|
<div className="roof-module-table min mb10">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>{getMessage('modal.circuit.trestle.setting.power.conditional.select.name')}</th>
|
|
<th>{getMessage('modal.circuit.trestle.setting.step.up.allocation.circuit.amount')}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td className="al-c">-</td>
|
|
<td className="al-c">-</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|