490 lines
16 KiB
TypeScript
490 lines
16 KiB
TypeScript
/**
|
|
* 화면명: 관로현황 목록
|
|
* 관로분석 집계 항목에 해당하는 개별 관로 목록을 표시한다.
|
|
*/
|
|
"use client";
|
|
|
|
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
|
import { useSearchParams } from "next/navigation";
|
|
import { Button, Input } from "@common/components";
|
|
import { StandardPopupLayout } from "@common/business_components";
|
|
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 { fetchAllPages } from "@/shared/lib/fetch-all-pages";
|
|
import { useUserStore } from "@/shared/lib/use-user-store";
|
|
import MapPopupDataTable from "@/features/windowPopup/ui/MapPopupDataTable";
|
|
import PopupSearchPanel from "@/features/windowPopup/ui/PopupSearchPanel";
|
|
import { MS_SWAGE_PPL_CODES, MS_SWAGE_PPL_USE_CODES } from "../common/table";
|
|
import {
|
|
PIPE_ANALYSIS_DETAIL_DEFAULT_FILTERS,
|
|
PIPE_ANALYSIS_DETAIL_EXCEL_HEADERS,
|
|
PIPE_ANALYSIS_DETAIL_HEADLIST,
|
|
PIPE_ANALYSIS_DETAIL_ROW_SELECT_MESSAGE,
|
|
applyScopeToDetailFilters,
|
|
buildPipeAnalysisFileDate,
|
|
buildPipeAnalysisScope,
|
|
normalizeNumberInput,
|
|
resolveElapsedYearBucketLabel,
|
|
resolveMaterialKoreanName,
|
|
resolveMaterialName,
|
|
resolvePipeAnalysisTypeLabel,
|
|
resolveRegionName,
|
|
toPipeAnalysisDetailViewRows,
|
|
type PipeAnalysisDetailFilters,
|
|
type PipeAnalysisDetailRow,
|
|
} from "./pipeAnalysisUtils";
|
|
|
|
type DetailViewRow = ReturnType<typeof toPipeAnalysisDetailViewRows>[number];
|
|
const PIPE_ANALYSIS_DETAIL_PAGE_SIZE = 10;
|
|
const PIPE_ANALYSIS_MAP_WINDOW_NAME = "sn-sewerage-map-root";
|
|
const PIPE_ANALYSIS_DETAIL_EXPORT_KEYS = [
|
|
"rowNo",
|
|
"ctpvNm",
|
|
"sggNm",
|
|
"fcltMngNo",
|
|
"instMngNo",
|
|
"swtrmtZoneNm",
|
|
"instlYmd",
|
|
"useNm",
|
|
"pdmtVl",
|
|
"prlgVl",
|
|
"materialName",
|
|
] as const;
|
|
const PIPE_ANALYSIS_DETAIL_STANDARD_HEADLIST = PIPE_ANALYSIS_DETAIL_HEADLIST;
|
|
|
|
const resolveErrorMessage = (error: unknown, fallbackMessage: string) =>
|
|
error instanceof Error && error.message.trim()
|
|
? error.message
|
|
: fallbackMessage;
|
|
|
|
export default function PipeAnalysisDetailPopupPage() {
|
|
const alert = useAlertStore((state) => state.setMessage);
|
|
const searchParams = useSearchParams();
|
|
const { ctpv, sgg, fetchCtpv, fetchSgg } = useStore();
|
|
const userInfo = useUserStore((state) => state.userInfo);
|
|
const scope = useMemo(() => buildPipeAnalysisScope(userInfo), [userInfo]);
|
|
|
|
const baseAnalysisType = searchParams.get("analysisType") ?? "YEAR";
|
|
const baseElapsedYearBucket = searchParams.get("elapsedYearBucket") ?? "";
|
|
const baseMaterialCode = searchParams.get("materialCode") ?? "0";
|
|
const [filters, setFilters] = useState<PipeAnalysisDetailFilters>(() =>
|
|
applyScopeToDetailFilters(
|
|
{
|
|
...PIPE_ANALYSIS_DETAIL_DEFAULT_FILTERS,
|
|
ctpvCd:
|
|
searchParams.get("ctpvCd") ??
|
|
PIPE_ANALYSIS_DETAIL_DEFAULT_FILTERS.ctpvCd,
|
|
sggCd:
|
|
searchParams.get("sggCd") ??
|
|
PIPE_ANALYSIS_DETAIL_DEFAULT_FILTERS.sggCd,
|
|
swtrmtZoneNm:
|
|
searchParams.get("swtrmtZoneNm") ??
|
|
PIPE_ANALYSIS_DETAIL_DEFAULT_FILTERS.swtrmtZoneNm,
|
|
materialCode: baseMaterialCode,
|
|
},
|
|
scope,
|
|
),
|
|
);
|
|
const [appliedFilters, setAppliedFilters] =
|
|
useState<PipeAnalysisDetailFilters>(() =>
|
|
applyScopeToDetailFilters(
|
|
{
|
|
...PIPE_ANALYSIS_DETAIL_DEFAULT_FILTERS,
|
|
ctpvCd:
|
|
searchParams.get("ctpvCd") ??
|
|
PIPE_ANALYSIS_DETAIL_DEFAULT_FILTERS.ctpvCd,
|
|
sggCd:
|
|
searchParams.get("sggCd") ??
|
|
PIPE_ANALYSIS_DETAIL_DEFAULT_FILTERS.sggCd,
|
|
swtrmtZoneNm:
|
|
searchParams.get("swtrmtZoneNm") ??
|
|
PIPE_ANALYSIS_DETAIL_DEFAULT_FILTERS.swtrmtZoneNm,
|
|
materialCode: baseMaterialCode,
|
|
},
|
|
scope,
|
|
),
|
|
);
|
|
const [rows, setRows] = useState<DetailViewRow[]>([]);
|
|
const [total, setTotal] = useState(0);
|
|
const [currentPage, setCurrentPage] = 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(() => {
|
|
setFilters((current) => applyScopeToDetailFilters(current, scope));
|
|
setAppliedFilters((current) => applyScopeToDetailFilters(current, scope));
|
|
}, [scope]);
|
|
|
|
const fetchRows = useCallback(
|
|
async (
|
|
page: number,
|
|
nextFilters: PipeAnalysisDetailFilters,
|
|
size: number,
|
|
) => {
|
|
const params = new URLSearchParams({
|
|
analysisType: baseAnalysisType,
|
|
page: String(page - 1),
|
|
size: String(size),
|
|
});
|
|
|
|
appendApiSearchParams(params, {
|
|
ctpvCd: nextFilters.ctpvCd,
|
|
sggCd: nextFilters.sggCd,
|
|
swtrmtZoneNm: nextFilters.swtrmtZoneNm,
|
|
elapsedYearBucket: baseElapsedYearBucket,
|
|
materialCode: nextFilters.materialCode,
|
|
useCd: nextFilters.useCd,
|
|
diameterFrom: nextFilters.diameterFrom,
|
|
diameterTo: nextFilters.diameterTo,
|
|
});
|
|
if (scope.regionCode) params.set("scopeRegionCode", scope.regionCode);
|
|
|
|
const response = await getData(
|
|
`v1/fclts/ppl-analysis/details?${params.toString()}`,
|
|
);
|
|
const responseRows = Array.isArray(response?.data) ? response.data : [];
|
|
|
|
return {
|
|
rows: toPipeAnalysisDetailViewRows(
|
|
responseRows as PipeAnalysisDetailRow[],
|
|
ctpv,
|
|
sgg,
|
|
),
|
|
total: Number(response?.count ?? 0),
|
|
};
|
|
},
|
|
[baseAnalysisType, baseElapsedYearBucket, ctpv, scope.regionCode, sgg],
|
|
);
|
|
|
|
const loadRows = useCallback(
|
|
async (page = 1, nextFilters = filters) => {
|
|
setIsLoading(true);
|
|
try {
|
|
const response = await fetchRows(
|
|
page,
|
|
nextFilters,
|
|
PIPE_ANALYSIS_DETAIL_PAGE_SIZE,
|
|
);
|
|
setRows(response.rows);
|
|
setTotal(response.total);
|
|
setCurrentPage(page);
|
|
setAppliedFilters(nextFilters);
|
|
} catch (error) {
|
|
console.error("관로현황 조회 중 오류:", error);
|
|
alert(
|
|
resolveErrorMessage(error, "관로현황 조회 중 오류가 발생했습니다."),
|
|
);
|
|
setRows([]);
|
|
setTotal(0);
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
},
|
|
[alert, fetchRows, filters],
|
|
);
|
|
|
|
useEffect(() => {
|
|
if (initializedRef.current) return;
|
|
if (ctpv.length === 0 || sgg.length === 0) return;
|
|
initializedRef.current = true;
|
|
const initialFilters = applyScopeToDetailFilters(filters, scope);
|
|
void loadRows(1, initialFilters);
|
|
}, [ctpv.length, filters, loadRows, scope, sgg.length]);
|
|
|
|
const handleSearch = () => {
|
|
const nextFilters = applyScopeToDetailFilters(filters, scope);
|
|
void loadRows(1, nextFilters);
|
|
};
|
|
|
|
/** Keeps the last searched filters when the user moves pages. */
|
|
const handlePageChange = (page: number) => {
|
|
void loadRows(page, appliedFilters);
|
|
};
|
|
|
|
/** 선택 관로를 지도에 표시하고 상세창의 최상위 하수관망도 부모창을 앞으로 가져온다. */
|
|
const handleRowClick = (row: DetailViewRow) => {
|
|
const targetWindow = window.opener?.opener ?? window.opener;
|
|
if (!targetWindow || targetWindow.closed) return;
|
|
|
|
// Chrome가 다른 탭/창의 focus()만 무시하는 경우를 대비해 사용자 클릭 안에서
|
|
// 기존 최상위 지도창을 고정 이름으로 다시 선택한 뒤 포커스를 요청한다.
|
|
targetWindow.name = targetWindow.name || PIPE_ANALYSIS_MAP_WINDOW_NAME;
|
|
const namedTargetWindow =
|
|
window.open("", targetWindow.name) ?? targetWindow;
|
|
window.opener?.blur();
|
|
window.blur();
|
|
namedTargetWindow.focus();
|
|
targetWindow.postMessage(
|
|
{
|
|
type: PIPE_ANALYSIS_DETAIL_ROW_SELECT_MESSAGE,
|
|
row,
|
|
},
|
|
window.location.origin,
|
|
);
|
|
};
|
|
|
|
const handleDownload = async () => {
|
|
if (total === 0) {
|
|
alert("다운로드할 데이터가 없습니다.");
|
|
return;
|
|
}
|
|
|
|
try {
|
|
setIsLoading(true);
|
|
const response = await fetchAllPages({
|
|
fetchPage: (page, size) => fetchRows(page + 1, appliedFilters, size),
|
|
getItems: (page) => page.rows,
|
|
getTotal: (page) => page.total,
|
|
});
|
|
const exportRows = response.items.map((row) => ({
|
|
rowNo: row.rowNo,
|
|
ctpvNm: row.ctpvNm,
|
|
sggNm: row.sggNm,
|
|
fcltMngNo: row.fcltMngNo,
|
|
instMngNo: row.instMngNo,
|
|
swtrmtZoneNm: row.swtrmtZoneNm,
|
|
instlYmd: row.instlYmd,
|
|
useNm: row.useNm,
|
|
pdmtVl: row.pdmtVl,
|
|
prlgVl: row.prlgVl,
|
|
materialName:
|
|
resolveMaterialKoreanName(row.materialCode) || row.materialName,
|
|
}));
|
|
const detailHeaderRange = `A1:${String.fromCharCode(64 + PIPE_ANALYSIS_DETAIL_EXPORT_KEYS.length)}1`;
|
|
await downloadExcelWithKoreanHeaders({
|
|
data: exportRows as unknown as JSON[],
|
|
fileName: `관로분석_관로현황_${buildPipeAnalysisFileDate()}`,
|
|
sheetNameArray: ["관로현황"],
|
|
headerRange: detailHeaderRange,
|
|
headerMapping: PIPE_ANALYSIS_DETAIL_EXCEL_HEADERS,
|
|
});
|
|
} catch (error) {
|
|
console.error("관로현황 다운로드 중 오류:", error);
|
|
alert(
|
|
resolveErrorMessage(error, "관로현황 다운로드 중 오류가 발생했습니다."),
|
|
);
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
const materialOptions = useMemo(() => {
|
|
const options = [
|
|
{ value: "0", label: "전체" },
|
|
...MS_SWAGE_PPL_CODES.map((item) => ({
|
|
value: item.val.trim(),
|
|
label: item.text,
|
|
})),
|
|
];
|
|
|
|
if (
|
|
baseMaterialCode &&
|
|
baseMaterialCode !== "0" &&
|
|
!options.some((item) => item.value === baseMaterialCode)
|
|
) {
|
|
options.push({
|
|
value: baseMaterialCode,
|
|
label: resolveMaterialName(baseMaterialCode),
|
|
});
|
|
}
|
|
|
|
return options;
|
|
}, [baseMaterialCode]);
|
|
|
|
const titleSuffix = useMemo(() => {
|
|
const locationParts: string[] = [];
|
|
const resolvedCtpvName =
|
|
rows[0]?.ctpvNm || resolveRegionName(filters.ctpvCd, ctpv, 2);
|
|
const resolvedSggName =
|
|
rows[0]?.sggNm || resolveRegionName(filters.sggCd, sgg, 5);
|
|
const resolvedZoneName =
|
|
(filters.swtrmtZoneNm && filters.swtrmtZoneNm !== "0"
|
|
? filters.swtrmtZoneNm
|
|
: rows[0]?.swtrmtZoneNm) || "";
|
|
|
|
if (resolvedCtpvName && resolvedCtpvName !== "-")
|
|
locationParts.push(resolvedCtpvName);
|
|
if (resolvedSggName && resolvedSggName !== "-")
|
|
locationParts.push(resolvedSggName);
|
|
if (
|
|
resolvedZoneName &&
|
|
resolvedZoneName !== "-" &&
|
|
resolvedZoneName !== "0"
|
|
)
|
|
locationParts.push(resolvedZoneName);
|
|
|
|
const parts = [];
|
|
if (locationParts.length > 0) parts.push(locationParts.join(" "));
|
|
const analysisTypeLabel = resolvePipeAnalysisTypeLabel(baseAnalysisType);
|
|
if (analysisTypeLabel) parts.push(analysisTypeLabel);
|
|
if (baseElapsedYearBucket)
|
|
parts.push(resolveElapsedYearBucketLabel(baseElapsedYearBucket));
|
|
if (baseMaterialCode && baseMaterialCode !== "0")
|
|
parts.push(resolveMaterialName(baseMaterialCode));
|
|
return parts.length > 0 ? ` (${parts.join(" / ")})` : "";
|
|
}, [
|
|
baseAnalysisType,
|
|
baseElapsedYearBucket,
|
|
baseMaterialCode,
|
|
ctpv,
|
|
filters.ctpvCd,
|
|
filters.sggCd,
|
|
filters.swtrmtZoneNm,
|
|
rows,
|
|
sgg,
|
|
]);
|
|
|
|
return (
|
|
<StandardPopupLayout
|
|
title={`관로현황 목록${titleSuffix}`}
|
|
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={filters.useCd}
|
|
onChange={(event) =>
|
|
setFilters((current) => ({
|
|
...current,
|
|
useCd: event.target.value,
|
|
}))
|
|
}
|
|
>
|
|
<option value="0">전체</option>
|
|
{MS_SWAGE_PPL_USE_CODES.map((item) => (
|
|
<option key={item.val} value={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={filters.materialCode}
|
|
onChange={(event) =>
|
|
setFilters((current) => ({
|
|
...current,
|
|
materialCode: event.target.value,
|
|
}))
|
|
}
|
|
>
|
|
{materialOptions.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>
|
|
<Input
|
|
className="sn-popup-input !h-[3.2rem] w-[12rem] !text-xl"
|
|
value={filters.diameterFrom}
|
|
onChange={(event) =>
|
|
setFilters((current) => ({
|
|
...current,
|
|
diameterFrom: normalizeNumberInput(event.target.value),
|
|
}))
|
|
}
|
|
onKeyDown={(event) => {
|
|
if (event.key === "Enter") handleSearch();
|
|
}}
|
|
/>
|
|
</label>
|
|
|
|
<label className="flex shrink-0 items-center gap-2">
|
|
<div className="shrink-0 whitespace-nowrap text-xl font-medium text-label">
|
|
관경 종료
|
|
</div>
|
|
<Input
|
|
className="sn-popup-input !h-[3.2rem] w-[12rem] !text-xl"
|
|
value={filters.diameterTo}
|
|
onChange={(event) =>
|
|
setFilters((current) => ({
|
|
...current,
|
|
diameterTo: normalizeNumberInput(event.target.value),
|
|
}))
|
|
}
|
|
onKeyDown={(event) => {
|
|
if (event.key === "Enter") handleSearch();
|
|
}}
|
|
/>
|
|
</label>
|
|
|
|
<div className="flex min-w-fit flex-1 items-center justify-end gap-2">
|
|
<Button type="button" color="primary" onClick={handleSearch}>
|
|
조회
|
|
</Button>
|
|
<Button
|
|
type="button"
|
|
color="white"
|
|
onClick={() => {
|
|
const resetFilters = applyScopeToDetailFilters(
|
|
{
|
|
...PIPE_ANALYSIS_DETAIL_DEFAULT_FILTERS,
|
|
ctpvCd:
|
|
searchParams.get("ctpvCd") ??
|
|
PIPE_ANALYSIS_DETAIL_DEFAULT_FILTERS.ctpvCd,
|
|
sggCd:
|
|
searchParams.get("sggCd") ??
|
|
PIPE_ANALYSIS_DETAIL_DEFAULT_FILTERS.sggCd,
|
|
swtrmtZoneNm:
|
|
searchParams.get("swtrmtZoneNm") ??
|
|
PIPE_ANALYSIS_DETAIL_DEFAULT_FILTERS.swtrmtZoneNm,
|
|
materialCode: baseMaterialCode,
|
|
},
|
|
scope,
|
|
);
|
|
setFilters(resetFilters);
|
|
void loadRows(1, resetFilters);
|
|
}}
|
|
>
|
|
초기화
|
|
</Button>
|
|
</div>
|
|
</PopupSearchPanel>
|
|
|
|
<MapPopupDataTable
|
|
rows={rows as Array<DetailViewRow & Record<string, unknown>>}
|
|
headlist={PIPE_ANALYSIS_DETAIL_STANDARD_HEADLIST}
|
|
title="관로현황 목록"
|
|
total={total}
|
|
page={currentPage}
|
|
pageSize={PIPE_ANALYSIS_DETAIL_PAGE_SIZE}
|
|
onPageChange={handlePageChange}
|
|
onRowClick={handleRowClick}
|
|
rowId={(row, index) => String(row.fid ?? row.fcltMngNo ?? index)}
|
|
scrollMode="horizontal"
|
|
minTableWidth="150rem"
|
|
actions={
|
|
<Button type="button" onClick={() => void handleDownload()}>
|
|
엑셀다운로드
|
|
</Button>
|
|
}
|
|
/>
|
|
</StandardPopupLayout>
|
|
);
|
|
}
|