add demo for orgChart -- frank

7ad4a9a6 · frank.xa.zhang · 882fa10d · 7ad4a9a6 · 7ad4a9a6 · 7ad4a9a6
Commit 7ad4a9a6 authored Jul 18, 2019 by frank.xa.zhang
5 changed files
--- a/atms-web/src/main/webapp/dist/2.png
+++ b/atms-web/src/main/webapp/dist/2.png
--- a/atms-web/src/main/webapp/dist/A.png
+++ b/atms-web/src/main/webapp/dist/A.png
--- a/atms-web/src/main/webapp/dist/index.html
+++ b/atms-web/src/main/webapp/dist/index.html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>2016 NBA Playoff Picture </title>
+  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
+  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/orgchart/2.1.3/css/jquery.orgchart.min.css'>
+  <link rel="stylesheet" href="./style.css">
+</head>
+<body>
+  <div id="chart-western" class="chart-container" style="text-align: right;"></div>
+  <div id="chart-eastern" class="chart-container" style="text-align: left;"></div>
+  <!-- <a id="github-link" href="https://github.com/dabeng/OrgChart" target="_blank"><i class="fa fa-github-square"></i></a> -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/orgchart/2.1.3/js/jquery.orgchart.min.js'></script>
+  <script src="./script.js"></script>
+</body>
+</html>
\ No newline at end of file
--- a/atms-web/src/main/webapp/dist/script.js
+++ b/atms-web/src/main/webapp/dist/script.js
+(function ($) {
+  $(function () {
+    var westData = {
+      'name': 'Cayman 1 LP',
+      'wins': '1',
+      'children': [
+        {
+          'name': 'Cayman 2 Limited', 'wins': '2',
+          'children': [
+            {
+              'name': 'BVI 1 Limited', 'wins': '3',
+            },
+            { 'name': 'Hong Kong 1 Limited', 'wins': '4' }
+          ]
+        }
+      ]
+    };
+
+    var ocWest = $('#chart-western').orgchart({
+      'data': westData,
+      'nodeContent': 'name',
+      'direction': 't2b',
+      'createNode': function ($node, data) {
+        if (data.wins === "1")
+          $node.children('.title').html('<img src="A.png" style="width:100%">');
+        else
+          $node.children('.title').html('<img src="2.png" style="width:100%">');
+      }
+    });
+  });
+})(jQuery);
\ No newline at end of file
--- a/atms-web/src/main/webapp/dist/style.css
+++ b/atms-web/src/main/webapp/dist/style.css
+body {
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  line-height: 1.428571429;
+  color: #333333;
+}
+
+#github-link {
+  position: fixed;
+  top: 0px;
+  left: calc(50% - 18px);
+  font-size: 42px;
+  color: #000;
+}
+
+.chart-container {
+  float: left;
+  position: relative;
+  display: inline-block;
+  top: 10px;
+  left: 0px;
+  height: 1100px;
+  width: 50%;
+  overflow: hidden;
+  text-align: center;
+}
+
+.orgchart {
+  background: #fff;
+  border: 0;
+  padding: 0;
+}
+
+.orgchart>.spinner {
+  color: rgba(255, 255, 0, 0.75);
+}
+
+.orgchart .node .title {
+  background-color: #fff;
+  color: #000;
+  height: 35px;
+  border-radius: 0;
+}
+
+.orgchart.r2l .node .title {
+  transform: rotate(-90deg) translate(60px, 60px);
+  -ms-transform: rotate(-90deg) translate(60px, 60px);
+  -moz-transform: rotate(-90deg) translate(60px, 60px);
+  -webkit-transform: rotate(-90deg) translate(60px, 60px);
+}
+
+.orgchart.l2r .node .title {
+  transform: rotate(-90deg) translate(60px, 60px) rotateY(180deg);
+  -ms-transform: rotate(-90deg) translate(60px, 60px) rotateY(180deg);
+  -moz-transform: rotate(-90deg) translate(60px, 60px) rotateY(180deg);
+  -webkit-transform: rotate(-90deg) translate(60px, 60px) rotateY(180deg);
+}
+
+.orgchart .node .content {
+  border: 0;
+  background-color: #b80036;
+  color: #fff;
+  font-weight: bold;
+  font-size: 1.2em;
+}
+
+.orgchart.r2l .node .content,
+.orgchart.l2r .node .content {
+  position: absolute;
+  bottom: 138px;
+  right: 78px;
+  width: 20px;
+  border-radius: 0px;
+}
+
+.orgchart .node>.spinner {
+  color: rgba(184, 0, 54, 0.75);
+}
+
+.orgchart.r2l .node,
+.orgchart.l2r .node {
+  width: 130px;
+}
+
+.orgchart .node:hover {
+  background-color: rgba(255, 255, 0, 0.6);
+}
+
+.orgchart .node.focused {
+  background-color: rgba(255, 255, 0, 0.6);
+}
+
+.orgchart .node .edge {
+  color: rgba(0, 0, 0, 0.6);
+}
+
+.orgchart .edge:hover {
+  color: #000;
+}
+
+.orgchart td.left,
+.orgchart td.top,
+.orgchart td.right {
+  border-color: #999;
+}
+
+.orgchart td>.down {
+  background-color: #999;
+}
\ No newline at end of file