회로. 가대 설정 개발중

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 = {
+  const [moduleData, setModuleData] = useState({
-    header: [
+    header: [],
-      { name: getMessage('modal.panel.batch.statistic.roof.shape'), prop: 'roofShape' },
+    rows: [],
-      { 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 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 surfaces = canvas.getObjects().filter((obj) => POLYGON_TYPE.MODULE_SETUP_SURFACE === obj.name)
-    const modules = canvas.getObjects().filter((obj) => obj.name === 'module')
+    let totalWpout = 0
-    surfaces.forEach((surface) => {
+    const rows = surfaces.map((surface) => {
-      surface.moduleList = modules.filter((obj) => obj.surfaceId === surface.id)
+      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>
+              {moduleData.header && (
-                <thead>
+                <table>
-                  <tr>
+                  <thead>
-                    {moduleData.header.map((header) => (
+                    <tr>
-                      <th key={header.prop}>{header.name}</th>
-                    ))}
-                  </tr>
-                </thead>
-                <tbody>
-                  {moduleData.rows.map((row, index) => (
-                    <tr key={index} className="wrong">
                       {moduleData.header.map((header) => (
-                        <td className="al-c" key={header.prop}>
+                        <th key={header.prop}>{header.name}</th>
-                          {row[header.prop].name}
-                        </td>
                       ))}
                     </tr>
-                  ))}
+                  </thead>
-                  <tr className="wrong">
+                  <tbody>
-                    <td className="al-c">총합</td>
+                    {moduleData.rows.map((row, index) => (
-                    {Array.from({ length: moduleData.header.length - 2 }).map((_, index) => {
+                      <tr key={index} className="wrong">
-                      return <td key={index} className="al-c"></td>
+                        {moduleData.header.map((header) => (
-                    })}
+                          <td className="al-c" key={header.prop}>
-                    <td className="al-c">{totalWpout.toLocaleString('ko-KR', { maximumFractionDigits: 4 })}</td>
+                            {row[header.prop]}
-                  </tr>
+                          </td>
-                </tbody>
+                        ))}
-              </table>
+                      </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>

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>
+                {header.map((item) => (
-                <th>{getMessage('modal.panel.batch.statistic.power.generation.amount')} (kW)</th>
+                  <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>
+                {footer.map((item) => (
-                <td className="al-r">0.000</td>
+                  <td>{item}</td>
+                  // <td className="al-r">{item.amount}</td>
+                ))}
               </tr>
             </tbody>
           </table>

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,

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)

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: [] },
+})