2025-09-15 23:45:56 +08:00
|
|
|
<template>
|
|
|
|
|
<div class="centerTopPage">
|
|
|
|
|
<div class="mapBox">
|
|
|
|
|
<div id="mapEcharts"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
|
|
|
|
|
import * as echarts from 'echarts'
|
|
|
|
|
import { mapDataApi } from "@/api/screen/cityScreen";
|
|
|
|
|
import hefeiJson from '@/utils/mapJson/hefei.json'
|
2025-09-16 00:17:47 +08:00
|
|
|
import wuhuJson from '@/utils/mapJson/wuhu.json'
|
|
|
|
|
import bengbuJson from '@/utils/mapJson/bengbu.json'
|
|
|
|
|
import maanshanJson from '@/utils/mapJson/maanshan.json'
|
|
|
|
|
import huaibeiJson from '@/utils/mapJson/huaibei.json'
|
|
|
|
|
import huainanJson from '@/utils/mapJson/huainan.json'
|
|
|
|
|
import tonglingJson from '@/utils/mapJson/tongling.json'
|
|
|
|
|
import anqingJson from '@/utils/mapJson/anqing.json'
|
|
|
|
|
import huangshanJson from '@/utils/mapJson/huangshan.json'
|
|
|
|
|
import chuzhouJson from '@/utils/mapJson/chuzhou.json'
|
|
|
|
|
import fuyangJson from '@/utils/mapJson/fuyang.json'
|
|
|
|
|
import suzhouJson from '@/utils/mapJson/suzhou.json'
|
|
|
|
|
import liuanJson from '@/utils/mapJson/liuan.json'
|
|
|
|
|
import bozhouJson from '@/utils/mapJson/bozhou.json'
|
|
|
|
|
import chizhouJson from '@/utils/mapJson/chizhou.json'
|
|
|
|
|
import xuanchenJson from '@/utils/mapJson/xuanchen.json'
|
|
|
|
|
|
2025-09-15 23:45:56 +08:00
|
|
|
export default {
|
|
|
|
|
name: 'centerTopPage',
|
|
|
|
|
props: {
|
|
|
|
|
sendHeight: {
|
|
|
|
|
type: String,
|
|
|
|
|
default: '100%',
|
|
|
|
|
},
|
|
|
|
|
sendMapColor: {
|
|
|
|
|
type: String,
|
|
|
|
|
default: '#17A1F1',
|
|
|
|
|
},
|
|
|
|
|
sendGeo: {
|
|
|
|
|
type: Array,
|
|
|
|
|
default: null,
|
|
|
|
|
},
|
|
|
|
|
sendNumber: {
|
|
|
|
|
type: Number,
|
|
|
|
|
},
|
|
|
|
|
showLine: {
|
|
|
|
|
type: Boolean,
|
|
|
|
|
default: false,
|
|
|
|
|
},
|
|
|
|
|
sendProjSpin: {
|
|
|
|
|
type: Array | Object,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
type: 1,
|
|
|
|
|
zoom: 1,
|
|
|
|
|
zoom2: 1,
|
|
|
|
|
mapEcharts: null,
|
|
|
|
|
mapEcharts2: null,
|
|
|
|
|
mapJson: null,
|
|
|
|
|
pointArea: this.sendProjSpin,
|
|
|
|
|
pointAll: [],
|
|
|
|
|
companyList: [],
|
|
|
|
|
companyAreaList: [],
|
|
|
|
|
isCity: 0,
|
|
|
|
|
cityCount: [],
|
|
|
|
|
gozoom: 1,
|
|
|
|
|
geoVal: [],
|
|
|
|
|
cityName:'合肥'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
created() {
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
2025-09-17 17:28:55 +08:00
|
|
|
console.log('🚀 ~ mounted ~ .cityName:', this.$router.currentRoute.query.cityName)
|
|
|
|
|
this.cityName = this.$router.currentRoute.query.cityName || "合肥"
|
2025-09-16 00:17:47 +08:00
|
|
|
this.getCityJson()
|
2025-09-15 23:45:56 +08:00
|
|
|
},
|
2025-09-16 00:17:47 +08:00
|
|
|
methods: {
|
|
|
|
|
getCityJson(){
|
|
|
|
|
if(this.cityName.indexOf("合肥")>-1){
|
|
|
|
|
this.mapJson = hefeiJson;
|
|
|
|
|
}else if(this.cityName.indexOf("芜湖")>-1){
|
|
|
|
|
this.mapJson = wuhuJson
|
|
|
|
|
}else if(this.cityName.indexOf("蚌埠")>-1){
|
|
|
|
|
this.mapJson = bengbuJson
|
|
|
|
|
}else if(this.cityName.indexOf("淮南")>-1){
|
|
|
|
|
this.mapJson = huainanJson
|
|
|
|
|
}else if(this.cityName.indexOf("马鞍山")>-1){
|
|
|
|
|
this.mapJson = maanshanJson
|
|
|
|
|
}else if(this.cityName.indexOf("淮北")>-1){
|
|
|
|
|
this.mapJson = huaibeiJson
|
|
|
|
|
}else if(this.cityName.indexOf("铜陵")>-1){
|
|
|
|
|
this.mapJson = tonglingJson
|
|
|
|
|
}else if(this.cityName.indexOf("安庆")>-1){
|
|
|
|
|
this.mapJson = anqingJson
|
|
|
|
|
}else if(this.cityName.indexOf("黄山")>-1){
|
|
|
|
|
this.mapJson = huangshanJson
|
|
|
|
|
}else if(this.cityName.indexOf("滁州")>-1){
|
|
|
|
|
this.mapJson = chuzhouJson
|
|
|
|
|
}else if(this.cityName.indexOf("阜阳")>-1){
|
|
|
|
|
this.mapJson = fuyangJson
|
|
|
|
|
}else if(this.cityName.indexOf("宿州")>-1){
|
|
|
|
|
this.mapJson = suzhouJson
|
|
|
|
|
}else if(this.cityName.indexOf("六安")>-1){
|
|
|
|
|
this.mapJson = liuanJson
|
|
|
|
|
}else if(this.cityName.indexOf("亳州")>-1){
|
|
|
|
|
this.mapJson = bozhouJson
|
|
|
|
|
}else if(this.cityName.indexOf("池州")>-1){
|
|
|
|
|
this.mapJson = chizhouJson
|
|
|
|
|
}else if(this.cityName.indexOf("宣城")>-1){
|
|
|
|
|
this.mapJson = xuanchenJson
|
|
|
|
|
}
|
|
|
|
|
console.log(this.mapJson)
|
|
|
|
|
this.getMapData()
|
|
|
|
|
},
|
|
|
|
|
getMapData(){
|
2025-09-15 23:45:56 +08:00
|
|
|
// 获取地区中心坐标
|
|
|
|
|
var mapFeatures = this.mapJson.features.map(item=>{
|
|
|
|
|
let obj = {
|
|
|
|
|
name:item.properties.name,
|
|
|
|
|
value:item.properties.center
|
|
|
|
|
}
|
|
|
|
|
return obj
|
|
|
|
|
})
|
|
|
|
|
console.log(mapFeatures)
|
|
|
|
|
let param = {companyId:sessionStorage.getItem('companyId'),city:this.cityName}
|
|
|
|
|
mapDataApi(param).then(response => {
|
|
|
|
|
console.log(response,'mapDataApi')
|
|
|
|
|
response.data.proList.forEach(item=>{
|
|
|
|
|
let obj = Object.assign({},item)
|
|
|
|
|
obj.name = item.county;
|
|
|
|
|
let index = mapFeatures.findIndex(v=>v.name==item.county)
|
|
|
|
|
if(index>-1){
|
|
|
|
|
obj.value = mapFeatures[index].value
|
|
|
|
|
}
|
|
|
|
|
this.geoVal.push(obj)
|
|
|
|
|
})
|
|
|
|
|
this.getInitData()
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
getInitData() {
|
|
|
|
|
this.mapEcharts = echarts.init(document.getElementById('mapEcharts'),)
|
|
|
|
|
echarts.registerMap('dishi', this.mapJson)
|
|
|
|
|
this.setMapOption()
|
|
|
|
|
},
|
|
|
|
|
setMapOption() {
|
|
|
|
|
this.mapEcharts.clear()
|
|
|
|
|
console.log(this.geoVal)
|
|
|
|
|
let that = this
|
|
|
|
|
let imgUrl = require('../../../assets/cityScreen/mapBg2.png')
|
|
|
|
|
let echartOption = {
|
|
|
|
|
geo: [
|
|
|
|
|
{
|
|
|
|
|
show: true,
|
|
|
|
|
map: 'dishi',
|
|
|
|
|
type: 'map',
|
|
|
|
|
aspectScale: 1,
|
|
|
|
|
zoom: this.zoom,
|
|
|
|
|
roam: false, // 是否允许缩放
|
|
|
|
|
animationDurationUpdate: 0,
|
|
|
|
|
layoutSize: '80%',
|
|
|
|
|
layoutCenter: ['50%', '56%'],
|
|
|
|
|
itemStyle: {
|
|
|
|
|
normal: {
|
|
|
|
|
label: {
|
|
|
|
|
show: false,
|
|
|
|
|
},
|
|
|
|
|
areaColor: this.sendMapColor, //地图颜色
|
|
|
|
|
opacity: 0.7,
|
|
|
|
|
borderColor: '#38EAF6', //地图边框颜色
|
|
|
|
|
borderWidth: 1, //地图边框宽度
|
|
|
|
|
shadowColor: 'none',
|
|
|
|
|
shadowBlur: 10,
|
|
|
|
|
color: '#fff',
|
|
|
|
|
// 设置扇形的阴影
|
|
|
|
|
},
|
|
|
|
|
emphasis: {
|
|
|
|
|
//选中省份的颜色
|
|
|
|
|
areaColor: '#061E3D',
|
|
|
|
|
label: {
|
|
|
|
|
show: true,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
label: {
|
|
|
|
|
normal: {
|
|
|
|
|
show: false,
|
|
|
|
|
fontSize: 12,
|
|
|
|
|
fontWeight: 500,
|
|
|
|
|
color: 'rgba(255,255,255,0.5)',
|
|
|
|
|
},
|
|
|
|
|
emphasis: {
|
|
|
|
|
show: true,
|
|
|
|
|
areaColor: '#061E3D',
|
|
|
|
|
color: '#fff',
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
zlevel: 1,
|
|
|
|
|
regions: null,
|
|
|
|
|
tooltip: {
|
|
|
|
|
show:false,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
map: 'dishi',
|
|
|
|
|
aspectScale: 1,
|
|
|
|
|
roam: false, // 是否允许缩放
|
|
|
|
|
animationDurationUpdate: 0,
|
|
|
|
|
zoom: this.zoom,
|
|
|
|
|
layoutSize: '80%',
|
|
|
|
|
layoutCenter: ['50%', '58%'],
|
|
|
|
|
itemStyle: {
|
|
|
|
|
areaColor: '#5785AE',
|
|
|
|
|
borderColor: '#5785AE',
|
|
|
|
|
borderWidth: 1,
|
|
|
|
|
opacity: 0.3,
|
|
|
|
|
color: '#fff',
|
|
|
|
|
},
|
|
|
|
|
zlevel: -1,
|
|
|
|
|
silent: true,
|
|
|
|
|
tooltip: {
|
|
|
|
|
show: false,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
visualMap: {
|
|
|
|
|
show: false,
|
|
|
|
|
top: 'top',
|
|
|
|
|
min: 0,
|
|
|
|
|
max: 2,
|
|
|
|
|
seriesIndex: 0,
|
|
|
|
|
calculable: true,
|
|
|
|
|
inRange: {
|
|
|
|
|
color: [
|
|
|
|
|
'#998f74',
|
|
|
|
|
'#04a4f6',
|
|
|
|
|
'#00943e',
|
|
|
|
|
'#dae07b',
|
|
|
|
|
'#b62022',
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
tooltip: {
|
|
|
|
|
},
|
|
|
|
|
series: [
|
|
|
|
|
// {
|
|
|
|
|
// type: 'map',
|
|
|
|
|
// map: 'dishi', // 使用中国地图
|
|
|
|
|
// label: {
|
|
|
|
|
// show: true, // 显示标签
|
|
|
|
|
// formatter: '{b}', // b 代表数据名称，即省份名称
|
|
|
|
|
// color: '#FFF' // 标签文字颜色
|
|
|
|
|
// },
|
|
|
|
|
// data: this.geoVal,
|
|
|
|
|
// // 自定义区域样式等
|
|
|
|
|
// itemStyle: {
|
|
|
|
|
// normal: {
|
|
|
|
|
// label: {
|
|
|
|
|
// show: true,
|
|
|
|
|
// formatter:function(params){
|
|
|
|
|
// let html = `
|
|
|
|
|
// <div style="width:260px;height:180px;background: url(${imgUrl}) no-repeat; background-size:100% 100%; padding:10px 12px;position: relative;">
|
|
|
|
|
// <div style="font-size: 14px; height: 20px;line-height:20px;">${params.data.projectName}</div>
|
|
|
|
|
// </div>`
|
|
|
|
|
// return html
|
|
|
|
|
// // return params.data.projectName+"\r\n"+params.value;
|
|
|
|
|
// },
|
|
|
|
|
// }
|
|
|
|
|
// },
|
|
|
|
|
// emphasis: {
|
|
|
|
|
// label: {
|
|
|
|
|
// show: true
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
// {
|
|
|
|
|
// type: 'scatter', //带有涟漪效果的
|
|
|
|
|
// map: this.geoVal,
|
|
|
|
|
// roam: false,
|
|
|
|
|
// coordinateSystem: 'geo', //使用坐标系
|
|
|
|
|
// zlevel: 1,
|
|
|
|
|
// symbolSize: [60, 40],
|
|
|
|
|
// symbol: (value, params) => {
|
|
|
|
|
// return ('image://' + require('@/assets/cityScreen/mapBg2.png'))
|
|
|
|
|
// },
|
|
|
|
|
// emphasis: {
|
|
|
|
|
// scale: true,
|
|
|
|
|
// },
|
|
|
|
|
// symbolKeepAspect: true,
|
|
|
|
|
// label: {
|
|
|
|
|
// normal: {
|
|
|
|
|
// show: true,
|
|
|
|
|
// color: '#fff',
|
|
|
|
|
// fontSize: 10,
|
|
|
|
|
// fontFamily: 'cursive',
|
|
|
|
|
// fontWeight: 'normal',
|
|
|
|
|
// position: 'top',
|
|
|
|
|
// padding: [0, 0, -35, 0],
|
|
|
|
|
// formatter: function (params) {
|
|
|
|
|
// let str="";
|
|
|
|
|
// str = `${params.data.projectName}`;
|
|
|
|
|
// return str
|
|
|
|
|
// }
|
|
|
|
|
// },
|
|
|
|
|
// },
|
|
|
|
|
// itemStyle: {
|
|
|
|
|
// normal: {
|
|
|
|
|
// color: '#fff',
|
|
|
|
|
// },
|
|
|
|
|
// },
|
|
|
|
|
// data: this.geoVal,
|
|
|
|
|
// },
|
|
|
|
|
],
|
|
|
|
|
}
|
|
|
|
|
this.mapEcharts.setOption(echartOption)
|
|
|
|
|
this.mapEcharts.on('click', function (params) {
|
|
|
|
|
if (params.componentSubType === 'scatter') {
|
|
|
|
|
// console.log(params)
|
|
|
|
|
let option = that.mapEcharts.getOption() //获得option对象
|
|
|
|
|
// 点击变黄
|
|
|
|
|
option.series[0].data.forEach((item) => {
|
|
|
|
|
if (params.data.name !== item.name) {
|
|
|
|
|
if (item.isActive) {
|
|
|
|
|
item.isActive = false
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
item.isActive = true
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
that.mapEcharts.setOption(option)
|
|
|
|
|
that.$emit('closeMap', { value: params.data })
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
.centerTopPage {
|
|
|
|
|
width: 100%;
|
|
|
|
|
//height: var(--send-height);
|
|
|
|
|
height: 100%;
|
|
|
|
|
// background:palegoldenrod;
|
|
|
|
|
margin-bottom: 2%;
|
|
|
|
|
padding: 0 10px;
|
|
|
|
|
position: relative;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
.iconMap {
|
|
|
|
|
display: block !important;
|
|
|
|
|
visibility: visible !important;
|
|
|
|
|
opacity: 1;
|
|
|
|
|
}
|
|
|
|
|
.buttonTop {
|
|
|
|
|
width: 100%;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: flex-start;
|
|
|
|
|
}
|
|
|
|
|
.buttom1 {
|
|
|
|
|
width: 110px;
|
|
|
|
|
height: 32px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
line-height: 32px;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
color: #55f3fb;
|
|
|
|
|
// background: url(../../assets/img/checked.png) no-repeat center;
|
|
|
|
|
background-size: 110px 32px;
|
|
|
|
|
margin-right: 12px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
.buttom1.on {
|
|
|
|
|
color: #0095ff;
|
|
|
|
|
// background: url(../../assets/img/checked_on.png) no-repeat center;
|
|
|
|
|
background-size: 110px 32px;
|
|
|
|
|
}
|
|
|
|
|
.mapBox {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 97%;
|
|
|
|
|
display: flex;
|
|
|
|
|
position: relative;
|
|
|
|
|
#mapEcharts {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
|
|
|
|
#mapEcharts2 {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
|
|
|
|
z-index: 1000;
|
|
|
|
|
}
|
|
|
|
|
.label-box {
|
|
|
|
|
position: absolute;
|
|
|
|
|
bottom: 0px;
|
|
|
|
|
left: 40px;
|
|
|
|
|
// background: url('../../assets/img/home/labelBg.png') no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
padding: 10px 15px;
|
|
|
|
|
.item {
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
line-height: 22px;
|
|
|
|
|
color: #fff;
|
|
|
|
|
position: relative;
|
|
|
|
|
padding-left: 15px;
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
}
|
|
|
|
|
.item:before {
|
|
|
|
|
content: '';
|
|
|
|
|
width: 10px;
|
|
|
|
|
height: 10px;
|
|
|
|
|
background: #06bbf2;
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 6px;
|
|
|
|
|
left: 0px;
|
|
|
|
|
}
|
|
|
|
|
.itemColor1:before {
|
|
|
|
|
background: #06bbf2;
|
|
|
|
|
}
|
|
|
|
|
.itemColor2:before {
|
|
|
|
|
background: #2df0fe;
|
|
|
|
|
}
|
|
|
|
|
.itemColor3:before {
|
|
|
|
|
background: #10e0a5;
|
|
|
|
|
}
|
|
|
|
|
.itemColor4:before {
|
|
|
|
|
background: #dcef4e;
|
|
|
|
|
}
|
|
|
|
|
.itemColor5:before {
|
|
|
|
|
background: #f48413;
|
|
|
|
|
}
|
|
|
|
|
.itemColor6:before {
|
|
|
|
|
background: #fc5403;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
|
|
|
|
<style>
|
|
|
|
|
.scrollTooltip::-webkit-scrollbar {
|
|
|
|
|
width: 10px;
|
|
|
|
|
height: 10px;
|
|
|
|
|
}
|
|
|
|
|
.scrollTooltip::-webkit-scrollbar-thumb {
|
|
|
|
|
background-color: #1653a6;
|
|
|
|
|
border-radius: 10px;
|
|
|
|
|
-webkit-box-shadow: inset 1px 1px 0 #1653a6;
|
|
|
|
|
}
|
|
|
|
|
.itemColor {
|
|
|
|
|
position: relative;
|
|
|
|
|
padding-left: 15px;
|
|
|
|
|
line-height: 22px;
|
|
|
|
|
}
|
|
|
|
|
.itemColor:before {
|
|
|
|
|
content: '';
|
|
|
|
|
width: 10px;
|
|
|
|
|
height: 10px;
|
|
|
|
|
background: #06bbf2;
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 6px;
|
|
|
|
|
left: 0px;
|
|
|
|
|
}
|
|
|
|
|
.itemColor1:before {
|
|
|
|
|
background: #06bbf2;
|
|
|
|
|
}
|
|
|
|
|
.itemColor2:before {
|
|
|
|
|
background: #2df0fe;
|
|
|
|
|
}
|
|
|
|
|
.itemColor3:before {
|
|
|
|
|
background: #10e0a5;
|
|
|
|
|
}
|
|
|
|
|
.itemColor4:before {
|
|
|
|
|
background: #dcef4e;
|
|
|
|
|
}
|
|
|
|
|
.itemColor5:before {
|
|
|
|
|
background: #f48413;
|
|
|
|
|
}
|
|
|
|
|
.itemColor6:before {
|
|
|
|
|
background: #fc5403;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
