Commit c457d21b authored by frank.xa.zhang's avatar frank.xa.zhang

add demo for orgChart -- frank

parent 7ec45fab
......@@ -280,11 +280,14 @@ grunt.initConfig({
dest: '<%= pkg.bundleTemp %>/angular-cache.js'
},
echarts: {
src: ["Scripts/echarts.min.js",
"Scripts/orgChart/jquery.orgchart.js",
"Scripts/orgChart/html2canvas.min.js"],
src: ["Scripts/echarts.min.js"],
dest: '<%= pkg.bundleTemp %>/echarts.js'
},
orgChart:{
src: ["Scripts/orgChart/jquery.orgchart.js",
"Scripts/orgChart/html2canvas.min.js"],
dest: '<%= pkg.bundleTemp %>/orgChart.js'
},
mentio: {
src: ["Scripts/mentio.js"],
dest: '<%= pkg.bundleTemp %>/mentio.js'
......
......@@ -399,6 +399,6 @@ var app = angular.module('app', ['ui.tree', 'ui.bootstrap', 'ui.bootstrap.tpls',
appTranslation.loadAll();
signalRSvc.initialize();
//signalRSvc.initialize();
}
]);
\ No newline at end of file
......@@ -102,6 +102,7 @@
<script type="text/javascript" src="bundles/exceptionless.js"></script>
<script type="text/javascript" src="bundles/angular-cache.js"></script>
<script type="text/javascript" src="bundles/echarts.js"></script>
<script type="text/javascript" src="bundles/orgChart.js"></script>
<script type="text/javascript" src="bundles/jsword.js"></script>
<script type="text/javascript" src="bundles/angular-file-upload.js"></script>
......@@ -123,7 +124,7 @@
<script type="text/javascript" src="bundles/ivh-treeview.js"></script>
<script type="text/javascript" src="bundles/ui-select.js"></script>
<script type="text/javascript" src="bundles/month-picker.js"></script>
<script src="http://sec-aegisfe.didistatic.com/static/aegisfe/water-mark1.0.js"></script>
<!--<script src="http://sec-aegisfe.didistatic.com/static/aegisfe/water-mark1.0.js"></script>-->
<!--<script type="text/javascript" src="bundles/hubs.js">-->
<script type="text/javascript">
......
......@@ -358,7 +358,7 @@
<div ng-show="currentNavItem==='page4'" class="org-chart-info">
<div class="org-chart-info-mapper">
<div class="org-chart-info-top">
<div class="org-chart-container"></div>
<org-shareholder-structure></org-shareholder-structure>
</div>
<div class="org-chart-info-bottom col-sm-12">
<div class="org-chart-info-shareholders col-sm-3 data-grid-border" style="height:255px">
......
......@@ -36,7 +36,7 @@
background-color: @little-white;
.menu-header {
height:60px;
height: 60px;
background-color: white;
//左侧标题
.menu-title {
......@@ -149,7 +149,6 @@
}
}
.org-right-container {
width: calc(~"100% - @{left-container} - @{container-margin} - @{gutter-width}");
background-color: @little-white;
......@@ -225,20 +224,20 @@
}
}
.user-grid{
.createEntityBtn{
.user-grid {
.createEntityBtn {
z-index: 2;
position: absolute;
.btn-up-grid{
.btn-up-grid {
height: 36px;
padding: 0 10px;
border-radius: 5px;
outline:none;
outline: none;
}
}
.grid-container{
.grid-container {
margin-top: 10px;
}
}
......@@ -302,7 +301,6 @@
}
}
#organizationIsActiveBtn {
background-image: none;
......@@ -433,11 +431,11 @@
overflow-y: auto;
overflow-x: hidden;
.quarter-div{
.quarter-div {
width: 50%;
float: left;
padding: 30px 10px 10px 0px;
.form-group{
.form-group {
padding-top: 7px;
padding-left: 0;
line-height: 3em;
......@@ -455,17 +453,15 @@
}
}
.bottom-row{
.bottom-row {
display: block;
}
.attachment-container{
.attachment-header{
.attachment-container {
.attachment-header {
}
.attachment-option{
.attachment-option {
height: 40px;
}
}
......@@ -623,10 +619,10 @@
font-weight: 700;
font-family: 'Microsoft YaHei Bold', 'Microsoft YaHei Regular', 'Microsoft YaHei';
}
.tax-reg-info-table{
.tax-reg-info-table {
.tax-reg-info-content {
.col-sm-4 span{
.col-sm-4 span {
float: left;
margin-top: 7px;
}
......@@ -643,7 +639,6 @@
}
}
.tax-extra-info-table {
.tax-extra-info-content {
.quarter-div {
......@@ -661,7 +656,7 @@
text-align: right;
margin-top: 7px;
}
.col-sm-8 span{
.col-sm-8 span {
float: left;
margin-top: 7px;
}
......@@ -750,19 +745,18 @@
/*padding-right: 20px;*/
}
}
.tax-preferential-info-table {
}
.org-compliance-info{
.org-compliance-info {
max-height: 100%;
.org-compliance-info-mapper{
.org-compliance-info-header{
.org-compliance-info-mapper {
.org-compliance-info-header {
margin-top: 10px;
.compliance-lable{
.compliance-lable {
font-weight: bold;
font-size: large;
}
......@@ -770,32 +764,32 @@
}
}
.org-chart-info{
.org-chart-info-mapper{
.org-chart-info-top{
padding-top: 450px;
height: 50%;
.org-chart-info {
.org-chart-info-mapper {
.org-chart-info-top {
//padding-top: 450px;
//height: 50%;
}
.org-chart-info-bottom{
.org-chart-info-bottom {
height: 50%;
.lable-text{
.lable-text {
font-weight: bold;
font-size: large;
}
.data-grid-border{
.data-grid-border {
width: 32%;
border: 1px solid #e4e4e4;
}
.org-chart-info-shareholders{
.org-chart-info-shareholders {
}
.org-chart-info-subsidaries{
.org-chart-info-subsidaries {
}
.org-chart-info-directors{
.org-chart-info-directors {
}
}
......@@ -933,7 +927,6 @@
padding-right: 15px;
}
.sub-title-bu {
font-family: 'Microsoft YaHei';
font-weight: 409;
......@@ -1027,7 +1020,6 @@
padding: 12px 0px;
}
.dx-datagrid-rowsview .dx-row {
border-bottom: 1px solid @color-light-gray-e4;
height: 30px;
......@@ -1108,7 +1100,6 @@
padding-right: 15px;
}
#user-role-grid {
border: none;
......@@ -1137,12 +1128,10 @@
line-height: 30px;
}
.ui-grid-contents-wrapper .ui-grid-render-container .ui-grid-row:nth-child(even) .ui-grid-cell {
background-color: white;
}
.ui-grid-cell-contents {
padding: 6px 0 3px 12px !important;
font-size: 13px;
......@@ -1230,7 +1219,6 @@
background-color: #fed5a9 !important;
}
.icon-right {
text-align: right;
padding-right: 5px;
......@@ -1238,12 +1226,10 @@
line-height: @ui-grid-row-height;
}
.ui-grid-row {
line-height: @ui-grid-row-height;
}
.ui-grid-contents-wrapper .ui-grid-render-container .ui-grid-row:nth-child(even) .ui-grid-cell {
background-color: white;
}
......@@ -1304,20 +1290,22 @@
}
}
.col-sm-8{
.col-sm-8 {
width: 52.666667%;
text-align: left!important;
text-align: left !important;
}
.col-sm-4{
.col-sm-4 {
width: 45.333333%;
text-align: left!important;
text-align: left !important;
}
.swxx {
.col-sm-4{
.col-sm-4 {
width: 25.333333%;
text-align: left!important;
text-align: left !important;
}
.col-sm-2{
.col-sm-2 {
width: 23.666667%;
}
margin-top: 20px;
......
......@@ -421,6 +421,6 @@ var app = angular.module('adminApp', ['ui.tree', 'ui.bootstrap', 'ui.bootstrap.t
appTranslation.loadAll();
signalRSvc.initialize();
//signalRSvc.initialize();
}
]);
commonModule.controller('orgShareholderStructureController', ['$scope', '$log', '$translate', function ($scope, $log, $translate) {
'use strict';
var initParams = function () {
};
var init = 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'}
]
}
]
};
$('#chart-container').orgchart({
'data': westData,
'nodeContent': 'name',
'direction': 't2b',
'createNode': function ($node, data) {
if (data.wins === "1") {
$node.children('.title').html('<img src="/app-resources/images/A.png" style="width:100%">');
// $node.hide();
}
else {
var rightMenu = '<div class="node-line-right"><span >' + 100 + '%</span>';
$node.append(rightMenu);
$node.children('.title').html('<img src="/app-resources/images/2.png" style="width:100%">');
}
},
'initCompleted': function ($chart) {
// console.log($chart);
// $chart.children().children('.lines').hide();
}
});
};
var thisModuleService = {
initEvents: function () {
},
initWatches: function () {
}
};
(function initialize() {
$log.debug('orgShareholderStructureController.ctor()...');
initParams();
init();
thisModuleService.initWatches();
thisModuleService.initEvents();
})();
}]);
\ No newline at end of file
<div class="org-shareholder-structure-wrapper">
<div id="chart-container" class="chart-container"></div>
</div>
\ No newline at end of file
commonModule.directive('orgShareholderStructure', ['$log', function ($log) {
'use strict';
$log.debug('orgShareholderStructureModal.ctor()...');
return {
restrict: 'E',
templateUrl: '/app/common/controls/org-shareholder-structure/org-shareholder-structure.html' + '?_=' + Math.random(),
replace: true,
controller: 'orgShareholderStructureController',
scope: {
},
link: function (scope, element) {
}
};
}]);
\ No newline at end of file
.org-shareholder-structure-wrapper {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.428571429;
color: #333333;
.chart-container {
float: left;
position: relative;
display: inline-block;
top: 42px;
left: 0;
height: 447px;
width: 100%;
overflow: hidden;
text-align: center;
.orgchart {
background: #fff;
border: 0;
padding: 0;
> .spinner {
color: rgba(255, 255, 0, 0.75);
}
.node {
box-sizing: border-box;
display: inline-block;
position: relative;
margin: 0;
border: 2px dashed transparent;
text-align: center;
width: 220px;
padding-bottom: 0;
border-bottom-width: 0;
padding-top: 0;
height: 50px;
border-top-width: 0;
.title {
background-color: #fff;
color: #000;
height: 50px;
border-radius: 0;
}
.node-line-right {
/*background-color: #fff;*/
z-index: 1;
position: absolute;
top: -10px;
right: 56px;
width: 60px;
}
.content {
border: 0;
background-color: transparent;
color: #fff;
font-weight: bold;
font-size: 1.2em;
position: absolute;
bottom: 2px;
z-index: 0;
width: 178px;
left: 19px;
display: block;
}
:hover {
//background-color: rgba(255, 255, 0, 0.6);
}
.focused {
background-color: rgba(255, 255, 0, 0.6);
}
.edge {
color: rgba(0, 0, 0, 0.6);
}
.spinner {
color: rgba(184, 0, 54, 0.75);
}
}
.t2b .node .content {
position: absolute;
bottom: 138px;
right: 78px;
width: 20px;
border-radius: 0;
}
.edge {
display: none !important;
:hover {
color: #000;
}
}
.lines {
.downLine {
background-color: rgba(17, 6, 6, 0.6);
}
.rightLine {
border-right-color: rgba(17, 6, 6, 0.6);
}
.leftLine {
border-left-color: rgba(17, 6, 6, 0.6);
}
.topLine {
border-top-color: rgba(17, 6, 6, 0.6);;
}
}
table > tr:not(.lines):not(.nodes) {
line-height: 0px;
}
td {
.left, .top, .right {
border-color: #999;
}
> .down {
background-color: #999;
}
}
}
}
}
\ No newline at end of file
......@@ -8,7 +8,7 @@
'name': 'Cayman 2 Limited', 'wins': '2',
'children': [
{
'name': 'BVI 1 Limited', 'wins': '3',
'name': 'BVI 1 Limited', 'wins': '3'
},
{'name': 'Hong Kong 1 Limited', 'wins': '4'}
]
......@@ -23,14 +23,17 @@
'createNode': function ($node, data) {
if (data.wins === "1") {
$node.children('.title').html('<img src="A.png" style="width:100%">');
$node.hide();
// $node.hide();
}
else
else{
var rightMenu = '<div class="node-line-right"><span >' + 100 + '%</span>';
$node.append(rightMenu);
$node.children('.title').html('<img src="2.png" style="width:100%">');
}
},
'initCompleted': function ($chart) {
console.log($chart);
$chart.children().children('.lines').hide();
// console.log($chart);
// $chart.children().children('.lines').hide();
}
});
});
......
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;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.428571429;
color: #333333;
}
.chart-container {
float: left;
position: relative;
display: inline-block;
top: 10px;
left: 0px;
height: 1100px;
width: 50%;
overflow: hidden;
text-align: center;
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;
background: #fff;
border: 0;
padding: 0;
}
.orgchart > .spinner {
color: rgba(255, 255, 0, 0.75);
}
.orgchart>.spinner {
color: rgba(255, 255, 0, 0.75);
.orgchart .node {
box-sizing: border-box;
display: inline-block;
position: relative;
margin: 0;
border: 2px dashed transparent;
text-align: center;
width: 220px;
padding-bottom: 0px;
border-bottom-width: 0px;
padding-top: 0px;
height: 50px;
border-top-width: 0px;
}
.orgchart .node .title {
background-color: #fff;
color: #000;
height: 35px;
border-radius: 0;
background-color: #fff;
color: #000;
height: 50px;
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 .node .node-line-right {
/*background-color: #fff;*/
z-index: 1;
position: absolute;
top: -10px;
right: 56px;
width: 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 .edge {
display: none !important;
}
/*.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;
border: 0;
background-color: transparent;
color: #fff;
font-weight: bold;
font-size: 1.2em;
position: absolute;
bottom: 2px;
z-index: 0;
width: 178px;
left: 19px;
}
.orgchart.r2l .node .content,
.orgchart.l2r .node .content {
position: absolute;
bottom: 138px;
right: 78px;
width: 20px;
border-radius: 0px;
.orgchart.t2b .node .content {
position: absolute;
bottom: 138px;
right: 78px;
width: 20px;
border-radius: 0px;
}
.orgchart .node>.spinner {
color: rgba(184, 0, 54, 0.75);
.orgchart .node > .spinner {
color: rgba(184, 0, 54, 0.75);
}
.orgchart.r2l .node,
.orgchart.l2r .node {
width: 130px;
.orgchart table > tr {
line-height: 0px;
}
.orgchart .node:hover {
background-color: rgba(255, 255, 0, 0.6);
background-color: rgba(255, 255, 0, 0.6);
}
.orgchart .node.focused {
background-color: rgba(255, 255, 0, 0.6);
background-color: rgba(255, 255, 0, 0.6);
}
.orgchart .node .edge {
color: rgba(0, 0, 0, 0.6);
color: rgba(0, 0, 0, 0.6);
}
.orgchart .lines .downLine{
background-color: rgba(17, 6, 6, 0.6);
}
.orgchart .lines .rightLine{
border-right-color: rgba(17, 6, 6, 0.6);
}
.orgchart .lines .leftLine{
border-left-color: rgba(17, 6, 6, 0.6);
}
.orgchart .lines .topLine{
border-top-color: rgba(17, 6, 6, 0.6);;
}
.orgchart .edge:hover {
color: #000;
color: #000;
}
.orgchart td.left,
.orgchart td.top,
.orgchart td.right {
border-color: #999;
border-color: #999;
}
.orgchart td>.down {
background-color: #999;
.orgchart td > .down {
background-color: #999;
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment