Skip to content

T
traffic-front
Commit 148af0ad authored by frank.xa.zhang's avatar frank.xa.zhang
Browse files
Options

add org chart demo -- frank

parent b1710906
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 217 additions and 146 deletions
atms-web/src/main/webapp/Gruntfile.js
View file @ 148af0ad
......@@ -288,6 +288,18 @@ grunt.initConfig({
"Scripts/orgChart/html2canvas.min.js"],
dest: '<%= pkg.bundleTemp %>/orgChart.js'
},
bOrgchart:{
src: ["Scripts/BalkanGraph-OrgChartJS/orgchart.js"],
dest: '<%= pkg.bundleTemp %>/bOrgchart.js'
},
canvg:{
src: ["Scripts/canvg/canvg.min.js"],
dest: '<%= pkg.bundleTemp %>/canvg.js'
},
rgbcolor:{
src: ["Scripts/canvg/rgbcolor.min.js"],
dest: '<%= pkg.bundleTemp %>/rgbcolor.js'
},
mentio: {
src: ["Scripts/mentio.js"],
dest: '<%= pkg.bundleTemp %>/mentio.js'
......
atms-web/src/main/webapp/Scripts/BalkanGraph-OrgChartJS/orgchart.js 0 → 100644
View file @ 148af0ad
This source diff could not be displayed because it is too large. You can view the blob instead.
atms-web/src/main/webapp/Scripts/canvg/canvg.js 0 → 100644
View file @ 148af0ad
This source diff could not be displayed because it is too large. You can view the blob instead.
atms-web/src/main/webapp/Scripts/canvg/canvg.min.js 0 → 100644
View file @ 148af0ad
This diff is collapsed.
atms-web/src/main/webapp/Scripts/canvg/rgbcolor.min.js 0 → 100644
View file @ 148af0ad
!function(e){function f(e){this.ok=!1,"#"==e.charAt(0)&&(e=e.substr(1,6)),e=(e=e.replace(/ /g,"")).toLowerCase();var a={aliceblue:"f0f8ff",antiquewhite:"faebd7",aqua:"00ffff",aquamarine:"7fffd4",azure:"f0ffff",beige:"f5f5dc",bisque:"ffe4c4",black:"000000",blanchedalmond:"ffebcd",blue:"0000ff",blueviolet:"8a2be2",brown:"a52a2a",burlywood:"deb887",cadetblue:"5f9ea0",chartreuse:"7fff00",chocolate:"d2691e",coral:"ff7f50",cornflowerblue:"6495ed",cornsilk:"fff8dc",crimson:"dc143c",cyan:"00ffff",darkblue:"00008b",darkcyan:"008b8b",darkgoldenrod:"b8860b",darkgray:"a9a9a9",darkgreen:"006400",darkkhaki:"bdb76b",darkmagenta:"8b008b",darkolivegreen:"556b2f",darkorange:"ff8c00",darkorchid:"9932cc",darkred:"8b0000",darksalmon:"e9967a",darkseagreen:"8fbc8f",darkslateblue:"483d8b",darkslategray:"2f4f4f",darkturquoise:"00ced1",darkviolet:"9400d3",deeppink:"ff1493",deepskyblue:"00bfff",dimgray:"696969",dodgerblue:"1e90ff",feldspar:"d19275",firebrick:"b22222",floralwhite:"fffaf0",forestgreen:"228b22",fuchsia:"ff00ff",gainsboro:"dcdcdc",ghostwhite:"f8f8ff",gold:"ffd700",goldenrod:"daa520",gray:"808080",green:"008000",greenyellow:"adff2f",honeydew:"f0fff0",hotpink:"ff69b4",indianred:"cd5c5c",indigo:"4b0082",ivory:"fffff0",khaki:"f0e68c",lavender:"e6e6fa",lavenderblush:"fff0f5",lawngreen:"7cfc00",lemonchiffon:"fffacd",lightblue:"add8e6",lightcoral:"f08080",lightcyan:"e0ffff",lightgoldenrodyellow:"fafad2",lightgrey:"d3d3d3",lightgreen:"90ee90",lightpink:"ffb6c1",lightsalmon:"ffa07a",lightseagreen:"20b2aa",lightskyblue:"87cefa",lightslateblue:"8470ff",lightslategray:"778899",lightsteelblue:"b0c4de",lightyellow:"ffffe0",lime:"00ff00",limegreen:"32cd32",linen:"faf0e6",magenta:"ff00ff",maroon:"800000",mediumaquamarine:"66cdaa",mediumblue:"0000cd",mediumorchid:"ba55d3",mediumpurple:"9370d8",mediumseagreen:"3cb371",mediumslateblue:"7b68ee",mediumspringgreen:"00fa9a",mediumturquoise:"48d1cc",mediumvioletred:"c71585",midnightblue:"191970",mintcream:"f5fffa",mistyrose:"ffe4e1",moccasin:"ffe4b5",navajowhite:"ffdead",navy:"000080",oldlace:"fdf5e6",olive:"808000",olivedrab:"6b8e23",orange:"ffa500",orangered:"ff4500",orchid:"da70d6",palegoldenrod:"eee8aa",palegreen:"98fb98",paleturquoise:"afeeee",palevioletred:"d87093",papayawhip:"ffefd5",peachpuff:"ffdab9",peru:"cd853f",pink:"ffc0cb",plum:"dda0dd",powderblue:"b0e0e6",purple:"800080",red:"ff0000",rosybrown:"bc8f8f",royalblue:"4169e1",saddlebrown:"8b4513",salmon:"fa8072",sandybrown:"f4a460",seagreen:"2e8b57",seashell:"fff5ee",sienna:"a0522d",silver:"c0c0c0",skyblue:"87ceeb",slateblue:"6a5acd",slategray:"708090",snow:"fffafa",springgreen:"00ff7f",steelblue:"4682b4",tan:"d2b48c",teal:"008080",thistle:"d8bfd8",tomato:"ff6347",turquoise:"40e0d0",violet:"ee82ee",violetred:"d02090",wheat:"f5deb3",white:"ffffff",whitesmoke:"f5f5f5",yellow:"ffff00",yellowgreen:"9acd32"};for(var r in a)e==r&&(e=a[r]);for(var t=[{re:/^rgb\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\)$/,example:["rgb(123, 234, 45)","rgb(255,234,245)"],process:function(e){return[parseInt(e[1]),parseInt(e[2]),parseInt(e[3])]}},{re:/^(\w{2})(\w{2})(\w{2})$/,example:["#00ff00","336699"],process:function(e){return[parseInt(e[1],16),parseInt(e[2],16),parseInt(e[3],16)]}},{re:/^(\w{1})(\w{1})(\w{1})$/,example:["#fb0","f0f"],process:function(e){return[parseInt(e[1]+e[1],16),parseInt(e[2]+e[2],16),parseInt(e[3]+e[3],16)]}}],d=0;d<t.length;d++){var n=t[d].re,i=t[d].process,l=n.exec(e);l&&(channels=i(l),this.r=channels[0],this.g=channels[1],this.b=channels[2],this.ok=!0)}this.r=this.r<0||isNaN(this.r)?0:this.r>255?255:this.r,this.g=this.g<0||isNaN(this.g)?0:this.g>255?255:this.g,this.b=this.b<0||isNaN(this.b)?0:this.b>255?255:this.b,this.toRGB=function(){return"rgb("+this.r+", "+this.g+", "+this.b+")"},this.toHex=function(){var e=this.r.toString(16),f=this.g.toString(16),a=this.b.toString(16);return 1==e.length&&(e="0"+e),1==f.length&&(f="0"+f),1==a.length&&(a="0"+a),"#"+e+f+a},this.getHelpXML=function(){for(var e=new Array,r=0;r<t.length;r++)for(var d=t[r].example,n=0;n<d.length;n++)e[e.length]=d[n];for(var i in a)e[e.length]=i;var l=document.createElement("ul");l.setAttribute("id","rgbcolor-examples");for(r=0;r<e.length;r++)try{var o=document.createElement("li"),s=new f(e[r]),c=document.createElement("div");c.style.cssText="margin: 3px; border: 1px solid black; background:"+s.toHex()+"; color:"+s.toHex(),c.appendChild(document.createTextNode("test"));var b=document.createTextNode(" "+e[r]+" -> "+s.toRGB()+" -> "+s.toHex());o.appendChild(c),o.appendChild(b),l.appendChild(o)}catch(e){}return l}}"undefined"!=typeof define&&define.amd?define(function(){return f}):"undefined"!=typeof module&&module.exports&&(module.exports=f),e.RGBColor=f}("undefined"!=typeof window?window:this);
\ No newline at end of file
atms-web/src/main/webapp/Scripts/canvg/stackblur.min.js 0 → 100644
View file @ 148af0ad
!function(a){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=a();else if("function"==typeof define&&define.amd)define([],a);else{var b;b="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,b.StackBlur=a()}}(function(){return function a(b,c,d){function e(g,h){if(!c[g]){if(!b[g]){var i="function"==typeof require&&require;if(!h&&i)return i(g,!0);if(f)return f(g,!0);var j=new Error("Cannot find module '"+g+"'");throw j.code="MODULE_NOT_FOUND",j}var k=c[g]={exports:{}};b[g][0].call(k.exports,function(a){var c=b[g][1][a];return e(c?c:a)},k,k.exports,a,b,c,d)}return c[g].exports}for(var f="function"==typeof require&&require,g=0;g<d.length;g++)e(d[g]);return e}({1:[function(a,b,c){function d(a,b,c,d){if("string"==typeof a)var a=document.getElementById(a);else if("undefined"!=typeof HTMLImageElement&&!a instanceof HTMLImageElement)return;var e=a.naturalWidth,g=a.naturalHeight;if("string"==typeof b)var b=document.getElementById(b);else if("undefined"!=typeof HTMLCanvasElement&&!b instanceof HTMLCanvasElement)return;b.style.width=e+"px",b.style.height=g+"px",b.width=e,b.height=g;var i=b.getContext("2d");i.clearRect(0,0,e,g),i.drawImage(a,0,0),isNaN(c)||c<1||(d?f(b,0,0,e,g,c):h(b,0,0,e,g,c))}function e(a,b,c,d,e){if("string"==typeof a)var a=document.getElementById(a);else if("undefined"!=typeof HTMLCanvasElement&&!a instanceof HTMLCanvasElement)return;var f,g=a.getContext("2d");try{try{f=g.getImageData(b,c,d,e)}catch(h){throw new Error("unable to access local image data: "+h)}}catch(h){throw new Error("unable to access image data: "+h)}return f}function f(a,b,c,d,f,h){if(!(isNaN(h)||h<1)){h|=0;var i=e(a,b,c,d,f);i=g(i,b,c,d,f,h),a.getContext("2d").putImageData(i,b,c)}}function g(a,b,c,d,e,f){var g,h,i,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H=a.data,I=f+f+1,J=d-1,K=e-1,L=f+1,M=L*(L+1)/2,N=new j,O=N;for(i=1;i<I;i++)if(O=O.next=new j,i==L)var P=O;O.next=N;var Q=null,R=null;p=o=0;var S=k[f],T=l[f];for(h=0;h<e;h++){for(y=z=A=B=q=r=s=t=0,u=L*(C=H[o]),v=L*(D=H[o+1]),w=L*(E=H[o+2]),x=L*(F=H[o+3]),q+=M*C,r+=M*D,s+=M*E,t+=M*F,O=N,i=0;i<L;i++)O.r=C,O.g=D,O.b=E,O.a=F,O=O.next;for(i=1;i<L;i++)m=o+((J<i?J:i)<<2),q+=(O.r=C=H[m])*(G=L-i),r+=(O.g=D=H[m+1])*G,s+=(O.b=E=H[m+2])*G,t+=(O.a=F=H[m+3])*G,y+=C,z+=D,A+=E,B+=F,O=O.next;for(Q=N,R=P,g=0;g<d;g++)H[o+3]=F=t*S>>T,0!=F?(F=255/F,H[o]=(q*S>>T)*F,H[o+1]=(r*S>>T)*F,H[o+2]=(s*S>>T)*F):H[o]=H[o+1]=H[o+2]=0,q-=u,r-=v,s-=w,t-=x,u-=Q.r,v-=Q.g,w-=Q.b,x-=Q.a,m=p+((m=g+f+1)<J?m:J)<<2,y+=Q.r=H[m],z+=Q.g=H[m+1],A+=Q.b=H[m+2],B+=Q.a=H[m+3],q+=y,r+=z,s+=A,t+=B,Q=Q.next,u+=C=R.r,v+=D=R.g,w+=E=R.b,x+=F=R.a,y-=C,z-=D,A-=E,B-=F,R=R.next,o+=4;p+=d}for(g=0;g<d;g++){for(z=A=B=y=r=s=t=q=0,o=g<<2,u=L*(C=H[o]),v=L*(D=H[o+1]),w=L*(E=H[o+2]),x=L*(F=H[o+3]),q+=M*C,r+=M*D,s+=M*E,t+=M*F,O=N,i=0;i<L;i++)O.r=C,O.g=D,O.b=E,O.a=F,O=O.next;for(n=d,i=1;i<=f;i++)o=n+g<<2,q+=(O.r=C=H[o])*(G=L-i),r+=(O.g=D=H[o+1])*G,s+=(O.b=E=H[o+2])*G,t+=(O.a=F=H[o+3])*G,y+=C,z+=D,A+=E,B+=F,O=O.next,i<K&&(n+=d);for(o=g,Q=N,R=P,h=0;h<e;h++)m=o<<2,H[m+3]=F=t*S>>T,F>0?(F=255/F,H[m]=(q*S>>T)*F,H[m+1]=(r*S>>T)*F,H[m+2]=(s*S>>T)*F):H[m]=H[m+1]=H[m+2]=0,q-=u,r-=v,s-=w,t-=x,u-=Q.r,v-=Q.g,w-=Q.b,x-=Q.a,m=g+((m=h+L)<K?m:K)*d<<2,q+=y+=Q.r=H[m],r+=z+=Q.g=H[m+1],s+=A+=Q.b=H[m+2],t+=B+=Q.a=H[m+3],Q=Q.next,u+=C=R.r,v+=D=R.g,w+=E=R.b,x+=F=R.a,y-=C,z-=D,A-=E,B-=F,R=R.next,o+=d}return a}function h(a,b,c,d,f,g){if(!(isNaN(g)||g<1)){g|=0;var h=e(a,b,c,d,f);h=i(h,b,c,d,f,g),a.getContext("2d").putImageData(h,b,c)}}function i(a,b,c,d,e,f){var g,h,i,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D=a.data,E=f+f+1,F=d-1,G=e-1,H=f+1,I=H*(H+1)/2,J=new j,K=J;for(i=1;i<E;i++)if(K=K.next=new j,i==H)var L=K;K.next=J;var M=null,N=null;p=o=0;var O=k[f],P=l[f];for(h=0;h<e;h++){for(w=x=y=q=r=s=0,t=H*(z=D[o]),u=H*(A=D[o+1]),v=H*(B=D[o+2]),q+=I*z,r+=I*A,s+=I*B,K=J,i=0;i<H;i++)K.r=z,K.g=A,K.b=B,K=K.next;for(i=1;i<H;i++)m=o+((F<i?F:i)<<2),q+=(K.r=z=D[m])*(C=H-i),r+=(K.g=A=D[m+1])*C,s+=(K.b=B=D[m+2])*C,w+=z,x+=A,y+=B,K=K.next;for(M=J,N=L,g=0;g<d;g++)D[o]=q*O>>P,D[o+1]=r*O>>P,D[o+2]=s*O>>P,q-=t,r-=u,s-=v,t-=M.r,u-=M.g,v-=M.b,m=p+((m=g+f+1)<F?m:F)<<2,w+=M.r=D[m],x+=M.g=D[m+1],y+=M.b=D[m+2],q+=w,r+=x,s+=y,M=M.next,t+=z=N.r,u+=A=N.g,v+=B=N.b,w-=z,x-=A,y-=B,N=N.next,o+=4;p+=d}for(g=0;g<d;g++){for(x=y=w=r=s=q=0,o=g<<2,t=H*(z=D[o]),u=H*(A=D[o+1]),v=H*(B=D[o+2]),q+=I*z,r+=I*A,s+=I*B,K=J,i=0;i<H;i++)K.r=z,K.g=A,K.b=B,K=K.next;for(n=d,i=1;i<=f;i++)o=n+g<<2,q+=(K.r=z=D[o])*(C=H-i),r+=(K.g=A=D[o+1])*C,s+=(K.b=B=D[o+2])*C,w+=z,x+=A,y+=B,K=K.next,i<G&&(n+=d);for(o=g,M=J,N=L,h=0;h<e;h++)m=o<<2,D[m]=q*O>>P,D[m+1]=r*O>>P,D[m+2]=s*O>>P,q-=t,r-=u,s-=v,t-=M.r,u-=M.g,v-=M.b,m=g+((m=h+H)<G?m:G)*d<<2,q+=w+=M.r=D[m],r+=x+=M.g=D[m+1],s+=y+=M.b=D[m+2],M=M.next,t+=z=N.r,u+=A=N.g,v+=B=N.b,w-=z,x-=A,y-=B,N=N.next,o+=d}return a}function j(){this.r=0,this.g=0,this.b=0,this.a=0,this.next=null}var k=[512,512,456,512,328,456,335,512,405,328,271,456,388,335,292,512,454,405,364,328,298,271,496,456,420,388,360,335,312,292,273,512,482,454,428,405,383,364,345,328,312,298,284,271,259,496,475,456,437,420,404,388,374,360,347,335,323,312,302,292,282,273,265,512,497,482,468,454,441,428,417,405,394,383,373,364,354,345,337,328,320,312,305,298,291,284,278,271,265,259,507,496,485,475,465,456,446,437,428,420,412,404,396,388,381,374,367,360,354,347,341,335,329,323,318,312,307,302,297,292,287,282,278,273,269,265,261,512,505,497,489,482,475,468,461,454,447,441,435,428,422,417,411,405,399,394,389,383,378,373,368,364,359,354,350,345,341,337,332,328,324,320,316,312,309,305,301,298,294,291,287,284,281,278,274,271,268,265,262,259,257,507,501,496,491,485,480,475,470,465,460,456,451,446,442,437,433,428,424,420,416,412,408,404,400,396,392,388,385,381,377,374,370,367,363,360,357,354,350,347,344,341,338,335,332,329,326,323,320,318,315,312,310,307,304,302,299,297,294,292,289,287,285,282,280,278,275,273,271,269,267,265,263,261,259],l=[9,11,12,13,13,14,14,15,15,15,15,16,16,16,16,17,17,17,17,17,17,17,18,18,18,18,18,18,18,18,18,19,19,19,19,19,19,19,19,19,19,19,19,19,19,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24];b.exports={image:d,canvasRGBA:f,canvasRGB:h,imageDataRGBA:g,imageDataRGB:i}},{}]},{},[1])(1)});
\ No newline at end of file
atms-web/src/main/webapp/WEB-INF/templates/index.html
View file @ 148af0ad
......@@ -103,6 +103,10 @@
<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="/dist2/orgchart.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" src="bundles/jsword.js"></script>
<script type="text/javascript" src="bundles/angular-file-upload.js"></script>
......@@ -125,7 +129,8 @@
<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="/Scripts/canvg/rgbcolor.min.js"></script>-->
<!--<script src="/Scripts/canvg/canvg.js"></script>-->
<!--<script type="text/javascript" src="bundles/hubs.js">-->
<script type="text/javascript">
GC.Spread.Sheets.LicenseKey = constant.regesterInformation.userKey;
......
atms-web/src/main/webapp/app/admin/infrastructure/organizationFullChart/organization-full-chart.ctrl.js
View file @ 148af0ad
infrastructureModule.controller('organizationFullChartController', ['$scope','$log', function ($scope,$log) {
infrastructureModule.controller('organizationFullChartController', ['$scope','$log','$timeout', function ($scope,$log,$timeout) {
'use strict';
(function initialize() {
$log.debug('organizationFullChartController.ctor()...');
$scope.chart = new OrgChart(document.getElementById("tree"), {
template: "ana",
enableSearch: false,
// nodeMenu: {
// add: {text: "Add"},
// edit: {text: "Edit"},
// remove: {text: "Remove"}
// },
// menu: {
// pdf: {text: "Export PDF"},
// png: {text: "Export PNG"},
// svg: {text: "Export SVG"},
// csv: {text: "Export CSV"}
// },
linkBinding: {
link_field_0: "percent"
},
nodeBinding: {
field_0: "name"
// field_1: "title",
// img_0: "img"
},
nodes: [
{id: 4, name: "Amber McKenzie", title: "CEO", img: "//balkangraph.com/js/img/1.jpg", percent: "100%"},
{id: 5, name: "Amber McKenzie", title: "CEO", img: "//balkangraph.com/js/img/1.jpg", percent: "100%"},
{id: 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", title: "CEO", img: "//balkangraph.com/js/img/1.jpg", percent: "100%"},
{id: 2, pid: 1, name: "Ava Field", title: "IT Manager", img: "//balkangraph.com/js/img/2.jpg", mobile: "0878108255", percent: "100%"},
{id: 3, pid: 1, name: "Peter Stevens", title: "HR Manager", img: "//balkangraph.com/js/img/3.jpg", percent: "100%"}
],
// onExportStart: exportStart
});
$scope.showIt = false;
$timeout(function () {
// $("#divA").css("display","block");
$scope.showIt = true;
$scope.showIt = true;
},10*1000);
})();
}
......
atms-web/src/main/webapp/app/admin/infrastructure/organizationFullChart/organization-full-chart.html
View file @ 148af0ad
<div class="organization-full-chart-mapper">
<div id="tree" class="chart-container"></div>
<canvas id="canvas" width="1000px" height="600px" style="display:none"></canvas>
</div>
\ No newline at end of file
atms-web/src/main/webapp/app/admin/infrastructure/organizationManage/organization-manage.ctrl.js
View file @ 148af0ad
......@@ -269,7 +269,9 @@
orgHKService.getSingleOrg(org.id).success(function (data) {
if ($scope.selectNodeCount > 1) {
$scope.showOrgs = false;
$scope.showSingle = true;
// $scope.showSingle = true;
$(".detail-info").css("display", "block");
}
$scope.selectNodeCount++;
$scope.selectCompany = data;
......@@ -650,6 +652,9 @@
$scope.showSingle = true;
getEventsOfCurrentEntity();
// $scope.showSingle = true;
$(".detail-info").css("display", "block");
// initOrgTree();
};
$scope.showAll = function () {
......@@ -1373,6 +1378,125 @@
};
var initOrgTree = function () {
OrgChart.templates.myTemplate = Object.assign({}, OrgChart.templates.ana);
OrgChart.templates.myTemplate.size = [200, 120];
OrgChart.templates.myTemplate.node = '<rect width="200" height="100" style="fill:rgb(35,143,159);stroke-width:3px;stroke:rgba(153,10,10,0.01)" />';
OrgChart.templates.myTemplate.field_0 = '<text style="font-size: 10px;" fill="#ffffff" x="100" y="90" text-anchor="middle">{val}</text>';
OrgChart.templates.myTemplate.link = '<path stroke="#686868" stroke-width="1px" fill="none" link-id="[{id}][{child-id}]" d="M{xa},{ya} L{xb},{yb} {xc},{yc} {xd},{yd}" />';
// OrgChart.templates.myTemplate.secondlink = '<path stroke="#686868" stroke-width="1px" fill="none" link-id="[{id}][{child-id}]" d="M{xa},{ya} L{xb},{yb} {xc},{yc} {xd},{yd}" />';
OrgChart.templates.myTemplate.plus =
'<rect x="0" y="0" width="36" height="36" rx="12" ry="12" fill="#2E2E2E" stroke="#aeaeae" stroke-width="1"></rect>'
+ '<line x1="4" y1="18" x2="32" y2="18" stroke-width="1" stroke="#aeaeae"></line>'
+ '<line x1="18" y1="4" x2="18" y2="32" stroke-width="1" stroke="#aeaeae"></line>';
OrgChart.templates.myTemplate.minus =
'<rect x="0" y="0" width="36" height="36" rx="12" ry="12" fill="#2E2E2E" stroke="#aeaeae" stroke-width="1"></rect>'
+ '<line x1="4" y1="18" x2="32" y2="18" stroke-width="1" stroke="#aeaeae"></line>';
$scope.chart = new OrgChart(document.getElementById("tree"), {
template: "myTemplate",
enableSearch: false,
// nodeMenu: {
// add: {text: "Add"},
// edit: {text: "Edit"},
// remove: {text: "Remove"}
// },
menu: {
pdf: {text: "Export PDF"},
png: {text: "Export PNG"},
svg: {text: "Export SVG"},
csv: {text: "Export CSV"}
},
linkBinding: {
link_field_0: "percent"
},
nodeBinding: {
field_0: "name"
// field_1: "title",
// img_0: "img"
},
nodes: [
{id: 4, name: "Amber McKenzie", title: "CEO", img: "//balkangraph.com/js/img/1.jpg", percent: "100%"},
{id: 5, name: "Amber McKenzie", title: "CEO", img: "//balkangraph.com/js/img/1.jpg", percent: "100%"},
{id: 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", title: "CEO", img: "//balkangraph.com/js/img/1.jpg", percent: "100%"},
{id: 2, pid: 1, name: "Ava Field", title: "IT Manager", img: "//balkangraph.com/js/img/2.jpg", mobile: "0878108255", percent: "100%"},
{id: 3, pid: 1, name: "Peter Stevens", title: "HR Manager", img: "//balkangraph.com/js/img/3.jpg", percent: "100%"}
],
onExportStart: exportStart,
onClick: click,
onRedraw:redraw
});
};
var initialized = false;
var redraw=function () {
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;
}
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 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});
$("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=4]>rect").after(ellipse);
$("svg>g[node-id=5]>rect").after(ellipse1);
$("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=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][6]']>path").attr("d", "M210,180 L210,160 L660,160 L660,102");
// d: path("M240 180 L240 160 L680 160 L680 120");
};
var makeSVG = function (tag, attrs) {
var el = document.createElementNS('http://www.w3.org/2000/svg', tag);
for (var k in attrs)
el.setAttribute(k, attrs[k]);
return el;
};
var exportStart = function (sender, options, svg) {
var svg = $('svg')[0].outerHTML;
console.log("svg", svg);
canvg(document.getElementById('canvas'), svg);
var canvas = document.getElementById("canvas");
var a = document.createElement("a");
a.download = "fallback.png";
a.href = canvas.toDataURL("image/png");
a.click();
return false;
};
var click=function(sender, node){
return false;
};
$scope.showPage4 = function () {
initOrgTree();
};
(function initialize() {
$log.debug('organizationManageController.ctor()...');
$scope.title = $translate.instant('OrganizationManageTitle');
......
atms-web/src/main/webapp/app/admin/infrastructure/organizationManage/organization-manage.html
View file @ 148af0ad
......@@ -40,7 +40,9 @@
</div>
<div class="org-right-container" id="org-right-container" style="margin-bottom: 0px; height:100%;">
<div class="org-list" ng-if="showOrgs">
<div class="org-list" ng-show="showOrgs">
<div class="org-title">
<div class="company-detail-left">
<i class="material-icons" style="color: #757575; font-size: 48px;">business</i>
......@@ -67,12 +69,13 @@
</button>
</div>
<div class="dx-viewport grid-container">
<div id="orgGridContainer" dx-data-grid="orgUserGridOptionsA" style="margin-top: -9px;">
</div>
</div>
</div>
</div>
<div class="detail-info" ng-if="showSingle">
<div class="detail-info" style="display: none">
<div class="company-detail">
<div class="org-title">
<div class="company-detail-left">
......@@ -102,7 +105,7 @@
<md-nav-item md-nav-click="goto('page3')" name="page3">
{{'ComplianceInfo' | translate}}
</md-nav-item>
<md-nav-item md-nav-click="goto('page4')" name="page4">
<md-nav-item md-nav-click="goto('page4')" ng-click="showPage4()" name="page4">
{{'ChartInfo' | translate}}
</md-nav-item>
</md-nav-bar>
......@@ -361,7 +364,9 @@
<div ng-show="currentNavItem==='page4'" class="org-chart-info">
<div class="org-chart-info-mapper">
<div class="org-chart-info-top">
<org-shareholder-structure></org-shareholder-structure>
<!--<org-shareholder-structure></org-shareholder-structure>-->
<div id="tree" class="chart-container"></div>
<canvas id="canvas" width="1000px" height="600px" style="display:none"></canvas>
</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">
......
atms-web/src/main/webapp/app/common/controls/org-shareholder-structure/org-shareholder-structure.html
View file @ 148af0ad
<div class="org-shareholder-structure-wrapper">
<div id="chart-container" class="chart-container"></div>
<div id="tree" class="chart-container"></div>
<canvas id="canvas" width="1000px" height="600px" style="display:none"></canvas>
</div>
\ No newline at end of file
atms-web/src/main/webapp/app/common/controls/org-shareholder-structure/org-shareholder-structure.less
View file @ 148af0ad
@line-color: rgba(17, 6, 6, 0.6);
.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;
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
overflow: hidden;
font-family: Helvetica;
#chart-container {
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 {
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 {
display: none !important;
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: @line-color;
}
.rightLine {
border-right-color: @line-color;
}
.leftLine {
border-left-color: @line-color;
}
.topLine {
border-top-color: @line-color;
}
}
table > tr:not(.lines):not(.nodes) {
line-height: 0px;
}
td {
.left, .top, .right {
border-color: #999;
}
> .down {
background-color: #999;
}
}
}
height: 100%;
}
}
\ No newline at end of file
atms-web/src/main/webapp/dist2/index.html
View file @ 148af0ad
......@@ -3,20 +3,20 @@
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="https://fonts.googleapis.com/css?family=Gochi+Hand" rel="stylesheet">
<!--<link href="https://fonts.googleapis.com/css?family=Gochi+Hand" rel="stylesheet">-->
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div id="tree"></div>
<canvas id="canvas" width="1000px" height="600px"></canvas>
<canvas id="canvas" width="1000px" height="600px" style="display: none;"></canvas>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<!-- Required to convert named colors to RGB -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/canvg/1.4/rgbcolor.min.js"></script>
<!-- Optional if you want blur -->
<script src="https://cdn.jsdelivr.net/npm/stackblur-canvas@^1/dist/stackblur.min.js"></script>
<!--<script src="https://cdn.jsdelivr.net/npm/stackblur-canvas@^1/dist/stackblur.min.js"></script>-->
<!-- Main canvg code -->
<script src="https://cdn.jsdelivr.net/npm/canvg/dist/browser/canvg.min.js"></script>
<script src="./d3.min.js"></script>
<!--<script src="./d3.min.js"></script>-->
<script src="./orgchart.js"></script>
<script src="./script.js"></script>
</body>
......
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