334 lines
15 KiB
Vue
334 lines
15 KiB
Vue
<template>
|
||
<div class="sub-box">
|
||
<div class="resize-modal">
|
||
<div class="sub-list-resize-copy">一</div>
|
||
</div>
|
||
<!-- 副列表 -->
|
||
<div @mousedown="listResize" class="sub-list-resize" v-if="!isFullScreen">一</div>
|
||
<div class="sub-list">
|
||
<!--窗口大小控制-->
|
||
<div class="sub-list-window-control">
|
||
<!--退出全屏-->
|
||
<div class="window-control-btn" v-if="isFullScreen" @click="exitFullScreen" :id="from+'-bottom-exit-full'"><i class="nz-icon nz-icon-exit-full-screen" ></i></div>
|
||
<!--全屏-->
|
||
<div v-if="!isFullScreen" :id="from+'-bottom-full'" class="window-control-btn" @click="fullScreen"><i class="nz-icon nz-icon-full-screen"></i></div>
|
||
<!--关闭-->
|
||
<div class="window-control-btn" @click="closeSubList" :id="from+'-bottom-close'"><i class="nz-icon nz-icon-close"></i></div>
|
||
</div>
|
||
|
||
<!------TAB区------>
|
||
<div class="sub-list__tabs">
|
||
<!--机柜-->
|
||
<cabinet-tab v-if="from === fromRoute.dc && targetTab === 'cabinet'" :tabs="tabs.dc.cabinet" v-show="subResizeShow" :obj="obj" @changeTab="changeTab"></cabinet-tab>
|
||
<alertMessageTabNew v-if="from === fromRoute.dc && targetTab === 'alertMessageTab'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.dc.alertMessage" :targetTab="targetTab" @changeTab="changeTab"></alertMessageTabNew>
|
||
<!--告警信息-->
|
||
<alert-message-tab v-if="((from === fromRoute.alertRule || from === fromRoute.asset || from === fromRoute.endpoint || from === fromRoute.project ) && targetTab === 'alertMessage')" v-show="subResizeShow" :from="from" :obj="obj" @changeTab="changeTab"></alert-message-tab>
|
||
<!--asset页的endpoint列表-->
|
||
<endpoint-tab v-if="from === fromRoute.asset && targetTab === fromRoute.endpoint" v-show="subResizeShow" :from="from" :obj="obj" @changeTab="changeTab"></endpoint-tab>
|
||
<!--endpoint-query-->
|
||
<!-- <endpoint-query-tab v-if="(from === fromRoute.endpoint && targetTab === 'endpointQuery')" v-show="subResizeShow" ref="endpointQuery" :from="from" :obj="obj" @changeTab="changeTab"></endpoint-query-tab>-->
|
||
|
||
<!-- model-panel/asset-detail/project-overview的panel-->
|
||
<!-- <panel-tab v-if="(from === fromRoute.model || from === fromRoute.asset || from === fromRoute.project || from === fromRoute.rule || from === fromRoute.endpoint) && targetTab === 'panel'" v-show="subResizeShow" ref="panelTab" :detail="detail" :from="from"-->
|
||
<!-- :obj="obj" :targetTab.sync="targetTab" @changeTab="changeTab"></panel-tab>-->
|
||
|
||
<!--terminal-log的记录和回放-->
|
||
<terminal-log-cmd-tab v-if="from === fromRoute.terminalLog && targetTab === 'cmdTab'" :from="from" :obj="obj" :tabs="tabs.terminalLog.cmd" @changeTab="changeTab"></terminal-log-cmd-tab>
|
||
<terminal-log-record-tab v-if="from === fromRoute.terminalLog && targetTab === 'recordTab'" :from="from" :obj="obj" :tabs="tabs.terminalLog.record" @changeTab="changeTab"></terminal-log-record-tab>
|
||
<terminal-log-monitor-tab v-if="from === fromRoute.terminalLog && targetTab === 'monitorTab'" :from="from" :obj="obj" :tabs="tabs.terminalLog.monitor" @changeTab="changeTab" @exit="closeSubList"></terminal-log-monitor-tab>
|
||
|
||
<asset-tab v-if="from === fromRoute.dc && targetTab === 'asset'" :tabs="tabs.dc.asset" ref="assetTab" :from="from" :obj="obj" @changeTab="changeTab" @exit="closeSubList"></asset-tab>
|
||
|
||
<!--user列表的两个日志-->
|
||
<operation-log-tab v-if="from === fromRoute.user && targetTab === 'operationLogTab'" :from="from" :obj="obj" :tabs="tabs.user.operationLog" @changeTab="changeTab"></operation-log-tab>
|
||
<terminal-log-tab v-if="from === fromRoute.user && targetTab === 'terminalLogTab'" :from="from" :obj="obj" :tabs="tabs.user.terminalLog" @changeTab="changeTab"></terminal-log-tab>
|
||
<!-- asset列表的3个 -->
|
||
<panel-tab-new v-if="from === fromRoute.asset && targetTab === 'panelTab'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.asset.panel" :targetTab.sync="targetTab" @changeTab="changeTab"></panel-tab-new>
|
||
<alertMessageTabNew v-if="from === fromRoute.asset && targetTab === 'alertMessageTab'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.asset.alertMessage" :targetTab="targetTab" @changeTab="changeTab"></alertMessageTabNew>
|
||
<endpointTabNew v-if="from === fromRoute.asset && targetTab === 'endpointTab'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.asset.endpoint" :targetTab="targetTab" @changeTab="changeTab"></endpointTabNew>
|
||
<!--module列表的tab-->
|
||
<endpointTabNew v-if="from === fromRoute.module && targetTab === 'endpoint'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.module.moduleTabTitle" :targetTab="targetTab" @changeTab="changeTab"></endpointTabNew>
|
||
<alertMessageTabNew v-if="from === fromRoute.module && targetTab === 'moduleAlertMessage'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.module.moduleTabTitle" @changeTab="changeTab" :targetTab="targetTab"></alertMessageTabNew>
|
||
<panel-tab-new v-if="from === fromRoute.module && targetTab === 'panel'" v-show="subResizeShow" :detail="detail" :from="from" :obj="obj" :tabs="tabs.module.moduleTabTitle" :targetTab.sync="targetTab" @changeTab="changeTab"></panel-tab-new>
|
||
<!--endpoint列表的tab-->
|
||
<endpointQuery v-if="from === fromRoute.endpoint && targetTab === 'endpointQuery'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.endpoint.endpointTabTitle" @changeTab="changeTab" :targetTab="targetTab"></endpointQuery>
|
||
<alertMessageTabNew v-if="from === fromRoute.endpoint && targetTab === 'endpointAlertMessage'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.endpoint.endpointTabTitle" @changeTab="changeTab" :targetTab="targetTab"></alertMessageTabNew>
|
||
<panel-tab-new v-if="from === fromRoute.endpoint && targetTab === 'panel'" v-show="subResizeShow" :detail="detail" :from="from" :tabs="tabs.endpoint.endpointTabTitle" :obj="obj" :targetTab.sync="targetTab" @changeTab="changeTab"></panel-tab-new>
|
||
<!--chartTemp的Tab-->
|
||
<panel-tab-new v-if="from === fromRoute.chartTemp && targetTab === 'panel'" v-show="subResizeShow" :detail="detail" :from="from" :tabs="tabs.chartTemp.chartTempTabTitle" :obj="obj" :targetTab.sync="targetTab" @changeTab="changeTab"></panel-tab-new>
|
||
<!--alertRule Tab-->
|
||
<alertMessageTabNew v-if="from === fromRoute.alertRule && targetTab === 'alertRuleAlertMessage'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.alertRule.alertRule" @changeTab="changeTab" :targetTab="targetTab"></alertMessageTabNew>
|
||
<!--model 下滑-->
|
||
<asset-tab v-if="(from === fromRoute.model) && targetTab === 'asset'" :tabs="tabs.model" ref="assetTab" :from="from" :obj="obj" @changeTab="changeTab" @exit="closeSubList"></asset-tab>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import cabinetTab from './tabs/cabinetTab'
|
||
import alertMessageTab from './tabs/alertMessageTab'
|
||
import alertMessageTabNew from './tabs/alertMessageTabNew'
|
||
import endpointQuery from './tabs/endpointQuery'
|
||
import endpointTab from './tabs/endpointTab'
|
||
import endpointTabNew from './tabs/endpointTabNew'
|
||
import panelTabNew from './tabs/panelTabNew'
|
||
import terminalLogRecordTab from './tabs/terminalLogRecordTab'
|
||
import terminalLogMonitorTab from './tabs/terminalLogMonitorTab'
|
||
import terminalLogCMDTab from './tabs/terminalLogCMDTab'
|
||
import operationLogTab from './tabs/operationLogTab'
|
||
import terminalLogTab from './tabs/terminalLogTab'
|
||
import assetTab from '@/components/common/bottomBox/tabs/assetTab'
|
||
import { fromRoute } from '@/components/common/js/constants'
|
||
|
||
export default {
|
||
name: 'bottomBox',
|
||
components: {
|
||
cabinetTab,
|
||
alertMessageTab,
|
||
endpointTab,
|
||
terminalLogRecordTab,
|
||
terminalLogMonitorTab,
|
||
operationLogTab,
|
||
terminalLogTab,
|
||
'terminal-log-cmd-tab': terminalLogCMDTab,
|
||
endpointTabNew,
|
||
alertMessageTabNew,
|
||
endpointQuery,
|
||
panelTabNew,
|
||
assetTab
|
||
},
|
||
props: {
|
||
isFullScreen: Boolean, // 是否全屏
|
||
subResizeShow: Boolean, // resize时，用v-show="subResizeShow"控制页面内容是否显示
|
||
obj: Object, // 关联的实体对象
|
||
from: String, // 来自哪个页面
|
||
tabList: Array, // 动态页签列表
|
||
targetTab: String, // 展示哪个页签
|
||
detail: Object, // 对象详情内容
|
||
detailList: Array, // 多个对象详情内容
|
||
|
||
assetDetail: Object // endpoint页的asset详情
|
||
},
|
||
data () {
|
||
return {
|
||
fromRoute: fromRoute,
|
||
tabs: {
|
||
terminalLog: {
|
||
monitor: [
|
||
{ prop: 'monitorTab', name: this.$t('config.terminallog.monitor.monitor'), active: true }
|
||
],
|
||
cmd: [
|
||
{ prop: 'cmdTab', name: this.$t('config.terminallog.cmd.cmd'), active: true },
|
||
{ prop: 'recordTab', name: this.$t('config.terminallog.record.record'), active: false }
|
||
],
|
||
record: [
|
||
{ prop: 'cmdTab', name: this.$t('config.terminallog.cmd.cmd'), active: false },
|
||
{ prop: 'recordTab', name: this.$t('config.terminallog.record.record'), active: true }
|
||
]
|
||
},
|
||
user: {
|
||
operationLog: [
|
||
{ prop: 'operationLogTab', name: this.$t('config.operationlog.operationlog'), active: true },
|
||
{ prop: 'terminalLogTab', name: this.$t('config.terminallog.terminallog'), active: false }
|
||
],
|
||
terminalLog: [
|
||
{ prop: 'operationLogTab', name: this.$t('config.operationlog.operationlog'), active: false },
|
||
{ prop: 'terminalLogTab', name: this.$t('config.terminallog.terminallog'), active: true }
|
||
]
|
||
// module tab
|
||
},
|
||
asset: {
|
||
panel: [
|
||
{ prop: 'panelTab', name: this.$t('overall.detail'), active: true },
|
||
{ prop: 'alertMessageTab', name: this.$t('overall.alert'), active: false },
|
||
{ prop: 'endpointTab', name: 'Endpoints', active: false }
|
||
],
|
||
alertMessage: [
|
||
{ prop: 'panelTab', name: this.$t('overall.detail'), active: false },
|
||
{ prop: 'alertMessageTab', name: this.$t('overall.alert'), active: true },
|
||
{ prop: 'endpointTab', name: 'Endpoints', active: false }
|
||
],
|
||
endpoint: [
|
||
{ prop: 'panelTab', name: this.$t('overall.detail'), active: false },
|
||
{ prop: 'alertMessageTab', name: this.$t('overall.alert'), active: false },
|
||
{ prop: 'endpointTab', name: 'Endpoints', active: true }
|
||
]
|
||
},
|
||
module: {
|
||
moduleTabTitle: [
|
||
// { prop: 'panel', name: 'Detail' },
|
||
{ prop: 'endpoint', name: this.$t('asset.endpoint') },
|
||
{ prop: 'moduleAlertMessage', name: this.$t('overall.alert') }
|
||
]
|
||
},
|
||
endpoint: {
|
||
endpointTabTitle: [
|
||
// { prop: 'panel', name: 'Detail' },
|
||
{ prop: 'endpointQuery', name: 'Query' },
|
||
{ prop: 'endpointAlertMessage', name: this.$t('overall.alert') }
|
||
]
|
||
},
|
||
chartTemp: {
|
||
chartTempTabTitle: [
|
||
{ prop: 'panel', name: this.$t('overall.tempPrev') }
|
||
]
|
||
},
|
||
alertRule: {
|
||
alertRule: [
|
||
{ prop: 'alertRuleAlertMessage', name: this.$t('overall.alert') }
|
||
]
|
||
},
|
||
model: [
|
||
{ prop: 'asset', name: this.$t('asset.assets'), active: true }
|
||
],
|
||
dc: {
|
||
cabinet: [
|
||
{ prop: 'cabinet', name: this.$t('config.dc.cabinets'), active: true },
|
||
{ prop: 'asset', name: this.$t('asset.assets'), active: false },
|
||
{ prop: 'alertMessageTab', name: this.$t('overall.alert'), active: false }
|
||
],
|
||
asset: [
|
||
{ prop: 'cabinet', name: this.$t('config.dc.cabinets'), active: false },
|
||
{ prop: 'asset', name: this.$t('asset.assets'), active: true },
|
||
{ prop: 'alertMessageTab', name: this.$t('overall.alert'), active: false }
|
||
],
|
||
alertMessage: [
|
||
{ prop: 'cabinet', name: this.$t('config.dc.cabinets'), active: false },
|
||
{ prop: 'asset', name: this.$t('asset.assets'), active: false },
|
||
{ prop: 'alertMessageTab', name: this.$t('overall.alert'), active: true }
|
||
]
|
||
}
|
||
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
exitFullScreen () {
|
||
this.$emit('exitFullScreen')
|
||
this.$nextTick(() => { this.afterResize() })
|
||
},
|
||
fullScreen () {
|
||
this.$emit('fullScreen')
|
||
this.$nextTick(() => { this.afterResize() })
|
||
},
|
||
closeSubList () {
|
||
this.$emit('closeSubList')
|
||
},
|
||
listResize (e) {
|
||
this.$emit('listResize', e)
|
||
this.$nextTick(() => { this.afterResize() })
|
||
},
|
||
changeTab (tab) {
|
||
this.$emit('update:targetTab', tab)
|
||
},
|
||
afterResize () {
|
||
if (this.from === this.fromRoute.endpoint && this.targetTab === 'endpointQuery') {
|
||
this.$refs.endpointQuery.tableReload()
|
||
} else if (this.from === this.fromRoute.terminalLog && this.targetTab === 'record') {
|
||
setTimeout(() => {
|
||
this.$refs.reminalLogRecordTab.consoleResize()
|
||
}, 600)
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style lang="scss">
|
||
/* begin--二级顶部工具栏*/
|
||
.sub-top-tools {
|
||
display: flex;
|
||
height: 32px;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
border-top: 1px solid #DCDFE6;
|
||
border-bottom: 1px solid #E4E7ED;
|
||
margin: 0 -6px;
|
||
padding-right: 80px;
|
||
background-color: $content-right-background-color;
|
||
margin-bottom: 10px;
|
||
}
|
||
.sub-top-tools>div {
|
||
margin-top: 2px;
|
||
}
|
||
.sub-top-tools .top-tool-search {
|
||
width: 260px;
|
||
margin: -1px 0 0 0;
|
||
.select_input input {
|
||
background-color: white;
|
||
}
|
||
}
|
||
.sub-container {
|
||
padding: 10px;
|
||
height: 100%;
|
||
background-color: #f6f6f6;
|
||
overflow-y: auto;
|
||
&>div {
|
||
background-color: white;
|
||
}
|
||
}
|
||
.sub-top-tools .top-tool-btn-txt .nz-icon{
|
||
display: inline-block;
|
||
font-size: 12px;
|
||
margin-right: 6px;
|
||
}
|
||
.sub-top-tool-right {
|
||
display: flex;
|
||
align-content: center;
|
||
}
|
||
.has-sub-popper {
|
||
color: $danger-color;
|
||
}
|
||
.sub-box {
|
||
height: 50%;
|
||
position: relative;
|
||
}
|
||
.sub-list {
|
||
height: calc(100% - 9px);
|
||
position: absolute;
|
||
width: 100%;
|
||
z-index: 1;
|
||
top: 9px;
|
||
|
||
.sub-list__tabs {
|
||
height: 100%;
|
||
background-color: white;
|
||
|
||
&>div {
|
||
height: 100%;
|
||
background-color: #f6f6f6;
|
||
|
||
.nz-table2 {
|
||
height: calc(100% - 92px);
|
||
padding: 20px 20px 0;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.main-and-sub-transition {
|
||
transition: .4s height;
|
||
}
|
||
|
||
.bottom-panel {
|
||
padding-top: 15px;
|
||
background-color: white;
|
||
padding-bottom: 50px;
|
||
}
|
||
|
||
.resize-modal {
|
||
width: calc(100% - 240px);
|
||
opacity: 0.6;
|
||
background-color: #f5f9ff;
|
||
border: 1px solid #a7d0f7;
|
||
box-sizing: border-box;
|
||
position: fixed;
|
||
cursor: ns-resize;
|
||
display: none;
|
||
z-index: 20;
|
||
vertical-align: bottom;
|
||
bottom: 0;
|
||
}
|
||
|
||
/* end--二级顶部工具栏*/
|
||
</style>
|