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

Canvas 설정 컬럼 변경에 따른 수정

Browse Source
This commit is contained in:
changkyu choi 2024-09-26 15:49:37 +09:00
parent 5c0e3bbf4b
commit b26f7a07ee
3 changed files with 134 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -27,11 +27,9 @@ export default function FirstOption() {
const res = await get({ url: `/api/canvas-management/canvas-settings/by-object/${objectNo}` }) const res = await get({ url: `/api/canvas-management/canvas-settings/by-object/${objectNo}` })
const optionData1 = settingModalFirstOptions.option1.map((item) => ({ ...item, selected: res[item.column] })) const optionData1 = settingModalFirstOptions.option1.map((item) => ({ ...item, selected: res[item.column] }))
const optionData2 = settingModalFirstOptions.option2.map((item) => ({ ...item, selected: res[item.column] })) const optionData2 = settingModalFirstOptions.option2.map((item) => ({ ...item, selected: res[item.column] }))
const optionData5 = settingModalFirstOptions.dimensionDisplay.map((item) => ({ ...item, selected: res[item.column] }))
const optionData3 = settingModalSecondOptions.option3.map((item) => ({ ...item })) const optionData3 = settingModalSecondOptions.option3.map((item) => ({ ...item }))
const optionData4 = settingModalSecondOptions.option4.map((item) => ({ ...item, selected: res[item.column] })) const optionData4 = settingModalSecondOptions.option4.map((item) => ({ ...item, selected: res[item.column] }))
const optionData5 = settingModalFirstOptions.dimensionDisplay.map((item) => ({
...item,
}))
// 데이터 설정 // 데이터 설정
setSettingModalFirstOptions({ setSettingModalFirstOptions({
@ -39,7 +37,7 @@ export default function FirstOption() {
option2: optionData2, option2: optionData2,
dimensionDisplay: optionData5, dimensionDisplay: optionData5,
}) })
console.log('optionData5', optionData5)
setSettingModalSecondOptions({ setSettingModalSecondOptions({
option3: optionData3, option3: optionData3,
option4: optionData4, option4: optionData4,
@ -66,6 +64,10 @@ export default function FirstOption() {
column: item.column, column: item.column,
selected: item.selected, selected: item.selected,
})), })),
firstOption3: dimensionDisplay.map((item) => ({
column: item.column,
selected: item.selected,
})),
// secondOption1: secondOptions[0].option1.map((item) => ({ // secondOption1: secondOptions[0].option1.map((item) => ({
// name: item.id, // name: item.id,
// name: item.name, // name: item.name,
@ -80,17 +82,19 @@ export default function FirstOption() {
const patternData = { const patternData = {
objectNo, objectNo,
//디스플레이 설정(다중) //디스플레이 설정(다중)
assignDisplay: dataToSend.firstOption1[0].selected, allocDisplay: dataToSend.firstOption1[0].selected,
drawDisplay: dataToSend.firstOption1[1].selected, outlineDisplay: dataToSend.firstOption1[1].selected,
gridDisplay: dataToSend.firstOption1[2].selected, gridDisplay: dataToSend.firstOption1[2].selected,
charDisplay: dataToSend.firstOption1[3].selected, lineDisplay: dataToSend.firstOption1[3].selected,
flowDisplay: dataToSend.firstOption1[4].selected, wordDisplay: dataToSend.firstOption1[4].selected,
hallwayDimenDisplay: dataToSend.firstOption1[5].selected, circuitNumDisplay: dataToSend.firstOption1[5].selected,
actualDimenDisplay: dataToSend.firstOption1[6].selected, flowDisplay: dataToSend.firstOption1[6].selected,
noDimenDisplay: dataToSend.firstOption1[7].selected, trestleDisplay: dataToSend.firstOption1[7].selected,
trestleDisplay: dataToSend.firstOption1[8].selected, totalDisplay: dataToSend.firstOption1[8].selected,
coordiDisplay: dataToSend.firstOption1[9].selected, //차수 표시(다건)
drawConverDisplay: dataToSend.firstOption1[10].selected, corridorDimension: dataToSend.firstOption3[0].selected,
realDimension: dataToSend.firstOption3[1].selected,
noneDimension: dataToSend.firstOption3[2].selected,
//화면 표시(다중) //화면 표시(다중)
onlyBorder: dataToSend.firstOption2[0].selected, onlyBorder: dataToSend.firstOption2[0].selected,
lineHatch: dataToSend.firstOption2[1].selected, lineHatch: dataToSend.firstOption2[1].selected,
@ -112,13 +116,75 @@ export default function FirstOption() {
} }
} }
const onClickDimension = (item) => { const onClickDimension = async (item) => {
const options = settingModalFirstOptions?.dimensionDisplay.map((option) => { const options = settingModalFirstOptions?.dimensionDisplay.map((option) => {
option.selected = option.id === item.id option.selected = option.id === item.id
return option return option
}) })
setSettingModalFirstOptions({ option1, option2, dimensionDisplay: options }) setSettingModalFirstOptions({ option1, option2, dimensionDisplay })
try {
// 서버에 전송할 데이터
const dataToSend = {
firstOption1: option1.map((item) => ({
column: item.column,
selected: item.selected,
})),
firstOption2: option2.map((item) => ({
column: item.column,
selected: item.selected,
})),
firstOption3: dimensionDisplay.map((item) => ({
column: item.column,
selected: item.selected,
})),
// secondOption1: secondOptions[0].option1.map((item) => ({
// name: item.id,
// name: item.name,
// // 필요한 경우 데이터 항목 추가
// })),
secondOption2: option4.map((item) => ({
column: item.column,
selected: item.selected,
})),
}
const patternData = {
objectNo,
//디스플레이 설정(다중)
allocDisplay: dataToSend.firstOption1[0].selected,
outlineDisplay: dataToSend.firstOption1[1].selected,
gridDisplay: dataToSend.firstOption1[2].selected,
lineDisplay: dataToSend.firstOption1[3].selected,
wordDisplay: dataToSend.firstOption1[4].selected,
circuitNumDisplay: dataToSend.firstOption1[5].selected,
flowDisplay: dataToSend.firstOption1[6].selected,
trestleDisplay: dataToSend.firstOption1[7].selected,
totalDisplay: dataToSend.firstOption1[8].selected,
//차수 표시(다건)
corridorDimension: dataToSend.firstOption3[0].selected,
realDimension: dataToSend.firstOption3[1].selected,
noneDimension: dataToSend.firstOption3[2].selected,
//화면 표시(다중)
onlyBorder: dataToSend.firstOption2[0].selected,
lineHatch: dataToSend.firstOption2[1].selected,
allPainted: dataToSend.firstOption2[2].selected,
//흡착범위 설정(단건)
adsorpRangeSmall: dataToSend.secondOption2[0].selected,
adsorpRangeSmallSemi: dataToSend.secondOption2[1].selected,
adsorpRangeMedium: dataToSend.secondOption2[2].selected,
adsorpRangeLarge: dataToSend.secondOption2[3].selected,
}
// HTTP POST 요청 보내기
await post({ url: `/api/canvas-management/canvas-settings`, data: patternData }).then((res) => {
//toastUp({ message: res.returnMessage, type: 'success' })
toastUp({ message: getMessage(res.returnMessage), type: 'success' })
})
} catch (error) {
toastUp({ message: getMessage(res.returnMessage), type: 'error' })
}
} }
return ( return (
@ -126,34 +192,37 @@ export default function FirstOption() {
<div className="modal-check-btn-wrap"> <div className="modal-check-btn-wrap">
<h3 className="check-wrap-title light">{getMessage('modal.canvas.setting.first.option.info')}</h3> <h3 className="check-wrap-title light">{getMessage('modal.canvas.setting.first.option.info')}</h3>
<div className="flex-check-box for2"> <div className="flex-check-box for2">
{settingModalFirstOptions?.option1.map((item) => ( {settingModalFirstOptions &&
<button key={item.id} className={`check-btn ${item.selected ? 'act' : ''}`} onClick={(e) => onClickOption(item)}> settingModalFirstOptions.option1.map((item) => (
<span className="check-area"></span> <button key={item.id} className={`check-btn ${item.selected ? 'act' : ''}`} onClick={(e) => onClickOption(item)}>
<span className="title-area">{getMessage(item.name)}</span> <span className="check-area"></span>
</button> <span className="title-area">{getMessage(item.name)}</span>
))} </button>
))}
</div> </div>
</div> </div>
<div className="modal-check-btn-wrap"> <div className="modal-check-btn-wrap">
<h3 className="check-wrap-title">{getMessage('modal.canvas.setting.first.option.dimension')}</h3> <h3 className="check-wrap-title">{getMessage('modal.canvas.setting.first.option.dimension')}</h3>
<div className="flex-check-box for-line"> <div className="flex-check-box for-line">
{settingModalFirstOptions?.dimensionDisplay?.map((item) => ( {settingModalFirstOptions &&
<button key={item.id} className={`check-btn ${item.selected ? 'act' : ''}`} onClick={(e) => onClickDimension(item)}> settingModalFirstOptions.dimensionDisplay.map((item) => (
<span className="check-area"></span> <button key={item.id} className={`check-btn ${item.selected ? 'act' : ''}`} onClick={(e) => onClickDimension(item)}>
<span className="title-area">{getMessage(item.name)}</span> <span className="check-area"></span>
</button> <span className="title-area">{getMessage(item.name)}</span>
))} </button>
))}
</div> </div>
</div> </div>
<div className="modal-check-btn-wrap"> <div className="modal-check-btn-wrap">
<h3 className="check-wrap-title">{getMessage('modal.canvas.setting.first.option.display')}</h3> <h3 className="check-wrap-title">{getMessage('modal.canvas.setting.first.option.display')}</h3>
<div className="flex-check-box for-line"> <div className="flex-check-box for-line">
{settingModalFirstOptions?.option2.map((item) => ( {settingModalFirstOptions &&
<button key={item.id} className={`check-btn ${item.selected ? 'act' : ''}`} onClick={(e) => onClickOption(item)}> settingModalFirstOptions.option2.map((item) => (
<span className="check-area"></span> <button key={item.id} className={`check-btn ${item.selected ? 'act' : ''}`} onClick={(e) => onClickOption(item)}>
<span className="title-area">{getMessage(item.name)}</span> <span className="check-area"></span>
</button> <span className="title-area">{getMessage(item.name)}</span>
))} </button>
))}
</div> </div>
</div> </div>
</> </>

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

@ -13,7 +13,7 @@ export default function SecondOption() {
const [adsorptionPointMode, setAdsorptionPointMode] = useRecoilState(adsorptionPointModeState) const [adsorptionPointMode, setAdsorptionPointMode] = useRecoilState(adsorptionPointModeState)
const setAdsorptionRange = useSetRecoilState(adsorptionRangeState) const setAdsorptionRange = useSetRecoilState(adsorptionRangeState)
const { option1, option2 } = settingModalFirstOptions const { option1, option2, dimensionDisplay } = settingModalFirstOptions
const { option3, option4 } = settingModalSecondOptions const { option3, option4 } = settingModalSecondOptions
const { getMessage } = useMessage() const { getMessage } = useMessage()
const { get, post } = useAxios() const { get, post } = useAxios()
@ -30,12 +30,10 @@ export default function SecondOption() {
const res = await get({ url: `/api/canvas-management/canvas-settings/by-object/${objectNo}` }) const res = await get({ url: `/api/canvas-management/canvas-settings/by-object/${objectNo}` })
const optionData1 = settingModalFirstOptions.option1.map((item) => ({ ...item, selected: res[item.column] })) const optionData1 = settingModalFirstOptions.option1.map((item) => ({ ...item, selected: res[item.column] }))
const optionData2 = settingModalFirstOptions.option2.map((item) => ({ ...item, selected: res[item.column] })) const optionData2 = settingModalFirstOptions.option2.map((item) => ({ ...item, selected: res[item.column] }))
const optionData5 = settingModalFirstOptions.dimensionDisplay.map((item) => ({ ...item, selected: res[item.column] }))
const optionData3 = settingModalSecondOptions.option3.map((item) => ({ ...item })) const optionData3 = settingModalSecondOptions.option3.map((item) => ({ ...item }))
const optionData4 = settingModalSecondOptions.option4.map((item) => ({ ...item, selected: res[item.column] })) const optionData4 = settingModalSecondOptions.option4.map((item) => ({ ...item, selected: res[item.column] }))
const optionData5 = settingModalFirstOptions.dimensionDisplay.map((item) => ({
...item,
}))
// 데이터 설정
setSettingModalFirstOptions({ setSettingModalFirstOptions({
option1: optionData1, option1: optionData1,
option2: optionData2, option2: optionData2,
@ -52,16 +50,9 @@ export default function SecondOption() {
const onClickOption = async (option) => { const onClickOption = async (option) => {
// option4에서 한 개만 선택 가능하도록 처리 // option4에서 한 개만 선택 가능하도록 처리
const updatedOption4 = option4.map((item) => const updatedOption4 = option4.map((item) => (item.id === option.id ? { ...item, selected: true } : { ...item, selected: false }))
item.id === option.id
? { ...item, selected: true }
: {
...item,
selected: false,
},
)
setSettingModalFirstOptions({ option1, option2 }) setSettingModalFirstOptions({ option1, option2, dimensionDisplay })
setSettingModalSecondOptions({ option3, option4: updatedOption4 }) setSettingModalSecondOptions({ option3, option4: updatedOption4 })
try { try {
@ -75,6 +66,10 @@ export default function SecondOption() {
column: item.column, column: item.column,
selected: item.selected, selected: item.selected,
})), })),
firstOption3: dimensionDisplay.map((item) => ({
column: item.column,
selected: item.selected,
})),
// secondOption1: secondOptions[0].option3.map((item) => ({ // secondOption1: secondOptions[0].option3.map((item) => ({
// name: item.id, // name: item.id,
// name: item.name, // name: item.name,
@ -88,17 +83,19 @@ export default function SecondOption() {
const patternData = { const patternData = {
objectNo, objectNo,
//디스플레이 설정(다중) //디스플레이 설정(다중)
assignDisplay: dataToSend.firstOption1[0].selected, allocDisplay: dataToSend.firstOption1[0].selected,
drawDisplay: dataToSend.firstOption1[1].selected, outlineDisplay: dataToSend.firstOption1[1].selected,
gridDisplay: dataToSend.firstOption1[2].selected, gridDisplay: dataToSend.firstOption1[2].selected,
charDisplay: dataToSend.firstOption1[3].selected, lineDisplay: dataToSend.firstOption1[3].selected,
flowDisplay: dataToSend.firstOption1[4].selected, wordDisplay: dataToSend.firstOption1[4].selected,
hallwayDimenDisplay: dataToSend.firstOption1[5].selected, circuitNumDisplay: dataToSend.firstOption1[5].selected,
actualDimenDisplay: dataToSend.firstOption1[6].selected, flowDisplay: dataToSend.firstOption1[6].selected,
noDimenDisplay: dataToSend.firstOption1[7].selected, trestleDisplay: dataToSend.firstOption1[7].selected,
trestleDisplay: dataToSend.firstOption1[8].selected, totalDisplay: dataToSend.firstOption1[8].selected,
coordiDisplay: dataToSend.firstOption1[9].selected, //차수 표시(다건)
drawConverDisplay: dataToSend.firstOption1[10].selected, corridorDimension: dataToSend.firstOption3[0].selected,
realDimension: dataToSend.firstOption3[1].selected,
noneDimension: dataToSend.firstOption3[2].selected,
//화면 표시(다중) //화면 표시(다중)
onlyBorder: dataToSend.firstOption2[0].selected, onlyBorder: dataToSend.firstOption2[0].selected,
lineHatch: dataToSend.firstOption2[1].selected, lineHatch: dataToSend.firstOption2[1].selected,

31
src/store/settingAtom.js
View File

@ -4,29 +4,18 @@ export const settingModalFirstOptionsState = atom({
key: 'settingModalFirstOptions', key: 'settingModalFirstOptions',
default: { default: {
option1: [ option1: [
{ id: 1, column: 'assignDisplay', name: 'modal.canvas.setting.first.option.alloc', selected: false }, { id: 1, column: 'allocDisplay', name: 'modal.canvas.setting.first.option.alloc', selected: false },
{ id: 2, column: 'drawDisplay', name: 'modal.canvas.setting.first.option.outline', selected: false }, { id: 2, column: 'outlineDisplay', name: 'modal.canvas.setting.first.option.outline', selected: false },
{ id: 3, column: 'charDisplay', name: 'modal.canvas.setting.first.option.roof.line', selected: false }, { id: 3, column: 'gridDisplay', name: 'modal.canvas.setting.first.option.grid', selected: false },
{ id: 4, column: 'flowDisplay', name: 'modal.canvas.setting.first.option.grid', selected: false }, { id: 4, column: 'lineDisplay', name: 'modal.canvas.setting.first.option.roof.line', selected: false },
{ id: 5, column: 'hallwayDimenDisplay', name: 'modal.canvas.setting.first.option.circuit.num', selected: false }, { id: 5, column: 'wordDisplay', name: 'modal.canvas.setting.first.option.word', selected: false },
{ id: 6, column: 'actualDimenDisplay', name: 'modal.canvas.setting.first.option.word', selected: false }, { id: 6, column: 'circuitNumDisplay', name: 'modal.canvas.setting.first.option.circuit.num', selected: false },
{ id: 7, column: 'noDimenDisplay', name: 'modal.canvas.setting.first.option.trestle', selected: false }, { id: 7, column: 'flowDisplay', name: 'modal.canvas.setting.first.option.flow', selected: false },
{ id: 8, column: 'trestleDisplay', name: 'modal.canvas.setting.first.option.flow', selected: false }, { id: 8, column: 'trestleDisplay', name: 'modal.canvas.setting.first.option.trestle', selected: false },
{ id: 9, column: 'coordiDisplay', name: 'modal.canvas.setting.first.option.total', selected: false }, { id: 9, column: 'totalDisplay', name: 'modal.canvas.setting.first.option.total', selected: false },
{
id: 10,
column: 'drawConverDisplay',
name: 'modal.canvas.setting.first.option.corridor.dimension',
selected: false,
},
], ],
dimensionDisplay: [ dimensionDisplay: [
{ { id: 1, column: 'corridorDimension', name: 'modal.canvas.setting.first.option.corridor.dimension', selected: false },
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: 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 }, { id: 3, column: 'noneDimension', name: 'modal.canvas.setting.first.option.none.dimension', selected: false },
], ],