|
|
|
|
@ -6,12 +6,26 @@
|
|
|
|
|
right: 20px;
|
|
|
|
|
top: 15px;"> -->
|
|
|
|
|
<div class="space">
|
|
|
|
|
<!-- <div class="spaceFb">
|
|
|
|
|
<el-checkbox-group v-model="checkValue">
|
|
|
|
|
<el-checkbox label="示范基地"></el-checkbox>
|
|
|
|
|
<el-checkbox label="富硒地区"></el-checkbox>
|
|
|
|
|
<div class="space-content">
|
|
|
|
|
<div class="title">富硒产业规划分布</div>
|
|
|
|
|
<el-checkbox-group v-model="checkValueList" @change="changeCheckbox">
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-col>
|
|
|
|
|
<div class="item">
|
|
|
|
|
<el-checkbox label="示范基地" value="1"></el-checkbox>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col>
|
|
|
|
|
<div class="item">
|
|
|
|
|
<el-checkbox label="富硒地区" value="2"></el-checkbox>
|
|
|
|
|
</div>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</el-checkbox-group>
|
|
|
|
|
</div> -->
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="bg-map">
|
|
|
|
|
|
|
|
|
|
@ -28,10 +42,15 @@
|
|
|
|
|
<cyfz />
|
|
|
|
|
<zczc />
|
|
|
|
|
</div>
|
|
|
|
|
<el-dialog title=" " :visible.sync="showMapDialog" :append-to-body="false">
|
|
|
|
|
<div v-html="dialogContent" style="height: 78vh;margin-top: 2vh;overflow: scroll;background-color: #fff;">
|
|
|
|
|
</div>
|
|
|
|
|
</el-dialog>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import { industrialPlanSpaceDistribution } from '../../api/cygh'
|
|
|
|
|
import nationWide from '../../utils/nationWide.js';
|
|
|
|
|
import baseNew from './components/base'
|
|
|
|
|
import fxcy from './components/fxcy.vue'
|
|
|
|
|
@ -60,7 +79,33 @@ export default {
|
|
|
|
|
{ name: "西藏", value: [91.23, 29.5, 2333] },
|
|
|
|
|
{ name: "黑龙江", value: [128.03, 47.01, 1007] },
|
|
|
|
|
],
|
|
|
|
|
|
|
|
|
|
checkValueList: ['示范基地'],
|
|
|
|
|
mapsAllData: [],
|
|
|
|
|
mapData: [],
|
|
|
|
|
showMapDialog: false,
|
|
|
|
|
dialogContent: '',
|
|
|
|
|
mapDatas: {
|
|
|
|
|
data: [
|
|
|
|
|
{ name: '城区', deptId: '22', value: 1 },
|
|
|
|
|
{ name: '平定县', deptId: '19', value: 2 },
|
|
|
|
|
{ name: '郊区', deptId: '21', value: 3 },
|
|
|
|
|
{ name: '矿区', deptId: '43', value: 4 },
|
|
|
|
|
{ name: '盂县', deptId: '24', value: 5 },
|
|
|
|
|
// { name: '马关县', deptId: '20', value: 6 },
|
|
|
|
|
// { name: '广南县', deptId: '23', value: 7 },
|
|
|
|
|
// { name: '富宁县', deptId: '', value: 8 }
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
splitList: [
|
|
|
|
|
{ name: '城区', itemStyle: { normal: { areaColor: '#FFDC63' } } },
|
|
|
|
|
{ name: '平定县', itemStyle: { normal: { areaColor: '#489EAA' } } },
|
|
|
|
|
{ name: '郊区', itemStyle: { normal: { areaColor: '#54E6AB' } } },
|
|
|
|
|
{ name: '矿区', itemStyle: { normal: { areaColor: '#489EFF' } } },
|
|
|
|
|
{ name: '盂县', itemStyle: { normal: { areaColor: '#FD9A9A' } } },
|
|
|
|
|
// { name: '马关县', itemStyle: { normal: { areaColor: '#FD9A9A' } } },
|
|
|
|
|
// { name: '广南县', itemStyle: { normal: { areaColor: '#FFDC63' } } },
|
|
|
|
|
// { name: '富宁县', itemStyle: { normal: { areaColor: '#489EFF' } } }
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
created() {
|
|
|
|
|
@ -72,6 +117,7 @@ export default {
|
|
|
|
|
window.addEventListener("resize", () => {
|
|
|
|
|
this.mapChart.resize();
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
// rebackMap() { //返回全国地图
|
|
|
|
|
@ -82,17 +128,77 @@ export default {
|
|
|
|
|
// this.mapChart.setOption(this.mapOption);
|
|
|
|
|
// this.isreturn = false;
|
|
|
|
|
// },
|
|
|
|
|
getMapAllData() {
|
|
|
|
|
industrialPlanSpaceDistribution().then(res => {
|
|
|
|
|
this.mapsAllData = res.data
|
|
|
|
|
// 加载默认数据
|
|
|
|
|
this.mapsAllData.forEach(item => {
|
|
|
|
|
if (item.spaceType == 1) {
|
|
|
|
|
this.mapData.push({
|
|
|
|
|
content: item.content,
|
|
|
|
|
name: item.areaName,
|
|
|
|
|
coord: [item.cityName, item.cityCode],
|
|
|
|
|
symbol: 'image://' + require('../../../public/images/ghy.png'), // 自定义图片作为标注展示
|
|
|
|
|
symbolSize: [30, 30],
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
this.mapOption.series[0].markPoint.data = this.mapData
|
|
|
|
|
console.log(this.mapOption.series[0].markPoint.data)
|
|
|
|
|
this.mapChart.setOption(this.mapOption);
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
changeCheckbox() {
|
|
|
|
|
console.log(this.checkValueList)
|
|
|
|
|
this.mapData = []
|
|
|
|
|
if (this.checkValueList.length == 1) {
|
|
|
|
|
if (this.checkValueList[0] == '示范基地') {
|
|
|
|
|
this.mapsAllData.forEach(item => {
|
|
|
|
|
if (item.spaceType == 1) {
|
|
|
|
|
this.mapData.push({
|
|
|
|
|
content: item.content,
|
|
|
|
|
name: item.areaName,
|
|
|
|
|
coord: [item.cityName, item.cityCode],
|
|
|
|
|
symbol: 'image://' + require('../../../public/images/ghy.png'), // 自定义图片作为标注展示
|
|
|
|
|
symbolSize: [30, 30],
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
} else {
|
|
|
|
|
this.mapsAllData.forEach(item => {
|
|
|
|
|
if (item.spaceType == 2) {
|
|
|
|
|
this.mapData.push({
|
|
|
|
|
content: item.content,
|
|
|
|
|
name: item.areaName,
|
|
|
|
|
coord: [item.cityName, item.cityCode],
|
|
|
|
|
symbol: 'image://' + require('../../../public/images/ghb.png'), // 自定义图片作为标注展示
|
|
|
|
|
symbolSize: [30, 30],
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
} else if (this.checkValueList.length == 2) {
|
|
|
|
|
this.mapsAllData.forEach(item => {
|
|
|
|
|
this.mapData.push({
|
|
|
|
|
content: item.content,
|
|
|
|
|
name: item.areaName,
|
|
|
|
|
coord: [item.cityName, item.cityCode],
|
|
|
|
|
symbol: 'image://' + require(`../../../public/images/${item.spaceType == 1 ? 'ghy' : 'ghb'}.png`), // 自定义图片作为标注展示
|
|
|
|
|
symbolSize: [30, 30],
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
})
|
|
|
|
|
} else {
|
|
|
|
|
console.log('取消')
|
|
|
|
|
}
|
|
|
|
|
this.mapOption.series[0].markPoint.data = this.mapData
|
|
|
|
|
console.log(this.mapOption.series[0].markPoint.data)
|
|
|
|
|
this.mapChart.setOption(this.mapOption);
|
|
|
|
|
},
|
|
|
|
|
getMap() { //地图
|
|
|
|
|
if (!this.mapChart) {
|
|
|
|
|
this.mapChart = this.$echarts.init(document.getElementById('map'));
|
|
|
|
|
}
|
|
|
|
|
// var markPointData = [
|
|
|
|
|
// {
|
|
|
|
|
// name: "摄像图",
|
|
|
|
|
// coord: [90.738188, 30.383231],
|
|
|
|
|
// symbol: 'image://' + require('../../../public/images/sxt.png'), // 自定义图片作为标注展示
|
|
|
|
|
// symbolSize: [30, 30],
|
|
|
|
|
// }]
|
|
|
|
|
this.mapOption = {
|
|
|
|
|
// 背景颜色
|
|
|
|
|
// backgroundColor: "#00264e",
|
|
|
|
|
@ -165,10 +271,11 @@ export default {
|
|
|
|
|
label: {
|
|
|
|
|
show: false
|
|
|
|
|
},
|
|
|
|
|
areaColor: '#235CBF',
|
|
|
|
|
areaColor: 'none',
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 地图区域样式设置
|
|
|
|
|
regions: this.splitList,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
map: "china",
|
|
|
|
|
@ -234,24 +341,24 @@ export default {
|
|
|
|
|
// data: [{ type: 'average' }],
|
|
|
|
|
// symbol: 'image://' + require('../../assets/images/blue.png'), // 自定义图片作为标注展示
|
|
|
|
|
// symbolSize: [58, 38], // 调整图片的长宽
|
|
|
|
|
// symbolOffset: [0, '-50%'] // 调整标注图片的位移方向 大小
|
|
|
|
|
// symbolOffset: [0, '-50%'], // 调整标注图片的位移方向 大小
|
|
|
|
|
|
|
|
|
|
// symbolSize: [20, 40],
|
|
|
|
|
// data: markPointData,
|
|
|
|
|
data: [],
|
|
|
|
|
},
|
|
|
|
|
data: this.dataList,
|
|
|
|
|
data: this.mapDatas.data,
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
],
|
|
|
|
|
};
|
|
|
|
|
// 地图注册，第一个参数的名字必须和option.geo.map一致
|
|
|
|
|
this.$echarts.registerMap('china', nationWide.china);
|
|
|
|
|
console.log('区域编码',JSON.parse(localStorage.getItem('user')).areaAuthCode.slice(0, 6))
|
|
|
|
|
console.log('区域编码', JSON.parse(localStorage.getItem('user')).areaAuthCode + '00')
|
|
|
|
|
this.mapChart.setOption(this.mapOption);
|
|
|
|
|
// 根据区域名称切换到具体区域
|
|
|
|
|
nationWide.cityList.map(value => {
|
|
|
|
|
|
|
|
|
|
if (value.code == JSON.parse(localStorage.getItem('user')).areaAuthCode.slice(0, 6)) {
|
|
|
|
|
console.log(111,value.code)
|
|
|
|
|
if (value.code == JSON.parse(localStorage.getItem('user')).areaAuthCode + '00') {
|
|
|
|
|
console.log(111, value.code)
|
|
|
|
|
this.mapChart.clear();
|
|
|
|
|
this.mapOption.geo[0].map = 'Pmap';
|
|
|
|
|
this.mapOption.geo[1].map = 'Pmap';
|
|
|
|
|
@ -261,28 +368,33 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
//地图点位点击事件
|
|
|
|
|
// this.mapChart.on('click', params => {
|
|
|
|
|
// console.log(params)
|
|
|
|
|
// // 获取点击的省份名称
|
|
|
|
|
// let provinceName = params.name
|
|
|
|
|
// // 判断点击的省份是否有标记点 有则只显示该省的标记 否则会将其他省份的坐标点一起显示
|
|
|
|
|
// this.dataList.map(item => {
|
|
|
|
|
// if (item.name == provinceName) {
|
|
|
|
|
// this.mapOption.series[0].data = [item];
|
|
|
|
|
// }
|
|
|
|
|
// })
|
|
|
|
|
// // 进入省级地图
|
|
|
|
|
// nationWide.cityList.map(value => {
|
|
|
|
|
// if (value.name.indexOf(provinceName) !== -1) {
|
|
|
|
|
// this.mapChart.clear();
|
|
|
|
|
// this.mapOption.geo[0].map = 'Pmap';
|
|
|
|
|
// this.mapOption.geo[1].map = 'Pmap';
|
|
|
|
|
// this.$echarts.registerMap('Pmap', value.data)
|
|
|
|
|
// this.mapChart.setOption(this.mapOption);
|
|
|
|
|
// this.isreturn = true;
|
|
|
|
|
// }
|
|
|
|
|
// });
|
|
|
|
|
// })
|
|
|
|
|
this.mapChart.on('click', params => {
|
|
|
|
|
console.log(params.data.content)
|
|
|
|
|
this.showMapDialog = true
|
|
|
|
|
this.dialogContent = params.data.content
|
|
|
|
|
// // 获取点击的省份名称
|
|
|
|
|
// let provinceName = params.name
|
|
|
|
|
// // 判断点击的省份是否有标记点 有则只显示该省的标记 否则会将其他省份的坐标点一起显示
|
|
|
|
|
// this.dataList.map(item => {
|
|
|
|
|
// if (item.name == provinceName) {
|
|
|
|
|
// this.mapOption.series[0].data = [item];
|
|
|
|
|
// }
|
|
|
|
|
// })
|
|
|
|
|
// // 进入省级地图
|
|
|
|
|
// nationWide.cityList.map(value => {
|
|
|
|
|
// if (value.name.indexOf(provinceName) !== -1) {
|
|
|
|
|
// this.mapChart.clear();
|
|
|
|
|
// this.mapOption.geo[0].map = 'Pmap';
|
|
|
|
|
// this.mapOption.geo[1].map = 'Pmap';
|
|
|
|
|
// this.$echarts.registerMap('Pmap', value.data)
|
|
|
|
|
// this.mapChart.setOption(this.mapOption);
|
|
|
|
|
// this.isreturn = true;
|
|
|
|
|
// }
|
|
|
|
|
// });
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
// 获取地图数据
|
|
|
|
|
this.getMapAllData()
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
}
|
|
|
|
|
@ -295,7 +407,52 @@ export default {
|
|
|
|
|
position: relative;
|
|
|
|
|
overflow: auto;
|
|
|
|
|
|
|
|
|
|
.space {}
|
|
|
|
|
.space {
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 150px;
|
|
|
|
|
left: 1300px;
|
|
|
|
|
top: 20px;
|
|
|
|
|
z-index: 1800;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
text-align: left;
|
|
|
|
|
|
|
|
|
|
.space-content {
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
|
|
|
|
|
.title {
|
|
|
|
|
color: #85BEFF;
|
|
|
|
|
padding: 8px 10px;
|
|
|
|
|
background-image: url('../../../public/images/tltop.png');
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.item {
|
|
|
|
|
padding: 8px 4px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/deep/ .el-checkbox-group {
|
|
|
|
|
background-image: url('../../../public/images/tl-content.png');
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
padding: 0 10px;
|
|
|
|
|
font-size: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/deep/ .el-checkbox {
|
|
|
|
|
color: rgb(255, 255, 255);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/deep/ .el-checkbox__label {
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/deep/ .el-checkbox__inner {
|
|
|
|
|
width: 14px;
|
|
|
|
|
background-color: transparent;
|
|
|
|
|
border: .5px solid #85BEFF;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#map {
|
|
|
|
|
width: 100%;
|
|
|
|
|
@ -326,5 +483,35 @@ export default {
|
|
|
|
|
.rightInfo-wrap {
|
|
|
|
|
right: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/deep/ .el-dialog__title {
|
|
|
|
|
color: #fff;
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/deep/ .el-dialog__body {
|
|
|
|
|
padding: 0 20px 20px;
|
|
|
|
|
height: 69.565vh;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/deep/.el-dialog__wrapper {
|
|
|
|
|
// position: absolute !important;
|
|
|
|
|
margin: auto;
|
|
|
|
|
height: 86.956vh;
|
|
|
|
|
width: 60%;
|
|
|
|
|
background-image: url('../../../public/images/vediobg.png');
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/deep/ .el-dialog {
|
|
|
|
|
|
|
|
|
|
background: none;
|
|
|
|
|
height: 100%;
|
|
|
|
|
width: 100%;
|
|
|
|
|
margin: 0;
|
|
|
|
|
margin-top: 0 !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
</style>
|
zhy521521
10 months ago
