발전 시물레이션 api 연동 및 셋팅 값 수정

src/components/simulator/Simulator.jsx

@@ -4,14 +4,13 @@ import 'chart.js/auto'
 import { Bar } from 'react-chartjs-2'
 import dayjs from 'dayjs'
 
-import { useEffect, useState } from 'react'
+import { useEffect, useState, useRef } from 'react'
 import { useRecoilState, useRecoilValue } from 'recoil'
 import { floorPlanObjectState } from '@/store/floorPlanObjectAtom'
 
 import { useAxios } from '@/hooks/useAxios'
 import { useMessage } from '@/hooks/useMessage'
 import { usePlan } from '@/hooks/usePlan'
-import { useCommonCode } from '@/hooks/common/useCommonCode'
 import { useCanvasMenu } from '@/hooks/common/useCanvasMenu'
 
 import { convertNumberToPriceDecimal, isEmptyArray } from '@/util/common-utils'
@@ -20,6 +19,8 @@ export default function Simulator() {
   const { plans } = usePlan()
   const plan = plans.find((plan) => plan.isCurrent === true)
 
+  const chartRef = useRef(null)
+
   // recoil 물건번호
   const objectRecoil = useRecoilValue(floorPlanObjectState)
   const [objectNo, setObjectNo] = useState('')
@@ -38,41 +39,14 @@ export default function Simulator() {
   const { get } = useAxios()
   const { getMessage } = useMessage()
 
-  // 공통코드 조회
-  const { commonCode, findCommonCode } = useCommonCode()
-  const [prefCodeList, setPrefCodeList] = useState([]) // 도도부현 코드
-  const [areaIdList, setAreaIdList] = useState([]) // 시뮬레이션 코드
-  const [windSpeedList, setWindSpeedList] = useState([]) // 기준 풍속 공통코드
-
-  useEffect(() => {
-    const code1 = findCommonCode(202000) // 기준풍속
-    if (code1 != null) {
-      setWindSpeedList(code1)
-    }
-  }, [commonCode])
-
-  const chartData = [
-    Math.floor(Math.random() * 1000),
-    Math.floor(Math.random() * 2000),
-    Math.floor(Math.random() * 3000),
-    Math.floor(Math.random() * 4000),
-    Math.floor(Math.random() * 5000),
-    Math.floor(Math.random() * 6000),
-    Math.floor(Math.random() * 6000),
-    Math.floor(Math.random() * 5000),
-    Math.floor(Math.random() * 4000),
-    Math.floor(Math.random() * 3000),
-    Math.floor(Math.random() * 2000),
-    Math.floor(Math.random() * 1000),
-  ]
-
   // 차트 관련
+  const [chartData1, setChartData1] = useState([])
   const data = {
     labels: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
     datasets: [
       {
         label: 'kWh',
-        data: chartData,
+        data: chartData1.slice(0, 12),
 
         backgroundColor: [
           'rgba(255, 99, 132, 0.2)',
@@ -133,48 +107,46 @@ export default function Simulator() {
       fetchObjectDetail(objectNo)
     }
     fetchSimulatorNotice()
-  }, [objectNo])
+  }, [objectNo, plan])
 
   // 물건 상세 정보 조회
   const [objectDetail, setObjectDetail] = useState({})
 
-  const fetchObjectDetail = async (objectNo) => {
-    const apiUrl = `/api/object/${objectNo}/detail`
-    const resultData = await get({ url: apiUrl })
-
-    if (resultData) {
-      if (resultData.prefId) {
-        get({ url: '/api/object/prefecture/list' }).then((res) => {
-          if (!isEmptyArray(res)) {
-            setPrefCodeList(res)
-          }
-        })
-        get({ url: `/api/object/prefecture/${resultData.prefId}/list` }).then((res) => {
-          if (!isEmptyArray(res)) {
-            setAreaIdList(res)
-          }
-        })
-      }
-      setObjectDetail(resultData)
-    }
-  }
-
   // 모듈배치정보 조회
   const [moduleInfoList, setModuleInfoList] = useState([])
 
   // 파워컨디셔너 조회
   const [pcsInfoList, setPcsInfoList] = useState([])
 
+  const fetchObjectDetail = async (objectNo) => {
+    const apiUrl = `/api/pwrGnrSimulation/calculations?objectNo=${objectNo}&planNo=${plan?.id}`
+    const resultData = await get({ url: apiUrl })
+    if (resultData) {
+      console.log(resultData)
+      setObjectDetail(resultData)
+      if (resultData.frcPwrGnrList) {
+        setChartData1(resultData.frcPwrGnrList)
+      }
+      if (resultData.pcsList) {
+        setPcsInfoList(resultData.pcsList)
+      }
+      if (resultData.roofModuleList) {
+        setModuleInfoList(resultData.roofModuleList)
+      }
+    }
+  }
+
   // 시뮬레이션 안내사항 조회
   const [content, setContent] = useState('')
 
   const fetchSimulatorNotice = async () => {
-    const resultData = '1234123\r\n12\r\n3\r\n123\r\n12\r\n312\r\n312\r\n3123123123123\r\n\r\nㅅㄷㄴㅅ\r\nㅁㅅㄷㄴㅁㅅㄴㅁㅅㄴㅅ'
+    get({ url: '/api/pwrGnrSimulation/guideInfo' }).then((res) => {
-    if (resultData) {
+      if (res.data) {
-      setContent(resultData.replaceAll('\n', '<br/>'))
+        setContent(res.data.replaceAll('\n', '<br/>'))
       } else {
         setContent(getMessage('common.message.no.data'))
       }
+    })
   }
 
   return (
@@ -187,56 +159,45 @@ export default function Simulator() {
               <div className="estimate-box">
                 <div className="estimate-tit">{getMessage('simulator.title.sub1')}</div>
                 <div className="estimate-name">
-                  {objectNo} (Plan No: {plan?.id})
+                  {objectDetail.objectNo} (Plan No: {objectDetail.planNo})
                 </div>
               </div>
               {/* 작성일 */}
               <div className="estimate-box">
                 <div className="estimate-tit">{getMessage('simulator.title.sub2')}</div>
-                <div className="estimate-name">{`${dayjs(objectDetail.lastEditDatetime).format('YYYY.MM.DD')}`}</div>
+                <div className="estimate-name">{`${dayjs(objectDetail.drawingEstimateCreateDate).format('YYYY.MM.DD')}`}</div>
               </div>
               {/* 시스템용량 */}
               <div className="estimate-box">
                 <div className="estimate-tit">{getMessage('simulator.title.sub3')}</div>
-                <div className="estimate-name">??? kW</div>
+                <div className="estimate-name">{convertNumberToPriceDecimal(objectDetail.capacity)}kW</div>
               </div>
               {/* 연간예측발전량 */}
               <div className="estimate-box">
                 <div className="estimate-tit">{getMessage('simulator.title.sub4')}</div>
-                <div className="estimate-name">???</div>
+                <div className="estimate-name">{convertNumberToPriceDecimal(objectDetail.anlFrcsGnrt)}</div>
               </div>
             </div>
             <div className="estimate-list-wrap">
               {/* 도도부현 */}
               <div className="estimate-box">
                 <div className="estimate-tit">{getMessage('simulator.title.sub5')}</div>
-                <div className="estimate-name">
+                <div className="estimate-name">{objectDetail.prefName}</div>
-                  {prefCodeList.map((prefCode) => (prefCode.prefId === objectDetail.prefId ? prefCode.prefName : ''))}
-                  {` `}
-                  {objectDetail.address}
-                </div>
               </div>
               {/* 일사량 관측지점 */}
               <div className="estimate-box">
                 <div className="estimate-tit">{getMessage('simulator.title.sub6')}</div>
-                <div className="estimate-name">
+                <div className="estimate-name">{objectDetail.areaName}</div>
-                  {areaIdList.map((areaCode) => (areaCode.areaId === objectDetail.areaId ? areaCode.prefName : ''))}
-                </div>
               </div>
               {/* 적설조건 */}
               <div className="estimate-box">
                 <div className="estimate-tit">{getMessage('simulator.title.sub7')}</div>
-                <div className="estimate-name">
+                <div className="estimate-name">{objectDetail.snowfall}</div>
-                  {objectDetail.verticalSnowCover}
-                  {objectDetail.verticalSnowCover && 'cm'}
-                </div>
               </div>
               {/* 풍속조건 */}
               <div className="estimate-box">
                 <div className="estimate-tit">{getMessage('simulator.title.sub8')}</div>
-                <div className="estimate-name">
+                <div className="estimate-name">{objectDetail.standardWindSpeedId}</div>
-                  {windSpeedList.map((windSpeed) => (windSpeed.clCode === objectDetail.standardWindSpeedId ? windSpeed.clCodeNm : ''))}
-                </div>
               </div>
             </div>
           </div>
@@ -246,7 +207,7 @@ export default function Simulator() {
             <div className="chart-inner">
               <div className="sub-table-box">
                 <div className="chart-box">
-                  <Bar data={data} options={options} />
+                  <Bar ref={chartRef} data={data} options={options} />
                 </div>
                 <div className="table-box-title-wrap">
                   <div className="title-wrap">
@@ -274,12 +235,7 @@ export default function Simulator() {
                       </tr>
                     </thead>
                     <tbody>
-                      <tr>
+                      <tr>{chartData1.length > 0 && chartData1.map((data) => <td key={data}>{convertNumberToPriceDecimal(data)}</td>)}</tr>
-                        {chartData.map((data) => (
-                          <td>{convertNumberToPriceDecimal(data)}</td>
-                        ))}
-                        <td>{convertNumberToPriceDecimal(chartData.reduce((a, b) => a + b))}</td>
-                      </tr>
                     </tbody>
                   </table>
                 </div>
@@ -303,19 +259,19 @@ export default function Simulator() {
                         moduleInfoList.map((moduleInfo) => {
                           return (
                             <>
-                              <tr>
+                              <tr key={moduleInfo.itemId}>
                                 {/* 지붕면 */}
-                                <td>西南西1</td>
+                                <td>{moduleInfo.roofSurface}</td>
                                 {/* 경사각 */}
-                                <td>0.3寸</td>
+                                <td>{convertNumberToPriceDecimal(moduleInfo.slope)}寸</td>
                                 {/* 방위각(도) */}
-                                <td>81</td>
+                                <td>{convertNumberToPriceDecimal(moduleInfo.angle)}</td>
                                 {/* 태양전지모듈 */}
                                 <td>
-                                  <div className="overflow-lab">Re.RISE-G2 415</div>
+                                  <div className="overflow-lab">{moduleInfo.itemNo}</div>
                                 </td>
                                 {/* 매수 */}
-                                <td>20</td>
+                                <td>{moduleInfo.amount}</td>
                               </tr>
                             </>
                           )
@@ -330,7 +286,9 @@ export default function Simulator() {
                   {moduleInfoList.length > 0 && (
                     <div className="module-total">
                       <div className="total-title">{getMessage('simulator.table.sub6')}</div>
-                      <div className="total-num">0</div>
+                      <div className="total-num">
+                        {moduleInfoList.reduce((acc, moduleInfo) => convertNumberToPriceDecimal(Number(acc) + Number(moduleInfo.amount)), 0)}
+                      </div>
                     </div>
                   )}
                 </div>
@@ -349,13 +307,13 @@ export default function Simulator() {
                         pcsInfoList.map((pcsInfo) => {
                           return (
                             <>
-                              <tr>
+                              <tr key={pcsInfo.itemId}>
                                 {/* 파워컨디셔너 */}
                                 <td className="al-l">
-                                  <div className="overflow-lab">HQJP-MA55-3</div>
+                                  <div className="overflow-lab">{pcsInfo.itemNo}</div>
                                 </td>
                                 {/* 대 */}
-                                <td>2</td>
+                                <td>{pcsInfo.amount}</td>
                               </tr>
                             </>
                           )