center/dataease-dm
center/dataease-dm
13
0
Fork 0
forked from github/dataease
Code Pull Requests Activity

fix: 仪表盘样式设置 回显不准确问题

Browse Source
This commit is contained in:
wangjiahao 2021-06-22 11:25:59 +08:00
parent 85a7b1fdbe
commit 76162f1461
4 changed files with 45 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
frontend/src/components/canvas/custom-component/UserView.vue
View File

@ -2,10 +2,10 @@
<div v-loading="requestStatus==='waiting'" class="rect-shape">
<div v-if="requestStatus==='error'" class="chart-error-class">
<div style="font-size: 12px; color: #9ea6b2;height: 100%;display: flex;align-items: center;justify-content: center;">
<span v-if="message.response.data.message">{{ message.response.data.message }}<span>,{{ $t('chart.chart_show_error') }}
<br>
{{ $t('chart.chart_error_tips') }}
</span></span></div>
{{ message }},{{ $t('chart.chart_show_error') }}
<br>
{{ $t('chart.chart_error_tips') }}
</div>
</div>
<chart-component v-if="requestStatus==='success'&&chart.type && !chart.type.includes('table') && !chart.type.includes('text')" :ref="element.propValue.id" class="chart-class" :chart="chart" />
<table-normal v-if="requestStatus==='success'&&chart.type && chart.type.includes('table')" :ref="element.propValue.id" :chart="chart" class="table-class" />
@ -180,7 +180,11 @@ export default {
return true
}).catch(err => {
this.requestStatus = 'error'
this.message = err
if (err && err.response && err.response.data) {
this.message = err.response.data.message
} else {
this.message = err
}
return true
})
}

28
frontend/src/views/chart/components/component-style/BackgroundColorSelector.vue
View File

@ -42,26 +42,30 @@ export default {
watch: {
'chart': {
handler: function() {
const chart = JSON.parse(JSON.stringify(this.chart))
if (chart.customStyle) {
let customStyle = null
if (Object.prototype.toString.call(chart.customStyle) === '[object Object]') {
customStyle = JSON.parse(JSON.stringify(chart.customStyle))
} else {
customStyle = JSON.parse(chart.customStyle)
}
if (customStyle.background) {
this.colorForm = customStyle.background
}
}
this.init()
}
}
},
mounted() {
this.init()
},
methods: {
changeBackgroundStyle() {
this.$emit('onChangeBackgroundForm', this.colorForm)
},
init() {
const chart = JSON.parse(JSON.stringify(this.chart))
if (chart.customStyle) {
let customStyle = null
if (Object.prototype.toString.call(chart.customStyle) === '[object Object]') {
customStyle = JSON.parse(JSON.stringify(chart.customStyle))
} else {
customStyle = JSON.parse(chart.customStyle)
}
if (customStyle.background) {
this.colorForm = customStyle.background
}
}
}
}
}

28
frontend/src/views/chart/components/shape-attr/ColorSelector.vue
View File

@ -126,22 +126,12 @@ export default {
watch: {
'chart': {
handler: function() {
const chart = JSON.parse(JSON.stringify(this.chart))
if (chart.customAttr) {
let customAttr = null
if (Object.prototype.toString.call(chart.customAttr) === '[object Object]') {
customAttr = JSON.parse(JSON.stringify(chart.customAttr))
} else {
customAttr = JSON.parse(chart.customAttr)
}
if (customAttr.color) {
this.colorForm = customAttr.color
}
}
this.init()
}
}
},
mounted() {
this.init()
},
methods: {
changeColorCase() {
@ -153,6 +143,20 @@ export default {
val.value = items[0].value
val.colors = items[0].colors
this.$emit('onColorChange', val)
},
init() {
const chart = JSON.parse(JSON.stringify(this.chart))
if (chart.customAttr) {
let customAttr = null
if (Object.prototype.toString.call(chart.customAttr) === '[object Object]') {
customAttr = JSON.parse(JSON.stringify(chart.customAttr))
} else {
customAttr = JSON.parse(chart.customAttr)
}
if (customAttr.color) {
this.colorForm = customAttr.color
}
}
}
}
}

8
frontend/src/views/panel/SubjectSetting/index.vue
View File

@ -17,7 +17,7 @@
<el-collapse-item :title="$t('chart.module_style')" name="component">
<el-row style="background-color: #f7f8fa; margin: 5px">
<!-- <title-selector class="attr-selector" :chart="chart" @onTextChange="onTextChange" />-->
<background-color-selector class="attr-selector" :chart="chart" @onChangeBackgroundForm="onChangeBackgroundForm" />
<background-color-selector v-if="chart" class="attr-selector" :chart="chart" @onChangeBackgroundForm="onChangeBackgroundForm" />
</el-row>
</el-collapse-item>
<el-collapse-item :title="$t('chart.shape_attr')" name="graphical">
@ -27,7 +27,7 @@
</el-collapse-item>
<el-collapse-item :title="$t('panel.table')" name="table">
<el-row style="background-color: #f7f8fa; margin: 5px">
<color-selector v-if="tableChartShow" index="10002" :source-type="'panelTable'" class="attr-selector" :chart="tableChart" @onColorChange="onTableColorChange" />
<color-selector index="10002" :source-type="'panelTable'" class="attr-selector" :chart="tableChart" @onColorChange="onTableColorChange" />
</el-row>
</el-collapse-item>
</el-collapse>
@ -58,7 +58,7 @@ export default {
return {
panelInfo: this.$store.state.panel.panelInfo,
activeNames: ['panel'],
chart: {},
chart: null,
tableChart: null,
collapseShow: true,
tableChartShow: true
@ -76,9 +76,9 @@ export default {
this.collapseShow = false
this.$nextTick(() => (this.collapseShow = true))
})
this.init()
},
created() {
this.init()
},
methods: {