summaryrefslogtreecommitdiffstats
path: root/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/controller/performance-chartController.js
diff options
context:
space:
mode:
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.js231
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)
}]);