From 86883e66277fd3f9e7433e9be7550504315bad44 Mon Sep 17 00:00:00 2001
From: "liu.shiyi" <liu.shiyi@ustcinfo.com>
Date: Fri, 25 Aug 2023 17:49:15 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E4=BF=AE=E6=94=B9=E9=83=A8=E5=88=86?=
=?UTF-8?q?=E5=9F=BA=E7=A1=80=E7=BB=84=E4=BB=B6=E7=9A=84=E4=B8=BB=E9=A2=98?=
=?UTF-8?q?=E8=AE=BE=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../BasicComponents/CurrentTime/index.vue | 20 ++++++++
.../BasicComponents/DigitalFlop/index.vue | 2 +-
.../BasicComponents/HorizontalLine/index.vue | 3 --
.../packages/BasicComponents/Input/index.vue | 10 +++-
.../BasicComponents/Picture/index.vue | 7 +--
.../BasicComponents/ThemeSwitcher/index.vue | 2 +-
.../BasicComponents/VerticalLine/index.vue | 3 --
.../packages/BigScreenDesign/index.vue | 2 +-
data-room-ui/packages/Render/index.vue | 8 ++--
.../packages/js/mixins/commonMixins.js | 18 +++++--
.../packages/js/mixins/refreshComponent.js | 23 ++++++++-
.../packages/js/utils/themeFormatting.js | 47 +++++++++++++++----
12 files changed, 112 insertions(+), 33 deletions(-)
diff --git a/data-room-ui/packages/BasicComponents/CurrentTime/index.vue b/data-room-ui/packages/BasicComponents/CurrentTime/index.vue
index 3cff55ee..388282b5 100644
--- a/data-room-ui/packages/BasicComponents/CurrentTime/index.vue
+++ b/data-room-ui/packages/BasicComponents/CurrentTime/index.vue
@@ -30,6 +30,9 @@
<script>
import moment from 'moment'
import paramsMixins from 'data-room-ui/js/mixins/paramsMixins'
+import { settingToTheme } from 'data-room-ui/js/utils/themeFormatting'
+import _ from 'lodash'
+import {mapMutations, mapState} from 'vuex'
export default {
name: 'CurrentTime',
mixins: [paramsMixins],
@@ -39,6 +42,12 @@ export default {
default: () => ({})
}
},
+ computed: {
+ ...mapState({
+ customTheme: state => state.bigScreen.pageInfo.pageConfig.customTheme,
+ activeCode: state => state.bigScreen.activeCode
+ })
+ },
data () {
return {
nowTime: '',
@@ -56,8 +65,19 @@ export default {
}
},
methods: {
+ ...mapMutations({
+ changeChartConfig: 'bigScreen/changeChartConfig',
+ changeActiveItemConfig: 'bigScreen/changeActiveItemConfig'
+ }),
changeStyle (config) {
this.getCurrentTime(config.dateFormat)
+ config = { ...this.config, ...config }
+ // 样式改变时更新主题配置
+ config.theme = settingToTheme(_.cloneDeep(config), this.customTheme)
+ this.changeChartConfig(config)
+ if (config.code === this.activeCode) {
+ this.changeActiveItemConfig(config)
+ }
},
// 实时显示当前系统时间
getCurrentTime (dateFormat) {
diff --git a/data-room-ui/packages/BasicComponents/DigitalFlop/index.vue b/data-room-ui/packages/BasicComponents/DigitalFlop/index.vue
index a4965e4d..edc21f12 100644
--- a/data-room-ui/packages/BasicComponents/DigitalFlop/index.vue
+++ b/data-room-ui/packages/BasicComponents/DigitalFlop/index.vue
@@ -60,7 +60,7 @@ export default {
},
computed: {
option () {
- let str=this.config.option.data
+ let str = this.config.option.data
if (!this.config.option.data) return { ...this.config.customize, data: [] }
if (
this.config.option.data.toString().split('').length <
diff --git a/data-room-ui/packages/BasicComponents/HorizontalLine/index.vue b/data-room-ui/packages/BasicComponents/HorizontalLine/index.vue
index 1d48cbbf..abd8f587 100644
--- a/data-room-ui/packages/BasicComponents/HorizontalLine/index.vue
+++ b/data-room-ui/packages/BasicComponents/HorizontalLine/index.vue
@@ -49,9 +49,6 @@ export default {
watch: {},
mounted () {},
methods: {
- // 由于静态组件没有混入公共函数，所以需要定义一个changeStyle方法，以免报错
- changeStyle () {
- }
}
}
</script>
diff --git a/data-room-ui/packages/BasicComponents/Input/index.vue b/data-room-ui/packages/BasicComponents/Input/index.vue
index 5f03cb3d..2c49e835 100644
--- a/data-room-ui/packages/BasicComponents/Input/index.vue
+++ b/data-room-ui/packages/BasicComponents/Input/index.vue
@@ -35,6 +35,8 @@
<script>
import commonMixins from 'data-room-ui/js/mixins/commonMixins'
import linkageMixins from 'data-room-ui/js/mixins/linkageMixins'
+import {settingToTheme} from "data-room-ui/js/utils/themeFormatting";
+import _ from "lodash";
export default {
name: 'BasicComponentInput',
mixins: [commonMixins, linkageMixins],
@@ -61,8 +63,8 @@ export default {
},
methods: {
changeStyle (config) {
+ config = { ...this.config, ...config }
const input = document.querySelector(`#el-input-${config.code}`)
-
// const inputIcon = input.querySelector(`.${this.config.customize.icon.name}`)
input.style.backgroundColor = config.customize.backgroundStyle.backgroundColor
input.style.fontSize = config.customize.inputStyle.fontSize + 'px'
@@ -76,6 +78,12 @@ export default {
const inputIcon = document.querySelector(`.${config.customize.icon.name}`)
inputIcon.style.fontSize = config.customize.inputStyle.fontSize + 'px'
}
+ // 样式改变时更新主题配置
+ config.theme = settingToTheme(_.cloneDeep(config), this.customTheme)
+ this.changeChartConfig(config)
+ if (config.code === this.activeCode) {
+ this.changeActiveItemConfig(config)
+ }
}
}
}
diff --git a/data-room-ui/packages/BasicComponents/Picture/index.vue b/data-room-ui/packages/BasicComponents/Picture/index.vue
index 1d3197a5..ff449734 100644
--- a/data-room-ui/packages/BasicComponents/Picture/index.vue
+++ b/data-room-ui/packages/BasicComponents/Picture/index.vue
@@ -23,9 +23,12 @@
</div>
</template>
<script>
+import { refreshComponentMixin } from 'data-room-ui/js/mixins/refreshComponent'
+
export default {
name: 'PictureChart',
components: {},
+ mixins: [refreshComponentMixin],
props: {
config: {
type: Object,
@@ -41,9 +44,7 @@ export default {
watch: {},
mounted () {},
methods: {
- // 由于静态组件没有混入公共函数，所以需要定义一个changeStyle方法，以免报错
- changeStyle () {
- }
+
}
}
</script>
diff --git a/data-room-ui/packages/BasicComponents/ThemeSwitcher/index.vue b/data-room-ui/packages/BasicComponents/ThemeSwitcher/index.vue
index d9b8b76d..d484fc0a 100644
--- a/data-room-ui/packages/BasicComponents/ThemeSwitcher/index.vue
+++ b/data-room-ui/packages/BasicComponents/ThemeSwitcher/index.vue
@@ -65,7 +65,7 @@ export default {
},
handleChange (val) {
const pageInfo = this.pageInfo
- pageInfo.chartList = themeToSetting(pageInfo.chartList, val, this)
+ pageInfo.chartList = themeToSetting(pageInfo.chartList, val)
this.changePageInfo(pageInfo)
}
}
diff --git a/data-room-ui/packages/BasicComponents/VerticalLine/index.vue b/data-room-ui/packages/BasicComponents/VerticalLine/index.vue
index b75ec3b6..b187515c 100644
--- a/data-room-ui/packages/BasicComponents/VerticalLine/index.vue
+++ b/data-room-ui/packages/BasicComponents/VerticalLine/index.vue
@@ -49,9 +49,6 @@ export default {
watch: {},
mounted () {},
methods: {
- // 由于静态组件没有混入公共函数，所以需要定义一个changeStyle方法，以免报错
- changeStyle () {
- }
}
}
</script>
diff --git a/data-room-ui/packages/BigScreenDesign/index.vue b/data-room-ui/packages/BigScreenDesign/index.vue
index c7906394..e0ffa30c 100644
--- a/data-room-ui/packages/BigScreenDesign/index.vue
+++ b/data-room-ui/packages/BigScreenDesign/index.vue
@@ -412,7 +412,7 @@ export default {
// 切换主题时更新主题配置
updateTheme (theme) {
const pageInfo = this.pageInfo
- pageInfo.chartList = themeToSetting(pageInfo.chartList, theme, this)
+ pageInfo.chartList = themeToSetting(pageInfo.chartList, theme)
this.changePageInfo(pageInfo)
},
// 自定义属性更新
diff --git a/data-room-ui/packages/Render/index.vue b/data-room-ui/packages/Render/index.vue
index cce8539f..c2fa2b5d 100644
--- a/data-room-ui/packages/Render/index.vue
+++ b/data-room-ui/packages/Render/index.vue
@@ -330,10 +330,10 @@ export default {
config.key = config.code
// TODO:新添加一个组件时应该有默认的两套主题
// 先暂时只考虑g2组件
- if (['customComponent'].includes(_chart.type)) {
- config.theme = settingToTheme(config, 'dark')
- config.theme = settingToTheme(config, 'light')
- }
+ // if (['customComponent'].includes(_chart.type)) {
+ config.theme = settingToTheme(config, 'dark')
+ config.theme = settingToTheme(config, 'light')
+ // }
this.addItem(config)
},
addSourceChart (chart, position) {
diff --git a/data-room-ui/packages/js/mixins/commonMixins.js b/data-room-ui/packages/js/mixins/commonMixins.js
index 8e1565f2..6a2c6bd8 100644
--- a/data-room-ui/packages/js/mixins/commonMixins.js
+++ b/data-room-ui/packages/js/mixins/commonMixins.js
@@ -9,6 +9,8 @@ import { mapMutations, mapState } from 'vuex'
import { EventBus } from 'data-room-ui/js/utils/eventBus'
import { getChatInfo, getUpdateChartInfo } from '../api/bigScreenApi'
import axiosFormatting from '../../js/utils/httpParamsFormatting'
+import {settingToTheme} from "data-room-ui/js/utils/themeFormatting";
+import _ from "lodash";
export default {
data () {
return {
@@ -19,7 +21,9 @@ export default {
},
computed: {
...mapState({
- pageCode: state => state.bigScreen.pageInfo.code
+ pageCode: state => state.bigScreen.pageInfo.code,
+ customTheme: state => state.bigScreen.pageInfo.pageConfig.customTheme,
+ activeCode: state => state.bigScreen.activeCode
}),
isPreview () {
return (this.$route.path === window?.BS_CONFIG?.routers?.previewUrl) || (this.$route.path === '/big-screen/preview')
@@ -33,7 +37,8 @@ export default {
},
methods: {
...mapMutations({
- changeChartConfig: 'bigScreen/changeChartConfig'
+ changeChartConfig: 'bigScreen/changeChartConfig',
+ changeActiveItemConfig: 'bigScreen/changeActiveItemConfig'
}),
/**
* 初始化组件
@@ -184,8 +189,13 @@ export default {
// 覆盖
},
changeStyle (config) {
- // this.changeChartConfig(config)
- // return config
+ config = { ...this.config, ...config }
+ // 样式改变时更新主题配置
+ config.theme = settingToTheme(_.cloneDeep(config), this.customTheme)
+ this.changeChartConfig(config)
+ if (config.code === this.activeCode) {
+ this.changeActiveItemConfig(config)
+ }
},
// 缓存组件数据监听
watchCacheData () {
diff --git a/data-room-ui/packages/js/mixins/refreshComponent.js b/data-room-ui/packages/js/mixins/refreshComponent.js
index 44ae3a23..c358325b 100644
--- a/data-room-ui/packages/js/mixins/refreshComponent.js
+++ b/data-room-ui/packages/js/mixins/refreshComponent.js
@@ -1,3 +1,7 @@
+import { mapMutations, mapState } from 'vuex'
+import { settingToTheme } from 'data-room-ui/js/utils/themeFormatting'
+import _ from 'lodash'
+
const refreshComponentMixin = {
data () {
return {
@@ -5,6 +9,10 @@ const refreshComponentMixin = {
}
},
computed: {
+ ...mapState({
+ customTheme: state => state.bigScreen.pageInfo.pageConfig.customTheme,
+ activeCode: state => state.bigScreen.activeCode
+ }),
Data () {
return JSON.parse(JSON.stringify(this.config))
}
@@ -22,8 +30,19 @@ const refreshComponentMixin = {
}
},
methods: {
- // 由于静态组件没有混入公共函数，所以需要定义一个changeStyle方法，以免报错
- changeStyle () {
+ ...mapMutations({
+ changeChartConfig: 'bigScreen/changeChartConfig',
+ changeActiveItemConfig: 'bigScreen/changeActiveItemConfig'
+ }),
+ // 修改样式
+ changeStyle (config) {
+ config = { ...this.config, ...config }
+ // 样式改变时更新主题配置
+ config.theme = settingToTheme(_.cloneDeep(config), this.customTheme)
+ this.changeChartConfig(config)
+ if (config.code === this.activeCode) {
+ this.changeActiveItemConfig(config)
+ }
}
}
}
diff --git a/data-room-ui/packages/js/utils/themeFormatting.js b/data-room-ui/packages/js/utils/themeFormatting.js
index feb948b1..166b63af 100644
--- a/data-room-ui/packages/js/utils/themeFormatting.js
+++ b/data-room-ui/packages/js/utils/themeFormatting.js
@@ -12,28 +12,55 @@ export function settingToTheme (config, type) {
// 排除掉主题非暗黑非明亮的情况
if (['dark', 'light'].includes(type)) {
const theme = { dark: { ...config?.theme?.dark }, light: { ...config?.theme?.light } }
- config.setting.forEach((setItem) => {
- if (['gradual', 'colorPicker', 'colorSelect'].includes(setItem.type)) {
- theme[type][setItem.field] = setItem.value
+ // 根据组件的type来判断主题的转化方式
+ // 如果是g2组件或者远程组件
+ if (['customComponent', 'remoteComponent'].includes(config.type)) {
+ config.setting.forEach((setItem) => {
+ if (['gradual', 'colorPicker', 'colorSelect'].includes(setItem.type)) {
+ theme[type][setItem.field] = setItem.value
+ }
+ })
+ } else {
+ // 如果是普通组件
+ if (config.customize && Object.keys(config.customize).length) {
+ for (const item in config.customize) {
+ if (item.includes('color') || item.includes('Color')) {
+ theme[type][item] = config.customize[item]
+ }
+ }
}
- })
+ }
return theme
} else {
return {}
}
}
// 将保存的theme主题设置（颜色）存放到chartList
-export function themeToSetting (chartList, type, _this) {
+export function themeToSetting (chartList, type) {
// 排除掉主题非暗黑非明亮的情况
if (['dark', 'light'].includes(type)) {
chartList.forEach(chart => {
chart.option.theme = type
if (chart.theme && chart.theme[type]) {
- for (const item of chart.setting) {
- // 检查 obj 中是否存在与 item.field 相对应的属性
- if (Object.prototype.hasOwnProperty.call(chart.theme[type], item.field)) {
- // 更新 setting 中对应项的 value 值为 theme 中的属性值
- item.value = chart.theme[type][item.field]
+ // 如果是g2组件或者远程组件
+ if (['customComponent', 'remoteComponent'].includes(chart.type)) {
+ for (const item of chart.setting) {
+ // 检查 obj 中是否存在与 item.field 相对应的属性
+ if (Object.prototype.hasOwnProperty.call(chart.theme[type], item.field)) {
+ // 更新 setting 中对应项的 value 值为 theme 中的属性值
+ item.value = chart.theme[type][item.field]
+ }
+ }
+ } else {
+ // 如果是普通组件
+ if (chart.customize && Object.keys(chart.customize).length) {
+ for (const item in chart.customize) {
+ // 检查 obj 中是否存在与 customize 相对应的属性
+ if (Object.prototype.hasOwnProperty.call(chart.theme[type], item)) {
+ // 更新 customize 中对应项的值为 theme 中的属性值
+ chart.customize[item] = chart.theme[type][item]
+ }
+ }
}
}
}