발전 시물레이션 api 연동 및 셋팅 값 수정
This commit is contained in:
parent
23681ee3d7
commit
de95bc7c61
@ -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ㅁㅅㄷㄴㅁㅅㄴㅁㅅㄴㅅ'
|
||||
if (resultData) {
|
||||
setContent(resultData.replaceAll('\n', '<br/>'))
|
||||
} else {
|
||||
setContent(getMessage('common.message.no.data'))
|
||||
}
|
||||
get({ url: '/api/pwrGnrSimulation/guideInfo' }).then((res) => {
|
||||
if (res.data) {
|
||||
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">
|
||||
{prefCodeList.map((prefCode) => (prefCode.prefId === objectDetail.prefId ? prefCode.prefName : ''))}
|
||||
{` `}
|
||||
{objectDetail.address}
|
||||
</div>
|
||||
<div className="estimate-name">{objectDetail.prefName}</div>
|
||||
</div>
|
||||
{/* 일사량 관측지점 */}
|
||||
<div className="estimate-box">
|
||||
<div className="estimate-tit">{getMessage('simulator.title.sub6')}</div>
|
||||
<div className="estimate-name">
|
||||
{areaIdList.map((areaCode) => (areaCode.areaId === objectDetail.areaId ? areaCode.prefName : ''))}
|
||||
</div>
|
||||
<div className="estimate-name">{objectDetail.areaName}</div>
|
||||
</div>
|
||||
{/* 적설조건 */}
|
||||
<div className="estimate-box">
|
||||
<div className="estimate-tit">{getMessage('simulator.title.sub7')}</div>
|
||||
<div className="estimate-name">
|
||||
{objectDetail.verticalSnowCover}
|
||||
{objectDetail.verticalSnowCover && 'cm'}
|
||||
</div>
|
||||
<div className="estimate-name">{objectDetail.snowfall}</div>
|
||||
</div>
|
||||
{/* 풍속조건 */}
|
||||
<div className="estimate-box">
|
||||
<div className="estimate-tit">{getMessage('simulator.title.sub8')}</div>
|
||||
<div className="estimate-name">
|
||||
{windSpeedList.map((windSpeed) => (windSpeed.clCode === objectDetail.standardWindSpeedId ? windSpeed.clCodeNm : ''))}
|
||||
</div>
|
||||
<div className="estimate-name">{objectDetail.standardWindSpeedId}</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>
|
||||
{chartData.map((data) => (
|
||||
<td>{convertNumberToPriceDecimal(data)}</td>
|
||||
))}
|
||||
<td>{convertNumberToPriceDecimal(chartData.reduce((a, b) => a + b))}</td>
|
||||
</tr>
|
||||
<tr>{chartData1.length > 0 && chartData1.map((data) => <td key={data}>{convertNumberToPriceDecimal(data)}</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>
|
||||
</>
|
||||
)
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user