웹밤바

css conic-gradient를 이용한 도넛그래프 아래 블로그를 참고했으며 data추가하여 유동적으로 사용할수 있도록 수정했다 https://guiyomi.tistory.com/66 CSS로 직접 그래프 만들기(bar, donut 그래프) + 애니메이션 효과 추가 보통 웹 개발을 할 때 그래프를 다룰 일이 생기면 라이브러리를 찾아서 사용하곤 했다. 이번에도 라이브러리를 이용하여 도넛 그래프 8개를 2행 4열로 배치하는 화면을 만드는 작업을 하게 됐는 guiyomi.tistory.com See the Pen 다중 도넛 그래프 by soohyeon (@sooh) on CodePen. .donut { position: relative; width: 300px; height: 300px; border-rad..

기본으로 모든 li를 step이 지나간 스타일로 적용하고(#fff) on이 된 요소를 뒤따르면서 같은 부모를 공유하는 모든 li ( li.on ~ li) 즉 on이된 요소부터 맨 뒷 li 까지 색상을 선택되지 않은 색상으로 변경한다(#999) 주의해야할 점은 on이 되지 않은 상태는 모든 요소가 선택이 된것처럼 보여짐으로 항상 on체크가 있어야 한다

Status 컴포넌트에서 상태값버튼 클릭시 emi을 이용하여 App.vue로 보냈다 App.vue에서 상태값을 다시 Group 컴포넌트로 보내고 해당하는 row만 보여준다 App.vue 공통경로 : 읽기모드 수정모드 Group.vue template ... v-show="iaValList['worklist-status'] == this.sort || this.sort=='total'" 테이블의 tr이 worklist-status값이 Status.vue에서 클릭한 값과 같거나 total일 경우 보여진다 script

header영역에 worklist-status 상태에따라 완료, 대기, 삭제등을 카운트하고 해당 상태버튼을 클릭하면 그 항목만 보일수 있도록 한다 progressbar로 현 상황을 보기쉽게 정리하는 표 App.vue 공통경로 : .. updateList status 컴포넌트에서 group에 정렬할 기준을 받아서 this.sort에 담아준다 1. 진행률을 계산하여 보여준다 2. 완료, 제외, total을 계산하여 보여준다 3. 진행률을 progressBar 시각화하여 보여준다 Status.vue template 진행률 {{percent}}% 완료 : {{countComplete}} 제외 : {{countDel}} total : {{total}} script style .progressBar { width:..

App.vue 에서 다음과 같이 데이터를 받아왔다 Tab.vue {{item}} groupTitle을 tabLists로 받아와서 각 타이틀들을 button으로 감싸주고 click시 해당 그룹으로 이동할 method를 만든다 (quickMove) quickMove(item) 매개변수로 받아온 groupTitle__1... 은 컴포넌트안의 각 타이틀에 id값으로 같은 id사용하기로 한다 getElementById(item) 으로 group안의 타이틀 id를 찾고 위치를 찾는다(offsetTop) 나는 tab이 페이지에서 항상 띄어둘것이기 때문에 그만큼의 높이값을 빼주어(headerHeight) 스크롤이 tab바로 아래에 보여지게한다 window 스크롤값을 이동시킨다

path수정과 방식은 동일하다 수정모드일경우 수정할수 있는 textarea보여지고 아닐경우 텍스트로 worklist-note의 값이 보여진다 blur될경우 수정된 내용을 sendNewIA로 store의 IAdata에 수정한다. ... {{iaVal}} ... updatePath: function(data,target){ data['mode'] = ''; let row = data; row['worklist-path'] = target.value; this.sendNewIA(row); },

{{iaVal}} 링크수정 링크수정 버튼 클릭시 임시로 해당 row에 mode라는 항목과 modi 값을 넣어준다 이 값은 링크가 수정완료 되면 사라진다 pathModi : function(row){ row['mode'] = 'modi'; }, iaValList['mode']가 modi이면 input이 보여져서 경로를 수정할수 있다 수정이 완료되고 focus가 떠나면(blur) mode는 초기화하고 path에 새로운 경로는 sendNewIA로 store에 보내서 메인 IAdata를 수정한다 mode가 modi가 아니기때문에 input은 가려지고 a링크가 보여진다 updatePath: function(data,target){ data['mode'] = ''; let row = data; row['workli..

... {{iaVal}} ... :href="`${commonURL}${iaValList['worklist-path']}`" target="_blank" 클릭하면 공통 URL + worklist-path의 설정한 경로를 새창으로 이동 @mouseenter="previewLink(`${commonURL}${iaValList['worklist-path']}`, $event)" previewLink : function (link,event){ const el = event.target const iframe = document.createElement('iframe') iframe.src=`${link}.html`; iframe.width=1240; iframe.height=1500; iframe.setAtt..

worklist-path일 경우 작업물의 폴더와 파일경로를 a링크로 보여주고 마우스오버시 미리보기 레이어가 노출된다 https://shubamba.tistory.com/106?category=582020

상태(worklist-status) 셀에 select box로 해당 상태를 선택하면 그 해당 행의 색상을 변경하고 진행상황에 숫자가 카운트 한다(추후 4-1. 완료, 제외, total count 에서 진행) Group.vue ... 대기 진행중 완료 제외 {{this.statusRename(iaVal)}} ... 수정모드일 경우에(v-if="isModify") selectbox가 보이고 수정모드가 아닐경우 worklist-status의 값이 텍스트로 보인다 statusRename으로 적절하게 워딩을 변경했다 worklist-status의 값을 stay, ing, complete, del로 정하고(필요에 따라 가감) select box에서 상태값을 선택했을때 (@change) updateStatus를 실행..