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

add org chart demo -- frank

parent 148af0ad
...@@ -98,6 +98,9 @@ ...@@ -98,6 +98,9 @@
<script type="text/javascript" src="bundles/ivh-treeview.js"></script> <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/ui-select.js"></script>
<script type="text/javascript" src="bundles/spreadio.js"></script> <script type="text/javascript" src="bundles/spreadio.js"></script>
<script type="text/javascript" src="bundles/bOrgchart.js"></script>
<script type="text/javascript" src="bundles/rgbcolor.js"></script>
<script type="text/javascript" src="bundles/canvg.js"></script>
<script type="text/javascript"> <script type="text/javascript">
//window.location.href = '/Home/Admin/#/userDetail/808b7a8c-0265-4497-9adb-6b7a757bd2f2'; //window.location.href = '/Home/Admin/#/userDetail/808b7a8c-0265-4497-9adb-6b7a757bd2f2';
//window.location.href = '/Home/Admin/#/role'; //window.location.href = '/Home/Admin/#/role';
......
...@@ -5,7 +5,6 @@ ...@@ -5,7 +5,6 @@
$scope.expanded = false; $scope.expanded = false;
$scope.showOrgs = true; $scope.showOrgs = true;
$scope.showSingle = false;
$scope.selectNodeCount = 0; $scope.selectNodeCount = 0;
$scope.startDate = new Date(2019, 0, 1); $scope.startDate = new Date(2019, 0, 1);
$scope.endDate = new Date(2019, 11, 31); $scope.endDate = new Date(2019, 11, 31);
...@@ -269,7 +268,6 @@ ...@@ -269,7 +268,6 @@
orgHKService.getSingleOrg(org.id).success(function (data) { orgHKService.getSingleOrg(org.id).success(function (data) {
if ($scope.selectNodeCount > 1) { if ($scope.selectNodeCount > 1) {
$scope.showOrgs = false; $scope.showOrgs = false;
// $scope.showSingle = true;
$(".detail-info").css("display", "block"); $(".detail-info").css("display", "block");
} }
...@@ -649,18 +647,14 @@ ...@@ -649,18 +647,14 @@
$scope.orgShareholdersDatasource = org.orgShareholderDtos; $scope.orgShareholdersDatasource = org.orgShareholderDtos;
$scope.orgSubsidariesDatasource = org.orgSubsidaryDtos; $scope.orgSubsidariesDatasource = org.orgSubsidaryDtos;
$scope.orgDirectorsDatasource = org.orgDirectorDtos; $scope.orgDirectorsDatasource = org.orgDirectorDtos;
$scope.showSingle = true;
getEventsOfCurrentEntity(); getEventsOfCurrentEntity();
// $scope.showSingle = true;
$(".detail-info").css("display", "block"); $(".detail-info").css("display", "block");
// initOrgTree();
}; };
$scope.showAll = function () { $scope.showAll = function () {
$scope.showOrgs = true; $scope.showOrgs = true;
getOrgList(); getOrgList();
$scope.showSingle = false; $(".detail-info").css("display", "none");
$scope.selectCompany = {}; $scope.selectCompany = {};
}; };
...@@ -1281,7 +1275,6 @@ ...@@ -1281,7 +1275,6 @@
selectAllText: $translate.instant('SelectAll') selectAllText: $translate.instant('SelectAll')
}; };
var getEventsOfCurrentEntity = function () { var getEventsOfCurrentEntity = function () {
taxCalendarEventService.getEventByEntityId($scope.selectCompany.id).success(function (res) { taxCalendarEventService.getEventByEntityId($scope.selectCompany.id).success(function (res) {
if (res.result) { if (res.result) {
...@@ -1377,7 +1370,6 @@ ...@@ -1377,7 +1370,6 @@
}; };
}; };
var initOrgTree = function () { var initOrgTree = function () {
OrgChart.templates.myTemplate = Object.assign({}, OrgChart.templates.ana); OrgChart.templates.myTemplate = Object.assign({}, OrgChart.templates.ana);
OrgChart.templates.myTemplate.size = [200, 120]; OrgChart.templates.myTemplate.size = [200, 120];
...@@ -1405,9 +1397,9 @@ ...@@ -1405,9 +1397,9 @@
// }, // },
menu: { menu: {
pdf: {text: "Export PDF"}, pdf: {text: "Export PDF"},
png: {text: "Export PNG"}, png: {text: "Export PNG"}
svg: {text: "Export SVG"}, // svg: {text: "Export SVG"},
csv: {text: "Export CSV"} // csv: {text: "Export CSV"}
}, },
linkBinding: { linkBinding: {
link_field_0: "percent" link_field_0: "percent"
...@@ -1418,55 +1410,42 @@ ...@@ -1418,55 +1410,42 @@
// img_0: "img" // img_0: "img"
}, },
nodes: [ nodes: [
{id: 4, name: "Amber McKenzie", title: "CEO", img: "//balkangraph.com/js/img/1.jpg", percent: "100%"}, {id: 4, name: "Amber McKenzie", percent: "100%"},
{id: 5, name: "Amber McKenzie", title: "CEO", img: "//balkangraph.com/js/img/1.jpg", percent: "100%"}, {id: 5, name: "Amber McKenzie", percent: "100%"},
{id: 6, name: "Amber McKenzie", title: "CEO", img: "//balkangraph.com/js/img/1.jpg", percent: "100%"}, {id: 6, name: "Amber McKenzie", percent: "100%"},
{id: 1, pid: 4, spids: [5, 6], name: "Amber McKenzie", title: "CEO", img: "//balkangraph.com/js/img/1.jpg", percent: "100%"}, {id: 1, pid: 4, spids: [5, 6], name: "Amber McKenzie", percent: "100%"},
{id: 2, pid: 1, name: "Ava Field", title: "IT Manager", img: "//balkangraph.com/js/img/2.jpg", mobile: "0878108255", percent: "100%"}, {id: 2, pid: 1, name: "Ava Field", percent: "100%"},
{id: 3, pid: 1, name: "Peter Stevens", title: "HR Manager", img: "//balkangraph.com/js/img/3.jpg", percent: "100%"} {id: 3, pid: 1, name: "Peter Stevens", percent: "100%"}
], ],
onExportStart: exportStart, onExportStart: exportStart,
onClick: click, onClick: click,
onRedraw:redraw onRedraw: redraw,
mouseScrool: OrgChart.action.none
}); });
}; };
var initialized = false; var initialized = false;
var redraw=function () { var redraw = function () {
if (!initialized) { if (!initialized) {
//第一次在加载时的元素 //第一次在加载时的元素
// $("svg>g[node-id=1]>rect").css("fill","transparent").css("stroke-width",0);
// $("svg>g[node-id=1]>rect").after(circle);
//load '../path/to/your.svg' in the canvas with id = 'canvas'
// canvg('canvas', '../path/to/your.svg')
//
// //load a svg snippet in the canvas with id = 'drawingArea'
// canvg(document.getElementById('drawingArea'), $('svg')[0].outerHTML);
//
// //ignore mouse events and animation
// canvg('canvas', 'file.svg', { ignoreMouse: true, ignoreAnimation: true });
initialized = true; initialized = true;
} }
var polygon = makeSVG('polygon', {"points": '100,0 0,100 200,100', style: "fill:lime;stroke:purple;stroke-width:1", height: 115, width: 250}); var polygon = makeSVG('polygon', {"points": '100,0 0,100 200,100', style: "fill:lime;stroke:purple;stroke-width:1", height: 115, width: 250});
var ellipse = makeSVG('ellipse', {"cx": '100', "cy": "50", "rx": "100", "ry": "50", style: "fill:blue;stroke:purple;stroke-width:2", height: 115, width: 250}); var ellipse = makeSVG('ellipse', {"cx": '100', "cy": "50", "rx": "100", "ry": "50", style: "fill:blue;stroke:purple;stroke-width:2", height: 115, width: 250});
var ellipse1 = makeSVG('ellipse', {"cx": '100', "cy": "50", "rx": "100", "ry": "50", style: "fill:blue;stroke:purple;stroke-width:2", height: 115, width: 250}); // var ellipse1 = makeSVG('ellipse', {"cx": '100', "cy": "50", "rx": "100", "ry": "50", style: "fill:blue;stroke:purple;stroke-width:2", height: 115, width: 250});
var ellipse2 = makeSVG('ellipse', {"cx": '100', "cy": "50", "rx": "100", "ry": "50", style: "fill:blue;stroke:purple;stroke-width:2", height: 115, width: 250}); // var ellipse2 = makeSVG('ellipse', {"cx": '100', "cy": "50", "rx": "100", "ry": "50", style: "fill:blue;stroke:purple;stroke-width:2", height: 115, width: 250});
$("svg>g[node-id=1]>rect").css("fill", "transparent").css("stroke-width", 0).after(polygon); $("svg>g[node-id=1]>rect").css("fill", "transparent").css("stroke-width", 0).after(polygon);
$("svg>g[node-id=1]>rect").after(polygon); // $("svg>g[node-id=1]>rect").after(polygon);
$("svg>g[node-id=4]>rect").after(ellipse); $("svg>g[node-id=4]>rect").after(ellipse);
$("svg>g[node-id=5]>rect").after(ellipse1); // $("svg>g[node-id=5]>rect").after(ellipse1);
$("svg>g[node-id=6]>rect").after(ellipse2); // $("svg>g[node-id=6]>rect").after(ellipse2);
// $("svg>g[node-id=5]").attr("transform","matrix(1, 0, 0, 1, 360, 0)"); // $("svg>g[node-id=5]").attr("transform","matrix(1, 0, 0, 1, 360, 0)");
// $("svg>g[node-id=6]").attr("transform","matrix(1, 0, 0, 1, 590, 0)"); // $("svg>g[node-id=6]").attr("transform","matrix(1, 0, 0, 1, 590, 0)");
$("svg>g[second-link-id='[1][5]']>path").attr("d", "M210,180 L210,160 L440,160 L440,102"); $("svg>g[second-link-id='[1][5]']>path").attr("d", "M210,180 L210,160 L440,160 L440,102");
$("svg>g[second-link-id='[1][6]']>path").attr("d", "M210,180 L210,160 L660,160 L660,102"); $("svg>g[second-link-id='[1][6]']>path").attr("d", "M210,180 L210,160 L660,160 L660,102");
// d: path("M240 180 L240 160 L680 160 L680 120"); // d: path(" M240 180 L240 160 L680 160 L680 120");
}; };
var makeSVG = function (tag, attrs) { var makeSVG = function (tag, attrs) {
...@@ -1488,11 +1467,10 @@ ...@@ -1488,11 +1467,10 @@
return false; return false;
}; };
var click=function(sender, node){ var click = function (sender, node) {
return false; return false;
}; };
$scope.showPage4 = function () { $scope.showPage4 = function () {
initOrgTree(); initOrgTree();
}; };
......
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