186 lines
7.8 KiB
JavaScript
186 lines
7.8 KiB
JavaScript
import QSelectBox from '@/components/common/select/QSelectBox'
|
||
import { useMessage } from '@/hooks/useMessage'
|
||
|
||
export default function Module({}) {
|
||
const { getMessage } = useMessage()
|
||
const SelectOption01 = [{ name: '0' }, { name: '0' }, { name: '0' }, { name: '0' }]
|
||
const moduleData = {
|
||
header: [
|
||
{ name: getMessage('module'), width: 150, prop: 'module', type: 'color-box' },
|
||
{
|
||
name: `${getMessage('높이')} (mm)`,
|
||
prop: 'height',
|
||
},
|
||
{ name: `${getMessage('width')} (mm)`, prop: 'width' },
|
||
{ name: `${getMessage('output')} (W)`, prop: 'output' },
|
||
],
|
||
rows: [
|
||
{
|
||
module: { name: 'Re.RISE-G3 440', color: '#AA6768' },
|
||
height: { name: '1134' },
|
||
width: { name: '1722' },
|
||
output: { name: '440' },
|
||
},
|
||
{
|
||
module: {
|
||
name: 'Re.RISE MS-G3 290',
|
||
color: '#67A2AA',
|
||
},
|
||
height: { name: '1134' },
|
||
width: { name: '1722' },
|
||
output: { name: '240' },
|
||
},
|
||
],
|
||
}
|
||
return (
|
||
<>
|
||
<div className="module-table-flex-wrap mb10">
|
||
<div className="module-table-box">
|
||
<div className="module-table-inner">
|
||
<div className="outline-form mb10">
|
||
<span className="mr10">{getMessage('modal.module.basic.setting.module.setting')}</span>
|
||
<div className="grid-select">
|
||
<QSelectBox title={'Search'} option={SelectOption01} />
|
||
</div>
|
||
</div>
|
||
<div className="roof-module-table">
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
{moduleData.header.map((data) => (
|
||
<th key={data.prop} style={{ width: data.width ? data.width : '' }}>
|
||
{data.name}
|
||
</th>
|
||
))}
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{moduleData.rows.map((row) => (
|
||
<>
|
||
<tr>
|
||
{moduleData.header.map((header) => (
|
||
<>
|
||
{header.type === 'color-box' && (
|
||
<td>
|
||
<div className="color-wrap">
|
||
<span className="color-box" style={{ backgroundColor: row[header.prop].color }}></span>
|
||
<span className="name">{row[header.prop].name}</span>
|
||
</div>
|
||
</td>
|
||
)}
|
||
{!header.type && header.type !== 'color-box' && <td className="al-r">{row[header.prop].name}</td>}
|
||
</>
|
||
))}
|
||
</tr>
|
||
</>
|
||
))}
|
||
<tr>
|
||
<td></td>
|
||
<td></td>
|
||
<td></td>
|
||
<td></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="module-table-box">
|
||
<div className="module-box-tab">
|
||
<button className="module-btn act">スレート</button>
|
||
<button className="module-btn">平板瓦</button>
|
||
<button className="module-btn">53A</button>
|
||
<button className="module-btn">53A</button>
|
||
</div>
|
||
<div className="module-table-inner">
|
||
<div className="module-table-tit">{getMessage('modal.module.basic.setting.module.roof.material')}: スレーツ（4寸)</div>
|
||
<div className="eaves-keraba-table">
|
||
<div className="eaves-keraba-item">
|
||
<div className="eaves-keraba-th">{getMessage('modal.module.basic.setting.module.trestle.maker')}</div>
|
||
<div className="eaves-keraba-td">
|
||
<div className="grid-select">
|
||
<QSelectBox title={'屋根技術研究所'} option={SelectOption01} />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="eaves-keraba-item">
|
||
<div className="eaves-keraba-th">{getMessage('modal.module.basic.setting.module.construction.method')}</div>
|
||
<div className="eaves-keraba-td">
|
||
<div className="grid-select">
|
||
<QSelectBox title={'スレート金具4'} option={SelectOption01} />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="eaves-keraba-item">
|
||
<div className="eaves-keraba-th">{getMessage('modal.module.basic.setting.module.under.roof')}</div>
|
||
<div className="eaves-keraba-td">
|
||
<div className="grid-select">
|
||
<QSelectBox title={'構造溶合板 12mm以上'} option={SelectOption01} />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="module-table-box mb10">
|
||
<div className="module-table-inner">
|
||
<div className="module-table-flex-wrap">
|
||
<div className="outline-form">
|
||
<span className="mr10">{getMessage('modal.module.basic.setting.module.cotton.classification')}</span>
|
||
<div className="grid-select">
|
||
<QSelectBox title={'Ⅲ ∙ Ⅳ'} option={SelectOption01} />
|
||
</div>
|
||
</div>
|
||
<div className="outline-form">
|
||
<span className="mr10">{getMessage('modal.module.basic.setting.module.fitting.height')}</span>
|
||
<div className="grid-select">
|
||
<QSelectBox title={'13'} option={SelectOption01} />
|
||
</div>
|
||
</div>
|
||
<div className="outline-form">
|
||
<span className="mr10">{getMessage('modal.module.basic.setting.module.standard.wind.speed')}</span>
|
||
<div className="grid-select">
|
||
<QSelectBox title={'32'} option={SelectOption01} />
|
||
</div>
|
||
</div>
|
||
<div className="outline-form">
|
||
<span className="mr10">{getMessage('modal.module.basic.setting.module.standard.snowfall.amount')}</span>
|
||
<div className="grid-select">
|
||
<QSelectBox title={'15'} option={SelectOption01} />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="module-table-box mb15">
|
||
<div className="warning-guide">
|
||
<div className="warning">
|
||
{getMessage('modal.module.basic.setting.module.setting.info1')}
|
||
<br />
|
||
{getMessage('modal.module.basic.setting.module.setting.info2')}
|
||
<br />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="modal-btn-wrap mb15">
|
||
<button className="btn-frame roof blue">{getMessage('modal.module.basic.setting.module.standard.construction')}(1)</button>
|
||
<button className="btn-frame roof white">{getMessage('modal.module.basic.setting.module.standard.construction')}</button>
|
||
<button className="btn-frame roof">{getMessage('modal.module.basic.setting.module.enforce.construction')}</button>
|
||
<button className="btn-frame roof">{getMessage('modal.module.basic.setting.module.multiple.construction')}</button>
|
||
<button className="btn-frame roof blue">{getMessage('modal.module.basic.setting.module.multiple.construction')}（II）</button>
|
||
</div>
|
||
<div className="grid-check-form border">
|
||
<div className="d-check-box pop">
|
||
<input type="checkbox" id="ch01" />
|
||
<label htmlFor="ch01">{getMessage('modal.module.basic.setting.module.eaves.bar.fitting')}</label>
|
||
</div>
|
||
<div className="d-check-box pop">
|
||
<input type="checkbox" id="ch02" />
|
||
<label htmlFor="ch02">{getMessage('modal.module.basic.setting.module.blind.metal.fitting')}</label>
|
||
</div>
|
||
</div>
|
||
</>
|
||
)
|
||
}
|