fo: table scroll 수정

This commit is contained in:
dongsilove
2025-11-24 20:46:14 +09:00
parent 2756fe3490
commit fc0b74751f
9 changed files with 56 additions and 56 deletions
@@ -80,7 +80,7 @@ export default function FacilityPrecipitation() {
// 초기화 변수
const [resetPage, setResetPage] = useState<boolean>(false);
// 표 너비
const [widthSize, setWidthSize] = useState<string>("w-[120%]");
// const [widthSize, setWidthSize] = useState<string>("w-[120%]");
// 구분별 그리드 헤더
const [upheadList, setUpheadList] = useState<TableUpperProps[]>(upHeadList1);
// 용량별
@@ -97,7 +97,7 @@ export default function FacilityPrecipitation() {
*/
// 초기화
const resetVal = () => {
setWidthSize("w-[120%]");
// setWidthSize("w-[120%]");
setUpheadList(upHeadList1)
// 상태값 설정
setFcltCpct(selectUpdownData[0]?.val || "0");
@@ -184,7 +184,7 @@ export default function FacilityPrecipitation() {
}, [operationValue, fcltyName, searchFacilityPrecipitationList, searchYear, fcltCpct]);
const chkVal = useCallback((returntype:ReturnType) => {
setWidthSize(returntype.partValue=='A' ?"w-[120%]":"w-[130%]")
// setWidthSize(returntype.partValue=='A' ?"w-[120%]":"w-[130%]")
setUpheadList(returntype.partValue == 'R' ? upHeadList2 : returntype.partValue == 'G'?upHeadList3:upHeadList1);
setResetPage(true);
}, [upHeadList1, upHeadList2, upHeadList3]);
@@ -228,8 +228,8 @@ export default function FacilityPrecipitation() {
ref={ref} isAdmin={false}/>
<ListDiv>
<LoadingOverlay isLoading={isLoading} />
<div className="h-full w-full overflow-x-scroll">
<div className={widthSize}>
<div className="h-full w-full overflow-x-scroll min-[1200px]:overflow-x-hidden">
<div className="w-[120%] min-[1200px]:w-[100%]">
<UiTable cellClick={(index: number | undefined) => index !== undefined && cellClick(index)} headName={"시설별 강수현황"} tableData={mainList} headlist={upheadList} pageSize={10} total={total} resetPageNo={resetPage} onPageChange={handlePageChange} widthFixed={true} />
</div>
<UnderComment divHeight={"3"} commentArray={["강우일은 3mm 이상만 해당 / 강우영향일은 강우일 및 강우일 후 연속 2일간으로 정의"]} />
@@ -53,7 +53,7 @@ export default function ProcessFacilitySearch() {
// 그리드 관련
const [resetPage, setResetPage] = useState<boolean>(false);
const searchInputRef = useRef<HTMLDivElement & HTMLInputElement>(null);
const [widthSize, setWidthSize] = useState<string>("w-[120%]");
// const [widthSize, setWidthSize] = useState<string>("w-[120%]");
const [upheadList, setUpheadList] = useState<TableUpperProps[]>(upHeadList1);
const [fcltyName, setFcltyName] = useState<string>("");
const [operationValue, setOperationValue] = useState<string>("0");
@@ -91,7 +91,7 @@ export default function ProcessFacilitySearch() {
}, [operationValue, fcltyName, searchFacilityWaterQltyList, searchYearValue, fcltCpct]);
const resetVal = () => {
setWidthSize("w-[120%]");
// setWidthSize("w-[120%]");
setUpheadList(upHeadList1)
// 상태값 설정
setFcltCpct(selectUpdownData[0]?.val || "0");
@@ -164,7 +164,7 @@ export default function ProcessFacilitySearch() {
}, [excelList, excelTrigger]);
const chkVal = useCallback((returntype:ReturnType) => {
setWidthSize(returntype.partValue=='A' ?"w-[120%]":"w-[130%]")
// setWidthSize(returntype.partValue=='A' ?"w-[120%]":"w-[130%]")
setUpheadList(returntype.partValue == 'R' ? upHeadList2 : returntype.partValue == 'G'?upHeadList3:upHeadList1);
setResetPage(true);
}, [upHeadList1, upHeadList2, upHeadList3]);
@@ -205,8 +205,8 @@ export default function ProcessFacilitySearch() {
ref={ref} isAdmin={false} initSidoValue={"11"}/>
<ListDiv>
<LoadingOverlay isLoading={isLoading} />
<div className="h-full w-full overflow-x-scroll">
<div className={widthSize}>
<div className="h-full w-full overflow-x-scroll min-[1200px]:overflow-x-hidden">
<div className="w-[120%] min-[1200px]:w-[100%]">
<UiTable cellClick={(index: number | undefined) => index !== undefined && cellClick(index)} headName={"시설별 수질현황"} tableData={mainList} headlist={upheadList} pageSize={10} total={total} resetPageNo={resetPage} onPageChange={handlePageChange} widthFixed={true} />
</div>
</div>
@@ -58,7 +58,7 @@ export default function ProcessFacilitySearch() {
const [fcltyName, setFcltyName] = useState<string>("");
const [operationValue, setOperationValue] = useState<string>("0");
const [searchYearValue, setSearchYearValue] = useState<string>(selectSearchYear[0]?.val || "0");
const [widthSize, setWidthSize] = useState<string>("w-[120%]");
// const [widthSize, setWidthSize] = useState<string>("w-[120%]");
const [upheadList, setUpheadList] = useState<TableUpperProps[]>(upHeadList1);
const [resetPage, setResetPage] = useState<boolean>(false);
const prevExcelListRef = useRef<ExcelType[] | null>(null);
@@ -96,7 +96,7 @@ export default function ProcessFacilitySearch() {
}, [searchFlowRateList, searchYearValue, fcltCpct, operationValue, fcltyName]);
const resetVal = () => {
setWidthSize("w-[120%]");
// setWidthSize("w-[120%]");
setUpheadList(upHeadList1)
// 상태값 설정
setSearchYearValue(selectSearchYear[0]?.val || "0");
@@ -170,7 +170,7 @@ export default function ProcessFacilitySearch() {
});
const chkVal = useCallback((returntype:ReturnType) => {
setWidthSize(returntype.partValue=='A' ?"w-[120%]":"w-[130%]")
// setWidthSize(returntype.partValue=='A' ?"w-[120%]":"w-[130%]")
setUpheadList(returntype.partValue == 'R' ? upHeadList2 : returntype.partValue == 'G'?upHeadList3:upHeadList1);
setResetPage(true);
}, [upHeadList1, upHeadList2, upHeadList3]);
@@ -206,8 +206,8 @@ export default function ProcessFacilitySearch() {
ref={ref} isAdmin={false} initSidoValue={'11'}/>
<ListDiv>
<LoadingOverlay isLoading={isLoading} />
<div className="h-full w-full overflow-x-scroll">
<div className={widthSize}>
<div className="h-full w-full overflow-x-scroll min-[1200px]:overflow-x-hidden">
<div className="w-[120%] min-[1200px]:w-[100%]">
<UiTable cellClick={(index: number | undefined) => index !== undefined && cellClick(index)} headName={"시설별 유량현황"} tableData={flowRateList} headlist={upheadList} pageSize={10} total={total} resetPageNo={resetPage} onPageChange={handlePageChange} widthFixed={true} />
</div>
</div>
@@ -75,7 +75,7 @@ export default function PlanSewage() {
// 초기화 변수
const [resetPage, setResetPage] = useState<boolean>(false);
// 표 너비
const [widthSize, setWidthSize] = useState<string>("w-[120%]");
// const [widthSize, setWidthSize] = useState<string>("w-[120%]");
// 구분별 그리드 헤더
const [upheadList, setUpheadList] = useState<TableUpperProps[]>(upHeadList1);
// 용량별
@@ -95,7 +95,7 @@ export default function PlanSewage() {
*/
// 초기화
const resetVal = () => {
setWidthSize("w-[120%]");
// setWidthSize("w-[120%]");
setUpheadList(upHeadList1);
// 상태값 설정
setFcltCpct(selectUpdownData[0]?.val || "0");
@@ -171,7 +171,7 @@ export default function PlanSewage() {
}, [isInit, initializeCommonData, searchPlanSewageList, selectSearchYear, initTrigger, searchPlanSewage]);
const chkVal = useCallback((returntype:ReturnType) => {
setWidthSize(returntype.partValue=='A' ?"w-[120%]":"w-[130%]")
// setWidthSize(returntype.partValue=='A' ?"w-[120%]":"w-[130%]")
setUpheadList(returntype.partValue == 'R' ? upHeadList2 : returntype.partValue == 'G'?upHeadList3:upHeadList1);
setResetPage(true);
}, [upHeadList1, upHeadList2, upHeadList3]);
@@ -215,8 +215,8 @@ export default function PlanSewage() {
ref={ref} isAdmin={false} initSidoValue={"11"}/>
<ListDiv>
<LoadingOverlay isLoading={isLoading} />
<div className="h-full w-full overflow-x-scroll">
<div className={widthSize}>
<div className="h-full w-full overflow-x-scroll min-[1200px]:overflow-x-hidden">
<div className="w-[120%] min-[1200px]:w-[100%]">
<UiTable cellClick={ undefined } headName={"계획하수량 산정지표 현황"} tableData={mainList} headlist={upheadList} pageSize={10} total={total} resetPageNo={resetPage} onPageChange={handlePageChange} widthFixed={true} />
</div>
<UnderComment divHeight={"5"} commentArray={commentArray} />
@@ -161,8 +161,8 @@ export default function ProcessArea() {
/>
<ListDiv>
<LoadingOverlay isLoading={isLoading} />
<div className="h-full w-full overflow-x-scroll">
<div className="w-[180%]">
<div className="h-full w-full overflow-x-scroll min-[1800px]:overflow-x-hidden">
<div className="w-[170%] min-[1800px]:w-[100%]">
<UiTable cellClick={(index: number | undefined) => index !== undefined && cellClick(index)} headName={"처리구역정보"} tableData={mainList} headlist={upHeadList1} pageSize={10} total={total} resetPageNo={resetPage} onPageChange={handlePageChange} widthFixed={true} />
</div>
</div>
@@ -87,7 +87,7 @@ export default function ProcessFacilitySearch() {
const [resetPage, setResetPage] = useState<boolean>(false);
const [partValue, setPartValue] = useState<string>("A");
const [widthSize, setWidthSize] = useState<string>("w-[120%]");
// const [widthSize, setWidthSize] = useState<string>("w-[120%]");
const [upHeadList, setUpheadList] = useState(upHeadList1);
/**
@@ -135,15 +135,15 @@ export default function ProcessFacilitySearch() {
useEffect(() => {
switch (partValue) {
case 'A':
setWidthSize("w-[130%]");
// setWidthSize("w-[130%]");
setUpheadList(upHeadList1);
break;
case 'R':
setWidthSize("w-[140%]");
// setWidthSize("w-[140%]");
setUpheadList(upHeadList2);
break;
case 'G':
setWidthSize("w-[150%]");
// setWidthSize("w-[150%]");
setUpheadList(upHeadList3);
break;
}
@@ -270,8 +270,8 @@ export default function ProcessFacilitySearch() {
ref={ref} isAdmin={false} />
<ListDiv>
<LoadingOverlay isLoading={isLoading} />
<div className="h-full w-full overflow-x-scroll">
<div className={widthSize}>
<div className="h-full w-full overflow-x-scroll min-[1200px]:overflow-x-hidden">
<div className="w-[120%] min-[1200px]:w-[100%]">
<UiTable
cellClick={(index: number | undefined) => index !== undefined && cellClick(index)}
headName={"처리시설 시설정보"}
+5 -5
View File
@@ -73,7 +73,7 @@ export default function Rdi() {
// 초기화 변수
const [resetPage, setResetPage] = useState<boolean>(false);
// 표 너비
const [widthSize, setWidthSize] = useState<string>("w-[130%]");
// const [widthSize, setWidthSize] = useState<string>("w-[130%]");
// 구분별 그리드 헤더
const [upheadList, setUpheadList] = useState<TableUpperProps[]>(upHeadList1);
// 용량별
@@ -93,7 +93,7 @@ export default function Rdi() {
*/
// 초기화
const resetVal = () => {
setWidthSize("w-[120%]");
// setWidthSize("w-[120%]");
setUpheadList(upHeadList1)
// 상태값 설정
@@ -168,7 +168,7 @@ export default function Rdi() {
}, [isInit, initializeCommonData, searchRdiList, selectSearchYear, searchRdi, initTrigger]);
const chkVal = useCallback((returntype:ReturnType) => {
setWidthSize(returntype.partValue=='A' ?"w-[130%]":"w-[150%]")
// setWidthSize(returntype.partValue=='A' ?"w-[130%]":"w-[150%]")
setUpheadList(returntype.partValue == 'R' ? upHeadList2 : returntype.partValue == 'G'?upHeadList3:upHeadList1);
setResetPage(true);
}, [upHeadList1, upHeadList2, upHeadList3]);
@@ -213,8 +213,8 @@ export default function Rdi() {
ref={ref} isAdmin={false} initSidoValue={"11"}/>
<ListDiv>
<LoadingOverlay isLoading={isLoading} />
<div className="h-full w-full overflow-x-scroll">
<div className={widthSize}>
<div className="h-full w-full overflow-x-scroll min-[1200px]:overflow-x-hidden">
<div className="w-[120%] min-[1200px]:w-[100%]">
<UiTable cellClick={ undefined } headName={"RDII추정"} tableData={mainList} headlist={upheadList} pageSize={10} total={total} resetPageNo={resetPage} onPageChange={handlePageChange} widthFixed={true} />
</div>
<UnderComment divHeight={"0"} commentArray={commentArray} />
@@ -88,7 +88,7 @@ export default function UnderWaterInput() {
// 초기화 변수
const [resetPage, setResetPage] = useState<boolean>(false);
// 표 너비
const [widthSize, setWidthSize] = useState<string>("w-[120%]");
// const [widthSize, setWidthSize] = useState<string>("w-[120%]");
// 구분별 그리드 헤더
const [upheadList, setUpheadList] = useState<TableUpperProps[]>(upHeadList1);
// 용량별
@@ -107,7 +107,7 @@ export default function UnderWaterInput() {
*/
// 초기화
const resetVal = () => {
setWidthSize("w-[120%]");
// setWidthSize("w-[120%]");
setUpheadList(upHeadList1)
// 상태값 설정
setFcltCpct(selectUpdownData[0]?.val || "0");
@@ -193,7 +193,7 @@ export default function UnderWaterInput() {
}, [fcltCpct, operationValue, fcltyName, searchUnderWaterList, searchYear]);
const chkVal = useCallback((returntype:ReturnType) => {
setWidthSize(returntype.partValue=='A' ?"w-[120%]":"w-[130%]")
// setWidthSize(returntype.partValue=='A' ?"w-[120%]":"w-[130%]")
setUpheadList(returntype.partValue == 'R' ? upHeadList2 : returntype.partValue == 'G'?upHeadList3:upHeadList1);
setResetPage(true);
}, [upHeadList1, upHeadList2, upHeadList3]);
@@ -240,8 +240,8 @@ export default function UnderWaterInput() {
/>
<ListDiv>
<LoadingOverlay isLoading={isLoading} />
<div className="h-full w-full overflow-x-scroll">
<div className={widthSize}>
<div className="h-full w-full overflow-x-scroll min-[1200px]:overflow-x-hidden">
<div className="w-[120%] min-[1200px]:w-[100%]">
<UiTable cellClick={(index: number | undefined) => index !== undefined && cellClick(index)} headName={"지하수유입량 추정"} tableData={mainList} headlist={upheadList} pageSize={10} total={total} resetPageNo={resetPage} onPageChange={handlePageChange} widthFixed={true}/>
</div>
<UnderComment commentArray={commentArray} />
+18 -18
View File
@@ -137,26 +137,26 @@ const upHeadList1:TableUpperProps[] = [
{ id: "fctCpc", title: "시설용량(m³/일)", align:"right", rowSpan:3, row:0, widthPercent: 5 },
{ id: "B", title: "시설계획", colSpan:19, row: 0 },
{ id: "C", title: "증설계획(m³/일)", colSpan:6, row: 1 },
{ id: "planSwageQntSumDt4", title: "기승인\n4단계", row:2, align:"right", widthPercent: 2.5 },
{ id: "planSwageQntSum", title: "현재", row:2, align:"right", widthPercent: 2.5 },
{ id: "planSwageQntSumDc1", title: "1단계", row:2, align:"right", widthPercent: 2.5 },
{ id: "planSwageQntSumDc2", title: "2단계", row:2, align:"right", widthPercent: 2.5 },
{ id: "planSwageQntSumDc3", title: "3단계", row:2, align:"right", widthPercent: 2.5 },
{ id: "planSwageQntSumDc4", title: "4단계", row:2, align:"right", widthPercent: 2.5 },
{ id: "planSwageQntSumDt4", title: "기승인\n4단계", row:2, align:"right", widthPercent: 3 },
{ id: "planSwageQntSum", title: "현재", row:2, align:"right", widthPercent: 3 },
{ id: "planSwageQntSumDc1", title: "1단계", row:2, align:"right", widthPercent: 3 },
{ id: "planSwageQntSumDc2", title: "2단계", row:2, align:"right", widthPercent: 3 },
{ id: "planSwageQntSumDc3", title: "3단계", row:2, align:"right", widthPercent: 3 },
{ id: "planSwageQntSumDc4", title: "4단계", row:2, align:"right", widthPercent: 3 },
{ id: "D", title: "처리인구(인)", colSpan:6, row:1 },
{ id: "swtrmtPpltnCntDt4", title: "기승인\n4단계", row:2, align:"right", widthPercent: 2.5 },
{ id: "swtrmtPpltnCnt", title: "현재", row:2, align:"right", widthPercent: 2.5 },
{ id: "swtrmtPpltnCntDc1", title: "1단계", row:2, align:"right", widthPercent: 2.5 },
{ id: "swtrmtPpltnCntDc2", title: "2단계", row:2, align:"right", widthPercent: 2.5 },
{ id: "swtrmtPpltnCntDc3", title: "3단계", row:2, align:"right", widthPercent: 2.5 },
{ id: "swtrmtPpltnCntDc4", title: "4단계", row:2, align:"right", widthPercent: 2.5 },
{ id: "swtrmtPpltnCntDt4", title: "기승인\n4단계", row:2, align:"right", widthPercent: 3 },
{ id: "swtrmtPpltnCnt", title: "현재", row:2, align:"right", widthPercent: 3 },
{ id: "swtrmtPpltnCntDc1", title: "1단계", row:2, align:"right", widthPercent: 3 },
{ id: "swtrmtPpltnCntDc2", title: "2단계", row:2, align:"right", widthPercent: 3 },
{ id: "swtrmtPpltnCntDc3", title: "3단계", row:2, align:"right", widthPercent: 3 },
{ id: "swtrmtPpltnCntDc4", title: "4단계", row:2, align:"right", widthPercent: 3 },
{ id: "E", title: "처리구역(km²)", colSpan:7, row:1 },
{ id: "swtrmtZoneAreaDt4", title: "기승인\n4단계", row:2, align:"right", widthPercent: 2.5 },
{ id: "swtrmtZoneArea", title: "현재", row:2, align:"right", widthPercent: 2.5 },
{ id: "swtrmtZoneAreaDc1", title: "1단계", row:2, align:"right", widthPercent: 2.5 },
{ id: "swtrmtZoneAreaDc2", title: "2단계", row:2, align:"right", widthPercent: 2.5 },
{ id: "swtrmtZoneAreaDc3", title: "3단계", row:2, align:"right", widthPercent: 2.5 },
{ id: "swtrmtZoneAreaDc4", title: "4단계", row:2, align:"right", widthPercent: 2.5 },
{ id: "swtrmtZoneAreaDt4", title: "기승인\n4단계", row:2, align:"right", widthPercent: 3 },
{ id: "swtrmtZoneArea", title: "현재", row:2, align:"right", widthPercent: 3 },
{ id: "swtrmtZoneAreaDc1", title: "1단계", row:2, align:"right", widthPercent: 3 },
{ id: "swtrmtZoneAreaDc2", title: "2단계", row:2, align:"right", widthPercent: 3 },
{ id: "swtrmtZoneAreaDc3", title: "3단계", row:2, align:"right", widthPercent: 3 },
{ id: "swtrmtZoneAreaDc4", title: "4단계", row:2, align:"right", widthPercent: 3 },
{ id: "trtDstr", title: "처리구역", row:2 }
];