141 lines
4.3 KiB
TypeScript
141 lines
4.3 KiB
TypeScript
import { useWrStore } from "@/app/store";
|
|
import { btnClass } from "@/app/store/common/code";
|
|
import { ruseMapSize } from "@/app/store/map/ruseMap";
|
|
import type { WaterReuseFacility } from "@/app/store/ruseFcltMng/fcltSttn/pbnstSttn/type";
|
|
import { yearOptions } from "@/components/lib/func/commom";
|
|
import {
|
|
ContentsDiv,
|
|
SearchBaseForm,
|
|
SearchInput,
|
|
SelectBox,
|
|
Title,
|
|
UiTable,
|
|
type ReturnType,
|
|
} from "@common/business_components/ui";
|
|
import { Label } from "@common/components/ui";
|
|
import { useEffect, useRef, useState } from "react";
|
|
|
|
export function RuseFacility({
|
|
rtnFeature,
|
|
}: {
|
|
rtnFeature: (feature: any) => void;
|
|
}) {
|
|
const { code, ruseMap, ruseMapInit, getMapFlcts } = useWrStore(
|
|
(state) => state
|
|
);
|
|
|
|
const { ruseMapCount, fclts, ruseMapRes,ruseMapHeadList } = ruseMap;
|
|
|
|
const [ruseTable, setRuseTable] = useState<WaterReuseFacility[]>();
|
|
const [isReset, setIsReset] = useState(false);
|
|
const ref = useRef<ReturnType>({} as ReturnType);
|
|
const [searchYear, setSearchYear] = useState<string>(
|
|
String(new Date().getFullYear())
|
|
);
|
|
const [pbnRuseNm, setPbnRuseNm] = useState<string>("");
|
|
|
|
const ruseCellClick = (index: number | undefined) => {
|
|
if (
|
|
index !== undefined &&
|
|
ruseTable !== undefined
|
|
) {
|
|
rtnFeature(ruseTable[index]);
|
|
}
|
|
};
|
|
useEffect(() => {
|
|
if (!ruseMap.isInit) {
|
|
getMapFlcts();
|
|
}
|
|
}, [ruseMap.isInit]);
|
|
useEffect(() => {
|
|
ruseMapInit(1,ruseMapSize, ref.current, searchYear, fclts);
|
|
}, [fclts]);
|
|
|
|
useEffect(() => {
|
|
if (ruseMapRes && ruseMapRes.length > 0) {
|
|
setRuseTable(ruseMapRes);
|
|
} else {
|
|
setRuseTable([]);
|
|
}
|
|
}, [ruseMapRes]);
|
|
|
|
|
|
return (
|
|
<>
|
|
<ContentsDiv>
|
|
<div className="grid grid-cols-2 gap-4 ">
|
|
<div className="col-span-2">
|
|
<Title title="하수재이용 시설 현황" />
|
|
<SearchBaseForm
|
|
selectSidoData={code.cityCd}
|
|
selectSigunData={code.sggCd}
|
|
selectRegionData={code.rvbsnCd}
|
|
selectUnitWaterShedData={code.lgbsnCd}
|
|
selectMiddleRegionData={code.mdmbsnCd}
|
|
selectEnvPartData={code.lclgvrnmntCd}
|
|
buttonOrder={["query", "init", "excel"]}
|
|
rightClassName="ml-auto mr-6 flex items-center space-x-1"
|
|
leftClassName="flex gap-5 w-9/12 m-4"
|
|
leftSelectClassName="w-1/4"
|
|
rightChildren={<></>}
|
|
leftChildren={
|
|
<div className="col-span-3 flex items-center">
|
|
<SelectBox
|
|
className="w-48 h-full text-2xl"
|
|
label="연도"
|
|
selectClass={"w-full "}
|
|
selectArray={yearOptions}
|
|
value={searchYear}
|
|
onSelectValue={(val: string | number) =>
|
|
setSearchYear(String(val))
|
|
}
|
|
/>
|
|
<Label className="w-full mt-2 ml-4 text-xl text-gray-600">
|
|
{"하수처리시설명"}
|
|
</Label>
|
|
<SearchInput
|
|
className={"text-2xl w-full"}
|
|
label=""
|
|
textValue={pbnRuseNm || ""}
|
|
setText={(e) => {
|
|
setPbnRuseNm(e || "");
|
|
}}
|
|
/>
|
|
</div>
|
|
}
|
|
queryClick={() => {
|
|
setIsReset(true);
|
|
}}
|
|
initClick={function (): void {
|
|
setPbnRuseNm("");
|
|
}}
|
|
btnClass={btnClass}
|
|
ref={ref}
|
|
isAdmin={false}
|
|
excelClick={function (returnType: ReturnType): void {
|
|
console.log("pbnstSttnSearch ", returnType);
|
|
}}
|
|
/>
|
|
</div>
|
|
<div className="col-span-6">
|
|
{/* 높이 조정 */}
|
|
<UiTable
|
|
tableData={ruseTable || []}
|
|
headlist={ruseMapHeadList}
|
|
pageSize={ruseMapSize}
|
|
total={ruseMapCount || 0}
|
|
headName={""}
|
|
cellClick={ruseCellClick}
|
|
onPageChange={(page) => {
|
|
ruseMapInit(page,ruseMapSize , ref.current, searchYear, fclts);
|
|
setIsReset(false);
|
|
}}
|
|
resetPageNo={isReset}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</ContentsDiv>
|
|
</>
|
|
);
|
|
}
|