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

main
wu.jian2 2 years ago
commit fbc0b8ec8a

@ -80,6 +80,15 @@ public class ScreenMapChart extends Chart {
@ApiModelProperty(notes = "值")
private String value;
@ApiModelProperty(notes = "图形字体颜色")
private String fontGraphicColor;
@ApiModelProperty(notes = "图形字体大小")
private String fontSize;
@ApiModelProperty(notes = "是否开启下钻")
private Boolean down;
}

@ -12,7 +12,7 @@
<img alt="Company" src="https://img.shields.io/badge/Author-科大国创云网科技有限公司-blue.svg">
</p>
🔥DataRoom是一款基于SpringBoot、MyBatisPlus、ElementUI、G2Plot、Echarts等技术栈的大屏设计器具备大屏设计、预览能力支持MySQL、Oracle、PostgreSQL、JSON、JS、HTTP、Groovy等数据集接入使用简单完全免费代码开源。
🔥DataRoom是一款基于SpringBoot、MyBatisPlus、ElementUI、G2Plot、Echarts等技术栈的大屏设计器具备大屏设计、预览能力支持MySQL、Oracle、PostgreSQL、MSSQL、JSON、JS、HTTP、Groovy等数据集接入使用简单完全免费代码开源。
## 效果图

@ -1,6 +1,6 @@
{
"name": "@gcpaas/data-room-ui",
"version": "1.0.1-2023082201-Alpha",
"version": "1.0.1-2023082902-Alpha",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
@ -3397,27 +3397,6 @@
"whatwg-fetch": "^3.6.2"
},
"dependencies": {
"@vue/vue-loader-v15": {
"version": "npm:vue-loader@15.10.2",
"resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.10.2.tgz",
"integrity": "sha512-ndeSe/8KQc/nlA7TJ+OBhv2qalmj1s+uBs7yHDRFaAXscFTApBzY9F1jES3bautmgWjDlDct0fw8rPuySDLwxw==",
"dev": true,
"requires": {
"@vue/component-compiler-utils": "^3.1.0",
"hash-sum": "^1.0.2",
"loader-utils": "^1.1.0",
"vue-hot-reload-api": "^2.3.0",
"vue-style-loader": "^4.1.0"
},
"dependencies": {
"hash-sum": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/hash-sum/-/hash-sum-1.0.2.tgz",
"integrity": "sha512-fUs4B4L+mlt8/XAtSOGMUO1TXmAelItBPtJG7CyHJfYTdDjwisntGO2JQz7oUsatOY9o68+57eziUVNw/mRHmA==",
"dev": true
}
}
},
"acorn-walk": {
"version": "8.2.0",
"resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.2.0.tgz",
@ -3489,26 +3468,6 @@
"tapable": "^2.0.0"
}
},
"json5": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
"integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
"dev": true,
"requires": {
"minimist": "^1.2.0"
}
},
"loader-utils": {
"version": "1.4.2",
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.2.tgz",
"integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
"dev": true,
"requires": {
"big.js": "^5.2.2",
"emojis-list": "^3.0.0",
"json5": "^1.0.1"
}
},
"ms": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@ -3726,6 +3685,47 @@
"lodash": "^4.17.4"
}
},
"@vue/vue-loader-v15": {
"version": "npm:vue-loader@15.10.2",
"resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.10.2.tgz",
"integrity": "sha512-ndeSe/8KQc/nlA7TJ+OBhv2qalmj1s+uBs7yHDRFaAXscFTApBzY9F1jES3bautmgWjDlDct0fw8rPuySDLwxw==",
"dev": true,
"requires": {
"@vue/component-compiler-utils": "^3.1.0",
"hash-sum": "^1.0.2",
"loader-utils": "^1.1.0",
"vue-hot-reload-api": "^2.3.0",
"vue-style-loader": "^4.1.0"
},
"dependencies": {
"hash-sum": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/hash-sum/-/hash-sum-1.0.2.tgz",
"integrity": "sha512-fUs4B4L+mlt8/XAtSOGMUO1TXmAelItBPtJG7CyHJfYTdDjwisntGO2JQz7oUsatOY9o68+57eziUVNw/mRHmA==",
"dev": true
},
"json5": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
"integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
"dev": true,
"requires": {
"minimist": "^1.2.0"
}
},
"loader-utils": {
"version": "1.4.2",
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.2.tgz",
"integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
"dev": true,
"requires": {
"big.js": "^5.2.2",
"emojis-list": "^3.0.0",
"json5": "^1.0.1"
}
}
}
},
"@vue/vue2-jest": {
"version": "27.0.0",
"resolved": "https://registry.npmjs.org/@vue/vue2-jest/-/vue2-jest-27.0.0.tgz",

@ -0,0 +1,321 @@
<template>
<div
style="width: 100%; height: 100%"
class="bs-design-wrap bs-bar"
>
<div
:id="`chart${config.code}`"
style="width: 100%; height: 100%"
/>
</div>
</template>
<script>
import 'insert-css'
import * as echarts from 'echarts'
import {nameMap} from './json/mapData.js'
import commonMixins from 'data-room-ui/js/mixins/commonMixins.js'
import paramsMixins from 'data-room-ui/js/mixins/paramsMixins'
import linkageMixins from 'data-room-ui/js/mixins/linkageMixins'
export default {
name: 'MapCharts',
mixins: [paramsMixins, commonMixins, linkageMixins],
props: {
id: {
type: String,
default: ''
},
config: {
type: Object,
default: () => ({})
}
},
data () {
return {
charts: null,
hasData: false,
level:''
}
},
computed: {
Data () {
return JSON.parse(JSON.stringify(this.config))
}
},
watch: {
Data: {
handler (newVal, oldVal) {
if (newVal.w !== oldVal.w || newVal.h !== oldVal.h) {
this.$nextTick(() => {
this.charts.resize()
})
}
},
deep: true
}
},
mounted () {
this.chartInit()
},
beforeDestroy () {
this.charts?.clear()
},
methods: {
chartInit () {
const config = this.config
// keycodelist
if (this.config.code === this.config.key || this.isPreview) {
//
this.changeDataByCode(config).then((res) => {
//
// config = this.changeStyle(res)
this.newChart(config)
}).catch(() => {})
} else {
// changeStylekey,chart
this.changeData(config).then((res) => {
//
this.newChart(res)
})
}
},
dataFormatting (config, data) {
config.option = {
...config.option,
data: data?.data
}
return config
},
async newChart (config) {
this.charts = echarts.init(
document.getElementById(`chart${this.config.code}`)
)
this.level=config.customize.level
const lines_coord = []
let fromCoord=[]
let coord=[]
const mapUrl =config.customize.level==='world'?`${window.BS_CONFIG?.httpConfigs?.baseURL}/static/worldMap/world.json`:`${window.BS_CONFIG?.httpConfigs?.baseURL}/static/chinaMap/${config.customize.level}/${config.customize.dataMap}`
this.$dataRoomAxios.get(decodeURI(mapUrl), {}, true).then(res=>{
this.config.option.data.forEach(val => {
lines_coord.push({value:val.value,msg:{...val}, coords:[[val.lat1,val.lng1],[val.lat2,val.lng2]]})
if(val.type==='move_in'){
coord.push({name:val.from,value:[val.lat1,val.lng1,val.value],msg:{...val}})
fromCoord.push({name:val.to,value:[val.lat2,val.lng2,val.value],msg:{...val}})
}
if(val.type==='move_out'){
coord.push({name:val.to,value:[val.lat2,val.lng2,val.value],msg:{...val}})
fromCoord.push({name:val.from,value:[val.lat1,val.lng1,val.value],msg:{...val}})
}
})
echarts.registerMap(config.customize.scope, res)
const option = {
nameMap:config.customize.level=='world'?nameMap:'',
graphic: [
],
geo: {
map: config.customize.scope,
zlevel: 10,
show:true,
layoutCenter: ['50%', '50%'],
roam: true,
layoutSize: "100%",
zoom: 1,
label: {
//
normal: {
show: config.customize.mapName,
textStyle: {
color: '#fff'
}
},
//
emphasis: {
textStyle: {
color: '#fff'
}
}
},
//
itemStyle: {
normal: {
borderColor: config.customize.mapLineColor,
borderWidth: 1,
areaColor: config.customize.areaColor,
shadowColor: 'fffff',
shadowOffsetX: -2,
shadowOffsetY: 2,
shadowBlur: 10
},
//
emphasis: {
areaColor: '#389BB7',
borderWidth: 0
}
}
},
tooltip: {
backgroundColor: config.customize.tooltipBackgroundColor,
borderColor: config.customize.borderColor,
show: true,
textStyle: {
color: config.customize.fontColor,
},
},
series: [
{
type:'effectScatter',
coordinateSystem: 'geo',
zlevel: 15,
symbolSize:8,
rippleEffect: {
period: 4, brushType: 'stroke', scale: 4
},
tooltip: {
trigger: 'item',
formatter(params) {
const a= eval(config.customize.scatterFormatter)
return a
},
},
itemStyle:{
color:config.customize.scatterColor,
opacity:1
},
data:coord
},
{
type:'effectScatter',
coordinateSystem: 'geo',
zlevel: 15,
symbolSize:12,
tooltip: {
trigger: 'item',
formatter(params) {
const a= eval(config.customize.scatterFormatter)
return a
},
},
rippleEffect: {
period: 6, brushType: 'stroke', scale: 8
},
itemStyle:{
color:config.customize.scatterCenterColor,
opacity:1
},
data:fromCoord
},
{
type:'lines',
coordinateSystem:'geo',
zlevel: 15,
tooltip: {
trigger: 'item',
formatter(params) {
const a= eval(config.customize.lineFormatter)
return a
},
},
effect: {
show: true, period: 5, trailLength: 0, symbol: config.customize.symbol, color:config.customize.symbolColor,symbolSize: config.customize.symbolSize,
},
lineStyle: {
normal: {color: function(value){
return '#ffffff'
},width: 2, opacity: 0.6, curveness: 0.2 }
},
data:lines_coord
}
]
}
if (config.customize.visual) {
option.visualMap = {
show: false,
min: config.customize.range[0],
max: config.customize.range[1],
seriesIndex: [0,2],
inRange: {
color: config.customize.rangeColor
}
}
}
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.on('click', async(params)=> {
const index = option.graphic.findIndex(i => i.style.text === params.name);
if(params.name=='' || index !== -1) 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
echarts.registerMap(params.name, map);
this.charts.setOption(option, true);
});
})
}
}
}
</script>
<style lang="scss" scoped>
@import '../../assets/style/echartStyle';
.light-theme {
background-color: #ffffff;
color: #000000;
}
.auto-theme {
background-color: rgba(0, 0, 0, 0);
}
</style>

@ -0,0 +1,219 @@
export const nameMap = {
Afghanistan: '阿富汗',
Singapore: '新加坡',
Angola: '安哥拉',
Albania: '阿尔巴尼亚',
'United Arab Emirates': '阿联酋',
Argentina: '阿根廷',
Armenia: '亚美尼亚',
'French Southern and Antarctic Lands':
'法属南半球和南极领地',
Australia: '澳大利亚',
Austria: '奥地利',
Azerbaijan: '阿塞拜疆',
Burundi: '布隆迪',
Belgium: '比利时',
Benin: '贝宁',
'Burkina Faso': '布基纳法索',
Bangladesh: '孟加拉国',
Bulgaria: '保加利亚',
'The Bahamas': '巴哈马',
'Bosnia and Herzegovina': '波斯尼亚和黑塞哥维那',
Belarus: '白俄罗斯',
Belize: '伯利兹',
Bermuda: '百慕大',
Bolivia: '玻利维亚',
Brazil: '巴西',
Brunei: '文莱',
Bhutan: '不丹',
Botswana: '博茨瓦纳',
'Central African Republic': '中非共和国',
Canada: '加拿大',
Switzerland: '瑞士',
Chile: '智利',
China: '中国',
'Ivory Coast': '象牙海岸',
Cameroon: '喀麦隆',
'Democratic Republic of the Congo': '刚果民主共和国',
'Republic of the Congo': '刚果共和国',
Colombia: '哥伦比亚',
'Costa Rica': '哥斯达黎加',
Cuba: '古巴',
'Northern Cyprus': '北塞浦路斯',
Cyprus: '塞浦路斯',
'Czech Republic': '捷克共和国',
Germany: '德国',
Djibouti: '吉布提',
Denmark: '丹麦',
'Dominican Republic': '多明尼加共和国',
Algeria: '阿尔及利亚',
Ecuador: '厄瓜多尔',
Egypt: '埃及',
Eritrea: '厄立特里亚',
Spain: '西班牙',
Estonia: '爱沙尼亚',
Ethiopia: '埃塞俄比亚',
Finland: '芬兰',
Fiji: '斐',
'Falkland Islands': '福克兰群岛',
France: '法国',
Gabon: '加蓬',
'United Kingdom': '英国',
Georgia: '格鲁吉亚',
Ghana: '加纳',
Guinea: '几内亚',
Gambia: '冈比亚',
'Guinea Bissau': '几内亚比绍',
Greece: '希腊',
Greenland: '格陵兰',
Guatemala: '危地马拉',
'French Guiana': '法属圭亚那',
Guyana: '圭亚那',
Honduras: '洪都拉斯',
Croatia: '克罗地亚',
Haiti: '海地',
Hungary: '匈牙利',
Indonesia: '印度尼西亚',
India: '印度',
Ireland: '爱尔兰',
Iran: '伊朗',
Iraq: '伊拉克',
Iceland: '冰岛',
Israel: '以色列',
Italy: '意大利',
Jamaica: '牙买加',
Jordan: '约旦',
Japan: '日本',
Kazakhstan: '哈萨克斯坦',
Kenya: '肯尼亚',
Kyrgyzstan: '吉尔吉斯斯坦',
Cambodia: '柬埔寨',
Kosovo: '科索沃',
Kuwait: '科威特',
Laos: '老挝',
Lebanon: '黎巴嫩',
Liberia: '利比里亚',
Libya: '利比亚',
'Sri Lanka': '斯里兰卡',
Lesotho: '莱索托',
Lithuania: '立陶宛',
Luxembourg: '卢森堡',
Latvia: '拉脱维亚',
Morocco: '摩洛哥',
Moldova: '摩尔多瓦',
Madagascar: '马达加斯加',
Mexico: '墨西哥',
Macedonia: '马其顿',
Mali: '马里',
Myanmar: '缅甸',
Montenegro: '黑山',
Mongolia: '蒙古',
Mozambique: '莫桑比克',
Mauritania: '毛里塔尼亚',
Malawi: '马拉维',
Malaysia: '马来西亚',
Namibia: '纳米比亚',
'New Caledonia': '新喀里多尼亚',
Niger: '尼日尔',
Nigeria: '尼日利亚',
Nicaragua: '尼加拉瓜',
Netherlands: '荷兰',
Norway: '挪威',
Nepal: '尼泊尔',
'New Zealand': '新西兰',
Oman: '阿曼',
Pakistan: '巴基斯坦',
Panama: '巴拿马',
Peru: '秘鲁',
Philippines: '菲律宾',
'Papua New Guinea': '巴布亚新几内亚',
Poland: '波兰',
'Puerto Rico': '波多黎各',
'North Korea': '北朝鲜',
Portugal: '葡萄牙',
Paraguay: '巴拉圭',
Qatar: '卡塔尔',
Romania: '罗马尼亚',
Russia: '俄罗斯',
Rwanda: '卢旺达',
'Western Sahara': '西撒哈拉',
'Saudi Arabia': '沙特阿拉伯',
Sudan: '苏丹',
'South Sudan': '南苏丹',
Senegal: '塞内加尔',
'Solomon Islands': '所罗门群岛',
'Sierra Leone': '塞拉利昂',
'El Salvador': '萨尔瓦多',
Somaliland: '索马里兰',
Somalia: '索马里',
'Republic of Serbia': '塞尔维亚',
Suriname: '苏里南',
Slovakia: '斯洛伐克',
Slovenia: '斯洛文尼亚',
Sweden: '瑞典',
Swaziland: '斯威士兰',
Syria: '叙利亚',
Chad: '乍得',
Togo: '多哥',
Thailand: '泰国',
Tajikistan: '塔吉克斯坦',
Turkmenistan: '土库曼斯坦',
'East Timor': '东帝汶',
'Trinidad and Tobago': '特里尼达和多巴哥',
Tunisia: '突尼斯',
Turkey: '土耳其',
'United Republic of Tanzania': '坦桑尼亚',
Uganda: '乌干达',
Ukraine: '乌克兰',
Uruguay: '乌拉圭',
'United States': '美国',
Uzbekistan: '乌兹别克斯坦',
Venezuela: '委内瑞拉',
Vietnam: '越南',
Vanuatu: '瓦努阿图',
'West Bank': '西岸',
Yemen: '也门',
'South Africa': '南非',
Zambia: '赞比亚',
Korea: '韩国',
Tanzania: '坦桑尼亚',
Zimbabwe: '津巴布韦',
Congo: '刚果',
'Central African Rep.': '中非',
Serbia: '塞尔维亚',
'Bosnia and Herz.': '波黑',
'Czech Rep.': '捷克',
'W. Sahara': '西撒哈拉',
'Lao PDR': '老挝',
'Dem.Rep.Korea': '朝鲜',
'Falkland Is.': '福克兰群岛',
'Timor-Leste': '东帝汶',
'Solomon Is.': '所罗门群岛',
Palestine: '巴勒斯坦',
'N. Cyprus': '北塞浦路斯',
Aland: '奥兰群岛',
'Fr. S. Antarctic Lands': '法属南半球和南极陆地',
Mauritius: '毛里求斯',
Comoros: '科摩罗',
'Eq. Guinea': '赤道几内亚',
'Guinea-Bissau': '几内亚比绍',
'Dominican Rep.': '多米尼加',
'Saint Lucia': '圣卢西亚',
Dominica: '多米尼克',
'Antigua and Barb.': '安提瓜和巴布达',
'U.S. Virgin Is.': '美国原始岛屿',
Montserrat: '蒙塞拉特',
Grenada: '格林纳达',
Barbados: '巴巴多斯',
Samoa: '萨摩亚',
Bahamas: '巴哈马',
'Cayman Is.': '开曼群岛',
'Faeroe Is.': '法罗群岛',
'IsIe of Man': '马恩岛',
Malta: '马耳他共和国',
Jersey: '泽西',
'Cape Verde': '佛得角共和国',
'Turks and Caicos Is.': '特克斯和凯科斯群岛',
'St. Vin. and Gren.': '圣文森特和格林纳丁斯'
}

@ -0,0 +1,416 @@
<template>
<div class="bs-setting-wrap">
<el-form
ref="form"
:model="config"
label-width="90px"
label-position="left"
class="setting-body bs-el-form"
>
<SettingTitle>标题</SettingTitle>
<div class="lc-field-body">
<el-form-item
label="标题"
label-width="100px"
>
<el-input
v-model="config.title"
placeholder="请输入标题"
clearable
/>
</el-form-item>
</div>
<SettingTitle>位置</SettingTitle>
<div class="lc-field-body">
<PosWhSetting :config="config" />
</div>
<SettingTitle>基础</SettingTitle>
<div class="lc-field-body">
<el-form-item
label="是否显示地名"
label-width="100px"
>
<el-switch
v-model="config.customize.mapName"
class="bs-el-switch"
active-color="#007aff"
/>
</el-form-item>
<el-form-item
label="地图级别"
label-width="100px"
>
<el-select
v-model="config.customize.level"
popper-class="bs-el-select"
class="bs-el-select"
@change="changeLevel()"
>
<el-option
label="世界"
value="world"
/>
<el-option
label="国家"
value="country"
/>
<el-option
label="省份"
value="province"
/>
</el-select>
</el-form-item>
<el-form-item
v-if="config.customize.level == 'province'"
label="地图显示区域"
label-width="100px"
>
<el-select
v-model="config.customize.dataMap"
popper-class="bs-el-select"
class="bs-el-select"
>
<el-option
v-for="map in mapList"
:key="map.name"
:label="map.name"
:value="map.url"
/>
</el-select>
</el-form-item>
<el-form-item
v-if="config.customize.level == 'country'"
label="是否开启下钻"
label-width="100px"
>
<el-switch
v-model="config.customize.down"
class="bs-el-switch"
active-color="#007aff"
/>
</el-form-item>
<el-form-item
v-if="config.customize.down"
label="头部字体颜色"
label-width="100px"
>
<ColorPicker
v-model="config.customize.fontGraphicColor"
:predefine-colors="predefineThemeColors"
/>
</el-form-item>
<el-form-item
v-if="config.customize.down"
label="头部字体大小"
label-width="100px"
>
<el-input-number
v-model="config.customize.fontSize"
placeholder="请输入轨迹大小"
controls-position="right"
:step="1"
/>
</el-form-item>
<el-form-item
label="地图分割线颜色"
label-width="100px"
>
<ColorPicker
v-model="config.customize.mapLineColor"
:predefine-colors="predefineThemeColors"
/>
</el-form-item>
<el-form-item
label="地图分割块颜色"
label-width="100px"
>
<ColorPicker
v-model="config.customize.areaColor"
:predefine-colors="predefineThemeColors"
/>
</el-form-item>
<el-form-item
label="悬浮框背景色"
label-width="100px"
>
<ColorPicker
v-model="config.customize.tooltipBackgroundColor"
:predefine-colors="predefineThemeColors"
/>
</el-form-item>
<el-form-item
label="悬浮框边框色"
label-width="100px"
>
<ColorPicker
v-model="config.customize.borderColor"
:predefine-colors="predefineThemeColors"
/>
</el-form-item>
<el-form-item
label="悬浮框字体颜色"
label-width="100px"
>
<ColorPicker
v-model="config.customize.fontColor"
:predefine-colors="predefineThemeColors"
/>
</el-form-item>
<el-form-item
label="线悬浮框内容"
label-width="100px"
>
<el-input :rows="8" v-model="config.customize.lineFormatter" type="textarea"></el-input>
</el-form-item>
<el-form-item
label="点悬浮框内容"
label-width="100px"
>
<el-input :rows="4" v-model="config.customize.scatterFormatter" type="textarea"></el-input>
</el-form-item>
<el-form-item
label="轨迹样式"
label-width="100px"
>
<el-select
v-model="config.customize.symbol"
popper-class="bs-el-select"
class="bs-el-select"
>
<el-option
v-for="symbol in symbolList"
:key="symbol.name"
:label="symbol.name"
:value="symbol.value"
/>
</el-select>
</el-form-item>
<el-form-item
label="轨迹颜色"
label-width="100px"
>
<ColorPicker
v-model="config.customize.symbolColor"
:predefine-colors="predefineThemeColors"
/>
</el-form-item>
<el-form-item
label="轨迹大小"
label-width="100px"
>
<el-input-number
v-model="config.customize.symbolSize"
placeholder="请输入轨迹大小"
controls-position="right"
:step="1"
/>
</el-form-item>
<el-form-item
label="普通点颜色"
label-width="100px"
>
<ColorPicker
v-model="config.customize.scatterColor"
:predefine-colors="predefineThemeColors"
/>
</el-form-item>
<el-form-item
label="中心点颜色"
label-width="100px"
>
<ColorPicker
v-model="config.customize.scatterCenterColor"
:predefine-colors="predefineThemeColors"
/>
</el-form-item>
<el-form-item
label="是否开启筛选"
label-width="100px"
>
<el-switch
v-model="config.customize.visual"
class="bs-el-switch"
active-color="#007aff"
/>
</el-form-item>
<el-form-item
v-if="config.customize.visual"
label="数值范围"
label-width="100px"
>
<el-input-number
v-model="config.customize.range[0]"
placeholder="请输入最小值"
controls-position="right"
:step="1"
/>
-
<el-input-number
v-model="config.customize.range[1]"
controls-position="right"
placeholder="请输入最大值"
:step="1"
/>
</el-form-item>
<el-form-item
v-if="config.customize.visual"
label="配色方案"
label-width="100px"
>
<color-select
v-model="config.customize.rangeColor"
@update="updateColorScheme"
/>
<div
style="
display: flex;
align-items: center;
height: 42px;
flex-wrap: wrap;
"
>
<el-color-picker
v-for="(colorItem, index) in colors"
:key="index"
v-model="config.customize.rangeColor[index]"
show-alpha
popper-class="bs-el-color-picker"
class="start-color bs-el-color-picker"
/>
<span
class="el-icon-circle-plus-outline"
style="color: #007aff; font-size: 20px"
@click="addColor"
/>
<span
v-if="colors.length"
class="el-icon-remove-outline"
style="color: #ea0b30; font-size: 20px"
@click="delColor"
/>
</div>
</el-form-item>
</div>
</el-form>
</div>
</template>
<script>
import SettingTitle from 'data-room-ui/SettingTitle/index.vue'
import { chartSettingMixins } from 'data-room-ui/js/mixins/chartSettingMixins'
import ColorSelect from 'data-room-ui/ColorMultipleSelect/index.vue'
import ColorPicker from 'data-room-ui/ColorPicker/index.vue'
import PosWhSetting from 'data-room-ui/BigScreenDesign/RightSetting/PosWhSetting.vue'
export default {
name: 'BarSetting',
components: {
ColorSelect,
ColorPicker,
PosWhSetting,
SettingTitle
},
mixins: [chartSettingMixins],
props: {},
data () {
return {
mapList: [],
predefineThemeColors: [
'#007aff',
'#1aa97b',
'#ff4d53',
'#1890FF',
'#DF0E1B',
'#0086CC',
'#2B74CF',
'#00BC9D',
'#ED7D32'
],
symbolList:[
{
name:'箭头',
value:'arrow'
},
{
name:'圆',
value:'circle'
},
{
name:'矩形',
value:'rect'
},
{
name:'无',
value:'none'
}
]
}
},
computed: {
config: {
get () {
return this.$store.state.bigScreen.activeItemConfig
},
set (val) {
this.$store.state.bigScreen.activeItemConfig = val
}
}
},
watch: {
'config.customize.level': {
handler (val) {
this.getMapList()
}
}
},
mounted () {
this.getMapList()
},
methods: {
getMapList () {
this.$dataRoomAxios.get(`${window.BS_CONFIG?.httpConfigs?.baseURL}/bigScreen/design/map/list/${this.config.customize.level}`).then((res) => {
this.mapList = res
})
},
changeLevel () {
if (this.config.customize.level === 'country') {
this.config.customize.dataMap = '中华人民共和国.json'
} else if (this.config.customize.level === 'province') {
this.getMapList()
this.config.customize.dataMap = '安徽省.json'
}else{
this.config.customize.down=false
}
},
delColor () {
this.colors = []
this.config.customize.rangeColor = []
},
addColor () {
this.colors.push('')
},
updateColorScheme (colors) {
this.colors = [...colors]
this.config.customize.rangeColor = [...colors]
}
}
}
</script>
<style lang="scss" scoped>
@import '../../assets/style/settingWrap.scss';
@import '../../assets/style/bsTheme.scss';
//
.add-filter-box {
position: relative;
.add-filter {
margin-left: 90px;
margin-bottom: 10px;
}
.add-filter-btn {
position: absolute;
top: 0;
}
}
.lc-field-body {
padding: 12px 16px;
}
</style>

@ -0,0 +1,122 @@
import { commonConfig, displayOption } from 'data-room-ui/js/config'
// import Icon from 'data-room-ui/assets/images/bigScreenIcon/export'
import cloneDeep from 'lodash/cloneDeep'
import Icon from 'data-room-ui/assets/images/bigScreenIcon/export'
export const settingConfig = {
padding: [30, 30, 50, 80],
legend: false,
isGroup: true,
data: [],
color: '',
theme: 'dark',
displayOption: {
...displayOption,
params: {
enable: true
},
headerField: {
enable: false
},
mapField: {
enable: false
},
metricField: {
// 指标
label: '维度',
enable: false,
multiple: false // 是否多选
},
dimensionField: {
// 表格列
label: '展示字段', // 维度/查询字段
enable: false,
multiple: false // 是否多选
}
}
}
const customConfig = {
type: 'flyMap',
root: {
version: '2023071001',
contribution: false
},
customize: {
// 是否显示文字
mapName: false,
// 悬浮框背景色
tooltipBackgroundColor: '#0C121C',
// 悬浮框边框色
borderColor: 'rgba(0, 0, 0, 0.16)',
// 悬浮框字体颜色
fontColor:'#DADADA',
// 打点图背景颜色
scatterBackgroundColor: 'rgba(255,0,0,.7)',
// 打点图文字颜色
scatterColor: 'rgba(165, 108, 91, 1)',
// 打点图中心点文字颜色
scatterCenterColor:'rgba(205, 196, 110, 1)',
// 分割线颜色
mapLineColor: 'rgba(53, 86, 165, 1)',
// 水印字体颜色
fontGraphicColor: '#fff',
fontSize:'30',
// 是否开启下钻
down: false,
// 轨迹图像
symbol: 'arrow',
// 轨迹颜色
symbolColor: '#01AAED',
// 轨迹大小
symbolSize:8,
// 地图级别
level: 'country',
// 范围
scope: '中国',
// 地图区域颜色
areaColor: 'rgba(31, 50, 121, 1)',
// 是否开启筛选
visual: true,
graphic:['中华人民共和国'],
// 筛选范围
range: [0, 100],
scatterFormatter:'`<p style="text-align:center;font-size: 14px">${params.name}</p>`',
// 格式化脚本
lineFormatter:'`<p style="font-size: 16px">销售额</p><div>${params.data.msg.from}-->${params.data.msg.to} ${params.data.msg.value} </div>`',
// 从上到下的颜色
rangeColor: ['rgba(165, 108, 91, 1)', 'rgba(205, 196, 110, 1)'],
// 地图数据
dataMap: '中华人民共和国.json',
// 展示字段
value: '',
// 横坐标
xaxis: '',
// 纵坐标
yaxis: '',
// 名称
name: ''
}
}
export const dataConfig = {
...commonConfig(customConfig)
}
export const FlyMapData = {
name: '飞线图',
title: '飞线图',
icon: Icon.getNameList()[18],
className:
'com.gccloud.dataroom.core.module.chart.components.ScreenFlyMapChart',
w: 800,
h: 700,
x: 0,
y: 0,
type: 'flyMap',
option: {
...cloneDeep(settingConfig)
},
setting: undefined, // 右侧面板自定义配置
dataHandler: {}, // 数据自定义处理js脚本
...cloneDeep(dataConfig)
}

@ -67,7 +67,7 @@
class="data-setting-data-box"
>
<div class="lc-field-head">
<div class="lc-field-title">
<div v-if="config.type!=='flyMap'" class="lc-field-title">
数据配置
</div>
</div>

@ -419,7 +419,7 @@ export default {
},
//
updateSetting (config) {
if (config.type === 'map' || config.type === 'video') {
if (config.type === 'map' || config.type === 'video' ||config.type === 'flyMap') {
config.key = new Date().getTime()
}
this.changeChartConfig(cloneDeep(config))

@ -162,7 +162,6 @@
:key="table.name"
:label="table.name"
:value="table.name"
:disabled="table.status == 1"
/>
</el-option-group>
<el-option-group label="视图">
@ -171,7 +170,6 @@
:key="table.name"
:label="table.name"
:value="table.name"
:disabled="table.status == 1"
/>
</el-option-group>
</el-select>

@ -5,6 +5,7 @@
*/
import { dataConfig, settingConfig } from '../PlotRender/settingConfig'
import { mapData } from 'data-room-ui/BasicComponents/Map/settingConfig'
import { FlyMapData } from 'data-room-ui/BasicComponents/FlyMap/settingConfig'
// import _ from 'lodash'
import cloneDeep from 'lodash/cloneDeep'
import sortList from './plotListSort'
@ -85,5 +86,5 @@ export function getCustomPlots () {
return list
}
const plots = [...plotList, ...customPlots, mapData]
const plots = [...plotList, ...customPlots, mapData,FlyMapData]
export default plots

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1693358314038" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1590" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M822.67 721.43A10.84 10.84 0 0 1 811.84 711c-0.15-3.63-15.91-364.77-124.61-463.53-18.78-17.07-38.62-24.81-60.62-23.55-69.05 3.87-102.13 101.38-117.71 182.5-17.5 91.11-17.19 182.65-17.19 183.58a10.84 10.84 0 0 1-10.78 10.91h-0.06a10.84 10.84 0 0 1-10.87-10.8c-0.09-15.48-0.44-379.15 155.38-387.82 27.73-1.61 53.43 8.26 76.42 29.15 115.4 104.84 131.08 463.49 131.69 478.71a10.85 10.85 0 0 1-10.4 11.27z" fill="#0839FF" p-id="1591"></path><path d="M811.83 779.4c-84.43 0-155.76-34-155.76-74.24s71.33-74.24 155.76-74.24 155.76 34 155.76 74.24-71.33 74.24-155.76 74.24z" fill="#91AAFF" p-id="1592"></path><path d="M811.83 641.77c82.94 0 144.91 33.47 144.91 63.39s-62 63.39-144.91 63.39-144.92-33.47-144.92-63.39 62-63.39 144.92-63.39m0-21.69c-92 0-166.61 38.09-166.61 85.08s74.59 85.08 166.61 85.08 166.61-38.09 166.61-85.08-74.59-85.08-166.61-85.08z" fill="#0839FF" p-id="1593"></path><path d="M688 113.58C649.28 77 603.47 60.48 551.93 64.52 459 71.76 395.9 147 353.07 247.59a111.61 111.61 0 0 0-19.09 5.3C220.73 295 230.59 549.53 247.21 701.29 133 711 45.56 764.88 45.56 829.9c0 71.89 106.85 130.17 238.65 130.17S522.85 901.8 522.85 829.9c0-71.11-104.54-128.89-234.36-130.14 7-117.91 26.39-297.36 80-431.88a52.12 52.12 0 0 1 30.75 9.84c43.36 30.63 68 132.46 68.54 281.22C403.91 561.28 354 580.77 354 604.48c0 25.27 56.69 45.76 126.61 45.76s126.61-20.49 126.61-45.76c0-24.2-52-44-117.76-45.65C489 456.78 476.73 305.89 411.79 260a73.64 73.64 0 0 0-34.36-13.33C417 157.52 473.31 92.4 553.61 86.15c45.21-3.56 85.41 11 119.47 43.19C823.13 271.1 815.82 706 815.73 710.39a10.85 10.85 0 0 0 10.62 11.07 10.62 10.62 0 0 0 11.08-10.61c0.38-18.27 7.57-448.91-149.43-597.27z m-103.25 490.9c-7.23 8-43.12 24.07-104.11 24.07s-96.88-16.05-104.11-24.07c6.7-7.43 38.06-21.76 91.19-23.81 0 1.63 0 3.25-0.06 4.88l-0.06 4.75a10.85 10.85 0 1 0 21.69 0l0.05-4.43c0-1.75 0-3.53 0.07-5.33 55.66 1.46 88.47 16.32 95.34 23.94z m-83.6 225.42c0 58.8-99.35 108.47-216.95 108.47s-217-49.68-217-108.47c0-52.94 80.55-98.48 182.44-107 5.82 48.19 11.75 82.54 13.16 90.44 0 4.83 0 8.09 0.05 9.62a10.84 10.84 0 0 0 10.84 10.72h0.13a10.86 10.86 0 0 0 10.72-11c0-1.66-0.31-41.22 2.69-101.23 116.31 0.86 213.92 50.17 213.92 108.45zM267.19 684c-15.91-160.61-16-377.16 74.35-410.73l1.44-0.52c-49.6 130.83-68.59 295.96-75.79 411.25z" fill="#979797" p-id="1594"></path></svg>

After

Width:  |  Height:  |  Size: 2.6 KiB

@ -30,7 +30,7 @@ export default {
}
},
mounted () {
if (!['tables'].includes(this.config.type)) {
if (!['tables', 'flyMap', 'map'].includes(this.config.type)) {
this.chartInit()
}
this.watchCacheData()

@ -66,7 +66,7 @@ export default {
state.pageLoading = booleanValue
},
// 改变当前组件配置
changeChartConfig (state, itemConfig) {
changeChartConfig(state, itemConfig) {
const index = state.pageInfo.chartList.findIndex(
item => item.code === itemConfig.code
)
@ -92,7 +92,7 @@ export default {
{ type: 'v', site: x || 0 }
]
},
changeActiveItemConfig (state, config) {
changeActiveItemConfig(state, config) {
state.activeItemConfig = cloneDeep(config)
},
// 新增一个组件

Loading…
Cancel
Save