diff --git a/apps/wr/app/matMng/matDmd/drgtSttn/page.tsx b/apps/wr/app/matMng/matDmd/drgtSttn/page.tsx new file mode 100644 index 000000000..c7b93fe9f --- /dev/null +++ b/apps/wr/app/matMng/matDmd/drgtSttn/page.tsx @@ -0,0 +1,125 @@ +"use client"; +import { useWrStore } from "@/app/store"; +import { btnClass } from "@/app/store/common/code"; +import type { customCoSttnBdst } from "@/app/store/matDmd/coSttn"; +import { drgtHeadListExport } from "@/app/store/matDmd/drgtSttn/headList"; +import { getCity } from "@/components/lib/func/commom"; +import type { objSearchType } from "@/components/ui/modal/fcltReg/bdstRegModal/bdstRegModal"; +import { ContentsDiv, SearchDiv, SearchFormLeft, SearchFormRight, SelectBox, Title, UiTable, type SelectDataType } from "@common/business_components/ui"; +import ListDiv from "@common/business_components/ui/list_div"; +import { Button, DatePicker, Label } from "@common/components/ui"; +import { useState } from "react"; + +export default function drgtSttn() { + const { code, } = useWrStore((state) => state); + const [fromDate, setFromDate] = useState(new Date()); + const [toDate, setToDate] = useState(new Date()); + const [selectSgg, setSelectSgg] = useState(); + const [objSearch, setObjSearch] = useState({ sgg: "", city: "" }); + + const getSelCity = (val: string | number) => { + const cityValue = String(val); // Ensure val is treated as a string + const data = getCity(cityValue, code.sggCd); + setSelectSgg(data); + setObjSearch({ city: cityValue, sgg: '' }); + }; + + const getSgg = (val: string | number) => { + console.log(val); + setObjSearch({ ...objSearch, sgg: String(val) }) + }; + return ( + <> + +
+
+ + <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" + label="시군구" + selectClass={""} + selectArray={selectSgg || []} + onSelectValue={getSgg} + /> + <div className="col-span-5 w-auto"> + <div className="flex flex-row items-center"> + <Label className="text-xl text-gray-600">조회기간</Label> + <div className="flex flex-row w-1/4"> + <DatePicker mode={'single'} + selected={fromDate} + onSelect={(date: Date | undefined) => { if (date) setFromDate(date) }} /> + <span>~</span> + <DatePicker mode={'single'} + selected={toDate} + onSelect={(date: Date | undefined) => { if (date) setToDate(date) }} /> + </div> + </div> + </div> + </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"> + <Button + size={"sm"} + onClick={(e) => { }} + > + 조회 + </Button> + <Button + size={"sm"} + className={btnClass} + onClick={() => { }} + > + 상세보기 + </Button> + <Button + size={"sm"} + className={`${btnClass} green`} + onClick={() => { + /* 저장 로직 */ + }} + > + 다운로드 + </Button> + <Button + size={"sm"} + className={btnClass} + onClick={() => { }} + > + 지도보기 + </Button> + </div> + </SearchFormRight> + </SearchDiv> + </div> + </div> + <div className="grid grid-cols-6 gap-4 "> + <div className="col-span-6"> + <ListDiv> + <UiTable + headName={[]} + tableData={[]} + headlist={drgtHeadListExport} + pageSize={20} + total={10000} + cellClick={(index: number | undefined, headId: string) => { }} + onPageChange={() => { }} + ></UiTable> + </ListDiv> + </div> + </div> + </ContentsDiv> + </> + ) +} \ No newline at end of file diff --git a/apps/wr/app/page.tsx b/apps/wr/app/page.tsx index d40e79eaf..dde060704 100644 --- a/apps/wr/app/page.tsx +++ b/apps/wr/app/page.tsx @@ -124,6 +124,11 @@ export default function Home() { <Link href="matMng/matDmd/ldrmntCoSttn">잠재수요처 관리</Link> </Button> </div> + <div className="col-span-2"> + <Button className="w-full"> + <Link href="matMng/matDmd/drgtSttn">우리동네가뭄</Link> + </Button> + </div> </div> </div> diff --git a/apps/wr/app/ruseFcltMng/prfmncSttn/pbnstPrfmncSttn/page.tsx b/apps/wr/app/ruseFcltMng/prfmncSttn/pbnstPrfmncSttn/page.tsx index f2040f023..cfeddb170 100644 --- a/apps/wr/app/ruseFcltMng/prfmncSttn/pbnstPrfmncSttn/page.tsx +++ b/apps/wr/app/ruseFcltMng/prfmncSttn/pbnstPrfmncSttn/page.tsx @@ -60,7 +60,7 @@ export default function PbnstPrfmncSttn() { type dnChartForm = { label: string, val: number, fill?: string }; - type barChartForm = { label: string, inUsage: number, outUsage: number }; + type barChartForm = { label: string, "장내용수": number, "장외용수": number }; type lineChartDataProps = { label: string, val: number, color: string }; const prfTableData = (prfList: PrfType[], year:string) => { @@ -266,12 +266,12 @@ export default function PbnstPrfmncSttn() { }); }) const data: dnChartForm[] = [] - data?.push({ label: "조경용수", val: lndwtr, fill: "white" }) - data?.push({ label: "친수용수", val: hydUswtr, fill: "red" }) - data?.push({ label: "지하수충전", val: ugwtChr, fill: "white" }) - data?.push({ label: "농업용수", val: farmUswtr, fill: "orange" }) - data?.push({ label: "하천등유지용수", val: rvrKeepUswtr, fill: "white" }) - data?.push({ label: "공업용수", val: indstUswtr, fill: "yellow" }) + data?.push({ label: "조경용수", val: lndwtr, fill: "yellow" }) + data?.push({ label: "친수용수", val: hydUswtr, fill: "black" }) + data?.push({ label: "지하수충전", val: ugwtChr, fill: "yellow" }) + data?.push({ label: "농업용수", val: farmUswtr, fill: "black" }) + data?.push({ label: "하천등유지용수", val: rvrKeepUswtr, fill: "yellow" }) + data?.push({ label: "공업용수", val: indstUswtr, fill: "black" }) setDnOutUsage(data); } }, [rawData, year]) @@ -339,7 +339,7 @@ export default function PbnstPrfmncSttn() { outUsageArr.push(outUsageSum) const month = Number(element.ym.slice(4, 6)) - data.push({ label: `${month}월`, inUsage: inUsageSum, outUsage: outUsageSum }) + data.push({ label: `${month}월`, "장내용수": inUsageSum, "장외용수": outUsageSum }) }, ); @@ -439,7 +439,7 @@ export default function PbnstPrfmncSttn() { }, chartData8: { label: '청소화장실용수', - color: "black", + color: "magenta", }, chartData9: { label: '세척살수용수', @@ -499,15 +499,15 @@ export default function PbnstPrfmncSttn() { }, chartData4: { label: '농업용수', - color: "pink", + color: "green", }, chartData5: { label: '하천등유지용수', - color: "purple", + color: "blue", }, chartData6: { label: '공업용수', - color: "green", + color: "purple", }, } satisfies ChartConfig; setLnOutChartConfig(newChartConfig); diff --git a/apps/wr/app/store/matDmd/drgtSttn/headList.tsx b/apps/wr/app/store/matDmd/drgtSttn/headList.tsx new file mode 100644 index 000000000..8666d70d2 --- /dev/null +++ b/apps/wr/app/store/matDmd/drgtSttn/headList.tsx @@ -0,0 +1,68 @@ +import type { CommonTableProps } from "../../common/type/header"; + +export const drgtHeadListExport: CommonTableProps[] = [ + { + id: "ctpvCd", + title: "시도", + visible: true, + row: 1, + rowSpan: 1, + colSpan: 1, + }, + { + id: "sggCd", + title: "시군구", + visible: true, + row: 1, + rowSpan: 1, + colSpan: 1, + }, + { + id: "haengjung", + title: "행정동", + visible: true, + row: 1, + rowSpan: 1, + colSpan: 1, + }, + { + id: "normal", + title: "정상(횟수)", + visible: true, + row: 1, + rowSpan: 1, + colSpan: 1, + }, + { + id: "attention", + title: "관심(횟수)", + visible: true, + row: 1, + rowSpan: 1, + colSpan: 1, + }, + { + id: "caution", + title: "주의(횟수)", + visible: true, + row: 1, + rowSpan: 1, + colSpan: 1, + }, + { + id: "warning", + title: "관심+주의(횟수)", + visible: true, + row: 1, + rowSpan: 1, + colSpan: 1, + }, + { + id: "ranking", + title: "가뭄순위", + visible: true, + row: 1, + rowSpan: 1, + colSpan: 1, + }, +]; \ No newline at end of file diff --git a/apps/wr/app/store/matDmd/drgtSttn/index.tsx b/apps/wr/app/store/matDmd/drgtSttn/index.tsx new file mode 100644 index 000000000..edbbc2f28 --- /dev/null +++ b/apps/wr/app/store/matDmd/drgtSttn/index.tsx @@ -0,0 +1,27 @@ +import type { CommonTableProps } from "../../common/type/header"; +import { drgtHeadListExport } from "./headList"; + +const drgtHeadList = drgtHeadListExport; + +export type drgtState = { + drgt:{ + drgtHeadList: CommonTableProps[]; + } +} + +type drgtActions = { +}; + +export type drgtType = drgtState & drgtActions; + +export const drgtStateExport: drgtState = { + drgt: { + drgtHeadList: drgtHeadList, + } +} + +export const drgtActionsExport: (set: any) => drgtActions = ( + set: any +) => { + return {}; +}; \ No newline at end of file diff --git a/apps/wr/app/store/store.tsx b/apps/wr/app/store/store.tsx index dda146e98..fe16e72f8 100644 --- a/apps/wr/app/store/store.tsx +++ b/apps/wr/app/store/store.tsx @@ -92,6 +92,7 @@ import { pbnstPrfmncActionsExport, pbnstPrfmncStateExport, type pbnstPrfmncState import { coRvwActionsExport, coRvwStateExport, type coRvwState, type coRvwType } from "./matDmd/coMatRvw"; import { ruseHstryActionsExport, ruseHstryStateExport, type ruseHstryState, type ruseHstryType } from "./matDmd/ruseRvwHstry"; import { pbnstPrfmncSttnActionsExport, pbnstPrfmncSttnExport, type pbnstPrfmncSttnState, type pbnstPrfmncSttnType } from "./prfmncSttn/pbnstPrfmncSttn"; +import { drgtActionsExport, drgtStateExport, type drgtState, type drgtType } from "./matDmd/drgtSttn"; export type WrStore = comCodeType & pubFacType & @@ -114,7 +115,8 @@ export type WrStore = comCodeType & pbnstPrfmncType& coRvwType& ruseHstryType& - pbnstPrfmncSttnType + pbnstPrfmncSttnType& + drgtType ; export const StoreZus = ( @@ -138,7 +140,8 @@ export const StoreZus = ( pbnstPrfmncState& coRvwState& ruseHstryState& - pbnstPrfmncSttnState + pbnstPrfmncSttnState& + drgtState = { ...comCodeStateExport, ...pubFacStateExport, @@ -160,7 +163,8 @@ export const StoreZus = ( ...pbnstPrfmncStateExport, ...coRvwStateExport, ...ruseHstryStateExport, - ...pbnstPrfmncSttnExport + ...pbnstPrfmncSttnExport, + ...drgtStateExport } ) => { return createStore<WrStore>()((set) => { @@ -193,7 +197,8 @@ export const StoreZus = ( ...pbnstPrfmncActionsExport(set), ...coRvwActionsExport(set), ...ruseHstryActionsExport(set), - ...pbnstPrfmncSttnActionsExport(set) + ...pbnstPrfmncSttnActionsExport(set), + ...drgtActionsExport(set) }; }); };