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

main
liu.shiyi 2 years ago
commit d69fd33724

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

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

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

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

@ -147,7 +147,6 @@
</template> </template>
<script> <script>
import cloneDeep from 'lodash/cloneDeep' import cloneDeep from 'lodash/cloneDeep'
// import 'data-room-ui/assets/symbols/bigScreenIcon/iconfont.js'
import basicComponents from 'data-room-ui/js/config/basicComponentsConfig' import basicComponents from 'data-room-ui/js/config/basicComponentsConfig'
import g2PlotComponents, { getCustomPlots } from '../G2Plots/plotList' import g2PlotComponents, { getCustomPlots } from '../G2Plots/plotList'
import borderComponents from 'data-room-ui/js/config/borderComponentsConfig' import borderComponents from 'data-room-ui/js/config/borderComponentsConfig'

File diff suppressed because one or more lines are too long

@ -1,128 +0,0 @@
{
"id": "4203436",
"name": "big-screen-icon",
"font_family": "iconfont",
"css_prefix_text": "icon-",
"description": "",
"glyphs": [
{
"icon_id": "37005716",
"name": "16marquee",
"font_class": "a-16marquee",
"unicode": "e621",
"unicode_decimal": 58913
},
{
"icon_id": "36836851",
"name": "08z9iframe",
"font_class": "a-08z9iframe",
"unicode": "e611",
"unicode_decimal": 58897
},
{
"icon_id": "36836852",
"name": "10hengxian",
"font_class": "a-10hengxian",
"unicode": "e612",
"unicode_decimal": 58898
},
{
"icon_id": "36836853",
"name": "04table",
"font_class": "a-04table",
"unicode": "e613",
"unicode_decimal": 58899
},
{
"icon_id": "36836854",
"name": "01carousel",
"font_class": "a-01carousel",
"unicode": "e614",
"unicode_decimal": 58900
},
{
"icon_id": "36836855",
"name": "11shuxian",
"font_class": "a-11shuxian",
"unicode": "e615",
"unicode_decimal": 58901
},
{
"icon_id": "36836856",
"name": "07timeCountDown",
"font_class": "a-07timeCountDown",
"unicode": "e616",
"unicode_decimal": 58902
},
{
"icon_id": "36836857",
"name": "03rank",
"font_class": "a-03rank",
"unicode": "e617",
"unicode_decimal": 58903
},
{
"icon_id": "36836858",
"name": "02scrollBoard",
"font_class": "a-02scrollBoard",
"unicode": "e618",
"unicode_decimal": 58904
},
{
"icon_id": "36836859",
"name": "14button",
"font_class": "a-14button",
"unicode": "e619",
"unicode_decimal": 58905
},
{
"icon_id": "36836860",
"name": "13input",
"font_class": "a-13input",
"unicode": "e61a",
"unicode_decimal": 58906
},
{
"icon_id": "36836861",
"name": "12video",
"font_class": "a-12video",
"unicode": "e61b",
"unicode_decimal": 58907
},
{
"icon_id": "36836862",
"name": "15link",
"font_class": "a-15link",
"unicode": "e61c",
"unicode_decimal": 58908
},
{
"icon_id": "36836863",
"name": "09digtal",
"font_class": "a-09digtal",
"unicode": "e61d",
"unicode_decimal": 58909
},
{
"icon_id": "36836864",
"name": "06currentTime",
"font_class": "a-06currentTime",
"unicode": "e61e",
"unicode_decimal": 58910
},
{
"icon_id": "36836865",
"name": "05map",
"font_class": "a-05map",
"unicode": "e61f",
"unicode_decimal": 58911
},
{
"icon_id": "36836866",
"name": "00LcdpText",
"font_class": "a-00LcdpText",
"unicode": "e620",
"unicode_decimal": 58912
}
]
}

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

Loading…
Cancel
Save