연합시스템 Front-End 과제

다음 Vue Project를 내려받은 후 아래의 내용을 구현하세요

  • /src/views/Home.vue 파일 내에서 list 배열 내의 데이터를 활용하여 다양한 Chart & Graph를 만들어 보세요
  • 화면은 반응형으로 제작되어야 합니다.
  • 형식은 자유이며, 완성된 과제는 프로젝트 단위로 압축하여 shin.hyunjung@yhsbearing.com으로 전달 바랍니다.

데이터 설명

당사에서 실제 제품가공한 데이터 수집내역 중 10개분 가공에 대한 데이터이며, UTC 02:47~04:48시의 데이터로 총 2시간 분량의 데이터를 조건에 맞추어 필터링한 것입니다.

  • MID : 기계명, Xact : X축 좌표값, Zact : Z축 좌표값, S1load : 스핀들 부하값, part_count : 가공갯수, TIME : 시간

순서

  1. git fork[v]
  2. git clone vscode 다운로드[v]
  3. npm i node 다운로드 패킷[v]
  4. npm run serve 실행 확인[v]
  5. home.vue vfor 데이터 화면에 호출 [v]
  6. 차트 사용하는거 고민중!!!
    1. 차트js[v]
  7. UTC 02:47~04:48시의 데이터로 총 2시간 분량의 데이터를 조건에 맞추어 필터링한 것입니다.[v]
    1. 시간 UTC 타입으로 기능 구현 [v]
  8. 다양한 차트 샘플 컴포넌트로 구현 [V]
    1. Line 차트로 데이터 표시 [V]