물재이용 지도 전반적인 수정 트리에서 클릭시 까지 완료(검색바 해야함)
This commit is contained in:
leedj312
@@ -0,0 +1,195 @@
|
||||
import { useWrStore } from "@/app/store";
|
||||
import { costtnMapSize } from "@/app/store/map/coSttnMap";
|
||||
import {
|
||||
formatPhoneNumber,
|
||||
getCity,
|
||||
tableData,
|
||||
} from "@/components/lib/func/commom";
|
||||
import type { objSearchType } from "@/components/ui/modal/fcltReg/bdstRegModal/bdstRegModal";
|
||||
import {
|
||||
ContentsDiv,
|
||||
SearchDiv,
|
||||
SearchFormLeft,
|
||||
SearchFormRight,
|
||||
SearchInput,
|
||||
SelectBox,
|
||||
Title,
|
||||
UiTable,
|
||||
type SelectDataType,
|
||||
} from "@common/business_components/ui";
|
||||
import type { DemandCompType } from "@common/business_components/ui/sdmInsertForm/form";
|
||||
import { Button } from "@common/components/ui";
|
||||
import moment from "moment";
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
|
||||
export function CoSttnMap({
|
||||
rtnFeature,
|
||||
}: {
|
||||
rtnFeature: (feature: any) => void;
|
||||
}) {
|
||||
const {
|
||||
code,
|
||||
coSttnMap,
|
||||
coSttnMapInit,
|
||||
coSttnMapSearch,
|
||||
coSttnMapTxtSearch,
|
||||
} = useWrStore((state) => state);
|
||||
const [coSttnMapTable, setCoSttnMapTable] = useState<DemandCompType[]>();
|
||||
const [isReset, setIsReset] = useState(false);
|
||||
const { coSttMapHeadList, coSttnMapRes, coSttnMapResCount } = coSttnMap;
|
||||
const [selectSgg, setSelectSgg] = useState<SelectDataType[] | []>();
|
||||
const [objSearch, setObjSearch] = useState<objSearchType>({
|
||||
sgg: "",
|
||||
city: "",
|
||||
});
|
||||
|
||||
const [seartchTxt, setSearchTxt] = useState<string>();
|
||||
|
||||
const getSelCity = useCallback(
|
||||
(val: string | number) => {
|
||||
const cityValue = String(val);
|
||||
const data = getCity(cityValue, code.sggCd);
|
||||
setSelectSgg(data);
|
||||
setObjSearch({ city: cityValue, sgg: "0" });
|
||||
},
|
||||
[code.sggCd]
|
||||
);
|
||||
|
||||
const getSgg = useCallback((val: string | number) => {
|
||||
setObjSearch((prev) => ({ ...prev, sgg: String(val) }));
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
// code.cityCd 데이터가 로드되었고, 아직 시/도 선택이 안된 초기 상태일 때 실행
|
||||
if (code.cityCd && code.cityCd.length > 0 && !objSearch.city) {
|
||||
const firstCityVal = code.cityCd[0]?.val;
|
||||
if (firstCityVal) {
|
||||
// 첫 번째 시/도 값으로 상태를 초기화합니다.
|
||||
getSelCity(firstCityVal);
|
||||
}
|
||||
}
|
||||
}, [code.cityCd, objSearch.city, getSelCity]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!coSttnMap.isInit) {
|
||||
coSttnMapInit(1, costtnMapSize, "0");
|
||||
}
|
||||
}, [coSttnMap.isInit, coSttnMapInit]);
|
||||
|
||||
const coSttnMapCellClick = (index: number | undefined) => {
|
||||
if (index !== undefined && coSttnMapTable !== undefined) {
|
||||
rtnFeature(coSttnMapTable[index]);
|
||||
}
|
||||
};
|
||||
useEffect(() => {
|
||||
if (coSttnMapRes) {
|
||||
if (coSttnMapRes?.length > 0 && code.cityCd.length > 0) {
|
||||
const data = tableData(coSttnMapRes, { code });
|
||||
const chData = data.map((item: any) => ({
|
||||
...item,
|
||||
telno: formatPhoneNumber(item.telno || undefined),
|
||||
regDt: moment(item.regDt).format("YYYY-MM-DD"),
|
||||
dmdInfoId: `${item.dmdInfoId.slice(0, 3)}-${item.dmdInfoId.slice(3, 5)}-${item.dmdInfoId.slice(5, 10)}-${item.dmdInfoId.slice(10)}`,
|
||||
}));
|
||||
// .filter((item: any) => item !== undefined);
|
||||
setCoSttnMapTable(chData);
|
||||
}
|
||||
}
|
||||
}, [coSttnMapRes, code]);
|
||||
return (
|
||||
<>
|
||||
<ContentsDiv>
|
||||
<div className="grid grid-cols-4 gap-4 ">
|
||||
<div className="col-span-4">
|
||||
<Title title={"수요처 관리"} />
|
||||
<SearchDiv>
|
||||
<SearchFormLeft>
|
||||
<div className="col-span-10 flex flex-row">
|
||||
<SelectBox
|
||||
className="col-span-3 w-1/6 h-full text-2xl"
|
||||
label="시도"
|
||||
selectClass={""}
|
||||
selectArray={code.cityCd || []}
|
||||
onSelectValue={(val) => {
|
||||
getSelCity(val);
|
||||
}}
|
||||
value={objSearch.city}
|
||||
/>
|
||||
<SelectBox
|
||||
className="col-span-3 w-1/6 h-full text-2xl ml-4"
|
||||
label="시군구"
|
||||
selectClass={""}
|
||||
selectArray={selectSgg || []}
|
||||
onSelectValue={getSgg}
|
||||
value={objSearch.sgg}
|
||||
/>
|
||||
<SearchInput
|
||||
className={"!text-3xl ml-4"}
|
||||
label="회사명"
|
||||
textValue={seartchTxt ?? ""}
|
||||
setText={(e) => {
|
||||
setSearchTxt(e);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</SearchFormLeft>
|
||||
<SearchFormRight className="w-3/12 mx-5 flex flex-col items-center justify-center space-x-2 ">
|
||||
<div className="flex flex-row space-x-2">
|
||||
<Button
|
||||
className="mt-2"
|
||||
size={"sm"}
|
||||
onClick={() => {
|
||||
const con =
|
||||
objSearch.sgg && objSearch.sgg !== "0"
|
||||
? objSearch.sgg
|
||||
: objSearch.city;
|
||||
if (con) {
|
||||
if (seartchTxt && seartchTxt?.length > 0) {
|
||||
coSttnMapTxtSearch(
|
||||
1,
|
||||
costtnMapSize,
|
||||
String(con),
|
||||
seartchTxt ?? ""
|
||||
);
|
||||
} else {
|
||||
coSttnMapSearch(1, costtnMapSize, String(con));
|
||||
}
|
||||
setIsReset(true)
|
||||
}
|
||||
}}
|
||||
>
|
||||
조회
|
||||
</Button>
|
||||
</div>
|
||||
</SearchFormRight>
|
||||
</SearchDiv>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4 ">
|
||||
<div className="col-span-2">
|
||||
<UiTable
|
||||
headName={[]}
|
||||
tableData={coSttnMapTable || []}
|
||||
headlist={coSttMapHeadList}
|
||||
pageSize={20}
|
||||
total={coSttnMapResCount|| 0}
|
||||
cellClick={(index: number | undefined) => {
|
||||
coSttnMapCellClick(index);
|
||||
// setUpdateData(coSttnRes[index as number]);
|
||||
}}
|
||||
onPageChange={(page) => {
|
||||
const con =
|
||||
objSearch.sgg && objSearch.sgg !== "0"
|
||||
? objSearch.sgg
|
||||
: objSearch.city;
|
||||
coSttnMapSearch(page, costtnMapSize, String(con));
|
||||
setIsReset(false);
|
||||
}}
|
||||
resetPageNo={isReset}
|
||||
></UiTable>
|
||||
</div>
|
||||
</div>
|
||||
</ContentsDiv>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,109 @@
|
||||
import { useWrStore } from "@/app/store";
|
||||
import { btnClass } from "@/app/store/common/code";
|
||||
import { pbnMapTableSize } from "@/app/store/map/pbnstMap";
|
||||
import type { pubHasuType } from "@/app/store/ruseFcltMng/fcltReg/pbnstReg/type";
|
||||
import { tableData } from "@/components/lib/func/commom";
|
||||
import {
|
||||
ContentsDiv,
|
||||
SearchBaseForm,
|
||||
SearchInput,
|
||||
Title,
|
||||
UiTable,
|
||||
type ReturnType,
|
||||
} from "@common/business_components/ui";
|
||||
import { Label } from "@common/components/ui";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
|
||||
export function HasuFacility({rtnFeature}:{rtnFeature:(feature:any)=>void } ) {
|
||||
const { code, pbnMap, pbnMapInit } = useWrStore((state) => state);
|
||||
const [hasuTable, setHasuTable] = useState<pubHasuType[]>();
|
||||
const [isReset, setIsReset] = useState(false);
|
||||
const [pbnRuseNm, setPbnRuseNm] = useState<string>("");
|
||||
const ref = useRef<ReturnType>({} as ReturnType);
|
||||
const { pbnMapHeadList, pbnMapRes, pbnMapCount } = pbnMap;
|
||||
|
||||
useEffect(() => {
|
||||
if (!pbnMap.isInit) {
|
||||
pbnMapInit(1, pbnMapTableSize, ref.current);
|
||||
}
|
||||
}, [pbnMap.isInit, pbnMapInit]);
|
||||
|
||||
useEffect(() => {
|
||||
if (code.sggCd.length && pbnMapRes.length > 0) {
|
||||
setHasuTable(tableData(pbnMapRes, { code }));
|
||||
}
|
||||
}, [code, pbnMapRes]);
|
||||
|
||||
const hasuCellClick = (index: number | undefined) => {
|
||||
if (index !== undefined && pbnMapRes !== undefined) {
|
||||
rtnFeature(pbnMapRes[index])
|
||||
}
|
||||
};
|
||||
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">
|
||||
<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={hasuTable || []}
|
||||
headlist={pbnMapHeadList}
|
||||
pageSize={pbnMapTableSize}
|
||||
total={pbnMapCount || 0}
|
||||
headName={""}
|
||||
cellClick={hasuCellClick}
|
||||
onPageChange={(page) => {
|
||||
pbnMapInit(page, pbnMapTableSize, ref.current);
|
||||
setIsReset(false);
|
||||
}}
|
||||
resetPageNo={isReset}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</ContentsDiv>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,77 @@
|
||||
import { useWrStore } from "@/app/store";
|
||||
import { rainMapSize } from "@/app/store/map/rainMap";
|
||||
import type { customHtdflBdst } from "@/app/store/ruseFcltMng/fcltReg/htdflReg";
|
||||
import { tableData } from "@/components/lib/func/commom";
|
||||
import { Title, UiTable } from "@common/business_components/ui";
|
||||
import { HeadMakeColSpan } from "@common/business_components/ui/table/HeadMakeColSpan";
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
export function HtdflFacility({
|
||||
rtnFeature,
|
||||
}: {
|
||||
rtnFeature: (feature: any) => void;
|
||||
}) {
|
||||
const { code, htdfMap, htdfMapInit } = useWrStore((state) => state);
|
||||
const { htdfMapCount, htdfMapRes, htdfSttHeadList, htdfSttNodeList } =
|
||||
htdfMap;
|
||||
const [htdflTable, setHtdflTable] = useState<customHtdflBdst[]>();
|
||||
const [isReset, setIsReset] = useState(false);
|
||||
|
||||
const htdflCellClick = (index: number | undefined) => {
|
||||
if (index !== undefined && htdflTable !== undefined) {
|
||||
rtnFeature(htdflTable[index]);
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (!htdfMap.isInit) {
|
||||
htdfMapInit(1, rainMapSize, "0");
|
||||
}
|
||||
}, [htdfMap.isInit, htdfMapInit]);
|
||||
|
||||
useEffect(() => {
|
||||
const data = tableData(htdfMapRes, { code });
|
||||
const chData = data
|
||||
.map((item: any) => ({
|
||||
...item,
|
||||
...item.reuseBuilding[0],
|
||||
...item.reuseBuilding[0].htdflObj,
|
||||
chBuildingYn: item.chgBuilding[0]?.bdstChgNm !== null ? "Y" : "N",
|
||||
}))
|
||||
.filter((item: any) => item.htdflObj !== undefined);
|
||||
setHtdflTable(chData);
|
||||
}, [code, htdfMapRes]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div style={{ overflowY: "auto" }}>
|
||||
<div className="flex justify-between items-center">
|
||||
<Title title="온배수시설 현황" />
|
||||
{/* <div className="flex gap-2 mt-8">
|
||||
<Button className={btnClass} color="primary" onClick={excelClick}>
|
||||
엑셀다운로드
|
||||
</Button>
|
||||
</div> */}
|
||||
</div>
|
||||
<UiTable
|
||||
headName={[]}
|
||||
tableData={htdflTable || []}
|
||||
headlist={htdfSttHeadList}
|
||||
pageSize={rainMapSize}
|
||||
total={htdfMapCount}
|
||||
cellClick={(index: number | undefined) => {
|
||||
htdflCellClick(index ?? undefined);
|
||||
}}
|
||||
onPageChange={(page) => {
|
||||
htdfMapInit(page, rainMapSize, "0");
|
||||
setIsReset(false);
|
||||
}}
|
||||
resetPageNo={isReset}
|
||||
>
|
||||
<HeadMakeColSpan upHeadList={htdfSttNodeList} />
|
||||
</UiTable>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,189 @@
|
||||
import { useWrStore } from "@/app/store";
|
||||
import { ldrmntMapSize } from "@/app/store/map/ldrmntCoMap";
|
||||
import type { customLdrmnt } from "@/app/store/matDmd/ldrmntCoSttn";
|
||||
import { getCity, tableData } from "@/components/lib/func/commom";
|
||||
import type { objSearchType } from "@/components/ui/modal/fcltReg/bdstRegModal/bdstRegModal";
|
||||
import {
|
||||
ContentsDiv,
|
||||
SearchDiv,
|
||||
SearchFormLeft,
|
||||
SearchFormRight,
|
||||
SearchInput,
|
||||
SelectBox,
|
||||
Title,
|
||||
UiTable,
|
||||
type SelectDataType,
|
||||
} from "@common/business_components/ui";
|
||||
import ListDiv from "@common/business_components/ui/list_div";
|
||||
import { Button } from "@common/components/ui";
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
export function LdrmntCoMap({
|
||||
rtnFeature,
|
||||
}: {
|
||||
rtnFeature: (feature: any) => void;
|
||||
}) {
|
||||
const { code, ldrmntMap, ldrmntMapInit, ldrmntMapSearch } = useWrStore(
|
||||
(state) => state
|
||||
);
|
||||
|
||||
const { ldrmntMapRes, ldrmntMapResCount, ldrmntMapHeadList } = ldrmntMap;
|
||||
const [selectSgg, setSelectSgg] = useState<SelectDataType[] | []>();
|
||||
const [objSearch, setObjSearch] = useState<objSearchType>({
|
||||
sgg: "",
|
||||
city: "",
|
||||
});
|
||||
const [bdstTable, setBdstTable] = useState<customLdrmnt[]>();
|
||||
const [searchTxt, setSearchTxt] = useState<string>();
|
||||
const [resetPage, isResetPage] = useState(false);
|
||||
|
||||
const computeCityNm = () => {
|
||||
let cityTxt = "";
|
||||
let sggTxt = "";
|
||||
|
||||
if (objSearch.city) {
|
||||
cityTxt = code.cityCd.find((c) => c.val === objSearch.city)?.text || "";
|
||||
}
|
||||
if (objSearch.sgg) {
|
||||
sggTxt = code.sggCd.find((s) => s.val === objSearch.sgg)?.text || "";
|
||||
}
|
||||
|
||||
if (cityTxt === "" || cityTxt === "전체") cityTxt = "0";
|
||||
|
||||
return sggTxt && sggTxt !== "0" ? `${cityTxt} ${sggTxt}` : cityTxt;
|
||||
};
|
||||
|
||||
const cellClick = (index: number | undefined) => {
|
||||
if (index !== undefined) {
|
||||
rtnFeature(ldrmntMapRes[index]);
|
||||
}
|
||||
};
|
||||
|
||||
const getSelCity = (val: string | number) => {
|
||||
const cityValue = String(val);
|
||||
|
||||
if (cityValue === "0") {
|
||||
setSelectSgg([]);
|
||||
setObjSearch({ city: cityValue, sgg: "" });
|
||||
} else {
|
||||
const data = getCity(cityValue, code.sggCd);
|
||||
setSelectSgg(data);
|
||||
const firstSggVal =
|
||||
data.find((item) => item.val === "0")?.val || (data[0]?.val ?? "");
|
||||
setObjSearch({ city: cityValue, sgg: firstSggVal });
|
||||
}
|
||||
};
|
||||
|
||||
const getSgg = (val: string | number) => {
|
||||
setObjSearch({ ...objSearch, sgg: String(val) });
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (!ldrmntMap.isInit) {
|
||||
ldrmntMapInit(1, ldrmntMapSize, "0");
|
||||
}
|
||||
}, [ldrmntMap.isInit, ldrmntMapInit]);
|
||||
|
||||
useEffect(() => {
|
||||
const transData = Array.isArray(ldrmntMapRes)
|
||||
? ldrmntMapRes
|
||||
: [ldrmntMapRes];
|
||||
const data = tableData(transData, { code });
|
||||
const tbData = Array.isArray(data)
|
||||
? data.map((item: customLdrmnt) => ({
|
||||
...item,
|
||||
ctpvCd: item.fctryAddr?.split(" ")[0] || "",
|
||||
sggCd: item.fctryAddr?.split(" ")[1] || "",
|
||||
}))
|
||||
: [];
|
||||
|
||||
setBdstTable(tbData);
|
||||
}, [ldrmntMapRes, code]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<ContentsDiv>
|
||||
<div className="grid grid-cols-4 gap-4 ">
|
||||
<div className="col-span-4">
|
||||
<Title title={"잠재수요처 관리"} />
|
||||
<SearchDiv>
|
||||
<SearchFormLeft>
|
||||
<div className="col-span-10 flex flex-row">
|
||||
<SelectBox
|
||||
className="col-span-2 w-1/6 h-full text-2xl"
|
||||
label="시도"
|
||||
selectClass={""}
|
||||
selectArray={code.cityCd}
|
||||
onSelectValue={getSelCity}
|
||||
/>
|
||||
<SelectBox
|
||||
className="col-span-2 w-1/6 h-full text-2xl ml-4"
|
||||
label="시군구"
|
||||
selectClass={""}
|
||||
selectArray={selectSgg || []}
|
||||
value={objSearch.sgg} // value props 추가
|
||||
onSelectValue={getSgg}
|
||||
/>
|
||||
<SearchInput
|
||||
className={"text-2xl ml-4"}
|
||||
label="회사명"
|
||||
textValue={searchTxt || ""}
|
||||
setText={(e) => {
|
||||
setSearchTxt(e);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</SearchFormLeft>
|
||||
<SearchFormRight className="w-2/12 mx-5 flex flex-col items-center justify-center space-x-2 ">
|
||||
<div className="flex flex-row space-x-2 items-center">
|
||||
<Button
|
||||
size={"sm"}
|
||||
onClick={() => {
|
||||
ldrmntMapSearch(
|
||||
1,
|
||||
ldrmntMapSize,
|
||||
computeCityNm(),
|
||||
searchTxt || ""
|
||||
);
|
||||
isResetPage(true);
|
||||
}}
|
||||
>
|
||||
조회
|
||||
</Button>
|
||||
</div>
|
||||
</SearchFormRight>
|
||||
</SearchDiv>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-6 gap-4 ">
|
||||
<div className="col-span-6">
|
||||
<div className="overflow-x-auto">
|
||||
<ListDiv className="min-w-max">
|
||||
<UiTable
|
||||
headName={undefined}
|
||||
tableData={bdstTable || []}
|
||||
headlist={ldrmntMapHeadList}
|
||||
pageSize={20}
|
||||
total={ldrmntMapResCount || 0}
|
||||
cellClick={(index: number | undefined) => {
|
||||
cellClick(index ?? undefined);
|
||||
}}
|
||||
onPageChange={(page) => {
|
||||
ldrmntMapSearch(
|
||||
page,
|
||||
ldrmntMapSize,
|
||||
computeCityNm(),
|
||||
searchTxt || ""
|
||||
);
|
||||
isResetPage(false);
|
||||
}}
|
||||
resetPageNo={resetPage}
|
||||
/>
|
||||
</ListDiv>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ContentsDiv>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,102 @@
|
||||
import { useWrStore } from "@/app/store";
|
||||
import { rainMapSize } from "@/app/store/map/rainMap";
|
||||
import type { customRainBdst } from "@/app/store/ruseFcltMng/fcltReg/rainReg";
|
||||
import { tableData } from "@/components/lib/func/commom";
|
||||
import { ContentsDiv, Title, UiTable } from "@common/business_components/ui";
|
||||
import { HeadMakeColSpan } from "@common/business_components/ui/table/HeadMakeColSpan";
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
export function RainFacility({
|
||||
rtnFeature,
|
||||
}: {
|
||||
rtnFeature: (feature: any) => void;
|
||||
}) {
|
||||
const { code, rainMap, rainMapInit } = useWrStore((state) => state);
|
||||
const { rainMapRes, rainMapCount, rainSttHeadList, rainSttNodeList } =
|
||||
rainMap;
|
||||
const [rainTable, setRainTable] = useState<customRainBdst[]>();
|
||||
const [isReset, setIsReset] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (!rainMap.isInit) {
|
||||
rainMapInit(1, rainMapSize, "0");
|
||||
}
|
||||
}, [rainMapInit, rainMap.isInit]);
|
||||
|
||||
const rainCellClick = (index: number | undefined, headId: string) => {
|
||||
if (
|
||||
index !== undefined &&
|
||||
rainTable !== undefined &&
|
||||
headId !== "chBuildingYn"
|
||||
) {
|
||||
rtnFeature(rainTable[index]);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
const data = tableData(rainMapRes, { code });
|
||||
const chData = data
|
||||
.map((item: any) => {
|
||||
return {
|
||||
...item,
|
||||
...item.reuseBuilding[0],
|
||||
...item.reuseBuilding[0].rainyObj,
|
||||
dtfcltCpct:
|
||||
item.reuseBuilding[0].rainyObj.dtfcltCpct === -1
|
||||
? "확인불가"
|
||||
: item.reuseBuilding[0].rainyObj.dtfcltCpct,
|
||||
instlCst:
|
||||
item.reuseBuilding[0].instlCst === -1
|
||||
? "확인불가"
|
||||
: item.reuseBuilding[0].instlCst,
|
||||
instlCstSprtAmt:
|
||||
item.reuseBuilding[0].instlCstSprtAmt === -1
|
||||
? "확인불가"
|
||||
: item.reuseBuilding[0].instlCstSprtAmt,
|
||||
chBuildingYn: item.chgBuilding[0]?.bdstChgNm !== null ? "Y" : "N",
|
||||
pntfColArea:
|
||||
item.reuseBuilding[0].rainyObj.pntfColArea === -1
|
||||
? "확인불가"
|
||||
: item.reuseBuilding[0].rainyObj.pntfColArea,
|
||||
filtrTrtmfctCpct:
|
||||
item.reuseBuilding[0].rainyObj.filtrTrtmfctCpct === -1
|
||||
? "확인불가"
|
||||
: item.reuseBuilding[0].rainyObj.filtrTrtmfctCpct,
|
||||
archArea:
|
||||
Math.floor(item.archArea) === -1 ? "확인불가" : item.archArea,
|
||||
};
|
||||
})
|
||||
.filter((item: any) => item.rainyObj !== undefined);
|
||||
setRainTable(chData);
|
||||
}, [code, rainMapRes]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<ContentsDiv>
|
||||
<div className="grid grid-cols-2 gap-4 ">
|
||||
<div className="col-span-2">
|
||||
<Title title="빗물이용시설 현황" />
|
||||
<UiTable
|
||||
headName={[]}
|
||||
tableData={rainTable || []}
|
||||
headlist={rainSttHeadList}
|
||||
pageSize={20}
|
||||
total={rainMapCount}
|
||||
cellClick={(index: number | undefined, headId: string) => {
|
||||
rainCellClick(index ?? undefined, headId);
|
||||
}}
|
||||
onPageChange={(page) => {
|
||||
rainMapInit(page, rainMapSize, "0");
|
||||
setIsReset(false);
|
||||
}}
|
||||
resetPageNo={isReset}
|
||||
>
|
||||
<HeadMakeColSpan upHeadList={rainSttNodeList} />
|
||||
</UiTable>
|
||||
</div>
|
||||
</div>
|
||||
</ContentsDiv>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,99 @@
|
||||
import { useWrStore } from "@/app/store";
|
||||
import { rainMapSize } from "@/app/store/map/rainMap";
|
||||
import type { customRswtBdst } from "@/app/store/ruseFcltMng/fcltReg/rswtReg";
|
||||
import { tableData } from "@/components/lib/func/commom";
|
||||
import { Title, UiTable } from "@common/business_components/ui";
|
||||
import { HeadMakeColSpan } from "@common/business_components/ui/table/HeadMakeColSpan";
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
export function RswtFacility({
|
||||
rtnFeature,
|
||||
}: {
|
||||
rtnFeature: (feature: any) => void;
|
||||
}) {
|
||||
const { code, rswtMap, rswtMapInit } = useWrStore((state) => state);
|
||||
const { rswtMapRes, rswtMapCount, rswtSttHeadList, rswtSttNodeList } =
|
||||
rswtMap;
|
||||
const [rswtrTable, setRswtrTable] = useState<customRswtBdst[]>();
|
||||
const [isReset, setIsReset] = useState(false);
|
||||
|
||||
const rswtCellClick = (index: number | undefined, headId: string) => {
|
||||
if (
|
||||
headId !== "chBuildingYn" &&
|
||||
index !== undefined &&
|
||||
rswtrTable !== undefined
|
||||
) {
|
||||
rtnFeature(rswtrTable[index]);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (!rswtMap.isInit) {
|
||||
rswtMapInit(1, rainMapSize, "0");
|
||||
}
|
||||
}, [rswtMapInit, rswtMap.isInit]);
|
||||
|
||||
useEffect(() => {
|
||||
const data = tableData(rswtMapRes, { code });
|
||||
const chData = data
|
||||
.map((item: customRswtBdst) => {
|
||||
return {
|
||||
...item,
|
||||
...item.reuseBuilding[0],
|
||||
...item.reuseBuilding[0]?.rswtrObj,
|
||||
chBuildingYn:
|
||||
item?.chgBuilding[0]?.bdstChgNm !== null &&
|
||||
item?.chgBuilding.length > 0
|
||||
? "Y"
|
||||
: "N",
|
||||
instlCst:
|
||||
item.reuseBuilding[0]?.instlCst === -1
|
||||
? "확인불가"
|
||||
: item.reuseBuilding[0]?.instlCst,
|
||||
instlCstSprtAmt:
|
||||
item.reuseBuilding[0]?.instlCstSprtAmt === -1
|
||||
? "확인불가"
|
||||
: item.reuseBuilding[0]?.instlCstSprtAmt,
|
||||
archArea:
|
||||
item?.archArea.split(".")[0] !== "-1"
|
||||
? item?.archArea.split(".")[0]
|
||||
: "확인불가",
|
||||
};
|
||||
})
|
||||
.filter(
|
||||
(item: customRswtBdst) => item.reuseBuilding[0]?.rswtrObj !== undefined
|
||||
);
|
||||
setRswtrTable(chData);
|
||||
}, [code, rswtMapRes]);
|
||||
return (
|
||||
<>
|
||||
<div style={{ overflowY: "auto" }}>
|
||||
<div className="flex justify-between items-center">
|
||||
<Title title="중수도시설 현황" />
|
||||
{/* <div className="flex gap-2 mt-8">
|
||||
<Button className={btnClass} color="primary" onClick={rswtSttnExcelDownload}>
|
||||
엑셀다운로드
|
||||
</Button>
|
||||
</div> */}
|
||||
</div>
|
||||
<UiTable
|
||||
headName={[]}
|
||||
tableData={rswtrTable || []}
|
||||
headlist={rswtSttHeadList}
|
||||
pageSize={20}
|
||||
total={rswtMapCount}
|
||||
cellClick={(index: number | undefined, headId: string) => {
|
||||
rswtCellClick(index, headId);
|
||||
}}
|
||||
onPageChange={(page) => {
|
||||
rswtMapInit(page, rainMapSize, "0");
|
||||
setIsReset(false);
|
||||
}}
|
||||
resetPageNo={isReset}
|
||||
>
|
||||
<HeadMakeColSpan upHeadList={rswtSttNodeList} />
|
||||
</UiTable>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,140 @@
|
||||
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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user