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

fix： 修改 chartBox参数格式不对的问题

Browse Source
This commit is contained in:
zhangyu
2021-12-16 18:13:47 +08:00
parent eba4a42c0d
commit 03c16297a3
16 changed files with 193 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
nezha-fronted/src/components/chart/chart/chartBar.vue
View File

@@ -116,7 +116,7 @@ export default {
if (s) {
const value = getMetricTypeValue(data.values, chartInfo.param.statistics)
const showValue = chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(value, null, -1, 2)
const mapping = this.selectMapping(value, chartInfo.param.valueMapping)
const mapping = this.selectMapping(value, chartInfo.param.valueMapping, chartInfo.param.enable && this.chartInfo.param.enable.valueMapping)
// eslint-disable-next-line vue/no-mutating-props
mapping && (this.chartOption.color[colorIndex] = mapping.color.bac)
s.data.push({

2
nezha-fronted/src/components/chart/chart/chartPie.vue
View File

@@ -99,7 +99,7 @@ export default {
if (s) {
const value = getMetricTypeValue(data.values, chartInfo.param.statistics)
const showValue = chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(value, null, -1, 2)
const mapping = this.selectMapping(value, chartInfo.param.valueMapping)
const mapping = this.selectMapping(value, chartInfo.param.valueMapping, chartInfo.param.enable && this.chartInfo.param.enable.valueMapping)
// eslint-disable-next-line vue/no-mutating-props
mapping && (this.chartOption.color[colorIndex] = mapping.color.bac)
s.data.push({

8
nezha-fronted/src/components/chart/chart/chartStat.vue
View File

@@ -13,7 +13,7 @@
</span>
<span v-else>{{item.legend}}</span>
</span>
<span v-if="chartInfo.param.text==='value'">
<span v-if="chartInfo.param.text==='value'|| !chartInfo.param.text">
<span v-if="item.mapping" :style="{color:item.mapping.color.text}">
{{handleDisplay(item.mapping.display, { ...item.label, value: item.showValue })}}
</span>
@@ -54,6 +54,7 @@ export default {
initStatData (chartInfo, originalDatas) {
return new Promise(resolve => {
let colorIndex = 0
console.log(originalDatas)
originalDatas.forEach((originalData, expressionIndex) => {
originalData.forEach((data, dataIndex) => {
const stat = {
@@ -71,8 +72,9 @@ export default {
stat.label = data.metric
stat.legend = this.handleLegend(chartInfo, data, expressionIndex, dataIndex, colorIndex)
stat.showValue = chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(stat.value, null, -1, 2)
stat.mapping = this.selectMapping(stat.value, chartInfo.param.valueMapping)
stat.mapping = this.selectMapping(stat.value, chartInfo.param.valueMapping, chartInfo.param.enable && this.chartInfo.param.enable.valueMapping)
this.statData.push(stat)
console.log(this.statData)
colorIndex++
})
})
@@ -97,9 +99,11 @@ export default {
row = i
}
}
if (this.statData.length) {
while (col * row >= this.statData.length) { // 避免出现空白
row--
}
}
row++
if (col === 1 || row === 1) { // 行 或 列有一个为1时 需要调换位置 显示才会好看
const temp = col

6
nezha-fronted/src/components/chart/chart/chartTable.vue
View File

@@ -30,7 +30,7 @@
>
{{showValueMapping(scope.row,col.title)}}
</div>
<div v-else>
<div class="value-mapping-table" v-else>
{{scope.row.display[col.title + 'display']}}
</div>
</template>
@@ -59,7 +59,7 @@ export default {
initChart () {
console.log(this.chartInfo, this.chartData)
this.columns = this.chartInfo.param.columns
this.chartInfo.param.valueMapping.mapping.forEach((item) => {
this.chartInfo.param.valueMapping.forEach((item) => {
if (this.valueMapping[item.column]) {
this.valueMapping[item.column].push(item)
} else {
@@ -128,7 +128,7 @@ export default {
this.columns.forEach((column) => {
if (valueMapping[column.title]) {
obj[column.title + 'mapping'] = ''
if (this.chartInfo.param.valueMapping.show) {
if (chartInfo.param.enable && this.chartInfo.param.enable.valueMapping) {
valueMapping[column.title].forEach(item => {
const rowValue = row.display[column.title + 'display']
if (item.type === 'value') {

2
nezha-fronted/src/components/chart/chart/chartTreemap.vue
View File

@@ -99,7 +99,7 @@ export default {
if (s) {
const value = getMetricTypeValue(data.values, chartInfo.param.statistics)
const showValue = chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(value, null, -1, 2)
const mapping = this.selectMapping(value, chartInfo.param.valueMapping)
const mapping = this.selectMapping(value, chartInfo.param.valueMapping, chartInfo.param.enable && this.chartInfo.param.enable.valueMapping)
// eslint-disable-next-line vue/no-mutating-props
mapping && (this.chartOption.color[colorIndex] = mapping.color.bac)
s.data.push({

2
nezha-fronted/src/components/chart/chartFormat.js
View File

@@ -8,7 +8,7 @@ export default {
str += '\n'
str += params.data.mapping && params.data.mapping.display ? self.handleDisplay(params.data.mapping.display, { ...params.data.labels, value: params.data.showValue }) : params.data.showValue
}
if (this.chartInfo.param.text === 'value') {
if (this.chartInfo.param.text === 'value' || !this.chartInfo.param.text) {
str += params.data.mapping && params.data.mapping.display ? self.handleDisplay(params.data.mapping.display, { ...params.data.labels, value: params.data.showValue }) : params.data.showValue
}
if (this.chartInfo.param.text === 'legend') {

2
nezha-fronted/src/components/chart/chartList.vue
View File

@@ -282,7 +282,7 @@ export default {
this.gridLayoutLoading = true
this.noData = !n || n.length < 1
const tempList = n.map(item => {
const param = item.param
let param = item.param
// try {
// param = JSON.parse(item.param)
// } catch (e) {

10
nezha-fronted/src/components/chart/chartMixin.js
View File

@@ -45,7 +45,7 @@ export default {
if (chartInfo.param.stack) { // 堆叠
s.stack = 'Total'
}
if (chartInfo.param.thresholdShow && !lodash.isEmpty(chartInfo.param.thresholds)) { // 阈值
if (chartInfo.param.enable && chartInfo.param.enable.legend && !lodash.isEmpty(chartInfo.param.thresholds)) { // 阈值
s.markLine = {
symbol: 'circle',
symbolSize: 5
@@ -90,7 +90,7 @@ export default {
legend = chartInfo.elements[expressionIndex].expression
}
// 处理legend别名
let alias = this.handleLegendAlias(legend, chartInfo.elements[expressionIndex].legend)
let alias = chartInfo.datasource === 'system' ? '' : this.handleLegendAlias(legend, chartInfo.elements[expressionIndex].legend)
if (!alias) {
alias = legend
}
@@ -124,10 +124,10 @@ export default {
return aliasExpression
}
},
selectMapping (value, valueMapping) {
selectMapping (value, valueMapping, show) {
let mapping = ''
if (valueMapping.show) {
valueMapping.mapping.forEach(item => {
if (show) {
valueMapping.forEach(item => {
if (item.type === 'value') {
if (value == item.value) {
mapping = item

24
nezha-fronted/src/components/chart/panelChart.vue
View File

@@ -141,17 +141,30 @@ export default {
break
}
case 'system': {
console.log(this.chartInfo)
console.log(this.chartInfo.param.datasource[0])
const q = {
type: this.chartInfo.param.datasource[0].type,
group: this.chartInfo.param.datasource[0].group,
select: [this.chartInfo.param.datasource[0].select],
limit: this.chartInfo.param.datasource[0].limit,
sort: this.chartInfo.param.datasource[0].sort
}
const chartData = []
const params = {
q: '',
q: encodeURIComponent(JSON.stringify(q)),
stat: startTime,
end: endTime,
resultType: 'matrix'
}
this.$get('/stat', params).then(res => {
console.log(res)
})
if (res.code === 200) {
chartData.push(res.data.result)
} else {
chartData.push({ error: res.msg || res.error || res })
}
this.chartData = chartData
this.loading = false
})
break
}
case 'misc': {
@@ -171,8 +184,9 @@ export default {
}
}
if (this.chartInfo.type === 'group') {
this.groupInit()
console.log(this.chartInfo.children)
this.chartData = [...this.chartInfo.children]
this.groupInit()
}
if (this.chartInfo.type === 'carousel') {
this.chartData = ['carousel']

1
nezha-fronted/src/components/common/js/tools.js
View File

@@ -819,6 +819,7 @@ export function getMetricTypeValue (queryItem, type) {
}
case 'last': {
const last = copy.sort((x, y) => { return parseFloat(y[0]) - parseFloat(x[0]) })[0][1]
console.log(last)
return last
}
case 'first': {

6
nezha-fronted/src/components/common/login.vue
View File

@@ -153,9 +153,9 @@ export default {
methods: {
...mapActions(['loginSuccess']),
login () {
if (this.loading || !this.license.valid || !this.license.token) {
return
}
// if (this.loading || !this.license.valid || !this.license.token) {
// return
// }
if (this.validateLogin() && (this.$route.path == '/' || this.$route.path == '/login')) {
this.loading = true
this.$post('/sys/login', this.loginData).then(res => {

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

@@ -333,11 +333,11 @@
<!--legendConfig-->
<div class="form__sub-title">
<span>{{$t('dashboard.panel.chartForm.legendConfig')}}</span>
<el-switch v-model="chartConfig.param.legend.show" size="small" @change="change"></el-switch>
<el-switch v-model="chartConfig.param.enable.legend" size="small" @change="change"></el-switch>
</div>
<transition name="el-zoom-in-top">
<div
v-if="chartConfig.param.legend.show"
v-if="chartConfig.param.enable.legend"
class="form-items--half-width-group"
>
<el-form-item
@@ -502,15 +502,15 @@
<div class="form__sub-title">
<span>{{$t('dashboard.panel.chartForm.valueMapping')}}</span>
<el-switch
v-model="chartConfig.param.valueMapping.show"
v-model="chartConfig.param.enable.valueMapping"
size="small"
@change="change"
></el-switch>
</div>
<transition name="el-zoom-in-top">
<el-row v-if="chartConfig.param.valueMapping.show">
<el-row v-if="chartConfig.param.enable.valueMapping">
<div
v-for="(item,index) in chartConfig.param.valueMapping.mapping"
v-for="(item,index) in chartConfig.param.valueMapping"
:key="index"
>
<div class="chart-title chart-title-config">
@@ -567,7 +567,7 @@
</div>
<el-form-item
v-if="item.type === 'value'"
:prop="'param.valueMapping.mapping.' + index + '.value'"
:prop="'param.valueMapping.' + index + '.value'"
:rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}"
class="thresholds-from-item"
>
@@ -581,7 +581,7 @@
</el-form-item>
<el-form-item
v-if="item.type === 'range'"
:prop="'param.valueMapping.mapping.' + index + '.from'"
:prop="'param.valueMapping.' + index + '.from'"
:rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}"
class="thresholds-from-item"
>
@@ -595,7 +595,7 @@
</el-form-item>
<el-form-item
v-if="item.type === 'range'"
:prop="'param.valueMapping.mapping.' + index + '.to'"
:prop="'param.valueMapping.' + index + '.to'"
:rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}"
class="thresholds-from-item"
>
@@ -609,7 +609,7 @@
</el-form-item>
<el-form-item
v-if="item.type === 'regx'"
:prop="'param.valueMapping.mapping.' + index + '.regx'"
:prop="'param.valueMapping.' + index + '.regx'"
:rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}"
class="thresholds-from-item"
>
@@ -625,13 +625,13 @@
<div v-if="isTable(chartConfig.type)">
<div class='mapping-display'>Columns</div>
</div>
<el-form-item v-if="isTable(chartConfig.type)" :prop="'param.valueMapping.mapping.' + index + '.column'" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}" class="thresholds-from-item">
<el-form-item v-if="isTable(chartConfig.type)" :prop="'param.valueMapping.' + index + '.column'" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}" class="thresholds-from-item">
<el-input v-model="item.column" style="margin-right: 10px" :placeholder="$t('placeholder.chart.column')" size="small" @change="change"/>
</el-form-item>
<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: 'blur'}" class="thresholds-from-item">
<el-form-item :prop="'param.valueMapping.' + 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" :placeholder="$t('placeholder.chart.display')" size="small" @change="change"/>
</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)}"/>
@@ -767,7 +767,12 @@ export default {
nullType: this.chartConfig.param.nullType,
legend: { placement: 'bottom', values: [], show: true },
thresholdShow: true,
thresholds: []
thresholds: [],
enable: {
legend: true,
valueMapping: true,
thresholds: true
},
}
this.$nextTick(() => {
this.chartConfig.param.thresholds.push({ value: undefined, color: randomcolor() })
@@ -785,9 +790,11 @@ export default {
nullType: this.chartConfig.param.nullType,
statistics: 'last',
text: 'value',
valueMapping: {
show: true,
mapping: []
valueMapping: [],
enable: {
legend: true,
valueMapping: true,
thresholds: true
}
}
break
@@ -801,9 +808,11 @@ export default {
columns: [],
tags: [],
indexs: '',
valueMapping: {
show: true,
mapping: []
valueMapping: [],
enable: {
legend: true,
valueMapping: true,
thresholds: true
}
}
break

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

@@ -245,8 +245,12 @@ export default {
param: {
stack: 0,
nullType: 'null',
legend: { placement: 'bottom', values: [], show: true },
thresholdShow: true,
legend: { placement: 'bottom', values: [] },
enable: {
thresholds: true,
legend: true,
valueMapping: true
},
thresholds: [{ value: undefined, color: '#eeeeeeff' }]
}
}
@@ -258,6 +262,11 @@ export default {
height: 4,
unit: 2,
type: 'log',
enable: {
thresholds: true,
legend: true,
valueMapping: true
},
elements: [{ expression: '', legend: '', type: 'expert', id: '', name: 'A' }],
param: {
limit: 100
@@ -273,17 +282,25 @@ export default {
type: 'stat',
param: {
refer: 0,
system: '',
systemGroup: '',
systemSelect: '',
sort: 'desc',
limit: 100,
nullType: 'null',
statistics: 'last',
valueMapping: {
show: true,
mapping: []
enable: {
thresholds: true,
legend: true,
valueMapping: true
},
datasource: [{
name: 'A',
type: 'asset',
systemGroup: '',
systemSelect: '',
group: '',
select: '',
limit: 100,
sort: 'desc'
}
],
valueMapping: []
}
}
delete this.editChart.elements
@@ -294,6 +311,11 @@ export default {
span: 4,
height: 4,
type: 'url',
enable: {
thresholds: true,
legend: true,
valueMapping: true
},
param: {
url: ''
}

34
nezha-fronted/src/components/common/rightBox/chart/publicConfig.js
View File

@@ -314,46 +314,46 @@ export default {
if (this.chartConfig.type === 'table') {
obj.column = ''
}
this.chartConfig.param.valueMapping.mapping.push(obj)
this.chartConfig.param.valueMapping.push(obj)
this.change()
},
copyMapping (index) {
this.chartConfig.param.valueMapping.mapping.push({ ...this.chartConfig.param.valueMapping.mapping[index] })
this.chartConfig.param.valueMapping.push({ ...this.chartConfig.param.valueMapping[index] })
this.change()
},
removeMapping (index) {
this.chartConfig.param.valueMapping.mapping.splice(index, 1)
this.chartConfig.param.valueMapping.splice(index, 1)
this.change()
},
showMapping (index) {
this.chartConfig.param.valueMapping.mapping[index].show = !this.chartConfig.param.valueMapping.mapping[index].show
this.chartConfig.param.valueMapping[index].show = !this.chartConfig.param.valueMapping[index].show
},
mappingItemChange (index, type) {
const mapping = this.chartConfig.param.valueMapping.mapping[index]
const mapping = this.chartConfig.param.valueMapping[index]
if (mapping.type === 'value') {
this.chartConfig.param.valueMapping.mapping[index] = {
this.chartConfig.param.valueMapping[index] = {
...mapping,
value: undefined
}
}
this.$refs.chartForm.clearValidate('param.valueMapping.mapping.' + index + 'value')
this.$refs.chartForm.clearValidate('param.valueMapping.' + index + 'value')
if (mapping.type === 'range') {
this.chartConfig.param.valueMapping.mapping[index] = {
this.chartConfig.param.valueMapping[index] = {
...mapping,
from: undefined,
to: undefined
}
this.$refs.chartForm.clearValidate('param.valueMapping.mapping.' + index + 'from')
this.$refs.chartForm.clearValidate('param.valueMapping.mapping.' + index + 'to')
this.$refs.chartForm.clearValidate('param.valueMapping.' + index + 'from')
this.$refs.chartForm.clearValidate('param.valueMapping.' + index + 'to')
}
if (mapping.type === 'regx') {
this.chartConfig.param.valueMapping.mapping[index] = {
this.chartConfig.param.valueMapping[index] = {
...mapping,
regx: ''
}
this.$refs.chartForm.clearValidate('param.valueMapping.mapping.' + index + 'regx')
this.$refs.chartForm.clearValidate('param.valueMapping.' + index + 'regx')
}
this.$set(this.chartConfig.param.valueMapping.mapping, index, this.chartConfig.param.valueMapping.mapping[index])
this.$set(this.chartConfig.param.valueMapping, index, this.chartConfig.param.valueMapping[index])
this.change()
},
colorChange (val, key, index) {
@@ -361,12 +361,12 @@ export default {
this.chartConfig.param.thresholds[index].color = val
}
if (key === 'bac') {
this.chartConfig.param.valueMapping.mapping[index].color.bac = val
this.$set(this.chartConfig.param.valueMapping.mapping, index, this.chartConfig.param.valueMapping.mapping[index])
this.chartConfig.param.valueMapping[index].color.bac = val
this.$set(this.chartConfig.param.valueMapping, index, this.chartConfig.param.valueMapping[index])
}
if (key === 'text') {
this.chartConfig.param.valueMapping.mapping[index].color.text = val
this.$set(this.chartConfig.param.valueMapping.mapping, index, this.chartConfig.param.valueMapping.mapping[index])
this.chartConfig.param.valueMapping[index].color.text = val
this.$set(this.chartConfig.param.valueMapping, index, this.chartConfig.param.valueMapping[index])
}
this.change()
},

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

@@ -7,16 +7,17 @@
label-position= "top"
label-width="120px"
>
<div class="system-chart-config" v-loading="loading">
<div class="system-chart-config" v-loading="loading" v-for="(item, index) in chartConfig.param.datasource " :key="index">
<div class="system-chart-config-left">
<ul>
<li
v-for="(item,index) in systemData"
:key="index"
v-for="(system,index1) in systemData"
:key="index1"
class="system-chart-item"
:class="item.name === chartConfig.param.system ? 'is-select' : ''"
@click="changeSystem(item)"
>{{item.name}}</li>
:class="item.name === system.system ? 'is-select' : ''"
@click="changeSystem(system, index)"
>{{system.name}}</li>
</ul>
</div>
<div class="system-chart-config-right">
@@ -26,8 +27,8 @@
class="form-item--half-width"
prop="param.systemGroup"
>
<el-select size="small" v-model="chartConfig.param.systemGroup" multiple collapse-tags :placeholder="$t('el.select.placeholder')" @change="systemGroupChange">
<el-option v-for="item in groupList" :value="item.name" :key="item.name" :label="item.name"/>
<el-select size="small" v-model="item.systemGroup" multiple collapse-tags :placeholder="$t('el.select.placeholder')" @change="systemGroupChange(index)">
<el-option v-for="group in groupList" :value="group.name" :key="group.name" :label="group.name"/>
</el-select>
</el-form-item>
<el-form-item
@@ -36,8 +37,8 @@
class="form-item--half-width"
prop="param.systemSelect"
>
<el-select size="small" v-model="chartConfig.param.systemSelect" :placeholder="$t('el.select.placeholder')" @change="systemSelectChange">
<el-option v-for="item in selectList" :value="item.name" :key="item.name" :label="item.name"/>
<el-select size="small" v-model="item.systemSelect" :placeholder="$t('el.select.placeholder')" @change="systemSelectChange(index)">
<el-option v-for="selectItem in selectList" :value="selectItem.name" :key="selectItem.name" :label="selectItem.name"/>
</el-select>
</el-form-item>
</div>
@@ -49,7 +50,7 @@
>
<el-select
id="chart-box-height"
v-model="chartConfig.param.sort"
v-model="item.sort"
placeholder=""
popper-class="right-box-select-top prevent-clickoutside"
size="small"
@@ -67,7 +68,7 @@
class="form-item--half-width"
prop="param.limit"
>
<el-input-number :controls="false" v-model.number="chartConfig.param.limit" :placeholder="$t('placeholder.system.limit')" size="small" @change="change"/>
<el-input-number :controls="false" v-model.number="item.limit" :placeholder="$t('placeholder.system.limit')" size="small" @change="change"/>
</el-form-item>
</div>
</div>
@@ -261,15 +262,15 @@
<div class="form__sub-title">
<span>{{$t('dashboard.panel.chartForm.valueMapping')}}</span>
<el-switch
v-model="chartConfig.param.valueMapping.show"
v-model="chartConfig.param.enable.valueMapping"
size="small"
@change="change"
></el-switch>
</div>
<transition name="el-zoom-in-top">
<el-row v-if="chartConfig.param.valueMapping.show">
<el-row v-if="chartConfig.param.enable.valueMapping">
<div
v-for="(item,index) in chartConfig.param.valueMapping.mapping"
v-for="(item,index) in chartConfig.param.valueMapping"
:key="index"
>
<div class="chart-title chart-title-config">
@@ -326,7 +327,7 @@
</div>
<el-form-item
v-if="item.type === 'value'"
:prop="'param.valueMapping.mapping.' + index + '.value'"
:prop="'param.valueMapping.' + index + '.value'"
:rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}"
class="thresholds-from-item"
>
@@ -340,7 +341,7 @@
</el-form-item>
<el-form-item
v-if="item.type === 'range'"
:prop="'param.valueMapping.mapping.' + index + '.from'"
:prop="'param.valueMapping.' + index + '.from'"
:rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}"
class="thresholds-from-item"
>
@@ -354,7 +355,7 @@
</el-form-item>
<el-form-item
v-if="item.type === 'range'"
:prop="'param.valueMapping.mapping.' + index + '.to'"
:prop="'param.valueMapping.' + index + '.to'"
:rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}"
class="thresholds-from-item"
>
@@ -368,7 +369,7 @@
</el-form-item>
<el-form-item
v-if="item.type === 'regx'"
:prop="'param.valueMapping.mapping.' + index + '.regx'"
:prop="'param.valueMapping.' + index + '.regx'"
:rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}"
class="thresholds-from-item"
>
@@ -384,13 +385,13 @@
<div v-if="isTable(chartConfig.type)">
<div class='mapping-display'>Columns</div>
</div>
<el-form-item v-if="isTable(chartConfig.type)" :prop="'param.valueMapping.mapping.' + index + '.column'" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}" class="thresholds-from-item">
<el-form-item v-if="isTable(chartConfig.type)" :prop="'param.valueMapping.' + index + '.column'" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}" class="thresholds-from-item">
<el-input v-model="item.column" style="margin-right: 10px" :placeholder="$t('placeholder.chart.column')" size="small" @change="change"/>
</el-form-item>
<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: 'blur'}" class="thresholds-from-item">
<el-form-item :prop="'param.valueMapping.' + 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" :placeholder="$t('placeholder.chart.display')" size="small" @change="change"/>
</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)}"/>
@@ -458,8 +459,9 @@ export default {
},
watch: {
selectList (n) {
if (n.length === 1 && !this.chartConfig.param.systemSelect) {
this.chartConfig.param.systemSelect = this.selectList[0].name
if (n.length === 1 && !this.chartConfig.param.datasource[0].systemSelect) {
this.chartConfig.param.datasource[0].systemSelect = this.selectList[0].name
this.systemSelectChange(0)
}
}
},
@@ -476,11 +478,11 @@ export default {
this.systemData = JSON.parse(res.data.paramValue)
if (this.systemData.length) {
if (!this.chartConfig.param.system) {
this.chartConfig.param.system = this.systemData[0].name
this.chartConfig.param.datasource[0].type = this.systemData[0].name
this.groupList = this.systemData[0].group
this.selectList = this.systemData[0].select
} else {
const system = this.systemData.find(item => item.name === this.chartConfig.param.system)
const system = this.systemData.find(item => item.name === this.chartConfig.param.datasource[0].type)
this.chartConfig.param.system = system.name
this.groupList = system.group
this.selectList = system.select
@@ -504,36 +506,53 @@ export default {
}
this.chartConfig.param = {
refer: 1,
system: '',
systemGroup: '',
systemSelect: '',
sort: 'desc',
limit: 100,
nullType: 'null',
statistics: 'last',
valueMapping: {
show: true,
mapping: []
valueMapping: [],
enable: {
legend: true,
valueMapping: true,
thresholds: true
},
datasource: [{
name: 'A',
type: 'asset',
systemGroup: '',
systemSelect: '',
group: '',
select: '',
limit: 100,
sort: 'desc'
}
]
}
break
case 'table':
this.chartConfig.param = {
refer: 1,
system: '',
systemGroup: '',
systemSelect: '',
indexs: '',
tags: [],
sort: 'desc',
limit: 100,
nullType: 'null',
statistics: 'last',
columns: [],
valueMapping: {
show: true,
mapping: []
valueMapping: [],
enable: {
legend: true,
valueMapping: true,
thresholds: true
},
datasource: [{
name: 'A',
type: 'asset',
systemGroup: '',
systemSelect: '',
group: '',
select: '',
limit: 100,
sort: 'desc'
}
]
}
break
}
@@ -541,21 +560,23 @@ export default {
this.change()
},
changeSystem (item) {
this.chartConfig.param.system = item.name
this.chartConfig.param.systemGroup = ''
this.chartConfig.param.systemSelect = ''
this.chartConfig.param.datasource[0].type = item.name
this.chartConfig.param.datasource[0].systemGroup = ''
this.chartConfig.param.datasource[0].systemSelect = ''
this.chartConfig.param.datasource[0].group = ''
this.chartConfig.param.datasource[0].select = ''
this.groupList = item.group
this.selectList = JSON.parse(JSON.stringify(item.select))
},
systemGroupChange () {
this.chartConfig.param.group = this.chartConfig.param.systemGroup.map(item => {
systemGroupChange (index) {
this.chartConfig.param.datasource[index].group = this.chartConfig.param.datasource[index].systemGroup.map(item => {
const obj = this.groupList.find(group => group.name === item)
return obj
})
this.change()
},
systemSelectChange () {
this.chartConfig.param.select = this.selectList.find(item => item.name === this.chartConfig.param.systemSelect)
systemSelectChange (index) {
this.chartConfig.param.datasource[index].select = this.selectList.find(item => item.name === this.chartConfig.param.datasource[index].systemSelect)
this.change()
}
},

5
nezha-fronted/src/components/page/dashboard/panel.vue
View File

@@ -202,6 +202,11 @@ export default {
stack: 0,
nullType: 'null',
legend: { placement: 'bottom', values: [], show: true },
enable: {
legend: true,
valueMapping: true,
thresholds: true
},
thresholdShow: true,
thresholds: [{ value: undefined, color: randomcolor() }]
},