diff options
Diffstat (limited to 'usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/controller/alarm-chartController.js')
| -rw-r--r-- | usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/controller/alarm-chartController.js | 210 |
1 files changed, 130 insertions, 80 deletions
diff --git a/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/controller/alarm-chartController.js b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/controller/alarm-chartController.js index ba298553..d064f311 100644 --- a/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/controller/alarm-chartController.js +++ b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/controller/alarm-chartController.js @@ -21,6 +21,8 @@ app.controller('alarmchartCtrl', ['$scope', '$http', '$routeParams', '$window', $scope.ndaShow = false; $scope.hdaShow = false; $scope.sourceId = ""; + $scope.hourshow = false; + $scope.dayshow = true; $scope.today = function () { $scope.startTime = new Date(); $scope.endTime = new Date(); @@ -39,64 +41,6 @@ app.controller('alarmchartCtrl', ['$scope', '$http', '$routeParams', '$window', }; $scope.today(); - $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 () { $http({ method: 'POST', @@ -105,7 +49,7 @@ app.controller('alarmchartCtrl', ['$scope', '$http', '$routeParams', '$window', "sourceId": $scope.sourceId, "startTime": FormatDate($scope.startTime), "endTime": FormatDate($scope.endTime), - "showMode" : ($scope.showModeId==undefined?"auto":$scope.showModeId) + "format" : ($scope.showModeId==undefined?"auto":$scope.showModeId) }, headers: {'Content-Type': 'application/x-www-form-urlencoded'}, transformRequest: function (obj) { @@ -116,37 +60,45 @@ app.controller('alarmchartCtrl', ['$scope', '$http', '$routeParams', '$window', return str.join("&"); } }).then(function successCallback(resp) { + console.log(resp); $scope.chartShow = true; - if (resp.data.length > 0){ + if (resp.data.allList){ $scope.ndaShow = false; $scope.hdaShow = true; - $scope.data = [ - { - "key" : "Max" , - "bar": true, - "values" : resp.data - }]; - $scope.api.refresh(); + drawAlarmLine(resp.data,alarmChart); } else{ $scope.ndaShow = true; $scope.hdaShow = false; - $scope.data = [ - { - "key" : "Max" , - "bar": true, - "values" : [] - }]; - $scope.api.refresh(); } }, function errorCallback(resp) { - + }); } - + $scope.showModeIdChanged = function(){ + + if($scope.showModeId == 'hour'){ + // console.log(typeof($scope.startTime)) + // console.log(String($scope.startTime)) + 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.dayshow = true; + }else if($scope.showModeId == 'day'){ + $scope.hourshow = false; + $scope.dayshow = true; + }else if($scope.showModeId == 'month'){ + $scope.hourshow = false; + $scope.dayshow = false; + } + + } $scope.startTimeChanged = function () { + if ($scope.startTime > $scope.endTime) $scope.endTime = ""; }; @@ -171,11 +123,109 @@ app.controller('alarmchartCtrl', ['$scope', '$http', '$routeParams', '$window', opened: false }; - $scope.showModeIds = ["minute","hour","day","month","year"]; - + $scope.showModeIds = ["hour","day","month"]; + $scope.showModeId = 'day'; function FormatDate(strTime) { var date = new Date(strTime); - return date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate() + " " + date.getHours() + ":" + date.getMinutes(); + if($scope.showModeId == 'hour'){ + return date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate() + " " + date.getHours() + } + if($scope.showModeId == 'day'){ + return date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate() + } + if($scope.showModeId == 'month'){ + return date.getFullYear() + "-" + (date.getMonth() + 1) + } + + // return date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate() + " " + date.getHours() + ":" + date.getMinutes(); } - + // 获取折线图盒子 + var alarmChart = echarts.init(document.getElementById("alarmChart")); + + function drawAlarmLine(data,myChart){ + var names = Object.keys(data); + var myseries = []; + names.forEach(function (item) { + if(item != 'dateList'){ + myseries.push({ + name: item, + type: 'line', + 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: false, + 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 == 'month'){ + return value.slice(2,7) + } + } + }, + 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: ['blue', 'orange', 'red', 'pink','gray','purple'], + series: myseries + } + myChart.setOption(options, true); + } + // drawAlarmLine(data,alarmChart) }]); |