|
|
|
|
@ -4,7 +4,7 @@
|
|
|
|
|
* @Author: JC9527
|
|
|
|
|
* @Date: 2024-01-09 23:08:15
|
|
|
|
|
* @LastEditors: JC9527
|
|
|
|
|
* @LastEditTime: 2024-09-02 19:12:35
|
|
|
|
|
* @LastEditTime: 2024-09-12 15:45:34
|
|
|
|
|
-->
|
|
|
|
|
<template>
|
|
|
|
|
<div class="map-main">
|
|
|
|
|
@ -186,7 +186,11 @@
|
|
|
|
|
<div class="name">{{carInfo.info.carName}}</div>
|
|
|
|
|
<div class="position">{{carInfo.info.carCode}}</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="btn" @click="travelPath()">行程轨迹</div>
|
|
|
|
|
<!-- <div class="btn" @click="travelPath()">行程轨迹</div> -->
|
|
|
|
|
<div class="btns">
|
|
|
|
|
<div class="btn" @click="travelPath()">行程轨迹</div>
|
|
|
|
|
<div class="btn" @click="watchCarVideo">车载视频</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</el-amap-info-window>
|
|
|
|
|
@ -433,7 +437,10 @@
|
|
|
|
|
<!-- 事件指派人员 -->
|
|
|
|
|
<crew-assign ref="crewAssign"></crew-assign>
|
|
|
|
|
<!-- <video-wall ref="videoWall"></video-wall> -->
|
|
|
|
|
<!-- 监控视频上墙 -->
|
|
|
|
|
<alone-video ref="aloneVideo"></alone-video>
|
|
|
|
|
<!-- 车载视频上墙 -->
|
|
|
|
|
<car-video ref="carVideo"></car-video>
|
|
|
|
|
<!-- 商铺详情 -->
|
|
|
|
|
<shop ref="shop" width="50%" title="商铺详情查看" />
|
|
|
|
|
<!-- 新增事件 -->
|
|
|
|
|
@ -471,14 +478,14 @@ import point from "@/utils/mapJson/point.json";
|
|
|
|
|
|
|
|
|
|
import jiangninggeo from "@/utils/mapJson/jiangningjingkaiqugeo.json";
|
|
|
|
|
// 一级网格
|
|
|
|
|
import OneGJ02 from "@/utils/mapJson/1GJ02.json";
|
|
|
|
|
import TwoGJ02 from "@/utils/mapJson/2GJ02.json";
|
|
|
|
|
import ThreeGJ02 from "@/utils/mapJson/3GJ02.json";
|
|
|
|
|
import FourGJ02 from "@/utils/mapJson/4GJ02.json";
|
|
|
|
|
import kaifaqu from "@/utils/mapJson/开发区空港开发区GJ02.json";
|
|
|
|
|
import ruanjianyuan from "@/utils/mapJson/开发区软件园GJ02.json";
|
|
|
|
|
// import OneGJ02 from "@/utils/mapJson/1GJ02.json";
|
|
|
|
|
// import TwoGJ02 from "@/utils/mapJson/2GJ02.json";
|
|
|
|
|
// import ThreeGJ02 from "@/utils/mapJson/3GJ02.json";
|
|
|
|
|
// import FourGJ02 from "@/utils/mapJson/4GJ02.json";
|
|
|
|
|
// import kaifaqu from "@/utils/mapJson/开发区空港开发区GJ02.json";
|
|
|
|
|
// import ruanjianyuan from "@/utils/mapJson/开发区软件园GJ02.json";
|
|
|
|
|
// 二级网格
|
|
|
|
|
import gridding from "@/utils/mapJson/中队小网格.json"
|
|
|
|
|
// import gridding from "@/utils/mapJson/中队小网格.json"
|
|
|
|
|
|
|
|
|
|
// import zhongdianluduan from "@/utils/mapJson/zhongdianluduan.json";
|
|
|
|
|
// import zhongdianquyu from "@/utils/mapJson/zhongdianquyu.json";
|
|
|
|
|
@ -491,12 +498,13 @@ import personageTrack from "../../components/personagetrack/index.vue";
|
|
|
|
|
import personageTask from "../../components/personageTask/index.vue";
|
|
|
|
|
import crewAssign from "../../components/crewAssign/index.vue";
|
|
|
|
|
import videoWall from "../../components/videoWall/index.vue";
|
|
|
|
|
import carVideo from "../../components/carVideo/index.vue";
|
|
|
|
|
import shop from "../../components/shop/index.vue";
|
|
|
|
|
import aloneVideo from "../../components/video/index.vue"
|
|
|
|
|
import newEvent from "../../components/newEvent/index.vue"
|
|
|
|
|
// import jiangningwangge from "@/utils/data/江宁开发区网格.json";
|
|
|
|
|
|
|
|
|
|
import weilan from "@/utils/data/围栏1.json";
|
|
|
|
|
// import weilan from "@/utils/data/围栏1.json";
|
|
|
|
|
import { getCenter } from "@/utils/amap"
|
|
|
|
|
import {
|
|
|
|
|
regionalsettings,
|
|
|
|
|
@ -514,11 +522,15 @@ import {
|
|
|
|
|
getUserByImei,
|
|
|
|
|
dwgjList
|
|
|
|
|
} from "@/api/bigScreenApi";
|
|
|
|
|
import {
|
|
|
|
|
previewURLs,
|
|
|
|
|
listpatrol
|
|
|
|
|
} from "@/api/bigScreenApi/eventApi.js"
|
|
|
|
|
import {
|
|
|
|
|
robotLogin,
|
|
|
|
|
ViewListPage
|
|
|
|
|
} from "@/api/bigScreenApi/robot.js"
|
|
|
|
|
import { setRobotToken } from '@/utils/auth'
|
|
|
|
|
// import { setRobotToken } from '@/utils/auth'
|
|
|
|
|
import flvjs from "flv.js";
|
|
|
|
|
import axios from "axios";
|
|
|
|
|
|
|
|
|
|
@ -533,7 +545,8 @@ export default {
|
|
|
|
|
shop,
|
|
|
|
|
aloneVideo,
|
|
|
|
|
newEvent,
|
|
|
|
|
personageTask
|
|
|
|
|
personageTask,
|
|
|
|
|
carVideo
|
|
|
|
|
},
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
@ -654,149 +667,7 @@ 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],
|
|
|
|
|
// strokeColor: '#00C5EC',
|
|
|
|
|
// fillColor: '#00AEFF',
|
|
|
|
|
// fillOpacity: 0.4,
|
|
|
|
|
// // fillOpacity: 0.3,
|
|
|
|
|
// editable:false,
|
|
|
|
|
// visible:true,
|
|
|
|
|
// })
|
|
|
|
|
// var text1 = new AMap.Text({
|
|
|
|
|
// // position: [element.properties.CENTERX,element.properties.CENTERY],
|
|
|
|
|
// position: getCenter(OneGJ02.features[0].geometry.coordinates[0][0]),
|
|
|
|
|
// anchor: 'bottom-center',
|
|
|
|
|
// text: OneGJ02.features[0].properties.NAME,
|
|
|
|
|
// style:{
|
|
|
|
|
// 'font-size': '16px',
|
|
|
|
|
// 'font-weight': 'bold',
|
|
|
|
|
// 'text-align': 'center',
|
|
|
|
|
// 'color': '#00AEFF',
|
|
|
|
|
// 'text-shadow': '0px 1px 0px rgba(0,0,0,0.3)',
|
|
|
|
|
// 'white-space': 'nowrap',
|
|
|
|
|
// },
|
|
|
|
|
// });
|
|
|
|
|
// var geojson2 = new AMap.Polygon({
|
|
|
|
|
// path:TwoGJ02.features[0].geometry.coordinates[0][0],
|
|
|
|
|
// strokeColor: '#00C5EC',
|
|
|
|
|
// fillColor: '#00AEFF',
|
|
|
|
|
// fillOpacity: 0.4,
|
|
|
|
|
// // fillOpacity: 0.3,
|
|
|
|
|
// editable:false,
|
|
|
|
|
// visible:true,
|
|
|
|
|
// })
|
|
|
|
|
// var text2 = new AMap.Text({
|
|
|
|
|
// // position: [element.properties.CENTERX,element.properties.CENTERY],
|
|
|
|
|
// position: getCenter(TwoGJ02.features[0].geometry.coordinates[0][0]),
|
|
|
|
|
// anchor: 'bottom-center',
|
|
|
|
|
// text: TwoGJ02.features[0].properties.NAME,
|
|
|
|
|
// style:{
|
|
|
|
|
// 'font-size': '16px',
|
|
|
|
|
// 'font-weight': 'bold',
|
|
|
|
|
// 'text-align': 'center',
|
|
|
|
|
// 'color': '#00AEFF',
|
|
|
|
|
// 'text-shadow': '0px 1px 0px rgba(0,0,0,0.3)',
|
|
|
|
|
// 'white-space': 'nowrap',
|
|
|
|
|
// },
|
|
|
|
|
// });
|
|
|
|
|
// var geojson3 = new AMap.Polygon({
|
|
|
|
|
// path:ThreeGJ02.features[0].geometry.coordinates[0][0],
|
|
|
|
|
// strokeColor: '#00C5EC',
|
|
|
|
|
// fillColor: '#00AEFF',
|
|
|
|
|
// fillOpacity: 0.4,
|
|
|
|
|
// // fillOpacity: 0.3,
|
|
|
|
|
// editable:false,
|
|
|
|
|
// visible:true,
|
|
|
|
|
// })
|
|
|
|
|
// var text3 = new AMap.Text({
|
|
|
|
|
// // position: [element.properties.CENTERX,element.properties.CENTERY],
|
|
|
|
|
// position: getCenter(ThreeGJ02.features[0].geometry.coordinates[0][0]),
|
|
|
|
|
// anchor: 'bottom-center',
|
|
|
|
|
// text: ThreeGJ02.features[0].properties.NAME,
|
|
|
|
|
// style:{
|
|
|
|
|
// 'font-size': '16px',
|
|
|
|
|
// 'font-weight': 'bold',
|
|
|
|
|
// 'text-align': 'center',
|
|
|
|
|
// 'color': '#00AEFF',
|
|
|
|
|
// 'text-shadow': '0px 1px 0px rgba(0,0,0,0.3)',
|
|
|
|
|
// 'white-space': 'nowrap',
|
|
|
|
|
// },
|
|
|
|
|
// });
|
|
|
|
|
// var geojson4 = new AMap.Polygon({
|
|
|
|
|
// path:FourGJ02.features[0].geometry.coordinates[0][0],
|
|
|
|
|
// strokeColor: '#00C5EC',
|
|
|
|
|
// fillColor: '#00AEFF',
|
|
|
|
|
// fillOpacity: 0.4,
|
|
|
|
|
// // fillOpacity: 0.3,
|
|
|
|
|
// editable:false,
|
|
|
|
|
// visible:true,
|
|
|
|
|
// })
|
|
|
|
|
|
|
|
|
|
// var text4 = new AMap.Text({
|
|
|
|
|
// // position: [element.properties.CENTERX,element.properties.CENTERY],
|
|
|
|
|
// position: getCenter(FourGJ02.features[0].geometry.coordinates[0][0]),
|
|
|
|
|
// anchor: 'bottom-center',
|
|
|
|
|
// text: FourGJ02.features[0].properties.NAME,
|
|
|
|
|
// style:{
|
|
|
|
|
// 'font-size': '16px',
|
|
|
|
|
// 'font-weight': 'bold',
|
|
|
|
|
// 'text-align': 'center',
|
|
|
|
|
// 'color': '#00AEFF',
|
|
|
|
|
// 'text-shadow': '0px 1px 0px rgba(0,0,0,0.3)',
|
|
|
|
|
// 'white-space': 'nowrap',
|
|
|
|
|
// },
|
|
|
|
|
// });
|
|
|
|
|
// var geojson5 = new AMap.Polygon({
|
|
|
|
|
// path:kaifaqu.features[0].geometry.coordinates[0][0],
|
|
|
|
|
// strokeColor: '#00C5EC',
|
|
|
|
|
// fillColor: '#00AEFF',
|
|
|
|
|
// fillOpacity: 0.4,
|
|
|
|
|
// // fillOpacity: 0.3,
|
|
|
|
|
// editable:false,
|
|
|
|
|
// visible:true,
|
|
|
|
|
// })
|
|
|
|
|
// var text5 = new AMap.Text({
|
|
|
|
|
// // position: [element.properties.CENTERX,element.properties.CENTERY],
|
|
|
|
|
// position: getCenter(kaifaqu.features[0].geometry.coordinates[0][0]),
|
|
|
|
|
// anchor: 'bottom-center',
|
|
|
|
|
// text: kaifaqu.features[0].properties.NAME,
|
|
|
|
|
// style:{
|
|
|
|
|
// 'font-size': '16px',
|
|
|
|
|
// 'font-weight': 'bold',
|
|
|
|
|
// 'text-align': 'center',
|
|
|
|
|
// 'color': '#00AEFF',
|
|
|
|
|
// 'text-shadow': '0px 1px 0px rgba(0,0,0,0.3)',
|
|
|
|
|
// 'white-space': 'nowrap',
|
|
|
|
|
// },
|
|
|
|
|
// });
|
|
|
|
|
|
|
|
|
|
// var geojson6 = new AMap.Polygon({
|
|
|
|
|
// path:ruanjianyuan.features[0].geometry.coordinates[0][0],
|
|
|
|
|
// strokeColor: '#00C5EC',
|
|
|
|
|
// fillColor: '#00AEFF',
|
|
|
|
|
// fillOpacity: 0.4,
|
|
|
|
|
// // fillOpacity: 0.3,
|
|
|
|
|
// editable:false,
|
|
|
|
|
// visible:true,
|
|
|
|
|
// })
|
|
|
|
|
// var text6 = new AMap.Text({
|
|
|
|
|
// // position: [element.properties.CENTERX,element.properties.CENTERY],
|
|
|
|
|
// position: getCenter(ruanjianyuan.features[0].geometry.coordinates[0][0]),
|
|
|
|
|
// anchor: 'bottom-center',
|
|
|
|
|
// text: ruanjianyuan.features[0].properties.NAME,
|
|
|
|
|
// style:{
|
|
|
|
|
// 'font-size': '16px',
|
|
|
|
|
// 'font-weight': 'bold',
|
|
|
|
|
// 'text-align': 'center',
|
|
|
|
|
// 'color': '#00AEFF',
|
|
|
|
|
// 'text-shadow': '0px 1px 0px rgba(0,0,0,0.3)',
|
|
|
|
|
// 'white-space': 'nowrap',
|
|
|
|
|
// },
|
|
|
|
|
// });
|
|
|
|
|
|
|
|
|
|
levelQywg({level:1}).then(res=>{
|
|
|
|
|
let W = [];
|
|
|
|
|
@ -838,21 +709,6 @@ export default {
|
|
|
|
|
this.wanggeData = res.data;
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// this.layers.layer.addOverlay(geojson1);
|
|
|
|
|
// this.layers.text.addOverlay(text1);
|
|
|
|
|
// this.layers.layer.addOverlay(geojson2);
|
|
|
|
|
// this.layers.text.addOverlay(text2);
|
|
|
|
|
// this.layers.layer.addOverlay(geojson3);
|
|
|
|
|
// this.layers.text.addOverlay(text3);
|
|
|
|
|
// this.layers.layer.addOverlay(geojson4);
|
|
|
|
|
// this.layers.text.addOverlay(text4);
|
|
|
|
|
// this.layers.layer.addOverlay(geojson5);
|
|
|
|
|
// this.layers.text.addOverlay(text5);
|
|
|
|
|
// this.layers.layer.addOverlay(geojson6);
|
|
|
|
|
// this.layers.text.addOverlay(text6);
|
|
|
|
|
this.map.add(this.layers.layer);
|
|
|
|
|
this.map.add(this.layers.text);
|
|
|
|
|
map.setFitView();
|
|
|
|
|
@ -1131,18 +987,16 @@ export default {
|
|
|
|
|
// this.mapLoading = false;
|
|
|
|
|
// }
|
|
|
|
|
// })
|
|
|
|
|
let data = {'queryValue' : [], "myInstanceClassify" : "all", "parameterValue":[], fks: []}
|
|
|
|
|
ViewListPage({viewCode:'event-all-list', pageNo: 1, pageSize:500}, data).then(res=>{
|
|
|
|
|
listpatrol({current:1,size:1000}).then(res=>{
|
|
|
|
|
this.mapLoading = false;
|
|
|
|
|
if(res.code == 200) {
|
|
|
|
|
this.videoPoint = [];
|
|
|
|
|
res.result.records.forEach((element)=>{
|
|
|
|
|
res.data.records.forEach((element)=>{
|
|
|
|
|
let obj = {position:[]};
|
|
|
|
|
let location = element.location?.split(',');
|
|
|
|
|
|
|
|
|
|
// obj.imgSrc = element.status == "0" ? offIcon4 : ico5;
|
|
|
|
|
|
|
|
|
|
if(location) {
|
|
|
|
|
if(location.length > 1) {
|
|
|
|
|
obj.position[0] = location[0];
|
|
|
|
|
obj.position[1] = location[1];
|
|
|
|
|
// let lonLat = this.wgs84togcj02(location[0],location[1]);
|
|
|
|
|
@ -1173,6 +1027,48 @@ export default {
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
// let data = {'queryValue' : [], "myInstanceClassify" : "all", "parameterValue":[], fks: []}
|
|
|
|
|
// ViewListPage({viewCode:'event-all-list', pageNo: 1, pageSize:500}, data).then(res=>{
|
|
|
|
|
// this.mapLoading = false;
|
|
|
|
|
// if(res.code == 200) {
|
|
|
|
|
// this.videoPoint = [];
|
|
|
|
|
// res.result.records.forEach((element)=>{
|
|
|
|
|
// let obj = {position:[]};
|
|
|
|
|
// let location = element.location?.split(',');
|
|
|
|
|
|
|
|
|
|
// // obj.imgSrc = element.status == "0" ? offIcon4 : ico5;
|
|
|
|
|
|
|
|
|
|
// if(location) {
|
|
|
|
|
// obj.position[0] = location[0];
|
|
|
|
|
// obj.position[1] = location[1];
|
|
|
|
|
// // let lonLat = this.wgs84togcj02(location[0],location[1]);
|
|
|
|
|
// // obj.position[0] = lonLat ? lonLat[0] : 0;
|
|
|
|
|
// // obj.position[1] = lonLat ? lonLat[1] : 0;
|
|
|
|
|
|
|
|
|
|
// obj.lnglat = new AMap.LngLat(location.length > 0 ? location[0] : 0 ,location.length > 0 ? location[1] : 0)
|
|
|
|
|
// // obj.lnglat = new AMap.LngLat(lonLat ? lonLat[0] : 0 ,lonLat ? lonLat[1] : 0)
|
|
|
|
|
// } else {
|
|
|
|
|
// obj.position[0] = 0;
|
|
|
|
|
// obj.position[1] = 0;
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
// obj.imgSrc = ico2;
|
|
|
|
|
// obj.info = element
|
|
|
|
|
// // this.markers.push(obj)
|
|
|
|
|
// this.videoPoint.push(obj)
|
|
|
|
|
// })
|
|
|
|
|
// this.count = this.videoPoint.length;
|
|
|
|
|
// AMap.plugin(['AMap.MarkerCluster'],()=>{
|
|
|
|
|
// this.cluster = new AMap.MarkerCluster(this.map,this.videoPoint,{
|
|
|
|
|
// gridSize: 60, // 设置网格像素大小
|
|
|
|
|
// maxZoom: 17,
|
|
|
|
|
// styles: sts,
|
|
|
|
|
// // renderClusterMarker: this._renderClusterMarker, // 自定义聚合点样式
|
|
|
|
|
// renderMarker: this._eventMarker, // 自定义非聚合点样式
|
|
|
|
|
// })
|
|
|
|
|
// })
|
|
|
|
|
// }
|
|
|
|
|
// })
|
|
|
|
|
} else if(id == 3){
|
|
|
|
|
// point.features.forEach((element)=>{
|
|
|
|
|
// if (element.properties.name == "执法车辆") {
|
|
|
|
|
@ -1300,15 +1196,6 @@ export default {
|
|
|
|
|
renderMarker: this._DrenderMarker, // 自定义非聚合点样式
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
// res.rows.forEach(element => {
|
|
|
|
|
// let obj = {position:[]};
|
|
|
|
|
// obj.position[0] = element.longitude;
|
|
|
|
|
// obj.position[1] = element.latitude;
|
|
|
|
|
// obj.imgSrc = ico6;
|
|
|
|
|
// obj.info = element;
|
|
|
|
|
// this.markers.push(obj)
|
|
|
|
|
// this.mapLoading = false;
|
|
|
|
|
// })
|
|
|
|
|
}).catch(err=>{
|
|
|
|
|
this.mapLoading = false;
|
|
|
|
|
})
|
|
|
|
|
@ -1873,9 +1760,16 @@ export default {
|
|
|
|
|
if(this.actionMap == 1) {
|
|
|
|
|
this.$refs.personageTrack.open("person", this.personInfo.info);
|
|
|
|
|
} else if(this.actionMap == 3) {
|
|
|
|
|
this.$refs.personageTrack.open("car", this.car.info);
|
|
|
|
|
this.$refs.personageTrack.open("car", this.carInfo.info);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
// 车载监控视频
|
|
|
|
|
watchCarVideo(){
|
|
|
|
|
previewURLs({cameraIndexCode:'5ab6cc3745e147918b2a96c2604ecdbb',transmode:1,protocol:'hls',streamType:1}).then(res=>{
|
|
|
|
|
let carUrl = JSON.parse(res.data);
|
|
|
|
|
this.$refs.carVideo.open(carUrl.data.url);
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
// 子组件的名称点击事件
|
|
|
|
|
divClick(lightedPolygonId){
|
|
|
|
|
if(this.action == 1) {
|
|
|
|
|
|
