|
|
@@ -3,22 +3,67 @@
|
|
|
* @Autor: lin
|
|
|
* @Date: 2024-04-09 14:26:07
|
|
|
* @LastEditors: lin
|
|
|
- * @LastEditTime: 2024-04-09 16:50:25
|
|
|
+ * @LastEditTime: 2024-04-11 17:15:20
|
|
|
-->
|
|
|
<template>
|
|
|
- <div class="box">
|
|
|
+ <div class="box" v-loading="loading">
|
|
|
<div class="mapBox" id="newHome"></div>
|
|
|
+ <!-- 点击地图圆圈的详情 -->
|
|
|
+ <div v-if="groupDialog" class="dialog animate__animated animate__bounceInDown">
|
|
|
+ <div class="dialog_content">
|
|
|
+ <div class="dialog_close" @click="groupDialog=false"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
export default {
|
|
|
+ name:'newHome',
|
|
|
props: {
|
|
|
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
-
|
|
|
+ timmerList: [], // 水波纹的定时器
|
|
|
+ getFunTimmer: [], // 函数的定时器
|
|
|
+ overlayList: [],
|
|
|
+ loading: true,
|
|
|
+ colorObject: {
|
|
|
+ 0: '#3ACD9C',
|
|
|
+ 1: '#FF5951',
|
|
|
+ 2: '#F4A72F',
|
|
|
+ 3: '#1890FF',
|
|
|
+ 4: '#FAFF0A'
|
|
|
+ },
|
|
|
+ warningObject: [{
|
|
|
+ level: 0,
|
|
|
+ color: '#3ACD9C',
|
|
|
+ text: '无'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ level: 1,
|
|
|
+ color: '#FF5951',
|
|
|
+ text: 'Ⅰ'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ level: 2,
|
|
|
+ color: '#F4A72F',
|
|
|
+ text: 'Ⅱ'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ level: 3,
|
|
|
+ color: '#1890FF',
|
|
|
+ text: 'Ⅲ'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ level: 4,
|
|
|
+ color: '#FAFF0A',
|
|
|
+ text: 'Ⅳ'
|
|
|
+ }],
|
|
|
+ map: null,
|
|
|
+ deviceInfo: [],
|
|
|
+ groupDialog: false
|
|
|
};
|
|
|
},
|
|
|
computed: {
|
|
|
@@ -27,98 +72,193 @@ export default {
|
|
|
created() {
|
|
|
|
|
|
},
|
|
|
+ beforeDestroy() {
|
|
|
+ this.clerrTimmerFun('fun');
|
|
|
+ this.clerrTimmerFun('circle');
|
|
|
+ },
|
|
|
mounted() {
|
|
|
- this.initMap()
|
|
|
+ this.initMap();
|
|
|
},
|
|
|
watch: {
|
|
|
|
|
|
},
|
|
|
methods: {
|
|
|
+ // 清除指定覆盖物
|
|
|
+ clearOverlayByType(type) {
|
|
|
+ var overlays = this.map.getAllOverlays(type);
|
|
|
+ for (var i = 0, l = overlays.length; i < l; i++) {
|
|
|
+ this.map.remove(overlays[i]);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 清除所有定时器
|
|
|
+ clerrTimmerFun(type) {
|
|
|
+ if (type == 'circle') {
|
|
|
+ this.timmerList.forEach(timmer => {
|
|
|
+ clearInterval(timmer);
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.getFunTimmer.forEach(timmer => {
|
|
|
+ clearInterval(timmer);
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 获取组织水波纹信息
|
|
|
+ getGroupDeviceFun() {
|
|
|
+ this.$axios({
|
|
|
+ method: 'POST',
|
|
|
+ url: '/api/api_gateway?method=data_report.screen.device_info',
|
|
|
+ data: this.qs.stringify({})
|
|
|
+ }).then(res => {
|
|
|
+ this.loading = false;
|
|
|
+ if (!res.data.data) {
|
|
|
+ this.$message.error('网络连接出错或服务报错，请刷新页面重试');
|
|
|
+ return
|
|
|
+ }
|
|
|
+ // console.log(res.data.data);
|
|
|
+ // this.deviceInfo = res.data.data.devices_info;
|
|
|
+ this.clearOverlayByType('circle');
|
|
|
+ this.clearOverlayByType('circleMarker');
|
|
|
+ // 先把所有定时器清空
|
|
|
+ this.clerrTimmerFun('circle');
|
|
|
+ this.overlayList = [];
|
|
|
+ res.data.data.forEach(group => {
|
|
|
+ if (group.lng_lat.length == 0) return
|
|
|
+ this.waterAmiFun(group)
|
|
|
+ });
|
|
|
+ this.map.setFitView(this.overlayList)
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 根据组织ID 获取组织设备告警信息
|
|
|
+ getInfoByGroupId(group_id) {
|
|
|
+ this.$axios({
|
|
|
+ method: 'POST',
|
|
|
+ url: '/api/api_gateway?method=data_report.screen.group_pest_detail',
|
|
|
+ data: this.qs.stringify({ group_id })
|
|
|
+ }).then(res => {
|
|
|
+ console.log(res.data.data);
|
|
|
+ if (!res.data.data) {
|
|
|
+ this.$message.error('网络连接出错或服务报错，请刷新页面重试');
|
|
|
+ return
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 画水波纹
|
|
|
+ waterAmiFun(group) {
|
|
|
+ let { colorObject } = this;
|
|
|
+ let _this = this;
|
|
|
+ // 绘制圆
|
|
|
+ var circle = new AMap.Circle({
|
|
|
+ center: group.lng_lat, // 圆心位置
|
|
|
+ radius: 2500, // 半径，单位：米
|
|
|
+ strokeColor: "#FFFFFF", // 线颜色
|
|
|
+ strokeOpacity: .8, // 线透明度
|
|
|
+ strokeWeight: 1, // 线宽
|
|
|
+ fillColor: "#fff", // 填充颜色
|
|
|
+ fillOpacity: 0.2, // 填充透明度
|
|
|
+ zIndex: 100, // 层级
|
|
|
+ extData: group,
|
|
|
+ cursor: 'pointer'
|
|
|
+ });
|
|
|
+ this.map.add(circle);
|
|
|
+ // 水波纹点击查看组织详情
|
|
|
+ circle.on('click', (e) => {
|
|
|
+ let data = e.target._opts.extData;
|
|
|
+ this.getInfoByGroupId(data.org_id);
|
|
|
+ this.groupDialog = true;
|
|
|
+ console.log(data, '当前点击的圆圈是');
|
|
|
+ })
|
|
|
+ this.overlayList.push(circle);
|
|
|
+ // 添加水波纹效果的圆点
|
|
|
+ var rippleCircleMaker = new AMap.CircleMarker({
|
|
|
+ center: group.lng_lat, // 圆心位置
|
|
|
+ radius: 5, // 初始半径，单位：米
|
|
|
+ strokeColor: "#FFf", // 线颜色
|
|
|
+ strokeOpacity: 1, // 线透明度
|
|
|
+ strokeWeight: 1, // 线宽
|
|
|
+ fillColor: colorObject[group.alarm_level], // 填充颜色
|
|
|
+ fillOpacity: 0.9, // 填充透明度
|
|
|
+ zIndex: 102 // 层级
|
|
|
+ });
|
|
|
+ this.map.add(rippleCircleMaker);
|
|
|
+ if (group.alarm_level == 0) return; //等级为0时 不需要水波纹
|
|
|
+ // 添加水波纹效果的圆点
|
|
|
+ var rippleCircle = new AMap.Circle({
|
|
|
+ center: group.lng_lat, // 圆心位置
|
|
|
+ radius: 500, // 初始半径，单位：米
|
|
|
+ strokeColor: colorObject[group.alarm_level], // 线颜色
|
|
|
+ strokeOpacity: 0, // 线透明度
|
|
|
+ strokeWeight: 2, // 线宽
|
|
|
+ fillColor: colorObject[group.alarm_level], // 填充颜色
|
|
|
+ fillOpacity: 0.8, // 填充透明度
|
|
|
+ zIndex: 101, // 层级
|
|
|
+ extData: group,
|
|
|
+ cursor: 'pointer'
|
|
|
+ });
|
|
|
+ // 水波纹点击查看组织详情
|
|
|
+ rippleCircle.on('click', (e) => {
|
|
|
+ let data = e.target._opts.extData;
|
|
|
+ console.log(data, '当前点击的水波纹是');
|
|
|
+ this.getInfoByGroupId(data.org_id);
|
|
|
+ })
|
|
|
+ this.map.add(rippleCircle);
|
|
|
+
|
|
|
+ // 定义水波纹动画
|
|
|
+ var animation;
|
|
|
+
|
|
|
+ // 添加水波纹动画效果
|
|
|
+ function addRippleAnimation() {
|
|
|
+ var startRadius = 500;
|
|
|
+ var startOpacity = 0.8;
|
|
|
+ var endRadius = 2700;
|
|
|
+ var step = 200;
|
|
|
+ var opacityStep = -0.06;
|
|
|
+ var currentRadius = startRadius;
|
|
|
+ var currentOpacity = startOpacity;
|
|
|
+ var increasing = true;
|
|
|
+
|
|
|
+ animation = setInterval(function () {
|
|
|
+ if (increasing) {
|
|
|
+ if (currentRadius < endRadius) {
|
|
|
+ rippleCircle.setRadius(currentRadius); // 设置水波纹半径
|
|
|
+ rippleCircle.setOptions({
|
|
|
+ fillOpacity: currentOpacity > 0 ? currentOpacity : 0
|
|
|
+ });
|
|
|
+ currentRadius += step; // 每次半径增加 step
|
|
|
+ currentOpacity += opacityStep; // 每次透明度增加opacityStep
|
|
|
+ } else {
|
|
|
+ clearInterval(animation); // 清除动画
|
|
|
+ currentRadius = startRadius; // 重置水波纹半径为初始值
|
|
|
+ currentOpacity = startOpacity;
|
|
|
+ addRippleAnimation(); // 重新启动动画
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }, 100); // 设置动画间隔时间，单位：毫秒
|
|
|
+ _this.timmerList.push(animation); // 记录定时器
|
|
|
+ // console.log(_this.timmerList, '_this.timmerList');
|
|
|
+ }
|
|
|
+
|
|
|
+ // 启动水波纹动画
|
|
|
+ // addRippleAnimation();
|
|
|
+ },
|
|
|
initMap() {
|
|
|
- var map = new AMap.Map(document.getElementById('newHome'), {
|
|
|
- // center: this.center,
|
|
|
+ let _this = this;
|
|
|
+ let map = new AMap.Map(document.getElementById('newHome'), {
|
|
|
+ center: [114.3, 22.76],
|
|
|
resizeEnable: true,
|
|
|
- zoom: 12.5,
|
|
|
// lang: 'en',
|
|
|
- mapStyle: 'amap://styles/f2736173d4246171f1efaa1b61a15439',
|
|
|
- layers: []
|
|
|
+ zoom: 11,
|
|
|
+ mapStyle: 'amap://styles/fff0c1ac5471818a21cf82c0931f60c0',
|
|
|
+ // mapStyle: "amap://styles/dark",
|
|
|
+ // features: ['bg', 'road'],
|
|
|
});
|
|
|
- map.on('complete', function () {
|
|
|
+ this.map = map;
|
|
|
+ this.map.on('complete', function () {
|
|
|
+ _this.getGroupDeviceFun();
|
|
|
+ let getGroupTimmer = setInterval(_this.getGroupDeviceFun, 60000);
|
|
|
+ _this.getFunTimmer.push(getGroupTimmer);
|
|
|
import(`./geo.json`).then(res => {
|
|
|
- console.log(res)
|
|
|
addGeo(res, map)
|
|
|
});
|
|
|
- // 绘制圆
|
|
|
- var circle = new AMap.Circle({
|
|
|
- center: [114.34347, 23.889983], // 圆心位置
|
|
|
- radius: 5000, // 半径，单位：米
|
|
|
- strokeColor: "#FFFFFF", // 线颜色
|
|
|
- strokeOpacity: 1, // 线透明度
|
|
|
- strokeWeight: 2, // 线宽
|
|
|
- fillColor: "#fff", // 填充颜色
|
|
|
- fillOpacity: 1 // 填充透明度
|
|
|
- });
|
|
|
- circle.setMap(map);
|
|
|
- // 添加水波纹效果的圆点
|
|
|
- var rippleCircleMaker = new AMap.CircleMarker({
|
|
|
- center: [114.34347, 23.889983], // 圆心位置
|
|
|
- radius: 10, // 初始半径，单位：米
|
|
|
- strokeColor: "#FFf", // 线颜色
|
|
|
- strokeOpacity: 1, // 线透明度
|
|
|
- strokeWeight: 10, // 线宽
|
|
|
- fillColor: "#FF5951", // 填充颜色
|
|
|
- fillOpacity: 0.9, // 填充透明度
|
|
|
- zIndex: 10 // 层级
|
|
|
- });
|
|
|
- rippleCircleMaker.setMap(map);
|
|
|
- // 添加水波纹效果的圆点
|
|
|
- var rippleCircle = new AMap.Circle({
|
|
|
- center: [114.34347, 23.889983], // 圆心位置
|
|
|
- radius: 500, // 初始半径，单位：米
|
|
|
- strokeColor: "#FF5951", // 线颜色
|
|
|
- strokeOpacity: 0, // 线透明度
|
|
|
- strokeWeight: 2, // 线宽
|
|
|
- fillColor: "#FF5951", // 填充颜色
|
|
|
- fillOpacity: 0.6, // 填充透明度
|
|
|
- zIndex: 10 // 层级
|
|
|
- });
|
|
|
- rippleCircle.setMap(map);
|
|
|
-
|
|
|
- // 定义水波纹动画
|
|
|
- var animation;
|
|
|
-
|
|
|
- // 添加水波纹动画效果
|
|
|
- function addRippleAnimation() {
|
|
|
- var startRadius = 500;
|
|
|
- var startOpacity = 0.8;
|
|
|
- var endRadius = 5500;
|
|
|
- var step = 500;
|
|
|
- var opacityStep = -0.05;
|
|
|
- var currentRadius = startRadius;
|
|
|
- var currentOpacity = startOpacity;
|
|
|
- var increasing = true;
|
|
|
-
|
|
|
- animation = setInterval(function () {
|
|
|
- if (increasing) {
|
|
|
- if (currentRadius < endRadius) {
|
|
|
- rippleCircle.setRadius(currentRadius); // 设置水波纹半径
|
|
|
- rippleCircle.setOptions({
|
|
|
- fillOpacity: currentOpacity > 0 ? currentOpacity : 0
|
|
|
- });
|
|
|
- currentRadius += step; // 每次半径增加 step
|
|
|
- currentOpacity += opacityStep; // 每次透明度增加opacityStep
|
|
|
- } else {
|
|
|
- clearInterval(animation); // 清除动画
|
|
|
- currentRadius = startRadius; // 重置水波纹半径为初始值
|
|
|
- currentOpacity = startOpacity;
|
|
|
- addRippleAnimation(); // 重新启动动画
|
|
|
- }
|
|
|
- }
|
|
|
- }, 100); // 设置动画间隔时间，单位：毫秒
|
|
|
- }
|
|
|
-
|
|
|
- // 启动水波纹动画
|
|
|
- addRippleAnimation();
|
|
|
});
|
|
|
function addGeo(Json, map) {
|
|
|
let cityList = [];
|
|
|
@@ -133,15 +273,15 @@ export default {
|
|
|
fillOpacity: .3,// 面积越大透明度越高
|
|
|
strokeColor: '#B5F2FF',
|
|
|
fillColor: '#64AECE',
|
|
|
- extData: geojson
|
|
|
+ extData: geojson,
|
|
|
+ zIndex: 90
|
|
|
});
|
|
|
cityList.push(PolygonObj);
|
|
|
return PolygonObj
|
|
|
}
|
|
|
})
|
|
|
map.add(geojson);
|
|
|
- map.setFitView();
|
|
|
- console.log(map.getZoom());
|
|
|
+ // map.setFitView();
|
|
|
}
|
|
|
},
|
|
|
},
|
|
|
@@ -155,15 +295,45 @@ export default {
|
|
|
.box {
|
|
|
position: relative;
|
|
|
overflow: hidden;
|
|
|
- width: 100vw;
|
|
|
+ width: 100%;
|
|
|
height: 100vh;
|
|
|
|
|
|
.mapBox {
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
- width: 100vw;
|
|
|
+ width: 100%;
|
|
|
height: 100vh;
|
|
|
}
|
|
|
+ .dialog{
|
|
|
+ position: absolute;
|
|
|
+ top: 12.72vh; /* 初始位置在视图上方外面 */
|
|
|
+ left: 31.1vw;
|
|
|
+ z-index: 200;
|
|
|
+ width: 37.8vw;
|
|
|
+ height: 21.2vh;
|
|
|
+ background: url('../../../assets/images/newHome/centerTopBg.png') center center no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ &_content{
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ &_close{
|
|
|
+ position: absolute;
|
|
|
+ right: 2rem;
|
|
|
+ top: 2rem;
|
|
|
+ z-index: 201;
|
|
|
+ width: 4.8rem;
|
|
|
+ height: 4.8rem;
|
|
|
+ cursor: pointer;
|
|
|
+ background: url('../../../assets/images/newHome/close.png') center center no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ &:hover{
|
|
|
+ background: url('../../../assets/images/newHome/closeHover.png') center center no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
