fix: 修改新增chart 参数的相关问题

This commit is contained in:
zhangyu
2021-12-06 11:40:06 +08:00
parent 1383969fb2
commit 39c94f5dec
7 changed files with 58 additions and 34 deletions

View File

@@ -62,6 +62,7 @@ export default {
})
this.$nextTick(() => {
this.$emit('after-init')
this.$emit('textChange')
})
}
},

View File

@@ -665,8 +665,8 @@ export default {
name: this.$t('dashboard.panel.chartForm.typeVal.point.label')
},
{
id: 'singleStat',
name: this.$t('dashboard.panel.chartForm.typeVal.singleStat.label')
id: 'stat',
name: this.$t('dashboard.panel.chartForm.typeVal.stat.label')
},
{
id: 'bar',
@@ -731,7 +731,7 @@ export default {
this.chartConfig.param.thresholds.push({ value: undefined, color: '#eeeeeeff' })
})
break
case 'singleStat':
case 'stat':
case 'bar':
case 'treemap':
case 'pie':

View File

@@ -58,17 +58,17 @@
<span>{{$t('dashboard.panel.chartForm.dataConfig')}}</span>
</div>
<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 label="Metrics" name="metrics">
<chart-config ref="childrenFrommetrics" :type="'metrics'" v-if="editChart.datasource == 'metrics'" :params.sync="editChart" @change="editChartChange"/>
</el-tab-pane>
<el-tab-pane label="Logs" name="2">
<chart-config ref="childrenFrom2" :type="'log'" v-if="editChart.datasource == 2" :params.sync="editChart" @change="editChartChange"/>
<el-tab-pane label="Logs" name="logs">
<chart-config ref="childrenFromlogs" :type="'log'" v-if="editChart.datasource == 'logs'" :params.sync="editChart" @change="editChartChange"/>
</el-tab-pane>
<el-tab-pane label="System" name="3">
<system-chart-config ref="childrenFrom3" v-if="editChart.datasource == 3" :params.sync="editChart"/>
<el-tab-pane label="System" name="system">
<system-chart-config ref="childrenFromsystem" v-if="editChart.datasource == 'system'" :params.sync="editChart" @change="editChartChange"/>
</el-tab-pane>
<el-tab-pane label="Misc" name="4">
<other-chart-config ref="childrenFrom4" v-if="editChart.datasource == 4" :params.sync="editChart"/>
<el-tab-pane label="Misc" name="misc">
<other-chart-config ref="childrenFrommisc" v-if="editChart.datasource == 'misc'" :params.sync="editChart" @change="editChartChange"/>
</el-tab-pane>
</el-tabs>
</el-form>
@@ -161,10 +161,14 @@ export default {
const arr = [this.$refs.chartForm.validate()]
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 => {
const params = JSON.parse(JSON.stringify(this.editChart))
delete params.panel
if (!params.groupId) {
params.groupId = -1
}
if (params.id) { // 修改
this.$put('visual/panel/chart', params).then(response => {
if (response.code === 200) {
this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
this.esc(true)
@@ -173,7 +177,7 @@ export default {
}
})
} else { // 新增
this.$post('visual/panel/chart', this.editChart).then(response => {
this.$post('visual/panel/chart', params).then(response => {
if (response.code === 200) {
this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
this.esc(true)
@@ -221,7 +225,7 @@ export default {
})
},
datasourceChange () {
if (this.editChart.datasource == 1) {
if (this.editChart.datasource == 'metrics') {
this.editChart = {
...this.editChart,
span: 4,
@@ -238,7 +242,7 @@ export default {
}
}
}
if (this.editChart.datasource == 2) {
if (this.editChart.datasource == 'logs') {
this.editChart = {
...this.editChart,
span: 4,
@@ -251,13 +255,13 @@ export default {
}
}
}
if (this.editChart.datasource == 3) {
if (this.editChart.datasource == 'system') {
this.editChart = {
...this.editChart,
span: 4,
height: 4,
unit: 2,
type: 'singleStat',
type: 'stat',
param: {
refer: 1,
system: '',
@@ -275,7 +279,7 @@ export default {
}
delete this.editChart.elements
}
if (this.editChart.datasource == 4) {
if (this.editChart.datasource == 'misc') {
this.editChart = {
...this.editChart,
span: 4,
@@ -324,6 +328,13 @@ export default {
this.editChart.groupId = ''
}
}
},
'editChart.type': {
handler (n) {
if (n === 'group') {
this.editChart.groupId = ''
}
}
}
}
}

View File

@@ -7,7 +7,7 @@ export default {
case 'point':
return true
case 'table':
case 'singleStat':
case 'stat':
case 'bar':
case 'treemap':
case 'guage':
@@ -23,7 +23,7 @@ export default {
case 'point':
return false
case 'table':
case 'singleStat':
case 'stat':
case 'bar':
case 'treemap':
case 'guage':
@@ -39,7 +39,7 @@ export default {
case 'point':
return true
case 'table':
case 'singleStat':
case 'stat':
case 'bar':
case 'guage':
case 'treemap':
@@ -55,7 +55,7 @@ export default {
case 'point':
case 'table':
return false
case 'singleStat':
case 'stat':
case 'bar':
case 'guage':
case 'treemap':
@@ -71,7 +71,7 @@ export default {
case 'line':
case 'stackArea':
case 'point':
case 'singleStat':
case 'stat':
case 'bar':
case 'guage':
case 'treemap':
@@ -88,7 +88,7 @@ export default {
case 'line':
case 'stackArea':
case 'point':
case 'singleStat':
case 'stat':
case 'bar':
case 'treemap':
case 'pie':

View File

@@ -106,7 +106,7 @@
</div>
<!--url-->
<el-form-item v-if="isUrl(chartConfig.type)" :label='$t("dashboard.panel.chartForm.url")' :rules="{ required: true, message: $t('validate.required'), trigger: 'blur' }" prop="param.url">
<el-input id="chart-box-url" v-model="chartConfig.param.url" maxlength="1024" show-word-limit size="small" type="textarea"></el-input>
<el-input id="chart-box-url" v-model="chartConfig.param.url" maxlength="1024" show-word-limit size="small" type="textarea" @change="change"></el-input>
</el-form-item>
<!--topoData-->
<el-form-item v-if="isDiagram(chartConfig.type)" >
@@ -118,7 +118,9 @@
<!--topplogy-->
<diagram :topoData="chartConfig.param.topo" class="topology-dialog" v-if="topologyDialog" @change="topologyDialogChange" :topologyIndexF="-2" ref="topologyDialog" :fromTopologyDialog="true"/>
<!--text-->
<rich-text-editor v-if="isText(chartConfig.type)" ref="richTextEditor" :edit-data="chartConfig.param.text"></rich-text-editor>
<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>
</el-form>
</div>
</template>
@@ -135,6 +137,13 @@ export default {
diagram,
richTextEditor
},
watch: {
'chartConfig.param.text': {
handler (n) {
this.change()
}
}
},
data () {
return {
rules: {},
@@ -195,6 +204,9 @@ export default {
this.chartConfig.param.topo = data
this.change()
}
},
textChange () {
this.chartConfig.param.text = this.$refs.richTextEditor.getContent()
}
},
created () {

View File

@@ -67,7 +67,7 @@ export default {
name: this.$t('dashboard.panel.chartForm.typeVal.line.label')
},
{
id: 'stackArea',
id: 'area',
name: this.$t('dashboard.panel.chartForm.typeVal.stackArea.label')
},
{
@@ -75,7 +75,7 @@ export default {
name: this.$t('dashboard.panel.chartForm.typeVal.point.label')
},
{
id: 'singleStat',
id: 'stat',
name: this.$t('dashboard.panel.chartForm.typeVal.singleStat.label')
},
{
@@ -106,7 +106,7 @@ export default {
name: this.$t('dashboard.panel.chartForm.typeVal.line.label')
},
{
id: 'stackArea',
id: 'area',
name: this.$t('dashboard.panel.chartForm.typeVal.stackArea.label')
},
{
@@ -114,7 +114,7 @@ export default {
name: this.$t('dashboard.panel.chartForm.typeVal.point.label')
},
{
id: 'singleStat',
id: 'stat',
name: this.$t('dashboard.panel.chartForm.typeVal.singleStat.label')
},
{

View File

@@ -400,7 +400,7 @@ export default {
selectList: [],
chartTypeList: [
{
id: 'singleStat',
id: 'stat',
name: this.$t('dashboard.panel.chartForm.typeVal.singleStat.label')
},
{
@@ -456,7 +456,7 @@ export default {
},
chartTypeChange (type) {
switch (type) {
case 'singleStat':
case 'stat':
case 'bar':
case 'pie':
case 'guage':