제조업을 위한 JavaScript Excel 스프레드시트 예제
페이지 정보
작성자 GrapeCity
작성일 2021-12-31 10:25 조회 1,745회
댓글 0건
본문
첨부파일
관련링크
기업이 수동 인력 및/또는 기계를 사용하여 원재료, 부품 및 구성 요소를 완제품으로 전환하는 것을 제조 비즈니스/유닛이라고 합니다.
이처럼 중요한 공급망 구성 요소가 성공을 거두기 위해서는 제조 공정을 효율적으로 관리해야 합니다.
이 샘플은 수량, 색, 배송 주소, 진행 상황 등에 대한 정보를 저장하지만, SpreadJS를 사용하면 한발 더 나아갈 수 있습니다. 이 Javascript 스프레드시트를 사용하여 작업을 감시하는 데 필요한 모든 정보를 기록할 수 있습니다. SpreadJS에서 도형을 사용하여 간단한 워크플로를 생성하는 데 필요한 단계는 건너뛰고 이 컴포넌트가 어떤 작용을 하는지 빠르게 살펴보겠습니다.
따라 하려면 을 다운로드하세요. (또는 첨부파일 다운로드)
템플릿 디자이너 설치 및 실행
받으신 후에, 압축을 풀어 주시면, 아래와 같은 경로에서 런타임 디자이너를 실행할 수 있습니다.
경로: SpreadJS.Release.xx.x.x\Designer\Designer Runtime
프로그램명: SpreadJS-Designer.xx.x.x.exe
(위의 경로는 V14 버전을 기준으로 합니다. 버전별로 경로가 상이할 수 있습니다. )
디자이너를 실행하면, 엑셀과 비슷한 디자이너 화면을 볼 수 있습니다.
*참고:
라이선스를 구매하셨는데 체험판 문구가 발생하는 경우,
템플릿 디자이너의 라이선스 키는 구매 시 받은 라이선스 증서를 첨부하여
으로 별도로 요청을 주시면 발급 드립니다.
디자이너 컴포넌트를 사용하시면, 엑셀과 동일한 방법으로 원하시는 템플릿을 만들 수 있습니다.
제조 공정 시트
사례 연구를 위해 수작업 골동품과 공예품을 판매하는 회사를 예로 들겠습니다. 이러한 품목은 보석, 가방, 의류, 장식 및 가구, 장난감, 예술품 등 다양한 범주에 속합니다. 모든 품목은 고객의 취향에 따라 맞춤 제작됩니다.
전체 제조 공정을 독립된 별도 공정으로 분리하기가 더 쉽기 때문에 이런 종류의 회사를 선택한 것입니다. 예제에서는 제품의 주문, 디자인, 제작, 배송 단계를 따라가며 알아볼 것입니다.
다음은 지정된 주문에 따라 제작될 제품과 관련된 데이터를 포함할 표 구조입니다.
지정된 항목의 이름은 이름 열에 입력하고, QTY 열에는 항목의 수량을 입력합니다.
만기일 열에는 제품의 만기일을 입력합니다. 보고서 표에는 날짜를 쉽게 선택할 수 있는 날짜/시간 선택기가 있습니다. 날짜/시간 선택기는 셀 드롭다운 메뉴(홈 탭)에서 날짜/시간 선택기를 선택하여 추가합니다.
날짜 선택기는 사용자가 셀을 클릭하여 날짜를 빠르게 입력하면 달력이 나타나는 컨트롤입니다. 사용자는 셀을 할당하려는 날짜를 이 달력에서 선택할 수 있습니다.
날짜/시간 선택기는 다음 셀 범위에서 추가됩니다. $E$4:$E$11,$E$16:$E$25,$E$30:$E$38.
또한 명령 드롭다운의 오른쪽에 있는 (⋮) 버튼을 클릭하여 날짜/시간 선택기를 사용자 정의할 수 있습니다. 날짜/시간 선택기를 정의하여 시간을 년, 월, 일로 표시할지 여부를 지정할 수 있습니다.
다음으로 다양한 프로세스의 상태를 지정하기 위한 몇 가지 목록 드롭다운을 추가하겠습니다.
첫째, 드롭다운을 추가할 셀의 위치를 $F$16:$H$25, $F$4:$H$11 및 $F$30:$H$38 중에서 선택합니다.
그런 다음 홈 탭 → 셀 드롭다운 → 목록으로 이동합니다.
위와 같은 팝업(날짜/시간 선택기)이 나타나지만 날짜/시간 선택기 대신 셀 버튼 명령이 나열됩니다. 오른쪽에 있는 (⋮) 버튼을 클릭해야 하며, 그러면 목록 팝업이 나타납니다. 여기에서 목록의 항목을 정의합니다.
이 예제에서 이러한 항목은 완료, 작업 중, 승인 대기 중, 지연됨 등과 같은 상태입니다. SpreadJS를 사용하면 항목을 목록에 보기 좋게 나타내는 아이콘을 추가할 수 있습니다.
다음은 첫 번째 항목 생성입니다(완료). 항목을 선택하면 그림에 녹색 조명이 표시됩니다.
“작업 중”, “승인 대기 중” 및 “지연됨” 상태에도 동일한 단계를 반복합니다. 다음 그림은 아이콘이 포함된 항목을 추가한 후의 드롭다운 목록을 나타낸 것입니다.
조건부 서식을 사용하여 선택한 상태에 맞는 올바른 색을 셀에 지정할 수 있습니다.
셀을 선택합니다.
홈 탭에서 조건부 서식 메뉴를 선택합니다.
새 규칙을 클릭합니다.
“다음을 포함하는 셀만 서식 지정”을 규칙으로 선택합니다.
완료에 해당하는 셀 값의 경우 RGB(255, 255, 255)를 텍스트 색으로, RGB(143, 222, 172)를 배경색으로 지정합니다. 서식 지정 버튼을 클릭하여 완료합니다.
“작업 중”, “승인 대기 중” 및 “지연됨” 상태에도 동일한 단계를 사용하여 규칙을 추가합니다.
아래는 조건부 서식을 추가한 결과입니다.
다음으로 할 일은 진행률 표시줄을 표에 추가하는 것입니다. 완료 백분율은 J 열에 입력했고, I 열에는 표시줄을 추가할 것입니다. 시각화를 위해 이러한 정보 표시를 분리했습니다. 그것이 “J”에서 “I”까지의 셀 값을 참조하는 이유입니다.
스크린샷처럼 아래 단계에 따라 진행합니다.
홈 탭에서 조건부 서식 → 새 규칙 → 값을 기준으로 모든 셀의 서식 지정을 선택합니다.
서식 스타일에서는 데이터 막대를 선택합니다.
막대만 표시를 클릭하고 백분율을 셀에서 제거합니다.
데이터 막대의 색을 선택합니다. 이 예제의 경우 RGB(214, 242, 223)는 항목, RGB(143, 222, 172)는 합계를 나타냅니다.
“확인”을 클릭합니다.
샘플을 사용하면 16진수 코드를 입력하는 대신 ColorPicker에서 항목의 색을 선택할 수 있습니다. SpreadJS에서 ColorPicker는 또 다른 드롭다운 목록 개체이므로 셀 범위를 선택한 다음 셀 드롭다운 메뉴를 통해 삽입하여 추가할 수 있습니다(날짜/시간 선택기 및 목록 드롭다운의 경우와 유사).
자세히 버튼(⋮)을 사용하면 ColorPicker에 표시할 미리 정의된 색을 결정할 수 있습니다.
색 드롭다운을 추가한 결과:
샘플을 시각적으로 더 보기 좋게 만들기 위해 색 선택기 옆에 실제 색을 추가할 수 있습니다. 한 가지 쉬운 방법은 =HBARSPARKLINE(value, colorScheme?, axisVisible?, barHeight?)을 사용하는 것입니다.
이 스파크라인은 색을 표시하는 데만 사용되므로 색 선택기에서 선택한 색의 경우처럼 이 예제에서는 colorScheme 변수에만 집중합니다. 사용자가 색을 선택하지 않은 경우에는 “IF”를 사용하여 공백으로 둡니다.
다른 셀에 변경 사항을 적용하려면 끌어서 놓기만 하면 됩니다.
다음으로 할 일은 주문에 대한 하이퍼링크를 추가하는 것입니다. 주문 링크 열에서 URL 하이퍼링크를 입력하면 워크시트의 하이퍼링크를 클릭했을 때 지정된 웹페이지가 열리게 됩니다. 이것은 특정 URL에 위치한 주문에 첨부된 모든 서류를 확인해야 하는 경우에 유용할 수 있습니다.
셀을 선택하고 삽입 탭에서 하이퍼링크를 클릭합니다.
상자에 표시하려는 텍스트를 작성합니다.
단어에 밑줄을 쳐야 하는 경우에는 체크박스를 선택합니다.
웹 페이지 또는 파일 탭에서 웹 주소를 입력합니다.
이 단계를 완료하면 아래와 같은 시트 보기가 됩니다.
순서도 시트
제조업에 종사하는 기업은 지속적인 공정 개선을 달성할 방법을 제공함으로써 제조 공정을 최적화하기 위해 순서도를 사용하는 경우가 많습니다. 이 워크플로 또는 순서도에는 원재료에서 완제품을 만들기 위해 완료해야 할 세부 활동 수준 단계와 지침 세트가 자세히 나와 있습니다.
이를 통해 팀은 프로세스의 시각적 표현을 확보하고, 단계 간의 관계를 이해하며, 병목 현상 발생 가능성 또는 강력한 특징과 관련된 정보를 제공함으로써 의사결정 및 성과 평가를 지원할 수 있습니다.
이 단계는 SpreadJS가 어떻게 간단한 제조 공정 워크플로를 생성하여 이를 JavaScript 응용 프로그램에서 추가하는 데 사용되는지를 보여줍니다.
먼저 순서도의 개념을 정의해야 합니다. 워크플로의 단계를 분석하는 것으로 시작합니다. 이 예제에서는 공정을 논리적으로 4개 부분으로 나누었습니다.
주문: 주문을 수신한 후의 상황
디자인: 이 회사의 제품은 주로 맞춤형 품목이기 때문에 품목마다 요구 사항이 서로 달라 대량으로 디자인할 수 없습니다.
제작: 이 부분은 디자인을 마친 후 제품을 제작하는 공정입니다.
배송: 제품을 제작하여 창고로 발송한 후의 상황, 송장 작성, 제품 배송 등의 단계가 포함됩니다.
다음은 시트에 도형을 추가하여 순서도를 만드는 일련의 단계입니다.
“삽입” 탭에는 사용자가 추가할 수 있는 모든 도형이 표시된 “도형” 드롭다운이 있습니다.
도형을 삽입한 후에는 SpreadJS에서 사용자 정의할 수 있습니다. 마우스 오른쪽 버튼을 클릭한 후 도형 서식을 선택합니다.
디자이너에서 도형 서식을 클릭하면 시트 오른쪽에 패널이 표시되며 여기에서 도형을 사용자 정의할 수 있습니다. 도형에 색을 지정하고 해당 도형의 테두리 속성 집합, 기타 도형 크기, 정렬, 위치, 이동 등의 속성을 지정할 수 있습니다.
이 예제에서는 도형 내에 텍스트가 포함되어 있으며, 도형을 마우스 오른쪽 버튼으로 클릭한 후 텍스트 편집을 선택하거나 도형 내부를 두 번 클릭하여 텍스트를 추가했습니다. SpreadJS에서 이 텍스트를 사용자 정의할 수 있습니다.
도형 서식 패널 내에 있는 텍스트 옵션을 사용하면 가능합니다. 텍스트, 글꼴 또는 정렬의 색을 지정할 수 있습니다. 아
래 스크린샷은 사용자가 텍스트 속성을 변경하는 방법을 보여줍니다.
SpreadJS는 서로 다른 도형 또는 항목 간에 연결을 만드는 데 사용되는 두 가지 연결선 도형을 제공합니다. 연결선 도형을 삽입하려면 삽입 → 도형 → 선 범주에서 SpreadJS를 클릭합니다. Spread 인스턴스에서 도형을 추가한 후 도형 위에 마우스 커서를 놓고 연결점으로 갈 수 있습니다.
클릭하여 끌어오면 연결점의 어디를 마우스로 가리키든지 자동으로 그려져 도형에 연결되는 것을 볼 수 있습니다. 자동으로 그려지기 때문에 도형 및 도형 내용과 충돌하지 않습니다. 마우스 버튼을 놓으면 결과를 볼 수 있습니다(아래 참조).
기본 도형과 마찬가지로 연결선도 사용자 정의할 수 있습니다. 연결선은 회전하거나 크기를 변경할 수 있으며, 최종 사용자의 회전 및 크기 변경 권한을 제한할 수도 있습니다.
이 옵션을 선택하면 크기를 조정할 수 있는 크기 조정 핸들과 도형을 회전할 수 있는 회전 핸들이 나타납니다. 색, 음영, 투명도도 조정할 수 있습니다. 아래 두 개의 스크린샷을 통해 연결선의 색, 종료 화살표 유형, 연결선의 폭 등을 어떻게 변경했는지 확인하세요.
다음 항목은 아래 워크플로를 생성하는 데 사용된 규칙 집합입니다.
프로세스의 시작과 끝을 표시하기 위해 모서리가 둥근 사각형을 사용합니다.
프로세스에서 의사결정 포인트를 표시하기 위해 자주색 “다이아몬드” 기호를 사용합니다.
프로세스의 일반적 단계 또는 문서를 사용하는 프로세스의 포인트를 나타내기 위해 파란색 사각형과 파란색 문서 및 다중 문서 도형을 사용합니다.
기본 도형을 연결하기 위해 파란색 연결선, 라인 및 엘보를 사용합니다.
SpreadJS에서 텍스트 상자 개체를 지정하지 않았으므로 의사결정 가능성 포인트를 표시하기 위해 녹색 텍스트가 포함된 투명 사각형을 사용합니다. 다음 텍스트 상자는 투명 배경을 가진 도형입니다.
스크린샷은 회사가 제품을 디자인, 제작 및 배송하는 과정을 그래픽으로 보여줍니다.
정리
매년 엄청난 양의 데이터가 저장되고 있는 제조업계에서는 관리자가 데이터 기반의 의사결정을 하기 위해 뛰어난 데이터 분석 솔루션을 필요로 합니다.
JavaScript 스프레드시트 컴포넌트인 SpreadJS는 강력한 계산 엔진, 데이터 입력 및 시각화 기능을 갖춘 범용 캔버스로서 사용자를 위해 이상적인 솔루션을 만들 수 있는 유연성과 친숙함을 제공합니다.
컴퓨팅 성능, 속도 그리고 제조 대시보드를 향상하기 위한 수많은 방법을 갖추는 것이 지금보다 쉬웠던 적이 없었습니다!
SpreadJS가 제공하는 놀라운 기회에 대해 자세히 알아보려면 지금 바로 을 받으세요.
지금 바로 SpreadJS를 다운로드하여 직접 테스트해보세요!
댓글목록
등록된 댓글이 없습니다.
