|
|
|
|
@ -1,325 +1,676 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div class="map-container">
|
|
|
|
|
<div id="container"></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="8">
|
|
|
|
|
<div class="col_title">苏州编号</div>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="8">
|
|
|
|
|
<div class="col_title">举报时间</div>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-col :span="8">
|
|
|
|
|
<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 class="map-overlay" v-if="showOverlay">
|
|
|
|
|
<div class="overlay-content">
|
|
|
|
|
<div class="overlay-header">
|
|
|
|
|
<div class="overlay-title">{{ currentDistrict.name }}</div>
|
|
|
|
|
<div class="overlay-close" @click="showOverlay = false">×</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="overlay-body">
|
|
|
|
|
<div class="data-stats">
|
|
|
|
|
<div class="stat-item">
|
|
|
|
|
<div class="stat-value">{{ currentDistrict.issues || 0 }}</div>
|
|
|
|
|
<div class="stat-label">问题数量</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="stat-item">
|
|
|
|
|
<div class="stat-value">{{ currentDistrict.reports || 0 }}</div>
|
|
|
|
|
<div class="stat-label">举报数量</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="stat-item">
|
|
|
|
|
<div class="stat-value">{{ currentDistrict.handled || 0 }}</div>
|
|
|
|
|
<div class="stat-label">处理数量</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="problem-list" v-if="currentDistrict.problemList && currentDistrict.problemList.length">
|
|
|
|
|
<div class="problem-title">主要问题类型</div>
|
|
|
|
|
<div class="problem-item" v-for="(item, index) in currentDistrict.problemList" :key="index">
|
|
|
|
|
<span class="problem-dot"></span>
|
|
|
|
|
<span class="problem-name">{{ item.name }}</span>
|
|
|
|
|
<span class="problem-value">{{ item.value }}</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 数据卡片 -->
|
|
|
|
|
<div class="data-card">
|
|
|
|
|
<div class="data-card-title">数据信息</div>
|
|
|
|
|
<div class="data-card-content">
|
|
|
|
|
<div class="data-row">
|
|
|
|
|
<div class="data-label">网络动态:</div>
|
|
|
|
|
<div class="data-value highlight">88 条</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="data-row">
|
|
|
|
|
<div class="data-label">舆情事件:</div>
|
|
|
|
|
<div class="data-value highlight">78 次</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="data-row">
|
|
|
|
|
<div class="data-label">举报事件:</div>
|
|
|
|
|
<div class="data-value highlight">24 个</div>
|
|
|
|
|
</div>
|
|
|
|
|
</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" v-html='currentMsg.jbnr'></div> -->
|
|
|
|
|
<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 location from "@/assets/ecosphere/point.png";
|
|
|
|
|
import { listJbmap, getJbmap } from "@/api/netManage/index.js";
|
|
|
|
|
import AMapLoader from "@amap/amap-jsapi-loader";
|
|
|
|
|
import * as echarts from 'echarts';
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
data() {
|
|
|
|
|
// VueAMap.initAMapApiLoader({
|
|
|
|
|
// key: 'b3c7a7ce466721c3be1d4ea539f82421', // 高德key
|
|
|
|
|
// securityJsCode: 'ec84db9c5dfc3d304ca9219e764ffeb8', // 安全密钥
|
|
|
|
|
// });
|
|
|
|
|
return {
|
|
|
|
|
isShowDialog: false,
|
|
|
|
|
center: [121.136909, 31.463778],
|
|
|
|
|
zoom: 14.5,
|
|
|
|
|
zooms: [14, 18],
|
|
|
|
|
// markerOffset: [-35,-123],
|
|
|
|
|
// markers: [],
|
|
|
|
|
// 展示的内容
|
|
|
|
|
currentMsg: {
|
|
|
|
|
jbdx: "电子科技有限公司",
|
|
|
|
|
szbh: "SZ2023",
|
|
|
|
|
jbsj: "2023-07-31",
|
|
|
|
|
dz: "太仓人民政府",
|
|
|
|
|
jbnr: "偷电",
|
|
|
|
|
},
|
|
|
|
|
map: null,
|
|
|
|
|
pointList: [
|
|
|
|
|
{ id: 1, lng: 121.136909, lat: 31.463778, title: "太仓人民政府" },
|
|
|
|
|
districtLayer: null,
|
|
|
|
|
showOverlay: false,
|
|
|
|
|
currentDistrict: {},
|
|
|
|
|
districts: [
|
|
|
|
|
{
|
|
|
|
|
id: 1,
|
|
|
|
|
name: "苏州工业园区金鸡湖商务区",
|
|
|
|
|
center: [120.7214, 31.3217],
|
|
|
|
|
issues: 24,
|
|
|
|
|
reports: 68,
|
|
|
|
|
handled: 56,
|
|
|
|
|
problemList: [
|
|
|
|
|
{ name: "网络违法行为", value: 12 },
|
|
|
|
|
{ name: "有害信息传播", value: 8 },
|
|
|
|
|
{ name: "信息安全隐患", value: 4 }
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: 2,
|
|
|
|
|
lng: 121.086958,
|
|
|
|
|
lat: 31.460883,
|
|
|
|
|
title: "苏州吉闽物流有限公司",
|
|
|
|
|
name: "苏州工业园区高新制造与国际贸易区",
|
|
|
|
|
center: [120.7531, 31.2945],
|
|
|
|
|
issues: 32,
|
|
|
|
|
reports: 45,
|
|
|
|
|
handled: 38,
|
|
|
|
|
problemList: [
|
|
|
|
|
{ name: "网络违法行为", value: 14 },
|
|
|
|
|
{ name: "有害信息传播", value: 10 },
|
|
|
|
|
{ name: "信息安全隐患", value: 8 }
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: 3,
|
|
|
|
|
lng: 121.05452,
|
|
|
|
|
lat: 31.515175,
|
|
|
|
|
title: "太仓星兴亮机械设备有限公司",
|
|
|
|
|
name: "苏州阳澄湖半岛旅游度假区",
|
|
|
|
|
center: [120.7895, 31.3915],
|
|
|
|
|
issues: 15,
|
|
|
|
|
reports: 29,
|
|
|
|
|
handled: 22,
|
|
|
|
|
problemList: [
|
|
|
|
|
{ name: "网络违法行为", value: 7 },
|
|
|
|
|
{ name: "有害信息传播", value: 5 },
|
|
|
|
|
{ name: "信息安全隐患", value: 3 }
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{ id: 4, lng: 121.127801, lat: 31.472566, title: "兴和电子有限公司" },
|
|
|
|
|
{
|
|
|
|
|
id: 5,
|
|
|
|
|
lng: 121.142345,
|
|
|
|
|
lat: 31.477655,
|
|
|
|
|
title: "太仓裕盛体育用品有限公司",
|
|
|
|
|
},
|
|
|
|
|
id: 4,
|
|
|
|
|
name: "苏州独墅湖科教创新区",
|
|
|
|
|
center: [120.7364, 31.2650],
|
|
|
|
|
issues: 18,
|
|
|
|
|
reports: 36,
|
|
|
|
|
handled: 30,
|
|
|
|
|
problemList: [
|
|
|
|
|
{ name: "网络违法行为", value: 8 },
|
|
|
|
|
{ name: "有害信息传播", value: 6 },
|
|
|
|
|
{ name: "信息安全隐患", value: 4 }
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
layers: {
|
|
|
|
|
layer: null,
|
|
|
|
|
mapStyle: [
|
|
|
|
|
{
|
|
|
|
|
"featureType": "land",
|
|
|
|
|
"elementType": "geometry",
|
|
|
|
|
"stylers": {
|
|
|
|
|
"color": "#081220",
|
|
|
|
|
"visibility": "off" // 隐藏陆地
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"featureType": "water",
|
|
|
|
|
"elementType": "geometry",
|
|
|
|
|
"stylers": {
|
|
|
|
|
"color": "#0e253d",
|
|
|
|
|
"visibility": "off" // 隐藏水域
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"featureType": "green",
|
|
|
|
|
"elementType": "geometry",
|
|
|
|
|
"stylers": {
|
|
|
|
|
"color": "#0c1f34",
|
|
|
|
|
"visibility": "off" // 隐藏绿地
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"featureType": "building",
|
|
|
|
|
"elementType": "geometry",
|
|
|
|
|
"stylers": {
|
|
|
|
|
"color": "#113549",
|
|
|
|
|
"visibility": "off" // 隐藏建筑
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"featureType": "road",
|
|
|
|
|
"elementType": "geometry",
|
|
|
|
|
"stylers": {
|
|
|
|
|
"color": "#193e5e",
|
|
|
|
|
"visibility": "off" // 隐藏道路
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"featureType": "road",
|
|
|
|
|
"elementType": "labels",
|
|
|
|
|
"stylers": {
|
|
|
|
|
"visibility": "off"
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"featureType": "highway",
|
|
|
|
|
"elementType": "geometry",
|
|
|
|
|
"stylers": {
|
|
|
|
|
"color": "#193e5e",
|
|
|
|
|
"visibility": "off" // 隐藏高速公路
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"featureType": "highway",
|
|
|
|
|
"elementType": "labels",
|
|
|
|
|
"stylers": {
|
|
|
|
|
"visibility": "off"
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"featureType": "nationalway",
|
|
|
|
|
"elementType": "geometry",
|
|
|
|
|
"stylers": {
|
|
|
|
|
"color": "#193e5e",
|
|
|
|
|
"visibility": "off" // 隐藏国道
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"featureType": "nationalway",
|
|
|
|
|
"elementType": "labels",
|
|
|
|
|
"stylers": {
|
|
|
|
|
"visibility": "off"
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"featureType": "provincialway",
|
|
|
|
|
"elementType": "geometry",
|
|
|
|
|
"stylers": {
|
|
|
|
|
"color": "#193e5e",
|
|
|
|
|
"visibility": "off" // 隐藏省道
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"featureType": "provincialway",
|
|
|
|
|
"elementType": "labels",
|
|
|
|
|
"stylers": {
|
|
|
|
|
"visibility": "off"
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"featureType": "background",
|
|
|
|
|
"elementType": "all",
|
|
|
|
|
"stylers": {
|
|
|
|
|
"visibility": "off" // 隐藏背景
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
this.$nextTick(() => {
|
|
|
|
|
this.initGdMap();
|
|
|
|
|
this.initMap();
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
// 初始化高德地图
|
|
|
|
|
initGdMap() {
|
|
|
|
|
let _this = this;
|
|
|
|
|
AMapLoader.load({
|
|
|
|
|
key: "b3c7a7ce466721c3be1d4ea539f82421", // 申请好的Web端开发者Key，首次调用 load 时必填
|
|
|
|
|
version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
|
|
|
|
|
plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
|
|
|
|
|
})
|
|
|
|
|
.then((AMap) => {
|
|
|
|
|
_this.map = new AMap.Map("container", {
|
|
|
|
|
// 设置地图容器id
|
|
|
|
|
async initMap() {
|
|
|
|
|
try {
|
|
|
|
|
// 加载高德地图API
|
|
|
|
|
const AMap = await AMapLoader.load({
|
|
|
|
|
key: "b3c7a7ce466721c3be1d4ea539f82421",
|
|
|
|
|
version: "2.0",
|
|
|
|
|
plugins: [
|
|
|
|
|
'AMap.DistrictSearch',
|
|
|
|
|
'AMap.DistrictLayer'
|
|
|
|
|
]
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// 初始化地图
|
|
|
|
|
this.map = new AMap.Map("container", {
|
|
|
|
|
zoom: 11.5,
|
|
|
|
|
center: [120.7389, 31.2909], // 苏州工业园区中心
|
|
|
|
|
viewMode: "3D",
|
|
|
|
|
pitch: 35,
|
|
|
|
|
rotation: 0,
|
|
|
|
|
mapStyle: this.generateCustomMapStyle(), // 使用自定义地图样式
|
|
|
|
|
expandZoomRange: true,
|
|
|
|
|
zooms: [8, 20],
|
|
|
|
|
showBuildingBlock: false,
|
|
|
|
|
showLabel: false,
|
|
|
|
|
viewMode: "2D", // 是否为3D地图模式
|
|
|
|
|
zoom: 15, // 初始化地图级别
|
|
|
|
|
center: _this.center, // 初始化地图中心点位置
|
|
|
|
|
mapStyle: "amap://styles/darkblue",
|
|
|
|
|
skyColor: 'transparent', // 透明天空
|
|
|
|
|
features: [], // 不显示任何默认特性
|
|
|
|
|
defaultCursor: 'default',
|
|
|
|
|
isHotspot: false,
|
|
|
|
|
defaultLayer: false, // 不显示默认图层
|
|
|
|
|
layers: [], // 不使用默认图层
|
|
|
|
|
backgroundColor: 'transparent' // 透明背景
|
|
|
|
|
});
|
|
|
|
|
_this.getMarkerData();
|
|
|
|
|
})
|
|
|
|
|
.catch((e) => {
|
|
|
|
|
console.log(e);
|
|
|
|
|
|
|
|
|
|
// 禁用地图旋转和缩放交互
|
|
|
|
|
this.map.setStatus({
|
|
|
|
|
dragEnable: false,
|
|
|
|
|
zoomEnable: false,
|
|
|
|
|
doubleClickZoom: false,
|
|
|
|
|
keyboardEnable: false,
|
|
|
|
|
rotateEnable: false
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// 创建自定义地图
|
|
|
|
|
this.createCustomMap();
|
|
|
|
|
|
|
|
|
|
} catch (error) {
|
|
|
|
|
console.error("地图加载失败", error);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 生成自定义地图样式
|
|
|
|
|
generateCustomMapStyle() {
|
|
|
|
|
return {
|
|
|
|
|
styleJson: this.mapStyle
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 获取图标数据
|
|
|
|
|
async getMarkerData() {
|
|
|
|
|
let res = await listJbmap({ isStatus: 1, pageNum: 1, pageSize: 50 });
|
|
|
|
|
res.rows.map((row, index) => {
|
|
|
|
|
if (index == 0) {
|
|
|
|
|
//将地图的经纬度设置第一个坐标点
|
|
|
|
|
this.map.setCenter([row.longitude, row.latitude]);
|
|
|
|
|
}
|
|
|
|
|
var viaMarker = new AMap.Marker({
|
|
|
|
|
position: new AMap.LngLat(row.longitude, row.latitude),
|
|
|
|
|
// 将一张图片的地址设置为 icon
|
|
|
|
|
icon: location,
|
|
|
|
|
extData: row,
|
|
|
|
|
// 设置了 icon 以后，设置 icon 的偏移量，以 icon 的 [center bottom] 为原点
|
|
|
|
|
// offset: new AMap.Pixel(-13, -30),
|
|
|
|
|
// 创建自定义地图
|
|
|
|
|
createCustomMap() {
|
|
|
|
|
// 园区轮廓坐标（这是示例坐标，需要替换为实际的苏州工业园区坐标）
|
|
|
|
|
const parkBoundary = [
|
|
|
|
|
[120.7214, 31.3317], [120.7714, 31.3417], [120.7894, 31.3307],
|
|
|
|
|
[120.7994, 31.3107], [120.7894, 31.2907], [120.7714, 31.2707],
|
|
|
|
|
[120.7514, 31.2607], [120.7314, 31.2607], [120.7114, 31.2707],
|
|
|
|
|
[120.6914, 31.2907], [120.6914, 31.3107], [120.7114, 31.3307]
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
// 定义子区域坐标（仅示例，需要使用实际的坐标）
|
|
|
|
|
const subDistricts = [
|
|
|
|
|
{
|
|
|
|
|
name: "苏州阳澄湖半岛旅游度假区",
|
|
|
|
|
coordinates: [
|
|
|
|
|
[120.7214, 31.3517], [120.7714, 31.3617], [120.7894, 31.3407],
|
|
|
|
|
[120.7614, 31.3307], [120.7414, 31.3407]
|
|
|
|
|
],
|
|
|
|
|
center: [120.7614, 31.3417],
|
|
|
|
|
markerType: "blue"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: "苏州工业园区高新制造与国际贸易区",
|
|
|
|
|
coordinates: [
|
|
|
|
|
[120.7614, 31.3007], [120.7894, 31.3107], [120.7894, 31.2907],
|
|
|
|
|
[120.7714, 31.2707], [120.7514, 31.2807], [120.7514, 31.2907]
|
|
|
|
|
],
|
|
|
|
|
center: [120.7714, 31.2907],
|
|
|
|
|
markerType: "blue"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: "苏州工业园区金鸡湖商务区",
|
|
|
|
|
coordinates: [
|
|
|
|
|
[120.7114, 31.3107], [120.7514, 31.3207], [120.7514, 31.2907],
|
|
|
|
|
[120.7314, 31.2807], [120.7114, 31.2907]
|
|
|
|
|
],
|
|
|
|
|
center: [120.7314, 31.3007],
|
|
|
|
|
markerType: "red"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: "苏州独墅湖科教创新区",
|
|
|
|
|
coordinates: [
|
|
|
|
|
[120.7214, 31.2707], [120.7414, 31.2607], [120.7614, 31.2507],
|
|
|
|
|
[120.7414, 31.2407], [120.7214, 31.2507]
|
|
|
|
|
],
|
|
|
|
|
center: [120.7414, 31.2607],
|
|
|
|
|
markerType: "blue"
|
|
|
|
|
}
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
// 创建园区主轮廓
|
|
|
|
|
this.createDistrictPolygon(parkBoundary, {
|
|
|
|
|
strokeColor: '#00eaff',
|
|
|
|
|
strokeWeight: 3,
|
|
|
|
|
fillColor: '#3ecbff',
|
|
|
|
|
fillOpacity: 0.3,
|
|
|
|
|
strokeStyle: 'solid',
|
|
|
|
|
zIndex: 2
|
|
|
|
|
});
|
|
|
|
|
viaMarker.on("click", (e) => {
|
|
|
|
|
let rowItem = e.target.getExtData();
|
|
|
|
|
this.getMarkerInfo(rowItem.id);
|
|
|
|
|
|
|
|
|
|
// 为主轮廓添加发光效果
|
|
|
|
|
this.createDistrictPolygon(parkBoundary, {
|
|
|
|
|
strokeColor: '#00eaff',
|
|
|
|
|
strokeWeight: 6,
|
|
|
|
|
fillColor: 'transparent',
|
|
|
|
|
fillOpacity: 0,
|
|
|
|
|
strokeOpacity: 0.4,
|
|
|
|
|
zIndex: 1
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
var text = new AMap.Text({
|
|
|
|
|
text: row.jbObj,
|
|
|
|
|
anchor: "bottom-center", // 设置文本标记锚点
|
|
|
|
|
cursor: "pointer",
|
|
|
|
|
angle: 0,
|
|
|
|
|
// 创建子区域
|
|
|
|
|
subDistricts.forEach(district => {
|
|
|
|
|
// 创建子区域多边形
|
|
|
|
|
this.createDistrictPolygon(district.coordinates, {
|
|
|
|
|
strokeColor: '#00eaff',
|
|
|
|
|
strokeWeight: 2,
|
|
|
|
|
fillColor: '#3ecbff',
|
|
|
|
|
fillOpacity: 0.2,
|
|
|
|
|
zIndex: 3
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// 添加区域名称标签
|
|
|
|
|
this.createDistrictLabel(district.center, district.name);
|
|
|
|
|
|
|
|
|
|
// 添加标记点
|
|
|
|
|
this.createMarker(district.center, district.markerType);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// 添加静态数据卡片
|
|
|
|
|
this.addDataCard();
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 创建区域多边形
|
|
|
|
|
createDistrictPolygon(coordinates, style) {
|
|
|
|
|
const AMap = window.AMap;
|
|
|
|
|
if (!AMap) return;
|
|
|
|
|
|
|
|
|
|
const polygon = new AMap.Polygon({
|
|
|
|
|
path: coordinates,
|
|
|
|
|
...style
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
this.map.add(polygon);
|
|
|
|
|
return polygon;
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 创建区域标签
|
|
|
|
|
createDistrictLabel(position, name) {
|
|
|
|
|
const AMap = window.AMap;
|
|
|
|
|
if (!AMap) return;
|
|
|
|
|
|
|
|
|
|
const textMarker = new AMap.Text({
|
|
|
|
|
text: name,
|
|
|
|
|
position: position,
|
|
|
|
|
style: {
|
|
|
|
|
"font-size": "20px",
|
|
|
|
|
color: "#fff",
|
|
|
|
|
'color': '#fff',
|
|
|
|
|
'background-color': 'transparent',
|
|
|
|
|
'font-size': '14px',
|
|
|
|
|
'font-weight': 'bold',
|
|
|
|
|
'text-shadow': '0 0 5px rgba(0, 0, 0, 0.8)'
|
|
|
|
|
},
|
|
|
|
|
offset: [30, 0],
|
|
|
|
|
position: new AMap.LngLat(row.longitude, row.latitude),
|
|
|
|
|
extData: row,
|
|
|
|
|
zIndex: 10
|
|
|
|
|
});
|
|
|
|
|
text.on("click", (e) => {
|
|
|
|
|
let rowItem = e.target.getExtData();
|
|
|
|
|
this.getMarkerInfo(rowItem.id);
|
|
|
|
|
|
|
|
|
|
this.map.add(textMarker);
|
|
|
|
|
return textMarker;
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 创建标记点
|
|
|
|
|
createMarker(position, type) {
|
|
|
|
|
const AMap = window.AMap;
|
|
|
|
|
if (!AMap) return;
|
|
|
|
|
|
|
|
|
|
// 这里使用一个模拟的图标
|
|
|
|
|
const icon = type === 'red' ?
|
|
|
|
|
'//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png' :
|
|
|
|
|
'//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png';
|
|
|
|
|
|
|
|
|
|
// 创建标记
|
|
|
|
|
const marker = new AMap.Marker({
|
|
|
|
|
position: position,
|
|
|
|
|
icon: new AMap.Icon({
|
|
|
|
|
image: icon,
|
|
|
|
|
size: new AMap.Size(24, 34),
|
|
|
|
|
imageSize: new AMap.Size(24, 34)
|
|
|
|
|
}),
|
|
|
|
|
offset: new AMap.Pixel(-12, -34),
|
|
|
|
|
zIndex: 11
|
|
|
|
|
});
|
|
|
|
|
this.map.add([viaMarker, text]);
|
|
|
|
|
|
|
|
|
|
// 添加到地图
|
|
|
|
|
this.map.add(marker);
|
|
|
|
|
|
|
|
|
|
// 添加脉冲效果
|
|
|
|
|
const pulseMarker = new AMap.Marker({
|
|
|
|
|
position: position,
|
|
|
|
|
content: '<div class="pulse-marker-container"><div class="pulse-marker"></div></div>',
|
|
|
|
|
zIndex: 10,
|
|
|
|
|
offset: new AMap.Pixel(-10, -10)
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 获取点位详情
|
|
|
|
|
async getMarkerInfo(id) {
|
|
|
|
|
let res = await getJbmap(id);
|
|
|
|
|
let { jbObj, number, jbTime, address, content } = res.data;
|
|
|
|
|
this.currentMsg.jbdx = jbObj;
|
|
|
|
|
this.currentMsg.szbh = number;
|
|
|
|
|
this.currentMsg.jbsj = jbTime;
|
|
|
|
|
this.currentMsg.dz = address;
|
|
|
|
|
this.currentMsg.jbnr = content;
|
|
|
|
|
this.isShowDialog = true;
|
|
|
|
|
this.map.add(pulseMarker);
|
|
|
|
|
|
|
|
|
|
return marker;
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 添加数据卡片
|
|
|
|
|
addDataCard() {
|
|
|
|
|
// 数据卡片的实现已在模板中完成
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
beforeDestroy() {
|
|
|
|
|
this.map?.destroy();
|
|
|
|
|
},
|
|
|
|
|
if (this.map) {
|
|
|
|
|
this.map.destroy();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
.map-container {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: $ScreenHeight;
|
|
|
|
|
height: 100%;
|
|
|
|
|
position: relative;
|
|
|
|
|
pointer-events: none; /* 允许点击穿透到背景图 */
|
|
|
|
|
|
|
|
|
|
#container {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
background-color: rgb(26, 61, 106, 0.3);
|
|
|
|
|
background-color: transparent !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.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;
|
|
|
|
|
/* 确保高德地图的容器背景透明 */
|
|
|
|
|
:deep(.amap-maps),
|
|
|
|
|
:deep(.amap-drags),
|
|
|
|
|
:deep(.amap-layers),
|
|
|
|
|
:deep(.amap-overlays) {
|
|
|
|
|
background-color: transparent !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.map-overlay {
|
|
|
|
|
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;
|
|
|
|
|
top: 50%;
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translate(-50%, -50%);
|
|
|
|
|
z-index: 10;
|
|
|
|
|
width: 400px;
|
|
|
|
|
background: rgba(4, 32, 66, 0.8);
|
|
|
|
|
border: 1px solid #0a5080;
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
box-shadow: 0 0 15px rgba(0, 193, 222, 0.7);
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
pointer-events: auto; /* 允许点击交互 */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.overlay-header {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
align-items: center;
|
|
|
|
|
padding: 12px 15px;
|
|
|
|
|
background: rgba(10, 80, 128, 0.8);
|
|
|
|
|
border-bottom: 1px solid #0a5080;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.overlay-title {
|
|
|
|
|
color: #fff;
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.overlay-close {
|
|
|
|
|
color: #fff;
|
|
|
|
|
font-size: 24px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
width: 24px;
|
|
|
|
|
height: 24px;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
line-height: 1;
|
|
|
|
|
}
|
|
|
|
|
.dialogClose:hover {
|
|
|
|
|
background: url("~@/assets/dialog/btn-bg-act.png") no-repeat 100% 100%;
|
|
|
|
|
|
|
|
|
|
.overlay-body {
|
|
|
|
|
padding: 15px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.dialog-title {
|
|
|
|
|
|
|
|
|
|
.data-stats {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
margin-bottom: 15px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.stat-item {
|
|
|
|
|
flex: 1;
|
|
|
|
|
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;
|
|
|
|
|
padding: 0 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.stat-value {
|
|
|
|
|
font-size: 24px;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
color: #00c1de;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.stat-label {
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
color: #ccc;
|
|
|
|
|
margin-top: 5px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.problem-list {
|
|
|
|
|
background: rgba(10, 80, 128, 0.3);
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
padding: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.problem-title {
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
color: #fff;
|
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.problem-item {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
margin-bottom: 8px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.problem-dot {
|
|
|
|
|
width: 8px;
|
|
|
|
|
height: 8px;
|
|
|
|
|
background-color: #00c1de;
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
margin-right: 8px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.problem-name {
|
|
|
|
|
flex: 1;
|
|
|
|
|
color: #ccc;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.problem-value {
|
|
|
|
|
color: #00c1de;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.data-card {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 20px;
|
|
|
|
|
right: 20px;
|
|
|
|
|
width: 300px;
|
|
|
|
|
background: rgba(4, 32, 66, 0.8);
|
|
|
|
|
border: 1px solid #0a5080;
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
box-shadow: 0 0 15px rgba(0, 193, 222, 0.3);
|
|
|
|
|
z-index: 9;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
pointer-events: auto; /* 允许点击交互 */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.data-card-title {
|
|
|
|
|
padding: 10px 15px;
|
|
|
|
|
background: rgba(10, 80, 128, 0.8);
|
|
|
|
|
color: #fff;
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
border-bottom: 1px solid rgba(0, 193, 222, 0.3);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.data-card-content {
|
|
|
|
|
padding: 15px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.data-row {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
margin-bottom: 12px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.data-label {
|
|
|
|
|
color: #ccc;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.data-value {
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.highlight {
|
|
|
|
|
color: #f7d342;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.dialog-explain {
|
|
|
|
|
margin-top: 39px;
|
|
|
|
|
height: 125px;
|
|
|
|
|
background: url("~@/assets/dialog/信息-bg.png") no-repeat 100% 100%;
|
|
|
|
|
|
|
|
|
|
/* 脉冲标记的样式 */
|
|
|
|
|
:global(.pulse-marker-container) {
|
|
|
|
|
position: relative;
|
|
|
|
|
width: 20px;
|
|
|
|
|
height: 20px;
|
|
|
|
|
pointer-events: auto; /* 允许点击交互 */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
:global(.pulse-marker) {
|
|
|
|
|
width: 12px;
|
|
|
|
|
height: 12px;
|
|
|
|
|
background: rgba(0, 193, 222, 0.7);
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 50%;
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translate(-50%, -50%);
|
|
|
|
|
box-shadow: 0 0 10px rgba(0, 193, 222, 0.9);
|
|
|
|
|
animation: pulse 1.5s ease-in-out infinite;
|
|
|
|
|
}
|
|
|
|
|
.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;
|
|
|
|
|
|
|
|
|
|
@keyframes pulse {
|
|
|
|
|
0% {
|
|
|
|
|
box-shadow: 0 0 0 0 rgba(0, 193, 222, 0.9);
|
|
|
|
|
}
|
|
|
|
|
70% {
|
|
|
|
|
box-shadow: 0 0 0 15px rgba(0, 193, 222, 0);
|
|
|
|
|
}
|
|
|
|
|
100% {
|
|
|
|
|
box-shadow: 0 0 0 0 rgba(0, 193, 222, 0);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
