NEZ-2842 fix: alert message页面 高级搜索样式调整

This commit is contained in:
zhangyu
2023-06-19 17:00:23 +08:00
parent dc047649bd
commit 286ec0391d
11 changed files with 245 additions and 94 deletions

View File

@@ -49,6 +49,7 @@
}
.top-tool-left {
display: flex;
position: relative;
.nz-icon-xingzhuang{
color: $--color-text-regular;
cursor: pointer;

View File

@@ -1,54 +1,114 @@
#nz-search-box{
flex: 1;
min-height: 32px;
.history-icon {
border: 1px solid $--border-color-light;
border-right: none;
width: 28px;
text-align: center;
display: inline-block;
height: 28px;
line-height: 28px;
height: 30px;
line-height: 30px;
vertical-align: middle;
margin-right: -4px;
border-radius: 2px 0 0 2px;
cursor: pointer;
}
.history-icon:hover{
.nz-icon-time {
color: $--search-box-icon-k-text;
}
}
.el-popover.el-popper {
border: none;
box-shadow: unset !important;
box-shadow: -1px 5px 10px -1px $--explore-border-color-bottom !important;
}
.el-popover.el-popper.search-content-box {
width: 100%;
}
.search-content {
width: 100%;
}
.search-item-title {
height: 31px;
line-height: 31px;
background: $--background-color-empty;
color: $--color-text-secondary;
width: 100%;
box-sizing: border-box;
padding-left: 10px;
border: 1px solid $--border-color-light;
//border-top: none;
border-radius: 0 0 2px 2px;
}
.search-item-nodata {
border-bottom: none;
color: $--color-text-regular;
}
#search-box-scroll {
max-height: 300px;
overflow-y: auto;
border: 1px solid $--border-color-light;
border-radius: 2px;
background: $--background-color-empty;
border-radius: 2px 2px 0 0 ;
border-bottom: none;
}
.search-box-input {
border: 1px solid $--border-color-light;
border-left: none;
width: 100%;
height: 30px;
white-space: nowrap;
width: 400px;
overflow: hidden;
display: flex;
align-items: center;
border-radius: 0 2px 2px 0;
.col-line {
width: 0;
height: 18px;
border-left: 1px solid $--border-color-light;
position: absolute;
left: -1px;
top: 7px;
}
.search-box-input-content{
width: calc(100% - 30px);
width: 100%;
flex-shrink: 0;
white-space: nowrap;
overflow-y: auto;
overflow-x: auto;
overflow-y: hidden;
display: flex;
align-items: center;
.el-input__inner{
border: none;
height: 30px;
line-height: 30px;
}
.el-input--mini {
display: inline-block;
min-width: 100px;
//display: inline-block;
min-width: 170px;
width: auto;
max-width: 170px;
max-width: 100%;
flex: 1;
}
}
flex-shrink: 0;
display: inline-flex;
.el-input-group__append{
width: 30px;
padding: 0;
border: none;
border-left: 1px solid $--border-color-light;
line-height: 26px;
text-align: center;
.nz-icon-search{
display: inline-block;
width: 100%;
height: 100%;
line-height: 1;
margin-left: 5px;
text-align: center;
line-height: 32px;
cursor: pointer;
}
}
}
}
}
.search-box-tag{
@@ -66,7 +126,11 @@
display: flex;
cursor: pointer;
.nz-icon-close {
font-size: 12px;
font-size: 10px;
vertical-align: middle;
margin-left: 8px;
color: $--color-text-secondary;
cursor: pointer;
}
}
.search-item{
@@ -75,65 +139,104 @@
position: relative;
cursor: pointer;
display: flex;
height: 31px;
> span{
display: inline-block;
vertical-align: middle;
line-height: 27px;
line-height: 31px;
height: 100%;
}
}
.search-item.search-item-select {
background: $--color-primary;
color: #333;
.content-remark{
color: #fff;
.search-item:last-child {
border-color: transparent;
}
.search-item.search-item-select {
background: $--background-color-base;
//color: #333;
//.content-remark{
// color: #fff;
//}
}
.icon-k,.icon-s, .icon-v{
display: inline-block;
width: 26px;
width: 32px;
height: 100%;
line-height: 27px;
line-height: 31px;
text-align: center;
margin-right: 5px;
flex-shrink: 0;
}
.icon-k{
color: #ff8f44;
background: $--background-color-copy;
color: $--search-box-icon-k-text;
background: $--search-box-icon-k-bac;
}
.icon-s{
color: #4276e5;
background: $--background-color-base;
color: $--search-box-icon-s-text;
background: $--search-box-icon-s-bac;
}
.icon-v{
color: #a884f3;
background: $--color-monitor;
color: $--search-box-icon-v-text;
background: $--search-box-icon-v-bac;
}
.search-item-content {
//flex: 1;
width: calc(100% - 130px);
width: 40%;
}
.content-remark {
width: 100px;
//width: 100px;
flex: 1;
color: $--color-text-secondary;
}
.el-popper{
padding: 0;
}
.tag-box{
padding: 5px 0px;
min-width: 75px;
background: $--background-color-empty;
border-radius: 2px;
min-width: 50px;
padding: 15px 20px 5px 15px;
box-shadow: -1px 5px 10px -1px $--explore-border-color-bottom;
border: 1px solid $--border-color-light;
.tag-box-content{
display: flex;
flex-direction: column;
}
.search-box-tag{
display: inline !important;
margin-bottom: 5px !important;
display: inline-block !important;
margin-bottom: 10px !important;
height: 20px;
line-height: 20px;
}
}
.history-content-box {
border: 1px solid $--border-color-light;
border-radius: 2px;
box-shadow: -1px 5px 10px -1px $--explore-border-color-bottom;
.history-content-header{
text-align: center;
border-bottom: 1px solid $--border-color-light;
font-size: 12px;
height: 36px;
line-height: 36px;
color: $--color-text-secondary;
position: relative;
.nz-icon-close {
position: absolute;
right: 15px;
top: 0px;
font-size: 10px;
color: $--color-text-secondary;
cursor: pointer;
}
}
.search-history-box-noData {
text-align: center;
height: 50px;
line-height: 50px;
}
}
.history-content {
border: 1px solid $--border-color-light;
padding-top: 5px;
padding-bottom: 5px;
overflow: auto;
@@ -142,6 +245,9 @@
display: inline-block;
width: 100%;
white-space: nowrap;
padding: 0 15px;
box-sizing: border-box;
border: none;
}
}
//.content-remark{

View File

@@ -45,6 +45,13 @@ $--color-text-disabled: #505050;
$--color-text-label: #505050;
// 标签内白色
$--color-text-label2: #FFFFFF;
// search-box icon 颜色
$--search-box-icon-k-text: #FA901C;
$--search-box-icon-k-bac: #FFF6ED;
$--search-box-icon-s-text: #3C92F1;
$--search-box-icon-s-bac: #F0F6FE;
$--search-box-icon-v-text: #23BF9A;
$--search-box-icon-v-bac: #EEFAF7;
/* 4.边框色 */
// 普通边框色

View File

@@ -45,6 +45,14 @@ $--color-text-disabled: #c0c4cc;
$--color-text-label: #FFFFFF;
// 标签内白色
$--color-text-label2: #FFFFFF;
// search-box icon 颜色
// search-box icon 颜色
$--search-box-icon-k-text: #FA901C;
$--search-box-icon-k-bac: #FFF6ED;
$--search-box-icon-s-text: #3C92F1;
$--search-box-icon-s-bac: #F0F6FE;
$--search-box-icon-v-text: #23BF9A;
$--search-box-icon-v-bac: #EEFAF7;
/* 4.边框色 */
// 普通边框色(覆盖element-ui内置变量)

View File

@@ -1099,7 +1099,6 @@ let heightLoad = function () {
}
export const loadMore = {
bind (el, binding) {
console.log(el, binding, el.parentNode, 'bind')
// 获取element定义scroll
const selectDom = binding.value.dom ? el.querySelector(binding.value.dom) : el
heightLoad = bus.debounce(function () {

View File

@@ -173,7 +173,6 @@ export default {
topoData: {
immediate: false,
handler () {
console.log(123213)
if (!this.isChart) {
this.reload()
}

View File

@@ -219,7 +219,6 @@ export default {
this.$refs.assetDiscoveryForm.validate(valid => {
if (valid) {
this.prevent_opt.save = true
console.log(this.editAssetDiscovery)
const params = this.$lodash.cloneDeep(this.editAssetDiscovery)
params.schedule.stime = this.momentStrToTimestamp(params.schedule.stime)
if (this.editAssetDiscovery.id) {

View File

@@ -4,36 +4,41 @@
placement="bottom-start"
:width="inputWidth"
trigger="click"
style="display: inline-block"
ref="historyPopover"
style="display: inline-block;vertical-align: middle"
:append-to-body="false"
>
<div slot="reference" class="history-icon" @click="historyFocus">
<el-input ref="history" style="display: none" @keydown.native="keydown"/>
<i class="nz-icon nz-icon-time"/>
</div>
<div class="search-content history-content">
<div class="history-content-box">
<div class="history-content-header">{{$t('search.recentSearch')}} <i class="nz-icon nz-icon-close" @click="closeHistoryPopover"/></div>
<div class="search-content history-content" v-if="historyArr.length">
<div
v-for="(item, index) in historyArr"
@mouseenter="historyIndex = index"
:key="'search-item-history' + index"
class="search-item text-ellipsis"
:ref="'search-item' + index"
:ref="'search-item-history' + index"
:class="{'search-item-select': index === historyIndex}"
:title="renderHistoryTitle(item)"
@click="selectHistory(item)"
@click="selectHistory(item, index)"
>
<span v-for="(tag, tIndex) in item" :key="index + '-' +tIndex" class="search-box-tag" style="margin-right: 3px">
<span>{{tag.i18n}}:</span>
<span v-for="(value, vIndex) in tag.value" :key="'history-item-'+index + '-' +tIndex+'-' + vIndex">{{value}} <span v-if="tag.value.length - 1 > vIndex">,</span></span>
<span v-for="(tag, tIndex) in item" :key="index + '-' +tIndex" style="margin-right: 3px">
<span>{{tag.i18n}}:[</span>
<span v-for="(value, vIndex) in tag.value" :key="'history-item-'+index + '-' +tIndex+'-' + vIndex">"{{value}}"<span v-if="tag.value.length - 1 > vIndex">,</span></span>]
</span>
</div>
</div>
<div v-else class="search-history-box-noData">{{$t('overall.noData')}}</div>
</div>
</el-popover>
<el-popover
placement="bottom-start"
:width="inputWidth"
trigger="manual"
style="display: inline-block"
:popper-class="'search-content-box'"
style="display: inline-block;width: calc(100% - 32px);vertical-align: middle;position: relative;"
:append-to-body="false"
v-model="visible">
<div slot="reference" class="search-box-input" tabindex="-99" @focus="focusSearchInput">
@@ -50,28 +55,41 @@
<div v-for="(tag, tIndex) in item.value" :key="tIndex">
<span class="search-box-tag" @click="editTag(item, index)">
{{item.i18n}} :
<span >{{tag}}</span>
<span style="margin-left: 4px">{{tag}}</span>
<i class="nz-icon nz-icon-close" @click.stop="removeTagValue(tIndex, item.i18n)"/>
</span>
</div>
</div>
<span slot="reference" :key="index" class="search-box-tag" @click.stop="editTag(item, index)">
{{item.i18n}} :
<span v-if="item.value.length === 1">{{item.value[0]}}</span>
<span v-else>{{item.value.length}}</span>
<span v-if="item.value.length === 1" style="margin-left: 4px">{{item.value[0]}}</span>
<span v-else style="margin-left: 4px">{{item.value.length}} {{$t('items')}}</span>
<i class="nz-icon nz-icon-close" @click.stop="removeSelectArr(index)"/>
</span>
</el-popover>
</div>
<el-input size="mini" v-model="searchStr" @focus="searchInputFocus" @keydown.native="keydown" @blur="changeSearchStr" @keyup.native="keyup" ref="searchStr" @keypress.native="keypress" :readonly="inputReadonly" @input="inputSearchStr"></el-input>
<el-input
size="mini"
v-model="searchStr"
@focus="searchInputFocus"
@keydown.native="keydown"
@blur="changeSearchStr"
@keyup.native="keyup"
ref="searchStr"
@keypress.native="keypress"
:readonly="inputReadonly"
@input="inputSearchStr"
clearable
>
<i slot="append" class="nz-icon nz-icon-search" @click="emitSearch"/>
</el-input>
</div>
<i class="nz-icon nz-icon-search" @click="emitSearch"/>
<div class="col-line"></div>
</div>
<div
class="search-content"
id="search-box-scroll"
ref="list"
v-if="(keyShow && searchList.length) || (symbolShow) || (valueShow && valueList.length)"
infinite-scroll-disabled="disabled"
v-loadMore="{
load: valueListLoad,
@@ -83,12 +101,12 @@
<span class="icon-k">K</span> <span :title="$t(item.i18n || item.name)" class="search-item-content text-ellipsis">{{$t(item.i18n || item.name)}}</span> <span class="content-remark text-ellipsis" :title="item.type">{{item.type}}</span>
</div>
</div>
<div class="search-symbol" v-if="symbolShow" >
<div class="search-symbol" v-else-if="symbolShow" >
<div v-for="(item, index) in symbolList" @click="selectSymbol(item)" @mouseenter="selectIndex = index" :key="index" class="search-item" :ref="'search-item' + index" :class="{'search-item-select': index === selectIndex}">
<span class="icon-s">:</span> <span :title="item.label" class="search-item-content text-ellipsis">{{item.label}}</span> <span class="content-remark text-ellipsis" :title="item.remark">{{item.remark}}</span>
</div>
</div>
<div class="search-value" v-if="valueShow && valueList.length" v-my-loading="valueListInfo.loading">
<div class="search-value" v-else-if="valueShow && valueList.length" v-my-loading="valueListInfo.loading">
<!--非枚举类型-->
<div
v-if="searchBoxType!== 'enum'"
@@ -107,7 +125,11 @@
</div>
</div>
</div>
<div v-else class="search-item-title search-item-nodata" style="border-bottom: none">
{{$t('overall.noDataAvailable')}}
</div>
</div>
<div class="search-item-title">{{$t('searchBox.enterNext')}}</div>
</el-popover>
<el-dialog :title="$t('overall.edit')" class="no-transform-dialog" :visible.sync="dialogShow" @close="dialogClose" :append-to-body="false" :modal-append-to-body="false" :destroy-on-close="true">
<el-form ref="tagEdit" v-model="editDialogObj" v-if="dialogShow">
@@ -200,7 +222,7 @@ export default {
},
data () {
return {
inputWidth: 400,
inputWidth: 380,
visible: false, // 显示下拉框
searchBoxType: '', // 查询接口的 type 和name参数
searchStr: '', // input 的内容
@@ -421,7 +443,6 @@ export default {
}
},
selectSymbol (item) {
console.log(item)
this.symbol = true
if (!item) {
this.selectSymbolValue = '='
@@ -557,6 +578,10 @@ export default {
},
historyFocus () {
this.$refs.history.focus()
this.visible = false
},
closeHistoryPopover () { // 关闭历史记录弹窗
this.$refs.historyPopover.doClose()
},
renderHistoryTitle (item) {
let str = ''
@@ -571,8 +596,12 @@ export default {
})
return str
},
selectHistory (item) {
selectHistory (item, index) { // 选择历史记录后 更新顺序
this.selectArr = item
this.historyArr.splice(index, 1)
this.historyArr.unshift(item)
localStorage.setItem('nz-history-' + this.where, JSON.stringify(this.historyArr))
this.closeHistoryPopover()
this.emitSearch()
},
contentShow (key) {
@@ -663,7 +692,6 @@ export default {
})
},
setValueList: bus.debounce(function () {
console.log(123123123)
const key = this.dialogStr || this.key
const findItem = this.oldSearchList.find(item => this.$t(item.i18n) == key || key == item.name)
this.selectIndex = -1
@@ -698,7 +726,6 @@ export default {
}
}, 200),
setValueListFn () {
console.log(123123123)
const key = this.dialogStr || this.key
const findItem = this.oldSearchList.find(item => this.$t(item.i18n) == key || key == item.name)
this.selectIndex = -1
@@ -732,7 +759,6 @@ export default {
}
},
valueListLoad () {
console.log('load')
this.valueListInfo.pageNo++
this.valueListInfo.loading = true
let name = ''
@@ -886,6 +912,7 @@ export default {
this.emitSearch()
},
editTag (tag, index) {
return false
this.editTagIndex = index
this.editTagObj = this.$lodash.cloneDeep(tag)
this.dialogSraechStr = ''
@@ -1037,7 +1064,10 @@ export default {
// this.emitSearch()
},
setHistoryArr () {
this.historyArr.push(this.$lodash.cloneDeep(this.selectArr))
this.historyArr.unshift(this.$lodash.cloneDeep(this.selectArr))
if (this.historyArr.length > 20) {
this.historyArr.pop()
}
localStorage.setItem('nz-history-' + this.where, JSON.stringify(this.historyArr))
},
initHistory () {
@@ -1047,7 +1077,16 @@ export default {
const historyArr = localStorage.getItem('nz-history-' + this.where) ? JSON.parse(localStorage.getItem('nz-history-' + this.where)) : []
historyArr.forEach(item => { // todo 后续还需要处理枚举类型的中英切换
item.forEach((searchInfo) => {
searchInfo.i18n = this.$t(searchInfo.code)
let str = ''
const initialKey = searchInfo.i18n
if (initialKey[0] === '-' && initialKey[1] === '*') {
str = '-*'
} else if (initialKey[0] === '-') {
str = '-'
} else if (initialKey[0] === '*') {
str = '*'
}
searchInfo.i18n = str + this.$t(searchInfo.code)
})
})
this.historyArr = historyArr
@@ -1068,6 +1107,7 @@ export default {
},
clickOutside () { // 点击页面其他地方触发
this.visible = false
this.$nextTick(() => {
this.keyShow = false // key 的下拉
this.symbolShow = false // symbol 的下拉
this.valueShow = false // value 的下拉
@@ -1077,6 +1117,7 @@ export default {
this.symbolList = []
this.valueList = []
this.inputReadonly = false
})
// this.emitSearch()
},
scroll () { // 键盘上下选择 显示已选择的选项
@@ -1111,7 +1152,6 @@ export default {
try {
if (body) {
body = JSON.parse(body)
console.log('body', body)
Object.keys(body).forEach(key => {
let initialKey = key
let str = ''
@@ -1150,8 +1190,6 @@ export default {
} catch (e) {
}
console.log()
},
enumRenderValue (searchInfo, realValue) { // 处理枚举类型的回显
const arr = this.selectEnum(searchInfo)

View File

@@ -6,13 +6,13 @@
<div class="main-modal"></div>
<div class="main-container">
<div v-show="bottomBox.mainResizeShow" class="top-tools">
<div class="top-tool-left" style="min-width: 300px">
<div class="top-tool-left" style="min-width: 300px;flex: 1;">
<search-box v-if="from === fromRoute.alertMessage" :from="from" :position='from' :inTransform="bottomBox.inTransform" :searchMsg="searchMsg" @search="search"></search-box>
<slot name="top-tool-left"></slot>
</div>
<div :class="{'top-tool-main-right-to-left': bottomBox.showSubList}" class="top-tool-right">
<div v-if="showLayout.indexOf('searchInput') > -1" class="top-tool-search margin-r-20" :class="{'project-search alert-table asset-table endpoint-table': searchRight}">
<search-input v-if="from!== fromRoute.alertMessage" ref="searchInput" :from="from" :position='from' :inTransform="bottomBox.inTransform" :searchMsg="searchMsg" @search="search"></search-input>
<search-box v-else :from="from" :position='from' :inTransform="bottomBox.inTransform" :searchMsg="searchMsg" @search="search"></search-box>
</div>
<template>
<slot name="top-tool-right"></slot>

View File

@@ -450,7 +450,6 @@ export default {
methods: {
renderDefaultParams () {
const q = JSON.parse(this.$route.query.body)
console.log(q, 'q')
this.state = q.state
this.searchTime[0] = this.momentTz(q.startAt)
this.searchTime[1] = this.momentTz(q.endAt)
@@ -465,7 +464,6 @@ export default {
default:
this.defaultPick = 0
}
console.log(this.defaultPick)
// this.defaultPick = 11
},
batchAck () {
@@ -600,7 +598,6 @@ export default {
// this.sign = Number(row.alertRule.id)
this.$get('/alert/rule/' + row.alertRule.id).then(res => {
this.currentMsg = { ...row, alertRule: { ...res.data } }
console.log(this.currentMsg)
this.$nextTick(() => {
this.searchTimeDialog = [bus.computeTimezoneTime(new Date().getTime() - 1 * 60 * 60 * 1000), bus.computeTimezoneTime(new Date().getTime())]
this.$store.dispatch('dispatchPanelTime', {
@@ -805,7 +802,6 @@ export default {
this.$set(this.searchLabel, 'pageNo', this.pageObj.pageNo)
this.$set(this.searchLabel, 'pageSize', this.pageObj.pageSize)
// this.$set(this.searchLabel, 'state', this.state)
console.log(this.searchTime)
if (this.searchTime && this.searchTime.length > 1 && this.searchTime[0] && this.searchTime[1]) {
this.$set(this.searchLabel.body, 'startAt', [bus.timeFormate(this.timezoneToUtcTime(bus.formateTimeToTime(this.searchTime[0])), 'YYYY-MM-DD HH:mm:ss')])
this.$set(this.searchLabel.body, 'endAt', [bus.timeFormate(this.timezoneToUtcTime(bus.formateTimeToTime(this.searchTime[1])), 'YYYY-MM-DD HH:mm:ss')])
@@ -839,7 +835,6 @@ export default {
...this.searchLabel,
body: encodeURIComponent(JSON.stringify(this.searchLabel.body))
}
console.log(this.searchLabel.body)
this.$get('/alert/message/query', { ...queryParams }).then(response => {
this.tools.loading = false
if (response.code == 200) {

View File

@@ -196,7 +196,6 @@ export default {
this.rightBox.metaShow = true
},
force (item) {
console.log(item)
},
closeRightBox (refresh) {
this.rightBox.show = false