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

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

2
nezha-fronted/src/components/charts/chartPreview.vue
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);

2
nezha-fronted/src/components/cli/console.vue
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;//可视宽度

3
nezha-fronted/src/components/cli/webSSH.scss
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;
} }

299
nezha-fronted/src/components/cli/webSSH.vue
View File

@@ -7,170 +7,171 @@
<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 style='position: relative;' class="sub-list"> <div class="sub-list-resize" v-show="isFullScreen"></div>
<!--el-drawer 打开后会对第一个未隐藏的元素聚焦 所以添加一隐藏的input 防止聚焦--> <div style='position: relative;' class="sub-list">
<input style='width: 0;height: 0;opacity: 0;display: inherit;' /> <!--el-drawer 打开后会对第一个未隐藏的元素聚焦 所以添加一隐藏的input 防止聚焦-->
<el-menu mode="horizontal" @select="handleSelect" style='position: absolute;left:0px;top:0px;border-top: 1px solid #DCDFE6;'> <input style='width: 0;height: 0;opacity: 0;display: inherit;' />
<el-submenu index="1" style="width:40px;" popper-class="fontSizeBox"> <el-menu mode="horizontal" @select="handleSelect" style='position: absolute;left:0px;top:0px;border-top: 1px solid #DCDFE6;'>
<template slot="title" ><i class="nz-icon nz-icon-728bianjiqi_zitidaxiao" style="position: absolute;left: 10px;top: 4px;"></i></template> <el-submenu index="1" style="width:40px;" popper-class="fontSizeBox">
<!--<el-submenu index="1-1">--> <template slot="title" ><i class="nz-icon nz-icon-728bianjiqi_zitidaxiao" style="position: absolute;left: 10px;top: 4px;"></i></template>
<!--<el-submenu index="1-1">-->
<!--<template slot="title">文字大小</template>--> <!--<template slot="title">文字大小</template>-->
<el-menu-item @click="changeFontSize(12)" :class="{fontSet:true,menuActive:fontSize==12, smallFont:true}" index="1-1">A</el-menu-item> <el-menu-item @click="changeFontSize(12)" :class="{fontSet:true,menuActive:fontSize==12, smallFont:true}" index="1-1">A</el-menu-item>
<el-menu-item @click="changeFontSize(15)" :class="{fontSet:true,menuActive:fontSize==15, middleFont:true}" index="1-2">A</el-menu-item> <el-menu-item @click="changeFontSize(15)" :class="{fontSet:true,menuActive:fontSize==15, middleFont:true}" index="1-2">A</el-menu-item>
<el-menu-item @click="changeFontSize(20)" :class="{fontSet:true,menuActive:fontSize==20, bigFont:true}" index="1-3">A</el-menu-item> <el-menu-item @click="changeFontSize(20)" :class="{fontSet:true,menuActive:fontSize==20, bigFont:true}" index="1-3">A</el-menu-item>
<!--<el-menu-item class="fontSet" index="1-4">大</el-menu-item>--> <!--<el-menu-item class="fontSet" index="1-4">大</el-menu-item>-->
<!--</el-submenu>--> <!--</el-submenu>-->
<!--<el-submenu index="1-2" >--> <!--<el-submenu index="1-2" >-->
<!--<template slot="title">字体</template>--> <!--<template slot="title">字体</template>-->
<!--<el-menu-item index="1-2-1">Monosapace</el-menu-item>--> <!--<el-menu-item index="1-2-1">Monosapace</el-menu-item>-->
<!--<el-menu-item index="1-2-2">Courier New</el-menu-item>--> <!--<el-menu-item index="1-2-2">Courier New</el-menu-item>-->
<!--</el-submenu>--> <!--</el-submenu>-->
</el-submenu> </el-submenu>
<el-submenu index="2" style="width:50px;"> <el-submenu index="2" style="width:50px;">
<template slot="title" ><i class="nz-icon nz-icon-upload console-title-icon" style="position: absolute;left: 10px;top: 4px;"></i></template> <template slot="title" ><i class="nz-icon nz-icon-upload console-title-icon" style="position: absolute;left: 10px;top: 4px;"></i></template>
<el-menu-item index="2-1" @click="showUploadBox"> <el-menu-item index="2-1" @click="showUploadBox">
<div>{{$t('webshell.upload')}}</div> <div>{{$t('webshell.upload')}}</div>
</el-menu-item> </el-menu-item>
<el-menu-item index="2-2" @click="showDownloadBox"> <el-menu-item index="2-2" @click="showDownloadBox">
<div>{{$t('webshell.download')}}</div> <div>{{$t('webshell.download')}}</div>
</el-menu-item> </el-menu-item>
</el-submenu> </el-submenu>
</el-menu> </el-menu>
<el-tabs v-model="editableTabsValue" <el-tabs v-model="editableTabsValue"
@tab-click="handleClick" @tab-click="handleClick"
@tab-remove="removeTab" @tab-remove="removeTab"
:before-leave="beforeLeave" :before-leave="beforeLeave"
style='width:100%; margin-left:0px;border-left:solid 1px black;border-bottom: 1px solid black;' style='width:100%; margin-left:0px;border-left:solid 1px black;border-bottom: 1px solid black;'
type="border-card" > type="border-card" >
<el-tab-pane v-for="(item, index) in editableTabs" <el-tab-pane v-for="(item, index) in editableTabs"
:key="item.name" :key="item.name"
:label="item.title" :label="item.title"
:name="item.name" :name="item.name"
closable closable
> >
<!-- tab显示的内容 1 grey,2 green, 3 red--> <!-- tab显示的内容 1 grey,2 green, 3 red-->
<span slot="label" style=""> <span slot="label" style="">
<div :class="{'active-icon grey':item.circleColor == 1,'active-icon green':item.circleColor == 2,'active-icon red':item.circleColor == 3}" <div :class="{'active-icon grey':item.circleColor == 1,'active-icon green':item.circleColor == 2,'active-icon red':item.circleColor == 3}"
style="margin-top: 0px;"></div>{{item.title}} style="margin-top: 0px;"></div>{{item.title}}
</span> </span>
<my-console :terminal="item.terminal" @refreshConsoleTitle="refreshTabTitle" :ref="'console'+index" @closeConsole="removeTab" :idIndex="index" :isFullScreen="isFullScreen" :fontSize="fontSize"></my-console> <my-console :terminal="item.terminal" @refreshConsoleTitle="refreshTabTitle" :ref="'console'+index" @closeConsole="removeTab" :idIndex="index" :isFullScreen="isFullScreen" :fontSize="fontSize"></my-console>
</el-tab-pane> </el-tab-pane>
<el-tab-pane key="add" name="add"> <el-tab-pane key="add" name="add">
<span slot="label" style="padding:8px;font-size:20px;font-weight:bold;">+</span> <span slot="label" style="padding:8px;font-size:20px;font-weight:bold;">+</span>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
<i style='right:70px;' @click="minScreen" class="nz-icon nz-icon-minus console-title-icon"></i> <i style='right:70px;' @click="minScreen" class="nz-icon nz-icon-minus console-title-icon"></i>
<i style='right:38px;' v-if="!isFullScreen" @click="fullScreen" class="el-icon-full-screen console-title-icon"></i> <i style='right:38px;' v-if="!isFullScreen" @click="fullScreen" class="el-icon-full-screen console-title-icon"></i>
<i style='right:38px;' v-else @click="exitFullScreen" class="nz-icon nz-icon-exit-full-screen console-title-icon"></i> <i style='right:38px;' v-else @click="exitFullScreen" class="nz-icon nz-icon-exit-full-screen console-title-icon"></i>
<i style='right:8px;' @click="closeConsole" class="nz-icon nz-icon-close console-title-icon"></i> <i style='right:8px;' @click="closeConsole" class="nz-icon nz-icon-close console-title-icon"></i>
<!-- <!--
<i style='right:103px;' @click="minScreen" class="nz-icon nz-icon-minus console-title-icon"></i> <i style='right:103px;' @click="minScreen" class="nz-icon nz-icon-minus console-title-icon"></i>
<i style='right:70px;;' @click="fullScreen" class="el-icon-full-screen console-title-icon"></i> <i style='right:70px;;' @click="fullScreen" class="el-icon-full-screen console-title-icon"></i>
<i style='right:38px;' class="el-icon-copy-document console-title-icon" ></i> <i style='right:38px;' class="el-icon-copy-document console-title-icon" ></i>
<i style='right:8px;' @click="closeConsole" class="nz-icon nz-icon-close console-title-icon"></i> <i style='right:8px;' @click="closeConsole" class="nz-icon nz-icon-close console-title-icon"></i>
--> -->
<!--nz-icon-setting nz-icon nz-icon-minus el-icon-full-screen el-icon-copy-document--> <!--nz-icon-setting nz-icon nz-icon-minus el-icon-full-screen el-icon-copy-document-->
</div> </div>
<div > <div >
<el-dialog :visible.sync="uploadBox.showUpload" :title="uploadBox.title" :modal-append-to-body='false' :show-close="true" width="500px" @close="closeDialog" class="nz-dialog" > <el-dialog :visible.sync="uploadBox.showUpload" :title="uploadBox.title" :modal-append-to-body='false' :show-close="true" width="500px" @close="closeDialog" class="nz-dialog" >
<div > <div >
<div class="upload-body"> <div class="upload-body">
<el-row > <el-row >
<el-col :span="24"> <el-col :span="24">
<el-upload drag class="upload-demo" <el-upload drag class="upload-demo"
ref="uploadFile" action="" ref="uploadFile" action=""
:file-list="uploadFileList" :file-list="uploadFileList"
:on-change="handleChange" :on-change="handleChange"
:auto-upload="false" > :auto-upload="false" >
<i class="nz-icon nz-icon-upload"></i> <i class="nz-icon nz-icon-upload"></i>
<div class="el-upload__text">{{$t('overall.dragFileTip')}}，{{$t('overall.or')}}&nbsp;<em>{{$t('overall.clickUpload')}}</em></div> <div class="el-upload__text">{{$t('overall.dragFileTip')}}，{{$t('overall.or')}}&nbsp;<em>{{$t('overall.clickUpload')}}</em></div>
<!--<button type="button" class="nz-btn nz-btn-size-normal nz-btn-style-normal"> <!--<button type="button" class="nz-btn nz-btn-size-normal nz-btn-style-normal">
<span class="top-tool-btn-txt" >{{$t('webshell.fileSelect')}}</span> <span class="top-tool-btn-txt" >{{$t('webshell.fileSelect')}}</span>
</button>--> </button>-->
</el-upload> </el-upload>
</el-col> </el-col>
</el-row> </el-row>
<el-row style="margin-top: 20px;"> <el-row style="margin-top: 20px;">
<el-col :span="3" style="text-align:center;line-height: 24px;"> <el-col :span="3" style="text-align:center;line-height: 24px;">
<label>{{$t('webshell.filePath')}}</label> <label>{{$t('webshell.filePath')}}</label>
</el-col> </el-col>
<el-col :span="21"> <el-col :span="21">
<el-input v-model="uploadFile.path" size="mini"></el-input> <el-input v-model="uploadFile.path" size="mini"></el-input>
</el-col> </el-col>
</el-row> </el-row>
</div>
<div slot="footer" class="footer">
<div class="el-message-box__btns" style="text-align: right;margin-top: 20px;">
<button @click="upload" class="el-button el-button--default el-button--small">
<span>{{$t('webshell.uploadButtonTitle')}}</span>
</button>
<button @click="closeDialog" class="el-button el-button--default el-button--small" >
<span>{{$t('overall.cancel')}}</span>
</button>
</div> </div>
</div> <div slot="footer" class="footer">
</div> <div class="el-message-box__btns" style="text-align: right;margin-top: 20px;">
</el-dialog> <button @click="upload" class="el-button el-button--default el-button--small">
<el-dialog :visible.sync="downloadBox.showDownload" :title="downloadBox.title" :modal-append-to-body='false' :show-close="true" width="500px" @close="closeDownloadDialog" class="nz-dialog" > <span>{{$t('webshell.uploadButtonTitle')}}</span>
<div> </button>
<div class="upload-body"> <button @click="closeDialog" class="el-button el-button--default el-button--small" >
<el-row style="margin-top: 20px;"> <span>{{$t('overall.cancel')}}</span>
<el-col :span="3" style="text-align:center;line-height: 24px;"> </button>
<label>{{$t('webshell.filePath')}}</label>
</el-col>
<el-col :span="21">
<el-input v-model="downloadFile.path" size="mini"></el-input>
</el-col>
</el-row>
</div>
<div slot="footer" class="footer">
<div class="el-message-box__btns" style="text-align: right;margin-top: 20px;">
<button @click="download" class="el-button el-button--default el-button--small">
<span>{{$t('webshell.downloadButtonTitle')}}</span>
</button>
<button @click="closeDownloadDialog" class="el-button el-button--default el-button--small">
<span>{{$t('overall.cancel')}}</span>
</button>
</div>
</div>
</div>
</el-dialog>
<el-dialog :visible.sync="closeConfirmShow" :modal-append-to-body='false' :show-close="true" width="500px" @close="cancleConfirm" class="nz-dialog" >
<div >
<div class="el-message-box__content">
<div class="el-message-box__container">
<div class="el-message-box__status el-icon-warning">
</div>
<div class="el-message-box__message">
<p>{{$t('webshell.closeTip')}}</p>
</div> </div>
</div> </div>
</div> </div>
<div slot="footer" class="footer"> </el-dialog>
<div class="el-message-box__btns" style="text-align: unset; padding-left: 50px;"> <el-dialog :visible.sync="downloadBox.showDownload" :title="downloadBox.title" :modal-append-to-body='false' :show-close="true" width="500px" @close="closeDownloadDialog" class="nz-dialog" >
<el-checkbox v-model="closeRemember">{{$t('webshell.remember')}}</el-checkbox> <div>
<button @click="closeShellWindow" type="button" class="el-button el-button--default el-button--small el-button--primary float-right"> <div class="upload-body">
<span>{{$t('tip.yes')}}</span> <el-row style="margin-top: 20px;">
</button> <el-col :span="3" style="text-align:center;line-height: 24px;">
<button @click="cancleConfirm" type="button" class="el-button el-button--default el-button--small float-right"> <label>{{$t('webshell.filePath')}}</label>
<span>{{$t('tip.no')}}</span> </el-col>
</button> <el-col :span="21">
<el-input v-model="downloadFile.path" size="mini"></el-input>
</el-col>
</el-row>
</div>
<div slot="footer" class="footer">
<div class="el-message-box__btns" style="text-align: right;margin-top: 20px;">
<button @click="download" class="el-button el-button--default el-button--small">
<span>{{$t('webshell.downloadButtonTitle')}}</span>
</button>
<button @click="closeDownloadDialog" class="el-button el-button--default el-button--small">
<span>{{$t('overall.cancel')}}</span>
</button>
</div>
</div> </div>
</div> </div>
</div> </el-dialog>
</el-dialog> <el-dialog :visible.sync="closeConfirmShow" :modal-append-to-body='false' :show-close="true" width="500px" @close="cancleConfirm" class="nz-dialog" >
<div >
<div class="el-message-box__content">
<div class="el-message-box__container">
<div class="el-message-box__status el-icon-warning">
</div>
<div class="el-message-box__message">
<p>{{$t('webshell.closeTip')}}</p>
</div>
</div>
</div>
<div slot="footer" class="footer">
<div class="el-message-box__btns" style="text-align: unset; padding-left: 50px;">
<el-checkbox v-model="closeRemember">{{$t('webshell.remember')}}</el-checkbox>
<button @click="closeShellWindow" type="button" class="el-button el-button--default el-button--small el-button--primary float-right">
<span>{{$t('tip.yes')}}</span>
</button>
<button @click="cancleConfirm" type="button" class="el-button el-button--default el-button--small float-right">
<span>{{$t('tip.no')}}</span>
</button>
</div>
</div>
</div>
</el-dialog>
</div>
</div> </div>
</div>
</template> </template>
<script> <script>
@@ -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>

2
nezha-fronted/src/components/page/dashboard/chartBox.vue
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})