Fix alarm list page bug

Change-Id: I69a81921d62a4d483e69e0d3b24614e269a1858d
Issue-ID: USECASEUI-101
Signed-off-by: shentao <shentao@chinamobile.com>

6 files changed, 465 insertions, 114 deletions

diff --git a/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/controller/alarmController.js b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/controller/alarmController.js
index 66cf24cf..0acf0d41 100644
--- a/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/controller/alarmController.js
+++ b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/controller/alarmController.js
@@ -14,30 +14,25 @@
  limitations under the License.
  */
 var alarmDetailId = "";
-app.controller('alarmGridCtrl', ['$scope', '$log', '$http', '$timeout', '$interval' , '$window',
-    function ($scope, $log, $http, $timeout, $interval,$window) {
-        $scope.jump = function(value){
-            alarmDetailId=value;
+
+app.controller('alarmGridCtrl', ['$scope', '$log', '$http', '$timeout', '$interval', '$window',
+    function ($scope, $log, $http, $timeout, $interval, $window) {
+        $scope.jump = function (value) {
+            alarmDetailId = value;
             var obj = $("#lm");
             angular.element(obj).scope().currentTab = "app/uui/fusion/scripts/view-models/alarm-details.html";
-            //angular.element(obj).scope().$apply();
+            s
         };
         $scope.toChart = function () {
             var obj = $("#lm");
             angular.element(obj).scope().currentTab = "app/uui/fusion/scripts/view-models/alarm-chart.html";
         };
-        $scope.vfstatus = "null";
 
-        $scope.selectOpen = function (v) {
-            $scope.vfstatus = typeof(v) == "undefined" ? "null" : v;
-            $scope.selectedOpen = v;
-        };
         $scope.itemsByPagea = 10;
 
-
         $http({
-            url : global_url + "/alarm/statusCount",
-            method : "GET"
+            url: global_url + "/alarm/statusCount",
+            method: "GET"
         }).then(function successCallback(resp) {
             $scope.open[0].count = resp.data[1];
             $scope.open[1].count = resp.data[2];
@@ -45,19 +40,28 @@ app.controller('alarmGridCtrl', ['$scope', '$log', '$http', '$timeout', '$interv
 
         });
 
-        $scope.open = [
-            {id: 1, name: 'Active', count: 0},
-            {id: 2, name: 'Closed', count: 0},
-            {id: undefined, name: 'All', count: 0}
+        // li的数据
+        $scope.open = [{
+                id: 1,
+                name: 'Active',
+                count: 0
+            },
+            {
+                id: 2,
+                name: 'Closed',
+                count: 0
+            },
+            {
+                id: undefined,
+                name: 'All',
+                count: 0
+            }
         ];
 
-
-        $scope.activeOpen = function (open_id) {
-            return open_id == $scope.selectedOpen;
+        $scope.menuState = {
+            show: false
         };
 
-        $scope.menuState = {show: false};
-
         $scope.toggleMenu = function () {
             $scope.menuState.show = !$scope.menuState.show;
         };
@@ -78,42 +82,62 @@ app.controller('alarmGridCtrl', ['$scope', '$log', '$http', '$timeout', '$interv
             opened: false
         };
 
-    }]);
-app.controller('pipeAlarmCtrl', ['$scope','ResourceAlarm', function ($scope,service) {
+    }
+]);
+app.controller('pipeAlarmCtrl', ['$scope', 'ResourceAlarm', '$interval', function ($scope, service, $interval) {
     $scope.condition1 = "";
     $scope.condition2 = "";
     $scope.condition3 = "";
     $scope.condition4 = "";
     $scope.condition5 = "";
+    $scope.vfstatus = "null";
+
+    $scope.selectOpen = function (v, func) {
+        $scope.vfstatus = typeof (v) == "undefined" ? "null" : v;
+        $scope.selectedOpen = v;
+        func($scope.tableState);
+    };
+
 
+    $scope.activeOpen = function (open_id) {
+        return open_id == $scope.selectedOpen;
+    };
 
     var ctrl = this;
 
-    this.displayed = [];
+    ctrl.displayed = [];
 
-    this.callServer = function callServer(tableState) {
+    ctrl.callServer = function callServer(tableState) {
         ctrl.isLoading = true;
         $scope.tableState = tableState;
         var pagination = tableState.pagination;
+        console.log(pagination);
 
-        var start = pagination.start/pagination.number+1 || 0;
+        var start = pagination.start / pagination.number + 1 || 0;
         var number = pagination.number || 10;
 
-        service.getPage(start, number,$scope.condition1===""?"":$scope.condition1,
-            $scope.condition2===""?"":$scope.condition2, $scope.condition3===""?"":$scope.condition3,
-            $scope.condition4===""?"":$scope.condition4, $scope.condition5===""?"":$scope.condition5,
+        service.getPage(start, number, $scope.condition1 === "" ? "" : $scope.condition1,
+            $scope.condition2 === "" ? "" : $scope.condition2, $scope.condition3 === "" ? "" : $scope.condition3,
+            $scope.condition4 === "" ? "" : $scope.condition4, $scope.condition5 === "" ? "" : $scope.condition5,
             $scope.vfstatus).then(function (result) {
             ctrl.displayed = result.data;
             tableState.pagination.numberOfPages = result.numberOfPages;
             ctrl.isLoading = false;
         });
+
+        // var timer = $interval(function () {
+        //     ctrl.callServer($scope.tableState);
+        // }, 5000)
+
+        // console.log($scope)
     };
 
-}]).factory('ResourceAlarm', ['$q', '$filter', '$timeout','$http', function ($q, $filter, $timeout,$http) {
+}]).factory('ResourceAlarm', ['$q', '$filter', '$timeout', '$http', function ($q, $filter, $timeout, $http) {
     var randomsItems = [];
     var totalCount = 0;
+
     function getPage(start, number) {
-        var url = global_url+'/alarm/' + start + '/' + number + '';
+        var url = global_url + '/alarm/' + start + '/' + number + '';
         url += arguments[2] === "" ? "/null" : "/" + arguments[2];
         url += arguments[3] === "" ? "/null" : "/" + arguments[3];
         url += arguments[4] === "" ? "/null" : "/" + arguments[4];
@@ -121,14 +145,13 @@ app.controller('pipeAlarmCtrl', ['$scope','ResourceAlarm', function ($scope,serv
         url += arguments[6] === "" ? "/null" : "/" + FormatDate(arguments[6]);
         url += arguments[7] === "" ? "/null" : "/" + arguments[7];
         $http({
-            url : url,
-            method : "GET"
+            url: url,
+            method: "GET"
         }).then(function SuccessCallback(resp) {
-            console.info(resp);
-            if (resp.data.alarms.length > 0){
+            if (resp.data.alarms.length > 0) {
                 randomsItems = resp.data.alarms;
                 totalCount = resp.data.totalRecords;
-            }else{
+            } else {
                 randomsItems = [];
                 totalCount = 0;
             }
@@ -154,6 +177,4 @@ app.controller('pipeAlarmCtrl', ['$scope','ResourceAlarm', function ($scope,serv
     return {
         getPage: getPage
     };
-
-
 }]);
\ No newline at end of file
diff --git a/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/controller/left-menuController.js b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/controller/left-menuController.js
index 985ec877..03e90bc2 100644
--- a/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/controller/left-menuController.js
+++ b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/controller/left-menuController.js
@@ -13,17 +13,40 @@
  See the License for the specific language governing permissions and
  limitations under the License.
  */
-var currentTab = 'app/uui/fusion/scripts/view-models/alarm.html';
+var currentTab = 'app/uui/fusion/scripts/view-models/performance.html';
 
-app.controller('cmCtrl',['$scope',function ($scope) {
-  $scope.routeData = [
-    {name : 'Services' , url : 'app/uui/fusion/scripts/view-models/lifecyclemanagement.html' , nclass : 'fa fa-users'},
-    {name : 'Alarm' , url : 'app/uui/fusion/scripts/view-models/alarm.html' , nclass : 'fa fa-users'},
-    {name : 'Performance' , url : 'app/uui/fusion/scripts/view-models/performance.html', nclass : 'fa fa-cog'}
+app.controller('cmCtrl', ['$scope', function ($scope) {
+  $scope.routeData = [{
+      name: 'Services',
+      url: 'app/uui/fusion/scripts/view-models/lifecyclemanagement.html',
+      nclass: 'fa fa-users'
+    },
+    {
+      name: 'Alarm',
+      url: 'app/uui/fusion/scripts/view-models/alarm.html',
+      nclass: 'fa fa-users'
+    },
+    {
+      name: 'Performance',
+      url: 'app/uui/fusion/scripts/view-models/performance.html',
+      nclass: 'fa fa-cog'
+    }
+    /*{
+      name: 'Topological diagram',
+      url: 'app/uui/fusion/scripts/view-models/topology.html',
+      nclass: 'fa fa-cog'
+    },
+    {
+      name: 'Device topological',
+      url: 'app/uui/fusion/scripts/view-models/device-topological.html',
+      nclass: 'fa fa-cog'
+    }*/
   ];
   $scope.currentTab = currentTab;
-  $scope.$watch('currentTab',  function(newValue, oldValue) {
-    if (newValue === oldValue) { return; } // AKA first run
+  $scope.$watch('currentTab', function (newValue, oldValue) {
+    if (newValue === oldValue) {
+      return;
+    } // AKA first run
     // $scope.onClickTab(newValue);
   });
   $scope.onClickTab = function (url) {
@@ -32,4 +55,4 @@ app.controller('cmCtrl',['$scope',function ($scope) {
   $scope.isActiveTab = function (tabRoute) {
     return tabRoute == $scope.currentTab;
   }
-}]);
+}]);
\ No newline at end of file
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 1e9c0e1b..aa138eaa 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
@@ -16,9 +16,9 @@
 
 app.controller('pertabCtrl', ['$scope', '$http', '$routeParams', '$window' ,
     function ($scope, $http,$routeParams,$window) {
-		$scope.chartShow = false;
-		$scope.ndaShow = false;
-		$scope.hdaShow = false;
+        $scope.chartShow = false;
+	$scope.ndaShow = false;
+	$scope.hdaShow = false;
         $scope.valuess = [];
         $scope.namesPIsShow = false;
         $scope.goIsShow = true;
diff --git a/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/controller/performanceController.js b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/controller/performanceController.js
index 23a59389..cb897a46 100644
--- a/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/controller/performanceController.js
+++ b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/controller/performanceController.js
@@ -14,14 +14,13 @@
  limitations under the License.
  */
 //
-var permanceId="";
-app.controller('perGridCtrl', ['$scope','$http', '$window', '$interval', '$window',
-    function ($scope, $http , $window, $interval) {
-        $scope.jump = function(value){
-            permanceId=value;
+var permanceId = "";
+app.controller('perGridCtrl', ['$scope', '$http', '$window', '$interval',
+    function ($scope, $http, $window, $interval) {
+        $scope.jump = function (value) {
+            permanceId = value;
             var obj = $("#lm");
             angular.element(obj).scope().currentTab = "app/uui/fusion/scripts/view-models/performance-details.html";
-            //angular.element(obj).scope().$apply();
         };
 
         $scope.itemsByPage = 10;
@@ -31,7 +30,9 @@ app.controller('perGridCtrl', ['$scope','$http', '$window', '$interval', '$windo
             angular.element(obj).scope().currentTab = "app/uui/fusion/scripts/view-models/performance-chart.html";
         };
 
-        $scope.menuState = {show: false}
+        $scope.menuState = {
+            show: false
+        }
         $scope.toggleMenu = function () {
             $scope.menuState.show = !$scope.menuState.show;
         }
@@ -39,10 +40,13 @@ app.controller('perGridCtrl', ['$scope','$http', '$window', '$interval', '$windo
         $scope.checkResults = [];
 
 
-        $scope.menuState = {show: false}
-        $scope.toggleMenu = function () {
-            $scope.menuState.show = !$scope.menuState.show;
-        }
+        // $scope.menuState = {
+        //     show: false
+        // }
+        // $scope.toggleMenu = function () {
+        //     $scope.menuState.show = !$scope.menuState.show;
+        // }
+
         $scope.open1 = function () {
             $scope.popup1.opened = true;
         };
@@ -59,55 +63,61 @@ app.controller('perGridCtrl', ['$scope','$http', '$window', '$interval', '$windo
             opened: false
         };
 
-    }]);
-app.controller('pipeCtrl', ['$scope','Resource', function ($scope,service) {
-    $scope.seek1 = "";
-    $scope.seek2 = "";
-    $scope.seek3 = "";
-    $scope.seek4 = "";
-    $scope.seek5 = "";
-
-
-    var ctrl = this;
-
-    this.displayed = [];
-
-    this.callServer = function callServer(tableState) {
-        ctrl.isLoading = true;
-        $scope.tableState = tableState;
-        var pagination = tableState.pagination;
+    }
+]);
+app.controller('pipeCtrl', ['$scope', 'Resource', '$interval', function ($scope, service, $interval) {
+        $scope.seek1 = "";
+        $scope.seek2 = "";
+        $scope.seek3 = "";
+        $scope.seek4 = "";
+        $scope.seek5 = "";
+
+        var ctrl = this;
+
+        ctrl.displayed = [];
+
+        ctrl.callServer = function callServer(tableState) {
+            ctrl.isLoading = true;
+            $scope.tableState = tableState;
+            var pagination = tableState.pagination;
+
+            var start = pagination.start / pagination.number + 1 || 0;
+            var number = pagination.number || 10;
+
+            service.getPage(start, number, $scope.seek1 === "" ? "null" : $scope.seek1,
+                $scope.seek2 === "" ? "null" : $scope.seek2, $scope.seek3 === "" ? "null" : $scope.seek3,
+                $scope.seek4 === "" ? "null" : $scope.seek4, $scope.seek5 === "" ? "null" : $scope.seek5).then(function (result) {
+                ctrl.displayed = result.data;
+                tableState.pagination.numberOfPages = result.numberOfPages;
+                ctrl.isLoading = false;
+            });
 
-        var start = pagination.start/pagination.number+1 || 0;
-        var number = pagination.number || 10;
+            // $interval(function () {
+            //     ctrl.callServer($scope.tableState);
+            // }, 5000)
 
-        service.getPage(start, number,$scope.seek1===""?"null":$scope.seek1,
-            $scope.seek2===""?"null":$scope.seek2, $scope.seek3===""?"null":$scope.seek3,
-            $scope.seek4===""?"null":$scope.seek4, $scope.seek5===""?"null":$scope.seek5).then(function (result) {
-            ctrl.displayed = result.data;
-            tableState.pagination.numberOfPages = result.numberOfPages;
-            ctrl.isLoading = false;
-        });
-    };
+        };
 
-}])
-    .factory('Resource', ['$q', '$filter', '$timeout','$http', function ($q, $filter, $timeout,$http) {
+    }])
+    .factory('Resource', ['$q', '$filter', '$timeout', '$http', function ($q, $filter, $timeout, $http) {
         var randomsItems = [];
         var totalCount = 0;
+
         function getPage(start, number) {
-            var url = global_url+'/performance/' + start + '/' + number + '';
+            var url = global_url + '/performance/' + start + '/' + number + '';
             url += arguments[2] === "" ? "/null" : "/" + arguments[2];
             url += arguments[3] === "" ? "/null" : "/" + arguments[3];
             url += arguments[4] === "" ? "/null" : "/" + arguments[4];
             url += arguments[5] === "null" ? "/null" : "/" + FormatDate(arguments[5]);
             url += arguments[6] === "null" ? "/null" : "/" + FormatDate(arguments[6]);
             $http({
-                url : url,
-                method : "GET"
+                url: url,
+                method: "GET"
             }).then(function SuccessCallback(resp) {
-                if (resp.data.performances.length > 0){
+                if (resp.data.performances.length > 0) {
                     randomsItems = resp.data.performances;
                     totalCount = resp.data.totalRecords;
-                }else{
+                } else {
                     randomsItems = [];
                     totalCount = 0;
                 }
@@ -136,24 +146,23 @@ app.controller('pipeCtrl', ['$scope','Resource', function ($scope,service) {
         };
 
 
-    }]).directive('stRatio',function(){
-    return {
-        link:function(scope, element, attr){
-            var ratio=+(attr.stRatio);
+    }]).directive('stRatio', function () {
+        return {
+            link: function (scope, element, attr) {
+                var ratio = +(attr.stRatio);
 
-            element.css('width',ratio+'%');
+                element.css('width', ratio + '%');
 
+            }
+        };
+    }).directive('pageSelect', function () {
+        return {
+            restrict: 'E',
+            template: '<input type="text" class="select-page" ng-model="inputPage" ng-change="selectPage(inputPage)">',
+            link: function (scope, element, attrs) {
+                scope.$watch('currentPage', function (c) {
+                    scope.inputPage = c;
+                });
+            }
         }
-    };
-}).directive('pageSelect', function() {
-    return {
-        restrict: 'E',
-        template: '<input type="text" class="select-page" ng-model="inputPage" ng-change="selectPage(inputPage)">',
-        link: function(scope, element, attrs) {
-            scope.$watch('currentPage', function(c) {
-                scope.inputPage = c;
-            });
-        }
-    }
-});
-
+    });
\ No newline at end of file
diff --git a/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/controller/topological.js b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/controller/topological.js
new file mode 100644
index 00000000..8e4731e4
--- /dev/null
+++ b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/controller/topological.js
@@ -0,0 +1,182 @@
+/*
+ Copyright (C) 2017 CMCC, Inc. and others. All rights reserved.
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+app.controller('devicetopologicalCtrl', ['$scope', '$http', function ($scope, $http) {
+  $(document).ready(function () {
+    var canvas = document.getElementById('canvas');
+    var height = canvas.clientHeight;
+    var width = canvas.clientWidth;
+    var stage = new JTopo.Stage(canvas);
+    var scene = new JTopo.Scene();
+    // scene.background = '/app/uui/fusion/images/bg.jpg';
+
+
+    function node(x, y, img, name, zIndex) {
+      var node = new JTopo.Node(name);
+      node.setImage('/app/uui/fusion/images/' + img, true);
+      node.setLocation(x, y);
+      node.zIndex = zIndex;
+      scene.add(node);
+      return node;
+    }
+
+
+    function newFoldLink(nodeA, nodeZ, text, direction) {
+      var link = new JTopo.FoldLink(nodeA, nodeZ, text);
+      link.direction = direction || 'horizontal';
+      link.lineWidth = 1; // 线宽
+      // link.bundleOffset = 10; // 折线拐角处的长度
+      link.bundleGap = 10; // 线条之间的间隔
+      line.zIndex = 8;
+      scene.add(link);
+      return link;
+    }
+
+
+    function line(startX, startY, endX, endY, name) {
+      var start = new JTopo.Node();
+      start.setLocation(startX, startY);
+      var end = new JTopo.Node();
+      end.setLocation(endX, endY);
+      var line = new JTopo.Link(start, end);
+      line.text = name;
+      line.zIndex = 5;
+      scene.add(line);
+      return line;
+    }
+
+    var container = new JTopo.Container();
+    container.borderRadius = 200;
+    container.setBound(0, 0, 300, 300);
+    container.dragble = false;
+    container.background = '/app/uui/fusion/images/cloud_r.png';
+
+    var container2 = new JTopo.Container()
+    container2.borderRadius = 200;
+    container2.setBound(0, 0, 300, 300);
+    container2.dragble = false;
+    container2.background = '/app/uui/fusion/images/cloud_r.png';
+
+    var routerX = width / 2 - 40;
+    var routerY = height / 2;
+
+    var router1 = node(routerX - 80, routerY - 40, 'router-all.png', '');
+    var router2 = node(routerX + 80, routerY - 40, 'router-all.png', '');
+    scene.add(new JTopo.Link(router1, router2));
+
+    var gateway1 = node(routerX - 200, routerY + 80, 'gateway-all.png', '', 10);
+    newFoldLink(gateway1, router1);
+    var gateway2 = node(routerX + 200, routerY + 80, 'gateway-all.png', '', 10);
+    newFoldLink(gateway2, router2);
+
+    var ctrl_line = line(routerX - 460, routerY + 40, routerX - 160, routerY + 40);
+    var data_line = line(routerX - 460, routerY + 20, routerX - 160, routerY + 20);
+    var ctrl_line_2 = line(routerX + 485, routerY + 20, routerX + 185, routerY + 20);
+    var data_line_2 = line(routerX + 485, routerY + 40, routerX + 185, routerY + 40);
+
+    var c1_vnf_1 = node(routerX - 400, routerY - 70, 'vnf-all.png', '', 6);
+    var c1_vnf_2 = node(routerX - 350, routerY - 70, 'vnf-all.png', '', 6);
+    var c1_vnf_3 = node(routerX - 300, routerY - 70, 'vnf-all.png', '', 6);
+
+    var c2_vnf_1 = node(routerX + 300, routerY - 70, 'vnf-all.png', '', 6);
+    var c2_vnf_2 = node(routerX + 350, routerY - 70, 'vnf-all.png', '', 6);
+    var c2_vnf_3 = node(routerX + 400, routerY - 70, 'vnf-all.png', '', 6);
+
+    var ctline_c1_vnf1 = node(routerX - 390, routerY + 50, 'map_data_point_blue.png', '');
+    var daline_c1_vnf1 = node(routerX - 380, routerY + 30, 'map_data_point_blue.png', '');
+    newFoldLink(c1_vnf_1, ctline_c1_vnf1);
+    newFoldLink(c1_vnf_1, daline_c1_vnf1);
+
+    var ctline_c1_vnf2 = node(routerX - 340, routerY + 50, 'map_data_point_blue.png', '');
+    var daline_c1_vnf2 = node(routerX - 330, routerY + 30, 'map_data_point_blue.png', '');
+    newFoldLink(c1_vnf_2, ctline_c1_vnf2);
+    newFoldLink(c1_vnf_2, daline_c1_vnf2);
+
+
+    var ctline_c1_vnf3 = node(routerX - 290, routerY + 50, 'map_data_point_blue.png', '');
+    var daline_c1_vnf3 = node(routerX - 280, routerY + 30, 'map_data_point_blue.png', '');
+    newFoldLink(c1_vnf_3, ctline_c1_vnf3);
+    newFoldLink(c1_vnf_3, daline_c1_vnf3);
+
+
+    var ctline_gateway1 = node(routerX - 180, routerY + 50, 'map_data_point_blue.png', '');
+    var daline_gateway1 = node(routerX - 190, routerY + 30, 'map_data_point_blue.png', '');
+    newFoldLink(gateway1, ctline_gateway1);
+    newFoldLink(gateway1, daline_gateway1);
+
+    container.add(c1_vnf_1);
+    container.add(c1_vnf_2);
+    container.add(c1_vnf_3);
+    container.add(gateway1);
+    container.add(ctline_c1_vnf1);
+    container.add(daline_c1_vnf1);
+    container.add(ctline_c1_vnf2);
+    container.add(daline_c1_vnf2);
+    container.add(ctline_c1_vnf3);
+    container.add(daline_c1_vnf3);
+    container.add(ctline_gateway1);
+    container.add(daline_gateway1);
+    container.add(ctrl_line.nodeA);
+    container.add(ctrl_line.nodeZ);
+    container.add(data_line.nodeA);
+    container.add(data_line.nodeZ);
+
+    scene.add(container);
+
+
+    var ctline_c2_vnf1 = node(routerX + 320, routerY + 30, 'map_data_point_blue.png', '');
+    var daline_c2_vnf1 = node(routerX + 310, routerY + 50, 'map_data_point_blue.png', '');
+    newFoldLink(c2_vnf_1, ctline_c2_vnf1);
+    newFoldLink(c2_vnf_1, daline_c2_vnf1);
+
+    var ctline_c2_vnf2 = node(routerX + 370, routerY + 30, 'map_data_point_blue.png', '');
+    var daline_c2_vnf2 = node(routerX + 360, routerY + 50, 'map_data_point_blue.png', '');
+    newFoldLink(c2_vnf_2, ctline_c2_vnf2);
+    newFoldLink(c2_vnf_2, daline_c2_vnf2);
+
+
+    var ctline_c2_vnf3 = node(routerX + 420, routerY + 30, 'map_data_point_blue.png', '');
+    var daline_c2_vnf3 = node(routerX + 410, routerY + 50, 'map_data_point_blue.png', '');
+    newFoldLink(c2_vnf_3, ctline_c2_vnf3);
+    newFoldLink(c2_vnf_3, daline_c2_vnf3);
+
+
+    var ctline_gateway2 = node(routerX + 240, routerY + 30, 'map_data_point_blue.png', '');
+    var daline_gateway2 = node(routerX + 230, routerY + 50, 'map_data_point_blue.png', '');
+    newFoldLink(gateway2, ctline_gateway2);
+    newFoldLink(gateway2, daline_gateway2);
+
+    container2.add(c2_vnf_1);
+    container2.add(c2_vnf_2);
+    container2.add(c2_vnf_3);
+    container2.add(gateway2);
+    container2.add(ctline_c2_vnf1);
+    container2.add(daline_c2_vnf1);
+    container2.add(ctline_c2_vnf2);
+    container2.add(daline_c2_vnf2);
+    container2.add(ctline_c2_vnf3);
+    container2.add(daline_c2_vnf3);
+    container2.add(ctline_gateway2);
+    container2.add(daline_gateway2);
+    container2.add(ctrl_line_2.nodeA);
+    container2.add(ctrl_line_2.nodeZ);
+    container2.add(data_line_2.nodeA);
+    container2.add(data_line_2.nodeZ);
+
+    scene.add(container2);
+    stage.add(scene);
+  });
+}])
\ No newline at end of file
diff --git a/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/controller/topology-diagram.js b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/controller/topology-diagram.js
new file mode 100644
index 00000000..d9d5078a
--- /dev/null
+++ b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/controller/topology-diagram.js
@@ -0,0 +1,116 @@
+/*
+ Copyright (C) 2017 CMCC, Inc. and others. All rights reserved.
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+app.controller('topologyCtrl', ['$scope', '$http', '$location', 'drawTree', '$timeout', function ($scope, $http, $location, drawTree, $timeout) {
+
+    // 获取拓补图盒子
+    var myChart = echarts.init(document.getElementById("tree-container"));
+    // 请求数据，渲染选项标签
+    $http({
+        method: 'GET',
+        url: global_url + '/topology/services'
+    }).then(function successCallback(response) {
+        $scope.serviceType = response.data;
+        $scope.selectedName = response.data[0];
+    }, function errorCallback(error) {
+
+    }).then(function () {
+        // 默认渲染第一条拓补图
+        $http({
+            method: 'GET',
+            url: global_url + '/topology/' + $scope.selectedName.ServiceName,
+        }).then(function successCallback(response) {
+            drawTree.treeChart(false, response.data, myChart);
+
+        }, function errorCallback(error) {
+
+        })
+    });
+
+    // 点击切换拓补图
+    $scope.selectedNameChanged = function (selectedName) {
+        $http({
+            method: 'GET',
+            url: global_url + '/topology/' + selectedName.ServiceName,
+        }).then(function successCallback(response) {
+            drawTree.treeChart(true, response.data, myChart);
+        }, function errorCallback(error) {
+
+        })
+    };
+
+}]).factory('drawTree', function () {
+    function treeChart(isChange, data, myChart) {
+
+        if (isChange) {
+            myChart.clear(); //如果切换就清空下
+        }
+        data.symbol = "image://./app/uui/fusion/images/E2E.png";
+        for (k in data.children) {
+            data.children[k].symbol = "image://./app/uui/fusion/images/NS.png";
+            if (data.children[k].children) {
+                for (i in data.children[k].children) {
+                    if (data.children[k].children[i].isAlarm) {
+                        data.children[k].children[i].symbol = "image://./app/uui/fusion/images/vnf-alarm.png";
+                    } else {
+                        data.children[k].children[i].symbol = "image://./app/uui/fusion/images/vnf-1.png";
+                    }
+                }
+            }
+        }
+
+        var option = {
+            tooltip: {
+                trigger: 'item',
+                triggerOn: 'mousemove'
+            },
+            series: [{
+                type: 'tree',
+                top: '20%',
+                left: '7%',
+                bottom: '20%',
+                right: '10%',
+                symbolSize: 50,
+                orient: 'vertical',
+                label: {
+                    normal: {
+                        position: 'bottom',
+                        fontSize: 16,
+                        color: '#000'
+                    }
+                },
+                leaves: {
+                    label: {
+                        normal: {
+                            position: 'right',
+                            verticalAlign: 'middle',
+                            align: 'left'
+                        }
+                    }
+                },
+                lineStyle: {
+                    width: 3,
+                    curveness: 0,
+                },
+                data: [data],
+                expandAndCollapse: true
+            }]
+        }
+        myChart.setOption(option, true);
+    }
+    return {
+        treeChart: treeChart
+    }
+})
\ No newline at end of file