gfwleak/nezha-nezha-fronted
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf: 搜索框bug修复、alertmessage二级增加loading

Browse Source 
1.搜索框增加滚动条插件后下拉框不可见的bug
2.增加动画后搜索框下拉框位置异常的bug
3.alert-message二级页面增加加载loading动画
This commit is contained in:
陈劲松
2020-03-23 21:46:19 +08:00
parent ef50d7b8db
commit 3e110e8cbe
5 changed files with 121 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
nezha-fronted/src/assets/stylus/main.scss
View File

@@ -498,6 +498,7 @@ li{
align-items : center; align-items : center;
position: relative; position: relative;
flex-direction: row-reverse; flex-direction: row-reverse;
z-index: 10;
} }
.top-tools>div { .top-tools>div {
margin-top: 2px; margin-top: 2px;
@@ -990,6 +991,9 @@ li{
.new-search .el-scrollbar__bar.is-horizontal { .new-search .el-scrollbar__bar.is-horizontal {
height: 4px; height: 4px;
} }
.new-search .el-scrollbar__view {
height: calc(100% - 4px);
}
.app>.el-scrollbar__bar.is-vertical { .app>.el-scrollbar__bar.is-vertical {
width: 5px; width: 5px;
} }

30
nezha-fronted/src/components/common/bottomBox/alertMessageBox.vue
View File

@@ -232,15 +232,18 @@
} }
}, },
methods: { methods: {
getAlertList: function () { getAlertList() {
this.tableData = [];
this.loading = true;
this.$set(this.searchLabel, "pageNo", this.pageObj.pageNo); this.$set(this.searchLabel, "pageNo", this.pageObj.pageNo);
this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize); this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize);
this.$get('alert/message', this.searchLabel).then(response => { this.$get('alert/message', this.searchLabel).then(response => {
if (response.code == 200) { if (response.code == 200) {
this.tableData = response.data.list this.loading = false;
this.pageObj.total = response.data.total this.tableData = response.data.list;
this.pageObj.total = response.data.total;
} }
}) });
}, },
pageNo(val) { pageNo(val) {
this.pageObj.pageNo = val; this.pageObj.pageNo = val;
@@ -364,6 +367,21 @@
} }
</script> </script>
<style scoped> <style lang="scss">
/*重写el-loading样式*/
.nz-table .el-loading-spinner .circular{
width: 42px;
height: 42px;
animation: loading-rotate 2s linear infinite;
display: none;
}
.nz-table .el-loading-spinner{
background: url(../../../assets/img/loading.gif) no-repeat;
background-size: 48px 48px;
width: 100%;
height: 100%;
position: relative;
top: 50%;
left: 48.5%;
}
</style> </style>

119
nezha-fronted/src/components/common/searchInput.vue
View File

@@ -27,7 +27,7 @@
</div> </div>
<!-- 搜索框--> <!-- 搜索框-->
<div class="input-center-box" id="input-center-box"> <div class="input-center-box" id="input-center-box">
<el-scrollbar style="height: 100%"> <el-scrollbar style="height: 100%;" ref="searchScrollbar">
<ul class="sreach_fixe_left" id="search-ul"> <ul class="sreach_fixe_left" id="search-ul">
<li class="selectinfo_box" v-if="select_list.length>0" v-for="(val,ind) in select_list" :key="ind" @click="update_sreach(ind,$event)"> <li class="selectinfo_box" v-if="select_list.length>0" v-for="(val,ind) in select_list" :key="ind" @click="update_sreach(ind,$event)">
<div class="select_condition"> <div class="select_condition">
@@ -39,46 +39,46 @@
</div> </div>
<div v-else-if="!change_sreach_show && ind==sreach_num && val.id!==7 " class="select_input"> <div v-else-if="!change_sreach_show && ind==sreach_num && val.id!==7 " class="select_input">
<input type="text" autocomplete="off" id="sreach_input" v-model="input_sreach" @keyup="enter(val.name, $event)" @click="stop_click"> <input type="text" autocomplete="off" id="sreach_input" v-model="input_sreach" @keyup="enter(val.name, $event)" @click="stop_click">
<div class="select_info_list" v-if="val.type == 'select'"> <div class="select_info_list" :style="'top:' + selectDom.top" v-if="val.type == 'select'">
<ul> <ul>
<li v-for="(item,key) in selectInfoList[val.label]" :key="key" @click="tr_selectInfo(val.label,item.value,item.label,$event)" :class="search_select_style_num==key?'search-style-ind':''">{{item.label}}</li> <li v-for="(item,key) in selectInfoList[val.label]" :key="key" @click="tr_selectInfo(val.label,item.value,item.label,$event)" :class="search_select_style_num==key?'search-style-ind':''">{{item.label}}</li>
</ul> </ul>
</div> </div>
<div class="select_info_list" v-if="val.type == 'selectString'"> <div class="select_info_list" :style="'top:' + selectDom.top" v-if="val.type == 'selectString'">
<ul> <ul>
<li v-for="(item,key) in selectInfoList[val.label]" :key="key" @click="stringSelectInfo(val, item, $event)" :class="search_select_style_num==key?'search-style-ind':''">{{item.label}}</li> <li v-for="(item,key) in selectInfoList[val.label]" :key="key" @click="stringSelectInfo(val, item, $event)" :class="search_select_style_num==key?'search-style-ind':''">{{item.label}}</li>
</ul> </ul>
</div> </div>
<div class="select_info_list" v-if="val.type == 'dc'"> <div class="select_info_list" :style="'top:' + selectDom.top" v-if="val.type == 'dc'">
<ul> <ul>
<li v-for="(item,key) in dcSelect" :key="key" @click="selectObject(val, item, $event)" :class="search_select_style_num==key?'search-style-ind':''">{{item.name}}</li> <li v-for="(item,key) in dcSelect" :key="key" @click="selectObject(val, item, $event)" :class="search_select_style_num==key?'search-style-ind':''">{{item.name}}</li>
</ul> </ul>
</div> </div>
<div class="select_info_list" v-if="val.type == 'asset'"> <div class="select_info_list" :style="'top:' + selectDom.top" v-if="val.type == 'asset'">
<ul> <ul>
<li v-for="(item,key) in assetSelect" :key="key" @click="selectObject(val, item, $event)" :class="search_select_style_num==key?'search-style-ind':''">{{item.host}}</li> <li v-for="(item,key) in assetSelect" :key="key" @click="selectObject(val, item, $event)" :class="search_select_style_num==key?'search-style-ind':''">{{item.host}}</li>
</ul> </ul>
</div> </div>
<!-- 新增日志模块action下拉选择 --> <!-- 新增日志模块action下拉选择 -->
<div class="select_info_list" v-if="val.type == 'selectAction'"> <div class="select_info_list" :style="'top:' + selectDom.top" v-if="val.type == 'selectAction'">
<ul> <ul>
<li v-for="(item,key) in actionSelect" :key="key" @click="tr_selectInfo(val.label,item.id,item.value,$event)">{{item.value}}</li> <li v-for="(item,key) in actionSelect" :key="key" @click="tr_selectInfo(val.label,item.id,item.value,$event)">{{item.value}}</li>
</ul> </ul>
</div> </div>
<!-- 新增protocol下拉选择 --> <!-- 新增protocol下拉选择 -->
<div class="select_info_list" v-if="val.type == 'selectType'"> <div class="select_info_list" :style="'top:' + selectDom.top" v-if="val.type == 'selectType'">
<ul> <ul>
<li v-for="(item,key) in schemaTypeSelect" :key="key" @click="tr_selectTypeInfo(item)">{{item.value}}</li> <li v-for="(item,key) in schemaTypeSelect" :key="key" @click="tr_selectTypeInfo(item)">{{item.value}}</li>
</ul> </ul>
</div> </div>
<!-- 新增protocol二层下拉 --> <!-- 新增protocol二层下拉 -->
<div class="select_info_list" v-if="TypeSelect.length!=0&&val.type == 'selectType'&&secondShow"> <div class="select_info_list" :style="'top:' + selectDom.top" v-if="TypeSelect.length!=0&&val.type == 'selectType'&&secondShow">
<ul> <ul>
<li v-for="(item,key) in TypeSelect" :key="key" @click="tr_selectProtocolInfo(item)">{{item.name}}</li> <li v-for="(item,key) in TypeSelect" :key="key" @click="tr_selectProtocolInfo(item)">{{item.name}}</li>
</ul> </ul>
</div> </div>
<!-- 时间计划--> <!-- 时间计划-->
<div class="select_info_list" v-if="val.type == 'select'&&val.id==5"> <div class="select_info_list" :style="'top:' + selectDom.top" v-if="val.type == 'select'&&val.id==5">
<ul> <ul>
<li v-for="item in schlist" @click="selectSul(item.name)">{{item.name}}</li> <li v-for="item in schlist" @click="selectSul(item.name)">{{item.name}}</li>
</ul> </ul>
@@ -106,9 +106,9 @@
<div v-show="clearSearchShow" class="clear-search" @click="clear_input"> <div v-show="clearSearchShow" class="clear-search" @click="clear_input">
<i class="el-icon-circle-close"></i> <i class="el-icon-circle-close"></i>
</div> </div>
<div :class="input_list?'input_list none':'input_list'" @click="stop_click" id="input_list"> <div :class="input_list?'input_list none':'input_list'" :style="'top:' + selectDom.top" @click="stop_click" id="input_list">
<ul> <ul>
<li v-for="(val,ind) in searchLabelList" v-if="val.name!='Protocol'" @click="select_name(val.name,ind,val.id,val.type,val.label,val.disabled)" :key="ind" :class="{'search-style-ind':searchStyleNum==ind,'is-disabled':val.disabled}"> <li v-for="(val,ind) in searchLabelList" @click="select_name(val.name,ind,val.id,val.type,val.label,val.disabled,$event)" :key="ind" :class="{'search-style-ind':searchStyleNum==ind,'is-disabled':val.disabled}">
<span>{{val.name}}</span> <span>{{val.name}}</span>
</li> </li>
<!--<li v-for="(val,ind) in searchLabelList" v-if="val.name=='Protocol'" @click="select_type(val.name,ind,val.id,val.type,val.label,val.disabled)" :key="ind" :class="{'search-style-ind':searchStyleNum==ind,'is-disabled':val.disabled}"> <!--<li v-for="(val,ind) in searchLabelList" v-if="val.name=='Protocol'" @click="select_type(val.name,ind,val.id,val.type,val.label,val.disabled)" :key="ind" :class="{'search-style-ind':searchStyleNum==ind,'is-disabled':val.disabled}">
@@ -130,6 +130,7 @@
name: "index", name: "index",
data() { data() {
return { return {
selectDom: {top: '', tempTop: ''}, // 选择弹框的位置
clearSearchShow: false, clearSearchShow: false,
select_conditionsName:'', select_conditionsName:'',
selectInfoList: searchSelectInfo, selectInfoList: searchSelectInfo,
@@ -184,16 +185,44 @@
} }
}, },
watch: { watch: {
inTransform: {
immediate: true,
handler(n) {
let listsK = document.querySelectorAll(".input_list");
listsK.forEach((item, index) => {
item.style.display = "none";
});
let listsV = document.querySelectorAll(".select_info_list");
listsV.forEach((item, index) => {
item.style.display = "none";
});
if (n) {
this.selectDom.tempTop = this.selectDom.top;
this.selectDom.top = '36px';
} else {
this.selectDom.top = this.selectDom.tempTop;
}
setTimeout(() => {
listsK.forEach((item, index) => {
item.style.display = "";
});
listsV.forEach((item, index) => {
item.style.display = "";
});
}, 500);
}
},
select_list: { select_list: {
//监听下拉列表 //监听下拉列表
handler(newData, oldData) { handler(newData, oldData) {
this.$refs.searchScrollbar.update();
if (newData.length == 0) { if (newData.length == 0) {
this.change_sreach_show = true; this.change_sreach_show = true;
this.clearSearchShow = false; this.clearSearchShow = false;
} else { } else {
this.clearSearchShow = true; this.clearSearchShow = true;
} }
if (this.$route.path == "/alertList") { if (this.$route.path.indexOf("alertList") > -1 || this.$route.path.indexOf("alertConfig") > -1) {
// 处理alertType--asset联动问题： // 处理alertType--asset联动问题：
// 当已选alertType为asset时，将可选列表中的asset的disabled恢复为false； // 当已选alertType为asset时，将可选列表中的asset的disabled恢复为false；
// 当已选alertType不为asset时，将可选列表中的asset的disabled设为true，若有已选的asset，则删除； // 当已选alertType不为asset时，将可选列表中的asset的disabled设为true，若有已选的asset，则删除；
@@ -340,7 +369,7 @@
} }
} }
}, },
props:['searchMsg','defaultItem','defaultValue'], props:['searchMsg','defaultItem','defaultValue','inTransform'],
methods: { methods: {
// isValidIP(ip) { // isValidIP(ip) {
// var reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/ // var reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/
@@ -1052,14 +1081,14 @@
}, },
//点击搜索框 显示搜索类型 //点击搜索框 显示搜索类型
read_input(e) { read_input(e) {
console.info(1)
e.cancelBubble = true; e.cancelBubble = true;
e.stopPropagation(); e.stopPropagation();
this.getHeight() this.getHeight();
this.input_list = !this.input_list this.input_list = !this.input_list;
this.getSelectPosition(e);
}, },
//点击选择 搜索类型 //点击选择 搜索类型
select_name(val, ind, id, type,label,disabled) { select_name(val, ind, id, type,label,disabled,e ) {
// if(id==43||id==45||id==48){ //根据id判断是否开启ip验证 // if(id==43||id==45||id==48){ //根据id判断是否开启ip验证
// this.select_conditionsName=true // this.select_conditionsName=true
// } // }
@@ -1097,7 +1126,7 @@
this.sreach_num = this.select_list.length-1 this.sreach_num = this.select_list.length-1
this.input_list = !this.input_list this.input_list = !this.input_list
setTimeout("document.getElementById(\"sreach_input\").focus()", 500); setTimeout("document.getElementById(\"sreach_input\").focus()", 500);
this.searchLabelList.forEach(val=>{ /* this.searchLabelList.forEach(val=>{
if(val.id==30||val.id==31||val.id==32||val.id==33){ if(val.id==30||val.id==31||val.id==32||val.id==33){
val.disabled = true val.disabled = true
} }
@@ -1111,18 +1140,18 @@
type:type, type:type,
label:label, label:label,
disabled:disabled disabled:disabled
}) })*/
this.change_sreach_show = false this.change_sreach_show = false
this.sreach_num = this.select_list.length-1 this.sreach_num = this.select_list.length-1
this.input_list = !this.input_list this.input_list = !this.input_list
setTimeout("document.getElementById(\"sreach_input\").focus()", 500); setTimeout("document.getElementById(\"sreach_input\").focus()", 500);
this.searchLabelList.forEach(val=>{ /*this.searchLabelList.forEach(val=>{
if(val.id==29){ if(val.id==29){
val.disabled = true val.disabled = true
} }
}) })*/
}else { }else {
this.searchLabelList.splice(ind, 1) this.searchLabelList.splice(ind, 1);
this.select_list.push({ this.select_list.push({
name: val, name: val,
id:id, id:id,
@@ -1130,9 +1159,9 @@
label:label, label:label,
disabled:disabled disabled:disabled
}); });
this.change_sreach_show = false this.change_sreach_show = false;
this.sreach_num = this.select_list.length-1 this.sreach_num = this.select_list.length-1;
this.input_list = !this.input_list this.input_list = !this.input_list;
if(id!==6&&id!==28){ if(id!==6&&id!==28){
setTimeout("document.getElementById(\"sreach_input\").focus()", 500); setTimeout("document.getElementById(\"sreach_input\").focus()", 500);
} }
@@ -1142,6 +1171,32 @@
_this.getHeight() _this.getHeight()
},) },)
// console.info(e.target.parentElement.parentElement.parentElement.getBoundingClientRect());
}
},
/*计算select弹框的位置*/
getSelectPosition(e) {
let inputListDom = this.getDomFromParents(e.target, 'input-center-box', 0);
if (inputListDom) {
if (this.inTransform) {
this.selectDom.top = "36px";
} else {
let position = inputListDom.getBoundingClientRect();
this.selectDom.top = position.top+36+'px';
}
}
},
/*递归向上获取指定class的dom*/
getDomFromParents(dom, className, level) {
let parentClassNames = dom.parentElement.className;
if (parentClassNames.indexOf(className) == -1) {
if (level < 20 && dom.parentElement) { //限制20层，避免溢出
return this.getDomFromParents(dom.parentElement, className, ++level);
} else {
return false;
}
} else {
return dom.parentElement;
} }
}, },
// 判断输入框的高度 // 判断输入框的高度
@@ -1176,7 +1231,7 @@
if (this.$route.path == '/promServer') { if (this.$route.path == '/promServer') {
this.getDcData(); this.getDcData();
} }
if (this.$route.path == '/project' || this.$route.path == '/alertList') { if (this.$route.path == '/project' || this.$route.path == '/alertList' || this.$route.path == '/alertConfig') {
this.getAssetData(); this.getAssetData();
} }
if (this.$route.path == '/asset') { if (this.$route.path == '/asset') {
@@ -1443,9 +1498,9 @@
box-shadow:none; box-shadow:none;
} }
.select_input .select_info_list{ .select_input .select_info_list{
position: absolute; position: fixed;
left: 100px; /*left: 100px;
top: 36px; top: 36px;*/
height: auto; height: auto;
width: auto; width: auto;
max-height: 240px; max-height: 240px;
@@ -1488,9 +1543,9 @@
color: rgba(0,0,0,0.55) color: rgba(0,0,0,0.55)
} }
.input_list{ .input_list{
position: absolute; position: fixed;
left: 47px; /*left: 47px;
top: 36px; top: 36px;*/
width: auto; width: auto;
max-width: 400px; max-width: 400px;
max-height: 240px; max-height: 240px;

8
nezha-fronted/src/components/page/alert/config.vue
View File

@@ -19,7 +19,7 @@
<div class="top-tools" v-show="mainResizeShow"> <div class="top-tools" v-show="mainResizeShow">
<div class="top-tool-main-right" :class="{'top-tool-main-right-to-left': showSubList}"> <div class="top-tool-main-right" :class="{'top-tool-main-right-to-left': showSubList}">
<div class="top-tool-search float-right"> <div class="top-tool-search float-right">
<search-input :searchMsg="searchMsg" @search="search"></search-input> <search-input :searchMsg="searchMsg" @search="search" :inTransform="inTransform"></search-input>
</div> </div>
<button id="alert-add" @click="toAdd" :title="$t('overall.createAlertRule')" <button id="alert-add" @click="toAdd" :title="$t('overall.createAlertRule')"
class="nz-btn nz-btn-size-normal nz-btn-style-light margin-l-20"> class="nz-btn nz-btn-size-normal nz-btn-style-light margin-l-20">
@@ -89,8 +89,8 @@
</div> </div>
<button class="to-top" v-show="showTopBtn" @click="toTop"><i class="nz-icon nz-icon-top"></i></button> <button class="to-top" v-show="showTopBtn" @click="toTop"><i class="nz-icon nz-icon-top"></i></button>
</div> </div>
<alert-Message-box v-if="showSubList" @listResize="listResize" :show-sub-list="showSubList" :from="'alertRule'" :subResizeShow="subResizeShow" :obj="alertRule" :isFullScreen="isFullScreen" <alert-message-box v-if="showSubList" @listResize="listResize" :show-sub-list="showSubList" :from="'alertRule'" :subResizeShow="subResizeShow" :obj="alertRule" :isFullScreen="isFullScreen"
@closeSubList="showSubList = false" @fullScreen="fullScreen" @exitFullScreen="exitFullScreen"></alert-Message-box> @closeSubList="showSubList = false" @fullScreen="fullScreen" @exitFullScreen="exitFullScreen"></alert-message-box>
</div> </div>
<alert-config-box :parentAlertRule="alertRule" @reload="getTableData" ref="alertConfigBox"></alert-config-box> <alert-config-box :parentAlertRule="alertRule" @reload="getTableData" ref="alertConfigBox"></alert-config-box>
<project-box :project="viewProjectData" ref="projectBox" @reload="getTableData"></project-box> <project-box :project="viewProjectData" ref="projectBox" @reload="getTableData"></project-box>
@@ -114,6 +114,7 @@
name: "alert-config", name: "alert-config",
data() { data() {
return { return {
inTransform: false, //搜索框相关，搜索条件下拉框是否在transform里
mainResizeShow: true, //dom高度改变时部分内容是否展示 mainResizeShow: true, //dom高度改变时部分内容是否展示
subResizeShow: true, subResizeShow: true,
isFullScreen: false, isFullScreen: false,
@@ -523,6 +524,7 @@
}, },
watch: { watch: {
showSubList(n) { showSubList(n) {
this.inTransform = n;
if (!n) { if (!n) {
this.mainTableHeight = this.$tableHeight.normal; //重置table的高度 this.mainTableHeight = this.$tableHeight.normal; //重置table的高度
this.isFullScreen = false; this.isFullScreen = false;

2
nezha-fronted/src/main.js
View File

@@ -59,7 +59,7 @@ Vue.component("dc-box", dcBox);
Vue.component("model-box", modelBox); Vue.component("model-box", modelBox);
Vue.component("select-area", selectArea); Vue.component("select-area", selectArea);
Vue.component('loading',loading); Vue.component('loading',loading);
Vue.component('alert-Message-box',alertMessageBox); Vue.component('alert-message-box',alertMessageBox);
Vue.prototype.$axios = axios; Vue.prototype.$axios = axios;
Vue.prototype.$post = post; Vue.prototype.$post = post;