fix:修改terminal 显示隐藏通过高度控制 添加动画

This commit is contained in:
zhangyu
2020-12-07 11:14:11 +08:00
parent 59ae4e3efe
commit f07b6e889e
5 changed files with 159 additions and 149 deletions

View File

@@ -368,7 +368,6 @@
// 获取一个图表具体数据 // 获取一个图表具体数据
getChartData() { getChartData() {
const chartItem = this.chart; const chartItem = this.chart;
console.log(chartItem);
if(chartItem.type === 'alertList'){ if(chartItem.type === 'alertList'){
this.getAlertListChartData(chartItem,null); this.getAlertListChartData(chartItem,null);
return; return;
@@ -572,7 +571,6 @@
if(this.mapping&&!this.mapping.color){ if(this.mapping&&!this.mapping.color){
this.mapping.color={bac:'#fff',text:'#000'} this.mapping.color={bac:'#fff',text:'#000'}
} }
console.log(mapping)
this.serieSingleStat = mapping?mapping.text.replace('{{value}}', singleStatTmp):chartDataFormat.getUnit(chartItem.unit?chartItem.unit:2).compute(singleStatTmp,null,2); this.serieSingleStat = mapping?mapping.text.replace('{{value}}', singleStatTmp):chartDataFormat.getUnit(chartItem.unit?chartItem.unit:2).compute(singleStatTmp,null,2);
}else{ }else{
this.serieSingleStat = chartDataFormat.getUnit(chartItem.unit?chartItem.unit:2).compute(singleStatTmp,null,2); this.serieSingleStat = chartDataFormat.getUnit(chartItem.unit?chartItem.unit:2).compute(singleStatTmp,null,2);

View File

@@ -98,7 +98,7 @@ export default {
if (resizeHeight) { if (resizeHeight) {
this.termimalHeight = resizeHeight; this.termimalHeight = resizeHeight;
} }
this.isFullScreen = isFullScreen; // this.isFullScreen = isFullScreen;
//this.term.toggleFullScreen(isFullScreen);//全屏后无法显示顶部菜单和tab //this.term.toggleFullScreen(isFullScreen);//全屏后无法显示顶部菜单和tab
let height = document.body.clientHeight-this.topMenuHeight;//可视高度 let height = document.body.clientHeight-this.topMenuHeight;//可视高度
let width = document.body.clientWidth;//可视宽度 let width = document.body.clientWidth;//可视宽度

View File

@@ -128,9 +128,8 @@
} }
} }
.shell-service-max { .shell-service-max {
height: 100% !important; height: 100%;
position: fixed !important; position: fixed !important;
top: 0;
bottom: 0; bottom: 0;
} }

View File

@@ -7,11 +7,12 @@
<div class="sub-list-resize-copy"></div> <div class="sub-list-resize-copy"></div>
</div> </div>
<div id="shell-split" class="shell-split shell-iconfont" @mousedown="dragEagle" v-show="!isFullScreen"></div>--> <div id="shell-split" class="shell-split shell-iconfont" @mousedown="dragEagle" v-show="!isFullScreen"></div>-->
<div ref="webSShBox" id="shell-service" class="sub-box" data-yunlog-scope="popup" :class="{'shell-service-max': isFullScreen,'shell-service':true}" v-show="consoleShow"> <div ref="webSShBox" id="shell-service" class="sub-box ani-webSHH-height" data-yunlog-scope="popup" :class="{'shell-service-max': isFullScreen,'shell-service':true}" style="height: 0;background: #000">
<div class="resize-modal"> <div class="resize-modal">
<div class="sub-list-resize-copy" style="width: 100%"></div> <div class="sub-list-resize-copy" style="width: 100%"></div>
</div> </div>
<div id="shell-split" class="sub-list-resize" @mousedown="dragEagle" v-show="!isFullScreen"></div> <div id="shell-split" class="sub-list-resize" @mousedown="dragEagle" v-show="!isFullScreen"></div>
<div class="sub-list-resize" v-show="isFullScreen"></div>
<div style='position: relative;' class="sub-list"> <div style='position: relative;' class="sub-list">
<!--el-drawer 打开后会对第一个未隐藏的元素聚焦 所以添加一隐藏的input 防止聚焦--> <!--el-drawer 打开后会对第一个未隐藏的元素聚焦 所以添加一隐藏的input 防止聚焦-->
<input style='width: 0;height: 0;opacity: 0;display: inherit;' /> <input style='width: 0;height: 0;opacity: 0;display: inherit;' />
@@ -212,6 +213,7 @@
downloadResult:null, downloadResult:null,
// 字体大小 // 字体大小
fontSize:termFontSize?termFontSize:15, fontSize:termFontSize?termFontSize:15,
webSSHHeight:'',//最小化之前的高度
} }
}, },
methods: { methods: {
@@ -311,7 +313,7 @@
this.isFullScreen = false; this.isFullScreen = false;
let targetDiv= document.getElementById('shell-service'); let targetDiv= document.getElementById('shell-service');
targetDiv.style.height=this.initConsoleHeight+'px'; targetDiv.style.height=0+'px';
this.consoleHeight = this.initConsoleHeight-50; this.consoleHeight = this.initConsoleHeight-50;
this.$store.commit('closeConsole'); this.$store.commit('closeConsole');
@@ -451,6 +453,9 @@
minScreen(){ minScreen(){
this.consoleShow = false; this.consoleShow = false;
this.$store.commit('minConsole'); this.$store.commit('minConsole');
let targetDiv= document.getElementById('shell-service');
this.webSSHHeight=targetDiv.style.height;
targetDiv.style.height=0+'px';
}, },
fullScreen(isChange){ fullScreen(isChange){
this.resizeConsoleHeight = document.querySelector("#shell-service").offsetHeight; //记录全屏前主列表的高度 this.resizeConsoleHeight = document.querySelector("#shell-service").offsetHeight; //记录全屏前主列表的高度
@@ -663,6 +668,8 @@
let host = this.$store.state.consoleParam.host; let host = this.$store.state.consoleParam.host;
let accountId = this.$store.state.consoleParam.accountId; let accountId = this.$store.state.consoleParam.accountId;
let port = this.$store.state.consoleParam.port; let port = this.$store.state.consoleParam.port;
let targetDiv= document.getElementById('shell-service');
targetDiv.style.height=this.initConsoleHeight+'px';
this.show(id,host,accountId,port); this.show(id,host,accountId,port);
}else { }else {
this.consoleShow = true; this.consoleShow = true;
@@ -676,6 +683,8 @@
}); });
} }
}); });
let targetDiv= document.getElementById('shell-service');
targetDiv.style.height=this.webSSHHeight;
} }
this.$store.state.consoleShow = false; this.$store.state.consoleShow = false;
} }
@@ -694,5 +703,11 @@
} }
</script> </script>
<style scoped> <style scoped>
.ani-webSHH-height{
transition: height .25s ease-in;
}
.sub-list{
background: #E4E7ED;
}
</style> </style>

View File

@@ -1447,7 +1447,6 @@
}); });
}); });
params.elements = elements; params.elements = elements;
console.log(params,'params');
if (valid) { if (valid) {
this.$refs.chartsPreview.show(params); this.$refs.chartsPreview.show(params);
} }
@@ -1636,7 +1635,6 @@
deep: true, deep: true,
immediate: true, immediate: true,
handler(n) { handler(n) {
console.log(n,(n.param&&n.param.valueMapping)&&(n.type === 'singleStat' || n.type === 'table'));
if((n.param&&n.param.valueMapping)&&(n.type === 'singleStat' || n.type === 'table')){ if((n.param&&n.param.valueMapping)&&(n.type === 'singleStat' || n.type === 'table')){
n.param.valueMapping.mapping.forEach(item=>{ n.param.valueMapping.mapping.forEach(item=>{
this.showPicker.push({bac:false,text:false}) this.showPicker.push({bac:false,text:false})