자동 회로할당 개발중

2025-01-23 09:33:18 +09:00 · 2025-01-23 09:33:18 +09:00 · edd660b245
commit edd660b245
parent 365a6199d6
4 changed files with 122 additions and 51 deletions
--- 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)
--- 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)`,
--- 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 (
    <>
      <div className="properties-setting-wrap outer">
@ -126,22 +188,26 @@ export default function PassivityCircuitAllocation(props) {
                <table>
                  <thead>
                    <tr>
-                      {headers.map((header) => (
-                        <th key={'header' + header.prop}>{header.name}</th>
+                      {headers.map((header, index) => (
+                        <th key={'header' + index}>{header.name}</th>
                      ))}
                    </tr>
                  </thead>
                  <tbody>
                    {rows.map((row, index) => (
                      <tr key={'row' + index}>
-                        {headers.map((header) => (
-                          <td className="al-c">{row[header.prop]}</td>
+                        {headers.map((header, i) => (
+                          <td className="al-c" key={'rowcell' + i}>
+                            {row[header.prop]}
+                          </td>
                        ))}
                      </tr>
                    ))}
                    <tr>
-                      {footer.map((footer) => (
-                        <td className="al-c">{footer}</td>
+                      {footer.map((footer, index) => (
+                        <td className="al-c" key={'footer' + index}>
+                          {footer}
+                        </td>
                      ))}
                    </tr>
                  </tbody>
@ -157,27 +223,25 @@ export default function PassivityCircuitAllocation(props) {
                <div className="bold-font">{getMessage('modal.circuit.trestle.setting.circuit.allocation.passivity.selected.power.conditional')}</div>
              </div>
              <div className="hexagonal-item">
-                {models
-                  .filter((model) => model.selected)
-                  .map((model, index) => (
-                    <div className="d-check-radio pop mb10" key={'model' + index}>
-                      <input
-                        type="radio"
-                        name="radio01"
-                        id={`ra0${index + 1}`}
-                        checked={selectedPcs === model}
-                        onChange={() => setSelectedPcs(model)}
-                      />
-                      <label htmlFor="ra01">
-                        {model.itemNm} (
-                        {getMessage(
-                          'modal.circuit.trestle.setting.circuit.allocation.passivity.circuit.info',
-                          managementState?.coldRegionFlg === '1' ? [model.serMinQty, model.serColdZoneMaxQty] : [model.serMinQty, model.serMaxQty],
-                        )}
-                        )
-                      </label>
-                    </div>
-                  ))}
+                {selectedModels.map((model, index) => (
+                  <div className="d-check-radio pop mb10" key={'model' + index}>
+                    <input
+                      type="radio"
+                      name="radio01"
+                      id={`ra0${index + 1}`}
+                      checked={selectedPcs === model}
+                      onChange={() => setSelectedPcs(model)}
+                    />
+                    <label htmlFor="ra01">
+                      {model.itemNm} (
+                      {getMessage(
+                        'modal.circuit.trestle.setting.circuit.allocation.passivity.circuit.info',
+                        managementState?.coldRegionFlg === '1' ? [model.serMinQty, model.serColdZoneMaxQty] : [model.serMinQty, model.serMaxQty],
+                      )}
+                      )
+                    </label>
+                  </div>
+                ))}
                {/* <div className="d-check-radio pop mb10">
                  <input type="radio" name="radio01" id="ra01" />
                  <label htmlFor="ra01">HQJP-KA55-5 (標準回路2枚～10枚)</label>
@ -201,9 +265,18 @@ export default function PassivityCircuitAllocation(props) {
                {getMessage('modal.circuit.trestle.setting.circuit.allocation.passivity.circuit.num')}
              </span>
              <div className="input-grid mr5" style={{ width: '70px' }}>
-                <input type="text" className="input-origin block" />
+                <input
+                  type="text"
+                  className="input-origin block"
+                  value={circuitNumber}
+                  min={1}
+                  max={99}
+                  onChange={(e) => setCircuitNumber(e.target.value)}
+                />
              </div>
-              <button className="btn-frame roof">{getMessage('modal.circuit.trestle.setting.circuit.allocation.passivity.circuit.num.fix')}</button>
+              <button className="btn-frame roof" onClick={() => handleCircuitNumberFix()}>
+                {getMessage('modal.circuit.trestle.setting.circuit.allocation.passivity.circuit.num.fix')}
+              </button>
            </div>
          </div>
          <div className="circuit-right-wrap">
--- 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' })
          }
        })