JavaScript에서 셰이프를 사용하여 자동차 보험 청구서 앱을 만드는 방법

고급기능 JavaScript에서 셰이프를 사용하여 자동차 보험 청구서 앱을 만드는 방법

추천0

페이지 정보

작성자 GrapeCity

작성일 2021-08-24 08:49 조회 894회 댓글 0건

본문

첨부파일

spreadjs12-car-insurance-claim-sample.zip (107.1K)

관련링크

SpreadJS 사용자 정의 셰이프는 다양한 방법으로 구현할 수 있는 유용한 기능입니다. 사양에 셰이프를 그리고 하이라이트, 정보 설명선 등의 상호 작용을 추가하거나 일부 데이터베이스 작업을 수행할 수 있습니다.

이 튜토리얼에서는 사용자 정의 셰이프를 사용하여 자동차 보험 청구서 응용 프로그램에 대한 대화형 파손 다이어그램을 작성하는 방법에 대해 알아보겠습니다.

클릭 가능한 섹션이 있는 JavaScript 자동차 보험 응용 프로그램

이 응용 프로그램으로 사용자는 보험사 홈페이지에 들어가 자동차 파손 부위를 클릭해 청구서를 작성할 수 있습니다. 이 샘플에는 클릭 가능한 상호 작용만 포함되지만, 데이터베이스에 정보를 저장하기 위한 "제출" 버튼, 다시 시작하기 위한 "지우기" 버튼 또는 로그인 페이지를 추가할 수 있습니다.

샘플 다운로드(zip)

1단계: 사용자 정의 셰이프 SpreadJS 프로젝트 설정

먼저 NPM을 사용하여 프로젝트 폴더를 설정하고 프로젝트에 SpreadJS 라이브러리 파일을 설치하는 것으로 시작하겠습니다.

npm install @grapecity/spread-sheets @grapecity/spread-excelio @grapecity/spread-sheets-shapes

그런 다음 이 프로젝트에 필요한 모든 SpreadJS 파일을 참조하고 사용할 일부 변수를 초기화할 수 있습니다.

<!DOCTYPE html>
<html style="height:100%;font-size:14px;">
  <head>
      <meta charset="utf-8" />
      <title>Car Insurance Claim</title>

      <link href="./node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css" rel="stylesheet" type="text/css" />
      <script type="text/javascript" src="./node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js"></script>
      <script type="text/javascript" src="./node_modules/@grapecity/spread-excelio/dist/gc.spread.excelio.min.js"></script>
      <script type="text/javascript" src="./node_modules/@grapecity/spread-sheets-shapes/dist/gc.spread.sheets.shapes.min.js"></script>

      <script src="app.js" type="text/javascript"></script>
      <link rel="stylesheet" type="text/css" href="styles.css">

      <script type="text/javascript">
          GC.Spread.Sheets.LicenseKey = "<YOUR KEY HERE>";
      </script>

  </head>
  <body>
      <div class="sample">
          <div id="spreadSheet" style="width: 100%; height: 100%; border: 1px solid gray"></div>
      </div>
  </body>
</html>

JavaScript 코드는 별도의 파일에 있습니다.

window.onload = function () {

  var spread = new GC.Spread.Sheets.Workbook(document.getElementById("spreadSheet"), {
      sheetCount: 1
  });
  spread.options.allowUserZoom = false;
  var activeSheet = spread.getActiveSheet();
}

2단계: 다이어그램 png를 응용 프로그램에 추가

이제 다이어그램을 추가해 보겠습니다. 기본적으로 다이어그램 위에 셰이프를 만들어 보겠습니다. 그러면 디자인 팀에서 png를 만들 수 있습니다.

getCellRect 함수를 사용하여 다이어그램을 배치할 위치를 알아보겠습니다.

function addCarDiagram(sheet) {
  sheet.setColumnWidth(0, 200);
  sheet.setColumnWidth(10, 200);
  var startCellRect = sheet.getCellRect(0, 0),
      endCellRect = sheet.getCellRect(22, 10),
      spreadElement = document.getElementById("spreadSheet");
  var offset = spreadElement.getBoundingClientRect()
  var x = offset.left - sheet.getColumnWidth(0, GC.Spread.Sheets.SheetArea.rowHeader),
      y = offset.top - sheet.getRowHeight(0, GC.Spread.Sheets.SheetArea.colHeader);
  sheet.pictures.add("CarDiagram", "./Car Diagram.png", x, y, endCellRect.x - startCellRect.x, endCellRect.y - startCellRect.y);
  sheet.addSpan(1, 3, 1, 2);
  sheet.getCell(1, 3).text("Passenger Side");
  sheet.getCell(1, 3).font("12pt Arial");
  sheet.addSpan(20, 3, 1, 2);
  sheet.getCell(20, 3).text("Driver's Side");
  sheet.getCell(20, 3).font("12pt Arial");
}

응용 프로그램에 다이어그램 추가 응용 프로그램에 다이어그램 추가

3단계: 다이어그램 맨 위에 셰이프 추가

이 프로젝트의 경우 다이어그램에 있는 모든 셰이프의 위치와 크기를 정의하는 별도의 시트를 만들 예정입니다. 영역을 작성한 다음 시트에서 해당 배열을 설정하면 쉽게 이 작업을 수행할 수 있습니다.

function initDamageAreaShapes(spread) {
  var sheet = spread.getSheet(0);
  spread.addSheet(1, new GC.Spread.Sheets.Worksheet("Damage_Areas"));

  var startColor = "lightgreen";
  var damageAreaSheet = spread.getSheet(1);
  var damageAreas = ["Area", "Left", "Top", "Width", "Height", "Stroke Color", "Line Width"],
      front = ["front", 11, 136, 57, 167, "blue", 3],
      hood = ["hood", 123, 149, 142, 140, "blue", 3],
      frontWindshield = ["frontWindshield", 257, 149, 70, 140, "blue", 3],
      roof = ["roof", 325, 165, 158, 110, "blue", 3],
      rearTop = ["rearTop", 481, 149, 158, 143, "blue", 3],
      rear = ["rear", 661, 134, 63, 171, "blue", 3],
      leftFront = ["leftFront", 110, 310, 157, 85, "blue", 3],
      leftFrontDoor = ["leftFrontDoor", 257, 283, 140, 112, "blue", 3],
      leftBackDoor = ["leftBackDoor", 392, 283, 121, 111, "blue", 3],
      leftBack = ["leftBack", 465, 284, 168, 110, "blue", 3],
      rightFront = ["rightFront", 111, 44, 156, 76, "blue", 3],
      rightFrontDoor = ["rightFrontDoor", 258, 44, 139, 113, "blue", 3],
      rightBackDoor = ["rightBackDoor", 391, 44, 123, 115, "blue", 3],
      rightBack = ["rightBack", 465, 44, 168, 110, "blue", 3];

  damageAreaSheet.setArray(0, 0, [
      damageAreas,
      front,
      hood,
      frontWindshield,
      roof,
      rearTop,
      rear,
      leftFront,
      leftFrontDoor,
      leftBackDoor,
      leftBack,
      rightFront,
      rightFrontDoor,
      rightBackDoor,
      rightBack
  ]);
}

정의된 후에는 각 셰이프에 대한 모델을 만들 수 있습니다.

시트에 위치와 크기가 정해져 있기 때문에 여러 셀을 참조할 수 있습니다. 또한 SVG 경로를 사용하여 셰이프를 정의할 수 있습니다.

SVG 경로는 셰이프의 왼쪽 상단 점에 대해 상대적입니다.

var frontModel = {
  left: "=Damage_Areas!B2",
  top: "=Damage_Areas!C2",
  width: "=Damage_Areas!D2",
  height: "=Damage_Areas!E2",
  options: {
      fill: {
          type: 1,
          color: startColor,
          transparency: "0.5"
      }
  },
  path: [
      [
          ["M", 1, 8],
          ["L", 17, 4],
          ["L", 19, 0],
          ["L", 31, 0],
          ["L", 33, 4],
          ["L", 51, 4],
          ["L", 56, 10],
          ["L", 57, 49],
          ["L", 52, 50],
          ["L", 51, 116],
          ["L", 57, 118],
          ["L", 57, 158],
          ["L", 51, 163],
          ["L", 34, 162],
          ["L", 31, 166],
          ["L", 19, 167],
          ["L", 18, 163],
          ["L", 1, 158],
          ["Z"]
      ]
  ]
};

그런 다음 방금 정의한 모델을 사용하여 셰이프를 추가할 수 있습니다.

sheet.shapes.add('front', frontModel);

4단계: 사용자 정의 JavaScript 셰이프에 상호 작용 추가

이제 셰이프가 추가되었으므로 사용자가 셰이프를 선택할 때 셰이프 색상을 변경하기 위한 코드를 작성할 수 있습니다.

(function shapeClicked() {
  var host = spread.getHost();
  host.addEventListener("click", function (e) {
      var offset = getOffset(host),
          left = offset.left,
          top = offset.top;
      var x = e.pageX - left,
          y = e.pageY - top;
      var hitTest = activeSheet.hitTest(x, y);
      if (hitTest.shapeHitInfo) {
          var shape = hitTest.shapeHitInfo.shape;
          var shapeStyle = shape.style();
          shapeStyle.fill.color = (shapeStyle.fill.color === "rgb(255,0,0)" ? "rgb(144,238,144)" : "rgb(255,0,0)");
          shape.style(shapeStyle);
      }
  });
})();

이 코드는 다음과 같이 정의된 getOffset이라는 사용자 정의 함수를 사용합니다.

function getOffset(elem) {
  var docElem, box = {
      top: 0,
      left: 0
      },
      doc = elem && elem.ownerDocument;
  if (!doc) {
      return;
  }
  docElem = doc.documentElement;
  if (typeof elem.getBoundingClientRect !== void 0) {
      box = elem.getBoundingClientRect();
  }
  return {
      top: box.top + window.pageYOffset - docElem.clientTop,
      left: box.left + window.pageXOffset - docElem.clientLeft
  };
}

JavaScript 셰이프에 상호 작용 추가 JavaScript 셰이프에 상호 작용 추가

5단계: 응용 프로그램에 버튼 셰이프 추가

사용자가 발생한 사고의 유형을 선택할 수 있도록 몇 가지 옵션을 추가할 수 있습니다. 버튼 셰이프를 만들어 셰이프 그룹에 추가합니다.

function initAccidentType(sheet) {
  var rowHeaderWidth = sheet.getColumnWidth(0, GC.Spread.Sheets.SheetArea.rowHeader),
      colHeaderHeight = sheet.getRowHeight(0, GC.Spread.Sheets.SheetArea.colHeader),
      shapeType = GC.Spread.Sheets.Shapes.AutoShapeType.roundedRectangle,
      hAlignment = GC.Spread.Sheets.HorizontalAlign.center,
      vAlignment = GC.Spread.Sheets.VerticalAlign.center,
      accidentTypeShapeInfo = [
          [4, 11, "bumperDamage", "Bumper Damage"],
          [6, 11, "roofDamage", "Roof Damage"],
          [4, 15, "overheated", "Overheated"],
          [6, 15, "other", "Other"]],
      cellRect,
      margin = 5;

  sheet.addSpan(4, 10, 4, 1);
  var cell = sheet.getCell(4, 10);
  cell.text("Accident Type");
  cell.hAlign(hAlignment);
  cell.vAlign(vAlignment);
  cell.font("20pt Arial");

  var accidentTypeButtonsGroup = [];

  for (var s = 0; s < accidentTypeShapeInfo.length; s++) {
      var tempShapeInfo = accidentTypeShapeInfo[s];
      sheet.addSpan(tempShapeInfo[0], tempShapeInfo[1], 2, 4);
      cellRect = getRangeOutsideWindow(sheet, tempShapeInfo[0], tempShapeInfo[1], 2, 4);
      var tempShape = sheet.shapes.add(tempShapeInfo[2], shapeType, cellRect.x - rowHeaderWidth + margin, cellRect.y - colHeaderHeight + margin, cellRect.width - (2 * margin), cellRect.height - (2 * margin));
      tempShape.text(tempShapeInfo[3]);
      var tempShapeStyle = tempShape.style();
      tempShapeStyle.line.color = "darkgreen";
      tempShapeStyle.fill.color = "lightgreen";
      tempShapeStyle.fill.transparency = 0.5;
      tempShapeStyle.textFrame.hAlign = hAlignment;
      tempShapeStyle.textFrame.vAlign = vAlignment;
      tempShapeStyle.textEffect.color = 'black';
      tempShape.style(tempShapeStyle);
      accidentTypeButtonsGroup.push(tempShape);
  }
  return accidentTypeButtonsGroup;
}

버튼을 추가하여 사고의 심각성을 선택할 수도 있습니다. 해당되는 코드는 대부분 동일합니다.

function initSeverity(sheet) {
  var rowHeaderWidth = sheet.getColumnWidth(0, GC.Spread.Sheets.SheetArea.rowHeader),
      colHeaderHeight = sheet.getRowHeight(0, GC.Spread.Sheets.SheetArea.colHeader),
      shapeType = GC.Spread.Sheets.Shapes.AutoShapeType.roundedRectangle,
      hAlignment = GC.Spread.Sheets.HorizontalAlign.center,
      vAlignment = GC.Spread.Sheets.VerticalAlign.center,
      severityShapeInfo = [
          [8, "highSeverity", "High"],
          [10, "mediumSeverity", "Medium"],
          [12, "lowSeverity", "Low"]],
      cellRect,
      margin = 5;

  sheet.addSpan(8, 10, 6, 1);
  var cell = sheet.getCell(8, 10);
  cell.text("Severity");
  cell.hAlign(hAlignment);
  cell.vAlign(vAlignment);
  cell.font("20pt Arial");

  var severityButtonsGroup = [];

  for (var s = 0; s < severityShapeInfo.length; s++) {
      var tempShapeInfo = severityShapeInfo[s];
      sheet.addSpan(tempShapeInfo[0], 11, 2, 2);
      cellRect = getRangeOutsideWindow(sheet, tempShapeInfo[0], 11, 2, 2);
      var tempShape = sheet.shapes.add(tempShapeInfo[1], shapeType, cellRect.x - rowHeaderWidth + margin, cellRect.y - colHeaderHeight + margin, cellRect.width - (2 * margin), cellRect.height - (2 * margin));
      tempShape.text(tempShapeInfo[2]);
      var tempShapeStyle = tempShape.style();
      tempShapeStyle.line.color = "darkgreen";
      tempShapeStyle.fill.color = "lightgreen";
      tempShapeStyle.fill.transparency = 0.5;
      tempShapeStyle.textFrame.hAlign = hAlignment;
      tempShapeStyle.textFrame.vAlign = vAlignment;
      tempShapeStyle.textEffect.color = 'black';
      tempShape.style(tempShapeStyle);
      severityButtonsGroup.push(tempShape);
  }
  return severityButtonsGroup;
}

JavaScript 셰이프에 버튼 추가 JavaScript 셰이프에 상호 작용 추가

셰이프에 몇 가지 함수를 추가하여 선택한 차량 부위에 따른 사고 유형을 선택할 수 있습니다. 이 작업을 수행하기 위해 앞에서 정의한 shapeClicked 함수에 추가할 수 있습니다.

if (hitTest.shapeHitInfo) {
  var shape = hitTest.shapeHitInfo.shape;
  var shapeStyle = shape.style();
  shapeStyle.fill.color = (shapeStyle.fill.color === "rgb(255,0,0)" ? "rgb(144,238,144)" : "rgb(255,0,0)");
  shape.style(shapeStyle);
  //Roof Damage
  if (shape.name() == "roof") {
      var button = accidentTypeButtonsGroup.find("roofDamage");
      var buttonStyle = button.style();
      buttonStyle.fill.color = (buttonStyle.fill.color === "rgb(255,0,0)" ? "rgb(144,238,144)" : "rgb(255,0,0)");
      button.style(buttonStyle);
  }
  else if (shape.name() == "roofDamage") {
      var button = activeSheet.shapes.get("roof");
      var buttonStyle = button.style();
      buttonStyle.fill.color = (buttonStyle.fill.color === "rgb(255,0,0)" ? "rgb(144,238,144)" : "rgb(255,0,0)");
      button.style(buttonStyle);
  }
  //Bumper Damage
  else if (shape.name() == "front" || shape.name() == "rear") {
      var front = activeSheet.shapes.get("front"),
          rear = activeSheet.shapes.get("rear");
      var button = accidentTypeButtonsGroup.find("bumperDamage");
      if (front.style().fill.color === "rgb(255,0,0)" || rear.style().fill.color === "rgb(255,0,0)") {
          buttonStyle = button.style();
          buttonStyle.fill.color = "rgb(255,0,0)";
          button.style(buttonStyle);
      } else if (front.style().fill.color === "rgb(144,238,144)" && rear.style().fill.color === "rgb(144,238,144)") {
          buttonStyle = button.style();
          buttonStyle.fill.color = "rgb(144,238,144)";
          button.style(buttonStyle);
      }
  }
  else if (shape.name() == 'bumperDamage') {
      var front = activeSheet.shapes.get("front"),
          rear = activeSheet.shapes.get("rear");
      var frontStyle = front.style(),
          rearStyle = rear.style();
      var button = find(accidentTypeButtonsGroup, 'bumperDamage');
      if (button.style().fill.color === "rgb(255,0,0)") {
          frontStyle.fill.color = "rgb(255,0,0)";
          rearStyle.fill.color = "rgb(255,0,0)";
          front.style(frontStyle);
          rear.style(rearStyle);
      } else {
          frontStyle.fill.color = "rgb(144,238,144)";
          rearStyle.fill.color = "rgb(144,238,144)";
          front.style(frontStyle);
          rear.style(rearStyle);
      }
  }
  //Severity
  else if (shape.name() === "highSeverity" || shape.name() === "mediumSeverity" || shape.name() === "lowSeverity") {
      for (var s = 0; s < buttonArray.length; s++) {
          if (severityButtonsGroup[s].name() !== shape.name()) {
              var buttonStyle = severityButtonsGroup[s].style();
              buttonStyle.fill.color = "rgb(144,238,144)"
              severityButtonsGroup[s].style(buttonStyle);
          }
      }
  }
  else if (shape.name() === 'other') {
      var otherShapes = ['frontWindshield', 'rearTop','leftFrontDoor', 'leftBackDoor', 'leftBack', 'rightFrontDoor', 'rightBackDoor', 'rightBack'];
      var button = find(accidentTypeButtonsGroup, 'other');
      for (var i = 0; i < otherShapes.length; i++) {
          const shapeName = otherShapes[i];
          var curShape = activeSheet.shapes.get(shapeName);
          var curShapeStyle = curShape.style();
          curShapeStyle.fill.color = button.style().fill.color;
          curShape.style(curShapeStyle);
      }
  } else if (shape.name() === 'hood' || shape.name() === 'leftFront' || shape.name() === 'rightFront') {
      var overheatedShapes = ['hood', 'leftFront', 'rightFront'];
      var allGreen = true;
      var button = find(accidentTypeButtonsGroup, 'overheated');
      for (var i = 0; i < overheatedShapes.length; i++) {
          const shapeName = overheatedShapes[i];
          var curShape = activeSheet.shapes.get(shapeName);
          if (curShape.style().fill.color == "rgb(255,0,0)") {
              allGreen = false;
          }
      }
      if (allGreen) {
          var buttonStyle = button.style();
          buttonStyle.fill.color = "rgb(144,238,144)";
          button.style(buttonStyle);
      } else {
          var buttonStyle = button.style();
          buttonStyle.fill.color = "rgb(255,0,0)";
          button.style(buttonStyle);
      }
  } else if (shape.name() === 'overheated') {
      var overheatedShapes = ['hood', 'leftFront', 'rightFront'];
      var button = find(accidentTypeButtonsGroup, 'overheated');
      for (var i = 0; i < overheatedShapes.length; i++) {
          const shapeName = overheatedShapes[i];
          var curShape = activeSheet.shapes.get(shapeName);
          var curShapeStyle = curShape.style();
          curShapeStyle.fill.color = button.style().fill.color;
          curShape.style(curShapeStyle);
      }
  }
  else {
      var otherShapes = ['frontWindshield', 'rearTop','leftFrontDoor', 'leftBackDoor', 'leftBack', 'rightFrontDoor', 'rightBackDoor', 'rightBack'];
      var allGreen = true;
      var button = find(accidentTypeButtonsGroup, 'other');
      for (var i = 0; i < otherShapes.length; i++) {
          const shapeName = otherShapes[i];
          var curShape = activeSheet.shapes.get(shapeName);
          if (curShape.style().fill.color == "rgb(255,0,0)") {
              allGreen = false;
          }
      }
      if (allGreen) {
          var buttonStyle = button.style();
          buttonStyle.fill.color = "rgb(144,238,144)";
          button.style(buttonStyle);
      } else {
          var buttonStyle = button.style();
          buttonStyle.fill.color = "rgb(255,0,0)";
          button.style(buttonStyle);
      }
  }
}

다른 셰이프에 종속된 셰이프 동작 추가

6단계: 양식 필드 셰이프 추가

클레임을 작성하려면 사용자가 정보를 입력할 수 있는 공간이 필요합니다. 그래야만 다음에 대한 정보 섹션을 만들 수 있습니다.

function initInfoArea(sheet) {
  var border = new GC.Spread.Sheets.LineBorder("black", GC.Spread.Sheets.LineStyle.thin);
  sheet.addSpan(8, 13, 1, 3);
  sheet.getCell(8, 13).text("Driver Name:");
  sheet.addSpan(8, 16, 1, 3);
  sheet.getRange(8, 16, 1, 3).borderBottom(border);
  sheet.addSpan(9, 13, 1, 3);
  sheet.getCell(9, 13).text("Vehicle Make/Model/Year:");
  sheet.addSpan(9, 16, 1, 3);
  sheet.getRange(9, 16, 1, 3).borderBottom(border);
  sheet.addSpan(10, 13, 1, 6);
  sheet.getCell(10, 13).text("Details:");
  sheet.addSpan(11, 13, 3, 6);
  sheet.getRange(11, 13, 3, 6).setBorder(border, {
      all: true
  });
}

양식 필드 셰이프 추가

7단계: 스프레드시트 기능 제거

마지막으로 눈금선이나 헤더와 같이 사용자에게 필요하지 않은 스프레드시트 기능을 제거해 보겠습니다.

var workbookShapes = activeSheet.shapes.all();
for (var s = 0; s < workbookShapes.length; s++) {
  workbookShapes[s].allowMove(false);
  workbookShapes[s].allowResize(false);
}

activeSheet.setRowCount(35);
activeSheet.setColumnCount(20);
activeSheet.name("Car Insurance Claim");

activeSheet.options.gridline = {
  showVerticalGridline: false,
  showHorizontalGridline: false
};
activeSheet.options.colHeaderVisible = false;
activeSheet.options.rowHeaderVisible = false;
spread.options.allowUserDragDrop = false;
lockCells(activeSheet);

사용자 정의 셰이프 자동차 보험 응용 프로그램 작업 사용자 정의 셰이프 자동차 보험 응용 프로그램 작업

여기까지가 사용자 정의 셰이프로 간단한 응용 프로그램을 만드는 데 필요한 것입니다. 물론 이는 한 가지 예에 불과합니다. SpreadJS에서 사용자 정의 셰이프의 가능성은 무궁무진합니다!

JavaScript에서 셰이프를 사용하여 자동차 보험 청구서 앱을 만드는 방법 > 온라인 스터디

MESCIUS 포럼

MESCIUS 커뮤니티

MESCIUS 포럼

MESCIUS 커뮤니티

SpreadJS

온라인 스터디

고급기능 JavaScript에서 셰이프를 사용하여 자동차 보험 청구서 앱을 만드는 방법

페이지 정보

본문

첨부파일

관련링크

샘플 다운로드(zip)

1단계: 사용자 정의 셰이프 SpreadJS 프로젝트 설정

2단계: 다이어그램 png를 응용 프로그램에 추가

3단계: 다이어그램 맨 위에 셰이프 추가

4단계: 사용자 정의 JavaScript 셰이프에 상호 작용 추가

5단계: 응용 프로그램에 버튼 셰이프 추가

6단계: 양식 필드 셰이프 추가

7단계: 스프레드시트 기능 제거

자동차 보험 사용자 정의 셰이프 데모 사용해보기

샘플 다운로드(zip)

댓글목록

카테고리

태그1

인기글

최신글

셀럽