우리동네가뭄 엑셀 다운로드 완료

2025-07-01 11:27:09 +09:00
parent 19621c17b4
commit b0dfec9825
3 changed files with 183 additions and 105 deletions
@@ -6,15 +6,15 @@ import { drgtHeadListExport } from "@/app/store/matDmd/drgtSttn/headList";
 import { excelDownload, getCity } from "@/components/lib/func/commom";
 import DrgtDetailModal from "@/components/ui/modal/coMat/drgtDetailModal";
 import type { objSearchType } from "@/components/ui/modal/fcltReg/bdstRegModal/bdstRegModal";
-import { ContentsDiv, DateMonthPicker, SearchDiv, SearchFormLeft, SearchFormRight, SelectBox, Title, UiModal, UiTable, type SelectDataType } from "@common/business_components/ui";
+import { ContentsDiv, DateMonthPicker, downloadExcel, SearchDiv, SearchFormLeft, SearchFormRight, SelectBox, Title, UiModal, UiTable, type SelectDataType } from "@common/business_components/ui";
 import { MonthPicker } from "@common/business_components/ui/date_month_picker/mothPicker";
 import ListDiv from "@common/business_components/ui/list_div";
-import { Button, DatePicker, Label } from "@common/components/ui";
+import { Button, DatePicker, Label, ScrollArea } from "@common/components/ui";
 import { useCallback, useEffect, useState } from "react";
 import { toast, Toaster } from "react-hot-toast";

 export default function DrgtSttn() {
-    const { code, drgt, drgtSearch, drgtModalSearch } = useWrStore((state) => state);
+    const { code, drgt, drgtSearch, drgtModalSearch, drgtInit } = useWrStore((state) => state);
    const { drgtRes, drgtMoRes } = drgt;
    const [fromDate, setFromDate] = useState<string>();
    const [toDate, setToDate] = useState<string>();
@@ -22,6 +22,8 @@ export default function DrgtSttn() {
    const [objSearch, setObjSearch] = useState<objSearchType>({ sgg: "", city: "" });
    const [tableData, setTableData] = useState<customDrgt[]>();
    const [selectedSgg, setSelectedSgg] = useState<string>('');
+    const [excelData, setExcelData] = useState<any[]>();
+    const [num, setNum] = useState<string>();
    const [drgtModal, setDrgtModal] = useState<{
        isOpen: boolean;
        data: customDrgt | undefined;
@@ -35,6 +37,39 @@ export default function DrgtSttn() {
        }
    }

+    const excelClick = () => {
+        downloadExcel({
+            data: excelData ?? [],
+            fileName: "우리동네가뭄 현황",
+            sheetNameArray: ["Sheet1"],
+            headerRange: "A1:G1"
+        })
+    }
+
+    useEffect(() => {
+        if (!drgt.isInit) {
+            drgtInit();
+        }
+    }, [drgt.isInit, drgtInit]);
+
+    useEffect(() => {
+        const resData = Array.isArray(drgtRes) ? drgtRes : [drgtRes];
+        const data = Array.isArray(resData)
+            ? resData.map((item: customDrgt) => {
+                return {
+                    "시도": item.ctpvCd,
+                    "시군구": item.sggNm,
+                    "정상(횟수)": item.normal,
+                    "관심(횟수)": item.attention,
+                    "주의(횟수)": item.caution,
+                    "관심+주의(횟수)": item.warning,
+                    "가뭄순위": item.ranking,
+                }
+            }) : [];
+        setExcelData(data)
+        setTableData(drgtRes)
+    }, [drgtRes])
+
    useEffect(() => {
        if (drgtMoRes && drgtMoRes.length > 0) {
            setDrgtModal({ isOpen: true, data: drgtMoRes });
@@ -65,15 +100,6 @@ export default function DrgtSttn() {
        setObjSearch({ ...objSearch, sgg: String(val) });
    };

-    const excelClick = useCallback(() => {
-        excelDownload(
-            [[]],
-            "우리동네가뭄",
-            "sample_drgtSttn.xlsx",
-            "A1:H1"
-        );
-    }, []);
-
    useEffect(() => {
        if (fromDate === undefined && toDate === undefined) {
            const today = new Date();
@@ -101,7 +127,7 @@ export default function DrgtSttn() {
                                        onSelectValue={getSelCity}
                                    />
                                    <SelectBox
-                                        className="col-span-2 w-1/6 h-full text-2xl"
+                                        className="col-span-2 w-1/6 h-full text-2xl ml-8"
                                        label="시군구"
                                        selectClass={""}
                                        selectArray={selectSgg || []}
@@ -110,7 +136,7 @@ export default function DrgtSttn() {
                                    />
                                    <div className="col-span-5 w-auto">
                                        <div className="flex flex-row items-center">
-                                            <Label className="text-xl text-gray-600">조회기간</Label>
+                                            <Label className="text-xl text-gray-600 ml-8">조회기간</Label>
                                            <div className="flex flex-row w-1/4">
                                                <DateMonthPicker
                                                    field={{
@@ -125,8 +151,9 @@ export default function DrgtSttn() {
                                                            setFromDate(formatted);
                                                        }
                                                    }}
+                                                    selectClass="ml-4 text-2xl"
                                                />
-                                                <span>~</span>
+                                                <span className="ml-2 text-center">~</span>
                                                <DateMonthPicker
                                                    field={{
                                                        value: toDate,
@@ -140,6 +167,7 @@ export default function DrgtSttn() {
                                                            setToDate(formatted);
                                                        }
                                                    }}
+                                                    selectClass="ml-4"
                                                />
                                            </div>
                                        </div>
@@ -148,7 +176,7 @@ export default function DrgtSttn() {
                            </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">
+                                <div className="flex flex-row space-x-2 items-center">
                                    <Button
                                        size={"sm"}
                                        onClick={(e) => {
@@ -199,17 +227,19 @@ export default function DrgtSttn() {
                <div className="grid grid-cols-6 gap-4 ">
                    <div className="col-span-6">
                        <ListDiv>
-                            <UiTable
-                                headName={[]}
-                                tableData={drgtRes || []}
-                                headlist={drgtHeadListExport}
-                                pageSize={20}
-                                total={10000}
-                                cellClick={(index: number | undefined, headId: string) => {
-                                    cellClick(index ?? undefined, headId);
-                                }}
-                                onPageChange={() => { }}
-                            ></UiTable>
+                            <ScrollArea className="h-[66vh]">
+                                <UiTable
+                                    headName={undefined}
+                                    tableData={tableData || []}
+                                    headlist={drgtHeadListExport}
+                                    pageSize={14}
+                                    total={0}
+                                    cellClick={(index: number | undefined, headId: string) => {
+                                        cellClick(index ?? undefined, headId);
+                                    }}
+                                    onPageChange={() => { }}
+                                ></UiTable>
+                            </ScrollArea>
                        </ListDiv>
                    </div>
                </div>
@@ -14,10 +14,12 @@ export type drgtState = {
    drgtHeadList: CommonTableProps[];
    drgtRes: customDrgt[];
    drgtMoRes: customDrgt[];
+    isInit: boolean;
  }
 }

 type drgtActions = {
+  drgtInit: () => void
  drgtSearch: (fromDate: string, toDate: string, sido: string, sgg: string) => void
  drgtModalSearch: (fromDate: string, toDate: string, sgg: string) => void
 };
@@ -29,72 +31,105 @@ export const drgtStateExport: drgtState = {
    drgtHeadList: drgtHeadList,
    drgtRes: drgtRes,
    drgtMoRes: drgtRes,
+    isInit: false,
  }
 }

+const initFetch = async (fromDate: string, toDate: string, sido: string, sgg: string) => {
+
+  let searchUrl = "";
+
+  if (sido === "" || sido === "전체") {
+    searchUrl = `/il/getDataCount/${fromDate}/${toDate}`;
+  } else {
+    searchUrl = `/il/getDataCount/${fromDate}/${toDate}/${sido}/${sgg}`;
+  }
+
+  const drgtData = await getFetch(
+    fetchType.WR,
+    searchUrl
+  );
+
+  //주의, 관심, 정상 추출
+  const statusData = Array.from(
+    new Set(drgtData.map((e) => e.lvngMfgUswtrDrgtInfo))
+  );
+
+  const statusMap = drgtData.reduce((acc: any, { sggNm, lvngMfgUswtrDrgtInfo: status, countDrgt }: { sggNm: string; lvngMfgUswtrDrgtInfo: string; countDrgt: number }) => {
+    if (!acc[sggNm]) {
+      acc[sggNm] = { sggNm, ...Object.fromEntries(statusData.map((e) => [e, 0])) };
+    }
+    acc[sggNm][status] = Number(countDrgt);
+    return acc;
+  }, {});
+  const data = Object.values(statusMap);
+
+  const formatStatus = data.map((item) => {
+    const attention = item['관심'] || 0;
+    const caution = item['주의'] || 0;
+    return {
+      sggNm: item.sggNm,
+      normal: String(item['정상'] || 0),
+      caution: String(caution),
+      attention: String(attention),
+      warning: String(attention + caution),
+    };
+  });
+
+  const ranking = Array.from(
+    new Set(formatStatus.map(e => Number(e.warning)))
+  ).sort((a, b) => b - a);
+
+  const rankData = ranking.reduce((acc, val, idx) => {
+    acc[val] = idx + 1;
+    return acc;
+  }, {});
+
+  const drgtRes = formatStatus.map(item => ({
+    ...item,
+    warning: String(item.warning),
+    ranking: rankData[Number(item.warning)],
+  }));
+
+  return drgtRes;
+
+}
+
+
 export const drgtActionsExport: (set: any) => drgtActions = (
  set: any
 ) => {
  return {
+    drgtInit: async () => {
+      try {
+        const today = new Date();
+        const year = today.getFullYear();
+        const month = String(today.getMonth() + 1).padStart(2, '0');
+        const formatted = `${year}${month}`;
+        const fromDate = formatted;
+        const toDate = formatted;
+
+        //FIXME: 페이지 처음 로딩될때 데이터 보려고 6월로 박아놓음 이거 fromDate로 고치기
+        const drgtRes = await initFetch("202506", toDate, "", "");
+        set((state: drgtState) => {
+          return {
+            ...state,
+            drgt: {
+              ...state.drgt,
+              drgtRes: drgtRes,
+              isInit: false,
+            },
+          }
+        });
+      } catch (e) {
+        console.log(e)
+      }
+    },
    drgtSearch: async (fromDate: string, toDate: string, sido: string, sgg: string) => {
      try {
-        let searchUrl = "";

-        if (sido === "" || sido === "전체") {
-          searchUrl = `/il/getDataCount/${fromDate}/${toDate}`;
-        } else {
-          searchUrl = `/il/getDataCount/${fromDate}/${toDate}/${sido}/${sgg}`;
-        }
+        const drgtRes = await initFetch(fromDate, toDate, sido, sgg);

-        console.log("searchUrl", searchUrl);
-
-        const drgtData = await getFetch(
-          fetchType.WR,
-          searchUrl
-        );
-
-        console.log("drgtRes", drgtData)
-
-        //주의, 관심, 정상 추출
-        const statusData = Array.from(
-          new Set(drgtData.map((e) => e.lvngMfgUswtrDrgtInfo))
-        );
-
-        const statusMap = drgtData.reduce((acc: any, { sggNm, lvngMfgUswtrDrgtInfo: status, countDrgt }: { sggNm: string; lvngMfgUswtrDrgtInfo: string; countDrgt: number }) => {
-          if (!acc[sggNm]) {
-            acc[sggNm] = { sggNm, ...Object.fromEntries(statusData.map((e) => [e, 0])) };
-          }
-          acc[sggNm][status] = Number(countDrgt);
-          return acc;
-        }, {});
-        const data = Object.values(statusMap);
-
-        const formatStatus = data.map((item) => {
-          const attention = item['관심'] || 0;
-          const caution = item['주의'] || 0;
-          return {
-            sggNm: item.sggNm,
-            normal: String(item['정상'] || 0),
-            caution: String(caution),
-            attention: String(attention),
-            warning: String(attention + caution),
-          };
-        });
-
-        const ranking = Array.from(
-          new Set(formatStatus.map(e => Number(e.warning)))
-        ).sort((a, b) => b - a);
-
-        const rankData = ranking.reduce((acc, val, idx) => {
-          acc[val] = idx + 1;
-          return acc;
-        }, {});
-
-        const drgtRes = formatStatus.map(item => ({
-          ...item,
-          warning: String(item.warning),
-          ranking: rankData[Number(item.warning)],
-        }));
        set((state: drgtState) => {
          return {
            ...state,
@@ -115,10 +150,7 @@ export const drgtActionsExport: (set: any) => drgtActions = (
          `/il/getData/${fromDate}/${toDate}/${sgg}/${sgg}`
        );

-        console.log("drgtMoData", drgtMoData)
-
        const drgtMoRes = drgtMoData.map((item) => {
-          console.log("item", item)
          const year = item.anlsYmd.slice(0, 4);
          const month = item.anlsYmd.slice(4, 6);
          const drgtState = item.lvngMfgUswtrDrgtInfo;
@@ -4,24 +4,38 @@ import { btnClass } from "@/app/store/common/code"
 import type { customDrgt } from "@/app/store/matDmd/drgtSttn"
 import { drgtDetailHeadListExport } from "@/app/store/matDmd/drgtSttn/headList"
 import { excelDownload } from "@/components/lib/func/commom"
-import { Title, UiTable } from "@common/business_components/ui"
+import { downloadExcel, Title, UiTable } from "@common/business_components/ui"
 import ListDiv from "@common/business_components/ui/list_div"
-import { Button } from "@common/components/ui"
-import { useCallback, useEffect } from "react"
+import { Button, ScrollArea } from "@common/components/ui"
+import { useCallback, useEffect, useState } from "react"

 export default function DrgtDetailModal({
    data,
 }: {
    data: customDrgt;
 }) {
-    const excelClick = useCallback(() => {
-        excelDownload(
-            [[]],
-            "우리동네가뭄",
-            "sample_drgtSttn.xlsx",
-            "A1:H1"
-        );
-    }, []);
+    const [excelData, setExcelData] = useState<any[]>();
+    const excelClick = () => {
+        downloadExcel({
+            data: excelData ?? [],
+            fileName: "우리동네가뭄 상세현황",
+            sheetNameArray: ["Sheet1"],
+            headerRange: "A1:C1"
+        })
+    }
+
+    useEffect(() => {
+        const resData = Array.isArray(data) ? data : [data];
+        const exData = Array.isArray(resData)
+            ? resData.map((item: customDrgt) => {
+                return {
+                    "년": item.year,
+                    "월": item.month,
+                    "가뭄상태": item.drgtState,
+                }
+            }) : [];
+        setExcelData(exData)
+    }, [data])

    return (
        <>
@@ -43,15 +57,17 @@ export default function DrgtDetailModal({
                    <div className="grid grid-cols-6 gap-4 ">
                        <div className="col-span-6">
                            <ListDiv>
-                                <UiTable
-                                    headName={[]}
-                                    tableData={data}
-                                    headlist={drgtDetailHeadListExport}
-                                    pageSize={10}
-                                    total={10000}
-                                    cellClick={(index: number | undefined, headId: string) => { }}
-                                    onPageChange={() => { }}
-                                ></UiTable>
+                                <ScrollArea className="h-[63vh]">
+                                    <UiTable
+                                        headName={undefined}
+                                        tableData={data}
+                                        headlist={drgtDetailHeadListExport}
+                                        pageSize={10}
+                                        total={10000}
+                                        cellClick={(index: number | undefined, headId: string) => { }}
+                                        onPageChange={() => { }}
+                                    ></UiTable>
+                                </ScrollArea>
                            </ListDiv>
                        </div>
                    </div>