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

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

1
nezha-fronted/src/components/charts/richTextEditor.vue
View File

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

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

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

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

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

12
nezha-fronted/src/components/common/rightBox/chart/chartTypeShow.js
View File

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

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

@@ -106,7 +106,7 @@
</div> </div>
<!--url--> <!--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-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> </el-form-item>
<!--topoData--> <!--topoData-->
<el-form-item v-if="isDiagram(chartConfig.type)" > <el-form-item v-if="isDiagram(chartConfig.type)" >
@@ -118,7 +118,9 @@
<!--topplogy--> <!--topplogy-->
<diagram :topoData="chartConfig.param.topo" class="topology-dialog" v-if="topologyDialog" @change="topologyDialogChange" :topologyIndexF="-2" ref="topologyDialog" :fromTopologyDialog="true"/> <diagram :topoData="chartConfig.param.topo" class="topology-dialog" v-if="topologyDialog" @change="topologyDialogChange" :topologyIndexF="-2" ref="topologyDialog" :fromTopologyDialog="true"/>
<!--text--> <!--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> </el-form>
</div> </div>
</template> </template>
@@ -135,6 +137,13 @@ export default {
diagram, diagram,
richTextEditor richTextEditor
}, },
watch: {
'chartConfig.param.text': {
handler (n) {
this.change()
}
}
},
data () { data () {
return { return {
rules: {}, rules: {},
@@ -195,6 +204,9 @@ export default {
this.chartConfig.param.topo = data this.chartConfig.param.topo = data
this.change() this.change()
} }
},
textChange () {
this.chartConfig.param.text = this.$refs.richTextEditor.getContent()
} }
}, },
created () { created () {

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

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

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

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