우리동네가뭄 퍼블
This commit is contained in:
jyha00
@@ -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<Date>(new Date());
|
||||
const [toDate, setToDate] = useState<Date>(new Date());
|
||||
const [selectSgg, setSelectSgg] = useState<SelectDataType[] | []>();
|
||||
const [objSearch, setObjSearch] = useState<objSearchType>({ 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 (
|
||||
<>
|
||||
<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"
|
||||
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>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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,
|
||||
},
|
||||
];
|
||||
@@ -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 {};
|
||||
};
|
||||
@@ -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)
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user