fix:修改右滑弹窗显示问题 以及termail创建不成功的问题

This commit is contained in:
zhangyu
2021-05-11 19:17:46 +08:00
parent ce123e31f9
commit e44a7bcc5d
8 changed files with 178 additions and 61 deletions

View File

@@ -678,7 +678,7 @@ export default {
} }
if (!param.query) delete param.query if (!param.query) delete param.query
// 根据panelId获得panel下的所有图表 // 根据panelId获得panel下的所有图表
this.$get('visual/panel/chart?panelId=' + params.panelId + '&groupId=0').then(response => { this.$get('visual/panel/chart?panelId=' + params.panelId + '&groupId=0' + '&pageSize=-1').then(response => {
if (response.code === 200) { if (response.code === 200) {
response.data.list.forEach((item, index) => { response.data.list.forEach((item, index) => {
item.isLoaded = false item.isLoaded = false

View File

@@ -16,32 +16,32 @@
<div class="sub-list" style='position: relative;'> <div class="sub-list" style='position: relative;'>
<!--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;' />
<el-menu @select="handleSelect" mode="horizontal" style='position: absolute;left:0px;top:0px;border-top: 1px solid #DCDFE6;' class="horizontal"> <!-- <el-menu @select="handleSelect" mode="horizontal" style='position: absolute;left:0px;top:0px;border-top: 1px solid #DCDFE6;' class="horizontal">
<el-submenu index="1" popper-class="horizontal" style="width:40px;"> <el-submenu index="1" popper-class="horizontal" style="width:40px;">
<template slot="title" ><i class="nz-icon nz-icon-728bianjiqi_zitidaxiao" style="position: absolute;left: 10px;top: 4px;"></i></template> <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">--> &lt;!&ndash;<el-submenu index="1-1">&ndash;&gt;
<!--<template slot="title">文字大小</template>--> &lt;!&ndash;<template slot="title">文字大小</template>&ndash;&gt;
<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>--> &lt;!&ndash;<el-menu-item class="fontSet" index="1-4"></el-menu-item>&ndash;&gt;
<!--</el-submenu>--> &lt;!&ndash;</el-submenu>&ndash;&gt;
<!--<el-submenu index="1-2" >--> &lt;!&ndash;<el-submenu index="1-2" >&ndash;&gt;
<!--<template slot="title">字体</template>--> &lt;!&ndash;<template slot="title">字体</template>&ndash;&gt;
<!--<el-menu-item index="1-2-1">Monosapace</el-menu-item>--> &lt;!&ndash;<el-menu-item index="1-2-1">Monosapace</el-menu-item>&ndash;&gt;
<!--<el-menu-item index="1-2-2">Courier New</el-menu-item>--> &lt;!&ndash;<el-menu-item index="1-2-2">Courier New</el-menu-item>&ndash;&gt;
<!--</el-submenu>--> &lt;!&ndash;</el-submenu>&ndash;&gt;
</el-submenu> </el-submenu>
<!-- <el-submenu index="2" style="width:50px;" popper-class="horizontal">--> &lt;!&ndash; <el-submenu index="2" style="width:50px;" popper-class="horizontal">&ndash;&gt;
<!-- <template slot="title" ><i class="nz-icon nz-icon-upload console-title-icon" style="position: absolute;left: 10px;top: 4px;"></i></template>--> &lt;!&ndash; <template slot="title" ><i class="nz-icon nz-icon-upload console-title-icon" style="position: absolute;left: 10px;top: 4px;"></i></template>&ndash;&gt;
<!-- <el-menu-item @click="showUploadBox" index="2-1">--> &lt;!&ndash; <el-menu-item @click="showUploadBox" index="2-1">&ndash;&gt;
<!-- <div>{{$t('webshell.upload')}}</div>--> &lt;!&ndash; <div>{{$t('webshell.upload')}}</div>&ndash;&gt;
<!-- </el-menu-item>--> &lt;!&ndash; </el-menu-item>&ndash;&gt;
<!-- <el-menu-item @click="showDownloadBox" index="2-2">--> &lt;!&ndash; <el-menu-item @click="showDownloadBox" index="2-2">&ndash;&gt;
<!-- <div>{{$t('webshell.download')}}</div>--> &lt;!&ndash; <div>{{$t('webshell.download')}}</div>&ndash;&gt;
<!-- </el-menu-item>--> &lt;!&ndash; </el-menu-item>&ndash;&gt;
<!-- </el-submenu>--> &lt;!&ndash; </el-submenu>&ndash;&gt;
</el-menu> </el-menu>-->
<el-tabs :before-leave="beforeLeave" <el-tabs :before-leave="beforeLeave"
@tab-click="handleClick" @tab-click="handleClick"
@@ -234,7 +234,7 @@
<el-form-item :label='$t("webshell.host")' prop="host"> <el-form-item :label='$t("webshell.host")' prop="host">
<el-input v-model="customConnect.host" size="small"/> <el-input v-model="customConnect.host" size="small"/>
</el-form-item> </el-form-item>
<el-form-item :label='$t("webshell.port")' prop="host"> <el-form-item :label='$t("webshell.port")' prop="port">
<el-input v-model="customConnect.port" size="small"/> <el-input v-model="customConnect.port" size="small"/>
</el-form-item> </el-form-item>
<el-form-item :label='$t("webshell.authUsername")' prop="authUsername"> <el-form-item :label='$t("webshell.authUsername")' prop="authUsername">
@@ -858,11 +858,12 @@ export default {
if (this.assetShow) { if (this.assetShow) {
this.$refs.assetConnect.validate((valid) => { this.$refs.assetConnect.validate((valid) => {
if (valid) { if (valid) {
// this.show(id, host, accountId, port) this.$get('asset/asset/' + this.assetContent.assetId).then(res => {
const asset = this.assetData.find(item => item.id == this.assetContent.assetId) const asset = res.data
this.addConsole(asset.id, asset.manageIp, '', '', 'asset') this.addConsole(asset.id, asset.manageIp, '', '', 'asset')
this.assetShow = false this.assetShow = false
this.prevent_opt.save = false this.prevent_opt.save = false
})
} else { } else {
this.prevent_opt.save = false this.prevent_opt.save = false
} }
@@ -905,7 +906,7 @@ export default {
this.assetContent.assetId = '' this.assetContent.assetId = ''
this.customConnect = { this.customConnect = {
host: '', host: '',
port: '', port: 22,
authType: 1, authType: 1,
authUsername: '', authUsername: '',
authPin: '', authPin: '',

View File

@@ -205,7 +205,10 @@ const cn = {
panelId: 'ID' panelId: 'ID'
}, },
createChartTitle: '新增图表', createChartTitle: '新增图表',
createChartTempTitle: '新增图表模板',
createChartByTemp: '通过模板添加图表',
editChartTitle: '编辑图表', editChartTitle: '编辑图表',
editChartTempTitle: '编辑图表模板', // "编辑图表""
chartForm: { chartForm: {
chartId: 'ID', chartId: 'ID',
chartName: '图表名称', chartName: '图表名称',
@@ -1322,7 +1325,8 @@ const cn = {
unitError: '请选择对应的目录', unitError: '请选择对应的目录',
imgError: '请上传图片', imgError: '请上传图片',
folder: '目录', folder: '目录',
selMod: '请个所有节点绑定module' selMod: '请个所有节点绑定module',
none: '无'
}, },
update: '更新' update: '更新'
}, },

View File

@@ -215,8 +215,11 @@ const en = {
panelId: 'ID' // ID panelId: 'ID' // ID
}, },
// 图表-侧滑框 // 图表-侧滑框
createChartTitle: 'New chart template', // "新增图表" createChartTitle: 'New chart', // "新增图表"
editChartTitle: 'Edit', // "编辑图表" createChartTempTitle: 'New chart template', // "新增图表"
createChartByTemp: 'New chart by template',
editChartTitle: 'Edit chart', // "编辑图表""
editChartTempTitle: 'Edit chart template', // "编辑图表""
chartForm: { chartForm: {
chartId: 'ID', chartId: 'ID',
chartName: 'Chart Name', chartName: 'Chart Name',
@@ -1344,7 +1347,8 @@ const en = {
unitError: 'Please select the folder', unitError: 'Please select the folder',
imgError: 'Please upload pictures', imgError: 'Please upload pictures',
folder: 'Folder', folder: 'Folder',
selMod: 'Please bind module for all nodes' selMod: 'Please bind module for all nodes',
none: 'None'
}, },
update: '更新' update: '更新'
}, },

View File

@@ -35,11 +35,11 @@
<!--metric--> <!--metric-->
<div class="right-box-sub-title" style="margin-bottom: 10px"> <div class="right-box-sub-title" style="margin-bottom: 10px">
<span>{{$t('alert.config.expr')}}</span> <span>{{$t('alert.config.expr')}}</span>
<span @click="addExpression" class="float-right" style="height: 19px;display: inline-block;line-height: 1;"> <!-- <span @click="addExpression" class="float-right" style="height: 19px;display: inline-block;line-height: 1;">-->
<span class="create-square-box"> <!-- <span class="create-square-box">-->
<i style="font-size: 17px; cursor: pointer;" class="nz-icon nz-icon-create-square"></i> <!-- <i style="font-size: 17px; cursor: pointer;" class="nz-icon nz-icon-create-square"></i>-->
</span> <!-- </span>-->
</span> <!-- </span>-->
</div> </div>
<el-row :key="index" class="element-item form-row-item" style="" <el-row :key="index" class="element-item form-row-item" style=""
v-for="(item,index) in selection.pen.data.expressArr"> v-for="(item,index) in selection.pen.data.expressArr">
@@ -146,8 +146,9 @@
</div> </div>
<!--value mapping--> <!--value mapping-->
<el-row class="form-row-title"> <el-row class="form-row-title">
{{$t('dashboard.panel.chartForm.thresholds')}} <span {{$t('dashboard.panel.chartForm.thresholds')}}
style="font-size: 12px;color: #666666;letter-spacing: 0;font-weight: 400;margin-left: 10px">0:Ok > >2:Critical</span> <span v-if="selection.pen.data.valueMappingSort !=='desc'" style="font-size: 12px;color: #666666;letter-spacing: 0;font-weight: 400;margin-left: 10px">0:Ok > >{{selection.pen.data.valueMapping.length}}:Critical</span>
<span v-if="selection.pen.data.valueMappingSort ==='desc'" style="font-size: 12px;color: #666666;letter-spacing: 0;font-weight: 400;margin-left: 10px">{{selection.pen.data.valueMapping.length}}:Critical > >0:Ok</span>
</el-row> </el-row>
<div style="width: 100%;margin-top: 10px"> <div style="width: 100%;margin-top: 10px">
<div class="thresholds-box"> <div class="thresholds-box">
@@ -232,13 +233,13 @@
<i class="nz-icon nz-icon-plus"></i> <i class="nz-icon nz-icon-plus"></i>
</div> </div>
<!--link--> <!-- &lt;!&ndash;link&ndash;&gt;-->
<el-row class="form-row-title"> <!-- <el-row class="form-row-title">-->
{{$t('project.topology.link')}} <!-- {{$t('project.topology.link')}}-->
</el-row> <!-- </el-row>-->
<el-form-item :label="'URL'" class="full-form-item" prop="type"> <!-- <el-form-item :label="'URL'" class="full-form-item" prop="type">-->
<el-input v-model="selection.pen.data.url" class="input" size="small"></el-input> <!-- <el-input v-model="selection.pen.data.url" class="input" size="small"></el-input>-->
</el-form-item> <!-- </el-form-item>-->
</el-form> </el-form>
</el-tab-pane> </el-tab-pane>
@@ -253,7 +254,91 @@
<!--样式--> <!--样式-->
<el-collapse-item :title="'Style'" name="4" v-if="selection.pen"> <el-collapse-item :title="'Style'" name="4" v-if="selection.pen">
<div class="flex flex-warp"> <div class="flex flex-warp">
<div class="props-pen-item">
<div class="props-pen-item" v-if="selection.pen&&!selection.pen.type">
<div>X</div>
<div class="p10 pl0">
<el-input-number
@focus="inputFocus"
@blur="inputBlur"
:precision="2"
controls-position="right"
size="small"
name="x"
class="input"
v-model.number="selection.pen.rect.x"
:readonly="readonly"
required
@change="onChange()"
>
<template slot="append">px</template>
</el-input-number>
</div>
</div>
<div class="props-pen-item" v-if="selection.pen&&!selection.pen.type">
<div>Y</div>
<div class="p10 pl0">
<el-input-number
@focus="inputFocus"
@blur="inputBlur"
:precision="2"
controls-position="right"
size="small"
name="x"
class="input"
v-model.number="selection.pen.rect.y"
:readonly="readonly"
required
@change="onChange()">
<template slot="append">px</template>
</el-input-number>
</div>
</div>
<div class="props-pen-item" v-if="selection.pen&&!selection.pen.type">
<div>{{$t('project.topology.width')}}</div>
<div class="p10 pl0">
<el-input-number
@focus="inputFocus"
@blur="inputBlur"
:precision="2"
controls-position="right"
size="small"
name="x"
class="input"
v-model.number="selection.pen.rect.width"
:readonly="readonly"
required
@change="onChange()"
:min="0">
<template slot="append">px</template>
</el-input-number>
</div>
</div>
<div class="props-pen-item" v-if="selection.pen&&!selection.pen.type">
<div>{{$t('project.topology.height')}}</div>
<div class="p10 pl0">
<el-input-number
@focus="inputFocus"
@blur="inputBlur"
:precision="2"
controls-position="right"
size="small"
name="x"
class="input"
v-model.number="selection.pen.rect.height"
:readonly="readonly"
required
@change="onChange()"
:min="0">
<template slot="append">px</template>
</el-input-number>
</div>
</div>
<div class="props-pen-item" v-if="selection.pen&&!selection.pen.type">
<div>{{$t('project.topology.circularBead')}}0 - 1</div> <div>{{$t('project.topology.circularBead')}}0 - 1</div>
<div class="p10 pl0"> <div class="p10 pl0">
<el-input-number <el-input-number
@@ -274,7 +359,7 @@
</div> </div>
</div> </div>
<div class="props-pen-item"> <div class="props-pen-item" v-if="selection.pen&&!selection.pen.type">
<div>{{$t('project.topology.rotate')}}°</div> <div>{{$t('project.topology.rotate')}}°</div>
<div class="p10 pl0"> <div class="p10 pl0">
<el-input-number <el-input-number
@@ -534,13 +619,13 @@
<div class="project-content node-content"> <div class="project-content node-content">
<div class="project-content-title">{{$t('project.topology.animation')}} <div class="project-content-title">{{$t('project.topology.animation')}}
<span class="float-right" style="margin-right: 10px"> <span class="float-right" style="margin-right: 10px">
<el-switch <!-- <el-switch-->
v-model="selection.pen.data.animatePlay" <!-- v-model="selection.pen.data.animatePlay"-->
:active-value="true" <!-- :active-value="true"-->
:inactive-value="false" <!-- :inactive-value="false"-->
active-color="#ee9d3f" <!-- active-color="#ee9d3f"-->
@change="()=>{onAnimate()}"> <!-- @change="()=>{onAnimate()}">-->
</el-switch> <!-- </el-switch>-->
</span> </span>
</div> </div>
<div class="project-content-box" style="width: 100%"> <div class="project-content-box" style="width: 100%">
@@ -551,7 +636,7 @@
<el-select <el-select
v-model="selection.pen.animateType" v-model="selection.pen.animateType"
size="small" size="small"
@change="(val)=>{changeAnimatePlay(val,'node')}"
> >
<el-option v-for="(item,index) in nodeAnimateOptions" :value="item.id" :key="index" <el-option v-for="(item,index) in nodeAnimateOptions" :value="item.id" :key="index"
:label="item.name"></el-option> :label="item.name"></el-option>
@@ -563,7 +648,8 @@
<label>{{$t('project.topology.animationType')}}</label> <label>{{$t('project.topology.animationType')}}</label>
<div class="full pr10"> <div class="full pr10">
<el-select v-model="selection.pen.animateType" size="small" <el-select v-model="selection.pen.animateType" size="small"
@change="onAnimate"> @change="(val)=>{changeAnimatePlay(val,'line')}"
>
<el-option v-for="(item,index) in lineAnimateOptions" :value="item.id" :key="index" <el-option v-for="(item,index) in lineAnimateOptions" :value="item.id" :key="index"
:label="item.name"></el-option> :label="item.name"></el-option>
</el-select> </el-select>
@@ -1045,7 +1131,8 @@ export default {
{ id: 1, name: this.$t('project.topology.flow') }, { id: 1, name: this.$t('project.topology.flow') },
{ id: 'beads', name: this.$t('project.topology.beads') }, { id: 'beads', name: this.$t('project.topology.beads') },
{ id: 'dot', name: this.$t('project.topology.dot') }, { id: 'dot', name: this.$t('project.topology.dot') },
{ id: 'comet', name: this.$t('project.topology.comet') } { id: 'comet', name: this.$t('project.topology.comet') },
{ id: 'custom', name: this.$t('project.topology.none') }
], ],
nodeAnimateOptions: [ nodeAnimateOptions: [
{ {
@@ -1071,6 +1158,10 @@ export default {
{ {
id: 'fade', id: 'fade',
name: this.$t('project.topology.fade') name: this.$t('project.topology.fade')
},
{
id: '',
name: this.$t('project.topology.none')
} }
], ],
predefineColors: [ predefineColors: [
@@ -1388,6 +1479,22 @@ export default {
this.drowdown = 0 this.drowdown = 0
this.onChange() this.onChange()
}, },
changeAnimatePlay (val, type) {
if (type === 'node') {
if (val === 'custom') {
this.selection.pen.data.animatePlay = false
} else {
this.selection.pen.data.animatePlay = true
}
} else if (type === 'line') {
if (val === 'custom') {
this.selection.pen.data.animatePlay = false
} else {
this.selection.pen.data.animatePlay = true
}
}
this.onChange()
},
onAnimate (val) { onAnimate (val) {
// this.selection.pen.animateStart=this.selection.pen.animateStart?Date.now():0; // this.selection.pen.animateStart=this.selection.pen.animateStart?Date.now():0;
// this.selection.pen.data.animatePlay=this.selection.pen.animatePlay; // this.selection.pen.data.animatePlay=this.selection.pen.animatePlay;

View File

@@ -1,7 +1,7 @@
<template> <template>
<div v-clickoutside="{obj: editChartTemp, func: esc}" class="right-box right-box-asset"> <div v-clickoutside="{obj: editChartTemp, func: esc}" class="right-box right-box-asset">
<div class="right-box__header"> <div class="right-box__header">
<div class="header__title">{{editChartTemp.id ? $t('config.user.editChartTemp') : $t('config.user.createUser')}}</div> <div class="header__title">{{editChartTemp.id ? $t('dashboard.panel.createChartByTemp') :$t('dashboard.panel.createChartByTemp')}}</div>
<div class="header__operation"> <div class="header__operation">
<span v-cancel="{obj: editChartTemp, func: esc}"><i class="nz-icon nz-icon-close"></i></span> <span v-cancel="{obj: editChartTemp, func: esc}"><i class="nz-icon nz-icon-close"></i></span>
</div> </div>

View File

@@ -10,7 +10,7 @@
<!-- end--顶部按钮--> <!-- end--顶部按钮-->
<!-- begin--标题--> <!-- begin--标题-->
<div class="right-box-title">{{$t("project.endpoint.editEndpoint") + " ID" + editEndpoint.id}}</div> <div class="right-box-title">{{$t("project.endpoint.editEndpoint") }}</div>
<!-- end--标题--> <!-- end--标题-->
<!-- begin--表单--> <!-- begin--表单-->

View File

@@ -150,7 +150,8 @@
</transition> </transition>
<div class="right-box__header"> <div class="right-box__header">
<div class="header__title">{{editChart.id ? $t("dashboard.panel.editChartTitle") : $t("dashboard.panel.createChartTitle")}}</div> <div class="header__title" v-if="from !== 'temp'">{{editChart.id ? $t("dashboard.panel.editChartTitle") : $t("dashboard.panel.createChartTitle")}}</div>
<div class="header__title" v-if="from === 'temp'">{{editChart.id ? $t("dashboard.panel.editChartTempTitle") : $t("dashboard.panel.createChartTempTitle")}}</div>
<div class="header__operation"> <div class="header__operation">
<span v-cancel="{obj: editChart, func: clickOutside}"><i class="nz-icon nz-icon-close"></i></span> <span v-cancel="{obj: editChart, func: clickOutside}"><i class="nz-icon nz-icon-close"></i></span>
</div> </div>