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

Merge branch 'master' of github.com:gcpaas/DataRoom

Browse Source
main
wu.jian2
parent 72b08edbd7 d69fd33724
commit 2f7e0ef466
18 changed files with 167 additions and 199 deletions

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

@ -117,7 +117,7 @@ export default {
color: #000000; color: #000000;
} }
.dark-theme { .dark-theme {
background-color: #000000; background-color:transparent;
color: #ffffff; color: #ffffff;
} }
.auto-theme { .auto-theme {

2
data-room-ui/packages/BasicComponents/CurrentTime/settingConfig.js
Unescape Escape View File

@ -21,7 +21,7 @@ const customConfig = {
customize: { customize: {
fontSize: 28, fontSize: 28,
fontWeight: 700, fontWeight: 700,
color: '#ffffff' color: 'rgb(155 159 172)'
} }
} }

88
data-room-ui/packages/BasicComponents/FlyMap/index.vue
Unescape Escape View File

@ -3,6 +3,7 @@
style="width: 100%; height: 100%" style="width: 100%; height: 100%"
class="bs-design-wrap bs-bar" class="bs-design-wrap bs-bar"
> >
<el-button class="button" v-if="this.level=='province'&&config.customize.down" @click="jumpTo(config)" type='text' > 返回上一级</el-button>
<div <div
:id="`chart${config.code}`" :id="`chart${config.code}`"
style="width: 100%; height: 100%" style="width: 100%; height: 100%"
@ -33,7 +34,8 @@ export default {
return { return {
charts: null, charts: null,
hasData: false, hasData: false,
level:'' level:'',
option:{}
} }
}, },
computed: { computed: {
@ -85,6 +87,15 @@ export default {
} }
return config return config
}, },
async jumpTo(config){
this.level='country'
const mapUrl =`${window.BS_CONFIG?.httpConfigs?.baseURL}/static/chinaMap/country/中华人民共和国.json`
const map = await this.$dataRoomAxios.get(decodeURI(mapUrl), {}, true)
this.option.geo.map = '中华人民共和国';
this.changeData({...config,customize:{...config.customize,level:'country',scope:'中国'}})
echarts.registerMap('中华人民共和国', map);
this.charts.setOption(this.option, true);
},
async newChart (config) { async newChart (config) {
this.charts = echarts.init( this.charts = echarts.init(
document.getElementById(`chart${this.config.code}`) document.getElementById(`chart${this.config.code}`)
@ -106,10 +117,10 @@ export default {
} }
}) })
echarts.registerMap(config.customize.scope, res) echarts.registerMap(config.customize.scope, res)
const option = { this.option = {
nameMap:config.customize.level=='world'?nameMap:'', nameMap:config.customize.level=='world'?nameMap:'',
graphic: [ // graphic: [
], // ],
geo: { geo: {
map: config.customize.scope, map: config.customize.scope,
zlevel: 10, zlevel: 10,
@ -228,7 +239,7 @@ export default {
] ]
} }
if (config.customize.visual) { if (config.customize.visual) {
option.visualMap = { this.option.visualMap = {
show: false, show: false,
min: config.customize.range[0], min: config.customize.range[0],
max: config.customize.range[1], max: config.customize.range[1],
@ -238,69 +249,17 @@ export default {
} }
} }
} }
if(config.customize.down){ this.charts.setOption(this.option)
// config?.customize?.graphic?.forEach((item,index)=>{
option.graphic.push({
type: "text",
left: `250px`,
top: "5%",
style: {
text: '中国',
font: `bolder ${config.customize.fontSize}px "Microsoft YaHei", sans-serif`,
fill: config.customize.fontGraphicColor,
},
onclick:async()=>{
this.level='country'
const index = option.graphic.findIndex(i => i.style.text === '中国');
// 点击元素之后的所有元素全部删除
option.graphic.splice(index + 1);
const mapUrl =`${window.BS_CONFIG?.httpConfigs?.baseURL}/static/chinaMap/country/中华人民共和国.json`
const map = await this.$dataRoomAxios.get(decodeURI(mapUrl), {}, true)
option.geo.map = '中华人民共和国'
this.changeData({...config,customize:{...config.customize,level:'country',scope:'中国'}})
echarts.registerMap('中华人民共和国', map);
this.charts.setOption(option, true);
}
},)
// })
}
this.charts.setOption(option)
this.charts.on('click', async(params)=> { this.charts.on('click', async(params)=> {
const index = option.graphic.findIndex(i => i.style.text === params.name); if(params.name=='') return
if(params.name=='' || index !== -1) return
if(config.customize.down===false||this.level==='province') return if(config.customize.down===false||this.level==='province') return
const idx = option.graphic.length + 1;
option.graphic.push({
type: "text",
left: `${idx * 250}px`,
top: "5%",
style: {
text: params.name,
font: `bolder ${config.customize.fontSize}px "Microsoft YaHei", sans-serif`,
fill: config.customize.fontGraphicColor,
},
onclick: async() => {
const mapUrl =`${window.BS_CONFIG?.httpConfigs?.baseURL}/static/chinaMap/${params.name=='中华人民共和国'?'country':'province'}/${params.name}.json`
const map = await this.$dataRoomAxios.get(decodeURI(mapUrl), {}, true)
// 利用函数的作用域，可以直接拿上面的name来用
const index = option.graphic.findIndex(i => i.style.text === params.name);
// 点击元素之后的所有元素全部删除
option.graphic.splice(index + 1);
// 很多操作重复了，你可以将公共部分抽离出来
option.geo.map = params.name;
this.changeData({...config,customize:{...config.customize,level:'province',scope:params.name}})
echarts.registerMap(params.name, map);
this.charts.setOption(option, true);
},
});
this.level='province' this.level='province'
const mapUrl =`${window.BS_CONFIG?.httpConfigs?.baseURL}/static/chinaMap/province/${params.name}.json` const mapUrl =`${window.BS_CONFIG?.httpConfigs?.baseURL}/static/chinaMap/province/${params.name}.json`
const map = await this.$dataRoomAxios.get(decodeURI(mapUrl), {}, true) const map = await this.$dataRoomAxios.get(decodeURI(mapUrl), {}, true)
this.changeData({...config,customize:{...config.customize,level:'province',scope:params.name}}) this.changeData({...config,customize:{...config.customize,level:'province',scope:params.name}})
option.geo.map = params.name this.option.geo.map = params.name
echarts.registerMap(params.name, map); echarts.registerMap(params.name, map);
this.charts.setOption(option, true); this.charts.setOption(this.option, true);
}); });
}) })
} }
@ -317,4 +276,11 @@ export default {
.auto-theme { .auto-theme {
background-color: rgba(0, 0, 0, 0); background-color: rgba(0, 0, 0, 0);
} }
.bs-design-wrap{
position: relative;
.button{
position: absolute;
z-index: 999;
}
}
</style> </style>

11
data-room-ui/packages/BasicComponents/FlyMap/setting.vue
Unescape Escape View File

@ -69,6 +69,7 @@
v-model="config.customize.dataMap" v-model="config.customize.dataMap"
popper-class="bs-el-select" popper-class="bs-el-select"
class="bs-el-select" class="bs-el-select"
@change="changeMap"
> >
<el-option <el-option
v-for="map in mapList" v-for="map in mapList"
@ -89,7 +90,7 @@
active-color="#007aff" active-color="#007aff"
/> />
</el-form-item> </el-form-item>
<el-form-item <!-- <el-form-item
v-if="config.customize.down" v-if="config.customize.down"
label="头部字体颜色" label="头部字体颜色"
label-width="100px" label-width="100px"
@ -110,7 +111,7 @@
controls-position="right" controls-position="right"
:step="1" :step="1"
/> />
</el-form-item> </el-form-item> -->
<el-form-item <el-form-item
label="地图分割线颜色" label="地图分割线颜色"
label-width="100px" label-width="100px"
@ -369,15 +370,21 @@ export default {
this.$dataRoomAxios.get(`${window.BS_CONFIG?.httpConfigs?.baseURL}/bigScreen/design/map/list/${this.config.customize.level}`).then((res) => { this.$dataRoomAxios.get(`${window.BS_CONFIG?.httpConfigs?.baseURL}/bigScreen/design/map/list/${this.config.customize.level}`).then((res) => {
this.mapList = res this.mapList = res
}) })
},
changeMap(val){
this.config.customize.scope=val.slice(0,-5)
}, },
changeLevel () { changeLevel () {
if (this.config.customize.level === 'country') { if (this.config.customize.level === 'country') {
this.config.customize.dataMap = '中华人民共和国.json' this.config.customize.dataMap = '中华人民共和国.json'
this.config.customize.scope='中国'
} else if (this.config.customize.level === 'province') { } else if (this.config.customize.level === 'province') {
this.getMapList() this.getMapList()
this.config.customize.dataMap = '安徽省.json' this.config.customize.dataMap = '安徽省.json'
this.config.customize.scope='安徽省'
this.config.customize.down=false this.config.customize.down=false
}else{ }else{
this.config.customize.scope='世界'
this.config.customize.down=false this.config.customize.down=false
} }
}, },

84
data-room-ui/packages/BasicComponents/Map/index.vue
Unescape Escape View File

@ -3,6 +3,7 @@
style="width: 100%; height: 100%" style="width: 100%; height: 100%"
class="bs-design-wrap bs-bar" class="bs-design-wrap bs-bar"
> >
<el-button class="button" v-if="this.level=='province'&&config.customize.down" @click="jumpTo(config)" type='text' > 返回上一级</el-button>
<div <div
:id="`chart${config.code}`" :id="`chart${config.code}`"
style="width: 100%; height: 100%" style="width: 100%; height: 100%"
@ -32,7 +33,8 @@ export default {
return { return {
charts: null, charts: null,
hasData: false, hasData: false,
level:'' level:'',
option:{}
} }
}, },
computed: { computed: {
@ -88,11 +90,20 @@ export default {
} }
return config return config
}, },
async jumpTo(config){
this.level='country'
const mapUrl =`${window.BS_CONFIG?.httpConfigs?.baseURL}/static/chinaMap/country/中华人民共和国.json`
const map = await this.$dataRoomAxios.get(decodeURI(mapUrl), {}, true)
this.option.geo.map = '中华人民共和国';
this.changeData({...config,customize:{...config.customize,level:'country',scope:'中国'}})
echarts.registerMap('中华人民共和国', map);
this.charts.setOption(this.option, true);
},
async newChart (config) { async newChart (config) {
this.charts = echarts.init( this.charts = echarts.init(
document.getElementById(`chart${this.config.code}`) document.getElementById(`chart${this.config.code}`)
) )
const option = { this.option = {
// 背景颜色 // 背景颜色
backgroundColor: config.customize.backgroundColor, backgroundColor: config.customize.backgroundColor,
graphic: [ graphic: [
@ -252,7 +263,7 @@ export default {
] ]
} }
if (config.customize.visual) { if (config.customize.visual) {
option.visualMap = { this.option.visualMap = {
show: true, show: true,
min: config.customize.range[0], min: config.customize.range[0],
max: config.customize.range[1], max: config.customize.range[1],
@ -262,72 +273,20 @@ export default {
} }
} }
} }
if(config.customize.down){
// config?.customize?.graphic?.forEach((item,index)=>{
option.graphic.push({
type: "text",
left: `220px`,
top: "5%",
style: {
text: '中国',
font: `bolder ${config.customize.fontSize}px "Microsoft YaHei", sans-serif`,
fill: config.customize.fontGraphicColor,
},
onclick:async()=>{
this.level='country'
const index = option.graphic.findIndex(i => i.style.text === '中国');
// 点击元素之后的所有元素全部删除
option.graphic.splice(index + 1);
const mapUrl =`${window.BS_CONFIG?.httpConfigs?.baseURL}/static/chinaMap/country/中华人民共和国.json`
const map = await this.$dataRoomAxios.get(decodeURI(mapUrl), {}, true)
option.geo.map = '中华人民共和国'
this.changeData({...config,customize:{...config.customize,level:'country',scope:'中国'}})
echarts.registerMap('中华人民共和国', map);
this.charts.setOption(option, true);
}
},)
// })
}
const mapUrl = `${window.BS_CONFIG?.httpConfigs?.baseURL}/static/chinaMap/${config.customize.level}/${config.customize.dataMap}` const mapUrl = `${window.BS_CONFIG?.httpConfigs?.baseURL}/static/chinaMap/${config.customize.level}/${config.customize.dataMap}`
const map = await this.$dataRoomAxios.get(decodeURI(mapUrl), {}, true) const map = await this.$dataRoomAxios.get(decodeURI(mapUrl), {}, true)
echarts.registerMap(config.customize.scope, map) echarts.registerMap(config.customize.scope, map)
this.charts.setOption(option) this.charts.setOption(this.option)
this.charts.on('click', async(params)=> { this.charts.on('click', async(params)=> {
const index = option.graphic.findIndex(i => i.style.text === params.name); if(params.name=='') return
if(params.name=='' || index !== -1) return
if(config.customize.down===false||this.level==='province') return if(config.customize.down===false||this.level==='province') return
const idx = option.graphic.length + 1;
option.graphic.push({
type: "text",
left: `${idx * 220}px`,
top: "5%",
style: {
text: params.name,
font: `bolder ${config.customize.fontSize}px "Microsoft YaHei", sans-serif`,
fill: config.customize.fontGraphicColor,
},
onclick: async() => {
const mapUrl =`${window.BS_CONFIG?.httpConfigs?.baseURL}/static/chinaMap/${params.name=='中华人民共和国'?'country':'province'}/${params.name}.json`
const map = await this.$dataRoomAxios.get(decodeURI(mapUrl), {}, true)
// 利用函数的作用域，可以直接拿上面的name来用
const index = option.graphic.findIndex(i => i.style.text === params.name);
// 点击元素之后的所有元素全部删除
option.graphic.splice(index + 1);
// 很多操作重复了，你可以将公共部分抽离出来
option.geo.map = params.name;
this.changeData({...config,customize:{...config.customize,level:'province',scope:params.name}})
echarts.registerMap(params.name, map);
this.charts.setOption(option, true);
},
});
this.level='province' this.level='province'
const mapUrl =`${window.BS_CONFIG?.httpConfigs?.baseURL}/static/chinaMap/province/${params.name}.json` const mapUrl =`${window.BS_CONFIG?.httpConfigs?.baseURL}/static/chinaMap/province/${params.name}.json`
const map = await this.$dataRoomAxios.get(decodeURI(mapUrl), {}, true) const map = await this.$dataRoomAxios.get(decodeURI(mapUrl), {}, true)
this.changeData({...config,customize:{...config.customize,level:'province',scope:params.name}}) this.changeData({...config,customize:{...config.customize,level:'province',scope:params.name}})
option.geo.map = params.name this.option.geo.map = params.name
echarts.registerMap(params.name, map); echarts.registerMap(params.name, map);
this.charts.setOption(option, true); this.charts.setOption(this.option, true);
}); });
} }
} }
@ -343,4 +302,11 @@ export default {
.auto-theme { .auto-theme {
background-color: rgba(0, 0, 0, 0); background-color: rgba(0, 0, 0, 0);
} }
.bs-design-wrap{
position: relative;
.button{
position: absolute;
z-index: 999;
}
}
</style> </style>

7
data-room-ui/packages/BasicComponents/Map/setting.vue
Unescape Escape View File

@ -65,6 +65,7 @@
v-model="config.customize.dataMap" v-model="config.customize.dataMap"
popper-class="bs-el-select" popper-class="bs-el-select"
class="bs-el-select" class="bs-el-select"
@change="changeMap()"
> >
<el-option <el-option
v-for="map in mapList" v-for="map in mapList"
@ -307,14 +308,20 @@ export default {
this.mapList = res this.mapList = res
}) })
}, },
changeMap(val){
this.config.customize.scope=val.slice(0,-5)
},
changeLevel () { changeLevel () {
this.getMapList() this.getMapList()
if (this.config.customize.level === 'country') { if (this.config.customize.level === 'country') {
this.config.customize.dataMap = '中华人民共和国.json' this.config.customize.dataMap = '中华人民共和国.json'
this.config.customize.scope='中国'
} else if (this.config.customize.level === 'province') { } else if (this.config.customize.level === 'province') {
this.config.customize.dataMap = '安徽省.json' this.config.customize.dataMap = '安徽省.json'
this.config.customize.scope='安徽省'
this.config.customize.down=false this.config.customize.down=false
}else{ }else{
this.config.customize.scope='世界'
this.config.customize.down=false this.config.customize.down=false
} }
}, },

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

@ -5,7 +5,7 @@
> >
<dv-scroll-board <dv-scroll-board
:key="updateKey" :key="updateKey"
:class="{'light-theme':customTheme === 'light','auto-theme':customTheme =='auto','dark-theme':customTheme =='dark'}" :class="{'light-theme':customTheme === 'light','auto-theme':customTheme =='dark'}"
:config="option" :config="option"
@click="rowClick" @click="rowClick"
/> />

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

@ -6,7 +6,7 @@
<dv-scroll-ranking-board <dv-scroll-ranking-board
:key="updateKey" :key="updateKey"
class="ranking-box" class="ranking-box"
:class="{'light-theme':customTheme === 'light','auto-theme':customTheme =='auto','dark-theme':customTheme =='dark'}" :class="{'light-theme':customTheme === 'light','auto-theme':customTheme =='dark'}"
:config="option" :config="option"
@click="rowClick" @click="rowClick"
/> />

6
data-room-ui/packages/BasicComponents/Tables/index.vue
Unescape Escape View File

@ -68,9 +68,8 @@ export default {
computed: { computed: {
headerCellStyle () { headerCellStyle () {
const headerBackgroundColor = { const headerBackgroundColor = {
dark: '#141414',
light: '#ffffff', light: '#ffffff',
auto: 'transparent' dark: 'transparent'
} }
if (document.getElementById(this.config.code)?.querySelector('tr')) { if (document.getElementById(this.config.code)?.querySelector('tr')) {
document document
@ -124,9 +123,8 @@ export default {
cellStyle ({ row, column, rowIndex, columnIndex }) { cellStyle ({ row, column, rowIndex, columnIndex }) {
const bodyBackgroundColor = { const bodyBackgroundColor = {
dark: '#141414',
light: '#ffffff', light: '#ffffff',
auto: 'transparent' dark: 'transparent'
} }
const initColor = this.customTheme === 'light' ? '#000000' : '#ffffff' const initColor = this.customTheme === 'light' ? '#000000' : '#ffffff'
const style = { const style = {

4
data-room-ui/packages/BasicComponents/Tables/settingConfig.js
Unescape Escape View File

@ -41,13 +41,13 @@ const customConfig = {
// 表格头部背景颜色 // 表格头部背景颜色
headerBackgroundColor: '#232832', headerBackgroundColor: '#232832',
// 表格头部字体颜色 // 表格头部字体颜色
headerFontColor: '#ffffff', headerFontColor: '#fff',
// 表格头部字体大小 // 表格头部字体大小
headerFontSize: 14, headerFontSize: 14,
// 表格主体背景颜色 // 表格主体背景颜色
bodyBackgroundColor: '', bodyBackgroundColor: '',
// 表格主体字体颜色 // 表格主体字体颜色
bodyFontColor: '#ffffff', bodyFontColor: 'rgb(155 159 172)',
// 表格主体字体大小 // 表格主体字体大小
bodyFontSize: 14, bodyFontSize: 14,
// 表格是否需要斑马纹 // 表格是否需要斑马纹

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

@ -176,7 +176,7 @@ export default {
color: #000000; color: #000000;
} }
.dark-theme { .dark-theme {
background-color: #000000; background-color: transparent;
color: #ffffff; color: #ffffff;
} }
.auto-theme { .auto-theme {

2
data-room-ui/packages/BasicComponents/TimeCountDown/settingConfig.js
Unescape Escape View File

@ -20,7 +20,7 @@ const customConfig = {
customize: { customize: {
fontSize: 28, fontSize: 28,
fontWeight: 700, fontWeight: 700,
color: '#ffffff' color: 'rgb(155 159 172)'
} }
} }

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

@ -361,7 +361,8 @@ export default {
'changePageConfig', 'changePageConfig',
'changeLayout', 'changeLayout',
'changeChartKey', 'changeChartKey',
'changeRefreshConfig' 'changeRefreshConfig',
'changePageInfo'
]), ]),
// 切换主题时更新主题配置 // 切换主题时更新主题配置
changeTheme (theme) { changeTheme (theme) {
@ -440,18 +441,18 @@ export default {
} }
}, },
// 改变 // 改变
changeChart (themeName) { // changeChart (themeName) {
// 统一改变组件的主题 // // 统一改变组件的主题
const newChartList = cloneDeep(this.pageInfo.chartList) // const newChartList = cloneDeep(this.pageInfo.chartList)
const chartList = newChartList.map(chart => { // const chartList = newChartList.map(chart => {
chart.option.theme = themeName // chart.option.theme = themeName
chart.key = new Date().getTime() // chart.key = new Date().getTime()
// this.changeChartKey(chart.code) // // this.changeChartKey(chart.code)
return chart // return chart
}) // })
// 可能需要强制性更新chartList // // 可能需要强制性更新chartList
this.changeLayout(chartList) // this.changeLayout(chartList)
}, // },
// 新增数据集 // 新增数据集
addCacheDataSet () { addCacheDataSet () {

61
data-room-ui/packages/BigScreenDesign/PageDesignTop.vue
Unescape Escape View File

@ -10,33 +10,31 @@
<span class="logo-text name-span">{{ pageInfo.name }}</span> <span class="logo-text name-span">{{ pageInfo.name }}</span>
</div> </div>
<div class="head-btn-group"> <div class="head-btn-group">
<el-switch <el-dropdown
v-model="pageInfo.pageConfig.customTheme" trigger="click"
active-text="暗黑" class="align-list-dropdown"
inactive-text="明亮"
class="bs-el-switch theme-switch"
active-color="#007aff"
active-value="dark"
inactive-value="light"
@change="changeTheme"
/>
<el-tooltip
v-for="(mode,index) in alignList"
:key="mode.value"
popper-class="bs-el-tooltip-dark"
effect="dark"
:content="mode.label"
placement="top"
> >
<CusBtn <CusBtn
class="align-btn" type="primary"
@click="setAlign(mode.value)"
> >
<icon-svg 对齐<i class="el-icon-arrow-down el-icon--right" />
:name="iconList[index]"
/>
</CusBtn> </CusBtn>
</el-tooltip> <el-dropdown-menu
slot="dropdown"
class="align-dropdown-menu"
>
<el-dropdown-item
v-for="(mode,index) in alignList"
:key="mode.value"
@click.native="setAlign(mode.value)"
>
<icon-svg
style="padding:3px 20px"
:name="iconList[index]"
/>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<CusBtn <CusBtn
:loading="saveAndPreviewLoading" :loading="saveAndPreviewLoading"
@ -600,5 +598,22 @@ export default {
color: var(--bs-el-color-primary)!important; color: var(--bs-el-color-primary)!important;
} }
} }
.align-list-dropdown{
color: #ffffff!important;
}
}
// 自定义dropdown的样式
.align-dropdown-menu{
background-color: var(--bs-background-2)!important;
border: 1px solid var(--bs-border-1);
/deep/ .el-dropdown-menu__item{
background-color: var(--bs-background-2)!important;
&:hover {
color: var(--bs-el-color-primary) !important;
background-color: var(--bs-el-background-3) !important;
}
}
} }
</style> </style>

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

@ -211,7 +211,7 @@ export default {
color: #000000; color: #000000;
} }
.auto-theme{ .auto-theme{
background-color: rgba(0,0,0,0); background-color: transparent;
} }
</style> </style>

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

@ -313,7 +313,7 @@ export default {
if (_chart.type === 'customComponent') { if (_chart.type === 'customComponent') {
option = { option = {
...this.plotList?.find((plot) => plot.name === _chart.name)?.option, ...this.plotList?.find((plot) => plot.name === _chart.name)?.option,
theme: this.pageConfig.customTheme theme: this.pageConfig.customTheme === 'dark' ? 'transparent' : 'light'
} }
} }
const config = { const config = {
@ -345,7 +345,7 @@ export default {
if (_chart.type === 'customComponent') { if (_chart.type === 'customComponent') {
option = { option = {
...this.plotList?.find((plot) => plot.name === _chart.name)?.option, ...this.plotList?.find((plot) => plot.name === _chart.name)?.option,
theme: this.pageConfig.customTheme theme: this.pageConfig.customTheme === 'dark' ? 'transparent' : 'light'
} }
} }
const config = { const config = {

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

@ -117,10 +117,20 @@ export default {
* @description: 更新chart * @description: 更新chart
* @param {Object} config * @param {Object} config
*/ */
changeData (config, filterList) { changeData(config, filterList) {
const list = config?.paramsList?.map((item) => {
if (item.value === '${level}') {
return {...item,value:config.customize.level}
} else if (item.value === '${name}') {
return {...item,value:config.customize.scope}
} else {
return item
}
})
const params = { const params = {
chart: { chart: {
...config, ...config,
paramsList:list?[...list]:[],
option: undefined option: undefined
}, },
current: 1, current: 1,

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

@ -1,5 +1,4 @@
/** /**
* @Description: 主题设置格式化 * @Description: 主题设置格式化
* @author liu.shiyi * @author liu.shiyi
@ -25,16 +24,16 @@ export function settingToTheme (config, type) {
if (config.customize && Object.keys(config.customize).length) { if (config.customize && Object.keys(config.customize).length) {
// customize属性存在层级 // customize属性存在层级
for (const item in config.customize) { for (const item in config.customize) {
const value = config.customize[item]; const value = config.customize[item]
//如果包含二级属性 // 如果包含二级属性
if (value && typeof value === 'object' && Object.keys(value).length){ if (value && typeof value === 'object' && Object.keys(value).length) {
// 对于二级属性 // 对于二级属性
for (const subKey in value) { for (const subKey in value) {
if (subKey.includes('color') || subKey.includes('Color') || subKey.includes('BGC')){ if (subKey.includes('color') || subKey.includes('Color') || subKey.includes('BGC')) {
theme[type][`${item}_${subKey}`] = value[subKey]; theme[type][`${item}_${subKey}`] = value[subKey]
} }
} }
}else{ } else {
// 如果只有一级属性 // 如果只有一级属性
if (item.includes('color') || item.includes('Color') || item.includes('BGC')) { if (item.includes('color') || item.includes('Color') || item.includes('BGC')) {
theme[type][item] = config.customize[item] theme[type][item] = config.customize[item]
@ -45,7 +44,7 @@ export function settingToTheme (config, type) {
} }
return theme return theme
} else { } else {
return config?.theme || {dark:{}, light:{}} return config?.theme || { dark: {}, light: {} }
} }
} }
// 将保存的theme主题设置（颜色）存放到chartList // 将保存的theme主题设置（颜色）存放到chartList
@ -53,7 +52,7 @@ export function themeToSetting (chartList, type) {
// 排除掉主题非暗黑非明亮的情况 // 排除掉主题非暗黑非明亮的情况
if (['dark', 'light'].includes(type)) { if (['dark', 'light'].includes(type)) {
chartList.forEach(chart => { chartList.forEach(chart => {
chart.option.theme = type chart.option.theme = type === 'dark' ? 'transparent' : 'light'
if (chart.theme && chart.theme[type]) { if (chart.theme && chart.theme[type]) {
// 如果是g2组件或者远程组件 // 如果是g2组件或者远程组件
if (['customComponent', 'remoteComponent'].includes(chart.type)) { if (['customComponent', 'remoteComponent'].includes(chart.type)) {
@ -67,24 +66,23 @@ export function themeToSetting (chartList, type) {
} else { } else {
// 如果是普通组件 // 如果是普通组件
if (chart.customize && Object.keys(chart.customize).length) { if (chart.customize && Object.keys(chart.customize).length) {
for(let key in chart.theme[type]){ for (const key in chart.theme[type]) {
const value = chart.theme[type][key]; const value = chart.theme[type][key]
// 如果对应的是二级属性 // 如果对应的是二级属性
if (key.includes('_')){ if (key.includes('_')) {
const [propertyName, subPropertyName] = key.split('_'); const [propertyName, subPropertyName] = key.split('_')
if (!chart.customize[propertyName]) { if (!chart.customize[propertyName]) {
chart.customize[propertyName] = {} chart.customize[propertyName] = {}
}else{ } else {
chart.customize[propertyName][subPropertyName] = value; chart.customize[propertyName][subPropertyName] = value
}
}else{
// 对应的一级属性
if (Object.prototype.hasOwnProperty.call(chart.customize, key)) {
// 更新 customize 中对应项的值为 theme 中的属性值
chart.customize[key] = chart.theme[type][key]
}
} }
} else {
// 对应的一级属性
if (Object.prototype.hasOwnProperty.call(chart.customize, key)) {
// 更新 customize 中对应项的值为 theme 中的属性值
chart.customize[key] = chart.theme[type][key]
}
}
} }
for (const item in chart.customize) { for (const item in chart.customize) {
// 检查 obj 中是否存在与 customize 相对应的属性 // 检查 obj 中是否存在与 customize 相对应的属性

Write Preview
Loading…
Cancel
Save