temp: 左侧菜单重构（未完成）
This commit is contained in:
陈劲松
@@ -12,9 +12,6 @@ html {
|
||||
li{
|
||||
list-style-type:none ;
|
||||
}
|
||||
.content-box {
|
||||
height: calc(100% - 50px);
|
||||
}
|
||||
|
||||
.nz-icon-gear:before {
|
||||
color: #BA3939;
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="header">
|
||||
<div class="logo link" @click="jumpTo('overview')"><img height="45" src="../../assets/img/logo.png"/></div>
|
||||
<div class="logo link" @click="jumpTo('overview', 'dashboards')"><img height="45" src="../../assets/img/logo.png"/></div>
|
||||
<el-menu
|
||||
class="nz-menu float-right"
|
||||
mode="horizontal"
|
||||
@@ -40,25 +40,25 @@
|
||||
</el-menu-item>
|
||||
<el-submenu index="1" popper-class="nz-submenu">
|
||||
<template slot="title">
|
||||
<div @click="jumpTo('overview')" :class ="(activeIndex == 'overview' ||activeIndex == 'panel' || activeIndex == 'explore') ? 'menu-active' :'' " >
|
||||
<div @click="jumpTo('overview', 'dashboards')" :class ="(activeIndex == 'overview' ||activeIndex == 'panel' || activeIndex == 'explore') ? 'menu-active' :'' " >
|
||||
{{$t('overall.dashboard')}}
|
||||
</div>
|
||||
</template>
|
||||
<el-menu-item index="1-0">
|
||||
<div @click="jumpTo('overview')" :class="{'menu-item-active' :activeIndex == 'overview'}" >{{$t('dashboard.overview.title')}}</div>
|
||||
<div @click="jumpTo('overview', 'dashboards')" :class="{'menu-item-active' :activeIndex == 'overview'}" >{{$t('dashboard.overview.title')}}</div>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="1-1">
|
||||
<div @click="jumpTo('panel')" :class="{'menu-item-active' :activeIndex == 'panel'}" >{{$t('dashboard.panel.title')}}</div>
|
||||
<div @click="jumpTo('panel', 'dashboards')" :class="{'menu-item-active' :activeIndex == 'panel'}" >{{$t('dashboard.panel.title')}}</div>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="1-2">
|
||||
<div @click="jumpTo('explore')" :class="{'menu-item-active' :activeIndex == 'explore'}">{{$t('dashboard.metricPreview.title')}}</div>
|
||||
<div @click="jumpTo('explore', 'dashboards')" :class="{'menu-item-active' :activeIndex == 'explore'}">{{$t('dashboard.metricPreview.title')}}</div>
|
||||
</el-menu-item>
|
||||
</el-submenu>
|
||||
|
||||
<el-submenu index="3" popper-class="nz-submenu">
|
||||
<template slot="title">
|
||||
<div v-if="assetData.length == 0">{{$t('overall.asset')}}</div>
|
||||
<div v-else @click="jumpTo('asset')" :class="{'menu-active' : activeIndex == 'asset'}">{{$t('overall.asset')}}</div>
|
||||
<div v-else @click="jumpTo('asset', 3)" :class="{'menu-active' : activeIndex == 'asset'}">{{$t('overall.asset')}}</div>
|
||||
</template>
|
||||
<template>
|
||||
<el-menu-item v-if="assetData.length == 0" index="3-0"><div @click="createBox({type: 6})"><i class="nz-icon nz-icon-create-square header-dropdown-add"></i> {{$t("overall.createDatacenter")}}</div></el-menu-item>
|
||||
@@ -74,7 +74,7 @@
|
||||
<el-submenu index="2" popper-class="nz-submenu">
|
||||
<template slot="title">
|
||||
<div v-if="projectData.length == 0">{{$t('overall.project')}}</div>
|
||||
<div v-else @click="jumpToProject(projectData[0], 0)" :class ="activeIndex == 'project' ? 'menu-active' :''" >{{$t('overall.project')}}</div>
|
||||
<div v-else @click="jumpToProject(projectData[0])" :class ="activeIndex == 'project' ? 'menu-active' :''" >{{$t('overall.project')}}</div>
|
||||
</template>
|
||||
<template>
|
||||
<el-menu-item v-if="projectData.length == 0" index="2-0"><div @click="createBox({type: 1})"><i class="nz-icon nz-icon-create-square header-dropdown-add"></i> {{$t("overall.createProject")}}</div></el-menu-item>
|
||||
@@ -88,44 +88,44 @@
|
||||
</template>
|
||||
</template>
|
||||
</el-submenu>
|
||||
<el-submenu index="4-0" popper-class="nz-submenu">
|
||||
<el-submenu index="4" popper-class="nz-submenu">
|
||||
<template slot="title">
|
||||
<div @click="jumpTo('alertList')" :class ="activeIndex == 'alertList' || activeIndex == 'alertConfig' ? 'menu-active' :''">{{$t('overall.alert')}}</div>
|
||||
<div @click="jumpTo('alertList', 'alerts')" :class ="activeIndex == 'alertList' || activeIndex == 'alertConfig' ? 'menu-active' :''">{{$t('overall.alert')}}</div>
|
||||
</template>
|
||||
<el-menu-item index="4-1">
|
||||
<div @click="jumpTo('alertList')" :class ="activeIndex == 'alertList' ? 'menu-item-active' :''">{{$t('alert.message')}}</div>
|
||||
<div @click="jumpTo('alertList', 'alerts')" :class ="activeIndex == 'alertList' ? 'menu-item-active' :''">{{$t('alert.message')}}</div>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="4-2">
|
||||
<div @click="jumpTo('alertConfig')" :class ="activeIndex == 'alertConfig' ? 'menu-item-active' :''">{{$t('alert.rule')}}</div>
|
||||
<div @click="jumpTo('alertConfig', 'alerts')" :class ="activeIndex == 'alertConfig' ? 'menu-item-active' :''">{{$t('alert.rule')}}</div>
|
||||
</el-menu-item>
|
||||
</el-submenu>
|
||||
<el-submenu index="5" popper-class="nz-submenu">
|
||||
<template slot="title">
|
||||
<div @click="jumpTo('account')" :class ="activeIndex == 'account' || activeIndex == 'promServer' || activeIndex == 'dc' || activeIndex == 'model' || activeIndex == 'mib' || activeIndex == 'system' || activeIndex == 'terminallog' || activeIndex == 'operationlog' ? 'menu-active' :''">{{$t('overall.config')}}</div>
|
||||
<div @click="jumpTo('account', 'settings')" :class ="activeIndex == 'account' || activeIndex == 'promServer' || activeIndex == 'dc' || activeIndex == 'model' || activeIndex == 'mib' || activeIndex == 'system' || activeIndex == 'terminallog' || activeIndex == 'operationlog' ? 'menu-active' :''">{{$t('overall.config')}}</div>
|
||||
</template>
|
||||
<el-menu-item index="5-0">
|
||||
<div @click="jumpTo('account')" :class="{'menu-item-active' :(activeIndex == 'account' )}">{{$t('config.account.account')}}</div>
|
||||
<div @click="jumpTo('account', 'settings')" :class="{'menu-item-active' :(activeIndex == 'account' )}">{{$t('config.account.account')}}</div>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="5-1">
|
||||
<div @click="jumpTo('promServer')" :class="{'menu-item-active' :(activeIndex == 'promServer' )}">{{$t('config.promServer.promServerList')}}</div>
|
||||
<div @click="jumpTo('promServer', 'settings')" :class="{'menu-item-active' :(activeIndex == 'promServer' )}">{{$t('config.promServer.promServerList')}}</div>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="5-2">
|
||||
<div @click="jumpTo('dc')" :class="{'menu-item-active' :(activeIndex == 'dc' )}">{{$t('config.dc.dc')}}</div>
|
||||
<div @click="jumpTo('dc', 'settings')" :class="{'menu-item-active' :(activeIndex == 'dc' )}">{{$t('config.dc.dc')}}</div>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="5-3">
|
||||
<div @click="jumpTo('model')" :class="{'menu-item-active' :(activeIndex == 'model' )}">{{$t('config.model.model')}}</div>
|
||||
<div @click="jumpTo('model', 'settings')" :class="{'menu-item-active' :(activeIndex == 'model' )}">{{$t('config.model.model')}}</div>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="5-4">
|
||||
<div @click="jumpTo('mib')" :class="{'menu-item-active' :(activeIndex == 'mib' )}">{{$t('config.mib.mib')}}</div>
|
||||
<div @click="jumpTo('mib', 'settings')" :class="{'menu-item-active' :(activeIndex == 'mib' )}">{{$t('config.mib.mib')}}</div>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="5-5">
|
||||
<div @click="jumpTo('system')" :class="{'menu-item-active' :(activeIndex == 'system' )}">{{$t('config.system.system')}}</div>
|
||||
<div @click="jumpTo('system', 'settings')" :class="{'menu-item-active' :(activeIndex == 'system' )}">{{$t('config.system.system')}}</div>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="5-6">
|
||||
<div @click="jumpTo('terminallog')" :class="{'menu-item-active' :(activeIndex == 'terminallog' )}">{{$t('config.terminallog.terminallog')}}</div>
|
||||
<div @click="jumpTo('terminallog', 'settings')" :class="{'menu-item-active' :(activeIndex == 'terminallog' )}">{{$t('config.terminallog.terminallog')}}</div>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="5-7">
|
||||
<div @click="jumpTo('operationlog')" :class="{'menu-item-active' :(activeIndex == 'operationlog' )}">{{$t('config.operationlog.operationlog')}}</div>
|
||||
<div @click="jumpTo('operationlog', 'settings')" :class="{'menu-item-active' :(activeIndex == 'operationlog' )}">{{$t('config.operationlog.operationlog')}}</div>
|
||||
</el-menu-item>
|
||||
</el-submenu>
|
||||
<el-submenu index="6" popper-class="nz-submenu">
|
||||
@@ -278,7 +278,11 @@
|
||||
cli(){
|
||||
this.$store.commit('openConsole');
|
||||
},
|
||||
jumpTo(data) {
|
||||
jumpTo(data, parentMenu) {
|
||||
localStorage.setItem("nz-parent-menu", parentMenu);
|
||||
localStorage.setItem("nz-menu", "/" + data);
|
||||
bus.$emit("parent-menu-change", parentMenu);
|
||||
bus.$emit("menu-change", "/" + data);
|
||||
if (data != "asset") {
|
||||
this.activeItemIndexes = [];
|
||||
this.$store.state.assetData = {selectedData: [], step: 0, type: -1};
|
||||
@@ -338,13 +342,13 @@
|
||||
jumpToAsset(asset) {
|
||||
this.activeItemIndex = asset.id;
|
||||
this.$store.commit('currentAssetChange', asset);
|
||||
this.jumpTo('asset');
|
||||
this.jumpTo('asset', "assets");
|
||||
},
|
||||
jumpToProject(p) {
|
||||
this.currentProject = p;
|
||||
this.$store.commit('currentProjectChange', p);
|
||||
this.activeItemIndex = p.id;
|
||||
this.jumpTo('project');
|
||||
this.jumpTo('project', 'projects');
|
||||
},
|
||||
getAssetData() {
|
||||
this.$get('idc', {pageSize:-1}).then(response => {
|
||||
@@ -418,6 +422,7 @@
|
||||
this.rightBox.project.show = true;
|
||||
},
|
||||
logout() {
|
||||
localStorage.setItem("nz-parent-menu", "dashboards");
|
||||
this.$get('logout');
|
||||
this.jumpTo('login');
|
||||
},
|
||||
@@ -446,9 +451,11 @@
|
||||
// 刷新后有高亮
|
||||
let activePath = this.$route.path.slice(1);
|
||||
this.activeIndex = activePath;
|
||||
bus.$on("menu-change", (menu) => {
|
||||
this.activeIndex = menu;
|
||||
|
||||
bus.$on("menu-change", menu => {
|
||||
this.activeIndex = menu.split("/")[1];
|
||||
});
|
||||
|
||||
bus.$on('login', () => {
|
||||
this.username = sessionStorage.getItem("nz-username");
|
||||
this.refreshLang();
|
||||
@@ -472,14 +479,13 @@
|
||||
},
|
||||
linkData(){
|
||||
return this.$store.getters.getLinkData;
|
||||
}
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
projectListChange(n) {
|
||||
this.getProjectList();
|
||||
},
|
||||
dcListChange(n) {
|
||||
console.info(n)
|
||||
this.getAssetData();
|
||||
},
|
||||
currentProjectChange(n, o) {
|
||||
|
||||
@@ -1,22 +1,25 @@
|
||||
<template>
|
||||
<div>
|
||||
<Header ref="header"></Header>
|
||||
<div class="content-box" >
|
||||
<router-view/>
|
||||
</div>
|
||||
<web-ssh ref="webSsh" ></web-ssh>
|
||||
</div>
|
||||
<div>
|
||||
<Header ref="header"></Header>
|
||||
<!--<div class="content-box" >
|
||||
<router-view/>
|
||||
</div>-->
|
||||
<left-menu></left-menu>
|
||||
<web-ssh ref="webSsh" ></web-ssh>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Header from "./header";
|
||||
import webSSH from "../cli/webSSH";
|
||||
import leftMenu from "./leftMenu";
|
||||
export default {
|
||||
name: "home",
|
||||
components: {
|
||||
Header,
|
||||
'web-ssh':webSSH,
|
||||
'web-ssh': webSSH,
|
||||
'left-menu': leftMenu
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,35 +1,280 @@
|
||||
<template>
|
||||
<div class="content">
|
||||
<div class="content-left left-slot" :class="{'left-slot-shrink':isShrink}">
|
||||
<slot name="content-left"></slot>
|
||||
<div @click="toggleStat" class="bottom-icon">
|
||||
<div class="bottom-divider"></div>
|
||||
<div style="display: inline-block;float: right;margin-right:15px;"><i style="font-size: 24px;" :class="{'nz-icon nz-icon-push-pin-line':isShrink,'nz-icon nz-icon-push-pin-fill':!isShrink}" :style="{color:!isShrink?'#EE9D3F':''}"></i></div>
|
||||
</div>
|
||||
</div><div class="content-right right-slot" :class="{'right-slot-open':isShrink}">
|
||||
<slot name="content-right" ></slot>
|
||||
<div class="content">
|
||||
<div class="content-left left-slot" :class="{'left-slot-shrink': isShrink}">
|
||||
<div class="sidebar-title too-long-split">{{menus[parentMenu].title}}</div>
|
||||
<div class="sidebar-info">
|
||||
<template v-if="parentMenu == 'projects'">
|
||||
<el-collapse v-model="currentProjectTitle" class="left-menu-bg" accordion style="padding-top: 0px;" ref="projectLeft">
|
||||
<el-collapse-item v-for="(item,index) in projectList" :key="item.name+item.id+index" :name="item.name+'-'+item.id">
|
||||
<template slot="title">
|
||||
<div class="sidebar-info-item" :class="{'sidebar-info-item-active': item.id == currentProject.id}" @click="detailProject($event, item)" :id="'project-module-'+item.id">
|
||||
<div class="sidebar-info-item-txt">
|
||||
<el-popover v-if="item.name.length > 14" trigger="hover" placement="top-start" :content="item.name" popper-class="transparent-pop">
|
||||
<span slot="reference" class="">
|
||||
{{item.name}}
|
||||
</span>
|
||||
</el-popover>
|
||||
<span v-else>{{item.name}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div class="sidebar-info sub-sidebar-info" >
|
||||
<div v-if="getProjectModule(item.id).length == 0" class="sidebar-info-item sidebar-info-item-add" @click="addModule">
|
||||
<i class="nz-icon nz-icon-create-square"></i>
|
||||
</div>
|
||||
<template v-else>
|
||||
<div v-for="module in getProjectModule(item.id)" class="sidebar-info-sub-item" :class="{'sidebar-info-item-active': module.id == currentModule.id}" @click="changeModule(item, module)" :id="'project-module-'+module.id">
|
||||
<div :id="`module-${module.id}`" class="item-tip">
|
||||
<div class="item-tip-hide item-tip-key el-popover" :class="itemTip(module.id, module.name, ready)">{{module.name}}</div>
|
||||
<span class="too-long-split" style="width: 120px;">{{module.name}}</span>
|
||||
<div v-show="module.buildIn != 1" class="hid-div side-bar-menu-edit sub-side-bar-menu-edit" @click.stop="editModule(module)" :id="'project-module-edit-'+module.id" ><i class="nz-icon nz-icon-edit"></i></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
</template>
|
||||
<template v-else-if="parentMenu == 'assets'">
|
||||
|
||||
</template>
|
||||
<template v-else>
|
||||
<div v-for="menu in menus[parentMenu].menu" class="sidebar-info-item" :class="{'sidebar-info-item-active': menu.route == active}" @click="jumpTo(menu.route)">
|
||||
{{menu.name}}
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div @click="toggleStat" class="bottom-icon">
|
||||
<div class="bottom-divider"></div>
|
||||
<div style="display: inline-block;float: right;margin-right:15px;"><i style="font-size: 24px;" :class="{'nz-icon nz-icon-push-pin-line': isShrink, 'nz-icon nz-icon-push-pin-fill': !isShrink}" :style="{color : !isShrink ? '#EE9D3F' : ''}"></i></div>
|
||||
</div>
|
||||
</div><div class="content-right right-slot" :class="{'right-slot-open': isShrink}">
|
||||
<router-view/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import bus from "../../libs/bus";
|
||||
|
||||
export default {
|
||||
name: "leftMenu",
|
||||
props:{
|
||||
resizeFunc:{type:Function}
|
||||
props: {
|
||||
resizeFunc: Function,
|
||||
},
|
||||
data(){
|
||||
data() {
|
||||
return{
|
||||
isShrink: this.$store.state.leftMenuStat,
|
||||
isShrink: localStorage.getItem('nz-left-menu-shrink') == 'true',
|
||||
parentMenu: "dashboards",
|
||||
active: "overview",
|
||||
|
||||
projectList: [],
|
||||
moduleList: [],
|
||||
currentProjectTitle: '',
|
||||
currentProject: {id: '', name: '', remark: ''}, //endpoint弹框、module列表用来回显project
|
||||
module: {}, //编辑的module
|
||||
blankModule: {id: '', type: '', name: '', project: {}, port: '', path: '', param: '', paramObj: [], snmpParam: ''}, //空白module
|
||||
currentModule: {id: '', type: '', name: '', project: {}, port: '', path: '', param: '', paramObj: [], snmpParam: ''}, //用来回显的module
|
||||
|
||||
menus: {
|
||||
settings: {
|
||||
title: this.$t('overall.config'),
|
||||
menu: [
|
||||
{route: '/account', name: this.$t('config.account.account')},
|
||||
{route: '/promServer', name: this.$t('config.promServer.promServerList')},
|
||||
{route: '/dc', name: this.$t('config.dc.dc')},
|
||||
{route: '/model', name: this.$t('config.model.model')},
|
||||
{route: '/mib', name: this.$t('config.mib.mib')},
|
||||
{route: '/system', name: this.$t('config.system.system')},
|
||||
{route: '/terminallog', name: this.$t('config.terminallog.terminallog')},
|
||||
{route: '/operationlog', name: this.$t('config.operationlog.operationlog')},
|
||||
],
|
||||
},
|
||||
alerts: {
|
||||
title: this.$t('alert.alert'),
|
||||
menu: [
|
||||
{route: '/alertList', name: this.$t('alert.alertList')},
|
||||
{route: '/alertConfig', name: this.$t('alert.alertConfig')},
|
||||
],
|
||||
},
|
||||
dashboards: {
|
||||
title: this.$t('dashboard.title'),
|
||||
menu: [
|
||||
{route: '/overview', name: this.$t('dashboard.overview.title')},
|
||||
{route: '/panel', name: this.$t('dashboard.panel.title')},
|
||||
{route: '/explore', name: this.$t('dashboard.metricPreview.title')},
|
||||
],
|
||||
},
|
||||
}
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
toggleStat:function(){
|
||||
this.isShrink=!this.isShrink;
|
||||
this.$store.commit('setLeftMenuStat',this.isShrink);
|
||||
if(this.resizeFunc){
|
||||
computed: {
|
||||
route() {
|
||||
return this.$route.path;
|
||||
},
|
||||
itemTip() {
|
||||
return function(id, content, ready) {
|
||||
let className = "item-tip-show";
|
||||
this.$nextTick(() => {
|
||||
if (ready) {
|
||||
let cellDom = document.querySelector(`#module-${id}`);
|
||||
let spanDom = document.querySelector(`#module-${id}>span`);
|
||||
if (cellDom.offsetWidth - 16 <= spanDom.offsetWidth) {
|
||||
document.querySelector(`#module-${id}>.el-popover`).classList.add(className);
|
||||
} else {
|
||||
document.querySelector(`#module-${id}>.el-popover`).classList.remove(className);
|
||||
}
|
||||
}
|
||||
});
|
||||
return "";
|
||||
}
|
||||
},
|
||||
projectListChange() {
|
||||
return this.$store.state.projectListChange;
|
||||
},
|
||||
moduleListChange() {
|
||||
return this.$store.state.moduleListChange;
|
||||
},
|
||||
currentProjectChange() {
|
||||
return this.$store.state.currentProject;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
route: {
|
||||
deep: true,
|
||||
immediate: true,
|
||||
handler(n) {
|
||||
this.active = n;
|
||||
}
|
||||
},
|
||||
projectListChange(n) {
|
||||
this.getProjectList();
|
||||
},
|
||||
moduleListChange(n) {
|
||||
this.getModuleList();
|
||||
},
|
||||
endpointListChange(n) {
|
||||
this.getEndpointTableData();
|
||||
},
|
||||
currentProjectChange: {
|
||||
immediate: true,
|
||||
handler(n, o) {
|
||||
if (n && n.id != this.currentProject.id) {
|
||||
this.currentProject = this.projectList.find(p => {
|
||||
return p.id == n.id;
|
||||
});
|
||||
if (this.currentProject && this.currentProject.id) {
|
||||
this.detailProject(null, this.currentProject);
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
currentProject(n, o) {
|
||||
bus.$emit("current-project-change", n);
|
||||
},
|
||||
currentModule(n, o) {
|
||||
bus.$emit("current-module-change", n);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
Promise.all([this.getProjectList(), this.getModuleList()]).then(response => {
|
||||
let cacheParentMenu = localStorage.getItem('nz-parent-menu');
|
||||
let cacheMenu = localStorage.getItem('nz-menu');
|
||||
if (cacheParentMenu) {
|
||||
this.parentMenu = cacheParentMenu;
|
||||
} else {
|
||||
this.parentMenu = "dashboards";
|
||||
}
|
||||
if (cacheMenu) {
|
||||
this.active = cacheMenu;
|
||||
} else {
|
||||
if (this.parentMenu == 'projects') {
|
||||
this.projectList.length > 0 && (this.active = this.projectList[0].name)
|
||||
} else if (this.parentMenu == 'assets') {
|
||||
|
||||
} else {
|
||||
this.active = this.menus[this.parentMenu].menu[0].route;
|
||||
}
|
||||
}
|
||||
bus.$on("parent-menu-change", parentMenu => {
|
||||
this.parentMenu = parentMenu;
|
||||
});
|
||||
bus.$on("menu-change", menu => {
|
||||
this.active = menu;
|
||||
});
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
toggleStat() {
|
||||
this.isShrink = !this.isShrink;
|
||||
localStorage.setItem('nz-left-menu-shrink', this.isShrink);
|
||||
if (this.resizeFunc) {
|
||||
this.resizeFunc();
|
||||
}
|
||||
},
|
||||
getProjectList() {
|
||||
return new Promise(resolve => {
|
||||
this.$get('project', {pageSize: -1}).then(response=>{
|
||||
if(response.code == 200){
|
||||
this.projectList = response.data.list;
|
||||
}
|
||||
resolve(this.projectList);
|
||||
});
|
||||
});
|
||||
},
|
||||
getProjectModule(projectId) {
|
||||
let moduleList = JSON.parse(JSON.stringify(this.moduleList));
|
||||
return moduleList.filter((item,index) => {
|
||||
return item.project.id == projectId;
|
||||
})
|
||||
},
|
||||
getModuleList() {
|
||||
return new Promise(resolve => {
|
||||
this.$get('module', { pageSize: -1, pageNo: 1}).then(response => {
|
||||
if (response.code === 200) {
|
||||
this.moduleList = response.data.list;
|
||||
for (let i = 0; i < this.moduleList.length; i++) {
|
||||
try {
|
||||
let tempObj = JSON.parse(this.moduleList[i].param);
|
||||
this.$set(this.moduleList[i], 'paramObj', []);
|
||||
for (let k in tempObj) {
|
||||
this.moduleList[i].paramObj.push({key: k, value: tempObj[k]});
|
||||
}
|
||||
} catch (err) {}
|
||||
}
|
||||
}
|
||||
resolve(this.moduleList);
|
||||
});
|
||||
});
|
||||
},
|
||||
//左侧module列表选中切换
|
||||
changeModule(project, module) {
|
||||
this.currentModule = module;
|
||||
this.currentProject = project;
|
||||
},
|
||||
detailProject(event, project) {
|
||||
bus.$emit("project-pageType", "project");
|
||||
if(event) {
|
||||
if(project) {
|
||||
this.currentProject = project;
|
||||
}
|
||||
} else {
|
||||
this.currentProjectTitle = project.id + "";
|
||||
}
|
||||
this.currentModule = {};
|
||||
},
|
||||
|
||||
|
||||
jumpTo(route) {
|
||||
bus.$emit("menu-change", route);
|
||||
localStorage.setItem('nz-parent-menu', this.parentMenu);
|
||||
localStorage.setItem('menu-change', route);
|
||||
this.$router.push({
|
||||
path: route,
|
||||
query: {
|
||||
t: +new Date()
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
}
|
||||
@@ -37,8 +282,8 @@
|
||||
|
||||
<style scoped lang="scss">
|
||||
.content{
|
||||
height: 100%;
|
||||
position:relative;
|
||||
position: relative;
|
||||
height: calc(100% - 50px);
|
||||
}
|
||||
.slot-content{
|
||||
height: 100%;
|
||||
|
||||
@@ -5,103 +5,90 @@
|
||||
</style>
|
||||
<template>
|
||||
<div class="config">
|
||||
<left-menu >
|
||||
<div slot="content-left" class="slot-content">
|
||||
<div class="sidebar-title">{{$t('alert.alert')}}</div>
|
||||
<div class="sidebar-info">
|
||||
<div class="sidebar-info-item sidebar-info-top" @click="jumpTo('alertList')" id="alert-jump-alertlist">
|
||||
{{$t('alert.alertList')}}
|
||||
<div class="main-list" :class="{'main-list-with-sub': bottomBox.showSubList}">
|
||||
<div class="main-modal"></div>
|
||||
<div class="top-tools" v-show="bottomBox.mainResizeShow">
|
||||
<div class="top-tool-main-right" :class="{'top-tool-main-right-to-left': bottomBox.showSubList}">
|
||||
<div class="top-tool-search float-right">
|
||||
<search-input :searchMsg="searchMsg" @search="search" :bottomBox.inTransform="bottomBox.inTransform"></search-input>
|
||||
</div>
|
||||
<div class="sidebar-info-item sidebar-info-item-active">{{$t('alert.alertConfig')}}</div>
|
||||
<button id="alert-add" @click="add" :title="$t('overall.createAlertRule')"
|
||||
class="nz-btn nz-btn-size-normal nz-btn-style-light margin-l-20">
|
||||
<i class="nz-icon-create-square nz-icon"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="pagination-top pagination-top-hide display-none"></div>
|
||||
</div>
|
||||
<div slot="content-right" class="slot-content">
|
||||
<div class="main-list" :class="{'main-list-with-sub': bottomBox.showSubList}">
|
||||
<div class="main-modal"></div>
|
||||
<div class="top-tools" v-show="bottomBox.mainResizeShow">
|
||||
<div class="top-tool-main-right" :class="{'top-tool-main-right-to-left': bottomBox.showSubList}">
|
||||
<div class="top-tool-search float-right">
|
||||
<search-input :searchMsg="searchMsg" @search="search" :bottomBox.inTransform="bottomBox.inTransform"></search-input>
|
||||
</div>
|
||||
<button id="alert-add" @click="add" :title="$t('overall.createAlertRule')"
|
||||
class="nz-btn nz-btn-size-normal nz-btn-style-light margin-l-20">
|
||||
<i class="nz-icon-create-square nz-icon"></i>
|
||||
</button>
|
||||
<el-table
|
||||
class="nz-table"
|
||||
:data="tableData"
|
||||
border
|
||||
v-show="bottomBox.mainResizeShow"
|
||||
ref="alertRuleTable"
|
||||
tooltip-effect="light"
|
||||
:height="mainTableHeight"
|
||||
v-scrollBar:el-table="'large'"
|
||||
v-loading="tools.loading"
|
||||
:cell-class-name="messageStyle"
|
||||
style="width: 100%;"
|
||||
@sort-change="tableDataSort"
|
||||
>
|
||||
<el-table-column
|
||||
:resizable="false"
|
||||
v-for="(item, index) in tools.tablelable"
|
||||
v-if="item.show"
|
||||
:width="item.width"
|
||||
:key="`col-${index}`"
|
||||
:label="item.label"
|
||||
show-overflow-tooltip
|
||||
min-width="110px"
|
||||
:sort-orders="['ascending', 'descending']"
|
||||
:sortable="sortableShow(item.prop)"
|
||||
:prop="propTitle(item.prop)"
|
||||
>
|
||||
<template slot-scope="scope" :column="item">
|
||||
<div v-if="item.prop == 'option'" class="content-right-options">
|
||||
<span :title="$t('overall.view')" @click="detail(scope.row)" class="content-right-option" :id="'alert-detail-'+scope.row.id"><i class="nz-icon nz-icon-view"></i></span>
|
||||
<span v-if="scope.row.buildIn != 1" :title="$t('overall.edit')" @click="edit(scope.row)" class="content-right-option" :id="'alert-edit-'+scope.row.id"><i class="nz-icon nz-icon-edit"></i></span>
|
||||
<span :title="$t('overall.delete')" @click="del(scope.row)" class="content-right-option" :id="'alert-del-'+scope.row.id"><i class="el-icon-delete"></i></span>
|
||||
</div>
|
||||
<div class="pagination-top pagination-top-hide display-none"></div>
|
||||
</div>
|
||||
<el-table
|
||||
class="nz-table"
|
||||
:data="tableData"
|
||||
border
|
||||
v-show="bottomBox.mainResizeShow"
|
||||
ref="alertRuleTable"
|
||||
tooltip-effect="light"
|
||||
:height="mainTableHeight"
|
||||
v-scrollBar:el-table="'large'"
|
||||
v-loading="tools.loading"
|
||||
:cell-class-name="messageStyle"
|
||||
style="width: 100%;"
|
||||
@sort-change="tableDataSort"
|
||||
>
|
||||
<el-table-column
|
||||
:resizable="false"
|
||||
v-for="(item, index) in tools.tablelable"
|
||||
v-if="item.show"
|
||||
:width="item.width"
|
||||
:key="`col-${index}`"
|
||||
:label="item.label"
|
||||
show-overflow-tooltip
|
||||
min-width="110px"
|
||||
:sort-orders="['ascending', 'descending']"
|
||||
:sortable="sortableShow(item.prop)"
|
||||
:prop="propTitle(item.prop)"
|
||||
>
|
||||
<template slot-scope="scope" :column="item">
|
||||
<div v-if="item.prop == 'option'" class="content-right-options">
|
||||
<span :title="$t('overall.view')" @click="detail(scope.row)" class="content-right-option" :id="'alert-detail-'+scope.row.id"><i class="nz-icon nz-icon-view"></i></span>
|
||||
<span v-if="scope.row.buildIn != 1" :title="$t('overall.edit')" @click="edit(scope.row)" class="content-right-option" :id="'alert-edit-'+scope.row.id"><i class="nz-icon nz-icon-edit"></i></span>
|
||||
<span :title="$t('overall.delete')" @click="del(scope.row)" class="content-right-option" :id="'alert-del-'+scope.row.id"><i class="el-icon-delete"></i></span>
|
||||
</div>
|
||||
<span v-else-if="item.prop == 'severity'">
|
||||
<span v-if="scope.row[item.prop] == 'high'"><i class="el-icon-arrow-up"></i> {{$CONSTANTS.alertMessage.severityData.find(s => {return s.key == 'high'})}}</span>
|
||||
<span style="padding-left: 18px;" v-if="scope.row[item.prop] == 'medium'">{{$CONSTANTS.alertMessage.severityData.find(s => {return s.key == 'medium'})}}</span>
|
||||
<span v-if="scope.row[item.prop] == 'low'"><i class="el-icon-arrow-down"></i> {{$CONSTANTS.alertMessage.severityData.find(s => {return s.key == 'low'})}}</span>
|
||||
</span>
|
||||
<template v-else-if="item.prop == 'alertNum'">
|
||||
<span class="link" @click="queryMessage(scope.row)">{{scope.row.alertNum + ' ' + $t('overall.active')}}</span>
|
||||
</template>
|
||||
<template v-else-if="item.prop == 'threshold'">
|
||||
<span >{{formatThreshold(scope.row[item.prop],scope.row.unit)}}</span>
|
||||
</template>
|
||||
<template v-else-if="item.prop == 'receivers'">
|
||||
<el-tag effect="dark" v-if="user.userName" :key="index" size="mini" v-for="(user, index) in scope.row[item.prop]" class="alert-rule-tag">{{user.userName}} </el-tag>
|
||||
</template>
|
||||
<span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
|
||||
<template v-else>-</template>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column width="28" :resizable="false">
|
||||
<template slot="header" slot-scope="scope">
|
||||
<span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear">
|
||||
<i class="nz-icon nz-icon-gear"></i>
|
||||
</span>
|
||||
</template>
|
||||
<template v-slot="scope">
|
||||
<button v-if="scope.$index == 0" class="to-top" :style="{top: tools.toTopBtnTop}" :class="{'to-top-is-hover': tools.tableHover}" v-show="tools.showTopBtn && bottomBox.mainResizeShow" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="pagination-bottom" v-show="!bottomBox.showSubList">
|
||||
<Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
|
||||
</div>
|
||||
</div>
|
||||
<transition name="el-zoom-in-bottom">
|
||||
<bottom-box v-if="bottomBox.showSubList" :sub-resize-show="bottomBox.subResizeShow" :obj="bottomBox.alertRule" :is-full-screen="bottomBox.isFullScreen" :from="'alertRule'" :target-tab.sync="bottomBox.targetTab" :detail="bottomBox.ruleDetail"
|
||||
@closeSubList="bottomBox.showSubList = false" @fullScreen="fullScreen" @exitFullScreen="exitFullScreen" @listResize="listResize" ></bottom-box>
|
||||
</transition>
|
||||
<span v-else-if="item.prop == 'severity'">
|
||||
<span v-if="scope.row[item.prop] == 'high'"><i class="el-icon-arrow-up"></i> {{$CONSTANTS.alertMessage.severityData.find(s => {return s.key == 'high'})}}</span>
|
||||
<span style="padding-left: 18px;" v-if="scope.row[item.prop] == 'medium'">{{$CONSTANTS.alertMessage.severityData.find(s => {return s.key == 'medium'})}}</span>
|
||||
<span v-if="scope.row[item.prop] == 'low'"><i class="el-icon-arrow-down"></i> {{$CONSTANTS.alertMessage.severityData.find(s => {return s.key == 'low'})}}</span>
|
||||
</span>
|
||||
<template v-else-if="item.prop == 'alertNum'">
|
||||
<span class="link" @click="queryMessage(scope.row)">{{scope.row.alertNum + ' ' + $t('overall.active')}}</span>
|
||||
</template>
|
||||
<template v-else-if="item.prop == 'threshold'">
|
||||
<span >{{formatThreshold(scope.row[item.prop],scope.row.unit)}}</span>
|
||||
</template>
|
||||
<template v-else-if="item.prop == 'receivers'">
|
||||
<el-tag effect="dark" v-if="user.userName" :key="index" size="mini" v-for="(user, index) in scope.row[item.prop]" class="alert-rule-tag">{{user.userName}} </el-tag>
|
||||
</template>
|
||||
<span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
|
||||
<template v-else>-</template>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column width="28" :resizable="false">
|
||||
<template slot="header" slot-scope="scope">
|
||||
<span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear">
|
||||
<i class="nz-icon nz-icon-gear"></i>
|
||||
</span>
|
||||
</template>
|
||||
<template v-slot="scope">
|
||||
<button v-if="scope.$index == 0" class="to-top" :style="{top: tools.toTopBtnTop}" :class="{'to-top-is-hover': tools.tableHover}" v-show="tools.showTopBtn && bottomBox.mainResizeShow" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="pagination-bottom" v-show="!bottomBox.showSubList">
|
||||
<Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
|
||||
</div>
|
||||
</left-menu>
|
||||
</div>
|
||||
<transition name="el-zoom-in-bottom">
|
||||
<bottom-box v-if="bottomBox.showSubList" :sub-resize-show="bottomBox.subResizeShow" :obj="bottomBox.alertRule" :is-full-screen="bottomBox.isFullScreen" :from="'alertRule'" :target-tab.sync="bottomBox.targetTab" :detail="bottomBox.ruleDetail"
|
||||
@closeSubList="bottomBox.showSubList = false" @fullScreen="fullScreen" @exitFullScreen="exitFullScreen" @listResize="listResize" ></bottom-box>
|
||||
</transition>
|
||||
<transition name="right-box">
|
||||
<alert-config-box v-if="rightBox.show" :alert-rule="alertRule" @close="closeRightBox" ref="alertConfigBox"></alert-config-box>
|
||||
</transition>
|
||||
|
||||
@@ -18,53 +18,33 @@
|
||||
</style>
|
||||
<template>
|
||||
<div class="list">
|
||||
<left-menu >
|
||||
<div slot="content-left" class="slot-content">
|
||||
<div class="sidebar-title">{{$t('alert.alert')}}</div>
|
||||
<div class="sidebar-info">
|
||||
<div class="sidebar-info-item sidebar-info-top sidebar-info-item-active">{{$t('alert.alertList')}}</div>
|
||||
<div class="sidebar-info-item" @click="jumpTo('alertConfig')" id="alert-jump-config">
|
||||
{{$t('alert.alertConfig')}}
|
||||
<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="top-tool-search">
|
||||
<search-input :searchMsg="searchMsg" @search="search" :inTransform="inTransform"></search-input>
|
||||
</div>
|
||||
<button type="button" @click="showExportDialog" :title="$t('overall.exportExcelLower')"
|
||||
class="nz-btn nz-btn-size-normal nz-btn-style-light margin-l-20" id="alert-list-export">
|
||||
<i class="el-icon-download"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="pagination-top pagination-top-hide display-none"></div>
|
||||
</div>
|
||||
<alertMessageTable
|
||||
:tableData="tableData"
|
||||
:loading="loading"
|
||||
:tableHeight="mainTableHeight"
|
||||
:tableId="tableId"
|
||||
@tableDataSort="tableDataSort"
|
||||
@deleteMessage="deleteMessage"
|
||||
></alertMessageTable>
|
||||
<div class="pagination-bottom" v-show="!showSubList">
|
||||
<Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
|
||||
</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="top-tool-search">
|
||||
<search-input :searchMsg="searchMsg" @search="search" :inTransform="inTransform"></search-input>
|
||||
</div>
|
||||
<button type="button" @click="showExportDialog" :title="$t('overall.exportExcelLower')"
|
||||
class="nz-btn nz-btn-size-normal nz-btn-style-light margin-l-20" id="alert-list-export">
|
||||
<i class="el-icon-download"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="pagination-top pagination-top-hide display-none"></div>
|
||||
</div>
|
||||
<alertMessageTable
|
||||
:tableData="tableData"
|
||||
:loading="loading"
|
||||
:tableHeight="mainTableHeight"
|
||||
:tableId="tableId"
|
||||
@tableDataSort="tableDataSort"
|
||||
@deleteMessage="deleteMessage"
|
||||
></alertMessageTable>
|
||||
<div class="pagination-bottom" v-show="!showSubList">
|
||||
<Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
|
||||
</div>
|
||||
</div>
|
||||
<bottom-box v-if="showSubList" :show-sub-list="showSubList" :subResizeShow="subResizeShow" :isFullScreen="isFullScreen" :from="'alertMessage'" :targetTab.sync="targetTab" :detailList="tabDetailList"
|
||||
@closeSubList="showSubList = false" @fullScreen="fullScreen" @exitFullScreen="exitFullScreen" @listResize="listResize" :tabList="tabList"></bottom-box>
|
||||
</div>
|
||||
</left-menu>
|
||||
<!--<alert-config-box :parentAlertRule="viewRuleData" @reload="getAlertList" ref="alertConfigBox"></alert-config-box>
|
||||
<project-box :project="viewProjectData" ref="projectBox" @reload="getAlertList"></project-box>
|
||||
<module-box :module="viewModuleData" @reload="getAlertList" ref="moduleBox"></module-box>-->
|
||||
<!--<asset-edit-unit :edit-unit-show='viewAssetState' @refreshData="getAlertList" @sendStateData="tabControl"
|
||||
ref="assetEditUnit"></asset-edit-unit>-->
|
||||
<!--<asset-box :edit-unit-show='viewAssetState' @refreshData="getAlertList" @sendStateData="tabControl"
|
||||
ref="assetEditUnit"></asset-box>-->
|
||||
<bottom-box v-if="showSubList" :show-sub-list="showSubList" :subResizeShow="subResizeShow" :isFullScreen="isFullScreen" :from="'alertMessage'" :targetTab.sync="targetTab" :detailList="tabDetailList"
|
||||
@closeSubList="showSubList = false" @fullScreen="fullScreen" @exitFullScreen="exitFullScreen" @listResize="listResize" :tabList="tabList"></bottom-box>
|
||||
<element-set
|
||||
v-clickoutside="elementsetHide"
|
||||
:table-title="tableTitle"
|
||||
@@ -127,7 +107,6 @@
|
||||
import alertRuleInfo from '../../common/alert/alertRuleInfo'
|
||||
import alertLabel from '../../common/alert/alertLabel'
|
||||
import alertMessageTable from '@/components/common/alert/alertMessageTable.vue'
|
||||
var vm;
|
||||
export default {
|
||||
name: "alertList",
|
||||
components: {
|
||||
@@ -138,7 +117,6 @@
|
||||
'alertMessageTable':alertMessageTable,
|
||||
},
|
||||
data() {
|
||||
vm = this;
|
||||
return {
|
||||
loading: false,
|
||||
/*二级列表相关*/
|
||||
|
||||
@@ -5,124 +5,93 @@
|
||||
</style>
|
||||
<template>
|
||||
<div class="account">
|
||||
<left-menu >
|
||||
<div slot="content-left" class="slot-content">
|
||||
<div class="sidebar-title">{{$t('overall.config')}}</div>
|
||||
<div class="sidebar-info">
|
||||
<div class="sidebar-info-item sidebar-info-top sidebar-info-item-active">{{$t('config.account.account')}}</div>
|
||||
<div class="sidebar-info-item" @click="jumpTo('promServer')" id="account-jump-promserver">
|
||||
{{$t('config.promServer.promServerList')}}
|
||||
</div>
|
||||
<div class="sidebar-info-item" @click="jumpTo('dc')" id="account-jump-dc">
|
||||
{{$t('config.dc.dc')}}
|
||||
</div>
|
||||
<div class="sidebar-info-item" @click="jumpTo('model')" id="account-jump-model">
|
||||
{{$t('config.model.model')}}
|
||||
</div>
|
||||
<div class="sidebar-info-item" @click="jumpTo('mib')" id="account-jump-mib">
|
||||
{{$t('config.mib.mib')}}
|
||||
</div>
|
||||
<div class="sidebar-info-item" @click="jumpTo('system')" id="account-jump-system">
|
||||
{{$t('config.system.system')}}
|
||||
</div>
|
||||
<div class="sidebar-info-item" @click="jumpTo('terminallog')" id="account-jump-terminallog">
|
||||
{{$t('config.terminallog.terminallog')}}
|
||||
</div>
|
||||
<div class="sidebar-info-item" @click="jumpTo('operationlog')" id="account-jump-operation">
|
||||
{{$t('config.operationlog.operationlog')}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div slot="content-right" class="slot-content">
|
||||
<!-- 主页面 -->
|
||||
<div class="main-list" :class="{'main-list-with-sub': bottomBox.showSubList}">
|
||||
<!-- 顶部工具栏 -->
|
||||
<div class="main-modal"></div>
|
||||
<div class="top-tools" v-show="bottomBox.mainResizeShow">
|
||||
<div class="top-tool-main-right" :class="{'top-tool-main-right-to-left': bottomBox.showSubList}">
|
||||
<div class="top-tool-search">
|
||||
<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">
|
||||
<i class="nz-icon-create-square nz-icon"></i>
|
||||
</button>
|
||||
<!-- 主页面 -->
|
||||
<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="bottomBox.inTransform"></search-input>
|
||||
</div>
|
||||
<!-- 顶部分页组件，当打开底部上滑框时出现 -->
|
||||
<div class="pagination-top pagination-top-hide display-none"></div>
|
||||
</div>
|
||||
<el-table
|
||||
class="nz-table"
|
||||
:data="tableData"
|
||||
border
|
||||
v-show="bottomBox.mainResizeShow"
|
||||
ref="accountTable"
|
||||
:height="mainTableHeight"
|
||||
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 tools.tablelable"
|
||||
v-if="item.show"
|
||||
:width="item.width"
|
||||
:key="`col-${index}`"
|
||||
:label="item.label"
|
||||
:prop="item.prop"
|
||||
:sort-orders="['ascending', 'descending']"
|
||||
>
|
||||
<template slot-scope="scope" :column="item">
|
||||
<div v-if="item.prop == 'option'" class="content-right-options">
|
||||
<span :title="$t('overall.view')" @click="detail(scope.row)" class="content-right-option" :id="'account-detail-'+scope.row.id"><i class="nz-icon nz-icon-view"></i></span>
|
||||
|
||||
<span :title="$t('overall.edit')" @click="edit(scope.row)" class="content-right-option" :id="'account-edit-'+scope.row.id"><i class="nz-icon nz-icon-edit"></i></span>
|
||||
|
||||
<span :title="$t('overall.delete')" @click="del(scope.row)" class="content-right-option" :id="'account-del-'+scope.row.id"><i class="el-icon-delete"></i></span>
|
||||
</div>
|
||||
<span v-else-if="item.prop == 'lang'">
|
||||
{{scope.row[item.prop] == 'en' ? 'English' : ''}}
|
||||
{{scope.row[item.prop] == 'zh' ? '中文' : ''}}
|
||||
{{scope.row[item.prop] == 'ru' ? 'русский' : ''}}
|
||||
</span>
|
||||
<span v-else-if="item.prop == 'receiver'">
|
||||
<template v-for="rec in scope.row[item.prop]">{{rec.name}} </template>
|
||||
</span>
|
||||
<span v-else-if="item.prop == 'status'">
|
||||
<el-switch
|
||||
v-model="scope.row.status"
|
||||
active-value="1"
|
||||
inactive-value="0"
|
||||
active-color="#ee9d3f"
|
||||
:disabled="isCurrentUser(scope.row.username)"
|
||||
@change="(val)=>{statusChange(scope.row)}">
|
||||
</el-switch>
|
||||
</span>
|
||||
<span v-else>{{scope.row[item.prop]}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column width="28">
|
||||
<template slot="header" slot-scope="scope" :resizable="false">
|
||||
<span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear">
|
||||
<i class="nz-icon nz-icon-gear"></i>
|
||||
</span>
|
||||
</template>
|
||||
<template v-slot="scope">
|
||||
<button v-if="scope.$index == 0" class="to-top" :style="{top: tools.toTopBtnTop}" :class="{'to-top-is-hover': tools.tableHover}" v-show="tools.showTopBtn && bottomBox.mainResizeShow" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="pagination-bottom" v-show="!bottomBox.showSubList">
|
||||
<Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
|
||||
<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">
|
||||
<i class="nz-icon-create-square nz-icon"></i>
|
||||
</button>
|
||||
</div>
|
||||
<!-- 顶部分页组件，当打开底部上滑框时出现 -->
|
||||
<div class="pagination-top pagination-top-hide display-none"></div>
|
||||
</div>
|
||||
<el-table
|
||||
class="nz-table"
|
||||
:data="tableData"
|
||||
border
|
||||
v-show="bottomBox.mainResizeShow"
|
||||
ref="accountTable"
|
||||
:height="mainTableHeight"
|
||||
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 tools.tablelable"
|
||||
v-if="item.show"
|
||||
:width="item.width"
|
||||
:key="`col-${index}`"
|
||||
:label="item.label"
|
||||
:prop="item.prop"
|
||||
:sort-orders="['ascending', 'descending']"
|
||||
>
|
||||
<template slot-scope="scope" :column="item">
|
||||
<div v-if="item.prop == 'option'" class="content-right-options">
|
||||
<span :title="$t('overall.view')" @click="detail(scope.row)" class="content-right-option" :id="'account-detail-'+scope.row.id"><i class="nz-icon nz-icon-view"></i></span>
|
||||
|
||||
<span :title="$t('overall.edit')" @click="edit(scope.row)" class="content-right-option" :id="'account-edit-'+scope.row.id"><i class="nz-icon nz-icon-edit"></i></span>
|
||||
|
||||
<span :title="$t('overall.delete')" @click="del(scope.row)" class="content-right-option" :id="'account-del-'+scope.row.id"><i class="el-icon-delete"></i></span>
|
||||
</div>
|
||||
<span v-else-if="item.prop == 'lang'">
|
||||
{{scope.row[item.prop] == 'en' ? 'English' : ''}}
|
||||
{{scope.row[item.prop] == 'zh' ? '中文' : ''}}
|
||||
{{scope.row[item.prop] == 'ru' ? 'русский' : ''}}
|
||||
</span>
|
||||
<span v-else-if="item.prop == 'receiver'">
|
||||
<template v-for="rec in scope.row[item.prop]">{{rec.name}} </template>
|
||||
</span>
|
||||
<span v-else-if="item.prop == 'status'">
|
||||
<el-switch
|
||||
v-model="scope.row.status"
|
||||
active-value="1"
|
||||
inactive-value="0"
|
||||
active-color="#ee9d3f"
|
||||
:disabled="isCurrentUser(scope.row.username)"
|
||||
@change="(val)=>{statusChange(scope.row)}">
|
||||
</el-switch>
|
||||
</span>
|
||||
<span v-else>{{scope.row[item.prop]}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column width="28">
|
||||
<template slot="header" slot-scope="scope" :resizable="false">
|
||||
<span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear">
|
||||
<i class="nz-icon nz-icon-gear"></i>
|
||||
</span>
|
||||
</template>
|
||||
<template v-slot="scope">
|
||||
<button v-if="scope.$index == 0" class="to-top" :style="{top: tools.toTopBtnTop}" :class="{'to-top-is-hover': tools.tableHover}" v-show="tools.showTopBtn && bottomBox.mainResizeShow" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="pagination-bottom" v-show="!bottomBox.showSubList">
|
||||
<Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
|
||||
</div>
|
||||
<!-- 底部上滑框 -->
|
||||
<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="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>
|
||||
<transition name="right-box">
|
||||
<account-box v-if="rightBox.show" :user="user" @close="closeRightBox"></account-box>
|
||||
</transition>
|
||||
@@ -253,15 +222,6 @@
|
||||
let vm = this;
|
||||
this.$bottomBoxWindow.listResize(vm, e);
|
||||
},
|
||||
jumpTo(data, id) {
|
||||
bus.$emit("menu-change", data);
|
||||
this.$router.push({
|
||||
path: "/" + data,
|
||||
query: {
|
||||
t: +new Date()
|
||||
}
|
||||
});
|
||||
},
|
||||
convertToDetail(obj) {
|
||||
let detail = [];
|
||||
detail.push({label: this.$t("config.account.account"), value: obj.username});
|
||||
@@ -347,14 +307,6 @@
|
||||
this.getTableData();
|
||||
});
|
||||
},
|
||||
jumpTo(data, id) {
|
||||
this.$router.push({
|
||||
path: "/" + data,
|
||||
query: {
|
||||
t: +new Date()
|
||||
}
|
||||
});
|
||||
},
|
||||
esc() {
|
||||
this.rightBox.show = false;
|
||||
},
|
||||
|
||||
@@ -5,139 +5,106 @@
|
||||
</style>
|
||||
<template>
|
||||
<div class="dc" >
|
||||
<left-menu >
|
||||
<div slot="content-left" class="slot-content">
|
||||
<div class="sidebar-title">{{$t('overall.config')}}</div>
|
||||
<div class="sidebar-info">
|
||||
<div class="sidebar-info-item sidebar-info-top" @click="jumpTo('account')" id="prom-jump-account">
|
||||
{{$t('config.account.account')}}
|
||||
</div>
|
||||
<div class="sidebar-info-item" @click="jumpTo('promServer')" id="account-jump-promserver">
|
||||
{{$t('config.promServer.promServerList')}}
|
||||
</div>
|
||||
<div class="sidebar-info-item sidebar-info-item-active" id="dc-jump-dc">
|
||||
{{$t('config.dc.dc')}}
|
||||
</div>
|
||||
<div class="sidebar-info-item" @click="jumpTo('model')" id="dc-jump-model">
|
||||
{{$t('config.model.model')}}
|
||||
</div>
|
||||
<div class="sidebar-info-item" @click="jumpTo('mib')" id="dc-jump-mib">
|
||||
{{$t('config.mib.mib')}}
|
||||
</div>
|
||||
<div class="sidebar-info-item" @click="jumpTo('system')" id="dc-jump-system">
|
||||
{{$t('config.system.system')}}
|
||||
</div>
|
||||
<div class="sidebar-info-item" @click="jumpTo('terminallog')" id="dc-jump-terminallog">
|
||||
{{$t('config.terminallog.terminallog')}}
|
||||
</div>
|
||||
<div class="sidebar-info-item" @click="jumpTo('operationlog')" id="account-jump-operation">
|
||||
{{$t('config.operationlog.operationlog')}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--dc table start-->
|
||||
<div slot="content-right" class="slot-content">
|
||||
<div class="main-list" :class="{'main-list-with-sub': bottomBox.showSubList}">
|
||||
<div class="main-modal"></div>
|
||||
<div class="top-tools" v-show="bottomBox.mainResizeShow">
|
||||
<div class="top-tool-main-right" :class="{'top-tool-main-right-to-left': bottomBox.showSubList}">
|
||||
<div class="top-tool-search">
|
||||
<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">
|
||||
<i class="nz-icon-create-square nz-icon"></i>
|
||||
</button>
|
||||
<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="bottomBox.inTransform"></search-input>
|
||||
</div>
|
||||
<div class="pagination-top pagination-top-hide display-none"></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">
|
||||
<i class="nz-icon-create-square nz-icon"></i>
|
||||
</button>
|
||||
</div>
|
||||
<el-table
|
||||
class="nz-table"
|
||||
:data="tableData"
|
||||
border
|
||||
tooltip-effect="light"
|
||||
v-show="bottomBox.mainResizeShow"
|
||||
v-scrollBar:el-table="'large'"
|
||||
:height="mainTableHeight"
|
||||
ref="dcTable"
|
||||
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 tools.tablelable"
|
||||
v-if="item.show"
|
||||
:width="item.width"
|
||||
:key="`col-${index}`"
|
||||
:label="item.label"
|
||||
:sortable="sortableShow(item.prop)"
|
||||
:prop="propTitle(item.prop)"
|
||||
>
|
||||
<template slot-scope="scope" :column="item">
|
||||
<div v-if="item.prop == 'option'" class="content-right-options">
|
||||
<!--<span :title="$t('overall.view')" @click="detail(scope.row)" class="content-right-option" :id="'dc-detail-'+scope.row.id"><i class="nz-icon nz-icon-view"></i></span>
|
||||
-->
|
||||
<span :title="$t('overall.edit')" @click="edit(scope.row)" class="content-right-option" :id="'dc-edit-'+scope.row.id"><i class="nz-icon nz-icon-edit"></i></span>
|
||||
|
||||
<span :title="$t('overall.delete')" @click="del(scope.row)" class="content-right-option" :id="'dc-del-'+scope.row.id"><i class="el-icon-delete"></i></span>
|
||||
|
||||
<span :title="$t('config.dc.traffic.title')" @click="configTraffic(scope.row)" class="content-right-option" :id="'dc-setting-'+scope.row.id" ><i class="el-icon-setting"></i></span>
|
||||
</div>
|
||||
<template v-else-if="item.prop == 'principal'">
|
||||
<template v-if="scope.row.principal">
|
||||
<template v-for="item in userData">
|
||||
<template v-if="scope.row.principal == item.userId">{{item.username}}</template>
|
||||
</template>
|
||||
<div class="pagination-top pagination-top-hide display-none"></div>
|
||||
</div>
|
||||
<el-table
|
||||
class="nz-table"
|
||||
:data="tableData"
|
||||
border
|
||||
tooltip-effect="light"
|
||||
v-show="bottomBox.mainResizeShow"
|
||||
v-scrollBar:el-table="'large'"
|
||||
:height="mainTableHeight"
|
||||
ref="dcTable"
|
||||
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 tools.tablelable"
|
||||
v-if="item.show"
|
||||
:width="item.width"
|
||||
:key="`col-${index}`"
|
||||
:label="item.label"
|
||||
:sortable="sortableShow(item.prop)"
|
||||
:prop="propTitle(item.prop)"
|
||||
>
|
||||
<template slot-scope="scope" :column="item">
|
||||
<div v-if="item.prop == 'option'" class="content-right-options">
|
||||
<!--<span :title="$t('overall.view')" @click="detail(scope.row)" class="content-right-option" :id="'dc-detail-'+scope.row.id"><i class="nz-icon nz-icon-view"></i></span>
|
||||
-->
|
||||
<span :title="$t('overall.edit')" @click="edit(scope.row)" class="content-right-option" :id="'dc-edit-'+scope.row.id"><i class="nz-icon nz-icon-edit"></i></span>
|
||||
|
||||
<span :title="$t('overall.delete')" @click="del(scope.row)" class="content-right-option" :id="'dc-del-'+scope.row.id"><i class="el-icon-delete"></i></span>
|
||||
|
||||
<span :title="$t('config.dc.traffic.title')" @click="configTraffic(scope.row)" class="content-right-option" :id="'dc-setting-'+scope.row.id" ><i class="el-icon-setting"></i></span>
|
||||
</div>
|
||||
<template v-else-if="item.prop == 'principal'">
|
||||
<template v-if="scope.row.principal">
|
||||
<template v-for="item in userData">
|
||||
<template v-if="scope.row.principal == item.userId">{{item.username}}</template>
|
||||
</template>
|
||||
<template v-else>-</template>
|
||||
</template>
|
||||
<template v-else-if="item.prop == 'area'">
|
||||
<template v-if="scope.row.area">{{scope.row.area.name}}</template>
|
||||
<template v-else>-</template>
|
||||
</template>
|
||||
<template v-else-if="item.prop == 'assetStat' && scope.row.assetStat">
|
||||
<el-popover
|
||||
placement="top"
|
||||
trigger="hover"
|
||||
: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>
|
||||
<span class="dc-asset-state dc-asset-state-out">{{scope.row.assetStat.outStock}}</span>
|
||||
</div>
|
||||
</el-popover>
|
||||
|
||||
</template >
|
||||
<template v-else-if="item.prop == 'cabinetNum'">
|
||||
<span class="link" @click="showCabinet(scope.row)">{{scope.row[item.prop]}}</span>
|
||||
</template>
|
||||
<template v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</template>
|
||||
<template v-else>-</template>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column width="28" :resizable="false">
|
||||
<template slot="header" slot-scope="scope">
|
||||
<span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear">
|
||||
<i class="nz-icon nz-icon-gear"></i>
|
||||
</span>
|
||||
<template v-else-if="item.prop == 'area'">
|
||||
<template v-if="scope.row.area">{{scope.row.area.name}}</template>
|
||||
<template v-else>-</template>
|
||||
</template>
|
||||
<template v-slot="scope">
|
||||
<button v-if="scope.$index == 0" class="to-top" :style="{top: tools.toTopBtnTop}" :class="{'to-top-is-hover': tools.tableHover}" v-show="tools.showTopBtn && bottomBox.mainResizeShow" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
|
||||
<template v-else-if="item.prop == 'assetStat' && scope.row.assetStat">
|
||||
<el-popover
|
||||
placement="top"
|
||||
trigger="hover"
|
||||
: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>
|
||||
<span class="dc-asset-state dc-asset-state-out">{{scope.row.assetStat.outStock}}</span>
|
||||
</div>
|
||||
</el-popover>
|
||||
|
||||
</template >
|
||||
<template v-else-if="item.prop == 'cabinetNum'">
|
||||
<span class="link" @click="showCabinet(scope.row)">{{scope.row[item.prop]}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="pagination-bottom" v-show="!bottomBox.showSubList">
|
||||
<Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
|
||||
</div>
|
||||
<template v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</template>
|
||||
<template v-else>-</template>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column width="28" :resizable="false">
|
||||
<template slot="header" slot-scope="scope">
|
||||
<span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear">
|
||||
<i class="nz-icon nz-icon-gear"></i>
|
||||
</span>
|
||||
</template>
|
||||
<template v-slot="scope">
|
||||
<button v-if="scope.$index == 0" class="to-top" :style="{top: tools.toTopBtnTop}" :class="{'to-top-is-hover': tools.tableHover}" v-show="tools.showTopBtn && bottomBox.mainResizeShow" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="pagination-bottom" v-show="!bottomBox.showSubList">
|
||||
<Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
|
||||
</div>
|
||||
<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-tab.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"
|
||||
|
||||
@@ -5,120 +5,89 @@
|
||||
</style>
|
||||
<template>
|
||||
<div class="mib">
|
||||
<left-menu >
|
||||
<div slot="content-left" class="slot-content">
|
||||
<div class="sidebar-title">{{$t('overall.config')}}</div>
|
||||
<div class="sidebar-info">
|
||||
<div class="sidebar-info-item sidebar-info-top" @click="jumpTo('account')" id="mib-jump-account">
|
||||
{{$t('config.account.account')}}
|
||||
<template v-if="showTab == 'file'">
|
||||
<div class="top-tools">
|
||||
<div class="nz-tab top-tool-main-right top-tool-main-right-to-left" style="width: 300px">
|
||||
<div class="nz-tab-item-box" id="module-type-1">
|
||||
<div class="nz-tab-item nz-tab-item-active">{{$t("config.mib.mibFiles")}}</div>
|
||||
</div>
|
||||
<div @click="showTab = 'browser'" class="nz-tab-item-box" id="module-type-2">
|
||||
<div class="nz-tab-item">{{$t("config.mib.mibBrowser")}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-info-item" @click="jumpTo('promServer')" id="mib-jump-prom">{{$t('config.promServer.promServerList')}}</div>
|
||||
<div class="sidebar-info-item" @click="jumpTo('dc')" id="mib-jump-dc">
|
||||
{{$t('config.dc.dc')}}
|
||||
</div>
|
||||
<div class="sidebar-info-item " id="mib-jump-model" @click="jumpTo('model')">
|
||||
{{$t('config.model.model')}}
|
||||
</div>
|
||||
<div class="sidebar-info-item sidebar-info-item-active" id="mib-jump-mib">
|
||||
{{$t('config.mib.mib')}}
|
||||
</div>
|
||||
<div class="sidebar-info-item" @click="jumpTo('system')" id="mib-jump-system">
|
||||
{{$t('config.system.system')}}
|
||||
</div>
|
||||
<div class="sidebar-info-item" @click="jumpTo('terminallog')" id="mib-jump-terminallog">
|
||||
{{$t('config.terminallog.terminallog')}}
|
||||
</div>
|
||||
<div class="sidebar-info-item" @click="jumpTo('operationlog')" id="account-jump-operation">
|
||||
{{$t('config.operationlog.operationlog')}}
|
||||
<div class="top-tool-main-right">
|
||||
<div class="top-tool-search">
|
||||
<search-input :searchMsg="searchMsg" @search="search"></search-input>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
<div slot="content-right" class="slot-content">
|
||||
<template v-if="showTab == 'file'">
|
||||
<div class="top-tools">
|
||||
<div class="nz-tab top-tool-main-right top-tool-main-right-to-left" style="width: 300px">
|
||||
<div class="nz-tab-item-box" id="module-type-1">
|
||||
<div class="nz-tab-item nz-tab-item-active">{{$t("config.mib.mibFiles")}}</div>
|
||||
</div>
|
||||
<div @click="showTab = 'browser'" class="nz-tab-item-box" id="module-type-2">
|
||||
<div class="nz-tab-item">{{$t("config.mib.mibBrowser")}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="top-tool-main-right">
|
||||
<div class="top-tool-search">
|
||||
<search-input :searchMsg="searchMsg" @search="search"></search-input>
|
||||
</div>
|
||||
<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="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)"
|
||||
:sort-orders="['ascending', 'descending']">
|
||||
<template slot-scope="scope" :column="item">
|
||||
<template v-if="item.prop == 'updateUser'" >{{scope.row[item.prop].name}}</template>
|
||||
<template v-else-if="item.prop == 'fileName' && scope.row[item.prop]" >
|
||||
<span class="link" @click="downloadMib(scope.row.id)">{{scope.row[item.prop]}}</span>
|
||||
</template>
|
||||
<template v-else-if="item.prop == 'modelsDetail' && scope.row['modelsDetail'] && scope.row['modelsDetail'].length >0" >
|
||||
<div style="height: 100%">
|
||||
<el-scrollbar style="height: 100%">
|
||||
<div v-for="(n,i) in scope.row['modelsDetail']" :key="n.name+'-'+n.id+'-'+i" class="detail-item-content">
|
||||
<el-popover trigger="hover" placement="top" >
|
||||
<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)"
|
||||
:sort-orders="['ascending', 'descending']">
|
||||
<template slot-scope="scope" :column="item">
|
||||
<template v-if="item.prop == 'updateUser'" >{{scope.row[item.prop].name}}</template>
|
||||
<template v-else-if="item.prop == 'fileName' && scope.row[item.prop]" >
|
||||
<span class="link" @click="downloadMib(scope.row.id)">{{scope.row[item.prop]}}</span>
|
||||
</template>
|
||||
<template v-else-if="item.prop == 'modelsDetail' && scope.row['modelsDetail'] && scope.row['modelsDetail'].length >0" >
|
||||
<div style="height: 100%">
|
||||
<el-scrollbar style="height: 100%">
|
||||
<div v-for="(n,i) in scope.row['modelsDetail']" :key="n.name+'-'+n.id+'-'+i" class="detail-item-content">
|
||||
<el-popover trigger="hover" placement="top" >
|
||||
<div>
|
||||
<div>
|
||||
<div>
|
||||
<span>{{$t('overall.name')}}:</span>
|
||||
<span>{{n.name}}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>{{$t('config.mib.vendor')}}:</span>
|
||||
<span>{{n.vendor}}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>{{$t('config.mib.type')}}:</span>
|
||||
<span>{{n.type}}</span>
|
||||
</div>
|
||||
<span>{{$t('overall.name')}}:</span>
|
||||
<span>{{n.name}}</span>
|
||||
</div>
|
||||
<template slot="reference">
|
||||
<div class="detail-item-content" v-if="i < scope.row['modelsDetail'].length-1">{{n.name}},</div>
|
||||
<div class="detail-item-content" v-else>{{n.name}}</div>
|
||||
</template>
|
||||
</el-popover>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</template>
|
||||
<div v-else-if="item.prop == 'option'" class="content-right-options">
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
<span>{{$t('config.mib.vendor')}}:</span>
|
||||
<span>{{n.vendor}}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>{{$t('config.mib.type')}}:</span>
|
||||
<span>{{n.type}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<template slot="reference">
|
||||
<div class="detail-item-content" v-if="i < scope.row['modelsDetail'].length-1">{{n.name}},</div>
|
||||
<div class="detail-item-content" v-else>{{n.name}}</div>
|
||||
</template>
|
||||
</el-popover>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
<template v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</template>
|
||||
<template v-else>-</template>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :resizable="false" width="28">
|
||||
<template slot="header" slot-scope="scope">
|
||||
<span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear">
|
||||
<i class="nz-icon nz-icon-gear"></i>
|
||||
</span>
|
||||
</template>
|
||||
<template v-slot="scope">
|
||||
<button v-if="scope.$index == 0" class="to-top" :style="{top: tools.toTopBtnTop}" :class="{'to-top-is-hover': tools.tableHover}" v-show="tools.showTopBtn" @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 :show-tab="showTab" v-if="showTab == 'browser'" @toFileTab="showTab = 'file'"></mib-browser>
|
||||
</div>
|
||||
</left-menu>
|
||||
<div v-else-if="item.prop == 'option'" class="content-right-options">
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
<template v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</template>
|
||||
<template v-else>-</template>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :resizable="false" width="28">
|
||||
<template slot="header" slot-scope="scope">
|
||||
<span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear">
|
||||
<i class="nz-icon nz-icon-gear"></i>
|
||||
</span>
|
||||
</template>
|
||||
<template v-slot="scope">
|
||||
<button v-if="scope.$index == 0" class="to-top" :style="{top: tools.toTopBtnTop}" :class="{'to-top-is-hover': tools.tableHover}" v-show="tools.showTopBtn" @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 :show-tab="showTab" v-if="showTab == 'browser'" @toFileTab="showTab = 'file'"></mib-browser>
|
||||
<element-set
|
||||
v-if="tools.showElementSet"
|
||||
v-clickoutside="elementsetHide"
|
||||
|
||||
@@ -5,115 +5,84 @@
|
||||
</style>
|
||||
<template>
|
||||
<div class="model">
|
||||
<left-menu >
|
||||
<div slot="content-left" class="slot-content">
|
||||
<div class="sidebar-title">{{$t('overall.config')}}</div>
|
||||
<div class="sidebar-info">
|
||||
<div class="sidebar-info-item sidebar-info-top" @click="jumpTo('account')" id="model-jump-account">
|
||||
{{$t('config.account.account')}}
|
||||
</div>
|
||||
<div class="sidebar-info-item" @click="jumpTo('promServer')" id="model-jump-prom">{{$t('config.promServer.promServerList')}}</div>
|
||||
<div class="sidebar-info-item" @click="jumpTo('dc')" id="model-jump-dc">
|
||||
{{$t('config.dc.dc')}}
|
||||
</div>
|
||||
<div class="sidebar-info-item sidebar-info-item-active" id="model-jump-model">
|
||||
{{$t('config.model.model')}}
|
||||
</div>
|
||||
<div class="sidebar-info-item" @click="jumpTo('mib')" id="model-jump-mib">
|
||||
{{$t('config.mib.mib')}}
|
||||
</div>
|
||||
<div class="sidebar-info-item" @click="jumpTo('system')" id="model-jump-system">
|
||||
{{$t('config.system.system')}}
|
||||
</div>
|
||||
<div class="sidebar-info-item" @click="jumpTo('terminallog')" id="modeel-jump-terminallog">
|
||||
{{$t('config.terminallog.terminallog')}}
|
||||
</div>
|
||||
<div class="sidebar-info-item" @click="jumpTo('operationlog')" id="model-jump-operation">
|
||||
{{$t('config.operationlog.operationlog')}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div slot="content-right" class="slot-content">
|
||||
<div class="main-list" :class="{'main-list-with-sub': bottomBox.showSubList}">
|
||||
<div class="main-modal"></div>
|
||||
<div class="top-tools" v-show="bottomBox.mainResizeShow">
|
||||
<div class="top-tool-main-right" :class="{'top-tool-main-right-to-left': bottomBox.showSubList}">
|
||||
<div class="top-tool-search">
|
||||
<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">
|
||||
<i class="nz-icon-create-square nz-icon"></i>
|
||||
</button>
|
||||
<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" :bottomBox.inTransform="bottomBox.inTransform"></search-input>
|
||||
</div>
|
||||
<div class="pagination-top pagination-top-hide display-none"></div>
|
||||
</div>
|
||||
<el-table :data="tableData"
|
||||
border style="width: 100%;"
|
||||
ref="modelTable"
|
||||
class="nz-table"
|
||||
v-scrollBar
|
||||
:el-table="'large'"
|
||||
v-loading="tools.loading"
|
||||
:cell-class-name="assetStatClassName"
|
||||
v-show="bottomBox.mainResizeShow"
|
||||
:height="mainTableHeight"
|
||||
@sort-change="tableDataSort"
|
||||
>
|
||||
<el-table-column :resizable="false"
|
||||
v-for="(item, index) in tools.tablelable"
|
||||
v-if="item.show"
|
||||
:width="item.width"
|
||||
:key="`col-${index}`"
|
||||
:label="item.label"
|
||||
:sortable="sortableShow(item.prop)"
|
||||
:prop="propTitle(item.prop)"
|
||||
:sort-orders="['ascending', 'descending']">
|
||||
<template slot-scope="scope" :column="item">
|
||||
<template v-if="item.prop == 'vendor'" >{{scope.row[item.prop].value}}</template>
|
||||
<template v-else-if="item.prop == 'type'" >{{scope.row[item.prop].value}}</template>
|
||||
<template v-else-if="item.prop == 'assetStat' && scope.row.assetStat" >
|
||||
<el-popover
|
||||
placement="top"
|
||||
trigger="hover"
|
||||
: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>
|
||||
<span class="dc-asset-state dc-asset-state-out">{{scope.row.assetStat.outStock}}</span>
|
||||
</div>
|
||||
</el-popover>
|
||||
</template>
|
||||
<div v-else-if="item.prop == 'option'" class="content-right-options">
|
||||
<span :title="$t('dashboard.panel.title')" @click="panel(scope.row)" class="content-right-option" :id="'model-panel-'+scope.row.id"><i class="nz-icon nz-icon-template"></i></span>
|
||||
<span :title="$t('overall.edit')" @click="edit(scope.row)" class="content-right-option" :id="'model-edit-'+scope.row.id"><i class="nz-icon nz-icon-edit"></i></span>
|
||||
<span :title="$t('overall.delete')" @click="del(scope.row)" class="content-right-option" :id="'model-del-'+scope.row.id"><i class="el-icon-delete"></i></span>
|
||||
</div>
|
||||
<template v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</template>
|
||||
<template v-else>-</template>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :resizable="false" width="28">
|
||||
<template slot="header" slot-scope="scope">
|
||||
<span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear">
|
||||
<i class="nz-icon nz-icon-gear"></i>
|
||||
</span>
|
||||
</template>
|
||||
<template v-slot="scope">
|
||||
<button v-if="scope.$index == 0" class="to-top" :style="{top: tools.toTopBtnTop}" :class="{'to-top-is-hover': tools.tableHover}" v-show="tools.showTopBtn" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="pagination-bottom" v-show="!bottomBox.showSubList">
|
||||
<Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
|
||||
<button @click="add" class="nz-btn nz-btn-size-normal nz-btn-style-light margin-l-20" :title="$t('overall.createModel')"
|
||||
id="model-add">
|
||||
<i class="nz-icon-create-square nz-icon"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="pagination-top pagination-top-hide display-none"></div>
|
||||
</div>
|
||||
<el-table :data="tableData"
|
||||
border style="width: 100%;"
|
||||
ref="modelTable"
|
||||
class="nz-table"
|
||||
v-scrollBar
|
||||
:el-table="'large'"
|
||||
v-loading="tools.loading"
|
||||
:cell-class-name="assetStatClassName"
|
||||
v-show="bottomBox.mainResizeShow"
|
||||
:height="mainTableHeight"
|
||||
@sort-change="tableDataSort"
|
||||
>
|
||||
<el-table-column :resizable="false"
|
||||
v-for="(item, index) in tools.tablelable"
|
||||
v-if="item.show"
|
||||
:width="item.width"
|
||||
:key="`col-${index}`"
|
||||
:label="item.label"
|
||||
:sortable="sortableShow(item.prop)"
|
||||
:prop="propTitle(item.prop)"
|
||||
:sort-orders="['ascending', 'descending']">
|
||||
<template slot-scope="scope" :column="item">
|
||||
<template v-if="item.prop == 'vendor'" >{{scope.row[item.prop].value}}</template>
|
||||
<template v-else-if="item.prop == 'type'" >{{scope.row[item.prop].value}}</template>
|
||||
<template v-else-if="item.prop == 'assetStat' && scope.row.assetStat" >
|
||||
<el-popover
|
||||
placement="top"
|
||||
trigger="hover"
|
||||
: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>
|
||||
<span class="dc-asset-state dc-asset-state-out">{{scope.row.assetStat.outStock}}</span>
|
||||
</div>
|
||||
</el-popover>
|
||||
</template>
|
||||
<div v-else-if="item.prop == 'option'" class="content-right-options">
|
||||
<span :title="$t('dashboard.panel.title')" @click="panel(scope.row)" class="content-right-option" :id="'model-panel-'+scope.row.id"><i class="nz-icon nz-icon-template"></i></span>
|
||||
<span :title="$t('overall.edit')" @click="edit(scope.row)" class="content-right-option" :id="'model-edit-'+scope.row.id"><i class="nz-icon nz-icon-edit"></i></span>
|
||||
<span :title="$t('overall.delete')" @click="del(scope.row)" class="content-right-option" :id="'model-del-'+scope.row.id"><i class="el-icon-delete"></i></span>
|
||||
</div>
|
||||
<template v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</template>
|
||||
<template v-else>-</template>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :resizable="false" width="28">
|
||||
<template slot="header" slot-scope="scope">
|
||||
<span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear">
|
||||
<i class="nz-icon nz-icon-gear"></i>
|
||||
</span>
|
||||
</template>
|
||||
<template v-slot="scope">
|
||||
<button v-if="scope.$index == 0" class="to-top" :style="{top: tools.toTopBtnTop}" :class="{'to-top-is-hover': tools.tableHover}" v-show="tools.showTopBtn" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="pagination-bottom" v-show="!bottomBox.showSubList">
|
||||
<Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
|
||||
</div>
|
||||
<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>
|
||||
<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>
|
||||
<element-set
|
||||
v-if="tools.showElementSet"
|
||||
v-clickoutside="elementsetHide"
|
||||
|
||||
@@ -5,89 +5,56 @@
|
||||
</style>
|
||||
<template>
|
||||
<div class="operationlog">
|
||||
<left-menu >
|
||||
<div slot="content-left" class="slot-content">
|
||||
<div class="sidebar-title">{{$t('overall.config')}}</div>
|
||||
<div class="sidebar-info">
|
||||
<div class="sidebar-info-item sidebar-info-top" @click="jumpTo('account')" id="prom-jump-account">
|
||||
{{$t('config.account.account')}}
|
||||
</div>
|
||||
<div class="sidebar-info-item" @click="jumpTo('promServer')" id="account-jump-promserver">
|
||||
{{$t('config.promServer.promServerList')}}
|
||||
</div>
|
||||
<div class="sidebar-info-item" @click="jumpTo('dc')" id="operation-jump-dc">
|
||||
{{$t('config.dc.dc')}}
|
||||
</div>
|
||||
<div class="sidebar-info-item" @click="jumpTo('model')" id="operation-jump-model">
|
||||
{{$t('config.model.model')}}
|
||||
</div>
|
||||
<div class="sidebar-info-item" @click="jumpTo('mib')" id="operation-jump-mib">
|
||||
{{$t('config.mib.mib')}}
|
||||
</div>
|
||||
<div class="sidebar-info-item" @click="jumpTo('system')" id="operation-jump-system">
|
||||
{{$t('config.system.system')}}
|
||||
</div>
|
||||
<div class="sidebar-info-item" @click="jumpTo('terminallog')" id="operation-jump-terminallog">
|
||||
{{$t('config.terminallog.terminallog')}}
|
||||
</div>
|
||||
<div class="sidebar-info-item sidebar-info-item-active" @click="jumpTo('operationlog')" id="operation-jump-operation">
|
||||
{{$t('config.operationlog.operationlog')}}
|
||||
<div class="top-tools">
|
||||
<div></div>
|
||||
<div>
|
||||
<div class="top-tool-search float-right">
|
||||
<search-input :searchMsg="searchMsg" @search="search"></search-input>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div slot="content-right" class="slot-content">
|
||||
<div class="top-tools">
|
||||
<div></div>
|
||||
<div>
|
||||
<div class="top-tool-search float-right">
|
||||
<search-input :searchMsg="searchMsg" @search="search"></search-input>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-table
|
||||
class="nz-table"
|
||||
:data="tableData"
|
||||
border
|
||||
ref="operationLogTable"
|
||||
:height="$tableHeight.normal"
|
||||
v-loading="loading"
|
||||
v-scrollBar:el-table="'large'"
|
||||
:cell-class-name="messageStyle"
|
||||
style="width: 100%;"
|
||||
@sort-change="tableDataSort"
|
||||
<el-table
|
||||
class="nz-table"
|
||||
:data="tableData"
|
||||
border
|
||||
ref="operationLogTable"
|
||||
:height="$tableHeight.normal"
|
||||
v-loading="loading"
|
||||
v-scrollBar:el-table="'large'"
|
||||
:cell-class-name="messageStyle"
|
||||
style="width: 100%;"
|
||||
@sort-change="tableDataSort"
|
||||
>
|
||||
<el-table-column
|
||||
:resizable="false"
|
||||
v-for="(item, index) in tablelable"
|
||||
v-if="item.show"
|
||||
:width="item.width"
|
||||
:key="`col-${index}`"
|
||||
:label="item.label"
|
||||
:sortable="sortableShow(item.prop)"
|
||||
:prop="propTitle(item.prop)"
|
||||
:sort-orders="['ascending', 'descending']"
|
||||
>
|
||||
<el-table-column
|
||||
:resizable="false"
|
||||
v-for="(item, index) in tablelable"
|
||||
v-if="item.show"
|
||||
:width="item.width"
|
||||
:key="`col-${index}`"
|
||||
:label="item.label"
|
||||
:sortable="sortableShow(item.prop)"
|
||||
:prop="propTitle(item.prop)"
|
||||
:sort-orders="['ascending', 'descending']"
|
||||
>
|
||||
<template slot-scope="scope" :column="item">
|
||||
<span v-if="item.prop == 'time'">
|
||||
{{scope.row[item.prop]}} ms
|
||||
</span>
|
||||
<span v-else>{{scope.row[item.prop]}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column width="28">
|
||||
<template slot="header" slot-scope="scope">
|
||||
<span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear">
|
||||
<i class="nz-icon nz-icon-gear"></i>
|
||||
</span>
|
||||
</template>
|
||||
<template v-slot="scope">
|
||||
<button v-if="scope.$index == 0" class="to-top" :style="{top: toTopBtnTop}" :class="{'to-top-is-hover': tableHover}" v-show="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>
|
||||
</div>
|
||||
</left-menu>
|
||||
<template slot-scope="scope" :column="item">
|
||||
<span v-if="item.prop == 'time'">
|
||||
{{scope.row[item.prop]}} ms
|
||||
</span>
|
||||
<span v-else>{{scope.row[item.prop]}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column width="28">
|
||||
<template slot="header" slot-scope="scope">
|
||||
<span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear">
|
||||
<i class="nz-icon nz-icon-gear"></i>
|
||||
</span>
|
||||
</template>
|
||||
<template v-slot="scope">
|
||||
<button v-if="scope.$index == 0" class="to-top" :style="{top: toTopBtnTop}" :class="{'to-top-is-hover': tableHover}" v-show="showTopBtn" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
|
||||
<element-set
|
||||
v-clickoutside="elementsetHide"
|
||||
:dropCol="dropCol"
|
||||
|
||||
@@ -5,106 +5,75 @@
|
||||
</style>
|
||||
<template>
|
||||
<div class="prom">
|
||||
<left-menu >
|
||||
<div slot="content-left" class="slot-content">
|
||||
<div class="sidebar-title">{{$t('overall.config')}}</div>
|
||||
<div class="sidebar-info">
|
||||
<div class="sidebar-info-item sidebar-info-top" @click="jumpTo('account')" id="prom-jump-account">
|
||||
{{$t('config.account.account')}}
|
||||
</div>
|
||||
<div class="sidebar-info-item sidebar-info-item-active">{{$t('config.promServer.promServerList')}}</div>
|
||||
<div class="sidebar-info-item" @click="jumpTo('dc')" id="prom-jump-dc">
|
||||
{{$t('config.dc.dc')}}
|
||||
</div>
|
||||
<div class="sidebar-info-item" @click="jumpTo('model')" id="prom-jump-model">
|
||||
{{$t('config.model.model')}}
|
||||
</div>
|
||||
<div class="sidebar-info-item" @click="jumpTo('mib')" id="prom-jump-mib">
|
||||
{{$t('config.mib.mib')}}
|
||||
</div>
|
||||
<div class="sidebar-info-item" @click="jumpTo('system')" id="prom-jump-system">
|
||||
{{$t('config.system.system')}}
|
||||
</div>
|
||||
<div class="sidebar-info-item" @click="jumpTo('terminallog')" id="prom-jump-terminallog">
|
||||
{{$t('config.terminallog.terminallog')}}
|
||||
</div>
|
||||
<div class="sidebar-info-item" @click="jumpTo('operationlog')" id="account-jump-operation">
|
||||
{{$t('config.operationlog.operationlog')}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div slot="content-right"class="slot-content">
|
||||
<div class="main-list" :class="{'main-list-with-sub': bottomBox.showSubList}">
|
||||
<div class="main-modal"></div>
|
||||
<div class="top-tools" v-show="bottomBox.mainResizeShow">
|
||||
<div class="top-tool-main-right" :class="{'top-tool-main-right-to-left': bottomBox.showSubList}">
|
||||
<div class="top-tool-search">
|
||||
<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">
|
||||
<i class="nz-icon-create-square nz-icon"></i>
|
||||
</button>
|
||||
<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="bottomBox.inTransform"></search-input>
|
||||
</div>
|
||||
<div class="pagination-top pagination-top-hide display-none"></div>
|
||||
</div>
|
||||
<el-table :data="tableData" border v-show="bottomBox.mainResizeShow" :height="mainTableHeight" style="width: 100%;"
|
||||
v-loading="tools.loading" ref="promTable" class="nz-table" v-scrollBar:el-table="'large'"
|
||||
@sort-change="tableDataSort">
|
||||
<el-table-column :resizable="false" v-for="(item, index) in tools.tablelable"
|
||||
v-if="item.show"
|
||||
:width="item.width"
|
||||
:key="`col-${index}`"
|
||||
:label="item.label"
|
||||
:sortable="sortableShow(item.prop)"
|
||||
:prop="propTitle(item.prop)"
|
||||
:sort-orders="['ascending', 'descending']">
|
||||
<template slot-scope="scope" :column="item">
|
||||
<span v-if="item.prop == 'idc'" >{{scope.row[item.prop]?scope.row[item.prop].name:'-'}}</span>
|
||||
|
||||
<span v-else-if="item.prop == 'type'">
|
||||
{{scope.row[item.prop] == '1' ? 'Global' : ''}}
|
||||
{{scope.row[item.prop] == '2' ? 'Per-Datacenter' : ''}}
|
||||
</span>
|
||||
<span v-else-if="item.prop == 'status'">
|
||||
<el-popover placement="right" width="200" trigger="hover" :content="$t('asset.assetStatPre')+(scope.row.checkTime?scope.row.checkTime:$t('asset.assetStatDown'))">
|
||||
<div slot="reference" style="width: 20px">
|
||||
<div :class="{'active-icon green':scope.row[item.prop] == '1','active-icon red':scope.row[item.prop] == '0' || scope.row[item.prop] == '-1' || scope.row[item.prop] == '-2'}"></div>
|
||||
</div>
|
||||
</el-popover>
|
||||
</span>
|
||||
<div v-else-if="item.prop == 'option'" class="content-right-options">
|
||||
<span :title="$t('overall.view')" @click="detail(scope.row)" class="content-right-option" :id="'prom-detail-'+scope.row.id"><i class="nz-icon nz-icon-view"></i></span>
|
||||
|
||||
<span :title="$t('overall.edit')" @click="edit(scope.row)" class="content-right-option" :id="'prom-edit-'+scope.row.id"><i class="nz-icon nz-icon-edit"></i></span>
|
||||
|
||||
<span :title="$t('overall.delete')" @click="del(scope.row)" class="content-right-option" :id="'prom-del-'+scope.row.id"><i class="el-icon-delete"></i></span>
|
||||
</div>
|
||||
<span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
|
||||
<template v-else>-</template>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column width="28" :resizable="false">
|
||||
<template slot="header" slot-scope="scope">
|
||||
<span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear">
|
||||
<i class="nz-icon nz-icon-gear"></i>
|
||||
</span>
|
||||
</template>
|
||||
<template v-slot="scope">
|
||||
<button v-if="scope.$index == 0" class="to-top" :style="{top: tools.toTopBtnTop}" :class="{'to-top-is-hover': tools.tableHover}" v-show="tools.showTopBtn && bottomBox.mainResizeShow" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="pagination-bottom" v-show="!bottomBox.showSubList">
|
||||
<Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
|
||||
<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">
|
||||
<i class="nz-icon-create-square nz-icon"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="pagination-top pagination-top-hide display-none"></div>
|
||||
</div>
|
||||
<el-table :data="tableData" border v-show="bottomBox.mainResizeShow" :height="mainTableHeight" style="width: 100%;"
|
||||
v-loading="tools.loading" ref="promTable" class="nz-table" v-scrollBar:el-table="'large'"
|
||||
@sort-change="tableDataSort">
|
||||
<el-table-column :resizable="false" v-for="(item, index) in tools.tablelable"
|
||||
v-if="item.show"
|
||||
:width="item.width"
|
||||
:key="`col-${index}`"
|
||||
:label="item.label"
|
||||
:sortable="sortableShow(item.prop)"
|
||||
:prop="propTitle(item.prop)"
|
||||
:sort-orders="['ascending', 'descending']">
|
||||
<template slot-scope="scope" :column="item">
|
||||
<span v-if="item.prop == 'idc'" >{{scope.row[item.prop]?scope.row[item.prop].name:'-'}}</span>
|
||||
|
||||
<span v-else-if="item.prop == 'type'">
|
||||
{{scope.row[item.prop] == '1' ? 'Global' : ''}}
|
||||
{{scope.row[item.prop] == '2' ? 'Per-Datacenter' : ''}}
|
||||
</span>
|
||||
<span v-else-if="item.prop == 'status'">
|
||||
<el-popover placement="right" width="200" trigger="hover" :content="$t('asset.assetStatPre')+(scope.row.checkTime?scope.row.checkTime:$t('asset.assetStatDown'))">
|
||||
<div slot="reference" style="width: 20px">
|
||||
<div :class="{'active-icon green':scope.row[item.prop] == '1','active-icon red':scope.row[item.prop] == '0' || scope.row[item.prop] == '-1' || scope.row[item.prop] == '-2'}"></div>
|
||||
</div>
|
||||
</el-popover>
|
||||
</span>
|
||||
<div v-else-if="item.prop == 'option'" class="content-right-options">
|
||||
<span :title="$t('overall.view')" @click="detail(scope.row)" class="content-right-option" :id="'prom-detail-'+scope.row.id"><i class="nz-icon nz-icon-view"></i></span>
|
||||
|
||||
<span :title="$t('overall.edit')" @click="edit(scope.row)" class="content-right-option" :id="'prom-edit-'+scope.row.id"><i class="nz-icon nz-icon-edit"></i></span>
|
||||
|
||||
<span :title="$t('overall.delete')" @click="del(scope.row)" class="content-right-option" :id="'prom-del-'+scope.row.id"><i class="el-icon-delete"></i></span>
|
||||
</div>
|
||||
<span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
|
||||
<template v-else>-</template>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column width="28" :resizable="false">
|
||||
<template slot="header" slot-scope="scope">
|
||||
<span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear">
|
||||
<i class="nz-icon nz-icon-gear"></i>
|
||||
</span>
|
||||
</template>
|
||||
<template v-slot="scope">
|
||||
<button v-if="scope.$index == 0" class="to-top" :style="{top: tools.toTopBtnTop}" :class="{'to-top-is-hover': tools.tableHover}" v-show="tools.showTopBtn && bottomBox.mainResizeShow" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="pagination-bottom" v-show="!bottomBox.showSubList">
|
||||
<Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
|
||||
</div>
|
||||
<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="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>
|
||||
<transition name="right-box">
|
||||
<prom-server-box v-if="rightBox.show" :prom-server="promServer" @close="closeRightBox"></prom-server-box>
|
||||
</transition>
|
||||
|
||||
@@ -1,264 +1,233 @@
|
||||
<template>
|
||||
<div class="system">
|
||||
<left-menu >
|
||||
<div slot="content-left" class="slot-content">
|
||||
<div class="sidebar-title">{{$t('overall.config')}}</div>
|
||||
<div class="sidebar-info">
|
||||
<div class="sidebar-info-item sidebar-info-top" @click="jumpTo('account')" id="prom-jump-account">
|
||||
{{$t('config.account.account')}}
|
||||
</div>
|
||||
<div class="sidebar-info-item " @click="jumpTo('promServer')">{{$t('config.promServer.promServerList')}}</div>
|
||||
<div class="sidebar-info-item" @click="jumpTo('dc')" id="system-jump-dc">
|
||||
{{$t('config.dc.dc')}}
|
||||
</div>
|
||||
<div class="sidebar-info-item" @click="jumpTo('model')" id="system-jump-model">
|
||||
{{$t('config.model.model')}}
|
||||
</div>
|
||||
<div class="sidebar-info-item" @click="jumpTo('mib')" id="system-jump-mib">
|
||||
{{$t('config.mib.mib')}}
|
||||
</div>
|
||||
<div class="sidebar-info-item sidebar-info-item-active" id="system-jump-system">
|
||||
{{$t('config.system.system')}}
|
||||
</div>
|
||||
<div class="sidebar-info-item" @click="jumpTo('terminallog')" id="system-jump-terminallog">
|
||||
{{$t('config.terminallog.terminallog')}}
|
||||
</div>
|
||||
<div class="sidebar-info-item" @click="jumpTo('operationlog')" id="account-jump-operation">
|
||||
{{$t('config.operationlog.operationlog')}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div slot="content-right" class="slot-content system-tabs">
|
||||
<el-tabs type="border-card" @tab-click="selectTab" v-model="activeTab" class="system-tabs" >
|
||||
<el-tab-pane :label="$t('config.system.basic.basic')" name="basic">
|
||||
<div class="system-config-form">
|
||||
<el-form :model="basic" label-width="180px" size="small" ref="basicForm" :rules="basic.asset_ping_switch == 'on'?basicRules:basicRules2" :validate-on-rule-change="false">
|
||||
<el-form-item :label="$t('config.system.basic.systemName')" prop="system_name">
|
||||
<el-input v-model="basic.system_name"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('config.system.basic.curUrl')" prop="alert_api">
|
||||
<el-input v-model="basic.alert_api"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('config.system.basic.assetPingSwith')" prop="asset_ping_switch">
|
||||
<el-switch v-model.number="basic.asset_ping_switch" active-color="rgb(238, 157, 63)" active-value='on' inactive-value='off'>
|
||||
</el-switch>
|
||||
</el-form-item>
|
||||
<!--<el-form-item :label="$t('config.system.basic.assetPingInterval')" prop="asset_ping_interval">
|
||||
<el-input v-model.number="basic.asset_ping_interval" :disabled="basic.asset_ping_switch == 'off'"></el-input><span class="nz-input-append">s</span>
|
||||
</el-form-item>-->
|
||||
<el-form-item :label="$t('config.system.basic.defaultCabinetUsize')" prop="default_cabinet_usize">
|
||||
<el-input v-model.number="basic.default_cabinet_usize" ></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('config.system.basic.exporterTarget')" prop="node_exporter_target_path">
|
||||
<el-input v-model="basic.node_exporter_target_path"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('config.system.basic.scrapeInterval')" prop="scrape_interval">
|
||||
<el-input v-model.number="basic.scrape_interval" ></el-input><span class="nz-input-append">{{$t('config.system.basic.second')}}</span>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('config.system.basic.storageRetention')" prop="storage_local_retention">
|
||||
<el-input v-model.number="basic.storage_local_retention" ></el-input><span class="nz-input-append">{{$t('config.system.basic.day')}}</span>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('config.system.basic.timezone')" prop="timezone">
|
||||
<el-tabs type="border-card" @tab-click="selectTab" v-model="activeTab" class="system-tabs" >
|
||||
<el-tab-pane :label="$t('config.system.basic.basic')" name="basic">
|
||||
<div class="system-config-form">
|
||||
<el-form :model="basic" label-width="180px" size="small" ref="basicForm" :rules="basic.asset_ping_switch == 'on'?basicRules:basicRules2" :validate-on-rule-change="false">
|
||||
<el-form-item :label="$t('config.system.basic.systemName')" prop="system_name">
|
||||
<el-input v-model="basic.system_name"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('config.system.basic.curUrl')" prop="alert_api">
|
||||
<el-input v-model="basic.alert_api"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('config.system.basic.assetPingSwith')" prop="asset_ping_switch">
|
||||
<el-switch v-model.number="basic.asset_ping_switch" active-color="rgb(238, 157, 63)" active-value='on' inactive-value='off'>
|
||||
</el-switch>
|
||||
</el-form-item>
|
||||
<!--<el-form-item :label="$t('config.system.basic.assetPingInterval')" prop="asset_ping_interval">
|
||||
<el-input v-model.number="basic.asset_ping_interval" :disabled="basic.asset_ping_switch == 'off'"></el-input><span class="nz-input-append">s</span>
|
||||
</el-form-item>-->
|
||||
<el-form-item :label="$t('config.system.basic.defaultCabinetUsize')" prop="default_cabinet_usize">
|
||||
<el-input v-model.number="basic.default_cabinet_usize" ></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('config.system.basic.exporterTarget')" prop="node_exporter_target_path">
|
||||
<el-input v-model="basic.node_exporter_target_path"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('config.system.basic.scrapeInterval')" prop="scrape_interval">
|
||||
<el-input v-model.number="basic.scrape_interval" ></el-input><span class="nz-input-append">{{$t('config.system.basic.second')}}</span>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('config.system.basic.storageRetention')" prop="storage_local_retention">
|
||||
<el-input v-model.number="basic.storage_local_retention" ></el-input><span class="nz-input-append">{{$t('config.system.basic.day')}}</span>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('config.system.basic.timezone')" prop="timezone">
|
||||
<!-- <el-input v-model.number="basic.timezone" ></el-input>-->
|
||||
<el-select v-model="basic.timezone">
|
||||
<el-option v-for="(item,index) in timezoneOption" :key="index" :label="item.label" :value="item.value"></el-option>
|
||||
</el-select>
|
||||
<el-select v-model="basic.timezone">
|
||||
<el-option v-for="(item,index) in timezoneOption" :key="index" :label="item.label" :value="item.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-100" @click="resetForm('basicForm','basic')" style="top:2px">{{$t('overall.reset')}}</el-button>
|
||||
<el-button type="primary" @click="saveSetInfo('basic','basicForm')" class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-100">{{$t('overall.submit')}}</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="$t('config.system.email.email')" name="email" >
|
||||
<div class="system-config-form">
|
||||
<el-form :model="email" label-width="180px" size="small" ref="emailForm" :rules="email.email_enable=='on'?emailRules:{}" :validate-on-rule-change="false">
|
||||
<el-form-item :label="$t('config.system.email.enable')" prop="email_enable">
|
||||
<el-checkbox v-model="email.email_enable" true-label="on" false-label="off" @change="switchChange('emailForm')"></el-checkbox>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('config.system.email.smtpHost')" prop="email_smtp_host">
|
||||
<el-input v-model="email.email_smtp_host" :disabled="email.email_enable == 'off'"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('config.system.email.smtpPort')" prop="email_smtp_port">
|
||||
<el-input v-model.number="email.email_smtp_port" :disabled="email.email_enable == 'off'"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('config.system.email.smtpAccount')" prop="email_smtp_account">
|
||||
<el-input v-model="email.email_smtp_account" :disabled="email.email_enable == 'off'"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('config.system.email.smtpPwd')" prop="email_smtp_password">
|
||||
<el-input v-model="email.email_smtp_password" type="password" :show-password="false" :disabled="email.email_enable == 'off'"></el-input>
|
||||
<div><span>{{$t('config.system.email.pwdTip')}}</span></div>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('config.system.email.sendAccount')" prop="email_send_account">
|
||||
<el-input v-model="email.email_send_account" :disabled="email.email_enable == 'off'"></el-input>
|
||||
<div><span>{{$t('config.system.email.sendAccountTip')}}</span></div>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('config.system.email.testAccount')" prop="email_test_reciver">
|
||||
<el-input v-model="email.email_test_reciver" :disabled="email.email_enable == 'off'"></el-input>
|
||||
<div><span>{{$t('config.system.email.testAccountTip')}}</span></div>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('config.system.email.useSSL')" prop="email_ssl_flag">
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="5"><el-checkbox v-model="email.email_ssl_flag" true-label="on" false-label="off" :disabled="email.email_enable == 'off'"></el-checkbox></el-col>
|
||||
<el-col :span="15"><div><span>{{$t('config.system.email.sslTip')}}</span></div></el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('config.system.email.useTLS')" prop="email_tls_flag">
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="5"><el-checkbox v-model="email.email_tls_flag" true-label='on' false-label='off' :disabled="email.email_enable == 'off'"></el-checkbox></el-col>
|
||||
<el-col :span="16"><span>{{$t('config.system.email.tlsTip')}}</span></el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-100" @click="resetForm('emailForm','email')" style="top:2px">{{$t('overall.reset')}}</el-button>
|
||||
<el-button class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-100" :class="{'nz-btn-disabled':email.email_enable == 'off'}" :disabled="email.email_enable == 'off'" @click="testSetInfo('email','emailForm')" style="top:2px">{{$t('config.system.email.testConnection')}}</el-button>
|
||||
<el-button type="primary" @click="saveSetInfo('email','emailForm')" class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-100">{{$t('overall.submit')}}</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="$t('config.system.terminal.terminal')" name="terminal">
|
||||
<div class="system-config-form">
|
||||
<el-form :model="terminal" label-width="180px" size="small" ref="terminalForm" :rules="terminalRules">
|
||||
<el-form-item :label="$t('config.system.terminal.terminalNum')" prop="max_terminal_num">
|
||||
<el-input v-model.number="terminal.max_terminal_num"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="saveSetInfo('terminal','terminalForm')" class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-100">{{$t('overall.submit')}}</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="$t('config.system.ldap.ldap')" name="ldap">
|
||||
<div class="system-config-form">
|
||||
<el-form :model="ldap" label-width="180px" size="small" ref="ldapForm" :rules="ldap.ldap_enable == 'on'?ldapRules:{}" :validate-on-rule-change="false">
|
||||
<el-form-item :label="$t('config.system.ldap.active')" prop="ldap_enable">
|
||||
<el-checkbox v-model="ldap.ldap_enable" true-label='on' false-label='off' @change="switchChange('ldapForm')"></el-checkbox>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('config.system.ldap.address')" prop="ldap_address">
|
||||
<el-input v-model="ldap.ldap_address"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('config.system.ldap.dn')" prop="ldap_dn">
|
||||
<el-input v-model="ldap.ldap_dn"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('config.system.ldap.pwd')" prop="ldap_password">
|
||||
<el-input v-model="ldap.ldap_password" type="password"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('config.system.ldap.ou')" prop="ldap_ou">
|
||||
<el-input v-model="ldap.ldap_ou"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('config.system.ldap.filter')" prop="ldap_user_filter">
|
||||
<el-input v-model="ldap.ldap_user_filter"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('config.system.ldap.map')" prop="ldap_mapping">
|
||||
<el-input v-model="ldap.ldap_mapping"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-100" @click="resetForm('ldapForm','ldap')" style="top:2px">{{$t('overall.reset')}}</el-button>
|
||||
<el-button class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-100" @click="testSetInfo('ldap','ldapForm')" style="top:2px">{{$t('config.system.email.testConnection')}}</el-button>
|
||||
<el-button type="primary" @click="saveSetInfo('ldap','ldapForm')" class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-100">{{$t('overall.submit')}}</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="$t('config.system.link.link')" name="link"><!--$t('config.system.reset.reset')-->
|
||||
<div class="linkBox" >
|
||||
<div class="linkTitle">
|
||||
<span class="linkTitleHandle"></span>
|
||||
<div class="linkTitleName">{{$t('config.system.link.name')}}</div>
|
||||
<div class="linkTitleUrl">{{$t('config.system.link.url')}}</div>
|
||||
<div class="linkTitleBtn">{{$t('config.system.link.operation')}}</div>
|
||||
</div>
|
||||
<!--linkAdd-->
|
||||
<div class="linkContent linkAddBox">
|
||||
<span class="linkTitleHandle"></span>
|
||||
<el-form :inline="true" :model="linkTemp" label-width="180px" size="small" ref="linkTempForm" :rules="linkRules" :validate-on-rule-change="false" class="reset-form">
|
||||
<el-form-item prop="name">
|
||||
<el-input v-model="linkTemp.name" class="linkName"/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-100" @click="resetForm('basicForm','basic')" style="top:2px">{{$t('overall.reset')}}</el-button>
|
||||
<el-button type="primary" @click="saveSetInfo('basic','basicForm')" class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-100">{{$t('overall.submit')}}</el-button>
|
||||
<el-form-item prop="url">
|
||||
<el-input v-model="linkTemp.url" class="linkUrl"/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="btn">
|
||||
<i class="nz-icon-create-square nz-icon" @click="linkAdd"></i>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="$t('config.system.email.email')" name="email" >
|
||||
<div class="system-config-form">
|
||||
<el-form :model="email" label-width="180px" size="small" ref="emailForm" :rules="email.email_enable=='on'?emailRules:{}" :validate-on-rule-change="false">
|
||||
<el-form-item :label="$t('config.system.email.enable')" prop="email_enable">
|
||||
<el-checkbox v-model="email.email_enable" true-label="on" false-label="off" @change="switchChange('emailForm')"></el-checkbox>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('config.system.email.smtpHost')" prop="email_smtp_host">
|
||||
<el-input v-model="email.email_smtp_host" :disabled="email.email_enable == 'off'"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('config.system.email.smtpPort')" prop="email_smtp_port">
|
||||
<el-input v-model.number="email.email_smtp_port" :disabled="email.email_enable == 'off'"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('config.system.email.smtpAccount')" prop="email_smtp_account">
|
||||
<el-input v-model="email.email_smtp_account" :disabled="email.email_enable == 'off'"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('config.system.email.smtpPwd')" prop="email_smtp_password">
|
||||
<el-input v-model="email.email_smtp_password" type="password" :show-password="false" :disabled="email.email_enable == 'off'"></el-input>
|
||||
<div><span>{{$t('config.system.email.pwdTip')}}</span></div>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('config.system.email.sendAccount')" prop="email_send_account">
|
||||
<el-input v-model="email.email_send_account" :disabled="email.email_enable == 'off'"></el-input>
|
||||
<div><span>{{$t('config.system.email.sendAccountTip')}}</span></div>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('config.system.email.testAccount')" prop="email_test_reciver">
|
||||
<el-input v-model="email.email_test_reciver" :disabled="email.email_enable == 'off'"></el-input>
|
||||
<div><span>{{$t('config.system.email.testAccountTip')}}</span></div>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('config.system.email.useSSL')" prop="email_ssl_flag">
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="5"><el-checkbox v-model="email.email_ssl_flag" true-label="on" false-label="off" :disabled="email.email_enable == 'off'"></el-checkbox></el-col>
|
||||
<el-col :span="15"><div><span>{{$t('config.system.email.sslTip')}}</span></div></el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('config.system.email.useTLS')" prop="email_tls_flag">
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="5"><el-checkbox v-model="email.email_tls_flag" true-label='on' false-label='off' :disabled="email.email_enable == 'off'"></el-checkbox></el-col>
|
||||
<el-col :span="16"><span>{{$t('config.system.email.tlsTip')}}</span></el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-100" @click="resetForm('emailForm','email')" style="top:2px">{{$t('overall.reset')}}</el-button>
|
||||
<el-button class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-100" :class="{'nz-btn-disabled':email.email_enable == 'off'}" :disabled="email.email_enable == 'off'" @click="testSetInfo('email','emailForm')" style="top:2px">{{$t('config.system.email.testConnection')}}</el-button>
|
||||
<el-button type="primary" @click="saveSetInfo('email','emailForm')" class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-100">{{$t('overall.submit')}}</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="$t('config.system.terminal.terminal')" name="terminal">
|
||||
<div class="system-config-form">
|
||||
<el-form :model="terminal" label-width="180px" size="small" ref="terminalForm" :rules="terminalRules">
|
||||
<el-form-item :label="$t('config.system.terminal.terminalNum')" prop="max_terminal_num">
|
||||
<el-input v-model.number="terminal.max_terminal_num"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="saveSetInfo('terminal','terminalForm')" class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-100">{{$t('overall.submit')}}</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="$t('config.system.ldap.ldap')" name="ldap">
|
||||
<div class="system-config-form">
|
||||
<el-form :model="ldap" label-width="180px" size="small" ref="ldapForm" :rules="ldap.ldap_enable == 'on'?ldapRules:{}" :validate-on-rule-change="false">
|
||||
<el-form-item :label="$t('config.system.ldap.active')" prop="ldap_enable">
|
||||
<el-checkbox v-model="ldap.ldap_enable" true-label='on' false-label='off' @change="switchChange('ldapForm')"></el-checkbox>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('config.system.ldap.address')" prop="ldap_address">
|
||||
<el-input v-model="ldap.ldap_address"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('config.system.ldap.dn')" prop="ldap_dn">
|
||||
<el-input v-model="ldap.ldap_dn"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('config.system.ldap.pwd')" prop="ldap_password">
|
||||
<el-input v-model="ldap.ldap_password" type="password"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('config.system.ldap.ou')" prop="ldap_ou">
|
||||
<el-input v-model="ldap.ldap_ou"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('config.system.ldap.filter')" prop="ldap_user_filter">
|
||||
<el-input v-model="ldap.ldap_user_filter"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('config.system.ldap.map')" prop="ldap_mapping">
|
||||
<el-input v-model="ldap.ldap_mapping"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-100" @click="resetForm('ldapForm','ldap')" style="top:2px">{{$t('overall.reset')}}</el-button>
|
||||
<el-button class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-100" @click="testSetInfo('ldap','ldapForm')" style="top:2px">{{$t('config.system.email.testConnection')}}</el-button>
|
||||
<el-button type="primary" @click="saveSetInfo('ldap','ldapForm')" class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-100">{{$t('overall.submit')}}</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="$t('config.system.link.link')" name="link"><!--$t('config.system.reset.reset')-->
|
||||
<div class="linkBox" >
|
||||
<div class="linkTitle">
|
||||
<span class="linkTitleHandle"></span>
|
||||
<div class="linkTitleName">{{$t('config.system.link.name')}}</div>
|
||||
<div class="linkTitleUrl">{{$t('config.system.link.url')}}</div>
|
||||
<div class="linkTitleBtn">{{$t('config.system.link.operation')}}</div>
|
||||
</div>
|
||||
<!--linkAdd-->
|
||||
<div class="linkContent linkAddBox">
|
||||
<span class="linkTitleHandle"></span>
|
||||
<el-form :inline="true" :model="linkTemp" label-width="180px" size="small" ref="linkTempForm" :rules="linkRules" :validate-on-rule-change="false" class="reset-form">
|
||||
<el-form-item prop="name">
|
||||
<el-input v-model="linkTemp.name" class="linkName"/>
|
||||
<!--linkEdit-->
|
||||
<div class="scrollBox"
|
||||
v-scrollBar>
|
||||
<draggable v-model="link"
|
||||
:options="{group:'people',animation:150,ghostClass:'sortable-ghost',chosenClass:'chosenClass',scroll:true,scrollSensitivity:200}"
|
||||
@change="change"
|
||||
@start="start"
|
||||
@end="end"
|
||||
:move="move"
|
||||
handle=".handle"
|
||||
>
|
||||
<div v-for="(item,index) in link" class="linkContent" :id="'linkDiv'+item.id">
|
||||
<i class="nz-icon nz-icon-sort4 handle"></i>
|
||||
<el-form :inline="true" :model="link[index]" :ref="'linkForm'+item.id" label-width="180px" size="small" ref="resetForm" :rules="linkRules" :validate-on-rule-change="false" class="reset-form" :key="index" v-if="item.isEdit" >
|
||||
<el-form-item prop="name" class="linkName">
|
||||
<el-input v-model="item.name" width="140px" />
|
||||
</el-form-item>
|
||||
<el-form-item prop="url">
|
||||
<el-input v-model="linkTemp.url" class="linkUrl"/>
|
||||
<el-form-item prop="url" class="linkUrl">
|
||||
<el-input v-model="item.url" width="460px" />
|
||||
</el-form-item>
|
||||
<el-form-item prop="btn">
|
||||
<i class="nz-icon-create-square nz-icon" @click="linkAdd"></i>
|
||||
<el-button type="primary" class="linkBtn nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-75" @click="linkUpdate(item)">Update</el-button>
|
||||
<el-button class="linkBtn nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-75" @click="linkCancel(item)">Cancel</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<!--linkEdit-->
|
||||
<div class="scrollBox"
|
||||
v-scrollBar>
|
||||
<draggable v-model="link"
|
||||
:options="{group:'people',animation:150,ghostClass:'sortable-ghost',chosenClass:'chosenClass',scroll:true,scrollSensitivity:200}"
|
||||
@change="change"
|
||||
@start="start"
|
||||
@end="end"
|
||||
:move="move"
|
||||
handle=".handle"
|
||||
>
|
||||
<div v-for="(item,index) in link" class="linkContent" :id="'linkDiv'+item.id">
|
||||
<i class="nz-icon nz-icon-sort4 handle"></i>
|
||||
<el-form :inline="true" :model="link[index]" :ref="'linkForm'+item.id" label-width="180px" size="small" ref="resetForm" :rules="linkRules" :validate-on-rule-change="false" class="reset-form" :key="index" v-if="item.isEdit" >
|
||||
<el-form-item prop="name" class="linkName">
|
||||
<el-input v-model="item.name" width="140px" />
|
||||
</el-form-item>
|
||||
<el-form-item prop="url" class="linkUrl">
|
||||
<el-input v-model="item.url" width="460px" />
|
||||
</el-form-item>
|
||||
<el-form-item prop="btn">
|
||||
<el-button type="primary" class="linkBtn nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-75" @click="linkUpdate(item)">Update</el-button>
|
||||
<el-button class="linkBtn nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-75" @click="linkCancel(item)">Cancel</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="linkFormContent" v-else>
|
||||
<div class="linkTitleName" :title="item.name">{{item.name}}</div>
|
||||
<div class="linkTitleUrl">
|
||||
<span class="linkTitleUrlContent" @click="openUrl(item)" @dblclick.stop="linkEdit(item)">
|
||||
<!--<el-tooltip class="item" effect="dark" :content="item.url" placement="top" popper-class="linkUrlTip">-->
|
||||
<span>{{item.url}}</span>
|
||||
<!--</el-tooltip>-->
|
||||
</span>
|
||||
</div>
|
||||
<div class="linkFormBtn">
|
||||
<i class="nz-icon nz-icon-edit" @click.stop="linkEdit(item)" v-if="item.buildIn=='0'"></i>
|
||||
<i class="nz-icon nz-icon-delete" @click="linkDel(item)" v-if="item.buildIn=='0'"></i>
|
||||
</div>
|
||||
<div class="linkFormContent" v-else>
|
||||
<div class="linkTitleName" :title="item.name">{{item.name}}</div>
|
||||
<div class="linkTitleUrl">
|
||||
<span class="linkTitleUrlContent" @click="openUrl(item)" @dblclick.stop="linkEdit(item)">
|
||||
<!--<el-tooltip class="item" effect="dark" :content="item.url" placement="top" popper-class="linkUrlTip">-->
|
||||
<span>{{item.url}}</span>
|
||||
<!--</el-tooltip>-->
|
||||
</span>
|
||||
</div>
|
||||
<div class="linkFormBtn">
|
||||
<i class="nz-icon nz-icon-edit" @click.stop="linkEdit(item)" v-if="item.buildIn=='0'"></i>
|
||||
<i class="nz-icon nz-icon-delete" @click="linkDel(item)" v-if="item.buildIn=='0'"></i>
|
||||
</div>
|
||||
</div>
|
||||
</draggable>
|
||||
</div>
|
||||
</div>
|
||||
</draggable>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="$t('config.system.reset.reset')" name="reset">
|
||||
<div class="system-config-form">
|
||||
<el-form :model="reset" label-width="180px" size="small" ref="resetForm" :rules="resetRules" :validate-on-rule-change="false" class="reset-form">
|
||||
<el-form-item prop="type">
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="$t('config.system.reset.reset')" name="reset">
|
||||
<div class="system-config-form">
|
||||
<el-form :model="reset" label-width="180px" size="small" ref="resetForm" :rules="resetRules" :validate-on-rule-change="false" class="reset-form">
|
||||
<el-form-item prop="type">
|
||||
<!-- <el-checkbox-group v-model="reset.type">-->
|
||||
<!-- <div v-for="(item,index) in resetOptions" :key="item.value+index">-->
|
||||
<!-- <el-checkbox :value="item.value" :label="item.label" :disabled="true" :checked="true"></el-checkbox>-->
|
||||
<!-- </div>-->
|
||||
<!-- </el-checkbox-group>-->
|
||||
<div class="el-checkbox-group">
|
||||
<div v-for="(item,index) in resetOptions" :key="item.value+index" >
|
||||
<label class="el-checkbox sys-reset-label" :for="item.value" >
|
||||
<span class="el-checkbox__label" style="width: 100px;text-align: right;">{{item.label}}</span>
|
||||
<span class="el-checkbox__input">
|
||||
<input type="checkbox" name="resetType" :value="item.value" class="el-checkbox__original" aria-hidden="true" :id="item.value" @change="resetCheckBoxChange"/>
|
||||
<span class="el-checkbox__inner"></span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="el-checkbox-group">
|
||||
<div v-for="(item,index) in resetOptions" :key="item.value+index" >
|
||||
<label class="el-checkbox sys-reset-label" :for="item.value" >
|
||||
<span class="el-checkbox__label" style="width: 100px;text-align: right;">{{item.label}}</span>
|
||||
<span class="el-checkbox__input">
|
||||
<input type="checkbox" name="resetType" :value="item.value" class="el-checkbox__original" aria-hidden="true" :id="item.value" @change="resetCheckBoxChange"/>
|
||||
<span class="el-checkbox__inner"></span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-100" @click="resetSys()" style="top:2px">{{$t('overall.reset')}}</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</left-menu>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-100" @click="resetSys()" style="top:2px">{{$t('overall.reset')}}</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -5,93 +5,60 @@
|
||||
</style>
|
||||
<template>
|
||||
<div class="terminallog">
|
||||
<left-menu >
|
||||
<div slot="content-left" class="slot-content">
|
||||
<div class="sidebar-title">{{$t('overall.config')}}</div>
|
||||
<div class="sidebar-info">
|
||||
<div class="sidebar-info-item sidebar-info-top" @click="jumpTo('account')" id="prom-jump-account">
|
||||
{{$t('config.account.account')}}
|
||||
</div>
|
||||
<div class="sidebar-info-item" @click="jumpTo('promServer')" id="account-jump-promserver">
|
||||
{{$t('config.promServer.promServerList')}}
|
||||
</div>
|
||||
<div class="sidebar-info-item" @click="jumpTo('dc')" id="terminallog-jump-dc">
|
||||
{{$t('config.dc.dc')}}
|
||||
</div>
|
||||
<div class="sidebar-info-item" @click="jumpTo('model')" id="terminallog-jump-model">
|
||||
{{$t('config.model.model')}}
|
||||
</div>
|
||||
<div class="sidebar-info-item" @click="jumpTo('mib')" id="terminal-jump-mib">
|
||||
{{$t('config.mib.mib')}}
|
||||
</div>
|
||||
<div class="sidebar-info-item" @click="jumpTo('system')" id="terminal-jump-system">
|
||||
{{$t('config.system.system')}}
|
||||
</div>
|
||||
<div class="sidebar-info-item sidebar-info-item-active" @click="jumpTo('terminallog')" id="terminallog-jump-terminallog">
|
||||
{{$t('config.terminallog.terminallog')}}
|
||||
</div>
|
||||
<div class="sidebar-info-item" @click="jumpTo('operationlog')" id="terminallog-jump-operation">
|
||||
{{$t('config.operationlog.operationlog')}}
|
||||
<div class="top-tools">
|
||||
<div></div>
|
||||
<div>
|
||||
<div class="top-tool-search float-right">
|
||||
<search-input :searchMsg="searchMsg" @search="search"></search-input>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div slot="content-right" class="slot-content">
|
||||
<div class="top-tools">
|
||||
<div></div>
|
||||
<div>
|
||||
<div class="top-tool-search float-right">
|
||||
<search-input :searchMsg="searchMsg" @search="search"></search-input>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-table
|
||||
class="nz-table"
|
||||
:data="tableData"
|
||||
border
|
||||
ref="terminalLogTable"
|
||||
:height="$tableHeight.normal"
|
||||
v-scrollBar:el-table="'large'"
|
||||
v-loading="loading"
|
||||
:cell-class-name="messageStyle"
|
||||
style="width: 100%;"
|
||||
@sort-change="tableDataSort">
|
||||
<el-table-column
|
||||
:resizable="false"
|
||||
v-for="(item, index) in tablelable"
|
||||
v-if="item.show"
|
||||
:width="item.width"
|
||||
:key="`col-${index}`"
|
||||
:label="item.label"
|
||||
:sortable="sortableShow(item.prop)"
|
||||
:prop="propTitle(item.prop)"
|
||||
:sort-orders="['ascending', 'descending']"
|
||||
>
|
||||
<template slot-scope="scope" :column="item">
|
||||
<span v-if="item.prop == 'lang'">
|
||||
{{scope.row[item.prop] == 'en' ? 'English' : ''}}
|
||||
{{scope.row[item.prop] == 'zh' ? '中文' : ''}}
|
||||
{{scope.row[item.prop] == 'ru' ? 'русский' : ''}}
|
||||
</span>
|
||||
<template v-else-if="item.prop == 'status'">
|
||||
<span>{{scope.row.status==='1' ? $t("config.terminallog.success") : $t("config.terminallog.fail")}}</span>
|
||||
</template>
|
||||
<span v-else>{{scope.row[item.prop]}}</span>
|
||||
<el-table
|
||||
class="nz-table"
|
||||
:data="tableData"
|
||||
border
|
||||
ref="terminalLogTable"
|
||||
:height="$tableHeight.normal"
|
||||
v-scrollBar:el-table="'large'"
|
||||
v-loading="loading"
|
||||
:cell-class-name="messageStyle"
|
||||
style="width: 100%;"
|
||||
@sort-change="tableDataSort">
|
||||
<el-table-column
|
||||
:resizable="false"
|
||||
v-for="(item, index) in tablelable"
|
||||
v-if="item.show"
|
||||
:width="item.width"
|
||||
:key="`col-${index}`"
|
||||
:label="item.label"
|
||||
:sortable="sortableShow(item.prop)"
|
||||
:prop="propTitle(item.prop)"
|
||||
:sort-orders="['ascending', 'descending']"
|
||||
>
|
||||
<template slot-scope="scope" :column="item">
|
||||
<span v-if="item.prop == 'lang'">
|
||||
{{scope.row[item.prop] == 'en' ? 'English' : ''}}
|
||||
{{scope.row[item.prop] == 'zh' ? '中文' : ''}}
|
||||
{{scope.row[item.prop] == 'ru' ? 'русский' : ''}}
|
||||
</span>
|
||||
<template v-else-if="item.prop == 'status'">
|
||||
<span>{{scope.row.status==='1' ? $t("config.terminallog.success") : $t("config.terminallog.fail")}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column width="28">
|
||||
<template slot="header" slot-scope="scope">
|
||||
<span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear">
|
||||
<i class="nz-icon nz-icon-gear"></i>
|
||||
</span>
|
||||
</template>
|
||||
<template v-slot="scope">
|
||||
<button v-if="scope.$index == 0" class="to-top" :style="{top: toTopBtnTop}" :class="{'to-top-is-hover': tableHover}" v-show="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>
|
||||
</div>
|
||||
</left-menu>
|
||||
<span v-else>{{scope.row[item.prop]}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column width="28">
|
||||
<template slot="header" slot-scope="scope">
|
||||
<span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear">
|
||||
<i class="nz-icon nz-icon-gear"></i>
|
||||
</span>
|
||||
</template>
|
||||
<template v-slot="scope">
|
||||
<button v-if="scope.$index == 0" class="to-top" :style="{top: toTopBtnTop}" :class="{'to-top-is-hover': tableHover}" v-show="showTopBtn" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
|
||||
<element-set
|
||||
v-clickoutside="elementsetHide"
|
||||
:dropCol="dropCol"
|
||||
|
||||
@@ -1,47 +1,37 @@
|
||||
<template>
|
||||
<div class="explore">
|
||||
<left-menu>
|
||||
<div slot="content-left" class="slot-content">
|
||||
<div class="sidebar-title">{{$t('dashboard.title')}}</div>
|
||||
<div class="sidebar-info">
|
||||
<div class="sidebar-info-item " @click="jumpTo('overview')">{{$t('dashboard.overview.title')}}</div>
|
||||
<div class="sidebar-info-item" @click="jumpTo('panel')">{{$t('dashboard.panel.title')}}</div>
|
||||
<div class="sidebar-info-item sidebar-info-item-active">{{$t('dashboard.metricPreview.title')}}</div>
|
||||
<div class="main-list main-and-sub-transition">
|
||||
<!-- 顶部工具栏 -->
|
||||
<div class="top-tools" style="z-index: 1">
|
||||
<div class="top-tool-main-right">
|
||||
<pick-time :refresh-data-func="expressionChange" v-model="filterTime" @unitChange="chartUnitChange">
|
||||
<template slot="added-text">{{$t('dashboard.metricPreview.runQuery')}}</template>
|
||||
</pick-time>
|
||||
<button :disabled="saveDisabled" type="button" @click="saveChart"
|
||||
class="nz-btn nz-btn-size-large nz-btn-style-normal nz-btn-min-width-120"
|
||||
:class="{'nz-btn-disabled btn-disabled-cursor-not-allowed' : saveDisabled}">
|
||||
{{$t('dashboard.metric.saveChart')}}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div slot="content-right" class="slot-content">
|
||||
<div class="main-list main-and-sub-transition">
|
||||
<!-- 顶部工具栏 -->
|
||||
<div class="top-tools" style="z-index: 1">
|
||||
<div class="top-tool-main-right">
|
||||
<pick-time :refresh-data-func="expressionChange" v-model="filterTime" @unitChange="chartUnitChange">
|
||||
<template slot="added-text">{{$t('dashboard.metricPreview.runQuery')}}</template>
|
||||
</pick-time>
|
||||
<button :disabled="saveDisabled" type="button" @click="saveChart"
|
||||
class="nz-btn nz-btn-size-large nz-btn-style-normal nz-btn-min-width-120"
|
||||
:class="{'nz-btn-disabled btn-disabled-cursor-not-allowed' : saveDisabled}">
|
||||
{{$t('dashboard.metric.saveChart')}}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height: calc(100% - 50px);width: 100%;" >
|
||||
<el-scrollbar style="height: 100%" class="el-scrollbar-large">
|
||||
<div class="expression-room right-margin" style="padding-top: 5px">
|
||||
<!--坑，这个index居然是从1开始-->
|
||||
<promql-input
|
||||
v-for="index of promqlKeys.length"
|
||||
:ref="'promql-'+(index-1)"
|
||||
:id="promqlKeys[index-1]"
|
||||
:key="promqlKeys[index-1]"
|
||||
:expression-list="expressions"
|
||||
:index="index-1"
|
||||
:styleType="1"
|
||||
:history-param="historyParam"
|
||||
:plugins="['metric-selector', 'metric-input', 'add', 'remove']"
|
||||
@change="expressionChange"
|
||||
@addExpression="addExpression"
|
||||
@removeExpression="removeExpression"
|
||||
></promql-input>
|
||||
<div style="height: calc(100% - 50px);width: 100%;" >
|
||||
<el-scrollbar style="height: 100%" class="el-scrollbar-large">
|
||||
<div class="expression-room right-margin" style="padding-top: 5px">
|
||||
<!--坑，这个index居然是从1开始-->
|
||||
<promql-input
|
||||
v-for="index of promqlKeys.length"
|
||||
:ref="'promql-'+(index-1)"
|
||||
:id="promqlKeys[index-1]"
|
||||
:key="promqlKeys[index-1]"
|
||||
:expression-list="expressions"
|
||||
:index="index-1"
|
||||
:styleType="1"
|
||||
:history-param="historyParam"
|
||||
:plugins="['metric-selector', 'metric-input', 'add', 'remove']"
|
||||
@change="expressionChange"
|
||||
@addExpression="addExpression"
|
||||
@removeExpression="removeExpression"
|
||||
></promql-input>
|
||||
<!-- <promql-input-plus-->
|
||||
<!-- v-for="index of promqlKeys.length"-->
|
||||
<!-- :ref="'promql-plus'+(index-1)"-->
|
||||
@@ -52,161 +42,159 @@
|
||||
<!-- @addExpression="addExpression"-->
|
||||
<!-- @removeExpression="removeExpression"-->
|
||||
<!-- ></promql-input-plus>-->
|
||||
</div>
|
||||
<div class="chart-view right-margin" v-show="!showIntroduce"
|
||||
:class="{'shrink-view':!chartVisible || !defaultChartVisible}" style="position:relative;">
|
||||
<div class="view-title" @click="changeChartVisible" style="position:absolute;z-index: 1000"><i class="el-icon-caret-top" ></i> graph</div>
|
||||
<div class="chart-room">
|
||||
<chart ref="exploreChart" :unit="chartUnit"></chart>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-view right-margin" v-show="!showIntroduce"
|
||||
:class="{'shrink-view':!tableVisible || !defaultTableVisible}">
|
||||
<div class="view-title" @click="changeTableVisible"><i class="el-icon-caret-top"></i> table</div>
|
||||
<div class="table-room">
|
||||
<el-table class="nz-table explore-table"
|
||||
:data="tableData"
|
||||
border
|
||||
ref="exploreTable"
|
||||
tooltip-effect="light"
|
||||
v-scrollBar:el-table="'large'"
|
||||
v-loading="tableLoading"
|
||||
style="width: 100%;">
|
||||
<el-table-column
|
||||
:resizable="false"
|
||||
v-for="(item, index) in showTableLabels"
|
||||
v-if="item.show"
|
||||
:key="`col-${index}`"
|
||||
:label="item.label"
|
||||
:prop="item.prop"
|
||||
show-overflow-tooltip
|
||||
min-width="110px"
|
||||
></el-table-column>
|
||||
<el-table-column width="28" v-if="showTableLabels.length>0">
|
||||
<template slot="header" slot-scope="scope" :resizable="false">
|
||||
<span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear">
|
||||
<i class="nz-icon nz-icon-gear"></i>
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<pagination :page-obj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"
|
||||
:append-to-body="false"></pagination>
|
||||
</div>
|
||||
</div>
|
||||
<div class="introduce-view right-margin" v-show="showIntroduce">
|
||||
<div class="info-room">
|
||||
<div class="col-md-9 doc-content">
|
||||
<h1 class="page-header">Query examples<a class="header-anchor" href="https://prometheus.io/docs/prometheus/latest/querying/examples/" target="_blank"><i style="font-size: 16px;" class="nz-icon nz-icon-link1"></i></a></h1>
|
||||
<div class="content-divider"></div>
|
||||
<h2 >
|
||||
Simple time series selection
|
||||
</h2>
|
||||
</div>
|
||||
<div class="chart-view right-margin" v-show="!showIntroduce"
|
||||
:class="{'shrink-view':!chartVisible || !defaultChartVisible}" style="position:relative;">
|
||||
<div class="view-title" @click="changeChartVisible" style="position:absolute;z-index: 1000"><i class="el-icon-caret-top" ></i> graph</div>
|
||||
<div class="chart-room">
|
||||
<chart ref="exploreChart" :unit="chartUnit"></chart>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-view right-margin" v-show="!showIntroduce"
|
||||
:class="{'shrink-view':!tableVisible || !defaultTableVisible}">
|
||||
<div class="view-title" @click="changeTableVisible"><i class="el-icon-caret-top"></i> table</div>
|
||||
<div class="table-room">
|
||||
<el-table class="nz-table explore-table"
|
||||
:data="tableData"
|
||||
border
|
||||
ref="exploreTable"
|
||||
tooltip-effect="light"
|
||||
v-scrollBar:el-table="'large'"
|
||||
v-loading="tableLoading"
|
||||
style="width: 100%;">
|
||||
<el-table-column
|
||||
:resizable="false"
|
||||
v-for="(item, index) in showTableLabels"
|
||||
v-if="item.show"
|
||||
:key="`col-${index}`"
|
||||
:label="item.label"
|
||||
:prop="item.prop"
|
||||
show-overflow-tooltip
|
||||
min-width="110px"
|
||||
></el-table-column>
|
||||
<el-table-column width="28" v-if="showTableLabels.length>0">
|
||||
<template slot="header" slot-scope="scope" :resizable="false">
|
||||
<span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear">
|
||||
<i class="nz-icon nz-icon-gear"></i>
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<pagination :page-obj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"
|
||||
:append-to-body="false"></pagination>
|
||||
</div>
|
||||
</div>
|
||||
<div class="introduce-view right-margin" v-show="showIntroduce">
|
||||
<div class="info-room">
|
||||
<div class="col-md-9 doc-content">
|
||||
<h1 class="page-header">Query examples<a class="header-anchor" href="https://prometheus.io/docs/prometheus/latest/querying/examples/" target="_blank"><i style="font-size: 16px;" class="nz-icon nz-icon-link1"></i></a></h1>
|
||||
<div class="content-divider"></div>
|
||||
<h2 >
|
||||
Simple time series selection
|
||||
</h2>
|
||||
|
||||
<p>Return all time series with the metric <code>http_requests_total</code>:</p>
|
||||
<p>Return all time series with the metric <code>http_requests_total</code>:</p>
|
||||
|
||||
<pre><code>http_requests_total</code></pre>
|
||||
<pre><code>http_requests_total</code></pre>
|
||||
|
||||
<p>Return all time series with the metric <code>http_requests_total</code> and the given<code>job</code> and <code>handler</code> labels:</p>
|
||||
<p>Return all time series with the metric <code>http_requests_total</code> and the given<code>job</code> and <code>handler</code> labels:</p>
|
||||
|
||||
<pre><code>http_requests_total{job="apiserver", handler="/api/comments"}</code></pre>
|
||||
<pre><code>http_requests_total{job="apiserver", handler="/api/comments"}</code></pre>
|
||||
|
||||
<p>Return a whole range of time (in this case 5 minutes) for the same vector,
|
||||
making it a range vector:</p>
|
||||
<p>Return a whole range of time (in this case 5 minutes) for the same vector,
|
||||
making it a range vector:</p>
|
||||
|
||||
<pre><code>http_requests_total{job="apiserver", handler="/api/comments"}[5m]</code></pre>
|
||||
<pre><code>http_requests_total{job="apiserver", handler="/api/comments"}[5m]</code></pre>
|
||||
|
||||
<p>Note that an expression resulting in a range vector cannot be graphed directly,
|
||||
but viewed in the tabular ("Console") view of the expression browser.</p>
|
||||
<p>Note that an expression resulting in a range vector cannot be graphed directly,
|
||||
but viewed in the tabular ("Console") view of the expression browser.</p>
|
||||
|
||||
<p>Using regular expressions, you could select time series only for jobs whose
|
||||
name match a certain pattern, in this case, all jobs that end with <code>server</code>:</p>
|
||||
<p>Using regular expressions, you could select time series only for jobs whose
|
||||
name match a certain pattern, in this case, all jobs that end with <code>server</code>:</p>
|
||||
|
||||
<pre><code>http_requests_total{job=~".*server"}</code></pre>
|
||||
<pre><code>http_requests_total{job=~".*server"}</code></pre>
|
||||
|
||||
<p>All regular expressions in Prometheus use RE2 syntax.</p>
|
||||
<p>All regular expressions in Prometheus use RE2 syntax.</p>
|
||||
|
||||
<p>To select all HTTP status codes except 4xx ones, you could run:</p>
|
||||
<p>To select all HTTP status codes except 4xx ones, you could run:</p>
|
||||
|
||||
<pre><code>http_requests_total{status!~"4.."}</code></pre>
|
||||
<pre><code>http_requests_total{status!~"4.."}</code></pre>
|
||||
|
||||
<h2 >
|
||||
Subquery
|
||||
</h2>
|
||||
<h2 >
|
||||
Subquery
|
||||
</h2>
|
||||
|
||||
<p>Return the 5-minute rate of the <code>http_requests_total</code> metric for the past 30 minutes, with a resolution of 1 minute.</p>
|
||||
<p>Return the 5-minute rate of the <code>http_requests_total</code> metric for the past 30 minutes, with a resolution of 1 minute.</p>
|
||||
|
||||
<pre><code>rate(http_requests_total[5m])[30m:1m]</code></pre>
|
||||
<pre><code>rate(http_requests_total[5m])[30m:1m]</code></pre>
|
||||
|
||||
<p>This is an example of a nested subquery. The subquery for the <code>deriv</code> function uses the default resolution. Note that using subqueries unnecessarily is unwise.</p>
|
||||
<p>This is an example of a nested subquery. The subquery for the <code>deriv</code> function uses the default resolution. Note that using subqueries unnecessarily is unwise.</p>
|
||||
|
||||
<pre><code>max_over_time(deriv(rate(distance_covered_total[5s])[30s:5s])[10m:])</code></pre>
|
||||
<pre><code>max_over_time(deriv(rate(distance_covered_total[5s])[30s:5s])[10m:])</code></pre>
|
||||
|
||||
<h2 >
|
||||
Using functions, operators, etc.
|
||||
</h2>
|
||||
<h2 >
|
||||
Using functions, operators, etc.
|
||||
</h2>
|
||||
|
||||
<p>Return the per-second rate for all time series with the <code>http_requests_total</code>
|
||||
metric name, as measured over the last 5 minutes:</p>
|
||||
<p>Return the per-second rate for all time series with the <code>http_requests_total</code>
|
||||
metric name, as measured over the last 5 minutes:</p>
|
||||
|
||||
<pre><code>rate(http_requests_total[5m])</code></pre>
|
||||
<pre><code>rate(http_requests_total[5m])</code></pre>
|
||||
|
||||
<p>Assuming that the <code>http_requests_total</code> time series all have the labels <code>job</code>
|
||||
(fanout by job name) and <code>instance</code> (fanout by instance of the job), we might
|
||||
want to sum over the rate of all instances, so we get fewer output time series,
|
||||
but still preserve the <code>job</code> dimension:</p>
|
||||
<p>Assuming that the <code>http_requests_total</code> time series all have the labels <code>job</code>
|
||||
(fanout by job name) and <code>instance</code> (fanout by instance of the job), we might
|
||||
want to sum over the rate of all instances, so we get fewer output time series,
|
||||
but still preserve the <code>job</code> dimension:</p>
|
||||
|
||||
<pre><code>sum by (job) (rate(http_requests_total[5m]))</code></pre>
|
||||
<pre><code>sum by (job) (rate(http_requests_total[5m]))</code></pre>
|
||||
|
||||
<p>If we have two different metrics with the same dimensional labels, we can apply
|
||||
binary operators to them and elements on both sides with the same label set
|
||||
will get matched and propagated to the output. For example, this expression
|
||||
returns the unused memory in MiB for every instance (on a fictional cluster
|
||||
scheduler exposing these metrics about the instances it runs):</p>
|
||||
<p>If we have two different metrics with the same dimensional labels, we can apply
|
||||
binary operators to them and elements on both sides with the same label set
|
||||
will get matched and propagated to the output. For example, this expression
|
||||
returns the unused memory in MiB for every instance (on a fictional cluster
|
||||
scheduler exposing these metrics about the instances it runs):</p>
|
||||
|
||||
<pre><code>(instance_memory_limit_bytes - instance_memory_usage_bytes) / 1024 / 1024</code></pre>
|
||||
<pre><code>(instance_memory_limit_bytes - instance_memory_usage_bytes) / 1024 / 1024</code></pre>
|
||||
|
||||
<p>The same expression, but summed by application, could be written like this:</p>
|
||||
<p>The same expression, but summed by application, could be written like this:</p>
|
||||
|
||||
<pre><code>sum by (app, proc) (instance_memory_limit_bytes - instance_memory_usage_bytes) / 1024 / 1024</code></pre>
|
||||
<pre><code>sum by (app, proc) (instance_memory_limit_bytes - instance_memory_usage_bytes) / 1024 / 1024</code></pre>
|
||||
|
||||
<p>If the same fictional cluster scheduler exposed CPU usage metrics like the following for every instance:</p>
|
||||
<p>If the same fictional cluster scheduler exposed CPU usage metrics like the following for every instance:</p>
|
||||
|
||||
<pre><code>instance_cpu_time_ns{app="lion", proc="web", rev="34d0f99", env="prod", job="cluster-manager"}
|
||||
<pre><code>instance_cpu_time_ns{app="lion", proc="web", rev="34d0f99", env="prod", job="cluster-manager"}
|
||||
instance_cpu_time_ns{app="elephant", proc="worker", rev="34d0f99", env="prod", job="cluster-manager"}
|
||||
instance_cpu_time_ns{app="turtle", proc="api", rev="4d3a513", env="prod", job="cluster-manager"}
|
||||
instance_cpu_time_ns{app="fox", proc="widget", rev="4d3a513", env="prod", job="cluster-manager"}
|
||||
...
|
||||
</code></pre>
|
||||
|
||||
<p>...we could get the top 3 CPU users grouped by application (<code>app</code>) and process type (<code>proc</code>) like this:</p>
|
||||
<p>...we could get the top 3 CPU users grouped by application (<code>app</code>) and process type (<code>proc</code>) like this:</p>
|
||||
|
||||
<pre><code>topk(3, sum by (app, proc) (rate(instance_cpu_time_ns[5m])))</code></pre>
|
||||
<pre><code>topk(3, sum by (app, proc) (rate(instance_cpu_time_ns[5m])))</code></pre>
|
||||
|
||||
<p>Assuming this metric contains one time series per running instance, you could count the number of running instances per application like this:</p>
|
||||
<p>Assuming this metric contains one time series per running instance, you could count the number of running instances per application like this:</p>
|
||||
|
||||
<pre><code>count by (app) (instance_cpu_time_ns)</code></pre>
|
||||
<pre><code>count by (app) (instance_cpu_time_ns)</code></pre>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
<transition name="right-box">
|
||||
<chart-box v-if="rightBox.show" :chart="chart" ref="addChartModal" @close="handleBox(false)" :panel-data="panelData" @on-create-success="createSuccess" :show-panel="{id: -1, name: ''}"></chart-box>
|
||||
</transition>
|
||||
<element-set
|
||||
:allowed-all="true"
|
||||
v-clickoutside="elementsetHide"
|
||||
:dropCol="dropCol"
|
||||
@tablelable="tablelabelEmit"
|
||||
:table-title="tableLabels"
|
||||
ref="elementset"
|
||||
></element-set>
|
||||
</div>
|
||||
</left-menu>
|
||||
|
||||
</div>
|
||||
<transition name="right-box">
|
||||
<chart-box v-if="rightBox.show" :chart="chart" ref="addChartModal" @close="handleBox(false)" :panel-data="panelData" @on-create-success="createSuccess" :show-panel="{id: -1, name: ''}"></chart-box>
|
||||
</transition>
|
||||
<element-set
|
||||
:allowed-all="true"
|
||||
v-clickoutside="elementsetHide"
|
||||
:dropCol="dropCol"
|
||||
@tablelable="tablelabelEmit"
|
||||
:table-title="tableLabels"
|
||||
ref="elementset"
|
||||
></element-set>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -1,184 +1,170 @@
|
||||
<template>
|
||||
<div class="overview">
|
||||
<!--左侧菜单栏-->
|
||||
<left-menu>
|
||||
<div slot="content-left" class="overview-left slot-content">
|
||||
<div class="sidebar-title">{{$t('dashboard.title')}}</div>
|
||||
<div class="sidebar-info">
|
||||
<div class="sidebar-info-item sidebar-info-item-active" >{{$t('dashboard.overview.title')}}</div>
|
||||
<div class="sidebar-info-item sidebar-info-top " @click="jumpTo('panel')">{{$t('dashboard.panel.title')}}</div>
|
||||
<div class="sidebar-info-item" @click="jumpTo('explore')">{{$t('dashboard.metricPreview.title')}}</div>
|
||||
<!--标题-->
|
||||
<div class="overview-content-header">
|
||||
<div class="header-title" :class="{'hide-div':!isFullScreen}">{{systemName&&systemName != 'undefined'&&systemName != null?systemName: $t('dashboard.overview.contentTitle')}}</div>
|
||||
<div class="header-tool">
|
||||
<div class="tool-container">
|
||||
<div class="time">{{sysTime}}</div>
|
||||
<div class="date">
|
||||
<div class="week">{{sysWeek}}</div>
|
||||
<div class="sys-date">{{sysDate}}</div>
|
||||
</div>
|
||||
<div class="operation" @click="switchFullScreen" ><span ><i class="nz-icon screen-icon" :class="{'nz-icon-maxview':!isFullScreen,'nz-icon-exit-full-screen':isFullScreen}"></i></span></div>
|
||||
</div>
|
||||
</div>
|
||||
<!--右侧内容-->
|
||||
<div class="overview-right slot-content" id="mainDisplay" slot="content-right">
|
||||
<!--标题-->
|
||||
<div class="overview-content-header">
|
||||
<div class="header-title" :class="{'hide-div':!isFullScreen}">{{systemName&&systemName != 'undefined'&&systemName != null?systemName: $t('dashboard.overview.contentTitle')}}</div>
|
||||
<div class="header-tool">
|
||||
<div class="tool-container">
|
||||
<div class="time">{{sysTime}}</div>
|
||||
<div class="date">
|
||||
<div class="week">{{sysWeek}}</div>
|
||||
<div class="sys-date">{{sysDate}}</div>
|
||||
</div>
|
||||
<div class="operation" @click="switchFullScreen" ><span ><i class="nz-icon screen-icon" :class="{'nz-icon-maxview':!isFullScreen,'nz-icon-exit-full-screen':isFullScreen}"></i></span></div>
|
||||
</div>
|
||||
<!--内容-->
|
||||
<div class="overview-content">
|
||||
<!--第一行-->
|
||||
<div class="content-row-box">
|
||||
<div class="content-col-box">
|
||||
<div class="content-col-title">{{$t("dashboard.overview.asset.title")}}</div>
|
||||
<div class="content-col-content" v-loading="assetLoading">
|
||||
<div class="content-col-content-num">
|
||||
<vue-countup :start-value="0" :end-value="(assetData ? assetData.totalStat.total : '') | numberFormat" :decimals="(assetData ? assetData.totalStat.total : 0) < 1000 ? 0 : 1"></vue-countup>
|
||||
<span class="overview-row-unit">{{(assetData ? assetData.totalStat.total : '') | unitFormat}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--内容-->
|
||||
<div class="overview-content">
|
||||
<!--第一行-->
|
||||
<div class="content-row-box">
|
||||
<div class="content-col-box">
|
||||
<div class="content-col-title">{{$t("dashboard.overview.asset.title")}}</div>
|
||||
<div class="content-col-content" v-loading="assetLoading">
|
||||
<div class="content-col-content-num">
|
||||
<vue-countup :start-value="0" :end-value="(assetData ? assetData.totalStat.total : '') | numberFormat" :decimals="(assetData ? assetData.totalStat.total : 0) < 1000 ? 0 : 1"></vue-countup>
|
||||
<span class="overview-row-unit">{{(assetData ? assetData.totalStat.total : '') | unitFormat}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-col-box">
|
||||
<div class="content-col-title">{{$t("dashboard.overview.project.project")}}</div>
|
||||
<div class="content-col-content" v-loading="projectLoading">
|
||||
<div class="content-col-content-num">
|
||||
<vue-countup :start-value="0" :end-value="(projectData ? projectData.projectStat.length : '') | numberFormat" :decimals="(projectData ? projectData.projectStat.length : 0) < 1000 ? 0 : 1"></vue-countup>
|
||||
<span class="overview-row-unit">{{(projectData ? projectData.projectStat.length : '') | unitFormat}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-col-box">
|
||||
<div class="content-col-title">{{$t("dashboard.overview.module.module")}}</div>
|
||||
<div class="content-col-content" v-loading="moduleLoading">
|
||||
<div class="content-col-content-num">
|
||||
<vue-countup :start-value="0" :end-value="(moduleData ? moduleData.moduleStat.length : '') | numberFormat" :decimals="(moduleData ? moduleData.moduleStat.length : 0) < 1000 ? 0 : 1"></vue-countup>
|
||||
<span class="overview-row-unit">{{(moduleData ? moduleData.moduleStat.length : '') | unitFormat}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-col-box">
|
||||
<div class="content-col-title">{{$t("dashboard.overview.endpoint.endpoint")}}</div>
|
||||
<div class="content-col-content" v-loading="endpointLoading">
|
||||
<div class="content-col-content-num">
|
||||
<vue-countup :start-value="0" :end-value="(endpointData ? endpointData.total : '') | numberFormat" :decimals="(endpointData ? endpointData.total : 0) < 1000 ? 0 : 1"></vue-countup>
|
||||
<span class="overview-row-unit">{{(endpointData ? endpointData.total : '') | unitFormat}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-col-box">
|
||||
<div class="content-col-title">{{$t("dashboard.overview.alert.alertMessage")}}</div>
|
||||
<div class="content-col-content" v-loading="alertMessageLoading">
|
||||
<div class="content-col-content-num"><vue-countup :start-value="0" :end-value="(alertMessageData ? alertMessageData.alertMessageTotal : '') | numberFormat" :decimals="(alertMessageData ? alertMessageData.alertMessageTotal : 0) < 1000 ? 0 : 1"></vue-countup></div>
|
||||
<span class="overview-row-unit">{{(alertMessageData ? alertMessageData.alertMessageTotal : '') | unitFormat}}</span>
|
||||
<span>{{$t("dashboard.overview.alert.ruleNum")}} : {{(alertRuleData ? alertRuleData.alertRuleTotal : "") | numberFormat}}</span>
|
||||
</div>
|
||||
<div class="content-col-box">
|
||||
<div class="content-col-title">{{$t("dashboard.overview.project.project")}}</div>
|
||||
<div class="content-col-content" v-loading="projectLoading">
|
||||
<div class="content-col-content-num">
|
||||
<vue-countup :start-value="0" :end-value="(projectData ? projectData.projectStat.length : '') | numberFormat" :decimals="(projectData ? projectData.projectStat.length : 0) < 1000 ? 0 : 1"></vue-countup>
|
||||
<span class="overview-row-unit">{{(projectData ? projectData.projectStat.length : '') | unitFormat}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<!--第二行-->
|
||||
<div class="content-row-box">
|
||||
<div class="content-col-box">
|
||||
<div class="content-col-title">
|
||||
<span>{{$t("dashboard.overview.traffic")}}</span>
|
||||
<span class="content-col-title-tools">
|
||||
<time-picker ref="calendarPanel" class="nz-dashboard-picker" @change="dateChange"></time-picker>
|
||||
<span class="content-col-title-tool">
|
||||
<el-cascader
|
||||
:options="trafficData"
|
||||
:props="{multiple: true}"
|
||||
clearable
|
||||
collapse-tags
|
||||
placeholder=""
|
||||
popper-class="trend-cascader"
|
||||
v-model="trendSearchParam.select"
|
||||
></el-cascader>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="content-col-content">
|
||||
<chart-box chart-type="overviewLine" ref="chartbox" :show-toolbox="false" name="trend" :unit="15" @is-loading="(isLoading)=>{this.trendLoading = isLoading}"></chart-box>
|
||||
<div class="chart-no-data" v-if="!trendLoading && ((!chartSeries[0] && !chartSeries[1]) || (chartSeries[0].data.length == 0 && chartSeries[1] && chartSeries[1].data.length == 0))">No Data</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-col-box">
|
||||
<div class="content-col-title">{{$t("dashboard.overview.dataCenter.dataCenter")}}</div>
|
||||
<div class="content-col-content">
|
||||
<chart-box chart-type="map" :tooltip-formatter="mapTooltipFormatter" :map="map" ref="dataCenterMap" @is-loading="(isLoading)=>{this.mapLoading = isLoading}"></chart-box>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-col-box">
|
||||
<div class="content-col-title">{{$t("dashboard.overview.module.module")}}</div>
|
||||
<div class="content-col-content" v-loading="moduleLoading">
|
||||
<div class="content-col-content-num">
|
||||
<vue-countup :start-value="0" :end-value="(moduleData ? moduleData.moduleStat.length : '') | numberFormat" :decimals="(moduleData ? moduleData.moduleStat.length : 0) < 1000 ? 0 : 1"></vue-countup>
|
||||
<span class="overview-row-unit">{{(moduleData ? moduleData.moduleStat.length : '') | unitFormat}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<!--第三行-->
|
||||
<div class="content-row-box">
|
||||
<!--第一个图-->
|
||||
<div class="content-col-box">
|
||||
<div class="content-col-title">
|
||||
<span>{{$t("dashboard.overview.asset.assetType")}}</span>
|
||||
</div>
|
||||
<div class="content-col-content">
|
||||
<chart-box chart-type="pie" ref="assetTypePie" :show-toolbox="false" name="assetTypePie" :tooltip-formatter="assetTypeFormatter" @is-loading="(isLoading)=>{this.assetTypeLoading = isLoading}"></chart-box>
|
||||
</div>
|
||||
<div class="content-col-box">
|
||||
<div class="content-col-title">{{$t("dashboard.overview.endpoint.endpoint")}}</div>
|
||||
<div class="content-col-content" v-loading="endpointLoading">
|
||||
<div class="content-col-content-num">
|
||||
<vue-countup :start-value="0" :end-value="(endpointData ? endpointData.total : '') | numberFormat" :decimals="(endpointData ? endpointData.total : 0) < 1000 ? 0 : 1"></vue-countup>
|
||||
<span class="overview-row-unit">{{(endpointData ? endpointData.total : '') | unitFormat}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-col-box">
|
||||
<div class="content-col-title">{{$t("dashboard.overview.alert.alertMessage")}}</div>
|
||||
<div class="content-col-content" v-loading="alertMessageLoading">
|
||||
<div class="content-col-content-num"><vue-countup :start-value="0" :end-value="(alertMessageData ? alertMessageData.alertMessageTotal : '') | numberFormat" :decimals="(alertMessageData ? alertMessageData.alertMessageTotal : 0) < 1000 ? 0 : 1"></vue-countup></div>
|
||||
<span class="overview-row-unit">{{(alertMessageData ? alertMessageData.alertMessageTotal : '') | unitFormat}}</span>
|
||||
<span>{{$t("dashboard.overview.alert.ruleNum")}} : {{(alertRuleData ? alertRuleData.alertRuleTotal : "") | numberFormat}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--第二行-->
|
||||
<div class="content-row-box">
|
||||
<div class="content-col-box">
|
||||
<div class="content-col-title">
|
||||
<span>{{$t("dashboard.overview.traffic")}}</span>
|
||||
<span class="content-col-title-tools">
|
||||
<time-picker ref="calendarPanel" class="nz-dashboard-picker" @change="dateChange"></time-picker>
|
||||
<span class="content-col-title-tool">
|
||||
<el-cascader
|
||||
:options="trafficData"
|
||||
:props="{multiple: true}"
|
||||
clearable
|
||||
collapse-tags
|
||||
placeholder=""
|
||||
popper-class="trend-cascader"
|
||||
v-model="trendSearchParam.select"
|
||||
></el-cascader>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="content-col-content">
|
||||
<chart-box chart-type="overviewLine" ref="chartbox" :show-toolbox="false" name="trend" :unit="15" @is-loading="(isLoading)=>{this.trendLoading = isLoading}"></chart-box>
|
||||
<div class="chart-no-data" v-if="!trendLoading && ((!chartSeries[0] && !chartSeries[1]) || (chartSeries[0].data.length == 0 && chartSeries[1] && chartSeries[1].data.length == 0))">No Data</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-col-box">
|
||||
<div class="content-col-title">{{$t("dashboard.overview.dataCenter.dataCenter")}}</div>
|
||||
<div class="content-col-content">
|
||||
<chart-box chart-type="map" :tooltip-formatter="mapTooltipFormatter" :map="map" ref="dataCenterMap" @is-loading="(isLoading)=>{this.mapLoading = isLoading}"></chart-box>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--第三行-->
|
||||
<div class="content-row-box">
|
||||
<!--第一个图-->
|
||||
<div class="content-col-box">
|
||||
<div class="content-col-title">
|
||||
<span>{{$t("dashboard.overview.asset.assetType")}}</span>
|
||||
</div>
|
||||
<div class="content-col-content">
|
||||
<chart-box chart-type="pie" ref="assetTypePie" :show-toolbox="false" name="assetTypePie" :tooltip-formatter="assetTypeFormatter" @is-loading="(isLoading)=>{this.assetTypeLoading = isLoading}"></chart-box>
|
||||
<!-- <div class="no-data-tip" v-if="!assetTypeLoading && assetData.typeStat && assetData.typeStat.length == 0">N/A</div>-->
|
||||
<!-- <div class="chart-no-data"v-if="!assetTypeLoading && assetData.typeStat && assetData.typeStat.length == 0">No Data</div>-->
|
||||
</div>
|
||||
</div>
|
||||
<!--第二个图-->
|
||||
<div class="content-col-box">
|
||||
<div class="content-col-title">
|
||||
<span>{{$t("dashboard.overview.alert.alertRuleTopN")}}</span>
|
||||
<!--<el-dropdown trigger="hover" :show-timeout="0" size="small">
|
||||
<span>Top {{topFilter.rule}}<i class="el-icon-arrow-down el-icon--right"></i></span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item v-for="(item,index) in topFilter.optionals" :key="index" @click.native="topNChange('rule', item)">{{item}}</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>-->
|
||||
</div>
|
||||
<div class="content-col-content">
|
||||
<chart-box axis-tooltip="y" chart-type="bar" ref="ruleMessage" :tooltip-formatter="simpleFormatter" :show-toolbox="false" name="ruleMessage" @is-loading="(isLoading)=>{this.ruleMessageLoading = isLoading}"></chart-box>
|
||||
</div>
|
||||
</div>
|
||||
<!--第二个图-->
|
||||
<div class="content-col-box">
|
||||
<div class="content-col-title">
|
||||
<span>{{$t("dashboard.overview.alert.alertRuleTopN")}}</span>
|
||||
<!--<el-dropdown trigger="hover" :show-timeout="0" size="small">
|
||||
<span>Top {{topFilter.rule}}<i class="el-icon-arrow-down el-icon--right"></i></span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item v-for="(item,index) in topFilter.optionals" :key="index" @click.native="topNChange('rule', item)">{{item}}</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>-->
|
||||
</div>
|
||||
<div class="content-col-content">
|
||||
<chart-box axis-tooltip="y" chart-type="bar" ref="ruleMessage" :tooltip-formatter="simpleFormatter" :show-toolbox="false" name="ruleMessage" @is-loading="(isLoading)=>{this.ruleMessageLoading = isLoading}"></chart-box>
|
||||
<!-- <div class="no-data-tip" v-if="!ruleMessageLoading && ((!messageByRuleSeries.data && !messageByRuleSeries.category) || (messageByRuleSeries.data.length == 0 && messageByRuleSeries.category.length == 0))">N/A</div>-->
|
||||
<!-- <div class="chart-no-data" v-if="!ruleMessageLoading && ((!messageByRuleSeries.data && !messageByRuleSeries.category) || (messageByRuleSeries.data.length == 0 && messageByRuleSeries.category.length == 0))">No Data</div>-->
|
||||
</div>
|
||||
</div>
|
||||
<!--第三个图-->
|
||||
<div class="content-col-box">
|
||||
<div class="content-col-title">
|
||||
<span>
|
||||
<span v-if="alertMessageShow == 'asset'">{{$t("dashboard.overview.alert.assetTopN")}}</span>
|
||||
<span v-if="alertMessageShow == 'module'">{{$t("dashboard.overview.alert.moduleTopN")}}</span>
|
||||
<span class="dropdown-btn" @mouseenter="alertMessageDropdownHandler(true)" @mouseleave="alertMessageDropdownHandler(false)">
|
||||
<i class="el-icon-arrow-down"></i>
|
||||
<transition name="el-zoom-in-top">
|
||||
<ul class="el-dropdown-menu el-popper el-dropdown-menu--mini" v-if="bottom3DropdownShow">
|
||||
<li @click="alertMessageChange('asset')" class="el-dropdown-menu__item dropdown-content" style="padding: 0 15px;">{{$t("dashboard.overview.asset.title")}}</li>
|
||||
<li @click="alertMessageChange('module')" class="el-dropdown-menu__item dropdown-content" style="padding: 0 15px;">{{$t("dashboard.overview.module.module")}}</li>
|
||||
</ul>
|
||||
</transition>
|
||||
</span>
|
||||
</span>
|
||||
<!--<el-dropdown trigger="hover" v-if="alertMessageShow == 'asset'" :show-timeout="0" size="small">
|
||||
<span>Top {{topFilter.asset}}<i class="el-icon-arrow-down el-icon--right"></i></span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item v-for="(item,index) in topFilter.optionals" :key="index" @click.native="topNChange('asset', item)">{{item}}</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
<el-dropdown trigger="hover" v-if="alertMessageShow == 'module'" :show-timeout="0" size="small">
|
||||
<span>Top {{topFilter.module}}<i class="el-icon-arrow-down el-icon--right"></i></span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item v-for="(item,index) in topFilter.optionals" :key="index" @click.native="topNChange('module', item)">{{item}}</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>-->
|
||||
</div>
|
||||
<div class="content-col-content">
|
||||
<chart-box axis-tooltip="y" v-show="alertMessageShow == 'asset'" :tooltip-formatter="simpleFormatter" chart-type="bar" ref="assetMessage" name="assetMessage" :show-toolbox="false" @is-loading="(isLoading)=>{this.assetMessageLoading = isLoading}"></chart-box>
|
||||
<chart-box axis-tooltip="y" v-show="alertMessageShow == 'module'" :tooltip-formatter="simpleFormatter" chart-type="bar" ref="moduleMessage" name="moduleMessage" :show-toolbox="false" @is-loading="(isLoading)=>{this.moduleMessageLoading = isLoading}"></chart-box>
|
||||
</div>
|
||||
</div>
|
||||
<!--第三个图-->
|
||||
<div class="content-col-box">
|
||||
<div class="content-col-title">
|
||||
<span>
|
||||
<span v-if="alertMessageShow == 'asset'">{{$t("dashboard.overview.alert.assetTopN")}}</span>
|
||||
<span v-if="alertMessageShow == 'module'">{{$t("dashboard.overview.alert.moduleTopN")}}</span>
|
||||
<span class="dropdown-btn" @mouseenter="alertMessageDropdownHandler(true)" @mouseleave="alertMessageDropdownHandler(false)">
|
||||
<i class="el-icon-arrow-down"></i>
|
||||
<transition name="el-zoom-in-top">
|
||||
<ul class="el-dropdown-menu el-popper el-dropdown-menu--mini" v-if="bottom3DropdownShow">
|
||||
<li @click="alertMessageChange('asset')" class="el-dropdown-menu__item dropdown-content" style="padding: 0 15px;">{{$t("dashboard.overview.asset.title")}}</li>
|
||||
<li @click="alertMessageChange('module')" class="el-dropdown-menu__item dropdown-content" style="padding: 0 15px;">{{$t("dashboard.overview.module.module")}}</li>
|
||||
</ul>
|
||||
</transition>
|
||||
</span>
|
||||
</span>
|
||||
<!--<el-dropdown trigger="hover" v-if="alertMessageShow == 'asset'" :show-timeout="0" size="small">
|
||||
<span>Top {{topFilter.asset}}<i class="el-icon-arrow-down el-icon--right"></i></span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item v-for="(item,index) in topFilter.optionals" :key="index" @click.native="topNChange('asset', item)">{{item}}</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
<el-dropdown trigger="hover" v-if="alertMessageShow == 'module'" :show-timeout="0" size="small">
|
||||
<span>Top {{topFilter.module}}<i class="el-icon-arrow-down el-icon--right"></i></span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item v-for="(item,index) in topFilter.optionals" :key="index" @click.native="topNChange('module', item)">{{item}}</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>-->
|
||||
</div>
|
||||
<div class="content-col-content">
|
||||
<chart-box axis-tooltip="y" v-show="alertMessageShow == 'asset'" :tooltip-formatter="simpleFormatter" chart-type="bar" ref="assetMessage" name="assetMessage" :show-toolbox="false" @is-loading="(isLoading)=>{this.assetMessageLoading = isLoading}"></chart-box>
|
||||
<chart-box axis-tooltip="y" v-show="alertMessageShow == 'module'" :tooltip-formatter="simpleFormatter" chart-type="bar" ref="moduleMessage" name="moduleMessage" :show-toolbox="false" @is-loading="(isLoading)=>{this.moduleMessageLoading = isLoading}"></chart-box>
|
||||
<!-- <div class="no-data-tip" v-show="alertMessageShow == 'asset'" v-if="!assetMessageLoading && ((!messageByAssetSeries.data && !messageByAssetSeries.category) || (messageByAssetSeries.data.length == 0 && messageByAssetSeries.category.length == 0))">N/A</div>-->
|
||||
<!-- <div class="no-data-tip" v-show="alertMessageShow == 'module'" v-if="!moduleMessageLoading && ((!messageByModuleSeries.data && !messageByModuleSeries.category) || (messageByModuleSeries.data.length == 0 && messageByModuleSeries.category.length == 0))">N/A</div>-->
|
||||
<!-- <div class="chart-no-data" v-show="alertMessageShow == 'asset'" v-if="!assetMessageLoading && ((!messageByAssetSeries.data && !messageByAssetSeries.category) || (messageByAssetSeries.data.length == 0 && messageByAssetSeries.category.length == 0))">No Data</div>-->
|
||||
<!-- <div class="chart-no-data" v-show="alertMessageShow == 'module'" v-if="!moduleMessageLoading && ((!messageByModuleSeries.data && !messageByModuleSeries.category) || (messageByModuleSeries.data.length == 0 && messageByModuleSeries.category.length == 0))">No Data</div>-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</left-menu>
|
||||
</div>
|
||||
<div class="axis-tooltip el-popover"></div>
|
||||
<!--用于assetType饼图label-->
|
||||
<img src='../../../../assets/img/up.png' id="upPic" style="display: none;">
|
||||
|
||||
@@ -1,83 +1,71 @@
|
||||
<template>
|
||||
<div class="panel">
|
||||
<left-menu >
|
||||
<div slot="content-left" class="slot-content">
|
||||
<div class="sidebar-title">{{$t('dashboard.title')}}</div>
|
||||
<div class="sidebar-info">
|
||||
<div class="sidebar-info-item " @click="jumpTo('overview')">{{$t('dashboard.overview.title')}}</div>
|
||||
<div class="sidebar-info-item sidebar-info-top sidebar-info-item-active">{{$t('dashboard.panel.title')}}</div>
|
||||
<div class="sidebar-info-item" @click="jumpTo('explore')">{{$t('dashboard.metricPreview.title')}}</div>
|
||||
<div class="top-tools">
|
||||
<div class="top-tool-main-left" v-if="panelData.length == 0" style="margin-left: 10px;">
|
||||
<button @click="toAdd" class="nz-btn nz-btn-style-light nz-btn-size-small"><i class="nz-icon nz-icon-create-square"></i> {{$t("dashboard.panel.createPanelTitleSec")}}</button>
|
||||
</div>
|
||||
</div>
|
||||
<div slot="content-right" class="slot-content">
|
||||
<div class="top-tools">
|
||||
<div class="top-tool-main-left" v-if="panelData.length == 0" style="margin-left: 10px;">
|
||||
<button @click="toAdd" class="nz-btn nz-btn-style-light nz-btn-size-small"><i class="nz-icon nz-icon-create-square"></i> {{$t("dashboard.panel.createPanelTitleSec")}}</button>
|
||||
<template v-else>
|
||||
<div class="top-tool-main-left">
|
||||
<el-dropdown @command="panelChange" class="panel-dropdown-title" trigger="click" placement="bottom-start" v-scrollBar:el-dropdown>
|
||||
<el-row @click.native="scrollbarHeightHandler" :gutter="10" class="el-dropdown-link" style="">
|
||||
<el-col :span="21" class="panel-list-title" :title="showPanel.name">{{showPanel.name}}</el-col>
|
||||
<el-col :span="3" style="padding-left:0px !important;"><i class="el-icon-arrow-down el-icon--right"></i></el-col>
|
||||
</el-row>
|
||||
<el-dropdown-menu class="nz-dashboard-dropdown" slot="dropdown">
|
||||
<el-dropdown-item>{{$t('dashboard.panel.createPanelTitleSec')}}</el-dropdown-item>
|
||||
<draggable v-model="panelData" @start="start" @end="end" :move="move" :key
|
||||
:scroll-sensitivity="150"
|
||||
:options="{
|
||||
group:{name:'chartGroup',pull:'false'},
|
||||
dragClass:'drag-chart-class',
|
||||
fallbackClass:'fallback-class',
|
||||
forceFallback:true,
|
||||
ghostClass:'chart-ghost',
|
||||
chosenClass:'choose-class',
|
||||
scroll:true,
|
||||
scrollFn:function(offsetX,offsetY,originalEvent,touchEvt,hoverTargetEI){},
|
||||
animation:150,
|
||||
handle:'.panelContent',
|
||||
}" >
|
||||
<el-dropdown-item v-for="item in panelData" :key="item.id+1" class="panel-title-li"
|
||||
:class="showPanel.id==item.id?'nz-dashboard-dropdown-bg':''" :command="item">
|
||||
<!--{{item.name}}-->
|
||||
<el-row :gutter="10" class="panel-list-width" >
|
||||
<el-col :span="2" class="panelContent move-area"><i class="nz-icon nz-icon-sort4"></i></el-col>
|
||||
<el-col :span="17" class="panel-list-item" :title="item.name">{{item.name}}</el-col>
|
||||
<el-col :span="1"><span class="panel-dropdown-btn panel-dropdown-btn-delete" @click.stop="del(item)"><i class="el-icon-delete"></i></span></el-col>
|
||||
<el-col :span="1"> </el-col>
|
||||
<el-col :span="1"><span class="panel-dropdown-btn" @click.stop="edit(item)"><i class="nz-icon nz-icon-edit"></i></span></el-col>
|
||||
</el-row>
|
||||
</el-dropdown-item>
|
||||
</draggable>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
<template v-else>
|
||||
<div class="top-tool-main-left">
|
||||
<el-dropdown @command="panelChange" class="panel-dropdown-title" trigger="click" placement="bottom-start" v-scrollBar:el-dropdown>
|
||||
<el-row @click.native="scrollbarHeightHandler" :gutter="10" class="el-dropdown-link" style="">
|
||||
<el-col :span="21" class="panel-list-title" :title="showPanel.name">{{showPanel.name}}</el-col>
|
||||
<el-col :span="3" style="padding-left:0px !important;"><i class="el-icon-arrow-down el-icon--right"></i></el-col>
|
||||
</el-row>
|
||||
<el-dropdown-menu class="nz-dashboard-dropdown" slot="dropdown">
|
||||
<el-dropdown-item>{{$t('dashboard.panel.createPanelTitleSec')}}</el-dropdown-item>
|
||||
<draggable v-model="panelData" @start="start" @end="end" :move="move" :key
|
||||
:scroll-sensitivity="150"
|
||||
:options="{
|
||||
group:{name:'chartGroup',pull:'false'},
|
||||
dragClass:'drag-chart-class',
|
||||
fallbackClass:'fallback-class',
|
||||
forceFallback:true,
|
||||
ghostClass:'chart-ghost',
|
||||
chosenClass:'choose-class',
|
||||
scroll:true,
|
||||
scrollFn:function(offsetX,offsetY,originalEvent,touchEvt,hoverTargetEI){},
|
||||
animation:150,
|
||||
handle:'.panelContent',
|
||||
}" >
|
||||
<el-dropdown-item v-for="item in panelData" :key="item.id+1" class="panel-title-li"
|
||||
:class="showPanel.id==item.id?'nz-dashboard-dropdown-bg':''" :command="item">
|
||||
<!--{{item.name}}-->
|
||||
<el-row :gutter="10" class="panel-list-width" >
|
||||
<el-col :span="2" class="panelContent move-area"><i class="nz-icon nz-icon-sort4"></i></el-col>
|
||||
<el-col :span="17" class="panel-list-item" :title="item.name">{{item.name}}</el-col>
|
||||
<el-col :span="1"><span class="panel-dropdown-btn panel-dropdown-btn-delete" @click.stop="del(item)"><i class="el-icon-delete"></i></span></el-col>
|
||||
<el-col :span="1"> </el-col>
|
||||
<el-col :span="1"><span class="panel-dropdown-btn" @click.stop="edit(item)"><i class="nz-icon nz-icon-edit"></i></span></el-col>
|
||||
</el-row>
|
||||
</el-dropdown-item>
|
||||
</draggable>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
<div class="top-tool-main-right">
|
||||
<div class="top-tool-search relative-position margin-r-20">
|
||||
<el-input ref="queryPanel" @clear="clearInput" id="queryPanel" @focus="focusInput" @blur="blurInput" v-model="filter.searchName" class="query-input-inactive" size="mini" clearable >
|
||||
<i slot="suffix" class="el-input__icon el-icon-search" @click="focusInput" style="float: right"></i>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="top-tool-main-right">
|
||||
<div class="top-tool-search relative-position margin-r-20">
|
||||
<el-input ref="queryPanel" @clear="clearInput" id="queryPanel" @focus="focusInput" @blur="blurInput" v-model="filter.searchName" class="query-input-inactive" size="mini" clearable >
|
||||
<i slot="suffix" class="el-input__icon el-icon-search" @click="focusInput" style="float: right"></i>
|
||||
</el-input>
|
||||
</div>
|
||||
|
||||
<pick-time :refresh-data-func="dateChange" v-model="searchTime" :use-chart-unit="false"></pick-time>
|
||||
<button @click="addChart" :title="$t('overall.createChart')"
|
||||
class="nz-btn nz-btn-size-normal nz-btn-style-light ">
|
||||
<i class="nz-icon-create-square nz-icon"></i>
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div class="table-list" id="tableList">
|
||||
<el-scrollbar class="el-scrollbar-large" style="height: 100%" ref="dashboardScrollbar">
|
||||
<div class="box-content">
|
||||
<chart-list @on-edit-chart="editChart" @on-refresh-time="refreshTime" @on-remove-chart="delChart"
|
||||
ref="chartList"></chart-list>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
<button class="to-top" :class="{'to-top-is-hover': tableHover}" v-show="showTopBtn" @click="$toTop('el', $refs.dashboardScrollbar.wrap)" style="bottom: 0;"><i class="nz-icon nz-icon-top"></i></button>
|
||||
<pick-time :refresh-data-func="dateChange" v-model="searchTime" :use-chart-unit="false"></pick-time>
|
||||
<button @click="addChart" :title="$t('overall.createChart')"
|
||||
class="nz-btn nz-btn-size-normal nz-btn-style-light ">
|
||||
<i class="nz-icon-create-square nz-icon"></i>
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</left-menu>
|
||||
<div class="table-list" id="tableList">
|
||||
<el-scrollbar class="el-scrollbar-large" style="height: 100%" ref="dashboardScrollbar">
|
||||
<div class="box-content">
|
||||
<chart-list @on-edit-chart="editChart" @on-refresh-time="refreshTime" @on-remove-chart="delChart"
|
||||
ref="chartList"></chart-list>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
<button class="to-top" :class="{'to-top-is-hover': tableHover}" v-show="showTopBtn" @click="$toTop('el', $refs.dashboardScrollbar.wrap)" style="bottom: 0;"><i class="nz-icon nz-icon-top"></i></button>
|
||||
|
||||
<transition name="right-box">
|
||||
<chart-box @close="closeChartBox" :chart="chart" v-if="rightBox.chart.show" ref="addChartModal" :show-panel="showPanel" :panel-data="panelData" @reload="panelReload" @on-create-success="createSuccess" @on-delete-success="delChartOk" @reloadOnlyPanel="panelReloadOnlyPanel"></chart-box>
|
||||
|
||||
@@ -20,49 +20,7 @@
|
||||
</style>
|
||||
<template>
|
||||
<div class="project">
|
||||
|
||||
<left-menu >
|
||||
<div slot="content-left" class="slot-content">
|
||||
<el-scrollbar ref="leftScrollbar" style="height: 100%">
|
||||
<div class="sidebar-title too-long-split">{{$t('project.project.project')}}</div>
|
||||
<div class="sidebar-info">
|
||||
<el-collapse v-model="currentProjectTitle" class="left-menu-bg" accordion style="padding-top: 0px;" ref="projectLeft">
|
||||
<el-collapse-item v-for="(item,index) in projectList" :key="item.name+item.id+index" :name="item.name+'-'+item.id">
|
||||
<template slot="title">
|
||||
<div class="sidebar-info-item" :class="{'sidebar-info-item-active': item.id == currentProject.id}" @click="detailProject($event,item)" :id="'project-module-'+item.id">
|
||||
<div class="sidebar-info-item-txt">
|
||||
<el-popover v-if="item.name.length > 14" trigger="hover" placement="top-start" :content="item.name" popper-class="transparent-pop">
|
||||
<span slot="reference" class="">
|
||||
{{item.name}}
|
||||
</span>
|
||||
</el-popover>
|
||||
<span v-else>{{item.name}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div class="sidebar-info sub-sidebar-info" >
|
||||
<div v-if="getProjectModule(item.id).length == 0" class="sidebar-info-item sidebar-info-item-add" @click="addModule">
|
||||
<i class="nz-icon nz-icon-create-square"></i>
|
||||
</div>
|
||||
<template v-else>
|
||||
<div v-for="module in getProjectModule(item.id)" class="sidebar-info-sub-item" :class="{'sidebar-info-item-active': module.id == currentModule.id}" @click="changeModule(item, module)" :id="'project-module-'+module.id">
|
||||
<div :id="`module-${module.id}`" class="item-tip">
|
||||
<div class="item-tip-hide item-tip-key el-popover" :class="itemTip(module.id, module.name, ready)">{{module.name}}</div>
|
||||
<span class="too-long-split" style="width: 120px;">{{module.name}}</span>
|
||||
<div v-show="module.buildIn != 1" class="hid-div side-bar-menu-edit sub-side-bar-menu-edit" @click.stop="editModule(module)" :id="'project-module-edit-'+module.id" ><i class="nz-icon nz-icon-edit"></i></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
|
||||
<!--endpoint-->
|
||||
<div slot="content-right" class="slot-content" v-show="pageType == 'endpoint'">
|
||||
<!-- 主列表 -->
|
||||
<template v-show="pageType == 'endpoint'">
|
||||
<div class="main-list" :class="{'main-list-with-sub': bottomBox.showSubList}">
|
||||
<div class="main-modal"></div>
|
||||
<div class="top-tools" v-show="bottomBox.mainResizeShow">
|
||||
@@ -112,11 +70,11 @@
|
||||
<template slot-scope="scope" :column="item" >
|
||||
<span v-if="item.prop == 'asset' && scope.row[item.prop]" class="link" @click="detailEndpoint(scope.row)">{{scope.row[item.prop].host}}</span>
|
||||
<span v-else-if="item.prop == 'param'">
|
||||
<template v-if="scope.row.paramObj">
|
||||
<span v-for="(p,i) in scope.row.paramObj">{{p.key}}={{p.value}}<span v-if="i < scope.row.paramObj.length-1">，</span></span>
|
||||
</template>
|
||||
<template v-else>-</template>
|
||||
</span>
|
||||
<template v-if="scope.row.paramObj">
|
||||
<span v-for="(p,i) in scope.row.paramObj">{{p.key}}={{p.value}}<span v-if="i < scope.row.paramObj.length-1">，</span></span>
|
||||
</template>
|
||||
<template v-else>-</template>
|
||||
</span>
|
||||
<template v-else-if="item.prop == 'type'">{{currentModule.type}}</template>
|
||||
<div v-else-if="item.prop == 'option'" class="content-right-options">
|
||||
<span :title="$t('overall.view')" @click="detailEndpoint(scope.row)" class="content-right-option" :id="'edp-detail-'+scope.row.id"><i class="nz-icon nz-icon-view"></i></span>
|
||||
@@ -126,25 +84,25 @@
|
||||
<span :title="$t('overall.edit')" @click="editEndpoint(scope.row)" class="content-right-option" :id="'edp-edit-'+scope.row.id"><i class="nz-icon nz-icon-edit"></i></span>
|
||||
</div>
|
||||
<span v-else-if="item.prop == 'state'" >
|
||||
<el-popover placement="right" width="50" trigger="hover" :popper-class="scope.row.state == '1'?'small-pop':''">
|
||||
<div slot="reference" style="width: 20px">
|
||||
<div :class="{'active-icon green':scope.row.state == '1','active-icon red':scope.row.state == '0'}"></div>
|
||||
</div>
|
||||
<div >
|
||||
<div v-if="scope.row.state == '1'">up</div>
|
||||
<div v-else>down:<br/>{{getStateErrorMsg(scope.row)}}</div>
|
||||
</div>
|
||||
</el-popover>
|
||||
</span>
|
||||
<el-popover placement="right" width="50" trigger="hover" :popper-class="scope.row.state == '1'?'small-pop':''">
|
||||
<div slot="reference" style="width: 20px">
|
||||
<div :class="{'active-icon green':scope.row.state == '1','active-icon red':scope.row.state == '0'}"></div>
|
||||
</div>
|
||||
<div >
|
||||
<div v-if="scope.row.state == '1'">up</div>
|
||||
<div v-else>down:<br/>{{getStateErrorMsg(scope.row)}}</div>
|
||||
</div>
|
||||
</el-popover>
|
||||
</span>
|
||||
<span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
|
||||
<template v-else>-</template>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column width="28" :resizable="false">
|
||||
<template slot="header" slot-scope="scope">
|
||||
<span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear">
|
||||
<i class="nz-icon nz-icon-gear"></i>
|
||||
</span>
|
||||
<span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear">
|
||||
<i class="nz-icon nz-icon-gear"></i>
|
||||
</span>
|
||||
</template>
|
||||
<template v-slot="scope">
|
||||
<button v-if="scope.$index == 0" class="to-top" :style="{top: tools.toTopBtnTop}" :class="{'to-top-is-hover': tools.tableHover}" v-show="tools.showTopBtn && bottomBox.mainResizeShow" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
|
||||
@@ -155,16 +113,16 @@
|
||||
<Pagination :tableId="tableId" v-cloak :pageObj="endpointPageObj" @pageNo='endpointPageNo' @pageSize='endpointPageSize' ref="endpointPagination"></Pagination>
|
||||
</div>
|
||||
</div>
|
||||
<transition name="el-zoom-in-bottom">
|
||||
<bottom-box v-if="bottomBox.showSubList" :sub-resize-show="bottomBox.subResizeShow" :is-full-screen="bottomBox.isFullScreen"
|
||||
:from="'endpoint'" :target-tab.sync="bottomBox.targetTab" :detail="bottomBox.endpointDetail" :obj="endpoint" :asset-detail="bottomBox.assetDetail"
|
||||
@closeSubList="bottomBox.showSubList = false" @fullScreen="fullScreen" @exitFullScreen="exitFullScreen" @listResize="listResize" ></bottom-box>
|
||||
</transition>
|
||||
</div>
|
||||
<div slot="content-right" class="slot-content" v-show="pageType == 'project'">
|
||||
</template>
|
||||
<template v-show="pageType == 'project'">
|
||||
<panel-tab from="project" :obj="currentProject" targetTab.sync="panel"></panel-tab>
|
||||
</div>
|
||||
</left-menu>
|
||||
</template>
|
||||
<transition name="el-zoom-in-bottom">
|
||||
<bottom-box v-if="bottomBox.showSubList" :sub-resize-show="bottomBox.subResizeShow" :is-full-screen="bottomBox.isFullScreen"
|
||||
:from="'endpoint'" :target-tab.sync="bottomBox.targetTab" :detail="bottomBox.endpointDetail" :obj="endpoint" :asset-detail="bottomBox.assetDetail"
|
||||
@closeSubList="bottomBox.showSubList = false" @fullScreen="fullScreen" @exitFullScreen="exitFullScreen" @listResize="listResize" ></bottom-box>
|
||||
</transition>
|
||||
|
||||
<element-set
|
||||
v-if="tools.showElementSet"
|
||||
v-clickoutside="elementsetHide"
|
||||
@@ -189,6 +147,7 @@
|
||||
import exportXLSX from "../../common/exportXLSX";
|
||||
import loading from "../../common/loading";
|
||||
import panelTab from '../../common/bottomBox/tabs/panelTab'
|
||||
import bus from '../../../libs/bus'
|
||||
|
||||
export default {
|
||||
name: "project2",
|
||||
@@ -720,6 +679,9 @@
|
||||
setTimeout(() => {
|
||||
this.ready = true;
|
||||
}, 300);
|
||||
bus.$on("project-pageType", pageType => {
|
||||
this.pageType = pageType;
|
||||
});
|
||||
this.$nextTick(() => {
|
||||
//绑定滚动条事件，控制top按钮
|
||||
let el = this.$refs.endpointTable.$el.querySelector(".el-table__body-wrapper");
|
||||
@@ -764,9 +726,9 @@
|
||||
endpointListChange() {
|
||||
return this.$store.state.endpointListChange;
|
||||
},
|
||||
currentProjectChange() {
|
||||
/*currentProjectChange() {
|
||||
return this.$store.state.currentProject;
|
||||
},
|
||||
},*/
|
||||
itemTip() {
|
||||
return function(id, content, ready) {
|
||||
let className = "item-tip-show";
|
||||
@@ -795,7 +757,7 @@
|
||||
endpointListChange(n) {
|
||||
this.getEndpointTableData();
|
||||
},
|
||||
currentProjectChange: {
|
||||
/*currentProjectChange: {
|
||||
immediate:true,
|
||||
handler(n, o) {
|
||||
if (n.id != this.currentProject.id) {
|
||||
@@ -805,7 +767,7 @@
|
||||
this.detailProject(null, this.currentProject);
|
||||
}
|
||||
},
|
||||
},
|
||||
},*/
|
||||
currentProject(n, o) {
|
||||
this.$store.commit("currentProjectChange", Object.assign({}, n));
|
||||
},
|
||||
|
||||
@@ -45,11 +45,11 @@ export default new Router({
|
||||
component: resolve => require(['../components/page/dashboard/explore/explore.vue'], resolve),
|
||||
},
|
||||
{
|
||||
path: 'overview',
|
||||
path: '/overview',
|
||||
component: resolve => require(['../components/page/dashboard/overview/overview2.vue'],resolve)
|
||||
},
|
||||
{
|
||||
path: 'test',
|
||||
path: '/test',
|
||||
component: resolve => require(['../components/charts/d3-line-chart2'],resolve)
|
||||
},
|
||||
{
|
||||
|
||||
@@ -44,7 +44,6 @@ const store = new Vuex.Store({
|
||||
consoleCount:0,//当前console窗口数
|
||||
isAddConsole:false,//是否增加窗口
|
||||
consoleParam:{},//新开console窗口参数
|
||||
leftMenuStat:false, //0展开状态，1隐藏状态
|
||||
linkData:[],//导航数据
|
||||
},
|
||||
getters: {
|
||||
@@ -134,10 +133,7 @@ const store = new Vuex.Store({
|
||||
minConsole(state){//最小化窗口
|
||||
state.consoleShow=false;
|
||||
},
|
||||
setLeftMenuStat:function(state,data){
|
||||
state.leftMenuStat = data;
|
||||
},
|
||||
setLinkData:function(state,data){
|
||||
setLinkData(state, data) {
|
||||
state.linkData = data;
|
||||
},
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user