提交 f2f698b2 authored 作者: wangjiahao's avatar wangjiahao

fix: 主题设置 表格样式跟随问题

上级 73d311e9
...@@ -68,6 +68,7 @@ export default { ...@@ -68,6 +68,7 @@ export default {
title: '', title: '',
customAttr: JSON.stringify({ customAttr: JSON.stringify({
color: DEFAULT_COLOR_CASE, color: DEFAULT_COLOR_CASE,
tableColor: DEFAULT_COLOR_CASE,
size: DEFAULT_SIZE, size: DEFAULT_SIZE,
label: DEFAULT_LABEL, label: DEFAULT_LABEL,
tooltip: DEFAULT_TOOLTIP tooltip: DEFAULT_TOOLTIP
...@@ -148,7 +149,11 @@ export default { ...@@ -148,7 +149,11 @@ export default {
// 组件样式-背景设置 // 组件样式-背景设置
customStyleChart.background = customStylePanel.background customStyleChart.background = customStylePanel.background
// 图形属性-颜色设置 // 图形属性-颜色设置
customAttrChart.color = customAttrPanel.color if (this.chart.type.includes('table')) {
customAttrChart.color = customAttrPanel.tableColor
} else {
customAttrChart.color = customAttrPanel.color
}
this.chart = { this.chart = {
...this.chart, ...this.chart,
......
...@@ -578,6 +578,7 @@ export default { ...@@ -578,6 +578,7 @@ export default {
view.type = 'bar' view.type = 'bar'
view.customAttr = JSON.stringify({ view.customAttr = JSON.stringify({
color: DEFAULT_COLOR_CASE, color: DEFAULT_COLOR_CASE,
tableColor: DEFAULT_COLOR_CASE,
size: DEFAULT_SIZE, size: DEFAULT_SIZE,
label: DEFAULT_LABEL, label: DEFAULT_LABEL,
tooltip: DEFAULT_TOOLTIP tooltip: DEFAULT_TOOLTIP
......
...@@ -57,6 +57,7 @@ ...@@ -57,6 +57,7 @@
<script> <script>
import { chartTransStr2Object } from '@/views/panel/panel' import { chartTransStr2Object } from '@/views/panel/panel'
import { mapState } from 'vuex' import { mapState } from 'vuex'
import bus from '@/utils/bus'
export default { export default {
name: 'StyleTemplateItem', name: 'StyleTemplateItem',
...@@ -131,8 +132,8 @@ export default { ...@@ -131,8 +132,8 @@ export default {
let style = {} let style = {}
if (this.subjectItemDetails) { if (this.subjectItemDetails) {
style = { style = {
opacity: this.subjectItemDetails.chart.customAttr.color.alpha / 100, opacity: this.subjectItemDetails.chart.customAttr.tableColor.alpha / 100,
background: this.subjectItemDetails.chart.customAttr.color.tableHeaderBgColor background: this.subjectItemDetails.chart.customAttr.tableColor.tableHeaderBgColor
} }
} }
return style return style
...@@ -141,7 +142,7 @@ export default { ...@@ -141,7 +142,7 @@ export default {
let style = {} let style = {}
if (this.subjectItemDetails) { if (this.subjectItemDetails) {
style = { style = {
background: this.subjectItemDetails.chart.customAttr.color.tableFontColor background: this.subjectItemDetails.chart.customAttr.tableColor.tableFontColor
} }
} }
return style return style
...@@ -189,6 +190,7 @@ export default { ...@@ -189,6 +190,7 @@ export default {
subjectChange() { subjectChange() {
this.$store.commit('setCanvasStyle', JSON.parse(this.subjectItem.details)) this.$store.commit('setCanvasStyle', JSON.parse(this.subjectItem.details))
this.$store.commit('recordSnapshot') this.$store.commit('recordSnapshot')
bus.$emit('onSubjectChange')
}, },
templateEdit() { templateEdit() {
this.$emit('templateEdit', this.template) this.$emit('templateEdit', this.template)
......
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
<slider /> <slider />
</div> </div>
<!--折叠面板--> <!--折叠面板-->
<div style="margin: 10px;overflow-y: auto"> <div v-if="collapseShow" style="margin: 10px;overflow-y: auto">
<el-collapse v-model="activeNames" @change="handleChange"> <el-collapse v-model="activeNames" @change="handleChange">
<el-collapse-item :title="$t('panel.panel')" name="panel"> <el-collapse-item :title="$t('panel.panel')" name="panel">
<el-row style="background-color: #f7f8fa; margin: 5px"> <el-row style="background-color: #f7f8fa; margin: 5px">
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
</el-collapse-item> </el-collapse-item>
<el-collapse-item :title="$t('chart.module_style')" name="component"> <el-collapse-item :title="$t('chart.module_style')" name="component">
<el-row style="background-color: #f7f8fa; margin: 5px"> <el-row style="background-color: #f7f8fa; margin: 5px">
<!-- <title-selector class="attr-selector" :chart="chart" @onTextChange="onTextChange" />--> <!-- <title-selector class="attr-selector" :chart="chart" @onTextChange="onTextChange" />-->
<background-color-selector class="attr-selector" :chart="chart" @onChangeBackgroundForm="onChangeBackgroundForm" /> <background-color-selector class="attr-selector" :chart="chart" @onChangeBackgroundForm="onChangeBackgroundForm" />
</el-row> </el-row>
</el-collapse-item> </el-collapse-item>
...@@ -27,7 +27,7 @@ ...@@ -27,7 +27,7 @@
</el-collapse-item> </el-collapse-item>
<el-collapse-item :title="$t('panel.table')" name="table"> <el-collapse-item :title="$t('panel.table')" name="table">
<el-row style="background-color: #f7f8fa; margin: 5px"> <el-row style="background-color: #f7f8fa; margin: 5px">
<color-selector :source-type="'panelTable'" class="attr-selector" :chart="chart" @onColorChange="onColorChange" /> <color-selector v-if="tableChart" :source-type="'panelTable'" class="attr-selector" :chart="tableChart" @onColorChange="onTableColorChange" />
</el-row> </el-row>
</el-collapse-item> </el-collapse-item>
</el-collapse> </el-collapse>
...@@ -41,10 +41,10 @@ import BackgroundSelector from './PanelStyle/BackgroundSelector' ...@@ -41,10 +41,10 @@ import BackgroundSelector from './PanelStyle/BackgroundSelector'
import ComponentGap from './PanelStyle/ComponentGap' import ComponentGap from './PanelStyle/ComponentGap'
import ColorSelector from '@/views/chart/components/shape-attr/ColorSelector' import ColorSelector from '@/views/chart/components/shape-attr/ColorSelector'
import TitleSelector from '@/views/chart/components/component-style/TitleSelector'
import BackgroundColorSelector from '@/views/chart/components/component-style/BackgroundColorSelector' import BackgroundColorSelector from '@/views/chart/components/component-style/BackgroundColorSelector'
import { mapState } from 'vuex' import { mapState } from 'vuex'
import { deepCopy } from '@/components/canvas/utils/utils' import { deepCopy } from '@/components/canvas/utils/utils'
import bus from '@/utils/bus'
export default { export default {
components: { components: {
...@@ -52,14 +52,15 @@ export default { ...@@ -52,14 +52,15 @@ export default {
BackgroundSelector, BackgroundSelector,
ComponentGap, ComponentGap,
ColorSelector, ColorSelector,
TitleSelector,
BackgroundColorSelector BackgroundColorSelector
}, },
data() { data() {
return { return {
panelInfo: this.$store.state.panel.panelInfo, panelInfo: this.$store.state.panel.panelInfo,
activeNames: ['panel'], activeNames: ['panel'],
chart: null chart: null,
tableChart: null,
collapseShow: true
} }
}, },
computed: mapState([ computed: mapState([
...@@ -68,22 +69,38 @@ export default { ...@@ -68,22 +69,38 @@ export default {
watch: { watch: {
}, },
mounted() {
bus.$on('onSubjectChange', () => {
this.collapseShow = false
this.$nextTick(() => (this.collapseShow = true))
})
},
created() { created() {
// 初始化赋值 debugger
const chart = deepCopy(this.canvasStyleData.chart) this.init()
if (chart.xaxis) {
chart.xaxis = JSON.parse(chart.xaxis)
}
if (chart.yaxis) {
chart.yaxis = JSON.parse(chart.yaxis)
}
chart.customAttr = JSON.parse(chart.customAttr)
chart.customStyle = JSON.parse(chart.customStyle)
chart.customFilter = JSON.parse(chart.customFilter)
this.chart = chart
}, },
methods: { methods: {
init() {
// 初始化赋值
const chart = deepCopy(this.canvasStyleData.chart)
if (chart.xaxis) {
chart.xaxis = JSON.parse(chart.xaxis)
}
if (chart.yaxis) {
chart.yaxis = JSON.parse(chart.yaxis)
}
chart.customAttr = JSON.parse(chart.customAttr)
chart.customStyle = JSON.parse(chart.customStyle)
chart.customFilter = JSON.parse(chart.customFilter)
this.chart = chart
// 因为 table 的color 设置和view的共用 所以单独设置一个对象
this.tableChart = deepCopy(this.chart)
this.tableChart.customAttr.color = this.tableChart.customAttr.tableColor
},
handleChange(val) { handleChange(val) {
// console.log(val) // console.log(val)
}, },
...@@ -94,6 +111,10 @@ export default { ...@@ -94,6 +111,10 @@ export default {
this.chart.customAttr.color = val this.chart.customAttr.color = val
this.save() this.save()
}, },
onTableColorChange(val) {
this.chart.customAttr.tableColor = val
this.save()
},
onTextChange(val) { onTextChange(val) {
this.chart.customStyle.text = val this.chart.customStyle.text = val
this.save() this.save()
......
...@@ -234,6 +234,7 @@ export default { ...@@ -234,6 +234,7 @@ export default {
title: '', title: '',
customAttr: JSON.stringify({ customAttr: JSON.stringify({
color: DEFAULT_COLOR_CASE, color: DEFAULT_COLOR_CASE,
tableColor: DEFAULT_COLOR_CASE,
size: DEFAULT_SIZE, size: DEFAULT_SIZE,
label: DEFAULT_LABEL, label: DEFAULT_LABEL,
tooltip: DEFAULT_TOOLTIP tooltip: DEFAULT_TOOLTIP
...@@ -279,6 +280,7 @@ export default { ...@@ -279,6 +280,7 @@ export default {
title: '', title: '',
customAttr: JSON.stringify({ customAttr: JSON.stringify({
color: DEFAULT_COLOR_CASE, color: DEFAULT_COLOR_CASE,
tableColor: DEFAULT_COLOR_CASE,
size: DEFAULT_SIZE, size: DEFAULT_SIZE,
label: DEFAULT_LABEL, label: DEFAULT_LABEL,
tooltip: DEFAULT_TOOLTIP tooltip: DEFAULT_TOOLTIP
......
...@@ -36,6 +36,7 @@ export const DEFAULT_COMMON_CANVAS_STYLE = { ...@@ -36,6 +36,7 @@ export const DEFAULT_COMMON_CANVAS_STYLE = {
title: '', title: '',
customAttr: { customAttr: {
color: DEFAULT_COLOR_CASE, color: DEFAULT_COLOR_CASE,
tableColor: DEFAULT_COLOR_CASE,
size: DEFAULT_SIZE, size: DEFAULT_SIZE,
label: DEFAULT_LABEL, label: DEFAULT_LABEL,
tooltip: DEFAULT_TOOLTIP tooltip: DEFAULT_TOOLTIP
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论