qcast3/qcast-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

모듈 설치 페이지 변경

Browse Source
This commit is contained in:
yjnoh 2025-04-01 15:31:12 +09:00
parent 97ca91aa29
commit 7d37deb048
5 changed files with 210 additions and 120 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/floor-plan/modal/basic/BasicSetting.jsx
View File

@ -172,7 +172,7 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
}, [checkedModules]) }, [checkedModules])
return ( return (
<WithDraggable isShow={true} pos={pos} className="lx-2"> <WithDraggable isShow={true} pos={pos} className="ll">
<WithDraggable.Header title={getMessage('plan.menu.module.circuit.setting.default')} onClose={() => handleClosePopup(id)} /> <WithDraggable.Header title={getMessage('plan.menu.module.circuit.setting.default')} onClose={() => handleClosePopup(id)} />
<WithDraggable.Body> <WithDraggable.Body>
<div className="roof-module-tab"> <div className="roof-module-tab">

295
src/components/floor-plan/modal/basic/step/Placement.jsx
View File

@ -8,12 +8,13 @@ import {
moduleSetupOptionState, moduleSetupOptionState,
toggleManualSetupModeState, toggleManualSetupModeState,
} from '@/store/canvasAtom' } from '@/store/canvasAtom'
import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil' import { useRecoilState, useRecoilValue, useResetRecoilState, useSetRecoilState } from 'recoil'
import { moduleSelectionDataState, selectedModuleState } from '@/store/selectedModuleOptions' import { moduleSelectionDataState, selectedModuleState } from '@/store/selectedModuleOptions'
import { isObjectNotEmpty } from '@/util/common-utils' import { isObjectNotEmpty } from '@/util/common-utils'
const Placement = forwardRef((props, refs) => { const Placement = forwardRef((props, refs) => {
const { getMessage } = useMessage() const { getMessage } = useMessage()
const [useTab, setUseTab] = useState(true)
const [isChidoriNotAble, setIsChidoriNotAble] = useState(false) const [isChidoriNotAble, setIsChidoriNotAble] = useState(false)
@ -22,7 +23,7 @@ const Placement = forwardRef((props, refs) => {
const setCheckedModules = useSetRecoilState(checkedModuleState) const setCheckedModules = useSetRecoilState(checkedModuleState)
const moduleSelectionData = useRecoilValue(moduleSelectionDataState) const moduleSelectionData = useRecoilValue(moduleSelectionDataState)
const { makeModuleInitArea } = useModuleBasicSetting(3) const { makeModuleInitArea, roofOutlineColor } = useModuleBasicSetting(3)
const [isMultiModule, setIsMultiModule] = useState(false) const [isMultiModule, setIsMultiModule] = useState(false)
@ -32,6 +33,9 @@ const Placement = forwardRef((props, refs) => {
const setManualSetupMode = useSetRecoilState(toggleManualSetupModeState) const setManualSetupMode = useSetRecoilState(toggleManualSetupModeState)
const [moduleSetupOption, setModuleSetupOption] = useRecoilState(moduleSetupOptionState) //모듈 설치 옵션 const [moduleSetupOption, setModuleSetupOption] = useRecoilState(moduleSetupOptionState) //모듈 설치 옵션
const resetModuleSetupOption = useResetRecoilState(moduleSetupOptionState)
const [colspan, setColspan] = useState(1)
//모듈 배치면 생성 //모듈 배치면 생성
useEffect(() => { useEffect(() => {
@ -44,17 +48,24 @@ const Placement = forwardRef((props, refs) => {
makeModuleInitArea(moduleSelectionData) makeModuleInitArea(moduleSelectionData)
} }
if (moduleSelectionData.module.itemList.length > 1) {
setColspan(2)
}
return () => { return () => {
refs.isChidori.current = 'false' // refs.isChidori.current = 'false'
refs.setupLocation.current = 'eaves' // refs.setupLocation.current = 'eaves'
setIsManualModuleSetup(false) setIsManualModuleSetup(false)
setIsManualModuleLayoutSetup(false) setIsManualModuleLayoutSetup(false)
setManualSetupMode('off') setManualSetupMode('off')
resetModuleSetupOption()
} }
}, []) }, [])
//최초 지입시 체크 //최초 지입시 체크
useEffect(() => { useEffect(() => {
console.log('moduleSelectionData', moduleSelectionData)
if (isObjectNotEmpty(moduleSelectionData)) { if (isObjectNotEmpty(moduleSelectionData)) {
//두번째 선택한 데이터가를 기반으로 세번째 선택을 체크한다 //두번째 선택한 데이터가를 기반으로 세번째 선택을 체크한다
if (moduleSelectionData.roofConstructions.length > 0 && moduleSelectionData.module.itemList.length > 0) { if (moduleSelectionData.roofConstructions.length > 0 && moduleSelectionData.module.itemList.length > 0) {
@ -93,7 +104,9 @@ const Placement = forwardRef((props, refs) => {
header: [ header: [
{ type: 'check', name: '', prop: 'check', width: 70 }, { type: 'check', name: '', prop: 'check', width: 70 },
{ type: 'color-box', name: getMessage('module'), prop: 'module' }, { type: 'color-box', name: getMessage('module'), prop: 'module' },
{ type: 'text', name: `${getMessage('output')} (W)`, prop: 'output', width: 70 }, { type: 'text', name: getMessage('modal.module.basic.setting.module.placement.mix.asg.yn'), prop: 'mixAsgYn', width: 50 },
{ type: 'text', name: `単数`, prop: 'rows', width: 60 },
{ type: 'text', name: `熱水`, prop: 'cols', width: 60 },
], ],
rows: [], rows: [],
} }
@ -130,26 +143,24 @@ const Placement = forwardRef((props, refs) => {
return ( return (
<> <>
<div className="module-table-flex-wrap mb10"> <div className="module-table-flex-wrap">
<div className="module-table-box"> <div className="module-table-box">
<div className="module-table-inner"> <div className="module-table-inner">
<div className="roof-module-table"> <div className="roof-module-table">
<table> <table>
<thead> <thead>
<tr> {moduleData.header.map((data) => (
{moduleData.header.map((data) => ( <th key={data.prop} style={{ width: data.width ? data.width : '' }}>
<th key={data.prop} style={{ width: data.width ? data.width : '' }}> {data.type === 'check' ? (
{data.type === 'check' ? ( <div className="d-check-box no-text pop">
<div className="d-check-box no-text pop"> <input type="checkbox" id="ch01" disabled />
<input type="checkbox" id="ch01" disabled /> <label htmlFor="ch01"></label>
<label htmlFor="ch01"></label> </div>
</div> ) : (
) : ( data.name
data.name )}
)} </th>
</th> ))}
))}
</tr>
</thead> </thead>
<tbody> <tbody>
{selectedModules.itemList && {selectedModules.itemList &&
@ -173,106 +184,174 @@ const Placement = forwardRef((props, refs) => {
<span className="name">{item.itemNm}</span> <span className="name">{item.itemNm}</span>
</div> </div>
</td> </td>
<td className="al-r">{item.wpOut}</td> <td className="al-c">
<label htmlFor="ra06">행</label> <div className="color-wrap">
<input <span className="name">{item.mixAsgYn}</span>
type="text" </div>
className="input-origin block mr10" </td>
name="col" <td className="al-r">
value={props.layoutSetup[index]?.col ?? 1} <div className="input-grid">
defaultValue={0} <input
onChange={(e) => handleLayoutSetup(e, item.itemId, index)} type="text"
/>{' '} className="input-origin block"
×<label htmlFor="ra07">열</label> name="row"
<input value={props.layoutSetup[index]?.row ?? 1}
type="text" defaultValue={0}
className="input-origin block" onChange={(e) => handleLayoutSetup(e, item.itemId, index)}
name="row" />
value={props.layoutSetup[index]?.row ?? 1} </div>
defaultValue={0} </td>
onChange={(e) => handleLayoutSetup(e, item.itemId, index)} <td className="al-r">
/> <div className="input-grid">
<input
type="text"
className="input-origin block"
name="col"
value={props.layoutSetup[index]?.col ?? 1}
defaultValue={0}
onChange={(e) => handleLayoutSetup(e, item.itemId, index)}
/>
</div>
</td>
</tr> </tr>
))} ))}
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody> </tbody>
</table> </table>
</div> </div>
</div> </div>
</div> </div>
<div className="module-table-box"> <div className="module-table-box non-flex">
<div className="module-table-inner"> <div className="module-table-inner">
<div className="self-table-tit">{getMessage('modal.module.basic.setting.module.placement.select.fitting.type')}</div> <div className="roof-module-table">
<div className="module-self-table"> <table>
<div className="self-table-item"> <thead>
<div className="self-item-th">{getMessage('modal.module.basic.setting.module.placement.waterfowl.arrangement')}</div> <tr>
<div className="self-item-td"> <th>{getMessage('modal.module.basic.setting.module.placement.waterfowl.arrangement')}</th>
<div className="pop-form-radio"> <th>{getMessage('modal.module.basic.setting.module.placement.arrangement.standard')}</th>
<div className="d-check-radio pop"> </tr>
<input </thead>
type="radio" <tbody>
name="radio01" <tr>
id="ra01" <td>
checked={moduleSetupOption.isChidori} <div className="hexagonal-radio-wrap">
disabled={isChidoriNotAble} <div className="d-check-radio pop mb10">
value={'true'} <input
onChange={(e) => handleChangeChidori(e)} type="radio"
/> name="radio02"
<label htmlFor="ra01">{getMessage('modal.module.basic.setting.module.placement.do')}</label> id="ra03"
</div> checked={moduleSetupOption.isChidori}
<div className="d-check-radio pop"> disabled={isChidoriNotAble}
<input value={'true'}
type="radio" onChange={(e) => handleChangeChidori(e)}
name="radio02" />
id="ra02" <label htmlFor="ra03">{getMessage('modal.module.basic.setting.module.placement.do')}</label>
checked={!moduleSetupOption.isChidori} </div>
value={'false'} <div className="d-check-radio pop">
onChange={(e) => handleChangeChidori(e)} <input
/> type="radio"
<label htmlFor="ra02">{getMessage('modal.module.basic.setting.module.placement.do.not')}</label> name="radio02"
</div> id="ra04"
</div> checked={!moduleSetupOption.isChidori}
</div> value={'false'}
</div> onChange={(e) => handleChangeChidori(e)}
<div className="self-table-item"> />
<div className="self-item-th">{getMessage('modal.module.basic.setting.module.placement.arrangement.standard')}</div> <label htmlFor="ra04">{getMessage('modal.module.basic.setting.module.placement.do.not')}</label>
<div className="self-item-td"> </div>
<div className="pop-form-radio"> </div>
<div className="d-check-radio pop"> </td>
<input <td>
type="radio" <div className="hexagonal-radio-wrap">
name="radio04" <div className="d-check-radio pop mb10">
id="ra04" <input
checked={moduleSetupOption.setupLocation === 'eaves'} type="radio"
value={'eaves'} name="radio03"
onChange={handleSetupLocation} id="ra05"
/> checked={moduleSetupOption.setupLocation === 'eaves'}
<label htmlFor="ra04">{getMessage('modal.module.basic.setting.module.placement.arrangement.standard.eaves')}</label> value={'eaves'}
</div> onChange={handleSetupLocation}
<div className="d-check-radio pop"> />
<input <label htmlFor="ra05">{getMessage('modal.module.basic.setting.module.placement.arrangement.standard.eaves')}</label>
type="radio" </div>
name="radio05" <div className="d-check-radio pop">
id="ra05" <input
checked={moduleSetupOption.setupLocation === 'ridge'} type="radio"
value={'ridge'} name="radio03"
onChange={handleSetupLocation} id="ra06"
disabled={isMultiModule} checked={moduleSetupOption.setupLocation === 'ridge'}
/> value={'ridge'}
<label htmlFor="ra05">{getMessage('modal.module.basic.setting.module.placement.arrangement.standard.ridge')}</label> onChange={handleSetupLocation}
</div> disabled={isMultiModule}
</div> />
</div> <label htmlFor="ra06">{getMessage('modal.module.basic.setting.module.placement.arrangement.standard.ridge')}</label>
</div> </div>
</div> </div>
<div className="self-table-flx"> </td>
{/* <div className="d-check-box pop"> </tr>
<input type="checkbox" id="ch04" checked={isMaxSetup === 'true'} value={'true'} onChange={handleMaxSetup} /> </tbody>
<label htmlFor="ch04">{getMessage('modal.module.basic.setting.module.placement.maximum')}</label> </table>
</div> */}
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div className="hide-check-guide">
{getMessage('modal.module.basic.setting.module.placement.max.size.check')}
<button className={`arr ${!useTab ? 'act' : ''}`} onClick={() => setUseTab(!useTab)}></button>
</div>
<div className={`module-table-box mt10 ${useTab ? 'hide' : ''}`}>
<div className="module-table-inner">
<div className="roof-module-table">
<table className="">
<thead>
<tr>
<th rowSpan={2} style={{ width: '22%' }}></th>
{selectedModules &&
selectedModules.itemList.map((item) => (
<th colSpan={colspan}>
<div className="color-wrap">
<span className="color-box" style={{ backgroundColor: item.color }}></span>
<span className="name">{item.itemNm}</span>
</div>
</th>
))}
</tr>
<tr>
{selectedModules.itemList.map((item) => (
<>
<th>{getMessage('modal.module.basic.setting.module.placement.max.row')}</th>
{colspan > 1 && <th>{getMessage('modal.module.basic.setting.module.placement.max.rows.multiple')}</th>}
</>
))}
</tr>
</thead>
<tbody>
{moduleSelectionData.roofConstructions.map((item) => (
<tr>
<td>
<div className="color-wrap">
<span className="color-box" style={{ backgroundColor: roofOutlineColor(item.roofIndex) }}></span>
<span className="name">{item.addRoof.roofMatlNmJp}</span>
</div>
</td>
{selectedModules.itemList.map((item) => (
<>
<td className="al-c">7</td>
{colspan > 1 && <td className="al-c">5</td>}
</>
))}
</tr>
))}
</tbody>
</table>
</div>
</div>
</div>
</> </>
) )
}) })

15
src/hooks/module/useModuleBasicSetting.js
View File

@ -114,7 +114,7 @@ export function useModuleBasicSetting(tabNum) {
//육지붕 일경우에는 바로 배치면 설치LL //육지붕 일경우에는 바로 배치면 설치LL
canvas canvas
.getObjects() .getObjects()
.filter((roof) => roof.name === 'roof') .filter((roof) => roof.name === POLYGON_TYPE.ROOF)
.forEach((roof) => { .forEach((roof) => {
makeModuleInstArea(roof, null) makeModuleInstArea(roof, null)
}) })
@ -172,13 +172,13 @@ export function useModuleBasicSetting(tabNum) {
const roofOutlineColor = (roofIndex) => { const roofOutlineColor = (roofIndex) => {
if (roofIndex === 1) { if (roofIndex === 1) {
return 'rgb(86,170,255)' return '#FFC000'
} else if (roofIndex === 2) { } else if (roofIndex === 2) {
return 'rgb(125, 252, 173)' return '#7030A0'
} else if (roofIndex === 3) { } else if (roofIndex === 3) {
return 'rgb(238, 109, 255)' return '#385723'
} else { } else {
return 'rgb(252, 148, 106)' return '#FFFF00'
} }
} }
@ -775,7 +775,7 @@ export function useModuleBasicSetting(tabNum) {
const mixAsgYn = trestlePolygon.modules[0].moduleInfo.mixAsgYn const mixAsgYn = trestlePolygon.modules[0].moduleInfo.mixAsgYn
//현재 체크된 모듈기준으로 혼합가능인지 확인 Y === Y, N === N 일때만 설치 가능 //현재 체크된 모듈기준으로 혼합가능인지 확인 Y === Y, N === N 일때만 설치 가능
if (checkedModule[0].mixAsgYn !== mixAsgYn) { if (checkedModule[0].mixAsgYn !== mixAsgYn) {
swalFire({ text: getMessage('module.place.mix.asg.yn.error') }) swalFire({ text: getMessage('modal.module.basic.setting.module.placement.mix.asg.yn.error') })
return return
} }
} }
@ -1732,7 +1732,7 @@ export function useModuleBasicSetting(tabNum) {
//Y인 모듈과 N인 모듈이 둘다 존재하면 설치 불가 //Y인 모듈과 N인 모듈이 둘다 존재하면 설치 불가
if (mixAsgY.length > 0 && mixAsgN.length > 0) { if (mixAsgY.length > 0 && mixAsgN.length > 0) {
swalFire({ text: getMessage('module.place.mix.asg.yn.error') }) swalFire({ text: getMessage('modal.module.basic.setting.module.placement.mix.asg.yn.error') })
return return
} }
@ -3575,5 +3575,6 @@ export function useModuleBasicSetting(tabNum) {
autoFlatroofModuleSetup, autoFlatroofModuleSetup,
checkModuleDisjointObjects, checkModuleDisjointObjects,
makeModuleInitArea, makeModuleInitArea,
roofOutlineColor,
} }
} }

11
src/locales/ja.json
View File

@ -116,8 +116,8 @@
"modal.module.basic.setting.module.placement.do.not": "しない", "modal.module.basic.setting.module.placement.do.not": "しない",
"modal.module.basic.setting.module.placement.arrangement.standard": "配置基準", "modal.module.basic.setting.module.placement.arrangement.standard": "配置基準",
"modal.module.basic.setting.module.placement.arrangement.standard.center": "中央", "modal.module.basic.setting.module.placement.arrangement.standard.center": "中央",
"modal.module.basic.setting.module.placement.arrangement.standard.eaves": "軒", "modal.module.basic.setting.module.placement.arrangement.standard.eaves": "軒側",
"modal.module.basic.setting.module.placement.arrangement.standard.ridge": "棟", "modal.module.basic.setting.module.placement.arrangement.standard.ridge": "棟側",
"modal.module.basic.setting.module.placement.maximum": "最大配置", "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": "配置基準設定",
"modal.module.basic.setting.pitch.module.placement.standard.setting.south": "南向き設置", "modal.module.basic.setting.pitch.module.placement.standard.setting.south": "南向き設置",
@ -1045,5 +1045,10 @@
"chidory.can.not.install": "千鳥配置できない工法です。", "chidory.can.not.install": "千鳥配置できない工法です。",
"module.layout.setup.max.count": "모듈의 최대 단수는 {0}, 최대 열수는 {1} 입니다. (JA)", "module.layout.setup.max.count": "모듈의 최대 단수는 {0}, 최대 열수는 {1} 입니다. (JA)",
"module.layout.setup.max.count.multiple": "모듈 {0}번의 최대 단수는 {1}, 최대 열수는 {2} 입니다. (JA)", "module.layout.setup.max.count.multiple": "모듈 {0}번의 최대 단수는 {1}, 최대 열수는 {2} 입니다. (JA)",
"roofAllocation.not.found": "할당할 지붕이 없습니다. (JA)" "roofAllocation.not.found": "할당할 지붕이 없습니다. (JA)",
"modal.module.basic.setting.module.placement.max.size.check": "지붕재별 모듈의 최대 단수. 혼합 최대 단수를 확인하십시오. (JA)",
"modal.module.basic.setting.module.placement.max.row": "최대 단수 (JA)",
"modal.module.basic.setting.module.placement.max.rows.multiple": "혼합 단수 (JA)",
"modal.module.basic.setting.module.placement.mix.asg.yn.error": "혼합 설치 불가능한 모듈입니다. (JA)",
"modal.module.basic.setting.module.placement.mix.asg.yn": "ミックス. (JA)"
} }

7
src/locales/ko.json
View File

@ -1045,5 +1045,10 @@
"chidory.can.not.install": "치조 불가 공법입니다.", "chidory.can.not.install": "치조 불가 공법입니다.",
"module.layout.setup.max.count": "모듈의 최대 단수는 {0}, 최대 열수는 {1} 입니다.", "module.layout.setup.max.count": "모듈의 최대 단수는 {0}, 최대 열수는 {1} 입니다.",
"module.layout.setup.max.count.multiple": "모듈 {0}번의 최대 단수는 {1}, 최대 열수는 {2} 입니다.", "module.layout.setup.max.count.multiple": "모듈 {0}번의 최대 단수는 {1}, 최대 열수는 {2} 입니다.",
"roofAllocation.not.found": "할당할 지붕이 없습니다." "roofAllocation.not.found": "할당할 지붕이 없습니다.",
"modal.module.basic.setting.module.placement.max.size.check": "지붕재별 모듈의 최대 단수. 혼합 최대 단수를 확인하십시오.",
"modal.module.basic.setting.module.placement.max.row": "최대 단수",
"modal.module.basic.setting.module.placement.max.rows.multiple": "혼합 단수",
"modal.module.basic.setting.module.placement.mix.asg.yn.error": "혼합 설치 불가능한 모듈입니다.",
"modal.module.basic.setting.module.placement.mix.asg.yn": "혼합"
} }