(function () { 'use strict'; var app = angular.module('dsfapp'); app.directive('onFinishRenderFilters', function ($timeout) { return { restrict: 'A', link: function (scope, element, attr) { if (scope.$last === true) { $timeout(function () { scope.$emit('ngRepeatFinished', scope); }); } } }; }).directive('bsLvtree1', function ($filter, $timeout, $ocLazyLoad, $compile) { //生成树型结构 var bindtree = function (vtree, model) { angular.forEach(vtree, function (val, key) { val.children = $filter('filter')(model.data, function (fdata) { return fdata.pid == val.id; }); model.treelength++; //默认不显示按钮 val.showbtn = false; //查看最后一级 if (model.xAxis[model.xAxis.length - 1].id == val.xid) { val.islast = true; } else { val.islast = false; } bindtree(val.children, model); }); }; var htmlXaxisbind = function (xaxis, $xAxispanel) { angular.forEach(xaxis, function (xval) { $xAxispanel.append('
' + xval.name + '
'); }); } //树形结构加入dom var htmltreebind = function (vtrees, $treepanel) { angular.forEach(vtrees, function (vtval) { var htmln = '
\r'; htmln += '
\r'; htmln += '\t
\r'; //第一排 htmln += '
'; htmln += '\t\t'; htmln += '
' //第二排 htmln += '
'; if (vtval.islast) { htmln += '\t\t
' } if (!vtval.islast) { htmln += '\t\t' } htmln += '\t\t' + vtval.name + '\r'; htmln += '
'; //第三排 htmln += '
'; htmln += '\t\t'; htmln += '
'; htmln += '\t\t
\r'; htmln += '\t
\r'; htmln += '
\r'; var $tnode = $(htmln), $tpanel; $treepanel.append($tnode); if (vtval.children && vtval.children.length > 0) { $tpanel = $('
'); $tnode.append($tpanel); htmltreebind(vtval.children, $tpanel); } }); }; //画中间线 var drawxAxisLine = function (ctx, xAxis, pheigth) { ctx.beginPath(); ctx.lineWidth = 1; ctx.shadowBlur = 0; //ctx.setLineDash = [15,5]; ctx.strokeStyle = '#000000'; for (var i = 1; i < xAxis.length; i++) { ctx.moveTo(250 * i, 0); ctx.lineTo(250 * i, pheigth); ctx.stroke(); } ctx.closePath(); }; //画对象之间的联线 var drawRectToRectLine = function (ctx, vtreeit) { var $it, $cit; ctx.lineWidth = 1; ctx.shadowBlur = 0; ctx.strokeStyle = 'green'; if (vtreeit.children && vtreeit.children.length > 0) { $it = $('.item_panel[data-id="' + vtreeit.id + '"]'); angular.forEach(vtreeit.children, function (cv, ck) { $cit = $('.item_panel[data-id="' + cv.id + '"]'); ctx.moveTo($it.position().left + $it.width() - 15, $it.position().top + $('.x_axis_div').height() + $it.height() / 2 - 9); ctx.lineTo($cit.position().left, $cit.position().top + $('.x_axis_div').height() + $cit.height() / 2 - 9); ctx.stroke(); drawRectToRectLine(ctx, cv); }); } }; return { restrict: 'EA', require: '?ngModel', templateUrl: '../js/setting/sysduty/lv_tree.html', scope: {ngModel: '='}, controller: function ($scope) { $ocLazyLoad.load('../js/setting/sysduty/sdutyplate.css'); $scope.ngModel.xAxis = $filter('orderBy')($scope.ngModel.xAxis, '+id') || [{id: 0, name: '根节点'}]; //第一层节点 $scope.ngModel.treeNodes = $filter('filter')($scope.ngModel.data, function (val) { return val.xid == $scope.ngModel.xAxis[0].id; }); $scope.ngModel.treelength = 0; $scope.ngModel.treeloadlength = 0; bindtree($scope.ngModel.treeNodes, $scope.ngModel); //btntype:{1:'新增同级',2:'新增子级',3:'删除节点',4:'查看节点'} $scope.btnclick = function (titem, btntype) { if ($scope.ngModel.btnclick) { $scope.ngModel.btnclick(titem, btntype); } }; $scope.loadIncrease = function () { $scope.ngModel.treeloadlength++; }; }, link: function ($scope, $elem, $attrs) { //htmlXaxisbind($scope.ngModel.showxAxis, $elem.find('.x_axis_div')); //开始添加节点 //htmltreebind($scope.ngModel.treeNodes, $elem.find('.tree_div')); //$compile($elem.find('.tree_div'))($scope); $scope.$watch('ngModel.treeloadlength', function () { if ($scope.ngModel.treelength == $scope.ngModel.treeloadlength) { $timeout(function () { //开始画图 var cvs = $elem.find('.dutypanel>canvas')[0]; cvs.width = $elem.find('.dutypanel').width(); cvs.height = $elem.find('.dutypanel').height(); var ctx = cvs.getContext('2d'); drawxAxisLine(ctx, $scope.ngModel.xAxis, cvs.height); ctx.beginPath(); angular.forEach($scope.ngModel.treeNodes, function (tn, tk) { drawRectToRectLine(ctx, tn); }); ctx.closePath(); ctx.save(); }, 50); } }); } } }).controller("sysDutyListCtrl1", function ($scope) { $scope.option = { xAxis: [{id: 0, name: '系统'}, {id: 1, name: '模块'}, {id: 2, name: '应用'}, {id: 3, name: '功能点'}], data: [{id: 'xx01', xid: 0, pid: null, name: '协同办公平台'}, { id: 'xx11', xid: 1, pid: 'xx01', name: '业务支持中心' }, {id: 'xx12', xid: 1, pid: 'xx01', name: '开发易'}, { id: 'xx111', xid: 2, pid: 'xx11', name: '数据修改' }, {id: 'xx112', xid: 2, pid: 'xx11', name: '数据查询'}, {id: 'xx1111', xid: 3, pid: 'xx111', name: '工作台'}, { id: 'xx1112', xid: 3, pid: 'xx111', name: '修改申请' }, {id: 'xx1113', xid: 3, pid: 'xx111', name: '查询修改'} ], canEdit: false, canChecked: false }; }); //$(function () { //var ctx = $('#myCanvas')[0].getContext("2d"); //ctx.strokeStyle = "#0000ff"; //ctx.lineWidth = 1; //ctx.strokeRect(5, 5, 80, 60); //ctx.fillText("Hello World!",10,10); //ctx.save(); //lvTree(option); //}); //function lvTree(option) { // if (!option) { // return; // } // if (option.xAxis) { // var html_lv = '', html_sys = '', html_duty = ''; // //添加标题头 // $.each(option.xAxis, function (i, n) { // html_lv += '
'+ n.name+'
'; // }); // $('.x_axis_div').append(html_lv); // //添加系统 // html_sys += '
'; // $.each(option.xAxis, function (i, n) { // html_sys += '
'; // }); // html_sys += '
'; // $('.x_axis_div').after(html_sys); // TreeItemAppend($('.dutypanel'), 0, option.data); // } //} //function TreeItemAppend($ParentTreeNode,xid,data) { // var htmlTree = ''; // $.each(data, function (i, n) { // if (n.xid == xid) { // htmlTree += '
'; // //treehead // htmlTree += '
' + n.name + '
'; // htmlTree += '
'; // $ParentTreeNode.append(htmlTree); // $.each(data, function (ci, cn) { // if (cn.pid == n.id) { // } // }); // } // }); //} })();