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;
}
.dark-theme {
background-color: #000000;
background-color:transparent;
color: #ffffff;
}
.auto-theme {

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

@ -21,7 +21,7 @@ const customConfig = {
customize: {
fontSize: 28,
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%"
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
:id="`chart${config.code}`"
style="width: 100%; height: 100%"
@ -33,7 +34,8 @@ export default {
return {
charts: null,
hasData: false,
level:''
level:'',
option:{}
}
},
computed: {
@ -85,6 +87,15 @@ export default {
}
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) {
this.charts = echarts.init(
document.getElementById(`chart${this.config.code}`)
@ -106,10 +117,10 @@ export default {
}
})
echarts.registerMap(config.customize.scope, res)
const option = {
this.option = {
nameMap:config.customize.level=='world'?nameMap:'',
graphic: [
],
// graphic: [
// ],
geo: {
map: config.customize.scope,
zlevel: 10,
@ -228,7 +239,7 @@ export default {
]
}
if (config.customize.visual) {
option.visualMap = {
this.option.visualMap = {
show: false,
min: config.customize.range[0],
max: config.customize.range[1],
@ -238,69 +249,17 @@ export default {
}
}
}
if(config.customize.down){
// 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.setOption(this.option)
this.charts.on('click', async(params)=> {
const index = option.graphic.findIndex(i => i.style.text === params.name);
if(params.name=='' || index !== -1) return
if(params.name=='') 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'
const mapUrl =`${window.BS_CONFIG?.httpConfigs?.baseURL}/static/chinaMap/province/${params.name}.json`
const map = await this.$dataRoomAxios.get(decodeURI(mapUrl), {}, true)
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);
this.charts.setOption(option, true);
this.charts.setOption(this.option, true);
});
})
}
@ -317,4 +276,11 @@ export default {
.auto-theme {
background-color: rgba(0, 0, 0, 0);
}
.bs-design-wrap{
position: relative;
.button{
position: absolute;
z-index: 999;
}
}
</style>

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

@ -69,6 +69,7 @@
v-model="config.customize.dataMap"
popper-class="bs-el-select"
class="bs-el-select"
@change="changeMap"
>
<el-option
v-for="map in mapList"
@ -89,7 +90,7 @@
active-color="#007aff"
/>
</el-form-item>
<el-form-item
<!-- <el-form-item
v-if="config.customize.down"
label="头部字体颜色"
label-width="100px"
@ -110,7 +111,7 @@
controls-position="right"
:step="1"
/>
</el-form-item>
</el-form-item> -->
<el-form-item
label="地图分割线颜色"
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.mapList = res
})
},
changeMap(val){
this.config.customize.scope=val.slice(0,-5)
},
changeLevel () {
if (this.config.customize.level === 'country') {
this.config.customize.dataMap = '中华人民共和国.json'
this.config.customize.scope='中国'
} else if (this.config.customize.level === 'province') {
this.getMapList()
this.config.customize.dataMap = '安徽省.json'
this.config.customize.scope='安徽省'
this.config.customize.down=false
}else{
this.config.customize.scope='世界'
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%"
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
:id="`chart${config.code}`"
style="width: 100%; height: 100%"
@ -32,7 +33,8 @@ export default {
return {
charts: null,
hasData: false,
level:''
level:'',
option:{}
}
},
computed: {
@ -88,11 +90,20 @@ export default {
}
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) {
this.charts = echarts.init(
document.getElementById(`chart${this.config.code}`)
)
const option = {
this.option = {
// 背景颜色
backgroundColor: config.customize.backgroundColor,
graphic: [
@ -252,7 +263,7 @@ export default {
]
}
if (config.customize.visual) {
option.visualMap = {
this.option.visualMap = {
show: true,
min: config.customize.range[0],
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 map = await this.$dataRoomAxios.get(decodeURI(mapUrl), {}, true)
echarts.registerMap(config.customize.scope, map)
this.charts.setOption(option)
this.charts.setOption(this.option)
this.charts.on('click', async(params)=> {
const index = option.graphic.findIndex(i => i.style.text === params.name);
if(params.name=='' || index !== -1) return
if(params.name=='') 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'
const mapUrl =`${window.BS_CONFIG?.httpConfigs?.baseURL}/static/chinaMap/province/${params.name}.json`
const map = await this.$dataRoomAxios.get(decodeURI(mapUrl), {}, true)
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);
this.charts.setOption(option, true);
this.charts.setOption(this.option, true);
});
}
}
@ -343,4 +302,11 @@ export default {
.auto-theme {
background-color: rgba(0, 0, 0, 0);
}
.bs-design-wrap{
position: relative;
.button{
position: absolute;
z-index: 999;
}
}
</style>

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

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

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

@ -6,7 +6,7 @@
<dv-scroll-ranking-board
:key="updateKey"
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"
@click="rowClick"
/>

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

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

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

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

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

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

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

@ -20,7 +20,7 @@ const customConfig = {
customize: {
fontSize: 28,
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',
'changeLayout',
'changeChartKey',
'changeRefreshConfig'
'changeRefreshConfig',
'changePageInfo'
]),
// 切换主题时更新主题配置
changeTheme (theme) {
@ -440,18 +441,18 @@ export default {
}
},
// 改变
changeChart (themeName) {
// 统一改变组件的主题
const newChartList = cloneDeep(this.pageInfo.chartList)
const chartList = newChartList.map(chart => {
chart.option.theme = themeName
chart.key = new Date().getTime()
// this.changeChartKey(chart.code)
return chart
})
// 可能需要强制性更新chartList
this.changeLayout(chartList)
},
// changeChart (themeName) {
// // 统一改变组件的主题
// const newChartList = cloneDeep(this.pageInfo.chartList)
// const chartList = newChartList.map(chart => {
// chart.option.theme = themeName
// chart.key = new Date().getTime()
// // this.changeChartKey(chart.code)
// return chart
// })
// // 可能需要强制性更新chartList
// this.changeLayout(chartList)
// },
// 新增数据集
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>
</div>
<div class="head-btn-group">
<el-switch
v-model="pageInfo.pageConfig.customTheme"
active-text="暗黑"
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"
<el-dropdown
trigger="click"
class="align-list-dropdown"
>
<CusBtn
class="align-btn"
@click="setAlign(mode.value)"
type="primary"
>
<icon-svg
:name="iconList[index]"
/>
对齐<i class="el-icon-arrow-down el-icon--right" />
</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
:loading="saveAndPreviewLoading"
@ -600,5 +598,22 @@ export default {
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>

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

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

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

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

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

@ -117,10 +117,20 @@ export default {
* @description: 更新chart
* @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 = {
chart: {
...config,
paramsList:list?[...list]:[],
option: undefined
},
current: 1,

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

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

Write Preview
Loading…
Cancel
Save