From edd660b2454bb3654c4cf0b009e3af181e242811 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EB=AF=BC=EC=8B=9D?= <43837214+Minsiki@users.noreply.github.com> Date: Thu, 23 Jan 2025 09:33:18 +0900 Subject: [PATCH] =?UTF-8?q?=EC=9E=90=EB=8F=99=20=ED=9A=8C=EB=A1=9C?= =?UTF-8?q?=ED=95=A0=EB=8B=B9=20=EA=B0=9C=EB=B0=9C=EC=A4=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../circuitTrestle/CircuitTrestleSetting.jsx | 9 +- .../step/PowerConditionalSelect.jsx | 1 + .../step/type/PassivityCircuitAllocation.jsx | 159 +++++++++++++----- src/hooks/useCanvasEvent.js | 4 +- 4 files changed, 122 insertions(+), 51 deletions(-) diff --git a/src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx b/src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx index fc0be1f6..fa4abd4c 100644 --- a/src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx +++ b/src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx @@ -62,8 +62,8 @@ export default function CircuitTrestleSetting({ id }) { const passivityProps = { tabNum, setTabNum, - models, - setModels, + selectedModels, + setSelectedModels, } const stepUpProps = { tabNum, @@ -170,16 +170,13 @@ export default function CircuitTrestleSetting({ id }) { } const onPassivityAllocation = () => { - console.log('πŸš€ ~ onPassivityAllocation ~ selectedModels:', models) - - if (models.filter((m) => m.selected).length === 0) { + if (selectedModels.length === 0) { swalFire({ title: 'νŒŒμ›Œ μ»¨λ””μ…”λ„ˆλ₯Ό μΆ”κ°€ν•΄ μ£Όμ„Έμš”.', type: 'alert', }) return } else if (pcsCheck.max) { - const selectedModels = models.filter((m) => m.selected) const moduleStdQty = selectedModels.reduce((acc, model) => { return acc + parseInt(model.moduleStdQty) }, 0) diff --git a/src/components/floor-plan/modal/circuitTrestle/step/PowerConditionalSelect.jsx b/src/components/floor-plan/modal/circuitTrestle/step/PowerConditionalSelect.jsx index bf362856..fbaef41a 100644 --- a/src/components/floor-plan/modal/circuitTrestle/step/PowerConditionalSelect.jsx +++ b/src/components/floor-plan/modal/circuitTrestle/step/PowerConditionalSelect.jsx @@ -37,6 +37,7 @@ export default function PowerConditionalSelect(props) { const selectedModules = useRecoilValue(selectedModuleState) const { swalFire } = useSwal() const modelHeader = [ + { name: getMessage('μ‹œλ¦¬μ¦ˆ'), width: '15%', prop: 'pcsSerNm', type: 'color-box' }, { name: getMessage('λͺ…μΉ­'), width: '15%', prop: 'itemNm', type: 'color-box' }, { name: `${getMessage('modal.circuit.trestle.setting.power.conditional.select.rated.output')} (kW)`, diff --git a/src/components/floor-plan/modal/circuitTrestle/step/type/PassivityCircuitAllocation.jsx b/src/components/floor-plan/modal/circuitTrestle/step/type/PassivityCircuitAllocation.jsx index a1c26c6b..62e54ec1 100644 --- a/src/components/floor-plan/modal/circuitTrestle/step/type/PassivityCircuitAllocation.jsx +++ b/src/components/floor-plan/modal/circuitTrestle/step/type/PassivityCircuitAllocation.jsx @@ -8,38 +8,68 @@ import { useContext, useEffect, useState } from 'react' import { useRecoilValue } from 'recoil' export default function PassivityCircuitAllocation(props) { - const { tabNum, setTabNum, models, setModels } = props + const { tabNum, setTabNum, selectedModels } = props const { getMessage } = useMessage() const canvas = useRecoilValue(canvasState) const { managementState, setManagementState, managementStateLoaded } = useContext(GlobalDataContext) const selectedModules = useRecoilValue(selectedModuleState) const moduleStatistics = useRecoilValue(moduleStatisticsState) // const [totalWpout, setTotalWpout] = useState(0) - const [selectedPcs, setSelectedPcs] = useState(models.filter((model) => model.selected)[0]) + const [selectedPcs, setSelectedPcs] = useState(selectedModels[0]) const { header, rows: row } = moduleStatistics const [headers, setHeaders] = useState(header) const [rows, setRows] = useState(row) const [footer, setFooter] = useState(['합계']) + const [circuitNumber, setCircuitNumber] = useState(1) + const [targetModules, setTargetModules] = useState([]) + + useEffect(() => { + console.log('πŸš€ ~ PassivityCircuitAllocation ~ targetModules:', targetModules) + }, [targetModules]) + + const handleTargetModules = (obj) => { + if (!Array.isArray(targetModules)) { + setTargetModules([]) + return + } + + setTargetModules((prev) => { + if (prev.includes(obj.id)) { + obj.set({ strokeWidth: 0.3 }) + return prev.filter((o) => o !== obj.id) + } else { + obj.set({ strokeWidth: 2 }) + return [...prev, obj.id] + } + }) + + canvas.renderAll() + } useEffect(() => { setSurfaceInfo() if (!managementState) { setManagementState(managementStateLoaded) } + const modules = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE) + + modules.forEach((obj) => { + obj.on('mousedown', (e) => handleTargetModules(obj)) + }) + + return () => { + canvas + .getObjects() + .filter((obj) => obj.name === POLYGON_TYPE.MODULE) + .forEach((obj) => { + obj.set({ strokeWidth: 0.3 }) + obj.off('mousedown') + }) + canvas.renderAll() + } }, []) - useEffect(() => { - console.log('πŸš€ ~ useEffect ~ headers:', headers) - }, [headers]) - - useEffect(() => { - console.log('πŸš€ ~ useEffect ~ rows:', rows) - }, [rows]) - const setSurfaceInfo = () => { - console.log('πŸš€ ~ setSurfaceInfo ~ headers:', headers) - console.log('πŸš€ ~ setSurfaceInfo ~ rows:', rows) - // console.log('πŸš€ ~ setSurfaceInfo ~ surfaces:', surfaces) const surfaces = canvas.getObjects().filter((obj) => POLYGON_TYPE.MODULE_SETUP_SURFACE === obj.name) setHeaders([header[0], { name: '회둜', prop: 'circuit' }, ...header.slice(1)]) setRows( @@ -63,7 +93,6 @@ export default function PassivityCircuitAllocation(props) { totals[header[3]] += +row[header[3]] } }) - console.log(totals) setFooter([ ...['합계', ''], ...Object.keys(totals).map((key) => { @@ -113,6 +142,39 @@ export default function PassivityCircuitAllocation(props) { // rows: rows, // }) } + + const handleCircuitNumberFix = () => { + console.log('πŸš€ ~ handleCircuitNumberFix ~ circuitNumber:', circuitNumber) + canvas + .getObjects() + .filter((obj) => targetModules.includes(obj.id)) + .forEach((obj) => { + obj.set({ + circuit: circuitNumber, + }) + canvas.add( + new fabric.Text(`(${circuitNumber})`, { + left: obj.left + obj.width / 2, + top: obj.top + obj.height / 2, + fill: 'red', + fontSize: 20, + width: obj.width, + height: obj.height, + textAlign: 'center', + originX: 'center', + originY: 'center', + name: 'circuitNumber', + parentId: obj.id, + }), + ) + canvas.renderAll() + console.log(obj) + }) + setTargetModules([]) + setCircuitNumber(circuitNumber + 1) + canvas.renderAll() + } + return ( <>
@@ -126,22 +188,26 @@ export default function PassivityCircuitAllocation(props) { - {headers.map((header) => ( - + {headers.map((header, index) => ( + ))} {rows.map((row, index) => ( - {headers.map((header) => ( - + {headers.map((header, i) => ( + ))} ))} - {footer.map((footer) => ( - + {footer.map((footer, index) => ( + ))} @@ -157,27 +223,25 @@ export default function PassivityCircuitAllocation(props) {
{getMessage('modal.circuit.trestle.setting.circuit.allocation.passivity.selected.power.conditional')}
- {models - .filter((model) => model.selected) - .map((model, index) => ( -
- setSelectedPcs(model)} - /> - -
- ))} + {selectedModels.map((model, index) => ( +
+ setSelectedPcs(model)} + /> + +
+ ))} {/*
@@ -201,9 +265,18 @@ export default function PassivityCircuitAllocation(props) { {getMessage('modal.circuit.trestle.setting.circuit.allocation.passivity.circuit.num')}
- + setCircuitNumber(e.target.value)} + />
- +
diff --git a/src/hooks/useCanvasEvent.js b/src/hooks/useCanvasEvent.js index 7ea3e03c..9076bbc8 100644 --- a/src/hooks/useCanvasEvent.js +++ b/src/hooks/useCanvasEvent.js @@ -198,7 +198,7 @@ export function useCanvasEvent() { if (selected?.length > 0) { selected.forEach((obj) => { - if (obj.type === 'QPolygon') { + if (obj.type === 'QPolygon' && obj.name !== 'module') { obj.set({ stroke: 'red' }) } }) @@ -235,7 +235,7 @@ export function useCanvasEvent() { if (selected?.length > 0) { selected.forEach((obj) => { - if (obj.type === 'QPolygon') { + if (obj.type === 'QPolygon' && obj.name !== 'module') { obj.set({ stroke: 'red' }) } })
{header.name}{header.name}
{row[header.prop]} + {row[header.prop]} +
{footer} + {footer} +