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

perf: 滚动条替换和toTop替换

Browse Source
This commit is contained in:
陈劲松
2020-12-14 20:25:24 +08:00
committed by chenjinsong
parent 2ea0b88989
commit 0764dcdd56
76 changed files with 480 additions and 1368 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -9,6 +9,27 @@ html {
height: 100%;
overflow: hidden;
}
/*---滚动条默认显示样式--*/
::-webkit-scrollbar-thumb {
background-color: #ddd;
border-radius: 6px;
border: 2px solid #fff;
}
/*---鼠标点击滚动条显示样式--*/
::-webkit-scrollbar-thumb:hover {
background-color: #c8c8c8;
border-radius: 6px;
}
/*---滚动条大小--*/
::-webkit-scrollbar {
width: 14px;
height: 14px;
}
/*---滚动框背景样式--*/
::-webkit-scrollbar-track-piece {
background-color: transparent;
}
li{
list-style-type:none ;
}
@@ -867,12 +888,12 @@ li{
border-right: none;
background: #f9f9f9;
}
.nz-table .el-table__body {
/*.nz-table .el-table__body {
width: 100% !important;
}
.nz-table .el-table__virtual-wrapper {
width: 100% !important;
}
}*/
.chart-table .nz-table td, .chart-alert-info .nz-table td {
background-color: white;
}
@@ -912,7 +933,7 @@ li{
}
.nz-table .el-table__body-wrapper {
background-color: $content-right-background-color;
overflow: hidden;
/*overflow: hidden;*/
}
.chart-table .nz-table th:last-of-type {
background-color: white;
@@ -1283,6 +1304,7 @@ li{
.right-box-form-box {
height: calc(100% - 132px);
width: 100%;
overflow: auto;
}
.el-scrollbar__wrap {
@@ -1897,9 +1919,6 @@ li{
.ps .ps__rail-x:hover, .ps .ps__rail-y:hover, .ps .ps__rail-x:focus, .ps .ps__rail-y:focus, .ps .ps__rail-x.ps--clicking, .ps .ps__rail-y.ps--clicking {
background-color: transparent;
}
.el-table__fixed-right {
right: 0 !important;
}
.asset .ps__rail-y {
z-index: 29;
}

11
nezha-fronted/src/components/charts/chart-detail.vue
View File

@@ -23,7 +23,7 @@
<span class="el-dropdown-link chart-title-text" @click="dropdownMenuShow = !dropdownMenuShow">{{data.title}}</span>
</div>
<div ref="chartInfo" class="chart-info" :id="'chartInfoDiv' + chartIndex" v-cloak>
<el-scrollbar style="height: 100%;width:100%;" ref="scrollbar" class="el-scrollbar-normal">
<div ref="scrollbar" style="height: 100%;width:100%; overflow: auto;">
<div v-for="(item, index) in detail" :key="index" class="chart-sub">
<div class="chart-sub-title" @click="hideElement(index)">
<span><i :class="{'nz-icon nz-icon-caret-right': show.indexOf(index) == -1,'nz-icon nz-icon-caret-bottom': show.indexOf(index) > -1}"></i></span>
@@ -91,7 +91,6 @@
tooltip-effect="light"
height="100%"
ref="dataTable"
v-scrollBar:el-table="'small'"
>
<el-table-column
:resizable="true"
@@ -248,7 +247,7 @@
</div>
</el-collapse-transition>
</div>
</el-scrollbar>
</div>
</div>
</div>
<span v-if="data.resizable" class="vue-resizable-handle" @mousedown="startResize"></span>
@@ -479,9 +478,6 @@
this.initChart(this.detail[0].data.stateSeries);
});
}
this.$nextTick(() => {
this.$refs.scrollbar.update();
});
this.endLoading();
},
initChart(series) {
@@ -565,9 +561,6 @@
},
mounted() {
this.firstLoad = false;
this.$nextTick(() => {
this.$refs.scrollbar.update();
});
setTimeout(() => {
this.ready = true;
}, 300);

14
nezha-fronted/src/components/charts/chart-table.vue
View File

@@ -51,7 +51,7 @@
</div>
<div class="mt-10 table-container" v-cloak v-show="firstShow">
<el-table class="nz-table" :id="'tableContainer'+chartIndex" ref="tableContainer" :height="tableHeight"
:data="seriesItem" border tooltip-effect="light" v-cloak v-scrollBar:el-table
:data="seriesItem" border tooltip-effect="light" v-cloak
@sort-change="tableDataSort" >
<el-table-column sortable prop="time" :label="$t('dashboard.panel.chartTableColumn.time')" min-width="100"
:sort-orders="['ascending', 'descending']" :sortable="'custom'"></el-table-column>
@@ -84,7 +84,7 @@
<span class="float-right dialog-tool" @click="screenRefreshChart" style="margin-right: 15px"><i class="global-active-color nz-icon nz-icon-refresh"/></span>
</div>
<el-table style="margin-top: 10px;" class="nz-table" height="95%" :data="seriesItemScreen" border
tooltip-effect="light" v-scrollBar:el-table @sort-change="tableDataSortScreen">
@sort-change="tableDataSortScreen" tooltip-effect="light">
<el-table-column sortable prop="time" :label="$t('dashboard.panel.chartTableColumn.time')" min-width="100"
:sort-orders="['ascending', 'descending']" :sortable="'custom'"></el-table-column>
<el-table-column sortable prop="element" :show-overflow-tooltip="true"
@@ -210,7 +210,6 @@
}],
searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()],//全屏显示的时间
oldSearchTime: [],
ps: null,
mapping:{},
};
},
@@ -284,12 +283,6 @@
let container = document.querySelector('#chartTableDiv' + this.chartIndex + " .table-container");
container.style.height = `calc(100% - ${deHeight * 2}px)`;
this.tableHeight = `calc(100% - ${this.$refs.Pagination.$el.offsetHeight}px)`;
this.$nextTick(() => {
this.$nextTick(() => {
this.ps = container.querySelector(".el-table__body-wrapper")._ps_;
this.ps.update();
});
});
},
showLoad(chartItem) {
//设置高度 chart-table
@@ -501,9 +494,6 @@
},
beforeDestroy() {
this.clearChart();
if (this.ps) {
this.ps.destroy();
}
},
};
</script>

5
nezha-fronted/src/components/charts/chart-url.vue
View File

@@ -32,7 +32,7 @@
<div :id="'chartUrl'+chartIndex" class="mt-10 url-container" v-show="firstShow" >
<iframe :id="'urlContainer'+chartIndex" frameborder="0" width="100%" height="100%" name="showHere" scrolling=auto v-if="!showStatic"
style="z-index:5000;padding-bottom:6px;"
></iframe><!-- style=" position: absolute; width: 100%; height: 100%; top: 0;left:0;" :src="chart.url" v-scrollBar:char-url-preview-->
></iframe>
</div>
<div style="position: absolute;width: 100%; top:calc(50% - 50px);text-align: center;" v-if="showStatic">
<div :id="'staticContainer'+chartIndex" class="center-content"></div>
@@ -41,11 +41,10 @@
<el-dialog class="nz-dialog table-chart-dialog" :title="$t('dashboard.panel.view')" :visible.sync="screenModal" width="96%" @opened="initDialog" @close="screenModal = false" >
<div slot="title">
<span class="nz-dialog-title">{{chartData.title}}</span>
<!--<span class="float-right dialog-tool" @click="screenRefreshChart" style="margin-right: 15px"><i class="global-active-color nz-icon nz-icon-refresh"/></span>-->
</div>
<iframe :id="'urlContainerFull'+chartIndex" frameborder="0" width="100%" height="100%" name="showHereFull" scrolling=auto v-if="!showStatic"
style="z-index:5000;padding-bottom:6px;"
></iframe><!-- style=" position: absolute; width: 100%; height: 100%; top: 0;left:0;" :src="chart.url" v-scrollBar:char-url-preview-->
></iframe>
<div style="position: absolute;width: 100%; top:calc(50% - 100px);text-align: center;" v-if="showStatic">
<div :id="'staticContainerFull'+chartIndex" class="center-content"></div>
</div>

27
nezha-fronted/src/components/charts/chartPreview.vue
View File

@@ -81,7 +81,7 @@
<div class="chart-no-data" v-show="noData">No Data</div>
<template v-if="!hasLegendOptions">
<div class="legend-container legend-container-screen" ref="screenLegendArea" @mouseenter="mouseEnterFullChart" @mouseleave="mouseLeaveFullChart" v-show="showLegend" v-scrollBar:legend>
<div @mouseenter="mouseEnterFullChart" @mouseleave="mouseLeaveFullChart" class="legend-container legend-container-screen" ref="screenLegendArea" v-show="showLegend">
<div v-for="(item, index) in screenLegendList" :title="item.alias?item.alias:item.name" @click="clickScreenLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGreyScreen[index]}" :key="'legend_' + item.name+'_'+index">
<span class="legend-shape" :style="{background:(isGreyScreen[index]?'#D3D3D3':item.color)}"></span>{{item.alias?item.alias:item.name}}
<br/><!--bgColorList[index]-->
@@ -89,7 +89,7 @@
</div>
</template>
<template v-else>
<div class="legend-container legend-container-screen" ref="screenLegendArea" @mouseenter="mouseEnterFullChart" @mouseleave="mouseLeaveFullChart" v-show="showLegend" v-scrollBar:legend>
<div @mouseenter="mouseEnterFullChart" @mouseleave="mouseLeaveFullChart" class="legend-container legend-container-screen" ref="screenLegendArea" v-show="showLegend">
<table style="width: 100%" border="0" cellpadding="0" cellspacing="0">
<th style="width: 100%"></th>
<template v-for="legendOption in screenLegendOptions">
@@ -132,7 +132,7 @@
<template v-if="chart.type==='table'">
<div id="chartTablePreview" :class="{'visible':tableShow,'hidden':!tableShow}" >
<el-table id="tableContainer" style="margin-top: 10px;" class="nz-table" height="95%" :data="seriesItemScreen" border tooltip-effect="light" v-scrollBar:el-table >
<el-table :data="seriesItemScreen" border class="nz-table" height="95%" id="tableContainer" style="margin-top: 10px;" tooltip-effect="light">
<!-- <el-table-column sortable :show-overflow-tooltip="true" prop="metric" :label="$t('dashboard.panel.chartTableColumn.metric')" ></el-table-column>-->
<!-- <el-table-column sortable :show-overflow-tooltip="true" prop="label" :label="$t('dashboard.panel.chartTableColumn.label')" ></el-table-column>-->
<el-table-column sortable prop="time" :label="$t('dashboard.panel.chartTableColumn.time')" width="145" ></el-table-column>
@@ -155,7 +155,7 @@
<div id="chartUrlPreview" :class="{'visible':urlShow,'hidden':!urlShow}" class="char-url-preview">
<iframe id="chartUrlFrame" frameborder="0" width="100%" height="100%" name="showHere" scrolling=auto
style="z-index:5000;"
></iframe><!-- style=" position: absolute; width: 100%; height: 100%; top: 0;left:0;" :src="chart.url" v-scrollBar:char-url-preview-->
></iframe>
</div>
</template>
@@ -163,9 +163,9 @@
<template v-if="chart.type==='text'">
<div id="chartTextPreview" class="chart-text-preview">
<el-scrollbar style="height: 100%;" class="el-scrollbar-normal">
<div style="height: 100%; overflow: auto;">
<div style="height: 100%;" v-html="chart.param.text" ></div>
</el-scrollbar>
</div>
</div>
</template>
@@ -773,14 +773,9 @@
return [x,y];
},
formatter:function(params){
//display:inline-block;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;
let str = `<div>`;
let sum = 0;
//let str = `<div style='white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;min-width:150px;max-width:600px;display:inline-block;line-height: 18px;font-size:12px;font-family: Roboto,Helvetica Neue,Arial,sans-serif;'>`;
params.forEach((item, i) => {
//let tip=legend.find((element)=>{
//return element.name == item.seriesName;
//});
let tip=legend[item.seriesIndex];
let color = self.bgColorList[item.seriesIndex];
if(i===0){
@@ -1381,7 +1376,7 @@
item['total'] = sum;
}
})
});
resolve();
})
},
@@ -1402,20 +1397,14 @@
option.sort = 'asc'
}
}
},
mounted() {
},
beforeDestroy() {
this.clearChart();
//const addChartBox = document.querySelector('.right-box-add-chart');
//addChartBox.style.cssText = this.oldChartBoxCss;
try {
if(this.echartModalStore){
this.echartModalStore.off('magictypechanged');
}
} finally {}
this.$refs.screenLegendArea && this.$refs.screenLegendArea._ps_.destroy();
} finally{}
},
};

17
nezha-fronted/src/components/charts/line-chart-block.vue
View File

@@ -57,14 +57,14 @@
<div class="line-area" ref="lineChartArea" :id="'lineChartArea'+chartIndex" v-show="firstShow" style="width:100%;"></div>
<div class="chart-no-data" v-show="noData">No Data</div>
<template v-if="!hasLegendOptions">
<div class='legend-container' ref="legendArea" v-show="firstShow" v-scrollBar:legend>
<div class='legend-container' ref="legendArea" v-show="firstShow">
<div v-for="(item, index) in legendListMore" :title="item.alias?item.alias:item.name" @click="clickLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGrey[index]}" :key="'legend_' + item.name+'_'+index">
<span class="legend-shape" :style="{background:(isGrey[index]?'#D3D3D3':item.color)}"></span>{{item.alias?item.alias:item.name}}
</div>
</div>
</template>
<template v-else>
<div class='legend-container' ref="legendArea" v-show="firstShow" v-scrollBar:legend>
<div class='legend-container' ref="legendArea" v-show="firstShow">
<table style="width: 100%" border="0" cellpadding="0" cellspacing="0">
<th style="width: 100%"></th>
<template v-for="legendOption in legendOptions">
@@ -138,7 +138,7 @@
<div class="line-area" ref="screenShowArea" id="screenShowArea" style="margin-top:0px;" @mouseenter="mouseEnterFullChart" @mouseleave="mouseLeaveFullChart"></div>
<div class="chart-no-data" v-show="noData">No Data</div>
<template v-if="!hasLegendOptions">
<div class="legend-container legend-container-screen" :id="'screenLegendArea'+chartIndex" @mouseenter="mouseEnterFullChart" @mouseleave="mouseLeaveFullChart" v-show="showLegend" v-scrollBar:legend>
<div :id="'screenLegendArea'+chartIndex" @mouseenter="mouseEnterFullChart" @mouseleave="mouseLeaveFullChart" class="legend-container legend-container-screen" v-show="showLegend">
<div v-for="(item, index) in screenLegendListMore" :title="item.alias?item.alias:item.name" @click="clickScreenLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGreyScreen[index]}" :key="'legend_' + item.name+'_'+index">
<span class="legend-shape" :style="{background:(isGreyScreen[index]?'#D3D3D3':item.color)}"></span>{{item.alias?item.alias:item.name}}
<br/><!--bgColorList[index]-->
@@ -146,7 +146,7 @@
</div>
</template>
<template v-else>
<div class="legend-container legend-container-screen" :id="'screenLegendArea'+chartIndex" @mouseenter="mouseEnterFullChart" @mouseleave="mouseLeaveFullChart" v-show="showLegend" v-scrollBar:legend>
<div :id="'screenLegendArea'+chartIndex" @mouseenter="mouseEnterFullChart" @mouseleave="mouseLeaveFullChart" class="legend-container legend-container-screen" v-show="showLegend">
<table style="width: 100%" border="0" cellpadding="0" cellspacing="0">
<th style="width: 100%"></th>
<template v-for="legendOption in screenLegendOptions">
@@ -1459,14 +1459,6 @@
// 将秒改为毫秒
//alert('table=='+JSON.stringify(queryItem))
seriesItem.theData.data = queryItem.values.map((dpsItem, dpsIndex) => {
/*曲线汇总暂不需要
if (sumData.data[dpsIndex]) {
const sumNum = sumData.data[dpsIndex][1] || 0;
sumData.data[dpsIndex][1] = sumNum + dpsItem[1];
} else {
sumData.data[dpsIndex] = [dpsItem[0] * 1000, dpsItem[1]];
}
*/
return [dpsItem[0] * 1000, dpsItem[1]];
});
series.push(seriesItem.theData);
@@ -1846,7 +1838,6 @@
}
setChart(this.chartIndex, null);
window.removeEventListener('resize', this.chartResize);
this.$refs.legendArea._ps_.destroy();
},
};

2
nezha-fronted/src/components/cli/console.vue
View File

@@ -7,7 +7,7 @@
}
</style>
<template>
<div class="console" :id="'ternimalContainer'+idIndex" v-scrollBar:xterm>
<div :id="'ternimalContainer'+idIndex" class="console">
<div :id="'terminal'+idIndex" ></div>
</div>
</template>

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

@@ -23,7 +23,6 @@
ref="alertListTable"
tooltip-effect="light"
:height="tableHeight"
v-scrollBar:el-table="'large'"
v-loading="tools.loading"
:cell-class-name="labelsClassName"
@selection-change="selectChange"
@@ -162,7 +161,7 @@
</template>
</el-table-column>
</el-table>
<button class="to-top" :style="{top: tools.toTopBtnTop}" :class="{'to-top-is-hover': tools.tableHover}" v-show="tools.showTopBtn && bottomBox.mainResizeShow &&showTopBtn" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
<button :class="{'to-top-is-hover': tools.tableHover}" :style="{top: tools.toTopBtnTop}" @click="toTop(scrollWrap)" class="to-top" v-show="tools.showTopBtn && bottomBox.mainResizeShow &&showTopBtn"><i class="nz-icon nz-icon-top"></i></button>
<!--<弹窗>-->
<!--导出-->
<div class="export-xlsx">
@@ -367,6 +366,8 @@
viewProjectData: {id: '', name: '', remark: ''},
viewModuleData: {id: '', name: '', project: {}, port: '', path: '', param: '', paramObj: []},
viewAssetState: false,
scrollWrap: null,
}
},
computed: {
@@ -566,8 +567,13 @@
dialogClose() {
this.graphShow = false;
},
getAlertList: function () {
getAlertList() {
if (!this.scrollWrap) {
this.$nextTick(() => {
this.scrollWrap = this.$refs.alertListTable.bodyWrapper;
this.toTopBtnHandler(this.scrollWrap);
});
}
},
promQueryParamConvert(obj){
let r = "(" + obj.alertRule.expr + ")";
@@ -862,7 +868,7 @@
returnSeverityLabel(key){
return this.$CONSTANTS.alertMessage.severityData.find(s => {return s.value == key}).label
},
plpsscrolly(el,self){
/*plpsscrolly(el,self){
if (el._ps_.scrollbarYTop > 50) {
self.tools.showTopBtn = true;
self.tools.tableHover = true;
@@ -870,14 +876,9 @@
self.tools.showTopBtn = false;
self.tools.tableHover = false;
}
},
},*/
},
watch: {
/*tableData(){
if(this.$refs.alertListTable&&this.$refs.alertListTable.bodyWrapper){
this.$refs.alertListTable.bodyWrapper.scrollTop = 0;
}
},*/
showSubList(n) {
this.$bottomBoxWindow.showSubListWatch(vm, n);
},
@@ -901,13 +902,6 @@
}
this.getAlertList();
this.$nextTick(() => {
//绑定滚动条事件，控制top按钮
let el = this.$refs.alertListTable.$el.querySelector(".el-table__body-wrapper");
if (el._ps_) {
el.addEventListener("ps-scroll-y", this.plpsscrolly.bind('',el,this));
}
});
/*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))
@@ -927,11 +921,7 @@
*/
},
beforeDestroy(){
let el = this.$refs.alertListTable.$el.querySelector(".el-table__body-wrapper");
if (el._ps_) {
el.removeEventListener("ps-scroll-y", this.plpsscrolly.bind('',el,this));
el._ps_.destroy();
}
this.scrollbarWrap.removeEventListener('scroll', bus.debounce);
}
}

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

@@ -85,29 +85,10 @@
this.$emit('update:targetTab', tab);
},
afterResize() {
let vm = this;
if (this.from == 'endpoint' && this.targetTab == 'endpointQuery') {
this.$refs.endpointQuery.tableReload();
}
//刷新滚动条
let intervalFunc = setInterval(function(){
if (!window.resizing) {
let pss = document.querySelectorAll(".el-table__body-wrapper");
if (pss) {
pss.forEach(ps => {
ps._ps_ && ps._ps_.update();
});
}
vm.$refs.panelTab && vm.$refs.panelTab.$refs.dashboardScrollbar.update();
clearInterval(intervalFunc);
}
}, 500);
}
},
beforeDestroy(){
}
}
</script>

23
nezha-fronted/src/components/common/bottomBox/tabs/cabinetTab.vue
View File

@@ -22,7 +22,6 @@
border
v-loading="loading"
ref="cabTable"
v-scrollBar:el-table="'large'"
:cell-class-name="assetStatClassName"
:height="$tableHeight.noPagination"
style="width: 100%;"
@@ -251,13 +250,6 @@
})
})
},
plpsscrolly(el,self){
if (el._ps_.scrollbarYTop > 50) {
self.showTopBtn = true;
} else {
self.showTopBtn = false;
}
},
},
watch: {
obj: {
@@ -272,21 +264,6 @@
}
},
},
mounted() {
this.$nextTick(() => {
//绑定滚动条事件，控制top按钮
let el = this.$refs.cabTable.$el.querySelector(".el-table__body-wrapper");
if (el._ps_) {
el.addEventListener("ps-scroll-y", this.plpsscrolly.bind('',el,this));
}
});
},
beforeDestroy(){
let el = this.$refs.cabTable.$el.querySelector(".el-table__body-wrapper");
if (el._ps_) {
el.removeEventListener("ps-scroll-y", this.plpsscrolly.bind('',el,this));
}
}
}
</script>

47
nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue
View File

@@ -60,7 +60,7 @@
</div>
<div class="table-header-inner" @click="clearSelectedMetrics"><span><i style="font-size: 12px;margin-left: 2px;" class="nz-icon nz-icon-close " :class="{'control-icon-unchecked':selectedEndpoints.length<1,'control-icon-checked':selectedEndpoints.length>0}"></i></span></div>
<pl-table :row-height="28" use-virtual :datas="tableData" border :empty-text="$t('config.mib.noData')" :header-cell-class-name="cellClass" :style="{height: $tableHeight.noPagination}"
class="nz-table endpoint-query-table" style="width: 100%;" v-loading="loading" v-scrollBar:el-table="'large'" :pagination-show="false" ref="endpointQueryTable"
:pagination-show="false" class="nz-table endpoint-query-table" ref="endpointQueryTable" style="width: 100%;" v-loading="loading"
@selection-change="selectChange" v-if="tableShow && plTableSHow" :border="true" :tooltip-effect="'light'">
<pl-table-column
type="selection"
@@ -653,32 +653,6 @@
}
}
},
plpsscrolly(self){
let el = self.$refs.endpointQueryTable.$el.querySelector(".el-table__body-wrapper");
self.scrollTop=el.scrollTop;
if (el._ps_.scrollbarYTop > 50) {
self.showTopBtn = true;
self.tableHover = true;
} else {
self.showTopBtn = false;
self.tableHover = false;
}
},
tableResize(){
let el = this.$refs.endpointQueryTable.$el.querySelector(".el-table__body-wrapper");
el.removeEventListener("ps-scroll-y", this.plpsscrolly.bind('',this));
this.plTableSHow=false;
this.$nextTick(()=>{
this.plTableSHow=true;
this.$nextTick(()=>{
el = this.$refs.endpointQueryTable.$el.querySelector(".el-table__body-wrapper");
el.addEventListener("ps-scroll-y", this.plpsscrolly.bind('',this));
setTimeout(()=>{
el.scrollTop = this.scrollTop;
},100)
});
});
}
},
watch: {
obj: {
@@ -700,26 +674,7 @@
},
mounted() {
this.getPanelData();
//this.$nextTick(() => {
setTimeout(() => {this.$refs.endpointQueryTable.setHeight();}, 700);
setTimeout(() => {
//绑定滚动条事件，控制top按钮
let el = this.$refs.endpointQueryTable.$el.querySelector(".el-table__body-wrapper");
if (el._ps_) {
el.addEventListener("ps-scroll-y", this.plpsscrolly.bind('',this));
}
}, 300);
//});
window.addEventListener('resize', this.tableResize);
},
beforeDestroy(){
window.removeEventListener('resize', this.tableResize);
let el = this.$refs.endpointQueryTable.$el.querySelector(".el-table__body-wrapper");
if (el._ps_) {
el.removeEventListener("ps-scroll-y", this.plpsscrolly);
el._ps_.destroy();
}
}
}
</script>

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

@@ -46,7 +46,6 @@
v-loading="tools.loading"
class="nz-table endpoint-table"
:height="$tableHeight.noPagination"
v-scrollBar:el-table="'large'"
:cell-class-name="messageStyle"
ref="endpointTable"
style="width: 100%;"
@@ -514,25 +513,6 @@
? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-/projectBottom"))
: this.tableTitle;
this.$nextTick(() => {
//绑定滚动条事件，控制top按钮
let el = this.$refs.endpointTable.$el.querySelector(".el-table__body-wrapper");
if (el._ps_) {
el.addEventListener("ps-scroll-y", () => {
if (el._ps_.scrollbarYTop > 50) {
this.tools.showTopBtn = true;
} else {
this.tools.showTopBtn = false;
}
});
el.addEventListener("mouseenter", () => {
this.tools.tableHover = true;
});
el.addEventListener("mouseleave", () => {
this.tools.tableHover = false;
});
}
});
this.initEvent();
},
beforeDestroy(){

62
nezha-fronted/src/components/common/bottomBox/tabs/panelTab.vue
View File

@@ -81,14 +81,14 @@
<!--图表-->
<div class="table-list" id="tableList">
<el-scrollbar class="el-scrollbar-large" style="height: 100%" ref="dashboardScrollbar">
<div ref="dashboardScrollbar" style="height: 100%; overflow: auto;">
<div class="box-content">
<chart-list :additional-info="obj" :detail="detail" :draggable="draggable" :from="from" :is-model="from == $CONSTANTS.fromRoute.model" @on-edit-chart="editChart"
@on-refresh-time="refreshTime" @on-remove-chart="delChart" ref="chartList"></chart-list>
</div>
</el-scrollbar>
</div>
<button class="to-top" :class="{'to-top-is-hover': tableHover}" v-show="showTopBtn" @click="$toTop('el', $refs.dashboardScrollbar.wrap)" style="bottom: 0;"><i class="nz-icon nz-icon-top"></i></button>
</div>
<button :class="{'to-top-is-hover': tableHover}" @click="toTop(scrollbarWrap)" class="to-top" style="bottom: 0;" v-show="showTopBtn"><i class="nz-icon nz-icon-top"></i></button>
<transition name="right-box">
<chart-box :chart="chart" :from="from" :panel-data="panelData" :show-panel="showPanel" @close="closeRightBox" @delete-chart="delChart" @on-create-success="createSuccess" @on-delete-success="delChartOk" ref="addChartModal" v-if="rightBox.show"></chart-box>
</transition>
@@ -172,6 +172,7 @@
//removeModal: false, // 删除弹出
//deleteObj: {}, // 删除对象
//---图表相关参数--end
scrollbarWrap: null,
}
},
components: {
@@ -211,27 +212,6 @@
this.refresh();
}
},
scrollbarHeightHandler() {
setTimeout(() => {
let top = '';
let top2 = '';
document.querySelector("body>.el-dropdown-menu").addEventListener("ps-y-reach-end", this.psYReachEnd);
}, 100);
},
psYReachEnd(){
let yDom = document.querySelector("body>.el-dropdown-menu>.ps__rail-y");
let yDom2 = document.querySelector("body>.el-dropdown-menu>.ps__rail-y>.ps__thumb-y");
if (top) {
yDom.style.top = top;
} else {
top = yDom.style.top;
}
if (top2) {
yDom2.style.top = top2;
} else {
top2 = yDom2.style.top;
}
},
// 编辑图表信息,打开编辑弹窗
editChart(data) {
if (!data.param) {
@@ -420,18 +400,10 @@
// 滚动事件触发下拉加载
onScroll() {
let _self = this;
let scrollbarWrap = this.$refs.dashboardScrollbar.wrap;
scrollbarWrap.onscroll = function() {
if (scrollbarWrap.scrollTop > 50) {
_self.showTopBtn = true;
} else {
_self.showTopBtn = false;
}
_self.$refs.chartList.loadChartData(scrollbarWrap.scrollTop);
/*if (scrollbarWrap.scrollHeight - scrollbarWrap.scrollTop - scrollbarWrap.offsetHeight < 20) {
_self.$refs.chartList.pageDataList(true, _self.panelId);
}*/
}
this.scrollbarWrap.addEventListener('scroll', bus.debounce(function() {
_self.showTopBtn = _self.scrollbarWrap.scrollTop > 50;
_self.$refs.chartList.loadChartData(_self.scrollbarWrap.scrollTop);
}, 300));
},
focusInput:function(){
let classVal=document.getElementById('queryPanel').parentElement.getAttribute("class");
@@ -476,17 +448,18 @@
})
}
},
tableListEnter(self){
self.tableHover = true;
tableListEnter(){
this.tableHover = true;
},
tableListLaeve(self){
self.tableHover = false;
tableListLeave(){
this.tableHover = false;
},
},
mounted: function () {
this.scrollbarWrap = this.$refs.dashboardScrollbar;
this.onScroll();
document.querySelector("#tableList").addEventListener("mouseenter", this.tableListEnter.bind('',this));
document.querySelector("#tableList").addEventListener("mouseleave", this.tableListLaeve.bind('',this));
document.querySelector("#tableList").addEventListener("mouseenter", this.tableListEnter);
document.querySelector("#tableList").addEventListener("mouseleave", this.tableListLeave);
},
watch: {
'filter.searchName':function(n,o){
@@ -507,11 +480,8 @@
}
},
beforeDestroy(){
if(document.querySelector("#tableList")){
document.querySelector("#tableList").removeEventListener("mouseenter", this.tableListEnter);
document.querySelector("#tableList").removeEventListener("mouseleave", this.tableListLaeve);
document.querySelector("body>.el-dropdown-menu").removeEventListener("ps-y-reach-end", this.psYReachEnd);
}
document.querySelector("#tableList").removeEventListener("mouseleave", this.tableListLeave);
}
}
</script>

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

@@ -2,7 +2,7 @@
<div class="pop-custom" v-clickoutside="esc">
<div class="pop-title">{{$t('overall.select')}}</div>
<div class="pop-box custom-labels">
<el-scrollbar style="height: 100%;">
<div style="height: 100%; overflow: auto;">
<!--NotSet 为true不可设置-->
<div
v-for="(item,index) in custom"
@@ -19,7 +19,7 @@
</el-scrollbar>
</div>
</div>
<div class="custom-bottom-btns">
<button v-if="isCancel" type="button" @click="batchHandler(false)" class="nz-btn nz-btn-size-small-new nz-btn-style-light-new is-cancel">

4
nezha-fronted/src/components/common/exportXLSX.vue
View File

@@ -65,7 +65,7 @@
<div>
<div class="result-title">{{$t('overall.result.failedDetail')}}:</div>
<div class="result-detail" v-if="importResult&&importResult.failDetail">
<el-scrollbar style="height: 100%">
<div style="height: 100%; overflow: auto;">
<!-- <ul>
<li v-for="(item,index) in importResult.failDetail"><span>{{item.lineNo}}</span>:<span>{{item.errorMsg}}</span> </li>
</ul>-->
@@ -77,7 +77,7 @@
</div>
</div>
</template>
</el-scrollbar>
</div>
</div>
</div>
</div>

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

@@ -47,7 +47,7 @@
<div class="vertical-line" ></div>
</el-menu-item>
<el-submenu :index="`${index}`" :key="index" popper-class="nz-submenu" v-for="(menu, index) in getMenuList" v-if="menu.code != 'header'">
<el-submenu :index="`${index}`" :key="index" popper-class="nz-submenu" v-for="(menu, index) in getMenuList" v-if="menu.code != 'header' && menu.code != 'menu'">
<template v-if="menu.code == 'asset'">
<template slot="title">
<div @click="jumpToAsset()" v-if="assetData.length == 0">{{$t(menu.i18n)}}</div>
@@ -56,13 +56,13 @@
<template>
<el-menu-item index="3-0" v-if="assetData.length == 0"><div @click="createBox({type: 6})" v-has="'asset_toAdd'"><i class="nz-icon nz-icon-create-square header-dropdown-add"></i>&nbsp;&nbsp;{{$t("overall.createDatacenter")}}</div></el-menu-item>
<template v-else>
<el-scrollbar style= 'height: 360px' v-if="assetData.length>10">
<div style='height: 360px; overflow: auto;' v-if="assetData.length>10">
<el-menu-item :index="'3-' + index" :key="index" v-for="(item, index) in assetData">
<div :class="{'menu-item-active': route == '/asset' && activeItemIndex == item.id}" @click="jumpToAsset(item)" @mouseenter="hoverItemIndex = '3-' + index" @mouseleave="hoverItemIndex = ''">
<span class="too-long-split" style="width: 130px;">{{item.name}}</span>
</div>
</el-menu-item>
</el-scrollbar>
</div>
<el-menu-item :index="'3-' + index" :key="index" v-else v-for="(item, index) in assetData">
<div :class="{'menu-item-active': route == '/asset' && activeItemIndex == item.id}" @click="jumpToAsset(item)" @mouseenter="hoverItemIndex = '3-' + index" @mouseleave="hoverItemIndex = ''">
<span class="too-long-split" style="width: 130px;">{{item.name}}</span>
@@ -79,14 +79,14 @@
<template>
<el-menu-item index="2-0" v-if="projectData.length == 0"><div @click="createBox({type: 1})" v-has="'project_toAdd'"><i class="nz-icon nz-icon-create-square header-dropdown-add"></i>&nbsp;&nbsp;{{$t("overall.createProject")}}</div></el-menu-item>
<template v-else>
<el-scrollbar style="height:360px" v-if="projectData.length>10">
<div style="height: 360px; overflow: auto;" v-if="projectData.length>10">
<el-menu-item :index="'2-' + index" :key="index" v-for="(item, index) in projectData">
<div :class="{'menu-item-active': route == '/project' && activeItemIndex == item.id}" @click="jumpToProject(item)" @mouseenter="hoverItemIndex = '2-' + index" @mouseleave="hoverItemIndex = ''">
<span class="too-long-split" style="width: 135px;">{{item.name}}</span>
<div @click.stop="toEditProject(item)" class="menu-edit" v-has="'project_toEdit'" v-show="hoverItemIndex == '2-' + index && item.buildIn != 1"><i class="nz-icon nz-icon-edit"></i></div>
</div>
</el-menu-item>
</el-scrollbar>
</div>
<el-menu-item :index="'2-' + index" :key="index" v-else v-for="(item, index) in projectData">
<div :class="{'menu-item-active': route == '/project' && activeItemIndex == item.id}" @click="jumpToProject(item)" @mouseenter="hoverItemIndex = '2-' + index" @mouseleave="hoverItemIndex = ''">
<span class="too-long-split" style="width: 135px;">{{item.name}}</span>
@@ -108,117 +108,6 @@
</template>
</el-submenu>
<!--<el-submenu index="1" popper-class="nz-submenu">
<template slot="title">
<div @click="jumpTo('/overview')" :class ="(route == '/overview' ||route == '/panel' || route == '/explore') ? 'menu-active' :'' " >
{{$t('overall.dashboard')}}
</div>
</template>
<el-menu-item index="1-0">
<div @click="jumpTo('/overview')" :class="{'menu-item-active' :route == '/overview'}" >{{$t('dashboard.overview.title')}}</div>
</el-menu-item>
<el-menu-item index="1-1">
<div @click="jumpTo('/panel')" :class="{'menu-item-active' :route == '/panel'}" >{{$t('dashboard.panel.title')}}</div>
</el-menu-item>
<el-menu-item index="1-2">
<div @click="jumpTo('/explore')" :class="{'menu-item-active' :route == '/explore'}">{{$t('dashboard.metricPreview.title')}}</div>
</el-menu-item>
</el-submenu>
<el-submenu index="3" popper-class="nz-submenu">
<template slot="title">
<div v-if="assetData.length == 0" @click="jumpToAsset()">{{$t('overall.asset')}}</div>
<div v-else @click="jumpToAsset()" :class="{'menu-active' : route == '/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>
<template v-else>
<el-scrollbar v-if="assetData.length>10" style= 'height: 360px'>
<el-menu-item :index="'3-' + index" v-for="(item, index) in assetData" :key="index">
<div @mouseenter="hoverItemIndex = '3-' + index" @mouseleave="hoverItemIndex = ''" @click="jumpToAsset(item)" :class="{'menu-item-active': route == '/asset' && activeItemIndex == item.id}">
<span class="too-long-split" style="width: 130px;">{{item.name}}</span>
</div>
</el-menu-item>
</el-scrollbar>
<el-menu-item v-else :index="'3-' + index" v-for="(item, index) in assetData" :key="index">
<div @mouseenter="hoverItemIndex = '3-' + index" @mouseleave="hoverItemIndex = ''" @click="jumpToAsset(item)" :class="{'menu-item-active': route == '/asset' && activeItemIndex == item.id}">
<span class="too-long-split" style="width: 130px;">{{item.name}}</span>
</div>
</el-menu-item>
</template>
</template>
</el-submenu>
<el-submenu index="2" popper-class="nz-submenu">
<template slot="title">
<div v-if="projectData.length == 0">{{$t('overall.project')}}</div>
<div v-else @click="jumpToProject(projectData[0])" :class ="route == '/project' ? 'menu-active' :''" >{{$t('overall.project')}}</div>
</template>
<template>
<el-menu-item v-if="projectData.length == 0" index="2-0"><div @click="createBox({type: 1})"><i class="nz-icon nz-icon-create-square header-dropdown-add"></i>&nbsp;&nbsp;{{$t("overall.createProject")}}</div></el-menu-item>
<template v-else>
<el-scrollbar v-if="projectData.length>10" style="height:360px">
<el-menu-item :index="'2-' + index" v-for="(item, index) in projectData" :key="index">
<div @mouseenter="hoverItemIndex = '2-' + index" @mouseleave="hoverItemIndex = ''" @click="jumpToProject(item)" :class="{'menu-item-active': route == '/project' && activeItemIndex == item.id}">
<span class="too-long-split" style="width: 135px;">{{item.name}}</span>
<div v-show="hoverItemIndex == '2-' + index && item.buildIn != 1" @click.stop="toEditProject(item)" class="menu-edit"><i class="nz-icon nz-icon-edit"></i></div>
</div>
</el-menu-item>
</el-scrollbar>
<el-menu-item v-else :index="'2-' + index" v-for="(item, index) in projectData" :key="index">
<div @mouseenter="hoverItemIndex = '2-' + index" @mouseleave="hoverItemIndex = ''" @click="jumpToProject(item)" :class="{'menu-item-active': route == '/project' && activeItemIndex == item.id}">
<span class="too-long-split" style="width: 135px;">{{item.name}}</span>
<div v-show="hoverItemIndex == '2-' + index && item.buildIn != 1" @click.stop="toEditProject(item)" class="menu-edit"><i class="nz-icon nz-icon-edit"></i></div>
</div>
</el-menu-item>
</template>
</template>
</el-submenu>
<el-submenu index="4" popper-class="nz-submenu">
<template slot="title">
<div @click="jumpTo('/alertList')" :class ="route == '/alertList' || route == '/alertConfig' ? 'menu-active' : ''">{{$t('overall.alert')}}</div>
</template>
<el-menu-item index="4-1">
<div @click="jumpTo('/alertList')" :class ="route == '/alertList' ? 'menu-item-active' : ''">{{$t('alert.message')}}</div>
</el-menu-item>
<el-menu-item index="4-2">
<div @click="jumpTo('/alertConfig')" :class ="route == '/alertConfig' ? 'menu-item-active' : ''">{{$t('alert.rule')}}</div>
</el-menu-item>
</el-submenu>
<el-submenu index="5" popper-class="nz-submenu">
<template slot="title">
<div @click="jumpTo('/account')" :class ="route == '/account' || route == '/promServer' || route == '/dc' || route == '/model' || route == '/mib' || route == '/system' || route == '/terminallog' || route == '/operationlog' || route == '/about' ? 'menu-active' : ''">{{$t('overall.config')}}</div>
</template>
<el-menu-item index="5-0">
<div @click="jumpTo('/account')" :class="{'menu-item-active' :(route == '/account' )}">{{$t('config.account.account')}}</div>
</el-menu-item>
<el-menu-item index="5-9">
<div @click="jumpTo('/roles')" :class="{'menu-item-active' :(route == '/roles' )}">{{$t('config.roles.roles')}}</div>
</el-menu-item>
<el-menu-item index="5-1">
<div @click="jumpTo('/promServer')" :class="{'menu-item-active' :(route == '/promServer' )}">{{$t('config.promServer.promServerList')}}</div>
</el-menu-item>
<el-menu-item index="5-2">
<div @click="jumpTo('/dc')" :class="{'menu-item-active' :(route == '/dc' )}">{{$t('config.dc.dc')}}</div>
</el-menu-item>
<el-menu-item index="5-3">
<div @click="jumpTo('/model')" :class="{'menu-item-active' :(route == '/model' )}">{{$t('config.model.model')}}</div>
</el-menu-item>
<el-menu-item index="5-4">
<div @click="jumpTo('/mib')" :class="{'menu-item-active' :(route == '/mib' )}">{{$t('config.mib.mib')}}</div>
</el-menu-item>
<el-menu-item index="5-5">
<div @click="jumpTo('/system')" :class="{'menu-item-active' :(route == '/system' )}">{{$t('config.system.system')}}</div>
</el-menu-item>
<el-menu-item index="5-6">
<div @click="jumpTo('/terminallog')" :class="{'menu-item-active' :(route == '/terminallog' )}">{{$t('config.terminallog.terminallog')}}</div>
</el-menu-item>
<el-menu-item index="5-7">
<div @click="jumpTo('/operationlog')" :class="{'menu-item-active' :(route == '/operationlog' )}">{{$t('config.operationlog.operationlog')}}</div>
</el-menu-item>
<el-menu-item index="5-8">
<div @click="jumpTo('/about')" :class="{'menu-item-active' :(route == '/about' )}">{{$t('overall.about')}}</div>
</el-menu-item>
</el-submenu>-->
<el-submenu index="101" popper-class="nz-submenu">
<template slot="title">
<div class='nz-user'>{{username}}<i class="nz-icon nz-icon-arrow-down"></i></div>

1
nezha-fronted/src/components/common/home.vue
View File

@@ -26,7 +26,6 @@ export default {
},
computed:{
isMenuPage:function(){
console.log(this.$route.path )
return this.$route.path == '/menu'
}
}

133
nezha-fronted/src/components/common/js/tools.js
View File

@@ -1,47 +1,5 @@
import PerfectScrollbar from "perfect-scrollbar";
import {getChart} from "./common";
//top置顶按钮公共方法
export function toTop(type, wrap) {
if (type == 'el') {
let currentTop = wrap.scrollTop;
let interval = currentTop/10;
let intervalFunc = setInterval(function(){ //花200ms分10次回到顶部，模拟动画效果
if (currentTop == 0) {
clearInterval(intervalFunc);
} else {
currentTop = (currentTop - interval) < interval*0.5 ? 0 : currentTop - interval;
wrap.scrollTop = currentTop;
}
}, 20);
} else {
let els = document.querySelectorAll(".el-table__body-wrapper");
if (wrap || wrap == 0) { //指定index的table__body
let currentTop = els[wrap].scrollTop;
let interval = currentTop/10;
let intervalFunc = setInterval(function(){ //花200ms分10次回到顶部，模拟动画效果
if (currentTop == 0) {
clearInterval(intervalFunc);
} else {
currentTop = (currentTop - interval) < interval*0.5 ? 0 : currentTop - interval;
els[wrap].scrollTop = currentTop;
}
}, 20);
} else { //所有table__body
for (let i = 0; i < els.length; i++) {
let currentTop = els[i].scrollTop;
let interval = currentTop/10;
let intervalFunc = setInterval(function(){ //花200ms分10次回到顶部，模拟动画效果
if (currentTop == 0) {
clearInterval(intervalFunc);
} else {
currentTop = (currentTop - interval) < interval*0.5 ? 0 : currentTop - interval;
els[i].scrollTop = currentTop;
}
}, 20);
}
}
}
}
/*弹窗点击外部后关闭*/
const exceptClassName = ["config-dropdown", "nz-pop", "el-picker", "chart-box-dropdown", 'metric-dropdown', 'el-cascader__dropdown', "asset-dropdown", "no-style-class", 'el-message-box','nz-dashboard-dropdown', "el-autocomplete-suggestion"]; //clickoutside排除的class(白名单) no-style-class：没有任何样式的class
@@ -91,97 +49,6 @@ export const clickoutside = {
},
};
/*el-table自定义滚动条*/
const el_scrollBar = el => {
if (el._ps_ instanceof PerfectScrollbar) {
el._ps_.update();
} else {
//el上挂一份属性
el._ps_ = new PerfectScrollbar(el, {minScrollbarLength: 25});
}
};
export const scrollBar = {
inserted(el, binding, vnode) {
const { arg } = binding;
if (arg === "el-table") {
el = el.querySelector(".el-table__body-wrapper");
//!el && console.warn("未发现className为el-table__body-wrapper的dom");
} else if (arg === "el-dropdown") {
el = document.querySelector(".el-dropdown-menu");
//!el && console.warn("未发现className为el-dropdown-menu的dom");
} else if (arg == "legend") {
el = el.querySelector(".legend-container");
//!el && console.warn("未发现className为legend-container的dom");
}
// 启用x轴后不让原生滚动条出来作乱
if (el) {
vnode.context.$nextTick(() => {
if (arg === "xterm") {
el = el.querySelector(".xterm-viewport");
//!el && console.warn("未发现className为xterm-viewport的dom");
}
if(arg==="metric-label-cascader"){
el = el.querySelector(".el-cascader__tags");
//!el && console.warn("未发现className为el-cascader__tags的dom");
}
el.classList.add("ps");
el.addEventListener("ps-scroll-y", () => {
el.classList.add("ps");
});
el.addEventListener("ps-scroll-x", () => {
el.classList.add("ps");
});
//el上挂一份属性
el_scrollBar(el);
});
/*const rules = ["fixed", "absolute", "relative"];
if (!rules.includes(window.getComputedStyle(el, null).position)) {
console.error(
`perfect-scrollbar所在的容器的position属性必须是以下之一：${rules.join(
"、"
)}`
);
}*/
}
},
componentUpdated(el, binding, vnode, oldVnode) {
const { arg, value } = binding;
if (arg === "el-table") {
el = el.querySelector(".el-table__body-wrapper");
//!el && console.warn("未发现className为el-table__body-wrapper的dom");
} else if (arg === "el-dropdown") {
el = document.querySelector(".el-dropdown-menu");
//!el && console.warn("未发现className为el-dropdown-menu的dom");
}else if (arg === "xterm") {
el = el.querySelector(".xterm-viewport");
//!el && console.warn("未发现className为xterm-viewport的dom");
}else if(arg==="metric-label-cascader"){
el = el.querySelector(".el-cascader__tags");
//!el && console.warn("未发现className为el-cascader__tags的dom");
}
setTimeout(() => {
el.classList.add("ps");
el.classList.add("ps--active-y");
el._ps_.update();
}, 1500)
try {
vnode.context.$nextTick(() => {
el_scrollBar(el);
if (value) {
el.querySelector(".ps__rail-x").classList.add("ps-scroll-" + value);
el.querySelector(".ps__rail-y").classList.add("ps-scroll-" + value);
}
});
} catch (error) {
console.error(error);
el_scrollBar(el);
}
},
};
// 底部上滑框窗口控制
export const bottomBoxWindow = {
// 鼠标拖动二级列表

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

@@ -2,16 +2,15 @@
<div class="content">
<div class="content-left left-slot" :class="{'left-slot-shrink': isShrink}">
<div class="sidebar-title too-long-split">{{$t(parentMenu.i18n)}}</div>
<div class="sidebar-info" style="height: 90%">
<el-scrollbar style="height: 100%;">
<div class="sidebar-info" style="height: 90%; overflow: auto;">
<template v-if="parentMenu == '/project'">
<el-collapse class="left-menu-bg" accordion style="padding-top: 0;" ref="projectLeft">
<el-collapse-item v-for="(item, index) in projectList" :key="item.id" :name="item.id + ''">
<el-collapse accordion class="left-menu-bg" ref="projectLeft" style="padding-top: 0;">
<el-collapse-item :key="item.id" :name="item.id + ''" v-for="(item, index) in projectList">
<template slot="title">
<div class="sidebar-info-item-project sidebar-info-item" :class="{'sidebar-info-item-active': item.id == currentProject.id}" @click="detailProject(item)" :id="'project-module-'+item.id">
<div :class="{'sidebar-info-item-active': item.id == currentProject.id}" :id="'project-module-'+item.id" @click="detailProject(item)" class="sidebar-info-item-project sidebar-info-item">
<div class="sidebar-info-item-txt">
<el-popover v-if="item.name.length > 14" trigger="hover" placement="top-start" :content="item.name" popper-class="transparent-pop">
<span slot="reference" class="">
<el-popover :content="item.name" placement="top-start" popper-class="transparent-pop" trigger="hover" v-if="item.name.length > 14">
<span class="" slot="reference">
{{item.name}}
</span>
</el-popover>
@@ -20,13 +19,13 @@
</div>
</template>
<div class="sidebar-info sub-sidebar-info" >
<div v-if="getProjectModule(item.id).length == 0" class="sidebar-info-item sidebar-info-item-project-add" @click="addModule(item)" :title="$t('overall.createModule')">
<div :title="$t('overall.createModule')" @click="addModule(item)" class="sidebar-info-item sidebar-info-item-project-add" v-if="getProjectModule(item.id).length == 0">
<span><i class="nz-icon nz-icon-create-square"></i>&nbsp;{{$t("overall.addProject")}}</span>
</div>
<template v-else>
<div v-for="module in getProjectModule(item.id)" class="sidebar-info-sub-item" :class="{'sidebar-info-item-active': module.id == currentModule.id}" @click="changeModule(item, module)" :id="'project-module-'+module.id">
<div :class="{'sidebar-info-item-active': module.id == currentModule.id}" :id="'project-module-'+module.id" @click="changeModule(item, module)" class="sidebar-info-sub-item" v-for="module in getProjectModule(item.id)">
<div :id="`module-${module.id}`" class="item-tip">
<div class="item-tip-hide item-tip-key el-popover" :class="itemTip(module.id, module.name, ready)">{{module.name}}</div>
<div :class="itemTip(module.id, module.name, ready)" class="item-tip-hide item-tip-key el-popover">{{module.name}}</div>
<span class="too-long-split" style="width: 120px;">{{module.name}}</span>
<div :id="'project-module-edit-'+module.id" @click.stop="editModule(module)" class="hid-div side-bar-menu-edit sub-side-bar-menu-edit" v-has="'project_module_toEdit'" v-show="module.buildIn != 1" ><i class="nz-icon nz-icon-edit"></i></div>
</div>
@@ -37,13 +36,13 @@
</el-collapse>
</template>
<template v-else-if="parentMenu == '/asset'">
<el-collapse v-model="activeType" class="left-menu-bg">
<el-collapse-item name="dataCenter" :title="$t('asset.left.dataCenter')">
<el-checkbox-group v-model="dcCheckList" size="small">
<el-checkbox class="sidebar-info-item sidebar-info-item-asset" :class="{'sidebar-info-item-active': indOf(dcCheckList, item.id)}"
v-for="(item,key) in dcData" :key="key" :label=item.id>
<el-collapse class="left-menu-bg" v-model="activeType">
<el-collapse-item :title="$t('asset.left.dataCenter')" name="dataCenter">
<el-checkbox-group size="small" v-model="dcCheckList">
<el-checkbox :class="{'sidebar-info-item-active': indOf(dcCheckList, item.id)}" :key="key"
:label=item.id class="sidebar-info-item sidebar-info-item-asset" v-for="(item,key) in dcData">
<div class="sidebar-info-item-txt">
<el-popover v-if="item.name.length > 14" trigger="hover" placement="top-start" :content="item.name" >
<el-popover :content="item.name" placement="top-start" trigger="hover" v-if="item.name.length > 14" >
<span slot="reference">{{item.name}}</span>
</el-popover>
<span v-else>{{item.name}}</span>
@@ -52,11 +51,11 @@
</el-checkbox>
</el-checkbox-group>
</el-collapse-item>
<el-collapse-item name="assetType" :title="$t('asset.assetType')">
<el-checkbox-group v-model="assetTypeCheckList" size="small" @change="changeAssetTypeCheckBox">
<el-checkbox class="sidebar-info-item" :class="{'sidebar-info-item-active': indOf(assetTypeCheckList, item.id)}" v-for="(item, key) in assetTypeData" :key="key" :label=item.id>
<el-collapse-item :title="$t('asset.assetType')" name="assetType">
<el-checkbox-group @change="changeAssetTypeCheckBox" size="small" v-model="assetTypeCheckList">
<el-checkbox :class="{'sidebar-info-item-active': indOf(assetTypeCheckList, item.id)}" :key="key" :label=item.id class="sidebar-info-item" v-for="(item, key) in assetTypeData">
<div class="sidebar-info-item-txt">
<el-popover v-if="item.name.length > 14" trigger="hover" placement="top-start" :content="item.name" >
<el-popover :content="item.name" placement="top-start" trigger="hover" v-if="item.name.length > 14" >
<span slot="reference">{{item.name}}</span>
</el-popover>
<span v-else>{{item.name}}</span>
@@ -65,11 +64,11 @@
</el-checkbox>
</el-checkbox-group>
</el-collapse-item>
<el-collapse-item name="vendor" :title="$t('asset.left.vendor')">
<el-checkbox-group v-model="vendorCheckList" size="small" @change="changeVendorCheckBox">
<el-checkbox class="sidebar-info-item" :class="{'sidebar-info-item-active': indOf(vendorCheckList, item.id)}" v-for="(item, key) in vendorData" :key="key" :label=item.id>
<el-collapse-item :title="$t('asset.left.vendor')" name="vendor">
<el-checkbox-group @change="changeVendorCheckBox" size="small" v-model="vendorCheckList">
<el-checkbox :class="{'sidebar-info-item-active': indOf(vendorCheckList, item.id)}" :key="key" :label=item.id class="sidebar-info-item" v-for="(item, key) in vendorData">
<div class="sidebar-info-item-txt">
<el-popover v-if="item.name.length > 14" trigger="hover" placement="top-start" :content="item.name" >
<el-popover :content="item.name" placement="top-start" trigger="hover" v-if="item.name.length > 14" >
<span slot="reference">{{item.name}}</span>
</el-popover>
<span v-else>{{item.name}}</span>
@@ -78,9 +77,9 @@
</el-checkbox>
</el-checkbox-group>
</el-collapse-item>
<el-collapse-item name="ping" :title="$t('asset.left.ping')" v-if="assetPingSwitch">
<el-checkbox-group v-model="pingCheckList" size="small" @change="changePingCheckBox">
<el-checkbox class="sidebar-info-item" :class="{'sidebar-info-item-active': indOf(pingCheckList, item.key)}" v-for="(item, index) in pingData" :key="index" :label="item.value">
<el-collapse-item :title="$t('asset.left.ping')" name="ping" v-if="assetPingSwitch">
<el-checkbox-group @change="changePingCheckBox" size="small" v-model="pingCheckList">
<el-checkbox :class="{'sidebar-info-item-active': indOf(pingCheckList, item.key)}" :key="index" :label="item.value" class="sidebar-info-item" v-for="(item, index) in pingData">
<div class="sidebar-info-item-txt">
<span>{{item.label}}</span>
</div>
@@ -93,12 +92,12 @@
<div class="sidebar-title too-long-split orange-font">
Tag
</div>
<el-collapse v-model="activeTag" class="left-menu-bg">
<el-collapse-item :name="item.key" :title="item.key" v-for="item in tagData" :key="item.key">
<el-checkbox-group v-model="tagCheckList" size="small" >
<el-checkbox class="sidebar-info-item" v-for="tag in item.values" :key="item.key+'-'+tag.value" :label="item.key+'-'+tag.value" @change="changeTagCheckBox(item,tag.value)">
<el-collapse class="left-menu-bg" v-model="activeTag">
<el-collapse-item :key="item.key" :name="item.key" :title="item.key" v-for="item in tagData">
<el-checkbox-group size="small" v-model="tagCheckList" >
<el-checkbox :key="item.key+'-'+tag.value" :label="item.key+'-'+tag.value" @change="changeTagCheckBox(item,tag.value)" class="sidebar-info-item" v-for="tag in item.values">
<div class="sidebar-info-item-txt">
<el-popover v-if="tag.value.length > 14" trigger="hover" placement="top-start" :content="tag.value" >
<el-popover :content="tag.value" placement="top-start" trigger="hover" v-if="tag.value.length > 14" >
<span slot="reference">{{tag.value}}</span>
</el-popover>
<span v-else>{{tag.value}}</span>
@@ -115,7 +114,6 @@
{{$t(menu.i18n)}}
</div>
</template>
</el-scrollbar>
</div>
<div @click="toggleStat" class="bottom-icon">
<div class="bottom-divider"></div>
@@ -664,7 +662,7 @@
<style scoped lang="scss">
.content{
position: relative;
height: calc(100% - 50px);
height: calc(100% - 54px);
}
.slot-content{
height: 100%;

4
nezha-fronted/src/components/common/popBox/selectArea.vue
View File

@@ -2,7 +2,7 @@
<el-popover :placement="placement" width="698" ref="selectAreaPopBox" v-model="popBox.show" popper-class="nz-pop nz-pop-select-area" transition="slide">
<div>
<div class="pop-item-wider">
<el-scrollbar class="select-area-tree">
<div class="select-area-tree">
<el-tree
ref="areaTree"
node-key="id"
@@ -16,7 +16,7 @@
@node-click="selectArea"
@check-change="clearOthers">
</el-tree>
</el-scrollbar>
</div>
</div>
</div>
<div slot="reference">

4
nezha-fronted/src/components/common/popBox/selectWalk.vue
View File

@@ -6,7 +6,7 @@
<p><span class="metirc-tip-list">OID&nbsp;:&nbsp;</span><span>{{tempWalk.objectID}}</span></p>
<p><span class="metirc-tip-list">MIB&nbsp;:&nbsp;</span><span>{{mibName(tempWalk.objectID)}}</span></p>
</div>
<el-scrollbar class="select-walk-tree" ref="scrollbar">
<div class="select-walk-tree" ref="scrollbar">
<el-tree
ref="walkTree"
node-key="objectID"
@@ -36,7 +36,7 @@
{{data.name}}
</div>
</el-tree>
</el-scrollbar>
</div>
</div>
<div slot="reference">
<slot name="trigger">

10
nezha-fronted/src/components/common/project/addLine.vue
View File

@@ -20,7 +20,7 @@
<!-- end--标题-->
<!-- begin--表单-->
<el-scrollbar class="right-box-form-box" ref="scrollbar">
<div class="right-box-form-box">
<el-form class="right-box-form right-box-form-left" ref="form" :model="form" label-width="120px" :rules="rules">
<el-form-item :label="$t('project.topology.lineName')" prop="lineName" class="line-name">
<el-input v-model="form.lineName" size="small"></el-input>
@@ -243,7 +243,7 @@
</el-row>
</el-row>
</el-form>
</el-scrollbar>
</div>
<!-- end--表单-->
@@ -403,9 +403,6 @@
this.promqlKeys.push(getUUID());
this.elementIds.push("");
this.promqlCount++;
this.$nextTick(() => {
this.$refs.scrollbar.update();
});
},
removeExpression(index) {
if (this.promqlCount >= 1) {
@@ -424,9 +421,6 @@
});
});
}
this.$nextTick(() => {
this.$refs.scrollbar.update();
});
},
/*关闭弹框*/
esc(refresh) {

10
nezha-fronted/src/components/common/project/addNode.vue
View File

@@ -20,7 +20,7 @@
<!-- end--标题-->
<!-- begin--表单-->
<el-scrollbar class="right-box-form-box" ref="scrollbar">
<div class="right-box-form-box" ref="scrollbar">
<el-form class="right-box-form right-box-form-left" ref="form" :model="form" label-width="160px" :rules="rules">
<el-form-item label="Module Name" prop="moduleId">
<el-select v-model="form.moduleId" placeholder="" popper-class="asset-dropdown" size="small">
@@ -126,7 +126,7 @@
</el-row>
</el-row>
</el-form>
</el-scrollbar>
</div>
<!-- end--表单-->
<!--底部按钮-->
@@ -308,9 +308,6 @@
this.promqlKeys.push(getUUID());
this.elementIds.push("");
this.promqlCount++;
this.$nextTick(() => {
this.$refs.scrollbar.update();
});
},
removeExpression(index) {
if (this.promqlCount >= 1) {
@@ -329,9 +326,6 @@
});
});
}
this.$nextTick(() => {
this.$refs.scrollbar.update();
});
},
/*关闭弹框*/
esc(refresh) {

16
nezha-fronted/src/components/common/project/popData/alertTable.vue
View File

@@ -31,7 +31,7 @@
<!-- end搜素框-->
<!-- begin--表格-->
<el-scrollbar class="right-box-form-box">
<div class="right-box-form-box">
<el-table
class="nz-table tabelH100"
:data="tableData"
@@ -39,7 +39,6 @@
ref="alertListTable"
tooltip-effect="light"
:height="tableHeight"
v-scrollBar:el-table="'large'"
v-loading="loading"
:cell-class-name="labelsClassName"
@selection-change="selectChange"
@@ -160,19 +159,8 @@
<template v-else>-</template>
</template>
</el-table-column>
<!--<el-table-column width="28" :resizable="false">-->
<!--<template slot="header" slot-scope="scope">-->
<!--<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: 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>
</el-scrollbar>
</div>
<!-- end--表格-->
<!--底部分頁-->

5
nezha-fronted/src/components/common/project/popData/assetTable.vue
View File

@@ -30,13 +30,12 @@
<!-- end搜素框-->
<!-- begin--表格-->
<el-scrollbar class="right-box-form-box">
<div class="right-box-form-box">
<el-table
class="nz-table"
:height="mainTableHeight"
style="width: 100%;"
:data="tableData"
v-scrollBar:el-table="'large'"
border
v-loading="loading"
tooltip-effect="light"
@@ -95,7 +94,7 @@
</template>
</el-table-column>
</el-table>
</el-scrollbar>
</div>
<!-- end--表格-->
<!--底部分頁-->

5
nezha-fronted/src/components/common/project/popData/endpointTable.vue
View File

@@ -26,13 +26,12 @@
<!-- end搜素框-->
<!-- begin--表格-->
<el-scrollbar class="right-box-form-box">
<div class="right-box-form-box">
<el-table
:data="tableData"
border
class="nz-table endpoint-table"
:height="mainTableHeight"
v-scrollBar:el-table="'large'"
ref="endpointTable"
v-loading="loading"
style="width: 100%;"
@@ -83,7 +82,7 @@
</template>
</el-table-column>
</el-table>
</el-scrollbar>
</div>
<!-- end--表格-->
<!--底部分頁-->

5
nezha-fronted/src/components/common/project/popData/lineChart.vue
View File

@@ -65,7 +65,7 @@
<!--<div v-if="seriesItem.length!==seriesItemArr.length" class="more"><i class="el-icon-warning"></i> {{$t('dashboard.panel.moreFirstTitle')}} {{seriesLength}}{{$t('dashboard.panel.moreSecondTitle')}}<span @click="loadMore" class="moreClick">{{$t('dashboard.panel.moreThirdTitle')}}{{seriesItem.length}}</span></div>-->
<div class="line-area" ref="lineChartArea" :id="'lineChartArea'+chartIndex" v-show="firstShow" style="height:calc(100% - 60px)"></div>
<div class="chart-no-data" v-show="noData">No Data</div>
<div class='legend-container' id="legendArea" ref="legendArea" v-show="firstShow" v-scrollBar:legend>
<div class='legend-container' id="legendArea" ref="legendArea" v-show="firstShow">
<div v-for="(item, index) in legendListMore" :title="item.alias?item.alias:item.name" @click="clickLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGrey[index]}" :key="'legend_' + item.name+'_'+index">
<span class="legend-shape" :style="{background:(isGrey[index]?'#D3D3D3':bgColorList[index])}"></span>{{item.alias?item.alias:item.name}}
</div>
@@ -117,7 +117,7 @@
</div>
<div class="line-area" ref="screenShowArea" id="screenShowArea" style="margin-top:0px;" @mouseenter="mouseEnterFullChart" @mouseleave="mouseLeaveFullChart"></div>
<div class="chart-no-data" v-show="noData">No Data</div>
<div class="legend-container legend-container-screen" :id="'screenLegendArea'+chartIndex" @mouseenter="mouseEnterFullChart" @mouseleave="mouseLeaveFullChart" v-show="showLegend" v-scrollBar:legend>
<div :id="'screenLegendArea'+chartIndex" @mouseenter="mouseEnterFullChart" @mouseleave="mouseLeaveFullChart" class="legend-container legend-container-screen" v-show="showLegend">
<div v-for="(item, index) in screenLegendListMore" :title="item.alias?item.alias:item.name" @click="clickScreenLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGreyScreen[index]}" :key="'legend_' + item.name+'_'+index">
<span class="legend-shape" :style="{background:(isGreyScreen[index]?'#D3D3D3':bgColorList[index])}"></span>{{item.alias?item.alias:item.name}}
<br/><!--bgColorList[index]-->
@@ -1655,7 +1655,6 @@
}
setChart(this.chartIndex, null);
window.removeEventListener('resize', this.chartResize);
this.$refs.legendArea._ps_.destroy();
},
};

46
nezha-fronted/src/components/common/project/popData/totalChart.vue
View File

@@ -1,8 +1,5 @@
<template>
<div
v-scrollBar
class="chart-box"
>
<div class="chart-box">
<div v-for="(item, index) in dataList" :key="item.id" :id="'chart-' + item.id" :name="item.title" v-show="!item.isHide" class="chart">
<lineChars
v-if="item.type === 'line' || item.type === 'bar' ||item.type == 'stackArea' || item.type === 4"
@@ -212,19 +209,9 @@
// 将秒改为毫秒
//alert('table=='+JSON.stringify(queryItem))
seriesItem.theData.data = tempArr.map((dpsItem, dpsIndex) => {
/*曲线汇总暂不需要
if (sumData.data[dpsIndex]) {
const sumNum = sumData.data[dpsIndex][1] || 0;
sumData.data[dpsIndex][1] = sumNum + dpsItem[1];
} else {
sumData.data[dpsIndex] = [dpsItem[0] * 1000, dpsItem[1]];
}
*/
let t_date = new Date(dpsItem[0] * 1000);
let timeTmp = bus.timeFormate(t_date, 'yyyy-MM-dd hh:mm:ss');
tableData.push({//表格数据
// label: host.slice(host.indexOf('{') + 1,host.indexOf('}')),//label
// metric: queryItem.metric.__name__?queryItem.metric.__name__:'',//metric列
element: {element: host, alias: alias},
time: timeTmp,//采集时间
value: dpsItem[1],//数值
@@ -232,18 +219,6 @@
return [dpsItem[0] * 1000, dpsItem[1]];
});
series.push(seriesItem.theData);
} else if (chartItem.elements && chartItem.elements[innerPos]) {
// 无数据提示
/*
const currentInfo = chartItem.elements[innerPos];
const errorMsg = `图表 ${chartItem.title} 中 ${currentInfo.metric},${currentInfo.tags} 无数据`;
this.$message.warning({
duration: 15,
content: errorMsg,
closable: true,
});
*/
}
});
}
@@ -570,14 +545,6 @@
// 将秒改为毫秒
//alert('table=='+JSON.stringify(queryItem))
seriesItem.theData.data = tempArr.map((dpsItem, dpsIndex) => {
/*曲线汇总暂不需要
if (sumData.data[dpsIndex]) {
const sumNum = sumData.data[dpsIndex][1] || 0;
sumData.data[dpsIndex][1] = sumNum + dpsItem[1];
} else {
sumData.data[dpsIndex] = [dpsItem[0] * 1000, dpsItem[1]];
}
*/
let t_date = new Date(dpsItem[0] * 1000);
let timeTmp = bus.timeFormate(t_date, 'yyyy-MM-dd hh:mm:ss');
tableData.push({//表格数据
@@ -591,17 +558,6 @@
});
series.push(seriesItem.theData);
} else if (chartItem.elements && chartItem.elements[innerPos]) {
// 无数据提示
/*
const currentInfo = chartItem.elements[innerPos];
const errorMsg = `图表 ${chartItem.title} 中 ${currentInfo.metric},${currentInfo.tags} 无数据`;
this.$message.warning({
duration: 15,
content: errorMsg,
closable: true,
});
*/
}
});
}

4
nezha-fronted/src/components/common/rightBox/accountBox.vue
View File

@@ -16,7 +16,7 @@
<!-- end--标题-->
<!-- begin--表单-->
<el-scrollbar class="right-box-form-box">
<div class="right-box-form-box">
<el-form class="right-box-form right-box-form-left" :model="editUser" :rules="rules" ref="accountForm" label-position="right" label-width="120px">
<!--username-->
<el-form-item :label="$t('config.account.account')" prop="username">
@@ -66,7 +66,7 @@
<span @click="removeNotification(index)" style="padding-left: 5px;"><i class="nz-icon nz-icon-shanchu1"></i></span>
</el-form-item>
</el-form>
</el-scrollbar>
</div>
<!-- end--表单-->
<!--底部按钮-->
<div class="right-box-bottom-btns">

14
nezha-fronted/src/components/common/rightBox/addEndpointBox.vue
View File

@@ -9,7 +9,7 @@
<!-- end--标题-->
<!-- begin--表单-->
<el-scrollbar class="right-box-form-box" style="overflow: hidden">
<div class="right-box-form-box" style="overflow: hidden">
<el-form class="right-box-form right-box-form-left" label-position="right" ref="addEndpoint" :model="endpoint" :rules="rules">
<!--project-->
<el-form-item :label='$t("project.project.project")' prop="projectId" class="select-warp">
@@ -71,7 +71,7 @@
<!-- begin--table-->
<div class="endpoint-sub-table" v-loading="assetLoading">
<el-scrollbar style="height: 100%; width: 100%;" ref="assetScrollbar">
<div ref="assetScrollbar" style="overflow: auto; height: 100%; width: 100%;">
<div class="endpoint-sub-table-head">
<div @click.stop v-if="!currentModuleCopy.id" class="endpoint-sub-table-body-dialog"></div>
<div class="endpoint-sub-table-col" style="width: 15px;position: relative">
@@ -123,7 +123,7 @@
</el-popover>
</div>
</div>
</el-scrollbar>
</div>
</div>
<div class="line-100" style="border-color:#dcdfe6"></div>
<div>
@@ -173,7 +173,6 @@
:data="endpointList"
ref="endpointTable"
style="width: 100%;border-radius: 4px;"
v-scrollBar:el-table
height="calc(100% - 36px)"
:row-class-name="setRowIndex"
empty-text=" ">
@@ -288,7 +287,7 @@
</div>
</el-form>
</el-scrollbar>
</div>
<!--底部按钮-->
<div class="right-box-bottom-btns">
@@ -580,7 +579,6 @@
break;
}
}
this.$refs.assetScrollbar.update();
},
/*获取project列表*/
@@ -672,9 +670,6 @@
}
}
this.assetList = response.data.list;
this.$nextTick(() => {
this.$refs.assetScrollbar.update();
});
}
}).finally(() => {
setTimeout(() => {
@@ -790,7 +785,6 @@
return !flag
});
this.endpointList=this.endpointList.concat(arr);
this.$refs.assetScrollbar.update();
},
//全选的checkbox的事件
assetListSelAll(flag){

4
nezha-fronted/src/components/common/rightBox/alertConfigBox.vue
View File

@@ -14,7 +14,7 @@
<!-- end--标题-->
<!-- begin--表单-->
<el-scrollbar class="right-box-form-box">
<div class="right-box-form-box">
<el-form class="right-box-form right-box-form-left" :model="editAlertRule" label-position="right" label-width="120px" :rules="rules" ref="alertRuleForm">
<!--alertName-->
<el-form-item :label='$t("alert.config.name")' prop="alertName">
@@ -103,7 +103,7 @@
<el-input maxlength="512" rows="4" show-word-limit type="textarea" placeholder="" v-model="editAlertRule.description" size="small"></el-input>
</el-form-item>
</el-form>
</el-scrollbar>
</div>
<!-- end--表单-->
<!--底部按钮-->

22
nezha-fronted/src/components/common/rightBox/assetBox.vue
View File

@@ -11,7 +11,7 @@
<div class="right-box-title">{{editAsset.id ? ($t("asset.editAsset") + " ID：" + editAsset.id) : $t("asset.createAsset")}}</div>
<el-scrollbar class="right-box-form-box" ref="scrollbar">
<div class="right-box-form-box">
<el-form ref="assetEditForm" :model="editAsset" label-width="120px" class="right-box-form right-box-form-left" :rules="rules">
<el-form-item :label="$t('asset.sn')" prop="sn">
<el-input size="small" v-model="editAsset.sn"/>
@@ -99,7 +99,7 @@
<div>Value</div>
<div>Action</div>
</div>
<el-scrollbar ref="tagEditBoxScrollbar" style="height: calc(100% - 32px);">
<div style="height: calc(100% - 32px); overflow: auto">
<div class="tag-edit-box-body" v-for="(item, index) in editAsset.tags">
<el-form-item class="tag-edit tag-edit-tag" :rules="{required: true, message: $t('validate.required'), trigger: 'change'}" :prop="'tags.' + index + '.tag'">
<el-autocomplete placeholder="tag" size="mini" v-model="item.tag" :fetch-suggestions="filterKey" @blur="loadValues(item)" @select="loadValues" popper-class="no-style-class"></el-autocomplete>
@@ -109,7 +109,7 @@
</el-form-item>
<div class="param-box-row-symbol" :id="'asset-tag-remove-'+index" @click.stop="removeTag(index)"><i class="nz-icon nz-icon-shanchu1" style="color: #666666"></i></div>
</div>
</el-scrollbar>
</div>
</div>
</el-form-item>
@@ -147,7 +147,7 @@
</el-form-item>
</template>
</el-form>
</el-scrollbar>
</div>
<!--底部按钮-->
<div class="right-box-bottom-btns">
@@ -386,9 +386,6 @@
addTag() {
!this.editAsset.tags && (this.$set(this.editAsset, "tags", []));
this.editAsset.tags.push({tag: "", value: ""});
this.$nextTick(() => {
this.$refs.tagEditBoxScrollbar.update();
});
},
addAccount(type) {
if (type == "SSH") {
@@ -435,10 +432,6 @@
}
this.accountType = type;
this.showAccountOp = false;
this.$nextTick(() => {
let sbWrap = this.$refs.scrollbar.$refs.wrap;
sbWrap.scrollTop = sbWrap.scrollHeight;
});
},
removeAccount(index) {
this.editAsset.accounts.splice(index, 1);
@@ -450,9 +443,6 @@
},
removeTag(index) {
this.editAsset.tags.splice(index, 1);
this.$nextTick(() => {
this.$refs.tagEditBoxScrollbar.update();
});
},
setLocationData(data) {
this.locationInfo = data;
@@ -562,10 +552,6 @@
},
changeProtocolType(type) {
this.accountType = type;
this.$nextTick(() => {
let sbWrap = this.$refs.scrollbar.$refs.wrap;
sbWrap.scrollTop = sbWrap.scrollHeight;
});
},
save() {
if(this.locationInfo) {

23
nezha-fronted/src/components/common/rightBox/batchEditAsset.vue
View File

@@ -11,7 +11,7 @@
<div class="right-box-title">{{$t("asset.batchEditAsset")}}</div>
<el-scrollbar class="right-box-form-box" ref="scrollbar">
<div class="right-box-form-box" ref="scrollbar">
<el-form ref="assetEditForm" :model="editAsset" label-width="120px" class="right-box-form right-box-form-left"
:rules="rules">
<!--assets-->
@@ -21,7 +21,7 @@
<div class="right-child-box-title">{{$t('asset.asset')}}</div>
<!--end--标题-->
<!--begin--搜索框-->
<div style="float: right;padding: 9px 9px 0px 0px;">
<div style="float: right;padding: 9px 9px 0 0;">
<div class="nz-btn-group nz-btn-group-size-small nz-btn-group-light endpoint-asset-search"
style="margin: 0">
<button id="search-asset-drop" type="button"
@@ -65,7 +65,7 @@
</div>
<div class="line-100"></div>
<div class="endpoint-sub-table-body">
<el-scrollbar style="height: 100%" ref="assetScrollbar">
<div ref="assetScrollbar" style="height: 100%; overflow: auto;">
<div :data="item.id" v-for="item,index in assetList" class="endpoint-sub-table-row"
:id="'select-asset-'+item.id">
<div class="endpoint-sub-table-col" style="width: 15px;">
@@ -77,7 +77,7 @@
</div>
</el-popover>
</div>
</el-scrollbar>
</div>
</div>
</div>
<div class="line-100" style="border-color:#dcdfe6"></div>
@@ -102,7 +102,6 @@
:data="assetSelList"
ref="endpointTable"
style="width: 100%;border-radius: 4px;"
v-scrollBar:el-table
height="calc(100% - 36px)"
:row-class-name="setRowIndex"
empty-text=" ">
@@ -183,7 +182,7 @@
<div>Value</div>
<div>Action</div>
</div>
<el-scrollbar ref="tagEditBoxScrollbar" style="height: calc(100% - 32px);">
<div ref="tagEditBoxScrollbar" style="height: calc(100% - 32px); overflow: auto;">
<div class="tag-edit-box-body" v-for="(item, index) in editAsset.tags">
<el-form-item class="tag-edit tag-edit-tag"
:rules="{required: true, message: $t('validate.required'), trigger: 'change'}"
@@ -201,7 +200,7 @@
<div class="param-box-row-symbol" :id="'asset-tag-remove-'+index" @click.stop="removeTag(index)"><i
class="nz-icon nz-icon-shanchu1" style="color: #666666"></i></div>
</div>
</el-scrollbar>
</div>
</div>
</el-form-item>
@@ -244,7 +243,7 @@
@setValidateResult="setAccountValidResult"
@protocol-type-change="protocolTypeChange"></account-config-box>
</el-form>
</el-scrollbar>
</div>
<!--底部按钮-->
<div class="right-box-bottom-btns">
@@ -495,7 +494,6 @@
return !flag
});
this.assetSelList=this.assetSelList.concat(arr);
this.$refs.assetScrollbar.update();
},
assetListSelAll(flag){
if(flag){
@@ -538,15 +536,11 @@
break;
}
}
this.$refs.assetScrollbar.update();
},
//组织符合cascader的数据格式
addTag(){
!this.editAsset.tags&&(this.$set(this.editAsset,"tags",[]));
this.editAsset.tags.push({tag:"",value:""});
this.$nextTick(()=>{
this.$refs.tagEditBoxScrollbar.update();
});
},
addAccount(type){
if(type=="SSH"){
@@ -608,9 +602,6 @@
},
removeTag(index){
this.editAsset.tags.splice(index,1);
this.$nextTick(()=>{
this.$refs.tagEditBoxScrollbar.update();
});
},
getUserData(){
return new Promise(resolve=>{

4
nezha-fronted/src/components/common/rightBox/cabinetBox.vue
View File

@@ -14,7 +14,7 @@
<!-- end--标题-->
<!-- begin--表单-->
<el-scrollbar class="right-box-form-box">
<div class="right-box-form-box">
<el-form class="right-box-form right-box-form-left" label-width="120px" label-position="right" :model="editCabinet" ref="cabinetForm" :rules="rules">
<el-form-item :label="$t('overall.name')" prop="name">
<el-input size='mini' v-model="editCabinet.name"/>
@@ -29,7 +29,7 @@
<el-input size='mini' v-model="editCabinet.remark" type="textarea" :rows="2"/>
</el-form-item>
</el-form>
</el-scrollbar>
</div>
<!--底部按钮-->
<div class="right-box-bottom-btns">

4
nezha-fronted/src/components/common/rightBox/dcBox.vue
View File

@@ -14,7 +14,7 @@
<!-- end--标题-->
<!-- begin--表单-->
<el-scrollbar class="right-box-form-box">
<div class="right-box-form-box">
<el-form class="right-box-form right-box-form-left" label-width="120px" :model="editDc" label-position="right" :rules="rules" ref="dcForm">
<el-form-item :label='$t("overall.name")' prop="name">
<el-input placeholder="" maxlength="64" show-word-limit v-model="editDc.name" size="small"></el-input>
@@ -75,7 +75,7 @@
/>
</el-form-item>
</el-form>
</el-scrollbar>
</div>
<!--底部按钮-->
<div class="right-box-bottom-btns">

27
nezha-fronted/src/components/common/rightBox/editEndpointBox.vue
View File

@@ -14,7 +14,7 @@
<!-- end--标题-->
<!-- begin--表单-->
<el-scrollbar class="right-box-form-box">
<div class="right-box-form-box">
<el-form class="right-box-form right-box-form-left" :model="editEndpoint" label-position="right" label-width="120px" :rules="rules" ref="endpointForm">
<!--project-->
<el-form-item :label="$t('project.project.project')" prop="project.id">
@@ -71,7 +71,7 @@
</span>
</div>
<div class="param-box param-box-module">
<el-scrollbar ref="paramBoxScrollbar" style="height: 100%">
<div style="height: 100%; overflow: auto">
<div class="param-box-row" v-for="(item, index) in editEndpoint.paramObj">
<el-form-item class="param-box-row-key" :rules="{required: true, message: $t('validate.required'), trigger: 'blur'}" :prop="'paramObj.' + index + '.key'">
<el-input placeholder="key" size="mini" v-model="item.key"></el-input>
@@ -82,7 +82,7 @@
</el-form-item>
<span class="param-box-row-symbol" @click="removeParam(index)"><i class="nz-icon nz-icon-shanchu1" style="color: #666666"></i></span>
</div>
</el-scrollbar>
</div>
</div>
</el-form-item>
<!--label-->
@@ -99,7 +99,7 @@
</div>
<div class="param-box param-box-module">
<el-scrollbar ref="labelBoxScrollbar" style="height: 100%">
<div ref="labelBoxScrollbar" style="height: 100%; overflow: auto;">
<div class="param-box-row" v-for="(item, index) in editEndpoint.labelModule">
<el-form-item class="param-box-row-key" :rules="[{required: true, message: $t('validate.required'), trigger: 'blur'},{ pattern: /[a-zA-Z_:][a-zA-Z0-9_:]*/, message: $t('validate.key') ,trigger: 'blur'}]" :prop="'labelModule.' + index + '.key'">
<el-input placeholder="key" size="mini" v-model="item.key"></el-input>
@@ -110,7 +110,7 @@
</el-form-item>
<span class="param-box-row-symbol" :id="'moduel-remove-label-'+index" @click="removeLabel(index)"><i class="nz-icon nz-icon-shanchu1" style="color:#666;"></i></span>
</div>
</el-scrollbar>
</div>
</div>
</el-form-item>
<!--enable-->
@@ -118,7 +118,7 @@
<el-switch v-model.number="editEndpoint.enabled" active-color="#ee9d3f" :active-value="1" :inactive-value="0"></el-switch>
</el-form-item>
</el-form>
</el-scrollbar>
</div>
<!-- end--表单-->
@@ -192,25 +192,16 @@
// 清除param
clearAllParam() {
this.editEndpoint.paramObj = [];
this.$nextTick(() => {
this.$refs.paramBoxScrollbar.update();
});
},
// 新增param
addParam() {
this.editEndpoint.paramObj.push({key: '', value: ''});
this.$nextTick(() => {
this.$refs.paramBoxScrollbar.update();
});
},
// 移除单个param
removeParam(index) {
this.editEndpoint.paramObj.splice(index, 1);
this.$nextTick(() => {
this.$refs.paramBoxScrollbar.update();
});
},
//将param转为json字符串格式
@@ -230,16 +221,10 @@
// 新增label
addLabel() {
this.editEndpoint.labelModule.push({key: '', value: ''});
this.$nextTick(() => {
this.$refs.labelBoxScrollbar.update();
});
},
// 移除单个Label
removeLabel(index) {
this.editEndpoint.labelModule.splice(index, 1);
this.$nextTick(() => {
this.$refs.labelBoxScrollbar.update();
});
},
//将labels转为json字符串格式

12
nezha-fronted/src/components/common/rightBox/locationCascader.vue
View File

@@ -8,7 +8,7 @@
<div class="dropdown" :class="{'dropdown-active':dropDownVisible == true}" >
<div class="container">
<div class="container-item">
<el-scrollbar style="height: 100%;">
<div style="height: 100%; overflow: auto;">
<ul v-if="idcInfos&& idcInfos.length>0">
<li v-for="(item,index) in idcInfos" :key="item.id+'-'+index" @click="loadCabinetInfos(item)">
<div class="container-item-content">
@@ -18,10 +18,10 @@
</li>
</ul>
<div v-else class="dropdown-empty">{{$t('overall.noData')}}</div>
</el-scrollbar>
</div>
</div>
<div class="container-item" v-show="isShowCabinet || selectedData.cabinet">
<el-scrollbar style="height: 100%;">
<div style="height: 100%; overflow: auto;">
<ul v-if="showCabinetInfos&& showCabinetInfos.length>0">
<li v-for="(item,index) in showCabinetInfos" :key="item.id+'-'+index" @click="loadCabinetUInfos(item)">
<div class="container-item-content">
@@ -31,14 +31,14 @@
</li>
</ul>
<div v-else class="dropdown-empty">{{$t('overall.noData')}}</div>
</el-scrollbar>
</div>
</div>
<div class="container-item" v-show="isShowCabinetU || uChecked.length>0" style="border-right: unset">
<el-scrollbar style="height: 100%">
<div style="height: 100%; overflow: auto;">
<el-checkbox-group v-model="uChecked" v-if="refresh" @change="uChange">
<el-checkbox v-for="(item,index) in showUInfos" :key="index" :label="item.label" :value="item.value" :disabled="item.occupy==true" :checked="item.occupy==true||item.checked==true" :ref="'u-'+selectedData.idc.id+'-'+selectedData.cabinet.id+'-'+item.value" style="width: 50%"></el-checkbox>
</el-checkbox-group>
</el-scrollbar>
</div>
</div>
</div>
</div>

4
nezha-fronted/src/components/common/rightBox/menuBox.vue
View File

@@ -16,7 +16,7 @@
<!-- end--标题-->
<!-- begin--表单-->
<el-scrollbar class="right-box-form-box">
<div class="right-box-form-box">
<el-form :model="editMenu" :rules="rules" class="right-box-form right-box-form-left" label-position="right" label-width="130px" ref="menuForm" size="small">
<el-form-item :label="$t('config.menus.parent')" prop="parentId">
<tree-select :multiple="false" :options="menus" label="id" noChildrenText="" noOptionsText="" placeholder="" v-model="editMenu.parentId"></tree-select>
@@ -60,7 +60,7 @@
<span @click="removePermission(index)" style="padding-left: 5px;"><i class="nz-icon nz-icon-shanchu1"></i></span>
</el-form-item>
</el-form>
</el-scrollbar>
</div>
<!-- end--表单-->
<!--底部按钮-->
<div class="right-box-bottom-btns">

4
nezha-fronted/src/components/common/rightBox/mibBox.vue
View File

@@ -14,7 +14,7 @@
<!-- end--标题-->
<!-- begin--表单-->
<el-scrollbar class="right-box-form-box">
<div class="right-box-form-box">
<el-form class="right-box-form right-box-form-left" :model="editMib" label-position="right" label-width="120px" :rules="rules" ref="mibForm">
<el-form-item :label='$t("config.mib.models")' prop="models" :rules="[{validator:checkModels,trigger:'change'}]" >
<el-cascader
@@ -44,7 +44,7 @@
</el-upload>
</el-form-item>
</el-form>
</el-scrollbar>
</div>
<!--底部按钮-->
<div class="right-box-bottom-btns">

4
nezha-fronted/src/components/common/rightBox/modelBox.vue
View File

@@ -14,7 +14,7 @@
<!-- end--标题-->
<!-- begin--表单-->
<el-scrollbar class="right-box-form-box">
<div class="right-box-form-box">
<el-form class="right-box-form right-box-form-left" :model="editModel" label-position="right" label-width="120px" :rules="rules" ref="modelForm">
<!--model名称-->
<el-form-item :label='$t("overall.name")' prop="name">
@@ -69,7 +69,7 @@
<el-input v-model.number="editModel.usize" :max="47" size="small"></el-input>
</el-form-item>
</el-form>
</el-scrollbar>
</div>
<!--底部按钮-->
<div class="right-box-bottom-btns">

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

@@ -14,7 +14,7 @@
<!-- end--标题-->
<!-- begin--表单-->
<el-scrollbar class="right-box-form-box" ref="scrollbar">
<div class="right-box-form-box" ref="scrollbar">
<el-form class="right-box-form right-box-form-left" :model="editModule" label-position="right" label-width="120px" :rules="rules" ref="moduleForm">
<el-form-item :label='$t("project.project.project")' prop="project">
<el-select value-key="id" popper-class="config-dropdown" v-model="editModule.project" placeholder="" size="small">
@@ -52,14 +52,14 @@
<input type="text" readonly="readonly" autocomplete="off" class="el-input__inner" aria-expanded="false">
</div>
<div class="el-cascader__tags">
<el-scrollbar style="height: 100%;" ref="walkScrollbar">
<div ref="walkScrollbar" style="height: 100%; overflow: auto;">
<span class="el-tag el-tag--info el-tag--small el-tag--light" v-for="item in editModule.walk">
<span v-html="mibName(item)"></span>
<div class="walk-close-box" @click.stop="removeWalk(item)">
<i class="el-tag__close nz-icon nz-icon-close walk-close"></i>
</div>
</span>
</el-scrollbar>
</div>
</div>
</div>
</template>
@@ -154,7 +154,7 @@
</el-col>
<el-col :span="18">
<el-form-item prop="security_level">
<el-radio-group v-model="editModule.security_level" size="small" @change="updateScrollbar">
<el-radio-group size="small" v-model="editModule.security_level">
<el-radio-button label="noAuthNoPriv"></el-radio-button>
<el-radio-button label="authNoPriv"></el-radio-button>
<el-radio-button label="authPriv"></el-radio-button>
@@ -253,7 +253,7 @@
</div>
<div class="param-box param-box-module">
<el-scrollbar ref="paramBoxScrollbar" style="height: 100%">
<div style="height: 100%; overflow: auto;">
<div class="param-box-row" v-for="(item, index) in editModule.paramObj">
<el-form-item class="param-box-row-key" :rules="{required: true, message: $t('validate.required'), trigger: 'blur'}" :prop="'paramObj.' + index + '.key'">
<el-input placeholder="key" size="mini" v-model="item.key"></el-input>
@@ -264,7 +264,7 @@
</el-form-item>
<span class="param-box-row-symbol" :id="'moduel-remove-param-'+index" @click="removeParam(index)"><i class="nz-icon nz-icon-shanchu1" style="color:#666;"></i></span>
</div>
</el-scrollbar>
</div>
</div>
</el-form-item>
@@ -281,7 +281,7 @@
</div>
<div class="param-box param-box-module">
<el-scrollbar ref="labelBoxScrollbar" style="height: 100%">
<div ref="labelBoxScrollbar" style="height: 100%; overflow: auto;">
<div class="param-box-row" v-for="(item, index) in editModule.labelModule">
<el-form-item class="param-box-row-key" :rules="[{required: true, message: $t('validate.required'), trigger: 'blur'},{ pattern: /[a-zA-Z_:][a-zA-Z0-9_:]*/, message: $t('validate.key') ,trigger: 'blur'}]" :prop="'labelModule.' + index + '.key'">
<el-input placeholder="key" size="mini" v-model="item.key"></el-input>
@@ -292,7 +292,7 @@
</el-form-item>
<span class="param-box-row-symbol" :id="'moduel-remove-label-'+index" @click="removeLabel(index)"><i class="nz-icon nz-icon-shanchu1" style="color:#666;"></i></span>
</div>
</el-scrollbar>
</div>
</div>
</el-form-item>
@@ -301,7 +301,7 @@
</el-form-item>
</el-form>
</el-scrollbar>
</div>
<!--底部按钮-->
<div class="right-box-bottom-btns">
@@ -373,8 +373,6 @@
} else {
this.editModule.walk.push(walk);
}
this.$refs.walkScrollbar.update();
},
//从mibData里取得oid对应的mib名称
getMibName(walkData, walk) {
@@ -476,7 +474,6 @@
})
this.editModule.port= 161;
}
this.updateScrollbar();
},
//转化snmpParam属性
parseSnmpParam(module) {
@@ -605,38 +602,23 @@
// 清除param
clearAllParam() {
this.editModule.paramObj = [];
this.$nextTick(() => {
this.$refs.paramBoxScrollbar.update();
});
},
// 新增param
addParam() {
this.editModule.paramObj.push({key: '', value: ''});
this.$nextTick(() => {
this.$refs.paramBoxScrollbar.update();
});
},
// 移除单个param
removeParam(index) {
this.editModule.paramObj.splice(index, 1);
this.$nextTick(() => {
this.$refs.paramBoxScrollbar.update();
});
},
// 新增label
addLabel() {
this.editModule.labelModule.push({key: '', value: ''});
this.$nextTick(() => {
this.$refs.labelBoxScrollbar.update();
});
},
// 移除单个Label
removeLabel(index) {
this.editModule.labelModule.splice(index, 1);
this.$nextTick(() => {
this.$refs.labelBoxScrollbar.update();
});
},
//将param转为json字符串格式
paramToJson(param) {
@@ -664,9 +646,6 @@
return jsonString;
}
},
updateScrollbar() {
this.$refs.scrollbar.update();
}
},
mounted() {
this.getWalkData();

4
nezha-fronted/src/components/common/rightBox/panelBox.vue
View File

@@ -15,13 +15,13 @@
<!-- end--标题-->
<!-- begin--表单-->
<el-scrollbar class="right-box-form-box">
<div class="right-box-form-box">
<el-form class="right-box-form right-box-form-left" label-width="120px" :model="panel" label-position="right" ref="panelForm">
<el-form-item :label='$t("overall.name")' prop="name" :rules="{required: true, message: $t('validate.required'), trigger: 'blur'}">
<el-input placeholder="" maxlength="64" show-word-limit v-model="panel.name" size="small" ></el-input>
</el-form-item>
</el-form>
</el-scrollbar>
</div>
<!-- end--表单-->
<!-- begin--底部按钮-->

4
nezha-fronted/src/components/common/rightBox/projectBox.vue
View File

@@ -12,7 +12,7 @@
<!-- begin--标题-->
<div class="right-box-title">{{editProject.id ? $t("project.project.editProject") + " ID：" + editProject.id : $t("overall.createProject")}}</div>
<!-- end--标题-->
<el-scrollbar class="right-box-form-box">
<div class="right-box-form-box">
<el-form class="right-box-form right-box-form-left" :model="editProject" label-position="right" label-width="120px" :rules="rules" ref="projectForm">
<el-form-item :label='$t("project.project.projectName")' prop="name">
<el-input size="mini" maxlength="64" show-word-limit v-model="editProject.name"></el-input>
@@ -21,7 +21,7 @@
<el-input size="mini" type="textarea" maxlength="1024" show-word-limit v-model="editProject.remark"></el-input>
</el-form-item>
</el-form>
</el-scrollbar>
</div>
<!--底部按钮-->
<div class="right-box-bottom-btns">

4
nezha-fronted/src/components/common/rightBox/promServerBox.vue
View File

@@ -16,7 +16,7 @@
<!-- end--标题-->
<!-- begin--表单-->
<el-scrollbar class="right-box-form-box">
<div class="right-box-form-box">
<el-form class="right-box-form right-box-form-left" :model="editPromServer" label-position="right" label-width="120px" :rules="rules" ref="promServerForm">
<!--DC-->
<el-form-item :label="$t('config.dc.dc')" prop="idc.name">
@@ -49,7 +49,7 @@
clearable></el-cascader>
</el-form-item>
</el-form>
</el-scrollbar>
</div>
<!-- end--表单-->
<!--底部按钮-->
<div class="right-box-bottom-btns">

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

@@ -3,7 +3,7 @@
<!-- begin--顶部按钮-->
<div class="right-box-top-btns right-box-form-delete">
<button @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien" id="roles-edit-del"
type="button" v-has="'rule_delete'"
type="button" v-has="'role_delete'"
v-if="editRole.id && !detail">
<span class="right-box-top-btn-icon"><i class="nz-icon nz-icon-delete"></i></span>
<span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
@@ -16,7 +16,7 @@
<!-- end--标题-->
<!-- begin--表单-->
<el-scrollbar class="right-box-form-box">
<div class="right-box-form-box">
<el-form :disabled="detail" :model="editRole" :rules="rules" class="right-box-form right-box-form-left" label-position="right" label-width="120px" ref="roleForm">
<!--name-->
<el-form-item :label="$t('config.roles.name')" prop="name">
@@ -43,7 +43,7 @@
</el-tree>
</el-form-item>
</el-form>
</el-scrollbar>
</div>
<!-- end--表单-->
<!--底部按钮-->
<div class="right-box-bottom-btns" v-if="!detail">
@@ -51,7 +51,7 @@
id="roles-esc">
<span>{{$t('overall.cancel')}}</span>
</button>
<button @click="save" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" v-has="'rule_save'"
<button @click="save" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" v-has="'role_save'"
id="roles-save">
<span>{{$t('overall.save')}}</span>
</button>

4
nezha-fronted/src/components/common/rightBox/trafficSetting/subBox.vue
View File

@@ -2,7 +2,7 @@
<transition name="right-sub-box">
<div class="right-sub-box sub-box" v-if="editTagsBox.show" :style="'top: ' + editTagsBox.top + 'px; left: ' + editTagsBox.left + 'px;'" >
<div class="param-box" style="height: calc(100% - 25px)">
<el-scrollbar style="height: 100%">
<div style="height: 100%; overflow: auto;">
<div class="param-box-row" v-for="(item, index) in tempTagsObj" :key="index">
<el-input placeholder="key" class="param-box-row-key input-x-mini-22" v-model="item.key" @input="validateInput(item.key,index)" :class="{'input-error':inputKeyErr[index]}"></el-input>
<span class="param-box-row-eq">=</span>
@@ -10,7 +10,7 @@
<span class="param-box-row-symbol" :id="'remove-param-'+index" @click="removeTags(index)"><i class="nz-icon nz-icon-shanchu1"></i></span>
<span style="color: #F56C6C;font-size: 12px;" v-if="inputKeyErr[index]">{{$t('validate.key')}}</span>
</div>
</el-scrollbar>
</div>
</div>
<div class="add-btn">
<el-button @click="addTags" id="add-param" style="height: 18px; line-height: 18px; padding-top: 0; padding-bottom: 0;" size="mini"><i class="nz-icon nz-icon-plus"></i></el-button>

4
nezha-fronted/src/components/common/rightBox/trafficSetting/trafficSettingBox.vue
View File

@@ -4,7 +4,7 @@
<!-- begin--标题-->
<div class="right-box-title">{{$t('config.dc.traffic.title')}}</div>
<!-- end--标题-->
<el-scrollbar class="right-box-form-box">
<div class="right-box-form-box">
<el-form class="right-box-form" :model="traffic" label-width="100px" label-position="left" ref="trafficForm">
<el-form-item :label="$t('config.dc.dc')" size="small">
<el-input :disabled="true" v-model="dc.name"></el-input>
@@ -12,7 +12,7 @@
<traffic-setting-tab ref="trafficSetting" :post-asset-list="assetList" v-for="(item,index) in traffic.setting" :index="index" :asset-setting="item" :key="uuids[index]" :id="uuids[index]" @delSelf="delAssetSetting" :validate-repeat-func="valiateRepeatFunc"></traffic-setting-tab>
<button type="button" @click="addAssetSetting" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new" style="margin:5px 1px 5px 70px">{{$t('config.dc.traffic.add')}}</button>
</el-form>
</el-scrollbar>
</div>
<!--底部按钮-->
<div class="right-box-bottom-btns">

1
nezha-fronted/src/components/common/rightBox/trafficSetting/trafficSettingTab.vue
View File

@@ -122,7 +122,6 @@
<div class="endpoints-box-endpoints" style="border: 1px solid #E7EAED;border-radius: 2px;padding-bottom: 10px">
<el-table :data="assetSetting.configs"
tooltip-effect="light"
v-scrollBar:el-table="'large'"
max-height="300"
height="200"
:row-class-name="assetSetting.host == null?'not-allowed':''"

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

@@ -163,7 +163,7 @@
<div v-show="clearSearchShow" class="clear-search" @click="clear_input">
<i class="nz-icon nz-icon-circle-close"></i>
</div>
<div :class="input_list?'input_list none':'input_list'" :style="'top:' + selectDom.top" @click="stop_click" id="input_list" v-scroll-bar>
<div :class="input_list?'input_list none':'input_list'" :style="'top:' + selectDom.top" @click="stop_click" id="input_list">
<ul>
<li v-for="(val,ind) in searchLabelList" @click="select_name(val.name,ind,val.id,val.type,val.label,val.disabled,val.readonly,$event)" :key="ind" :class="{'search-style-ind':searchStyleNum==ind,'is-disabled':val.disabled}">
<span>{{val.name}}</span>

7
nezha-fronted/src/components/common/timePicker.vue
View File

@@ -79,7 +79,7 @@
class="nz-btn nz-btn-size-normal nz-btn-style-light time-picker-button time-picker-right-button" >
<i style="font-size: 12px" class="el-icon-arrow-right"></i>
</button>-->
<el-dropdown @command="timeChange" ref="timePickerDropdown" class="calendar-dropdown-title" trigger="click" v-scrollBar:el-dropdown @visible-change="popoverClick">
<el-dropdown @command="timeChange" @visible-change="popoverClick" class="calendar-dropdown-title" ref="timePickerDropdown" trigger="click">
<el-popover
placement="bottom-end"
min-width="120px"
@@ -117,11 +117,6 @@
</el-dropdown-menu>
</el-dropdown>
<!--
<button type="button" style="border-radius: 1px 1px 1px 1px" @click="left()" v-show="isCustom"
class="nz-btn nz-btn-size-normal nz-btn-style-light time-picker-button time-picker-left-button" >
<i style="font-size: 12px" class="el-icon-arrow-left"></i>
</button>-->
</div>
</template>

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

@@ -71,7 +71,6 @@
ref="alertRuleTable"
tooltip-effect="light"
:height="mainTableHeight"
v-scrollBar:el-table="'large'"
v-loading="tools.loading"
:cell-class-name="messageStyle"
style="width: 100%;"
@@ -131,7 +130,7 @@
</template>
</el-table-column>
</el-table>
<button class="to-top" :style="{top: tools.toTopBtnTop}" :class="{'to-top-is-hover': tools.tableHover}" v-show="tools.showTopBtn && bottomBox.mainResizeShow" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
<button :class="{'to-top-is-hover': tools.tableHover}" :style="{top: tools.toTopBtnTop}" @click="toTop(scrollWrap)" class="to-top" v-show="tools.showTopBtn && bottomBox.mainResizeShow"><i class="nz-icon nz-icon-top"></i></button>
<div class="pagination-bottom" v-show="!bottomBox.showSubList">
<Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
</div>
@@ -290,6 +289,7 @@
viewModuleData: {},
viewAsset: false,
searchTime: bus.getTimezontDateRange(),
scrollWrap: null,
}
},
methods: {
@@ -372,6 +372,12 @@
});
this.tableData = response.data.list;
this.pageObj.total = response.data.total;
if (!this.scrollWrap) {
this.$nextTick(() => {
this.scrollWrap = this.$refs.alertRuleTable.bodyWrapper;
this.toTopBtnHandler(this.scrollWrap);
});
}
}
})
},
@@ -518,15 +524,6 @@
this.getTableData();
})
},
plpsscrolly(el,self){
if (el._ps_.scrollbarYTop > 50) {
self.tools.showTopBtn = true;
self.tools.tableHover = true;
} else {
self.tools.showTopBtn = false;
self.tools.tableHover = false;
}
},
},
watch: {
'bottomBox.showSubList': function(n) {
@@ -540,10 +537,11 @@
}
},
},
destroyed() {
beforeDestroy() {
bus.$off("alert-rule-list-change");
bus.$off("dc-list-change");
bus.$off('alert-message-change')
bus.$off('alert-message-change');
this.scrollbarWrap.removeEventListener('scroll', bus.debounce);
},
created(){
//是否存在分页缓存
@@ -561,20 +559,6 @@
this.initEvent();
this.getTableData();
this.$nextTick(() => {
//绑定滚动条事件，控制top按钮
let el = this.$refs.alertRuleTable.$el.querySelector(".el-table__body-wrapper");
if (el._ps_) {
el.addEventListener("ps-scroll-y", this.plpsscrolly.bind('',el,this));
}
});
},
beforeDestroy(){
let el = this.$refs.alertRuleTable.$el.querySelector(".el-table__body-wrapper");
if (el._ps_) {
el.removeEventListener("ps-scroll-y", this.plpsscrolly.bind('',el,this));
el._ps_.destroy();
}
}
}
</script>

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

@@ -758,25 +758,6 @@
}
this.getAlertList();
// this.$nextTick(() => {
// //绑定滚动条事件，控制top按钮
// let el = this.$refs.alertListTable.$el.querySelector(".el-table__body-wrapper");
// if (el._ps_) {
// el.addEventListener("ps-scroll-y", () => {
// if (el._ps_.scrollbarYTop > 50) {
// this.tools.showTopBtn = true;
// } else {
// this.tools.showTopBtn = false;
// }
// });
// el.addEventListener("mouseenter", () => {
// this.tools.tableHover = true;
// });
// el.addEventListener("mouseleave", () => {
// this.tools.tableHover = false;
// });
// }
// });
}
}
</script>

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

@@ -40,7 +40,6 @@
:height="mainTableHeight"
style="width: 100%;position: relative;z-index: 99"
:data="tableData"
v-scrollBar:el-table="'large'"
v-show="bottomBox.mainResizeShow"
border
v-loading="tools.loading"
@@ -49,7 +48,6 @@
@sort-change="tableDataSort"
@row-dblclick="detail"
@selection-change="(selection)=>{this.batchDeleteObjs=selection}"
@scroll="plpsscrolly"
>
<el-table-column
:resizable="false"
@@ -175,7 +173,7 @@
</template>
</el-table-column>
</el-table>
<button class="to-top" :style="{top: tools.toTopBtnTop}" :class="{'to-top-is-hover': tools.tableHover}" v-show="tools.showTopBtn && bottomBox.mainResizeShow" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
<button :class="{'to-top-is-hover': tools.tableHover}" :style="{top: tools.toTopBtnTop}" @click="toTop(scrollWrap)" class="to-top" v-show="tools.showTopBtn && bottomBox.mainResizeShow"><i class="nz-icon nz-icon-top"></i></button>
<div class="pagination-bottom" v-show="!bottomBox.showSubList">
<Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
</div>
@@ -393,6 +391,8 @@
assetPingSwitch: localStorage.getItem('nz-sys-asset-ping-switch'),
tagKeys:[],
scrollWrap: null
}
},
computed:{
@@ -482,6 +482,13 @@
this.tableData = response.data.list;
this.pageObj.total = response.data.total;
bus.$emit('asset-property-change');
if (!this.scrollWrap) {
this.$nextTick(() => {
this.scrollWrap = this.$refs.assetTable.bodyWrapper;
this.toTopBtnHandler(this.scrollWrap);
});
}
}
});
@@ -713,7 +720,7 @@
});
bus.$on('alert-message-change',()=>{
this.getTableData()
})
});
},
dispatchEvent(event,param){
this.$nextTick(()=>{
@@ -759,27 +766,6 @@
}
}
},
plpsscrolly(el,self){
if (el._ps_.scrollbarYTop > 50) {
self.tools.showTopBtn = true;
self.tools.tableHover = true;
} else {
self.tools.showTopBtn = false;
self.tools.tableHover = false;
}
},
domResize(){
let el = this.$refs.assetTable.$el.querySelector(".el-table__body-wrapper");
el._ps_.update();
},
// plmouseenter(el,self){
// console.log(123123123123)
// self.tools.tableHover = true;
// },
// plmouseleave(el,self){
// console.log(123123123123)
// self.tools.tableHover = false;
// }
},
created(){
//是否存在分页缓存
@@ -820,8 +806,6 @@
this.loadKeys();
//console.log('load end')
//初始化数据
this.getUserData();
@@ -834,30 +818,11 @@
this.pageObj.pageSize = pageSize
}
this.initEvent();
this.$nextTick(() => {
//绑定滚动条事件，控制top按钮
let el = this.$refs.assetTable.$el.querySelector(".el-table__body-wrapper");
if (el._ps_) {
el.addEventListener("ps-scroll-y", this.plpsscrolly.bind('',el,this));
// el.addEventListener("mouseenter", this.plmouseenter.bind('',el,this));
// el.addEventListener("mouseleave", this.plmouseleave.bind('',el,this));
}
//resize时刷新左侧列表滚动条
let vm = this;
window.addEventListener('resize', this.domResize);
});
},
beforeDestroy(){
window.removeEventListener('resize', this.domResize);
let el = this.$refs.assetTable.$el.querySelector(".el-table__body-wrapper");
if (el._ps_) {
el.removeEventListener("ps-scroll-y", this.plpsscrolly.bind('',el,this));
el._ps_.destroy();
}
},
destroyed() {
beforeDestroy() {
bus.$off("asset-filter-change");
bus.$off('alert-message-change');
this.scrollbarWrap.removeEventListener('scroll', bus.debounce);
}
}
</script>

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

@@ -54,7 +54,6 @@
ref="accountTable"
:height="mainTableHeight"
v-loading="tools.loading"
v-scrollBar:el-table="'large'"
style="width: 100%;"
@sort-change="tableDataSort"
@selection-change="(selection)=>{this.batchDeleteObjs=selection}"
@@ -128,7 +127,7 @@
</template>
</el-table-column>
</el-table>
<button class="to-top" :style="{top: tools.toTopBtnTop}" :class="{'to-top-is-hover': tools.tableHover}" v-show="tools.showTopBtn && bottomBox.mainResizeShow" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
<button :class="{'to-top-is-hover': tools.tableHover}" :style="{top: tools.toTopBtnTop}" @click="toTop(scrollWrap)" class="to-top" v-show="tools.showTopBtn && bottomBox.mainResizeShow"><i class="nz-icon nz-icon-top"></i></button>
<div class="pagination-bottom" v-show="!bottomBox.showSubList">
<Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
</div>
@@ -146,6 +145,7 @@
<script>
import deleteButton from "../../common/deleteButton";
import accountBox from '../../common/rightBox/accountBox';
import bus from "../../../libs/bus";
export default {
name: "account",
@@ -248,6 +248,7 @@
}],
},
searchLabel: {}, //搜索参数
scrollWrap: null,
}
},
methods: {
@@ -315,16 +316,15 @@
if (response.code === 200) {
for (let i = 0; i < response.data.list.length; i++) {
response.data.list[i].status = response.data.list[i].status + "";
/*response.data.list[i].notifications = [
{scriptId: 1, account: "杀死比尔"},
{scriptId: 2, account: "虎虎虎"},
{scriptId: 3, account: "红海行动"},
{scriptId: 4, account: "十面埋伏"},
{scriptId: 5, account: "哪吒"},
];*/
}
this.tableData = response.data.list;
this.pageObj.total = response.data.total
this.pageObj.total = response.data.total;
if (!this.scrollWrap) {
this.$nextTick(() => {
this.scrollWrap = this.$refs.accountTable.bodyWrapper;
this.toTopBtnHandler(this.scrollWrap);
});
}
}
})
},
@@ -383,16 +383,6 @@
this.$set(this.searchLabel, "orderBy", orderBy);
this.getTableData();
},
plpsscrolly(el,self){
if (el._ps_.scrollbarYTop > 50) {
self.tools.showTopBtn = true;
self.tools.tableHover = true;
} else {
self.tools.showTopBtn = false;
self.tools.tableHover = true;
}
},
resetTableTitle:function(){
let title = this.tools.customTableTitle;
let tableTitle = title.slice(0, this.tableTitle.length);
@@ -432,6 +422,9 @@
}
}
},
beforeDestroy() {
this.scrollbarWrap.removeEventListener('scroll', bus.debounce);
},
computed: {
isCurrentUser() {
return function(username) {
@@ -467,20 +460,6 @@
this.resetTableTitle();
this.getTableData();
this.$nextTick(() => {
//绑定滚动条事件，控制top按钮
let el = this.$refs.accountTable.$el.querySelector(".el-table__body-wrapper");
if (el._ps_) {
el.addEventListener("ps-scroll-y", this.plpsscrolly.bind('',el,this));
}
});
},
beforeDestroy(){
let el = this.$refs.accountTable.$el.querySelector(".el-table__body-wrapper");
if (el._ps_) {
el.removeEventListener("ps-scroll-y", this.plpsscrolly.bind('',el,this));
el._ps_.destroy();
}
}
}
</script>

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

@@ -37,7 +37,6 @@
border
tooltip-effect="light"
v-show="bottomBox.mainResizeShow"
v-scrollBar:el-table="'large'"
:height="mainTableHeight"
ref="dcTable"
v-loading="tools.loading"
@@ -125,7 +124,7 @@
</template>
</el-table-column>
</el-table>
<button class="to-top" :style="{top: tools.toTopBtnTop}" :class="{'to-top-is-hover': tools.tableHover}" v-show="tools.showTopBtn && bottomBox.mainResizeShow" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
<button :class="{'to-top-is-hover': tools.tableHover}" :style="{top: tools.toTopBtnTop}" @click="toTop(scrollWrap)" class="to-top" v-show="tools.showTopBtn && bottomBox.mainResizeShow"><i class="nz-icon nz-icon-top"></i></button>
<div class="pagination-bottom" v-show="!bottomBox.showSubList">
<Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
</div>
@@ -268,6 +267,7 @@
},
searchLabel: {}, //搜索参数
tabShow: 1, // 控制显示一级页面和二级页面 1 dc 2cabinet
scrollWrap: null,
}
},
methods: {
@@ -403,7 +403,13 @@
this.tools.loading = false;
if (response.code === 200) {
this.tableData = response.data.list;
this.pageObj.total = response.data.total
this.pageObj.total = response.data.total;
if (!this.scrollWrap) {
this.$nextTick(() => {
this.scrollWrap = this.$refs.dcTable.bodyWrapper;
this.toTopBtnHandler(this.scrollWrap);
});
}
}
})
},
@@ -477,19 +483,6 @@
this.getTableData();
});
},
plpsscrolly(el,self){
if (el._ps_.scrollbarYTop > 100) {
self.tools.showTopBtn = true;
self.tools.tableHover = true;
} else {
self.tools.showTopBtn = false;
self.tools.tableHover = false;
}
},
domResize(){
let el = this.$refs.dcTable.$el.querySelector(".el-table__body-wrapper");
el._ps_.update();
},
},
watch: {
'bottomBox.dc': {
@@ -507,6 +500,7 @@
},
beforeDestroy(){
bus.$off("dc-list-change");
this.scrollbarWrap.removeEventListener('scroll', bus.debounce);
},
created(){
//是否存在分页缓存
@@ -525,23 +519,7 @@
: this.tableTitle;
this.tableTitleReset(this.tableTitle,this.tools.customTableTitle);
this.getTableData();
this.$nextTick(function(){
this.getUserData();//绑定滚动条事件，控制top按钮
let el = this.$refs.dcTable.$el.querySelector(".el-table__body-wrapper");
if (el._ps_) {
el.addEventListener("ps-scroll-y", this.plpsscrolly.bind('',el,this));
window.addEventListener('resize', this.domResize);
}
});
},
beforeDestroy(){
let el = this.$refs.dcTable.$el.querySelector(".el-table__body-wrapper");
if (el._ps_) {
window.removeEventListener('resize', this.domResize);
el.removeEventListener("ps-scroll-y", this.plpsscrolly.bind('',el,this));
el._ps_.destroy();
}
}
}
</script>
<style scoped>

29
nezha-fronted/src/components/page/config/menus.vue
View File

@@ -46,7 +46,6 @@
row-key="id"
style="width: 100%;"
v-loading="tools.loading"
v-scrollBar:el-table="'large'"
>
<el-table-column
:resizable="false"
@@ -297,20 +296,6 @@
this.$set(this.searchLabel, "orderBy", orderBy);
this.getTableData();
},
plpsscrolly(el,self){
if (el._ps_.scrollbarYTop > 50) {
self.tools.showTopBtn = true;
self.tools.tableHover = true;
} else {
self.tools.showTopBtn = false;
self.tools.tableHover = true;
}
},
},
computed: {
},
watch: {
},
created(){
//是否存在分页缓存
@@ -325,20 +310,6 @@
? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
: this.tableTitle;
this.getTableData();
this.$nextTick(() => {
//绑定滚动条事件，控制top按钮
let el = this.$refs.menusTable.$el.querySelector(".el-table__body-wrapper");
if (el._ps_) {
el.addEventListener("ps-scroll-y", this.plpsscrolly.bind('',el,this));
}
});
},
beforeDestroy(){
let el = this.$refs.menusTable.$el.querySelector(".el-table__body-wrapper");
if (el._ps_) {
el.removeEventListener("ps-scroll-y", this.plpsscrolly.bind('',el,this));
el._ps_.destroy();
}
}
}
</script>

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

@@ -35,7 +35,7 @@
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 :data="tableData" :height="$tableHeight.normal" @sort-change="tableDataSort" border class="nz-table mib-table" ref="mibTable" style="width: 100%;" v-loading="tools.loading"
@selection-change="(selection)=>{this.batchDeleteObjs=selection}"
>
<el-table-column
@@ -55,7 +55,7 @@
</template>
<template v-else-if="item.prop == 'modelsDetail' && scope.row['modelsDetail'] && scope.row['modelsDetail'].length >0" >
<div style="height: 100%">
<el-scrollbar style="height: 100%">
<div style="height: 100%; overflow: auto;">
<div v-for="(n,i) in scope.row['modelsDetail']" :key="n.name+'-'+n.id+'-'+i" class="detail-item-content">
<el-popover trigger="hover" placement="top" >
<div>
@@ -78,7 +78,7 @@
</template>
</el-popover>
</div>
</el-scrollbar>
</div>
</div>
</template>
<span v-else-if="item.prop == 'updateAt'">{{utcTimeToTimezoneStr(scope.row[item.prop])}}</span>
@@ -101,7 +101,7 @@
</template>
</el-table-column>
</el-table>
<button 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>
<button :class="{'to-top-is-hover': tools.tableHover}" :style="{top: tools.toTopBtnTop}" @click="toTop(scrollWrap)" class="to-top" v-show="tools.showTopBtn"><i class="nz-icon nz-icon-top"></i></button>
<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>
@@ -204,6 +204,7 @@
}],
},
searchLabel: {}, //搜索参数
scrollWrap: null,
}
},
methods: {
@@ -261,7 +262,13 @@
this.tools.loading = false;
if (response.code === 200) {
this.tableData = response.data.list;
this.pageObj.total = response.data.total
this.pageObj.total = response.data.total;
if (!this.scrollWrap) {
this.$nextTick(() => {
this.scrollWrap = this.$refs.mibTable.bodyWrapper;
this.toTopBtnHandler(this.scrollWrap);
});
}
}
})
},
@@ -330,15 +337,6 @@
this.$set(this.searchLabel, "orderBy", orderBy);
this.getTableData();
},
plpsscrolly(el,self){
if (el._ps_.scrollbarYTop > 50) {
self.tools.showTopBtn = true;
self.tools.tableHover = true;
} else {
self.tools.showTopBtn = false;
self.tools.tableHover = false;
}
},
},
created(){
//是否存在分页缓存
@@ -355,20 +353,9 @@
this.tableTitleReset(this.tableTitle,this.tools.customTableTitle);
this.getTableData();
this.$nextTick(() => {
//绑定滚动条事件，控制top按钮
let el = this.$refs.mibTable.$el.querySelector(".el-table__body-wrapper");
if (el._ps_) {
el.addEventListener("ps-scroll-y", this.plpsscrolly.bind('',el,this));
}
});
},
beforeDestroy(){
let el = this.$refs.mibTable.$el.querySelector(".el-table__body-wrapper");
if (el._ps_) {
el.removeEventListener("ps-scroll-y", this.plpsscrolly.bind('',el,this));
el._ps_.destroy();
}
beforeDestroy() {
this.scrollbarWrap.removeEventListener('scroll', bus.debounce);
}
}
</script>

37
nezha-fronted/src/components/page/config/mibBrowser.vue
View File

@@ -136,7 +136,7 @@
<div class="mib-browser-left">
<div class="mib-browser-tree-title">
<span>SNMP MIBs</span>
<el-dropdown trigger="click" v-scrollBar:el-dropdown="'small'" :hide-on-click="false" @command="selectModel" ref="modelDropdown">
<el-dropdown :hide-on-click="false" @command="selectModel" ref="modelDropdown" trigger="click">
<span class="mib-browser-table-op" @click="scrollbarHeightHandler">{{$t("config.model.model") + " "}}<i class="nz-icon nz-icon-funnel"></i></span>
<el-dropdown-menu slot="dropdown" class="mib-browser-model-dropdown el-dropdown-multi">
<el-dropdown-item :class="{'dropdown-item-active': walkParam.models.indexOf(item.id) > -1}" :command="item" v-for="item, index in modelData" :key="index">{{item.name}}</el-dropdown-item>
@@ -144,7 +144,7 @@
</el-dropdown>
</div>
<!--tree-->
<el-scrollbar class="el-scrollbar-normal mib-browser-tree" ref="treeScrollbar">
<div class="mib-browser-tree" ref="treeScrollbar">
<el-tree
ref="walkTree"
highlight-current
@@ -169,11 +169,11 @@
{{data.name}}
</div>
</el-tree>
</el-scrollbar>
</div>
<!--拖拽区-->
<div class="tree-detail-resize" @mousedown="treeDetailResize"></div>
<!--detail-->
<el-scrollbar class="el-scrollbar-normal mib-browser-detail" ref="detailScrollbar">
<div class="mib-browser-detail" ref="detailScrollbar">
<div class="mib-browser-detail-row">
<div>Name</div>
<div>{{currentWalk.name}}</div>
@@ -206,7 +206,7 @@
<div>Description</div>
<div>{{currentWalk.description}}</div>
</div>
</el-scrollbar>
</div>
</div>
<!--拖拽区-->
<div class="left-right-resize" @mousedown="leftRightResize"></div>
@@ -220,7 +220,7 @@
</span>
</div>
<pl-table :row-height="28" use-virtual :datas="resultData" border :empty-text="$t('config.mib.noData')" ref="resultTable"
class="mib-browser-table nz-table" style="width: 100%;height: calc(100% - 31px)" v-if="showTable" v-loading="loading" v-scrollBar:el-table="'large'" :pagination-show="false">
:pagination-show="false" class="mib-browser-table nz-table" style="width: 100%;height: calc(100% - 31px)" v-if="showTable" v-loading="loading">
<pl-table-column label="Name/OID" v-slot="{row}">
<div class="too-long-split" @click="searchParam.oid = row.oid">{{row.name ? row.name : row.oid}}</div>
</pl-table-column>
@@ -328,28 +328,12 @@
}
},
methods: {
scrollbarHeightHandler() {
setTimeout(() => {
let top = '';
document.querySelector("body>.el-dropdown-menu").addEventListener("ps-y-reach-end", () => {
let yDom = document.querySelector("body>.el-dropdown-menu>.ps__rail-y");
if (top) {
yDom.style.top = top;
} else {
top = yDom.style.top;
}
});
}, 100);
},
toFileTab() {
this.$emit("toFileTab");
},
showDetail(data, node) {
this.currentWalk = data;
this.searchParam.oid = data.objectID;
this.$nextTick(() => {
this.$refs.detailScrollbar.update();
});
},
/*根据oid获取对应的根mib名称*/
@@ -379,9 +363,6 @@
for (let item in obj) {
this.walkData.push({name: item, subTree: obj[item]});
}
this.$nextTick(() => {
this.$refs.treeScrollbar.update();
});
}
});
},
@@ -428,10 +409,6 @@
this.$post('mib/browser', this.searchParam).then(response => {
this.loading = false;
if (response.code === 200) {
let wrapper = document.querySelector(".el-table__body-wrapper");
if (wrapper._ps_) {
wrapper.scrollTop = wrapper._ps_.contentHeight;
}
this.resultData = this.resultData.concat(response.data.list);
if (this.searchParam.operation == 'set') {
this.$message({duration: 2000, type: 'success', message: this.$t("tip.success")});
@@ -439,7 +416,6 @@
this.showTable=false;
this.$nextTick(()=>{
this.showTable=true;
// this.$refs['resultTable'].doLayout();
})
} else {
this.$message.error(response.msg);
@@ -570,7 +546,6 @@
}
};
document.onmouseup = () => {
this.$refs.treeScrollbar.update();
document.onmousemove = null;
}
},

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

@@ -33,7 +33,6 @@
border style="width: 100%;"
ref="modelTable"
class="nz-table"
v-scrollBar:el-table="'large'"
v-loading="tools.loading"
:cell-class-name="assetStatClassName"
v-show="bottomBox.mainResizeShow"
@@ -89,7 +88,7 @@
</template>
</el-table-column>
</el-table>
<button 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>
<button :class="{'to-top-is-hover': tools.tableHover}" :style="{top: tools.toTopBtnTop}" @click="toTop(scrollWrap)" class="to-top" v-show="tools.showTopBtn"><i class="nz-icon nz-icon-top"></i></button>
<div class="pagination-bottom" v-show="!bottomBox.showSubList">
<Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
</div>
@@ -204,6 +203,7 @@
}],
},
searchLabel: {}, //搜索参数
scrollWrap: null,
}
},
methods: {
@@ -285,7 +285,13 @@
this.tools.loading = false;
if (response.code === 200) {
this.tableData = response.data.list;
this.pageObj.total = response.data.total
this.pageObj.total = response.data.total;
if (!this.scrollWrap) {
this.$nextTick(() => {
this.scrollWrap = this.$refs.modelTable.bodyWrapper;
this.toTopBtnHandler(this.scrollWrap);
});
}
}
})
},
@@ -330,15 +336,6 @@
this.$set(this.searchLabel, "orderBy", orderBy);
this.getTableData();
},
plpsscrolly(el,self){
if (el._ps_.scrollbarYTop > 50) {
self.tools.showTopBtn = true;
self.tools.tableHover = true;
} else {
self.tools.showTopBtn = false;
self.tools.tableHover = false;
}
},
},
created(){
//是否存在分页缓存
@@ -355,13 +352,6 @@
this.tableTitleReset(this.tableTitle,this.tools.customTableTitle);
this.getTableData();
this.$nextTick(() => {
//绑定滚动条事件，控制top按钮
let el = this.$refs.modelTable.$el.querySelector(".el-table__body-wrapper");
if (el._ps_) {
el.addEventListener("ps-scroll-y", this.plpsscrolly.bind('',el,this));
}
});
},
watch: {
'bottomBox.showSubList': function(n) {
@@ -369,12 +359,8 @@
this.$bottomBoxWindow.showSubListWatch(vm, n);
},
},
beforeDestroy(){
let el = this.$refs.modelTable.$el.querySelector(".el-table__body-wrapper");
if (el._ps_) {
el.removeEventListener("ps-scroll-y", this.plpsscrolly.bind('',el,this));
el._ps_.destroy();
}
beforeDestroy() {
this.scrollbarWrap.removeEventListener('scroll', bus.debounce);
}
}
</script>

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

@@ -30,7 +30,6 @@
ref="operationLogTable"
:height="$tableHeight.normal"
v-loading="tools.loading"
v-scrollBar:el-table="'large'"
:cell-class-name="messageStyle"
style="width: 100%;"
@sort-change="tableDataSort"
@@ -61,7 +60,7 @@
</template>
</el-table-column>
</el-table>
<button 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>
<button :class="{'to-top-is-hover': tools.tableHover}" :style="{top: tools.toTopBtnTop}" @click="toTop(scrollWrap)" class="to-top" v-show="tools.showTopBtn"><i class="nz-icon nz-icon-top"></i></button>
<Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
</div>
</template>
@@ -193,6 +192,7 @@
],
},
searchLabel: {}, //搜索参数
scrollWrap: null,
}
},
methods: {
@@ -214,7 +214,13 @@
this.tools.loading = false;
if (response.code === 200) {
this.tableData = response.data.list;
this.pageObj.total = response.data.total
this.pageObj.total = response.data.total;
if (!this.scrollWrap) {
this.$nextTick(() => {
this.scrollWrap = this.$refs.operationLogTable.bodyWrapper;
this.toTopBtnHandler(this.scrollWrap);
});
}
}
})
},
@@ -256,15 +262,6 @@
this.$set(this.searchLabel, "orderBy", orderBy);
this.getTableData();
},
plpsscrolly(el,self){
if (el._ps_.scrollbarYTop > 50) {
self.tools.showTopBtn = true;
self.tools.tableHover = true;
} else {
self.tools.showTopBtn = false;
self.tools.tableHover = false;
}
},
},
watch:{
tableData(){
@@ -273,6 +270,9 @@
}
},
},
beforeDestroy() {
this.scrollbarWrap.removeEventListener('scroll', bus.debounce);
},
computed: {
isCurrentUser() {
return function(username) {
@@ -294,20 +294,6 @@
: this.tableTitle;
this.tableTitleReset(this.tableTitle,this.tools.customTableTitle);
this.getTableData();
this.$nextTick(() => {
//绑定滚动条事件，控制top按钮
let el = this.$refs.operationLogTable.$el.querySelector(".el-table__body-wrapper");
if (el._ps_) {
el.addEventListener("ps-scroll-y", this.plpsscrolly.bind('',el,this));
}
});
},
beforeDestroy(){
let el = this.$refs.operationLogTable.$el.querySelector(".el-table__body-wrapper");
if (el._ps_) {
el.removeEventListener("ps-scroll-y", this.plpsscrolly.bind('',el,this));
el._ps_.destroy();
}
}
}
</script>

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

@@ -31,8 +31,7 @@
></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"
@sort-change="tableDataSort" class="nz-table" ref="promTable" v-loading="tools.loading"
@selection-change="(selection)=>{this.batchDeleteObjs=selection}"
>
<el-table-column
@@ -83,7 +82,7 @@
</template>
</el-table-column>
</el-table>
<button class="to-top" :style="{top: tools.toTopBtnTop}" :class="{'to-top-is-hover': tools.tableHover}" v-show="tools.showTopBtn && bottomBox.mainResizeShow" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
<button :class="{'to-top-is-hover': tools.tableHover}" :style="{top: tools.toTopBtnTop}" @click="toTop(scrollWrap)" class="to-top" v-show="tools.showTopBtn && bottomBox.mainResizeShow"><i class="nz-icon nz-icon-top"></i></button>
<div class="pagination-bottom" v-show="!bottomBox.showSubList">
<Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
</div>
@@ -224,6 +223,7 @@
},
searchLabel: {}, //搜索参数
promServerType:null,
scrollWrap: null,
}
},
methods: {
@@ -326,7 +326,13 @@
}
}
this.tableData = response.data.list;
this.pageObj.total = response.data.total
this.pageObj.total = response.data.total;
if (!this.scrollWrap) {
this.$nextTick(() => {
this.scrollWrap = this.$refs.promTable.bodyWrapper;
this.toTopBtnHandler(this.scrollWrap);
});
}
}
})
},
@@ -396,15 +402,6 @@
return item.value == type
})
},
plpsscrolly(el,self){
if (el._ps_.scrollbarYTop > 50) {
self.tools.showTopBtn = true;
self.tools.tableHover = true;
} else {
self.tools.showTopBtn = false;
self.tools.tableHover = false;
}
},
},
created(){
//是否存在分页缓存
@@ -428,16 +425,9 @@
if (pageSize != 'undefined' && pageSize != null) {
this.pageObj.pageSize = pageSize
}
this.$nextTick(() => {
//绑定滚动条事件，控制top按钮
let el = this.$refs.promTable.$el.querySelector(".el-table__body-wrapper");
if (el._ps_) {
el.addEventListener("ps-scroll-y", this.plpsscrolly.bind('',el,this));
/*el.addEventListener("mouseenter", this.plmouseenter.bind('',el,this));
el.addEventListener("mouseleave", this.plmouseleave.bind('',el,this));*/
}
});
},
beforeDestroy() {
this.scrollbarWrap.removeEventListener('scroll', bus.debounce);
},
watch: {
@@ -452,14 +442,5 @@
this.$bottomBoxWindow.showSubListWatch(vm, n);
},
},
beforeDestroy(){
let el = this.$refs.promTable.$el.querySelector(".el-table__body-wrapper");
if (el._ps_) {
el.removeEventListener("ps-scroll-y", this.plpsscrolly.bind('',el,this));
/* el.removeEventListener("mouseenter", this.plmouseenter.bind('',el,this));
el.removeEventListener("mouseleave", this.plmouseleave.bind('',el,this));*/
el._ps_.destroy();
}
}
}
</script>

50
nezha-fronted/src/components/page/config/roles.vue
View File

@@ -14,11 +14,11 @@
<div class="top-tool-search">
<search-input :searchMsg="searchMsg" @search="search" ref="searchInput" ></search-input>
</div>
<button :title="$t('overall.createRoles')" @click="add" class="nz-btn nz-btn-size-normal nz-btn-style-light margin-l-20" v-has="'rule_toAdd'"
<button :title="$t('overall.createRoles')" @click="add" class="nz-btn nz-btn-size-normal nz-btn-style-light margin-l-20" v-has="'role_toAdd'"
id="roles-add" type="button">
<i class="nz-icon-create-square nz-icon"></i>
</button>
<delete-button :delete-objs="batchDeleteObjs" :filter-function="(arr)=>{return '?ids='+arr.map(t=>t.id).join(',')}" @after="getTableData" api="sys/role" v-has="'rule_delete'"></delete-button>
<delete-button :delete-objs="batchDeleteObjs" :filter-function="(arr)=>{return '?ids='+arr.map(t=>t.id).join(',')}" @after="getTableData" api="sys/role" v-has="'role_delete'"></delete-button>
</div>
<!-- 顶部分页组件，当打开底部上滑框时出现 -->
<div class="pagination-top pagination-top-hide display-none"></div>
@@ -43,7 +43,6 @@
ref="rolesTable"
style="width: 100%;"
v-loading="tools.loading"
v-scrollBar:el-table="'large'"
>
<el-table-column
:resizable="false"
@@ -68,9 +67,9 @@
<template :column="item" slot-scope="scope">
<div class="content-right-options" v-if="item.prop == 'option'">
<template v-if="scope.row.buildIn != 1">
<span :id="'roles-edit-'+scope.row.id" :title="$t('overall.edit')" @click="edit(scope.row)" class="content-right-option" v-has="'rule_toEdit'"><i :class="{'gray-filter':scope.row.buildIn == 1}" class="nz-icon nz-icon-edit"></i></span>
<span :id="'roles-edit-'+scope.row.id" :title="$t('overall.edit')" @click="edit(scope.row)" class="content-right-option" v-has="'role_toEdit'"><i :class="{'gray-filter':scope.row.buildIn == 1}" class="nz-icon nz-icon-edit"></i></span>
&nbsp;
<span :id="'roles-del-'+scope.row.id" :title="$t('overall.delete')" @click="del(scope.row)" class="content-right-option" v-has="'rule_delete'"><i :class="{'gray-filter':scope.row.buildIn == 1}" class="nz-icon nz-icon-delete"></i></span>
<span :id="'roles-del-'+scope.row.id" :title="$t('overall.delete')" @click="del(scope.row)" class="content-right-option" v-has="'role_delete'"><i :class="{'gray-filter':scope.row.buildIn == 1}" class="nz-icon nz-icon-delete"></i></span>
</template>
<template v-else>
<span :id="'roles-detail-'+scope.row.id" :title="$t('overall.view')" @click="detail(scope.row)" class="content-right-option"><i class="nz-icon nz-icon-view"></i></span>
@@ -98,7 +97,7 @@
</template>
</el-table-column>
</el-table>
<button :class="{'to-top-is-hover': tools.tableHover}" :style="{top: tools.toTopBtnTop}" @click="$toTop('ps', 0)" class="to-top" v-show="tools.showTopBtn "><i class="nz-icon nz-icon-top"></i></button>
<button :class="{'to-top-is-hover': tools.tableHover}" :style="{top: tools.toTopBtnTop}" @click="toTop(scrollWrap)" class="to-top" v-show="tools.showTopBtn "><i class="nz-icon nz-icon-top"></i></button>
</div>
<transition name="right-box">
<role-box :detail="rightBox.detail" :role="role" @close="closeRightBox" v-if="rightBox.show"></role-box>
@@ -108,6 +107,7 @@
<script>
import deleteButton from "../../common/deleteButton";
import roleBox from '../../common/rightBox/roleBox';
import bus from "../../../libs/bus";
export default {
name: "roles",
@@ -178,6 +178,7 @@
}],
},
searchLabel: {}, //搜索参数
scrollWrap: null,
}
},
methods: {
@@ -224,6 +225,12 @@
this.tableData = response.data.list;
this.pageObj.total = response.data.total
this.tools.loading = false;
if (!this.scrollWrap) {
this.$nextTick(() => {
this.scrollWrap = this.$refs.rolesTable.bodyWrapper;
this.toTopBtnHandler(this.scrollWrap);
});
}
}
})
},
@@ -278,20 +285,6 @@
this.$set(this.searchLabel, "orderBy", orderBy);
this.getTableData();
},
plpsscrolly(el,self){
if (el._ps_.scrollbarYTop > 50) {
self.tools.showTopBtn = true;
self.tools.tableHover = true;
} else {
self.tools.showTopBtn = false;
self.tools.tableHover = true;
}
},
},
computed: {
},
watch: {
},
created(){
//是否存在分页缓存
@@ -300,26 +293,15 @@
this.pageObj.pageSize = pageSize
}
},
beforeDestroy() {
this.scrollbarWrap.removeEventListener('scroll', bus.debounce);
},
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;
this.getTableData();
this.$nextTick(() => {
//绑定滚动条事件，控制top按钮
let el = this.$refs.rolesTable.$el.querySelector(".el-table__body-wrapper");
if (el._ps_) {
el.addEventListener("ps-scroll-y", this.plpsscrolly.bind('',el,this));
}
});
},
beforeDestroy(){
let el = this.$refs.rolesTable.$el.querySelector(".el-table__body-wrapper");
if (el._ps_) {
el.removeEventListener("ps-scroll-y", this.plpsscrolly.bind('',el,this));
el._ps_.destroy();
}
}
}
</script>

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

@@ -1,5 +1,5 @@
<template>
<div class="system" v-scroll-bar>
<div class="system">
<el-tabs type="border-card" @tab-click="selectTab" v-model="activeTab" class="system-tabs" >
<el-tab-pane :label="$t('config.system.basic.basic')" name="basic">
<div class="system-config-form basicForm">
@@ -196,8 +196,7 @@
</el-form>
</div>
<!--notificationEdit-->
<div class="scrollBox"
v-scrollBar>
<div class="scrollBox">
<draggable v-model="notification"
:options="{group:'people',animation:150,ghostClass:'sortable-ghost',chosenClass:'chosenClass',scroll:true,scrollSensitivity:200}"
@change="change"
@@ -264,8 +263,7 @@
</el-form>
</div>
<!--linkEdit-->
<div class="scrollBox"
v-scrollBar>
<div class="scrollBox">
<draggable v-model="link"
:options="{group:'people',animation:150,ghostClass:'sortable-ghost',chosenClass:'chosenClass',scroll:true,scrollSensitivity:200}"
@change="change"

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

@@ -29,7 +29,6 @@
border
ref="terminalLogTable"
:height="$tableHeight.normal"
v-scrollBar:el-table="'large'"
v-loading="tools.loading"
:cell-class-name="messageStyle"
style="width: 100%;"
@@ -65,12 +64,12 @@
</template>
</el-table-column>
</el-table>
<button 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>
<button :class="{'to-top-is-hover': tools.tableHover}" :style="{top: tools.toTopBtnTop}" @click="toTop(scrollWrap)" class="to-top" v-show="tools.showTopBtn"><i class="nz-icon nz-icon-top"></i></button>
<Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
</div>
</template>
<script>
import bus from '../../../libs/bus';
import bus from "../../../libs/bus";
export default {
name: "terminallog",
data() {
@@ -215,6 +214,7 @@
],
},
searchLabel: {}, //搜索参数
scrollWrap: null,
}
},
methods: {
@@ -229,7 +229,13 @@
response.data.list[i].status = response.data.list[i].status + "";
}
this.tableData = response.data.list;
this.pageObj.total = response.data.total
this.pageObj.total = response.data.total;
if (!this.scrollWrap) {
this.$nextTick(() => {
this.scrollWrap = this.$refs.terminalLogTable.bodyWrapper;
this.toTopBtnHandler(this.scrollWrap);
});
}
}
})
},
@@ -281,17 +287,9 @@
this.$set(this.searchLabel, "orderBy", orderBy);
this.getTableData();
},
plpsscrolly(el,self){
if (el._ps_.scrollbarYTop > 50) {
self.tools.showTopBtn = true;
self.tools.tableHover = true;
} else {
self.tools.showTopBtn = false;
self.tools.tableHover = false;
}
},
},
watch:{
beforeDestroy() {
this.scrollbarWrap.removeEventListener('scroll', bus.debounce);
},
created(){
//是否存在分页缓存
@@ -308,20 +306,6 @@
this.tableTitleReset(this.tableTitle,this.tools.customTableTitle);
this.getTableData();
this.$nextTick(() => {
//绑定滚动条事件，控制top按钮
let el = this.$refs.terminalLogTable.$el.querySelector(".el-table__body-wrapper");
if (el._ps_) {
el.addEventListener("ps-scroll-y", this.plpsscrolly.bind('',el,this));
}
});
},
beforeDestroy(){
let el = this.$refs.terminalLogTable.$el.querySelector(".el-table__body-wrapper");
if (el._ps_) {
el.removeEventListener("ps-scroll-y", this.plpsscrolly.bind('',el,this));
el._ps_.destroy();
}
}
}
</script>

16
nezha-fronted/src/components/page/dashboard/chartBox.vue
View File

@@ -161,7 +161,7 @@
<!-- end--标题-->
<!-- begin--表单-->
<el-scrollbar class="right-box-form-box" ref="scrollbar">
<div class="right-box-form-box" ref="scrollbar">
<el-form :model="editChart" :rules="rules" class="right-box-form right-box-form-left" label-position="right" label-width="120px" ref="chartForm">
<el-form-item :label="$t('dashboard.panel.title')" prop="panelName" v-if="showPanel.type != 'dashboard' && showPanel.type != 'project' && showPanel.type != 'asset' && showPanel.type != 'model'">
<el-autocomplete
@@ -458,7 +458,7 @@
</template>
</el-form>
</el-scrollbar>
</div>
<!--底部按钮-->
<div class="right-box-bottom-btns">
<button @click="esc(false)" id="chart-box-esc" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new">
@@ -685,9 +685,6 @@
this.promqlKeys.push(getUUID());
this.elementIds.push("");
this.promqlCount++;
this.$nextTick(() => {
this.$refs.scrollbar.update();
});
},
removeExpression(index) {
if (this.promqlCount > 1) {
@@ -704,9 +701,6 @@
});
});
}
this.$nextTick(() => {
this.$refs.scrollbar.update();
});
},
save() {
this.$refs['chartForm'].validate((valid) => {
@@ -750,9 +744,6 @@
// 增加指标,tarNum
addTarget() {
this.elements.push(1);
this.$nextTick(() => {
this.$refs.scrollbar.update();
});
},
// 删除指标,第一步, 新方法
deleteTarget(index) {
@@ -763,9 +754,6 @@
// 子组件保存内容到bus
item.subSave();
});
this.$nextTick(() => {
this.$refs.scrollbar.update();
});
},
// subSave保存成功后回调,第二步
subOk() {

4
nezha-fronted/src/components/page/dashboard/chartMetric.vue
View File

@@ -212,7 +212,6 @@
v-model="labelValueCascaderVal"
:options="labelValueCascaderOptions"
:props="labelValueProps"
v-scrollBar:metric-label-cascader
@change="changeTag"
clearable>
</el-cascader>
@@ -510,8 +509,6 @@ export default {
labelValueProps:{ multiple: true },
};
},
watch: {},
beforeDestroy() {},
methods: {
// 删除该选项,第一步,传递要删除的参数
deleteTarget() {
@@ -1392,7 +1389,6 @@ export default {
bus.$on('clear_history', () => {
this.clearHistory();
});
//this.metricCascaderList = [...this.metricCascaderListTmp];
},
beforeDestroy() {
bus.$off('clear_history');

4
nezha-fronted/src/components/page/dashboard/chartMetricForPreview.vue
View File

@@ -240,7 +240,7 @@
-->
<el-col :span="24">
<div class="li-list-part-label-val-list" id="scrollDiv">
<el-scrollbar style="height: 100%">
<div style="height: 100%; overflow: auto;">
<el-form-item style="width:99%;" class="metric-title-position right-box-form-content" v-for="(item, index) in elementInfo.selectedTagList" :key="index" label-width="100" :ref="'tagItem' + index" :prop="'tagList.' + index + '.value'" >
<el-row :gutter="10" >
<el-col :span="4" >
@@ -260,7 +260,7 @@
-->
</el-row>
</el-form-item>
</el-scrollbar>
</div>
</div>
</el-col>

12
nezha-fronted/src/components/page/dashboard/explore/editor.vue
View File

@@ -4,12 +4,12 @@
<span class="nz-input-append editor-clear" style="display: none" @click="clearContent"><i class="nz-icon nz-icon-circle-close"></i></span>
<div class="metric-editor-popper" :style="{left:popperPos.left+'px'}" v-show="false">
<div class="metric-popper-main" v-show="showType">
<el-scrollbar style="height: 100%;width:100%" class="el-scrollbar-small" ref="scroll">
<div ref="scroll" style="height: 100%;width:100%; overflow: auto;">
<div v-for="(key, index) in orders" >
<div v-html="key" class="popper-group" v-show="showSuggestions[key]"></div>
<div class="popper-item" v-for="(item,i) in showSuggestions[key]" v-html="item.label" :key="item.insertText" :type="key" :value="item.insertText" @click.stop="handleItemClick(key,item,$event)" @mouseover="itemHover(item)" @mouseout="itemOut(item)"></div>
</div>
</el-scrollbar>
</div>
</div>
<div class="metric-popper-desc" v-if="showType&&Object.keys(showSuggestions).length>0&&showDescription && detailItem && detailItem.documentation">
<div><b>{{detailItem.insertText}}</b></div>
@@ -562,8 +562,8 @@
}
})
let scroll=this.$refs.scroll.wrap;
scroll.scrollTop=0;
/*let scroll=this.$refs.scroll.wrap;
scroll.scrollTop=0;*/
},
storeSuggestions:function(){
this.$nextTick(()=>{
@@ -624,7 +624,7 @@
})
},
moveScroll:function(){
let scroll=this.$refs.scroll.wrap;
/*let scroll=this.$refs.scroll.wrap;
//console.log('scroll',scroll)
if(scroll){
let curScroll=scroll.scrollTop;//滚动条当前位置
@@ -648,7 +648,7 @@
}
}, 20);
}
}
}*/
},

11
nezha-fronted/src/components/page/dashboard/explore/explore.vue
View File

@@ -15,7 +15,7 @@
</div>
</div>
<div style="height: calc(100% - 50px);width: 100%;" >
<el-scrollbar style="height: 100%" class="el-scrollbar-large">
<div ref="scrollWrap" style="height: 100%; overflow: auto;">
<div class="expression-room right-margin" style="padding-top: 5px">
<!--坑，这个index居然是从1开始-->
<promql-input
@@ -75,7 +75,6 @@
border
ref="exploreTable"
tooltip-effect="light"
v-scrollBar:el-table="'large'"
v-loading="tools.loading"
style="width: 100%;">
<el-table-column
@@ -196,7 +195,7 @@ instance_cpu_time_ns{app="fox", proc="widget", rev="4d3a513", env="prod", job="c
</div>
</div>
</div>
</el-scrollbar>
</div>
</div>
</div>
@@ -928,10 +927,4 @@ instance_cpu_time_ns{app="fox", proc="widget", rev="4d3a513", env="prod", job="c
text-overflow: ellipsis;
white-space: nowrap;
}
.explore-table .ps__rail-x:hover{
opacity: 0.4 !important;
}
.explore-table .ps__rail-x:focus{
opacity: 0.9 !important;
}
</style>

4
nezha-fronted/src/components/page/dashboard/metricPreview.vue
View File

@@ -65,7 +65,7 @@
</el-row>
<el-row class="border-area" v-show="chartCount === 'multiple'">
<el-scrollbar style="height: 100%">
<div style="height: 100%; overflow: auto;">
<div class="chartBoxMul" v-for="(item, index) in lineList">
<line-chart-block
:show-setting="false"
@@ -75,7 +75,7 @@
@on-edit-chart-block="editData"
></line-chart-block>
</div>
</el-scrollbar>
</div>
</el-row>
</el-col>

2
nezha-fronted/src/components/page/dashboard/overview/chart.vue
View File

@@ -7,7 +7,7 @@
<div class="chart-body" ref="chartBody" :id="chartId" ></div>
<div class="chart-no-data" v-show="noData">No Data</div>
<div class="legend-container legend-container-screen" id="legendArea" ref="legendArea" v-show="legend.length>0" v-scrollBar:legend>
<div class="legend-container legend-container-screen" id="legendArea" ref="legendArea" v-show="legend.length>0">
<div v-for="(item, index) in legend" :title="item.alias?item.alias:item.name" @click="clickLegend(item.name,index)" class="legend-item" :class="{'ft-gr':item.isGray}" :key="'legend_' + item.name+'_'+index">
<span class="legend-shape" :style="{background:(item.isGray?'#D3D3D3':getBgColor(index))}"></span>{{item.alias?item.alias:item.name}}
</div>

4
nezha-fronted/src/components/page/dashboard/overview/overview.vue
View File

@@ -29,7 +29,7 @@
<!--内容-->
<div class="overview-content">
<el-scrollbar style="height: 100%" ref="overviewScrollbar" class="column-flex">
<div class="column-flex" ref="overviewScrollbar" style="height: 100%; overflow: auto;">
<div class="content-row-box" style="flex: 1;height: 100%;">
<div class="content-col-box " style="flex:3;" >
<table-box :pop-data="assetStatData" ref="assetTab" ></table-box>
@@ -84,7 +84,7 @@
<table-box :pop-data="alertRuleStatData" ref="alertRuleTab"></table-box>
</div>
</div>
</el-scrollbar>
</div>
</div>
</div>
</left-menu>

1
nezha-fronted/src/components/page/dashboard/overview/tableBox.vue
View File

@@ -57,7 +57,6 @@
<el-table
class="overview-table"
:data="showData.table.tableData"
v-scrollBar:el-table
tooltip-effect="light"
height="100%"
ref="dataTable"

70
nezha-fronted/src/components/page/dashboard/panel.vue
View File

@@ -13,10 +13,10 @@
</el-row>
<el-dropdown-menu class="nz-dashboard-dropdown panel-dropdown-title-space" slot="dropdown" >
<!--<el-dropdown-item>{{$t('dashboard.panel.createPanelTitleSec')}}</el-dropdown-item>-->
<el-scrollbar style="height: 100%;">
<div ref="dashboardScrollbar" style="height: 100%; overflow: auto">
<el-dropdown-item >
<el-row class="panel-list-width" :gutter="10" >
<el-col :span="21"><el-input size="mini" v-model="filterPanel" @click.native.stop="filterPanelFocus($event)" @input="filterPanelFunc" clearable :placeholder="$t('overall.search')"></el-input></el-col>
<el-col :span="21"><el-input :placeholder="$t('overall.search')" @click.native.stop="filterPanelFocus($event)" @input="filterPanelFunc" clearable size="mini" v-model="filterPanel"></el-input></el-col>
<el-col :span="3"><span :title='$t("dashboard.panel.createPanelTitleSec")' @click="toAdd" v-has="'panel_toAdd'"><i class="nz-icon nz-icon-plus"></i></span></el-col>
</el-row>
</el-dropdown-item>
@@ -45,7 +45,7 @@
</el-row>
</el-dropdown-item>
</draggable>
</el-scrollbar>
</div>
</el-dropdown-menu>
</el-dropdown>
</div>
@@ -79,13 +79,13 @@
</template>
</div>
<div class="table-list" id="tableList">
<el-scrollbar class="el-scrollbar-large" style="height: 100%" ref="dashboardScrollbar">
<div ref="dashboardScrollbar" style="height: 100%; overflow: auto;">
<div class="box-content">
<chart-list :from="$CONSTANTS.fromRoute.panel" @on-edit-chart="editChart" @on-refresh-time="refreshTime" @on-remove-chart="delChart" ref="chartList"></chart-list>
</div>
</el-scrollbar>
</div>
<button class="to-top" :class="{'to-top-is-hover': tableHover}" v-show="showTopBtn" @click="$toTop('el', $refs.dashboardScrollbar.wrap)" style="bottom: 0;"><i class="nz-icon nz-icon-top"></i></button>
</div>
<button :class="{'to-top-is-hover': tableHover}" @click="toTop(scrollbarWrap)" class="to-top" style="bottom: 0;" v-show="showTopBtn"><i class="nz-icon nz-icon-top"></i></button>
<transition name="right-box">
<chart-box :chart="chart" :from="$CONSTANTS.fromRoute.panel" :panel-data="panelData" :show-panel="showPanel" @close="closeChartBox" @delete-chart="delChart" @on-create-success="createSuccess" @on-delete-success="delChartOk" @reload="panelReload" @reloadOnlyPanel="panelReloadOnlyPanel" ref="addChartModal" v-if="rightBox.chart.show"></chart-box>
@@ -177,6 +177,7 @@
filterPanel:'',
showPanelList:[],
//---图表相关参数--end
scrollbarWrap: null,
}
},
components: {
@@ -271,26 +272,6 @@
newChart() {
return JSON.parse(JSON.stringify(this.blankChart));
},
scrollbarHeightHandler() {
setTimeout(() => {
let top = '';
let top2 = '';
document.querySelector("body>.el-dropdown-menu").addEventListener("ps-y-reach-end", () => {
let yDom = document.querySelector("body>.el-dropdown-menu>.ps__rail-y");
let yDom2 = document.querySelector("body>.el-dropdown-menu>.ps__rail-y>.ps__thumb-y");
if (top) {
yDom.style.top = top;
} else {
top = yDom.style.top;
}
if (top2) {
yDom2.style.top = top2;
} else {
top2 = yDom2.style.top;
}
});
}, 100);
},
// 编辑图表信息,打开编辑弹窗
editChart(data) {
if (!data.param) {
@@ -534,19 +515,10 @@
// 滚动事件触发下拉加载
onScroll() {
let _self = this;
let scrollbarWrap = this.$refs.dashboardScrollbar.wrap;
scrollbarWrap.onscroll = bus.debounce(function() {
if (scrollbarWrap.scrollTop > 50) {
_self.showTopBtn = true;
} else {
_self.showTopBtn = false;
}
_self.$refs.chartList.loadChartData(scrollbarWrap.scrollTop);
//if (scrollbarWrap.scrollHeight - scrollbarWrap.scrollTop - scrollbarWrap.offsetHeight < 20) {
//_self.$refs.chartList.pageDataList(true, _self.showPanel.id);
//}
},300);
this.scrollbarWrap.addEventListener('scroll', bus.debounce(function() {
_self.showTopBtn = _self.scrollbarWrap.scrollTop > 50;
_self.$refs.chartList.loadChartData(_self.scrollbarWrap.scrollTop);
}, 300));
},
focusInput() {
let classVal=document.getElementById('queryPanel').parentElement.getAttribute("class");
@@ -719,15 +691,12 @@
}else{
this.showPanelList = this.panelData;
}
this.$nextTick(()=>{
document.querySelector(".panel-dropdown-title-space")._ps_.update()
})
},
tableListEnter(self){
self.tableHover = true;
tableListEnter(){
this.tableHover = true;
},
tableListLeave(self){
self.tableHover = false;
tableListLeave(){
this.tableHover = false;
},
},
@@ -735,9 +704,10 @@
this.getTableData();
},
mounted() {
this.scrollbarWrap = this.$refs.dashboardScrollbar;
this.onScroll();
document.querySelector("#tableList").addEventListener("mouseenter", this.tableListEnter.bind('',this));
document.querySelector("#tableList").addEventListener("mouseleave", this.tableListLeave.bind('',this));
document.querySelector("#tableList").addEventListener("mouseenter", this.tableListEnter);
document.querySelector("#tableList").addEventListener("mouseleave", this.tableListLeave);
},
watch: {
'filter.searchName': function(n,o){
@@ -748,7 +718,9 @@
},
},
beforeDestroy(){
document.querySelector("#tableList").removeEventListener("mouseenter", this.tableListEnter);
document.querySelector("#tableList").removeEventListener("mouseleave", this.tableListLeave);
this.scrollbarWrap.removeEventListener('scroll', bus.debounce);
}
}
</script>

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

@@ -68,7 +68,6 @@
border
class="nz-table endpoint-table"
:height="mainTableHeight"
v-scrollBar:el-table="'large'"
v-show="bottomBox.mainResizeShow"
ref="endpointTable"
:cell-class-name="messageStyle"
@@ -169,7 +168,7 @@
</el-table>
<button class="to-top" :style="{top: tools.toTopBtnTop}"
:class="{'to-top-is-hover': tools.tableHover}"
v-show="tools.showTopBtn && bottomBox.mainResizeShow" @click="$toTop('ps', 0)"><i
@click="toTop(scrollWrap)" v-show="tools.showTopBtn && bottomBox.mainResizeShow"><i
class="nz-icon nz-icon-top"></i></button>
<div class="pagination-bottom" v-show="!bottomBox.showSubList">
<Pagination :tableId="tableId" v-cloak :pageObj="endpointPageObj" @pageNo='endpointPageNo'
@@ -380,6 +379,7 @@
readonly:true,
}],
},
scrollWrap: null
}
},
methods:{
@@ -428,6 +428,12 @@
}
this.endpointTableData=response.data.list;
this.endpointPageObj.total=response.data.total;
if (!this.scrollWrap) {
this.$nextTick(() => {
this.scrollWrap = this.$refs.endpointTable.bodyWrapper;
this.toTopBtnHandler(this.scrollWrap);
});
}
}
});
}
@@ -756,15 +762,6 @@
}
return '';
},
plpsscrolly(el,self){
if (el._ps_.scrollbarYTop > 50) {
self.tools.showTopBtn = true;
self.tools.tableHover = true;
} else {
self.tools.showTopBtn = false;
self.tools.tableHover = false;
}
},
},
created(){
this.currentProject=this.$store.state.currentProject;
@@ -787,12 +784,6 @@
},300);
this.initEvent();
//resize时刷新左侧列表滚动条
let vm=this;
// window.onresize=function(){
// // vm.$refs.leftScrollbar.update();
// };
},
computed:{
itemTip(){
@@ -817,23 +808,6 @@
},
},
watch:{
pageType(n){
if(n=='endpoint'){
setTimeout(()=>{
//绑定滚动条事件，控制top按钮
let el=this.$refs.endpointTable.$el.querySelector(".el-table__body-wrapper");
if(el._ps_){
el.addEventListener("ps-scroll-y", this.plpsscrolly.bind('',el,this));
}
},100)
}else{
let el = this.$refs.endpointTable.$el.querySelector(".el-table__body-wrapper");
if (el._ps_) {
el.removeEventListener("ps-scroll-y", this.plpsscrolly.bind('',el,this));
el._ps_.destroy();
}
}
},
currentModule(n,o){
this.endpointPageObj.pageNo=1;
if(n&&n.id){
@@ -859,24 +833,16 @@
}
},
},
destroyed(){
beforeDestroy() {
bus.$off("project-page-type");
bus.$off("current-project-change");
bus.$off("current-module-change");
bus.$off("project-list-change");
bus.$off("module-list-change");
bus.$off("endpoint-list-change");
bus.$off('alert-message-change')
bus.$off('alert-message-change');
this.scrollbarWrap.removeEventListener('scroll', bus.debounce);
},
beforeDestroy(){
if(this.$refs.endpointTable){
let el = this.$refs.endpointTable.$el.querySelector(".el-table__body-wrapper");
if (el._ps_) {
el.removeEventListener("ps-scroll-y", this.plpsscrolly.bind('',el,this));
el._ps_.destroy();
}
}
}
}
</script>

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

@@ -21,7 +21,7 @@ import plTable from 'pl-table'
import 'pl-table/themes/index.css'
import {post, get, put, del} from './http.js'
import {toTop, clickoutside, scrollBar, bottomBoxWindow, stringTimeParseToUnix, unixTimeParseToString, chartResizeTool, tableSet} from './components/common/js/tools.js';
import {clickoutside, bottomBoxWindow, stringTimeParseToUnix, unixTimeParseToString, chartResizeTool, tableSet} from './components/common/js/tools.js';
import * as tools from './components/common/js/tools.js';
import * as constants from './components/common/js/constants.js'
@@ -42,7 +42,6 @@ import moduleListPop from "./components/page/asset/moduleListPop"; //面板弹
import cabinetConfigBox from "./components/common/popBox/cabinetConfig"; //面板弹框组件
import modelBox from "./components/common/rightBox/modelBox"; //model弹框
import bottomBox from "./components/common/bottomBox/bottomBox"; //上滑框
import "perfect-scrollbar/css/perfect-scrollbar.css";
import loading from "./components/common/loading";
import mibBox from "./components/common/rightBox/mibBox";
import leftMenu from "./components/common/leftMenu";
@@ -76,7 +75,6 @@ Vue.prototype.$put = put;
Vue.prototype.$delete = del;
Vue.prototype.$CONSTANTS = constants;
Vue.prototype.$TOOLS = tools;
Vue.prototype.$toTop = toTop; //toTop置顶按钮方法
Vue.prototype.$bottomBoxWindow = bottomBoxWindow; //底部上滑框控制
Vue.prototype.$stringTimeParseToUnix = stringTimeParseToUnix;
Vue.prototype.$unixTimeParseToString = unixTimeParseToString;
@@ -127,6 +125,25 @@ Vue.mixin({
},
hasButton(code) {
return hasButton(this.$store.getters.buttonList, code);
},
toTop(wrap) {
let currentTop = wrap.scrollTop;
let interval = currentTop/10;
let intervalFunc = setInterval(function(){ //花200ms分10次回到顶部，模拟动画效果
if (currentTop == 0) {
clearInterval(intervalFunc);
} else {
currentTop = (currentTop - interval) < interval*0.5 ? 0 : currentTop - interval;
wrap.scrollTop = currentTop;
}
}, 20);
},
toTopBtnHandler(wrap) {
let vm = this;
wrap.addEventListener('scroll', bus.debounce(function() {
vm.tools.showTopBtn = wrap.scrollTop > 50;
vm.tools.tableHover = wrap.scrollTop > 50;
}, 100));
}
},
computed: {
@@ -149,7 +166,6 @@ Vue.use(hasPermission);
/*指令*/
Vue.directive('clickoutside', clickoutside);
Vue.directive('scrollBar', scrollBar);
window.resizing = false;
window.vm = new Vue({
el: '#app',
@@ -166,8 +182,8 @@ window.vm = new Vue({
export default vm;
/* 重写组件内容 */
const elUi = require("element-ui");
/*const elUi = require("element-ui");
const pl = require("pl-table");
//去掉el-table表头右侧的滚动条预留空间
elUi.Table.components.TableHeader.computed.hasGutter = () => {return false;};
pl.PlTable.components.ElTable.components.TableHeader.computed.hasGutter = () => {return false;};
pl.PlTable.components.ElTable.components.TableHeader.computed.hasGutter = () => {return false;};*/