회로. 가대 설정 개발중

2025-01-17 18:31:39 +09:00 · 2025-01-17 18:31:39 +09:00 · 72aeeb4e39
commit 72aeeb4e39
parent 1c7ca9c54a
5 changed files with 155 additions and 64 deletions
--- a/src/components/floor-plan/modal/circuitTrestle/step/type/PassivityCircuitAllocation.jsx
+++ b/src/components/floor-plan/modal/circuitTrestle/step/type/PassivityCircuitAllocation.jsx
@ -1,4 +1,5 @@
 import { GlobalDataContext } from '@/app/GlobalDataProvider'
+import { POLYGON_TYPE } from '@/common/common'
 import { useMessage } from '@/hooks/useMessage'
 import { canvasState } from '@/store/canvasAtom'
 import { modelState } from '@/store/circuitTrestleAtom'
@ -18,36 +19,10 @@ export default function PassivityCircuitAllocation() {
  const canvas = useRecoilValue(canvasState)
  const selectedModules = useRecoilValue(selectedModuleState)
  const { managementState, setManagementState, managementStateLoaded } = useContext(GlobalDataContext)
-  const moduleData = {
-    header: [
-      { name: getMessage('modal.panel.batch.statistic.roof.shape'), prop: 'roofShape' },
-      { name: getMessage('modal.circuit.trestle.setting.circuit.allocation.passivity.circuit'), prop: 'circuit' },
-      ...selectedModules.itemList.map((module) => {
-        return {
-          name: module.itemNm,
-          prop: 'moduleName',
-        }
-      }),
-      {
-        name: `${getMessage('modal.panel.batch.statistic.power.generation.amount')}(kW)`,
-        prop: 'powerGeneration',
-      },
-    ],
-    rows: [
-      {
-        roofShape: { name: 'M 1' },
-        circuit: { name: 'M 1' },
-        moduleName: { name: '8' },
-        powerGeneration: { name: '3,400' },
-      },
-      {
-        roofShape: { name: 'M 1' },
-        circuit: { name: 'M 1' },
-        moduleName: { name: '8' },
-        powerGeneration: { name: '3,400' },
-      },
-    ],
-  }
+  const [moduleData, setModuleData] = useState({
+    header: [],
+    rows: [],
+  })
  const model = useRecoilValue(modelState)
  const [selectedModels, setSelectedModels] = useState(model.selectedModels)
  const [selectedPcs, setSelectedPcs] = useState(selectedModels[0])
@ -61,14 +36,47 @@ export default function PassivityCircuitAllocation() {
  }, [])

  const setSurfaceInfo = () => {
-    const surfaces = canvas.getObjects().filter((obj) => ['roofSurface', 'moduleSetupSurface'].includes(obj.name))
-    const modules = canvas.getObjects().filter((obj) => obj.name === 'module')
-    surfaces.forEach((surface) => {
-      surface.moduleList = modules.filter((obj) => obj.surfaceId === surface.id)
+    const surfaces = canvas.getObjects().filter((obj) => POLYGON_TYPE.MODULE_SETUP_SURFACE === obj.name)
+    let totalWpout = 0
+    const rows = surfaces.map((surface) => {
+      let wpOut = 0
+      let moduleInfo = {}
+      surface.modules.forEach((module) => {
+        wpOut += +module.moduleInfo.wpOut
+        if (!moduleInfo[module.moduleInfo.itemId]) moduleInfo[module.moduleInfo.itemId] = 0
+        moduleInfo[module.moduleInfo.itemId]++
+      })
+      totalWpout += wpOut
+      console.log('🚀 ~ moduleData.rows=surfaces.map ~ module:', module)
+      return {
+        roofShape: DIRECTION[surface.direction],
+        powerGeneration: wpOut.toLocaleString('ko-KR', { maximumFractionDigits: 4 }),
+        ...moduleInfo,
+      }
    })
+
+    setTotalWpout(totalWpout)
    // 지붕면 리스트 -> 지붕면에 있는 모듈 리스트 -> 발전량 총합 계산
    // wpOut
-    console.log('🚀 ~ setSurfaceInfo ~ modules:', surfaces)
+    console.log('🚀 ~ setSurfaceInfo ~ modules:', rows)
+    console.log('🚀 ~ setSurfaceInfo ~ surfaces:', surfaces)
+    setModuleData({
+      header: [
+        { name: getMessage('modal.panel.batch.statistic.roof.shape'), prop: 'roofShape' },
+        { name: getMessage('modal.circuit.trestle.setting.circuit.allocation.passivity.circuit'), prop: 'circuit' },
+        ...selectedModules.itemList.map((module) => {
+          return {
+            name: module.itemNm,
+            prop: module.itemId,
+          }
+        }),
+        {
+          name: `${getMessage('modal.panel.batch.statistic.power.generation.amount')}(kW)`,
+          prop: 'powerGeneration',
+        },
+      ],
+      rows: rows,
+    })
  }
  return (
    <>
@ -79,33 +87,36 @@ export default function PassivityCircuitAllocation() {
            <div className="bold-font mb10">{getMessage('modal.circuit.trestle.setting.circuit.allocation.passivity')}</div>
            <div className="normal-font mb15">{getMessage('modal.circuit.trestle.setting.circuit.allocation.passivity.info')}</div>
            <div className="roof-module-table overflow-y">
-              <table>
-                <thead>
-                  <tr>
-                    {moduleData.header.map((header) => (
-                      <th key={header.prop}>{header.name}</th>
-                    ))}
-                  </tr>
-                </thead>
-                <tbody>
-                  {moduleData.rows.map((row, index) => (
-                    <tr key={index} className="wrong">
+              {moduleData.header && (
+                <table>
+                  <thead>
+                    <tr>
                      {moduleData.header.map((header) => (
-                        <td className="al-c" key={header.prop}>
-                          {row[header.prop].name}
-                        </td>
+                        <th key={header.prop}>{header.name}</th>
                      ))}
                    </tr>
-                  ))}
-                  <tr className="wrong">
-                    <td className="al-c">총합</td>
-                    {Array.from({ length: moduleData.header.length - 2 }).map((_, index) => {
-                      return <td key={index} className="al-c"></td>
-                    })}
-                    <td className="al-c">{totalWpout.toLocaleString('ko-KR', { maximumFractionDigits: 4 })}</td>
-                  </tr>
-                </tbody>
-              </table>
+                  </thead>
+                  <tbody>
+                    {moduleData.rows.map((row, index) => (
+                      <tr key={index} className="wrong">
+                        {moduleData.header.map((header) => (
+                          <td className="al-c" key={header.prop}>
+                            {row[header.prop]}
+                          </td>
+                        ))}
+                      </tr>
+                    ))}
+                    <tr className="wrong">
+                      <td className="al-c">총합</td>
+                      {Array.from({ length: moduleData.header.length - 3 }).map((_, index) => {
+                        return <td key={index} className="al-c"></td>
+                      })}
+                      <td className="al-c">{totalWpout.toLocaleString('ko-KR', { maximumFractionDigits: 4 })}</td>
+                      <td className="al-c">{totalWpout.toLocaleString('ko-KR', { maximumFractionDigits: 4 })}</td>
+                    </tr>
+                  </tbody>
+                </table>
+              )}
            </div>
          </div>
        </div>
--- a/src/components/floor-plan/modal/panelBatch/PanelBatchStatistics.jsx
+++ b/src/components/floor-plan/modal/panelBatch/PanelBatchStatistics.jsx
@ -3,6 +3,8 @@
 import { useState } from 'react'
 import { useMessage } from '@/hooks/useMessage'
 import WithDraggable from '@/components/common/draggable/WithDraggable'
+import { moduleStatisticsState } from '@/store/circuitTrestleAtom'
+import { useRecoilValue } from 'recoil'

 export default function PanelBatchStatistics() {
  const { getMessage } = useMessage()
@ -11,6 +13,7 @@ export default function PanelBatchStatistics() {
    x: 0,
    y: 30,
  })
+  const { header, rows, footer } = useRecoilValue(moduleStatisticsState)

  return (
    <WithDraggable isShow={true} handle=".penal-wrap" pos={pos}>
@ -21,14 +24,25 @@ export default function PanelBatchStatistics() {
          <table className="penal-table">
            <thead>
              <tr>
-                <th>{getMessage('modal.panel.batch.statistic.roof.shape')}</th>
-                <th>{getMessage('modal.panel.batch.statistic.power.generation.amount')} (kW)</th>
+                {header.map((item) => (
+                  <th>{item.name}</th>
+                ))}
              </tr>
            </thead>
            <tbody>
+              {rows.map((row) => (
+                <tr>
+                  {header.map((item) => (
+                    // <td>{item.prop === 'name' ? item.name : item.prop === 'powerGeneration' ? item.powerGeneration : item.amount}</td>
+                    <td>{row[item.prop]}</td>
+                  ))}
+                </tr>
+              ))}
              <tr>
-                <td>{getMessage('modal.panel.batch.statistic.total')}</td>
-                <td className="al-r">0.000</td>
+                {footer.map((item) => (
+                  <td>{item}</td>
+                  // <td className="al-r">{item.amount}</td>
+                ))}
              </tr>
            </tbody>
          </table>
--- a/src/hooks/module/useModuleBasicSetting.js
+++ b/src/hooks/module/useModuleBasicSetting.js
@ -16,6 +16,7 @@ import { QLine } from '@/components/fabric/QLine'
 import { useRoofFn } from '@/hooks/common/useRoofFn'
 import { useEffect } from 'react'
 import { useMessage } from '@/hooks/useMessage'
+import { moduleStatisticsState } from '@/store/circuitTrestleAtom'

 export function useModuleBasicSetting() {
  const canvas = useRecoilValue(canvasState)
@ -31,6 +32,7 @@ export function useModuleBasicSetting() {
  const [basicSetting, setBasicSettings] = useRecoilState(basicSettingState)
  const checkedModule = useRecoilValue(checkedModuleState)
  const [isManualModuleSetup, setIsManualModuleSetup] = useRecoilState(isManualModuleSetupState)
+  const [moduleStatistics, setModuleStatistics] = useRecoilState(moduleStatisticsState)

  useEffect(() => {
    // console.log('basicSetting', basicSetting)
@ -1206,7 +1208,7 @@ export function useModuleBasicSetting() {
      })

      moduleSetupSurface.set({ modules: moduleSetupArray })
-
+      getModuleStatistics()
      // const moduleArray = [...moduleIsSetup]
      // moduleArray.push({
      //   surfaceId: moduleSetupSurface.surfaceId,
@ -2279,6 +2281,64 @@ export function useModuleBasicSetting() {
    return isDisjoint
  }

+  const getModuleStatistics = () => {
+    const surfaces = canvas.getObjects().filter((obj) => POLYGON_TYPE.MODULE_SETUP_SURFACE === obj.name)
+    console.log('🚀 ~ getModuleStatistics ~ surfaces:', surfaces)
+    let totalWpout = 0
+    let moduleInfo = {}
+    const rows = surfaces.map((surface) => {
+      let wpOut = 0
+
+      surface.modules.forEach((module) => {
+        wpOut += +module.moduleInfo.wpOut
+        if (!moduleInfo[module.moduleInfo.itemId]) {
+          moduleInfo[module.moduleInfo.itemId] = 0
+        }
+
+        moduleInfo[module.moduleInfo.itemId]++
+      })
+      totalWpout += wpOut
+      console.log('🚀 ~ moduleData.rows=surfaces.map ~ module:', module)
+      return {
+        name: canvas.getObjects().filter((obj) => obj.id === surface.parentId)[0].directionText,
+        // powerGeneration: wpOut.toLocaleString('ko-KR', { maximumFractionDigits: 4 }),
+        amount: wpOut,
+        ...moduleInfo,
+      }
+    })
+
+    console.log('🚀 ~ getModuleStatistics ~ moduleInfo:', moduleInfo)
+    const header = [
+      { name: getMessage('modal.panel.batch.statistic.roof.shape'), prop: 'name' },
+      ...Object.keys(moduleInfo).map((key) => {
+        return { name: moduleInfo[key], prop: key }
+      }),
+      { name: `${getMessage('modal.panel.batch.statistic.power.generation.amount')}(kW)`, prop: 'amount' },
+    ]
+    let footer = ['합계']
+    let footerData = {}
+    rows.forEach((row) => {
+      Object.keys(moduleInfo).map((key) => {
+        if (!footerData[key]) footerData[key] = 0
+        footerData[key] += row[key]
+      })
+    })
+    Object.keys(footerData).forEach((key) => {
+      footer.push(footerData[key])
+    })
+    footer.push(totalWpout)
+    // const footer = [
+    //   '합계',
+    //   ...Object.keys(moduleInfo).map((key) => {
+    //     return { name: moduleInfo[key].name, prop: moduleInfo[key] }
+    //   }),
+    //   totalWpout,
+    // ]
+    // const footer = []
+    console.log('@@@@@@@@@@', header, rows, footer)
+    setModuleStatistics({ header: header, rows, footer: footer })
+  }
+
  return {
    makeModuleInstArea,
    manualModuleSetup,
--- a/src/hooks/usePlan.js
+++ b/src/hooks/usePlan.js
@ -368,6 +368,7 @@ export function usePlan(params = {}) {
   * plan 조회
   */
  const loadCanvasPlanData = async (userId, objectNo, planNo) => {
+    console.log('🚀 ~ loadCanvasPlanData ~ userId, objectNo, planNo:', userId, objectNo, planNo)
    await getCanvasByObjectNo(userId, objectNo).then((res) => {
      if (res.length > 0) {
        setPlans(res)
--- a/src/store/circuitTrestleAtom.js
+++ b/src/store/circuitTrestleAtom.js
@ -20,3 +20,8 @@ export const pcsCheckState = atom({
  key: 'divisionCircuitState',
  default: { division: true, max: false },
 })
+
+export const moduleStatisticsState = atom({
+  key: 'moduleStatisticsState',
+  default: { header: [], rows: [], footer: [] },
+})