地图添加marker
This commit is contained in:
parent
7874be1d2e
commit
364dbb45d3
2
components.d.ts
vendored
2
components.d.ts
vendored
@ -9,8 +9,10 @@ declare module 'vue' {
|
||||
export interface GlobalComponents {
|
||||
BaseBg: typeof import('./src/components/baseBg.vue')['default']
|
||||
CenterMap: typeof import('./src/components/centerMap.vue')['default']
|
||||
'CenterMap copy': typeof import('./src/components/centerMap copy.vue')['default']
|
||||
CodeDialog: typeof import('./src/components/code-dialog/index.vue')['default']
|
||||
Components: typeof import('./src/components/index.js')['default']
|
||||
copy: typeof import('./src/components/centerMap copy.vue')['default']
|
||||
CurrentTime: typeof import('./src/components/currentTime.vue')['default']
|
||||
CustomBack: typeof import('./src/components/customBack.vue')['default']
|
||||
CustomCarouselPicture: typeof import('./src/components/custom-carousel-picture/index.vue')['default']
|
||||
|
||||
BIN
src/assets/images/vsualized/marker.png
Normal file
BIN
src/assets/images/vsualized/marker.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
@ -18524,7 +18524,6 @@
|
||||
23.547411
|
||||
]
|
||||
]
|
||||
|
||||
]
|
||||
]
|
||||
}
|
||||
|
||||
250
src/components/centerMap copy.vue
Normal file
250
src/components/centerMap copy.vue
Normal file
@ -0,0 +1,250 @@
|
||||
<template>
|
||||
<div class="map-center-warp">
|
||||
<!-- <img :src="getAssetsFile('images/vsualized/gmmap.png')" class="map-img" /> -->
|
||||
<div class="map-pos">
|
||||
<custom-echart-maps height="100%" width="100%" :option="chartsData.option" :geo="geoData" :name="mapName" @click="mapClick" />
|
||||
</div>
|
||||
|
||||
<el-dialog
|
||||
v-model="isShow"
|
||||
:title="currentMap.name + dialogTitle"
|
||||
width="360"
|
||||
:show-close="false"
|
||||
:before-close="handleClose"
|
||||
custom-class="map-info-dialog"
|
||||
>
|
||||
<template #header="{ close, titleId, titleClass }">
|
||||
<slot name="header"></slot>
|
||||
</template>
|
||||
<slot name="dialogContent"></slot>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { isEmpty, getAssetsFile } from '@/utils';
|
||||
import { ref, reactive, onMounted } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import geoJsonData from '../components/530926geo.json'; // 根据实际情况调整路径
|
||||
const route = useRoute();
|
||||
const props = defineProps({
|
||||
dialogTitle: {
|
||||
type: String,
|
||||
default: '首页',
|
||||
},
|
||||
});
|
||||
var aspectScale = 0.8807505292367753;
|
||||
// var iconUrl = 'http://localhost:9529/sub-government-screen-service/src/assets/images/vsualized/home/partbg.png';
|
||||
// var iconUrl = getAssetsFile('images/vsualized/gmmap.png').href;
|
||||
var iconUrl = getAssetsFile('images/vsualized/gmmap2.png').href;
|
||||
|
||||
const isShow = ref(false);
|
||||
let geoData = geoJsonData;
|
||||
let mapName = ref('ZJ' + route.name);
|
||||
let mapConfig = reactive({
|
||||
map: mapName.value,
|
||||
zoom: 1,
|
||||
viewControl: {
|
||||
distance: 115,
|
||||
alpha: 60,
|
||||
beta: 0,
|
||||
minBeta: -360,
|
||||
maxBeta: 720,
|
||||
// 限制视角，使不能旋转缩放平移
|
||||
// rotateSensitivity: 0,
|
||||
// zoomSensitivity: 0,
|
||||
// panSensitivity: 0,
|
||||
},
|
||||
itemStyle: {
|
||||
// 三维地理坐标系组件 中三维图形的视觉属性，包括颜色，透明度，描边等。
|
||||
color: 'rgba(75,255,180,0.2)', // 地图板块的颜色
|
||||
opacity: 1, // 图形的不透明度 [ default: 1 ]
|
||||
borderWidth: 1.5, // (地图板块间的分隔线)图形描边的宽度。加上描边后可以更清晰的区分每个区域 [ default: 0 ]
|
||||
borderColor: '#4bffb4', // 图形描边的颜色。[ default: #333 ]
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
distance: 0,
|
||||
color: '#000',
|
||||
padding: [6, 4, 2, 4],
|
||||
borderRadius: 4,
|
||||
backgroundColor: 'rgba(255,255,255,0.2)',
|
||||
textStyle: {
|
||||
fontSize: 12,
|
||||
color: '#000', // 地图初始化区域字体颜色
|
||||
borderWidth: 0,
|
||||
borderColor: '#000',
|
||||
},
|
||||
},
|
||||
emphasis: {
|
||||
//高亮状态的效果
|
||||
label: {
|
||||
show: true,
|
||||
color: '#fff',
|
||||
},
|
||||
itemStyle: {
|
||||
color: 'rgba(75,255,180,0.3)', // 地图板块的颜色
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const coordTransform = (lng, lat) => {
|
||||
// 这里需要实现具体转换算法
|
||||
// 示例伪代码，需替换真实转换逻辑
|
||||
return [lng + 0.003, lat + 0.002];
|
||||
};
|
||||
const chartsData = reactive({
|
||||
option: {
|
||||
title: {
|
||||
text: '',
|
||||
left: 'center',
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: function (params) {
|
||||
if (params.seriesType === 'effectScatter') {
|
||||
return `${params.name}: (${params.value[0]}, ${params.value[1]})`;
|
||||
}
|
||||
return params.name;
|
||||
},
|
||||
},
|
||||
toolbox: {
|
||||
show: false,
|
||||
orient: 'vertical',
|
||||
left: 'right',
|
||||
top: 'center',
|
||||
feature: {
|
||||
// dataView: { readOnly: false },
|
||||
// restore: {},
|
||||
// saveAsImage: {},
|
||||
},
|
||||
},
|
||||
geo3D: {
|
||||
roam: true,
|
||||
left: '30px',
|
||||
show: true,
|
||||
zlevel: -1, // 必须设置，
|
||||
...mapConfig,
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'map',
|
||||
left: '30px',
|
||||
...mapConfig,
|
||||
},
|
||||
// {
|
||||
// name: '闪烁散点',
|
||||
// type: 'effectScatter', // 使用 effectScatter 类型
|
||||
// coordinateSystem: 'geo',
|
||||
// data: [
|
||||
// // 示例数据点，实际应用中应替换为真实的数据
|
||||
// {
|
||||
// name: '孟定镇111',
|
||||
// value: [99.081993, 23.554045, 100], // 经度, 纬度, 数值
|
||||
// itemStyle: {
|
||||
// color: '#4bffb4', // 孟定镇的颜色
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// name: '耿马镇',
|
||||
// value: [99.402267, 23.538889, 80], // 经度, 纬度, 数值
|
||||
// itemStyle: {
|
||||
// color: '#4bffb4', // 勐永镇的颜色
|
||||
// },
|
||||
// },
|
||||
// ],
|
||||
// symbolSize: function (val) {
|
||||
// return val[2] ? val[2] / 10 : 10; // 如果没有数值，默认大小
|
||||
// },
|
||||
// label: {
|
||||
// formatter: '{b}',
|
||||
// position: 'right',
|
||||
// show: false,
|
||||
// },
|
||||
// rippleEffect: {
|
||||
// period: 4, // 波纹动画周期
|
||||
// scale: 3, // 波纹缩放比例
|
||||
// brushType: 'stroke', // 波纹绘制方式：'stroke' 或 'fill'
|
||||
// },
|
||||
// hoverAnimation: false,
|
||||
// },
|
||||
],
|
||||
},
|
||||
});
|
||||
|
||||
let currentMap = reactive({});
|
||||
|
||||
const mapClick = (data) => {
|
||||
isShow.value = true;
|
||||
currentMap = data;
|
||||
emit('mapclick', currentMap);
|
||||
};
|
||||
const handleClose = () => {
|
||||
isShow.value = false;
|
||||
};
|
||||
onMounted(() => {
|
||||
console.info('iconUrl', iconUrl);
|
||||
});
|
||||
|
||||
const emit = defineEmits(['mapclick']);
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
div {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
::v-deep() {
|
||||
.el-dialog {
|
||||
background: url('@/assets/images/vsualized/mapopup.png') no-repeat left top;
|
||||
min-height: 200px;
|
||||
max-height: 500px;
|
||||
overflow-y: auto;
|
||||
background-size: 100% 100%;
|
||||
padding: 16px;
|
||||
margin-top: 15%;
|
||||
}
|
||||
.el-dialog__header {
|
||||
margin-top: 10px;
|
||||
text-align: left;
|
||||
padding-left: 48px;
|
||||
.el-dialog__title,
|
||||
i {
|
||||
color: #fff !important;
|
||||
}
|
||||
.el-dialog__headerbtn {
|
||||
top: 8px !important;
|
||||
}
|
||||
}
|
||||
.map-dialog-my-header {
|
||||
margin-top: 4px;
|
||||
display: inline-flex;
|
||||
justify-content: space-between;
|
||||
h4 {
|
||||
font-weight: normal !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.map-center-warp {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
height: 90%;
|
||||
.map-img {
|
||||
width: 80%;
|
||||
height: 80%;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
object-fit: contain;
|
||||
transform: translateX(-50%);
|
||||
max-width: 1000px;
|
||||
max-height: 1000px;
|
||||
}
|
||||
.map-pos {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -25,6 +25,7 @@ import { isEmpty, getAssetsFile } from '@/utils';
|
||||
import { ref, reactive, onMounted } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import geoJsonData from '../components/530926geo.json'; // 根据实际情况调整路径
|
||||
import { Select } from '@element-plus/icons-vue';
|
||||
const route = useRoute();
|
||||
const props = defineProps({
|
||||
dialogTitle: {
|
||||
@ -40,6 +41,84 @@ var iconUrl = getAssetsFile('images/vsualized/gmmap2.png').href;
|
||||
const isShow = ref(false);
|
||||
let geoData = geoJsonData;
|
||||
let mapName = ref('ZJ' + route.name);
|
||||
let mapConfig = reactive({
|
||||
map: mapName.value,
|
||||
zoom: 1,
|
||||
viewControl: {
|
||||
distance: 115,
|
||||
alpha: 60,
|
||||
beta: 0,
|
||||
minBeta: -360,
|
||||
maxBeta: 720,
|
||||
// 限制视角，使不能旋转缩放平移
|
||||
// rotateSensitivity: 0,
|
||||
// zoomSensitivity: 0,
|
||||
// panSensitivity: 0,
|
||||
},
|
||||
// itemStyle: {
|
||||
// // 三维地理坐标系组件 中三维图形的视觉属性，包括颜色，透明度，描边等。
|
||||
// color: 'rgba(75,255,180,0.2)', // 地图板块的颜色
|
||||
// opacity: 1, // 图形的不透明度 [ default: 1 ]
|
||||
// borderWidth: 1.5, // (地图板块间的分隔线)图形描边的宽度。加上描边后可以更清晰的区分每个区域 [ default: 0 ]
|
||||
// borderColor: '#4bffb4', // 图形描边的颜色。[ default: #333 ]
|
||||
// },
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderColor: '#4bffb4', // 设置镇边界的颜色
|
||||
borderWidth: 1, // 设置镇边界的宽度
|
||||
areaColor: 'rgba(75,255,180,0.2)', // 设置背景透明，只显示边界
|
||||
},
|
||||
emphasis: {
|
||||
borderColor: '#4bffb4',
|
||||
borderWidth: 2,
|
||||
areaColor: 'rgba(75,255,180,0.5)', // 设置背景透明，只显示边界
|
||||
label: {
|
||||
color: '#fff',
|
||||
},
|
||||
},
|
||||
},
|
||||
select: {
|
||||
// 选中样式:ml-citation{ref="2,7" data="citationList"}
|
||||
itemStyle: {
|
||||
areaColor: 'rgba(75,255,180,0.6)',
|
||||
borderColor: '#4bffb4',
|
||||
borderWidth: 2,
|
||||
},
|
||||
label: {
|
||||
color: '#fff',
|
||||
},
|
||||
},
|
||||
|
||||
label: {
|
||||
show: true,
|
||||
distance: 0,
|
||||
color: '#fff',
|
||||
padding: [6, 4, 2, 4],
|
||||
borderRadius: 4,
|
||||
textStyle: {
|
||||
fontSize: 12,
|
||||
color: '#fff', // 地图初始化区域字体颜色
|
||||
borderWidth: 0,
|
||||
borderColor: '#000',
|
||||
},
|
||||
},
|
||||
// emphasis: {
|
||||
// //高亮状态的效果
|
||||
// label: {
|
||||
// show: true,
|
||||
// color: '#fff',
|
||||
// },
|
||||
// itemStyle: {
|
||||
// color: 'rgba(75,255,180,0.3)', // 地图板块的颜色
|
||||
// },
|
||||
// },
|
||||
});
|
||||
|
||||
const coordTransform = (lng, lat) => {
|
||||
// 这里需要实现具体转换算法
|
||||
// 示例伪代码，需替换真实转换逻辑
|
||||
return [lng + 0.003, lat + 0.002];
|
||||
};
|
||||
const chartsData = reactive({
|
||||
option: {
|
||||
title: {
|
||||
@ -66,104 +145,57 @@ const chartsData = reactive({
|
||||
// saveAsImage: {},
|
||||
},
|
||||
},
|
||||
geo3D: {
|
||||
map: mapName.value,
|
||||
geo: {
|
||||
roam: true,
|
||||
zoom: 1,
|
||||
left: '30px',
|
||||
show: true,
|
||||
show: false,
|
||||
zlevel: -1, // 必须设置，
|
||||
viewControl: {
|
||||
distance: 115,
|
||||
alpha: 60,
|
||||
beta: 0,
|
||||
minBeta: -360,
|
||||
maxBeta: 720,
|
||||
// 限制视角，使不能旋转缩放平移
|
||||
// rotateSensitivity: 0,
|
||||
// zoomSensitivity: 0,
|
||||
// panSensitivity: 0,
|
||||
},
|
||||
itemStyle: {
|
||||
// 三维地理坐标系组件 中三维图形的视觉属性，包括颜色，透明度，描边等。
|
||||
color: 'rgba(75,255,180,0.2)', // 地图板块的颜色
|
||||
opacity: 1, // 图形的不透明度 [ default: 1 ]
|
||||
borderWidth: 1.5, // (地图板块间的分隔线)图形描边的宽度。加上描边后可以更清晰的区分每个区域 [ default: 0 ]
|
||||
borderColor: '#4bffb4', // 图形描边的颜色。[ default: #333 ]
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
distance: 0,
|
||||
color: '#000',
|
||||
padding: [6, 4, 2, 4],
|
||||
borderRadius: 4,
|
||||
backgroundColor: 'rgba(255,255,255,0.2)',
|
||||
textStyle: {
|
||||
fontSize: 12,
|
||||
color: '#E87813', // 地图初始化区域字体颜色
|
||||
borderWidth: 0,
|
||||
borderColor: '#000',
|
||||
},
|
||||
},
|
||||
emphasis: {
|
||||
//高亮状态的效果
|
||||
label: {
|
||||
show: true,
|
||||
color: '#fff',
|
||||
},
|
||||
itemStyle: {
|
||||
color: 'rgba(75,255,180,0.3)', // 地图板块的颜色
|
||||
},
|
||||
},
|
||||
...mapConfig,
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'map3D',
|
||||
map: mapName.value,
|
||||
zoom: 1,
|
||||
roam: true,
|
||||
type: 'map',
|
||||
left: '30px',
|
||||
viewControl: {
|
||||
distance: 115,
|
||||
alpha: 60,
|
||||
beta: 0,
|
||||
minBeta: -360,
|
||||
maxBeta: 720,
|
||||
// 限制视角，使不能旋转缩放平移
|
||||
// rotateSensitivity: 0,
|
||||
// zoomSensitivity: 0,
|
||||
// panSensitivity: 0,
|
||||
...mapConfig,
|
||||
},
|
||||
{
|
||||
name: '闪烁散点',
|
||||
type: 'effectScatter', // 使用 effectScatter 类型
|
||||
coordinateSystem: 'geo',
|
||||
data: [
|
||||
// 示例数据点，实际应用中应替换为真实的数据
|
||||
{
|
||||
name: '永星食品加工厂',
|
||||
value: [99.081993, 23.554045, 150], // 经度, 纬度, 数值
|
||||
symbol: 'image://' + getAssetsFile('images/vsualized/marker.png'),
|
||||
itemStyle: {
|
||||
// 三维地理坐标系组件 中三维图形的视觉属性，包括颜色，透明度，描边等。
|
||||
color: 'rgba(75,255,180,0.2)', // 地图板块的颜色
|
||||
opacity: 1, // 图形的不透明度 [ default: 1 ]
|
||||
borderWidth: 1.5, // (地图板块间的分隔线)图形描边的宽度。加上描边后可以更清晰的区分每个区域 [ default: 0 ]
|
||||
borderColor: '#4bffb4', // 图形描边的颜色。[ default: #333 ]
|
||||
color: '#4bffb4', //
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '耿马镇',
|
||||
value: [99.402267, 23.538889, 150], // 经度, 纬度, 数值
|
||||
symbol: 'image://' + getAssetsFile('images/vsualized/marker.png'),
|
||||
itemStyle: {
|
||||
color: '#4bffb4', // 勐永镇的颜色
|
||||
},
|
||||
},
|
||||
],
|
||||
symbolSize: function (val) {
|
||||
return val[2] ? val[2] / 10 : 10; // 如果没有数值，默认大小
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
distance: 0,
|
||||
color: '#000',
|
||||
padding: [6, 4, 2, 4],
|
||||
borderRadius: 4,
|
||||
backgroundColor: 'rgba(255,255,255,0.2)',
|
||||
textStyle: {
|
||||
fontSize: 12,
|
||||
color: '#E87813', // 地图初始化区域字体颜色
|
||||
borderWidth: 0,
|
||||
borderColor: '#000',
|
||||
},
|
||||
},
|
||||
emphasis: {
|
||||
//高亮状态的效果
|
||||
label: {
|
||||
show: true,
|
||||
color: '#fff',
|
||||
},
|
||||
itemStyle: {
|
||||
color: 'rgba(75,255,180,0.3)', // 地图板块的颜色
|
||||
formatter: '{b}',
|
||||
position: 'right',
|
||||
show: false,
|
||||
},
|
||||
rippleEffect: {
|
||||
period: 4, // 波纹动画周期
|
||||
scale: 3, // 波纹缩放比例
|
||||
brushType: 'stroke', // 波纹绘制方式：'stroke' 或 'fill'
|
||||
},
|
||||
hoverAnimation: false,
|
||||
},
|
||||
],
|
||||
},
|
||||
@ -189,6 +221,7 @@ const emit = defineEmits(['mapclick']);
|
||||
div {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
::v-deep() {
|
||||
.el-dialog {
|
||||
background: url('@/assets/images/vsualized/mapopup.png') no-repeat left top;
|
||||
|
||||
@ -110,7 +110,9 @@ const handleCommand = (data) => {
|
||||
.down-menu {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.el-dropdown {
|
||||
display: inline-block;
|
||||
}
|
||||
.el-dropdown-link {
|
||||
color: $color-custom-main !important;
|
||||
i {
|
||||
@ -173,11 +175,6 @@ const handleCommand = (data) => {
|
||||
border-radius: 4px;
|
||||
padding: 6px;
|
||||
text-align: center;
|
||||
::v-deep() {
|
||||
.el-dropdown {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
97
src/views/entities/components/entitiesMap.vue
Normal file
97
src/views/entities/components/entitiesMap.vue
Normal file
@ -0,0 +1,97 @@
|
||||
<template>
|
||||
<centerMap :dialog-title="'投入品'" @mapclick="doMapclick">
|
||||
<template #header>
|
||||
<div class="land-map-pop-header">
|
||||
<div class="title">{{ currentRegion && currentRegion.name ? currentRegion.name : '投入品' }}</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #dialogContent>
|
||||
<div class="land-map-pop-content">
|
||||
<div v-for="(n, index) in list" :key="index" class="list-item">
|
||||
<div class="title">
|
||||
<span class="title-val"> {{ n.title }}</span>
|
||||
</div>
|
||||
<div class="value">{{ n.value }}{{ n.unit }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</centerMap>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue';
|
||||
|
||||
const unit = ref('家');
|
||||
const list = reactive([
|
||||
{ title: '年总产值', value: 3.49, color: '#01FEFD', unit: '亿元' },
|
||||
{ title: '年人均收入', value: 6.98, color: '#FEF906', unit: '万元' },
|
||||
]);
|
||||
|
||||
let currentRegion = ref(null);
|
||||
const doMapclick = (data) => {
|
||||
currentRegion.value = data;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.land-map-pop-header {
|
||||
display: inline-flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
margin-top: 3px;
|
||||
.title,
|
||||
.value {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
color: $color-white;
|
||||
}
|
||||
.title {
|
||||
font-size: 18px;
|
||||
}
|
||||
.value {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
.land-map-pop-content {
|
||||
width: 100%;
|
||||
gap: 10px;
|
||||
display: inline-flex;
|
||||
justify-content: flex-start;
|
||||
flex-wrap: wrap;
|
||||
.list-item {
|
||||
width: calc((100% - 10px) / 1);
|
||||
display: inline-flex;
|
||||
justify-content: space-between;
|
||||
padding: 6px 0;
|
||||
.title {
|
||||
display: inline-flex;
|
||||
justify-content: flex-start;
|
||||
.before {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
.b-content {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
}
|
||||
.before,
|
||||
.title-val {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
padding: 0 5px 0 2px;
|
||||
color: $color-custom-main;
|
||||
}
|
||||
}
|
||||
|
||||
.value {
|
||||
display: inline-block;
|
||||
text-align: right;
|
||||
color: $color-white;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -24,7 +24,7 @@
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<centerMap></centerMap>
|
||||
<entitiesMap></entitiesMap>
|
||||
</el-col>
|
||||
<el-col :span="6" class="right-charts">
|
||||
<div class="right-charts-item">
|
||||
@ -59,6 +59,7 @@ import hotCharts from './components/hotCharts.vue';
|
||||
import benefitCharts from './components/benefitCharts.vue';
|
||||
import entitiesStatistics from './components/entitiesStatistics.vue';
|
||||
import entitiesCategoryCharts from './components/entitiesCategoryCharts.vue';
|
||||
import entitiesMap from './components/entitiesMap.vue';
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.data-home-index {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user