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

perf: VueX缩减、优化; 表头编辑插件重构

Browse Source
This commit is contained in:
chenjinsong
2020-08-04 21:53:06 +08:00
parent 0bff11644f
commit 06a3000af1
21 changed files with 472 additions and 1425 deletions
Download Patch File Download Diff File Expand all files Collapse all files

153
nezha-fronted/src/components/common/alert/alertMessageTable.vue
View File

@@ -8,17 +8,27 @@
<i style="cursor: pointer" class="el-icon-delete"></i>
</div>
</transition>
<!-- 自定义table列 -->
<transition name="el-zoom-in-top">
<element-set
v-if="tools.showCustomTableTitle"
@close="tools.showCustomTableTitle = false"
:custom-table-title.sync="tools.customTableTitle"
:original-table-title="tableTitle"
ref="customTableTitle"
></element-set>
</transition>
<!--表格-->
<el-table
class="nz-table tabelH100"
:data="tableData"
border
v-show="mainResizeShow"
v-show="bottomBox.mainResizeShow"
ref="alertListTable"
tooltip-effect="light"
:height="tableHeight"
v-scrollBar:el-table="'large'"
v-loading="loading"
v-loading="tools.loading"
:cell-class-name="labelsClassName"
@selection-change="selectChange"
style="width: 100%;height: 100%"
@@ -34,7 +44,7 @@
</el-table-column>
<el-table-column
:resizable="false"
v-for="(item, index) in tablelable"
v-for="(item, index) in tools.customTableTitle"
v-if="item.show"
:width="item.width"
:minWidth="item.minWidth"
@@ -48,9 +58,6 @@
>
<template slot-scope="scope" :column="item">
<template v-if="item.prop == 'alertRule'">
<!--<div class="link too-long-split"
@click="viewRule(scope.row[item.prop].id)" :id="'view-rule-'+scope.row[item.prop].id"
v-if="scope.row[item.prop].alertName">{{scope.row[item.prop].alertName}}</div>-->
<span class="too-long-split pointer" v-if="scope.row[item.prop].alertName" @mouseover="alertMessagehover(scope.row,scope.$index)">
<el-tooltip
:placement="scope.$index==0?'right-start':(scope.$index==tableData.length-1?'right-end':'right')"
@@ -61,11 +68,6 @@
</span>
<template v-else>-</template>
</template>
<!--<div v-else-if="item.prop == 'type'" class="content-right-options">
<span v-if="scope.row[item.prop] == 1">Project</span>
<span v-if="scope.row[item.prop] == 2">Module</span>
<span v-if="scope.row[item.prop] == 3">Device</span>
</div>-->
<template v-else-if="item.prop == 'summary'">
<template v-if="scope.row[item.prop]">{{scope.row[item.prop]}}</template>
<template v-else>-</template>
@@ -79,15 +81,6 @@
<span style="padding-left: 18px;" v-if="scope.row[item.prop] == 'medium'">{{returnSeverityLabel(scope.row[item.prop])}}</span>
<span v-if="scope.row[item.prop] == 'low'"><i class="el-icon-arrow-down"></i>&nbsp;{{returnSeverityLabel(scope.row[item.prop])}}</span>
</span>
<!--<div v-else-if="item.prop == 'linkObject'">
<span v-if="(scope.row['type'] == 1 || scope.row['type'] == 2) && scope.row[item.prop]" class="link too-long-split"
@click="viewAlertType(scope.row['type'],scope.row[item.prop])" style="max-width: 125px;"
:id="'link-obj-'+scope.row['type']+'-'+scope.row[item.prop].id">{{scope.row[item.prop].name}}</span>
<span v-else-if="scope.row['type'] == 3 && scope.row[item.prop]" class="link"
@click="viewAlertType(scope.row['type'],scope.row[item.prop].id)"
:id="'link-obj-'+scope.row['type']+'-'+scope.row[item.prop].id">{{scope.row[item.prop].host}}</span>
<span v-else>-</span>
</div>-->
<template v-else-if="item.prop == 'labels'" class="labels">
<el-tooltip
v-for="item in labelsSort(scope.row.labels)"
@@ -114,12 +107,6 @@
</nz-alert-tag>
</span>
</el-tooltip>
<!--<el-tag @click="showTagDetail(scope.row, key)"
:key="key"
:class="{'link': key == 'asset' || key == 'endpoint' || key == 'project' || key == 'module' || key == 'datacenter'}"
v-if="key != 'alertname' && key != 'severity'"
:type="tagType(key)"
size="mini" v-for="(value, key) in scope.row.labels" class="alert-message-tag">{{tagValue(key, value)}}</el-tag>-->
</template>
<div v-else-if="item.prop == 'state'">
<span class="">
@@ -147,25 +134,25 @@
<el-table-column width="28" :resizable="false">
<template slot="header" slot-scope="scope">
<span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear">
<span @mousedown.stop="!tools.showCustomTableTitle && (tools.showCustomTableTitle = true)" 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: toTopBtnTop}" :class="{'to-top-is-hover': tableHover}" v-show="showTopBtn && mainResizeShow" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
<button v-if="scope.$index == 0" class="to-top" :style="{top: tools.toTopBtnTop}" :class="{'to-top-is-hover': tools.tableHover}" v-show="tools.showTopBtn && tools.mainResizeShow" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
</template>
</el-table-column>
</el-table>
<!--<弹窗>-->
<!--删除弹窗-->
<element-set
<!--<element-set
v-clickoutside="elementsetHide"
:table-title="tableTitle"
:dropCol="dropCol"
@tablelable="tablelabelEmit"
ref="elementset"
:path="this.fromPath"
></element-set>
></element-set>-->
<!--导出-->
<div class="export-xlsx">
<el-dialog :visible.sync="importBox.show" :title="importBox.title" :modal-append-to-body='false' :show-close="true" width="300px" @close="closeDialog" class="nz-dialog">
@@ -244,16 +231,25 @@
/*二级列表相关*/
tabList: [], //二级列表的标签
tabDetailList: [], //多个详情
targetTab: '', //展示二级列表中的哪个页签
inTransform: false, //搜索框相关，搜索条件下拉框是否在transform里
mainResizeShow: true, //dom高度改变时部分内容是否展示
bottomBox: {
tabList: [], //二级列表的标签
tabDetailList: [], //多个详情
mainResizeShow: true, //dom高度改变时是否展示|隐藏
subResizeShow: true,
isFullScreen: false,
showSubList: false, //是否展示二级列表
mainTableHeight: this.$tableHeight.normal, //主列表table高度
isFullScreen: false, //全屏状态
showSubList: false, //是否显示二级列表
targetTab: '', //显示二级列表中的哪个页签
inTransform: false, //搜索框相关，搜索条件下拉框是否在transform里
},
/*工具参数*/
tools: {
loading: false, //是否显示table加载动画
toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性
tableHover: false, //控制滚动条和top按钮同时出现
showTopBtn: false, //显示To top按钮
showCustomTableTitle: false, //自定义列弹框是否显示
customTableTitle: [], //自定义列工具的数据
},
//导出相关
importBox: {show: false, title:this.$t('overall.exportExcel')},
@@ -267,7 +263,6 @@
searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()],
currentMsg: {},
chartUnit: 5,
showTopBtn: false,
pageObj: {
pageNo: 1,
pageSize: 50,
@@ -329,8 +324,6 @@
width: 90
}
],
tablelable: [],
dropCol: [],
viewRuleData: {
id: '',
alertName: '',
@@ -390,36 +383,6 @@
})
return result;
},
elementsetShow(s, e) {
var eventfixed = {
shezhi: 0,
screen: 0
};
eventfixed[s] = 1;
e.preventDefault();
this.$store.commit('setHeaderTable', this.tablelable);
this.$store.commit('setEventfixed', eventfixed);
const h = document.documentElement.clientHeight;
const w = document.documentElement.clientWidth;
const dw = this.$refs.elementset.$el.offsetWidth;
const dh = this.$refs.elementset.$el.offsetHeight;
let positionx =
e.clientX + dw <= w - 10 ? e.clientX + 14 : e.clientX + 14 - dw;
let positiony =
e.clientY + dh <= h - 10
? e.clientY + 20
: e.clientY + 20 - (e.clientY + dh - h);
this.$store.commit('setPosition', {positionx, positiony});
},
elementsetHide() {
//悬浮点击空白隐藏
this.$refs.elementset.elementsetHide();
},
tablelabelEmit(data) {
//获取子组件传过来的参数
this.$store.commit('setHeaderTable', data);
this.tablelable = data;
},
chartUnitChange:function(unit){
this.chartUnit=unit;
this.$nextTick(()=>{
@@ -435,7 +398,7 @@
}
},
queryChartDate() {
let $temp=this;
let $temp = this;
let start = this.searchTime[0]?this.searchTime[0]:this.getTime(-1, 'h');
let end = this.searchTime[1]?this.searchTime[1]:this.getTime(0, 'h');
this.searchTime = [start, end];
@@ -618,7 +581,7 @@
},
deleteMessage() {
this.$emit('deleteMessage',this.deleteBox);
console.log(this.deleteBox);
//console.log(this.deleteBox);
this.deleteBox.show = false;
this.deleteBox.ids=[];
},
@@ -695,14 +658,17 @@
},
// 全屏
fullScreen() {
let vm = this;
this.$bottomBoxWindow.fullScreen(vm);
},
// 退出全屏
exitFullScreen() {
let vm = this;
this.$bottomBoxWindow.exitFullScreen(vm);
},
// 鼠标拖动二级列表
listResize(e) {
let vm = this;
this.$bottomBoxWindow.listResize(vm, e);
},
showTagDetail(data, key) {
@@ -719,10 +685,8 @@
detailList.push(data[item]);
}
}
this.showSubList = true;
this.bottomBox.showSubList = true;
this.tabList = labelList;
/*this.tabDetailList = detailList;
this.targetTab = key;*/
}
},
labelsClassName(row) {
@@ -732,18 +696,7 @@
return "";
}
},
jumpTo(data, id) {
bus.$emit("menu-change", data);
this.$store.state.assetData.moduleData = data
this.$store.state.assetData.selectedData = id
this.$router.push({
path: "/" + data,
query: {
t: +new Date()
}
});
},
viewRule: function (id) {
viewRule(id) {
this.closeViews();
this.$get('alert/rule', {"id": id}).then(response => {
if (response.code == 200) {
@@ -817,16 +770,6 @@
},
// 数据排序
tableDataSort(item){
// let orderBy='';
// if(item.order==='ascending'){
// orderBy=item.prop;
// }
// if(item.order==='descending'){
// orderBy='-'+item.prop;
// }
// this.pageObj.orderBy=orderBy;
// this.$set(this.searchLabel, "orderBy", orderBy);
// this.getAlertList();
this.$emit('tableDataSort',item);
},
// label tooltip是否显示
@@ -866,6 +809,10 @@
},
},
mounted() {
//初始化表头
this.tools.customTableTitle = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
: this.tableTitle;
//是否存在分页缓存
let pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId);
if (pageSize != 'undefined' && pageSize != null) {
@@ -879,20 +826,20 @@
if (el._ps_) {
el.addEventListener("ps-scroll-y", () => {
if (el._ps_.scrollbarYTop > 50) {
this.showTopBtn = true;
this.tools.showTopBtn = true;
} else {
this.showTopBtn = false;
this.tools.showTopBtn = false;
}
});
el.addEventListener("mouseenter", () => {
this.tableHover = true;
this.tools.tableHover = true;
});
el.addEventListener("mouseleave", () => {
this.tableHover = false;
this.tools.tableHover = false;
});
}
});
if(this.from=='alertMessage'){
/*if(this.from=='alertMessage'){
this.tablelable = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
: this.tableTitle;
@@ -910,7 +857,7 @@
: this.tableTitle;
console.log(2);
}
console.log( this.tableTitle,this.fromPath,this.form,this.tablelable);
console.log( this.tableTitle,this.fromPath,this.form,this.tablelable);*/
}
}

88
nezha-fronted/src/components/common/bottomBox/tabs/endpointTab.vue
View File

@@ -27,10 +27,20 @@
</export-excel>
</div>
</div>
<!-- 自定义table列 -->
<transition name="el-zoom-in-top">
<element-set
v-if="tools.showCustomTableTitle"
@close="tools.showCustomTableTitle = false"
:custom-table-title.sync="tools.customTableTitle"
:original-table-title="tableTitle"
ref="customTableTitle"
></element-set>
</transition>
<el-table
:data="tableData"
border
v-loading="loading"
v-loading="tools.loading"
class="nz-table endpoint-table"
:height="$tableHeight.noPagination"
v-scrollBar:el-table="'large'"
@@ -40,7 +50,7 @@
>
<el-table-column
:resizable="false"
v-for="(item, index) in tablelable"
v-for="(item, index) in tools.customTableTitle"
v-if="item.show"
:width="item.width"
:key="`col-${index}`"
@@ -76,24 +86,16 @@
</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">
<span @mousedown.stop="!tools.showCustomTableTitle && (tools.showCustomTableTitle = true)" 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: toTopBtnTop}" :class="{'to-top-is-hover': tableHover}" v-show="showTopBtn" @click="$toTop('ps', 1)"><i class="nz-icon nz-icon-top"></i></button>
<button v-if="scope.$index == 0" class="to-top" :style="{top: tools.toTopBtnTop}" :class="{'to-top-is-hover': tools.tableHover}" v-show="tools.showTopBtn" @click="$toTop('ps', 1)"><i class="nz-icon nz-icon-top"></i></button>
</template>
</el-table-column>
</el-table>
<element-set
v-clickoutside="elementsetHide"
:table-title="tableTitle"
:dropCol="dropCol"
@tablelable="tablelabelEmit"
:path="'/assetEndpoint'"
ref="elementset"
></element-set>
<transition name="right-box">
<add-endpoint-box v-if="rightBox.add.show" :current-project="currentProject" :current-module="currentModule" @close="closeRightBox" ref="addEndpointBox"></add-endpoint-box>
</transition>
@@ -119,15 +121,19 @@
add: {show: false},
edit: {show: false},
},
endpoint: {}, //用来查看详情和编辑的对象
//asset: {}, //对应props的obj
showTopBtn: false, //top按钮是否显示
/*工具参数*/
tools: {
loading: false, //是否显示table加载动画
toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性
tableHover: false, //控制滚动条和top按钮同时出现
showTopBtn: false, //显示To top按钮
showCustomTableTitle: false, //自定义列弹框是否显示
customTableTitle: [], //自定义列工具的数据
},
endpoint: {}, //用来查看详情和编辑的对象
endpointSearchLabel:{
},
loading: false,
tableTitle: [
{
label: this.$t("project.endpoint.endpointId"),
@@ -213,11 +219,11 @@
this.$emit('changeTab', tab);
},
getTableData() {
this.loading = true;
this.tools.loading = true;
this.$set(this.endpointSearchLabel, "assetId", this.asset.id);
this.$set(this.endpointSearchLabel, "pageSize", '-1');
this.$get('/endpoint',this.endpointSearchLabel).then(response => {
this.loading = false;
this.tools.loading = false;
if (response.code === 200) {
this.tableData = response.data.list;
this.$emit("reload");
@@ -262,36 +268,6 @@
}
this.getTableData();
},
elementsetShow(s, e) {
var eventfixed = {
shezhi: 0,
screen: 0
};
eventfixed[s] = 1;
e.preventDefault();
this.$store.commit('setHeaderTable', this.tablelable);
this.$store.commit('setEventfixed', eventfixed);
const h = document.documentElement.clientHeight;
const w = document.documentElement.clientWidth;
const dw = this.$refs.elementset.$el.offsetWidth;
const dh = this.$refs.elementset.$el.offsetHeight;
let positionx =
e.clientX + dw <= w - 10 ? e.clientX + 14 : e.clientX + 14 - dw;
let positiony =
e.clientY + dh <= h - 10
? e.clientY + 20
: e.clientY + 20 - (e.clientY + dh - h);
this.$store.commit('setPosition', { positionx, positiony });
},
elementsetHide() {
//悬浮点击空白隐藏
this.$refs.elementset.elementsetHide();
},
tablelabelEmit(data) {
//获取子组件传过来的参数
this.$store.commit('setHeaderTable', data);
this.tablelable = data;
},
dateFormat(time) {
if (!time) {
return '-';
@@ -386,11 +362,9 @@
}
},
mounted() {
this.tablelable = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-/assetEndpoint")
? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-/assetEndpoint"))
: this.tableTitle;
this.dropCol = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-/assetEndpoint")
? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-/assetEndpoint"))
//初始化表头
this.tools.customTableTitle = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-/project")
? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-/project"))
: this.tableTitle;
this.$nextTick(() => {
@@ -399,16 +373,16 @@
if (el._ps_) {
el.addEventListener("ps-scroll-y", () => {
if (el._ps_.scrollbarYTop > 50) {
this.showTopBtn = true;
this.tools.showTopBtn = true;
} else {
this.showTopBtn = false;
this.tools.showTopBtn = false;
}
});
el.addEventListener("mouseenter", () => {
this.tableHover = true;
this.tools.tableHover = true;
});
el.addEventListener("mouseleave", () => {
this.tableHover = false;
this.tools.tableHover = false;
});
}
});

164
nezha-fronted/src/components/common/elementSet.vue
View File

@@ -1,28 +1,14 @@
<template>
<div
class="pop-elementset"
:style="{opacity:(eventfixedVal.shezhi==1),left:(eventfixedVal.shezhi==1 ? event_positionx : -2000)+'px',top:(event_positiony)+'px'}"
>
<!--<div class="pop-top-btns">
<button type="button" @click="shezhiControl('ok')" class="nz-btn nz-btn-size-alien nz-btn-size-small nz-btn-style-light nz-btn-min-width-35" id="element-set-ok">
<span class="pop-top-btn-icon"><i class="nz-icon nz-icon-edit"></i></span>
<span class="pop-top-btn-txt">{{$t('overall.save')}}</span>
</button>
<button type="button" @click="shezhiControl('cancel')" class="nz-btn nz-btn-size-alien nz-btn-size-small nz-btn-style-light nz-btn-min-width-35" id="element-set-esc">
<span class="pop-top-btn-icon"><i class="el-icon-close"></i></span>
<span class="pop-top-btn-txt">{{$t('overall.esc')}}</span>
</button>
</div>-->
<div class="pop-custom" v-clickoutside="esc">
<div class="pop-title">{{$t('overall.select')}}</div>
<div class="pop-box elementset-labels">
<div class="pop-box custom-labels">
<el-scrollbar style="height: 100%;">
<div
v-for="(item,index) in dropColRes"
v-for="(item,index) in custom"
:key="index"
class="elementset-label"
:class="!allowedAll&&(index==0 || index == 1) ? 'elementset-label-disabled' : ''"
:title="item.visibility == 'disabled' ? other.inDevelopment : ''"
@click="addcol(item,index)"
class="custom-label"
:class="!allowedAll && (index==0 || index == 1) ? 'custom-label-disabled' : ''"
@click="handler(item,index)"
:id="'element-set-el-'+index"
>
<i class="el-icon-check" v-if="!allowedAll&&(index==0||index==1||item.visibility=='disabled')"></i>
@@ -31,140 +17,100 @@
</div>
</el-scrollbar>
</div>
<div class="elementset-bottom-btns">
<button v-if="isCancel" type="button" @click="dropAll(false)" class="nz-btn nz-btn-size-small nz-btn-style-light nz-btn-min-width-35 is-cancel">
<div class="custom-bottom-btns">
<button v-if="isCancel" type="button" @click="batchHandler(false)" class="nz-btn nz-btn-size-small nz-btn-style-light nz-btn-min-width-35 is-cancel">
<span class="top-tool-btn-txt">{{$t('overall.clear')}}</span>
</button>
<button v-if="!isCancel" type="button" @click="dropAll(true)" class="nz-btn nz-btn-size-small nz-btn-style-light nz-btn-min-width-35">
<button v-if="!isCancel" type="button" @click="batchHandler(true)" class="nz-btn nz-btn-size-small nz-btn-style-light nz-btn-min-width-35">
<span class="top-tool-btn-txt">{{$t('overall.all')}}</span>
</button>
<div>
<button type="button" @click="shezhiControl('cancel')" class="nz-btn nz-btn-size-small nz-btn-style-light nz-btn-min-width-35">
<button type="button" @click="esc" class="nz-btn nz-btn-size-small nz-btn-style-light nz-btn-min-width-35">
<span class="top-tool-btn-txt">{{$t('overall.esc')}}</span>
</button>
<button type="button" @click="shezhiControl('ok')" class="nz-btn nz-btn-size-small nz-btn-style-normal nz-btn-min-width-35">
<button type="button" @click="save" class="nz-btn nz-btn-size-small nz-btn-style-normal nz-btn-min-width-35">
<span class="top-tool-btn-txt">{{$t('overall.save')}}</span>
</button>
</div>
<!--<button type="button" @click="dropAll(false)" class="nz-btn nz-btn-size-normal nz-btn-style-light">
<span class="top-tool-btn-txt">{{$t('overall.cancel')}}</span>
</button>-->
</div>
</div>
</template>
<script>
export default {
// props: ["dropCol","tableTitle","path"],
props:{
dropCol:{},
tableTitle:{},
path:{},
allowedAll:{default:false},
customTableTitle: Array, //自定义的title
originalTableTitle: Array, //原始title
path: String,
allowedAll: {default: false},
},
data() {
return {
other: this.$t("overall.other"),
event_positiony: 0,
event_positionx: 0,
eventfixedVal: {},
dropColRes: JSON.parse(JSON.stringify(this.dropCol)),
titles: JSON.parse(JSON.stringify(this.tableTitle))
custom: [],
};
},
mounted() {},
created() {
let localStorageTitle=JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path));
if(localStorageTitle){
for(let title of this.titles){
for(let lsTitle of localStorageTitle){
if(lsTitle.prop === title.prop){
lsTitle.label=title.label;
let localStorageTitle = JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path));
if (localStorageTitle ){
for (let title of this.originalTableTitle) {
for (let lsTitle of localStorageTitle) {
if (lsTitle.prop === title.prop){
lsTitle.label = title.label;
}
}
}
localStorage.setItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path,JSON.stringify(localStorageTitle))
localStorage.setItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path, JSON.stringify(localStorageTitle))
}
},
watch: {
dropCol: {
customTableTitle: {
immediate: true,
deep: true,
handler(data) {
this.dropColRes = JSON.parse(JSON.stringify(data));
handler(n) {
this.custom = JSON.parse(JSON.stringify(n));
},
},
position: {
//监听设置icon的显示位置
handler(data) {
this.event_positiony = data.positiony;
this.event_positionx = data.positionx;
},
immediate: true
},
eventfixed: {
handler(data) {
if (data)
this.eventfixedVal = data;
},
immediate: true
}
},
methods: {
//悬浮点击空白隐藏
elementsetHide() {
this.eventfixedVal.shezhi = 0;
esc() {
this.$emit('close');
},
//点击全选all或者cancel按钮
dropAll(state) {
for (let index = 0; index < this.dropColRes.length; index++) {
//全选all true 或者全取消cancel false按钮
batchHandler(state) {
for (let index = 0; index < this.custom.length; index++) {
if (index == 0 || index == 1) {
this.dropColRes[index].show = true;
this.custom[index].show = true;
} else {
this.dropColRes[index].show = state;
this.custom[index].show = state;
}
}
},
//下拉选项选择
addcol(val, index) {
if (!this.allowedAll&&(index == 0 || index == 1)) {
this.dropColRes[index].show = true;
//单选
handler(val, index) {
if (!this.allowedAll && (index == 0 || index == 1)) {
this.custom[index].show = true;
} else {
this.dropColRes[index].show = !this.dropColRes[index].show;
this.custom[index].show = !this.custom[index].show;
}
},
//点击第二个cancel
shezhiControl(t) {
if (t == "ok") {
this.$emit("tablelable", JSON.parse(JSON.stringify(this.dropColRes)));
save() {
this.$emit('update:customTableTitle', this.custom);
localStorage.setItem(
"nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + ((typeof this.path != 'undefined') ? this.path : this.$route.path),
JSON.stringify(this.tablelable)
JSON.stringify(this.custom)
);
} else {
this.dropColRes = JSON.parse(JSON.stringify(this.tablelable));
}
this.elementsetHide();
this.esc();
},
},
computed: {
eventfixed() {
return this.$store.state.eventfixed;
},
position() {
return this.$store.state.position;
},
tablelable() {
return this.$store.state.tablelable;
},
//点击all是否是全部取消选中，true为是
isCancel() {
let isCancel = true;
for (let i = 0; i < this.dropColRes.length; i++) {
if (!this.dropColRes[i].show) {
for (let i = 0; i < this.custom.length; i++) {
if (!this.custom[i].show) {
isCancel = false;
break;
}
@@ -175,45 +121,47 @@ export default {
};
</script>
<style lang="scss" scoped>
.pop-elementset {
<style lang="scss">
.pop-custom {
padding: 0 12px 12px 12px;
border: 1px solid #EBEEF5;
box-shadow: $pop-box-shadow;
position: fixed;
top: 0;
left: 10px;
position: absolute;
top: 83px;
right: 0;
width: 200px;
color: #606266;
background: #fff;
border-radius: 4px;
z-index: 999999;
}
.elementset-labels {
.relative-position .pop-custom {
top: 33px;
}
.custom-labels {
margin-top: 12px;
width: 100%;
height: 300px;
}
.elementset-labels i {
.custom-labels i {
color: #04b330;
font-size: 14px;
position: absolute;
left: 5px;
top: 6px;
}
.elementset-label {
.custom-label {
padding: 2px 0 2px 25px;
position: relative;
cursor: default;
font-size: 14px;
}
.elementset-label-disabled {
.custom-label-disabled {
cursor: not-allowed;
background: #f1f3f4;
opacity: 0.7;
}
.elementset-bottom-btns {
.custom-bottom-btns {
margin-top: 7px;
display: flex;
justify-content: space-between;

8
nezha-fronted/src/components/common/header.vue
View File

@@ -58,7 +58,7 @@
<el-submenu index="3" popper-class="nz-submenu">
<template slot="title">
<div v-if="assetData.length == 0">{{$t('overall.asset')}}</div>
<div v-else @click="jumpToAsset(assetData[0])" :class="{'menu-active' : activeIndex == 'asset'}">{{$t('overall.asset')}}</div>
<div v-else @click="jumpToAsset()" :class="{'menu-active' : activeIndex == 'asset'}">{{$t('overall.asset')}}</div>
</template>
<template>
<el-menu-item v-if="assetData.length == 0" index="3-0"><div @click="createBox({type: 6})"><i class="nz-icon nz-icon-create-square header-dropdown-add"></i>&nbsp;&nbsp;{{$t("overall.createDatacenter")}}</div></el-menu-item>
@@ -366,15 +366,16 @@
}
},
jumpToAsset(dc) {
if (dc) {
this.activeItemIndex = dc.id;
bus.$emit("header-dc-change", dc.id); //发送给leftMenu，顶部dc条件改变了
}
this.jumpTo("asset", "assets");
},
jumpToProject(p) {
this.currentProject = p;
this.$store.commit('currentProjectChange', p);
bus.$emit("project-page-type", 'project');
localStorage.setItem('nz-current-project', p.id);
this.activeItemIndex = p.id;
this.jumpTo('project', 'projects');
@@ -499,7 +500,7 @@
this.refreshLang();
this.activeIndex = 'overview';
});
bus.$on("dc-list-change", () => {
bus.$on("dc-list-change", () => { //dc.vue增删改dc时刷新顶部菜单dc列表
this.getAssetData();
});
bus.$on("current-project-change", project => {
@@ -514,6 +515,7 @@
},
mounted() {
this.$i18n.locale = this.language;
this.initEvent();
this.getAssetData();
this.getUserData();
this.getProjectList();

26
nezha-fronted/src/components/common/leftMenu.vue
View File

@@ -236,19 +236,16 @@
}
},
},
dcCheckList(n, o) {
this.$store.commit("currentDcListChange", n);
/* setTimeout(() => {
if (n.length > 0 ) {
bus.$emit("asset-filter-change", "idcIds", n.join(','));
} else {
bus.$emit("asset-filter-change", "idcIds", "");
}
}, 100);*/
},
currentProject(n, o) {
bus.$emit("current-project-change", n); //告知project.vue
},
dcCheckList: {
deep: true,
immediate: true,
handler(n) {
bus.$emit("asset-filter-change", "idcIds", n.join(","));
}
}
},
mounted() {
Promise.all([this.getProjectList(), this.getModuleList(), this.getLeftMenuList()]).then(response => {
@@ -324,11 +321,14 @@
bus.$emit("project-page-type", "endpoint"); //告知project.vue
},
addModule() {
/*this.module = this.newModule();
this.module = this.newModule();
this.rightBox.module.show = true;
this.$nextTick(() => {
this.$refs.moduleBox.initWalk();
});*/
});
},
newModule() {
return JSON.parse(JSON.stringify(this.blankModule));
},
//弹出module编辑页
editModule(module) {
@@ -433,7 +433,6 @@
bus.$emit("asset-filter-change", "typeIds", "");
this.pageObj.typeIds='';
}
this.getTableData();
},
changeVendorCheckBox() {
if(this.vendorCheckList && this.vendorCheckList.length > 0){
@@ -442,7 +441,6 @@
}else{
bus.$emit("asset-filter-change", "vendorIds", "");
}
this.getTableData();
},
changePingCheckBox() {
if(this.pingCheckList && this.pingCheckList.length > 0){

236
nezha-fronted/src/components/common/popBox/dcConfig.vue
View File

@@ -1,236 +0,0 @@
<template>
<el-popover :placement="placement" @show="afterShow" width="400" @hide="hidePop" ref="popBox" v-model="popBox.show" popper-class="nz-pop">
<div class="">
<!-- begin--顶部按钮-->
<div class="pop-top-btns">
<button type="button" v-if="idc.id && idc.id != ''&& popBox.isEdit" @click="del" class="nz-btn nz-btn-size-small nz-btn-size-alien nz-btn-style-light nz-btn-min-width-60" id="dc-del">
<span class="pop-top-btn-icon"><i class="el-icon-delete"></i></span>
<span class="pop-top-btn-txt">{{$t('overall.delete')}}</span>
</button>
<button type="button" @click="saveOrToEdit" class="nz-btn nz-btn-size-alien nz-btn-size-small nz-btn-style-light nz-btn-min-width-60" id="dc-save">
<span class="pop-top-btn-icon"><i class="nz-icon nz-icon-edit"></i></span>
<span class="pop-top-btn-txt" v-if="popBox.isEdit">{{$t('overall.save')}}</span>
<span class="pop-top-btn-txt" v-else>{{$t('overall.edit')}}</span>
</button>
<button type="button" @click="esc" class="nz-btn nz-btn-size-alien nz-btn-size-small nz-btn-style-light nz-btn-min-width-35" id="dc-esc">
<span class="pop-top-btn-icon"><i class="el-icon-close"></i></span>
<span class="pop-top-btn-txt">{{$t('overall.esc')}}</span>
</button>
</div>
<!-- end--顶部按钮-->
<div class="pop-title">{{title}}</div>
<div class="pop-item-wider">
<el-form class="right-box-form" :model="idc" label-position="left" label-width="150px" :rules="rules" ref="idcForm">
<el-form-item :label="$t('asset.dcName')" prop="name">
<el-input type="text" placeholder="" v-model="idc.name" size="mini" maxlength="64" v-if="popBox.isEdit"></el-input>
<div class="right-box-form-content-txt" v-if="!popBox.isEdit">{{idc.name}}</div>
</el-form-item>
<el-form-item :label="$t('asset.location')" prop="location">
<el-input type="text" placeholder="" v-model="idc.location" size="mini" v-if="popBox.isEdit"></el-input>
<div class="right-box-form-content-txt" v-if="!popBox.isEdit">{{idc.location}}</div>
</el-form-item>
<el-form-item :label="$t('asset.principal')" prop="principal">
<el-select v-model="idc.principal" clearable size="mini" placeholder="" v-if="popBox.isEdit" popper-class="dc-dropdown">
<el-option v-for="item in principals" :key="item.id" :label="item.username" :value="item.userId"></el-option>
</el-select>
<div class="right-box-form-content-txt" v-if="!popBox.isEdit">{{idc.principal}}</div>
</el-form-item>
<el-form-item :label="$t('asset.tel')" prop="tel" >
<el-input type="text" placeholder="" v-model="idc.tel" size="mini" v-if="popBox.isEdit"></el-input>
<div class="right-box-form-content-txt" v-if="!popBox.isEdit">{{idc.tel}}</div>
</el-form-item>
</el-form>
</div>
</div>
<span :class="buttonClass" @click.prevent.stop="" slot="reference" :id="'edit-idc-'+Math.random().toString(36).slice(-8)">
<slot name="optionZone">
<i class="el-icon-plus" id="dc-plus"></i>
</slot>
</span>
</el-popover>
</template>
<script>
import {phone} from '../../common/js/validate'
export default {
name: "dcConfig",
props:{
postIdc:{type:Object},
placement:{type:String},
buttonClass:{type:String},
isEdit:{type:Boolean,default:true},
userData:{type:Array}
},
created() {
this.init();
},
data(){
return {
title:"",
rules:{
name:[
{required:true,message:this.$t('validate.required'),trigger:'blur'}
],
location:[
],
principal:[
],
tel:[
{ validator: phone, trigger: 'blur'}
]
},
idc:{},
principals:[],
popBox:{isEdit:true,show:false}
}
},
methods:{
init:function(){
let temp=this;
temp.getUserData();
},
resetData:function(){
let temp=this;
temp.idc={
name:"",
location: "",
principal: null,
tel:""
}
},
openBox:function(){
this.popBox.show=true;
},
afterShow:function(){
if(!this.popBox.isEdit){
this.popBox.isEdit=this.isEdit;
}
},
getUserData() {
let temp=this;
if(temp.userData&&temp.userData.length>0){
temp.principals=temp.userData;
return;
}
temp.$get('sys/user/list').then(response => {
if (response.code === 200) {
temp.principals = response.data.list
}
})
},
saveOrToEdit:function(){
if (!this.popBox.isEdit) {
this.toEdit(this.idc);
} else {
this.save();
}
},
save:function(){
let temp=this;
temp.$refs.idcForm.validate((valide)=>{
if(valide){
const h = temp.$createElement;
if(!temp.idc.id){
temp.$post('idc', temp.idc).then(response => {
if (response.code === 200) {
temp.$message({duration: 1000, type: 'success', message: temp.$t("tip.saveSuccess")});
temp.$emit("after");
temp.$store.commit('assetDcListChange');
temp.esc();
} else {
this.$message.error(response.msg);
}
})
}else{
this.$put('idc', temp.idc).then(response => {
if (response.code === 200) {
temp.$message({duration: 1000, type: 'success', message: temp.$t("tip.saveSuccess")});
temp.$emit("after");
temp.$store.commit('assetDcListChange');
temp.esc();
} else {
this.$message.error(response.msg);
}
})
}
}else{
return false;
}
});
},
toEdit:function(u){
this.idc = Object.assign({}, u);
this.popBox.isEdit = true;
this.title = this.$t('asset.editIdcTab.title') + " ID：" + this.idc.id
this.popBox.show = true;
},
show:function(isShow,isEdit){
this.popBox.show=isShow;
this.popBox.isEdit=isEdit;
},
esc:function(){
this.popBox.show=false;
},
del:function(){
let temp=this;
temp.$confirm(temp.$t("tip.confirmDelete"), {
confirmButtonText: temp.$t("tip.yes"),
cancelButtonText: temp.$t("tip.no"),
type: 'warning'
}).then(() => {
temp.$delete("idc?ids=" + temp.idc.id).then(response => {
if (response.code === 200) {
temp.$message({duration: 1000, type: 'success', message: temp.$t("tip.deleteSuccess")});
temp.$emit("after");
temp.$store.commit('assetDcListChange');
temp.esc();
} else {
this.$message.error(response.msg);
}
});
});
},
hidePop:function(){//隐藏事件触发方法
if(this.postIdc&&this.postIdc.id){
this.idc=this.postIdc
}else{
this.resetData();
}
this.clearValidate();
},
clearValidate:function(){
this.$refs.idcForm.clearValidate();
}
},
watch:{
postIdc: {
immediate: true,
deep: true,
handler(n, o) {
if (n && n.id) {
this.title = this.popBox.isEdit?this.$t('asset.editIdcTab.title') + " ID：" + n.id:this.$t('asset.dc') + " ID：" + n.id;
this.idc=n;
} else {
this.title = this.$t('asset.AddIdcTab.title');
this.resetData();
}
}
},
isEdit:{
immediate: true,
handler(n, o) {
this.popBox.isEdit=n;
}
}
}
}
</script>
<style scoped>
</style>

3
nezha-fronted/src/components/common/rightBox/moduleBox.vue
View File

@@ -512,7 +512,6 @@
this.$put('module', this.editModule).then(response => {
if (response.code === 200) {
this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
//this.$store.commit('moduleListChange');
this.esc(true);
} else {
this.$message.error(response.msg);
@@ -522,7 +521,6 @@
this.$post('module', this.editModule).then(response => {
if (response.code === 200) {
this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
//this.$store.commit('moduleListChange');
this.esc(true);
} else {
this.$message.error(response.msg);
@@ -544,7 +542,6 @@
this.$delete("module?ids=" + this.editModule.id).then(response => {
if (response.code === 200) {
this.$message({duration: 1000, type: 'success', message: this.$t("tip.deleteSuccess")});
//this.$store.commit('moduleListChange');
this.esc(true);
} else {
this.$message.error(response.msg);

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

@@ -222,11 +222,6 @@
downBool:false
}
},
computed: {
alertListAssetId() {
return this.$store.state.assetForAlertList;
}
},
watch: {
defaultValue: {
immediate: true,
@@ -348,100 +343,6 @@
}
}
},
/*alertListAssetId: {
immediate: true,
handler(newData, oldData) {
if (newData && this.$route.path == '/alertList') {
setTimeout(()=>{
//
//1.条件名alertType
//
this.searchLabelList.splice(2, 1);
this.select_list.push({
name: this.$t('alert.list.type'),
id: 3,
type: 'select',
label: 'alertType',
disabled: false
});
//
//2.条件值asset
//
this.select_list.forEach(val => {
if (val.label == 'alertType') {
val.val = this.$t('alert.config.typeOption.asset');
val.valnum = 3;
//alertList页type选择asset时，可以搜索asset
if (this.$route.path == '/alertList' && val.label == 'alertType' && val.valnum == 3) {
for (let i = 0; i < this.searchLabelList.length; i++) {
if (this.searchLabelList[i].label == 'asset') {
this.searchLabelList[i].disabled = false;
break;
}
}
} else if (this.$route.path == '/alertList' && val.label == 'alertType' && val.valnum != 3) {
let ind = -1;
for (let i = 0; i < this.searchLabelList.length; i++) {
if (this.searchLabelList[i].label == 'asset') {
this.searchLabelList[i].disabled = true;
break;
}
}
for (let i = 0; i < this.select_list.length; i++) {
if (this.select_list[i].label == 'asset') {
ind = i;
break;
}
}
if (ind >= 0) {
this.close_selcet_list(ind);
}
}
}
});
//
//3.条件名asset
//
//this.input_list = false;
this.searchLabelList.splice(3, 1);
this.select_list.push({
name: this.$t('asset.asset'),
id: 11,
type: 'asset',
label: 'asset',
disabled: false
});
//
//4.条件值：指定的asset
setTimeout(()=>{
let assetHost = '';
for (let i = 0; i < this.assetSelect.length; i++) {
if (this.assetSelect[i].id == newData) {
assetHost = this.assetSelect[i].host;
}
}
this.select_list.forEach(val => {
if (val.label == 'asset') {
val.val = assetHost;
val.valnum = newData;
}
});
this.input_sreach = '';
this.sreach_num = this.select_list.length;
this.change_sreach_show = false;
this.input_list = true;
//
//5.点击搜索
//
this.select();
}, 50);
}, 100);
this.$store.commit('assetForAlertListChange', '');
}
}
}*/
},
props:['searchMsg','defaultItem','defaultValue','inTransform'],
methods: {

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

@@ -19,6 +19,16 @@
</div>
<div class="pagination-top pagination-top-hide display-none"></div>
</div>
<!-- 自定义table列 -->
<transition name="el-zoom-in-top">
<element-set
v-if="tools.showCustomTableTitle"
@close="tools.showCustomTableTitle = false"
:custom-table-title.sync="tools.customTableTitle"
:original-table-title="tableTitle"
ref="customTableTitle"
></element-set>
</transition>
<el-table
class="nz-table"
:data="tableData"
@@ -35,7 +45,7 @@
>
<el-table-column
:resizable="false"
v-for="(item, index) in tools.tablelable"
v-for="(item, index) in tools.customTableTitle"
v-if="item.show"
:width="item.width"
:key="`col-${index}`"
@@ -72,7 +82,7 @@
</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">
<span @mousedown.stop="!tools.showCustomTableTitle && (tools.showCustomTableTitle = true)" class="nz-table-gear">
<i class="nz-icon nz-icon-gear"></i>
</span>
</template>
@@ -92,15 +102,6 @@
<transition name="right-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"
@close="elementsetHide"
v-clickoutside="elementsetHide"
:table-title="tableTitle"
:tools.dropCol="tools.dropCol"
@tablelable="tablelabelEmit"
ref="elementset"
></element-set>
</div>
</template>
@@ -132,10 +133,9 @@
loading: false, //是否显示table加载动画
toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性
tableHover: false, //控制滚动条和top按钮同时出现
showElementSet: false, //自定义列弹框是否显示
showTopBtn: false, //显示To top按钮
tablelable: [], //从缓存中加载的table header
dropCol: [], //自定义列工具的数据
showCustomTableTitle: false, //自定义列弹框是否显示
customTableTitle: [], //自定义列工具的数据
},
mainTableHeight: this.$tableHeight.normal, //主列表table高度
@@ -256,40 +256,6 @@
this.bottomBox.showSubList = true;
this.bottomBox.targetTab = 'alertMessage';
},
elementsetShow(s, e) {
this.tools.showElementSet = true;
this.$nextTick(() => {
var eventfixed = {
shezhi: 0,
screen: 0
};
eventfixed[s] = 1;
e.preventDefault();
this.$store.commit('setHeaderTable', this.tools.tablelable);
this.$store.commit('setEventfixed', eventfixed);
const h = document.documentElement.clientHeight;
const w = document.documentElement.clientWidth;
const dw = this.$refs.elementset.$el.offsetWidth;
const dh = this.$refs.elementset.$el.offsetHeight;
let positionx =
e.clientX + dw <= w - 10 ? e.clientX + 14 : e.clientX + 14 - dw;
let positiony =
e.clientY + dh <= h - 10
? e.clientY + 20
: e.clientY + 20 - (e.clientY + dh - h);
this.$store.commit('setPosition', {positionx, positiony});
});
},
elementsetHide() {
//悬浮点击空白隐藏
this.tools.showElementSet = false;
},
tablelabelEmit(data) {
//获取子组件传过来的参数
this.$store.commit('setHeaderTable', data);
this.tools.tablelable = data;
this.tools.dropCol = data;
},
edit(u) {
this.alertRule = JSON.parse(JSON.stringify(u));
this.rightBox.show = true;
@@ -542,6 +508,10 @@
window.onresize = null;
},
mounted() {
//初始化表头
this.tools.customTableTitle = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
: this.tableTitle;
//是否存在分页缓存
let pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId);
if (pageSize != 'undefined' && pageSize != null) {
@@ -569,12 +539,6 @@
});
}
});
this.tools.tablelable = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
: this.tableTitle;
this.tools.dropCol = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
: this.tableTitle;
}
}
</script>

92
nezha-fronted/src/components/page/alert/list.vue
View File

@@ -18,11 +18,11 @@
</style>
<template>
<div class="list">
<div class="main-list main-and-sub-transition" :class="{'main-list-with-sub': showSubList}">
<div class="top-tools" v-show="mainResizeShow">
<div class="top-tool-main-right" :class="{'top-tool-main-right-to-left': showSubList}">
<div class="main-list main-and-sub-transition" :class="{'main-list-with-sub': bottomBox.showSubList}">
<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">
<search-input :searchMsg="searchMsg" @search="search" :inTransform="inTransform"></search-input>
<search-input :searchMsg="searchMsg" @search="search" :bottomBox.inTransform="bottomBox.inTransform"></search-input>
</div>
<button type="button" @click="showExportDialog" :title="$t('overall.exportExcelLower')"
class="nz-btn nz-btn-size-normal nz-btn-style-light margin-l-20" id="alert-list-export">
@@ -33,19 +33,19 @@
</div>
<alertMessageTable
:tableData="tableData"
:loading="loading"
:loading="tools.loading"
:tableHeight="mainTableHeight"
:tableId="tableId"
@tableDataSort="tableDataSort"
@deleteMessage="deleteMessage"
:from="'alertMessage'"
></alertMessageTable>
<div class="pagination-bottom" v-show="!showSubList">
<div class="pagination-bottom" v-show="!bottomBox.showSubList">
<Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
</div>
</div>
<bottom-box v-if="showSubList" :show-sub-list="showSubList" :subResizeShow="subResizeShow" :isFullScreen="isFullScreen" :from="'alertMessage'" :targetTab.sync="targetTab" :detailList="tabDetailList"
@closeSubList="showSubList = false" @fullScreen="fullScreen" @exitFullScreen="exitFullScreen" @listResize="listResize" :tabList="tabList"></bottom-box>
<bottom-box v-if="bottomBox.showSubList" :show-sub-list="bottomBox.showSubList" :sub-resize-show="bottomBox.subResizeShow" :is-full-screen="bottomBox.isFullScreen" :from="'alertMessage'" :target-tab.sync="bottomBox.targetTab" :detailList="tabDetailList"
@closeSubList="bottomBox.showSubList = false" @fullScreen="fullScreen" @exitFullScreen="exitFullScreen" @listResize="listResize" :tabList="tabList"></bottom-box>
<!--导出-->
<div class="export-xlsx">
<el-dialog :visible.sync="importBox.show" :title="importBox.title" :modal-append-to-body='false' :show-close="true" width="300px" @close="closeDialog" class="nz-dialog">
@@ -100,7 +100,7 @@
import chartDataFormat from "../../charts/chartDataFormat";
import alertRuleInfo from '../../common/alert/alertRuleInfo'
import alertLabel from '../../common/alert/alertLabel'
import alertMessageTable from '@/components/common/alert/alertMessageTable.vue'
import alertMessageTable from '../../common/alert/alertMessageTable.vue'
export default {
name: "alertList",
components: {
@@ -112,20 +112,28 @@
},
data() {
return {
loading: false,
/*二级列表相关*/
mainTableHeight: this.$tableHeight.normal, //主列表table高度
/*二级页面相关*/
bottomBox: {
tabList: [], //二级列表的标签
tabDetailList: [], //多个详情
targetTab: '', //展示二级列表中的哪个页签
inTransform: false, //搜索框相关，搜索条件下拉框是否在transform里
mainResizeShow: true, //dom高度改变时部分内容是否展示
mainResizeShow: true, //dom高度改变时是否展示|隐藏
subResizeShow: true,
isFullScreen: false,
showSubList: false, //是否展示二级列表
mainTableHeight: this.$tableHeight.normal, //主列表table高度
isFullScreen: false, //全屏状态
showSubList: false, //是否显示二级列表
targetTab: '', //显示二级列表中的哪个页签
inTransform: false, //搜索框相关，搜索条件下拉框是否在transform里
},
/*工具参数*/
tools: {
loading: false, //是否显示table加载动画
toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性
tableHover: false, //控制滚动条和top按钮同时出现
showTopBtn: false, //显示To top按钮
showCustomTableTitle: false, //自定义列弹框是否显示
customTableTitle: [], //自定义列工具的数据
},
//导出相关
importBox: {show: false, title:this.$t('overall.exportExcel')},
@@ -141,7 +149,6 @@
chartUnit: 5,
tableId: 'alertListTable', //需要分页的table的id，用于记录每页数量
showTopBtn: false,
pageObj: {
pageNo: 1,
pageSize: 50,
@@ -258,8 +265,6 @@
searchLabel: { //搜索参数
},
tablelable: [],
dropCol: [],
tableData: [],
requestIndex:0,
viewRuleData: {
@@ -321,11 +326,6 @@
})
return result;
},
tablelabelEmit(data) {
//获取子组件传过来的参数
this.$store.commit('setHeaderTable', data);
this.tablelable = data;
},
chartUnitChange:function(unit){
this.chartUnit=unit;
this.$nextTick(()=>{
@@ -481,9 +481,9 @@
getAlertList: function () {
this.$set(this.searchLabel, "pageNo", this.pageObj.pageNo);
this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize);
this.loading = true;
this.tools.loading = true;
this.$get('alert/message', this.searchLabel).then(response => {
this.loading = false;
this.tools.loading = false;
if (response.code == 200) {
this.tableData = response.data.list;
this.tableData.forEach((item) => {
@@ -638,14 +638,17 @@
},
// 全屏
fullScreen() {
let vm = this;
this.$bottomBoxWindow.fullScreen(vm);
},
// 退出全屏
exitFullScreen() {
let vm = this;
this.$bottomBoxWindow.exitFullScreen(vm);
},
// 鼠标拖动二级列表
listResize(e) {
let vm = this;
this.$bottomBoxWindow.listResize(vm, e);
},
showTagDetail(data, key) {
@@ -662,10 +665,10 @@
detailList.push(data[item]);
}
}
this.showSubList = true;
this.bottomBox.showSubList = true;
this.tabList = labelList;
/*this.tabDetailList = detailList;
this.targetTab = key;*/
this.bottomBox.targetTab = key;*/
}
},
labelsClassName(row) {
@@ -675,17 +678,6 @@
return "";
}
},
jumpTo(data, id) {
bus.$emit("menu-change", data);
this.$store.state.assetData.moduleData = data
this.$store.state.assetData.selectedData = id
this.$router.push({
path: "/" + data,
query: {
t: +new Date()
}
});
},
pageNo(val) {
this.pageObj.pageNo = val;
this.getAlertList();
@@ -695,7 +687,7 @@
localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val);
this.getAlertList();
},
search: function (searchObj) {
search(searchObj) {
let orderBy='';
if(this.searchLabel.orderBy){
orderBy=this.searchLabel.orderBy
@@ -831,6 +823,10 @@
},
},
mounted() {
//初始化表头
this.tools.customTableTitle = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
: this.tableTitle;
//是否存在分页缓存
let pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId);
if (pageSize != 'undefined' && pageSize != null) {
@@ -844,25 +840,19 @@
if (el._ps_) {
el.addEventListener("ps-scroll-y", () => {
if (el._ps_.scrollbarYTop > 50) {
this.showTopBtn = true;
this.tools.showTopBtn = true;
} else {
this.showTopBtn = false;
this.tools.showTopBtn = false;
}
});
el.addEventListener("mouseenter", () => {
this.tableHover = true;
this.tools.tableHover = true;
});
el.addEventListener("mouseleave", () => {
this.tableHover = false;
this.tools.tableHover = false;
});
}
});
this.tablelable = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
: this.tableTitle;
this.dropCol = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
: this.tableTitle;
}
}
</script>

119
nezha-fronted/src/components/page/asset/asset.vue
View File

@@ -20,7 +20,16 @@
</div>
<div class="pagination-top pagination-top-hide display-none"></div>
</div>
<!-- 自定义table列 -->
<transition name="el-zoom-in-top">
<element-set
v-if="tools.showCustomTableTitle"
@close="tools.showCustomTableTitle = false"
:custom-table-title.sync="tools.customTableTitle"
:original-table-title="tableTitle"
ref="customTableTitle"
></element-set>
</transition>
<el-table
class="nz-table"
:height="mainTableHeight"
@@ -37,7 +46,7 @@
>
<el-table-column
:resizable="false"
v-for="(item, index) in tools.tablelable"
v-for="(item, index) in tools.customTableTitle"
v-if="item.show"
:width="item.width"
:key="`col_${index}`"
@@ -136,7 +145,7 @@
</el-table-column>
<el-table-column width="28" fixed="right" :resizable="false">
<template slot="header" slot-scope="scope">
<span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear">
<span @mousedown.stop="!tools.showCustomTableTitle && (tools.showCustomTableTitle = true)" class="nz-table-gear">
<i class="nz-icon nz-icon-gear"></i>
</span>
</template>
@@ -160,16 +169,6 @@
<transition name="right-box">
<asset-box v-if="rightBox.show" :asset="asset" @refresh="flushData" ref="assetBox" @close="closeRightBox"></asset-box>
</transition>
<element-set
v-if="tools.showElementSet"
@close="elementsetHide"
v-clickoutside="elementsetHide"
:drop-col="tools.dropCol"
:table-title="tableTitle"
@tablelable="tablelabelEmit"
ref="elementset"
></element-set>
</div>
</template>
@@ -208,10 +207,9 @@
loading: false, //是否显示table加载动画
toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性
tableHover: false, //控制滚动条和top按钮同时出现
showElementSet: false, //自定义列弹框是否显示
showTopBtn: false, //显示To top按钮
tablelable: [], //从缓存中加载的table header
dropCol: [], //自定义列工具的数据
showCustomTableTitle: false, //自定义列弹框是否显示
customTableTitle: [], //自定义列工具的数据
},
asset: {},
blankAsset: {
@@ -362,14 +360,6 @@
}
},
watch: {
currentDcListChange: {
deep: true,
immediate: true,
handler(n) {
this.pageObj.idcIds = n.join(",");
this.getTableData();
}
},
'bottomBox.showSubList': function(n) {
let vm = this;
this.$bottomBoxWindow.showSubListWatch(vm, n);
@@ -399,51 +389,6 @@
let vm = this;
this.$bottomBoxWindow.listResize(vm, e);
},
dcSelectAll(val) { //DC全选
if (this.checkListData.length > 0) {
this.checkList = [];
if (val) {
for (let i = 0; i < this.checkListData.length; i++) {
this.checkList.push(this.checkListData[i].id);
this.$store.commit('assetItemIdChange',this.checkListData[i].id)
}
this.$store.commit('assetAllIdChange',this.checkListData)
}
}
},
elementsetShow(s, e) {
this.tools.showElementSet = true;
this.$nextTick(() => {
var eventfixed = {
shezhi: 0,
screen: 0
};
eventfixed[s] = 1;
e.preventDefault();
this.$store.commit('setHeaderTable', this.tools.tablelable);
this.$store.commit('setEventfixed', eventfixed);
const h = document.documentElement.clientHeight;
const w = document.documentElement.clientWidth;
const dw = this.$refs.elementset.$el.offsetWidth;
const dh = this.$refs.elementset.$el.offsetHeight;
let positionx =
e.clientX + dw <= w - 10 ? e.clientX + 14 : e.clientX + 14 - dw;
let positiony =
e.clientY + dh <= h - 10
? e.clientY + 20
: e.clientY + 20 - (e.clientY + dh - h);
this.$store.commit('setPosition', { positionx, positiony });
});
},
elementsetHide() {
//悬浮点击空白隐藏
this.tools.showElementSet = false;
},
tablelabelEmit(data) {
//获取子组件传过来的参数
this.$store.commit('setHeaderTable', data);
this.tools.tablelable = data;
},
cli([id,host,account]){
const consoleParam = {
id: id,
@@ -718,13 +663,22 @@
});
}
},
computed: {
currentDcListChange() {
return this.$store.state.currentDcList;
}
},
mounted() {
//初始化表头
let tableTitle = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
: this.tableTitle;
if (this.assetPingSwitch == 'off') {
for (let i in tableTitle) {
let label = tableTitle[i];
if (label.prop == 'pingStatus') {
tableTitle.splice(i, 1);
break;
}
}
}
this.tools.customTableTitle = tableTitle;
//初始化数据
this.getUserData();
this.getTableData();
@@ -759,23 +713,6 @@
el._ps_.update();
};
});
let localStorageTitle = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path);
this.tools.tablelable = localStorageTitle ? JSON.parse(localStorageTitle) : this.tableTitle;
if (this.assetPingSwitch == 'off') {
for (let i in this.tools.tablelable) {
let label = this.tools.tablelable[i];
if (label.prop == 'pingStatus') {
this.tools.tablelable.splice(i, 1);
//console.log(this.tools.tablelable)
break;
}
}
}
this.tools.dropCol = localStorageTitle ? JSON.parse(localStorageTitle) : this.tableTitle;
},
destroyed() {
window.onresize = null;

85
nezha-fronted/src/components/page/config/account.vue
View File

@@ -22,6 +22,16 @@
<!-- 顶部分页组件，当打开底部上滑框时出现 -->
<div class="pagination-top pagination-top-hide display-none"></div>
</div>
<!-- 自定义table列 -->
<transition name="el-zoom-in-top">
<element-set
v-if="tools.showCustomTableTitle"
@close="tools.showCustomTableTitle = false"
:custom-table-title.sync="tools.customTableTitle"
:original-table-title="tableTitle"
ref="customTableTitle"
></element-set>
</transition>
<el-table
class="nz-table"
:data="tableData"
@@ -35,7 +45,7 @@
@sort-change="tableDataSort">
<el-table-column
:resizable="false"
v-for="(item, index) in tools.tablelable"
v-for="(item, index) in tools.customTableTitle"
v-if="item.show"
:width="item.width"
:key="`col-${index}`"
@@ -74,7 +84,7 @@
</el-table-column>
<el-table-column width="28">
<template slot="header" slot-scope="scope" :resizable="false">
<span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear">
<span @mousedown.stop="!tools.showCustomTableTitle && (tools.showCustomTableTitle = true)" class="nz-table-gear">
<i class="nz-icon nz-icon-gear"></i>
</span>
</template>
@@ -95,15 +105,6 @@
<transition name="right-box">
<account-box v-if="rightBox.show" :user="user" @close="closeRightBox"></account-box>
</transition>
<!-- 自定义table列 -->
<element-set
v-if="tools.showElementSet"
v-clickoutside="elementsetHide"
:dropCol="tools.dropCol"
@tablelable="tablelabelEmit"
:table-title="tableTitle"
ref="elementset"
></element-set>
</div>
</template>
<script>
@@ -138,10 +139,9 @@
loading: false, //是否显示table加载动画
toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性
tableHover: false, //控制滚动条和top按钮同时出现
showElementSet: false, //自定义列弹框是否显示
showTopBtn: false, //显示To top按钮
tablelable: [], //从缓存中加载的table header
dropCol: [], //自定义列工具的数据
showCustomTableTitle: false, //自定义列弹框是否显示
customTableTitle: [], //自定义列工具的数据
},
mainTableHeight: this.$tableHeight.normal, //主列表table高度
@@ -231,37 +231,6 @@
detail.push({label: this.$t("config.account.createTime"), value: obj.createTime});
return detail;
},
elementsetShow(s, e) {
this.tools.showElementSet = true;
var eventfixed = {
shezhi: 0,
screen: 0
};
eventfixed[s] = 1;
e.preventDefault();
this.$store.commit('setHeaderTable', this.tools.tablelable);
this.$store.commit('setEventfixed', eventfixed);
const h = document.documentElement.clientHeight;
const w = document.documentElement.clientWidth;
const dw = this.$refs.elementset.$el.offsetWidth;
const dh = this.$refs.elementset.$el.offsetHeight;
let positionx =
e.clientX + dw <= w - 10 ? e.clientX + 14 : e.clientX + 14 - dw;
let positiony =
e.clientY + dh <= h - 10
? e.clientY + 20
: e.clientY + 20 - (e.clientY + dh - h);
this.$store.commit('setPosition', {positionx, positiony});
},
elementsetHide() {
//悬浮点击空白隐藏
this.$refs.elementset.elementsetHide();
},
tablelabelEmit(data) {
//获取子组件传过来的参数
this.$store.commit('setHeaderTable', data);
this.tools.tablelable = data;
},
closeRightBox(refresh) {
this.rightBox.show = false;
if (refresh) {
@@ -277,6 +246,22 @@
this.bottomBox.targetTab = "detail";
this.bottomBox.showSubList = true;
},
del(u) {
this.$confirm(this.$t("tip.confirmDelete"), {
confirmButtonText: this.$t("tip.yes"),
cancelButtonText: this.$t("tip.no"),
type: 'warning'
}).then(() => {
this.$delete("sys/user/delete?userIds=" + u.userId).then(response => {
if (response.code === 200) {
this.$message({duration: 2000, type: 'success', message: this.$t("tip.deleteSuccess")});
this.getTableData();
} else {
this.$message.error(response.msg);
}
})
});
},
getTableData() {
this.$set(this.searchLabel, "pageNo", this.pageObj.pageNo);
this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize);
@@ -365,6 +350,10 @@
}
},
mounted() {
//初始化表头
this.tools.customTableTitle = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
: this.tableTitle;
//是否存在分页缓存
let pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId);
if (pageSize != 'undefined' && pageSize != null) {
@@ -391,12 +380,6 @@
});
}
});
this.tools.tablelable = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
: this.tableTitle;
this.tools.dropCol = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
: this.tableTitle;
}
}
</script>

74
nezha-fronted/src/components/page/config/dc.vue
View File

@@ -20,6 +20,16 @@
</div>
<div class="pagination-top pagination-top-hide display-none"></div>
</div>
<!-- 自定义table列 -->
<transition name="el-zoom-in-top">
<element-set
v-if="tools.showCustomTableTitle"
@close="tools.showCustomTableTitle = false"
:custom-table-title.sync="tools.customTableTitle"
:original-table-title="tableTitle"
ref="customTableTitle"
></element-set>
</transition>
<el-table
class="nz-table"
:data="tableData"
@@ -36,7 +46,7 @@
<el-table-column
:resizable="false"
show-overflow-tooltip
v-for="(item, index) in tools.tablelable"
v-for="(item, index) in tools.customTableTitle"
v-if="item.show"
:width="item.width"
:key="`col-${index}`"
@@ -46,8 +56,6 @@
>
<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="'dc-detail-'+scope.row.id"><i class="nz-icon nz-icon-view"></i></span>
&nbsp;-->
<span :title="$t('overall.edit')" @click="edit(scope.row)" class="content-right-option" :id="'dc-edit-'+scope.row.id"><i class="nz-icon nz-icon-edit"></i></span>
&nbsp;
<span :title="$t('overall.delete')" @click="del(scope.row)" class="content-right-option" :id="'dc-del-'+scope.row.id"><i class="el-icon-delete"></i></span>
@@ -88,7 +96,7 @@
</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">
<span @mousedown.stop="!tools.showCustomTableTitle && (tools.showCustomTableTitle = true)" class="nz-table-gear">
<i class="nz-icon nz-icon-gear"></i>
</span>
</template>
@@ -106,15 +114,6 @@
</transition>
</div>
<!--dc table end-->
<element-set
v-if="tools.showElementSet"
v-clickoutside="elementsetHide"
:dropCol="tools.dropCol"
@tablelable="tablelabelEmit"
:table-title="tableTitle"
ref="elementset"
></element-set>
<transition name="right-box">
<dc-box @close="closeDcBox" :dc="dc" :user-data="userData" @reload="getTableData" v-if="rightBox.dc.show"></dc-box>
</transition>
@@ -152,10 +151,9 @@
loading: false, //是否显示table加载动画
toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性
tableHover: false, //控制滚动条和top按钮同时出现
showElementSet: false, //自定义列弹框是否显示
showTopBtn: false, //显示To top按钮
tablelable: [], //从缓存中加载的table header
dropCol: [], //自定义列工具的数据
showCustomTableTitle: false, //自定义列弹框是否显示
customTableTitle: [], //自定义列工具的数据
},
tableId: 'dcTable', //需要分页的table的id，用于记录每页数量
dc: {},
@@ -237,43 +235,12 @@
}
},
methods: {
elementsetShow(s, e) {
this.tools.showElementSet = true;
var eventfixed = {
shezhi: 0,
screen: 0
};
eventfixed[s] = 1;
e.preventDefault();
this.$store.commit('setHeaderTable', this.tools.tablelable);
this.$store.commit('setEventfixed', eventfixed);
const h = document.documentElement.clientHeight;
const w = document.documentElement.clientWidth;
const dw = this.$refs.elementset.$el.offsetWidth;
const dh = this.$refs.elementset.$el.offsetHeight;
let positionx =
e.clientX + dw <= w - 10 ? e.clientX + 14 : e.clientX + 14 - dw;
let positiony =
e.clientY + dh <= h - 10
? e.clientY + 20
: e.clientY + 20 - (e.clientY + dh - h);
this.$store.commit('setPosition', {positionx, positiony});
},
elementsetHide() {
//悬浮点击空白隐藏
this.$refs.elementset.elementsetHide();
},
assetStatClassName(param) {
if (param.column.label == this.$t("config.dc.assets")) {
return "asset-state";
}
return "";
},
tablelabelEmit(data) {
//获取子组件传过来的参数
this.$store.commit('setHeaderTable', data);
this.tools.tablelable = data;
},
jumpTo(data, id) {
bus.$emit("menu-change", data);
this.$router.push({
@@ -368,7 +335,7 @@
if (response.code === 200) {
this.$message({duration: 1000, type: 'success', message: this.$t("tip.deleteSuccess")});
this.getTableData();
this.$store.commit("dcListChange");
bus.$emit("dc-list-change");
} else {
this.$message.error(response.msg);
}
@@ -484,6 +451,10 @@
window.onresize = null;
},
mounted() {
//初始化表头
this.tools.customTableTitle = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
: this.tableTitle;
//是否存在分页缓存
let pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId);
if (pageSize != 'undefined' && pageSize != null) {
@@ -512,13 +483,6 @@
};
}
});
this.tools.tablelable = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
: this.tableTitle;
this.tools.dropCol = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
: this.tableTitle;
}
}
</script>

70
nezha-fronted/src/components/page/config/mib.vue
View File

@@ -25,8 +25,18 @@
</button>
</div>
</div>
<!-- 自定义table列 -->
<transition name="el-zoom-in-top">
<element-set
v-if="tools.showCustomTableTitle"
@close="tools.showCustomTableTitle = false"
:custom-table-title.sync="tools.customTableTitle"
:original-table-title="tableTitle"
ref="customTableTitle"
></element-set>
</transition>
<el-table :data="tableData" border :height="$tableHeight.normal" style="width: 100%;" ref="mibTable" class="nz-table mib-table" v-scrollBar:el-table="'large'" v-loading="tools.loading" @sort-change="tableDataSort">
<el-table-column :resizable="false" v-for="(item, index) in tools.tablelable" v-if="item.show" :width="item.width" :class-name="item.prop == 'modelsDetail'?'detail-column':''"
<el-table-column :resizable="false" v-for="(item, index) in tools.customTableTitle" v-if="item.show" :width="item.width" :class-name="item.prop == 'modelsDetail'?'detail-column':''"
:key="`col-${index}`" :label="item.label" :sortable="sortableShow(item.prop)"
:prop="propTitle(item.prop)"
:sort-orders="['ascending', 'descending']">
@@ -76,7 +86,7 @@
</el-table-column>
<el-table-column :resizable="false" width="28">
<template slot="header" slot-scope="scope">
<span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear">
<span @mousedown.stop="!tools.showCustomTableTitle && (tools.showCustomTableTitle = true)" class="nz-table-gear">
<i class="nz-icon nz-icon-gear"></i>
</span>
</template>
@@ -88,14 +98,6 @@
<Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
</template>
<mib-browser :show-tab="showTab" v-if="showTab == 'browser'" @toFileTab="showTab = 'file'"></mib-browser>
<element-set
v-if="tools.showElementSet"
v-clickoutside="elementsetHide"
:table-title="tableTitle"
:dropCol="tools.dropCol"
@tablelable="tablelabelEmit"
ref="elementset"
></element-set>
<transition name="right-box">
<mib-box v-if="rightBox.show" ref="mibBox" :mib="mib" @reload="getTableData" @close="closeRightBox"></mib-box>
</transition>
@@ -120,10 +122,9 @@
loading: false, //是否显示table加载动画
toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性
tableHover: false, //控制滚动条和top按钮同时出现
showElementSet: false, //自定义列弹框是否显示
showTopBtn: false, //显示To top按钮
tablelable: [], //从缓存中加载的table header
dropCol: [], //自定义列工具的数据
showCustomTableTitle: false, //自定义列弹框是否显示
customTableTitle: [], //自定义列工具的数据
},
tableId: 'mibTable', //需要分页的table的id，用于记录每页数量
mib: {},
@@ -197,39 +198,6 @@
}
},
methods: {
elementsetShow(s, e) {
this.tools.showElementSet = true;
this.$nextTick(() => {
var eventfixed = {
shezhi: 0,
screen: 0
};
eventfixed[s] = 1;
e.preventDefault();
this.$store.commit('setHeaderTable', this.tools.tablelable);
this.$store.commit('setEventfixed', eventfixed);
const h = document.documentElement.clientHeight;
const w = document.documentElement.clientWidth;
const dw = this.$refs.elementset.$el.offsetWidth;
const dh = this.$refs.elementset.$el.offsetHeight;
let positionx =
e.clientX + dw <= w - 10 ? e.clientX + 14 : e.clientX + 14 - dw;
let positiony =
e.clientY + dh <= h - 10
? e.clientY + 20
: e.clientY + 20 - (e.clientY + dh - h);
this.$store.commit('setPosition', {positionx, positiony});
});
},
elementsetHide() {
//悬浮点击空白隐藏
this.$refs.elementset.elementsetHide();
},
tablelabelEmit(data) {
//获取子组件传过来的参数
this.$store.commit('setHeaderTable', data);
this.tools.tablelable = data;
},
clickOutside() {
this.rightBox.show = false;
},
@@ -373,6 +341,10 @@
},
},
mounted() {
//初始化表头
this.tools.customTableTitle = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
: this.tableTitle;
//是否存在分页缓存
let pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId);
if (pageSize != 'undefined' && pageSize != null) {
@@ -399,12 +371,6 @@
});
}
});
this.tools.tablelable = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
: this.tableTitle;
this.tools.dropCol = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
: this.tableTitle;
},
}
</script>

70
nezha-fronted/src/components/page/config/model.vue
View File

@@ -19,6 +19,16 @@
</div>
<div class="pagination-top pagination-top-hide display-none"></div>
</div>
<!-- 自定义table列 -->
<transition name="el-zoom-in-top">
<element-set
v-if="tools.showCustomTableTitle"
@close="tools.showCustomTableTitle = false"
:custom-table-title.sync="tools.customTableTitle"
:original-table-title="tableTitle"
ref="customTableTitle"
></element-set>
</transition>
<el-table :data="tableData"
border style="width: 100%;"
ref="modelTable"
@@ -32,7 +42,7 @@
@sort-change="tableDataSort"
>
<el-table-column :resizable="false"
v-for="(item, index) in tools.tablelable"
v-for="(item, index) in tools.customTableTitle"
v-if="item.show"
:width="item.width"
:key="`col-${index}`"
@@ -66,7 +76,7 @@
</el-table-column>
<el-table-column :resizable="false" width="28">
<template slot="header" slot-scope="scope">
<span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear">
<span @mousedown.stop="!tools.showCustomTableTitle && (tools.showCustomTableTitle = true)" class="nz-table-gear">
<i class="nz-icon nz-icon-gear"></i>
</span>
</template>
@@ -83,14 +93,6 @@
<bottom-box v-if="bottomBox.showSubList" :sub-resize-show="bottomBox.subResizeShow" :is-fullscreen="bottomBox.isFullScreen" from="model" :target-tab.sync="bottomBox.targetTab" :obj="bottomBox.model"
@closeSubList="bottomBox.showSubList = false" @fullScreen="fullScreen" @exitFullScreen="exitFullScreen" @listResize="listResize" ref="panelBox"></bottom-box>
</transition>
<element-set
v-if="tools.showElementSet"
v-clickoutside="elementsetHide"
:table-title="tableTitle"
:dropCol="tools.dropCol"
@tools.tablelable="tablelabelEmit"
ref="elementset"
></element-set>
<transition name="right-box">
<model-box v-if="rightBox.show" ref="modelBox" :model="model" @close="closeRightBox" @reload="getTableData"></model-box>
</transition>
@@ -120,10 +122,9 @@
loading: false, //是否显示table加载动画
toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性
tableHover: false, //控制滚动条和top按钮同时出现
showElementSet: false, //自定义列弹框是否显示
showTopBtn: false, //显示To top按钮
tablelable: [], //从缓存中加载的table header
dropCol: [], //自定义列工具的数据
showCustomTableTitle: false, //自定义列弹框是否显示
customTableTitle: [], //自定义列工具的数据
},
tableId: 'modelTable', //需要分页的table的id，用于记录每页数量
@@ -196,45 +197,12 @@
}
},
methods: {
elementsetShow(s, e) {
this.tools.showElementSet = true;
this.$nextTick(() => {
let eventfixed = {
shezhi: 0,
screen: 0
};
eventfixed[s] = 1;
e.preventDefault();
this.$store.commit('setHeaderTable', this.tools.tablelable);
this.$store.commit('setEventfixed', eventfixed);
const h = document.documentElement.clientHeight;
const w = document.documentElement.clientWidth;
const dw = this.$refs.elementset.$el.offsetWidth;
const dh = this.$refs.elementset.$el.offsetHeight;
let positionx =
e.clientX + dw <= w - 10 ? e.clientX + 14 : e.clientX + 14 - dw;
let positiony =
e.clientY + dh <= h - 10
? e.clientY + 20
: e.clientY + 20 - (e.clientY + dh - h);
this.$store.commit('setPosition', {positionx, positiony});
});
},
elementsetHide() {
//悬浮点击空白隐藏
this.$refs.elementset.elementsetHide();
},
assetStatClassName(param) {
if (param.column.label == this.$t("config.model.assets")) {
return "asset-state";
}
return "";
},
tablelabelEmit(data) {
//获取子组件传过来的参数
this.$store.commit('setHeaderTable', data);
this.tools.tablelable = data;
},
panel(obj) {
this.bottomBox.showSubList = true;
this.bottomBox.model = obj;
@@ -372,6 +340,10 @@
},
},
mounted() {
//初始化表头
this.tools.customTableTitle = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
: this.tableTitle;
//是否存在分页缓存
let pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId);
if (pageSize != 'undefined' && pageSize != null) {
@@ -398,12 +370,6 @@
});
}
});
this.tools.tablelable = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
: this.tableTitle;
this.tools.dropCol = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
: this.tableTitle;
},
watch: {
'bottomBox.showSubList': function(n) {

127
nezha-fronted/src/components/page/config/operationlog.vue
View File

@@ -13,13 +13,23 @@
</div>
</div>
</div>
<!-- 自定义table列 -->
<transition name="el-zoom-in-top">
<element-set
v-if="tools.showCustomTableTitle"
@close="tools.showCustomTableTitle = false"
:custom-table-title.sync="tools.customTableTitle"
:original-table-title="tableTitle"
ref="customTableTitle"
></element-set>
</transition>
<el-table
class="nz-table"
:data="tableData"
border
ref="operationLogTable"
:height="$tableHeight.normal"
v-loading="loading"
v-loading="tools.loading"
v-scrollBar:el-table="'large'"
:cell-class-name="messageStyle"
style="width: 100%;"
@@ -27,7 +37,7 @@
>
<el-table-column
:resizable="false"
v-for="(item, index) in tablelable"
v-for="(item, index) in tools.customTableTitle"
v-if="item.show"
:width="item.width"
:key="`col-${index}`"
@@ -45,23 +55,16 @@
</el-table-column>
<el-table-column width="28">
<template slot="header" slot-scope="scope">
<span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear">
<span @mousedown.stop="!tools.showCustomTableTitle && (tools.showCustomTableTitle = true)" 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: toTopBtnTop}" :class="{'to-top-is-hover': tableHover}" v-show="showTopBtn" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
<button v-if="scope.$index == 0" class="to-top" :style="{top: tools.toTopBtnTop}" :class="{'to-top-is-hover': tools.tableHover}" v-show="tools.showTopBtn" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
</template>
</el-table-column>
</el-table>
<Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
<element-set
v-clickoutside="elementsetHide"
:dropCol="dropCol"
@tablelable="tablelabelEmit"
:table-title="tableTitle"
ref="elementset"
></element-set>
</div>
</template>
<script>
@@ -70,16 +73,10 @@
name: "oparetionlog",
data() {
return {
loading: false,
tableId: 'operationLogTable', //需要分页的table的id，用于记录每页数量
showTopBtn: false,
toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性
tableHover: false, //控制滚动条和top按钮同时出现
rightBox: { //弹出框相关
show: false,
isEdit: false, //false查看，true编辑
title: ''
},
rightBoxResize: { //resize弹出框相关
show: false,
@@ -96,6 +93,15 @@
isAdd: false, //false，true：resize
title: ''
},
/*工具参数*/
tools: {
loading: false, //是否显示table加载动画
toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性
tableHover: false, //控制滚动条和top按钮同时出现
showTopBtn: false, //显示To top按钮
showCustomTableTitle: false, //自定义列弹框是否显示
customTableTitle: [], //自定义列工具的数据
},
pageObj: {
pageNo: 1,
pageSize: 50,
@@ -163,8 +169,6 @@
show: false,
},
],
tablelable: [],
dropCol: [],
tableData: [],
searchMsg: { //给搜索框子组件传递的信息
zheze_none: true,
@@ -194,36 +198,6 @@
}
},
methods: {
elementsetShow(s, e) {
var eventfixed = {
shezhi: 0,
screen: 0
};
eventfixed[s] = 1;
e.preventDefault();
this.$store.commit('setHeaderTable', this.tablelable);
this.$store.commit('setEventfixed', eventfixed);
const h = document.documentElement.clientHeight;
const w = document.documentElement.clientWidth;
const dw = this.$refs.elementset.$el.offsetWidth;
const dh = this.$refs.elementset.$el.offsetHeight;
let positionx =
e.clientX + dw <= w - 10 ? e.clientX + 14 : e.clientX + 14 - dw;
let positiony =
e.clientY + dh <= h - 10
? e.clientY + 20
: e.clientY + 20 - (e.clientY + dh - h);
this.$store.commit('setPosition', {positionx, positiony});
},
elementsetHide() {
//悬浮点击空白隐藏
this.$refs.elementset.elementsetHide();
},
tablelabelEmit(data) {
//获取子组件传过来的参数
this.$store.commit('setHeaderTable', data);
this.tablelable = data;
},
messageStyle(e) {
if (e.column.label == this.$t('config.operationlog.state')) {
if (e.row.state == 'success') {
@@ -237,44 +211,15 @@
getTableData: function () {
this.$set(this.searchLabel, "pageNo", this.pageObj.pageNo);
this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize);
this.loading = true;
this.tools.loading = true;
this.$get('sys/log/list', this.searchLabel).then(response => {
this.loading = false;
this.tools.loading = false;
if (response.code === 200) {
// for (let i = 0; i < response.data.list.length; i++) {
// response.data.list[i].status = response.data.list[i].status + "";
// }
this.tableData = response.data.list;
this.pageObj.total = response.data.total
}
})
},
jumpTo(data, id) {
bus.$emit("menu-change", data);
this.$router.push({
path: "/" + data,
query: {
t: +new Date()
}
});
},
toEditReceiver: function (item) {
if (!item.isEdit) {
//如果不在编辑状态，那么其他项如果有改动，则还原改动，最后开始编辑
this.blurEditReceiver();
item.isEdit = true;
} else {
//如果已在编辑状态，判断name是否有变更，有变更则发请求
if (item.name != item.oldName) {
if (this.updateReceiverName(item) == 200) {
item.isEdit = false;
}
} else {
item.errorMessage = '';
item.isEdit = false;
}
}
},
pageNo(val) {
this.pageObj.pageNo = val;
this.getTableData();
@@ -285,9 +230,9 @@
this.getTableData();
},
search: function (searchObj) {
let orderBy='';
let orderBy = '';
if(this.searchLabel.orderBy){
orderBy=this.searchLabel.orderBy
orderBy = this.searchLabel.orderBy
}
this.searchLabel = {};
this.pageObj.pageNo = 1;
@@ -349,6 +294,10 @@
}
},
mounted() {
//初始化表头
this.tools.customTableTitle = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
: this.tableTitle;
//是否存在分页缓存
let pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId);
if (pageSize && pageSize != 'undefined') {
@@ -362,25 +311,19 @@
if (el._ps_) {
el.addEventListener("ps-scroll-y", () => {
if (el._ps_.scrollbarYTop > 50) {
this.showTopBtn = true;
this.tools.showTopBtn = true;
} else {
this.showTopBtn = false;
this.tools.showTopBtn = false;
}
});
el.addEventListener("mouseenter", () => {
this.tableHover = true;
this.tools.tableHover = true;
});
el.addEventListener("mouseleave", () => {
this.tableHover = false;
this.tools.tableHover = false;
});
}
});
this.tablelable = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
: this.tableTitle;
this.dropCol = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
: this.tableTitle;
}
}
</script>

70
nezha-fronted/src/components/page/config/promServer.vue
View File

@@ -19,10 +19,20 @@
</div>
<div class="pagination-top pagination-top-hide display-none"></div>
</div>
<!-- 自定义table列 -->
<transition name="el-zoom-in-top">
<element-set
v-if="tools.showCustomTableTitle"
@close="tools.showCustomTableTitle = false"
:custom-table-title.sync="tools.customTableTitle"
:original-table-title="tableTitle"
ref="customTableTitle"
></element-set>
</transition>
<el-table :data="tableData" border v-show="bottomBox.mainResizeShow" :height="mainTableHeight" style="width: 100%;"
v-loading="tools.loading" ref="promTable" class="nz-table" v-scrollBar:el-table="'large'"
@sort-change="tableDataSort">
<el-table-column :resizable="false" v-for="(item, index) in tools.tablelable"
<el-table-column :resizable="false" v-for="(item, index) in tools.customTableTitle"
v-if="item.show"
:width="item.width"
:key="`col-${index}`"
@@ -57,7 +67,7 @@
</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">
<span @mousedown.stop="!tools.showCustomTableTitle && (tools.showCustomTableTitle = true)" class="nz-table-gear">
<i class="nz-icon nz-icon-gear"></i>
</span>
</template>
@@ -77,14 +87,6 @@
<transition name="right-box">
<prom-server-box v-if="rightBox.show" :prom-server="promServer" @close="closeRightBox"></prom-server-box>
</transition>
<element-set
v-if="tools.showElementSet"
v-clickoutside="elementsetHide"
:table-title="tableTitle"
:dropCol="tools.dropCol"
@tablelable="tablelabelEmit"
ref="elementset"
></element-set>
</div>
</template>
@@ -120,10 +122,9 @@
loading: false, //是否显示table加载动画
toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性
tableHover: false, //控制滚动条和top按钮同时出现
showElementSet: false, //自定义列弹框是否显示
showTopBtn: false, //显示To top按钮
tablelable: [], //从缓存中加载的table header
dropCol: [], //自定义列工具的数据
showCustomTableTitle: false, //自定义列弹框是否显示
customTableTitle: [], //自定义列工具的数据
},
tableId: 'promTable', //需要分页的table的id，用于记录每页数量
@@ -252,37 +253,6 @@
});
return detail;
},
elementsetShow(s, e) {
this.tools.showElementSet = true;
var eventfixed = {
shezhi: 0,
screen: 0
};
eventfixed[s] = 1;
e.preventDefault();
this.$store.commit('setHeaderTable', this.tools.tablelable);
this.$store.commit('setEventfixed', eventfixed);
const h = document.documentElement.clientHeight;
const w = document.documentElement.clientWidth;
const dw = this.$refs.elementset.$el.offsetWidth;
const dh = this.$refs.elementset.$el.offsetHeight;
let positionx =
e.clientX + dw <= w - 10 ? e.clientX + 14 : e.clientX + 14 - dw;
let positiony =
e.clientY + dh <= h - 10
? e.clientY + 20
: e.clientY + 20 - (e.clientY + dh - h);
this.$store.commit('setPosition', {positionx, positiony});
},
elementsetHide() {
//悬浮点击空白隐藏
this.$refs.elementset.elementsetHide();
},
tablelabelEmit(data) {
//获取子组件传过来的参数
this.$store.commit('setHeaderTable', data);
this.tools.tablelable = data;
},
edit(u) {
this.promServer = JSON.parse(JSON.stringify(u));
this.rightBox.show = true;
@@ -426,11 +396,15 @@
this.getTableData();
},
},
mounted: function () {
mounted() {
//初始化数据
Promise.all([this.getDcData()]).then(response => {
this.getTableData();
});
//初始化表头
this.tools.customTableTitle = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
: this.tableTitle;
//是否存在分页缓存
let pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId);
if (pageSize != 'undefined' && pageSize != null) {
@@ -456,12 +430,6 @@
});
}
});
this.tools.tablelable = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
: this.tableTitle;
this.tools.dropCol = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
: this.tableTitle;
},
watch: {

124
nezha-fronted/src/components/page/config/terminallog.vue
View File

@@ -13,6 +13,16 @@
</div>
</div>
</div>
<!-- 自定义table列 -->
<transition name="el-zoom-in-top">
<element-set
v-if="tools.showCustomTableTitle"
@close="tools.showCustomTableTitle = false"
:custom-table-title.sync="tools.customTableTitle"
:original-table-title="tableTitle"
ref="customTableTitle"
></element-set>
</transition>
<el-table
class="nz-table"
:data="tableData"
@@ -20,13 +30,13 @@
ref="terminalLogTable"
:height="$tableHeight.normal"
v-scrollBar:el-table="'large'"
v-loading="loading"
v-loading="tools.loading"
:cell-class-name="messageStyle"
style="width: 100%;"
@sort-change="tableDataSort">
<el-table-column
:resizable="false"
v-for="(item, index) in tablelable"
v-for="(item, index) in tools.customTableTitle"
v-if="item.show"
:width="item.width"
:key="`col-${index}`"
@@ -49,23 +59,16 @@
</el-table-column>
<el-table-column width="28">
<template slot="header" slot-scope="scope">
<span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear">
<span @mousedown.stop="!tools.showCustomTableTitle && (tools.showCustomTableTitle = true)" 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: toTopBtnTop}" :class="{'to-top-is-hover': tableHover}" v-show="showTopBtn" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
<button v-if="scope.$index == 0" class="to-top" :style="{top: tools.toTopBtnTop}" :class="{'to-top-is-hover': tools.tableHover}" v-show="tools.showTopBtn" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
</template>
</el-table-column>
</el-table>
<Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
<element-set
v-clickoutside="elementsetHide"
:dropCol="dropCol"
@tablelable="tablelabelEmit"
:table-title="tableTitle"
ref="elementset"
></element-set>
</div>
</template>
<script>
@@ -74,16 +77,22 @@
name: "terminallog",
data() {
return {
loading: false,
tableId: 'terminalLogTable', //需要分页的table的id，用于记录每页数量
showTopBtn: false,
/*工具参数*/
tools: {
loading: false, //是否显示table加载动画
toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性
tableHover: false, //控制滚动条和top按钮同时出现
showTopBtn: false, //显示To top按钮
showCustomTableTitle: false, //自定义列弹框是否显示
customTableTitle: [], //自定义列工具的数据
},
rightBox: { //弹出框相关
show: false,
isEdit: false, //false查看，true编辑
title: ''
},
rightBoxResize: { //resize弹出框相关
show: false,
@@ -169,8 +178,6 @@
width: 100
}
],
tablelable: [],
dropCol: [],
tableData: [],
searchMsg: { //给搜索框子组件传递的信息
zheze_none: true,
@@ -213,42 +220,12 @@
}
},
methods: {
elementsetShow(s, e) {
var eventfixed = {
shezhi: 0,
screen: 0
};
eventfixed[s] = 1;
e.preventDefault();
this.$store.commit('setHeaderTable', this.tablelable);
this.$store.commit('setEventfixed', eventfixed);
const h = document.documentElement.clientHeight;
const w = document.documentElement.clientWidth;
const dw = this.$refs.elementset.$el.offsetWidth;
const dh = this.$refs.elementset.$el.offsetHeight;
let positionx =
e.clientX + dw <= w - 10 ? e.clientX + 14 : e.clientX + 14 - dw;
let positiony =
e.clientY + dh <= h - 10
? e.clientY + 20
: e.clientY + 20 - (e.clientY + dh - h);
this.$store.commit('setPosition', {positionx, positiony});
},
elementsetHide() {
//悬浮点击空白隐藏
this.$refs.elementset.elementsetHide();
},
tablelabelEmit(data) {
//获取子组件传过来的参数
this.$store.commit('setHeaderTable', data);
this.tablelable = data;
},
getTableData: function () {
this.$set(this.searchLabel, "pageNo", this.pageObj.pageNo);
this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize);
this.loading = true;
this.tools.loading = true;
this.$get('terminal/log', this.searchLabel).then(response => {
this.loading = false;
this.tools.loading = false;
if (response.code === 200) {
for (let i = 0; i < response.data.list.length; i++) {
response.data.list[i].status = response.data.list[i].status + "";
@@ -258,15 +235,6 @@
}
})
},
jumpTo(data, id) {
bus.$emit("menu-change", data);
this.$router.push({
path: "/" + data,
query: {
t: +new Date()
}
});
},
messageStyle(e) {
if (e.column.label == this.$t('config.terminallog.status')) {
if (e.row.status == '1') {
@@ -277,23 +245,6 @@
}
return '';
},
toEditReceiver: function (item) {
if (!item.isEdit) {
//如果不在编辑状态，那么其他项如果有改动，则还原改动，最后开始编辑
this.blurEditReceiver();
item.isEdit = true;
} else {
//如果已在编辑状态，判断name是否有变更，有变更则发请求
if (item.name != item.oldName) {
if (this.updateReceiverName(item) == 200) {
item.isEdit = false;
}
} else {
item.errorMessage = '';
item.isEdit = false;
}
}
},
pageNo(val) {
this.pageObj.pageNo = val;
this.getTableData();
@@ -360,14 +311,11 @@
this.getTableData();
},
},
computed: {
isCurrentUser() {
return function(username) {
return localStorage.getItem('nz-username') == username;
}
}
},
mounted() {
//初始化表头
this.tools.customTableTitle = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
: this.tableTitle;
//是否存在分页缓存
let pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId);
if (pageSize && pageSize != 'undefined') {
@@ -381,25 +329,19 @@
if (el._ps_) {
el.addEventListener("ps-scroll-y", () => {
if (el._ps_.scrollbarYTop > 50) {
this.showTopBtn = true;
this.tools.showTopBtn = true;
} else {
this.showTopBtn = false;
this.tools.showTopBtn = false;
}
});
el.addEventListener("mouseenter", () => {
this.tableHover = true;
this.tools.tableHover = true;
});
el.addEventListener("mouseleave", () => {
this.tableHover = false;
this.tools.tableHover = false;
});
}
});
this.tablelable = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
: this.tableTitle;
this.dropCol = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
: this.tableTitle;
}
}
</script>

83
nezha-fronted/src/components/page/project/project.vue
View File

@@ -43,6 +43,16 @@
</div>
<div class="pagination-top pagination-top-hide display-none"></div>
</div>
<!-- 自定义table列 -->
<transition name="el-zoom-in-top">
<element-set
v-if="tools.showCustomTableTitle"
@close="tools.showCustomTableTitle = false"
:custom-table-title.sync="tools.customTableTitle"
:original-table-title="tableTitle"
ref="customTableTitle"
></element-set>
</transition>
<el-table
:data="endpointTableData"
border
@@ -57,7 +67,7 @@
>
<el-table-column
:resizable="false"
v-for="(item, index) in tools.tablelable"
v-for="(item, index) in tools.customTableTitle"
v-if="item.show"
:width="item.width"
:key="`col-${index}`"
@@ -100,7 +110,7 @@
</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">
<span @mousedown.stop="!tools.showCustomTableTitle && (tools.showCustomTableTitle = true)" class="nz-table-gear">
<i class="nz-icon nz-icon-gear"></i>
</span>
</template>
@@ -117,21 +127,12 @@
<template v-else-if="pageType == 'project'">
<panel-tab from="project" :obj="currentProject" targetTab.sync="panel"></panel-tab>
</template>
<transition name="el-zoom-in-bottom">
<bottom-box v-if="bottomBox.showSubList" :sub-resize-show="bottomBox.subResizeShow" :is-full-screen="bottomBox.isFullScreen"
:from="'endpoint'" :target-tab.sync="bottomBox.targetTab" :detail="bottomBox.endpointDetail" :obj="endpoint" :asset-detail="bottomBox.assetDetail"
@closeSubList="bottomBox.showSubList = false" @fullScreen="fullScreen" @exitFullScreen="exitFullScreen" @listResize="listResize" ></bottom-box>
</transition>
<element-set
v-if="tools.showElementSet"
v-clickoutside="elementsetHide"
:table-title="endpointTableTitle"
:drop-col="tools.dropCol"
@tablelable="tablelabelEmit"
ref="elementset"
></element-set>
<transition name="right-box">
<add-endpoint-box v-if="rightBox.addEndpoint.show" :current-project="currentProject" :current-module="currentModule" @close="closeAddEndpointRightBox" ref="addEndpointBox"></add-endpoint-box>
</transition>
@@ -180,23 +181,17 @@
loading: false, //是否显示table加载动画
toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性
tableHover: false, //控制滚动条和top按钮同时出现
showElementSet: false, //自定义列弹框是否显示
showTopBtn: false, //显示To top按钮
tablelable: [], //从缓存中加载的table header
dropCol: [], //自定义列工具的数据
showCustomTableTitle: false, //自定义列弹框是否显示
customTableTitle: [], //自定义列工具的数据
},
tableId: 'projectTable', //需要分页的table的id，用于记录每页数量
endpoint:{
project:null,
module:null,
},
userData: [],
endpoint: {id: '', host: '', port: '', param: '', path: '', asset: {}, project: {}, module: {}, moduleId: '', assetId: '', paramObj: []},
endpointTableTitle: [
tableTitle: [
{
label: this.$t("project.endpoint.endpointId"),
prop: 'id',
@@ -249,7 +244,6 @@
pageSize: 50,
total:0
},
endpoint: {},
currentProjectTitle:'',
moduleList: [],
@@ -294,36 +288,6 @@
let vm = this;
this.$bottomBoxWindow.listResize(vm, e);
},
elementsetShow(s, e) {
var eventfixed = {
shezhi: 0,
screen: 0
};
eventfixed[s] = 1;
e.preventDefault();
this.$store.commit('setHeaderTable', this.tools.tablelable);
this.$store.commit('setEventfixed', eventfixed);
const h = document.documentElement.clientHeight;
const w = document.documentElement.clientWidth;
const dw = this.$refs.elementset.$el.offsetWidth;
const dh = this.$refs.elementset.$el.offsetHeight;
let positionx =
e.clientX + dw <= w - 10 ? e.clientX + 14 : e.clientX + 14 - dw;
let positiony =
e.clientY + dh <= h - 10
? e.clientY + 20
: e.clientY + 20 - (e.clientY + dh - h);
this.$store.commit('setPosition', { positionx, positiony });
},
elementsetHide() {
//悬浮点击空白隐藏
this.tools.showElementSet = false;
},
tablelabelEmit(data) {
//获取子组件传过来的参数
this.$store.commit('setHeaderTable', data);
this.tools.tablelable = data;
},
getEndpointTableData() {
if(this.currentModule && this.currentModule.id) {
this.pageType = 'endpoint';
@@ -493,9 +457,6 @@
this.endpoint = Object.assign({}, endpoint);
this.bottomBox.targetTab = 'assetDetail';
this.bottomBox.showSubList = true;
/*this.viewAssetState=true;
this.$refs.assetEditUnit.getAssetData(id);
this.$refs.assetEditUnit.tabView=true;*/
},
query(endpoint) {
this.endpoint = Object.assign({}, endpoint);
@@ -507,7 +468,6 @@
if(row.state == 1){
return 'up';
}else{
// return 'down'+'['+this.getStateErrorMsg(row)+']';
return `down:${this.getStateErrorMsg(row)}`
}
}
@@ -647,6 +607,10 @@
this.getProjectList();
},
mounted() {
//初始化表头
this.tools.customTableTitle = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
: this.tableTitle;
//是否存在分页缓存
let pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId);
if (pageSize) {
@@ -663,13 +627,6 @@
window.onresize = function() {
vm.$refs.leftScrollbar.update();
};
this.tools.tablelable = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
: this.endpointTableTitle;
this.tools.dropCol = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
: this.endpointTableTitle;
},
computed: {
itemTip() {

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

@@ -34,7 +34,6 @@ import editEndpointBox from './components/common/rightBox/editEndpointBox'; //en
import addEndpointBox from './components/common/rightBox/addEndpointBox'; //endpoint弹框组件
import assetBox from "./components/common/rightBox/assetBox"; //资产添加组件
import alertConfigBox from "./components/common/rightBox/alertConfigBox"; //告警规则弹框组件
import dcConfigBox from "./components/common/popBox/dcConfig"; //idc配置弹框组件
import panelBox from "./components/common/rightBox/panelBox"; //面板弹框组件
import moduleListPop from "./components/page/asset/moduleListPop"; //面板弹框组件
import cabinetConfigBox from "./components/common/popBox/cabinetConfig"; //面板弹框组件
@@ -55,7 +54,6 @@ Vue.component("edit-endpoint-box", editEndpointBox);
Vue.component("add-endpoint-box", addEndpointBox);
Vue.component("asset-box", assetBox);
Vue.component("alert-config-box", alertConfigBox);
Vue.component("idc-config-box", dcConfigBox);
Vue.component("panel-box", panelBox);
Vue.component("module-list-pop", moduleListPop);
Vue.component("cabinet-config-box", cabinetConfigBox);

100
nezha-fronted/src/store/index.js
View File

@@ -1,46 +1,23 @@
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
assetForAlertList: 0, //asset页跳转alertList时传递的assetId
assetItemId:'' , //复选框ID
assetAllId:[] , //复选框allID
dcList: 0, //监听此值，改变则刷新dc列表
/* 监听对象变化，用于顶部菜单与底部内容的同步 */
currentProject: {id: "", name: "", remark: ""},
currentModule: {id: ""},
currentAsset: {id: ""},
currentDcList: [],
projectListChange: 0,
moduleListChange: 0,
endpointListChange: 0,
assetListChange: 0,
dcListChange: 0,
alertConfigListChange: 0,
eventfixed: {
shezhi: 0,
screen: 0
},
tablelable: [], //获取头部信息
position: {
event_positiony: 0,
event_positionx: -200
},
showPanel:{
id: 0,
name: '',
type: "dashboard"
},
consoleShow:false,//是否显示console窗口
consoleCount:0,//当前console窗口数
isAddConsole:false,//是否增加窗口
consoleParam:{},//新开console窗口参数
linkData:[],//导航数据
consoleShow: false,//是否显示console窗口
consoleCount: 0,//当前console窗口数
isAddConsole: false,//是否增加窗口
consoleParam: {},//新开console窗口参数
linkData: [],//导航数据
},
getters: {
getLinkData(state){
@@ -52,85 +29,46 @@ const store = new Vuex.Store({
projectListChange(state) {
state.projectListChange++;
},
moduleListChange(state) {
state.moduleListChange++;
},
endpointListChange(state) {
state.endpointListChange++;
},
assetListChange(state) {
state.assetListChange++;
},
alertConfigListChange(state) {
state.alertConfigListChange++;
},
dcListChange(state) {
state.dcListChange++;
},
currentProjectChange(state, project) {
state.currentProject = project;
},
currentDcListChange(state, dcList) {
state.currentDcList = dcList;
},
currentAssetChange(state, asset) {
state.currentAsset = asset;
},
panelShowPanelChange(state, panel) { //用来panel页控制初始panel的
state.showPanel.id = panel.id;
state.showPanel.name = panel.name;
},
setHeaderTable(state, data) { //设置table头部
state.tablelable = data;
},
assetItemIdChange(state,data){ //修改复选框
state.assetItemId = data
},
assetAllIdChange(state,data){ //修改复选框
state.assetAllId = data
},
setEventfixed(state, data) { //设置坐标
state.eventfixed = data;
},
setPosition(state, data) { //设置坐标
state.position = data;
},
assetForAlertListChange(state, data) { //asset跳转alertmsg时
state.assetForAlertList = data;
},
openConsole(state){//打开console，如果当前窗口数为0，则默认新建一个console
state.consoleShow=true;
if(state.consoleCount===0){
openConsole(state) {//打开console，如果当前窗口数为0，则默认新建一个console
state.consoleShow = true;
if(state.consoleCount === 0){
state.consoleCount++;
state.isAddConsole = true;
}else {
state.isAddConsole = false;
}
},
addConsole(state,data){//打开console，并新建一个console
state.consoleShow=true;
addConsole(state,data) {//打开console，并新建一个console
state.consoleShow = true;
state.consoleCount++;
state.isAddConsole = true;
state.consoleParam = data;
},
addConsoleNum(state){
addConsoleNum(state) {
state.consoleCount++;
},
removeConsole(state){//移除一个console，如果是最后一个，则关闭窗口，否则不关闭窗口
removeConsole(state) {//移除一个console，如果是最后一个，则关闭窗口，否则不关闭窗口
state.consoleCount--;
if(state.consoleCount===0){
state.consoleShow=false;
if(state.consoleCount === 0){
state.consoleShow = false;
}
},
closeConsole(state){//关闭console窗口
state.consoleShow=false;
closeConsole(state) {//关闭console窗口
state.consoleShow = false;
state.consoleCount = 0;
state.consoleParam ={};
},
minConsole(state){//最小化窗口
state.consoleShow=false;
minConsole(state) {//最小化窗口
state.consoleShow = false;
},
setLinkData(state, data) {
state.linkData = data;