Merge remote-tracking branch 'origin/qcast-pub' into dev
# Conflicts: # src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx # src/locales/ja.json
This commit is contained in:
김민식
commit
b16174ec0d
3
public/static/images/canvas/hide-check-arr.svg
Normal file
3
public/static/images/canvas/hide-check-arr.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="16" height="14" viewBox="0 0 16 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M8 0L15.7942 13.5H0.205771L8 0Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 160 B |
@ -31,6 +31,7 @@ export default function CanvasLayout({ children }) {
|
||||
return (
|
||||
<div className="canvas-layout">
|
||||
<div className={`canvas-page-list ${['outline', 'surface', 'module'].includes(selectedMenu) ? 'active' : ''}`}>
|
||||
<div className="canvas-id">{objectNo}</div>
|
||||
<div className="canvas-plane-wrap">
|
||||
{plans.map((plan, index) => (
|
||||
<button
|
||||
|
||||
@ -20,6 +20,10 @@ import { useMasterController } from '@/hooks/common/useMasterController'
|
||||
import { loginUserStore } from '@/store/commonAtom'
|
||||
import { currentCanvasPlanState } from '@/store/canvasAtom'
|
||||
import { POLYGON_TYPE } from '@/common/common'
|
||||
import { useModuleSelection } from '@/hooks/module/useModuleSelection'
|
||||
import { useOrientation } from '@/hooks/module/useOrientation'
|
||||
import Trestle from './step/Trestle'
|
||||
import { roofsState } from '@/store/roofAtom'
|
||||
|
||||
export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
|
||||
const { getMessage } = useMessage()
|
||||
@ -27,24 +31,118 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
|
||||
const [tabNum, setTabNum] = useState(1)
|
||||
const canvasSetting = useRecoilValue(canvasSettingState)
|
||||
const orientationRef = useRef(null)
|
||||
const trestleRef = useRef(null)
|
||||
const { initEvent } = useEvent()
|
||||
const [isManualModuleSetup, setIsManualModuleSetup] = useRecoilState(isManualModuleSetupState)
|
||||
const moduleSelectionData = useRecoilValue(moduleSelectionDataState)
|
||||
const addedRoofs = useRecoilValue(addedRoofsState)
|
||||
const [moduleSelectionData, setModuleSelectionData] = useRecoilState(moduleSelectionDataState)
|
||||
const [addedRoofs, setAddedRoofs] = useRecoilState(addedRoofsState)
|
||||
const loginUserState = useRecoilValue(loginUserStore)
|
||||
const currentCanvasPlan = useRecoilValue(currentCanvasPlanState)
|
||||
const canvas = useRecoilValue(canvasState)
|
||||
const [basicSetting, setBasicSettings] = useRecoilState(basicSettingState)
|
||||
const [isClosePopup, setIsClosePopup] = useState({ close: false, id: 0 })
|
||||
const [checkedModules, setCheckedModules] = useRecoilState(checkedModuleState)
|
||||
|
||||
const [roofs, setRoofs] = useState(null)
|
||||
const {
|
||||
moduleSelectionInitParams,
|
||||
selectedModules,
|
||||
roughnessCodes,
|
||||
windSpeedCodes,
|
||||
managementState,
|
||||
setManagementState,
|
||||
moduleList,
|
||||
setSelectedModules,
|
||||
selectedSurfaceType,
|
||||
setSelectedSurfaceType,
|
||||
installHeight,
|
||||
setInstallHeight,
|
||||
standardWindSpeed,
|
||||
setStandardWindSpeed,
|
||||
verticalSnowCover,
|
||||
setVerticalSnowCover,
|
||||
handleChangeModule,
|
||||
handleChangeSurfaceType,
|
||||
handleChangeWindSpeed,
|
||||
handleChangeInstallHeight,
|
||||
handleChangeVerticalSnowCover,
|
||||
} = useModuleSelection({ addedRoofs })
|
||||
const { nextStep, compasDeg, setCompasDeg } = useOrientation()
|
||||
const { trigger: orientationTrigger } = useCanvasPopupStatusController(1)
|
||||
const { trigger: trestleTrigger } = useCanvasPopupStatusController(2)
|
||||
const { trigger: placementTrigger } = useCanvasPopupStatusController(3)
|
||||
const roofsStore = useRecoilValue(roofsState)
|
||||
// const { initEvent } = useContext(EventContext)
|
||||
const { manualModuleSetup, autoModuleSetup, manualFlatroofModuleSetup, autoFlatroofModuleSetup } = useModuleBasicSetting(tabNum)
|
||||
const { updateObjectDate } = useMasterController()
|
||||
|
||||
useEffect(() => {
|
||||
if (managementState) console.log('managementState', managementState)
|
||||
}, [managementState])
|
||||
|
||||
useEffect(() => {
|
||||
if (roofsStore && addedRoofs) {
|
||||
console.log('🚀 ~ useEffect ~ roofsStore, addedRoofs:', roofsStore, addedRoofs)
|
||||
setRoofs(
|
||||
addedRoofs.map((roof, index) => {
|
||||
return {
|
||||
...roof,
|
||||
...roofsStore[index].addRoof,
|
||||
}
|
||||
}),
|
||||
)
|
||||
|
||||
setModuleSelectionData({
|
||||
...moduleSelectionData,
|
||||
roofConstructions: roofsStore.map((roof) => {
|
||||
return {
|
||||
addRoof: {
|
||||
...roof.addRoof,
|
||||
},
|
||||
construction: {
|
||||
...roof.construction,
|
||||
},
|
||||
trestle: {
|
||||
...roof.trestle,
|
||||
},
|
||||
}
|
||||
}),
|
||||
})
|
||||
}
|
||||
}, [roofsStore, addedRoofs])
|
||||
|
||||
useEffect(() => {
|
||||
let hasModules = canvas
|
||||
.getObjects()
|
||||
.filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE)
|
||||
.some((obj) => obj.modules?.length > 0)
|
||||
|
||||
if (hasModules) {
|
||||
orientationRef.current.handleNextStep()
|
||||
setTabNum(3)
|
||||
}
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
if (basicSetting.roofSizeSet !== '3') {
|
||||
manualModuleSetup(placementRef)
|
||||
} else {
|
||||
manualFlatroofModuleSetup(placementFlatRef)
|
||||
}
|
||||
if (isClosePopup.close) {
|
||||
closePopup(isClosePopup.id)
|
||||
}
|
||||
}, [isManualModuleSetup, isClosePopup])
|
||||
|
||||
useEffect(() => {
|
||||
setIsManualModuleSetup(false)
|
||||
}, [checkedModules])
|
||||
|
||||
const handleBtnNextStep = () => {
|
||||
if (tabNum === 1) {
|
||||
console.log('moduleSelectionData', moduleSelectionData)
|
||||
orientationRef.current.handleNextStep()
|
||||
setAddedRoofs(roofs)
|
||||
return
|
||||
} else if (tabNum === 2) {
|
||||
if (basicSetting.roofSizeSet !== '3') {
|
||||
if (!isObjectNotEmpty(moduleSelectionData.module)) {
|
||||
@ -55,22 +153,22 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
|
||||
return
|
||||
}
|
||||
|
||||
if (addedRoofs.length !== moduleSelectionData.roofConstructions.length) {
|
||||
// if (addedRoofs.length !== moduleSelectionData.roofConstructions.length) {
|
||||
// Swal.fire({
|
||||
// title: getMessage('construction.length.difference'),
|
||||
// icon: 'warning',
|
||||
// })
|
||||
// return
|
||||
// }
|
||||
|
||||
if (!trestleRef.current.isComplete()) {
|
||||
Swal.fire({
|
||||
title: getMessage('construction.length.difference'),
|
||||
title: getMessage('아직 멀었따'),
|
||||
icon: 'warning',
|
||||
})
|
||||
return
|
||||
}
|
||||
//물건정보 갱신일 수정
|
||||
updateObjectDataApi({
|
||||
objectNo: currentCanvasPlan.objectNo, //오브젝트_no
|
||||
standardWindSpeedId: moduleSelectionData.common.stdWindSpeed, //기준풍속코드
|
||||
verticalSnowCover: moduleSelectionData.common.stdSnowLd, //적설량
|
||||
surfaceType: moduleSelectionData.common.illuminationTpNm, //면조도구분
|
||||
installHeight: moduleSelectionData.common.instHt, //설치높이
|
||||
userId: loginUserState.userId, //작성자아아디
|
||||
})
|
||||
} else {
|
||||
if (!isObjectNotEmpty(moduleSelectionData.module)) {
|
||||
Swal.fire({
|
||||
@ -103,18 +201,6 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
|
||||
const res = await updateObjectDate(params)
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
let hasModules = canvas
|
||||
.getObjects()
|
||||
.filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE)
|
||||
.some((obj) => obj.modules?.length > 0)
|
||||
|
||||
if (hasModules) {
|
||||
orientationRef.current.handleNextStep()
|
||||
setTabNum(3)
|
||||
}
|
||||
}, [])
|
||||
|
||||
//팝업 닫기 버튼 이벤트
|
||||
const handleClosePopup = (id) => {
|
||||
if (tabNum == 3) {
|
||||
@ -125,44 +211,86 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
|
||||
setIsClosePopup({ close: true, id: id })
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (basicSetting.roofSizeSet !== '3') {
|
||||
manualModuleSetup(placementRef)
|
||||
} else {
|
||||
manualFlatroofModuleSetup(placementFlatRef)
|
||||
}
|
||||
if (isClosePopup.close) {
|
||||
closePopup(isClosePopup.id)
|
||||
}
|
||||
}, [isManualModuleSetup, isClosePopup])
|
||||
|
||||
useEffect(() => {
|
||||
setIsManualModuleSetup(false)
|
||||
}, [checkedModules])
|
||||
const orientationProps = {
|
||||
roofs,
|
||||
setRoofs,
|
||||
tabNum,
|
||||
setTabNum,
|
||||
compasDeg, // 방위각
|
||||
setCompasDeg,
|
||||
moduleSelectionInitParams,
|
||||
selectedModules,
|
||||
moduleSelectionData,
|
||||
setModuleSelectionData,
|
||||
roughnessCodes, // 면조도 목록
|
||||
windSpeedCodes, // 기준풍속 목록
|
||||
managementState,
|
||||
setManagementState,
|
||||
moduleList, // 모듈 리스트
|
||||
setSelectedModules,
|
||||
selectedSurfaceType,
|
||||
setSelectedSurfaceType,
|
||||
installHeight, // 설치높이
|
||||
setInstallHeight,
|
||||
standardWindSpeed, // 기준풍속
|
||||
setStandardWindSpeed,
|
||||
verticalSnowCover, // 적설량
|
||||
setVerticalSnowCover,
|
||||
currentCanvasPlan,
|
||||
loginUserState,
|
||||
handleChangeModule,
|
||||
handleChangeSurfaceType,
|
||||
handleChangeWindSpeed,
|
||||
handleChangeInstallHeight,
|
||||
handleChangeVerticalSnowCover,
|
||||
orientationTrigger,
|
||||
nextStep,
|
||||
updateObjectDataApi,
|
||||
}
|
||||
const trestleProps = {
|
||||
roofs,
|
||||
setRoofs,
|
||||
setTabNum,
|
||||
moduleSelectionData,
|
||||
setModuleSelectionData,
|
||||
trestleTrigger,
|
||||
}
|
||||
const placementProps = {}
|
||||
|
||||
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.Body>
|
||||
<div className="roof-module-tab">
|
||||
<div className={`module-tab-bx act`}>{getMessage('modal.module.basic.setting.orientation.setting')}</div>
|
||||
<span className={`tab-arr ${tabNum !== 1 ? 'act' : ''}`}></span>
|
||||
<div className={`module-tab-bx ${tabNum !== 1 ? 'act' : ''}`}>{getMessage('modal.module.basic.setting.module.setting')}</div>
|
||||
<span className={`tab-arr ${tabNum === 3 ? 'act' : ''}`}></span>
|
||||
<div className={`module-tab-bx ${tabNum === 3 ? 'act' : ''}`}>{getMessage('modal.module.basic.setting.module.placement')}</div>
|
||||
{basicSetting.roofSizeSet && basicSetting.roofSizeSet != '3' && (
|
||||
<>
|
||||
<div className={`module-tab-bx ${tabNum !== 1 ? 'act' : ''}`}>{getMessage('modal.module.basic.setting.module.setting')}</div>
|
||||
<span className={`tab-arr ${tabNum === 3 ? 'act' : ''}`}></span>
|
||||
<div className={`module-tab-bx ${tabNum === 3 ? 'act' : ''}`}>{getMessage('modal.module.basic.setting.module.placement')}</div>
|
||||
</>
|
||||
)}
|
||||
{basicSetting.roofSizeSet && basicSetting.roofSizeSet == '3' && (
|
||||
<>
|
||||
<div className={`module-tab-bx ${tabNum === 2 ? 'act' : ''}`}>{getMessage('modal.module.basic.setting.module.placement')}</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
{tabNum === 1 && <Orientation ref={orientationRef} tabNum={tabNum} setTabNum={setTabNum} />}
|
||||
{tabNum === 1 && <Orientation ref={orientationRef} {...orientationProps} />}
|
||||
{/*배치면 초기설정 - 입력방법: 복시도 입력 || 실측값 입력*/}
|
||||
{basicSetting.roofSizeSet && basicSetting.roofSizeSet != '3' && tabNum === 2 && <Module setTabNum={setTabNum} />}
|
||||
{basicSetting.roofSizeSet && basicSetting.roofSizeSet != '3' && tabNum === 2 && <Trestle ref={trestleRef} {...trestleProps} />}
|
||||
{basicSetting.roofSizeSet && basicSetting.roofSizeSet != '3' && tabNum === 3 && <Placement setTabNum={setTabNum} ref={placementRef} />}
|
||||
|
||||
{/*배치면 초기설정 - 입력방법: 육지붕*/}
|
||||
{basicSetting.roofSizeSet && basicSetting.roofSizeSet == '3' && tabNum === 2 && <PitchModule setTabNum={setTabNum} />}
|
||||
{basicSetting.roofSizeSet && basicSetting.roofSizeSet == '3' && tabNum === 3 && (
|
||||
{/* {basicSetting.roofSizeSet && basicSetting.roofSizeSet == '3' && tabNum === 3 && <PitchModule setTabNum={setTabNum} />} */}
|
||||
{basicSetting.roofSizeSet && basicSetting.roofSizeSet == '3' && tabNum === 2 && (
|
||||
<PitchPlacement setTabNum={setTabNum} ref={placementFlatRef} />
|
||||
)}
|
||||
|
||||
<div className="grid-btn-wrap">
|
||||
{/* {tabNum === 1 && <button className="btn-frame modal mr5">{getMessage('modal.common.save')}</button>} */}
|
||||
|
||||
{tabNum !== 1 && (
|
||||
<button className="btn-frame modal mr5" onClick={() => setTabNum(tabNum - 1)}>
|
||||
{getMessage('modal.module.basic.setting.prev')}
|
||||
@ -179,6 +307,7 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
|
||||
<>
|
||||
{basicSetting.roofSizeSet && basicSetting.roofSizeSet != '3' && (
|
||||
<>
|
||||
<button className="btn-frame modal mr5">{getMessage('modal.module.basic.setting.row.batch')}</button>
|
||||
<button className={`btn-frame modal mr5 ${isManualModuleSetup ? 'act' : ''}`} onClick={handleManualModuleSetup}>
|
||||
{getMessage('modal.module.basic.setting.passivity.placement')}
|
||||
</button>
|
||||
@ -189,6 +318,7 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
|
||||
)}
|
||||
{basicSetting.roofSizeSet && basicSetting.roofSizeSet == '3' && (
|
||||
<>
|
||||
<button className="btn-frame modal mr5">{getMessage('modal.module.basic.setting.row.batch')}</button>
|
||||
<button className={`btn-frame modal mr5 ${isManualModuleSetup ? 'act' : ''}`} onClick={handleManualModuleSetup}>
|
||||
{getMessage('modal.module.basic.setting.passivity.placement')}
|
||||
</button>
|
||||
|
||||
@ -1,35 +1,153 @@
|
||||
import { forwardRef, useContext, useEffect, useImperativeHandle, useState } from 'react'
|
||||
import { forwardRef, use, useContext, useEffect, useImperativeHandle, useState } from 'react'
|
||||
import { useMessage } from '@/hooks/useMessage'
|
||||
import { useOrientation } from '@/hooks/module/useOrientation'
|
||||
import { getDegreeInOrientation } from '@/util/canvas-util'
|
||||
import { numberCheck } from '@/util/common-utils'
|
||||
import { useCanvasPopupStatusController } from '@/hooks/common/useCanvasPopupStatusController'
|
||||
import { addedRoofsState, basicSettingState } from '@/store/settingAtom'
|
||||
import { useRecoilState, useRecoilValue } from 'recoil'
|
||||
import QSelectBox from '@/components/common/select/QSelectBox'
|
||||
import { moduleSelectionDataState } from '@/store/selectedModuleOptions'
|
||||
|
||||
export const Orientation = forwardRef(({ tabNum }, ref) => {
|
||||
export const Orientation = forwardRef((props, ref) => {
|
||||
const { getMessage } = useMessage()
|
||||
|
||||
const { trigger: canvasPopupStatusTrigger } = useCanvasPopupStatusController(1)
|
||||
|
||||
const { nextStep, compasDeg, setCompasDeg } = useOrientation()
|
||||
|
||||
const [hasAnglePassivity, setHasAnglePassivity] = useState(false)
|
||||
const basicSetting = useRecoilValue(basicSettingState)
|
||||
const [addedRoofs, setAddedRoofs] = useRecoilState(addedRoofsState) //지붕재 선택
|
||||
const [roofTab, setRoofTab] = useState(0) //지붕재 탭
|
||||
const {
|
||||
roofs,
|
||||
setRoofs,
|
||||
tabNum,
|
||||
setTabNum,
|
||||
compasDeg,
|
||||
setCompasDeg,
|
||||
moduleSelectionInitParams,
|
||||
selectedModules,
|
||||
roughnessCodes,
|
||||
windSpeedCodes,
|
||||
managementState,
|
||||
setManagementState,
|
||||
moduleList,
|
||||
moduleSelectionData,
|
||||
setModuleSelectionData,
|
||||
setSelectedModules,
|
||||
selectedSurfaceType,
|
||||
setSelectedSurfaceType,
|
||||
installHeight,
|
||||
setInstallHeight,
|
||||
standardWindSpeed,
|
||||
setStandardWindSpeed,
|
||||
verticalSnowCover,
|
||||
setVerticalSnowCover,
|
||||
orientationTrigger,
|
||||
nextStep,
|
||||
currentCanvasPlan,
|
||||
loginUserState,
|
||||
updateObjectDataApi,
|
||||
} = props
|
||||
const [inputCompasDeg, setInputCompasDeg] = useState(compasDeg ?? 0)
|
||||
const [inputInstallHeight, setInputInstallHeight] = useState('0')
|
||||
const [inputVerticalSnowCover, setInputVerticalSnowCover] = useState('0')
|
||||
const [inputRoughness, setInputRoughness] = useState(selectedSurfaceType)
|
||||
const [inputStandardWindSpeed, setInputStandardWindSpeed] = useState(standardWindSpeed)
|
||||
const moduleData = {
|
||||
header: [
|
||||
{ name: getMessage('module'), width: 150, prop: 'module', type: 'color-box' },
|
||||
{
|
||||
name: `${getMessage('height')} (mm)`,
|
||||
prop: 'height',
|
||||
},
|
||||
{ name: `${getMessage('width')} (mm)`, prop: 'width' },
|
||||
{ name: `${getMessage('output')} (W)`, prop: 'output' },
|
||||
],
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedSurfaceType) {
|
||||
console.log(roughnessCodes, selectedSurfaceType)
|
||||
setInputRoughness(roughnessCodes.find((code) => code.clCode === moduleSelectionData.common.illuminationTp))
|
||||
}
|
||||
}, [selectedSurfaceType])
|
||||
|
||||
useEffect(() => {
|
||||
if (standardWindSpeed) setInputStandardWindSpeed(windSpeedCodes.find((code) => code.clCode === moduleSelectionData.common.stdWindSpeed))
|
||||
}, [standardWindSpeed])
|
||||
|
||||
useEffect(() => {
|
||||
if (managementState?.installHeight && managementState?.installHeight) {
|
||||
console.log('🚀 ~ useEffect ~ managementState:', managementState)
|
||||
setSelectedSurfaceType(roughnessCodes.find((code) => code.clCode === managementState?.surfaceTypeValue))
|
||||
setInputInstallHeight(managementState?.installHeight)
|
||||
setStandardWindSpeed(windSpeedCodes.find((code) => code.clCode === managementState?.standardWindSpeedId))
|
||||
setInputVerticalSnowCover(managementState?.verticalSnowCover)
|
||||
}
|
||||
}, [managementState])
|
||||
|
||||
useEffect(() => {
|
||||
if (moduleSelectionData) {
|
||||
console.log('moduleSelectionData', moduleSelectionData)
|
||||
}
|
||||
}, [moduleSelectionData])
|
||||
|
||||
useImperativeHandle(ref, () => ({
|
||||
handleNextStep,
|
||||
}))
|
||||
|
||||
const handleNextStep = () => {
|
||||
nextStep()
|
||||
canvasPopupStatusTrigger(compasDeg)
|
||||
if (isComplete()) {
|
||||
const common = {
|
||||
illuminationTp: inputRoughness.clCode,
|
||||
illuminationTpNm: inputRoughness.clCodeNm,
|
||||
instHt: inputInstallHeight,
|
||||
stdWindSpeed: inputStandardWindSpeed.clCode,
|
||||
stdSnowLd: inputVerticalSnowCover,
|
||||
saleStoreNorthFlg: managementState?.saleStoreNorthFlg,
|
||||
moduleTpCd: selectedModules.itemTp,
|
||||
moduleItemId: selectedModules.itemId,
|
||||
}
|
||||
setCompasDeg(inputCompasDeg)
|
||||
setInstallHeight(inputInstallHeight)
|
||||
setVerticalSnowCover(inputVerticalSnowCover)
|
||||
setSelectedSurfaceType(inputRoughness)
|
||||
setStandardWindSpeed(inputStandardWindSpeed)
|
||||
nextStep()
|
||||
setManagementState({
|
||||
...managementState,
|
||||
installHeight: inputInstallHeight,
|
||||
verticalSnowCover: inputVerticalSnowCover,
|
||||
standardWindSpeedId: inputStandardWindSpeed.clCode,
|
||||
surfaceType: inputRoughness.clCodeNm,
|
||||
surfaceTypeValue: inputRoughness.clCode,
|
||||
})
|
||||
setModuleSelectionData({
|
||||
...moduleSelectionData,
|
||||
module: {
|
||||
...selectedModules,
|
||||
},
|
||||
})
|
||||
orientationTrigger({
|
||||
compasDeg: inputCompasDeg,
|
||||
common: common,
|
||||
module: {
|
||||
...selectedModules,
|
||||
},
|
||||
})
|
||||
updateObjectDataApi({
|
||||
objectNo: currentCanvasPlan.objectNo, //오브젝트_no
|
||||
standardWindSpeedId: inputStandardWindSpeed.clCode, //기준풍속코드
|
||||
verticalSnowCover: inputVerticalSnowCover, //적설량
|
||||
surfaceType: inputRoughness.clCodeNm, //면조도구분
|
||||
installHeight: inputInstallHeight, //설치높이
|
||||
userId: loginUserState.userId, //작성자아아디
|
||||
})
|
||||
setTabNum(2)
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
checkDegree(compasDeg)
|
||||
}, [compasDeg])
|
||||
|
||||
const checkDegree = (e) => {
|
||||
if (e === '-0' || e === '-') {
|
||||
setCompasDeg('-')
|
||||
setInputCompasDeg('-')
|
||||
return
|
||||
}
|
||||
if (e === '0-') {
|
||||
@ -45,71 +163,256 @@ export const Orientation = forwardRef(({ tabNum }, ref) => {
|
||||
}
|
||||
}
|
||||
|
||||
const isComplete = () => {
|
||||
if (basicSetting && basicSetting.roofSizeSet !== '3') {
|
||||
if (inputInstallHeight <= 0) {
|
||||
return false
|
||||
}
|
||||
|
||||
if (+inputVerticalSnowCover <= 0) {
|
||||
return false
|
||||
}
|
||||
|
||||
if (!inputStandardWindSpeed) return false
|
||||
if (!inputRoughness) return false
|
||||
}
|
||||
|
||||
return true
|
||||
}
|
||||
|
||||
const handleChangeModule = (e) => {
|
||||
const newRoofs = addedRoofs.map((roof) => {
|
||||
return {
|
||||
...roof,
|
||||
lengthBase: null,
|
||||
raftBaseCd: null,
|
||||
trestleMkrCd: null,
|
||||
constMthdCd: null,
|
||||
constTp: null,
|
||||
roofBaseCd: null,
|
||||
ridgeMargin: null,
|
||||
kerabaMargin: null,
|
||||
eavesMargin: null,
|
||||
roofPchBase: null,
|
||||
cvrYn: 'N',
|
||||
snowGdPossYn: 'N',
|
||||
cvrChecked: false,
|
||||
snowGdChecked: false,
|
||||
}
|
||||
})
|
||||
setRoofs(newRoofs)
|
||||
setSelectedModules(e)
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="properties-setting-wrap">
|
||||
<div className="outline-wrap">
|
||||
<div className="guide">{getMessage('modal.module.basic.setting.orientation.setting.info')}</div>
|
||||
<div className="roof-module-compas">
|
||||
<div className="compas-box">
|
||||
<div className="compas-box-inner">
|
||||
{Array.from({ length: 180 / 15 }).map((dot, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`circle ${getDegreeInOrientation(compasDeg) === -1 * (-15 * index + 180) || (index === 0 && compasDeg >= 172 && index === 0 && compasDeg <= 180) || (compasDeg === -180 && index === 0) ? 'act' : ''}`}
|
||||
onClick={() => {
|
||||
if (index === 0) {
|
||||
setCompasDeg(180)
|
||||
return
|
||||
}
|
||||
setCompasDeg(-1 * (-15 * index + 180))
|
||||
}}
|
||||
>
|
||||
{index === 0 && <i>180°</i>}
|
||||
{index === 6 && <i>-90°</i>}
|
||||
<div className="roof-module-inner">
|
||||
<div className="compas-wrapper">
|
||||
<div className="guide">{getMessage('modal.module.basic.setting.orientation.setting.info')}</div>
|
||||
<div className="roof-module-compas">
|
||||
<div className="compas-box">
|
||||
<div className="compas-box-inner">
|
||||
{Array.from({ length: 180 / 15 }).map((dot, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`circle ${getDegreeInOrientation(inputCompasDeg) === -1 * (-15 * index + 180) || (index === 0 && inputCompasDeg >= 172 && index === 0 && inputCompasDeg <= 180) || (inputCompasDeg === -180 && index === 0) ? 'act' : ''}`}
|
||||
onClick={() => {
|
||||
if (index === 0) {
|
||||
setInputCompasDeg(180)
|
||||
return
|
||||
}
|
||||
setInputCompasDeg(-1 * (-15 * index + 180))
|
||||
}}
|
||||
>
|
||||
{index === 0 && <i>180°</i>}
|
||||
{index === 6 && <i>-90°</i>}
|
||||
</div>
|
||||
))}
|
||||
{Array.from({ length: 180 / 15 }).map((dot, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`circle ${inputCompasDeg !== 180 && getDegreeInOrientation(inputCompasDeg) === 15 * index ? 'act' : ''}`}
|
||||
onClick={() => setInputCompasDeg(15 * index)}
|
||||
>
|
||||
{index === 0 && <i>0°</i>}
|
||||
{index === 6 && <i>90°</i>}
|
||||
</div>
|
||||
))}
|
||||
<div className="compas">
|
||||
<div className="compas-arr" style={{ transform: `rotate(${getDegreeInOrientation(inputCompasDeg)}deg)` }}></div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
{Array.from({ length: 180 / 15 }).map((dot, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`circle ${compasDeg !== 180 && getDegreeInOrientation(compasDeg) === 15 * index ? 'act' : ''}`}
|
||||
onClick={() => setCompasDeg(15 * index)}
|
||||
>
|
||||
{index === 0 && <i>0°</i>}
|
||||
{index === 6 && <i>90°</i>}
|
||||
</div>
|
||||
</div>
|
||||
<div className="center-wrap">
|
||||
<div className="outline-form">
|
||||
<div className="d-check-box pop mr10">
|
||||
<input type="checkbox" id="ch99" checked={hasAnglePassivity} onChange={() => setHasAnglePassivity(!hasAnglePassivity)} />
|
||||
<label htmlFor="ch99">{getMessage('modal.module.basic.setting.orientation.setting.angle.passivity')}</label>
|
||||
</div>
|
||||
))}
|
||||
<div className="compas">
|
||||
<div className="compas-arr" style={{ transform: `rotate(${getDegreeInOrientation(compasDeg)}deg)` }}></div>
|
||||
<div className="input-grid mr10" style={{ width: '60px' }}>
|
||||
<input
|
||||
type="text"
|
||||
className="input-origin block"
|
||||
value={inputCompasDeg}
|
||||
readOnly={!hasAnglePassivity}
|
||||
placeholder={0}
|
||||
onChange={(e) => checkDegree(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<span className="thin">°</span>
|
||||
<span className="thin">（ -180 〜 180 ）</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="center-wrap">
|
||||
<div className="d-check-box pop">
|
||||
<input type="checkbox" id="ch99" checked={hasAnglePassivity} onChange={() => setHasAnglePassivity(!hasAnglePassivity)} />
|
||||
<label htmlFor="ch99">{getMessage('modal.module.basic.setting.orientation.setting.angle.passivity')}（-180 〜 180）</label>
|
||||
</div>
|
||||
<div className="outline-form">
|
||||
<div className="input-grid mr10" style={{ width: '160px' }}>
|
||||
<input
|
||||
type="text"
|
||||
className="input-origin block"
|
||||
value={compasDeg}
|
||||
readOnly={!hasAnglePassivity}
|
||||
placeholder={0}
|
||||
onChange={
|
||||
(e) => checkDegree(e.target.value)
|
||||
// setCompasDeg(
|
||||
|
||||
// e.target.value === '-' || (e.target.value !== '' && parseInt(e.target.value) <= 180 && parseInt(e.target.value) >= -180)
|
||||
// ? e.target.value
|
||||
// : 0,
|
||||
// )
|
||||
}
|
||||
/>
|
||||
<div className="compas-table-wrap">
|
||||
<div className="compas-table-box mb10">
|
||||
<div className="outline-form mb10">
|
||||
<span>{getMessage('modal.module.basic.setting.module.setting')}</span>
|
||||
<div className="grid-select">
|
||||
{moduleList && (
|
||||
<QSelectBox
|
||||
options={moduleList}
|
||||
value={moduleSelectionInitParams}
|
||||
targetKey={'moduleItemId'}
|
||||
sourceKey={'itemId'}
|
||||
showKey={'itemNm'}
|
||||
onChange={(e) => handleChangeModule(e)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="roof-module-table">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
{moduleData.header.map((header) => {
|
||||
return (
|
||||
<th key={header.prop} style={{ width: header.width ? header.width + 'px' : '' }}>
|
||||
{header.name}
|
||||
</th>
|
||||
)
|
||||
})}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{Array.from({ length: 2 }).map((_, index) => {
|
||||
return selectedModules && selectedModules?.itemList && selectedModules?.itemList?.length >= index + 1 ? (
|
||||
<tr key={index}>
|
||||
<td>
|
||||
<div className="color-wrap">
|
||||
<span
|
||||
className="color-box"
|
||||
style={{
|
||||
backgroundColor: selectedModules.itemList[index].color,
|
||||
}}
|
||||
></span>
|
||||
<span className="name">{selectedModules.itemList[index].itemNm}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="al-r">{Number(selectedModules.itemList[index].shortAxis).toFixed(0)}</td>
|
||||
<td className="al-r">{Number(selectedModules.itemList[index].longAxis).toFixed(0)}</td>
|
||||
<td className="al-r">{Number(selectedModules.itemList[index].wpOut).toFixed(0)}</td>
|
||||
</tr>
|
||||
) : (
|
||||
<tr key={index}>
|
||||
<td>
|
||||
<div className="color-wrap"></div>
|
||||
</td>
|
||||
<td className="al-r"></td>
|
||||
<td className="al-r"></td>
|
||||
<td className="al-r"></td>
|
||||
</tr>
|
||||
)
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{basicSetting && basicSetting.roofSizeSet === '3' && (
|
||||
<div className="outline-form mt15">
|
||||
<span>{getMessage('modal.module.basic.setting.module.placement.area')}</span>
|
||||
<div className="input-grid mr10" style={{ width: '60px' }}>
|
||||
<input
|
||||
type="text"
|
||||
className="input-origin block"
|
||||
value={inputInstallHeight}
|
||||
onChange={(e) => setInputInstallHeight(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<span className="thin">m</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<span className="thin">°</span>
|
||||
|
||||
{basicSetting && basicSetting.roofSizeSet !== '3' && (
|
||||
<div className="compas-table-box">
|
||||
<div className="compas-grid-table">
|
||||
<div className="outline-form">
|
||||
<span>{getMessage('modal.module.basic.setting.module.surface.type')}</span>
|
||||
<div className="grid-select">
|
||||
{roughnessCodes.length > 0 && managementState && (
|
||||
<QSelectBox
|
||||
options={roughnessCodes}
|
||||
value={inputRoughness}
|
||||
targetKey={'clCode'}
|
||||
sourceKey={'clCode'}
|
||||
showKey={'clCodeNm'}
|
||||
onChange={(e) => {
|
||||
console.log('🚀 ~ handleChangeModule ~ inputRoughness:', e)
|
||||
setInputRoughness(e)
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="outline-form">
|
||||
<span>{getMessage('modal.module.basic.setting.module.fitting.height')}</span>
|
||||
<div className="input-grid mr10">
|
||||
<input
|
||||
type="text"
|
||||
className="input-origin block"
|
||||
value={inputInstallHeight}
|
||||
onChange={(e) => setInputInstallHeight(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<span className="thin">m</span>
|
||||
</div>
|
||||
<div className="outline-form">
|
||||
<span>{getMessage('modal.module.basic.setting.module.standard.wind.speed')}</span>
|
||||
<div className="grid-select">
|
||||
{windSpeedCodes.length > 0 && managementState && (
|
||||
<QSelectBox
|
||||
title={''}
|
||||
options={windSpeedCodes}
|
||||
value={inputStandardWindSpeed}
|
||||
targetKey={'clCode'}
|
||||
sourceKey={'clCode'}
|
||||
showKey={'clCodeNm'}
|
||||
onChange={(e) => {
|
||||
console.log('🚀 ~ handleChangeModule ~ inputStandardWindSpeed:', e)
|
||||
setInputStandardWindSpeed(e)
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="outline-form">
|
||||
<span>{getMessage('modal.module.basic.setting.module.standard.snowfall.amount')}</span>
|
||||
<div className="input-grid mr10">
|
||||
<input
|
||||
type="text"
|
||||
className="input-origin block"
|
||||
value={inputVerticalSnowCover}
|
||||
onChange={(e) => setInputVerticalSnowCover(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<span className="thin">cm</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
532
src/components/floor-plan/modal/basic/step/Trestle.jsx
Normal file
532
src/components/floor-plan/modal/basic/step/Trestle.jsx
Normal file
@ -0,0 +1,532 @@
|
||||
import { GlobalDataContext } from '@/app/GlobalDataProvider'
|
||||
import QSelectBox from '@/components/common/select/QSelectBox'
|
||||
import { useModuleTrestle } from '@/hooks/module/useModuleTrestle'
|
||||
import { useMessage } from '@/hooks/useMessage'
|
||||
import { currentAngleTypeSelector, pitchTextSelector } from '@/store/canvasAtom'
|
||||
import { roofsState } from '@/store/roofAtom'
|
||||
import { moduleSelectionDataState, selectedModuleState } from '@/store/selectedModuleOptions'
|
||||
import { isObjectNotEmpty } from '@/util/common-utils'
|
||||
import { forwardRef, useContext, useEffect, useImperativeHandle, useState } from 'react'
|
||||
import { useRecoilState, useRecoilValue } from 'recoil'
|
||||
|
||||
const Trestle = forwardRef((props, ref) => {
|
||||
const { setTabNum, trestleTrigger, roofs, setRoofs, moduleSelectionData, setModuleSelectionData } = props
|
||||
const { getMessage } = useMessage()
|
||||
// const [selectedTrestle, setSelectedTrestle] = useState()
|
||||
const currentAngleType = useRecoilValue(currentAngleTypeSelector)
|
||||
const pitchText = useRecoilValue(pitchTextSelector)
|
||||
const [selectedRoof, setSelectedRoof] = useState()
|
||||
const {
|
||||
trestleState,
|
||||
dispatch,
|
||||
raftBaseList,
|
||||
trestleList,
|
||||
constMthdList,
|
||||
roofBaseList,
|
||||
constructionList,
|
||||
eavesMargin,
|
||||
ridgeMargin,
|
||||
kerabaMargin,
|
||||
setEavesMargin,
|
||||
setRidgeMargin,
|
||||
setKerabaMargin,
|
||||
cvrYn,
|
||||
cvrChecked,
|
||||
snowGdPossYn,
|
||||
snowGdChecked,
|
||||
setCvrYn,
|
||||
setCvrChecked,
|
||||
setSnowGdPossYn,
|
||||
setSnowGdChecked,
|
||||
} = useModuleTrestle({
|
||||
selectedRoof,
|
||||
})
|
||||
const selectedModules = useRecoilValue(selectedModuleState) //선택된 모듈
|
||||
// const [moduleSelectionData, setModuleSelectionData] = useRecoilState(moduleSelectionDataState)
|
||||
const [lengthBase, setLengthBase] = useState(0)
|
||||
const [hajebichi, setHajebichi] = useState(0)
|
||||
const [selectedRaftBase, setSelectedRaftBase] = useState(null)
|
||||
const [selectedTrestle, setSelectedTrestle] = useState(null)
|
||||
const [selectedConstMthd, setSelectedConstMthd] = useState(null)
|
||||
const [selectedConstruction, setSelectedConstruction] = useState(null)
|
||||
const [selectedRoofBase, setSelectedRoofBase] = useState(null)
|
||||
const { managementState } = useContext(GlobalDataContext)
|
||||
|
||||
useEffect(() => {
|
||||
if (roofs && !selectedRoof) {
|
||||
setSelectedRoof(roofs[0])
|
||||
}
|
||||
}, [roofs])
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedRoof) {
|
||||
dispatch({ type: 'SET_INITIALIZE', roof: { ...selectedRoof, moduleTpCd: selectedModules.itemTp } })
|
||||
}
|
||||
}, [selectedRoof])
|
||||
|
||||
useEffect(() => {
|
||||
if (raftBaseList.length > 0) setSelectedRaftBase(raftBaseList.find((raft) => raft.clCode === trestleState?.raftBaseCd) ?? null)
|
||||
}, [raftBaseList])
|
||||
|
||||
useEffect(() => {
|
||||
if (trestleList.length > 0) setSelectedTrestle(trestleList.find((trestle) => trestle.trestleMkrCd === trestleState?.trestleMkrCd) ?? null)
|
||||
}, [trestleList])
|
||||
|
||||
useEffect(() => {
|
||||
if (roofBaseList.length > 0) setSelectedRoofBase(roofBaseList.find((roofBase) => roofBase.roofBaseCd === trestleState?.roofBaseCd) ?? null)
|
||||
}, [roofBaseList])
|
||||
|
||||
useEffect(() => {
|
||||
if (constMthdList.length > 0) setSelectedConstMthd(constMthdList.find((constMthd) => constMthd.constMthdCd === trestleState?.constMthdCd) ?? null)
|
||||
}, [constMthdList])
|
||||
|
||||
useEffect(() => {
|
||||
if (constructionList.length > 0) {
|
||||
setSelectedConstruction(constructionList.find((construction) => construction.constTp === trestleState?.constTp) ?? null)
|
||||
}
|
||||
}, [constructionList])
|
||||
|
||||
const getConstructionState = (index) => {
|
||||
if (constructionList && constructionList.length > 0) {
|
||||
if (constructionList[index].constPossYn === 'Y') {
|
||||
if (trestleState && trestleState.constTp === constructionList[index].constTp) {
|
||||
return 'blue'
|
||||
}
|
||||
return 'white'
|
||||
}
|
||||
return 'no-click'
|
||||
}
|
||||
return 'no-click'
|
||||
}
|
||||
|
||||
const onChangeRaftBase = (e) => {
|
||||
setSelectedRaftBase(e)
|
||||
dispatch({
|
||||
type: 'SET_RAFT_BASE',
|
||||
roof: {
|
||||
moduleTpCd: selectedModules.itemTp ?? '',
|
||||
roofMatlCd: selectedRoof?.roofMatlCd ?? '',
|
||||
raftBaseCd: e.clCode,
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
const onChangeTrestleMaker = (e) => {
|
||||
setSelectedTrestle(e)
|
||||
dispatch({
|
||||
type: 'SET_TRESTLE_MAKER',
|
||||
roof: {
|
||||
moduleTpCd: selectedModules.itemTp ?? '',
|
||||
roofMatlCd: selectedRoof?.roofMatlCd ?? '',
|
||||
raftBaseCd: trestleState.raftBaseCd ?? '',
|
||||
trestleMkrCd: e.trestleMkrCd,
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
const onChangeConstMthd = (e) => {
|
||||
setSelectedConstMthd(e)
|
||||
dispatch({
|
||||
type: 'SET_CONST_MTHD',
|
||||
roof: {
|
||||
moduleTpCd: selectedModules.itemTp ?? '',
|
||||
roofMatlCd: selectedRoof?.roofMatlCd ?? '',
|
||||
raftBaseCd: trestleState.raftBaseCd ?? '',
|
||||
trestleMkrCd: trestleState.trestleMkrCd,
|
||||
constMthdCd: e.constMthdCd,
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
const onChangeRoofBase = (e) => {
|
||||
setSelectedRoofBase(e)
|
||||
dispatch({
|
||||
type: 'SET_ROOF_BASE',
|
||||
roof: {
|
||||
moduleTpCd: selectedModules.itemTp ?? '',
|
||||
roofMatlCd: selectedRoof?.roofMatlCd ?? '',
|
||||
raftBaseCd: trestleState.raftBaseCd ?? '',
|
||||
trestleMkrCd: trestleState.trestleMkrCd,
|
||||
constMthdCd: trestleState.constMthdCd,
|
||||
roofBaseCd: e.roofBaseCd,
|
||||
illuminationTp: managementState?.surfaceTypeValue ?? '',
|
||||
instHt: managementState?.installHeight ?? '',
|
||||
stdWindSpeed: managementState?.standardWindSpeedId ?? '',
|
||||
stdSnowLd: managementState?.verticalSnowCover ?? '',
|
||||
inclCd: selectedRoof?.pitch ?? 0,
|
||||
roofPitch: Math.round(selectedRoof?.roofPchBase ?? 0),
|
||||
},
|
||||
})
|
||||
}
|
||||
const handleChangeRoofMaterial = (index) => {
|
||||
const newAddedRoofs = roofs.map((roof, i) => {
|
||||
if (i === selectedRoof.index) {
|
||||
return {
|
||||
...selectedRoof,
|
||||
...trestleState,
|
||||
eavesMargin,
|
||||
ridgeMargin,
|
||||
kerabaMargin,
|
||||
cvrYn,
|
||||
snowGdPossYn,
|
||||
cvrChecked,
|
||||
snowGdChecked,
|
||||
}
|
||||
}
|
||||
return { ...roof }
|
||||
})
|
||||
setRoofs(newAddedRoofs)
|
||||
setSelectedRoof(newAddedRoofs[index])
|
||||
}
|
||||
|
||||
const handleConstruction = (index) => {
|
||||
if (constructionList[index]?.constPossYn === 'Y') {
|
||||
dispatch({
|
||||
type: 'SET_CONSTRUCTION',
|
||||
roof: {
|
||||
moduleTpCd: selectedModules.itemTp ?? '',
|
||||
roofMatlCd: selectedRoof?.roofMatlCd ?? '',
|
||||
raftBaseCd: trestleState.raftBaseCd ?? '',
|
||||
trestleMkrCd: trestleState.trestleMkrCd,
|
||||
constMthdCd: trestleState.constMthdCd,
|
||||
roofBaseCd: trestleState.roofBaseCd,
|
||||
illuminationTp: managementState?.surfaceTypeValue ?? '',
|
||||
instHt: managementState?.installHeight ?? '',
|
||||
stdWindSpeed: managementState?.standardWindSpeedId ?? '',
|
||||
stdSnowLd: +managementState?.verticalSnowCover ?? '',
|
||||
inclCd: selectedRoof?.pitch.toString() ?? 0,
|
||||
roofPitch: Math.round(selectedRoof?.roofPchBase ?? 0),
|
||||
constTp: constructionList[index].constTp,
|
||||
mixMatlNo: selectedModules.mixMatlNo,
|
||||
workingWidth: selectedRoof?.length.toString() ?? '',
|
||||
// snowGdPossYn: constructionList[index].snowGdPossYn,
|
||||
// cvrYn: constructionList[index].cvrYn,
|
||||
},
|
||||
})
|
||||
|
||||
setCvrYn(constructionList[index].cvrYn)
|
||||
setSnowGdPossYn(constructionList[index].snowGdPossYn)
|
||||
setCvrChecked(false)
|
||||
setSnowGdChecked(false)
|
||||
}
|
||||
}
|
||||
|
||||
const isComplete = () => {
|
||||
const newAddedRoofs = roofs.map((roof, i) => {
|
||||
if (i === selectedRoof?.index) {
|
||||
return {
|
||||
...selectedRoof,
|
||||
...trestleState,
|
||||
eavesMargin,
|
||||
ridgeMargin,
|
||||
kerabaMargin,
|
||||
cvrYn,
|
||||
snowGdPossYn,
|
||||
cvrChecked,
|
||||
snowGdChecked,
|
||||
}
|
||||
}
|
||||
return { ...roof }
|
||||
})
|
||||
|
||||
let result = true
|
||||
newAddedRoofs.forEach((roof) => {
|
||||
if (roof.eavesMargin && roof.ridgeMargin && roof.kerabaMargin) {
|
||||
return true
|
||||
}
|
||||
|
||||
if (!roof.trestleMkrCd) result = false
|
||||
if (!roof.constMthdCd) result = false
|
||||
if (!roof.roofBaseCd) result = false
|
||||
if (!roof.constTp) result = false
|
||||
|
||||
if (selectedRoof.lenAuth === 'C') {
|
||||
if (!trestleState?.lengthBase) result = false
|
||||
}
|
||||
if (['C', 'R'].includes(selectedRoof.raftAuth)) {
|
||||
if (!roof.raftBaseCd) result = false
|
||||
}
|
||||
|
||||
if (['C', 'R'].includes(selectedRoof.roofPchAuth)) {
|
||||
if (!roof.roofPchBase) result = false
|
||||
}
|
||||
})
|
||||
|
||||
console.log('newAddedRoofs', newAddedRoofs)
|
||||
|
||||
if (result) {
|
||||
setRoofs(newAddedRoofs)
|
||||
setModuleSelectionData({
|
||||
...moduleSelectionData,
|
||||
roofConstruction: {
|
||||
...newAddedRoofs,
|
||||
},
|
||||
})
|
||||
trestleTrigger({
|
||||
roofConstruction: newAddedRoofs.map((roof) => {
|
||||
return {
|
||||
roofIndex: roof.index,
|
||||
addRoof: {
|
||||
...roof,
|
||||
},
|
||||
trestle: {
|
||||
...selectedTrestle,
|
||||
raftBaseCd: roof.raftBaseCd,
|
||||
},
|
||||
construction: {
|
||||
...constructionList.find((construction) => trestleState.constTp === construction.constTp),
|
||||
roofIndex: roof.index,
|
||||
setupCover: roof.cvrYn === 'Y',
|
||||
setupSnowCover: roof.snowGdYn === 'Y',
|
||||
selectedIndex: roof.index,
|
||||
},
|
||||
}
|
||||
}),
|
||||
})
|
||||
}
|
||||
|
||||
return result
|
||||
}
|
||||
|
||||
useImperativeHandle(ref, () => ({
|
||||
isComplete,
|
||||
}))
|
||||
|
||||
return (
|
||||
<div className="roof-module-tab2-overflow">
|
||||
<div className="module-table-box mb10">
|
||||
<div className="module-box-tab">
|
||||
{roofs &&
|
||||
roofs.map((roof, index) => (
|
||||
<button
|
||||
key={index}
|
||||
className={`module-btn ${selectedRoof?.index === index ? 'act' : ''}`}
|
||||
onClick={() => (roof ? handleChangeRoofMaterial(index) : null)}
|
||||
>
|
||||
{roof !== undefined ? `${roof.nameJp} (${currentAngleType === 'slope' ? roof.pitch : roof.angle}${pitchText})` : '-'}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="module-table-inner">
|
||||
<div className="module-table-flex-wrap tab2">
|
||||
<div className="module-flex-item">
|
||||
<div className="eaves-keraba-table">
|
||||
{selectedRoof && selectedRoof.lenAuth === 'C' && (
|
||||
<>
|
||||
<div className="eaves-keraba-item">
|
||||
<div className="eaves-keraba-th">L</div>
|
||||
<div className="eaves-keraba-td">
|
||||
<div className="grid-select">
|
||||
<input
|
||||
type="text"
|
||||
className="input-origin block"
|
||||
value={trestleState?.lengthBase}
|
||||
onChange={(e) => setLengthBase(e.target.value)}
|
||||
disabled={selectedRoof.lenAuth === 'R'}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
{selectedRoof && ['C', 'R'].includes(selectedRoof.raftAuth) && (
|
||||
<>
|
||||
<div className="eaves-keraba-item">
|
||||
<div className="eaves-keraba-th">{getMessage('modal.module.basic.setting.module.rafter.margin')}</div>
|
||||
<div className="eaves-keraba-td">
|
||||
<div className="grid-select">
|
||||
{raftBaseList.length > 0 && (
|
||||
<QSelectBox
|
||||
options={raftBaseList}
|
||||
value={selectedRaftBase}
|
||||
sourceKey={'clCode'}
|
||||
targetKey={'clCode'}
|
||||
showKey={'clCodeNm'}
|
||||
disabled={selectedRoof.raftAuth === 'R'}
|
||||
onChange={(e) => onChangeRaftBase(e)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
{selectedRoof && ['C', 'R'].includes(selectedRoof.roofPchAuth) && (
|
||||
<>
|
||||
<div className="eaves-keraba-item">
|
||||
<div className="eaves-keraba-th">{getMessage('modal.module.basic.setting.module.hajebichi')}</div>
|
||||
<div className="eaves-keraba-td">
|
||||
<div className="grid-select">
|
||||
<input
|
||||
type="text"
|
||||
className="input-origin block"
|
||||
disabled={selectedRoof.roofPchAuth === 'R'}
|
||||
onChange={(e) => handleHajebichiAndLength(e, 'hajebichi')}
|
||||
value={hajebichi}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
<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">
|
||||
{trestleList && (
|
||||
<QSelectBox
|
||||
title={getMessage('selectbox.title')}
|
||||
options={trestleList}
|
||||
value={selectedTrestle}
|
||||
sourceKey={'trestleMkrCd'}
|
||||
targetKey={'trestleMkrCd'}
|
||||
showKey={'trestleMkrCdJp'}
|
||||
onChange={(e) => onChangeTrestleMaker(e)}
|
||||
/>
|
||||
)}
|
||||
</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">
|
||||
{constMthdList && (
|
||||
<QSelectBox
|
||||
title={getMessage('selectbox.title')}
|
||||
options={constMthdList}
|
||||
value={selectedConstMthd}
|
||||
sourceKey={'constMthdCd'}
|
||||
targetKey={'constMthdCd'}
|
||||
showKey={'constMthdCdJp'}
|
||||
onChange={(e) => onChangeConstMthd(e)}
|
||||
/>
|
||||
)}
|
||||
</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">
|
||||
{roofBaseList && (
|
||||
<QSelectBox
|
||||
title={getMessage('selectbox.title')}
|
||||
options={roofBaseList}
|
||||
sourceKey={'roofBaseCd'}
|
||||
targetKey={'roofBaseCd'}
|
||||
showKey={'roofBaseCdJp'}
|
||||
value={selectedRoofBase}
|
||||
onChange={(e) => onChangeRoofBase(e)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="module-flex-item non-flex">
|
||||
<div className="flex-item-btn-wrap">
|
||||
<button className={`btn-frame roof ${getConstructionState(0)}`} onClick={() => handleConstruction(0)}>
|
||||
{getMessage('modal.module.basic.setting.module.standard.construction')}(I)
|
||||
</button>
|
||||
<button className={`btn-frame roof ${getConstructionState(3)}`} onClick={() => handleConstruction(3)}>
|
||||
{getMessage('modal.module.basic.setting.module.multiple.construction')}
|
||||
</button>
|
||||
<button className={`btn-frame roof ${getConstructionState(1)}`} onClick={() => handleConstruction(1)}>
|
||||
{getMessage('modal.module.basic.setting.module.standard.construction')}
|
||||
</button>
|
||||
<button className={`btn-frame roof ${getConstructionState(4)}`} onClick={() => handleConstruction(4)}>
|
||||
{getMessage('modal.module.basic.setting.module.multiple.construction')}(II)
|
||||
</button>
|
||||
<button className={`btn-frame roof ${getConstructionState(2)}`} onClick={() => handleConstruction(2)}>
|
||||
{getMessage('modal.module.basic.setting.module.enforce.construction')}
|
||||
</button>
|
||||
</div>
|
||||
<div className="grid-check-form-flex">
|
||||
<div className="d-check-box pop">
|
||||
<input
|
||||
type="checkbox"
|
||||
id={`ch01`}
|
||||
disabled={!cvrYn || cvrYn === 'N'}
|
||||
checked={cvrChecked || false}
|
||||
// onChange={() => dispatch({ type: 'SET_TRESTLE_DETAIL', roof: { ...trestleState, cvrChecked: !trestleState.cvrChecked } })}
|
||||
onChange={() => setCvrChecked(!cvrChecked)}
|
||||
/>
|
||||
<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`}
|
||||
disabled={!trestleState?.snowGdPossYn || trestleState?.snowGdPossYn === 'N'}
|
||||
checked={snowGdChecked || false}
|
||||
// onChange={() => dispatch({ type: 'SET_TRESTLE_DETAIL', roof: { ...trestleState, snowGdChecked: !trestleState.snowGdChecked } })}
|
||||
onChange={() => setSnowGdChecked(!snowGdChecked)}
|
||||
/>
|
||||
<label htmlFor={`ch02`}>{getMessage('modal.module.basic.setting.module.blind.metal.fitting')}</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="module-area mt10">
|
||||
<div className="module-area-title">{getMessage('modal.module.basic.setting.module.placement.area')}</div>
|
||||
<div className="outline-form mr15">
|
||||
<span>{getMessage('modal.module.basic.setting.module.placement.area.eaves')}</span>
|
||||
<div className="input-grid mr10">
|
||||
<input
|
||||
type="text"
|
||||
className="input-origin block"
|
||||
value={eavesMargin ?? 0}
|
||||
// onChange={(e) => dispatch({ type: 'SET_TRESTLE_DETAIL', roof: { ...trestleState, eavesMargin: e.target.value } })}
|
||||
onChange={(e) => setEavesMargin(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<span className="thin">mm</span>
|
||||
</div>
|
||||
<div className="outline-form mr15">
|
||||
<span>{getMessage('modal.module.basic.setting.module.placement.area.ridge')}</span>
|
||||
<div className="input-grid mr10">
|
||||
<input
|
||||
type="text"
|
||||
className="input-origin block"
|
||||
value={ridgeMargin ?? 0}
|
||||
// onChange={(e) => dispatch({ type: 'SET_TRESTLE_DETAIL', roof: { ...trestleState, ridgeMargin: e.target.value } })}
|
||||
onChange={(e) => setRidgeMargin(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<span className="thin">mm</span>
|
||||
</div>
|
||||
<div className="outline-form ">
|
||||
<span>{getMessage('modal.module.basic.setting.module.placement.area.keraba')}</span>
|
||||
<div className="input-grid mr10">
|
||||
<input
|
||||
type="text"
|
||||
className="input-origin block"
|
||||
value={kerabaMargin ?? 0}
|
||||
// onChange={(e) => dispatch({ type: 'SET_TRESTLE_DETAIL', roof: { ...trestleState, kerabaMargin: e.target.value } })}
|
||||
onChange={(e) => setKerabaMargin(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<span className="thin">mm</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="module-bottom">
|
||||
<div className="module-table-box ">
|
||||
<div className="warning-guide">
|
||||
<div className="warning">
|
||||
{getMessage('modal.module.basic.setting.module.setting.info1')}
|
||||
<br />
|
||||
{getMessage('modal.module.basic.setting.module.setting.info2')}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
|
||||
export default Trestle
|
||||
@ -19,7 +19,6 @@ import { getChonByDegree, getDegreeByChon } from '@/util/canvas-util'
|
||||
import { usePolygon } from '@/hooks/usePolygon'
|
||||
import { canvasState } from '@/store/canvasAtom'
|
||||
import { useRoofFn } from '@/hooks/common/useRoofFn'
|
||||
import { usePlan } from '@/hooks/usePlan'
|
||||
|
||||
/**
|
||||
* 지붕 레이아웃
|
||||
@ -46,7 +45,6 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, pla
|
||||
const { setSurfaceShapePattern } = useRoofFn()
|
||||
const canvas = useRecoilValue(canvasState)
|
||||
const roofDisplay = useRecoilValue(roofDisplaySelector)
|
||||
const { saveCanvas } = usePlan()
|
||||
|
||||
const roofRef = {
|
||||
roofCd: useRef(null),
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
'use client'
|
||||
|
||||
import { useRecoilState, useRecoilValue } from 'recoil'
|
||||
import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
|
||||
import useSWRMutation from 'swr/mutation'
|
||||
import { useAxios } from '../useAxios'
|
||||
import { unescapeString } from '@/util/common-utils'
|
||||
@ -10,6 +10,8 @@ import { canvasState, currentCanvasPlanState } from '@/store/canvasAtom'
|
||||
import { POLYGON_TYPE } from '@/common/common'
|
||||
import { useCircuitTrestle } from '../useCirCuitTrestle'
|
||||
import { useEffect } from 'react'
|
||||
import { addedRoofsState } from '@/store/settingAtom'
|
||||
import { roofsState } from '@/store/roofAtom'
|
||||
|
||||
/**
|
||||
* 캔버스 팝업 상태 관리
|
||||
@ -19,13 +21,14 @@ import { useEffect } from 'react'
|
||||
export function useCanvasPopupStatusController(param = 1) {
|
||||
const popupType = parseInt(param)
|
||||
|
||||
const [compasDeg, setCompasDeg] = useRecoilState(compasDegAtom)
|
||||
const [moduleSelectionDataStore, setModuleSelectionDataStore] = useRecoilState(moduleSelectionDataState)
|
||||
const [selectedModules, setSelectedModules] = useRecoilState(selectedModuleState)
|
||||
const setCompasDeg = useSetRecoilState(compasDegAtom)
|
||||
const setModuleSelectionDataStore = useSetRecoilState(moduleSelectionDataState)
|
||||
const setSelectedModules = useSetRecoilState(selectedModuleState)
|
||||
const { get, promiseGet, getFetcher, postFetcher } = useAxios()
|
||||
const canvas = useRecoilValue(canvasState)
|
||||
const currentCanvasPlan = useRecoilValue(currentCanvasPlanState)
|
||||
|
||||
const [addedRoofs, setAddedRoofs] = useRecoilState(addedRoofsState)
|
||||
const [roofs, setRoofs] = useRecoilState(roofsState)
|
||||
/**
|
||||
* 팝업 상태 조회
|
||||
* @param {number} popupTypeParam
|
||||
@ -53,19 +56,27 @@ export function useCanvasPopupStatusController(param = 1) {
|
||||
const handleModuleSelectionTotal = async () => {
|
||||
for (let i = 1; i < 3; i++) {
|
||||
const result = await getModuleSelection(i)
|
||||
console.log('🚀 ~ handleModuleSelectionTotal ~ result:', result)
|
||||
if (!result.objectNo) return
|
||||
if (i === 1) {
|
||||
setCompasDeg(result.popupStatus)
|
||||
if (result.popupStatus && unescapeString(result.popupStatus)) {
|
||||
const data = JSON.parse(unescapeString(result.popupStatus))
|
||||
|
||||
if (data?.compasDeg) setCompasDeg(data.compasDeg)
|
||||
if (data?.module) setSelectedModules(data.module)
|
||||
setModuleSelectionDataStore(data)
|
||||
}
|
||||
} else if (i === 2) {
|
||||
const data = JSON.parse(unescapeString(result.popupStatus))
|
||||
setModuleSelectionDataStore(data)
|
||||
const roofSurfaceList = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE)
|
||||
const modules = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE)
|
||||
roofSurfaceList.forEach((surface) => {
|
||||
surface.modules = modules.filter((module) => module.surfaceId === surface.id)
|
||||
})
|
||||
if (data.module) setSelectedModules(data.module)
|
||||
if (data.roofConstruction) {
|
||||
setRoofs(data.roofConstruction)
|
||||
// setManagementState({ ...managementState, roofs: data.roofConstruction.map((roof) => roof.construction.managementState) })
|
||||
}
|
||||
// if (data?.module) setManagementState(data.common.managementState)
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -80,7 +91,8 @@ export function useCanvasPopupStatusController(param = 1) {
|
||||
objectNo: currentCanvasPlan.objectNo,
|
||||
planNo: parseInt(currentCanvasPlan.planNo),
|
||||
popupType: popupType.toString(),
|
||||
popupStatus: popupType === 1 ? arg : JSON.stringify(arg).replace(/"/g, '\"'),
|
||||
// popupStatus: popupType === 1 ? arg : JSON.stringify(arg).replace(/"/g, '\"'),
|
||||
popupStatus: JSON.stringify(arg).replace(/"/g, '\"'),
|
||||
}
|
||||
postFetcher(`/api/v1/canvas-popup-status`, params)
|
||||
},
|
||||
|
||||
@ -991,14 +991,14 @@ export function useModule() {
|
||||
const getRowModules = (target) => {
|
||||
return canvas
|
||||
.getObjects()
|
||||
.filter((obj) => target.surfaceId === obj.surfaceId && obj.name === POLYGON_TYPE.MODULE && obj.top === target.top)
|
||||
.filter((obj) => target.surfaceId === obj.surfaceId && obj.name === POLYGON_TYPE.MODULE && Math.abs(obj.top - target.top) < 1)
|
||||
.sort((a, b) => a.left - b.left)
|
||||
}
|
||||
|
||||
const getColumnModules = (target) => {
|
||||
return canvas
|
||||
.getObjects()
|
||||
.filter((obj) => target.surfaceId === obj.surfaceId && obj.name === POLYGON_TYPE.MODULE && obj.left === target.left)
|
||||
.filter((obj) => target.surfaceId === obj.surfaceId && obj.name === POLYGON_TYPE.MODULE && Math.abs(obj.left - target.left) < 1)
|
||||
.sort((a, b) => a.top - b.top)
|
||||
}
|
||||
|
||||
|
||||
@ -19,9 +19,9 @@ export function useModuleSelection(props) {
|
||||
const [moduleList, setModuleList] = useState([{}]) //모듈 목록
|
||||
|
||||
const [selectedSurfaceType, setSelectedSurfaceType] = useState({}) //선택된 면조도
|
||||
const [installHeight, setInstallHeight] = useState() //설치 높이
|
||||
const [standardWindSpeed, setStandardWindSpeed] = useState({}) //기준풍속
|
||||
const [verticalSnowCover, setVerticalSnowCover] = useState() //수직적설량
|
||||
const [installHeight, setInstallHeight] = useState(managementState?.installHeight) //설치 높이
|
||||
const [standardWindSpeed, setStandardWindSpeed] = useState() //기준풍속
|
||||
const [verticalSnowCover, setVerticalSnowCover] = useState(managementState?.verticalSnowCover) //수직적설량
|
||||
|
||||
const [selectedModules, setSelectedModules] = useRecoilState(selectedModuleState) //선택된 모듈
|
||||
const [moduleSelectionInitParams, setModuleSelectionInitParams] = useRecoilState(moduleSelectionInitParamsState) //모듈 기본 데이터 ex) 면조도, 높이등등
|
||||
@ -32,6 +32,7 @@ export function useModuleSelection(props) {
|
||||
const { restoreModuleInstArea } = useModuleBasicSetting()
|
||||
|
||||
const bindInitData = () => {
|
||||
console.log('bindInitData', managementState)
|
||||
setInstallHeight(managementState?.installHeight)
|
||||
setStandardWindSpeed(managementState?.standardWindSpeedId)
|
||||
setVerticalSnowCover(managementState?.verticalSnowCover)
|
||||
@ -184,14 +185,6 @@ export function useModuleSelection(props) {
|
||||
})
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
// console.log('installHeight', installHeight)
|
||||
}, [installHeight])
|
||||
|
||||
useEffect(() => {
|
||||
// console.log('verticalSnowCover', verticalSnowCover)
|
||||
}, [verticalSnowCover])
|
||||
|
||||
//TODO: 설치높이, 기준적설량 debounce 적용해서 추가해야됨
|
||||
|
||||
// useEffect(() => {
|
||||
@ -226,11 +219,17 @@ export function useModuleSelection(props) {
|
||||
roughnessCodes,
|
||||
windSpeedCodes,
|
||||
managementState,
|
||||
setManagementState,
|
||||
moduleList,
|
||||
setSelectedModules,
|
||||
selectedSurfaceType,
|
||||
setSelectedSurfaceType,
|
||||
installHeight,
|
||||
setInstallHeight,
|
||||
standardWindSpeed,
|
||||
setStandardWindSpeed,
|
||||
verticalSnowCover,
|
||||
setVerticalSnowCover,
|
||||
handleChangeModule,
|
||||
handleChangeSurfaceType,
|
||||
handleChangeWindSpeed,
|
||||
|
||||
@ -18,6 +18,7 @@
|
||||
"plan.menu.placement.surface.initial.setting": "配置面初期設定",
|
||||
"modal.placement.initial.setting.plan.drawing": "図面の作成方法",
|
||||
"modal.placement.initial.setting.plan.drawing.size.stuff": "寸法入力による物件作成",
|
||||
"modal.placement.initial.setting.plan.drawing.size.info": "※数字は[半角]入力のみ可能です。",
|
||||
"modal.placement.initial.setting.size": "寸法入力方法",
|
||||
"modal.placement.initial.setting.size.info": "寸法入力方法案内",
|
||||
"modal.placement.initial.setting.size.roof": "伏図入力",
|
||||
@ -88,13 +89,17 @@
|
||||
"plan.menu.module.circuit.setting.default": "モジュール/架台設定",
|
||||
"modal.module.basic.setting.orientation.setting": "方位設定",
|
||||
"modal.module.basic.setting.orientation.setting.info": "※シミュレーション計算用方位を指定します。南の方位を設定してください。",
|
||||
"modal.module.basic.setting.orientation.setting.angle.passivity": "勾配を直接入力",
|
||||
"modal.module.basic.setting.orientation.setting.angle.passivity": "角度変更",
|
||||
"modal.module.basic.setting.module.roof.material": "屋根材",
|
||||
"modal.module.basic.setting.module.trestle.maker": "架台メーカー",
|
||||
"modal.module.basic.setting.module.rafter.margin": "垂木の間隔",
|
||||
"modal.module.basic.setting.module.construction.method": "工法",
|
||||
"modal.module.basic.setting.module.under.roof": "屋根の下",
|
||||
"modal.module.basic.setting.module.setting": "モジュールの選択",
|
||||
"modal.module.basic.setting.module.placement.area": "モジュール配置領域",
|
||||
"modal.module.basic.setting.module.placement.area.eaves": "軒側",
|
||||
"modal.module.basic.setting.module.placement.area.ridge": "棟側",
|
||||
"modal.module.basic.setting.module.placement.area.keraba": "けらぱ",
|
||||
"modal.module.basic.setting.module.hajebichi": "ハゼピッチ",
|
||||
"modal.module.basic.setting.module.setting.info1": "※勾配の範囲には制限があります。屋根傾斜が2.5値未満10値を超える場合は、施工が可能かどうか施工マニュアルを確認してください。",
|
||||
"modal.module.basic.setting.module.setting.info2": "※モジュール配置時は、施工マニュアルに記載されている＜モジュール配置条件＞を必ずご確認ください。",
|
||||
@ -112,12 +117,16 @@
|
||||
"modal.module.basic.setting.module.placement": "モジュールの配置",
|
||||
"modal.module.basic.setting.module.placement.select.fitting.type": "設置形態を選択してください。",
|
||||
"modal.module.basic.setting.module.placement.waterfowl.arrangement": "千鳥配置",
|
||||
"modal.module.basic.setting.module.placement.max.row.amount": "Max単数",
|
||||
"modal.module.basic.setting.module.placement.mix.max.row.amount": "混合Max単数",
|
||||
"modal.module.basic.setting.module.placement.row.amount": "単数",
|
||||
"modal.module.basic.setting.module.placement.column.amount": "熱水",
|
||||
"modal.module.basic.setting.module.placement.do": "する",
|
||||
"modal.module.basic.setting.module.placement.do.not": "しない",
|
||||
"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.eaves": "軒",
|
||||
"modal.module.basic.setting.module.placement.arrangement.standard.ridge": "棟",
|
||||
"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": "南向き設置",
|
||||
@ -128,9 +137,10 @@
|
||||
"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.prev": "移転",
|
||||
"modal.module.basic.setting.row.batch": "単数指定配置",
|
||||
"modal.module.basic.setting.passivity.placement": "手動配置",
|
||||
"modal.module.basic.setting.auto.placement": "設定値に自動配置",
|
||||
"modal.module.basic.setting.auto.placement": "自動配置",
|
||||
"plan.menu.module.circuit.setting.circuit.trestle.setting": "回路設定",
|
||||
"modal.circuit.trestle.setting": "回路設定",
|
||||
"modal.circuit.trestle.setting.alloc.trestle": "架台配置",
|
||||
@ -594,7 +604,6 @@
|
||||
"myinfo.message.password.error": "パスワードが間違っています。",
|
||||
"login": "ログイン",
|
||||
"login.auto.page.text": "自動ログイン中です。",
|
||||
"login.fail": "アカウントが存在しないか、パスワードが間違っています。",
|
||||
"login.id.save": "ID保存",
|
||||
"login.id.placeholder": "IDを入力してください。",
|
||||
"login.password.placeholder": "パスワードを入力してください。",
|
||||
|
||||
@ -18,6 +18,7 @@
|
||||
"plan.menu.placement.surface.initial.setting": "배치면 초기설정",
|
||||
"modal.placement.initial.setting.plan.drawing": "도면 작성방법",
|
||||
"modal.placement.initial.setting.plan.drawing.size.stuff": "치수 입력에 의한 물건 작성",
|
||||
"modal.placement.initial.setting.plan.drawing.size.info": "※숫자는 [반각] 입력만 가능합니다.",
|
||||
"modal.placement.initial.setting.size": "치수 입력방법",
|
||||
"modal.placement.initial.setting.size.info": "치수 입력방법 안내",
|
||||
"modal.placement.initial.setting.size.roof": "복시도 입력",
|
||||
@ -88,13 +89,17 @@
|
||||
"plan.menu.module.circuit.setting.default": "모듈/가대설정",
|
||||
"modal.module.basic.setting.orientation.setting": "방위 설정",
|
||||
"modal.module.basic.setting.orientation.setting.info": "※시뮬레이션 계산용 방위를 지정합니다. 남쪽의 방위를 설정해주세요.",
|
||||
"modal.module.basic.setting.orientation.setting.angle.passivity": "각도를 직접 입력",
|
||||
"modal.module.basic.setting.orientation.setting.angle.passivity": "각도 입력",
|
||||
"modal.module.basic.setting.module.roof.material": "지붕재",
|
||||
"modal.module.basic.setting.module.trestle.maker": "가대메이커",
|
||||
"modal.module.basic.setting.module.rafter.margin": "서까래 간격",
|
||||
"modal.module.basic.setting.module.construction.method": "공법",
|
||||
"modal.module.basic.setting.module.under.roof": "지붕밑바탕",
|
||||
"modal.module.basic.setting.module.setting": "모듈 선택",
|
||||
"modal.module.basic.setting.module.placement.area": "모듈 배치 영역",
|
||||
"modal.module.basic.setting.module.placement.area.eaves": "처마쪽",
|
||||
"modal.module.basic.setting.module.placement.area.ridge": "용마루쪽",
|
||||
"modal.module.basic.setting.module.placement.area.keraba": "케라바쪽",
|
||||
"modal.module.basic.setting.module.hajebichi": "망둥어 피치",
|
||||
"modal.module.basic.setting.module.setting.info1": "※ 구배의 범위에는 제한이 있습니다. 지붕경사가 2.5치 미만 10치를 초과하는 경우에는 시공이 가능한지 시공 매뉴얼을 확인해주십시오.",
|
||||
"modal.module.basic.setting.module.setting.info2": "※ 모듈 배치 시에는 시공 매뉴얼에 기재된 <모듈 배치 조건>을 반드시 확인해주십시오.",
|
||||
@ -112,12 +117,16 @@
|
||||
"modal.module.basic.setting.module.placement": "모듈 배치",
|
||||
"modal.module.basic.setting.module.placement.select.fitting.type": "설치형태를 선택합니다.",
|
||||
"modal.module.basic.setting.module.placement.waterfowl.arrangement": "물떼새 배치",
|
||||
"modal.module.basic.setting.module.placement.max.row.amount": "Max 단수",
|
||||
"modal.module.basic.setting.module.placement.mix.max.row.amount": "혼합Max 단수",
|
||||
"modal.module.basic.setting.module.placement.row.amount": "단수",
|
||||
"modal.module.basic.setting.module.placement.column.amount": "열수",
|
||||
"modal.module.basic.setting.module.placement.do": "한다",
|
||||
"modal.module.basic.setting.module.placement.do.not": "하지 않는다",
|
||||
"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.eaves": "처마",
|
||||
"modal.module.basic.setting.module.placement.arrangement.standard.ridge": "용마루",
|
||||
"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": "남향설치",
|
||||
@ -129,6 +138,7 @@
|
||||
"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.row.batch": "단수지정 배치",
|
||||
"modal.module.basic.setting.passivity.placement": "수동 배치",
|
||||
"modal.module.basic.setting.auto.placement": "설정값으로 자동 배치",
|
||||
"plan.menu.module.circuit.setting.circuit.trestle.setting": "회로설정",
|
||||
|
||||
@ -340,6 +340,14 @@
|
||||
&.active{
|
||||
top: calc(92.8px + 50px);
|
||||
}
|
||||
.canvas-id{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 9.6px 20px;
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
background-color: #1083E3;
|
||||
}
|
||||
.canvas-plane-wrap{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@ -279,10 +279,11 @@ $alert-color: #101010;
|
||||
border-bottom: 1px solid #424242;
|
||||
}
|
||||
}
|
||||
.grid-check-form-block{
|
||||
display: block;
|
||||
> div{
|
||||
margin-bottom: 10px;
|
||||
.grid-check-form-flex{
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
.d-check-box{
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
.grid-option-overflow{
|
||||
@ -1313,13 +1314,13 @@ $alert-color: #101010;
|
||||
|
||||
.circle {
|
||||
position: absolute;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border: 1px solid #fff;
|
||||
border-radius: 50%;
|
||||
top: 95%;
|
||||
top: 88%;
|
||||
left: 50%;
|
||||
transform-origin: 0 -90px; /* 중심에서 반지름 거리만큼 떨어져 위치 */
|
||||
transform-origin: 0 -76px; /* 중심에서 반지름 거리만큼 떨어져 위치 */
|
||||
cursor:pointer;
|
||||
z-index: 3;
|
||||
/* 0번을 180도 위치(아래)에, 13번을 0도 위치(위)에 배치 */
|
||||
@ -1366,8 +1367,8 @@ $alert-color: #101010;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
background-color: #fff;
|
||||
border-radius: 50%;
|
||||
}
|
||||
@ -1381,15 +1382,15 @@ $alert-color: #101010;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 148px;
|
||||
height: 148px;
|
||||
width: 121px;
|
||||
height: 121px;
|
||||
border: 4px solid #fff;
|
||||
border-radius: 50%;
|
||||
.compas-arr{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: url(../../public/static/images/canvas/compas.svg)no-repeat center;
|
||||
background-size: 122px 122px;
|
||||
background-size: 100px 100px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1441,10 +1442,10 @@ $alert-color: #101010;
|
||||
.roof-module-compas{
|
||||
margin-bottom: 24px;
|
||||
.compas-box-inner{
|
||||
width: 280px;
|
||||
height: 253px;
|
||||
width: 235px;
|
||||
height: 215px;
|
||||
.circle{
|
||||
top: 86%;
|
||||
top: 85%;
|
||||
// &:nth-child(1),
|
||||
// &:nth-child(7),
|
||||
// &:nth-child(13),
|
||||
@ -1461,7 +1462,7 @@ $alert-color: #101010;
|
||||
// }
|
||||
// }
|
||||
i{
|
||||
top: 22px;
|
||||
top: 19px;
|
||||
}
|
||||
&.act{
|
||||
i{color: #8B8B8B;}
|
||||
@ -1482,6 +1483,10 @@ $alert-color: #101010;
|
||||
.outline-form{
|
||||
flex: 1;
|
||||
}
|
||||
.non-flex{
|
||||
min-width: 300px;
|
||||
flex: none;
|
||||
}
|
||||
}
|
||||
|
||||
.module-box-tab{
|
||||
@ -2172,31 +2177,46 @@ $alert-color: #101010;
|
||||
&.tab2{
|
||||
margin-top: 10px;
|
||||
gap: 15px;
|
||||
|
||||
.eaves-keraba-table{
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
.module-flex-item{
|
||||
flex: 1;
|
||||
.module-flex-item-tit{
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid #4D4D4D;
|
||||
}
|
||||
|
||||
.flex-item-btn-wrap{
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 8px;
|
||||
margin-bottom: 24px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
&.non-flex{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
flex: none;
|
||||
padding-top: 27.5px;
|
||||
width: 260px;
|
||||
width: 340px;
|
||||
}
|
||||
.flex-item-button{
|
||||
margin-top: 10px;
|
||||
button{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.module-flex-item-tit-wrap{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid #4D4D4D;
|
||||
.module-flex-item-tit{
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
}
|
||||
button{
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@ -2277,4 +2297,129 @@ $alert-color: #101010;
|
||||
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5), -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.roof-module-inner{
|
||||
display: flex;
|
||||
.compas-wrapper{
|
||||
position: relative;
|
||||
flex: none;
|
||||
width: 300px;
|
||||
padding-right: 15px;
|
||||
&:before{
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 10px;
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
background-color: #424242;
|
||||
}
|
||||
}
|
||||
.compas-table-wrap{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
|
||||
|
||||
}
|
||||
.compas-table-box{
|
||||
background-color: #3D3D3D;
|
||||
padding: 10px;
|
||||
.outline-form{
|
||||
span{
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
.compas-grid-table{
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
.outline-form{
|
||||
span{
|
||||
width: 65px;
|
||||
&.thin{
|
||||
width: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.module-table-block-wrap{
|
||||
.roof-module-table{
|
||||
&.self{
|
||||
table{
|
||||
table-layout: fixed;
|
||||
}
|
||||
}
|
||||
}
|
||||
.self-table-radio{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.module-area{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.module-area-title{
|
||||
flex: none;
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
margin-right: 20px;
|
||||
}
|
||||
.outline-form{
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.placement-name-guide{
|
||||
font-size: 11px;
|
||||
margin-left: 10px;
|
||||
color: #53a7eb;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.hexagonal-flex-wrap{
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
.non-flex{
|
||||
flex: none;
|
||||
}
|
||||
}
|
||||
|
||||
.hexagonal-radio-wrap{
|
||||
padding: 17px 10px;
|
||||
}
|
||||
|
||||
.hide-check-guide{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
margin-top: 10px;
|
||||
font-weight: 500;
|
||||
.arr{
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
margin-left: 10px;
|
||||
background: url(../../public/static/images/canvas/hide-check-arr.svg) no-repeat center;
|
||||
background-size: contain;
|
||||
transform: rotate(180deg);
|
||||
&.act{
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.module-table-box{
|
||||
&.hide{
|
||||
overflow: hidden;
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
@ -222,15 +222,16 @@ button{
|
||||
padding: 0 10px;
|
||||
line-height: 28px;
|
||||
font-family: 'Noto Sans JP', sans-serif;
|
||||
background-color: transparent;
|
||||
background-color: #353535;
|
||||
border: 1px solid #484848;
|
||||
color: #fff;
|
||||
&.blue{
|
||||
background-color: #4C6FBF;
|
||||
border: 1px solid #4C6FBF;
|
||||
&:hover{
|
||||
background-color: #414E6C;
|
||||
border: 1px solid #414E6C;
|
||||
background-color: #4C6FBF;
|
||||
border: 1px solid #4C6FBF;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
&.white{
|
||||
@ -241,13 +242,14 @@ button{
|
||||
background-color: #fff;
|
||||
border: 1px solid #fff;
|
||||
color: #101010;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
&:hover{
|
||||
font-weight: 400;
|
||||
background-color: transparent;
|
||||
background-color: #353535;
|
||||
border: 1px solid #484848;
|
||||
color: #fff;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
&.self{
|
||||
|
||||
@ -236,6 +236,16 @@ table{
|
||||
.d-check-box{
|
||||
opacity: 0.5;
|
||||
}
|
||||
.color-wrap{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.color-box{
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
tbody{
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user