432 lines
14 KiB
Vue
432 lines
14 KiB
Vue
|
<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'
|
||
|
|
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() {
|
||
|
|
this.getMapData()
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
getMapData(){
|
||
|
|
this.mapJson = hefeiJson;
|
||
|
|
// 获取地区中心坐标
|
||
|
|
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>
|