맵 [침입수 분석] [RDII분석] 팝업 수정
This commit is contained in:
LGS
@@ -229,7 +229,7 @@ const InfilChart = ({ pplMngNo = '' }: ModalOpenProp) => {
|
||||
<h3 className="mb-6 text-[20px] font-extrabold tracking-[-0.02em] text-black">침입수 분석 결과</h3>
|
||||
|
||||
<div className="mb-6 grid grid-cols-2 gap-5">
|
||||
<div className="flex min-h-[92px] items-center justify-between rounded-[14px] border border-[#4f88c6] bg-white px-6 py-4">
|
||||
<div className="flex min-h-[98px] items-center justify-between rounded-[14px] border border-[#4f88c6] bg-white px-6 py-4">
|
||||
<div className="flex items-center gap-2 text-[16px] font-extrabold text-[#ef4444]">
|
||||
{/* <span className="text-[14px] leading-none">●</span> */}
|
||||
<span>상수사용량 적용연월</span>
|
||||
@@ -239,15 +239,17 @@ const InfilChart = ({ pplMngNo = '' }: ModalOpenProp) => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex min-h-[92px] items-center justify-between rounded-[14px] border border-[#4f88c6] bg-white px-6 py-4">
|
||||
<div className="flex min-h-[98px] items-center justify-between rounded-[14px] border border-[#4f88c6] bg-white px-6 py-4">
|
||||
<div className="flex items-center gap-2 text-[16px] font-extrabold text-[#ef4444]">
|
||||
{/* <span className="text-[14px] leading-none">●</span> */}
|
||||
<span>침입수량 산정결과</span>
|
||||
</div>
|
||||
<div className="flex items-end gap-2 text-[#222]">
|
||||
<div className="grid grid-cols-[1fr_auto] items-center gap-7 text-[#222]">
|
||||
<span className="text-[16px] text-[#666]">침입수량</span>
|
||||
<span className="text-[20px] font-extrabold">{inftwtQty}</span>
|
||||
<span className="pb-[2px] text-[16px]">m³/d</span>
|
||||
<div className='w-[66px] flex items-end justify-start gap-2'>
|
||||
<span className="text-[20px] font-extrabold">{inftwtQty}</span>
|
||||
<span className="pb-[2px] text-[16px]">m³/d</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -249,66 +249,76 @@ const RdiiChart = ({ pplMngNo = '' }: ModalOpenProp) => {
|
||||
</section>
|
||||
|
||||
<section className="relative rounded-[12px] border border-[#b1b1b1] bg-white p-5">
|
||||
<h3 className="mb-6 text-[20px] font-extrabold tracking-[-0.02em] text-black">
|
||||
강우유입수분석 결과
|
||||
</h3>
|
||||
<h3 className="mb-6 text-[20px] font-extrabold tracking-[-0.02em] text-black">
|
||||
강우유입수분석 결과
|
||||
</h3>
|
||||
|
||||
<div className="mb-6 grid grid-cols-2 gap-5">
|
||||
<div className="flex min-h-[92px] items-center justify-between rounded-[14px] border border-[#4f88c6] bg-white px-6 py-4">
|
||||
<div className="flex items-center gap-2 text-[16px] font-extrabold text-[#ef4444]">
|
||||
<span>상수사용량 적용연월</span>
|
||||
</div>
|
||||
<div className="text-[20px] font-extrabold text-[#222]">
|
||||
{aplcnYm ? moment(aplcnYm, 'YYYYMM').format('YYYY-MM') : '-'}
|
||||
</div>
|
||||
<div className="mb-6 grid grid-cols-2 gap-5">
|
||||
{/* 좌측 카드 */}
|
||||
<div className="flex min-h-[98px] items-center justify-between rounded-[16px] border border-[#5fa3ea] bg-white px-6 py-4">
|
||||
<div className="text-[16px] font-bold text-[#ef4444]">
|
||||
상수사용량 적용연월
|
||||
</div>
|
||||
<div className="text-[24px] font-extrabold leading-none text-[#111]">
|
||||
{aplcnYm ? moment(aplcnYm, 'YYYYMM').format('YYYY-MM') : '-'}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 우측 카드 */}
|
||||
<div className="flex min-h-[98px] items-center rounded-[16px] border border-[#5fa3ea] bg-white px-6 py-4">
|
||||
{/* 좌측: 제목 (세로 가운데 정렬) */}
|
||||
<div className="flex h-full items-center">
|
||||
<span className="text-[16px] font-bold text-[#ef4444]">
|
||||
강우유입수량 분석결과
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* 우측: 지표 영역 */}
|
||||
<div className="ml-auto flex flex-col gap-2 text-right">
|
||||
|
||||
<div className="grid grid-cols-[1fr_auto] items-center gap-7">
|
||||
<span className="text-[15px] text-[#555]">평균RDII</span>
|
||||
<div className="w-[66px] flex items-end justify-start gap-2">
|
||||
<span className="text-[18px] font-extrabold text-[#111]">{rdiiQty}</span>
|
||||
<span className="text-[14px] text-[#111]">m³/d</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-[1fr_auto] items-center gap-7">
|
||||
<span className="text-[15px] text-[#555]">적용 강우량</span>
|
||||
<div className="w-[66px] flex items-end justify-start gap-2">
|
||||
<span className="text-[18px] font-extrabold text-[#111]">{rainTotal}</span>
|
||||
<span className="text-[14px] text-[#111]">mm</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-[1fr_auto] items-center gap-7">
|
||||
<span className="text-[15px] text-[#555]">강우량 대비 RDII</span>
|
||||
<div className="w-[66px] flex items-end justify-start gap-2">
|
||||
<span className="text-[18px] font-extrabold text-[#111]">{totalVolume}</span>
|
||||
<span className="text-[14px] text-[#111]">m³/mm</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-[14px] border border-[#4f88c6] bg-white px-6 py-4">
|
||||
<div className="mb-3 flex items-center gap-2 text-[16px] font-extrabold text-[#ef4444]">
|
||||
<span>강우유입수량 분석결과</span>
|
||||
</div>
|
||||
<div className="space-y-2 text-[#222]">
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<span className="text-[16px] text-[#666]">평균RDII</span>
|
||||
<div className="flex items-end gap-2">
|
||||
<span className="text-[20px] font-extrabold">{rdiiQty}</span>
|
||||
<span className="pb-[2px] text-[16px]">m³/d</span>
|
||||
</div>
|
||||
<div className="rounded-[10px] bg-white px-2 pb-2 pt-3">
|
||||
{hasChartData ? (
|
||||
<MainChart
|
||||
chartConfig={chartConfig}
|
||||
chartForm={chartForm}
|
||||
chartData={chartData}
|
||||
chartTitle={'RDII 그래프'}
|
||||
yFieldText2="강수량(mm)"
|
||||
yFieldText="유량(m³/h)"
|
||||
/>
|
||||
) : (
|
||||
<div className="flex h-[464px] items-center justify-center text-[18px] text-[#2c2f33]">
|
||||
데이터가 없습니다.
|
||||
</div>
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<span className="text-[16px] text-[#666]">적용강우량</span>
|
||||
<div className="flex items-end gap-2">
|
||||
<span className="text-[20px] font-extrabold">{rainTotal}</span>
|
||||
<span className="pb-[2px] text-[16px]">mm</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<span className="text-[16px] text-[#666]">강우량대비 RDII</span>
|
||||
<div className="flex items-end gap-2">
|
||||
<span className="text-[20px] font-extrabold">{totalVolume}</span>
|
||||
<span className="pb-[2px] text-[16px]">m³/mm</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-[10px] bg-white px-2 pb-2 pt-3">
|
||||
{hasChartData ? (
|
||||
<MainChart
|
||||
chartConfig={chartConfig}
|
||||
chartForm={chartForm}
|
||||
chartData={chartData}
|
||||
chartTitle={'RDII 그래프'}
|
||||
yFieldText2="강수량(mm)"
|
||||
yFieldText="유량(m³/h)"
|
||||
/>
|
||||
) : (
|
||||
<div className="flex h-[464px] items-center justify-center text-[18px] text-[#2c2f33]">
|
||||
데이터가 없습니다.
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user