GSO-64

Change-Id: I3ae3efbe2729aa8a657b15628b45eacdc1568918 Signed-off-by: “shentao” <shentao@chinamobile.com>
author: “shentao” <shentao@chinamobile.com> 2016-10-27 16:26:11 +0800
committer: “shentao” <shentao@chinamobile.com> 2016-10-27 16:26:11 +0800
commit: abe9f53436ef47d6d5bf1485fc5ddf53cae8850f (patch)
tree: 05472370ca6f0e0ea36b4f9419071c6b7b72f3d3 /openo-portal/portal-performance
parent: ac67d7e8d6590299701b560559e332c6c48dc062 (diff)
30 files changed, 7146 insertions, 0 deletions
diff --git a/openo-portal/portal-performance/pom.xml b/openo-portal/portal-performance/pom.xml
new file mode 100644
index 00000000..c317daf2
--- /dev/null
+++ b/openo-portal/portal-performance/pom.xml
@@ -0,0 +1,40 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+    Copyright 2016, CMCC Technologies Co., Ltd.
+
+    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.
+-->
+<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
+  <parent>
+    <groupId>org.openo.gso.gui</groupId>
+    <artifactId>openo-portal</artifactId>
+    <version>1.0.0-SNAPSHOT</version>
+  </parent>
+
+  <modelVersion>4.0.0</modelVersion>
+  <artifactId>portal-performance</artifactId>
+  <version>1.0.0-SNAPSHOT</version>
+  <packaging>war</packaging>
+
+  <build>
+    <plugins>
+      <plugin>
+        <groupId>org.apache.maven.plugins</groupId>
+        <artifactId>maven-war-plugin</artifactId>
+        <configuration>
+          <failOnMissingWebXml>false</failOnMissingWebXml>
+        </configuration>
+      </plugin>
+    </plugins>
+  </build>
+</project>
diff --git a/openo-portal/portal-performance/src/main/webapp/performance/alarm_view.html b/openo-portal/portal-performance/src/main/webapp/performance/alarm_view.html
new file mode 100644
index 00000000..2e883ee6
--- /dev/null
+++ b/openo-portal/portal-performance/src/main/webapp/performance/alarm_view.html
@@ -0,0 +1,339 @@
+<!--
+    Copyright 2016, CMCC Technologies Co., Ltd.
+
+    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.
+-->
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="UTF-8">
+		<link href="../common/thirdparty/font-awesome/css/font-awesome.min.css" rel="stylesheet" id="font_awesome"/>
+		<link href="../common/thirdparty/bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
+		<link href="../common/thirdparty/uniform/css/uniform.default.css" rel="stylesheet"/>
+		<link href="../common/thirdparty/zTree/css/zTreeStyle/zTreeStyle.css" type="text/css" rel="stylesheet">
+		<link href="../common/thirdparty/icheck/skins/all.css" type="text/css" rel="stylesheet">
+		<link href="../common/thirdparty/bootstrap-daterangepicker/daterangepicker-bs3.css" rel="stylesheet">
+		<link href="../common/css/plugins.css" rel="stylesheet" type="text/css">
+		<link href="../common/css/ZteIctIcons/style.css" rel="stylesheet" type="text/css"/>
+		<link href="../common/css/ngict-component.css" rel="stylesheet" type="text/css">
+		<link href="css/alarmsQuery.css" rel="stylesheet" type="text/css">
+	</head>
+	<body>
+		<div id="alarmsDiv" class="container-fluid ms-controller" ms-controller="curAlarmsController">
+			<div class="row" style=" margin-top: 15px;">
+				<div class="col-xs-6 col-md-6 col-sm-6 col-lg-6 titlefont searchTitle">
+					<span id="ngict_fm_iui_curalarm_currentAlarm" name_i18n="openo_alarm_i18n"></span>
+				</div>
+			</div>
+			<div class="separator-line"></div>
+			<div class="row-fluid filtergroup">
+				<div>
+					<div class="btn-group">
+						<button class="btn btnWhite circleBtn" ms-repeat-el="severityTypes" ms-class="<!--el.class-->:severityTypes[$index].value" ms-click="tabClicked(el ,this)"><!--el.name--></button>
+					</div>
+					<div class="btn-group btn-groupBlue">
+						<button class="btn btnWhite circleBtn" ms-repeat-el="ackStateTypes" ms-class-blueActive="el.value" ms-click="tabClicked(el ,this)"><!--el.name--></button>
+					</div>
+					<div class="btn-group btn-groupBlue circleBtn">
+						<button class="btn btnWhite circleBtn" ms-repeat-el="filterStateTypes" ms-class-blueActive="el.value" ms-click="tabClicked(el ,this)"><!--el.name--></button>
+					</div>
+					<div class="btn-group flRight">
+						<span class=" adCondition">
+							<button id="moreCondBtn" type="button" class="btn radius_l white" ms-click="moreCondClicked()" ms-class-blueActive="vm.moreCondBtn">
+								<span class="caret"></span><span id="ngict_fm_iui_curalarm_advance" name_i18n="openo_alarm_i18n"></span>
+							</button>
+						</span>
+					</div>
+				</div>
+			</div>
+			<div class="row" id="moreCond" style="display: none;">
+				<div class="row" style="margin-top: 20px;">
+					<span id="alLocation" class="cond_zone">
+						<button class="condSelect btn white radius_l">
+							<span id="ngict_fm_iui_curalarm_alarmPosition" name_i18n="openo_alarm_i18n"></span>
+						</button>
+						<span class="cond_selected">
+							<span id="ngict_fm_iui_curalarm_locationSelected" name_i18n="openo_alarm_i18n"></span>
+						</span>
+					</span>
+					<span id="alType" class="cond_zone">
+						<button class="condSelect btn white radius_l">
+							<span id="ngict_fm_iui_curalarm_alarmType" name_i18n="openo_alarm_i18n"></span>
+						</button>
+						<span class="cond_selected">
+							<span id="ngict_fm_iui_curalarm_alarmTypeSelected" name_i18n="openo_alarm_i18n"></span>
+						</span>
+					</span>
+					<span id="alCode" class="cond_zone">
+						<button class="condSelect btn white radius_l">
+							<span id="ngict_fm_iui_curalarm_probableCause" name_i18n="openo_alarm_i18n"></span>
+						</button>
+						<span class="cond_selected">
+							<span id="ngict_fm_iui_curalarm_probableCauseSelected" name_i18n="openo_alarm_i18n"></span>
+						</span>
+					</span>
+				</div>
+				<div class="row cond_zone_time">
+					<div class="col-xs-12 confirmTime">
+						<label>
+							<span id="ngict_fm_iui_curalarm_ackTimeTitle" name_i18n="openo_alarm_i18n"></span>&nbsp;&nbsp;
+						</label>
+						<input id="today_confirm" type="radio" name="timeConfirm" cond_value="1" cond_id="time" class="btn blue"></input>
+						<label for="today_confirm" class="radioLabel">
+							<span id="ngict_fm_iui_curalarm_recentOneDay" name_i18n="openo_alarm_i18n"></span>
+						</label>
+						<input id="one_week_confirm" type="radio" name="timeConfirm" cond_value="2" cond_id="time" class="btn blue"></input>
+						<label for="one_week_confirm" class="radioLabel">
+							<span id="ngict_fm_iui_curalarm_recenttwoDays" name_i18n="openo_alarm_i18n"></span>
+						</label>
+						<input id="one_month_confirm" type="radio" name="timeConfirm" cond_value="7" cond_id="time" class="btn blue"></input>
+						<label for="one_month_confirm" class="radioLabel">
+							<span id="ngict_fm_iui_curalarm_recentOneWeek" name_i18n="openo_alarm_i18n"></span>
+						</label>
+						<input id="customAckTime" type="radio" name="timeConfirm" class="btn blue"></input>
+						<input dtitle="ackTime" id='daterangeConfirm' name="daterange" type='select' value="Custom" data-toggle="tooltip" data-placement="top" title ms-attr-disabled="<!--dataRangeLocationDisabled-->" class='btn btn-default dropdown-toggle' data-toggle='dropdown' />
+					</div>
+				</div>
+				<div class="row cond_zone_time">
+					<div class="col-xs-12 confirmTime">
+						<label>
+							<span id="ngict_fm_iui_curalarm_raisedTime" name_i18n="openo_alarm_i18n"></span>&nbsp;&nbsp;
+						</label>
+						<input id="today_occur" type="radio" name="timeOccur" cond_value="1" cond_id="time" class="btn blue"></input>
+						<label for="today_occur" class="radioLabel">
+							<span id="ngict_fm_iui_curalarm_recentOneDay" name_i18n="openo_alarm_i18n"></span>
+						</label>
+						<input id="one_week_occur" type="radio" name="timeOccur" cond_value="2" cond_id="time" class="btn blue"></input>
+						<label for="one_week_occur" class="radioLabel">
+							<span id="ngict_fm_iui_curalarm_recenttwoDays" name_i18n="openo_alarm_i18n"></span>
+						</label>
+						<input id="one_month_occur" type="radio" name="timeOccur" cond_value="7" cond_id="time" class="btn blue"></input>
+						<label for="one_month_occur" class="radioLabel">
+							<span id="ngict_fm_iui_curalarm_recentOneWeek" name_i18n="openo_alarm_i18n"></span>
+						</label>
+						<input id="customRaisedTime" type="radio" name="timeOccur" class="btn blue"></input>
+						<input dtitle="raisedTime" id='daterangeOccur' name="daterange" type='select' value="Custom" data-toggle="tooltip" data-placement="top" title ms-attr-disabled="<!--dataRangeTypeDisabled-->" class='btn btn-default dropdown-toggle' data-toggle='dropdown' />
+					</div>
+				</div>
+				<div class="row margin-space flRight">
+					<button ms-click="searchModal()" class="btn white radius_l">
+						<span class="ict-Magnifier alarmsSave"></span>
+						<span id="ngict_fm_iui_curalarm_query" name_i18n="openo_alarm_i18n"></span>
+					</button>&nbsp;&nbsp;
+					<button ms-click="saveModal()" ms-visible="tempHide" class="btn white radius_l">
+						<span class="ict-save alarmsSave"></span>
+						<span id="ngict_fm_iui_curalarm_save" name_i18n="openo_alarm_i18n"></span>
+					</button>
+				</div>
+			</div>
+			<div class="fliterline"></div>
+			<div class="row-fluid bodyTop">
+				<div class="col-xs-4 alarmbtn">
+					<div class="btn-group">
+						<button id="affirm" onclick="alarmsUtil.loopAffirm(1);" class="btn white sideBtn" ms-class="btnRiusCircle:!showClear"><span class="ict-acknownledge"></span></button>
+						<button id="unAffirm" class="btn white sideBtn" ms-visible="showClear" onclick="alarmsUtil.loopAffirm(2);"><span class="ict-unacknownledge"></span></button>
+					</div>
+					<button class="btn radius_l white" onclick="alarmsUtil.loopDelAralms();">
+						<span class="ict-delete"></span>
+						<span id="ngict_fm_iui_curalarm_clean" name_i18n="openo_alarm_i18n"></span>
+					</button>
+				</div>
+				<div class="tablebtn">
+					<button class="btn radius_l white" onclick="alarmsUtil.refresh();">
+						<span class="ict-refresh"></span>
+						<span id="ngict_fm_iui_curalarm_refreash" name_i18n="openo_alarm_i18n"></span>
+					</button>
+					<button class="btn radius_l white" ms-visible="tempHide">
+						<span class="ict-export"></span>
+						<span id="ngict_fm_iui_curalarm_exportAll" name_i18n="openo_alarm_i18n"></span>
+					</button>
+				</div>
+			</div>
+			<div class="row-fluid" data-name="table_zone">
+				<div class="col-xs-12" id='ict_alarms_table_div'></div>
+			</div>
+			<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+				<div class="modal-dialog">
+					<div class="modal-content">
+						<div class="modal-header">
+							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+							<h4 class="modal-title" id="myModalLabel"><span id="ngict_fm_iui_curalarm_save" name_i18n="openo_alarm_i18n"></span></h4>
+						</div>
+						<div class="modal-body">
+							<span><span id="ngict_fm_iui_curalarm_name" name_i18n="openo_alarm_i18n"></span>&nbsp;&nbsp;</span>
+							<input type="text" id="saveCondId"/>
+							<div class="condSaveTip">
+								<span id="ngict_fm_iui_curalarm_condSaveTip" name_i18n="openo_alarm_i18n"></span>
+							</div>
+						</div>
+						<div class="modal-footer">
+							<button type="button" class="btn btn-default" id="saveModalCancle" data-dismiss="modal">
+								<span id="ngict_fm_iui_curalarm_cancel" name_i18n="openo_alarm_i18n"></span>
+							</button>
+							<button type="button" class="btn btn-primary" ms-click="alarmsCondSave()">
+								<span id="ngict_fm_iui_curalarm_ok" name_i18n="openo_alarm_i18n"></span>
+							</button>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div hidefocus="true" class="modal fade group" id="alCodeTree" tabindex="-1" role="dialog" aria-labelledby="myModalLabelCode" aria-hidden="true">
+				<div class="modal-dialog">
+					<div class="modal-content">
+						<div class="modal-header">
+							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+							<h4 class="modal-title" id="myModalLabelCode"><span id="ngict_fm_iui_curalarm_probableCause" name_i18n="openo_alarm_i18n"></span></h4>
+						</div>
+						<div class="modal-body">
+							<div class="row">
+								<div class="form-group col-xs-12 margin-top-space">
+									<div class="col-xs-6">
+										<div class=" right_assign_box">
+											<ul id="probableCausesTree" class="ztree"></ul>
+										</div>
+									</div>
+									<div class="col-xs-1 iconPosition">
+										<div ms-repeat-el="treeIcons">
+											<i treeType="probableCausesTree" ms-class="<!--el-->" ms-click="moveTreeNode($(this))"></i>
+										</div>
+									</div>
+									<div class="col-xs-5">
+										<div tabindex="11" class="right-assign-checked-box tree-right-table">
+											<table id="selectedProbableCausesTreeTable" class="table table-bordered"></table>
+										</div>
+									</div>
+									<div class="col-xs-4 nodesDetail right">
+										<button id="moreCondBtn" type="button" class="btn white blueactive right" ms-click="probableCausesTreeAffirm()">
+											<span id="ngict_fm_iui_curalarm_ok" name_i18n="openo_alarm_i18n"></span>
+										</button>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div hidefocus="true" class="modal fade group" id="alTypeTree" tabindex="-1" role="dialog" aria-labelledby="myModalLabelType" aria-hidden="true">
+				<div class="modal-dialog">
+					<div class="modal-content">
+						<div class="modal-header">
+							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+							<h4 class="modal-title" id="myModalLabelType"><span id="ngict_fm_iui_curalarm_alarmType" name_i18n="openo_alarm_i18n"></span></h4>
+						</div>
+						<div class="modal-body">
+							<div class="row">
+								<div class="form-group col-xs-12 margin-top-space">
+									<div class="col-xs-12">
+										<div class=" right-assign-checked-box">
+											<table id="selectedAlTypeTable" class="table table-bordered tree-left-table"></table>
+										</div>
+									</div>
+									<div class="col-xs-4 nodesDetail right">
+										<button id="moreCondBtn" type="button" class="btn white blueactive right" ms-click="alTypeTreeAffirm()">
+											<span id="ngict_fm_iui_curalarm_ok" name_i18n="openo_alarm_i18n"></span>
+										</button>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div hidefocus="true" class="modal fade group" id="alLocationTree" tabindex="-1" role="dialog" aria-labelledby="myModalLabelLocation" aria-hidden="true">
+				<div class="modal-dialog">
+					<div class="modal-content">
+						<div class="modal-header">
+							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+							<h4 class="modal-title" id="myModalLabelLocation"><span id="ngict_fm_iui_curalarm_alarmPosition" name_i18n="openo_alarm_i18n"></span></h4>
+						</div>
+						<div class="modal-body">
+							<div class="row">
+								<div class="form-group col-xs-12 margin-top-space">
+									<div class="col-xs-6">
+										<div class="right_assign_box">
+											<ul id="deptTree" class="ztree"></ul>
+										</div>
+									</div>
+									<div class="col-xs-1 iconPosition">
+										<div ms-repeat-el="treeIcons">
+											<i treeType="deptTree" ms-class="<!--el-->" ms-click="moveTreeNode($(this))"></i>
+										</div>
+									</div>
+									<div class="col-xs-5">
+										<div id="selectedDeptTree" tabindex="11" class="right-assign-checked-box tree-right-table">
+											<table id="selectedDeptTreeTable" class="table table-bordered"></table>
+										</div>
+									</div>
+								</div>
+							</div>
+							<div class="row">
+								<div class="form-group col-xs-12">
+									<div class="col-xs-4 right">
+										<button id="moreCondBtn" type="button" class="btn white blueactive right" ms-click="deptTreeAffirm()">
+											<span id="ngict_fm_iui_curalarm_ok" name_i18n="openo_alarm_i18n"></span>
+										</button>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div id="affirmTrip" class="defaultHideTopLink">
+				<span id="ngict_fm_iui_curalarm_affirm" name_i18n="openo_alarm_i18n"></span>
+			</div>
+			<div id="unAffirmTrip" class="defaultHideTopLink">
+				<span id="ngict_fm_iui_curalarm_unaffirm" name_i18n="openo_alarm_i18n"></span>
+			</div>
+		</div>
+		<script src="../common/thirdparty/jquery/jquery-1.10.2.min.js" type="text/javascript"></script>
+		<script src="../common/thirdparty/jquery-cokie/jquery.cokie.min.js" type="text/javascript" ></script>
+		<script src="../common/thirdparty/jquery.i18n/jquery.i18n.properties-1.0.9.js" type="text/javascript"></script>
+		<script src="../common/thirdparty/bootbox/bootbox.min.js" type="text/javascript"></script>
+		<script src="../common/thirdparty/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
+		<script src="../common/thirdparty/data-tables/jquery.dataTables.js" type="text/javascript"></script>
+		<script src="../common/thirdparty/bootstrap-daterangepicker/moment.js" type="text/javascript"></script>
+		<script src="../common/thirdparty/bootstrap-daterangepicker/daterangepicker.js" type="text/javascript"></script>
+		<script src="../common/js/international/loadi18n.js" type="text/javascript"></script>
+		<script src="../common/js/json2.js" type="text/javascript"></script>
+		<script src="../common/js/tools.js" type="text/javascript"></script>
+		<script src="../common/thirdparty/avalon/avalon.modern.js" type="text/javascript"></script>
+		<script src="../common/thirdparty/icheck/icheck.min.js" type="text/javascript"></script>
+		<script src="../common/thirdparty/zTree/js/jquery.ztree.all.js" type="text/javascript"></script>
+		<script>
+			loadi18n_WebFramework('web-alarm-i18n', 'i18n/', 'openo_alarm_i18n');
+			var getUrlParam = function(name){
+				var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
+				var search = decodeURIComponent(location.search.substring(1));
+				var r = search.match(reg);
+				if (r != null) {
+					return unescape(r[2]);
+				}
+				return null;
+			}
+			$(function(){
+				var queryName = getUrlParam("queryId");
+				if (queryName) {
+					$(".searchTitle").text(queryName);
+					$("#saveCondId").val(queryName);
+				}
+				$('[data-toggle="tooltip"]').tooltip();
+			});
+		</script>
+		<script src="js/alarmsServerPageTable.js" type="text/javascript"></script>
+		<script src="js/alarmsUtil.js" type="text/javascript"></script>
+		<script src="js/alarmConds.js" type="text/javascript"></script>
+		<script src="js/performanceUtil.js" type="text/javascript"></script>
+		<script src="js/curAlarmsController.js" type="text/javascript"></script>
+	</body>
+</html>
diff --git a/openo-portal/portal-performance/src/main/webapp/performance/css/alarmsQuery.css b/openo-portal/portal-performance/src/main/webapp/performance/css/alarmsQuery.css
new file mode 100644
index 00000000..ee837212
--- /dev/null
+++ b/openo-portal/portal-performance/src/main/webapp/performance/css/alarmsQuery.css
@@ -0,0 +1,752 @@
+/**
+ * Copyright 2016, CMCC Technologies Co., Ltd.
+ *
+ * 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.
+ */
+body {
+	overflow: auto !important;
+	background-color: #fff;
+}
+
+.ms-controller{
+	visibility: hidden
+}
+
+.container-fluid{
+	background-color: #fff;
+}
+
+.page-content-body {
+	margin-top: 10px;
+}
+.page-content-body .row{
+    margin-left:0;
+}
+#ict_fm_alarmCount_div_left{
+    margin-bottom:10px;
+}
+.page-content-body .separator-line{
+    height:1px;
+	border-bottom:1px dashed #ccc;
+	background:transparent;
+}
+.circleBtn:first-child {
+    border-top-left-radius: 3px !important;
+    border-bottom-left-radius: 3px !important;
+}
+
+.circleBtn:last-child {
+
+    border-top-right-radius: 3px !important;
+    border-bottom-right-radius: 3px !important;
+}
+
+.sideBtn:first-child {
+    border-top-left-radius: 20px !important;
+    border-bottom-left-radius: 20px !important;
+    min-width: 50px;
+}
+
+.sideBtn:last-child {
+    border-top-right-radius: 20px !important;
+    border-bottom-right-radius: 20px !important;
+    min-width: 50px;
+}
+
+.btnRiusCircle {
+    border-radius: 20px !important;
+}
+
+button:last-child {
+    margin-left: 15px;
+}
+.btn-groupBlue {
+    padding-left: 20px;
+}
+
+.btn-groupBlue .btn:hover {
+    color: #333;
+    background-color: #ebebeb ;
+
+}
+.btnWhite {
+    font-size: 14px;
+    font-family: "微软雅黑";
+    line-height: 20px;
+    /*background-image: linear-gradient(to bottom, #ffffff, #ffffff);*/
+    background-color: #ffffff;
+
+    border: 1px solid #cccccc;
+}
+.btnWhite:hover{
+background-color:#ebebeb;
+color:#333;
+}
+.btn_group1 .btn:hover {
+    color: #ffffff;
+	background-color:#ebebeb;
+    background-position: 0 0px;
+    -webkit-transition: background-position 0.1s linear;
+    -moz-transition: background-position 0.1s linear;
+    -o-transition: background-position 0.1s linear;
+    transition: background-position 0.1s linear;
+}
+
+.blueactive {
+    color: #ffffff !important;
+    background-color: #5b9bd1;
+}
+
+.blueactive:hover {
+    color: #ffffff !important;
+    background-color: #4d85b4 !important;	
+}
+
+.cond_zone {
+    background-color: #fff;
+    padding-left: 20px;
+    padding-right: 50px;
+}
+
+.cond_zone_time {
+	background-color: #fff;
+    margin-top: 20px;
+    margin-bottom: 10px;
+}
+
+.condSelect {
+    /* width: 100%; */
+    border: 1px solid #CCC;
+	height: 34px !important;
+}
+
+.cond_selected{
+	padding-left: 10px;
+}
+
+button.btn.btn-default {
+    color: #aaa;
+}
+
+.filtergroup button.btn {
+    min-width: 68px;
+}
+.adCondition button.btn {
+    min-width: 80px;
+}
+.btn-default {
+    color: #5b9bd1;
+    background-color: #fff;
+    border-color: #ccc;
+}
+
+.daySelect {
+    width: 42px;
+    height: 26px !important;
+    font-size: 14px;
+    margin-bottom: 0px;
+    border-width: 1px;
+    padding: 0px 0px; 
+    border-radius: 4px; 
+}
+
+.calendar-date {
+    color: #5b9bd1;
+}
+
+.daterangepicker .ranges {
+    width: 205px;
+}
+
+.daterangepicker .ranges input {
+    width: 95px !important;
+}
+
+/* .daterangepicker {
+    left: 20% !important;
+} */
+.daterangepicker .ranges input[type="text"] {
+    width: 85px !important;
+}
+
+.dataRange {
+    width: 195px;
+    line-height: 0;
+    height: 26px;
+    vertical-align: top;
+    margin-left: 5px;
+    padding: 0px 0px;
+}
+
+div.dataTables_paginate {
+    display: inline;
+    float: right !important;
+}
+
+div.dataTables_length, div.dataTables_info {
+    display: inline;
+}
+
+div.pagination-panel {
+    margin-right: 10px;
+}
+
+input.pagination-panel-input {
+    width: 50px;
+}
+
+.input-sm {
+    padding: 4px 10px;
+}
+
+td.details-control {
+	text-align: center;
+    cursor: pointer;
+}
+
+
+.details table td {
+    word-wrap: break-word;
+    word-break: normal;
+    border-top: 1px solid #dddddd;
+}
+
+td.title {
+    width: 10%;
+}
+
+.detailTitleStyle{
+	background-color: #EEE !important;
+}
+
+.close-statistic{
+    float:right;
+	margin-top:5px;
+	margin-right:25px;
+	vertical-align:bottom;
+	padding:3px;
+	border:2px solid #fff ;
+	border-radius:20px;
+    color:#9b9b9b;	
+}
+.close-statistic:hover{
+border:2px solid #e74c3c ;
+color:#e74c3c;
+text-decoration:none;
+}
+.detailCellStyle{
+	background-color: #FFF !important;
+}
+
+table.dataTable tbody th, table.dataTable tbody td {
+    padding: 8px 10px;
+    vertical-align:middle;
+}
+
+.echart_height{
+	height: 400px;
+}
+
+
+
+button.serveractive {
+    color: #ffffff !important;
+    background-position: 0 0px;
+    -webkit-transition: background-position 0.1s linear;
+    -moz-transition: background-position 0.1s linear;
+    -o-transition: background-position 0.1s linear;
+    transition: background-position 0.1s linear;
+    background-image: linear-gradient(to bottom, #E6971A, #E6971A) !important;
+}
+
+.rule_title {
+    padding: 8px;
+    margin-bottom: 25px;
+    border-left: 2px solid #5b9bd1;
+    color: #1A78CA;
+    font-size: 16px;
+}
+
+.iconPosition > div {
+    margin: 20px 0px 0px 0px;
+}
+.iconPosition{
+  margin-top: 90px;
+}
+.iconPosition div {
+    color: #757575;
+    cursor: pointer;
+}
+
+.iconPosition div:hover {
+    color: #333;
+}
+
+#defaulInfo, #selectAralmCodes {
+    border: 1px solid #e0e0e0;
+}
+
+.right_assign_box {
+    height: 370px;
+    overflow-y: auto;
+    overflow-x: auto;
+    border: 1px solid #e0e0e0;
+}
+
+.right-assign-checked-box{
+    /*height: 312px;*/
+	height: 370px;
+    overflow-y: auto;
+    overflow-x: auto;
+    border: 1px solid #e0e0e0;
+} 
+
+.fmZtree {
+    z-index: 3000;
+    position: absolute;
+    background: #fff;
+    outline: none;
+}
+
+.filtergroup {
+    text-align: center;
+    margin-top: 15px;
+}
+
+.fliterline {
+    margin-top: 20px;
+	height:1px;
+	border-bottom:1px dashed #c4cde8;
+	margin-bottom:15px;
+	overflow:hidden;
+	width:100%;
+}
+
+.adCondition {
+    float: right;
+}
+
+.btn .caret {
+    margin-right: 5px;
+}
+
+.tablebtn {
+    float: right;
+}
+
+#ict_alarms_table_div {
+    padding-right: 0;
+    margin-top: 10px;
+}
+
+div.alarmsTree {
+    width: 580px;
+}
+
+div.alarmsTree-small{
+    width: 280px; 
+}
+.alarm-serious {
+    background-color: #de4040;
+    color: #ffffff !important;
+}
+.alarm-serious:hover {
+    background-color: #c23737 !important;
+}
+.alarm-important {
+    background-color: #e37c29;
+    color: #ffffff !important;
+}
+.alarm-important:hover {
+    background-color: #c86e25 !important;
+}
+.alarm-secondary {
+    background-color: #e9d426;
+    color: #ffffff !important;
+}
+.alarm-secondary:hover {
+    background-color: #d3c023 !important;   
+}
+.alarm-slightly {
+    background-color: #86bcdb;
+    color: #ffffff !important;
+}
+.alarm-slightly:hover {
+    background-color: #77a7c2 !important;
+}
+.flRight {
+    float: right;
+	margin-right: 1px;
+}
+
+/* #alLocation {
+    margin-top: 40px;
+} */
+
+.borderBottom {
+    border-bottom: 4px solid !important;
+    border-top: 0px solid !important;
+}
+
+.borderTop {
+    border-top: 4px solid !important;
+    border-bottom: 0px solid !important;
+}
+
+.spinnerSmall {
+    width: 34px !important;
+    margin-right: 24px;
+}
+
+.icheckbox_square-aero{
+    margin-right: 5px;
+}
+.alarmsSave {
+  font-size: 16px;
+  color: #555;
+  vertical-align: middle;
+  cursor: pointer;
+}
+
+.alarmsSave:hover {
+    color: #5b9bd1;
+}
+.margin-space{
+    margin-bottom: 15px;
+	margin-top: 5px;
+}
+
+.defaultHideTopLink{
+  display: none;
+  position: absolute;
+  display: none;
+  background: #000;
+  opacity: 0.8;
+  border: 1px solid #ddd !important;
+  font-size: 0.8em;
+  box-shadow: 2px 3px 5px #C8C8C8;
+  border-radius: 8px;
+  padding: 0px 10px;
+  z-index: 999;
+  height: 30px;
+  color: #fff;
+  line-height: 25px;
+}
+
+.defaultHideTopLink:after {
+  position: absolute;
+  top: -6px;
+  left: 10px;
+  display: inline-block;
+  border-right: 6px solid transparent;
+  border-bottom: 6px solid #000;
+  border-left: 6px solid transparent;
+  content: '';
+}
+
+.tooltip-inner {
+    max-width: 300px !important;
+}
+
+.calendar-time select {
+  color: #555 !important;
+}
+
+#affirmTrip{
+  margin-top: 3%;
+  margin-left: 1%;
+}
+
+
+#unAffirmTrip{
+  margin-top: 3%;
+  margin-left: 4%;
+}
+
+#alLocationTree,#alCodeTree,#alTypeTree{
+  border: 1px solid rgba(0,0,0,.2);
+  margin-top: 5px;
+  background-clip: padding-box;
+  border-radius: 6px;
+  outline: 0;
+  margin-left: -5px;
+  box-shadow: 0 5px 15px rgba(0,0,0,.5);
+}
+
+#right-menu {
+  position: fixed;
+  top: 0;
+  right: 0;
+  width: 400px;
+  height: 100%;
+  border-left: 4px solid rgb(58,174,218);
+  background-color: rgba(255,255,255,.95);
+  padding-left: 19px;
+  padding-right: 13px;
+  padding-top: 20px;
+  z-index: 9999;
+  overflow-y: auto;
+}
+
+.btn-right-detail {
+  color: #5b9bd1;
+  background-color: #fff;
+  border-color: #ccc;
+}
+
+
+.right {
+  float: right;
+}
+
+
+.default-display-none{
+  display: none;
+}
+
+.nodesDetail {
+  margin-top: 15px;
+}
+
+#ict_table_general_div td{
+    min-width: 115px;
+}
+
+
+#moreCond label{
+    margin-bottom: 0px;
+}
+
+.alarm-date-form-control{
+    padding: 0px 4px;
+}
+
+.titlefont {
+  font-size: 16px;
+}
+
+.subtitlefont {
+  font-size: 14px;
+}
+
+
+.ackState a:hover{
+    color: #fff;
+  text-decoration:none;
+}
+
+
+.label-danger:hover{
+  background-color: #C9302C;
+}
+
+.right-button-pointer {
+  display: inline-block;
+  cursor: pointer;
+}
+
+.tree-right-table td{
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.tree-right-table td:hover{
+  background: #FFEDE4;
+  border-bottom: 1px solid #f8dddd;
+  border-top: 1px solid #f8dddd;
+}
+
+.tallCellSelected{
+  background: #f8dddd;
+  border-bottom: 1px solid #f8dddd;
+  border-top: 1px solid #f8dddd;
+}
+
+.tallCellSelected:hover{
+  background: #f8dddd !important;
+}
+
+
+.margin-top-space{
+  margin-top: 15px;
+}
+
+
+.tree-left-table td{
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.tree-left-table td:hover{
+  background: #FFEDE4;
+  border-bottom: 1px solid #f8dddd;
+  border-top: 1px solid #f8dddd;
+}
+
+#saveModalCancle{
+  color:#333;
+}
+
+.radioLabel{  
+  margin-left: -10px;
+  margin-right: 10px;
+}
+
+.alarmbtn, #ict_alarms_table_div{
+padding-left:0;
+}
+
+.advanced-selection{
+	margin-top:40px;
+}
+
+#moreCond{
+	border: 1px dashed rgb(196, 205, 232);
+	margin-top: 10px;
+    margin-bottom: 10px;
+    margin-left: 0px;
+    margin-right: 0px;
+    padding-left: 15px;
+    padding-right: 15px;
+}
+
+.bodyTop{
+	margin-top: 10px;
+}
+
+.confirmTime{
+	margin-left: 5px;
+}
+
+.condSaveTip{
+	margin-top: 15px;
+}
+
+/*修改树组件默认样式*/
+.ztree li a {	
+	border: 0px;
+}
+
+.ict-Magnifier:hover{
+	color:#555555
+}
+
+.ict-save:hover{
+	color:#555555
+}
+
+.dataTables_scrollHeadInner table.dataTable tbody td {
+    padding-top: 0px !important;
+    padding-bottom: 0px !important;
+}
+
+.dataTables_scrollHeadInner table.dataTable {
+	margin-bottom: 0px !important;
+	border-bottom: 0px !important;
+}
+
+.dataTables_scrollBody  table {
+	border-top: 0px !important;
+	border-bottom: 1px solid #ddd !important;
+	/* margin-top: -5px; */
+}
+
+.dataTables_scrollBody {
+	margin-top: -2px;
+}
+
+#ict_alarms_table_wrapper .bottom{
+	margin-top: 10px;
+}
+
+table .DataTables_sort_wrapper {
+	padding-left: 2px !important;
+}
+
+.detailTable {
+  border-collapse:collapse;border-spacing:0;border-left:1px solid #888;border-top:1px solid #888;
+}
+
+.detailTable td{border:1px solid #ddd !important;}
+
+.detailTitleStyle .label{
+	color:#333333;
+	background-color: rgba(66, 139, 202, 0);
+	float:right;
+}
+
+.label{
+	font-size: 100%;
+    font-weight: 100;
+}
+
+input[name="daterange"] {
+    width: 220px;
+    line-height: 0;
+    height: 31px;
+    /* vertical-align: top; */
+    margin-top: 2px;
+}
+.acknow-purple{
+background-color:#bf74d5;
+color:#fff;
+}
+.acknow-purple:hover{
+background-color:#b36bc8;
+}
+.ict-table{
+ color:#549bb6;
+}
+.dataTables_length  select[size]{
+    height:28px;
+}
+/*1024下展开左边菜单*/
+@media screen and (max-width: 770px) and (min-width: 750px) {
+    .btn-groupBlue {
+        padding-left: 5px;
+    }  
+}
+
+/*1024下，左边菜单收起来*/
+
+@media screen and (max-width: 1000px) and (min-width: 810px) {
+    .tree-padd {
+        padding-left: 7%;
+    }
+
+    .daterange-cond-padd {
+        padding-left: 10%;
+    }
+}
+
+@media screen and (max-width: 1100px) and (min-width: 1000px) {
+
+    .tree-padd {
+        padding-left: 10%;
+    }
+
+    .tree-daterange-cond-padd {
+        padding-left: 10%;
+    }
+}
+
+@media screen and (min-width: 1100px) {
+    .tree-padd {
+        padding-left: 12%;
+    }
+
+    .daterange-cond-padd {
+        padding-left: 10%;
+    }
+}
+
diff --git a/openo-portal/portal-performance/src/main/webapp/performance/css/performanceChart.css b/openo-portal/portal-performance/src/main/webapp/performance/css/performanceChart.css
new file mode 100644
index 00000000..a6556291
--- /dev/null
+++ b/openo-portal/portal-performance/src/main/webapp/performance/css/performanceChart.css
@@ -0,0 +1,60 @@
+/**
+ * Copyright 2016, CMCC Technologies Co., Ltd.
+ *
+ * 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.
+ */
+.reveal-modal-bg {
+    position: fixed;
+    height: 100%;
+    width: 100%;
+    background: #000;
+    background: rgba(0,0,0,.8);
+    z-index: 100;
+    display: none;
+    top: 0;
+    left: 0;
+}
+
+.reveal-modal {
+    visibility: hidden;
+    top: 100px;
+    left: 200px;
+    width: 1200px;
+    background: #eee url(modal-gloss.png) no-repeat -200px -80px;
+    position: fixed;
+    z-index: 101;
+    padding: 30px 40px 34px;
+    -moz-border-radius: 5px;
+    -webkit-border-radius: 5px;
+    border-radius: 5px;
+    -moz-box-shadow: 0 0 10px rgba(0,0,0,.4);
+    -webkit-box-shadow: 0 0 10px rgba(0,0,0,.4);
+    -box-shadow: 0 0 10px rgba(0,0,0,.4);
+}
+
+.reveal-modal.small {width: 200px; margin-left: -140px;}
+.reveal-modal.medium {width: 400px; margin-left: -240px;}
+.reveal-modal.large {width: 600px; margin-left: -340px;}
+.reveal-modal.xlarge {width: 800px; margin-left: -440px;}
+
+.reveal-modal .close-reveal-modal {
+    font-size: 22px;
+    line-height: .5;
+    position: absolute;
+    top: 8px;
+    right: 11px;
+    color: #aaa;
+    text-shadow: 0 -1px 1px rbga(0,0,0,.6);
+    font-weight: bold;
+    cursor: pointer;
+}
diff --git a/openo-portal/portal-performance/src/main/webapp/performance/css/performanceQuery.css b/openo-portal/portal-performance/src/main/webapp/performance/css/performanceQuery.css
new file mode 100644
index 00000000..6594e948
--- /dev/null
+++ b/openo-portal/portal-performance/src/main/webapp/performance/css/performanceQuery.css
@@ -0,0 +1,843 @@
+/**
+ * Copyright 2016, CMCC Technologies Co., Ltd.
+ *
+ * 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.
+ */
+body{
+	font-family: microsoft yahei !important;
+}
+body {
+  font-family: 'Open Sans', sans-serif;  
+  background-color: #f1f3fa;
+  width: '100%';
+  height: '100%';
+  margin-top: 5px;
+}
+
+a {
+  /*  font-weight: bold;*/
+   text-decoration: none !important; }
+
+p {
+    color: #444;
+    font-size: 14px;
+    font-weight: normal;
+    line-height: 21px;
+    margin: 0 0 12px 0; }
+
+p.credit {
+    border-top: 1px solid #ccc;
+    font-size: 14px;
+    line-height: 140%;
+    margin: 36px 0 12px 0;
+    padding: 8px 0 0 0;
+    text-align: center; }
+
+ul.column {
+    float: left;
+    list-style: none;
+    width: 675px; }
+ul.column li {
+    background: #eee;
+    -webkit-border-radius: 5px;
+    border-radius: 5px;
+    -webkit-box-shadow: inset 0 1px 1px 0 #c7c7c7;
+    box-shadow: inset 0 1px 1px 0 #c7c7c7;
+    float: left;
+    margin: 10px 0 0 10px;
+    display: block;
+    height: 150px;
+    text-align: center;
+    width: 215px; }
+
+
+/* Clear Floated Elements
+------------------------------------------------------------------------------*/
+.column:after,
+.button-collection:after,
+.clearfix:after,
+div.project-info:after {
+    clear: both;
+    content: ' ';
+    display: block;
+    font-size: 0;
+    line-height: 0;
+    visibility: hidden;
+    width: 0;
+    height: 0; }
+
+.nav-tabs{
+border:0;
+}
+.nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus{
+border:0;
+border-top:3px solid #F3565D;
+}
+.nav-tabs>li>a{
+border-radius:0;
+}
+.nav-tabs>li>a:hover{
+background-color:#f1f3fa;
+border:1Px solid #f1f3fa;
+}
+.c3{
+margin-top:120px;
+}
+.skills-chart-breadcrumb{
+
+}
+
+.blue:selected{
+border:0;
+background-color: #5b9bd1;
+}
+.btn {
+  /* border-width: 0; */
+  /* padding: 7px 14px; */
+  /* font-size: 14px; */
+  /* outline: none !important; */
+  /* background-image: none !important; */
+  /* filter: none; */
+  /* -webkit-box-shadow: none; */
+  -moz-box-shadow: none;
+  /* box-shadow: none; */
+  /* text-shadow: none; */
+}
+
+.btn-default, select {
+border-width: 1px;
+padding: 4px 1px;
+border-radius: 4px;
+}
+
+.input-sm {
+	padding: 4px 10px;
+}
+
+.btn-block {
+  display: block;
+  width: 100%;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+/* Bootstrap buttons */
+.btn-default {
+  color: #5b9bd1;
+  background-color: #fff;
+  border-color: #ccc;
+
+}
+.btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active {
+  color: #333;
+  background-color: #ededed;
+  border-color: #b3b3b3;
+}
+.open .btn-default.dropdown-toggle {
+  color: #333;
+  background-color: #ededed;
+  border-color: #b3b3b3;
+}
+.btn-default:active, .btn-default.active {
+  background-image: none;
+  background-color: #e0e0e0;
+  font-weight: bold;
+}
+.btn-default:active:hover, .btn-default.active:hover {
+  background-color: #e6e6e6;
+}
+.open .btn-default.dropdown-toggle {
+  background-image: none;
+}
+.btn-default.disabled, .btn-default.disabled:hover, .btn-default.disabled:focus, .btn-default.disabled:active, .btn-default.disabled.active, .btn-default[disabled], .btn-default[disabled]:hover, .btn-default[disabled]:focus, .btn-default[disabled]:active, .btn-default[disabled].active, fieldset[disabled] .btn-default, fieldset[disabled] .btn-default:hover, fieldset[disabled] .btn-default:focus, fieldset[disabled] .btn-default:active, fieldset[disabled] .btn-default.active {
+  background-color: #fff;
+  border-color: #ccc;
+}
+.btn-default .badge {
+  color: #fff;
+  background-color: #333;
+}
+.btn-default > i {
+  color: #aaa;
+}
+.btn-default > i[class^="icon-"],
+.btn-default > i[class*="icon-"] {
+  color: #8c8c8c;
+}
+
+div[data-name="tab_zone"] div{
+	background-color:#f1f3fa;
+	padding:0px;
+}
+
+
+div[data-name="cond_zone"] div{
+	background-color: #fff;
+	margin-top:15px;
+	margin-bottom:15px;
+}
+
+div[data-name="log-otherConds-zone"]{
+	display:inline;
+}
+
+div[data-name="log-otherConds-zone"] select ,div[data-name="log-otherConds-zone"] span{
+     /**height:33px;*/
+	 margin-left:15px;
+	 color:#5b9bd1;
+	 border-color:#ccc;
+         font-weight: bold;
+}
+
+div.separator div{
+	text-align: center;
+	line-height:0;
+}
+div.separator-sline{
+	height:28px ;
+	width:3px;
+}
+
+.dropdown-toggle{
+color:#5b9bd1;
+}
+.calendar-date{
+color:#5b9bd1;
+}
+.range_inputs{
+color:#5b9bd1;
+}
+.btn.dropdown-toggle, .btn-group .btn.dropdown-toggle, .btn:hover, .btn:disabled, .btn[disabled], .btn:focus, .btn:active, .btn.active {
+  outline: none !important;
+  background-image: none !important;
+  filter: none;
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+  text-shadow: none;
+}
+
+#skills-chart-breadcrumb{
+margin-bottom:10px
+}
+
+
+/*增加daterangepicker的css*/
+input[name="daterange"]{
+    width: 220px;
+	line-height:0;	
+    height: 31px;
+    vertical-align: top;
+    margin-top: 2px;
+
+}
+
+.daterangepicker .ranges{
+	width: 205px;
+}
+.daterangepicker .ranges input{
+	width:95px !important;
+}
+
+td.details-control {
+    background: url('../images/details_open.png') no-repeat center center;
+    cursor: pointer;
+}
+tr.shown td.details-control {
+    background: url('../images/details_close.png') no-repeat center center;
+}
+
+
+.details table td{
+	word-wrap: break-word;
+	word-break: normal;
+	border-top: 1px solid #dddddd;
+}
+
+.details table  tr:first-child td {
+	border-top: none;
+}
+
+.details table{
+	table-layout:fixed;
+	width:100%;
+}
+
+td.title{
+	width:10%;
+}
+
+table.dataTable tbody th, table.dataTable tbody td {
+padding: 8px 10px;
+}
+
+div.dataTables_length ,div.dataTables_info{
+	display: inline;
+}
+
+div.dataTables_paginate{
+	display: inline;
+	float: right;
+}
+
+div.pagination-panel{
+	margin-right:10px;
+}
+
+input.pagination-panel-input{
+	width:50px;
+}
+
+#ict_log_table_div{
+	margin-top:15px;
+}
+
+
+#ict_sm_table_div label{
+	font-weight:100;
+}
+
+.daterangepicker .daterangepicker_start_input label, .daterangepicker .daterangepicker_end_input label{
+color:#5b9bd1;
+
+}
+.daterangepicker .ranges .input-mini{
+     color:#5b9bd1;
+  }
+.cancelBtn {
+    padding:5px 10px 5px 10px;
+}
+.btn:focus, .btn:active:focus, .btn.active:focus{
+    outline:0;
+}
+
+#ict_log_table_div  table{
+	
+}
+
+.box0{
+display:none !important
+
+}
+.box1{
+background-image:url(../images/userGroup.png);
+background-repeat:no-repeat;
+background-color:#578ebe !important;
+height:3px !important;
+background-position-y:100%;
+}
+.box2{
+background-image:url(../images/loginUser.png);
+background-repeat:no-repeat;  
+background-color:#44b6ae !important;
+height:3px !important;
+background-position-y:100%;
+}
+.box3{
+background-image:url(../images/blackList.png); 
+background-repeat:no-repeat;
+background-color:#c0af69 !important;
+height:3px !important;
+background-position-y:100%;
+}
+.box4{
+background-image:url(../images/lockUser.png); 
+background-repeat:no-repeat;
+background-color:#e35b5a !important;
+height:3px !important;
+background-position-y:100%;
+}
+.box5{
+background-image:url(../images/userGroup.png);
+background-repeat:no-repeat;
+background-color:#578ebe !important;
+height:3px !important;
+background-position-y:100%;
+}
+.box6{
+background-image:url(../images/loginUser.png);
+background-repeat:no-repeat;  
+background-color:#44b6ae !important;
+height:3px !important;
+background-position-y:100%;
+}
+.box7{
+background-image:url(../images/lockUser.png); 
+background-repeat:no-repeat;
+background-color:#e35b5a !important;
+height:3px !important;
+background-position-y:100%;
+}
+.box8{
+background-image:url(../images/userGroup.png);
+background-repeat:no-repeat;
+background-color:#578ebe !important;
+height:3px !important;
+background-position-y:100%;
+}
+.box9{
+background-image:url(../images/loginUser.png);
+background-repeat:no-repeat;  
+background-color:#44b6ae !important;
+height:3px !important;
+background-position-y:100%;
+}
+.boxPadding{
+padding-left:15px;
+padding-right:0px;
+}
+.row1 .separator-line{
+margin-bottom:5px;
+}
+.row  a{
+/*color:white;*/
+font-weight:normal;
+font-size:14px;
+
+}
+.btnBlue {
+  background-color: #5b9bd1;
+  border-radius: 20px;
+  color: white;
+  font-weight: normal;
+  text-align: center;
+  min-width: 80px;
+}
+.btnBlue:hover{
+  background-color: #487ca9 !important;
+  color:#fff !important;
+}
+.btnBlue1 {
+  background-color: #5b9bd1;
+  border-radius: 20px;
+  color: white;
+  font-weight: normal; 
+  text-align: center;
+  min-width: 80px;
+}
+.btnGrey {
+  background-color: #d3d1d1;
+  border-radius: 20px;
+  color: black !important;
+  font-weight: normal;
+  padding: 8px 0;
+  text-align: center;
+  width: 70px;
+}
+.smLianJie {
+color:#5b9bd1 !important;
+font-weight:normal;
+display:inline-block;
+margin-top:25px;
+font-size:14px
+}
+
+.smLianJie span{
+padding:2px;
+}
+.rightDiv{
+float:right;
+color:#5b9bd1 !important;
+}
+.num{
+font-size:30px;
+font-family:arial;
+font-weight:bold;
+}
+.numdiv{
+margin-bottom:20px;
+}
+.ruleDiv{
+text-align:center;
+}
+
+.ruleDiv1{
+padding-top:20px;
+text-align:center;
+}
+.fmTypeDiv{
+  padding: 20px;
+  text-align: center;
+  font-size: 16px;
+  background: white;
+  margin-top: 5px;
+  margin-left: 30px;
+  margin-right: 10px;
+  height: 105px;
+}
+.container-fluid{
+background-color:white !important;
+/*margin-top:25px;*/
+min-height:500px;
+}
+.titlefont{
+ font-size:16px;
+}
+.label{
+  font-weight: 400;
+  /*font-size: 14px; */
+}
+.v5h5{
+   font-size: 16px;
+   color:#5b9bd1 !important;
+   font-weight:bold !important;
+}
+.v5label{
+   padding-top: 5px !important;
+   font-size: 13px;
+   text-align:right;
+}
+.v5lineColor1{
+   background-color:#578ebe !important;
+}
+.box1:hover{
+   background-color:#487ca9 !important;
+}
+   
+.box2:hover{
+   background-color: #329d96 !important;
+}
+.box3:hover{
+   background-color:#ad9a4d !important;
+}
+.box4:hover{
+   background-color:#d45150 !important;
+}
+.v5spinner{
+  width:50px;
+  margin-left:10px;
+  margin-right:10px;
+}
+.ff{
+   float:left;/*左漂浮*/
+   width: 1px;
+   height: 25px;/*竖线高度*/
+   background: #000;/*填充颜色*/
+}
+.radio-list{
+  padding-top:0px;
+}
+.row1{
+ margin-right: 0px !important;
+}
+
+#ict_sm_tableloginUser_wrapper .ict-legendshow,
+#ict_sm_tablelockUser .ict-unlock
+{
+	margin-right:6px;
+}
+#ict_sm_tableallUser > thead > tr > th,#ict_sm_tableloginUser > thead > tr > th,#ict_sm_tablelockUser > thead > tr > th{
+	background:white;
+	background-color:white !important;
+}
+#weakregularity{color:#468ECE;border-bottom: 1px #468ECE dotted;margin:0px !important;}
+#weakregularity_tip{
+	position:absolute;
+	display:none;
+	background:#000;
+	opacity:0.8;
+	border:1px solid #ddd !important;	
+	font-size:0.8em;
+	margin-top:-1%;
+	margin-left:15%;
+	box-shadow:2px 3px 5px #C8C8C8;
+	border-radius:8px;
+	padding:20px 5px;
+	z-index:999;
+	width:530px;
+	height:270px;
+	color:#fff;
+	line-height:25px;
+}
+#weakregularity_tip > ul > li{margin-top:4px;list-style-type:disc;}
+#weakregularity_tip > ul > li:first-child{margin-top:0px;}
+#com_zte_ums_ict_sm_new_user_isPasswordChanged > span,
+#com_zte_ums_ict_sm_new_user_passwordvaliddays > span
+{
+	margin:0px 6px;
+}
+#forceExit{
+	/**padding:3px 18px 3px 10px;
+	cursor:pointer;
+	border:1px solid #ddd;
+	border-radius:12px;
+	text-shadow:0 1px 0 hsla(0,0%,100%,0.75);
+	//background-image:url("../images/forceOut.png");
+	//background-repeat:no-repeat;
+	//background-size:20% 70%;
+	background-position:left 10% top 45%;**/
+	margin-bottom:10px;
+}
+
+/*#forceExit:hover{
+	background-color:#F9F9F9;
+}*/
+.smLianJie:hover{
+	cursor:pointer;
+}
+div.checker,div.checker span{
+	width:22px;
+	height:22px;
+	background:#fff;
+}
+.row1 .col-xs-10, .row1 .col-md-10, .row1 .col-sm-10, .row1 .col-lg-10{
+width:87% !important;
+}
+.row1 .col-xs-2, .row1 .col-md-2, .row1 .col-sm-2, .row1 .col-lg-2{
+width:13% !important;
+}
+.modify_user{
+padding-left:0px;
+}
+.btn-xs{
+color:#333;
+font-size:14px;
+}
+.btn-xs:hover{
+color:#333
+}
+ul.ztree {margin-top: 10px;border: 1px solid #E0E0E0;/*background: #f0f6e4;width:220px;height:360px;*/overflow-y:auto;overflow-x:auto;/*ict*/padding: 25px;}
+#new_rule_body{
+padding-left:25px;
+}
+.rule_title{
+padding:8px;
+margin-bottom:25px;
+border-left: 2px solid #5b9bd1;
+color:#1A78CA;
+font-size:16px;
+}
+.group{
+margin-top:25px;
+}
+
+h5.form-section, .checkbox-list, .panel-title{
+  font-family: microsoft yahei !important;
+  color: #333;
+  <!-- padding-bottom: 15px !important; -->
+}
+.right_assign_box{
+height:400px;
+overflow-y:auto;
+overflow-x:hidden;
+border:1px solid #e0e0e0;
+}
+.right_assign_box ul.ztree{
+border:0;
+}
+.right_assign_box .table-bordered{
+ border:0;
+ }
+.right_assign_box  .table-bordered>thead>tr>th, .right_assign_box  .table-bordered>tbody>tr>th, .right_assign_box  .table-bordered>tfoot>tr>th, .right_assign_box  .table-bordered>thead>tr>td, .right_assign_box  .table-bordered>tbody>tr>td, .right_assign_box  .table-bordered>tfoot>tr>td{
+ border-left:0;
+ padding:8px 18px;
+}
+.right_assign_box .table>thead>tr>th{
+ border:0;
+}
+#com_zte_ums_ict_sm_new_user_maxlogin .form-control{
+width:30%;
+display:inline;
+margin-left:10px;
+}
+
+.div_padding{
+  padding-left:75px;
+}
+#lockThreshold{width:80%;}
+#lockThreshold_select{width:100%;height:20px;font-size:0.8em;color:black;margin-top:10px;}
+#lockThreshold_1{position:absolute;cursor:pointer;width:auto;}
+#lockThreshold_2{position:absolute;cursor:pointer;width:auto;}
+#lockThreshold_3{position:absolute;cursor:pointer;width:auto;}
+
+.delete-icon {
+  float: right;
+  /* padding: 5px; */
+  cursor: pointer;
+  position: relative;
+  display: inline-block;
+  margin-right: 2%;
+}
+.delete-icon img {
+  position: absolute;
+  right: 0px;
+}
+.removeIcon {
+  width: 22px;
+  height: 22px;
+  float: right;
+  margin-right: -8px;
+  margin-top: -8px;
+  background: url(/ngict/iui/component/ict/ict-dashboard/images/delete.png) no-repeat 0px 0px;
+  cursor: pointer;
+}
+.deleteIconHidden{
+	opacity:0;
+}
+.nam{
+	font-size: 15px;
+}
+.queryLink{
+	font-size: 15px;
+	margin-top: 10px;
+}
+.carousel-control {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: 3% !important;
+  opacity: .5;
+  filter: alpha(opacity=50);
+  font-size: 20px;
+  color: #fff;
+  text-align: center;
+  text-shadow: 0 1px 2px rgba(0,0,0,.6);
+}
+.carousel-control .glyphicon-chevron-right {
+  right: 10%;
+}
+.item {
+  overflow: hidden;
+  display: block;
+  margin-bottom: 0px !important;
+}
+.page-info-bottom{
+margin-top:10px;
+}
+
+.deleteIcon {
+	font-size:16px;			
+	cursor: pointer;
+	margin-bottom: 10px;
+	float: left;
+	color:#a9c2d6;
+	border:1px solid #eef5fb;
+	border-radius:20px;
+	padding:3px;
+}
+.deleteIcon:hover {
+border:1px solid #e74c3c;
+color:#e74c3c;
+}
+.resourceObj {
+	margin-left: 30px;	
+	margin-top:3px;		
+}
+
+.resourceList th {
+	background-color: #D3E7F8 !important;
+	border: 1px solid #CEE5F9 !important;
+}
+.resourceList td {
+	background-color: #EEF5FB !important;
+	padding-top: 20px !important;
+	border: 1px solid #CEE5F9 !important;
+}
+.filterDiv {
+	margin-bottom:0;
+						
+}
+.filterDiv input{
+	border: 1px solid #ddd;	
+	//border-radius:3px;
+	height:30px;
+	width:100%;
+	border-bottom:0;
+}
+.boxLabel {
+	background-color: #D3E7F8;
+	margin-left: 26%;
+	border: 1px solid #E2EFFA;
+	padding: 8px;
+}
+.blueactive {
+	color: #ffffff !important;
+	background-color: #5b9bd1;
+}
+.btnWhite {
+	font-size: 14px;
+	line-height: 15px;
+	border: 1px solid #cccccc;
+}
+#taskTimeDiv {
+	margin-top: 8px;
+}
+.daterangepicker .ranges input[type="text"] {
+	width: 76px !important;
+	font-size: 11px;
+	vertical-align: middle;
+}
+#queryTimeRange {
+	width: 275px;
+	padding: 6px;
+	border: 1px solid #ddd;
+}
+.selector-class{
+	width: 200px;
+}
+.table{
+	margin-bottom: 0px;
+}
+.ict-modify{
+	font-size:16px;
+	float: right;
+	margin-bottom:-10px;	
+	position:absolute;	
+	right:5px;
+	bottom:30px;				
+}
+.subbox{
+	text-align:center;
+}
+.subbox .ict-modify{
+	border:1px #fff solid;
+	padding:3px;
+	border-radius:5px;
+}
+.subbox .ict-modify:hover{
+	background-color:#fff;		
+	color:#709bce;
+}		
+.subbox .textImageStyle span{
+	padding:10px;
+	border-radius:30px;
+	background-color:#fff;
+	text-align:center;
+	margin:0 auto;
+	color:#b3c9e2;
+	font-size:16px;
+}
+.textImageStyle{
+	margin-bottom:4px;
+}
+.carousel-control .glyphicon-chevron-left{
+	margin-left:-30px;
+}
+.carousel-control .glyphicon-chevron-right{
+	margin-right:-10px;
+}
+.carousel-control.left, .carousel-control.right {
+    background-image: none;
+}
+.carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right, .carousel-control .icon-prev, .carousel-control .icon-next {
+    /* margin-left: 0; */
+    font-size: 25px;
+    margin-top: -20px;
+}
+.resourceList .heading{
+	font:12px normal "microsoft yahei";
+}
+.ms-controller {
+	visibility: hidden
+}
diff --git a/openo-portal/portal-performance/src/main/webapp/performance/css/pmQueryBox.css b/openo-portal/portal-performance/src/main/webapp/performance/css/pmQueryBox.css
new file mode 100644
index 00000000..06428ed7
--- /dev/null
+++ b/openo-portal/portal-performance/src/main/webapp/performance/css/pmQueryBox.css
@@ -0,0 +1,310 @@
+/**
+ * Copyright 2016, CMCC Technologies Co., Ltd.
+ *
+ * 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.
+ */
+#addRule {
+	margin-bottom: 10px;
+}
+.btn.dropdown-toggle,
+.btn-group .btn.dropdown-toggle,
+.btn:hover,
+.btn:disabled,
+.btn[disabled],
+.btn:focus,
+.btn:active,
+.btn.active {
+	outline: none !important;
+	background-image: none !important;
+	filter: none;
+	-webkit-box-shadow: none;
+	-moz-box-shadow: none;
+	box-shadow: none;
+	text-shadow: none;
+}
+.btn-rank {
+	border-color: #ccc;
+}
+.alarm-serious {
+	background-color: #de4040;
+	color: #ffffff !important;
+}
+.alarm-serious:hover {
+	background-color: #c23737 !important;
+}
+.alarm-important {
+	background-color: #e37c29;
+	color: #ffffff !important;
+}
+.alarm-important:hover {
+	background-color: #c86e25 !important;
+}
+.alarm-secondary {
+	background-color: #e9d426;
+	color: #ffffff !important;
+}
+.alarm-secondary:hover {
+	background-color: #d3c023 !important;
+}
+.alarm-slightly {
+	background-color: #86bcdb;
+	color: #ffffff !important;
+}
+.alarm-slightly:hover {
+	background-color: #77a7c2 !important;
+}
+.btn-group.btn-group-circle > .btn:first-child {
+	border-radius: 3px 0px 0px 3px;
+}
+.btn-group.btn-group-circle > .btn:last-child {
+	border-radius: 0 3px 3px 0 !important;
+}
+.btn-group-circle {
+	padding-bottom: 5px;
+}
+.open .btn-default.dropdown-toggle {
+	color: #333;
+	background-color: #ededed;
+	border-color: #b3b3b3;
+}
+.btn-group .btn-default:active,
+.btn-group .btn-default.active {
+	background-image: none;
+	background-color: #5b9bd1;
+	color: #fff;
+}
+.ruleBox {
+	height: 175px;
+}
+.filterRule {
+	background-image: url(../images/filter.png);
+	background-repeat: no-repeat;
+	background-position: center;
+	text-align: center;
+}
+/*.boxPadding {
+	padding-top: 60px;
+}*/
+.ruleRow {
+	padding-left: 20px;
+	padding-right: 30px;
+	font-size: 15px;
+}
+.filterRuleRow {
+	padding-left: 30px;
+	padding-right: 20px;
+	font-size: 15px;
+}
+.fRule {
+	padding-left: 12%;
+	padding-right: 12%;
+}
+.ruleNav .ruleBox .rule {
+	margin-top: 5px;
+	padding-left: 0px;
+}
+.bigText {
+	height: 400px;
+}
+.bigText1 {
+	margin-bottom: 20px;
+	height: 320px;
+}
+.right_assign_box {
+	height: 412px;
+	overflow-y: auto;
+	overflow-x: hidden;
+	border: 1px solid #ccc;
+	border-radius: 4px;
+}
+.boxHeight {
+	height: 723px;
+}
+.right_assign_box1 {
+	height: 800px;
+	overflow-y: auto;
+	overflow-x: hidden;
+	border: 1px solid #e0e0e0;
+}
+.right_assign_box ul.ztree {
+	border: 0;
+}
+.right_assign_box .table-bordered {
+	border: 0;
+}
+.right_assign_box .table-bordered > thead > tr > th,
+.right_assign_box .table-bordered > tbody > tr > th,
+.right_assign_box .table-bordered > tfoot > tr > th,
+.right_assign_box .table-bordered > thead > tr > td,
+.right_assign_box .table-bordered > tbody > tr > td,
+.right_assign_box .table-bordered > tfoot > tr > td {
+	border-left: 0;
+	padding: 8px 18px;
+}
+.right_assign_box .table > thead > tr > th {
+	border: 0;
+}
+ul.ztree {
+	border: 1px solid #E0E0E0;
+	/*background: #f0f6e4;width:220px;height:360px;*/
+	
+	overflow-y: auto;
+	overflow-x: auto;
+}
+.rule_title {
+	padding-left: 5px;
+	margin-bottom: 15px;
+	border-left: 2px solid #5b9bd1;
+	color: #1A78CA;
+	font-size: 16px;
+}
+.row1 .separator-line {
+	margin-bottom: 5px;
+}
+.group {
+	margin-top: 25px;
+}
+.ztree li span.button.diy1_icon {
+	background: url("");
+}
+.titlefont {
+	font-size: 16px;
+}
+#new_rule_body {
+	padding-left: 25px;
+}
+#defaulInfo,
+#selectAralmCodes {
+	border: 1px solid #e0e0e0;
+}
+.iconPosition div {
+	color: #757575;
+	cursor: pointer;
+}
+.iconPosition div:hover {
+	color: #333;
+}
+#dataRange {
+	margin-left: 15px;
+}
+.dataRow {
+	margin-left: 15px;
+}
+.alarmLevel {
+	margin-left: 15px;
+}
+.ruleList {
+	background-color: #fff;
+	min-height: 460px;
+}
+.ruleNav {
+	// margin-bottom: 15px;
+	margin-left: 15px;
+	margin-right: 15px;
+}
+.right-assign-checked-box {
+	height: 412px;
+	overflow-y: auto;
+	overflow-x: auto;
+	border: 1px solid #e0e0e0;
+}
+.box {
+	color: white;
+	text-align: center;
+	height: 80px !important;
+	font-size: 14px;
+}
+.boxStyle1,
+.ProcessingSuggestion {
+	background-repeat: no-repeat;
+	background-color: #48C79C !important;
+	background-position-y: 100%;
+}
+.boxStyle1:hover,
+.ProcessingSuggestion:hover {
+	background-color: #64e2b8 !important;
+}
+.boxStyle2,
+.notifyFilter {
+	background-repeat: no-repeat;
+	background-color: #709BCE !important;
+	background-position-y: 100%;
+}
+.boxStyle2:hover,
+.notifyFilter:hover {
+	background-color: #87b2e4 !important;
+}
+.boxStyle3,
+.alarmBox {
+	background-repeat: no-repeat;
+	background-color: #9699E0 !important;
+	background-position-y: 100%;
+}
+.boxStyle3:hover,
+.alarmBox:hover {
+	background-color: #acaff1 !important;
+}
+.boxStyle4,
+.codesetting {
+	background-repeat: no-repeat;
+	background-color: #5BC0DE !important;
+	background-position-y: 100%;
+}
+.boxStyle4:hover,
+.codesetting:hover {
+	background-color: #8dd4eb !important;
+}
+.ruleNav .separator-line {
+	margin-bottom: 5px;
+	height: 3px;
+}
+.ruleNav .separator-line-visibilty {
+	visibility: hidden;
+}
+a {
+	text-decoration: none !important;
+}
+.subbox {
+	padding-left: 5px;
+	padding-right: 5px;
+}
+.textImageStyle {
+	font-size: 24px;
+	margin-right: 5px;
+	vertical-align: middle;
+	padding-left: 0;
+	padding-bottom: 1px;
+	padding-top: 14px;
+}
+#test1>div {
+	margin-bottom: 15px;
+}
+.rule-submit {
+	padding-left: 45px;
+}
+.sugg-box .form-control {
+	margin-bottom: 15px;
+}
+/*.dataTables_info{
+    float:right;
+}*/
+
+@media screen and (max-width: 900px) and (min-width: 600px) {
+	.rule-pic {
+		display: none;
+	}
+	.ruleNav .col-xs-10 {
+		width: 100%;
+	}
+}
+
diff --git a/openo-portal/portal-performance/src/main/webapp/performance/i18n/web-alarm-i18n-en-US.properties b/openo-portal/portal-performance/src/main/webapp/performance/i18n/web-alarm-i18n-en-US.properties
new file mode 100644
index 00000000..281d3e35
--- /dev/null
+++ b/openo-portal/portal-performance/src/main/webapp/performance/i18n/web-alarm-i18n-en-US.properties
@@ -0,0 +1,123 @@
+#
+# Copyright 2016, CMCC Technologies Co., Ltd.
+#
+# 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.
+#
+//表格相关
+ngict-fm-iui-table-sLengthMenu=View _MENU_ records
+ngict-fm-iui-table-sZeroRecords=No matching records found
+ngict-fm-iui-table-sInfo= | Found total _TOTAL_ records     
+ngict-fm-iui-table-sInfoEmpty=No records found to show
+ngict-fm-iui-table-sGroupActions=_TOTAL_ records selected:  
+ngict-fm-iui-table-sAjaxRequestGeneralError=Could not complete request. Please check your internet connection.
+ngict-fm-iui-table-sEmptyTable=No data available in table
+ngict-fm-iui-table-sPrevious=Prev
+ngict-fm-iui-table-sNext=Next
+ngict-fm-iui-table-sPage=Page
+ngict-fm-iui-table-sPageOf=of
+
+//告警界面
+ngict_fm_iui_curalarm_currentAlarm=Active Alarms
+ngict_fm_iui_curalarm_advance=Advance
+ngict_fm_iui_curalarm_alarmPosition=Location
+ngict_fm_iui_curalarm_choosed=Selected
+ngict_fm_iui_curalarm_locationSelected=Selected <!--alarmLocationSelectedCount-->
+ngict_fm_iui_curalarm_alarmTypeSelected=Selected <!--alarmTypeSelectedCount-->
+ngict_fm_iui_curalarm_probableCauseSelected=Selected <!--alarmCodeSelectedCount-->
+ngict_fm_iui_curalarm_alarmType=Alarm Type
+ngict_fm_iui_curalarm_probableCause=Alarm Code
+ngict_fm_iui_curalarm_ackTimeTitle=ACK Time:
+ngict_fm_iui_curalarm_recentOneDay=Last One Day
+ngict_fm_iui_curalarm_recenttwoDays=Last Two Days
+ngict_fm_iui_curalarm_recentOneWeek=Last One Week
+ngict_fm_iui_curalarm_raisedTime=Raised Time:
+ngict_fm_iui_curalarm_query=Query
+ngict_fm_iui_curalarm_save=Save
+ngict_fm_iui_curalarm_clean=Clear
+ngict_fm_iui_curalarm_refreash=Refreash
+ngict_fm_iui_curalarm_exportAll=Export All
+ngict_fm_iui_curalarm_name=Name
+ngict_fm_iui_curalarm_condSaveTip=Update conditions when conditions exist,otherwise create a new condition.
+ngict_fm_iui_curalarm_cancel=Cancel
+ngict_fm_iui_curalarm_ok=OK
+ngict_fm_iui_curalarm_affirm=Acknowledge
+ngict_fm_iui_curalarm_unaffirm=Unacknowledge
+ngict_fm_iui_curalarm_custom=Custom
+
+ngict_fm_iui_curalarm_critical=Critical
+ngict_fm_iui_curalarm_major=Major
+ngict_fm_iui_curalarm_minor=Minor
+ngict_fm_iui_curalarm_warning=Warning
+ngict_fm_iui_curalarm_ackAlarm=Acknowledge
+ngict_fm_iui_curalarm_unackAlarm=Unacknowledge
+ngict_fm_iui_curalarm_visible=Visible
+ngict_fm_iui_curalarm_invisible=Invisible
+
+ngict_fm_iui_curalarm_order=No.
+ngict_fm_iui_curalarm_id=id
+ngict_fm_iui_curalarm_ne=NE
+ngict_fm_iui_curalarm_moc=NE Type
+ngict_fm_iui_curalarm_probableCauseCode=Alarm Code
+ngict_fm_iui_curalarm_alarmRaisedTime=Raised Time
+ngict_fm_iui_curalarm_perceivedSeverity=Severity
+ngict_fm_iui_curalarm_ackState=ACK State
+ngict_fm_iui_curalarm_ackTime=(UN)ACK Time
+ngict_fm_iui_curalarm_position1=Position1
+ngict_fm_iui_curalarm_alarmChangedTime=Changed Time
+ngict_fm_iui_curalarm_ackUserId=(UN)ACK User ID
+ngict_fm_iui_curalarm_ackSystemId=(UN)ACK System ID
+ngict_fm_iui_curalarm_alarmClearedTime=Cleared Time
+ngict_fm_iui_curalarm_additionalText=Additional Information
+ngict_fm_iui_curalarm_ackSystem=(UN)ACK System
+ngict_fm_iui_curalarm_clearUserId=Clear User ID
+ngict_fm_iui_curalarm_clearSystemId=Clear System ID
+ngict_fm_iui_curalarm_clearType=Clear Type
+ngict_fm_iui_curalarm_specificProblem=Specific Problem
+ngict_fm_iui_curalarm_neIp=NE IP
+
+//调用datarangepicker组件
+ngict_fm_iui_curalarm_from=from
+ngict_fm_iui_curalarm_to=to
+ngict_fm_iui_curalarm_Mon=Mon
+ngict_fm_iui_curalarm_Tues=Tues
+ngict_fm_iui_curalarm_Wed=Wed
+ngict_fm_iui_curalarm_Thurs=Thurs
+ngict_fm_iui_curalarm_Fri=Fri
+ngict_fm_iui_curalarm_Sat=Sat
+ngict_fm_iui_curalarm_Sun=Sun
+ngict_fm_iui_curalarm_January=January
+ngict_fm_iui_curalarm_February=February
+ngict_fm_iui_curalarm_March=March
+ngict_fm_iui_curalarm_April=April
+ngict_fm_iui_curalarm_May=May
+ngict_fm_iui_curalarm_June=June
+ngict_fm_iui_curalarm_July=July
+ngict_fm_iui_curalarm_August=August
+ngict_fm_iui_curalarm_September=September
+ngict_fm_iui_curalarm_October=October
+ngict_fm_iui_curalarm_November=November
+ngict_fm_iui_curalarm_December=December
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/openo-portal/portal-performance/src/main/webapp/performance/i18n/web-performance-i18n-en-US.properties b/openo-portal/portal-performance/src/main/webapp/performance/i18n/web-performance-i18n-en-US.properties
new file mode 100644
index 00000000..02fa546b
--- /dev/null
+++ b/openo-portal/portal-performance/src/main/webapp/performance/i18n/web-performance-i18n-en-US.properties
@@ -0,0 +1,145 @@
+#
+# Copyright 2016, CMCC Technologies Co., Ltd.
+#
+# 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.
+#
+com_zte_ums_ict_pm_index_indexManagement=Index Management
+com_zte_ums_ict_pm_index_indexName=Name
+com_zte_ums_ict_pm_index_dataType=Data Type
+com_zte_ums_ict_pm_index_moType=Mo Type
+com_zte_ums_ict_pm_index_counter=Counter
+com_zte_ums_ict_pm_index_resourceType=NE Type
+com_zte_ums_ict_pm_index_strExpression=Formula
+com_zte_ums_ict_pm_index_indexDes=Formula Expression
+com_zte_ums_ict_pm_index_operate=Operate
+com_zte_ums_ict_pm_index_selectCounter=Please select the Mo Type first
+com_zte_ums_ict_sm_confirmToDeleteIndex=Are you sure to delete this index?
+STRING=String
+INT=Int
+FLOAT=Float
+LONG=Long
+DATA=Date
+PERCENT=Percent
+
+com_zte_ums_ict_pm_threshold=Threshold
+com_zte_ums_ict_pm_threshold_title=Threshold Management
+com_zte_ums_ict_pm_threshold_index=门限标示
+com_zte_ums_ict_pm_threshold_taskName=Task Name
+com_zte_ums_ict_pm_index_direction=Direction
+com_zte_ums_ict_pm_threshold_warning=Warning Threshold
+com_zte_ums_ict_pm_threshold_minor=Minor Threshold
+com_zte_ums_ict_pm_threshold_major=Major Threshold
+com_zte_ums_ict_pm_threshold_critical=Critical Threshold
+com_zte_ums_ict_pm_threshold_resource=Resource
+com_zte_ums_ict_pm_threshold_resource_name=Resource Name
+com_zte_ums_ict_pm_threshold_resource_value=Resource Value
+com_zte_ums_ict_pm_threshold_resource_turbulence=Turbulence Value
+com_zte_ums_ict_pm_threshold_up=Up
+com_zte_ums_ict_pm_threshold_down=Down
+
+
+com_zte_ums_ict_pm_index_dataType=数据类型
+com_zte_ums_ict_pm_index_activeStatus=状态
+com_zte_ums_ict_pm_index_activeStatus_true=激活
+com_zte_ums_ict_pm_index_activeStatus_false=挂起
+com_zte_ums_ict_pm_index_granularity=粒度
+com_zte_ums_ict_pm_index_beginTime=开始时间
+com_zte_ums_ict_pm_index_endTime=结束时间
+
+
+com_zte_ums_ict_pm_action_add=Create
+com_zte_ums_ict_pm_action_modify=Modify
+com_zte_ums_ict_pm_action_delete=Delete
+com_zte_ums_ict_pm_action_query=Query
+
+com_zte_ums_ict_pm_submit=Submit
+com_zte_ums_ict_pm_back=Back
+com_zte_ums_ict_sm_confirmToDeleteThreshold=Are you sure to remove this task？
+
+com_zte_ums_ict_pm_query_data=PM Data Query
+com_zte_ums_ict_pm_query_edit=Edit Query Condition
+com_zte_ums_ict_pm_query_result=Query Data Result
+com_zte_ums_ict_pm_query_start_time=Start Time
+com_zte_ums_ict_pm_query_end_time=End Time
+com_zte_ums_ict_pm_query_granularity=Granularity
+com_zte_ums_ict_pm_query_resource_type=Resource Type
+com_zte_ums_ict_pm_query_resource_name=Resource Name
+com_zte_ums_ict_pm_query_time=Query Time
+com_zte_ums_ict_pm_query_granularity=Query Granularity
+com_zte_ums_ict_pm_query_pmIndex=PM Index
+com_zte_ums_ict_pm_query_moType=Mo Type
+com_zte_ums_ict_pm_query_index=Counters
+com_zte_ums_ict_pm_query_resource=Resource
+com_zte_ums_ict_pm_query_target_resource=Query Resource
+com_zte_ums_ict_pm_query_selected_resource=Selected Resources
+com_zte_ums_ict_pm_query_selected_search=Search
+com_zte_ums_ict_pm_query_5=5 Minutes
+com_zte_ums_ict_pm_query_15=15 Minutes
+com_zte_ums_ict_pm_query_60=One Hour
+resourcesToFilter=Search
+
+//表格相关
+ngict-log-iui-table-sLengthMenu=View _MENU_ records
+ngict-log-iui-table-sZeroRecords=No matching records found
+ngict-log-iui-table-sInfo=Found total _TOTAL_ records
+ngict-log-iui-table-sInfoEmpty=No records found to show
+ngict-log-iui-table-sGroupActions=_TOTAL_ records selected:  
+ngict-log-iui-table-sAjaxRequestGeneralError=Could not complete request. Please check your internet connection.
+ngict-log-iui-table-sEmptyTable=No data available in table
+ngict-log-iui-table-sPrevious=Prev
+ngict-log-iui-table-sNext=Next
+ngict-log-iui-table-sPage=Page
+ngict-log-iui-table-sPageOf=of
+
+//日期组件
+ngict-iui-dateRange-month=Month
+ngict-iui-dateRange-Jan=Jan
+ngict-iui-dateRange-Feb=Feb
+ngict-iui-dateRange-Mar=Mar
+ngict-iui-dateRange-Apr=Apr
+ngict-iui-dateRange-May=May
+ngict-iui-dateRange-Jun=Jun
+ngict-iui-dateRange-Jul=Jul
+ngict-iui-dateRange-Aug=Aug
+ngict-iui-dateRange-Sep=Sep
+ngict-iui-dateRange-Oct=Oct
+ngict-iui-dateRange-Nov=Nov
+ngict-iui-dateRange-Dec=Dec
+ngict-iui-dateRange-applyLabel=Confirm
+ngict-iui-dateRange-cancelLabel=Cancel
+ngict-iui-dateRange-fromLabel=From
+ngict-iui-dateRange-toLabel=To
+ngict-iui-dateRange-customRangeLabel=Custom
+ngict-iui-dateRange-Sunday=Su
+ngict-iui-dateRange-Monday=Mo
+ngict-iui-dateRange-Tuesday=Tu
+ngict-iui-dateRange-Wednesday=We
+ngict-iui-dateRange-Thursday=Th
+ngict-iui-dateRange-Friday=Fr
+ngict-iui-dateRange-Saturday=Sa
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/openo-portal/portal-performance/src/main/webapp/performance/image/aos_view-fm.gif b/openo-portal/portal-performance/src/main/webapp/performance/image/aos_view-fm.gif
new file mode 100644
index 00000000..7914b55a
--- /dev/null
+++ b/openo-portal/portal-performance/src/main/webapp/performance/image/aos_view-fm.gif
diff --git a/openo-portal/portal-performance/src/main/webapp/performance/image/arrow.png b/openo-portal/portal-performance/src/main/webapp/performance/image/arrow.png
new file mode 100644
index 00000000..5c66dd78
--- /dev/null
+++ b/openo-portal/portal-performance/src/main/webapp/performance/image/arrow.png
diff --git a/openo-portal/portal-performance/src/main/webapp/performance/image/chart_icon.png b/openo-portal/portal-performance/src/main/webapp/performance/image/chart_icon.png
new file mode 100644
index 00000000..f4fbc311
--- /dev/null
+++ b/openo-portal/portal-performance/src/main/webapp/performance/image/chart_icon.png
diff --git a/openo-portal/portal-performance/src/main/webapp/performance/image/delete.png b/openo-portal/portal-performance/src/main/webapp/performance/image/delete.png
new file mode 100644
index 00000000..5947c7c9
--- /dev/null
+++ b/openo-portal/portal-performance/src/main/webapp/performance/image/delete.png
diff --git a/openo-portal/portal-performance/src/main/webapp/performance/image/details_close.png b/openo-portal/portal-performance/src/main/webapp/performance/image/details_close.png
new file mode 100644
index 00000000..e6281bae
--- /dev/null
+++ b/openo-portal/portal-performance/src/main/webapp/performance/image/details_close.png
diff --git a/openo-portal/portal-performance/src/main/webapp/performance/image/details_open.png b/openo-portal/portal-performance/src/main/webapp/performance/image/details_open.png
new file mode 100644
index 00000000..5bf4389c
--- /dev/null
+++ b/openo-portal/portal-performance/src/main/webapp/performance/image/details_open.png
diff --git a/openo-portal/portal-performance/src/main/webapp/performance/image/down.png b/openo-portal/portal-performance/src/main/webapp/performance/image/down.png
new file mode 100644
index 00000000..f7732ba8
--- /dev/null
+++ b/openo-portal/portal-performance/src/main/webapp/performance/image/down.png
diff --git a/openo-portal/portal-performance/src/main/webapp/performance/image/filter.png b/openo-portal/portal-performance/src/main/webapp/performance/image/filter.png
new file mode 100644
index 00000000..d7600c8b
--- /dev/null
+++ b/openo-portal/portal-performance/src/main/webapp/performance/image/filter.png
diff --git a/openo-portal/portal-performance/src/main/webapp/performance/image/statistics.png b/openo-portal/portal-performance/src/main/webapp/performance/image/statistics.png
new file mode 100644
index 00000000..8be1db19
--- /dev/null
+++ b/openo-portal/portal-performance/src/main/webapp/performance/image/statistics.png
diff --git a/openo-portal/portal-performance/src/main/webapp/performance/image/table_icon.png b/openo-portal/portal-performance/src/main/webapp/performance/image/table_icon.png
new file mode 100644
index 00000000..4a7be176
--- /dev/null
+++ b/openo-portal/portal-performance/src/main/webapp/performance/image/table_icon.png
diff --git a/openo-portal/portal-performance/src/main/webapp/performance/image/up.png b/openo-portal/portal-performance/src/main/webapp/performance/image/up.png
new file mode 100644
index 00000000..8bd53741
--- /dev/null
+++ b/openo-portal/portal-performance/src/main/webapp/performance/image/up.png
diff --git a/openo-portal/portal-performance/src/main/webapp/performance/js/alarmConds.js b/openo-portal/portal-performance/src/main/webapp/performance/js/alarmConds.js
new file mode 100644
index 00000000..69f72d77
--- /dev/null
+++ b/openo-portal/portal-performance/src/main/webapp/performance/js/alarmConds.js
@@ -0,0 +1,276 @@
+/*
+ * Copyright 2016, CMCC Technologies Co., Ltd.
+ *
+ * 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.
+ */
+var AlarmConds = function () {
+
+    return {
+
+        parseActiveConds2JSon: function (conds) {
+            return this.parseConds2JSon(conds, 1);
+        },
+        parseHistoryConds2JSon: function (conds) {
+            return this.parseConds2JSon(conds, 2);
+        },
+
+        /**
+         *  传入的条件数组说明：
+         *  每个条件都是一个对象，包含2个属性：type和data。type表示条件的类型，data是一个数组，每项都表示一个条件。
+         *  下面是支持的所有条件的说明：
+         *  1）网元
+         *      {
+			 *          type : 'Position',
+			 *          data : [{   //支持多个
+			 *               locationId : 'lId1',
+			 *               oid : 'oid1',
+			 *               isSelf : true //是否分组，true表示只包含自己，false表示分组
+			 *           }
+			 *          ]
+			 *       }
+         *  2）级别
+         *      {
+			 *          type : 'Severity',
+			 *          data : [{  //支持多个
+			 *               severity : 1 //1表示严重，2表示主要，3表示次要，4表示警告
+			 *           }
+			 *          ]
+			 *       }
+         *  3）确认状态
+         *      {
+			 *          type : 'AckState',
+			 *          data : [{  //支持多个
+			 *               ackState : 1 //1表示已确认，2表示未确认
+			 *           }
+			 *          ]
+			 *      }
+         *  4）可见性
+         *      {
+			 *          type : 'FilterState',
+			 *          data : [{  //支持多个
+			 *               filterState : 1 //1表示可见，0表示不可见
+			 *           }
+			 *          ]
+			 *       }
+         *  5）告警类型
+         *      {
+			 *          type : 'AlarmType',
+			 *          data : [{  //支持多个
+			 *               alarmType : 1 //0表示通信告警，1表示处理错误告警，2表示服务质量告警，3表示设备告警，4表示环境告警，5表示网管系统告警，6表示完整性告警，7表示可用性告警，8表示物理攻击告警，9表示安全攻击告警，10表示时限告警
+			 *           }
+			 *          ]
+			 *       }
+         *  6）告警码
+         *      {
+			 *          type : 'ProbableCause',
+			 *          data : [{  //支持多个
+			 *               systemType : 6,
+			 *               code : 1001
+			 *           }
+			 *          ]
+			 *       }
+         *  7）发生时间
+         *      {
+			 *          type : 'RaisedTime',
+			 *          data : [{  //支持一个
+			 *               mode : 0, //0表示区间，1表示最近
+			 *               start : 1399429229000, //mode为0时，表示开始时间，mode为1时，表示时间的毫秒值
+			 *               end : 1399515601000  //mode为0时，表示结束时间，mode为1时，表示时间的毫秒值
+			 *           }
+			 *          ]
+			 *       }
+         *  8）确认时间
+         *      {
+			 *          type : 'AckTime',
+			 *          data : [{  //支持一个
+			 *               mode : 0, //0表示区间，1表示最近
+			 *               start : 1399429229000, //mode为0时，表示开始时间，mode为1时，表示时间的毫秒值
+			 *               end : 1399515601000  //mode为0时，表示结束时间，mode为1时，表示时间的毫秒值
+			 *           }
+			 *          ]
+			 *       }
+         *  9）清除时间
+         *      {
+			 *          type : 'ClearedTime',
+			 *          data : [{  //支持一个
+			 *               mode : 0, //0表示区间，1表示最近
+			 *               start : 1399429229000, //mode为0时，表示开始时间，mode为1时，表示时间的毫秒值
+			 *               end : 1399515601000  //mode为0时，表示结束时间，mode为1时，表示时间的毫秒值
+			 *           }
+			 *          ]
+			 *       }
+         *    10）告警ID
+         *      {
+			 *          type : 'AlarmId',
+			 *          data : [{  //支持一个
+			 *               id : 1412923648983
+			 *           }
+			 *          ]
+			 *       }
+         *    11）MOC
+         *      {
+			 *          type : 'Moc',
+			 *          data : [{ //支持一个
+			 *               moc : 'moc' //支持前缀匹配，如：'moc%'
+			 *           }
+			 *          ]
+			 *       }
+         *    12）ip地址
+         *      {
+			 *			type : 'NeIp',
+			 *			data : [{ //支持一个
+			 *				neIp : '10.74.165.57'
+			 *			}
+			 *         ]
+			 *		}
+         */
+        parseConds2JSon: function (conds, ruleType) {
+            var parser = {
+                Position: function (cond) {
+                    var condStr = "";
+                    if (cond.type === "Position" && cond.data.length > 0) {
+                        condStr = "<NewPositionCond OwnerType='Position' value='" + cond.data[0].locationId + "#" + cond.data[0].oid + "#" + cond.data[0].isSelf;
+                        for (var i = 1; i < cond.data.length; i++) {
+                            condStr += "∷" + cond.data[i].locationId + "#" + cond.data[i].oid + "#" + cond.data[i].isSelf;
+                        }
+                        condStr += "' />";
+                    }
+                    return condStr;
+                },
+                Severity: function (cond) {
+                    var condStr = "";
+                    if (cond.type === "Severity" && cond.data.length > 0) {
+                        condStr = "<PerceivedSeverity value='" + cond.data[0].severity;
+                        for (var i = 1; i < cond.data.length; i++) {
+                            condStr += "," + cond.data[i].severity;
+                        }
+                        condStr += "' />";
+                    }
+                    return condStr;
+                },
+                AckState: function (cond) {
+                    var condStr = "";
+                    if (cond.type === "AckState" && cond.data.length > 0) {
+                        condStr = "<AckState value='" + cond.data[0].ackState;
+                        for (var i = 1; i < cond.data.length; i++) {
+                            condStr += "," + cond.data[i].ackState;
+                        }
+                        condStr += "' />";
+                    }
+                    return condStr;
+                },
+                FilterState: function (cond) {
+                    var condStr = "";
+                    if (cond.type === "FilterState" && cond.data.length > 0) {
+                        condStr = "<FilterState value='" + cond.data[0].filterState;
+                        for (var i = 1; i < cond.data.length; i++) {
+                            condStr += "," + cond.data[i].filterState;
+                        }
+                        condStr += "' />";
+                    }
+                    return condStr;
+                },
+                AlarmType: function (cond) {
+                    var condStr = "";
+                    if (cond.type === "AlarmType" && cond.data.length > 0) {
+                        condStr = "<AlarmType value='" + cond.data[0].alarmType;
+                        for (var i = 1; i < cond.data.length; i++) {
+                            condStr += "," + cond.data[i].alarmType;
+                        }
+                        condStr += "' />";
+                    }
+                    return condStr;
+                },
+                ProbableCause: function (cond) {
+                    var condStr = "";
+                    if (cond.type === "ProbableCause" && cond.data.length > 0) {
+                        condStr = "<ProbableCause value='" + cond.data[0].systemType + "#" + cond.data[0].code;
+                        for (var i = 1; i < cond.data.length; i++) {
+                            condStr += "," + cond.data[i].systemType + "#" + cond.data[i].code;
+                        }
+                        condStr += "' />";
+                    }
+                    return condStr;
+                },
+                RaisedTime: function (cond) {
+                    var condStr = "";
+                    if (cond.type === "RaisedTime" && cond.data.length === 1) {
+                        condStr = "<RaisedTime model='" + cond.data[0].mode + "' start='" + cond.data[0].start + "' end= '" + cond.data[0].end + "' queryTimeZone='' condTimeZone='' />";
+                    }
+                    return condStr;
+                },
+                AckTime: function (cond) {
+                    var condStr = "";
+                    if (cond.type === "AckTime" && cond.data.length === 1) {
+                        condStr = "<AckTime model='" + cond.data[0].mode + "' start='" + cond.data[0].start + "' end= '" + cond.data[0].end + "' queryTimeZone='' condTimeZone='' />";
+                    }
+                    return condStr;
+                },
+                ClearedTime: function (cond) {
+                    var condStr = "";
+                    if (cond.type === "ClearedTime" && cond.data.length === 1) {
+                        condStr = "<ClearedTime model='" + cond.data[0].mode + "' start='" + cond.data[0].start + "' end= '" + cond.data[0].end + "' queryTimeZone='' condTimeZone='' />";
+                    }
+                    return condStr;
+                },
+                AlarmId: function (cond) {
+                    var condStr = "";
+                    if (cond.type === "AlarmId" && cond.data.length === 1) {
+                        condStr = "<IDString value='" + cond.data[0].id + "'/>";
+                    }
+                    return condStr;
+                },
+                Moc: function (cond) {
+                    var condStr = "";
+                    if (cond.type === "Moc" && cond.data.length === 1) {
+                        condStr = "<Moc Moc='" + cond.data[0].moc + "' SELECT_MODEL='false' MocSelf='true' />";
+                    }
+                    return condStr;
+                },
+                NeIp: function (cond) {
+                    var condStr = "";
+                    if (cond.type === "NeIp" && cond.data.length === 1) {
+                        condStr = "<NeIp value='" + cond.data[0].neIp + "' />";
+                    }
+                    return condStr;
+                }
+            };
+
+            var d = new Date();
+            var JSonObj = {
+                rule: {
+                    ruleId: -1,
+                    name: "Alarm",
+                    creator: "admin",
+                    createTime: d.getTime(),
+                    modifier: "",
+                    modifyTime: 0,
+                    description: "",
+                    state: true,
+                    ruleType: ruleType,
+                    ruleSort: 1,
+                    owner: "",
+                    attrs: "<Attrs/>"
+                }
+            };
+            var condStr = "<CompoundCond>";
+            for (var i = 0; i < conds.length; i++) {
+                condStr += parser[conds[i].type](conds[i]);
+            }
+            JSonObj.rule.ruleData = condStr + "</CompoundCond>";
+            //return JSON.stringify(JSonObj);
+            return JSonObj;
+        }
+
+    };
+}();
+\ No newline at end of file
diff --git a/openo-portal/portal-performance/src/main/webapp/performance/js/alarmsServerPageTable.js b/openo-portal/portal-performance/src/main/webapp/performance/js/alarmsServerPageTable.js
new file mode 100644
index 00000000..67659204
--- /dev/null
+++ b/openo-portal/portal-performance/src/main/webapp/performance/js/alarmsServerPageTable.js
@@ -0,0 +1,529 @@
+/*
+ * Copyright 2016, CMCC Technologies Co., Ltd.
+ *
+ * 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.
+ */
+var serverPageTable = {};
+var queryCacheId = null;
+var alarmCount;
+/* Bootstrap style full number pagination control */
+$.fn.dataTableExt.oApi.fnPagingInfo = function (oSettings) {
+    return {
+        "iEnd": oSettings.fnDisplayEnd(),
+        "iLength": oSettings._iDisplayLength,
+        "iTotal": oSettings.fnRecordsTotal(),
+        "iFilteredTotal": oSettings.fnRecordsDisplay(),
+        "iPage": Math.ceil(oSettings._iDisplayStart / oSettings._iDisplayLength),
+        "iTotalPages": Math.ceil(oSettings.fnRecordsDisplay() / oSettings._iDisplayLength)
+    };
+};
+
+$.extend($.fn.dataTableExt.oPagination, {
+    "bootstrap_extended": {
+        "fnInit": function (oSettings, nPaging, fnDraw) {
+            var oLang = oSettings.oLanguage.oPaginate;
+            var oPaging = oSettings.oInstance.fnPagingInfo();
+
+            var fnClickHandler = function (e) {
+                e.preventDefault();
+                if (oSettings.oApi._fnPageChange(oSettings, e.data.action)) {
+                    fnDraw(oSettings);
+                }
+            };
+
+            $(nPaging).append(
+                '<div class="pagination-panel"> ' + oLang.sPage + ' ' +
+                '<a href="#" class="btn btn-sm default prev disabled" title="' + oLang.sPrevious + '"><i class="fa fa-angle-left"></i></a>' +
+                '<input type="text" class="pagination-panel-input input-mini input-inline input-sm" maxlenght="5" style="text-align:center; margin: 0 4px; border: 1px solid rgb(169, 169, 169);height: 28px;">' +
+                '<a href="#" class="btn btn-sm default next disabled" title="' + oLang.sNext + '"><i class="fa fa-angle-right"></i></a> ' +
+                oLang.sPageOf + ' <span class="pagination-panel-total"></span>' +
+                '</div>'
+            );
+
+            var els = $('a', nPaging);
+
+            $(els[0]).bind('click.DT', {action: "previous"}, fnClickHandler);
+            $(els[1]).bind('click.DT', {action: "next"}, fnClickHandler);
+
+            $('.pagination-panel-input', nPaging).bind('change.DT', function (e) {
+                var oPaging = oSettings.oInstance.fnPagingInfo();
+                e.preventDefault();
+                var page = parseInt($(this).val());
+                if (page > 0 && page < oPaging.iTotalPages) {
+                    if (oSettings.oApi._fnPageChange(oSettings, page - 1)) {
+                        fnDraw(oSettings);
+                    }
+                } else {
+                    $(this).val(oPaging.iPage + 1);
+                }
+            });
+
+            $('.pagination-panel-input', nPaging).bind('keypress.DT', function (e) {
+                var oPaging = oSettings.oInstance.fnPagingInfo();
+                if (e.which == 13) {
+                    var page = parseInt($(this).val());
+                    if (page > 0 && page < oSettings.oInstance.fnPagingInfo().iTotalPages) {
+                        if (oSettings.oApi._fnPageChange(oSettings, page - 1)) {
+                            fnDraw(oSettings);
+                        }
+                    } else {
+                        $(this).val(oPaging.iPage + 1);
+                    }
+                    e.preventDefault();
+                }
+            });
+        },
+
+        "fnUpdate": function (oSettings, fnDraw) {
+            var iListLength = 5;
+            var oPaging = oSettings.oInstance.fnPagingInfo();
+            var an = oSettings.aanFeatures.p;
+            var i, j, sClass, iStart, iEnd, iHalf = Math.floor(iListLength / 2);
+
+            if (oPaging.iTotalPages < iListLength) {
+                iStart = 1;
+                iEnd = oPaging.iTotalPages;
+            }
+            else if (oPaging.iPage <= iHalf) {
+                iStart = 1;
+                iEnd = iListLength;
+            } else if (oPaging.iPage >= (oPaging.iTotalPages - iHalf)) {
+                iStart = oPaging.iTotalPages - iListLength + 1;
+                iEnd = oPaging.iTotalPages;
+            } else {
+                iStart = oPaging.iPage - iHalf + 1;
+                iEnd = iStart + iListLength - 1;
+            }
+
+
+            for (i = 0, iLen = an.length; i < iLen; i++) {
+                var wrapper = $(an[i]).parents(".dataTables_wrapper");
+
+                if (oPaging.iTotalPages <= 0) {
+                    $('.pagination-panel, .dataTables_length', wrapper).hide();
+                } else {
+                    $('.pagination-panel, .dataTables_length', wrapper).show();
+                }
+
+                $('.pagination-panel-total', an[i]).html(oPaging.iTotalPages);
+                $('.pagination-panel-input', an[i]).val(oPaging.iPage + 1);
+
+                // Remove the middle elements
+                $('li:gt(1)', an[i]).filter(':not(.next)').remove();
+
+                // Add the new list items and their event handlers
+                for (j = iStart; j <= iEnd; j++) {
+                    sClass = (j == oPaging.iPage + 1) ? 'class="active"' : '';
+                    $('<li ' + sClass + '><a href="#">' + j + '</a></li>')
+                        .insertBefore($('li.next:first', an[i])[0])
+                        .bind('click', function (e) {
+                            e.preventDefault();
+                            oSettings._iDisplayStart = (parseInt($('a', this).text(), 10) - 1) * oPaging.iLength;
+                            fnDraw(oSettings);
+                        });
+                }
+
+                // Add / remove disabled classes from the static elements
+                if (oPaging.iPage === 0) {
+                    $('a.prev', an[i]).addClass('disabled');
+                } else {
+                    $('a.prev', an[i]).removeClass('disabled');
+                }
+
+                if (oPaging.iPage === oPaging.iTotalPages - 1 || oPaging.iTotalPages === 0) {
+                    $('a.next', an[i]).addClass('disabled');
+                } else {
+                    $('a.next', an[i]).removeClass('disabled');
+                }
+            }
+        }
+    }
+});
+
+//构造查询条件
+serverPageTable.getRestPara = function (cond, tableSetting) {
+
+	var conditions =  {};
+	//告警级别
+	if (cond.severity != null && cond.severity != "undefined" && cond.severity.length > 0) {
+		var severity = '['+cond.severity+']';
+        var severityObj = window.JSON.parse(severity);
+		conditions.severities=severityObj;
+    }
+	
+	//确认状态
+	if (cond.ackState != null && cond.ackState != "undefined" && cond.ackState.length > 0) {
+        var ackState = '[' + cond.ackState + ']';
+        var ackStateObj = window.JSON.parse(ackState)
+        conditions.ackStates=ackStateObj;
+    }
+	
+	//可见性
+	if (cond.filterState != null && cond.filterState != "undefined" && cond.filterState.length > 0) {
+        var filterState = '[' + cond.filterState + ']';
+        var filterStateObj = window.JSON.parse(filterState);
+        conditions.isVisibles=filterStateObj;
+    }
+	
+	//告警确认时间
+	if (cond.ackTimeMode != null && cond.ackTimeMode != "undefined") {
+		var ackTime;
+		if(cond.ackTimeMode === 1){
+			ackTime = '{"timeMode": '+cond.ackTimeMode+',"relativeTime": '+cond.ackRelativeTime+'}';
+		}else{
+			ackTime = '{"beginTime": '+cond.ackTimeStarTime+',"endTime": '+cond.ackTimeEndTime+',"timeMode": '+cond.ackTimeMode+'}';
+		}
+        var ackTimeObj = window.JSON.parse(ackTime);
+        conditions.ackTime = ackTimeObj;
+    }
+
+	//告警发生时间
+    if (cond.alarmRaisedTimeMode != null && cond.alarmRaisedTimeMode != "undefined") {
+		var alarmRaisedTime;
+		if(cond.alarmRaisedTimeMode === 1){
+			alarmRaisedTime = '{"timeMode": '+cond.alarmRaisedTimeMode+',"relativeTime": '+cond.alarmRaisedRelativeTime+'}';
+		}else{
+			alarmRaisedTime = '{"beginTime": '+cond.alarmRaisedStartTime+',"endTime": '+cond.alarmRaisedEndTime+',"timeMode": '+cond.alarmRaisedTimeMode+'}';
+		}
+        var alarmRaisedTimeObj = window.JSON.parse(alarmRaisedTime);
+        conditions.alarmRaisedTime = alarmRaisedTimeObj;
+    }
+	
+	//告警清除时间
+	if (cond.clearedTimeMode != null && cond.clearedTimeMode != "undefined") {
+		var clearedTime;
+		if(cond.clearedTimeMode === 1){
+			clearedTime = '{"timeMode": '+cond.clearedTimeMode+',"relativeTime": '+cond.clearedTimeRelativeTime+'}';
+		}else{
+			clearedTime = '{"beginTime": '+cond.clearedTimeStartTime+',"endTime": '+cond.clearedTimeEndTime+',"timeMode": '+cond.clearedTimeMode+'}';
+		}
+        var clearedTimeTimeObj = window.JSON.parse(clearedTime);
+        conditions.alarmClearedTime = clearedTimeTimeObj;
+    }
+
+	//告警码
+	if (cond.probableCause != null && cond.probableCause != "undefined") {
+        //var probableCauseArr = cond.probableCause.split(',');
+        var str = "";
+		var arr="[";
+        for (var i = 0; i < cond.probableCause.length; i++) {
+			if(i === 0){
+				if(cond.probableCause[i].type === "1"){
+					arr+='{"systemType":'+cond.probableCause[i].codeid+',"codes":[]}';
+				}else{
+					arr+='{"systemType":'+cond.probableCause[i].parentid+',"codes":['+cond.probableCause[i].codeid+']}';
+				}
+			}else{
+				if(cond.probableCause[i].type === "1"){
+					arr+=',{"systemType":'+cond.probableCause[i].codeid+',"codes":[]}';
+				}else{
+					arr+=',{"systemType":'+cond.probableCause[i].parentid+',"codes":['+cond.probableCause[i].codeid+']}';
+				}
+			}		
+        }
+		arr+="]";
+		var probableCausesObj = window.JSON.parse(arr);
+        conditions.probableCauses = probableCausesObj;      
+    }
+	
+	var requests={};
+	requests.condition=conditions;
+	requests.pageSize=tableSetting._iDisplayLength;
+	requests.pageNumber=tableSetting._iDisplayStart / tableSetting._iDisplayLength + 1;
+	if(cond.alarmType===2 && requests.pageNumber === 1){
+		requests.queryCacheId="";
+	}else if(cond.alarmType===2 && requests.pageNumber != 1){
+		requests.queryCacheId=queryCacheId;
+	}
+	
+	var resStr = window.JSON.stringify(requests);
+	result={
+		request:resStr
+	};
+	return result;
+};
+
+
+serverPageTable.initDataTable = function (setting, cond, divId) {
+    //转换colomn
+    var column = setting.columns;
+	var setting;
+    //先把原来的表格清空
+    $('#' + divId).children().remove();
+    var tableId = setting.tableId;
+    var tableEleStr = '<table class="table table-striped table-bordered table-hover" id= ' + tableId + '>'
+        + '<thead>'
+        + '<tr role="row" class="heading" >'
+        + '</tr>'
+        + '</thead>'
+        + '<tbody>'
+        + '</tbody>'
+        + '</table>';
+    $('#' + divId).append(tableEleStr);
+    //$('#'+ tableId).append(' <thead><tr role="row" class="heading" ></tr></thead><tbody></tbody>');
+    var trEle = $('#' + tableId + ' > thead >tr');
+    //var dataTableColumn = [];
+    for (var one in column) {
+        if (one != "contains") {
+            var th = '<th>' + column[one].name + '</th>';
+            trEle.append(th);
+        }
+    }
+	
+    var table = $("#" + tableId).dataTable({
+        //"sDom" : "tr<'row'<'col-md-6 col-sm-12'><'col-md-6 col-sm-12'pli>>", // datatable layout
+        // "sDom" : "<'row'<'col-md-12 col-sm-12'lip>r><'table-scrollable't>>",
+        "oLanguage": setting.language,//汉化
+        "bJQueryUI": true,
+        "bPaginate": true,// 分页按钮
+        "bFilter": false,// 搜索栏
+        "bAutoWidth": true,//自动设置列宽
+        "bLengthChange": true,// 每行显示记录数
+        "iDisplayLength": 10,// 每页显示行数
+        "bSort": false,// 排序
+        "bInfo": true,// Showing 1 to 10 of 23 entries 总记录数没也显示多少等信息
+        "bWidth": true,
+        "bScrollCollapse": false,
+		"sScrollY": "400px",
+        "sScrollX": "100%",
+        "sPaginationType": "bootstrap_extended", // 分页，  bootstrap_extended  一共两种样式 另一种为two_button // 是datatables默认
+        "bProcessing": true,
+        "bServerSide": true,
+        "bDestroy": true,
+        "bSortCellsTop": true,
+        "sDom": '<"top"rt><"bottom"lip>',
+        "sAjaxSource": setting.restUrl,// ./js/testJson.json  setting.restUrl
+        "aoColumns": setting.columns,
+		"bRetrieve": true,
+        "fnServerData": function (sSource, aoData, fnCallback, oSettings) {
+            oSettings.jqXHR = $.ajax({
+                "type": 'get',
+                "url": sSource,
+                "dataType": "json",
+                "data": serverPageTable.getRestPara(cond, oSettings),
+                "success": function (resp) {
+                    oSettings.iDraw = oSettings.iDraw + 1;
+					
+					var data = {};
+					if(cond.ruleType===1){
+						var logList = resp.alarms;
+						data.iTotalRecords = resp.totalCount;
+						data.iTotalDisplayRecords = resp.totalCount;
+						
+					}else if(cond.ruleType===2){
+						var logList = resp.alarms;
+						if(resp.queryCacheId === ""){
+							data.iTotalRecords = alarmCount;
+							data.iTotalDisplayRecords = alarmCount;
+						}else{
+							alarmCount = resp.totalCount;
+							data.iTotalRecords = resp.totalCount;
+							data.iTotalDisplayRecords = resp.totalCount;
+							queryCacheId = resp.queryCacheId;
+						}
+
+					}
+					
+                    var pageInfo = null;
+					setting=oSettings;
+                    if (pageInfo != null) {
+                        vm.logInfo[vm.logType].pageInfo = pageInfo;
+                    }
+                    
+					//添加序号
+					 for(var i=0;i<logList.length;i++){
+						logList[i].order="<a>"+(i+1)+"</a>";	
+					} 
+					//组合告警码
+					 for(var i=0;i<logList.length;i++){
+						logList[i].probableCauseCodeNameAndCode=logList[i].probableCauseCodeName+"("+logList[i].probableCauseCode+")";	
+					} 
+							
+                    data.aaData = logList;
+                    data.sEcho = oSettings;
+                    fnCallback(data);                   
+
+                    $('#dataTableCheckBox').click(function () {
+                        var checkArr = $('#' + divId + ' .details-check input[type="checkbox"]');//
+                        for (var i = 0; i < checkArr.length; i++) {
+                            if ($(checkArr).eq(i).attr('id') != 'dataTableCheckBox') {
+                                if ($('#dataTableCheckBox').prop("checked")) {
+                                    $(checkArr).eq(i).removeClass('checked');
+									$(checkArr).eq(i).prop('checked',true);
+                                } else {
+                                    $(checkArr).eq(i).addClass('checked');
+									$(checkArr).eq(i).prop('checked',false);
+                                }
+                            }
+						}
+                    });			
+                }
+
+            });
+        },
+		"fnDrawCallback": function( oSettings ) { // run some code on table redraw		
+			
+			var tableWrapper = $('div.dataTables_wrapper');
+			//自适应对齐表头
+			var $tableHead = $('div.dataTables_scrollHeadInner > table.dataTable', tableWrapper);
+			var tbodyHead = $('tbody', $tableHead);
+			if(tbodyHead && tbodyHead.length >0){
+				$(tbodyHead).remove();
+			}
+
+			var $tableBody = $('table#' + tableId, tableWrapper);
+			var trIn = $('thead > tr:nth-child(1)', $tableHead);
+			var trBodyHead = $('thead > tr:nth-child(1)', $tableBody);
+			var tds = $(trIn).children();
+			var ths = $(trBodyHead).children();
+			for(var k=0;k<tds.length;k++){
+				$(ths.eq(k)).html('<div style="height: 0;overflow: hidden;">' + tds.eq(k).html() + '</div>');
+			}
+			var bodyRows = $('tbody > tr', $tableBody);
+			for(var i=0;i<bodyRows.length;i++){
+				var rowClone = $(bodyRows.eq(i)).clone();
+				var tds = $(rowClone).children();
+				for(var j=0;j<tds.length;j++){
+					$(tds.eq(j)).html('<div style="height: 0;overflow: hidden;">' + tds.eq(j).html() + '</div>');
+					$(tds.eq(j)).height('0px');
+					$(tds.eq(j)).css('padding-top','0px');
+					$(tds.eq(j)).css('padding-bottom','0px');
+					$(tds.eq(j)).css('border-top-width','0px');
+					$(tds.eq(j)).css('border-bottom-width','0px');
+				}
+				$(rowClone).height('0px');
+				$tableHead.append($(rowClone).prop("outerHTML"));
+			}
+
+			$('div.dataTables_scrollBody', tableWrapper).css('width','100%');
+			//$('div.dataTables_scrollHead', tableWrapper).css('width','98.5%');
+			$('div.dataTables_scrollHeadInner', tableWrapper).css('padding-right', 0);
+			
+			//$("table.dataTable > thead > tr > th:nth-child(2)", $(".dataTables_scrollHeadInner")).click();
+			
+			//设置表格本体高度
+			//$('div.dataTables_scrollBody', tableWrapper).css('height', "280px");
+			//填充表头右边界
+            /* $('div.dataTables_scrollHead', tableWrapper).css('display','inline-block');
+            $("div.dataTables_scrollHead", tableWrapper).after("<div id='divRightPadding' style='overflow: hidden; background:#eee; position: relative; float:right; border: 1px solid #ddd; height:" + 42 + "px; width: 1.4%;'></div>"); */
+            /* if($.browser.mozilla){
+                $('div#divRightPadding', tableWrapper).css('height', '40');
+            } */
+		}
+    });
+
+	$(window).bind('resize', function () {
+		//oTable.DataTable.models.oSettings.bAjaxDataGet = false;
+		table.fnAdjustColumnSizing(setting);
+	} );
+
+    function format_Detail(oTable, nTr) {
+        var aData = oTable.fnGetData(nTr);
+
+		var sOut = '<table class = "detailTable" width="100%">';
+        sOut += '<tr><td class = "detailTitleStyle" width = 160><span class = "label label-primary">' + column[3].name + '</span></td><td class = "detailCellStyle" width = 320>' + null2space(aData[column[3].mData]) + '</td>';
+        sOut += '<td class = "detailTitleStyle" width = 160><span class = "label label-primary">' + column[8].name + '</span></td><td class = "detailCellStyle" width = 320>' + null2space(vm.alTypes[aData[column[8].mData]]) + '</td></tr>';
+		
+        sOut += '<tr><td class = "detailTitleStyle" width = 80><span class = "label label-primary">' + column[9].name + '</span></td><td class = "detailCellStyle" width = 160>' + null2space(aData[column[9].mData]) + '</td>';
+        sOut += '<td class = "detailTitleStyle" width = 80><span class = "label label-primary">' + column[7].name + '</span></td><td class = "detailCellStyle" width = 160>' + null2space(aData[column[7].mData]) + '</td></tr>';
+
+        sOut += '<tr><td class = "detailTitleStyle"><span class = "label label-primary">' + column[6].name + '</span></td><td class = "detailCellStyle">' + null2space(aData[column[6].mData]) + '</td>';
+        sOut += '<td class = "detailTitleStyle"><span class = "label label-primary">' + column[11].name + '</span></td><td class = "detailCellStyle">' + null2space(aData[column[11].mData]) + '</td></tr>';
+		
+        sOut += '<tr><td class = "detailTitleStyle"><span class = "label label-primary">' + column[10].name + '</span></td><td class = "detailCellStyle">' + null2space(aData[column[10].mData]) + '</td>';
+        sOut += '<td class = "detailTitleStyle"><span class = "label label-primary">' + column[13].name + '</span></td><td class = "detailCellStyle">' + null2space(aData[column[13].mData]) + '</td></tr>';
+
+        sOut += '<tr><td class = "detailTitleStyle"><span class = "label label-primary">' + column[12].name + '</span></td><td class = "detailCellStyle">' + null2space(aData[column[12].mData]) + '</td>';
+        sOut += '<td class = "detailTitleStyle"><span class = "label label-primary">' + column[5].name + '</span></td><td class = "detailCellStyle">' + null2space(aData[column[5].mData]) + '</td></tr>';
+		
+        sOut += '<tr><td class = "detailTitleStyle"><span class = "label label-primary">' + column[23].name + '</span></td><td class = "detailCellStyle">' + null2space(aData[column[23].mData]) + '</td>';
+		sOut += '<td class = "detailTitleStyle"><span class = "label label-primary">' + column[4].name + '</span></td><td class = "detailCellStyle">' + null2space(aData[column[4].mData]) + '</td></tr>';
+   //     sOut += '<td class = "detailTitleStyle"><span class = "label label-primary">' + column[5].name + '</span></td><td class = "detailCellStyle">' + aData[column[5].mData] + '</td></tr>';
+		
+     //   sOut += '<tr><td class = "detailTitleStyle"><span class = "label label-primary">' + column[4].name + '</span></td><td class = "detailCellStyle">' + aData[column[4].mData] + '</td>';
+	//	sOut += '<tr><td class = "detailTitleStyle"><span class = "label label-primary">' + column[22].name + '</span></td><td class = "detailCellStyle">' + aData[column[22].mData] + '</td></tr>';
+    //    sOut += '<td class = "detailTitleStyle"><span class = "label label-primary">' + column[22].name + '</span></td><td class = "detailCellStyle">' + aData[column[22].mData] + '</td></tr>';
+		
+    //    sOut += '<tr><td class = "detailTitleStyle"><span class = "label label-primary">' + column[12].name + '</span></td><td class = "detailCellStyle">' + aData[column[12].mData] + '</td>';
+     //   sOut += '<td class = "detailTitleStyle"><span class = "label label-primary">' + column[17].name + '</span></td><td class = "detailCellStyle">' + aData[column[17].mData] + '</td></tr>';
+
+        sOut += '<td class = "detailTitleStyle"><span class = "label label-primary">' + column[16].name + '</span></td><td class = "detailCellStyle" colspan = 3>' + null2space(aData.additionalText) + '</td></tr>';
+		
+        return sOut;
+    }
+	function null2space(nullStr){
+		if(nullStr == null){
+			return "";
+		} else {
+			return nullStr;
+		}
+	}
+    $('#' + tableId + '>tbody').on('click', 'td.details-control', function () {
+        var tr = $(this).closest('tr');
+        //var nTr = $(this).parents('tr')[0];
+        //var row = table.row( tr );
+        if (table.fnIsOpen(tr[0])) {
+            table.fnClose(tr[0]);
+            //if ( row.child.isShown() ) {
+            // This row is already open - close it
+            //row.child.hide();
+            tr.removeClass('shown');
+        }
+        else {
+            // Open this row
+            table.fnOpen(tr[0], format_Detail(table, tr[0]), 'details');
+            //row.child( format_Detail(row.data()) ).show();
+            tr.addClass('shown');
+        }
+    });
+
+    // mod by chenhao 2015-10-26 注释掉
+    // // 所有td注册一个点击事件用来展示出详情。
+    // $('#ict_alarms_table >tbody').on('click', 'td', function () {
+           
+    //         var className= $(this).eq(0).attr('class');
+    //         //当点击的是如下的table页的时候
+    //         if(className &&(className.indexOf('relInfo')>-1 || className.indexOf('details-check')>-1 || className.indexOf('ackState')>-1  || className.indexOf('details-control')>-1)){
+    //             $('#right-menu').fadeOut();
+    //         }else{
+    //             //填充table的数据
+    //             var tbody=$('#ict_table_general >tbody');
+    //             tbody.children().remove();
+    //             var trHtml="";
+    //             var tr = $(this).closest('tr'); 
+    //             var aData = table.fnGetData(tr[0]);
+    //             for (var i = 0; i < column.length; i++) {
+    //             if( column[i].bVisible == false ){//如果列可见就继续遍历下一个
+    //                 trHtml += '<tr role="row"><td>'+column[i].name+':</td><td>' + aData[column[i].mData] + '</td></tr>';
+    //                }
+    //             }
+    //             tbody.append(trHtml);
+    //             if(!vm.alarmId ||vm.alarmId==aData.alarmId){
+    //                 $('#right-menu').fadeToggle();
+    //             }else{
+    //                 $('#right-menu').fadeIn();
+    //             } 
+    //              vm.alarmId=aData.alarmId;  
+    //         }  
+    // });
+	//重新调节列宽以适应window resize
+    $(window).bind('resize', function () {
+        //oTable.fnAdjustColumnSizing();
+		$("table.dataTable > thead > tr > th:nth-child(2)", $(".dataTables_scrollHeadInner")).click();
+    } );
+
+};
+
+
+
+
diff --git a/openo-portal/portal-performance/src/main/webapp/performance/js/alarmsUtil.js b/openo-portal/portal-performance/src/main/webapp/performance/js/alarmsUtil.js
new file mode 100644
index 00000000..b0633cf2
--- /dev/null
+++ b/openo-portal/portal-performance/src/main/webapp/performance/js/alarmsUtil.js
@@ -0,0 +1,1169 @@
+/*
+ * Copyright 2016, CMCC Technologies Co., Ltd.
+ *
+ * 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.
+ */
+var alarmsUtil = {};
+var alarmTemp=[];
+
+alarmsUtil.timeRender = function (obj) {
+	if (obj.aData[obj.mDataProp] == -1 || obj.aData[obj.mDataProp] == 0) {
+		return "";
+	} else {
+		var date = new Date(obj.aData[obj.mDataProp]);
+		return commonUtil.parseDate(date, 'yyyy-MM-dd hh:mm:ss');
+	}
+};
+
+alarmsUtil.LinkRender = function (obj) {
+	return '<a href="">' + obj.aData[obj.mDataProp] + '</a>';
+};
+ 
+alarmsUtil.ackState = function (obj) {
+	
+	var innerHtml = "";
+	var ackState = obj.aData.ackState;
+	var alarmId = obj.aData.id;
+	var alarmIdArr = [alarmId];
+	var tableId="\'" + obj.oSettings.sTableId + "\'";
+	var divId="\'" + obj.oSettings.nTableWrapper.parentElement.id + "\'";
+	if (ackState == "1" && vm.ruleType == 1) {
+		innerHtml = "<a class=\"label label-sm label-info\"   onclick=\" alarmsUtil.unaffirm([" + alarmIdArr + "]," + tableId + "," + divId + ","+obj.iDataRow+")  \">Acknowledge</a>";
+	} else if(ackState == "1" && vm.ruleType == 2){
+		innerHtml = "<div class=\"label label-sm label-info\">Acknowledge</div>";
+	} else if(ackState == "2" ){
+		innerHtml = "<a class=\"label label-sm acknow-purple\"    onclick=\" alarmsUtil.affirm([" + alarmIdArr + "]," + tableId + "," + divId + ","+obj.iDataRow+")\">Unacknowledge</a>";
+	} 
+	return innerHtml;
+};
+
+alarmsUtil.Severity = function (obj) {
+
+	var innerHtml = "";
+	var Severity = obj.aData.perceivedSeverity;
+	if (Severity == "1") {
+		innerHtml = "<span style=\"color:#E24949 \"  class=\"ict-alarm \" ></span><sapn  \">Critical</sapn>";
+	} else if (Severity == "2") {
+		innerHtml = "<span style=\"color:#E59313 \" class=\"ict-alarm\" ></span><sapn \">Major</sapn>";
+	} else if (Severity == "3") {
+		innerHtml = "<span style=\"color:#F7E51B \" class=\"ict-alarm\" ></span><sapn  \">Minor</sapn>";
+	} else if (Severity == "4") {
+		innerHtml = "<span style=\"color:#61C2DE \" class=\"ict-alarm\" ></span><sapn \">Warning</sapn>";
+	}
+	return innerHtml;
+
+};
+
+alarmsUtil.operate = function (obj) {
+
+	var alarmId = obj.aData.alarmId;
+	return "<div class='row col-xs-12'><div><a href='#' class=\"btn-xs grey btn-editable\" onclick=\" alarmsUtil.congfirms('" + alarmId + "')\"><i class=\"ict-delete\"></i>清除</a></div></div>";
+
+};
+
+alarmsUtil.congfirms = function (alarmId) {
+
+	bootbox.confirm('你确定要删除该告警吗？', function (result) { //你确定要删除该用户吗？
+
+		if (result) {
+			var sSource = "/web/rest/web/fm/curalarms?data={\"alarmId\":" + alarmId + "}&_dataSource=isc_PageRestDataSource_0&isc_metaDataPrefix=_&isc_dataFormat=json&_operationType=remove&_componentId=isc_com_zte_ums_aos_fm_view_eventview_table_AlarmTable_0";
+			$.ajax({
+				dataType : "json",
+				type : "DELETE",
+				//数据格式：[tab标签id,tabItem的名字,图片路径,tabItem的描述,更多的LInk地址]
+				contentType : 'application/json; charset=utf-8',
+				url : sSource,
+				data : null,
+				async : false,
+				success : function (msg) {
+					setTimeout(function () {
+						refreshByCond();
+					}, 500);
+				}
+			});
+		}
+
+	});
+
+};
+
+alarmsUtil.allOperate = function (obj) {
+
+	var record = obj.aData;
+	var hasModify = commonUtil.hasRigth('uep.pfl.sm.updateuser');
+	var hasDel = commonUtil.hasRigth('uep.pfl.sm.deluser');
+	var selectUsername = new String(record.userName);
+	var innerHtml = "";
+	
+	// 如果有权限，显示操作列
+	if (hasModify) {
+		if (hasDel && selectUsername != "admin") {
+			innerHtml = "<div class='row col-xs-12'><div class='col-xs-6 modify_user'><a class=\"btn-xs grey btn-editable\" href='#' onclick=\"vm.modifyUser('" + selectUsername + "')\"><i class=\"ict-modify\"></i>修改</a></div><div class='col-xs-6'><a href='#' class=\"btn-xs grey btn-editable\" onclick=\"smUtil.congfirms('" + selectUsername + "')\"><i class=\"ict-delete\"></i>删除</a></div></div>";
+		} else {
+			innerHtml = "<div class='row col-xs-12'><div class='col-xs-6 modify_user'><a class=\"btn-xs grey btn-editable\" href='#' onclick=\"vm.modifyUser('" + selectUsername + "')\"><i class=\"ict-modify\"></i>修改</a></div>";
+		}
+	}
+
+	return innerHtml;
+
+};
+
+alarmsUtil.refresh = function () {
+
+	refreshByCond();
+
+}
+
+/*
+
+1.确认
+
+2.反确认
+
+ */
+
+alarmsUtil.loopAffirm = function (type) {
+
+	var checkArr = $('#ict_alarms_table_div .details-check input[type="checkbox"]');
+	var aidArr = [];
+	for (var i = 0; i < checkArr.length; i++) {
+		if($(checkArr[i]).prop("checked")){
+			if ($(checkArr[i]).attr('alarmId') != 'undefined' && $(checkArr[i]).attr('alarmId') != null) {
+				aidArr.push($(checkArr[i]).attr('alarmId'));
+			}
+		}
+	}
+
+	if (type == "1" && aidArr.length > 0) {
+		alarmsUtil.affirm(aidArr);
+	} else if (type == "2" && aidArr.length > 0) {
+		alarmsUtil.unaffirm(aidArr);
+	}
+
+}
+
+/*
+
+
+
+ */
+
+alarmsUtil.loopDelAralms = function () {
+
+	var checkArr = $('#ict_alarms_table_div .details-check input[type="checkbox"]');
+	var aidArr = [];
+	for (var i = 0; i < checkArr.length; i++) {
+		if($(checkArr[i]).prop("checked")){
+			if ($(checkArr[i]).attr('alarmId') != 'undefined' && $(checkArr[i]).attr('alarmId') != null) {
+				aidArr.push($(checkArr[i]).attr('alarmId'));
+			}
+		}
+	}
+
+	if (aidArr.length > 0) {
+		bootbox.confirm('Are you sure to delete alarm(s)', function (result) { 
+			if (result) {
+				var sSource = "/api/umcfm/v1/curalarms?request={\"ids\":["+ aidArr +"]}";
+				$.ajax({
+					type : "DELETE", 
+					dataType : "json",
+					contentType : 'application/json; charset=utf-8',
+					url : sSource,
+					data : null,
+					async : false,
+					success : function (msg) {
+						setTimeout(function () {
+							refreshByCond()
+						}, 500);
+					}
+				});
+			}
+		});
+	}
+}
+
+alarmsUtil.affirm = function (alarmIdArr,tableId,divId) {
+
+	var getData = {};
+	var request = {};
+	request.ids=[];
+	for(i=0;i<alarmIdArr.length;i++){
+		request.ids.push(alarmIdArr[i]);
+	}
+	var url = "";
+	if (vm.ruleType == 1) { //当前告警
+		request.ackState=1;
+		getData.request = JSON.stringify(request);
+		url = "/api/umcfm/v1/curalarms";
+	} else { //历史告警
+		url = "/ngict/rest/fm/hisalarms"
+	}
+
+	$.ajax({
+		type : "PUT",
+		contentType : 'application/json; charset=utf-8',
+		url : url + "?" + "request=" + JSON.stringify(request),
+		async : false,
+		success : function (msg) {
+			setTimeout(function () {
+				refreshByCond(tableId,divId);
+			}, 100);
+		},	
+		error : function(msg){
+			setTimeout(function () {
+				refreshByCond(tableId,divId);
+			}, 100);	
+		}
+	});
+
+}
+
+alarmsUtil.unaffirm = function (alarmIdArr,tableId,divId) {
+
+	var getData = {};
+	var request = {};
+	request.ids=[];
+	for(i=0;i<alarmIdArr.length;i++){
+		request.ids.push(alarmIdArr[i]);
+	}
+	request.ackState=2;
+	getData.request = JSON.stringify(request);
+	var url = "";
+	if (vm.ruleType == 1) { //当前告警
+		url = "/api/umcfm/v1/curalarms";
+		$.ajax({
+			"type" : "PUT",
+			"contentType" : 'application/json; charset=utf-8',
+			"url" : url + "?request=" + JSON.stringify(request),
+			async : false,
+			success : function (msg) {
+				setTimeout(function () {
+					refreshByCond(tableId,divId);
+				}, 100);
+			},
+			error : function(msg){		
+				setTimeout(function () {
+					refreshByCond(tableId,divId);
+				}, 100);		
+			}
+		});
+	} 
+
+	
+	
+}
+
+alarmsUtil.checkBox = function (obj) {
+
+	var alarmId = obj.aData.id;
+	var innerHtml = '<input type="checkbox" alarmId="' + alarmId + '"/> ';
+	return innerHtml;
+}
+
+//初始化告警码树
+alarmsUtil.initProbableCausesTree = function () {
+	//zTree设置
+	var setting = {
+		view : {
+			selectedMulti : false, //设置是否可以同时选中多个借点。
+			showIcon : true, //不显示图标
+			showLine : false, //是否显示节点之间的连线
+		},
+		data : {
+			simpleData : {
+				enable : true //如果设置为 true，请务必设置 setting.data.simpleData 内的其他参数: idKey / pIdKey / rootPId，并且让数据满足父子关系。
+			}
+		},
+		callback : {
+			onExpand : zTreeOnExpand, //每次节点展开后触发的事件。
+			onCollapse : zTreeOnCollapse,
+			//onClick: zTreeOnClick
+		}
+	};
+	var probableCausesNodes;
+	
+	//获取告警码树数据
+	getProbableCausesTreeNodes("");
+	//创建告警码树
+	$.fn.zTree.init($("#probableCausesTree"), setting, probableCausesNodes);
+	//获取所有现有的tree节点
+	var treeObj = $.fn.zTree.getZTreeObj("probableCausesTree");
+	initDataAtTree();
+	function initDataAtTree(){
+		getAllNodesWithoutTypeEqual2("")		
+	};
+	
+	function getAllNodesWithoutTypeEqual2(parentId){
+		var treeNodes=treeObj.getNodesByParam("parentId", parentId, null);
+		for(var i=0;i<treeNodes.length;i++){
+			if(treeNodes[i].type===0){
+				getProbableCausesTreeNodes(treeNodes[i].id);
+				addNodesToTree(treeNodes[i],"probableCausesTree");
+				getAllNodesWithoutTypeEqual2(treeNodes[i].id);
+			}
+		}
+	}
+
+	function zTreeOnExpand(event, treeId, treeNode) {
+		var childrenNodes = treeNode.children;
+		if (!childrenNodes) { //当没有子节点的时候才加载，否则会重复加载。
+			getProbableCausesTreeNodes(treeNode.id);
+			addNodesToTree(treeNode,treeId);
+		}
+	};
+	
+	function addNodesToTree(treeNode, treeId) {
+		var obj = $.fn.zTree.getZTreeObj(treeId);
+		var node=obj.getNodeByParam("id", treeNode.id, null)
+		obj.addNodes(node, probableCausesNodes);
+	};
+
+	function zTreeOnCollapse(event, treeId, treeNode) {};
+
+	//告警信息中的type为0、1是父节点，2为子节点
+	function isParentNode(type) {
+		if (type != 2)
+			return true;
+		else
+			return false;
+	};
+	
+	function constructProblemCauseName(node){
+		if(node.type===0){
+			return node.desc;
+		}else{
+			return node.desc + "(" + node.value + ")";
+		}
+	}
+
+	function getProbableCausesTreeNodes(alarmCodeParentId) {
+		probableCausesNodes = new Array();
+		var getData = {};
+		var request = {};
+		request.parentId = alarmCodeParentId;
+		getData.request = JSON.stringify(request);
+		$.ajax({
+			async : false,
+			"dataType" : 'json',
+			"type" : "GET",
+			"url" : "/api/umcfm/v1/probablecausestree",
+			"data" : getData,
+			"contentType" : 'application/json; charset=utf-8',
+			"success" : function (res, textStatus, jqXHR) {
+				var nodes = res;
+				chkDisabled = false;
+				if (nodes) {
+					for (var i = 0; i < nodes.length; i++) {
+						probableCausesNodes.push({
+							id : nodes[i].id,
+							pId : nodes[i].parentId,
+							name : constructProblemCauseName(nodes[i]),
+							chkDisabled : false,
+							isParent : isParentNode(nodes[i].type),
+							parentId : alarmCodeParentId,//treenode节点
+							codeId : nodes[i].value,
+							type : nodes[i].type
+						});
+					}
+				}
+			},
+			"error" : function () {}
+		});
+	}
+}
+
+//初始化位置树
+alarmsUtil.initDeptTree = function () {
+	//zTree设置
+	var setting = {
+		view : {
+			selectedMulti : false, //设置是否可以同时选中多个借点。
+			showIcon : true, //不显示图标
+			showLine : false, //是否显示节点之间的连线
+		},
+		data : {
+			simpleData : {
+				enable : true //如果设置为 true，请务必设置 setting.data.simpleData 内的其他参数: idKey / pIdKey / rootPId，并且让数据满足父子关系。
+			}
+		},
+		callback : {
+			onExpand : zTreeOnExpand, //每次节点展开后触发的事件。
+			onCollapse : zTreeOnCollapse,
+			//onClick: zTreeOnClick
+		}
+	};
+	var zNodes = [];
+	initDeptTree();
+	function initDeptTree() {
+		zNodes.push({
+			id:"VDU",
+			name:"VDU",
+			isParent:true
+		},
+		{
+			id:"HOST",
+			name:"HOST",
+			isParent:true
+		});
+		$.fn.zTree.init($("#deptTree"), setting, zNodes);
+		zNodes=[];
+	}
+	function getDeptTreeNode(alarmCodeParentId) {
+		if(alarmCodeParentId === "VDU"){
+			url="/api/roc/v1/resource/vdus";
+		}else if(alarmCodeParentId === "HOST"){
+			url="/api/roc/v1/resource/hosts";
+		}
+		$.ajax({
+			async : false,
+			"dataType" : 'json',
+			"type" : "GET",
+			"url" : url,
+			"contentType" : 'application/json; charset=utf-8',
+			"success" : function (res, textStatus, jqXHR) {
+				var nodes = res.data;
+				if (nodes) {
+					for (var i = 0; i < nodes.length; i++) {
+						zNodes.push({
+							id : nodes[i].oid,
+							parentId : alarmCodeParentId,//treenode节点
+							name : nodes[i].name,
+							isParent : false,
+							oid:nodes[i].oid
+						});
+					}
+				}
+			},
+			"error" : function () {}
+		});
+	}
+	function zTreeOnExpand(event, treeId, treeNode) {
+		getDeptTreeNode(treeNode.id);
+		addNodesToTree(treeNode,treeId);
+		zNodes=[];
+	};
+	function addNodesToTree(treeNode, treeId) {
+		var obj = $.fn.zTree.getZTreeObj(treeId);
+		var node=obj.getNodeByParam("id", treeNode.id, null)
+		obj.addNodes(node, zNodes);
+	};
+	function zTreeOnCollapse(event, treeId, treeNode) {};
+}
+
+//初始化所有的树
+alarmsUtil.initTree = function () {
+	//初始化告警码树和告警位置树
+	alarmsUtil.initProbableCausesTree();
+	alarmsUtil.initDeptTree();
+	
+	function initFormData(ruleType) {
+
+		$("#confirmAction").hide();
+		$("#filterType").hide();
+		$("#action").hide();
+		if (ruleType == "alarmFilter") {
+			$("#filterType").show();
+		} else if (ruleType == "ack") {
+			$("#confirmAction").show();
+		} else if (ruleType == "forward") {
+			$("#action").show();
+		}
+
+	}
+
+	function getNumbers(rule) {
+
+		for (var i = 0; i < textValues.length; i++) {
+			rule[textValues[i]] = $("input[name='" + textValues[i] + "']").val();
+		}
+
+	}
+
+	function getCheckboxs(rule) {
+
+		for (var i = 0; i < else_checkboxNames.length; i++) {
+			rule[else_checkboxNames[i]] = $("input[name='" + else_checkboxNames[i] + "']").parent().hasClass('checked');
+		}
+		for (var item in checkboxNames_pair_spinnerIds) {
+			rule[item] = $('#' + checkboxNames_pair_spinnerIds[item]).val();
+		}
+	}
+
+	function setCheckboxs(rule) {
+
+		for (var item in checkboxNames_pair_spinnerIds) {
+			var value = 0;
+			if (rule != "") {
+				value = rule[item];
+			}
+			$('#' + item).val(value);
+			setSpinnerIsEnable(item, value);
+		}
+		for (var i = 0; i < else_checkboxNames.length; i++) {
+			$("input[name='" + else_checkboxNames[i] + "']").parent().iCheck(rule[else_checkboxNames[i]] ? 'check' : 'uncheck');
+		}
+	}
+}
+
+alarmsUtil.moveNode = function (item) {
+	if (item.hasClass("ict-arrowRight")) {
+		alarmsUtil.rightNode(item);
+	} else if (item.hasClass("ict-arrowLeft")) {
+		alarmsUtil.leftNode(item);
+	} else {
+		alarmsUtil.removeAll(item);
+	}
+}
+
+/*树添加信息到右侧的功能*/
+
+alarmsUtil.rightNode = function (item) {
+
+	var selecedNodeIds = [];
+	var treeType = item.attr('treeType');
+	var obj = $.fn.zTree.getZTreeObj(treeType);
+	var treeNodes = obj.getSelectedNodes();
+	var $table;
+
+	if (treeType == "deptTree") {
+		var $tds = $("#selectedDeptTreeTable  td");
+		$table = $("#selectedDeptTreeTable");
+		for (var i = 0; i < $tds.length; i++) {
+			selecedNodeIds.push($tds.eq(i).attr('nodeid'));
+		}
+	} else if (treeType == "probableCausesTree") {
+		var $tds = $("#selectedProbableCausesTreeTable  td");
+		$table = $("#selectedProbableCausesTreeTable");
+		for (var i = 0; i < $tds.length; i++) {
+			var systemTypeAndProbableCause={};
+			systemTypeAndProbableCause.codeId=$tds.eq(i).attr('codeId');
+			systemTypeAndProbableCause.parentid=$tds.eq(i).attr('parentid');
+			systemTypeAndProbableCause.type=$tds.eq(i).attr('type');
+			selecedNodeIds.push(systemTypeAndProbableCause);
+		}
+	}
+	
+	//树上被选中的元素
+	for (var i = 0; i < treeNodes.length; i++) {
+
+		var htmlStr = "";
+		var text = treeNodes[i].name;
+		var id = treeNodes[i].id;
+		var codeId = treeNodes[i].codeId;
+		var type;
+		var parentId;
+		if (treeType == "deptTree") {
+			var oid = treeNodes[i].oid;
+			htmlStr = "<tr><td nodeId=" + id + "  oid=" + oid + "  >" + text + "</td></tr>";
+		} else if (treeType == "probableCausesTree") {
+
+			parentId = treeNodes[i].parentId;
+			type = treeNodes[i].type;
+			htmlStr = "<tr><td codeId=" + codeId + "  parentId=" + parentId + " type=" + type + "  >" + text + "</td></tr>";
+		}
+		
+		if(treeType == "probableCausesTree"){
+			if(treeNodes[i].type === 2){
+				for(i=0;i<selecedNodeIds.length;i++){
+					if(selecedNodeIds[i].codeId === codeId || selecedNodeIds[i].codeId === parentId){
+						bootbox.alert("此节点（子树）或其父子树已经被添加！", function () {});
+						return;
+					}
+				}
+			}else if(treeNodes[i].type === 1){
+				$('#selectedProbableCausesTreeTable [parentid='+codeId+']').remove();
+				for(i=0;i<selecedNodeIds.length;i++){
+					if(selecedNodeIds[i].codeId === codeId ){
+						bootbox.alert("此节点（子树）或其父子树已经被添加！", function () {});
+						return;
+					}
+				}
+			}else if(treeNodes[i].type === 0){
+				bootbox.alert("不支持添加MOC", function () {});
+				break;
+			}
+		}
+
+		$table.append(htmlStr);
+
+	}
+
+	$('#selectedDeptTreeTable td').on("click", function () {
+
+		//获得所有选择的td
+		var $tds = $('#selectedDeptTree td');
+		//遍历改变样式
+		for (var i = 0; i < $tds.length; i++) {
+			$tds.eq(i).removeClass('tallCellSelected');
+			$tds.eq(i).parent().removeClass('checked');
+		}
+		//当前td设为选中
+		$(this).addClass('tallCellSelected');
+		$(this).parent().addClass("checked"); //tr 添加一个 checked 样式。
+	});
+
+	$('#selectedProbableCausesTreeTable td').on("click", function () {
+
+		//获得所有选择的td
+		var $tds = $('#selectedProbableCausesTreeTable td');
+		//遍历改变样式
+		for (var i = 0; i < $tds.length; i++) {
+			$tds.eq(i).removeClass('tallCellSelected');
+			$tds.eq(i).parent().removeClass('checked');
+		}
+		//当前td设为选中
+		$(this).addClass('tallCellSelected');
+		$(this).parent().addClass("checked"); //tr 添加一个 checked 样式。
+	});
+
+}
+
+
+
+alarmsUtil.leftNode = function (item) {
+
+	var treeType = item.attr('treeType');
+	if (treeType == "deptTree") {
+		$('#selectedDeptTreeTable').children().children(".checked").remove();
+	} else if (treeType == "probableCausesTree") {
+		$('#selectedProbableCausesTreeTable').children().children(".checked").remove();
+	}
+
+}
+
+alarmsUtil.removeAll = function (item) {
+
+	var treeType = item.attr('treeType');
+	if (treeType == "deptTree") { //如果是资源树
+		$('#selectedDeptTreeTable').children().remove();
+	} else if (treeType == "probableCausesTree") {
+		$('#selectedProbableCausesTreeTable').children().remove();
+	}
+}
+
+
+
+
+
+//调用datarangepicker组件 datarange 初始化
+
+alarmsUtil.setDateRange = function (dataRangeId, vm) {
+
+	var open = 'right';
+	var optionSet1 = {
+		startDate : "2015-08-02",
+		endDate : "2015-08-03",
+		format : 'YYYY-MM-DD h:mm A',
+		dateLimit : {
+			days : 180
+		},
+		showWeekNumbers : false,
+		timePicker : true,
+		timePickerIncrement : 5,
+		opens : open,
+		separator : ' - ',
+		locale : {
+			applyLabel : $.i18n.prop('ngict_fm_iui_curalarm_ok'),
+			cancelLabel : $.i18n.prop('ngict_fm_iui_curalarm_cancel'),
+			fromLabel : $.i18n.prop('ngict_fm_iui_curalarm_from'),
+			toLabel : $.i18n.prop('ngict_fm_iui_curalarm_to'),
+			daysOfWeek : [
+				$.i18n.prop('ngict_fm_iui_curalarm_Sun'),
+				$.i18n.prop('ngict_fm_iui_curalarm_Mon'),
+				$.i18n.prop('ngict_fm_iui_curalarm_Tues'),
+				$.i18n.prop('ngict_fm_iui_curalarm_Wed'),
+				$.i18n.prop('ngict_fm_iui_curalarm_Thurs'),
+				$.i18n.prop('ngict_fm_iui_curalarm_Fri'),
+				$.i18n.prop('ngict_fm_iui_curalarm_Sat')
+				],
+			monthNames : [$.i18n.prop('ngict_fm_iui_curalarm_January'), $.i18n.prop('ngict_fm_iui_curalarm_February'), $.i18n.prop('ngict_fm_iui_curalarm_March'), $.i18n.prop('ngict_fm_iui_curalarm_April'), $.i18n.prop('ngict_fm_iui_curalarm_May'), $.i18n.prop('ngict_fm_iui_curalarm_June'), $.i18n.prop('ngict_fm_iui_curalarm_July'), $.i18n.prop('ngict_fm_iui_curalarm_August'), $.i18n.prop('ngict_fm_iui_curalarm_September'), $.i18n.prop('ngict_fm_iui_curalarm_October'), $.i18n.prop('ngict_fm_iui_curalarm_November'), $.i18n.prop('ngict_fm_iui_curalarm_December')],
+			firstDay : 1
+		}
+	};
+
+	//datarangepicker确认
+	$('input[id="' + dataRangeId + '"]').bind('apply.daterangepicker', function () {
+		//获取时间范围，查询
+		// 都设置为0点
+		setTime($(this));
+		// 更新tooltip内容
+		$(this).attr("data-original-title", $(this).val());
+	});
+
+	$('input[id="' + dataRangeId + '"]').daterangepicker(optionSet1);
+
+};
+
+//关闭打开datarangepicker选择器
+alarmsUtil.dateRangeEnableDisable = function (customDateRangeId) {
+
+	$('#' + customDateRangeId).on('ifChecked', function () {
+
+		if (customDateRangeId == "customAckTime") {
+			vm.dataRangeLocationDisabled = false;
+			if(vm.fmConds.ackTimeStarTime!=null && vm.fmConds.ackTimeEndTime!=null){
+				vm.fmConds.ackTimeMode=0;
+			}
+		} else if (customDateRangeId == "customRaisedTime") {
+			vm.dataRangeTypeDisabled = false;
+			if(vm.fmConds.alarmRaisedStartTime!=null && vm.fmConds.alarmRaisedEndTime!=null){
+				vm.fmConds.alarmRaisedTimeMode=0;
+			}
+		} else if (customDateRangeId == "customClearTime"){
+			vm.dataRangeCodeDisabled = false;
+			if(vm.fmConds.clearedTimeStartTime!=null && vm.fmConds.clearedTimeEndTime!=null){
+				vm.fmConds.clearedTimeMode=0;
+			}
+		}
+	});
+	//setTime($('#' + dataRangeId));
+
+	$('#' + customDateRangeId).on('ifUnchecked', function () {
+
+		if (customDateRangeId == "customAckTime") {
+
+			vm.dataRangeLocationDisabled = true;
+			vm.fmConds.ackTimeMode=null;
+
+		} else if (customDateRangeId == "customRaisedTime") {
+
+			vm.dataRangeTypeDisabled = true;
+			vm.fmConds.alarmRaisedTimeMode=null;
+			
+		} else if (customDateRangeId == "customClearTime"){
+		
+			vm.dataRangeCodeDisabled = true;
+			vm.fmConds.clearedTimeMode=null;
+			
+		}
+	});
+
+}
+
+//checkbox时间选择
+alarmsUtil.dateRangeCustom = function (vm) {
+
+	$("input[name=timeConfirm]").on("ifClicked", function () {
+		if ($(this).parent().hasClass("checked")) {
+			$(this).iCheck('uncheck');
+		}
+	});
+
+	$("input[name=timeOccur]").on("ifClicked", function () {
+		if ($(this).parent().hasClass("checked")) {
+			$(this).iCheck('uncheck');
+		}
+	});
+
+	$("input[name=timeClear]").on("ifClicked", function () {
+		if ($(this).parent().hasClass("checked")) {
+			$(this).iCheck('uncheck');
+		}
+	});
+
+	$("input[cond_id=time]").on('ifChecked', function () {
+
+		var nowTime = (new Date()).toLocaleDateString();
+		var condDate = $(this).attr("cond_value");
+
+		if ($(this).attr("name") == "timeConfirm") {
+			if (condDate == "1") {
+				vm.fmConds.ackRelativeTime = 1 * 24 * 60 * 60 * 1000;
+				vm.fmConds.ackTimeMode = 1;
+			} else if (condDate == "2") {
+				vm.fmConds.ackRelativeTime = 2 * 24 * 60 * 60 * 1000;
+				vm.fmConds.ackTimeMode = 1;
+			} else if (condDate == "7") {
+				vm.fmConds.ackRelativeTime = 7 * 24 * 60 * 60 * 1000;
+				vm.fmConds.ackTimeMode = 1;
+			}
+		}
+
+		if ($(this).attr("name") == "timeOccur") {
+			if (condDate == "1") {
+				vm.fmConds.alarmRaisedRelativeTime = 1 * 24 * 60 * 60 * 1000;
+				vm.fmConds.alarmRaisedTimeMode = 1;
+			} else if (condDate == "2") {
+				vm.fmConds.alarmRaisedRelativeTime = 2 * 24 * 60 * 60 * 1000;
+				vm.fmConds.alarmRaisedTimeMode = 1;
+			} else if (condDate == "7") {
+				vm.fmConds.alarmRaisedRelativeTime = 7 * 24 * 60 * 60 * 1000;
+				vm.fmConds.alarmRaisedTimeMode = 1;
+			}
+		}
+
+		if ($(this).attr("name") == "timeClear") {
+			if (condDate == "1") {
+				vm.fmConds.clearedTimeRelativeTime =1 * 24 * 60 * 60 * 1000;
+				vm.fmConds.clearedTimeMode = 1;
+			} else if (condDate == "2") {
+				vm.fmConds.clearedTimeRelativeTime =2 * 24 * 60 * 60 * 1000;
+				vm.fmConds.clearedTimeMode = 1;
+			} else if (condDate == "7") {
+				vm.fmConds.clearedTimeRelativeTime =7 * 24 * 60 * 60 * 1000;
+				vm.fmConds.clearedTimeMode = 1;
+			}
+		}
+
+		//refreshByCond();
+	});
+	
+	$("input[cond_id=time]").on('ifUnchecked', function () {
+		if ($(this).attr("name") == "timeConfirm") {
+			vm.fmConds.ackRelativeTime = null;
+			vm.fmConds.ackTimeMode = null;
+		}else if ($(this).attr("name") == "timeOccur") {
+			vm.fmConds.alarmRaisedRelativeTime = null;
+			vm.fmConds.alarmRaisedTimeMode = null;
+		}else if ($(this).attr("name") == "timeClear") {
+			vm.fmConds.clearedTimeRelativeTime = null;
+			vm.fmConds.clearedTimeMode = null;
+		}
+	});
+
+}
+
+
+/*格式化日期*/
+Date.prototype.format = function (format) {
+
+	/*
+
+	 * format="yyyy-MM-dd hh:mm:ss";
+
+	 */
+	var o = {
+		"M+" : this.getMonth() + 1,
+		"d+" : this.getDate(),
+		"h+" : this.getHours(),
+		"m+" : this.getMinutes(),
+		"s+" : this.getSeconds(),
+		"q+" : Math.floor((this.getMonth() + 3) / 3),
+		"S" : this.getMilliseconds()
+	}
+	if (/(y+)/.test(format)) {
+		format = format.replace(RegExp.$1, (this.getFullYear() + "").substr(4
+					 - RegExp.$1.length));
+	}
+	for (var k in o) {
+		if (new RegExp("(" + k + ")").test(format)) {
+			format = format.replace(RegExp.$1, RegExp.$1.length == 1
+					 ? o[k]
+					 : ("00" + o[k]).substr(("" + o[k]).length));
+		}
+	}
+	return format;
+
+}
+
+//daterangepicker设置时间
+function setTime($obj) {
+
+	var title = $obj.attr('dtitle');
+	var arr = $obj.val().split(' - ');
+	//排除日历组件空字符串的情况。
+	if (arr[0] != '') {
+		var starTime = new Date(arr[0].replace(/-/g, "/")).getTime();
+		var endTime = new Date(arr[1].replace(/-/g, "/")).getTime();
+		if (title == "ackTime") {
+			vm.fmConds.ackTimeStarTime = starTime;
+			vm.fmConds.ackTimeEndTime = endTime;
+			vm.fmConds.ackTimeMode=0;
+		} else if (title == "raisedTime") {
+			vm.fmConds.alarmRaisedStartTime = starTime;
+			vm.fmConds.alarmRaisedEndTime = endTime;
+			vm.fmConds.alarmRaisedTimeMode=0;
+		} else if (title == "clearTime") {
+			vm.fmConds.clearedTimeStartTime = starTime;
+			vm.fmConds.clearedTimeEndTime = endTime;
+			vm.fmConds.clearedTimeMode=0;
+		}
+	}
+}
+
+/*
+@param type 1 day 2 week  3 month  4 year
+ */
+function reduceDate(date, val, type) {
+
+	var d = new Date(date);
+	if (type == 'day') {
+		d.setDate(d.getDate() - val);
+	} else if (type == 'week') {
+		d.setDate(d.getDate() - val * 7);
+	} else if (type == 'month') {
+		d.setMonth(d.getMonth() - val);
+	} else if (type == 'year') {
+		d.setFullYear(d.getFullYear() - val);
+	}
+	var month = d.getMonth() + 1;
+	var day = d.getDate();
+	if (month < 10) {
+		month = "0" + month;
+	}
+	if (day < 10) {
+		day = "0" + day;
+	}
+	var val = d.getFullYear() + "-" + month + "-" + day;
+	return val;
+}
+
+alarmsUtil.condSave = function (cond, saveUrl, name) {
+
+	var conds = [];
+	if (cond.severity != null && cond.severity != "undefined" && cond.severity.length > 0) {
+		var severity = '{ "type": "Severity", "data": [{"severity": "' + cond.severity + '"}]}'; //级别
+		var severityObj = window.JSON.parse(severity)
+			conds.push(severityObj);
+	}
+	if (cond.ackState != null && cond.ackState != "undefined") {
+		var ackState = '{ "type": "AckState", "data": [{"ackState": "' + cond.ackState + '"}]}'; //级别
+		var ackStateObj = window.JSON.parse(ackState)
+			conds.push(ackStateObj);
+	}
+	if (cond.filterState != null && cond.filterState != "undefined") {
+		var filterState = '{ "type": "FilterState", "data": [{"filterState": "' + cond.filterState + '"}]}'; //级别
+		var filterStateObj = window.JSON.parse(filterState)
+			conds.push(filterStateObj);
+	}
+
+	if (cond.ackTimeStarTime != null && cond.ackTimeStarTime != "undefined") {
+		var ackTime = '{ "type": "AckTime", "data": [{"mode":"0","start":"' + cond.ackTimeStarTime + '","end":"' + cond.ackTimeEndTime + '" }]}'; //级别
+		var ackTimeObj = window.JSON.parse(ackTime)
+			conds.push(ackTimeObj);
+	}
+	if (cond.alarmRaisedStartTime != null && cond.alarmRaisedStartTime != "undefined") {
+		var alarmRaisedTime = '{ "type": "RaisedTime", "data": [{"mode":"0","start":"' + cond.alarmRaisedStartTime + '","end":"' + cond.alarmRaisedEndTime + '" }]}'; //级别
+		var alarmRaisedTimeObj = window.JSON.parse(alarmRaisedTime)
+			conds.push(alarmRaisedTimeObj);
+	}
+
+	if (cond.clearedTimeStarTime != null && cond.clearedTimeStarTime != "undefined") {
+		var clearedTime = '{ "type": "ClearedTime", "data": [{"mode":"0","start":"' + cond.clearedTimeStarTime + '","end":"' + cond.clearedTimeEndime + '" }]}'; //级别
+		var severityObj = window.JSON.parse(clearedTime)
+			conds.push(severityObj);
+	}
+	var resJsonObj = AlarmConds.parseActiveConds2JSon(conds);
+	resJsonObj.rule.name = name;
+	resJsonObj.rule.ruleType = vm.ruleType;
+	var resStr = window.JSON.stringify(resJsonObj);
+	var dataSource = "isc_AosRestDataSource_1";
+	var operationType = "add";
+	var data1 = {
+		dataSource : dataSource,
+		operationType : operationType,
+		data : resJsonObj,
+		oldValues : null
+	};
+	$.ajax({
+		dataType : "json",
+		type : "POST",
+		contentType : 'application/json; charset=utf-8',
+		url : saveUrl,
+		data : JSON.stringify(data1),
+		async : false,
+		success : function (msg) {
+			$('#saveModalCancle').trigger("click");
+		}
+	});
+
+}
+
+Array.prototype.contains = function (item) {
+	return RegExp("(^|,)" + item.toString() + "($|,)").test(this);
+};
+
+/*
+@param  alarmsType  1当前告警  2历史告警
+@param  condRuleId  查询条件的RuleId
+ */
+alarmsUtil.queryByParma = function (alarmsType, condRuleId) {
+
+	//1.判断是当前告警还是历史告警。
+
+	var sourceUrl;
+	if (alarmsType == 1) { //当前告警
+		sourceUrl = '/web/rest/web/fm/curqueryview?' + 'data={"ruleType":1,"ruleSort":1}&isc_flag=smartClient&_operationType=fetch&_startRow=0&_endRow=75&_textMatchStyle=exact&_componentId=condList&_dataSource=isc_RestDataSource_7&isc_metaDataPrefix=_&isc_dataFormat=json';
+		vm.ruleType = 1;
+		vm.$queryAlarmsInfoUrl = "/ngict/rest/fm/curalarms";
+		vm.curalarmsType = "curalarms";
+		vm.showClear = true; //清除按钮
+
+	} else if(alarmsType == 2){ //历史告警
+
+		sourceUrl = '/web/rest/web/fm/curqueryview?' + 'data={"ruleType":2,"ruleSort":1}&isc_flag=smartClient&_operationType=fetch&_startRow=0&_endRow=75&_textMatchStyle=exact&_componentId=condList&_dataSource=isc_RestDataSource_7&isc_metaDataPrefix=_&isc_dataFormat=json';
+		vm.ruleType = 2;
+		vm.$queryAlarmsInfoUrl = "/ngict/rest/fm/hisalarms";
+		vm.hisalarmsType = "hisalarms";
+		vm.showClear = false; //清除按钮
+	}else if(alarmsType == 3){ //通知
+		sourceUrl = '/web/rest/web/fm/curqueryview?' + 'data={"ruleType":2,"ruleSort":1}&isc_flag=smartClient&_operationType=fetch&_startRow=0&_endRow=75&_textMatchStyle=exact&_componentId=condList&_dataSource=isc_RestDataSource_7&isc_metaDataPrefix=_&isc_dataFormat=json';
+		vm.ruleType = 3;
+		vm.$queryAlarmsInfoUrl = "/ngict/rest/fm/notify";
+		vm.notificationType = "notification";
+		vm.showClear = false; //清除按钮
+	}
+
+	//如果没传condRuleId 直接返回
+	if (condRuleId == null || condRuleId == "undefined") {
+		return;
+	}
+
+	//2.取出告警规则的数据。
+
+	$.ajax({
+		type : "get",
+		data : null,
+		url : sourceUrl,
+		async : false,
+		success : function (msg) {
+			//1.遍历返回的条件数组确定是哪一个rule规则。
+			var ruleCondArr = msg.response.data;
+			var xmlData = "";
+			for (var i = 0; i < ruleCondArr.length; i++) {
+				if (ruleCondArr[i].ruleId == condRuleId) { //condRuleId
+					xmlData = "<xml>" + ruleCondArr[i].ruleData + "</xml>" //在jQuery裡，如果要直接将字串转成XML物件，记得前后方要加上<xml>及</xml>，才会被当成XML处理；
+						break;
+				}
+			};
+
+			//3.解析数据的xml联动页面的组件。
+			$(xmlData).find("CompoundCond").each(function () {
+				//1.级别
+				for (var i = 0; i < vm.severityTypes.length; i++) {
+					vm.severityTypes[i].value = false;
+				}
+				if ($(this).find("PerceivedSeverity").attr('value') != null && $(this).find("PerceivedSeverity ").attr('value') != 'undefined') {
+					var perceivedSeverityArr = $(this).find("PerceivedSeverity ").attr('value').split(',');
+					for (var i = 0; i < perceivedSeverityArr.length; i++) {
+						if (perceivedSeverityArr.contains(vm.severityTypes[i].id)) {
+							vm.severityTypes[i].value = true;
+						}
+					};
+				}
+
+				//2.确认状态
+				for (var i = 0; i < vm.ackStateTypes.length; i++) {
+					vm.ackStateTypes[i].value = false;
+				};
+				var ackStateV = $(this).find("AckState").attr('value');
+				if (ackStateV != null && ackStateV != "undefined") {
+					var ackStateArr = ackStateV.split(',');
+					for (var i = 0; i < vm.ackStateTypes.length; i++) {
+						if (ackStateArr.contains(vm.ackStateTypes[i].id)) {
+							vm.ackStateTypes[i].value = true;
+						}
+					};
+				}
+
+				//3.可见性
+				if(vm.ruleType === 1){
+					for (var i = 0; i < vm.filterStateTypes.length; i++) {
+							vm.filterStateTypes[i].value = false;
+						};
+					var filterStateV = $(this).find("FilterState").attr('value')
+						if (filterStateV != null && filterStateV != "undefined") {
+							var filterStateArr = filterStateV.split(',');
+							for (var i = 0; i < vm.filterStateTypes.length; i++) {
+								if (filterStateArr.contains(vm.filterStateTypes[i].id)) {
+									vm.filterStateTypes[i].value = true;
+								}
+							};
+						}
+				}
+					//4.确认时间
+
+				var dataRangeAck = $('input[dtitle="ackTime"]'); //日历组件
+				vm.fmConds.ackTimeStarTime = null;
+				vm.fmConds.ackTimeEndTime = null;
+				dataRangeAck.val('');
+				var ackTimeStartMs = $(this).find("AckTime").attr('start');
+				var ackTimeEndMs = $(this).find("AckTime").attr('end');
+				if (ackTimeStartMs != null && ackTimeStartMs != "undefined" && ackTimeEndMs != null && ackTimeEndMs != "undefined") {
+					vm.fmConds.ackTimeStarTime = ackTimeStartMs; //确认时间
+					vm.fmConds.ackTimeEndTime = ackTimeEndMs;
+					var ackTimeStarTime = new Date(parseInt(ackTimeStartMs)).format('yyyy-MM-dd');
+					var ackTimeEndTime = new Date(parseInt(ackTimeEndMs)).format('yyyy-MM-dd');
+					dataRangeAck.val(ackTimeStarTime + ' - ' + ackTimeEndTime);
+				}
+
+				//5.发生时间
+				vm.fmConds.alarmRaisedStartTime = null;
+				vm.fmConds.alarmRaisedEndTime = null;
+				var dataRangeRaised = $('input[dtitle="raisedTime"]'); //日历组件
+				dataRangeRaised.val('');
+				var raisedTimeStartMs = $(this).find("RaisedTime").attr('start');
+				var raisedTimeEndMs = $(this).find("RaisedTime").attr('end');
+				if (raisedTimeStartMs != null && raisedTimeStartMs != "undefined" && raisedTimeEndMs != null && raisedTimeEndMs != "undefined") {
+					vm.fmConds.alarmRaisedStartTime = raisedTimeStartMs; //发生时间
+					vm.fmConds.alarmRaisedEndTime = raisedTimeEndMs;
+					var raisedTimeStart = new Date(parseInt(raisedTimeStartMs)).format('yyyy-MM-dd');
+					var raisedTimeEnd = new Date(parseInt(raisedTimeEndMs)).format('yyyy-MM-dd');
+					dataRangeRaised.val(raisedTimeStart + ' - ' + raisedTimeEnd);
+				}
+
+				//6.清除时间
+
+
+				//7.告警码
+
+				vm.fmConds.probableCause = null;
+				var probableCauseArr = $(this).find("ProbableCause").attr('value');
+				if (probableCauseArr != null && probableCauseArr != "undefined") {
+					for (var i = 0; i < probableCauseArr.length; i++) {
+						vm.fmConds.probableCause = probableCauseArr;
+						// 联动
+					};
+				}
+
+				//8.告警位置
+				vm.fmConds.probableCause = null;
+				var newPositionCondArr = $(this).find("NewPositionCond").attr('value');
+				if (newPositionCondArr != null && newPositionCondArr != "undefined")
+					for (var i = 0; i < newPositionCondArr.length; i++) {
+						// 联动
+					};
+
+				//9.告警类型
+				vm.fmConds.alarmType = null;
+				var alarmTypeArr = $(this).find("AlarmType").attr('value');
+				if (alarmTypeArr != null && alarmTypeArr != "undefined") {
+					for (var i = 0; i < alarmTypeArr.length; i++) {
+						vm.fmConds.alarmType = alarmTypeArr;
+					};
+				}
+			});
+		}
+	});
+}
+
+
+/*
+ 获取系统类型中的告警码数量
+*/
+alarmsUtil.getProbableCauseCountBySystemType=function(systemType){
+	
+	//"/ngict/rest/fm/probableCause?request={"systemTypes":[6,12]}"
+	var getData={};
+	var request={};
+	request.systemTypes=systemType;
+	getData.request = JSON.stringify(request);
+	$.ajax({
+		type : "get",
+		data : getData,
+		url : "/ngict/rest/fm/probableCause",
+		async : true,
+		success : function (msg) {
+			vm.alarmCodeSelectedCount+=msg.length;
+		}});
+}
+\ No newline at end of file
diff --git a/openo-portal/portal-performance/src/main/webapp/performance/js/commonUtil.js b/openo-portal/portal-performance/src/main/webapp/performance/js/commonUtil.js
new file mode 100644
index 00000000..8ab957e5
--- /dev/null
+++ b/openo-portal/portal-performance/src/main/webapp/performance/js/commonUtil.js
@@ -0,0 +1,75 @@
+/*
+ * Copyright 2016, CMCC Technologies Co., Ltd.
+ *
+ * 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.
+ */
+var commonUtil = {};
+
+commonUtil.sendSynRequest = function(url){
+	var response;
+	$.ajax({
+		"type": 'get',
+		"url": url,
+		"dataType": "json",
+		"async": false,
+		success: function (resp) {
+			response = resp;
+			 return response;
+		},
+		error: function(XMLHttpRequest, textStatus, errorThrown){
+		}
+	});
+};
+
+commonUtil.strToJson = function(str){
+	var json = eval('(' + str + ')');
+	return json;
+};
+
+commonUtil.arrayRemove = function(aryInstance, index){
+	if (aryInstance == undefined || aryInstance == null) {
+		return;
+	}
+	for (var i = 0, n = 0; i < aryInstance.length; i++) {
+		if (aryInstance[i] != aryInstance[dx]) {
+			aryInstance[n++] = aryInstance[i];
+		}
+	}
+	aryInstance.length -= 1;
+};
+
+// (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423
+// (new Date()).Format("yyyy-M-d h:m:s.S")      ==> 2006-7-2 8:9:4.18
+commonUtil.parseDate = function(dateObj, format){
+	var o = {
+		"M+": dateObj.getMonth() + 1,
+		"d+": dateObj.getDate(),
+		"h+": dateObj.getHours(),
+		"m+": dateObj.getMinutes(),
+		"s+": dateObj.getSeconds(),
+		"q+": Math.floor((dateObj.getMonth() + 3) / 3),
+		"S": dateObj.getMilliseconds()
+	}
+	if (/(y+)/.test(format)) format = format.replace(RegExp.$1,
+		(dateObj.getFullYear() + "").substr(4 - RegExp.$1.length));
+	for (var k in o)
+		if (new RegExp("(" + k + ")").test(format))
+			format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] :
+				("00" + o[k]).substr(("" + o[k]).length));
+	return format;
+};
+
+commonUtil.strToJson = function(str){
+	var json = eval('(' + str + ')');
+	return json;
+};
diff --git a/openo-portal/portal-performance/src/main/webapp/performance/js/curAlarmsController.js b/openo-portal/portal-performance/src/main/webapp/performance/js/curAlarmsController.js
new file mode 100644
index 00000000..9711e760
--- /dev/null
+++ b/openo-portal/portal-performance/src/main/webapp/performance/js/curAlarmsController.js
@@ -0,0 +1,445 @@
+/*
+ * Copyright 2016, CMCC Technologies Co., Ltd.
+ *
+ * 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.
+ */
+var refreshByCond;
+var lang = 'en-US';
+
+avalon.config({
+	interpolate: ["<!--", "-->"]
+})
+
+refreshByCond = function(){
+	vm.$initTable();
+};
+
+var vm = avalon.define({
+	$id: "curAlarmsController",
+	logType: 'secLog',
+	severity: '',
+	ackState: '',
+	filterState: '',
+	ruleType: 1,
+	curalarmsType: 'curalarms',
+	moreCondBtn: false,
+	showClear: true,
+	dataRangeLocationDisabled:true,
+	dataRangeTypeDisabled:true,
+	dataRangeCodeDisabled:true,
+	alCodeTree_affirm:false,
+	alLocationTree_affirm:false,
+	alarmCodeSelectedCount: 0,
+	alarmLocationSelectedCount: 0,
+	alarmTypeSelectedCount: 0,
+	tempHide:false,
+	treeIcons: [
+		"ict-arrowRight",
+		"ict-arrowLeft",
+		"ict-selectLeft"
+	],
+
+	severityTypes: [
+		{id: '1', name: $.i18n.prop("ngict_fm_iui_curalarm_critical"), value: true, type: "severityTypes", class: "alarm-serious"},
+		{id: '2', name: $.i18n.prop("ngict_fm_iui_curalarm_major"), value: true, type: "severityTypes", class: "alarm-important"},
+		{id: '3', name: $.i18n.prop("ngict_fm_iui_curalarm_minor"), value: true, type: "severityTypes", class: "alarm-secondary"},
+		{id: '4', name: $.i18n.prop("ngict_fm_iui_curalarm_warning"), value: true, type: "severityTypes", class: "alarm-slightly"}
+	],
+
+	ackStateTypes: [
+		{id: '1', name: $.i18n.prop("ngict_fm_iui_curalarm_ackAlarm"), value: false, type: "ackStateTypes"},
+		{id: '2', name: $.i18n.prop("ngict_fm_iui_curalarm_unackAlarm"), value: true, type: "ackStateTypes"}
+	],
+
+	filterStateTypes: [
+		{id: '1', name: $.i18n.prop("ngict_fm_iui_curalarm_visible"), value: true, type: "filterStateTypes"},
+		{id: '0', name: $.i18n.prop("ngict_fm_iui_curalarm_invisible"), value: false, type: "filterStateTypes"}
+	],
+
+	alTypes:[
+		"Communications Alarm",
+		"Processing Error Alarm",
+		"Quality of Service Alarm",
+		"Equipment Alarm",
+		"Environmental Alarm",
+		"OMC Alarm",
+		"Integrity Violation",
+		"Operational Violation",
+		"Physical Violation",
+		"Security Violation",
+		"Time Domain Violation"
+	],
+
+	$alarmsTableFields: {
+		curalarms: [
+			{"mData": null,name: "<input id='dataTableCheckBox' type='checkBox'/>","sClass": 'details-check',"sWidth": '5%',"fnRender": alarmsUtil.checkBox},
+			{"mData": "order", name: $.i18n.prop("ngict_fm_iui_curalarm_order"),"sClass": 'details-control', "sWidth": '6%'},
+			{"mData": "id", sWidth : "10%",name: $.i18n.prop("ngict_fm_iui_curalarm_id"),"bVisible": true},
+			{"mData": "position1DisplayName", sWidth : "10%",name:$.i18n.prop("ngict_fm_iui_curalarm_ne")},
+			{"mData": "mocName",sWidth : "14%", name: $.i18n.prop("ngict_fm_iui_curalarm_moc")},
+			{"mData": "probableCauseCodeNameAndCode", 	sWidth : "14%",name: $.i18n.prop("ngict_fm_iui_curalarm_probableCauseCode")},
+			{"mData": "alarmRaisedTime", sWidth : "15%",name: $.i18n.prop("ngict_fm_iui_curalarm_alarmRaisedTime"),"fnRender": alarmsUtil.timeRender},
+			{"mData": "perceivedSeverity",sWidth : "10%", name: $.i18n.prop("ngict_fm_iui_curalarm_perceivedSeverity"),fnRender:alarmsUtil.Severity},
+			{"mData": "alarmType",sWidth : "10%", name: $.i18n.prop("ngict_fm_iui_curalarm_alarmType"),"bVisible": false},
+			{"mData": "ackState",sClass:"ackState",sWidth : "10%", name: $.i18n.prop("ngict_fm_iui_curalarm_ackState"),"fnRender":alarmsUtil.ackState},
+			{"mData": "ackTime", sWidth : "13%",name: $.i18n.prop("ngict_fm_iui_curalarm_ackTime"),"fnRender": alarmsUtil.timeRender,"bVisible": false},
+			{"mData": "position1", name: $.i18n.prop("ngict_fm_iui_curalarm_position1"),"bVisible": false},
+			{"mData": "alarmChangedTime", name: $.i18n.prop("ngict_fm_iui_curalarm_alarmChangedTime"),"bVisible": false,"fnRender": alarmsUtil.timeRender},
+			{"mData": "ackUserId", name: $.i18n.prop("ngict_fm_iui_curalarm_ackUserId"),"bVisible": false},
+			{"mData": "ackSystemId", name: $.i18n.prop("ngict_fm_iui_curalarm_ackSystemId"),"bVisible": false},
+			{"mData": "alarmClearedTime", name: $.i18n.prop("ngict_fm_iui_curalarm_alarmClearedTime"),"bVisible": false,"fnRender": alarmsUtil.timeRender},
+			{"mData": "additionalText", name: $.i18n.prop("ngict_fm_iui_curalarm_additionalText"),"bVisible": false},
+			{"mData": "ackSystemId", name: $.i18n.prop("ngict_fm_iui_curalarm_ackSystem"),"bVisible": false},
+			{"mData": "clearUserId", name: $.i18n.prop("ngict_fm_iui_curalarm_clearUserId"),"bVisible": false},
+			{"mData": "clearSystemId", name: $.i18n.prop("ngict_fm_iui_curalarm_clearSystemId"),"bVisible": false},
+			{"mData": "clearType", name: $.i18n.prop("ngict_fm_iui_curalarm_clearType"),"bVisible": false},
+			{"mData": "probableCauseCode", name: $.i18n.prop("ngict_fm_iui_curalarm_probableCauseCode"),"bVisible": false},
+			{"mData": "specificProblem", name: $.i18n.prop("ngict_fm_iui_curalarm_specificProblem"),"bVisible": false},
+			{"mData": "neIp", name: $.i18n.prop("ngict_fm_iui_curalarm_neIp"),"bVisible": false},
+			{"mData": "pathIds", name: $.i18n.prop("ngict_fm_iui_curalarm_pathIds"),"bVisible": false},
+			{"mData": "pathName", name: $.i18n.prop("ngict_fm_iui_curalarm_pathName"),"bVisible": false}
+		],
+	},
+
+	$language: {
+		"sProcessing": "<img src='../common/thirdparty/data-tables/images/loading-spinner-grey.gif'/><span>&nbsp;&nbsp;处理中...</span>",
+		"sLengthMenu": $.i18n.prop("ngict-fm-iui-table-sLengthMenu"),
+		"sZeroRecords": $.i18n.prop("ngict-fm-iui-table-sZeroRecords"),
+		"sInfo": "<span class='seperator'></span>" + $.i18n.prop("ngict-fm-iui-table-sInfo"),
+		"sInfoEmpty": $.i18n.prop("ngict-fm-iui-table-sInfoEmpty"),
+		"sGroupActions": $.i18n.prop("ngict-fm-iui-table-sGroupActions"),
+		"sAjaxRequestGeneralError": $.i18n.prop("ngict-fm-iui-table-sAjaxRequestGeneralError"),
+		"sEmptyTable": $.i18n.prop("ngict-fm-iui-table-sEmptyTable"),
+		"oPaginate": {
+			"sPrevious": $.i18n.prop("ngict-fm-iui-table-sPrevious"),
+			"sNext": $.i18n.prop("ngict-fm-iui-table-sNext"),
+			"sPage": $.i18n.prop("ngict-fm-iui-table-sPage"),
+			"sPageOf": $.i18n.prop("ngict-fm-iui-table-sPageOf")
+		}
+	},
+
+	$queryAlarmsInfoUrl: '/api/umcfm/v1/curalarms',
+	$saveCondUrl: '/web/rest/web/fm/rules?isc_dataFormat=json',
+	fmConds: {},
+	$sunburstSetting: {width: 450, height: 400},
+
+	$getLogCond: function(){
+		var cond = {};
+		var severitys = [];
+		var ackState = [];
+		var filterState = [];
+		for (var i = 0; i < vm.severityTypes.length; i++) {
+			vm.severityTypes[i].value ? severitys.push(vm.severityTypes[i].id) : null;
+		};
+		for (var i = 0; i < vm.ackStateTypes.length; i++) {
+			vm.ackStateTypes[i].value ? cond.ackState = ackState.push(vm.ackStateTypes[i].id) : null;
+		};
+		for (var i = 0; i < vm.filterStateTypes.length; i++) {
+			vm.filterStateTypes[i].value ? cond.filterState = filterState.push(vm.filterStateTypes[i].id) : null;
+		};
+		cond.severity = severitys;
+		cond.ackState = ackState;
+		cond.filterState = filterState;
+		cond.location=vm.fmConds.location;
+		cond.ackTimeStarTime = vm.fmConds.ackTimeStarTime;
+		cond.ackTimeEndTime = vm.fmConds.ackTimeEndTime;
+		cond.ackRelativeTime = vm.fmConds.ackRelativeTime;
+		cond.ackTimeMode = vm.fmConds.ackTimeMode;
+		cond.alarmRaisedStartTime = vm.fmConds.alarmRaisedStartTime;
+		cond.alarmRaisedEndTime = vm.fmConds.alarmRaisedEndTime;
+		cond.alarmRaisedRelativeTime = vm.fmConds.alarmRaisedRelativeTime;
+		cond.alarmRaisedTimeMode = vm.fmConds.alarmRaisedTimeMode;
+		cond.clearedTimeStarTime = vm.fmConds.clearedTimeStarTime;
+		cond.clearedTimeEndTime = vm.fmConds.clearedTimeEndTime;
+		cond.clearedTimeMode = vm.fmConds.clearedTimeMode;
+		cond.probableCause = vm.fmConds.probableCause;
+		cond.alarmType = vm.fmConds.alarmType;
+		cond.ruleType = vm.ruleType;
+		return cond;
+	},
+
+	$initRegister: function(){
+		$('#alCode .condSelect').click(function(){
+			$('#alCodeTree').modal('show');
+		});
+
+		$('#alCodeTree').on('hide.bs.modal', function(){
+			$table = $("#selectedProbableCausesTreeTable");
+			if(vm.alCodeTree_affirm===false){
+				$('#selectedProbableCausesTreeTable tbody').children().remove();
+				for(i=0;i<alarmTemp.length;i++){
+					$table.append(alarmTemp[i]);
+				}
+			}
+			vm.alCodeTree_affirm=false;
+		});
+
+		$('#alCodeTree').on('show.bs.modal', function(){
+			vm.alCodeTree_affirm=false;
+			alarmTemp=[];
+			var $trs=$("#selectedProbableCausesTreeTable tr");
+			if($trs.length!=0){
+				for(var i=0;i<$trs.length;i++){
+					alarmTemp.push($trs.eq(i)[0].outerHTML);
+				}
+				$('#selectedProbableCausesTreeTable td').on("click", function(){
+					var $tds = $('#selectedProbableCausesTreeTable td');
+					for (var i = 0; i < $tds.length; i++) {
+						$tds.eq(i).removeClass('tallCellSelected');
+						$tds.eq(i).parent().removeClass('checked');
+					}
+					$(this).addClass('tallCellSelected');
+					$(this).parent().addClass("checked");
+				});
+			}	
+		})
+
+		$('#alType .condSelect').click(function(){
+			$('#alTypeTree').modal('show');
+		});
+
+		//告警位置初始化
+		$('#alLocation .condSelect').click(function(){
+			$('#alLocationTree').modal('show');
+		});
+
+		$('#alLocationTree').on('hide.bs.modal', function(){
+			$table = $("#selectedDeptTreeTable");
+			if(vm.alLocationTree_affirm===false){
+				$('#selectedDeptTreeTable tbody').children().remove();
+				for(i=0;i<alarmTemp.length;i++){
+					$table.append(alarmTemp[i]);
+				}
+			}
+			vm.alLocationTree_affirm=false;
+		});
+
+		$('#alLocationTree').on('show.bs.modal', function(){
+			vm.alLocationTree_affirm=false;
+			alarmTemp=[];
+			var $trs=$("#selectedDeptTreeTable tr");
+			if($trs.length!=0){
+				for(var i=0;i<$trs.length;i++){
+					alarmTemp.push($trs.eq(i)[0].outerHTML);
+				}
+			}
+			$('#selectedDeptTreeTable td').on("click", function(){
+				var $tds = $('#selectedDeptTreeTable td');
+				for (var i = 0; i < $tds.length; i++) {
+					$tds.eq(i).removeClass('tallCellSelected');
+					$tds.eq(i).parent().removeClass('checked');
+				}
+				$(this).addClass('tallCellSelected');
+				$(this).parent().addClass("checked");
+			});
+		})
+
+		$(document).on("click", function(e){ 
+			var target = $(e.target);
+			if(target.closest("#alLocationTree").length == 0 && target.closest("#alLocation .condSelect").length==0){
+				$("#alLocationTree").fadeOut();
+			}
+			if(target.closest("#alCodeTree").length == 0 && target.closest("#alCode .condSelect").length==0){
+				$('#alCodeTree').fadeOut();
+			}
+			if(target.closest("#alTypeTree").length == 0 && target.closest("#alType .condSelect").length==0){
+				$('#alTypeTree').fadeOut();
+			}
+		});
+
+		 //主表格确认
+		$('#affirm').hover(function(){
+			$('#affirmTrip').show();
+		},function(){
+			$('#affirmTrip').hide();
+		});
+
+		//主表格反确认
+		$('#unAffirm').hover(function(){
+			$('#unAffirmTrip').show();
+		},function(){
+			$('#unAffirmTrip').hide();
+		});
+
+		 //初始化 checkBox
+		 $('.confirmTime input[type="radio"]').iCheck({
+			radioClass: 'iradio_square-aero',
+			increaseArea: '20%'
+		 });
+ 
+		//告警类型树的选项被选中时
+		$('#selectedAlTypeTable input[type="checkBox"]').on("ifChecked", function(){
+			$(this).parent().parent().addClass('tallCellSelected');
+		});
+
+		//告警类型未被选中时
+		 $('#selectedAlTypeTable input[type="checkBox"]').on("ifUnchecked", function(){
+			$(this).parent().parent().removeClass('tallCellSelected');
+		});
+	},
+
+	$initTable: function(){
+		var setting = {};
+		setting.language = vm.$language;
+		setting.columns = vm.$alarmsTableFields[vm.curalarmsType];
+		setting.restUrl = vm.$queryAlarmsInfoUrl;
+		setting.tableId = "ict_alarms_table";
+		serverPageTable.initDataTable(setting, vm.$getLogCond(), 'ict_alarms_table_div');
+	},
+
+	condChange: function(){
+		refreshByCond();
+	},
+
+	moreCondClicked: function(){
+		$('#moreCond').fadeToggle();
+		var icon = $(this).children('span').eq(0);
+		if ($(this).hasClass('blueactive')) {
+			vm.moreCondBtn = false;
+			icon.removeClass('borderBottom');
+			icon.addClass('borderBotTop');
+			$("div.fliterline").show();
+		} else {
+			vm.moreCondBtn = true;
+			icon.removeClass('borderTop');
+			icon.addClass('borderBottom');
+			$("div.fliterline").hide();
+		}
+	},
+
+	alarmsCondSave: function(){
+		if ($('#saveCondId').val() != null && $.trim($('#saveCondId').val()) != '') {
+			var name = $('#saveCondId').val();
+			alarmsUtil.condSave(vm.$getLogCond(), vm.$saveCondUrl, name);
+		}
+	},
+
+	saveModal: function(){
+		$('#myModal').modal('show');
+	},
+
+	searchModal: function(){
+		refreshByCond();
+	},
+
+	tabClicked: function(modelItem, item){
+		if (!modelItem.value) {
+			modelItem.value = true;
+		} else {
+			modelItem.value = false;
+		}
+		refreshByCond();
+	},
+
+	moveTreeNode: function(item){
+		 alarmsUtil.moveNode(item);
+	},
+
+	//告警位置——确认
+	deptTreeAffirm: function(){
+		var selectName="";
+		var locationObj=[];
+		var $tds= $("#selectedDeptTreeTable td");
+		for (var i = 0; i < $tds.length; i++) {
+			var obj={};
+			obj.id=$tds.eq(i).attr('nodeid');
+			obj.oid=$tds.eq(i).attr('oid');
+			locationObj.push(obj);
+			if(i==0){
+				selectName+=$tds.eq(i).text();
+			}else{
+				selectName+=","+$tds.eq(i).text();
+			}
+		};
+		vm.fmConds.location=locationObj;
+		vm.alarmLocationSelectedCount=locationObj.length;
+		vm.alLocationTree_affirm=true;
+		$('#alLocationTree').modal('hide')
+	},
+
+	//告警码树 确认
+	probableCausesTreeAffirm: function(){
+		var selectName="";
+		var probableCause=[];
+		var $tds= $("#selectedProbableCausesTreeTable td");
+		var systemType=[];
+		for (var i = 0; i < $tds.length; i++) {
+			var obj={};
+			obj.codeid=$tds.eq(i).attr('codeid');
+			obj.parentid=$tds.eq(i).attr('parentid');
+			obj.type=$tds.eq(i).attr('type');
+			probableCause.push(obj);
+		};
+		vm.fmConds.probableCause=probableCause;
+		vm.alarmCodeSelectedCount = probableCause.length;
+		vm.alCodeTree_affirm=true;
+		$('#alCodeTree').modal('hide');
+	},
+
+	//告警类型 确认
+	alTypeTreeAffirm: function(){
+		var selectName="";
+		var alType=[];
+		var $tds=$("#selectedAlTypeTable td.tallCellSelected");
+		for (var i = 0; i < $tds.length; i++) {
+			var obj={};
+			alType.push(obj);
+			if(i==0){
+				selectName+=$tds.eq(i).text();
+			}else{
+				selectName+=","+$tds.eq(i).text();
+			}
+		};
+		vm.fmConds.alType=alType;
+		if(selectName!=""){
+			$('#alType .condSelect :selected').text(selectName);
+		}else{
+			$('#alType .condSelect :selected').text("请选择告警类型");
+		}
+		vm.alarmTypeSelectedCount = alType.length;
+		//$('#alTypeTree').fadeOut();
+		$('#alTypeTree').modal('hide')
+	}
+});
+
+//初始化 告警类型
+initAlTypeTable = function(){
+	var html = "";
+	for (var i = 0; i < vm.alTypes.length; i++) {
+		html += "<tr><td><input type='checkbox'>" + vm.alTypes[i] + "</td></tr>";
+	};
+	$('#selectedAlTypeTable').append(html);
+}
+
+initPage = function(){
+	bootbox.setDefaults({
+		locale: lang.replace("-", "_")
+	});
+	//自定义确认时间组件
+	alarmsUtil.setDateRange("daterangeConfirm", vm);
+	alarmsUtil.dateRangeEnableDisable("customAckTime");
+	//自定义发生时间组件
+	alarmsUtil.setDateRange("daterangeOccur", vm);
+	alarmsUtil.dateRangeEnableDisable("customRaisedTime");
+	//高级菜单界面中，对告警发生时间、确认时间、清除时间初始化
+	alarmsUtil.dateRangeCustom(vm);
+	//告警码树初始化
+	alarmsUtil.initTree();
+	//告警类型初始化
+	initAlTypeTable();
+	vm.$initRegister();
+	refreshByCond();
+	localStorage.setItem("curRuleDataId",0);
+}
+
+initPage();
diff --git a/openo-portal/portal-performance/src/main/webapp/performance/js/performanceChart.js b/openo-portal/portal-performance/src/main/webapp/performance/js/performanceChart.js
new file mode 100644
index 00000000..97840425
--- /dev/null
+++ b/openo-portal/portal-performance/src/main/webapp/performance/js/performanceChart.js
@@ -0,0 +1,196 @@
+/*
+ * Copyright 2016, CMCC Technologies Co., Ltd.
+ *
+ * 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.
+ */
+// draw the chart by performance datas
+function drawPerformanceChart() {
+    var chartType = "";
+    var titleText = document.getElementById("tableTitleText").innerHTML;
+    var subTitleText = "subTitleText";
+    var chartDataList = [];
+    var resourceNameList = [];
+    var timeList = [];
+
+    // get table datas
+    var tableObj = document.getElementById("ict_pm_data");
+    if (tableObj == null || tableObj.rows.length < 1) {
+        return;
+    }
+
+    // distinguish between chart types
+    var ratioType = tableObj.rows[0].cells[5].innerText;
+    if (ratioType.indexOf("CPU") > -1) {
+        chartType = "CPU";
+        subTitleText = "CPU USE RATIO";
+    } else if (ratioType.indexOf("RAM") > -1) {
+        chartType = "RAM";
+        subTitleText = "RAM USE RATIO";
+    } else if (ratioType.indexOf("VOLUME") > -1) {
+        chartType = "FILESYSTEM";
+        subTitleText = "LOGIC VOLUME FILESYSTEM USE RATIO";
+    } else if (ratioType.indexOf("NIC") > -1) {
+        chartType = "NIC";
+        subTitleText = "ERROR PACKET RATIO BY ONE COLLECT-PERIOD (SEND AND RECEIVED)";
+    } else {
+        return;
+    }
+    
+    // collect datas for chart horizontal axis
+    for (var i = 1; i < tableObj.rows.length; i++) {
+        var strTime = tableObj.rows[i].cells[0].innerText;
+
+        if (timeList.length == 0) {
+            // push the first start time into the x-axis
+            timeList.push(strTime);
+        } else {
+            // push the start times into the x-axis and sort them
+            for (var j = 0; j < timeList.length; j++) {
+                if (timeList[j] == strTime) {
+                    break;
+                } else if (timeList[j] > strTime) {
+                    timeList.splice(j, 0, strTime);
+                    break;
+                } else if (j + 1 == timeList.length && timeList[j] < strTime) {
+                    timeList.push(strTime);
+                    break;
+                }
+            }
+        }
+    }
+
+    // create chart resources
+    for (var i = 1; i < tableObj.rows.length; i++) {
+        var strTime = tableObj.rows[i].cells[0].innerText;
+        var ratioIndex = getListIndex(timeList, strTime);
+        var strName = "";
+        var strRatio = "";
+
+        if (chartType == "CPU" || chartType == "RAM") {
+            strName = tableObj.rows[i].cells[4].innerText;
+            strRatio = tableObj.rows[i].cells[5].innerText;
+        } else if (chartType == "FILESYSTEM") {
+            strName = tableObj.rows[i].cells[4].innerText + "(" + tableObj.rows[i].cells[6].innerText + ")";
+            strRatio = tableObj.rows[i].cells[9].innerText;
+        } else if (chartType == "NIC") {
+            strName = tableObj.rows[i].cells[4].innerText + "(" + tableObj.rows[i].cells[5].innerText + ")";
+            strRatio = parseFloat(tableObj.rows[i].cells[10].innerText) + parseFloat(tableObj.rows[i].cells[11].innerText);
+        }
+
+        if (chartDataList.length == 0) {
+            // create the first chart resource and push it into the chartlist
+            insertChartDataList(chartDataList, strName, strRatio, ratioIndex);
+        } else {
+            // update the chart resources which exist in chartlist
+            var existFlg = false;
+            for (var j = 0; j < chartDataList.length; j++) {
+                if (chartDataList[j].name == strName) {
+                    chartDataList[j].data[ratioIndex] = strRatio;
+                    existFlg = true;
+                    break;
+                }
+            }
+
+            // create a new chart resource and push it into the chartlist
+            if (!existFlg) {
+                insertChartDataList(chartDataList, strName, strRatio, ratioIndex);
+            }
+        }
+    }
+
+    for (var i = 0; i < chartDataList.length; i++) {
+        // complete length of datalist for each chart resource
+        if (chartDataList[i].data.length < timeList.length) {
+            chartDataList[i].data[timeList.length - 1] = "";
+        }
+
+        // create the name list of chart resources
+        resourceNameList.push(chartDataList[i].name);
+    }
+
+    // initialize the chart
+    var dom = document.getElementById("chartCanvasDiv");
+    var myChart = echarts.init(dom);
+    option = null;
+
+    // set the chart by collected chart resources
+    option = {
+        title: {
+            text: titleText,
+            subtext: subTitleText,
+            x: 'center'
+        },
+        tooltip: {
+            trigger: 'axis'
+        },
+        legend: {
+            data:resourceNameList,
+            top: '10%'
+        },
+        grid: {
+            top: '20%'
+        },
+        toolbox: {
+            show: true,
+            feature: {
+                magicType: {type: ['line', 'bar']},
+                restore: {},
+                saveAsImage: {}
+            }
+        },
+        xAxis: {
+            type: 'category',
+            boundaryGap: false,
+            data : timeList.map(function (str) {
+                    return str.replace(' ', '\n')
+                })
+        },
+        yAxis: {
+            name : 'percentage(%)',
+            type: 'value'
+        },
+        series: chartDataList
+    };
+
+    // draw the performance chart of all resources
+    if (option && typeof option === "object") {
+        myChart.setOption(option, true);
+    };
+};
+
+// define the struct of chart resource
+function chartData() {
+    this.name = "";
+    this.type = "line";
+    this.smooth = true;
+    this.data = [];
+};
+
+// create a new chart resource and push it into the chartlist
+function insertChartDataList(chartDataList, name, data, dataIndex) {
+    var cd = new chartData();
+    cd.name = name;
+    cd.data[dataIndex] = data;
+    chartDataList.push(cd);
+};
+
+// return the index of the specified element in the list
+function getListIndex(list, data) {
+    var dataIndex = 0;
+    for (var i = 0; i < list.length; i++) {
+        if (list[i] == data) {
+            return i;
+        }
+    }
+    return dataIndex;
+};
diff --git a/openo-portal/portal-performance/src/main/webapp/performance/js/performanceQueryController.js b/openo-portal/portal-performance/src/main/webapp/performance/js/performanceQueryController.js
new file mode 100644
index 00000000..d0d6b2eb
--- /dev/null
+++ b/openo-portal/portal-performance/src/main/webapp/performance/js/performanceQueryController.js
@@ -0,0 +1,858 @@
+/*
+ * Copyright 2016, CMCC Technologies Co., Ltd.
+ *
+ * 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.
+ */
+var pm = {};
+pm.query = {};
+pm.query.vmPmQuery = avalon.define({
+	$id: "pmQueryController",
+	tableTitle:'',
+	pmDataVisable:true,
+	pmChartVisable:false,
+	tableIconVisable:false,
+	chartIconVisable:false,
+	queryRuleVisable:false,
+	boxVisible:true,
+	pmQueries:[],		
+	
+	$postData:{},
+	
+	beginTime: "",
+	endTime: "",
+	granularity:"",
+	
+	granularities: [
+        {id: '5', name: $.i18n.prop('com_zte_ums_ict_pm_query_5'), value: true},
+        {id: '15', name: $.i18n.prop('com_zte_ums_ict_pm_query_15'), value: false},		
+		{id: '60', name: $.i18n.prop('com_zte_ums_ict_pm_query_60'), value: false}
+    ],
+	
+	granularityClicked: function(modelItem, item){
+		if(modelItem.id =="5"){
+			pm.query.vmPmQuery.granularity = "5*60";
+			pm.query.vmPmQuery.granularities[0].value = true;  
+			pm.query.vmPmQuery.granularities[1].value = false;  
+			pm.query.vmPmQuery.granularities[2].value = false; 
+		}else if(modelItem.id =="15"){
+			pm.query.vmPmQuery.granularity = "15*60";
+			pm.query.vmPmQuery.granularities[0].value = false;  
+			pm.query.vmPmQuery.granularities[1].value = true;  
+			pm.query.vmPmQuery.granularities[2].value = false;
+		}else{
+			pm.query.vmPmQuery.granularity = "60*60";
+			pm.query.vmPmQuery.granularities[0].value = false;  
+			pm.query.vmPmQuery.granularities[1].value = false;  
+			pm.query.vmPmQuery.granularities[2].value = true;
+		}
+	},	
+	
+	resources: [
+		/* {id: 'vnfInstance', name: $.i18n.prop('ngict-pm-iui-name-vnfInstance'), value: "SSS"},
+		{id: 'host', name: $.i18n.prop('ngict-pm-iui-name-host'), value: ""} */
+	],
+	
+	resourcesMap:{},
+	
+	resourceSlected:[],
+	
+	resourceSlectedObjs:[],
+	
+	rmSelectedResource: function(modelItem, elem){
+		$(elem).parent().remove();
+		pm.query.vmPmQuery.resourceSlected.splice(pm.query.vmPmQuery.resourceSlected.indexOf(modelItem.id), 1);
+	},
+	
+	initResources: function(resourceTypeId){
+		var that = this;
+		$.ajax({
+			async: false,
+			"dataType": 'json',
+			"type": "GET",
+			//"url": "/api/umcpm/v1/resources/" + resourceTypeId,
+			"url": "/api/umcpm/v1/resources/",
+			"contentType": 'application/json; charset=utf-8',
+			"success": function (res, textStatus, jqXHR) {
+				//var nodes = res.content;	
+				var nodes = res;
+				that.resources = [];
+				for (var i = 0; i < nodes.length; i++) {
+					var resource = {
+						id: nodes[i].id,
+						name: nodes[i].name,
+						resType: nodes[i].resType
+					};
+					that.resources.push(resource);
+					//保存id和resource的映射关系
+					var resourceCopy = {
+						id: nodes[i].id,
+						name: nodes[i].name,
+						resType: nodes[i].resType
+					};
+					that.resourcesMap[nodes[i].id] = resourceCopy;
+				}
+				//过滤框注册
+				$("input[id=resourcesToFilter]").keyup(function(){ 
+					$("table#resources tbody tr").hide().filter(":contains('"+( $(this).val() )+"')").show(); 
+				}); 
+			},
+			"error": function () {
+			}
+		});
+	},
+	
+	resTypeArray : [],
+	selectedResourceType : "",
+	selectedResourceTypeId : "",
+	
+	moTypeArray:[],
+	selectedMoType:"",
+	selectedMoTypeId:"",
+	
+	counterArray:[],
+	selectedCounter:[],
+	
+	resTypeSelectAction:function(){
+		var resourceTypeId = getIdFromName(pm.query.vmPmQuery.selectedResourceType,pm.query.vmPmQuery.resTypeArray);
+		pm.query.vmPmQuery.selectedResourceTypeId = resourceTypeId;
+		getMoTypeArray(resourceTypeId);
+		pm.query.vmPmQuery.counterArray=[];
+		pm.query.vmPmQuery.initResources(resourceTypeId);
+	},
+	moTypeSelectAction:function(obj){
+		 var resourceTypeId=getIdFromName(pm.query.vmPmQuery.selectedResourceType,pm.query.vmPmQuery.resTypeArray);
+		 //var moTypeId=$(obj).val();
+		 var moTypeId = getIdFromName(pm.query.vmPmQuery.selectedMoType, pm.query.vmPmQuery.moTypeArray);	
+		 pm.query.vmPmQuery.selectedMoTypeId = moTypeId;		 
+		 getCounterArray(resourceTypeId,moTypeId);
+	},
+	/* counterSelectAction:function(obj){
+		 var counterId=$(obj).val();
+		 pm.query.vmPmQuery.selectedCounter=counterId;		
+		 pm.query.vmPmQuery.indexDescription+=pm.query.vmPmQuery.selectedCounter;
+	}, */
+	returnQueryPage: function(){
+		pm.query.vmPmQuery.pmDataVisable=true;
+		pm.query.vmPmQuery.pmChartVisable=false;
+		pm.query.vmPmQuery.tableIconVisable=false;
+		pm.query.vmPmQuery.chartIconVisable=true;
+		pm.query.vmPmQuery.queryRuleVisable=false;
+		pm.query.vmPmQuery.clickDisplayGraphAlink();
+	},
+	
+	queryRuleView: function(event, el){
+		event.stopPropagation();
+		
+		pm.query.vmPmQuery.tableTitle=$.i18n.prop('com_zte_ums_ict_pm_query_edit');   
+		
+		//取得测量任务详情
+		var elem = {};
+		$.ajax({
+			async: false,
+			"dataType": 'json',
+			"type": "GET",
+			"url": "/api/umcpm/v1/meatasks/" + el.id,
+			"data": null,
+			"contentType": 'application/json; charset=utf-8',
+			"success": function (res, textStatus, jqXHR) {
+				elem = res;
+			},
+			"error": function () {
+			}
+		});
+		
+		pm.query.vmPmQuery.pmDataVisable=false;
+		pm.query.vmPmQuery.pmChartVisable=false;
+		pm.query.vmPmQuery.tableIconVisable=false;
+		pm.query.vmPmQuery.chartIconVisable=false;
+		pm.query.vmPmQuery.queryRuleVisable=true;
+		
+		pm.query.vmPmQuery.beginTime = elem.beginTime;
+		pm.query.vmPmQuery.endTime = elem.endTime;
+		
+		var timetext = pmUtil.formatTime(pm.query.vmPmQuery.beginTime) + " - " + pmUtil.formatTime(pm.query.vmPmQuery.endTime);
+		$("#queryTimeRange").val(timetext);
+		
+		//选择粒度
+		pm.query.vmPmQuery.granularity = elem.granularity;
+		var granularity = pm.query.vmPmQuery.granularity / 60;
+		var granularities = pm.query.vmPmQuery.granularities;
+		for(var i=0;i<granularities.length;i++){
+			if(granularity == granularities[i].id){
+				granularities[i].value = true;
+			}else{
+				granularities[i].value = false;
+			}
+		}		
+		
+		//展开相关资源类型		
+		pm.query.vmPmQuery.resTypeArray.push(elem.resourceType);
+		pm.query.vmPmQuery.selectedResourceTypeId = elem.resourceType.id;
+		pm.query.vmPmQuery.selectedResourceType = elem.resourceType.name;		
+		//pm.query.vmPmQuery.resTypeSelectAction();
+		pm.query.vmPmQuery.moTypeArray.push(elem.moType);
+		pm.query.vmPmQuery.selectedMoTypeId = elem.moType.id;
+		pm.query.vmPmQuery.selectedMoType = elem.moType.name;
+		//pm.query.vmPmQuery.moTypeSelectAction();
+		getCounterArray(elem.moType.id);		
+		pm.query.vmPmQuery.initResources(elem.resourceType.id);
+		
+		$("select#resourceTypes").attr("disabled", true);
+		$("select#moTypes").attr("disabled", true);
+		
+		//选中对象
+		pm.query.vmPmQuery.resourceSlected = [];
+		for(var j=0;j<elem.resources.length;j++){
+			pm.query.vmPmQuery.resourceSlected.push(elem.resources[j].id);
+			//pm.query.vmPmQuery.resourceSlected.push(elem.resources[j]);
+		}
+		
+		//$("a#upArrow").click();
+		pm.query.vmPmQuery.clickDisplayGraphAlink();
+		
+		$('.indexesAll').unbind().bind("change", function () {
+			var table = $("table#indexes");
+			var set = $('tbody > tr > td:nth-child(1) input[type="checkbox"]', table);
+			var checked = $(this).is(":checked");
+			$(set).each(function () {
+				//$(this).attr("checked", checked);
+				if(checked){
+					if(!$(this).is(":checked")){
+						$(this).click();
+					}
+				}else{
+					if($(this).is(":checked")){
+						$(this).click();
+					}
+				}		
+			});
+		});
+		
+		$('.resourceAll').unbind().bind("change", function () {
+			var table = $("table#resources");
+			var set = $('tbody > tr > td:nth-child(1) input[type="checkbox"]', table);
+			var checked = $(this).is(":checked");
+			$(set).each(function () {
+				//$(this).attr("checked", checked);
+				if(checked){
+					if(!$(this).is(":checked")){
+						$(this).click();
+					}
+				}else{
+					if($(this).is(":checked")){
+						$(this).click();
+					}
+				}		
+			});
+		});	
+		//国际化
+		var i18nItems = $("[name_i18n=com_zte_ums_ict_pm_query]");
+		for(var i=0;i<i18nItems.length;i++){
+			var $item = $(i18nItems.eq(i));
+			var itemId = $item.attr('id');
+			var itemValue = $.i18n.prop(itemId);						
+			if(typeof($item.attr("title"))!="undefined"){
+				$item.attr("title", itemValue);
+			}else if(typeof($item.attr("placeholder"))!="undefined"){
+				$item.attr("placeholder", itemValue);
+			}else{
+				$item.text(itemValue);
+			}
+		}	
+	},
+	
+	queryRuleChanged: function(){
+		
+		pm.query.vmPmQuery.pmDataVisable=true;
+		pm.query.vmPmQuery.pmChartVisable=false;
+		pm.query.vmPmQuery.tableIconVisable=false;
+		pm.query.vmPmQuery.chartIconVisable=true;
+		pm.query.vmPmQuery.queryRuleVisable=false;
+		pm.query.vmPmQuery.clickDisplayGraphAlink();
+		
+		var resourcesToPut = [];
+		for(var i=0;i<pm.query.vmPmQuery.resourceSlected.length;i++){
+			for(var j=0;j<pm.query.vmPmQuery.resources.length;j++){
+				if(pm.query.vmPmQuery.resourceSlected[i] == pm.query.vmPmQuery.resources[j].id){
+					resourcesToPut.push(pm.query.vmPmQuery.resources[j]);
+					break;
+				}
+			}
+		}
+		
+		var postData = {
+		  "resourceTypeId": pm.query.vmPmQuery.selectedResourceTypeId,        
+		  "moTypeId": pm.query.vmPmQuery.selectedMoTypeId,        
+		  //"resources": pm.query.vmPmQuery.resourceSlected,	
+	      "resources": resourcesToPut,	  
+		  "counterOrIndexId": pm.query.vmPmQuery.selectedCounter,
+		  "granularity": pm.query.vmPmQuery.granularity,
+		  "beginTime": pm.query.vmPmQuery.beginTime,
+		  "endTime": pm.query.vmPmQuery.endTime,
+		  "pageNo": 0,
+		  "pageSize": 10
+		}
+		pm.query.vmPmQuery.$postData = postData;
+		$.ajax({
+			//async:false,
+			"type": 'post',
+			"url": "/api/umcpm/v1/historydataqueries",
+			"dataType": "json",
+			"data": JSON.stringify(postData),
+			"contentType": 'application/json; charset=utf-8',
+			"success": function (resp) {		
+				//if(resp.content[0]){
+				if(resp.data[0]){
+					//var datas = resp.content[0].datas;	
+					var datas = resp.data[0].datas;
+					//pm.query.vmPmQuery.$queryDataTableFields = pm.query.vmPmQuery.$queryDataTableFieldsBackup;
+					collectDataFields(datas);
+					//pm.query.vmPmQuery.postData = postData;
+					pm.query.vmPmQuery.$initTable();
+				}else{
+					collectDataFields([]);					
+					pm.query.vmPmQuery.$initTable();
+				}		
+			},
+			"error":function(resp){
+			
+			}
+		});			
+	},
+	
+	queryTabClicked: function (el, item) {		
+	
+		//取得测量任务详情
+		var modelItem = {};
+		$.ajax({
+			async: false,
+			"dataType": 'json',
+			"type": "GET",
+			"url": "/api/umcpm/v1/meatasks/" + el.id,
+			"data": null,
+			"contentType": 'application/json; charset=utf-8',
+			"success": function (res, textStatus, jqXHR) {
+				modelItem = res;
+			},
+			"error": function () {
+			}
+		});
+	
+		pm.query.vmPmQuery.pmDataVisable=true;
+		pm.query.vmPmQuery.pmChartVisable=false;
+		pm.query.vmPmQuery.tableIconVisable=false;
+		pm.query.vmPmQuery.chartIconVisable=true;
+		pm.query.vmPmQuery.queryRuleVisable=false;
+		//vmPmQuery.boxVisible= false;
+		pm.query.vmPmQuery.tableTitle=modelItem.name + " " + $.i18n.prop('com_zte_ums_ict_pm_query_result');   
+
+		//取得指标
+		var getData = [];
+		getData.push({
+			name: "resourceTypeId",
+			value: modelItem.resourceType.id
+		});
+		getData.push({
+			name: "moTypeId",
+			value: modelItem.moType.id
+		});
+		var counterOrIndexId = [];
+		var MoTypeId = modelItem.moType.id;
+		/* $.ajax({
+			async: false,
+			"dataType": 'json',
+			"type": "GET",
+			//"url": "/api/umcpm/v1/motypes/indexes",
+			"url": "/api/umcpm/v1/indexes",
+			"data": getData,
+			"contentType": 'application/json; charset=utf-8',
+			"success": function (res, textStatus, jqXHR) {
+				for(var i=0;i<res.length;i++){
+					counterOrIndexId.push(res[i].id);
+				}
+			},
+			"error": function () {
+			}
+		}); */
+		var url="/api/umcpm/v1/motypes/" + MoTypeId + "/counters";
+		var data={};
+		data.moTypeId=MoTypeId;
+		$.ajax({
+			"type": 'get',
+			"url": url,
+			"dataType": "json",
+			data:data,
+			 "async": false,
+			"success": function (res) {
+				for(var i=0;i<res.length;i++){
+					counterOrIndexId.push(res[i].id);
+				}
+			},
+			"error":function(res){
+				counterOrIndexId=[]; 				
+			}
+		}); 
+		
+		var resources=[];
+		for(var i=0;i<modelItem.resources.length;i++){
+			var resource = {};
+			resource.id = modelItem.resources[i].id;
+			resource.name = modelItem.resources[i].name;
+			resource.resType = modelItem.resources[i].resType;
+			resources.push(resource);
+		}
+		var postData = {
+		  "resourceTypeId": modelItem.resourceType.id,        
+		  "moTypeId": modelItem.moType.id,        
+		  "resources": resources,	  
+		  "counterOrIndexId": counterOrIndexId,
+		  "granularity": modelItem.granularity,
+		  "beginTime": modelItem.beginTime,
+		  "endTime": modelItem.endTime,
+		  "pageNo": 0,
+		  "pageSize": 10
+		}
+		pm.query.vmPmQuery.$postData = postData;		
+		$.ajax({
+			//async:false,
+			"type": 'post',
+			"url": "/api/umcpm/v1/historydataqueries",
+			"dataType": "json",
+			"data": JSON.stringify(postData),
+			"contentType": 'application/json; charset=utf-8',
+			"success": function (resp) {		
+				//if(resp.content[0]){
+				if(resp.data[0]){
+					//var datas = resp.content[0].datas;	
+					var datas = resp.data[0].datas;
+					//pm.query.vmPmQuery.$queryDataTableFields = pm.query.vmPmQuery.$queryDataTableFieldsBackup;					
+					collectDataFields(datas);					
+					pm.query.vmPmQuery.$initTable();
+				}else{
+					collectDataFields([]);					
+					pm.query.vmPmQuery.$initTable();
+				}		
+			},
+			"error":function(resp){
+			
+			}
+		});				
+	},
+	clickSelectedCommonCond: function () {
+	   //显示统计图;
+	},			
+	clickDisplayGraphAlink: function () {
+		pm.query.vmPmQuery.boxVisible = !pm.query.vmPmQuery.boxVisible;
+	},	
+	showPerformanceChart: function () {
+		drawPerformanceChart();
+		pm.query.vmPmQuery.pmDataVisable=false;
+		pm.query.vmPmQuery.pmChartVisable=true;
+		pm.query.vmPmQuery.tableIconVisable=true;
+		pm.query.vmPmQuery.chartIconVisable=false;
+	},
+	showPerformanceTable: function () {
+		pm.query.vmPmQuery.pmDataVisable=true;
+		pm.query.vmPmQuery.pmChartVisable=false;
+		pm.query.vmPmQuery.tableIconVisable=false;
+		pm.query.vmPmQuery.chartIconVisable=true;
+	},
+	$queryDataTableFields: [		
+		{
+			"mData": "beginTime",
+			sWidth: "10%",
+			name: $.i18n.prop('com_zte_ums_ict_pm_query_start_time'),
+			"fnRender": pmUtil.timeRender
+		},
+		{
+			"mData": "endTime",
+			sWidth: "10%",
+			name: $.i18n.prop('com_zte_ums_ict_pm_query_end_time'),
+			"fnRender": pmUtil.timeRender
+		},		
+		{
+			"mData": "granularity",
+			sWidth: "10%",
+			name: $.i18n.prop('com_zte_ums_ict_pm_query_granularity')
+		},
+		{
+			"mData": "resourceType.name",
+			sWidth: "15%",
+			name: $.i18n.prop('com_zte_ums_ict_pm_query_resource_type')
+		},
+		{
+			"mData": "resource.name",
+			sWidth: "15%",
+			name: $.i18n.prop('com_zte_ums_ict_pm_query_resource_name')
+		}
+	] ,
+	$language: {
+		"sProcessing": "<img src='../common/thirdparty/data-tables/images/loading-spinner-grey.gif'/><span>&nbsp;&nbsp;处理中...</span>",
+		"sLengthMenu": $.i18n.prop("ngict-log-iui-table-sLengthMenu"),
+		"sZeroRecords": $.i18n.prop("ngict-log-iui-table-sZeroRecords"),
+		"sInfo": "<span class='seperator'>  </span>" + $.i18n.prop("ngict-log-iui-table-sInfo"),
+		"sInfoEmpty": $.i18n.prop("ngict-log-iui-table-sInfoEmpty"),
+		"sGroupActions": $.i18n.prop("ngict-log-iui-table-sGroupActions"),
+		"sAjaxRequestGeneralError":$.i18n.prop("ngict-log-iui-table-sAjaxRequestGeneralError"),
+		"sEmptyTable": $.i18n.prop("ngict-log-iui-table-sEmptyTable"),
+		"oPaginate": {
+			"sPrevious": $.i18n.prop("ngict-log-iui-table-sPrevious"),
+			"sNext": $.i18n.prop("ngict-log-iui-table-sNext"),
+			"sPage": $.i18n.prop("ngict-log-iui-table-sPage"),
+			"sPageOf": $.i18n.prop("ngict-log-iui-table-sPageOf")
+		}
+	},
+	$initTable: function () {
+		var setting = {};
+		setting.language = this.$language;
+		setting.columns = this.$queryDataTableFields;
+		setting.pageHtml="r<'table-scrollable't><'row page-info-bottom'<'col-md-12 col-sm-12'lip>>>";
+		//setting.restUrl ="/api/umcpm/v1/indexes";
+		//setting.restUrl ="../../json/thresholdList.json";
+		setting.restUrl = "/api/umcpm/v1/historydataqueries";
+		setting.tableId = "ict_pm_data";
+		serverPageTable.initDataTable(setting,  'ict_pm_data_div' );		
+	}
+});
+
+pm.query.vmPmQuery.resourceSlected.$watch("length", function(newValue, oldValue){
+   var resourceSlected = pm.query.vmPmQuery.resourceSlected;
+   //pm.query.vmPmQuery.resourceSlectedObjs = [];
+   var resourceSlectedObjs = [];
+   for(var i=0;i<resourceSlected.length;i++){
+		//var obj = getObjById(resourceSlected[i], pm.query.vmPmQuery.resources);
+		var obj = $.extend(true, {}, pm.query.vmPmQuery.resourcesMap[resourceSlected[i]]);
+		//pm.query.vmPmQuery.resourceSlectedObjs.push(obj);
+		resourceSlectedObjs.push(obj);
+   }
+   //给绑定变量一次性赋值，否则非常慢
+   //pm.query.vmPmQuery.resourceSlectedObjs = $.extend(true, [], resourceSlectedObjs);
+   pm.query.vmPmQuery.resourceSlectedObjs=[];
+   for(var j=0;j<resourceSlectedObjs.length;j++){
+	   pm.query.vmPmQuery.resourceSlectedObjs.push(resourceSlectedObjs[j]);
+   }
+});
+
+function getObjById(id,array){
+   for(var i=0;i<array.length;i++){
+	  if(array[i].id==id){
+		 return array[i];
+	  }
+   }
+}
+	
+avalon.scan();
+
+//取得任务列表
+var queryViewData;
+$.ajax({
+	async: false,
+	"dataType": 'json',
+	"type": "GET",
+	"url": "/api/umcpm/v1/meatasks",
+	//"url": "../../js/meatask/testList.json",
+	"data": null,
+	"contentType": 'application/json; charset=utf-8',
+	"success": function (res, textStatus, jqXHR) {
+		//queryViewData = res.content;
+		queryViewData = res;
+	},
+	"error": function () {
+	}
+});
+
+pm.query.vmPmQuery.pmQueries = transformQueryViewData(queryViewData, 8);
+
+/* var postData = {
+  "resourceTypeId": "vnf.cn.cscf",        
+  "moTypeId": "vnf.cn.cscf.metrictype",        
+  "resources": [
+	{
+	  "id": "vnf.cn.cscf.001",
+	  "name": "cscf001",
+	  "resType": "vnf.cn.cscf"
+	}
+  ],	  
+  "counterOrIndexId": [
+	"001"
+  ],
+  "granularity": 900,
+  "beginTime": 1449023738672,
+  "endTime": 1449023738672
+} */
+
+var queryDataTableFieldsBackup = [		
+	{
+		"mData": "beginTime",
+		sWidth: "10%",
+		name: $.i18n.prop('com_zte_ums_ict_pm_query_start_time'),
+		"fnRender": pmUtil.timeRender
+	},
+	{
+		"mData": "endTime",
+		sWidth: "10%",
+		name: $.i18n.prop('com_zte_ums_ict_pm_query_end_time'),
+		"fnRender": pmUtil.timeRender
+	},		
+	{
+		"mData": "granularity",
+		sWidth: "10%",
+		name: $.i18n.prop('com_zte_ums_ict_pm_query_granularity')
+	},
+	{
+		"mData": "resourceType.name",
+		sWidth: "15%",
+		name: $.i18n.prop('com_zte_ums_ict_pm_query_resource_type')
+	},
+	{
+		"mData": "resource.name",
+		sWidth: "15%",
+		name: $.i18n.prop('com_zte_ums_ict_pm_query_resource_name')
+	}
+];
+
+//pm.query.vmPmQuery.$initTable();
+function  fnServerData(sSource, aoData, fnCallback, oSettings) {
+	
+	var oPaging = oSettings.oInstance.fnPagingInfo();
+	var pageLength = oPaging.iLength;
+	var curPageNo = oPaging.iPage;
+	
+	pm.query.vmPmQuery.$postData.pageNo = curPageNo;
+	pm.query.vmPmQuery.$postData.pageSize = pageLength;
+	
+	oSettings.jqXHR = $.ajax({
+		"type": 'post',
+		//"type": 'get',
+		"url": sSource,
+		//"url": "../../js/meatask/testMulti1.json",
+		"dataType": "json",
+		"data": JSON.stringify(pm.query.vmPmQuery.$postData),
+		"contentType": 'application/json; charset=utf-8',
+		"success": function (resp) {
+			oSettings.iDraw = oSettings.iDraw + 1;
+			var data = {};
+			//添加动态列
+			//for(var i=0;i<resp.content.length;i++){
+			for(var i=0;i<resp.data.length;i++){
+				//var row = resp.content[i];
+				var row = resp.data[i];
+				for(var j=0;j<row.datas.length;j++){
+					row["counterOrIndex" + row.datas[j].counterOrIndexId] = row.datas[j].value;
+				}
+			}
+			/* data.aaData = resp.content;			
+			data.iTotalRecords = resp.content.length;
+            data.iTotalDisplayRecords = resp.content.length; */
+			data.aaData = resp.data;			
+			data.iTotalRecords = resp.totalCout;
+            data.iTotalDisplayRecords = resp.totalCout;
+			data.sEcho = oSettings;					
+			fnCallback(data);			
+		},
+		"error":function(resp){
+		
+		}
+	});
+}
+
+/* var tableFieldsMap = {
+	beginTime: "开始时间",
+	endTime: "结束时间"	
+}; */
+
+function collectDataFields(datas){
+	pm.query.vmPmQuery.$queryDataTableFields = [];
+	for(var i=0;i<queryDataTableFieldsBackup.length;i++){
+		pm.query.vmPmQuery.$queryDataTableFields.push(queryDataTableFieldsBackup[i]);
+	}	
+	for(var i=0;i<datas.length;i++){
+		if(!datas[i].name){
+			datas[i].name="测试列"
+		}		
+		pm.query.vmPmQuery.$queryDataTableFields.push({
+				//"mData": "datas["+ i +"].value",
+				//"mData": "datas.value",
+				//"mData": "datas",
+				"mData": "counterOrIndex" + datas[i].counterOrIndexId,
+				sWidth: "10%",
+				name: datas[i].counterOrIndexName
+				//,fnRender: pmUtil.indexValue
+		});
+	}
+}
+
+/* function tranverseObjFields(obj){
+	for(var p in obj){ 
+		if(typeof(obj[p])!="function" && tableFieldsMap[p]){
+			if(obj[p]){
+				
+			}
+			pm.query.vmPmQuery.$queryDataTableFields.push({
+				"mData": p,
+				sWidth: "10%",
+				name: tableFieldsMap[p]
+			})
+		} 
+	} 
+} */
+
+function transformQueryViewData(queryViewData, pageSize) {
+    var newData = [];
+    var pageNo = Math.floor(queryViewData.length / pageSize) + 1;
+	if(queryViewData.length % pageSize == 0){
+		pageNo--;
+	}
+    for (var i = 0; i < pageNo; i++) {
+        newData.push({array: []});
+    }
+    for (var j = 0; j < queryViewData.length; j++) {
+        newData[Math.floor(j / pageSize)].array.push(queryViewData[j]);
+    }
+    return newData;
+}
+    
+setTimeout(function(){
+	$($(".item", $(".carousel-inner"))[0]).addClass("active");
+	pmUtil.setDateRange("queryTimeRange");
+}, 100);
+
+newIndexWizard = function (idx,action) {	    
+          //获取资源类型
+		//getResTypeArray();
+		var resourceTypeId;
+		var moTypeId;
+         
+		//默认取资源第一个的测量类型
+		/* if(pm.query.vmPmQuery.resTypeArray && pm.query.vmPmQuery.resTypeArray.length>0){
+			pm.query.vmPmQuery.selectedResourceType=pm.query.vmPmQuery.resTypeArray[0].name;
+			resourceTypeId=pm.query.vmPmQuery.resTypeArray[0].id;
+			pm.query.vmPmQuery.selectedDataType=pm.query.vmPmQuery.dataTypeArray[0].name;
+			getMoTypeArray( pm.query.vmPmQuery.resTypeArray[0].id);
+			getCounterArray(resourceTypeId,moTypeId);
+		} */
+}();
+
+function  getResTypeArray(){
+	var url="/api/umcpm/v1/resourcetypes";
+	$.ajax({
+		"type": 'get',
+		"url": url,
+		"dataType": "json",
+		 "async": false,
+		"success": function (resp) {
+			//pm.query.vmPmQuery.resTypeArray= resp.content;
+			pm.query.vmPmQuery.resTypeArray= resp;
+		},
+		"error":function(resp){
+		  // pm.index.vm.ResTypeArray=resp; 
+		}
+	});
+}
+
+function  getMoTypeArray(resourceTypeId){
+	if(resourceTypeId){
+	//获取测量类型
+	var url="/api/umcpm/v1/motypes";
+	var data={};
+	data.resourceTypeId=resourceTypeId;
+	$.ajax({
+		"type": 'get',
+		"url": url,
+		data:data,
+		"dataType": "json",
+		 "async": false,
+		"success": function (resp) {
+			//pm.query.vmPmQuery.moTypeArray= resp.content;
+			pm.query.vmPmQuery.moTypeArray= resp;
+		},
+		"error":function(resp){
+			pm.query.vmPmQuery.moTypeArray=[]; 
+			//for test
+			/* var res = {"message":null,"content":[{"name":"性能KPI-1","id":"ns.cn.ims.metrictype"},{"name":"性能KPI-2","id":"ns.cn.ims.metrictype1"},{"name":"性能KPI-3","id":"ns.cn.ims.metrictype2"},{"name":"性能KPI-4","id":"ns.cn.ims.metrictype3"},{"name":"性能KPI-5","id":"ns.cn.ims.metrictype4"}],"status":0};
+			pm.query.vmPmQuery.moTypeArray = res.content; */
+		}
+	}); 
+	}
+}
+
+function  getCounterArray(MoTypeId){
+	if(MoTypeId){
+		var url="/api/umcpm/v1/motypes/"+MoTypeId+"/counters";
+		var data={};
+		data.moTypeId=MoTypeId;
+		$.ajax({
+			"type": 'get',
+			"url": url,
+			"dataType": "json",
+			data:data,
+			 "async": false,
+			"success": function (resp) {
+				//pm.query.vmPmQuery.counterArray= resp.content;
+				pm.query.vmPmQuery.counterArray= resp;
+				//默认全选
+				pm.query.vmPmQuery.selectedCounter = [];
+				for(var i=0;i<resp.length;i++){
+					pm.query.vmPmQuery.selectedCounter.push(resp[i].id);
+				}
+			},
+			"error":function(resp){
+				pm.query.vmPmQuery.counterArray=[]; 
+				//for test
+				/* var res = {"message":null,"content":[{"dataType":null,"name":"总用户数","id":"ns.cn.epc.businesskpi.totalUsers"},{"dataType":null,"name":"总用户数","id":"ns.cn.ims.businesskpi.totalUsers"},{"dataType":null,"name":"平均CPU使用率%","id":"vnf.runtimeInfo.averageCpuUsage"},{"dataType":null,"name":"平均内存使用率%","id":"vnf.runtimeInfo.averageMemoryUsage"},{"dataType":null,"name":"总用户数","id":"vnf.cn.cscf.businesskpi.totalUsers"}],"status":0};
+				pm.query.vmPmQuery.counterArray = res.content; */
+			}
+		}); 
+	}
+}
+
+function getIdFromName(name,array){
+   for(var i=0;i<array.length;i++){
+	  if(array[i].name==name){
+		 return array[i].id;
+	  }
+   }
+}
+function getNameFromId(id,array){
+   for(var i=0;i<array.length;i++){
+	  if(array[i].id==id){
+		 return array[i].name;
+	  }
+   }
+}
+function getObjFromId(id,array){
+   for(var i=0;i<array.length;i++){
+	  if(array[i].id==id){
+		 return array[i];
+	  }
+   }
+   return "";
+}
+function getObjFromName(name,array){
+   for(var i=0;i<array.length;i++){
+	  if(array[i].name==name){
+		 return array[i];
+	  }
+   }
+}
+
+/* function allCheckbox(obj) {
+	var isChecked = obj.checked;
+	var tableId = $(obj).parents(".table").attr("id");
+	$('td.checkBoxInFirstCol', $("#" + tableId)).each(function() {
+		var temp = $(this).children('input');
+		temp[0].checked = isChecked;
+	});
+} */
+
+
diff --git a/openo-portal/portal-performance/src/main/webapp/performance/js/pmUtil.js b/openo-portal/portal-performance/src/main/webapp/performance/js/pmUtil.js
new file mode 100644
index 00000000..2e993fe2
--- /dev/null
+++ b/openo-portal/portal-performance/src/main/webapp/performance/js/pmUtil.js
@@ -0,0 +1,473 @@
+/*
+ * Copyright 2016, CMCC Technologies Co., Ltd.
+ *
+ * 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.
+ */
+var pmUtil = {};
+function html_encode(str) {
+    vars = "";
+    if (str.length == 0)return "";
+    s = str.replace(/&/g, "&amp;");  //1
+    s = s.replace(/</g, "&lt;");
+    s = s.replace(/>/g, "&gt;");
+    s = s.replace(/ /g, "&nbsp;");
+    s = s.replace(/\'/g, "&#39;");
+    s = s.replace(/\"/g, "&quot;");
+    s = s.replace(/\n/g, "<br>");
+    return s;
+};
+pmUtil.indexOperate = function (obj) {
+    
+	var aIndex={};
+	aIndex.id=obj.aData.id;
+	aIndex.name=obj.aData.indexName;
+	aIndex.dataType=obj.aData.indexDataType;
+	aIndex.indexDes=obj.aData.indexDes;
+	aIndex.strExpression=obj.aData.strExpression;
+	aIndex.resourceType=obj.aData.resourceType;
+	aIndex.moType=obj.aData.moType;
+	var index = html_encode(JSON.stringify(aIndex));
+    var indexId = obj.aData.id;
+    var innerHtml =  "<div class='table-btn'><span class='modify_user'><a class=\"btn-xs grey btn-editable\" href='#' onclick=\"pmUtil.modifyIndex('"+index+"')\"><i class=\"ict-modify\"></i>" + $.i18n.prop('com_zte_ums_ict_pm_action_modify') +
+	"</a></span><span><a href='#' class=\"btn-xs grey btn-editable\" onclick=\"pmUtil.deleteIndex('" +
+	indexId + "','"+obj.aData.moType.id+"')\"><i class=\"ict-delete\"></i>" + $.i18n.prop('com_zte_ums_ict_pm_action_delete') + "</a></span></div>";	
+
+    return innerHtml;
+};
+pmUtil.dataTypeRender = function (obj) {
+    var record = obj.aData;
+	obj.aData.indexDataType=obj.aData.dataType;
+    var innerHtml = "<span>"+$.i18n.prop(record.dataType)+"</span>"
+    return innerHtml;
+};
+pmUtil.indexNameLink = function (obj) {
+	var index = html_encode(JSON.stringify(obj.aData));
+	obj.aData.indexName=obj.aData.name;
+	return "<a  id='indexName' href='#' onclick=\"pmUtil.queryIndex('"+index+"')\">" + obj.aData.name + "</a>";
+};
+pmUtil.queryIndex=function(index){
+    
+       newIndexWizard(commonUtil.strToJson(index),"query");
+	   pm.index.vm.title="查看指标";
+	   $(".form-group").attr("disabled",true);
+	   pm.index.vm.viewVisible=false;
+	   pm.index.vm.rtnVisible=true;
+       pm.index.vm.indexVisible=true;
+};
+pmUtil.addIndex=function(){
+    
+       newIndexWizard();
+	   pm.index.vm.title="新建指标";
+	   pm.index.vm.viewVisible=false;
+       pm.index.vm. indexVisible=true;
+};
+pmUtil.modifyIndex=function(index){
+    
+       newIndexWizard(commonUtil.strToJson(index));
+	   pm.index.vm.title="修改指标";
+	   pm.index.vm.viewVisible=false;
+       pm.index.vm.indexVisible=true;
+};
+pmUtil.deleteIndex=function(indexId,moTypeId){
+        bootbox.confirm($.i18n.prop('com_zte_ums_ict_sm_confirmToDeleteIndex'), function (result) { 
+		if (result) {
+		    var ids=[];
+			var del={};
+			ids.push(indexId);
+			del.ids=ids;
+			$.ajax({			
+			"dataType": 'json',
+			"type": "DELETE",
+			"url": "/api/umcpm/v1/motype/"+moTypeId+"/indexes",
+			"data" : JSON.stringify(del),
+			"contentType": 'application/json; charset=utf-8',
+			"success": function (res, textStatus, jqXHR) {
+				window.location.href="./indexView.html";
+			},
+			"error": function () {
+			}
+		});
+		}
+	});
+}
+
+pmUtil.idLink = function (obj) {
+	var record = obj.aData;
+    var thresholdId = new String(record.id);
+	return "<a href='#' onclick=\"pm.threshold.vm.queryThreshold('" + thresholdId + "')\">" + thresholdId + "</a>";
+}
+
+pmUtil.congfirmDel = function (obj) {
+	bootbox.confirm($.i18n.prop('com_zte_ums_ict_sm_confirmToDeleteThreshold'), function (result) { 
+		if (result) {
+			pm.threshold.vm.deleteThreshold(obj);
+		}
+	});
+}
+
+pmUtil.allOperate = function (obj) {
+	
+    var record = obj.aData;
+    var thresholdId = record.id;
+	//此时的id字段已经被渲染成html片段，如<a href="#" onclick="pm.threshold.vm.queryThreshold('10001')">10001</a>需要提取id
+	thresholdId = thresholdId.substring(thresholdId.indexOf("('") + 2, thresholdId.indexOf("')"));
+	
+    var innerHtml = "";
+	
+	innerHtml = "<div class='table-btn'><span class='modify_user'><a class=\"btn-xs grey btn-editable\" href='#' onclick=\"pm.threshold.vm.modifyThreshold('" +
+	thresholdId + "')\"><i class=\"ict-modify\"></i>" + $.i18n.prop('com_zte_ums_ict_pm_action_modify') +
+	"</a></span><span><a href='#' class=\"btn-xs grey btn-editable\" onclick=\"pmUtil.congfirmDel('" +
+	thresholdId + "')\"><i class=\"ict-delete\"></i>" + $.i18n.prop('com_zte_ums_ict_pm_action_delete') + "</a></span></div>";	
+
+    return innerHtml;
+}
+
+//获取QueryId
+pmUtil.getUrlParam=function(name){
+		var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
+		var search =decodeURIComponent(location.search.substring(1)); //decodeURIComponent() 函数可对 encodeURIComponent() 函数编码的 URI 进行解码。
+		var r =search.match(reg);  //匹配目标参数
+		if (r != null) return unescape(r[2]); //unescape() 函数可对通过 escape() 编码的字符串进行解码。
+		return null; //返回参数值
+}
+
+
+pmUtil.addMeatask = function() {
+    newMeataskWizard();
+    pm.meatask.vm.pageTitle="新建任务";
+    pm.meatask.vm.viewVisible=false;
+    pm.meatask.vm.createMeataskVisible=true;
+    pm.meatask.vm.queryMeataskVisible=false;
+}
+
+pmUtil.meataskOperate = function (obj) {
+    var record = obj.aData;
+    var meataskId = record.id;
+	//此时的id字段已经被渲染成html片段，如<a href="#" onclick="pm.threshold.vm.queryThreshold('10001')">10001</a>需要提取id
+	meataskId = meataskId.substring(meataskId.indexOf("('") + 2, meataskId.indexOf("')"));
+	
+    var innerHtml = "";
+	
+	innerHtml = 
+	[
+		"<div class=\"table-btn\">",
+			"<span class=\"modify_user\">",
+				"<a class=\"btn-xs grey btn-editable\" href=\"#\" onclick=\"pmUtil.queryMeatask('" + meataskId +
+					"')\"><i class=\"ict-Magnifier\"></i>",
+					$.i18n.prop('com_zte_ums_ict_pm_action_query'),
+				"</a>",
+			"</span>",
+			"<span class=\"modify_user\">",
+				"<a class=\"btn-xs grey btn-editable\" href=\"#\" onclick=\"pmUtil.modifyMeatask('" + meataskId + "'," + obj.iDataRow +
+					")\"><i class=\"ict-modify\"></i>",
+					$.i18n.prop('com_zte_ums_ict_pm_action_modify'),
+				"</a>",
+			"</span>",
+			"<span>",
+				"<a href=\"#\" class=\"btn-xs grey btn-editable\" onclick=\"pmUtil.deleteMeatask('" + meataskId + "'," + obj.iDataRow +
+					")\"><i class=\"ict-delete\"></i>",
+					$.i18n.prop('com_zte_ums_ict_pm_action_delete'),
+				"</a>",
+			"</span>",
+		"</div>"
+	].join("\n");
+    return innerHtml;
+}
+
+pmUtil.getActiveStatus = function(obj) {
+	var meataskId = obj.aData.id;
+	meataskId = meataskId.substring(meataskId.indexOf("('") + 2, meataskId.indexOf("')"));
+	var activeStatus = obj.aData.activeStatus;
+
+	var prefixStr = "";		
+	var suffixStr = "";	
+	if(activeStatus == 0){
+	    prefixStr = "<a  href='#' class=\"label label-sm label-danger\" onclick=\"pm.meatask.vm.changeActiveStatus('"; 
+	    suffixStr = ")\">暂停</a>";
+	}else{
+	    prefixStr = "<a href='#' class=\"label label-sm label-info\" onclick = \"pm.meatask.vm.changeActiveStatus('";
+	    suffixStr = ")\">激活</a>";
+	}
+
+	var innerHtml = prefixStr + meataskId + "'," + activeStatus + "," + obj.iDataRow + suffixStr;
+
+	return innerHtml;
+}
+
+pmUtil.granularityRender = function(obj) {
+	var data = obj.aData;
+	switch(data.granularity){
+		case (300): 
+			return "5分钟";
+		case (900): 
+			return "15分钟";
+		case (3600): 
+			return "1小时";
+	}
+	return "5分钟";
+}
+
+pmUtil.queryMeatask = function(meataskId) {
+	queryMeataskWizard("queryID");
+	pm.meatask.vm.pageTitle="查询任务";
+    pm.meatask.vm.viewVisible=false;
+    pm.meatask.vm.createMeataskVisible=false;
+    pm.meatask.vm.queryMeataskVisible=true;
+	
+	$("#queryMeataskSubmit").click(function() {
+        pm.meatask.vm.$showResultTable();
+    });
+}
+
+pmUtil.meataskIdLink = function(obj) {
+	var meatskId = obj.aData.id;
+	return "<a href='#' onclick=\"pmUtil.viewMeataskById('" + meatskId + "')\">" + meatskId + "</a>";
+}
+
+pmUtil.viewMeataskById = function(meatskId) {
+	newMeataskWizard(meatskId);
+    pm.meatask.vm.pageTitle="查看任务";
+    pm.meatask.vm.viewVisible=false;
+    pm.meatask.vm.createMeataskVisible=true;
+    pm.meatask.vm.queryMeataskVisible=false;
+}
+
+pmUtil.timeRender = function( obj ){
+    var time=obj.aData[obj.mDataProp];
+	if(time!="0"){
+    var date = new Date(obj.aData[obj.mDataProp]);
+    return commonUtil.parseDate(date , 'yyyy-MM-dd hh:mm:ss');
+	}
+};
+
+pmUtil.deleteMeatask=function(meataskId, row){
+	bootbox.confirm("确认删除此任务吗？", function (result) { 
+		if (result) {
+			$("#ict_meatask_table_div tr:eq("+(row+1)+")").attr('style', 'display:none;');
+		}
+	});
+}
+
+pmUtil.modifyMeatask = function(meataskId, row) {
+	modifyMeataskWizard("modifyID");
+    pm.meatask.vm.pageTitle="修改任务";
+    pm.meatask.vm.viewVisible=false;
+    pm.meatask.vm.createMeataskVisible=true;
+    pm.meatask.vm.queryMeataskVisible=false;
+}
+
+pmUtil.randomCPU = function() {
+	var percent = Math.random()*100;
+	percent = Math.round(percent);
+	return percent + "%";
+}
+
+pmUtil.calculateTime = function(obj) {
+	var data = obj.aData;
+	var time = data.beginTime + data.granularity;
+
+	if(time!="0"){
+    	var date = new Date(data.granularity * 1000 + obj.aData[obj.mDataProp]);
+    	return commonUtil.parseDate(date , 'yyyy-MM-dd hh:mm:ss');
+	}
+}
+
+pmUtil.queryMeatask = function(meataskId) {
+	pm.meatask.vm.pageTitle="查询任务";
+    pm.meatask.vm.viewVisible=false;
+    pm.meatask.vm.createMeataskVisible=false;
+    pm.meatask.vm.queryMeataskVisible=true;
+}
+
+pmUtil.setDateRange = function (dataRangeId, vm) {
+
+	var open = 'right';
+
+	//var month = $.i18n.prop('ngict-iui-dateRange-month');
+
+	var optionSet1 = {
+
+		//startDate: moment().subtract(179, 'days'),
+
+		//endDate: moment(),
+
+		startDate : "2015-12-31",
+
+		endDate : "2016-12-31",
+
+		//format: 'YYYY-MM-DD',
+		format : 'YYYY-MM-DD h:mm A',
+
+		dateLimit : {
+			days : 180
+		},
+
+		showWeekNumbers : false,
+
+		timePicker : true,
+		timePickerIncrement : 5,
+
+		opens : open,
+
+		separator : ' - ',
+
+		locale : {
+
+			applyLabel : $.i18n.prop('ngict-iui-dateRange-applyLabel'),
+
+			cancelLabel : $.i18n.prop('ngict-iui-dateRange-cancelLabel'),
+
+			fromLabel : $.i18n.prop('ngict-iui-dateRange-fromLabel'),
+
+			toLabel : $.i18n.prop('ngict-iui-dateRange-toLabel'),
+
+			customRangeLabel : $.i18n.prop('ngict-iui-dateRange-customRangeLabel'),
+
+			daysOfWeek : [
+
+				$.i18n.prop('ngict-iui-dateRange-Sunday'),
+
+				$.i18n.prop('ngict-iui-dateRange-Monday'),
+
+				$.i18n.prop('ngict-iui-dateRange-Tuesday'),
+
+				$.i18n.prop('ngict-iui-dateRange-Wednesday'),
+
+				$.i18n.prop('ngict-iui-dateRange-Thursday'),
+
+				$.i18n.prop('ngict-iui-dateRange-Friday'),
+
+				$.i18n.prop('ngict-iui-dateRange-Saturday')],
+
+			//monthNames : ['1' + month, '2' + month, '3' + month, '4' + month, '5' + month, '6' + month, '7' + month, '8' + month, '9' + month, '10' + month, '11' + month, '12' + month],
+			
+			//months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
+			
+			monthNames: [$.i18n.prop('ngict-iui-dateRange-Jan'),
+						 $.i18n.prop('ngict-iui-dateRange-Feb'),
+						 $.i18n.prop('ngict-iui-dateRange-Mar'),
+						 $.i18n.prop('ngict-iui-dateRange-Apr'),
+						 $.i18n.prop('ngict-iui-dateRange-May'),
+						 $.i18n.prop('ngict-iui-dateRange-Jun'),
+						 $.i18n.prop('ngict-iui-dateRange-Jul'),
+						 $.i18n.prop('ngict-iui-dateRange-Aug'),
+						 $.i18n.prop('ngict-iui-dateRange-Sep'),
+						 $.i18n.prop('ngict-iui-dateRange-Oct'),
+						 $.i18n.prop('ngict-iui-dateRange-Nov'),
+						 $.i18n.prop('ngict-iui-dateRange-Dec')],
+
+			firstDay : 1
+
+		}
+
+	};
+
+	//datarangepicker确认
+	$('input[id="' + dataRangeId + '"]').bind('apply.daterangepicker', function () {
+
+		//获取时间范围，查询
+
+		// 都设置为0点
+
+		pmUtil.setTime($(this));
+
+		// 更新tooltip内容
+		//$(this).attr("data-original-title", $(this).val());
+
+	});
+
+	$('input[id="' + dataRangeId + '"]').daterangepicker(optionSet1);
+
+};
+
+//daterangepicker设置时间
+pmUtil.setTime = function setTime($obj) {
+
+	//var title = $obj.attr('dtitle');
+
+	var arr = $obj.val().split(' - ');
+
+	//排除日历组件空字符串的情况。
+
+	if (arr[0] != '') {
+
+		var beginTime = new Date(arr[0].replace(/-/g, "/")).getTime();
+
+		var endTime = new Date(arr[1].replace(/-/g, "/")).getTime();
+		
+		pm.query.vmPmQuery.beginTime = beginTime;
+
+		pm.query.vmPmQuery.endTime = endTime;		
+
+	}
+
+}
+
+pmUtil.formatTime = function formatTime(ms) {
+	var date = new Date(ms);
+	return date.format("yyyy-MM-dd hh:mm:ss");
+}
+
+/*格式化日期*/
+
+Date.prototype.format = function (format) {
+
+	/*
+
+	 * format="yyyy-MM-dd hh:mm:ss";
+
+	 */
+
+	var o = {
+
+		"M+" : this.getMonth() + 1,
+
+		"d+" : this.getDate(),
+
+		"h+" : this.getHours(),
+
+		"m+" : this.getMinutes(),
+
+		"s+" : this.getSeconds(),
+
+		"q+" : Math.floor((this.getMonth() + 3) / 3),
+
+		"S" : this.getMilliseconds()
+
+	}
+
+	if (/(y+)/.test(format)) {
+
+		format = format.replace(RegExp.$1, (this.getFullYear() + "").substr(4
+
+					 - RegExp.$1.length));
+
+	}
+
+	for (var k in o) {
+
+		if (new RegExp("(" + k + ")").test(format)) {
+
+			format = format.replace(RegExp.$1, RegExp.$1.length == 1
+
+					 ? o[k]
+
+					 : ("00" + o[k]).substr(("" + o[k]).length));
+
+		}
+
+	}
+
+	return format;
+
+}
+\ No newline at end of file
diff --git a/openo-portal/portal-performance/src/main/webapp/performance/js/serverPageTable.js b/openo-portal/portal-performance/src/main/webapp/performance/js/serverPageTable.js
new file mode 100644
index 00000000..a67c50e8
--- /dev/null
+++ b/openo-portal/portal-performance/src/main/webapp/performance/js/serverPageTable.js
@@ -0,0 +1,232 @@
+/*
+ * Copyright 2016, CMCC Technologies Co., Ltd.
+ *
+ * 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.
+ */
+var serverPageTable = {};
+/* Bootstrap style full number pagination control */
+$.fn.dataTableExt.oApi.fnPagingInfo = function ( oSettings )
+{
+    return {
+        "iStart":         oSettings._iDisplayStart,
+        "iEnd":           oSettings.fnDisplayEnd(),
+        "iLength":        oSettings._iDisplayLength,
+        "iTotal":         oSettings.fnRecordsTotal(),
+        "iFilteredTotal": oSettings.fnRecordsDisplay(),
+        "iPage":          Math.ceil( oSettings._iDisplayStart / oSettings._iDisplayLength ),
+        "iTotalPages":    Math.ceil( oSettings.fnRecordsDisplay() / oSettings._iDisplayLength )
+    };
+};
+
+$.extend( $.fn.dataTableExt.oPagination, {
+    "bootstrap_extended": {
+        "fnInit": function( oSettings, nPaging, fnDraw ) {
+            var oLang = oSettings.oLanguage.oPaginate;
+            var oPaging = oSettings.oInstance.fnPagingInfo();
+
+            var fnClickHandler = function ( e ) {
+                e.preventDefault();
+                if ( oSettings.oApi._fnPageChange(oSettings, e.data.action) ) {
+                    fnDraw( oSettings );
+                }
+            };
+
+            $(nPaging).append(
+                '<div class="pagination-panel"> ' + oLang.sPage + ' ' +
+                '<a href="#" class="btn btn-sm default prev disabled" title="' + oLang.sPrevious + '"><i class="fa fa-angle-left"></i></a>' +
+                '<input type="text" class="pagination-panel-input input-mini input-inline input-sm" maxlenght="5" style="text-align:center; margin: 0 4px; border: 1px solid rgb(169, 169, 169);height: 28px;">' +
+                '<a href="#" class="btn btn-sm default next disabled" title="' + oLang.sNext + '"><i class="fa fa-angle-right"></i></a> ' +
+                oLang.sPageOf + ' <span class="pagination-panel-total"></span>' +
+                '</div>'
+            );
+
+            var els = $('a', nPaging);
+
+            $(els[0]).bind('click.DT', { action: "previous" }, fnClickHandler );
+            $(els[1]).bind('click.DT', { action: "next" }, fnClickHandler);
+
+            $('.pagination-panel-input', nPaging).bind('change.DT', function(e) {
+                var oPaging = oSettings.oInstance.fnPagingInfo();
+                e.preventDefault();
+                var page = parseInt($(this).val());
+                if (page > 0 && page < oPaging.iTotalPages) {
+                    if ( oSettings.oApi._fnPageChange(oSettings, page-1) ) {
+                        fnDraw( oSettings );
+                    }
+                } else {
+                    $(this).val(oPaging.iPage + 1);
+                }
+            });
+
+            $('.pagination-panel-input', nPaging).bind('keypress.DT', function(e) {
+                var oPaging = oSettings.oInstance.fnPagingInfo();
+                if (e.which == 13) {
+                    var page = parseInt($(this).val());
+                    if (page > 0 && page < oSettings.oInstance.fnPagingInfo().iTotalPages) {
+                        if ( oSettings.oApi._fnPageChange(oSettings, page-1) ) {
+                            fnDraw( oSettings );
+                        }
+                    } else {
+                        $(this).val(oPaging.iPage + 1);
+                    }
+                    e.preventDefault();
+                }
+            });
+        },
+
+        "fnUpdate": function ( oSettings, fnDraw ) {
+            var iListLength = 5;
+            var oPaging = oSettings.oInstance.fnPagingInfo();
+            var an = oSettings.aanFeatures.p;
+            var i, j, sClass, iStart, iEnd, iHalf=Math.floor(iListLength/2);
+
+            if ( oPaging.iTotalPages < iListLength) {
+                iStart = 1;
+                iEnd = oPaging.iTotalPages;
+            }
+            else if ( oPaging.iPage <= iHalf ) {
+                iStart = 1;
+                iEnd = iListLength;
+            } else if ( oPaging.iPage >= (oPaging.iTotalPages-iHalf) ) {
+                iStart = oPaging.iTotalPages - iListLength + 1;
+                iEnd = oPaging.iTotalPages;
+            } else {
+                iStart = oPaging.iPage - iHalf + 1;
+                iEnd = iStart + iListLength - 1;
+            }
+
+
+            for ( i=0, iLen=an.length ; i<iLen ; i++ ) {
+                var wrapper = $(an[i]).parents(".dataTables_wrapper");
+
+                if (oPaging.iTotalPages <= 0) {
+                    $('.pagination-panel, .dataTables_length', wrapper).hide();
+                } else {
+                    $('.pagination-panel, .dataTables_length', wrapper).show();
+                }
+
+                $('.pagination-panel-total', an[i]).html(oPaging.iTotalPages);
+                $('.pagination-panel-input', an[i]).val(oPaging.iPage + 1);
+
+                // Remove the middle elements
+                $('li:gt(1)', an[i]).filter(':not(.next)').remove();
+
+                // Add the new list items and their event handlers
+                for ( j=iStart ; j<=iEnd ; j++ ) {
+                    sClass = (j==oPaging.iPage+1) ? 'class="active"' : '';
+                    $('<li '+sClass+'><a href="#">'+j+'</a></li>')
+                        .insertBefore( $('li.next:first', an[i])[0] )
+                        .bind('click', function (e) {
+                            e.preventDefault();
+                            oSettings._iDisplayStart = (parseInt($('a', this).text(),10)-1) * oPaging.iLength;
+                            fnDraw( oSettings );
+                        } );
+                }
+
+                // Add / remove disabled classes from the static elements
+                if ( oPaging.iPage === 0 ) {
+                    $('a.prev', an[i]).addClass('disabled');
+                } else {
+                    $('a.prev', an[i]).removeClass('disabled');
+                }
+
+                if ( oPaging.iPage === oPaging.iTotalPages-1 || oPaging.iTotalPages === 0 ) {
+                    $('a.next', an[i]).addClass('disabled');
+                } else {
+                    $('a.next', an[i]).removeClass('disabled');
+                }
+            }
+        }
+    }
+} );
+serverPageTable.initDataTable = function( setting , divId ,pageInfos) {
+    serverPageTable.pageInfo = pageInfos;
+    //转换colomn
+
+    var column = setting.columns;
+    //先把原来的表格清空
+    $('#'+ divId).children().remove();
+    var tableId = setting.tableId;
+    var tableEleStr = '<table class="table table-striped table-bordered table-hover" id= '+ tableId + '>'
+        + '<thead>'
+        +'<tr role="row" class="heading" >'
+        + '</tr>'
+        + '</thead>'
+        +'<tbody>'
+        +'</tbody>'
+        +'</table>';
+    $('#'+ divId).append(tableEleStr);
+    //$('#'+ tableId).append(' <thead><tr role="row" class="heading" ></tr></thead><tbody></tbody>');
+    var trEle = $('#'+ tableId  + ' > thead >tr');
+    //var dataTableColumn = [];
+    for ( var one in column){
+        var th = '<th>' + column[one].name + '</th>';
+        trEle.append(th);
+    }
+	 serverPageTable.pageInfo = pageInfos;
+	if(!setting.pageHtml){
+	   pageHtml="<'row'<'col-md-12 col-sm-12'lip>r><'table-scrollable't>>";
+	}else{
+	  pageHtml=setting.pageHtml;
+	}
+    var table = $("#" + tableId).dataTable({
+        //"sDom" : "tr<'row'<'col-md-6 col-sm-12'><'col-md-6 col-sm-12'pli>>", // datatable layout
+        "sDom" : pageHtml,
+        "oLanguage": setting.language,//汉化
+        "bJQueryUI": true,
+        "bPaginate": true,// 分页按钮
+        "bFilter": false,// 搜索栏
+        "bAutoWidth":true,//自动设置列宽
+        "bLengthChange": true,// 每行显示记录数
+        "iDisplayLength": 10,// 每页显示行数
+        "bSort": false,// 排序
+        "bInfo": true,// Showing 1 to 10 of 23 entries 总记录数没也显示多少等信息
+        "bWidth": true,
+        "bScrollCollapse": true,
+        "sPaginationType": "bootstrap_extended", // 分页，一共两种样式 另一种为two_button // 是datatables默认
+        "bProcessing": true,
+        "bServerSide": true,
+        "bDestroy": true,
+        "bSortCellsTop": true,
+        "sAjaxSource": setting.restUrl,
+        "aoColumns": setting.columns,
+        "fnServerData": function (sSource, aoData, fnCallback, oSettings) {
+           fnServerData(sSource, aoData, fnCallback, oSettings);
+        }
+    });
+    $('#'+ tableId + '>tbody').on('click', 'td.details-control', function () {
+        var tr = $(this).closest('tr');
+        //var nTr = $(this).parents('tr')[0];
+        //var row = table.row( tr );
+        if ( table.fnIsOpen(tr[0]) ){
+            table.fnClose( tr[0] );
+        //if ( row.child.isShown() ) {
+            // This row is already open - close it
+            //row.child.hide();
+            tr.removeClass('shown');
+        }
+        else {
+            // Open this row
+            table.fnOpen( tr[0], format_Detail(table, tr[0],column) );
+            //row.child( format_Detail(row.data()) ).show();
+            tr.addClass('shown');
+        }
+    } );
+    return table; 
+
+
+};
+
+
+
+
diff --git a/openo-portal/portal-performance/src/main/webapp/performance/performance_query_rule.html b/openo-portal/portal-performance/src/main/webapp/performance/performance_query_rule.html
new file mode 100644
index 00000000..2020c73e
--- /dev/null
+++ b/openo-portal/portal-performance/src/main/webapp/performance/performance_query_rule.html
@@ -0,0 +1,156 @@
+<!--
+    Copyright 2016, CMCC Technologies Co., Ltd.
+
+    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.
+-->
+<div class="container-fluid" id="meatask_queryRule_body" style="height:650px;background-color:#FFF;overflow-x:hidden;overflow-y:auto">
+	<form action="#" class="form-horizontal" id="meatask_queryRule_submit">
+		<div>
+			<div>
+				<div>
+					<div class="form-title">
+						<span id="com_zte_ums_ict_pm_query_time" name_i18n="openo_performance_i18n"></span>
+					</div>
+					<div class="row">
+						<div class="form-group" id="">
+							<label class="control-label col-xs-3">
+								<span id="com_zte_ums_ict_pm_query_time" name_i18n="openo_performance_i18n"></span>
+							</label>
+							<div id="taskTimeDiv" class="col-xs-4">
+								<input id="queryTimeRange"></input>
+							</div>
+						</div>
+						<div class="form-group col-xs-12" id="">
+							<label class="control-label col-xs-3">
+								<span id="com_zte_ums_ict_pm_query_granularity" name_i18n="openo_performance_i18n"></span>
+							</label>
+							<div class="btn-group circleBtn col-xs-4">
+								<div class="btn btnWhite circleBtn" ms-attr-id="el.id" ms-repeat-el="granularities" ms-class-blueActive="el.value" ms-click="granularityClicked(el ,this)">{{el.name}}</div>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="form-title">
+					<span id="com_zte_ums_ict_pm_query_resource_type" name_i18n="openo_performance_i18n"></span>
+				</div>
+				<div class="row">
+					<div class="form-group" id="">
+						<label class="control-label col-xs-3">
+							<span id="com_zte_ums_ict_pm_query_resource_type" name_i18n="openo_performance_i18n"></span>
+						</label>
+						<div class="col-xs-4">
+							<select id="resourceTypes" ms-duplex-String="selectedResourceType" class="selector-class" ms-change="resTypeSelectAction()">
+								<option ms-repeat-el="resTypeArray">{{el.name}}</option>
+							</select>
+						</div>
+					</div>
+				</div>
+				<div class="row">
+					<div class="form-group">
+						<label class="control-label col-xs-3">
+							<span id="com_zte_ums_ict_pm_query_moType" name_i18n="openo_performance_i18n"></span>
+						</label>
+						<div class="col-xs-4">
+							<select id="moTypes" ms-duplex-String="selectedMoType" class="selector-class" ms-change="moTypeSelectAction()">
+								<option ms-repeat-el="moTypeArray">{{el.name}}</option>
+							</select>
+						</div>
+					</div>
+				</div>
+				<div class="row">
+					<div class="form-group">
+						<label class="control-label col-xs-3"><span id="com_zte_ums_ict_pm_query_index" name_i18n="openo_performance_i18n"></span></label>
+						<div class="col-xs-6">
+							<table class="table table-striped table-bordered table-hover" cellpadding="0" cellspacing="0" border="0" id="indexes">
+								<thead>
+									<th role="row" width="3%" class="heading"><input type="checkbox" class="indexesAll"/></th>
+									<th role="row" class="heading"><span id="com_zte_ums_ict_pm_query_index" name_i18n="openo_performance_i18n"></span></th>
+								</thead>
+								<tbody>
+									<tr ms-repeat-elem="counterArray">
+										<td class="checkBoxInFirstCol">
+											<input ms-duplex-string="selectedCounter" type="checkbox" ms-attr-value="elem.id"/>
+										</td>
+										<td>{{elem.name}}</td>
+									<tr>
+								</tbody>
+							</table>
+						</div>
+					</div>
+				</div>
+				<div class="form-title">
+					<span id="com_zte_ums_ict_pm_query_target_resource" name_i18n="openo_performance_i18n"></span>
+				</div>
+				<div class="row">
+					<div class="form-group">
+						<label class="control-label col-xs-3"><span id="com_zte_ums_ict_pm_query_resource" name_i18n="openo_performance_i18n"></span></label>
+						<div class="col-xs-6 resourceList">
+							<table class="table table-striped table-bordered table-hover" cellpadding="0" cellspacing="0" border="0">
+								<thead>
+									<th role="row" class="heading"><span id="com_zte_ums_ict_pm_query_selected_resource" name_i18n="openo_performance_i18n"></span></th>
+								</thead>
+								<tbody>
+									<tr>
+										<td class="row">
+											<div class="col-xs-6 col-sm-4 col-md-4 col-lg-4" ms-repeat-elem="resourceSlectedObjs" data-repeat-rendered="clickSelectedCommonCond">
+												<div class="deleteIcon ict-close" ms-click="rmSelectedResource(elem ,this)"></div>
+												<div class="resourceObj">{{elem.name}}</div>
+											</div>
+										</td>
+									</tr>
+								</tbody>
+							</table>
+						</div>
+					</div>
+				</div>
+				<div class="row">
+					<div class="form-group col-xs-12 filterDiv">
+						<div class="col-xs-offset-3 col-xs-6">
+							<input id="resourcesToFilter" name="resourcesToFilter" placeholder="" name_i18n="openo_performance_i18n"/>
+						</div>
+					</div>
+				</div>
+				<div class="row">
+					<div class="form-group">
+						<div class="col-xs-offset-3 col-xs-6">
+							<table class="table table-striped table-bordered table-hover" cellpadding="0" cellspacing="0" border="0" id="resources">
+								<thead>
+									<th role="row" width="3%" class="heading"><input type="checkbox" class="resourceAll"/></th>
+									<th role="row" class="heading"><span id="com_zte_ums_ict_pm_threshold_resource_name" name_i18n="openo_performance_i18n"></span></th>
+								</thead>
+								<tbody>
+									<tr ms-repeat-elem="resources">
+										<td><input ms-duplex-string="resourceSlected" type="checkbox" ms-attr-value="elem.id" ms-attr-taskId="elem.id"/></td>
+										<td>{{elem.name}}</td>
+									<tr>
+								</tbody>
+							</table>
+						</div>
+					</div>
+				</div>
+				<div class="row">
+					<div class="form-group " id="">
+						<div class=" col-xs-offset-3 col-xs-4 form-actions btnGroup">
+							<a id="submit_in_queryRuleChanged" href="javascript:;" class="btn blue1 radius_l button-submit" ms-click="queryRuleChanged()">
+								<span id="com_zte_ums_ict_pm_action_query" name_i18n="openo_performance_i18n"></span>
+							</a>
+							<a href="javascript:;" ms-click="returnQueryPage()">
+								<span id="com_zte_ums_ict_pm_back" name_i18n="openo_performance_i18n"></span>
+							</a>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</form>
+</div>
diff --git a/openo-portal/portal-performance/src/main/webapp/performance/performance_view.html b/openo-portal/portal-performance/src/main/webapp/performance/performance_view.html
new file mode 100644
index 00000000..4b192c25
--- /dev/null
+++ b/openo-portal/portal-performance/src/main/webapp/performance/performance_view.html
@@ -0,0 +1,125 @@
+<!--
+    Copyright 2016, CMCC Technologies Co., Ltd.
+
+    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.
+-->
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="UTF-8">
+		<link href="../common/thirdparty/font-awesome/css/font-awesome.min.css" rel="stylesheet" id="font_awesome"/>
+		<link href="../common/thirdparty/bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
+		<link href="../common/thirdparty/uniform/css/uniform.default.css" rel="stylesheet"/>
+		<link href="../common/thirdparty/zTree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css">
+		<link href="../common/thirdparty/bootstrap-daterangepicker/daterangepicker-bs3.css" rel="stylesheet">
+		<link href="../common/css/plugins.css" rel="stylesheet" type="text/css">
+		<link href="../common/css/ZteIctIcons/style.css" rel="stylesheet" type="text/css"/>
+		<link href="../common/css/ngict-component.css" rel="stylesheet" type="text/css">
+		<link href="css/pmQueryBox.css" rel="stylesheet" type="text/css">
+		<link href="css/performanceQuery.css" rel="stylesheet" type="text/css"/>
+		<link href="css/performanceChart.css" rel="stylesheet" type="text/css"/>
+	</head>
+	<body>
+		<div ms-controller="pmQueryController" class="ms-controller">
+			<div class="row" ms-visible="boxVisible">
+				<div class="row" style="margin-left: 15px;">
+					<div class="col-xs-6 col-md-6 col-sm-6 col-lg-6 titlefont">
+						<span id="com_zte_ums_ict_pm_query_data" name_i18n="openo_performance_i18n"></span>
+					</div>
+				</div>
+				<div class = "separator-line"></div>
+				<div class="row ruleNav" style="margin-left: 50px;width: 93%;">
+					<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="false">
+						<div class="carousel-inner" role="listbox">
+							<div class="item " ms-repeat-el="pmQueries">
+								<div class="col-xs-12" style=" padding-right: 20px; padding-top: 10px;">
+									<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 boxPadding" ms-repeat-elem="el.array" data-repeat-rendered="clickSelectedCommonCond" ms-click="queryTabClicked(elem ,this)">
+										<a href="#">
+											<div class="box" ms-class="boxStyle{{$index % 4 + 1}}">
+												<div class="subbox">
+													<div class="textImageStyle " ms-class="{{elem.textImage}}">
+														<span class="ict-cpu"></span>
+													</div>
+													<div class="set-title">{{elem.name}}</div>
+													<span class="ict-modify" ms-click="queryRuleView(event, elem)"></span>
+												</div>
+											</div>
+											<div class="col-md-12 separator-line separator-line-visibilty" ms-class="boxStyle{{$index % 4 + 1}}"></div>
+										</a>
+									</div>
+								</div>
+							</div>
+						</div>
+						<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
+							<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
+							<span class="sr-only">Previous</span>
+						</a>
+						<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next" style="margin-right: -10px;">
+							<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
+							<span class="sr-only">Next</span>
+						</a>
+					</div>
+				</div>
+				<div class="row-fluid separator">
+					<div ms-visible="boxVisible" class="col-xs-12" style="margin-top: 10px;">
+						<a href="#" id="upArrow" ms-click="clickDisplayGraphAlink()"><img src="image/up.png"/></a>
+					</div>
+				</div>
+			</div>
+			<div class="row-fluid separator">
+				<div ms-visible="!boxVisible" class="col-xs-12">
+					<a href="#" ms-click="clickDisplayGraphAlink()"><img src="image/down.png"/></a>
+				</div>
+			</div>
+			<div class="container-fluid">
+				<div class="row" style=" margin-top: 15px;">
+					<div class="col-xs-6 col-md-6 col-sm-6 col-lg-6 titlefont">
+						<span id="tableTitleText">{{tableTitle}}</span>
+						<a href="#" ms-visible="tableIconVisable"><img id="tableImg" src="image/table_icon.png" ms-click="showPerformanceTable()"></a>
+						<a href="#" ms-visible="chartIconVisable"><img id="chartImg" src="image/chart_icon.png" ms-click="showPerformanceChart()"></a>
+					</div>
+				</div>
+				<div class = "separator-line"></div>
+				<div class="row-fluid " data-name="table_zone">
+					<div ms-visible="pmChartVisable" id="chartCanvasDiv" style="width:1000px; height:600px;"></div>
+					<div ms-visible="pmDataVisable" id = 'ict_pm_data_div'></div>
+					<div ms-visible="queryRuleVisable" ms-include-src="'performance_query_rule.html'"></div>
+				</div>
+			</div>
+		</div>
+		<script src="../common/thirdparty/jquery/jquery-1.10.2.min.js"></script>
+		<script src="../common/thirdparty/jquery.i18n/jquery.i18n.properties-1.0.9.js"></script>
+		<script src="../common/js/international/loadi18n.js" type="text/javascript"></script>
+		<script src="../common/js/tools.js"></script>
+		<script>
+			loadi18n_WebFramework('web-performance-i18n', 'i18n/', 'openo_performance_i18n');
+		</script>
+		<script src="../common/thirdparty/data-tables/jquery.dataTables.js"></script>
+		<script src="../common/thirdparty/bootbox/bootbox.min.js"type="text/javascript"></script>
+		<script src="../common/thirdparty/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
+		<script src="../common/thirdparty/jquery-validation/js/jquery.validate.js"></script>
+		<script src="../common/thirdparty/jquery-validation/js/additional-methods.min.js"></script>
+		<script src="../common/thirdparty/echarts/echarts-all.js" type="text/javascript"></script>
+		<script src="../common/thirdparty/bootstrap-daterangepicker/moment.js"></script>
+		<script src="../common/thirdparty/bootstrap-daterangepicker/daterangepicker.js"></script>
+		<script src="../common/thirdparty/avalon/avalon.js"></script>
+		<script src="../common/js/security/aes.js" type="text/javascript"></script>
+		<script src="../common/js/security/framework-util.js" type="text/javascript"></script>
+		<script src="../common/js/json2.js"></script>
+		<script src="js/serverPageTable.js"></script>
+		<script src="js/pmUtil.js"></script>
+		<script src="js/commonUtil.js"></script>
+		<script src="js/performanceQueryController.js"></script>
+		<script src="js/performanceChart.js"></script>
+	</body>
+</html>
author	“shentao” <shentao@chinamobile.com>	2016-10-27 16:26:11 +0800
committer	“shentao” <shentao@chinamobile.com>	2016-10-27 16:26:11 +0800
commit	abe9f53436ef47d6d5bf1485fc5ddf53cae8850f (patch)
tree	05472370ca6f0e0ea36b4f9419071c6b7b72f3d3 /openo-portal/portal-performance
parent	ac67d7e8d6590299701b560559e332c6c48dc062 (diff)