@@ -79,7 +79,7 @@
diff --git a/src/views/bigScreen/map/index.vue b/src/views/bigScreen/map/index.vue
index 640af6c..0ce4b70 100644
--- a/src/views/bigScreen/map/index.vue
+++ b/src/views/bigScreen/map/index.vue
@@ -180,16 +180,36 @@
>
-
+
@@ -463,8 +483,7 @@ import {
getVideoPageEq,
getPreviewURLs,
getCarManageList,
- getQueryViewListPage,
- eventSaveData
+ getStreetShopList,
} from "@/api/bigScreenApi";
import flvjs from "flv.js";
import axios from "axios";
@@ -604,7 +623,8 @@ export default {
this.layers.text = new AMap.OverlayGroup(); // 一级网格文本
this.layers.text1 = new AMap.OverlayGroup(); // 二级网格文本
this.layers.markers = new AMap.OverlayGroup(); // 监控视频markers
-
+ // this.layers.layer2.setzIndex(10);
+ // this.layers.layer3.setzIndex(9);
this.$nextTick(() => {
var geojson1 = new AMap.Polygon({
path:OneGJ02.features[0].geometry.coordinates[0][0],
@@ -773,10 +793,14 @@ export default {
this.getQuyuGeoJson();
// 获取重点路段数据
this.getLuduanGeoJson();
+
+ // 修改图层组的层级在点击到围栏，区域，路段时监听网格时就能触发点击事件
+ // this.layers.layer2.setOptions({ zIndex: 100 });
+ // this.layers.layer3.setOptions({ zIndex: 99 });
this.layers.layer2.on('click', (e)=>{
+ // console.log(e,'this.layers.layer2的点击事件');
if(this.isPositioning) {
- console.log(e,'eeeeeeee');
- console.log(e.lnglat,'lnglat');
+ // console.log(e,'eeeeeeee');
var marker = new AMap.Marker({
position: new AMap.LngLat(e.lnglat.lng, e.lnglat.lat),
anchor: 'bottom-center',
@@ -784,8 +808,12 @@ export default {
this.layers.layer4.addOverlay(marker);
map.add(this.layers.layer4)
let addressName
- var lng = e.lnglat.lng + ''
- var lat = e.lnglat.lat + ''
+ var lng = e.lnglat.lng + '';
+ var lat = e.lnglat.lat + '';
+ // let clickPoint = this.layers.layer2.getOverlays();
+ // for (var i = 0; i < clickPoint.length; i++) {
+ // console.log(clickPoint[i],'点击的地址');
+ // }
axios.get('https://restapi.amap.com/v3/geocode/regeo',{
params:{
key: "5f4a2c045cffa20551a0300c31c1ee78",
@@ -795,41 +823,11 @@ export default {
}
}).then(response=>{
// console.log(response,'response');
- addressName = response.data.regeocode.aois[0].name;
- console.log(addressName,'this.addressName');
+ addressName = response.data.regeocode.aois[0]?.name || response.data.regeocode.pois[0]?.name;
+ // console.log(addressName,'this.addressName');
if(this.layers.layer4) {
- this.$refs.newEvent.open({lnglat:e.lnglat,address:addressName});
- this.isPositioning = false;
- }
- })
- }
- })
- this.layers.layer3.on('click', (e)=>{
- if(this.isPositioning) {
- console.log(e,'eeeeeeee');
- console.log(e.lnglat,'lnglat');
- var marker = new AMap.Marker({
- position: new AMap.LngLat(e.lnglat.lng, e.lnglat.lat),
- anchor: 'bottom-center',
- })
- this.layers.layer4.addOverlay(marker);
- map.add(this.layers.layer4)
- let addressName
- var lng = e.lnglat.lng + ''
- var lat = e.lnglat.lat + ''
- axios.get('https://restapi.amap.com/v3/geocode/regeo',{
- params:{
- key: "5f4a2c045cffa20551a0300c31c1ee78",
- location: `${lng.substring(0,9)},${lat.substring(0,9)}`,
- extensions: 'all',
- // batch: true,
- }
- }).then(response=>{
- // console.log(response,'response');
- addressName = response.data.regeocode.aois[0].name;
- console.log(addressName,'this.addressName');
- if(this.layers.layer4) {
- this.$refs.newEvent.open({lnglat:e.lnglat,address:addressName});
+ // e.target.getExtData().name; e.target.getExtData()获取给图层设置的extData属性的name
+ this.$refs.newEvent.open({lnglat:e.lnglat,address:addressName,meshOccurs:e.target.getExtData().name});
this.isPositioning = false;
}
})
@@ -880,8 +878,6 @@ export default {
this.layers.text.show();
}
} else if(zoom > 13.2){
- // 获取二级网格数据
- // this.getWanggeGeoJson();
if(this.layers.layer2) {
this.layers.layer2.show();
this.layers.text1.hide();
@@ -1299,41 +1295,59 @@ export default {
}
})
} else if(id == 4){
+ point.features.forEach((element)=>{
+ if (element.properties.name == "监控视频") {
+ this.mapLoading = false;
+ let obj = {position:[]};
+ obj.position[0] = element.geometry.coordinates[0];
+ obj.position[1] = element.geometry.coordinates[1];
+ obj.imgSrc = element.properties.status == "0" ? offIcon4 : ico5;
+ // obj.imgSrc = ico5;
+ obj.info = element;
+
+ this.markers.push(obj)
+ }
+ })
+ // getVideoPageEq({pageNo:1,pageSize:50}).then(res=>{
+ // this.mapLoading = false;
+ // // console.log(res,"res");
+ // res.data.forEach((element)=>{
+ // let obj = {position:[]};
+ // obj.position[0] = element.longitude;
+ // obj.position[1] = element.latitude;
+ // // obj.imgSrc = element.status == "0" ? offIcon4 : ico5;
+ // obj.imgSrc = ico5;
+ // obj.info = element
+ // this.markers.push(obj)
+ // })
+ // }).catch(err=>{
+ // this.mapLoading = false;
+ // })
+ } else if(id == 5){
// point.features.forEach((element)=>{
- // if (element.properties.name == "监控视频") {
+ // if (element.properties.name == "沿街商铺分布") {
// let obj = {position:[]};
// obj.position[0] = element.geometry.coordinates[0];
// obj.position[1] = element.geometry.coordinates[1];
- // obj.imgSrc = ico5;
+ // obj.imgSrc = ico6;
// this.markers.push(obj)
+ // this.mapLoading = false;
// }
// })
- getVideoPageEq({pageNo:1,pageSize:50}).then(res=>{
- this.mapLoading = false;
- // console.log(res,"res");
- res.data.forEach((element)=>{
+ getStreetShopList({pageSize:20,pageNum:1}).then(res=>{
+ res.rows.forEach(element => {
let obj = {position:[]};
obj.position[0] = element.longitude;
obj.position[1] = element.latitude;
- // obj.imgSrc = element.status == "0" ? offIcon4 : ico5;
- obj.imgSrc = ico5;
- obj.info = element
+ obj.imgSrc = ico6;
+ obj.info = element;
this.markers.push(obj)
+ this.mapLoading = false;
})
}).catch(err=>{
+ this.$modal.msgError(err);
this.mapLoading = false;
})
- } else if(id == 5){
- point.features.forEach((element)=>{
- if (element.properties.name == "沿街商铺分布") {
- let obj = {position:[]};
- obj.position[0] = element.geometry.coordinates[0];
- obj.position[1] = element.geometry.coordinates[1];
- obj.imgSrc = ico6;
- this.markers.push(obj)
- this.mapLoading = false;
- }
- })
}
},
// TODO:缩放地图获取新的监控点位
@@ -1506,12 +1520,37 @@ export default {
} else {
this.$modal.msgError("该设备已离线");
}
-
-
},
// 监控视频上墙
- monitorVideos(){
- this.$refs.videoWall.open();
+ monitorVideos(status){
+ // this.$refs.videoWall.open();
+ if(status == 1) {
+ getPreviewURLs({protocol:'hls',cameraIndexCode:this.monitoringInfo.info.cameraIndexCode,expand:"transcode=1"}).then(res=>{
+ if(res.code == 200) {
+ // console.log(res,'视频地址获取');
+ this.$refs.aloneVideo.open(res.msg);
+ }
+ })
+ } else {
+ this.$modal.msgError("该设备已离线");
+ }
+ },
+ // 转发，复制视频地址
+ copyUrl(){
+ getPreviewURLs({protocol:'hls',cameraIndexCode:this.monitoringInfo.info.cameraIndexCode,expand:"transcode=1"}).then(res=>{
+ if(res.code == 200) {
+ // this.$refs.aloneVideo.open(res.msg);
+ var aux = document.createElement("input");
+ aux.setAttribute("value", res.msg);
+ document.body.appendChild(aux);
+ aux.select();
+ document.execCommand("copy");
+ document.body.removeChild(aux);
+ this.$modal.msgSuccess("视频地址已复制");
+ }
+ }).catch(error=>{
+ this.$modal.msgError(error);
+ })
},
// 商铺详情查看
getShopInfo(){
@@ -1531,6 +1570,9 @@ export default {
fillOpacity: 0.3,
editable:false,
visible:true,
+ extData:{
+ name: element.properties.NAME
+ },
})
var text = new AMap.Text({
// position: [element.properties.CENTERX,element.properties.CENTERY],
@@ -1570,6 +1612,7 @@ export default {
var circle = new AMap.Circle({
center: shapeStr.features[0].geometry.coordinates,
radius: shapeStr.features[0].properties.radius,
+ bubble: true,
extData:{
id: '围栏polygon'
},
@@ -1603,11 +1646,13 @@ export default {
this.map.add(this.layers.layer3);
element.myPolygon = circle;
element.text = text;
+ this.openClick(circle)
// this.map.add(text);
// 多边形围栏
} else if (shapeStr.features[0].geometry.type == "Polygon") {
var weilan = new AMap.Polygon({
path:shapeStr.features[0].geometry.coordinates,
+ bubble: true,
extData:{
id: '围栏polygon'
},
@@ -1643,6 +1688,7 @@ export default {
this.map.add(this.layers.layer3);
element.myPolygon = weilan;
element.text = text;
+ this.openClick(weilan)
// this.map.add([wangge,text]);
// this.map.add(text);
}
@@ -1657,6 +1703,7 @@ export default {
let shapeStr = JSON.parse(element.shapeStr);
var quyu = new AMap.Polygon({
path:shapeStr.features[0].geometry.coordinates,
+ bubble: true,
strokeOpacity: 0,
strokeColor: '#FF0000',
fillColor: '#FF0000',
@@ -1664,7 +1711,8 @@ export default {
editable:false,
visible:true,
extData:{
- id: '区域polygon'
+ id: '区域polygon',
+ name: element.name
},
})
var text = new AMap.Text({
@@ -1688,6 +1736,7 @@ export default {
this.layers.layer3.addOverlay(text)
this.layers.layer3.hide();
this.map.add(this.layers.layer3);
+ this.openClick(quyu)
// this.map.add([quyu,text]);
// this.map.add(text);
})
@@ -1703,6 +1752,7 @@ export default {
// console.log(shapeStr,'shapeStrshapeStrshapeStr');
var luduan = new AMap.Polyline({
path:shapeStr.features[0].geometry.coordinates,
+ bubble: true,
strokeOpacity: 1,
strokeColor: '#46FF77',
editable:false,
@@ -1726,11 +1776,59 @@ export default {
this.map.add(this.layers.layer3);
element.myPolyline = luduan;
element.text = text;
+ this.openClick(luduan)
// this.map.add([luduan,text]);
// this.map.add(text);
})
})
},
+ // 开启围栏，路段，区域的点击事件
+ openClick(layer){
+ layer.on('click',(e)=>{
+ // console.log(e,'区域的点击事件');
+ // console.log(this.map.getAllOverlays('circle','polyline','polygon'),'this.layers.layer2');
+ if(this.isPositioning) {
+ let latlng = e.lnglat
+ let name;
+ this.layers.layer2.eachOverlay((item)=>{
+ // console.log(item,'item');
+ if(item.getBounds().contains(latlng)){
+ name = item.getExtData().name
+ }
+ })
+ var marker = new AMap.Marker({
+ position: new AMap.LngLat(e.lnglat.lng, e.lnglat.lat),
+ anchor: 'bottom-center',
+ })
+ this.layers.layer4.addOverlay(marker);
+ this.map.add(this.layers.layer4)
+ let addressName
+ var lng = e.lnglat.lng + '';
+ var lat = e.lnglat.lat + '';
+ // let clickPoint = this.layers.layer2.getOverlays();
+ // for (var i = 0; i < clickPoint.length; i++) {
+ // console.log(clickPoint[i],'点击的地址');
+ // }
+ axios.get('https://restapi.amap.com/v3/geocode/regeo',{
+ params:{
+ key: "5f4a2c045cffa20551a0300c31c1ee78",
+ location: `${lng.substring(0,9)},${lat.substring(0,9)}`,
+ extensions: 'all',
+ // batch: true,
+ }
+ }).then(response=>{
+ // console.log(response,'response');
+ addressName = response.data.regeocode.aois[0]?.name || response.data.regeocode.pois[0]?.name;
+ // console.log(addressName,'this.addressName');
+ if(this.layers.layer4) {
+ // e.target.getExtData().name; e.target.getExtData()获取给图层设置的extData属性的name
+ this.$refs.newEvent.open({lnglat:latlng,address:addressName,meshOccurs:name});
+ this.isPositioning = false;
+ }
+ })
+ }
+ })
+ },
// 子组件的实时定位事件
realTimeLocationClick(item){
this.map.setZoomAndCenter(16,[item.longitude,item.latitude]);
diff --git a/src/views/components/ImageUpload/index.vue b/src/views/components/myUpload/index.vue
similarity index 59%
rename from src/views/components/ImageUpload/index.vue
rename to src/views/components/myUpload/index.vue
index 5ad307f..8948b61 100644
--- a/src/views/components/ImageUpload/index.vue
+++ b/src/views/components/myUpload/index.vue
@@ -11,11 +11,25 @@
:on-error="handleUploadError"
:on-exceed="handleExceed"
ref="imageUpload"
- :on-remove="handleDelete"
- :on-preview="handlePictureCardPreview"
+
+
:show-file-list="false"
- >
-
+ >
+
+
+
+
+
+
+
+ {{ item.name }}
+
+
+ 删除
+
+
@@ -26,17 +40,37 @@
的文件
+