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

perf: 调整panel弹框样式

Browse Source
This commit is contained in:
chenjinsong
2020-01-20 17:32:03 +08:00
parent 1f400e780c
commit c3f8c61e76
7 changed files with 73 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
nezha-fronted/src/assets/stylus/main.scss
View File

@@ -244,14 +244,10 @@ li{
.el-textarea__inner {
padding: 5px 60px 5px 15px;
}
.nz-input-group-prepend {
border-radius: 4px 0 0 4px;
}
.nz-input-group-middle, .nz-input-group-middle .el-input__inner {
border-radius: 0;
}
.nz-input-group-append {
border-radius: 0 4px 4px 0;
.nz-input-append {
position: absolute;
right: 5px;
color: #666;
}
/* end--el-input扩展 */
@@ -538,7 +534,7 @@ li{
.right-box-account, .right-box-prom, .right-box-alert-config, .right-box-project, .right-box-module, .right-box-edit-endpoint, .right-box-panel {
width: 520px;
}
.right-box-add-asset {
.right-box-add-asset, .right-box-add-chart {
width: 550px;
}
.right-box-add-endpoint {
@@ -893,10 +889,6 @@ li{
}
/* end--自定义可编辑的el-select下拉框样式*/
.right-box-add-chart {
width: 520px;
height: calc(100% - 100px);
}
/*子菜单选中样式*/
.nz-submenu .el-menu--popup .el-menu-item .menu-item-active{
color:$global-text-color-active !important;
@@ -905,3 +897,4 @@ li{
content: "\E6CA";
color: #BA3939;
}

2
nezha-fronted/src/components/common/language/en.js
View File

@@ -61,7 +61,7 @@ const en = {
}
},
width:"Width",
high:"High",
high:"Height",
metric:"Metric",
addMetric:"Add Metric",
},

99
nezha-fronted/src/components/common/rightBox/panelBox.vue
View File

@@ -3,35 +3,10 @@
<div class="right-box right-box-panel z-top" v-if="rightBox.show">
<!-- begin--顶部按钮-->
<div class="right-box-top-btns">
<button type="button" v-if="panel.id != ''" @click="del(panel)" class="nz-btn nz-btn-size-normal nz-btn-style-light">
<span class="top-tool-btn-txt">{{$t('overall.delete')}}</span>
<button type="button" v-if="panel.id != ''" @click="del(panel)" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light nz-btn-min-width-82">
<span class="right-box-top-btn-icon"><i class="el-icon-delete"></i></span>
<span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
</button>
<button type="button" @click="save" class="nz-btn nz-btn-size-normal nz-btn-style-normal">
<span class="top-tool-btn-txt">{{$t('overall.save')}}</span>
</button>
<button type="button" @click="esc" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-style-square">
<span class="top-tool-btn-txt"><i class="el-icon-close"></i></span>
</button>
<!--
<div class="right-box-top-btn right-box-top-btn-full" @click="esc">
<div class="right-box-btn-icon">
<i class="el-icon-close"></i>
</div>
<span>{{$t('overall.esc')}}</span>
</div>
<div class="right-box-top-btn right-box-top-btn-full" @click="save">
<div class="right-box-btn-icon">
<i class="el-icon-edit-outline"></i>
</div>
<span >{{$t('overall.save')}}</span>
</div>
<div @click="del(panel)" class="right-box-top-btn" v-if="panel.id != ''">
<div class="right-box-btn-icon">
<i class="el-icon-delete"></i>
</div>
<span>{{$t('overall.delete')}}</span>
</div>
-->
</div>
<!-- end--顶部按钮-->
@@ -40,22 +15,24 @@
<!-- end--标题-->
<!-- begin--表单-->
<div class="right-box-form">
<div class="right-box-form-row">
<div class="right-box-form-label">{{$t('dashboard.panel.panelForm.panelName')}}</div>
<div class="right-box-form-content">
<el-input placeholder="" maxlength="64" show-word-limit v-model="panel.name" size="small"></el-input>
</div>
</div>
</div>
<el-scrollbar class="right-box-form-box">
<el-form class="right-box-form" :model="panel" label-position="top" ref="panelForm">
<el-form-item :label='$t("project.project.project")' prop="name" :rules="{required: true, message: $t('validate.required'), trigger: 'blur'}">
<el-input placeholder="" maxlength="64" show-word-limit v-model="panel.name" size="small" ></el-input>
</el-form-item>
</el-form>
</el-scrollbar>
<!-- end--表单-->
<!-- begin--底部按钮-->
<!--
<div class="right-box-bottom-btns">
<div @click="esc()" :class="{'right-box-bottom-btn-50': true}" class="right-box-bottom-btn right-box-bottom-btn-cancel">{{$t('overall.cancel')}}</div><div @click="save()" class="right-box-bottom-btn right-box-bottom-btn-50">{{panel.id == '' ? $t('overall.create') : $t('overall.save')}}</div>
<button @click="esc" id="module-box-esc" class="nz-btn nz-btn-size-large nz-btn-style-light nz-btn-min-width-120">
<span>{{$t('overall.cancel')}}</span>
</button>
<button @click="save" id="module-box-save" class="nz-btn nz-btn-size-large nz-btn-style-normal nz-btn-min-width-120">
<span>{{$t('overall.save')}}</span>
</button>
</div>
-->
<!-- end--底部按钮-->
</div>
@@ -101,27 +78,33 @@
});
},
save: function() {
if (this.panel.id) {
this.$put('panel', this.panel).then(response => {
if (response.code === 200) {
this.esc();
this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
this.$emit("reload");
this.$refs.panelForm.validate((valid) => {
if (valid) {
if (this.panel.id) {
this.$put('panel', this.panel).then(response => {
if (response.code === 200) {
this.esc();
this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
this.$emit("reload");
} else {
this.$message.error(response.msg);
}
});
} else {
this.$message.error(response.msg);
this.$post('panel', this.panel).then(response => {
if (response.code === 200) {
this.esc();
this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
this.$emit("reload");
} else {
this.$message.error(response.msg);
}
});
}
});
} else {
this.$post('panel', this.panel).then(response => {
if (response.code === 200) {
this.esc();
this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
this.$emit("reload");
} else {
this.$message.error(response.msg);
}
});
}
} else {
return false;
}
});
},
esc: function() {
this.rightBox.show = false;

2
nezha-fronted/src/components/page/asset/assetAddUnit.vue
View File

@@ -349,7 +349,7 @@
<span>{{$t('overall.cancel')}}</span>
</button>
<button @click.stop="addNewData('asset')" id="add-asset-new" class="nz-btn nz-btn-size-large nz-btn-style-normal nz-btn-min-width-120">
<span>{{$t('overall.ok')}}</span>
<span>{{$t('overall.save')}}</span>
</button>
</div>
</div>

2
nezha-fronted/src/components/page/asset/assetEditUnit.vue
View File

@@ -391,7 +391,7 @@
<span>{{$t('overall.cancel')}}</span>
</button>
<button v-if="!tabView" @click.stop="editData('asset')" class="nz-btn nz-btn-size-large nz-btn-style-normal nz-btn-min-width-120" id="asset-edit-save">
<span>{{$t('overall.ok')}}</span>
<span>{{$t('overall.save')}}</span>
</button>
</div>
<module-box :module="module" @reload="refreshTabData" ref="moduleBox"></module-box>

66
nezha-fronted/src/components/page/dashboard/chartBox.vue
View File

@@ -55,14 +55,9 @@
<div class="right-box right-box-add-chart z-top" v-if="rightBox.show" >
<!-- begin--顶部按钮-->
<div class="right-box-top-btns">
<button type="button" v-if="chart.id != ''" @click="del(chart)" class="nz-btn nz-btn-size-normal nz-btn-style-light">
<span class="top-tool-btn-txt">{{$t('overall.delete')}}</span>
</button>
<button type="button" @click="confirmAdd" class="nz-btn nz-btn-size-normal nz-btn-style-normal">
<span class="top-tool-btn-txt">{{$t('overall.save')}}</span>
</button>
<button type="button" @click="esc" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-style-square">
<span class="top-tool-btn-txt"><i class="el-icon-close"></i></span>
<button id="chart-box-delete" type="button" v-if="chart.id != ''" @click="del(chart)" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light nz-btn-min-width-82">
<span class="right-box-top-btn-icon"><i class="el-icon-delete"></i></span>
<span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
</button>
</div>
<!-- end--顶部按钮-->
@@ -79,13 +74,13 @@
</el-form-item>
<el-row :gutter="10">
<el-col :span="2" >
<el-col :span="3" >
<div class="label-center" >{{$t('dashboard.panel.chartForm.type')}}</div>
</el-col>
<el-col :span="4">
<el-col :span="5">
<div class="grid-content ">
<el-form-item prop="type">
<el-select class="right-box-row-with-btn" value-key="chartType" popper-class="" v-model="chart.type" placeholder="" size="small">
<el-select class="right-box-row-with-btn" value-key="chartType" popper-class="" v-model="chart.type" placeholder="" size="mini">
<el-option v-for="item in chartTypeList" :key="item.id" :label="item.name" :value="item.id">
<span class="panel-dropdown-label-txt" >{{item.name}}</span>
</el-option>
@@ -93,13 +88,13 @@
</el-form-item>
</div>
</el-col>
<el-col :span="2.1">
<el-col :span="3">
<div class="label-center" >{{$t('dashboard.panel.chartForm.width')}}</div>
</el-col>
<el-col :span="5">
<div class="grid-content ">
<el-form-item prop="span">
<el-select class="right-box-row-with-btn" value-key="chartSpan" popper-class="" v-model="chart.span" placeholder="" size="small">
<el-select class="right-box-row-with-btn" value-key="chartSpan" popper-class="" v-model="chart.span" placeholder="" size="mini">
<el-option v-for="item in spanList" :key="item" :label="'span-' + item" :value="item">
<span class="panel-dropdown-label-txt" > span-{{item}}</span>
</el-option>
@@ -107,13 +102,13 @@
</el-form-item>
</div>
</el-col>
<el-col :span="2">
<el-col :span="3">
<div class="label-center" >{{$t('dashboard.panel.chartForm.high')}}</div>
</el-col>
<el-col :span="8">
</el-col><el-col :span="5">
<div class="grid-content ">
<el-form-item prop="heigh">
<el-input-number :min="400" label="" v-model="chart.height" placeholder="" size="small"></el-input-number>px
<el-form-item prop="heigh">
<el-input label="" v-model="chart.height" placeholder="" size="mini"></el-input>
<span class="nz-input-append">px</span>
</el-form-item>
</div>
</el-col>
@@ -152,36 +147,15 @@
</el-form>
</el-scrollbar>
<!--
<div class="right-box-form">
<div class="right-box-form-row">
<div class="right-box-form-label">{{$t('dashboard.panel.chartForm.chartName')}}</div>
<div class="right-box-form-content">
<el-input placeholder="" maxlength="64" show-word-limit v-model="chart.title" size="small"></el-input>
</div>
</div>
<div class="right-box-form-row">
<el-row :gutter="20">
<el-col :span="8"><div class="grid-content bg-purple">1</div></el-col>
<el-col :span="8"><div class="grid-content bg-purple">2</div></el-col>
<el-col :span="8"><div class="grid-content bg-purple">3</div></el-col>
</el-row>
</div>
</div>
-->
<!-- end--表单-->
<!-- begin--底部按钮-->
<!--
<!--底部按钮-->
<div class="right-box-bottom-btns">
<div @click="esc" class="right-box-bottom-btn right-box-bottom-btn-cancel right-box-bottom-btn-50">{{$t('overall.cancel')}}</div><div @click="save" class="right-box-bottom-btn right-box-bottom-btn-50">{{$t('overall.create')}}</div>
<button @click="esc" id="chart-box-esc" class="nz-btn nz-btn-size-large nz-btn-style-light nz-btn-min-width-120">
<span>{{$t('overall.cancel')}}</span>
</button>
<button @click="confirmAdd" id="chart-box-save" class="nz-btn nz-btn-size-large nz-btn-style-normal nz-btn-min-width-120">
<span>{{$t('overall.save')}}</span>
</button>
</div>
-->
<!-- end--底部按钮-->
</div>
</transition>
</template>

4
nezha-fronted/src/components/page/dashboard/panel.vue
View File

@@ -45,7 +45,9 @@
</el-dropdown-menu>
</el-dropdown>
<div class="nz-btn-group nz-btn-group-light float-right margin-r-20">
<button style="border-right: 1px solid rgba(162,162,162,0.50);" type="button" class="nz-btn nz-btn-size-normal nz-btn-style-light" @click="Refresh()"><i style="font-size: 12px" class="global-active-color nz-icon nz-icon-refresh"></i></button><el-popover v-model="visible" placement="bottom-start" width="200" trigger="click">
<button style="border-right: 1px solid rgba(162,162,162,0.50);" type="button" class="nz-btn nz-btn-size-normal nz-btn-style-light" @click="Refresh()">
<i style="font-size: 12px" class="global-active-color nz-icon nz-icon-refresh"></i>
</button><el-popover v-model="visible" placement="bottom-start" width="200" trigger="click">
<ul class="popover_ul">
<li v-for="i in intervalList" :style="{color:interval==i.value?'#31749C':''}" :key="i.value+i.name" @click="selectInterval(i.value)">
{{i.name}}