tzjy-code
/
DataRoom
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat:修改部分基础组件的主题设置

Browse Source
main
liu.shiyi 2 years ago
parent d5d9312c5d
commit 86883e6627
12 changed files with 112 additions and 33 deletions
Show Stats Download Patch File Download Diff File

20
data-room-ui/packages/BasicComponents/CurrentTime/index.vue
Unescape Escape View File

@ -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) {

2
data-room-ui/packages/BasicComponents/DigitalFlop/index.vue
Unescape Escape View File

@ -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 <

3
data-room-ui/packages/BasicComponents/HorizontalLine/index.vue
Unescape Escape View File

@ -49,9 +49,6 @@ export default {
watch: {},
mounted () {},
methods: {
// 由于静态组件没有混入公共函数，所以需要定义一个changeStyle方法，以免报错
changeStyle () {
}
}
}
</script>

10
data-room-ui/packages/BasicComponents/Input/index.vue
Unescape Escape View File

@ -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)
}
}
}
}

7
data-room-ui/packages/BasicComponents/Picture/index.vue
Unescape Escape View File

@ -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>

2
data-room-ui/packages/BasicComponents/ThemeSwitcher/index.vue
Unescape Escape View File

@ -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)
}
}

3
data-room-ui/packages/BasicComponents/VerticalLine/index.vue
Unescape Escape View File

@ -49,9 +49,6 @@ export default {
watch: {},
mounted () {},
methods: {
// 由于静态组件没有混入公共函数，所以需要定义一个changeStyle方法，以免报错
changeStyle () {
}
}
}
</script>

2
data-room-ui/packages/BigScreenDesign/index.vue
Unescape Escape View File

@ -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)
},
// 自定义属性更新

8
data-room-ui/packages/Render/index.vue
Unescape Escape View File

@ -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) {

18
data-room-ui/packages/js/mixins/commonMixins.js
Unescape Escape View File

@ -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 () {

23
data-room-ui/packages/js/mixins/refreshComponent.js
Unescape Escape View File

@ -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)
}
}
}
}

47
data-room-ui/packages/js/utils/themeFormatting.js
Unescape Escape View File

@ -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]
}
}
}
}
}

Write Preview
Loading…
Cancel
Save