NEZ-351 perf: 滑框重构完成(alertmsg预览还有小bug)
This commit is contained in:
chenjinsong
@@ -7,103 +7,103 @@
|
||||
<div class="config">
|
||||
<left-menu >
|
||||
<div slot="content-left" class="slot-content">
|
||||
<div class="sidebar-title">{{$t('alert.alert')}}</div>
|
||||
<div class="sidebar-info">
|
||||
<div class="sidebar-info-item sidebar-info-top" @click="jumpTo('alertList')" id="alert-jump-alertlist">
|
||||
{{$t('alert.alertList')}}
|
||||
</div>
|
||||
<div class="sidebar-info-item sidebar-info-item-active">{{$t('alert.alertConfig')}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div slot="content-right" class="slot-content">
|
||||
<div class="main-list" :class="{'main-list-with-sub': bottomBox.showSubList}">
|
||||
<div class="main-modal"></div>
|
||||
<div class="top-tools" v-show="bottomBox.mainResizeShow">
|
||||
<div class="top-tool-main-right" :class="{'top-tool-main-right-to-left': bottomBox.showSubList}">
|
||||
<div class="top-tool-search float-right">
|
||||
<search-input :searchMsg="searchMsg" @search="search" :bottomBox.inTransform="bottomBox.inTransform"></search-input>
|
||||
</div>
|
||||
<button id="alert-add" @click="add" :title="$t('overall.createAlertRule')"
|
||||
class="nz-btn nz-btn-size-normal nz-btn-style-light margin-l-20">
|
||||
<i class="nz-icon-create-square nz-icon"></i>
|
||||
</button>
|
||||
<div class="sidebar-title">{{$t('alert.alert')}}</div>
|
||||
<div class="sidebar-info">
|
||||
<div class="sidebar-info-item sidebar-info-top" @click="jumpTo('alertList')" id="alert-jump-alertlist">
|
||||
{{$t('alert.alertList')}}
|
||||
</div>
|
||||
<div class="pagination-top pagination-top-hide display-none"></div>
|
||||
<div class="sidebar-info-item sidebar-info-item-active">{{$t('alert.alertConfig')}}</div>
|
||||
</div>
|
||||
<el-table
|
||||
class="nz-table"
|
||||
:data="tableData"
|
||||
border
|
||||
v-show="bottomBox.mainResizeShow"
|
||||
ref="alertRuleTable"
|
||||
tooltip-effect="light"
|
||||
:height="mainTableHeight"
|
||||
v-scrollBar:el-table="'large'"
|
||||
v-loading="tools.loading"
|
||||
:cell-class-name="messageStyle"
|
||||
style="width: 100%;"
|
||||
@sort-change="tableDataSort"
|
||||
>
|
||||
<el-table-column
|
||||
:resizable="false"
|
||||
v-for="(item, index) in tools.tablelable"
|
||||
v-if="item.show"
|
||||
:width="item.width"
|
||||
:key="`col-${index}`"
|
||||
:label="item.label"
|
||||
show-overflow-tooltip
|
||||
min-width="110px"
|
||||
:sortable="sortableShow(item.prop)"
|
||||
:prop="propTitle(item.prop)"
|
||||
:sort-orders="['ascending', 'descending']"
|
||||
>
|
||||
<template slot-scope="scope" :column="item">
|
||||
<div v-if="item.prop == 'option'" class="content-right-options">
|
||||
<span :title="$t('overall.view')" @click="detail(scope.row)" class="content-right-option" :id="'alert-detail-'+scope.row.id"><i class="nz-icon nz-icon-view"></i></span>
|
||||
<span v-if="scope.row.buildIn != 1" :title="$t('overall.edit')" @click="edit(scope.row)" class="content-right-option" :id="'alert-edit-'+scope.row.id"><i class="nz-icon nz-icon-edit"></i></span>
|
||||
<span :title="$t('overall.delete')" @click="del(scope.row)" class="content-right-option" :id="'alert-del-'+scope.row.id"><i class="el-icon-delete"></i></span>
|
||||
</div>
|
||||
<div slot="content-right" class="slot-content">
|
||||
<div class="main-list" :class="{'main-list-with-sub': bottomBox.showSubList}">
|
||||
<div class="main-modal"></div>
|
||||
<div class="top-tools" v-show="bottomBox.mainResizeShow">
|
||||
<div class="top-tool-main-right" :class="{'top-tool-main-right-to-left': bottomBox.showSubList}">
|
||||
<div class="top-tool-search float-right">
|
||||
<search-input :searchMsg="searchMsg" @search="search" :bottomBox.inTransform="bottomBox.inTransform"></search-input>
|
||||
</div>
|
||||
<span v-else-if="item.prop == 'severity'">
|
||||
<button id="alert-add" @click="add" :title="$t('overall.createAlertRule')"
|
||||
class="nz-btn nz-btn-size-normal nz-btn-style-light margin-l-20">
|
||||
<i class="nz-icon-create-square nz-icon"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="pagination-top pagination-top-hide display-none"></div>
|
||||
</div>
|
||||
<el-table
|
||||
class="nz-table"
|
||||
:data="tableData"
|
||||
border
|
||||
v-show="bottomBox.mainResizeShow"
|
||||
ref="alertRuleTable"
|
||||
tooltip-effect="light"
|
||||
:height="mainTableHeight"
|
||||
v-scrollBar:el-table="'large'"
|
||||
v-loading="tools.loading"
|
||||
:cell-class-name="messageStyle"
|
||||
style="width: 100%;"
|
||||
@sort-change="tableDataSort"
|
||||
>
|
||||
<el-table-column
|
||||
:resizable="false"
|
||||
v-for="(item, index) in tools.tablelable"
|
||||
v-if="item.show"
|
||||
:width="item.width"
|
||||
:key="`col-${index}`"
|
||||
:label="item.label"
|
||||
show-overflow-tooltip
|
||||
min-width="110px"
|
||||
:sort-orders="['ascending', 'descending']"
|
||||
:sortable="sortableShow(item.prop)"
|
||||
:prop="propTitle(item.prop)"
|
||||
>
|
||||
<template slot-scope="scope" :column="item">
|
||||
<div v-if="item.prop == 'option'" class="content-right-options">
|
||||
<span :title="$t('overall.view')" @click="detail(scope.row)" class="content-right-option" :id="'alert-detail-'+scope.row.id"><i class="nz-icon nz-icon-view"></i></span>
|
||||
<span v-if="scope.row.buildIn != 1" :title="$t('overall.edit')" @click="edit(scope.row)" class="content-right-option" :id="'alert-edit-'+scope.row.id"><i class="nz-icon nz-icon-edit"></i></span>
|
||||
<span :title="$t('overall.delete')" @click="del(scope.row)" class="content-right-option" :id="'alert-del-'+scope.row.id"><i class="el-icon-delete"></i></span>
|
||||
</div>
|
||||
<span v-else-if="item.prop == 'severity'">
|
||||
<span v-if="scope.row[item.prop] == 'high'"><i class="el-icon-arrow-up"></i> {{severityData[1].value}}</span>
|
||||
<span style="padding-left: 18px;" v-if="scope.row[item.prop] == 'medium'">{{severityData[0].value}}</span>
|
||||
<span v-if="scope.row[item.prop] == 'low'"><i class="el-icon-arrow-down"></i> {{severityData[2].value}}</span>
|
||||
</span>
|
||||
<template v-else-if="item.prop == 'alertNum'">
|
||||
<span class="link" @click="queryMessage(scope.row)">{{scope.row.alertNum + ' ' + $t('overall.active')}}</span>
|
||||
<template v-else-if="item.prop == 'alertNum'">
|
||||
<span class="link" @click="queryMessage(scope.row)">{{scope.row.alertNum + ' ' + $t('overall.active')}}</span>
|
||||
</template>
|
||||
<template v-else-if="item.prop == 'threshold'">
|
||||
<span >{{formatThreshold(scope.row[item.prop],scope.row.unit)}}</span>
|
||||
</template>
|
||||
<template v-else-if="item.prop == 'receivers'">
|
||||
<el-tag effect="dark" v-if="user.userName" :key="index" size="mini" v-for="(user, index) in scope.row[item.prop]" class="alert-rule-tag">{{user.userName}} </el-tag>
|
||||
</template>
|
||||
<span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
|
||||
<template v-else>-</template>
|
||||
</template>
|
||||
<template v-else-if="item.prop == 'threshold'">
|
||||
<span >{{formatThreshold(scope.row[item.prop],scope.row.unit)}}</span>
|
||||
</template>
|
||||
<template v-else-if="item.prop == 'receivers'">
|
||||
<el-tag effect="dark" v-if="user.userName" :key="index" size="mini" v-for="(user, index) in scope.row[item.prop]" class="alert-rule-tag">{{user.userName}} </el-tag>
|
||||
</template>
|
||||
<span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
|
||||
<template v-else>-</template>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column width="28" :resizable="false">
|
||||
<template slot="header" slot-scope="scope">
|
||||
</el-table-column>
|
||||
<el-table-column width="28" :resizable="false">
|
||||
<template slot="header" slot-scope="scope">
|
||||
<span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear">
|
||||
<i class="nz-icon nz-icon-gear"></i>
|
||||
</span>
|
||||
</template>
|
||||
<template v-slot="scope">
|
||||
<button v-if="scope.$index == 0" class="to-top" :style="{top: tools.toTopBtnTop}" :class="{'to-top-is-hover': tools.tableHover}" v-show="tools.showTopBtn && bottomBox.mainResizeShow" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="pagination-bottom" v-show="!bottomBox.showSubList">
|
||||
<Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
|
||||
</template>
|
||||
<template v-slot="scope">
|
||||
<button v-if="scope.$index == 0" class="to-top" :style="{top: tools.toTopBtnTop}" :class="{'to-top-is-hover': tools.tableHover}" v-show="tools.showTopBtn && bottomBox.mainResizeShow" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="pagination-bottom" v-show="!bottomBox.showSubList">
|
||||
<Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
|
||||
</div>
|
||||
</div>
|
||||
<transition name="el-zoom-in-bottom">
|
||||
<bottom-box v-if="bottomBox.showSubList" :sub-resize-show="bottomBox.subResizeShow" :obj="bottomBox.alertRule" :is-full-screen="bottomBox.isFullScreen" :from="'alertRule'" :target-tab.sync="bottomBox.targetTab" :detail="bottomBox.ruleDetail"
|
||||
@closeSubList="bottomBox.showSubList = false" @fullScreen="fullScreen" @exitFullScreen="exitFullScreen" @listResize="listResize" ></bottom-box>
|
||||
</transition>
|
||||
</div>
|
||||
<transition name="el-zoom-in-bottom">
|
||||
<bottom-box v-if="bottomBox.showSubList" :sub-resize-show="bottomBox.subResizeShow" :obj="bottomBox.alertRule" :is-full-screen="bottomBox.isFullScreen" :from="'alertRule'" :target-tab.sync="bottomBox.targetTab" :detail="bottomBox.ruleDetail"
|
||||
@closeSubList="bottomBox.showSubList = false" @fullScreen="fullScreen" @exitFullScreen="exitFullScreen" @listResize="listResize" ></bottom-box>
|
||||
</transition>
|
||||
</div>
|
||||
</left-menu>
|
||||
<transition name="right-box">
|
||||
<alert-config-box :alert-rule="alertRule" @close="closeRightBox" ref="alertConfigBox"></alert-config-box>
|
||||
<alert-config-box v-if="rightBox.show" :alert-rule="alertRule" @close="closeRightBox" ref="alertConfigBox"></alert-config-box>
|
||||
</transition>
|
||||
<element-set
|
||||
v-if="tools.showElementSet"
|
||||
@@ -124,6 +124,10 @@
|
||||
name: "alert-config",
|
||||
data() {
|
||||
return {
|
||||
//侧滑
|
||||
rightBox: {
|
||||
show: false,
|
||||
},
|
||||
/*二级页面相关*/
|
||||
bottomBox: {
|
||||
ruleDetail: {},
|
||||
@@ -329,9 +333,10 @@
|
||||
},
|
||||
edit(u) {
|
||||
this.alertRule = JSON.parse(JSON.stringify(u));
|
||||
this.$refs.alertConfigBox.show();
|
||||
this.rightBox.show = true;
|
||||
},
|
||||
closeRightBox(refresh) {
|
||||
this.rightBox.show = false;
|
||||
if (refresh) {
|
||||
this.getTableData();
|
||||
}
|
||||
@@ -362,7 +367,7 @@
|
||||
},
|
||||
add() {
|
||||
this.alertRule = this.newAlertRule();
|
||||
this.$refs.alertConfigBox.show();
|
||||
this.rightBox.show = true;
|
||||
},
|
||||
newAlertRule() {
|
||||
return JSON.parse(JSON.stringify(this.blankAlertRule));
|
||||
@@ -556,7 +561,15 @@
|
||||
this.getTableData();
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
alertConfigListChange() {
|
||||
return this.$store.state.alertConfigListChange;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
alertConfigListChange(n) {
|
||||
this.getTableData();
|
||||
},
|
||||
'bottomBox.showSubList': function(n) {
|
||||
let vm = this;
|
||||
this.$bottomBoxWindow.showSubListWatch(vm, n);
|
||||
|
||||
Reference in New Issue
Block a user