|
|
|
|
|
<template>
|
|
|
|
|
|
<div class="map-container">
|
|
|
|
|
|
<div id="map"></div>
|
|
|
|
|
|
<el-dialog
|
|
|
|
|
|
v-if="isShowDialog"
|
|
|
|
|
|
title=""
|
|
|
|
|
|
class="screen-dialog"
|
|
|
|
|
|
:visible.sync="isShowDialog"
|
|
|
|
|
|
width="650px"
|
|
|
|
|
|
:modal-append-to-body="false"
|
|
|
|
|
|
center
|
|
|
|
|
|
:modal="false"
|
|
|
|
|
|
>
|
|
|
|
|
|
<div class="top_title">网络举报事件</div>
|
|
|
|
|
|
<div class="dialog_ctn">
|
|
|
|
|
|
<el-row>
|
|
|
|
|
|
<el-col :span="24">
|
|
|
|
|
|
<div class="col_title">被举报对象</div>
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
</el-row>
|
|
|
|
|
|
<el-row>
|
|
|
|
|
|
<el-col :span="24">
|
|
|
|
|
|
<div class="col_ctn">{{ currentMsg.jbdx }}</div>
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
</el-row>
|
|
|
|
|
|
<el-row>
|
|
|
|
|
|
<el-col :span="6">
|
|
|
|
|
|
<div class="col_title">苏州编号</div>
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
<el-col :span="6">
|
|
|
|
|
|
<div class="col_title">举报时间</div>
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
</el-row>
|
|
|
|
|
|
<el-row>
|
|
|
|
|
|
<el-col :span="6">
|
|
|
|
|
|
<div class="col_ctn_little">{{ currentMsg.szbh }}</div>
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
<el-col :span="8">
|
|
|
|
|
|
<div class="col_ctn_little">{{ currentMsg.jbsj }}</div>
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
</el-row>
|
|
|
|
|
|
<el-row>
|
|
|
|
|
|
<el-col :span="24">
|
|
|
|
|
|
<div class="col_title">地址</div>
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
</el-row>
|
|
|
|
|
|
<el-row>
|
|
|
|
|
|
<el-col :span="24">
|
|
|
|
|
|
<div class="col_ctn_little">
|
|
|
|
|
|
{{ currentMsg.dz }}
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
</el-row>
|
|
|
|
|
|
<el-row>
|
|
|
|
|
|
<el-col :span="24">
|
|
|
|
|
|
<div class="col_title">举报内容</div>
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
</el-row>
|
|
|
|
|
|
<el-row>
|
|
|
|
|
|
<el-col :span="24">
|
|
|
|
|
|
<div class="col_ctn_little">{{ currentMsg.jbnr }}</div>
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
</el-row>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="dialogClose" @click="isShowDialog = false">关闭</div>
|
|
|
|
|
|
</el-dialog>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
|
import mapboxgl from 'mapbox-gl'
|
|
|
|
|
|
import 'mapbox-gl/dist/mapbox-gl.css'
|
|
|
|
|
|
export default {
|
|
|
|
|
|
data() {
|
|
|
|
|
|
return {
|
|
|
|
|
|
isShowDialog: false,
|
|
|
|
|
|
currentMsg: {
|
|
|
|
|
|
jbdx: '电子科技有限公司',
|
|
|
|
|
|
szbh: 'SZ2023',
|
|
|
|
|
|
jbsj: '2023-07-31',
|
|
|
|
|
|
dz: '太仓人民政府',
|
|
|
|
|
|
jbnr: '偷电'
|
|
|
|
|
|
},
|
|
|
|
|
|
map: null,
|
|
|
|
|
|
pointList: [
|
|
|
|
|
|
{ id: 1, lng: 121.136909, lat: 31.463778, title: '太仓人民政府' },
|
|
|
|
|
|
{ id: 2, lng: 121.086958, lat: 31.460883, title: '苏州吉闽物流有限公司' },
|
|
|
|
|
|
{ id: 3, lng: 121.05452, lat: 31.515175, title: '太仓星兴亮机械设备有限公司' },
|
|
|
|
|
|
{ id: 4, lng: 121.127801, lat: 31.472566, title: '兴和电子有限公司' },
|
|
|
|
|
|
{ id: 5, lng: 121.142345, lat: 31.477655, title: '太仓裕盛体育用品有限公司' }
|
|
|
|
|
|
]
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
mounted() {
|
|
|
|
|
|
const _this = this
|
|
|
|
|
|
mapboxgl.accessToken = 'pk.eyJ1Ijoic2hhcmVhbGV4IiwiYSI6ImNsaXNhZmRjbTFhbnczZmxib3h1OW05YXYifQ.PhlKv60ar3K359d8x2yBPw'
|
|
|
|
|
|
const map = new mapboxgl.Map({
|
|
|
|
|
|
container: 'map', // 地图容器的id或元素
|
|
|
|
|
|
style: 'mapbox://styles/sharealex/cl3ntpire000314ookb5o81oo', // 地图样式
|
|
|
|
|
|
center: [121.136909, 31.463778], // 中心点经纬度
|
|
|
|
|
|
zoom: 14.5,
|
|
|
|
|
|
pitch: 50
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
// 地图加载完毕
|
|
|
|
|
|
map.on('load', function() {
|
|
|
|
|
|
// 地图点位
|
|
|
|
|
|
_this.pointList.forEach(item => {
|
|
|
|
|
|
const el = document.createElement('div')
|
|
|
|
|
|
el.className = 'map-marker'
|
|
|
|
|
|
el.innerHTML = `
|
|
|
|
|
|
<img class="marker-img" src= "${require('@/assets/ecosphere/point.png')}" />
|
|
|
|
|
|
<div class="marker-text">${item.title}</div>
|
|
|
|
|
|
`
|
|
|
|
|
|
new mapboxgl.Marker(el)
|
|
|
|
|
|
.setLngLat([item.lng, item.lat])
|
|
|
|
|
|
.addTo(map)
|
|
|
|
|
|
el.addEventListener('click', () => {
|
|
|
|
|
|
_this.isShowDialog = true
|
|
|
|
|
|
})
|
|
|
|
|
|
})
|
|
|
|
|
|
map.addLayer({
|
|
|
|
|
|
id: 'lou-extrusion',
|
|
|
|
|
|
type: 'fill-extrusion',
|
|
|
|
|
|
source: {
|
|
|
|
|
|
type: 'geojson',
|
|
|
|
|
|
data: require('@/utils/mapGeojson/1.json')
|
|
|
|
|
|
},
|
|
|
|
|
|
paint: {
|
|
|
|
|
|
// 设置填充颜色
|
|
|
|
|
|
'fill-extrusion-color': '#2998F8',
|
|
|
|
|
|
// 从属性中获得高度，这里用的是height字段
|
|
|
|
|
|
'fill-extrusion-height': ['get', 'height'],
|
|
|
|
|
|
'fill-extrusion-base': 0,
|
|
|
|
|
|
// 透明度设置
|
|
|
|
|
|
'fill-extrusion-opacity': 0.7
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
})
|
|
|
|
|
|
this.map = map
|
|
|
|
|
|
},
|
|
|
|
|
|
methods: {}
|
|
|
|
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<style lang='scss' scoped>
|
|
|
|
|
|
.map-container{
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: $ScreenHeight;
|
|
|
|
|
|
#map{
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.screen-dialog {
|
|
|
|
|
|
left: 30%;
|
|
|
|
|
|
right: 30%;
|
|
|
|
|
|
top: 10%;
|
|
|
|
|
|
bottom: 20%;
|
|
|
|
|
|
z-index: 9999;
|
|
|
|
|
|
::v-deep .el-dialog__header {
|
|
|
|
|
|
background: rgba(255, 255, 255, 0);
|
|
|
|
|
|
}
|
|
|
|
|
|
::v-deep .el-dialog {
|
|
|
|
|
|
background: url('~@/assets/dialog/wlglDialog/bg.png') no-repeat 100% 100%;
|
|
|
|
|
|
//width: 1260px;
|
|
|
|
|
|
height: 590px;
|
|
|
|
|
|
//padding-top:20px;
|
|
|
|
|
|
background-size: cover;
|
|
|
|
|
|
}
|
|
|
|
|
|
::v-deep .el-dialog__headerbtn {
|
|
|
|
|
|
top: 1;
|
|
|
|
|
|
}
|
|
|
|
|
|
::v-deep .el-dialog__footer {
|
|
|
|
|
|
background: rgba(255, 255, 255, 0);
|
|
|
|
|
|
}
|
|
|
|
|
|
.top_title {
|
|
|
|
|
|
font-family: SourceHanSansCN-Bold;
|
|
|
|
|
|
font-size: 28px;
|
|
|
|
|
|
letter-spacing: 1px;
|
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
|
margin-top: -35px;
|
|
|
|
|
|
margin-left: 20px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.dialog_ctn {
|
|
|
|
|
|
padding: 60px 0 0 60px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.col_title {
|
|
|
|
|
|
font-family: SourceHanSansCN-Regular;
|
|
|
|
|
|
font-size: 28px;
|
|
|
|
|
|
color: #1dd1fe;
|
|
|
|
|
|
}
|
|
|
|
|
|
.col_ctn {
|
|
|
|
|
|
font-family: SourceHanSansCN-Bold;
|
|
|
|
|
|
font-size: 30px;
|
|
|
|
|
|
color: #ffe90c;
|
|
|
|
|
|
margin: 13px 0;
|
|
|
|
|
|
}
|
|
|
|
|
|
.col_ctn_little {
|
|
|
|
|
|
font-family: DIN-Medium;
|
|
|
|
|
|
font-size: 28px;
|
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
|
margin: 13px 0;
|
|
|
|
|
|
}
|
|
|
|
|
|
.dialogClose {
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
width: 160px;
|
|
|
|
|
|
height: 50px;
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
bottom: 25px;
|
|
|
|
|
|
left: 261px;
|
|
|
|
|
|
background: url('~@/assets/dialog/btn-bg.png') no-repeat 100% 100%;
|
|
|
|
|
|
font-family: SourceHanSansCN-Regular;
|
|
|
|
|
|
font-size: 28px;
|
|
|
|
|
|
font-weight: normal;
|
|
|
|
|
|
font-stretch: normal;
|
|
|
|
|
|
line-height: 50px;
|
|
|
|
|
|
letter-spacing: 2px;
|
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
}
|
|
|
|
|
|
.dialogClose:hover {
|
|
|
|
|
|
background: url('~@/assets/dialog/btn-bg-act.png') no-repeat 100% 100%;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.dialog-title {
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
width: 756px;
|
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
|
font-family: SourceHanSansCN-Bold;
|
|
|
|
|
|
font-size: 36px;
|
|
|
|
|
|
font-weight: normal;
|
|
|
|
|
|
font-stretch: normal;
|
|
|
|
|
|
line-height: 38px;
|
|
|
|
|
|
letter-spacing: 0;
|
|
|
|
|
|
color: #ffe850;
|
|
|
|
|
|
}
|
|
|
|
|
|
.dialog-explain {
|
|
|
|
|
|
margin-top: 39px;
|
|
|
|
|
|
height: 125px;
|
|
|
|
|
|
background: url('~@/assets/dialog/信息-bg.png') no-repeat 100% 100%;
|
|
|
|
|
|
}
|
|
|
|
|
|
.dialog-content {
|
|
|
|
|
|
width: 1073px;
|
|
|
|
|
|
max-height: 500px;
|
|
|
|
|
|
margin: 20px auto;
|
|
|
|
|
|
font-family: SourceHanSansCN-Medium;
|
|
|
|
|
|
font-size: 30px;
|
|
|
|
|
|
font-weight: normal;
|
|
|
|
|
|
font-stretch: normal;
|
|
|
|
|
|
line-height: 50px;
|
|
|
|
|
|
letter-spacing: 2px;
|
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
|
}
|
|
|
|
|
|
</style>
|
