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

NEZ-2029 feat：columns display配置项增加提示信息

Browse Source
This commit is contained in:
zyh
2022-07-18 11:03:49 +08:00
parent 3260eea125
commit 52d48b7e3f
3 changed files with 56 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
nezha-fronted/src/assets/css/components/common/rightBox/chartRightBox/chartRightBox.scss
View File

@@ -331,3 +331,26 @@
font-size: 18px; font-size: 18px;
} }
} }
.columns-dispaly-pop{
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 4px;
.columns-dispaly-title{
padding: 4px 8px;
font-size: 14px;
background: $--border-color-light;
color: $--color-text-primary;
margin-top: 14px;
margin-bottom: 6px;
}
.columns-dispaly-title:first-of-type{
margin-top: 0;
}
.columns-dispaly-msg{
font-size: 14px;
color: $--color-text-primary;
line-height: 20px;
}
}

25
nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue
View File

@@ -515,17 +515,30 @@
<div class='mapping-display'>{{$t('dashboard.panel.chartForm.unit')}}</div> <div class='mapping-display'>{{$t('dashboard.panel.chartForm.unit')}}</div>
</div> </div>
<el-cascader :id="'columns-unit' + index" v-model="item.unit" :options="unitOptions" :props="{ expandTrigger: 'hover',emitPath:false }" :show-all-levels="false" filterable <el-cascader :id="'columns-unit' + index" v-model="item.unit" :options="unitOptions" :props="{ expandTrigger: 'hover',emitPath:false }" :show-all-levels="false" filterable
placeholder="" placeholder=""
popper-class="dc-dropdown right-box-select-top right-public-box-dropdown-top prevent-clickoutside chart-box-unit" popper-class="dc-dropdown right-box-select-top right-public-box-dropdown-top prevent-clickoutside chart-box-unit"
size="small" size="small"
style="flex: 1" style="flex: 1"
@change="unitSelected" @change="unitSelected"
> >
</el-cascader> </el-cascader>
</el-row> </el-row>
<el-row class="thresholds-item" v-show="item.show" :key="2"> <el-row class="thresholds-item" v-show="item.show" :key="2">
<div> <div>
<div class='mapping-display'>{{$t('config.assetLabel.display')}}</div> <div class='mapping-display'>
<span>{{$t('config.assetLabel.display')}}</span>
<el-popover placement="top" trigger="hover" popper-class="prevent-clickoutside">
<div class="columns-dispaly-pop" style="width:396px">
<div class="columns-dispaly-title" v-pre>{{&lt;expression name&gt;.$labels.&lt;label name&gt;}}</div>
<div class="columns-dispaly-msg">{{$t('tip.expressionLabel')}}{{$t('tip.$labels')}}</div>
<div class="columns-dispaly-title" v-pre>{{&lt;expression name&gt;.$value}}</div>
<div class="columns-dispaly-msg">{{$t('tip.expressionValue')}}</div>
</div>
<span slot="reference">
<i class="nz-icon nz-icon-info-normal" style="font-size: 14px; -webkit-transform:scale(0.75);display:inline-block;"></i>
</span>
</el-popover>
</div>
</div> </div>
<el-form-item :prop="'param.columns.' + index + '.display'" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}" class="thresholds-from-item"> <el-form-item :prop="'param.columns.' + index + '.display'" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}" class="thresholds-from-item">
<el-input v-model="item.display" style="margin-right: 10px" size="small" @change="change('columns',index)"/> <el-input v-model="item.display" style="margin-right: 10px" size="small" @change="change('columns',index)"/>

15
nezha-fronted/src/components/common/rightBox/chart/systemChartConfig.vue
View File

@@ -479,7 +479,20 @@
</el-row> </el-row>
<el-row class="thresholds-item" v-show="item.show" :key="2"> <el-row class="thresholds-item" v-show="item.show" :key="2">
<div> <div>
<div class='mapping-display'>{{$t('config.assetLabel.display')}}</div> <div class='mapping-display'>
<span>{{$t('config.assetLabel.display')}}</span>
<el-popover placement="top" trigger="hover" popper-class="prevent-clickoutside">
<div class="columns-dispaly-pop" style="width:396px">
<div class="columns-dispaly-title" v-pre>{{&lt;expression name&gt;.$labels.&lt;label name&gt;}}</div>
<div class="columns-dispaly-msg">{{$t('tip.expressionLabel')}}{{$t('tip.$labels')}}</div>
<div class="columns-dispaly-title" v-pre>{{&lt;expression name&gt;.$value}}</div>
<div class="columns-dispaly-msg">{{$t('tip.expressionValue')}}</div>
</div>
<span slot="reference">
<i class="nz-icon nz-icon-info-normal" style="font-size: 14px; -webkit-transform:scale(0.75);display:inline-block;"></i>
</span>
</el-popover>
</div>
</div> </div>
<el-form-item :prop="'param.columns.' + index + '.display'" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}" class="thresholds-from-item"> <el-form-item :prop="'param.columns.' + index + '.display'" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}" class="thresholds-from-item">
<el-input v-model="item.display" style="margin-right: 10px" size="small" @change="change('columns',index)"/> <el-input v-model="item.display" style="margin-right: 10px" size="small" @change="change('columns',index)"/>