회로및가대설정 PCS 승압설정 화면 조회 처리
This commit is contained in:
changkyu choi
parent
6ec631cc8b
commit
58716d22a5
@ -20,6 +20,8 @@ export default function StepUp(props) {
|
|||||||
const { managementState, setManagementState, managementStateLoaded } = useContext(GlobalDataContext)
|
const { managementState, setManagementState, managementStateLoaded } = useContext(GlobalDataContext)
|
||||||
const canvas = useRecoilValue(canvasState)
|
const canvas = useRecoilValue(canvasState)
|
||||||
const selectedModules = useRecoilValue(selectedModuleState)
|
const selectedModules = useRecoilValue(selectedModuleState)
|
||||||
|
const [stepUpListData, setStepUpListData] = useState([])
|
||||||
|
const [optCodes, setOptCodes] = useState([])
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!managementState) {
|
if (!managementState) {
|
||||||
@ -68,7 +70,44 @@ export default function StepUp(props) {
|
|||||||
roofSurfaceList: roofSurfaceList,
|
roofSurfaceList: roofSurfaceList,
|
||||||
pscItemList: pscItemList,
|
pscItemList: pscItemList,
|
||||||
}
|
}
|
||||||
getPcsVoltageStepUpList(null)
|
//getPcsVoltageStepUpList(null)
|
||||||
|
|
||||||
|
getPcsVoltageStepUpList().then((res) => {
|
||||||
|
if (res?.result.code === 200 && res?.data) {
|
||||||
|
const dataArray = Array.isArray(res.data) ? res.data : [res.data]
|
||||||
|
const stepUpListData = dataArray.map((stepUps) => ({
|
||||||
|
...stepUps,
|
||||||
|
optionList: (stepUps.optionList || []).map((option) => ({
|
||||||
|
pcsOptCd: option.pcsOptCd,
|
||||||
|
pcsOptNm: option.pcsOptNm,
|
||||||
|
pcsOptNmJp: option.pcsOptNmJp,
|
||||||
|
})),
|
||||||
|
pcsItemList: (stepUps.pcsItemList || []).map((item) => ({
|
||||||
|
goodsNo: item.goodsNo,
|
||||||
|
itemId: item.itemId,
|
||||||
|
itemNm: item.itemNm,
|
||||||
|
pcsMkrCd: item.pcsMkrCd,
|
||||||
|
pcsSerCd: item.pcsSerCd,
|
||||||
|
connList: (item.connList || []).map((conn) => ({
|
||||||
|
connAllowCur: conn.connAllowCur,
|
||||||
|
connMaxParalCnt: conn.connMaxParalCnt,
|
||||||
|
goodsNo: conn.goodsNo,
|
||||||
|
itemId: conn.itemId,
|
||||||
|
itemNm: conn.itemNm,
|
||||||
|
vstuParalCnt: conn.vstuParalCnt,
|
||||||
|
})),
|
||||||
|
serQtyList: (item.serQtyList || []).map((qty) => ({
|
||||||
|
serQty: qty.serQty,
|
||||||
|
paralQty: qty.paralQty,
|
||||||
|
})),
|
||||||
|
})),
|
||||||
|
}))
|
||||||
|
console.log('🚀 ~ useEffect ~ getPcsVoltageStepUpList ~ stepUpListData:', stepUpListData)
|
||||||
|
setStepUpListData(stepUpListData)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
//setOptCodes(stepUpListData.optionList.map((opt) => ({ ...opt, code: opt.pcsOptCd, name: opt.pcsOptNm, nameJp: opt.pcsOptNmJp })))
|
||||||
}, [])
|
}, [])
|
||||||
|
|
||||||
useCanvasPopupStatusController(6)
|
useCanvasPopupStatusController(6)
|
||||||
@ -81,112 +120,101 @@ export default function StepUp(props) {
|
|||||||
<div className="properties-setting-wrap outer">
|
<div className="properties-setting-wrap outer">
|
||||||
<div className="circuit-overflow">
|
<div className="circuit-overflow">
|
||||||
{/* 3개일때 className = by-max */}
|
{/* 3개일때 className = by-max */}
|
||||||
<div className={`module-table-box ${arrayLength === 3 ? 'by-max' : ''}`}>
|
{stepUpListData.map((stepUp, index) => (
|
||||||
{Array.from({ length: arrayLength }).map((_, idx) => (
|
<div key={index} className={`module-table-box ${stepUp.pcsItemList.length === 3 ? 'by-max' : ''}`}>
|
||||||
<div key={idx} className="module-table-inner">
|
{Array.from({ length: stepUp.pcsItemList.length }).map((_, idx) => (
|
||||||
<div className="mb-box">
|
<div key={idx} className="module-table-inner">
|
||||||
<div className="circuit-table-tit">HQJP-KA55-5</div>
|
<div className="mb-box">
|
||||||
<div className="roof-module-table overflow-y min">
|
<div className="circuit-table-tit">{stepUp.pcsItemList[idx].goodsNo}</div>
|
||||||
<table>
|
<div className="roof-module-table overflow-y min">
|
||||||
<thead>
|
<table>
|
||||||
<tr>
|
<thead>
|
||||||
<th>{getMessage('modal.circuit.trestle.setting.step.up.allocation.serial.amount')}</th>
|
<tr>
|
||||||
<th>{getMessage('modal.circuit.trestle.setting.step.up.allocation.total.amount')}</th>
|
<th>{getMessage('modal.circuit.trestle.setting.step.up.allocation.serial.amount')}</th>
|
||||||
</tr>
|
<th>{getMessage('modal.circuit.trestle.setting.step.up.allocation.total.amount')}</th>
|
||||||
</thead>
|
</tr>
|
||||||
<tbody>
|
</thead>
|
||||||
<tr className="on">
|
<tbody>
|
||||||
<td className="al-r">10</td>
|
{stepUp.pcsItemList[idx].serQtyList.map((item) => {
|
||||||
<td className="al-r">0</td>
|
return (
|
||||||
</tr>
|
<tr className="on">
|
||||||
<tr>
|
<td className="al-r">{item.serQty}</td>
|
||||||
<td className="al-r">10</td>
|
<td className="al-r">{item.paralQty}</td>
|
||||||
<td className="al-r">0</td>
|
</tr>
|
||||||
</tr>
|
)
|
||||||
<tr>
|
})}
|
||||||
<td className="al-r">10</td>
|
</tbody>
|
||||||
<td className="al-r">0</td>
|
</table>
|
||||||
</tr>
|
</div>
|
||||||
<tr>
|
</div>
|
||||||
<td className="al-r">10</td>
|
<div className="module-box-tab mb10">
|
||||||
<td className="al-r">0</td>
|
<button className={`module-btn ${moduleTab === 1 ? 'act' : ''}`} onClick={() => setModuleTab(1)}>
|
||||||
</tr>
|
{getMessage('modal.circuit.trestle.setting.step.up.allocation.connected')}
|
||||||
<tr>
|
</button>
|
||||||
<td className="al-r">10</td>
|
<button className={`module-btn ${moduleTab === 2 ? 'act' : ''}`} onClick={() => setModuleTab(2)}>
|
||||||
<td className="al-r">0</td>
|
{getMessage('modal.circuit.trestle.setting.step.up.allocation.option')}
|
||||||
</tr>
|
</button>
|
||||||
<tr>
|
</div>
|
||||||
<td className="al-r">10</td>
|
<div className="circuit-table-flx-wrap">
|
||||||
<td className="al-r">0</td>
|
{moduleTab === 1 && (
|
||||||
</tr>
|
<div className="circuit-table-flx-box">
|
||||||
</tbody>
|
<div className="roof-module-table min mb10">
|
||||||
</table>
|
<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}</td>
|
||||||
|
<td className="al-r">{stepUp.pcsItemList[idx].connList[0].connMaxParalCnt}</td>
|
||||||
|
<td className="al-r">{stepUp.pcsItemList[idx].connList[0].vstuParalCnt}</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{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>
|
||||||
<div className="module-box-tab mb10">
|
))}
|
||||||
<button className={`module-btn ${moduleTab === 1 ? 'act' : ''}`} onClick={() => setModuleTab(1)}>
|
</div>
|
||||||
{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>
|
|
||||||
)}
|
|
||||||
{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>
|
</div>
|
||||||
<div className="slope-wrap">
|
<div className="slope-wrap">
|
||||||
<div className="outline-form">
|
<div className="outline-form">
|
||||||
<span className="mr10" style={{ width: 'auto' }}>
|
<span className="mr10" style={{ width: 'auto' }}>
|
||||||
{getMessage('modal.circuit.trestle.setting.step.up.allocation.select.monitor')}
|
{getMessage('modal.circuit.trestle.setting.step.up.allocation.select.monitor')}
|
||||||
</span>
|
</span>
|
||||||
<div className="grid-select mr10">
|
{optCodes.length > 0 && (
|
||||||
<QSelectBox title={'電力検出ユニット (モニター付き)'} />
|
<div className="grid-select mr10">
|
||||||
</div>
|
<QSelectBox title={'電力検出ユニット (モニター付き)'} />
|
||||||
|
{/* <QSelectBox options={optCodes} value={optCodes.name} sourceKey="code" targetKey="code" showKey="name" /> */}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user