688 lines
24 KiB
TypeScript
688 lines
24 KiB
TypeScript
"use client";
|
|
|
|
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
|
import {
|
|
Button,
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableHeader,
|
|
TableHead,
|
|
TableRow,
|
|
} from "@common/components";
|
|
import { StandardPopupLayout } from "@common/business_components";
|
|
import UiPageNations from "@common/business_components/ui/table/uiPageNations";
|
|
import { downloadExcelWithKoreanHeaders } from "@/shared/lib/download-excel";
|
|
import { getData } from "@/components/lib/api";
|
|
import { appendApiSearchParams } from "@/shared/util/util";
|
|
import LoadingOverlay from "@/components/ui/LoadingBar";
|
|
import useStore from "@/store/useStore";
|
|
import { useAlertStore } from "@/shared/lib";
|
|
import { useUserStore } from "@/shared/lib/use-user-store";
|
|
import { openWindowPopup } from "@/features/windowPopup/lib/openWindowPopup";
|
|
import { windowPopupDefinitions } from "@/features/windowPopup/model/popupDefinitions";
|
|
import MapPopupDataTable from "@/features/windowPopup/ui/MapPopupDataTable";
|
|
import PopupSearchPanel from "@/features/windowPopup/ui/PopupSearchPanel";
|
|
import {
|
|
PIPE_ANALYSIS_SUMMARY_DEFAULT_FILTERS,
|
|
PIPE_ANALYSIS_TYPE_OPTIONS,
|
|
applyScopeToSummaryFilters,
|
|
buildPipeAnalysisFileDate,
|
|
buildPipeAnalysisYearMaterialGroups,
|
|
buildPipeAnalysisScope,
|
|
buildPipeAnalysisSummaryDownloadHeaders,
|
|
buildPipeAnalysisSummaryHeadList,
|
|
buildPipeAnalysisSummaryViewRows,
|
|
fetchPipeAnalysisZoneOptions,
|
|
resolvePipeAnalysisTypeLabel,
|
|
type PipeAnalysisMaterialColumn,
|
|
type PipeAnalysisSummaryFilters,
|
|
type PipeAnalysisSummaryResponse,
|
|
type PipeAnalysisSummaryViewRow,
|
|
type PipeAnalysisYearMaterialGroup,
|
|
} from "./pipeAnalysisUtils";
|
|
|
|
const SUMMARY_FILE_PREFIX: Record<string, string> = {
|
|
YEAR: "관로분석_경과년도별",
|
|
MATERIAL: "관로분석_관재질별",
|
|
YEAR_MATERIAL: "관로분석_경과년도별_관재질별",
|
|
};
|
|
const PIPE_ANALYSIS_SUMMARY_PAGE_SIZE = 10;
|
|
|
|
const toExcelColumnName = (index: number) => {
|
|
let current = index;
|
|
let result = "";
|
|
|
|
while (current > 0) {
|
|
const remainder = (current - 1) % 26;
|
|
result = String.fromCharCode(65 + remainder) + result;
|
|
current = Math.floor((current - 1) / 26);
|
|
}
|
|
|
|
return result || "A";
|
|
};
|
|
|
|
const formatGridNumber = (value: unknown) => {
|
|
const num = Number(value ?? 0);
|
|
if (!Number.isFinite(num)) {
|
|
return String(value ?? "");
|
|
}
|
|
return num.toLocaleString("ko-KR", {
|
|
minimumFractionDigits: 0,
|
|
maximumFractionDigits: 3,
|
|
});
|
|
};
|
|
|
|
const resolveErrorMessage = (error: unknown, fallbackMessage: string) =>
|
|
error instanceof Error && error.message.trim()
|
|
? error.message
|
|
: fallbackMessage;
|
|
|
|
export default function PipeAnalysisPopupPage() {
|
|
const alert = useAlertStore((state) => state.setMessage);
|
|
const { ctpv, sgg, fetchCtpv, fetchSgg } = useStore();
|
|
const userInfo = useUserStore((state) => state.userInfo);
|
|
const scope = useMemo(() => buildPipeAnalysisScope(userInfo), [userInfo]);
|
|
const [draftFilters, setDraftFilters] = useState<PipeAnalysisSummaryFilters>(
|
|
() =>
|
|
applyScopeToSummaryFilters(PIPE_ANALYSIS_SUMMARY_DEFAULT_FILTERS, scope),
|
|
);
|
|
const [appliedFilters, setAppliedFilters] =
|
|
useState<PipeAnalysisSummaryFilters>(() =>
|
|
applyScopeToSummaryFilters(PIPE_ANALYSIS_SUMMARY_DEFAULT_FILTERS, scope),
|
|
);
|
|
const [materialColumns, setMaterialColumns] = useState<
|
|
PipeAnalysisMaterialColumn[]
|
|
>([]);
|
|
const [rows, setRows] = useState<PipeAnalysisSummaryViewRow[]>([]);
|
|
const [zoneOptions, setZoneOptions] = useState<
|
|
Array<{ value: string; label: string }>
|
|
>([]);
|
|
const [summaryCurrentPage, setSummaryCurrentPage] = useState(1);
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
const initializedRef = useRef(false);
|
|
|
|
useEffect(() => {
|
|
if (ctpv.length === 0) fetchCtpv();
|
|
if (sgg.length === 0) fetchSgg();
|
|
}, [ctpv.length, fetchCtpv, fetchSgg, sgg.length]);
|
|
|
|
useEffect(() => {
|
|
setDraftFilters((current) => applyScopeToSummaryFilters(current, scope));
|
|
setAppliedFilters((current) => applyScopeToSummaryFilters(current, scope));
|
|
}, [scope]);
|
|
|
|
useEffect(() => {
|
|
let mounted = true;
|
|
|
|
(async () => {
|
|
try {
|
|
const zones = await fetchPipeAnalysisZoneOptions({
|
|
ctpvCd: draftFilters.ctpvCd,
|
|
sggCd: draftFilters.sggCd,
|
|
sggNm: sgg.find(
|
|
(option) => String(option.val).trim() === draftFilters.sggCd,
|
|
)?.text,
|
|
scopeRegionCode: scope.regionCode,
|
|
});
|
|
if (!mounted) return;
|
|
setZoneOptions([{ value: "0", label: "전체" }, ...zones]);
|
|
} catch (error) {
|
|
console.error("처리구역 목록 조회 중 오류:", error);
|
|
if (!mounted) return;
|
|
setZoneOptions([{ value: "0", label: "전체" }]);
|
|
}
|
|
})();
|
|
|
|
return () => {
|
|
mounted = false;
|
|
};
|
|
}, [draftFilters.ctpvCd, draftFilters.sggCd, scope.regionCode, sgg]);
|
|
|
|
const fetchSummary = useCallback(
|
|
async (nextFilters: PipeAnalysisSummaryFilters) => {
|
|
const params = new URLSearchParams({
|
|
analysisType: nextFilters.analysisType,
|
|
});
|
|
|
|
appendApiSearchParams(params, {
|
|
ctpvCd: nextFilters.ctpvCd,
|
|
sggCd: nextFilters.sggCd,
|
|
swtrmtZoneNm: nextFilters.swtrmtZoneNm,
|
|
});
|
|
if (nextFilters.scopeRegionCode)
|
|
params.set("scopeRegionCode", nextFilters.scopeRegionCode);
|
|
|
|
const response = (await getData(
|
|
`v1/fclts/ppl-analysis/summaries?${params.toString()}`,
|
|
)) as PipeAnalysisSummaryResponse;
|
|
|
|
const nextMaterialColumns = Array.isArray(response?.materialColumns)
|
|
? response.materialColumns
|
|
: [];
|
|
setMaterialColumns(nextMaterialColumns);
|
|
setRows(buildPipeAnalysisSummaryViewRows(response, ctpv, sgg));
|
|
},
|
|
[ctpv, sgg],
|
|
);
|
|
|
|
const handleSearch = useCallback(
|
|
async (nextFilters = draftFilters) => {
|
|
setIsLoading(true);
|
|
try {
|
|
const scopedFilters = applyScopeToSummaryFilters(nextFilters, scope);
|
|
setDraftFilters(scopedFilters);
|
|
setAppliedFilters(scopedFilters);
|
|
setSummaryCurrentPage(1);
|
|
await fetchSummary(scopedFilters);
|
|
} catch (error) {
|
|
console.error("관로분석 집계 조회 중 오류:", error);
|
|
alert(
|
|
resolveErrorMessage(
|
|
error,
|
|
"관로분석 집계 조회 중 오류가 발생했습니다.",
|
|
),
|
|
);
|
|
setRows([]);
|
|
setMaterialColumns([]);
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
},
|
|
[alert, draftFilters, fetchSummary, scope],
|
|
);
|
|
|
|
useEffect(() => {
|
|
if (initializedRef.current) return;
|
|
if (ctpv.length === 0 || sgg.length === 0) return;
|
|
|
|
initializedRef.current = true;
|
|
void handleSearch(applyScopeToSummaryFilters(draftFilters, scope));
|
|
}, [ctpv.length, draftFilters, handleSearch, scope, sgg.length]);
|
|
|
|
const handleDownload = async () => {
|
|
if (rows.length === 0) {
|
|
alert("다운로드할 데이터가 없습니다.");
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const exportHeadList = buildPipeAnalysisSummaryHeadList(
|
|
appliedFilters.analysisType,
|
|
materialColumns,
|
|
);
|
|
const headerRange = `A1:${toExcelColumnName(exportHeadList.length)}1`;
|
|
const mergeRanges =
|
|
appliedFilters.analysisType === "YEAR_MATERIAL"
|
|
? (() => {
|
|
const ranges: string[] = [];
|
|
let currentRow = 2;
|
|
|
|
orderedYearMaterialGroups.forEach((group) => {
|
|
const rowSpan = group.rows.length;
|
|
if (rowSpan > 1) {
|
|
["A", "B", "C", "D", "E"].forEach((column) => {
|
|
ranges.push(
|
|
`${column}${currentRow}:${column}${currentRow + rowSpan - 1}`,
|
|
);
|
|
});
|
|
}
|
|
currentRow += rowSpan;
|
|
});
|
|
|
|
return ranges;
|
|
})()
|
|
: [];
|
|
const exportRows =
|
|
appliedFilters.analysisType === "YEAR_MATERIAL"
|
|
? orderedYearMaterialGroups.flatMap((group) =>
|
|
group.rows.map((yearRow, rowIndex) => {
|
|
const exportRow: Record<string, unknown> = {
|
|
rowNo: rowIndex === 0 ? group.rowNo : "",
|
|
ctpvNm: rowIndex === 0 ? group.ctpvNm : "",
|
|
sggNm: rowIndex === 0 ? group.sggNm : "",
|
|
swtrmtZoneNm: rowIndex === 0 ? group.swtrmtZoneNm : "",
|
|
totalLengthKm: rowIndex === 0 ? group.totalLengthKm : "",
|
|
elapsedYearLabel: yearRow.elapsedYearLabel,
|
|
};
|
|
|
|
materialColumns.forEach((column) => {
|
|
exportRow[column.key] = yearRow.metrics[column.key] ?? 0;
|
|
});
|
|
|
|
return exportRow;
|
|
}),
|
|
)
|
|
: rows.map((row) => {
|
|
const exportRow: Record<string, unknown> = {};
|
|
exportHeadList.forEach((head) => {
|
|
exportRow[head.id] = row[head.id];
|
|
});
|
|
return exportRow;
|
|
});
|
|
await downloadExcelWithKoreanHeaders({
|
|
data: exportRows as unknown as JSON[],
|
|
fileName: `${SUMMARY_FILE_PREFIX[appliedFilters.analysisType]}_${buildPipeAnalysisFileDate()}`,
|
|
sheetNameArray: ["관로분석 현황"],
|
|
headerRange,
|
|
headerMapping: buildPipeAnalysisSummaryDownloadHeaders(
|
|
appliedFilters.analysisType,
|
|
materialColumns,
|
|
),
|
|
mergeRanges,
|
|
});
|
|
} catch (error) {
|
|
console.error("관로분석 집계 다운로드 중 오류:", error);
|
|
alert(
|
|
resolveErrorMessage(
|
|
error,
|
|
"관로분석 집계 다운로드 중 오류가 발생했습니다.",
|
|
),
|
|
);
|
|
}
|
|
};
|
|
|
|
const handleCellClick = (
|
|
row: PipeAnalysisSummaryViewRow,
|
|
columnId: string,
|
|
) => {
|
|
if (row.__isNoZone || row.__isSummaryTotal) return;
|
|
const cellFilter = row.__cellFilters[columnId];
|
|
if (!cellFilter) return;
|
|
|
|
const popup = openWindowPopup("pipeAnalysisDetailPopup", {
|
|
analysisType: appliedFilters.analysisType,
|
|
ctpvCd: String(row.__base.ctpvCd || appliedFilters.ctpvCd),
|
|
sggCd: String(row.__base.sggCd || appliedFilters.sggCd || "0"),
|
|
swtrmtZoneNm: String(
|
|
row.__base.swtrmtZoneNm || appliedFilters.swtrmtZoneNm,
|
|
),
|
|
elapsedYearBucket: cellFilter.elapsedYearBucket ?? "",
|
|
materialCode: cellFilter.materialCode ?? "",
|
|
scopeRegionCode: scope.regionCode,
|
|
});
|
|
if (!popup) {
|
|
alert("팝업이 차단되었습니다. 브라우저 팝업 허용 설정을 확인해주세요.");
|
|
}
|
|
};
|
|
|
|
const handleYearMaterialCellClick = (
|
|
group: PipeAnalysisYearMaterialGroup,
|
|
row: PipeAnalysisYearMaterialGroup["rows"][number],
|
|
columnId: string,
|
|
) => {
|
|
const cellFilter = row.cellFilters[columnId];
|
|
if (!cellFilter) return;
|
|
|
|
const popup = openWindowPopup("pipeAnalysisDetailPopup", {
|
|
analysisType: appliedFilters.analysisType,
|
|
ctpvCd: String(group.base.ctpvCd || appliedFilters.ctpvCd),
|
|
sggCd: String(group.base.sggCd || appliedFilters.sggCd || "0"),
|
|
swtrmtZoneNm: String(
|
|
group.base.swtrmtZoneNm || appliedFilters.swtrmtZoneNm,
|
|
),
|
|
elapsedYearBucket: cellFilter.elapsedYearBucket ?? "",
|
|
materialCode: cellFilter.materialCode ?? "",
|
|
scopeRegionCode: scope.regionCode,
|
|
});
|
|
if (!popup) {
|
|
alert("팝업이 차단되었습니다. 브라우저 팝업 허용 설정을 확인해주세요.");
|
|
}
|
|
};
|
|
|
|
const headList = useMemo(
|
|
() =>
|
|
buildPipeAnalysisSummaryHeadList(
|
|
appliedFilters.analysisType,
|
|
materialColumns,
|
|
),
|
|
[appliedFilters.analysisType, materialColumns],
|
|
);
|
|
|
|
const yearMaterialGroups = useMemo(
|
|
() =>
|
|
appliedFilters.analysisType === "YEAR_MATERIAL"
|
|
? buildPipeAnalysisYearMaterialGroups(rows, materialColumns)
|
|
: [],
|
|
[appliedFilters.analysisType, materialColumns, rows],
|
|
);
|
|
const orderedYearMaterialGroups = useMemo(
|
|
() =>
|
|
yearMaterialGroups.map((group, index) => ({
|
|
...group,
|
|
rowNo: yearMaterialGroups.length - index,
|
|
})),
|
|
[yearMaterialGroups],
|
|
);
|
|
|
|
const useHorizontalScrollTable = appliedFilters.analysisType !== "YEAR";
|
|
const summaryPageOffset =
|
|
(summaryCurrentPage - 1) * PIPE_ANALYSIS_SUMMARY_PAGE_SIZE;
|
|
const pagedRows = useMemo(
|
|
() =>
|
|
appliedFilters.analysisType === "YEAR_MATERIAL"
|
|
? rows
|
|
: rows.slice(
|
|
summaryPageOffset,
|
|
summaryPageOffset + PIPE_ANALYSIS_SUMMARY_PAGE_SIZE,
|
|
),
|
|
[appliedFilters.analysisType, rows, summaryPageOffset],
|
|
);
|
|
const clickableHeadIds = useMemo(
|
|
() =>
|
|
headList
|
|
.filter((head) =>
|
|
rows.some((row) => Boolean(row.__cellFilters[head.id])),
|
|
)
|
|
.map((head) => head.id),
|
|
[headList, rows],
|
|
);
|
|
const visibleYearMaterialGroups = useMemo(
|
|
() =>
|
|
orderedYearMaterialGroups.slice(
|
|
summaryPageOffset,
|
|
summaryPageOffset + PIPE_ANALYSIS_SUMMARY_PAGE_SIZE,
|
|
),
|
|
[orderedYearMaterialGroups, summaryPageOffset],
|
|
);
|
|
const sggOptions = useMemo(
|
|
() =>
|
|
draftFilters.ctpvCd === "0"
|
|
? []
|
|
: sgg.filter((item) =>
|
|
String(item.val).startsWith(draftFilters.ctpvCd.slice(0, 2)),
|
|
),
|
|
[draftFilters.ctpvCd, sgg],
|
|
);
|
|
|
|
return (
|
|
<StandardPopupLayout
|
|
title={windowPopupDefinitions.pipeAnalysisPopup.title}
|
|
bodyClassName="overflow-x-hidden"
|
|
>
|
|
<LoadingOverlay isLoading={isLoading} />
|
|
<PopupSearchPanel contentClassName="flex flex-wrap items-center gap-x-5 gap-y-3">
|
|
<label className="flex shrink-0 items-center gap-2">
|
|
<div className="shrink-0 whitespace-nowrap text-xl font-medium text-label">
|
|
시도
|
|
</div>
|
|
<select
|
|
className="sn-popup-input !h-[3.2rem] w-[14rem] !text-xl"
|
|
value={draftFilters.ctpvCd}
|
|
disabled={scope.ctpvLocked}
|
|
onChange={(event) =>
|
|
setDraftFilters((current) => ({
|
|
...current,
|
|
ctpvCd: event.target.value,
|
|
sggCd: "0",
|
|
swtrmtZoneNm: "0",
|
|
}))
|
|
}
|
|
>
|
|
<option value="0">전체</option>
|
|
{ctpv.map((item) => (
|
|
<option key={item.val} value={String(item.val)}>
|
|
{item.text}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</label>
|
|
|
|
<label className="flex shrink-0 items-center gap-2">
|
|
<div className="shrink-0 whitespace-nowrap text-xl font-medium text-label">
|
|
시군구
|
|
</div>
|
|
<select
|
|
className="sn-popup-input !h-[3.2rem] w-[14rem] !text-xl"
|
|
value={draftFilters.sggCd}
|
|
disabled={scope.sggLocked}
|
|
onChange={(event) =>
|
|
setDraftFilters((current) => ({
|
|
...current,
|
|
sggCd: event.target.value,
|
|
swtrmtZoneNm: "0",
|
|
}))
|
|
}
|
|
>
|
|
<option value="0">전체</option>
|
|
{sggOptions.map((item) => (
|
|
<option key={item.val} value={String(item.val)}>
|
|
{item.text}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</label>
|
|
|
|
<label className="flex shrink-0 items-center gap-2">
|
|
<div className="shrink-0 whitespace-nowrap text-xl font-medium text-label">
|
|
처리구역
|
|
</div>
|
|
<select
|
|
className="sn-popup-input !h-[3.2rem] w-[14rem] !text-xl"
|
|
value={draftFilters.swtrmtZoneNm}
|
|
onChange={(event) =>
|
|
setDraftFilters((current) => ({
|
|
...current,
|
|
swtrmtZoneNm: event.target.value,
|
|
}))
|
|
}
|
|
>
|
|
{zoneOptions.map((item) => (
|
|
<option key={item.value} value={item.value}>
|
|
{item.label}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</label>
|
|
|
|
<label className="flex shrink-0 items-center gap-2">
|
|
<div className="shrink-0 whitespace-nowrap text-xl font-medium text-label">
|
|
분석구분
|
|
</div>
|
|
<select
|
|
className="sn-popup-input !h-[3.2rem] w-[18rem] !text-xl"
|
|
value={draftFilters.analysisType}
|
|
onChange={(event) =>
|
|
setDraftFilters((current) => ({
|
|
...current,
|
|
analysisType: event.target
|
|
.value as PipeAnalysisSummaryFilters["analysisType"],
|
|
}))
|
|
}
|
|
>
|
|
{PIPE_ANALYSIS_TYPE_OPTIONS.map((item) => (
|
|
<option key={item.value} value={item.value}>
|
|
{item.label}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</label>
|
|
|
|
<div className="flex min-w-fit flex-1 items-center justify-end gap-2">
|
|
<Button
|
|
type="button"
|
|
color="primary"
|
|
onClick={() => void handleSearch()}
|
|
>
|
|
조회
|
|
</Button>
|
|
<Button
|
|
type="button"
|
|
color="white"
|
|
onClick={() => {
|
|
const resetFilters = applyScopeToSummaryFilters(
|
|
PIPE_ANALYSIS_SUMMARY_DEFAULT_FILTERS,
|
|
scope,
|
|
);
|
|
setDraftFilters(resetFilters);
|
|
void handleSearch(resetFilters);
|
|
}}
|
|
>
|
|
초기화
|
|
</Button>
|
|
</div>
|
|
</PopupSearchPanel>
|
|
|
|
{appliedFilters.analysisType === "YEAR_MATERIAL" ? (
|
|
<div className="card card-border !m-0 min-w-0 overflow-hidden !p-0">
|
|
<div className="card-header">
|
|
<h3 className="text-2xl font-medium text-label">
|
|
{resolvePipeAnalysisTypeLabel(appliedFilters.analysisType)} 목록
|
|
</h3>
|
|
<Button type="button" onClick={() => void handleDownload()}>
|
|
엑셀다운로드
|
|
</Button>
|
|
</div>
|
|
<div className="card !m-[1.2rem] overflow-x-auto !p-0">
|
|
<Table
|
|
variant="secondary"
|
|
className="w-max min-w-full caption-bottom text-sm"
|
|
>
|
|
<TableHeader className="font-bold">
|
|
<TableRow>
|
|
{headList.map((head) => (
|
|
<TableHead
|
|
key={head.id}
|
|
className="border border-border bg-primary px-4 py-[1.2rem] text-center text-[1.3rem] font-medium text-primary-foreground"
|
|
>
|
|
{head.id === "rowNo" ? "순번" : head.title}
|
|
</TableHead>
|
|
))}
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody className="text-center">
|
|
{visibleYearMaterialGroups.length > 0 ? (
|
|
visibleYearMaterialGroups.flatMap((group) =>
|
|
group.rows.map((yearRow, rowIndex) => (
|
|
<TableRow
|
|
key={`${group.base.ctpvCd}-${group.base.sggCd}-${group.base.swtrmtZoneNm}-${yearRow.elapsedYearBucket}`}
|
|
>
|
|
{rowIndex === 0 ? (
|
|
<>
|
|
<TableCell
|
|
rowSpan={group.rows.length}
|
|
className="border border-border px-2 py-[1.2rem] text-center text-[1.3rem]"
|
|
>
|
|
{group.rowNo}
|
|
</TableCell>
|
|
<TableCell
|
|
rowSpan={group.rows.length}
|
|
className="border border-border px-2 py-[1.2rem] text-center text-[1.3rem]"
|
|
>
|
|
{group.ctpvNm}
|
|
</TableCell>
|
|
<TableCell
|
|
rowSpan={group.rows.length}
|
|
className="border border-border px-2 py-[1.2rem] text-center text-[1.3rem]"
|
|
>
|
|
{group.sggNm}
|
|
</TableCell>
|
|
<TableCell
|
|
rowSpan={group.rows.length}
|
|
className="border border-border px-2 py-[1.2rem] text-center text-[1.3rem]"
|
|
>
|
|
{group.swtrmtZoneNm}
|
|
</TableCell>
|
|
<TableCell
|
|
rowSpan={group.rows.length}
|
|
className="border border-border px-2 py-[1.2rem] text-right text-[1.3rem]"
|
|
>
|
|
{formatGridNumber(group.totalLengthKm)}
|
|
</TableCell>
|
|
</>
|
|
) : null}
|
|
<TableCell className="border border-border px-2 py-[1.2rem] text-center text-[1.3rem]">
|
|
{yearRow.elapsedYearLabel}
|
|
</TableCell>
|
|
{materialColumns.map((column) => {
|
|
const value = Number(
|
|
yearRow.metrics[column.key] ?? 0,
|
|
);
|
|
const isClickable =
|
|
value > 0 &&
|
|
Boolean(yearRow.cellFilters[column.key]);
|
|
return (
|
|
<TableCell
|
|
key={`${group.base.ctpvCd}-${group.base.sggCd}-${group.base.swtrmtZoneNm}-${yearRow.elapsedYearBucket}-${column.key}`}
|
|
className={`border border-border px-2 py-[1.2rem] text-right text-[1.3rem] ${
|
|
isClickable
|
|
? "cursor-pointer font-semibold text-primary underline underline-offset-2"
|
|
: ""
|
|
}`}
|
|
onClick={() => {
|
|
if (isClickable) {
|
|
handleYearMaterialCellClick(
|
|
group,
|
|
yearRow,
|
|
column.key,
|
|
);
|
|
}
|
|
}}
|
|
>
|
|
{formatGridNumber(value)}
|
|
</TableCell>
|
|
);
|
|
})}
|
|
</TableRow>
|
|
)),
|
|
)
|
|
) : (
|
|
<TableRow>
|
|
<TableCell
|
|
colSpan={headList.length}
|
|
className="h-24 border border-border text-center text-[1.3rem] text-label"
|
|
>
|
|
조회 결과가 없습니다.
|
|
</TableCell>
|
|
</TableRow>
|
|
)}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
{orderedYearMaterialGroups.length >
|
|
PIPE_ANALYSIS_SUMMARY_PAGE_SIZE ? (
|
|
<div className="mb-[1.2rem] flex justify-center">
|
|
<UiPageNations
|
|
total={orderedYearMaterialGroups.length}
|
|
cur={summaryCurrentPage}
|
|
pageSize={PIPE_ANALYSIS_SUMMARY_PAGE_SIZE}
|
|
onPageChange={setSummaryCurrentPage}
|
|
/>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
) : null}
|
|
|
|
{appliedFilters.analysisType !== "YEAR_MATERIAL" ? (
|
|
<MapPopupDataTable
|
|
rows={
|
|
pagedRows as Array<
|
|
PipeAnalysisSummaryViewRow & Record<string, unknown>
|
|
>
|
|
}
|
|
headlist={headList}
|
|
title={`${resolvePipeAnalysisTypeLabel(appliedFilters.analysisType)} 목록`}
|
|
total={rows.length}
|
|
page={summaryCurrentPage}
|
|
pageSize={PIPE_ANALYSIS_SUMMARY_PAGE_SIZE}
|
|
onPageChange={setSummaryCurrentPage}
|
|
scrollMode={useHorizontalScrollTable ? "horizontal" : "none"}
|
|
minTableWidth={useHorizontalScrollTable ? "160rem" : "100%"}
|
|
clickableHeadIds={clickableHeadIds}
|
|
onCellClick={(row, _rowIndex, columnId) =>
|
|
handleCellClick(row, columnId)
|
|
}
|
|
rowId={(row, index) =>
|
|
`${String(row.__base.ctpvCd)}-${String(row.__base.sggCd)}-${String(row.__base.swtrmtZoneNm)}-${index}`
|
|
}
|
|
actions={
|
|
<Button type="button" onClick={() => void handleDownload()}>
|
|
엑셀다운로드
|
|
</Button>
|
|
}
|
|
/>
|
|
) : null}
|
|
</StandardPopupLayout>
|
|
);
|
|
}
|