fix: 修改新增chart 参数的相关问题
This commit is contained in:
@@ -62,6 +62,7 @@ export default {
|
||||
})
|
||||
this.$nextTick(() => {
|
||||
this.$emit('after-init')
|
||||
this.$emit('textChange')
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
@@ -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':
|
||||
|
||||
@@ -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 = ''
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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':
|
||||
|
||||
@@ -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 () {
|
||||
|
||||
@@ -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')
|
||||
},
|
||||
{
|
||||
|
||||
@@ -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':
|
||||
|
||||
Reference in New Issue
Block a user