app.controller('newtreemap', ["$scope", "$rootScope", "$sce", "$http", "$modal", '$parse', '$injector', "$aside", '$state', "$stateParams", "toaster", "SweetAlert", 'Restangular', "api_cmdb", "api_configure_form", "api_bpm_data", "api_configure_data", function($scope, $rootScope, $sce, $http, $modal, $parse, $injector, $aside, $state, $stateParams, toaster, SweetAlert, Restangular, api_cmdb, api_configure_form, api_bpm_data, api_configure_data) { var container = document.getElementById('mynetwork'); var network = null; var newNodeArr = []; var options; var nodesArr = []; var edgesArr = []; var nodes_data; var edges_data; var thisnode = {}; $scope.cmdbtype = {}; var open = false; $scope.guanxi = {}; $scope.openedge = {}; $scope.textheight = {} $scope.opennode = {}; $scope.cmdbisopen = false; var connectedNum = '子节点数:'; // window.onload = function() {  changeDivHeight();   }      changeDivHeight();          window.onresize = function() {  changeDivHeight(); }               function  changeDivHeight() {                                var  h  =  document.documentElement.clientHeight; //获取页面可见高度   $scope.textheight = { "height": h - 46 + "px" };   } //属性弹框 $rootScope.toggle('off-sidebar'); //新增关系弹框 function showModal(action, event) { var modalInstance = $aside.open({ templateUrl: 'cmdbmapEvent.html', placement: 'right', size: 'sm', backdrop: false, controller: function($scope, $modalInstance) { $scope.$modalInstance = $modalInstance; $scope.action = action; $scope.event = event; $scope.cancel = function() { $modalInstance.dismiss('cancel'); }; $scope.deleteEvent = function() { $modalInstance.close($scope.event, $scope.event); }; } }); modalInstance.result.then(function(selectedEvent, action) { $scope.eventDeleted(selectedEvent); }); } $scope.eventClicked = function(event) { showModal('Clicked', event); }; // $scope.eventClicked(); $scope.addEvent = function() { $scope.events.push({ title: 'New Event', starts_at: new Date(y, m, d, 10, 0), ends_at: new Date(y, m, d, 11, 0), type: 'job' }); $scope.eventEdited($scope.events[$scope.events.length - 1]); }; $scope.eventEdited = function(event) { showModal('Edited', event); }; //修改关系 $scope.editId = -1; $scope.setEditId = function(pid) { $scope.editId = pid; }; //新增关系 $scope.key = {}; // $scope.linktypeOptions = scope.linktypeOptions; $scope.guanxidata = [ { id: 0, name: '连接', value: 'link' }, { id: 1, name: '安装部署', value: 'installon' }, { id: 2, name: '归属', value: 'blong' }, { id: 3, name: '使用', value: 'use' }, { id: 4, name: '互备', value: 'backupbetw' }, { id: 5, name: '主备', value: 'backupown' } ]; $scope.ok = function(key) { $modalInstance.close(key); $scope.guanxi = {}; }; $scope.openModal = function(size, modal) { var modalInstance = $modal.open({ templateUrl: 'assets/views/customform/tpl/cmdb/add_cmdb.html', controller: function($scope, i18nService, $modalInstance, api_configure_data, api_configure_form, api_cmdb) { $scope.langs = i18nService.getAllLangs(); $scope.lang = 'zh-cn'; i18nService.setCurrentLang($scope.lang); $scope.title = "资产列表"; $scope.gridOptions = {}; $scope.gridOptions.data = 'myDatatwo'; $scope.gridOptions.enableColumnResizing = true; $scope.gridOptions.enableFiltering = false; $scope.gridOptions.enableGridMenu = false; $scope.gridOptions.showGridFooter = true; $scope.gridOptions.showColumnFooter = false; $scope.gridOptions.fastWatch = true; $scope.gridOptions.useExternalFiltering = true; $scope.gridOptions.useExternalPagination = true; $scope.gridOptions.paginationPageSizes = [10, 20, 50, 100]; $scope.gridOptions.paginationPageSize = 10; $scope.gridOptions.multiSelect = false; $scope.gridOptions.rowIdentity = function(row) { return row.id; }; $scope.gridOptions.getRowIdentity = function(row) { return row.id; }; // $scope.gridOptions.rowTemplate = "
"; $scope.gridOptions.columnDefs = [ { name: 'item', displayName: '序号', width: 80, enableFiltering: false }, { name: 'uuid', displayName: '内部编号', width: 170 }, { name: 'props.hw_mingcheng', displayName: '资产名称', width: 110 }, // { name: 'props.hw_cifilterClassic', displayName: '资产类型', width: 130, enableFiltering: false }, // { name: 'type', displayName: '资产型号', width: 100, enableFiltering: false }, { name: 'props.hw_state', displayName: '资产状态', width: 130, enableFiltering: false }, { name: 'props.hwnw_area', displayName: '资产地点', width: 130, enableFiltering: false }, { name: 'createtime', displayName: '申请时间', enableFiltering: false , cellTemplate: '
{{grid.appScope.transferTime(row.entity.createtime)}}
' } ]; // $scope.selectButtonClick var defaultFilterData = { // "assignee":2, // "sign":"basehwitndl", // "applicationForm": { "hw_state": "在线" }, "idx": 0, "sum": 10 }; $scope.transferTime = function(time) { return moment(time).format('YYYY-MM-DD HH:mm'); } $scope.memoryfilterData = { // "assignee":2, // "sign":"basehwitndl", // "applicationForm": { "hw_state": "在线" }, "idx": 0, "sum": 10 } $scope.refreshData = function(style, filterData) { if (angular.isUndefined(filterData)) { filterData = defaultFilterData; } $scope.myDatatwo = []; // $scope.gridOptions['sum']=filterData.sum; api_cmdb.query(filterData).then(function(data) { // $scope.callsPending--; var filterData = $scope.memoryfilterData; var myDatatwo = Restangular.stripRestangular(data); $scope.gridOptions['totalItems'] = data.total; for (var i = 0; i < myDatatwo.data.node.length; i++) { myDatatwo.data.node[i].createtime = moment(myDatatwo.data.node[i].createtime).format('YYYY-MM-DD'); if (modal.id == myDatatwo.data.node[i].id) { myDatatwo.data.node.splice(i, 1); } } $scope.myDatatwo = myDatatwo.data.node; for (var i = 0; i < $scope.myDatatwo.length; i++) { $scope.myDatatwo[i]['item'] = i + 1 + filterData.idx * filterData.sum } }, function() {}); }; $scope.refreshData('expand-right', defaultFilterData); $scope.gridOptions.onRegisterApi = function(gridApi) { $scope.gridApi = gridApi; gridApi.pagination.on.paginationChanged($scope, function(newPage, pageSize) { var filtersData = $scope.memoryfilterData; filtersData.idx = newPage - 1; filtersData.sum = pageSize; // $scope.loadData(filtersData); $scope.refreshData('expand-right', filtersData); //console.log(pageSize); // $scope.loadData({"idx":newPage-1,"sum":pageSize}); }); // gridApi.selection.on.rowSelectionChanged($scope, function(data) { // $scope.selected.items.push(data.entity); //console.log(data); gridApi.selection.on.rowSelectionChanged($scope, function(scope, ect) { if (scope.isSelected) { scope.grid.appScope.selected.items.push(scope.entity) } else { for (var i = 0; i <= scope.grid.appScope.selected.items.length; i++) { if (scope.grid.appScope.selected.items[i].id == scope.entity.id) { scope.grid.appScope.selected.items.splice(i, 1); break; } } } $scope.mySelectedRows = $scope.gridApi.selection.getSelectedRows(); }); // }); gridApi.selection.on.rowSelectionChangedBatch($scope, function(rows) { // $scope.selected.items = data.entity; //console.log(data); var selectitem = []; selectitem = angular.copy($scope.selected.items); for (var j = 0; j < rows.length; j++) { if (rows[j].isSelected == true) { selectitem.push(rows[j].entity); } else { delete selectitem[j]; // rows.splice(j, 1); } } $scope.selected.items = []; for (var i = 0; i < selectitem.length; i++) { if (selectitem[i]) { $scope.selected.items.push(selectitem[i]); } } }); // gridApi.selection.on.selectAllRows = function(row) { //GridRow // // if (row.entity.age > 45) { // row.grid.api.selection.selectRow(row.entity); // 选中行 // // } // }; gridApi.core.on.filterChanged($scope, function() { var grid = this.grid; var filtersData = { idx: 0, sum: 10, "user": { "roledata": { "rolecode": "roleset" }, "selectType": "1" } }; angular.forEach(grid.columns, function(item) { if (item.enableFiltering) { // console.log("item.filters[0]=" + JSON.stringify(item.filters)); if (angular.isDefined(item.filters[0].term) && item.filters[0].term != '') { if (angular.isUndefined(filtersData['user'])) { filtersData['user'] = {}; } filtersData['user'][item.field] = item.filters[0].term; } } }); $scope.memoryfilterData = filtersData; // $scope.loadData(filtersData); }); }; $scope.onDblClick = function(data, event) { // $scope.selected.items = data.entity; $scope.selectButtonClick(data, event); }; // $scope.loadData = function(filterData) { // // console.log("filtersData=111" + JSON.stringify(filterData)) // items.fetchItems(filterData, APIService).then(function(data) { // var myDatatwo = Restangular.stripRestangular(data); // $scope.gridOptions.totalItems = myDatatwo.totalNum; // $scope.myDatatwo = myDatatwo.list; // }); // }; //树形图 var apple_selected, tree, treedata_avm, treedata_geography; $scope.my_tree_handler = function(branch) { //var _ref; var classify = $scope.classify = branch.prefix.toLowerCase() + branch.sign; api_cmdb.query({ 'sign': classify }).then(function(data) { var myDatalingbei = Restangular.stripRestangular(data); // console.log(myData.data.node); if (myDatalingbei.data && myDatalingbei.status == 200) { var ret = myDatalingbei.data; redrawSvg(myDatalingbei); } }); }; $scope.my_data = []; function convertListToTree(data, treeMap) { var idToNodeMap = {}; //Keeps track of nodes using id as key, for fast lookup var root = null; //Initially set our loop to null var parentNode = null; //loop over data for (var i = 0; i < data.length; i++) { var datum = data[i]; //each node will have children, so let's give it a "children" poperty datum.children = []; //add an entry for this node to the map so that any future children can //lookup the parent idToNodeMap[datum.id] = datum; //Does this node have a parent? if (typeof datum.parent === "undefined" || datum.parent == null) { //Doesn't look like it, so this node is the root of the tree root = datum; treeMap[datum.id] = root; } else { //This node has a parent, so let's look it up using the id parentNode = idToNodeMap[datum.parent.id]; //We don't need this property, so let's delete it. delete datum.parent; //Let's add the current node as a child of the parent node. parentNode.children.push(datum); } } return root; } function convertParentToChildList(data) { var treeMap = {}; var list = []; convertListToTree(data, treeMap); angular.forEach(treeMap, function(item) { list.push(item); }); return list; } $scope.my_tree = tree = {}; $scope.try_async_load = function() { $scope.my_data = []; $scope.select_treedata = []; $scope.doing_async = true; api_configure_data.fetchDataList('ciclassify', { 'idx': 0, 'sum': 100 }).then(function(result) { //console.log(result['list']); $scope.select_treedata = $scope.my_data = convertParentToChildList(result['list']); $scope.doing_async = false; // tree.expand_all(); //console.log(treelist); }); }; $scope.select_treedata = []; $scope.propTypeOptions = []; $scope.try_async_load(); $scope.onFilterremove = function(item) { console.log(item) } $scope.searchdata = {}; $scope.clear = function() { $scope.searchdata = {}; $scope.cifilter_classic = {}; $scope.try_async_load(); var fildata = { idx: 0, sum: 10, } $scope.memoryfilterData = fildata; $scope.refreshData('expand-right', fildata); } $scope.cifilter_classic = {}; $scope.chiceIncident = function(item) { var fildata = defaultFilterData; // fildata.applicationForm = {}; // sign: basehwnwswt if (item && item.id) { var classify = item.prefix.toLowerCase() + item.sign; fildata.sign = classify }else{ delete fildata.sign } $scope.gridOptions.paginationCurrentPage = 1; var transitiondata = angular.copy(item); $scope.refreshData('expand-right', fildata); } $scope.applicadata = []; $scope.onFilterCallback = function(item) { var tempclassify = item.prefix.toLowerCase() + item.sign; api_configure_form.renderTabForm(tempclassify).then(function(data) { var myData = Restangular.stripRestangular(data); $scope.applicadata = myData[0].form.fields; }); // } } // $scope.loadData({ // idx: 0, // sum: 10, // "user": { "roledata": { "rolecode": "roleset" }, "selectType": "1" } // }); $scope.selected = { items: [] }; $scope.ok = function() { // if(onDataCallback&&angular.isFunction(onDataCallback)){ // onDataCallback($scope.selected.item, parentScope); // } $modalInstance.close($scope.selected.items); }; $scope.cancel = function() { $modalInstance.dismiss('cancel'); }; }, size: 'lg' }); modalInstance.result.then(function(selectedItem) { $scope.guanxi.cmdbname = selectedItem[0]; }, function() {}); } $scope.changeedge = function(data) { SweetAlert.swal({ title: "确认修改资产关系-" + data.label + "?", type: "warning", showCancelButton: true, confirmButtonColor: "#DD6B55", confirmButtonText: "确认修改", cancelButtonText: "取消" }, function(isConfirm) { if (isConfirm) { //{"id":-1,"name":"link","source":6741,"target":6749,"left":true,"right":false,"props":{}} $scope.changeedges = true; $scope.guanxi.cmdbname = data.tolabelname.data; $scope.guanxi.name = data; $scope.guanxi.name.value = data.namelink; $scope.guanxi.name.name = data.label; $scope.guanxi.edgesid = data.id; } else { $scope.changeedges = false; } }); } function getmapdata() { _mydata.nodes = []; _mydata.edges = []; api_cmdb.findRefById($scope.opennode[0]).then(function(result) { var obj = {}; var oaj = {}; angular.forEach(result.data.node, function(item, index) { if (!obj[item]) { obj[item] = 1; angular.forEach($scope.select_treelist, function(itemca) { var regstring = itemca.prefix + itemca.sign; if (item.label == regstring.toLocaleLowerCase()) { _mydata.nodes.push({ "id": item.id, "assistId": item.id, "label": item.props.hw_mingcheng, "image": itemca.iconname ? itemca.iconname : "assets/images/cmdb/other.png", // "image":"assets/images/cmdb/other.png", "shape": "image", "name": item.props.hw_mingcheng, "ngcord": item.label, "data": item, "pid": item.id, "hostType": "1", "hostStatus": "1", "size": 15, "isOurDraw": "false", "hidden": false }) } }) } }) angular.forEach(result.data.edge, function(itemedge, indexone) { if (!oaj[itemedge]) { oaj[itemedge] = 1; _mydata.edges.push({ "id": itemedge.id, "from": itemedge.source, "to": itemedge.target, "namelink": itemedge.name, "label": strangelink(itemedge.name), "color": { "color": "#ccc" } }) } }) // angular.forEach(_mydata.edges, function(itemedge) { // if (itemedge.to == $scope.cmdbtype.id || itemedge.from == $scope.cmdbtype.id) { // angular.forEach(_mydata.nodes, function(item) { // if ((itemedge.to == item.id && itemedge.from == $scope.cmdbtype.id) || (itemedge.from == item.id && itemedge.to == $scope.cmdbtype.id)) { // var datas = itemedge; // datas.tolabelname = item // $scope.openedge.push(datas);  // } // }) // } // }) draw(_mydata); }) } $scope.ok = function(key, cmdbtype, type) { if (key.cmdbname.id||key.cmdbname.id==0) { if (type) { var fildata = { "id": $scope.guanxi.edgesid, "name": key.name.value, "source": key.cmdbname.id, "target": $scope.opennode[0], "left": true, "right": false, "props": {} } // $scope.cmdbisopen = false; api_cmdb.putRef(fildata, $scope.guanxi.edgesid).then(function(response) { if (response) { var resData = Restangular.stripRestangular(response); SweetAlert.swal({ title: "修改成功!", confirmButtonColor: "#007AFF", type: "success" }, function() { $scope.guanxi = {}; // angular.forEach(_mydata.edges, function(itemedge, index) { // if (itemedge.id == $scope.guanxi.edgesid) { // _mydata.edges[index] = response.data.edge[0]; // if () { // } // } // if (itemedge.to == $scope.cmdbtype.id || itemedge.from == $scope.cmdbtype.id) { // angular.forEach(_mydata.nodes, function(item) { // if ((itemedge.to == item.id && itemedge.from == $scope.cmdbtype.id) || (itemedge.from == item.id && itemedge.to == $scope.cmdbtype.id)) { // var datas = itemedge; // datas.tolabelname = item // $scope.openedge.push(datas);  // } // }) // } // }) $scope.edgedatag = angular.copy(_mydata.edges); api_cmdb.findRefById($scope.opennode[0]).then(function(result) { _mydata.edges = []; $scope.openedge = []; angular.forEach(result.data.edge, function(itemedge, indexone) { var someone = true; // angular.forEach($scope.edgedatag, function(chil) { // if (chil.id == itemedge.id) { // someone = false; // } // }) // if (someone) { _mydata.edges.push({ "id": itemedge.id, "from": itemedge.source, "to": itemedge.target, // "label": itemedge.name, "namelink": itemedge.name, "label": strangelink(itemedge.name), "color": { "color": "#ccc" } }) // } }) angular.forEach(_mydata.edges, function(itemedge) { if (itemedge.to == $scope.cmdbtype.id || itemedge.from == $scope.cmdbtype.id) { angular.forEach(_mydata.nodes, function(item) { if ((itemedge.to == item.id && itemedge.from == $scope.cmdbtype.id) || (itemedge.from == item.id && itemedge.to == $scope.cmdbtype.id)) { var datas = itemedge; datas.tolabelname = item $scope.openedge.push(datas);  } }) } }) draw(_mydata); $scope.changeedges = false; }) }) // getmapdata(); // angular.forEach(_mydata.edges, function(itemedge) { // if (itemedge.to == $scope.cmdbtype.id || itemedge.from == $scope.cmdbtype.id) { // angular.forEach(_mydata.nodes, function(item) { // if ((itemedge.to == item.id && itemedge.from == $scope.cmdbtype.id) || (itemedge.from == item.id && itemedge.to == $scope.cmdbtype.id)) { // var datas = itemedge; // datas.tolabelname = item // $scope.openedge.push(datas);  // } // }) // } // }) // draw(_mydata); // }); } else { SweetAlert.swal({ title: "修改失败", text: "修改失败,请稍后重试!", type: "error", confirmButtonColor: "#DD6B55" }); } // $scope.ldloading[style.replace('-', '_')] = false; }); } else { var fildata = { "id": -1, "name": key.name.value, "source": key.cmdbname.id, "target": $scope.opennode[0], "left": true, "right": false, "props": {} } $scope.cmdbisopen = false; api_cmdb.createRef(fildata).then(function(response) { if (response && response.status == 200) { // SweetAlert.swal("title": "新增成功", // "text": "新增关系成功!", // "type": "success") SweetAlert.swal({ title: "新增成功", text: "新增关系成功!", type: "success" }, function(isConfirm) { $scope.guanxi = {}; api_cmdb.findRefById($scope.opennode[0]).then(function(result) { angular.forEach(result.data.node, function(item, index) { var someone = true; angular.forEach(_mydata.nodes, function(chil) { if (chil.id == item.id) { someone = false; } }) if (someone) { angular.forEach($scope.select_treelist, function(itemca) { var regstring = itemca.prefix + itemca.sign; if (item.label == regstring.toLocaleLowerCase()) { _mydata.nodes.push({ "id": item.id, "assistId": item.id, "label": item.props.hw_mingcheng, "image": itemca.iconname ? itemca.iconname : "assets/images/cmdb/other.png", // "image":"assets/images/cmdb/other.png", "shape": "image", "name": item.props.hw_mingcheng, "ngcord": item.label, "data": item, "pid": item.id, "hostType": "1", "hostStatus": "1", "size": 15, "isOurDraw": "false", "hidden": false }) } }) } // } }) angular.forEach(result.data.edge, function(itemedge, indexone) { var someone = true; angular.forEach(_mydata.edges, function(chil) { if (chil.id == itemedge.id) { someone = false; } }) if (someone) { _mydata.edges.push({ "id": itemedge.id, "from": itemedge.source, "to": itemedge.target, // "label": itemedge.name, "namelink": itemedge.name, "label": strangelink(itemedge.name), "color": { "color": "#ccc" } }) } }) draw(_mydata); }) }) } else { SweetAlert.swal("新增失败!", "新增关系失败", "error") } }); } // }else{ // SweetAlert.swal({ // title: "新增失败", // text: "请选择!", // type: "success" // }) } }; $scope.cancel = function() { $modalInstance.dismiss('cancel'); }; $scope.statement = JSON.parse(localStorage.cmdbmap).model; $scope.select_treelist = JSON.parse(localStorage.ciclassify); // var _mydata = { // nodes: [{ // "id": $scope.statement.id, // "assistId": $scope.statement.id, // "label": $scope.statement.props.hw_mingcheng, // "image": "assets/images/cmdb/Server.png", // "shape": "image", // "name": $scope.statement.props.hw_mingcheng, // "ngcord": $scope.statement.label, // "pid": $scope.statement.id, // "data": $scope.statement, // "hostType": "1", // "hostStatus": "1", // "size": 15, // "isOurDraw": "false", // "hidden": false // }], // edges: [] // } var _mydata = { nodes: [], edges: [] }; angular.forEach($scope.select_treelist, function(item) { var regstring = item.prefix + item.sign; if ($scope.statement.label == regstring.toLocaleLowerCase()) { _mydata = { nodes: [{ "id": $scope.statement.id, "assistId": $scope.statement.id, "label": $scope.statement.props.hw_mingcheng, "image": item.iconname ? item.iconname : "assets/images/cmdb/other.png", // "image": "assets/images/cmdb/other.png", "shape": "image", "name": $scope.statement.props.hw_mingcheng, "ngcord": $scope.statement.label, "pid": $scope.statement.id, "data": $scope.statement, "hostType": "1", "hostStatus": "1", "size": 15, "isOurDraw": "false", "hidden": false }], edges: [] } } }) // $scope.select_treedata = []; // api_configure_data.fetchDataList('ciclassify', { 'idx': 0, 'sum': 100 }).then(function(result) { // $scope.select_treelist = result['list']; // angular.forEach($scope.select_treelist, function(item) { // var regstring = item.prefix + item.sign; // if ($scope.statement.label == regstring.toLocaleLowerCase()) { // var _mydata = { // nodes: [{ // "id": $scope.statement.id, // "assistId": $scope.statement.id, // "label": $scope.statement.props.hw_mingcheng, // "image": itemca.iconname ? itemca.iconname : "assets/images/cmdb/Server.png", // "shape": "image", // "name": $scope.statement.props.hw_mingcheng, // "ngcord": $scope.statement.label, // "pid": $scope.statement.id, // "data": $scope.statement, // "hostType": "1", // "hostStatus": "1", // "size": 15, // "isOurDraw": "false", // "hidden": false // }], // edges: [] // } // } // }) // draw(_mydata); // }) // var _mydata = { // nodes: [{ // "id": $scope.statement.id, // "assistId": $scope.statement.id, // "label": $scope.statement.props.hw_mingcheng, // "image": "assets/images/cmdb/Server.png", // "shape": "image", // "name": $scope.statement.props.hw_mingcheng, // "ngcord": $scope.statement.label, // "pid": $scope.statement.id, // "data": $scope.statement, // "hostType": "1", // "hostStatus": "1", // "size": 15, // "isOurDraw": "false", // "hidden": false // }], // edges: [] // } //资产属性列表 var vm = this; vm.options = {}; vm.exampleTitle = ['expressionProperties', 'model property']; vm.fields = []; vm.models = {}; // vm.models["loginUser"] = $rootScope.user; var that = $injector; var parse = $parse; var formKey = ""; var pdKey = ""; if (angular.isDefined($state.current.pdKey) && $state.current.pdKey != "") { pdKey = $state.current.pdKey; //console.log("pdKey::"+$state.current.pdKey); } if (angular.isDefined($stateParams.formKey) && $stateParams.formKey != "") { formKey = $stateParams.formKey; //console.log("formKey::"+$stateParams.formKey); } //用户测试数据,后续从header的auth中获取 var userId = 2; userId = $rootScope.user.id; //==============处理表单设计数据 开始==================== //处理组件加载后台数据选项的方法 function refreshSelectOptions(searchVal, field) { if (field.templateOptions.optionsUrl) { var process = BpmRestangular.all(""); if (field.templateOptions.ApiService) { process = UserRestangular.all(""); } process.customPOST({ "idx": 0, "sum": 1000 }, field.templateOptions.optionsUrl).then(function(result) { if (!field.templateOptions.options) { field.templateOptions.options = []; } if (field.templateOptions.optionsDataKey) { field.templateOptions.options = result[field.templateOptions.optionsDataKey]; } else { field.templateOptions.options = result; } }); } } function decodeVMTabForm(model, tabs) { var result = { model: {}, tabs: [] }; var mdata = angular.fromJson(model); angular.extend(result.model, mdata); angular.forEach(tabs, function(tab) { tab.form.model = vm.models; angular.forEach(tab.form.fields, function(field) { if (field.key == "") { delete field.key; } field.type = "ui-otherlisttab"; if (angular.isDefined(field.extjson) && field.extjson != "") { var extObj = angular.fromJson(field.extjson); angular.extend(field.templateOptions, extObj.templateOptions); delete extObj.templateOptions; for (var prop in extObj) { if (new RegExp("Expression").test(prop)) { //var obj = $scope.$eval(extObj[prop]); //extObj[prop] = $scope.$eval(extObj[prop]); if (extObj[prop] != null) { if (new RegExp("function").test(extObj[prop])) { var propValue = eval(extObj[prop]); extObj[prop] = propValue; } else { //console.log(extObj[prop]); var obj = $scope.$eval(extObj[prop]); extObj[prop] = obj; //console.log(obj); } } } else if (new RegExp("expressionProperties").test(prop)) { for (var p in extObj[prop]) { if (new RegExp("function").test(extObj[prop][p])) { var propValue = eval(extObj[prop][p]); extObj[prop][p] = propValue; } else { //if(p.indexOf("'")>=0){ // var obj = $scope.$eval(extObj[prop][p]); // extObj[prop][$scope.$eval(p)]=obj; //} } } } else if ("watcher" == prop) { if (angular.isArray(extObj[prop])) { angular.forEach(extObj[prop], function(item, index) { for (var p in item) { if (new RegExp("function").test(item[p])) { var propValue = eval(item[p]); extObj[prop][index][p] = propValue; } } }); } else if (angular.isObject(extObj[prop])) { for (var p in extObj[prop]) { if (new RegExp("function").test(extObj[prop][p])) { var propValue = eval(extObj[prop][p]); extObj[prop][p] = propValue; } } } } } angular.extend(field, extObj); delete field.extjson; } if (field.extjson == "") { delete field.extjson; } if (angular.isDefined(field.templateOptions)) { var templateOs = field.templateOptions; for (var property in templateOs) { //console.log(property); if (angular.isString(templateOs[property]) && !(new RegExp("[\u4e00-\u9fa5]").test(templateOs[property]))) { if (new RegExp("function").test(templateOs[property])) { var propValue = eval(templateOs[property]); field.templateOptions[property] = propValue; } else { if (that.has(templateOs[property])) { field.templateOptions[property] = that.get(templateOs[property]); } else { field.templateOptions[property] = templateOs[property]; } } } else if (templateOs[property] == null) { //delete field.templateOptions[property]; } else {} } } if (angular.isDefined(field.templateOptions) && angular.isDefined(field.templateOptions.extjson)) { var extObj = angular.fromJson(field.templateOptions.extjson); //JSON.parse(field.extjson); angular.extend(field.templateOptions, extObj); delete field.templateOptions.extjson; } //... if (field.templateOptions) { //处理远程获取数据控件方法调用 if (field.templateOptions.optionsUrl) { field.templateOptions.refresh = refreshSelectOptions; } //处理嵌套属性数据绑定/ if (field.templateOptions.pkey) { var pmodel, i = 0; angular.forEach(field.templateOptions.pkey.split("."), function(p) { if (i == 0) { if (result.model[p] == null) { result.model[p] = {}; } pmodel = result.model[p]; i++; } else { if (pmodel[p] == null) { pmodel[p] = {}; } pmodel = pmodel[p]; } }); if (pmodel != null) { field.model = pmodel; if (pmodel[field.key] == null) { pmodel[field.key] = null; } } } else { if (result.model[field.key] == null) { result.model[field.key] = null; } } //处理弹出框组件初始化 if (field.type == "ui-input-selectmodal") { field.templateOptions.modal = $modal; //field.templateOptions.Restangular = Restangular; } else if (field.type == "ui-userselect") { field.templateOptions.modal = $modal; //field.templateOptions.Restangular = Restangular; } else if (field.type == "ui-multiuserselect") { field.templateOptions.modal = $modal; } else if (field.type == "ui-modelselect") { field.templateOptions.modal = $modal; //field.templateOptions.Restangular = Restangular; } } // console.log(field); //field //result.fields.push(field); }) }); vm.originalTabs = angular.copy(vm.form); } //======================处理表单设计数据 结束======================== $scope.ldloading = {}; function filter(obj) { angular.forEach(obj, function(key, value) { if (value === "" || value === null) { delete obj[key]; } else if (Object.prototype.toString.call(value) === '[object Object]') { filter(value); } else if (angular.isArray(value)) { angular.forEach(value, function(item) { filter(item); }); } }); } function invokeOnAllFormOptions(fn) { angular.forEach(vm.tabs, function(tab) { if (tab.form.options && tab.form.options[fn]) { tab.form.options[fn](); } }); } function encodeCIData(data, ciId) { if (ciId) { var baseprop = ['uuid', 'name', 'type', 'label', 'status', 'createtime', 'lastupdatetime', 'props']; var extraprop = 'props'; data[extraprop] = {}; for (var key in data) { console.log(data[key]); if (_.indexOf(baseprop, key) >= 0) { continue; } else { data[extraprop][key] = data[key]; delete data[key]; } } if ($rootScope.user) { data[extraprop]['lastupdateperson'] = $rootScope.user.name; data[extraprop]['configperson'] = $rootScope.user.name; var isCMAdminFlag = false; angular.forEach($rootScope.user.role, function(roleItem) { if (roleItem.rolecode == "cmdb charge") { isCMAdminFlag = true; } }) if (!isCMAdminFlag) { data[extraprop]['state'] = '1'; } } if (data.props.id) { } else { data.label = ciId; } return data; } return undefined; } function decodeCIModel(data) { var extraprop = 'props'; if (data[extraprop]) { for (var key in data[extraprop]) { data[key] = data[extraprop][key]; } delete data[extraprop]; } data['iscmadmin'] = false; angular.forEach($rootScope.user.role, function(roleItem) { if (roleItem.rolecode == "cmdb charge") { data['iscmadmin'] = true; } }) return data; } function formValid() { angular.forEach(vm.tabs, function(item) { //item. }) } $scope.vm = vm; $scope.refreshcmdbform = function(item, itemdata) { // var tempclassify = item.prefix.toLowerCase() + item.sign; api_configure_form.renderTabForm(item).then(function(data) { var myData = Restangular.stripRestangular(data); $scope.propTypeOptions = myData; $scope.templateProps = myData; $scope.vm.tabs = myData; vm.models = itemdata.data; if (angular.isDefined(vm.models.vtvmvtm_kaiji)) { if (vm.models.vtvmvtm_kaiji) { vm.models.vtvmvtm_kaiji = "是"; } else { vm.models.vtvmvtm_kaiji = "否"; } } decodeVMTabForm(vm.models, vm.tabs); }); // } } var cifilterClassic = {}; function strangelink(name) { if (name == 'link') { return "连接" } else if (name == 'installon') { return "安装部署" } else if (name == 'blong') { return "归属" } else if (name == 'use') { return "使用" } else if (name == 'backupbetw') { return "互备" } else if (name == "backupown") { return "主备" } } //网状图 $(function() { // 高度响应式 clientHeight = document.documentElement.clientHeight; clientWidth = document.documentElement.clientWidth; $('#mynetwork').css('height', clientHeight); $('#mynetwork').css('width', clientWidth); function strangelink(name) { if (name == 'link') { return "连接" } else if (name == 'installon') { return "安装部署" } else if (name == 'blong') { return "归属" } else if (name == 'use') { return "使用" } else if (name == 'backupbetw') { return "互备" } else if (name == "backupown") { return "主备" } } function getinternetAlarm(getmodel) { api_cmdb.findRefById(getmodel.id).then(function(result) { var obj = {}; var oaj = {}; angular.forEach(result.data.node, function(item, index) { // if (!obj[item]) { obj[item] = 1; angular.forEach($scope.select_treelist, function(itemca) { var regstring = itemca.prefix + itemca.sign; if (item.label == regstring.toLocaleLowerCase()) { _mydata.nodes.push({ "id": item.id, "assistId": item.id, "label": item.props.hw_mingcheng, "image": itemca.iconname ? itemca.iconname : "assets/images/cmdb/other.png", // "image":"assets/images/cmdb/other.png", "shape": "image", "name": item.props.hw_mingcheng, "ngcord": item.label, "data": item, "pid": item.id, "hostType": "1", "hostStatus": "1", "size": 15, "isOurDraw": "false", "hidden": false }) } }) // } }) angular.forEach(result.data.edge, function(itemedge, indexone) { // if (!oaj[itemedge]) { oaj[itemedge] = 1; _mydata.edges.push({ "id": itemedge.id, "from": itemedge.source, "to": itemedge.target, "namelink": itemedge.name, "label": strangelink(itemedge.name), "color": { "color": "#ccc" } }) // } }) draw(_mydata); }) } getinternetAlarm($scope.statement) }); function draw(data) { var options = { nodes: { font: { color: "#888", size: 10 } }, edges: { smooth: false, //是否显示方向箭头 color: "#333" // 线条颜色 }, layout: { improvedLayout: false, // direction: 'LR', // UD, DU, LR, RL }, interaction: { hover: true, navigationButtons: false, // 如果为真,则在网络画布上绘制导航按钮。这些是HTML按钮,可以使用CSS完全自定义。 keyboard: { enabled: true, speed: { x: -1, y: -1, zoom: 0.02 }, bindToWindow: true } // 启用键盘快捷键 }, physics: { stabilization: false, barnesHut: { centralGravity: 8, // 中心重力吸引器将整个网络拉回中心 springLength: 80, // 边缘被建模为弹簧。这个弹簧长度是弹簧的剩余长度 gravitationalConstant: -80000, // 重力吸引。我们喜欢排斥 所以价值是负数。如果你想要排斥力更强,减小值(所以-10000,-50000)。 avoidOverlap: 0.2, // 接受范围:[0 .. 1]。当大于0时,会考虑节点的大小。该距离将由重力模型的节点的包围圆的半径计算。值1是最大重叠避免。 damping: 0.3, springConstant: 0.5 }, minVelocity: 16 // 一旦达到所有节点的最小速度,我们假设网络已经稳定,仿真停止。 }, // selection: { // enabled: true, // 打开或关闭配置界面。 // getEdgeAt: function(data) { // // if (isDo) { // // callback(data); // 操作成功 // // } else { // // callback(null); // 操作失败 // // } // }, // }, }; network = new vis.Network(container, data, options); nodes_data = network.body.data.nodes; edges_data = network.body.data.edges; //动画稳定后的处理事件 var stabilizedTimer; network.on("stabilized", function(params) { // 会调用两次? window.clearTimeout(stabilizedTimer); stabilizedTimer = setTimeout(function() { exportNetworkPosition(network); options.physics.enabled = false; // 关闭物理系统 network.setOptions(options); }, 200); }); // 右键 // network.on("oncontext", function(params) { // if (params.edges.length == 1) { // var menuNode = document.getElementById('epMenu'); // document.oncontextmenu = hideSysMenu; //屏蔽鼠标右键 // var evt = window.event || arguments[0]; // var rightedge = evt.clientX; // var bottomedge = evt.clientY; // // epMenu.create({ left: rightedge, top: bottomedge }, [{ name: '删除关系', 'action': sayremove }, { name: '新增关系', 'action': sayadd }]); // epMenu.create({ left: rightedge, top: bottomedge }, [{ name: '删除关系', 'action': sayremove(params) }, { name: '删除关系2', 'action': hideSysMenu(params) }]); // } // }); // 右键2 network.on("getNodeAt", function(params) { console.log(params) }); // 右键3 network.on("editNode", function(params) { console.log(params) }); //选中节点 network.on("selectNode", function(params) { // console.log(params) }); //单击节点 network.on("click", function(params) { $scope.openedge = []; if (params.nodes.length != 0) { // 双击的是节点 $scope.opennode = params.nodes; var _node = params.nodes[0]; var _nodeName = nodes_data._data[_node].name; var _allChild = getAllChilds(network, _node, []); angular.forEach(_mydata.nodes, function(item) { if (item.id == params.nodes[0]) { $scope.cmdbtype = item $scope.refreshcmdbform(item.ngcord, item);  } }) angular.forEach(_mydata.edges, function(itemedge) { if (itemedge.to == $scope.cmdbtype.id || itemedge.from == $scope.cmdbtype.id) { angular.forEach(_mydata.nodes, function(item) { if ((itemedge.to == item.id && itemedge.from == $scope.cmdbtype.id) || (itemedge.from == item.id && itemedge.to == $scope.cmdbtype.id)) { var datas = itemedge; datas.tolabelname = item $scope.openedge.push(datas);  } }) } }) // angular.forEach(_mydata.nodes, function(item) { // angular.forEach(_mydata.edges, function(itemedge) { // if (itemedge.to == item.id) { // var datas = itemedge; // datas.tolabelname = item // $scope.openedge.push(datas);  // } // }) // }) if ($scope.cmdbisopen) { } else { $scope.cmdbisopen = true; open = true; } // angular.forEach(_mydata.edges, function(item) { // if (item.id == $scope.statement.id) { // $scope.openedge.push(item); // } // }) } else if (params.edges.length == 1) { // $scope.cmdbisopen = true; // var menuNode = document.getElementById('epMenu'); // var evt = window.event || arguments[0]; // var rightedge = evt.clientX; // var bottomedge = evt.clientY; // epMenu.create({ left: rightedge, top: bottomedge }, [{ name: '删除关系', 'action': sayremove(params) }, { name: '删除关系2', 'action': hideSysMenu(params) }]); } else { epMenu.destory(); $scope.cmdbisopen = false; } // epMenu.destory(); }); //双击节点 隐藏或者显示子节点 network.on("doubleClick", function(params) { event.preventDefault(); // if (params.nodes.length != 0) { // 双击的是节点 // if (open) { // } else { // $scope.cmdbisopen = true; // open = true; // } // } else { // } if (params.nodes.length != 0) { // 双击的是节点 var _node = params.nodes[0]; var _nodeName = nodes_data._data[_node].name; var _allChild = getAllChilds(network, _node, []); angular.forEach(_mydata.nodes, function(item) { if (item.id == params.nodes[0]) { $scope.refreshcmdbform(item.ngcord, item);  } }) if (_allChild.length > 0) { // 存在子节点 if (nodes_data._data[_allChild[_allChild.length - 1]].hidden == false) { nodes_data.update([{ id: _node, label: _nodeName + " " + connectedNum + _allChild.length }]); for (var i = 0; i < _allChild.length; i++) { nodes_data.update([{ id: _allChild[i], hidden: true }]); edges_data.update([{ id: _allChild[i], hidden: true }]); } } else { nodes_data.update([{ id: _node, label: _nodeName }]); for (var j = 0; j < _allChild.length; j++) { nodes_data.update([{ id: _allChild[j], hidden: false }]); edges_data.update([{ id: _allChild[j], hidden: false }]); } } } else { $scope.openedge = []; api_cmdb.findRefById(params.nodes[0]).then(function(result) { angular.forEach(result.data.node, function(item, index) { var someone = true; angular.forEach(_mydata.nodes, function(chil) { if (chil.id == item.id) { someone = false; } }) if (someone) { angular.forEach($scope.select_treelist, function(itemca) { var regstring = itemca.prefix + itemca.sign; if (item.label == regstring.toLocaleLowerCase()) { _mydata.nodes.push({ "id": item.id, "assistId": item.id, "label": item.props.hw_mingcheng, "image": itemca.iconname ? itemca.iconname : "assets/images/cmdb/other.png", // "image":"assets/images/cmdb/other.png", "shape": "image", "name": item.props.hw_mingcheng, "ngcord": item.label, "data": item, "pid": item.id, "hostType": "1", "hostStatus": "1", "size": 15, "isOurDraw": "false", "hidden": false }) } }) } // } }) angular.forEach(result.data.edge, function(itemedge, indexone) { var someone = true; angular.forEach(_mydata.edges, function(chil) { if (chil.id == itemedge.id) { someone = false; } }) if (someone) { _mydata.edges.push({ "id": itemedge.id, "from": itemedge.source, "to": itemedge.target, // "label": itemedge.name, "namelink": itemedge.name, "label": strangelink(itemedge.name), "color": { "color": "#ccc" } }) } }) angular.forEach(_mydata.edges, function(itemedge) { if (itemedge.to == $scope.cmdbtype.id || itemedge.from == $scope.cmdbtype.id) { angular.forEach(_mydata.nodes, function(item) { if ((itemedge.to == item.id && itemedge.from == $scope.cmdbtype.id) || (itemedge.from == item.id && itemedge.to == $scope.cmdbtype.id)) { var datas = itemedge; datas.tolabelname = item $scope.openedge.push(datas);  } }) } }) // }) // angular.forEach(_mydata.edges, function(item) { // if (item.from == $scope.cmdbtype.id || item.to == $scope.cmdbtype.id) { // var datas = itemedge; // datas.tolabelname = item // $scope.openedge.push(item); // } // }) draw(_mydata); }) } } }); //拖动节点 network.on("dragging", function(params) { //拖动进行中事件 if (params.nodes.length != 0) { nodeMoveFun(params); } }); //拖动结束后 network.on("dragEnd", function(params) { if (params.nodes.length != 0) { var arr = nodeMoveFun(params); exportNetworkPosition(network, arr); } }); //浮动 network.on('hoverNode', function(param) { thisnode = param; }); // 缩放 network.on("zoom", function(params) {}); } // clientHeight = document.documentElement.clientHeight; // clientWidth = document.documentElement.clientWidth; function centerNode(source) { source.event.center = { x: (document.documentElement.clientWidth - 20) / 2, y: (document.documentElement.clientHeight - 40) / 2 }; source.event.changedPointers[0].clientX = (document.documentElement.clientWidth - 20) / 2; source.event.changedPointers[0].clientY = (document.documentElement.clientHeight - 40) / 2; nodeMoveFun(source); // var arr = nodeMoveFun(source); // exportNetworkPosition(network, arr); } /* *获取所有子节点 * network :图形对象 * _thisNode :单击的节点(父节点) * _Allnodes :用来装子节点ID的数组 * */ function getAllChilds(network, _thisNode, _Allnodes) { var _nodes = network.getConnectedNodes(_thisNode, "to"); if (_nodes.length > 0) { for (var i = 0; i < _nodes.length; i++) { getAllChilds(network, _nodes[i], _Allnodes); _Allnodes.push(_nodes[i]); } } return _Allnodes }; // 节点移动 function nodeMoveFun(params) { var click_node_id = params.nodes[0]; var allsubidsarr = getAllChilds(network, click_node_id, []); // 获取所有的子节点 if (allsubidsarr) { // 如果存在子节点 var positionThis = network.getPositions(click_node_id); var clickNodePosition = positionThis[click_node_id]; // 记录拖动后,被拖动节点的位置 var position = JSON.parse(localStorage.getItem("position")); var startNodeX, startNodeY; // 记录被拖动节点的子节点,拖动前的位置 var numNetx, numNety; // 记录被拖动节点移动的相对距离 var positionObj = {}; // 记录移动的节点位置信息, 用于返回 positionObj[click_node_id] = { x: clickNodePosition.x, y: clickNodePosition.y }; // 记录被拖动节点位置信息 numNetx = clickNodePosition.x - position[click_node_id].x; // 拖动的距离 numNety = clickNodePosition.y - position[click_node_id].y; for (var j = 0; j < allsubidsarr.length; j++) { if (position[allsubidsarr[j]]) { startNodeX = position[allsubidsarr[j]].x; // 子节点开始的位置 startNodeY = position[allsubidsarr[j]].y; network.moveNode(allsubidsarr[j], (startNodeX + numNetx), (startNodeY + numNety)); // 在视图上移动子节点 positionObj[allsubidsarr[j]] = { x: (startNodeX + numNetx), y: (startNodeY + numNety) }; // 记录子节点位置信息 } } } return positionObj; }; //处理本地存储,这里仅仅只能作为高级浏览器使用,ie9以下不能处理 function setLocal(position) { localStorage.removeItem("position"); localStorage.setItem("position", JSON.stringify(position)); } var epMenu = { create: function(point, option) { var menuNode = document.getElementById('epMenu'); if (!menuNode) { //没有菜单节点的时候创建一个 menuNode = document.createElement("div"); menuNode.setAttribute('class', 'epMenu'); menuNode.setAttribute('id', 'epMenu'); } else $(menuNode).html(''); //清空里面的内容 $(menuNode).css({ left: point.left + 'px', top: point.top + 'px' }); for (var x in option) { var tempNode = document.createElement("a"); $(tempNode).text(option[x]['name']).on('click', option[x].action); menuNode.appendChild(tempNode); } $("body").append(menuNode); }, destory: function() { $(".epMenu").remove(); } }; function sayadd() { alert("hellokity"); epMenu.destory(); } $scope.sayremove = function(data) { SweetAlert.swal({ title: "确认删除资产关系-" + data.label + "?", // text: "删除资产关系-" + data.label + "以后,你将不能恢复该数据!", type: "warning", showCancelButton: true, confirmButtonColor: "#DD6B55", confirmButtonText: "确认删除!", cancelButtonText: "取消" }, function(isConfirm) { if (isConfirm) { if (data.id == 0) { data.id = "0" } api_cmdb.removeRef(data.id).then(function(response) { if (response && response.status == 200) { angular.forEach(_mydata.edges, function(item, index) { if (data.id == item.id) { _mydata.edges.splice(index, 1); } }) draw(_mydata); angular.forEach($scope.openedge, function(item, index) { if (data.id == item.id) { $scope.openedge.splice(index, 1); } }) SweetAlert.swal({ title: "删除成功", text: "关系删除成功!", type: "success" }); } else { SweetAlert.swal({ title: "系统错误!", text: "系统错误,请稍候重试或者联系管理员!", type: "error" }); } }); } }); } // function sayremove(data) { // // api_cmdb.put(cidata, $scope.ciId).then(function(response) { // // if (response) { // // var resData = Restangular.stripRestangular(response); // // SweetAlert.swal({ // // title: "保存成功!", // // confirmButtonColor: "#007AFF" // // }, function() { // // refreshData($scope.classify); // // reinitTabForm($scope.classify); // // }); // // } else { // // SweetAlert.swal({ // // title: "系统错误", // // text: "系统错误,请稍后重试!", // // type: "error", // // confirmButtonColor: "#DD6B55" // // }); // // } // // $scope.ldloading[style.replace('-', '_')] = false; // // }); // SweetAlert.swal({ // title: "确认删除资产关系?", // text: "删除资产关系以后,你将不能恢复该数据!", // type: "warning", // cancelButtonText: "取消", // showCancelButton: true, // confirmButtonColor: "#DD6B55", // confirmButtonText: "确认删除!" // }, function(isConfirm) { // if (isConfirm) { // api_cmdb.removeRef(id).then(function(response) { // if (response && response.status == 200) { // angular.forEach(_mydata.edges, function(item) { // if (id == item.id) { // _mydata.edges.splice(index, 1) // } // }) // draw(_mydata); // // links.splice(links.indexOf($scope.selected_link), 1); // // restart(); // } else { // SweetAlert.swal({ // title: "系统错误!", // text: "系统错误,请稍候重试或者联系管理员!", // type: "error" // }); // } // }); // } // }); // epMenu.destory(); // } function hideSysMenu() { return false; } // //删除下级所有节点 // function remove_all_sub_nodes(node_id) { // var sub_nodes = get_directly_sub_nodes(node_id); // if (sub_nodes.length == 0) { //当前点击的为叶子节点 // //判断是否有下级节点 // if (typeof(allnodes[node_id - 1]['subids']) != 'undefined') { // $.each(allnodes[node_id - 1]['subids'], function(index, item) { // nodes.add(allnodes[item - 1]); // edges.add({ id: node_id + '_' + item, from: node_id, to: item }); // }); // } else { // alert('当前为叶子节点'); // } // } else { // $.each(sub_nodes, function(index, item) { // var sub_sub_nodes = get_directly_sub_nodes(item); // if (sub_sub_nodes.length == 0) { // nodes.remove({ id: item }); // edges.remove({ id: node_id + '_' + item }); // } else { // remove_all_sub_nodes(item); // } // nodes.remove({ id: item }); // edges.remove({ id: node_id + '_' + item }); // }); // } // } /* *节点位置设置 * network :图形对象 * arr :本次移动的节点位置信息 * */ function exportNetworkPosition(network, arr) { if (arr) { // 折叠过后 getPositions() 获取的位置信息里不包含隐藏的节点位置信息,这时候调用上次存储的全部节点位置,并修改这次移动的节点位置,最后保存 var localtionPosition = JSON.parse(localStorage.getItem("position")); for (let index in arr) { localtionPosition[index] = { x: arr[index].x, y: arr[index].y } } setLocal(localtionPosition); } else { var position = network.getPositions(); setLocal(position); } }; // //选中节点 // // network.on("selectNode", function(params) { // // console.log(params) // // }); // //单击节点 // network.on("click", function(params) {}); // // 右键 // // network.on("hoverNode", function(params) { // // console.log(network); // // if (params.node) { // // var menuNode = document.getElementById('epMenu'); // // document.oncontextmenu = hideSysMenu; //屏蔽鼠标右键 // // var evt = window.event || arguments[0]; // // var rightedge = evt.clientX; // // var bottomedge = evt.clientY; // // epMenu.create({ left: rightedge, top: bottomedge }, [{ name: '删除关系', 'action': sayremove }, { name: '新增关系', 'action': sayadd }]); // // } // // }); // network.on("oncontext", function(params) { // // console.log(network); // // var nodeid = network.selectionHandler.hoverObj.nodes.id // // console.log(nodeid) // if (thisnode.node) { // var menuNode = document.getElementById('epMenu'); // document.oncontextmenu = hideSysMenu; //屏蔽鼠标右键 // var evt = window.event || arguments[0]; // var rightedge = evt.clientX; // var bottomedge = evt.clientY; // epMenu.create({ left: rightedge, top: bottomedge }, [{ name: '删除关系', 'action': sayremove }, { name: '新增关系', 'action': sayadd }]); // } // }); // // var networkCanvas = document.getElementById("mynetwork").getElementsByTagName("canvas")[0] // // function changeCursor(newCursorStyle) { // // networkCanvas.style.cursor = newCursorStyle; // // } // // function changeEventCursor(eventName, cursorType) { // // network.on(eventName, function() { // // changeCursor(cursorType); // // }); // // } // network.on('hoverNode', function(param) { // changeCursor('grab'); // thisnode = param; // }); var options = { autoResize: true, // Default:true 如果为true,则网络将自动检测其容器何时调整大小,并相应地重新绘制自己。如果为false,则可以在使用函数redraw()和setSize()调整容器的容器大小后强制重新绘制网络。 clickToUse: true, // Default:false 将网络配置clickToUse为时,只有在激活时才会对鼠标和触摸事件做出反应。激活时,网络周围会显示蓝色阴影边框。通过点击该网络将网络设置为活动状态,然后通过点击网络外部或按ESC键将其更改为非活动状态。 width: "100%", // 画布的宽度。可以百分比或像素 height: "100%", locale: "cn", // 选择区域设置。默认情况下,该语言是英语。 nodes: { borderWidth: 1, borderWidthSelected: 2, brokenImage: undefined, chosen: true, color: { border: '#2B7CE9', background: '#97C2FC', highlight: { border: '#2B7CE9', background: '#D2E5FF' }, hover: { border: '#2B7CE9', background: '#D2E5FF' } }, fixed: { x: false, y: false }, font: { color: '#343434', size: 14, // px face: 'arial', background: 'none', strokeWidth: 0, // px strokeColor: '#ffffff', align: 'center', multi: false, vadjust: 0, bold: { color: '#343434', size: 14, // px face: 'arial', vadjust: 0, mod: 'bold' }, ital: { color: '#343434', size: 14, // px face: 'arial', vadjust: 0, mod: 'italic', }, boldital: { color: '#343434', size: 14, // px face: 'arial', vadjust: 0, mod: 'bold italic' }, mono: { color: '#343434', size: 15, // px face: 'courier new', vadjust: 2, mod: '' } }, group: undefined, heightConstraint: false, hidden: false, icon: { face: 'FontAwesome', code: undefined, size: 50, //50, color: '#2B7CE9' }, image: undefined, label: undefined, labelHighlightBold: true, level: undefined, mass: 1, physics: true, scaling: { min: 10, max: 30, label: { enabled: false, min: 14, max: 30, maxVisible: 30, drawThreshold: 5 }, customScalingFunction: function(min, max, total, value) { if (max === min) { return 0.5; } else { let scale = 1 / (max - min); return Math.max(0, (value - min) * scale); } } }, shadow: { enabled: false, color: 'rgba(0,0,0,0.5)', size: 10, x: 5, y: 5 }, shape: 'ellipse', shapeProperties: { borderDashes: false, // only for borders borderRadius: 6, // only for box shape interpolation: false, // only for image and circularImage shapes useImageSize: false, // only for image and circularImage shapes useBorderWithImage: false // only for image shape }, size: 25, title: undefined, value: undefined, widthConstraint: false, x: undefined, y: undefined }, locales: { cn: { edit: '编辑', del: '删除选定', back: '返回', addNode: '添加节点', addEdge: '添加关联', editNode: '编辑节点', editEdge: '编辑关联', addDescription: '单击空白处来放置一个新节点。', edgeDescription: '单击一个节点并拖动到另一个节点以连接它们。', editEdgeDescription: '单击控制点并将其拖动到节点以连接到它。', createEdgeError: '无法将边缘链接到集群。', deleteClusterError: '不能删除集群。', editClusterError: '不能编辑集群。' } }, configure: { enabled: true, // 打开或关闭配置界面。 filter: function(option, path) { return path.indexOf('physics') !== -1 }, // 如果布尔值为true,则给出所有选项,false将不显示任何值。 如果提供了字符串,则允许以下任意组合:节点,边,布局,交互,操纵,物理,选择,渲染器。随意想出一个有趣的分开的字符。最后,当提供一个字符串数组时,任何前面提到的字段都被接​​受。当提供一个函数时,你会收到两个参数。选项对象中的选项和选项的路径。如果它返回true,则选项将显示在配置程序中。 // container: undefined, showButton: true // 在配置器底部显示生成选项按钮。 }, nodes: { font: { color: "#eee", size: 10 } }, edges: { smooth: { enabled: true, type: 'cubicBezier', // 'dynamic', 'continuous', 'discrete','diagonalCross', 'horizontal', 'vertical', 'curvedCW', 'curvedCCW', 'cubicBezier' forceDirection: 'vertical', //'horizontal', 'vertical', 'none' 该选项仅用于cubicBezier曲线。 roundness: 0.7 // 0 .. 1.0, }, // lable: "dkfjaksdj", color: "#737373" // 线条颜色 }, enableEditMode: true, layout: { // 自动层级布局 improvedLayout: true, randomSeed: 1, //配置每次生成的节点位置都一样,参数为数字1、2等 hierarchical: { enabled: true, //切换分层布局系统 levelSeparation: 260, //不同级别之间的距离。 nodeSpacing: 260, // 自由轴上节点之间的最小距离,这仅适用于初始布局。如果启用物理,则节点距离将存在有效的节点距离。 treeSpacing: 260, //不同树木之间的距离(独立网络) blockShifting: false, // 每个节点都会检查空白,并尽可能地将它的分支与它一起移动,并在任何级别上考虑nodeSpacing edgeMinimization: false, // 每个节点将尝试沿其自由轴移动以减少其边缘的总长度 parentCentralization: false, // 如果为true,则布局算法完成后,父节点将再次居中。 // direction: 'LR', // UD, DU, LR, RL // sortMethod: 'directed' // directed hubsize } }, manipulation: { enabled: true, addNode: function(data, callback) { document.getElementById('node-type').value = "1"; document.getElementById('node-label').value = ""; document.getElementById('saveButton').onclick = saveData.bind(this, data, callback); document.getElementById('cancelButton').onclick = clearPopUp.bind(); document.getElementById('network-popUp').style.display = 'block'; }, editNode: function(data, callback) { document.getElementById('node-label').value = deviceName; document.getElementById('saveButton').onclick = saveEditData.bind(this, data, callback); document.getElementById('cancelButton').onclick = cancelEdit.bind(this, callback); document.getElementById('network-popUp').style.display = 'block'; } }, selection: { enabled: true, // 打开或关闭配置界面。 getEdgeAt: function(data) { // if (isDo) { // callback(data); // 操作成功 // } else { // callback(null); // 操作失败 // } }, }, deleteNode: function(data, callback) { // do something if (isDo) { callback(data); // 操作成功 } else { callback(null); // 操作失败 } }, addEdge: function(data, callback) { // do something if (isDo) { callback(data); // 操作成功 } else { callback(null); // 操作失败 } }, editEdge: true, // 关系不可编辑 deleteEdge: function(data, callback) { // do something if (isDo) { callback(data); // 操作成功 } else { callback(null); // 操作失败 } }, // } interaction: { hover: true, navigationButtons: true, // 如果为真,则在网络画布上绘制导航按钮。这些是HTML按钮,可以使用CSS完全自定义。 keyboard: { enabled: true, speed: { x: -1, y: -1, zoom: 0.02 }, bindToWindow: false } // 启用键盘快捷键 }, physics: { // 采用分层布局系统,关闭物理布局 enabled: true, stabilization: false, barnesHut: { centralGravity: 8, // 中心重力吸引器将整个网络拉回中心 springLength: 80, // 边缘被建模为弹簧。这个弹簧长度是弹簧的剩余长度 gravitationalConstant: -80000, // 重力吸引。我们喜欢排斥 所以价值是负数。如果你想要排斥力更强,减小值(所以-10000,-50000)。 avoidOverlap: 0.2, // 接受范围:[0 .. 1]。当大于0时,会考虑节点的大小。该距离将由重力模型的节点的包围圆的半径计算。值1是最大重叠避免。 damping: 0.3, springConstant: 0.5 }, minVelocity: 16 // 一旦达到所有节点的最小速度,我们假设网络已经稳定,仿真停止。 // stabilization: {//如果开启,下面注释掉的监听图形绘制过程的函数才会生效 // enabled:true, // iterations:2000, // updateInterval:25 // } } }; /** * 查找设备 * @param name 设备名称/SN/MAC */ function findDevice(name) { var nodes = network.body.data.nodes._data; for (var i in nodes) { if (nodes[i].label == name || nodes[i].hostSn == name || nodes[i].hostMac == name) { // 具体需要可在此配置 network.focus(nodes[i].id, { scale: 2 }); return } } layer.msg("查找的设备不存在!", { icon: 5 }); } }]);