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

Merge branch 'dev' into dev-yj

Browse Source
This commit is contained in:
lelalela 2025-01-10 18:58:35 +09:00
commit 7cc69df808
16 changed files with 2438 additions and 2639 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -221,7 +221,6 @@ export default function Estimate({}) {
files.map((row) => { files.map((row) => {
fileList.push(row.data) fileList.push(row.data)
setEstimateContextState({ fileList: row.data, newFileList: fileList }) setEstimateContextState({ fileList: row.data, newFileList: fileList })
// setEstimateContextState({ fileList: row.data })
}) })
} else { } else {
setEstimateContextState({ fileList: [], newFileList: [] }) setEstimateContextState({ fileList: [], newFileList: [] })
@ -234,6 +233,9 @@ export default function Estimate({}) {
//드래그영역 비워주기 //드래그영역 비워주기
setFiles([]) setFiles([])
setOriginFiles(estimateContextState.fileList) setOriginFiles(estimateContextState.fileList)
} else {
if (estimateContextState?.resetFlag === 'Y') {
originReset()
} else { } else {
if (originFiles.length > 0) { if (originFiles.length > 0) {
if (isEmptyArray(files)) { if (isEmptyArray(files)) {
@ -246,8 +248,12 @@ export default function Estimate({}) {
} }
} }
} }
}
}, [estimateContextState?.fileList]) }, [estimateContextState?.fileList])
const originReset = () => {
setOriginFiles([])
}
// 삭제누른 첨부파일 복원 // 삭제누른 첨부파일 복원
const returnOriginFile = (no) => { const returnOriginFile = (no) => {
originFiles.map((file) => { originFiles.map((file) => {
@ -338,19 +344,6 @@ export default function Estimate({}) {
//프라이싱 했을때 priceCd setEstimateContextState //프라이싱 했을때 priceCd setEstimateContextState
//화면에 보여지는 값은 showPriceCd로 관리 //화면에 보여지는 값은 showPriceCd로 관리
setShowPriceCd(priceCd) setShowPriceCd(priceCd)
// return
// const param = {
// saleStoreId: session.storeId,
// sapSalesStoreCd: session.custCd,
// docTpCd: priceCd,
// }
// const apiUrl = `/api/estimate/price/store-price-list?${queryStringFormatter(param)}`
// get({ url: apiUrl }).then((res) => {
// if (isNotEmptyArray(res?.data)) {
// setStorePriceList(res.data)
// }
// })
} }
const makeUniqueSpecialNoteCd = (itemList) => { const makeUniqueSpecialNoteCd = (itemList) => {
@ -648,6 +641,7 @@ export default function Estimate({}) {
updates.openFlg = res.openFlg updates.openFlg = res.openFlg
if (estimateContextState.estimateType === 'YJSS') { if (estimateContextState.estimateType === 'YJSS') {
// console.log('YJSS:::,', res.pkgMaterialFlg)
if (res.pkgMaterialFlg === '0') { if (res.pkgMaterialFlg === '0') {
updates.showSalePrice = '0' updates.showSalePrice = '0'
updates.showSaleTotPrice = '0' updates.showSaleTotPrice = '0'
@ -662,6 +656,7 @@ export default function Estimate({}) {
//104671 //104671
let bomList = res.itemBomList let bomList = res.itemBomList
// console.log('updates::', updates)
updateList = estimateContextState.itemList.map((item) => { updateList = estimateContextState.itemList.map((item) => {
if (item.dispOrder === dispOrder) { if (item.dispOrder === dispOrder) {
if (item?.addFlg) { if (item?.addFlg) {
@ -816,6 +811,7 @@ export default function Estimate({}) {
} }
const calculateYJSSTotals = (itemList) => { const calculateYJSSTotals = (itemList) => {
// console.log(':::itemList::', itemList)
itemList.sort((a, b) => a.dispOrder - b.dispOrder) itemList.sort((a, b) => a.dispOrder - b.dispOrder)
makeUniqueSpecialNoteCd(itemList) makeUniqueSpecialNoteCd(itemList)
itemList.forEach((item) => { itemList.forEach((item) => {
@ -926,6 +922,10 @@ export default function Estimate({}) {
setEstimateContextState({ remarks: e.target.value }) setEstimateContextState({ remarks: e.target.value })
} }
useEffect(() => {
// console.log('리셋여부::', estimateContextState.resetFlag)
}, [estimateContextState.resetFlag])
return ( return (
<div className="sub-content estimate"> <div className="sub-content estimate">
<div className="sub-content-inner"> <div className="sub-content-inner">

17
src/components/floor-plan/CanvasMenu.jsx
View File

@ -63,7 +63,7 @@ export default function CanvasMenu(props) {
const { handleZoomClear, handleZoom } = useCanvasEvent() const { handleZoomClear, handleZoom } = useCanvasEvent()
const { handleMenu } = useMenu() const { handleMenu } = useMenu()
const { handleEstimateSubmit } = useEstimateController() const { handleEstimateSubmit, fetchSetting } = useEstimateController()
const estimateRecoilState = useRecoilValue(estimateState) const estimateRecoilState = useRecoilValue(estimateState)
const [estimatePopupOpen, setEstimatePopupOpen] = useState(false) const [estimatePopupOpen, setEstimatePopupOpen] = useState(false)
const [estimateCopyPopupOpen, setEstimateCopyPopupOpen] = useState(false) const [estimateCopyPopupOpen, setEstimateCopyPopupOpen] = useState(false)
@ -252,16 +252,21 @@ export default function CanvasMenu(props) {
// 견적서 초기화 버튼 // 견적서 초기화 버튼
const handleEstimateReset = () => { const handleEstimateReset = () => {
return alert('개발전입니다;;;')
// console.log('estimateRecoilState::', estimateRecoilState)
//objectNo, planNo
swalFire({ swalFire({
//저장된 견적서 정보가 초기화되고, 도면정보가 반영됩니다. 정말로 초기화 하시겠습니까? //저장된 견적서 정보가 초기화되고, 도면정보가 반영됩니다. 정말로 초기화 하시겠습니까?
//물건정보 //물건정보
text: getMessage('estimate.detail.reset.confirmMsg'), text: getMessage('estimate.detail.reset.confirmMsg'),
type: 'confirm', type: 'confirm',
confirmFn: () => { confirmFn: async () => {
console.log('내용초기화 및 변경일시 갱신') const params = {
objectNo: objectNo,
planNo: pid,
userId: sessionState.userId,
}
//디테일 호출
await promisePost({ url: '/api/estimate/reset-estimate', data: params }).then((res) => {
fetchSetting(objectNo, pid, 'R')
})
}, },
denyFn: () => { denyFn: () => {
console.log('초기화하지 않음. 변경일시 갱신안함') console.log('초기화하지 않음. 변경일시 갱신안함')

142
src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx
View File

@ -1,23 +1,106 @@
import WithDraggable from '@/components/common/draggable/WithDraggable' import WithDraggable from '@/components/common/draggable/WithDraggable'
import { useState } from 'react' import { useState, useEffect, useContext } from 'react'
import PowerConditionalSelect from '@/components/floor-plan/modal/circuitTrestle/step/PowerConditionalSelect' import PowerConditionalSelect from '@/components/floor-plan/modal/circuitTrestle/step/PowerConditionalSelect'
import CircuitAllocation from '@/components/floor-plan/modal/circuitTrestle/step/CircuitAllocation' import CircuitAllocation from '@/components/floor-plan/modal/circuitTrestle/step/CircuitAllocation'
import StepUp from '@/components/floor-plan/modal/circuitTrestle/step/StepUp' import StepUp from '@/components/floor-plan/modal/circuitTrestle/step/StepUp'
import { useMessage } from '@/hooks/useMessage' import { useMessage } from '@/hooks/useMessage'
import { usePopup } from '@/hooks/usePopup' import { usePopup } from '@/hooks/usePopup'
import PassivityCircuitAllocation from './step/type/PassivityCircuitAllocation'
import { useAxios } from '@/hooks/useAxios'
import { useMasterController } from '@/hooks/common/useMasterController'
import { get } from 'react-hook-form'
import { correntObjectNoState } from '@/store/settingAtom'
import { useRecoilValue } from 'recoil'
import { GlobalDataContext } from '@/app/GlobalDataProvider'
const ALLOCATION_TYPE = {
AUTO: 'auto',
PASSIVITY: 'passivity',
}
export default function CircuitTrestleSetting({ id }) { export default function CircuitTrestleSetting({ id }) {
const { getMessage } = useMessage() const { getMessage } = useMessage()
const { closePopup } = usePopup() const { closePopup } = usePopup()
// 탭 번호 1: 파워 컨디셔너 선택(+수동 설정)
// 탭 번호 2: 회로 할당
const [tabNum, setTabNum] = useState(1) const [tabNum, setTabNum] = useState(1)
const [allocationType, setAllocationType] = useState(ALLOCATION_TYPE.AUTO)
const [makers, setMakers] = useState([])
const [series, setSeries] = useState([])
const [models, setModels] = useState([])
const [selectedMaker, setSelectedMaker] = useState(null)
const [selectedModels, setSelectedModels] = useState(null)
const [selectedSeries, setSelectedSeries] = useState(null)
const correntObjectNo = useRecoilValue(correntObjectNoState)
const { getPcsMakerList } = useMasterController()
const { managementState, setManagementState, managementStateLoaded } = useContext(GlobalDataContext)
const apply = () => {
closePopup(id)
}
useEffect(() => {
getPcsMakerList().then((res) => {
setMakers(res.data)
})
if (!managementState) {
console.log('🚀 ~ useEffect ~ managementState:', managementState)
setManagementState(managementStateLoaded)
}
console.log('🚀 ~ useEffect ~ managementState:', managementState)
// promiseGet({ url: `/api/object/${correntObjectNo}/detail` }).then((res) => {
// console.log('🚀 ~ useEffect ~ /api/object/${correntObjectNo}/detail:', res)
// // coldRegionFlg-한랭지사양, conType// 계약조건(잉여~,전량)
// })
}, [])
useEffect(() => {
if (selectedMaker) {
getPcsMakerList(selectedMaker).then((res) => {
const series = res.data.map((series) => {
return { ...series, selected: false }
})
setSeries(series)
})
}
}, [selectedMaker])
useEffect(() => {
console.log('🚀 ~ CircuitTrestleSetting ~ series:', series)
const selectedSeries = series.filter((s) => s.selectd).map((s) => s.pcsSerCd)
if (selectedSeries.length > 0) {
getPcsMakerList(selectedSeries).then((res) => {
setModels(res.data)
})
}
}, [series])
// 회로 할당 유형
const [circuitAllocationType, setCircuitAllocationType] = useState(1) const [circuitAllocationType, setCircuitAllocationType] = useState(1)
const powerConditionalSelectProps = {
tabNum,
setTabNum,
makers,
selectedMaker,
setSelectedMaker,
series,
setSeries,
selectedSeries,
setSelectedSeries,
models,
setModels,
selectedModels,
setSelectedModels,
managementState,
}
const circuitProps = { const circuitProps = {
tabNum,
setTabNum,
circuitAllocationType, circuitAllocationType,
setCircuitAllocationType, setCircuitAllocationType,
} }
return ( return (
<WithDraggable isShow={true} pos={{ x: 50, y: 230 }}> <WithDraggable isShow={true} pos={{ x: 50, y: 230 }}>
<div className={`modal-pop-wrap lx-2`}> <div className={`modal-pop-wrap l-2`}>
<div className="modal-head"> <div className="modal-head">
<h1 className="title">{getMessage('modal.circuit.trestle.setting')} </h1> <h1 className="title">{getMessage('modal.circuit.trestle.setting')} </h1>
<button className="modal-close" onClick={() => closePopup(id)}> <button className="modal-close" onClick={() => closePopup(id)}>
@ -26,36 +109,45 @@ export default function CircuitTrestleSetting({ id }) {
</div> </div>
<div className="modal-body"> <div className="modal-body">
<div className="roof-module-tab"> <div className="roof-module-tab">
<div className={`module-tab-bx ${tabNum === 1 || tabNum === 2 || tabNum === 3 ? 'act' : ''}`}> <div className={`module-tab-bx act`}>{getMessage('modal.circuit.trestle.setting.power.conditional.select')}</div>
{getMessage('modal.circuit.trestle.setting.power.conditional.select')} <span className={`tab-arr ${tabNum === 2 ? 'act' : ''}`}></span>
<div className={`module-tab-bx ${tabNum === 2 ? 'act' : ''}`}>
{getMessage('modal.circuit.trestle.setting.circuit.allocation')}({getMessage('modal.circuit.trestle.setting.step.up.allocation')})
</div> </div>
<span className={`tab-arr ${tabNum === 2 || tabNum === 3 ? 'act' : ''}`}></span>
<div className={`module-tab-bx ${tabNum === 2 || tabNum === 3 ? 'act' : ''}`}>
{getMessage('modal.circuit.trestle.setting.circuit.allocation')}
</div> </div>
<span className={`tab-arr ${tabNum === 3 ? 'act' : ''}`}></span> {tabNum === 1 && allocationType === ALLOCATION_TYPE.AUTO && <PowerConditionalSelect {...powerConditionalSelectProps} />}
<div className={`module-tab-bx ${tabNum === 3 ? 'act' : ''}`}>{getMessage('modal.circuit.trestle.setting.step.up.allocation')}</div> {tabNum === 1 && allocationType === ALLOCATION_TYPE.PASSIVITY && <PassivityCircuitAllocation {...powerConditionalSelectProps} />}
</div> {tabNum === 2 && <StepUp />}
{tabNum === 1 && <PowerConditionalSelect />} {tabNum === 1 && allocationType === ALLOCATION_TYPE.AUTO && (
{tabNum === 2 && <CircuitAllocation {...circuitProps} />}
{tabNum === 3 && <StepUp />}
<div className="grid-btn-wrap"> <div className="grid-btn-wrap">
{tabNum !== 1 && ( <button className="btn-frame modal mr5" onClick={() => setTabNum(2)}>
<button className="btn-frame modal mr5" onClick={() => setTabNum(tabNum - 1)}> {getMessage('modal.circuit.trestle.setting.circuit.allocation.auto')}
</button>
<button className="btn-frame modal act" onClick={() => setAllocationType(ALLOCATION_TYPE.PASSIVITY)}>
{getMessage('modal.circuit.trestle.setting.circuit.allocation.passivity')}
</button>
</div>
)}
{tabNum === 1 && allocationType === ALLOCATION_TYPE.PASSIVITY && (
<div className="grid-btn-wrap">
<button className="btn-frame modal mr5" onClick={() => setAllocationType(ALLOCATION_TYPE.AUTO)}>
{getMessage('modal.common.prev')} {getMessage('modal.common.prev')}
</button> </button>
)} <button className="btn-frame modal act" onClick={() => setTabNum(2)}>
{tabNum !== 3 && ( {getMessage('modal.circuit.trestle.setting.circuit.allocation')}({getMessage('modal.circuit.trestle.setting.step.up.allocation')})
<button className="btn-frame modal act" onClick={() => setTabNum(tabNum + 1)}>
Next
</button> </button>
)}
{tabNum === 3 && (
<button className="btn-frame modal act">
{`${getMessage('modal.common.save')} (${getMessage('modal.circuit.trestle.setting.alloc.trestle')})`}
</button>
)}
</div> </div>
)}
{tabNum === 2 && (
<div className="grid-btn-wrap">
<button className="btn-frame modal mr5" onClick={() => setTabNum(1)}>
{getMessage('modal.common.prev')}
</button>
<button className="btn-frame modal act" onClick={() => apply()}>
{getMessage('modal.common.save')}({getMessage('modal.circuit.trestle.setting.circuit.allocation')})
</button>
</div>
)}
</div> </div>
</div> </div>
</WithDraggable> </WithDraggable>

110
src/components/floor-plan/modal/circuitTrestle/step/PowerConditionalSelect.jsx
View File

@ -1,15 +1,31 @@
import QSelectBox from '@/components/common/select/QSelectBox' import QSelectBox from '@/components/common/select/QSelectBox'
import { useMessage } from '@/hooks/useMessage' import { useMessage } from '@/hooks/useMessage'
import { globalLocaleStore } from '@/store/localeAtom'
import { useState } from 'react' import { useState } from 'react'
import { useRecoilValue } from 'recoil'
const SelectOption01 = [{ name: '0' }, { name: '0' }, { name: '0' }, { name: '0' }] const SelectOption01 = [{ name: '0' }, { name: '0' }, { name: '0' }, { name: '0' }]
export default function PowerConditionalSelect({ setTabNum }) { export default function PowerConditionalSelect(props) {
const {
makers,
selectedMaker,
setSelectedMaker,
series,
setSeries,
selectedSeries,
setSelectedSeries,
models,
selectedModels,
tabNum,
setTabNum,
managementState,
} = props
const { getMessage } = useMessage() const { getMessage } = useMessage()
const [selectedRowIndex, setSelectedRowIndex] = useState(null) const [selectedRowIndex, setSelectedRowIndex] = useState(null)
const [powerConditions, setPowerConditions] = useState([]) const [powerConditions, setPowerConditions] = useState([])
const seriesData = { const globalLocale = useRecoilValue(globalLocaleStore)
header: [ const modelHeader = [
{ name: getMessage('명칭'), width: '15%', prop: 'name', type: 'color-box' }, { name: getMessage('명칭'), width: '15%', prop: 'name', type: 'color-box' },
{ {
name: `${getMessage('modal.circuit.trestle.setting.power.conditional.select.rated.output')} (kW)`, name: `${getMessage('modal.circuit.trestle.setting.power.conditional.select.rated.output')} (kW)`,
@ -36,54 +52,40 @@ export default function PowerConditionalSelect({ setTabNum }) {
width: '10%', width: '10%',
prop: 'outputCurrent', prop: 'outputCurrent',
}, },
], ]
rows: [ const onCheckSeries = (series) => {
{ setSeries((prev) => prev.map((s) => ({ ...s, selected: s.pcsSerCd === series.pcsSerCd ? !s.selected : s.selected })))
name: { name: 'PCSオプションマスター', color: '#AA6768' },
ratedOutput: { name: '2' },
circuitAmount: { name: '2' },
maxConnection: { name: '-' },
maxOverload: { name: '-' },
outputCurrent: { name: '-' },
},
{
name: { name: 'HQJP-KA40-5', color: '#AA6768' },
ratedOutput: { name: '2' },
circuitAmount: { name: '2' },
maxConnection: { name: '-' },
maxOverload: { name: '-' },
outputCurrent: { name: '-' },
},
{
name: { name: 'Re.RISE-G3 440', color: '#AA6768' },
ratedOutput: { name: '2' },
circuitAmount: { name: '2' },
maxConnection: { name: '-' },
maxOverload: { name: '-' },
outputCurrent: { name: '-' },
},
],
} }
return ( return (
<> <>
<div className="outline-form mb15"> <div className="outline-form mb15">
<span className="mr10">分類 (余剰)</span> <span className="mr10">
{getMessage('common.type')} ({getMessage(managementState?.conType === '0' ? 'stuff.detail.conType0' : 'stuff.detail.conType1')})
</span>
<div className="grid-select mr10"> <div className="grid-select mr10">
<QSelectBox title={'HQJPシリーズ'} option={SelectOption01} /> <QSelectBox
title={'PCS Maker'}
options={makers}
showKey={globalLocale === 'ko' ? 'pcsMkrNm' : 'pcsMkrNmJp'}
sourceKey="pcsMkrCd"
targetKey="pcsMkrCd"
value={selectedMaker}
onChange={(option) => setSelectedMaker(option)}
/>
</div> </div>
<span className="thin">寒冷地仕様</span> {managementState?.conType === '1' && (
<span className="thin">{getMessage('modal.circuit.trestle.setting.power.conditional.select.cold.region')}</span>
)}
</div> </div>
<div className="module-table-box mb10"> <div className="module-table-box mb10">
<div className="module-table-inner"> <div className="module-table-inner">
<div className="circuit-check-inner"> <div className="circuit-check-inner overflow">
<div className="d-check-box pop mb15 sel"> {series?.map((series, index) => (
<input type="checkbox" id="ch01" />
<label htmlFor="ch01">屋内PCS（HQJP-KA-5シリーズ）</label>
</div>
<div className="d-check-box pop sel"> <div className="d-check-box pop sel">
<input type="checkbox" id="ch02" /> <input type="checkbox" id={`"ch0"${index}`} onClick={() => onCheckSeries(series)} />
<label htmlFor="ch02">屋外マルチPCS（HQJP-RA5シリーズ）</label> <label htmlFor={`"ch0"${index}`}>{globalLocale === 'ko' ? series.pcsSerNm : series.pcsSerNmJp}</label>
</div> </div>
))}
</div> </div>
</div> </div>
</div> </div>
@ -94,7 +96,7 @@ export default function PowerConditionalSelect({ setTabNum }) {
<table> <table>
<thead> <thead>
<tr> <tr>
{seriesData.header.map((header) => ( {modelHeader.map((header) => (
<th key={header.prop} style={{ width: header.width }}> <th key={header.prop} style={{ width: header.width }}>
{header.name} {header.name}
</th> </th>
@ -102,10 +104,12 @@ export default function PowerConditionalSelect({ setTabNum }) {
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{seriesData.rows.map((row, index) => ( {models
?.filter((model) => model.series === selectedSeries?.code)
.map((row, index) => (
<tr key={index} onClick={() => setSelectedRowIndex(index)} className={index === selectedRowIndex ? 'on' : ''}> <tr key={index} onClick={() => setSelectedRowIndex(index)} className={index === selectedRowIndex ? 'on' : ''}>
{seriesData.header.map((header) => ( {modelHeader.map((header) => (
<td>{row[header.prop].name}</td> <td>{row[header.prop]}</td>
))} ))}
</tr> </tr>
))} ))}
@ -117,15 +121,11 @@ export default function PowerConditionalSelect({ setTabNum }) {
<button className="btn-frame self mr5">{getMessage('modal.common.add')}</button> <button className="btn-frame self mr5">{getMessage('modal.common.add')}</button>
</div> </div>
<div className="circuit-data-form"> <div className="circuit-data-form">
{selectedModels?.map((model) => (
<span className="normal-font"> <span className="normal-font">
HQJP-KA40-5 <button className="del"></button> {model.name} <button className="del"></button>
</span>
<span className="normal-font">
HQJP-KA40-5 <button className="del"></button>
</span>
<span className="normal-font">
HQJP-KA40-5 <button className="del"></button>
</span> </span>
))}
</div> </div>
</div> </div>
</div> </div>
@ -141,6 +141,14 @@ export default function PowerConditionalSelect({ setTabNum }) {
</label> </label>
</div> </div>
</div> </div>
{/* <div className="grid-btn-wrap">
<button className="btn-frame modal mr5" onClick={() => setTabNum(2)}>
{getMessage('modal.circuit.trestle.setting.circuit.allocation.auto')}
</button>
<button className="btn-frame modal act" onClick={() => setTabNum(tabNum + 1)}>
{getMessage('modal.circuit.trestle.setting.circuit.allocation.passivity')}
</button>
</div> */}
</> </>
) )
} }

345
src/components/floor-plan/modal/circuitTrestle/step/StepUp.jsx
View File

@ -1,20 +1,24 @@
import QSelectBox from '@/components/common/select/QSelectBox' import QSelectBox from '@/components/common/select/QSelectBox'
import { useMessage } from '@/hooks/useMessage' import { useMessage } from '@/hooks/useMessage'
import { useState } from 'react'
const SelectOption01 = [{ name: '0' }, { name: '0' }, { name: '0' }, { name: '0' }] const SelectOption01 = [{ name: '0' }, { name: '0' }, { name: '0' }, { name: '0' }]
export default function StepUp({}) { export default function StepUp({}) {
const { getMessage } = useMessage() const { getMessage } = useMessage()
const [moduleTab, setModuleTab] = useState(1)
const [arrayLength, setArrayLength] = useState(3) //module-table-inner의 반복 개수
return ( return (
<> <>
<div className="properties-setting-wrap outer"> <div className="properties-setting-wrap outer">
<div className="setting-tit">{getMessage('modal.circuit.trestle.setting.step.up.allocation')}</div>
<div className="circuit-overflow"> <div className="circuit-overflow">
<div className="module-table-box mb10"> {/* 3개일때 className = by-max */}
<div className="module-table-inner"> <div className={`module-table-box ${arrayLength === 3 ? 'by-max' : ''}`}>
{Array.from({ length: arrayLength }).map((_, idx) => (
<div key={idx} className="module-table-inner">
<div className="mb-box"> <div className="mb-box">
<div className="circuit-table-tit">HQJP-KA55-5</div> <div className="circuit-table-tit">HQJP-KA55-5</div>
<div className="roof-module-table overflow-y"> <div className="roof-module-table overflow-y min">
<table> <table>
<thead> <thead>
<tr> <tr>
@ -23,6 +27,10 @@ export default function StepUp({}) {
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr className="on">
<td className="al-r">10</td>
<td className="al-r">0</td>
</tr>
<tr> <tr>
<td className="al-r">10</td> <td className="al-r">10</td>
<td className="al-r">0</td> <td className="al-r">0</td>
@ -47,14 +55,22 @@ export default function StepUp({}) {
</table> </table>
</div> </div>
</div> </div>
<div className="module-box-tab mb10">
<button className={`module-btn ${moduleTab === 1 ? 'act' : ''}`} onClick={() => setModuleTab(1)}>
{getMessage('modal.circuit.trestle.setting.step.up.allocation.connected')}
</button>
<button className={`module-btn ${moduleTab === 2 ? 'act' : ''}`} onClick={() => setModuleTab(2)}>
{getMessage('modal.circuit.trestle.setting.step.up.allocation.option')}
</button>
</div>
<div className="circuit-table-flx-wrap"> <div className="circuit-table-flx-wrap">
{moduleTab === 1 && (
<div className="circuit-table-flx-box"> <div className="circuit-table-flx-box">
<div className="bold-font mb10">{getMessage('modal.circuit.trestle.setting.step.up.allocation.connected')}</div> <div className="roof-module-table min mb10">
<div className="roof-module-table mb10">
<table> <table>
<thead> <thead>
<tr> <tr>
<th style={{ width: '140px' }}>{getMessage('modal.circuit.trestle.setting.power.conditional.select.name')}</th> <th>{getMessage('modal.circuit.trestle.setting.power.conditional.select.name')}</th>
<th>{getMessage('modal.circuit.trestle.setting.power.conditional.select.circuit.amount')}</th> <th>{getMessage('modal.circuit.trestle.setting.power.conditional.select.circuit.amount')}</th>
<th>{getMessage('modal.circuit.trestle.setting.step.up.allocation.circuit.amount')}</th> <th>{getMessage('modal.circuit.trestle.setting.step.up.allocation.circuit.amount')}</th>
</tr> </tr>
@ -65,160 +81,14 @@ export default function StepUp({}) {
<td className="al-r">4</td> <td className="al-r">4</td>
<td className="al-r">0</td> <td className="al-r">0</td>
</tr> </tr>
<tr>
<td className="al-c">KTN-CBD4C</td>
<td className="al-r">4</td>
<td className="al-r">0</td>
</tr>
<tr>
<td className="al-c">KTN-CBD4C</td>
<td className="al-r">4</td>
<td className="al-r">0</td>
</tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<div className="bottom-wrap">
<div className="circuit-right-wrap mb10">
<button className="btn-frame self mr5">{getMessage('modal.common.add')}</button>
</div>
<div className="circuit-data-form">
<span className="normal-font">
HQJP-KA40-5<button className="del"></button>
</span>
</div>
</div>
</div> </div>
)}
{moduleTab === 2 && (
<div className="circuit-table-flx-box"> <div className="circuit-table-flx-box">
<div className="bold-font mb10">{getMessage('modal.circuit.trestle.setting.step.up.allocation.option')}</div> <div className="roof-module-table min mb10">
<div className="roof-module-table mb10">
<table>
<thead>
<tr>
<th>{getMessage('modal.circuit.trestle.setting.power.conditional.select.name')}</th>
<th>{getMessage('modal.circuit.trestle.setting.step.up.allocation.circuit.amount')}</th>
</tr>
</thead>
<tbody>
<tr>
<td className="al-c">-</td>
<td className="al-c">-</td>
</tr>
<tr>
<td className="al-c">-</td>
<td className="al-c">-</td>
</tr>
</tbody>
</table>
</div>
<div className="bottom-wrap">
<div className="circuit-right-wrap mb10">
<button className="btn-frame self mr5">{getMessage('modal.common.add')}</button>
</div>
<div className="circuit-data-form">
<span className="normal-font">
HQJP-KA40-5<button className="del"></button>
</span>
</div>
</div>
</div>
</div>
<div className="circuit-count-input">
<span className="normal-font">{getMessage('modal.module.basic.setting.module.cotton.classification')}</span>
<div className="input-grid mr5" style={{ width: '40px' }}>
<input type="text" className="input-origin block" />
</div>
<span className="normal-font">回路</span>
<span className="normal-font">(二重昇圧回路数</span>
<div className="input-grid mr5" style={{ width: '40px' }}>
<input type="text" className="input-origin block" />
</div>
<span className="normal-font">回路)</span>
</div>
</div>
</div>
<div className="module-table-box mb10">
<div className="module-table-inner">
<div className="mb-box">
<div className="circuit-table-tit">HQJP-KA55-5</div>
<div className="roof-module-table overflow-y">
<table>
<thead>
<tr>
<th>シリアル枚数</th>
<th>総回路数</th>
</tr>
</thead>
<tbody>
<tr>
<td className="al-r">10</td>
<td className="al-r">0</td>
</tr>
<tr>
<td className="al-r">10</td>
<td className="al-r">0</td>
</tr>
<tr>
<td className="al-r">10</td>
<td className="al-r">0</td>
</tr>
<tr>
<td className="al-r">10</td>
<td className="al-r">0</td>
</tr>
<tr>
<td className="al-r">10</td>
<td className="al-r">0</td>
</tr>
</tbody>
</table>
</div>
</div>
<div className="circuit-table-flx-wrap">
<div className="circuit-table-flx-box">
<div className="bold-font mb10">接続する</div>
<div className="roof-module-table mb10">
<table>
<thead>
<tr>
<th style={{ width: '140px' }}>名称</th>
<th>回路数</th>
<th>昇圧回路数</th>
</tr>
</thead>
<tbody>
<tr>
<td className="al-c">KTN-CBD4C</td>
<td className="al-r">4</td>
<td className="al-r">0</td>
</tr>
<tr>
<td className="al-c">KTN-CBD4C</td>
<td className="al-r">4</td>
<td className="al-r">0</td>
</tr>
<tr>
<td className="al-c">KTN-CBD4C</td>
<td className="al-r">4</td>
<td className="al-r">0</td>
</tr>
</tbody>
</table>
</div>
<div className="bottom-wrap">
<div className="circuit-right-wrap mb10">
<button className="btn-frame self mr5">追加</button>
</div>
<div className="circuit-data-form">
<span className="normal-font">
HQJP-KA40-5<button className="del"></button>
</span>
</div>
</div>
</div>
<div className="circuit-table-flx-box">
<div className="bold-font mb10">昇圧オプション</div>
<div className="roof-module-table mb10">
<table> <table>
<thead> <thead>
<tr> <tr>
@ -231,165 +101,14 @@ export default function StepUp({}) {
<td className="al-c">-</td> <td className="al-c">-</td>
<td className="al-c">-</td> <td className="al-c">-</td>
</tr> </tr>
<tr>
<td className="al-c">-</td>
<td className="al-c">-</td>
</tr>
</tbody>
</table>
</div>
<div className="bottom-wrap">
<div className="circuit-right-wrap mb10">
<button className="btn-frame self mr5">追加</button>
</div>
<div className="circuit-data-form">
<span className="normal-font">
HQJP-KA40-5<button className="del"></button>
</span>
</div>
</div>
</div>
</div>
<div className="circuit-count-input">
<span className="normal-font">綿調道区分</span>
<div className="input-grid mr5" style={{ width: '40px' }}>
<input type="text" className="input-origin block" />
</div>
<span className="normal-font">回路</span>
<span className="normal-font">(二重昇圧回路数</span>
<div className="input-grid mr5" style={{ width: '40px' }}>
<input type="text" className="input-origin block" />
</div>
<span className="normal-font">回路)</span>
</div>
</div>
</div>
<div className="module-table-box ">
<div className="module-table-inner">
<div className="mb-box">
<div className="circuit-table-tit">HQJP-KA55-5</div>
<div className="roof-module-table overflow-y">
<table>
<thead>
<tr>
<th>シリアル枚数</th>
<th>総回路数</th>
</tr>
</thead>
<tbody>
<tr>
<td className="al-r">10</td>
<td className="al-r">0</td>
</tr>
<tr>
<td className="al-r">10</td>
<td className="al-r">0</td>
</tr>
<tr>
<td className="al-r">10</td>
<td className="al-r">0</td>
</tr>
<tr>
<td className="al-r">10</td>
<td className="al-r">0</td>
</tr>
<tr>
<td className="al-r">10</td>
<td className="al-r">0</td>
</tr>
</tbody> </tbody>
</table> </table>
</div> </div>
</div> </div>
<div className="circuit-table-flx-wrap"> )}
<div className="circuit-table-flx-box">
<div className="bold-font mb10">接続する</div>
<div className="roof-module-table mb10">
<table>
<thead>
<tr>
<th style={{ width: '140px' }}>名称</th>
<th>回路数</th>
<th>昇圧回路数</th>
</tr>
</thead>
<tbody>
<tr>
<td className="al-c">KTN-CBD4C</td>
<td className="al-r">4</td>
<td className="al-r">0</td>
</tr>
<tr>
<td className="al-c">KTN-CBD4C</td>
<td className="al-r">4</td>
<td className="al-r">0</td>
</tr>
<tr>
<td className="al-c">KTN-CBD4C</td>
<td className="al-r">4</td>
<td className="al-r">0</td>
</tr>
</tbody>
</table>
</div>
<div className="bottom-wrap">
<div className="circuit-right-wrap mb10">
<button className="btn-frame self mr5">追加</button>
</div>
<div className="circuit-data-form">
<span className="normal-font">
HQJP-KA40-5<button className="del"></button>
</span>
</div>
</div>
</div>
<div className="circuit-table-flx-box">
<div className="bold-font mb10">昇圧オプション</div>
<div className="roof-module-table mb10">
<table>
<thead>
<tr>
<th>名称</th>
<th>昇圧回路数</th>
</tr>
</thead>
<tbody>
<tr>
<td className="al-c">-</td>
<td className="al-c">-</td>
</tr>
<tr>
<td className="al-c">-</td>
<td className="al-c">-</td>
</tr>
</tbody>
</table>
</div>
<div className="bottom-wrap">
<div className="circuit-right-wrap mb10">
<button className="btn-frame self mr5">追加</button>
</div>
<div className="circuit-data-form">
<span className="normal-font">
HQJP-KA40-5<button className="del"></button>
</span>
</div>
</div>
</div>
</div>
<div className="circuit-count-input">
<span className="normal-font">綿調道区分</span>
<div className="input-grid mr5" style={{ width: '40px' }}>
<input type="text" className="input-origin block" />
</div>
<span className="normal-font">回路</span>
<span className="normal-font">(二重昇圧回路数</span>
<div className="input-grid mr5" style={{ width: '40px' }}>
<input type="text" className="input-origin block" />
</div>
<span className="normal-font">回路)</span>
</div> </div>
</div> </div>
))}
</div> </div>
</div> </div>
<div className="slope-wrap"> <div className="slope-wrap">
@ -398,17 +117,11 @@ export default function StepUp({}) {
{getMessage('modal.circuit.trestle.setting.step.up.allocation.select.monitor')} {getMessage('modal.circuit.trestle.setting.step.up.allocation.select.monitor')}
</span> </span>
<div className="grid-select mr10"> <div className="grid-select mr10">
<QSelectBox title={'電力検出ユニット (モニター付き)'} option={SelectOption01} /> <QSelectBox title={'電力検出ユニット (モニター付き)'} options={SelectOption01} />
</div> </div>
</div> </div>
</div> </div>
</div> </div>
{/*<div className="grid-btn-wrap">*/}
{/* <button className="btn-frame modal mr5" onClick={() => setTabNum(2)}>*/}
{/* 以前*/}
{/* </button>*/}
{/* <button className="btn-frame modal act">保存 (仮割り当て)</button>*/}
{/*</div>*/}
</> </>
) )
} }

12
src/components/floor-plan/modal/circuitTrestle/step/type/PassivityCircuitAllocation.jsx
View File

@ -5,6 +5,7 @@ export default function PassivityCircuitAllocation() {
const moduleData = { const moduleData = {
header: [ header: [
{ name: getMessage('modal.panel.batch.statistic.roof.shape'), prop: 'roofShape' }, { name: getMessage('modal.panel.batch.statistic.roof.shape'), prop: 'roofShape' },
{ name: getMessage('modal.circuit.trestle.setting.circuit'), prop: 'circuit' },
{ {
name: getMessage('Q.TRON M-G2'), name: getMessage('Q.TRON M-G2'),
prop: 'moduleName', prop: 'moduleName',
@ -17,11 +18,13 @@ export default function PassivityCircuitAllocation() {
rows: [ rows: [
{ {
roofShape: { name: 'M 1' }, roofShape: { name: 'M 1' },
circuit: { name: 'M 1' },
moduleName: { name: '8' }, moduleName: { name: '8' },
powerGeneration: { name: '3,400' }, powerGeneration: { name: '3,400' },
}, },
{ {
roofShape: { name: 'M 1' }, roofShape: { name: 'M 1' },
circuit: { name: 'M 1' },
moduleName: { name: '8' }, moduleName: { name: '8' },
powerGeneration: { name: '3,400' }, powerGeneration: { name: '3,400' },
}, },
@ -29,6 +32,8 @@ export default function PassivityCircuitAllocation() {
} }
return ( return (
<> <>
<div className="properties-setting-wrap outer">
<div className="setting-tit">{getMessage('modal.circuit.trestle.setting.circuit.allocation')}</div>
<div className="module-table-box mb10"> <div className="module-table-box mb10">
<div className="module-table-inner"> <div className="module-table-inner">
<div className="bold-font mb10">{getMessage('modal.circuit.trestle.setting.circuit.allocation.passivity')}</div> <div className="bold-font mb10">{getMessage('modal.circuit.trestle.setting.circuit.allocation.passivity')}</div>
@ -46,7 +51,9 @@ export default function PassivityCircuitAllocation() {
{moduleData.rows.map((row, index) => ( {moduleData.rows.map((row, index) => (
<tr key={index}> <tr key={index}>
{moduleData.header.map((header) => ( {moduleData.header.map((header) => (
<td key={header.prop}>{row[header.prop].name}</td> <td className="al-c" key={header.prop}>
{row[header.prop].name}
</td>
))} ))}
</tr> </tr>
))} ))}
@ -87,6 +94,7 @@ export default function PassivityCircuitAllocation() {
<div className="input-grid mr5" style={{ width: '70px' }}> <div className="input-grid mr5" style={{ width: '70px' }}>
<input type="text" className="input-origin block" /> <input type="text" className="input-origin block" />
</div> </div>
<button className="btn-frame roof">{getMessage('modal.circuit.trestle.setting.circuit.allocation.passivity.circuit.num.fix')}</button>
</div> </div>
</div> </div>
<div className="circuit-right-wrap"> <div className="circuit-right-wrap">
@ -96,7 +104,7 @@ export default function PassivityCircuitAllocation() {
<button className="btn-frame roof mr5"> <button className="btn-frame roof mr5">
{getMessage('modal.circuit.trestle.setting.circuit.allocation.passivity.all.power.conditional.reset')} {getMessage('modal.circuit.trestle.setting.circuit.allocation.passivity.all.power.conditional.reset')}
</button> </button>
<button className="btn-frame roof">{getMessage('modal.circuit.trestle.setting.circuit.allocation.passivity.circuit.num.fix')}</button> </div>
</div> </div>
</div> </div>
</> </>

37
src/components/floor-plan/modal/movement/type/Updown.jsx
View File

@ -1,8 +1,7 @@
import { useMessage } from '@/hooks/useMessage' import { useMessage } from '@/hooks/useMessage'
import { useEffect, useState } from 'react' import { useState } from 'react'
import { useEvent } from '@/hooks/useEvent'
import { canvasState } from '@/store/canvasAtom'
import { useRecoilValue } from 'recoil' import { useRecoilValue } from 'recoil'
import { currentObjectState } from '@/store/canvasAtom'
const UP_DOWN_TYPE = { const UP_DOWN_TYPE = {
UP: 'up', UP: 'up',
@ -12,17 +11,18 @@ const UP_DOWN_TYPE = {
export default function Updown({ UP_DOWN_REF }) { export default function Updown({ UP_DOWN_REF }) {
const { getMessage } = useMessage() const { getMessage } = useMessage()
const [type, setType] = useState(UP_DOWN_TYPE.UP) const [type, setType] = useState(UP_DOWN_TYPE.UP)
const canvas = useRecoilValue(canvasState) const [filledInput, setFilledInput] = useState('')
const currentObject = useRecoilValue(currentObjectState)
useEffect(() => { const handleFocus = () => {
if (type === UP_DOWN_TYPE.UP) { if (currentObject === null) {
UP_DOWN_REF.DOWN_INPUT_REF.current.value = '' UP_DOWN_REF.FILLED_INPUT_REF.current.value = ''
UP_DOWN_REF.UP_INPUT_REF.current.focus() UP_DOWN_REF.FILLED_INPUT_REF.current.blur()
} else { }
UP_DOWN_REF.UP_INPUT_REF.current.value = '' }
UP_DOWN_REF.DOWN_INPUT_REF.current.focus() const handleInput = (e) => {
const value = e.target.value.replace(/^0+/, '')
setFilledInput(value.replace(/[^0-9]/g, ''))
} }
}, [type])
return ( return (
<> <>
@ -48,7 +48,7 @@ export default function Updown({ UP_DOWN_REF }) {
<div className="eaves-keraba-td"> <div className="eaves-keraba-td">
<div className="outline-form"> <div className="outline-form">
<div className="input-grid mr5" style={{ width: '100px' }}> <div className="input-grid mr5" style={{ width: '100px' }}>
<input type="text" className="input-origin block" readOnly={true} ref={UP_DOWN_REF.UP_INPUT_REF} /> {/*<input type="text" className="input-origin block" readOnly={true} ref={UP_DOWN_REF.UP_INPUT_REF} />*/}
</div> </div>
</div> </div>
</div> </div>
@ -71,7 +71,14 @@ export default function Updown({ UP_DOWN_REF }) {
<div className="eaves-keraba-td"> <div className="eaves-keraba-td">
<div className="outline-form"> <div className="outline-form">
<div className="input-grid mr5" style={{ width: '100px' }}> <div className="input-grid mr5" style={{ width: '100px' }}>
<input type="text" className="input-origin block" readOnly={type !== UP_DOWN_TYPE.DOWN} ref={UP_DOWN_REF.DOWN_INPUT_REF} /> <input
type="text"
className="input-origin block"
ref={UP_DOWN_REF.FILLED_INPUT_REF}
value={filledInput}
onFocus={handleFocus}
onChange={handleInput}
/>
</div> </div>
<span className="thin">mm</span> <span className="thin">mm</span>
</div> </div>

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

@ -1495,7 +1495,7 @@ export default function StuffDetail() {
if (params?.data?.planNo && params?.data?.objectNo) { if (params?.data?.planNo && params?.data?.objectNo) {
let objectNo = params?.data?.objectNo let objectNo = params?.data?.objectNo
let planNo = params?.data?.planNo let planNo = params?.data?.planNo
router.push(`/floor-plan?pid=${planNo}&objectNo=${objectNo}`) router.push(`/floor-plan/estimate/5?pid=${planNo}&objectNo=${objectNo}`)
} }
} }
} }

9
src/hooks/common/useMasterController.js
View File

@ -118,11 +118,12 @@ export function useMasterController() {
* @param {혼합모듈번호} mixMatlNo * @param {혼합모듈번호} mixMatlNo
* @returns * @returns
*/ */
const getPcsMakerList = async (params) => { const getPcsMakerList = async (params = null) => {
const paramString = getQueryString(params) let paramString = ''
console.log('🚀🚀 ~ getPcsMakerList ~ paramString:', paramString) if (params) {
paramString = getQueryString(params)
}
return await get({ url: '/api/v1/master/pcsMakerList' + paramString }).then((res) => { return await get({ url: '/api/v1/master/pcsMakerList' + paramString }).then((res) => {
console.log('🚀🚀 ~ getPcsMakerList ~ res:', res)
return res return res
}) })
} }

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

@ -51,12 +51,17 @@ export const useEstimateController = (planNo) => {
}, [fileList]) }, [fileList])
// 상세 조회 // 상세 조회
const fetchSetting = async (objectNo, planNo) => { const fetchSetting = async (objectNo, planNo, resetFlag) => {
try { try {
await promiseGet({ url: `/api/estimate/${objectNo}/${planNo}/detail` }).then((res) => { await promiseGet({ url: `/api/estimate/${objectNo}/${planNo}/detail` }).then((res) => {
setIsGlobalLoading(true) setIsGlobalLoading(true)
if (res.status === 200) { if (res.status === 200) {
if (isObjectNotEmpty(res.data)) { if (isObjectNotEmpty(res.data)) {
if (resetFlag) {
res.data.originFiles = []
res.data.originFile = []
res.data.resetFlag = 'Y'
}
if (res.data.itemList.length > 0) { if (res.data.itemList.length > 0) {
res.data.itemList.map((item) => { res.data.itemList.map((item) => {
item.delFlg = '0' item.delFlg = '0'

190
src/hooks/roofcover/useMovementSetting.js
View File

@ -31,15 +31,13 @@ export function useMovementSetting(id) {
const { swalFire } = useSwal() const { swalFire } = useSwal()
const FLOW_LINE_REF = { const FLOW_LINE_REF = {
POINTER_INPUT_REF: useRef(null),
FILLED_INPUT_REF: useRef(null), FILLED_INPUT_REF: useRef(null),
DOWN_LEFT_RADIO_REF: useRef(null), DOWN_LEFT_RADIO_REF: useRef(null),
UP_RIGHT_RADIO_REF: useRef(null), UP_RIGHT_RADIO_REF: useRef(null),
} }
const UP_DOWN_REF = { const UP_DOWN_REF = {
UP_INPUT_REF: useRef(null), FILLED_INPUT_REF: useRef(null),
DOWN_INPUT_REF: useRef(null),
UP_RADIO_REF: useRef(null), UP_RADIO_REF: useRef(null),
DOWN_RADIO_REF: useRef(null), DOWN_RADIO_REF: useRef(null),
} }
@ -138,6 +136,32 @@ export function useMovementSetting(id) {
}, []) }, [])
useEffect(() => { useEffect(() => {
console.log('selectedObject.current : ', selectedObject.current)
if (selectedObject.current != null) {
let wallStroke
switch (selectedObject.current.attributes.type) {
case LINE_TYPE.WALLLINE.EAVES:
wallStroke = '#45CD7D'
break
case LINE_TYPE.WALLLINE.HIPANDGABLE:
wallStroke = '#45CD7D'
break
case LINE_TYPE.WALLLINE.GABLE:
wallStroke = '#3FBAE6'
break
case LINE_TYPE.WALLLINE.JERKINHEAD:
wallStroke = '#3FBAE6'
break
case LINE_TYPE.WALLLINE.SHED:
wallStroke = '#000000'
break
case LINE_TYPE.WALLLINE.WALL:
wallStroke = '#000000'
break
}
selectedObject.current.set({ stroke: wallStroke })
selectedObject.current.bringToFront()
}
selectedObject.current = null selectedObject.current = null
if (!currentObject) { if (!currentObject) {
return return
@ -159,8 +183,7 @@ export function useMovementSetting(id) {
FLOW_LINE_REF.UP_RIGHT_RADIO_REF.current.checked = false FLOW_LINE_REF.UP_RIGHT_RADIO_REF.current.checked = false
} }
if (type === TYPE.UP_DOWN) { if (type === TYPE.UP_DOWN) {
UP_DOWN_REF.UP_INPUT_REF.current.value = '' UP_DOWN_REF.FILLED_INPUT_REF.current.value = ''
UP_DOWN_REF.DOWN_INPUT_REF.current.value = ''
UP_DOWN_REF.UP_RADIO_REF.current.checked = true UP_DOWN_REF.UP_RADIO_REF.current.checked = true
UP_DOWN_REF.DOWN_RADIO_REF.current.checked = false UP_DOWN_REF.DOWN_RADIO_REF.current.checked = false
} }
@ -170,7 +193,7 @@ export function useMovementSetting(id) {
if (typeRef.current === TYPE.FLOW_LINE) { if (typeRef.current === TYPE.FLOW_LINE) {
saveFlowLine(e) saveFlowLine(e)
} else { } else {
updownDownEvent(e) saveUpDownLine(e)
} }
} }
@ -370,6 +393,129 @@ export function useMovementSetting(id) {
FLOW_LINE_REF.FILLED_INPUT_REF.current.value = '' FLOW_LINE_REF.FILLED_INPUT_REF.current.value = ''
} }
//형 올림내림 마우스 클릭 이벤트
const saveUpDownLine = (e) => {
const target = selectedObject.current
if (!target) {
return
}
const roof = canvas.getObjects().find((obj) => obj.id === target.attributes.roofId)
const wallLines = roof.wall.lines
const roofLines = roof.lines
const currentWall = wallLines.find((line) => line.id === target.attributes.currentWall)
let prevWall, nextWall
let prevEave, nextEave
wallLines.forEach((wallLine, index) => {
if (wallLine.id === currentWall.id) {
prevWall = index === 0 ? wallLines[wallLines.length - 1] : wallLines[index - 1]
nextWall = index === wallLines.length - 1 ? wallLines[0] : wallLines[index + 1]
}
})
const eaves = roofLines.filter((line) => line.attributes?.type === LINE_TYPE.WALLLINE.EAVES)
wallLines
.filter((line) => line.attributes.type === LINE_TYPE.WALLLINE.EAVES)
.forEach((eave, index) => {
if (eave.id === currentWall.id) {
prevEave = index === 0 ? eaves[eaves.length - 1] : eaves[index - 1]
nextEave = index === eaves.length - 1 ? eaves[0] : eaves[index + 1]
}
})
const currentRoof = roofLines.find((line) => line.id === target.attributes.currentRoof)
const currentRidges = roof.innerLines.filter(
(line) => line.name === LINE_TYPE.SUBLINE.RIDGE && line.attributes.currentRoof.includes(currentRoof.id),
)
/*const prevWallRidges = roof.innerLines.filter(
(line) => line.name === LINE_TYPE.SUBLINE.RIDGE && line.attributes.currentRoof.includes(prevEave.id),
)
const nextWallRidges = roof.innerLines.filter(
(line) => line.name === LINE_TYPE.SUBLINE.RIDGE && line.attributes.currentRoof.includes(nextEave.id),
)
//라인 확인 작업
/!* const roofLine = new fabric.Line([currentRoof.x1, currentRoof.y1, currentRoof.x2, currentRoof.y2], {
stroke: 'red',
strokeWidth: 5,
selectable: false,
})
canvas.add(roofLine)
const prevEaves = new fabric.Line([prevEave.x1, prevEave.y1, prevEave.x2, prevEave.y2], {
stroke: 'yellow',
strokeWidth: 5,
selectable: false,
})
canvas.add(prevEaves)
currentRidges.forEach((ridge) => ridge.set({ stroke: 'purple', strokeWidth: 5 }))
prevWallRidges.forEach((ridge) => ridge.set({ stroke: 'yellow', strokeWidth: 5 }))
nextWallRidges.forEach((ridge) => ridge.set({ stroke: 'green', strokeWidth: 5 }))
canvas.renderAll()*!/*/
console.log(
'UP/DOWN',
UP_DOWN_REF.UP_RADIO_REF.current.checked,
UP_DOWN_REF.DOWN_RADIO_REF.current.checked,
UP_DOWN_REF.FILLED_INPUT_REF.current.value,
)
let compareLine
if (Math.sign(currentRoof.x1 - currentRoof.x2) === 0) {
const currentDiff = currentRidges[0].x1 - currentRoof.x1
const prevDiff = prevEave.x1 - currentRoof.x1
const nextDiff = nextEave.x1 - currentRoof.x1
console.log('currentDiff', Math.sign(currentDiff), currentDiff)
if (UP_DOWN_REF.UP_RADIO_REF.current.checked) {
if (Math.sign(currentDiff) === 1) {
} else {
if (Math.sign(prevDiff) === 1 && Math.sign(nextDiff) === 1) {
} else {
}
}
} else {
if (Math.sign(currentDiff) === -1) {
} else {
if (Math.sign(prevDiff) === -1 && Math.sign(nextDiff) === -1) {
} else {
}
}
}
} else {
const currentDiff = currentRidges[0].y1 - currentRoof.y1
const prevDiff = prevEave.y1 - currentRoof.y1
const nextDiff = nextEave.y1 - currentRoof.y1
if (UP_DOWN_REF.UP_RADIO_REF.current.checked) {
if (Math.sign(currentDiff) === 1) {
} else {
if (Math.sign(prevDiff) === 1 && Math.sign(nextDiff) === 1) {
} else {
}
}
} else {
if (Math.sign(currentDiff) === -1) {
} else {
if (Math.sign(prevDiff) === -1 && Math.sign(nextDiff) === -1) {
} else {
}
}
}
}
//확인
/*const compareRoofLine = new fabric.Line([compareRoof.x1, compareRoof.y1, compareRoof.x2, compareRoof.y2], {
stroke: 'red',
strokeWidth: 5,
selectable: false,
})
canvas.add(compareRoofLine)
canvas.renderAll()*/
}
const redrawSeparatePolygon = (roof) => { const redrawSeparatePolygon = (roof) => {
roof.separatePolygon.forEach((polygon) => canvas.remove(polygon)) roof.separatePolygon.forEach((polygon) => canvas.remove(polygon))
roof.separatePolygon = [] roof.separatePolygon = []
@ -752,10 +898,6 @@ export function useMovementSetting(id) {
console.log('ridges : ', ridges) console.log('ridges : ', ridges)
} }
//형 올림내림 마우스 클릭 이벤트
const updownDownEvent = (e) => {
console.log('updownDownEvent')
}
const flowLineMoveEvent = (e) => { const flowLineMoveEvent = (e) => {
const target = canvas.getActiveObject() const target = canvas.getActiveObject()
if (!target) { if (!target) {
@ -791,34 +933,25 @@ export function useMovementSetting(id) {
if (!target) { if (!target) {
return return
} }
const direction = target.direction
const { top: targetTop, left: targetLeft } = target const { top: targetTop, left: targetLeft } = target
const currentX = canvas.getPointer(e.e).x const currentX = canvas.getPointer(e.e).x
const currentY = Math.floor(canvas.getPointer(e.e).y) const currentY = Math.floor(canvas.getPointer(e.e).y)
if (direction === 'left' || direction === 'right') { if (Math.sign(target.x1 - target.x2) !== 0) {
if (targetTop > currentY) { if (targetTop > currentY) {
UP_DOWN_REF.DOWN_RADIO_REF.current.checked = true UP_DOWN_REF.DOWN_RADIO_REF.current.checked = true
UP_DOWN_REF.UP_INPUT_REF.current.value = '' UP_DOWN_REF.FILLED_INPUT_REF.current.value = Math.floor((Number(Math.abs(targetTop - currentY)) / 10000).toFixed(5) * 100000)
UP_DOWN_REF.DOWN_INPUT_REF.current.value = Math.floor((Number(Math.abs(targetTop - currentY)) / 10000).toFixed(5) * 100000)
} else { } else {
UP_DOWN_REF.UP_RADIO_REF.current.checked = true UP_DOWN_REF.UP_RADIO_REF.current.checked = true
UP_DOWN_REF.DOWN_INPUT_REF.current.value = '' UP_DOWN_REF.FILLED_INPUT_REF.current.value = Math.floor((Number(Math.abs(targetTop - currentY)) / 10000).toFixed(5) * 100000)
UP_DOWN_REF.UP_INPUT_REF.current.value = Math.floor((Number(Math.abs(targetTop - currentY)) / 10000).toFixed(5) * 100000)
} }
} else { } else {
if (targetLeft > currentX) { if (targetLeft > currentX) {
UP_DOWN_REF.DOWN_RADIO_REF.current.checked = true UP_DOWN_REF.DOWN_RADIO_REF.current.checked = true
UP_DOWN_REF.UP_INPUT_REF.current.value = '' UP_DOWN_REF.FILLED_INPUT_REF.current.value = Math.floor((Number(Math.abs(targetLeft - currentX)) / 10000).toFixed(5) * 100000)
UP_DOWN_REF.DOWN_INPUT_REF.current.value = Math.floor((Number(Math.abs(targetLeft - currentX)) / 10000).toFixed(5) * 100000)
} else { } else {
UP_DOWN_REF.UP_RADIO_REF.current.checked = true UP_DOWN_REF.UP_RADIO_REF.current.checked = true
UP_DOWN_REF.DOWN_INPUT_REF.current.value = '' UP_DOWN_REF.FILLED_INPUT_REF.current.value = Math.floor((Number(Math.abs(targetLeft - currentX)) / 10000).toFixed(5) * 100000)
UP_DOWN_REF.UP_INPUT_REF.current.value = Math.floor((Number(Math.abs(targetLeft - currentX)) / 10000).toFixed(5) * 100000)
} }
} }
@ -829,14 +962,7 @@ export function useMovementSetting(id) {
if (type === TYPE.FLOW_LINE) { if (type === TYPE.FLOW_LINE) {
saveFlowLine() saveFlowLine()
} else { } else {
// 형 올림내림 saveUpDownLine()
if (UP_DOWN_REF.UP_RADIO_REF.current.checked) {
// 자릿수를 올리다 체크
const length = Number(UP_DOWN_REF.UP_INPUT_REF.current.value)
} else {
// 자릿수를 내리다 체크
const length = Number(UP_DOWN_REF.DOWN_INPUT_REF.current.value)
}
} }
} }

4
src/hooks/useMode.js
View File

@ -1763,6 +1763,8 @@ export function useMode() {
roof.name = POLYGON_TYPE.ROOF roof.name = POLYGON_TYPE.ROOF
roof.setWall(wall) roof.setWall(wall)
console.log('roof.lines : ', roof.lines)
roof.lines.forEach((line, index) => { roof.lines.forEach((line, index) => {
const lineLength = Math.sqrt( const lineLength = Math.sqrt(
Math.pow(Math.round(Math.abs(line.x1 - line.x2) * 10), 2) + Math.pow(Math.round(Math.abs(line.y1 - line.y2) * 10), 2), Math.pow(Math.round(Math.abs(line.x1 - line.x2) * 10), 2) + Math.pow(Math.round(Math.abs(line.y1 - line.y2) * 10), 2),
@ -1826,7 +1828,7 @@ export function useMode() {
} }
const wallLine = new fabric.Line([line.x1, line.y1, line.x2, line.y2], { const wallLine = new fabric.Line([line.x1, line.y1, line.x2, line.y2], {
name: 'wallLine', name: 'wallLine',
attributes: { wallId: wall.id, roofId: roof.id }, attributes: { wallId: wall.id, roofId: roof.id, type: line.attributes.type, currentRoof: line.attributes.currentRoof, currentWall: line.id },
stroke: wallStroke, stroke: wallStroke,
strokeWidth: wallStrokeWidth, strokeWidth: wallStrokeWidth,
selectable: false, selectable: false,

3
src/locales/ja.json
View File

@ -129,6 +129,7 @@
"modal.circuit.trestle.setting": "回路と架台設定", "modal.circuit.trestle.setting": "回路と架台設定",
"modal.circuit.trestle.setting.alloc.trestle": "仮割り当て", "modal.circuit.trestle.setting.alloc.trestle": "仮割り当て",
"modal.circuit.trestle.setting.power.conditional.select": "パワーコンディショナーを選択", "modal.circuit.trestle.setting.power.conditional.select": "パワーコンディショナーを選択",
"modal.circuit.trestle.setting.power.conditional.select.cold.region": "寒冷地仕様",
"modal.circuit.trestle.setting.power.conditional.select.name": "名称", "modal.circuit.trestle.setting.power.conditional.select.name": "名称",
"modal.circuit.trestle.setting.power.conditional.select.rated.output": "定格出力", "modal.circuit.trestle.setting.power.conditional.select.rated.output": "定格出力",
"modal.circuit.trestle.setting.power.conditional.select.circuit.amount": "回路数", "modal.circuit.trestle.setting.power.conditional.select.circuit.amount": "回路数",
@ -500,6 +501,8 @@
"commons.east": "ドン", "commons.east": "ドン",
"commons.south": "南", "commons.south": "南",
"commons.north": "北", "commons.north": "北",
"commons.none": "선택안함(JA)",
"common.type": "分類",
"font.style.normal": "보통(JA)", "font.style.normal": "보통(JA)",
"font.style.italic": "기울임꼴(JA)", "font.style.italic": "기울임꼴(JA)",
"font.style.bold": "굵게(JA)", "font.style.bold": "굵게(JA)",

4
src/locales/ko.json
View File

@ -133,6 +133,7 @@
"modal.circuit.trestle.setting": "회로 및 가대설정", "modal.circuit.trestle.setting": "회로 및 가대설정",
"modal.circuit.trestle.setting.alloc.trestle": "가대할당", "modal.circuit.trestle.setting.alloc.trestle": "가대할당",
"modal.circuit.trestle.setting.power.conditional.select": "파워컨디셔너 선택", "modal.circuit.trestle.setting.power.conditional.select": "파워컨디셔너 선택",
"modal.circuit.trestle.setting.power.conditional.select.cold.region": "한랭지사양",
"modal.circuit.trestle.setting.power.conditional.select.name": "명칭", "modal.circuit.trestle.setting.power.conditional.select.name": "명칭",
"modal.circuit.trestle.setting.power.conditional.select.rated.output": "정격출력", "modal.circuit.trestle.setting.power.conditional.select.rated.output": "정격출력",
"modal.circuit.trestle.setting.power.conditional.select.circuit.amount": "회로수", "modal.circuit.trestle.setting.power.conditional.select.circuit.amount": "회로수",
@ -510,6 +511,7 @@
"commons.south": "남", "commons.south": "남",
"commons.north": "북", "commons.north": "북",
"commons.none": "선택안함", "commons.none": "선택안함",
"common.type": "분류",
"font.style.normal": "보통", "font.style.normal": "보통",
"font.style.italic": "기울임꼴", "font.style.italic": "기울임꼴",
"font.style.bold": "굵게", "font.style.bold": "굵게",
@ -937,7 +939,7 @@
"estimate.detail.save.requiredItemId": "제품을 선택해주세요.", "estimate.detail.save.requiredItemId": "제품을 선택해주세요.",
"estimate.detail.save.requiredAmount": "수량은 0보다 큰값을 입력해주세요.", "estimate.detail.save.requiredAmount": "수량은 0보다 큰값을 입력해주세요.",
"estimate.detail.save.requiredSalePrice": "단가는 0보다 큰값을 입력해주세요.", "estimate.detail.save.requiredSalePrice": "단가는 0보다 큰값을 입력해주세요.",
"estimate.detail.reset.confirmMsg": "저장된 견적서 정보가 초기화되고, 도면정보가 반영됩니다. 정말로 초기화 하시겠습니까?", "estimate.detail.reset.confirmMsg": "수기 변경(저장)한 견적 정보가 초기화되고, 최근 저장된 도면정보가 반영됩니다. 정말로 초기화하시겠습니까?",
"estimate.detail.alert.delFile": "첨부파일을 완전히 삭제하려면 [저장]버튼을 클릭하십시오.", "estimate.detail.alert.delFile": "첨부파일을 완전히 삭제하려면 [저장]버튼을 클릭하십시오.",
"estimate.detail.alert.selectDelItem": "삭제할 제품을 선택하세요.", "estimate.detail.alert.selectDelItem": "삭제할 제품을 선택하세요.",
"simulator.title.sub1": "물건번호", "simulator.title.sub1": "물건번호",

475
src/styles/_modal.scss
View File

@ -5,24 +5,12 @@ $pop-normal-size: 12px;
$alert-color: #101010; $alert-color: #101010;
@keyframes mountpop{ @keyframes mountpop{
from { from{opacity: 0; scale: 0.95;}
opacity: 0; to{opacity: 1; scale: 1;}
scale: 0.95;
}
to {
opacity: 1;
scale: 1;
}
} }
@keyframes unmountpop{ @keyframes unmountpop{
from { from{opacity: 1; scale: 1;}
opacity: 1; to{opacity: 0; scale: 0.95;}
scale: 1;
}
to {
opacity: 0;
scale: 0.95;
}
} }
.normal-font{ .normal-font{
@ -97,10 +85,10 @@ $alert-color: #101010;
width: 900px; width: 900px;
} }
&.mount{ &.mount{
animation: mountpop 0.17s ease-in-out forwards; animation: mountpop .17s ease-in-out forwards;
} }
&.unmount{ &.unmount{
animation: unmountpop 0.17s ease-in-out forwards; animation: unmountpop .17s ease-in-out forwards;
} }
&.alert{ &.alert{
position: absolute; position: absolute;
@ -205,7 +193,7 @@ $alert-color: #101010;
} }
} }
.outer-line-wrap{ .outer-line-wrap{
border-top: 1px solid #3c3c3c; border-top: 1px solid #3C3C3C;
margin-top: 10px; margin-top: 10px;
padding-top: 15px; padding-top: 15px;
margin-bottom: 15px; margin-bottom: 15px;
@ -227,7 +215,7 @@ $alert-color: #101010;
.adsorption-point{ .adsorption-point{
display: flex; display: flex;
align-items: center; align-items: center;
background-color: #3a3a3a; background-color: #3A3A3A;
border-radius: 3px; border-radius: 3px;
padding-left: 11px; padding-left: 11px;
overflow: hidden; overflow: hidden;
@ -248,7 +236,7 @@ $alert-color: #101010;
&.act{ &.act{
i{ i{
color: $pop-color; color: $pop-color;
background-color: #1083e3; background-color: #1083E3;
} }
} }
} }
@ -271,7 +259,7 @@ $alert-color: #101010;
background-color: transparent; background-color: transparent;
} }
&::-webkit-scrollbar-thumb { &::-webkit-scrollbar-thumb {
background-color: #d9d9d9; background-color: #D9D9D9;
} }
&::-webkit-scrollbar-track { &::-webkit-scrollbar-track {
background-color: transparent; background-color: transparent;
@ -282,7 +270,7 @@ $alert-color: #101010;
display: flex; display: flex;
align-items: center; align-items: center;
background-color: transparent; background-color: transparent;
border: 1px solid #3d3d3d; border: 1px solid #3D3D3D;
border-radius: 2px; border-radius: 2px;
padding: 15px 10px; padding: 15px 10px;
gap: 20px; gap: 20px;
@ -312,9 +300,7 @@ $alert-color: #101010;
} }
} }
.select-form{ .select-form{
.sort-select { .sort-select{width: 100%;}
width: 100%;
}
} }
.grid-select{ .grid-select{
flex: 1; flex: 1;
@ -359,6 +345,7 @@ $alert-color: #101010;
color: $pop-color; color: $pop-color;
font-weight: $pop-normal-weight; font-weight: $pop-normal-weight;
padding-bottom: 15px; padding-bottom: 15px;
} }
.grid-direction{ .grid-direction{
display: flex; display: flex;
@ -375,17 +362,11 @@ $alert-color: #101010;
background-position: center; background-position: center;
background-size: 16px 15px; background-size: 16px 15px;
border-radius: 50%; border-radius: 50%;
transition: all 0.15s ease-in-out; transition: all .15s ease-in-out;
opacity: 0.6; opacity: 0.6;
&.down { &.down{transform: rotate(180deg);}
transform: rotate(180deg); &.left{transform: rotate(-90deg);}
} &.right{transform: rotate(90deg);}
&.left {
transform: rotate(-90deg);
}
&.right {
transform: rotate(90deg);
}
&:hover, &:hover,
&.act{ &.act{
opacity: 1; opacity: 1;
@ -471,11 +452,10 @@ $alert-color: #101010;
} }
&.light{ &.light{
padding: 0; padding: 0;
th, th,td{
td {
color: $alert-color; color: $alert-color;
border-bottom: none; border-bottom: none;
border-top: 1px solid #efefef; border-top: 1px solid #EFEFEF;
} }
th{ th{
padding: 14px 0; padding: 14px 0;
@ -529,6 +509,7 @@ $alert-color: #101010;
color: $pop-color; color: $pop-color;
font-weight: $pop-normal-weight; font-weight: $pop-normal-weight;
} }
} }
.img-edit-wrap{ .img-edit-wrap{
@ -544,7 +525,7 @@ $alert-color: #101010;
background-color: #fff; background-color: #fff;
border-radius: 2px; border-radius: 2px;
cursor: pointer; cursor: pointer;
transition: all 0.15s ease-in-out; transition: all .15s ease-in-out;
.img-edit{ .img-edit{
width: 16px; width: 16px;
height: 16px; height: 16px;
@ -564,6 +545,7 @@ $alert-color: #101010;
margin-left: 10px; margin-left: 10px;
input{ input{
flex: 1; flex: 1;
} }
.img-check{ .img-check{
flex: none; flex: none;
@ -589,12 +571,8 @@ $alert-color: #101010;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
background-size: cover; background-size: cover;
&.fail { &.fail{background-image: url(../../public/static/images/canvas/img_check_fail.svg);}
background-image: url(../../public/static/images/canvas/img_check_fail.svg); &.success{background-image: url(../../public/static/images/canvas/img_check_success.svg);}
}
&.success {
background-image: url(../../public/static/images/canvas/img_check_success.svg);
}
} }
} }
@ -674,7 +652,7 @@ $alert-color: #101010;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 50%; width: 50%;
background-color: #3d3d3d; background-color: #3D3D3D;
border-radius: 2px ; border-radius: 2px ;
} }
} }
@ -682,7 +660,7 @@ $alert-color: #101010;
// 외벽선 속성 설정 // 외벽선 속성 설정
.properties-guide{ .properties-guide{
font-size: $pop-normal-size; font-size: $pop-normal-size;
color: #aaa; color: #AAA;
font-weight: $pop-normal-weight; font-weight: $pop-normal-weight;
margin-bottom: 14px; margin-bottom: 14px;
} }
@ -711,17 +689,17 @@ $alert-color: #101010;
color: #fff; color: #fff;
font-weight: 700; font-weight: 700;
border-radius: 2px; border-radius: 2px;
transition: all 0.15s ease-in-out; transition: all .15s ease-in-out;
&.green{ &.green{
background-color: #305941; background-color: #305941;
border: 1px solid #45cd7d; border: 1px solid #45CD7D;
&:hover{ &:hover{
background-color: #3a6b4e; background-color: #3a6b4e;
} }
} }
&.blue{ &.blue{
background-color: #2e5360; background-color: #2E5360;
border: 1px solid #3fbae6; border: 1px solid #3FBAE6;
&:hover{ &:hover{
background-color: #365f6e; background-color: #365f6e;
} }
@ -743,8 +721,8 @@ $alert-color: #101010;
justify-content: center; justify-content: center;
width: 100%; width: 100%;
padding: 13px; padding: 13px;
background-color: #3d3d3d; background-color: #3D3D3D;
transition: background 0.15s ease-in-out; transition: background .15s ease-in-out;
img{ img{
max-width: 100%; max-width: 100%;
} }
@ -755,17 +733,13 @@ $alert-color: #101010;
color: $pop-color; color: $pop-color;
margin-top: 10px; margin-top: 10px;
text-align: center; text-align: center;
transition: color 0.15s ease-in-out; transition: color .15s ease-in-out;
} }
.shape-menu-box{ .shape-menu-box{
&.act, &.act,
&:hover{ &:hover{
.shape-box { .shape-box{background-color: #008BFF;}
background-color: #008bff; .shape-title{color: #008BFF;}
}
.shape-title {
color: #008bff;
}
} }
} }
} }
@ -780,7 +754,7 @@ $alert-color: #101010;
} }
.discrimination-box{ .discrimination-box{
padding: 16px 12px; padding: 16px 12px;
border: 1px solid #3d3d3d; border: 1px solid #3D3D3D;
border-radius: 2px; border-radius: 2px;
} }
@ -813,12 +787,12 @@ $alert-color: #101010;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 5px; padding: 5px;
background-color: #3d3d3d; background-color: #3D3D3D;
border: 1px solid #3d3d3d; border: 1px solid #3D3D3D;
border-radius: 2px; border-radius: 2px;
cursor: pointer; cursor: pointer;
&.act{ &.act{
border: 1px solid #ed0004; border: 1px solid #ED0004;
} }
} }
&:last-child{ &:last-child{
@ -917,7 +891,7 @@ $alert-color: #101010;
border: 1px solid #646464; border: 1px solid #646464;
border-radius: 2px; border-radius: 2px;
padding: 0 10px; padding: 0 10px;
transition: all 0.15s ease-in-out; transition: all .15s ease-in-out;
i{ i{
height: 15px; height: 15px;
display: block; display: block;
@ -925,7 +899,7 @@ $alert-color: #101010;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
background-size: cover; background-size: cover;
transition: all 0.15s ease-in-out; transition: all .15s ease-in-out;
&.allocation01{ &.allocation01{
background-image: url(../../public/static/images/canvas/allocation_icon01_white.svg); background-image: url(../../public/static/images/canvas/allocation_icon01_white.svg);
width: 15px; width: 15px;
@ -978,9 +952,7 @@ $alert-color: #101010;
height: 34px; height: 34px;
background-color: #373737; background-color: #373737;
border: 1px solid #676767; border: 1px solid #676767;
transition: transition: background .15s ease-in-out, border .15s ease-in-out;
background 0.15s ease-in-out,
border 0.15s ease-in-out;
.shape-box{ .shape-box{
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -992,8 +964,8 @@ $alert-color: #101010;
} }
&.act, &.act,
&:hover{ &:hover{
border-color: #008bff; border-color: #008BFF;
background-color: #008bff; background-color: #008BFF;
} }
} }
} }
@ -1008,27 +980,18 @@ $alert-color: #101010;
.library-btn{ .library-btn{
width: 100%; width: 100%;
height: 34px; height: 34px;
border: 1px solid #6c6c6c; border: 1px solid #6C6C6C;
border-radius: 2px; border-radius: 2px;
background-color: #373737; background-color: #373737;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
transition: all 0.15s ease-in-out; transition: all .15s ease-in-out;
&.ico01 { &.ico01{background-image: url(../../public/static/images/canvas/shape_labrary01.svg); background-size: 19px 18px;}
background-image: url(../../public/static/images/canvas/shape_labrary01.svg); &.ico02{background-image: url(../../public/static/images/canvas/shape_labrary02.svg); background-size: 15px 20px;}
background-size: 19px 18px; &.ico03{background-image: url(../../public/static/images/canvas/shape_labrary03.svg); background-size: 19px 16px;}
}
&.ico02 {
background-image: url(../../public/static/images/canvas/shape_labrary02.svg);
background-size: 15px 20px;
}
&.ico03 {
background-image: url(../../public/static/images/canvas/shape_labrary03.svg);
background-size: 19px 16px;
}
&:hover{ &:hover{
border-color: #1083e3; border-color: #1083E3;
background-color: #1083e3; background-color: #1083E3;
} }
} }
} }
@ -1114,27 +1077,11 @@ $alert-color: #101010;
position: absolute; position: absolute;
font-size: 12px; font-size: 12px;
font-weight: 500; font-weight: 500;
color: #b1b1b1; color: #B1B1B1;
&.top { &.top{top: 0; left: 50%; transform: translateX(-50%);}
top: 0; &.right{top: 50%; right: 0; transform: translateY(-50%);}
left: 50%; &.bottom{bottom: 0; left: 50%; transform: translateX(-50%);}
transform: translateX(-50%); &.left{top: 50%; left: 0; transform: translateY(-50%);}
}
&.right {
top: 50%;
right: 0;
transform: translateY(-50%);
}
&.bottom {
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
&.left {
top: 50%;
left: 0;
transform: translateY(-50%);
}
} }
.plane-btn{ .plane-btn{
position: absolute; position: absolute;
@ -1146,27 +1093,11 @@ $alert-color: #101010;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
border-radius: 50%; border-radius: 50%;
transition: all 0.15s ease-in-out; transition: all .15s ease-in-out;
&.up { &.up{top: 22px; left: 50%; transform: translateX(-50%);}
top: 22px; &.right{top: 50%; right: 32px; transform: translateY(-50%) rotate(90deg);}
left: 50%; &.down{bottom: 22px; left: 50%; transform: translateX(-50%) rotate(180deg);}
transform: translateX(-50%); &.left{top: 50%; left: 32px; transform: translateY(-50%) rotate(270deg);}
}
&.right {
top: 50%;
right: 32px;
transform: translateY(-50%) rotate(90deg);
}
&.down {
bottom: 22px;
left: 50%;
transform: translateX(-50%) rotate(180deg);
}
&.left {
top: 50%;
left: 32px;
transform: translateY(-50%) rotate(270deg);
}
&:hover, &:hover,
&.act{ &.act{
background-color: #fff; background-color: #fff;
@ -1232,7 +1163,7 @@ $alert-color: #101010;
.warning{ .warning{
font-size: $pop-normal-size; font-size: $pop-normal-size;
font-weight: $pop-normal-weight; font-weight: $pop-normal-weight;
color: #ffafaf; color: #FFAFAF;
} }
// 각 변 속성 변경 // 각 변 속성 변경
@ -1288,157 +1219,37 @@ $alert-color: #101010;
top: 12.5px; top: 12.5px;
left: 50%; left: 50%;
font-size: 11px; font-size: 11px;
color: #8b8b8b; color: #8B8B8B;
font-weight: 500; font-weight: 500;
-webkit-user-select: none; -webkit-user-select: none;
-moz-user-select: none; -moz-user-select: none;
-ms-use-select: none; -ms-use-select: none;
user-select: none; user-select: none;
} }
&:nth-child(1) { &:nth-child(1) { transform: rotate(180deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(180deg);}}
transform: rotate(180deg) translate(-50%, -50%); &:nth-child(2) { transform: rotate(195deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(165deg);}}
i { &:nth-child(3) { transform: rotate(210deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(150deg);}}
transform: translateX(-50%) rotate(180deg); &:nth-child(4) { transform: rotate(225deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(135deg);}}
} &:nth-child(5) { transform: rotate(240deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(120deg);}}
} &:nth-child(6) { transform: rotate(255deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(105deg);}}
&:nth-child(2) { &:nth-child(7) { transform: rotate(270deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(90deg);}}
transform: rotate(195deg) translate(-50%, -50%); &:nth-child(8) { transform: rotate(285deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(75deg);}}
i { &:nth-child(9) { transform: rotate(300deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(60deg);}}
transform: translateX(-50%) rotate(165deg); &:nth-child(10) { transform: rotate(315deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(45deg);}}
} &:nth-child(11) { transform: rotate(330deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(30deg);}}
} &:nth-child(12) { transform: rotate(345deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(15deg);}}
&:nth-child(3) { &:nth-child(13) { transform: rotate(0deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(0deg);}}
transform: rotate(210deg) translate(-50%, -50%); &:nth-child(14) { transform: rotate(15deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-15deg);}}
i { &:nth-child(15) { transform: rotate(30deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-30deg);}}
transform: translateX(-50%) rotate(150deg); &:nth-child(16) { transform: rotate(45deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-45deg);}}
} &:nth-child(17) { transform: rotate(60deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-60deg);}}
} &:nth-child(18) { transform: rotate(75deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-75deg);}}
&:nth-child(4) { &:nth-child(19) { transform: rotate(90deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-90deg);}}
transform: rotate(225deg) translate(-50%, -50%); &:nth-child(20) { transform: rotate(105deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-105deg);}}
i { &:nth-child(21) { transform: rotate(120deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-120deg);}}
transform: translateX(-50%) rotate(135deg); &:nth-child(22) { transform: rotate(135deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-135deg);}}
} &:nth-child(23) { transform: rotate(150deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-150deg);}}
} &:nth-child(24) { transform: rotate(165deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-165deg);}}
&:nth-child(5) {
transform: rotate(240deg) translate(-50%, -50%);
i {
transform: translateX(-50%) rotate(120deg);
}
}
&:nth-child(6) {
transform: rotate(255deg) translate(-50%, -50%);
i {
transform: translateX(-50%) rotate(105deg);
}
}
&:nth-child(7) {
transform: rotate(270deg) translate(-50%, -50%);
i {
transform: translateX(-50%) rotate(90deg);
}
}
&:nth-child(8) {
transform: rotate(285deg) translate(-50%, -50%);
i {
transform: translateX(-50%) rotate(75deg);
}
}
&:nth-child(9) {
transform: rotate(300deg) translate(-50%, -50%);
i {
transform: translateX(-50%) rotate(60deg);
}
}
&:nth-child(10) {
transform: rotate(315deg) translate(-50%, -50%);
i {
transform: translateX(-50%) rotate(45deg);
}
}
&:nth-child(11) {
transform: rotate(330deg) translate(-50%, -50%);
i {
transform: translateX(-50%) rotate(30deg);
}
}
&:nth-child(12) {
transform: rotate(345deg) translate(-50%, -50%);
i {
transform: translateX(-50%) rotate(15deg);
}
}
&:nth-child(13) {
transform: rotate(0deg) translate(-50%, -50%);
i {
transform: translateX(-50%) rotate(0deg);
}
}
&:nth-child(14) {
transform: rotate(15deg) translate(-50%, -50%);
i {
transform: translateX(-50%) rotate(-15deg);
}
}
&:nth-child(15) {
transform: rotate(30deg) translate(-50%, -50%);
i {
transform: translateX(-50%) rotate(-30deg);
}
}
&:nth-child(16) {
transform: rotate(45deg) translate(-50%, -50%);
i {
transform: translateX(-50%) rotate(-45deg);
}
}
&:nth-child(17) {
transform: rotate(60deg) translate(-50%, -50%);
i {
transform: translateX(-50%) rotate(-60deg);
}
}
&:nth-child(18) {
transform: rotate(75deg) translate(-50%, -50%);
i {
transform: translateX(-50%) rotate(-75deg);
}
}
&:nth-child(19) {
transform: rotate(90deg) translate(-50%, -50%);
i {
transform: translateX(-50%) rotate(-90deg);
}
}
&:nth-child(20) {
transform: rotate(105deg) translate(-50%, -50%);
i {
transform: translateX(-50%) rotate(-105deg);
}
}
&:nth-child(21) {
transform: rotate(120deg) translate(-50%, -50%);
i {
transform: translateX(-50%) rotate(-120deg);
}
}
&:nth-child(22) {
transform: rotate(135deg) translate(-50%, -50%);
i {
transform: translateX(-50%) rotate(-135deg);
}
}
&:nth-child(23) {
transform: rotate(150deg) translate(-50%, -50%);
i {
transform: translateX(-50%) rotate(-150deg);
}
}
&:nth-child(24) {
transform: rotate(165deg) translate(-50%, -50%);
i {
transform: translateX(-50%) rotate(-165deg);
}
}
&.act{ &.act{
&::after{ &::after{
content: ''; content: '';
@ -1492,13 +1303,13 @@ $alert-color: #101010;
border-radius: 2px; border-radius: 2px;
background-color: transparent; background-color: transparent;
font-size: 12px; font-size: 12px;
color: #aaa; color: #AAA;
text-align: center; text-align: center;
cursor: default; cursor: default;
transition: all 0.15s ease-in-out; transition: all .15s ease-in-out;
&.act{ &.act{
background-color: #1083e3; background-color: #1083E3;
border: 1px solid #1083e3; border: 1px solid #1083E3;
color: #fff; color: #fff;
font-weight: 500; font-weight: 500;
} }
@ -1511,7 +1322,7 @@ $alert-color: #101010;
background-position: center; background-position: center;
background-size: cover; background-size: cover;
background-image: url(../../public/static/images/canvas/module_tab_arr.svg); background-image: url(../../public/static/images/canvas/module_tab_arr.svg);
transition: all 0.15s ease-in-out; transition: all .15s ease-in-out;
&.act{ &.act{
background-image: url(../../public/static/images/canvas/module_tab_arr_white.svg); background-image: url(../../public/static/images/canvas/module_tab_arr_white.svg);
} }
@ -1544,9 +1355,7 @@ $alert-color: #101010;
top: 22px; top: 22px;
} }
&.act{ &.act{
i { i{color: #8B8B8B;}
color: #8b8b8b;
}
} }
} }
} }
@ -1578,7 +1387,7 @@ $alert-color: #101010;
height: 30px; height: 30px;
font-size: 12px; font-size: 12px;
font-weight: 400; font-weight: 400;
transition: all 0.15s ease-in-out; transition: all .15s ease-in-out;
&:first-child{ &:first-child{
border-left: 1px solid #505050; border-left: 1px solid #505050;
} }
@ -1592,7 +1401,7 @@ $alert-color: #101010;
.module-table-box{ .module-table-box{
flex: 1; flex: 1;
background-color: #3d3d3d; background-color: #3D3D3D;
border-radius: 2px; border-radius: 2px;
.module-table-inner{ .module-table-inner{
padding: 10px; padding: 10px;
@ -1605,7 +1414,7 @@ $alert-color: #101010;
padding: 10px 0; padding: 10px 0;
font-size: 12px; font-size: 12px;
color: #fff; color: #fff;
border-bottom: 1px solid #4d4d4d; border-bottom: 1px solid #4D4D4D;
} }
.eaves-keraba-table{ .eaves-keraba-table{
width: 100%; width: 100%;
@ -1628,7 +1437,7 @@ $alert-color: #101010;
.warning-guide{ .warning-guide{
padding: 20px; padding: 20px;
.warning{ .warning{
color: #ffcaca; color: #FFCACA;
max-height: 55px; max-height: 55px;
overflow-y: auto; overflow-y: auto;
padding-right: 30px; padding-right: 30px;
@ -1637,7 +1446,7 @@ $alert-color: #101010;
background-color: transparent; background-color: transparent;
} }
&::-webkit-scrollbar-thumb { &::-webkit-scrollbar-thumb {
background-color: #d9d9d9; background-color: #D9D9D9;
} }
&::-webkit-scrollbar-track { &::-webkit-scrollbar-track {
background-color: transparent; background-color: transparent;
@ -1648,7 +1457,7 @@ $alert-color: #101010;
.module-self-table{ .module-self-table{
display: table; display: table;
border-top: 1px solid #4d4d4d; border-top: 1px solid #4D4D4D;
border-collapse: collapse; border-collapse: collapse;
width: 100%; width: 100%;
.self-table-item{ .self-table-item{
@ -1657,7 +1466,7 @@ $alert-color: #101010;
.self-item-th{ .self-item-th{
display: table-cell; display: table-cell;
vertical-align: middle; vertical-align: middle;
border-bottom: 1px solid #4d4d4d; border-bottom: 1px solid #4D4D4D;
} }
.self-item-th{ .self-item-th{
width: 60px; width: 60px;
@ -1685,7 +1494,7 @@ $alert-color: #101010;
.hexagonal-wrap{ .hexagonal-wrap{
.hexagonal-item{ .hexagonal-item{
padding: 15px 0; padding: 15px 0;
border-bottom: 1px solid #4d4d4d; border-bottom: 1px solid #4D4D4D;
&:first-child{ &:first-child{
padding-top: 0; padding-top: 0;
} }
@ -1710,24 +1519,51 @@ $alert-color: #101010;
// 회로 및 가대설정 // 회로 및 가대설정
.circuit-check-inner{ .circuit-check-inner{
padding: 5px 0; padding: 5px 0;
&.overflow{
overflow-y: auto;
max-height: 100px;
min-height: 60px;
&::-webkit-scrollbar {
width: 4px;
background-color: transparent;
}
&::-webkit-scrollbar-thumb {
background-color: #D9D9D9;
}
&::-webkit-scrollbar-track {
background-color: transparent;
}
}
.d-check-box{
margin-bottom: 15px;
&:last-child{
margin-bottom: 0;
}
}
} }
.x-scroll-table{ .x-scroll-table{
overflow-x: auto; overflow: auto;
padding-bottom: 5px; padding-bottom: 5px;
background-color: transparent;
max-height: 170px;
.roof-module-table{ .roof-module-table{
min-width: 1200px; min-width: 1200px;
} }
&::-webkit-scrollbar { &::-webkit-scrollbar {
width: 4px;
height: 4px; height: 4px;
background-color: transparent; background-color: transparent;
} }
&::-webkit-scrollbar-thumb { &::-webkit-scrollbar-thumb {
background-color: #d9d9d9; background-color: #b4b4b4;
} }
&::-webkit-scrollbar-track { &::-webkit-scrollbar-track {
background-color: transparent; background-color: transparent;
} }
&::-webkit-scrollbar-corner{
background-color: transparent;
}
} }
.circuit-right-wrap{ .circuit-right-wrap{
@ -1741,7 +1577,7 @@ $alert-color: #101010;
gap: 5px; gap: 5px;
min-height: 60px; min-height: 60px;
padding: 12px; padding: 12px;
border: 1px solid rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.20);
span{ span{
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
@ -1766,19 +1602,24 @@ $alert-color: #101010;
} }
.circuit-overflow{ .circuit-overflow{
max-height: 400px; overflow-x: auto;
overflow-y: auto; margin-bottom: 25px;
margin-bottom: 15px;
&::-webkit-scrollbar { &::-webkit-scrollbar {
width: 4px; height: 4px;
background-color: transparent; background-color: transparent;
} }
&::-webkit-scrollbar-thumb { &::-webkit-scrollbar-thumb {
background-color: #d9d9d9; background-color: #D9D9D9;
} }
&::-webkit-scrollbar-track { &::-webkit-scrollbar-track {
background-color: transparent; background-color: transparent;
} }
.module-table-box{
display: flex;
&.by-max{
min-width: 886px;
}
}
} }
.circuit-table-flx-wrap{ .circuit-table-flx-wrap{
@ -1833,10 +1674,10 @@ $alert-color: #101010;
height: 16px; height: 16px;
&.pink{ &.pink{
border: 2px solid #ce1c9c; border: 2px solid #ce1c9c;
background-color: #16417d; background-color: #16417D;
} }
&.white{ &.white{
border: 2px solid #fff; border: 2px solid #FFF;
background-color: #001027; background-color: #001027;
} }
} }
@ -1861,7 +1702,7 @@ $alert-color: #101010;
.react-colorful__pointer{ .react-colorful__pointer{
width: 15px; width: 15px;
height: 15px; height: 15px;
border: 4px solid #fff; border: 4px solid #Fff;
} }
.react-colorful__saturation{ .react-colorful__saturation{
border-radius: 2px; border-radius: 2px;
@ -1951,6 +1792,7 @@ $alert-color: #101010;
min-height: 80px; min-height: 80px;
background-color: #fff; background-color: #fff;
} }
} }
// 치수선 설정 // 치수선 설정
@ -2070,22 +1912,10 @@ $alert-color: #101010;
border-radius: 50%; border-radius: 50%;
} }
} }
&:nth-child(1) { &:nth-child(1){ top: 0; left: 0; }
top: 0; &:nth-child(2){ top: 0; right: 0; }
left: 0; &:nth-child(3){ bottom: 0; left: 0; }
} &:nth-child(4){ bottom: 0; right: 0; }
&:nth-child(2) {
top: 0;
right: 0;
}
&:nth-child(3) {
bottom: 0;
left: 0;
}
&:nth-child(4) {
bottom: 0;
right: 0;
}
} }
.size-box{ .size-box{
position: absolute; position: absolute;
@ -2169,6 +1999,7 @@ $alert-color: #101010;
&.tab2{ &.tab2{
margin-top: 10px; margin-top: 10px;
gap: 15px; gap: 15px;
} }
.module-flex-item{ .module-flex-item{
flex: 1; flex: 1;
@ -2177,7 +2008,7 @@ $alert-color: #101010;
font-weight: 500; font-weight: 500;
color: #fff; color: #fff;
padding-bottom: 10px; padding-bottom: 10px;
border-bottom: 1px solid #4d4d4d; border-bottom: 1px solid #4D4D4D;
} }
.flex-item-btn-wrap{ .flex-item-btn-wrap{
display: grid; display: grid;
@ -2225,12 +2056,12 @@ $alert-color: #101010;
} }
.module-bottom{ .module-bottom{
padding-bottom: 15px; padding-bottom: 15px;
border-bottom: 1px solid #4d4d4d; border-bottom: 1px solid #4D4D4D;
} }
.reset-word{ .reset-word{
font-size: 12px; font-size: 12px;
color: #ffcaca; color: #FFCACA;
font-weight: 400; font-weight: 400;
margin-top: 10px; margin-top: 10px;
} }

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

@ -321,7 +321,6 @@ export const drawGabledRoof = (roofId, canvas) => {
eaves.push({ index: index, roof: currentRoof, length: currentRoof.attributes.planeSize }) eaves.push({ index: index, roof: currentRoof, length: currentRoof.attributes.planeSize })
} }
}) })
const ridgeCount = eaves.length - 1
const ridges = [] const ridges = []
eaves.sort((a, b) => a.length - b.length) eaves.sort((a, b) => a.length - b.length)
@ -345,8 +344,6 @@ export const drawGabledRoof = (roofId, canvas) => {
} }
}) // 현재 벽라인과 직교하는 벽라인 }) // 현재 벽라인과 직교하는 벽라인
console.log('oppositeLine', oppositeLine)
// 현재 벽라인과 직교하는 벽라인 사이에 마루를 그린다. // 현재 벽라인과 직교하는 벽라인 사이에 마루를 그린다.
oppositeLine.forEach((line) => { oppositeLine.forEach((line) => {
let points // 마루의 시작점과 끝점 let points // 마루의 시작점과 끝점
@ -487,7 +484,6 @@ export const drawGabledRoof = (roofId, canvas) => {
} }
} else { } else {
const lastPoint = sortedPoints[sortedPoints.length - 1] const lastPoint = sortedPoints[sortedPoints.length - 1]
console.log('lastPoint', lastPoint)
const prevPoint = sortedPoints[sortedPoints.length - 2] const prevPoint = sortedPoints[sortedPoints.length - 2]
const otherPoints = points.filter((point) => sortedPoints.includes(point) === false) const otherPoints = points.filter((point) => sortedPoints.includes(point) === false)
const nextPoint = otherPoints.reduce((prev, current) => { const nextPoint = otherPoints.reduce((prev, current) => {