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

fix:修改BUG

Browse Source 
1.metric指标名称过长时，覆盖右侧的label名称(新增图表和图表预览中)
2.指标预览中，不可用按钮样式调整
3.指标预览中，右侧label值选择下拉列表样式调整
This commit is contained in:
hanyuxia
2020-01-17 10:25:36 +08:00
parent 172815d6d8
commit 15a0e803f8
4 changed files with 33 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
nezha-fronted/src/components/page/dashboard/chartMetric.vue
View File

@@ -30,10 +30,10 @@
} }
.li-list-part-label-val-list { .li-list-part-label-val-list {
width: 100%; width: 100%;
height: 165px; height: 145px;
border: 1px solid #cfcfcf; border: 1px solid #cfcfcf;
overflow-y: auto; overflow-y: auto;
margin-top: -10px;/*21*/ margin-top: 20px;/*21*/
border: 0px; border: 0px;
} }
.no-list-style{ .no-list-style{
@@ -75,12 +75,12 @@
<button @click="clickTabelShow(1,'normal')" class="nz-btn nz-btn-size-small nz-btn-style-light float-left"> <button @click="clickTabelShow(1,'normal')" class="nz-btn nz-btn-size-small nz-btn-style-light float-left">
<span>{{$t('dashboard.metric.normal')}}</span> <span>{{$t('dashboard.metric.normal')}}</span>
</button> </button>
<button @click="" class="nz-btn nz-btn-size-small nz-btn-disabled nz-btn-style-normal float-left"> <button @click="" class="nz-btn nz-btn-size-small nz-btn-style-normal float-left">
<span>{{$t('dashboard.metric.expert')}}</span> <span>{{$t('dashboard.metric.expert')}}</span>
</button> </button>
</div> </div>
<div class="nz-btn-group float-left" v-show="tableShow == 1"> <div class="nz-btn-group float-left" v-show="tableShow == 1">
<button @click="" class="nz-btn nz-btn-size-small nz-btn-disabled nz-btn-style-normal float-left"> <button @click="" class="nz-btn nz-btn-size-small nz-btn-style-normal float-left">
<span>{{$t('dashboard.metric.normal')}}</span> <span>{{$t('dashboard.metric.normal')}}</span>
</button> </button>
<button @click="clickTabelShow(2,'expert')" class="nz-btn nz-btn-size-small nz-btn-style-light float-left"> <button @click="clickTabelShow(2,'expert')" class="nz-btn nz-btn-size-small nz-btn-style-light float-left">

11
nezha-fronted/src/components/page/dashboard/chartMetricForPreview.vue
View File

@@ -30,10 +30,10 @@
} }
.li-list-part-label-val-list { .li-list-part-label-val-list {
width: 100%; width: 100%;
height: 165px; height: 145px;
border: 1px solid #cfcfcf; border: 1px solid #cfcfcf;
overflow-y: auto; overflow-y: auto;
margin-top: -10px;/*21*/ margin-top: 20px;/*21*/
border: 0px; border: 0px;
} }
.no-list-style{ .no-list-style{
@@ -75,12 +75,12 @@
<button @click="clickTabelShow(1,'normal')" class="nz-btn nz-btn-size-small nz-btn-style-light float-left"> <button @click="clickTabelShow(1,'normal')" class="nz-btn nz-btn-size-small nz-btn-style-light float-left">
<span>{{$t('dashboard.metric.normal')}}</span> <span>{{$t('dashboard.metric.normal')}}</span>
</button> </button>
<button @click="" class="nz-btn nz-btn-size-small nz-btn-disabled nz-btn-style-normal float-left"> <button @click="" class="nz-btn nz-btn-size-small nz-btn-style-normal float-left">
<span>{{$t('dashboard.metric.expert')}}</span> <span>{{$t('dashboard.metric.expert')}}</span>
</button> </button>
</div> </div>
<div class="nz-btn-group float-left" v-show="tableShow == 1"> <div class="nz-btn-group float-left" v-show="tableShow == 1">
<button @click="" class="nz-btn nz-btn-size-small nz-btn-disabled nz-btn-style-normal float-left"> <button @click="" class="nz-btn nz-btn-size-small nz-btn-style-normal float-left">
<span>{{$t('dashboard.metric.normal')}}</span> <span>{{$t('dashboard.metric.normal')}}</span>
</button> </button>
<button @click="clickTabelShow(2,'expert')" class="nz-btn nz-btn-size-small nz-btn-style-light float-left"> <button @click="clickTabelShow(2,'expert')" class="nz-btn nz-btn-size-small nz-btn-style-light float-left">
@@ -132,7 +132,8 @@
</el-col> </el-col>
<el-col span="12"> <el-col span="12">
<div class="li-list-part-label-val-list" > <div class="li-list-part-label-val-list" >
<el-form-item class="metric-title-position" v-for="(item, index) in elementInfo.selectedTagList" :key="index" :label="item.name" :label-width="100" :ref="'tagItem' + index" :prop="'tagList.' + index + '.value'" > <el-form-item class="metric-title-position" v-for="(item, index) in elementInfo.selectedTagList" :key="index" :label-width="100" :ref="'tagItem' + index" :prop="'tagList.' + index + '.value'" >
<el-row >{{item.name}}</el-row>
<el-row class="metric-title-row-position" > <el-row class="metric-title-row-position" >
<!--多选列表 --> <!--多选列表 -->
<el-col span="20" > <el-col span="20" >

8
nezha-fronted/src/components/page/dashboard/metricSet.scss
View File

@@ -21,6 +21,7 @@
border-top: 1px solid #dfe7f2; border-top: 1px solid #dfe7f2;
border-bottom: 1px solid #dfe7f2; border-bottom: 1px solid #dfe7f2;
padding: 5px 0; padding: 5px 0;
margin-left:3px;
.operate-area-title { .operate-area-title {
padding: 5px 0; padding: 5px 0;
font-size: 14px; font-size: 14px;
@@ -48,8 +49,11 @@
.mt-10{ .mt-10{
margin-top:10px; margin-top:10px;
} }
.nx-btn-disabled{ .ml-3{
cursor:not-allowed; margin-left:3px;
}
.btn-disabled-cursor-not-allowed{
cursor:not-allowed !important;
} }
.w-select{ .w-select{
width:130px; width:130px;

25
nezha-fronted/src/components/page/dashboard/metricSet.vue
View File

@@ -11,20 +11,20 @@
@on-change-condition="getCondition" @on-change-condition="getCondition"
></chart-metric> ></chart-metric>
</el-row> </el-row>
<el-row class="pt-5 pb-5"> <el-row class="pt-5 pb-5 ml-3">
<button type="primary" @click="preview" :disabled="loading" class="nz-btn nz-btn-size-normal nz-btn-style-normal ">{{$t('dashboard.metric.previewChart')}}</button> <button type="primary" @click="preview" :disabled="loading" class="nz-btn nz-btn-size-normal nz-btn-style-normal ">{{$t('dashboard.metric.previewChart')}}</button>
<button :disabled="saveDisabled || loading" type="primary" @click="preview('change')" <button :disabled="saveDisabled || loading" type="primary" @click="preview('change')"
:class="{'nz-btn nx-btn-disabled' : (saveDisabled || loading), 'nz-btn nz-btn-size-normal nz-btn-style-normal' : !(saveDisabled || loading)}" :class="{'nz-btn nz-btn-disabled nz-btn-size-normal nz-btn-style-light nz-btn-min-width-75 btn-disabled-cursor-not-allowed' : (saveDisabled || loading), 'nz-btn nz-btn-size-normal nz-btn-style-normal' : !(saveDisabled || loading)}"
>{{chartSwitchWord}}</button> >{{chartSwitchWord}}</button>
<!-- <Button type="primary" @click="addTarget">添加指标</Button> --> <!-- <Button type="primary" @click="addTarget">添加指标</Button> -->
</el-row> </el-row>
<el-row class="operate-area"> <el-row class="operate-area">
<div class="operate-area-title">{{$t('dashboard.metric.saveChartToPanel')}}:</div> <div class="operate-area-title">{{$t('dashboard.metric.saveChartToPanel')}}:</div>
<button :disabled="saveDisabled" type="primary" @click="createNew" <button :disabled="saveDisabled" type="primary" @click="createNew"
:class="{'nz-btn nx-btn-disabled' : saveDisabled , 'nz-btn nz-btn-size-normal nz-btn-style-normal' : !saveDisabled}" :class="{'nz-btn nz-btn-disabled nz-btn-size-normal nz-btn-style-light btn-disabled-cursor-not-allowed' : saveDisabled , 'nz-btn nz-btn-size-normal nz-btn-style-normal' : !saveDisabled}"
>{{$t('dashboard.metric.createPanel')}}</button> >{{$t('dashboard.metric.createPanel')}}</button>
<button :disabled="saveDisabled" type="primary" @click="selectPanel" <button :disabled="saveDisabled" type="primary" @click="selectPanel"
:class="{'nz-btn nx-btn-disabled' : saveDisabled , 'nz-btn nz-btn-size-normal nz-btn-style-normal' : !saveDisabled}" :class="{'nz-btn nz-btn-disabled nz-btn-size-normal nz-btn-style-light nz-btn-min-width-75 btn-disabled-cursor-not-allowed' : saveDisabled , 'nz-btn nz-btn-size-normal nz-btn-style-normal' : !saveDisabled}"
>{{$t('dashboard.metric.selectPanel')}}</button> >{{$t('dashboard.metric.selectPanel')}}</button>
</el-row> </el-row>
<el-row class="mt-10"> <el-row class="mt-10">
@@ -33,7 +33,7 @@
<el-form :model="chartInfo" ref="chartInfo" v-show="isSave"> <el-form :model="chartInfo" ref="chartInfo" v-show="isSave">
<el-row> <el-row>
<div class="common-float-left"> <div class="common-float-left">
<el-form-item :label-width="80" :label="$t('dashboard.panel.chartForm.width')" prop="span" <el-form-item :label-width="80" :label="$t('dashboard.panel.chartForm.width')" prop="span"
:rules="{ required: true, type: 'number', trigger: 'change' }"> :rules="{ required: true, type: 'number', trigger: 'change' }">
<el-select class="w-select" size="small" v-model="chartInfo.span" transfer> <el-select class="w-select" size="small" v-model="chartInfo.span" transfer>
<el-option v-for="item in spanList" :key="item" :label="'span-' + item" :value="item"> <el-option v-for="item in spanList" :key="item" :label="'span-' + item" :value="item">
@@ -71,7 +71,7 @@
</div> </div>
</template> </template>
<script> <script>
import axios from 'axios'; //import axios from 'axios';
import bus from '../../../libs/bus'; import bus from '../../../libs/bus';
import chartMetric from "./chartMetricForPreview"; import chartMetric from "./chartMetricForPreview";
import metricPrePanelBox from "../../common/rightBox/metricPrePanelBox"; import metricPrePanelBox from "../../common/rightBox/metricPrePanelBox";
@@ -158,8 +158,6 @@ export default {
reload(){ reload(){
this.saveDisabled = true; this.saveDisabled = true;
this.elementTarget = {}; this.elementTarget = {};
}, },
// 创建看板 // 创建看板
createNew() { createNew() {
@@ -177,6 +175,7 @@ export default {
this.$refs.panelBox.setChartTitle(this.metricInfo.metric); this.$refs.panelBox.setChartTitle(this.metricInfo.metric);
this.$refs.panelBox.getTableData(); this.$refs.panelBox.getTableData();
}, },
/*
// 取消创建modal // 取消创建modal
cancel() { cancel() {
this.panelList = []; this.panelList = [];
@@ -190,16 +189,20 @@ export default {
} }
this.createModal = false; this.createModal = false;
}, },
*/
/*
// 重置已选择的看板 // 重置已选择的看板
initSaveInfo() { initSaveInfo() {
this.chartSaveInfo.name = ''; // panel名称创建 this.chartSaveInfo.name = ''; // panel名称创建
this.chartSaveInfo.panelId = ''; // 选择panel this.chartSaveInfo.panelId = ''; // 选择panel
}, },
close() { close() {
this.elementTarget = {}; // 初始化清空参数 this.elementTarget = {}; // 初始化清空参数
this.initInfo(); this.initInfo();
this.chartModal = false; this.chartModal = false;
}, },
*/
// 初始化信息 // 初始化信息
initInfo() { initInfo() {
this.chartInfo.title = ''; this.chartInfo.title = '';
@@ -260,6 +263,7 @@ export default {
} }
}); });
}, },
/*
// 确认创建图表 // 确认创建图表
createConfirm() { createConfirm() {
this.$refs.chartInfo.validate((valid) => { this.$refs.chartInfo.validate((valid) => {
@@ -292,6 +296,7 @@ export default {
} }
}); });
}, },
// 选择看板 // 选择看板
panelSelect(id) { panelSelect(id) {
if (id) { if (id) {
@@ -301,6 +306,8 @@ export default {
} }
} }
}, },
*/
/*
// 生成图表的时候,使用该函数,汇总创建图表参数 // 生成图表的时候,使用该函数,汇总创建图表参数
getOptions() { getOptions() {
this.$refs.chartInfo.validate((valid) => { this.$refs.chartInfo.validate((valid) => {
@@ -431,10 +438,12 @@ export default {
}); });
} }
}, },
// 增加指标,tarNum // 增加指标,tarNum
addTarget() { addTarget() {
this.elements.push(1); this.elements.push(1);
}, },
*/
// 获取metric列表 // 获取metric列表
getSuggestMetric(id) { getSuggestMetric(id) {
this.$get('metric', {pageNo: 1, pageSize: -1}).then(response => { this.$get('metric', {pageNo: 1, pageSize: -1}).then(response => {