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

feat： chart-box 样式调整

Browse Source
This commit is contained in:
zhangyu
2021-12-03 17:59:27 +08:00
parent b22c244025
commit c4c207c438
4 changed files with 36 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,5 +1,23 @@
.chart-right-box{
overflow-y: auto;
.el-tabs--border-card {
box-shadow: none;
border: none;
}
.el-tabs__nav{
width: 100%;
> div{
width: 25%;
box-sizing: border-box;
text-align: center;
padding: 0!important;
}
}
.el-tabs--card>.el-tabs__header .el-tabs__item.is-active {
color: $--color-white;
background: $--color-primary;
border: none;
}
}
.right-box__container{
.chart-config{
@@ -8,7 +26,7 @@
.el-form {
padding-top: 0px;
.thresholds-from-item{
margin-bottom: 0;
margin-bottom: 0 !important;
flex: 1;
}
.el-form-item__error {

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

@@ -64,7 +64,7 @@
</span>
</div>
<transition name="el-zoom-in-top">
<el-row v-show="expressionsShow[index-1].show">
<el-row v-show="expressionsShow[index-1].show" style="margin-bottom: 10px">
<el-form-item :prop="'elements.' + (index -1) + '.expression'"
:rules="{ required: true, message: $t('validate.required'), trigger: 'change'}">
<promql-input
@@ -391,7 +391,7 @@
/>
<el-input
size="small"
style="margin-top: 3px"
style="margin-top: 2px"
:placeholder="$t('placeholder.chart.threshold')"
v-model.number="item.value"
:controls="false"

3
nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue
View File

@@ -57,7 +57,7 @@
<div class="form__sub-title">
<span>{{$t('dashboard.panel.chartForm.dataConfig')}}</span>
</div>
<el-tabs v-model="editChart.datasource" @tab-click="datasourceChange">
<el-tabs v-model="editChart.datasource" @tab-click="datasourceChange" type="card">
<el-tab-pane label="Metrics" name="1">
<chart-config ref="childrenFrom1" :type="'metrics'" v-if="editChart.datasource == 1" :params.sync="editChart" @change="editChartChange"/>
</el-tab-pane>
@@ -162,6 +162,7 @@ export default {
arr.push(this.$refs['childrenFrom' + this.editChart.datasource].$refs.chartForm.validate())
Promise.all(arr).then(res => {
this.editChart.param = JSON.stringify(this.editChart.param)
this.editChart.panelId = this.panelId
if (this.editChart.id) { // 修改
this.$put('visual/panel/chart', this.editChart).then(response => {
if (response.code === 200) {

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

@@ -248,7 +248,7 @@
</div>
<el-form-item
v-if="item.type === 'value'"
:prop="'param.valueMapping.mapping.' + index + 'value'"
:prop="'param.valueMapping.mapping.' + index + '.value'"
:rules="{ required: true, message: $t('validate.required'), trigger: 'change'}"
class="thresholds-from-item"
>
@@ -261,7 +261,7 @@
</el-form-item>
<el-form-item
v-if="item.type === 'range'"
:prop="'param.valueMapping.mapping.' + index + 'from'"
:prop="'param.valueMapping.mapping.' + index + '.from'"
:rules="{ required: true, message: $t('validate.required'), trigger: 'change'}"
class="thresholds-from-item"
>
@@ -274,7 +274,7 @@
</el-form-item>
<el-form-item
v-if="item.type === 'range'"
:prop="'param.valueMapping.mapping.' + index + 'to'"
:prop="'param.valueMapping.mapping.' + index + '.to'"
:rules="{ required: true, message: $t('validate.required'), trigger: 'change'}"
class="thresholds-from-item"
>
@@ -287,7 +287,7 @@
</el-form-item>
<el-form-item
v-if="item.type === 'regx'"
:prop="'param.valueMapping.mapping.' + index + 'regx'"
:prop="'param.valueMapping.mapping.' + index + '.regx'"
:rules="{ required: true, message: $t('validate.required'), trigger: 'change'}"
class="thresholds-from-item"
>
@@ -302,7 +302,7 @@
<div>
<div class='mapping-display'>Display</div>
</div>
<el-form-item :prop="'param.valueMapping.mapping.' + index + 'display'" :rules="{ required: true, message: $t('validate.required'), trigger: 'change'}" class="thresholds-from-item">
<el-form-item :prop="'param.valueMapping.mapping.' + index + '.display'" :rules="{ required: true, message: $t('validate.required'), trigger: 'change'}" class="thresholds-from-item">
<el-input v-model="item.display" style="margin-right: 10px" size="small"/>
</el-form-item>
<nezhaColor :color-val="item.color" :single="false" :value-arr="[{name:'bac',value:item.color.bac,key:'bac'},{name:'text',value:item.color.text,key:'text'}]" @colorChange="(val,key)=>{colorChange(val, key, index)}"/>
@@ -426,6 +426,13 @@ export default {
]
}
},
watch: {
selectList (n) {
if (n.length === 1) {
this.chartConfig.param.systemSelect = this.selectList[0].name
}
}
},
methods: {
init () {
this.chartConfig = JSON.parse(JSON.stringify(this.params))
@@ -474,7 +481,7 @@ export default {
this.chartConfig.param.systemGroup = ''
this.chartConfig.param.systemSelect = ''
this.groupList = item.group
this.selectList = item.select
this.selectList = JSON.parse(JSON.stringify(item.select))
}
},
created () {