Skip to content

Commit d2bd4f0

Browse files
ziyujiahaoziyujiahao
committed
refactor: 仪表板主题优化，支持主题色切换新建视图主题集成
1 parent a3e607c commit d2bd4f0

30 files changed

+1425
-434
lines changed

‎frontend/src/components/canvas/custom-component/UserView.vue

Lines changed: 48 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -119,7 +119,7 @@ import DrillPath from '@/views/chart/view/DrillPath'
119119
import { areaMapping } from '@/api/map/map'
120120
import ChartComponentG2 from '@/views/chart/components/ChartComponentG2'
121121
import EditBarView from '@/components/canvas/components/Editor/EditBarView'
122-
import { customAttrTrans, customStyleTrans, recursionTransObj } from '@/components/canvas/utils/style'
122+
import { adaptCurTheme, customAttrTrans, customStyleTrans, recursionTransObj } from '@/components/canvas/utils/style'
123123
import ChartComponentS2 from '@/views/chart/components/ChartComponentS2'
124124
import PluginCom from '@/views/system/plugin/PluginCom'
125125
import LabelNormalText from '@/views/chart/components/normal/LabelNormalText'
@@ -354,7 +354,7 @@ export default {
354354
// deep监听panel 如果改变 提交到 store
355355
canvasStyleData: {
356356
handler(newVal, oldVla) {
357-
this.mergeStyle()
357+
// this.mergeStyle()
358358
// 如果视图结果模式模式 或者 视图结果获取数量改变 刷新视图
359359
if (!this.preCanvasPanel || this.preCanvasPanel.resultCount !== newVal.panel.resultCount || this.preCanvasPanel.resultMode !== newVal.panel.resultMode) {
360360
this.getData(this.element.propValue.viewId, false)
@@ -421,30 +421,44 @@ export default {
421421
},
422422
batchOptChange(param) {
423423
if (this.curBatchOptComponents.includes(this.element.propValue.viewId)) {
424-
this.$store.state.styleChangeTimes++
425-
// stylePriority change to 'view'
426-
const updateParams = { 'id': this.chart.id, 'stylePriority': 'view' }
427-
if (param.custom === 'customAttr') {
428-
const sourceCustomAttr = JSON.parse(this.sourceCustomAttrStr)
429-
sourceCustomAttr[param.property][param.value.modifyName] = param.value[param.value.modifyName]
430-
this.sourceCustomAttrStr = JSON.stringify(sourceCustomAttr)
431-
this.chart.customAttr = this.sourceCustomAttrStr
432-
updateParams['customAttr'] = this.sourceCustomAttrStr
433-
} else if (param.custom === 'customStyle') {
434-
const sourceCustomStyle = JSON.parse(this.sourceCustomStyleStr)
435-
// view's title use history
436-
// if (param.property === 'text') {
437-
// param.value.title = sourceCustomStyle.text.title
438-
// }
439-
sourceCustomStyle[param.property][param.value.modifyName] = param.value[param.value.modifyName]
440-
this.sourceCustomStyleStr = JSON.stringify(sourceCustomStyle)
441-
this.chart.customStyle = this.sourceCustomStyleStr
442-
updateParams['customStyle'] = this.sourceCustomStyleStr
443-
}
444-
viewPropsSave(this.panelInfo.id, updateParams)
445-
this.$store.commit('recordViewEdit', { viewId: this.chart.id, hasEdit: true })
446-
this.mergeScale()
424+
this.optFromBatchSingleProp(param)
425+
}
426+
},
427+
optFromBatchSingleProp(param) {
428+
this.$store.state.styleChangeTimes++
429+
const updateParams = { }
430+
if (param.custom === 'customAttr') {
431+
const sourceCustomAttr = JSON.parse(this.sourceCustomAttrStr)
432+
sourceCustomAttr[param.property][param.value.modifyName] = param.value[param.value.modifyName]
433+
this.sourceCustomAttrStr = JSON.stringify(sourceCustomAttr)
434+
this.chart.customAttr = this.sourceCustomAttrStr
435+
updateParams['customAttr'] = this.sourceCustomAttrStr
436+
} else if (param.custom === 'customStyle') {
437+
const sourceCustomStyle = JSON.parse(this.sourceCustomStyleStr)
438+
sourceCustomStyle[param.property][param.value.modifyName] = param.value[param.value.modifyName]
439+
this.sourceCustomStyleStr = JSON.stringify(sourceCustomStyle)
440+
this.chart.customStyle = this.sourceCustomStyleStr
441+
updateParams['customStyle'] = this.sourceCustomStyleStr
447442
}
443+
viewPropsSave(this.panelInfo.id, updateParams)
444+
this.$store.commit('recordViewEdit', { viewId: this.chart.id, hasEdit: true })
445+
this.mergeScale()
446+
},
447+
optFromBatchThemeChange() {
448+
const updateParams = { }
449+
const sourceCustomAttr = JSON.parse(this.sourceCustomAttrStr)
450+
const sourceCustomStyle = JSON.parse(this.sourceCustomStyleStr)
451+
adaptCurTheme(sourceCustomStyle, sourceCustomAttr)
452+
this.sourceCustomAttrStr = JSON.stringify(sourceCustomAttr)
453+
this.chart.customAttr = this.sourceCustomAttrStr
454+
updateParams['customAttr'] = this.sourceCustomAttrStr
455+
456+
this.sourceCustomStyleStr = JSON.stringify(sourceCustomStyle)
457+
this.chart.customStyle = this.sourceCustomStyleStr
458+
updateParams['customStyle'] = this.sourceCustomStyleStr
459+
viewPropsSave(this.panelInfo.id, updateParams)
460+
this.$store.commit('recordViewEdit', { viewId: this.chart.id, hasEdit: true })
461+
this.mergeScale()
448462
},
449463
resizeChart() {
450464
if (this.chart.type === 'map') {
@@ -473,6 +487,15 @@ export default {
473487
bus.$on('batch-opt-change', param => {
474488
this.batchOptChange(param)
475489
})
490+
bus.$on('onSubjectChange', () => {
491+
this.optFromBatchThemeChange()
492+
})
493+
bus.$on('onThemeColorChange', () => {
494+
this.optFromBatchThemeChange()
495+
})
496+
bus.$on('onThemeAttrChange', (param) => {
497+
this.optFromBatchSingleProp(param)
498+
})
476499
},
477500
478501
addViewTrackFilter(linkageParam) {
@@ -485,7 +508,6 @@ export default {
485508
const customStyleChart = JSON.parse(this.sourceCustomStyleStr)
486509
recursionTransObj(customAttrTrans, customAttrChart, this.scale, this.scaleCoefficientType)
487510
recursionTransObj(customStyleTrans, customStyleChart, this.scale, this.scaleCoefficientType)
488-
489511
// 移动端地图标签不显示
490512
if (this.chart.type === 'map' && this.scaleCoefficientType === 'mobile') {
491513
customAttrChart.label.show = false
@@ -495,32 +517,6 @@ export default {
495517
customAttr: JSON.stringify(customAttrChart),
496518
customStyle: JSON.stringify(customStyleChart)
497519
}
498-
this.mergeStyle()
499-
},
500-
mergeStyle() {
501-
if ((this.requestStatus === 'success' || this.requestStatus === 'merging') && this.chart.stylePriority === 'panel' && this.canvasStyleData.chart) {
502-
const customAttrChart = JSON.parse(this.chart.customAttr)
503-
const customStyleChart = JSON.parse(this.chart.customStyle)
504-
const customAttrPanel = JSON.parse(this.canvasStyleData.chart.customAttr)
505-
const customStylePanel = JSON.parse(this.canvasStyleData.chart.customStyle)
506-
if (customStyleChart.background) {
507-
// 组件样式-背景设置
508-
customStyleChart.background = customStylePanel.background
509-
}
510-
// 图形属性-颜色设置
511-
if (this.chart.type.includes('table')) {
512-
customAttrChart.color = customAttrPanel.tableColor
513-
} else {
514-
customAttrChart.color['value'] = customAttrPanel.color['value']
515-
customAttrChart.color['colors'] = customAttrPanel.color['colors']
516-
customAttrChart.color['alpha'] = customAttrPanel.color['alpha']
517-
}
518-
this.chart = {
519-
...this.chart,
520-
customAttr: JSON.stringify(customAttrChart),
521-
customStyle: JSON.stringify(customStyleChart)
522-
}
523-
}
524520
},
525521
getData(id, cache = true, dataBroadcast = false) {
526522
if (id) {

‎frontend/src/components/canvas/custom-component/component-list.js

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -17,18 +17,23 @@ export const BASE_MOBILE_STYLE = {
1717
}
1818

1919
// 组件仪表板样式
20-
export const COMMON_BACKGROUND = {
21-
enable: false,
20+
export const COMMON_BACKGROUND_BASE = {
2221
backgroundColorSelect: true,
23-
backgroundType: 'innerImage',
2422
color: '#FFFFFF',
25-
innerImage: 'board/blue_1.svg',
26-
outerImage: null,
2723
alpha: 100,
2824
borderRadius: 5,
2925
innerPadding: 0
3026
}
3127

28+
// 组件仪表板样式
29+
export const COMMON_BACKGROUND = {
30+
...COMMON_BACKGROUND_BASE,
31+
enable: false,
32+
backgroundType: 'innerImage',
33+
innerImage: 'board/blue_1.svg',
34+
outerImage: null
35+
}
36+
3237
// 空组件仪表板样式
3338
export const COMMON_BACKGROUND_NONE = {
3439
enable: false,

‎frontend/src/components/canvas/store/snapshot.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ export default {
3434

3535
recordSnapshot(state) {
3636
state.changeTimes++
37+
state.styleChangeTimes++
3738
// 添加新的快照
3839
state.snapshotData[++state.snapshotIndex] = deepCopy(state.componentData)
3940
state.snapshotStyleData[state.snapshotIndex] = deepCopy(state.canvasStyleData)

‎frontend/src/components/canvas/utils/style.js

Lines changed: 158 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,15 @@
11
import { sin, cos } from '@/components/canvas/utils/translate'
2+
import store from '@/store'
3+
4+
export const LIGHT_THEME_COLOR_MAIN = '#000000'
5+
export const LIGHT_THEME_COLOR_SLAVE1 = '#CCCCCC'
6+
export const LIGHT_THEME_PANEL_BACKGROUND = '#F1F3F5'
7+
export const LIGHT_THEME_COMPONENT_BACKGROUND = '#FFFFFF'
8+
9+
export const DARK_THEME_COLOR_MAIN = '#FFFFFF'
10+
export const DARK_THEME_COLOR_SLAVE1 = '#CCCCCC'
11+
export const DARK_THEME_PANEL_BACKGROUND = '#030B2E'
12+
export const DARK_THEME_COMPONENT_BACKGROUND = '#131E42'
213

314
export function getStyle(style, filter = []) {
415
const needUnit = [
@@ -148,6 +159,104 @@ export const customStyleTrans = {
148159
}
149160
}
150161

162+
export const THEME_STYLE_TRANS_MAIN_BACK = {
163+
'legend': {
164+
'textStyle': ['color']
165+
},
166+
'xAxis': {
167+
'nameTextStyle': ['color'],
168+
'axisLabel': ['color'],
169+
'splitLine': {
170+
'lineStyle': ['color']
171+
}
172+
},
173+
'yAxis': {
174+
'nameTextStyle': ['color'],
175+
'axisLabel': ['color'],
176+
'splitLine': {
177+
'lineStyle': ['color']
178+
}
179+
},
180+
'yAxisExt': {
181+
'nameTextStyle': ['color'],
182+
'axisLabel': ['color'],
183+
'splitLine': {
184+
'lineStyle': ['color']
185+
}
186+
},
187+
'split': {
188+
'name': ['color'],
189+
'axisLine': {
190+
'lineStyle': ['color']
191+
},
192+
'axisTick': {
193+
'lineStyle': ['color']
194+
},
195+
'axisLabel': ['color'],
196+
'splitLine': {
197+
'lineStyle': ['color']
198+
}
199+
}
200+
}
201+
202+
export const THEME_STYLE_TRANS_MAIN = {
203+
'legend': {
204+
'textStyle': ['color']
205+
},
206+
'xAxis': {
207+
'nameTextStyle': ['color'],
208+
'axisLabel': ['color']
209+
},
210+
'yAxis': {
211+
'nameTextStyle': ['color'],
212+
'axisLabel': ['color']
213+
},
214+
'yAxisExt': {
215+
'nameTextStyle': ['color'],
216+
'axisLabel': ['color']
217+
},
218+
'split': {
219+
'name': ['color'],
220+
'axisLine': {
221+
'lineStyle': ['color']
222+
},
223+
'axisTick': {
224+
'lineStyle': ['color']
225+
},
226+
'axisLabel': ['color']
227+
}
228+
}
229+
230+
export const THEME_STYLE_TRANS_SLAVE1 = {
231+
'xAxis': {
232+
'splitLine': {
233+
'lineStyle': ['color']
234+
}
235+
},
236+
'yAxis': {
237+
'splitLine': {
238+
'lineStyle': ['color']
239+
}
240+
},
241+
'yAxisExt': {
242+
'splitLine': {
243+
'lineStyle': ['color']
244+
}
245+
},
246+
'split': {
247+
'splitLine': {
248+
'lineStyle': ['color']
249+
}
250+
}
251+
}
252+
253+
export const THEME_ATTR_TRANS_MAIN = {
254+
'label': ['color'],
255+
'tooltip': {
256+
'textStyle': ['color']
257+
}
258+
}
259+
151260
// 移动端特殊属性
152261
export const mobileSpecialProps = {
153262
'lineWidth': 3, // 线宽固定值
@@ -182,6 +291,24 @@ export function recursionTransObj(template, infoObj, scale, terminal) {
182291
}
183292
}
184293

294+
export function recursionThemTransObj(template, infoObj, color) {
295+
for (const templateKey in template) {
296+
// 如果是数组 进行赋值计算
297+
if (template[templateKey] instanceof Array) {
298+
template[templateKey].forEach(templateProp => {
299+
if (infoObj[templateKey] && infoObj[templateKey][templateProp]) {
300+
infoObj[templateKey][templateProp] = color
301+
}
302+
})
303+
} else {
304+
// 如果是对象 继续进行递归
305+
if (infoObj[templateKey]) {
306+
recursionTransObj(template[templateKey], infoObj[templateKey], color)
307+
}
308+
}
309+
}
310+
}
311+
185312
export function componentScalePublic(chartInfo, heightScale, widthScale) {
186313
const scale = Math.min(heightScale, widthScale)
187314
// attr 缩放转换
@@ -191,3 +318,34 @@ export function componentScalePublic(chartInfo, heightScale, widthScale) {
191318
return chartInfo
192319
}
193320

321+
export function adaptCurTheme(customStyle, customAttr) {
322+
const canvasStyle = store.state.canvasStyleData
323+
const themeColor = canvasStyle.panel.themeColor
324+
if (themeColor === 'light') {
325+
recursionThemTransObj(THEME_STYLE_TRANS_MAIN, customStyle, LIGHT_THEME_COLOR_MAIN)
326+
recursionThemTransObj(THEME_STYLE_TRANS_SLAVE1, customStyle, LIGHT_THEME_COLOR_SLAVE1)
327+
recursionThemTransObj(THEME_ATTR_TRANS_MAIN, customAttr, LIGHT_THEME_COLOR_MAIN)
328+
} else {
329+
recursionThemTransObj(THEME_STYLE_TRANS_MAIN, customStyle, DARK_THEME_COLOR_MAIN)
330+
recursionThemTransObj(THEME_STYLE_TRANS_SLAVE1, customStyle, DARK_THEME_COLOR_SLAVE1)
331+
recursionThemTransObj(THEME_ATTR_TRANS_MAIN, customAttr, DARK_THEME_COLOR_MAIN)
332+
}
333+
customAttr['color'] = { ...canvasStyle.chartInfo.chartColor }
334+
customStyle['text'] = { ...canvasStyle.chartInfo.chartTitle, title: customStyle['text']['title'] }
335+
}
336+
337+
export function adaptCurThemeCommonStyle(component) {
338+
const commonStyle = store.state.canvasStyleData.chartInfo.chartCommonStyle
339+
for (const key in commonStyle) {
340+
component.commonBackground[key] = commonStyle[key]
341+
}
342+
return component
343+
}
344+
345+
export function adaptCurThemeCommonStyleAll() {
346+
const componentData = store.state.componentData
347+
componentData.forEach((item) => {
348+
adaptCurThemeCommonStyle(item)
349+
})
350+
}
351+

‎frontend/src/components/canvas/utils/utils.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import {
88
} from '@/utils/ApplicationContext'
99
import { uuid } from 'vue-uuid'
1010
import store from '@/store'
11-
import { AIDED_DESIGN } from '@/views/panel/panel'
11+
import { AIDED_DESIGN, PANEL_CHART_INFO } from '@/views/panel/panel'
1212
import html2canvas from 'html2canvasde'
1313

1414
export function deepCopy(target) {
@@ -81,6 +81,9 @@ export function panelDataPrepare(componentData, componentStyle, callback) {
8181
componentStyle.refreshViewLoading = (componentStyle.refreshViewLoading || false)
8282
componentStyle.refreshUnit = (componentStyle.refreshUnit || 'minute')
8383
componentStyle.aidedDesign = (componentStyle.aidedDesign || deepCopy(AIDED_DESIGN))
84+
componentStyle.chartInfo = (componentStyle.chartInfo || deepCopy(PANEL_CHART_INFO))
85+
componentStyle.themeId = (componentStyle.themeId || 'NO_THEME')
86+
componentStyle.panel.themeColor = (componentStyle.panel.themeColor || 'light')
8487
componentData.forEach((item, index) => {
8588
if (item.component && item.component === 'de-date') {
8689
if (item.options.attrs &&

0 commit comments

Comments
 (0)