회로및가대설정 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 canvas = useRecoilValue(canvasState)
|
||||
const selectedModules = useRecoilValue(selectedModuleState)
|
||||
const [stepUpListData, setStepUpListData] = useState([])
|
||||
const [optCodes, setOptCodes] = useState([])
|
||||
|
||||
useEffect(() => {
|
||||
if (!managementState) {
|
||||
@ -68,7 +70,44 @@ export default function StepUp(props) {
|
||||
roofSurfaceList: roofSurfaceList,
|
||||
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)
|
||||
@ -81,112 +120,101 @@ export default function StepUp(props) {
|
||||
<div className="properties-setting-wrap outer">
|
||||
<div className="circuit-overflow">
|
||||
{/* 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>{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 className="on">
|
||||
<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>
|
||||
<tr>
|
||||
<td className="al-r">10</td>
|
||||
<td className="al-r">0</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
{stepUpListData.map((stepUp, index) => (
|
||||
<div key={index} className={`module-table-box ${stepUp.pcsItemList.length === 3 ? 'by-max' : ''}`}>
|
||||
{Array.from({ length: stepUp.pcsItemList.length }).map((_, 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>
|
||||
{stepUp.pcsItemList[idx].serQtyList.map((item) => {
|
||||
return (
|
||||
<tr className="on">
|
||||
<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 ${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">{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 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>
|
||||
)}
|
||||
{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="outline-form">
|
||||
<span className="mr10" style={{ width: 'auto' }}>
|
||||
{getMessage('modal.circuit.trestle.setting.step.up.allocation.select.monitor')}
|
||||
</span>
|
||||
<div className="grid-select mr10">
|
||||
<QSelectBox title={'電力検出ユニット (モニター付き)'} />
|
||||
</div>
|
||||
{optCodes.length > 0 && (
|
||||
<div className="grid-select mr10">
|
||||
<QSelectBox title={'電力検出ユニット (モニター付き)'} />
|
||||
{/* <QSelectBox options={optCodes} value={optCodes.name} sourceKey="code" targetKey="code" showKey="name" /> */}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user