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-05 15:08:50 +09:00
commit ca87397c60
12 changed files with 489 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/app/management/stuff/tempReg/page.jsx Normal file
View File

@ -0,0 +1,18 @@
import React from 'react'
import StuffSubHeader from '@/components/management/StuffSubHeader'
import '@/styles/contents.scss'
import StuffDetail from '@/components/management/StuffDetail'
export default function ManagementStuffRegPage() {
return (
<>
<StuffSubHeader type={'temp'} />
<div className="sub-content">
<div className="sub-content-inner">
<div className="sub-content-box">
<StuffDetail />
</div>
</div>
</div>
</>
)
}

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

@ -516,7 +516,7 @@ export default function Estimate({ params }) {
setEstimateContextState({
pkgAsp: pkgAsp,
pkgTotPrice: pkgTotPrice.toFixed(3),
pkgTotPrice: pkgTotPrice.toFixed(2),
})
//아이템들 중 조건에 맞는애들 뽑아서 상단 공급가액 부가세 총액 수정
setItemChangeYn(true)
@ -833,20 +833,20 @@ export default function Estimate({ params }) {
calculateYJODTotals(estimateContextState.itemList)
setEstimateContextState({
totAmount: totals.totAmount,
totVolKw: totals.totVolKw.toFixed(3),
supplyPrice: totals.supplyPrice.toFixed(3),
vatPrice: totals.vatPrice.toFixed(3),
totPrice: totals.totPrice.toFixed(3),
totVolKw: totals.totVolKw.toFixed(2),
supplyPrice: totals.supplyPrice.toFixed(2),
vatPrice: totals.vatPrice.toFixed(2),
totPrice: totals.totPrice.toFixed(2),
})
} 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),
totVolKw: totals.totVolKw.toFixed(2),
supplyPrice: totals.supplyPrice.toFixed(2),
vatPrice: totals.vatPrice.toFixed(2),
totPrice: totals.totPrice.toFixed(2),
})
}
@ -1060,16 +1060,14 @@ export default function Estimate({ params }) {
let constructSpecificationMulti = estimateContextState?.constructSpecificationMulti?.split('、')
return (
<>
<div className={`form-flex-wrap ${style}`} key={`roof${index}`}>
<div className="input-wrap mr5" style={{ width: '610px' }}>
<input type="text" className="input-light" value={roofList} readOnly />
</div>
<div className="input-wrap" style={{ width: '200px' }}>
<input type="text" className="input-light" value={constructSpecificationMulti[index]} readOnly />
</div>
<div className={`form-flex-wrap ${style}`} key={`roof_${row}`}>
<div className="input-wrap mr5" style={{ width: '610px' }}>
<input type="text" className="input-light" value={roofList} readOnly />
</div>
</>
<div className="input-wrap" style={{ width: '200px' }}>
<input type="text" className="input-light" value={constructSpecificationMulti[index]} readOnly />
</div>
</div>
)
})}
</td>
@ -1156,7 +1154,8 @@ export default function Estimate({ params }) {
<ul className="file-list">
{originFiles.map((originFile) => {
return (
<li className="file-item" key={uuidv4()}>
<li className="file-item" key={originFile.no}>
{/* <li className="file-item" key={uuidv4()}> */}
<div className="file-item-wrap">
<span
style={{ display: originFile.delFlg === '0' ? '' : 'none' }}
@ -1219,7 +1218,8 @@ export default function Estimate({ params }) {
{specialNoteList.length > 0 &&
specialNoteList.map((row) => {
return (
<div key={uuidv4()} className="special-note-check-item">
// <div key={uuidv4()} className="special-note-check-item">
<div key={row.code} className="special-note-check-item">
<div className="special-note-check-box">
<div className="d-check-box light">
<input
@ -1227,7 +1227,9 @@ export default function Estimate({ params }) {
id={row.code}
checked={!!row.check}
disabled={row.code === 'ATTR001' || row.pkgYn === '1' ? true : false}
onClick={(event) => {
// readOnly
// onClick={(event) => {
onChange={() => {
setSpecialNoteList((specialNote) =>
specialNote.map((temp) => (temp.code === row.code ? { ...temp, check: !temp.check } : temp)),
)
@ -1258,7 +1260,7 @@ export default function Estimate({ params }) {
if (isObjectNotEmpty(showcontent)) {
return (
<dl key={uuidv4()}>
<dl key={row.code}>
<dt>{showcontent.codeNm}</dt>
<dd dangerouslySetInnerHTML={{ __html: showcontent.remarks }} style={{ whiteSpace: 'pre-wrap' }}></dd>
</dl>
@ -1266,8 +1268,6 @@ export default function Estimate({ params }) {
} else {
let pushData = []
popShowSpecialNoteList.map((item) => {
//console.log('showContentCode::', showContentCode)
//console.log('unique::', uniqueData)
let option = showContentCode.split('、')
option.map((item2) => {
if (item.code === item2) {
@ -1275,12 +1275,23 @@ export default function Estimate({ params }) {
}
})
})
return pushData.map((item) => (
<dl key={uuidv4()}>
<dt>{item.codeNm}</dt>
<dd dangerouslySetInnerHTML={{ __html: item.remarks }} style={{ whiteSpace: 'pre-wrap' }}></dd>
</dl>
))
//제품에 있는 특이사항만 보여주기 제품에 특이사항이 없으면 전부
let filterData = pushData.filter((item) => uniqueData.includes(item.code))
if (filterData.length > 0) {
return filterData.map((item) => (
<dl key={item.code}>
<dt>{item.codeNm}</dt>
<dd dangerouslySetInnerHTML={{ __html: item.remarks }} style={{ whiteSpace: 'pre-wrap' }}></dd>
</dl>
))
} else {
return pushData.map((item) => (
<dl key={item.code}>
<dt>{item.codeNm}</dt>
<dd dangerouslySetInnerHTML={{ __html: item.remarks }} style={{ whiteSpace: 'pre-wrap' }}></dd>
</dl>
))
}
}
}
})}
@ -1306,7 +1317,7 @@ export default function Estimate({ params }) {
</div>
<div className="estimate-box">
<div className="estimate-tit">{getMessage('estimate.detail.sepcialEstimateProductInfo.totVolKw')}</div>
<div className="estimate-name blue">{convertNumberToPriceDecimalToFixed(estimateContextState?.totVolKw, 3)}</div>
<div className="estimate-name blue">{convertNumberToPriceDecimalToFixed(estimateContextState?.totVolKw, 2)}</div>
</div>
<div className="estimate-box">
<div className="estimate-tit">{getMessage('estimate.detail.sepcialEstimateProductInfo.supplyPrice')}</div>
@ -1352,7 +1363,7 @@ export default function Estimate({ params }) {
</div>
</td>
<th>{getMessage('estimate.detail.sepcialEstimateProductInfo.pkgWeight')}</th>
<td>{convertNumberToPriceDecimalToFixed(estimateContextState?.totVolKw, 3)}</td>
<td>{convertNumberToPriceDecimalToFixed(estimateContextState?.totVolKw, 2)}</td>
<th>{getMessage('estimate.detail.sepcialEstimateProductInfo.pkgPrice')}</th>
<td>{convertNumberToPriceDecimal(estimateContextState?.pkgTotPrice)}</td>
</tr>
@ -1367,14 +1378,19 @@ export default function Estimate({ params }) {
<div className="select-wrap">
{session?.storeLvl === '1' ? (
<select
key={uuidv4()}
// key={uuidv4()}
className="select-light"
onChange={(e) => {
onChangeStorePriceList(e.target.value)
}}
value={showPriceCd}
>
{storePriceList.length > 0 && storePriceList.map((row) => <option value={row.priceCd}>{row.priceNm}</option>)}
{storePriceList.length > 0 &&
storePriceList.map((row) => (
<option key={row.priceCd} value={row.priceCd}>
{row.priceNm}
</option>
))}
</select>
) : (
<select key={uuidv4()} className="select-light">
@ -1485,7 +1501,7 @@ export default function Estimate({ params }) {
<div className="select-wrap mr5">
<Select
// id="long-value-select1"
name="long-value-select"
name="long-value-select1"
instanceId="long-value-select1"
className="react-select-custom"
classNamePrefix="custom"

3
src/components/estimate/popup/ProductFeaturesPop.jsx
View File

@ -40,9 +40,8 @@ export default function ProductFeaturesPop({ popShowSpecialNoteList, showProduct
{showSpecialNoteList.length > 0 &&
showSpecialNoteList.map((row) => {
return (
<dl>
<dl key={row.code}>
<dt>{row.codeNm}</dt>
{/* <dd dangerouslySetInnerHTML={{ __html: row.remarks }}></dd> */}
<dd dangerouslySetInnerHTML={{ __html: row.remarks }} style={{ whiteSpace: 'pre-wrap' }}></dd>
</dl>
)

2
src/components/floor-plan/modal/basic/BasicSetting.jsx
View File

@ -93,7 +93,7 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
)}
{canvasSetting.roofSizeSet && canvasSetting.roofSizeSet === 3 && (
<>
<button className="btn-frame modal mr5" onClick={manualFlatroofModuleSetup}>
<button className="btn-frame modal mr5" onClick={() => manualFlatroofModuleSetup(placementFlatRef)}>
{getMessage('modal.module.basic.setting.passivity.placement')}
</button>
<button className="btn-frame modal act" onClick={() => autoFlatroofModuleSetup(placementFlatRef)}>

45
src/components/floor-plan/modal/basic/step/pitch/PitchPlacement.jsx
View File

@ -1,16 +1,26 @@
import { forwardRef, useState, useEffect } from 'react'
import { useMessage } from '@/hooks/useMessage'
import { useModuleBasicSetting } from '@/hooks/module/useModuleBasicSetting'
import { compasDegAtom } from '@/store/orientationAtom'
import { canvasState } from '@/store/canvasAtom'
import { useRecoilValue } from 'recoil'
import { POLYGON_TYPE } from '@/common/common'
const PitchPlacement = forwardRef((props, refs) => {
const { getMessage } = useMessage()
const [setupLocation, setSetupLocation] = useState('south')
const { makeModuleInstArea } = useModuleBasicSetting()
const compasDeg = useRecoilValue(compasDegAtom)
const canvas = useRecoilValue(canvasState)
useEffect(() => {
makeModuleInstArea()
}, [])
useEffect(() => {
handleChangeSetupLocation()
}, [setupLocation])
const moduleData = {
header: [
{ type: 'check', name: '', prop: 'check', width: 70 },
@ -35,8 +45,41 @@ const PitchPlacement = forwardRef((props, refs) => {
}
const handleSetupLocation = (e) => {
refs.setupLocation.current = e.target
setSetupLocation(e.target.value)
refs.setupLocation.current = e.target.value
}
const handleChangeSetupLocation = () => {
if (setupLocation === 'south') {
canvas.getObjects().forEach((obj) => obj.name === 'flatExcretaLine' && canvas.remove(obj))
return null
} else {
const moduleSetupSurfaces = canvas?.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE) //모듈설치면를 가져옴
moduleSetupSurfaces.forEach((surface, index) => {
console.log(`surface ${index} : `, surface)
const excretaLine = surface.lines
excretaLine.forEach((line) => {
line.set({
stroke: '#642EFB',
strokeWidth: 5,
surfaceId: surface.surfaceId,
name: 'flatExcretaLine',
})
canvas.add(line)
line.on('selected', () => {
excretaLine.forEach((obj) => obj.set({ stroke: '#642EFB', isSelected: false }))
if (!line.isSelected) {
line.set({ stroke: 'red', isSelected: true })
} else {
line.set({ stroke: '#642EFB', isSelected: false })
}
})
})
})
}
}
return (

3
src/components/header/Header.jsx
View File

@ -96,7 +96,8 @@ export default function Header(props) {
name: 'header.menus.management',
url: '',
children: [
{ id: 3, name: 'header.menus.management.newStuff', url: '/management/stuff/tempdetail', children: [] },
// { id: 3, name: 'header.menus.management.newStuff', url: '/management/stuff/tempdetail', children: [] },
{ id: 3, name: 'header.menus.management.newStuff', url: '/management/stuff/tempReg', children: [] },
{ id: 4, name: 'header.menus.management.stuffList', url: '/management/stuff', children: [] },
],
},

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

@ -75,7 +75,7 @@ export default function StuffDetail() {
installHeight: '', //설치높이
conType: '0', //계약조건(잉여 / 전량)
remarks: '', //메모
tempFlag: 'T', //임시저장(1) 저장(0)
tempFlg: 'T', //임시저장(1) 저장(0)
}
const { register, setValue, getValues, handleSubmit, resetField, control, watch } = useForm({
defaultValues: formInitValue,
@ -108,7 +108,6 @@ export default function StuffDetail() {
const [editMode, setEditMode] = useState('NEW')
const { managementState, setManagementState } = useContext(ManagementContext)
const [planGridProps, setPlanGridProps] = useState({
planGridData: [],
isPageable: false,
@ -283,6 +282,7 @@ export default function StuffDetail() {
{getMessage('stuff.detail.planGrid.btn1')}
</button>
<button
style={buttonStyle}
type="button"
className="grid-btn"
onClick={() => {
@ -516,7 +516,6 @@ export default function StuffDetail() {
firstList = res
favList = res.filter((row) => row.priority !== 'B')
otherList = res.filter((row) => row.firstAgentYn === 'N')
setSaleStoreList(firstList)
setFavoriteStoreList(firstList)
setShowSaleStoreList(firstList)
@ -547,6 +546,9 @@ export default function StuffDetail() {
form.setValue('otherSaleStoreLevel', managementState.saleStoreLevel)
form.setValue('saleStoreLevel', '1')
form.setValue('saleStoreId', managementState.firstAgentId)
setSelOptions(managementState.firstAgentId)
}
//설계의뢰No.
@ -896,6 +898,8 @@ export default function StuffDetail() {
//팝업에서 넘어온 설계의뢰 정보로 바꾸기
const setPlanReqInfo = (info) => {
// console.log('session 정보:::::::', session)
// console.log('설계의뢰에서 넘어온 정보:::::::', info)
form.setValue('planReqNo', info.planReqNo)
form.setValue('objectStatusId', info.building)
setSelectObjectStatusId(info.building)
@ -2032,8 +2036,8 @@ export default function StuffDetail() {
onChange={onSelectionChange}
getOptionLabel={(x) => x.saleStoreName}
getOptionValue={(x) => x.saleStoreId}
isClearable={managementState.tempFlg === '0' ? false : session?.storeLvl === '1' ? true : false}
isDisabled={managementState.tempFlg === '0' ? true : session?.storeLvl !== '1' ? true : false}
isClearable={managementState?.tempFlg === '0' ? false : session?.storeLvl === '1' ? true : false}
isDisabled={managementState?.tempFlg === '0' ? true : session?.storeLvl !== '1' ? true : false}
value={saleStoreList.filter(function (option) {
return option.saleStoreId === selOptions
})}
@ -2066,7 +2070,7 @@ export default function StuffDetail() {
getOptionValue={(x) => x.saleStoreId}
isClearable={false}
isDisabled={
managementState.tempFlg === '0'
managementState?.tempFlg === '0'
? true
: session?.storeLvl !== '1'
? true
@ -2151,9 +2155,13 @@ export default function StuffDetail() {
getOptionLabel={(x) => x.saleStoreName}
getOptionValue={(x) => x.saleStoreId}
isDisabled={
managementState.tempFlg === '0' ? true : session?.storeLvl === '1' && form.watch('saleStoreId') != '' ? false : true
managementState?.tempFlg === '0'
? true
: session?.storeLvl === '1' && form.watch('saleStoreId') != ''
? false
: true
}
isClearable={managementState.tempFlg === '0' ? false : session?.storeLvl === '1' ? true : false}
isClearable={managementState?.tempFlg === '0' ? false : session?.storeLvl === '1' ? true : false}
value={otherSaleStoreList.filter(function (option) {
return option.saleStoreId === otherSelOptions
})}

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

@ -564,7 +564,8 @@ export default function StuffSearchCondition() {
<h3>{getMessage('stuff.search.title')}</h3>
</div>
<div className="left-unit-box">
<Link href="/management/stuff/tempdetail" scroll={false}>
<Link href="/management/stuff/tempReg" scroll={false}>
{/* <Link href="/management/stuff/tempdetail" scroll={false}> */}
<button type="button" className="btn-origin navy mr5">
{getMessage('stuff.search.btn.register')}
</button>

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

@ -318,6 +318,10 @@ export const useEstimateController = (planNo) => {
estimateData.deleteFileList = []
}
if (estimateData.estimateType === 'YJSS') {
estimateData.pkgAsp = estimateData.pkgAsp.replaceAll(',', '')
}
console.log('최종저장::', estimateData)
//2. 상세데이터 저장
// return

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

@ -2,7 +2,7 @@ import { useRecoilState, useRecoilValue } from 'recoil'
import { canvasState } from '@/store/canvasAtom'
import { rectToPolygon, setSurfaceShapePattern } from '@/util/canvas-util'
import { roofDisplaySelector } from '@/store/settingAtom'
import offsetPolygon from '@/util/qpolygon-utils'
import offsetPolygon, { calculateAngle } from '@/util/qpolygon-utils'
import { QPolygon } from '@/components/fabric/QPolygon'
import { moduleSetupSurfaceState, moduleIsSetupState } from '@/store/canvasAtom'
import { useEvent } from '@/hooks/useEvent'
@ -11,6 +11,7 @@ import * as turf from '@turf/turf'
import { v4 as uuidv4 } from 'uuid'
import { useSwal } from '@/hooks/useSwal'
import { canvasSettingState } from '@/store/canvasAtom'
import { compasDegAtom } from '@/store/orientationAtom'
export function useModuleBasicSetting() {
const canvas = useRecoilValue(canvasState)
@ -20,6 +21,8 @@ export function useModuleBasicSetting() {
const { addTargetMouseEventListener, addCanvasMouseEventListener, initEvent } = useEvent()
const { swalFire } = useSwal()
const canvasSetting = useRecoilValue(canvasSettingState)
const compasDeg = useRecoilValue(compasDegAtom)
// const { addTargetMouseEventListener, addCanvasMouseEventListener, initEvent } = useContext(EventContext)
let selectedModuleInstSurfaceArray = []
@ -1518,7 +1521,334 @@ export function useModuleBasicSetting() {
return obj
}
const manualFlatroofModuleSetup = () => {}
const manualFlatroofModuleSetup = (placementFlatRef) => {
const moduleSetupSurfaces = canvas?.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE) //모듈설치면를 가져옴
let applyAngle
let flatBatchType = placementFlatRef.setupLocation.current.value
let excretaLinesAngle = []
if (flatBatchType === 'south') {
applyAngle = compasDeg
} else {
const excretaLines = canvas.getObjects().filter((obj) => obj.name === 'flatExcretaLine' && obj.isSelected === true)
excretaLines.forEach((obj) => {
const points1 = { x: obj.x1, y: obj.y1 }
const points2 = { x: obj.x2, y: obj.y2 }
excretaLinesAngle.push({
surfaceId: obj.surfaceId,
angle: calculateAngle(points1, points2),
})
})
}
//calculateAngle
const batchObjects = canvas
?.getObjects()
.filter(
(obj) =>
obj.name === BATCH_TYPE.OPENING ||
obj.name === BATCH_TYPE.TRIANGLE_DORMER ||
obj.name === BATCH_TYPE.PENTAGON_DORMER ||
obj.name === BATCH_TYPE.SHADOW,
) //도머s 객체
const moduleOptions = {
fill: '#BFFD9F',
stroke: 'black',
strokeWidth: 0.1,
selectable: false, // 선택 가능하게 설정
lockMovementX: true, // X 축 이동 잠금
lockMovementY: true, // Y 축 이동 잠금
lockRotation: true, // 회전 잠금
lockScalingX: true, // X 축 크기 조정 잠금
lockScalingY: true, // Y 축 크기 조정 잠금
opacity: 0.8,
parentId: moduleSetupSurface.parentId,
name: 'module',
}
function getRotatedCorners(rect) {
// 사각형의 중심점
const center = rect.getCenterPoint()
// 사각형의 원래 꼭짓점 좌표 (로컬 좌표 기준)
const halfWidth = (rect.width / 2) * rect.scaleX
const halfHeight = (rect.height / 2) * rect.scaleY
const corners = [
{ x: -halfWidth, y: -halfHeight }, // 좌상단
{ x: halfWidth, y: -halfHeight }, // 우상단
{ x: halfWidth, y: halfHeight }, // 우하단
{ x: -halfWidth, y: halfHeight }, // 좌하단
]
// 각 꼭짓점 좌표를 캔버스 좌표로 변환
const transformedCorners = corners.map((corner) => {
const point = new fabric.Point(corner.x, corner.y)
return fabric.util.transformPoint(point, rect.calcTransformMatrix())
})
return transformedCorners
}
function getSelectedExcretaLine() {}
if (moduleSetupSurfaces.length !== 0) {
let tempModule
let manualDrawModules = []
let inside = false
let turfPolygon
let flowDirection
let trestlePolygon
addCanvasMouseEventListener('mouse:move', (e) => {
//마우스 이벤트 삭제 후 재추가
const mousePoint = canvas.getPointer(e.e)
for (let i = 0; i < moduleSetupSurfaces.length; i++) {
turfPolygon = polygonToTurfPolygon(moduleSetupSurfaces[i])
trestlePolygon = moduleSetupSurfaces[i]
manualDrawModules = moduleSetupSurfaces[i].modules // 앞에서 자동으로 했을때 추가됨
flowDirection = moduleSetupSurfaces[i].flowDirection //도형의 방향
if (flatBatchType === 'excreta') {
const tempLine = excretaLinesAngle.find((obj) => obj.surfaceId === trestlePolygon.surfaceId)
if (tempLine) {
applyAngle = tempLine.angle
} else {
applyAngle = compasDeg
}
}
// const excretaLine = excretaLines.find((obj) => obj.isSelected === true && obj.surfaceId === trestlePolygon.surfaceId)
// console.log('excretaLine', excretaLine.x1, excretaLine.y1, excretaLine.x2, excretaLine.y2)
// applyAngle = calculateAngle(excretaLine.x1, excretaLine.y1, excretaLine.x2, excretaLine.y2)
// console.log('applyAngle', applyAngle)
let width = flowDirection === 'south' || flowDirection === 'north' ? 172 : 113
let height = flowDirection === 'south' || flowDirection === 'north' ? 113 : 172
const angledModule = new fabric.Rect({
width: width,
height: height,
left: mousePoint.x - width / 2,
top: mousePoint.y - height / 2,
})
const center = angledModule.getCenterPoint()
angledModule.set('angle', applyAngle)
angledModule.setPositionByOrigin(center, 'center', 'center')
const points = getRotatedCorners(angledModule) //
const turfPoints = coordToTurfPolygon(points)
if (turf.booleanWithin(turfPoints, turfPolygon)) {
let isDrawing = false
if (isDrawing) return
canvas?.remove(...canvas?.getObjects().filter((obj) => obj.name === 'tempModule')) //움직일때 일단 지워가면서 움직임
tempModule = new QPolygon(points, {
fill: 'white',
stroke: 'black',
strokeWidth: 0.3,
name: 'tempModule',
})
canvas?.add(tempModule) //움직여가면서 추가됨
canvas?.renderAll()
/**
* 스냅기능
*/
let snapDistance = 10
let cellSnapDistance = 20
const trestleLeft = moduleSetupSurfaces[i].left
const trestleTop = moduleSetupSurfaces[i].top
const trestleRight = trestleLeft + moduleSetupSurfaces[i].width * moduleSetupSurfaces[i].scaleX
const trestleBottom = trestleTop + moduleSetupSurfaces[i].height * moduleSetupSurfaces[i].scaleY
const bigCenterY = (trestleTop + trestleTop + moduleSetupSurfaces[i].height) / 2
// 작은 폴리곤의 경계 좌표 계산
const smallLeft = tempModule.left
const smallTop = tempModule.top
const smallRight = smallLeft + tempModule.width * tempModule.scaleX
const smallBottom = smallTop + tempModule.height * tempModule.scaleY
const smallCenterX = smallLeft + (tempModule.width * tempModule.scaleX) / 2
const smallCenterY = smallTop + (tempModule.height * tempModule.scaleX) / 2
if (manualDrawModules) {
manualDrawModules.forEach((cell) => {
const holdCellLeft = cell.left
const holdCellTop = cell.top
const holdCellRight = holdCellLeft + cell.width * cell.scaleX
const holdCellBottom = holdCellTop + cell.height * cell.scaleY
const holdCellCenterX = holdCellLeft + (cell.width * cell.scaleX) / 2
const holdCellCenterY = holdCellTop + (cell.height * cell.scaleY) / 2
//설치된 셀에 좌측에 스냅
if (Math.abs(smallRight - holdCellLeft) < snapDistance) {
tempModule.left = holdCellLeft - width - 0.5
}
//설치된 셀에 우측에 스냅
if (Math.abs(smallLeft - holdCellRight) < snapDistance) {
tempModule.left = holdCellRight + 0.5
}
//설치된 셀에 위쪽에 스냅
if (Math.abs(smallBottom - holdCellTop) < snapDistance) {
tempModule.top = holdCellTop - height - 0.5
}
//설치된 셀에 밑쪽에 스냅
if (Math.abs(smallTop - holdCellBottom) < snapDistance) {
tempModule.top = holdCellBottom + 0.5
}
//가운데 -> 가운데
if (Math.abs(smallCenterX - holdCellCenterX) < cellSnapDistance) {
tempModule.left = holdCellCenterX - width / 2
}
//왼쪽 -> 가운데
if (Math.abs(smallLeft - holdCellCenterX) < cellSnapDistance) {
tempModule.left = holdCellCenterX
}
// 오른쪽 -> 가운데
if (Math.abs(smallRight - holdCellCenterX) < cellSnapDistance) {
tempModule.left = holdCellCenterX - width
}
//세로 가운데 -> 가운데
if (Math.abs(smallCenterY - holdCellCenterY) < cellSnapDistance) {
tempModule.top = holdCellCenterY - height / 2
}
//위쪽 -> 가운데
if (Math.abs(smallTop - holdCellCenterY) < cellSnapDistance) {
tempModule.top = holdCellCenterY
}
//아랫쪽 -> 가운데
if (Math.abs(smallBottom - holdCellCenterY) < cellSnapDistance) {
tempModule.top = holdCellCenterY - height
}
})
}
// 위쪽 변에 스냅
if (Math.abs(smallTop - trestleTop) < snapDistance) {
tempModule.top = trestleTop
}
// 아래쪽 변에 스냅
if (Math.abs(smallTop + tempModule.height * tempModule.scaleY - (trestleTop + moduleSetupSurfaces[i].height)) < snapDistance) {
tempModule.top = trestleTop + moduleSetupSurfaces[i].height - tempModule.height * tempModule.scaleY
}
// 왼쪽변에 스냅
if (Math.abs(smallLeft - trestleLeft) < snapDistance) {
tempModule.left = trestleLeft
}
//오른쪽 변에 스냅
if (Math.abs(smallRight - trestleRight) < snapDistance) {
tempModule.left = trestleRight - tempModule.width * tempModule.scaleX
}
if (flowDirection === 'south' || flowDirection === 'north') {
// 모듈왼쪽이 세로중앙선에 붙게 스냅
if (Math.abs(smallLeft - (trestleLeft + moduleSetupSurfaces[i].width / 2)) < snapDistance) {
tempModule.left = trestleLeft + moduleSetupSurfaces[i].width / 2
}
// 모듈이 가운데가 세로중앙선에 붙게 스냅
if (Math.abs(smallCenterX - (trestleLeft + moduleSetupSurfaces[i].width / 2)) < snapDistance) {
tempModule.left = trestleLeft + moduleSetupSurfaces[i].width / 2 - (tempModule.width * tempModule.scaleX) / 2
}
// 모듈오른쪽이 세로중앙선에 붙게 스냅
if (Math.abs(smallRight - (trestleLeft + moduleSetupSurfaces[i].width / 2)) < snapDistance) {
tempModule.left = trestleLeft + moduleSetupSurfaces[i].width / 2 - tempModule.width * tempModule.scaleX
}
} else {
// 모듈이 가로중앙선에 스냅
if (Math.abs(smallTop + tempModule.height / 2 - bigCenterY) < snapDistance) {
tempModule.top = bigCenterY - tempModule.height / 2
}
if (Math.abs(smallTop - (trestleTop + moduleSetupSurfaces[i].height / 2)) < snapDistance) {
tempModule.top = trestleTop + moduleSetupSurfaces[i].height / 2
}
// 모듈 밑면이 가로중앙선에 스냅
if (Math.abs(smallBottom - (trestleTop + moduleSetupSurfaces[i].height / 2)) < snapDistance) {
tempModule.top = trestleTop + moduleSetupSurfaces[i].height / 2 - tempModule.height * tempModule.scaleY
}
}
inside = true
break
} else {
inside = false
}
}
if (!inside) {
// tempModule.set({ fill: 'red' })
canvas?.remove(...canvas?.getObjects().filter((obj) => obj.name === 'tempModule'))
canvas?.renderAll()
}
})
addCanvasMouseEventListener('mouse:up', (e) => {
let isIntersection = true
if (!inside) return
if (tempModule) {
const tempTurfModule = polygonToTurfPolygon(tempModule)
//도머 객체를 가져옴
if (batchObjects) {
batchObjects.forEach((object) => {
let dormerTurfPolygon
if (object.type === 'group') {
//도머는 그룹형태임
dormerTurfPolygon = batchObjectGroupToTurfPolygon(object)
} else {
//개구, 그림자
dormerTurfPolygon = polygonToTurfPolygon(rectToPolygon(object))
}
const intersection = turf.intersect(turf.featureCollection([dormerTurfPolygon, tempTurfModule])) //겹치는지 확인
//겹치면 안됨
if (intersection) {
alert('도머위에 모듈을 올릴 수 없습니다.')
isIntersection = false
}
})
}
if (!isIntersection) return
if (turf.booleanWithin(tempTurfModule, turfPolygon)) {
//마우스 클릭시 set으로 해당 위치에 셀을 넣음
const isOverlap = manualDrawModules.some((module) => turf.booleanOverlap(tempTurfModule, polygonToTurfPolygon(module))) //겹치는지 확인
if (!isOverlap) {
console.log('tempModule.points', tempModule.points)
let manualModule = new QPolygon(tempModule.points, { ...moduleOptions })
canvas?.add(manualModule)
manualDrawModules.push(tempModule)
} else {
alert('셀끼리 겹치면 안되죠?')
}
} else {
alert('나갔죠?!!')
}
}
})
}
}
const autoFlatroofModuleSetup = (placementFlatRef) => {}

32
src/hooks/usePlan.js
View File

@ -1,6 +1,6 @@
import { useEffect, useState } from 'react'
import { useRecoilState } from 'recoil'
import { v4 as uuidv4, validate as isValidUUID } from 'uuid'
import { v4 as uuidv4 } from 'uuid'
import { canvasState, currentCanvasPlanState, plansState, modifiedPlansState, modifiedPlanFlagState } from '@/store/canvasAtom'
import { useAxios } from '@/hooks/useAxios'
import { useMessage } from '@/hooks/useMessage'
@ -177,7 +177,7 @@ export function usePlan() {
* objectNo에 해당하는 canvas 목록을 조회
*/
const getCanvasByObjectNo = async (userId, objectNo) => {
return get({ url: `/api/canvas-management/canvas-statuses/by-object/${objectNo}/${userId}` }).then((res) =>
return await get({ url: `/api/canvas-management/canvas-statuses/by-object/${objectNo}/${userId}` }).then((res) =>
res.map((item, index) => ({
id: item.id,
userId: item.userId,
@ -234,15 +234,15 @@ export function usePlan() {
/**
* id에 해당하는 canvas 데이터를 삭제
*/
const delCanvasById = (id) => {
return promiseDel({ url: `/api/canvas-management/canvas-statuses/by-id/${id}` })
const delCanvasById = async (id) => {
return await promiseDel({ url: `/api/canvas-management/canvas-statuses/by-id/${id}` })
}
/**
* objectNo에 해당하는 canvas 데이터들을 삭제
*/
const delCanvasByObjectNo = (objectNo) => {
return promiseDel({ url: `/api/canvas-management/canvas-statuses/by-object/${objectNo}` })
const delCanvasByObjectNo = async (objectNo) => {
return await promiseDel({ url: `/api/canvas-management/canvas-statuses/by-object/${objectNo}` })
}
/**
@ -279,19 +279,19 @@ export function usePlan() {
* 새로운 plan 생성
* 현재 plan의 데이터가 있을 경우 복제 여부를 확인
*/
const handleAddPlan = (userId, objectNo) => {
const handleAddPlan = async (userId, objectNo) => {
JSON.parse(currentCanvasData()).objects.length > 0
? swalFire({
text: `Plan ${currentCanvasPlan.ordering} ` + getMessage('plan.message.confirm.copy'),
type: 'confirm',
confirmFn: () => {
postCanvasStatus(userId, objectNo, currentCanvasData())
confirmFn: async () => {
await postCanvasStatus(userId, objectNo, currentCanvasData())
},
denyFn: () => {
postCanvasStatus(userId, objectNo, '')
denyFn: async () => {
await postCanvasStatus(userId, objectNo, '')
},
})
: postCanvasStatus(userId, objectNo, '')
: await postCanvasStatus(userId, objectNo, '')
}
/**
@ -314,10 +314,10 @@ export function usePlan() {
/**
* plan 삭제
*/
const handleDeletePlan = (e, id) => {
const handleDeletePlan = async (e, id) => {
e.stopPropagation() // 이벤트 버블링 방지
delCanvasById(id)
await delCanvasById(id)
.then((res) => {
setPlans((plans) => plans.filter((plan) => plan.id !== id))
setModifiedPlans((modifiedPlans) => modifiedPlans.filter((planId) => planId !== currentCanvasPlan.id))
@ -340,8 +340,8 @@ export function usePlan() {
/**
* plan 조회
*/
const loadCanvasPlanData = (userId, objectNo, pid) => {
getCanvasByObjectNo(userId, objectNo).then((res) => {
const loadCanvasPlanData = async (userId, objectNo, pid) => {
await getCanvasByObjectNo(userId, objectNo).then((res) => {
// console.log('canvas 목록 ', res)
if (res.length > 0) {
setPlans(res)

4
src/util/common-utils.js
View File

@ -113,7 +113,7 @@ export const calculateFlowDirection = (canvasAngle) => {
return {
down: -canvasAngle,
up: 180 - canvasAngle,
left: 90 - canvasAngle,
right: -90 - canvasAngle,
left: 90 - canvasAngle < 180 ? 90 - canvasAngle : 90 - canvasAngle - 360,
right: -90 - canvasAngle < -180 ? -90 - canvasAngle + 360 : -90 - canvasAngle,
}
}