회로 및 가대설정 팝업 추가
This commit is contained in:
parent
2278b620d6
commit
33c4f425cc
@ -81,7 +81,7 @@ export default function CanvasPage() {
|
||||
{/* <RoofShapeOption/> */}
|
||||
|
||||
{/* 지붕형상 수동 설정 */}
|
||||
<ManualRoofShape/>
|
||||
{/* <ManualRoofShape/> */}
|
||||
|
||||
{/* 보조선 작성 */}
|
||||
{/* <AuxiliarylineOption/> */}
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
import WithDraggable from "@/components/common/draggable/withDraggable";
|
||||
import { useState } from "react";
|
||||
import CircuitStandTab01 from "./CircuitStandTab01";
|
||||
import CircuitStandTab02 from "./CircuitStandTab02";
|
||||
import CircuitStandTab03 from "./CircuitStandTab03";
|
||||
|
||||
export default function CircuitStandSetting(){
|
||||
const [tabNum, setTabNum] = useState(1);
|
||||
@ -19,7 +21,9 @@ export default function CircuitStandSetting(){
|
||||
<span className={`tab-arr ${ tabNum === 3 ? 'act': ''}`}></span>
|
||||
<div className={`module-tab-bx ${tabNum === 3 ? 'act': ''}`}>昇圧設定</div>
|
||||
</div>
|
||||
{tabNum === 1 && <CircuitStandTab01/>}
|
||||
{tabNum === 1 && <CircuitStandTab01 setTabNum={setTabNum}/>}
|
||||
{tabNum === 2 && <CircuitStandTab02 setTabNum={setTabNum}/>}
|
||||
{tabNum === 3 && <CircuitStandTab03 setTabNum={setTabNum}/>}
|
||||
</div>
|
||||
</div>
|
||||
</WithDraggable>
|
||||
|
||||
@ -4,18 +4,97 @@ const SelectOption01 = [
|
||||
{name: '0',}, {name: '0'}, {name: '0'}, {name: '0'}
|
||||
]
|
||||
|
||||
export default function CircuitStandTab01(){
|
||||
export default function CircuitStandTab01({setTabNum}){
|
||||
return(
|
||||
<>
|
||||
<div className="outline-form mb10">
|
||||
<div className="outline-form mb15">
|
||||
<span className="mr10">分類 (余剰)</span>
|
||||
<div className="grid-select mr10">
|
||||
<Qselect title={'HQJPシリーズ'} option={SelectOption01}/>
|
||||
</div>
|
||||
<span className="thin">寒冷地仕様</span>
|
||||
</div>
|
||||
<div className="module-table-box">
|
||||
<div className="module-table-inner"></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>
|
||||
<th style={{width: '15%'}}>名称</th>
|
||||
<th style={{width: '10%'}}>定格出力 (kW)</th>
|
||||
<th style={{width: '10%'}}>回路数</th>
|
||||
<th style={{width: '10%'}}>最大接続枚数</th>
|
||||
<th style={{width: '10%'}}>過積最大枚数</th>
|
||||
<th style={{width: '10%'}}>出力電流</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>HQJP-KA30-5</td>
|
||||
<td className="al-c"><span className="warning">PCSオプションマスター</span></td>
|
||||
<td className="al-r">2</td>
|
||||
<td className="al-r">2</td>
|
||||
<td className="al-c">-</td>
|
||||
<td className="al-c">-</td>
|
||||
</tr>
|
||||
<tr className="on">
|
||||
<td>HQJP-KA40-5</td>
|
||||
<td className="al-r">1.00</td>
|
||||
<td className="al-r">2</td>
|
||||
<td className="al-r">2</td>
|
||||
<td className="al-c">-</td>
|
||||
<td className="al-c">-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>HQJP-KA50-5</td>
|
||||
<td className="al-r">1.00</td>
|
||||
<td className="al-r">2</td>
|
||||
<td className="al-r">2</td>
|
||||
<td className="al-c">-</td>
|
||||
<td className="al-c">-</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>
|
||||
</>
|
||||
)
|
||||
|
||||
@ -0,0 +1,22 @@
|
||||
|
||||
import { useState } from "react";
|
||||
import CircuitStandSecondTab01 from "./circuitstandsecondtab/CircuitStandSecondTab01";
|
||||
import CircuitStandSecondTab02 from "./circuitstandsecondtab/CircuitStandSecondTab02";
|
||||
|
||||
export default function CircuitStandTab02({setTabNum}){
|
||||
const [secondTab, setSecondTab] = useState(1);
|
||||
return(
|
||||
<>
|
||||
<div className="module-box-tab">
|
||||
<button className={`module-btn ${secondTab === 1 ? 'act':''}`} onClick={() => setSecondTab(1)}>自動回路割り当て</button>
|
||||
<button className={`module-btn ${secondTab === 2 ? 'act':''}`} onClick={() => setSecondTab(2)}>手動回路割当</button>
|
||||
</div>
|
||||
{secondTab === 1 && <CircuitStandSecondTab01/>}
|
||||
{secondTab === 2 && <CircuitStandSecondTab02/>}
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal mr5" onClick={() => setTabNum(1)}>以前</button>
|
||||
<button className="btn-frame modal act" onClick={() => setTabNum(3)}>保存</button>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,405 @@
|
||||
import Qselect from "@/components/common/select/Qselect";
|
||||
|
||||
const SelectOption01 = [
|
||||
{name: '0',}, {name: '0'}, {name: '0'}, {name: '0'}
|
||||
]
|
||||
|
||||
|
||||
export default function CircuitStandTab03({setTabNum}){
|
||||
return(
|
||||
<>
|
||||
<div className="properties-setting-wrap outer">
|
||||
<div className="setting-tit">昇圧設定</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">
|
||||
<Qselect 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>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,17 @@
|
||||
export default function CircuitStandSecondTab01(){
|
||||
return(
|
||||
<div className="properties-setting-wrap outer">
|
||||
<div className="setting-tit">回路割り当て</div>
|
||||
<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" />
|
||||
<label htmlFor="ra01">自動回路割り当て</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,89 @@
|
||||
export default function CircuitStandSecondTab02(){
|
||||
return(
|
||||
<div className="properties-setting-wrap outer">
|
||||
<div className="setting-tit">回路割り当て</div>
|
||||
<div className="module-table-box mb10">
|
||||
<div className="module-table-inner">
|
||||
<div className="bold-font mb10">手動回路割当</div>
|
||||
<div className="normal-font mb15">同じ回路のモジュールを選択状態にした後、 [番号確認]ボタンを押すと番号が割り当てられます。</div>
|
||||
<div className="roof-module-table overflow-y">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>屋根面</th>
|
||||
<th>Q.TRON M-G2</th>
|
||||
<th>発電量 (kW)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className="al-c">M 1</td>
|
||||
<td className="al-r">8</td>
|
||||
<td className="al-r">3,440</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="al-c">合計</td>
|
||||
<td className="al-r">8</td>
|
||||
<td className="al-r">3,440</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="al-c">合計</td>
|
||||
<td className="al-r">8</td>
|
||||
<td className="al-r">3,440</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="al-c">合計</td>
|
||||
<td className="al-r">8</td>
|
||||
<td className="al-r">3,440</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="al-c">合計</td>
|
||||
<td className="al-r">8</td>
|
||||
<td className="al-r">3,440</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">選択したパワーコンディショナー</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'}}>設定する回路番号 (1~)</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">選択されたパワーコンディショナーの回路番号の初期化</button>
|
||||
<button className="btn-frame roof mr5">すべての回路番号の初期化</button>
|
||||
<button className="btn-frame roof">番号確定</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -1253,6 +1253,7 @@ $alert-color: #101010;
|
||||
height: 30px;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
transition: all .15s ease-in-out;
|
||||
&:first-child{
|
||||
border-left: 1px solid #505050;
|
||||
}
|
||||
@ -1379,4 +1380,91 @@ $alert-color: #101010;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 회로 및 가대설정
|
||||
.circuit-check-inner{
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
.x-scroll-table{
|
||||
overflow-x: auto;
|
||||
padding-bottom: 5px;
|
||||
.roof-module-table{
|
||||
min-width: 1200px;
|
||||
}
|
||||
&::-webkit-scrollbar {
|
||||
height: 4px;
|
||||
background-color: transparent;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: #D9D9D9;
|
||||
}
|
||||
&::-webkit-scrollbar-track {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.circuit-right-wrap{
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.circuit-data-form{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
min-height: 60px;
|
||||
padding: 12px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.20);
|
||||
}
|
||||
.circuit-table-tit{
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
padding: 11px 10px;
|
||||
background-color: #474747;
|
||||
border: 1px solid #505050;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.circuit-overflow{
|
||||
max-height: 560px;
|
||||
overflow-y: auto;
|
||||
margin-bottom: 15px;
|
||||
&::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
background-color: transparent;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: #D9D9D9;
|
||||
}
|
||||
&::-webkit-scrollbar-track {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.circuit-table-flx-wrap{
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-bottom: 10px;
|
||||
.circuit-table-flx-box{
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.bottom-wrap{
|
||||
margin-top: auto;
|
||||
}
|
||||
.roof-module-table{
|
||||
table{
|
||||
table-layout: fixed;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.circuit-count-input{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
@ -258,7 +258,7 @@ button{
|
||||
color: #AAAAAA;
|
||||
&:hover{
|
||||
background-color: #272727;
|
||||
border-color: #272727;
|
||||
border-color: #676767;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
@ -700,6 +700,7 @@ input[type=text]{
|
||||
// check-box
|
||||
.d-check-box{
|
||||
label{
|
||||
&.red{color: #FFCACA;}
|
||||
&::before{
|
||||
cursor: pointer;
|
||||
content: "";
|
||||
@ -751,6 +752,15 @@ input[type=text]{
|
||||
}
|
||||
}
|
||||
}
|
||||
&.sel{
|
||||
input[type=checkbox]:checked + label{
|
||||
color: #D7C863;
|
||||
}
|
||||
input[type=checkbox]:checked + label::before,
|
||||
input[type=checkbox]:checked + label::after{
|
||||
border-color: #D7C863;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// date-picker
|
||||
|
||||
@ -198,6 +198,12 @@ table{
|
||||
}
|
||||
}
|
||||
tbody{
|
||||
tr{
|
||||
cursor: pointer;
|
||||
&.on{
|
||||
background-color: #272727;
|
||||
}
|
||||
}
|
||||
td{
|
||||
height: 40px;
|
||||
vertical-align: middle;
|
||||
@ -209,6 +215,9 @@ table{
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
.warning{
|
||||
color: PCSオプションマスター;
|
||||
}
|
||||
.color-wrap{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -228,4 +237,38 @@ table{
|
||||
}
|
||||
}
|
||||
}
|
||||
&.overflow-y{
|
||||
table{
|
||||
table-layout: fixed;
|
||||
border-collapse: collapse;
|
||||
thead{
|
||||
display: table;
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
tbody{
|
||||
display: block;
|
||||
max-height: 81px;
|
||||
overflow-y: auto;
|
||||
tr{
|
||||
display: table;
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-top: -1px;
|
||||
}
|
||||
&::-webkit-scrollbar {
|
||||
width: 2px;
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: #C1CCD7;
|
||||
}
|
||||
&::-webkit-scrollbar-track {
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user