仪表盘首页样式调整、告警列表调整

7 files changed, 131 insertions, 91 deletions

diff --git a/nezha-admin/src/main/resources/statics/css/dashboard.css b/nezha-admin/src/main/resources/statics/css/dashboard.css
index 502c69d3..f3dbcaa8 100644
--- a/nezha-admin/src/main/resources/statics/css/dashboard.css
+++ b/nezha-admin/src/main/resources/statics/css/dashboard.css
@@ -1,19 +1,8 @@
-	*{

-        margin: 0;

-        padding: 0;

-    }

-	.container{

-    width: 100% !important;

-    height: 100%;

-    display: flex;

-    flex-direction: column;

-}

-    .container .top{

-        width: 1600px;

-        height: 389px;

+    .preview .top{

+        max-width: 1920px;

    /**     background: #fff6fc; **/

     }

-    .container .bottom{

+     .bottom{

     /**    margin-top: 10px; **/

         width: 100%;

         min-height: 500px;

@@ -21,14 +10,14 @@
         overflow: hidden;

         position: relative;

     }

-    .container .bottom .left{

+     .bottom .left{

     	width:80px;

         /** background: #eaffeb; **/

         position: absolute;

         left: 0;

         top: 0;

     }

-    .container .bottom .left .btn{

+     .bottom .left .btn{

         width: 60px;

         height: 60px;

         background: aliceblue;

@@ -39,33 +28,33 @@
         padding: 0px 0px;

         margin-left: 10px;

     }

-    .container .bottom .right{

+     .bottom .right{

         flex-grow: 1;

         margin-left: 80px;

       /**  background: #e3f6ff; **/

     }

-    .container .bottom .ri-flex{

+     .bottom .ri-flex{

         display: flex;

         flex-direction: column;

         flex-wrap: wrap;

     }

-    .container .bottom .right .right_top{

+     .bottom .right .right_top{

         height: 50px;

         width: 100%;

         line-height: 20px;

         font-size:20px;

     }

-    .container .bottom .right .right-bottom{

+     .bottom .right .right-bottom{

        /*  min-height: 500px; */

         max-height: 788px;

         overflow-y: scroll;

 

     }

-    .container .bottom .right .right-bottom .box-parent{

+     .bottom .right .right-bottom .box-parent{

         width: 100%;

         height: auto;

     }

-    .container .bottom .right .right-bottom .box{

+     .bottom .right .right-bottom .box{

         height: auto;

         background: #F5F5F5;

         margin-bottom: 30px;

@@ -135,16 +124,49 @@
 	    height: 15px;

 	    width: 18px;

 	}

-	

+	.table-striped>tbody>tr:nth-of-type(even) {

+	    background-color: white;

+	}

 	.singleColor{

 		width:105px !important;

 	}

 	.gridster .preview-holder {

 	  border: none !important;

 	  border-radius: 0 !important;

-	  background: #488bdc !important;

+	  background: #aaa !important;

 	}

-	

+	.db-content>li {

+	background-color: white;

+}

+.db-header {

+	text-align: center;

+	height: 22px;

+	margin-bottom: 10px;

+}

+.db-header:hover {

+	cursor: move;

+	background-color: #f0f0f0;

+}

+.db-title {

+	position: relative;

+	display: inline-block;

+}

+.db-title>span:first-child {

+	font-size: 16px;

+	display: inline-block;

+	line-height: 22px;

+}

+.db-ops {

+	position: absolute;

+	color: #aaa;

+	display: none;

+	font-size: 12px;

+	left: 100%;

+	width: 44px;

+}

+.db-ops>i {

+	cursor: pointer;

+}

 	.table-condensed th {padding: 0; text-align:center;}

 	.table-condensed td {padding: 0 0 0 10px;}

 	.table th {line-height: 36px; height:36px;}

diff --git a/nezha-admin/src/main/resources/statics/css/nodeRoom.css b/nezha-admin/src/main/resources/statics/css/nodeRoom.css
index b5f309c3..ce608bb2 100644
--- a/nezha-admin/src/main/resources/statics/css/nodeRoom.css
+++ b/nezha-admin/src/main/resources/statics/css/nodeRoom.css
@@ -33,7 +33,10 @@
 .tr-normal {

     background-color: #FFFFFF;

 }

-

+.tr-op {

+	color: #999;

+	cursor: pointer;

+}

 .tr-item {

 	color: #337ab7;

 }

diff --git a/nezha-admin/src/main/resources/templates/js/modules/dashboard/dashboard.js b/nezha-admin/src/main/resources/templates/js/modules/dashboard/dashboard.js
index 31dbadc7..b32a6d90 100644
--- a/nezha-admin/src/main/resources/templates/js/modules/dashboard/dashboard.js
+++ b/nezha-admin/src/main/resources/templates/js/modules/dashboard/dashboard.js
@@ -73,6 +73,10 @@
 	        }

 	 	series.push(shamData);

 		/* 初始化点 线 柱图 */

+	 	var previewWidth = (top.$(".content").width()-50) + 'px';

+	 	var previewHeight = (top.$(".content").height()*0.35) + 'px';

+	 	document.getElementById("chart").style.width = previewWidth;

+	 	document.getElementById("chart").style.height = previewHeight;

         myChart = echarts.init(document.getElementById('chart'));

 

 		var colors = ['#5793f3', '#d14a61', '#DC143C'];

@@ -129,6 +133,8 @@
         myChart.setOption(option);

 		

         /* 初始化单值图  */

+        document.getElementById("singleChart").style.width = previewWidth;

+	 	document.getElementById("singleChart").style.height = previewHeight;

         singleChart=echarts.init(document.getElementById('singleChart'));

 		var angle = [220, -40]

 		singleOption = {

@@ -1269,9 +1275,6 @@
 		   	                resize: function (e, ui, $widget) {

 		   	                },

 		   	                stop: function (e, ui, $widget) {

-		    					$widget.find("div").eq(1).css('width',$widget[0].offsetWidth-50);

-		    					$widget.find("div").eq(1).css('height',$widget[0].offsetHeight-50);

-		    					

 		    					statisticals.forEach(function(value,key,arr){

 		    						$(value).resize()

 		    				    })

@@ -1279,6 +1282,9 @@
 		    				}

 		    			},

 		    	    }).data('gridster');

+		    		statisticals.forEach(function(value,key,arr){

+		    			$(value).resize()

+		    		})

 	    	    })

 			},

 			modifyPosition:function(){

@@ -1297,6 +1303,12 @@
 		            }

 	            })

 				

+			},

+			dbOpsShow: function(event) {

+				$(event.currentTarget).find(".db-ops").css("display", "inline-block");

+			},

+			dbOpsHide: function(event) {

+				$(event.currentTarget).find(".db-ops").css("display", "none");

 			}

 		},

 		created: function(){

diff --git a/nezha-admin/src/main/resources/templates/js/modules/detect/deteWarn.js b/nezha-admin/src/main/resources/templates/js/modules/detect/deteWarn.js
index 3d10461c..7dcb5b80 100644
--- a/nezha-admin/src/main/resources/templates/js/modules/detect/deteWarn.js
+++ b/nezha-admin/src/main/resources/templates/js/modules/detect/deteWarn.js
@@ -207,7 +207,7 @@ var warnComponet = Vue.extend({
             var parentTr=$("#"+temp.cap).parents('tr');
             var colSpan=parentTr.children('td').length;
             temp.overcoat='constom-td-'+temp.setId;
-            var emptyTr='<tr style="background-color: aliceblue;"><td colspan="'+colSpan+'" id="'+temp.overcoat+'"></td></tr>';
+            var emptyTr='<tr><td colspan="'+colSpan+'" id="'+temp.overcoat+'"></td></tr>';
             parentTr.after($(emptyTr))
 
             $("#"+temp.overcoat).append($(temp.bodyTabSelector));
diff --git a/nezha-admin/src/main/resources/templates/modules/dashboard/index.html b/nezha-admin/src/main/resources/templates/modules/dashboard/index.html
index 7cc89f9a..36993e22 100644
--- a/nezha-admin/src/main/resources/templates/modules/dashboard/index.html
+++ b/nezha-admin/src/main/resources/templates/modules/dashboard/index.html
@@ -9,28 +9,27 @@
 <style>

 </style>

 <body>

-<div id='dashboardView'>

+<div id='dashboardView' v-cloak>

 	<!-- 仪表盘操作以及展示页面 -->

 	<div v-show="!dashboardSetting">

-		<div class="grid-btn" style='margin-bottom: 5px;'>	

-			<div class="input-group col-sm-2" style="float:right !important">

+		<div class="tools">	

+			<!-- <a class="btn btn-default btn-search"  title="<@spring.message 'common.refresh'/>"><i class="fa fa-refresh"></i></a> -->

+			<a class="btn btn-primary" id="add" title="<@spring.message 'common.add'/>" @click="dashboardSetting=true"><i class="fa fa-plus"></i></a>

+			<a class="btn btn-primary"  title="<@spring.message 'common.edit'/>" @click="modifyPosition()" ><i class="fa fa-floppy-o"></i></i></a>

+			<!-- <div class="input-group col-sm-2" style="float:right !important">

 				<span class="input-group-addon" @click="$('#filterTime').click();"><i class="fa fa-calendar"></i></span>

 				<input type="text" class="form-control" id='filterTime' readonly  placeholder="<@spring.message 'dashboard.chooseTime'/>" style="width:300px;margin-bottom:0px">

-			</div>

-			<a class="btn btn-default" id="add" title="<@spring.message 'common.add'/>" @click="dashboardSetting=true"><i class="glyphicon glyphicon-plus"></i></a>

-			<a class="btn btn-default"  title="<@spring.message 'common.edit'/>" @click="modifyPosition()" ><i class="glyphicon glyphicon-floppy-disk"></i></i></a>

-			<a class="btn btn-default"  title="<@spring.message 'common.refresh'/>" @click="returnMenu()"><i class="glyphicon glyphicon-refresh"></i></a>

+			</div> -->

 		</div>

-		<hr style='margin-top: 0px; margin-bottom: 0px;'/>

 		<!-- 图表展示区 -->

 		<input style="display:none" id="dashboardId"/>

 		<div class="demo" id="showPanel"> 

 			<div class='gridster'>

-				<ul id='dashboardChartsShow'>

+				<ul id='dashboardChartsShow' class="db-content">

 					<template v-for='dashboard,index in dashboards'>

 						<li :data-row='dashboard.x' :data-col='dashboard.y' :data-sizex='dashboard.width/150' :data-sizey='dashboard.height/150' :id="dashboard.id">

-							<header style='position:relative'>

-								<a class='btn btn-default dropdown-toggle' data-toggle='dropdown' style='display:block;border:none;width:33.3%;margin:0 auto'>

+							<header class="db-header" @mouseenter="dbOpsShow" @mouseleave="dbOpsHide">

+								<!-- <a class='btn btn-default dropdown-toggle' data-toggle='dropdown' style='display:block;border:none;width:33.3%;margin:0 auto'>

 									<div style='text-align: center;'>

 										<span>{{dashboard.name}}</span> <span class='caret'></span>

 									</div>

@@ -39,11 +38,20 @@
 									<li><a href='#' @click='modifyDashboard(dashboard.id)'><@spring.message 'common.edit'/></a></li>

 									<li class='divider'></li>

 									<li><a href='#' @click='removeDashboard(dashboard.id)'><@spring.message 'common.delete'/></a></li>

-								</ul>

+								</ul> -->

+								<a><div></div></a>

+								<div class="db-title">

+									<span class="db-name">{{dashboard.name}}</span>

+									<span class="db-ops">

+										<i class="fa fa-pencil" @click='modifyDashboard(dashboard.id)'></i>&nbsp;

+										<i class="fa fa-trash-o" @click='removeDashboard(dashboard.id)'></i>

+									</span>

+								</div>

+							</div>

 							</header>

-							<div :id="dashboard.name"  :style="{width: (dashboard.width-50)+'px',height:(dashboard.height-50)+'px',overflowY:'auto'}" class='right-bottom'>

+							<div :id="dashboard.name"  :style="{height:'calc(100% - 32px)',overflowY:'auto'}" class='right-bottom'>

 								<template v-if="dashboard.chartType === 3">

-									<table  :style="{fontSize: (JSON.parse(dashboard.data)).fontSize + 'px' }" class='table table-striped table-bordered table-condensed'>

+									<table id='tablePanel' :style="{fontSize: (JSON.parse(dashboard.data)).fontSize + 'px' }" class='table table-striped table-bordered table-condensed'>

 										<thead>

 											<tr><th class='' id='tableColumnTime'>{{(JSON.parse(dashboard.data)).tName}}</th>

 											<th class='' id='tableColumnValue'>{{(JSON.parse(dashboard.data)).vName}}</th></tr>

diff --git a/nezha-admin/src/main/resources/templates/modules/dashboard/setting.html b/nezha-admin/src/main/resources/templates/modules/dashboard/setting.html
index b2007ae3..3ed7534f 100644
--- a/nezha-admin/src/main/resources/templates/modules/dashboard/setting.html
+++ b/nezha-admin/src/main/resources/templates/modules/dashboard/setting.html
@@ -3,51 +3,46 @@
 	<meta name="decorator" content="default"/>	

 </head>

 <body>

-	<div class="container" v-show='dashboardSetting'>

-    <!-- 工具栏 -->

-	<div class="panel" style="margin-bottom: 0px !important">

-		<!-- 面板展示栏  -->

-		<div class="panel-title">

+	<div v-show='dashboardSetting'>

+		<div class="tools">

+			<!-- 返回操作 -->

+			<a title="<@spring.message 'common.back'/>" ref='returnMenu' class="btn btn-default" @click="returnMenu()">

+				<i class="fa fa-arrow-left"></i>

+			</a>

+			<!-- 保存操作 -->

+			<a title="<@spring.message 'common.save'/>" class="btn btn-primary" @click="savePanelInfo()">

+				<i class="fa fa-floppy-o"></i>

+			</a>

+			<!-- <a title="" class="btn btn-default">

+				<i class="fa fa-desktop"></i>

+			</a> -->

 		</div>

-		<div class="panel-tools pull-right">

-				<!-- 返回操作 -->

-				<a title="<@spring.message 'common.back'/>" ref='returnMenu' class="btn btn-default" @click="returnMenu()">

-					<i class="fa fa-arrow-left"></i>

-				</a>

-				<!-- 保存操作 -->

-				<a title="<@spring.message 'common.save'/>" class="btn btn-default" @click="savePanelInfo()">

-					<i class="glyphicon glyphicon-floppy-disk"></i>

-				</a>

-				<!-- <a title="" class="btn btn-default">

-					<i class="fa fa-desktop"></i>

-				</a> -->

-		</div>

-	</div>

-    

-    <!-- 图表头 标题名称以及描述信息 -->

-    <div style="height: 20px;background-color: #F5F5F5;text-align: center;">

-    	<span id="panelDescribe" v-show="dashboard.describe"><i class="fa fa-exclamation-circle" :title='dashboard.describe'></i></span>

-    	<span id="panelTitle">{{dashboard.title}}</span>

-    </div>

     

-    <!-- 图表展示位置 -->

-    <div class="top" id="chart" v-show="dashboard.chartType.code==1"></div>

-    <div class="top" id="tableChart" style='overflow-y: auto;' v-show="dashboard.chartType.code==3">

-    	<table id='tablePanel' :style="{fontSize: chartTable.fontSize + 'px' }" class='table table-striped table-bordered table-condensed'>

-    		<thead>

-	    		<tr>

-	    			<th class='' id='tableColumnTime'>{{chartTable.tName}}</th><th class='' id='tableColumnValue'>{{chartTable.vName}}</th>

-	    		</tr>

-	    	</thead>

-	    	<tbody>

-	    		<template v-for='tableData in tableDatas'>

-	    			<tr><td style='width:50%'>{{tableData.formatTime}}</td><td>{{(tableData.value).toFixed(chartTable.decimal)}}</td></tr>

-	    		</template>

-	    	</tbody>

-	    </table>

-    </div>

-    <div class="top" id="singleChart" v-show="dashboard.chartType.code==2"></div>

-    <hr/>

+	    <!-- 图表头 标题名称以及描述信息 -->

+	    <div style="height: 20px;">

+	    	<span id="panelDescribe" v-show="dashboard.describe"><i class="fa fa-exclamation-circle" :title='dashboard.describe'></i></span>

+	    	<span id="panelTitle">{{dashboard.title}}</span>

+	    </div>

+	    <div class="preview">

+		    <!-- 图表展示位置 -->

+		    <div class="top" id="chart" v-show="dashboard.chartType.code==1"></div>

+		    <div class="top" id="tableChart" style='overflow-y: auto;' v-show="dashboard.chartType.code==3">

+		    	<table id='tablePanel' :style="{fontSize: chartTable.fontSize + 'px' }" class='table table-striped table-bordered table-condensed'>

+		    		<thead>

+			    		<tr>

+			    			<th class='' id='tableColumnTime'>{{chartTable.vName}}</th><th class='' id='tableColumnValue'>{{chartTable.tName}}</th>

+			    		</tr>

+			    	</thead>

+			    	<tbody>

+			    		<template v-for='tableData in tableDatas'>

+			    			<tr><td style='width:50%'>{{tableData.formatTime}}</td><td>{{(tableData.value).toFixed(chartTable.decimal)}}</td></tr>

+			    		</template>

+			    	</tbody>

+			    </table>

+		    </div>

+		    <div class="top" id="singleChart" v-show="dashboard.chartType.code==2"></div>

+	    </div>

+	    <hr/>

     

     <!-- 配置设置 -->

     <form id="panelConfigForm">

diff --git a/nezha-admin/src/main/resources/templates/modules/detect/warnTemplate.html b/nezha-admin/src/main/resources/templates/modules/detect/warnTemplate.html
index cdec6583..29926a5d 100644
--- a/nezha-admin/src/main/resources/templates/modules/detect/warnTemplate.html
+++ b/nezha-admin/src/main/resources/templates/modules/detect/warnTemplate.html
@@ -15,10 +15,10 @@
     <div >
         <span v-show="state==1||state==2" :id="headSpan+setId"><i :class="{'fa fa-angle-double-right':state==1,'fa fa-angle-double-down':state==2}"></i>&nbsp;{{setWarns.length}}个告警</span>
         <div :id="bodyTab+setId" v-show="state==2">
-            <div class="tools" style="text-align: right">
-                <a class="btn btn-primary" @click="add" title="<@spring.message 'common.add'/>"><i class="fa fa-plus"></i></a>
-                <a :disabled="single" class="btn btn-primary" @click="update" title="<@spring.message 'common.edit'/>"><i class="fa fa-pencil-square-o"></i></a>
-                <a :disabled="multi" class="btn btn-primary" @click="del" title="<@spring.message 'common.delete'/>"><i class="fa fa-trash-o"></i></a>
+            <div class="tools" style="text-align: left">
+                <a class="btn btn-default" @click="add" title="<@spring.message 'common.add'/>"><i class="fa fa-plus"></i></a>
+                <a :disabled="single" class="btn btn-default" @click="update" title="<@spring.message 'common.edit'/>"><i class="fa fa-pencil-square-o"></i></a>
+                <a :disabled="multi" class="btn btn-default" @click="del" title="<@spring.message 'common.delete'/>"><i class="fa fa-trash-o"></i></a>
             </div>
             <nz-table
                     :table-data="setWarns"