|
|
|
@ -4,7 +4,7 @@
|
|
|
|
|
* @Author: JC9527
|
|
|
|
|
* @Date: 2024-01-09 23:08:15
|
|
|
|
|
* @LastEditors: JC9527
|
|
|
|
|
* @LastEditTime: 2024-01-17 11:34:56
|
|
|
|
|
* @LastEditTime: 2024-01-23 13:58:59
|
|
|
|
|
-->
|
|
|
|
|
<template>
|
|
|
|
|
<div class="map-main">
|
|
|
|
@ -50,7 +50,7 @@
|
|
|
|
|
<el-amap-info-window
|
|
|
|
|
v-if="personInfo.visible"
|
|
|
|
|
anchor="bottom-center"
|
|
|
|
|
:offset="[-10,-123]"
|
|
|
|
|
:offset="[-10,-93]"
|
|
|
|
|
:closeWhenClickMap="true"
|
|
|
|
|
:position="personInfo.position"
|
|
|
|
|
:visible.sync="personInfo.visible">
|
|
|
|
@ -271,7 +271,8 @@
|
|
|
|
|
</div>
|
|
|
|
|
<transition name="left-animationMap">
|
|
|
|
|
<div class="map-left" v-if="leftAnimationData">
|
|
|
|
|
<map-left :personLine="personLine" :carLine="carLine" @realTimeLocationClick="realTimeLocationClick"></map-left>
|
|
|
|
|
<!-- :personLine="personLine" -->
|
|
|
|
|
<map-left :carLine="carLine" @realTimeLocationClick="realTimeLocationClick"></map-left>
|
|
|
|
|
</div>
|
|
|
|
|
</transition>
|
|
|
|
|
|
|
|
|
@ -479,6 +480,7 @@ import {
|
|
|
|
|
getPreviewURLs,
|
|
|
|
|
getCarManageList,
|
|
|
|
|
getStreetShopList,
|
|
|
|
|
listZhzz,
|
|
|
|
|
} from "@/api/bigScreenApi";
|
|
|
|
|
import {
|
|
|
|
|
robotLogin,
|
|
|
|
@ -580,6 +582,8 @@ export default {
|
|
|
|
|
personLine: [], // 在线人员情况
|
|
|
|
|
carLine: [], // 车辆情况
|
|
|
|
|
visible: false, // 卫星底图是否显示
|
|
|
|
|
onIcon:null,
|
|
|
|
|
offIcon:null,
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
@ -599,167 +603,207 @@ export default {
|
|
|
|
|
// 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 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 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 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 = [];
|
|
|
|
|
res.data.forEach(element=>{
|
|
|
|
|
let shapeStr = JSON.parse(element.shapeStr);
|
|
|
|
|
// console.log(shapeStr,"shapeStr");
|
|
|
|
|
W.push(shapeStr.features[0]);
|
|
|
|
|
let geojson = new AMap.Polygon({
|
|
|
|
|
path:shapeStr.features[0].geometry.coordinates[0],
|
|
|
|
|
strokeColor: '#00C5EC',
|
|
|
|
|
fillColor: '#00AEFF',
|
|
|
|
|
fillOpacity: 0.4,
|
|
|
|
|
// fillOpacity: 0.3,
|
|
|
|
|
editable:false,
|
|
|
|
|
visible:true,
|
|
|
|
|
extData:{
|
|
|
|
|
name: shapeStr.features[0].properties.NAME
|
|
|
|
|
},
|
|
|
|
|
})
|
|
|
|
|
var text = new AMap.Text({
|
|
|
|
|
// position: [element.properties.CENTERX,element.properties.CENTERY],
|
|
|
|
|
position: getCenter(shapeStr.features[0].geometry.coordinates[0]),
|
|
|
|
|
anchor: 'bottom-center',
|
|
|
|
|
text: shapeStr.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',
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
element.myPolygon = geojson;
|
|
|
|
|
element.text = text;
|
|
|
|
|
this.layers.layer.addOverlay(geojson);
|
|
|
|
|
this.layers.text.addOverlay(text);
|
|
|
|
|
})
|
|
|
|
|
this.wanggeData = res.data;
|
|
|
|
|
})
|
|
|
|
|
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',
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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.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();
|
|
|
|
|
// 一级网格
|
|
|
|
|
// this.stairWangge();
|
|
|
|
|
// 获取二级网格数据
|
|
|
|
|
this.getWanggeGeoJson();
|
|
|
|
|
// this.getWanggeGeoJson();
|
|
|
|
|
// 获取围栏数据
|
|
|
|
|
this.getWeilanGeoJson();
|
|
|
|
|
// 获取重点区域数据
|
|
|
|
@ -821,12 +865,8 @@ export default {
|
|
|
|
|
// zoomchange : 地图缩放级别更改后触发。 zoomstart : 缩放开始时触发。 zoomend : 缩放停止时触发。
|
|
|
|
|
map.on("zoomend", (ev) => {
|
|
|
|
|
let zoom = map.getZoom();
|
|
|
|
|
console.log(zoom,'zoom层级');
|
|
|
|
|
|
|
|
|
|
if(this.actionMap == 4) {
|
|
|
|
|
// console.log(zoom,'zoom层级');
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if(zoom < 11) {
|
|
|
|
|
this.componentMarker.visible = false;
|
|
|
|
|
this.personInfo.visible = false;
|
|
|
|
@ -846,22 +886,22 @@ export default {
|
|
|
|
|
if(this.layers.layer3) {
|
|
|
|
|
this.layers.layer3.hide();
|
|
|
|
|
}
|
|
|
|
|
if(this.layers.layer) {
|
|
|
|
|
this.layers.layer.show();
|
|
|
|
|
this.layers.text.show();
|
|
|
|
|
}
|
|
|
|
|
// if(this.layers.layer) {
|
|
|
|
|
// this.layers.layer.show();
|
|
|
|
|
// this.layers.text.show();
|
|
|
|
|
// }
|
|
|
|
|
} else if(zoom > 13.2){
|
|
|
|
|
if(this.layers.layer2) {
|
|
|
|
|
this.layers.layer2.show();
|
|
|
|
|
this.layers.text1.hide();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if(this.layers.layer) {
|
|
|
|
|
if(this.wanggeData.length > 0){
|
|
|
|
|
this.layers.layer.hide();
|
|
|
|
|
this.layers.text.hide();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
// if(this.layers.layer) {
|
|
|
|
|
// if(this.wanggeData.length > 0){
|
|
|
|
|
// this.layers.layer.hide();
|
|
|
|
|
// this.layers.text.hide();
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
if(this.layers.layer3) {
|
|
|
|
|
this.layers.layer3.hide();
|
|
|
|
|
}
|
|
|
|
@ -881,33 +921,32 @@ export default {
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 自定义聚合样式
|
|
|
|
|
_renderClusterMarker(context){
|
|
|
|
|
|
|
|
|
|
var factor = Math.pow(context.count / this.count, 1 / 18);
|
|
|
|
|
var div = document.createElement('div');
|
|
|
|
|
var Hue = 180 - factor * 180;
|
|
|
|
|
var bgColor = 'hsla(' + Hue + ',100%,40%,0.7)';
|
|
|
|
|
var fontColor = 'hsla(' + Hue + ',100%,90%,1)';
|
|
|
|
|
var borderColor = 'hsla(' + Hue + ',100%,40%,1)';
|
|
|
|
|
var shadowColor = 'hsla(' + Hue + ',100%,90%,1)';
|
|
|
|
|
div.style.backgroundColor = bgColor;
|
|
|
|
|
var size = Math.round(30 + Math.pow(context.count / this.count, 1 / 5) * 20);
|
|
|
|
|
div.style.width = div.style.height = size + 'px';
|
|
|
|
|
div.style.border = 'solid 1px ' + borderColor;
|
|
|
|
|
div.style.borderRadius = size / 2 + 'px';
|
|
|
|
|
div.style.boxShadow = '0 0 5px ' + shadowColor;
|
|
|
|
|
div.innerHTML = context.count;
|
|
|
|
|
div.style.lineHeight = size + 'px';
|
|
|
|
|
div.style.color = fontColor;
|
|
|
|
|
div.style.fontSize = '14px';
|
|
|
|
|
div.style.textAlign = 'center';
|
|
|
|
|
context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
|
|
|
|
|
context.marker.setContent(div)
|
|
|
|
|
// 人员非聚合自定义样式及点击事件
|
|
|
|
|
_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")
|
|
|
|
|
}
|
|
|
|
|
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(-27, -94);
|
|
|
|
|
context.marker.setContent(content)
|
|
|
|
|
context.marker.setOffset(offset)
|
|
|
|
|
context.marker.on('click',(ev)=>{
|
|
|
|
|
this.personInfo.position = context.data[0].position;
|
|
|
|
|
this.personInfo.info = context.data[0].info;
|
|
|
|
|
// console.log(context.data[0].info,'人员信息');
|
|
|
|
|
// TODO:获取人员信息
|
|
|
|
|
// getDeviceList({imei:context.data[0].info.imei}).then((res) => {
|
|
|
|
|
// console.log(res,"获取的人员信息");
|
|
|
|
|
this.personInfo.visible = true;
|
|
|
|
|
// })
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
// 视频非聚合自定义样式及点击事件
|
|
|
|
|
_renderMarker (context) {
|
|
|
|
|
|
|
|
|
|
var content = `<div class="markerStyles"><img src="${require("../../../assets/images/icon/icon5.png")}" alt=""></div>`;
|
|
|
|
|
var content = `<div class="markerStyles"><img src="${context.data[0].info.status == 1 ? require("../../../assets/images/icon/icon5.png") : require("../../../assets/images/icon/offLine4.png")}" alt=""></div>`;
|
|
|
|
|
var offset = new AMap.Pixel(-27, -94);
|
|
|
|
|
context.marker.setContent(content)
|
|
|
|
|
context.marker.setOffset(offset)
|
|
|
|
@ -917,6 +956,7 @@ export default {
|
|
|
|
|
this.monitoringInfo.visible = true;
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
// 店铺非聚合自定义样式及点击事件
|
|
|
|
|
_DrenderMarker(context) {
|
|
|
|
|
var content = `<div class="markerStyles"><div class="marker-Text" style="width:${context.data[0].info.shopName.length * 15}px">${context.data[0].info.shopName}</div><img src="${require("../../../assets/images/icon/icon6.png")}" alt=""></div>`;
|
|
|
|
|
var offset = new AMap.Pixel(-27, -94);
|
|
|
|
@ -944,11 +984,32 @@ export default {
|
|
|
|
|
let offIcon2 = require("../../../assets/images/icon/offLine2.png");
|
|
|
|
|
let offIcon3 = require("../../../assets/images/icon/offLine3.png");
|
|
|
|
|
let offIcon4 = require("../../../assets/images/icon/offLine4.png");
|
|
|
|
|
let imgUrl = require("../../../assets/images/icon/green.png")
|
|
|
|
|
var sts = [{
|
|
|
|
|
url: imgUrl,
|
|
|
|
|
size: new AMap.Size(32, 32),
|
|
|
|
|
offset: new AMap.Pixel(-16, -16),
|
|
|
|
|
textColor:"#FFFFFF",
|
|
|
|
|
textSize:14
|
|
|
|
|
}, {
|
|
|
|
|
url: imgUrl,
|
|
|
|
|
size: new AMap.Size(32, 32),
|
|
|
|
|
offset: new AMap.Pixel(-16, -16),
|
|
|
|
|
textColor:"#FFFFFF",
|
|
|
|
|
textSize:14
|
|
|
|
|
}, {
|
|
|
|
|
url: imgUrl,
|
|
|
|
|
size: new AMap.Size(32, 32),
|
|
|
|
|
offset: new AMap.Pixel(-18, -18),
|
|
|
|
|
textColor:"#FFFFFF",
|
|
|
|
|
textSize:14
|
|
|
|
|
}];
|
|
|
|
|
this.markers = [];
|
|
|
|
|
this.mapLoading = status ? false : true;
|
|
|
|
|
if(id == 1) {
|
|
|
|
|
this.personLine = [];
|
|
|
|
|
getDeviceList({ imei: "861316060216403,861316060216619,861316060207857,861316060214648,861316060214317,861316060215553,861316060212493,861316060214804,861316060207931,861316060216056" }).then((res) => {
|
|
|
|
|
let videoPoint = [];
|
|
|
|
|
getDeviceList().then((res) => {
|
|
|
|
|
this.mapLoading = false;
|
|
|
|
|
// console.log(res,'点位信息');
|
|
|
|
|
if (res.data.obj) {
|
|
|
|
@ -959,12 +1020,27 @@ export default {
|
|
|
|
|
obj.position[0] = element.longitude;
|
|
|
|
|
obj.position[1] = element.latitude;
|
|
|
|
|
obj.text = element.userName;
|
|
|
|
|
obj.imgSrc = element.status == "0" ? offIcon1 : element.status == "1"? ico1 : ico1;
|
|
|
|
|
obj.lnglat = new AMap.LngLat(element.longitude ? element.longitude : 0 ,element.latitude ? element.latitude : 0)
|
|
|
|
|
// obj.imgSrc = element.status == "0" ? offIcon1 : element.status == "1"? ico1 : ico1;
|
|
|
|
|
obj.imgSrc = element.status;
|
|
|
|
|
obj.userId = element.userId;
|
|
|
|
|
obj.info = element;
|
|
|
|
|
this.markers.push(obj)
|
|
|
|
|
// this.markers.push(obj)
|
|
|
|
|
videoPoint.push(obj)
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
this.count = videoPoint.length;
|
|
|
|
|
// console.log(videoPoint,'videoPoint');
|
|
|
|
|
// console.log(this.count,'this.count');
|
|
|
|
|
AMap.plugin(['AMap.MarkerCluster'],()=>{
|
|
|
|
|
this.cluster = new AMap.MarkerCluster(this.map,videoPoint,{
|
|
|
|
|
gridSize: 20, // 设置网格像素大小
|
|
|
|
|
styles: sts,
|
|
|
|
|
maxZoom: 17,
|
|
|
|
|
// renderClusterMarker: this._renderClusterMarker, // 自定义聚合点样式
|
|
|
|
|
renderMarker: this._personRenderMarker, // 自定义非聚合点样式
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
} else {
|
|
|
|
|
this.$modal.msgError("执法人员" + res.data.msg);
|
|
|
|
|
}
|
|
|
|
@ -981,13 +1057,6 @@ export default {
|
|
|
|
|
this.markers.push(obj)
|
|
|
|
|
this.mapLoading = false;
|
|
|
|
|
}
|
|
|
|
|
// else if (element.properties.name == "重点事件") {
|
|
|
|
|
// let obj = {position:[]};
|
|
|
|
|
// obj.position[0] = element.geometry.coordinates[0];
|
|
|
|
|
// obj.position[1] = element.geometry.coordinates[1];
|
|
|
|
|
// obj.imgSrc = ico3;
|
|
|
|
|
// this.markers.push(obj)
|
|
|
|
|
// }
|
|
|
|
|
})
|
|
|
|
|
} else if(id == 3){
|
|
|
|
|
point.features.forEach((element)=>{
|
|
|
|
@ -1034,7 +1103,9 @@ export default {
|
|
|
|
|
AMap.plugin(['AMap.MarkerCluster'],()=>{
|
|
|
|
|
this.cluster = new AMap.MarkerCluster(this.map,videoPoint,{
|
|
|
|
|
gridSize: 20, // 设置网格像素大小
|
|
|
|
|
renderClusterMarker: this._renderClusterMarker, // 自定义聚合点样式
|
|
|
|
|
maxZoom: 17,
|
|
|
|
|
styles: sts,
|
|
|
|
|
// renderClusterMarker: this._renderClusterMarker, // 自定义聚合点样式
|
|
|
|
|
renderMarker: this._renderMarker, // 自定义非聚合点样式
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
@ -1068,10 +1139,14 @@ export default {
|
|
|
|
|
videoPoint.push(obj)
|
|
|
|
|
})
|
|
|
|
|
this.count = videoPoint.length;
|
|
|
|
|
AMap.plugin(['AMap.MarkerCluster'],()=>{
|
|
|
|
|
|
|
|
|
|
AMap.plugin(['AMap.MarkerCluster','AMap.Size','AMap.Pixel'],()=>{
|
|
|
|
|
|
|
|
|
|
this.cluster = new AMap.MarkerCluster(this.map,videoPoint,{
|
|
|
|
|
gridSize: 20, // 设置网格像素大小
|
|
|
|
|
renderClusterMarker: this._renderClusterMarker, // 自定义聚合点样式
|
|
|
|
|
gridSize: 60, // 设置网格像素大小
|
|
|
|
|
styles: sts,
|
|
|
|
|
maxZoom: 17,
|
|
|
|
|
// renderClusterMarker: this._renderClusterMarker, // 自定义聚合点样式
|
|
|
|
|
renderMarker: this._DrenderMarker, // 自定义非聚合点样式
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
@ -1205,9 +1280,12 @@ export default {
|
|
|
|
|
// 执法人员强制观摩
|
|
|
|
|
watchClick(){
|
|
|
|
|
this.showVideo = true;
|
|
|
|
|
videoSurveillance({...this.videoCondition,imei:this.personInfo.info.imei}).then(res=>{
|
|
|
|
|
videoSurveillance({...this.videoCondition,destID:'9999' + this.personInfo.info.imei,imei:this.personInfo.info.imei}).then(res=>{
|
|
|
|
|
if(res.code == 200 && res.data.msg == '操作成功') {
|
|
|
|
|
this.initVideoPlayer(`http://121.229.2.163:9291/live/9999_${this.personInfo.info.userId}.flv`)
|
|
|
|
|
// http://121.229.2.163:9291/live/9999 http://120.27.25.166:9305/live/9999_
|
|
|
|
|
setTimeout(()=>{
|
|
|
|
|
this.initVideoPlayer(`http://121.229.2.163:9291/live/9999_${this.personInfo.info.userId}.flv`)
|
|
|
|
|
},3000)
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
@ -1226,19 +1304,6 @@ export default {
|
|
|
|
|
eventBtn(){
|
|
|
|
|
this.$refs.crewAssign.open();
|
|
|
|
|
},
|
|
|
|
|
// 监控视频大屏播放
|
|
|
|
|
playVideo(status){
|
|
|
|
|
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("该设备已离线");
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
// 监控视频上墙
|
|
|
|
|
monitorVideos(status){
|
|
|
|
|
// this.$refs.videoWall.open();
|
|
|
|
@ -1279,7 +1344,7 @@ export default {
|
|
|
|
|
// 二级网格获取
|
|
|
|
|
getWanggeGeoJson(){
|
|
|
|
|
|
|
|
|
|
bgridsetting({pageNum:1,pageSize:100}).then(res=>{
|
|
|
|
|
bgridsetting({pageNum:1,pageSize:100,level:1}).then(res=>{
|
|
|
|
|
console.log(res,"网格数据");
|
|
|
|
|
let W = []
|
|
|
|
|
res.rows.forEach((element)=>{
|
|
|
|
@ -1329,6 +1394,7 @@ export default {
|
|
|
|
|
// 围栏获取
|
|
|
|
|
getWeilanGeoJson(){
|
|
|
|
|
fence({ pageNum: 1, pageSize: 100 }).then((res) => {
|
|
|
|
|
// console.log(res,"围栏数据");
|
|
|
|
|
this.weilanData = res.rows;
|
|
|
|
|
this.weilanData.forEach((element,index) => {
|
|
|
|
|
let shapeStr = JSON.parse(element.shapeStr);
|
|
|
|
@ -1556,14 +1622,18 @@ export default {
|
|
|
|
|
},
|
|
|
|
|
// 子组件的实时定位事件
|
|
|
|
|
realTimeLocationClick(item){
|
|
|
|
|
this.map.setZoomAndCenter(16,[item.longitude,item.latitude]);
|
|
|
|
|
this.personLine.forEach(per=>{
|
|
|
|
|
if(item.imei == per.imei) {
|
|
|
|
|
this.map.setZoomAndCenter(16,[per.longitude,per.latitude]);
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
// 子组件的名称点击事件
|
|
|
|
|
divClick(lightedPolygonId){
|
|
|
|
|
// console.log(lightedPolygonId,"父组件的名称点击事件");
|
|
|
|
|
console.log(lightedPolygonId,"父组件的名称点击事件");
|
|
|
|
|
// 取消重点区域高亮
|
|
|
|
|
this.quyuData.forEach((element) => {
|
|
|
|
|
element.myPolygon.setOptions({
|
|
|
|
|
element.myPolygon?.setOptions({
|
|
|
|
|
strokeOpacity: 0,
|
|
|
|
|
strokeColor: '#FF0000',
|
|
|
|
|
fillColor: '#FF0000',
|
|
|
|
@ -1571,25 +1641,25 @@ export default {
|
|
|
|
|
editable:false,
|
|
|
|
|
visible:true,
|
|
|
|
|
});
|
|
|
|
|
element.text.setStyle({
|
|
|
|
|
element.text?.setStyle({
|
|
|
|
|
'color': '#F44444',
|
|
|
|
|
});
|
|
|
|
|
})
|
|
|
|
|
// 取消重点路段高亮
|
|
|
|
|
this.luduanData.forEach((element) => {
|
|
|
|
|
element.myPolyline.setOptions({
|
|
|
|
|
element.myPolyline?.setOptions({
|
|
|
|
|
strokeOpacity: 1,
|
|
|
|
|
strokeColor: '#46FF77',
|
|
|
|
|
editable:false,
|
|
|
|
|
visible:true,
|
|
|
|
|
});
|
|
|
|
|
element.text.setStyle({
|
|
|
|
|
element.text?.setStyle({
|
|
|
|
|
'color': '#46FF77',
|
|
|
|
|
});
|
|
|
|
|
})
|
|
|
|
|
// 取消考勤围栏高亮
|
|
|
|
|
this.weilanData.forEach((element) => {
|
|
|
|
|
element.myPolygon.setOptions({
|
|
|
|
|
element.myPolygon?.setOptions({
|
|
|
|
|
strokeOpacity: 0.9,
|
|
|
|
|
strokeColor: "#62E1FA",
|
|
|
|
|
fillColor: "#62E1FA",
|
|
|
|
@ -1597,13 +1667,13 @@ export default {
|
|
|
|
|
editable:false,
|
|
|
|
|
visible:true,
|
|
|
|
|
});
|
|
|
|
|
element.text.setStyle({
|
|
|
|
|
element.text?.setStyle({
|
|
|
|
|
'color': '#62E1FA',
|
|
|
|
|
});
|
|
|
|
|
})
|
|
|
|
|
// 取消区域网格高亮
|
|
|
|
|
gridding.features.forEach((element)=>{
|
|
|
|
|
element.myPolygon.setOptions({
|
|
|
|
|
this.wanggeData.forEach((element)=>{
|
|
|
|
|
element.myPolygon?.setOptions({
|
|
|
|
|
strokeColor: '#FFBF7A',
|
|
|
|
|
fillColor: '#DC8419',
|
|
|
|
|
strokeOpacity: 1,
|
|
|
|
@ -1611,7 +1681,7 @@ export default {
|
|
|
|
|
editable:false,
|
|
|
|
|
visible:true,
|
|
|
|
|
});
|
|
|
|
|
element.text.setStyle({
|
|
|
|
|
element.text?.setStyle({
|
|
|
|
|
'color': '#FFDBB7',
|
|
|
|
|
'text-shadow': '0px 1px 0px rgba(0,0,0,0.3)',
|
|
|
|
|
});
|
|
|
|
@ -1620,8 +1690,10 @@ export default {
|
|
|
|
|
this.highlightedPolygonId = lightedPolygonId.id;
|
|
|
|
|
if(lightedPolygonId.id == 1) {
|
|
|
|
|
// 区域网格
|
|
|
|
|
gridding.features.forEach((element)=>{
|
|
|
|
|
if(element.properties.COOD === lightedPolygonId.item.properties.COOD) {
|
|
|
|
|
this.wanggeData.forEach((element)=>{
|
|
|
|
|
// console.log(element,"element");
|
|
|
|
|
// let shapeStr = JSON.parse(element.shapeStr);
|
|
|
|
|
if(element.id === lightedPolygonId.item.id) {
|
|
|
|
|
element.myPolygon.setOptions({
|
|
|
|
|
strokeColor: '#46FF77',
|
|
|
|
|
fillColor: '#46FF77',
|
|
|
|
@ -1638,15 +1710,15 @@ export default {
|
|
|
|
|
this.map.setFitView(element.myPolygon);
|
|
|
|
|
} else {
|
|
|
|
|
element.myPolygon.setOptions({
|
|
|
|
|
strokeColor: '#FFBF7A',
|
|
|
|
|
fillColor: '#DC8419',
|
|
|
|
|
strokeColor: '#00C5EC',
|
|
|
|
|
fillColor: '#00AEFF',
|
|
|
|
|
fillOpacity: 0.4,
|
|
|
|
|
strokeOpacity: 1,
|
|
|
|
|
fillOpacity: 0.3,
|
|
|
|
|
editable:false,
|
|
|
|
|
visible:true,
|
|
|
|
|
});
|
|
|
|
|
element.text.setStyle({
|
|
|
|
|
'color': '#FFDBB7',
|
|
|
|
|
'color': '#00AEFF',
|
|
|
|
|
'text-shadow': '0px 1px 0px rgba(0,0,0,0.3)',
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
@ -1756,19 +1828,19 @@ export default {
|
|
|
|
|
this.isClickLingtedPolygonId = false;
|
|
|
|
|
if(this.highlightedPolygonId == 1) {
|
|
|
|
|
this.lightedPolygon.setOptions({
|
|
|
|
|
strokeColor: '#FFBF7A',
|
|
|
|
|
fillColor: '#DC8419',
|
|
|
|
|
strokeColor: '#00C5EC',
|
|
|
|
|
fillColor: '#00AEFF',
|
|
|
|
|
fillOpacity: 0.4,
|
|
|
|
|
strokeOpacity: 1,
|
|
|
|
|
fillOpacity: 0.3,
|
|
|
|
|
editable:false,
|
|
|
|
|
visible:true,
|
|
|
|
|
});
|
|
|
|
|
this.lightedText.setStyle({
|
|
|
|
|
'color': '#FFDBB7',
|
|
|
|
|
'color': '#00AEFF',
|
|
|
|
|
'text-shadow': '0px 1px 0px rgba(0,0,0,0.3)',
|
|
|
|
|
});
|
|
|
|
|
} else if(this.highlightedPolygonId == 2) {
|
|
|
|
|
console.log("进入区域取消高亮");
|
|
|
|
|
// console.log("进入区域取消高亮");
|
|
|
|
|
this.lightedPolygon.setOptions({
|
|
|
|
|
strokeOpacity: 0,
|
|
|
|
|
strokeColor: '#FF0000',
|
|
|
|
@ -2057,12 +2129,34 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
// 获取在线和离线人员的图标
|
|
|
|
|
getPersonIcon(){
|
|
|
|
|
listZhzz().then(res=>{
|
|
|
|
|
if(res.code == 200) {
|
|
|
|
|
this.onIcon = res.rows[0].onIcon ? process.env.VUE_APP_BASE_API + res.rows[0].onIcon : require("../../../assets/images/icon/icon1.png");
|
|
|
|
|
this.offIcon = res.rows[0].offIcon ? process.env.VUE_APP_BASE_API + res.rows[0].offIcon : require("../../../assets/images/icon/icon1.png");
|
|
|
|
|
// console.log(this.onIcon,'this.onIcon');
|
|
|
|
|
// console.log(this.offIcon,'this.offIcon');
|
|
|
|
|
const faviconUrl = res.rows[0].platformLogoUrl ? process.env.VUE_APP_BASE_API + res.rows[0].platformLogoUrl : require("@/assets/images/login-logo.png");
|
|
|
|
|
const faviconLink = document.querySelector('link[rel="icon"]');
|
|
|
|
|
const newLink = document.createElement('link');
|
|
|
|
|
newLink.setAttribute('rel', 'icon');
|
|
|
|
|
newLink.setAttribute('type', 'image/x-icon');
|
|
|
|
|
newLink.setAttribute('href', faviconUrl);
|
|
|
|
|
|
|
|
|
|
// 将新的 link 元素替换掉原来的 link 元素
|
|
|
|
|
faviconLink.parentNode.replaceChild(newLink, faviconLink);
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
mounted() {
|
|
|
|
|
this.getPersonIcon();
|
|
|
|
|
this.getCarList();
|
|
|
|
|
this.getrobotToken();
|
|
|
|
|
|
|
|
|
|
// this.markerInterval()
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|