회로및가대설정 PCS 승압설정 화면 조회 처리

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

@@ -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,11 +120,12 @@ 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' : ''}`}>
+          {stepUpListData.map((stepUp, index) => (
-            {Array.from({ length: arrayLength }).map((_, idx) => (
+            <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">HQJP-KA55-5</div>
+                    <div className="circuit-table-tit">{stepUp.pcsItemList[idx].goodsNo}</div>
                     <div className="roof-module-table overflow-y min">
                       <table>
                         <thead>
@@ -95,30 +135,14 @@ export default function StepUp(props) {
                           </tr>
                         </thead>
                         <tbody>
+                          {stepUp.pcsItemList[idx].serQtyList.map((item) => {
+                            return (
                               <tr className="on">
-                          <td className="al-r">10</td>
+                                <td className="al-r">{item.serQty}</td>
-                          <td className="al-r">0</td>
+                                <td className="al-r">{item.paralQty}</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>
                     </div>
@@ -145,9 +169,9 @@ export default function StepUp(props) {
                             </thead>
                             <tbody>
                               <tr>
-                              <td className="al-c">KTN-CBD4C</td>
+                                <td className="al-c">{stepUp.pcsItemList[idx].connList[0].goodsNo}</td>
-                              <td className="al-r">4</td>
+                                <td className="al-r">{stepUp.pcsItemList[idx].connList[0].connMaxParalCnt}</td>
-                              <td className="al-r">0</td>
+                                <td className="al-r">{stepUp.pcsItemList[idx].connList[0].vstuParalCnt}</td>
                               </tr>
                             </tbody>
                           </table>
@@ -178,15 +202,19 @@ export default function StepUp(props) {
                 </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>
+            {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>