NEZ-2023 feat：chart支持根据variable值显示隐藏
This commit is contained in:
zyh
@@ -223,6 +223,10 @@
|
||||
}
|
||||
}
|
||||
.chart__canvas {
|
||||
div{
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
}
|
||||
.nz-chart__tooltip {
|
||||
.row__label,.row__value {
|
||||
color: $--color-text-regular;
|
||||
@@ -586,3 +590,9 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.opacityItem{
|
||||
opacity: 0;
|
||||
}
|
||||
.hiddenItem{
|
||||
box-shadow: $--chart-shadow;
|
||||
}
|
||||
@@ -239,6 +239,7 @@ $--chart-border-color: $--border-color-light;
|
||||
/* 13.panel */
|
||||
$--chart-title-hover-background-color: #323238;
|
||||
$--chart-box-border-color: $--border-color-light;
|
||||
$--chart-shadow: -1px 0 8px -3px rgba(0,0,0,0.8);
|
||||
|
||||
/* 14.popover */
|
||||
$--popover-background-color: $--background-color-empty;
|
||||
|
||||
@@ -235,6 +235,7 @@ $--chart-border-color: $--color-text-label;
|
||||
/* 13.panel */
|
||||
$--chart-title-hover-background-color: $--background-color-1;
|
||||
$--chart-box-border-color: $--border-color-light;
|
||||
$--chart-shadow: -1px 0 8px -3px #ccc;
|
||||
|
||||
/* 14.popover */
|
||||
$--popover-background-color: $--color-text-label;
|
||||
|
||||
@@ -31,7 +31,8 @@
|
||||
:isGroup="isGroup"
|
||||
:class="{
|
||||
'group-hide-header':item.type === 'group' && item.param.collapse,
|
||||
'opacityItem': item.static
|
||||
'opacityItem': item.static,
|
||||
'hiddenItem': showHidden[item.id]==='hidden'
|
||||
}"
|
||||
:ref="'grid-item' + item.id"
|
||||
:isResizable = "item.type === 'group' ? false: null"
|
||||
@@ -44,6 +45,7 @@
|
||||
@container-resized="containerResizedEvent"
|
||||
>
|
||||
<panel-chart
|
||||
v-show="showHidden[item.id]!=='hidden'"
|
||||
:ref="'chart' + item.id"
|
||||
@edit-chart="$emit('edit-chart', item)"
|
||||
:chart-info="item"
|
||||
@@ -55,6 +57,7 @@
|
||||
:chart-detail-info="chartDetailInfo"
|
||||
@refreshPanel="refreshPanel"
|
||||
@showFullscreen="showFullscreen"
|
||||
:showHidden="showHidden"
|
||||
></panel-chart>
|
||||
</grid-item>
|
||||
</grid-layout>
|
||||
@@ -148,6 +151,9 @@ export default {
|
||||
},
|
||||
panelLock () {
|
||||
return this.$store.getters.getPanelLock
|
||||
},
|
||||
variablesArr () {
|
||||
return this.$store.state.panel.variablesArr
|
||||
}
|
||||
},
|
||||
data () {
|
||||
@@ -170,7 +176,9 @@ export default {
|
||||
chartInfo: {}
|
||||
},
|
||||
scrollTop: 0,
|
||||
scrollTopTimer: null
|
||||
scrollTopTimer: null,
|
||||
// 变量比较结果 图表是否显示/隐藏
|
||||
showHidden: {}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
@@ -431,6 +439,76 @@ export default {
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
// 比较变量 图表是否显示/隐藏
|
||||
compareVariables () {
|
||||
if (!this.panelLock) {
|
||||
return false
|
||||
}
|
||||
const isRegExp = (v) => {
|
||||
let isReg
|
||||
try {
|
||||
isReg = eval(v) instanceof RegExp
|
||||
} catch (e) {
|
||||
isReg = false
|
||||
}
|
||||
return isReg
|
||||
}
|
||||
this.showHidden = {}
|
||||
this.dataList.forEach(item => {
|
||||
const visibility = this.$loadsh.get(item, 'param.enable.visibility', false)
|
||||
const varName = this.$loadsh.get(item, 'param.visibility.varName')
|
||||
const operator = this.$loadsh.get(item, 'param.visibility.operator')
|
||||
const varValue = this.$loadsh.get(item, 'param.visibility.varValue')
|
||||
const result = this.$loadsh.get(item, 'param.visibility.result')
|
||||
// 相反结果 若result为show则contraryResult为hidden
|
||||
const contraryResult = result === 'show' ? 'hidden' : 'show'
|
||||
// 是否启用显示隐藏功能
|
||||
if (visibility) {
|
||||
this.variablesArr.forEach(subItem => {
|
||||
// 判断当前图表的变量
|
||||
if (subItem.name === varName) {
|
||||
let flag = false
|
||||
switch (operator) {
|
||||
case 'equal': {
|
||||
flag = subItem.checked.some(value => {
|
||||
return value == varValue
|
||||
})
|
||||
break
|
||||
}
|
||||
case 'notEqual': {
|
||||
flag = subItem.checked.some(value => {
|
||||
return value != varValue
|
||||
})
|
||||
// 判断选中的值是否为空
|
||||
if (!subItem.checked.length) {
|
||||
flag = true
|
||||
}
|
||||
break
|
||||
}
|
||||
case 'match': {
|
||||
flag = subItem.checked.some(value => {
|
||||
const reg = isRegExp(varValue) ? eval(varValue) : new RegExp(varValue)
|
||||
return value.match(eval(reg))
|
||||
})
|
||||
break
|
||||
}
|
||||
case 'contains': {
|
||||
flag = subItem.checked.some(value => {
|
||||
return value.includes(varValue)
|
||||
})
|
||||
break
|
||||
}
|
||||
}
|
||||
if (flag === true) {
|
||||
this.showHidden[item.id] = result
|
||||
} else {
|
||||
this.showHidden[item.id] = contraryResult
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
created () {
|
||||
@@ -456,12 +534,29 @@ export default {
|
||||
// 监听查看模式变化
|
||||
'$store.state.panel.mode': {
|
||||
immediate: true,
|
||||
handler (val) {
|
||||
handler () {
|
||||
setTimeout(() => {
|
||||
this.resize()
|
||||
})
|
||||
}
|
||||
},
|
||||
// 监听变量数组
|
||||
variablesArr: {
|
||||
handler () {
|
||||
// 比较变量 图表是否显示/隐藏
|
||||
this.compareVariables()
|
||||
}
|
||||
},
|
||||
panelLock: {
|
||||
handler (flag) {
|
||||
if (!flag) {
|
||||
this.showHidden = {}
|
||||
} else {
|
||||
// 比较变量 图表是否显示/隐藏
|
||||
this.compareVariables()
|
||||
}
|
||||
}
|
||||
},
|
||||
dataList: {
|
||||
immediate: true,
|
||||
deep: true,
|
||||
@@ -526,6 +621,8 @@ export default {
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
this.copyDataList = JSON.parse(JSON.stringify(tempList))
|
||||
// 比较变量 图表是否显示/隐藏
|
||||
this.compareVariables()
|
||||
tempList = null
|
||||
setTimeout(() => {
|
||||
this.gridLayoutShow = true
|
||||
|
||||
@@ -101,6 +101,10 @@ export default {
|
||||
variablesInit: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 变量比较结果 图表是否显示/隐藏
|
||||
showHidden: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
data () {
|
||||
@@ -152,6 +156,10 @@ export default {
|
||||
},
|
||||
// 参数 isRefresh 标识是否是刷新操作
|
||||
getChartData (isRefresh, params) { // 获取chart的数据前的准备 主要用于处理时间参数
|
||||
// 如果图表被隐藏了 则不请求数据
|
||||
if (this.showHidden && this.showHidden[this.chartInfo.id] === 'hidden') {
|
||||
return
|
||||
}
|
||||
if (!this.variablesInit) { // 变量未加载完成 不请求数据
|
||||
return
|
||||
}
|
||||
@@ -757,6 +765,16 @@ export default {
|
||||
this.chartInfo.loaded && this.getChartData(true)
|
||||
}
|
||||
}
|
||||
},
|
||||
// 监听图表显示 重新请求数据渲染图表
|
||||
showHidden: {
|
||||
handler (n, o) {
|
||||
const newVal = n[this.chartInfo.id]
|
||||
const oldVal = o[this.chartInfo.id]
|
||||
if ((newVal === 'show' || newVal === undefined) && oldVal === 'hidden') {
|
||||
this.getChartData(true)
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
|
||||
@@ -50,7 +50,6 @@ export default {
|
||||
}, 1000)
|
||||
},
|
||||
messageShow (msg, route, params, showNext = false, nextText = '', emit) {
|
||||
// 如果存在弹框 则先清理掉
|
||||
this.messageParams.route = route
|
||||
this.messageParams.params = params
|
||||
this.messageParams.emit = emit
|
||||
|
||||
@@ -69,7 +69,6 @@ export default {
|
||||
},
|
||||
watch: {
|
||||
labelArrs: {
|
||||
immediate: true,
|
||||
handler (n) {
|
||||
this.labelArr = this.labelArrs.map(item => {
|
||||
return {
|
||||
|
||||
@@ -715,6 +715,105 @@
|
||||
</el-row>
|
||||
</transition>
|
||||
</div>
|
||||
|
||||
<!-- 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>
|
||||
@@ -850,7 +949,15 @@ export default {
|
||||
enable: {
|
||||
legend: true,
|
||||
valueMapping: false,
|
||||
thresholds: false
|
||||
thresholds: false,
|
||||
visibility: false
|
||||
},
|
||||
showHeader: this.chartConfig.param.showHeader,
|
||||
visibility: {
|
||||
varName: '',
|
||||
operator: '',
|
||||
varValue: '',
|
||||
result: ''
|
||||
}
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
@@ -874,7 +981,15 @@ export default {
|
||||
enable: {
|
||||
legend: true,
|
||||
valueMapping: false,
|
||||
thresholds: false
|
||||
thresholds: false,
|
||||
visibility: false
|
||||
},
|
||||
showHeader: this.chartConfig.param.showHeader,
|
||||
visibility: {
|
||||
varName: '',
|
||||
operator: '',
|
||||
varValue: '',
|
||||
result: ''
|
||||
}
|
||||
}
|
||||
break
|
||||
@@ -896,7 +1011,15 @@ export default {
|
||||
enable: {
|
||||
legend: true,
|
||||
valueMapping: false,
|
||||
thresholds: false
|
||||
thresholds: false,
|
||||
visibility: false
|
||||
},
|
||||
showHeader: this.chartConfig.param.showHeader,
|
||||
visibility: {
|
||||
varName: '',
|
||||
operator: '',
|
||||
varValue: '',
|
||||
result: ''
|
||||
}
|
||||
}
|
||||
break
|
||||
@@ -915,7 +1038,15 @@ export default {
|
||||
enable: {
|
||||
legend: true,
|
||||
valueMapping: false,
|
||||
thresholds: false
|
||||
thresholds: false,
|
||||
visibility: false
|
||||
},
|
||||
showHeader: this.chartConfig.param.showHeader,
|
||||
visibility: {
|
||||
varName: '',
|
||||
operator: '',
|
||||
varValue: '',
|
||||
result: ''
|
||||
}
|
||||
}
|
||||
break
|
||||
@@ -925,7 +1056,20 @@ export default {
|
||||
}
|
||||
this.chartConfig.param = {
|
||||
link: this.chartConfig.param.link,
|
||||
limit: 100
|
||||
limit: 100,
|
||||
enable: {
|
||||
legend: true,
|
||||
valueMapping: false,
|
||||
thresholds: false,
|
||||
visibility: false
|
||||
},
|
||||
showHeader: this.chartConfig.param.showHeader,
|
||||
visibility: {
|
||||
varName: '',
|
||||
operator: '',
|
||||
varValue: '',
|
||||
result: ''
|
||||
}
|
||||
}
|
||||
break
|
||||
}
|
||||
|
||||
@@ -80,16 +80,16 @@
|
||||
</div>
|
||||
<el-tabs v-model="editChart.datasource" @tab-click="datasourceChange" type="card">
|
||||
<el-tab-pane :label="$t('overall.metrics')" name="metrics">
|
||||
<chart-config ref="childrenFrommetrics" :type="'metrics'" v-if="editChart.datasource == 'metrics'" :params.sync="editChart" @change="editChartChange"/>
|
||||
<chart-config :variables="variables" ref="childrenFrommetrics" :type="'metrics'" v-if="editChart.datasource == 'metrics'" :params.sync="editChart" @change="editChartChange"/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="$t('overall.logs')" name="logs">
|
||||
<chart-config ref="childrenFromlogs" :type="'log'" v-if="editChart.datasource == 'logs'" :params.sync="editChart" @change="editChartChange"/>
|
||||
<chart-config :variables="variables" ref="childrenFromlogs" :type="'log'" v-if="editChart.datasource == 'logs'" :params.sync="editChart" @change="editChartChange"/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="$t('overall.system')" name="system">
|
||||
<system-chart-config ref="childrenFromsystem" v-if="editChart.datasource == 'system'" :params.sync="editChart" @change="editChartChange"/>
|
||||
<system-chart-config :variables="variables" ref="childrenFromsystem" v-if="editChart.datasource == 'system'" :params.sync="editChart" @change="editChartChange"/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="$t('overall.misc')" name="misc">
|
||||
<other-chart-config ref="childrenFrommisc" v-if="editChart.datasource == 'misc'" :params.sync="editChart" @change="editChartChange"/>
|
||||
<other-chart-config :variables="variables" ref="childrenFrommisc" v-if="editChart.datasource == 'misc'" :params.sync="editChart" @change="editChartChange"/>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-form>
|
||||
@@ -162,6 +162,12 @@ export default {
|
||||
fromEndpoint: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
variables: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
}
|
||||
},
|
||||
mixins: [rz, editRigthBox],
|
||||
@@ -370,10 +376,17 @@ export default {
|
||||
enable: {
|
||||
thresholds: false,
|
||||
legend: true,
|
||||
valueMapping: false
|
||||
valueMapping: false,
|
||||
visibility: false
|
||||
},
|
||||
thresholds: [{ value: undefined, color: '#eeeeeeff' }],
|
||||
showHeader: this.editChart.param.showHeader
|
||||
showHeader: this.editChart.param.showHeader,
|
||||
visibility: {
|
||||
varName: '',
|
||||
operator: '',
|
||||
varValue: '',
|
||||
result: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -384,15 +397,22 @@ export default {
|
||||
height: 4,
|
||||
unit: 2,
|
||||
type: 'log',
|
||||
enable: {
|
||||
thresholds: false,
|
||||
legend: true,
|
||||
valueMapping: false
|
||||
},
|
||||
elements: [{ expression: '', legend: '', type: 'expert', id: '', name: 'A', state: 1 }],
|
||||
param: {
|
||||
enable: {
|
||||
thresholds: false,
|
||||
legend: true,
|
||||
valueMapping: false,
|
||||
visibility: false
|
||||
},
|
||||
limit: 100,
|
||||
showHeader: this.editChart.param.showHeader
|
||||
showHeader: this.editChart.param.showHeader,
|
||||
visibility: {
|
||||
varName: '',
|
||||
operator: '',
|
||||
varValue: '',
|
||||
result: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -413,7 +433,8 @@ export default {
|
||||
enable: {
|
||||
thresholds: false,
|
||||
legend: true,
|
||||
valueMapping: false
|
||||
valueMapping: false,
|
||||
visibility: false
|
||||
},
|
||||
datasource: [{
|
||||
name: 'System',
|
||||
@@ -428,7 +449,13 @@ export default {
|
||||
}
|
||||
],
|
||||
valueMapping: [],
|
||||
showHeader: this.editChart.param.showHeader
|
||||
showHeader: this.editChart.param.showHeader,
|
||||
visibility: {
|
||||
varName: '',
|
||||
operator: '',
|
||||
varValue: '',
|
||||
result: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
delete this.editChart.elements
|
||||
@@ -439,14 +466,21 @@ export default {
|
||||
span: 4,
|
||||
height: 4,
|
||||
type: 'url',
|
||||
enable: {
|
||||
thresholds: false,
|
||||
legend: true,
|
||||
valueMapping: false
|
||||
},
|
||||
param: {
|
||||
enable: {
|
||||
thresholds: false,
|
||||
legend: true,
|
||||
valueMapping: false,
|
||||
visibility: false
|
||||
},
|
||||
url: '',
|
||||
showHeader: this.editChart.param.showHeader
|
||||
showHeader: this.editChart.param.showHeader,
|
||||
visibility: {
|
||||
varName: '',
|
||||
operator: '',
|
||||
varValue: '',
|
||||
result: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
delete this.editChart.elements
|
||||
@@ -524,7 +558,16 @@ export default {
|
||||
obj.param.enable = {
|
||||
thresholds: false,
|
||||
legend: false,
|
||||
valueMapping: false
|
||||
valueMapping: false,
|
||||
visibility: false
|
||||
}
|
||||
}
|
||||
if (!obj.param.visibility) {
|
||||
obj.param.visibility = {
|
||||
varName: '',
|
||||
operator: '',
|
||||
varValue: '',
|
||||
result: ''
|
||||
}
|
||||
}
|
||||
// this.editChart.varType = 1
|
||||
|
||||
@@ -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
|
||||
}
|
||||
|
||||
@@ -12,7 +12,13 @@ const rz = {
|
||||
}
|
||||
export default {
|
||||
props: {
|
||||
params: {}
|
||||
params: {},
|
||||
variables: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
@@ -34,6 +40,21 @@ export default {
|
||||
value: 'zero'
|
||||
}],
|
||||
statisticsList: this.$CONSTANTS.statisticsList,
|
||||
operatorList: [
|
||||
{
|
||||
label: 'equal',
|
||||
value: 'equal'
|
||||
}, {
|
||||
label: 'not equal',
|
||||
value: 'notEqual'
|
||||
}, {
|
||||
label: 'match',
|
||||
value: 'match'
|
||||
}, {
|
||||
label: 'contains',
|
||||
value: 'contains'
|
||||
}
|
||||
],
|
||||
legendPositionList: [
|
||||
{
|
||||
label: this.$t('overall.bottom'),
|
||||
@@ -611,5 +632,13 @@ export default {
|
||||
this.chartConfig.param[key][index].error = false
|
||||
this.$forceUpdate()
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
params: {
|
||||
deep: true,
|
||||
handler (n) {
|
||||
this.chartConfig.param.showHeader = n.param.showHeader
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -670,6 +670,105 @@
|
||||
</el-row>
|
||||
</transition>
|
||||
</div>
|
||||
|
||||
<!-- 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>
|
||||
@@ -801,9 +900,17 @@ export default {
|
||||
enable: {
|
||||
legend: true,
|
||||
valueMapping: false,
|
||||
thresholds: false
|
||||
thresholds: false,
|
||||
visibility: false
|
||||
},
|
||||
datasource: [...this.chartConfig.param.datasource]
|
||||
datasource: [...this.chartConfig.param.datasource],
|
||||
showHeader: this.chartConfig.param.showHeader,
|
||||
visibility: {
|
||||
varName: '',
|
||||
operator: '',
|
||||
varValue: '',
|
||||
result: ''
|
||||
}
|
||||
}
|
||||
break
|
||||
case 'bar':
|
||||
@@ -824,9 +931,17 @@ export default {
|
||||
enable: {
|
||||
legend: true,
|
||||
valueMapping: false,
|
||||
thresholds: false
|
||||
thresholds: false,
|
||||
visibility: false
|
||||
},
|
||||
datasource: [...this.chartConfig.param.datasource]
|
||||
datasource: [...this.chartConfig.param.datasource],
|
||||
showHeader: this.chartConfig.param.showHeader,
|
||||
visibility: {
|
||||
varName: '',
|
||||
operator: '',
|
||||
varValue: '',
|
||||
result: ''
|
||||
}
|
||||
}
|
||||
break
|
||||
case 'table':
|
||||
@@ -843,9 +958,17 @@ export default {
|
||||
enable: {
|
||||
legend: true,
|
||||
valueMapping: false,
|
||||
thresholds: false
|
||||
thresholds: false,
|
||||
visibility: false
|
||||
},
|
||||
datasource: [...this.chartConfig.param.datasource]
|
||||
datasource: [...this.chartConfig.param.datasource],
|
||||
showHeader: this.chartConfig.param.showHeader,
|
||||
visibility: {
|
||||
varName: '',
|
||||
operator: '',
|
||||
varValue: '',
|
||||
result: ''
|
||||
}
|
||||
}
|
||||
break
|
||||
}
|
||||
|
||||
@@ -127,6 +127,7 @@
|
||||
:from="fromRoute.panel"
|
||||
:panel-data="panelData"
|
||||
:show-panel="showPanel"
|
||||
:variables="variables"
|
||||
@close="closeChartBox"
|
||||
@reload="panelReload"
|
||||
@reloadOnlyPanel="panelReloadOnlyPanel"
|
||||
@@ -225,11 +226,18 @@ export default {
|
||||
enable: {
|
||||
legend: true,
|
||||
valueMapping: false,
|
||||
thresholds: false
|
||||
thresholds: false,
|
||||
visibility: false
|
||||
},
|
||||
thresholdShow: true,
|
||||
thresholds: [{ value: undefined, color: randomcolor() }],
|
||||
showHeader: 1
|
||||
showHeader: 1,
|
||||
visibility: {
|
||||
varName: '',
|
||||
operator: '',
|
||||
varValue: '',
|
||||
result: ''
|
||||
}
|
||||
},
|
||||
elements: [{ expression: '', legend: '', type: 'expert', id: '', name: 'A', state: 1 }],
|
||||
panel: '',
|
||||
|
||||
Reference in New Issue
Block a user