github/dataease
github/dataease
3
0
Fork 1
mirror of https://github.com/dataease/dataease.git synced 2025-02-25 12:03:05 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Merge branch 'dev' of github.com:dataease/dataease into dev

Browse Source
This commit is contained in:
taojinlong 2021-08-16 18:32:28 +08:00
commit 3a5fbf66ec
1 changed files with 22 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -13,7 +13,7 @@
<div style="padding: 6px 10px;"> <div style="padding: 6px 10px;">
<div> <div>
<span class="color-label">{{ $t('chart.system_case') }}</span> <span class="color-label">{{ $t('chart.system_case') }}</span>
<el-select v-model="colorForm.value" :placeholder="$t('chart.pls_slc_color_case')" size="mini" @change="changeColorCase"> <el-select v-model="colorForm.value" :placeholder="$t('chart.pls_slc_color_case')" size="mini" @change="changeColorOption">
<el-option v-for="option in colorCases" :key="option.value" :label="option.name" :value="option.value" style="display: flex;align-items: center;"> <el-option v-for="option in colorCases" :key="option.value" :label="option.name" :value="option.value" style="display: flex;align-items: center;">
<div style="float: left"> <div style="float: left">
<span v-for="(c,index) in option.colors" :key="index" :style="{width: '20px',height: '20px',float: 'left',backgroundColor: c}" /> <span v-for="(c,index) in option.colors" :key="index" :style="{width: '20px',height: '20px',float: 'left',backgroundColor: c}" />
@ -187,10 +187,14 @@ export default {
} }
}, },
watch: { watch: {
'chart': { 'chart.id': {
handler: function() { handler: function() {
this.customColor = null this.customColor = null
this.colorIndex = 0 this.colorIndex = 0
}
},
'chart': {
handler: function() {
this.init() this.init()
} }
} }
@ -199,17 +203,26 @@ export default {
this.init() this.init()
}, },
methods: { methods: {
changeColorCase() { changeColorOption() {
const that = this const that = this
const items = this.colorCases.filter(ele => { const items = this.colorCases.filter(ele => {
return ele.value === that.colorForm.value return ele.value === that.colorForm.value
}) })
const val = JSON.parse(JSON.stringify(this.colorForm)) // const val = JSON.parse(JSON.stringify(this.colorForm))
val.value = items[0].value // val.value = items[0].value
val.colors = items[0].colors // val.colors = items[0].colors
this.$emit('onColorChange', val) // this.colorForm.value = items[0].value
this.customColor = null this.colorForm.colors = JSON.parse(JSON.stringify(items[0].colors))
this.customColor = this.colorForm.colors[0]
this.colorIndex = 0 this.colorIndex = 0
this.changeColorCase()
},
changeColorCase() {
this.$emit('onColorChange', this.colorForm)
// this.customColor = null
// this.colorIndex = 0
}, },
init() { init() {
const chart = JSON.parse(JSON.stringify(this.chart)) const chart = JSON.parse(JSON.stringify(this.chart))
@ -239,9 +252,7 @@ export default {
}, },
resetCustomColor() { resetCustomColor() {
this.customColor = this.colorForm.colors[0] this.changeColorOption()
this.colorIndex = 0
this.changeColorCase()
} }
} }
} }