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

NEZ-351 perf: 底部滑框、侧滑框重构、动画优化

Browse Source
This commit is contained in:
chenjinsong
2020-07-24 19:22:52 +08:00
parent f42698fff1
commit c9be557490
37 changed files with 1885 additions and 5461 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -13,7 +13,7 @@ li{
list-style-type:none ;
}
.content-box {
height: calc(100% - 53px);
height: calc(100% - 50px);
}
.nz-icon-gear:before {
@@ -643,20 +643,51 @@ li{
position: relative;
}
.main-list.main-list-with-sub {
height: calc(50% - 4px);
height: 50%;
}
.sub-box {
height: 50%;
position: relative;
}
.sub-list {
height: calc(100% - 9px);
position: relative;
position: absolute;
width: 100%;
z-index: 1;
top: 9px;
}
.main-and-sub-transition {
transition: .4s height;
}
.sub-list-resize {
.main-modal {
position: absolute;
height: 100%;
width: 100%;
display: none;
z-index: 100;
}
.resize-modal {
width: 100%;
opacity: 0.6;
background-color: #f5f9ff;
border: 1px solid #a7d0f7;
box-sizing: border-box;
position: fixed;
margin: 0 -6px;
cursor: ns-resize;
display: none;
z-index: 20;
vertical-align: bottom;
bottom: 0;
}
.sub-list-resize, .sub-list-resize-copy {
border-top: 1px solid #aaa;
background-color: #eaeaea;
height: 9px;
margin-left: -6px;
width: calc(100% + 12px);
position: absolute;
z-index: 1;
box-sizing: border-box;
user-select: none;
color: #5f6368;
@@ -665,6 +696,11 @@ li{
justify-content: center;
cursor: ns-resize;
}
.sub-list-resize-copy {
border-top: 1px solid #a7d0f7;
margin-left: 0;
width: calc(100% - 198px);
}
.sub-list-window-control {
display: flex;
align-items: center;
@@ -672,7 +708,7 @@ li{
position: absolute;
right: 0;
top: 5px;
z-index: 1;
z-index: 2;
}
.window-control-btn {
cursor: pointer;
@@ -848,8 +884,6 @@ li{
}
}
@keyframes slide-out-to-right {
/*from {right: 0px}
to {right: -550px}*/
from {
transform: scaleX(1);
transform-origin: right;
@@ -859,15 +893,6 @@ li{
transform-origin: right;
}
}
/*.right-box-enter-active{
transition: transform 0.4s;
}
.right-box-leave-active {
transition: transform 0.4s;
}
.right-box-enter, .right-box-leave-to {
transform: translateX(100%);
}*/
.right-box-enter-active, .right-box-leave-active {
transform: scaleX(1);
opacity: 1;
@@ -880,25 +905,6 @@ li{
opacity: 0;
transform: scaleX(0);
}
.right-box-580-enter-active{
transition: transform 0.4s;
}
.right-box-580-leave-active {
transition: transform 0.4s;
}
.right-box-580-enter,.right-box-580-leave-to {
transform: translateX(100%);
}
.right-box-840-enter-active{
transition: transform 0.4s;
}
.right-box-840-leave-active {
transition: transform 0.4s;
}
.right-box-840-enter,.right-box-840-leave-to {
transform: translateX(100%);
}
/* end--右弹框滑入滑出动画*/
/* begin--右子弹框动画*/
@@ -933,7 +939,7 @@ li{
/*此处自定义弹框尺寸，不同功能可能需要的尺寸不一样，需自行添加*/
.right-box-account, .right-box-prom, .right-box-alert-config, .right-box-project, .right-box-module, .right-box-cabinet,
.right-box-edit-endpoint, .right-box-panel, .right-box-dc, .right-box-model,.right-box-mib, .right-box-add-asset, .right-box-add-chart {
.right-box-edit-endpoint, .right-box-panel, .right-box-dc, .right-box-model, .right-box-mib, .right-box-asset, .right-box-add-chart {
width: 850px;
}
.right-box-chart .el-input__inner, .right-box-chart input {

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

@@ -41,7 +41,7 @@
</div>
<div class="content-item-value item-tip" :id="`value-${index}-${i}`">
<span v-if="key == 'state'">{{value == 1 ? $t('asset.createAssetTab.inStock') : $t('asset.createAssetTab.outStock')}}</span>
<span v-if="key == 'state'">{{value == 1 ? $t('asset.inStock') : $t('asset.outStock')}}</span>
<span v-else-if="key == 'alert'" class="as-button" :class="{'success': value <= 0, 'danger': value > 0}">{{value + ' ' + $t('overall.active')}}</span>
<div v-else-if="key == 'tags'" class="no-overflow" style="padding-bottom: 5px;">
<template v-if="value && value.length > 0">

13
nezha-fronted/src/components/charts/chart-list.vue
View File

@@ -590,7 +590,7 @@
this.dataList.push({
id: -9,
panelId: 0,
title: this.$t("asset.createAssetTab.assetInfo"),
title: this.$t("asset.assetInfo"),
span: 4,
height: 350,
type: "assetInfo",
@@ -765,6 +765,7 @@
return;
}
if(chartItem.type == 'projectInfo'){
chartItem.title = this.$t("project.chart.projectInfo");
this.getProjectInfoChartData(chartItem);
return;
}
@@ -1285,7 +1286,7 @@
},
getAssetInfoChartData(chartInfo){
let vm = this;
chartInfo.title = this.$t("asset.createAssetTab.assetInfo");
chartInfo.title = this.$t("asset.assetInfo");
let detail = [];
if(!this.isModel){
this.$refs['editChart'+chartInfo.id][0].showLoad();
@@ -1294,12 +1295,12 @@
if(response.code == 200){
response.data && function() {
response.data.Basic && detail.push({
title: vm.$t('asset.createAssetTab.basicTitle'),
title: vm.$t('asset.basicTitle'),
type: 'basic',
data: response.data.Basic
});
response.data.Attribute && detail.push({
title: vm.$t('asset.createAssetTab.featureTitle'),
title: vm.$t('asset.featureTitle'),
type: 'attribute',
data: response.data.Attribute
});
@@ -1309,7 +1310,7 @@
});
}else {
detail.push({
title: vm.$t('asset.createAssetTab.basicTitle'),
title: vm.$t('asset.basicTitle'),
type: 'basic',
data: {
sn: 'assetInfo Test',
@@ -1322,7 +1323,7 @@
}
});
detail.push({
title: vm.$t('asset.createAssetTab.featureTitle'),
title: vm.$t('asset.featureTitle'),
type: 'feature',
data: {
CPU: "Intel E500",

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

@@ -1,9 +1,11 @@
<template>
<div style="height: 50%">
<div class="sub-box">
<div class="resize-modal">
<div class="sub-list-resize-copy">一</div>
</div>
<!-- 副列表 -->
<div @mousedown="listResize" class="sub-list-resize" v-if="showSubList && !isFullScreen">一</div>
<div @mousedown="listResize" class="sub-list-resize" v-if="!isFullScreen">一</div>
<div class="sub-list">
<!--<div class="sub-list main-and-sub-transition" v-if="showSubList">-->
<!--窗口大小控制-->
<div class="sub-list-window-control">
<!--退出全屏-->
@@ -67,7 +69,6 @@
},
props: {
isFullScreen: false, //是否全屏
showSubList: Boolean, //是否显示
subResizeShow: Boolean, //resize时，用v-show="subResizeShow"控制页面内容是否显示
obj: Object, //关联的实体对象
from: String, //来自哪个页面
@@ -84,29 +85,42 @@
methods: {
exitFullScreen() {
this.$emit("exitFullScreen");
this.$nextTick(this.afterResize());
this.$nextTick(() => {this.afterResize()});
},
fullScreen() {
this.$emit("fullScreen");
this.$nextTick(this.afterResize());
this.$nextTick(() => {this.afterResize()});
},
closeSubList() {
this.$emit("closeSubList");
},
listResize(e) {
this.$emit('listResize', e);
this.$nextTick(this.afterResize());
this.$nextTick(() => {this.afterResize()});
},
changeTab(tab) {
this.$emit('update:targetTab', tab);
},
afterResize() {
let vm = this;
if (this.from == 'endpoint' && this.targetTab == 'endpointQuery') {
this.$refs.endpointQuery.tableReload();
}
if (this.targetTab == 'panel') {
setTimeout(() => {this.$refs.panelTab.$refs.dashboardScrollbar.update();}, 400);
//刷新滚动条
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.$refs.dashboardScrollbar.update();
clearInterval(intervalFunc);
}
}, 500);
}
}
}

2
nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTab.vue
View File

@@ -1,5 +1,5 @@
<template>
<span class="sub-list">
<span>
<div class="sub-top-tools">
<div class="sub-list-tabs">
<div class="sub-list-tab-title">

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

@@ -2,7 +2,7 @@
<span>
<div class="sub-top-tools">
<div class="sub-list-tabs">
<div class="sub-list-tab-title">{{$t("asset.createAssetTab.dcName")}}：{{obj.name}}</div><div
<div class="sub-list-tab-title">{{$t("asset.dcName")}}：{{obj.name}}</div><div
class="sub-list-tab" @click="changeTab('detail')">{{$t("overall.detail")}}</div><div
class="sub-list-tab sub-list-tab-active">{{$t("config.dc.cabinets")}}</div>
</div>
@@ -44,7 +44,7 @@
placement="top-start"
offset="-100"
trigger="hover"
:content="$t('overall.result.total') + '：' + scope.row.assetStat.total + '，' + $t('asset.createAssetTab.inStock') + '：' + scope.row.assetStat.inStock + '，' + $t('asset.createAssetTab.notInStock') + '：' + scope.row.assetStat.outStock">
:content="$t('overall.result.total') + '：' + scope.row.assetStat.total + '，' + $t('asset.inStock') + '：' + scope.row.assetStat.inStock + '，' + $t('asset.notInStock') + '：' + scope.row.assetStat.outStock">
<div slot="reference" class="dc-asset-states">
<span class="dc-asset-state dc-asset-state-total">{{scope.row.assetStat.total}}</span>
<span class="dc-asset-state dc-asset-state-in">{{scope.row.assetStat.inStock}}</span>
@@ -113,7 +113,7 @@
show:true
},
{
label:this.$t('asset.createAssetTab.uSize'),
label:this.$t('asset.uSize'),
prop:'uSize',
show:true
},
@@ -151,7 +151,7 @@
},
{
id:12,
name:this.$t('asset.createAssetTab.uSize'),
name:this.$t('asset.uSize'),
label:'uSize',
disabled: false
},

2
nezha-fronted/src/components/common/bottomBox/tabs/commonDetailTab.vue
View File

@@ -3,7 +3,7 @@
<div class="sub-top-tools">
<div class="sub-list-tabs">
<div class="sub-list-tab-title">
<template v-if="from == 'dc'">{{$t("asset.createAssetTab.dcName")}}：{{obj.name}}</template>
<template v-if="from == 'dc'">{{$t("asset.dcName")}}：{{obj.name}}</template>
<template v-else-if="from == 'account'">{{$t("config.account.account")}}：{{obj.username}}</template>
<template v-else-if="from == 'promServer'">ID：{{obj.id}}</template>
<template v-else-if="from == 'alertRule'">{{$t("alert.alertName")}}：{{obj.alertName}}</template>

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

@@ -107,8 +107,9 @@
</div>
<chart ref="endpointChart" :unit="chartUnit"></chart>
</el-dialog>
<transition name="right-box">
<chart-box v-if="rightBox.show" @close="rightBox.show = false" ref="addChartModal" :panel-data="panelData" @on-create-success="createSuccess" @reloadOnlyPanel="getPanelData" @reload="getPanelData" :show-panel="{}"></chart-box>
</transition>
</span>
</template>
@@ -219,7 +220,7 @@
});
},
tableReload() {
var table = this.$refs.endpointQueryTable;
let table = this.$refs.endpointQueryTable;
internal = setInterval(() => {
if (!window.resizing) {
table.setHeight();

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

@@ -66,8 +66,9 @@
</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>
<chart-box @close="rightBox.show = false" v-if="rightBox.show" ref="addChartModal" :showPanel="showPanel" :panel-data="panelData" @on-create-success="createSuccess" @on-delete-success="delChartOk"></chart-box>
<transition name="right-box">
<chart-box @close="closeRightBox" v-if="rightBox.show" ref="addChartModal" :showPanel="showPanel" :panel-data="panelData" @on-create-success="createSuccess" @on-delete-success="delChartOk"></chart-box>
</transition>
</div>
</template>
@@ -173,7 +174,7 @@
},
methods: {
//刷新
Refresh() {
refresh() {
this.getTableData(this.obj.id);
},
refreshTime(st, et) {
@@ -195,6 +196,12 @@
changeTab(tab) {
this.$emit('changeTab', tab);
},
closeRightBox(refresh) {
this.rightBox.show = false;
if (refresh) {
this.refresh();
}
},
scrollbarHeightHandler() {
setTimeout(() => {
let top = '';
@@ -407,7 +414,7 @@
if(response.code == 200){
this.$message({duration: 1000, type: 'success', message: this.$t("tip.syncSuccess")});
if(this.from == 'asset'){
this.Refresh();
this.refresh();
}
}else{
console.error(response.msg)

24
nezha-fronted/src/components/common/js/constants.js
View File

@@ -1,11 +1,19 @@
import i18n from "../i18n";
export const promServer = {
typeOption: [
{
key: 1,
value: 'Global'
}, {
key: 2,
value: 'Per-Datacenter'
}
typeData: [
{value: 1, label: 'Global'},
{value: 2, label: 'Per-Datacenter'}
],
};
export const asset = {
pingData: [
{value: 1, label: 'up'},
{value: 0, label: 'down'},
],
stateData: [
{value: 1, label: i18n.t('asset.inStock')},
{value: 2, label: i18n.t('asset.notInStock')}
],
}

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

@@ -185,77 +185,76 @@ export const bottomBoxWindow = {
// 鼠标拖动二级列表
listResize(vm, e) {
window.resizing = true;
let mainListDom = document.querySelector(".main-list-with-sub"); //主列表
let mainListDom = document.querySelector(".main-list"); //主列表
let subBoxDom = document.querySelector(".sub-box"); //副列表
let subListDom = document.querySelector(".sub-list"); //副列表
let contentRightDom = document.querySelector(".content-right"); //右侧内容区
let resizeBarHeight = 9; //resize横条高度
let minHeight = 15; //主、副列表最小高度限制为15
let contentHideHeight = 100; //主、副列表高度低于100时隐藏内容
let mainModalDom = document.querySelector(".main-modal"); //主列表遮罩
let resizeModalDom = document.querySelector(".resize-modal"); //副列表遮罩
let resizeBarDom = document.querySelector(".sub-list-resize"); //副列表遮罩
let contentRightHeight = contentRightDom.offsetHeight;//可视高度
//得到点击时俩dom的初始高度：
let mainInitialHeight = mainListDom.offsetHeight;
let subInitialHeight = subListDom.offsetHeight;
//点击时俩dom的初始高度：
let subInitialHeight = subListDom.offsetHeight+resizeBarHeight;
mainModalDom.style.display = "block";
resizeModalDom.style.height = `${subInitialHeight}px`;
resizeModalDom.style.display = "block";
resizeBarDom.style.display = "none";
let resizeModalEndHeight;
//点击时鼠标的Y轴位置
let mouseInitialY = e.clientY;
document.onmousemove = (e) => {
window.resizing = true;
mainListDom.classList.remove('main-and-sub-transition');
subListDom.classList.remove('main-and-sub-transition');
e.preventDefault();
//得到鼠标拖动的距离
let mouseMoveY = Math.abs(e.clientY - mouseInitialY);
let mouseMoveY = e.clientY-mouseInitialY;
resizeModalEndHeight = subInitialHeight-mouseMoveY;
resizeModalDom.style.height = `${resizeModalEndHeight}px`;
//往上方拖动：
if (e.clientY < mouseInitialY) {
vm.toTopBtnTop = mainInitialHeight-mouseMoveY+20+'px';
mainListDom.style.height = mainInitialHeight-mouseMoveY+'px';
subListDom.style.height = subInitialHeight+mouseMoveY+'px';
}
//往下方拖动：
if (e.clientY > mouseInitialY) {
vm.toTopBtnTop = mainInitialHeight+mouseMoveY+20+'px';
mainListDom.style.height = mainInitialHeight+mouseMoveY+'px';
subListDom.style.height = subInitialHeight-mouseMoveY+'px';
}
// 主、副列表最小高度限制为15px; 23是因为拖动区域有8的高度
if(parseInt(mainListDom.style.height) > contentRightHeight-23){
vm.toTopBtnTop = contentRightHeight+5+'px';
mainListDom.style.height = contentRightHeight-23+'px';
}
if(parseInt(mainListDom.style.height) <= 15){
vm.toTopBtnTop = '35px';
mainListDom.style.height = '15px';
}
if(parseInt(subListDom.style.height) > contentRightHeight-23){
subListDom.style.height = contentRightHeight-23+'px';
}
if(parseInt(subListDom.style.height) <= 15){
subListDom.style.height = '15px';
}
//当主副列表可视区域小于一定值时，不展示内容
if(parseInt(mainListDom.style.height) <= 100){
if (vm.mainResizeShow) {
vm.mainResizeShow = false;
}
} else {
if (!vm.mainResizeShow) {
vm.mainResizeShow = true;
}
}
if(parseInt(subListDom.style.height) <= 100){
if (vm.subResizeShow) {
vm.subResizeShow = false;
}
} else {
if (!vm.subResizeShow) {
vm.subResizeShow = true;
// 主、副列表最小高度限制
if(resizeModalEndHeight > contentRightHeight-minHeight){
resizeModalDom.style.height = `${contentRightHeight-minHeight}px`;
}
if(resizeModalEndHeight < minHeight){
resizeModalDom.style.height = `${minHeight}px`;
}
};
document.onmouseup = () => {
window.resizing = false;
mainListDom.classList.add('main-and-sub-transition');
subListDom.classList.add('main-and-sub-transition');
mainListDom.style.height = `${contentRightHeight-resizeModalEndHeight}px`;
subBoxDom.style.height = `${resizeModalEndHeight}px`;
subListDom.style.height = `${resizeModalEndHeight-resizeBarHeight}px`;
resizeModalDom.style.display = "none";
mainModalDom.style.display = "none";
resizeBarDom.style.display = "";
//当主副列表可视区域小于一定值时，不展示内容
if(contentRightHeight-resizeModalEndHeight <= contentHideHeight){
if (vm.bottomBox.mainResizeShow) {
vm.bottomBox.mainResizeShow = false;
}
} else {
if (!vm.bottomBox.mainResizeShow) {
vm.bottomBox.mainResizeShow = true;
}
}
if(resizeModalEndHeight < contentHideHeight){
if (vm.bottomBox.subResizeShow) {
vm.bottomBox.subResizeShow = false;
}
} else {
if (!vm.bottomBox.subResizeShow) {
vm.bottomBox.subResizeShow = true;
}
}
document.onmousemove = null;
document.onmouseup = null;
}
},
exitFullScreen(vm) {
@@ -263,17 +262,17 @@ export const bottomBoxWindow = {
let contentRightDom = document.querySelector(".content-right"); //右侧内容区
let contentRightHeight = contentRightDom.offsetHeight;//可视高度
//主列表
document.querySelector(".main-list-with-sub").style.height = vm.mainListHeight ? vm.mainListHeight + 'px' : 'calc(50% - 4px)';
document.querySelector(".main-list-with-sub").style.height = vm.bottomBox.mainListHeight ? vm.bottomBox.mainListHeight + 'px' : 'calc(50% - 4px)';
//副列表
document.querySelector(".sub-list").style.height = vm.mainListHeight ? contentRightHeight-vm.mainListHeight-9 + 'px' : 'calc(50% - 4px)';
document.querySelector(".sub-list").style.height = vm.bottomBox.mainListHeight ? contentRightHeight-vm.bottomBox.mainListHeight-9 + 'px' : 'calc(50% - 4px)';
setTimeout(() => {
vm.isFullScreen = false;
vm.bottomBox.isFullScreen = false;
if (document.querySelector(".main-list-with-sub").offsetHeight >= 100) {
vm.mainResizeShow = true;
}
if (document.querySelector(".sub-list").offsetHeight >= 100) {
vm.subResizeShow = true;
vm.bottomBox.subResizeShow = true;
}
window.resizing = false;
}, 210);
@@ -282,21 +281,21 @@ export const bottomBoxWindow = {
window.resizing = true;
let contentRightDom = document.querySelector(".content-right"); //右侧内容区
let contentRightHeight = contentRightDom.offsetHeight;//可视高度
vm.isFullScreen = true;
vm.bottomBox.isFullScreen = true;
//主列表
vm.mainListHeight = document.querySelector(".main-list-with-sub").offsetHeight; //记录全屏前主列表的高度
vm.bottomBox.mainListHeight = document.querySelector(".main-list-with-sub").offsetHeight; //记录全屏前主列表的高度
document.querySelector(".main-list-with-sub").style.height = '0';
vm.mainResizeShow = false;
vm.bottomBox.mainResizeShow = false;
//副列表
document.querySelector(".sub-list").style.height = contentRightHeight + 'px';
window.resizing = false;
},
showSubListWatch(vm, n) {
vm.inTransform = n;
vm.bottomBox.inTransform = n;
if (!n) {
vm.mainTableHeight = vm.$tableHeight.normal; //重置table的高度
vm.toTopBtnTop = vm.$tableHeight.toTopBtnTop;
vm.isFullScreen = false;
vm.tools.toTopBtnTop = vm.$tableHeight.toTopBtnTop;
vm.bottomBox.isFullScreen = false;
//移动分页组件的位置
let paginationTop = document.querySelector(".pagination-top");
let paginationBottom = document.querySelector(".pagination-bottom");
@@ -313,13 +312,13 @@ export const bottomBoxWindow = {
}, 210);
// 主列表恢复全屏
vm.mainResizeShow = vm.subResizeShow = true;
vm.bottomBox.mainResizeShow = vm.bottomBox.subResizeShow = true;
document.querySelector('.main-list').style.height = "";
//副列表高度清空
document.querySelector(".sub-list").style.height = '';
document.querySelector(".sub-list").style.height = "";
} else {
vm.mainTableHeight = vm.$tableHeight.openSubList.mainList; //重置table高度
vm.toTopBtnTop = vm.$tableHeight.openSubList.toTopBtnTop;
vm.tools.toTopBtnTop = vm.$tableHeight.openSubList.toTopBtnTop;
//移动分页组件的位置
let paginationTop = document.querySelector(".pagination-top");
paginationTop.appendChild(document.querySelector(".pagination-bottom").removeChild(document.querySelector(".pagination")));

54
nezha-fronted/src/components/common/language/en.js
View File

@@ -375,18 +375,50 @@ const en = {
asset:{
asset: 'Asset',
assets: 'Assets',//'资产'
EditAsset:'Edit asset',//'编辑资产'
editAsset: 'Edit asset',//'编辑资产'
createAsset: 'New asset',//'编辑资产'
host: "Host",
state: 'State',//'状态'
pingActive: 'active',//可ping通
assetStatPre:'Last reply:',
assetStatDown:'Never',
pingInactive:'inactive',
assetStatPre: 'Last reply:',
assetStatDown: 'Never',
remark:'Description',//'描述'
cli:'CLI account',//'CLI账号'
loginType:'Login type',//'登录类型'
password:'Password',//'密码'
ssh:'SSH key',//'SSH-Key'
protocol:"Protocol",
sshProtocol:"SSH",
telnetProtocol:"Telnet",
userTip:"User tip",//用户名提示
passwordTip:"Password tip",//密码提示
reloginPasswordTip:"Relogin tip",//密码提示
userPwdIntroduce:'Please specify a user name and password so that the telenet login process can automatically log in',
reLoginPwdIntroduce:'Please specify the password prompt so that the login process can run automatically',
account:'User name',//'用户名'
port:'Port',//'端口'
upload:'Upload',//'上传'
clickToUpload:'Upload',//'上传'
clickToCover:'Cover',//'覆盖'
sshKeyWasConfig:'SSH-KEY configured',//'SSH-KEY已配置'
exporter:'Exporter',
pingInactive: 'inactive',
assetInfo: 'Asset information',//'资产信息'
vendorModel: 'Vendor/Model',//'厂商/型号'
purchaseDate: 'Purchase date',//'购买日期'
location: 'Location',//'地区'
sn: "SN",
inStock: 'In stock',//'在库'
notInStock: 'Not in stock',//'出库'
assetType:'Asset type',//'资产类型'
principal:'Administrator',//'负责人'
tel:'Telephone', //'电话'
left:{
dataCenter:'Data center',
assetType:'Asset type',
vendor:'Vendor',
ping:'Ping',
},
createAssetTab:{
/*createAsset:{
title:'New asset',//'新增资产'
sn:'SN',//SN
host:'Host',//'Host'
@@ -394,7 +426,7 @@ const en = {
selectTip:'Please select',//'请选择'
inStock: 'In stock',//'在库'
notInStock: 'Not in stock',//'出库'
assetInfo:'Asset information',//'资产信息'
assetType:'Asset type',//'资产类型'
impi:{
title:'IPMI',
@@ -406,7 +438,7 @@ const en = {
addAssetType:'New asset type',//'新增资产类型'
existAssetType:'Existed asset type'//'已存在的资产类型'
},
vendorModel:'Vendor/Model',//'厂商/型号'
vendorTab:{
vendor:'Vendor/Model',//'厂商/型号'
vendorName:'New vendor',//'新厂商'
@@ -414,7 +446,7 @@ const en = {
modelName:'New model',//'新型号'
existModel:'Existed model'//'已有型号'
},
purchaseDate:'Purchase date',//'购买日期'
dataSelectTip:'Please select date',//'请选择日期'
dc:'DC',
dcName:'Data Center name',//'DC名称'
@@ -432,7 +464,7 @@ const en = {
principal:'Administrator',//'负责人'
tel:'Telephone'//'电话'
},
location:'Location',//'地区'
principal:'Administrator',//'负责人'
tel:'Telephone',//'电话'
cabinet: 'Cabinet',//'机柜'
@@ -473,7 +505,7 @@ const en = {
exporter:'Exporter',
basicTitle:'Basic info',
featureTitle:'Attribute',
},
},*/
editAssetTab:{
title:'New asset',//'新增资产'
sn:'SN',//SN

14
nezha-fronted/src/components/common/popBox/cabinetConfig.vue
View File

@@ -17,19 +17,19 @@
<div class="pop-title">{{title}}</div>
<!--表单内容-->
<el-form class="pop-item-wider" :model="cabinet" ref="cabinetForm" :rules="rules">
<el-form-item :label="this.$t('asset.createAssetTab.AddCabinetTab.name')" prop="name">
<el-form-item :label="this.$t('asset.name')" prop="name">
<el-input size='mini' v-model="cabinet.name" v-if="popBox.isEdit"/>
<div class="right-box-form-content-txt" v-if="!popBox.isEdit">{{cabinet.name}}</div>
</el-form-item>
<el-form-item :label="this.$t('asset.createAssetTab.AddCabinetTab.uSize')" prop="uSize">
<el-form-item :label="this.$t('asset.uSize')" prop="uSize">
<div :class="{'right-box-form-content-txt':!popBox.isEdit}" >{{cabinet.uSize}}</div>
<el-slider v-model.number="cabinet.uSize" :max="47" v-if="popBox.isEdit"></el-slider>
</el-form-item>
<el-form-item :label="this.$t('asset.createAssetTab.AddCabinetTab.remark')">
<el-form-item :label="this.$t('asset.remark')">
<el-input size='mini' v-model="cabinet.remark" type="textarea" :rows="2" v-if="popBox.isEdit"/>
<div class="right-box-form-content-txt" v-if="!popBox.isEdit">{{cabinet.remark}}</div>
</el-form-item>
<el-form-item :label="this.$t('asset.createAssetTab.AddCabinetTab.DC')" prop="idcId">
<el-form-item :label="this.$t('asset.DC')" prop="idcId">
<el-select size='mini' v-model="cabinet.idcId" clearable style="width: 100%;" placeholder="" v-if="popBox.isEdit">
<el-option v-for="item in idcDatas" :key="item.key" :label="item.name" :value="item.id">
<span>{{ item.name }}</span>
@@ -145,7 +145,7 @@ export default {
toEdit:function(u){
this.cabinet = Object.assign({}, u);
this.popBox.isEdit = true;
this.title = this.$t('asset.createAssetTab.editCabinetTab.title') + " ID：" + this.cabinet.id;
this.title = this.$t('asset.editCabinetTab.title') + " ID：" + this.cabinet.id;
this.popBox.show = true;
},
getIdcDatas:function(){
@@ -198,10 +198,10 @@ export default {
deep: true,
handler(n, o) {
if (n && n.id) {
this.title =this.popBox.isEdit? this.$t('asset.createAssetTab.editCabinetTab.title') + " ID：" + n.id : this.$t('asset.createAssetTab.cabinet') + " ID：" + n.id;
this.title =this.popBox.isEdit? this.$t('asset.editCabinetTab.title') + " ID：" + n.id : this.$t('asset.cabinet') + " ID：" + n.id;
this.cabinet=n;
} else {
this.title = this.$t('asset.createAssetTab.AddCabinetTab.title');
this.title = this.$t('asset.title');
this.resetData();
}
}

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

@@ -23,21 +23,21 @@
<div class="pop-item-wider">
<el-form class="right-box-form" :model="idc" label-position="left" label-width="150px" :rules="rules" ref="idcForm">
<el-form-item :label="$t('asset.createAssetTab.dcName')" prop="name">
<el-form-item :label="$t('asset.dcName')" prop="name">
<el-input type="text" placeholder="" v-model="idc.name" size="mini" maxlength="64" v-if="popBox.isEdit"></el-input>
<div class="right-box-form-content-txt" v-if="!popBox.isEdit">{{idc.name}}</div>
</el-form-item>
<el-form-item :label="$t('asset.createAssetTab.location')" prop="location">
<el-form-item :label="$t('asset.location')" prop="location">
<el-input type="text" placeholder="" v-model="idc.location" size="mini" v-if="popBox.isEdit"></el-input>
<div class="right-box-form-content-txt" v-if="!popBox.isEdit">{{idc.location}}</div>
</el-form-item>
<el-form-item :label="$t('asset.createAssetTab.principal')" prop="principal">
<el-form-item :label="$t('asset.principal')" prop="principal">
<el-select v-model="idc.principal" clearable size="mini" placeholder="" v-if="popBox.isEdit" popper-class="dc-dropdown">
<el-option v-for="item in principals" :key="item.id" :label="item.username" :value="item.userId"></el-option>
</el-select>
<div class="right-box-form-content-txt" v-if="!popBox.isEdit">{{idc.principal}}</div>
</el-form-item>
<el-form-item :label="$t('asset.createAssetTab.tel')" prop="tel" >
<el-form-item :label="$t('asset.tel')" prop="tel" >
<el-input type="text" placeholder="" v-model="idc.tel" size="mini" v-if="popBox.isEdit"></el-input>
<div class="right-box-form-content-txt" v-if="!popBox.isEdit">{{idc.tel}}</div>
</el-form-item>
@@ -164,7 +164,7 @@
toEdit:function(u){
this.idc = Object.assign({}, u);
this.popBox.isEdit = true;
this.title = this.$t('asset.createAssetTab.editIdcTab.title') + " ID：" + this.idc.id
this.title = this.$t('asset.editIdcTab.title') + " ID：" + this.idc.id
this.popBox.show = true;
},
show:function(isShow,isEdit){
@@ -212,11 +212,11 @@
deep: true,
handler(n, o) {
if (n && n.id) {
this.title = this.popBox.isEdit?this.$t('asset.createAssetTab.editIdcTab.title') + " ID：" + n.id:this.$t('asset.createAssetTab.dc') + " ID：" + n.id;
this.title = this.popBox.isEdit?this.$t('asset.editIdcTab.title') + " ID：" + n.id:this.$t('asset.dc') + " ID：" + n.id;
this.idc=n;
} else {
this.title = this.$t('asset.createAssetTab.AddIdcTab.title');
this.title = this.$t('asset.AddIdcTab.title');
this.resetData();
}
}

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

@@ -1,37 +1,25 @@
<template>
<transition name="right-box">
<div class="right-box right-box-alert-config" v-if="rightBox.show" v-clickoutside="clickos">
<div class="right-box right-box-alert-config" v-clickoutside="clickOutside">
<!-- begin--顶部按钮-->
<div class="right-box-top-btns">
<button type="button" v-if="alertRule.id != '' && rightBox.isEdit" id="alert-box-del" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light nz-btn-min-width-82">
<button type="button" v-if="alertRule.id" id="alert-box-del" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light">
<span class="right-box-top-btn-icon"><i class="el-icon-delete"></i></span>
<span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
</button>
<button v-if="!rightBox.isEdit && alertRule.buildIn != 1" type="button" @click="saveOrToEdit" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light nz-btn-min-width-82" id="alert-box-edit">
<span class="right-box-top-btn-icon"><i class="nz-icon nz-icon-edit"></i></span>
<span class="right-box-top-btn-txt">{{$t('overall.edit')}}</span>
</button>
</div>
<!-- end--顶部按钮-->
<!-- begin--标题-->
<div class="right-box-title">{{rightBox.title}}</div>
<div class="right-box-title">{{editAlertRule.id ? $t("alert.config.editAlertConfig") + " ID：" + editAlertRule.id : $t("alert.config.createAlertConfig")}}</div>
<!-- end--标题-->
<!-- begin--表单-->
<el-scrollbar class="right-box-form-box">
<el-form class="right-box-form right-box-form-left" :model="alertRule" label-position="right" label-width="120px" :rules="rules" ref="alertRuleForm">
<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">
<el-input v-if="rightBox.isEdit" placeholder="" maxlength="64" show-word-limit v-model="alertRule.alertName" size="small"></el-input>
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{alertRule.alertName}}</div>
<el-input placeholder="" maxlength="64" show-word-limit v-model="editAlertRule.alertName" size="small"></el-input>
</el-form-item>
<!--expr-->
<!--<el-form-item :label="$t('alert.config.expr')" prop="expr">
<el-input maxlength="512" rows="4" show-word-limit v-if="rightBox.isEdit" type="textarea" placeholder="" v-model="alertRule.expr" size="small"></el-input>
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{alertRule.expr}}</div>
</el-form-item>-->
<promql-input
ref="promql"
:expression-list.sync="expressions"
@@ -41,16 +29,14 @@
></promql-input>
<!--operator-->
<el-form-item :label="$t('alert.config.operator')" prop="operator" style="width: 400px;display: inline-block;">
<el-select v-if="rightBox.isEdit" popper-class="config-dropdown" v-model="alertRule.operator" placeholder="" size="small">
<el-select popper-class="config-dropdown" v-model="editAlertRule.operator" placeholder="" size="small">
<el-option :id="'operator-'+item.key" v-for="item in operators" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{alertRule.operator}}</div>
</el-form-item>
<!--threshold-->
<el-form-item :label="$t('alert.config.threshold')" prop="threshold" style="width: 415px;display: inline-block;">
<el-input v-if="rightBox.isEdit" type="text" placeholder="" v-model.number="alertRule.threshold" size="small">
<el-input type="text" placeholder="" v-model.number="editAlertRule.threshold" size="small">
</el-input>
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{alertRule.operator}}s</div>
</el-form-item>
<!--unit-->
<el-form-item :label="$t('alert.config.unit')" prop="unit">
@@ -58,20 +44,19 @@
:options="unitOptions"
:props="{ expandTrigger: 'click',emitPath:false }"
:show-all-levels="false"
v-model="alertRule.unit"
v-model="editAlertRule.unit"
>
</el-cascader>
</el-form-item>
<!--last-->
<el-form-item :label="$t('alert.config.for')" prop="last">
<el-input v-if="rightBox.isEdit" type="text" placeholder="" v-model.number="alertRule.last" size="small">
<el-input type="text" placeholder="" v-model.number="editAlertRule.last" size="small">
<template slot="append">{{$t('alert.config.second')}}</template>
</el-input>
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{alertRule.last}}s</div>
</el-form-item>
<!--severity-->
<el-form-item :label="$t('alert.severity')" prop="severity">
<el-select v-if="rightBox.isEdit" popper-class="config-dropdown" v-model="alertRule.severity" placeholder="" size="small">
<el-select popper-class="config-dropdown" v-model="editAlertRule.severity" placeholder="" size="small">
<el-option :id="'alert-severity-'+item.key" v-for="item in severityData" :key="item.key" :label="item.value" :value="item.key">
<template v-if="!item.isEdit">{{item.value}}</template>
<span class="config-dropdown-label-input" v-if="item.isEdit" @click.stop>
@@ -79,12 +64,11 @@
</span>
</el-option>
</el-select>
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{alertRule.severity}}</div>
</el-form-item>
<!--receiver-->
<el-form-item :label="$t('config.account.receiver')" prop="receiver">
<el-select
v-model.trim="alertRule.receiverShow"
v-model.trim="editAlertRule.receiverShow"
placeholder=""
multiple
filterable
@@ -102,13 +86,11 @@
</el-form-item>
<!--summary-->
<el-form-item :label="$t('alert.summary')" prop="summary">
<el-input maxlength="512" rows="3" type="textarea" show-word-limit v-if="rightBox.isEdit" placeholder="" v-model="alertRule.summary" size="small"></el-input>
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{alertRule.summary}}</div>
<el-input maxlength="512" rows="3" type="textarea" show-word-limit placeholder="" v-model="editAlertRule.summary" size="small"></el-input>
</el-form-item>
<!--description-->
<el-form-item :label="$t('alert.description')" prop="description">
<el-input maxlength="512" rows="4" show-word-limit v-if="rightBox.isEdit" type="textarea" placeholder="" v-model="alertRule.description" size="small"></el-input>
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{alertRule.description}}</div>
<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>
@@ -116,15 +98,14 @@
<!--底部按钮-->
<div class="right-box-bottom-btns">
<button @click="esc" id="alert-box-esc" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-100">
<button @click="esc(false)" id="alert-box-esc" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-100">
<span>{{$t('overall.cancel')}}</span>
</button>
<button v-if="rightBox.isEdit" @click="saveOrToEdit" id="alert-box-save" class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-100">
<button @click="save" id="alert-box-save" class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-100">
<span>{{$t('overall.save')}}</span>
</button>
</div>
</div>
</transition>
</template>
<script>
@@ -133,7 +114,7 @@
export default {
name: "alertConfigBox",
props: {
parentAlertRule: Object
alertRule: Object
},
components: {
'promql-input': promqlInput,
@@ -145,8 +126,7 @@
expressions: [''],
legends: [''],
alertRule: {id: '', receiverShow: [], receiver: ''},
rightBox: {show: false, isEdit: false, title: ''},
editAlertRule: {},
rules:{
alertName:[
{required:true,message:this.$t('validate.required'),trigger:'blur'}
@@ -174,13 +154,6 @@
{required:true,message:this.$t('validate.required'),trigger:'blur'},
{type:'number',message:this.$t('validate.number')}
],
// description:[
// {required:true,message:this.$t('validate.required'),trigger:'blur'},
// ],
// receiver:[
// {required:true,message:this.$t('validate.required'),trigger:'change'},
// ]
},
severityData: [
{
@@ -222,7 +195,7 @@
value:'<='
},
],
unitOptions:chartDataFormat.unitOptions(),
unitOptions: chartDataFormat.unitOptions(),
typeData: [
{
key: 1, //project
@@ -238,38 +211,34 @@
}
],
userData: [],
linkObjList: []
}
},
methods: {
clickos() {
this.rightBox.show = false;
clickOutside() {
this.esc(false);
},
show(show, isEdit) {
this.rightBox.show = show;
this.rightBox.isEdit = isEdit;
esc(refresh) {
this.$emit("close", refresh);
},
save: function() {
this.alertRule.expr = this.expressions[0];
save() {
this.editAlertRule.expr = this.expressions[0];
this.$refs.alertRuleForm.validate((valid) => {
if (valid) {
this.alertRule.receiver = this.alertRule.receiverShow.join(",");
if (this.alertRule.id) {
this.$put('alert/rule', this.alertRule).then(response => {
this.editAlertRule.receiver = this.editAlertRule.receiverShow.join(",");
if (this.editAlertRule.id) {
this.$put('alert/rule', this.editAlertRule).then(response => {
if (response.code === 200) {
this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
this.$emit('reload');
this.rightBox.show = false;
this.esc(true);
} else {
this.$message.error(response.msg);
}
});
} else {
this.$post('alert/rule', this.alertRule).then(response => {
this.$post('alert/rule', this.editAlertRule).then(response => {
if (response.code === 200) {
this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
this.$emit('reload');
this.rightBox.show = false;
this.esc(true);
} else {
this.$message.error(response.msg);
}
@@ -280,42 +249,22 @@
}
})
},
del: function() {
del() {
this.$confirm(this.$t("tip.confirmDelete"), {
confirmButtonText: this.$t("tip.yes"),
cancelButtonText: this.$t("tip.no"),
type: 'warning'
}).then(() => {
this.$delete("alert/rule?ids=" + this.alertRule.id).then(response => {
this.$delete("alert/rule?ids=" + this.editAlertRule.id).then(response => {
if (response.code === 200) {
this.$message({type: 'success', message: this.$t("tip.deleteSuccess")});
this.$emit('reload');
this.rightBox.show = false;
this.esc(true);
} else {
this.$message.error(response.msg);
}
})
});
},
saveOrToEdit: function() {
if (!this.rightBox.isEdit) {
this.rightBox.isEdit = true;
this.rightBox.title = this.$t("alert.config.editAlertConfig") + " ID：" + this.alertRule.id;
} else {
this.save();
}
},
esc: function() {
this.rightBox.show = false;
},
getProjectList() {
this.$get('project', {pageNo: 1, pageSize: -1}).then(response => {
if (response.code == 200) {
this.linkObjList = response.data.list;
}
})
},
getUserList() {
this.$get('sys/user/list', {pageNo: 1, pageSize: -1}).then(response => {
if (response.code == 200) {
@@ -323,40 +272,19 @@
}
})
},
getModuleList() {
this.$get('module', {pageNo: 1, pageSize: -1}).then(response => {
if (response.code == 200) {
this.linkObjList = response.data.list;
}
})
},
getAssetList() {
this.$get('asset', {pageNo: 1, pageSize: -1}).then(response => {
if (response.code == 200) {
this.linkObjList = response.data.list;
}
})
},
},
created() {
mounted() {
this.getUserList();
this.rightBox.title = this.$t("alert.config.createAlertConfig");
},
watch: {
parentAlertRule: {
alertRule: {
deep: true,
immediate: true,
handler(n, o) {
this.alertRule = n;
if (this.alertRule.id) {
if (this.alertRule.type == 1) {
this.getProjectList();
} else if (this.alertRule.type == 2) {
this.getModuleList();
} else if (this.alertRule.type == 3) {
this.getAssetList();
}
this.expressions = [this.alertRule.expr];
console.info(n)
this.editAlertRule = JSON.parse(JSON.stringify(n));
if (this.editAlertRule.id) {
this.expressions = [this.editAlertRule.expr];
this.$nextTick(() => {
this.expressions.forEach((ex, index) => {
if (ex) {
@@ -365,24 +293,11 @@
});
});
}
if (this.rightBox.show) {
if (this.rightBox.isEdit && this.alertRule.id) {
this.rightBox.title = this.$t("alert.config.editAlertConfig") + " ID：" + this.alertRule.id;
} else if (this.rightBox.isEdit && !this.alertRule.id) {
this.rightBox.title = this.$t("alert.config.createAlertConfig");
} else if (!this.rightBox.isEdit && this.alertRule.id) {
this.rightBox.title = this.$t("alert.config.alertConfig") + " ID：" + this.alertRule.id;
}
}
}
}
}
}
</script>
<style scoped>
</style>
<style>
.unit-popper-class{
z-index: 2052 !important;

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

File diff suppressed because it is too large Load Diff

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

@@ -21,19 +21,19 @@
<!-- begin--表单-->
<el-scrollbar class="right-box-form-box">
<el-form class="right-box-form right-box-form-left" label-width="120px" label-position="right" :model="cabinet" ref="cabinetForm" :rules="rules">
<el-form-item :label="this.$t('asset.createAssetTab.AddCabinetTab.name')" prop="name">
<el-form-item :label="$t('asset.name')" prop="name">
<el-input size='mini' v-model="cabinet.name" v-if="rightBox.isEdit"/>
<div class="right-box-form-content-txt" v-if="!rightBox.isEdit">{{cabinet.name}}</div>
</el-form-item>
<el-form-item :label="this.$t('asset.createAssetTab.AddCabinetTab.DC')" prop="idcId">
<el-form-item :label="$t('asset.DC')" prop="idcId">
<el-input size='mini' v-model="curIdc.name" v-if="rightBox.isEdit" disabled/>
<div class="right-box-form-content-txt" v-if="!rightBox.isEdit">{{idc?idc.name:''}}</div>
</el-form-item>
<el-form-item :label="this.$t('asset.createAssetTab.AddCabinetTab.uSize')" prop="uSize">
<el-form-item :label="$t('asset.uSize')" prop="uSize">
<el-input v-model.number="cabinet.uSize" :max="47" ></el-input>
<!-- <el-slider v-model.number="cabinet.uSize" :max="47" v-if="rightBox.isEdit"></el-slider>-->
</el-form-item>
<el-form-item :label="this.$t('config.dc.remark')">
<el-form-item :label="$t('config.dc.remark')">
<el-input size='mini' v-model="cabinet.remark" type="textarea" :rows="2" v-if="rightBox.isEdit"/>
<div class="right-box-form-content-txt" v-if="!rightBox.isEdit">{{cabinet.remark}}</div>
</el-form-item>
@@ -196,7 +196,7 @@
deep:true,
immediate:true,
handler:function(n,o){
this.rightBox.title=n&&n.id?this.$t('asset.createAssetTab.editCabinetTab.title') + " ID：" + n.id : this.$t('asset.createAssetTab.cabinet');
this.rightBox.title = n && n.id ? this.$t('asset.title') + " ID：" + n.id : this.$t('asset.cabinet');
}
}
}

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

@@ -10,7 +10,7 @@
<!-- end--顶部按钮-->
<!-- begin--标题-->
<div class="right-box-title">{{editDc.id ? ($t("asset.createAssetTab.editIdcTab.title") + " ID：" + editDc.id) : $t("asset.createAssetTab.AddIdcTab.title")}}</div>
<div class="right-box-title">{{editDc.id ? ($t("asset.editIdcTab.title") + " ID：" + editDc.id) : $t("asset.AddIdcTab.title")}}</div>
<!-- end--标题-->
<!-- begin--表单-->
@@ -19,13 +19,13 @@
<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>
</el-form-item>
<el-form-item :label='$t("asset.createAssetTab.location")' prop="location">
<el-form-item :label='$t("asset.location")' prop="location">
<el-input placeholder="" v-model="editDc.location" size="small"></el-input>
</el-form-item>
<el-form-item :label='$t("asset.createAssetTab.tel")' prop="tel">
<el-form-item :label='$t("asset.tel")' prop="tel">
<el-input placeholder="" v-model="editDc.tel" size="small"></el-input>
</el-form-item>
<el-form-item :label='$t("asset.createAssetTab.principal")' prop="principal">
<el-form-item :label='$t("asset.principal")' prop="principal">
<el-select value-key="id" popper-class="config-dropdown" v-model="editDc.principal" placeholder="" size="small">
<el-option @click.native="" v-for="item in userData" :key="item.userId" :label="item.username" :value="item.userId" :id="'dc-principal-op-'+item.userId">
<span>{{item.username}}</span>

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

@@ -1,35 +1,23 @@
<template>
<transition name="right-box">
<div class="right-box right-box-mib" v-if="rightBox.show" v-clickoutside="clickos" >
<div class="right-box right-box-mib" v-clickoutside="clickOutside" >
<!-- begin--顶部按钮-->
<div class="right-box-top-btns">
<button id="mib-del" type="button" v-if="currentMib.id != '' && rightBox.isEdit" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light nz-btn-min-width-82">
<button id="mib-del" type="button" v-if="editMib.id" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light">
<span class="right-box-top-btn-icon"><i class="el-icon-delete"></i></span>
<span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
</button>
<button v-if="!rightBox.isEdit" id="mib-save" type="button" @click="saveOrToEdit" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light nz-btn-min-width-82">
<span class="right-box-top-btn-icon"><i class="nz-icon nz-icon-edit"></i></span>
<span class="right-box-top-btn-txt">{{$t('overall.edit')}}</span>
</button>
</div>
<!-- end--顶部按钮-->
<!-- begin--标题-->
<div class="right-box-title">{{rightBox.title}}</div>
<div class="right-box-title">{{editMib.id ? ($t("config.mib.editMib") + " ID：" + editMib.id) : $t("config.mib.createMib")}}</div>
<!-- end--标题-->
<!-- begin--表单-->
<el-scrollbar class="right-box-form-box">
<el-form class="right-box-form right-box-form-left" :model="currentMib" label-position="right" label-width="120px" :rules="rules" ref="mibForm">
<!--mib名称-->
<!--<el-form-item :label='$t("overall.name")' prop="name">
<el-input v-if="rightBox.isEdit" placeholder="" maxlength="64" show-word-limit v-model.trim="currentMib.name" size="small"></el-input>
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{currentMib.name}}</div>
</el-form-item>-->
<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
v-if="rightBox.isEdit"
:options="modelOptions"
:props="modelProps"
:show-all-levels="false"
@@ -41,51 +29,34 @@
size="small"
class="right-box-form-row"
clearable></el-cascader>
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">
<span v-for="(n,i) in selectedModels" :key="n.name+'-'+n.id+'-'+i" >
<template v-if="i < selectedModels.length-1">
{{n.name}}，
</template>
<template v-else>{{n.name}}</template>
</span>
</div>
</el-form-item>
<el-form-item :label="$t('config.mib.remark')" prop="remark">
<el-input maxlength="512" rows="4" show-word-limit v-if="rightBox.isEdit" type="textarea" placeholder="" v-model.trim="currentMib.remark" size="small"></el-input>
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{currentMib.remark}}</div>
<el-input maxlength="512" rows="4" show-word-limit type="textarea" placeholder="" v-model.trim="editMib.remark" size="small"></el-input>
</el-form-item>
<el-form-item :label="$t('config.mib.mibFiles')" prop="file" :rules="[{validator:checkMibFile,trigger:'change'}]" :class="{'add-required':!currentMib.id}">
<el-upload drag v-if="rightBox.isEdit" :multiple="false" action="" :file-list="uploadFileList" :on-change="uploadChange" :auto-upload="false" accept="" :on-remove="afterClearFile" ref="mibFileUpload" class="mib-upload right-box-form-row">
<el-form-item :label="$t('config.mib.mibFiles')" prop="file" :rules="[{validator:checkMibFile,trigger:'change'}]" :class="{'add-required':!editMib.id}">
<el-upload drag :multiple="false" action="" :file-list="uploadFileList" :on-change="uploadChange" :auto-upload="false" accept="" :on-remove="afterClearFile" ref="mibFileUpload" class="mib-upload right-box-form-row">
<div slot="tip" class="el-upload__tip" >
<!-- <span v-if="!currentMib.fileName">{{$t('config.mib.uploadTip')}}</span>
<span v-else>{{currentMib.fileName}}</span>-->
<span v-if="currentMib.fileName">{{currentMib.fileName}}</span>
<span v-if="editMib.fileName">{{editMib.fileName}}</span>
<span v-if="uploadErrorMsg" style="color: #F56C6C"><br>{{uploadErrorMsg}}</span>
</div>
<i class="el-icon-upload"></i>
<div class="el-upload__text">{{$t('overall.dragFileTip')}}，{{$t('overall.or')}}&nbsp;<em>{{$t('overall.clickUpload')}}</em></div>
<!-- <button type="button" class="nz-btn nz-btn-size-normal nz-btn-style-normal">
<span class="top-tool-btn-txt" >{{$t('overall.upload')}}</span>
</button>-->
</el-upload>
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{currentMib.fileName}}</div>
</el-form-item>
</el-form>
</el-scrollbar>
<!--底部按钮-->
<div class="right-box-bottom-btns">
<button @click="esc" id="model-box-esc" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-100">
<button @click="esc(false)" id="model-box-esc" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-100">
<span>{{$t('overall.cancel')}}</span>
</button>
<button v-if="rightBox.isEdit" @click="saveOrToEdit" id="model-box-save" class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-100">
<button @click="save" id="model-box-save" class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-100">
<span>{{$t('overall.save')}}</span>
</button>
</div>
</div>
</transition>
</template>
<script>
@@ -97,18 +68,7 @@
data() {
let $temp=this;
return {
currentMib: {
id: null,
name: '',
remark:'',
models:'',
file:null,
},
rightBox: {
show: false,
title: '',
isEdit: false
},
editMib: {},
rules: {
name: [
{required: true, message: this.$t('validate.required'), trigger: 'blur'}
@@ -116,7 +76,7 @@
},
checkMibFile : (rule, value, callback) => {
setTimeout(() => {
if(!$temp.currentMib.id){
if(!$temp.editMib.id){
if(!$temp.uploadFile || !$temp.uploadFile.raw){
$temp.uploadErrorMsg=$temp.$t('config.mib.requiredMibFile');
return callback(new Error(' '));
@@ -132,7 +92,7 @@
},
checkModels:(rule, value, callback)=>{
setTimeout(() => {
if(!$temp.currentMib.models||$temp.currentMib.models == ''){
if(!$temp.editMib.models||$temp.editMib.models == ''){
// return callback(new Error($temp.$t('validate.required')))
return callback();
}else{
@@ -147,21 +107,14 @@
uploadFile:null,
uploadErrorMsg:null,
}
},
created:function(){
},
methods: {
show(show, isEdit) {
this.rightBox.show = show;
this.rightBox.isEdit = isEdit;
},
clickos() {
this.rightBox.show = false;
clickOutside() {
this.esc(false);
},
/*关闭弹框*/
esc() {
this.rightBox.show = false;
esc(refresh) {
this.$emit("close", refresh);
},
queryModelInfos:function(){
this.$get('model?pageSize=-1').then(response=>{
@@ -205,21 +158,20 @@
for(let node of selectedNodes){
models+=node+',';
}
this.currentMib.models=models.substr(0,models.length-1);
this.editMib.models=models.substr(0,models.length-1);
}else{
this.currentMib.models='';
this.editMib.models='';
}
this.$refs.mibForm.validateField('models')
},
uploadChange:function(file,fileList){
console.log('fileChange')
uploadChange(file,fileList) {
if (fileList.length > 0) {
this.uploadFileList = [fileList[fileList.length - 1]]
this.uploadFileList = [fileList[fileList.length - 1]];
this.uploadFile = this.uploadFileList[0];
}
this.validateFile();
},
afterClearFile:function(file, fileList){
afterClearFile(file, fileList) {
this.uploadFileList = [];
this.uploadFile = null;
this.validateFile();
@@ -232,27 +184,25 @@
this.$refs.mibForm.validate((valid) => {
if (valid) {
let form = new FormData();
form.append('name',this.currentMib.name);
form.append('remark',this.currentMib.remark);
form.append('models',this.currentMib.models);
form.append('file',this.uploadFile&&this.uploadFile.raw?this.uploadFile.raw:null);
if(!this.currentMib.id){
this.$post('/mib',form,{'Content-Type': 'multipart/form-data'}).then(response=>{
if(response.code==200 && response.msg=='success'){
form.append('name',this.editMib.name);
form.append('remark',this.editMib.remark);
form.append('models',this.editMib.models);
form.append('file', this.uploadFile && this.uploadFile.raw ? this.uploadFile.raw : null);
if(!this.editMib.id){
this.$post('/mib', form, {'Content-Type': 'multipart/form-data'}).then(response=>{
if(response.code==200 && response.msg == 'success'){
this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
this.esc();
this.$emit('after');
this.esc(true);
}else{
this.$message.error(response.msg);
}
})
}else{
form.append('id',this.currentMib.id);
form.append('id',this.editMib.id);
this.$put('/mib',form,{'Content-Type': 'multipart/form-data'}).then(response=>{
if(response.code==200 && response.msg=='success'){
this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
this.esc();
this.$emit('after');
this.esc(true);
}else{
this.$message.error(response.msg);
}
@@ -261,27 +211,6 @@
}
})
},
saveOrToEdit: function() {
if (!this.rightBox.isEdit) {
this.rightBox.isEdit = true;
this.rightBox.title = this.$t("config.mib.editMib") + " ID：" + this.currentMib.id;
} else {
this.save();
}
},
clearData:function(){
this.currentMib={
id: null,
name: '',
remark:'',
file:'',
models:'',
}
this.uploadFile=null;
this.uploadFileList=[];
this.selectedModels=[];
this.uploadErrorMsg=null;
},
/*删除*/
del() {
this.$confirm(this.$t("tip.confirmDelete"), {
@@ -289,11 +218,10 @@
cancelButtonText: this.$t("tip.no"),
type: 'warning'
}).then(() => {
this.$delete("mib?ids=" + this.currentMib.id).then(response => {
this.$delete("mib?ids=" + this.editMib.id).then(response => {
if (response.code === 200) {
this.$message({duration: 1000, type: 'success', message: this.$t("tip.deleteSuccess")});
this.rightBox.show = false;
this.$emit("reload");
this.esc(true);
} else {
this.$message.error(response.msg);
}
@@ -309,18 +237,13 @@
watch: {
mib: {
immediate: true,
deep:true,
deep: true,
handler(n, o) {
this.currentMib = Object.assign({},n);
if(this.currentMib.models){
this.selectedModels=this.currentMib.models.split(',');
this.editMib = JSON.parse(JSON.stringify(n));
if(this.editMib.models){
this.selectedModels = this.editMib.models.split(',');
}else{
this.selectedModels=[];
}
if (n && n.id) {
this.rightBox.title =this.rightBox.isEdit? this.$t("config.mib.editMib") + " ID：" + n.id : this.$t("config.mib.mib") + " ID：" + n.id ;
} else {
this.rightBox.title = this.$t("config.mib.createMib");
this.selectedModels = [];
}
}
},

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

@@ -65,7 +65,7 @@
</template>
</el-autocomplete>
</el-form-item>
<el-form-item :label="this.$t('asset.createAssetTab.AddCabinetTab.uSize')" prop="usize">
<el-form-item :label="$t('asset.uSize')" prop="usize">
<el-input v-model.number="editModel.usize" :max="47" size="small"></el-input>
</el-form-item>
</el-form>
@@ -73,7 +73,7 @@
<!--底部按钮-->
<div class="right-box-bottom-btns">
<button @click="esc" id="model-box-esc" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-100">
<button @click="esc(false)" id="model-box-esc" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-100">
<span>{{$t('overall.cancel')}}</span>
</button>
<button @click="save" id="model-box-save" class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-100">
@@ -84,8 +84,6 @@
</template>
<script>
import {noSpecialChar} from "../js/validate";
export default {
name: "modelBox",
props: {

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

@@ -40,7 +40,7 @@
<!--type-->
<el-form-item :label="$t('config.promServer.type')" prop="type">
<el-select popper-class="config-dropdown" v-model="editPromServer.type" placeholder="" size="small">
<el-option v-for="item in $CONSTANTS.promServer.typeOption" :key="item.key" :label="item.value" :value="item.key" :id="'prom-edit-type-op-'+item.key"></el-option>
<el-option v-for="item in $CONSTANTS.promServer.typeData" :key="item.value" :label="item.label" :value="item.value" :id="'prom-edit-type-op-'+item.value"></el-option>
</el-select>
</el-form-item>
</el-form>

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

@@ -42,10 +42,10 @@
assetState: [ //资产入库/出库状态
{
value: 1,
label: i18n.t('asset.createAssetTab.inStock')
label: i18n.t('asset.inStock')
}, {
value: 2,
label: i18n.t('asset.createAssetTab.notInStock')
label: i18n.t('asset.notInStock')
}
],
pingStatus:[

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

@@ -16,13 +16,14 @@
</div>
</div>
<div slot="content-right" class="slot-content">
<div class="main-list main-and-sub-transition" :class="{'main-list-with-sub': showSubList}">
<div class="top-tools" v-show="mainResizeShow">
<div class="top-tool-main-right" :class="{'top-tool-main-right-to-left': showSubList}">
<div class="main-list" :class="{'main-list-with-sub': bottomBox.showSubList}">
<div class="main-modal"></div>
<div class="top-tools" v-show="bottomBox.mainResizeShow">
<div class="top-tool-main-right" :class="{'top-tool-main-right-to-left': bottomBox.showSubList}">
<div class="top-tool-search float-right">
<search-input :searchMsg="searchMsg" @search="search" :inTransform="inTransform"></search-input>
<search-input :searchMsg="searchMsg" @search="search" :bottomBox.inTransform="bottomBox.inTransform"></search-input>
</div>
<button id="alert-add" @click="toAdd" :title="$t('overall.createAlertRule')"
<button id="alert-add" @click="add" :title="$t('overall.createAlertRule')"
class="nz-btn nz-btn-size-normal nz-btn-style-light margin-l-20">
<i class="nz-icon-create-square nz-icon"></i>
</button>
@@ -33,19 +34,19 @@
class="nz-table"
:data="tableData"
border
v-show="mainResizeShow"
v-show="bottomBox.mainResizeShow"
ref="alertRuleTable"
tooltip-effect="light"
:height="mainTableHeight"
v-scrollBar:el-table="'large'"
v-loading="loading"
v-loading="tools.loading"
:cell-class-name="messageStyle"
style="width: 100%;"
@sort-change="tableDataSort"
>
<el-table-column
:resizable="false"
v-for="(item, index) in tablelable"
v-for="(item, index) in tools.tablelable"
v-if="item.show"
:width="item.width"
:key="`col-${index}`"
@@ -57,8 +58,8 @@
>
<template slot-scope="scope" :column="item">
<div v-if="item.prop == 'option'" class="content-right-options">
<span :title="$t('overall.view')" @click="detail(scope.row)" class="content-right-option" :id="'alert-detail-'+scope.row.id"><i class="nz-icon nz-icon-view"></i></span>
<span v-if="scope.row.buildIn != 1" :title="$t('overall.edit')" @click="toEdit(scope.row)" class="content-right-option" :id="'alert-edit-'+scope.row.id"><i class="nz-icon nz-icon-edit"></i></span>
<span :title="$t('overall.view')" @click="detail(scope.row)" class="content-right-option" :id="'alert-detail-'+scope.row.id"><i class="nz-icon nz-icon-view"></i></span>&nbsp;
<span v-if="scope.row.buildIn != 1" :title="$t('overall.edit')" @click="edit(scope.row)" class="content-right-option" :id="'alert-edit-'+scope.row.id"><i class="nz-icon nz-icon-edit"></i></span>&nbsp;
<span :title="$t('overall.delete')" @click="del(scope.row)" class="content-right-option" :id="'alert-del-'+scope.row.id"><i class="el-icon-delete"></i></span>
</div>
<span v-else-if="item.prop == 'severity'">
@@ -86,29 +87,29 @@
</span>
</template>
<template v-slot="scope">
<button v-if="scope.$index == 0" class="to-top" :style="{top: toTopBtnTop}" :class="{'to-top-is-hover': tableHover}" v-show="showTopBtn && mainResizeShow" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
<button v-if="scope.$index == 0" class="to-top" :style="{top: tools.toTopBtnTop}" :class="{'to-top-is-hover': tools.tableHover}" v-show="tools.showTopBtn && bottomBox.mainResizeShow" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
</template>
</el-table-column>
</el-table>
<div class="pagination-bottom" v-show="!showSubList">
<div class="pagination-bottom" v-show="!bottomBox.showSubList">
<Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
</div>
</div>
<bottom-box v-if="showSubList" :show-sub-list="showSubList" :subResizeShow="subResizeShow" :obj="alertRuleForMessage" :isFullScreen="isFullScreen" :from="'alertRule'" :targetTab.sync="targetTab" :detail="ruleDetail"
@closeSubList="showSubList = false" @fullScreen="fullScreen" @exitFullScreen="exitFullScreen" @listResize="listResize" ></bottom-box>
<transition name="el-zoom-in-bottom">
<bottom-box v-if="bottomBox.showSubList" :sub-resize-show="bottomBox.subResizeShow" :obj="bottomBox.alertRule" :is-full-screen="bottomBox.isFullScreen" :from="'alertRule'" :target-tab.sync="bottomBox.targetTab" :detail="bottomBox.ruleDetail"
@closeSubList="bottomBox.showSubList = false" @fullScreen="fullScreen" @exitFullScreen="exitFullScreen" @listResize="listResize" ></bottom-box>
</transition>
</div>
</left-menu>
<alert-config-box :parentAlertRule="alertRule" @reload="getTableData" ref="alertConfigBox"></alert-config-box>
<project-box :project="viewProjectData" ref="projectBox" @reload="getTableData"></project-box>
<module-box :module="viewModuleData" @reload="getTableData" ref="moduleBox"></module-box>
<!--<asset-box :edit-unit-show='viewAsset' @refreshData="getTableData" @sendStateData="tabControl" v-if="assetBoxShow"
ref="assetEditUnit"></asset-box>-->
<transition name="right-box">
<alert-config-box v-if="rightBox.show" :alert-rule="alertRule" @close="closeRightBox" ref="alertConfigBox"></alert-config-box>
</transition>
<element-set
v-if="showElementSet"
v-if="tools.showElementSet"
@close="elementsetHide"
v-clickoutside="elementsetHide"
:table-title="tableTitle"
:dropCol="dropCol"
:tools.dropCol="tools.dropCol"
@tablelable="tablelabelEmit"
ref="elementset"
></element-set>
@@ -116,32 +117,54 @@
</template>
<script>
var vm;
import bus from '../../../libs/bus';
import chartDataFormat from "../../charts/chartDataFormat";
export default {
name: "alert-config",
data() {
vm = this;
return {
loading: false,
/*二级列表相关*/
//侧滑
rightBox: {
show: false,
},
/*二级页面相关*/
bottomBox: {
ruleDetail: {},
targetTab: '', //展示二级列表中的哪个页签
showElementSet: false, //控制自定义列的弹框
inTransform: false, //搜索框相关，搜索条件下拉框是否在transform里
mainResizeShow: true, //dom高度改变时部分内容是否展示
alertRule: {},
mainResizeShow: true, //dom高度改变时是否展示|隐藏
subResizeShow: true,
isFullScreen: false,
showSubList: false, //是否展示二级列表
alertRuleForMessage: {}, //传给alertMessage上滑框的对象
isFullScreen: false, //全屏状态
showSubList: false, //是否显示二级列表
targetTab: '', //显示二级列表中的哪个页签
inTransform: false, //搜索框相关，搜索条件下拉框是否在transform里
},
/*工具参数*/
tools: {
loading: false, //是否显示table加载动画
toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性
tableHover: false, //控制滚动条和top按钮同时出现
showElementSet: false, //自定义列弹框是否显示
showTopBtn: false, //显示To top按钮
tablelable: [], //从缓存中加载的table header
dropCol: [], //自定义列工具的数据
},
mainTableHeight: this.$tableHeight.normal, //主列表table高度
tableId: 'alertRuleTable', //需要分页的table的id，用于记录每页数量
showTopBtn: false,
mainTableHeight: this.$tableHeight.normal, //主列表table高度
alertRule: {},
blankAlertRule: {
id: '',
alertName: '',
linkObject: {id: '', name: ''},
expr: '',
unit:2,
operator: '>',
last: 60,
severity: 'medium',
summary: '',
description: '',
},
searchMsg: { //给搜索框子组件传递的信息
zheze_none: true,
searchLabelList: [{
@@ -173,25 +196,6 @@
searchLabel: { //搜索参数
},
alertRule: {
id: '',
alertName: '',
type: '',
linkObject: {id: '', name: ''},
linkId: '',
operator:'>',
threshold:'',
unit:2,
expr: '',
last: 60,
severity: '',
summary: '',
description: '',
receivers: '',
},
tablelable: [],
dropCol: [],
pageObj: {
pageNo: 1,
pageSize: 50,
@@ -240,16 +244,7 @@
label: this.$t("alert.config.expr"),
prop: 'expr',
show: true,
}, /*{
label: this.$t("alert.list.type"),
prop: 'type',
show: true,
}, {
label: this.$t("alert.config.link"),
prop: 'linkObject',
show: true,
width: 140
}, */{
label: this.$t("alert.config.operator"),
prop: 'operator',
show: true,
@@ -297,12 +292,12 @@
},
methods: {
queryMessage(alertRule) {
this.alertRuleForMessage = alertRule;
this.showSubList = true;
this.targetTab = 'alertMessage';
this.bottomBox.alertRule = alertRule;
this.bottomBox.showSubList = true;
this.bottomBox.targetTab = 'alertMessage';
},
elementsetShow(s, e) {
this.showElementSet = true;
this.tools.showElementSet = true;
this.$nextTick(() => {
var eventfixed = {
shezhi: 0,
@@ -310,7 +305,7 @@
};
eventfixed[s] = 1;
e.preventDefault();
this.$store.commit('setHeaderTable', this.tablelable);
this.$store.commit('setHeaderTable', this.tools.tablelable);
this.$store.commit('setEventfixed', eventfixed);
const h = document.documentElement.clientHeight;
const w = document.documentElement.clientWidth;
@@ -327,20 +322,25 @@
},
elementsetHide() {
//悬浮点击空白隐藏
//this.$refs.elementset.elementsetHide();
this.showElementSet = false;
this.tools.showElementSet = false;
},
tablelabelEmit(data) {
//获取子组件传过来的参数
this.$store.commit('setHeaderTable', data);
this.tablelable = data;
this.dropCol = data;
this.tools.tablelable = data;
this.tools.dropCol = data;
},
toEdit: function (u) {
this.alertRule = Object.assign({}, u);
this.$refs.alertConfigBox.show(true, true);
edit(u) {
this.alertRule = JSON.parse(JSON.stringify(u));
this.rightBox.show = true;
},
del: function (u) {
closeRightBox(refresh) {
this.rightBox.show = false;
if (refresh) {
this.getTableData();
}
},
del(u) {
this.$confirm(this.$t("tip.confirmDelete"), {
confirmButtonText: this.$t("tip.yes"),
cancelButtonText: this.$t("tip.no"),
@@ -356,22 +356,25 @@
})
});
},
formatThreshold:function(value,unit){
let unitMethod=chartDataFormat.getUnit(unit)
if(unitMethod&&value){
return unitMethod.compute(value,null,2);
}else{
formatThreshold(value,unit) {
let unitMethod = chartDataFormat.getUnit(unit);
if (unitMethod&&value) {
return unitMethod.compute(value, null, 2);
} else {
return value
}
},
toAdd: function () {
this.cleanAlertRule();
this.$refs.alertConfigBox.show(true, true);
add() {
this.alertRule = this.newAlertRule();
this.rightBox.show = true;
},
detail: function (u) {
this.alertRuleForMessage = Object.assign({}, u);
this.targetTab = "panel";
this.showSubList = true;
newAlertRule() {
return JSON.parse(JSON.stringify(this.blankAlertRule));
},
detail(u) {
this.bottomBox.alertRule = JSON.parse(JSON.stringify(u));
this.bottomBox.targetTab = "panel";
this.bottomBox.showSubList = true;
},
messageStyle(e) {
if (e.column.label == 'Message' || e.column.label == this.$t('alert.message')) {
@@ -383,12 +386,12 @@
}
return '';
},
getTableData: function () {
getTableData() {
this.$set(this.searchLabel, "pageNo", this.pageObj.pageNo);
this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize);
this.loading = true;
this.tools.loading = true;
this.$get('alert/rule', this.searchLabel).then(response => {
this.loading = false;
this.tools.loading = false;
if (response.code == 200) {
response.data.list.forEach(item => {
let temp = [];
@@ -404,20 +407,6 @@
}
})
},
cleanAlertRule: function () {
this.alertRule = {
id: '',
alertName: '',
linkObject: {id: '', name: ''},
expr: '',
unit:2,
operator: '>',
last: 60,
severity: 'medium',
summary: '',
description: '',
}
},
jumpTo(data, id) {
bus.$emit("menu-change", data);
this.$router.push({
@@ -436,7 +425,7 @@
localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val);
this.getTableData();
},
search: function (searchObj) {
search(searchObj) {
let orderBy='';
if(this.searchLabel.orderBy){
orderBy=this.searchLabel.orderBy
@@ -455,17 +444,20 @@
},
// 全屏
fullScreen() {
let vm = this;
this.$bottomBoxWindow.fullScreen(vm);
},
// 退出全屏
exitFullScreen() {
let vm = this;
this.$bottomBoxWindow.exitFullScreen(vm);
},
// 鼠标拖动二级列表
listResize(e) {
let vm = this;
this.$bottomBoxWindow.listResize(vm, e);
},
viewAlertType: function (type, typeObj) {
viewAlertType(type, typeObj) {
this.closeViews();
switch (type) {
case 1:
@@ -510,9 +502,6 @@
alertName: obj.alertName,
expr: obj.expr
};
/*detail.push({label: "ID", value: obj.id});
detail.push({label: this.$t("alert.alertName"), value: obj.alertName});
detail.push({label: this.$t("alert.config.expr"), value: obj.expr});*/
let type = "";
for (let i = 0; i < this.typeData.length; i++) {
if (obj.type == this.typeData[i].key) {
@@ -521,7 +510,6 @@
}
}
detail.type = type;
//detail.push({label: this.$t("alert.list.type"), value: type});
let link = "";
if (obj.type == 1 || obj.type == 2) {
link = obj.linkObject.name;
@@ -530,17 +518,12 @@
}
detail.link = link;
detail.last = obj.last;
/*detail.push({label: this.$t("alert.config.link"), value: link});
detail.push({label: this.$t("alert.config.for"), value: obj.last});*/
let severity = this.severityData.filter((item, index) => {
return obj.severity == item.key;
})[0].value;
detail.severity = severity;
detail.alertNum = obj.alertNum;
detail.description = obj.description;
/*detail.push({label: this.$t("alert.severity"), value: severity});
detail.push({label: this.$t("alert.description"), value: obj.description});
detail.push({label: this.$t("alert.message"), value: obj.alertNum});*/
return detail;
},
//是否需要排序
@@ -578,13 +561,14 @@
},
},
watch: {
showSubList(n) {
'bottomBox.showSubList': function(n) {
let vm = this;
this.$bottomBoxWindow.showSubListWatch(vm, n);
},
alertRuleForMessage: {
'bottomBox.alertRule': {
deep: true,
handler(n) {
this.ruleDetail = this.convertToDetail(n);
this.bottomBox.ruleDetail = this.convertToDetail(n);
}
},
},
@@ -605,23 +589,23 @@
if (el._ps_) {
el.addEventListener("ps-scroll-y", () => {
if (el._ps_.scrollbarYTop > 50) {
this.showTopBtn = true;
this.tools.showTopBtn = true;
} else {
this.showTopBtn = false;
this.tools.showTopBtn = false;
}
});
el.addEventListener("mouseenter", () => {
this.tableHover = true;
this.tools.tableHover = true;
});
el.addEventListener("mouseleave", () => {
this.tableHover = false;
this.tools.tableHover = false;
});
}
});
this.tablelable = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
this.tools.tablelable = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
: this.tableTitle;
this.dropCol = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
this.tools.dropCol = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
: this.tableTitle;
}

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

@@ -45,7 +45,6 @@
:on-change="handleChange"
:auto-upload="false"
>
<!-- <el-button size="small" type="primary">{{$t('asset.createAssetTab.clickToUpload')}}</el-button>-->
<i class="el-icon-upload"></i>
<div class="el-upload__text">{{$t('overall.dragFileTip')}}，{{$t('overall.or')}}&nbsp;<em>{{$t('overall.clickUpload')}}</em></div>
</el-upload>

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

@@ -1,50 +1,50 @@
<template>
<el-form label-width="120px" :model="account" :rules="rules" ref="accountForm" style="margin-top: 20px;">
<template v-if="account.protocol == 'SSH'">
<el-form-item :label="$t('asset.createAssetTab.account')" prop="params.user">
<el-form-item :label="$t('asset.account')" prop="params.user">
<el-input autocomplete="new-password" size="small" v-model="account.params.user"/>
</el-form-item>
<el-form-item :label="$t('asset.createAssetTab.loginType')" prop="params.method">
<el-form-item :label="$t('asset.loginType')" prop="params.method">
<el-radio-group v-model="account.params.method" size="small">
<el-radio-button label="password">{{$t('asset.createAssetTab.password')}}</el-radio-button>
<el-radio-button label="key">{{$t('asset.createAssetTab.ssh')}}</el-radio-button>
<el-radio-button label="password">{{$t('asset.password')}}</el-radio-button>
<el-radio-button label="key">{{$t('asset.ssh')}}</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item :label="$t('asset.createAssetTab.password')" v-if="account.params.method == 'password'">
<el-form-item :label="$t('asset.password')" v-if="account.params.method == 'password'">
<el-input autocomplete="new-password" size="small" type="password" v-model="account.params.password"/>
</el-form-item>
<el-form-item :label="$t('asset.createAssetTab.ssh')" v-if="account.params.method == 'key'" prop="file">
<el-form-item :label="$t('asset.ssh')" v-if="account.params.method == 'key'" prop="file">
<el-input rows="4" type="textarea" placeholder="" v-model="account.params.key" size="small"></el-input>
</el-form-item>
<el-form-item :label="$t('asset.createAssetTab.password')" v-if="account.params.method == 'key'">
<el-form-item :label="$t('asset.password')" v-if="account.params.method == 'key'">
<el-input autocomplete="new-password" size="small" type="password" v-model="account.params.passwordKey"/>
</el-form-item>
<el-form-item :label="$t('asset.createAssetTab.port')" prop="port" style="display: inline-block">
<el-form-item :label="$t('asset.port')" prop="port" style="display: inline-block">
<el-input size="small" v-model.number="account.port"/>
</el-form-item>
</template>
<template v-if="account.protocol == 'TELNET'">
<el-form-item :label="$t('asset.createAssetTab.account')" prop="params.user">
<el-form-item :label="$t('asset.account')" prop="params.user">
<el-input autocomplete="new-password" size="small" v-model="account.params.user"/>
</el-form-item>
<el-form-item :label="$t('asset.createAssetTab.userTip')" prop="userTip">
<el-form-item :label="$t('asset.userTip')" prop="userTip">
<el-input autocomplete="new-password" size="small" v-model="account.params.userTip"/>
</el-form-item>
<el-form-item :label="$t('asset.createAssetTab.password')">
<el-form-item :label="$t('asset.password')">
<el-input autocomplete="new-password" size="small" type="password" v-model="account.params.password"/>
</el-form-item>
<el-form-item :label="this.$t('asset.createAssetTab.passwordTip')">
<el-form-item :label="this.$t('asset.passwordTip')">
<el-input size="small" v-model="account.params.passwordTip"/>
</el-form-item>
<el-form-item :label="$t('asset.createAssetTab.reloginPasswordTip')" prop="reloginTip">
<el-form-item :label="$t('asset.reloginPasswordTip')" prop="reloginTip">
<el-input size="small" v-model="account.params.reloginTip"/>
</el-form-item>
<el-form-item :label="$t('asset.createAssetTab.port')" prop="port" style="display: inline-block">
<el-form-item :label="$t('asset.port')" prop="port" style="display: inline-block">
<el-input size="small" v-model.number="account.port"/>
</el-form-item>
</template>
<template v-if="account.protocol == 'SNMP'">
<el-form-item :label="$t('asset.createAssetTab.port')" prop="port">
<el-form-item :label="$t('asset.port')" prop="port">
<el-input size="small" v-model.number="account.port"/>
</el-form-item>
<el-form-item :label="$t('project.module.community')" prop="params.community">
@@ -61,7 +61,7 @@
</el-form-item>
<!--SNMP V3 setting-->
<template v-if="account.params.version == 3">
<el-form-item :label="$t('asset.createAssetTab.account')" prop="params.user">
<el-form-item :label="$t('asset.account')" prop="params.user">
<el-input size="small" v-model="account.params.user"/>
</el-form-item>
<el-form-item :label="$t('project.module.securityLevel')" prop="params.securityLevel">

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

@@ -7,9 +7,9 @@
<el-scrollbar ref="leftScrollbar" style="height: 100%">
<el-collapse v-model="activeType" class="left-menu-bg">
<el-collapse-item name="dataCenter" :title="$t('asset.left.dataCenter')">
<el-checkbox-group v-model="checkList" size="small" @change="changeCheckBox">
<el-checkbox class="sidebar-info-item" :class="{'sidebar-info-item-active': indOf(checkList, item.id)}"
v-for="(item,key) in checkListData" :key="key" :label=item.id>
<el-checkbox-group v-model="dcCheckList" size="small" @change="changeCheckBox">
<el-checkbox class="sidebar-info-item" :class="{'sidebar-info-item-active': indOf(dcCheckList, item.id)}"
v-for="(item,key) in dcData" :key="key" :label=item.id>
<div class="sidebar-info-item-txt">
<el-popover v-if="item.name.length > 14" trigger="hover" placement="top-start" :content="item.name" >
<span slot="reference">{{item.name}}</span>
@@ -22,9 +22,9 @@
</el-checkbox>
</el-checkbox-group>
</el-collapse-item>
<el-collapse-item name="assetType" :title="$t('asset.left.assetType')">
<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 assetTypeCheckListData" :key="key" :label=item.id>
<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>
<div class="sidebar-info-item-txt">
<el-popover v-if="item.name.length > 14" trigger="hover" placement="top-start" :content="item.name" >
<span slot="reference">{{item.name}}</span>
@@ -39,7 +39,7 @@
</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 vendorCheckListData" :key="key" :label=item.id>
<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>
<div class="sidebar-info-item-txt">
<el-popover v-if="item.name.length > 14" trigger="hover" placement="top-start" :content="item.name" >
<span slot="reference">{{item.name}}</span>
@@ -54,12 +54,12 @@
</el-collapse-item>
<el-collapse-item name="ping" :title="$t('asset.left.ping')">
<el-checkbox-group v-model="pingCheckList" size="small" @change="changePingCheckBox">
<el-checkbox class="sidebar-info-item" :class="{'sidebar-info-item-active': indOf(pingCheckList, item.value)}" v-for="(item,key) in pingCheckListData" :key="key" :label=item.value>
<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">
<div class="sidebar-info-item-txt">
<el-popover v-if="item.label.length > 16" trigger="hover" placement="top-start" :content="item.label" >
<span slot="reference">{{item.label}}</span>
<el-popover v-if="item.value.length > 16" trigger="hover" placement="top-start" :content="item.value" >
<span slot="reference">{{item.value}}</span>
</el-popover>
<span v-else>{{item.label}}</span>
<span v-else>{{item.value}}</span>
</div>
<el-tooltip :content="''+item.total" placement="top" effect="light" :disabled="item.total<99">
<el-badge class="mark" :value="item.total" :max="99"/>
@@ -72,19 +72,20 @@
</div>
</div>
<div slot="content-right" class="slot-content">
<div class="main-list" :class="{'main-list-with-sub': showSubList}">
<div class="top-tools" v-show="mainResizeShow">
<div class="top-tool-main-right" :class="{'top-tool-main-right-to-left': showSubList}">
<div class="top-tool-search margin-r-20"><search-input :searchMsg="searchMsg" @search="search" :inTransform="inTransform"></search-input></div>
<div class="main-list" :class="{'main-list-with-sub': bottomBox.showSubList}">
<div class="main-modal"></div>
<div class="top-tools" v-show="bottomBox.mainResizeShow">
<div class="top-tool-main-right" :class="{'top-tool-main-right-to-left': bottomBox.showSubList}">
<div class="top-tool-search margin-r-20"><search-input :searchMsg="searchMsg" @search="search" :inTransform="bottomBox.inTransform"></search-input></div>
<export-excel
export-file-name="asset"
export-url="/asset/export"
import-url="/asset/import"
:params="searchLabel"
@afterImport="getAssetData"
@afterImport="getTableData"
>
<template slot="optionZone">
<button @click.stop="tagShow('showAdd')" :title="$t('overall.createAsset')" class="nz-btn nz-btn-size-normal nz-btn-style-light" id="asset-create-asset">
<button @click.stop="add" :title="$t('overall.createAsset')" class="nz-btn nz-btn-size-normal nz-btn-style-light" id="asset-create-asset">
<i class="nz-icon nz-icon-create-square"></i></button>
</template>
</export-excel>
@@ -98,9 +99,9 @@
style="width: 100%;"
:data="tableData"
v-scrollBar:el-table="'large'"
v-show="mainResizeShow"
v-show="bottomBox.mainResizeShow"
border
v-loading="loading"
v-loading="tools.loading"
tooltip-effect="light"
ref="assetTable"
:cell-class-name="messageStyle"
@@ -108,7 +109,7 @@
>
<el-table-column
:resizable="false"
v-for="(item, index) in tablelable"
v-for="(item, index) in tools.tablelable"
v-if="item.show"
:width="item.width"
:key="`col_${index}`"
@@ -132,7 +133,7 @@
<span>{{scope.row.host}}</span>
</div>
<div v-if="item.prop=='state'">
<span>{{scope.row.state==1 ? $t('asset.createAssetTab.inStock') : $t('asset.createAssetTab.notInStock')}}</span>
<span>{{scope.row.state==1 ? $t('asset.inStock') : $t('asset.notInStock')}}</span>
</div>
<div v-if="item.prop == 'pingStatus'">
<el-popover
@@ -161,7 +162,7 @@
<span >{{scope.row.idc.name}}</span>
</div>
<template v-if="item.prop=='cabinet'">
<span v-if="scope.row.cabinet&&scope.row.cabinet!='--'">{{returnData(scope.row.cabinet).name}}</span>
<span v-if="scope.row.cabinet && scope.row.cabinet != '--'">{{returnData(scope.row.cabinet).name}}</span>
<span v-else >{{returnData(scope.row.cabinet)}}</span>
</template>
<div v-if="item.prop=='model'">
@@ -180,15 +181,15 @@
<span>{{scope.row.idc.tel}}</span>
</div>
<template v-if="item.prop == 'option'">
<span :title="$t('overall.view')" @click.stop="tagShow('showView',scope.row)" class="content-right-option" :id="'asset-detail-'+scope.row.id"><i
<span :title="$t('overall.view')" @click.stop="detail(scope.row)" class="content-right-option" :id="'asset-detail-'+scope.row.id"><i
class="el-icon-view"></i>
</span>
&nbsp;
<span :title="$t('overall.edit')" @click.stop="tagShow('showEdit',scope.row)" class="content-right-option" :id="'asset-edit-'+scope.row.id"><i
<span :title="$t('overall.edit')" @click.stop="edit(scope.row)" class="content-right-option" :id="'asset-edit-'+scope.row.id"><i
class="nz-icon nz-icon-edit"></i>
</span>
&nbsp;
<span :title="$t('overall.delete')" @click.stop="deleteData('asset',scope.row.id)" class="content-right-option" :id="'asset-del-'+scope.row.id"><i
<span :title="$t('overall.delete')" @click.stop="del(scope.row)" class="content-right-option" :id="'asset-del-'+scope.row.id"><i
class="el-icon-delete"></i>
</span>
&nbsp;
@@ -211,37 +212,37 @@
</span>
</template>
<template v-slot="scope">
<button v-if="scope.$index == 0" class="to-top" :style="{top: toTopBtnTop}" :class="{'to-top-is-hover': tableHover}" v-show="showTopBtn && mainResizeShow" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
<button v-if="scope.$index == 0" class="to-top" :style="{top: tools.toTopBtnTop}" :class="{'to-top-is-hover': tools.tableHover}" v-show="tools.showTopBtn && bottomBox.mainResizeShow" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
</template>
</el-table-column>
</el-table>
<div class="pagination-bottom" v-show="!showSubList">
<div class="pagination-bottom" v-show="!bottomBox.showSubList">
<Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
</div>
</div>
<transition name="el-zoom-in-bottom">
<bottom-box v-if="showSubList" :show-sub-list="showSubList" :subResizeShow="subResizeShow" :obj="alertMsgAsset" :isFullScreen="isFullScreen" :from="'asset'" :targetTab.sync="targetTab" :detail="assetDetail"
@reload="getAssetData"
@closeSubList="showSubList = false"
<bottom-box v-if="bottomBox.showSubList" :sub-resize-show="bottomBox.subResizeShow" :obj="bottomBox.asset" :isFullScreen="bottomBox.isFullScreen" :from="'asset'" :targetTab.sync="bottomBox.targetTab" :detail="bottomBox.assetDetail"
@reload="getTableData"
@closeSubList="bottomBox.showSubList = false"
@fullScreen="fullScreen"
@exitFullScreen="exitFullScreen"
@listResize="listResize" ></bottom-box>
</transition>
</div>
</left-menu>
<asset-box :edit-unit-show='editUnitShow' @refreshData="flushData" @sendStateData="tabControl" v-if="rightBox.show"
ref="assetEditUnit"></asset-box>
<transition name="right-box">
<asset-box v-if="rightBox.show" :asset="asset" @refresh="flushData" ref="assetBox" @close="closeRightBox"></asset-box>
</transition>
<element-set
v-if="showElementSet"
v-if="tools.showElementSet"
@close="elementsetHide"
v-clickoutside="elementsetHide"
:drop-col="dropCol"
:drop-col="tools.dropCol"
:table-title="tableTitle"
@tablelable="tablelabelEmit"
ref="elementset"
></element-set>
<module-box :module="module" @reload="getAssetData" ref="moduleBox"></module-box>
</div>
</template>
@@ -249,7 +250,6 @@
import bus from "../../../libs/bus";
import exportXLSX from "../../common/exportXLSX";
import endpointStatusPop from "./endpointStatusPop";
var vm;
export default {
name: "asset",
components:{
@@ -257,24 +257,54 @@
'endpoint-status-pop':endpointStatusPop,
},
data() {
vm = this;
return {
loading: false,
//侧滑
rightBox: {
show: false,
},
/*二级页面相关*/
bottomBox: {
assetDetail: {}, //asset详情
alertMsgAsset: {}, //告警信息对应的asset对象
showElementSet: false, //控制自定义列的弹框
inTransform: false, //搜索框相关，搜索条件下拉框是否在transform里
mainResizeShow: true, //dom高度改变时部分内容是否展示
asset: {}, //告警信息对应的asset对象
mainResizeShow: true, //dom高度改变时是否展示|隐藏
subResizeShow: true,
isFullScreen: false,
mainTableHeight: this.$tableHeight.normal, //主列表table高度
showSubList: false, //是否展示二级列表
targetTab: '', //展示二级列表中的哪个页签
isFullScreen: false, //全屏状态
showSubList: false, //是否显示二级列表
targetTab: '', //显示二级列表中的哪个页签
inTransform: false, //搜索框相关，搜索条件下拉框是否在transform里
},
mainTableHeight: this.$tableHeight.normal, //主列表table高度
/*工具参数*/
tools: {
loading: false, //是否显示table加载动画
toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性
tableHover: false, //控制滚动条和top按钮同时出现
showElementSet: false, //自定义列弹框是否显示
showTopBtn: false, //显示To top按钮
tablelable: [], //从缓存中加载的table header
dropCol: [], //自定义列工具的数据
},
asset: {},
blankAsset: {
id: '',
sn: '',
host: '',
state: '',
purchaseDate: '',
idcId: '',
cabinetId: '',
modelId: '',
model: {type: {code: ""}},
assetType: '',
impi:{
host:'',
port:'',
},
tags: [],
accounts: [],
},
tableId: 'assetTable', //需要分页的table的id，用于记录每页数量
searchMsg: { //给搜索框子组件传递的信息
zheze_none: true,
@@ -298,7 +328,7 @@
disabled: false
},{
id: 22,
name: this.$t("asset.createAssetTab.state"),
name: this.$t("asset.state"),
type: 'select',
label: 'assetState',
disabled: false
@@ -310,15 +340,10 @@
disabled: false
}],
},
showTopBtn: false,
searchLabel: {}, //搜索参数
activeType:'dataCenter',
checkList: [],
assetTypeCheckList:[],
vendorCheckList:[],
pingCheckList:[],
tablelable: [],
dropCol: [],
activeType: 'dataCenter',
tableTitle: [
{
label: this.$t("asset.tableTitle.host"),
@@ -396,15 +421,16 @@
fixed:'right'
}],
tableData: [],
checkListData: [],
assetTypeCheckListData:[],
vendorCheckListData:[],
pingCheckListData:[],
IDCData: '',
IDCOptionData: [],
cabinetData: '',
cabinetOptionData: [],
input: '',
dcData: [],
dcCheckList: [],
assetTypeData: [],
assetTypeCheckList: [],
vendorData: [],
vendorCheckList: [],
pingData: this.$CONSTANTS.asset.pingData,
pingCheckList: [],
pageObj: {
id: '',
pageNo: 1,
@@ -413,46 +439,9 @@
idcId: '',
idcIds: ''
},
tabShow: false,
tabView: true,
tagType: 'add',
module: {},
form: {
name: ''
},
rightBox: { //弹出框相关
show: false,
isEdit: false, //false查看，true编辑
title: ''
},
assetType: '',
idcSelectedData: {
id: '',
name: '',
location: '',
principal: '',
tel: ''
},
addIdcData: {
id: '',
name: '',
popName: '',
location: '',
principal: '',
tel: ''
},
idcUserData: [],
modelCount: '',
isResourceShow: 0,
unitDisable: '',
modelClickData: '',
obj: null,
editUnitShow: false,
flag: false,
checkAllFlag: false,
checkAllHandler: false,
assetClick: false,
assetPingSwitch:localStorage.getItem('nz-sys-asset-ping-switch'),
assetPingSwitch: localStorage.getItem('nz-sys-asset-ping-switch'),
}
},
computed: {
@@ -467,7 +456,7 @@
getData: {
handler(newVal) {
if (newVal.type == 1) {
this.activeType='dataCenter'
this.activeType = 'dataCenter';
this.checkList = newVal.selectedData;
this.assetClick = false;
}
@@ -478,12 +467,14 @@
getFlushData: {
handler(newVal, oldVal) {
if (newVal === true) {
this.getLeftMenuList();
this.getAssetData()
this.getDcData();
this.getTableData()
/*this.getLeftMenuList();
this.getAssetData()*/
}
}
},
checkList(n, o) {
dcCheckList(n, o) {
setTimeout(()=>{
if (n.length > 0 ) {
this.pageObj.idcIds = n.join(',');
@@ -492,30 +483,37 @@
}
if (this.assetClick) {
this.$store.state.assetData = {selectedData: n, step: this.$store.state.assetData.step+1, type: 0};
} else {
this.getSingleAsset();
}
this.getAssetData();
this.getTableData();
}, 50);
},
showSubList(n) {
'bottomBox.showSubList': function(n) {
let vm = this;
this.$bottomBoxWindow.showSubListWatch(vm, n);
},
alertMsgAsset: {
'bottomBox.asset': {
deep: true,
handler(n) {
this.assetDetail = this.convertToDetail(n);
if (n.id) {
this.bottomBox.assetDetail = this.convertToDetail(n);
if (n.model.id) {
n.modelId = n.model.id;
}
}
}
},
},
methods: {
fullScreen() {
let vm = this;
this.$bottomBoxWindow.fullScreen(vm);
},
exitFullScreen() {
let vm = this;
this.$bottomBoxWindow.exitFullScreen(vm);
},
listResize(e) {
let vm = this;
this.$bottomBoxWindow.listResize(vm, e);
},
dcSelectAll(val) { //DC全选
@@ -528,29 +526,10 @@
}
this.$store.commit('assetAllIdChange',this.checkListData)
}
this.checkAllHandler = false;
}
},
openModuleBox(module) {
if (module.param) {
try {
let tempObj = JSON.parse(module.param);
this.$set(module, 'paramObj', []);
for (let k in tempObj) {
module.paramObj.push({key: k, value: tempObj[k]});
}
} catch (err) {
console.info(module, err);
}
}
this.module = module;
this.$refs.moduleBox.show(true);
},
getAssetModuleList(id) {
this.$refs['moduleListPop' + id][0].getModuleList();
},
elementsetShow(s, e) {
this.showElementSet = true;
this.tools.showElementSet = true;
this.$nextTick(() => {
var eventfixed = {
shezhi: 0,
@@ -558,7 +537,7 @@
};
eventfixed[s] = 1;
e.preventDefault();
this.$store.commit('setHeaderTable', this.tablelable);
this.$store.commit('setHeaderTable', this.tools.tablelable);
this.$store.commit('setEventfixed', eventfixed);
const h = document.documentElement.clientHeight;
const w = document.documentElement.clientWidth;
@@ -575,12 +554,12 @@
},
elementsetHide() {
//悬浮点击空白隐藏
this.$refs.elementset.elementsetHide();
this.tools.showElementSet = false;
},
tablelabelEmit(data) {
//获取子组件传过来的参数
this.$store.commit('setHeaderTable', data);
this.tablelable = data;
this.tools.tablelable = data;
},
cli([id,host,account]){
const consoleParam = {
@@ -588,54 +567,64 @@
host: host,
accountId: account.id,
port: account.port,
}
};
this.$store.commit('addConsole', consoleParam);
//this.$refs.webSsh.show(id,host,accountId,port);
},
jumpToAlertMsg(asset) {
this.targetTab = 'alertMessage';
this.alertMsgAsset = JSON.parse(JSON.stringify(asset));
this.showSubList = true;
/*this.$nextTick(() => {
this.$store.commit("assetForAlertListChange", this.$store.state.assetForAlertList+1);
});*/
this.bottomBox.targetTab = 'alertMessage';
this.bottomBox.asset = JSON.parse(JSON.stringify(asset));
this.bottomBox.showSubList = true;
},
getAssetData(data, flushRightBoxDc) {
getTableData() {
this.searchLabel = Object.assign(this.searchLabel, this.pageObj);
this.loading = true;
this.tools.loading = true;
this.$get('asset', this.searchLabel).then(response => {
this.loading = false;
this.tools.loading = false;
if (response.code === 200) {
this.tableData = response.data.list;
this.pageObj.total = response.data.total
}
});
if (flushRightBoxDc) {
this.$refs.assetAddUnit.getIDCOptionData();
this.$refs.assetEditUnit.getIDCOptionData();
}
},
// getIDCOptionData() {
// this.$get('idc').then(response => {
// if (response.code === 200) {
// // console.log(response.data);
// // this.checkListData = this.IDCOptionData = response.data.list;
// // this.markOptionData(this.IDCOptionData)
// }
// })
// },
getPingData:function(){
this.pingCheckListData=[
{label:'up',value:1},
{label:'down',value:0},
]
getDcData() {
return new Promise(resolve => {
this.$get('idc').then(response => {
if (response.code === 200) {
this.dcData = response.data.list;
}
resolve(this.dcData);
});
});
},
getAssetTypeData() {
return new Promise(resolve => {
this.$get('sys/dict/all?type=assetType').then(response => {
if (response.code === 200) {
this.assetTypeData = response.data;
}
resolve(this.assetTypeData);
});
});
},
getVendorData() {
return new Promise(resolve => {
this.$get('sys/dict/all?type=vendor').then(response => {
if (response.code === 200) {
this.vendorData = response.data;
}
resolve(this.vendorData);
});
});
},
getUserData() {
return new Promise(resolve => {
this.$get('sys/user/list').then(response => {
if (response.code === 200) {
this.idcUserData = response.data.list
this.userData = response.data.list;
}
})
resolve(this.userData);
});
});
},
messageStyle(e) {
if (e.column.label == 'Alerts' || e.column.label == this.$t("asset.tableTitle.alerts")) {
@@ -647,18 +636,30 @@
}
return '';
},
editData(data, item) {
if (data === 'idc') {
item.name = this.addIdcData.popName
}
this.$put(data, item).then(res => {
if (res.code === 200) {
this.$message({duration: 2000, type: 'success', message: this.$t("tip.saveSuccess")});
this.getAssetData();
edit(asset) {
this.asset = JSON.parse(JSON.stringify(asset));
this.rightBox.show = true;
},
detail(asset) {
this.bottomBox.asset = JSON.parse(JSON.stringify(asset));
this.bottomBox.targetTab = "panel";
this.bottomBox.showSubList = true;
},
del(asset) {
this.$confirm(this.$t("tip.confirmDelete"), {
confirmButtonText: this.$t("tip.yes"),
cancelButtonText: this.$t("tip.no"),
type: 'warning'
}).then(() => {
this.$delete("asset?ids=" + asset.id).then(response => {
if (response.code === 200) {
this.$message({duration: 2000, type: 'success', message: this.$t("tip.deleteSuccess")});
this.getTableData();
} else {
this.$message.error(res.msg);
this.$message.error(response.msg);
}
})
});
},
addNewData(type) {
if (type === 'IDC') {
@@ -666,8 +667,10 @@
if (res.code === 200) {
const h = this.$createElement;
this.$message({duration: 2000, type: 'success', message: this.$t("tip.saveSuccess")});
this.getLeftMenuList()
this.getAssetData()
this.getDcData()
this.getTableData()
/*this.getLeftMenuList()
this.getAssetData()*/
} else {
this.$message.error(res.msg);
}
@@ -683,8 +686,10 @@
this.$delete(data + "?ids=" + item).then(response => {
if (response.code === 200) {
this.$message({duration: 2000, type: 'success', message: this.$t("tip.deleteSuccess")});
this.getAssetData();
this.getLeftMenuList();
this.getTableData();
this.getDcData();
/*this.getAssetData();
this.getLeftMenuList();*/
} else {
this.$message.error(response.msg);
}
@@ -732,115 +737,68 @@
}
},
showEndpoint(asset) {
this.alertMsgAsset = Object.assign({}, asset);
this.targetTab = "endpoint";
this.showSubList = true;
this.bottomBox.asset = Object.assign({}, asset);
this.bottomBox.targetTab = "endpoint";
this.bottomBox.showSubList = true;
},
tagShow(data, id, type) {
if (data === 'showAdd') {
add() {
this.asset = this.newAsset();
this.rightBox.show = true;
this.$nextTick(() => {
this.editUnitShow = true;
this.$refs['assetEditUnit'].accountSwitch=false;
this.$refs['assetEditUnit'].getAssetData('');
this.$refs['assetEditUnit'].resetAsset();
});
}
if (data === 'showEdit') {
this.rightBox.show = true;
this.$nextTick(() => {
this.editUnitShow = true;
this.$refs['assetEditUnit'].accountSwitch=false;
this.$refs['assetEditUnit'].getAssetData(id)
});
}
if (data === 'showView') {
this.alertMsgAsset = Object.assign({}, id);
this.targetTab = "panel";
this.showSubList = true;
/*this.editUnitShow = true
this.$refs['assetEditUnit'].getAssetData(id)
this.$refs['assetEditUnit'].tabView = true*/
},
newAsset() {
return JSON.parse(JSON.stringify(this.blankAsset));
},
closeRightBox(refresh) {
this.rightBox.show = false;
if (refresh) {
this.getTableData();
}
},
editing() {
},
getSingleIDCData(data, item) {
if (item !== 'edit') {
this.idcSelectedData = '';
this.IDCOptionData.forEach(item => {
if (item.id === data) {
this.idcSelectedData = item
}
});
return
} else {
this.IDCOptionData.forEach(item => {
if (item.id === data) {
this.addIdcData.id = item.id;
this.addIdcData.name = item.name;
this.addIdcData.popName = item.name;
this.addIdcData.location = item.location;
this.addIdcData.principal = item.principal;
this.addIdcData.tel = item.tel;
}
});
}
},
changeCheckBox() {
this.assetClick = true;
this.getSingleAsset();
},
changeAssetTypeCheckBox:function(){
changeAssetTypeCheckBox() {
if(this.assetTypeCheckList && this.assetTypeCheckList.length > 0){
let assetTypeIds=this.assetTypeCheckList.join(',');
let assetTypeIds = this.assetTypeCheckList.join(',');
this.pageObj.typeIds=assetTypeIds;
}else{
this.pageObj.typeIds='';
}
this.getAssetData();
this.getTableData();
},
changeVendorCheckBox:function(){
changeVendorCheckBox() {
if(this.vendorCheckList && this.vendorCheckList.length > 0){
let vendorIds=this.vendorCheckList.join(',');
this.pageObj.vendorIds=vendorIds;
let vendorIds = this.vendorCheckList.join(',');
this.pageObj.vendorIds = vendorIds;
}else{
this.pageObj.vendorIds='';
this.pageObj.vendorIds = '';
}
this.getAssetData();
this.getTableData();
},
changePingCheckBox:function(){
changePingCheckBox() {
if(this.pingCheckList && this.pingCheckList.length > 0){
let pingStates=this.pingCheckList.join(',');
this.pageObj.pingStates=pingStates;
let pingStates = this.pingCheckList.join(',');
this.pageObj.pingStates = pingStates;
}else{
this.pageObj.pingStates='';
this.pageObj.pingStates = '';
}
this.getAssetData();
},
getSingleAsset() {
let checkedCount = this.checkList.length;
let allCount = this.checkListData.length;
this.checkAllFlag = ((checkedCount == allCount) && allCount > 0);
this.checkAllHandler = checkedCount > 0 && checkedCount < allCount;
this.getTableData();
},
pageNo(val) {
this.pageObj.pageNo = val;
this.getAssetData()
this.getTableData()
}
,
pageSize(val) {
this.pageObj.pageSize = val;
localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val);
this.getAssetData();
this.getTableData();
},
getPrincipalName(data) {
for (let item in this.idcUserData) {
if (this.idcUserData[item].userId === data) {
return this.idcUserData[item].username
for (let item in this.userData) {
if (this.userData[item].userId === data) {
return this.userData[item].username
}
}
},
@@ -854,21 +812,22 @@
}
},
flushData() {
this.getSingleAsset();
this.getAssetData();
Promise.all([this.getVendorData(), this.getAssetTypeData(), this.getDcData()]).then(response => {
this.getTableData();
});
},
closeAllPop:function(){
this.$refs.idcConfigBox.forEach((item)=>{
item.show(false)
})
this.$refs.cabinetConfigBox.forEach((item)=>{
item.show(false)
})
this.$refs.idcConfigBox.forEach((item) => {
item.show(false);
});
this.$refs.cabinetConfigBox.forEach((item) => {
item.show(false);
});
},
search(searchObj) {
let orderBy='';
let orderBy = '';
if(this.searchLabel.orderBy){
orderBy=this.searchLabel.orderBy
orderBy = this.searchLabel.orderBy
}
this.searchLabel = {};
this.pageObj.pageNo = 1;
@@ -880,11 +839,11 @@
if(orderBy){
this.$set(this.searchLabel, 'orderBy', orderBy);
}
this.getAssetData();
this.getTableData();
},
convertToDetail(obj) {
let detail = JSON.parse(JSON.stringify(obj));
detail.state = obj.state == 1 ? this.$t('asset.createAssetTab.inStock'): this.$t('asset.createAssetTab.notInStock');
detail.state = obj.state == 1 ? this.$t('asset.inStock'): this.$t('asset.notInStock');
detail.assetType = obj.model.type.value;
detail.vendorModel = obj.model.vendor.value + " " + obj.model.name;
detail.dataCenter = obj.idc ? obj.idc.name : "";
@@ -894,53 +853,20 @@
detail.cabinet = obj.cabinet ? obj.cabinet.name : "";
detail.uSize = obj.cabinet ? obj.cabinet.uSize : "";
detail.remark = obj.idc ? obj.idc.remark : "";
if (obj.accounts.length > 0) {
if (obj.accounts && obj.accounts.length > 0) {
let account = obj.accounts[0];
detail.protocol = account.protocol;
detail.account = account.user;
let loginType = "";
if (account.authType == 1) {
loginType = this.$t('asset.createAssetTab.password');
loginType = this.$t('asset.password');
} else if (account.authType == 2) {
loginType = this.$t('asset.createAssetTab.ssh');
loginType = this.$t('asset.ssh');
}
detail.loginType = loginType;
detail.port = account.port;
}
/*detail.push({label: this.$t("asset.createAssetTab.sn"), value: obj.sn});
detail.push({label: this.$t("asset.createAssetTab.host"), value: obj.host});
detail.push({label: this.$t("asset.createAssetTab.state"), value: obj.state == 1 ? this.$t('asset.createAssetTab.inStock'): this.$t('asset.createAssetTab.notInStock')});
detail.push({label: this.$t("asset.tableTitle.modules"), value: obj.endpointNum});
detail.push({label: this.$t("asset.tableTitle.alerts"), value: obj.alertNum});
detail.push({label: this.$t("asset.createAssetTab.assetType"), value: obj.model.type.value});
detail.push({label: this.$t("asset.createAssetTab.vendorModel"), value: obj.model.vendor.value + " " + obj.model.name});
detail.push({label: this.$t("asset.createAssetTab.purchaseDate"), value: obj.purchaseDate});
detail.push({label: this.$t("asset.createAssetTab.dcName"), value: obj.idc ? obj.idc.name : ""});
detail.push({label: this.$t("asset.createAssetTab.location"), value: obj.idc ? obj.idc.location : ""});
detail.push({label: this.$t("asset.createAssetTab.principal"), value: obj.idc ? this.getPrincipalName(obj.idc.principal) : ""});
detail.push({label: this.$t("asset.createAssetTab.tel"), value: obj.idc ? obj.idc.tel : ""});
detail.push({label: this.$t("asset.createAssetTab.cabinet"), value: obj.cabinet ? obj.cabinet.name : ""});
detail.push({label: this.$t("asset.editAssetTab.uSize"), value: obj.cabinet ? obj.cabinet.uSize : ""});
detail.push({label: this.$t("asset.editAssetTab.remark"), value: obj.idc ? obj.idc.remark : ""});
if (obj.accounts.length > 0) {
let account = obj.accounts[0];
if (account.protocol == 'SSH') {
detail.push({label: this.$t("asset.createAssetTab.protocol"), value: 'SSH'});
detail.push({label: this.$t("asset.createAssetTab.account"), value: account.user});
let loginType = "";
if (account.authType == 1) {
loginType = this.$t('asset.createAssetTab.password');
} else if (account.authType == 2) {
loginType = this.$t('asset.createAssetTab.ssh');
}
detail.push({label: this.$t("asset.createAssetTab.loginType"), value: loginType});
} else if (account.protocol == 'TELNET') {
detail.push({label: this.$t("asset.createAssetTab.protocol"), value: 'TELNET'});
detail.push({label: this.$t("asset.createAssetTab.account"), value: account.user});
}
detail.push({label: this.$t("asset.createAssetTab.port"), value: account.port});
}*/
return detail;
},
formatPingTime:function(str){
@@ -990,9 +916,11 @@
orderBy='-'+item.prop;
}
this.$set(this.searchLabel, "orderBy", orderBy);
this.getAssetData();
this.getTableData();
/*}
this.getAssetData();*/
},
// 获取左侧菜单数据
/*// 获取左侧菜单数据
getLeftMenuList(){
this.$get('asset/filter').then(response => {
if (response.code === 200) {
@@ -1011,7 +939,7 @@
})
}
})
},
},*/
},
created() {
this.getUserData();
@@ -1019,7 +947,11 @@
this.getPingData();
},
mounted() {
this.getLeftMenuList()//获取左侧菜单列表
//初始化数据
Promise.all([this.getVendorData(), this.getAssetTypeData(), this.getUserData(), this.getDcData()]).then(response => {
this.getTableData();
});
// this.getLeftMenuList()//获取左侧菜单列表
//是否存在分页缓存
let pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId);
if (pageSize != 'undefined' && pageSize != null) {
@@ -1036,42 +968,41 @@
if (el._ps_) {
el.addEventListener("ps-scroll-y", () => {
if (el._ps_.scrollbarYTop > 50) {
this.showTopBtn = true;
this.tools.showTopBtn = true;
} else {
this.showTopBtn = false;
this.tools.showTopBtn = false;
}
});
el.addEventListener("mouseenter", () => {
this.tableHover = true;
this.tools.tableHover = true;
});
el.addEventListener("mouseleave", () => {
this.tableHover = false;
this.tools.tableHover = false;
});
}
//resize时刷新左侧列表滚动条
let _this = this;
let vm = this;
window.onresize = function () {
_this.$refs.leftScrollbar.update();
vm.$refs.leftScrollbar.update();
el._ps_.update();
};
});
let localStorageTitle = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path);
this.tablelable = localStorageTitle ? JSON.parse(localStorageTitle) : this.tableTitle;
// this.assetPingSwit
this.tools.tablelable = localStorageTitle ? JSON.parse(localStorageTitle) : this.tableTitle;
if (this.assetPingSwitch == 'off') {
for (let i in this.tablelable) {
let label = this.tablelable[i];
for (let i in this.tools.tablelable) {
let label = this.tools.tablelable[i];
if (label.prop == 'pingStatus') {
this.tablelable.splice(i, 1);
console.log(this.tablelable)
this.tools.tablelable.splice(i, 1);
//console.log(this.tools.tablelable)
break;
}
}
}
this.dropCol = localStorageTitle ? JSON.parse(localStorageTitle) : this.tableTitle;
this.tools.dropCol = localStorageTitle ? JSON.parse(localStorageTitle) : this.tableTitle;
},
destroyed() {
window.onresize = null;

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

File diff suppressed because it is too large Load Diff

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

File diff suppressed because it is too large Load Diff

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

@@ -35,12 +35,13 @@
</div>
<div slot="content-right" class="slot-content">
<!-- 主页面 -->
<div class="main-list main-and-sub-transition" :class="{'main-list-with-sub': showSubList}">
<div class="main-list" :class="{'main-list-with-sub': bottomBox.showSubList}">
<!-- 顶部工具栏 -->
<div class="top-tools" v-show="mainResizeShow">
<div class="top-tool-main-right" :class="{'top-tool-main-right-to-left': showSubList}">
<div class="main-modal"></div>
<div class="top-tools" v-show="bottomBox.mainResizeShow">
<div class="top-tool-main-right" :class="{'top-tool-main-right-to-left': bottomBox.showSubList}">
<div class="top-tool-search">
<search-input ref="searchInput" :searchMsg="searchMsg" @search="search" :inTransform="inTransform"></search-input>
<search-input ref="searchInput" :searchMsg="searchMsg" @search="search" :inTransform="bottomBox.inTransform"></search-input>
</div>
<button type="button" @click="add" :title="$t('overall.createAccount')"
class="nz-btn nz-btn-size-normal nz-btn-style-light margin-l-20" id="account-add">
@@ -54,16 +55,16 @@
class="nz-table"
:data="tableData"
border
v-show="mainResizeShow"
v-show="bottomBox.mainResizeShow"
ref="accountTable"
:height="mainTableHeight"
v-loading="loading"
v-loading="tools.loading"
v-scrollBar:el-table="'large'"
style="width: 100%;"
@sort-change="tableDataSort">
<el-table-column
:resizable="false"
v-for="(item, index) in tablelable"
v-for="(item, index) in tools.tablelable"
v-if="item.show"
:width="item.width"
:key="`col-${index}`"
@@ -106,17 +107,19 @@
</span>
</template>
<template v-slot="scope">
<button v-if="scope.$index == 0" class="to-top" :style="{top: toTopBtnTop}" :class="{'to-top-is-hover': tableHover}" v-show="showTopBtn && mainResizeShow" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
<button v-if="scope.$index == 0" class="to-top" :style="{top: tools.toTopBtnTop}" :class="{'to-top-is-hover': tools.tableHover}" v-show="tools.showTopBtn && bottomBox.mainResizeShow" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
</template>
</el-table-column>
</el-table>
<div class="pagination-bottom" v-show="!showSubList">
<div class="pagination-bottom" v-show="!bottomBox.showSubList">
<Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
</div>
</div>
<!-- 底部上滑框 -->
<bottom-box v-if="showSubList" :show-sub-list="showSubList" :subResizeShow="subResizeShow" :obj="user" :isFullScreen="isFullScreen" :from="'account'" :targetTab.sync="targetTab" :detail="userDetail"
@closeSubList="showSubList = false" @fullScreen="fullScreen" @exitFullScreen="exitFullScreen" @listResize="listResize" ></bottom-box>
<transition name="el-zoom-in-bottom">
<bottom-box v-if="bottomBox.showSubList" :sub-resize-show="bottomBox.subResizeShow" :obj="bottomBox.user" :is-full-screen="bottomBox.isFullScreen" :from="'account'" :target-tab.sync="bottomBox.targetTab" :detail="bottomBox.userDetail"
@closeSubList="bottomBox.showSubList = false" @fullScreen="fullScreen" @exitFullScreen="exitFullScreen" @listResize="listResize" ></bottom-box>
</transition>
</div>
</left-menu>
<transition name="right-box">
@@ -124,8 +127,9 @@
</transition>
<!-- 自定义table列 -->
<element-set
v-if="tools.showElementSet"
v-clickoutside="elementsetHide"
:dropCol="dropCol"
:dropCol="tools.dropCol"
@tablelable="tablelabelEmit"
:table-title="tableTitle"
ref="elementset"
@@ -143,28 +147,37 @@
},
data() {
return {
loading: false,
//底部上滑框相关
mainListHeight: '', //主列表高度
mainTableHeight: this.$tableHeight.normal, //主列表table高度
showSubList: false, //是否展示二级列表
targetTab: '', //展示二级列表中的哪个页签
showElementSet: false, //控制自定义列弹框
inTransform: false, //搜索框相关，搜索条件下拉框是否在transform里
mainResizeShow: true, //dom高度改变时部分内容是否展示
subResizeShow: true, //二级列表拖动时，用于控制主列表内容展示
isFullScreen: false, //是否全屏
userDetail: [],
//底部上滑框相关end
toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性
tableHover: false, //控制滚动条和top按钮同时出现
tableId: 'accountTable', //需要分页的table的id，用于记录每页数量
showTopBtn: false, //是否显示回到顶部按钮
rightBox: { //弹出框相关
//侧滑
rightBox: {
show: false,
},
/*二级页面相关*/
bottomBox: {
userDetail: {},
user: {},
mainResizeShow: true, //dom高度改变时是否展示|隐藏
subResizeShow: true,
isFullScreen: false, //全屏状态
showSubList: false, //是否显示二级列表
targetTab: '', //显示二级列表中的哪个页签
inTransform: false, //搜索框相关，搜索条件下拉框是否在transform里
},
/*工具参数*/
tools: {
loading: false, //是否显示table加载动画
toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性
tableHover: false, //控制滚动条和top按钮同时出现
showElementSet: false, //自定义列弹框是否显示
showTopBtn: false, //显示To top按钮
tablelable: [], //从缓存中加载的table header
dropCol: [], //自定义列工具的数据
},
mainTableHeight: this.$tableHeight.normal, //主列表table高度
user: {},
tableId: 'accountTable', //需要分页的table的id，用于记录每页数量
blankUser: { //空白对象
userId: '',
username: '',
@@ -193,11 +206,7 @@
label: 'E-mail',
prop: 'email',
show: true,
}, /*{
label: this.$t('config.account.receiver'),
prop: 'receiver',
show: false,
}, */{
}, {
label: this.$t('config.account.createTime'),
prop: 'createTime',
show: true,
@@ -213,8 +222,6 @@
width: 120
}
],
tablelable: [], //实际显示的列
dropCol: [], //用于element-set组件显示
tableData: [],
searchMsg: { //给搜索框子组件传递的信息
zheze_none: true,
@@ -264,13 +271,14 @@
return detail;
},
elementsetShow(s, e) {
this.tools.showElementSet = true;
var eventfixed = {
shezhi: 0,
screen: 0
};
eventfixed[s] = 1;
e.preventDefault();
this.$store.commit('setHeaderTable', this.tablelable);
this.$store.commit('setHeaderTable', this.tools.tablelable);
this.$store.commit('setEventfixed', eventfixed);
const h = document.documentElement.clientHeight;
const w = document.documentElement.clientWidth;
@@ -291,7 +299,7 @@
tablelabelEmit(data) {
//获取子组件传过来的参数
this.$store.commit('setHeaderTable', data);
this.tablelable = data;
this.tools.tablelable = data;
},
closeRightBox(refresh) {
this.rightBox.show = false;
@@ -304,16 +312,16 @@
this.rightBox.show = true;
},
detail(u) {
this.user = JSON.parse(JSON.stringify(u));
this.targetTab = "detail";
this.showSubList = true;
this.bottomBox.user = JSON.parse(JSON.stringify(u));
this.bottomBox.targetTab = "detail";
this.bottomBox.showSubList = true;
},
getTableData: function () {
getTableData() {
this.$set(this.searchLabel, "pageNo", this.pageObj.pageNo);
this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize);
this.loading = true;
this.tools.loading = true;
this.$get('sys/user/list', this.searchLabel).then(response => {
this.loading = false;
this.tools.loading = false;
if (response.code === 200) {
for (let i = 0; i < response.data.list.length; i++) {
response.data.list[i].status = response.data.list[i].status + "";
@@ -392,13 +400,13 @@
}
},
watch: {
user: {
'bottomBox.user': {
deep: true,
handler(n) {
this.userDetail = this.convertToDetail(n);
this.bottomBox.userDetail = this.convertToDetail(n);
}
},
showSubList(n) {
'bottomBox.showSubList': function(n) {
let vm = this;
this.$bottomBoxWindow.showSubListWatch(vm, n);
}
@@ -417,23 +425,23 @@
if (el._ps_) {
el.addEventListener("ps-scroll-y", () => {
if (el._ps_.scrollbarYTop > 50) {
this.showTopBtn = true;
this.tools.showTopBtn = true;
} else {
this.showTopBtn = false;
this.tools.showTopBtn = false;
}
});
el.addEventListener("mouseenter", () => {
this.tableHover = true;
this.tools.tableHover = true;
});
el.addEventListener("mouseleave", () => {
this.tableHover = false;
this.tools.tableHover = false;
});
}
});
this.tablelable = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
this.tools.tablelable = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
: this.tableTitle;
this.dropCol = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
this.tools.dropCol = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
: this.tableTitle;
}

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

@@ -37,11 +37,12 @@
</div>
<!--dc table start-->
<div slot="content-right" class="slot-content">
<div class="main-list main-and-sub-transition" :class="{'main-list-with-sub': showSubList}">
<div class="top-tools" v-show="mainResizeShow">
<div class="top-tool-main-right" :class="{'top-tool-main-right-to-left': showSubList}">
<div class="main-list" :class="{'main-list-with-sub': bottomBox.showSubList}">
<div class="main-modal"></div>
<div class="top-tools" v-show="bottomBox.mainResizeShow">
<div class="top-tool-main-right" :class="{'top-tool-main-right-to-left': bottomBox.showSubList}">
<div class="top-tool-search">
<search-input ref="searchInput" :searchMsg="searchMsg" @search="search" :inTransform="inTransform"></search-input>
<search-input ref="searchInput" :searchMsg="searchMsg" @search="search" :inTransform="bottomBox.inTransform"></search-input>
</div>
<button type="button" @click="add" :title="$t('overall.createDatacenter')"
class="nz-btn nz-btn-size-normal nz-btn-style-light margin-l-20" id="dc-add">
@@ -55,18 +56,18 @@
:data="tableData"
border
tooltip-effect="light"
v-show="mainResizeShow"
v-show="bottomBox.mainResizeShow"
v-scrollBar:el-table="'large'"
:height="mainTableHeight"
ref="dcTable"
v-loading="loading"
v-loading="tools.loading"
:cell-class-name="assetStatClassName"
style="width: 100%;"
@sort-change="tableDataSort">
<el-table-column
:resizable="false"
show-overflow-tooltip
v-for="(item, index) in tablelable"
v-for="(item, index) in tools.tablelable"
v-if="item.show"
:width="item.width"
:key="`col-${index}`"
@@ -100,7 +101,7 @@
<el-popover
placement="top"
trigger="hover"
:content="$t('overall.result.total') + '：' + scope.row.assetStat.total + '，' + $t('asset.createAssetTab.inStock') + '：' + scope.row.assetStat.inStock + '，' + $t('asset.createAssetTab.notInStock') + '：' + scope.row.assetStat.outStock">
:content="$t('overall.result.total') + '：' + scope.row.assetStat.total + '，' + $t('asset.inStock') + '：' + scope.row.assetStat.inStock + '，' + $t('asset.notInStock') + '：' + scope.row.assetStat.outStock">
<div slot="reference" class="dc-asset-states">
<span class="dc-asset-state dc-asset-state-total">{{scope.row.assetStat.total}}</span>
<span class="dc-asset-state dc-asset-state-in">{{scope.row.assetStat.inStock}}</span>
@@ -123,22 +124,25 @@
</span>
</template>
<template v-slot="scope">
<button v-if="scope.$index == 0" class="to-top" :style="{top: toTopBtnTop}" :class="{'to-top-is-hover': tableHover}" v-show="showTopBtn && mainResizeShow" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
<button v-if="scope.$index == 0" class="to-top" :style="{top: tools.toTopBtnTop}" :class="{'to-top-is-hover': tools.tableHover}" v-show="tools.showTopBtn && bottomBox.mainResizeShow" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
</template>
</el-table-column>
</el-table>
<div class="pagination-bottom" v-show="!showSubList">
<div class="pagination-bottom" v-show="!bottomBox.showSubList">
<Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
</div>
</div>
<bottom-box v-if="showSubList" :show-sub-list="showSubList" :subResizeShow="subResizeShow" :obj="dc" :isFullScreen="isFullScreen" :from="'dc'" :targetTab.sync="targetTab" :detail="dcDetail"
@closeSubList="showSubList = false" @fullScreen="fullScreen" @exitFullScreen="exitFullScreen" @listResize="listResize" ></bottom-box>
<transition name="el-zoom-in-bottom">
<bottom-box v-if="bottomBox.showSubList" :sub-resize-show="bottomBox.subResizeShow" :obj="bottomBox.dc" :is-full-screen="bottomBox.isFullScreen" :from="'dc'" :target-bab.sync="bottomBox.targetTab" :detail="bottomBox.dcDetail"
@closeSubList="bottomBox.showSubList = false" @fullScreen="fullScreen" @exitFullScreen="exitFullScreen" @listResize="listResize" ></bottom-box>
</transition>
</div>
</left-menu>
<!--dc table end-->
<element-set
v-if="tools.showElementSet"
v-clickoutside="elementsetHide"
:dropCol="dropCol"
:dropCol="tools.dropCol"
@tablelable="tablelabelEmit"
:table-title="tableTitle"
ref="elementset"
@@ -164,23 +168,29 @@
},
data() {
return {
/*二级列表相关*/
targetTab: '', //展示二级列表中的哪个页签
inTransform: false, //搜索框相关，搜索条件下拉框是否在transform里
mainResizeShow: true, //dom高度改变时部分内容是否展示
/*二级页面相关*/
bottomBox: {
dcDetail: {},
dc: {},
mainResizeShow: true, //dom高度改变时是否展示|隐藏
subResizeShow: true,
isFullScreen: false,
showSubList: false, //是否展示二级列表
dcDetail: [], //dc的详情信息，包含标题
isFullScreen: false, //全屏状态
showSubList: false, //是否显示二级列表
targetTab: '', //显示二级列表中的哪个页签
inTransform: false, //搜索框相关，搜索条件下拉框是否在transform里
},
mainTableHeight: this.$tableHeight.normal, //主列表table高度
/*工具参数*/
tools: {
loading: false, //是否显示table加载动画
toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性
tableHover: false, //控制滚动条和top按钮同时出现
showElementSet: false, //控制自定义列的弹框
showElementSet: false, //自定义列弹框是否显示
showTopBtn: false, //显示To top按钮
tablelable: [], //从缓存中加载的table header
dropCol: [], //自定义列工具的数据
},
tableId: 'dcTable', //需要分页的table的id，用于记录每页数量
showTopBtn: false,
mainTableHeight: this.$tableHeight.normal, //主列表table高度
loading: false,
dc: {},
blankDc: {
id: '',
@@ -217,7 +227,7 @@
prop: 'area',
show: true
}, {
label: this.$t("asset.createAssetTab.location"),
label: this.$t("asset.location"),
prop: 'location',
show: true,
}, {
@@ -229,11 +239,11 @@
prop: 'assetStat',
show: true,
}, {
label: this.$t('asset.createAssetTab.tel'),
label: this.$t('asset.tel'),
prop: 'tel',
show: true,
}, {
label: this.$t('asset.createAssetTab.principal'),
label: this.$t('asset.principal'),
prop: 'principal',
show: true
}, {
@@ -243,8 +253,6 @@
width: 120
}
],
tablelable: [],
dropCol: [],
tableData: [],
userData: [],
searchMsg: { //给搜索框子组件传递的信息
@@ -258,20 +266,19 @@
}],
},
searchLabel: {}, //搜索参数
tabShow:1, // 控制显示一级页面和二级页面 1 dc 2cabinet
cabinetDatas:[],//显示的机柜信息
tabShow: 1, // 控制显示一级页面和二级页面 1 dc 2cabinet
}
},
methods: {
elementsetShow(s, e) {
this.tools.showElementSet = true;
var eventfixed = {
shezhi: 0,
screen: 0
};
eventfixed[s] = 1;
e.preventDefault();
this.$store.commit('setHeaderTable', this.tablelable);
this.$store.commit('setHeaderTable', this.tools.tablelable);
this.$store.commit('setEventfixed', eventfixed);
const h = document.documentElement.clientHeight;
const w = document.documentElement.clientWidth;
@@ -298,7 +305,7 @@
tablelabelEmit(data) {
//获取子组件传过来的参数
this.$store.commit('setHeaderTable', data);
this.tablelable = data;
this.tools.tablelable = data;
},
jumpTo(data, id) {
bus.$emit("menu-change", data);
@@ -321,12 +328,12 @@
this.rightBox.trafficSetting.show = true;
},
detail(u) {
this.dc = JSON.parse(JSON.stringify(u));
if (!this.dc.area) {
this.$set(this.dc, 'area', {id: '', name: ''});
this.bottomBox.dc = JSON.parse(JSON.stringify(u));
if (!this.bottomBox.dc.area) {
this.$set(this.bottomBox.dc, 'area', {id: '', name: ''});
}
this.targetTab = "detail";
this.showSubList = true;
this.bottomBox.targetTab = "detail";
this.bottomBox.showSubList = true;
},
// 全屏
fullScreen() {
@@ -347,11 +354,11 @@
let detail = [];
detail.push({label: this.$t("overall.name"), value: obj.name});
detail.push({label: this.$t("config.dc.area"), value: obj.area.name});
detail.push({label: this.$t("asset.createAssetTab.location"), value: obj.location});
detail.push({label: this.$t("asset.location"), value: obj.location});
detail.push({label: this.$t("config.dc.cabinetNum"), value: obj.cabinetNum});
let assets = this.$t('overall.result.total') + ' ' + obj.assetStat.total + '，' + this.$t('asset.createAssetTab.inStock') + ' ' + obj.assetStat.inStock + '，' + this.$t('asset.createAssetTab.notInStock') + ' ' + obj.assetStat.outStock;
let assets = this.$t('overall.result.total') + ' ' + obj.assetStat.total + '，' + this.$t('asset.inStock') + ' ' + obj.assetStat.inStock + '，' + this.$t('asset.notInStock') + ' ' + obj.assetStat.outStock;
detail.push({label: this.$t("config.dc.assets"), value: assets});
detail.push({label: this.$t("asset.createAssetTab.tel"), value: obj.tel});
detail.push({label: this.$t("asset.tel"), value: obj.tel});
let principal = '';
for (let i = 0; i < this.userData.length; i++) {
if (this.userData[i].userId == obj.principal) {
@@ -359,7 +366,7 @@
break;
}
}
detail.push({label: this.$t("asset.createAssetTab.principal"), value: principal});
detail.push({label: this.$t("asset.principal"), value: principal});
return detail;
},
add() {
@@ -400,9 +407,9 @@
getTableData() {
this.$set(this.searchLabel, "pageNo", this.pageObj.pageNo);
this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize);
this.loading = true;
this.tools.loading = true;
this.$get('idc', this.searchLabel).then(response => {
this.loading = false;
this.tools.loading = false;
if (response.code === 200) {
this.tableData = response.data.list;
this.pageObj.total = response.data.total
@@ -446,9 +453,9 @@
this.getTableData();
},
showCabinet(dc) {
this.targetTab = 'cabinet';
this.dc = JSON.parse(JSON.stringify(dc));
this.showSubList = true;
this.bottomBox.targetTab = 'cabinet';
this.bottomBox.dc = JSON.parse(JSON.stringify(dc));
this.bottomBox.showSubList = true;
},
//是否需要排序
sortableShow(prop) {
@@ -483,15 +490,15 @@
},
},
watch: {
dc: {
'bottomBox.dc': {
deep: true,
handler(n) {
if (n.id) {
this.dcDetail = this.convertToDetail(n);
this.bottomBox.dcDetail = this.convertToDetail(n);
}
}
},
showSubList(n) {
'bottomBox.showSubList': function(n) {
let vm = this;
this.$bottomBoxWindow.showSubListWatch(vm, n);
}
@@ -512,16 +519,16 @@
if (el._ps_) {
el.addEventListener("ps-scroll-y", () => {
if (el._ps_.scrollbarYTop > 100) {
this.showTopBtn = true;
this.bottomBox.showTopBtn = true;
} else {
this.showTopBtn = false;
this.bottomBox.showTopBtn = false;
}
});
el.addEventListener("mouseenter", () => {
this.tableHover = true;
this.tools.tableHover = true;
});
el.addEventListener("mouseleave", () => {
this.tableHover = false;
this.tools.tableHover = false;
});
window.onresize = function() {
el._ps_.update();
@@ -529,10 +536,10 @@
}
});
this.tablelable = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
this.tools.tablelable = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
: this.tableTitle;
this.dropCol = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
this.tools.dropCol = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
: this.tableTitle;
}

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

@@ -48,14 +48,14 @@
<div class="top-tool-search">
<search-input :searchMsg="searchMsg" @search="search"></search-input>
</div>
<button @click="toAdd" class="nz-btn nz-btn-size-normal nz-btn-style-light margin-l-20" :title="$t('overall.createMib')"
<button @click="add" class="nz-btn nz-btn-size-normal nz-btn-style-light margin-l-20" :title="$t('overall.createMib')"
id="mib-add">
<i class="nz-icon-create-square nz-icon"></i>
</button>
</div>
</div>
<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="loading" @sort-change="tableDataSort">
<el-table-column :resizable="false" v-for="(item, index) in tablelable" v-if="item.show" :width="item.width" :class-name="item.prop == 'modelsDetail'?'detail-column':''"
<el-table :data="tableData" border :height="$tableHeight.normal" style="width: 100%;" ref="mibTable" class="nz-table mib-table" v-scrollBar:el-table="'large'" v-loading="tools.loading" @sort-change="tableDataSort">
<el-table-column :resizable="false" v-for="(item, index) in tools.tablelable" v-if="item.show" :width="item.width" :class-name="item.prop == 'modelsDetail'?'detail-column':''"
:key="`col-${index}`" :label="item.label" :sortable="sortableShow(item.prop)"
:prop="propTitle(item.prop)">
<template slot-scope="scope" :column="item">
@@ -92,9 +92,9 @@
</div>
</template>
<div v-else-if="item.prop == 'option'" class="content-right-options">
<span :title="$t('overall.download')" @click="downloadMib(scope.row.id)" class="content-right-option" :id="'mib-download-'+scope.row.id"><i class="el-icon-download"></i></span>
<span :title="$t('overall.download')" @click="downloadMib(scope.row)" class="content-right-option" :id="'mib-download-'+scope.row.id"><i class="el-icon-download"></i></span>
&nbsp;
<span :title="$t('overall.edit')" @click="toEdit(scope.row)" class="content-right-option" :id="'mib-edit-'+scope.row.id"><i class="nz-icon nz-icon-edit"></i></span>
<span :title="$t('overall.edit')" @click="edit(scope.row)" class="content-right-option" :id="'mib-edit-'+scope.row.id"><i class="nz-icon nz-icon-edit"></i></span>
&nbsp;
<span :title="$t('overall.delete')" @click="del(scope.row)" class="content-right-option" :id="'mib-del-'+scope.row.id"><i class="el-icon-delete"></i></span>
</div>
@@ -109,23 +109,26 @@
</span>
</template>
<template v-slot="scope">
<button v-if="scope.$index == 0" class="to-top" :style="{top: toTopBtnTop}" :class="{'to-top-is-hover': tableHover}" v-show="showTopBtn" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
<button v-if="scope.$index == 0" class="to-top" :style="{top: tools.toTopBtnTop}" :class="{'to-top-is-hover': tools.tableHover}" v-show="tools.showTopBtn" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
</template>
</el-table-column>
</el-table>
<Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
</template>
<mib-browser :showTab="showTab" v-if="showTab == 'browser'" @toFileTab="showTab = 'file'"></mib-browser>
<mib-browser :show-tab="showTab" v-if="showTab == 'browser'" @toFileTab="showTab = 'file'"></mib-browser>
</div>
</left-menu>
<element-set
v-if="tools.showElementSet"
v-clickoutside="elementsetHide"
:table-title="tableTitle"
:dropCol="dropCol"
:dropCol="tools.dropCol"
@tablelable="tablelabelEmit"
ref="elementset"
></element-set>
<mib-box ref="mibBox" :mib="mib" @reload="getTableData" @after="getTableData()"></mib-box>
<transition name="right-box">
<mib-box v-if="rightBox.show" ref="mibBox" :mib="mib" @reload="getTableData" @close="closeRightBox"></mib-box>
</transition>
</div>
</template>
@@ -142,14 +145,19 @@
data() {
return {
showTab: 'file', //file/browser
loading: false,
rightBox: {show: false},
tools: {
loading: false, //是否显示table加载动画
toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性
tableHover: false, //控制滚动条和top按钮同时出现
showElementSet: false, //自定义列弹框是否显示
showTopBtn: false, //显示To top按钮
tablelable: [], //从缓存中加载的table header
dropCol: [], //自定义列工具的数据
},
tableId: 'mibTable', //需要分页的table的id，用于记录每页数量
showTopBtn: false,
mib: {
mib: {},
blankMib: {
id: null,
name: '',
remark:'',
@@ -198,8 +206,6 @@
width: 120
}
],
tablelable: [],
dropCol: [],
tableData: [],
searchMsg: { //给搜索框子组件传递的信息
zheze_none: true,
@@ -222,13 +228,15 @@
},
methods: {
elementsetShow(s, e) {
this.tools.showElementSet = true;
this.$nextTick(() => {
var eventfixed = {
shezhi: 0,
screen: 0
};
eventfixed[s] = 1;
e.preventDefault();
this.$store.commit('setHeaderTable', this.tablelable);
this.$store.commit('setHeaderTable', this.tools.tablelable);
this.$store.commit('setEventfixed', eventfixed);
const h = document.documentElement.clientHeight;
const w = document.documentElement.clientWidth;
@@ -241,6 +249,7 @@
? e.clientY + 20
: e.clientY + 20 - (e.clientY + dh - h);
this.$store.commit('setPosition', {positionx, positiony});
});
},
elementsetHide() {
//悬浮点击空白隐藏
@@ -249,16 +258,22 @@
tablelabelEmit(data) {
//获取子组件传过来的参数
this.$store.commit('setHeaderTable', data);
this.tablelable = data;
this.tools.tablelable = data;
},
clickos() {
clickOutside() {
this.rightBox.show = false;
},
toEdit: function (u) {
this.mib = Object.assign({}, u);
this.$refs.mibBox.show(true, true);
edit(u) {
this.mib = JSON.parse(JSON.stringify(u));
this.rightBox.show = true;
},
del: function (u) {
closeRightBox(refresh) {
this.rightBox.show = false;
if (refresh) {
this.getTableData();
}
},
del(u) {
this.$confirm(this.$t("tip.confirmDelete"), {
confirmButtonText: this.$t("tip.yes"),
cancelButtonText: this.$t("tip.no"),
@@ -268,23 +283,18 @@
if (response.code === 200) {
this.$message({duration: 1000, type: 'success', message: this.$t("tip.deleteSuccess")});
this.getTableData();
this.rightBox.show = false;
} else {
this.$message.error(response.msg);
}
})
});
},
detail: function (u) {
this.mib = Object.assign({}, u);
this.$refs.mibBox.show(true, false);
add() {
this.mib = this.newMib();
this.rightBox.show = true;
},
toAdd: function () {
this.cleanMib();
this.$refs.mibBox.show(true, true);
},
esc: function () {
this.rightBox.show = false;
newMib() {
return JSON.parse(JSON.stringify(this.blankMib));
},
jumpTo(data, id) {
bus.$emit("menu-change", data);
@@ -295,13 +305,13 @@
}
});
},
getTableData: function () {
getTableData() {
this.tableData = [];
this.$set(this.searchLabel, "pageNo", this.pageObj.pageNo);
this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize);
this.loading = true;
this.tools.loading = true;
this.$get('mib', this.searchLabel).then(response => {
this.loading = false;
this.tools.loading = false;
if (response.code === 200) {
this.tableData = response.data.list;
this.pageObj.total = response.data.total
@@ -317,7 +327,7 @@
localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val);
this.getTableData();
},
search: function (searchObj) {
search(searchObj) {
let orderBy='';
if(this.searchLabel.orderBy){
orderBy=this.searchLabel.orderBy
@@ -334,8 +344,8 @@
}
this.getTableData();
},
downloadMib:function(mibId){
axios.get('/mib/download?id='+mibId,{responseType: 'blob'}).then(data=>{
downloadMib(mib) {
axios.get('/mib/download?id='+mib.id,{responseType: 'blob'}).then(data=>{
let fileName = new Date().getTime()+'.txt';
let disposition=data.headers['content-disposition'];
if(disposition){
@@ -358,17 +368,6 @@
}
})
},
cleanMib() {
this.mib = {
id: null,
name: '',
remark:'',
file:'',
models:'',
file:null,
};
this.$refs.mibBox.clearData();
},
//是否需要排序
sortableShow(prop){
switch(prop){
@@ -403,7 +402,7 @@
this.getTableData();
},
},
mounted: function () {
mounted() {
//是否存在分页缓存
let pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId);
if (pageSize != 'undefined' && pageSize != null) {
@@ -417,39 +416,32 @@
if (el._ps_) {
el.addEventListener("ps-scroll-y", () => {
if (el._ps_.scrollbarYTop > 50) {
this.showTopBtn = true;
this.tools.showTopBtn = true;
} else {
this.showTopBtn = false;
this.tools.showTopBtn = false;
}
});
el.addEventListener("mouseenter", () => {
this.tableHover = true;
this.tools.tableHover = true;
});
el.addEventListener("mouseleave", () => {
this.tableHover = false;
this.tools.tableHover = false;
});
}
});
this.tablelable = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
this.tools.tablelable = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
: this.tableTitle;
this.dropCol = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
this.tools.dropCol = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
: this.tableTitle;
},
watch: {
}
}
</script>
<style >
.mib-table .el-divider--horizontal{
margin:2px 0 !important;
}
.mib-table td .cell{
/*min-height: 60px !important;*/
/*padding-bottom: 3px;*/
}
.mib-table td .cell .detail-item-content{
height: 20px;
line-height: 20px;

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

@@ -34,11 +34,12 @@
</div>
</div>
<div slot="content-right" class="slot-content">
<div class="main-list main-and-sub-transition" :class="{'main-list-with-sub': showSubList}">
<div class="top-tools" v-show="mainResizeShow">
<div class="top-tool-main-right" :class="{'top-tool-main-right-to-left': showSubList}">
<div class="main-list" :class="{'main-list-with-sub': bottomBox.showSubList}">
<div class="main-modal"></div>
<div class="top-tools" v-show="bottomBox.mainResizeShow">
<div class="top-tool-main-right" :class="{'top-tool-main-right-to-left': bottomBox.showSubList}">
<div class="top-tool-search">
<search-input :searchMsg="searchMsg" @search="search" :inTransform="inTransform"></search-input>
<search-input :searchMsg="searchMsg" @search="search" :bottomBox.inTransform="bottomBox.inTransform"></search-input>
</div>
<button @click="add" class="nz-btn nz-btn-size-normal nz-btn-style-light margin-l-20" :title="$t('overall.createModel')"
id="model-add">
@@ -53,14 +54,14 @@
class="nz-table"
v-scrollBar
:el-table="'large'"
v-loading="loading"
v-loading="tools.loading"
:cell-class-name="assetStatClassName"
v-show="mainResizeShow"
v-show="bottomBox.mainResizeShow"
:height="mainTableHeight"
@sort-change="tableDataSort"
>
<el-table-column :resizable="false"
v-for="(item, index) in tablelable"
v-for="(item, index) in tools.tablelable"
v-if="item.show"
:width="item.width"
:key="`col-${index}`"
@@ -74,7 +75,7 @@
<el-popover
placement="top"
trigger="hover"
:content="$t('overall.result.total') + '：' + scope.row.assetStat.total + '，' + $t('asset.createAssetTab.inStock') + '：' + scope.row.assetStat.inStock + '，' + $t('asset.createAssetTab.notInStock') + '：' + scope.row.assetStat.outStock">
:content="$t('overall.result.total') + '：' + scope.row.assetStat.total + '，' + $t('asset.inStock') + '：' + scope.row.assetStat.inStock + '，' + $t('asset.notInStock') + '：' + scope.row.assetStat.outStock">
<div slot="reference" class="dc-asset-states">
<span class="dc-asset-state dc-asset-state-total">{{scope.row.assetStat.total}}</span>
<span class="dc-asset-state dc-asset-state-in">{{scope.row.assetStat.inStock}}</span>
@@ -98,23 +99,26 @@
</span>
</template>
<template v-slot="scope">
<button v-if="scope.$index == 0" class="to-top" :style="{top: toTopBtnTop}" :class="{'to-top-is-hover': tableHover}" v-show="showTopBtn" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
<button v-if="scope.$index == 0" class="to-top" :style="{top: tools.toTopBtnTop}" :class="{'to-top-is-hover': tools.tableHover}" v-show="tools.showTopBtn" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
</template>
</el-table-column>
</el-table>
<div class="pagination-bottom" v-show="!showSubList">
<div class="pagination-bottom" v-show="!bottomBox.showSubList">
<Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
</div>
</div>
<bottom-box v-if="showSubList" :show-sub-list="showSubList" :subResizeShow="subResizeShow" :isFullScreen="isFullScreen" from="model" :targetTab.sync="targetTab" :obj="modelForPanel"
@closeSubList="showSubList = false" @fullScreen="fullScreen" @exitFullScreen="exitFullScreen" @listResize="listResize" ref="panelBox"></bottom-box>
<transition name="el-zoom-in-bottom">
<bottom-box v-if="bottomBox.showSubList" :sub-resize-show="bottomBox.subResizeShow" :is-fullscreen="bottomBox.isFullScreen" from="model" :target-tab.sync="bottomBox.targetTab" :obj="bottomBox.model"
@closeSubList="bottomBox.showSubList = false" @fullScreen="fullScreen" @exitFullScreen="exitFullScreen" @listResize="listResize" ref="panelBox"></bottom-box>
</transition>
</div>
</left-menu>
<element-set
v-if="tools.showElementSet"
v-clickoutside="elementsetHide"
:table-title="tableTitle"
:dropCol="dropCol"
@tablelable="tablelabelEmit"
:dropCol="tools.dropCol"
@tools.tablelable="tablelabelEmit"
ref="elementset"
></element-set>
<transition name="right-box">
@@ -129,22 +133,32 @@
name: "model",
data() {
return {
/*二级列表相关*/
targetTab: '', //展示二级列表中的哪个页签
inTransform: false, //搜索框相关，搜索条件下拉框是否在transform里
mainResizeShow: true, //dom高度改变时部分内容是否展示
/*二级页面相关*/
bottomBox: {
modelDetail: {}, //asset详情
model: {}, //告警信息对应的asset对象
mainResizeShow: true, //dom高度改变时是否展示|隐藏
subResizeShow: true,
isFullScreen: false,
showSubList: false, //是否展示二级列表
isFullScreen: false, //全屏状态
showSubList: false, //是否显示二级列表
targetTab: '', //显示二级列表中的哪个页签
inTransform: false, //搜索框相关，搜索条件下拉框是否在transform里
},
mainTableHeight: this.$tableHeight.normal, //主列表table高度
modelForPanel: {},
tableId: 'modelTable', //需要分页的table的id，用于记录每页数量
showTopBtn: false,
/*工具参数*/
tools: {
loading: false, //是否显示table加载动画
toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性
tableHover: false, //控制滚动条和top按钮同时出现
showElementSet: false, //自定义列弹框是否显示
showTopBtn: false, //显示To top按钮
tablelable: [], //从缓存中加载的table header
dropCol: [], //自定义列工具的数据
},
tableId: 'modelTable', //需要分页的table的id，用于记录每页数量
rightBox: {show: false},
model: {},
blankModel: {
id: '',
@@ -162,7 +176,6 @@
pageSize: 50,
total: 0
},
loading: false,
tableTitle: [
{
label: 'ID',
@@ -192,8 +205,6 @@
width: 120
}
],
tablelable: [],
dropCol: [],
tableData: [],
searchMsg: { //给搜索框子组件传递的信息
zheze_none: true,
@@ -216,13 +227,15 @@
},
methods: {
elementsetShow(s, e) {
var eventfixed = {
this.tools.showElementSet = true;
this.$nextTick(() => {
let eventfixed = {
shezhi: 0,
screen: 0
};
eventfixed[s] = 1;
e.preventDefault();
this.$store.commit('setHeaderTable', this.tablelable);
this.$store.commit('setHeaderTable', this.tools.tablelable);
this.$store.commit('setEventfixed', eventfixed);
const h = document.documentElement.clientHeight;
const w = document.documentElement.clientWidth;
@@ -235,6 +248,7 @@
? e.clientY + 20
: e.clientY + 20 - (e.clientY + dh - h);
this.$store.commit('setPosition', {positionx, positiony});
});
},
elementsetHide() {
//悬浮点击空白隐藏
@@ -249,12 +263,12 @@
tablelabelEmit(data) {
//获取子组件传过来的参数
this.$store.commit('setHeaderTable', data);
this.tablelable = data;
this.tools.tablelable = data;
},
panel(obj) {
this.showSubList = true;
this.modelForPanel = obj;
this.targetTab = "panel";
this.bottomBox.showSubList = true;
this.bottomBox.model = obj;
this.bottomBox.targetTab = "panel";
},
// 全屏
fullScreen() {
@@ -318,9 +332,9 @@
this.$set(this.searchLabel, "pageNo", this.pageObj.pageNo);
this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize);
this.$set(this.searchLabel, "stat", 1);
this.loading = true;
this.tools.loading = true;
this.$get('model', this.searchLabel).then(response => {
this.loading = false;
this.tools.loading = false;
if (response.code === 200) {
this.tableData = response.data.list;
this.pageObj.total = response.data.total
@@ -401,31 +415,32 @@
if (el._ps_) {
el.addEventListener("ps-scroll-y", () => {
if (el._ps_.scrollbarYTop > 50) {
this.showTopBtn = true;
this.tools.showTopBtn = true;
} else {
this.showTopBtn = false;
this.tools.showTopBtn = false;
}
});
el.addEventListener("mouseenter", () => {
this.tableHover = true;
this.tools.tableHover = true;
});
el.addEventListener("mouseleave", () => {
this.tableHover = false;
this.tools.tableHover = false;
});
}
});
this.tablelable = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
this.tools.tablelable = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
: this.tableTitle;
this.dropCol = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
this.tools.dropCol = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
: this.tableTitle;
},
watch: {
showSubList(n) {
'bottomBox.showSubList': function(n) {
let vm = this;
this.$bottomBoxWindow.showSubListWatch(vm, n);
},
}
}
</script>
`

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

@@ -34,11 +34,12 @@
</div>
</div>
<div slot="content-right"class="slot-content">
<div class="main-list main-and-sub-transition" :class="{'main-list-with-sub': showSubList}">
<div class="top-tools" v-show="mainResizeShow">
<div class="top-tool-main-right" :class="{'top-tool-main-right-to-left': showSubList}">
<div class="main-list" :class="{'main-list-with-sub': bottomBox.showSubList}">
<div class="main-modal"></div>
<div class="top-tools" v-show="bottomBox.mainResizeShow">
<div class="top-tool-main-right" :class="{'top-tool-main-right-to-left': bottomBox.showSubList}">
<div class="top-tool-search">
<search-input ref="searchInput" :searchMsg="searchMsg" @search="search" :inTransform="inTransform"></search-input>
<search-input ref="searchInput" :searchMsg="searchMsg" @search="search" :inTransform="bottomBox.inTransform"></search-input>
</div>
<button type="button" @click="add" :title="$t('overall.createPrometheusServer')"
class="nz-btn nz-btn-size-normal nz-btn-style-light margin-l-20" id="prom-add">
@@ -47,10 +48,10 @@
</div>
<div class="pagination-top pagination-top-hide display-none"></div>
</div>
<el-table :data="tableData" border v-show="mainResizeShow" :height="mainTableHeight" style="width: 100%;"
v-loading="loading" ref="promTable" class="nz-table" v-scrollBar:el-table="'large'"
<el-table :data="tableData" border v-show="bottomBox.mainResizeShow" :height="mainTableHeight" style="width: 100%;"
v-loading="tools.loading" ref="promTable" class="nz-table" v-scrollBar:el-table="'large'"
@sort-change="tableDataSort">
<el-table-column :resizable="false" v-for="(item, index) in tablelable"
<el-table-column :resizable="false" v-for="(item, index) in tools.tablelable"
v-if="item.show"
:width="item.width"
:key="`col-${index}`"
@@ -89,25 +90,28 @@
</span>
</template>
<template v-slot="scope">
<button v-if="scope.$index == 0" class="to-top" :style="{top: toTopBtnTop}" :class="{'to-top-is-hover': tableHover}" v-show="showTopBtn && mainResizeShow" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
<button v-if="scope.$index == 0" class="to-top" :style="{top: tools.toTopBtnTop}" :class="{'to-top-is-hover': tools.tableHover}" v-show="tools.showTopBtn && bottomBox.mainResizeShow" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
</template>
</el-table-column>
</el-table>
<div class="pagination-bottom" v-show="!showSubList">
<div class="pagination-bottom" v-show="!bottomBox.showSubList">
<Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
</div>
</div>
<bottom-box v-if="showSubList" :show-sub-list="showSubList" :subResizeShow="subResizeShow" :obj="promServer" :isFullScreen="isFullScreen" :from="'promServer'" :targetTab.sync="targetTab" :detail="promDetail"
@closeSubList="showSubList = false" @fullScreen="fullScreen" @exitFullScreen="exitFullScreen" @listResize="listResize" ></bottom-box>
<transition name="el-zoom-in-bottom">
<bottom-box v-if="bottomBox.showSubList" :sub-resize-show="bottomBox.subResizeShow" :obj="bottomBox.promServer" :is-full-screen="bottomBox.isFullScreen" :from="'promServer'" :target-tab.sync="bottomBox.targetTab" :detail="bottomBox.promDetail"
@closeSubList="bottomBox.showSubList = false" @fullScreen="fullScreen" @exitFullScreen="exitFullScreen" @listResize="listResize" ></bottom-box>
</transition>
</div>
</left-menu>
<transition name="right-box">
<prom-server-box v-if="rightBox.show" :prom-server="promServer" @close="closeRightBox"></prom-server-box>
</transition>
<element-set
v-if="tools.showElementSet"
v-clickoutside="elementsetHide"
:table-title="tableTitle"
:dropCol="dropCol"
:dropCol="tools.dropCol"
@tablelable="tablelabelEmit"
ref="elementset"
></element-set>
@@ -125,33 +129,38 @@
},
data() {
return {
//底部上滑框相关
mainTableHeight: this.$tableHeight.normal, //主列表table高度
showSubList: false, //是否展示二级列表
targetTab: '', //展示二级列表中的哪个页签
showElementSet: false, //控制自定义列的弹框
inTransform: false, //搜索框相关，搜索条件下拉框是否在transform里
mainResizeShow: true, //dom高度改变时部分内容是否展示
//侧滑
rightBox: {
show: false,
},
/*二级页面相关*/
bottomBox: {
promDetail: {},
promServer: {},
mainResizeShow: true, //dom高度改变时是否展示|隐藏
subResizeShow: true,
isFullScreen: false,
promDetail: [],
//底部上滑框相关end
isFullScreen: false, //全屏状态
showSubList: false, //是否显示二级列表
targetTab: '', //显示二级列表中的哪个页签
inTransform: false, //搜索框相关，搜索条件下拉框是否在transform里
},
mainTableHeight: this.$tableHeight.normal, //主列表table高度
/*工具参数*/
tools: {
loading: false, //是否显示table加载动画
toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性
tableHover: false, //控制滚动条和top按钮同时出现
showElementSet: false, //自定义列弹框是否显示
showTopBtn: false, //显示To top按钮
tablelable: [], //从缓存中加载的table header
dropCol: [], //自定义列工具的数据
},
tableId: 'promTable', //需要分页的table的id，用于记录每页数量
showTopBtn: false,
rightBox: { //弹出框相关
show: false,
},
loading: false,
promServer: {
id: '',
host: '',
port: 9090,
idc: {id: '', name: '', location: ''}
},
promServer: {},
blankPromServer: {
id: '',
host: '',
@@ -186,7 +195,7 @@
prop: 'type',
show: true,
}, {
label: this.$t('asset.createAssetTab.state'),
label: this.$t('asset.state'),
prop: 'status',
show: true
}, {
@@ -200,8 +209,6 @@
width: 120
}
],
tablelable: [],
dropCol: [],
tableData: [],
dcData: [],
searchMsg: { //给搜索框子组件传递的信息
@@ -263,15 +270,15 @@
detail.push({label: "Host", value: obj.host});
detail.push({label: "Port", value: obj.port});
let type = "";
for (let i = 0; i < this.$CONSTANTS.promServer.typeOption.length; i++) {
if (obj.key == this.typeData[i].type) {
type = this.typeData[i].value;
for (let i = 0; i < this.$CONSTANTS.promServer.typeData.length; i++) {
if (obj.value == this.typeData[i].type) {
type = this.typeData[i].label;
break;
}
}
detail.push({label: this.$t('config.promServer.type'), value: type});
detail.push({
label: this.$t('asset.createAssetTab.state'),
label: this.$t('asset.state'),
value: obj.status,
type: 'status',
msg: this.$t('asset.assetStatPre')+(obj.checkTime ? obj.checkTime : this.$t('asset.assetStatDown'))
@@ -279,13 +286,14 @@
return detail;
},
elementsetShow(s, e) {
this.tools.showElementSet = true;
var eventfixed = {
shezhi: 0,
screen: 0
};
eventfixed[s] = 1;
e.preventDefault();
this.$store.commit('setHeaderTable', this.tablelable);
this.$store.commit('setHeaderTable', this.tools.tablelable);
this.$store.commit('setEventfixed', eventfixed);
const h = document.documentElement.clientHeight;
const w = document.documentElement.clientWidth;
@@ -306,7 +314,7 @@
tablelabelEmit(data) {
//获取子组件传过来的参数
this.$store.commit('setHeaderTable', data);
this.tablelable = data;
this.tools.tablelable = data;
},
edit(u) {
this.promServer = JSON.parse(JSON.stringify(u));
@@ -330,9 +338,9 @@
});
},
detail(u) {
this.promServer = JSON.parse(JSON.stringify(u));
this.targetTab = "detail";
this.showSubList = true;
this.bottomBox.promServer = JSON.parse(JSON.stringify(u));
this.bottomBox.targetTab = "detail";
this.bottomBox.showSubList = true;
},
add() {
this.promServer = this.newPromServer();
@@ -468,35 +476,35 @@
if (el._ps_) {
el.addEventListener("ps-scroll-y", () => {
if (el._ps_.scrollbarYTop > 50) {
this.showTopBtn = true;
this.bottomBox.showTopBtn = true;
} else {
this.showTopBtn = false;
this.bottomBox.showTopBtn = false;
}
});
el.addEventListener("mouseenter", () => {
this.tableHover = true;
this.tools.tableHover = true;
});
el.addEventListener("mouseleave", () => {
this.tableHover = false;
this.tools.tableHover = false;
});
}
});
this.tablelable = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
this.tools.tablelable = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
: this.tableTitle;
this.dropCol = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
this.tools.dropCol = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
: this.tableTitle;
},
watch: {
promServer: {
'bottomBox.promServer': {
deep: true,
handler(n) {
this.promDetail = this.convertToDetail(n);
this.bottomBox.promDetail = this.convertToDetail(n);
}
},
showSubList(n) {
'bottomBox.showSubList': function(n) {
let vm = this;
this.$bottomBoxWindow.showSubListWatch(vm, n);
}

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

@@ -1,4 +1,3 @@
<style scoped>
.el-row {
margin-bottom: 20px;
@@ -54,14 +53,13 @@
}
</style>
<template key="chartBox">
<div v-clickoutside="clickos">
<div v-clickoutside="clickOutside">
<panel-box :panel="panel" @reload="panelReload" ref="panelBox2" v-if="!showPanel.type"></panel-box>
<transition name="right-box">
<div class="right-box right-box-add-chart z-top right-box-chart" v-if="rightBox.show" >
<div class="right-box right-box-add-chart z-top right-box-chart">
<!-- begin--顶部按钮-->
<div class="right-box-top-btns">
<button id="chart-box-delete" type="button" v-if="chart.id != ''" @click="del(chart)" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light nz-btn-min-width-82">
<button id="chart-box-delete" type="button" v-if="chart.id" @click="del(chart)" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light nz-btn-min-width-82">
<span class="right-box-top-btn-icon"><i class="el-icon-delete"></i></span>
<span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
</button>
@@ -245,7 +243,6 @@
</button>
</div>
</div>
</transition>
<!--preview -->
<chart-preview :panelId="panelId" ref="chartsPreview" ></chart-preview>
</div>
@@ -275,10 +272,7 @@
mixins: [rz],
data() {
return {
rightBox: {
show: false,
title: this.$t('dashboard.panel.createChartTitle'),
},
rightBox: {title: ""},
statisticsList:[
{
id:"min",
@@ -408,7 +402,6 @@
'promql-input': promqlInput,
},
mounted() {
this.rightBox.show = true;
this.isUrl = false;
this.isSingleStat = false;
this.$nextTick(() => {
@@ -419,7 +412,7 @@
});
},
methods: {
clickos() {
clickOutside() {
this.esc();
},
toAddPanel() {
@@ -551,10 +544,7 @@
/*关闭弹框*/
esc() {
this.rightBox.show = false;
setTimeout(() => {
this.$emit("close");
}, 200);
},
/*metric部分相关方法--begin*/

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

@@ -193,7 +193,9 @@ instance_cpu_time_ns{app="fox", proc="widget", rev="4d3a513", env="prod", job="c
</div>
</div>
<transition name="right-box">
<chart-box v-if="rightBox.show" ref="addChartModal" @close="handleBox(false)" :panel-data="panelData" @on-create-success="createSuccess" :show-panel="{}"></chart-box>
</transition>
<element-set
:allowed-all="true"
v-clickoutside="elementsetHide"

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

@@ -63,10 +63,10 @@
<!--endpoint-->
<div slot="content-right" class="slot-content" v-show="pageType == 'endpoint'">
<!-- 主列表 -->
<div class="main-list main-and-sub-transition" :class="{'main-list-with-sub': showSubList}">
<div class="top-tools" v-show="mainResizeShow">
<!--<div class="pagination-top"></div>-->
<div class="top-tool-main-right" :class="{'top-tool-main-right-to-left': showSubList}">
<div class="main-list" :class="{'main-list-with-sub': bottomBox.showSubList}">
<div class="main-modal"></div>
<div class="top-tools" v-show="bottomBox.mainResizeShow">
<div class="top-tool-main-right" :class="{'top-tool-main-right-to-left': bottomBox.showSubList}">
<div class="top-tool-search"><search-input :searchMsg="endpointSearchMsg" @search="endpointSearch" ref="projectSearch"></search-input></div>
<export-excel
export-file-name="endpoint"
@@ -91,15 +91,15 @@
class="nz-table endpoint-table"
:height="mainTableHeight"
v-scrollBar:el-table="'large'"
v-show="mainResizeShow"
v-show="bottomBox.mainResizeShow"
ref="endpointTable"
v-loading="loading"
v-loading="tools.loading"
style="width: 100%;"
@sort-change="tableDataSort"
>
<el-table-column
:resizable="false"
v-for="(item, index) in tablelable"
v-for="(item, index) in tools.tablelable"
v-if="item.show"
:width="item.width"
:key="`col-${index}`"
@@ -147,36 +147,36 @@
</span>
</template>
<template v-slot="scope">
<button v-if="scope.$index == 0" class="to-top" :style="{top: toTopBtnTop}" :class="{'to-top-is-hover': tableHover}" v-show="showTopBtn && mainResizeShow" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
<button v-if="scope.$index == 0" class="to-top" :style="{top: tools.toTopBtnTop}" :class="{'to-top-is-hover': tools.tableHover}" v-show="tools.showTopBtn && bottomBox.mainResizeShow" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
</template>
</el-table-column>
</el-table>
<div class="pagination-bottom" v-show="!showSubList">
<div class="pagination-bottom" v-show="!bottomBox.showSubList">
<Pagination :tableId="tableId" v-cloak :pageObj="endpointPageObj" @pageNo='endpointPageNo' @pageSize='endpointPageSize' ref="endpointPagination"></Pagination>
</div>
</div>
<bottom-box v-if="showSubList" :show-sub-list="showSubList" :subResizeShow="subResizeShow" :isFullScreen="isFullScreen"
:from="'endpoint'" :targetTab.sync="targetTab" :detail="endpointDetail" :obj="curEndpoint" :assetDetail="assetDetail"
@closeSubList="showSubList = false" @fullScreen="fullScreen" @exitFullScreen="exitFullScreen" @listResize="listResize" ></bottom-box>
<transition name="el-zoom-in-bottom">
<bottom-box v-if="bottomBox.showSubList" :sub-resize-show="bottomBox.subResizeShow" :is-full-screen="bottomBox.isFullScreen"
:from="'endpoint'" :target-tab.sync="bottomBox.targetTab" :detail="bottomBox.endpointDetail" :obj="currentEndpoint" :asset-detail="bottomBox.assetDetail"
@closeSubList="bottomBox.showSubList = false" @fullScreen="fullScreen" @exitFullScreen="exitFullScreen" @listResize="listResize" ></bottom-box>
</transition>
</div>
<div slot="content-right" class="slot-content" v-show="pageType == 'project'">
<panel-tab from="project" :obj="currentProject" targetTab.sync="panel"></panel-tab>
</div>
</left-menu>
<element-set
v-if="tools.showElementSet"
v-clickoutside="elementsetHide"
:table-title="endpointTableTitle"
:dropCol="dropCol"
:drop-col="tools.dropCol"
@tablelable="tablelabelEmit"
ref="elementset"
></element-set>
<module-box :currentProject="currentProject" :module="editModule" @reload="getAllModuleList" ref="moduleBox"></module-box>
<module-box :current-project="currentProject" :module="editModule" @reload="getAllModuleList" ref="moduleBox"></module-box>
<edit-endpoint-box :project="currentProject" :module="currentModule" :post-endpoint="editEndpoint" @reload="getEndpointTableData" ref="editEndpointBox"></edit-endpoint-box>
<add-endpoint-box :currentProject="endpointEditInfos.project" :currentModule="endpointEditInfos.module" @reload="getEndpointTableData" ref="addEndpointBox"></add-endpoint-box>
<!--<asset-box :edit-unit-show='viewAssetState' @refreshData="getEndpointTableData" @sendStateData="tabControl"
ref="assetEditUnit"></asset-box>-->
<add-endpoint-box :current-project="endpointEditInfos.project" :current-module="endpointEditInfos.module" @reload="getEndpointTableData" ref="addEndpointBox"></add-endpoint-box>
</div>
</template>
@@ -187,7 +187,6 @@
import bus from '../../../libs/bus'
import panelTab from '../../common/bottomBox/tabs/panelTab'
var vm;
export default {
name: "project2",
components: {
@@ -196,28 +195,41 @@
'panel-tab': panelTab
},
data() {
vm = this;
return {
loading: false,
ready: false,
assetDetail: {}, //asset详情
/*二级页面相关*/
bottomBox: {
endpoint: {}, //asset详情
endpointDetail: [],
targetTab: '',
mainTableHeight: this.$tableHeight.normal, //主列表table高度
toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性
isFullScreen: false, //是否是全屏，用来控制拖动条是否展示
tableId: 'projectTable', //需要分页的table的id，用于记录每页数量
mainResizeShow: true, //dom高度改变时部分内容是否展示
subResizeShow: true,
mainListHeight: '', //主列表dom的高度
isFullScreen: false, //是否是全屏，用来控制拖动条是否展示,
showSubList: false,
targetTab: '',
},
mainTableHeight: this.$tableHeight.normal, //主列表table高度
ready: false,
/*工具参数*/
tools: {
loading: false, //是否显示table加载动画
toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性
tableHover: false, //控制滚动条和top按钮同时出现
showElementSet: false, //自定义列弹框是否显示
showTopBtn: false, //显示To top按钮
tablelable: [], //从缓存中加载的table header
dropCol: [], //自定义列工具的数据
},
tableId: 'projectTable', //需要分页的table的id，用于记录每页数量
endpointEditInfos:{
project:null,
module:null,
},
userData: [],
showTopBtn: false, //主列表top按钮
tableHover: false, //控制滚动条和top按钮同时出现
editEndpoint: {id: '', host: '', port: '', param: '', path: '', asset: {}, project: {}, module: {}, moduleId: '', assetId: '', paramObj: []},
endpointTableTitle: [
{
@@ -272,9 +284,8 @@
pageSize: 50,
total:0
},
curEndpoint: {},
tablelable: [],
dropCol: [],
currentEndpoint: {},
currentProjectTitle:'',
moduleList: [],
projectList: [],
@@ -299,21 +310,22 @@
disabled: false
}],
},
/*viewAssetState:false,*/
selectedEndpoints:[],//选中的metric{label='value'}
}
},
methods: {
// 全屏
fullScreen() {
let vm = this;
this.$bottomBoxWindow.fullScreen(vm);
},
// 退出全屏
exitFullScreen() {
let vm = this;
this.$bottomBoxWindow.exitFullScreen(vm);
},
// 鼠标拖动二级列表
listResize(e) {
let vm = this;
this.$bottomBoxWindow.listResize(vm, e);
},
elementsetShow(s, e) {
@@ -323,7 +335,7 @@
};
eventfixed[s] = 1;
e.preventDefault();
this.$store.commit('setHeaderTable', this.tablelable);
this.$store.commit('setHeaderTable', this.tools.tablelable);
this.$store.commit('setEventfixed', eventfixed);
const h = document.documentElement.clientHeight;
const w = document.documentElement.clientWidth;
@@ -339,12 +351,12 @@
},
elementsetHide() {
//悬浮点击空白隐藏
this.$refs.elementset.elementsetHide();
this.tools.showElementSet = false;
},
tablelabelEmit(data) {
//获取子组件传过来的参数
this.$store.commit('setHeaderTable', data);
this.tablelable = data;
this.tools.tablelable = data;
},
getEndpointTableData() {
if(this.currentModule&&this.currentModule.id){
@@ -352,9 +364,9 @@
this.endpointSearchLabel.moduleId = this.currentModule.id;
this.$set(this.endpointSearchLabel, 'pageNo', this.endpointPageObj.pageNo);
this.$set(this.endpointSearchLabel, 'pageSize', this.endpointPageObj.pageSize);
this.loading = true;
this.tools.loading = true;
this.$get('endpoint', this.endpointSearchLabel).then(response => {
this.loading = false;
this.tools.loading = false;
if (response.code === 200) {
for (let i = 0; i < response.data.list.length; i++) {
try {
@@ -501,9 +513,8 @@
this.currentModule = module;
this.endpointSearchLabel = {moduleId: ''};
this.$refs.projectSearch.clearSearch();
this.showSubList = false;
this.selectedEndpoints=[];
this.currentProject={};
this.bottomBox.showSubList = false;
this.currentProject = {};
},
//弹出endpoint编辑页
@@ -528,9 +539,9 @@
//查看endpoint详情
detail(endpoint) {
this.curEndpoint = Object.assign({}, endpoint);
this.targetTab = "panel";
this.showSubList = true;
this.currentEndpoint = Object.assign({}, endpoint);
this.bottomBox.targetTab = "panel";
this.bottomBox.showSubList = true;
},
initSnmpParam(module) {
this.$set(module, 'walk', []);
@@ -649,17 +660,17 @@
return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
},
viewAsset(endpoint) {
this.curEndpoint = Object.assign({}, endpoint);
this.targetTab = 'assetDetail';
this.showSubList = true;
this.currentEndpoint = Object.assign({}, endpoint);
this.bottomBox.targetTab = 'assetDetail';
this.bottomBox.showSubList = true;
/*this.viewAssetState=true;
this.$refs.assetEditUnit.getAssetData(id);
this.$refs.assetEditUnit.tabView=true;*/
},
showEndpoint(endpoint) {
this.curEndpoint = Object.assign({}, endpoint);
this.targetTab = 'endpointQuery';
this.showSubList = true;
this.currentEndpoint = Object.assign({}, endpoint);
this.bottomBox.targetTab = 'endpointQuery';
this.bottomBox.showSubList = true;
},
getStateContent:function(row){
if(row){
@@ -712,7 +723,7 @@
},
assetConvertToDetail(obj) {
let detail = JSON.parse(JSON.stringify(obj));
detail.state = obj.state == 1 ? this.$t('asset.createAssetTab.inStock'): this.$t('asset.createAssetTab.notInStock');
detail.state = obj.state == 1 ? this.$t('asset.inStock'): this.$t('asset.notInStock');
detail.assetType = obj.model.type.value;
detail.vendorModel = obj.model.vendor.value + " " + obj.model.name;
detail.dataCenter = obj.idc ? obj.idc.name : "";
@@ -728,47 +739,47 @@
detail.account = account.user;
let loginType = "";
if (account.authType == 1) {
loginType = this.$t('asset.createAssetTab.password');
loginType = this.$t('asset.password');
} else if (account.authType == 2) {
loginType = this.$t('asset.createAssetTab.ssh');
loginType = this.$t('asset.ssh');
}
detail.loginType = loginType;
detail.port = account.port;
}
/*detail.push({label: this.$t("asset.createAssetTab.sn"), value: obj.sn});
detail.push({label: this.$t("asset.createAssetTab.host"), value: obj.host});
detail.push({label: this.$t("asset.createAssetTab.state"), value: obj.state == 1 ? this.$t('asset.createAssetTab.inStock'): this.$t('asset.createAssetTab.notInStock')});
/*detail.push({label: this.$t("asset.sn"), value: obj.sn});
detail.push({label: this.$t("asset.host"), value: obj.host});
detail.push({label: this.$t("asset.state"), value: obj.state == 1 ? this.$t('asset.inStock'): this.$t('asset.notInStock')});
detail.push({label: this.$t("asset.tableTitle.modules"), value: obj.endpointNum});
detail.push({label: this.$t("asset.tableTitle.alerts"), value: obj.alertNum});
detail.push({label: this.$t("asset.createAssetTab.assetType"), value: obj.model.type.value});
detail.push({label: this.$t("asset.createAssetTab.vendorModel"), value: obj.model.vendor.value + " " + obj.model.name});
detail.push({label: this.$t("asset.createAssetTab.assetType"), value: obj.model.type.value});
detail.push({label: this.$t("asset.createAssetTab.purchaseDate"), value: obj.purchaseDate});
detail.push({label: this.$t("asset.createAssetTab.dcName"), value: obj.idc ? obj.idc.name : ""});
detail.push({label: this.$t("asset.createAssetTab.location"), value: obj.idc ? obj.idc.location : ""});
detail.push({label: this.$t("asset.createAssetTab.principal"), value: obj.idc ? this.getPrincipalName(obj.idc.principal) : ""});
detail.push({label: this.$t("asset.createAssetTab.location"), value: obj.idc ? obj.idc.location : ""});
detail.push({label: this.$t("asset.createAssetTab.tel"), value: obj.idc ? obj.idc.tel : ""});
detail.push({label: this.$t("asset.createAssetTab.cabinet"), value: obj.cabinet ? obj.cabinet.name : ""});
detail.push({label: this.$t("asset.assetType"), value: obj.model.type.value});
detail.push({label: this.$t("asset.vendorModel"), value: obj.model.vendor.value + " " + obj.model.name});
detail.push({label: this.$t("asset.assetType"), value: obj.model.type.value});
detail.push({label: this.$t("asset.purchaseDate"), value: obj.purchaseDate});
detail.push({label: this.$t("asset.dcName"), value: obj.idc ? obj.idc.name : ""});
detail.push({label: this.$t("asset.location"), value: obj.idc ? obj.idc.location : ""});
detail.push({label: this.$t("asset.principal"), value: obj.idc ? this.getPrincipalName(obj.idc.principal) : ""});
detail.push({label: this.$t("asset.location"), value: obj.idc ? obj.idc.location : ""});
detail.push({label: this.$t("asset.tel"), value: obj.idc ? obj.idc.tel : ""});
detail.push({label: this.$t("asset.cabinet"), value: obj.cabinet ? obj.cabinet.name : ""});
detail.push({label: this.$t("asset.editAssetTab.uSize"), value: obj.cabinet ? obj.cabinet.uSize : ""});
detail.push({label: this.$t("asset.editAssetTab.remark"), value: obj.idc ? obj.idc.remark : ""});
if (obj.accounts.length > 0) {
let account = obj.accounts[0];
if (account.protocol == 'SSH') {
detail.push({label: this.$t("asset.createAssetTab.protocol"), value: 'SSH'});
detail.push({label: this.$t("asset.createAssetTab.account"), value: account.user});
detail.push({label: this.$t("asset.protocol"), value: 'SSH'});
detail.push({label: this.$t("asset.account"), value: account.user});
let loginType = "";
if (account.authType == 1) {
loginType = this.$t('asset.createAssetTab.password');
loginType = this.$t('asset.password');
} else if (account.authType == 2) {
loginType = this.$t('asset.createAssetTab.ssh');
loginType = this.$t('asset.ssh');
}
detail.push({label: this.$t("asset.createAssetTab.loginType"), value: loginType});
detail.push({label: this.$t("asset.loginType"), value: loginType});
} else if (account.protocol == 'TELNET') {
detail.push({label: this.$t("asset.createAssetTab.protocol"), value: 'TELNET'});
detail.push({label: this.$t("asset.createAssetTab.account"), value: account.user});
detail.push({label: this.$t("asset.protocol"), value: 'TELNET'});
detail.push({label: this.$t("asset.account"), value: account.user});
}
detail.push({label: this.$t("asset.createAssetTab.port"), value: account.port});
detail.push({label: this.$t("asset.port"), value: account.port});
}*/
return detail;
},
@@ -842,17 +853,17 @@
if (el._ps_) {
el.addEventListener("ps-scroll-y", () => {
if (el._ps_.scrollbarYTop > 50) {
this.showTopBtn = true;
this.tools.showTopBtn = true;
} else {
this.showTopBtn = false;
this.tools.showTopBtn = false;
}
});
el.addEventListener("mouseenter", () => {
this.tableHover = true;
this.tools.tableHover = true;
});
el.addEventListener("mouseleave", () => {
this.tableHover = false;
this.tools.tableHover = false;
});
}
});
@@ -862,10 +873,10 @@
_this.$refs.leftScrollbar.update();
}
this.tablelable = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
this.tools.tablelable = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
: this.endpointTableTitle;
this.dropCol = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
this.tools.dropCol = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
: this.endpointTableTitle;
@@ -925,16 +936,17 @@
// this.getModuleList(this.currentProject.id);
this.getAllModuleList();
},
showSubList(n) {
"bottomBox.showSubList": function(n) {
let vm = this;
this.$bottomBoxWindow.showSubListWatch(vm, n);
},
curEndpoint: {
currentEndpoint: {
deep: true,
handler(n) {
this.endpointDetail = this.convertToDetail(n);
this.bottomBox.endpointDetail = this.convertToDetail(n);
this.$get('asset', {id: n.assetId}).then(response => {
if (response.code === 200) {
this.assetDetail = this.assetConvertToDetail(response.data.list[0]);
this.bottomBox.assetDetail = this.assetConvertToDetail(response.data.list[0]);
}
});
}

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

@@ -32,8 +32,6 @@ import projectBox from './components/common/rightBox/projectBox'; //project弹
import moduleBox from './components/common/rightBox/moduleBox'; //module弹框组件
import editEndpointBox from './components/common/rightBox/editEndpointBox'; //endpoint弹框组件
import addEndpointBox from './components/common/rightBox/addEndpointBox'; //endpoint弹框组件
import assetAddUnit from "./components/page/asset/assetAddUnit"; //资产添加组件
import assetEditUnit from "./components/page/asset/assetEditUnit"; //资产添加组件
import assetBox from "./components/common/rightBox/assetBox"; //资产添加组件
import alertConfigBox from "./components/common/rightBox/alertConfigBox"; //告警规则弹框组件
import dcConfigBox from "./components/common/popBox/dcConfig"; //idc配置弹框组件
@@ -56,8 +54,6 @@ Vue.component("module-box", moduleBox);
Vue.component("edit-endpoint-box", editEndpointBox);
Vue.component("add-endpoint-box", addEndpointBox);
Vue.component("asset-box", assetBox);
Vue.component("assetAddUnit", assetAddUnit);
Vue.component("assetEditUnit", assetEditUnit);
Vue.component("alert-config-box", alertConfigBox);
Vue.component("idc-config-box", dcConfigBox);
Vue.component("panel-box", panelBox);