机房、机柜整合

3 files changed, 219 insertions, 164 deletions

diff --git a/nezha-admin/src/main/resources/statics/css/nodeRoom.css b/nezha-admin/src/main/resources/statics/css/nodeRoom.css
index 743349e9..f94c9a1d 100644
--- a/nezha-admin/src/main/resources/statics/css/nodeRoom.css
+++ b/nezha-admin/src/main/resources/statics/css/nodeRoom.css
@@ -1,76 +1,144 @@
-/*按钮的显示与隐藏*/
-.myoption-open {
-    display: inline-block;
-}
-
-.myoption-close {
-    display: none;
-}
-
-/*左侧机房*/
-.room {
-    width: 20%;
-    height: 500px;
-    float: left;
-    margin-right: 50px;
-    position: relative;
-    overflow: hidden;
-}
-
-/* 左侧机房的背景高亮*/
-.tr-higHlight {
-    background-color: #F5F5F5;
-}
-
-.tr-normal {
-    background-color: #FFFFFF;
-}
-
-
-/*右侧行列表*/
-.ranks {
-    width: 70%;
-    float: left;
-    position: relative;
-}
-
-/*行展示*/
-.cols {
-    position: absolute;
-    top: 0px;
-    left: 0px;
-}
-
-/*机柜块*/
-.cab {
-    height: 100px;
-    width: 100px;
-    margin: 20px 10px;
-    /*background-color: #c4e3f3;*/
-    line-height: 105px;
-    text-align: center;
-    border: 2px solid #337ab7;
-    border-radius: 20px;
-    float: left;
-    position: relative
-}
-
-/*机柜详情按钮*/
-.cab-detail-option {
-    width: 20px;
-    height: 20px;
-    position: absolute;
-    line-height: 20px;
-    right: 10px;
-    bottom: 5px;
-}
-
-/*机柜修改删除按钮*/
-.cab-but {
-    float: right;
-    position: absolute;
-    bottom: -10px;
-    right: 0px;
-}
-
-
+/*按钮的显示与隐藏*/

+.myoption-open {

+    display: inline-block;

+    float: right;

+}

+

+.myoption-close {

+    display: none;

+}

+.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {

+	border-top: 0;	

+}

+/*左侧机房*/

+.room {

+    width: 220px;;

+    /* height: 500px; */

+    float: left;

+    margin-right: 15px;

+    position: relative;

+    overflow: hidden;

+}

+

+/* 左侧机房的背景高亮*/

+.tr-higHlight {

+    background-color: #eee;

+}

+.tr-normal {

+    background-color: #FFFFFF;

+}

+

+

+/*右侧行列表*/

+.ranks {

+    width: calc(100% - 235px);

+    float: left;

+    position: relative;

+    /* height: 500px; */

+    overflow: auto;

+}

+

+/*行展示*/

+.ranks-rows {

+    position: absolute;

+    top: 20px;

+}

+.ranks-row {

+	height: 140px;

+	line-height: 140px;

+	text-align: center;

+}

+.ranks-body {

+	padding-left: 15px;

+}

+.ranks-col {

+	text-align: center;

+}

+.ranks-row, .ranks-col {

+	color: #888;

+	font-size: 12px;

+}

+/*机柜块*/

+.cab {

+    height: 120px;

+    width: 80px;

+    margin: 10px;

+    /* margin: 20px 10px; */

+    /*background-color: #c4e3f3;*/

+    line-height: 120px;

+    text-align: center;

+    /* border: 1px solid #337ab7; */

+	border: 1px solid #555;

+    /* border-radius: 20px; */

+    float: left;

+    position: relative

+}

+.cab-add>i {

+	color: #777;

+	cursor: pointer;

+}

+.cab_nocab {

+	border: 1px dashed #999;

+}

+.cab-name {

+	white-space: nowrap;

+	overflow: hidden;

+	text-overflow: ellipsis;

+	width: 70px;

+	display: inline-block;

+	line-height: 14px;

+}

+

+/*机柜修改删除按钮*/

+.cab-but {

+    float: right;

+    position: absolute;

+    bottom: 2px;

+    right: 5px;

+    color: #999;

+    font-size: 12px;

+    cursor: pointer;

+    line-height: 14px;

+}

+

+.areas {

+	margin-bottom: 5px;

+}

+.btn-area {

+	background-color: white;

+	padding: 6px 10px;

+	border: 1px solid #ccc;

+	color: #888;

+	outline:none;

+}

+.btn-area_left {

+	border-radius: 4px 0 0 4px;

+	border-right: 0;

+}

+.btn-area_right {

+	border-radius: 0 4px 4px 0;

+}

+.btn-area_active {

+	background-color: #3c8dbc;

+	color: white;

+	border-color: #3c8dbc;

+}

+

+.tr-op {

+	color: #999;

+	display: inline-block;

+	margin-right: 4px;

+	font-size: 13px;

+}

+.tr-op i {

+	cursor: pointer;

+}

+.tr-item {

+	color: #337ab7;

+	

+}

+.content {

+	 height: 100%;

+	 position: relative;

+	 padding-right: 2px;

+}
\ No newline at end of file
diff --git a/nezha-admin/src/main/resources/templates/js/modules/node/roomTest.js b/nezha-admin/src/main/resources/templates/js/modules/node/roomTest.js
index afccfc1e..2100bba3 100644
--- a/nezha-admin/src/main/resources/templates/js/modules/node/roomTest.js
+++ b/nezha-admin/src/main/resources/templates/js/modules/node/roomTest.js
@@ -253,7 +253,11 @@ var vm = new Vue({
                 }
             });
         },
-        query: function (addr) {
+        query: function (addr, event) {
+        	if (event && $(event.currentTarget).hasClass("btn-area_active")) {
+        		addr = null;
+        		vm.q.addr = null;
+        	}
             layer.closeAll('page');
             var page = ""; // 临时查询条件 并不存在该条件查询
             if (addr != null) {
@@ -277,6 +281,7 @@ var vm = new Vue({
                 }
             });
             // 查询之后刷新行列表区域
+            console.info(vm.roomList[0])
             vm.showRowList(vm.roomList[0]);
         },
         reset: function () {
@@ -489,11 +494,11 @@ var vm = new Vue({
                 }
             }
             // data.rowList = Object.assign(data.rowList, data.rowList)
-            console.log(data.rowList)
+            /*console.log(data.rowList)*/
         },
         open: function (title, content) {
             layer.open({
-                area: ['50%', '100%'],
+                area: ['550px', '100%'],
                 shade: 0,
                 title: title,
                 type: 1,
@@ -519,16 +524,27 @@ var vm = new Vue({
             $("#option" + roomId).removeClass("myoption-close").addClass("myoption-open");
         },
         closeRoomOption: function (roomId) {
-            $("#option" + roomId).removeClass("myoption-open").addClass("myoption-close");
+        	if (data.room.id != roomId) {
+        		$("#option" + roomId).removeClass("myoption-open").addClass("myoption-close");
+        	}
         },
-        showCabOption: function (cabId) {
-            if ($("#cab" + cabId).hasClass("myoption-close")) {
-                $("#cab" + cabId).removeClass("myoption-close").addClass("myoption-open");
+        showCabOption: function (cab) {
+        	if (this.checkCab(cab)) {return;}
+            if ($("#cab" + cab.id).hasClass("myoption-close")) {
+                $("#cab" + cab.id).removeClass("myoption-close").addClass("myoption-open");
             } else {
-                $("#cab" + cabId).removeClass("myoption-open").addClass("myoption-close");
+                $("#cab" + cab.id).removeClass("myoption-open").addClass("myoption-close");
             }
         }
-    },
+/*        showCabOption: function (cabId) {
+        	console.info(cabId);
+        	if ($("#cab" + cabId).hasClass("myoption-close")) {
+        		$("#cab" + cabId).removeClass("myoption-close").addClass("myoption-open");
+        	} else {
+        		$("#cab" + cabId).removeClass("myoption-open").addClass("myoption-close");
+        	}
+        }
+*/    },
     created: function () {
         // 1. 初始化实例查询机房列表
         this.getRooms();
@@ -536,23 +552,6 @@ var vm = new Vue({
         // 2.默认展开第一个机房的行列图
         this.showRowList(data.roomList[0])
     },
-    mounted: function () {
-        // 1.默认机房列表第一条高亮
-        $("#tr" + data.roomList[0].id).removeClass("tr-normal").addClass("tr-higHlight");
-    },
-    watch: {
-        "room": function (newValue, oldValue) {
-            // 监听点击的机房  改变高亮样式
-            if (oldValue != null) {
-                $("#tr" + oldValue.id).removeClass("tr-higHlight").addClass("tr-normal");
-            }
-            if ($("#tr" + newValue.id).hasClass("tr-higHlight")) {
-                return;
-            } else {
-                $("#tr" + newValue.id).removeClass("tr-normal").addClass("tr-higHlight");
-            }
-        }
-    },
     computed: {}
 });
 </script>
\ No newline at end of file
diff --git a/nezha-admin/src/main/resources/templates/modules/node/roomTest.html b/nezha-admin/src/main/resources/templates/modules/node/roomTest.html
index e0733d12..1793ae57 100644
--- a/nezha-admin/src/main/resources/templates/modules/node/roomTest.html
+++ b/nezha-admin/src/main/resources/templates/modules/node/roomTest.html
@@ -9,16 +9,12 @@
 <div id="roomTestApp" v-cloak>
 
     <!-- 搜索条件 -->
-    <div style="width: 100%;float: left;" class="tools">
-        <div class="form-group">
-            <div class="btn-group">
-                <!-- code 为 astana 1 , almaty 2 -->
-                <button v-for="item in addrList" :id="'but'+item.code" class="btn btn-default"
-                        @click="query(item.code)" :value="item.value">{{item.value}}
-                </button>
-            </div>
+    <div class="tools">
+    	<div class="form-group areas">
+	   		<button v-for="(item,index) in addrList" :id="'but'+item.code" class="btn-area" :class="[index==0 ? 'btn-area_left' : '', index==addrList.length-1 ? 'btn-area_right' : '', item.code==q.addr ? 'btn-area_active' : '']"
+	           	@click="query(item.code, $event)" :value="item.value">{{item.value}}
+	        </button>
         </div>
-
         <div class="form-group">
             <input type="text" class="form-control input-medium" v-model="q.name" @keyup.enter="query(null)"
                    placeholder="机房名称">
@@ -26,28 +22,24 @@
 
         <!-- 功能按钮 -->
         <a class="btn btn-default" title="搜索" @click="query(null)"><i class="fa fa-search"></i></a>
-        <a class="btn btn-default" @click="reset" title="重置"><i class="fa fa-refresh"></i></a>
-        <a class="btn btn-primary" @click="addRoom" title="添加"><i class="fa fa-plus"></i></a>
     </div>
-
+	<div style="clear: both;"></div>
     <!-- 左侧机房列表和右侧行列表区域 -->
     <div class="main">
 
     <!-- 左侧机房名称列表 -->
     <div class="room" id="roomList">
-        <div class="content" style="height: 500px;">
+        <!-- <a class="btn btn-primary" @click="addRoom" title="添加"><i class="fa fa-plus"></i></a> -->
+        <div class="content">
             <table class="table table-hover">
-                <tr class="tr-normal">
-                    <td>机房名称</td>
-                </tr>
-                <tr class="tr-normal" v-for="item in roomList" :id="'tr'+item.id" @click="showRowList(item)">
-                    <td @mouseenter="" @mouseleave="">
+                <tr :class="[room.id==item.id ? 'tr-higHlight' : 'tr-normal']" v-for="item in roomList" :id="'tr'+item.id" @click="showRowList(item)">
+                    <td @mouseenter="showRoomOption(item.id)" @mouseleave="closeRoomOption(item.id)">
                         <div style="float: left">
-                            <a href="#" @click="showRowList(item)">{{item.name}}</a>
+                            <span class="tr-item" @click="showRowList(item)">{{item.name}}</span>
                         </div>
-                        <div class="" style="float: right;" :id="'option'+item.id">
-                            <a class="" href="#" @click="updateRoom(item)"><i class="fa fa-pencil"></i></a>
-                            <a class="" href="#" @click="delRoom(item)"><i class="fa fa-trash-o"></i></a>
+                        <div :class="[room.id==item.id ? 'myoption-open' : 'myoption-close']" :id="'option'+item.id">
+                            <span class="tr-op" @click="updateRoom(item)"><i class="fa fa-pencil"></i></span>
+                            <span class="tr-op" @click="delRoom(item)"><i class="fa fa-trash-o"></i></span>
                         </div>
                     </td>
                 </tr>
@@ -59,51 +51,42 @@
     <div class="ranks">
         <!--<div style="background-color: greenyellow;position: absolute;top: 0px;left: 0px;">
         </div>-->
-        <div class="cols">
-            <div v-for="item,index in rowList" style="height: 150px;line-height: 180px;text-align: center;">
+        <div class="ranks-rows">
+            <div class="ranks-row" v-for="item,index in rowList">
                 {{index+1}}
             </div>
         </div>
-        <div style="overflow:auto hidden;margin-left: 20px">
-            <table style="margin-bottom: 15px">
+        <div class="ranks-body">
+            <table>
                 <tr>
-                    <td v-for="n in rowList[0].length">
-                        <div>
-                            <div style="width: 80%;text-align: center;">
-                                {{n}}
-                            </div>
-                        </div>
-                    </td>
+                    <td v-for="n in rowList[0].length"><div class="ranks-col">{{n}}</div></td>
                 </tr>
                 <tr v-for="item,index in rowList">
                     <td v-for="cab in item" :key="item.id">
-                        <div style="width: 150px;height: 150px;position: relative">
-                            <div class="cab">
+                        <div class="cab" :class="[checkCab(cab) ? 'cab_nocab' : '']" @mouseenter="showCabOption(cab)" @mouseleave="showCabOption(cab)">
 
-                                <!-- 该位置暂无机柜 展示图标 -->
-                                <div v-if="checkCab(cab)">
-                                    <a href="#" @click="addCab(cab)">
-                                        <i class="fa fa-plus fa-2x" aria-hidden="true"></i></a>
-                                </div>
+                            <!-- 该位置暂无机柜 展示图标 -->
+                            <template v-if="checkCab(cab)">
+                                <span class="cab-add" @click="addCab(cab)">
+                                    <i class="fa fa-plus" aria-hidden="true"></i>
+                                </span>
+                            </template>
 
-                                <!-- 存在机柜 展示机柜名称 -->
-                                <div v-else>
-                                    <b>{{getCabName(cab)}}</b>
-                                    <div class="cab-detail-option">
-                                        <a href="#" title="详细操作" @click="showCabOption(cab.id)">
-                                            <i class="fa fa-ellipsis-h" aria-hidden="true"></i></a>
-                                    </div>
-                                </div>
-                            </div>
-
-                            <!-- 机柜 修改/删除 按钮 -->
-                            <div v-if="!checkCab(cab)" class="myoption-close cab-but" :id="'cab'+cab.id">
-                                <a class="btn btn-primary" @click="updateCab(cab)"><i
-                                        class="fa fa-pencil"></i></a>
-                                <a class="btn btn-primary" @click="delCab(cab)"><i
-                                        class="fa fa-trash-o"></i></a>
-                            </div>
+                            <!-- 存在机柜 展示机柜名称 -->
+                            <template v-else>
+                                <span class="cab-name" :title="getCabName(cab)">{{getCabName(cab)}}</span>
+                            </template>
+	                        <!-- 机柜 修改/删除 按钮 -->
+	                        <div v-if="!checkCab(cab)" class="myoption-close cab-but" :id="'cab'+cab.id">
+	                            <span class="tr-op" @click="updateCab(cab)">
+	                            	<i class="fa fa-pencil"></i>
+	                            </span>
+	                            <span class="tr-op" @click="delCab(cab)">
+	                            	<i class="fa fa-trash-o"></i>
+	                            </span>
+	                        </div>
                         </div>
+
                     </td>
                 </tr>
             </table>
@@ -112,7 +95,7 @@
 </div>
 
     <!-- 机房表单 -->
-    <div v-show="!showRoomFrom" id="roomForm" class="panel panel-default">
+    <div v-show="!showRoomFrom" id="roomForm" class="">
 
         <form class="form-horizontal">
             <!-- 名称 -->
@@ -220,7 +203,7 @@
     </div>
 
     <!-- 机柜表单 -->
-    <div v-show="!showCabFrom" id="cabForm" class="panel panel-default">
+    <div style="display:none;"id="cabForm" class="">
 
         <form class="form-horizontal">
             <!-- 名称 -->
@@ -258,7 +241,7 @@
                 <div class="col-sm-2 control-label"><@spring.message 'node.cabinet.uSize'/></div>
                 <div class="col-sm-9">
                     <input type="text" v-model="nodeCabinet.ubit" class="form-control"
-                           :class="{'form-control--error': $v.nodeCabinet.ubit.$dirty && !$v.nodeCabinet.ubit.minValue || !$v.nodeCabinet.ubit.integer}"
+                           :class="{'form-control--error': $v.nodeCabinet.ubit.$dirty && (!$v.nodeCabinet.ubit.minValue || !$v.nodeCabinet.ubit.integer || !$v.nodeCabinet.ubit.required)}"
                            @blur="$v.nodeCabinet.ubit.$touch" placeholder="<@spring.message 'node.cabinet.uSize'/>"/>
                     <span class="required-symbol">*</span>
                     <div class="form-control_error-msg"
@@ -301,9 +284,14 @@
 </div>
 </body>
 <!--<script src="${request.contextPath}/statics/js/modules/node/roomTest.js"></script>-->
-<link rel="stylesheet" href="${request.contextPath}/statics/css/nodeRoom.css">
+<!-- <link rel="stylesheet" href="${request.contextPath}/statics/css/nodeRoom.css"> -->
 <#include "/js/modules/node/roomTest.js">
 <script>
-    var perfect = new PerfectScrollbar('#roomList');
+$(function(){
+    var perfect = new PerfectScrollbar('.content');
+    $(".room").css("height",top.$(".content").height()-60);
+    $(".ranks").css("height",top.$(".content").height()-60);
+    
+})
 </script>
 </html>
\ No newline at end of file