diff options
Diffstat (limited to 'usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/controller/performance-chartController.js')
-rw-r--r-- | usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/controller/performance-chartController.js | 231 |
1 files changed, 138 insertions, 93 deletions
diff --git a/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/controller/performance-chartController.js b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/controller/performance-chartController.js index aa138eaa..6d9c36a7 100644 --- a/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/controller/performance-chartController.js +++ b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/controller/performance-chartController.js @@ -17,11 +17,14 @@ app.controller('pertabCtrl', ['$scope', '$http', '$routeParams', '$window' , function ($scope, $http,$routeParams,$window) { $scope.chartShow = false; - $scope.ndaShow = false; - $scope.hdaShow = false; + $scope.ndaShow = false; + $scope.hdaShow = false; $scope.valuess = []; $scope.namesPIsShow = false; $scope.goIsShow = true; + $scope.hourshow = false; + $scope.dayshow = true; + $scope.timestep = '5'; $scope.today = function() { $scope.startTime = new Date(); $scope.endTime = new Date(); @@ -82,23 +85,24 @@ app.controller('pertabCtrl', ['$scope', '$http', '$routeParams', '$window' , $scope.namePChanged = function () { if ($scope.nameP != null){ - $http({ - method : "POST", - url : global_url + "/performance/names", - data : { "sourceId":$scope.nameP }, - headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, - transformRequest: function(obj) { - var str = []; - for (var p in obj) { - str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p])); - } - return str.join("&"); - } - }).then(function successCallback(resp) { - $scope.goIsShow = false; - },function errorCallback(resq) { + $scope.goIsShow = false; + // $http({ + // method : "POST", + // url : global_url + "/performance/names", + // data : { "sourceId":$scope.nameP }, + // headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, + // transformRequest: function(obj) { + // var str = []; + // for (var p in obj) { + // str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p])); + // } + // return str.join("&"); + // } + // }).then(function successCallback(resp) { + // $scope.goIsShow = false; + // },function errorCallback(resq) { - }); + // }); } else{ $scope.goIsShow = true; @@ -106,63 +110,7 @@ app.controller('pertabCtrl', ['$scope', '$http', '$routeParams', '$window' , } }; - $scope.options = { - chart: { - type: 'historicalBarChart', - height: 300, - margin : { - top: 20, - right: 20, - bottom: 65, - left: 50 - }, - x: function(d){return d[0];}, - y: function(d){return d[1];}, - showValues: true, - valueFormat: function(d){ - return d3.format(',.1f')(d); - }, - duration: 100, - xAxis: { - //axisLabel: 'X Axis', - tickFormat: function(d) { - return d3.time.format('%x %H:%M')(new Date(d)) - }, - rotateLabels: 30, - showMaxMin: true - }, - yAxis: { - //axisLabel: 'Y Axis', - axisLabelDistance: -10, - tickFormat: function(d){ - return d3.format(',.1f')(d); - } - }, - tooltip: { - keyFormatter: function(d) { - return d3.time.format('%x %H:%M')(new Date(d)); - } - }, - zoom: { - enabled: false, - scaleExtent: [1, 10], - useFixedDomain: false, - useNiceScale: false, - horizontalOff: false, - verticalOff: false, - unzoomEventType: 'dblclick.zoom' - } - } - }; - - - $scope.data = [ - { - "key" : "Quantity" , - "bar": true, - "values" : [] - }]; - + $scope.genDiagram = function () { $scope.chartShow = true; $http({ @@ -185,34 +133,39 @@ app.controller('pertabCtrl', ['$scope', '$http', '$routeParams', '$window' , } }).then(function successCallback(resp) { console.info(resp); - if (resp.data.length > 0){ + if (resp.data.dateList){ $scope.ndaShow = false; $scope.hdaShow = true; - $scope.data = [ - { - "key" : "Count" , - "bar": true, - "values" : resp.data - }]; - $scope.api.refresh(); + + drawPerformanceBar(resp.data,performanceChart); } else{ $scope.ndaShow = true; $scope.hdaShow = false; - $scope.data = [ - { - "key" : "Count" , - "bar": true, - "values" : [] - }]; - $scope.api.refresh(); + } },function errorCallback(resp) { }); }; + $scope.showModeIdChanged = function(){ + if($scope.showModeId == 'minute'){ + $scope.hourshow = true; + $scope.timestep = '5'; + }else if($scope.showModeId == 'hour'){ + var str = String($scope.startTime); + var str2 = String($scope.endTime); + $scope.startTime = new Date(str.replace(/\:[0-9]{2}\:/,':00:')); + $scope.endTime = new Date(str2.replace(/\:[0-9]{2}\:/,':00:')); + $scope.hourshow = true; + $scope.timestep = '0'; + }else if($scope.showModeId == 'day'){ + $scope.hourshow = false; + } + + } $scope.open1 = function() { $scope.popup1.opened = true; }; @@ -231,12 +184,104 @@ app.controller('pertabCtrl', ['$scope', '$http', '$routeParams', '$window' , $scope.modeShow = false; - $scope.showModeIds = ["minute","hour","day","month","year"]; - + $scope.showModeIds = ["minute","hour","day"]; + $scope.showModeId = 'day'; function FormatDate (strTime) { var date = new Date(strTime); return date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate()+" "+date.getHours()+":"+date.getMinutes(); } - + // 获取柱状图盒子 + var performanceChart = echarts.init(document.getElementById("performanceChart")); + + function drawPerformanceBar(data,myChart){ + var names = Object.keys(data); + var myseries = []; + names.forEach(function (item) { + if(item != 'dateList'){ + myseries.push({ + name: item, + type: 'bar', + // symbol: 'circle', + // symbolSize: 10, + data: data[item] + }) + } + }) + var options = { + tooltip: { + trigger: 'axis', + formatter: (params) => { + var res = '<p>' + params[0].name + '</p>' + '<div>'; + // console.log(params); + for (var i = 0; i < params.length; i++) { + res += '<span></span>' + params[i].seriesName + ' : ' + params[i].value + '</br>'; + } + res += '</div>'; + return res; + } + }, + legend: { + data: names, + top: 10, + icon: 'rect', + itemWidth: 10, + itemHeight: 10 + }, + grid: { + left: '3%', + right: '5%', + bottom: '5%', + top: '15%', + containLabel: true + }, + xAxis: { + type: 'category', + name: 'Time', + boundaryGap: true, + data: data.dateList, + axisLabel:{ + formatter:(value)=>{ + if($scope.showModeId == 'day'){ + return value.slice(5,10) + }else if($scope.showModeId == 'hour'){ + return value.slice(5,16) + }else if($scope.showModeId == 'minute'){ + return value.slice(5,16) + } + } + }, + axisLine: { + symbol: ['none', 'arrow'], + symbolOffset: [0, 12] + }, + axisTick: { + show: false, + }, + splitLine: { + show: true + } + }, + yAxis: { + type: 'value', + name: 'Num', + // max: 3, + axisLine: { + symbol: ['none', 'arrow'], + symbolOffset: [0, 12] + }, + axisTick: { + show: false + } + }, + color: ['green', 'orange', 'red', 'pink','gray','purple'], + series: myseries + } + myChart.setOption(options, true); + } + // var data = { + // dateList:["2018-05-23 34:35:00",2,3,4,5,6,7,8,9,10], + // valueList:[5,3,1,7,3,5,8,3,5,2] + // } + // drawPerformanceBar(data,performanceChart) }]); |