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-10-29 18:35:09 +09:00
parent c051291c68
commit 9a70b02857
5 changed files with 59 additions and 324 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -71,7 +71,7 @@ export default function DotLineGrid(props) {
// 데이터를 최초 한 번만 조회
useEffect(() => {
console.log('DotLineGrid useEffect 실행')
// fetchGridSettings()
fetchGridSettings()
}, [objectNo])
const HandleClickClose = () => {
@ -100,9 +100,9 @@ export default function DotLineGrid(props) {
const patternData = {
INTERVAL: {
type: res.gridType,
horizontalInterval: res.gridHorizon,
verticalInterval: res.gridVertical,
ratioInterval: res.gridRatio,
horizontalInterval: res.gridHorizon * 10,
verticalInterval: res.gridVertical * 10,
ratioInterval: res.gridRatio * 10,
},
dimension: res.gridDimen,
DOT: res.dotGridDisplay,

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

@ -2,216 +2,19 @@ import React, { useEffect, useState } from 'react'
import { useCanvasSetting } from '@/hooks/option/useCanvasSetting'
import { useMessage } from '@/hooks/useMessage'
//import { useRecoilState, useRecoilValue } from 'recoil'
//import { settingModalSecondOptionsState } from '@/store/settingAtom'
//import { useAxios } from '@/hooks/useAxios'
//import { useSwal } from '@/hooks/useSwal'
//import { setSurfaceShapePattern } from '@/util/canvas-util'
//import { canvasState } from '@/store/canvasAtom'
//import { POLYGON_TYPE } from '@/common/common'
export default function FirstOption() {
const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요
const { settingModalFirstOptions, setSettingModalFirstOptions } = useCanvasSetting()
const { settingModalSecondOptions, setSettingModalSecondOptions } = useCanvasSetting()
const { getMessage } = useMessage()
//const [settingModalSecondOptions, setSettingModalSecondOptions] = useRecoilState(settingModalSecondOptionsState)
//const { option1, option2, dimensionDisplay } = settingModalFirstOptions
//const { option3, option4 } = settingModalSecondOptions
//const { get, post } = useAxios()
//const { swalFire } = useSwal()
//const canvas = useRecoilValue(canvasState)
const { fetchSettings, frontSettings, onClickOption } = useCanvasSetting()
// 데이터를 최초 한 번만 조회
useEffect(() => {
console.log('FirstOption useEffect 실행')
//fetchSettings()
//frontSettings()
}, [objectNo])
// // Canvas Setting 조회 및 초기화
// const fetchSettings = async () => {
// try {
// 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 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 optionData4 = settingModalSecondOptions.option4.map((item) => ({ ...item, selected: res[item.column] }))
// // 데이터 설정
// setSettingModalFirstOptions({
// option1: optionData1,
// option2: optionData2,
// dimensionDisplay: optionData5,
// })
// setSettingModalSecondOptions({
// option3: optionData3,
// option4: optionData4,
// })
// } catch (error) {
// console.error('Data fetching error:', error)
// }
// }
// const onClickOption = async (option) => {
// option.selected = !option.selected
// setSettingModalFirstOptions({ option1, option2, dimensionDisplay })
// setSettingModalSecondOptions({ option3, option4 })
// 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) => {
// swalFire({ text: getMessage(res.returnMessage) })
// })
// } catch (error) {
// swalFire({ text: getMessage(res.returnMessage), icon: 'error' })
// }
// }
// const onClickOnlyOne = async (item) => {
// //화면 표시
// if (item.column === 'onlyBorder' || item.column === 'lineHatch' || item.column === 'allPainted') {
// const options2 = settingModalFirstOptions?.option2.map((option2) => {
// option2.selected = option2.id === item.id
// return option2
// })
// const polygons = canvas?.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF)
// polygons.forEach((polygon) => {
// setSurfaceShapePattern(polygon, item.column)
// })
// //치수 표시
// } else {
// const options = settingModalFirstOptions?.dimensionDisplay.map((option) => {
// option.selected = option.id === item.id
// return option
// })
// }
// 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) => {
// swalFire({ text: getMessage(res.returnMessage) })
// })
// } catch (error) {
// swalFire({ text: getMessage(res.returnMessage), icon: 'error' })
// }
// }
return (
<>
<div className="modal-check-btn-wrap">

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

@ -1,5 +1,4 @@
import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
//import { settingModalFirstOptionsState, settingModalSecondOptionsState } from '@/store/settingAtom'
import { useMessage } from '@/hooks/useMessage'
import React, { useEffect, useState } from 'react'
import DimensionLineSetting from '@/components/floor-plan/modal/setting01/dimensionLine/DimensionLineSetting'
@ -10,20 +9,7 @@ import PlanSizeSetting from '@/components/floor-plan/modal/setting01/planSize/Pl
import { dimensionLineSettingsState } from '@/store/commonUtilsAtom'
import { useCanvasSetting } from '@/hooks/option/useCanvasSetting'
//import { useAxios } from '@/hooks/useAxios'
//import { useSwal } from '@/hooks/useSwal'
// import { adsorptionPointModeState, adsorptionRangeState } from '@/store/canvasAtom'
export default function SecondOption() {
//const [settingModalFirstOptions, setSettingModalFirstOptions] = useRecoilState(settingModalFirstOptionsState)
//const [settingModalSecondOptions, setSettingModalSecondOptions] = useRecoilState(settingModalSecondOptionsState)
// const [adsorptionPointMode, setAdsorptionPointMode] = useRecoilState(adsorptionPointModeState)
// const setAdsorptionRange = useSetRecoilState(adsorptionRangeState)
// const { option1, option2, dimensionDisplay } = settingModalFirstOptions
// const { option3, option4 } = settingModalSecondOptions
// const { get, post } = useAxios()
// const { swalFire } = useSwal()
const { getMessage } = useMessage()
const { addPopup, closePopup, closePopups } = usePopup()
const [showFontSettingModal, setShowFontSettingModal] = useState(false)
@ -43,106 +29,6 @@ export default function SecondOption() {
//fetchSettings()
}, [objectNo])
// Canvas Setting 조회 및 초기화
// const fetchSettings = async () => {
// try {
// 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 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 optionData4 = settingModalSecondOptions.option4.map((item) => ({ ...item, selected: res[item.column] }))
// setSettingModalFirstOptions({
// option1: optionData1,
// option2: optionData2,
// dimensionDisplay: optionData5,
// })
// setSettingModalSecondOptions({
// option3: optionData3,
// option4: optionData4,
// })
// } catch (error) {
// console.error('Data fetching error:', error)
// }
// }
// const onClickOption = async (option) => {
// // option4에서 한 개만 선택 가능하도록 처리
// const updatedOption4 = option4.map((item) =>
// item.id === option.id
// ? { ...item, selected: true }
// : {
// ...item,
// selected: false,
// },
// )
// setSettingModalFirstOptions({ option1, option2, dimensionDisplay })
// setSettingModalSecondOptions({ option3, option4: updatedOption4 })
// 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].option3.map((item) => ({
// // name: item.id,
// // name: item.name,
// // // 필요한 경우 데이터 항목 추가
// // })),
// secondOption2: updatedOption4.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) => {
// swalFire({ text: getMessage(res.returnMessage) })
// })
// } catch (error) {
// swalFire({ text: getMessage(res.returnMessage), icon: 'error' })
// }
// setAdsorptionRange(option.range)
// }
let dimensionId = null
let fontId = null
let planSizeId = null

51
src/hooks/option/useCanvasSetting.js
View File

@ -39,18 +39,29 @@ export function useCanvasSetting() {
//fetchSettings()
//onClickOption()
//fetchSettings()
}, [adsorptionPointMode])
useEffect(() => {
console.log('useCanvasSetting useEffect 실행3')
//fetchSettings()
//onClickOption()
//fetchSettings()
}, [settingModalFirstOptions, settingModalSecondOptions])
const fetchSettings = async () => {
try {
const res = await get({ url: `/api/canvas-management/canvas-settings/by-object/${objectNo}` })
console.log('res', res)
const optionData1 = settingModalFirstOptions.option1.map((item) => ({ ...item, selected: res[item.column] }))
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,
}))
const optionData5 = settingModalFirstOptions.dimensionDisplay.map((item) => ({ ...item }))
const patternData = {
adsorpPoint: res.adsorpPoint,
}
// 데이터 설정
setSettingModalFirstOptions({
option1: optionData1,
@ -61,6 +72,10 @@ export function useCanvasSetting() {
option3: optionData3,
option4: optionData4,
})
setAdsorptionPointMode(patternData.adsorpPoint)
console.log('adsorptionPointMode', adsorptionPointMode)
} catch (error) {
console.error('Data fetching error:', error)
}
@ -110,8 +125,23 @@ export function useCanvasSetting() {
setSettingModalSecondOptions({ option3, option4: updatedOption4 })
//흡착점 ON / OFF
} else if (item === 'adsorpPoint') {
console.log('흡착점 ON / OFF ', item)
const options2 = settingModalFirstOptions?.option2.map((option2) => {
option2.selected = option2.id === item.id
return option2
})
const polygons = canvas?.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF)
polygons.forEach((polygon) => {
setSurfaceShapePattern(polygon, item.column)
})
//디스플레이 설정(다 건 선택)
} else {
//console.log('디스플레이 설정1 ', item.column)
console.log('디스플레이 설정 ', item)
item.selected = !item.selected
}
@ -155,7 +185,8 @@ export function useCanvasSetting() {
circuitNumDisplay: dataToSend.firstOption1[5].selected,
flowDisplay: dataToSend.firstOption1[6].selected,
trestleDisplay: dataToSend.firstOption1[7].selected,
totalDisplay: dataToSend.firstOption1[8].selected,
imageDisplay: dataToSend.firstOption1[8].selected,
totalDisplay: dataToSend.firstOption1[9].selected,
//차수 표시(단 건)
corridorDimension: dataToSend.firstOption3[0].selected,
realDimension: dataToSend.firstOption3[1].selected,
@ -169,6 +200,8 @@ export function useCanvasSetting() {
adsorpRangeSmallSemi: dataToSend.secondOption2[1].selected,
adsorpRangeMedium: dataToSend.secondOption2[2].selected,
adsorpRangeLarge: dataToSend.secondOption2[3].selected,
//흡착점 ON/OFF
adsorpPoint: adsorptionPointMode,
}
console.log('patternData ', patternData)
@ -199,6 +232,7 @@ export function useCanvasSetting() {
// 'circuitNumDisplay' 회로번호 표시
// 'flowDisplay' 흐름방향 표시 'arrow'
// 'trestleDisplay' 가대 표시
// 'imageDisplay' 이미지 표시
// 'totalDisplay' 집계표 표시
let optionName //옵션명
@ -230,9 +264,12 @@ export function useCanvasSetting() {
case 'trestleDisplay': //가대 표시
optionName = ['8']
break
case 'totalDisplay': //집계표 표시
case 'imageDisplay': //이미지 표시
optionName = ['9']
break
case 'totalDisplay': //집계표 표시
optionName = ['10']
break
}
// 표시 선택 상태(true/false)
optionSelected = option1[i].selected
@ -259,10 +296,10 @@ export function useCanvasSetting() {
setSettingModalFirstOptions,
settingModalSecondOptions,
setSettingModalSecondOptions,
adsorptionPointMode,
setAdsorptionPointMode,
fetchSettings,
onClickOption,
frontSettings,
adsorptionPointMode,
setAdsorptionPointMode,
}
}

13
src/store/settingAtom.js
View File

@ -12,8 +12,8 @@ export const settingModalFirstOptionsState = atom({
{ id: 6, column: 'circuitNumDisplay', name: 'modal.canvas.setting.first.option.circuit.num', 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.trestle', selected: false },
{ id: 10, column: 'imageDisplay', name: 'modal.canvas.setting.first.option.image', selected: false },
{ id: 9, column: 'totalDisplay', name: 'modal.canvas.setting.first.option.total', selected: false },
{ id: 9, column: 'imageDisplay', name: 'modal.canvas.setting.first.option.image', selected: false },
{ id: 10, column: 'totalDisplay', name: 'modal.canvas.setting.first.option.total', selected: false },
],
dimensionDisplay: [
{
@ -160,6 +160,15 @@ export const trestleDisplaySelector = selector({
},
})
// 디스플레이 설정 - 이미지 표시
export const imageDisplaySelector = selector({
key: 'imageDisplaySelector',
get: ({ get }) => {
const settingModalFirstOptions = get(settingModalFirstOptionsState)
return settingModalFirstOptions.option1.find((option) => option.column === 'imageDisplay').selected
},
})
// 디스플레이 설정 - 집계표 표시
export const totalDisplaySelector = selector({
key: 'totalDisplaySelector',