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

NEZ-2023 feat：chart支持根据variable值显示隐藏

Browse Source
This commit is contained in:
zyh
2022-07-15 15:06:56 +08:00
parent c2191a77e8
commit 3dd3768b18
13 changed files with 666 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

159
nezha-fronted/src/components/common/rightBox/chart/otherChartConfig.vue
View File

@@ -148,6 +148,105 @@
<el-form-item v-if="isText(chartConfig.type)" :rules="{ required: true, message: $t('validate.required'), trigger: 'change' }" prop="param.text">
<rich-text-editor ref="richTextEditor" :edit-data="chartConfig.param.text" @textChange="textChange"></rich-text-editor>
</el-form-item>
<!-- visibility -->
<div>
<div class="form__sub-title">
<span>{{$t('dashboard.panel.showHidden')}}</span>
<el-switch
v-model="chartConfig.param.enable.visibility"
size="small"
@change="change"
></el-switch>
</div>
<transition name="el-zoom-in-top">
<div
v-if="chartConfig.param.enable.visibility"
class="form-items--half-width-group"
>
<!-- Variable name -->
<el-form-item
:label="$t('dashboard.panel.variableName')"
class="form-item--half-width"
prop="param.visibility.varName"
:rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}"
>
<el-select
v-model="chartConfig.param.visibility.varName"
:placeholder="$t('el.select.placeholder')"
popper-class="right-box-select-top prevent-clickoutside"
size="small"
@change="change"
filterable
allow-create
default-first-option
>
<el-option
v-for="item in variables"
:key="item.name"
:label="$t(item.name)"
:value="item.name"
></el-option>
</el-select>
</el-form-item>
<!-- Operator -->
<el-form-item
:label="$t('alert.config.operator')"
class="form-item--half-width"
prop="param.visibility.operator"
:rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}"
>
<el-select
v-model="chartConfig.param.visibility.operator"
:placeholder="$t('el.select.placeholder')"
popper-class="right-box-select-top prevent-clickoutside"
size="small"
@change="change"
>
<el-option
v-for="item in operatorList"
:key="item.value"
:label="$t(item.label)"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
<!-- Value -->
<el-form-item
:label="$t('overall.value')"
class="form-item--half-width"
prop="param.visibility.varValue"
:rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}"
>
<el-input
:placeholder="$t('overall.placeHolder')"
size="small"
v-model="chartConfig.param.visibility.varValue"
@change="change">
</el-input>
</el-form-item>
<!-- Result -->
<el-form-item
:label="$t('dashboard.panel.chartForm.result')"
class="form-item--half-width"
prop="param.visibility.result"
:rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}"
>
<el-select
v-model="chartConfig.param.visibility.result"
:placeholder="$t('el.select.placeholder')"
popper-class="right-box-select-top prevent-clickoutside"
size="small"
@change="change"
>
<el-option label="Show" value="show"></el-option>
<el-option label="Hidden" value="hidden"></el-option>
</el-select>
</el-form-item>
</div>
</transition>
</div>
</el-form>
</div>
</template>
@@ -218,31 +317,81 @@ export default {
this.chartConfig.span = 12
this.chartConfig.param = {
link: this.chartConfig.param.link,
collapse: true
collapse: true,
enable: {
visibility: false
},
showHeader: this.chartConfig.param.showHeader,
visibility: {
varName: '',
operator: '',
varValue: '',
result: ''
}
}
break
case 'text':
this.chartConfig.param = {
link: this.chartConfig.param.link,
text: ''
text: '',
enable: {
visibility: false
},
showHeader: this.chartConfig.param.showHeader,
visibility: {
varName: '',
operator: '',
varValue: '',
result: ''
}
}
break
case 'diagram':
this.chartConfig.param = {
link: this.chartConfig.param.link,
topo: ''
topo: '',
enable: {
visibility: false
},
showHeader: this.chartConfig.param.showHeader,
visibility: {
varName: '',
operator: '',
varValue: '',
result: ''
}
}
break
case 'url':
this.chartConfig.param = {
link: this.chartConfig.param.link,
url: ''
url: '',
enable: {
visibility: false
},
showHeader: this.chartConfig.param.showHeader,
visibility: {
varName: '',
operator: '',
varValue: '',
result: ''
}
}
break
case 'clock':
this.chartConfig.param = {
link: this.chartConfig.param.link,
timeType: 'local'
timeType: 'local',
enable: {
visibility: false
},
showHeader: this.chartConfig.param.showHeader,
visibility: {
varName: '',
operator: '',
varValue: '',
result: ''
}
}
break
}