ONAANDALL/frontend
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

sn: 세로 스크롤

Browse Source
This commit is contained in:
dongsilove
2025-12-22 16:28:11 +09:00
parent 5e9d779639
commit b0c070437f
3 changed files with 51 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/fo/app/pages/(with-layout)/dashboard/page.tsx
+49 -49
View File
@@ -19,7 +19,7 @@ import { roundNumber } from "@/app/components/common/DataForm";
const tabList = [
{ value: 'facilityInfo', label: '시설정보 및 운영현황' },
{ value: 'mainGraph', label: '주요그래프' },
{ value: 'mainGraph', label: '주요그래프' },
{ value: 'rainManage', label: '강우일 운영현황' },
//{ value: 'drainageEquipment', label: '배수설비 정비현황' }
];
@@ -42,7 +42,7 @@ export const generateYearDates = (searchYear: string) => {
export default function DashBoard() {
// 입력값 상태 관리
const { Common, initializeCommonData,searchMainGraph, searchRainManage, searchOperationStatus, OperationStatus, RainManage, MainGraph, PlanFclty } = useFoStore((state) => state);
const { Common, initializeCommonData, searchMainGraph, searchRainManage, searchOperationStatus, OperationStatus, RainManage, MainGraph, PlanFclty } = useFoStore((state) => state);
const [activeTab, setActiveTab] = useState<string>('facilityInfo');
const [filteredSigunData, setFilteredSigunData] = useState<SelectDataType[]>([{ text: "전체", val: '0' }]);
@@ -55,7 +55,7 @@ export default function DashBoard() {
selectSidoData,
selectSigunData,
} = Common;
const {
planFcltyList
} = PlanFclty;
@@ -82,7 +82,7 @@ export default function DashBoard() {
// 연도
const [searchYear, setSearchYear] = useState<string>(selectSearchYear[0]?.val || '0');
// 시설명
const [fcltyList, setFcltyList] = useState<{bscFctCd: string, bscFctNm: string, fcltyCpc: number | '', trtFrfNm: string | '', efflWqltStndrdNm: string | ''}>({
const [fcltyList, setFcltyList] = useState<{ bscFctCd: string, bscFctNm: string, fcltyCpc: number | '', trtFrfNm: string | '', efflWqltStndrdNm: string | '' }>({
bscFctCd: '11000SW001R',
bscFctNm: '난지',
fcltyCpc: 860000,
@@ -90,7 +90,7 @@ export default function DashBoard() {
efflWqltStndrdNm: '500톤 이상(Ⅲ지역)'
});
const [searchFcltyList, setSearchFcltyList] = useState<{bscFctCd: string, bscFctNm: string, fcltyCpc: number | '', trtFrfNm: string | '', efflWqltStndrdNm: string | ''}>({
const [searchFcltyList, setSearchFcltyList] = useState<{ bscFctCd: string, bscFctNm: string, fcltyCpc: number | '', trtFrfNm: string | '', efflWqltStndrdNm: string | '' }>({
bscFctCd: '',
bscFctNm: '',
fcltyCpc: '',
@@ -116,7 +116,7 @@ export default function DashBoard() {
};
const onSelectValue = (val: string, type: string) => {
switch(type) {
switch (type) {
case 'sido':
setSidoValue(val);
initializeSigunData(val);
@@ -145,11 +145,11 @@ export default function DashBoard() {
const excelDownload = () => {
if (!fcltyList.bscFctCd) return;
switch (activeTab) {
case 'facilityInfo':
searchOperationStatus(false, searchYear, fcltyList.bscFctCd).then(() => {setTimeout(() => {makeExcelData();}, 200);});
case 'facilityInfo': // 시설정보 및 운영현황
searchOperationStatus(false, searchYear, fcltyList.bscFctCd).then(() => { setTimeout(() => { makeExcelData(); }, 200); });
const makeExcelData = async () => {
fetch(`/mainDashBoard.xlsx`, {}).then(async (response) => {
if (!response.ok) {
@@ -161,7 +161,7 @@ export default function DashBoard() {
const excelData1 = planFcltyList.map((item) => {
return [
item.item,
item.provisionalApproval?Number(item.provisionalApproval.toString().replaceAll(',',''))?Number(item.provisionalApproval.toString().replaceAll(',','')):item.provisionalApproval:'',
item.provisionalApproval ? Number(item.provisionalApproval.toString().replaceAll(',', '')) ? Number(item.provisionalApproval.toString().replaceAll(',', '')) : item.provisionalApproval : '',
item.now,
item.stepOne,
item.stepTwo,
@@ -172,25 +172,25 @@ export default function DashBoard() {
// operationalStatusList를 2차원 배열로 변환
const excelData2 = operationalStatusList.map((item, index) => {
console.log(item.yearAvg+' '+item.yearMax+' '+item.yearMin);
console.log(item.yearAvg + ' ' + item.yearMax + ' ' + item.yearMin);
const baseData = [
Number(item.yearAvg?.toString().replaceAll(',','')),
Number(item.yearMax?.toString().replaceAll(',','')),
Number(item.yearMin?.toString().replaceAll(',','')),
Number(item.summerAll?.toString().replaceAll(',','')),
Number(item.summerThree?.toString().replaceAll(',','')),
Number(item.summerRain?.toString().replaceAll(',','')),
Number(item.winterAll?.toString().replaceAll(',','')),
Number(item.winterSunnyAvg?.toString().replaceAll(',','')),
Number(item.winterSunnyMax?.toString().replaceAll(',','')),
Number(item.winterSunnyMin?.toString().replaceAll(',','')),
Number(item.groundWaterAvg?.toString().replaceAll(',','').replaceAll('%','')),
Number(item.groundWaterSummer?.toString().replaceAll(',','').replaceAll('%','')),
Number(item.groundWaterWinter?.toString().replaceAll(',','').replaceAll('%',''))
Number(item.yearAvg?.toString().replaceAll(',', '')),
Number(item.yearMax?.toString().replaceAll(',', '')),
Number(item.yearMin?.toString().replaceAll(',', '')),
Number(item.summerAll?.toString().replaceAll(',', '')),
Number(item.summerThree?.toString().replaceAll(',', '')),
Number(item.summerRain?.toString().replaceAll(',', '')),
Number(item.winterAll?.toString().replaceAll(',', '')),
Number(item.winterSunnyAvg?.toString().replaceAll(',', '')),
Number(item.winterSunnyMax?.toString().replaceAll(',', '')),
Number(item.winterSunnyMin?.toString().replaceAll(',', '')),
Number(item.groundWaterAvg?.toString().replaceAll(',', '').replaceAll('%', '')),
Number(item.groundWaterSummer?.toString().replaceAll(',', '').replaceAll('%', '')),
Number(item.groundWaterWinter?.toString().replaceAll(',', '').replaceAll('%', ''))
];
// index가 0일 때만 rdi와 rdiRain 추가
return index === 0 ? [...baseData, item.rdi&&item.rdi.toString().trim()!=''?Number(item.rdi.toString().replaceAll(',','')):'', item.rdiRain&&item.rdiRain.toString().trim()!=''?Number(item.rdiRain.toString().replaceAll(',','')):''] : baseData;
return index === 0 ? [...baseData, item.rdi && item.rdi.toString().trim() != '' ? Number(item.rdi.toString().replaceAll(',', '')) : '', item.rdiRain && item.rdiRain.toString().trim() != '' ? Number(item.rdiRain.toString().replaceAll(',', '')) : ''] : baseData;
});
const sheetParameter = [
@@ -215,32 +215,32 @@ export default function DashBoard() {
};
break;
case 'mainGraph':
case 'mainGraph': // 주요그래프
searchMainGraph(searchYear, fcltyList.bscFctCd);
const yearData = generateYearDates(searchYear);
const yearValueData : any = [];
const yearValueData: any = [];
for (const i in yearData){
for (const i in yearData) {
const rowArray: string[] = [];
rowArray.push(yearData[i] ?? "");
//강수량
rowArray.push(roundNumber(chart_inflowRain.filter(item=>{return yearData[i] === item.label})[0]?.barVal0?.toString(), 1) || '');
rowArray.push(roundNumber(chart_inflowRain.filter(item => { return yearData[i] === item.label })[0]?.barVal0?.toString(), 1) || '');
//유입하수량
rowArray.push(roundNumber(chart_inflowRain.filter(item=>{return yearData[i] === item.label})[0]?.lineVal1?.toString(), 0) || '');
rowArray.push(roundNumber(chart_inflowRain.filter(item => { return yearData[i] === item.label })[0]?.lineVal1?.toString(), 0) || '');
//시설용량
rowArray.push(roundNumber(chart_inflowRain.filter(item=>{return yearData[i] === item.label})[0]?.lineVal0?.toString(), 0) || '');
rowArray.push(roundNumber(chart_inflowRain.filter(item => { return yearData[i] === item.label })[0]?.lineVal0?.toString(), 0) || '');
//유입BOD
rowArray.push(roundNumber(chart_bodRain.filter(item=>{return yearData[i] === item.label})[0]?.lineVal0?.toString(), 1) || '');
rowArray.push(roundNumber(chart_bodRain.filter(item => { return yearData[i] === item.label })[0]?.lineVal0?.toString(), 1) || '');
//유입T-P
rowArray.push(roundNumber(chart_inflTp.filter(item=>{return yearData[i] === item.label})[0]?.val?.toString(), 3) || '');
rowArray.push(roundNumber(chart_inflTp.filter(item => { return yearData[i] === item.label })[0]?.val?.toString(), 3) || '');
//총인유입T-P
rowArray.push(roundNumber(chart_chongInTp.filter(item=>{return yearData[i] === item.label})[0]?.val?.toString(), 3) || '');
rowArray.push(roundNumber(chart_chongInTp.filter(item => { return yearData[i] === item.label })[0]?.val?.toString(), 3) || '');
//방류T-P
rowArray.push(roundNumber(chart_efflTp.filter(item=>{return yearData[i] === item.label})[0]?.val?.toString(), 3) || '');
rowArray.push(roundNumber(chart_efflTp.filter(item => { return yearData[i] === item.label })[0]?.val?.toString(), 3) || '');
//유입T-N
rowArray.push(roundNumber(chart_inflTn.filter(item=>{return yearData[i] === item.label})[0]?.val?.toString(), 3) || '');
rowArray.push(roundNumber(chart_inflTn.filter(item => { return yearData[i] === item.label })[0]?.val?.toString(), 3) || '');
//방류T-N
rowArray.push(roundNumber(chart_efflTn.filter(item=>{return yearData[i] === item.label})[0]?.val?.toString(), 3) || '');
rowArray.push(roundNumber(chart_efflTn.filter(item => { return yearData[i] === item.label })[0]?.val?.toString(), 3) || '');
yearValueData.push(
rowArray
@@ -250,7 +250,7 @@ export default function DashBoard() {
const sheetParameter = [
{
data: [['날짜', '강수량', '유입하수량', '지하수유입량', '유입BOD', '유입T-P','총인유입T-P', '방류T-P', '유입T-N', '방류T-N'],...yearValueData],
data: [['날짜', '강수량', '유입하수량', '지하수유입량', '유입BOD', '유입T-P', '총인유입T-P', '방류T-P', '유입T-N', '방류T-N'], ...yearValueData],
headerNum: 1,
headerRange: 'A1:J1',
sheetName: '주요그래프'
@@ -314,7 +314,7 @@ export default function DashBoard() {
downloadMultipleExcel('주요그래프', sheetParameter);
break;
case 'rainManage':
case 'rainManage': // 강우일 운영현황
searchRainManage(searchYear, fcltyList.bscFctCd, true);
if (excelList && excelList.length > 0) {
downloadExcel({ data: excelList as unknown as JSON[], fileName: '강우일 운영현황', sheetNameArray: ['강우일 운영현황'], headerRange: 'A1:T1' });
@@ -351,7 +351,7 @@ export default function DashBoard() {
const searchVal = () => {
setSearchFcltyList(fcltyList);
if(searchFcltyList.bscFctCd) {
if (searchFcltyList.bscFctCd) {
searchOperationStatus(false, searchYear, fcltyList.bscFctCd);
}
}
@@ -361,11 +361,11 @@ export default function DashBoard() {
<ContentsDiv>
<div className="flex card card-border !mt-6">
<div className="grid grid-cols-12 gap-5 w-8/12 m-4">
<SelectBox className="col-span-2" label={'연도'} selectArray={selectSearchYear} onSelectValue={ (val) => setSearchYear(val.toString()) } value={searchYear} selectClass={undefined}/>
<SelectBox className="col-span-3" label={'시도'} selectArray={selectSidoData} onSelectValue={(val) => onSelectValue(val.toString(), 'sido')} value={sidoValue} selectClass={undefined}/>
<SelectBox className="col-span-3" label={'시군구'} selectArray={filteredSigunData} onSelectValue={(val) => onSelectValue(val.toString(), 'sigun')} value={sigunValue} selectClass={undefined}/>
<SelectBox className="col-span-2" label={'연도'} selectArray={selectSearchYear} onSelectValue={(val) => setSearchYear(val.toString())} value={searchYear} selectClass={undefined} />
<SelectBox className="col-span-3" label={'시도'} selectArray={selectSidoData} onSelectValue={(val) => onSelectValue(val.toString(), 'sido')} value={sidoValue} selectClass={undefined} />
<SelectBox className="col-span-3" label={'시군구'} selectArray={filteredSigunData} onSelectValue={(val) => onSelectValue(val.toString(), 'sigun')} value={sigunValue} selectClass={undefined} />
<div className="col-span-4 flex">
<DashBoardFclty onFacilityChange={handleFacilityChange} sidoSigun={sigunValue!='0'?sigunValue:sidoValue!='0'?sidoValue:''} facilityNm={searchFcltyList.bscFctNm}></DashBoardFclty>
<DashBoardFclty onFacilityChange={handleFacilityChange} sidoSigun={sigunValue != '0' ? sigunValue : sidoValue != '0' ? sidoValue : ''} facilityNm={searchFcltyList.bscFctNm}></DashBoardFclty>
</div>
</div>
<div className="w-4/12 mx-5 flex items-center justify-end space-x-2">
@@ -385,13 +385,13 @@ export default function DashBoard() {
<ProcessFacilitySearch searchYear={searchYear} fcltyList={[searchFcltyList]} onFacilityChange={handleFacilityChange} />
</TabsContent>
<TabsContent value="mainGraph">
<DashBoardChart searchYear={searchYear} fcltyList={[searchFcltyList]}/>
<DashBoardChart searchYear={searchYear} fcltyList={[searchFcltyList]} />
</TabsContent>
<TabsContent value="rainManage">
<RainManageTab searchYear={searchYear} fcltyList={[searchFcltyList]}/>
<RainManageTab searchYear={searchYear} fcltyList={[searchFcltyList]} />
</TabsContent>
<TabsContent value="drainageEquipment">
<DrainageEquipment searchYear={searchYear} fcltyList={[searchFcltyList]}/>
<DrainageEquipment searchYear={searchYear} fcltyList={[searchFcltyList]} />
</TabsContent>
</UITab>
</ContentsDiv>
apps/sn/app/(with-base-layout)/oper/floodPre/page.tsx
+1
View File
@@ -281,6 +281,7 @@ const Page = () => {
max-h-[100dvh]
overflow-hidden
z-[101]
flex flex-col gap-[10px]
`}
body={<TableModal fileNm={fileNm} atflId={atflId} />}
useDirectRender={true}
apps/sn/app/(with-base-layout)/oper/floodPre/tableModal.tsx
+1 -1
View File
@@ -220,7 +220,7 @@ const TableModal: React.FC<TableModalProps> = ({ fileNm, atflId }) => {
{/* 관리SHEET 탭 */}
{activeTab === 'management' && (
<div className="h-[79vh] rounded-lg border flex flex-col">
<div className="flex-1 min-w-[50vw] max-w-[90vw] overflow-auto">
<div className="flex-1 min-w-[50vw] max-w-[100vw] overflow-auto">
<LoadingOverlay isLoading={isLoading} />
<div className="min-w-max">
<UiTable