Merge branch 'dev' into dev-yj-layoutSetup
This commit is contained in:
yjnoh
commit
15ff2989f4
@ -2,9 +2,13 @@
|
||||
|
||||
import { useState } from 'react'
|
||||
import Draggable from 'react-draggable'
|
||||
import PopSpinner from '../spinner/PopSpinner'
|
||||
import { popSpinnerState } from '@/store/popupAtom'
|
||||
import { useRecoilState } from 'recoil'
|
||||
|
||||
export default function WithDraggable({ isShow, children, pos = { x: 0, y: 0 }, handle = '', className = '', hasFooter = true, isHidden = false }) {
|
||||
const [position, setPosition] = useState(pos)
|
||||
const [popSpinnerStore, setPopSpinnerStore] = useRecoilState(popSpinnerState)
|
||||
|
||||
const handleOnDrag = (e, data) => {
|
||||
e.stopPropagation()
|
||||
@ -25,6 +29,7 @@ export default function WithDraggable({ isShow, children, pos = { x: 0, y: 0 },
|
||||
<div className={`modal-pop-wrap ${className}`} style={{ visibility: isHidden ? 'hidden' : 'visible' }}>
|
||||
{children}
|
||||
{hasFooter && <WithDraggableFooter />}
|
||||
{popSpinnerStore && <PopSpinner />}
|
||||
</div>
|
||||
</Draggable>
|
||||
)}
|
||||
|
||||
@ -136,8 +136,20 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
|
||||
this.on('removed', () => {
|
||||
// const children = getAllRelatedObjects(this.id, this.canvas)
|
||||
const children = this.canvas.getObjects().filter((obj) => obj.parentId === this.id)
|
||||
|
||||
children.forEach((child) => {
|
||||
this.canvas.remove(child)
|
||||
|
||||
//그룹일때
|
||||
if (child.hasOwnProperty('_objects')) {
|
||||
child._objects.forEach((obj) => {
|
||||
if (obj.hasOwnProperty('texts')) {
|
||||
obj.texts.forEach((text) => {
|
||||
this.canvas?.remove(text)
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
@ -89,11 +89,11 @@ export default function CanvasMenu(props) {
|
||||
const selectedRoofMaterial = useRecoilValue(selectedRoofMaterialSelector)
|
||||
|
||||
//견적서버튼 노출용
|
||||
const [buttonStyle1, setButtonStyle1] = useState('') //문서 다운로드 버튼
|
||||
const [buttonStyle2, setButtonStyle2] = useState('') //저장 버튼
|
||||
const [buttonStyle3, setButtonStyle3] = useState('') //초기화 버튼
|
||||
const [buttonStyle4, setButtonStyle4] = useState('') //견적서 복사 버튼
|
||||
const [buttonStyle5, setButtonStyle5] = useState('') //잠금 버튼
|
||||
const [docDownButtonStyle, setDocDownButtonStyle] = useState('') //문서 다운로드 버튼
|
||||
const [saveButtonStyle, setSaveButtonStyle] = useState('') //저장 버튼
|
||||
const [resetButtonStyle, setResetButtonStyle] = useState('') //초기화 버튼
|
||||
const [copyButtonStyle, setCopyButtonStyle] = useState('') //견적서 복사 버튼
|
||||
const [lockButtonStyle, setLockButtonStyle] = useState('') //잠금 버튼
|
||||
|
||||
const setFloorPlanObjectNo = useSetRecoilState(floorPlanObjectState) //견적서 화면용 물건번호리코일
|
||||
|
||||
@ -442,28 +442,28 @@ export default function CanvasMenu(props) {
|
||||
}, [estimateContextState?.createUser, estimateContextState?.tempFlg, estimateContextState?.lockFlg, estimateContextState.docNo])
|
||||
|
||||
const setAllButtonStyles = (style) => {
|
||||
setButtonStyle1(style)
|
||||
setButtonStyle2(style)
|
||||
setButtonStyle3(style)
|
||||
setButtonStyle4(style)
|
||||
setButtonStyle5(style)
|
||||
setDocDownButtonStyle(style)
|
||||
setSaveButtonStyle(style)
|
||||
setResetButtonStyle(style)
|
||||
setCopyButtonStyle(style)
|
||||
setLockButtonStyle(style)
|
||||
}
|
||||
|
||||
const handleButtonStyles = (tempFlg, lockFlg, docNo) => {
|
||||
if (tempFlg === '1') {
|
||||
setAllButtonStyles('none')
|
||||
setButtonStyle2('')
|
||||
setSaveButtonStyle('')
|
||||
} else if (tempFlg === '0' && lockFlg === '0') {
|
||||
setAllButtonStyles('')
|
||||
} else {
|
||||
setButtonStyle1('')
|
||||
setButtonStyle2('none')
|
||||
setButtonStyle3('none')
|
||||
setButtonStyle4('')
|
||||
setButtonStyle5('')
|
||||
setDocDownButtonStyle('')
|
||||
setSaveButtonStyle('none')
|
||||
setResetButtonStyle('none')
|
||||
setCopyButtonStyle('')
|
||||
setLockButtonStyle('')
|
||||
}
|
||||
if (!docNo) {
|
||||
setButtonStyle1('none')
|
||||
setDocDownButtonStyle('none')
|
||||
}
|
||||
}
|
||||
|
||||
@ -513,11 +513,11 @@ export default function CanvasMenu(props) {
|
||||
|
||||
// 문서다운로드 팝업에서 다운로드 하면 문서 잠금
|
||||
const docDownPopLockFlg = () => {
|
||||
setButtonStyle1('')
|
||||
setButtonStyle2('none')
|
||||
setButtonStyle3('none')
|
||||
setButtonStyle4('')
|
||||
setButtonStyle5('')
|
||||
setDocDownButtonStyle('')
|
||||
setSaveButtonStyle('none')
|
||||
setResetButtonStyle('none')
|
||||
setCopyButtonStyle('')
|
||||
setLockButtonStyle('')
|
||||
}
|
||||
|
||||
return (
|
||||
@ -627,17 +627,22 @@ export default function CanvasMenu(props) {
|
||||
>
|
||||
<span className="name">{getMessage('stuff.search.btn.register')}</span>
|
||||
</button>
|
||||
<button type="button" style={{ display: buttonStyle1 }} className="btn-frame gray ico-flx" onClick={() => setEstimatePopupOpen(true)}>
|
||||
<button
|
||||
type="button"
|
||||
style={{ display: docDownButtonStyle }}
|
||||
className="btn-frame gray ico-flx"
|
||||
onClick={() => setEstimatePopupOpen(true)}
|
||||
>
|
||||
<span className="ico ico01"></span>
|
||||
<span className="name">{getMessage('plan.menu.estimate.docDown')}</span>
|
||||
</button>
|
||||
<button type="button" style={{ display: buttonStyle2 }} className="btn-frame gray ico-flx" onClick={handleEstimateSubmit}>
|
||||
<button type="button" style={{ display: saveButtonStyle }} className="btn-frame gray ico-flx" onClick={handleEstimateSubmit}>
|
||||
<span className="ico ico02"></span>
|
||||
<span className="name">{getMessage('plan.menu.estimate.save')}</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
style={{ display: buttonStyle3 }}
|
||||
style={{ display: resetButtonStyle }}
|
||||
className="btn-frame gray ico-flx"
|
||||
onClick={() => {
|
||||
handleEstimateReset()
|
||||
@ -650,7 +655,7 @@ export default function CanvasMenu(props) {
|
||||
{estimateRecoilState?.docNo !== null && (sessionState.storeId === 'T01' || sessionState.storeLvl === '1') && (
|
||||
<button
|
||||
type="button"
|
||||
style={{ display: buttonStyle4 }}
|
||||
style={{ display: copyButtonStyle }}
|
||||
className="btn-frame gray ico-flx"
|
||||
onClick={() => {
|
||||
setEstimateCopyPopupOpen(true)
|
||||
@ -662,7 +667,7 @@ export default function CanvasMenu(props) {
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
style={{ display: buttonStyle5 }}
|
||||
style={{ display: lockButtonStyle }}
|
||||
className="btn-frame gray ico-flx"
|
||||
onClick={() => {
|
||||
handleEstimateLockController(estimateRecoilState)
|
||||
|
||||
@ -51,7 +51,8 @@ export default function CircuitTrestleSetting({ id }) {
|
||||
// const { trigger: setCircuitData } = useCanvasPopupStatusController(4)
|
||||
// const [stepUpListData, setStepUpListData] = useRecoilState(stepUpListDataState)
|
||||
const [stepUpListData, setStepUpListData] = useState([])
|
||||
const [seletedOption, setSeletedOption] = useState(null)
|
||||
const [seletedMainOption, setSeletedMainOption] = useState(null)
|
||||
const [seletedSubOption, setSeletedSubOption] = useState(null)
|
||||
const { setModuleStatisticsData } = useCircuitTrestle()
|
||||
const { handleCanvasToPng } = useImgLoader()
|
||||
|
||||
@ -78,6 +79,7 @@ export default function CircuitTrestleSetting({ id }) {
|
||||
getRoofSurfaceList,
|
||||
getModuleList,
|
||||
removeNotAllocationModules,
|
||||
resetCircuits,
|
||||
} = useCircuitTrestle()
|
||||
// const { trigger: moduleSelectedDataTrigger } = useCanvasPopupStatusController(2)
|
||||
useEffect(() => {
|
||||
@ -92,6 +94,13 @@ export default function CircuitTrestleSetting({ id }) {
|
||||
// selectedModels,
|
||||
// pcsCheck,
|
||||
// })
|
||||
|
||||
return () => {
|
||||
const moduleSetupSurfaces = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE)
|
||||
if (moduleSetupSurfaces.some((surface) => !surface.isComplete)) {
|
||||
resetCircuits()
|
||||
}
|
||||
}
|
||||
}, [])
|
||||
|
||||
// 수동할당 시 모듈 삭제
|
||||
@ -445,6 +454,7 @@ export default function CircuitTrestleSetting({ id }) {
|
||||
allocationType,
|
||||
circuitAllocationType,
|
||||
setCircuitAllocationType,
|
||||
selectedMaker,
|
||||
selectedModels,
|
||||
setSelectedModels,
|
||||
getSelectedPcsItemList,
|
||||
@ -455,23 +465,27 @@ export default function CircuitTrestleSetting({ id }) {
|
||||
onValuesSelected: handleStepUpValuesSelected, // 선택된 값들을 처리하는 함수
|
||||
stepUpListData,
|
||||
setStepUpListData,
|
||||
seletedOption,
|
||||
setSeletedOption,
|
||||
seletedMainOption,
|
||||
setSeletedMainOption,
|
||||
seletedSubOption,
|
||||
setSeletedSubOption,
|
||||
getModuleList,
|
||||
setModuleStatisticsData,
|
||||
}
|
||||
|
||||
// 승압설정 목록 조회
|
||||
const getStepUpListData = () => {
|
||||
return stepUpListData[0].pcsItemList.map((item) => {
|
||||
const pcs = []
|
||||
console.log(stepUpListData)
|
||||
stepUpListData[0].pcsItemList.map((item, index) => {
|
||||
return item.serQtyList
|
||||
.filter((serQty) => serQty.selected)
|
||||
.map((serQty) => {
|
||||
return {
|
||||
.forEach((serQty) => {
|
||||
pcs.push({
|
||||
pcsMkrCd: item.pcsMkrCd,
|
||||
pcsSerCd: item.pcsSerCd,
|
||||
pcsItemId: item.itemId,
|
||||
pscOptCd: seletedOption.code,
|
||||
pscOptCd: getPcsOptCd(index),
|
||||
paralQty: serQty.paralQty,
|
||||
connections: item.connList?.length
|
||||
? [
|
||||
@ -480,9 +494,43 @@ export default function CircuitTrestleSetting({ id }) {
|
||||
},
|
||||
]
|
||||
: [],
|
||||
}
|
||||
})[0]
|
||||
})
|
||||
// return {
|
||||
// pcsMkrCd: item.pcsMkrCd,
|
||||
// pcsSerCd: item.pcsSerCd,
|
||||
// pcsItemId: item.itemId,
|
||||
// pscOptCd: getPcsOptCd(index),
|
||||
// paralQty: serQty.paralQty,
|
||||
// connections: item.connList?.length
|
||||
// ? [
|
||||
// {
|
||||
// connItemId: item.connList[0].itemId,
|
||||
// },
|
||||
// ]
|
||||
// : [],
|
||||
// }
|
||||
})
|
||||
})
|
||||
return pcs
|
||||
}
|
||||
|
||||
const getPcsOptCd = (index) => {
|
||||
console.log(selectedModels)
|
||||
console.log(seletedMainOption)
|
||||
console.log(seletedSubOption)
|
||||
if (selectedModels.some((model) => model.pcsSerParallelYn === 'Y')) {
|
||||
if (selectedModels.length > 1) {
|
||||
if (index === 0) {
|
||||
return seletedMainOption.code
|
||||
} else {
|
||||
return seletedSubOption.code
|
||||
}
|
||||
} else {
|
||||
return seletedMainOption.code
|
||||
}
|
||||
} else {
|
||||
return seletedMainOption.code
|
||||
}
|
||||
}
|
||||
|
||||
const handleStepUp = () => {
|
||||
|
||||
@ -13,7 +13,7 @@ import { useRecoilState } from 'recoil'
|
||||
import { useRecoilValue } from 'recoil'
|
||||
import { v4 as uuidv4 } from 'uuid'
|
||||
|
||||
const PCS_MKR_MULTI_TYPE = {
|
||||
export const PCS_MKR_MULTI_TYPE = {
|
||||
MULTI: 'MULTI',
|
||||
SINGLE_P: 'SINGLE-P',
|
||||
SINGLE_N: 'SINGLE-N',
|
||||
|
||||
@ -15,6 +15,7 @@ import { POLYGON_TYPE } from '@/common/common'
|
||||
import { useSwal } from '@/hooks/useSwal'
|
||||
import { circuitNumDisplaySelector } from '@/store/settingAtom'
|
||||
import { fontSelector } from '@/store/fontAtom'
|
||||
import { PCS_MKR_MULTI_TYPE } from './PowerConditionalSelect'
|
||||
|
||||
export default function StepUp(props) {
|
||||
const {
|
||||
@ -22,8 +23,11 @@ export default function StepUp(props) {
|
||||
allocationType,
|
||||
stepUpListData,
|
||||
setStepUpListData,
|
||||
seletedOption,
|
||||
setSeletedOption,
|
||||
seletedMainOption,
|
||||
setSeletedMainOption,
|
||||
seletedSubOption,
|
||||
setSeletedSubOption,
|
||||
selectedMaker,
|
||||
selectedModels,
|
||||
setSelectedModels,
|
||||
getSelectedPcsItemList,
|
||||
@ -42,17 +46,14 @@ export default function StepUp(props) {
|
||||
const canvas = useRecoilValue(canvasState)
|
||||
const selectedModules = useRecoilValue(selectedModuleState)
|
||||
const [optCodes, setOptCodes] = useState([])
|
||||
const [mainOptions, setMainOptions] = useState([])
|
||||
const [subOptions, setSubOptions] = useState([])
|
||||
|
||||
const [selectedRows, setSelectedRows] = useState({})
|
||||
const [isManualSelection, setIsManualSelection] = useState({})
|
||||
|
||||
const isDisplayCircuitNumber = useRecoilValue(circuitNumDisplaySelector)
|
||||
const circuitNumberText = useRecoilValue(fontSelector('circuitNumberText'))
|
||||
// useCanvasPopupStatusController(6)
|
||||
// const canvasPopupStatusState = useRecoilValue(canvasPopupStatusStore)
|
||||
// if (Object.keys(canvasPopupStatusState[6]).length !== 0) {
|
||||
// console.log('🚀 ~ useEffect ~ canvasPopupStatusState :', canvasPopupStatusState)
|
||||
// }
|
||||
|
||||
useEffect(() => {
|
||||
if (allocationType === 'auto') {
|
||||
@ -79,6 +80,11 @@ export default function StepUp(props) {
|
||||
/**
|
||||
* PCS 자동 승압설정 정보 조회
|
||||
*/
|
||||
|
||||
const isMultiOptions = () => {
|
||||
return selectedModels.some((model) => model.pcsSerParallelYn === 'Y')
|
||||
}
|
||||
|
||||
const fetchAutoStepUpData = async () => {
|
||||
try {
|
||||
const params = {
|
||||
@ -87,7 +93,6 @@ export default function StepUp(props) {
|
||||
roofSurfaceList: props.getRoofSurfaceList() /** 지붕면 목록 */,
|
||||
pcsItemList: props.getSelectedPcsItemList() /** PCS 아이템 목록 */,
|
||||
}
|
||||
|
||||
/** 회로 구성 가능 여부 체크 통과 시 승압설정 정보 조회 */
|
||||
getPcsVoltageStepUpList(params).then((res) => {
|
||||
if (res?.result.resultCode === 'S' && res?.data) {
|
||||
@ -98,12 +103,29 @@ export default function StepUp(props) {
|
||||
setStepUpListData(stepUpListData)
|
||||
|
||||
/** PCS 옵션 조회 */
|
||||
const formattedOptCodes = formatOptionCodes(res.data.optionList)
|
||||
setOptCodes(formattedOptCodes)
|
||||
setSeletedOption(formattedOptCodes[0])
|
||||
// const formattedOptCodes = formatOptionCodes(res.data.optionList)
|
||||
// setOptCodes(formattedOptCodes)
|
||||
// setSeletedOption(formattedOptCodes[0])
|
||||
|
||||
/** 캔버스에 회로 정보 적용 */
|
||||
stepUpListData[0].pcsItemList.forEach((pcsItem) => {
|
||||
// 병설일때 pcs 있으면 setSubOpsions, 없으면 setMainOptions
|
||||
console.log('stepUpListData', stepUpListData)
|
||||
stepUpListData[0].pcsItemList.forEach((pcsItem, index) => {
|
||||
const optionList = formatOptionCodes(pcsItem.optionList)
|
||||
if (isMultiOptions()) {
|
||||
if (index === 0) {
|
||||
setMainOptions(optionList)
|
||||
setSeletedMainOption(optionList[0])
|
||||
} else {
|
||||
setSubOptions(optionList)
|
||||
setSeletedSubOption(optionList[0])
|
||||
}
|
||||
} else {
|
||||
if (index === 0) {
|
||||
setMainOptions(optionList)
|
||||
setSeletedMainOption(optionList[0])
|
||||
}
|
||||
}
|
||||
const selectedSerQty = pcsItem.serQtyList.find((serQty) => serQty.selected)
|
||||
if (selectedSerQty) {
|
||||
selectedSerQty.roofSurfaceList.forEach((roofSurface) => {
|
||||
@ -165,12 +187,6 @@ export default function StepUp(props) {
|
||||
*/
|
||||
const fetchPassiStepUpData = async () => {
|
||||
try {
|
||||
// 1-1 2-2
|
||||
// canvas
|
||||
// .getObjects()
|
||||
// .filter((obj) => obj.name === POLYGON_TYPE.MODULE && obj.circuit)
|
||||
// .map((module) => module.circuitNumber)
|
||||
|
||||
/** 모듈 데이터 가져오기 */
|
||||
const modules = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE)
|
||||
|
||||
@ -208,6 +224,21 @@ export default function StepUp(props) {
|
||||
const pcsItemListWithSerQty = res.data.pcsItemList.map((pcsItem, index) => {
|
||||
const pcsData = pcsSummary[selectedModels[index].id] || { circuits: {}, totalModules: 0 }
|
||||
const circuitCounts = Object.values(pcsData.circuits)
|
||||
const optionList = formatOptionCodes(pcsItem.optionList)
|
||||
if (isMultiOptions()) {
|
||||
if (index === 0) {
|
||||
setMainOptions(optionList)
|
||||
setSeletedMainOption(optionList[0])
|
||||
} else {
|
||||
setSubOptions(optionList)
|
||||
setSeletedSubOption(optionList[0])
|
||||
}
|
||||
} else {
|
||||
if (index === 0) {
|
||||
setMainOptions(optionList)
|
||||
setSeletedMainOption(optionList[0])
|
||||
}
|
||||
}
|
||||
return {
|
||||
...pcsItem,
|
||||
serQtyList: [
|
||||
@ -234,9 +265,9 @@ export default function StepUp(props) {
|
||||
setStepUpListData(stepUpListData)
|
||||
|
||||
/** PCS 옵션 조회 */
|
||||
const formattedOptCodes = formatOptionCodes(res.data.optionList)
|
||||
setOptCodes(formattedOptCodes)
|
||||
setSeletedOption(formattedOptCodes[0])
|
||||
// const formattedOptCodes = formatOptionCodes(res.data.optionList)
|
||||
// setOptCodes(formattedOptCodes)
|
||||
// setSeletedOption(formattedOptCodes[0])
|
||||
}
|
||||
})
|
||||
} catch (error) {
|
||||
@ -249,9 +280,9 @@ export default function StepUp(props) {
|
||||
*/
|
||||
const formatOptionCodes = (optionList = []) => {
|
||||
return optionList?.map((opt) => ({
|
||||
code: opt.pcsOptCd ? opt.pcsOptCd : '',
|
||||
name: opt.pcsOptNm ? opt.pcsOptNm : '',
|
||||
nameJp: opt.pcsOptNmJp ? opt.pcsOptNmJp : '',
|
||||
code: opt.pcsOptCd ?? '',
|
||||
name: opt.pcsOptNm ?? '',
|
||||
nameJp: opt.pcsOptNmJp ?? '',
|
||||
}))
|
||||
}
|
||||
|
||||
@ -274,9 +305,9 @@ export default function StepUp(props) {
|
||||
*/
|
||||
const formatOptionList = (optionList = []) => {
|
||||
return optionList?.map((option) => ({
|
||||
pcsOptCd: option.pcsOptCd ? option.pcsOptCd : '',
|
||||
pcsOptNm: option.pcsOptNm ? option.pcsOptNm : '',
|
||||
pcsOptNmJp: option.pcsOptNmJp ? option.pcsOptNmJp : '',
|
||||
pcsOptCd: option.pcsOptCd ?? '',
|
||||
pcsOptNm: option.pcsOptNm ?? '',
|
||||
pcsOptNmJp: option.pcsOptNmJp ?? '',
|
||||
}))
|
||||
}
|
||||
|
||||
@ -293,6 +324,7 @@ export default function StepUp(props) {
|
||||
uniqueIndex: `${item.itemId}_${index}`, // 고유 식별자 추가(동일한 PCS를 구분)
|
||||
connList: formatConnList(item.connList),
|
||||
serQtyList: formatSerQtyList(item.serQtyList),
|
||||
optionList: item.optionList ?? [],
|
||||
}))
|
||||
}
|
||||
|
||||
@ -303,12 +335,12 @@ export default function StepUp(props) {
|
||||
if (!connList) return [] // null인 경우 빈 배열 반환
|
||||
|
||||
return connList?.map((conn) => ({
|
||||
connAllowCur: conn.connAllowCur ? conn.connAllowCur : 0,
|
||||
connMaxParalCnt: conn.connMaxParalCnt ? conn.connMaxParalCnt : 0,
|
||||
goodsNo: conn.goodsNo ? conn.goodsNo : '',
|
||||
itemId: conn.itemId ? conn.itemId : '',
|
||||
itemNm: conn.itemNm ? conn.itemNm : '',
|
||||
vstuParalCnt: conn.vstuParalCnt ? conn.vstuParalCnt : 0,
|
||||
connAllowCur: conn.connAllowCur ?? 0,
|
||||
connMaxParalCnt: conn.connMaxParalCnt ?? 0,
|
||||
goodsNo: conn.goodsNo ?? '',
|
||||
itemId: conn.itemId ?? '',
|
||||
itemNm: conn.itemNm ?? '',
|
||||
vstuParalCnt: conn.vstuParalCnt ?? 0,
|
||||
}))
|
||||
}
|
||||
|
||||
@ -318,10 +350,10 @@ export default function StepUp(props) {
|
||||
const formatSerQtyList = (serQtyList = []) => {
|
||||
return serQtyList?.map((qty) => ({
|
||||
code: uuidv4(),
|
||||
serQty: qty.serQty ? qty.serQty : 0,
|
||||
paralQty: qty.paralQty ? qty.paralQty : 0,
|
||||
rmdYn: qty.rmdYn ? qty.rmdYn : 'N',
|
||||
usePossYn: qty.usePossYn ? qty.usePossYn : 'Y',
|
||||
serQty: qty.serQty ?? 0,
|
||||
paralQty: qty.paralQty ?? 0,
|
||||
rmdYn: qty.rmdYn ?? 'N',
|
||||
usePossYn: qty.usePossYn ?? 'Y',
|
||||
roofSurfaceList: formatRoofSurfaceList(qty.roofSurfaceList),
|
||||
selected: qty.rmdYn === 'Y',
|
||||
}))
|
||||
@ -333,8 +365,8 @@ export default function StepUp(props) {
|
||||
const formatRoofSurfaceList = (roofSurfaceList = []) => {
|
||||
return roofSurfaceList?.map((rsf) => ({
|
||||
moduleList: formatModuleList(rsf.moduleList),
|
||||
roofSurface: rsf.roofSurface ? rsf.roofSurface : '',
|
||||
roofSurfaceId: rsf.roofSurfaceId ? rsf.roofSurfaceId : '',
|
||||
roofSurface: rsf.roofSurface ?? '',
|
||||
roofSurfaceId: rsf.roofSurfaceId ?? '',
|
||||
roofSurfaceIncl: rsf.roofSurfaceIncl ? +rsf.roofSurfaceIncl : '',
|
||||
}))
|
||||
}
|
||||
@ -344,10 +376,10 @@ export default function StepUp(props) {
|
||||
*/
|
||||
const formatModuleList = (moduleList = []) => {
|
||||
return moduleList?.map((module) => ({
|
||||
circuit: module.circuit ? module.circuit : '',
|
||||
itemId: module.itemId ? module.itemId : '',
|
||||
pcsItemId: module.pcsItemId ? module.pcsItemId : '',
|
||||
uniqueId: module.uniqueId ? module.uniqueId : '',
|
||||
circuit: module.circuit ?? '',
|
||||
itemId: module.itemId ?? '',
|
||||
pcsItemId: module.pcsItemId ?? '',
|
||||
uniqueId: module.uniqueId ?? '',
|
||||
}))
|
||||
}
|
||||
|
||||
@ -416,9 +448,9 @@ export default function StepUp(props) {
|
||||
setStepUpListData(stepUpListData)
|
||||
|
||||
/** PCS 옵션 조회 */
|
||||
const formattedOptCodes = formatOptionCodes(res.data.optionList)
|
||||
setOptCodes(formattedOptCodes)
|
||||
setSeletedOption(formattedOptCodes[0])
|
||||
// const formattedOptCodes = formatOptionCodes(res.data.optionList)
|
||||
// setOptCodes(formattedOptCodes)
|
||||
// setSeletedOption(formattedOptCodes[0])
|
||||
} else {
|
||||
swalFire({ text: getMessage('common.message.send.error') })
|
||||
}
|
||||
@ -532,7 +564,37 @@ export default function StepUp(props) {
|
||||
<>
|
||||
<div className="properties-setting-wrap outer">
|
||||
<div className="circuit-title-sel">
|
||||
<div className="outline-form">
|
||||
<p className="circuit-title">{getMessage('modal.circuit.trestle.setting.step.up.allocation.select.monitor')}</p>
|
||||
<div className="circuit-sel-wrap">
|
||||
<div className="grid-select mr10">
|
||||
{mainOptions.length > 0 && (
|
||||
<QSelectBox
|
||||
options={mainOptions}
|
||||
value={seletedMainOption}
|
||||
sourceKey="code"
|
||||
targetKey="code"
|
||||
showKey="name"
|
||||
onChange={(e) => setSeletedMainOption(e)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
{isMultiOptions() && selectedModels.length === 2 && (
|
||||
<div className="grid-select ">
|
||||
{subOptions.length > 0 && (
|
||||
<QSelectBox
|
||||
options={subOptions}
|
||||
value={seletedSubOption}
|
||||
sourceKey="code"
|
||||
targetKey="code"
|
||||
showKey="name"
|
||||
onChange={(e) => setSeletedSubOption(e)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* <div className="outline-form">
|
||||
<span className="mr10" style={{ width: 'auto' }}>
|
||||
{getMessage('modal.circuit.trestle.setting.step.up.allocation.select.monitor')}
|
||||
</span>
|
||||
@ -551,7 +613,7 @@ export default function StepUp(props) {
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div> */}
|
||||
</div>
|
||||
|
||||
<div className="slope-wrap">
|
||||
|
||||
@ -46,6 +46,10 @@ export default function PlanSizeSetting(props) {
|
||||
const changeInput = (value, e) => {
|
||||
const { name } = e.target
|
||||
|
||||
if (Number(value) > 100000) {
|
||||
value = 100000
|
||||
}
|
||||
|
||||
setPlanSizeSettingMode((prev) => {
|
||||
return {
|
||||
...prev,
|
||||
|
||||
71
src/components/footer/PromisePopup.jsx
Normal file
71
src/components/footer/PromisePopup.jsx
Normal file
@ -0,0 +1,71 @@
|
||||
import React, { useEffect } from 'react'
|
||||
import { popSpinnerState, promisePopupState } from '@/store/popupAtom'
|
||||
import { useRecoilState } from 'recoil'
|
||||
import WithDraggable from '../common/draggable/WithDraggable'
|
||||
import { useMessage } from '@/hooks/useMessage'
|
||||
|
||||
export default function PromisePopup() {
|
||||
const { getMessage } = useMessage()
|
||||
const [promisePopupStore, setPromisePopupStore] = useRecoilState(promisePopupState)
|
||||
const [popSpinnerStore, setPopSpinnerStore] = useRecoilState(popSpinnerState)
|
||||
|
||||
const handleSpinner = () => {
|
||||
setPopSpinnerStore(true)
|
||||
setTimeout(() => {
|
||||
setPopSpinnerStore(false)
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
return (
|
||||
<WithDraggable isShow={promisePopupStore} pos={{ x: 1000, y: 200 }} className="r">
|
||||
<WithDraggable.Header title={'popup promise test'} onClose={() => setPromisePopupStore(false)} />
|
||||
|
||||
<WithDraggable.Body>
|
||||
<div className="img-flex-box">
|
||||
<span className="normal-font mr10">{getMessage('modal.image.load.size.rotate')}</span>
|
||||
<label className="toggle-btn">
|
||||
<input type="checkbox" checked={true} value="1" />
|
||||
<span className="slider"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div className="img-load-from">
|
||||
<div className="img-load-item">
|
||||
<div className="d-check-radio pop">
|
||||
<input type="radio" name="radio03" id="ra06" value={'1'} />
|
||||
<label htmlFor="ra06">{getMessage('common.input.file')}</label>
|
||||
</div>
|
||||
<div className="img-flex-box">
|
||||
<div className="img-edit-wrap">
|
||||
<label className="img-edit-btn" htmlFor="img_file">
|
||||
<span className="img-edit"></span>
|
||||
{getMessage('common.load')}
|
||||
</label>
|
||||
<input type="file" id="img_file" style={{ display: 'none' }} />
|
||||
</div>
|
||||
<div className="img-name-wrap">
|
||||
<input type="text" className="input-origin al-l" value={'test'} readOnly />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="img-load-item">
|
||||
<div className="d-check-radio pop">
|
||||
<input type="radio" name="radio03" id="ra07" value={'2'} />
|
||||
<label htmlFor="ra07">{getMessage('common.input.address.load')}</label>
|
||||
</div>
|
||||
<div className="img-flex-box for-address">
|
||||
<input type="text" className="input-origin al-l mr10" placeholder={'住所入力'} value={'test'} />
|
||||
<div className="img-edit-wrap">
|
||||
<button className={`img-edit-btn`}>{getMessage('common.finish')}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal act" onClick={handleSpinner}>
|
||||
{getMessage('common.finish')}
|
||||
</button>
|
||||
</div>
|
||||
</WithDraggable.Body>
|
||||
</WithDraggable>
|
||||
)
|
||||
}
|
||||
@ -283,17 +283,17 @@ export default function StuffDetail() {
|
||||
autoHeight: true,
|
||||
cellStyle: { justifyContent: 'center' },
|
||||
cellRenderer: (params) => {
|
||||
let buttonStyle = ''
|
||||
let buttonStyle2 = ''
|
||||
let estimateDetailButtonStyle = ''
|
||||
let docDownButtonStyle = ''
|
||||
if (params.value == null) {
|
||||
buttonStyle = 'none'
|
||||
buttonStyle2 = 'none'
|
||||
estimateDetailButtonStyle = 'none'
|
||||
docDownButtonStyle = 'none'
|
||||
} else {
|
||||
if (params?.data?.createSaleStoreId === 'T01' && session?.storeId !== 'T01') {
|
||||
buttonStyle = 'none'
|
||||
estimateDetailButtonStyle = 'none'
|
||||
}
|
||||
if (params?.data?.tempFlg === '1' || !params?.data?.docNo) {
|
||||
buttonStyle2 = 'none'
|
||||
docDownButtonStyle = 'none'
|
||||
}
|
||||
}
|
||||
|
||||
@ -301,7 +301,7 @@ export default function StuffDetail() {
|
||||
<>
|
||||
<div className="grid-cell-btn">
|
||||
<button
|
||||
style={{ display: buttonStyle }}
|
||||
style={{ display: estimateDetailButtonStyle }}
|
||||
type="button"
|
||||
className="grid-btn"
|
||||
onClick={() => {
|
||||
@ -315,7 +315,7 @@ export default function StuffDetail() {
|
||||
{getMessage('stuff.detail.planGrid.btn1')}
|
||||
</button>
|
||||
<button
|
||||
style={{ display: buttonStyle2 }}
|
||||
style={{ display: docDownButtonStyle }}
|
||||
type="button"
|
||||
className="grid-btn"
|
||||
onClick={() => {
|
||||
|
||||
@ -640,13 +640,13 @@ export const useTrestle = () => {
|
||||
//surfaces.pcses들을 배열로 묶는다
|
||||
const pcses = surfaces[0].pcses.filter((pcs) => pcs !== null && pcs !== undefined)
|
||||
|
||||
surfaces.forEach((surface, index) => {
|
||||
if (index !== 0) {
|
||||
if (surface.pcses) {
|
||||
pcses.concat(surface.pcses)
|
||||
}
|
||||
}
|
||||
})
|
||||
// surfaces.forEach((surface, index) => {
|
||||
// if (index !== 0) {
|
||||
// if (surface.pcses) {
|
||||
// pcses.concat(surface.pcses)
|
||||
// }
|
||||
// }
|
||||
// })
|
||||
|
||||
const allModules = surfaces.map((surface) => surface.modules).flat()
|
||||
// 모듈 파라미터 생성
|
||||
|
||||
@ -64,9 +64,10 @@ export function useEstimate() {
|
||||
|
||||
// 캔버스 저장
|
||||
await saveCanvas(false)
|
||||
setIsGlobalLoading(false)
|
||||
|
||||
/* 견적서 저장이 완료되면 견적서 페이지로 이동 */
|
||||
moveEstimate(planNo, objectNo)
|
||||
// moveEstimate(planNo, objectNo)
|
||||
})
|
||||
.catch((error) => {
|
||||
setIsGlobalLoading(false)
|
||||
|
||||
@ -27,3 +27,15 @@ export const contextPopupPositionState = atom({
|
||||
},
|
||||
dangerouslyAllowMutability: true,
|
||||
})
|
||||
|
||||
/** 팝업 스피너 상태 */
|
||||
export const popSpinnerState = atom({
|
||||
key: 'popSpinnerStore',
|
||||
default: false,
|
||||
})
|
||||
|
||||
/** 프로미스 팝업 상태 - 테스트용(삭제 예정) */
|
||||
export const promisePopupState = atom({
|
||||
key: 'promisePopupStore',
|
||||
default: false,
|
||||
})
|
||||
|
||||
@ -5,24 +5,12 @@ $pop-normal-size: 12px;
|
||||
$alert-color: #101010;
|
||||
|
||||
@keyframes mountpop{
|
||||
from {
|
||||
opacity: 0;
|
||||
scale: 0.95;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
scale: 1;
|
||||
}
|
||||
from{opacity: 0; scale: 0.95;}
|
||||
to{opacity: 1; scale: 1;}
|
||||
}
|
||||
@keyframes unmountpop{
|
||||
from {
|
||||
opacity: 1;
|
||||
scale: 1;
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
scale: 0.95;
|
||||
}
|
||||
from{opacity: 1; scale: 1;}
|
||||
to{opacity: 0; scale: 0.95;}
|
||||
}
|
||||
|
||||
.normal-font{
|
||||
@ -97,10 +85,10 @@ $alert-color: #101010;
|
||||
width: 900px;
|
||||
}
|
||||
&.mount{
|
||||
animation: mountpop 0.17s ease-in-out forwards;
|
||||
animation: mountpop .17s ease-in-out forwards;
|
||||
}
|
||||
&.unmount{
|
||||
animation: unmountpop 0.17s ease-in-out forwards;
|
||||
animation: unmountpop .17s ease-in-out forwards;
|
||||
}
|
||||
&.alert{
|
||||
position: absolute;
|
||||
@ -226,7 +214,7 @@ $alert-color: #101010;
|
||||
}
|
||||
}
|
||||
.outer-line-wrap{
|
||||
border-top: 1px solid #3c3c3c;
|
||||
border-top: 1px solid #3C3C3C;
|
||||
margin-top: 10px;
|
||||
padding-top: 15px;
|
||||
margin-bottom: 15px;
|
||||
@ -255,7 +243,7 @@ $alert-color: #101010;
|
||||
.adsorption-point{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #3a3a3a;
|
||||
background-color: #3A3A3A;
|
||||
border-radius: 3px;
|
||||
padding-left: 11px;
|
||||
overflow: hidden;
|
||||
@ -276,7 +264,7 @@ $alert-color: #101010;
|
||||
&.act{
|
||||
i{
|
||||
color: $pop-color;
|
||||
background-color: #1083e3;
|
||||
background-color: #1083E3;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -305,7 +293,7 @@ $alert-color: #101010;
|
||||
background-color: transparent;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: #d9d9d9;
|
||||
background-color: #D9D9D9;
|
||||
}
|
||||
&::-webkit-scrollbar-track {
|
||||
background-color: transparent;
|
||||
@ -316,7 +304,7 @@ $alert-color: #101010;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: transparent;
|
||||
border: 1px solid #3d3d3d;
|
||||
border: 1px solid #3D3D3D;
|
||||
border-radius: 2px;
|
||||
padding: 15px 10px;
|
||||
gap: 20px;
|
||||
@ -355,6 +343,7 @@ $alert-color: #101010;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
transform: translateY(-50%);
|
||||
|
||||
}
|
||||
}
|
||||
.input-grid{
|
||||
@ -364,9 +353,7 @@ $alert-color: #101010;
|
||||
}
|
||||
}
|
||||
.select-form{
|
||||
.sort-select {
|
||||
width: 100%;
|
||||
}
|
||||
.sort-select{width: 100%;}
|
||||
}
|
||||
.grid-select{
|
||||
flex: 1;
|
||||
@ -412,6 +399,7 @@ $alert-color: #101010;
|
||||
color: $pop-color;
|
||||
font-weight: $pop-normal-weight;
|
||||
padding-bottom: 15px;
|
||||
|
||||
}
|
||||
.grid-direction{
|
||||
display: flex;
|
||||
@ -428,17 +416,11 @@ $alert-color: #101010;
|
||||
background-position: center;
|
||||
background-size: 16px 15px;
|
||||
border-radius: 50%;
|
||||
transition: all 0.15s ease-in-out;
|
||||
transition: all .15s ease-in-out;
|
||||
opacity: 0.6;
|
||||
&.down {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
&.left {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
&.right {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
&.down{transform: rotate(180deg);}
|
||||
&.left{transform: rotate(-90deg);}
|
||||
&.right{transform: rotate(90deg);}
|
||||
&:hover,
|
||||
&.act{
|
||||
opacity: 1;
|
||||
@ -524,11 +506,10 @@ $alert-color: #101010;
|
||||
}
|
||||
&.light{
|
||||
padding: 0;
|
||||
th,
|
||||
td {
|
||||
th,td{
|
||||
color: $alert-color;
|
||||
border-bottom: none;
|
||||
border-top: 1px solid #efefef;
|
||||
border-top: 1px solid #EFEFEF;
|
||||
}
|
||||
th{
|
||||
padding: 14px 0;
|
||||
@ -593,6 +574,7 @@ $alert-color: #101010;
|
||||
color: $pop-color;
|
||||
font-weight: $pop-normal-weight;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.img-edit-wrap{
|
||||
@ -608,7 +590,7 @@ $alert-color: #101010;
|
||||
background-color: #fff;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s ease-in-out;
|
||||
transition: all .15s ease-in-out;
|
||||
.img-edit{
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
@ -628,6 +610,7 @@ $alert-color: #101010;
|
||||
margin-left: 10px;
|
||||
input{
|
||||
flex: 1;
|
||||
|
||||
}
|
||||
.img-check{
|
||||
flex: none;
|
||||
@ -653,12 +636,8 @@ $alert-color: #101010;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
&.fail {
|
||||
background-image: url(../../public/static/images/canvas/img_check_fail.svg);
|
||||
}
|
||||
&.success {
|
||||
background-image: url(../../public/static/images/canvas/img_check_success.svg);
|
||||
}
|
||||
&.fail{background-image: url(../../public/static/images/canvas/img_check_fail.svg);}
|
||||
&.success{background-image: url(../../public/static/images/canvas/img_check_success.svg);}
|
||||
}
|
||||
}
|
||||
|
||||
@ -738,7 +717,7 @@ $alert-color: #101010;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 50%;
|
||||
background-color: #3d3d3d;
|
||||
background-color: #3D3D3D;
|
||||
border-radius: 2px ;
|
||||
}
|
||||
}
|
||||
@ -746,7 +725,7 @@ $alert-color: #101010;
|
||||
// 외벽선 속성 설정
|
||||
.properties-guide{
|
||||
font-size: $pop-normal-size;
|
||||
color: #aaa;
|
||||
color: #AAA;
|
||||
font-weight: $pop-normal-weight;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
@ -775,17 +754,17 @@ $alert-color: #101010;
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
border-radius: 2px;
|
||||
transition: all 0.15s ease-in-out;
|
||||
transition: all .15s ease-in-out;
|
||||
&.green{
|
||||
background-color: #305941;
|
||||
border: 1px solid #45cd7d;
|
||||
border: 1px solid #45CD7D;
|
||||
&:hover{
|
||||
background-color: #3a6b4e;
|
||||
}
|
||||
}
|
||||
&.blue{
|
||||
background-color: #2e5360;
|
||||
border: 1px solid #3fbae6;
|
||||
background-color: #2E5360;
|
||||
border: 1px solid #3FBAE6;
|
||||
&:hover{
|
||||
background-color: #365f6e;
|
||||
}
|
||||
@ -814,8 +793,8 @@ $alert-color: #101010;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
padding: 13px;
|
||||
background-color: #3d3d3d;
|
||||
transition: background 0.15s ease-in-out;
|
||||
background-color: #3D3D3D;
|
||||
transition: background .15s ease-in-out;
|
||||
img{
|
||||
max-width: 100%;
|
||||
}
|
||||
@ -826,17 +805,13 @@ $alert-color: #101010;
|
||||
color: $pop-color;
|
||||
margin-top: 10px;
|
||||
text-align: center;
|
||||
transition: color 0.15s ease-in-out;
|
||||
transition: color .15s ease-in-out;
|
||||
}
|
||||
.shape-menu-box{
|
||||
&.act,
|
||||
&:hover{
|
||||
.shape-box {
|
||||
background-color: #008bff;
|
||||
}
|
||||
.shape-title {
|
||||
color: #008bff;
|
||||
}
|
||||
.shape-box{background-color: #008BFF;}
|
||||
.shape-title{color: #008BFF;}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -851,7 +826,7 @@ $alert-color: #101010;
|
||||
}
|
||||
.discrimination-box{
|
||||
padding: 16px 12px;
|
||||
border: 1px solid #3d3d3d;
|
||||
border: 1px solid #3D3D3D;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
@ -884,12 +859,12 @@ $alert-color: #101010;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 5px;
|
||||
background-color: #3d3d3d;
|
||||
border: 1px solid #3d3d3d;
|
||||
background-color: #3D3D3D;
|
||||
border: 1px solid #3D3D3D;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
&.act{
|
||||
border: 1px solid #ed0004;
|
||||
border: 1px solid #ED0004;
|
||||
}
|
||||
}
|
||||
&:last-child{
|
||||
@ -939,7 +914,7 @@ $alert-color: #101010;
|
||||
font-weight: $pop-normal-weight;
|
||||
border: 1px solid #484848;
|
||||
background-color: #323234;
|
||||
transition: background-color 0.13s ease-in-out;
|
||||
transition: background-color .13s ease-in-out;
|
||||
i{
|
||||
display: block;
|
||||
width: 12px;
|
||||
@ -994,7 +969,7 @@ $alert-color: #101010;
|
||||
border: 1px solid #646464;
|
||||
border-radius: 2px;
|
||||
padding: 0 10px;
|
||||
transition: all 0.15s ease-in-out;
|
||||
transition: all .15s ease-in-out;
|
||||
i{
|
||||
height: 15px;
|
||||
display: block;
|
||||
@ -1002,7 +977,7 @@ $alert-color: #101010;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
transition: all 0.15s ease-in-out;
|
||||
transition: all .15s ease-in-out;
|
||||
&.allocation01{
|
||||
background-image: url(../../public/static/images/canvas/allocation_icon01_white.svg);
|
||||
width: 15px;
|
||||
@ -1075,9 +1050,7 @@ $alert-color: #101010;
|
||||
height: 34px;
|
||||
background-color: #373737;
|
||||
border: 1px solid #676767;
|
||||
transition:
|
||||
background 0.15s ease-in-out,
|
||||
border 0.15s ease-in-out;
|
||||
transition: background .15s ease-in-out, border .15s ease-in-out;
|
||||
.shape-box{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@ -1089,8 +1062,8 @@ $alert-color: #101010;
|
||||
}
|
||||
&.act,
|
||||
&:hover{
|
||||
border-color: #008bff;
|
||||
background-color: #008bff;
|
||||
border-color: #008BFF;
|
||||
background-color: #008BFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1105,27 +1078,18 @@ $alert-color: #101010;
|
||||
.library-btn{
|
||||
width: 100%;
|
||||
height: 34px;
|
||||
border: 1px solid #6c6c6c;
|
||||
border: 1px solid #6C6C6C;
|
||||
border-radius: 2px;
|
||||
background-color: #373737;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
transition: all 0.15s ease-in-out;
|
||||
&.ico01 {
|
||||
background-image: url(../../public/static/images/canvas/shape_labrary01.svg);
|
||||
background-size: 19px 18px;
|
||||
}
|
||||
&.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;
|
||||
}
|
||||
transition: all .15s ease-in-out;
|
||||
&.ico01{background-image: url(../../public/static/images/canvas/shape_labrary01.svg); background-size: 19px 18px;}
|
||||
&.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{
|
||||
border-color: #1083e3;
|
||||
background-color: #1083e3;
|
||||
border-color: #1083E3;
|
||||
background-color: #1083E3;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1211,27 +1175,11 @@ $alert-color: #101010;
|
||||
position: absolute;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: #b1b1b1;
|
||||
&.top {
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-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%);
|
||||
}
|
||||
color: #B1B1B1;
|
||||
&.top{top: 0; left: 50%; transform: translateX(-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{
|
||||
position: absolute;
|
||||
@ -1243,27 +1191,11 @@ $alert-color: #101010;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
border-radius: 50%;
|
||||
transition: all 0.15s ease-in-out;
|
||||
&.up {
|
||||
top: 22px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
&.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);
|
||||
}
|
||||
transition: all .15s ease-in-out;
|
||||
&.up{top: 22px; left: 50%; transform: translateX(-50%);}
|
||||
&.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,
|
||||
&.act{
|
||||
background-color: #fff;
|
||||
@ -1340,7 +1272,7 @@ $alert-color: #101010;
|
||||
.warning{
|
||||
font-size: $pop-normal-size;
|
||||
font-weight: $pop-normal-weight;
|
||||
color: #ffafaf;
|
||||
color: #FFAFAF;
|
||||
}
|
||||
|
||||
// 각 변 속성 변경
|
||||
@ -1396,157 +1328,37 @@ $alert-color: #101010;
|
||||
top: 12.5px;
|
||||
left: 50%;
|
||||
font-size: 11px;
|
||||
color: #8b8b8b;
|
||||
color: #8B8B8B;
|
||||
font-weight: 500;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-use-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
&:nth-child(1) {
|
||||
transform: rotate(180deg) translate(-50%, -50%);
|
||||
i {
|
||||
transform: translateX(-50%) rotate(180deg);
|
||||
}
|
||||
}
|
||||
&:nth-child(2) {
|
||||
transform: rotate(195deg) translate(-50%, -50%);
|
||||
i {
|
||||
transform: translateX(-50%) rotate(165deg);
|
||||
}
|
||||
}
|
||||
&:nth-child(3) {
|
||||
transform: rotate(210deg) translate(-50%, -50%);
|
||||
i {
|
||||
transform: translateX(-50%) rotate(150deg);
|
||||
}
|
||||
}
|
||||
&: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(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);
|
||||
}
|
||||
}
|
||||
&:nth-child(1) { transform: rotate(180deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(180deg);}}
|
||||
&:nth-child(2) { transform: rotate(195deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(165deg);}}
|
||||
&:nth-child(3) { transform: rotate(210deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(150deg);}}
|
||||
&: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(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{
|
||||
&::after{
|
||||
content: '';
|
||||
@ -1600,13 +1412,13 @@ $alert-color: #101010;
|
||||
border-radius: 2px;
|
||||
background-color: transparent;
|
||||
font-size: 12px;
|
||||
color: #aaa;
|
||||
color: #AAA;
|
||||
text-align: center;
|
||||
cursor: default;
|
||||
transition: all 0.15s ease-in-out;
|
||||
transition: all .15s ease-in-out;
|
||||
&.act{
|
||||
background-color: #1083e3;
|
||||
border: 1px solid #1083e3;
|
||||
background-color: #1083E3;
|
||||
border: 1px solid #1083E3;
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
}
|
||||
@ -1619,7 +1431,7 @@ $alert-color: #101010;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
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{
|
||||
background-image: url(../../public/static/images/canvas/module_tab_arr_white.svg);
|
||||
}
|
||||
@ -1652,9 +1464,7 @@ $alert-color: #101010;
|
||||
top: 22px;
|
||||
}
|
||||
&.act{
|
||||
i {
|
||||
color: #8b8b8b;
|
||||
}
|
||||
i{color: #8B8B8B;}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1686,7 +1496,7 @@ $alert-color: #101010;
|
||||
height: 30px;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
transition: all 0.15s ease-in-out;
|
||||
transition: all .15s ease-in-out;
|
||||
&:first-child{
|
||||
border-left: 1px solid #505050;
|
||||
}
|
||||
@ -1700,7 +1510,7 @@ $alert-color: #101010;
|
||||
|
||||
.module-table-box{
|
||||
flex: 1;
|
||||
background-color: #3d3d3d;
|
||||
background-color: #3D3D3D;
|
||||
border-radius: 2px;
|
||||
.module-table-inner{
|
||||
padding: 10px;
|
||||
@ -1713,7 +1523,7 @@ $alert-color: #101010;
|
||||
padding: 10px 0;
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
border-bottom: 1px solid #4d4d4d;
|
||||
border-bottom: 1px solid #4D4D4D;
|
||||
}
|
||||
.eaves-keraba-table{
|
||||
width: 100%;
|
||||
@ -1736,7 +1546,7 @@ $alert-color: #101010;
|
||||
.warning-guide{
|
||||
padding: 20px;
|
||||
.warning{
|
||||
color: #ffcaca;
|
||||
color: #FFCACA;
|
||||
max-height: 55px;
|
||||
overflow-y: auto;
|
||||
padding-right: 30px;
|
||||
@ -1745,7 +1555,7 @@ $alert-color: #101010;
|
||||
background-color: transparent;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: #d9d9d9;
|
||||
background-color: #D9D9D9;
|
||||
}
|
||||
&::-webkit-scrollbar-track {
|
||||
background-color: transparent;
|
||||
@ -1756,7 +1566,7 @@ $alert-color: #101010;
|
||||
|
||||
.module-self-table{
|
||||
display: table;
|
||||
border-top: 1px solid #4d4d4d;
|
||||
border-top: 1px solid #4D4D4D;
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
.self-table-item{
|
||||
@ -1765,7 +1575,7 @@ $alert-color: #101010;
|
||||
.self-item-th{
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
border-bottom: 1px solid #4d4d4d;
|
||||
border-bottom: 1px solid #4D4D4D;
|
||||
}
|
||||
.self-item-th{
|
||||
width: 60px;
|
||||
@ -1793,7 +1603,7 @@ $alert-color: #101010;
|
||||
.hexagonal-wrap{
|
||||
.hexagonal-item{
|
||||
padding: 15px 0;
|
||||
border-bottom: 1px solid #4d4d4d;
|
||||
border-bottom: 1px solid #4D4D4D;
|
||||
&:first-child{
|
||||
padding-top: 0;
|
||||
}
|
||||
@ -1827,7 +1637,7 @@ $alert-color: #101010;
|
||||
background-color: transparent;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: #d9d9d9;
|
||||
background-color: #D9D9D9;
|
||||
}
|
||||
&::-webkit-scrollbar-track {
|
||||
background-color: transparent;
|
||||
@ -1876,7 +1686,7 @@ $alert-color: #101010;
|
||||
gap: 5px;
|
||||
min-height: 60px;
|
||||
padding: 12px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
border: 1px solid rgba(255, 255, 255, 0.20);
|
||||
span{
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
@ -1907,7 +1717,7 @@ $alert-color: #101010;
|
||||
background-color: transparent;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: #d9d9d9;
|
||||
background-color: #D9D9D9;
|
||||
}
|
||||
&::-webkit-scrollbar-track {
|
||||
background-color: transparent;
|
||||
@ -1921,26 +1731,31 @@ $alert-color: #101010;
|
||||
}
|
||||
.circuit-title-sel{
|
||||
padding-bottom: 14px;
|
||||
.outline-form {
|
||||
span {
|
||||
color: #62c207;
|
||||
.circuit-title{
|
||||
font-size: 12px;
|
||||
color: #62C207;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.circuit-sel-wrap{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.grid-select{
|
||||
.sort-select{
|
||||
border: 1px solid #4e9e04;
|
||||
background-color: #1a3104;
|
||||
border: 1px solid #4E9E04;
|
||||
background-color: #1A3104;
|
||||
p{
|
||||
line-height: 27px;
|
||||
}
|
||||
.select-item-wrap{
|
||||
background-color: #1a3104;
|
||||
border: 1px solid #4e9e04;
|
||||
background-color: #1A3104;
|
||||
border: 1px solid #4E9E04;
|
||||
.select-item:hover{
|
||||
background-color: #294e07;
|
||||
}
|
||||
&::-webkit-scrollbar {
|
||||
width: 2px;
|
||||
background-color: transparent;
|
||||
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: #fff;
|
||||
@ -2007,10 +1822,10 @@ $alert-color: #101010;
|
||||
height: 16px;
|
||||
&.pink{
|
||||
border: 2px solid #ce1c9c;
|
||||
background-color: #16417d;
|
||||
background-color: #16417D;
|
||||
}
|
||||
&.white{
|
||||
border: 2px solid #fff;
|
||||
border: 2px solid #FFF;
|
||||
background-color: #001027;
|
||||
}
|
||||
}
|
||||
@ -2035,7 +1850,7 @@ $alert-color: #101010;
|
||||
.react-colorful__pointer{
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
border: 4px solid #fff;
|
||||
border: 4px solid #Fff;
|
||||
}
|
||||
.react-colorful__saturation{
|
||||
border-radius: 2px;
|
||||
@ -2125,6 +1940,7 @@ $alert-color: #101010;
|
||||
min-height: 80px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// 치수선 설정
|
||||
@ -2244,22 +2060,10 @@ $alert-color: #101010;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
&:nth-child(1) {
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
&:nth-child(2) {
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
&:nth-child(3) {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
&:nth-child(4) {
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
&:nth-child(1){ top: 0; left: 0; }
|
||||
&:nth-child(2){ top: 0; right: 0; }
|
||||
&:nth-child(3){ bottom: 0; left: 0; }
|
||||
&:nth-child(4){ bottom: 0; right: 0; }
|
||||
}
|
||||
.size-box{
|
||||
position: absolute;
|
||||
@ -2352,13 +2156,13 @@ $alert-color: #101010;
|
||||
max-height: 650px;
|
||||
overflow-y: auto;
|
||||
padding-bottom: 15px;
|
||||
border-bottom: 1px solid #4d4d4d;
|
||||
border-bottom: 1px solid #4D4D4D;
|
||||
&::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
background-color: transparent;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: #d9d9d9;
|
||||
background-color: #D9D9D9;
|
||||
}
|
||||
&::-webkit-scrollbar-track {
|
||||
background-color: transparent;
|
||||
@ -2368,6 +2172,7 @@ $alert-color: #101010;
|
||||
&.tab2{
|
||||
margin-top: 10px;
|
||||
gap: 15px;
|
||||
|
||||
}
|
||||
.module-flex-item{
|
||||
flex: 1;
|
||||
@ -2376,7 +2181,7 @@ $alert-color: #101010;
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid #4d4d4d;
|
||||
border-bottom: 1px solid #4D4D4D;
|
||||
}
|
||||
.flex-item-btn-wrap{
|
||||
display: grid;
|
||||
@ -2424,120 +2229,6 @@ $alert-color: #101010;
|
||||
}
|
||||
}
|
||||
|
||||
.pop-spinner {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 5px;
|
||||
width: calc(100% - 10px);
|
||||
height: calc(100% - 49px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: rgba($color: #101010, $alpha: 0.5);
|
||||
z-index: 2000000;
|
||||
.loader {
|
||||
font-size: 10px;
|
||||
width: 1.2em;
|
||||
height: 1.2em;
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
text-indent: -9999em;
|
||||
animation: mulShdSpin 1.1s infinite ease;
|
||||
transform: translateZ(0);
|
||||
}
|
||||
@keyframes mulShdSpin {
|
||||
0%,
|
||||
100% {
|
||||
box-shadow:
|
||||
0em -2.6em 0em 0em #fff,
|
||||
1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
|
||||
2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
|
||||
1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
|
||||
0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
|
||||
-1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2),
|
||||
-2.6em 0em 0 0em rgba(255, 255, 255, 0.5),
|
||||
-1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
12.5% {
|
||||
box-shadow:
|
||||
0em -2.6em 0em 0em rgba(255, 255, 255, 0.7),
|
||||
1.8em -1.8em 0 0em #fff,
|
||||
2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
|
||||
1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
|
||||
0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
|
||||
-1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
|
||||
-2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
|
||||
-1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
25% {
|
||||
box-shadow:
|
||||
0em -2.6em 0em 0em rgba(255, 255, 255, 0.5),
|
||||
1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7),
|
||||
2.5em 0em 0 0em #fff,
|
||||
1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
|
||||
0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
|
||||
-1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
|
||||
-2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
|
||||
-1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
37.5% {
|
||||
box-shadow:
|
||||
0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
|
||||
1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5),
|
||||
2.5em 0em 0 0em rgba(255, 255, 255, 0.7),
|
||||
1.75em 1.75em 0 0em #fff,
|
||||
0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
|
||||
-1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
|
||||
-2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
|
||||
-1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
50% {
|
||||
box-shadow:
|
||||
0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
|
||||
1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
|
||||
2.5em 0em 0 0em rgba(255, 255, 255, 0.5),
|
||||
1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7),
|
||||
0em 2.5em 0 0em #fff,
|
||||
-1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
|
||||
-2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
|
||||
-1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
62.5% {
|
||||
box-shadow:
|
||||
0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
|
||||
1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
|
||||
2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
|
||||
1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5),
|
||||
0em 2.5em 0 0em rgba(255, 255, 255, 0.7),
|
||||
-1.8em 1.8em 0 0em #fff,
|
||||
-2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
|
||||
-1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
75% {
|
||||
box-shadow:
|
||||
0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
|
||||
1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
|
||||
2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
|
||||
1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
|
||||
0em 2.5em 0 0em rgba(255, 255, 255, 0.5),
|
||||
-1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7),
|
||||
-2.6em 0em 0 0em #fff,
|
||||
-1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
87.5% {
|
||||
box-shadow:
|
||||
0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
|
||||
1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
|
||||
2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
|
||||
1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
|
||||
0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
|
||||
-1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5),
|
||||
-2.6em 0em 0 0em rgba(255, 255, 255, 0.7),
|
||||
-1.8em -1.8em 0 0em #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pop-spinner{
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user