회로 및 가대 설정 퍼블 수정 및 개발 중

This commit is contained in:
김민식 2025-01-10 17:07:39 +09:00
parent f0e6056e32
commit 726a38abf1
8 changed files with 2214 additions and 2556 deletions

View File

@ -1,23 +1,106 @@
import WithDraggable from '@/components/common/draggable/WithDraggable'
import { useState } from 'react'
import { useState, useEffect, useContext } from 'react'
import PowerConditionalSelect from '@/components/floor-plan/modal/circuitTrestle/step/PowerConditionalSelect'
import CircuitAllocation from '@/components/floor-plan/modal/circuitTrestle/step/CircuitAllocation'
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'
const ALLOCATION_TYPE = {
AUTO: 'auto',
PASSIVITY: 'passivity',
}
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 [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 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// (~,)
// })
}, [])
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])
//
const [circuitAllocationType, setCircuitAllocationType] = useState(1)
const powerConditionalSelectProps = {
tabNum,
setTabNum,
makers,
selectedMaker,
setSelectedMaker,
series,
setSeries,
selectedSeries,
setSelectedSeries,
models,
setModels,
selectedModels,
setSelectedModels,
managementState,
}
const circuitProps = {
tabNum,
setTabNum,
circuitAllocationType,
setCircuitAllocationType,
}
return (
<WithDraggable isShow={true} pos={{ x: 50, y: 230 }}>
<div className={`modal-pop-wrap lx-2`}>
<div className={`modal-pop-wrap l-2`}>
<div className="modal-head">
<h1 className="title">{getMessage('modal.circuit.trestle.setting')} </h1>
<button className="modal-close" onClick={() => closePopup(id)}>
@ -26,36 +109,45 @@ export default function CircuitTrestleSetting({ id }) {
</div>
<div className="modal-body">
<div className="roof-module-tab">
<div className={`module-tab-bx ${tabNum === 1 || tabNum === 2 || tabNum === 3 ? 'act' : ''}`}>
{getMessage('modal.circuit.trestle.setting.power.conditional.select')}
<div className={`module-tab-bx act`}>{getMessage('modal.circuit.trestle.setting.power.conditional.select')}</div>
<span className={`tab-arr ${tabNum === 2 ? 'act' : ''}`}></span>
<div className={`module-tab-bx ${tabNum === 2 ? 'act' : ''}`}>
{getMessage('modal.circuit.trestle.setting.circuit.allocation')}({getMessage('modal.circuit.trestle.setting.step.up.allocation')})
</div>
<span className={`tab-arr ${tabNum === 2 || tabNum === 3 ? 'act' : ''}`}></span>
<div className={`module-tab-bx ${tabNum === 2 || tabNum === 3 ? 'act' : ''}`}>
{getMessage('modal.circuit.trestle.setting.circuit.allocation')}
</div>
<span className={`tab-arr ${tabNum === 3 ? 'act' : ''}`}></span>
<div className={`module-tab-bx ${tabNum === 3 ? 'act' : ''}`}>{getMessage('modal.circuit.trestle.setting.step.up.allocation')}</div>
</div>
{tabNum === 1 && <PowerConditionalSelect />}
{tabNum === 2 && <CircuitAllocation {...circuitProps} />}
{tabNum === 3 && <StepUp />}
<div className="grid-btn-wrap">
{tabNum !== 1 && (
<button className="btn-frame modal mr5" onClick={() => setTabNum(tabNum - 1)}>
{tabNum === 1 && allocationType === ALLOCATION_TYPE.AUTO && <PowerConditionalSelect {...powerConditionalSelectProps} />}
{tabNum === 1 && allocationType === ALLOCATION_TYPE.PASSIVITY && <PassivityCircuitAllocation {...powerConditionalSelectProps} />}
{tabNum === 2 && <StepUp />}
{tabNum === 1 && allocationType === ALLOCATION_TYPE.AUTO && (
<div className="grid-btn-wrap">
<button className="btn-frame modal mr5" onClick={() => setTabNum(2)}>
{getMessage('modal.circuit.trestle.setting.circuit.allocation.auto')}
</button>
<button className="btn-frame modal act" onClick={() => setAllocationType(ALLOCATION_TYPE.PASSIVITY)}>
{getMessage('modal.circuit.trestle.setting.circuit.allocation.passivity')}
</button>
</div>
)}
{tabNum === 1 && allocationType === ALLOCATION_TYPE.PASSIVITY && (
<div className="grid-btn-wrap">
<button className="btn-frame modal mr5" onClick={() => setAllocationType(ALLOCATION_TYPE.AUTO)}>
{getMessage('modal.common.prev')}
</button>
)}
{tabNum !== 3 && (
<button className="btn-frame modal act" onClick={() => setTabNum(tabNum + 1)}>
Next
<button className="btn-frame modal act" onClick={() => setTabNum(2)}>
{getMessage('modal.circuit.trestle.setting.circuit.allocation')}({getMessage('modal.circuit.trestle.setting.step.up.allocation')})
</button>
)}
{tabNum === 3 && (
<button className="btn-frame modal act">
{`${getMessage('modal.common.save')} (${getMessage('modal.circuit.trestle.setting.alloc.trestle')})`}
</div>
)}
{tabNum === 2 && (
<div className="grid-btn-wrap">
<button className="btn-frame modal mr5" onClick={() => setTabNum(1)}>
{getMessage('modal.common.prev')}
</button>
)}
</div>
<button className="btn-frame modal act" onClick={() => apply()}>
{getMessage('modal.common.save')}({getMessage('modal.circuit.trestle.setting.circuit.allocation')})
</button>
</div>
)}
</div>
</div>
</WithDraggable>

View File

@ -1,89 +1,91 @@
import QSelectBox from '@/components/common/select/QSelectBox'
import { useMessage } from '@/hooks/useMessage'
import { globalLocaleStore } from '@/store/localeAtom'
import { useState } from 'react'
import { useRecoilValue } from 'recoil'
const SelectOption01 = [{ name: '0' }, { name: '0' }, { name: '0' }, { name: '0' }]
export default function PowerConditionalSelect({ setTabNum }) {
export default function PowerConditionalSelect(props) {
const {
makers,
selectedMaker,
setSelectedMaker,
series,
setSeries,
selectedSeries,
setSelectedSeries,
models,
selectedModels,
tabNum,
setTabNum,
managementState,
} = props
const { getMessage } = useMessage()
const [selectedRowIndex, setSelectedRowIndex] = useState(null)
const [powerConditions, setPowerConditions] = useState([])
const seriesData = {
header: [
{ name: getMessage('명칭'), width: '15%', prop: 'name', type: 'color-box' },
{
name: `${getMessage('modal.circuit.trestle.setting.power.conditional.select.rated.output')} (kW)`,
width: '10%',
prop: 'ratedOutput',
},
{
name: `${getMessage('modal.circuit.trestle.setting.power.conditional.select.circuit.amount')}`,
width: '10%',
prop: 'circuitAmount',
},
{
name: `${getMessage('modal.circuit.trestle.setting.power.conditional.select.max.connection')}`,
width: '10%',
prop: 'maxConnection',
},
{
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',
},
],
rows: [
{
name: { name: 'PCSオプションマスター', color: '#AA6768' },
ratedOutput: { name: '2' },
circuitAmount: { name: '2' },
maxConnection: { name: '-' },
maxOverload: { name: '-' },
outputCurrent: { name: '-' },
},
{
name: { name: 'HQJP-KA40-5', color: '#AA6768' },
ratedOutput: { name: '2' },
circuitAmount: { name: '2' },
maxConnection: { name: '-' },
maxOverload: { name: '-' },
outputCurrent: { name: '-' },
},
{
name: { name: 'Re.RISE-G3 440', color: '#AA6768' },
ratedOutput: { name: '2' },
circuitAmount: { name: '2' },
maxConnection: { name: '-' },
maxOverload: { name: '-' },
outputCurrent: { name: '-' },
},
],
const globalLocale = useRecoilValue(globalLocaleStore)
const modelHeader = [
{ name: getMessage('명칭'), width: '15%', prop: 'name', type: 'color-box' },
{
name: `${getMessage('modal.circuit.trestle.setting.power.conditional.select.rated.output')} (kW)`,
width: '10%',
prop: 'ratedOutput',
},
{
name: `${getMessage('modal.circuit.trestle.setting.power.conditional.select.circuit.amount')}`,
width: '10%',
prop: 'circuitAmount',
},
{
name: `${getMessage('modal.circuit.trestle.setting.power.conditional.select.max.connection')}`,
width: '10%',
prop: 'maxConnection',
},
{
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',
},
]
const onCheckSeries = (series) => {
setSeries((prev) => prev.map((s) => ({ ...s, selected: s.pcsSerCd === series.pcsSerCd ? !s.selected : s.selected })))
}
return (
<>
<div className="outline-form mb15">
<span className="mr10">分類 (余剰)</span>
<span className="mr10">
{getMessage('common.type')} ({getMessage(managementState?.conType === '0' ? 'stuff.detail.conType0' : 'stuff.detail.conType1')})
</span>
<div className="grid-select mr10">
<QSelectBox title={'HQJPシリーズ'} option={SelectOption01} />
<QSelectBox
title={'PCS Maker'}
options={makers}
showKey={globalLocale === 'ko' ? 'pcsMkrNm' : 'pcsMkrNmJp'}
sourceKey="pcsMkrCd"
targetKey="pcsMkrCd"
value={selectedMaker}
onChange={(option) => setSelectedMaker(option)}
/>
</div>
<span className="thin">寒冷地仕様</span>
{managementState?.conType === '1' && (
<span className="thin">{getMessage('modal.circuit.trestle.setting.power.conditional.select.cold.region')}</span>
)}
</div>
<div className="module-table-box mb10">
<div className="module-table-inner">
<div className="circuit-check-inner">
<div className="d-check-box pop mb15 sel">
<input type="checkbox" id="ch01" />
<label htmlFor="ch01">屋内PCSHQJP-KA-5シリーズ</label>
</div>
<div className="d-check-box pop sel">
<input type="checkbox" id="ch02" />
<label htmlFor="ch02">屋外マルチPCSHQJP-RA5シリーズ</label>
</div>
<div className="circuit-check-inner overflow">
{series?.map((series, index) => (
<div className="d-check-box pop sel">
<input type="checkbox" id={`"ch0"${index}`} onClick={() => onCheckSeries(series)} />
<label htmlFor={`"ch0"${index}`}>{globalLocale === 'ko' ? series.pcsSerNm : series.pcsSerNmJp}</label>
</div>
))}
</div>
</div>
</div>
@ -94,7 +96,7 @@ export default function PowerConditionalSelect({ setTabNum }) {
<table>
<thead>
<tr>
{seriesData.header.map((header) => (
{modelHeader.map((header) => (
<th key={header.prop} style={{ width: header.width }}>
{header.name}
</th>
@ -102,13 +104,15 @@ export default function PowerConditionalSelect({ setTabNum }) {
</tr>
</thead>
<tbody>
{seriesData.rows.map((row, index) => (
<tr key={index} onClick={() => setSelectedRowIndex(index)} className={index === selectedRowIndex ? 'on' : ''}>
{seriesData.header.map((header) => (
<td>{row[header.prop].name}</td>
))}
</tr>
))}
{models
?.filter((model) => model.series === selectedSeries?.code)
.map((row, index) => (
<tr key={index} onClick={() => setSelectedRowIndex(index)} className={index === selectedRowIndex ? 'on' : ''}>
{modelHeader.map((header) => (
<td>{row[header.prop]}</td>
))}
</tr>
))}
</tbody>
</table>
</div>
@ -117,22 +121,18 @@ export default function PowerConditionalSelect({ setTabNum }) {
<button className="btn-frame self mr5">{getMessage('modal.common.add')}</button>
</div>
<div className="circuit-data-form">
<span className="normal-font">
HQJP-KA40-5 <button className="del"></button>
</span>
<span className="normal-font">
HQJP-KA40-5 <button className="del"></button>
</span>
<span className="normal-font">
HQJP-KA40-5 <button className="del"></button>
</span>
{selectedModels?.map((model) => (
<span className="normal-font">
{model.name} <button className="del"></button>
</span>
))}
</div>
</div>
</div>
<div className="slope-wrap">
<div className="d-check-box pop mb15">
<input type="checkbox" id="ch03" />
<label htmlFor="ch03"> {getMessage('modal.circuit.trestle.setting.power.conditional.select.check1')}</label>
<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" />
@ -141,6 +141,14 @@ export default function PowerConditionalSelect({ setTabNum }) {
</label>
</div>
</div>
{/* <div className="grid-btn-wrap">
<button className="btn-frame modal mr5" onClick={() => setTabNum(2)}>
{getMessage('modal.circuit.trestle.setting.circuit.allocation.auto')}
</button>
<button className="btn-frame modal act" onClick={() => setTabNum(tabNum + 1)}>
{getMessage('modal.circuit.trestle.setting.circuit.allocation.passivity')}
</button>
</div> */}
</>
)
}

View File

@ -1,395 +1,114 @@
import QSelectBox from '@/components/common/select/QSelectBox'
import { useMessage } from '@/hooks/useMessage'
import { useState } from 'react'
const SelectOption01 = [{ name: '0' }, { name: '0' }, { name: '0' }, { name: '0' }]
export default function StepUp({}) {
const { getMessage } = useMessage()
const [moduleTab, setModuleTab] = useState(1)
const [arrayLength, setArrayLength] = useState(3) //module-table-inner
return (
<>
<div className="properties-setting-wrap outer">
<div className="setting-tit">{getMessage('modal.circuit.trestle.setting.step.up.allocation')}</div>
<div className="circuit-overflow">
<div className="module-table-box mb10">
<div className="module-table-inner">
<div className="mb-box">
<div className="circuit-table-tit">HQJP-KA55-5</div>
<div className="roof-module-table overflow-y">
<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>
<tr>
<td className="al-r">10</td>
<td className="al-r">0</td>
</tr>
<tr>
<td className="al-r">10</td>
<td className="al-r">0</td>
</tr>
<tr>
<td className="al-r">10</td>
<td className="al-r">0</td>
</tr>
<tr>
<td className="al-r">10</td>
<td className="al-r">0</td>
</tr>
<tr>
<td className="al-r">10</td>
<td className="al-r">0</td>
</tr>
</tbody>
</table>
</div>
</div>
<div className="circuit-table-flx-wrap">
<div className="circuit-table-flx-box">
<div className="bold-font mb10">{getMessage('modal.circuit.trestle.setting.step.up.allocation.connected')}</div>
<div className="roof-module-table mb10">
{/* 3개일때 className = by-max */}
<div className={`module-table-box ${arrayLength === 3 ? 'by-max' : ''}`}>
{Array.from({ length: arrayLength }).map((_, idx) => (
<div key={idx} className="module-table-inner">
<div className="mb-box">
<div className="circuit-table-tit">HQJP-KA55-5</div>
<div className="roof-module-table overflow-y min">
<table>
<thead>
<tr>
<th style={{ width: '140px' }}>{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>
<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>
<tr>
<td className="al-c">KTN-CBD4C</td>
<td className="al-r">4</td>
<tr className="on">
<td className="al-r">10</td>
<td className="al-r">0</td>
</tr>
<tr>
<td className="al-c">KTN-CBD4C</td>
<td className="al-r">4</td>
<td className="al-r">10</td>
<td className="al-r">0</td>
</tr>
<tr>
<td className="al-c">KTN-CBD4C</td>
<td className="al-r">4</td>
<td className="al-r">10</td>
<td className="al-r">0</td>
</tr>
<tr>
<td className="al-r">10</td>
<td className="al-r">0</td>
</tr>
<tr>
<td className="al-r">10</td>
<td className="al-r">0</td>
</tr>
<tr>
<td className="al-r">10</td>
<td className="al-r">0</td>
</tr>
</tbody>
</table>
</div>
<div className="bottom-wrap">
<div className="circuit-right-wrap mb10">
<button className="btn-frame self mr5">{getMessage('modal.common.add')}</button>
</div>
<div className="circuit-data-form">
<span className="normal-font">
HQJP-KA40-5<button className="del"></button>
</span>
</div>
</div>
</div>
<div className="circuit-table-flx-box">
<div className="bold-font mb10">{getMessage('modal.circuit.trestle.setting.step.up.allocation.option')}</div>
<div className="roof-module-table 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>
<tr>
<td className="al-c">-</td>
<td className="al-c">-</td>
</tr>
</tbody>
</table>
</div>
<div className="bottom-wrap">
<div className="circuit-right-wrap mb10">
<button className="btn-frame self mr5">{getMessage('modal.common.add')}</button>
<div className="module-box-tab mb10">
<button className={`module-btn ${moduleTab === 1 ? 'act' : ''}`} onClick={() => setModuleTab(1)}>
{getMessage('modal.circuit.trestle.setting.step.up.allocation.connected')}
</button>
<button className={`module-btn ${moduleTab === 2 ? 'act' : ''}`} onClick={() => setModuleTab(2)}>
{getMessage('modal.circuit.trestle.setting.step.up.allocation.option')}
</button>
</div>
<div className="circuit-table-flx-wrap">
{moduleTab === 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">KTN-CBD4C</td>
<td className="al-r">4</td>
<td className="al-r">0</td>
</tr>
</tbody>
</table>
</div>
</div>
<div className="circuit-data-form">
<span className="normal-font">
HQJP-KA40-5<button className="del"></button>
</span>
)}
{moduleTab === 2 && (
<div className="circuit-table-flx-box">
<div className="roof-module-table min mb10">
<table>
<thead>
<tr>
<th>名称</th>
<th>昇圧回路数</th>
</tr>
</thead>
<tbody>
<tr>
<td className="al-c">-</td>
<td className="al-c">-</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
)}
</div>
</div>
<div className="circuit-count-input">
<span className="normal-font">{getMessage('modal.module.basic.setting.module.cotton.classification')}</span>
<div className="input-grid mr5" style={{ width: '40px' }}>
<input type="text" className="input-origin block" />
</div>
<span className="normal-font">回路</span>
<span className="normal-font">(二重昇圧回路数</span>
<div className="input-grid mr5" style={{ width: '40px' }}>
<input type="text" className="input-origin block" />
</div>
<span className="normal-font">回路)</span>
</div>
</div>
</div>
<div className="module-table-box mb10">
<div className="module-table-inner">
<div className="mb-box">
<div className="circuit-table-tit">HQJP-KA55-5</div>
<div className="roof-module-table overflow-y">
<table>
<thead>
<tr>
<th>シリアル枚数</th>
<th>総回路数</th>
</tr>
</thead>
<tbody>
<tr>
<td className="al-r">10</td>
<td className="al-r">0</td>
</tr>
<tr>
<td className="al-r">10</td>
<td className="al-r">0</td>
</tr>
<tr>
<td className="al-r">10</td>
<td className="al-r">0</td>
</tr>
<tr>
<td className="al-r">10</td>
<td className="al-r">0</td>
</tr>
<tr>
<td className="al-r">10</td>
<td className="al-r">0</td>
</tr>
</tbody>
</table>
</div>
</div>
<div className="circuit-table-flx-wrap">
<div className="circuit-table-flx-box">
<div className="bold-font mb10">接続する</div>
<div className="roof-module-table mb10">
<table>
<thead>
<tr>
<th style={{ width: '140px' }}>名称</th>
<th>回路数</th>
<th>昇圧回路数</th>
</tr>
</thead>
<tbody>
<tr>
<td className="al-c">KTN-CBD4C</td>
<td className="al-r">4</td>
<td className="al-r">0</td>
</tr>
<tr>
<td className="al-c">KTN-CBD4C</td>
<td className="al-r">4</td>
<td className="al-r">0</td>
</tr>
<tr>
<td className="al-c">KTN-CBD4C</td>
<td className="al-r">4</td>
<td className="al-r">0</td>
</tr>
</tbody>
</table>
</div>
<div className="bottom-wrap">
<div className="circuit-right-wrap mb10">
<button className="btn-frame self mr5">追加</button>
</div>
<div className="circuit-data-form">
<span className="normal-font">
HQJP-KA40-5<button className="del"></button>
</span>
</div>
</div>
</div>
<div className="circuit-table-flx-box">
<div className="bold-font mb10">昇圧オプション</div>
<div className="roof-module-table mb10">
<table>
<thead>
<tr>
<th>名称</th>
<th>昇圧回路数</th>
</tr>
</thead>
<tbody>
<tr>
<td className="al-c">-</td>
<td className="al-c">-</td>
</tr>
<tr>
<td className="al-c">-</td>
<td className="al-c">-</td>
</tr>
</tbody>
</table>
</div>
<div className="bottom-wrap">
<div className="circuit-right-wrap mb10">
<button className="btn-frame self mr5">追加</button>
</div>
<div className="circuit-data-form">
<span className="normal-font">
HQJP-KA40-5<button className="del"></button>
</span>
</div>
</div>
</div>
</div>
<div className="circuit-count-input">
<span className="normal-font">綿調道区分</span>
<div className="input-grid mr5" style={{ width: '40px' }}>
<input type="text" className="input-origin block" />
</div>
<span className="normal-font">回路</span>
<span className="normal-font">(二重昇圧回路数</span>
<div className="input-grid mr5" style={{ width: '40px' }}>
<input type="text" className="input-origin block" />
</div>
<span className="normal-font">回路)</span>
</div>
</div>
</div>
<div className="module-table-box ">
<div className="module-table-inner">
<div className="mb-box">
<div className="circuit-table-tit">HQJP-KA55-5</div>
<div className="roof-module-table overflow-y">
<table>
<thead>
<tr>
<th>シリアル枚数</th>
<th>総回路数</th>
</tr>
</thead>
<tbody>
<tr>
<td className="al-r">10</td>
<td className="al-r">0</td>
</tr>
<tr>
<td className="al-r">10</td>
<td className="al-r">0</td>
</tr>
<tr>
<td className="al-r">10</td>
<td className="al-r">0</td>
</tr>
<tr>
<td className="al-r">10</td>
<td className="al-r">0</td>
</tr>
<tr>
<td className="al-r">10</td>
<td className="al-r">0</td>
</tr>
</tbody>
</table>
</div>
</div>
<div className="circuit-table-flx-wrap">
<div className="circuit-table-flx-box">
<div className="bold-font mb10">接続する</div>
<div className="roof-module-table mb10">
<table>
<thead>
<tr>
<th style={{ width: '140px' }}>名称</th>
<th>回路数</th>
<th>昇圧回路数</th>
</tr>
</thead>
<tbody>
<tr>
<td className="al-c">KTN-CBD4C</td>
<td className="al-r">4</td>
<td className="al-r">0</td>
</tr>
<tr>
<td className="al-c">KTN-CBD4C</td>
<td className="al-r">4</td>
<td className="al-r">0</td>
</tr>
<tr>
<td className="al-c">KTN-CBD4C</td>
<td className="al-r">4</td>
<td className="al-r">0</td>
</tr>
</tbody>
</table>
</div>
<div className="bottom-wrap">
<div className="circuit-right-wrap mb10">
<button className="btn-frame self mr5">追加</button>
</div>
<div className="circuit-data-form">
<span className="normal-font">
HQJP-KA40-5<button className="del"></button>
</span>
</div>
</div>
</div>
<div className="circuit-table-flx-box">
<div className="bold-font mb10">昇圧オプション</div>
<div className="roof-module-table mb10">
<table>
<thead>
<tr>
<th>名称</th>
<th>昇圧回路数</th>
</tr>
</thead>
<tbody>
<tr>
<td className="al-c">-</td>
<td className="al-c">-</td>
</tr>
<tr>
<td className="al-c">-</td>
<td className="al-c">-</td>
</tr>
</tbody>
</table>
</div>
<div className="bottom-wrap">
<div className="circuit-right-wrap mb10">
<button className="btn-frame self mr5">追加</button>
</div>
<div className="circuit-data-form">
<span className="normal-font">
HQJP-KA40-5<button className="del"></button>
</span>
</div>
</div>
</div>
</div>
<div className="circuit-count-input">
<span className="normal-font">綿調道区分</span>
<div className="input-grid mr5" style={{ width: '40px' }}>
<input type="text" className="input-origin block" />
</div>
<span className="normal-font">回路</span>
<span className="normal-font">(二重昇圧回路数</span>
<div className="input-grid mr5" style={{ width: '40px' }}>
<input type="text" className="input-origin block" />
</div>
<span className="normal-font">回路)</span>
</div>
</div>
))}
</div>
</div>
<div className="slope-wrap">
@ -398,17 +117,11 @@ export default function StepUp({}) {
{getMessage('modal.circuit.trestle.setting.step.up.allocation.select.monitor')}
</span>
<div className="grid-select mr10">
<QSelectBox title={'電力検出ユニット (モニター付き)'} option={SelectOption01} />
<QSelectBox title={'電力検出ユニット (モニター付き)'} options={SelectOption01} />
</div>
</div>
</div>
</div>
{/*<div className="grid-btn-wrap">*/}
{/* <button className="btn-frame modal mr5" onClick={() => setTabNum(2)}>*/}
{/* 以前*/}
{/* </button>*/}
{/* <button className="btn-frame modal act">保存 (仮割り当て)</button>*/}
{/*</div>*/}
</>
)
}

View File

@ -5,6 +5,7 @@ export default function PassivityCircuitAllocation() {
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',
@ -17,11 +18,13 @@ export default function PassivityCircuitAllocation() {
rows: [
{
roofShape: { name: 'M 1' },
circuit: { name: 'M 1' },
moduleName: { name: '8' },
powerGeneration: { name: '3,400' },
},
{
roofShape: { name: 'M 1' },
circuit: { name: 'M 1' },
moduleName: { name: '8' },
powerGeneration: { name: '3,400' },
},
@ -29,74 +32,79 @@ export default function PassivityCircuitAllocation() {
}
return (
<>
<div className="module-table-box mb10">
<div className="module-table-inner">
<div className="bold-font mb10">{getMessage('modal.circuit.trestle.setting.circuit.allocation.passivity')}</div>
<div className="normal-font mb15">{getMessage('modal.circuit.trestle.setting.circuit.allocation.passivity.info')}</div>
<div className="roof-module-table overflow-y">
<table>
<thead>
<tr>
{moduleData.header.map((header) => (
<th key={header.prop}>{header.name}</th>
))}
</tr>
</thead>
<tbody>
{moduleData.rows.map((row, index) => (
<tr key={index}>
<div className="properties-setting-wrap outer">
<div className="setting-tit">{getMessage('modal.circuit.trestle.setting.circuit.allocation')}</div>
<div className="module-table-box mb10">
<div className="module-table-inner">
<div className="bold-font mb10">{getMessage('modal.circuit.trestle.setting.circuit.allocation.passivity')}</div>
<div className="normal-font mb15">{getMessage('modal.circuit.trestle.setting.circuit.allocation.passivity.info')}</div>
<div className="roof-module-table overflow-y">
<table>
<thead>
<tr>
{moduleData.header.map((header) => (
<td key={header.prop}>{row[header.prop].name}</td>
<th key={header.prop}>{header.name}</th>
))}
</tr>
))}
</tbody>
</table>
</thead>
<tbody>
{moduleData.rows.map((row, index) => (
<tr key={index}>
{moduleData.header.map((header) => (
<td className="al-c" key={header.prop}>
{row[header.prop].name}
</td>
))}
</tr>
))}
</tbody>
</table>
</div>
</div>
</div>
</div>
<div className="module-table-box mb10">
<div className="module-table-inner">
<div className="hexagonal-wrap">
<div className="hexagonal-item">
<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">
<input type="radio" name="radio01" id="ra01" />
<label htmlFor="ra01">HQJP-KA55-5 (標準回路2枚10)</label>
<div className="module-table-box mb10">
<div className="module-table-inner">
<div className="hexagonal-wrap">
<div className="hexagonal-item">
<div className="bold-font">{getMessage('modal.circuit.trestle.setting.circuit.allocation.passivity.selected.power.conditional')}</div>
</div>
<div className="d-check-radio pop mb10">
<input type="radio" name="radio01" id="ra02" />
<label htmlFor="ra02">HQJP-KA55-5 (標準回路2枚10)</label>
</div>
<div className="d-check-radio pop">
<input type="radio" name="radio01" id="ra03" />
<label htmlFor="ra03">HQJP-KA55-5 (標準回路2枚10)</label>
<div className="hexagonal-item">
<div className="d-check-radio pop mb10">
<input type="radio" name="radio01" id="ra01" />
<label htmlFor="ra01">HQJP-KA55-5 (標準回路2枚10)</label>
</div>
<div className="d-check-radio pop mb10">
<input type="radio" name="radio01" id="ra02" />
<label htmlFor="ra02">HQJP-KA55-5 (標準回路2枚10)</label>
</div>
<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>
</div>
<div className="slope-wrap">
<div className="circuit-right-wrap mb15">
<div className="outline-form">
<span className="mr10" style={{ width: 'auto' }}>
{getMessage('modal.circuit.trestle.setting.circuit.allocation.passivity.circuit.num')}
</span>
<div className="input-grid mr5" style={{ width: '70px' }}>
<input type="text" className="input-origin block" />
<div className="slope-wrap">
<div className="circuit-right-wrap mb15">
<div className="outline-form">
<span className="mr10" style={{ width: 'auto' }}>
{getMessage('modal.circuit.trestle.setting.circuit.allocation.passivity.circuit.num')}
</span>
<div className="input-grid mr5" style={{ width: '70px' }}>
<input type="text" className="input-origin block" />
</div>
<button className="btn-frame roof">{getMessage('modal.circuit.trestle.setting.circuit.allocation.passivity.circuit.num.fix')}</button>
</div>
</div>
</div>
<div className="circuit-right-wrap">
<button className="btn-frame roof mr5">
{getMessage('modal.circuit.trestle.setting.circuit.allocation.passivity.selected.power.conditional.reset')}
</button>
<button className="btn-frame roof mr5">
{getMessage('modal.circuit.trestle.setting.circuit.allocation.passivity.all.power.conditional.reset')}
</button>
<button className="btn-frame roof">{getMessage('modal.circuit.trestle.setting.circuit.allocation.passivity.circuit.num.fix')}</button>
<div className="circuit-right-wrap">
<button className="btn-frame roof mr5">
{getMessage('modal.circuit.trestle.setting.circuit.allocation.passivity.selected.power.conditional.reset')}
</button>
<button className="btn-frame roof mr5">
{getMessage('modal.circuit.trestle.setting.circuit.allocation.passivity.all.power.conditional.reset')}
</button>
</div>
</div>
</div>
</>

View File

@ -118,11 +118,12 @@ export function useMasterController() {
* @param {혼합모듈번호} mixMatlNo
* @returns
*/
const getPcsMakerList = async (params) => {
const paramString = getQueryString(params)
console.log('🚀🚀 ~ getPcsMakerList ~ paramString:', paramString)
const getPcsMakerList = async (params = null) => {
let paramString = ''
if (params) {
paramString = getQueryString(params)
}
return await get({ url: '/api/v1/master/pcsMakerList' + paramString }).then((res) => {
console.log('🚀🚀 ~ getPcsMakerList ~ res:', res)
return res
})
}

View File

@ -129,6 +129,7 @@
"modal.circuit.trestle.setting": "回路と架台設定",
"modal.circuit.trestle.setting.alloc.trestle": "仮割り当て",
"modal.circuit.trestle.setting.power.conditional.select": "パワーコンディショナーを選択",
"modal.circuit.trestle.setting.power.conditional.select.cold.region": "寒冷地仕様",
"modal.circuit.trestle.setting.power.conditional.select.name": "名称",
"modal.circuit.trestle.setting.power.conditional.select.rated.output": "定格出力",
"modal.circuit.trestle.setting.power.conditional.select.circuit.amount": "回路数",
@ -500,6 +501,8 @@
"commons.east": "ドン",
"commons.south": "南",
"commons.north": "北",
"commons.none": "선택안함(JA)",
"common.type": "分類",
"font.style.normal": "보통(JA)",
"font.style.italic": "기울임꼴(JA)",
"font.style.bold": "굵게(JA)",

View File

@ -133,6 +133,7 @@
"modal.circuit.trestle.setting": "회로 및 가대설정",
"modal.circuit.trestle.setting.alloc.trestle": "가대할당",
"modal.circuit.trestle.setting.power.conditional.select": "파워컨디셔너 선택",
"modal.circuit.trestle.setting.power.conditional.select.cold.region": "한랭지사양",
"modal.circuit.trestle.setting.power.conditional.select.name": "명칭",
"modal.circuit.trestle.setting.power.conditional.select.rated.output": "정격출력",
"modal.circuit.trestle.setting.power.conditional.select.circuit.amount": "회로수",
@ -510,6 +511,7 @@
"commons.south": "남",
"commons.north": "북",
"commons.none": "선택안함",
"common.type": "분류",
"font.style.normal": "보통",
"font.style.italic": "기울임꼴",
"font.style.bold": "굵게",

File diff suppressed because it is too large Load Diff