- 회로 및 가대 설정 모달 추가

src/components/floor-plan/CanvasMenu.jsx

@@ -48,6 +48,7 @@ export default function CanvasMenu(props) {
     setShowWallLineOffsetSettingModal,
     setShowRoofAllocationSettingModal,
     setShowBasicSettingModal,
+    setShowCircuitTrestleSettingModal,
     setShowPropertiesSettingModal,
   } = props
 
@@ -105,6 +106,7 @@ export default function CanvasMenu(props) {
     setShowRoofAllocationSettingModal,
     setShowObjectSettingModal,
     setShowBasicSettingModal,
+    setShowCircuitTrestleSettingModal,
     setShowPropertiesSettingModal,
     type,
   }

src/components/floor-plan/FloorPlan.jsx

@@ -27,6 +27,7 @@ import RoofShapePassivitySetting from '@/components/floor-plan/modal/roofShape/R
 import MovementSetting from '@/components/floor-plan/modal/movement/MovementSetting'
 import RoofAllocationSetting from '@/components/floor-plan/modal/roofAllocation/RoofAllocationSetting'
 import BasicSetting from '@/components/floor-plan/modal/basic/BasicSetting'
+import CircuitTrestleSetting from '@/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting'
 
 export default function FloorPlan() {
   const [showCanvasSettingModal, setShowCanvasSettingModal] = useState(false)
@@ -45,6 +46,7 @@ export default function FloorPlan() {
   const [showWallLineOffsetSettingModal, setShowWallLineOffsetSettingModal] = useState(false)
   const [showRoofAllocationSettingModal, setShowRoofAllocationSettingModal] = useState(false)
   const [showBasicSettingModal, setShowBasicSettingModal] = useState(false)
+  const [showCircuitTrestleSettingModal, setShowCircuitTrestleSettingModal] = useState(false)
   const globalLocaleState = useRecoilValue(globalLocaleStore)
   const { get } = useAxios(globalLocaleState)
 
@@ -84,6 +86,7 @@ export default function FloorPlan() {
     setShowWallLineOffsetSettingModal,
     setShowRoofAllocationSettingModal,
     setShowBasicSettingModal,
+    setShowCircuitTrestleSettingModal,
     setShowPropertiesSettingModal,
   }
 
@@ -159,6 +162,7 @@ export default function FloorPlan() {
           {showObjectSettingModal && <ObjectSetting setShowObjectSettingModal={setShowObjectSettingModal} />}
           {showPlacementSurfaceSettingModal && <PlacementSurfaceSetting setShowPlacementSurfaceSettingModal={setShowPlacementSurfaceSettingModal} />}
           {showBasicSettingModal && <BasicSetting setShowBasicSettingModal={setShowBasicSettingModal} />}
+          {showCircuitTrestleSettingModal && <CircuitTrestleSetting setShowCircuitTrestleSettingModal={setShowCircuitTrestleSettingModal} />}
         </div>
       </div>
     </>

src/components/floor-plan/MenuDepth01.jsx

@@ -23,6 +23,7 @@ export default function MenuDepth01(props) {
     setShowRoofAllocationSettingModal,
     setShowObjectSettingModal,
     setShowBasicSettingModal,
+    setShowCircuitTrestleSettingModal,
     setShowPropertiesSettingModal,
   } = props
   const { getMessage } = useMessage()
@@ -44,6 +45,7 @@ export default function MenuDepth01(props) {
       setShowRoofAllocationSettingModal(id === 7)
       setShowPlaceShapeDrawingModal(false)
       setShowPropertiesSettingModal(false)
+      setShowCircuitTrestleSettingModal(false)
     }
 
     if (type === 'surface') {
@@ -56,6 +58,7 @@ export default function MenuDepth01(props) {
       setShowWallLineOffsetSettingModal(false)
       setShowRoofAllocationSettingModal(false)
       setShowPropertiesSettingModal(false)
+      setShowCircuitTrestleSettingModal(false)
       setShowSlopeSettingModal(id === 0)
       setShowPlaceShapeDrawingModal(id === 1)
       setShowPlacementSurfaceSettingModal(id === 2)
@@ -73,6 +76,7 @@ export default function MenuDepth01(props) {
       setShowRoofAllocationSettingModal(false)
       setShowPropertiesSettingModal(false)
       setShowBasicSettingModal(id === 0)
+      setShowCircuitTrestleSettingModal(id === 1)
     }
   }
 

src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx

@@ -0,0 +1,57 @@
+import WithDraggable from '@/components/common/draggable/withDraggable'
+import { useState } 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'
+
+export default function CircuitTrestleSetting({ setShowCircuitTrestleSettingModal }) {
+  const { getMessage } = useMessage()
+  const [tabNum, setTabNum] = useState(1)
+  const [circuitAllocationType, setCircuitAllocationType] = useState(1)
+  const circuitProps = {
+    circuitAllocationType,
+    setCircuitAllocationType,
+  }
+  return (
+    <WithDraggable isShow={true} pos={{ x: 50, y: -950 }}>
+      <div className={`modal-pop-wrap lx-2`}>
+        <div className="modal-head">
+          <h1 className="title">{getMessage('modal.circuit.trestle.setting')} </h1>
+          <button className="modal-close" onClick={() => setShowCircuitTrestleSettingModal(false)}>
+            닫기
+          </button>
+        </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>
+            <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)}>
+                {getMessage('modal.common.prev')}
+              </button>
+            )}
+            {tabNum !== 3 && (
+              <button className="btn-frame modal act" onClick={() => setTabNum(tabNum + 1)}>
+                Next
+              </button>
+            )}
+            {tabNum === 3 && <button className="btn-frame modal act">保存 (仮割り当て)</button>}
+          </div>
+        </div>
+      </div>
+    </WithDraggable>
+  )
+}

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

@@ -0,0 +1,25 @@
+import AutoCircuitAllocation from '@/components/floor-plan/modal/circuitTrestle/step/type/AutoCircuitAllocation'
+import PassivityCircuitAllocation from '@/components/floor-plan/modal/circuitTrestle/step/type/PassivityCircuitAllocation'
+import { useMessage } from '@/hooks/useMessage'
+
+export default function CircuitAllocation(props) {
+  const { getMessage } = useMessage()
+  const { circuitAllocationType, setCircuitAllocationType } = props
+  return (
+    <>
+      <div className="module-box-tab">
+        <button className={`module-btn ${circuitAllocationType === 1 ? 'act' : ''}`} onClick={() => setCircuitAllocationType(1)}>
+          {getMessage('modal.circuit.trestle.setting.circuit.allocation.auto')}
+        </button>
+        <button className={`module-btn ${circuitAllocationType === 2 ? 'act' : ''}`} onClick={() => setCircuitAllocationType(2)}>
+          {getMessage('modal.circuit.trestle.setting.circuit.allocation.passivity')}
+        </button>
+      </div>
+      <div className="properties-setting-wrap outer">
+        <div className="setting-tit">{getMessage('modal.circuit.trestle.setting.circuit.allocation')}</div>
+        {circuitAllocationType === 1 && <AutoCircuitAllocation />}
+        {circuitAllocationType === 2 && <PassivityCircuitAllocation />}
+      </div>
+    </>
+  )
+}

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

@@ -0,0 +1,146 @@
+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 PowerConditionalSelect({ setTabNum }) {
+  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: '-' },
+      },
+    ],
+  }
+  return (
+    <>
+      <div className="outline-form mb15">
+        <span className="mr10">分類 (余剰)</span>
+        <div className="grid-select mr10">
+          <QSelectBox title={'HQJPシリーズ'} option={SelectOption01} />
+        </div>
+        <span className="thin">寒冷地仕様</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">屋内PCS（HQJP-KA-5シリーズ）</label>
+            </div>
+            <div className="d-check-box pop sel">
+              <input type="checkbox" id="ch02" />
+              <label htmlFor="ch02">屋外マルチPCS（HQJP-RA5シリーズ）</label>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="module-table-box mb15">
+        <div className="module-table-inner">
+          <div className="x-scroll-table mb10">
+            <div className="roof-module-table">
+              <table>
+                <thead>
+                  <tr>
+                    {seriesData.header.map((header) => (
+                      <th key={header.prop} style={{ width: header.width }}>
+                        {header.name}
+                      </th>
+                    ))}
+                  </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>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </div>
+          <div className="circuit-right-wrap mb10">
+            <button className="btn-frame self mr5">追加</button>
+            <button className="btn-frame self">削除</button>
+          </div>
+          <div className="circuit-data-form">
+            <span className="normal-font">HQJP-KA40-5</span>
+            <span className="normal-font">HQJP-KA40-5</span>
+            <span className="normal-font">HQJP-KA40-5</span>
+          </div>
+        </div>
+      </div>
+      <div className="slope-wrap">
+        <div className="d-check-box pop mb15">
+          <input type="checkbox" id="ch03" />
+          <label htmlFor="ch03">同一傾斜同一方面の面積の場合、同じ面として回路を分ける。</label>
+        </div>
+        <div className="d-check-box pop">
+          <input type="checkbox" id="ch04" />
+          <label className="red" htmlFor="ch04">
+            MAX接続（過積）で回路を分ける。
+          </label>
+        </div>
+      </div>
+      {/*<div className="grid-btn-wrap">*/}
+      {/*  <button className="btn-frame modal act" onClick={() => setTabNum(2)}>*/}
+      {/*    保存*/}
+      {/*  </button>*/}
+      {/*</div>*/}
+    </>
+  )
+}

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

@@ -0,0 +1,408 @@
+import QSelectBox from '@/components/common/select/QSelectBox'
+import { useMessage } from '@/hooks/useMessage'
+
+const SelectOption01 = [{ name: '0' }, { name: '0' }, { name: '0' }, { name: '0' }]
+
+export default function StepUp({}) {
+  const { getMessage } = useMessage()
+  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>シリアル枚数</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>
+                      <button className="btn-frame self">削除</button>
+                    </div>
+                    <div className="circuit-data-form">
+                      <span className="normal-font">HQJP-KA40-5</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>
+                      <button className="btn-frame self">削除</button>
+                    </div>
+                    <div className="circuit-data-form">
+                      <span className="normal-font">HQJP-KA40-5</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 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>
+                      <button className="btn-frame self">削除</button>
+                    </div>
+                    <div className="circuit-data-form">
+                      <span className="normal-font">HQJP-KA40-5</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>
+                      <button className="btn-frame self">削除</button>
+                    </div>
+                    <div className="circuit-data-form">
+                      <span className="normal-font">HQJP-KA40-5</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>
+                      <button className="btn-frame self">削除</button>
+                    </div>
+                    <div className="circuit-data-form">
+                      <span className="normal-font">HQJP-KA40-5</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>
+                      <button className="btn-frame self">削除</button>
+                    </div>
+                    <div className="circuit-data-form">
+                      <span className="normal-font">HQJP-KA40-5</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">
+          <div className="outline-form">
+            <span className="mr10" style={{ width: 'auto' }}>
+              モニターの選択
+            </span>
+            <div className="grid-select mr10">
+              <QSelectBox title={'電力検出ユニット (モニター付き)'} option={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>*/}
+    </>
+  )
+}

src/components/floor-plan/modal/circuitTrestle/step/type/AutoCircuitAllocation.jsx

@@ -0,0 +1,17 @@
+import { useMessage } from '@/hooks/useMessage'
+
+export default function AutoCircuitAllocation() {
+  const { getMessage } = useMessage()
+  return (
+    <div className="module-table-box">
+      <div className="module-table-inner">
+        <div className="circuit-check-inner">
+          <div className="d-check-radio pop">
+            <input type="radio" name="radio01" id="ra01" checked={true} />
+            <label htmlFor="ra01">{getMessage('modal.circuit.trestle.setting.circuit.allocation.auto')}</label>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

src/components/floor-plan/modal/circuitTrestle/step/type/PassivityCircuitAllocation.jsx

@@ -0,0 +1,104 @@
+import { useMessage } from '@/hooks/useMessage'
+
+export default function PassivityCircuitAllocation() {
+  const { getMessage } = useMessage()
+  const moduleData = {
+    header: [
+      { name: getMessage('屋根面'), prop: 'roofShape' },
+      {
+        name: getMessage('Q.TRON M-G2'),
+        prop: 'moduleName',
+      },
+      {
+        name: getMessage('発電量 (kW)'),
+        prop: 'powerGeneration',
+      },
+    ],
+    rows: [
+      {
+        roofShape: { name: 'M 1' },
+        moduleName: { name: '8' },
+        powerGeneration: { name: '3,400' },
+      },
+      {
+        roofShape: { name: 'M 1' },
+        moduleName: { name: '8' },
+        powerGeneration: { name: '3,400' },
+      },
+    ],
+  }
+  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}>
+                    {moduleData.header.map((header) => (
+                      <td key={header.prop}>{row[header.prop].name}</td>
+                    ))}
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </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>
+              <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 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>
+          </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>
+      </div>
+    </>
+  )
+}

src/locales/ja.json

@@ -122,6 +122,24 @@
   "modal.module.basic.setting.passivity.placement": "手動配置",
   "modal.module.basic.setting.auto.placement": "設定値に自動配置",
   "plan.menu.module.circuit.setting.circuit.trestle.setting": "回路と架台の設定",
+  "modal.circuit.trestle.setting": "回路と架台設定",
+  "modal.circuit.trestle.setting.power.conditional.select": "パワーコンディショナーを選択",
+  "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": "回路数",
+  "modal.circuit.trestle.setting.power.conditional.select.max.connection": "最大接続枚数",
+  "modal.circuit.trestle.setting.power.conditional.select.max.overload": "過積最大枚数",
+  "modal.circuit.trestle.setting.power.conditional.select.output.current": "出力電流",
+  "modal.circuit.trestle.setting.circuit.allocation": "回路割り当て",
+  "modal.circuit.trestle.setting.circuit.allocation.auto": "自動回路割り当て",
+  "modal.circuit.trestle.setting.circuit.allocation.passivity": "手動回路割当",
+  "modal.circuit.trestle.setting.circuit.allocation.passivity.info": "同じ回路のモジュールを選択状態にした後、 [番号確認]ボタンを押すと番号が割り当てられます。",
+  "modal.circuit.trestle.setting.circuit.allocation.passivity.selected.power.conditional": "選択したパワーコンディショナー",
+  "modal.circuit.trestle.setting.circuit.allocation.passivity.circuit.num": "設定する回路番号 (1~)",
+  "modal.circuit.trestle.setting.circuit.allocation.passivity.selected.power.conditional.reset": "選択されたパワーコンディショナーの回路番号の初期化",
+  "modal.circuit.trestle.setting.circuit.allocation.passivity.all.power.conditional.reset": "すべての回路番号の初期化",
+  "modal.circuit.trestle.setting.circuit.allocation.passivity.circuit.num.fix": "番号確定",
+  "modal.circuit.trestle.setting.step.up.allocation": "昇圧設定",
   "plan.menu.module.circuit.setting.plan.orientation": "図面方位の適用",
   "plan.menu.estimate": "見積",
   "plan.menu.estimate.roof.alloc": "屋根面の割り当て",
@@ -167,6 +185,7 @@
   "modal.grid.copy.save": "保存",
   "modal.common.save": "保存",
   "modal.common.add": "追加",
+  "modal.common.prev": "以前",
   "modal.canvas.setting.font.plan.edit": "フォントとサイズの変更",
   "modal.canvas.setting.font.plan.edit.word": "文字フォントの変更",
   "modal.canvas.setting.font.plan.edit.flow": "フロー方向フォントの変更",

src/locales/ko.json

@@ -126,6 +126,24 @@
   "modal.module.basic.setting.passivity.placement": "수동 배치",
   "modal.module.basic.setting.auto.placement": "설정값으로 자동 배치",
   "plan.menu.module.circuit.setting.circuit.trestle.setting": "회로 및 가대 설정",
+  "modal.circuit.trestle.setting": "회로 및 가대설정",
+  "modal.circuit.trestle.setting.power.conditional.select": "파워컨디셔너 선택",
+  "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": "회로수",
+  "modal.circuit.trestle.setting.power.conditional.select.max.connection": "최대접속매수",
+  "modal.circuit.trestle.setting.power.conditional.select.max.overload": "과적최대매수",
+  "modal.circuit.trestle.setting.power.conditional.select.output.current": "출력전류",
+  "modal.circuit.trestle.setting.circuit.allocation": "회로 할당",
+  "modal.circuit.trestle.setting.circuit.allocation.auto": "자동 회로 할당",
+  "modal.circuit.trestle.setting.circuit.allocation.passivity": "수동 회로 할당",
+  "modal.circuit.trestle.setting.circuit.allocation.passivity.info": "동일한 회로의 모듈을 선택 상태로 만든 후 [번호 확정] 버튼을 누르면 번호가 할당됩니다.",
+  "modal.circuit.trestle.setting.circuit.allocation.passivity.selected.power.conditional": "선택된 파워컨디셔너",
+  "modal.circuit.trestle.setting.circuit.allocation.passivity.circuit.num": "설정할 회로번호(1~)",
+  "modal.circuit.trestle.setting.circuit.allocation.passivity.selected.power.conditional.reset": "선택된 파워컨디셔너의 회로번호 초기화",
+  "modal.circuit.trestle.setting.circuit.allocation.passivity.all.power.conditional.reset": "모든 회로번호 초기화",
+  "modal.circuit.trestle.setting.circuit.allocation.passivity.circuit.num.fix": "번호 확정",
+  "modal.circuit.trestle.setting.step.up.allocation": "승압 설정",
   "plan.menu.module.circuit.setting.plan.orientation": "도면 방위 적용",
   "plan.menu.estimate": "견적서",
   "plan.menu.estimate.roof.alloc": "지붕면 할당",
@@ -171,6 +189,8 @@
   "modal.grid.copy.save": "저장",
   "modal.common.save": "저장",
   "modal.common.add": "추가",
+  "modal.common.prev": "이전",
+  "modal.common.next": "다음",
   "modal.canvas.setting.font.plan.edit": "글꼴 및 크기 변경",
   "modal.canvas.setting.font.plan.edit.word": "문자 글꼴 변경",
   "modal.canvas.setting.font.plan.edit.flow": "흐름 방향 글꼴 변경",