pav
/
pav-fe-kac
12
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

super 권한일 때 그룹명 검색조건 추가

pull/2/head
hhjk00 10 months ago
parent
5a381f0122
commit
11f05f5bce
5 changed files with 142 additions and 97 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 53
      src/components/statistics/StatisticsSearch.js
  2. 3
      src/components/statistics/StatisticsTotal.js
  3. 59
      src/containers/statistics/AbnormalSituationContainer.js
  4. 62
      src/containers/statistics/FlightContainer.js
  5. 62
      src/containers/statistics/FlightResultContainer.js

53
src/components/statistics/StatisticsSearch.js
Unescape View File

@ -20,9 +20,11 @@ export default function StatisticsSearch({
dateLists, dateLists,
categoryTypeOptions, categoryTypeOptions,
handlerBarTicks, handlerBarTicks,
handlerTitleName, handlerChartTitle,
handleChangeSearchType, handleChangeSearchType,
formatSeconds formatSeconds,
user,
entireGroupList
}) { }) {
const [total, setTotal] = useState([]); const [total, setTotal] = useState([]);
const [top, setTop] = useState([]); const [top, setTop] = useState([]);
@ -271,6 +273,40 @@ export default function StatisticsSearch({
<CardBody className='pal-card-body'> <CardBody className='pal-card-body'>
<div className='search-cont'> <div className='search-cont'>
<dl> <dl>
{user?.authId === 'SUPER' && (
<dt>
<div className='search-box'>
<div className='search-list-ti'>그룹명</div>
<div className='search-list'>
<div className='search-list-cont'>
<Row>
<Col className='list-input' md='4' sm='12'>
<CustomInput
inline
type='select'
id=''
bsSize='sm'
value={searchType.serviceType}
onChange={e =>
handleChangeSearchType(
'serviceType',
e.target.value
)
}
>
{entireGroupList?.map(i => (
<option key={i.groupId} value={i.groupNm}>
{i.groupNm}
</option>
))}
</CustomInput>
</Col>
</Row>
</div>
</div>
</div>
</dt>
)}
<dt> <dt>
<div className='search-box'> <div className='search-box'>
<div className='search-list-ti'>검색조건</div> <div className='search-list-ti'>검색조건</div>
@ -283,12 +319,13 @@ export default function StatisticsSearch({
type='select' type='select'
id='' id=''
bsSize='sm' bsSize='sm'
onChange={e => value={searchType.category}
onChange={e => {
handleChangeSearchType( handleChangeSearchType(
'category', 'category',
e.target.value e.target.value
) );
} }}
> >
{Object.entries(categoryTypeOptions).map( {Object.entries(categoryTypeOptions).map(
([value, label]) => ( ([value, label]) => (
@ -317,7 +354,7 @@ export default function StatisticsSearch({
<Card> <Card>
<CardHeader className='d-flex justify-content-between align-items-sm-center align-items-start flex-sm-row flex-column'> <CardHeader className='d-flex justify-content-between align-items-sm-center align-items-start flex-sm-row flex-column'>
<CardTitle tag='h4'> <CardTitle tag='h4'>
{handlerTitleName(searchType.category)} 통계 {handlerChartTitle(searchType.category)} 통계
</CardTitle> </CardTitle>
<div className='select-date-wrap'> <div className='select-date-wrap'>
<Row> <Row>
@ -327,7 +364,7 @@ export default function StatisticsSearch({
type='select' type='select'
id='' id=''
bsSize='sm' bsSize='sm'
value={searchType.type} value={searchType.dateType}
onChange={e => onChange={e =>
handleChangeSearchType('dateType', e.target.value) handleChangeSearchType('dateType', e.target.value)
} }
@ -427,7 +464,7 @@ export default function StatisticsSearch({
<Card> <Card>
<CardHeader className='d-flex justify-content-between align-items-sm-center align-items-start flex-sm-row flex-column'> <CardHeader className='d-flex justify-content-between align-items-sm-center align-items-start flex-sm-row flex-column'>
<CardTitle tag='h4'> <CardTitle tag='h4'>
{handlerTitleName(searchType.category)} TOP5 {handlerChartTitle(searchType.category)} TOP5
</CardTitle> </CardTitle>
</CardHeader> </CardHeader>
<CardBody> <CardBody>

3
src/components/statistics/StatisticsTotal.js
Unescape View File

@ -1,5 +1,6 @@
import { Col, Row } from 'reactstrap'; import { Col, Row } from 'reactstrap';
import { FcAlarmClock, FcWorkflow, FcBarChart } from 'react-icons/fc'; import { FcAlarmClock, FcWorkflow, FcBarChart } from 'react-icons/fc';
import { useEffect } from 'react';
export default function StatisticsTotal({ export default function StatisticsTotal({
totalData, totalData,
@ -37,7 +38,7 @@ export default function StatisticsTotal({
<span>{renderIcon(idx)}</span> <span>{renderIcon(idx)}</span>
<span>{totalTitle[idx]}</span> <span>{totalTitle[idx]}</span>
</th> </th>
<td colspan='2'> <td colSpan='2'>
<span className='date'>기체명</span> <span className='date'>기체명</span>
<span className='date-data'>{i.name}</span> <span className='date-data'>{i.name}</span>
</td> </td>

59
src/containers/statistics/AbnormalSituationContainer.js
Unescape View File

@ -8,6 +8,7 @@ import StatisticsTotal from '../../components/statistics/StatisticsTotal';
export default function AbnormalSituationContainer() { export default function AbnormalSituationContainer() {
const dispatch = useDispatch(); const dispatch = useDispatch();
const { abnormal, abnormalSearch } = useSelector( const { abnormal, abnormalSearch } = useSelector(
state => state.statisticsState state => state.statisticsState
); );
@ -17,7 +18,7 @@ export default function AbnormalSituationContainer() {
const [searchType, setSearchType] = useState({ const [searchType, setSearchType] = useState({
category: 'PLAN', category: 'PLAN',
dateType: 'year', dateType: 'year',
serviceType: '', serviceType: 'KAC',
year: new Date().getFullYear(), year: new Date().getFullYear(),
month: new Date().getMonth() + 1, month: new Date().getMonth() + 1,
day: new Date().getDate() day: new Date().getDate()
@ -35,30 +36,23 @@ export default function AbnormalSituationContainer() {
CRASH: '충돌위험' CRASH: '충돌위험'
}; };
// 사용자가 SUPER 권한일 경우 전체 그룹 조회
useEffect(() => { useEffect(() => {
if (user) { user?.authId === 'SUPER' &&
user.authId === 'SUPER' && dispatch(GroupActions.ENTIRE_GROUP_LIST.request());
dispatch(GroupActions.ENTIRE_GROUP_LIST.request());
}
}, []); }, []);
// 사용자가 SUPER 권한일 경우 serviceType 파라미터 추가 - 상단 통계 데이터
useEffect(() => { useEffect(() => {
dispatch( const params =
StcsActions.ABNORMAL_STCS.request({ serviceType: searchType.serviceType }) user?.authId === 'SUPER' ? { serviceType: searchType.serviceType } : {};
);
}, [searchType.serviceType]);
useEffect(() => {
const { year, month } = searchType;
const lastDay = new Date(year, month, 0).getDate();
const dayList = Array.from({ length: lastDay }, (_, index) => index + 1);
setDateLists({ ...dateLists, day: dayList }); dispatch(StcsActions.ABNORMAL_STCS.request(params));
}, [searchType.month]); }, [searchType.serviceType, user]);
// 사용자가 SUPER 권한일 경우 serviceType 파라미터 추가 - 하단 그래프 데이터
useEffect(() => { useEffect(() => {
const { category, dateType, serviceType, year, month, day } = searchType; const { category, dateType, serviceType, year, month, day } = searchType;
const dateMapping = { const dateMapping = {
month: year, month: year,
day: `${year}-${month}`, day: `${year}-${month}`,
@ -66,15 +60,22 @@ export default function AbnormalSituationContainer() {
}; };
const date = dateMapping[dateType] || ''; const date = dateMapping[dateType] || '';
dispatch( const params =
StcsActions.ABNORMAL_STCS_SEARCH.request({ user?.authId === 'SUPER'
cate: category, ? { cate: category, date, type: dateType, serviceType }
date, : { cate: category, date, type: dateType };
type: dateType,
serviceType dispatch(StcsActions.ABNORMAL_STCS_SEARCH.request(params));
}) }, [searchType, user]);
);
}, [searchType]); // 해당 월에 맞는 요일 표출
useEffect(() => {
const { year, month } = searchType;
const lastDay = new Date(year, month, 0).getDate();
const dayList = Array.from({ length: lastDay }, (_, index) => index + 1);
setDateLists({ ...dateLists, day: dayList });
}, [searchType.month]);
// 검색조건 handler // 검색조건 handler
const handleChangeSearchType = useCallback( const handleChangeSearchType = useCallback(
@ -88,7 +89,7 @@ export default function AbnormalSituationContainer() {
); );
// 그래프 타이틀 handler // 그래프 타이틀 handler
const handlerTitleName = category => { const handlerChartTitle = category => {
return categoryTypeOptions[category]; return categoryTypeOptions[category];
}; };
@ -138,10 +139,12 @@ export default function AbnormalSituationContainer() {
<StatisticsSearch <StatisticsSearch
searchData={abnormalSearch} searchData={abnormalSearch}
searchType={searchType} searchType={searchType}
user={user}
entireGroupList={entireGroupList}
categoryTypeOptions={categoryTypeOptions} categoryTypeOptions={categoryTypeOptions}
dateLists={dateLists} dateLists={dateLists}
handlerBarTicks={handlerBarTicks} handlerBarTicks={handlerBarTicks}
handlerTitleName={handlerTitleName} handlerChartTitle={handlerChartTitle}
handleChangeSearchType={handleChangeSearchType} handleChangeSearchType={handleChangeSearchType}
/> />
</div> </div>

62
src/containers/statistics/FlightContainer.js
Unescape View File

@ -8,6 +8,7 @@ import StatisticsSearch from '../../components/statistics/StatisticsSearch';
export default function FlightContainer() { export default function FlightContainer() {
const dispatch = useDispatch(); const dispatch = useDispatch();
const { flight, flightSearch } = useSelector(state => state.statisticsState); const { flight, flightSearch } = useSelector(state => state.statisticsState);
const { user } = useSelector(state => state.authState); const { user } = useSelector(state => state.authState);
const { entireGroupList } = useSelector(state => state.groupState); const { entireGroupList } = useSelector(state => state.groupState);
@ -15,7 +16,7 @@ export default function FlightContainer() {
const [searchType, setSearchType] = useState({ const [searchType, setSearchType] = useState({
category: 'TIME', category: 'TIME',
dateType: 'year', dateType: 'year',
serviceType: '', serviceType: 'KAC',
year: new Date().getFullYear(), year: new Date().getFullYear(),
month: new Date().getMonth() + 1, month: new Date().getMonth() + 1,
day: new Date().getDate() day: new Date().getDate()
@ -33,31 +34,23 @@ export default function FlightContainer() {
FLT_COUNT: '비행 횟수' FLT_COUNT: '비행 횟수'
}; };
// 사용자가 SUPER 권한일 경우 전체 그룹 조회
useEffect(() => { useEffect(() => {
if (user) { user?.authId === 'SUPER' &&
user.authId === 'SUPER' && dispatch(GroupActions.ENTIRE_GROUP_LIST.request());
dispatch(GroupActions.ENTIRE_GROUP_LIST.request()); }, [user]);
}
}, []);
// 사용자가 SUPER 권한일 경우 serviceType 파라미터 추가 - 상단 통계 데이터
useEffect(() => { useEffect(() => {
dispatch( const params =
StcsActions.FLIGHT_STCS.request({ serviceType: searchType.serviceType }) user?.authId === 'SUPER' ? { serviceType: searchType.serviceType } : {};
);
}, [searchType.serviceType]);
// 해당 월에 맞는 요일 표출 dispatch(StcsActions.FLIGHT_STCS.request(params));
useEffect(() => { }, [searchType.serviceType, user]);
const { year, month } = searchType;
const lastDay = new Date(year, Number(month), 0).getDate();
const dayList = Array.from({ length: lastDay }, (_, index) => index + 1);
setDateLists({ ...dateLists, day: dayList });
}, [searchType.month]);
// 사용자가 SUPER 권한일 경우 serviceType 파라미터 추가 - 하단 그래프 데이터
useEffect(() => { useEffect(() => {
const { category, dateType, serviceType, year, month, day } = searchType; const { category, dateType, serviceType, year, month, day } = searchType;
const dateMapping = { const dateMapping = {
month: year, month: year,
day: `${year}-${month}`, day: `${year}-${month}`,
@ -65,15 +58,22 @@ export default function FlightContainer() {
}; };
const date = dateMapping[dateType] || ''; const date = dateMapping[dateType] || '';
dispatch( const params =
StcsActions.FLIGHT_STCS_SEARCH.request({ user?.authId === 'SUPER'
cate: category, ? { cate: category, date, type: dateType, serviceType }
date, : { cate: category, date, type: dateType };
type: dateType,
serviceType dispatch(StcsActions.FLIGHT_STCS_SEARCH.request(params));
}) }, [searchType, user]);
);
}, [searchType]); // 해당 월에 맞는 요일 표출
useEffect(() => {
const { year, month } = searchType;
const lastDay = new Date(year, Number(month), 0).getDate();
const dayList = Array.from({ length: lastDay }, (_, index) => index + 1);
setDateLists({ ...dateLists, day: dayList });
}, [searchType.month]);
// 검색조건 handler // 검색조건 handler
const handleChangeSearchType = useCallback( const handleChangeSearchType = useCallback(
@ -87,7 +87,7 @@ export default function FlightContainer() {
); );
// 그래프 타이틀 handler // 그래프 타이틀 handler
const handlerTitleName = category => { const handlerChartTitle = category => {
return categoryTypeOptions[category]; return categoryTypeOptions[category];
}; };
@ -199,11 +199,13 @@ export default function FlightContainer() {
<StatisticsSearch <StatisticsSearch
searchData={flightSearch} searchData={flightSearch}
searchType={searchType} searchType={searchType}
user={user}
entireGroupList={entireGroupList}
categoryTypeOptions={categoryTypeOptions} categoryTypeOptions={categoryTypeOptions}
dateLists={dateLists} dateLists={dateLists}
formatSeconds={formatSeconds} formatSeconds={formatSeconds}
handlerBarTicks={handlerBarTicks} handlerBarTicks={handlerBarTicks}
handlerTitleName={handlerTitleName} handlerChartTitle={handlerChartTitle}
handleChangeSearchType={handleChangeSearchType} handleChangeSearchType={handleChangeSearchType}
/> />
</div> </div>

62
src/containers/statistics/FlightResultContainer.js
Unescape View File

@ -8,6 +8,7 @@ import StatisticsSearch from '../../components/statistics/StatisticsSearch';
export default function ResultContainer() { export default function ResultContainer() {
const dispatch = useDispatch(); const dispatch = useDispatch();
const { result, resultSearch } = useSelector(state => state.statisticsState); const { result, resultSearch } = useSelector(state => state.statisticsState);
const { user } = useSelector(state => state.authState); const { user } = useSelector(state => state.authState);
const { entireGroupList } = useSelector(state => state.groupState); const { entireGroupList } = useSelector(state => state.groupState);
@ -15,7 +16,7 @@ export default function ResultContainer() {
const [searchType, setSearchType] = useState({ const [searchType, setSearchType] = useState({
category: 'FLT_RESULT', category: 'FLT_RESULT',
dateType: 'year', dateType: 'year',
serviceType: '', serviceType: 'KAC',
year: new Date().getFullYear(), year: new Date().getFullYear(),
month: new Date().getMonth() + 1, month: new Date().getMonth() + 1,
day: new Date().getDate() day: new Date().getDate()
@ -33,31 +34,23 @@ export default function ResultContainer() {
FLT_PLAN_APRVN: '비행 승인' FLT_PLAN_APRVN: '비행 승인'
}; };
// 사용자가 SUPER 권한일 경우 전체 그룹 조회
useEffect(() => { useEffect(() => {
if (user) { user?.authId === 'SUPER' &&
user.authId === 'SUPER' && dispatch(GroupActions.ENTIRE_GROUP_LIST.request());
dispatch(GroupActions.ENTIRE_GROUP_LIST.request()); }, [user]);
}
}, []);
// 사용자가 SUPER 권한일 경우 serviceType 파라미터 추가 - 상단 통계 데이터
useEffect(() => { useEffect(() => {
dispatch( const params =
StcsActions.RESULT_STCS.request({ serviceType: searchType.serviceType }) user?.authId === 'SUPER' ? { serviceType: searchType.serviceType } : {};
);
}, [searchType.serviceType]);
// 해당 월에 맞는 요일 표출 dispatch(StcsActions.RESULT_STCS.request(params));
useEffect(() => { }, [searchType.serviceType, user]);
const { year, month } = searchType;
const lastDay = new Date(year, Number(month), 0).getDate();
const dayList = Array.from({ length: lastDay }, (_, index) => index + 1);
setDateLists({ ...dateLists, day: dayList });
}, [searchType.month]);
// 사용자가 SUPER 권한일 경우 serviceType 파라미터 추가 - 하단 그래프 데이터
useEffect(() => { useEffect(() => {
const { category, dateType, serviceType, year, month, day } = searchType; const { category, dateType, serviceType, year, month, day } = searchType;
const dateMapping = { const dateMapping = {
month: year, month: year,
day: `${year}-${month}`, day: `${year}-${month}`,
@ -65,15 +58,22 @@ export default function ResultContainer() {
}; };
const date = dateMapping[dateType] || ''; const date = dateMapping[dateType] || '';
dispatch( const params =
StcsActions.RESULT_STCS_SEARCH.request({ user?.authId === 'SUPER'
cate: category, ? { cate: category, date, type: dateType, serviceType }
date, : { cate: category, date, type: dateType };
type: dateType,
serviceType dispatch(StcsActions.RESULT_STCS_SEARCH.request(params));
}) }, [searchType, user]);
);
}, [searchType]); // 해당 월에 맞는 요일 표출
useEffect(() => {
const { year, month } = searchType;
const lastDay = new Date(year, Number(month), 0).getDate();
const dayList = Array.from({ length: lastDay }, (_, index) => index + 1);
setDateLists({ ...dateLists, day: dayList });
}, [searchType.month]);
// 검색조건 handler // 검색조건 handler
const handleChangeSearchType = useCallback( const handleChangeSearchType = useCallback(
@ -87,7 +87,7 @@ export default function ResultContainer() {
); );
// 그래프 타이틀 handler // 그래프 타이틀 handler
const handlerTitleName = category => { const handlerChartTitle = category => {
return categoryTypeOptions[category]; return categoryTypeOptions[category];
}; };
@ -137,10 +137,12 @@ export default function ResultContainer() {
<StatisticsSearch <StatisticsSearch
searchData={resultSearch} searchData={resultSearch}
searchType={searchType} searchType={searchType}
user={user}
entireGroupList={entireGroupList}
categoryTypeOptions={categoryTypeOptions} categoryTypeOptions={categoryTypeOptions}
dateLists={dateLists} dateLists={dateLists}
handlerBarTicks={handlerBarTicks} handlerBarTicks={handlerBarTicks}
handlerTitleName={handlerTitleName} handlerChartTitle={handlerChartTitle}
handleChangeSearchType={handleChangeSearchType} handleChangeSearchType={handleChangeSearchType}
/> />
</div> </div>

Write Preview
Loading…
Cancel
Save