Compare commits
No commits in common. "225b9f57037facff01f34641ebf3c75df65b7f39" and "090971a87ebc30e7b907422315b95f76c8010c59" have entirely different histories.
225b9f5703
...
090971a87e
2
components.d.ts
vendored
2
components.d.ts
vendored
@ -9,10 +9,8 @@ declare module 'vue' {
|
|||||||
export interface GlobalComponents {
|
export interface GlobalComponents {
|
||||||
BaseBg: typeof import('./src/components/baseBg.vue')['default']
|
BaseBg: typeof import('./src/components/baseBg.vue')['default']
|
||||||
CenterMap: typeof import('./src/components/centerMap.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']
|
CodeDialog: typeof import('./src/components/code-dialog/index.vue')['default']
|
||||||
Components: typeof import('./src/components/index.js')['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']
|
CurrentTime: typeof import('./src/components/currentTime.vue')['default']
|
||||||
CustomBack: typeof import('./src/components/customBack.vue')['default']
|
CustomBack: typeof import('./src/components/customBack.vue')['default']
|
||||||
CustomCarouselPicture: typeof import('./src/components/custom-carousel-picture/index.vue')['default']
|
CustomCarouselPicture: typeof import('./src/components/custom-carousel-picture/index.vue')['default']
|
||||||
|
|||||||
Binary file not shown.
|
Before Width: | Height: | Size: 1.6 KiB |
@ -18524,6 +18524,7 @@
|
|||||||
23.547411
|
23.547411
|
||||||
]
|
]
|
||||||
]
|
]
|
||||||
|
|
||||||
]
|
]
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,250 +0,0 @@
|
|||||||
<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,7 +25,6 @@ import { isEmpty, getAssetsFile } from '@/utils';
|
|||||||
import { ref, reactive, onMounted } from 'vue';
|
import { ref, reactive, onMounted } from 'vue';
|
||||||
import { useRoute } from 'vue-router';
|
import { useRoute } from 'vue-router';
|
||||||
import geoJsonData from '../components/530926geo.json'; // 根据实际情况调整路径
|
import geoJsonData from '../components/530926geo.json'; // 根据实际情况调整路径
|
||||||
import { Select } from '@element-plus/icons-vue';
|
|
||||||
const route = useRoute();
|
const route = useRoute();
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
dialogTitle: {
|
dialogTitle: {
|
||||||
@ -41,84 +40,6 @@ var iconUrl = getAssetsFile('images/vsualized/gmmap2.png').href;
|
|||||||
const isShow = ref(false);
|
const isShow = ref(false);
|
||||||
let geoData = geoJsonData;
|
let geoData = geoJsonData;
|
||||||
let mapName = ref('ZJ' + route.name);
|
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({
|
const chartsData = reactive({
|
||||||
option: {
|
option: {
|
||||||
title: {
|
title: {
|
||||||
@ -145,57 +66,104 @@ const chartsData = reactive({
|
|||||||
// saveAsImage: {},
|
// saveAsImage: {},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
geo: {
|
geo3D: {
|
||||||
|
map: mapName.value,
|
||||||
roam: true,
|
roam: true,
|
||||||
|
zoom: 1,
|
||||||
left: '30px',
|
left: '30px',
|
||||||
show: false,
|
show: true,
|
||||||
zlevel: -1, // 必须设置，
|
zlevel: -1, // 必须设置，
|
||||||
...mapConfig,
|
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)', // 地图板块的颜色
|
||||||
|
},
|
||||||
|
},
|
||||||
},
|
},
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
roam: true,
|
type: 'map3D',
|
||||||
type: 'map',
|
map: mapName.value,
|
||||||
|
zoom: 1,
|
||||||
left: '30px',
|
left: '30px',
|
||||||
...mapConfig,
|
viewControl: {
|
||||||
|
distance: 115,
|
||||||
|
alpha: 60,
|
||||||
|
beta: 0,
|
||||||
|
minBeta: -360,
|
||||||
|
maxBeta: 720,
|
||||||
|
// 限制视角，使不能旋转缩放平移
|
||||||
|
// rotateSensitivity: 0,
|
||||||
|
// zoomSensitivity: 0,
|
||||||
|
// panSensitivity: 0,
|
||||||
},
|
},
|
||||||
{
|
|
||||||
name: '闪烁散点',
|
|
||||||
type: 'effectScatter', // 使用 effectScatter 类型
|
|
||||||
coordinateSystem: 'geo',
|
|
||||||
data: [
|
|
||||||
// 示例数据点，实际应用中应替换为真实的数据
|
|
||||||
{
|
|
||||||
name: '永星食品加工厂',
|
|
||||||
value: [99.081993, 23.554045, 150], // 经度, 纬度, 数值
|
|
||||||
symbol: 'image://' + getAssetsFile('images/vsualized/marker.png'),
|
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
color: '#4bffb4', //
|
// 三维地理坐标系组件 中三维图形的视觉属性，包括颜色，透明度，描边等。
|
||||||
},
|
color: 'rgba(75,255,180,0.2)', // 地图板块的颜色
|
||||||
},
|
opacity: 1, // 图形的不透明度 [ default: 1 ]
|
||||||
{
|
borderWidth: 1.5, // (地图板块间的分隔线)图形描边的宽度。加上描边后可以更清晰的区分每个区域 [ default: 0 ]
|
||||||
name: '耿马镇',
|
borderColor: '#4bffb4', // 图形描边的颜色。[ default: #333 ]
|
||||||
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: {
|
label: {
|
||||||
formatter: '{b}',
|
show: true,
|
||||||
position: 'right',
|
distance: 0,
|
||||||
show: false,
|
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)', // 地图板块的颜色
|
||||||
},
|
},
|
||||||
rippleEffect: {
|
|
||||||
period: 4, // 波纹动画周期
|
|
||||||
scale: 3, // 波纹缩放比例
|
|
||||||
brushType: 'stroke', // 波纹绘制方式：'stroke' 或 'fill'
|
|
||||||
},
|
},
|
||||||
hoverAnimation: false,
|
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
@ -221,7 +189,6 @@ const emit = defineEmits(['mapclick']);
|
|||||||
div {
|
div {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
::v-deep() {
|
::v-deep() {
|
||||||
.el-dialog {
|
.el-dialog {
|
||||||
background: url('@/assets/images/vsualized/mapopup.png') no-repeat left top;
|
background: url('@/assets/images/vsualized/mapopup.png') no-repeat left top;
|
||||||
|
|||||||
@ -110,9 +110,7 @@ const handleCommand = (data) => {
|
|||||||
.down-menu {
|
.down-menu {
|
||||||
background: transparent;
|
background: transparent;
|
||||||
}
|
}
|
||||||
.el-dropdown {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
.el-dropdown-link {
|
.el-dropdown-link {
|
||||||
color: $color-custom-main !important;
|
color: $color-custom-main !important;
|
||||||
i {
|
i {
|
||||||
@ -175,6 +173,11 @@ const handleCommand = (data) => {
|
|||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
padding: 6px;
|
padding: 6px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
::v-deep() {
|
||||||
|
.el-dropdown {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -1,97 +0,0 @@
|
|||||||
<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>
|
</div>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="12">
|
<el-col :span="12">
|
||||||
<entitiesMap></entitiesMap>
|
<centerMap></centerMap>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="6" class="right-charts">
|
<el-col :span="6" class="right-charts">
|
||||||
<div class="right-charts-item">
|
<div class="right-charts-item">
|
||||||
@ -59,7 +59,6 @@ import hotCharts from './components/hotCharts.vue';
|
|||||||
import benefitCharts from './components/benefitCharts.vue';
|
import benefitCharts from './components/benefitCharts.vue';
|
||||||
import entitiesStatistics from './components/entitiesStatistics.vue';
|
import entitiesStatistics from './components/entitiesStatistics.vue';
|
||||||
import entitiesCategoryCharts from './components/entitiesCategoryCharts.vue';
|
import entitiesCategoryCharts from './components/entitiesCategoryCharts.vue';
|
||||||
import entitiesMap from './components/entitiesMap.vue';
|
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.data-home-index {
|
.data-home-index {
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user