|
|
|
|
@ -4,7 +4,7 @@
|
|
|
|
|
* @Author: JC9527
|
|
|
|
|
* @Date: 2024-01-09 23:08:15
|
|
|
|
|
* @LastEditors: JC9527
|
|
|
|
|
* @LastEditTime: 2024-05-14 10:07:33
|
|
|
|
|
* @LastEditTime: 2024-09-14 15:28: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 {
|
|
|
|
|
@ -622,27 +635,22 @@ export default {
|
|
|
|
|
onIcon:null,
|
|
|
|
|
offIcon:null,
|
|
|
|
|
videoPoint:[],
|
|
|
|
|
videoUrl:"",
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
// 网页刷新/浏览器关闭
|
|
|
|
|
beforeunloadHandler(event){
|
|
|
|
|
if(this.destID && this.imei) {
|
|
|
|
|
if(this.personInfo.info.userId && this.personInfo.info.imei) {
|
|
|
|
|
this._beforeUnload_time = new Date().getTime();
|
|
|
|
|
videoSurveillance({destId:this.destID,imei:this.imei,msgType:0}).then(res=>{
|
|
|
|
|
this.destID = "";
|
|
|
|
|
this.imei = "";
|
|
|
|
|
})
|
|
|
|
|
videoSurveillance({destId:this.personInfo.info.userId,imei:this.personInfo.info.imei,msgType:0}).then(res=>{})
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
unloadHandler(e){
|
|
|
|
|
this._gap_time = new Date().getTime()-this._beforeUnload_time;
|
|
|
|
|
if(this._gap_time <= 5){
|
|
|
|
|
if(this.destID && this.imei) {
|
|
|
|
|
videoSurveillance({destId:this.destID,imei:this.imei,msgType:0}).then(res=>{
|
|
|
|
|
this.destID = "";
|
|
|
|
|
this.imei = "";
|
|
|
|
|
})
|
|
|
|
|
if(this.personInfo.info.userId && this.personInfo.info.imei) {
|
|
|
|
|
videoSurveillance({destId:this.personInfo.info.userId,imei:this.personInfo.info.imei,msgType:0}).then(res=>{})
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
@ -659,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 = [];
|
|
|
|
|
@ -843,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();
|
|
|
|
|
@ -974,11 +825,12 @@ export default {
|
|
|
|
|
// 人员非聚合自定义样式及点击事件
|
|
|
|
|
_personRenderMarker(context){
|
|
|
|
|
let imgSrc
|
|
|
|
|
if(this.onIcon && this.offIcon){
|
|
|
|
|
imgSrc = context.data[0].imgSrc == '1' ? this.onIcon : this.offIcon
|
|
|
|
|
} else {
|
|
|
|
|
imgSrc = context.data[0].imgSrc == '1' ? require("../../../assets/images/icon/icon1.png") : require("../../../assets/images/icon/offLine1.png")
|
|
|
|
|
}
|
|
|
|
|
// if(this.onIcon && this.offIcon){
|
|
|
|
|
// imgSrc = context.data[0].imgSrc == '1' ? this.onIcon : this.offIcon
|
|
|
|
|
// } else {
|
|
|
|
|
// imgSrc = context.data[0].imgSrc == '1' ? require("../../../assets/images/icon/icon1.png") : require("../../../assets/images/icon/offLine1.png")
|
|
|
|
|
// }
|
|
|
|
|
imgSrc = context.data[0].imgSrc == '1' ? require("../../../assets/images/icon/icon1.png") : require("../../../assets/images/icon/offLine1.png")
|
|
|
|
|
var content = `<div class="markerStyles"><div class="marker-Text" style="width:${context.data[0].text.length * 15}px">${context.data[0].text}</div><img src="${imgSrc}" alt=""></div>`;
|
|
|
|
|
var offset = new AMap.Pixel(-32.5, -48.5);
|
|
|
|
|
context.marker.setContent(content);
|
|
|
|
|
@ -1135,20 +987,24 @@ 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]);
|
|
|
|
|
// 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;
|
|
|
|
|
@ -1171,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 == "执法车辆") {
|
|
|
|
|
@ -1233,7 +1131,7 @@ export default {
|
|
|
|
|
let obj = {position:[]};
|
|
|
|
|
let lonLat;
|
|
|
|
|
if(element.longitude && element.latitude) {
|
|
|
|
|
lonLat = this.wgs84togcj02(element.longitude,element.latitude);
|
|
|
|
|
lonLat = this.wgs84togcj02(element.longitude,element.latitude);
|
|
|
|
|
}
|
|
|
|
|
// obj.position[0] = element.longitude;
|
|
|
|
|
obj.position[0] = lonLat ? lonLat[0] : 0;
|
|
|
|
|
@ -1298,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;
|
|
|
|
|
})
|
|
|
|
|
@ -1314,7 +1203,7 @@ export default {
|
|
|
|
|
},
|
|
|
|
|
// 点位点击事件
|
|
|
|
|
clickMarker(marker,e){
|
|
|
|
|
console.log(marker);
|
|
|
|
|
// console.log(marker);
|
|
|
|
|
if (this.actionMap == 1) {
|
|
|
|
|
this.personInfo.position = marker.position;
|
|
|
|
|
this.personInfo.info = marker.info;
|
|
|
|
|
@ -1332,7 +1221,7 @@ export default {
|
|
|
|
|
} else if (this.actionMap == 5) {
|
|
|
|
|
this.shopInfo.position = marker.position;
|
|
|
|
|
this.shopInfo.info = marker.info;
|
|
|
|
|
console.log(marker.info);
|
|
|
|
|
// console.log(marker.info);
|
|
|
|
|
this.shopInfo.visible = true;
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
@ -1359,24 +1248,28 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
// 播放监控视频
|
|
|
|
|
initVideoPlayer(videoUrl){
|
|
|
|
|
initVideoPlayer(){
|
|
|
|
|
this.$nextTick(()=>{
|
|
|
|
|
var videoDom = document.getElementById('flvvideo')
|
|
|
|
|
|
|
|
|
|
var player = flvjs.createPlayer({
|
|
|
|
|
this.player = flvjs.createPlayer({
|
|
|
|
|
type: 'flv', // 媒体类型，默认是 flv,
|
|
|
|
|
isLive: true, // 是否是直播流
|
|
|
|
|
hasAudio: true, // 是否有音频
|
|
|
|
|
hanVideo: true, // 是否有视频
|
|
|
|
|
url: videoUrl, // 流地址
|
|
|
|
|
url: this.videoUrl, // 流地址
|
|
|
|
|
},{
|
|
|
|
|
// 其他的配置项可以根据项目实际情况参考 api 去配置
|
|
|
|
|
autoCleanupMinBackwardDuration: true, // 清除缓存 对 SourceBuffer 进行自动清理
|
|
|
|
|
})
|
|
|
|
|
player.attachMediaElement(videoDom)
|
|
|
|
|
player.load()
|
|
|
|
|
player.play()
|
|
|
|
|
this.player = player;
|
|
|
|
|
this.player.attachMediaElement(videoDom)
|
|
|
|
|
try {
|
|
|
|
|
this.player.load();
|
|
|
|
|
this.player.play();
|
|
|
|
|
this.listenVideo();
|
|
|
|
|
} catch (error) {
|
|
|
|
|
console.log(error);
|
|
|
|
|
}
|
|
|
|
|
// 视频卡顿导致流断了，那就重连
|
|
|
|
|
// this.player.on(flvjs.Events.ERROR,(errType, errDetail)=>{
|
|
|
|
|
// // console.log(errType,'errTypeerrTypeerrType');
|
|
|
|
|
@ -1386,7 +1279,6 @@ export default {
|
|
|
|
|
// this.initVideoPlayer(videoUrl)
|
|
|
|
|
// }
|
|
|
|
|
// })
|
|
|
|
|
this.instantaneity(this.player,videoUrl)
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
destroyVideos() {
|
|
|
|
|
@ -1397,39 +1289,70 @@ export default {
|
|
|
|
|
this.player.destroy();
|
|
|
|
|
this.player = null;
|
|
|
|
|
},
|
|
|
|
|
// 可能会有卡顿的情况 重新去拉流由于视频会延时 为保证实时性，我们可以跳帧
|
|
|
|
|
instantaneity(player,videoUrl){
|
|
|
|
|
this.timer = setInterval(() => {
|
|
|
|
|
if (player && player.buffered && player.buffered.length) {
|
|
|
|
|
let end = player.buffered.end(0); // 获取当前buffered值
|
|
|
|
|
let diff = end - player.currentTime; // 获取buffered与currentTime的差值
|
|
|
|
|
if (diff >= 3) {// 如果差值大于等于3s 手动跳帧 这里可根据自身需求来定
|
|
|
|
|
//单个视频
|
|
|
|
|
player.currentTime = end;//手动跳帧
|
|
|
|
|
player.currentTime = player.buffered.end(0);//手动跳帧
|
|
|
|
|
|
|
|
|
|
// 多个视频
|
|
|
|
|
clearInterval(this.timer)
|
|
|
|
|
// player.pause();
|
|
|
|
|
// player.unload();
|
|
|
|
|
// player.detachMediaElement();
|
|
|
|
|
// player.destroy();
|
|
|
|
|
// player= null;
|
|
|
|
|
//重新加载当前停止的视频流，根据个人的方法来配置
|
|
|
|
|
this.initVideoPlayer(videoUrl)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}, 2000); //2000毫秒执行一次
|
|
|
|
|
// 监听视频流是否断流或者卡顿
|
|
|
|
|
listenVideo() {
|
|
|
|
|
const that = this;
|
|
|
|
|
if(this.player) {
|
|
|
|
|
this.player.on(
|
|
|
|
|
flvjs.Events.ERROR,
|
|
|
|
|
(errorType, errorDetail, errorInfo) => {
|
|
|
|
|
// console.log("errorType", errorType);
|
|
|
|
|
// console.log("errorDetail", errorDetail);
|
|
|
|
|
// console.log("errorInfo", errorInfo);
|
|
|
|
|
if(errorInfo.code == 404) {
|
|
|
|
|
setTimeout(()=>{
|
|
|
|
|
videoSurveillance({
|
|
|
|
|
...that.videoCondition,
|
|
|
|
|
destID:that.personInfo.info.userId,
|
|
|
|
|
imei:that.personInfo.info.imei
|
|
|
|
|
}).then((res) => {
|
|
|
|
|
if (res.code == 200 && res.data.msg == "操作成功") {
|
|
|
|
|
setTimeout(()=>{
|
|
|
|
|
that.videoUrl = `http://10.236.2.28:54567/bjh-admin-server/jn/live/9999_${that.personInfo.info.userId}.flv`
|
|
|
|
|
if(!that.showVideo) {
|
|
|
|
|
videoSurveillance({destId:that.personInfo.info.userId,imei:that.personInfo.info.imei,msgType:0}).then(res=>{})
|
|
|
|
|
that.destroyVideos();
|
|
|
|
|
} else {
|
|
|
|
|
that.initVideoPlayer();
|
|
|
|
|
}
|
|
|
|
|
},3000);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
},2000)
|
|
|
|
|
} else {
|
|
|
|
|
// 视频出错后销毁重建
|
|
|
|
|
that.destroyVideos();
|
|
|
|
|
that.initVideoPlayer();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
);
|
|
|
|
|
// 视频断流
|
|
|
|
|
this.player.on("statistics_info", function (res) {
|
|
|
|
|
if(that.lastDecodedFrames === 0){
|
|
|
|
|
that.lastDecodedFrames = res.decodedFrames
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
if(that.lastDecodedFrames != res.decodedFrames){
|
|
|
|
|
that.lastDecodedFrames = res.decodedFrames
|
|
|
|
|
}else{
|
|
|
|
|
that.lastDecodedFrames = 0
|
|
|
|
|
that.destroyVideos()
|
|
|
|
|
that.initVideoPlayer()
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
// 执法人员强制观摩
|
|
|
|
|
watchClick(){
|
|
|
|
|
if(this.personInfo.info.status == "1") {
|
|
|
|
|
// console.log(this.personInfo.info);
|
|
|
|
|
this.showVideo = true;
|
|
|
|
|
videoSurveillance({...this.videoCondition,destID:this.personInfo.info.userId,imei:this.personInfo.info.imei}).then(res=>{
|
|
|
|
|
if(res.code == 200 && res.data.msg == '操作成功') {
|
|
|
|
|
// http://121.229.2.163:9291/live/9999 http://120.27.25.166:9305/live/9999_
|
|
|
|
|
setTimeout(()=>{
|
|
|
|
|
this.initVideoPlayer(`https://t-jn-city.jssp-park.com/bjh-admin-server/jn/live/9999_${this.personInfo.info.userId}.flv`)
|
|
|
|
|
this.videoUrl = `http://10.236.2.28:54567/bjh-admin-server/jn/live/9999_${this.personInfo.info.userId}.flv`
|
|
|
|
|
this.initVideoPlayer()
|
|
|
|
|
},3000)
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
@ -1446,12 +1369,12 @@ export default {
|
|
|
|
|
this.player.detachMediaElement()
|
|
|
|
|
this.player.destroy()
|
|
|
|
|
this.player = null
|
|
|
|
|
videoSurveillance({destId:this.personInfo.userId,imei:this.personInfo.info.imei,msgType:0})
|
|
|
|
|
videoSurveillance({destID:this.personInfo.info.userId,imei:this.personInfo.info.imei,msgType:0})
|
|
|
|
|
if(this.timer) clearInterval(this.timer)
|
|
|
|
|
},
|
|
|
|
|
// 位置分享
|
|
|
|
|
shareClick(){
|
|
|
|
|
console.log(this.personInfo,"位置分享");
|
|
|
|
|
// console.log(this.personInfo,"位置分享");
|
|
|
|
|
if(this.personInfo.info.status == "1") {
|
|
|
|
|
var aux = document.createElement("input");
|
|
|
|
|
aux.setAttribute("value", this.personInfo.info.address);
|
|
|
|
|
@ -1471,11 +1394,14 @@ export default {
|
|
|
|
|
// 监控视频上墙
|
|
|
|
|
monitorVideos(status){
|
|
|
|
|
// this.$refs.videoWall.open();
|
|
|
|
|
if(status == 1) {
|
|
|
|
|
getPreviewURLs({protocol:'hls',cameraIndexCode:this.monitoringInfo.info.cameraIndexCode,expand:"transcode=1"}).then(res=>{
|
|
|
|
|
if(status == 1) { // expand:"transcode=1"
|
|
|
|
|
getPreviewURLs({protocol:'hls',cameraIndexCode:this.monitoringInfo.info.cameraIndexCode,streamType:"1",transmode:"1"}).then(res=>{
|
|
|
|
|
if(res.code == 200) {
|
|
|
|
|
// console.log(res,'视频地址获取');
|
|
|
|
|
this.$refs.aloneVideo.open(res.msg);
|
|
|
|
|
// this.$refs.aloneVideo.open(res.msg);
|
|
|
|
|
let videoUrl = res.msg;
|
|
|
|
|
var code1 = videoUrl.match(/\/openUrl\/(.*)/)[1]
|
|
|
|
|
this.$refs.aloneVideo.open(`http://10.236.2.28:54567/bjh-admin-server/jn/videosLive/${code1}`);
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
} else {
|
|
|
|
|
@ -1484,7 +1410,7 @@ export default {
|
|
|
|
|
},
|
|
|
|
|
// 转发，复制视频地址
|
|
|
|
|
copyUrl(){
|
|
|
|
|
getPreviewURLs({protocol:'hls',cameraIndexCode:this.monitoringInfo.info.cameraIndexCode,expand:"transcode=1"}).then(res=>{
|
|
|
|
|
getPreviewURLs({protocol:'hls',cameraIndexCode:this.monitoringInfo.info.cameraIndexCode,streamType:"1",transmode:"1"}).then(res=>{
|
|
|
|
|
if(res.code == 200) {
|
|
|
|
|
// this.$refs.aloneVideo.open(res.msg);
|
|
|
|
|
var aux = document.createElement("input");
|
|
|
|
|
@ -1834,9 +1760,19 @@ 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(){
|
|
|
|
|
getPreviewURLs({protocol:'hls',cameraIndexCode:'5ab6cc3745e147918b2a96c2604ecdbb',streamType:"1",transmode:"1"}).then(res=>{
|
|
|
|
|
this.$refs.carVideo.open(res.msg);
|
|
|
|
|
})
|
|
|
|
|
// 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) {
|
|
|
|
|
@ -2532,7 +2468,7 @@ export default {
|
|
|
|
|
this.personInfo.info = res.data.obj[0];
|
|
|
|
|
this.personInfo.personinfo = resTwo.data[0];
|
|
|
|
|
this.personInfo.visible = true;
|
|
|
|
|
},1500)
|
|
|
|
|
},2500)
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
return getUserByImei({imei:item.imei})
|
|
|
|
|
@ -2666,7 +2602,7 @@ export default {
|
|
|
|
|
},
|
|
|
|
|
// 模拟登录获取token
|
|
|
|
|
getrobotToken(){
|
|
|
|
|
robotLogin({username:"superAdmin",password:"sa@123456"}).then(res=>{
|
|
|
|
|
robotLogin({username:"superAdmin",password:"3ER4#er$@2024"}).then(res=>{
|
|
|
|
|
// console.log(res,"登录信息");
|
|
|
|
|
if(res.code == 200) {
|
|
|
|
|
// setRobotToken(res.result.token)
|
|
|
|
|
@ -2738,7 +2674,7 @@ export default {
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
mounted() {
|
|
|
|
|
this.getPersonIcon();
|
|
|
|
|
// this.getPersonIcon();
|
|
|
|
|
this.getCarList();
|
|
|
|
|
this.getrobotToken();
|
|
|
|
|
window.addEventListener('beforeunload', e => this.beforeunloadHandler(e));
|
|
|
|
|
|
吕天方