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

Merge remote-tracking branch 'origin/qcast-pub' into dev

Browse Source 
# Conflicts:
#	src/store/settingAtom.js
This commit is contained in:
minsik 2024-09-25 17:13:56 +09:00
commit bf40d6f8f0
11 changed files with 221 additions and 135 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/common/common.js
View File

@ -1,4 +1,5 @@
export const MENU = {
PLAN_DRAWING: 'planDrawing',
INITIAL_CANVAS_SETTING: 'initialCanvasSetting', // 배치면 초기설정
ROOF_COVERING: {
EXTERIOR_WALL_LINE: 'exteriorWallLine', // 외벽선 그리기

126
src/components/floor-plan/CanvasMenu.jsx
View File

@ -18,13 +18,13 @@ import JA from '@/locales/ja.json'
import { settingModalFirstOptionsState } from '@/store/settingAtom'
const canvasMenus = [
{ index: 0, name: 'plan.menu.plan.drawing', icon: 'con00' },
{ index: 1, name: 'plan.menu.placement.surface.initial.setting', icon: 'con01' },
{ index: 2, name: 'plan.menu.roof.cover', icon: 'con02' },
{ index: 3, name: 'plan.menu.placement.surface', icon: 'con03' },
{ index: 4, name: 'plan.menu.module.circuit.setting', icon: 'con04' },
{ index: 5, name: 'plan.menu.estimate', icon: 'con06' },
{ index: 6, name: 'plan.menu.simulation', icon: 'con05' },
{ index: 0, name: 'plan.menu.plan.drawing', icon: 'con00', title: MENU.PLAN_DRAWING },
{ index: 1, name: 'plan.menu.placement.surface.initial.setting', icon: 'con01', title: MENU.INITIAL_CANVAS_SETTING },
{ index: 2, name: 'plan.menu.roof.cover', icon: 'con02', title: MENU.ROOF_COVERING.DEFAULT },
{ index: 3, name: 'plan.menu.placement.surface', icon: 'con03', title: MENU.BATCH_CANVAS.DEFAULT },
{ index: 4, name: 'plan.menu.module.circuit.setting', icon: 'con04', title: MENU.MODULE_CIRCUIT_SETTING.DEFAULT },
{ index: 5, name: 'plan.menu.estimate', icon: 'con06', title: MENU.ESTIMATE.DEFAULT },
{ index: 6, name: 'plan.menu.simulation', icon: 'con05', title: MENU.POWER_GENERATION_SIMULATION.DEFAULT },
]
export default function CanvasMenu(props) {
@ -45,11 +45,21 @@ export default function CanvasMenu(props) {
const { getMessage } = useMessage()
const SelectOption = [{ name: '瓦53A' }, { name: '瓦53A' }]
const onClickNav = (number) => {
setMenuNumber(number)
if (number === 2) setType('outline')
if (number === 3) setType('surface')
if (number === 4) setType('module')
const onClickNav = (menu) => {
setMenuNumber(menu.index)
setCurrentMenu(menu.title)
switch (menu.index) {
case 2:
setType('outline')
break
case 3:
setType('surface')
break
case 4:
setType('module')
break
}
}
const menuProps = {
setShowOutlineModal,
@ -89,88 +99,16 @@ export default function CanvasMenu(props) {
<div className={`canvas-menu-wrap ${menuNumber === 2 || menuNumber === 3 || menuNumber === 4 ? 'active' : ''}`}>
<div className="canvas-menu-inner">
<ul className="canvas-menu-list">
<li className={`canvas-menu-item ${menuNumber === 0 ? 'active' : ''}`} onClick={() => onClickNav(0)}>
<button>
<span className="menu-icon con00"></span>
{getMessage('plan.menu.plan.drawing')}
</button>
</li>
<li className={`canvas-menu-item ${menuNumber === 1 ? 'active' : ''}`} onClick={() => onClickNav(1)}>
<button>
<span className="menu-icon con01"></span>
{getMessage('plan.menu.placement.surface.initial.setting')}
</button>
</li>
<li
className={`canvas-menu-item ${menuNumber === 2 ? 'active' : ''}`}
onClick={() => {
onClickNav(2)
setCurrentMenu(MENU.ROOF_COVERING.DEFAULT)
}}
>
<button>
<span className="menu-icon con02"></span>
{getMessage('plan.menu.roof.cover')}
</button>
</li>
<li
className={`canvas-menu-item ${menuNumber === 3 ? 'active' : ''}`}
onClick={() => {
onClickNav(3)
setCurrentMenu(MENU.BATCH_CANVAS.DEFAULT)
}}
>
<button>
<span className="menu-icon con03"></span>
{getMessage('plan.menu.placement.surface')}
</button>
</li>
<li
className={`canvas-menu-item ${menuNumber === 4 ? 'active' : ''}`}
onClick={() => {
onClickNav(4)
setCurrentMenu(MENU.MODULE_CIRCUIT_SETTING.DEFAULT)
}}
>
<button>
<span className="menu-icon con04"></span>
{getMessage('plan.menu.module.circuit.setting')}
</button>
</li>
<li
className={`canvas-menu-item ${menuNumber === 5 ? 'active' : ''}`}
onClick={() => {
onClickNav(5)
setCurrentMenu(MENU.ESTIMATE.DEFAULT)
}}
>
<button>
<span className="menu-icon con06"></span>
{getMessage('plan.menu.estimate')}
</button>
</li>
<li
className={`canvas-menu-item ${menuNumber === 6 ? 'active' : ''}`}
onClick={() => {
onClickNav(6)
setCurrentMenu(MENU.POWER_GENERATION_SIMULATION.DEFAULT)
}}
>
<button>
<span className="menu-icon con05"></span>
{getMessage('plan.menu.simulation')}
</button>
</li>
{/*{canvasMenus.map((menu) => {*/}
{/* return (*/}
{/* <li key={menu.index} className={`canvas-menu-item ${menuNumber === menu.index ? 'active' : ''}`} onClick={() => onClickNav(menu.index)}>*/}
{/* <button>*/}
{/* <span className={`menu-icon ${menu.icon}`}></span>*/}
{/* {getMessage(menu.name)}*/}
{/* </button>*/}
{/* </li>*/}
{/* )*/}
{/*})}*/}
{canvasMenus.map((menu) => {
return (
<li key={menu.index} className={`canvas-menu-item ${menuNumber === menu.index ? 'active' : ''}`} onClick={() => onClickNav(menu)}>
<button>
<span className={`menu-icon ${menu.icon}`}></span>
{getMessage(menu.name)}
</button>
</li>
)
})}
</ul>
<div className="canvas-side-btn-wrap">
{menuNumber !== 6 && menuNumber !== 5 && (

5
src/components/floor-plan/FloorPlan.jsx
View File

@ -53,11 +53,14 @@ export default function FloorPlan() {
const optionData2 = settingModalFirstOptions.option2.map((item) => ({ ...item, selected: res[item.column] }))
const optionData3 = settingModalSecondOptions.option3.map((item) => ({ ...item }))
const optionData4 = settingModalSecondOptions.option4.map((item) => ({ ...item, selected: res[item.column] }))
const optionData5 = settingModalFirstOptions.dimensionDisplay.map((item) => ({
...item,
}))
// 데이터 설정
setSettingModalFirstOptions({
option1: optionData1,
option2: optionData2,
dimensionDisplay: optionData5,
})
setSettingModalSecondOptions({
option3: optionData3,

13
src/components/floor-plan/modal/grid/DotLineGrid.jsx
View File

@ -17,18 +17,9 @@ export default function DotLineGrid(props) {
},
{ id: 4, name: '1/10' },
]
const HandleClickClose = () => {
// setClose(true)
// setTimeout(() => {
// setModalOption({ ...modalOption, gridoption: false })
// setClose(false)
// }, 180)
}
return (
<WithDraggable isShow={true} pos={{ x: 50, y: 30 }}>
<div className={`modal-pop-wrap ssm `}>
{/* <div className={`modal-pop-wrap ssm ${modalOption.gridoption ? 'mount' : ''} ${close ? 'unmount' : ''} `}> */}
<WithDraggable isShow={true} pos={{ x: -150, y: 300 }}>
<div className={`modal-pop-wrap ssm mount`}>
<div className="modal-head">
<h1 className="title">{getMessage('modal.canvas.setting.grid.dot.line.setting')}</h1>
<button className="modal-close" onClick={() => setShowDotLineGridModal(false)}>

41
src/components/floor-plan/modal/grid/GridCopy.jsx
View File

@ -1,2 +1,43 @@
import WithDraggable from '@/components/common/draggable/withDraggable'
import { useMessage } from '@/hooks/useMessage'
export default function GridCopy(props) {
const { setShowGridMoveModal, setShowGridCopyModal } = props
const { getMessage } = useMessage()
return (
<WithDraggable isShow={true} pos={{ x: 50, y: 380 }}>
<div className={`modal-pop-wrap xm mount`}>
<div className="modal-head">
<h1 className="title">{getMessage('modal.grid.copy')} </h1>
<button className="modal-close" onClick={() => setShowGridCopyModal(false)}>
닫기
</button>
</div>
<div className="modal-body">
<div className="grid-option-tit">{getMessage('modal.grid.copy.info')}</div>
<div className="grid-option-wrap">
<div className="grid-option-box">
<div className="grid-input-form">
<span className="mr10">{getMessage('modal.grid.copy.length')}</span>
<div className="input-grid mr5">
<input type="text" className="input-origin" defaultValue={910} />
</div>
<span>mm</span>
</div>
<div className="grid-direction">
<button className="direction up"></button>
<button className="direction down act"></button>
<button className="direction left"></button>
<button className="direction right"></button>
</div>
</div>
</div>
<div className="grid-btn-wrap">
<button className="btn-frame modal act">{getMessage('modal.grid.copy.save')}</button>
</div>
</div>
</div>
</WithDraggable>
)
}

53
src/components/floor-plan/modal/grid/GridMove.jsx
View File

@ -1,2 +1,55 @@
import WithDraggable from '@/components/common/draggable/withDraggable'
import { useMessage } from '@/hooks/useMessage'
export default function GridMove(props) {
const { setShowGridMoveModal, setShowGridCopyModal } = props
const { getMessage } = useMessage()
return (
<WithDraggable isShow={true} pos={{ x: 50, y: 30 }}>
<div className={`modal-pop-wrap xm mount`}>
<div className="modal-head">
<h1 className="title">{getMessage('modal.grid.move')} </h1>
<button className="modal-close" onClick={() => setShowGridMoveModal(false)}>
닫기
</button>
</div>
<div className="modal-body">
<div className="grid-option-tit">{getMessage('modal.grid.move.info')}</div>
<div className="grid-option-wrap">
<div className="d-check-box pop mb10">
<input type="checkbox" id="ch99" />
<label htmlFor="ch99">{getMessage('modal.grid.move.all')}</label>
</div>
<div className="grid-option-box">
<div className="move-form">
<p className="mb5">{getMessage('modal.grid.move.length')}</p>
<div className="input-move-wrap mb5">
<div className="input-move">
<input type="text" className="input-origin" defaultValue={910} />
</div>
<span>mm</span>
</div>
<div className="input-move-wrap">
<div className="input-move">
<input type="text" className="input-origin" defaultValue={910} />
</div>
<span>mm</span>
</div>
</div>
<div className="direction-move-wrap">
<button className="direction up"></button>
<button className="direction down act"></button>
<button className="direction left"></button>
<button className="direction right"></button>
</div>
</div>
</div>
<div className="grid-btn-wrap">
<button className="btn-frame modal act">{getMessage('modal.grid.move.save')}</button>
</div>
</div>
</div>
</WithDraggable>
)
}

55
src/components/floor-plan/modal/setting01/FirstOption.jsx
View File

@ -10,7 +10,7 @@ export default function FirstOption() {
const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요
const [settingModalFirstOptions, setSettingModalFirstOptions] = useRecoilState(settingModalFirstOptionsState)
const [settingModalSecondOptions, setSettingModalSecondOptions] = useRecoilState(settingModalSecondOptionsState)
const { option1, option2 } = settingModalFirstOptions
const { option1, option2, dimensionDisplay } = settingModalFirstOptions
const { option3, option4 } = settingModalSecondOptions
const { getMessage } = useMessage()
const { get, post } = useAxios()
@ -29,12 +29,17 @@ export default function FirstOption() {
const optionData2 = settingModalFirstOptions.option2.map((item) => ({ ...item, selected: res[item.column] }))
const optionData3 = settingModalSecondOptions.option3.map((item) => ({ ...item }))
const optionData4 = settingModalSecondOptions.option4.map((item) => ({ ...item, selected: res[item.column] }))
const optionData5 = settingModalFirstOptions.dimensionDisplay.map((item) => ({
...item,
}))
// 데이터 설정
setSettingModalFirstOptions({
option1: optionData1,
option2: optionData2,
dimensionDisplay: optionData5,
})
console.log('optionData5', optionData5)
setSettingModalSecondOptions({
option3: optionData3,
option4: optionData4,
@ -47,7 +52,7 @@ export default function FirstOption() {
const onClickOption = async (option) => {
option.selected = !option.selected
setSettingModalFirstOptions({ option1, option2 })
setSettingModalFirstOptions({ option1, option2, dimensionDisplay })
setSettingModalSecondOptions({ option3, option4 })
try {
@ -107,30 +112,48 @@ export default function FirstOption() {
}
}
const onClickDimension = (item) => {
const options = settingModalFirstOptions?.dimensionDisplay.map((option) => {
option.selected = option.id === item.id
return option
})
setSettingModalFirstOptions({ option1, option2, dimensionDisplay: options })
}
return (
<>
<div className="modal-check-btn-wrap">
<h3 className="check-wrap-title light">{getMessage('modal.canvas.setting.first.option.info')}</h3>
<div className="flex-check-box for2">
{settingModalFirstOptions &&
settingModalFirstOptions.option1.map((item) => (
<button key={item.id} className={`check-btn ${item.selected ? 'act' : ''}`} onClick={(e) => onClickOption(item)}>
<span className="check-area"></span>
<span className="title-area">{getMessage(item.name)}</span>
</button>
))}
{settingModalFirstOptions?.option1.map((item) => (
<button key={item.id} className={`check-btn ${item.selected ? 'act' : ''}`} onClick={(e) => onClickOption(item)}>
<span className="check-area"></span>
<span className="title-area">{getMessage(item.name)}</span>
</button>
))}
</div>
</div>
<div className="modal-check-btn-wrap">
<h3 className="check-wrap-title">{getMessage('modal.canvas.setting.first.option.dimension')}</h3>
<div className="flex-check-box for-line">
{settingModalFirstOptions?.dimensionDisplay?.map((item) => (
<button key={item.id} className={`check-btn ${item.selected ? 'act' : ''}`} onClick={(e) => onClickDimension(item)}>
<span className="check-area"></span>
<span className="title-area">{getMessage(item.name)}</span>
</button>
))}
</div>
</div>
<div className="modal-check-btn-wrap">
<h3 className="check-wrap-title">{getMessage('modal.canvas.setting.first.option.display')}</h3>
<div className="flex-check-box for-line">
{settingModalFirstOptions &&
settingModalFirstOptions.option2.map((item) => (
<button key={item.id} className={`check-btn ${item.selected ? 'act' : ''}`} onClick={(e) => onClickOption(item)}>
<span className="check-area"></span>
<span className="title-area">{getMessage(item.name)}</span>
</button>
))}
{settingModalFirstOptions?.option2.map((item) => (
<button key={item.id} className={`check-btn ${item.selected ? 'act' : ''}`} onClick={(e) => onClickOption(item)}>
<span className="check-area"></span>
<span className="title-area">{getMessage(item.name)}</span>
</button>
))}
</div>
</div>
</>

5
src/components/floor-plan/modal/setting01/SecondOption.jsx
View File

@ -32,11 +32,14 @@ export default function SecondOption() {
const optionData2 = settingModalFirstOptions.option2.map((item) => ({ ...item, selected: res[item.column] }))
const optionData3 = settingModalSecondOptions.option3.map((item) => ({ ...item }))
const optionData4 = settingModalSecondOptions.option4.map((item) => ({ ...item, selected: res[item.column] }))
const optionData5 = settingModalFirstOptions.dimensionDisplay.map((item) => ({
...item,
}))
// 데이터 설정
setSettingModalFirstOptions({
option1: optionData1,
option2: optionData2,
dimensionDisplay: optionData5,
})
setSettingModalSecondOptions({
option3: optionData3,

14
src/locales/ja.json
View File

@ -71,6 +71,15 @@
"modal.canvas.setting.grid.dot.line.setting.save": "保存",
"modal.canvas.setting.grid.absorption.add": "吸着点を追加",
"modal.canvas.setting.grid.color.setting": "グリッド色の設定",
"modal.grid.move": "グリッド移動",
"modal.grid.move.info": "移動する方向を入力してください",
"modal.grid.move.all": "グリッド全体移動",
"modal.grid.move.length": "長さ",
"modal.grid.move.save": "保存",
"modal.grid.copy": "グリッドのコピー",
"modal.grid.copy.info": "間隔を設定し、コピー方向を選択します",
"modal.grid.copy.length": "長さ",
"modal.grid.copy.save": "保存",
"modal.canvas.setting.font.plan.edit": "フォントとサイズの変更",
"modal.canvas.setting.font.plan.edit.word": "文字フォントの変更",
"modal.canvas.setting.font.plan.edit.flow": "フロー方向フォントの変更",
@ -95,7 +104,10 @@
"modal.canvas.setting.first.option.trestle": "가대 표시",
"modal.canvas.setting.first.option.flow": "흐름방향 표시",
"modal.canvas.setting.first.option.total": "집계표 표시",
"modal.canvas.setting.first.option.corridor.dimension": "복도치수 표시",
"modal.canvas.setting.first.option.dimension": "치수 표시(JA)",
"modal.canvas.setting.first.option.corridor.dimension": "복도치수 표시(JA)",
"modal.canvas.setting.first.option.real.dimension": "실제치수 표시(JA)",
"modal.canvas.setting.first.option.none.dimension": "치수표시없음(JA)",
"modal.canvas.setting.first.option.display": "画面表示",
"modal.canvas.setting.first.option.border": "ボーダーのみ",
"modal.canvas.setting.first.option.line": "ラインハッチ",

12
src/locales/ko.json
View File

@ -68,6 +68,15 @@
"modal.canvas.setting.grid.dot.line.setting.save": "저장",
"modal.canvas.setting.grid.absorption.add": "흡착점 추가",
"modal.canvas.setting.grid.color.setting": "그리드 색 설정",
"modal.grid.move": "그리드 이동",
"modal.grid.move.info": "이동할 방향을 입력해주세요",
"modal.grid.move.all": "그리드 전체 이동",
"modal.grid.move.length": "길이",
"modal.grid.move.save": "저장",
"modal.grid.copy": "그리드 복사",
"modal.grid.copy.info": "간격을 설정하고 복사 방향을 선택하십시오",
"modal.grid.copy.length": "길이",
"modal.grid.copy.save": "저장",
"modal.canvas.setting.font.plan.edit": "글꼴 및 크기 변경",
"modal.canvas.setting.font.plan.edit.word": "문자 글꼴 변경",
"modal.canvas.setting.font.plan.edit.flow": "흐름 방향 글꼴 변경",
@ -92,7 +101,10 @@
"modal.canvas.setting.first.option.trestle": "가대 표시",
"modal.canvas.setting.first.option.flow": "흐름방향 표시",
"modal.canvas.setting.first.option.total": "집계표 표시",
"modal.canvas.setting.first.option.dimension": "치수 표시",
"modal.canvas.setting.first.option.corridor.dimension": "복도치수 표시",
"modal.canvas.setting.first.option.real.dimension": "실제치수 표시",
"modal.canvas.setting.first.option.none.dimension": "치수표시없음",
"modal.canvas.setting.first.option.display": "화면 표시",
"modal.canvas.setting.first.option.border": "테두리만",
"modal.canvas.setting.first.option.line": "라인해치",

27
src/store/settingAtom.js
View File

@ -6,21 +6,30 @@ export const settingModalFirstOptionsState = atom({
option1: [
{ id: 1, column: 'assignDisplay', name: 'modal.canvas.setting.first.option.alloc', selected: false },
{ id: 2, column: 'drawDisplay', name: 'modal.canvas.setting.first.option.outline', selected: false },
{ id: 3, column: 'gridDisplay', name: 'modal.canvas.setting.first.option.plan', selected: false },
{ id: 4, column: 'charDisplay', name: 'modal.canvas.setting.first.option.roof.line', selected: false },
{ id: 5, column: 'flowDisplay', name: 'modal.canvas.setting.first.option.grid', selected: false },
{ id: 6, column: 'hallwayDimenDisplay', name: 'modal.canvas.setting.first.option.circuit.num', selected: false },
{ id: 7, column: 'actualDimenDisplay', name: 'modal.canvas.setting.first.option.word', selected: false },
{ id: 8, column: 'noDimenDisplay', name: 'modal.canvas.setting.first.option.trestle', selected: false },
{ id: 9, column: 'trestleDisplay', name: 'modal.canvas.setting.first.option.flow', selected: false },
{ id: 10, column: 'coordiDisplay', name: 'modal.canvas.setting.first.option.total', selected: false },
{ id: 3, column: 'charDisplay', name: 'modal.canvas.setting.first.option.roof.line', selected: false },
{ id: 4, column: 'flowDisplay', name: 'modal.canvas.setting.first.option.grid', selected: false },
{ id: 5, column: 'hallwayDimenDisplay', name: 'modal.canvas.setting.first.option.circuit.num', selected: false },
{ id: 6, column: 'actualDimenDisplay', name: 'modal.canvas.setting.first.option.word', selected: false },
{ id: 7, column: 'noDimenDisplay', name: 'modal.canvas.setting.first.option.trestle', selected: false },
{ id: 8, column: 'trestleDisplay', name: 'modal.canvas.setting.first.option.flow', selected: false },
{ id: 9, column: 'coordiDisplay', name: 'modal.canvas.setting.first.option.total', selected: false },
{
id: 11,
id: 10,
column: 'drawConverDisplay',
name: 'modal.canvas.setting.first.option.corridor.dimension',
selected: false,
},
],
dimensionDisplay: [
{
id: 1,
column: 'corridorDimension',
name: 'modal.canvas.setting.first.option.corridor.dimension',
selected: false,
},
{ id: 2, column: 'realDimension', name: 'modal.canvas.setting.first.option.real.dimension', selected: false },
{ id: 3, column: 'noneDimension', name: 'modal.canvas.setting.first.option.none.dimension', selected: false },
],
option2: [
{ id: 1, column: 'onlyBorder', name: 'modal.canvas.setting.first.option.border', selected: false },
{ id: 2, column: 'lineHatch', name: 'modal.canvas.setting.first.option.line', selected: false },