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

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

Browse Source
This commit is contained in:
yoosangwook 2024-10-29 10:50:40 +09:00
commit 0970dd95d0
19 changed files with 956 additions and 467 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/fabric/QLine.js
View File

@ -21,9 +21,7 @@ export const QLine = fabric.util.createClass(fabric.Line, {
}
this.line = this
// 소수점 전부 제거
points.forEach((point) => {
point = Math.round(point)
})
points = points.map((point) => Math.round(point))
this.idx = options.idx ?? 0
this.direction = options.direction ?? getDirectionByPoint({ x: this.x1, y: this.y1 }, { x: this.x2, y: this.y2 })

4
src/components/fabric/QPolygon.js
View File

@ -24,8 +24,8 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
initialize: function (points, options, canvas) {
// 소수점 전부 제거
points.forEach((point) => {
point.x = Math.round(point.x)
point.y = Math.round(point.y)
point.x = Number(point.x.toFixed(1))
point.y = Number(point.y.toFixed(1))
})
options.selectable = options.selectable ?? true
options.sort = options.sort ?? true

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

@ -2,56 +2,33 @@
import { useEffect, useState } from 'react'
import { useRecoilState, useRecoilValue } from 'recoil'
import { useAxios } from '@/hooks/useAxios'
import { globalLocaleStore } from '@/store/localeAtom'
import { settingModalFirstOptionsState, settingModalSecondOptionsState } from '@/store/settingAtom'
import CanvasMenu from '@/components/floor-plan/CanvasMenu'
import { useCanvasMenu } from '@/hooks/common/useCanvasMenu'
import { useCanvasSetting } from '@/hooks/option/useCanvasSetting'
import '@/styles/contents.scss'
export default function FloorPlan({ children }) {
const globalLocaleState = useRecoilValue(globalLocaleStore)
const { get } = useAxios(globalLocaleState)
const [settingModalFirstOptions, setSettingModalFirstOptions] = useRecoilState(settingModalFirstOptionsState)
const [settingModalSecondOptions, setSettingModalSecondOptions] = useRecoilState(settingModalSecondOptionsState)
const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요
// const [menuNumber, setMenuNumber] = useState(null)
const { menuNumber, setMenuNumber } = useCanvasMenu()
const { fetchSettings } = useCanvasSetting()
const modalProps = {
menuNumber,
setMenuNumber,
}
useEffect(() => {
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 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,
option4: optionData4,
})
} catch (error) {
console.error('Data fetching error:', error)
}
}
useEffect(() => {
setMenuNumber(1)
}, [])
return (
<>

42
src/components/floor-plan/modal/image/ImageSizeSetting.jsx Normal file
View File

@ -0,0 +1,42 @@
import WithDraggable from '@/components/common/draggable/WithDraggable'
import { useState } from 'react'
import { usePopup } from '@/hooks/usePopup'
import { useRecoilValue } from 'recoil'
import { contextPopupPositionState } from '@/store/popupAtom'
import { useMessage } from '@/hooks/useMessage'
export default function ImageSizeSetting(props) {
const contextPopupPosition = useRecoilValue(contextPopupPositionState)
const { id, pos = contextPopupPosition, size, setSize } = props
const [sizeValue, setSizeValue] = useState(100)
const { getMessage } = useMessage()
const { closePopup } = usePopup()
return (
<WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap xxxm`}>
<div className="modal-head">
<h1 className="title">{getMessage('modal.image.size.setting')} </h1>
<button className="modal-close" onClick={() => closePopup(id)}>
닫기
</button>
</div>
<div className="modal-body">
<div className="range-wrap">
<input
type="range"
id="size"
name="volume"
min="20"
max="200"
step={10}
value={sizeValue}
onChange={(e) => setSizeValue(e.target.value)}
/>
<label htmlFor="size">{sizeValue}%</label>
</div>
</div>
</div>
</WithDraggable>
)
}

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

@ -1,210 +1,216 @@
import { useRecoilState, useRecoilValue } from 'recoil'
import { settingModalSecondOptionsState } from '@/store/settingAtom'
import { useMessage } from '@/hooks/useMessage'
import React, { useEffect, useState } from 'react'
import { useAxios } from '@/hooks/useAxios'
import { useSwal } from '@/hooks/useSwal'
import { useFirstOption } from '@/hooks/option/useFirstOption'
import { setSurfaceShapePattern } from '@/util/canvas-util'
import { canvasState } from '@/store/canvasAtom'
import { POLYGON_TYPE } from '@/common/common'
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 } = useFirstOption()
const [settingModalSecondOptions, setSettingModalSecondOptions] = useRecoilState(settingModalSecondOptionsState)
const { option1, option2, dimensionDisplay } = settingModalFirstOptions
const { option3, option4 } = settingModalSecondOptions
const { settingModalFirstOptions, setSettingModalFirstOptions } = useCanvasSetting()
const { settingModalSecondOptions, setSettingModalSecondOptions } = useCanvasSetting()
const { getMessage } = useMessage()
const { get, post } = useAxios()
const { swalFire } = useSwal()
const canvas = useRecoilValue(canvasState)
//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()
//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] }))
// // 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,
})
// // 데이터 설정
// setSettingModalFirstOptions({
// option1: optionData1,
// option2: optionData2,
// dimensionDisplay: optionData5,
// })
setSettingModalSecondOptions({
option3: optionData3,
option4: optionData4,
})
} catch (error) {
console.error('Data fetching error:', error)
}
}
// setSettingModalSecondOptions({
// option3: optionData3,
// option4: optionData4,
// })
// } catch (error) {
// console.error('Data fetching error:', error)
// }
// }
const onClickOption = async (option) => {
option.selected = !option.selected
// const onClickOption = async (option) => {
// option.selected = !option.selected
setSettingModalFirstOptions({ option1, option2, dimensionDisplay })
setSettingModalSecondOptions({ option3, option4 })
// 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,
})),
}
// 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,
}
// 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' })
}
}
// // 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 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)
// const polygons = canvas?.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF)
polygons.forEach((polygon) => {
setSurfaceShapePattern(polygon, item.column)
})
// polygons.forEach((polygon) => {
// setSurfaceShapePattern(polygon, item.column)
// })
//치수 표시
} else {
const options = settingModalFirstOptions?.dimensionDisplay.map((option) => {
option.selected = option.id === item.id
return option
})
}
// //치수 표시
// } else {
// const options = settingModalFirstOptions?.dimensionDisplay.map((option) => {
// option.selected = option.id === item.id
// return option
// })
// }
setSettingModalFirstOptions({ option1, option2, dimensionDisplay })
// 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,
})),
}
// 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,
}
// 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' })
}
}
// // 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 (
<>
@ -225,7 +231,7 @@ export default function FirstOption() {
<div className="flex-check-box for-line">
{settingModalFirstOptions &&
settingModalFirstOptions.dimensionDisplay.map((item) => (
<button key={item.id} className={`check-btn ${item.selected ? 'act' : ''}`} onClick={(e) => onClickOnlyOne(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>
@ -237,7 +243,7 @@ export default function FirstOption() {
<div className="flex-check-box for-line">
{settingModalFirstOptions &&
settingModalFirstOptions.option2.map((item) => (
<button key={item.id} className={`check-btn ${item.selected ? 'act' : ''}`} onClick={(e) => onClickOnlyOne(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>

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

@ -1,143 +1,148 @@
import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
import { settingModalFirstOptionsState, settingModalSecondOptionsState } from '@/store/settingAtom'
//import { settingModalFirstOptionsState, settingModalSecondOptionsState } from '@/store/settingAtom'
import { useMessage } from '@/hooks/useMessage'
import React, { useEffect, useState } from 'react'
import { useAxios } from '@/hooks/useAxios'
import { useSwal } from '@/hooks/useSwal'
import { adsorptionPointModeState, adsorptionRangeState } from '@/store/canvasAtom'
import DimensionLineSetting from '@/components/floor-plan/modal/setting01/dimensionLine/DimensionLineSetting'
import { usePopup } from '@/hooks/usePopup'
import { v4 as uuidv4 } from 'uuid'
import FontSetting from '@/components/common/font/FontSetting'
import PlanSizeSetting from '@/components/floor-plan/modal/setting01/planSize/PlanSizeSetting'
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 [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요
const [settingModalFirstOptions, setSettingModalFirstOptions] = useRecoilState(settingModalFirstOptionsState)
const [settingModalSecondOptions, setSettingModalSecondOptions] = useRecoilState(settingModalSecondOptionsState)
const [adsorptionPointMode, setAdsorptionPointMode] = useRecoilState(adsorptionPointModeState)
const setAdsorptionRange = useSetRecoilState(adsorptionRangeState)
//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 { option1, option2, dimensionDisplay } = settingModalFirstOptions
const { option3, option4 } = settingModalSecondOptions
const { getMessage } = useMessage()
const { get, post } = useAxios()
const { swalFire } = useSwal()
const { addPopup, closePopup, closePopups } = usePopup()
const [showFontSettingModal, setShowFontSettingModal] = useState(false)
const [showDimensionLineSettingModal, setShowDimensionLineSettingModal] = useState(false)
const [showPlanSizeSettingModal, setShowPlanSizeSettingModal] = useState(false)
const dimensionSettings = useRecoilValue(dimensionLineSettingsState)
const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요
const { settingModalFirstOptions, setSettingModalFirstOptions } = useCanvasSetting()
const { settingModalSecondOptions, setSettingModalSecondOptions } = useCanvasSetting()
const { adsorptionPointMode, setAdsorptionPointMode } = useCanvasSetting()
const { fetchSettings, frontSettings, onClickOption } = useCanvasSetting()
// 데이터를 최초 한 번만 조회
useEffect(() => {
console.log('SecondOption useEffect 실행')
fetchSettings()
//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] }))
// 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)
}
}
// 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,
},
)
// 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 })
// 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,
}
// 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)
// }
// 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
@ -192,16 +197,6 @@ export default function SecondOption() {
setShowFontSettingModal(false)
switch (type) {
case 'dimensionLine':
if (!showDimensionLineSettingModal) {
setShowDimensionLineSettingModal(true)
addPopup(dimensionId, 2, <DimensionLineSetting {...dimensionProps} />)
} else {
setShowDimensionLineSettingModal(false)
closePopup(dimensionId)
}
break
case 'font1': {
//문자 글꼴변경
setShowFontSettingModal(true)
@ -210,6 +205,7 @@ export default function SecondOption() {
addPopup(fontId + 1, 2, <FontSetting {...fontProps} />)
break
}
case 'font2': {
//흐름 방향 글꼴 변경
setShowFontSettingModal(true)
@ -218,6 +214,7 @@ export default function SecondOption() {
addPopup(fontId + 2, 2, <FontSetting {...fontProps} />)
break
}
case 'font3': {
//치수 글꼴변경
setShowFontSettingModal(true)
@ -226,17 +223,34 @@ export default function SecondOption() {
addPopup(fontId + 3, 2, <FontSetting {...fontProps} />)
break
}
case 'font4': //회로번호 글꼴변경
case 'font4': {
//회로번호 글꼴변경
setShowFontSettingModal(true)
fontProps.type = 'circuitNumberText'
fontProps.id = fontId
addPopup(fontId, 2, <FontSetting {...fontProps} />)
break
case 'planSize':
setShowPlanSizeSettingModal(true)
}
case 'dimensionLine': {
//치수선 설정
if (!showDimensionLineSettingModal) {
setShowDimensionLineSettingModal(true)
addPopup(dimensionId, 2, <DimensionLineSetting {...dimensionProps} />)
} else {
setShowDimensionLineSettingModal(false)
closePopup(dimensionId)
}
break
}
case 'planSize': {
//도면크기 설정
setShowPlanSizeSettingModal(true)
addPopup(planSizeId, 2, <PlanSizeSetting {...planSizeProps} />)
break
}
}
}

4
src/components/management/Stuff.jsx
View File

@ -43,9 +43,9 @@ export default function Stuff() {
const copyNo = async (value) => {
try {
await navigator.clipboard.writeText(value)
alert('물건번호가 복사되었습니다.')
alert(getMessage('stuff.detail.header.message2'))
} catch (error) {
alert('물건번호 복사에 실패했습니다.')
alert(getMessage('stuff.detail.header.message3'))
}
}

277
src/components/management/StuffDetail.jsx
View File

@ -88,6 +88,9 @@ export default function StuffDetail() {
const [prefCodeList, setPrefCodeList] = useState([]) //도도부현 코트 리스트
const [prefValue, setPrefValue] = useState('')
const [saleStoreList, setSaleStoreList] = useState([]) // 판매점 리스트
const [favoriteStoreList, setFavoriteStoreList] = useState([]) //즐겨찾기한 판매점목록
const [showSaleStoreList, setShowSaleStoreList] = useState([]) //보여줄 판매점목록
const [otherSaleStoreList, setOtherSaleStoreList] = useState([])
const [originOtherSaleStoreList, setOriginOtherSaleStoreList] = useState([])
@ -318,21 +321,37 @@ export default function StuffDetail() {
//1차점 : X167 T01
//2차점 : 10X22, 201X112
get({ url: `/api/object/saleStore/${sessionState?.storeId}/list` }).then((res) => {
let url
if (sessionState?.storeId === 'T01') {
// url = `/api/object/saleStore/${sessionState?.storeId}/list?userId=an1`
url = `/api/object/saleStore/${sessionState?.storeId}/list?userId=${sessionState?.userId}`
} else {
url = `/api/object/saleStore/${sessionState?.storeId}/list`
}
get({ url: url }).then((res) => {
if (!isEmptyArray(res)) {
const firstList = res.filter((row) => row.saleStoreLevel === '1')
let favList
if (sessionState?.storeId === 'T01') {
firstList.sort((a, b) => (a.saleStoreId !== 'T01') - (b.saleStoreId !== 'T01') || a.saleStoreId - b.saleStoreId)
favList = firstList.filter((row) => row.saleStoreId === 'T01' || row.priority !== 'B')
setSaleStoreList(firstList)
setFavoriteStoreList(favList)
setShowSaleStoreList(favList)
} else {
//1차점 셀렉트박스
setSaleStoreList(firstList)
}
const otherList = res.filter((row) => row.saleStoreLevel !== '1')
//1차점 셀렉트박스
setSaleStoreList(firstList)
let filterOtherList
if (sessionState?.storeId === 'T01') {
filterOtherList = otherList.filter((row) => row.firstAgentId === 'T01')
setOriginOtherSaleStoreList(filterOtherList)
setOtherSaleStoreList(filterOtherList)
} else {
//1차점 아닌 판매점 셀렉트박스
//T01 아니고 2차점 판매점 셀렉트박스
setOriginOtherSaleStoreList(otherList)
setOtherSaleStoreList(otherList)
}
@ -380,13 +399,29 @@ export default function StuffDetail() {
//1차점 : X167 T01
//2차점 : 10X22, 201X112
get({ url: `/api/object/saleStore/${sessionState?.storeId}/list` }).then((res) => {
let url
if (sessionState?.storeId === 'T01') {
// url = `/api/object/saleStore/${sessionState?.storeId}/list?userId=an1`
url = `/api/object/saleStore/${sessionState?.storeId}/list?userId=${sessionState?.userId}`
} else {
url = `/api/object/saleStore/${sessionState?.storeId}/list`
}
get({ url: url }).then((res) => {
if (!isEmptyArray(res)) {
const firstList = res.filter((row) => row.saleStoreLevel === '1')
const otherList = res.filter((row) => row.saleStoreLevel !== '1')
let favList
//1차점 셀렉트박스
setSaleStoreList(firstList)
if (sessionState?.storeId === 'T01') {
firstList.sort((a, b) => (a.saleStoreId !== 'T01') - (b.saleStoreId !== 'T01') || a.saleStoreId - b.saleStoreId)
favList = firstList.filter((row) => row.saleStoreId === 'T01' || row.priority !== 'B')
setSaleStoreList(firstList)
setFavoriteStoreList(favList)
setShowSaleStoreList(favList)
} else {
//1차점 셀렉트박스
setSaleStoreList(firstList)
}
let filterOtherList
if (sessionState?.storeId === 'T01') {
@ -495,6 +530,16 @@ export default function StuffDetail() {
const onRadioChange = (key) => {
setSelectObjectStatusId(key.target.value)
}
//1차점 자동완성 input
const onInputChange = (key) => {
if (key !== '') {
setShowSaleStoreList(saleStoreList)
} else {
setShowSaleStoreList(favoriteStoreList)
}
}
//1차점 변경 이벤트
const onSelectionChange = (key) => {
if (isObjectNotEmpty(key)) {
@ -516,7 +561,7 @@ export default function StuffDetail() {
}
} else {
// EDIT
if (planReqNo !== null) {
if (planReqNo !== null && planReqNo !== '') {
if (confirm(getMessage('stuff.detail.confirm.message1'))) {
delFlg = true
} else {
@ -629,7 +674,7 @@ export default function StuffDetail() {
}
} else {
//EDIT
if (planReqNo !== null) {
if (planReqNo !== null && planReqNo !== '') {
if (confirm(getMessage('stuff.detail.confirm.message1'))) {
delFlg = true
} else {
@ -849,7 +894,6 @@ export default function StuffDetail() {
errors.installHeight = true
}
// console.log('상세에러필드:::::', errors)
setIsFormValid(Object.keys(errors).length === 0 ? true : false)
}
}, [
@ -906,20 +950,17 @@ export default function StuffDetail() {
// 저장
const onValid = async () => {
const formData = form.getValues()
let errors = {}
let fieldNm
//담당자
if (!formData.receiveUser || formData.receiveUser.trim().length === 0) {
fieldNm = getMessage('stuff.detail.receiveUser')
errors = fieldNm
inputReceiveUserEl.current.focus()
}
//물건명
if (!formData.objectName || formData.objectName.trim().length === 0) {
fieldNm = getMessage('stuff.detail.objectStatusId')
errors = fieldNm
inputObjectNameEl.current.focus()
}
//경칭
if (!formData.objectNameOmit) {
@ -935,13 +976,11 @@ export default function StuffDetail() {
if (!formData.zipNo) {
fieldNm = getMessage('stuff.detail.zipNo')
errors = fieldNm
inputZipNoEl.current.focus()
}
//주소
if (!formData.address) {
fieldNm = getMessage('stuff.detail.address')
errors = fieldNm
inputAddressEl.current.focus()
}
//도도부현
if (!formData.prefId || formData.prefId === '0') {
@ -962,7 +1001,6 @@ export default function StuffDetail() {
if (!formData.verticalSnowCover) {
fieldNm = getMessage('stuff.detail.verticalSnowCover')
errors = fieldNm
inputVerticalSnowCoverEl.current.focus()
}
//면조도구분
@ -974,7 +1012,6 @@ export default function StuffDetail() {
if (!formData.installHeight) {
fieldNm = getMessage('stuff.detail.installHeight')
errors = fieldNm
inputInstallHeightEl.current.focus()
}
if (Object.keys(errors).length > 0) {
@ -1306,33 +1343,68 @@ export default function StuffDetail() {
</th>
<td>
<div className="flx-box">
<div className="select-wrap mr5" style={{ width: '567px' }}>
<Select
id="long-value-select1"
instanceId="long-value-select1"
className="react-select-custom"
classNamePrefix="custom"
placeholder="Select"
options={saleStoreList}
onChange={onSelectionChange}
getOptionLabel={(x) => x.saleStoreName}
getOptionValue={(x) => x.saleStoreId}
isClearable={sessionState?.storeLvl === '1' ? true : false}
isDisabled={sessionState?.storeLvl !== '1' ? true : false}
value={saleStoreList.filter(function (option) {
return option.saleStoreId === selOptions
})}
/>
</div>
<div className="input-wrap" style={{ width: '216px' }}>
<input
type="text"
className="input-light"
value={form.watch('saleStoreId') || ''}
{...form.register('saleStoreId')}
readOnly
/>
</div>
{(sessionState?.storeId === 'T01' && (
<>
<div className="select-wrap mr5" style={{ width: '567px' }}>
<Select
id="long-value-select1"
instanceId="long-value-select1"
className="react-select-custom"
classNamePrefix="custom"
placeholder="Select"
options={showSaleStoreList}
onInputChange={onInputChange}
onChange={onSelectionChange}
getOptionLabel={(x) => x.saleStoreName}
getOptionValue={(x) => x.saleStoreId}
isClearable={sessionState?.storeLvl === '1' ? true : false}
isDisabled={sessionState?.storeLvl !== '1' ? true : false}
value={showSaleStoreList.filter(function (option) {
return option.saleStoreId === selOptions
})}
></Select>
</div>
<div className="input-wrap" style={{ width: '216px' }}>
<input
type="text"
className="input-light"
value={form.watch('saleStoreId') || ''}
{...form.register('saleStoreId')}
readOnly
/>
</div>
</>
)) || (
<>
<div className="select-wrap mr5" style={{ width: '567px' }}>
<Select
id="long-value-select1"
instanceId="long-value-select1"
className="react-select-custom"
classNamePrefix="custom"
placeholder="Select"
options={saleStoreList}
onChange={onSelectionChange}
getOptionLabel={(x) => x.saleStoreName}
getOptionValue={(x) => x.saleStoreId}
isClearable={sessionState?.storeLvl === '1' ? true : false}
isDisabled={sessionState?.storeLvl !== '1' ? true : false}
value={saleStoreList.filter(function (option) {
return option.saleStoreId === selOptions
})}
></Select>
</div>
<div className="input-wrap" style={{ width: '216px' }}>
<input
type="text"
className="input-light"
value={form.watch('saleStoreId') || ''}
{...form.register('saleStoreId')}
readOnly
/>
</div>
</>
)}
</div>
</td>
</tr>
@ -1651,13 +1723,7 @@ export default function StuffDetail() {
</th>
<td>
<div className="input-wrap" style={{ width: '500px' }}>
<input
type="text"
className="input-light"
{...form.register('receiveUser')}
value={form.watch('receiveUser') || ''}
ref={inputReceiveUserEl}
/>
<input type="text" className="input-light" {...form.register('receiveUser')} value={form.watch('receiveUser') || ''} />
</div>
</td>
</tr>
@ -1686,7 +1752,7 @@ export default function StuffDetail() {
})}
{/* 상세라디오끝 */}
<div className="input-wrap mr5" style={{ width: '545px' }}>
<input type="text" className="input-light" {...form.register('objectName')} ref={inputObjectNameEl} />
<input type="text" className="input-light" {...form.register('objectName')} />
</div>
<div className="select-wrap" style={{ width: '120px' }}>
<Select
@ -1732,33 +1798,68 @@ export default function StuffDetail() {
</th>
<td>
<div className="flx-box">
<div className="select-wrap mr5" style={{ width: '567px' }}>
<Select
id="long-value-select1"
instanceId="long-value-select1"
className="react-select-custom"
classNamePrefix="custom"
placeholder="Select"
options={saleStoreList}
onChange={onSelectionChange}
getOptionLabel={(x) => x.saleStoreName}
getOptionValue={(x) => x.saleStoreId}
isClearable={sessionState?.storeLvl === '1' ? true : false}
isDisabled={sessionState?.storeLvl !== '1' ? true : false}
value={saleStoreList.filter(function (option) {
return option.saleStoreId === selOptions
})}
/>
</div>
<div className="input-wrap" style={{ width: '216px' }}>
<input
type="text"
className="input-light"
value={form.watch('saleStoreId') || ''}
{...form.register('saleStoreId')}
readOnly
/>
</div>
{(sessionState?.storeId === 'T01' && (
<>
<div className="select-wrap mr5" style={{ width: '567px' }}>
<Select
id="long-value-select1"
instanceId="long-value-select1"
className="react-select-custom"
classNamePrefix="custom"
placeholder="Select"
options={showSaleStoreList}
onInputChange={onInputChange}
onChange={onSelectionChange}
getOptionLabel={(x) => x.saleStoreName}
getOptionValue={(x) => x.saleStoreId}
isClearable={sessionState?.storeLvl === '1' ? true : false}
isDisabled={sessionState?.storeLvl !== '1' ? true : false}
value={saleStoreList.filter(function (option) {
return option.saleStoreId === selOptions
})}
/>
</div>
<div className="input-wrap" style={{ width: '216px' }}>
<input
type="text"
className="input-light"
value={form.watch('saleStoreId') || ''}
{...form.register('saleStoreId')}
readOnly
/>
</div>
</>
)) || (
<>
<div className="select-wrap mr5" style={{ width: '567px' }}>
<Select
id="long-value-select1"
instanceId="long-value-select1"
className="react-select-custom"
classNamePrefix="custom"
placeholder="Select"
options={saleStoreList}
onChange={onSelectionChange}
getOptionLabel={(x) => x.saleStoreName}
getOptionValue={(x) => x.saleStoreId}
isClearable={sessionState?.storeLvl === '1' ? true : false}
isDisabled={sessionState?.storeLvl !== '1' ? true : false}
value={saleStoreList.filter(function (option) {
return option.saleStoreId === selOptions
})}
/>
</div>
<div className="input-wrap" style={{ width: '216px' }}>
<input
type="text"
className="input-light"
value={form.watch('saleStoreId') || ''}
{...form.register('saleStoreId')}
readOnly
/>
</div>
</>
)}
</div>
</td>
</tr>
@ -1811,7 +1912,7 @@ export default function StuffDetail() {
<td>
<div className="flx-box">
<div className="input-wrap mr5" style={{ width: '200px' }}>
<input type="text" className="input-light" disabled value={form.watch('zipNo') || ''} ref={inputZipNoEl} />
<input type="text" className="input-light" disabled value={form.watch('zipNo') || ''} />
</div>
<Button className="btn-origin grey" onPress={onSearchPostNumberPopOpen}>
{getMessage('stuff.detail.btn.addressPop')}
@ -1848,13 +1949,7 @@ export default function StuffDetail() {
)}
</div>
<div className="input-wrap mr5" style={{ width: '580px' }}>
<input
type="text"
className="input-light"
value={form.watch('address') || ''}
{...form.register('address')}
ref={inputAddressEl}
/>
<input type="text" className="input-light" value={form.watch('address') || ''} {...form.register('address')} />
</div>
</div>
</td>
@ -1935,7 +2030,6 @@ export default function StuffDetail() {
onKeyUp={handleKeyUp}
value={form.watch('verticalSnowCover') || ''}
{...register('verticalSnowCover')}
ref={inputVerticalSnowCoverEl}
/>
</div>
<span className="mr10">cm</span>
@ -1987,7 +2081,6 @@ export default function StuffDetail() {
onKeyUp={handleKeyUp}
value={form.watch('installHeight') || ''}
{...register('installHeight')}
ref={inputInstallHeightEl}
/>
</div>
<span>m</span>
@ -2017,7 +2110,7 @@ export default function StuffDetail() {
<th>{getMessage('stuff.detail.remarks')}</th>
<td>
<div className="input-wrap">
<input type="text" className="input-light" {...form.register('remarks')} />
<input type="text" className="input-light" {...form.register('remarks')} value={form.watch('remarks') || ''} />
</div>
</td>
</tr>

2
src/components/management/StuffQGrid.jsx
View File

@ -39,7 +39,7 @@ export default function StuffQGrid(props) {
return {
filter: false,
flex: 1,
sortable: false,
sortable: true,
suppressMovable: true,
resizable: true,
suppressSizeToFit: false,

37
src/components/management/StuffSearchCondition.jsx
View File

@ -4,7 +4,6 @@ import React, { useEffect, useRef, useState } from 'react'
import { useAxios } from '@/hooks/useAxios'
import { useRecoilState, useRecoilValue, useResetRecoilState } from 'recoil'
import { appMessageStore, globalLocaleStore } from '@/store/localeAtom'
// import Select from 'react-dropdown-select'
import Select from 'react-select'
import KO from '@/locales/ko.json'
import JA from '@/locales/ja.json'
@ -57,7 +56,9 @@ export default function StuffSearchCondition() {
const [receiveUser, setReceiveUser] = useState('') //담당자
const [dateType, setDateType] = useState('U') //갱신일(U)/등록일(R)
const [schSelSaleStoreList, setSchSelSaleStoreList] = useState([]) //판매대리점 자동완성 SELECT
const [schSelSaleStoreList, setSchSelSaleStoreList] = useState([]) //판매대리점 자동완성 SELECT 전체
const [favoriteStoreList, setFavoriteStoreList] = useState([]) //즐겨찾기한 판매점목록
const [showSaleStoreList, setShowSaleStoreList] = useState([]) //보여줄 판매점목록
// 조회
const onSubmit = () => {
let diff = dayjs(endDate).diff(startDate, 'day')
@ -128,13 +129,24 @@ export default function StuffSearchCondition() {
useEffect(() => {
if (isObjectNotEmpty(sessionState)) {
// storeId가 T01 이거나 1차점일때만 판매대리점 선택 활성화
get({ url: `/api/object/saleStore/${sessionState?.storeId}/list` }).then((res) => {
let url
if (sessionState?.storeId === 'T01') {
// url = `/api/object/saleStore/${sessionState?.storeId}/list?userId=an1`
url = `/api/object/saleStore/${sessionState?.storeId}/list?userId=${sessionState?.userId}`
} else {
url = `/api/object/saleStore/${sessionState?.storeId}/list`
}
get({ url: url }).then((res) => {
if (!isEmptyArray(res)) {
res.map((row) => {
row.value = row.saleStoreId
row.label = row.saleStoreName
})
setSchSelSaleStoreList(res)
const allList = res
const favList = res.filter((row) => row.priority !== 'B')
setSchSelSaleStoreList(allList)
setFavoriteStoreList(favList)
setShowSaleStoreList(favList)
}
})
}
@ -147,6 +159,15 @@ export default function StuffSearchCondition() {
}
}
//자동완성 인풋
const onInputChange = (key) => {
if (key !== '') {
setShowSaleStoreList(schSelSaleStoreList)
} else {
setShowSaleStoreList(favoriteStoreList)
}
}
//판매대리점 자동완성 변경
const onSelectionChange = (key) => {
if (isObjectNotEmpty(key)) {
@ -300,11 +321,15 @@ export default function StuffSearchCondition() {
classNamePrefix="custom"
placeholder="Select"
ref={ref}
options={schSelSaleStoreList}
// options={schSelSaleStoreList}
options={showSaleStoreList}
onInputChange={onInputChange}
onChange={onSelectionChange}
getOptionLabel={(x) => x.saleStoreName}
getOptionValue={(x) => x.saleStoreId}
value={schSelSaleStoreList.filter(function (option) {
// value={schSelSaleStoreList.filter(function (option) {
value={showSaleStoreList.filter(function (option) {
// console.log('자동완성 value::::', option)
if (stuffSearch?.code === 'S' && schSelSaleStoreId === '') {
return false
} else if (stuffSearch?.code === 'S' && schSelSaleStoreId !== '') {

268
src/hooks/option/useCanvasSetting.js Normal file
View File

@ -0,0 +1,268 @@
import { useEffect, useState } from 'react'
import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
import { canvasState } from '@/store/canvasAtom'
import { globalLocaleStore } from '@/store/localeAtom'
import { useMessage } from '@/hooks/useMessage'
import { useAxios } from '@/hooks/useAxios'
import { useSwal } from '@/hooks/useSwal'
import { settingModalFirstOptionsState, settingModalSecondOptionsState } from '@/store/settingAtom'
import { setSurfaceShapePattern } from '@/util/canvas-util'
import { POLYGON_TYPE } from '@/common/common'
import { adsorptionPointModeState, adsorptionRangeState } from '@/store/canvasAtom'
export function useCanvasSetting() {
const canvas = useRecoilValue(canvasState)
const [settingModalFirstOptions, setSettingModalFirstOptions] = useRecoilState(settingModalFirstOptionsState)
const [settingModalSecondOptions, setSettingModalSecondOptions] = useRecoilState(settingModalSecondOptionsState)
const { option1, option2, dimensionDisplay } = settingModalFirstOptions
const { option3, option4 } = settingModalSecondOptions
const globalLocaleState = useRecoilValue(globalLocaleStore)
const { get, post } = useAxios(globalLocaleState)
const { getMessage } = useMessage()
const { swalFire } = useSwal()
const [adsorptionPointMode, setAdsorptionPointMode] = useRecoilState(adsorptionPointModeState)
const setAdsorptionRange = useSetRecoilState(adsorptionRangeState)
const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요
useEffect(() => {
console.log('useCanvasSetting useEffect 실행1')
fetchSettings()
}, [objectNo])
useEffect(() => {
console.log('useCanvasSetting useEffect 실행2')
//fetchSettings()
//onClickOption()
//fetchSettings()
}, [settingModalFirstOptions, settingModalSecondOptions])
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 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,
option4: optionData4,
})
} catch (error) {
console.error('Data fetching error:', error)
}
}
// 옵션 클릭 후 저장
const onClickOption = async (item) => {
//치수 표시(단 건 선택)
if (item.column === 'corridorDimension' || item.column === 'realDimension' || item.column === 'noneDimension') {
console.log('치수 표시 ', item)
const options = settingModalFirstOptions?.dimensionDisplay.map((option) => {
option.selected = option.id === item.id
return option
})
//화면 표시(단 건 선택)
} else if (item.column === 'onlyBorder' || item.column === 'lineHatch' || item.column === 'allPainted') {
console.log('화면 표시 ', 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 if (
item.column === 'adsorpRangeSmall' ||
item.column === 'adsorpRangeSmallSemi' ||
item.column === 'adsorpRangeMedium' ||
item.column === 'adsorpRangeLarge'
) {
console.log('화면 표시2 ', item, option4)
// option4에서 한 개만 선택 가능하도록 처리
const updatedOption4 = option4.map((option) =>
option.id === item.id
? { ...option, selected: true }
: {
...option,
selected: false,
},
)
setSettingModalSecondOptions({ option3, option4: updatedOption4 })
//디스플레이 설정(다 건 선택)
} else {
console.log('디스플레이 설정 ', item)
item.selected = !item.selected
}
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,
}
console.log('patternData ', patternData)
// HTTP POST 요청 보내기
await post({ url: `/api/canvas-management/canvas-settings`, data: patternData }).then((res) => {
swalFire({ text: getMessage(res.returnMessage) })
// Canvas 디스플레이 설정 시 해당 옵션 적용
frontSettings()
})
} catch (error) {
swalFire({ text: getMessage(res.returnMessage), icon: 'error' })
}
setAdsorptionRange(item.range)
}
// Canvas 디스플레이 설정 시 해당 옵션 적용
const frontSettings = async () => {
const option1 = settingModalFirstOptions.option1
// 'allocDisplay' 할당 표시
// 'outlineDisplay' 외벽선 표시 'outerLine', 'wallLine'
// 'gridDisplay' 그리드 표시 'lindGrid', 'dotGrid'
// 'lineDisplay' 지붕선 표시 'roof', 'roofBase'
// 'wordDisplay' 문자 표시
// 'circuitNumDisplay' 회로번호 표시
// 'flowDisplay' 흐름방향 표시 'arrow'
// 'trestleDisplay' 가대 표시
// 'totalDisplay' 집계표 표시
let optionName //옵션명
let optionSelected //옵션상태
for (let i = 0; i < option1.length; i++) {
switch (option1[i].column) {
case 'allocDisplay': //할당 표시
optionName = ['1']
break
case 'outlineDisplay': //외벽선 표시
optionName = ['outerLine', 'wallLine']
break
case 'gridDisplay': //그리드 표시
optionName = ['lindGrid', 'dotGrid']
break
case 'lineDisplay': //지붕선 표시
optionName = ['roof', 'roofBase']
break
case 'wordDisplay': //문자 표시
optionName = ['6']
break
case 'circuitNumDisplay': //회로번호 표시
optionName = ['7']
break
case 'flowDisplay': //흐름방향 표시
optionName = ['arrow']
break
case 'trestleDisplay': //가대 표시
optionName = ['8']
break
case 'totalDisplay': //집계표 표시
optionName = ['9']
break
}
// 표시 선택 상태(true/false)
optionSelected = option1[i].selected
canvas
.getObjects()
.filter((obj) => optionName.includes(obj.name))
//.filter((obj) => obj.name === optionName)
.forEach((obj) => {
obj.set({ visible: optionSelected })
//obj.set({ visible: !obj.visible })
})
// console.log(
// 'optionName',
// optionName,
// canvas.getObjects().filter((obj) => optionName.includes(obj.name)),
// )
}
}
return {
settingModalFirstOptions,
setSettingModalFirstOptions,
settingModalSecondOptions,
setSettingModalSecondOptions,
fetchSettings,
onClickOption,
frontSettings,
adsorptionPointMode,
setAdsorptionPointMode,
}
}

1
src/hooks/option/useCanvasSettingController.js
View File

@ -46,6 +46,7 @@ export const useCanvasSettingController = () => {
}
}
//
const onClickOption = async (option) => {
option.selected = !option.selected

13
src/hooks/useContextMenu.js
View File

@ -23,6 +23,7 @@ import FlowDirectionSetting from '@/components/floor-plan/modal/flowDirection/Fl
import { useMessage } from '@/hooks/useMessage'
import { useCanvasEvent } from '@/hooks/useCanvasEvent'
import { contextMenuState } from '@/store/contextMenu'
import ImageSizeSetting from '@/components/floor-plan/modal/image/ImageSizeSetting'
export function useContextMenu() {
const currentMenu = useRecoilValue(currentMenuState) // 현재 메뉴
@ -36,7 +37,7 @@ export function useContextMenu() {
const [gridColor, setGridColor] = useRecoilState(gridColorState)
const [qContextMenu, setQContextMenu] = useRecoilState(contextMenuState)
const { handleZoomClear } = useCanvasEvent()
const currentMenuSetting = (position) => {
const currentMenuSetting = () => {
switch (currentMenu) {
case MENU.PLAN_DRAWING:
setContextMenu([
@ -104,6 +105,11 @@ export function useContextMenu() {
id: 'wallLineRemove',
name: getMessage('contextmenu.wallline.remove'),
},
{
id: 'imageSizeEdit',
name: getMessage('modal.image.size.setting'),
component: <ImageSizeSetting id={popupId} />,
},
],
[
{
@ -170,6 +176,11 @@ export function useContextMenu() {
shortcut: ['c', 'C'],
name: `${getMessage('contextmenu.copy')}(C)`,
},
{
id: 'imageSizeEdit',
name: getMessage('modal.image.size.setting'),
component: <ImageSizeSetting id={popupId} />,
},
],
[
{

29
src/locales/ja.json
View File

@ -214,20 +214,20 @@
"modal.canvas.setting.font.plan.absorption.dimension.display": "見る",
"modal.canvas.setting.font.plan.absorption.plan.size.setting": "図面サイズの設定",
"modal.canvas.setting.first.option.info": "※図面に表示する項目をクリックすると適用されます。",
"modal.canvas.setting.first.option.alloc": "할당표시",
"modal.canvas.setting.first.option.outline": "외벽선표시",
"modal.canvas.setting.first.option.plan": "도면표시",
"modal.canvas.setting.first.option.roof.line": "지붕선표시",
"modal.canvas.setting.first.option.grid": "그리드표시",
"modal.canvas.setting.first.option.circuit.num": "회로 번호 표시",
"modal.canvas.setting.first.option.word": "문자 표시",
"modal.canvas.setting.first.option.trestle": "가대 표시",
"modal.canvas.setting.first.option.flow": "흐름방향 표시",
"modal.canvas.setting.first.option.total": "집계표 표시",
"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.alloc": "割り当て表示",
"modal.canvas.setting.first.option.outline": "外壁線表示",
"modal.canvas.setting.first.option.grid": "グリッド表示",
"modal.canvas.setting.first.option.roof.line": "屋根線標示",
"modal.canvas.setting.first.option.word": "文字表示",
"modal.canvas.setting.first.option.circuit.num": "回路番号表示",
"modal.canvas.setting.first.option.flow": "流れ方向表示",
"modal.canvas.setting.first.option.trestle": "架台表示",
"modal.canvas.setting.first.option.image": "画像表示",
"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": "ラインハッチ",
@ -274,6 +274,7 @@
"modal.panel.batch.statistic.total": "合計",
"modal.flow.direction.setting": "流れ方向の設定",
"modal.flow.direction.setting.info": "流れ方向を選択してください。",
"modal.image.size.setting": "画像のサイズ変更",
"plan.message.confirm.save": "PLAN을 저장하시겠습니까?",
"plan.message.confirm.copy": "PLAN을 복사하시겠습니까?",
"plan.message.confirm.delete": "PLAN을 삭제하시겠습니까?",

9
src/locales/ko.json
View File

@ -221,13 +221,13 @@
"modal.canvas.setting.first.option.info": "※도면에 표시하는 항목을 클릭하면 적용됩니다.",
"modal.canvas.setting.first.option.alloc": "할당표시",
"modal.canvas.setting.first.option.outline": "외벽선표시",
"modal.canvas.setting.first.option.plan": "도면표시",
"modal.canvas.setting.first.option.roof.line": "지붕선표시",
"modal.canvas.setting.first.option.grid": "그리드표시",
"modal.canvas.setting.first.option.circuit.num": "회로 번호 표시",
"modal.canvas.setting.first.option.roof.line": "지붕선표시",
"modal.canvas.setting.first.option.word": "문자 표시",
"modal.canvas.setting.first.option.trestle": "가대 표시",
"modal.canvas.setting.first.option.circuit.num": "회로 번호 표시",
"modal.canvas.setting.first.option.flow": "흐름방향 표시",
"modal.canvas.setting.first.option.trestle": "가대 표시",
"modal.canvas.setting.first.option.image": "이미지 표시",
"modal.canvas.setting.first.option.total": "집계표 표시",
"modal.canvas.setting.first.option.dimension": "치수 표시",
"modal.canvas.setting.first.option.corridor.dimension": "복도치수 표시",
@ -279,6 +279,7 @@
"modal.panel.batch.statistic.total": "합계",
"modal.flow.direction.setting": "흐름 방향 설정",
"modal.flow.direction.setting.info": "흐름방향을 선택하세요.",
"modal.image.size.setting": "이미지 크기 조절",
"plan.message.confirm.save": "PLAN을 저장하시겠습니까?",
"plan.message.confirm.copy": "PLAN을 복사하시겠습니까?",
"plan.message.confirm.delete": "PLAN을 삭제하시겠습니까?",

40
src/store/settingAtom.js
View File

@ -12,10 +12,16 @@ 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 },
],
dimensionDisplay: [
{ id: 1, column: 'corridorDimension', name: 'modal.canvas.setting.first.option.corridor.dimension', selected: true },
{
id: 1,
column: 'corridorDimension',
name: 'modal.canvas.setting.first.option.corridor.dimension',
selected: true,
},
{ 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 },
],
@ -38,10 +44,34 @@ export const settingModalSecondOptionsState = atom({
{ id: 4, name: 'modal.canvas.setting.font.plan.edit.circuit.num' },
],
option4: [
{ id: 1, column: 'adsorpRangeSmall', name: 'modal.canvas.setting.font.plan.absorption.small', selected: true, range: 10 },
{ id: 2, column: 'adsorpRangeSmallSemi', name: 'modal.canvas.setting.font.plan.absorption.small.semi', selected: false, range: 30 },
{ id: 3, column: 'adsorpRangeMedium', name: 'modal.canvas.setting.font.plan.absorption.medium', selected: false, range: 50 },
{ id: 4, column: 'adsorpRangeLarge', name: 'modal.canvas.setting.font.plan.absorption.large', selected: false, range: 70 },
{
id: 1,
column: 'adsorpRangeSmall',
name: 'modal.canvas.setting.font.plan.absorption.small',
selected: true,
range: 10,
},
{
id: 2,
column: 'adsorpRangeSmallSemi',
name: 'modal.canvas.setting.font.plan.absorption.small.semi',
selected: false,
range: 30,
},
{
id: 3,
column: 'adsorpRangeMedium',
name: 'modal.canvas.setting.font.plan.absorption.medium',
selected: false,
range: 50,
},
{
id: 4,
column: 'adsorpRangeLarge',
name: 'modal.canvas.setting.font.plan.absorption.large',
selected: false,
range: 70,
},
],
},
dangerouslyAllowMutability: true,

2
src/styles/_contents.scss
View File

@ -329,7 +329,7 @@
border-top: 1px solid #000;
width: 100%;
transition: all .17s ease-in-out;
z-index: 999;
z-index: 99;
&.active{
top: calc(92.8px + 50px);
}

18
src/styles/_modal.scss
View File

@ -1788,4 +1788,22 @@ $alert-color: #101010;
flex: none;
}
}
}
//이미지 크기 설정
.range-wrap{
display: flex;
align-items: center;
input{
flex: 1;
margin-right: 10px;
}
label{
flex: none;
text-align: right;
width: 35px;
font-size: 13px;
color: #fff;
font-weight: 500;
}
}

4
src/styles/_reset.scss
View File

@ -130,6 +130,10 @@ button{
font-family: 'Pretendard', sans-serif !important;
}
.no-click{
cursor: no-drop !important;
}
// margin
.mt5{margin-top: 5px !important;}
.mt10{margin-top: 10px !important;}