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

Merge branch 'dev' of https://git.jetbrains.space/nalpari/q-cast-iii/qcast-front into dev

Browse Source
This commit is contained in:
hyojun.choi 2024-12-02 16:46:59 +09:00
commit b480540368
12 changed files with 425 additions and 413 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/common/color-picker/ColorPickerModal.jsx
View File

@ -8,13 +8,13 @@ import { contextPopupPositionState } from '@/store/popupAtom'
export default function ColorPickerModal(props) {
const contextPopupPosition = useRecoilValue(contextPopupPositionState) // 현재 메뉴
const { isShow, setIsShow, pos = contextPopupPosition, color = '#ff0000', setColor, id, isConfig = false } = props
const { getMessage } = useMessage()
const { isShow, setIsShow, pos = contextPopupPosition, color, setColor, id, isConfig = false } = props //color = '#ff0000'
const [originColor, setOriginColor] = useState(color)
const { getMessage } = useMessage()
const { closePopup } = usePopup()
useEffect(() => {
setOriginColor(color)
setOriginColor(originColor)
}, [isShow])
return (

180
src/components/estimate/Estimate.jsx
View File

@ -176,7 +176,6 @@ export default function Estimate({ params }) {
useEffect(() => {
//선택된 견적특이사항 setEstimateContextState
// console.log('specialNoteList::', specialNoteList)
if (isNotEmptyArray(specialNoteList)) {
const liveCheckedData = specialNoteList.filter((row) => row.check === true)
@ -187,7 +186,6 @@ export default function Estimate({ params }) {
const newData = data.join('、')
//저장용 보내기
// console.log('유니크??', uniqueData)
setEstimateContextState({ estimateOption: newData, specialNoteList: specialNoteList, uniqueData: uniqueData })
}
}, [specialNoteList])
@ -204,13 +202,21 @@ export default function Estimate({ params }) {
let fileList = []
files.map((row) => {
fileList.push(row.data)
setEstimateContextState({ fileList: row.data, tempFileList: fileList })
setEstimateContextState({ fileList: row.data, newFileList: fileList })
})
} else {
setEstimateContextState({ fileList: [] })
}
}, [files])
useEffect(() => {
if (originFiles.length > 0) {
setEstimateContextState({
originFiles: originFiles,
})
}
}, [originFiles])
//상세에서 내려온 첨부파일 set 만들기
useEffect(() => {
if (isNotEmptyArray(estimateContextState.fileList)) {
@ -232,6 +238,8 @@ export default function Estimate({ params }) {
setOriginFiles(originFiles.filter((file) => file.objectNo === objectNo && file.no !== no))
setEstimateContextState({
fileList: originFiles.filter((file) => file.objectNo === objectNo && file.no !== no),
originFiles: originFiles.filter((file) => file.objectNo === objectNo && file.no !== no),
newFileList: originFiles.filter((file) => file.objectNo === objectNo && file.no !== no),
})
alert(getMessage('plan.message.delete'))
@ -333,7 +341,6 @@ export default function Estimate({ params }) {
}
})
// console.log('특이사항 유니크:::', pushData)
setUniqueData(pushData)
specialNoteList.map((item) => {
if (item.pkgYn === '1') {
@ -562,7 +569,7 @@ export default function Estimate({ params }) {
let updateList = []
let updates = {}
get({ url: apiUrl }).then((res) => {
console.log('아이템디테일::::::::', res)
// console.log('아이템디테일::::::::', res)
updates.objectNo = objectNo
updates.planNo = planNo
updates.itemId = res.itemId
@ -637,6 +644,7 @@ export default function Estimate({ params }) {
bomItem.delFlg = '0'
bomItem.objectNo = objectNo
bomItem.planNo = planNo
bomItem.addFlg = true //봄 추가시도 addFlg
})
setEstimateContextState({
@ -696,98 +704,61 @@ export default function Estimate({ params }) {
useEffect(() => {
if (itemChangeYn) {
let totAmount = 0
let totVolKw = 0
let supplyPrice = 0
let vatPrice = 0
let totPrice = 0
let addSupplyPrice = 0
let pkgTotPrice = 0
if (estimateContextState.estimateType === 'YJOD') {
estimateContextState.itemList.sort((a, b) => {
return a.dispOrder - b.dispOrder
})
// console.log('YJOD 토탈만들어주기::::::::::', estimateContextState.itemList)
let totals = {
totAmount: 0,
totVolKw: 0,
supplyPrice: 0,
vatPrice: 0,
totPrice: 0,
addSupplyPrice: 0,
pkgTotPrice: 0,
}
//아이템에서 제품관련 특이사항 중복제거해서 만드는 함수
makeUniqueSpecialNoteCd(estimateContextState.itemList)
const calculateYJODTotals = (itemList) => {
itemList.sort((a, b) => a.dispOrder - b.dispOrder)
makeUniqueSpecialNoteCd(itemList)
estimateContextState.itemList.map((item) => {
itemList.forEach((item) => {
delete item.showSalePrice
delete item.showSaleTotPrice
if (item.delFlg === '0') {
let amount = Number(item?.amount?.replace(/[^0-9]/g, '').replaceAll(',', ''))
if (isNaN(amount)) {
amount = '0'
}
let price = Number(item?.saleTotPrice?.replaceAll(',', ''))
if (isNaN(price)) {
price = 0
}
let amount = Number(item.amount?.replace(/[^0-9]/g, '').replaceAll(',', '')) || 0
let price = Number(item.saleTotPrice?.replaceAll(',', '')) || 0
if (item.moduleFlg === '1') {
//용량(Kw)은 모듈플래그 1만 합산
const volKw = (item.pnowW * amount) / 1000
// const volKw = item.pnowW * amount
totVolKw += volKw
totals.totVolKw += volKw
}
// const price
totAmount += amount
supplyPrice += price
totals.totAmount += amount
totals.supplyPrice += price
}
})
vatPrice = supplyPrice * 0.1
totPrice = supplyPrice + vatPrice
totals.vatPrice = totals.supplyPrice * 0.1
totals.totPrice = totals.supplyPrice + totals.vatPrice
}
setEstimateContextState({
totAmount: totAmount,
totVolKw: totVolKw.toFixed(3),
supplyPrice: supplyPrice.toFixed(3),
vatPrice: vatPrice.toFixed(3),
totPrice: totPrice.toFixed(3),
})
} else {
//아이템에서 제품관련 특이사항 중복제거해서 만드는 함수
makeUniqueSpecialNoteCd(estimateContextState.itemList)
//YJSS
// console.log('YJSS 토탈만들어주기::::::::::', estimateContextState.itemList)
estimateContextState.itemList.sort((a, b) => {
return a.dispOrder - b.dispOrder
})
estimateContextState.itemList.map((item) => {
const calculateYJSSTotals = (itemList) => {
itemList.sort((a, b) => a.dispOrder - b.dispOrder)
makeUniqueSpecialNoteCd(itemList)
itemList.forEach((item) => {
if (item.delFlg === '0') {
let amount = Number(item.amount?.replace(/[^0-9]/g, '').replaceAll(',', ''))
let salePrice = Number(item.salePrice?.replaceAll(',', ''))
let saleTotPrice = Number(item.saleTotPrice?.replaceAll(',', ''))
let amount = Number(item.amount?.replace(/[^0-9]/g, '').replaceAll(',', '')) || 0
let salePrice = Number(item.salePrice?.replaceAll(',', '')) || 0
if (isNaN(amount)) {
amount = '0'
}
if (isNaN(saleTotPrice)) {
saleTotPrice = 0
}
if (isNaN(salePrice)) {
salePrice = 0
}
if (item.moduleFlg === '1') {
//용량(Kw)은 모듈플래그 1만 합산
const volKw = (item.pnowW * amount) / 1000
totVolKw += volKw
totals.totVolKw += volKw
}
// const saleTotPrice
totAmount += amount
totals.totAmount += amount
if (item.pkgMaterialFlg === '1') {
const saleTotPrice = amount * salePrice
//다시계산하기
//YJSS는 PKG제외상품들만(1) 모아서 수량 * 단가를 공급가액(supplyPrice)에 추가로 더해줌
addSupplyPrice += saleTotPrice
totals.addSupplyPrice += saleTotPrice
}
if (!item.paDispOrder) {
//paDispOrder
if (item.pkgMaterialFlg === '0') {
item.showSalePrice = '0'
item.showSaleTotPrice = '0'
@ -795,34 +766,40 @@ export default function Estimate({ params }) {
}
}
})
pkgTotPrice = estimateContextState.pkgAsp.replaceAll(',', '') * totVolKw * 1000
setEstimateContextState({
pkgTotPrice: pkgTotPrice,
})
supplyPrice = addSupplyPrice + pkgTotPrice
vatPrice = supplyPrice * 0.1
totPrice = supplyPrice + vatPrice
totals.pkgTotPrice = Number(estimateContextState.pkgAsp.replaceAll(',', '')) * totals.totVolKw * 1000
totals.supplyPrice = totals.addSupplyPrice + totals.pkgTotPrice
totals.vatPrice = totals.supplyPrice * 0.1
totals.totPrice = totals.supplyPrice + totals.vatPrice
}
if (estimateContextState.estimateType === 'YJOD') {
calculateYJODTotals(estimateContextState.itemList)
setEstimateContextState({
totAmount: totAmount,
totVolKw: totVolKw.toFixed(3),
supplyPrice: supplyPrice.toFixed(3),
vatPrice: vatPrice.toFixed(3),
totPrice: totPrice.toFixed(3),
totAmount: totals.totAmount,
totVolKw: totals.totVolKw.toFixed(3),
supplyPrice: totals.supplyPrice.toFixed(3),
vatPrice: totals.vatPrice.toFixed(3),
totPrice: totals.totPrice.toFixed(3),
})
} else if (estimateContextState.estimateType === 'YJSS') {
calculateYJSSTotals(estimateContextState.itemList)
setEstimateContextState({
pkgTotPrice: totals.pkgTotPrice,
totAmount: totals.totAmount,
totVolKw: totals.totVolKw.toFixed(3),
supplyPrice: totals.supplyPrice.toFixed(3),
vatPrice: totals.vatPrice.toFixed(3),
totPrice: totals.totPrice.toFixed(3),
})
}
setItemChangeYn(false)
} else {
estimateContextState.itemList.map((item) => {
if (estimateContextState.estimateType === 'YJSS') {
if (!item.paDispOrder) {
//paDispOrder
if (item.pkgMaterialFlg === '0') {
item.showSalePrice = '0'
item.showSaleTotPrice = '0'
}
}
estimateContextState.itemList.forEach((item) => {
if (estimateContextState.estimateType === 'YJSS' && !item.paDispOrder && item.pkgMaterialFlg === '0') {
item.showSalePrice = '0'
item.showSaleTotPrice = '0'
}
})
}
@ -1160,13 +1137,7 @@ export default function Estimate({ params }) {
{specialNoteList.length > 0 &&
specialNoteList.map((row) => {
return (
<div
key={uuidv4()}
className="special-note-check-item"
onClick={(event) => {
// settingShowContent(row.code, event)
}}
>
<div key={uuidv4()} className="special-note-check-item">
<div className="d-check-box light">
<input
type="checkbox"
@ -1181,9 +1152,7 @@ export default function Estimate({ params }) {
settingShowContent(row.code, event)
}}
/>
<label htmlFor={row.code}>
{row.codeNm} / {row.code}
</label>
<label htmlFor={row.code}>{row.codeNm}</label>
</div>
</div>
)
@ -1386,7 +1355,6 @@ export default function Estimate({ params }) {
<thead>
<tr>
<th>
{/* <div className="d-check-box pop no-text" style={{ display: 'none' }}> */}
<div className="d-check-box pop no-text">
<input type="checkbox" id="ch97" checked={isSelectedAll()} onChange={onChangeSelectAll} />
<label htmlFor="ch97"></label>

10
src/components/estimate/popup/EstimateCopyPop.jsx
View File

@ -11,7 +11,7 @@ export default function EstimateCopyPop({ planNo, setEstimateCopyPopupOpen }) {
const { getMessage } = useMessage()
const { get } = useAxios()
const { handleEstimateCopy, state } = useEstimateController(planNo)
const { handleEstimateCopy, estimateContextState } = useEstimateController(planNo)
const { session } = useContext(SessionContext)
@ -105,10 +105,10 @@ export default function EstimateCopyPop({ planNo, setEstimateCopyPopupOpen }) {
}, [planNo])
useEffect(() => {
if (state?.charger) {
setCopyReceiveUser(state.charger)
if (estimateContextState?.charger) {
setCopyReceiveUser(estimateContextState.charger)
}
}, [state.charger])
}, [estimateContextState?.charger])
//T01 1차점 자동완성 인풋때 목록 변환
const onInputChange = (key) => {
@ -282,7 +282,7 @@ export default function EstimateCopyPop({ planNo, setEstimateCopyPopupOpen }) {
type="text"
className="input-light"
required
defaultValue={state?.charger}
defaultValue={estimateContextState?.charger}
onChange={(e) => {
setCopyReceiveUser(e.target.value)
}}

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

@ -1,54 +1,44 @@
import WithDraggable from '@/components/common/draggable/WithDraggable'
import QSelectBox from '@/components/common/select/QSelectBox'
import { useEffect, useState } from 'react'
import { useEffect } from 'react'
import { useMessage } from '@/hooks/useMessage'
import { canvasState, dotLineGridSettingState, dotLineIntervalSelector } from '@/store/canvasAtom'
import { useRecoilState, useRecoilValue, useResetRecoilState, useSetRecoilState } from 'recoil'
import { canvasState } from '@/store/canvasAtom'
import { useRecoilValue } from 'recoil'
import { onlyNumberInputChange } from '@/util/input-utils'
import { settingModalGridOptionsState } from '@/store/settingAtom'
import { useAxios } from '@/hooks/useAxios'
import { useSwal } from '@/hooks/useSwal'
import { usePopup } from '@/hooks/usePopup'
import { useCanvasSetting } from '@/hooks/option/useCanvasSetting'
import { useSwal } from '@/hooks/useSwal'
const TYPE = {
DOT: 'DOT',
LINE: 'LINE',
}
const defaultDotLineGridSetting = {
INTERVAL: {
type: 2, // 1: 가로,세로 간격 수동, 2: 비율 간격
ratioInterval: 910,
verticalInterval: 910,
horizontalInterval: 910,
dimension: 1, // 치수
},
DOT: false,
LINE: false,
}
export default function DotLineGrid(props) {
// const [modalOption, setModalOption] = useRecoilState(modalState); //modal 열림닫힘 state
const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요
const [close, setClose] = useState(false)
//const interval = useRecoilValue(dotLineIntervalSelector)
const { id, setIsShow, pos = { x: 840, y: -815 }, isConfig = false } = props
const setSettingModalGridOptions = useSetRecoilState(settingModalGridOptionsState)
const canvas = useRecoilValue(canvasState)
const [dotLineGridSetting, setDotLineGridSettingState] = useRecoilState(dotLineGridSettingState)
const [currentSetting, setCurrentSetting] = useState(
JSON.stringify(dotLineGridSetting) === JSON.stringify(defaultDotLineGridSetting) ? { ...defaultDotLineGridSetting } : { ...dotLineGridSetting },
)
const resetDotLineGridSetting = useResetRecoilState(dotLineGridSettingState)
const interval = useRecoilValue(dotLineIntervalSelector)
const { getMessage } = useMessage()
const { get, post } = useAxios()
const { swalFire } = useSwal()
const { closePopup } = usePopup()
const { swalFire } = useSwal()
const {
selectOption,
setSelectOption,
SelectOptions,
currentSetting,
setCurrentSetting,
dotLineGridSettingState,
setSettingModalGridOptions,
setDotLineGridSettingState,
} = useCanvasSetting()
// 데이터를 최초 한 번만 조회
useEffect(() => {
console.log('DotLineGrid useEffect 실행')
return () => {
setSettingModalGridOptions((prev) => {
const newSettingOptions = [...prev]
@ -58,20 +48,6 @@ export default function DotLineGrid(props) {
}
}, [])
const SelectOption = [
{ id: 1, name: getMessage('modal.canvas.setting.grid.dot.line.setting.line.origin'), value: 1 },
{ id: 2, name: '1/2', value: 1 / 2 },
{ id: 3, name: '1/4', value: 1 / 4 },
{ id: 4, name: '1/10', value: 1 / 10 },
]
const [selectOption, setSelectOption] = useState(SelectOption[0])
// 데이터를 최초 한 번만 조회
useEffect(() => {
console.log('DotLineGrid useEffect 실행')
fetchGridSettings()
}, [objectNo])
const HandleClickClose = () => {
// setClose(true)
// setTimeout(() => {
@ -90,61 +66,31 @@ export default function DotLineGrid(props) {
})
}
// Canvas Grid Setting 조회 및 초기화
const fetchGridSettings = async () => {
try {
const res = await get({ url: `/api/canvas-management/canvas-grid-settings/by-object/${objectNo}` })
const patternData = {
INTERVAL: {
type: res.gridType,
horizontalInterval: res.gridHorizon * 10,
verticalInterval: res.gridVertical * 10,
ratioInterval: res.gridRatio * 10,
},
dimension: res.gridDimen,
DOT: res.dotGridDisplay,
LINE: res.lineGridDisplay,
}
const matchedOption = SelectOption.find((option) => option.value == res.gridDimen)
// dimension 값에 맞는 옵션을 선택
setSelectOption(matchedOption)
// 서버에서 받은 데이터로 상태 업데이트
setCurrentSetting(patternData)
} catch (error) {
console.error('Data fetching error:', error)
}
}
const handleSave = async () => {
if (!currentSetting.DOT && !currentSetting.LINE) {
swalFire({ text: '배치할 그리드를 설정해주세요.' })
return
}
try {
const patternData = {
objectNo,
dotGridDisplay: currentSetting.DOT,
lineGridDisplay: currentSetting.LINE,
gridType: currentSetting.INTERVAL.type,
gridHorizon: currentSetting.INTERVAL.horizontalInterval / 10,
gridVertical: currentSetting.INTERVAL.verticalInterval / 10,
gridRatio: currentSetting.INTERVAL.ratioInterval / 10,
gridDimen: currentSetting.INTERVAL.dimension,
}
// HTTP POST 요청 보내기
await post({ url: `/api/canvas-management/canvas-grid-settings`, data: patternData }).then((res) => {
swalFire({ text: getMessage(res.returnMessage) })
setDotLineGridSettingState({ ...currentSetting })
closePopup(id, isConfig)
})
} catch (error) {
swalFire({ text: getMessage(res.returnMessage), icon: 'error' })
}
setDotLineGridSettingState((prev) => {
return {
...prev,
INTERVAL: {
type: currentSetting.INTERVAL.type,
horizontalInterval: currentSetting.INTERVAL.horizontalInterval,
verticalInterval: currentSetting.INTERVAL.verticalInterval,
ratioInterval: currentSetting.INTERVAL.ratioInterval,
dimension: currentSetting.INTERVAL.dimension,
},
DOT: currentSetting.DOT,
LINE: currentSetting.LINE,
flag: true,
}
//setDotLineGridSettingState({ ...currentSetting })
})
setIsShow(false)
closePopup(id, isConfig)
}
const handleRadioChange = (e) => {
@ -198,8 +144,19 @@ export default function DotLineGrid(props) {
.filter((obj) => obj.name === 'dotGrid')
.forEach((obj) => canvas?.remove(obj))
resetDotLineGridSetting()
setSelectOption(SelectOption[0])
// resetDotLineGridSetting()
setCurrentSetting({
INTERVAL: {
type: 2, // 1: 가로,세로 간격 수동, 2: 비율 간격
ratioInterval: 910,
verticalInterval: 910,
horizontalInterval: 910,
dimension: 1, // 치수
},
DOT: false,
LINE: false,
})
setSelectOption(SelectOptions[0])
}
return (
@ -296,7 +253,7 @@ export default function DotLineGrid(props) {
<span>mm</span>
</div>
<div className="grid-select">
<QSelectBox options={SelectOption} onChange={changeDimension} value={selectOption} />
<QSelectBox options={SelectOptions} onChange={changeDimension} value={selectOption} />
</div>
</div>
</div>

8
src/components/floor-plan/modal/setting01/GridOption.jsx
View File

@ -4,12 +4,11 @@ import { settingModalGridOptionsState } from '@/store/settingAtom'
import { useMessage } from '@/hooks/useMessage'
import { adsorptionPointAddModeState } from '@/store/canvasAtom'
import { useTempGrid } from '@/hooks/useTempGrid'
import { gridColorState } from '@/store/gridAtom'
import { useColor } from 'react-color-palette'
import ColorPickerModal from '@/components/common/color-picker/ColorPickerModal'
import { usePopup } from '@/hooks/usePopup'
import { v4 as uuidv4 } from 'uuid'
import DotLineGrid from '@/components/floor-plan/modal/grid/DotLineGrid'
import { useCanvasSetting } from '@/hooks/option/useCanvasSetting'
export default function GridOption() {
const [gridOptions, setGridOptions] = useRecoilState(settingModalGridOptionsState)
@ -17,15 +16,16 @@ export default function GridOption() {
const setSettingModalGridOptions = useSetRecoilState(settingModalGridOptionsState)
const { getMessage } = useMessage()
const { tempGridMode, setTempGridMode } = useTempGrid()
const [gridColor, setGridColor] = useRecoilState(gridColorState)
const [color, setColor] = useColor(gridColor)
const [showColorPickerModal, setShowColorPickerModal] = useState(false)
const [showDotLineGridModal, setShowDotLineGridModal] = useState(false)
const { addPopup, closePopup, closePopups } = usePopup()
const [colorId, setColorId] = useState(uuidv4())
const [dotLineId, setDotLineId] = useState(uuidv4())
const { gridColor, setGridColor, color } = useCanvasSetting()
useEffect(() => {
console.log(gridColor, color)
setGridColor(color.hex)
}, [color])

4
src/components/floor-plan/modal/setting01/planSize/PlanSizeSetting.jsx
View File

@ -75,8 +75,6 @@ export default function PlanSizeSetting(props) {
className="input-origin block"
name={`originHorizon`}
value={planSizeSettingMode.originHorizon}
//onChange={(e) => setPlanSizeSettingMode({ ...planSizeSettingMode, originHorizon: Number(e.target.value), flag: false })}
//onFocus={(e) => (originHorizon.current.value = '')}
onChange={(e) => onlyNumberInputChange(e, changeInput)}
/>
</div>
@ -90,8 +88,6 @@ export default function PlanSizeSetting(props) {
className="input-origin block"
name={`originVertical`}
value={planSizeSettingMode.originVertical}
//onChange={(e) => setPlanSizeSettingMode({ ...planSizeSettingMode, originVertical: Number(e.target.value), flag: false })}
//onFocus={(e) => (originVertical.current.value = '')}
onChange={(e) => onlyNumberInputChange(e, changeInput)}
/>
</div>

18
src/hooks/common/useCommonCode.js
View File

@ -5,14 +5,28 @@ import { globalLocaleStore } from '@/store/localeAtom'
import { isObjectNotEmpty } from '@/util/common-utils'
import { useAxios } from '../useAxios'
/**
* 공통코드 관리를 위한 커스텀 훅
*
* @description
* - 공통코드를 전역 상태로 관리하고 필요한 곳에서 사용할 수 있도록 함
* - 최초 1회만 API를 호출하여 공통코드를 가져옴
* - 언어 설정에 따라 한국어/일본어 코드명을 자동으로 변환
*
* @returns {Object}
* - commonCode: 전체 공통코드 객체(recoil state)
* - findCommonCode: 특정 공통코드 그룹을 조회하는 함수
*
* @example
* const { commonCode, findCommonCode } = useCommonCode();
* const honorificCodes = findCommonCode(200800);
*/
export const useCommonCode = () => {
const [commonCode, setCommonCode] = useRecoilState(commonCodeState)
const globalLocale = useRecoilValue(globalLocaleStore)
const { promiseGet } = useAxios()
const findCommonCode = (key) => {
// const arr = commonCode[key]
// return arr.sort((a, b) => a.clPriority - b.clPriority)
const resultCodes = commonCode[key]?.map((code) => {
const result = {
clHeadCd: code.clHeadCd,

37
src/hooks/floorPlan/estimate/useEstimateController.js
View File

@ -3,7 +3,7 @@ import { useContext, useEffect, useReducer, useState } from 'react'
import { useRecoilState, useRecoilValue } from 'recoil'
import { globalLocaleStore } from '@/store/localeAtom'
import { estimateState, floorPlanObjectState } from '@/store/floorPlanObjectAtom'
import { isObjectNotEmpty, isNotEmptyArray } from '@/util/common-utils'
import { isObjectNotEmpty } from '@/util/common-utils'
import { SessionContext } from '@/app/SessionProvider'
import { useMessage } from '@/hooks/useMessage'
import { useRouter } from 'next/navigation'
@ -128,6 +128,7 @@ export const useEstimateController = (planNo) => {
const handleEstimateSubmit = async () => {
//0. 필수체크
let flag = true
let originFileFlg = false
let fileFlg = true
let itemFlg = true
if (estimateData.charger.trim().length === 0) {
@ -147,21 +148,26 @@ export const useEstimateController = (planNo) => {
//첨부파일을 첨부안했는데
//아이템 fileUploadFlg가1(첨부파일 필수)이 1개라도 있는데 후일 자료 제출(fileFlg) 체크안했으면(0) alert 저장안돼
if (estimateData?.originFiles?.length > 0) {
originFileFlg = true
}
if (flag) {
if (estimateData.fileList.length < 1) {
if (estimateData.itemList.length > 1) {
estimateData.itemList.map((row) => {
if (row.delFlg === '0') {
if (row.fileUploadFlg === '1') {
if (fileFlg) {
if (estimateData.fileFlg === '0') {
fileFlg = false
return alert(getMessage('estimate.detail.save.requiredFileUpload'))
if (!originFileFlg) {
if (estimateData.newFileList.length < 1) {
if (estimateData.itemList.length > 1) {
estimateData.itemList.map((row) => {
if (row.delFlg === '0') {
if (row.fileUploadFlg === '1') {
if (fileFlg) {
if (estimateData.fileFlg === '0') {
fileFlg = false
return alert(getMessage('estimate.detail.save.requiredFileUpload'))
}
}
}
}
}
})
})
}
}
}
}
@ -206,8 +212,8 @@ export const useEstimateController = (planNo) => {
if (flag && fileFlg && itemFlg) {
//1. 첨부파일 저장시작
const formData = new FormData()
if (isNotEmptyArray(estimateData.tempFileList) > 1) {
estimateData.tempFileList.forEach((file) => {
if (estimateData?.newFileList?.length > 0) {
estimateData.newFileList.forEach((file) => {
formData.append('files', file)
})
formData.append('objectNo', estimateData.objectNo)
@ -267,7 +273,8 @@ export const useEstimateController = (planNo) => {
}
})
estimateData.estimateOption = estimateOptions
// console.log('최종첨부파일:::', estimateData.fileList)
// console.log('새로추가첨부파일:::', estimateData.newFileList)
// console.log('기존첨부파일:::', estimateData.originFiles)
// console.log('최종아이템:::', estimateData.itemList)
// console.log('최종저장::', estimateData)
//2. 상세데이터 저장

119
src/hooks/module/useModuleBasicSetting.js
View File

@ -12,6 +12,7 @@ import { POLYGON_TYPE, BATCH_TYPE } from '@/common/common'
import * as turf from '@turf/turf'
import { EventContext } from '@/app/floor-plan/EventProvider'
import { v4 as uuidv4 } from 'uuid'
import { useMainContentsController } from '../main/useMainContentsController'
export function useModuleBasicSetting() {
const canvas = useRecoilValue(canvasState)
@ -400,7 +401,7 @@ export function useModuleBasicSetting() {
const autoModuleSetup = (placementRef) => {
const isChidori = placementRef.isChidori.current === 'true' ? true : false
const setupLocation = placementRef.setupLocation.current
const isMaxSetup = placementRef.isMaxSetup.current
const isMaxSetup = placementRef.isMaxSetup.current === 'true' ? true : false
const moduleSetupSurfaces = moduleSetupSurface //선택 설치면
@ -539,29 +540,34 @@ export function useModuleBasicSetting() {
let diffLeftEndPoint = Math.abs(totalLeftEndPoint / width)
let diffTopEndPoint = Math.abs(totalTopEndPoint / height)
let startColPoint = Math.abs(width * Math.ceil(diffLeftEndPoint) - startPoint.x1)
let tempMaxWidth = isMaxSetup ? width / 2 : width //최대배치인지 확인하려고 넣음
if (isMaxSetup) totalWidth = totalWidth * 2 //최대배치시 2배로 늘려서 반씩 검사하기위함
for (let j = 0; j < diffTopEndPoint; j++) {
bottomMargin = j === 0 ? 1 : 0
for (let i = 0; i <= totalWidth; i++) {
leftMargin = i === 0 ? 1 : 0 //숫자가 0이면 0, 1이면 1로 바꾸기
leftMargin = i === 0 ? 1.1 : 0 //숫자가 0이면 0, 1이면 1로 바꾸기
chidoriLength = 0
if (isChidori) {
chidoriLength = j % 2 === 0 ? 0 : width / 2
}
let squarePolygon
let turfCoordnates
let points
square = [
[startColPoint + width * i - chidoriLength, startPoint.y1 - height * j - bottomMargin],
[startColPoint + width * i + width - chidoriLength, startPoint.y1 - height * j - bottomMargin],
[startColPoint + width * i + width - chidoriLength, startPoint.y1 - height * j - height - bottomMargin],
[startColPoint + width * i - chidoriLength, startPoint.y1 - height * j - height - bottomMargin],
[startColPoint + width * i - chidoriLength, startPoint.y1 - height * j - bottomMargin],
[startColPoint + tempMaxWidth * i - chidoriLength, startPoint.y1 - height * j - bottomMargin],
[startColPoint + tempMaxWidth * i + width - chidoriLength, startPoint.y1 - height * j - bottomMargin],
[startColPoint + tempMaxWidth * i + width - chidoriLength, startPoint.y1 - height * j - height - bottomMargin],
[startColPoint + tempMaxWidth * i - chidoriLength, startPoint.y1 - height * j - height - bottomMargin],
[startColPoint + tempMaxWidth * i - chidoriLength, startPoint.y1 - height * j - bottomMargin],
]
let squarePolygon = turf.polygon([square])
let turfCoordnates = squarePolygon.geometry.coordinates[0].slice(0, -1)
let points = turfCoordnates.map((coord) => ({ x: coord[0], y: coord[1] }))
squarePolygon = turf.polygon([square])
turfCoordnates = squarePolygon.geometry.coordinates[0].slice(0, -1)
points = turfCoordnates.map((coord) => ({ x: coord[0], y: coord[1] }))
// if (disjointFromTrestle && isDisjoint) {
let tempModule = new QPolygon(points, { ...moduleOptions, turfPoints: squarePolygon })
canvas?.add(tempModule)
moduleSetupArray.push(tempModule)
@ -581,25 +587,26 @@ export function useModuleBasicSetting() {
let totalWidth = Math.abs(startPoint.x1 - maxRightEndPoint) / width
let startRowPoint = startPoint.y1 - height * Math.ceil(diffTopEndPoint)
for (let j = 0; j < totalHeight; j++) {
bottomMargin = j === 0 ? 1 : 0
for (let i = 0; i <= totalWidth; i++) {
leftMargin = 1
let tempMaxHeight = isMaxSetup ? height / 2 : height //최대배치인지 확인하려고 넣음
if (isMaxSetup) totalHeight = totalHeight * 2 //최대배치시 2배로 늘려서 반씩 검사
for (let i = 0; i <= totalWidth; i++) {
bottomMargin = i === 0 ? 1 : 0.1
for (let j = 0; j < totalHeight; j++) {
leftMargin = i === 0 ? 0 : 0.5 * i
chidoriLength = 0
if (isChidori) {
chidoriLength = i % 2 === 0 ? 0 : height / 2
chidoriLength = j % 2 === 0 ? 0 : height / 2
}
square = [
[startPoint.x1 + width * i + leftMargin, startRowPoint + height * j + bottomMargin - chidoriLength],
[startPoint.x1 + width * i + width + leftMargin, startRowPoint + height * j + bottomMargin - chidoriLength],
[startPoint.x1 + width * i + width + leftMargin, startRowPoint + height * j + height + bottomMargin - chidoriLength],
[startPoint.x1 + width * i + leftMargin, startRowPoint + height * j + height + bottomMargin - chidoriLength],
[startPoint.x1 + width * i + leftMargin, startRowPoint + height * j + bottomMargin - chidoriLength],
[startPoint.x1 + width * i + leftMargin, startRowPoint + tempMaxHeight * j + bottomMargin - chidoriLength],
[startPoint.x1 + width * i + width + leftMargin, startRowPoint + tempMaxHeight * j + bottomMargin - chidoriLength],
[startPoint.x1 + width * i + width + leftMargin, startRowPoint + tempMaxHeight * j + height + bottomMargin - chidoriLength],
[startPoint.x1 + width * i + leftMargin, startRowPoint + tempMaxHeight * j + height + bottomMargin - chidoriLength],
[startPoint.x1 + width * i + leftMargin, startRowPoint + tempMaxHeight * j + bottomMargin - chidoriLength],
]
console.log('square', square)
let squarePolygon = turf.polygon([square])
let turfCoordnates = squarePolygon.geometry.coordinates[0].slice(0, -1)
let points = turfCoordnates.map((coord) => ({ x: coord[0], y: coord[1] }))
@ -622,9 +629,11 @@ export function useModuleBasicSetting() {
let totalRightEndPoint = maxLeftEndPoint - maxRightEndPoint
let totalBottomEndPoint = maxBottomEndPoint - startPoint.y1
let diffLeftEndPoint = Math.abs(totalLeftEndPoint / width)
let diffRightEndPoint = Math.abs(totalRightEndPoint / width)
let diffBottomEndPoint = Math.abs(totalBottomEndPoint / height)
let diffRightEndPoint = Math.ceil(Math.abs(totalRightEndPoint / width))
let diffBottomEndPoint = Math.ceil(Math.abs(totalBottomEndPoint / height))
let startColPoint = Math.abs(width * Math.ceil(diffLeftEndPoint) - startPoint.x1)
let tempMaxWidth = isMaxSetup ? width / 2 : width //최대배치인지 확인하려고 넣음
if (isMaxSetup) diffRightEndPoint = diffRightEndPoint * 2 //최대배치시 2배로 늘려서 반씩 검사하기위함
for (let j = 0; j < diffBottomEndPoint; j++) {
for (let i = 0; i < diffRightEndPoint; i++) {
@ -633,11 +642,11 @@ export function useModuleBasicSetting() {
chidoriLength = j % 2 === 0 ? 0 : width / 2
}
square = [
[startColPoint + width * i + chidoriLength, startPoint.y1 + height * j + 1],
[startColPoint + width * i + chidoriLength, startPoint.y1 + height * j + height + 1],
[startColPoint + width * i + width + chidoriLength, startPoint.y1 + height * j + height + 1],
[startColPoint + width * i + width + chidoriLength, startPoint.y1 + height * j + 1],
[startColPoint + width * i + chidoriLength, startPoint.y1 + height * j + 1],
[startColPoint + tempMaxWidth * i + chidoriLength, startPoint.y1 + height * j + 1],
[startColPoint + tempMaxWidth * i + chidoriLength, startPoint.y1 + height * j + height + 1],
[startColPoint + tempMaxWidth * i + width + chidoriLength, startPoint.y1 + height * j + height + 1],
[startColPoint + tempMaxWidth * i + width + chidoriLength, startPoint.y1 + height * j + 1],
[startColPoint + tempMaxWidth * i + chidoriLength, startPoint.y1 + height * j + 1],
]
let squarePolygon = turf.polygon([square])
@ -662,23 +671,26 @@ export function useModuleBasicSetting() {
let diffTopEndPoint = Math.abs(totalTopEndPoint / height)
let totalHeight = Math.ceil(Math.abs(maxBottomEndPoint - maxTopEndPoint) / height)
let totalWidth = Math.abs(startPoint.x1 - maxLeftEndPoint) / width
let startRowPoint = startPoint.y1 - height * Math.ceil(diffTopEndPoint)
let startRowPoint = startPoint.y1 - height * Math.ceil(diffTopEndPoint) - 3 // -3으로 위치살짝 보정
for (let j = 0; j < totalHeight; j++) {
bottomMargin = j === 0 ? 1 : 0
for (let i = 0; i <= totalWidth; i++) {
leftMargin = 1
let tempMaxHeight = isMaxSetup ? height / 2 : height //최대배치인지 확인하려고 넣음
if (isMaxSetup) totalHeight = totalHeight * 2 //최대배치시 2배로 늘려서 반씩 검사
for (let i = 0; i <= totalWidth; i++) {
for (let j = 0; j < totalHeight; j++) {
bottomMargin = j === 0 ? 0.5 : 0.5 * j
leftMargin = i === 0 ? 0 : 0.5 * i
chidoriLength = 0
if (isChidori) {
chidoriLength = i % 2 === 0 ? 0 : height / 2
}
square = [
[startPoint.x1 - width * i - leftMargin, startRowPoint + height * j + bottomMargin + chidoriLength],
[startPoint.x1 - width * i - width - leftMargin, startRowPoint + height * j + bottomMargin + chidoriLength],
[startPoint.x1 - width * i - width - leftMargin, startRowPoint + height * j + height + bottomMargin + chidoriLength],
[startPoint.x1 - width * i - leftMargin, startRowPoint + height * j + height + bottomMargin + chidoriLength],
[startPoint.x1 - width * i - leftMargin, startRowPoint + height * j + bottomMargin + chidoriLength],
[startPoint.x1 - width * i - leftMargin, startRowPoint + tempMaxHeight * j + bottomMargin + chidoriLength],
[startPoint.x1 - width * i - width - leftMargin, startRowPoint + tempMaxHeight * j + bottomMargin + chidoriLength],
[startPoint.x1 - width * i - width - leftMargin, startRowPoint + tempMaxHeight * j + height + bottomMargin + chidoriLength],
[startPoint.x1 - width * i - leftMargin, startRowPoint + tempMaxHeight * j + height + bottomMargin + chidoriLength],
[startPoint.x1 - width * i - leftMargin, startRowPoint + tempMaxHeight * j + bottomMargin + chidoriLength],
]
let squarePolygon = turf.polygon([square])
@ -743,10 +755,9 @@ export function useModuleBasicSetting() {
if (moduleSetupSurface.flowDirection === 'north') {
downFlowSetupModule(surfaceMaxLines, width, height, moduleSetupArray, moduleSetupSurface.flowLines)
}
} else {
}
const setupedModules = moduleSetupArray.filter((module) => {
const setupedModules = moduleSetupArray.filter((module, index) => {
let disjointFromTrestle = checkModuleDisjointSurface(module.turfPoints, turfModuleSetupSurface)
let isDisjoint = checkModuleDisjointObjects(module.turfPoints, containsBatchObjects)
@ -758,11 +769,29 @@ export function useModuleBasicSetting() {
return module
}
})
console.log('setupedModules.length', setupedModules.length)
//나간애들 제외하고 설치된 애들로 겹친애들 삭제 하기
setupedModules.forEach((module, index) => {
if (isMaxSetup && index > 0) {
const isOverlap = turf.booleanOverlap(polygonToTurfPolygon(setupedModules[index - 1]), polygonToTurfPolygon(module))
console.log(isOverlap)
//겹치는지 확인
if (isOverlap) {
//겹쳐있으면 삭제
// canvas?.remove(module)
// module.set({ fill: 'rgba(72, 161, 250, 0.4)', stroke: 'black', strokeWidth: 0.1 })
canvas.renderAll()
setupedModules.splice(index, 1)
return false
}
}
})
moduleSetupSurface.set({ modules: setupedModules })
setModuleIsSetup(moduleSetupArray)
})
// console.log(calculateForApi(moduleSetupArray))
}
const calculateForApi = (moduleSetupArray) => {
@ -1185,7 +1214,7 @@ export function useModuleBasicSetting() {
y2: standardLine.y1 + charlie,
}
} else {
rtnObj = { target: idx === 0 ? 'left' : 'right', x1: pointX1, y1: pointY1, x2: pointX2, y2: pointY2 }
rtnObj = { target: index === 0 ? 'left' : 'right', x1: pointX1, y1: pointY1, x2: pointX2, y2: pointY2 }
}
rtnObjArray.push(rtnObj)
})

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

@ -1,16 +1,34 @@
import { useCallback, useEffect, useState } from 'react'
import { useRecoilState, useRecoilValue } from 'recoil'
import { adsorptionPointModeState, adsorptionRangeState, canvasState, planSizeSettingState } from '@/store/canvasAtom'
import { useRecoilState, useRecoilValue, useResetRecoilState, useSetRecoilState } from 'recoil'
import { adsorptionPointModeState, adsorptionRangeState, canvasState, planSizeSettingState, dotLineGridSettingState } from '@/store/canvasAtom'
import { globalLocaleStore } from '@/store/localeAtom'
import { useMessage } from '@/hooks/useMessage'
import { useAxios } from '@/hooks/useAxios'
import { useSwal } from '@/hooks/useSwal'
import { correntObjectNoState, corridorDimensionSelector, settingModalFirstOptionsState, settingModalSecondOptionsState } from '@/store/settingAtom'
import {
correntObjectNoState,
corridorDimensionSelector,
settingModalFirstOptionsState,
settingModalSecondOptionsState,
settingModalGridOptionsState,
} from '@/store/settingAtom'
import { POLYGON_TYPE } from '@/common/common'
import { globalFontAtom } from '@/store/fontAtom'
import { dimensionLineSettingsState } from '@/store/commonUtilsAtom'
import { gridColorState } from '@/store/gridAtom'
import { useColor } from 'react-color-palette'
let objectNo
const defaultDotLineGridSetting = {
INTERVAL: {
type: 2, // 1: 가로,세로 간격 수동, 2: 비율 간격
ratioInterval: 910,
verticalInterval: 910,
horizontalInterval: 910,
dimension: 1, // 치수
},
DOT: false,
LINE: false,
}
export function useCanvasSetting() {
const canvas = useRecoilValue(canvasState)
@ -21,7 +39,7 @@ export function useCanvasSetting() {
const [settingModalFirstOptions, setSettingModalFirstOptions] = useRecoilState(settingModalFirstOptionsState)
const [settingModalSecondOptions, setSettingModalSecondOptions] = useRecoilState(settingModalSecondOptionsState)
const { option1, option2, dimensionDisplay } = settingModalFirstOptions
const { option3, option4 } = settingModalSecondOptions
const { option4 } = settingModalSecondOptions
const corridorDimension = useRecoilValue(corridorDimensionSelector)
@ -42,6 +60,24 @@ export function useCanvasSetting() {
const [globalFont, setGlobalFont] = useRecoilState(globalFontAtom)
const [dimensionLineSettings, setDimensionLineSettings] = useRecoilState(dimensionLineSettingsState)
const setSettingModalGridOptions = useSetRecoilState(settingModalGridOptionsState)
const [dotLineGridSetting, setDotLineGridSettingState] = useRecoilState(dotLineGridSettingState)
const resetDotLineGridSetting = useResetRecoilState(dotLineGridSettingState)
const [currentSetting, setCurrentSetting] = useState(
JSON.stringify(dotLineGridSetting) === JSON.stringify(defaultDotLineGridSetting) ? { ...defaultDotLineGridSetting } : { ...dotLineGridSetting },
)
const [gridColor, setGridColor] = useRecoilState(gridColorState)
const [color, setColor] = useColor(gridColor ?? '#FF0000')
const [colorTemp, setColorTemp] = useState()
const SelectOptions = [
{ id: 1, name: getMessage('modal.canvas.setting.grid.dot.line.setting.line.origin'), value: 1 },
{ id: 2, name: '1/2', value: 1 / 2 },
{ id: 3, name: '1/4', value: 1 / 4 },
{ id: 4, name: '1/10', value: 1 / 10 },
]
const [selectOption, setSelectOption] = useState(SelectOptions[0])
useEffect(() => {
if (!canvas) {
return
@ -73,51 +109,58 @@ export function useCanvasSetting() {
}, [corridorDimension])
useEffect(() => {
console.log('useCanvasSetting useEffect 실행1', correntObjectNo)
console.log('useCanvasSetting 실행1', correntObjectNo)
}, [])
//흡착점 ON/OFF 변경 시
useEffect(() => {
console.log('useCanvasSetting useEffect 실행2', adsorptionPointMode.fontFlag, correntObjectNo)
//console.log('useCanvasSetting 실행2', adsorptionPointMode.fontFlag, correntObjectNo)
if (adsorptionPointMode.fontFlag) {
onClickOption2()
frontSettings()
fetchSettings()
}
}, [adsorptionPointMode])
// 1 과 2 변경 시
useEffect(() => {
console.log('useCanvasSetting useEffect 실행3', settingModalFirstOptions.fontFlag, settingModalSecondOptions.fontFlag, correntObjectNo)
//console.log('useCanvasSetting 실행3', settingModalFirstOptions.fontFlag, settingModalSecondOptions.fontFlag, correntObjectNo)
if (settingModalFirstOptions.fontFlag || settingModalSecondOptions.fontFlag) {
onClickOption2()
frontSettings()
fetchSettings()
}
}, [settingModalFirstOptions, settingModalSecondOptions])
// 글꼴 변경 시
useEffect(() => {
console.log('useCanvasSetting useEffect 실행4', globalFont.fontFlag, correntObjectNo)
//console.log('useCanvasSetting 실행4', globalFont.fontFlag, correntObjectNo)
if (globalFont.fontFlag) {
onClickOption2()
frontSettings()
fetchSettings()
}
}, [globalFont])
// 도명크기 변경 시
useEffect(() => {
console.log('useCanvasSetting useEffect 실행5', planSizeSettingMode.flag, correntObjectNo)
//console.log('useCanvasSetting 실행5', planSizeSettingMode.flag, correntObjectNo)
if (planSizeSettingMode.flag) {
onClickOption2()
frontSettings()
fetchSettings()
}
}, [planSizeSettingMode])
// 점/선 그리드 변경 시
useEffect(() => {
//console.log('useCanvasSetting 실행6', dotLineGridSetting.flag)
if (dotLineGridSetting.flag) {
onClickOption2()
}
}, [dotLineGridSetting])
// 그리드 색 설정 변경 시
useEffect(() => {
console.log('useCanvasSetting 실행7', colorTemp, gridColor)
//colorTemp는 변경 전.. 값이 있고 변경된 컬러와 다를 때 실행
if (colorTemp !== undefined && colorTemp !== gridColor) {
onClickOption2()
}
}, [color])
const getFonts = (itemValue) => {
if (!itemValue) return { id: 1, name: 'MS PGothic', value: 'MS PGothic' }
const data = [
@ -269,10 +312,35 @@ export function useCanvasSetting() {
//글꼴 설정 Flag
fontFlag: false,
}
console.log('fontPatternData', fontPatternData)
//조회된 글꼴 데이터 set
setGlobalFont(fontPatternData)
//점/선 그리드
const patternData = {
INTERVAL: {
type: res.gridType,
horizontalInterval: res.gridHorizon * 10,
verticalInterval: res.gridVertical * 10,
ratioInterval: res.gridRatio * 10,
dimension: res.gridDimen,
},
DOT: res.dotGridDisplay,
LINE: res.lineGridDisplay,
flag: false,
}
const matchedOption = SelectOptions.find((option) => option.value == res.gridDimen)
// dimension 값에 맞는 옵션을 선택
setSelectOption(matchedOption)
setDotLineGridSettingState(patternData)
//setCurrentSetting(patternData)
//그리드 색 설정
setGridColor(res.gridColor)
setColorTemp(res.gridColor)
} else {
//조회된 글꼴 데이터가 없는 경우
@ -299,6 +367,14 @@ export function useCanvasSetting() {
})
setGlobalFont({ ...globalFont, fontFlag: false })
//점/선 그리드
setDotLineGridSettingState({ ...defaultDotLineGridSetting, flag: false })
//setCurrentSetting({ ...defaultDotLineGridSetting })
//그리드 색 설정
setGridColor('#FF0000')
setColorTemp('#FF0000')
}
frontSettings()
} catch (error) {
@ -394,13 +470,26 @@ export function useCanvasSetting() {
originPixel: dimensionLineSettings.pixel,
originColor: dimensionLineSettings.color,
//치수선 설정
//도면크기 설정
originHorizon: planSizeSettingMode.originHorizon,
originVertical: planSizeSettingMode.originVertical,
dotGridDisplay: dotLineGridSetting.DOT,
lineGridDisplay: dotLineGridSetting.LINE,
gridType: dotLineGridSetting.INTERVAL.type,
gridHorizon: dotLineGridSetting.INTERVAL.horizontalInterval / 10,
gridVertical: dotLineGridSetting.INTERVAL.verticalInterval / 10,
gridRatio: dotLineGridSetting.INTERVAL.ratioInterval / 10,
gridDimen: dotLineGridSetting.INTERVAL.dimension,
//gridColor: gridColor.gridColor,
gridColor: gridColor,
}
console.log('patternData ', patternData)
setColorTemp(gridColor)
// HTTP POST 요청 보내기
await post({ url: `/api/canvas-management/canvas-settings`, data: patternData })
.then((res) => {
@ -408,13 +497,15 @@ export function useCanvasSetting() {
// Canvas 디스플레이 설정 시 해당 옵션 적용
frontSettings()
// 저장 후 재조회
fetchSettings()
})
.catch((error) => {
swalFire({ text: getMessage(res.returnMessage), icon: 'error' })
})
//setAdsorptionRange(item.range)
}, [settingModalFirstOptions, settingModalSecondOptions, adsorptionPointMode, globalFont, planSizeSettingMode])
}, [settingModalFirstOptions, settingModalSecondOptions, adsorptionPointMode, globalFont, planSizeSettingMode, dotLineGridSetting, color])
// Canvas 디스플레이 설정 시 해당 옵션 적용
const frontSettings = async () => {
@ -491,6 +582,7 @@ export function useCanvasSetting() {
return {
canvas,
correntObjectNo,
settingModalFirstOptions,
setSettingModalFirstOptions,
settingModalSecondOptions,
@ -516,5 +608,18 @@ export function useCanvasSetting() {
setDimensionLineSettings,
planSizeSettingMode,
setPlanSizeSettingMode,
selectOption,
setSelectOption,
SelectOptions,
currentSetting,
setCurrentSetting,
dotLineGridSettingState,
setSettingModalGridOptions,
setDotLineGridSettingState,
resetDotLineGridSetting,
gridColor,
setGridColor,
color,
setColor,
}
}

2
src/styles/_contents.scss
View File

@ -884,7 +884,7 @@
border: 1px solid #ECF0F4;
border-radius: 3px;
padding: 24px;
max-height: 350px;
height: 350px;
overflow-y: auto;
margin-bottom: 30px;
dl{

152
src/styles/spinner.scss
View File

@ -1,109 +1,45 @@
.spinner-wrap {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: #fff;
.loader {
font-size: 10px;
width: 1.2em;
height: 1.2em;
border-radius: 50%;
position: relative;
text-indent: -9999em;
animation: mulShdSpin 1.1s infinite ease;
transform: translateZ(0);
}
@keyframes mulShdSpin {
0%,
100% {
box-shadow:
0em -2.6em 0em 0em #101010,
1.8em -1.8em 0 0em rgba(16, 16, 16, 0.2),
2.5em 0em 0 0em rgba(16, 16, 16, 0.2),
1.75em 1.75em 0 0em rgba(16, 16, 16, 0.2),
0em 2.5em 0 0em rgba(16, 16, 16, 0.2),
-1.8em 1.8em 0 0em rgba(16, 16, 16, 0.2),
-2.6em 0em 0 0em rgba(16, 16, 16, 0.5),
-1.8em -1.8em 0 0em rgba(16, 16, 16, 0.7);
.spinner-wrap{
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: #fff;
.loader {
font-size: 10px;
width: 1.2em;
height: 1.2em;
border-radius: 50%;
position: relative;
text-indent: -9999em;
animation: mulShdSpin 1.1s infinite ease;
transform: translateZ(0);
}
12.5% {
box-shadow:
0em -2.6em 0em 0em rgba(16, 16, 16, 0.7),
1.8em -1.8em 0 0em #101010,
2.5em 0em 0 0em rgba(16, 16, 16, 0.2),
1.75em 1.75em 0 0em rgba(16, 16, 16, 0.2),
0em 2.5em 0 0em rgba(16, 16, 16, 0.2),
-1.8em 1.8em 0 0em rgba(16, 16, 16, 0.2),
-2.6em 0em 0 0em rgba(16, 16, 16, 0.2),
-1.8em -1.8em 0 0em rgba(16, 16, 16, 0.5);
}
25% {
box-shadow:
0em -2.6em 0em 0em rgba(16, 16, 16, 0.5),
1.8em -1.8em 0 0em rgba(16, 16, 16, 0.7),
2.5em 0em 0 0em #101010,
1.75em 1.75em 0 0em rgba(16, 16, 16, 0.2),
0em 2.5em 0 0em rgba(16, 16, 16, 0.2),
-1.8em 1.8em 0 0em rgba(16, 16, 16, 0.2),
-2.6em 0em 0 0em rgba(16, 16, 16, 0.2),
-1.8em -1.8em 0 0em rgba(16, 16, 16, 0.2);
}
37.5% {
box-shadow:
0em -2.6em 0em 0em rgba(16, 16, 16, 0.2),
1.8em -1.8em 0 0em rgba(16, 16, 16, 0.5),
2.5em 0em 0 0em rgba(16, 16, 16, 0.7),
1.75em 1.75em 0 0em #101010,
0em 2.5em 0 0em rgba(16, 16, 16, 0.2),
-1.8em 1.8em 0 0em rgba(16, 16, 16, 0.2),
-2.6em 0em 0 0em rgba(16, 16, 16, 0.2),
-1.8em -1.8em 0 0em rgba(16, 16, 16, 0.2);
}
50% {
box-shadow:
0em -2.6em 0em 0em rgba(16, 16, 16, 0.2),
1.8em -1.8em 0 0em rgba(16, 16, 16, 0.2),
2.5em 0em 0 0em rgba(16, 16, 16, 0.5),
1.75em 1.75em 0 0em rgba(16, 16, 16, 0.7),
0em 2.5em 0 0em #101010,
-1.8em 1.8em 0 0em rgba(16, 16, 16, 0.2),
-2.6em 0em 0 0em rgba(16, 16, 16, 0.2),
-1.8em -1.8em 0 0em rgba(16, 16, 16, 0.2);
}
62.5% {
box-shadow:
0em -2.6em 0em 0em rgba(16, 16, 16, 0.2),
1.8em -1.8em 0 0em rgba(16, 16, 16, 0.2),
2.5em 0em 0 0em rgba(16, 16, 16, 0.2),
1.75em 1.75em 0 0em rgba(16, 16, 16, 0.5),
0em 2.5em 0 0em rgba(16, 16, 16, 0.7),
-1.8em 1.8em 0 0em #101010,
-2.6em 0em 0 0em rgba(16, 16, 16, 0.2),
-1.8em -1.8em 0 0em rgba(16, 16, 16, 0.2);
}
75% {
box-shadow:
0em -2.6em 0em 0em rgba(16, 16, 16, 0.2),
1.8em -1.8em 0 0em rgba(16, 16, 16, 0.2),
2.5em 0em 0 0em rgba(16, 16, 16, 0.2),
1.75em 1.75em 0 0em rgba(16, 16, 16, 0.2),
0em 2.5em 0 0em rgba(16, 16, 16, 0.5),
-1.8em 1.8em 0 0em rgba(16, 16, 16, 0.7),
-2.6em 0em 0 0em #101010,
-1.8em -1.8em 0 0em rgba(16, 16, 16, 0.2);
}
87.5% {
box-shadow:
0em -2.6em 0em 0em rgba(16, 16, 16, 0.2),
1.8em -1.8em 0 0em rgba(16, 16, 16, 0.2),
2.5em 0em 0 0em rgba(16, 16, 16, 0.2),
1.75em 1.75em 0 0em rgba(16, 16, 16, 0.2),
0em 2.5em 0 0em rgba(16, 16, 16, 0.2),
-1.8em 1.8em 0 0em rgba(16, 16, 16, 0.5),
-2.6em 0em 0 0em rgba(16, 16, 16, 0.7),
-1.8em -1.8em 0 0em #101010;
}
}
}
@keyframes mulShdSpin {
0%,
100% {
box-shadow: 0em -2.6em 0em 0em #101010, 1.8em -1.8em 0 0em rgba(16, 16, 16, 0.2), 2.5em 0em 0 0em rgba(16, 16, 16, 0.2), 1.75em 1.75em 0 0em rgba(16, 16, 16, 0.2), 0em 2.5em 0 0em rgba(16, 16, 16, 0.2), -1.8em 1.8em 0 0em rgba(16, 16, 16, 0.2), -2.6em 0em 0 0em rgba(16, 16, 16, 0.5), -1.8em -1.8em 0 0em rgba(16, 16, 16, 0.7);
}
12.5% {
box-shadow: 0em -2.6em 0em 0em rgba(16, 16, 16, 0.7), 1.8em -1.8em 0 0em #101010, 2.5em 0em 0 0em rgba(16, 16, 16, 0.2), 1.75em 1.75em 0 0em rgba(16, 16, 16, 0.2), 0em 2.5em 0 0em rgba(16, 16, 16, 0.2), -1.8em 1.8em 0 0em rgba(16, 16, 16, 0.2), -2.6em 0em 0 0em rgba(16, 16, 16, 0.2), -1.8em -1.8em 0 0em rgba(16, 16, 16, 0.5);
}
25% {
box-shadow: 0em -2.6em 0em 0em rgba(16, 16, 16, 0.5), 1.8em -1.8em 0 0em rgba(16, 16, 16, 0.7), 2.5em 0em 0 0em #101010, 1.75em 1.75em 0 0em rgba(16, 16, 16, 0.2), 0em 2.5em 0 0em rgba(16, 16, 16, 0.2), -1.8em 1.8em 0 0em rgba(16, 16, 16, 0.2), -2.6em 0em 0 0em rgba(16, 16, 16, 0.2), -1.8em -1.8em 0 0em rgba(16, 16, 16, 0.2);
}
37.5% {
box-shadow: 0em -2.6em 0em 0em rgba(16, 16, 16, 0.2), 1.8em -1.8em 0 0em rgba(16, 16, 16, 0.5), 2.5em 0em 0 0em rgba(16, 16, 16, 0.7), 1.75em 1.75em 0 0em #101010, 0em 2.5em 0 0em rgba(16, 16, 16, 0.2), -1.8em 1.8em 0 0em rgba(16, 16, 16, 0.2), -2.6em 0em 0 0em rgba(16, 16, 16, 0.2), -1.8em -1.8em 0 0em rgba(16, 16, 16, 0.2);
}
50% {
box-shadow: 0em -2.6em 0em 0em rgba(16, 16, 16, 0.2), 1.8em -1.8em 0 0em rgba(16, 16, 16, 0.2), 2.5em 0em 0 0em rgba(16, 16, 16, 0.5), 1.75em 1.75em 0 0em rgba(16, 16, 16, 0.7), 0em 2.5em 0 0em #101010, -1.8em 1.8em 0 0em rgba(16, 16, 16, 0.2), -2.6em 0em 0 0em rgba(16, 16, 16, 0.2), -1.8em -1.8em 0 0em rgba(16, 16, 16, 0.2);
}
62.5% {
box-shadow: 0em -2.6em 0em 0em rgba(16, 16, 16, 0.2), 1.8em -1.8em 0 0em rgba(16, 16, 16, 0.2), 2.5em 0em 0 0em rgba(16, 16, 16, 0.2), 1.75em 1.75em 0 0em rgba(16, 16, 16, 0.5), 0em 2.5em 0 0em rgba(16, 16, 16, 0.7), -1.8em 1.8em 0 0em #101010, -2.6em 0em 0 0em rgba(16, 16, 16, 0.2), -1.8em -1.8em 0 0em rgba(16, 16, 16, 0.2);
}
75% {
box-shadow: 0em -2.6em 0em 0em rgba(16, 16, 16, 0.2), 1.8em -1.8em 0 0em rgba(16, 16, 16, 0.2), 2.5em 0em 0 0em rgba(16, 16, 16, 0.2), 1.75em 1.75em 0 0em rgba(16, 16, 16, 0.2), 0em 2.5em 0 0em rgba(16, 16, 16, 0.5), -1.8em 1.8em 0 0em rgba(16, 16, 16, 0.7), -2.6em 0em 0 0em #101010, -1.8em -1.8em 0 0em rgba(16, 16, 16, 0.2);
}
87.5% {
box-shadow: 0em -2.6em 0em 0em rgba(16, 16, 16, 0.2), 1.8em -1.8em 0 0em rgba(16, 16, 16, 0.2), 2.5em 0em 0 0em rgba(16, 16, 16, 0.2), 1.75em 1.75em 0 0em rgba(16, 16, 16, 0.2), 0em 2.5em 0 0em rgba(16, 16, 16, 0.2), -1.8em 1.8em 0 0em rgba(16, 16, 16, 0.5), -2.6em 0em 0 0em rgba(16, 16, 16, 0.7), -1.8em -1.8em 0 0em #101010;
}
}
}