Merge branch 'qcast-pub' into dev
This commit is contained in:
minsik
commit
67f56df408
@ -48,6 +48,7 @@ export default function CanvasMenu(props) {
|
||||
setShowWallLineOffsetSettingModal,
|
||||
setShowRoofAllocationSettingModal,
|
||||
setShowBasicSettingModal,
|
||||
setShowPropertiesSettingModal,
|
||||
} = props
|
||||
|
||||
const [menuNumber, setMenuNumber] = useState(null)
|
||||
@ -104,6 +105,7 @@ export default function CanvasMenu(props) {
|
||||
setShowRoofAllocationSettingModal,
|
||||
setShowObjectSettingModal,
|
||||
setShowBasicSettingModal,
|
||||
setShowPropertiesSettingModal,
|
||||
type,
|
||||
}
|
||||
|
||||
|
||||
@ -84,6 +84,7 @@ export default function FloorPlan() {
|
||||
setShowWallLineOffsetSettingModal,
|
||||
setShowRoofAllocationSettingModal,
|
||||
setShowBasicSettingModal,
|
||||
setShowPropertiesSettingModal,
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
@ -23,6 +23,7 @@ export default function MenuDepth01(props) {
|
||||
setShowRoofAllocationSettingModal,
|
||||
setShowObjectSettingModal,
|
||||
setShowBasicSettingModal,
|
||||
setShowPropertiesSettingModal,
|
||||
} = props
|
||||
const { getMessage } = useMessage()
|
||||
const [activeMenu, setActiveMenu] = useState()
|
||||
@ -42,6 +43,7 @@ export default function MenuDepth01(props) {
|
||||
setShowWallLineOffsetSettingModal(id === 6)
|
||||
setShowRoofAllocationSettingModal(id === 7)
|
||||
setShowPlaceShapeDrawingModal(false)
|
||||
setShowPropertiesSettingModal(false)
|
||||
}
|
||||
|
||||
if (type === 'surface') {
|
||||
@ -53,7 +55,7 @@ export default function MenuDepth01(props) {
|
||||
setShowMovementModal(false)
|
||||
setShowWallLineOffsetSettingModal(false)
|
||||
setShowRoofAllocationSettingModal(false)
|
||||
|
||||
setShowPropertiesSettingModal(false)
|
||||
setShowSlopeSettingModal(id === 0)
|
||||
setShowPlaceShapeDrawingModal(id === 1)
|
||||
setShowPlacementSurfaceSettingModal(id === 2)
|
||||
@ -69,6 +71,7 @@ export default function MenuDepth01(props) {
|
||||
setShowMovementModal(false)
|
||||
setShowWallLineOffsetSettingModal(false)
|
||||
setShowRoofAllocationSettingModal(false)
|
||||
setShowPropertiesSettingModal(false)
|
||||
setShowBasicSettingModal(id === 0)
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,12 +3,16 @@ import WithDraggable from '@/components/common/draggable/withDraggable'
|
||||
import { useState } from 'react'
|
||||
import Orientation from '@/components/floor-plan/modal/basic/step/Orientation'
|
||||
import Module from '@/components/floor-plan/modal/basic/step/Module'
|
||||
import PitchModule from '@/components/floor-plan/modal/basic/step/pitch/PitchModule'
|
||||
import PitchPlacement from '@/components/floor-plan/modal/basic/step/pitch/PitchPlacement'
|
||||
import Placement from '@/components/floor-plan/modal/basic/step/Placement'
|
||||
import { useRecoilState } from 'recoil'
|
||||
import { canvasSettingState } from '@/store/canvasAtom'
|
||||
|
||||
export default function BasicSetting({ setShowBasicSettingModal }) {
|
||||
const { getMessage } = useMessage()
|
||||
const [tabNum, setTabNum] = useState(1)
|
||||
|
||||
const [canvasSetting, setCanvasSetting] = useRecoilState(canvasSettingState)
|
||||
return (
|
||||
<WithDraggable isShow={true} pos={{ x: 50, y: -950 }}>
|
||||
<div className={`modal-pop-wrap lx-2`}>
|
||||
@ -27,8 +31,13 @@ export default function BasicSetting({ setShowBasicSettingModal }) {
|
||||
<div className={`module-tab-bx ${tabNum === 3 ? 'act' : ''}`}>{getMessage('modal.module.basic.setting.module.placement')}</div>
|
||||
</div>
|
||||
{tabNum === 1 && <Orientation setTabNum={setTabNum} />}
|
||||
{tabNum === 2 && <Module setTabNum={setTabNum} />}
|
||||
{tabNum === 3 && <Placement setTabNum={setTabNum} />}
|
||||
{/*배치면 초기설정 - 입력방법: 복시도 입력 || 실측값 입력*/}
|
||||
{canvasSetting.roofSizeSet && canvasSetting.roofSizeSet != 3 && tabNum === 2 && <Module setTabNum={setTabNum} />}
|
||||
{canvasSetting.roofSizeSet && canvasSetting.roofSizeSet != 3 && tabNum === 3 && <Placement setTabNum={setTabNum} />}
|
||||
|
||||
{/*배치면 초기설정 - 입력방법: 육지붕*/}
|
||||
{canvasSetting.roofSizeSet && canvasSetting.roofSizeSet == 3 && tabNum === 2 && <PitchModule setTabNum={setTabNum} />}
|
||||
{canvasSetting.roofSizeSet && canvasSetting.roofSizeSet == 3 && tabNum === 3 && <PitchPlacement setTabNum={setTabNum} />}
|
||||
|
||||
<div className="grid-btn-wrap">
|
||||
{tabNum !== 1 && (
|
||||
|
||||
@ -74,12 +74,15 @@ export default function Module({}) {
|
||||
</tr>
|
||||
</>
|
||||
))}
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
{Array.from({ length: 3 - moduleData.rows.length }).map((_, i) => (
|
||||
<tr key={i}>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
@ -0,0 +1,91 @@
|
||||
import { useMessage } from '@/hooks/useMessage'
|
||||
import QSelectBox from '@/components/common/select/QSelectBox'
|
||||
|
||||
export default function PitchModule({}) {
|
||||
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-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>
|
||||
</>
|
||||
))}
|
||||
{Array.from({ length: 3 - moduleData.rows.length }).map((_, i) => (
|
||||
<tr key={i}>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,159 @@
|
||||
import { useMessage } from '@/hooks/useMessage'
|
||||
|
||||
export default function PitchPlacement() {
|
||||
const { getMessage } = useMessage()
|
||||
const moduleData = {
|
||||
header: [
|
||||
{ type: 'check', name: '', prop: 'check', width: 70 },
|
||||
{ type: 'color-box', name: getMessage('module'), prop: 'module' },
|
||||
{ type: 'text', name: `${getMessage('output')} (W)`, prop: 'output', width: 70 },
|
||||
],
|
||||
rows: [
|
||||
{
|
||||
check: false,
|
||||
module: { name: 'Re.RISE-G3 440', color: '#AA6768' },
|
||||
output: { name: '440' },
|
||||
},
|
||||
{
|
||||
check: false,
|
||||
module: {
|
||||
name: 'Re.RISE MS-G3 290',
|
||||
color: '#67A2AA',
|
||||
},
|
||||
output: { name: '240' },
|
||||
},
|
||||
],
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<div className="module-table-box mb10">
|
||||
<div className="module-table-inner">
|
||||
<div className="roof-module-table">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
{moduleData.header.map((data) => (
|
||||
<th key={data.prop} style={{ width: data.width ? data.width : '' }}>
|
||||
{data.type === 'check' ? (
|
||||
<div className="d-check-box no-text pop">
|
||||
<input type="checkbox" id="ch01" disabled />
|
||||
<label htmlFor="ch01"></label>
|
||||
</div>
|
||||
) : (
|
||||
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 === 'check' && (
|
||||
<td className="al-c">
|
||||
<div className="d-check-box no-text pop">
|
||||
<input type="checkbox" id="ch02" />
|
||||
<label htmlFor="ch02"></label>
|
||||
</div>
|
||||
</td>
|
||||
)}
|
||||
{header.type && header.type !== 'color-box' && header.type !== 'check' && <td className="al-r">{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.module.basic.setting.pitch.module.placement.standard.setting')}</div>
|
||||
</div>
|
||||
<div className="hexagonal-item">
|
||||
<div className="pop-form-radio">
|
||||
<div className="d-check-radio pop">
|
||||
<input type="radio" name="radio01" id="ra01" />
|
||||
<label htmlFor="ra01">{getMessage('modal.module.basic.setting.pitch.module.placement.standard.setting.south')}</label>
|
||||
</div>
|
||||
<div className="d-check-radio pop">
|
||||
<input type="radio" name="radio01" id="ra02" />
|
||||
<label htmlFor="ra02">{getMessage('modal.module.basic.setting.pitch.module.placement.standard.setting.select')}</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="module-table-box">
|
||||
<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="hexagonal-flx-auto">
|
||||
<div className="outline-form">
|
||||
<span className="mr10" style={{ width: 'auto' }}>
|
||||
{getMessage('modal.module.basic.setting.pitch.module.row.amount')}
|
||||
</span>
|
||||
<div className="input-grid mr5" style={{ width: '70px' }}>
|
||||
<input type="text" className="input-origin block" defaultValue={1} />
|
||||
</div>
|
||||
<span className="thin">mm</span>
|
||||
</div>
|
||||
<div className="outline-form">
|
||||
<span className="mr10" style={{ width: 'auto' }}>
|
||||
{getMessage('modal.module.basic.setting.pitch.module.row.margin')}
|
||||
</span>
|
||||
<div className="input-grid mr5" style={{ width: '70px' }}>
|
||||
<input type="text" className="input-origin block" defaultValue={1} />
|
||||
</div>
|
||||
<span className="thin">mm</span>
|
||||
</div>
|
||||
<div className="outline-form">
|
||||
<span className="mr10" style={{ width: 'auto' }}>
|
||||
{getMessage('modal.module.basic.setting.pitch.module.column.amount')}
|
||||
</span>
|
||||
<div className="input-grid mr5" style={{ width: '70px' }}>
|
||||
<input type="text" className="input-origin block" defaultValue={1} />
|
||||
</div>
|
||||
<span className="thin">mm</span>
|
||||
</div>
|
||||
<div className="outline-form">
|
||||
<span className="mr10" style={{ width: 'auto' }}>
|
||||
{getMessage('modal.module.basic.setting.pitch.module.column.margin')}
|
||||
</span>
|
||||
<div className="input-grid mr5" style={{ width: '70px' }}>
|
||||
<input type="text" className="input-origin block" defaultValue={300} />
|
||||
</div>
|
||||
<span className="thin">mm</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="hexagonal-item">
|
||||
<div className="hexagonal-flx">
|
||||
<div className="normal-font">{getMessage('modal.module.basic.setting.pitch.module.allocation.setting.info')}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -109,6 +109,15 @@
|
||||
"modal.module.basic.setting.module.placement.arrangement.standard.eaves": "軒側",
|
||||
"modal.module.basic.setting.module.placement.arrangement.standard.ridge": "龍丸側",
|
||||
"modal.module.basic.setting.module.placement.maximum": "最大配置する。",
|
||||
"modal.module.basic.setting.pitch.module.placement.standard.setting": "配置基準の設定",
|
||||
"modal.module.basic.setting.pitch.module.placement.standard.setting.south": "南向きに設置す",
|
||||
"modal.module.basic.setting.pitch.module.placement.standard.setting.select": "指定した辺を基準に設置する",
|
||||
"modal.module.basic.setting.pitch.module.allocation.setting": "割り当て設定",
|
||||
"modal.module.basic.setting.pitch.module.allocation.setting.info": "※バッチパネルの種類が1種類の場合にのみ使用できます。",
|
||||
"modal.module.basic.setting.pitch.module.row.amount": "単数",
|
||||
"modal.module.basic.setting.pitch.module.row.margin": "上下間隔",
|
||||
"modal.module.basic.setting.pitch.module.column.amount": "熱数",
|
||||
"modal.module.basic.setting.pitch.module.column.margin": "左右間隔",
|
||||
"modal.module.basic.setting.prev": "以前",
|
||||
"modal.module.basic.setting.passivity.placement": "手動配置",
|
||||
"modal.module.basic.setting.auto.placement": "設定値に自動配置",
|
||||
|
||||
@ -113,6 +113,15 @@
|
||||
"modal.module.basic.setting.module.placement.arrangement.standard.eaves": "처마쪽",
|
||||
"modal.module.basic.setting.module.placement.arrangement.standard.ridge": "용마루쪽",
|
||||
"modal.module.basic.setting.module.placement.maximum": "최대배치 실시한다.",
|
||||
"modal.module.basic.setting.pitch.module.placement.standard.setting": "배치 기준 설정",
|
||||
"modal.module.basic.setting.pitch.module.placement.standard.setting.south": "남향으로 설치한다",
|
||||
"modal.module.basic.setting.pitch.module.placement.standard.setting.select": "지정한 변을 기준으로 설치한다",
|
||||
"modal.module.basic.setting.pitch.module.allocation.setting": "할당 설정",
|
||||
"modal.module.basic.setting.pitch.module.allocation.setting.info": "※배치 패널 종류가 1종류일 경우에만 사용할 수 있습니다.",
|
||||
"modal.module.basic.setting.pitch.module.row.amount": "단수",
|
||||
"modal.module.basic.setting.pitch.module.row.margin": "상하간격",
|
||||
"modal.module.basic.setting.pitch.module.column.amount": "열수",
|
||||
"modal.module.basic.setting.pitch.module.column.margin": "좌우간격",
|
||||
"modal.module.basic.setting.prev": "이전",
|
||||
"modal.module.basic.setting.passivity.placement": "수동 배치",
|
||||
"modal.module.basic.setting.auto.placement": "설정값으로 자동 배치",
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user